/* ==================================================================
   voopoostore theme
   Every token below was read off the live shop.voopoo.com via CDP,
   not chosen by eye. See DESIGN-TOKENS.md.
   ================================================================== */

/* --- Urbanist: VOOPOO's own typeface, variable 300-700, self-hosted --- */
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/urbanist-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/urbanist-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,
    U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,
    U+2C60-2C7F,U+A720-A7FF;
}
/* Urbanist ships no Cyrillic. Manrope covers /ru and matches its proportions. */
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/manrope-cyrillic-ext.woff2) format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}
/* Thai (/th) and Arabic (/eg): neither Urbanist nor Manrope covers these scripts,
   so without these the browser silently substitutes a system font and the storefront
   stops matching the rest of the estate. unicode-range keeps them off every other locale. */
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/noto-sans-thai-thai.woff2) format('woff2');
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}
@font-face{
  font-family:Urbanist;font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/fonts/noto-sans-arabic-arabic.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,
    U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFF;
}

:root{
  --paper:#f7f7f7;          /* their page ground */
  --surface:#ffffff;        /* cards */
  --shot:#f8f8f8;           /* image plate */
  --ink:#333333;            /* all body text, not pure black */
  --ink-strong:#111111;
  --line:rgba(51,51,51,.2); /* the only separator in the system */
  --line-soft:rgba(51,51,51,.1);
  --signal:#e9ff00;         /* VOOPOO acid lime */
  --signal-soft:#f7ffa6;
  --sale:#e00000;
  --tag:#ee4700;
  --muted:#6f6f72;
  --r-card:40px;            /* --card-border-radius */
  --r-pill:999px;           /* --button-border-radius: 40px == pill at our heights */
  --wrap:1152px;            /* their inner content width */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font:400 16px/1.6 Urbanist,system-ui,"Segoe UI",sans-serif;
  font-synthesis-weight:none;
}
a{color:inherit}
img{max-width:100%;display:block}
/* Numerals run left-to-right even inside RTL text. Without isolation the currency
   symbol detaches and jumps to the wrong end of the price on /eg. */
.price,.was,.save,.pr b,.pr s,.mktmenu a span,.vat{unicode-bidi:isolate}
/* Thai has no spaces between words, so the default break rules split mid-word. */
:root:lang(th) body{line-height:1.9;word-break:break-word;line-break:loose}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------------- utility bar ---------------- */
.util{background:var(--ink-strong);color:#d7d7d4;font-size:13px}
.util .wrap{display:flex;gap:26px;align-items:center;padding-top:9px;padding-bottom:9px}
.util strong{color:var(--signal);font-weight:600}
.util .right{margin-inline-start:auto;position:relative}

/* market selector: a dropdown, not a strip. 13 markets will never fit a header bar,
   and VOOPOO themselves use a "Global" dropdown for the same reason. */
.mkt{background:none;border:1px solid rgba(255,255,255,.25);color:#fff;font:inherit;
  font-size:13px;padding:5px 12px;border-radius:var(--r-pill);cursor:pointer;
  display:flex;align-items:center;gap:7px}
.mkt:hover{border-color:rgba(255,255,255,.6)}
.mkt .car{font-size:9px;opacity:.7}
.mktmenu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);background:#fff;color:var(--ink);
  border:1px solid var(--line-soft);border-radius:20px;padding:10px;
  /* a flat 330px is wider than a 320px phone, so the panel hung off the edge */
  min-width:min(330px,calc(100vw - 28px));max-width:calc(100vw - 28px);
  display:none;z-index:40;max-height:70vh;overflow:auto}
.mktmenu[open]{display:block}
.mktmenu h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:8px 12px 6px;font-weight:600}
.mktmenu a{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;
  border-radius:var(--r-pill);font-size:14px;color:var(--ink)}
.mktmenu a:hover{background:var(--paper)}
.mktmenu a.on{background:var(--signal);font-weight:600}
.mktmenu a b{font-weight:600;min-width:26px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.mktmenu a.on b{color:var(--ink-strong)}
.mktmenu a span{color:var(--muted);margin-inline-start:auto;font-size:13px}
.mktmenu a.on span{color:var(--ink-strong)}
.mktmenu .soon{opacity:.45;pointer-events:none}

/* ---------------- header ---------------- */
header{background:var(--surface);border-bottom:1px solid var(--line-soft);
  position:sticky;top:0;z-index:20}
.hd{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:12px;padding:18px 0;text-decoration:none}
.brand .logo{height:22px;width:auto}
.brand small{color:var(--muted);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  border-inline-start:1px solid var(--line);padding-inline-start:12px;line-height:1.2;font-weight:600}
nav{display:flex;gap:4px;margin-inline-start:auto}
nav a{text-decoration:none;font-size:16px;font-weight:700;color:var(--ink);
  padding:10px 14px;border-radius:var(--r-pill)}
nav a:hover{background:var(--paper)}
nav a.on{background:var(--signal);color:var(--ink-strong)}
.burger{display:none}

/* ---------------- mobile header ----------------
 * The desktop header is one non-wrapping flex row: logo + strapline + 8 nav
 * links + search + cart. At 320px that is roughly 780px of content in a 320px
 * box, so the row simply ran off the screen and dragged the whole page sideways
 * with it. There was no header media query at all.
 *
 * Mobile keeps only what a thumb actually needs in reach - logo, search, cart,
 * menu - and moves the eight series links into a drawer. The strapline and the
 * two utility-bar reassurance lines are desktop-only copy: they are not
 * navigation, and on a phone they were the things pushing the interactive
 * controls off the edge.
 */
@media(max-width:900px){
  .util .wrap{gap:12px;padding-inline:16px}
  .util .wrap > span:not(.right){display:none}
  .util .right{margin-inline-start:0;width:100%}
  .mkt{width:100%;justify-content:center}

  .hd{gap:6px;padding:0 14px}
  /* min-width:0 lets the brand shrink instead of forcing the row wider than the
     viewport, which is what a flex item does by default. */
  .brand{padding:12px 0;gap:8px;min-width:0;flex:0 1 auto;overflow:hidden}
  .brand .logo{height:19px;max-width:100%}
  .brand small{display:none}
  .searchbtn{margin-inline-end:0}
  /* the three controls sit together at the end and never shrink */
  .searchbtn,[data-cart-open],.burger{flex:0 0 auto;margin-inline-start:0}
  .searchbtn{margin-inline-start:auto}
  .burger{display:flex}

  /* nav as an off-canvas drawer. position:fixed keeps it out of the document's
     scroll width while closed, so parking it offscreen cannot itself cause the
     sideways scroll this is meant to fix. */
  nav{position:fixed;inset-block:0;inset-inline-end:0;width:min(320px,86vw);
    background:var(--surface);border-inline-start:1px solid var(--line-soft);
    flex-direction:column;gap:0;margin:0;padding:72px 18px 24px;
    transform:translateX(101%);transition:transform .22s ease,visibility .22s;
    visibility:hidden;z-index:60;overflow-y:auto;overscroll-behavior:contain}
  body.nav-open nav{transform:none;visibility:visible}
  nav a{padding:14px 6px;border-radius:0;border-bottom:1px solid var(--line-soft);
    font-size:16px}
  nav a.on{background:none;color:var(--ink-strong);
    box-shadow:inset 3px 0 0 var(--signal);padding-inline-start:12px}
  body.nav-open{overflow:hidden}
  body.nav-open::after{content:'';position:fixed;inset:0;z-index:55;
    background:rgba(17,17,19,.5)}
}
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  nav{transition:none}
}

/* ---------------- breadcrumb ---------------- */
.crumb{max-width:var(--wrap);margin:0 auto;padding:18px 24px 6px;font-size:14px;color:var(--muted)}
.crumb a{text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;padding:0 8px;opacity:.5}

/* ---------------- product layout ---------------- */
.pdp{max-width:var(--wrap);margin:0 auto;padding:10px 24px 64px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media(max-width:900px){.pdp{grid-template-columns:1fr;gap:32px}}

/* media block: thumbnail rail sits BESIDE the hero on desktop so both are above
   the fold, and drops under it on mobile */
.media{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;align-items:start}
@media(max-width:900px){.media{grid-template-columns:1fr}}

.shot{background:var(--shot);border:1px solid var(--line-soft);border-radius:var(--r-card);
  position:relative;overflow:hidden}
/* fixed height, not 1:1 — a square panel at this width runs past the fold and
   strands the product halfway down the page */
.shot img{width:100%;height:470px;object-fit:contain;padding:24px}
@media(max-width:900px){.shot img{height:340px}}
.shot .tag{position:absolute;inset-inline-start:22px;top:22px;background:var(--ink-strong);color:var(--signal);
  font-size:12px;font-weight:600;padding:7px 15px;border-radius:var(--r-pill)}

.thumbs{display:flex;flex-direction:column;gap:10px}
/* On a phone the thumbnail strip stacks ABOVE the main shot, so the first thing
   on the page was a row of 76px tiles and the actual product image started below
   the fold. It is also redundant now: the colour select and the swatch row both
   switch the main image, which is all the thumbnails were for. Desktop keeps
   them, where they sit in their own column and cost nothing. */
@media(max-width:900px){.thumbs{display:none}}
.thumbs img{width:76px;height:76px;object-fit:contain;background:var(--shot);
  border:1px solid var(--line-soft);border-radius:14px;padding:7px;cursor:pointer}
.thumbs img.on{border-color:var(--ink)}

/* ---------------- buy column ---------------- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
h1{font-size:34px;line-height:38px;font-weight:600;margin:10px 0 4px;color:var(--ink)}
h1 em{font-style:normal;font-weight:300}
.sub{color:var(--muted);font-size:16px;margin-bottom:22px}

.pricerow{display:flex;align-items:center;gap:14px;padding:18px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.price{font-size:34px;line-height:1;font-weight:600;color:var(--ink-strong)}
.was{color:var(--muted);text-decoration:line-through;font-size:16px}
.save{background:var(--signal);color:var(--ink-strong);font-size:13px;font-weight:700;
  padding:5px 13px;border-radius:var(--r-pill)}
.vat{color:var(--muted);font-size:14px;margin-top:10px}
.vat a{color:var(--muted)}

/* colour swatches: square by VOOPOO's own rule (--variant-selector-radius:0), and
   real <a> links so each colour page is crawlable from its siblings */
.swlabel{margin:26px 0 10px;font-size:15px}
.swlabel b{font-weight:600}
.swlabel span{color:var(--muted)}
.sw{display:flex;flex-wrap:wrap;gap:8px}
.sw a,.sw span{width:52px;height:52px;border:1px solid var(--line-soft);background:var(--shot);
  display:block;text-decoration:none;overflow:hidden}
.sw img{width:100%;height:100%;object-fit:cover}
.sw span{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-4px}
.sw a:hover{border-color:var(--ink)}

/* flex-wrap + a full-width first item puts the colour select on its own line
   above quantity and the button, so nothing else in the buy box moves. */
.buy{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;align-items:center}
.colsel{flex:1 1 100%;display:flex;align-items:center;gap:10px;margin-bottom:2px}
.colsel span{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.colsel select{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:11px 14px;cursor:pointer}
.colsel select:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qty{width:76px;border:1px solid var(--line);border-radius:var(--r-pill);text-align:center;
  font:inherit;font-weight:600;padding:0 8px;background:var(--surface);color:var(--ink)}
.cta{flex:1;background:var(--signal);color:var(--ink-strong);border:0;border-radius:var(--r-pill);
  font:inherit;font-size:16px;font-weight:600;padding:17px;cursor:pointer}
.cta:hover{background:var(--ink-strong);color:var(--signal)}

.assure{margin-top:20px;display:grid;gap:9px;font-size:15px;color:var(--muted)}
.assure div{display:flex;gap:10px}
.assure b{color:var(--ink);font-weight:600}

/* spec table: hairlines only, no card, no zebra */
.specs{margin-top:32px;border-top:1px solid var(--line)}
.specs h2{font-size:15px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:14px 0 6px;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:15px}
td{padding:10px 0;border-top:1px solid var(--line-soft);vertical-align:top}
td:first-child{color:var(--muted);width:44%}
td:last-child{font-weight:600}

/* ---------------- long copy ---------------- */
.copy{max-width:var(--wrap);margin:0 auto;padding:0 24px 72px;
  display:grid;grid-template-columns:1fr 340px;gap:48px}
@media(max-width:900px){.copy{grid-template-columns:1fr}}
.copy h2{font-size:26px;line-height:1.2;font-weight:600;margin:36px 0 12px;color:var(--ink)}
.copy h2:first-child{margin-top:0}
.copy p{margin-bottom:15px;max-width:64ch}
.copy p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px}
.copy p a:hover{text-decoration-color:var(--ink)}
.note{background:var(--surface);border:1px solid var(--line-soft);border-radius:24px;
  padding:20px 22px;font-size:15px;margin:6px 0 4px;position:relative;overflow:hidden}
.note::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:5px;background:var(--signal)}
.note b{display:block;margin-bottom:6px;font-weight:600;color:var(--ink)}

aside .box{border:1px solid var(--line-soft);background:var(--surface);
  border-radius:var(--r-card);padding:24px 26px;font-size:15px}
aside h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-bottom:14px;font-weight:600}
aside ul{list-style:none;display:grid;gap:2px}
aside li a{text-decoration:none;display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line-soft)}
aside li:last-child a{border-bottom:0}
aside li a:hover b{text-decoration:underline}
aside li b{font-weight:600}
aside li span{color:var(--muted);white-space:nowrap}

/* ---------------- related product cards ---------------- */
.related{max-width:var(--wrap);margin:0 auto;padding:8px 24px 72px}
.related h2{font-size:26px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.related .lede{color:var(--muted);margin-bottom:22px;max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-card);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;position:relative}
.card:hover{border-color:rgba(51,51,51,.35)}
.card .im{background:var(--shot);position:relative}
.card .im img{width:100%;height:190px;object-fit:contain;padding:16px}
.card .flag{position:absolute;inset-inline-start:14px;top:14px;background:var(--signal);color:var(--ink-strong);
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--r-pill)}
.card .b{padding:16px 20px 20px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:17px;font-weight:600;color:var(--ink);line-height:1.25}
.card .sp{font-size:13.5px;color:var(--muted);margin:5px 0 0}
.card .cols{font-size:13px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px}
.card .dots{display:flex;gap:3px}
.card .dots i{width:11px;height:11px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.15)}
.card .pr{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;gap:8px}
.card .pr b{font-size:20px;font-weight:600;color:var(--ink-strong)}
.card .pr s{color:var(--muted);font-size:13.5px}
.card:hover h3{text-decoration:underline}

/* ---------------- faq ---------------- */
.faq{margin-top:38px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line-soft)}
summary{padding:16px 0;font-weight:600;cursor:pointer;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-weight:400;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{padding-bottom:16px;font-size:16px;color:var(--muted);max-width:66ch}

/* ---------------- footer ---------------- */
footer{background:var(--ink-strong);color:#9c9c98;font-size:15px;margin-top:24px}
.ft{max-width:var(--wrap);margin:0 auto;padding:48px 24px 30px;display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
@media(max-width:900px){.ft{grid-template-columns:1fr 1fr}}
footer .logo{height:20px;width:auto;margin-bottom:14px}
footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:14px;font-weight:600}
footer a{color:#9c9c98;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--signal)}
.warn{border-top:1px solid rgba(255,255,255,.1)}
.warn .wrap{padding:14px 24px;font-size:13px;color:#84847f}
.disc{border-top:1px solid rgba(255,255,255,.1)}
.disc .wrap{padding:16px 24px 24px;font-size:13px;color:#6e6e6a;line-height:1.65}

/* hub H1 sits with the product grid, not above a wall of prose */
.hubh1{font-size:34px;line-height:1.15;font-weight:600;margin-bottom:6px;color:var(--ink)}
/* banner: separate mobile composition, never a squashed desktop crop */
.banner picture,.banner img{width:100%;height:auto;display:block;border-radius:var(--r-card)}
.sw .nolink{opacity:.5;cursor:default}
.sw span.on{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-4px;opacity:1}
/* every swatch is clickable: link or button, same look */
.sw .sw-pick{width:52px;height:52px;border:1px solid var(--line-soft);background:var(--shot);
  display:block;padding:0;cursor:pointer;overflow:hidden;text-decoration:none}
.sw .sw-pick.on{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:-4px}
.sw .sw-pick:hover{border-color:var(--ink)}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--signal);color:#111;
  padding:12px 20px;z-index:100;font-weight:600;border-radius:0 0 var(--r-pill) 0}
.skip-link:focus{inset-inline-start:0}

/* ---------------- homepage blocks (PAGE-LAYOUT-RULES B) ---------------- */
.hero{max-width:var(--wrap);margin:0 auto;padding:56px 24px 30px}
.hero h1{font-size:46px;line-height:1.1;font-weight:600;margin:8px 0 14px;text-wrap:balance;max-width:20ch}
.hero .lede{font-size:19px;color:var(--muted);max-width:62ch;margin-bottom:24px}
.heroCta{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;background:var(--signal);color:var(--ink-strong);padding:14px 28px;
  border-radius:var(--r-pill);text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn:hover{background:var(--ink-strong);color:var(--signal)}
.btn.ghost:hover{background:var(--ink-strong);color:var(--signal);border-color:var(--ink-strong)}
.trustbar{max-width:var(--wrap);margin:0 auto 34px;padding:16px 24px;display:flex;gap:28px;
  flex-wrap:wrap;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  font-size:14.5px;color:var(--muted)}
.trustbar span{position:relative;padding-inline-start:18px}
.trustbar span::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--signal)}
.preview{max-width:var(--wrap);margin:0 auto;padding:26px 24px;border-top:1px solid var(--line-soft)}
.preview h2{font-size:24px;font-weight:600;margin-bottom:10px}
.preview p{max-width:70ch;color:var(--ink)}
.chips{list-style:none;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding:0}
.chips a{display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:8px 16px;text-decoration:none;font-size:14px;background:var(--surface)}
.chips a:hover{border-color:var(--ink);background:var(--signal)}
.quick,.why,.faqsec,.news{max-width:var(--wrap);margin:0 auto;padding:30px 24px;border-top:1px solid var(--line-soft)}
.quick h2,.why h2,.faqsec h2,.news h2{font-size:24px;font-weight:600;margin-bottom:14px}
.why p{max-width:72ch;margin-bottom:14px}
.cards.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards.c4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.cards.c4{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:34px}}

/* ---------------- mobile product grid ----------------
 * One card per row below 460px meant scrolling past a full phone screen per
 * product. With ~100 products that is a lot of thumb work to see what is even
 * stocked, so the grid stays at two columns all the way down and the card
 * shrinks to suit: smaller image box, tighter padding, smaller price.
 * `auto-fill minmax(210px,1fr)` also collapsed to one column on a phone, so it
 * is pinned explicitly rather than left to the intrinsic sizing.
 */
@media(max-width:760px){
  .cards{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media(max-width:560px){
  .cards,.cards.c4{grid-template-columns:repeat(2,1fr);gap:10px}
  .card .im img{height:132px;padding:10px}
  .card .b{padding:10px 12px 14px}
  .card h3{font-size:14px;line-height:1.2}
  .card .sp{font-size:12px}
  .card .cols{font-size:11.5px;margin-top:7px;gap:4px}
  .card .dots i{width:9px;height:9px}
  .card .pr{margin-top:9px;padding-top:9px;flex-wrap:wrap;gap:2px 6px}
  .card .pr b{font-size:16px}
  .card .pr s{font-size:12px}
  .card .flag{inset-inline-start:8px;top:8px;font-size:10px}
  .wrap{padding:0 14px}

  /* ---- what actually made the page scroll sideways, per language ----
   * Measured, not guessed: min-content of .pricerow was 383px on /hu/ because
   * a forint price is the longest money format we render ("10 379,00 Ft"), and
   * three of them sat in one non-wrapping flex row. That single row set the
   * min-content of the whole product column, so the page was 407px wide in a
   * 320px viewport. German and Thai were clean, which is exactly why this
   * needed measuring in-language rather than eyeballing one locale. */
  .pricerow{flex-wrap:wrap;row-gap:4px}

  /* Russian footer: .ft min-content was 352px, set by compounds like
     "Независимый" inside a 2-up column. One column, and let a word that is
     still too wide break rather than push the page. */
  .ft{grid-template-columns:1fr;padding:32px 14px 24px}
  footer p,footer a,.ft h4{overflow-wrap:anywhere}

  /* Hungarian spec labels are the longest in the estate
     ("Akkumulátor kapacitása"), so the cell must be allowed to break. */
  .specs td{overflow-wrap:anywhere}
  .specs td:first-child{width:42%}

  .hero{padding:28px 14px 20px}
  .hero h1{font-size:27px}
  .hero .lede{font-size:16px}
  .hubh1{font-size:25px}
  .pdp{padding:8px 14px 44px}
  .crumb{padding:12px 14px 4px}
}

/* Tap targets. 17px-high links are hard to hit and fail the 24px minimum that
   both WCAG 2.2 and Google's mobile report look for. Breadcrumb and footer
   links were the only ones under it. */
@media(max-width:900px){
  footer a{padding:8px 0}
  .crumb a{display:inline-block;padding:5px 0}
}
.preview .cards{margin-top:18px}
.prevfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.prevfoot .chips{margin-top:0}
.seeall{text-decoration:none;font-weight:600;border-bottom:2px solid var(--signal);padding-bottom:2px}
.seeall:hover{border-bottom-color:var(--ink)}
.stars{display:flex;align-items:center;gap:6px;margin:6px 0 10px;font-size:15px}
.stars .s{color:#d8d8d8;font-size:17px;line-height:1}
.stars .s.on{color:var(--ink-strong)}
.stars .s.half{background:linear-gradient(90deg,var(--ink-strong) 50%,#d8d8d8 50%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stars b{font-weight:600}
.stars span{color:var(--muted);font-size:14px}
.stars.none{color:var(--muted);font-size:14px}

/* Series navigation with thumbnails. A column of five text links says nothing
   about what an Argus looks like next to a Drag. */
.box.withpix ul{display:flex;flex-direction:column;gap:2px}
.box.withpix li a{display:flex;align-items:center;gap:10px;padding:7px 0}
.box.withpix img.thumb{width:44px;height:44px;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:10px;flex:0 0 44px}

/* ==================================================================
   Long-form polish (2026-08-10)

   Added after the copy waves put 400 to 1500 words on every model,
   series and collection page. The tokens are unchanged: Urbanist,
   #E9FF00, borders only, zero shadows, square swatch motif. What
   changes is the rhythm of a long page, which nothing had addressed
   because until now there was no long page.
   ================================================================== */

/* 1. Section rhythm. Ten h2 blocks in a row at the same weight and the same
      36px gap read as one slab. A square signal marker in the left margin
      gives the eye an anchor per section and reuses the square-swatch motif
      rather than introducing a new shape. */
.copy h2{margin-top:44px;position:relative}
.copy h2::before{
  content:"";position:absolute;inset-inline-start:-18px;top:.62em;
  width:8px;height:8px;background:var(--signal);
}
@media(max-width:1200px){.copy h2::before{display:none}}

/* 2. Reading comfort over a long column. 1.6 is right for a card, slightly
      loose is right for 1500 words. */
.copy p{line-height:1.72}
.copy .lede{font-size:18px;color:var(--muted);max-width:62ch;margin-bottom:22px}

/* 3. The comparison list had NO styling and fell back to browser bullets, in
      the one place on the page carrying structured data. It now reads as the
      table it always was, using the same row idiom as the sidebar. */
.copy ul.cmp{
  list-style:none;margin:4px 0 18px;padding:0;
  border:1px solid var(--line-soft);border-radius:24px;background:var(--surface);
  overflow:hidden;max-width:64ch;
}
/* Rows are blocks, not two flex columns. The markup is
   `<li><strong>Name</strong>: spec run</li>`, and splitting it left the colon
   orphaned at the head of the right column. A block row keeps the sentence
   intact and the bordered rows still carry the structure. */
.copy ul.cmp li{
  padding:12px 20px;border-bottom:1px solid var(--line-soft);
  font-size:15px;line-height:1.55;color:var(--muted);
}
.copy ul.cmp li:last-child{border-bottom:0}
.copy ul.cmp li strong{font-weight:600;color:var(--ink)}

/* 4. The right column ran out well before the prose did, leaving a third of
      the page empty from the middle down. Sticking it keeps the crawl mesh in
      view for the whole scroll, which is the point of having it. */
@media(min-width:901px){
  .copy > aside{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow:auto}
  .copy > aside::-webkit-scrollbar{width:0}
}

/* 5. FAQ sits directly under a wall of prose and needs a visible start. */
.faq{margin-top:46px;padding-top:6px}
.faq summary{font-size:16px}

/* 6. Hue notes and other trailing sections on hub pages should not butt
      straight into the footer. */
.copy{padding-bottom:88px}

/* ==================================================================
   Cart and checkout panel (2026-08-10)
   The storefront had no cart at all. Same tokens: borders only, zero
   shadows, pill buttons, signal lime for the one primary action.
   ================================================================== */
.cartbtn{background:none;border:0;cursor:pointer;color:var(--ink);display:flex;
  align-items:center;gap:6px;padding:6px;border-radius:var(--r-pill);position:relative}
.cartbtn:hover{background:var(--line-soft)}
.cartbtn [data-cart-count]{font-size:12px;font-weight:600;min-width:18px;height:18px;
  border-radius:999px;display:none;align-items:center;justify-content:center;
  background:var(--signal);color:#111;padding:0 5px}
.cartbtn [data-cart-count].on{display:inline-flex}

.vs-backdrop{position:fixed;inset:0;background:rgba(17,17,17,.38);opacity:0;
  pointer-events:none;transition:opacity .18s ease;z-index:60}
.vs-panel{position:fixed;inset-block:0;inset-inline-end:0;width:min(440px,100%);
  background:var(--surface);border-inline-start:1px solid var(--line);
  transform:translateX(100%);transition:transform .22s ease;z-index:61;
  display:flex;flex-direction:column;overflow:hidden}
[dir=rtl] .vs-panel{transform:translateX(-100%)}
.vs-open .vs-backdrop{opacity:1;pointer-events:auto}
.vs-open .vs-panel{transform:none}
.vs-open{overflow:hidden}

.vs-head{display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--line)}
.vs-head h2{font-size:20px;font-weight:600;text-transform:capitalize}
.vs-close{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.vs-close:hover{color:var(--ink)}
.vs-body{padding:20px 24px 28px;overflow:auto;flex:1}
.vs-empty{color:var(--muted)}

.vs-line{display:grid;grid-template-columns:56px 1fr auto auto auto;gap:12px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.vs-line img,.vs-noimg{width:56px;height:56px;object-fit:contain;background:var(--shot);
  border:1px solid var(--line-soft);border-radius:10px}
.vs-meta{min-width:0}
.vs-meta b{display:block;font-weight:600;font-size:15px;line-height:1.3}
.vs-meta span{color:var(--muted);font-size:13px}
.vs-qty{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:3px 8px}
.vs-qty button{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;
  color:var(--muted);width:18px}
.vs-qty button:hover{color:var(--ink)}
.vs-qty span{font-size:14px;font-weight:600;min-width:14px;text-align:center}
.vs-line-total{font-weight:600;font-size:15px;white-space:nowrap}
.vs-rm{background:none;border:0;cursor:pointer;color:var(--muted);font-size:20px;line-height:1}
.vs-rm:hover{color:var(--sale)}

.vs-note{margin:16px 0 0;font-size:14px;color:var(--muted)}
.vs-note.on{color:var(--ink);font-weight:600}
.vs-warn{margin:16px 0 0;font-size:14px;color:var(--sale)}
.vs-ok{font-size:18px;font-weight:600;margin-bottom:8px}
.vs-sum{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:22px 0 20px;
  padding-top:18px;border-top:1px solid var(--line);font-size:15px}
.vs-sum dt{color:var(--muted)}
.vs-sum dd{text-align:end;font-weight:600}
.vs-sum .tot{font-size:19px;color:var(--ink)}
.vs-cta{width:100%;background:var(--signal);color:#111;border:0;border-radius:var(--r-pill);
  padding:15px 22px;font:600 16px/1 Urbanist,system-ui,sans-serif;cursor:pointer}
.vs-cta:hover{filter:brightness(.95)}
.vs-cta:disabled{opacity:.6;cursor:default}

.vs-form{display:grid;gap:13px}
.vs-form h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin-top:10px;font-weight:600}
.vs-f{display:grid;gap:5px}
.vs-f span{font-size:13px;color:var(--muted)}
.vs-f input{border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font:400 15px/1.3 Urbanist,system-ui,sans-serif;background:var(--surface);color:var(--ink)}
.vs-f input:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
/* order note: same box as the other fields, so it reads as one form */
.vs-note textarea{border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  font:inherit;font-size:15px;color:var(--ink);background:#fff;width:100%;resize:vertical;
  min-height:76px}
.vs-note textarea:focus{outline:2px solid var(--signal);outline-offset:1px;border-color:transparent}
.vs-row{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.vs-pay{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:18px;padding:13px 15px;cursor:pointer}
.vs-pay:has(input:checked){border-color:var(--ink)}
.vs-pay b{display:block;font-weight:600;font-size:15px}
.vs-pay small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.vs-err{color:var(--sale);font-size:14px;margin:0}
.vs-fine{color:var(--muted);font-size:12px;line-height:1.5;margin:0}

.vs-copy{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;
  border:1px solid var(--line-soft);border-radius:16px;padding:12px 15px;margin-top:10px}
.vs-copy span{grid-column:1/-1;font-size:12px;color:var(--muted)}
.vs-copy code{font:600 15px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.vs-copy button{background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:6px 13px;font:600 13px Urbanist,system-ui,sans-serif;cursor:pointer;color:var(--ink)}
.vs-copy button:hover{background:var(--signal)}

/* ---- home: every model, grouped by series (2026-08-10) ---- */
.models{max-width:var(--wrap);margin:0 auto;padding:30px 24px;border-top:1px solid var(--line-soft)}
.models h2{font-size:24px;font-weight:600;margin-bottom:20px}
.models .modelgrp{border-top:1px solid var(--line-soft);padding:16px 0}
.models .modelgrp:first-of-type{border-top:0}
.models h3{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;align-items:baseline;gap:9px}
.models h3 a{text-decoration:none}
.models h3 a:hover{text-decoration:underline}
.models h3 span{color:var(--muted);font-size:13px;font-weight:400}
.models ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.models li a{display:inline-block;text-decoration:none;font-size:14px;
  border:1px solid var(--line-soft);border-radius:var(--r-pill);padding:6px 13px;color:var(--ink)}
.models li a:hover{border-color:var(--ink);background:var(--signal)}

/* --- checkout step 2: two-path handoff + order-bound live chat --------------
   Account details are never rendered (they are sent by e-mail or by a
   consultant in chat), so this step is a choice between those two routes. */
.vs-cta.alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.vs-cta.alt:hover{background:var(--ink);color:#fff;filter:none}
.vs-body h3{font:600 14px/1.3 Urbanist,system-ui,sans-serif;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);margin:22px 0 10px}
.vs-fine{color:var(--muted);font-size:12.5px;line-height:1.5;margin:6px 0 14px}
/* A method the basket does not qualify for stays visible but unselectable, so
   the customer can see the threshold rather than wonder where it went. */
.vs-pay.off{opacity:.5}
.vs-pay.off input{cursor:not-allowed}
.vs-lim{display:inline-block;margin-inline-start:8px;font-style:normal;font-size:12px;
  font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px}

.vs-chat{border:1px solid var(--line);border-radius:var(--r-card,18px);overflow:hidden;margin-top:6px}
.vs-chat-log{max-height:260px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;
  background:var(--surface,#fafafa)}
.vs-msg{max-width:85%;padding:8px 12px;border-radius:14px;font-size:14px;line-height:1.45;
  white-space:pre-wrap;word-break:break-word}
.vs-msg.c{align-self:flex-end;background:var(--signal);color:#111}
.vs-msg.a{align-self:flex-start;background:#fff;border:1px solid var(--line)}
.vs-msg.b{align-self:flex-start;background:transparent;border:1px dashed var(--line);color:var(--muted)}
.vs-chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.vs-chat-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:10px 14px;font:400 15px/1.3 Urbanist,system-ui,sans-serif;background:var(--surface);color:var(--ink)}
.vs-chat-form button{border:0;border-radius:var(--r-pill);background:var(--ink);color:#fff;
  padding:10px 18px;font:600 14px Urbanist,system-ui,sans-serif;cursor:pointer}
.vs-chat-form button:hover{filter:brightness(1.2)}

/* --- site search, per locale ------------------------------------------------
   The index is fetched on first open, so this UI is inert until used. */
.searchbtn{margin-inline-end:-4px}
.vs-sbd{display:none}
body.vs-sopen .vs-sbd{display:block;position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:90}
.vs-search{display:none;position:fixed;z-index:91;inset-block-start:0;inset-inline:0;
  margin:0 auto;max-width:640px;background:var(--paper,#fff);border-radius:0 0 var(--r-card,18px) var(--r-card,18px);
  box-shadow:0 18px 50px rgba(17,17,17,.18);overflow:hidden}
body.vs-sopen .vs-search{display:block}
.vs-search-in{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line)}
.vs-search-in input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:400 18px/1.4 Urbanist,system-ui,sans-serif;padding:6px 0}
.vs-search-in input:focus{outline:0}
.vs-search-in .vs-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;color:var(--muted)}
.vs-search-out{max-height:min(62vh,520px);overflow-y:auto}
.vs-hit{display:flex;align-items:center;gap:12px;padding:10px 16px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid rgba(51,51,51,.07)}
.vs-hit:hover,.vs-hit:focus{background:var(--surface,#fafafa)}
.vs-hit img{border-radius:8px;object-fit:cover;background:var(--surface)}
.vs-hit .vs-noimg{width:44px;height:44px;border-radius:8px;background:var(--surface);display:block}
.vs-hit-n{flex:1;font-size:15px}
.vs-hit-p{font-weight:600;font-size:14px;white-space:nowrap}
.vs-search-none{padding:18px 16px;color:var(--muted);font-size:14px}

/* ---------------- pay via live chat: the waiting state ----------------
 * A customer who has just ordered on a manual rail is dropped into a chat with
 * nobody in it. A silent empty box reads as broken, and they leave. So the
 * panel states plainly that a consultant is coming, names the method they
 * chose so they can see we know, and offers to e-mail them instead of making
 * them watch. Removed by store.js the moment a real consultant speaks. */
.vs-waiting{display:flex;flex-direction:column;gap:4px;padding:16px;margin-bottom:10px;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:14px}
.vs-waiting b{font-size:15px;color:var(--ink)}
.vs-waiting span{font-size:13.5px;color:var(--muted);line-height:1.5}
.vs-dots{display:flex;gap:4px;margin-bottom:2px}
.vs-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink);opacity:.25;
  animation:vsblink 1.2s infinite}
.vs-dots i:nth-child(2){animation-delay:.2s}
.vs-dots i:nth-child(3){animation-delay:.4s}
@keyframes vsblink{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(prefers-reduced-motion:reduce){.vs-dots i{animation:none}}
.vs-notify{display:block;margin-bottom:12px}
.vs-notify label{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:6px}
.vs-notify-row{display:flex;gap:8px}
.vs-notify input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font:400 14px system-ui,sans-serif;background:#fff;color:var(--ink)}
.vs-notify button{border:1px solid var(--ink);background:var(--signal);color:var(--ink-strong);
  border-radius:12px;padding:10px 16px;font:600 14px system-ui,sans-serif;cursor:pointer;white-space:nowrap}
@media(max-width:640px){.vs-search{border-radius:0;min-height:100vh}}