/* ==========================================================================
   NEON TECH — electronics store front page prototype
   File: styles.css
   Plain CSS only. No build step, no framework.
   Structure:
     1.  Design tokens
     2.  Base / reset
     3.  Utilities & shared components
     4.  Top bar
     5.  Header
     6.  Mobile drawer
     7.  Layout (sidebar + content)
     8.  Category panel
     9.  Hero banner slider
     10. Section headers & carousels
     11. Product card
     12. Article cards
     13. Footer
     14. Quick view modal
     15. Toasts & back-to-top
     16. Responsive breakpoints
     17. Accessibility / reduced motion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
/* ==========================================================================
   THEME CONFIG — the single place brand colours, fonts and logos are defined
   ==========================================================================
   Everything below is a token. Components never hardcode a hex value or a
   font stack; they read from here. That is what makes a Laravel admin theme
   panel possible later: the server writes these custom properties into an
   inline <style> block and the whole store follows.

   Layers, outermost first:
     1. `--color-*`  brand semantics (primary, secondary, alert, heading,
                     text, button) each with a -light and -dark variant
     2. `--menu-*` / `--sticky-header-*`  surfaces the admin can theme
                     independently of the rest of the page
     3. `--c-*`      the internal aliases the components actually use, mapped
                     onto the layer above

   The `--c-*` layer is kept on purpose: it lets the theme change without
   touching a thousand declarations, and it keeps the accessibility contrast
   overrides working exactly as before.
   ========================================================================== */
:root {
  /* --- 1. Brand semantics ------------------------------------------------ */
  /* ADMIN THEME API — deliberately declared even where this stylesheet does
     not consume them yet. These are the slots the Laravel admin will write to
     (see THEME_CONTRAST_REQUIREMENTS.md); a token audit will report them as
     "unused" and that is expected. Do not delete:
       --color-button*, --color-heading-light/dark, --color-alert-light/dark,
       --color-warning-light/dark, --color-primary-light, --color-secondary-dark,
       --color-text-dark, --menu-*-dark, --logo-*, --dark-card-bg,
       --promo-dark-muted */
  --color-primary:          #B6FF2E;   /* neon — the action colour */
  --color-primary-light:    #DDFF9B;
  --color-primary-dark:     #6E9E00;

  --color-secondary:        #171918;   /* graphite — the ink colour */
  --color-secondary-light:  #3A403C;
  --color-secondary-dark:   #000000;

  --color-alert:            #C0392B;
  --color-alert-light:      #FBEAE8;
  --color-alert-dark:       #7A0000;

  --color-warning:          #8A5A00;   /* 5.9:1 on white — AA for body text */
  --color-warning-light:    #FDF3E2;
  --color-warning-dark:     #6B4600;

  --color-success:          #0C7A45;
  --color-success-light:    #E7F7EE;
  --color-success-dark:     #0A5C34;

  --color-heading:          #171918;
  --color-heading-light:    #3A403C;
  --color-heading-dark:     #000000;

  --color-text:             #171918;
  --color-text-light:       #5C645C;   /* muted body text */
  --color-text-dark:        #000000;

  --color-button:           #B6FF2E;   /* button surface */
  --color-button-light:     #DDFF9B;
  --color-button-dark:      #171918;   /* the dark button variant */

  --color-surface:          #FFFFFF;
  --color-surface-alt:      #F3F5F4;
  --color-border:           #DADFDB;
  --color-border-strong:    #9AA396;

  /* --- 2. Menu (admin can pick a light or a dark menu) -------------------- */
  --menu-bg-light:     #FFFFFF;
  --menu-text-light:   #171918;
  --menu-hover-light:  #B6FF2E;
  --menu-bg-dark:      #171918;
  --menu-text-dark:    #F2F5F0;
  --menu-hover-dark:   #B6FF2E;

  /* Active menu variant. Switch these three to the -dark set for a dark menu. */
  --menu-bg:     var(--menu-bg-light);
  --menu-text:   var(--menu-text-light);
  --menu-hover:  var(--menu-hover-light);

  /* --- 3. Dark component tokens -------------------------------------------
     PAGE tokens (`--color-heading`, `--color-text`) describe dark ink on a
     light page. The top bar and the footer are DARK surfaces, so they must
     never inherit those — that is exactly what broke the footer contrast.
     They get their own set, and the admin can theme them separately. */
  --topbar-bg:      #171918;
  --topbar-text:    #C9CECB;
  --topbar-hover:   var(--color-primary);

  /* FOCUS RING — one ring for the whole project.
     Focus used to be written six different ways: `--c-neon-hover`,
     `--c-neon-dark`, `--color-primary`, `--footer-link-hover`,
     `--topbar-hover`, and `--color-focus`, which was never defined at all —
     those two declarations were invalid, so those controls had NO visible
     ring. The two tokens below are the only ones any focus rule may use.
     They resolve through `--c-neon-hover` / `--color-primary`, so the
     accessibility contrast modes keep overriding them for free. */
  /* Neon, dark enough to READ. `--color-primary-dark` (#6E9E00) is 3.2:1 on
     white — fine for a border or an icon, below the 4.5:1 that WCAG 1.4.3
     requires of body-sized text. Anything that renders the brand colour as
     TEXT on a light surface uses this instead: same hue, 5.02:1. */
  --color-primary-text: #567A00;

  /* Ink for a component that carries its OWN light background, wherever it
     sits. Never re-pointed by a surface — that is the whole point. */
  --ink-on-light:       var(--c-text);
  --ink-on-light-muted: var(--c-text-muted);

  --focus-ring:      var(--c-neon-hover);    /* on light surfaces */
  --focus-ring-dark: var(--color-primary);   /* on the topbar, the footer and dark cards */
  --focus-ring-width: 3px;
  --topbar-border:  rgba(255, 255, 255, .14);

  /* Dark promo / card surfaces. Same idea as the footer: a dark component
     must never fall back to the page ink tokens. */
  --promo-dark-bg:      #171918;
  --promo-dark-heading: #FFFFFF;
  --promo-dark-text:    #D5D9D7;
  --promo-dark-muted:   #AEB5B1;
  --promo-dark-accent:  var(--color-primary);

  --dark-card-bg:      #171918;
  --dark-card-heading: #FFFFFF;
  --dark-card-text:    #D5D9D7;
  --dark-card-muted:   #AEB5B1;

  --footer-bg:         #151716;
  --footer-heading:    #FFFFFF;
  --footer-text:       #C9CECB;
  --footer-muted:      #A9B0AC;
  --footer-link:       #C9CECB;
  --footer-link-hover: var(--color-primary);
  --footer-border:     rgba(255, 255, 255, .12);

  --sticky-header-bg:     rgba(255, 255, 255, .96);
  --sticky-header-text:   var(--color-text);
  --sticky-header-border: var(--color-border);

  /* --- 4. Logo slots ------------------------------------------------------
     The markup carries `data-theme-logo="default|sticky|light|dark"`; the
     admin maps each slot to an uploaded asset. The prototype ships one
     inline SVG mark, so every slot resolves to the same artwork today. */
  --logo-default: none;
  --logo-sticky:  none;
  --logo-light:   none;
  --logo-dark:    none;

  /* --- 5. Component aliases (what the CSS below actually uses) ----------- */
  --c-page:        var(--color-surface-alt);
  --c-dark:        var(--color-secondary);
  --c-graphite:    var(--color-secondary-light);
  --c-card:        var(--color-surface);
  --c-border:      var(--color-border);
  --c-border-strong: var(--color-border-strong);
  --c-neon:        var(--color-primary);
  --c-neon-hover:  var(--color-primary-dark);
  --c-neon-dark:   var(--color-primary-dark);
  --c-text:        var(--color-text);
  --c-text-muted:  var(--color-text-light);

  /* Support colors (derived, used sparingly) */
  --c-danger:      var(--color-alert);
  --c-success:     var(--color-success);
  --c-surface-alt: #ECEFED;

  /* Radii — four semantic names, and the raw scale they map onto.
     A component picks a semantic name; it never invents a value. */
  --radius-control: 10px;             /* inputs, selects, option rows, chips */
  --radius-card:    16px;             /* panels, groups, cards */
  --radius-panel:   20px;             /* large editorial cards, banners */
  --radius-modal:   22px;             /* dialogs */
  --radius-pill:    999px;            /* counters, badges, chips, dots */

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: var(--radius-card);
  --r-xl: var(--radius-modal);
  --r-pill: var(--radius-pill);

  /* Invited-friends table: header and rows read the same track list. */
  --reflist-cols: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.3fr) auto;

  /* ---- Layering ---------------------------------------------------------
     Every stacking context in the project is named here, so a new component
     can be placed by reading this list instead of guessing a number. The
     values keep the order the project already had; only the arbitrary
     magnitudes (9999, 10050, 2147483000) are gone.

     Within a component, small local values (1–6) are still used for parts
     that stack against each other — a slide's art behind its copy, a card's
     badge above its image. Those never leave their component. */
  /* LOCAL stacking (values 1..11) stays as literals inside its own component:
     those numbers order children against each other and never against another
     layer. Everything that competes across the page uses a token below. The
     highest local value in the project is 11; the lowest global token is 60. */
  --z-behind:          -1;   /* decorative art behind its own content */
  --z-hero:            10;   /* the home hero column */
  --z-cat-panel:       20;   /* the home category rail — ABOVE the hero, so the
                                mega menu it contains is not painted over */
  --z-card-flags:       3;   /* badges on a card */
  --z-card-actions:    10;   /* the action stack on a card */
  --z-store-popup:     20;   /* the store map bubble */
  --z-tooltip:         60;   /* tooltips, above everything in the flow */
  --z-mega:           300;   /* mega menu, over the page but under dialogs */
  --z-sticky-bar:     810;   /* product purchase bar */
  --z-header:         900;   /* the sticky header stack */
  --z-filter-panel:   950;   /* mobile filter sheet, over the header */
  --z-drawer:        1000;   /* mobile navigation, over the header */
  --z-modal:         1100;   /* every dialog */
  --z-floating:      1200;   /* scroll-to-top + chat trigger */
  --z-chat:          1300;   /* the chat panel itself */
  --z-a11y:          1400;   /* the accessibility panel is always on top */
  --z-toast:         1500;   /* transient messages, above the panel */
  --z-skip-link:     1600;   /* the very first thing a keyboard user meets */
  --z-a11y-filter:   1700;   /* the grayscale overlay covers the lot */

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(23, 25, 24, .05);
  --sh-sm: 0 2px 8px rgba(23, 25, 24, .06);
  --sh-md: 0 8px 24px rgba(23, 25, 24, .10);
  --sh-lg: 0 18px 44px rgba(23, 25, 24, .16);
  --sh-neon: 0 8px 26px rgba(182, 255, 46, .38);

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Layout
     One shared measurement drives every centred section: the page container
     is `min(100% - 2*--page-gutter, --page-max)`. Nothing on the page uses a
     fixed pixel width, so there is never a source of horizontal overflow. */
  --page-max: 1440px;
  --page-gutter: 16px;   /* 32px total side space on desktop */
  --header-h: 76px;

  /* Motion */
  --t-fast: 140ms ease;
  --t-base: 220ms cubic-bezier(.2, .7, .3, 1);
  --t-slow: 420ms cubic-bezier(.2, .7, .3, 1);

  /* --- 6. Typography ------------------------------------------------------
     Four slots, exactly the four a Laravel admin will expose. Components use
     the slot, never a font stack, so changing a font is a one-line change. */
  --font-stack-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-stack-serif: Georgia, "Times New Roman", serif;

  --font-heading: var(--font-stack-sans);
  --font-menu:    var(--font-stack-sans);
  --font-body:    var(--font-stack-sans);
  --font-alt:     var(--font-stack-serif);

  /* Legacy alias — kept so nothing breaks; new code uses --font-body. */

  /* --- 7. Type scale ------------------------------------------------------
     One ladder for the whole store. `clamp()` where a heading benefits from
     it, with a ceiling so nothing turns absurd on a 2560px screen. */
  --fs-h1:      clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-caption: .78rem;
  --fs-micro:   .68rem;

  /* Product artwork gradients — decorative, but still worth one definition. */
  --c-art-hi: #FAFBFA;
  --c-art-lo: #EDF0EE;
  --c-on-dark-muted: #C9CFCB;   /* 11.5:1 on graphite */
  --c-on-dark-soft:  var(--c-on-dark-soft);   /* 8.0:1 on graphite */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --lh-heading: 1.2;
  --lh-body:    1.6;
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body {
  max-width: 100%;
  overflow-x: hidden; /* guards against horizontal scroll on mobile */
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY: root text scale
   The whole scale hangs off ONE root value, so nothing is resized per
   element. `rem`-based paddings grow with it and no text is ever clipped.
   -------------------------------------------------------------------------- */
html { font-size: 100%; }
html[data-a11y-font="small"]  { font-size: 93.75%; }  /* 15px */
html[data-a11y-font="large"]  { font-size: 112.5%; }  /* 18px */
html[data-a11y-font="larger"] { font-size: 125%; }    /* 20px */
html[data-a11y-font="largest"]{ font-size: 137.5%; }  /* 22px */

/* --------------------------------------------------------------------------
   Global typography
   Four font slots, applied ONCE here. No component sets `font-family` — that
   is what lets an admin swap a font without touching component CSS.
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--c-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  line-height: var(--lh-heading);
}

/* --------------------------------------------------------------------------
   DARK SURFACES — safety net
   `--color-heading` and `--color-text` describe dark ink on a light page.
   Every dark component therefore has to opt out of them,
and a heading nested
   inside one must not silently take the page token. Listing the dark surfaces
   here once means a new heading inside any of them can never repeat the
   "dark text on a dark background" bug.
   Components still set their own precise colours below; this is the floor,
not the design.
   -------------------------------------------------------------------------- */
.footer,
.topbar,
.promo-banner--dark,
.promo-banner--gaming,
.gridbanner--dark,
.giftband,
.loycard,
/* DARK SURFACES re-point the ink tokens for everything inside them.
   That is what makes a dark card readable without component knowing it is on
   one — and it is also a trap: a LIGHT control nested inside a dark surface
   inherits the dark ink and becomes invisible. That is exactly how the referral
   email field ended up at 1.43:1 (see ACCESSIBILITY_WCAG_QA.md, A11Y-3).

   The rule, for anything with its own light background inside a dark block:
   use `--ink-on-light*`, never `--color-text*`. Those two are aliases of the
   base inks and are never re-pointed by a surface. */
.loylevel--black,
.helpcta,
.inga__head,
.drawer__head,
.catpanel__head,
.hero__slide:not(.hero__slide--light) {
  --color-heading: var(--dark-card-heading);
  --color-text: var(--dark-card-text);
  --color-text-light: var(--dark-card-muted);
}

/* Navigation,
menus and header actions share the menu font. */
nav,
.menu,
.catlist,
.actions,
.footer__links,
.accnav,
.crumbs,
.infonav { font-family: var(--font-menu); }

button { font-family: inherit; }
p, input, textarea, select { font-family: var(--font-body); }

/* Editorial voice: quotes and deliberately different copy. */
/* Typography utilities. Unused by the demo pages on purpose: they are the
   handle an editor gets for pull quotes and display copy without touching a
   component's own rules. Keep them with the font tokens. */
.font-alt,
.quote,
.special-text { font-family: var(--font-alt); }

body.is-locked,
body.modal-open { overflow: hidden; }

/* Media never overflows its box. Class-based rules (.icon, .pcard__art svg …)
   have higher specificity, so fixed-size icons keep their dimensions. */
img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-text); }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
}

ul { list-style: none; margin: 0; padding: 0; }

/* `hidden` must win over component display rules (.qty, .btn, …). */
[hidden] { display: none !important; }

h1, h2, h3, h4, p { margin: 0; }

input, select, textarea { font: inherit; }

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

/* Skip link: off-screen until focused, then pinned over everything. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip-link);
  background: var(--c-neon);
  color: var(--c-dark);
  padding: 14px 22px;
  border: 3px solid var(--c-dark);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 800;
  text-decoration: underline;
}
.skip-link:focus { left: 0; }
/* The target itself must never show a stray outline when scripted focus
   lands on it, but it still has to be programmatically focusable. */
#main-content:focus { outline: none; }
#main-content:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }

/* --------------------------------------------------------------------------
   3. Utilities & shared components
   -------------------------------------------------------------------------- */
/* The single centred wrapper used by the top bar, header, main content,
   product sections, blog section and footer. `.container` is kept as an
   alias so older markup keeps working. */
.page-container,
.container {
  width: min(100% - (var(--page-gutter) * 2), var(--page-max));
  margin-inline: auto;
  min-width: 0;   /* never let a wide child (carousel) stretch the wrapper */
}

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  transition: background var(--t-fast), color var(--t-fast),
              box-shadow var(--t-base), transform var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--neon {
  background: var(--c-neon);
  color: var(--c-dark);
  box-shadow: var(--sh-xs);
}
.btn--neon:hover {
  background: var(--c-neon-hover);
  color: var(--c-dark);
  box-shadow: var(--sh-neon);
}

.btn--dark {
  background: var(--c-dark);
  color: var(--color-surface);
}
.btn--dark:hover { background: var(--c-graphite); color: var(--c-neon); }

.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn--ghost:hover { border-color: var(--c-dark); background: var(--color-surface); }

/* Badges ----------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* A long admin badge wraps inside its own pill instead of stretching the
     stack across the artwork. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  text-align: left;
}
.badge--discount { background: var(--c-dark); color: var(--c-neon); }
.badge--neon     { background: var(--c-neon); color: var(--c-dark); }
.badge--soft     { background: var(--c-surface-alt); color: var(--c-text-muted); }
.badge--new      { background: var(--color-primary); color: var(--color-secondary); }
.badge--custom   {
  background: var(--color-secondary);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-dark);
}

/* Header icon box — ONE shared definition for history, compare, wishlist,
   account and cart, so all header icons are a single iconography system:
   same box size, border, radius, background, hover and SVG size. */
.iconbtn,
.action__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-md);
  color: var(--c-text);
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast);
}
.iconbtn:hover,
.action:hover .action__icon {
  background: var(--color-surface);
  border-color: var(--c-border);
  color: var(--c-dark);
  transform: translateY(-1px);
}
.iconbtn:hover .icon,
.action:hover .action__icon .icon { stroke: var(--c-dark); }

/* Tooltip (CSS only) ----------------------------------------------------- */
.tt { position: relative; }
.tt::after {
  content: attr(data-tt);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--c-dark);
  color: var(--color-surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: var(--z-tooltip);
}
.tt:hover::after,
.tt:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Left-opening variant.
   Used wherever the icon sits on the RIGHT edge of a card or dialog: opening
   downward/right would run the label straight out of `.pcard__media`
   (overflow: hidden) or out of the quick view. Opening left keeps the whole
   label inside the box, on one line. */
.tt--left::after {
  top: 50%;
  left: auto;
  right: calc(100% + 10px);
  transform: translateY(-50%) translateX(4px);
  white-space: nowrap;               /* never "Salīdzināt\Aprodukto" */
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  background: var(--color-secondary);
  visibility: hidden;
  pointer-events: none;
  z-index: var(--z-tooltip);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
/* little arrow pointing at the icon */
.tt--left::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 4px);
  transform: translateY(-50%) translateX(4px);
  border: 6px solid transparent;
  border-left-color: var(--color-secondary);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: var(--z-tooltip);
}
.tt--left:hover::after,
.tt--left:focus-visible::after,
.tt--left:focus-within::after,
.tt--left:hover::before,
.tt--left:focus-visible::before,
.tt--left:focus-within::before {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Touch devices execute the action immediately — no hover label. */
@media (hover: none) {
  .tt--left::after,
  .tt--left::before { display: none; }
}

/* Counter badge ----------------------------------------------------------
   Sits in the TOP-RIGHT CORNER of the icon box, slightly outside it, so it
   never covers the icon itself. Absolutely positioned, so it cannot change
   the header row height or push neighbouring elements. */
.counter {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--color-surface);
  z-index: 2;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   4. Top bar
   -------------------------------------------------------------------------- */
/* Dark surface — uses the top bar's own tokens, never the page ink tokens. */
.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-text);
  font-size: var(--fs-caption);
  border-bottom: 1px solid var(--topbar-border);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-height: 40px;
  padding: 4px 0;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar__item .icon { stroke: var(--c-neon); width: 15px; height: 15px; }
.topbar__phone { color: var(--color-surface); font-weight: 600; }
.topbar__phone:hover,
.topbar__phone:focus-visible { color: var(--topbar-hover); }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.lang__btn {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--topbar-text);
  transition: color var(--t-fast), background var(--t-fast);
}
.lang__btn:hover { color: var(--color-surface); background: rgba(255,255,255,.07); }
.lang__btn.is-active { color: var(--topbar-hover); background: rgba(182,255,46,.12); }
.lang__sep { color: var(--topbar-border); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Sticky site header
   The top bar and the main header scroll together inside ONE sticky wrapper.
   On scroll the main row shrinks a little; the search field and every action
   icon stay usable. `--sticky-header-height` is measured in JS and used by
   `scroll-margin-top`, so an anchored or focused element is never hidden
   underneath the whole stack.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.main-header,
.header {
  background: var(--menu-bg);
  color: var(--menu-text);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.header__inner {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  min-height: var(--header-h);
  min-width: 0;
  transition: min-height var(--t-base);
}

/* Scrolled state: a touch shorter, with a shadow so content cannot bleed
   through the (translucent) background. */
/* The scrolled header has its OWN tokens: an admin can theme it separately
   from the rest of the page without touching any component rule. */
.site-header.is-stuck .main-header {
  background: var(--sticky-header-bg);
  color: var(--sticky-header-text);
  border-bottom-color: var(--sticky-header-border);
  backdrop-filter: blur(10px);
}
.site-header.is-stuck { box-shadow: 0 4px 18px rgba(23, 25, 24, .10); }
/* Slot swap. These rules live NEXT TO `.logo__mark` further down instead of
   here — `.logo__mark { display: grid }` has the same specificity (0,1,0) and
   came later in the file, so it won and BOTH marks rendered side by side. */
.site-header.is-stuck .header__inner { min-height: 58px; }
.site-header.is-stuck .logo__tag { display: none; }
.site-header.is-stuck .logo__mark { width: 30px; height: 30px; }
.site-header.is-stuck .logo__name { font-size: 1.05rem; }
.site-header.is-stuck .action__sub { display: none; }
.site-header.is-stuck .search__input { padding-top: 9px; padding-bottom: 9px; }

html[data-a11y-contrast="dark"] { --sticky-header-bg: rgba(11, 13, 12, .96); }
html[data-a11y-contrast="high"] {
  --sticky-header-bg: #fff;
  --sticky-header-border: #000;
}
html[data-a11y-contrast="high"] .site-header.is-stuck .main-header {
  backdrop-filter: none;
  border-bottom-width: 2px;
}

/* Anchors, skip-link targets and scripted focus must clear the sticky header. */
[id] { scroll-margin-top: calc(var(--sticky-header-height, 76px) + 14px); }

@media (prefers-reduced-motion: reduce) {
  .header__inner { transition: none; }
}
html[data-a11y-motion="reduced"] .header__inner { transition: none !important; }

/* Logo — allowed to shrink so it can never squeeze the search field out. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}
.logo__name { white-space: nowrap; }
.logo__mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--c-dark);
  color: var(--color-primary);   /* the mark inherits it via `currentColor` */
  display: grid;
  place-items: center;
  box-shadow: var(--sh-sm);
  flex: none;
}
.logo__mark svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Logo slots — exactly ONE visible at a time
   Declared after `.logo__mark` on purpose: the display rule below has to win
   the cascade against `.logo__mark { display: grid }`.
   -------------------------------------------------------------------------- */
.logo [data-theme-logo="sticky"],
.logo [data-theme-logo="light"],
.logo [data-theme-logo="dark"] { display: none; }

/* A sticky-specific asset is used only while the header is stuck. If none is
   configured the default mark simply stays — never two marks at once. */
.site-header.is-stuck .logo [data-theme-logo="default"] { display: none; }
.site-header.is-stuck .logo [data-theme-logo="sticky"] { display: grid; }
.logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo__name {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--c-dark);
}
.logo__name span { color: var(--c-neon-hover); }
.logo__tag {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 4px;
}

/* Search */
.search {
  flex: 1 1 auto;
  min-width: 0;
}
.search__form {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: 5px 5px 5px 18px;
  transition: border-color var(--t-fast), box-shadow var(--t-base);
}
.search__form:focus-within {
  border-color: var(--c-dark);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, .30);
}
.search__icon { stroke: var(--c-text-muted); }
.search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 10px 0;
  color: var(--c-text);
}
.search__input::placeholder { color: var(--c-text-muted); }
.search__submit {
  flex: none;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  transition: background var(--t-fast), box-shadow var(--t-base);
}
.search__submit:hover { background: var(--c-neon-hover); box-shadow: var(--sh-neon); }
.search__submit .icon { display: none; }

/* Header actions */
.actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
}
.actions__divider {
  width: 1px;
  height: 28px;
  background: var(--c-border);
  margin: 0 var(--sp-2);
}
/* Account / cart: the icon box above + a text block. The wrapper itself is
   transparent — the hover lives on `.action__icon`, exactly like `.iconbtn`. */
.action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border-radius: var(--r-md);
  position: relative;
}
.action__label {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  padding-right: 10px;
}
.action__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--c-dark);
}
.action__sub {
  font-size: 12px;
  color: var(--c-text-muted);
  font-weight: 600;
}
.action--cart .action__sub { color: var(--c-text); font-weight: 800; }

.burger { display: none; }

/* --------------------------------------------------------------------------
   6. Mobile drawer
   -------------------------------------------------------------------------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 25, 24, .55);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-base), visibility var(--t-base);
  z-index: calc(var(--z-drawer) - 1);
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--c-page);
  z-index: var(--z-drawer);
  transform: translateX(-102%);
  /* visibility keeps the closed drawer out of the tab order */
  visibility: hidden;
  transition: transform var(--t-slow), visibility var(--t-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-lg);
}
.drawer.is-open { transform: translateX(0); visibility: visible; }
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-dark);
  color: var(--color-surface);
}
.drawer__title { font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.drawer__close { color: var(--color-surface); }
.drawer__close:hover { background: rgba(255,255,255,.1); border-color: transparent; }
.drawer__close:hover .icon { stroke: var(--c-neon); }
.drawer__body { padding: var(--sp-4); overflow-y: auto; flex: 1; }
.drawer__foot {
  padding: var(--sp-4);
  border-top: 1px solid var(--c-border);
  display: flex;
  gap: var(--sp-2);
  font-size: 13px;
  color: var(--c-text-muted);
  align-items: center;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   7. Layout
   -------------------------------------------------------------------------- */
.main { padding: var(--sp-8) 0 var(--sp-16); }

/* Every page except the home page opens with breadcrumbs, and the breadcrumbs
   already supply the space under the header. Without this the top of an
   interior page stacked `.main` padding (32) + `.crumbs` padding (16) + the
   first `.section` margin (48) into ~96px of nothing between the header and
   the H1. */
body:not([data-page="home"]) .main { padding-top: var(--sp-4); }

/* The first block on a page has nothing above it to be separated from.
   `.section { margin-top: 48px }` exists to space full-width sections apart on
   the home page; it must not push the first one away from the breadcrumbs. */
.page-container > .crumbs + .section,
.page-container > .section:first-child,
.page-container > .crumbs + .infopage,
.page-container > .crumbs + article.section { margin-top: 0; }

/* TOP COMMERCE LAYOUT — the ONLY two-column area on the page.
   Left: category sidebar (260–320px). Right: hero → brand strip → USP.
   Everything after this block is full .page-container width.
   `minmax(0,
1fr)` on the content column is what stops the horizontally
   scrolling carousels from pushing the grid wider than the viewport. */
.top-commerce-layout,
.layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}

/* Both grid children must be allowed to shrink below their content size. */
.top-commerce-layout > *,
.layout > * { min-width: 0; }

/* The sidebar fills the height of the hero + brands + USP stack.
   Sticky is dropped here: a stretched column has nothing to stick to.

   `!important` is not the reason for the specificity bump — `.catpanel` sets
   `position: sticky` and is written LATER in this file, so at equal
   specificity it was winning and this rule did nothing. A sticky element
   always creates a stacking context, which trapped the mega menu inside the
   sidebar's layer; the hero column, being the next sibling, then painted over
   it. Scoping to the layout makes the intent above actually apply. */
.top-commerce-layout > .category-sidebar,
.layout > .category-sidebar {
  align-self: stretch;
  /* MUST stay positioned. `.catflyout` is `position: absolute` with
     `left: calc(100% + 12px)`, so this element is its containing block. When
     this said `position: static` the flyout resolved against the INITIAL
     containing block instead, which put it a full viewport width off the
     right edge — open, in the DOM, and invisible. `relative` also makes the
     z-index below apply at all: z-index is ignored on a static element, so
     the layering line was doing nothing either. */
  position: relative;
  /* No `top`/`left` offset: the rail must sit exactly where the grid put it,
     which is the same row line as the hero column. `.catflyout { top: 0 }` is
     measured from here, so this is what makes the panel line up with the hero. */
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  /* Above the hero column (--z-hero: 10) so the flyout is never overpainted.
     Both siblings are positioned with an explicit z-index, so paint order is
     decided by the number, not by source order. */
  z-index: var(--z-cat-panel);
}
.category-sidebar { align-self: stretch; }
.category-sidebar .catlist { flex: 1 1 auto; }
.category-sidebar .catpanel__foot { margin-top: auto; }

/* Whichever column is shorter fills the gap: the hero absorbs any slack so
   the two columns end on the same line without a fixed height anywhere. */
.top-commerce-content > .hero { flex: 1 1 auto; display: flex; flex-direction: column; }
.top-commerce-content > .hero .hero__viewport { flex: 1 1 auto; display: flex; }
.top-commerce-content > .hero .hero__track { flex: 1 1 auto; }

.top-commerce-content,
.content {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The hero column sits below the category rail on purpose — see above. */
.top-commerce-layout > .top-commerce-content { position: relative; z-index: var(--z-hero); }

/* Full-width sections below the two-column block. */
.section { margin-top: var(--sp-12); }

/* --------------------------------------------------------------------------
   8. Category panel
   -------------------------------------------------------------------------- */
/* `overflow: hidden` used to live here to clip the dark head and the row
   hovers against the rounded corner. It also clipped the mega menu, which
   opens OUTSIDE this box at `left: calc(100% + 10px)` — the panel was in the
   DOM, unhidden, with `aria-expanded="true"`, and invisible. The rounding is
   now done by the pieces that need it, so nothing has to be clipped. */
/* NO positioning here. This rule used to add
   `position: sticky; top: calc(var(--header-h) + 16px)`. The layout rule above
   overrode `position` but NOT `top`, and a leftover `top` on a `relative`
   element is a live offset, not an inert sticky threshold — so the whole rail,
   and the flyout anchored to it, was pushed 92px down the page and no longer
   lined up with the hero. Positioning belongs to ONE rule: the layout one. */
.catpanel {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: visible;
  box-shadow: var(--sh-sm);
}
/* The panel head is the `Katalogs` button — see "HOME CATALOGUE NAVIGATION"
   at the foot of this file for its own rules. */
.catpanel__foot { border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.catlist__item:last-child .cat { border-radius: 0 0 calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px); }
.catpanel__head .icon { stroke: var(--c-neon); }
.catpanel__title { text-transform: uppercase; }
.catlist { padding: 6px; }
.catlist__item + .catlist__item { border-top: 1px solid transparent; }

.cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--r-md);
  text-align: left;
  color: inherit;
  text-decoration: none;
  transition: background var(--t-fast), transform var(--t-fast);
  position: relative;
}
.cat:hover { background: var(--c-page); transform: translateX(3px); }
.cat:hover .cat__icon { background: var(--menu-hover); border-color: var(--menu-hover); }
.cat:hover .cat__arrow { transform: translateX(3px); stroke: var(--c-dark); }
.cat:hover .cat__name { color: var(--c-dark); }

.cat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  flex: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.cat__icon .icon { width: 18px; height: 18px; stroke: var(--c-dark); }
.cat__name {
  flex: 1 1 auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  min-width: 0;
}
.cat__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-muted);
  background: var(--c-surface-alt);
  border-radius: var(--r-pill);
  padding: 2px 8px;
}
.cat__arrow {
  width: 16px; height: 16px;
  stroke: var(--c-text-muted);
  transition: transform var(--t-fast);
  flex: none;
}
.catpanel__foot {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--c-border);
  font-size: 12px;
  color: var(--c-text-muted);
}
.catpanel__foot strong { color: var(--c-text); }

/* --------------------------------------------------------------------------
   9. Hero banner slider
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-width: 0;      /* never wider than the 2fr column */
  width: 100%;
  max-width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  background: var(--c-graphite);
}
.hero__viewport { overflow: hidden; max-width: 100%; }
.hero__track {
  display: flex;
  transition: transform var(--t-slow);
  will-change: transform;
}
.hero__slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
  /* No fixed height: the slide grows with its content instead of clipping it. */
  min-height: clamp(300px, 30vw, 420px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  isolation: isolate;
}
.hero__art {
  position: absolute;
  inset: 0;
  z-index: var(--z-behind);
}
.hero__art svg { width: 100%; height: 100%; }
/* --------------------------------------------------------------------------
   Hero content safe area
   The arrows used to sit at `left/right: 16px` while the copy started at
   ~20–52px — a 60px arrow zone against a 20px inset, so on every width the
   Previous arrow covered the kicker and the CTA.
   `--hero-gutter` reserves the arrow lane; the content is padded past it.
   The text is never clipped, never shrunk, and the arrows never hidden.
   -------------------------------------------------------------------------- */
.hero {
  /* arrow inset (16px) + arrow width (44px) + breathing room */
  --hero-gutter: clamp(64px, 6vw, 104px);
  /* The control bar reserves its own height at the bottom of the content
     padding. Declared here, overridden only inside the mobile media query. */
  --hero-controls-h: 46px;
}

.hero__content {
  padding-block: clamp(28px, 4vw, 48px);
  padding-inline: var(--hero-gutter);
  padding-bottom: calc(clamp(28px, 4vw, 48px) + var(--hero-controls-h));
  max-width: 560px;
  min-width: 0;
  z-index: 2;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(182, 255, 46, .16);
  color: var(--c-neon);
  border: 1px solid rgba(182, 255, 46, .4);
}
.hero__title {
  margin-top: 18px;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--color-surface);
}
.hero__text {
  margin-top: 14px;
  font-size: 16px;
  color: rgba(255, 255, 255, .74);
  max-width: 420px;
}
.hero__price {
  margin-top: 26px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hero__price-label {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}
.hero__price-new {
  font-size: 38px;
  font-weight: 900;
  color: var(--c-neon);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero__price-old {
  font-size: 20px;
  color: rgba(255,255,255,.5);
  text-decoration: line-through;
  font-weight: 600;
}
.hero__cta { margin-top: 28px; }
.hero__media {
  position: relative;
  height: 100%;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 24px clamp(16px, 3vw, 40px) 24px 0;
  z-index: 1;
}
.hero__media svg {
  width: 100%;
  max-width: min(400px, 100%);
  height: auto;
}

/* Light variant (banner 2) */
.hero__slide--light .hero__title { color: var(--c-dark); }
.hero__slide--light .hero__text { color: var(--c-text-muted); }
.hero__slide--light .hero__eyebrow {
  background: var(--c-dark);
  color: var(--c-neon);
  border-color: var(--c-dark);
}
.hero__slide--light .hero__price-label { color: var(--c-text-muted); }
.hero__slide--light .hero__price-old { color: var(--c-text-muted); }
.hero__slide--light .hero__price-new { color: var(--c-dark); }
.hero__slide--light .hero__price-new mark {
  background: var(--c-neon);
  color: var(--c-dark);
  padding: 2px 10px;
  border-radius: var(--r-md);
}

/* Slider controls */
.hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-dark);
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  z-index: 6;
  transition: background var(--t-fast), transform var(--t-fast);
}
.hero__nav:hover { background: var(--c-neon); transform: translateY(-50%) scale(1.06); }
.hero__nav--prev { left: 16px; }
.hero__nav--next { right: 16px; }

/* --------------------------------------------------------------------------
   Hero control bar
   Desktop: only the dots are visible here; the arrows stay in their gutter.
   Below 900px the arrows move INTO this bar, so nothing floats over the copy.
   -------------------------------------------------------------------------- */
.hero__controls {
  position: absolute;
  left: var(--hero-gutter);
  right: var(--hero-gutter);
  bottom: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hero__ctrl {
  display: none;              /* desktop uses the side arrows */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--c-dark);
  box-shadow: var(--sh-sm);
}
.hero__ctrl:hover { background: var(--c-neon); }
.hero__ctrl:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.hero__ctrl--pause { display: inline-flex; }   /* pause is always available */
.hero__ctrl--pause[disabled] { opacity: .7; cursor: not-allowed; }

.hero__count {
  font-size: var(--fs-caption);
  font-weight: 800;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}
.hero__slide--light ~ .hero__controls .hero__count,
.hero__dots--light + .hero__count { color: rgba(23, 25, 24, .7); }

.hero__dots {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  align-items: center;
  /* A flex item will not shrink below its min-content width unless told to.
     Without this the dot row overflowed its own container to the LEFT (measured
     at x=-9 inside a box starting at x=28) and sat on top of the previous-slide
     button, so that button was never fully hittable. WCAG 2.2 SC 2.5.8. */
  min-width: 0;
  overflow: hidden;
}
/* WCAG 2.2 SC 2.5.8. The dot is a 5px bar by design; the TARGET is not. The
   button keeps a 24px-tall hit area and paints the bar with a background-clip
   trick instead of being 5px tall itself, so nothing moves visually and a
   thumb has something to hit. */
.hero__dot {
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  display: grid;
  align-items: center;
  transition: width var(--t-base);
}
.hero__dot::before {
  content: "";
  display: block;
  height: 5px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .38);
  transition: background var(--t-fast);
}
.hero__dot.is-active { width: 44px; }
.hero__dot.is-active::before { background: var(--c-neon); }
/* When the active slide uses the light theme, dots switch to dark ink. */
.hero__dots--light .hero__dot::before { background: rgba(23, 25, 24, .22); }
.hero__dots--light .hero__dot.is-active::before { background: var(--c-dark); }

/* --------------------------------------------------------------------------
   10. Section headers & carousels
   -------------------------------------------------------------------------- */
/* Section header: title on the left,
"Skatīt visas" + arrows on the right.
   `flex-wrap: wrap` means that when the arrows no longer fit next to the
   title they move to their own row — they are never hidden.
   No overflow/opacity/visibility tricks here on purpose. */
.sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.sechead__left { min-width: 0; flex: 1 1 auto; }
.sechead__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.sechead__title {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 900;
  letter-spacing: -.02em;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sechead__title::before {
  content: "";
  width: 6px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  flex: none;
}
.sechead__right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;   /* the arrows keep their size, they never get squashed */
  flex-wrap: wrap;
}
.sechead__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-muted);
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-card);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.sechead__link:hover { color: var(--c-dark); border-color: var(--c-dark); background: var(--c-neon); }

/* One universal carousel used by all three sections.
   `.carousel` is the scroll VIEWPORT, `.carousel__track` is the flex row.
   Horizontal movement is allowed ONLY here, never on the page: `min-width: 0`
   + `max-width: 100%` keep the viewport inside its grid cell. */
.carousel-section { min-width: 0; }

.carousel {
  position: relative;
  min-width: 0;
  max-width: 100%;

  /* how many cards are visible — the only knob the breakpoints touch */
  --cards: 4;
  --card-width: calc((100% - (var(--cards) - 1) * var(--sp-4)) / var(--cards));

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the hover lift + shadow, pulled back with negative margins */
  padding: 6px 2px 22px;
  margin: -6px -2px -10px;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel:focus-visible { outline-offset: -2px; }

/* Pointer drag: snapping is switched off while dragging so the row follows
   the cursor 1:1, then switched back on so it settles on a card. */
.carousel.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
.carousel.is-dragging a,
.carousel.is-dragging button { pointer-events: none; }

.carousel__track {
  display: flex;
  gap: var(--sp-4);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carousel__track > * {
  flex: 0 0 var(--card-width);
  min-width: 0;
  scroll-snap-align: start;
}

/* Articles carousel shows fewer, wider cards. */
.carousel--articles { --cards: 3; }

/* Carousel arrows — dark graphite pills, neon green on hover.
   ALWAYS visible on every breakpoint: an arrow that cannot scroll further is
   `disabled` (dimmed), never hidden. */
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.carousel-nav button,
.carousel__nav {
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--c-dark);
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  flex: none;
  box-shadow: var(--sh-xs);
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}

.carousel-nav button:hover,
.carousel__nav:hover {
  background: var(--c-neon);
  color: var(--c-dark);
  border-color: var(--c-neon);
  transform: translateY(-1px);
}

.carousel-nav button:disabled,
.carousel__nav[disabled] {
  opacity: .35;
  cursor: default;
  transform: none;
  /* stays dark — never white-on-white */
  background: var(--c-dark);
  color: var(--color-surface);
  border-color: var(--c-border);
}

/* The arrow glyph itself. */
.carousel-nav__arrow {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10b. Brand strip (auto-scrolling logo slider)
   -------------------------------------------------------------------------- */
/* Compact strip, ~92px tall: 56px logo row + 2 × 18px padding. */
.brand-strip,
.brands {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: 0 var(--sp-2);
  min-width: 0;
}

/* Infinite marquee.
   The viewport clips; the track holds TWO identical logo sets and slides to
   -50%, which is exactly one set, so the restart is invisible.

   Note: the spacing lives in the items' own padding, NOT in a flex `gap`.
   With a gap the track would be 2×set + (2n−1)×gap wide, so -50% would land
   half a gap away from the loop point and produce a visible jump every cycle. */
.brand-slider {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 18px 0;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.brand-slider.is-dragging { cursor: grabbing; }

.brand-slider__track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
  animation: brand-scroll var(--brand-duration, 44s) linear infinite;
  will-change: transform;
}

/* Pause on hover, on keyboard focus, and while the user is dragging. */
.brand-slider:hover .brand-slider__track,
.brand-slider:focus-within .brand-slider__track,
.brand-slider.is-dragging .brand-slider__track { animation-play-state: paused; }

@keyframes brand-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px;        /* → 48px between adjacent logos */
  flex: 0 0 auto;
  color: var(--c-text-muted);
  /* Was .68, which blended the label to 3.02:1 against the page. The strip is
     meant to read as quiet, not as unreadable — .9 keeps it recessive and
     clears 4.5:1. */
  opacity: .9;
  filter: grayscale(1);
  transition: opacity var(--t-fast), color var(--t-fast), filter var(--t-fast);
  white-space: nowrap;
}
.brand:hover { opacity: 1; color: var(--c-dark); filter: none; }

.brand__mark { width: 26px; height: 26px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   10c. USP / benefits row
   -------------------------------------------------------------------------- */
.usp-grid,
.usp {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}
.usp__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding: 18px 20px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
}
.usp__item:hover {
  border-color: transparent;
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.usp__icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--c-dark);
  display: grid;
  place-items: center;
  position: relative;
}
.usp__icon .icon { stroke: var(--c-neon); }
.usp__icon::after {
  content: "";
  position: absolute;
  inset: auto -3px -3px auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--c-neon);
  border: 2px solid var(--c-page);
}
.usp__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.usp__title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--c-text);
}
.usp__text { font-size: 12.5px; color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   10d. Long promo banners
   -------------------------------------------------------------------------- */
.promo-section { min-width: 0; }

.promo-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* not a hard height: the banner grows if the content needs it */
  min-height: 220px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  box-shadow: var(--sh-md);
  isolation: isolate;
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.promo-banner:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.promo-banner:hover .promo-banner__media { transform: scale(1.03); }

.promo-banner__art { position: absolute; inset: 0; z-index: var(--z-behind); }
.promo-banner__art svg { width: 100%; height: 100%; }

.promo-banner__content {
  padding: clamp(24px, 3.4vw, 40px) clamp(14px, 2vw, 24px)
           clamp(24px, 3.4vw, 40px) clamp(20px, 3.6vw, 44px);
  min-width: 0;
  z-index: 2;
}
.promo-banner__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: var(--r-pill);
}
.promo-banner__title {
  margin-top: 14px;
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.promo-banner__text {
  margin-top: 10px;
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  max-width: 42ch;
}
.promo-banner__cta { margin-top: 20px; }

.promo-banner__media {
  min-width: 0;
  padding: 18px clamp(14px, 2.6vw, 34px) 18px 0;
  display: grid;
  place-items: center;
  z-index: 1;
  transition: transform var(--t-slow);
}
.promo-banner__media svg { width: 100%; max-width: min(320px, 100%); height: auto; }

/* Dark gaming variant */
.promo-banner--gaming { background: var(--c-graphite); }
.promo-banner--gaming .promo-banner__title { color: var(--color-surface); }
.promo-banner--gaming .promo-banner__text { color: rgba(255, 255, 255, .72); }
.promo-banner--gaming .promo-banner__eyebrow {
  background: rgba(182, 255, 46, .16);
  color: var(--c-neon);
  border: 1px solid rgba(182, 255, 46, .4);
}

/* Light home-appliance variant */
.promo-banner--home { background: var(--c-surface-alt); }
.promo-banner--home .promo-banner__title { color: var(--c-dark); }
.promo-banner--home .promo-banner__text { color: var(--c-text-muted); }
.promo-banner--home .promo-banner__eyebrow {
  background: var(--c-dark);
  color: var(--c-neon);
  border: 1px solid var(--c-dark);
}


/* --------------------------------------------------------------------------
   11. Product card
   -------------------------------------------------------------------------- */
/* Width comes from `.carousel__track > *` (--card-width), so the card itself
   carries no width of its own and can never be wider than its share. */
.pcard {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.pcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: transparent;
}
.pcard:hover .pcard__art { transform: scale(1.07); }
.pcard:hover .pcard__actions {
  gap: 8px; opacity: 1; transform: translateX(0); }

.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
}
.pcard__art {
  width: 100%;
  height: 100%;
  transition: transform var(--t-slow);
}
.pcard__art svg { width: 100%; height: 100%; }

/* Badge stack. Vertical, capped in width, and it never overlaps the action
   icons on the right — the media box reserves room for it instead. */
.pcard__flags {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 60px;              /* keeps clear of the action icon column */
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  z-index: var(--z-card-flags);
  pointer-events: none;     /* badges must never eat a card click */
}

/* Reserved badge zone: the artwork is pushed down instead of being covered,
   so the product name, brand, price and promo copy can never sit under a
   badge no matter how many the admin adds. */
.pcard__media.has-badges { padding-top: 44px; }
.pcard__media.has-megabadge { padding-top: 72px; }
.pcard__media.has-badges.has-megabadge { padding-top: 78px; }
.pcard__media.has-megabadge .pcard__flags { top: 78px; }

.pcard__actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-card-actions);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}
/* The card action buttons must always be clickable — they sit above the
   artwork and are never covered by the carousel's drag surface. */
.pcard__act {
  position: relative;
  z-index: 5;
  pointer-events: auto;
  /* The overlay stack cannot hold four 44px circles inside a 4:3 image, so the
     icons are 40px with 8px spacing: over the 24px AA minimum, and over the
     24px spacing exception too. */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  color: var(--c-text);
  box-shadow: var(--sh-xs);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.pcard__act:hover { background: var(--c-neon); border-color: var(--c-neon); transform: scale(1.08); }
.pcard__act--remove:hover {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--color-surface);
}
.pcard__act--remove:hover .icon { stroke: var(--color-surface); }
.pcard--featured .pcard__act--remove:hover { background: var(--c-danger); color: var(--color-surface); }
.pcard__act.is-active { background: var(--c-neon); border-color: var(--c-neon); }
.pcard__act.is-active .icon { fill: var(--c-dark); stroke: var(--c-dark); }

/* The icon must never become the click target — the button must. */
.pcard button svg,
.pcard a svg,
.pcard__actions svg { pointer-events: none; }
.pcard__actions button {
  position: relative;
  z-index: 11;
  pointer-events: auto;
}

/* Keep actions reachable for keyboard / touch users */
.pcard__act:focus-visible { opacity: 1; }
.pcard__actions:focus-within { opacity: 1; transform: translateX(0); }

.pcard__body {
  padding: 14px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}
.pcard__brand {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  width: fit-content;
  cursor: pointer;
  transition: color var(--t-fast);
}
/* WCAG 2.2 SC 2.5.8. These two are the only card targets under 24px tall
   (brand 17.6px, name line 16px). They are text links, so the "inline
   exception" arguably applies — but the hit area is free to grow anyway:
   padding on an inline box enlarges what the pointer can reach WITHOUT
   changing the line box, so the card layout is unaffected. Verified in a
   browser: card heights before and after are identical. */
.pcard__brand {
  padding-block: 4px;
  /* A two-letter brand ("LG") is only 19px wide, so the target failed on
     WIDTH even once the height was fixed. `min-width` costs nothing for the
     long names, which are already wider than this. */
  min-width: 24px;
}
.pcard__name a { padding-block: 4px; }
/* Same rule for the brand link on the product page and in the breadcrumb. */
.pdinfo__brand a,
/* moved to the breadcrumb component, below */

.pcard__brand:hover { color: var(--c-neon-hover); }
.pcard--featured .pcard__brand:hover { color: var(--color-surface); }
.pcard__name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--c-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
}
.pcard__name a:hover { color: var(--c-neon-hover); }

.rating {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--c-text-muted);
}
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 14px; height: 14px; }
.stars .star-on   { fill: var(--c-neon-hover); stroke: var(--c-neon-hover); }
.stars .star-off  { fill: var(--c-border); stroke: var(--c-border); }

.stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
}
.stock__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stock--in    { color: var(--c-success); }
.stock--in .stock__dot { background: var(--c-success); }
.stock--low   { color: var(--color-warning); }
.stock--low .stock__dot { background: var(--color-warning); }
.stock--out   { color: var(--c-text-muted); }
.stock--out .stock__dot { background: var(--c-text-muted); }

.price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
}
.price__new {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--c-dark);
}
.price__old {
  font-size: 13px;
  color: var(--c-text-muted);
  text-decoration: line-through;
  font-weight: 600;
}

.pcard__foot { padding: 14px 16px 16px; }
.pcard__cta {
  width: 100%;
  padding: 13px 12px;
  border-radius: var(--r-md);
  background: var(--c-dark);
  color: var(--color-surface);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-base);
}
.pcard__cta:hover { background: var(--c-neon); color: var(--c-dark); box-shadow: var(--sh-neon); }
.pcard__cta:hover .icon { stroke: var(--c-dark); }
/* Add-to-cart success state ------------------------------------------------
   Applies to every add-to-cart button: the card CTA, the product page, the
   sticky bar, the quick view, wishlist cards and compare columns. The state is
   carried by the tick and the word PIEVIENOTS GROZAM; the colour only repeats
   what the text already says, so it survives greyscale and forced colours.
   The button is never disabled — a second unit is one click away. */
.is-added {
  background: var(--c-neon) !important;
  border-color: var(--c-neon-dark) !important;
  color: var(--c-dark) !important;
}
.is-added .icon { stroke: var(--c-dark) !important; }

/* A hint of movement on the tick, for people who accept motion. */
@media (prefers-reduced-motion: no-preference) {
  .is-added .icon { animation: addTick var(--t-fast) ease-out; }
}
@keyframes addTick {
  from { transform: scale(.6); opacity: .4; }
  to   { transform: scale(1);  opacity: 1; }
}
[data-reduce-motion="on"] .is-added .icon { animation: none; }

@media (forced-colors: active) {
  .is-added { background: Highlight !important; color: HighlightText !important; }
  .is-added .icon { stroke: HighlightText !important; }
}

/* "Grozā jau ir X gab." — a status line, never the button label. */
.incart {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-alt);
  font-size: var(--fs-caption);
  color: var(--color-text);
}
.incart .icon { flex: none; }
.incart[hidden] { display: none; }

#qvInCart { margin: 0 var(--sp-4) 10px; }

.pcard__cta[disabled] { background: var(--c-surface-alt); color: var(--c-text-muted); cursor: not-allowed; box-shadow: none; }

/* Out-of-stock action — identical footprint to `.pcard__cta`, outline style
   so it reads as secondary, with the same neon hover. */
.pcard__notify {
  width: 100%;
  padding: 13px 12px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-dark);
  border: 1.5px solid var(--c-dark);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), box-shadow var(--t-base);
}
.pcard__notify:hover {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
  box-shadow: var(--sh-neon);
}
.pcard__notify .icon { stroke: currentColor; }

/* Same button inside the dark featured card. */
.pcard--featured .pcard__notify {
  border-color: rgba(255, 255, 255, .55);
  color: var(--color-surface);
}
.pcard--featured .pcard__notify:hover {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
}

/* …and in the quick view sticky bar. */
.btn--notify {
  background: transparent;
  color: var(--c-dark);
  border: 1.5px solid var(--c-dark);
}
.btn--notify:hover {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
  box-shadow: var(--sh-neon);
}

/* Featured (promo) card — same size, different skin ---------------------- */
.pcard--featured {
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(182, 255, 46, .30) 0%, rgba(182, 255, 46, 0) 55%),
    linear-gradient(150deg, #2E322F 0%, var(--color-secondary) 60%, #101211 100%);
  border-color: #2E322F;
  color: var(--color-surface);
}
.pcard--featured .pcard__media {
  background: transparent;
}
.pcard--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 40% at 50% 105%, rgba(182,255,46,.22), transparent 70%);
  pointer-events: none;
}
.pcard--featured .pcard__name { color: var(--color-surface); }
.pcard--featured .pcard__brand { color: var(--c-neon); }
.pcard--featured .price__new { color: var(--c-neon); }
.pcard--featured .price__old { color: rgba(255,255,255,.45); }
.pcard--featured .rating { color: rgba(255,255,255,.62); }
.pcard--featured .stars .star-off { fill: rgba(255,255,255,.22); stroke: rgba(255,255,255,.22); }
.pcard--featured .stock--in { color: var(--c-neon); }
.pcard--featured .stock--in .stock__dot { background: var(--c-neon); }
.pcard--featured .pcard__cta { background: var(--c-neon); color: var(--c-dark); }
.pcard--featured .pcard__cta .icon { stroke: var(--c-dark); }
.pcard--featured .pcard__cta:hover { background: var(--c-neon-hover); }
.pcard--featured .pcard__act { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: var(--color-surface); }
.pcard--featured .pcard__act:hover { background: var(--c-neon); color: var(--c-dark); }
.pcard--featured .pcard__actions { opacity: 1; transform: none; }

.megabadge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--c-neon);
  color: var(--c-dark);
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.03em;
  box-shadow: 0 0 0 6px rgba(182, 255, 46, .18), var(--sh-md);
  transform: rotate(-8deg);
}

/* --------------------------------------------------------------------------
   11b. Product grid (wishlist page)
   Same `.pcard` component as the sliders — only the container differs.
   -------------------------------------------------------------------------- */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pgrid > * { min-width: 0; }
/* Cards in a grid always show their actions — there is no swipe here. */
.pgrid .pcard__actions { opacity: 1; transform: none; }

/* Empty state ------------------------------------------------------------ */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: clamp(48px, 8vw, 84px) var(--sp-5);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
}
.empty__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--c-neon);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  box-shadow: 0 0 0 10px rgba(182, 255, 46, .18);
}
.empty__icon svg {
  width: 40px;
  height: 40px;
  fill: var(--c-dark);
  stroke: var(--c-dark);
  stroke-width: 1.5;
}
.empty__title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 900;
  letter-spacing: -.02em;
}
.empty__text {
  color: var(--c-text-muted);
  font-size: 14.5px;
  max-width: 42ch;
}
.empty__cta { margin-top: 10px; padding: 15px 28px; letter-spacing: .08em; }

/* --------------------------------------------------------------------------
   11c. 30-day lowest price (EU price-indication rule)
   -------------------------------------------------------------------------- */
.lowest30 {
  font-size: 11.5px;
  color: var(--c-text-muted);
  line-height: 1.3;
  margin-top: -2px;
}
.lowest30 span { font-weight: 700; color: var(--c-text); }
.pcard--featured .lowest30 { color: rgba(255, 255, 255, .6); }
.pcard--featured .lowest30 span { color: var(--color-surface); }

/* Quick view: a touch larger, sits under the price row. */
.modal__info .lowest30 { font-size: 12.5px; margin-top: -6px; }

/* --------------------------------------------------------------------------
   11d. Compare table
   -------------------------------------------------------------------------- */
.ctable-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card);
  box-shadow: var(--sh-sm);
  max-width: 100%;
  min-width: 0;
}
.ctable-wrap::-webkit-scrollbar { height: 8px; }
.ctable-wrap::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: var(--r-pill); }

/* `width: max-content` (and NOT `min-width: 100%`) is what keeps the columns
   from stretching when a product is removed: the table shrinks to the sum of
   its fixed-width columns and simply leaves free space on the right. */
.ctable {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  width: max-content;
  font-size: 13.5px;
}
.ctable th,
.ctable td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
}
.ctable tbody tr:nth-child(even) td,
.ctable tbody tr:nth-child(even) .ctable__param { background: var(--c-page); }
.ctable tbody tr:last-child th,
.ctable tbody tr:last-child td { border-bottom: 0; }

/* Sticky parameter column so the labels stay readable while scrolling. */
.ctable__param {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 190px;
  min-width: 190px;
  background: var(--c-card);
  font-weight: 700;
  color: var(--c-text);
  border-right: 1px solid var(--c-border);
}
.ctable__param--head {
  z-index: 3;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  vertical-align: bottom;
  padding-bottom: 22px;
}
.ctable__product {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  vertical-align: top;
  padding-top: 22px;
}
/* Placeholder cells under the "add product" slot keep the row grid aligned. */
/* `td.` raises the specificity above `.ctable td`, which is what the two
   `!important` declarations here used to be doing. */
.ctable td.ctable__blank {
  width: 250px;
  min-width: 250px;
  max-width: 250px;
  background: transparent;
  border-bottom-color: transparent;
}
.ctable__price { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.ctable__muted { color: var(--c-text-muted); }
.ctable td .stars svg { width: 13px; height: 13px; }

/* Product column header */
.ccol { display: flex; flex-direction: column; gap: 8px; }
.ccol__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px;
  display: grid;
  place-items: center;
}
.ccol__media svg { width: 100%; height: 100%; }
.ccol__media .badge { position: absolute; top: 10px; left: 10px; }
.ccol__brand {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.ccol__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  min-height: 2.6em;
}
.ctable__foot td {
  padding: 18px;
  vertical-align: top;
  border-bottom: 0;
  background: var(--c-page);
}
.ctable__foot .ctable__param { background: var(--c-page); border-bottom: 0; }

.ccol__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: transparent;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--c-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.ccol__remove:hover {
  color: var(--c-danger);
  border-color: var(--c-danger);
  background: var(--color-surface);
}
.ccol__remove .icon { stroke: currentColor; }

/* --------------------------------------------------------------------------
   11e. Product detail page
   -------------------------------------------------------------------------- */
.pdtop {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-top: var(--sp-4);
}
.pdtop > * { min-width: 0; }

/* Gallery ---------------------------------------------------------------- */
.pdgallery { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pdgallery__main {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(16px, 3vw, 40px);
  display: grid;
  place-items: center;
}
.pdgallery__main svg { width: 100%; height: 100%; }
.pdgallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.pdthumb {
  aspect-ratio: 1 / 1;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 8px;
  display: grid;
  place-items: center;
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.pdthumb svg { width: 100%; height: 100%; }
.pdthumb:hover { border-color: var(--c-dark); transform: translateY(-2px); }
.pdthumb.is-active { border-color: var(--c-dark); box-shadow: 0 0 0 3px rgba(182, 255, 46, .35); }

/* Info panel ------------------------------------------------------------- */
.pdinfo { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.pdinfo__brand a {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--t-fast);
}
.pdinfo__brand a:hover { color: var(--c-neon-hover); }
.pdinfo__name {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.pdinfo__rating a { font-weight: 700; text-decoration: underline; }
.pdinfo__rating a:hover { color: var(--c-neon-hover); }
.pdinfo__sku { font-size: 12.5px; color: var(--c-text-muted); }
.pdinfo__pricing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.pdinfo__pricing .price__new { font-size: 30px; }

/* Availability block ----------------------------------------------------- */
.avail-block {
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}
.avail-block__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-3);
}
.avail { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.avail__row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13.5px;
}
.avail__row:last-child { border-bottom: 0; }
.avail__icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-control);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
}
.avail__icon .icon { width: 17px; height: 17px; stroke: var(--c-dark); }
.avail__label { font-weight: 600; min-width: 0; }
.avail__value { font-weight: 800; text-align: right; white-space: nowrap; }
.avail__row.is-fast .avail__value { color: var(--c-success); }
.avail__row.is-fast .avail__icon { background: var(--c-neon); border-color: var(--c-neon); }
.avail__row.is-none { opacity: .55; }
.avail__row.is-none .avail__value { color: var(--c-text-muted); font-weight: 600; }

/* Buy row ---------------------------------------------------------------- */
.pdbuy {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.pdbuy__main { flex: 1 1 220px; min-width: 0; display: flex; }
.pdbuy__cta {
  width: 100%;
  padding: 16px 24px;
  font-size: 13.5px;
  letter-spacing: .08em;
  justify-content: center;
}
.pdbuy__icon {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-card);
  display: grid;
  place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pdbuy__icon:hover { border-color: var(--c-dark); }
.pdbuy__icon.is-active { background: var(--c-neon); border-color: var(--c-neon); }
.pdbuy__icon.is-active .icon { fill: var(--c-dark); stroke: var(--c-dark); }
.pdcompare { width: fit-content; font-size: 12px; letter-spacing: .06em; }
.pdcompare.is-active { background: var(--c-neon); border-color: var(--c-neon); color: var(--c-dark); }
.pdcompare.is-active .icon { stroke: var(--c-dark); }

/* Leasing teaser on the product page ------------------------------------
   Quiet: a light grey card with one neon accent, clearly below the price. */
.leasecard {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-neon);
  border-radius: var(--r-md);
}
.leasecard__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.leasecard__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.leasecard__from { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.leasecard__note { font-size: 11.5px; color: var(--c-text-muted); }
.leasecard__cta { font-size: 11.5px; letter-spacing: .06em; padding: 11px 18px; white-space: nowrap; }

/* Calculator dialog ------------------------------------------------------ */
.modal__dialog--lease { width: min(520px, 100%); }
.leasecalc { padding: 30px 26px 26px; display: flex; flex-direction: column; gap: var(--sp-4); }
.leasecalc__title { font-size: 22px; font-weight: 900; letter-spacing: -.02em; padding-right: 34px; }
.leasecalc__note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  color: var(--c-text-muted);
  line-height: 1.5;
}
.leasecalc__note .icon { stroke: var(--c-dark); flex: none; margin-top: 1px; }
.leasecalc__cta { width: 100%; padding: 15px 22px; letter-spacing: .08em; }

.leasefield { display: flex; flex-direction: column; gap: 9px; }
.leasefield__label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.leasechips { display: flex; flex-wrap: wrap; gap: 8px; }
.leasechip {
  flex: 1 1 74px;
  min-width: 0;
  padding: 11px 10px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 800;
  transition: border-color var(--t-fast), background var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.leasechip:hover { border-color: var(--c-dark); transform: translateY(-2px); }
.leasechip.is-active {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
}

.leasesum {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: var(--sp-4);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.leasesum__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.leasesum__row dt { color: var(--c-text-muted); }
.leasesum__row dd { margin: 0; font-weight: 700; text-align: right; }
.leasesum__row--big {
  border-top: 1px solid var(--c-border);
  padding-top: 10px;
  font-size: 15px;
}
.leasesum__row--big dt { color: var(--c-text); font-weight: 800; }
.leasesum__row--big dd { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }

/* Application form in checkout ------------------------------------------- */
.leasebox {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-page);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.leasebox__title { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.leasebox__text { font-size: 13px; color: var(--c-text-muted); }
.leasebox__privacy {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--c-text-muted);
  padding: 10px 12px;
  background: var(--c-card);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
}
.leasebox__privacy .icon { stroke: var(--c-success); flex: none; }
.leasebox__sub {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  padding-top: 6px;
  border-top: 1px solid var(--c-border);
}
.leasebox__submit { width: 100%; padding: 15px 22px; letter-spacing: .06em; margin-top: 4px; }

.leaseterms {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-4);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.leaseterms__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.leaseterms__row dt { color: var(--c-text-muted); }
.leaseterms__row dd { margin: 0; font-weight: 700; text-align: right; }
.leaseterms__row--big { border-top: 1px solid var(--c-border); padding-top: 9px; }
.leaseterms__row--big dd { font-size: 18px; font-weight: 900; color: var(--c-dark); }
.leaseterms__note { font-size: 11.5px; color: var(--c-text-muted); }

/* Upload zone ------------------------------------------------------------ */
.dropzone {
  position: relative;
  border: 2px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
  padding: var(--sp-5);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dropzone.is-over { border-color: var(--c-neon); background: rgba(182, 255, 46, .08); }
.dropzone.has-error { border-color: var(--c-danger); }
/* Off-screen but still FOCUSABLE: keyboard users tab straight onto the file
   input and press Enter. `pointer-events: none` would have made it a
   drag-and-drop-only control. */
.dropzone__input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  opacity: 0;
}
/* The visitor must be able to SEE where the invisible input is. */
.dropzone:focus-within {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: 3px;
  border-color: var(--c-neon-dark);
}
.dropzone__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.dropzone__empty .icon { stroke: var(--c-text-muted); }
.dropzone__hint { font-size: 14px; font-weight: 700; }
.dropzone__or { font-size: 12px; color: var(--c-text-muted); }
.dropzone__types { font-size: 11.5px; color: var(--c-text-muted); }
.dropzone__file { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dropzone__file .icon { stroke: var(--c-success); flex: none; }
.dropzone__meta { display: flex; flex-direction: column; gap: 2px; flex: 1 1 160px; min-width: 0; }
.dropzone__meta strong { font-size: 13.5px; overflow-wrap: anywhere; }
.dropzone__meta span { font-size: 12px; color: var(--c-text-muted); }
.dropzone__remove {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-danger);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.dropzone__remove:hover { background: rgba(228, 72, 61, .1); }

.leasedone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: var(--sp-6) var(--sp-4);
}
.leasedone .empty__icon { width: 64px; height: 64px; }
.leasedone .empty__icon svg { width: 30px; height: 30px; }

/* Share block ------------------------------------------------------------
   Deliberately quiet: small grey circles that sit below the buy row and
   never compete with the PIEVIENOT GROZAM button. */
.share {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.share__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: .02em;
}
.share__row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}
/* 44×44 — the ticket's target size, and comfortable on touch. */
.sharebtn {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-page);
  color: var(--c-text);
  display: inline-grid;
  place-items: center;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.sharebtn .icon { stroke: currentColor; }
.sharebtn:hover {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
  transform: translateY(-2px);
}
.sharebtn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.share__native {
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 10px 18px;
}

/* Tabs ------------------------------------------------------------------- */
.pdtabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.pdtabs::-webkit-scrollbar { display: none; }
.pdtab {
  flex: 0 0 auto;
  padding: 14px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.pdtab:hover { color: var(--c-dark); background: var(--c-page); }
.pdtab.is-active { color: var(--c-dark); border-bottom-color: var(--c-neon); font-weight: 800; }
.pdtab:focus-visible { outline-offset: -3px; }

.pdpanel { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.prose { font-size: 14.5px; color: var(--c-text-muted); max-width: 72ch; line-height: 1.65; }
.tabh {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 4px;
}
.ticks { display: flex; flex-direction: column; gap: 9px; list-style: none; margin: 0; padding: 0; }
.ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ticks .icon { stroke: var(--c-dark); flex: none; }

.spectable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-size: 13.5px;
}
.spectable th,
.spectable td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--c-border); }
.spectable tr:last-child th,
.spectable tr:last-child td { border-bottom: 0; }
.spectable th { width: 40%; color: var(--c-text-muted); font-weight: 600; background: var(--c-page); }
.spectable td { font-weight: 700; }

/* Documents -------------------------------------------------------------- */
.doclist { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.doclist__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
  flex-wrap: wrap;
}
.doclist__icon {
  width: 42px; height: 42px; flex: none;
  border-radius: var(--r-md);
  background: var(--c-dark);
  display: grid; place-items: center;
}
.doclist__icon .icon { stroke: var(--c-neon); }
.doclist__body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0; }
.doclist__title { font-size: 14px; font-weight: 700; }
.doclist__meta { font-size: 12px; color: var(--c-text-muted); }
.doclist__btn {
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.doclist__btn:hover { background: var(--c-neon); border-color: var(--c-neon); }

/* Video placeholder ------------------------------------------------------ */
.videobox {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.videobox__poster svg { width: 100%; height: auto; display: block; }
.videobox__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--c-neon);
  color: var(--c-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 10px rgba(182, 255, 46, .2);
  transition: transform var(--t-fast);
}
.videobox__play svg { width: 30px; height: 30px; }
.videobox__play:hover { transform: scale(1.07); }
.videobox__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 18px;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  color: var(--color-surface);
  font-size: 12.5px;
}

/* Store stock ------------------------------------------------------------ */
.storestock { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.storestock__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13.5px;
}
.storestock__row:last-child { border-bottom: 0; }
.storestock__row .icon { stroke: var(--c-text-muted); }
.storestock__city { font-weight: 600; }
.storestock__val { font-weight: 800; white-space: nowrap; }
.storestock__row.is-good .icon { stroke: var(--c-success); }
.storestock__row.is-good .storestock__val { color: var(--c-success); }
.storestock__row.is-none { opacity: .6; }

/* Reviews ---------------------------------------------------------------- */
.revsum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.revsum__score { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.revsum__score strong { font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
.revsum__score span { font-size: 13px; color: var(--c-text-muted); }
.revlist { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; margin: 0; padding: 0; }
.rev {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
}
.rev__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rev__name { font-weight: 800; font-size: 14px; }
.rev__date { font-size: 12px; color: var(--c-text-muted); margin-left: auto; }
.rev__text { font-size: 13.5px; color: var(--c-text-muted); line-height: 1.6; }

/* Mobile sticky buy bar --------------------------------------------------- */
/* --------------------------------------------------------------------------
   Smart sticky purchase bar
   Visibility is owned by JS (`initStickyBuyBar`), not by a breakpoint: it
   appears on every size once the main buy area has scrolled away and the
   visitor has paused. `translateY` keeps it off screen while hidden so the
   transition can run; `visibility` keeps it out of the tab order.
   -------------------------------------------------------------------------- */
.pdsticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky-bar);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px var(--page-gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -6px 24px rgba(23, 25, 24, .10);

  transform: translateY(110%);
  visibility: hidden;
  transition: transform var(--t-base), visibility var(--t-base);
}
.pdsticky.is-visible { transform: none; visibility: visible; }

.pdsticky__product { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.pdsticky__art {
  width: 46px; height: 46px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-page);
}
.pdsticky__art svg { width: 100%; height: 100%; }
.pdsticky__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pdsticky__name {
  font-size: .84rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdsticky__price { font-size: .92rem; font-weight: 900; letter-spacing: -.01em; }

html[data-a11y-contrast="dark"] .pdsticky { background: rgba(11, 13, 12, .97); }

@media (prefers-reduced-motion: reduce) { .pdsticky { transition: none; } }
html[data-a11y-motion="reduced"] .pdsticky { transition: none !important; }

@media (max-width: 600px) /* was 560px: .pdsticky__product — the bar is already in its compact, wrapped state at 600 */ { .pdsticky__product { display: none; } }

/* --------------------------------------------------------------------------
   11f. Added-to-cart popup
   -------------------------------------------------------------------------- */
.modal__dialog--cart { width: min(520px, 100%); }
.cartpop { padding: 30px 26px 26px; display: flex; flex-direction: column; gap: var(--sp-4); }
.cartpop__eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--c-success);
  padding-right: 34px;
}
.cartpop__eyebrow .icon { stroke: var(--c-success); }
.cartpop__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-page);
}
.cartpop__media {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  display: grid; place-items: center;
  padding: 5px;
}
.cartpop__media svg { width: 100%; height: 100%; }
.cartpop__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cartpop__brand {
  font-size: 10px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.cartpop__name { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cartpop__meta { font-size: 12.5px; color: var(--c-text-muted); }
.cartpop__meta strong { color: var(--c-dark); font-size: 14px; }
.cartpop__actions { display: flex; gap: var(--sp-3); }
.cartpop__actions .btn { flex: 1 1 0; padding: 15px 18px; letter-spacing: .06em; font-size: 12.5px; }

.xsell { display: flex; flex-direction: column; gap: var(--sp-3); }
.xsell__title { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.xsell__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.xsell__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  min-width: 0;
  transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
}
.xsell__item:hover { border-color: var(--c-dark); box-shadow: var(--sh-sm); transform: translateY(-2px); }
.xsell__media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  padding: 6px;
}
.xsell__media svg { width: 100%; height: 100%; }
.xsell__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xsell__brand {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.xsell__name {
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.xsell__price { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   11g. Gift card
   -------------------------------------------------------------------------- */


/* The hero slide shows the card artwork instead of a product silhouette. */
.hero__media--gift svg { max-width: min(420px, 100%); }

/* gift-card.html --------------------------------------------------------- */
.giftlayout {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding-bottom: var(--sp-8);
}
.giftlayout > * { min-width: 0; }

.giftpreview { min-width: 0; }
.giftpreview__inner {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.giftpreview__card {
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: clamp(16px, 3vw, 30px);
  box-shadow: var(--sh-sm);
}
.giftpreview__card svg { width: 100%; height: auto; }
.giftpreview__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.giftpreview__facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--c-text-muted);
}
.giftpreview__facts .icon { stroke: var(--c-dark); flex: none; }

.giftform { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.giftblock {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  padding: clamp(18px, 2.5vw, 26px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.giftblock__title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.giftblock--total { background: var(--c-page); }

.giftamts { display: flex; flex-wrap: wrap; gap: 10px; }
.giftamt {
  flex: 1 1 90px;
  min-width: 0;
  padding: 14px 12px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--c-border);
  background: var(--color-surface);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: border-color var(--t-fast), background var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.giftamt:hover { border-color: var(--c-dark); transform: translateY(-2px); }
.giftamt.is-active {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
  box-shadow: var(--sh-neon);
}
.giftamt[data-gift-amount="custom"] { flex: 1 1 130px; font-size: 13px; }

.giftform__submit {
  width: 100%;
  padding: 16px 24px;
  font-size: 13.5px;
  letter-spacing: .08em;
}

/* A gift card in the cart summary reads differently from a product variant. */
.cline__variant--gift {
  color: var(--c-dark);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   11h. Review page + rating breakdown
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Breadcrumbs
   Wrapping, never scrolling: a long trail must not create horizontal page
   scroll at any width.
   -------------------------------------------------------------------------- */
.crumbs {
  padding: var(--sp-1) 0 var(--sp-3);
  font-size: .8rem;
  color: var(--c-text-muted);
  min-width: 0;
}
.crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.crumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.crumbs__sep { color: var(--c-border-strong, var(--color-border-strong)); user-select: none; }
.crumbs__item:first-child .crumbs__sep { display: none; }

.crumbs__link,
.crumbs__current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;          /* comfortable pointer target in a text row */
  padding: 4px 2px;
  border-radius: var(--r-sm);
  min-width: 0;
}
.crumbs__link {
  color: var(--c-text-muted);
  text-decoration: none;
  /* WCAG 2.5.8: a two-letter crumb would otherwise be under 24px. */
  display: inline-block;
  padding-block: 4px;
  min-width: 24px;
}
.crumbs__link:hover { color: var(--c-neon-hover); text-decoration: underline; }
.crumbs__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.crumbs__current { color: var(--c-text); font-weight: 700; }

.crumbs__text { overflow-wrap: anywhere; }

/* Icon-only home link: 40px target, name provided by a .sr-only span. */
.crumbs__link--home { min-width: 40px; justify-content: center; }
.crumbs__homeicon { width: 18px; height: 18px; stroke: currentColor; }
.crumbs__link--home:hover .crumbs__homeicon { stroke: var(--c-neon-hover); }

/* The "…" disclosure. Hidden on desktop, where the whole trail fits. */
.crumbs__item--toggle { display: none; }
.crumbs__more {
  min-width: 32px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font-weight: 800;
  line-height: 1;
  color: var(--c-text);
}
.crumbs__more:hover { background: var(--c-neon); border-color: var(--c-neon-dark); }

@media (max-width: 600px) {
  .crumbs { font-size: .78rem; }
  .crumbs__item--toggle { display: inline-flex; }

  /* Collapsed middle levels stay in the accessibility tree — they are only
     taken out of the visual flow, exactly like `.sr-only`. */
  .crumbs__item.is-collapsed {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .crumbs.is-expanded .crumbs__item.is-collapsed {
    position: static;
    width: auto; height: auto;
    margin: 0; padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .crumbs.is-expanded .crumbs__item--toggle { display: none; }
}

.rvproduct {
  padding: var(--sp-4);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-neon-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  margin-bottom: var(--sp-4);
}
.rvproduct__lead {
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 12px;
}
.rvproduct__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.rvproduct__sku { font-size: .74rem; color: var(--c-text-muted); }
.rvproduct__check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 2px solid var(--c-dark);
  border-radius: var(--r-pill);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: var(--c-text);
}
.rvproduct__check:hover { background: var(--c-neon); }
.rvproduct__check:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 600px) /* was 520px: .rvproduct__row — one grid rule, same phone mode as everything else */ {
  .rvproduct__row { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
}
.rvproduct__media {
  width: 96px; height: 96px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--c-border);
  display: grid; place-items: center; padding: 6px;
}
.rvproduct__media svg { width: 100%; height: 100%; }
.rvproduct__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rvproduct__brand {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.rvproduct__name { font-size: 1.02rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.rvproduct__name:hover { color: var(--c-neon-hover); }
.rvproduct__price { font-size: 17px; font-weight: 900; letter-spacing: -.01em; }

.rvform { display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: var(--sp-8); }

/* Star input ------------------------------------------------------------- */
.stars-input { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.starbtn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  transition: transform var(--t-fast);
}
.starbtn svg { width: 34px; height: 34px; fill: var(--c-border); stroke: var(--c-border); transition: fill var(--t-fast), stroke var(--t-fast); }
.starbtn:hover { transform: scale(1.08); }
.starbtn.is-hover svg,
.starbtn.is-on svg { fill: var(--c-neon); stroke: var(--c-neon-hover); }
.stars-input__value { margin-left: 8px; font-size: 13.5px; font-weight: 700; color: var(--c-text-muted); }

/* Counters --------------------------------------------------------------- */
.field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.counter-text { font-size: 11.5px; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.counter-text.is-full { color: var(--c-danger); font-weight: 700; }

/* Benefit chips ---------------------------------------------------------- */
.benefitchips { display: flex; flex-wrap: wrap; gap: 8px; }
.benefitchip input { position: absolute; opacity: 0; width: 0; height: 0; }
.benefitchip span {
  display: block;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-border);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.benefitchip span:hover { border-color: var(--c-dark); }
.benefitchip input:checked + span { background: var(--c-neon); border-color: var(--c-neon); color: var(--c-dark); }
.benefitchip input:focus-visible + span { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* Photo previews --------------------------------------------------------- */
.rvphotos {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.rvphotos:empty { display: none; }
.rvphoto { position: relative; width: 96px; height: 96px; }
.rvphoto img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--c-border);
}
.rvphoto__remove {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-dark); color: var(--color-surface);
  display: grid; place-items: center;
  border: 2px solid var(--color-surface);
  transition: background var(--t-fast);
}
.rvphoto__remove:hover { background: var(--c-danger); }
.rvphoto__remove .icon { stroke: currentColor; }

.optlist--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }

.rvactions { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.rvactions .btn { padding: 15px 26px; letter-spacing: .06em; }

/* Rating breakdown on the product page ----------------------------------- */
.revbars { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.revbar {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.revbar__n { font-weight: 700; color: var(--c-text-muted); white-space: nowrap; }
.revbar__track {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--c-surface-alt);
  overflow: hidden;
}
.revbar__fill { display: block; height: 100%; background: var(--c-neon); border-radius: var(--r-pill); }
.revbar__count { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   12. Article cards
   -------------------------------------------------------------------------- */
.acard {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.acard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: transparent; }
.acard:hover .acard__art { transform: scale(1.05); }
.acard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-surface-alt);
}
.acard__art { width: 100%; height: 100%; transition: transform var(--t-slow); }
.acard__art svg { width: 100%; height: 100%; }
.acard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.acard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--c-text-muted);
  font-weight: 600;
}
.acard__cat {
  color: var(--c-dark);
  background: var(--c-neon);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.acard__title { font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.acard__text { font-size: 13.5px; color: var(--c-text-muted); }
.acard__link {
  margin-top: auto;
  padding-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 800;
  color: var(--c-dark);
}
.acard__link .icon { transition: transform var(--t-fast); }
.acard__link:hover { color: var(--c-neon-hover); }
.acard__link:hover .icon { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   12b. Store locator
   -------------------------------------------------------------------------- */
.sechead__sub {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--c-text-muted);
  max-width: 52ch;
}

.stores,
.stores-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: var(--sp-6);
  align-items: stretch;
}
.stores > * { min-width: 0; }

/* Map -------------------------------------------------------------------
   The map has NO height of its own. Its content is absolutely positioned,
   so the column contributes nothing to the row height — the store list on
   the right decides how tall the row is, and `align-items: stretch` makes
   the map match it exactly. No JS measuring anywhere. */
.storemap,
.stores-map {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  background: #EDF1EE;
  border: 1px solid var(--c-border);
  box-shadow: var(--sh-sm);
}
.storemap__inner,
.stores-map__inner {
  position: absolute;
  inset: 0;
}
/* `meet` keeps the whole country visible and undistorted; the letterbox is
   the same colour as the panel, and the markers live INSIDE the SVG so they
   always line up with the coastline at any container aspect ratio. */
.storemap__svg,
.stores-map svg { width: 100%; height: 100%; display: block; }

.storemap__minor text { paint-order: stroke; stroke: var(--c-art-hi); stroke-width: 4px; }

/* Markers --------------------------------------------------------------- */
.pin { cursor: pointer; }
.pin__drop {
  fill: var(--c-neon);
  stroke: var(--c-dark);
  stroke-width: 2.5;
  transition: transform var(--t-base);
  transform-origin: 0 -7px;
}
.pin__tail { fill: var(--c-dark); }
.pin__dot  { fill: var(--c-dark); }
.pin__halo { fill: var(--c-neon); opacity: 0; transition: opacity var(--t-fast); }
.pin__pulse { fill: var(--c-neon); opacity: 0; }
.pin__label {
  fill: var(--c-dark);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--c-art-hi);
  stroke-width: 5px;
  pointer-events: none;
}

.pin:hover .pin__drop,
.pin:focus-visible .pin__drop,
.pin.is-active .pin__drop { transform: scale(1.18); }
.pin:hover .pin__halo,
.pin.is-active .pin__halo { opacity: .28; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__halo { opacity: .45; }

/* Gentle pulse on the active marker only. */
.pin.is-active .pin__pulse { animation: pin-pulse 2s ease-out infinite; }
@keyframes pin-pulse {
  0%   { opacity: .5; transform: scale(.6); }
  70%  { opacity: 0;  transform: scale(2.1); }
  100% { opacity: 0;  transform: scale(2.1); }
}

/* Popup ----------------------------------------------------------------- */
.storepopup {
  position: absolute;
  z-index: var(--z-store-popup);
  width: min(280px, calc(100% - 24px));
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  padding: 16px 18px 18px;
  transform: translate(-50%, calc(-100% - 26px));
  animation: pop var(--t-base) both;
}
.storepopup--below { transform: translate(-50%, 18px); }

.storepopup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.storepopup__close:hover { background: var(--c-neon); color: var(--c-dark); }

.storepopup__city {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.storepopup__name {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 4px 24px 12px 0;
}
.storepopup__rows { display: flex; flex-direction: column; gap: 9px; }
.storepopup__row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--c-text);
  overflow-wrap: anywhere;
}
.storepopup__row .icon { stroke: var(--c-dark); margin-top: 1px; flex: none; }
.storepopup__row a:hover { color: var(--c-neon-hover); }

/* Store list ------------------------------------------------------------
   This column is what sets the height of the whole row. */
.storelist,
.stores-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.storelist__item {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  transition: border-color var(--t-fast), box-shadow var(--t-base), transform var(--t-fast);
}
.storelist__item:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.storelist__item.is-active {
  border-color: var(--c-dark);
  box-shadow: var(--sh-md);
}
.storelist__city {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.storelist__city .icon { stroke: var(--c-dark); }
.storelist__item.is-active .storelist__city .icon { stroke: var(--c-neon-hover); }
.storelist__meta { font-size: 12.5px; color: var(--c-text-muted); overflow-wrap: anywhere; }
.storelist__btn {
  margin-top: auto;
  padding-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-dark);
  width: fit-content;
}
.storelist__btn .icon { transition: transform var(--t-fast); }
.storelist__btn:hover { color: var(--c-neon-hover); }
.storelist__btn:hover .icon { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   12c. Checkout
   -------------------------------------------------------------------------- */

/* Entry choice ----------------------------------------------------------- */
.gate {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  padding: clamp(28px, 5vw, 48px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Progress steps --------------------------------------------------------- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  flex-wrap: wrap;
}
.steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-card);
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-muted);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.steps__n {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  font-size: 12px;
  font-weight: 800;
}
.steps__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps__item.is-done { border-color: var(--c-dark); color: var(--c-text); }
.steps__item.is-done .steps__n { background: var(--c-dark); color: var(--c-neon); }
.steps__item.is-active {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
  box-shadow: var(--sh-neon);
}
.steps__item.is-active .steps__n { background: var(--c-dark); color: var(--c-neon); }

/* Two-column layout ------------------------------------------------------ */
.colayout {
  display: grid;
  grid-template-columns: minmax(0, 65fr) minmax(300px, 35fr);
  gap: var(--sp-6);
  align-items: start;
}
.colayout > * { min-width: 0; }

.coform {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  padding: clamp(20px, 3vw, 32px);
  min-width: 0;
}
.costep { display: flex; flex-direction: column; gap: var(--sp-5); }
.costep__title { font-size: clamp(19px, 2.4vw, 24px); font-weight: 900; letter-spacing: -.02em; }
.costep__sub {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-top: 6px;
}
.costep__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 6px;
}
.costep__next { padding: 15px 26px; letter-spacing: .06em; }
.costep__actions .btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }

/* Segmented control (private / company) ---------------------------------- */
.segmented {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.segmented__opt { flex: 1 1 auto; }
.segmented__opt input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__opt span {
  display: block;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.segmented__opt input:checked + span { background: var(--c-dark); color: var(--color-surface); }
.segmented__opt input:focus-visible + span { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* Fields ----------------------------------------------------------------- */
.fieldgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; grid-column: 1 / -1; }
.field--half { grid-column: auto; }
.field__label { font-size: 12.5px; font-weight: 700; color: var(--c-text); }
.field__label span[aria-hidden] { color: var(--c-danger); }
.field__opt { font-weight: 500; color: var(--c-text-muted); }
.field__input {
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--color-surface);
  font-size: 14px;
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-base);
}
.field__input:focus {
  outline: none;
  border-color: var(--c-dark);
  box-shadow: 0 0 0 4px rgba(182, 255, 46, .3);
}
.field__input--area { resize: vertical; min-height: 84px; }
.field__error { font-size: 12px; color: var(--c-danger); font-weight: 600; min-height: 0; }
.field.has-error .field__input { border-color: var(--c-danger); }
.field.has-error .field__input:focus { box-shadow: 0 0 0 4px rgba(228, 72, 61, .18); }

/* Checkbox --------------------------------------------------------------- */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-page);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--c-border);
  background: var(--color-surface);
  flex: none;
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check__box::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 2px;
  background: var(--c-dark);
  opacity: 0;
  transition: opacity var(--t-fast);
}
.check input:checked + .check__box { background: var(--c-neon); border-color: var(--c-neon); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.check__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.check__title { font-size: 13.5px; font-weight: 700; }
.check__note { font-size: 12.5px; color: var(--c-text-muted); }
.check .field__error { grid-column: 1 / -1; }
.check.has-error { border-color: var(--c-danger); background: rgba(228, 72, 61, .05); }
.check.has-error .check__box { border-color: var(--c-danger); }

/* Radio option cards ----------------------------------------------------- */
.optlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.optcard { display: block; cursor: pointer; }
.optcard input { position: absolute; opacity: 0; width: 0; height: 0; }
.optcard__box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 16px 18px;
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-base), background var(--t-fast);
}
.optcard__box::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  background: var(--color-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.optcard input:checked + .optcard__box {
  border-color: var(--c-dark);
  box-shadow: var(--sh-sm);
}
.optcard input:checked + .optcard__box::before {
  border-color: var(--c-dark);
  box-shadow: inset 0 0 0 4px var(--c-neon);
}
.optcard input:focus-visible + .optcard__box { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.optcard__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.optcard__title { font-size: 14.5px; font-weight: 800; }
.optcard__meta { font-size: 12.5px; color: var(--c-text-muted); }
.optcard__price { font-size: 15px; font-weight: 900; white-space: nowrap; }
.optcard__price--free { color: var(--c-success); }

.delbox {
  padding: var(--sp-4);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-page);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cardbox {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-page);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cardbox__note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--c-text-muted);
}
.cardbox__note .icon { stroke: var(--c-dark); }

/* Order review ----------------------------------------------------------- */
.review {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.review__items { list-style: none; margin: 0; padding: 0; }
.review__item,
.review__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 11px 16px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--c-border);
}
.review__item span:first-child { min-width: 0; overflow-wrap: anywhere; }
.review__item span:last-child { font-weight: 700; white-space: nowrap; }
.review__block { background: var(--c-page); }
.review__row span:first-child { color: var(--c-text-muted); }
.review__row span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.review__row--total {
  background: var(--c-dark);
  color: var(--color-surface);
  border-bottom: 0;
  font-size: 16px;
}
.review__row--total span:first-child { color: rgba(255,255,255,.7); font-weight: 700; }
.review__row--total span:last-child { color: var(--c-neon); font-weight: 900; }
.review > *:last-child .review__row:last-child { border-bottom: 0; }

/* Order summary (sticky) -------------------------------------------------- */
.ordersum { min-width: 0; }
.ordersum__inner {
  position: sticky;
  top: 16px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.ordersum__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.01em;
}
.ordersum__count {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
}
.ordersum__rows { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ordersum__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: 13.5px;
}
.ordersum__row dt { color: var(--c-text-muted); }
.ordersum__row dd { margin: 0; font-weight: 700; text-align: right; }
.ordersum__row--total {
  border-top: 1px solid var(--c-border);
  padding-top: 12px;
  font-size: 16px;
}
.ordersum__row--total dt { color: var(--c-text); font-weight: 800; }
.ordersum__row--total dd { font-size: 20px; font-weight: 900; letter-spacing: -.02em; }

.cart-empty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 18px;
  border: 1px dashed var(--c-border);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--c-text-muted);
}

/* Cart lines ------------------------------------------------------------- */
.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-height: 40vh;
  overflow-y: auto;
}
.cline {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}
.cline:last-child { border-bottom: 0; padding-bottom: 0; }
.cline__media {
  width: 60px;
  height: 60px;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  padding: 4px;
}
.cline__media svg { width: 100%; height: 100%; }
.cline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cline__brand {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.cline__name { font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cline__variant,
.cline__unit { font-size: 11.5px; color: var(--c-text-muted); }
.cline__controls {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cline__subtotal { font-size: 14px; font-weight: 900; margin-left: auto; white-space: nowrap; }
.cline__remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}
.cline__remove:hover { background: var(--c-danger); color: var(--color-surface); }
.cline__remove .icon { stroke: currentColor; }

.qty--sm .qty__btn { width: 30px; height: 30px; }
.qty--sm .qty__val { min-width: 28px; font-size: 13px; }

/* Success ---------------------------------------------------------------- */
.ordersuccess__number {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 20px;
  margin-top: 4px;
}
.ordersuccess__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}

/* --------------------------------------------------------------------------
   12d. Account / auth
   -------------------------------------------------------------------------- */
/* The panel is centred horizontally AND vertically in whatever height is
   left between the header and the footer. */
.authwrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(72vh, 720px);
  padding: clamp(16px, 4vw, 48px) 0;
  min-width: 0;
}

/* One compact card — never the full page width. */
.authcard,
.auth-card {
  width: min(100%, 520px);
  margin-inline: auto;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--sh-sm);
  padding: clamp(28px, 3.5vw, 40px) clamp(24px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.authcard--wide { width: min(100%, 680px); }
.authcard--center { align-items: center; text-align: center; }

/* Heading block is centred; the form below stays left-aligned. */
.auth-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  margin-bottom: 4px;
}

.authcard__title {
  font-size: clamp(22px, 3vw, 27px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.authcard__text { color: var(--c-text-muted); font-size: 13.5px; line-height: 1.5; }
.authcard--center .authcard__text { max-width: 40ch; }
.auth-card__head .authcard__text { max-width: 38ch; margin-inline: auto; }

.authform { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Both stacked buttons span the card, never the page. */
.authform__submit {
  display: flex;
  width: 100%;
  padding: 15px 24px;
  letter-spacing: .08em;
  margin-top: 0;
}
.authform .btn--neon.authform__submit { margin-top: 4px; }
.authform .btn--ghost.authform__submit { margin-top: -6px; }

.authlink {
  align-self: center;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text-muted);
  padding: 6px 4px;
  border-radius: var(--r-sm);
  background: none;
  transition: color var(--t-fast);
}
.authlink:hover { color: var(--c-dark); text-decoration: underline; }

/* "or" divider */
.authsep {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--c-text-muted);
  margin: 2px 0;
}
.authsep::before,
.authsep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--c-border);
}

/* Google button ---------------------------------------------------------- */
.gbtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 52px;
  border: 1px solid var(--c-border);
  background: var(--color-surface);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: var(--r-pill);
}
.gbtn:hover { border-color: var(--c-dark); background: var(--c-page); }
/* Icon on the left edge, label centred in the button. */
.gbtn__mark {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}
.gbtn__mark svg { width: 100%; height: 100%; }
.gbtn__label { text-align: center; }

/* Password field with a reveal toggle ------------------------------------ */
/* The reveal button is an overlay INSIDE the input, not a sibling below it. */
.pwrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.pwrap .field__input { width: 100%; padding-right: 48px; }
.pwrap__eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  color: var(--c-text-muted);
  transition: color var(--t-fast), background var(--t-fast);
}
.pwrap__eye:hover { color: var(--c-dark); background: var(--c-page); }
.pwrap__eye.is-on { color: var(--c-dark); background: var(--c-neon); }
.pwrap__eye .icon { stroke: currentColor; }

/* --------------------------------------------------------------------------
   Login dialog
   The regression: the Google button and the "vai" divider were added to this
   view (+~110px) without tightening the surrounding rhythm, so on a laptop
   viewport the content passed `min(88vh, 760px)` and "Aizmirsi paroli?" fell
   below the fold, inside the dialog's own scroller.
   Fix: a slightly wider dialog, a viewport-relative cap and a tighter
   vertical rhythm. Overflow stays ENABLED for short/landscape viewports and
   for high zoom — it is simply no longer reached on a normal desktop.
   -------------------------------------------------------------------------- */
.modal__dialog--auth {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
}
@supports (height: 100dvh) {
  .modal__dialog--auth { max-height: calc(100dvh - 32px); }
}

.authmodal {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Tighter than the page rhythm on purpose: this dialog has to fit a laptop
   viewport without an inner scrollbar. */
.authmodal [data-authmodal-view] {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  /* Inputs must not stretch out of proportion in the wider dialog. */
  width: 100%;
  max-width: 420px;
  align-self: center;
}
.authmodal .authcard__title { font-size: 22px; padding-right: 34px; }
.authmodal .authform { gap: var(--sp-3); }
.authmodal .field__error:empty { display: none; }   /* no reserved blank line */
.authmodal .authdiv { margin: 4px 0; }
.authmodal .btn--google { min-height: 46px; }
.authmodal .authform__submit { padding: 13px 24px; }
.authmodal__done { align-items: center; text-align: center; }
.authmodal__done .empty__icon { width: 68px; height: 68px; }
.authmodal__done .empty__icon svg { width: 32px; height: 32px; }
.authmodal__done .authcard__title { padding-right: 0; }

/* Signed-in header hint --------------------------------------------------- */
.action--account.is-authed .action__sub { color: var(--c-neon-hover); font-weight: 800; }
.action--account.is-authed .action__icon {
  background: var(--c-neon);
  border-color: var(--c-neon);
}
.action--account.is-authed .action__icon .icon { stroke: var(--c-dark); }

/* Dashboard --------------------------------------------------------------- */
.dash {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash > * { min-width: 0; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Footer — a DARK component
   It must never inherit the page ink tokens (`--color-heading`,
   `--color-text`): those describe dark text on a light page and turn the
   footer unreadable. It has its own set instead, which the admin can theme.
   -------------------------------------------------------------------------- */
.footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  margin-top: var(--sp-16);
  font-size: var(--fs-small);
}

/* One class-level override beats the global `h1..h6 { color }` type rule
   without needing !important. */
.footer h2,
.footer h3,
.footer h4,
.footer .footer__title { color: var(--footer-heading); }

.footer a { color: var(--footer-link); }
.footer a:hover,
.footer a:focus-visible { color: var(--footer-link-hover); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-10);
  padding: var(--sp-12) 0;
}
.footer__grid > * { min-width: 0; }
.footer__title {
  color: var(--footer-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.footer__title::before {
  content: "";
  width: 4px;
  height: 15px;
  background: var(--footer-link-hover);
  border-radius: var(--r-pill);
}
.footer__contact { display: flex; flex-direction: column; gap: 12px; }
.footer__row { display: flex; align-items: center; gap: 10px; }
.footer__row .icon { stroke: var(--c-neon); width: 17px; height: 17px; }
.footer__big { color: var(--footer-heading); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.footer__big:hover { color: var(--footer-link-hover); }

.socials { display: flex; gap: 9px; margin-top: 4px; }
.social {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: grid; place-items: center;
  color: var(--color-surface);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
}
.social:hover { background: var(--c-neon); color: var(--c-dark); border-color: var(--c-neon); transform: translateY(-2px); }

.newsletter { margin-top: 8px; }
.newsletter__label { font-size: 12.5px; margin-bottom: 9px; color: var(--footer-text); }
.newsletter__form {
  display: flex;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill);
  padding: 4px 4px 4px 16px;
}
.newsletter__form:focus-within { border-color: var(--c-neon); }
.newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--footer-heading);
  font-size: 13.5px;
  padding: 9px 0;
}
.newsletter__input::placeholder { color: var(--footer-muted); }
.newsletter__btn {
  flex: none;
  background: var(--c-neon);
  color: var(--c-dark);
  border-radius: var(--r-pill);
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 18px;
  transition: background var(--t-fast);
}
.newsletter__btn:hover { background: var(--c-neon-hover); }

.footer__links { display: flex; flex-direction: column; gap: 11px; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-fast), transform var(--t-fast);
  width: fit-content;
}
.footer__links a::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--footer-border);
  transition: background var(--t-fast);
}
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--footer-link-hover); transform: translateX(3px); }
.footer__links a:hover::before,
.footer__links a:focus-visible::before { background: var(--footer-link-hover); }

.reqs { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.reqs__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.reqs__k { color: var(--footer-muted); font-size: 12.5px; flex: none; }
/* IBAN / long registration numbers must wrap instead of overflowing. */
.reqs__v {
  color: var(--footer-text);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer__about { color: var(--footer-muted); margin: 14px 0 20px; font-size: 13px; }
.footer .logo__name { color: var(--footer-heading); }
.footer .logo__mark { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 20px 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--footer-muted);
}
.pays { display: flex; gap: 8px; flex-wrap: wrap; }
.pay {
  height: 30px;
  min-width: 52px;
  padding: 0 10px;
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--footer-text);
}
.footer__secure { display: inline-flex; align-items: center; gap: 8px; }
.footer__secure .icon { stroke: var(--footer-link-hover); width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   14. Quick view modal
   -------------------------------------------------------------------------- */
/* ONE visibility system for every dialog:
     closed →  [hidden]  +  aria-hidden="true"
     open   →  .is-open  +  aria-hidden="false"
   Visibility is driven by opacity/visibility/pointer-events rather than
   `display`, so nothing in the cascade can accidentally out-specify it, and
   the open/close transition actually runs. */
.modal[hidden] { display: none !important; }

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);             /* above header, hero, carousels, promos, map */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 2vw, 24px);
  overflow: hidden;          /* the dialog scrolls, never this layer */

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 25, 24, .62);
  backdrop-filter: blur(3px);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-width: calc(100vw - 20px);
  max-height: min(88vh, 760px);
  /* `88vh` keeps the backdrop visible on every side. */
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;          /* clips to the radius; the body below scrolls */
}

/* --- Modal scrolling ------------------------------------------------------
   The dialog itself must stay clipped (the close button is absolutely
   positioned inside it and would otherwise scroll out of view), so the
   scroll container is the content block directly inside it. Every modal body
   gets it, which means the wheel event always lands on a scrollable element
   no matter where the cursor is inside the dialog.
   `overscroll-behavior: contain` stops the scroll chaining out to the page,
   which is already locked with `body.modal-open { overflow: hidden }`.
   Nothing here uses `preventDefault()` on wheel/touchmove — native scrolling
   is doing all the work, so trackpad, wheel and touch behave identically. */
.modal__dialog > .leasecalc,
.modal__dialog > .cartpop,
.modal__dialog > .authmodal,
.modal__dialog > .modal__body,
.modal__dialog > .modal__scroll,
.modal__dialog > .modal__grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* The entrance animation is scoped to the open state, otherwise it would
   play once while the dialog is still hidden and never again. */
.modal.is-open .modal__dialog { animation: pop var(--t-base) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--c-border);
  display: grid; place-items: center;
  box-shadow: var(--sh-sm);
  transition: background var(--t-fast), transform var(--t-fast);
}
.modal__close:hover { background: var(--c-neon); transform: rotate(90deg); }

.modal__scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.modal__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: var(--sp-6);
  padding: var(--sp-6);
}
.modal__grid > * { min-width: 0; }
.modal__media {
  background: linear-gradient(160deg, var(--c-art-hi) 0%, #EAEEEB 100%);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  position: relative;
  min-height: 280px;
}
.modal__media svg { width: 100%; max-width: 340px; height: auto; }
.modal__media .badge { position: absolute; top: 14px; left: 14px; }

.modal__info {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-right: 42px;   /* keeps text clear of the floating close button */
  min-width: 0;
  overflow-wrap: anywhere;
}
.modal__brand {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-text-muted);
}
.modal__title { font-size: 25px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; }
.modal__desc { color: var(--c-text-muted); font-size: 14px; }
.modal__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.modal__price .price__new { font-size: 32px; }

.variants { display: flex; flex-direction: column; gap: 9px; }
.variants__label { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); }
.variants__row { display: flex; gap: 8px; flex-wrap: wrap; }
.variant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.variant:hover { border-color: var(--c-dark); }
.variant.is-active { border-color: var(--c-dark); background: var(--c-neon); }
.variant__swatch {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  flex: none;
}

.specs { display: grid; gap: 8px; }
.specs__row {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--c-border);
  font-size: 13.5px;
}
.specs__k { color: var(--c-text-muted); }
.specs__v { font-weight: 700; text-align: right; }

.delivery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.delivery__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.delivery__row .icon { stroke: var(--c-dark); flex: none; }
.delivery__row b { font-weight: 800; }

/* Quick view wishlist toggle ------------------------------------------- */
.quickview-wishlist {
  font-size: 12.5px;
  letter-spacing: .06em;
  gap: 9px;
}
.quickview-wishlist .icon {
  fill: none;
  transition: fill var(--t-fast), stroke var(--t-fast);
}

/* Saved: neon fill, dark text, solid heart. */
.quickview-wishlist.is-active {
  background: var(--c-neon);
  border-color: var(--c-neon);
  color: var(--c-dark);
}
.quickview-wishlist.is-active .icon {
  fill: currentColor;
  stroke: currentColor;
}
.quickview-wishlist.is-active:hover {
  background: var(--c-neon-hover);
  border-color: var(--c-neon-hover);
  color: var(--c-dark);
}

.modal__fulllink {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 13.5px; color: var(--c-dark);
  width: fit-content;
}
.modal__fulllink:hover { color: var(--c-neon-hover); }
.modal__fulllink .icon { transition: transform var(--t-fast); }
.modal__fulllink:hover .icon { transform: translateX(4px); }

/* Sticky bar */
.modal__bar {
  position: sticky;
  bottom: 0;
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: 14px var(--sp-6);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  z-index: 4;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  overflow: hidden;
  flex: none;
}
.qty__btn {
  width: 44px; height: 46px;
  display: grid; place-items: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.qty__btn:hover { background: var(--c-neon); }
.qty__btn[disabled] { opacity: .35; cursor: not-allowed; background: transparent; }
.qty__val {
  min-width: 46px;
  text-align: center;
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.modal__bar .btn {
  flex: 1 1 180px;
  min-width: 0;
  padding: 15px 18px;
  font-size: 13.5px;
  letter-spacing: .08em;
}
.modal__bar-total {
  font-size: 12px;
  color: var(--c-text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.modal__bar-total b { display: block; color: var(--c-dark); font-size: 17px; }

/* Stock notification dialog — same visual language as the quick view:
   dark overlay, white rounded panel, neon accent. -------------------------- */
/* Above the quick view on purpose: the stock notification is opened FROM
   the quick view's sticky bar, so it has to layer on top of it. */
.modal--compact { z-index: calc(var(--z-modal) + 10); }

.modal__dialog--compact {
  width: min(420px, 100%);
  max-width: calc(100vw - 20px);
  max-height: min(90vh, 520px);
}

.notify {
  padding: 44px 32px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.notify__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--c-neon);
  color: var(--c-dark);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  box-shadow: 0 0 0 8px rgba(182, 255, 46, .18);
}
.notify__icon .icon { stroke: var(--c-dark); stroke-width: 1.9; }
.notify__title {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.notify__text {
  color: var(--c-text-muted);
  font-size: 14.5px;
  max-width: 30ch;
}
.notify__product {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-dark);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  width: 100%;
  overflow-wrap: anywhere;
}
.notify__product:empty { display: none; }
.notify__cta {
  width: 100%;
  margin-top: 8px;
  padding: 15px 22px;
  font-size: 13.5px;
  letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   15. Toasts & back-to-top
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  right: 20px;
  /* `bottom` is derived from the floating group further down — one source. */
  z-index: var(--z-toast);  /* toasts stay readable above open dialogs */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--c-dark);
  color: var(--color-surface);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--sh-lg);
  font-size: 13.5px;
  font-weight: 600;
  max-width: min(340px, calc(100vw - 40px));
  animation: toast-in var(--t-base) both;
  border-left: 3px solid var(--c-neon);
}
.toast.is-out { animation: toast-out var(--t-base) both; }
.toast .icon { stroke: var(--c-neon); flex: none; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(.98); } }

.totop {
  /* Positioned by `.floating-actions`, never on its own. */
  z-index: 1;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--c-dark);
  color: var(--c-neon);
  display: grid; place-items: center;
  box-shadow: var(--sh-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-fast);
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--c-neon); color: var(--c-dark); }

/* --------------------------------------------------------------------------
   16. Responsive

   Breakpoint ladder — cards visible per view (products / articles):
     >1280   4 / 3 · sidebar 320px · footer 4 columns
     ≤1280   3 / 3
     ≤1100   header action labels collapse to icons · footer 2 columns
     ≤1024   2 / 2 · modal single column
     ≤900    sidebar replaced by the drawer · layout single column
     ≤860    search moves to its own row · hero stacks · footer 1 column
     ≤600    1.2 / 1.1 (swipe affordance) · full-screen modal · gutter 10px
     ≤400    modal action bar stacks vertically
   -------------------------------------------------------------------------- */

/* ≤1100px — 3 product cards per view.
   The sliders now span the full .page-container, so the ladder shifts
   compared to when they sat inside the narrower content column. */
@media (max-width: 1100px) {
  .carousel { --cards: 3; }
}

/* ≤1100px — icons only in the header, footer halves */
@media (max-width: 1100px) {
  :root { --page-gutter: 14px; }
  .action__label { display: none; }
  .actions__divider { margin: 0 4px; }
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
}

/* ≤1024px — 2 cards, single-column modal */
/* ≤1023px — matches the category layout boundary exactly.
   This said `max-width: 1024px` while a `min-width: 1024px` rule also
   exists, so at exactly 1024px BOTH applied. One pixel wide, but it is
   the kind of overlap that makes a layout look non-deterministic. */
@media (max-width: 1023px) {
  .usp-grid, .usp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp__item:last-child { grid-column: 1 / -1; }
  .brand { padding: 0 20px; }   /* 40px between logos */
  .hero__media svg { max-width: min(300px, 100%); }
  .modal__grid { grid-template-columns: minmax(0, 1fr); }
  .modal__media { min-height: 200px; }
  .modal__info { padding-right: 0; }
}

/* ≤900px — sidebar becomes the drawer, content goes full width */
@media (max-width: 900px) {
  .top-commerce-layout,
  .layout { grid-template-columns: minmax(0, 1fr); }
  .category-sidebar { display: none; }
  /* Checkout: summary above the form, single column. */
  .colayout { grid-template-columns: minmax(0, 1fr); }
  .ordersum { order: -1; }
  .ordersum__inner { position: static; }
  .ctable__param { min-width: 150px; }
  .ctable__product, .ctable__blank { width: 220px; min-width: 220px; max-width: 220px; }

  /* Gift card: preview above the form. */
  .giftlayout { grid-template-columns: minmax(0, 1fr); }
  .giftpreview__inner { position: static; }

  /* Product page stacks: gallery above the info panel. */
  .pdtop { grid-template-columns: minmax(0, 1fr); }
  .pdgallery__main { aspect-ratio: 16 / 10; }

  /* Store locator stacks: map first, then the store cards below it.
     Equal-height columns are no longer needed, so the map gets a sensible
     explicit height again. */
  .stores,
  .stores-layout { grid-template-columns: minmax(0, 1fr); }
  .storemap,
  .stores-map { height: clamp(320px, 70vw, 440px); }
  .storelist,
  .stores-list { flex-direction: row; flex-wrap: wrap; }
  .storelist__item { flex: 1 1 220px; }
  .catpanel { position: static; }
  .carousel--articles { --cards: 2; }
}

/* ≤768px — 2 product cards per view */
@media (max-width: 768px) {
  .carousel { --cards: 2; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≤860px — mobile header: search on its own row, hero stacks */
@media (max-width: 860px) {
  .header { position: static; }
  .header__inner {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: var(--sp-2);
    row-gap: 10px;
  }
  .burger { display: inline-flex; order: 1; }
  .logo { order: 2; margin-right: auto; }
  .logo__tag { display: none; }
  .actions { order: 3; }
  .search { order: 4; flex: 1 0 100%; width: 100%; }
  .search__form { padding-left: 14px; }
  .search__submit { padding: 11px 14px; }
  .search__submit span { display: none; }
  .search__submit .icon { display: block; stroke: var(--c-dark); }

  /* Hero: text above, illustration below — they can never overlap. */
  .hero__slide {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hero__content {
    padding: 32px clamp(18px, 5vw, 28px) 12px;
    order: 1;
    max-width: 100%;
  }
  .hero__media { padding: 0 clamp(18px, 5vw, 28px) 62px; order: 2; }
  .hero__media svg { max-width: min(240px, 70%); margin: 0 auto; }
  /* `left`, `transform` and `bottom` are left over from when the dots were
     absolutely positioned. They are a flex item in `.hero__controls` now, so
     `left`/`bottom` do nothing — but the transform still applied and dragged
     the row 89px to the left, straight over the previous-slide button, which
     is why that button could never be fully tapped. WCAG 2.2 SC 2.5.8. */
  .hero__dots { justify-content: center; }
  .hero__nav { width: 38px; height: 38px; }
  .hero__nav--prev { left: 8px; }
  .hero__nav--next { right: 8px; }
  .hero__title { font-size: clamp(22px, 6vw, 28px); }
  .hero__text { font-size: 14.5px; }

  /* Promo banners stack: text first, illustration underneath. */
  .promo-banner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;   /* never a fixed 220px if the content needs more */
  }
  .promo-banner__content { order: 1; padding: 28px clamp(18px, 5vw, 28px) 4px; }
  .promo-banner__media {
    order: 2;
    padding: 0 clamp(18px, 5vw, 28px) 26px;
  }
  .promo-banner__media svg { max-width: min(260px, 72%); margin: 0 auto; }
  .promo-banner__text { max-width: 100%; }
  .promo-banner:hover { transform: none; }

  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); padding: var(--sp-10) 0; }
  .footer__bottom { justify-content: flex-start; }
  .reqs__row { justify-content: flex-start; gap: 8px; }
  .reqs__v { text-align: left; }
}

/* ≤600px — ~1.2 cards so the swipe affordance is visible, gutter 10px */
@media (max-width: 600px) {
  :root { --page-gutter: 10px; }

  /* Fractional card count: the next card peeks in from the right, which is
     what tells the user the row can be swiped. */
  .carousel { --cards: 1.2; }
  .carousel--articles { --cards: 1.1; }
  .pcard__actions { opacity: 1; transform: none; }

  .topbar { font-size: 12px; }
  .topbar__left { gap: var(--sp-3); }
  .topbar__hours { display: none; }

  /* Secondary desktop-only icons are dropped so the header row cannot
     overflow: wishlist, account and cart stay. */
  .action--secondary { display: none; }

  .sechead { align-items: center; }
  .sechead__title { font-size: clamp(19px, 5.5vw, 22px); }
  .sechead__right { flex-wrap: wrap; }

  /* Brand strip: ~3–4 logos in view, slightly more compact. */
  .brand { height: 48px; padding: 0 14px; gap: 7px; }
  .brand__mark { width: 22px; height: 22px; }
  .brand__name { font-size: 12.5px; letter-spacing: .08em; }
  .brand-slider { padding: 14px 0; }

  /* Store locator on phones. */
  .storepopup { width: min(260px, calc(100% - 20px)); }
  .pin__label { font-size: 20px; }
  .storemap__minor text { font-size: 19px; }

  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .dash { grid-template-columns: minmax(0, 1fr); }

  /* Share icons wrap instead of overflowing; the native button leads. */
  .share { gap: 10px; }
  .share__row { gap: 6px; }
  .sharebtn { width: 38px; height: 38px; }
  .share__native { order: -1; width: 100%; }

  /* Review page on phones. */
  .optlist--grid { grid-template-columns: minmax(0, 1fr); }
  .rvactions { flex-direction: column-reverse; }
  .rvactions .btn { width: 100%; }
  .rvproduct { grid-template-columns: 64px minmax(0, 1fr); }
  .rvproduct__media { width: 64px; height: 64px; }
  .starbtn { width: 40px; height: 40px; }
  .starbtn svg { width: 30px; height: 30px; }

  /* Leasing on phones: chips wrap, buttons and drop zone full width. */
  .leasechip { flex: 1 1 calc(50% - 4px); }
  .leasecard { flex-direction: column; align-items: stretch; }
  .leasecard__cta { width: 100%; }
  .leasebox { padding: var(--sp-4); }
  .dropzone { padding: var(--sp-4); }
  .leasesum__row--big dd { font-size: 19px; }

  .giftamt { flex: 1 1 calc(50% - 5px); }
  .giftamt[data-gift-amount="custom"] { flex: 1 1 100%; }

  /* Product page on phones: sticky buy bar, single-column spec table. */
  .pdbuy { display: none; }                 /* replaced by the sticky bar */
  .pdinfo__name { font-size: 22px; }
  .spectable th { width: 45%; }
  .cartpop { padding: 26px 18px 20px; }
  .cartpop__actions { flex-direction: column; }
  .xsell__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Layout is declared once in the base layer; nothing to override here. */
  .pdsticky__icon {
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-md);
    border: 1px solid var(--c-border);
    display: grid; place-items: center;
    background: var(--color-surface);
  }
  .pdsticky__icon.is-active { background: var(--c-neon); border-color: var(--c-neon); }
  .pdsticky__icon.is-active .icon { fill: var(--c-dark); stroke: var(--c-dark); }
  .pdsticky__main { flex: 1 1 auto; min-width: 0; display: flex; }
  .pdsticky__cta {
    width: 100%;
    padding: 14px 12px;
    font-size: 12px;
    letter-spacing: .04em;
    justify-content: center;
  }

  /* WCAG 1.4.10 / 1.4.4. Two 44px icon buttons and a 118px stepper left the
     primary CTA 98px for a ~150px label, so `PIEVIENOT GROZAM` was cut to
     `PIEVIENOT GR` — at 320px (400% zoom) and at every phone width. Nothing is
     removed: the row simply wraps and the button takes the full width beneath
     the controls. The bar's height is published to
     `--mobile-purchase-bar-height` from `offsetHeight`, so the page spacer
     follows it automatically. */
  .pdsticky { flex-wrap: wrap; row-gap: 8px; }
  .pdsticky__main { flex: 1 0 100%; }
  .pdsticky__cta { white-space: normal; }
  /* the bar must never cover the last of the content */
  #product { padding-bottom: 84px; }

  /* Auth panel fills the available width on phones (page gutters remain). */
  .authwrap { padding: 16px 0; min-height: 0; align-items: flex-start; }
  .authcard,
  .auth-card { width: 100%; padding: 24px 18px; border-radius: var(--radius-panel); }

  /* Checkout on phones: one column, full-width buttons, compact steps. */
  .fieldgrid { grid-template-columns: minmax(0, 1fr); }
  .field--half { grid-column: 1 / -1; }
  .costep__actions { flex-direction: column-reverse; }
  .costep__actions .btn { width: 100%; }
  .ordersuccess__actions { flex-direction: column; width: 100%; }
  .ordersuccess__actions .btn { width: 100%; }
  .segmented { width: 100%; }
  .steps { gap: 6px; }
  .steps__item { flex: 1 1 100%; padding: 11px 13px; font-size: 12.5px; }
  .steps__label { white-space: normal; }
  .ctable__param { min-width: 132px; font-size: 12.5px; }
  .ctable__product, .ctable__blank { width: 200px; min-width: 200px; max-width: 200px; }
  .ctable th, .ctable td { padding: 11px 13px; }
  /* Bottom remove button: full column width, wraps instead of overflowing. */
  .ctable__foot td { padding: 14px 13px; }
  .ccol__remove { white-space: normal; line-height: 1.35; font-size: 10px; }
  .cline__controls { gap: 8px; }

  /* Keep the account label off the phone header — the icons must fit. */
  .action--account { display: none; }

  /* USP boxes stack vertically on phones. */
  .usp-grid, .usp { grid-template-columns: minmax(0, 1fr); }
  .usp__item:last-child { grid-column: auto; }
  .usp__item { padding: 16px; }
  .main { padding-top: var(--sp-5); }
  .section { margin-top: var(--sp-10); }

  .modal { padding: 0; }
  .modal__dialog {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modal__grid { padding: var(--sp-4); gap: var(--sp-4); }
  .modal__title { font-size: clamp(18px, 5.5vw, 21px); }
  .modal__price .price__new { font-size: 26px; }
  .modal__bar { padding: 12px var(--sp-4); gap: var(--sp-2); }
  .modal__bar-total {
    order: -1;
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .modal__bar-total b { display: inline; }

  /* The compact notification dialog stays a centred card, not full screen. */
  .modal--compact { padding: 16px; }
  .modal__dialog--compact {
    width: min(420px, 100%);
    height: auto;
    max-height: 88vh;
    border-radius: var(--r-xl);
  }
  .notify { padding: 38px 22px 24px; }
  .notify__title { font-size: 22px; }
  /* Login dialog: nearly full width on a phone. */
  .modal__dialog--auth { width: min(460px, calc(100vw - 20px)); }
  .authmodal { padding: 30px 18px 22px; }
  .authmodal .authcard__title { font-size: 21px; }

  .toasts { right: 10px; left: 10px; align-items: stretch; }
  .toast { max-width: 100%; }
  .totop { width: 44px; height: 44px; }   /* position comes from the group */
}

/* ≤430px — iPhone Pro Max class */
@media (max-width: 430px) {
  .logo__name { font-size: 17px; }
  .logo__mark { width: 36px; height: 36px; }
  .iconbtn,
  .action__icon { width: 38px; height: 38px; }
  /* enough room that a badge never touches the neighbouring icon box */
  .actions { gap: 6px; }
  .actions__divider { display: none; }
  .hero__price-new { font-size: 30px; }
  .hero__cta { width: 100%; justify-content: center; }
  .sechead__link { padding: 8px 12px; font-size: 12px; }
}

/* ≤400px — stack the modal action bar vertically */
@media (max-width: 400px) {
  .carousel { --cards: 1.15; }
  .modal__bar { flex-direction: column; align-items: stretch; }
  .modal__bar .qty { align-self: stretch; justify-content: space-between; }
  .modal__bar .btn { width: 100%; flex: 0 0 auto; }
  .newsletter__form { flex-wrap: wrap; border-radius: var(--r-md); padding: 8px; }
  .newsletter__input { flex: 1 0 100%; padding-inline: 8px; }
  .newsletter__btn { width: 100%; }
}

/* ≤360px — smallest supported viewport */
@media (max-width: 360px) {
  .carousel { --cards: 1.1; }
  .carousel--articles { --cards: 1.05; }
  .logo__name { font-size: 16px; }
  .iconbtn,
  .action__icon { width: 36px; height: 36px; }
  .search__input { font-size: 13.5px; }
  .hero__title { font-size: 21px; }
  .hero__eyebrow { font-size: 10px; padding: 6px 11px; }
}

/* --------------------------------------------------------------------------
   17. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .carousel__track { scroll-behavior: auto; }
  .pcard:hover { transform: none; }

  /* Brand strip: stop the marquee, leave a manually scrollable logo row. */
  .brand-slider {
    overflow-x: auto;
    scrollbar-width: none;
    cursor: default;
  }
  .brand-slider::-webkit-scrollbar { display: none; }
  .brand-slider__track {
    animation: none !important;
    transform: none !important;
  }
  .acard:hover { transform: none; }
}

/* --- Compare column: clickable art with the action stack on top ---------- */
.ccol__mediawrap { position: relative; }
.ccol__mediawrap .ccol__media { display: grid; }
a.ccol__media { cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
a.ccol__media:hover { border-color: var(--c-neon-dark); transform: translateY(-2px); }
a.ccol__media:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* Same vertical stack as the product cards; remove is always last. */
.ccol__acts {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;              /* matches the product card action stack */
  z-index: 4;
}
.ccol__name a { color: inherit; text-decoration: none; }
.ccol__name a:hover { color: var(--c-neon-dark); text-decoration: underline; }

/* --- Empty "add product" slot ------------------------------------------- */
.ctable__add { vertical-align: top; padding-top: 22px; }
.addslot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 240px;
  padding: 20px 14px;
  border: 2px dashed var(--c-border-strong, var(--c-border));
  border-radius: var(--r-md);
  background: var(--c-page);
  color: var(--c-text-muted);
  text-align: center;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.addslot:hover { border-color: var(--c-neon-dark); background: var(--c-card); color: var(--c-text); }
.addslot:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.addslot__plus { font-size: 30px; font-weight: 300; line-height: 1; }
.addslot__label { font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.addslot__note { font-size: 11px; }

/* --- Gift card secondary link on product cards -------------------------- */
.pcard__gift {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 2px;
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
  text-decoration: none;
  border-radius: var(--r-sm);
}
.pcard__gift svg { width: 14px; height: 14px; flex: none; }
.pcard__gift:hover { color: var(--c-text); text-decoration: underline; }
.pcard__gift:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* --- Checkout: delivery estimates --------------------------------------- */
.optcard__eta {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-success);
}
.optcard__eta.is-none { color: var(--c-text-muted); font-weight: 600; }
.delnote {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
}

/* --- Checkout: login / guest entry panel --------------------------------
   Lives inside the left column, so the order summary is never replaced. */
.entry {
  padding: 22px;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-page);
}
.entry__title { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.entry__text { margin-top: 6px; font-size: 13.5px; color: var(--c-text-muted); line-height: 1.55; }
.entry__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.entry__btn { justify-content: center; width: 100%; }
.entry__btn[aria-pressed="true"] { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.entrylogin {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border);
}
.entrylogin__submit { width: 100%; justify-content: center; }
.entrylogin .linkbtn { align-self: flex-start; }

@media (max-width: 640px) {
  .entry { padding: 18px; }
  .entry__actions { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CATEGORY PAGE
   ========================================================================== */
/* `align-items: start` is what lets the filter card end where its content
   ends: with the default `stretch` it would be pulled down to the height of
   the product grid and show an empty white column underneath the last filter.
   The two columns still START on the same line, which is the whole point. */
.catlayout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-2);
}
.catlayout > * { min-width: 0; }
.catmain { min-width: 0; }

/* --- filter panel -------------------------------------------------------- */
/* HEIGHT IS DECIDED BY THE PRODUCT COLUMN, NOT BY THE VIEWPORT.
   The previous rule capped the panel at `100dvh - header`, which started an
   inner scroll while there was still plenty of page to scroll — the visitor
   could not simply read down a long filter list. The rule now is:

       filterPanelHeight = min(natural height, product results height)
       inner scroll       = natural height > product results height

   which is the same thing expressed twice: the panel ends where its own
   content ends, unless that would run past the bottom of the last product
   row, in which case it stops there and its body scrolls.

   Neither half of that is a CSS length, so `max-height` is written by
   `syncFilterHeight()` in app.js. This rule contributes only the parts that
   are constant: no `height`, no `min-height`, no `align-self: stretch`, so a
   tall product column can never inflate the white card. */
.cfilters {
  align-self: start;
  height: auto;
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  box-shadow: var(--sh-sm);
}

/* The body holds everything that may be scrolled away; the title and
   `Notīrīt visus filtrus` stay put above it. `min-height: 0` is what lets a
   flex child actually shrink and scroll instead of overflowing its parent. */
.cfilters__body { min-height: 0; }

/* Only when the panel had to be capped. Nothing scrolls otherwise, and no
   scrollbar gutter is reserved for a panel that will never need one. */
.cfilters.has-inner-scroll .cfilters__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Reserved so the list does not shift sideways as groups open and close.
     The scrollbar itself stays visible — it is the only cue that there is
     more below. */
  scrollbar-gutter: stable;
  padding-right: 4px;
}

.cfilters__head { display: flex; align-items: center; justify-content: space-between; }
.cfilters__title { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.cfilters__close { display: none; }
.cfilters__clear { width: 100%; justify-content: center; margin: 12px 0 6px; font-size: 11px; }
.cfilters__foot { display: none; }

.ffilter { border-top: 1px solid var(--c-border); padding: 12px 0; }
.ffilter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text);
}
.ffilter__head::-webkit-details-marker { display: none; }
.ffilter__chev { transition: transform var(--t-fast); flex: none; }
.ffilter[open] .ffilter__chev { transform: rotate(90deg); }
.ffilter__list { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }

.fcheck {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-control);
  padding: 6px 4px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.35;
}
.fcheck:hover { background: var(--c-page); }
.fcheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.fcheck__box {
  flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--c-border-strong, #C7CDC4);
  border-radius: 5px;
  background: var(--color-surface);
  position: relative;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.fcheck--radio .fcheck__box { border-radius: 50%; }
.fcheck input:checked + .fcheck__box { background: var(--c-neon); border-color: var(--c-neon-dark); }
.fcheck input:checked + .fcheck__box::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid var(--c-dark);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.fcheck--radio input:checked + .fcheck__box::after {
  left: 3px; top: 3px; width: 8px; height: 8px;
  border: 0; border-radius: 50%; background: var(--c-dark); transform: none;
}
.fcheck input:focus-visible + .fcheck__box { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.fcheck__label { min-width: 0; word-break: break-word; }

.fprice { display: flex; gap: 10px; margin-top: 10px; }
.fprice__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.fprice__field span { font-size: 11px; font-weight: 700; color: var(--c-text-muted); }
.fprice__field .field__input { padding: 9px 10px; font-size: 13px; }

/* --- sorting + chips ----------------------------------------------------- */
/* SORTING LIVES IN THE SECTION HEADER, not above the grid.
   It used to sit in a `.cattools` row inside the product column: 44px of
   min-height plus a 16px margin, so the first product card started ~60px below
   the top of the filter card and the two columns visibly disagreed. Nothing in
   that row belonged to the product list — it is page-level chrome, so it moved
   up to the header next to `Atpakaļ uz veikalu`, where the count already is.
   The product column now begins with the grid itself. */
.catsort { display: flex; align-items: center; gap: 10px; flex: none; }
.catsort[hidden] { display: none; }
.catsort__label { font-size: 12px; font-weight: 800; color: var(--c-text-muted); white-space: nowrap; }
.catsort__select { width: auto; min-width: 200px; padding: 10px 12px; font-size: 13px; }

/* The drawer trigger. Above the drawer breakpoint it is `display: none`, so it
   occupies no space and cannot push the grid down. */
.catmain__filters { display: none; align-items: center; gap: 8px; margin-bottom: 12px; }
.catmain__badge {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: 11px;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Compact, and only present when something is filtered. `[hidden]` takes it
   out of the flow completely — no reserved band, no min-height. */
.catmain__chips { margin-bottom: 12px; }
.catmain__chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.chip:hover { background: var(--c-neon); border-color: var(--c-neon-dark); }
.chip__x { font-size: 15px; line-height: 1; color: var(--c-text-muted); }
.chip:hover .chip__x { color: var(--c-dark); }

.pgrid--cat { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.cfilters__backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-filter-panel) - 1);
  background: rgba(23, 25, 24, .55);
}

/* --- mobile: filters become a drawer ------------------------------------- */
@media (max-width: 1023px) {
  .catlayout { grid-template-columns: minmax(0, 1fr); }
  /* Below this the filters are a drawer, so the column gets its trigger back.
     The same-top-edge rule does not apply here: there is only one column. */
  .catmain__filters { display: inline-flex; }

  /* The drawer is viewport-sized by definition and scrolls itself. The
     product-height rule is a desktop two-column rule and is switched off here
     by `syncFilterHeight()`, which also clears any inline `max-height` left
     over from a wider layout. */
  .cfilters {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-filter-panel);
    width: min(340px, 88vw);
    max-height: none;
    height: 100%;
    border-radius: 0;
    border-width: 0 1px 0 0;
    transform: translateX(-102%);
    transition: transform var(--t-base);
  }
  .cfilters.is-open { transform: none; }
  .cfilters__body { overflow-y: auto; overscroll-behavior: contain; }
  .cfilters__close { display: grid; }
  .cfilters__foot {
    display: block;
    position: sticky;
    bottom: 0;
    margin: 12px -20px -20px;
    padding: 14px 20px;
    background: var(--c-card);
    border-top: 1px solid var(--c-border);
  }
  .cfilters__foot .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1024px) {
  .cfilters__backdrop { display: none; }
}
@media (max-width: 600px) {
  /* The header stacks, so sorting gets the full width rather than squeezing
     next to the title. */
  .sechead__right { width: 100%; }
  .catsort { width: 100%; }
  .catsort__select { flex: 1 1 auto; min-width: 0; }
  .pgrid--cat { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* --- Gift card secondary links (quick view + product page) --------------- */
.modal__gift,
.pdgift {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.modal__gift:hover,
.pdgift:hover { color: var(--c-text); text-decoration: underline; }
.modal__gift:focus-visible,
.pdgift:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; border-radius: var(--r-sm); }
.pdgift { margin-top: 12px; }

.giftsuggest {
  margin: 4px 0 14px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px dashed var(--c-border);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .modal__gift { width: 100%; justify-content: center; }
}

/* ==========================================================================
   ACCESSIBILITY PANEL + PREFERENCE MODES
   Every mode is driven by a data attribute on <html>, set by ONE function
   (`applyAccessibilitySettings()` in app.js). No page has its own a11y CSS.
   ========================================================================== */

/* --- the accessibility trigger, top bar right-hand group ----------------- */
.topbar__right {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.topbar__divider {
  width: 1px;
  height: 18px;
  background: var(--topbar-border);
}
.topbar__a11y {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  /* Light ink on the dark bar — the page text token would be near-black. */
  color: var(--topbar-text);
  font-size: var(--fs-caption);
  font-weight: 700;
}
.topbar__a11y .icon { width: 18px; height: 18px; stroke: currentColor; flex: none; }
.topbar__a11y:hover,
.topbar__a11y:focus-visible { color: var(--topbar-hover); }
.topbar__a11y:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: 2px; }
.topbar__a11y[aria-expanded="true"] { color: var(--topbar-hover); }

@media (max-width: 600px) {
  .topbar__a11ytext {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .topbar__a11y { min-width: 40px; justify-content: center; }
}

/* --- the drawer ---------------------------------------------------------- */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-a11y) - 1);
  background: rgba(23, 25, 24, .62);
}
.a11y {
  position: fixed;
  top: 0;
  right: 0;
  z-index: var(--z-a11y);
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  height: 100%;
  background: var(--c-card);
  border-left: 1px solid var(--c-border);
  box-shadow: var(--sh-lg);
  transform: translateX(102%);
  transition: transform var(--t-base);
}
.a11y.is-open { transform: none; }
.a11y__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--c-border);
}
.a11y__title { font-size: 1.15rem; font-weight: 900; letter-spacing: -.02em; }
.a11y__intro {
  padding: 14px 22px 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--c-text-muted);
}
/* The settings area takes the space left over by the head and the footer and
   scrolls when it needs to. The panel is exactly viewport-tall, so this never
   produces more than a screen of slack — and in practice the settings are
   taller than the panel anyway. */
.a11y__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 22px 22px;
}
/* The last group needs no trailing margin — the footer border follows it. */
.a11y__body .a11yblock:last-child { margin-bottom: 0; }
.a11yblock { border: 0; margin: 0 0 18px; padding: 0; }
.a11yblock__title {
  padding: 0 0 8px;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.a11yblock__value { font-size: .82rem; font-weight: 700; margin-bottom: 10px; }
.a11yblock__row { display: flex; flex-wrap: wrap; gap: 8px; }
.a11ybtn { flex: 1 1 auto; justify-content: center; min-height: 44px; font-size: .72rem; }
.a11ylist { display: flex; flex-direction: column; gap: 2px; }
.a11ylist .fcheck { min-height: 44px; }
/* Reset actions are a normal flex item straight after the settings — no
   `margin-top: auto`, no spacer element, no stretched grid row. They are the
   panel's last row, so they are always one border away from the last option. */
.a11y__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
  padding: 16px 22px;
  border-top: 1px solid var(--c-border);
  background: var(--c-page);
}
.a11y__reset { width: 100%; justify-content: center; min-height: 44px; }
.a11y__statement { font-size: .8rem; text-decoration: underline; text-align: center; }

@media (max-width: 480px) {
  .a11y { width: 100%; border-left: 0; }
  .a11y__head, .a11y__body, .a11y__foot, .a11y__intro { padding-left: 16px; padding-right: 16px; }
}

/* --------------------------------------------------------------------------
   READABILITY MODES
   -------------------------------------------------------------------------- */
html[data-a11y-spacing~="line"] body,
html[data-a11y-spacing~="line"] p,
html[data-a11y-spacing~="line"] li,
html[data-a11y-spacing~="line"] .pcard__name,
html[data-a11y-spacing~="line"] .field__label { line-height: 1.9 !important; }

html[data-a11y-spacing~="letter"] body { letter-spacing: .06em; word-spacing: .12em; }

/* Highlighted links: a background AND a border, never colour alone. */
html[data-a11y-links~="highlight"] a:not(.btn):not(.logo):not(.skip-link) {
  background: #FFF6A8;
  outline: 2px solid #6B5B00;
  outline-offset: 1px;
  color: #241F00;
}
html[data-a11y-links~="underline"] a:not(.btn):not(.logo) { text-decoration: underline; }

/* --------------------------------------------------------------------------
   CONTRAST MODES
   These deliberately re-declare the design tokens rather than patching
   components — one place to change, every page follows.
   -------------------------------------------------------------------------- */
html[data-a11y-contrast="high"] {
  --c-page: #FFFFFF;
  --c-card: #FFFFFF;
  --c-text: #000000;
  --c-text-muted: #1A1A1A;
  --c-border: #000000;
  --c-border-strong: #000000;
  --c-dark: #000000;
  --c-neon: #D8FF57;
  --c-neon-dark: #2E3D00;
  --c-neon-hover: #1B2400;
  --c-success: #005B2F;
  --c-danger: #9B0000;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: 0 0 0 2px #000;
}
html[data-a11y-contrast="high"] * { text-shadow: none !important; }
html[data-a11y-contrast="high"] .pcard,
html[data-a11y-contrast="high"] .btn,
html[data-a11y-contrast="high"] .iconbtn,
html[data-a11y-contrast="high"] .field__input,
html[data-a11y-contrast="high"] .optcard__box,
html[data-a11y-contrast="high"] .modal__dialog,
html[data-a11y-contrast="high"] .a11y { border: 2px solid #000 !important; }
html[data-a11y-contrast="high"] .badge,
html[data-a11y-contrast="high"] .counter { border: 2px solid #000; }
html[data-a11y-contrast="high"] a { text-decoration: underline; }

html[data-a11y-contrast="dark"] {
  --c-page: #0B0D0C;
  --c-card: #161917;
  --c-text: #F4F7F2;
  --c-text-muted: #C3CBBE;
  --c-border: #4A524A;
  --c-border-strong: #7C877A;
  --c-dark: #000000;
  --c-neon: #C9FF57;
  --c-neon-dark: #9BD400;
  --c-neon-hover: #E4FF9B;
  --c-success: #6BE6A0;
  --c-danger: #FF8A7A;
}
html[data-a11y-contrast="dark"] body { background: var(--c-page); color: var(--c-text); }
html[data-a11y-contrast="dark"] .pcard__art,
html[data-a11y-contrast="dark"] .ccol__media,
html[data-a11y-contrast="dark"] .modal__media { background: #1F2320; }
html[data-a11y-contrast="dark"] .field__input,
html[data-a11y-contrast="dark"] .fcheck__box { background: #0F1210; color: var(--c-text); }
html[data-a11y-contrast="dark"] .btn--ghost { color: var(--c-text); }

html[data-a11y-contrast="light"] {
  --c-page: #FFFFFF;
  --c-card: #FFFFFF;
  --c-text: #14170F;
  --c-text-muted: #3D443A;
  --c-border: #9AA396;
  --c-border-strong: #6D7669;
  --c-neon: #E6FFAF;
  --c-neon-dark: #4C6300;
  --c-neon-hover: #35470B;
}
html[data-a11y-contrast="light"] .pcard__art { background: #FAFBF7; }

/* --------------------------------------------------------------------------
   FOCUS / POINTER / COLOUR MODES
   -------------------------------------------------------------------------- */
html[data-a11y-focus="strong"] :focus-visible {
  outline: 4px solid #000 !important;
  box-shadow: 0 0 0 8px var(--c-neon) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-sm);
}
html[data-a11y-contrast="high"][data-a11y-focus="strong"] :focus-visible {
  outline: 5px solid #000 !important;
  box-shadow: 0 0 0 9px #D8FF57 !important;
}

/* An SVG data-URI cursor: no image files, no network requests. */
html[data-a11y-cursor="big"],
html[data-a11y-cursor="big"] * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 4 8 38l8-8 6 13 7-3-6-13h11z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 6 4, auto;
}
html[data-a11y-cursor="big"] a,
html[data-a11y-cursor="big"] button,
html[data-a11y-cursor="big"] label,
html[data-a11y-cursor="big"] [role="button"] {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M18 4c-2 0-3 1.6-3 3.5V24l-3.4-3.6c-1.4-1.5-3.7-1.4-5 .2-1 1.3-1 3.2 0 4.5l9 12c1.4 1.9 3.6 3 6 3h8c4 0 7-3.2 7-7.2V19c0-2-1.4-3.5-3.2-3.5-1.7 0-3 1.4-3.1 3.2 0-2-1.4-3.6-3.2-3.6s-3.2 1.6-3.2 3.6c0-2-1.4-3.6-3.2-3.6V7.5C21 5.6 20 4 18 4z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/></svg>") 14 4, pointer;
}

/* --------------------------------------------------------------------------
   Grayscale mode
   ==========================================================================
   It used to be `filter: grayscale(1)` on <body>. That is a LAYOUT change in
   disguise: any `filter` other than `none` makes the element a containing
   block for its `position: fixed` descendants. With the filter on <body>,
   all thirteen fixed layers in this project stopped being positioned against
   the viewport and started being positioned against the document — so the
   accessibility panel's `height: 100%` resolved to the full page height and
   pushed "Atiestatīt visus iestatījumus" thousands of pixels down.

   The fix paints the effect instead of filtering the tree: one fixed overlay
   that greys out whatever is painted behind it. It has no descendants, so it
   creates no containing block for anything, and nothing in the document ever
   changes size or position.

   `html::after` is used so no page needs extra markup.
   -------------------------------------------------------------------------- */
html[data-a11y-filter="grayscale"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-a11y-filter);      /* above every dialog, panel and toast */
  pointer-events: none;     /* purely visual — never intercepts input */
  backdrop-filter: grayscale(1);
  -webkit-backdrop-filter: grayscale(1);
}

/* Fallback for engines without `backdrop-filter`. The filter is applied to
   page REGIONS only, never to <body>, and never to a region that holds a
   `position: fixed` layer — otherwise the same containing-block bug would
   come back through the side door.
   `.pdsticky` was moved to body level for this reason; `.cfilters` cannot be
   (it is a grid column on desktop), so on the category page the results
   column is filtered instead of the whole <main>. */
@supports not ((backdrop-filter: grayscale(1)) or (-webkit-backdrop-filter: grayscale(1))) {
  html[data-a11y-filter="grayscale"]::after { content: none; }

  html[data-a11y-filter="grayscale"] .site-header,
  html[data-a11y-filter="grayscale"] .footer { filter: grayscale(1); }

  /* `main` is filtered wholesale, EXCEPT on the two pages that hold a fixed
     filter panel inside it: a filter makes its element the containing block
     for any `position: fixed` descendant, which would strand the mobile
     filter sheet. Those pages filter their parts instead. */
  html[data-a11y-filter="grayscale"] body:not([data-page="category"]):not([data-page="search"]) main { filter: grayscale(1); }
  html[data-a11y-filter="grayscale"] body[data-page="category"] .crumbs,
  html[data-a11y-filter="grayscale"] body[data-page="category"] .sechead,
  html[data-a11y-filter="grayscale"] body[data-page="category"] .catland,
  html[data-a11y-filter="grayscale"] body[data-page="category"] .catmain,
  html[data-a11y-filter="grayscale"] body[data-page="search"] .crumbs,
  html[data-a11y-filter="grayscale"] body[data-page="search"] .sechead,
  html[data-a11y-filter="grayscale"] body[data-page="search"] .searchcount,
  html[data-a11y-filter="grayscale"] body[data-page="search"] .catmain { filter: grayscale(1); }
}

/* --------------------------------------------------------------------------
   MOTION
   The panel toggle and the OS setting share exactly one rule set.
   -------------------------------------------------------------------------- */
html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}
html[data-a11y-motion="reduced"] .pcard:hover,
html[data-a11y-motion="reduced"] .pcard:hover .pcard__art,
html[data-a11y-motion="reduced"] .promo:hover,
html[data-a11y-motion="reduced"] a.ccol__media:hover { transform: none !important; }
html[data-a11y-motion="reduced"] .brand-slider__track { animation: none !important; transform: none !important; }
html[data-a11y-motion="reduced"] .pin__halo { animation: none !important; }
html[data-a11y-motion="reduced"] .modal.is-open .modal__dialog { animation: none !important; }

/* Marquee paused on its own (without full reduced motion) */
html[data-a11y-marquee="paused"] .brand-slider__track { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   FORCED COLORS (Windows High Contrast)
   Nothing important may rely on background-image or box-shadow there.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .iconbtn,
  .pcard,
  .pcard__act,
  .field__input,
  .modal__dialog,
  .a11y,
  .optcard__box,
  .chip,
  .addslot { border: 1px solid ButtonBorder !important; }

  .btn--neon, .btn--dark { background: ButtonFace !important; color: ButtonText !important; }

  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; }

  /* Checkbox / radio ticks are drawn with borders, not background images. */
  .fcheck input:checked + .fcheck__box,
  .check input:checked + .check__box { forced-color-adjust: none; background: Highlight; }

  .counter { background: Highlight !important; color: HighlightText !important; }
  .badge { border: 1px solid ButtonBorder; }

  /* Decorative gradients disappear in forced colors — keep the outline. */
  .pcard__art, .ccol__media, .modal__media { border: 1px solid ButtonBorder; }

  .stars svg { fill: CanvasText; }
  .tt::after { border: 1px solid ButtonBorder; background: Canvas; color: CanvasText; }
}

/* --------------------------------------------------------------------------
   POINTER TARGET SIZE (WCAG 2.2 — 2.5.8 Target Size,
minimum)
   -------------------------------------------------------------------------- */
/* WCAG 2.2 AA (2.5.8) asks for 24x24 CSS px. These go to 44x44,
which is the
   widely used comfort target,
wherever the layout has room for it. */
.iconbtn,
.qty__btn,
.modal__close,
.carousel-nav button,
.field__eye,
.sharebtn,
.a11y__close { min-width: 44px; min-height: 44px; }


/* Slider dots: the button IS the target (26x24 minimum, 44x24 when active),
   and `::before` paints the thin bar — see the `.hero__dot` rule in section 10.
   There used to be a SECOND `::before` here that expanded the hit area
   invisibly. Once the button itself grew to 24px for WCAG 2.5.8 the two rules
   collided: this one won on `height`/`width`/`position`, so the bar rendered
   as a 44x44 neon block and the active dot stopped being distinguishable.
   One rule now, in one place. */
.hero__dot { position: relative; }

/* --- Card wrapper -------------------------------------------------------
   The card became an <article> inside its <li> so it can carry an accessible
   name. The <li> keeps the layout role it always had; the article just fills
   it, so no measurement or grid rule had to change. */
.pcard-item {
  display: flex;
  min-width: 0;
  list-style: none;
}
.pcard-item > .pcard { width: 100%; }

/* Stock: shape + text, never colour alone. */
.stock__icon { flex: none; width: 14px; height: 14px; }
.stock--in .stock__icon { stroke: var(--c-success); }
.stock--low .stock__icon { stroke: #8A5A00; }
.stock--out .stock__icon { stroke: var(--c-danger); }
.stock__text { min-width: 0; }

/* An error toast must not read as a success. */
.toast--alert {
  border-color: var(--c-danger);
  border-left: 5px solid var(--c-danger);
}

/* ==========================================================================
   INGA — support assistant
   ========================================================================== */

/* --- floating trigger ---------------------------------------------------- */
.inga-fab {
  /* Positioned AND layered by `.floating-actions`, never on its own. This rule
     used to declare z-index twice — 1, then 8000 — so the trigger built its own
     stacking context at page level and the wrapper's layer meant nothing. */
  z-index: 1;
  transition: transform var(--t-fast), background var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px 8px 8px;
  border: 2px solid var(--c-dark);
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: var(--sh-md);
  transition: transform var(--t-fast), background var(--t-fast);
}
.inga-fab:hover { background: #C9FF57; transform: translateY(-2px); }
.inga-fab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.inga-fab[aria-expanded="true"] { display: none; }
.inga-fab__avatar {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-dark);
  flex: none;
}
.inga-fab__avatar .icon { width: 20px; height: 20px; stroke: var(--c-neon); }

/* Footer in view: park the trigger higher so it cannot cover footer links. */

/* --- panel --------------------------------------------------------------- */
.inga-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-chat) - 1);
  background: rgba(23, 25, 24, .5);
}
.inga {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-chat);
  display: flex;
  flex-direction: column;
  width: min(410px, calc(100vw - 40px));
  max-height: min(640px, calc(100vh - 40px));
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.inga__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--c-dark);
  color: var(--color-surface);
}
.inga__avatar {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-neon);
  flex: none;
}
.inga__avatar .icon { width: 22px; height: 22px; stroke: var(--c-dark); }
.inga__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.inga__name { font-size: 1rem; font-weight: 900; letter-spacing: -.01em; }
.inga__role { font-size: .7rem; color: rgba(255, 255, 255, .72); }
.inga__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  color: var(--c-neon);
}
.inga__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-neon);
  box-shadow: 0 0 0 3px rgba(182, 255, 46, .22);
}
.inga__close { color: var(--color-surface); }
.inga__close:hover { background: rgba(255, 255, 255, .14); }

.inga__context {
  padding: 9px 16px;
  background: var(--c-page);
  border-bottom: 1px solid var(--c-border);
  font-size: .74rem;
  font-weight: 700;
  color: var(--c-text-muted);
  overflow-wrap: anywhere;
}

.inga__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inga__log:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }

.imsg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.imsg--bot { align-self: flex-start; }
.imsg--user { align-self: flex-end; align-items: flex-end; }
.imsg__bubble {
  padding: 11px 14px;
  border-radius: var(--radius-card);
  font-size: .86rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.imsg--bot .imsg__bubble {
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 5px;
}
.imsg--user .imsg__bubble {
  background: var(--c-dark);
  color: var(--color-surface);
  border-bottom-right-radius: 5px;
}
.imsg__who {
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
/* Where the answer came from — helps the visitor judge it. */
.imsg__source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: var(--c-text-muted);
}
.imsg__source .icon { width: 12px; height: 12px; flex: none; }
.imsg__bubble ul { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.imsg__bubble li { padding-left: 15px; position: relative; }
.imsg__bubble li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-neon-dark);
}
.imsg__bubble strong { font-weight: 800; }

.imsg__action {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 40px;
  padding: 9px 14px;
  border: 2px solid var(--c-dark);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--c-text);
}
.imsg__action:hover { background: var(--c-neon); }

/* Typing indicator: decoration only, hidden from assistive tech. */
.inga__typing { display: flex; gap: 5px; padding: 0 18px 10px; }
.inga__typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-border-strong, var(--color-border-strong));
  animation: inga-bounce 1.1s infinite ease-in-out;
}
.inga__typing span:nth-child(2) { animation-delay: .16s; }
.inga__typing span:nth-child(3) { animation-delay: .32s; }
@keyframes inga-bounce {
  0%, 60%, 100% { transform: none; opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.inga__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 14px 12px;
}
.ingachip {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font-size: .74rem;
  font-weight: 700;
  color: var(--c-text);
}
.ingachip:hover { background: var(--c-neon); border-color: var(--c-neon-dark); }

.inga__composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-border);
  background: var(--c-card);
}
.inga__input {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 120px;
  padding: 11px 13px;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  background: var(--c-page);
  font-size: .86rem;
  line-height: 1.45;
  resize: none;
}
.inga__input:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 1px; }
.inga__send {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c-neon);
  border: 2px solid var(--c-dark);
  display: grid;
  place-items: center;
  color: var(--c-dark);
}
.inga__send:hover { background: var(--c-dark); color: var(--c-neon); }
.inga__send .icon { width: 20px; height: 20px; }

.inga__contact {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  border-top: 1px solid var(--c-border);
}
.inga__contacttitle { font-size: .95rem; font-weight: 900; }
.inga__contactactions { display: flex; gap: 10px; margin-top: 4px; }
.inga__contactactions .btn { flex: 1 1 0; justify-content: center; min-height: 44px; }

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 640px) {
  .inga-fab__text { font-size: .76rem; }

  .inga {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 92vh;
    height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* The product page can show the sticky buy bar at any width — never cover it.
   The offsets only apply while that bar is actually on screen. */

/* The chat panel takes over a phone screen, so the buy bar steps aside. */
@media (max-width: 640px) {
  body.inga-open .pdsticky { display: none; }
}

@media (prefers-reduced-motion: reduce) { .inga-fab { transition: none; } }
html[data-a11y-motion="reduced"] .inga-fab { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .inga__typing span { animation: none; opacity: .7; }
  .inga-fab:hover { transform: none; }
}
html[data-a11y-motion="reduced"] .inga__typing span { animation: none !important; opacity: .7; }
html[data-a11y-motion="reduced"] .inga-fab:hover { transform: none !important; }

@media (forced-colors: active) {
  .inga, .inga-fab, .imsg__bubble, .ingachip, .inga__send, .imsg__action {
    border: 1px solid ButtonBorder !important;
  }
  .inga__dot { forced-color-adjust: none; background: Highlight; }
}

/* --- Compare column: bottom actions --------------------------------------- */
.ccol__actions { display: flex; flex-direction: column; gap: 8px; }
.ccol__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
}
.ccol__buy .icon { flex: none; }

@media (max-width: 1023px) {
  .ccol__buy { font-size: .62rem; white-space: normal; padding: 10px 8px; }
}

/* --- "Ask Inga" secondary actions ---------------------------------------- */
.pdask,
/* Values are the ones that were winning: a later block used to restate
   padding, font-size and letter-spacing further down the file. */
.modal__ask {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 2px solid var(--c-dark);
  border-radius: var(--r-pill);
  background: var(--c-card);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--c-text);
}
.pdask { width: 100%; margin-top: 12px; }
.pdask:hover,
.modal__ask:hover { background: var(--c-neon); }
.pdask:focus-visible,
.modal__ask:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 600px) {
  .modal__ask { width: 100%; }
}

/* Loyalty hero slide artwork */
.hero__media--loyalty svg { width: 100%; height: auto; }

/* ==========================================================================
   MEGA MENU + CATEGORY ROWS
   ========================================================================== */
.catlist__item { position: relative; }
.catrow { display: flex; align-items: center; gap: 2px; }
.catrow .cat { flex: 1 1 auto; min-width: 0; }
.cat__toggle {
  flex: none;
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--c-text-muted);
}
.cat__toggle:hover { background: var(--menu-hover); color: var(--menu-text); }
.cat__toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.cat__toggle[aria-expanded="true"] .cat__arrow { transform: rotate(90deg); }

/* The per-row `.mega` panel was removed: the home catalogue button opens ONE
   shared flyout (.catflyout) for every category, so a second panel component
   was dead weight. Its 3rd-level styles live with .catflyout now. */


/* ==========================================================================
   CATEGORY PAGE — in-grid banners, featured product
   ========================================================================== */


/* --- in-grid banner ------------------------------------------------------ */
.gridbanner { grid-column: 1 / -1; }
.gridbanner__link {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 20px 22px;
  border-radius: var(--r-xl);
  text-decoration: none;
  min-height: 104px;
}
.gridbanner__icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  flex: none;
}
.gridbanner__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.gridbanner__kicker { font-size: .64rem; font-weight: 900; letter-spacing: .16em; }
.gridbanner__title { font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.25; }
.gridbanner__text { font-size: .8rem; opacity: .82; }
.gridbanner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.gridbanner--dark .gridbanner__link { background: var(--c-dark); color: var(--color-surface); }
.gridbanner--dark .gridbanner__icon { background: rgba(182, 255, 46, .16); }
.gridbanner--dark .gridbanner__icon .icon { stroke: var(--c-neon); }
.gridbanner--dark .gridbanner__kicker { color: var(--c-neon); }
.gridbanner--dark .gridbanner__cta { background: var(--c-neon); color: var(--c-dark); }

.gridbanner--neon .gridbanner__link { background: var(--c-neon); color: var(--c-dark); }
.gridbanner--neon .gridbanner__icon { background: rgba(23, 25, 24, .12); }
.gridbanner--neon .gridbanner__icon .icon { stroke: var(--c-dark); }
.gridbanner--neon .gridbanner__kicker { color: #3D4A00; }
.gridbanner--neon .gridbanner__cta { background: var(--c-dark); color: var(--c-neon); }

.gridbanner--light .gridbanner__link {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.gridbanner--light .gridbanner__icon { background: var(--c-page); }
.gridbanner--light .gridbanner__kicker { color: var(--c-text-muted); }
.gridbanner--light .gridbanner__cta { background: var(--c-dark); color: var(--c-neon); }

.gridbanner__link:hover .gridbanner__cta { filter: brightness(1.12); }
.gridbanner__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 720px) {
  .gridbanner__link { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; }
  .gridbanner__cta { width: 100%; justify-content: center; }
}


@media (forced-colors: active) {
  .gridbanner__link, .catcard { border: 1px solid ButtonBorder !important; }
}

/* ==========================================================================
   INFORMATION PAGES (delivery, terms, returns, insurance, help, privacy,
   cookies, loyalty)
   ========================================================================== */
/* The page itself spans the full container; only the reading column is
   constrained, so a long paragraph never becomes 1300px wide. */
.infopage { max-width: none; }
.infopage__demo {
  margin: var(--sp-4) 0;
  padding: 14px 18px;
  border-left: 5px solid var(--c-neon-dark);
  border-radius: var(--r-sm);
  background: var(--c-page);
  font-size: .86rem;
  line-height: 1.6;
}
.infopage__block { margin-top: var(--sp-6); }
.infopage__title {
  font-size: 1.22rem;
  font-weight: 900;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.infopage__block p { margin-bottom: 10px; line-height: 1.7; }
.infopage__block a { text-decoration: underline; }
.infopage__block a:hover { color: var(--c-neon-hover); }
.infopage__list { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.infopage__list li { padding-left: 20px; position: relative; line-height: 1.65; }
.infopage__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-neon-dark);
}
.infopage code {
  font-family: var(--font-mono);
  font-size: .85em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--c-page);
  border: 1px solid var(--c-border);
}


/* Numbered process steps */
/* Rules page: status flow and glossary. Both are filled from the status
   registry, so nothing here restates a label in CSS or HTML. */
.infopage__subtitle { margin-top: var(--sp-5); font-size: 1rem; }
.infopage__note {
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-left: 3px solid var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-size: .92rem;
  line-height: 1.6;
}

.refflow {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.refflow__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-pill);
  background: var(--color-surface);
  font-size: .74rem;
  font-weight: 800;
}
.refflow__n {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: var(--fs-micro);
}
/* The arrow is decoration: the list order carries the meaning. */
.refflow__step + .refflow__step::before {
  content: "";
  width: 10px;
  height: 2px;
  margin-right: 2px;
  background: var(--color-border);
}

.refglossary { margin-top: 12px; }
.refglossary__row {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--color-border);
}
.refglossary__row:first-child { border-top: 0; }
.refglossary__desc { line-height: 1.6; }
@media (max-width: 600px) {
  .refglossary__row { grid-template-columns: 1fr; gap: 6px; }
}

.infosteps { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.infosteps li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.6; }
.infosteps__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c-neon);
  color: var(--c-dark);
  font-weight: 900;
  font-size: .85rem;
}

/* Data tables */
.infotable-wrap { overflow-x: auto; margin-top: 10px; }
.infotable { width: 100%; border-collapse: collapse; font-size: .88rem; }
.infotable th, .infotable td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: top;
}
.infotable thead th {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  background: var(--c-page);
}
.infotable tbody th { font-weight: 800; }

/* FAQ accordion — native <details>, so it is keyboard operable for free. */
.faqlist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.faq {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--c-page); }
.faq__q:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }
.faq__chev { flex: none; transition: transform var(--t-fast); }
.faq[open] .faq__chev { transform: rotate(90deg); }
.faq__a { padding: 0 16px 15px; }
.faq__a p { font-size: .88rem; line-height: 1.65; color: var(--c-text-muted); }

@media (prefers-reduced-motion: reduce) { .faq__chev { transition: none; } }
html[data-a11y-motion="reduced"] .faq__chev { transition: none !important; }

/* Help page call to action */
.helpcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: 18px 22px;
  border-radius: var(--r-lg);
  background: var(--c-dark);
  color: var(--color-surface);
}
.helpcta__text { font-size: .95rem; font-weight: 700; }
.helpcta__btn { min-height: 46px; }

@media (forced-colors: active) {
  .faq,
.infotable th,
.infotable td { border: 1px solid ButtonBorder !important; }
}

/* ==========================================================================
   ACCOUNT DASHBOARD
   ========================================================================== */
.acclayout {
  display: grid;
  grid-template-columns: minmax(210px, 240px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-5);
}
.acclayout > * { min-width: 0; }

.accnav__list { display: flex; flex-direction: column; gap: 3px; }
.accnav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  font-size: .88rem;
  font-weight: 700;
  color: var(--c-text);
  text-decoration: none;
  text-align: left;
}
.accnav__link:hover { background: var(--c-page); }
.accnav__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
/* Active state: background AND a left bar AND aria-current — not colour alone. */
.accnav__link.is-active {
  background: var(--c-neon);
  color: var(--c-dark);
  box-shadow: inset 4px 0 0 var(--c-dark);
}
.accnav__link--out { color: var(--c-danger); }
.accnav__link--out:hover { background: var(--c-danger); color: var(--color-surface); }

.accpanel__title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; margin-bottom: 14px; }
.accpanel__title:focus { outline: none; }
.accpanel__title:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.accpanel__text { font-size: .9rem; line-height: 1.65; margin-bottom: 12px; }
.accpanel__text a { text-decoration: underline; }

.accgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.acccard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
  color: var(--c-text);
  text-decoration: none;
}
.acccard:hover { border-color: var(--c-neon-dark); background: var(--c-page); }
.acccard:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.acccard__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--c-neon);
  margin-bottom: 6px;
}
.acccard__icon .icon { stroke: var(--c-dark); }
.acccard__value { font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.acccard__value--sm { font-size: .95rem; overflow-wrap: anywhere; line-height: 1.3; }
.acccard__label { font-size: .82rem; font-weight: 700; }
.acccard__note { font-size: .74rem; color: var(--c-text-muted); }

.accform { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 620px; }
.accform__submit { align-self: flex-start; min-height: 46px; }
.accform__state { font-size: .85rem; font-weight: 700; color: var(--c-success); min-height: 1.2em; }
.field__hint { font-size: .74rem; color: var(--c-text-muted); margin-top: 4px; }

.accverify {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 460px;
  margin-top: var(--sp-4);
  padding: 20px;
  border: 2px solid var(--c-neon-dark);
  border-radius: var(--r-lg);
  background: var(--c-page);
}
.accverify__title { font-size: 1rem; font-weight: 900; }
.accverify__text { font-size: .85rem; line-height: 1.55; color: var(--c-text-muted); }
.accverify__code { letter-spacing: .5em; font-size: 1.2rem; font-weight: 800; text-align: center; }
.accverify__actions { display: flex; gap: 10px; }
.accverify__actions .btn { flex: 1 1 0; justify-content: center; min-height: 46px; }

/* Password strength — text first, bar second. */
.pwmeter { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.pwmeter__bar { display: block; height: 7px; border-radius: var(--r-pill); background: var(--c-border); overflow: hidden; }
.pwmeter__fill { display: block; height: 100%; width: 0; background: var(--c-danger); transition: width var(--t-fast); }
.pwmeter[data-level="2"] .pwmeter__fill { background: #B8760B; }
.pwmeter[data-level="3"] .pwmeter__fill { background: var(--c-neon-dark); }
.pwmeter[data-level="4"] .pwmeter__fill { background: var(--c-success); }
.pwmeter__label { font-size: .74rem; font-weight: 700; color: var(--c-text-muted); }
@media (prefers-reduced-motion: reduce) { .pwmeter__fill { transition: none; } }
html[data-a11y-motion="reduced"] .pwmeter__fill { transition: none !important; }

/* Addresses */
.addrlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); }
.addr { padding: 16px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-card); }
.addr__type { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 900; }
.addr__badge { padding: 2px 8px; border-radius: var(--r-pill); background: var(--c-neon); color: var(--c-dark); font-size: .6rem; font-weight: 900; letter-spacing: .08em; }
.addr__lines { margin-top: 7px; font-size: .86rem; line-height: 1.6; color: var(--c-text-muted); }

/* Orders */
.olist { display: flex; flex-direction: column; gap: 10px; }
.orow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 15px 18px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.orow__id { font-size: .95rem; font-weight: 900; }
.orow__id a { text-decoration: none; }
.orow__id a:hover { text-decoration: underline; color: var(--c-neon-hover); }
.orow__meta { font-size: .76rem; color: var(--c-text-muted); margin-top: 3px; }
.orow__total { font-size: 1rem; font-weight: 900; white-space: nowrap; }

/* Status: icon + word + tone, so it is never only a colour. */
.ostatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.ostatus--ok   { background: #E7F7EE; border-color: #0C7A45; color: #0A5C34; }
.ostatus--info { background: #E8F0FA; border-color: #14508F; color: #10406F; }
.ostatus--warn { background: #FDF3E2; border-color: #8A5A00; color: #6B4600; }
.ostatus--bad  { background: #FBEAE8; border-color: #9B0000; color: #7A0000; }
.ostatus .icon { stroke: currentColor; }

.obackbtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 6px;
  font-size: .82rem;
  font-weight: 800;
  margin-bottom: 10px;
}
.obackbtn:hover { color: var(--c-neon-hover); text-decoration: underline; }

.odetail { padding: 20px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-card); }
.odetail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odetail__id { font-size: 1.15rem; font-weight: 900; }
.odetail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.odetail__meta dt { font-size: .66rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--c-text-muted); }
.odetail__meta dd { margin: 3px 0 0; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }

.oitems { display: flex; flex-direction: column; gap: 12px; }
.oitem { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.oitem__art {
  width: 62px; height: 62px;
  display: grid; place-items: center;
  padding: 5px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-page);
}
.oitem__art svg { width: 100%; height: 100%; }
.oitem__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.oitem__brand { font-size: .64rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-muted); }
.oitem__name { font-size: .88rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.oitem__name:hover { color: var(--c-neon-hover); text-decoration: underline; }
.oitem__qty { font-size: .76rem; color: var(--c-text-muted); }
.oitem__sum { font-size: .92rem; font-weight: 900; white-space: nowrap; }

.osum { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--c-border); display: flex; flex-direction: column; gap: 7px; }
.osum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .88rem; }
.osum dt, .osum dd { margin: 0; }
/* `.osum >` beats `.osum > div`, so the total does not need `!important`. */
.osum > .osum__total { padding-top: 9px; border-top: 1px solid var(--c-border); font-size: 1.05rem; font-weight: 900; }

.odocs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.odocs .btn { min-height: 46px; }
.odocs__note { margin-top: 8px; font-size: .74rem; color: var(--c-text-muted); line-height: 1.55; }
.oedit { margin-top: 18px; }
.oedit .btn { min-height: 46px; }
.oedit__note {
  margin-top: 18px;
  padding: 12px 15px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  font-size: .8rem;
  line-height: 1.55;
}
.oeditform {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: 16px;
  padding: 18px;
  border: 2px solid var(--c-neon-dark);
  border-radius: var(--r-lg);
  background: var(--c-page);
}
.oeditform__title { font-size: 1rem; font-weight: 900; }
.oeditform__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.oeditform__actions .btn { min-height: 46px; }

@media (max-width: 900px) {
  .acclayout { grid-template-columns: minmax(0, 1fr); }
  .accnav__list { flex-direction: row; flex-wrap: wrap; }
  .accnav__link { width: auto; }
}
@media (max-width: 600px) {
  .orow { grid-template-columns: minmax(0, 1fr); }
  .orow__total { text-align: right; }
  .oitem { grid-template-columns: 50px minmax(0, 1fr); }
  .oitem__sum { grid-column: 2; }
}

@media (forced-colors: active) {
  .acccard, .addr, .orow, .odetail, .ostatus, .accverify, .oeditform {
    border: 1px solid ButtonBorder !important;
  }
  .accnav__link.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .pwmeter__fill { forced-color-adjust: none; background: Highlight; }
}

/* --- Promo / gift card code in the order summary -------------------------- */
.promo { display: flex; flex-direction: column; gap: 8px; margin: var(--sp-4) 0; }
.promo__label { font-size: .76rem; font-weight: 800; color: var(--c-text); }
.promo__row { display: flex; gap: 8px; }
.promo__input { flex: 1 1 auto; min-width: 0; }
.promo__apply { flex: none; min-height: 46px; font-size: .68rem; }
.promo__state { font-size: .78rem; font-weight: 700; color: var(--c-success); min-height: 1.2em; }
/* Errors get an icon and a border colour, never colour alone. */
.promo__state.is-error { color: var(--c-danger); }
.promo__state.is-error::before { content: "⚠ "; }

.promo__applied { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--sp-3); }
.promo__item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--c-neon-dark);
  border-radius: var(--r-md);
  background: var(--c-page);
}
.promo__code { font-size: .74rem; font-weight: 900; letter-spacing: .06em; }
.promo__desc { flex: 1 1 auto; min-width: 0; font-size: .76rem; color: var(--c-text-muted); }
.promo__remove {
  flex: none;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c-text-muted);
}
.promo__remove:hover { background: var(--c-danger); color: var(--color-surface); }
.promo__remove:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 430px) /* was 420px: .promo__row/.loyuse__row/.catcards — 10px apart, identical intent */ {
  .promo__row { flex-direction: column; }
  .promo__apply { width: 100%; justify-content: center; }
}

/* ==========================================================================
   LOYALTY PROGRAMME
   Graphite + neon, same as the rest of the store. Every level is identified
   by a name, an icon and a badge — never by colour alone.
   ========================================================================== */

/* --- header badge -------------------------------------------------------- */
.loybadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 2px;
}
.loybadge__level {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .1em;
}
.loybadge__points { font-size: .6rem; font-weight: 700; color: var(--c-text-muted); white-space: nowrap; }
.site-header.is-stuck .loybadge { display: none; }
@media (max-width: 1100px) { .loybadge__points { display: none; } }

/* --- membership card ----------------------------------------------------- */
.loycard {
  position: relative;
  /* No `top`/`left` offset: the rail must sit exactly where the grid put it,
     which is the same row line as the hero column. `.catflyout { top: 0 }` is
     measured from here, so this is what makes the panel line up with the hero. */
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, 100%);
  padding: 22px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #2C312C 0%, var(--color-secondary) 60%, #0D0F0E 100%);
  border: 1px solid #3C433C;
  color: var(--color-surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
}
.loycard::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(182,255,46,.28) 0%, rgba(182,255,46,0) 70%);
  pointer-events: none;
}
.loycard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.loycard__brand {
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1.5;
  color: var(--c-on-dark-muted);
}
.loycard__brand span { color: var(--c-neon); }
.loycard__chip {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: rgba(182, 255, 46, .16);
  border: 1px solid rgba(182, 255, 46, .4);
}
.loycard__chip .icon { stroke: var(--c-neon); }
.loycard__tier { font-size: 2.2rem; font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.loycard__points { font-size: .92rem; color: var(--c-on-dark-muted); }
.loycard__points strong { font-size: 1.35rem; font-weight: 900; color: var(--color-surface); }
.loycard--compact { width: 100%; max-width: 340px; }

/* Level accents. Each one also has its icon and name, so the tint is extra. */
.loycard--silver { background: linear-gradient(150deg, #3A403C 0%, #20241F 60%, #101211 100%); }
.loycard--gold   { background: linear-gradient(150deg, #3B3A26 0%, #22231A 60%, #101211 100%); }
.loycard--black  { background: linear-gradient(150deg, #1A1C1A 0%, #0C0E0D 60%, #000000 100%); border-color: var(--c-neon-dark); }

/* --- hero ---------------------------------------------------------------- */
.loyhero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: center;
  margin-top: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--c-card);
  border: 1px solid var(--c-border);
}
.loyhero__kicker {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--color-primary-text);
}
.loyhero__headline {
  margin-top: 10px;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.loyhero__text { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--c-text-muted); max-width: 52ch; }
.loyhero__guest { margin-top: var(--sp-4); }
.loyhero__guesttext { font-size: .9rem; font-weight: 700; margin-bottom: 12px; }
.loyhero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.loyhero__cta .btn { min-height: 48px; }

@media (max-width: 860px) {
  .loyhero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .loyhero__card { justify-self: start; }
}

/* --- my progress --------------------------------------------------------- */
.loymine { margin-top: var(--sp-5); }
.loyprogress {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-left: 5px solid var(--c-neon-dark);
  border-radius: var(--r-xl);
  background: var(--c-card);
}
.loyprogress__label {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.loyprogress__level {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.03em;
}
.loyprogress__level .icon { stroke: var(--c-neon-dark); }
.loyprogress__counts { margin-top: 10px; font-size: .95rem; font-weight: 800; }
.loyprogress__next { margin-top: 8px; font-size: .88rem; font-weight: 700; color: var(--c-text-muted); }

.loybar {
  margin-top: 10px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--c-border);
  overflow: hidden;
}
.loybar--sm { height: 9px; margin-top: 8px; }
.loybar__fill {
  display: block;
  height: 100%;
  background: var(--c-neon-dark);
  border-radius: var(--r-pill);
  transition: width var(--t-base);
}
@media (prefers-reduced-motion: reduce) { .loybar__fill { transition: none; } }
html[data-a11y-motion="reduced"] .loybar__fill { transition: none !important; }

/* The two numbers side by side: spending must visibly not touch the level. */
.loypoints {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.loypoints dt { font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-muted); }
.loypoints dd { margin: 3px 0 0; font-size: 1.05rem; font-weight: 900; }
.loyprogress__history { margin-top: var(--sp-4); min-height: 46px; }

/* --- points shop --------------------------------------------------------- */
.loyshop__balance { font-size: .88rem; font-weight: 800; }
.rewards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.reward {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.reward__cost {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.reward__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-page);
  margin-top: 4px;
}
.reward__icon .icon { stroke: var(--c-dark); }
.reward__title { font-size: 1rem; font-weight: 900; line-height: 1.3; }
.reward__text { font-size: .82rem; color: var(--c-text-muted); line-height: 1.55; flex: 1 1 auto; }
.reward__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--c-success);
}
.reward__cta { width: 100%; justify-content: center; min-height: 46px; font-size: .7rem; }

/* Unavailable: a dashed border, a muted card AND the reason in words. */
.reward.is-locked { border-style: dashed; background: var(--c-page); }
.reward.is-locked .reward__cost { background: var(--c-border); color: var(--c-text); }
.reward.is-locked .reward__status { color: #6B4600; }
.reward__cta[disabled] { opacity: 1; cursor: not-allowed; color: var(--c-text-muted); }

/* --- missions ------------------------------------------------------------ */
.missions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.mission {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.mission__reward {
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--c-dark);
  color: var(--c-neon);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.mission__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--c-page);
  margin-top: 4px;
}
.mission__icon .icon { stroke: var(--c-dark); }
.mission__title { font-size: .98rem; font-weight: 900; line-height: 1.35; }
.mission__note { font-size: .76rem; color: var(--c-text-muted); line-height: 1.5; }
.mission__counts { font-size: .84rem; font-weight: 800; margin-top: 4px; }
.mission__deadline {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 700; color: var(--c-text-muted);
}
/* Completed: icon + word + border, never a green fill alone. */
.mission.is-done { border: 2px solid var(--c-success); }
.mission__done {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 900; color: var(--c-success);
}

/* --- levels -------------------------------------------------------------- */
.loylevels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
}
.loylevel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-card);
}
.loylevel.is-current { border: 2px solid var(--c-neon-dark); background: var(--c-page); }
.loylevel--black { background: var(--c-dark); color: var(--color-surface); border-color: #3C433C; }
.loylevel--black .loylevel__range,
.loylevel--black .loylevel__earn { color: var(--c-on-dark-muted); }
.loylevel--black .loylevel__icon { background: rgba(182,255,46,.16); }
.loylevel--black .loylevel__icon .icon { stroke: var(--c-neon); }
.loylevel--black .loylevel__list li::before { background: var(--c-neon); }
.loylevel--black.is-current { border-color: var(--c-neon); }

.loylevel__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loylevel__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--c-page);
  flex: none;
}
.loylevel__icon .icon { stroke: var(--c-dark); }
.loylevel__name { font-size: 1.3rem; font-weight: 900; letter-spacing: .04em; }
.loylevel__badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-neon);
  color: var(--c-dark);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.loylevel__badge .icon { stroke: var(--c-dark); }
.loylevel__range { font-size: .76rem; color: var(--c-text-muted); }
.loylevel__earn { font-size: .84rem; font-weight: 800; }
.loylevel__list { display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.loylevel__list li { padding-left: 18px; position: relative; font-size: .84rem; line-height: 1.55; }
.loylevel__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--c-neon-dark);
}

/* --- "how is my level calculated" disclosure ----------------------------- */
.loyexplain {
  margin-top: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-card);
  overflow: hidden;
}
.loyexplain__q {
  display: flex; align-items: center; gap: 9px;
  min-height: 52px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .9rem;
  font-weight: 800;
}
.loyexplain__q::-webkit-details-marker { display: none; }
.loyexplain__q:hover { background: var(--c-page); }
.loyexplain__q:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }
.loyexplain__chev { margin-left: auto; transition: transform var(--t-fast); }
.loyexplain[open] .loyexplain__chev { transform: rotate(90deg); }
.loyexplain__a { padding: 0 16px 16px; }
.loyexplain__a p { font-size: .86rem; line-height: 1.65; color: var(--c-text-muted); margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .loyexplain__chev { transition: none; } }
html[data-a11y-motion="reduced"] .loyexplain__chev { transition: none !important; }

/* --- how it works -------------------------------------------------------- */
.loysteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
  counter-reset: none;
}
.loystep {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-card);
}
.loystep__n {
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--color-primary-text);
}
.loystep__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--c-neon);
}
.loystep__icon .icon { stroke: var(--c-dark); }
.loystep__title { font-size: 1rem; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.loystep__text { font-size: .84rem; line-height: 1.6; color: var(--c-text-muted); }

.loyrules {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-page);
  border: 1px solid var(--c-border);
}
.loyrules__title { font-size: 1rem; font-weight: 900; margin-bottom: 8px; }

/* --- point history ------------------------------------------------------- */
.loyledger__label { font-weight: 700; }
.loyledger__delta { font-weight: 900; white-space: nowrap; }
.loyledger__delta.is-plus { color: var(--c-success); }
.loyledger__delta.is-minus { color: var(--c-danger); }

/* --- redemption dialog --------------------------------------------------- */
.modal__dialog--reward { width: min(460px, 100%); }
.redeem { padding: 30px 26px 26px; display: flex; flex-direction: column; gap: var(--sp-4); }
.redeem__title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; padding-right: 34px; }
.redeem__text { font-size: .92rem; line-height: 1.6; }
.redeem__balance {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px solid var(--c-border);
}
.redeem__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: .9rem; }
.redeem__row strong { font-weight: 900; }
.redeem__row--after { padding-top: 8px; border-top: 1px solid var(--c-border); }
.redeem__actions { display: flex; gap: 10px; }
.redeem__actions .btn { flex: 1 1 0; justify-content: center; min-height: 48px; }

@media (max-width: 600px) {
  .loyhero { padding: var(--sp-4); }
  .loyprogress { padding: var(--sp-4); }
  .rewards, .missions, .loylevels, .loysteps { grid-template-columns: minmax(0, 1fr); }
  .redeem { padding: 26px 18px 20px; }
  .redeem__actions { flex-direction: column; }
}

@media (forced-colors: active) {
  .loycard, .loylevel, .reward, .mission, .loystep, .loyprogress, .loyexplain,
  .loybadge__level, .reward__cost, .mission__reward {
    border: 1px solid ButtonBorder !important;
  }
  .loybar__fill { forced-color-adjust: none; background: Highlight; }
  .reward__cta[disabled] { color: GrayText !important; }
}

.accpanel__subtitle {
  margin: var(--sp-5) 0 10px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* --- Loyalty earn estimate (product page + quick view) -------------------- */
.loyearn {
  margin-top: 10px;
  padding: 11px 14px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-neon-dark);
}
.loyearn__line { display: flex; align-items: center; gap: 8px; font-size: .86rem; line-height: 1.5; }
.loyearn__line .icon { flex: none; stroke: var(--c-neon-dark); }
.loyearn__line strong { font-weight: 900; }
.loyearn__how { margin-top: 6px; }
.loyearn__how summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--c-text-muted);
  cursor: pointer;
  text-decoration: underline;
  list-style: none;
}
.loyearn__how summary::-webkit-details-marker { display: none; }
.loyearn__how summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.loyearn__how p { margin-top: 6px; font-size: .78rem; line-height: 1.6; color: var(--c-text-muted); }
.loyearn--guest, .loyearn--none { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; line-height: 1.55; }
.loyearn--guest .icon, .loyearn--none .icon { flex: none; margin-top: 2px; }
.loyearn--guest a { font-weight: 900; text-decoration: underline; }
.loyearn--none { border-left-color: var(--c-border); }

/* --- Loyalty points in checkout ------------------------------------------ */
.loyuse {
  margin: var(--sp-4) 0;
  padding: 16px;
  border: 1px solid var(--c-neon-dark);
  border-radius: var(--r-lg);
  background: var(--c-page);
}
.loyuse__title {
  display: flex; align-items: center; gap: 7px;
  font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
}
.loyuse__title .icon { stroke: var(--c-neon-dark); }
.loyuse__balance { margin-top: 6px; font-size: .86rem; font-weight: 800; }
.loyuse__cap { margin-top: 3px; font-size: .78rem; color: var(--c-text-muted); line-height: 1.5; }
.loyuse .field { margin-top: 12px; }
.loyuse__range { width: 100%; min-height: 44px; accent-color: var(--c-neon-dark); }
.loyuse__range:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.loyuse__row { display: flex; gap: 8px; margin-top: 6px; }
.loyuse__input { flex: 1 1 auto; min-width: 0; }
.loyuse__max { flex: none; min-height: 46px; font-size: .66rem; }
.loyuse__value { margin-top: 7px; font-size: .8rem; font-weight: 700; color: var(--c-text); }

@media (max-width: 430px) /* was 420px: .promo__row/.loyuse__row/.catcards — 10px apart, identical intent */ {
  .loyuse__row { flex-direction: column; }
  .loyuse__max { width: 100%; justify-content: center; }
}
@media (forced-colors: active) {
  .loyuse, .loyearn { border: 1px solid ButtonBorder !important; }
}

/* --- Google sign-in button (one definition, used by the one auth dialog) --- */
.btn--google {
  width: 100%;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--fs-caption);
  font-weight: 900;
  letter-spacing: .06em;
}
.btn--google:hover { background: var(--c-page); border-color: var(--color-secondary); }
.btn__glogo { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.btn__glogo svg { width: 20px; height: 20px; }

/* "vai" divider */
.authdiv {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--sp-4) 0;
  font-size: var(--fs-caption);
  color: var(--color-text-light);
}
.authdiv::before,
.authdiv::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--color-border);
}

@media (forced-colors: active) {
  .btn--google { border: 1px solid ButtonBorder !important; }
}

/* ==========================================================================
   INFORMATION PAGE LAYOUT — one system for every policy / help page
   Desktop: a sticky contents column the same width as the category sidebar,
   plus a reading column. Mobile: the same list, collapsed into a native
   disclosure so it stays keyboard operable with no JavaScript.
   ========================================================================== */
.infolayout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-5);
}
.infolayout > * { min-width: 0; }
/* A page with fewer than two headings gets no sidebar, so the article takes
   the whole width instead of leaving a gap where the panel would have been. */
.info-noaside .infolayout { grid-template-columns: minmax(0, 1fr); }

/* Reading measure — the whole point of constraining the inner element rather
   than the page: the layout stays wide, the prose stays readable. */
.infocontent__inner { max-width: 900px; }

/* The sticky column is the ASIDE, not the panel inside it: the panel's height
   changes with the page, the column's position must not. */
.infoaside {
  position: sticky;
  top: calc(var(--sticky-header-height, 76px) + 24px);
  align-self: start;
}
.infoaside[hidden] { display: none; }

.infonav {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  background: var(--color-surface);
  box-shadow: var(--sh-sm);
}
/* On desktop the disclosure is opened by initTableOfContents() and its summary
   is redundant. It is NOT enough to give the content `display: block`: a closed
   <details> hides its children at the box-tree level, which is exactly why this
   panel used to render as an empty box. */
.infonav__summary { display: none; }
.infonav__inner { display: block; }
.infonav__title {
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 10px;
}
.infonav__list,
.infonav__sub { display: flex; flex-direction: column; gap: 1px; list-style: none; }
/* An h3 is a step inside its h2, and the indent is what says so. */
.infonav__sub { margin-top: 1px; padding-left: 12px; }
.infonav__link--sub {
  font-size: var(--fs-caption);
  color: var(--color-text-light);
  min-height: 34px;
  padding: 7px 11px;
}
.infonav__link--sub::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1px;
  margin-right: 7px;
  vertical-align: middle;
  background: var(--color-border);
}
.infonav__link {
  display: block;
  min-height: 40px;
  padding: 9px 11px;
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  line-height: 1.35;
  color: var(--color-text);
  text-decoration: none;
}
.infonav__link:hover { background: var(--c-page); color: var(--c-neon-hover); }
.infonav__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
/* The section being read is marked by a bar AND a background AND a weight
   change — never by colour alone. */
.infonav__link.is-current {
  background: var(--c-page);
  border-left-color: var(--color-primary-dark);
  font-weight: 800;
}

@media (max-width: 900px) {
  .infolayout { grid-template-columns: minmax(0, 1fr); }
  .infoaside { position: static; top: auto; }
  .infonav {
    padding: 0;
    overflow: hidden;
  }
  .infonav__summary {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 13px 16px;
    cursor: pointer;
    list-style: none;
    font-size: var(--fs-small);
    font-weight: 800;
  }
  .infonav__summary::-webkit-details-marker { display: none; }
  .infonav__summary:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }
  .infonav__chev { margin-left: auto; transition: transform var(--t-fast); }
  .infonav[open] .infonav__chev { transform: rotate(90deg); }
  .infonav__inner { padding: 0 12px 12px; }
  .infonav__title { display: none; }
}
@media (prefers-reduced-motion: reduce) { .infonav__chev { transition: none; } }
html[data-a11y-motion="reduced"] .infonav__chev { transition: none !important; }

@media (forced-colors: active) {
  .infonav { border: 1px solid ButtonBorder !important; }
  .infonav__link.is-current { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ==========================================================================
   LARGE GIFT CARD BAND — the conversion block under "Jaunumi"
   Taller than a promo banner (300–360px on desktop), full container width.
   ========================================================================== */
.giftband {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  align-items: center;
  gap: var(--sp-6);
  min-height: 320px;
  padding: clamp(24px, 3.5vw, 46px);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: var(--color-surface);
  text-decoration: none;
  isolation: isolate;
}
.giftband__art { position: absolute; inset: 0; z-index: var(--z-behind); }
.giftband__art svg { width: 100%; height: 100%; object-fit: cover; }

.giftband__content { position: relative; min-width: 0; }
.giftband__kicker {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--color-primary);
}
.giftband__title {
  margin-top: 10px;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--color-surface);
}
.giftband__text {
  margin-top: 12px;
  font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
  color: var(--c-on-dark-muted);
  max-width: 46ch;
}
.giftband__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sp-4);
}
.giftband__amounts li {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(182, 255, 46, .45);
  background: rgba(182, 255, 46, .10);
  font-size: var(--fs-small);
  font-weight: 900;
  color: var(--color-primary);
}
.giftband__cta { margin-top: var(--sp-5); min-height: 50px; }
.giftband__cards { position: relative; min-width: 0; }
.giftband__cards svg { width: 100%; height: auto; }

.giftband:hover .giftband__cta { filter: brightness(1.08); }
.giftband:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: 3px; }

@media (max-width: 900px) {
  .giftband {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .giftband__cards { display: none; }
}
@media (max-width: 600px) {
  .giftband { padding: 22px 18px; }
  .giftband__cta { width: 100%; justify-content: center; }
}
@media (forced-colors: active) {
  .giftband { border: 1px solid ButtonBorder !important; }
}

/* --------------------------------------------------------------------------
   Dark promo banner variant
   The regression: `.promo-banner--campaign` inherited the page ink tokens —
   its <h2> took the global `h1..h6 { color: var(--color-heading) }` and its
   <p> took `--color-text`, i.e. near-black text on a near-black banner.
   A dark banner is a DARK COMPONENT and gets its own semantics.
   -------------------------------------------------------------------------- */
.promo-banner--dark {
  background: var(--promo-dark-bg);
  color: var(--promo-dark-text);
}
/* Class-level specificity, so no !important is needed to beat `h1..h6`. */
.promo-banner--dark .promo-banner__title { color: var(--promo-dark-heading); }
.promo-banner--dark .promo-banner__text { color: var(--promo-dark-text); }
.promo-banner--dark .promo-banner__eyebrow {
  background: rgba(182, 255, 46, .16);
  color: var(--promo-dark-accent);
  border: 1px solid rgba(182, 255, 46, .4);
}
/* Neon fill + dark label: 14.6:1, the strongest pairing available. */
.promo-banner--dark .promo-banner__cta {
  background: var(--promo-dark-accent);
  color: var(--color-secondary);
  border-color: var(--promo-dark-accent);
}
.promo-banner--dark:hover .promo-banner__cta { filter: brightness(1.08); }
.promo-banner--dark:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Hero below 900px — arrows join the control bar
   The side arrows are removed from the overlay entirely rather than merely
   hidden behind the text, so the copy owns the full width of the banner.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero { --hero-gutter: clamp(18px, 4vw, 28px); --hero-controls-h: 58px; }
  .hero__nav { display: none; }
  .hero__ctrl { display: inline-flex; }
  .hero__controls {
    left: var(--hero-gutter);
    right: var(--hero-gutter);
    bottom: 14px;
    gap: 8px;
  }
  .hero__dots { justify-content: center; }
}

@media (max-width: 600px) {
  .hero__ctrl { width: 44px; height: 44px; }
  .hero__count { display: none; }   /* the dots already convey position */
}

/* Tablet: smaller arrows, wider safe area — the copy keeps its room. */
@media (min-width: 901px) and (max-width: 1200px) {
  .hero__nav { width: 40px; height: 40px; }
  .hero { --hero-gutter: clamp(60px, 6vw, 84px); }
}

@media (forced-colors: active) {
  .hero__ctrl { border: 1px solid ButtonBorder !important; }
}

/* ==========================================================================
   FLOATING ACTIONS — one fixed group
   ==========================================================================
   Back-to-top and the chat trigger used to be two independently positioned
   `position: fixed` elements, and the footer observer moved only the chat
   one. Near the footer they drifted apart and back-to-top ended up over the
   footer text.

   Now there is ONE wrapper. The order and the gap between the buttons are
   fixed; only the wrapper's `bottom` ever changes.
   ========================================================================== */
/* While the chat panel is open it covers the floating column: the panel sits
   at `--z-inga` and the back-to-top button underneath it at z-index 1, so the
   button stayed visible but could not be clicked — `elementFromPoint` over it
   returned the chat's send button. The chat has its own way back to the top of
   the conversation, so the button steps aside rather than fighting for the
   same 48px. Found in a real browser at 1440x900; jsdom cannot see it. */
body.inga-open .totop {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: var(--fa-bottom, 24px);
  z-index: var(--z-floating);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;                      /* constant, at every scroll position */
  transition: bottom var(--t-base);
  pointer-events: none;           /* the wrapper itself is not a target */
}
.floating-actions > * { pointer-events: auto; }

/* Footer in view: the WHOLE group steps up, so the buttons keep their
   relative position and never cover footer content. */
body.inga-at-footer .floating-actions { --fa-bottom: 120px; }

/* Mobile purchase bar in view: same idea, plus the safe area. */
body.pdsticky-on .floating-actions {
  --fa-bottom: calc(var(--mobile-purchase-bar-height, 76px) + 20px + env(safe-area-inset-bottom, 0px));
}
body.pdsticky-on.inga-at-footer .floating-actions {
  --fa-bottom: calc(var(--mobile-purchase-bar-height, 76px) + 116px + env(safe-area-inset-bottom, 0px));
}

/* The chat panel replaces the trigger, so the group gets out of the way. */
body.inga-open .floating-actions { --fa-bottom: 24px; }

/* Toasts stack above the group rather than fighting it for space. */
.toasts { bottom: calc(var(--fa-bottom, 24px) + 116px); }

@media (max-width: 640px) {
  .floating-actions { right: 12px; --fa-bottom: 16px; gap: 14px; }
  body.inga-at-footer .floating-actions { --fa-bottom: 104px; }
  .toasts { bottom: calc(var(--fa-bottom, 16px) + 108px); }
}

@media (prefers-reduced-motion: reduce) { .floating-actions { transition: none; } }
html[data-a11y-motion="reduced"] .floating-actions { transition: none !important; }

/* ==========================================================================
   REFERRAL — footer block, guest dialog, account coupons
   ========================================================================== */
.referral {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--sp-5);
  align-items: center;
  margin: var(--sp-8) 0 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--footer-border);
  border-radius: var(--r-xl);
  /* A shade lighter than the footer so the card reads as its own surface. */
  background: rgba(255, 255, 255, .045);
}
.referral__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--footer-heading);
}
.referral__text { margin-top: 8px; font-size: var(--fs-small); line-height: 1.6; color: var(--footer-text); }
.referral__rule {
  margin-top: 8px;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--footer-muted);
}

.referral__form { display: flex; gap: 10px; align-items: flex-start; }
.referral__field { flex: 1 1 auto; min-width: 0; }
.referral__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-caption);
  font-weight: 800;
  color: var(--footer-text);
}
.referral__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--footer-border);
  background: var(--color-surface);
  /* WCAG 1.4.3. This is a WHITE field inside the DARK footer, and the footer
     re-points `--color-text` to its light ink (#D5D9D7) — so the typed value
     was light grey on white: 1.43:1, effectively invisible. `--c-text` is the
     base ink and is not re-pointed for dark surfaces, so the field carries the
     light-surface colours its own background needs. Same for the placeholder,
     which was inheriting the footer's muted light grey. */
  color: var(--ink-on-light);
  font-size: var(--fs-small);
}
.referral__input::placeholder { color: var(--ink-on-light-muted); }
.referral__input:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: 2px; }
.referral__input[aria-invalid="true"] { border-color: var(--color-alert); border-width: 2px; }
.referral__cta { flex: none; min-height: 48px; margin-top: 25px; }

/* Errors carry a glyph as well as a colour. */
.referral__error:empty { display: none; }
.referral__error {
  margin-top: 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: #FF9A8F;
}
.referral__error::before { content: "⚠ "; }
.referral__state:empty { display: none; }
.referral__state {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(182, 255, 46, .12);
  border: 1px solid rgba(182, 255, 46, .4);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--footer-heading);
}
.referral__state strong { color: var(--color-primary); }

@media (max-width: 860px) {
  .referral { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .referral__form { flex-direction: column; }
  .referral__cta { width: 100%; justify-content: center; margin-top: 0; }
}

/* --- guest dialog --------------------------------------------------------- */
.modal__dialog--referral { width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
@supports (height: 100dvh) {
  .modal__dialog--referral { max-height: calc(100dvh - 32px); }
}
.refdlg { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: var(--sp-3); }
.refdlg__title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.02em; padding-right: 34px; }
.refdlg__text { font-size: var(--fs-small); line-height: 1.6; color: var(--color-text-light); }
.refdlg__friend {
  padding: 10px 13px;
  border-radius: var(--r-md);
  background: var(--c-page);
  border: 1px solid var(--color-border);
  font-size: var(--fs-small);
}
.refdlg__submit { width: 100%; justify-content: center; min-height: 48px; margin-top: 4px; }

/* --- account: coupons ----------------------------------------------------- */
.coupons { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }
.coupon {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 18px;
  border: 2px dashed var(--color-primary-dark);
  border-radius: var(--r-lg);
  background: var(--color-surface);
}
.coupon.is-locked { border-style: solid; border-color: var(--color-border); background: var(--c-page); }
.coupon__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.coupon__value { font-size: 1.15rem; font-weight: 900; letter-spacing: -.01em; }
.coupon__code code {
  display: inline-block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  background: var(--c-page);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .08em;
  overflow-wrap: anywhere;
}
.coupon.is-locked .coupon__code code { opacity: .75; }
.coupon__note, .coupon__valid { font-size: var(--fs-caption); color: var(--color-text-light); line-height: 1.5; }
.coupon__valid strong { color: var(--color-text); }
.coupon__copy { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; font-size: .68rem; }
.coupon__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 4px;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--color-text-light);
}
.coupon__hint .icon { flex: none; margin-top: 2px; }

/* --- account: invited friends --------------------------------------------
   The list is ONE set of nodes. Above 800px the grid gives it table columns
   and the per-item labels are hidden visually (never from a screen reader);
   below that the same nodes stack as cards with their labels showing. No
   duplicated markup, so nothing can fall out of sync. */

.refsum {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.refsum__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.refsum__icon { color: var(--color-text-light); }
.refsum__icon .icon { width: 22px; height: 22px; }
.refsum__value { font-family: var(--font-heading); font-size: 1.7rem; line-height: 1.1; }
.refsum__label { font-size: var(--fs-caption); color: var(--color-text-light); }

.reflist { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.reflist__head { display: none; }
.reflist__items { list-style: none; }

.refitem { border-top: 1px solid var(--color-border); background: var(--color-surface); }
.refitem:first-child { border-top: 0; }
.refitem.is-new { background: var(--color-surface-alt); }

.refitem__grid { display: grid; gap: 10px; padding: 16px; }
.refitem__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.refitem__label { font-size: var(--fs-caption); font-weight: 700; color: var(--color-text-light); }
.refitem__value { font-size: .92rem; overflow-wrap: anywhere; }
.refitem__cell--email .refitem__value { font-weight: 800; }

.refitem__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: var(--fs-micro);
  font-weight: 800;
  vertical-align: middle;
}
.refitem__open { min-height: 40px; font-size: .64rem; width: 100%; }
.refitem__open-short { display: none; }

/* Status chip + its description. The bubble is adjacent to the chip so it can
   be hovered on the way to it (WCAG 2.2, 1.4.13). */
.refstatus { position: relative; display: inline-block; }
.refstatus__chip { cursor: help; }
.refstatus__chip:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.refstatus__tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-tooltip);
  width: max-content;
  max-width: 240px;
  padding: 8px 11px;
  border-radius: var(--r-sm);
  background: var(--c-dark);
  color: var(--color-surface);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-fast);
}
.refstatus__chip:hover ~ .refstatus__tip,
.refstatus__chip:focus-visible ~ .refstatus__tip,
.refstatus__tip:hover { opacity: 1; visibility: visible; }
.refstatus.is-tip-off .refstatus__tip { opacity: 0; visibility: hidden; }

/* --- referral detail ------------------------------------------------------ */
.refdetail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  padding: var(--sp-4);
}
.refdetail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.refdetail__email { font-size: 1.05rem; overflow-wrap: anywhere; }
.refdetail__email:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.refdetail__lead { margin-top: 8px; color: var(--color-text-light); }
.refdetail__reason {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-3);
  padding: 12px 14px;
  border: 1px solid var(--color-alert);
  border-radius: var(--radius-control);
  background: #FBEAE8;
  color: #7A0000;
  font-size: .88rem;
}
.refdetail__reason .icon { flex: none; margin-top: 2px; }
.refdetail__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.refdetail__meta dt { font-size: var(--fs-caption); color: var(--color-text-light); }
.refdetail__meta dd { font-weight: 700; margin-top: 3px; }
.refdetail__subtitle { margin-top: var(--sp-5); font-size: .95rem; }
.refdetail__hint {
  display: flex;
  gap: 8px;
  margin-top: var(--sp-4);
  font-size: .88rem;
  color: var(--color-text-light);
}
.refdetail__hint .icon { flex: none; margin-top: 2px; }
.refdetail__demo { margin-top: var(--sp-4); min-height: 44px; font-size: .64rem; }

/* --- referral timeline ---------------------------------------------------- */
.reftimeline { list-style: none; margin-top: var(--sp-3); }
.reftimeline__item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 var(--sp-4) 0;
}
.reftimeline__item::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.reftimeline__item:last-child::before { display: none; }
.reftimeline__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-light);
}
.reftimeline__body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.reftimeline__title { font-weight: 700; font-size: .92rem; }
.reftimeline__meta { font-size: var(--fs-caption); color: var(--color-text-light); }

.reftimeline__item.is-done .reftimeline__mark {
  border-color: #0C7A45;
  background: #E7F7EE;
  color: #0A5C34;
}
.reftimeline__item.is-current .reftimeline__mark {
  border-color: var(--color-primary);
  background: var(--color-secondary);
  color: var(--color-primary);
}
.reftimeline__item.is-current .reftimeline__title { font-weight: 900; }
.reftimeline__item.is-todo .reftimeline__title,
.reftimeline__item.is-todo .reftimeline__meta { color: var(--color-text-light); }
.reftimeline__item.is-todo .reftimeline__mark { border-style: dashed; }

/* --- referral coupon ------------------------------------------------------ */
.refcoupon {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 2px dashed var(--color-primary);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
}
.refcoupon__title { font-size: .95rem; }
.refcoupon__code { margin-top: 8px; }
.refcoupon__code code {
  font-family: var(--font-alt);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.refcoupon__value { font-weight: 800; margin-top: 4px; }
.refcoupon__min,
.refcoupon__valid { font-size: var(--fs-caption); color: var(--color-text-light); margin-top: 3px; }
.refcoupon .btn { margin-top: var(--sp-3); }
.refcoupon__used {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-size: .88rem;
  color: var(--color-text-light);
}

/* Table layout only where there is room for five columns. */
@media (min-width: 800px) {
  .reflist__head {
    display: grid;
    grid-template-columns: var(--reflist-cols);
    gap: var(--sp-3);
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--fs-caption);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-text-light);
  }
  .refitem__grid {
    grid-template-columns: var(--reflist-cols);
    align-items: center;
    gap: var(--sp-3);
  }
  /* Visually only — the label is still announced with its value. */
  .refitem__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .refitem__cell { display: block; }
  .refitem__open { width: auto; }
  .refitem__open-long { display: none; }
  .refitem__open-short { display: inline; }
}

/* --- header notification -------------------------------------------------- */
.counter--bell { background: var(--color-alert); color: #fff; }

.accnav__new {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--color-alert);
  color: #fff;
  font-size: .58rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (forced-colors: active) {
  .referral,
.coupon,
.refdlg__friend { border: 1px solid ButtonBorder !important; }
  .counter--bell, .accnav__new { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ==========================================================================
   FILTER CONTROLS — one radius for the whole panel
   The outer panel was rounded but its inner blocks were not, so the filters
   read as square boxes inside a rounded card. Everything now derives from the
   two semantic radius tokens.
   ========================================================================== */
.cfilters .field__input,
.cfilters select,
.fprice__field .field__input,
.catsort__select { border-radius: var(--radius-control); }

/* Option rows read as cards; the radius lives with the rest of `.fcheck`. */

/* Collapsible groups and their headers */
.ffilter__head { border-radius: var(--radius-control); }
.ffieldset { border-radius: var(--radius-control); }

/* Active filter chips and the clear-all button — the chip's own radius lives
   with the component in section 3. */
.cfilters__clear { border-radius: var(--radius-control); }
.catmain__filters { border-radius: var(--radius-control); }

/* Focus rings must not be clipped by the scrolling panel. */
.cfilters .fcheck:focus-within,
.cfilters .ffilter__head:focus-visible { outline-offset: -2px; }

@media (forced-colors: active) {
  .fcheck, .ffilter__head { border: 1px solid ButtonBorder !important; }
}

/* --- Sticky purchase bar: prices and state -------------------------------- */
.pdsticky__prices { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pdsticky__now { font-size: .95rem; font-weight: 900; letter-spacing: -.01em; }
.pdsticky__was {
  font-size: .78rem;
  color: var(--color-text-light);
  text-decoration: line-through;
}
.pdsticky__off {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--color-secondary);
  color: var(--color-primary);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .04em;
}

/* Active compare / wishlist: a filled icon AND a filled chip, so the state is
   never carried by colour alone. */
.pdsticky__icon.is-active {
  background: var(--color-primary);
  border-color: var(--color-secondary);
}
.pdsticky__icon.is-active .icon { fill: var(--color-secondary); stroke: var(--color-secondary); }
.pdsticky__icon:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* The bar sits at the bottom of the screen, so its tooltips open upward. */
.tt--top::after {
  bottom: calc(100% + 10px);
  top: auto;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
}
.tt--top::before {
  bottom: calc(100% + 4px);
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: #151817;
  border-bottom-color: transparent;
}
@media (hover: none) { .tt--top::after, .tt--top::before { display: none; } }

@media (max-width: 480px) {
  .pdsticky__was, .pdsticky__off { display: none; }   /* keep the CTA reachable */
}

/* ==========================================================================
   FOOTER CTA HIERARCHY
   The footer had four equally loud calls to action. Exactly one is primary
   now — the referral invite — and the rest step back to an outline treatment
   on the dark surface.
   ========================================================================== */
.btn--footer-ghost {
  background: transparent;
  border: 2px solid var(--footer-border);
  color: var(--footer-text);
}
.btn--footer-ghost:hover,
.btn--footer-ghost:focus-visible {
  border-color: var(--footer-link-hover);
  color: var(--footer-link-hover);
  background: rgba(182, 255, 46, .10);
}
.btn--footer-ghost:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: 2px; }

/* The newsletter submit keeps its pill shape but loses the filled neon. */
.newsletter__btn.btn--footer-ghost {
  background: transparent;
  color: var(--footer-text);
  border: 2px solid var(--footer-border);
}
.newsletter__btn.btn--footer-ghost:hover,
.newsletter__btn.btn--footer-ghost:focus-visible {
  background: rgba(182, 255, 46, .12);
  border-color: var(--footer-link-hover);
  color: var(--footer-link-hover);
}

/* The referral CTA stays the one filled neon button in the footer. */
.referral__cta { font-weight: 900; }

/* Attribution — a normal, visible link, never a hidden backlink. */
.footer__credit { white-space: nowrap; }
.footer__credit a {
  color: var(--footer-link);
  text-decoration: underline;
  font-weight: 700;
}
.footer__credit a:hover,
.footer__credit a:focus-visible { color: var(--footer-link-hover); }

@media (forced-colors: active) {
  .btn--footer-ghost { border: 1px solid ButtonBorder !important; }
}

/* ==========================================================================
   ARTICLE CARDS (product "Raksti" tab) + article page
   ========================================================================== */
.artcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.artcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.artcard__art {
  display: block;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  padding: 10px;
}
.artcard__art svg { width: 100%; height: 100%; }
.artcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1 1 auto; }
.artcard__cat {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--c-page);
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.artcard__title { font-size: 1rem; font-weight: 800; line-height: 1.35; }
.artcard__title a { color: inherit; text-decoration: none; }
.artcard__title a:hover { color: var(--c-neon-hover); text-decoration: underline; }
.artcard__text { font-size: var(--fs-caption); line-height: 1.6; color: var(--color-text-light); flex: 1 1 auto; }
.artcard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--fs-caption);
}
.artcard__date { color: var(--color-text-light); }
.artcard__read { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.artcard:hover .artcard__read { color: var(--c-neon-hover); }

.empty--inline { padding: var(--sp-6) var(--sp-4); }

/* --- article page --------------------------------------------------------- */
.artpage { max-width: 900px; }
.artpage__cat {
  font-size: var(--fs-caption);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-primary-text);
}
.artpage__title {
  margin-top: 8px;
  font-size: var(--fs-h1);
  font-weight: 900;
  letter-spacing: -.02em;
}
.artpage__date { margin-top: 8px; font-size: var(--fs-caption); color: var(--color-text-light); }
.artpage__art {
  margin: var(--sp-5) 0;
  aspect-ratio: 16 / 7;
  padding: 18px;
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
  border: 1px solid var(--color-border);
}
.artpage__art svg { width: 100%; height: 100%; }
.artpage__lead { font-size: 1.05rem; font-weight: 600; }
.artpage__body .infopage__title { margin-top: var(--sp-5); }
.artpage__products { margin-top: var(--sp-8); }
.artpage__products .sechead__title { margin-bottom: var(--sp-4); }

@media (max-width: 600px) {
  .artcards { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .artcard, .artpage__art { border: 1px solid ButtonBorder !important; }
}

/* Referral form on its own page: lighter surface than the dark footer. */
.referral--page {
  background: var(--color-surface);
  border-color: var(--color-border);
  margin: var(--sp-5) 0;
}
.referral--page .referral__title,
.referral--page .referral__label { color: var(--color-text); }
.referral--page .referral__text { color: var(--color-text-light); }
.referral--page .referral__input { border-color: var(--color-border-strong); }
.referral--page .referral__error { color: var(--color-alert); }
.referral--page .referral__state {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-text);
}
.referral--page .referral__state strong { color: var(--color-success-dark); }

.coupon__min { font-size: var(--fs-caption); color: var(--color-text-light); }
.coupon__min strong { color: var(--color-text); }

/* ==========================================================================
   CATEGORY SIDEBAR NAVIGATION (listing view)
   First block in the filter column, visually separated from the filters.
   ========================================================================== */
.catside {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}
.catside[hidden] { display: none; }
.catside__title {
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 8px;
}
.catside__parent {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  font-size: .84rem;
  color: var(--color-text-light);
  text-decoration: none;
}
.catside__parent:hover { color: var(--c-neon-hover); text-decoration: underline; }
.catside__parent:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.catside__current { font-size: .95rem; font-weight: 900; margin: 2px 0 10px; }
.catside__listlabel { font-size: var(--fs-caption); color: var(--color-text-light); margin-bottom: 4px; }
.catside__list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.catside__link {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 9px;
  border-left: 3px solid transparent;
  border-radius: var(--r-sm);
  font-size: .86rem;
  color: var(--color-text);
  text-decoration: none;
}
.catside__link:hover { background: var(--c-page); color: var(--c-neon-hover); }
.catside__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
/* The current category is marked by a bar, a tick and a weight change. */
.catside__link.is-current {
  background: var(--c-page);
  border-left-color: var(--color-primary-dark);
  font-weight: 800;
}
.catside__tick { flex: none; }
.catside__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.catside__count { font-size: var(--fs-caption); color: var(--color-text-light); }
.catside__more {
  margin-top: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  background: none;
  color: var(--color-primary-dark);
  font-family: var(--font-menu);
  font-size: .8rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}
.catside__more:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

/* ==========================================================================
   CATEGORY LANDING (mode A)
   A grid, never a horizontal carousel: twenty subcategories wrap onto more
   rows instead of hiding behind arrows.
   ========================================================================== */
.catland__lead { max-width: 70ch; color: var(--color-text-light); line-height: 1.7; margin-bottom: var(--sp-5); }
.catland__title { font-size: 1.2rem; margin: var(--sp-6) 0 var(--sp-3); }
.catland__group { margin-bottom: var(--sp-5); }
.catland__grouptitle {
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 10px;
}
.catcards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-3);
}
.catcard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  min-height: 76px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
}
.catcard:hover { border-color: var(--color-primary-dark); background: var(--c-page); }
.catcard:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.catcard__art {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  background: var(--c-page);
  color: var(--color-primary-dark);
}
.catcard__name { font-size: .92rem; font-weight: 800; overflow-wrap: anywhere; }
.catcard__count { grid-column: 2; font-size: var(--fs-caption); color: var(--color-text-light); }
.catcard__go { grid-row: 1 / 3; grid-column: 3; opacity: .4; }
.catcard:hover .catcard__go { opacity: 1; }

@media (max-width: 900px) {
  .catcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 430px) /* was 420px: .promo__row/.loyuse__row/.catcards — 10px apart, identical intent */ {
  .catcards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .catcard { min-height: 68px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .catcard { transition: none; } }

@media (forced-colors: active) {
  .catcard, .catside__link.is-current { border: 1px solid ButtonBorder !important; }
  .catside__link.is-current { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* A third category level inside the home panel / drawer accordion. */

/* ==========================================================================
   HOME PAGE SEO / ABOUT
   Editorial copy, not a banner: page background, a rule above it, and a
   reading measure so a line never runs the full width of a 2560px screen.
   ========================================================================== */
.homeseo {
  border-top: 1px solid var(--color-border);
  padding-top: var(--sp-8);
}
/* FULL container width, deliberately. Two caps used to fight the container
   here: `max-width: 1200px` on this wrapper and `max-width: 82ch` on the
   paragraphs. The paragraph cap is the one that showed — 82ch is roughly
   660px, so the text stopped near the middle of a 1440px container and the
   right half of the section was empty. Both are gone: heading, paragraphs,
   links and the LASĪT TĀLĀK button share one full-width wrapper, so collapsed
   and expanded states measure the same. Long lines are accepted in this
   section; the requirement is the container width. */
.homeseo__inner { width: 100%; max-width: none; }
.homeseo__title { font-size: clamp(20px, 2.2vw, 27px); margin-bottom: var(--sp-4); }
.homeseo__inner p {
  margin-bottom: var(--sp-4);
  line-height: 1.75;
  color: var(--color-text);
}
.homeseo__inner h3 {
  font-size: clamp(16px, 1.6vw, 19px);
  margin: var(--sp-6) 0 var(--sp-2);
}
.homeseo__inner a { color: var(--color-text); text-decoration: underline; }
.homeseo__inner a:hover { color: var(--c-neon-hover); }
.homeseo__inner a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.homeseo__more[hidden] { display: none; }

.homeseo__toggle { min-height: 44px; margin-top: var(--sp-3); }
.homeseo__chev { transition: transform var(--t-fast); }
.homeseo__toggle[aria-expanded="true"] .homeseo__chev { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) { .homeseo__chev { transition: none; } }
html[data-a11y-motion="reduced"] .homeseo__chev { transition: none !important; }

@media (max-width: 600px) {
  .homeseo { padding-top: var(--sp-6); }
}

/* ==========================================================================
   NEWS LISTING (news.html)
   ========================================================================== */
.newsfilter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.newsfilter__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-family: var(--font-menu);
  font-size: .78rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
}
.newsfilter__btn:hover { border-color: var(--color-primary-dark); }
.newsfilter__btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
/* Selected state: a tick, a weight change and a fill — not colour alone. */
.newsfilter__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-secondary);
  font-weight: 900;
}

.newsgrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}
.newscard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}
.newscard:hover { border-color: var(--color-primary-dark); }
.newscard__media {
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%);
}
.newscard__media svg { width: 100%; height: 100%; }
.newscard__body { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-4); flex: 1 1 auto; }
.newscard__meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--color-text-light); }
.newscard__cat { font-weight: 800; color: var(--color-primary-text); }
/* Clamped the same way the product card is, and for the same reason: without
   it a two-word title and a four-line one give two different card heights, and
   a row of news cards loses its rhythm. `min-height` reserves the clamped
   space so short and long titles occupy the same box. */
.newscard__title {
  font-size: 1rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  overflow-wrap: anywhere;
}
.newscard__title a { color: var(--color-heading); text-decoration: none; }
.newscard__title a:hover { color: var(--c-neon-hover); text-decoration: underline; }
.newscard__title a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.newscard__text {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--color-text-light);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newscard__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: .8rem;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: none;
}
.newscard__link:hover { color: var(--c-neon-hover); text-decoration: underline; }
.newscard__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 1023px) { .newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .newsgrid { grid-template-columns: minmax(0, 1fr); } }
@media (forced-colors: active) {
  .newscard, .newsfilter__btn { border: 1px solid ButtonBorder !important; }
  .newsfilter__btn.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ==========================================================================
   ARTICLE DETAIL
   ========================================================================== */
.artpage__meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-caption); color: var(--color-text-light); }
.artpage__body { max-width: 900px; }
.artpage__body p { line-height: 1.75; margin-bottom: var(--sp-4); }
.artpage__body h2 { font-size: clamp(18px, 2vw, 23px); margin: var(--sp-6) 0 var(--sp-3); }
.artpage__body h3 { font-size: clamp(16px, 1.7vw, 19px); margin: var(--sp-5) 0 var(--sp-2); }
.artlist { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--sp-4) 20px; }
.artlist li { line-height: 1.7; }

.artcallout {
  display: flex;
  gap: 10px;
  margin: var(--sp-4) 0;
  padding: 14px 16px;
  border-left: 3px solid var(--color-primary-dark);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  background: var(--color-surface-alt);
  line-height: 1.65;
}
.artcallout .icon { flex: none; margin-top: 3px; }
.artquote { margin: var(--sp-5) 0; padding-left: var(--sp-4); border-left: 3px solid var(--color-border); }
.artquote p { font-family: var(--font-alt); font-size: 1.05rem; }
.artquote cite { font-size: var(--fs-caption); color: var(--color-text-light); }

.artblock { margin: var(--sp-6) 0; }
.artblock__title { font-size: 1rem; margin-bottom: var(--sp-3); }
.artblock__caption { font-size: var(--fs-caption); color: var(--color-text-light); margin-top: 8px; }
.pgrid--article { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --- gallery -------------------------------------------------------------- */
.artgallery__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.artgallery__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.artgallery__item:hover { border-color: var(--color-primary-dark); }
.artgallery__item:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.artgallery__art { display: block; aspect-ratio: 4 / 3; background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%); }
.artgallery__art svg { width: 100%; height: 100%; }
.artgallery__caption { padding: 0 12px 12px; font-size: var(--fs-caption); color: var(--color-text-light); }

.modal__dialog--gallery { width: min(760px, 100%); max-width: calc(100vw - 24px); padding: var(--sp-5); }
.gallery__stage { display: grid; place-items: center; min-height: 240px; background: var(--c-page); border-radius: var(--radius-card); }
.gallery__stage svg { width: min(100%, 420px); height: auto; }
.gallery__caption { margin-top: var(--sp-3); font-size: .92rem; }
.gallery__counter { font-size: var(--fs-caption); color: var(--color-text-light); }
.gallery__nav { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); }
.gallery__nav .btn { min-height: 44px; }

/* --- video ---------------------------------------------------------------- */
.artvideo__frame { border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; }
.artvideo__art { display: block; aspect-ratio: 16 / 9; background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%); }
.artvideo__art svg { width: 100%; height: 100%; }
.artvideo__note { display: flex; gap: 8px; padding: 12px 14px; font-size: var(--fs-caption); color: var(--color-text-light); }
.artvideo__note .icon { flex: none; margin-top: 2px; }

/* --- attachments ---------------------------------------------------------- */
.artfiles__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.artfile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  flex-wrap: wrap;
}
.artfile__icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-control); background: var(--color-surface-alt); }
.artfile__body { display: flex; flex-direction: column; flex: 1 1 180px; min-width: 0; }
.artfile__name { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.artfile__meta { font-size: var(--fs-caption); color: var(--color-text-light); }
.artfile__cta { min-height: 44px; }
.artfiles__note { display: flex; gap: 8px; margin-top: 10px; font-size: var(--fs-caption); color: var(--color-text-light); }
.artfiles__note .icon { flex: none; margin-top: 2px; }

/* --- share ---------------------------------------------------------------- */
.artshare { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: var(--sp-4) 0; }
.artshare__label { font-size: var(--fs-caption); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); }
.artshare--bottom {
  margin-top: var(--sp-8);
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
}
.artshare--bottom .artshare__label { font-size: .8rem; }
/* The row wraps; it never makes the page scroll sideways. */
.artshare .share__row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.artpage__related { margin-top: var(--sp-8); }

@media (max-width: 600px) {
  .artshare { gap: 8px; }
  .gallery__nav { flex-direction: column; }
}
@media (forced-colors: active) {
  .artfile, .artgallery__item, .artvideo__frame, .artshare--bottom { border: 1px solid ButtonBorder !important; }
}
.artcatlink a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; }

/* ==========================================================================
   SMART SEARCH PANEL
   The search input is a combobox; this is its listbox. It sits in the header,
   above the page and the catalogue menu, and below every dialog.
   ========================================================================== */
/* Above the header and the catalogue menu, below every dialog. */
:root { --z-search: 1050; }

.search { position: relative; }
.search__clear {
  position: absolute;
  right: 108px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-text-light);
  cursor: pointer;
}
.search__clear:hover { background: var(--c-page); color: var(--color-text); }
.search__clear:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.search__clear[hidden] { display: none; }

.searchpanel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: var(--z-search);
  max-height: min(72vh, 640px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-card);
  box-shadow: var(--sh-lg);
}
.searchpanel[hidden] { display: none; }
.searchpanel__close { display: none; }
.searchpanel__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.searchpanel__cols--empty { grid-template-columns: minmax(0, 1fr); }
/* The panel has a large radius, so nothing may start at the edge: 24px top and
   sides, 28px at the foot, which keeps every heading, chip and product row out
   of the rounded corners. */
.searchpanel__col { padding: 24px 28px 28px; }
.searchpanel__col--products { border-left: 1px solid var(--c-border); background: var(--c-page); }
/* The single-column empty state gets the same breathing room. */
.searchpanel__cols--empty .searchpanel__col { padding: 24px 28px 28px; }
/* Rows and chips are inset from the column padding, never flush to it. */
.searchpanel .sopt { margin-inline: -6px; }
.searchpanel .schips { padding-block: 2px; }

.sgroup { margin-bottom: var(--sp-4); }
.sgroup:last-child { margin-bottom: 0; }
.sgroup__title {
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 8px;
}
.sgroup__list { display: flex; flex-direction: column; gap: 2px; }

.sopt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  color: var(--color-text);
  text-decoration: none;
}
.sopt:hover { background: var(--c-page); }
.sopt:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
/* The keyboard selection is a fill AND a bar, never colour alone. */
.sopt.is-active { background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-primary-dark); }
.sopt__icon { display: grid; place-items: center; flex: none; color: var(--color-text-light); }
.sopt__art { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: var(--r-sm); background: linear-gradient(160deg, var(--c-art-hi) 0%, var(--c-art-lo) 100%); overflow: hidden; }
.sopt__art svg { width: 100%; height: 100%; }
.sopt__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.sopt__label { font-size: .9rem; overflow-wrap: anywhere; }
.sopt--product .sopt__label { font-weight: 700; }
.sopt__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: var(--fs-caption); color: var(--color-text-light); }
.sopt__price { font-weight: 800; color: var(--color-text); }
.sopt__old { text-decoration: line-through; }
.sopt__off { background: var(--color-secondary); color: var(--color-primary); padding: 1px 6px; border-radius: var(--r-pill); font-weight: 800; }
.sopt__stock--in   { color: #0A5C34; }
.sopt__stock--low  { color: #6B4600; }
.sopt__stock--out  { color: #7A0000; }
.sopt__badge { flex: none; padding: 2px 8px; border-radius: var(--r-pill); background: var(--color-surface-alt); border: 1px solid var(--color-border); font-size: var(--fs-micro); font-weight: 800; }

.schips { display: flex; flex-wrap: wrap; gap: 8px; }
.schip {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.schip:hover { border-color: var(--color-primary-dark); background: var(--c-page); }
.schip:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.srecent { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.srecent__item { display: flex; align-items: center; gap: 4px; }
.srecent__go {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 40px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--color-text);
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}
.srecent__go:hover { background: var(--c-page); }
.srecent__go:focus-visible, .srecent__x:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.srecent__x { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--color-text-light); cursor: pointer; }
.srecent__x:hover { background: var(--c-page); color: var(--color-alert); }
.sclear { margin-top: 8px; min-height: 40px; padding: 8px 0; border: 0; background: none; color: var(--color-primary-dark); font-weight: 800; font-size: .82rem; text-decoration: underline; cursor: pointer; }
.sclear:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.scorrect { margin-bottom: var(--sp-3); font-size: .92rem; }
.scorrect__btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 900; color: var(--color-primary-dark); text-decoration: underline; cursor: pointer; }
.scorrect__btn:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.szero { font-size: 1rem; margin-bottom: 6px; }
.szero__hint { font-size: .9rem; color: var(--color-text-light); margin-bottom: var(--sp-3); }

.sall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  border-top: 1px solid var(--c-border);
  background: var(--color-primary);
  color: var(--color-secondary);
  font-family: var(--font-menu);
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .05em;
  text-decoration: none;
}
.sall:hover { background: var(--c-neon-hover); }
.sall:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -3px; }

/* Mobile: a near full-screen overlay instead of a squeezed dropdown. */
@media (max-width: 900px) {
  body.search-open { overflow: hidden; }
  .searchpanel {
    position: fixed;
    inset: var(--sticky-header-height, 76px) 0 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding-bottom: var(--sp-8);
  }
  .searchpanel__close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: var(--sp-3) var(--sp-3) 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    cursor: pointer;
  }
  .searchpanel__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
  .searchpanel__cols { grid-template-columns: minmax(0, 1fr); }
  .searchpanel__col,
  .searchpanel__cols--empty .searchpanel__col { padding: 18px 20px 20px; }
  .searchpanel__col--products { border-left: 0; border-top: 1px solid var(--c-border); }
  .search__clear { right: 12px; }
}

@media (forced-colors: active) {
  .searchpanel, .schip, .sopt__badge { border: 1px solid ButtonBorder !important; }
  .sopt.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Search results page */
.searchcount { font-size: .92rem; color: var(--color-text-light); margin-bottom: var(--sp-4); }
.scorrect--page { margin-bottom: var(--sp-3); font-size: 1rem; }
.scorrect__note { color: var(--color-text-light); font-size: .9rem; }
#searchZeroTerms { margin-top: var(--sp-4); justify-content: center; }
a.schip { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text); }

/* ==========================================================================
   HOME CATALOGUE NAVIGATION
   `Katalogs` is the block's name and its button. Every rail row opens its own
   branch into the SAME flyout, so moving between categories swaps content
   instead of closing and reopening.
   ========================================================================== */
.catpanel__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 0;
  border-radius: calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0;
  background: var(--c-dark);
  color: var(--color-primary);
  font-family: var(--font-menu);
  cursor: pointer;
  text-align: left;
}
.catpanel__head:hover { background: var(--color-secondary-light); }
.catpanel__head:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-dark); outline-offset: -4px; }
.catpanel__title { flex: 1 1 auto; font-size: .82rem; font-weight: 900; letter-spacing: .1em; }
.catpanel__chev { flex: none; transition: transform var(--t-fast); transform: rotate(90deg); }
/* Open state: the chevron flips AND the bar lightens — not colour alone. */
.catpanel.is-open .catpanel__head { background: var(--color-secondary-light); }
.catpanel.is-open .catpanel__chev { transform: rotate(-90deg); }

/* One flyout for the whole rail. */
.catflyout {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  width: min(880px, calc(100vw - 360px));
  /* NO ceiling and NO scrolling by default. `homeCatalogFit()` raises the
     panel first and only writes a ceiling when raising is not enough, so a
     panel that fits has nothing that could produce a scrollbar. */
  z-index: var(--z-mega);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  background: var(--c-card);
  box-shadow: var(--sh-lg);
}
.catflyout[hidden] { display: none; }

/* The anchor is a position reference only — no box, no hit area. */
.catflyout-anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* STICKY mode. Once the rail's top line has scrolled behind the sticky header
   the panel pins to the viewport instead of the page, so it stays reachable
   without the visitor scrolling back up.
   `left` and `width` are set inline by JS: a fixed box has no percentage
   parent to measure, and `left: calc(100% + 12px)` would resolve against the
   viewport. Everything else is declarative.
   There is deliberately NO transition on this class — a moving panel under a
   moving pointer is what causes the bounce this replaces, and it also means
   reduced-motion needs no special case. */
.catflyout.is-stuck {
  position: fixed;
  top: calc(var(--sticky-header-height, 76px) + 12px);
}
/* The last resort: the panel is taller than the band between the header and
   the fold, so no position can show all of it. The ceiling itself is measured
   and written by `homeCatalogFit()`. */
.catflyout.has-scroll {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
/* Bridges the 12px gap between the rail and the panel so the pointer never
   crosses dead ground on its way over.
   It used to be `.catflyout::before` at `left: -16px` — inside the very
   element it had to reach outside of, and the panel had `overflow: auto`, so
   the browser clipped the bridge away. It never worked. The rail has
   `overflow: visible`, so the bridge lives there instead. */
.catpanel.is-open::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 14px;
  z-index: var(--z-mega);
}

.catflyout__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-page);
}
.catflyout__title { font-size: .95rem; }
.catflyout__all, .catflyout__branchall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: underline;
}
.catflyout__all:hover, .catflyout__branchall:hover { color: var(--c-neon-hover); }
.catflyout__all:focus-visible,
.catflyout__branchall:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }

.catflyout__split { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
.catflyout__roots { list-style: none; padding: 8px; border-right: 1px solid var(--c-border); background: var(--c-page); }
.catflyout__root {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border-left: 3px solid transparent;
  border-radius: var(--radius-control);
  font-size: .86rem;
  color: var(--color-text);
  text-decoration: none;
}
.catflyout__root:hover { background: var(--c-card); }
.catflyout__root:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.catflyout__root.is-active { background: var(--c-card); border-left-color: var(--color-primary-dark); font-weight: 800; }
.catflyout__root span:first-of-type { flex: 1 1 auto; min-width: 0; }

/* Compact by intent: every pixel here is a pixel of catalogue that does
   not fit on screen. */
.catflyout__branch, .catflyout__single { padding: var(--sp-3) var(--sp-4); }
.catflyout__branchhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.catflyout__branchtitle { font-size: 1rem; }
.catflyout__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3) var(--sp-5); }
.catflyout__grouptitle {
  font-size: var(--fs-micro);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 6px;
}
.catflyout__list, .catflyout__sub { list-style: none; }
.catflyout__sub { margin: 1px 0 4px 10px; padding-left: 8px; border-left: 1px solid var(--c-border); }
.catflyout__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  padding: 5px 6px;
  border-radius: var(--r-sm);
  font-size: .86rem;
  color: var(--color-text);
  text-decoration: none;
}
.catflyout__link:hover { background: var(--c-page); color: var(--c-neon-hover); }
.catflyout__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.catflyout__link--sub { font-size: .8rem; color: var(--color-text-light); }
.catflyout__count { font-size: var(--fs-caption); color: var(--color-text-light); }

/* A single small promo. Navigation stays the point of the panel. */
.catflyout__promo {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}
.catflyout__promo:hover { border-color: var(--color-primary-dark); }
.catflyout__promo:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 2px; }
.catflyout__promoart { grid-row: 1 / 4; display: grid; place-items: center; }
.catflyout__promoart svg { width: 100%; height: auto; }
.catflyout__promokicker { font-size: var(--fs-micro); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); }
.catflyout__promoname { font-weight: 800; font-size: .9rem; }
.catflyout__promocta { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 900; }

/* Below the desktop layout the drawer is the catalogue. */
@media (max-width: 1100px) {
  .catflyout { display: none; }
}
@media (prefers-reduced-motion: reduce) { .catpanel__chev { transition: none; } }
html[data-a11y-motion="reduced"] .catpanel__chev { transition: none !important; }

@media (forced-colors: active) {
  .catflyout, .catflyout__promo { border: 1px solid ButtonBorder !important; }
  .catflyout__root.is-active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* ==========================================================================
   MOBILE CATALOGUE DRAWER — drill-down
   One level at a time, from the same tree as the desktop menu.
   ========================================================================== */
.catdrill__head {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.catdrill__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 44px;
  padding: 8px 10px 8px 4px;
  border: 0;
  background: none;
  color: var(--color-text);
  font-family: var(--font-menu);
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}
.catdrill__back:focus-visible,
.catdrill__all:focus-visible,
.catdrill__into:focus-visible,
.catdrill__link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: -2px; }
.catdrill__title { font-size: .95rem; font-weight: 900; }
.catdrill__title--root {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.catdrill__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: .82rem;
  font-weight: 800;
  color: var(--color-text);
  text-decoration: underline;
}

.catdrill__list { list-style: none; }
.catdrill__item { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border); }
.catdrill__item:last-child { border-bottom: 0; }
.catdrill__link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  color: var(--color-text);
  text-decoration: none;
}
.catdrill__link:hover { background: var(--c-page); }
.catdrill__icon { display: grid; place-items: center; flex: none; color: var(--color-text-light); }
.catdrill__name { flex: 1 1 auto; min-width: 0; font-size: .92rem; overflow-wrap: anywhere; }
.catdrill__count { font-size: var(--fs-caption); color: var(--color-text-light); }
/* A separate control, so the row's link is never hijacked by the disclosure. */
.catdrill__into {
  display: grid;
  place-items: center;
  width: 52px;
  flex: none;
  border: 0;
  border-left: 1px solid var(--color-border);
  background: none;
  color: var(--color-text-light);
  cursor: pointer;
}
.catdrill__into:hover { background: var(--c-page); color: var(--color-text); }

@media (forced-colors: active) {
  .catdrill__item, .catdrill__into { border-color: ButtonBorder !important; }
}