/* ==========================================================================
   MARVEL BUY — site.css
   Dark, modern, playful. Vanilla CSS. No framework, no CDN, no build step.
   Single source of truth for every colour, size and motion value.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · TOKENS
   Hue anchor H ≈ 262° (violet ink) with an acid-lime counter-accent.
   Every value below was contrast-checked numerically — see ARCHITECTURE.md.
   -------------------------------------------------------------------------- */
:root{
  /* Black · red · white. One hue in three weights — a second hue is what makes
     a palette look assembled rather than designed. */
  --bg:#09080B;            /* near-black, not #000: pure black kills every shadow */
  --surface:#131116;
  --elevated:#1C1920;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);

  /* red — hue taken from the mark (#753238 ring, #480C17 eyes), lifted in
     lightness until it carries a CTA. Same family, different job. */
  --accent:#FF2A3D;        /* the red — CTA, active state, the accent word */
  --accent-ink:#08080A;    /* text ON red. White on red FAILS AA at any red
                              bright enough to read on black — 3.7:1. Black
                              on red is 5.4:1, and it hits harder. */
  --accent-2:#FF6B78;      /* lighter red, safe as text on dark */
  --glow:#5E1421;          /* the mark's deep red — ambient washes only, never text */

  /* text */
  --text:#FFFFFF;
  --muted:#A8A4AD;

  /* state — deliberately NOT red. With a red brand, a red error is
     indistinguishable from a call to action. Amber carries the warning. */
  --danger:#FFB020;
  --ok:#4ADE80;

  /* type — 2 families max */
  --f-stmt:"Syne","Archivo","Inter Fallback",ui-sans-serif,system-ui,sans-serif;
  --f-display:"Archivo","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter","Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Metadata — counts, sizes, IDs, prices — sits in tabular monospace. It is
     what makes an index feel like an index rather than a landing page. */
  /* The product photos carry a transparent ground, so the card decides the
     colour. Black under dark, white under light — one image set, both themes. */
  --photo-bg:#000;
  --f-mono:"Space Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* fluid scale — clamp(), no breakpoint jumps */
  --fs-h1:clamp(1.85rem,1.3rem + 2.1vw,2.9rem);
  --fs-h2:clamp(1.45rem,1.1rem + 1.7vw,2.3rem);
  --fs-body:clamp(1rem,.97rem + .16vw,1.0625rem);
  /* 14px is the floor everywhere. Micro-labels get caps + tracking instead of
     shrinking — they read larger than their size, without costing legibility. */
  --fs-sm:.9375rem;        /* 15px */
  --fs-xs:.875rem;         /* 14px — the smallest type on the site */
  --lh-tight:1.04;
  --lh-body:1.65;

  /* space — 8px scale */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-6:3rem; --s-8:4rem;

  /* shape + motion */
  --r-xs:4px; --r-sm:8px; --r:12px; --r-lg:18px; --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s; --t:.24s;
  --shadow:0 18px 40px -22px rgba(0,0,0,.9);

  /* layout */
  --maxw:1560px;
  --header-h:60px; --nav-h:48px;
  --rail-w:264px;
  --gutter:clamp(1rem,3vw,2.5rem);
}

/* Light theme — same tokens, inverted roles. Toggled via [data-theme]. */
/* Light theme flips which side needs help: on white the red must darken until
   white text on it clears 4.5:1. Same hue, different weight. */
[data-theme="light"]{
  --photo-bg:#FFFFFF;
  /* amber has the same problem as red: the shade that reads on black vanishes
     on white. #8A5A00 keeps the hue and clears 5.7:1 on this background. */
  --danger:#8A5A00;
  --bg:#FBFAFB;
  --surface:#FFFFFF;
  --elevated:#F2F0F2;
  --line:rgba(14,13,16,.10);
  --line-strong:rgba(14,13,16,.18);
  --accent:#C8102E;
  --accent-ink:#FFFFFF;
  --accent-2:#8E0C21;
  --glow:#E8536A;
  --text:#0E0D10;
  --muted:#5A575E;
  --shadow:0 18px 40px -26px rgba(14,13,16,.30);
}

/* --------------------------------------------------------------------------
   2 · FONTS — self-hosted. Never Google CDN (visitor IP → US = GDPR problem).
   Drop the .woff2 files into /fonts/ and these rules pick them up.
   Until then the metric-matched fallback stack above renders identically-ish.
   -------------------------------------------------------------------------- */
/* Latin + Latin-Extended (Slovak/Czech/Polish diacritics live in U+0100–024F). */
@font-face{font-family:"Inter";src:url("/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20A0-20BF,U+2212,U+2215}
@font-face{font-family:"Inter";src:url("/fonts/inter-latinext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Syne";src:url("/fonts/syne-latin.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20A0-20BF,U+2212,U+2215}
@font-face{font-family:"Syne";src:url("/fonts/syne-latinext.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20A0-20BF,U+2212,U+2215}
@font-face{font-family:"Archivo";src:url("/fonts/archivo-latinext.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";src:url("/fonts/spacemono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20A0-20BF,U+2212,U+2215}
@font-face{font-family:"Space Mono";src:url("/fonts/spacemono-400-latinext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Space Mono";src:url("/fonts/spacemono-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20A0-20BF,U+2212,U+2215}
@font-face{font-family:"Space Mono";src:url("/fonts/spacemono-700-latinext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched fallback so swapping in the real font causes ~0 CLS */
@font-face{
  font-family:"Inter Fallback"; src:local("Arial");
  ascent-override:90%; descent-override:22.4%; line-gap-override:0%; size-adjust:107%;
}

/* --------------------------------------------------------------------------
   3 · RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{
  scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Whatever the browser scrolls to — a focused control, an anchor, a card
     brought into view — has to clear the sticky chrome at both ends, or it
     lands under the header or behind the tab bar and cannot be tapped. */
  scroll-padding-top:calc(var(--header-h) + var(--nav-h) + 16px);
  scroll-padding-bottom:calc(56px + env(safe-area-inset-bottom,0px) + 16px)
}
@media (min-width:1024px){html{scroll-padding-bottom:16px}}
/* Kills the legacy 300ms tap delay without disabling pinch-zoom. */
a,button,[role="button"],input,select,label,summary{touch-action:manipulation}
/* Android paints a grey box over anything tapped. The site has its own press
   states, so the default one is noise. */
*{-webkit-tap-highlight-color:transparent}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100dvh;                       /* dvh, not vh — mobile bar jump */
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-display);line-height:var(--lh-tight);letter-spacing:-.02em;margin:0;font-weight:700}
h1{font-size:var(--fs-h1);letter-spacing:-.035em}
h2{font-size:var(--fs-h2)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip{
  position:fixed;top:8px;inset-inline-start:8px;z-index:200;
  transform:translateY(-160%);
  background:var(--accent);color:var(--accent-ink);
  padding:.75rem 1.1rem;border-radius:var(--r-pill);font-weight:700;
  transition:transform var(--t) var(--ease)
}
.skip:focus{transform:none}

/* One hairline of red across the top edge. Costs nothing, and it is the first
   thing that says the site was designed rather than assembled. */
body::before{
  content:"";position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:120;
  background:linear-gradient(90deg,transparent,var(--accent) 18%,var(--accent-2) 50%,var(--accent) 82%,transparent);
  opacity:.9;pointer-events:none
}

/* The web from the logo, as a site-wide texture token. Radial spokes + arcs,
   drawn once as a data URI. This is the one ornament on the site and it comes
   from the mark itself — not from a gradient generator. */
:root{
  --web:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='.5'%3E%3Cpath d='M300 300 L300 0M300 300 L512 88M300 300 L600 300M300 300 L512 512M300 300 L300 600M300 300 L88 512M300 300 L0 300M300 300 L88 88'/%3E%3Cpath d='M300 232q64 0 68 68 4 68-68 68-68 0-68-68 0-68 68-68'/%3E%3Cpath d='M300 164q120 0 136 136 16 136-136 136-136 0-136-136 0-136 136-136'/%3E%3Cpath d='M300 96q176 0 204 204 28 204-204 204-204 0-204-204 0-204 204-204'/%3E%3Cpath d='M300 28q232 0 272 272 40 272-272 272-272 0-272-272 0-272 272-272'/%3E%3C/g%3E%3C/svg%3E");
}
.webtex{position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-image:var(--web);background-repeat:no-repeat;background-position:center;
  background-size:min(1100px,140%) auto;opacity:.05}

/* Grain — kills gradient banding on dark. 4% opacity, pointer-events off. */
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay
}

/* --------------------------------------------------------------------------
   4 · HEADER  ·  mobile-first
   Two rows on every screen: identity + tools on top, categories underneath
   spanning the full width. Built at 360px first and widened, because that is
   where nearly all the traffic is.
   -------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)
}
.header.is-stuck{
  border-bottom-color:var(--line);
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  box-shadow:0 12px 30px -24px rgba(0,0,0,1)
}
/* Header + nav are 108px of sticky chrome on a phone. Give it back while the
   user is scrolling down, return it the moment they scroll up. */
@media (max-width:899px){
  .header,.nav{transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease)}
  body[data-chrome="hide"] .header{transform:translateY(-100%)}
  body[data-chrome="hide"] .nav{transform:translateY(calc(var(--header-h) * -1))}
}
.header__in{
  max-width:var(--maxw);margin-inline:auto;
  min-height:var(--header-h);
  padding-inline:var(--gutter);
  display:flex;align-items:center;gap:.5rem
}

/* --- identity --- */
.logo{
  display:flex;align-items:center;gap:.6rem;flex-shrink:0;
  font-family:var(--f-display);font-weight:700;font-size:1.0625rem;
  letter-spacing:-.03em;padding-block:.5rem;line-height:1
}
.logo__mark{
  width:34px;height:34px;flex-shrink:0;display:block;border-radius:50%;
  /* a tight red halo so the mark sits on the black instead of floating on it */
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 22px -6px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
.logo:hover .logo__mark{
  transform:rotate(-8deg) scale(1.06);
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 28px -4px color-mix(in srgb,var(--accent) 90%,transparent)
}
.logo__name{white-space:nowrap}
@media (max-width:379px){.logo__name{display:none}}

/* --- search --- */
.search{position:relative;flex:1 1 0;min-width:0;max-width:560px;margin-inline:auto}
.search__input{
  width:100%;min-height:44px;
  padding-block:0;padding-inline:2.6rem 2.5rem;
  font-size:1rem;                                   /* 16px: anything less makes iOS zoom on focus */
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)
}
.search__input::placeholder{color:var(--muted);opacity:1}
.search__input:focus{border-color:color-mix(in srgb,var(--accent) 50%,var(--line-strong));background:var(--elevated)}
.search__icon{position:absolute;inset-inline-start:.95rem;top:50%;translate:0 -50%;color:var(--muted);pointer-events:none}
.search__clear{
  position:absolute;inset-inline-end:.35rem;top:50%;translate:0 -50%;
  width:34px;height:34px;display:none;place-items:center;
  border-radius:var(--r-pill);color:var(--muted)
}
.search__clear[data-on]{display:grid}
.search__clear:hover{color:var(--text);background:var(--line)}

/* On a phone the search takes its own row, opened from the magnifier. Cramming
   it beside the logo leaves ~120px of input, which is unusable. */
.iconbtn.search-toggle{display:grid}
@media (min-width:768px){.iconbtn.search-toggle{display:none}}
@media (max-width:767px){
  .search{
    position:absolute;inset-inline:0;top:100%;max-width:none;margin:0;
    padding:.5rem var(--gutter);background:var(--bg);
    border-bottom:1px solid var(--line);
    display:none;z-index:3
  }
  .search[data-open]{display:block}
  .search__icon{inset-inline-start:calc(var(--gutter) + .95rem)}
  .search__clear{inset-inline-end:calc(var(--gutter) + .35rem)}
}

.header__actions{display:flex;align-items:center;gap:.15rem;flex-shrink:0;margin-inline-start:auto}
.header__social{display:flex;gap:.15rem}
@media (max-width:900px){.header__social{display:none}}

.iconbtn{
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:var(--muted);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)
}
.iconbtn:hover{color:var(--text);background:var(--surface)}
.iconbtn[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent)}
.theme-toggle .moon{display:none}
[data-theme="light"] .theme-toggle .moon{display:block}
[data-theme="light"] .theme-toggle .sun{display:none}

#pickerToggle{
  display:flex;align-items:center;justify-content:center;
  width:auto;min-width:44px;flex-shrink:0;padding-inline:.6rem;gap:.4rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em
}
@media (max-width:479px){#pickerToggle b{display:none}}

/* --------------------------------------------------------------------------
   5 · NAV  —  its own full-width band under the header
   -------------------------------------------------------------------------- */
.nav{
  position:sticky;top:var(--header-h);z-index:55;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-block:1px solid var(--line);
  border-block-start-color:color-mix(in srgb,var(--line) 60%,transparent)
}
.nav__in{
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex;gap:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity
}
.nav__in::-webkit-scrollbar{display:none}
/* The rail runs past the edge on a phone. Fading the trailing edge is what tells
   the thumb there is more; a hard cut through a word reads as breakage. The mask
   is dropped once every link fits. */
@media (max-width:899px){
  .nav__in{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)
  }
  [dir="rtl"] .nav__in{
    -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent);
            mask-image:linear-gradient(to left,#000 calc(100% - 34px),transparent)
  }
}
.nav__in > *{flex:0 0 auto;scroll-snap-align:start}
.nav a{
  position:relative;white-space:nowrap;
  min-height:var(--nav-h);display:inline-flex;align-items:center;
  padding-inline:clamp(.7rem,2.4vw,1.15rem);
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);letter-spacing:.005em;
  transition:color var(--t-fast) var(--ease)
}
.nav a::after{
  content:"";position:absolute;inset-inline:50%;bottom:6px;height:2px;border-radius:1px;
  background:color-mix(in srgb,var(--text) 35%,transparent);
  transition:inset-inline var(--t) var(--ease)
}
.nav a:hover::after{inset-inline:14%}
.nav a[aria-current="page"]::after{content:none}
.nav a::after{
  content:"";position:absolute;inset-inline:clamp(.7rem,2.4vw,1.15rem);bottom:0;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
  scale:0 1;transform-origin:left;transition:scale var(--t) var(--ease)
}
[dir="rtl"] .nav a::after{transform-origin:right}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--accent)}
.nav a[aria-current="page"]::after{scale:1 1}
/* The scroll is not obvious on a phone unless the last item is cut — this fade
   says "there is more" without adding a control. */
.nav{position:sticky}
.nav::after{
  content:"";position:absolute;inset-block:0;inset-inline-end:0;width:2.5rem;
  background:linear-gradient(to left,var(--bg),transparent);
  pointer-events:none
}
[dir="rtl"] .nav::after{background:linear-gradient(to right,var(--bg),transparent)}
@media (min-width:900px){
  .nav::after{display:none}
  /* Spread the categories across the whole header instead of bunching them on
     the left. First and last sit flush with the page gutter so the row reads as
     a band, not a list. */
  .nav__in{justify-content:space-between;gap:.25rem}
  .nav a{padding-inline:clamp(.9rem,1.8vw,1.6rem)}
  .nav a:first-child{padding-inline-start:0}
  .nav a:last-child{padding-inline-end:0}
  .nav a:first-child::after{inset-inline:0 clamp(.9rem,1.8vw,1.6rem)}
  .nav a:last-child::after{inset-inline:clamp(.9rem,1.8vw,1.6rem) 0}
}

/* --------------------------------------------------------------------------
   6 · PAGE SHELL + HERO
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}

.hero{position:relative;padding:1rem 0 .9rem;overflow:hidden}
@media (min-width:768px){.hero{padding:clamp(1.25rem,2.6vw,2rem) 0 clamp(1rem,1.6vw,1.4rem)}}
@media (max-width:767px){
  /* On a phone the sub-line costs a third of the fold and the h1 already says
     it. Products should arrive above the fold, not below it. */
  .hero__sub{display:none}
  .hero h1{font-size:clamp(1.55rem,1.05rem + 2.4vw,1.95rem)}
}
/* Aurora — static radial mesh + very slow drift. transform/opacity only. */
.hero::before{
  content:"";position:absolute;z-index:-1;inset:-45% -10% auto -10%;height:130%;
  background:
    radial-gradient(38% 46% at 16% 28%,color-mix(in srgb,var(--glow) 46%,transparent),transparent 68%),
    radial-gradient(32% 40% at 82% 16%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 66%),
    radial-gradient(46% 50% at 52% 78%,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%);
  filter:blur(60px);opacity:.55;
  animation:drift 34s var(--ease) infinite alternate
}
@keyframes drift{
  from{transform:translate3d(-3%,0,0) scale(1)}
  to{transform:translate3d(3%,-2%,0) scale(1.08)}
}
.hero h1{max-width:22ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero__sub{color:var(--muted);max-width:60ch;margin-top:.5rem;font-size:.975rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:.9rem;font-size:var(--fs-sm);color:var(--muted)
}
@media (max-width:599px){.hero__meta span:not(.pill){display:none}}

/* ── Subpage header (catalogue + category) ──────────────────────────────
   Speaks the homepage's drop-culture language — mono kicker with a pulsing
   dot, statement display type with an accent last word, a giant ghost
   watermark of the category — but tuned tight, because these pages are tools
   and the product grid must still land high on the screen. */
.subhead{position:relative;overflow:clip;padding:clamp(1.4rem,3.2vw,2.6rem) 0 clamp(1.1rem,2vw,1.6rem)}
.subhead::before{content:"";position:absolute;z-index:0;inset:-40% -10% auto -10%;height:150%;pointer-events:none;
  background:radial-gradient(40% 60% at 82% 30%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%);
  filter:blur(50px);opacity:.7}
.subhead__in{position:relative;z-index:2}
.subhead__wm{position:absolute;z-index:1;top:50%;right:-1vw;transform:translateY(-50%);pointer-events:none;
  font-family:var(--f-stmt);font-weight:800;font-size:clamp(4.5rem,15vw,11rem);line-height:.8;letter-spacing:-.04em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 5%,transparent);
  white-space:nowrap;max-width:60%;overflow:clip}
[dir="rtl"] .subhead__wm{right:auto;left:-1vw}
.subhead__kick{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.74rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text);padding:.42rem .8rem;border:1px solid var(--line-strong);
  border-radius:999px;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.subhead__kick .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:mbpulse 2s infinite}
.subhead__h{font-family:var(--f-stmt);font-weight:800;margin:.85rem 0 0;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3.1rem);line-height:.95;letter-spacing:-.03em;text-transform:uppercase;
  text-wrap:balance;overflow-wrap:normal;word-break:keep-all;hyphens:none;max-width:20ch}
.subhead__h .red{color:var(--accent);text-shadow:0 0 60px color-mix(in srgb,var(--accent) 45%,transparent)}
.subhead__sub{margin:.75rem 0 0;max-width:58ch;color:var(--muted);font-size:clamp(.98rem,.95rem + .2vw,1.1rem)}
@media (max-width:767px){
  .subhead{padding-top:1.15rem}
  .subhead__sub{display:none}                 /* phone: grid above the fold, same rule the old header used */
  .subhead__wm{font-size:clamp(3.6rem,24vw,6.5rem);max-width:74%}
}
@media (prefers-reduced-motion:reduce){.subhead__kick .dot{animation:none}}

/* ── Parcel tracker ─────────────────────────────────────────────────────
   /track/ card + the homepage band. Shared submit handler in catalog.js
   hands the number to ParcelsApp; nothing third-party runs on our page. */
.tracker{max-width:760px;margin:.4rem auto clamp(2rem,5vw,3.5rem);position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  padding:clamp(1.25rem,3vw,2.2rem)}
.tracker::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.tracker__label{display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem}
.tracker__row{display:flex;gap:.6rem;flex-wrap:wrap}
.tracker__input{flex:1 1 15rem;min-width:0;height:52px;padding:0 1rem;border-radius:var(--r);
  border:1px solid var(--line-strong);background:var(--bg);color:var(--text);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:.02em}
.tracker__input::placeholder{color:var(--muted);opacity:.75}
.tracker__input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
.tracker__go,.trackform__go{height:52px;padding:0 1.4rem;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;
  font-size:.93rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  transition:transform .15s var(--ease),filter .15s var(--ease)}
.tracker__go:hover,.trackform__go:hover{transform:translateY(-2px);filter:brightness(1.06)}
.tracker__go:active,.trackform__go:active{transform:translateY(0)}
.tracker__go svg{width:1.05em;height:1.05em}
.tracker__err,.trackform__err{margin:.7rem 0 0;color:var(--accent-2);font-size:.9rem;font-weight:600}
.tracker__hint{margin:.85rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.tracker__steps{list-style:none;margin:1.6rem 0 0;padding:1.5rem 0 0;border-top:1px solid var(--line);display:grid;gap:1.1rem}
@media (min-width:680px){.tracker__steps{grid-template-columns:repeat(3,1fr);gap:1.4rem}}
.tracker__step{display:flex;gap:.75rem;align-items:flex-start}
.tracker__stepno{font-family:var(--f-mono);font-weight:700;font-size:.8rem;color:var(--accent);line-height:1;flex:none;margin-top:.15rem;
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:.5rem;padding:.18rem .42rem}
.tracker__step h3{margin:0 0 .25rem;font-size:1rem;font-weight:700}
.tracker__step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.tracker__foot{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);display:grid;gap:1rem}
@media (min-width:680px){.tracker__foot{grid-template-columns:1.2fr 1fr;gap:1.6rem;align-items:start}}
.tracker__carriers h4{margin:0 0 .35rem;font-size:.95rem;font-weight:700}
.tracker__carriers p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.tracker__meta{margin:0;color:var(--muted);font-size:.82rem;line-height:1.55}
.tracker__pw{display:inline-block;margin-top:.4rem;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--text) 55%,transparent)}

/* Homepage band */
.trackband{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),var(--surface));
  padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.4rem}
@media (min-width:820px){.trackband{grid-template-columns:1fr minmax(0,26rem);gap:2.5rem;align-items:center}}
.trackband::after{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-90px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
[dir="rtl"] .trackband::after{right:auto;left:-90px}
.trackband__copy{position:relative;z-index:1}
.trackband__copy .idx{display:block;font-family:var(--f-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.trackband__copy h2{margin:0;font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);line-height:.98;letter-spacing:-.02em}
.trackband__copy h2 .red{color:var(--accent)}
.trackband__copy p{margin:.7rem 0 0;color:var(--muted);max-width:40ch;font-size:1rem;line-height:1.5}
.trackband__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;text-decoration:none;
  font-family:var(--f-mono);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.trackband__more svg{width:1em;height:1em;transition:transform .15s var(--ease)}
.trackband__more:hover svg{transform:translateX(3px)}
[dir="rtl"] .trackband__more:hover svg{transform:translateX(-3px)}
.trackform{position:relative;z-index:1}
.trackform__row{display:flex;gap:.6rem;flex-wrap:wrap}
.trackform__input{flex:1 1 12rem;min-width:0;height:52px;padding:0 1rem;border-radius:var(--r);
  border:1px solid var(--line-strong);background:var(--bg);color:var(--text);font-family:var(--f-mono);font-size:1rem}
.trackform__input::placeholder{color:var(--muted);opacity:.75}
.trackform__input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}
/* Close/back control on the standalone /track/ page */
.trackclose{display:inline-flex;align-items:center;gap:.45rem;margin:.2rem 0 1.1rem;text-decoration:none;
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  padding:.5rem .85rem .5rem .7rem;border:1px solid var(--line-strong);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 60%,transparent);
  transition:color .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.trackclose svg{width:1.05em;height:1.05em}
.trackclose:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.tracker__go,.trackform__go,.trackband__more svg,.trackclose{transition:none}}
.pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .7rem;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase
}
.pill--live{color:var(--accent)}
.pill--live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)
}

/* --------------------------------------------------------------------------
   7 · CATALOG LAYOUT — rail + grid
   -------------------------------------------------------------------------- */
.catalog{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-4);
  /* room for the floating Filters button so the last row always clears it */
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 5.5rem);
  align-items:start
}
@media (min-width:1024px){.catalog{padding-bottom:var(--s-8)}}
@media (min-width:1024px){
  .catalog{grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--s-6)}
}

/* --- filter rail (desktop) / drawer body (mobile) --- */
.rail{
  position:sticky;
  top:calc(var(--header-h) + 44px + var(--s-2));
  max-height:calc(100dvh - var(--header-h) - 44px - var(--s-4));
  overflow-y:auto;overscroll-behavior:contain;
  padding-inline-end:.35rem;
  display:none
}
@media (min-width:1024px){.rail{display:block}}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}

.facet{border-bottom:1px solid var(--line);padding:.35rem 0}
.facet__head{
  width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.6rem 0;font-family:var(--f-display);font-weight:700;font-size:.9rem
}
.facet__head .chev{transition:rotate var(--t) var(--ease);color:var(--muted);flex-shrink:0}
.facet__head em{
  font-style:normal;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  color:var(--muted);margin-inline-start:.4rem
}
.rates{
  margin-top:.6rem;font-size:var(--fs-xs);color:var(--muted);line-height:1.5;
  padding-top:.6rem;border-top:1px dashed var(--line)
}
.facet__head[aria-expanded="false"] .chev{rotate:-90deg}
.facet__head[aria-expanded="false"] + .facet__body{display:none}
.facet__body{padding-bottom:var(--s-2)}
.facet__search{
  width:100%;min-height:44px;padding:0 .85rem;margin-bottom:.65rem;font-size:1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)
}
.facet__list{max-height:238px;overflow-y:auto;overscroll-behavior:contain;margin:-2px;padding:2px}
.facet__list::-webkit-scrollbar{width:6px}
.facet__list::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}

/* checkbox row — whole row is the 44px target */
.opt{
  display:flex;align-items:center;gap:.65rem;
  min-height:40px;padding:.25rem .5rem;border-radius:var(--r-sm);
  cursor:pointer;user-select:none;
  transition:background var(--t-fast) var(--ease)
}
.opt:hover{background:var(--surface)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__box{
  width:19px;height:19px;flex-shrink:0;border-radius:6px;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)
}
.opt__box svg{opacity:0;scale:.6;transition:opacity var(--t-fast) var(--ease),scale var(--t-fast) var(--ease);color:var(--accent-ink)}
.opt input:checked + .opt__box{background:var(--accent);border-color:var(--accent)}
.opt input:checked + .opt__box svg{opacity:1;scale:1}
.opt input:focus-visible + .opt__box{outline:3px solid var(--accent);outline-offset:2px}
.opt__label{font-size:.875rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opt__count{font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.opt[data-empty="1"]{opacity:.38}
.opt[data-empty="1"]:hover{background:none}

/* size pills — grid of chunky targets */
.sizegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:.4rem}
.sizepill{
  min-height:48px;padding:.4rem .3rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:var(--fs-xs);font-weight:700;font-variant-numeric:tabular-nums;
  display:grid;place-items:center;line-height:1.15;text-align:center;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)
}
.sizepill small{display:block;font-size:var(--fs-xs);font-weight:600;line-height:1.2;color:var(--muted);letter-spacing:.04em}
.sizepill:hover{border-color:var(--line-strong)}
.sizepill[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.sizepill[aria-pressed="true"] small{color:var(--accent-ink);opacity:.72}
.sizepill[data-empty="1"]{opacity:.34}
.sizegroup + .sizegroup{margin-top:var(--s-2)}
.sizegroup__label{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-bottom:.45rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem
}
.unitswitch{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px}
/* Draws as a 38px pill, accepts a 44px thumb — same trick as the theme toggle.
   First exposed by the real catalogue: the demo item had no shoe sizes, so the
   unit switch never rendered during the early audits. */
.unitswitch button{
  min-height:44px;margin-block:-3px;padding:.25rem .6rem;border-radius:var(--r-pill);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  color:var(--muted);letter-spacing:.03em
}
.unitswitch button[aria-pressed="true"]{background:var(--elevated);color:var(--text)}

/* price range */
/* currency chooser above the min/max inputs — pick the currency your bound is in */
.pcurrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.55rem}
.pcurrow__lbl{font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pcur{
  min-height:40px;padding:0 2rem 0 .7rem;font-family:var(--f-mono);font-size:.85rem;font-weight:700;
  color:var(--text);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a4ad' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center
}
[dir="rtl"] .pcur{padding:0 .7rem 0 2rem;background-position:left .6rem center}
.pcur:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line-strong))}
.pcur:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent)}

.range{display:flex;align-items:center;gap:.5rem}
.range input{
  width:100%;min-width:0;min-height:44px;padding:0 .7rem;font-size:1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums
}
.range span{color:var(--muted);flex-shrink:0}

/* My Size — the signature control */
.mysize{
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(160deg,color-mix(in srgb,var(--glow) 20%,var(--surface)),var(--surface));
  padding:var(--s-2);margin-bottom:var(--s-3)
}
.mysize__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.mysize h3{font-size:.9rem;margin-bottom:.15rem}
.mysize p{font-size:var(--fs-xs);color:var(--muted);line-height:1.45}
/* A 44x26 pill is the right shape and the wrong tap target. The button box is
   44x44 with a negative block margin, so it occupies 26px of layout while
   accepting a full-size thumb; ::before draws the pill exactly where it was. */
.switch{
  --w:44px;--h:26px;
  width:var(--w);height:44px;margin-block:-9px;flex-shrink:0;
  background:none;border:0;position:relative
}
.switch::before{
  content:"";position:absolute;inset-block:9px;inset-inline:0;border-radius:var(--r-pill);
  background:var(--elevated);border:1px solid var(--line-strong);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease)
}
.switch::after{
  content:"";position:absolute;top:11px;inset-inline-start:2px;width:20px;height:20px;border-radius:50%;
  background:var(--muted);transition:translate var(--t) var(--ease),background var(--t) var(--ease)
}
.switch[aria-pressed="true"]::before{background:var(--accent);border-color:var(--accent)}
.switch[aria-pressed="true"]::after{translate:18px 0;background:var(--accent-ink)}
.mysize__edit{
  margin-top:.7rem;font-size:var(--fs-sm);font-weight:700;color:var(--accent);
  text-decoration:underline;text-underline-offset:3px;min-height:44px;
  display:inline-flex;align-items:center
}

/* --------------------------------------------------------------------------
   8 · TOOLBAR — result count, active chips, sort
   -------------------------------------------------------------------------- */
/* Sticky results toolbar. A floating button always covers something; a sticky
   bar reserves its own space and can never overlap a card. */
.toolbar{
  position:sticky;top:calc(var(--header-h) + var(--nav-h));z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-inline:calc(var(--gutter) * -1);padding:.6rem var(--gutter);
  margin-bottom:var(--s-2);
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)
}
body[data-chrome="hide"] .toolbar{top:0}
/* On a phone the two controls carry equal weight, so they share the row evenly
   and the count sits under them. One row for all three cannot hold: "FILTERS" is
   "ФИЛЬТРЫ" in Russian and the sort options run to "Cele mai noi mai întâi", so
   something would always be clipped at 320px. Two rows fit every language.
   Explicit placement, because the count sits between them in the DOM — it has to,
   for aria-live to announce next to the control that changed it. */
@media (max-width:1023px){
  .toolbar{
    display:grid;grid-template-columns:1fr 1fr;gap:.45rem .5rem;align-items:center
  }
  .toolbar__filters{grid-area:1 / 1;width:100%;justify-content:center}
  .sort{
    grid-area:1 / 2;margin-inline-start:0;width:100%;max-width:none;
    text-align:center;text-align-last:center
  }
  .toolbar__count{
    grid-column:1 / -1;grid-row:2;
    font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .chips{grid-column:1 / -1;grid-row:3}
}
@media (min-width:1024px){
  .toolbar{
    position:static;margin-inline:0;padding:0;background:none;backdrop-filter:none;
    border-bottom:0;margin-bottom:var(--s-3);gap:var(--s-2)
  }
}
.toolbar__filters{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding-inline:.9rem;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);background:var(--surface);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text)
}
.toolbar__filters:hover{border-color:var(--accent)}
.toolbar__filters b{
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-variant-numeric:tabular-nums
}
.toolbar__filters b:empty{display:none}
@media (min-width:1024px){.toolbar__filters{display:none}}
.toolbar__count{font-family:var(--f-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums}
.toolbar__count span{color:var(--muted);font-weight:500;font-size:.9rem}
.sort{
  margin-inline-start:auto;min-height:44px;padding-block:0;padding-inline:.9rem 2.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6A0B8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;
  font-family:var(--f-mono)
}

.chips{display:flex;flex-wrap:wrap;gap:.4rem;width:100%}
.chips:empty{display:none}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:40px;padding-block:.35rem;padding-inline:.85rem .4rem;border-radius:var(--r-pill);
  background:var(--elevated);border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:600
}
.chip b{font-weight:700}
.chip__x{
  width:26px;height:26px;display:grid;place-items:center;border-radius:50%;
  color:var(--muted);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)
}
.chip__x:hover{background:var(--danger);color:#08080A}
.chip--clear{background:none;border-style:dashed;color:var(--muted);padding-inline:.75rem}
.chip--clear:hover{color:var(--text);border-color:var(--line-strong)}

/* --------------------------------------------------------------------------
   9 · PRODUCT GRID + CARD
   -------------------------------------------------------------------------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,168px),1fr));
  gap:clamp(.6rem,1.4vw,1.15rem)
}
@media (min-width:600px){.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}}

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow)}
  .card:hover .card__img img{scale:1.045}
}
.card:focus-within{border-color:var(--accent)}

/* The photo stage is pure white in both themes — every file is already
   composited onto the same white 4:5 canvas, so the grid reads as uniform
   tiles regardless of how the seller shot the product. */
.card__media{position:relative;background:var(--photo-bg)}
.card__img{
  position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;
  background:var(--photo-bg);
  scroll-snap-align:start;flex:0 0 100%
}
.card__img img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  background:var(--photo-bg);
  transition:scale .5s var(--ease)
}
/* swipeable QC strip — horizontal snap, no JS needed for the scroll itself */
.card__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain
}
.card__track::-webkit-scrollbar{display:none}
.card__dots{
  position:absolute;bottom:.55rem;left:50%;translate:-50% 0;
  display:flex;gap:4px;padding:.25rem .45rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--photo-bg) 82%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent)
}
.card__dots i{width:5px;height:5px;border-radius:50%;background:color-mix(in srgb,var(--text) 32%,transparent);transition:background var(--t-fast) var(--ease)}
.card__dots i.on{background:var(--text)}

.badge{
  position:absolute;top:.6rem;inset-inline-start:.6rem;z-index:2;
  padding:.25rem .55rem;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--accent);color:var(--accent-ink)
}
.badge--restock{background:var(--accent-2);color:var(--accent-ink)}
.badge--sale{background:var(--danger);color:#08080A}

.card__report{
  position:absolute;top:.5rem;inset-inline-end:.5rem;z-index:2;
  width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--photo-bg) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  color:color-mix(in srgb,var(--text) 60%,transparent);
  opacity:0;transition:opacity var(--t) var(--ease),color var(--t-fast) var(--ease)
}
.card:hover .card__report,.card__report:focus-visible{opacity:1}
.card__report:hover{color:var(--danger)}
.card__report[data-done="1"]{opacity:1;color:var(--ok)}
@media (hover:none){.card__report{opacity:1}}

.card__body{padding:.7rem .8rem .8rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.card__brand{
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.card__name{
  font-size:.875rem;font-weight:600;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.3em
}
.card__sizes{display:flex;flex-wrap:wrap;gap:4px;margin-top:.45rem;min-height:26px}
.card__sizes span{
  text-decoration:none;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  padding:.12rem .4rem;line-height:1.4;
  border-radius:var(--r-xs);background:var(--elevated);color:var(--muted);
  font-variant-numeric:tabular-nums
}
.card__sizes span.match{
  background:var(--text);color:var(--bg)
}
.card__sizes span.more{background:none;color:var(--muted);opacity:.8}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.6rem}
.card__price{font-family:var(--f-display);font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card__cta{
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  width:100%;min-height:44px;margin-top:.55rem;
  border-radius:var(--r-pill);
  background:var(--text);color:var(--bg);
  font-weight:800;font-size:var(--fs-xs);letter-spacing:.02em;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)
}
.card__cta:hover{background:var(--accent);color:var(--accent-ink)}
.card__cta:active{transform:scale(.975)}
.card__cta svg{transition:translate var(--t-fast) var(--ease)}
.card__cta:hover svg{translate:2px -2px}

/* skeleton — shown while products.json loads, prevents CLS */
.skel{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.skel::before{content:"";display:block;aspect-ratio:4/5;background:var(--elevated)}
.skel::after{content:"";display:block;height:88px}
@media (prefers-reduced-motion:no-preference){
  .skel{animation:pulse 1.5s var(--ease) infinite alternate}
}
@keyframes pulse{from{opacity:.55}to{opacity:1}}

/* --------------------------------------------------------------------------
   10 · STATES
   -------------------------------------------------------------------------- */
.state{
  grid-column:1/-1;text-align:center;padding:clamp(2.5rem,7vw,4.5rem) var(--s-2);
  border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface)
}
.state h3{font-size:1.25rem;margin-bottom:.4rem}
.state p{color:var(--muted);max-width:44ch;margin-inline:auto;font-size:.925rem}
.state .btn{margin-top:var(--s-2)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:44px;padding:0 1.25rem;border-radius:var(--r-pill);
  font-weight:700;font-size:.875rem;
  background:var(--accent);color:var(--accent-ink);
  transition:filter var(--t-fast) var(--ease)
}
.btn:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--surface);color:var(--text);border:1px solid var(--line-strong)}
.btn--ghost:hover{background:var(--elevated);filter:none}
/* buttons inside prose (404 / legal) must keep their own text colour — the
   generic `.prose a` accent colour would otherwise paint the label red-on-red */
.prose .btn{color:var(--accent-ink);text-decoration:none}
.prose .btn--ghost{color:var(--text)}

.sentinel{height:1px;grid-column:1/-1}
.loadmore{grid-column:1/-1;display:grid;place-items:center;padding:var(--s-3) 0}

/* --------------------------------------------------------------------------
   11 · MOBILE FILTER DRAWER (<dialog>) + FAB
   -------------------------------------------------------------------------- */
.fab{
  display:none;                     /* replaced by the sticky toolbar below */
  position:fixed;z-index:70;left:50%;translate:-50% 0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 1rem);
  min-height:48px;padding:0 1.15rem;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:var(--accent-ink);
  font-weight:800;font-size:var(--fs-sm);
  box-shadow:0 12px 34px -8px rgba(0,0,0,.85);
  transition:translate var(--t) var(--ease),opacity var(--t) var(--ease)
}
/* A floating button sits on top of content by definition. Hiding it while the
   user scrolls down keeps it off the card they are reading; bringing it back on
   scroll-up keeps it one gesture away. */
.fab[data-hide]{translate:-50% 180%;opacity:0;pointer-events:none}
.fab b{
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--accent-ink);color:var(--accent);
  font-size:var(--fs-xs);display:grid;place-items:center;font-variant-numeric:tabular-nums
}
.fab b:empty{display:none}
@media (min-width:1024px){.fab{display:none}}

/* The cookie bar and the FAB are both bottom-anchored. Without this the bar
   sits on top of the Filters button and a first-time mobile visitor cannot
   open the filters at all until they dismiss it. Stack them instead. */
body:has(#cookiebar:not([hidden])) .fab{
  bottom:calc(env(safe-area-inset-bottom,0px) + 1rem + var(--cookiebar-h,168px))
}

.drawer{
  width:100%;max-width:100%;max-height:88dvh;
  margin:auto auto 0;padding:0;border:0;
  background:var(--bg);color:var(--text);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  border-top:1px solid var(--line-strong);
  overflow:hidden
}
/* While a sheet is open the document is taken out of flow at the exact offset
   the reader had reached (see lockPage in catalog.js). Nothing behind the sheet
   can then scroll, by wheel or by thumb, and closing puts them back on the same
   row. */
body.is-locked{position:fixed;inset-inline:0;width:100%;top:var(--lock-y,0)}

/* The grabber. A bottom sheet on a phone is expected to come down with the
   thumb, and the bar is what says so — without it the gesture is undiscoverable.
   touch-action:none because the browser would otherwise claim the drag for
   scrolling before the handler sees it. Pointer-driven, so a mouse works too. */
.sheet__grab{display:none;padding:.55rem 0 .1rem;touch-action:none;cursor:grab}
@media (max-width:1023px){.drawer .sheet__grab{display:block}}
.sheet__grab i{display:block;width:38px;height:4px;margin-inline:auto;border-radius:var(--r-pill);background:var(--line-strong)}
.sheet__grab:active{cursor:grabbing}
.drawer[data-drag]{transition:none!important;animation:none!important}

.drawer::backdrop{background:rgba(4,3,8,.68);backdrop-filter:blur(3px)}
.drawer[open]{display:flex;flex-direction:column}
@media (prefers-reduced-motion:no-preference){
  .drawer[open]{animation:sheet .3s var(--ease)}
  @keyframes sheet{from{transform:translateY(14%);opacity:0}to{transform:none;opacity:1}}
}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.75rem var(--s-2);border-bottom:1px solid var(--line);flex-shrink:0
}
.drawer__head h2{font-size:1.05rem}
.drawer__body{overflow-y:auto;overscroll-behavior:contain;padding:0 var(--s-2) var(--s-2);flex:1}
.drawer__body .rail{display:block;position:static;max-height:none;overflow:visible}
.drawer__foot{
  display:flex;gap:.5rem;padding:var(--s-2);
  padding-bottom:calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:var(--surface);flex-shrink:0
}
.drawer__foot .btn{flex:1}

/* --- buy chooser ---------------------------------------------------------- */
/* On desktop this is a centred sheet, on mobile it stays a bottom sheet — same
   element, no duplicate markup. */
@media (min-width:700px){
  .sheet{
    margin:auto;max-width:440px;
    border-radius:var(--r-lg);border:1px solid var(--line-strong)
  }
}
.buy__head{min-width:0}
.buy__head h2{
  font-size:1.05rem;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.buy__head p{font-size:var(--fs-sm);color:var(--muted);margin-top:.15rem}
#buyBody{padding-top:var(--s-2)}

.buy__opt{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  min-height:56px;padding:.7rem 1rem;margin-bottom:.5rem;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  font-weight:700;font-size:.9375rem;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)
}
.buy__opt:hover{border-color:var(--line-strong);background:var(--elevated)}
.buy__opt:active{transform:scale(.99)}
.buy__opt svg{flex-shrink:0;color:var(--muted)}
.buy__opt--primary{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  min-height:60px;font-size:1rem
}
.buy__opt--primary:hover{background:var(--accent);border-color:var(--accent);filter:brightness(1.08)}
.buy__opt--primary svg{color:var(--accent-ink)}
.buy__name{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.buy__name small{
  font-size:var(--fs-xs);font-weight:500;color:var(--muted);line-height:1.35;
  white-space:normal
}
.buy__opt--raw{background:none}
.buy__or{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:700;margin:var(--s-2) 0 .6rem
}
.buy__report{
  display:flex;align-items:center;gap:.45rem;width:100%;
  min-height:44px;margin-top:.35rem;padding:0 .25rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  transition:color var(--t-fast) var(--ease)
}
.buy__report:hover{color:var(--danger)}
.buy__report[data-done="1"]{color:var(--ok)}
.buy__note{
  padding:0 var(--s-2) var(--s-2);
  padding-bottom:calc(var(--s-2) + env(safe-area-inset-bottom,0px));
  font-size:var(--fs-xs);color:var(--muted);line-height:1.5
}

/* count pip on a multi-agent card CTA */
.card__cta-n{
  min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--accent-ink) 16%,transparent);
  font-size:var(--fs-xs);display:grid;place-items:center;font-variant-numeric:tabular-nums
}
.card__cny{
  font-size:var(--fs-xs);color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600
}

/* --- language + currency picker ------------------------------------------ */
#pickerBody{padding-top:var(--s-1)}
.pick__head{
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  color:var(--muted);margin:var(--s-2) 0 .6rem
}
.pick__head:first-child{margin-top:.35rem}
/* Two columns, exactly like the reference. auto-fit keeps long native names
   (русский, Ελληνικά) from being clipped on a narrow phone. */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.45rem}
.pick{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:.5rem .7rem;border-radius:var(--r);
  border:1.5px solid var(--line);background:var(--surface);
  font-size:.9375rem;font-weight:600;line-height:1.25;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)
}
.pick:hover{border-color:var(--line-strong);background:var(--elevated)}
.pick[aria-current="true"],.pick[aria-pressed="true"]{
  border-color:var(--accent);color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:800
}
.pick[disabled]{opacity:.3;pointer-events:none}
.pick__note{
  margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--muted);line-height:1.55
}
/* .iconbtn is a centred grid, which stacks the globe and the currency code on
   top of each other. This button has two children, so it needs to be a row. */
#pickerToggle{
  display:flex;align-items:center;justify-content:center;
  width:auto;min-width:44px;flex-shrink:0;padding-inline:.55rem;gap:.35rem;
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em
}
#pickerToggle b{font-weight:800}
@media (max-width:479px){#pickerToggle b{display:none}}

/* ==========================================================================
   11b · HOMEPAGE  ·  mobile-first
   Written as an index, not a landing page: hairline rules, tabular numerals,
   monospace metadata, and one ornament — the web from the logo. No frosted
   glass, no gradient blobs. Those two are why the old version read as generic.
   ========================================================================== */
.home{--maxw:1360px}

/* --- hero ------------------------------------------------------------ */
.hero-x{position:relative;overflow:clip;padding-block:2.25rem 2.5rem}
@media (min-width:768px){.hero-x{padding-block:3.5rem 4rem}}
@media (min-width:1100px){.hero-x{padding-block:4.5rem 5rem}}

/* One soft red bloom, top-left, behind the type. Not three blobs. */
.hero-x::before{
  content:"";position:absolute;z-index:-2;
  inset-block-start:-30%;inset-inline-start:-25%;
  width:min(900px,110%);aspect-ratio:1;
  background:radial-gradient(circle,color-mix(in srgb,var(--glow) 90%,transparent),transparent 62%);
  filter:blur(60px);opacity:.85;pointer-events:none
}
.hero-x .webtex{opacity:.028;background-position:78% 42%}
@media (max-width:767px){.hero-x .webtex{display:none}}

.hero-x__in{display:grid;gap:2.25rem;align-items:center;grid-template-columns:1fr}
@media (min-width:1000px){
  .hero-x__in{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:3.5rem}
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.15rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)
}
.eyebrow::before{content:"[";color:color-mix(in srgb,var(--accent) 75%,var(--muted));font-weight:400}
.eyebrow::after{content:"]";color:color-mix(in srgb,var(--accent) 75%,var(--muted));font-weight:400}

.hero-x h1{
  font-size:clamp(2.35rem,1.1rem + 6.4vw,5.6rem);
  line-height:.92;letter-spacing:-.045em;margin:0;text-wrap:balance
}
.hero-x h1 em{
  /* `inline`, never `inline-block`: an atomic box lets the full stop that
     follows it wrap onto a line of its own, which is what German at 320px did. */
  font-style:italic;color:var(--accent);display:inline;
  text-shadow:0 0 64px color-mix(in srgb,var(--accent) 42%,transparent)
}
.hero-x__sub{
  margin-top:1.1rem;max-width:44ch;
  font-size:clamp(1rem,.96rem + .35vw,1.15rem);color:var(--muted);line-height:1.6
}

/* --- the size panel: a spec sheet, not a frosted card ---------------- */
/* The selector is typography and hairlines, not a widget. The frame, the
   surface tint and the corner ticks all went — alignment carries it now. */
.sizer{position:relative;margin-top:2rem}
@media (min-width:768px){.sizer{margin-top:2.75rem}}

.sizer__label{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  padding-bottom:.9rem;margin-bottom:1rem;
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)
}
.sizer__row{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.65rem}
.sizer__row:last-of-type{margin-bottom:0}
.sizer__tag{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;
  flex:0 0 100%
}
@media (min-width:520px){.sizer__tag{flex:0 0 7rem;letter-spacing:.06em}}

.szpick{
  min-width:48px;min-height:44px;padding:.45rem .7rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:transparent;
  font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--text);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)
}
.szpick:hover{border-color:var(--line-strong)}
.szpick[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 26px -4px color-mix(in srgb,var(--accent) 85%,transparent)
}
.szpick[data-empty="1"]{opacity:.34}
.szpick[data-empty="1"][aria-pressed="true"]{opacity:1}
.szpick--any{padding-inline:1rem}

.sizer__go{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin-top:1.35rem;padding-top:1.35rem;
  border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)
}
.btn--xl{
  min-height:54px;padding-inline:1.9rem;font-size:1.0625rem;border-radius:var(--r-pill);
  letter-spacing:-.01em;
  box-shadow:0 16px 40px -18px color-mix(in srgb,var(--accent) 85%,transparent)
}
.btn--xl:hover{transform:translateY(-2px)}
.sizer__count{font-family:var(--f-mono);font-size:var(--fs-sm);color:var(--muted)}
.sizer__count b{color:var(--text);font-weight:700}

/* --- showcase: one product, floating on ambient light ----------------
   The tilted three-card collage is gone. A single curated piece with real
   name and price reads as an editorial cover, not a moodboard — and it is a
   real control: clicking it opens the product. */
.show{position:relative;width:100%;max-width:440px;margin-inline:auto}
@media (max-width:999px){.show{max-width:360px}}
.show__glow{
  position:absolute;inset:6% -4% 2% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 58%,color-mix(in srgb,var(--glow) 85%,transparent),transparent 72%);
  filter:blur(46px);opacity:.9
}
[data-theme="light"] .show__glow{opacity:.35}
.show__card{
  position:relative;display:block;width:100%;padding:0;overflow:hidden;
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--photo-bg) 92%,transparent);
  border:1px solid color-mix(in srgb,var(--text) 10%,transparent);
  box-shadow:0 70px 90px -60px rgba(0,0,0,.95),
             0 0 0 1px color-mix(in srgb,var(--text) 3%,transparent) inset;
  cursor:pointer;
  transition:transform .5s var(--ease),border-color var(--t) var(--ease),box-shadow .5s var(--ease)
}
.show__card img{
  display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--photo-bg);
  padding:1.2rem;box-sizing:border-box
}
@media (hover:hover) and (pointer:fine){
  .show__card:hover{
    transform:translateY(-8px) scale(1.012);
    border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong));
    box-shadow:0 90px 110px -60px rgba(0,0,0,1),
               0 0 60px -20px color-mix(in srgb,var(--accent) 35%,transparent)
  }
}
.show__card:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
/* a slow breath, only while nobody asked for stillness */
@media (prefers-reduced-motion:no-preference){
  .show__card{animation:showfloat 7.5s ease-in-out infinite}
  /* a click target must hold still under the pointer */
  .show__card:hover,.show__card:focus-visible{animation-play-state:paused}
  @keyframes showfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
}
.show__meta{
  position:absolute;inset-inline-start:.8rem;inset-block-end:.8rem;max-width:calc(100% - 1.6rem);
  display:flex;align-items:baseline;gap:.6rem;padding:.55rem .8rem;border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in srgb,var(--text) 12%,transparent);
  text-align:start
}
.show__meta b{
  font-size:var(--fs-sm);font-weight:700;color:var(--text);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.show__meta i{
  font-style:normal;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  color:var(--accent-2);flex-shrink:0
}
.show__ph{
  width:100%;aspect-ratio:4/5;border-radius:var(--r-lg);
  border:1px dashed var(--line-strong);
  background:repeating-linear-gradient(45deg,transparent,transparent 11px,
             color-mix(in srgb,var(--line) 70%,transparent) 11px,color-mix(in srgb,var(--line) 70%,transparent) 12px)
}
.show__card[hidden]{display:none}
.show__card:not([hidden]) ~ .show__ph{display:none}

/* --- sections -------------------------------------------------------- */
.sec{padding-block:2.5rem}
@media (min-width:768px){.sec{padding-block:3.5rem}}
.sec__head{margin-bottom:1.5rem}
@media (min-width:768px){.sec__head{margin-bottom:2rem}}
.sec__head h2{
  font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem);letter-spacing:-.035em;
  display:flex;align-items:center;gap:.7rem
}
.sec__head h2::before{
  content:"";width:22px;height:3px;border-radius:2px;flex-shrink:0;
  background:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 65%,transparent)
}
.sec__head p{color:var(--muted);margin-top:.6rem;max-width:52ch;font-size:var(--fs-body)}
.sec__head--center h2{justify-content:center}

/* --- product strips: real stock on the landing page ------------------ */
.sec--strip{padding-block:2rem}
@media (min-width:768px){.sec--strip{padding-block:2.75rem}}
.strip__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem 1rem;margin-bottom:1rem
}
.strip__head h2{flex:1 1 auto;min-width:0;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);letter-spacing:-.03em;
  display:flex;align-items:center;gap:.7rem
}
.strip__head h2::before{
  content:"";width:22px;height:3px;border-radius:2px;flex-shrink:0;background:var(--accent);
  box-shadow:0 0 16px color-mix(in srgb,var(--accent) 65%,transparent)
}
.strip__all{
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;flex-shrink:0;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)
}
.strip__all:hover{color:var(--accent)}
.strip__all svg{transition:translate var(--t) var(--ease)}
.strip__all:hover svg{translate:4px 0}
[dir="rtl"] .strip__all svg{scale:-1 1}

/* Scroll-snap rail. On a phone this beats a grid: one thumb-flick per product,
   and the cut-off next card tells you there is more without a control. */
.strip{
  display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  padding-block-end:.35rem;
  /* let cards bleed to the screen edge, which reads as designed rather than boxed */
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter)
}
.strip::-webkit-scrollbar{display:none}
.strip > *{flex:0 0 clamp(180px,58vw,236px);scroll-snap-align:start}
@media (min-width:768px){.strip > *{flex-basis:236px}}
.sec--strip[hidden]{display:none}

/* --- brands become filters, not decoration --------------------------- */
/* These became links, so they became tap targets — 44px like everything else. */
.marquee a{
  display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem);letter-spacing:-.025em;
  color:var(--muted);white-space:nowrap;opacity:.72;
  transition:color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)
}
.marquee a:hover{color:var(--accent);opacity:1}

/* --- categories as an index, not a bento of boxes -------------------- */
.index{border-top:1px solid var(--line)}
.index a{
  position:relative;display:grid;align-items:center;gap:.9rem;
  grid-template-columns:auto 1fr auto;
  padding:1.05rem .25rem;border-bottom:1px solid var(--line);
  transition:padding-inline var(--t) var(--ease),background var(--t) var(--ease)
}
/* a red bar wipes in from the leading edge — one move, done properly */
.index a::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:var(--accent);scale:1 0;transform-origin:bottom;
  transition:scale var(--t) var(--ease)
}
.index a:hover::before,.index a:focus-visible::before{scale:1 1;transform-origin:top}
@media (hover:hover) and (pointer:fine){
  .index a:hover{padding-inline-start:1.1rem;background:color-mix(in srgb,var(--surface) 70%,transparent)}
}
.index__n{
  font-family:var(--f-mono);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.1rem + 1.7vw,2.25rem);line-height:1;
  color:var(--accent);min-width:3ch;letter-spacing:-.02em
}
.index a[data-zero="1"] .index__n{color:var(--muted);opacity:.55}
.index__t{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.15rem,1rem + .9vw,1.65rem);min-width:0;
  overflow:hidden;text-overflow:ellipsis
}
.index__go{color:var(--muted);flex-shrink:0;transition:color var(--t) var(--ease),translate var(--t) var(--ease)}
.index a:hover .index__go{color:var(--accent);translate:5px 0}
[dir="rtl"] .index a:hover .index__go{translate:-5px 0}
[dir="rtl"] .index__go svg{scale:-1 1}

/* --- how it works: a rail with hairline separators -------------------- */
/* --- how it works: a walkthrough you can step through ------------------
   The tabs are a real tablist (arrow keys, roving tabindex). Each panel plays
   the control it describes, built from the same pills, chips and buy rows the
   rest of the site uses — so the demo cannot drift away from the product.
   It advances itself while it is on screen and stops the moment anyone takes
   over, because a carousel that keeps moving under your finger is a nuisance. */
/* minmax(0,…) and min-width:0 all the way down: a grid item defaults to
   min-width:auto, so one nowrap buy label ("Comprar en Kakobuy") was widening
   the whole section past a 320px screen instead of shrinking inside it. */
.how{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem}
.how__steps,.how__stage,.how__panel,.demo,.demo__buy{min-width:0}
@media (min-width:900px){
  .how{grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:1.5rem;align-items:start}
}

/* Stacked at every width. Three across a 390px screen turns "Buy through your
   agent" into four lines and the tab strip into 270px of chrome; one per row is
   shorter *and* readable. */
.how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:.5rem}

.how__step{
  position:relative;width:100%;height:100%;overflow:hidden;
  display:flex;align-items:center;gap:.75rem;
  padding:.8rem .95rem;min-height:52px;text-align:start;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  color:var(--muted);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),color var(--t) var(--ease)
}
.how__step:hover{border-color:var(--line-strong)}
/* the marker is a bar, not colour alone */
.how__step::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:top;
  transition:transform var(--t) var(--ease)
}
.how__step[aria-selected="true"]{
  color:var(--text);background:var(--elevated);border-color:var(--line-strong)
}
.how__step[aria-selected="true"]::before{transform:scaleY(1)}
.how__n{
  flex-shrink:0;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;
  color:var(--muted);transition:color var(--t) var(--ease)
}
.how__step[aria-selected="true"] .how__n{color:var(--accent)}
.how__t{font-weight:700;font-size:var(--fs-sm);line-height:1.3;letter-spacing:-.01em}

/* the timer: how long until it moves on, and a place the eye can rest */
.how__bar{
  position:absolute;inset-inline:0;inset-block-end:0;height:2px;background:var(--line);
  opacity:0;transition:opacity var(--t) var(--ease)
}
.how__step[aria-selected="true"] .how__bar{opacity:1}
.how__bar i{
  display:block;height:100%;background:var(--accent);
  transform:scaleX(1);transform-origin:left
}
[dir="rtl"] .how__bar i{transform-origin:right}
.how[data-auto="on"] .how__step[aria-selected="true"] .how__bar i{animation:howfill 5.2s linear forwards}
@keyframes howfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- the stage -------------------------------------------------------- */
.how__stage{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 60%),
    var(--surface);
  padding:1.25rem
}
@media (min-width:768px){.how__stage{padding:1.75rem}}
.how__panel[hidden]{display:none}
.how__say{color:var(--muted);font-size:var(--fs-body);line-height:1.6;max-width:46ch;margin-bottom:1.15rem}
/* Past this width the sentence sits beside the demo rather than letting the
   panel run to 1200px of mostly-empty box. */
@media (min-width:1180px){
  .how__panel{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:2rem;align-items:center}
  .how__say{margin-bottom:0}
}

/* --- the demo, made of the site's own parts ---------------------------- */
.demo{
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  padding:1rem;display:grid;gap:.5rem
}
.demo__lab{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)
}
.demo__lab + .demo__pills{margin-bottom:.35rem}
.demo__pills{display:flex;flex-wrap:wrap;gap:.4rem}
.demo__pill{
  min-width:44px;padding:.5rem .7rem;border-radius:var(--r-sm);text-align:center;
  border:1px solid var(--line);background:var(--surface);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted)
}
.demo__pill.is-on{
  color:var(--accent-ink);background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 40%,transparent)
}
.demo__note{
  display:flex;align-items:center;gap:.5rem;margin-top:.15rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;color:var(--text)
}
.demo__note svg{stroke:var(--accent);stroke-width:2.6;flex-shrink:0}

/* six tiles standing in for a grid of finds — shapes only, never fake items */
.demo__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;margin-top:.35rem}
.demo__grid i{
  display:block;aspect-ratio:4/5;border-radius:var(--r-xs);
  border:1px solid var(--line);background:var(--elevated);opacity:.35
}
.demo__grid i.is-hit{
  opacity:1;border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,var(--elevated))
}

.demo--buy{gap:.45rem}
.demo__buy{
  display:flex;align-items:center;gap:.7rem;min-height:48px;padding:.55rem .8rem;
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  font-weight:700;font-size:var(--fs-sm);color:var(--muted)
}
.demo__buy b{
  width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:var(--r-xs);
  background:var(--elevated);font-family:var(--f-mono);font-size:var(--fs-xs)
}
.demo__buy em{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* On the narrowest phones the label wraps instead of ellipsing — the agent's
   name is the whole point of the row, so it must never be the part cut off. */
@media (max-width:430px){
  .demo__buy{min-height:52px}
  .demo__buy em{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
}
.demo__buy svg{flex-shrink:0;opacity:.5}
[dir="rtl"] .demo__buy svg{scale:-1 1}
.demo__buy.is-first{
  color:var(--accent-ink);background:var(--accent);border-color:var(--accent)
}
.demo__buy.is-first b{background:color-mix(in srgb,var(--accent-ink) 16%,transparent)}
.demo__buy.is-first svg{opacity:.75}

/* --- entrance: each panel plays once when it becomes the visible one --- */
@media (prefers-reduced-motion:no-preference){
  .how__panel.is-live .demo__pill{animation:howpop .34s var(--ease) backwards;animation-delay:calc(var(--k,0) * 45ms + 60ms)}
  .how__panel.is-live .demo__grid i{animation:howpop .34s var(--ease) backwards;animation-delay:calc(var(--k,0) * 50ms + 140ms)}
  .how__panel.is-live .demo__buy{animation:howrise .38s var(--ease) backwards;animation-delay:calc(var(--k,0) * 90ms + 80ms)}
  .how__panel.is-live .demo__note{animation:howrise .4s var(--ease) backwards;animation-delay:.45s}
  .how__panel.is-live .how__say{animation:howrise .32s var(--ease) backwards}
  @keyframes howpop{from{opacity:0;transform:translateY(6px) scale(.94)}to{opacity:1;transform:none}}
  @keyframes howrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (hover:none){.how__step:active{transform:scale(.985)}}

/* --- brand marquee --------------------------------------------------- */
.marquee__head{
  display:flex;align-items:baseline;gap:.6rem;margin-bottom:.9rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.marquee__head b{color:var(--accent);font-variant-numeric:tabular-nums}
.marquee{
  position:relative;overflow:hidden;
  border-block:1px solid var(--line);padding-block:.9rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)
}
.marquee__t{display:flex;width:max-content;gap:2.5rem}
@media (prefers-reduced-motion:no-preference){
  .marquee__t{animation:slide 46s linear infinite}
  .marquee:hover .marquee__t{animation-play-state:paused}
}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee span{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(1.15rem,.95rem + .9vw,1.7rem);letter-spacing:-.025em;
  color:var(--muted);white-space:nowrap;opacity:.72
}
.marquee[data-empty="1"],.marquee__head[hidden]{display:none}

/* --- socials --------------------------------------------------------- */
.socials{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;max-width:420px;margin-inline:auto}
@media (min-width:560px){.socials{display:flex;flex-wrap:wrap;justify-content:center;max-width:none}}
.social{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  min-height:104px;padding:1.1rem .6rem;border-radius:var(--r);
  border:1px solid var(--line-strong);background:transparent;
  font-family:var(--f-mono);font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),background var(--t) var(--ease)
}
@media (min-width:560px){.social{width:126px}}
.social:hover{
  border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  transform:translateY(-3px)
}
.social svg{color:var(--text);transition:color var(--t) var(--ease)}
.social:hover svg{color:var(--accent)}

/* --- about page identification block --------------------------------- */
.idbox{
  margin-top:2.5rem;padding:1.25rem;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface)
}
@media (min-width:768px){.idbox{padding:1.75rem}}
.idbox h2{font-size:1.15rem;margin-bottom:.25rem}
.idbox > p{font-size:var(--fs-sm);color:var(--muted);margin-bottom:1.15rem}
.idbox dl{display:grid;gap:0;grid-template-columns:1fr;margin:0}
@media (min-width:600px){.idbox dl{grid-template-columns:13rem 1fr}}
.idbox dt{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:.9rem
}
.idbox dd{margin:0;padding-block:.25rem .9rem;font-weight:600;font-size:var(--fs-body)}
@media (min-width:600px){
  .idbox dd{padding-top:.85rem;border-bottom:1px solid var(--line)}
  .idbox dt{border-bottom:1px solid var(--line);padding-bottom:.9rem}
  .idbox dl > :nth-last-child(-n+2){border-bottom:0}
}

/* ==========================================================================
   11c · PRODUCT VIEW
   Image left, facts right, one row per buying agent. Opens over the grid and
   writes ?item=<id> to the URL, so a product is shareable and the back button
   closes it — without needing a statically generated page per product.
   ========================================================================== */
.itemview{
  width:100%;max-width:100%;max-height:100dvh;height:100dvh;
  margin:0;padding:0;border:0;background:var(--bg);color:var(--text);
  overflow:hidden
}
.itemview::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
.itemview[open]{display:flex;flex-direction:column}
@media (min-width:900px){
  .itemview{
    height:auto;max-height:90dvh;max-width:1060px;margin:auto;
    border-radius:var(--r-lg);border:1px solid var(--line-strong);
    box-shadow:0 60px 120px -50px rgba(0,0,0,1)
  }
}
@media (prefers-reduced-motion:no-preference){
  .itemview[open]{animation:iv .28s var(--ease)}
  @keyframes iv{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

.iv__bar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem .75rem;border-bottom:1px solid var(--line);flex-shrink:0
}
.iv__crumb{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.iv__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (min-width:900px){
  .iv__body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:0}
}

/* --- gallery --- */
.iv__gal{position:relative;background:var(--photo-bg);border-bottom:1px solid var(--line)}
/* The gallery must never stretch to the height of the facts column — that is
   where the empty white bars came from. It hugs its own content and stays put
   while the facts scroll. */
@media (min-width:900px){
  .iv__gal{border-bottom:0;border-inline-end:1px solid var(--line);align-self:start;position:sticky;top:0}
  .iv__body{align-items:start}
}
.iv__stage{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain
}
.iv__stage::-webkit-scrollbar{display:none}
.iv__stage figure{margin:0;flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;background:var(--photo-bg)}
@media (min-width:900px){.iv__stage figure{aspect-ratio:4/5}}
.iv__stage img{width:100%;height:100%;object-fit:contain;display:block;background:var(--photo-bg);cursor:zoom-in}
.iv__thumbs{display:flex;gap:.4rem;padding:.6rem;overflow-x:auto;scrollbar-width:none}
.iv__thumbs::-webkit-scrollbar{display:none}
.iv__thumbs button{
  flex:0 0 auto;width:54px;height:54px;border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line);background:var(--photo-bg);padding:0
}
.iv__thumbs button[aria-current="true"]{border-color:var(--accent)}
.iv__thumbs img{width:100%;height:100%;object-fit:contain}
.iv__thumbs[hidden]{display:none}

/* click the photo → the photo, as big as the screen allows */
.lightbox{position:fixed;inset:0;z-index:6;background:var(--photo-bg);display:flex}
.lightbox[hidden]{display:none}
.lightbox img{width:100%;height:100%;object-fit:contain;cursor:zoom-out}
.lightbox__x{
  position:absolute;top:.9rem;inset-inline-end:.9rem;z-index:2;
  background:var(--surface);border:1px solid var(--line-strong);color:var(--text);
  border-radius:50%;width:44px;height:44px;display:grid;place-items:center
}
.lightbox__x:hover{border-color:var(--accent)}

/* --- facts --- */
.iv__facts{padding:1.15rem}
@media (min-width:900px){.iv__facts{padding:1.6rem}}
.iv__brand{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.5rem
}
.iv__title{
  font-size:clamp(1.35rem,1.1rem + 1.3vw,2rem);line-height:1.12;
  letter-spacing:-.03em;margin-bottom:.9rem
}
.iv__price{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.35rem}
.iv__price b{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(1.55rem,1.2rem + 1.4vw,2.15rem);font-variant-numeric:tabular-nums
}
.iv__price s{
  text-decoration:none;font-family:var(--f-mono);font-size:var(--fs-sm);
  color:var(--muted);font-variant-numeric:tabular-nums
}
.iv__rate{font-size:var(--fs-xs);color:var(--muted);line-height:1.5;margin-bottom:1.15rem}

.iv__spec{border-top:1px solid var(--line);margin-bottom:1.25rem}
.iv__spec div{
  display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;
  padding:.8rem 0;border-bottom:1px solid var(--line)
}
.iv__spec dt{
  flex:0 0 6.5rem;font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0
}
.iv__spec dd{margin:0;flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:5px}
.iv__spec dd span{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  padding:.15rem .45rem;border-radius:var(--r-xs);
  background:var(--elevated);color:var(--text)
}

/* --- one row per agent --- */
.iv__buyhead{
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem
}
.iv__agents{display:grid;gap:.5rem}
.buyrow{
  display:flex;align-items:center;gap:.9rem;
  min-height:60px;padding:.7rem 1rem;border-radius:var(--r);
  border:1px solid var(--line-strong);background:transparent;
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)
}
.buyrow:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.buyrow:active{transform:scale(.995)}
.buyrow__k{
  flex:0 0 40px;height:40px;display:grid;place-items:center;border-radius:var(--r-sm);
  background:var(--elevated);border:1px solid var(--line);
  font-family:var(--f-display);font-weight:700;font-size:1.0625rem;color:var(--text)
}
.buyrow__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem}
.buyrow__t b{font-size:1.0625rem;font-weight:700;letter-spacing:-.01em}
.buyrow__t small{font-size:var(--fs-xs);color:var(--muted);line-height:1.4}
.buyrow svg{flex-shrink:0;color:var(--muted)}
.buyrow--primary{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 18px -10px color-mix(in srgb,var(--accent) 70%,transparent)
}
.buyrow--primary:hover{background:var(--accent);filter:brightness(1.07)}
.buyrow--primary .buyrow__k{background:rgba(0,0,0,.18);border-color:rgba(0,0,0,.25);color:var(--accent-ink)}
.buyrow--primary .buyrow__t small{color:color-mix(in srgb,var(--accent-ink) 72%,transparent)}
.buyrow--primary svg{color:var(--accent-ink)}

.iv__foot{
  margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between
}
.iv__report{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-size:var(--fs-sm);font-weight:600;color:var(--muted)
}
.iv__report:hover{color:var(--danger)}
.iv__report[data-done="1"]{color:var(--ok)}
.iv__note{font-size:var(--fs-xs);color:var(--muted);line-height:1.5;flex:1;min-width:14rem}

/* On a phone the buy rows sit below the image, the title, the price and the
   spec — three scrolls from the top. The point of the site is getting out to
   the seller fast, so the commission link is pinned to the bottom of the panel
   and the full list still lives in the body for anyone who wants a choice. */
.iv__sticky{
  flex-shrink:0;display:flex;gap:.6rem;align-items:center;
  padding:.7rem var(--gutter);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(14px)
}
.iv__sticky .buyrow{flex:1;min-height:54px}
.iv__sticky .buyrow__t small{display:none}
@media (min-width:900px){.iv__sticky{display:none}}
/* Exactly one primary control exists at any width. Below 900px the pinned bar
   is it and the in-list copy is display:none — which also removes it from the
   accessibility tree, so a screen reader never meets the same button twice. */
@media (max-width:899px){#ivAgents .buyrow--primary{display:none}}

/* --------------------------------------------------------------------------
   11d · BOTTOM TAB BAR  (phones only)
   Top-level destinations only, five at most, icon + label on every one.
   Reserved space rather than a floating control, so nothing is ever covered.
   -------------------------------------------------------------------------- */
.tabbar{
  position:fixed;z-index:80;inset-inline:0;bottom:0;
  /* minmax(0,1fr), not 1fr: a plain 1fr track still grows to its content's
     min-width, so one long label (el "Περισσότερα") pushed the bar off-screen. */
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:color-mix(in srgb,var(--bg) 96%,transparent);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (min-width:1024px){.tabbar{display:none}}
.tabbar a,.tabbar button{
  position:relative;min-width:0;             /* let the cell win, not the label */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  min-height:56px;padding:.4rem .15rem;
  font-size:var(--fs-xs);font-weight:600;color:var(--muted);line-height:1.15;
  text-align:center;
  transition:color var(--t-fast) var(--ease)
}
.tabbar span{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block
}
.tabbar svg{flex-shrink:0}
.tabbar [aria-current="page"],.tabbar [aria-pressed="true"]{color:var(--accent)}
/* the active marker is a bar, not a colour alone */
.tabbar [aria-current="page"]::before{
  content:"";position:absolute;top:0;inset-inline:22%;height:2px;border-radius:0 0 2px 2px;
  background:var(--accent)
}
.tabbar a:active,.tabbar button:active{transform:scale(.94)}
.tabbar b{
  position:absolute;top:.35rem;inset-inline-end:22%;
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--accent-ink);
  font-family:var(--f-mono);font-size:11px;font-weight:800;
  display:grid;place-items:center;font-variant-numeric:tabular-nums
}
.tabbar b:empty{display:none}

/* Everything scrollable must clear the bar. */
@media (max-width:1023px){
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .itemview,.drawer{max-height:100dvh}
}

/* Press feedback — the skill's rule, and it makes a phone feel responsive. */
@media (hover:none){
  .card:active{transform:scale(.985)}
  .btn:active,.buyrow:active,.szpick:active,.social:active{transform:scale(.97)}
}

/* Landscape phones: the hero must not eat the whole viewport. */
@media (max-height:520px) and (orientation:landscape){
  .hero-x{padding-block:1.25rem}
  .hero-x .show{display:none}
  .hero-x__in{grid-template-columns:1fr}
  .tabbar a,.tabbar button{min-height:48px}
  body{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
}

/* --------------------------------------------------------------------------
   12 · FOOTER
   -------------------------------------------------------------------------- */
/* The footer is the last thing a visitor sees before they leave — it gets the
   same care as the hero. Structure: laser edge → brand + columns → disclosure
   → the house mark set full-bleed → utility bar. */
.footer{position:relative;z-index:2;background:var(--bg);margin-top:var(--s-8);overflow:hidden}
/* one quiet accent-tinted hairline at the very top — the footer's only flourish */
.footer::before{content:"";position:absolute;top:0;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 22%,color-mix(in srgb,var(--accent) 65%,transparent) 50%,var(--line-strong) 78%,transparent)}

/* brand + three link columns */
.footer__grid{position:relative;max-width:var(--maxw);margin-inline:auto;
  padding:clamp(2.4rem,5vw,3.6rem) var(--gutter) clamp(1.6rem,3vw,2.4rem);
  display:grid;gap:2.1rem var(--s-3);grid-template-columns:1fr}
@media (min-width:560px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:2rem var(--s-4)}}
.footer__brand{display:flex;flex-direction:column;gap:.9rem;max-width:42ch}
@media (min-width:560px) and (max-width:959px){.footer__brand{grid-column:1 / -1}}
.footer__brand .logo{margin:0}
.footer__tag{color:var(--muted);font-size:var(--fs-sm);line-height:1.6;margin:0}
.footer__stats{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .6rem;margin:.1rem 0 0;
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.03em;color:var(--muted)}
.footer__stats b{color:var(--text);font-weight:700}
.footer__stats > i{color:color-mix(in srgb,var(--muted) 50%,transparent);font-style:normal}

.footer__col{min-width:0}
.footer__col h4{font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted);margin:.15rem 0 1rem}
.footer__col ul{display:flex;flex-direction:column;gap:.05rem;margin:0;padding:0;list-style:none}
.footer__col li a{display:inline-flex;align-items:center;gap:.6rem;min-height:38px;
  font-size:var(--fs-sm);color:var(--muted);transition:color var(--t-fast) var(--ease)}
.footer__col li a:hover,.footer__col li a:focus-visible{color:var(--text)}
.footer__soc li a svg{color:color-mix(in srgb,var(--muted) 75%,transparent);flex-shrink:0;transition:color var(--t-fast) var(--ease)}
.footer__soc li a:hover svg{color:var(--accent)}

/* fine print + utility bar */
.footer__bar{max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) var(--s-3)}
.footer__legalese{color:color-mix(in srgb,var(--muted) 82%,transparent);font-size:var(--fs-xs);line-height:1.65;
  max-width:120ch;margin:0 0 var(--s-2)}
.footer__legalese strong{color:var(--muted);font-weight:700}
.footer__dead{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.footer__dead svg{stroke:color-mix(in srgb,var(--accent) 70%,transparent);flex-shrink:0}
.footer__rule{height:1px;background:var(--line);margin-bottom:var(--s-2)}

.legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.25rem;
  font-size:var(--fs-xs);color:var(--muted);line-height:1.6}
.legal__id{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0}
.legal__do{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.footpick,.totop{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding-inline:.9rem;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:700;color:var(--muted);
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.footpick b{color:var(--text);font-weight:800}
.footpick:hover,.totop:hover{color:var(--text);border-color:var(--line-strong)}
.totop svg{transition:translate var(--t-fast) var(--ease)}
.totop:hover svg{translate:0 -2px}
.totop:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}

/* --------------------------------------------------------------------------
   13 · COOKIE BAR — reject exactly as easy as accept
   -------------------------------------------------------------------------- */
.cookiebar{
  position:fixed;z-index:90;inset:auto var(--s-2) var(--s-2);
  max-width:520px;margin-inline:auto;
  background:var(--elevated);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);padding:var(--s-2);box-shadow:var(--shadow)
}
.cookiebar[hidden]{display:none}
@media (max-width:1023px){.cookiebar{inset:auto .75rem calc(env(safe-area-inset-bottom,0px) + .75rem)}}
.cookiebar p{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}
.cookiebar p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cookiebar__row{display:flex;gap:.5rem;margin-top:.85rem}
.cookiebar__row .btn{flex:1;font-size:var(--fs-xs);padding-inline:.75rem}

/* --------------------------------------------------------------------------
   14 · PROSE (legal pages)
   -------------------------------------------------------------------------- */
.prose{max-width:68ch;padding-block:var(--s-6) var(--s-8)}
.prose h1{margin-bottom:var(--s-3)}
/* German and Finnish compounds are longer than a 320px column. Break inside the
   word before letting it escape the box — `anywhere` also shrinks min-content,
   which is what stops it widening a flex or grid track. */
h1,h2,h3,h4,.card__name,.iv__name{overflow-wrap:anywhere;hyphens:auto}
.prose h2{font-size:1.35rem;margin:var(--s-4) 0 var(--s-2)}
.prose p,.prose li{color:var(--muted);margin-bottom:.85rem}
.prose ul{list-style:disc;padding-inline-start:1.25rem;margin-bottom:var(--s-2)}
.prose strong{color:var(--text)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.todo{
  display:inline-block;background:color-mix(in srgb,var(--danger) 16%,transparent);
  color:var(--danger);border:1px dashed var(--danger);
  padding:.12rem .45rem;border-radius:var(--r-xs);font-weight:700;
  font-size:var(--fs-sm);font-family:var(--f-mono)
}

/* --------------------------------------------------------------------------
   15 · REDUCED MOTION — mandatory, not optional
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important
  }
}


/* --------------------------------------------------------------------------
   16 · RTL (Arabic)
   Layout mirrors automatically because the rules above use logical
   properties. These are the leftovers: transforms, background positions and
   glyphs that carry a direction of their own.
   -------------------------------------------------------------------------- */
[dir="rtl"] .facet__head[aria-expanded="false"] .chev{rotate:90deg}
[dir="rtl"] .switch[aria-pressed="true"]::after{translate:-18px 0}
[dir="rtl"] .sort{
  background-position:left .75rem center;
  padding-inline:.8rem 2rem
}
/* The ↗ external-link arrow points away from the text — in RTL that is up-left. */
[dir="rtl"] .card__cta svg,
[dir="rtl"] .buy__opt svg,
[dir="rtl"] .card__cta:hover svg{scale:-1 1}
[dir="rtl"] .card__cta:hover svg{translate:-2px -2px}
[dir="rtl"] .nav a::after{transform-origin:right}
[dir="rtl"] .toolbar__count{direction:rtl}
/* Latin brand names and EU/US sizes stay left-to-right inside Arabic text. */
[dir="rtl"] .card__brand,
[dir="rtl"] .card__sizes,
[dir="rtl"] .sizepill,
[dir="rtl"] .unitswitch,
[dir="rtl"] .opt__count{direction:ltr}
[dir="rtl"] .card__brand{text-align:right}

/* ===== DROP CULTURE HOMEPAGE (appended) ===== */

/* ==========================================================================
   DROP-CULTURE HOMEPAGE  (redesign)
   New display type: Syne (--f-stmt) for statements, Archivo (--f-display) for UI.
   Home sections are scoped under .home; header/nav tweaks are global.
   ========================================================================== */

/* --- brand mark: the round badge --- */
.logo__mark{border-radius:50%;object-fit:cover}
.home .logo__mark{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 40%,transparent))}
.logo__name{font-family:var(--f-stmt);font-weight:800;letter-spacing:-.02em}

/* --- header: centre the search on desktop --- */
@media (min-width:900px){
  .header__in{position:relative}
  .header .search{position:absolute;left:50%;transform:translateX(-50%);width:min(46vw,560px);max-width:none;margin:0}
}
/* --- nav: spread the links wide on desktop --- */
@media (min-width:820px){
  .nav__in{justify-content:space-between;gap:1.5rem}
}
.nav a{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.01em}

/* ================= HOME ================= */
.home{--maxw:1360px}
.home main{position:relative;z-index:1}
/* soft ambient wash behind everything */
.home::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background:radial-gradient(1200px 720px at 84% -10%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),
            radial-gradient(900px 620px at -12% 10%,color-mix(in srgb,var(--glow) 40%,transparent),transparent 60%)}
[data-theme="light"] .home::before{opacity:.5}

/* --- HERO --- */
.home .hero{position:relative;padding-block:clamp(2.4rem,5vw,4.5rem) clamp(3rem,6vw,5.5rem);overflow:clip}
.home .hero__wm{position:absolute;z-index:0;top:clamp(2rem,7vw,6rem);left:-2vw;right:-2vw;pointer-events:none;
  font-family:var(--f-stmt);font-weight:800;font-size:clamp(7rem,26vw,24rem);line-height:.8;letter-spacing:-.04em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 6%,transparent);white-space:nowrap}
.home .hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1000px){.home .hero__in{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem}}

.home .drop{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text);padding:.5rem .9rem;border:1px solid var(--line-strong);
  border-radius:999px;margin-bottom:1.4rem;background:color-mix(in srgb,var(--surface) 60%,transparent)}
.home .drop .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:mbpulse 2s infinite}
@keyframes mbpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.home .drop b{color:var(--accent)}

.home h1.hh{font-family:var(--f-stmt);font-weight:800;
  /* sized so the longest word never breaks mid-character: fits an 8-char word
     (EN "ACTUALLY") in the hero column. --hh-fit shrinks the two languages whose
     longest word is longer (el 10, ro 9) so they fit too. */
  font-size:calc(clamp(1.9rem,1rem + 3.4vw,4.5rem) * var(--hh-fit,1));line-height:.9;
  letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;margin:0;
  overflow-wrap:normal;word-break:keep-all;hyphens:none}       /* beat the global h1 overflow-wrap:anywhere */
:root[lang="el"]{--hh-fit:.80}
:root[lang="ro"]{--hh-fit:.88}
.home h1.hh .red{color:var(--accent);display:inline-block;transform:skewX(-7deg);
  text-shadow:0 0 70px color-mix(in srgb,var(--accent) 55%,transparent)}
@media(max-width:520px){.home h1.hh .red{transform:none}}
.home .hero__sub{margin-top:1.35rem;max-width:46ch;color:var(--muted);font-size:clamp(1.02rem,.97rem + .4vw,1.18rem)}

.home .spec{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.4rem;font-family:var(--f-mono);
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.home .spec span{display:inline-flex;align-items:center;gap:.5rem}
.home .spec b{color:var(--text)} .home .spec i{color:var(--accent);font-style:normal}

/* ===== hero size finder — interactive card ===== */
.home .sizer{position:relative;margin-top:1.8rem;padding:clamp(1.1rem,2vw,1.5rem);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(130% 130% at 100% 0,color-mix(in srgb,var(--glow) 24%,transparent),transparent 55%),linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,transparent),color-mix(in srgb,var(--surface) 28%,transparent));
  box-shadow:0 26px 60px -34px rgba(0,0,0,.9),inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent)}
.home .sizer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.home .sizer::after{content:"";position:absolute;width:220px;height:220px;right:-64px;top:-72px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%);filter:blur(22px);opacity:.55}
.home .sizer > *{position:relative;z-index:1}

.home .sizer__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-bottom:1.05rem;padding-bottom:.9rem;border-bottom:1px solid color-mix(in srgb,var(--line) 85%,transparent)}
.home .sizer__eyebrow{font-family:var(--f-mono);font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:.5rem}
.home .sizer__eyebrow::before{content:"◆";color:var(--accent);font-size:.72em}

.home .sizer__grid{display:grid;gap:.9rem;margin-bottom:1.15rem}
.home .sizer__group{display:grid;grid-template-columns:1fr;gap:.5rem}
@media(min-width:560px){.home .sizer__group{grid-template-columns:6rem 1fr;align-items:center;gap:.4rem .9rem}}
.home .sizer__tag{font-family:var(--f-mono);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.home .sizer__pills{display:flex;flex-wrap:wrap;gap:.45rem}

/* pills */
.home .szpick{position:relative;min-width:44px;height:44px;padding-inline:.7rem;display:inline-grid;place-items:center;
  font-family:var(--f-mono);font-size:.92rem;font-weight:700;letter-spacing:.01em;color:var(--text);cursor:pointer;overflow:hidden;
  border:1px solid var(--line-strong);border-radius:11px;background:color-mix(in srgb,var(--surface) 70%,transparent);
  transition:transform .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease)}
.home .szpick:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
.home .szpick[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 90%,transparent)}
.home .szpick:not(.szpick--any)[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--accent);opacity:0}
.home .szpick[data-empty="1"]{opacity:.3}
.home .szpick[data-empty="1"][aria-pressed="true"]{opacity:1}

/* the "Any size" reset chip */
.home .szpick--any{width:auto;min-width:0;height:34px;padding-inline:1rem;border-radius:999px;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.76rem;letter-spacing:.03em;
  color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.home .szpick--any[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);box-shadow:none}
.home .szpick--any:hover{transform:none;box-shadow:none;border-color:var(--accent)}

/* go row + live count */
.home .sizer__go{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.home .sizer__count{font-family:var(--f-mono);font-size:.9rem;color:var(--muted);display:inline-flex;align-items:baseline;gap:.4rem}
.home .sizer__count:empty{display:none}
.home .sizer__count::before{content:"→";color:var(--accent);font-weight:700}
.home .sizer__count b{color:var(--accent-2);font-weight:800;font-size:1rem}

@media (prefers-reduced-motion:no-preference){
  .home .sizer{animation:szcard .6s var(--ease) both}
  @keyframes szcard{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .home .sizer__pills > *{animation:szpillin .45s var(--ease) both}
  .home .sizer__pills > :nth-child(1){animation-delay:.16s} .home .sizer__pills > :nth-child(2){animation-delay:.20s}
  .home .sizer__pills > :nth-child(3){animation-delay:.24s} .home .sizer__pills > :nth-child(4){animation-delay:.28s}
  .home .sizer__pills > :nth-child(5){animation-delay:.32s} .home .sizer__pills > :nth-child(6){animation-delay:.36s}
  .home .sizer__pills > :nth-child(7){animation-delay:.40s} .home .sizer__pills > :nth-child(8){animation-delay:.44s}
  .home .sizer__pills > :nth-child(9){animation-delay:.48s}
  @keyframes szpillin{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
  .home .szpick:not(.szpick--any)[aria-pressed="true"]{animation:szspring .34s var(--ease)}
  @keyframes szspring{0%{transform:scale(.82)}55%{transform:scale(1.09)}100%{transform:scale(1)}}
  .home .szpick:not(.szpick--any)[aria-pressed="true"]::after{animation:szring .55s var(--ease)}
  @keyframes szring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
  .home .sizer__count.bump b{animation:szbump .4s var(--ease)}
  @keyframes szbump{0%{transform:translateY(4px) scale(.72);opacity:.3}100%{transform:none;opacity:1}}
}
.home .btn--red{background:var(--accent);color:var(--accent-ink);border:0}
.home .btn--ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text)}
.home .btn--ghost:hover{border-color:var(--text)}
.home .btn{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.01em}

/* --- hero stage: star + logo badge --- */
.home .stage{position:relative;just-self:center;width:100%;max-width:520px;aspect-ratio:1/1;display:grid;place-items:center}
.home .stage__glow{position:absolute;inset:8% 0 4%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 55%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 70%);
  filter:blur(52px);opacity:.75;animation:mbbreathe 6s ease-in-out infinite}
[data-theme="light"] .home .stage__glow{opacity:.4}
@keyframes mbbreathe{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}
.home .stage__ring{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);
  background:conic-gradient(from 210deg,transparent,color-mix(in srgb,var(--accent) 32%,transparent),transparent 55%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));animation:mbspin 20s linear infinite}
.home .stage__ring.r2{width:96%;opacity:.5;animation-duration:32s;animation-direction:reverse}
@keyframes mbspin{to{transform:rotate(360deg)}}
.home .stage__spark{position:absolute;color:var(--accent);opacity:.85;width:22px;animation:mbtw 3s ease-in-out infinite}
.home .stage__spark svg{width:100%;height:auto;display:block}
.home .stage__spark.s1{top:14%;left:10%} .home .stage__spark.s2{bottom:18%;left:5%;width:16px;animation-delay:1s} .home .stage__spark.s3{top:20%;right:9%;width:14px;animation-delay:.5s}
@keyframes mbtw{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:.95;transform:scale(1.1)}}
.home .stage__art{position:relative;width:64%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 0 66px color-mix(in srgb,var(--accent) 55%,transparent));animation:mbstarfloat 7.5s ease-in-out infinite}
@keyframes mbstarfloat{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
.home .stagelogo{position:absolute;top:0;right:4%;z-index:4;width:96px;height:96px;border-radius:50%;transform:rotate(-8deg);
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6)) drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 50%,transparent));animation:mblogowob 5.5s ease-in-out infinite}
@keyframes mblogowob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-8px)}}
.home .tag{position:absolute;z-index:3;font-family:var(--f-mono);font-weight:700;font-size:.8rem;padding:.55rem .85rem;border-radius:10px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);background:color-mix(in srgb,var(--bg) 74%,transparent);
  border:1px solid var(--line-strong);display:flex;flex-direction:column;gap:.15rem}
.home .tag.tl{top:6%;left:0} .home .tag.br{bottom:3%;right:-2%}
.home .tag small{color:var(--muted);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase}
.home .tag b{font-size:1.02rem} .home .tag .price{color:var(--accent-2)}
@media(prefers-reduced-motion:reduce){.home .stage__art,.home .stagelogo,.home .stage__ring,.home .stage__glow,.home .stage__spark,.home .drop .dot{animation:none}}

/* --- red tagline marquee --- */
.home .tagbar{background:var(--accent);color:var(--accent-ink);overflow:hidden;padding-block:.6rem;border-block:1px solid rgba(0,0,0,.2);display:flex}
/* two identical tracks, each at least the viewport wide, scrolling a full track
   width — fills any screen with no blank gap, and the seam stays even */
.home .tagbar__t{flex:0 0 auto;min-width:100%;display:flex;gap:1.2rem;justify-content:space-around;align-items:center;
  animation:tagscroll 42s linear infinite;
  font-family:var(--f-display);font-weight:800;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.home .tagbar__t b{opacity:.55}
.home .tagbar:hover .tagbar__t{animation-play-state:paused}
@keyframes tagscroll{to{transform:translateX(-100%)}}

/* --- brand ticker (reuse #brandMarquee) --- */
.home .marquee.ticker{border-block:1px solid var(--line);padding-block:1.05rem;overflow:hidden;background:color-mix(in srgb,var(--surface) 40%,transparent);border-radius:0}
.home .marquee.ticker .marquee__t{gap:1.6rem;font-family:var(--f-stmt);font-weight:800;font-size:clamp(1.1rem,2.4vw,1.6rem);
  text-transform:uppercase;letter-spacing:-.01em;align-items:center}
.home .marquee.ticker a{color:var(--text);opacity:1;position:relative;padding-inline-end:1.6rem}
.home .marquee.ticker a::after{content:"✦";position:absolute;right:.3rem;color:var(--accent);font-size:.7em}
.home .marquee.ticker a:hover{color:var(--accent)}

/* --- section heads (index + red-accent title) --- */
.home .sec__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.home .sec__head .idx{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem}
.home .sec__head .idx::before{content:"";width:26px;height:1px;background:var(--accent)}
.home .sec__head h2{font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;font-size:clamp(1.9rem,1rem + 3.4vw,3.6rem);
  letter-spacing:-.03em;line-height:.95;margin:0;display:block}
.home .sec__head h2 .red{color:var(--accent)}
.home .seeall{font-family:var(--f-mono);font-weight:700;font-size:.85rem;letter-spacing:.05em;color:var(--accent-2);display:inline-flex;align-items:center;gap:.4rem}
.home .seeall:hover{gap:.7rem}

/* --- wall of finds: the strip laid out as a grid of the site's cards --- */
.home .strip.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,1.5vw,1.05rem);overflow:visible}
@media(min-width:640px){.home .strip.wall{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.home .strip.wall{grid-template-columns:repeat(4,1fr)}}
.home .strip.wall > *{width:auto;scroll-snap-align:unset;flex:none}

/* --- pick your lane: category cards --- */
.home .cats{display:grid;grid-template-columns:1fr;gap:.7rem;border-top:0}
@media(min-width:640px){.home .cats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.home .cats{grid-template-columns:repeat(3,1fr)}}
.home .cat{position:relative;border:1px solid var(--line);border-radius:16px;padding:1.7rem 1.6rem 1.5rem;overflow:hidden;
  background:linear-gradient(160deg,var(--surface),transparent);display:grid;grid-template-columns:1fr auto;gap:.1rem;
  align-content:start;transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),background var(--t) var(--ease);min-height:150px}
.home .cat::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 6%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask:linear-gradient(180deg,transparent,#000);mask:linear-gradient(180deg,transparent,#000)}
.home .cat:hover{border-color:var(--line-strong);background:linear-gradient(160deg,var(--elevated),transparent);transform:translateY(-3px)}
.home .cat__idx{grid-column:1;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--muted)}
.home .cat__go{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted);transition:color var(--t) var(--ease),transform var(--t) var(--ease)}
.home .cat:hover .cat__go{color:var(--accent);transform:translateX(5px)}
.home .cat__n{grid-column:1;font-family:var(--f-stmt);font-weight:800;font-size:2.5rem;color:var(--accent);letter-spacing:-.03em;line-height:1;margin:.5rem 0 .1rem}
.home .cat a[data-zero="1"] .cat__n,.home .cat[data-zero="1"] .cat__n{color:var(--accent)}
.home .cat__t{grid-column:1;font-family:var(--f-display);font-weight:700;font-size:1.15rem;letter-spacing:.01em;text-transform:uppercase}

/* --- three taps to buy — animated flow --- */
#secHow .how{--gap:clamp(.9rem,2vw,1.4rem);display:flex;flex-direction:column;gap:var(--gap);align-items:stretch;position:relative}
@media(min-width:820px){#secHow .how{flex-direction:row;align-items:stretch}}

#secHow .step{position:relative;flex:1;min-width:0;isolation:isolate;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2.2rem);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 80%,transparent),color-mix(in srgb,var(--surface) 40%,transparent));
  overflow:hidden;display:flex;flex-direction:column;gap:1rem;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease),opacity .6s var(--ease)}
#secHow .step::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--text) 7%,transparent) 1px,transparent 1.5px);background-size:20px 20px;
  -webkit-mask:radial-gradient(120% 80% at 50% -10%,#000,transparent 70%);mask:radial-gradient(120% 80% at 50% -10%,#000,transparent 70%)}
#secHow .step::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
#secHow .how.in .step::after{transform:scaleX(1);transition-delay:calc(.15s + var(--i)*.13s)}
#secHow .step:hover{border-color:var(--line-strong);transform:translateY(-4px);box-shadow:var(--shadow)}

#secHow .step__n{position:relative;display:inline-block;width:fit-content;font-family:var(--f-stmt);font-weight:800;
  font-size:clamp(2.8rem,5vw,3.6rem);line-height:.9;letter-spacing:-.03em;color:transparent;
  -webkit-text-stroke:1.6px color-mix(in srgb,var(--accent) 70%,transparent)}
#secHow .step__n::after{content:attr(data-n);position:absolute;inset:0;color:var(--accent);-webkit-text-stroke:0;
  clip-path:inset(100% 0 0 0);transition:clip-path .5s var(--ease)}
#secHow .step:hover .step__n::after{clip-path:inset(0 0 0 0)}

#secHow .step h3{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1rem,1.4vw,1.3rem);letter-spacing:-.01em;text-transform:uppercase;margin:0}
#secHow .step p{color:var(--muted);font-size:.98rem;line-height:1.5;margin:0;max-width:34ch}
/* per-step reveal index (no inline styles — the CSP forbids them) */
#secHow .how .step:nth-of-type(1){--i:0}
#secHow .how .step:nth-of-type(2){--i:1}
#secHow .how .step:nth-of-type(3){--i:2}

#secHow .step__viz{position:relative;height:104px;margin:.2rem 0 .1rem;border-radius:var(--r);border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 55%,transparent);overflow:hidden;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 1rem}

#secHow .vcur{position:absolute;width:26px;height:26px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));z-index:6;pointer-events:none}
#secHow .vcur path{fill:#fff;stroke:#0a0a0a;stroke-width:1.1;stroke-linejoin:round}

/* viz 1 · size snap */
#secHow .viz-size{gap:.55rem}
#secHow .vchip{font-family:var(--f-mono);font-size:.9rem;font-weight:700;letter-spacing:.02em;width:38px;height:38px;display:grid;place-items:center;
  border-radius:10px;border:1px solid var(--line-strong);color:var(--text);background:color-mix(in srgb,var(--surface) 70%,transparent);transition:opacity .3s var(--ease)}
#secHow .vchip.pk{position:relative;border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
#secHow .vchip.pk::after{content:"";position:absolute;inset:-4px;border-radius:12px;border:2px solid var(--accent);opacity:0}
#secHow .vtick{position:absolute;left:calc(50% + 2px);top:24px;transform:translate(-50%,0) scale(0);width:20px;height:20px;border-radius:50%;
  background:var(--ok);color:#04120a;display:grid;place-items:center;font-size:.7rem;font-weight:900;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#secHow .viz-size .vcur{left:64%;top:58%}

/* viz 2 · brand filter */
#secHow .viz-brand{flex-direction:column;gap:.5rem;align-items:stretch;padding:.7rem .8rem}
#secHow .vfield{display:flex;align-items:center;gap:.45rem;height:30px;padding:0 .6rem;border-radius:999px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--surface) 75%,transparent)}
#secHow .vmag{width:13px;height:13px;flex:none;opacity:.7}
#secHow .vmag path,#secHow .vmag circle{stroke:var(--muted);fill:none;stroke-width:2}
#secHow .vtyped{font-family:var(--f-mono);font-size:.82rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;display:inline-block;width:4.6ch}
#secHow .vcaret{width:2px;height:14px;background:var(--accent);margin-left:-2px;opacity:.9}
#secHow .vrows{display:flex;flex-wrap:wrap;gap:.35rem}
#secHow .vbrow{font-family:var(--f-mono);font-size:.72rem;font-weight:700;padding:.2rem .5rem;border-radius:7px;border:1px solid var(--line);color:var(--muted);
  background:color-mix(in srgb,var(--surface) 55%,transparent);transition:opacity .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
#secHow .vbrow.hit{border-color:var(--accent);color:var(--text)}
#secHow .vbrow:not(.hit){opacity:.28}

/* viz 3 · agent tap */
#secHow .viz-agent{flex-direction:column;gap:.5rem;padding:.7rem .8rem}
#secHow .vtabs{position:relative;display:flex;gap:.3rem;width:100%;justify-content:center}
#secHow .vtab{font-family:var(--f-mono);font-size:.68rem;font-weight:700;padding:.24rem .5rem;border-radius:7px;border:1px solid var(--line);color:var(--muted);
  background:color-mix(in srgb,var(--surface) 55%,transparent);transition:color .3s,border-color .3s}
#secHow .vtab.sel{border-color:var(--accent);color:var(--text)}
#secHow .vcta{position:relative;display:inline-flex;align-items:center;gap:.4rem;align-self:center;height:30px;padding:0 .9rem;border-radius:999px;
  background:var(--accent);color:var(--accent-ink);font-family:var(--f-display);font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;overflow:hidden}
#secHow .vcta .varr{width:14px;height:14px}
#secHow .vcta .varr path{stroke:var(--accent-ink);stroke-width:2.4;fill:none}
#secHow .vcta .vrip{position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,#fff 70%,transparent);opacity:0;transform:scale(0)}
#secHow .viz-agent .vcur{left:56%;top:60%}

/* connectors between steps */
#secHow .hlink{position:relative;align-self:center;flex:none;width:2px;height:26px;
  background:repeating-linear-gradient(180deg,var(--line-strong) 0 5px,transparent 5px 10px);transform:none;transform-origin:top;transition:transform .5s var(--ease)}
#secHow .hspark{position:absolute;left:50%;top:0;width:7px;height:7px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--accent);box-shadow:0 0 10px 1px color-mix(in srgb,var(--accent) 70%,transparent);opacity:0}
@media(min-width:820px){
  #secHow .hlink{width:clamp(20px,3vw,52px);height:2px;transform-origin:left;background:repeating-linear-gradient(90deg,var(--line-strong) 0 5px,transparent 5px 10px)}
  #secHow .hspark{left:0;top:50%}
}
#secHow .how.reveal .hlink{transform:scaleY(0)}
#secHow .how.reveal.in .hlink{transform:scaleY(1)}
@media(min-width:820px){#secHow .how.reveal .hlink{transform:scaleX(0)}#secHow .how.reveal.in .hlink{transform:scaleX(1)}}
#secHow .how.reveal.in .hlink:nth-of-type(2){transition-delay:.28s}
#secHow .how.reveal.in .hlink:nth-of-type(4){transition-delay:.54s}

/* scroll-reveal of the cards (armed only when JS adds .reveal) */
#secHow .how.reveal .step{opacity:0;transform:translateY(30px) scale(.985)}
#secHow .how.reveal.in .step{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i)*.13s)}

/* motion — only in view and only if the user allows it; resting state already reads as finished */
@media (prefers-reduced-motion:no-preference){
  #secHow .how.in .step__n{animation:ttpop .6s var(--ease) both;animation-delay:calc(.1s + var(--i)*.13s)}
  @keyframes ttpop{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}
  #secHow .how.in .hspark{animation:ttsparkY 2.6s var(--ease) infinite}
  @keyframes ttsparkY{0%{opacity:0;top:0}8%{opacity:1}92%{opacity:1}100%{opacity:0;top:100%}}
  @media(min-width:820px){#secHow .how.in .hspark{animation:ttsparkX 2.6s var(--ease) infinite}
    @keyframes ttsparkX{0%{opacity:0;left:0}8%{opacity:1}92%{opacity:1}100%{opacity:0;left:100%}}}
  #secHow .how.in .viz-size .vcur{animation:ttc1 4.6s var(--ease) infinite}
  @keyframes ttc1{0%{left:82%;top:70%}18%{left:64%;top:58%}24%{left:63%;top:56%}30%{left:64%;top:58%}100%{left:82%;top:70%}}
  #secHow .how.in .viz-size .vchip.pk{animation:ttpk 4.6s var(--ease) infinite}
  @keyframes ttpk{0%,20%{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text);border-color:var(--line-strong);transform:scale(1)}
    24%{transform:scale(.86)}30%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(1.06)}
    36%,86%{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:scale(1)}
    100%{background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--text);border-color:var(--line-strong);transform:scale(1)}}
  #secHow .how.in .viz-size .vchip.pk::after{animation:ttring 4.6s var(--ease) infinite}
  @keyframes ttring{0%,26%{opacity:0;transform:scale(.7)}34%{opacity:.9;transform:scale(1)}48%{opacity:0;transform:scale(1.35)}100%{opacity:0}}
  #secHow .how.in .viz-size .vchip:not(.pk){animation:ttdim 4.6s var(--ease) infinite}
  @keyframes ttdim{0%,26%{opacity:1}40%,86%{opacity:.32}100%{opacity:1}}
  #secHow .how.in .viz-size .vtick{animation:tttick 4.6s var(--ease) infinite}
  @keyframes tttick{0%,30%{opacity:0;transform:translate(-50%,4px) scale(0)}40%{opacity:1;transform:translate(-50%,0) scale(1)}86%{opacity:1;transform:translate(-50%,0) scale(1)}96%,100%{opacity:0;transform:translate(-50%,0) scale(.4)}}
  #secHow .how.in .viz-brand .vtyped{animation:tttype 4.8s steps(1) infinite}
  @keyframes tttype{0%{width:0}6%{width:1.15ch}10%{width:2.3ch}14%{width:3.45ch}18%,88%{width:4.6ch}96%,100%{width:0}}
  #secHow .how.in .viz-brand .vcaret{animation:ttblink 1s steps(1) infinite}
  @keyframes ttblink{0%,50%{opacity:.9}51%,100%{opacity:0}}
  #secHow .how.in .viz-brand .vbrow:not(.hit){animation:ttfout 4.8s var(--ease) infinite}
  @keyframes ttfout{0%,16%{opacity:1;transform:none}30%,88%{opacity:.22;transform:translateX(-3px)}98%,100%{opacity:1;transform:none}}
  #secHow .how.in .viz-brand .vbrow.hit{animation:tthon 4.8s var(--ease) infinite}
  @keyframes tthon{0%,16%{border-color:var(--line);color:var(--muted);transform:none}30%{transform:scale(1.05)}36%,88%{border-color:var(--accent);color:var(--text);transform:none}100%{border-color:var(--line);color:var(--muted)}}
  #secHow .how.in .viz-agent .vcur{animation:ttc2 5s var(--ease) infinite}
  @keyframes ttc2{0%{left:30%;top:24%}14%{left:50%;top:26%}22%{left:50%;top:28%}40%{left:52%;top:66%}48%{left:52%;top:64%}60%,100%{left:52%;top:66%}}
  #secHow .how.in .viz-agent .vcta{animation:tttap 5s var(--ease) infinite}
  @keyframes tttap{0%,44%{transform:scale(1)}50%{transform:scale(.93)}56%{transform:scale(1)}100%{transform:scale(1)}}
  #secHow .how.in .viz-agent .vcta .vrip{animation:ttrip 5s var(--ease) infinite}
  @keyframes ttrip{0%,50%{opacity:.6;transform:scale(0)}70%{opacity:0;transform:scale(14)}100%{opacity:0}}
  #secHow .how.in .viz-agent .vcta .varr{animation:ttarr 5s var(--ease) infinite}
  @keyframes ttarr{0%,52%{transform:translateX(0)}64%{transform:translateX(7px)}72%{transform:translateX(0)}100%{transform:translateX(0)}}
}

/* --- follow the drops --- */
.home .follow{position:relative;border:1px solid var(--line);border-radius:24px;padding:clamp(2.2rem,5vw,4rem);text-align:center;overflow:hidden;
  background:radial-gradient(120% 150% at 50% -20%,color-mix(in srgb,var(--glow) 55%,transparent),transparent 60%),var(--surface)}
.home .follow__star{position:absolute;color:var(--accent);opacity:.45}
.home .follow__star svg{width:100%;height:auto;display:block}
.home .follow__star.a{top:12%;left:8%;width:34px} .home .follow__star.b{bottom:16%;right:10%;width:44px;opacity:.3} .home .follow__star.c{top:20%;right:22%;width:20px;opacity:.4}
.home .follow h2{position:relative;font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,1rem + 4vw,3.6rem);letter-spacing:-.03em;line-height:.95;margin:0}
.home .follow h2 .red{color:var(--accent)}
.home .follow p{position:relative;color:var(--muted);max-width:46ch;margin:1rem auto 1.8rem}
.home .follow .socials{position:relative;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.home .social{display:inline-flex;align-items:center;gap:.6rem;height:54px;padding-inline:1.5rem;border-radius:999px;
  border:1px solid var(--line-strong);font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.95rem;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease)}
.home .social:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* --- giant footer wordmark --- */
.home .footwm{font-family:var(--f-stmt);font-weight:800;font-size:clamp(4rem,17vw,15rem);line-height:.8;letter-spacing:-.04em;
  text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--text) 7%,transparent);
  text-align:center;padding-top:2.5rem;white-space:nowrap;user-select:none;overflow:hidden}

/* ==========================================================================
   FAQ page — accordion + company-details document
   ========================================================================== */
.faqsec{padding-block:clamp(2.4rem,5vw,4.2rem)}
.faqwrap{max-width:920px}
.faqhead{margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.faqhead .idx{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.faqhead .idx::before{content:"";width:26px;height:1px;background:var(--accent)}
.faqhead__h{font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,1rem + 4vw,3.6rem);letter-spacing:-.03em;line-height:.95;margin:0}
.faqhead__h .red{color:var(--accent)}
.faqhead__lead{margin-top:1rem;max-width:56ch;color:var(--muted);font-size:clamp(1.02rem,.97rem + .4vw,1.16rem)}

/* accordion */
.faq{display:flex;flex-direction:column;gap:.7rem}
.faq__item{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:color-mix(in srgb,var(--surface) 55%,transparent);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.faq__item:hover{border-color:var(--line-strong)}
.faq__item[open]{border-color:var(--line-strong);background:color-mix(in srgb,var(--surface) 78%,transparent)}
.faq__q{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.9rem;
  padding:clamp(1rem,2vw,1.35rem) clamp(1.1rem,2.2vw,1.55rem);
  font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,.95rem + .4vw,1.16rem);color:var(--text)}
.faq__q::-webkit-details-marker{display:none}
.faq__no{font-family:var(--f-mono);font-size:.82rem;font-weight:700;color:var(--accent);flex:none;width:2ch;text-align:center}
.faq__qt{flex:1;min-width:0}
.faq__chev{width:22px;height:22px;flex:none;stroke:var(--muted);fill:none;stroke-width:2.4;transition:transform .3s var(--ease),stroke .3s var(--ease)}
.faq__item[open] .faq__chev{transform:rotate(180deg);stroke:var(--accent)}
.faq__q:hover .faq__chev{stroke:var(--accent)}
.faq__a{overflow:hidden}
.faq__a-in{padding:0 clamp(1.1rem,2.2vw,1.55rem) clamp(1.15rem,2vw,1.5rem) calc(clamp(1.1rem,2.2vw,1.55rem) + 2ch + .9rem)}
.faq__a p{color:var(--muted);line-height:1.68;margin:0;max-width:64ch}
.faq__doc{margin-top:1.05rem;display:inline-flex;align-items:center;gap:.5rem;height:42px;padding-inline:1.1rem;border-radius:999px;cursor:pointer;
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:.8rem;letter-spacing:.02em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease)}
.faq__doc:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);transform:translateY(-2px)}
.faq__doc svg{width:15px;height:15px}

/* still stuck */
.faq__still{margin-top:2.5rem;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 1.5rem;
  background:radial-gradient(120% 170% at 0 0,color-mix(in srgb,var(--glow) 42%,transparent),transparent 55%),var(--surface)}
.faq__still h2{font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,1rem + 1.6vw,1.9rem);letter-spacing:-.02em;line-height:1;margin:0}
.faq__still p{color:var(--muted);margin:.5rem 0 0;max-width:46ch}
.faq__still .socials{display:flex;gap:.7rem;flex-wrap:wrap}

/* company-details document (dialog) */
.doc{border:0;padding:0;background:transparent;max-width:min(96vw,560px);width:100%;color:var(--text)}
.doc::backdrop{background:rgba(4,3,6,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.doc__in{border:1px solid var(--line-strong);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--elevated),var(--surface));box-shadow:0 44px 90px -30px rgba(0,0,0,.9)}
.doc__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.doc__eyebrow{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.doc__x{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;font-size:1rem;line-height:1;flex:none;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease)}
.doc__x:hover{border-color:var(--accent);color:var(--accent)}
.doc__title{font-family:var(--f-stmt);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:1.5rem;margin:0;padding:1.25rem 1.35rem 0}
.doc__note{color:var(--muted);font-size:.92rem;line-height:1.55;margin:.55rem 0 0;padding:0 1.35rem}
.doc__dl{margin:1.15rem 0 0;padding:0 1.35rem 1.4rem}
.doc__row{display:grid;grid-template-columns:1fr;gap:.2rem;padding:.8rem 0;border-top:1px solid var(--line)}
@media(min-width:460px){.doc__row{grid-template-columns:10.5rem 1fr;gap:1rem;align-items:baseline}}
.doc__row:first-child{border-top:0}
.doc__row dt{font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.doc__row dd{margin:0;font-family:var(--f-mono);font-size:.95rem;color:var(--text);word-break:break-word}

@media (prefers-reduced-motion:no-preference){
  .doc[open]{animation:docin .3s var(--ease)}
  @keyframes docin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  .doc[open]::backdrop{animation:docbd .3s var(--ease)}
  @keyframes docbd{from{opacity:0}to{opacity:1}}
}