/* SOKK design system — ported verbatim from the design reference
 * (socks.annaluxbag.com/styles.css). This file is the fidelity baseline:
 * do not hand-tune it. Palette vars are injected on :root by sokk.js.
 * WordPress/WooCommerce output is mapped onto these classes in sokk-wp.css.
 *
 * sokk-storefront (W5): SCOPED. On kilambo.com this sheet loads next to a classic
 * theme (Shoptimizer; Storefront locally) and Elementor, so nothing in it may restyle
 * the host. Every reset, utility and Liquid Glass rule that used to be global is now
 * limited to SOKK markup with the scope selector S below. S is a :where() (specificity 0),
 * so every class rule keeps the exact specificity it had and the cascade against
 * sokk-wp.css is unchanged; only the bare element resets (a, button, img, h1-h4) are
 * lifted one element level (`html a`) so a host theme's own element rules cannot bleed
 * into SOKK markup whichever stylesheet prints first. Three things stay global on
 * purpose — the :root tokens, the html[data-glass="1"] page background / body::before
 * drift and its keyframes — because the Elementor pages are built on them. The full
 * decision list is in SCOPING.md.
 *
 *   S = :where(:is(.sokk-canvas *, [class*="sokk-"], [class*="sokk-"] *,
 *                  .catrow *, .split-banners *, .pgrid, .pgrid *, .wrap:has(> .pgrid),
 *                  .bt, .bt *)
 *              :not(:is(.sokk-canvas-header, .sokk-canvas-footer) .elementor *),
 *              :is(.sokk-canvas-header, .sokk-canvas-footer) .elementor [class*="sokk-"],
 *              :is(.sokk-canvas-header, .sokk-canvas-footer) .elementor [class*="sokk-"] *)
 *
 * i.e. an element is "SOKK" when it sits inside the canvas <body class="sokk-canvas">,
 * is (or is inside) an element whose class contains `sokk-`, is (or is inside) one of
 * the block roots that carry no such class (.catrow, .split-banners, .pgrid and the
 * .wrap that holds a .pgrid), or is the brand transition (.bt) — EXCEPT the markup of an
 * Elementor header/footer component rendered inside the canvas chrome
 * (`.sokk-canvas-header .elementor …`), which belongs to the host and is carved out
 * again, apart from any SOKK shortcode output ([class*="sokk-"]) placed inside it.
 * No `pdp-` token: Shoptimizer puts pdp-* classes on <body> and on its own markup, and
 * every SOKK pdp-* element already sits under a sokk- root (article.sokk-pdp-page,
 * .sokk-faqs). Any page-builder container can opt in by carrying `sokk-scope`.
 */

/* SOKK - base styles & tokens. Palette vars are injected at runtime on :root. */

:root{
  --bg:#F5F5F7; --surface:#FBFBFD; --raise:#FFFFFF;
  --ink:#1D1D1F; --muted:#6E6E73; --faint:#AEAEB2; --line:#D2D2D7; --accent:#0071E3;
  --footer-bg:#17161A;
  --maxw:1480px;
  --gut:clamp(16px,4vw,40px);
  --sans:"Archivo",-apple-system,system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
}

/* ---- resets (scoped; the canvas body is the only page-level host) ---- */
:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){box-sizing:border-box}
body.sokk-canvas{margin:0;padding:0}
body.sokk-canvas{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .5s ease, color .5s ease;
}
/* sokk-storefront: the Elementor pages (Full Width template / Theme Builder chrome) have no
   .sokk-canvas body, and build2.js paints the page shell transparent, so on every non-glass
   palette the ground showed as the UA canvas (white, or rgb(18,18,18) under color-scheme:dark)
   wherever nothing else painted it — hero side strips, category captions, section gaps. The
   prototype's body is var(--bg) on every palette; state it for the Elementor body too. One
   class level so it beats sokk-scope.css's zero-specificity :where(body) fallback but still
   loses to any explicit theme / kit body rule. */
body:where(.elementor-page, .elementor-default, .theme-hello-elementor, .sokk-canvas){
  background:var(--bg); color:var(--ink);
  transition:background .5s ease, color .5s ease;
}
/* #root (the SPA mount) has no equivalent in WordPress markup — sokk-wp.css .wp-site-blocks
   carries the min-height flex column instead; the rule is retired, not scoped. */
/* `html X` keeps these at one element level above a bare element rule, so a host theme's
   own a/button/img/h1 rules (Storefront, Shoptimizer) cannot bleed into SOKK markup
   whatever the stylesheet order, while every class rule in sokk-wp.css still wins. */
html a:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){color:inherit; text-decoration:none}
html button:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
html img:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){display:block; max-width:100%}
:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::selection{background:var(--ink); color:var(--bg)}

/* ---- type ---- */
.eyebrow:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.mono:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){font-family:var(--mono); letter-spacing:.02em}
.display:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  font-weight:700; line-height:.92; letter-spacing:var(--disp-track,-.025em); text-transform:uppercase;
  text-wrap:balance; margin:0;
}
.serif-off:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){}
html :is(h1,h2,h3,h4):where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){margin:0}

/* ---- layout ---- */
.wrap:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); width:100%}
.section:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){padding-block:clamp(56px,9vw,140px)}
.rule:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){height:1px; background:var(--line); border:0; margin:0}
/* Elementor's frontend sheet blanks every hr on its pages (`.elementor hr {background-color:
   transparent}`, 0,1,1), which the :where() rule above cannot outrank — so the wishlist head's
   hairline vanished on weltley. Two classes and the element (0,2,1) restore it. */
.elementor hr.rule:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background:var(--line)}

/* ---- knit tile ---- */
.tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  position:relative; width:100%; aspect-ratio:4/5; overflow:hidden;
  background:var(--tc,#ccc);
  isolation:isolate;
}
.tile.tall:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){aspect-ratio:3/4}
.tile.wide:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){aspect-ratio:1/1}
/* vertical ribbing */
.tile.rib:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after, .tile.marl:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after, .tile.mesh:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.10) 0 3px, rgba(0,0,0,.05) 3px 4px, rgba(0,0,0,.10) 4px 7px, rgba(255,255,255,.05) 7px 8px);
  mix-blend-mode:soft-light; opacity:.9;
}
.tile.terry:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after, .tile.plush:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(rgba(255,255,255,.16) .8px, transparent 1.1px),
                   radial-gradient(rgba(0,0,0,.10) .8px, transparent 1.1px);
  background-size:5px 5px, 5px 5px; background-position:0 0, 2.5px 2.5px;
  mix-blend-mode:soft-light; opacity:.8;
}
.tile.sheer:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.06) 0 2px, rgba(0,0,0,.03) 2px 3px);
  opacity:.7;
}
.tile.marl:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){ background-image:
  linear-gradient(135deg, rgba(255,255,255,.18) 0 25%, transparent 0 50%, rgba(255,255,255,.18) 0 75%, transparent 0);
  background-size:7px 7px; }
.tile.mesh:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::before{
  content:""; position:absolute; inset:0; z-index:1;
  background-image:radial-gradient(circle, transparent 1.4px, var(--tc,#ccc) 1.6px);
  background-size:8px 8px; opacity:.5;
}
/* the welt / cuff band */
.tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .welt{
  position:absolute; left:0; right:0; z-index:2; height:14%;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.16) 0 2px, rgba(0,0,0,.10) 2px 4px);
  box-shadow:0 1px 0 rgba(0,0,0,.06), 0 -1px 0 rgba(255,255,255,.10) inset;
  mix-blend-mode:soft-light;
}
.tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .welt.top{top:0}
.tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .welt.bottom{bottom:0; height:9%}
/* material sheen + grounding shadow */
.tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(120% 70% at 30% 12%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.12));
}
.tile.flat:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after,.tile.flat:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::before{display:none}

/* ---- buttons ---- */
.btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:15px 26px; border:1px solid var(--ink); background:var(--ink); color:var(--bg);
  transition:background .25s, color .25s, transform .15s, opacity .2s; white-space:nowrap;
  /* sokk-storefront: the prototype's body sets no line-height, so every .btn ran at `normal`
     (48px tall: 15+15 padding + a 16px DM Mono line). Here the SOKK roots carry the block
     theme's 1.6, which an <a class="btn"> inherits (19.2px line → 51px button) while a
     <button class="btn"> does not (the UA `font` shorthand resets it). Pin it so both tags
     measure 48px (38px for .sm) on every surface. */
  line-height:normal;
}
.btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover{background:transparent; color:var(--ink)}
.btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):active{transform:translateY(1px)}
.btn.ghost:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){background:transparent; color:var(--ink)}
.btn.ghost:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover{background:var(--ink); color:var(--bg)}
.btn.block:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){width:100%}
.btn.sm:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){padding:11px 18px; font-size:11px}
.btn[disabled]:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){opacity:.4; pointer-events:none}

.link-u:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){position:relative; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding-bottom:3px}
.link-u:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s}
.link-u:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover::after{transform:scaleX(1)}

/* ---- swatch chips ---- */
.chip:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){width:18px; height:18px; border-radius:50%; border:1px solid rgba(0,0,0,.18); position:relative; cursor:pointer; flex:none}
.chip[data-on="true"]:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){box-shadow:0 0 0 1.5px var(--bg), 0 0 0 3px var(--ink)}

/* ---- pill / size ---- */
.size-pill:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  min-width:46px; height:42px; padding:0 12px; border:1px solid var(--line); background:var(--raise);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s, color .2s;
}
.size-pill[data-on="true"]:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){border-color:var(--ink); background:var(--ink); color:var(--bg)}
.size-pill:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover:not([data-on="true"]){border-color:var(--ink)}

/* ---- utility ---- */
.flex:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){display:flex} .between:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){justify-content:space-between} .center:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){align-items:center}
.col:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){flex-direction:column}
.grow:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){flex:1}
.hide-mob:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){}
@media(max-width:760px){
  .hide-mob:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){display:none !important}
  .section:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){padding-block:clamp(40px,12vw,72px)}
}
.fade-up:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){animation:fadeUp .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes fadeUp{from{transform:translateY(16px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){.fade-up:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){animation:none}}

/* ---- grids ---- */
.pgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(28px,2.4vw,40px) clamp(12px,1.6vw,20px)}
.cgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px)}
@media(max-width:1080px){.pgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(3,1fr)} .cgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .pgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(2,1fr); gap:26px 12px}
  .cgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(2,1fr)}
}

/* hero / splits / pdp responsive
   .catrow, .split-banners, .split2, .pdp and .pdp-info are block roots / prefixed names
   with no host-theme counterpart (checked against Storefront, Shoptimizer, Elementor and
   WooCommerce), and sokk-wp.css addresses them unscoped too, so they stay as they were. */
@media(max-width:1080px){
  .wall:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(5,1fr)}
}
@media(max-width:760px){
  .wall:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(2,1fr)}
  .catrow{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:900px){
  .hero-grid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:1fr !important}
  .hero-split:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:1fr !important; height:auto !important}
  .hero-split:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) > button{height:62vw !important; min-height:300px}
  .split-banners{grid-template-columns:1fr !important}
  .split-banners > button{height:72vw !important; min-height:340px !important}
  .split2{grid-template-columns:1fr !important; gap:32px !important}
  .pdp{grid-template-columns:1fr !important}
  .pdp-info{position:static !important}
}
.rail:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::-webkit-scrollbar{height:0}
.rail:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){scrollbar-width:none}
.filter-scroll:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::-webkit-scrollbar{display:none}
@media(min-width:761px) and (max-width:1080px){ .acct-stats:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:repeat(2,1fr) !important} }
@media(max-width:760px){ .acct-stats:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:1fr !important} }
@media(max-width:560px){
  .pdp-gallery{flex-direction:column-reverse !important}
  .pdp-thumbs{flex-direction:row !important; width:auto !important; overflow-x:auto}
}
@media(max-width:640px){ .news-modal:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:1fr !important} }
@media(max-width:760px){ .filter-panel-grid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){grid-template-columns:1fr !important} }
.pdp-stickybar{display:none}
/* PDP gallery - mobile: horizontal swipe rail with snap, dots + counter (desktop keeps vertical stack) */
.pdp-count{display:none}
.pdp-dots{display:none}
@media(max-width:760px){
  .pdp-media-rail{flex-direction:row !important; gap:0 !important; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .pdp-media-rail::-webkit-scrollbar{display:none}
  .pdp-slide{flex:0 0 100%; width:100%; scroll-snap-align:center; scroll-snap-stop:always}
  .pdp-slide-media{display:flex; align-items:center; background:var(--line)}
  .pdp-slide-media img,.pdp-slide-media video{width:100%; height:100%; object-fit:cover; aspect-ratio:4/5}
  .pdp-add-hint{display:none}
  .pdp-count{display:inline-block; position:absolute; top:12px; left:12px; z-index:6; font-size:10.5px; letter-spacing:.08em; color:#fff; background:rgba(0,0,0,.4); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.5); padding:6px 10px; pointer-events:none}
  .pdp-dots{display:flex; justify-content:center; gap:7px; padding:12px 0 2px}
  .pdp-dot{width:7px; height:7px; border-radius:50%; background:var(--faint); border:none; padding:0; transition:background .2s, transform .2s}
  .pdp-dot.on{background:var(--ink); transform:scale(1.25)}
}
.pdp-stickybar-spacer{display:none}
@media(max-width:760px){
  .pdp-stickybar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bg); border-top:1px solid var(--line); padding:11px var(--gut); justify-content:space-between; align-items:center; gap:12px}
  /* 2.9.1: the glass --bg is 68% opaque, so the phone bar and the toast let the page show through */
  html[data-glass="1"] :is(.pdp-stickybar, .sokk-toast){ background: rgba(246,247,251,.96); }
  .pdp-stickybar-spacer{display:block; height:70px}
}
.filter-scroll:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){scrollbar-width:none}

/* ===== Liquid Glass theme - Apple iOS 26 / Tahoe =====
   GLOBAL on purpose: the page background, the drifting colour field and its keyframes
   paint behind the Elementor-built pages too (see CONTRACT.md, Design tokens). */
html[data-glass="1"]{
  background:
    radial-gradient(48vw 46vh at 8% 6%, #8ab6ff 0%, transparent 60%),
    radial-gradient(46vw 44vh at 96% 4%, #ffb0dd 0%, transparent 60%),
    radial-gradient(50vw 50vh at 94% 96%, #6cf0c8 0%, transparent 60%),
    radial-gradient(48vw 46vh at 4% 98%, #ffd98a 0%, transparent 58%),
    radial-gradient(40vw 40vh at 50% 50%, #c9a8ff 0%, transparent 70%),
    linear-gradient(135deg,#e7edfa,#f3ecfb);
  background-attachment:fixed;
}
/* drifting colour field behind everything */
html[data-glass="1"] body{
  background:var(--bg);
  position:relative;
}
html[data-glass="1"] body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 20% 25%, rgba(120,170,255,.55), transparent 60%),
    radial-gradient(34vw 34vw at 82% 18%, rgba(255,150,210,.5), transparent 60%),
    radial-gradient(40vw 40vw at 78% 82%, rgba(90,235,195,.5), transparent 60%),
    radial-gradient(34vw 34vw at 24% 86%, rgba(255,205,120,.5), transparent 60%);
  filter:blur(40px) saturate(140%);
  animation:glassDrift 26s ease-in-out infinite alternate;
}
@keyframes glassDrift{
  0%{ transform:translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  50%{ transform:translate3d(3%,2%,0) scale(1.12) rotate(4deg); }
  100%{ transform:translate3d(-2%,3%,0) scale(1.06) rotate(-3deg); }
}
@media(prefers-reduced-motion:reduce){ html[data-glass="1"] body::before{ animation:none; } }

/* frosted chrome
   Was `header`, `header > div`, `aside`. In the block theme `header` was the
   display:contents template-part wrapper (it painted nothing) and `header > div` was
   .sokk-header; no <aside> exists in any SOKK block, and the panels get their frost from
   sokk-wp.css. Retargeted to the block root so Storefront's / Shoptimizer's / an
   Elementor component's <header> and <aside> are left alone. Intentional side effect:
   `<header class="wrap sokk-page-head">` (sokk/page-head, sokk/page) used to pick up
   this frosted white card in glass mode by accident of its tag; it no longer does. */
html[data-glass="1"] .sokk-header{
  -webkit-backdrop-filter:blur(30px) saturate(190%) !important;
  backdrop-filter:blur(30px) saturate(190%) !important;
  background:rgba(255,255,255,.85) !important;
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(0,0,0,.04) inset, 0 10px 30px -18px rgba(30,50,90,.35);
}

/* glass surface utility - bright specular edge + soft float */
html[data-glass="1"] .glassy:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *),
html[data-glass="1"] .glass-card:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  -webkit-backdrop-filter:blur(26px) saturate(185%);
  backdrop-filter:blur(26px) saturate(185%);
  background:linear-gradient(150deg, rgba(255,255,255,.62), rgba(255,255,255,.4)) !important;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 1px 24px -8px rgba(120,150,210,.35), 0 24px 60px -34px rgba(30,50,90,.4);
  border-radius:22px;
}

/* rounded, Apple-soft geometry */
html[data-glass="1"] .tile:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){ border-radius:22px; box-shadow:0 18px 50px -28px rgba(30,50,90,.5); }
html[data-glass="1"] .cgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .tile, html[data-glass="1"] .pgrid:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *) .tile{ box-shadow:0 14px 40px -26px rgba(30,50,90,.45); }

/* primary button - glossy Apple-blue glass pill */
html[data-glass="1"] .btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  border-radius:980px;
  background:linear-gradient(180deg, #3a93ff, #0071e3) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  color:#fff !important;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 8px 22px -8px rgba(0,113,227,.7), 0 2px 6px rgba(0,113,227,.35);
  position:relative; overflow:hidden;
  transition:transform .15s, box-shadow .25s, filter .25s;
}
html[data-glass="1"] .btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{
  content:""; position:absolute; top:0; left:-60%; width:50%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
html[data-glass="1"] .btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover{ filter:brightness(1.05); box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -8px rgba(0,113,227,.8); }
html[data-glass="1"] .btn:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *):hover::after{ left:130%; }
/* ghost / secondary - clear frosted pill */
html[data-glass="1"] .btn.ghost:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.32)) !important;
  -webkit-backdrop-filter:blur(12px) saturate(180%); backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.7) !important; color:var(--ink) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(30,50,90,.35);
}
html[data-glass="1"] .btn.ghost:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::after{ display:none; }

/* glass inputs / pills / selects — was every input/select on the page; now only the
   ones inside SOKK markup (search sheet, newsletter, region filter, restock, qty, sort,
   language) and the whole canvas (WooCommerce cart/checkout fields, as in the block theme). */
html[data-glass="1"] .size-pill:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *), html[data-glass="1"] select:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *), html[data-glass="1"] input:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  border-radius:13px;
  -webkit-backdrop-filter:blur(10px) saturate(170%); backdrop-filter:blur(10px) saturate(170%);
  background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.38)) !important;
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
}
/* footer newsletter field is an underline on the dark footer - keep it transparent
   (was `footer input`: the footer template-part wrapper). Keyed on the block root
   (.sokk-footer) AND on the newsletter fragment itself (.sokk-news), because the
   [sokk_newsletter] shortcode renders .sokk-news standalone inside an Elementor footer
   where no .sokk-footer exists. :is() keeps the (0,2,1) the original had. */
html[data-glass="1"] :is(.sokk-footer, .sokk-news) input{
  border-radius:0 !important; background:none !important; border:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important;
}
/* sokk-storefront: the footer LANGUAGE select sits beside the Region button and must read as
   its twin (transparent, square, the same .28 white hairline) — the frosted pill above turned
   it into a light glass tab on the dark footer. Same !important weight as the pill it undoes;
   the caret is the one .sokk-lang paints (sokk-wp.css), carried on --sokk-caret so the
   shorthand here keeps it. */
html[data-glass="1"] .sokk-lang select{
  border-radius:0 !important; background:var(--sokk-caret, none) no-repeat right 12px center !important;
  border:1px solid rgba(255,255,255,.28) !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important; color:rgba(255,255,255,.9);
}
/* sokk-storefront: the bag drawer's "Pairs well" size picker is the reference's row of flat
   square buttons (sokk-wp.css .sokk-xs-size: page ground, --line hairline, ink on hover), not
   the frosted pill — the .size-pill class the JS still carries would apply the pill above with
   !important. Same weight to undo it; --sokk-xs-bg lets the hover invert through. */
html[data-glass="1"] :is(.sokk-xs-sizes .size-pill, .sokk-xs-size){
  border-radius:0 !important; background:var(--sokk-xs-bg, var(--bg)) !important; border:1px solid var(--line) !important;
  box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
html[data-glass="1"] .size-pill[data-on="true"]:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  background:linear-gradient(180deg, #3a93ff, #0071e3) !important; color:#fff !important;
  border-color:rgba(255,255,255,.4) !important; box-shadow:0 6px 16px -6px rgba(0,113,227,.7);
}
html[data-glass="1"] .chip:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){ box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 2px 6px rgba(30,50,90,.2); }
/* button[aria-label="wishlist"] was the SPA's PDP wishlist button; no SOKK block renders
   that attribute (the block's .pdp-wish gets the same treatment in sokk-wp.css), so the
   rule is retired rather than left to catch a host theme's wishlist button. */

@media(prefers-reduced-transparency:reduce){
  html[data-glass="1"] body::before{ display:none; }
  html[data-glass="1"]{ background:#eef1f8; }
  html[data-glass="1"] .sokk-header{ background:rgba(255,255,255,.95) !important; }
}
/* frosted full-width search sheet */
html[data-glass="1"] .glass-sheet:where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *){
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56)) !important;
  -webkit-backdrop-filter:blur(32px) saturate(190%); backdrop-filter:blur(32px) saturate(190%);
  border-bottom:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset, 0 24px 60px -26px rgba(30,50,90,.45);
}

/* scrollbar — the canvas page (viewport included) and every SOKK scroll region */
:where(html:has(> body.sokk-canvas), body.sokk-canvas)::-webkit-scrollbar, :where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::-webkit-scrollbar{width:10px; height:10px}
:where(html:has(> body.sokk-canvas), body.sokk-canvas)::-webkit-scrollbar-thumb, :where(:is(.sokk-canvas *,[class*="sokk-"],[class*="sokk-"] *,.catrow *,.split-banners *,.pgrid,.pgrid *,.wrap:has(> .pgrid),.bt,.bt *):not(:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor *),:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"],:is(.sokk-canvas-header,.sokk-canvas-footer) .elementor [class*="sokk-"] *)::-webkit-scrollbar-thumb{background:var(--line); border:3px solid var(--bg)}

/* ===== brand transition (intro splash + route curtain) =====
   .bt* is appended to <body> by sokk.js on every page and is a fixed full-viewport
   layer; the names are unique (no host match), so they stay global. */
.bt{position:fixed; inset:0; z-index:300; background:var(--bg); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:18px;
  will-change:transform; overflow:hidden;}
.bt-word{display:inline-flex; align-items:baseline; gap:4px;
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:-.03em; line-height:1; font-size:clamp(56px,11vw,150px);}
.bt-word .reg{font-family:var(--mono); font-weight:500; font-size:.26em; letter-spacing:0;
  transform:translateY(-1.9em); color:var(--muted);}
/* sokk-storefront: "Logo image" setting — the image replaces the wordmark text inside
   .bt-word, so it inherits the splash/curtain size (1em = the wordmark's font-size) and
   the same reveal keyframes. Tune its height/max-width here. */
.bt-word--logo{align-items:center;}
.bt-logo{display:block; height:1em; width:auto; max-width:min(80vw,640px); object-fit:contain;}
.bt-line{width:min(46vw,460px); height:1px; background:var(--ink); transform-origin:center;}
.bt-tag{font-family:var(--mono); font-size:11px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted); padding-left:.42em;}

/* --- initial intro: slow reveal then lift away --- */
/* sokk-storefront: every duration and delay is multiplied by --bt-scale, which sokk.js
   sets on .bt-intro from the "Duration (ms)" setting (2080 ms = scale 1, the values
   below unchanged). Restyle the splash here: .bt (panel colours), .bt-word (wordmark
   font/size), .bt-line (hairline), .bt-tag (tagline), the bt-* keyframes. */
.bt-intro{--bt-scale:1; animation:bt-panel-up calc(2.05s * var(--bt-scale)) cubic-bezier(.76,0,.24,1) forwards;}
.bt-intro .bt-word{clip-path:inset(0 0 110% 0); opacity:0;
  animation:bt-word-reveal calc(1.05s * var(--bt-scale)) cubic-bezier(.22,1,.36,1) calc(.12s * var(--bt-scale)) forwards;}
.bt-intro .bt-line{transform:scaleX(0);
  animation:bt-line-draw calc(.9s * var(--bt-scale)) cubic-bezier(.76,0,.24,1) calc(.55s * var(--bt-scale)) forwards;}
.bt-intro .bt-tag{opacity:0; animation:bt-fade-in calc(.7s * var(--bt-scale)) ease calc(1s * var(--bt-scale)) forwards;}

@keyframes bt-word-reveal{
  0%{clip-path:inset(0 0 110% 0); opacity:0; transform:translateY(10px);}
  55%{opacity:1;}
  100%{clip-path:inset(0 0 -2% 0); opacity:1; transform:translateY(0);}
}
@keyframes bt-line-draw{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes bt-fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes bt-panel-up{
  0%,62%{transform:translateY(0);}
  100%{transform:translateY(-101%);}
}

/* --- route curtain: cover then reveal --- */
.bt-curtain{align-items:center; gap:0;}
.bt-curtain .bt-word{font-size:clamp(30px,5vw,56px); opacity:.92;}
.bt-curtain .bt-line,.bt-curtain .bt-tag{display:none;}
.bt-cover{animation:bt-curtain-cover .42s cubic-bezier(.62,0,.2,1) forwards;}
.bt-reveal{animation:bt-curtain-reveal .42s cubic-bezier(.62,0,.2,1) forwards;}
@keyframes bt-curtain-cover{from{transform:translateY(101%);} to{transform:translateY(0);}}
@keyframes bt-curtain-reveal{from{transform:translateY(0);} to{transform:translateY(-101%);}}

@media (prefers-reduced-motion: reduce){
  .bt{display:none !important;}
}

@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.98); } to{ opacity:1; transform:translateY(0) scale(1); } }