/* ==========================================================================
   Storefront — katalog, product card, PDP, category view (Phase 5).
   Translated from the Tailwind classes in katalog.tsx / product-card.tsx /
   proizvod/$slug.tsx / category-view.tsx. No hardcoded colors or sizes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: breadcrumb, pills, tables
   -------------------------------------------------------------------------- */
.breadcrumb { font-size: 0.875rem; color: var(--muted-foreground); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb__sep { padding-inline: 0.5rem; }
.breadcrumb__current { color: var(--foreground); }

.pill {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pill:hover { color: var(--foreground); }

.table-wrap { margin-top: 0.75rem; overflow-x: auto; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.spec-table { min-width: 26.25rem; }
.data-table { min-width: 26.25rem; }
.data-table--wide { min-width: 32.5rem; }

.spec-table tr,
.data-table tbody tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child,
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table thead tr { border-bottom: 1px solid var(--border); }

.spec-table th {
  width: 50%;
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.spec-table td { padding-block: 0.625rem; font-weight: 500; color: var(--foreground); }

.data-table th {
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.data-table th:last-child { padding-right: 0; }
.data-table td { padding: 0.625rem 1rem 0.625rem 0; color: var(--muted-foreground); }
.data-table td:last-child { padding-right: 0; }
.data-table__lead { font-weight: 500; color: var(--foreground); }

.icon--primary { color: var(--primary); }
.icon--star { color: var(--primary); fill: var(--primary); }

/* --------------------------------------------------------------------------
   RUO notice — product-page spacing only. The notice itself is in main.css,
   because H3 gave it a home on the footer and on every article too.
   -------------------------------------------------------------------------- */
.ruo-notice--spaced { margin-top: 2rem; }
.ruo-notice--page-end { margin-top: 3rem; }

/* --------------------------------------------------------------------------
   Product grid + card
   -------------------------------------------------------------------------- */
/* The two ways out of /korpa, which is a full page away from browsing because
   this design has no cart drawer (docs/04 §3): an icon-only back arrow and
   "Nastavi kupovinu". */
.cart-nav { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.back-link--icon { padding: 0.5rem; }

/* Required, not belt-and-braces: `display: inline-flex` above outranks the UA
   stylesheet's `[hidden] { display: none }`, so without this the back arrow
   renders before main.js has decided whether there is anywhere to go back to.
   Same trap as .verify-result in Phase 9. */
.back-link[hidden] { display: none; }

.back-link:hover { color: var(--foreground); border-color: var(--primary); }

.product-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.product-card { display: flex; flex-direction: column; padding: 1.25rem; }
.product-card[hidden] { display: none; }

.product-card__media {
  position: relative;
  display: grid; place-items: center;
  margin-bottom: 1.25rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-image: linear-gradient(to bottom, var(--secondary), var(--card));
}
.product-card__grid {
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  opacity: 0.6;
}
.product-card__image {
  position: relative;
  height: 100%; width: 100%;
  object-fit: contain;
  padding: 1rem;
  transition: transform 0.3s ease;
}
.product-card__media:hover .product-card__image { transform: scale(1.05); }

.product-card__purity { position: absolute; top: 0.75rem; right: 0.75rem; letter-spacing: 0.08em; }
.product-card__stock { position: absolute; top: 0.75rem; left: 0.75rem; letter-spacing: 0.08em; }
.product-card__stock--out { background-color: var(--destructive); color: var(--destructive-foreground); }
.product-card__stock--below { top: auto; bottom: 0.75rem; }

/* Sale price on a card: struck price above the one that applies, reviews stay
   on the right, level with the new price. */
.product-card__pricing.product-card__pricing--sale { align-items: flex-end; }
.product-card__price .gift-price { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; }
.product-card__price .gift-price__was { font-size: 0.875rem; line-height: 1.2; }

.product-card__eyebrow { letter-spacing: 0.16em; }
.product-card__title {
  margin-top: 0.375rem;
  font-size: 1.125rem; font-weight: 600;
}
.product-card__title a:hover { color: var(--primary); }
.product-card__size { color: var(--muted-foreground); }

.product-card__blurb {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--muted-foreground);
}

/*
   The foot is a stack, not the export's two-column grid. Croatia's CTA reads
   "Pošalji zahtjev za narudžbu" — five times the width of "Dodaj u košaricu" —
   so beside a price it squeezed the price column to nothing and wrapped the
   label onto three lines in a 4-up grid. Price and reviews take the row the
   grid used to give them; the button owns the row below, full width.
*/
.product-card__foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.product-card__request-note {
  margin-bottom: 0.75rem;
  font-size: 0.6875rem; line-height: 1.45;
  color: var(--muted-foreground);
}
.product-card__pricing {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 0.25rem 0.75rem;
  min-width: 0;
}
.product-card__price { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.product-card__price--ask { font-size: 1.125rem; }
.product-card__reviews {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; color: var(--muted-foreground);
}
.product-card__cta {
  display: flex; justify-content: center;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.625rem 1rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Katalog
   -------------------------------------------------------------------------- */
.katalog__body { padding-block: 2rem; }

.katalog__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.katalog__filters[hidden] { display: none; }

.katalog__search { position: relative; width: 100%; min-width: 14rem; flex: 1 1 auto; }
@media (min-width: 640px) { .katalog__search { width: auto; max-width: 20rem; } }
.katalog__search-icon {
  position: absolute; left: 1rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}
.katalog__search-input { padding: 0.5rem 2.5rem 0.5rem 2.75rem; }
.katalog__search-input::-webkit-search-cancel-button { display: none; }
.katalog__search-clear {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  border-radius: var(--radius-full);
  padding: 0.375rem;
  color: var(--muted-foreground);
}
.katalog__search-clear:hover { color: var(--foreground); }
.katalog__search-clear[hidden] { display: none; }

.katalog__select {
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.katalog__select:focus { border-color: var(--primary); }
.katalog__select.is-active {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--foreground);
}
.katalog__select--sort { color: var(--foreground); }

.katalog__sort { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--muted-foreground); }

.katalog__reset {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.katalog__reset:hover { color: var(--foreground); }
.katalog__reset[hidden] { display: none; }

.katalog__count { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.katalog__body .product-grid { margin-top: 1rem; }

/* "Učitaj više". katalog-filter.js decides when this is on screen — it is the
   only thing that knows how many cards the current filter matched — so there is
   deliberately no media query here to disagree with the one in the script. */
.katalog__more { display: flex; justify-content: center; margin-top: 1.5rem; }
.katalog__more[hidden] { display: none; }

.katalog__empty { margin-top: 1rem; padding: 2rem; text-align: center; }
.katalog__empty[hidden] { display: none; }
.katalog__empty-text { font-size: 0.875rem; color: var(--muted-foreground); }
.katalog__empty .btn { margin-top: 1rem; padding: 0.625rem 1.5rem; }

.katalog__seo { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 1024px) { .katalog__seo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.katalog__seo-card { padding: 2rem; }
@media (min-width: 1024px) { .katalog__seo-card--wide { grid-column: span 2; } }
.katalog__seo-title { font-size: 1.5rem; font-weight: 600; }
.katalog__seo-lead { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.katalog__seo-text { margin-top: 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.katalog__seo-text--fine { font-size: 0.75rem; }
.katalog__cat-pills { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   Category view
   -------------------------------------------------------------------------- */
.category-view__intro-section { padding-block: 3rem; }
.category-view__intro { margin-top: 2rem; padding: 1.5rem; }
@media (min-width: 640px) { .category-view__intro { padding: 2rem; } }
.category-view__intro-title { font-size: 1.5rem; font-weight: 600; }
.category-view__intro-body { margin-top: 1rem; color: var(--muted-foreground); }

.category-view__guides { margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.category-view__guides .eyebrow { display: block; margin-bottom: 0.75rem; letter-spacing: 0.16em; }
.category-view__guide-list { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .category-view__guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.category-view__guide-link {
  display: inline-flex; align-items: center; gap: 0.375rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--primary);
}
.category-view__guide-link:hover { text-decoration: underline; }

.category-view__products { padding-bottom: 3rem; }
.category-view__section-title { margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 600; }
.category-view__products .product-grid { gap: 1.25rem; }

.category-view__faq-section { max-width: 56rem; padding-bottom: 5rem; }
.category-view__faq { display: grid; gap: 1rem; }
.category-view__faq-item { padding: 1.25rem; }
.category-view__faq-q { font-size: 1.125rem; font-weight: 600; }
.category-view__faq-a { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.category-view__links { margin-top: 2rem; font-size: 0.875rem; color: var(--muted-foreground); }
.category-view__links a { font-weight: 500; color: var(--primary); }
.category-view__links a:hover { text-decoration: underline; }
.category-view__links-sep { padding-inline: 0.5rem; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */
.product { padding-top: 2.5rem; padding-bottom: 3rem; }

.product__top { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .product__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product__media { display: grid; place-items: center; padding: 1.5rem; }
.product__media-grid { position: absolute; inset: 0; opacity: 0.6; }
.product__image { position: relative; max-height: 26.25rem; width: 100%; object-fit: contain; }

.product__info { padding: 1.5rem; }
@media (min-width: 640px) { .product__info { padding: 2rem; } }
.product__title {
  margin-top: 0.5rem;
  font-size: 1.875rem; font-weight: 600;
  letter-spacing: -0.025em;
}
@media (min-width: 640px) { .product__title { font-size: 2.25rem; } }
.product__size { color: var(--muted-foreground); }
.product__meta {
  margin-top: 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.product__price { margin-top: 1.25rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; }
.product__payment-note { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.product__payment-note strong { color: var(--foreground); }
.product__price .gift-price { gap: 0.625rem; }
.product__sale-badge { margin-left: 0.5rem; vertical-align: middle; font-size: 0.75rem; }
.product__sale-note { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--foreground); }
.product__gift-text { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.product__gift .product__actions-row { margin-top: 1.25rem; }

.product__actions { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.product__actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.product__actions .btn { padding: 0.75rem 1.5rem; }
.product__cart-form { margin: 0; }
.product__request-note {
  /* 29rem holds the sentence to three lines under the two buttons. No media
     query: on a phone the column is already narrower than this, so the cap
     only ever bites on desktop. */
  max-width: 29rem;
  font-size: 0.75rem; line-height: 1.5;
  color: var(--muted-foreground);
}
.product__sold-out { color: var(--muted-foreground); cursor: default; }

.product__lab {
  margin-top: 1.5rem;
  display: grid; gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background-color: var(--muted);
  padding: 1.25rem;
}
@media (min-width: 640px) {
  .product__lab { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
}
.product__lab-logo { height: 2.5rem; width: 2.5rem; border-radius: var(--radius-full); object-fit: contain; }
.product__lab-body { min-width: 0; }
.product__lab-title { font-size: 0.875rem; font-weight: 600; }
.product__lab-meta { font-size: 0.75rem; color: var(--muted-foreground); }
.product__lab-meta a { font-weight: 600; color: var(--foreground); }
.product__lab-meta a:hover { color: var(--primary); }
.product__lab-cta { padding: 0.5rem 1rem; }

.product__trust {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: grid; gap: 0.75rem;
  font-size: 0.875rem; color: var(--muted-foreground);
}
@media (min-width: 640px) { .product__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.product__trust li { display: flex; align-items: center; gap: 0.5rem; }
.product__ruo-micro { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }

.product__section { margin-top: 1.5rem; padding: 1.5rem; }
@media (min-width: 640px) { .product__section { padding: 2rem; } }
.product__section-title { font-size: 1.5rem; font-weight: 600; }
.product__sub-title { margin-top: 1.5rem; font-size: 1.125rem; font-weight: 600; }
.product__sub-title--spaced { margin-top: 2rem; }
.product__description { margin-top: 1rem; max-width: 48rem; }
.product__note { margin-top: 0.5rem; max-width: 48rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.product__note--link { margin-top: 1rem; }
.product__note--link a { font-weight: 500; color: var(--primary); }
.product__note--link a:hover { text-decoration: underline; }

.product__guides { margin-top: 1rem; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .product__guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product__guides a { font-size: 0.875rem; font-weight: 500; color: var(--primary); }
.product__guides a:hover { text-decoration: underline; }

.product__refs { margin-top: 1rem; display: grid; gap: 0.625rem; font-size: 0.875rem; }
@media (min-width: 640px) { .product__refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product__refs li { display: flex; gap: 0.5rem; }
.product__refs .icon { margin-top: 0.125rem; }
.product__refs a { color: var(--muted-foreground); }
.product__refs a:hover { color: var(--primary); }
.product__ref-source { display: block; font-size: 0.75rem; opacity: 0.7; }

.product__related { margin-top: 3rem; }
.product-grid--related { margin-top: 1.5rem; }
@media (min-width: 1024px) { .product-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Prose blocks — imported product descriptions (extractor HTML)
   -------------------------------------------------------------------------- */
.prose-blocks { font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }
.prose-blocks > * + * { margin-top: 1rem; }
.prose-blocks strong { color: var(--foreground); }
.prose-blocks a { color: var(--primary); }
.prose-blocks a:hover { text-decoration: underline; }
.prose-blocks h3 {
  margin-top: 1.5rem;
  font-size: 1.125rem; font-weight: 600;
  color: var(--foreground);
}
@media (min-width: 640px) { .prose-blocks h3 { font-size: 1.25rem; } }
.prose-blocks h4 {
  margin-top: 1.25rem;
  font-size: 1rem; font-weight: 600;
  color: var(--foreground);
}
.prose-blocks ul, .prose-blocks ol { display: grid; gap: 0.5rem; padding-left: 0.25rem; }
.prose-blocks ul li { position: relative; padding-left: 1rem; }
.prose-blocks ul li::before {
  content: "";
  position: absolute; left: 0; top: 0.6875rem;
  width: 0.375rem; height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
}
.prose-blocks ol { counter-reset: peptidi-ol; }
.prose-blocks ol li { position: relative; padding-left: 1.5rem; counter-increment: peptidi-ol; }
.prose-blocks ol li::before {
  content: counter(peptidi-ol) ".";
  position: absolute; left: 0;
  font-weight: 600;
  color: var(--primary);
}
.prose-blocks table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.prose-blocks thead tr,
.prose-blocks tbody tr { border-bottom: 1px solid var(--border); }
.prose-blocks tbody tr:last-child { border-bottom: 0; }
.prose-blocks th {
  padding: 0.625rem 1rem 0.625rem 0;
  text-align: left; font-weight: 500;
  color: var(--muted-foreground);
}
.prose-blocks td { padding: 0.625rem 1rem 0.625rem 0; }
.prose-blocks blockquote {
  border-left: 2px solid var(--primary);
  padding-left: 1rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   WooCommerce notices (add-to-cart feedback until Phase 6 makes it AJAX)
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
}
.woocommerce-error { border-left-color: var(--destructive); }
.woocommerce-message .button,
.woocommerce-info .button {
  order: 2;
  border-radius: var(--radius-full);
  background-color: var(--ink); color: var(--ink-foreground);
  padding: 0.375rem 1rem;
  font-size: 0.8125rem; font-weight: 600;
}

/* --------------------------------------------------------------------------
   Shared: page intro, notice cards, order totals, quantity stepper, notices
   Used by /korpa, /naplata and the order-received screen (Phase 6).
   -------------------------------------------------------------------------- */
.page-intro__title { margin-top: 0.75rem; font-size: 1.875rem; font-weight: 600; }
@media (min-width: 640px) { .page-intro__title { font-size: 2.25rem; } }
.page-intro__lead {
  margin-top: 0.5rem;
  max-width: 42rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.notice-card {
  margin-top: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--primary);
  background-color: var(--primary-soft);
  padding: 1rem;
}
.notice-card__icon { margin-top: 0.125rem; color: var(--primary); }
.notice-card__text { font-size: 0.875rem; line-height: 1.65; }

.order-totals { margin-top: 1.25rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.order-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.order-totals__label { color: var(--muted-foreground); }
.order-totals__value { font-weight: 500; }
.order-totals__row--discount { color: var(--primary); }
.order-totals__row--discount .order-totals__label { color: inherit; }
.order-totals__remove {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-decoration: underline;
}
.order-totals__remove:hover { color: var(--foreground); }
.order-totals__note { font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); }
.order-totals__note--sale { font-weight: 600; color: var(--foreground); }
.order-totals__row--total { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.order-totals__row--total .order-totals__label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.order-totals__grand { text-align: right; }
.order-totals__grand-eur {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--card);
}
.qty-stepper__btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
}
.qty-stepper__btn:hover { color: var(--foreground); }
.qty-stepper__value {
  width: 2.25rem;
  border: 0;
  background: none;
  padding: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-stepper__value::-webkit-outer-spin-button,
.qty-stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper--sm .qty-stepper__btn { width: 1.75rem; height: 1.75rem; }
.qty-stepper--sm .qty-stepper__value { width: 1.75rem; font-size: 0.75rem; }

.trust-list { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.trust-list__item { display: flex; align-items: center; gap: 0.5rem; }

/* WooCommerce notices — the only markup on these pages we do not author. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin-bottom: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.875rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.6;
  list-style: none;
}
.woocommerce-message { border-color: var(--primary); background-color: var(--primary-soft); }
.woocommerce-info { border-color: var(--border); background-color: var(--secondary); margin-top: 1.25rem; }
.woocommerce-error { border-color: var(--destructive); background-color: oklch(0.577 0.245 27.325 / 0.08); }
.woocommerce-error li + li { margin-top: 0.375rem; }
.woocommerce-message a,
.woocommerce-info a { font-weight: 600; color: var(--primary); text-decoration: underline; }

/* Inside an error, WooCommerce wraps each field NAME in a link that focuses the
   field — worth keeping, but styling it as a standard link turned the whole
   summary into blue underlined text with the actual message hidden between the
   links. Carry the error colour instead, and keep the affordance as weight plus
   an underline that only asserts itself on hover. */
.woocommerce-error { color: var(--destructive); }
.woocommerce-error a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-underline-offset: 0.15em;
}
.woocommerce-error a:hover,
.woocommerce-error a:focus-visible { text-decoration-color: currentColor; }
.woocommerce-message .button,
.woocommerce-info .button { margin-left: 0.5rem; font-weight: 600; text-decoration: underline; }

/* --------------------------------------------------------------------------
   /korpa (korpa.tsx)
   -------------------------------------------------------------------------- */
.cart-page { padding-block: 3rem; }
.cart-page__body { margin-top: 2rem; }
.cart-page__body.is-busy { opacity: 0.55; pointer-events: none; }

.cart-page__grid { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 1024px) { .cart-page__grid { grid-template-columns: minmax(0, 1fr) 22.5rem; } }

.cart-items { padding: 0.5rem; }
@media (min-width: 640px) { .cart-items { padding: 1rem; } }

.cart-progress { border-bottom: 1px solid var(--border); padding: 0.5rem 0.75rem 1rem; }
.cart-progress__text { font-size: 0.875rem; color: var(--muted-foreground); }
.cart-progress__text strong { color: var(--foreground); font-weight: 600; }
.cart-progress__track {
  margin-top: 0.75rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.cart-progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  width: var(--cart-progress, 0%);
  transition: width 0.5s ease;
}

.cart-items__list > .cart-row + .cart-row { border-top: 1px solid var(--border); }
.cart-items__update { padding: 0.75rem; }

.cart-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.75rem;
}
@media (min-width: 640px) {
  .cart-row { grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; }
}
.cart-row__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-image: linear-gradient(to bottom, var(--secondary), var(--card));
}
.cart-row__image { height: 100%; width: 100%; object-fit: contain; padding: 0.5rem; }
.cart-row__body { min-width: 0; }
.cart-row__eyebrow { letter-spacing: 0.16em; }
.cart-row__title { margin-top: 0.125rem; font-size: 1rem; font-weight: 600; }
.cart-row__title a:hover { color: var(--primary); }
.cart-row__size { color: var(--muted-foreground); }
.cart-row__meta { margin-top: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.cart-row__actions { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.75rem; }
.cart-row__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.cart-row__remove:hover { color: var(--foreground); }
.cart-row__price {
  grid-column: span 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
@media (min-width: 640px) {
  .cart-row__price { grid-column: span 1; display: block; border-top: 0; padding-top: 0; text-align: right; }
}
.cart-row__price-eur { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }

.cart-summary { padding: 1.5rem; }
.cart-summary__title { font-size: 1.25rem; font-weight: 600; }
.cart-summary__cta { display: flex; width: 100%; margin-top: 0.5rem; padding-block: 0.75rem; }
.cart-summary__cta:first-of-type { margin-top: 1.5rem; }
.cart-summary__cta--muted { color: var(--muted-foreground); }
.cart-summary__cta--muted:hover { color: var(--foreground); }

.cart-coupon { margin-top: 1.25rem; }
.cart-coupon__label,
.checkout-coupon__toggle {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.cart-coupon__row { margin-top: 0.5rem; display: flex; gap: 0.5rem; }
.cart-coupon__field,
.checkout-coupon__field { position: relative; flex: 1 1 auto; min-width: 0; }
.cart-coupon__icon,
.checkout-coupon__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--muted-foreground);
}
.cart-coupon__input,
.checkout-coupon__input { padding: 0.5rem 0.75rem 0.5rem 2.5rem; }
.cart-coupon__submit,
.checkout-coupon__submit { flex-shrink: 0; padding-inline: 1rem; }
.cart-coupon__submit:hover,
.checkout-coupon__submit:hover { color: var(--primary); }

.cart-empty { padding: 2.5rem; text-align: center; }
.cart-empty__icon { margin-inline: auto; color: var(--muted-foreground); }
.cart-empty__text { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.cart-empty__cta { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   /naplata (naplata.tsx)
   -------------------------------------------------------------------------- */
.checkout-page { padding-block: 3rem; }
.checkout-page__notices:empty { display: none; }
.checkout-page__grid { margin-top: 2rem; display: grid; gap: 1rem; align-items: start; }

/* WooCommerce's checkout script prepends its own `.woocommerce-NoticeGroup` as a
   direct child of `form.checkout` — and that form IS this grid, so the notice
   took column one, pushed the form cards into the 26.25rem summary column and
   dropped the order summary onto a row of its own.

   Dropped entirely (Domagoj, 2026-08-31): every failure it lists is already
   shown against the field it belongs to, in red, so the summary was a duplicate
   that cost a full row above the form. The `grid-column` span stays as the
   fallback for any other notice group that lands in the grid — and so that
   un-hiding this one does not reintroduce the layout break. */
.checkout-page__grid > .woocommerce-NoticeGroup { grid-column: 1 / -1; }
.woocommerce-NoticeGroup-checkout { display: none; }
@media (min-width: 1024px) { .checkout-page__grid { grid-template-columns: minmax(0, 1fr) 26.25rem; } }
.checkout-page__main { display: grid; gap: 1rem; align-content: start; }

.checkout-card { padding: 1.5rem; overflow: visible; }
.checkout-card__title { font-size: 1.25rem; font-weight: 600; }

.checkout-fields { margin-top: 1.25rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .checkout-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.checkout-fields--notes { margin-top: 1.25rem; }
.checkout-fields__note { font-size: 0.75rem; color: var(--muted-foreground); }
.checkout-fields__note,
.peptidi-field--wide,
.checkout-optional { grid-column: 1 / -1; }

/* No longer a grid item — it sits outside `.checkout-fields` so WooCommerce's
   address reordering cannot reach it (see form-checkout.php) — so it needs its
   own spacing rather than the grid's gap. */
.checkout-fields__account { margin-top: 1rem; }

.peptidi-field { min-width: 0; }
.peptidi-field label,
.checkout-fields label:not(.checkbox):not(.checkout-checkbox):not(.sr-only) {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.peptidi-field .woocommerce-input-wrapper { display: block; }
.checkout-fields .input-text,
.checkout-fields select,
.checkout-fields textarea {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s ease;
}
.checkout-fields .input-text:focus,
.checkout-fields select:focus,
.checkout-fields textarea:focus { border-color: var(--primary); }
.checkout-fields textarea { min-height: 5.5rem; resize: vertical; }
.checkout-fields abbr.required { border: 0; color: var(--destructive); text-decoration: none; }
.checkout-fields .woocommerce-invalid .input-text,
.checkout-fields .woocommerce-invalid select { border-color: var(--destructive); }

.peptidi-field__error { display: block; margin-top: 0.375rem; font-size: 0.75rem; color: var(--destructive); }
.peptidi-field__error[hidden] { display: none; }

/* WooCommerce's own per-field validation message.
   Phase 6 drops WooCommerce's stylesheets, so this class arrives with nothing
   on it at all — rendering at the body's 16px, flush against the input it
   belongs to. Sized and spaced here rather than in `.peptidi-field__error`
   above, which is the theme's own message and a different element. */
.checkout-inline-error-message {
  font-size: 0.875rem;
  padding-top: 0.375rem;
  color: var(--destructive);
}

.checkout-optional__toggle {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.checkout-optional__toggle:hover { text-decoration: underline; }
.checkout-optional__toggle[hidden],
.checkout-optional__field[hidden] { display: none; }

.checkout-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.checkout-checkbox .input-checkbox {
  margin-top: 0.2rem;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}
.checkout-checkbox a { font-weight: 600; color: var(--primary); text-decoration: underline; }
.woocommerce-account-fields .create-account { margin-top: 0.75rem; }

.payment-methods { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
.payment-method__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.payment-method__card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.payment-method__card:hover { border-color: var(--primary); }
.payment-method__input:checked + .payment-method__card { border-color: var(--primary); background-color: var(--primary-soft); }
.payment-method__input:focus-visible + .payment-method__card { outline: 2px solid var(--ring); outline-offset: 2px; }
.payment-method__icon { margin-top: 0.125rem; color: var(--primary); }
.payment-method__body { min-width: 0; }
.payment-method__title { display: block; font-weight: 600; }
.payment-method__desc { margin-top: 0.25rem; display: block; font-size: 0.75rem; color: var(--muted-foreground); }
.payment-methods__noscript { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.payment-panel { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.payment-panel[hidden] { display: none; }
.payment-steps { display: grid; gap: 1rem; }
.payment-steps__item { display: flex; align-items: flex-start; gap: 0.75rem; }
.payment-steps__num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}
.payment-steps__text { font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.payment-steps__text strong { color: var(--foreground); font-weight: 600; }

.checkout-warning {
  margin-top: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--secondary);
  padding: 0.75rem;
}
.checkout-warning__text { font-size: 0.75rem; line-height: 1.65; color: var(--muted-foreground); }
.checkout-warning__text strong { color: var(--foreground); font-weight: 600; }
.checkout-warning__text a { font-weight: 600; color: var(--primary); text-decoration: underline; }

.checkout-summary { padding: 1.5rem; overflow: visible; }
/* The sticky summary has to clear **both** sticky bars, not guess at one.
   `top: 6rem` (96px) sat 11px *above* the header's bottom edge (107px: a 34px
   topbar plus a 73px header), so once it stuck, the top of the card slid under
   the header. The same expression the mobile menu already uses gives the real
   bottom of the stack, and 1.5rem on top of it is the breathing room. */
@media (min-width: 1024px) {
  .checkout-page__aside {
    position: sticky;
    top: calc( var(--topbar-height) + var(--header-height) + 1.5rem );
  }
}

.checkout-review__items { margin-top: 1.25rem; }
.checkout-review__item { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; }
.checkout-review__item + .checkout-review__item { border-top: 1px solid var(--border); }
.checkout-review__media {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--secondary);
}
.checkout-review__media img { height: 100%; width: 100%; object-fit: contain; padding: 0.25rem; }
.checkout-review__body { min-width: 0; flex: 1 1 auto; }
.checkout-review__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
}
.checkout-review__body .qty-stepper { margin-top: 0.375rem; }
.checkout-review__price { font-size: 0.875rem; font-weight: 600; }

.checkout-coupon { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.checkout-coupon__toggle { letter-spacing: normal; text-transform: none; font-size: 0.875rem; color: var(--primary); }
.checkout-coupon__toggle:hover { text-decoration: underline; }
.checkout-coupon__toggle[hidden] { display: none; }
.checkout-coupon__form { display: flex; gap: 0.5rem; }
.checkout-coupon__form[hidden] { display: none; }

.checkout-review .order-totals { border-top: 1px solid var(--border); padding-top: 1rem; }
.checkout-terms { margin-top: 1.25rem; }
.checkout-terms .checkout-checkbox { font-size: 0.75rem; }
.checkout-review__submit { display: flex; width: 100%; margin-top: 1.25rem; padding-block: 0.75rem; }
.checkout-review__ruo {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* WooCommerce's own login / register forms — plugin markup, kept in the design's
   clothes. The checkout login reminder uses them, and so does /nalog until
   Phase 7 replaces that page outright. */
.woocommerce-form {
  margin-bottom: 1rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
}
.woocommerce-form .form-row + .form-row { margin-top: 0.75rem; }
.woocommerce-form label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.woocommerce-form .input-text {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.woocommerce-form .button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.woocommerce-form .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 0.5rem; }
.woocommerce-form .lost_password { margin-top: 0.75rem; font-size: 0.875rem; }
.woocommerce-form .lost_password a { color: var(--primary); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Order received
   -------------------------------------------------------------------------- */
.order-received { padding-block: 3rem; }
.order-received__card { margin-top: 2rem; padding: 1.5rem; }
.order-received__lead { font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.order-received__lead strong { color: var(--foreground); }
.order-received__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.order-received__facts {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
@media (min-width: 640px) { .order-received__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.order-received__fact .eyebrow { display: block; margin-bottom: 0.25rem; letter-spacing: 0.16em; }
.order-received__fact strong { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.order-received__instructions { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--muted-foreground); }
.order-received__instructions p + p { margin-top: 0.75rem; }

.order-received .woocommerce-order-details,
.order-received .woocommerce-customer-details { margin-top: 2rem; }
.order-received .woocommerce-order-details__title,
.order-received .woocommerce-column__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; }
.order-received .woocommerce-table--order-details,
.order-received .woocommerce-table--order-details th,
.order-received .woocommerce-table--order-details td { text-align: left; }
.order-received .woocommerce-table--order-details {
  margin-top: 1rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.order-received .woocommerce-table--order-details th,
.order-received .woocommerce-table--order-details td {
  border-bottom: 1px solid var(--border);
  padding: 0.625rem 1rem 0.625rem 0;
}
.order-received .woocommerce-table--order-details tfoot th { color: var(--muted-foreground); font-weight: 500; }
.order-received address { margin-top: 0.75rem; font-style: normal; font-size: 0.875rem; line-height: 1.7; color: var(--muted-foreground); }

.woocommerce-form .woocommerce-privacy-policy-text,
.woocommerce-form .woocommerce-form-register__email-text {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
.woocommerce-form .woocommerce-privacy-policy-text a { color: var(--primary); text-decoration: underline; }
.woocommerce-form .button { margin-top: 1rem; }

.u-columns { display: grid; gap: 1rem; }
@media (min-width: 768px) { .u-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.u-column1 > h2, .u-column2 > h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Loyalty redemption box (peptidi-loyalty plugin, checkout order summary)
   -------------------------------------------------------------------------- */
.loyalty-redeem { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.loyalty-redeem__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted-foreground);
}
.loyalty-redeem__balance { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.loyalty-redeem__balance strong { color: var(--foreground); }
/* The two states that used to be an empty space. Rendering "why not" instead of
   nothing is the whole point — a box that vanishes reads as a missing feature. */
.loyalty-redeem--guest .loyalty-redeem__note,
.loyalty-redeem--empty .loyalty-redeem__note,
.loyalty-redeem--blocked .loyalty-redeem__note { margin-top: 0.5rem; }

.loyalty-redeem__choice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.625rem;
  font-size: 0.875rem;
  cursor: pointer;
}
.loyalty-redeem__choice input { margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--primary); }

/* The amount row. `:has()` keeps the field inert until "iskoristi" is chosen —
   no JavaScript, and the control still posts, so the server keeps deciding.
   Browsers without :has() simply show it enabled, which is the old behaviour
   and harmless: the mode radio is what the server reads. */
.loyalty-redeem__amount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.loyalty-redeem:has(input[name='peptidi_redeem_mode'][value='0']:checked) .loyalty-redeem__amount {
  opacity: 0.45;
  pointer-events: none;
}

.loyalty-redeem__input {
  width: 6.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.loyalty-redeem__unit { font-size: 0.875rem; color: var(--muted-foreground); }
.loyalty-redeem__value {
  margin-left: auto;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

/* The clamp notice. Switching to card payment shrinks the order by 10%, which
   can silently reduce the redemption — this is the only thing that says so. */
.loyalty-redeem__adjusted {
  margin-top: 0.5rem;
  border-radius: var(--radius-sm, 0.5rem);
  background-color: var(--primary-soft);
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  color: var(--accent-foreground);
}

.loyalty-redeem__rest { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--muted-foreground); }

/* -------------------------------------------------------------------------- */
/* Points receipt — order-received and /nalog → narudžbina                     */
/* -------------------------------------------------------------------------- */

.loyalty-receipt {
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklch, var(--primary-soft) 45%, transparent);
  padding: 1rem 1.25rem;
}
.loyalty-receipt__used { font-size: 0.9375rem; }
.loyalty-receipt__balance { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

.loyalty-redeem__select {
  margin-top: 0.5rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background-color: var(--card);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  outline: none;
}
.loyalty-redeem__select:focus { border-color: var(--primary); }
.loyalty-redeem__note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   /nalog — login + registration (nalog.tsx)
   -------------------------------------------------------------------------- */
.account-page { max-width: 64rem; padding-block: 3rem; }
@media (min-width: 1024px) { .account-page { padding-block: 4rem; } }
.account-page__notices:empty { display: none; }
.account-page__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .account-page__grid { grid-template-columns: minmax(0, 1fr) 23.75rem; } }

.account-page__title { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; }
.account-page__lead {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.account-tabs {
  margin-top: 1.5rem;
  display: inline-flex;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 0.25rem;
}
.account-tabs__pill {
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.account-tabs__pill:hover { color: var(--foreground); }
.account-tabs__pill.is-active { background-color: var(--primary); color: var(--primary-foreground); }

.account-benefits {
  margin-top: 1.5rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--primary-soft);
  background-color: var(--primary-soft);
  padding: 1.25rem;
}
@media (min-width: 640px) { .account-benefits { padding: 1.5rem; } }
.account-benefits[hidden] { display: none; }
.account-benefits__title { font-size: 1rem; font-weight: 600; }
.account-benefits__list { margin-top: 1rem; display: grid; gap: 0.75rem; font-size: 0.875rem; }
@media (min-width: 640px) { .account-benefits__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-benefits__item { display: flex; gap: 0.75rem; }
.account-benefits__icon { margin-top: 0.125rem; color: var(--primary); }
.account-benefits__label { display: block; font-weight: 600; }
.account-benefits__text { color: var(--muted-foreground); }

.account-form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .account-form { padding: 1.5rem; } }
.account-form[hidden] { display: none; }
.account-form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .account-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.account-field { display: grid; gap: 0.375rem; }
.account-field label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}
.account-field .input { width: 100%; }
.account-field__hint { font-size: 0.75rem; line-height: 1.5; color: var(--muted-foreground); }
.account-field__hint[hidden] { display: none; }
.account-field__error { font-size: 0.75rem; font-weight: 500; color: var(--destructive); }
.account-field__error[hidden] { display: none; }
.account-field [aria-invalid="true"] { border-color: var(--destructive); }

.account-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
}
.account-remember { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.account-remember .input-checkbox { width: 1rem; height: 1rem; accent-color: var(--primary); }
.account-form__link { font-weight: 500; color: var(--primary); }
.account-form__link:hover { text-decoration: underline; }
.account-form__submit { margin-top: 0.25rem; justify-content: center; padding-block: 0.75rem; }

.account-aside {
  height: fit-content;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--primary-soft);
  padding: 1.5rem;
}
.account-aside__title { font-size: 1.125rem; font-weight: 600; }
.account-aside__list { margin-top: 1rem; display: grid; gap: 1rem; font-size: 0.875rem; line-height: 1.6; }
.account-aside__item { display: flex; gap: 0.75rem; }
.account-aside__icon { margin-top: 0.125rem; color: var(--primary); }

/* --------------------------------------------------------------------------
   /profil — the loyalty dashboard (profil.tsx)
   -------------------------------------------------------------------------- */
.profil-page { max-width: 64rem; padding-block: 2.5rem; }
@media (min-width: 1024px) { .profil-page { padding-block: 3.5rem; } }
.profil-page__notices:empty { display: none; }

.profil-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.profil-head__title { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.025em; }
.profil-head__email { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.profil-head__logout { gap: 0.5rem; }

.profil-stats { margin-top: 2rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .profil-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil-stat {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
.profil-stat--accent { background-color: var(--primary-soft); }
.profil-stat__value { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; }
.profil-stat__label { font-size: 0.875rem; color: var(--muted-foreground); }

.profil-progress {
  margin-top: 1rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
.profil-progress__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.profil-progress__lead { font-size: 0.875rem; font-weight: 600; }
.profil-progress__rule { font-size: 0.75rem; color: var(--muted-foreground); }
.profil-progress__track {
  margin-top: 0.75rem;
  height: 0.5rem;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.profil-progress__bar {
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  width: var(--peptidi-progress, 0%);
  transition: width 0.5s ease;
}

.profil-tiers { margin-top: 1rem; display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .profil-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.profil-tier {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background-color: var(--background);
  padding: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.profil-tier.is-current { border-color: var(--primary); background-color: var(--primary-soft); }
.profil-tier__name { font-weight: 600; color: var(--foreground); }
.profil-tier__perk { margin-top: 0.25rem; }

.profil-page__grid { margin-top: 2rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 1024px) { .profil-page__grid { grid-template-columns: minmax(0, 1fr) 22.5rem; } }

.profil-form {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .profil-form { padding: 1.5rem; } }
.profil-form__title { font-size: 1.125rem; font-weight: 600; }
.profil-form__fields { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .profil-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-field--wide { grid-column: 1 / -1; }
.profil-form__submit { margin-top: 1.25rem; padding-block: 0.75rem; }
.profil-form__note { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.profil-form__note a { color: var(--primary); text-decoration: underline; }

.profil-side { display: grid; gap: 1rem; align-content: start; }
.profil-history,
.profil-links {
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.25rem;
}
@media (min-width: 640px) { .profil-history { padding: 1.5rem; } }
.profil-history__title,
.profil-links__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}
.profil-history__list { margin-top: 1rem; display: grid; gap: 0.75rem; }
.profil-history__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.profil-history__item:last-child { border-bottom: 0; padding-bottom: 0; }
.profil-history__desc { font-size: 0.875rem; font-weight: 500; }
.profil-history__date { margin-top: 0.125rem; font-size: 0.75rem; color: var(--muted-foreground); }
.profil-history__points { flex-shrink: 0; font-size: 0.875rem; font-weight: 600; }
.profil-history__points.is-positive { color: var(--primary); }
.profil-history__points.is-negative { color: var(--destructive); }
.profil-history__empty { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }

.profil-links__list { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.profil-links__list a { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); }
.profil-links__list a:hover { color: var(--foreground); }

/* --------------------------------------------------------------------------
   WooCommerce's own account endpoints (orders, addresses, account details)
   -------------------------------------------------------------------------- */
.account-endpoint { padding-block: 3rem; }
.account-endpoint__grid { margin-top: 2rem; display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .account-endpoint__grid { grid-template-columns: 14rem minmax(0, 1fr); } }

.account-nav__list { display: grid; gap: 0.25rem; }
.account-nav__link {
  display: block;
  border-radius: var(--radius-full);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
}
.account-nav__link:hover { background-color: var(--secondary); color: var(--foreground); }
.account-nav__item.is-active > .account-nav__link { background-color: var(--primary-soft); color: var(--accent-foreground); }

.account-endpoint__content { min-width: 0; font-size: 0.875rem; line-height: 1.65; }
.account-endpoint__content h2,
.account-endpoint__content h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; }
.account-endpoint__content p { margin-bottom: 0.75rem; }
.account-endpoint__content a { color: var(--primary); }
.account-endpoint__content a:hover { text-decoration: underline; }

.woocommerce-orders-table,
.woocommerce-table--order-details,
.shop_table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.shop_table th,
.shop_table td {
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem 0.75rem 0;
}
.woocommerce-orders-table th { font-weight: 600; color: var(--muted-foreground); }
.woocommerce-orders-table .button,
.account-endpoint__content .button,
.account-endpoint__content button[type="submit"] {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.woocommerce-orders-table .button:hover,
.account-endpoint__content .button:hover { opacity: 0.9; }
.account-endpoint__content .woocommerce-Address { margin-bottom: 1.5rem; }
.account-endpoint__content address { font-style: normal; line-height: 1.7; color: var(--muted-foreground); }
.account-endpoint__content .woocommerce-Addresses { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .account-endpoint__content .woocommerce-Addresses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.account-endpoint__content .form-row { margin-bottom: 0.875rem; }
.account-endpoint__content label { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); }
.account-endpoint__content .input-text,
.account-endpoint__content select {
  margin-top: 0.375rem;
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--card);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.account-endpoint__content fieldset { border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem; margin-block: 1rem; }
.account-endpoint__content legend { padding-inline: 0.5rem; font-weight: 600; }

/* The card discount paused for an Akcija (inc/card-discount.php). Cart and
   checkout only — both uncached, so this appears and disappears with the
   switch. */
.card-paused {
  margin: 0 0 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-foreground);
  border-radius: var(--radius-lg);
  background-color: var(--secondary);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--foreground);
}

.card-paused strong { font-weight: 600; }
.card-paused__inline { display: block; margin-top: 0.25rem; color: var(--accent-foreground); }

/* Compliance notices on the product page (base styles in main.css). */
.not-medicine-bar--spaced { margin-top: 1rem; }
.research-data-notice--spaced { margin-top: 0.75rem; margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Istraživački kontekst zahtjeva (blagajna.tsx:205)
   -------------------------------------------------------------------------- */
.research-context {
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: color-mix(in oklab, var(--secondary) 35%, var(--card));
  padding: 1rem;
}
.research-context__title { font-size: 0.875rem; font-weight: 600; }
.research-context__lead {
  margin-top: 0.25rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.research-context__row { margin-top: 0.75rem; }
.research-context__input { width: 100%; }
.research-context__check { margin-top: 0.75rem; }
.research-context__check .checkout-checkbox { font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }

/* Compliance notices on the checkout (base styles in main.css). */
.not-medicine-bar--checkout { margin-top: 1rem; }
.antidoping-notice--checkout { margin-top: 1rem; }
.order-received__cta { margin-top: 1.5rem; }

/* "Preporučeni proizvodi" under the cart (kosarica.tsx:312). */
.cart-recommended { margin-top: 3.5rem; }
.cart-recommended__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.cart-recommended__grid { margin-top: 1.25rem; }