/* ============================================================
   Tokens. Light is the default, matching the brand's own site.
   Every colour is defined on :root; the dark block only swaps values.
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-2:#f4f5f7;
  --surface:#ffffff;
  --surface-2:#f0f1f3;
  --ink-panel:#111418;          /* the dark feature cards, in both themes */
  --ink-panel-2:#1b1f25;
  --on-panel:#f4f6f8;
  --on-panel-2:#a8b0ba;
  --line:#e5e7ea;
  --line-strong:#c7cbd1;
  --text:#0d0f12;
  --text-2:#5b626b;
  --text-quiet:#646b74;   /* 5.3:1 on white, 4.9:1 on the alt ground; #868d96 failed at 3.35 */
  --btn:#111418;
  --btn-text:#ffffff;
  --btn-hover:#2a2f36;
  --accent:#1a6dff;
  --accent-soft:rgba(26,109,255,.1);
  --good:#0d7a4a;
  --bad:#c0392b;
  --shadow-1:0 1px 2px rgba(13,15,18,.06),0 2px 8px rgba(13,15,18,.05);
  --shadow-2:0 6px 14px rgba(13,15,18,.08),0 18px 40px rgba(13,15,18,.07);
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:22px;

  /* Emil Kowalski's curves. Built-in easings are too weak for UI. */
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --maxw:1240px;
  --nav-h:62px;
}
[data-theme="dark"]{
  --bg:#0d0f12;
  --bg-2:#14171b;
  --surface:#14171b;
  --surface-2:#1b1f24;
  --ink-panel:#191d22;
  --ink-panel-2:#20252b;
  --on-panel:#eef1f4;
  --on-panel-2:#9aa2ab;
  --line:#242a31;
  --line-strong:#39414a;
  --text:#eef1f4;
  --text-2:#9aa2ab;
  --text-quiet:#7d858e;
  --btn:#f1f3f5;
  --btn-text:#0d0f12;
  --btn-hover:#ffffff;
  --accent:#5aa2ff;
  --accent-soft:rgba(90,162,255,.14);
  --good:#4ac08a;
  --bad:#f08b80;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 8px 18px rgba(0,0,0,.45),0 24px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out);
}
h1,h2,h3,h4{margin:0;line-height:1.14;letter-spacing:-.02em;font-weight:700}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 36px,var(--maxw));margin-inline:auto}
@media (max-width:620px){.wrap{width:min(100% - 28px,var(--maxw))}}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--btn);color:var(--btn-text);padding:12px 18px;border-radius:0 0 var(--r-s) 0;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;border:1px solid var(--btn);
  background:var(--btn);color:var(--btn-text);
  font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn.sm{padding:9px 16px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
  .btn.ghost:hover{background:var(--surface-2);border-color:var(--text-2);color:var(--text)}
  .btn[disabled]:hover{background:var(--btn);border-color:var(--btn)}
}

/* ---------- top utility bar ---------- */
.util{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:13px}
.util .wrap{display:flex;align-items:center;gap:14px;min-height:38px}
.util .note{color:var(--text-quiet);margin-right:auto}
@media (max-width:720px){.util .note{display:none}}
.seg{display:inline-flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{
  background:none;border:0;padding:5px 11px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--text-2);
  transition:background-color .16s ease,color .16s ease;
}
.seg button[aria-pressed="true"],.seg button[aria-current="true"]{background:var(--btn);color:var(--btn-text)}
@media (hover:hover) and (pointer:fine){.seg button:hover{color:var(--text)}
  .seg button[aria-pressed="true"]:hover,.seg button[aria-current="true"]:hover{color:var(--btn-text)}}
.seg svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- header ---------- */
.nav{
  position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease,background-color .2s var(--ease-out);
}
.nav[data-stuck="true"]{box-shadow:var(--shadow-1)}
.nav .wrap{display:flex;align-items:center;gap:22px;min-height:var(--nav-h)}
/* The logo ships once, as black artwork on transparency. Dark mode inverts it
   to white, so the two themes can never drift out of step with each other. */
.brand{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand .logo{
  height:34px;width:auto;display:block;
  transition:filter .2s var(--ease-out);
}
[data-theme="dark"] .brand .logo{filter:invert(1)}
.footbrand .logo{height:42px}
@media (max-width:620px){
  .brand .logo{height:29px}
  .footbrand .logo{height:36px}
}
@media (prefers-reduced-motion:reduce){.brand .logo{transition:none}}
.menu{display:flex;gap:4px;margin-right:auto}
.menu a{
  padding:9px 13px;border-radius:var(--r-s);text-decoration:none;font-size:14.5px;font-weight:500;color:var(--text-2);
  transition:background-color .16s ease,color .16s ease;
}
@media (hover:hover) and (pointer:fine){.menu a:hover{background:var(--surface-2);color:var(--text)}}
.navtools{display:flex;align-items:center;gap:10px;margin-left:auto}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-s);width:40px;height:40px;cursor:pointer;color:var(--text)}
.burger svg{width:19px;height:19px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
@media (max-width:900px){
  .menu{display:none}
  .burger{display:grid;place-items:center}
}
.cartbtn{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 15px 8px 13px;
  color:var(--text);cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  transition:border-color .16s ease,background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){.cartbtn:hover{border-color:var(--text-2);background:var(--surface-2)}}
.cartbtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cartbtn .n{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--btn);color:var(--btn-text);
  font-family:var(--mono);font-size:11px;font-weight:500;display:grid;place-items:center;
  transform:scale(1);opacity:1;transition:transform .18s var(--ease-out),opacity .18s ease;
}
.cartbtn[data-empty="true"] .n{transform:scale(.6);opacity:0;width:0;min-width:0;padding:0;margin-left:-8px}
@media (max-width:520px){.cartbtn .lbl{display:none}}

/* ---------- the burger, as the brand site runs it ----------
   The panel takes the whole screen and carries its own logo and close, so it
   never has to guess where the bar ended. Each section opens in place rather
   than sending you to another screen, and the edition and the language sit at
   the bottom where a thumb reaches them. */
.mobmenu{
  display:none;position:fixed;inset:0;z-index:60;background:var(--bg);
  flex-direction:column;
  opacity:0;transform:translateY(-8px);
  transition:opacity .2s var(--ease-out),transform .2s var(--ease-out);
}
.mobmenu[data-open="true"]{display:flex;opacity:1;transform:none}
.mobbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.mobbar .logo{height:30px;width:auto;display:block}
[data-theme="dark"] .mobbar .logo{filter:invert(1)}
.mobclose{
  width:42px;height:42px;border:0;background:none;color:var(--text);cursor:pointer;
  display:grid;place-items:center;
}
.mobclose svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.mobscroll{flex:1;overflow-y:auto;overscroll-behavior:contain}
.mrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:17px 20px;border:0;border-bottom:1px solid var(--line);background:none;
  text-align:left;text-decoration:none;color:var(--text);
  font:inherit;font-size:17px;font-weight:500;cursor:pointer;
}
.mrow svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out);color:var(--text-quiet)}
.macbtn[aria-expanded="true"] svg{transform:rotate(90deg)}
.macbody{display:none}
.macbtn[aria-expanded="true"] + .macbody{display:block}
.macbody a,.macbody .catlink{
  display:block;width:100%;text-align:left;padding:15px 20px 15px 34px;
  border:0;border-bottom:1px solid var(--line);background:none;
  text-decoration:none;color:var(--text-2);font:inherit;font-size:15.5px;cursor:pointer;
}
.macbody .catlink[aria-pressed="true"]{color:var(--text);font-weight:700}
/* A category inside the product list, and a model inside a category. Each step
   in is a step quieter and a step further from the edge, so depth is read
   without any lines or boxes being drawn for it. */
.mrow2{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:15px 20px 15px 34px;border:0;border-bottom:1px solid var(--line);background:none;
  text-align:left;color:var(--text-2);font:inherit;font-size:15.5px;cursor:pointer;
}
.mrow2 svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out);color:var(--text-quiet)}
.mac2btn[aria-expanded="true"]{color:var(--text)}
.mac2btn[aria-expanded="true"] svg{transform:rotate(90deg)}
.mac2body{display:none}
.mac2btn[aria-expanded="true"] + .mac2body{display:block}
.mprod2{
  display:block;width:100%;text-align:left;padding:14px 20px 14px 48px;
  border:0;border-bottom:1px solid var(--line);background:none;
  color:var(--text-quiet);font:inherit;font-size:15px;cursor:pointer;
}
@media (hover:hover) and (pointer:fine){.mprod2:hover{color:var(--text)}}

.mobfoot{flex:0 0 auto;padding:16px 20px 22px;border-top:1px solid var(--line);display:grid;gap:10px}
.mpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mbtn{
  padding:13px 10px;border:1px solid var(--text);border-radius:2px;background:none;
  color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.mbtn[aria-pressed="true"]{background:var(--text);color:var(--bg)}

/* ---------- hero carousel ---------- */
.hero{background:var(--bg-2);border-bottom:1px solid var(--line)}
/* the clip has to sit on the element the slides are 100% OF, or the
   neighbouring slides show in the gutter either side of the container */
.hero .wrap{overflow:hidden}

/* The hero is media only: no headline, no copy, no buttons. It runs edge to
   edge so the picture or the video gets the whole width, and it keeps a
   landscape frame at every size rather than reflowing into a column. */
.hero > .wrap{width:100%;max-width:none;margin:0}
.hero .slide .inner{display:block;grid-template-columns:none;gap:0;padding:0;min-height:0}
.hero .slide .copy{display:none}
.hero .slide figure{
  border-radius:0;aspect-ratio:2/1;width:100%;
  max-height:88vh;                 /* a very wide window must not push the page off screen */
}
/* a natural frame already has the media's proportions, so the only cap is
   the one the admin sets */
.hero .slide figure[data-fit="natural"]{max-height:var(--maxh,none)}
.hero .dots{padding:14px 0 18px}

/* ---------- how a picture or video sits in its frame ----------
   Set per item in the admin panel and applied wherever framed media appears:
   the three carousels, the feature cards and the promo cards.

   natural is the default and the reason a wide banner keeps its sides on a
   phone: the frame takes the media's own proportions instead of cropping to
   a fixed shape. The aspect-ratio here is only the placeholder used until the
   media reports its real size, so the page does not jump while it loads. */
[data-fit]{max-height:var(--maxh,none)}
[data-fit] > img,[data-fit] > video{width:100%;height:100%;display:block}
[data-fit="cover"] > img,[data-fit="cover"] > video{object-fit:cover}
[data-fit="contain"] > img,[data-fit="contain"] > video,
[data-fit="natural"] > img,[data-fit="natural"] > video{object-fit:contain}
/* Every hero slide is shown in one shape and fills it completely. Media that
   does not match that shape is cropped rather than shown with bands, because
   the band has to be the same size on every slide and gaps on any side read as
   a fault. Which edge the crop comes off is set per slide: a clip carrying
   captions along its bottom is anchored there, so the loss is taken off the
   top. Any future upload lands in the same frame at the same size. */
#track-top .slide figure > img,
#track-top .slide figure > video{
  width:100%;height:100%;object-fit:cover;display:block;
}
#track-top .slide figure[data-focus="top"] > img,
#track-top .slide figure[data-focus="top"] > video{object-position:50% 0%}
#track-top .slide figure[data-focus="bottom"] > img,
#track-top .slide figure[data-focus="bottom"] > video{object-position:50% 100%}
#track-top .slide figure[data-focus="left"] > img,
#track-top .slide figure[data-focus="left"] > video{object-position:0% 50%}
#track-top .slide figure[data-focus="right"] > img,
#track-top .slide figure[data-focus="right"] > video{object-position:100% 50%}
/* A natural frame has the media's own shape, so there is nothing to letterbox
   against; a contain frame keeps a backdrop behind the bands it does leave. */
[data-fit="contain"]{background:var(--surface-2)}
@media (max-width:880px){
  /* 16/9 on a phone is a thin strip, so give it a little more height and
     keep it landscape. */
  .hero .slide figure{aspect-ratio:7/6;max-height:none}
}
@media (max-width:520px){
  .hero .slide figure{aspect-ratio:7/6}
}
.track{display:flex;transition:transform .46s var(--ease-in-out);will-change:transform}
.slide{flex:0 0 100%;min-width:0}
.slide .inner{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  min-height:min(560px,72vh);padding:52px 0;
}
.slide .copy{max-width:46ch}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-quiet)}
.slide h1,.slide h2{font-size:clamp(30px,4.6vw,54px);margin-top:14px;font-weight:800}
.slide p{margin-top:16px;color:var(--text-2);font-size:clamp(15px,1.4vw,18px);max-width:42ch}
.slide .row{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.slide figure{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-2);aspect-ratio:4/3}
.slide figure img{width:100%;height:100%}
.slide figure:not([data-fit]) img{object-fit:cover}
@media (max-width:880px){
  .slide .inner{grid-template-columns:1fr;gap:26px;min-height:0;padding:34px 0 30px}
  .slide figure{order:-1;aspect-ratio:16/11}
}
/* The dot LOOKS like a 4px bar but the button is 22px tall, so a mouse can
   actually hit it. The bar is drawn by the pseudo-element. */
.dots{display:flex;gap:8px;justify-content:center;padding:0 0 22px}
.dots button{
  width:30px;height:22px;border:0;padding:0;cursor:pointer;background:none;position:relative;
  transition:width .24s var(--ease-out);
}
.dots button::after{
  content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:999px;
  background:var(--line-strong);transition:background-color .2s ease;
}
.dots button[aria-current="true"]{width:46px}
.dots button[aria-current="true"]::after{background:var(--btn)}

/* Arrows. They sit over the artwork, so they stay out of the way until the
   visitor presses the carousel, then pop in and fade out again on their own.
   Same behaviour with a mouse as with a finger: hover-to-reveal would have
   meant one rule for the desktop and a different one for the phone. */
.hero .wrap,.midcar .wrap{position:relative}
.carnav{
  position:absolute;top:50%;margin-top:-22px;z-index:3;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;
  display:grid;place-items:center;box-shadow:var(--shadow-1);
  opacity:0;pointer-events:none;transform:scale(.86);
  transition:opacity .16s ease,transform .22s var(--ease-out),background-color .16s ease,border-color .16s ease;
}
.carnav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.carnav.prev{left:10px}
.carnav.next{right:10px}
/* .navon is put on the carousel by a press and taken off again by a timer. */
.navon .carnav,.carnav:focus-visible{opacity:1;pointer-events:auto;transform:none}
@media (hover:hover) and (pointer:fine){
  .navon .carnav:hover{background:var(--surface-2);border-color:var(--line-strong);transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .carnav{transform:none;transition:opacity .01ms}
  .navon .carnav{transform:none}
}

/* the track follows the finger or the mouse while dragging, then eases home */
.track.dragging{transition:none;cursor:grabbing}
.track{cursor:grab}
.slide .copy,.slide h1,.slide p{user-select:none}

/* the middle and bottom carousels reuse the hero's component, on the alt ground */
.midcar{background:var(--bg-2);border-block:1px solid var(--line);padding:0}
.midcar .wrap{overflow:hidden}
.midcar .slide .inner{min-height:0;padding:clamp(40px,5vw,64px) 0}
.midcar .slide h1,.midcar .slide h2{font-size:clamp(24px,3.2vw,38px)}
.midcar .dots{padding-bottom:22px}

/* video used as a slide, and as a product shot */
.slide figure video,.fcard .pic video,.promo .pic video,.prod .shot video,.pgal .main video{
  width:100%;height:100%;display:block}
.slide figure:not([data-fit]) video,.fcard .pic:not([data-fit]) video,
.promo .pic:not([data-fit]) video,.prod .shot video,.pgal .main video{object-fit:cover}

/* a product card with more than one photo becomes its own small carousel.
   No auto-advance: twenty-one of these drifting at once is noise, and this
   tier of element only earns motion the visitor asks for. */
.prod .shot.pcar{position:relative}
.ptrack{display:flex;height:100%;transition:transform .36s var(--ease-in-out);will-change:transform}
.ptrack>*{flex:0 0 100%;width:100%;height:100%;object-fit:cover}
.pdots{position:absolute;left:0;right:0;bottom:9px;display:flex;gap:5px;justify-content:center;z-index:2}
.pdots button{width:6px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.14);
  transition:background-color .2s ease,width .22s var(--ease-out)}
.pdots button[aria-current="true"]{background:#fff;width:17px}
.parrow{position:absolute;top:50%;margin-top:-15px;width:30px;height:30px;border-radius:999px;border:0;z-index:2;
  background:rgba(255,255,255,.9);color:#111418;cursor:pointer;display:grid;place-items:center;
  font-size:16px;line-height:1;opacity:0;transition:opacity .16s ease}
.parrow.prev{left:8px}.parrow.next{right:8px}
@media (hover:hover) and (pointer:fine){.prod:hover .parrow,.parrow:focus-visible{opacity:1}}
@media (hover:none){.parrow{display:none}}
.pcount{position:absolute;top:9px;right:9px;z-index:2;font-family:var(--mono);font-size:10.5px;
  padding:3px 7px;border-radius:999px;background:rgba(17,20,24,.72);color:#fff}
@media (prefers-reduced-motion:reduce){.ptrack{transition:none}}

/* ---------- product page ---------- */
#produs{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,92px)}
.pback{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:600;color:var(--text-2);transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.pback:hover{color:var(--text)}}
.pback svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);margin-top:22px;align-items:start}
@media (max-width:900px){.pwrap{grid-template-columns:1fr}}
.pgal .main{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface-2);
  overflow:hidden;display:grid;place-items:center}
.pgal .main img{width:100%;height:100%;object-fit:cover}
.pgal .main svg{width:86px;height:86px;fill:none;stroke:var(--text-quiet);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.pthumbs{display:flex;gap:9px;margin-top:11px;flex-wrap:wrap}
.pthumbs button{width:66px;height:66px;border-radius:var(--r-s);overflow:hidden;padding:0;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);transition:border-color .16s ease}
.pthumbs button[aria-current="true"]{border-color:var(--text);border-width:2px}
.pthumbs img{width:100%;height:100%;object-fit:cover}
.pinfo h1{font-size:clamp(26px,3.6vw,40px)}
.pinfo .lede{color:var(--text-2);margin-top:10px;font-size:17px}
.pprice{display:flex;align-items:baseline;gap:14px;margin-top:20px;flex-wrap:wrap}
.pprice b{font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.02em}
.pgroup{margin-top:24px}
.pgroup h3{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);font-weight:500}
.swatches{display:flex;gap:10px;margin-top:11px;flex-wrap:wrap}
.sw{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font:inherit;font-size:13.5px;
  transition:border-color .16s ease,background-color .16s ease}
.sw i{width:17px;height:17px;border-radius:999px;border:1px solid rgba(128,128,128,.45);display:block}
.sw[aria-pressed="true"]{border-color:var(--text);background:var(--surface-2)}
/* A colour that is out of stock is still offered, because a buyer may want to
   know it exists and what it looks like; it just says so when chosen. */
.sw.gone{opacity:.55}
.sw.gone i{position:relative}
.sw.gone i::after{content:"";position:absolute;inset:-2px;border-top:1px solid var(--text-quiet);transform:rotate(-45deg);transform-origin:center}
/* What it cost before a reduction, beside what it costs now. */
.pwas{color:var(--text-quiet);font-size:15px;text-decoration-thickness:1px}
.poff{font-size:12px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px;background:var(--btn);color:var(--btn-text)}
@media (hover:hover) and (pointer:fine){.sw:hover{border-color:var(--text-2)}}
.specs{width:100%;border-collapse:collapse;margin-top:11px;font-size:14.5px}
.specs tr{border-bottom:1px solid var(--line)}
.specs td{padding:9px 0}
.specs td:first-child{color:var(--text-2);width:44%}
.specs td:last-child{font-family:var(--mono);font-size:13.5px;text-align:right}
.plist{margin-top:11px;display:grid;gap:12px}
.plist li{list-style:none;padding-left:20px;position:relative;color:var(--text-2);font-size:14.5px}
.plist li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:999px;background:var(--text-quiet)}
.plist b{color:var(--text);display:block;font-size:15px;margin-bottom:2px}
.pbuy{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
.pbuy .btn{flex:1 1 190px}
.pstock{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-quiet)}
.pstock.out{color:var(--bad)}
.pstock.low{color:#b26a00}
[data-theme="dark"] .pstock.low{color:#e0a350}
body.onproduct .nav{position:sticky}

/* ---------- sections ---------- */
section{padding:clamp(56px,7vw,92px) 0}
.alt{background:var(--bg-2)}
.head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:30px}
.head h1,.head h2{font-size:clamp(23px,3vw,34px)}
.head p{color:var(--text-2);max-width:56ch;margin-top:8px}
.head .more{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--text-2);text-decoration:none;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.head .more:hover{color:var(--text)}}

/* scroll reveal: transform + opacity only, staggered */
.rise{opacity:0;transform:translateY(14px);transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
.in .rise,.rise.in{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:60ms}
.in .rise:nth-child(3){transition-delay:120ms}
.in .rise:nth-child(4){transition-delay:180ms}
.in .rise:nth-child(5){transition-delay:240ms}
.in .rise:nth-child(6){transition-delay:300ms}
.settled .rise:nth-child(2),.settled .rise:nth-child(3),.settled .rise:nth-child(4),
.settled .rise:nth-child(5),.settled .rise:nth-child(6){transition-delay:0s !important}

/* ---------- feature cards (dark panels, like the brand site) ---------- */
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1000px){.feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.fcard{
  border-radius:var(--r-l);overflow:hidden;background:var(--ink-panel);color:var(--on-panel);
  display:flex;flex-direction:column;border:1px solid transparent;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}}
.fcard .pic{aspect-ratio:1/1;background:var(--surface-2);overflow:hidden}
.fcard .pic img{width:100%;height:100%;transition:transform .5s var(--ease-out)}
.fcard .pic:not([data-fit]) img{object-fit:cover}
@media (hover:hover) and (pointer:fine){.fcard:hover .pic img{transform:scale(1.04)}}
.fcard .body{padding:22px 20px 26px}
.fcard .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-panel-2)}
.fcard h3{font-size:19px;margin-top:10px}
.fcard p{margin-top:9px;color:var(--on-panel-2);font-size:14.5px}

/* ---------- category strip ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
@media (max-width:1100px){.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cats{grid-template-columns:repeat(2,1fr)}}
.cat{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px 10px 20px;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
  text-decoration:none;text-align:center;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s ease,transform .18s var(--ease-out),background-color .18s ease;
}
@media (hover:hover) and (pointer:fine){.cat:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--surface-2)}}
.cat svg{width:40px;height:40px;fill:none;stroke:var(--text-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cat span{font-size:13px;font-weight:600;line-height:1.3}
.cat[disabled]{cursor:default;opacity:.72}
.cat .soon{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-quiet);font-weight:500;
}
@media (hover:hover) and (pointer:fine){.cat[disabled]:hover{border-color:var(--line);transform:none;background:var(--surface)}}
/* The product cutouts are shot on white, so on the dark theme they get their own
   light plate rather than a white square floating on a dark card. */
.cat .pic{
  width:100%;aspect-ratio:1/1;border-radius:var(--r-s);overflow:hidden;
  background:#fff;display:grid;place-items:center;
}
.cat .pic img{width:100%;height:100%;object-fit:contain;transition:transform .35s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cat:hover .pic img{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .cat:hover{transform:none}
  .cat .pic img,.cat:hover .pic img{transition:none;transform:none}
}

/* ---------- shop ---------- */
/* ---------- the two bars ----------
   The utility bar carries the edition and the language as menus; the nav bar
   carries the sections. Both use the same panel, so there is one thing to
   style and one thing to reason about. */
.utilmenu{position:relative}
.utilbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border:0;border-radius:var(--r-s);background:none;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--text-2);
  transition:background-color .16s ease,color .16s ease;
}
.utilbtn span{white-space:nowrap}
@media (max-width:620px){.utilbtn{padding:6px 5px;font-size:11.5px;gap:5px}}
.utilbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.utilbtn .chev{width:13px;height:13px;stroke-width:2;transition:transform .2s var(--ease-out)}
.utilbtn[aria-expanded="true"]{color:var(--text);background:var(--surface-2)}
.utilbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.utilbtn:hover{color:var(--text);background:var(--surface-2)}}
.utilmenu .dropmenu{left:auto;right:0;min-width:200px}

/* The product board spans the bar rather than hanging off one word. */
.nav .wrap{position:relative}
.dropmenu.mega{
  left:0;right:auto;min-width:0;max-width:none;padding:26px 22px 28px;
  display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 30px;
}
.dropmenu.mega[data-open="true"]{display:grid}
.dropmenu.mega.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mcol h4{font-size:14px;font-weight:700;margin-bottom:8px}
.mcol h4 .catlink{padding:0;font-weight:700;color:var(--text)}
.mcol > a,.mprod{
  display:block;width:100%;text-align:left;padding:6px 0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;color:var(--text-2);text-decoration:none;
  transition:color .16s ease;
}
@media (hover:hover) and (pointer:fine){.mcol > a:hover,.mprod:hover{color:var(--text)}}
.mnone{padding:8px 12px;color:var(--text-quiet);font-size:14px}
.mobed{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mobed .catlink{padding:12px 0;font-size:16px;font-weight:700}
body[data-edition="gold"] .utilbtn#edbtn{color:var(--text)}

/* ---------- categories in the menus ----------
   Produse opens these on a wide screen; the burger holds them on a phone.
   One list of buttons, styled once, used in both places. */
.hasmenu{position:relative}
.menubtn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border:0;border-radius:var(--r-s);background:none;cursor:pointer;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--text-2);
  transition:background-color .16s ease,color .16s ease;
}
.menubtn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)}
.menubtn[aria-expanded="true"]{color:var(--text);background:var(--surface-2)}
.menubtn[aria-expanded="true"] svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.menubtn:hover{color:var(--text);background:var(--surface-2)}}
.dropmenu{
  display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;min-width:260px;
  padding:8px;border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--shadow-1);
}
.dropmenu[data-open="true"]{display:grid;gap:2px}
.catlink{
  display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:var(--r-s);
  background:none;cursor:pointer;font:inherit;font-size:14.5px;font-weight:500;color:var(--text-2);
  transition:background-color .16s ease,color .16s ease;
}
@media (hover:hover) and (pointer:fine){.catlink:hover{background:var(--surface-2);color:var(--text)}}
.catlink[aria-pressed="true"]{color:var(--text);font-weight:700}
.mobhead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-quiet);padding:14px 0 8px;
}
.mobcats{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mobcats .catlink{padding:12px 0;font-size:16px}
.chipbtn{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;
  color:var(--text-2);font:inherit;font-size:13.5px;font-weight:500;
  transition:border-color .16s ease,color .16s ease,background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){.chipbtn:hover{color:var(--text);border-color:var(--line-strong)}}
.chipbtn[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-text)}
.shopgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:1040px){.shopgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:800px){.shopgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.shopgrid{grid-template-columns:1fr}}
.prod{
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.prod:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-2)}}
.prod .shot{aspect-ratio:1/1;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.prod .shot img{width:100%;height:100%;object-fit:cover}
.prod .shot svg{width:54px;height:54px;fill:none;stroke:var(--text-quiet);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.prod .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.prod h3{font-size:16.5px}
.prod .tag{margin-top:7px;color:var(--text-2);font-size:14px;flex:1}
.prod .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px}
.prod .price{font-size:19px;font-weight:800;letter-spacing:-.02em}
.prod .stock{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-quiet)}
.prod .stock.low{color:#b26a00}
.prod .stock.out{color:var(--bad)}
[data-theme="dark"] .prod .stock.low{color:#e0a350}
.prod .add{margin-top:14px;width:100%}
.prod .plink{display:block;text-align:center;margin-top:9px;font-size:13.5px;font-weight:600;
  color:var(--text-2);text-decoration:none;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.prod .plink:hover{color:var(--text)}}

/* ---------- promo cards ---------- */
.promos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.promos{grid-template-columns:1fr}}
.promo{
  border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;text-decoration:none;
  transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s ease;
}
@media (hover:hover) and (pointer:fine){.promo:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-strong)}}
.promo .pic{aspect-ratio:16/11;background:var(--surface-2);overflow:hidden}
.promo .pic img{width:100%;height:100%;transition:transform .5s var(--ease-out)}
.promo .pic:not([data-fit]) img{object-fit:cover}
@media (hover:hover) and (pointer:fine){.promo:hover .pic img{transform:scale(1.03)}}
.promo .body{padding:22px 22px 26px}
.promo .tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet)}
.promo h3{font-size:21px;margin-top:9px}
.promo p{margin-top:9px;color:var(--text-2);font-size:14.5px}

/* ---------- stats ---------- */
/* ---------- scroll drift ----------
   Pictures lift a little with the scroll and settle back when it stops. It is
   driven by how fast the page is actually moving, so a flick on a phone and a
   wheel on a desktop both feel like the same hand. Two amounts, a whole one and
   a softer one on every second card, so a row breathes instead of marching.

   Capped at a few pixels on purpose: this is meant to be felt rather than
   noticed, and it never moves anything far enough to change a layout. */
.drift,.fcard .pic,.promo .pic,.cat .pic,.pcard .pic,.vface{
  transform:translate3d(0,var(--drift,0px),0);
  will-change:transform;
}
.feat .fcard:nth-child(even) .pic,
.promos .promo:nth-child(even) .pic,
.cats .cat:nth-child(even) .pic,
.shopgrid .pcard:nth-child(even) .pic{transform:translate3d(0,var(--drift2,0px),0)}
/* A hover scale still belongs to the picture itself, so the two never fight. */
@media (prefers-reduced-motion:reduce){
  .drift,.fcard .pic,.promo .pic,.cat .pic,.pcard .pic,.vface,
  .feat .fcard:nth-child(even) .pic,.promos .promo:nth-child(even) .pic,
  .cats .cat:nth-child(even) .pic,.shopgrid .pcard:nth-child(even) .pic{transform:none;will-change:auto}
}

/* ---------- Zona TESNA ----------
   Picture on its own light plate, the line above the name, and a pill that
   says where it goes. */
.promo .pill{
  display:inline-block;margin-top:14px;padding:9px 18px;border:1px solid var(--line-strong);
  border-radius:999px;font-size:13.5px;font-weight:600;color:var(--text-2);
  transition:border-color .16s ease,color .16s ease;
}
@media (hover:hover) and (pointer:fine){.promo:hover .pill{border-color:var(--text);color:var(--text)}}
.promo .body{text-align:center}
.promo .body h3{font-size:clamp(18px,1.9vw,24px);font-weight:600;margin-top:6px}
.promo .body .tag{font-size:13px;color:var(--text-quiet);text-transform:none;letter-spacing:0}

/* ---------- footer ---------- */
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fgrid{grid-template-columns:1fr}}
.fmid{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:26px;
  margin-top:38px;padding-top:28px;border-top:1px solid var(--line);
}
@media (max-width:820px){.fmid{grid-template-columns:1fr}}
.fmblock h5{font-size:14px;font-weight:700;margin-bottom:12px}
.fmail{margin-top:10px;font-size:14px}
.pays{display:flex;gap:8px;flex-wrap:wrap}
.paychip{
  padding:7px 12px;border:1px solid var(--line);border-radius:var(--r-s);
  font-size:12.5px;color:var(--text-2);background:var(--surface);
}
.socials{display:flex;gap:10px;flex-wrap:wrap}
.socials a{
  width:38px;height:38px;border:1px solid var(--line);border-radius:999px;
  display:grid;place-items:center;color:var(--text-2);
  transition:border-color .16s ease,color .16s ease;
}
.socials svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.socials a:hover{border-color:var(--text);color:var(--text)}}
.fbot{
  margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:14px;justify-items:center;text-align:center;
}
.flegal{display:flex;gap:10px 22px;flex-wrap:wrap;justify-content:center;list-style:none;padding:0}
.flegal a{font-size:13px;color:var(--text-quiet);text-decoration:none}
@media (hover:hover) and (pointer:fine){.flegal a:hover{color:var(--text-2)}}
.fcopy{font-size:12.5px;color:var(--text-quiet)}
.totop{
  position:fixed;right:18px;bottom:18px;z-index:40;
  width:54px;height:54px;border-radius:999px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text-2);cursor:pointer;
  display:grid;place-items:center;gap:0;font:inherit;font-size:10px;font-weight:700;letter-spacing:.08em;
  box-shadow:var(--shadow-1);transition:border-color .16s ease,color .16s ease;
}
.totop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.totop:hover{border-color:var(--text);color:var(--text)}}

/* ---------- a written page ----------
   One column of text at a readable measure. Nothing else: these are pages
   somebody was sent to in order to read them. */
#pagina{padding:clamp(34px,6vw,70px) 0 clamp(50px,8vw,90px)}
#pagina .wrap{max-width:760px}
.pagehead h1{font-size:clamp(26px,4vw,44px);font-weight:800;letter-spacing:-.02em;line-height:1.12}
.pagehead{padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.pagetext{margin-bottom:18px;font-size:16px;line-height:1.75;color:var(--text-2);white-space:normal}

/* ---------- the app page ----------
   A dark card that says what the app is for, then a card per store with its
   code and its button. */
.appwrap{display:grid;gap:20px}
.appcard{
  display:flex;align-items:center;gap:22px;justify-content:space-between;
  padding:clamp(22px,3vw,38px);border-radius:var(--r-xl);
  background:#111318;color:#fff;
}
[data-theme="dark"] .appcard{background:var(--surface-2);border:1px solid var(--line)}
.appcard h3{font-size:clamp(20px,2.4vw,30px);font-weight:800;letter-spacing:-.02em}
.appcard p{margin-top:10px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.6;max-width:52ch}
[data-theme="dark"] .appcard p{color:var(--text-2)}
.appmark{
  width:clamp(56px,7vw,96px);height:auto;flex:0 0 auto;opacity:.92;
  /* The card is dark in both themes and the mark ships as dark artwork, so it
     is forced to white rather than shipping a second file of the same thing. */
  filter:brightness(0) invert(1);
}
.appgets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:620px){.appgets{grid-template-columns:1fr}.appcard{flex-direction:column;align-items:flex-start;gap:16px}}
.appget{
  display:grid;gap:14px;justify-items:center;padding:22px;
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
}
.appqr{width:190px;height:190px;object-fit:contain;display:block;background:#fff;border-radius:var(--r-s)}
.appqr.none{
  display:grid;place-items:center;text-align:center;padding:14px;
  background:var(--surface-2);border:1px dashed var(--line-strong);
  color:var(--text-quiet);font-size:12.5px;line-height:1.5;
}
.appget .btn{width:100%;text-align:center}
.appsoon{color:var(--text-quiet);font-size:12.5px;text-align:center}

/* ---------- the music band ----------
   One wide picture with the line written on it, the way the brand site runs it.
   The scrim is a directional gradient rather than a flat wash so the picture
   keeps its light while the words still clear contrast. */
.musicband{margin-top:6px}
.mband{
  position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  aspect-ratio:21/9;background:var(--surface-2);
}
.mband > img,.mband > video{width:100%;height:100%;object-fit:cover;display:block}
.mband figcaption{
  position:absolute;inset:auto 0 0 0;padding:clamp(20px,4vw,44px);
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.42) 46%,rgba(0,0,0,0) 100%);
  color:#fff;
}
.mband figcaption .kicker{color:rgba(255,255,255,.82)}
.mband figcaption h3{
  margin-top:10px;font-size:clamp(22px,3.4vw,42px);font-weight:800;
  letter-spacing:-.02em;line-height:1.14;max-width:18ch;
}
.mband figcaption p{margin-top:10px;color:rgba(255,255,255,.86);font-size:clamp(14px,1.3vw,17px);max-width:46ch}
@media (max-width:760px){.mband{aspect-ratio:4/3}}

/* ---------- what buyers say ----------
   One person at a time, with the rest as a row of faces underneath. A voice
   with no photograph gets its initial rather than a broken frame, so the
   section looks finished from the moment it is switched on. */
.voices{display:grid;grid-template-columns:1fr;gap:20px}
.vlead{
  display:grid;grid-template-columns:132px 1fr;gap:24px;align-items:center;
  padding:26px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
}
.vface{
  width:132px;height:132px;border-radius:var(--r-m);overflow:hidden;background:var(--surface-2);
  display:grid;place-items:center;font-size:44px;font-weight:800;color:var(--text-quiet);
}
.vface img{width:100%;height:100%;object-fit:cover;display:block}
.vlead blockquote{margin:0;font-size:clamp(16px,1.7vw,21px);line-height:1.5;font-weight:600}
.vlead .who{margin-top:14px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.vlead .who b{font-size:15px}
.vlead .who span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet)}
.vrow{display:flex;gap:14px;align-items:stretch;flex-wrap:wrap}
.vtile{
  padding:0;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-m);
  overflow:hidden;cursor:pointer;width:150px;height:190px;flex:0 0 auto;
  transition:border-color .18s ease,transform .18s var(--ease-out);
}
.vtile[aria-current="true"]{border-color:var(--text)}
@media (hover:hover) and (pointer:fine){.vtile:hover{border-color:var(--line-strong)}}
.vtile .vface{width:100%;height:100%;border-radius:0;font-size:44px}
.vopen{
  flex:1 1 280px;min-width:0;align-self:center;padding:4px 8px;
}
.vopen b{display:block;font-size:17px;font-weight:700}
.vopen .vwhere{
  display:block;margin-top:2px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet);
}
.vopen blockquote{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--text-2);max-width:42ch}
@media (max-width:620px){
  .vtile{width:104px;height:130px}
  .vtile .vface{font-size:30px}
  .vopen{flex-basis:100%}
}
@media (max-width:760px){
  .vlead{grid-template-columns:1fr;gap:16px;padding:20px}
  .vface{width:88px;height:88px;font-size:32px}
  .vrow{gap:8px}
  .vrow button{width:62px;height:62px}
}

/* The fine print under the reach figures: small, quiet, and allowed to run
   long, because it is the sourcing note rather than a caption. */
.fineprint{
  margin-top:20px;color:var(--text-quiet);font-size:12.5px;line-height:1.7;
  max-width:none;text-align:center;
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
@media (max-width:700px){.stats{grid-template-columns:1fr;gap:10px}}
.stat{padding:26px 16px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.stat b{display:block;font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.03em}
.stat span{display:block;margin-top:6px;color:var(--text-2);font-size:14.5px}

/* ---------- authenticity ---------- */
.authwrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,54px);align-items:start}
@media (max-width:900px){.authwrap{grid-template-columns:1fr}}
.steps{display:grid;gap:14px;margin-top:22px}
.step{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.step .num{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line-strong);
  display:grid;place-items:center;font-family:var(--mono);font-size:13px;color:var(--text-2);
}
.step h4{font-size:15.5px}
.step p{color:var(--text-2);font-size:14.5px;margin-top:4px}
.checker{border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);padding:clamp(22px,3vw,30px);box-shadow:var(--shadow-1)}
.checker label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.checkrow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.checker input[type=text]{
  flex:1 1 220px;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-s);
  padding:13px 15px;color:var(--text);font-family:var(--mono);font-size:15px;letter-spacing:.08em;
  transition:border-color .16s ease;
}
.checker input[type=text]:focus{border-color:var(--accent);outline:none}
.result{margin-top:14px;font-size:15px;min-height:24px;opacity:0;transform:translateY(4px);transition:opacity .24s ease,transform .24s var(--ease-out)}
.result.show{opacity:1;transform:none}
.result.ok{color:var(--good)}
.result.bad{color:var(--bad)}
.note{margin-top:14px;color:var(--text-quiet);font-size:13.5px}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:26px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:clamp(16px,1.8vw,18.5px);font-weight:600;
  transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--accent)}}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.8px solid var(--text-quiet);border-bottom:1.8px solid var(--text-quiet);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .22s var(--ease-out),border-color .16s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg);border-color:var(--accent)}
.faq .ans{padding:0 0 22px;color:var(--text-2);max-width:70ch}

/* ---------- contact ---------- */
.contactbox{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,50px);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  padding:clamp(24px,3.6vw,42px);box-shadow:var(--shadow-1);
}
@media (max-width:900px){.contactbox{grid-template-columns:1fr}}
.field{margin-top:15px}
.field label{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.field input,.field textarea{
  width:100%;margin-top:7px;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r-s);
  padding:12px 14px;color:var(--text);font-family:var(--sans);font-size:16px;
  transition:border-color .16s ease;
}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--accent);outline:none}
.field.bad input,.field.bad textarea{border-color:var(--bad)}
.field .why{display:none;color:var(--bad);font-size:13px;margin-top:5px}
.field.bad .why{display:block}
.sent{margin-top:12px;color:var(--good);font-size:14.5px;opacity:0;transform:translateY(4px);transition:opacity .24s ease,transform .24s var(--ease-out)}
.sent.show{opacity:1;transform:none}
.wa{display:flex;flex-direction:column;justify-content:center;gap:14px;border-left:1px solid var(--line);padding-left:clamp(0px,3vw,36px)}
@media (max-width:900px){.wa{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:26px}}

/* ---------- footer ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:54px 0 34px;font-size:14.5px}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px}
@media (max-width:980px){.fgrid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:620px){.fgrid{grid-template-columns:1fr 1fr}}
.fcol h4{font-size:13px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-quiet);font-weight:500}
.fcol ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.fcol a{color:var(--text-2);text-decoration:none;transition:color .16s ease}
@media (hover:hover) and (pointer:fine){.fcol a:hover{color:var(--text)}}
.fbrand p{margin-top:12px;color:var(--text-2);max-width:34ch}
.subs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.subs input{
  flex:1 1 170px;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;
  padding:10px 16px;color:var(--text);font:inherit;font-size:14px;transition:border-color .16s ease;
}
.subs input:focus{border-color:var(--accent);outline:none}
.fbot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--text-quiet);font-size:13.5px}
.fbot .disc{max-width:64ch}

/* ---------- cart drawer ---------- */
.scrimlayer{
  position:fixed;inset:0;z-index:60;background:rgba(13,15,18,.42);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s var(--ease-out);
}
.scrimlayer[data-open="true"]{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(440px,100%);
  background:var(--bg);border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .32s var(--ease-drawer);
}
.drawer[data-open="true"]{transform:none}
.drawer header{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.drawer header h2{font-size:18px;margin-right:auto}
.drawer .close{
  background:none;border:1px solid var(--line-strong);border-radius:var(--r-s);width:34px;height:34px;
  color:var(--text);cursor:pointer;font-size:17px;line-height:1;
  transition:border-color .16s ease,background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){.drawer .close:hover{background:var(--surface-2);border-color:var(--text-2)}}
.drawer .scroll{flex:1;overflow-y:auto;padding:18px 20px;overscroll-behavior:contain}
.drawer footer{padding:16px 20px 20px;border-top:1px solid var(--line);flex:0 0 auto;background:var(--surface)}
.line{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.line:last-of-type{border-bottom:0}
.line .thumb{width:60px;height:60px;border-radius:var(--r-s);background:var(--surface-2);border:1px solid var(--line);overflow:hidden;display:grid;place-items:center}
.line .thumb img{width:100%;height:100%;object-fit:cover}
.line .thumb svg{width:26px;height:26px;fill:none;stroke:var(--text-quiet);stroke-width:1.5}
.line h4{font-size:15px;font-weight:600}
.line .sub{font-family:var(--mono);font-size:11.5px;color:var(--text-quiet);margin-top:3px}
.line .amt{text-align:right;font-weight:700;white-space:nowrap}
.step2{display:inline-flex;align-items:center;margin-top:8px;border:1px solid var(--line-strong);border-radius:var(--r-s);overflow:hidden}
.step2 button{
  width:30px;height:30px;background:none;border:0;color:var(--text);cursor:pointer;font-size:15px;line-height:1;
  transition:background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){.step2 button:hover{background:var(--surface-2)}}
.step2 button[disabled]{opacity:.35;cursor:not-allowed}
.step2 .q{min-width:32px;text-align:center;font-family:var(--mono);font-size:13.5px}
.line .drop{display:block;margin-top:6px;background:none;border:0;padding:0;color:var(--text-quiet);cursor:pointer;font:inherit;font-size:12.5px;text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.line .drop:hover{color:var(--bad)}}
.totals{font-size:14.5px}
.totals div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;color:var(--text-2)}
.totals div.grand{color:var(--text);font-weight:800;font-size:19px;padding-top:11px;margin-top:7px;border-top:1px solid var(--line)}
.freehint{margin-top:9px;font-size:13px;color:var(--text-quiet)}
.pay{display:grid;gap:9px;margin-top:6px}
.paylab{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--line-strong);border-radius:var(--r-m);
  cursor:pointer;transition:border-color .16s ease,background-color .16s ease;
}
@media (hover:hover) and (pointer:fine){.paylab:hover{border-color:var(--text-2)}}
.paylab input{margin-top:3px;accent-color:var(--accent)}
.paylab b{font-weight:600;font-size:14.5px}
.paylab span{display:block;color:var(--text-2);font-size:13px;margin-top:3px}
.paylab:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media (max-width:420px){.two{grid-template-columns:1fr}}
.drawerbanner{border:1px solid var(--line-strong);background:var(--surface-2);border-radius:var(--r-m);padding:14px 16px;font-size:14px;color:var(--text-2);margin-bottom:14px}
.drawerbanner b{color:var(--text);display:block;margin-bottom:5px}
.drawerbanner code{font-family:var(--mono);font-size:13px;color:var(--accent);word-break:break-all}
.ordok{text-align:center;padding:24px 6px}
.ordok .tick{width:58px;height:58px;margin:0 auto 18px;border-radius:999px;border:1px solid var(--good);display:grid;place-items:center}
.ordok .tick svg{width:26px;height:26px;fill:none;stroke:var(--good);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ordok h3{font-size:21px}
.ordok .ref{font-family:var(--mono);font-size:18px;letter-spacing:.12em;color:var(--accent);margin-top:12px}
.ordok p{margin-top:10px;color:var(--text-2);font-size:14.5px}
.empty{padding:32px 4px;text-align:center;color:var(--text-2)}

/* ---------- reduced motion: gentler, not zero ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:opacity .2s ease}
  .track{transition:none}
  .drawer{transition:opacity .2s ease}
  .fcard:hover,.promo:hover,.prod:hover,.cat:hover{transform:none}
  .fcard:hover .pic img,.promo:hover .pic img{transform:none}
  .btn:active{transform:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}


/* ---------------------------------------------------------------------------
   These declarations used to sit in style attributes. The content policy
   refuses those outright, so they live here instead. The values are copied
   across unchanged: this is the same page, described in the same terms, in the
   place a stylesheet belongs.
   --------------------------------------------------------------------------- */
.btn.full{width:100%}
.btn.full.gap{margin-top:14px}
.btn.full.gap-sm{margin-top:9px}
.cart-emptyhint{margin-top:6px;color:var(--text-quiet)}
.co-sec{font-size:16px;margin-top:20px}
.why.co-err{display:none;margin-top:12px}
.ok-ref{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--text-quiet);margin-top:16px}
.ok-total{margin-top:6px}
.p-back{text-align:center}
.page-home{margin-top:22px}
.page-home.wide{margin-top:26px}
.auth-head{font-size:clamp(23px,3vw,34px);margin-top:12px}
.auth-lede{color:var(--text-2);margin-top:12px;max-width:52ch}
.wa-head{font-size:clamp(19px,2.2vw,24px)}
.wa-body{color:var(--text-2)}
.subs-sent{margin-top:8px}