/* Self-hosted Sora + Manrope. Nothing is requested from Google (GDPR).
   These are VARIABLE fonts: one file carries the whole weight axis (Manrope
   200-800, Sora 400-800), so a weight range is declared and the browser picks
   the instance. There were sixteen @font-face rules here, one per weight per
   subset, each naming its own file - but the files were byte-identical in
   groups of four, so /katalog/ fetched 12 font files that were only 4 distinct
   ones, ~250 KiB of transfer for 75 KiB of font. Four rules, four files now.
   Do not re-split this per weight: a static-weight rule per file would download
   the same variable font again under a different name.
   Serbian needs latin-ext on essentially every page (c c d s z), so both
   subsets load anyway and both are preloaded in peptidi_preload_fonts(). */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Peptidi — main stylesheet
   Tokens are copied VERBATIM from theme/src/styles.css (oklch, light only).
   BEM classes; no utility framework. See docs/02-design-system.md.
   ========================================================================== */

:root {
  --radius: 1rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --radius-2xl: calc(var(--radius) + 8px);
  --radius-3xl: calc(var(--radius) + 12px);
  --radius-4xl: calc(var(--radius) + 16px);
  --radius-full: 9999px;

  --background: oklch(0.988 0.002 247.858);
  --foreground: oklch(0.208 0.042 265.755);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.208 0.042 265.755);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.208 0.042 265.755);
  --primary: oklch(0.623 0.214 259.815);
  --primary-foreground: oklch(1 0 0);
  --primary-soft: oklch(0.951 0.026 258);
  --secondary: oklch(0.949 0.009 247.896);
  --secondary-foreground: oklch(0.208 0.042 265.755);
  --muted: oklch(0.949 0.009 247.896);
  --muted-foreground: oklch(0.6 0.033 256.788);
  --accent: oklch(0.951 0.026 258);
  --accent-foreground: oklch(0.45 0.19 259);
  --ink: oklch(0.23 0.032 264);
  --ink-foreground: oklch(0.98 0.003 247.858);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.984 0.003 247.858);
  --border: oklch(0.925 0.011 255.508);
  --input: oklch(0.925 0.011 255.508);
  --ring: oklch(0.623 0.214 259.815);

  --gradient-hero: linear-gradient(160deg, oklch(1 0 0) 0%, oklch(0.97 0.012 250) 45%, oklch(0.945 0.032 256) 100%);
  --gradient-accent: linear-gradient(135deg, oklch(0.623 0.214 259.815), oklch(0.72 0.145 233));
  --shadow-soft: 0 1px 2px oklch(0.5 0.04 258 / 0.06), 0 12px 32px -16px oklch(0.5 0.04 258 / 0.35);
  --shadow-lift: 0 2px 6px oklch(0.5 0.04 258 / 0.08), 0 28px 60px -28px oklch(0.5 0.04 258 / 0.45);

  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;

  --container: 80rem;
  --header-z: 50;
  /* Fixed header row. The mobile menu opens flush under it; JS overrides
     --header-bottom with the measured value. */
  --header-height: 4.5rem;
  /* The topbar is sticky too, so the header has to start below it rather than
     at 0. Pinned with min-height for the same reason --header-height is: the
     value is load-bearing now, and a copy change that made the bar taller would
     otherwise hide a strip of the header behind it. Measured at 34px. */
  --topbar-height: 2.125rem;

  /* Scroll-to-top geometry. The toast stack shares the same corner and reads
     these to sit above the button instead of on top of it. */
  --scroll-top-size: 2.75rem;
  --scroll-top-inset: 1.5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }
/* `scrollbar-gutter: stable` reserves the scrollbar's width whether or not a
   scrollbar is showing, which is the fix for a shift this theme causes **four**
   times over: the cart drawer, the mobile nav, the age gate and the promo popup
   all lock scrolling with `overflow: hidden`, and every one of them therefore
   took the page's scrollbar away and let the content jump ~15px to the right.
   Reserving the gutter once here costs a 15px strip on short pages and removes
   the jump from all four at no further cost. Safari before 18.2 ignores it and
   behaves exactly as it does today, so there is nothing to fall back to. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  margin: 0;
}
h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
::placeholder { color: var(--muted-foreground); opacity: 1; }

.screen-reader-text, .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container { padding-inline: 1.5rem; } }

.section { padding-block: 3rem; }
@media (min-width: 640px) { .section { padding-block: 4rem; } }
.section--hero { padding-block: 3.5rem; }
@media (min-width: 640px) { .section--hero { padding-block: 5rem; } }

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */
.bento-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--card);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.bento-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.bento-card--static:hover { box-shadow: var(--shadow-soft); transform: none; }
.bento-card--ink { background-color: var(--ink); color: var(--ink-foreground); border-color: transparent; }

.surface-hero { background-image: var(--gradient-hero); }
.text-gradient {
  background-image: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grid-lines {
  background-image:
    linear-gradient(to right, oklch(0.6 0.03 258 / 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.6 0.03 258 / 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.eyebrow--accent { color: var(--accent-foreground); }

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-full);
  background-color: var(--primary-soft);
  color: var(--accent-foreground);
  padding: 0.25rem 0.625rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.icon { width: 1rem; height: 1rem; flex-shrink: 0; }
.icon--sm { width: 0.875rem; height: 0.875rem; }
.icon--lg { width: 1.25rem; height: 1.25rem; }
.icon--xl { width: 1.5rem; height: 1.5rem; }

/* Buttons — pill-shaped, three tones (doc 02). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  padding: 0.625rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background-color: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { opacity: 0.9; }
.btn--ink { background-color: var(--ink); color: var(--ink-foreground); }
.btn--ink:hover { opacity: 0.9; }
.btn--outline { border: 1px solid var(--border); background-color: var(--card); }
.btn--outline:hover { border-color: var(--primary); }
.btn--lg { padding: 0.75rem 1.5rem; }

.input {
  width: 100%;
  border: 1px solid var(--input);
  border-radius: var(--radius-xl);
  background-color: var(--background);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  outline: none;
}
.input:focus { box-shadow: 0 0 0 2px var(--ring); }
.input--pill { border-radius: var(--radius-full); background-color: var(--card); border-color: var(--border); }
.input--pill:focus { box-shadow: none; border-color: var(--primary); }

/* --------------------------------------------------------------------------
   Compliance notices (inc/compliance.php)
   --------------------------------------------------------------------------
   Four notices that print on pages owned by four different stylesheets — the
   footer on every page, an article, a product, the checkout — so they live in
   main.css, which is the only one loaded everywhere.

   They are deliberately not one component with modifiers. The RUO notice is a
   card with a heading, the not-medicine bar is a warning strip, the antidoping
   pair is two lines of small print and the research-data note is a single
   tinted paragraph. Sharing a base class would have meant undoing it three
   times.
   -------------------------------------------------------------------------- */
.ruo-notice {
  display: flex; gap: 0.75rem;
  padding: 1.25rem;
  font-size: 0.875rem; line-height: 1.6;
  color: var(--muted-foreground);
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
  background-color: color-mix(in oklab, var(--primary-soft) 40%, var(--card));
}
@media (min-width: 640px) { .ruo-notice { padding: 1.5rem; } }
.ruo-notice__icon { margin-top: 0.125rem; flex-shrink: 0; color: var(--primary); }
.ruo-notice__body { min-width: 0; display: grid; gap: 0.5rem; }
.ruo-notice__body strong { color: var(--foreground); }
.ruo-notice__title {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 600;
  color: var(--foreground);
}
.ruo-notice__link {
  justify-self: start;
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--primary);
}
.ruo-notice__link:hover { text-decoration: underline; }

.not-medicine-bar {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--destructive) 30%, transparent);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklab, var(--destructive) 5%, var(--card));
  font-size: 0.875rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.not-medicine-bar__icon { margin-top: 0.125rem; flex-shrink: 0; color: var(--destructive); }
.not-medicine-bar__text strong { color: var(--foreground); }
.not-medicine-bar__text a { text-decoration: underline; }
.not-medicine-bar__text a:hover { color: var(--foreground); }

.antidoping-notice {
  display: grid; gap: 0.75rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.antidoping-notice__row { display: flex; align-items: flex-start; gap: 0.5rem; }
.antidoping-notice__icon { margin-top: 0.1875rem; flex-shrink: 0; color: var(--primary); }
.antidoping-notice strong { color: var(--foreground); }

.research-data-notice {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in oklab, var(--secondary) 40%, var(--card));
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.research-data-notice strong { color: var(--foreground); }

/* --------------------------------------------------------------------------
   FAQ cards
   --------------------------------------------------------------------------
   Shared by the four Phase 9 page FAQs and the homepage's five grouped
   sections, so it lives here rather than in pages.css — the homepage does not
   load that stylesheet and six rules are not worth 617 lines of landing-page
   CSS. The group head (label / rule / count) only appears on the homepage.
   -------------------------------------------------------------------------- */

.faq-cards { display: grid; gap: 1rem; }
.faq-cards__item { padding: 1.25rem; }

.faq-cards__q {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
}

.faq-cards__a {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.faq-cards__group-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) { .faq-cards__group-head { margin-top: 2.5rem; } }
.faq-cards__rule { flex: 1; height: 1px; background-color: var(--border); }

.faq-cards__count {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Announcement bar (inc/announcement.php) -- above the topbar, not sticky
   -------------------------------------------------------------------------- */
.announce {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 0.5rem 2.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}
.announce-closed .announce,
.announce.is-closed { display: none; }
.announce__inner {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
}
.announce__text { font-weight: 500; }
.announce__button {
  flex-shrink: 0;
  border-radius: 999px;
  background-color: var(--primary-foreground);
  color: var(--primary);
  padding: 0.125rem 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-decoration: none;
  white-space: nowrap;
}
.announce__button:hover { opacity: 0.9; }
.announce__close {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.announce__close:hover { background-color: oklch(1 0 0 / 0.15); }
.announce__close-icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   Top bar (Telegram)
   -------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--header-z);
  display: flex;
  min-height: var(--topbar-height);
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--ink);
  color: var(--ink-foreground);
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.75rem;
}
.topbar__icon { display: none; }
@media (min-width: 640px) { .topbar__icon { display: block; width: 0.875rem; height: 0.875rem; } }
/* The ellipsis stays as a safety valve for very narrow screens; it is no longer
   the normal state on a phone. */
.topbar__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__text--full { display: none; }
@media (min-width: 640px) {
  .topbar__text--short { display: none; }
  .topbar__text--full { display: block; }
}
.topbar__link {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--primary-foreground);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--header-z);
  border-bottom: 1px solid oklch(0.925 0.011 255.508 / 0.7);
  background-color: oklch(0.988 0.002 247.858 / 0.8);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
/* The header keeps a fixed 4.5rem row whatever sits in it. The wordmark was
   removed and the logo grew into the space it left (2.75rem -> 3.25rem), and the
   block padding shrank by exactly the same amount so the header height did not
   move: 44 + 2x14 = 72px before, 52 + 2x10 = 72px now. min-height pins it so a
   future change to either value cannot quietly resize the header. */
.site-header__inner {
  display: grid;
  /*
     The brand column is `auto`, not `minmax(0, 1fr)`.
     With 1fr the actions column won its `auto` width first and the brand got
     what was left — which, once the Croatian nav gained a tenth item
     (Dostava, H1e), was **nothing**. The column measured 0px, the global
     `img { max-width: 100% }` resolved against it, and the logo disappeared
     from every desktop page. It was the actions that needed to give, not the
     logo.
  */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  min-height: var(--header-height);
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.625rem 1rem;
}
@media (min-width: 640px) { .site-header__inner { padding-inline: 1.5rem; } }

.site-header__brand { display: flex; min-width: 0; align-items: center; }
/*
   Height-driven, not a square box. The Croatian mark is wider than it is tall
   (497 x 367 after H7 trimmed the transparent bands off it), so `contain` inside
   a square fitted it by width and drew it about a third shorter than the Serbian
   logo at the same nominal size — which is what "make it bigger like the Serbian
   page" was actually about. Fixing the height makes the two optically equal and
   lets the width follow the artwork.
*/
.site-header__logo { height: 3.25rem; width: auto; flex-shrink: 0; object-fit: contain; }

.site-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; }

/* Some of the width freed by dropping the wordmark goes here, so the nav is not
   crowded against the cart pill. */
.site-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1200px) { .site-nav { display: flex; margin-right: 0.5rem; } }
.site-nav__link {
  border-radius: var(--radius-full);
  padding: 0.5rem 0.6875rem;
  white-space: nowrap;
  font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.site-nav__link:hover { color: var(--foreground); }
.site-nav__link.is-active { background-color: var(--primary-soft); color: var(--accent-foreground); }

.cart-pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--radius-full);
  background-color: var(--primary); color: var(--primary-foreground);
  padding: 0.5rem 1rem;
  font-size: 0.875rem; font-weight: 600;
  transition: opacity 0.15s ease;
}
.cart-pill:hover { opacity: 0.9; }
.cart-pill__label { display: none; }
@media (min-width: 640px) { .cart-pill__label { display: inline; } }
.cart-pill__total { font-family: var(--font-display); }
.cart-pill__count {
  position: absolute; top: -0.25rem; right: -0.25rem;
  display: grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem;
  border-radius: var(--radius-full);
  background-color: var(--ink); color: var(--ink-foreground);
  padding-inline: 0.25rem;
  font-size: 10px; font-weight: 600;
}
.cart-pill__count[hidden] { display: none; }

.account-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card); color: var(--muted-foreground);
  transition: color 0.15s ease;
}
.account-btn:hover { color: var(--foreground); }
@media (min-width: 640px) {
  .account-btn { width: auto; padding-inline: 0.75rem; }
}
.account-btn__label { display: none; font-size: 0.875rem; font-weight: 500; }
@media (min-width: 640px) { .account-btn__label { display: inline; } }
@media (min-width: 1200px) and (max-width: 1399px) {
  /* The nav is widest here. The account icon stays (Domagoj asked for it);
     only its word goes, and it comes back at 1400. */
  .account-btn__label { display: none; }
  .account-btn { width: 2.5rem; padding-inline: 0; }
}
.account-btn__dot {
  position: absolute; top: -0.125rem; right: -0.125rem;
  width: 0.625rem; height: 0.625rem;
  border-radius: var(--radius-full);
  background-color: var(--primary);
  box-shadow: 0 0 0 2px var(--background);
}
.site-header__cta { display: none; flex-shrink: 0; }
@media (min-width: 640px) { .site-header__cta { display: inline-flex; } }

.burger {
  display: grid; place-items: center;
  height: 2.5rem; width: 2.5rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card);
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* Full-screen frosted panel filling the viewport below the header, the same
   shape as the Synerium theme's. It is a sibling of <header> — see header.php.
   `--header-bottom` is written by JS on open; the fallback covers the no-JS and
   first-paint cases. Sized to fit without scrolling on a 375x667 phone: the
   page behind is locked, and a menu that scrolls inside a locked page is the
   confusing case this avoids. overflow-y stays `auto` purely as a safety valve
   for very short viewports (landscape), never as the normal state. */
.mobile-nav {
  position: fixed;
  inset: var(--header-bottom, calc(var(--topbar-height) + var(--header-height))) 0 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: oklch(0.988 0.002 247.858 / 0.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 0.5rem 1rem 1.25rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
/* 1200, not 1024, and the two must stay equal: the burger and the desktop nav
   both switch at 1200 (raised from 1024 in H1e, when the nav gained a tenth
   item). This rule was left behind, so between 1024 and 1199 the burger was
   visible, the desktop nav was not, and the panel the burger opens was
   `display: none` — a menu button that did nothing, and no navigation at all in
   that band. Found in H7 while removing Dostava. */
@media (min-width: 1200px) { .mobile-nav { display: none; } }

.mobile-nav__list { display: flex; flex-direction: column; }
/* Row height is deliberate, not decorative: ten links AND the closing CTA have
   to fit under the header on the shortest phone in common use (375x667) without
   the panel scrolling. 10px padding + a 1.35 line-height gives a 44px row —
   exactly the minimum touch target, and the most the button leaves room for. */
.mobile-nav__link {
  display: block;
  padding: 0.625rem 0.25rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
  color: var(--foreground);
}
.mobile-nav__link:last-child { border-bottom: 0; }
.mobile-nav__link:hover { color: var(--primary); }

/* Closing CTA, the same shape and placement as the Synerium theme's: directly
   below the last item on a fixed margin, not pushed to the bottom of the panel. */
.mobile-nav__actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; }
.mobile-nav__cta { width: 100%; gap: 0.5rem; }

/* Scroll lock — the same one the age gate uses, and deliberately body-only.
   While <html> stays `overflow: visible` the used value is propagated from
   <body> to the viewport, so this locks the page WITHOUT making <body> a scroll
   container. Adding `overflow: hidden` to <html> as well looks more thorough and
   is actively wrong: it stops the propagation, <body> becomes a real scroll
   container, and the sticky header comes unstuck and scrolls away behind the
   open menu. Tested — don't "fix" it. */
body.nav-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mobile-nav { transition: opacity 0.25s ease, visibility 0.25s ease; transform: none; }
  .mobile-nav.is-open { transform: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 2rem; border-top: 1px solid var(--border); background-color: var(--card); }
@media (min-width: 640px) { .site-footer { margin-top: 4rem; } }
.site-footer__inner { max-width: var(--container); margin-inline: auto; padding: 3.5rem 1rem; }
@media (min-width: 640px) { .site-footer__inner { padding-inline: 1.5rem; } }

.site-footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer__brand-row { display: flex; align-items: center; gap: 0.75rem; }
.site-footer__logo { height: 4rem; width: auto; flex-shrink: 0; object-fit: contain; }
@media (min-width: 640px) { .site-footer__logo { height: 5rem; } }
.site-footer__desc { margin-top: 1rem; max-width: 28rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.site-footer__contact { margin-top: 1.5rem; display: grid; gap: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.site-footer__contact-row { display: flex; align-items: center; gap: 0.5rem; }
.site-footer__contact-row .icon { color: var(--primary); }

.site-footer__heading {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.site-footer__links { margin-top: 1rem; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.site-footer__links a { color: var(--muted-foreground); }
.site-footer__links a:hover { color: var(--foreground); }
.site-footer__links span { color: var(--muted-foreground); }

/* --------------------------------------------------------------------------
   Official-channel check — the footer card, and the widget it shares with
   /verifikacija (site-footer.tsx:104). It replaced the newsletter block the
   Serbian footer had; this site syncs customers to FluentCRM but collects no
   signups.
   -------------------------------------------------------------------------- */
.channel-check {
  margin-top: 2.5rem;
  display: grid; gap: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background-color: color-mix(in oklab, var(--secondary) 50%, var(--card));
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .channel-check { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2rem; padding: 1.75rem 2rem; }
}
.channel-check__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
}
.channel-check__icon { color: var(--primary); }
.channel-check__lead { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); max-width: 42ch; }

.verify-form { display: grid; gap: 1rem; }
@media (min-width: 640px) { .verify-form { grid-template-columns: minmax(0, 1fr) auto; } }
.verify-form__input { min-width: 0; padding-block: 0.75rem; }
.verify-form__submit { gap: 0.5rem; flex-shrink: 0; }

.verify-result {
  margin-top: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  background-color: var(--secondary);
  padding: 1.25rem;
}
/* Nothing checked yet. `display: none` rather than the [hidden] attribute,
   because the rule above sets `display: flex` and would outrank it. */
.verify-result.is-empty { display: none; }
.verify-result.is-ok { border-color: var(--primary); background-color: var(--primary-soft); }
.verify-result.is-bad { border-color: color-mix(in oklab, var(--destructive) 40%, transparent); }

.verify-result__icon { flex-shrink: 0; margin-top: 0.125rem; }
.verify-result__icon svg { width: 1.25rem; height: 1.25rem; }
.verify-result__icon--ok svg { color: var(--primary); }
.verify-result__icon--bad svg { color: var(--destructive); }

.verify-result__body { min-width: 0; font-size: 0.875rem; }
.verify-result__title { font-weight: 600; }
.verify-result__text { margin-top: 0.25rem; color: var(--muted-foreground); line-height: 1.7; }

/* Footer variant: tighter, and the result sits closer to the field it answers. */
.verify--compact .verify-form { gap: 0.5rem; }
.verify--compact .verify-form__input { padding-block: 0.5rem; font-size: 0.875rem; }
.verify--compact .verify-form__submit { padding: 0.5rem 1rem; font-size: 0.875rem; }
.verify--compact .verify-result { margin-top: 1rem; padding: 0.875rem 1rem; border-radius: var(--radius-lg); }
.verify--compact .verify-result__body { font-size: 0.8125rem; }

/* The legal small print, and the antidoping pair that closes it. */
.site-footer__legal-block {
  margin-top: 3rem;
  display: grid; gap: 0.75rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.antidoping-notice--footer { margin-top: 0; }
.site-footer__copyright {
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
.site-footer__copyright strong { color: var(--foreground); }

.site-footer__quick {
  margin-top: 2.5rem;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.5rem; row-gap: 0.5rem;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background-color: var(--background);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
}
.site-footer__quick-label {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--muted-foreground);
}
.site-footer__quick a { font-weight: 500; color: var(--muted-foreground); }
.site-footer__quick a:hover { color: var(--foreground); }

.site-footer__legal {
  margin-top: 1rem;
  font-size: 0.75rem; line-height: 1.6;
  color: var(--muted-foreground);
}
/* The anti-copy paragraph is the only .site-footer__legal outside the legal
   block; inside it the block's own `gap` does the spacing, so the margin would
   double up. */
.site-footer__legal-block .site-footer__legal { margin-top: 0; }
.site-footer__legal strong { color: var(--foreground); }
.site-footer__legal a { font-weight: 600; color: var(--primary); text-decoration: underline; }
.site-footer__legal a:hover { color: var(--foreground); }

/* --------------------------------------------------------------------------
   Age gate
   -------------------------------------------------------------------------- */
.age-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background-color: oklch(0.23 0.032 264 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.age-gate[hidden] { display: none; }
.age-gate__panel {
  width: 100%; max-width: 36rem; max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  background-color: var(--card);
  box-shadow: var(--shadow-lift);
  padding: 1.5rem;
}
@media (min-width: 640px) { .age-gate__panel { padding: 2rem; } }
.age-gate__title { font-size: 1.25rem; font-weight: 600; }
.age-gate__lead { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
.age-gate__list {
  margin-top: 0.75rem; padding-left: 1.25rem;
  display: grid; gap: 0.5rem;
  list-style: disc;
  font-size: 0.875rem; color: var(--muted-foreground);
}
.age-gate__legal { margin-top: 1rem; font-size: 0.875rem; color: var(--muted-foreground); }
.age-gate__legal a { color: var(--primary); }
.age-gate__legal a:hover { text-decoration: underline; }
/* The confirmation is a checkbox that gates the button (ruo-popup.tsx), not a
   caption above it — so it needs a hit area, not just a line of text. */
.age-gate__head { display: flex; align-items: center; gap: 0.75rem; }
.age-gate__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; flex: none;
  border-radius: var(--radius-full);
  background: var(--primary-soft); color: var(--accent-foreground);
}
.age-gate__icon svg { width: 1.25rem; height: 1.25rem; }
.age-gate__confirm {
  margin-top: 1rem; display: flex; gap: 0.75rem; align-items: flex-start;
  font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.age-gate__checkbox { margin-top: 0.15rem; width: 1rem; height: 1rem; flex: none; accent-color: var(--primary); }
.age-gate__storage { margin-top: 1rem; font-size: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }
.age-gate__actions { margin-top: 1.5rem; display: grid; gap: 0.75rem; }
.age-gate__actions .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.age-gate__decline {
  border: 1px solid var(--border); border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  text-align: center; font-size: 0.875rem; font-weight: 500;
  color: var(--muted-foreground);
}
.age-gate__decline:hover { color: var(--foreground); }
body.age-gate-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Akcija popup (inc/promo.php)
   -------------------------------------------------------------------------- */

/* z-index below the age gate's 100 on purpose: the gate is a hard block, and
   if the two are ever open together the gate has to be the one in front. */
.promo {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background-color: oklch(0.23 0.032 264 / 0.7);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 1rem;
}
.promo[hidden] { display: none; }

/* The campaign art is a finished design, so the panel is the image and nothing
   else — no padding, no card chrome. `width: 100%` up to a readable maximum,
   height from the image's own ratio: never cropped, whatever shape Marko
   uploads (Domagoj, 2026-09-10). `max-height` keeps a tall image inside the
   viewport, and `object-fit: contain` means that constraint letterboxes rather
   than distorts. */
.promo__panel {
  position: relative;
  width: 100%; max-width: 56rem;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  line-height: 0;
}
.promo__link { display: block; }
.promo__image {
  display: block;
  width: 100%; height: auto;
  max-height: 88vh;
  object-fit: contain;
}

/* Sits on the art, so it carries its own surface rather than trusting whatever
   colour happens to be under it in the corner of the image. */
.promo__close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  display: flex; align-items: center; justify-content: center;
  height: 2.25rem; width: 2.25rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--foreground);
  box-shadow: var(--shadow-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.promo__close:hover { background-color: var(--ink); color: var(--ink-foreground); }
.promo__close:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

body.promo-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Toasts
   -------------------------------------------------------------------------- */
.toast-stack {
  position: fixed; z-index: 120;
  right: var(--scroll-top-inset);
  /* Clear of the scroll-to-top button, which occupies this corner. A fixed
     offset rather than one that follows the button's visibility: toasts that
     jumped when the button appeared would be worse than a little headroom. */
  bottom: calc(var(--scroll-top-inset) + var(--scroll-top-size) + 0.75rem);
  display: grid; gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
}
.toast {
  display: flex; align-items: flex-start; gap: 0.625rem;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card);
  box-shadow: var(--shadow-lift);
  padding: 0.875rem 1rem;
  font-size: 0.875rem; font-weight: 500;
  opacity: 0; transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast .icon { color: var(--primary); margin-top: 0.125rem; }

/* --------------------------------------------------------------------------
   Scroll-to-top (ported from the Synerium theme)
   -------------------------------------------------------------------------- */
.scroll-top {
  position: fixed;
  bottom: var(--scroll-top-inset);
  right: var(--scroll-top-inset);
  z-index: 60;
  display: grid;
  place-items: center;
  width: var(--scroll-top-size);
  height: var(--scroll-top-size);
  border-radius: var(--radius-full);
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.625rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top.is-visible:hover { transform: translateY(-2px); opacity: 0.9; }
.scroll-top .icon { width: 1.15rem; height: 1.15rem; }

@media (max-width: 640px) {
  :root { --scroll-top-inset: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top { transition: opacity 0.25s ease, visibility 0.25s ease; transform: none; }
  .scroll-top.is-visible:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Page hero (shared band on inner pages)
   -------------------------------------------------------------------------- */
.page-hero { border-bottom: 1px solid var(--border); }
.page-hero__inner { max-width: var(--container); margin-inline: auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .page-hero__inner { padding: 5rem 1.5rem; } }
.page-hero__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-foreground); }
.page-hero__title { margin-top: 0.75rem; max-width: 48rem; font-size: 2.25rem; font-weight: 600; line-height: 1.2; }
@media (min-width: 640px) { .page-hero__title { font-size: 3rem; } }
.page-hero__lead { margin-top: 1rem; max-width: 44rem; font-size: 1rem; line-height: 1.6; color: var(--muted-foreground); }

/* The RUO notice closing a listing page — katalog, Vodiči, Novosti. */
.ruo-notice--archive { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Side cart (cart-drawer.tsx) — Croatia only.
   --------------------------------------------------------------------------
   In main.css rather than woocommerce.css because the drawer is printed in the
   footer of every page, including the ones WooCommerce's stylesheet does not
   dress.
   -------------------------------------------------------------------------- */
.cart-drawer { position: fixed; inset: 0; z-index: 100; }
.cart-drawer[hidden] { display: none; }

/* Keeps the page behind from scrolling under the panel. */
.has-drawer-open { overflow: hidden; }

.cart-drawer__scrim {
  position: absolute; inset: 0;
  border: 0; padding: 0;
  background-color: color-mix(in oklab, var(--ink) 40%, transparent);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.cart-drawer__panel {
  position: absolute; inset-block: 0; right: 0;
  display: flex; flex-direction: column;
  width: 100%; max-width: 28rem;
  border-left: 1px solid var(--border);
  background-color: var(--background);
  box-shadow: var(--shadow-lift);
}

.cart-drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--border);
  padding: 1rem 1.25rem;
}
.cart-drawer__title {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
}
.cart-drawer__title-icon { color: var(--primary); }
.cart-drawer__count {
  border-radius: var(--radius-full);
  background-color: var(--primary-soft); color: var(--accent-foreground);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem; font-weight: 600;
}
.cart-drawer__close {
  display: grid; place-items: center;
  height: 2.25rem; width: 2.25rem; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--radius-xl);
  background-color: var(--card); color: var(--muted-foreground);
}
.cart-drawer__close:hover { color: var(--foreground); }

/* Same reasoning one level in: the panel's own scrollbar appears the moment the
   list outgrows the viewport, so without a reserved gutter the rows shift
   sideways as items are added and removed. */
.cart-drawer__content { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.cart-drawer__loading { padding: 2rem 1.25rem; font-size: 0.875rem; color: var(--muted-foreground); }

.cart-drawer__empty {
  display: grid; justify-items: center; gap: 1rem;
  padding: 4rem 1.25rem; text-align: center;
}
.cart-drawer__empty-icon { color: var(--muted-foreground); }
.cart-drawer__empty p { font-size: 0.875rem; color: var(--muted-foreground); }

.cart-drawer__progress { border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem; }
.cart-drawer__progress-text { font-size: 0.75rem; color: var(--muted-foreground); }
.cart-drawer__progress-text strong { color: var(--foreground); }
.cart-drawer__track {
  margin-top: 0.5rem; height: 0.375rem;
  overflow: hidden; border-radius: var(--radius-full);
  background-color: var(--secondary);
}
.cart-drawer__bar {
  height: 100%; border-radius: var(--radius-full);
  background-color: var(--primary);
  width: var(--cart-progress, 0%);
  transition: width 0.35s ease;
}

.cart-drawer__list { padding: 1rem 1.25rem; display: grid; gap: 1rem; }
.cart-drawer__row {
  display: flex; gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
}
.cart-drawer__row:last-child { border-bottom: 0; padding-bottom: 0; }
/* A quantity change patches the row it touched instead of rebuilding the list,
   so the panel no longer needs to be dimmed while the request is out. The one
   piece of motion left is a row leaving, so the rows below it do not jump. */
.cart-drawer__row { transition: opacity 0.22s ease, transform 0.22s ease; }
.cart-drawer__row.is-leaving { opacity: 0; transform: translateX(1.5rem); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .cart-drawer__row { transition: none; }
}
.cart-drawer__media {
  display: grid; place-items: center;
  height: 5rem; width: 5rem; flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background-color: var(--secondary);
}
.cart-drawer__media img { height: 100%; width: 100%; object-fit: contain; padding: 0.375rem; }
.cart-drawer__body { min-width: 0; flex: 1; }
.cart-drawer__name {
  display: block;
  font-size: 0.875rem; font-weight: 600; line-height: 1.35;
}
.cart-drawer__name:hover { color: var(--primary); }
.cart-drawer__unit { margin-top: 0.125rem; font-size: 0.75rem; color: var(--muted-foreground); }
.cart-drawer__controls {
  margin-top: 0.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.cart-drawer__line { font-size: 0.875rem; font-weight: 600; }
.cart-drawer__remove {
  display: grid; place-items: center;
  height: 2rem; width: 2rem; flex-shrink: 0;
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
}
.cart-drawer__remove:hover { color: var(--destructive); }

.cart-drawer__foot { border-top: 1px solid var(--border); padding: 1rem 1.25rem; }
.cart-drawer__totals { display: grid; gap: 0.375rem; font-size: 0.875rem; }
.cart-drawer__total-row { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted-foreground); }
.cart-drawer__total-row--discount { color: var(--primary); }
.cart-drawer__total-row--grand {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  font-family: var(--font-display); font-size: 1.125rem; font-weight: 600;
  color: var(--foreground);
}
.cart-drawer__shipping-note { margin-top: 0.5rem; font-size: 0.6875rem; line-height: 1.5; color: var(--muted-foreground); }
.cart-drawer__ctas { margin-top: 1rem; display: grid; gap: 0.5rem; }
.cart-drawer__ctas .btn { justify-content: center; padding-block: 0.75rem; }
.cart-drawer__trust { margin-top: 0.75rem; display: grid; gap: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.cart-drawer__trust span { display: flex; align-items: center; gap: 0.375rem; }
.cart-drawer__trust svg { color: var(--primary); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Gift rows (inc/gifts.php) — the drawer, /kosarica and /blagajna print the
   same two pieces: the normal price struck through next to 0,00 €, and a
   "Gratis" badge with the count and the reason where a paid row has its
   stepper. Here rather than in woocommerce.css because the drawer is on every
   page.
   -------------------------------------------------------------------------- */
.gift-price { display: inline-flex; align-items: baseline; gap: 0.375rem; white-space: nowrap; }
.gift-price__was { font-size: 0.8em; font-weight: 400; color: var(--muted-foreground); }
.gift-price__now { color: var(--primary); }

.gift-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-size: 0.75rem; line-height: 1.4; color: var(--muted-foreground); }
.gift-note__badge { background-color: var(--primary); color: var(--primary-foreground); }
.gift-note__qty { font-weight: 600; color: var(--foreground); }
/* Badge and count share the first line; the reason always takes the second,
   whatever the width — it only did when the count was wide enough to push it. */
.gift-note__reason { flex-basis: 100%; }

.cart-drawer__controls--gift { align-items: flex-start; }
.checkout-review__item--gift .gift-note { margin-top: 0.375rem; }

/* Sale prices (inc/sale.php): the same struck-through pair as a gift row, a
   −X % badge, and one line saying the price takes no further discount. */
.badge--sale { background-color: var(--primary); color: var(--primary-foreground); letter-spacing: 0.02em; }

/* Corner ribbon on a product image (card, PDP). The wrapper is the square the
   band is clipped to; the band runs corner to corner at 45°. The image box
   around it already clips to its own rounded corner. */
.sale-ribbon {
  position: absolute; top: 0; left: 0; z-index: 2;
  width: 7.5rem; height: 7.5rem;
  overflow: hidden;
  pointer-events: none;
}
.sale-ribbon__text {
  position: absolute; top: 1.65rem; left: -2.625rem;
  width: 10.5rem;
  padding: 0.375rem 0;
  transform: rotate(-45deg);
  background-image: var(--gradient-accent);
  color: var(--primary-foreground);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 14px -6px color-mix(in oklch, var(--primary) 70%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--primary-foreground) 35%, transparent);
}
.sale-ribbon--lg { width: 9rem; height: 9rem; }
.sale-ribbon--lg .sale-ribbon__text { top: 2.25rem; left: -2.75rem; width: 12.5rem; padding: 0.5rem 0; font-size: 1.25rem; }

.sale-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.375rem; font-size: 0.75rem; line-height: 1.4; color: var(--muted-foreground); }
.cart-drawer__sale-note { margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600; line-height: 1.5; color: var(--foreground); }