/*
Storefront skin v3 — measured against the reference storefront rhythm:
#FAFAFA stage, near-black ink, soft-gray product cards, one warm accent,
96px section breathing, 1:1 imagery, pill CTAs, dark immersive heroes.
Single light theme. Loads AFTER the WP adaptation layer so the values
below win the cascade; structural WP/Woo rules keep living there.
Enqueued from inc/assets.php with a content-hash ?v= parameter.
*/

:root{
  /* ---- palette (measured) ---- */
  --bg:#FAFAFA;            /* page stage */
  --raise:#FFFFFF;         /* panels, header */
  --card:#F5F5F7;          /* product / content card ground */
  --chip:rgba(10,10,10,.05);
  --chip-2:#ECECEE;
  --ink:#0A0A0A;
  --ink-2:#474747;
  --ink-3:#8A8F94;
  --line:#E8E9EB;
  --line-2:#D9DBDE;
  --acc:#FA6400;           /* the single warm accent */
  --acc-deep:#D95400;
  --acc-soft:rgba(250,100,0,.10);
  --acc-glow:rgba(250,100,0,.22);
  --amber:#FA6400;         /* rating stars share the accent */
  --ok:#1F9D55;
  --dark-panel:#131416;
  --shadow-card:0 1px 10px rgba(10,10,10,.05);
  --shadow-pop:0 16px 44px -14px rgba(10,10,10,.18);

  /* ---- legacy token aliases (the adaptation layer still resolves these) ---- */
  --bg0:#FAFAFA; --bg1:#FAFAFA; --bg2:#F5F5F7;
  --panel:#FFFFFF; --panel2:#FAFAFA;
  --txt:#0A0A0A; --mut:#515151; --gold:#FA6400; --tx:#0A0A0A;

  /* ---- type + shape ---- */
  --f-disp:"Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Roboto","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --head-h:94px;
  --ann-h:44px;
  --r-lg:8px;
  --r-md:8px;
  --hue:24; /* warm hue the adaptation layer derives gradients from */
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html:focus-within{ scroll-behavior:smooth; }
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--acc); color:#fff; }

.wrap{ max-width:1440px; margin-inline:auto; padding-inline:clamp(20px,3.4vw,48px); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.grain{ display:none; }
main{ position:relative; z-index:1; }
section{ position:relative; }

/* ============================================================
   announcement bar + header
   ============================================================ */
.v2-ann{
  background:var(--ink); color:#fff;
  height:var(--ann-h);
  display:flex; align-items:center; justify-content:center; gap:16px;
  font-size:14.5px; letter-spacing:.01em;
  padding-inline:52px;
  position:relative; z-index:60;
}
.v2-ann b{ font-weight:500; opacity:.95; }
/* notice track: one copy centered on desktop; a seamless two-copy
   marquee below 760px so uneven copy never wraps mid-word */
.ann-track{ display:inline-flex; align-items:center; }
.ann-track span{ white-space:nowrap; }
.ann-track span + span{ display:none; }
.v2-ann-x{
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border:0; border-radius:50%;
  background:transparent; color:#fff; opacity:.7;
  display:grid; place-items:center;
}
.v2-ann-x:hover{ color:#fff; background:rgb(255 255 255 / .12); opacity:1; }
.v2-ann-x svg{ width:13px; height:13px; }

.site-head{
  position:sticky; top:0; z-index:50;
  background:var(--raise);
  height:var(--head-h);
  transition:height .3s var(--ease), box-shadow .3s;
}
.site-head.is-scrolled{ height:68px; box-shadow:0 6px 24px -18px rgba(10,10,10,.25); }
.head-inner{
  max-width:1440px; margin-inline:auto; height:100%;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline:clamp(20px,3.4vw,48px);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; justify-self:start; }
.brand-logo{ height:34px; width:auto; display:block; }
/* the shipped logo file is the white mark — turn it ink on the light
   header while keeping the real artwork (alpha preserved) */
.site-head .brand-logo{ filter:brightness(0); }
.brand-word{
  font:700 26px/1 var(--f-disp);
  letter-spacing:-.03em; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.brand-word.inv{ color:#fff; }

.main-nav{ display:flex; gap:2px; justify-self:center; align-items:center; }
.main-nav ul{ display:flex; gap:2px; list-style:none; align-items:center; }
.main-nav a{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px; border-radius:999px;
  font-size:16px; font-weight:400; letter-spacing:.03em;
  color:var(--ink); text-decoration:none;
  transition:background .2s var(--ease);
}
.main-nav a:hover{ background:var(--chip); }
.main-nav a:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; }

.head-tools{ display:flex; align-items:center; gap:8px; justify-self:end; }
.tuner{ display:none; }
.theme-toggle{ display:none; }
.cart-btn, .search-btn{
  width:42px; height:42px; border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--ink);
  display:grid; place-items:center; text-decoration:none; position:relative;
  transition:background .2s;
}
.cart-btn:hover, .search-btn:hover{ background:var(--chip); }
.cart-btn svg{ width:20px; height:20px; }
.search-btn svg{ width:19px; height:19px; }
.cart-count.is-empty{ display:none; }
.cart-count{
  position:absolute; top:2px; right:0;
  min-width:17px; height:17px; padding:0 4px; border-radius:999px;
  background:var(--acc); color:#fff;
  font:700 10.5px/17px var(--f-disp); text-align:center;
  transition:transform .25s var(--ease);
}
.cart-count.bump{ transform:scale(1.45); }
.menu-btn{ display:none; width:42px; height:42px; border:0; border-radius:50%; background:transparent; place-items:center; align-content:center; }
.menu-btn span{ display:block; width:18px; height:2px; background:var(--ink); margin:2.5px auto; border-radius:2px; transition:transform .35s var(--ease), opacity .3s; }
.menu-btn[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }
.head-progress{ display:none; }
.secure-tag{ display:flex; align-items:center; gap:8px; font:500 14px var(--f-body); color:var(--ink-2); justify-self:center; }
.secure-tag svg{ width:16px; height:16px; }

/* dropdown panels (markup from wp_nav_menu) */
.main-nav .sub-menu{
  background:var(--raise);
  border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(10,10,10,.22);
  border:1px solid var(--line);
  padding:14px;
  min-width:230px;
}
.main-nav .sub-menu a{ border-radius:10px; padding:10px 14px; font-size:15px; letter-spacing:0; }
.main-nav .sub-menu a:hover{ background:var(--card); }

.m-nav{
  position:fixed; inset:var(--ann-h) 0 0 0; z-index:55;
  background:var(--raise);
  padding:32px clamp(20px,6vw,40px);
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
  overflow:auto;
}
.m-nav.open{ opacity:1; visibility:visible; }
.m-nav nav{ display:grid; gap:4px; text-align:left; }
.m-nav a{ text-decoration:none; font:500 20px/1.3 var(--f-disp); color:var(--ink); padding:10px 0; border-bottom:1px solid var(--line); }
.m-nav a:hover{ color:var(--acc); }
.m-nav .cta-btn{ display:inline-flex; margin-top:18px; }
.m-nav-search{
  display:flex; align-items:center; gap:10px; width:100%;
  background:var(--card); border:0; border-radius:12px;
  padding:13px 16px; margin-bottom:18px;
  font:500 15px var(--f-body); color:var(--ink);
}
.m-nav-search svg{ width:18px; height:18px; }

.skip-link{
  position:fixed; left:12px; top:-56px; z-index:300;
  padding:12px 18px; border-radius:10px;
  background:var(--ink); color:#fff;
  font:700 .92rem/1 var(--f-disp); text-decoration:none;
  transition:top .18s ease-out;
}
.skip-link:focus{ top:12px; }

/* ============================================================
   shared atoms
   ============================================================ */
.sec-title{
  font:700 clamp(28px,2.8vw,40px)/1.2 var(--f-disp);
  letter-spacing:-.01em; color:var(--ink);
}
.sec-title em{ font-style:normal; color:var(--acc); }
/* section intros span the module width like the content around them;
   centered heads keep a readable capped line */
.sec-sub{ color:var(--ink-2); margin-top:14px; font-size:16px; }
.sec-head{ margin-bottom:clamp(30px,4vw,48px); }
.sec-head.center{ text-align:center; }
.sec-head.center .sec-sub{ margin-inline:auto; max-width:min(640px,100%); }
.sec-head.row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }

.dot-live{ width:8px; height:8px; border-radius:50%; background:var(--acc); display:inline-block; }

.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink); color:#fff;
  border:0; border-radius:999px;
  padding:14px 28px;
  font:500 15px/1 var(--f-disp); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:background .25s var(--ease), transform .2s, box-shadow .25s;
}
.cta-btn:hover{ background:#242424; box-shadow:var(--shadow-pop); }
.cta-btn:active{ transform:translateY(1px); }
.cta-btn.small{ padding:10px 20px; font-size:14px; }
.cta-btn.xl{ padding:18px 36px; font-size:16px; }
.cta-btn.added{ background:var(--ok); }
.cta-arrow{ display:inline-flex; width:17px; height:17px; align-items:center; justify-content:center; color:inherit; transition:transform .3s var(--ease); }
.cta-arrow svg{ display:block; width:100%; height:100%; }
.cta-btn:hover .cta-arrow{ transform:translateX(5px); }
.cta-btn.glass{
  background:rgb(255 255 255 / .12);
  border:1px solid rgb(255 255 255 / .32);
  color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; padding:14px 26px;
}
.cta-btn.glass:hover{ background:rgb(255 255 255 / .22); box-shadow:none; }

.ghost-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:transparent; color:var(--ink);
  border:1.5px solid var(--ink); border-radius:999px;
  padding:12.5px 26px;
  font:500 15px/1 var(--f-disp); letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  transition:background .25s var(--ease), color .25s, border-color .25s;
}
.ghost-btn:hover{ background:var(--ink); color:#fff; }
.ghost-btn.small{ padding:9px 18px; font-size:14px; }
.ghost-btn.on-dark{ color:#fff; border-color:rgb(255 255 255 / .45); }
.ghost-btn.on-dark:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.js .rv{ opacity:0; transition:opacity .6s ease, transform .6s var(--ease); transition-delay:var(--d, 0s); }
.js .rv:not([data-px]){ transform:translateY(16px); }
.js .rv.in{ opacity:1; }
.js .rv.in:not([data-px]){ transform:none; }

.stars{ position:relative; display:inline-block; font-size:15px; letter-spacing:2px; line-height:1; }
.stars b{ font-weight:400; color:var(--line-2); }
.stars i{ position:absolute; inset:0; width:var(--f,100%); overflow:hidden; white-space:nowrap; color:var(--amber); font-style:normal; font-weight:400; }
.stars.big{ font-size:18px; }

.chip{
  display:inline-flex; align-items:center;
  padding:9px 18px;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--raise);
  font:500 14px/1 var(--f-body); color:var(--ink);
  text-decoration:none;
  transition:border-color .2s, background .2s, color .2s;
}
.chip i{ font-style:normal; color:var(--ink-3); font-weight:400; margin-left:6px; }
.chip:hover{ border-color:var(--ink); }
.chip.is-on{ border-color:var(--ink); background:var(--ink); color:#fff; }

.crs-btn{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--raise); color:var(--ink);
  display:grid; place-items:center;
  transition:border-color .2s, background .2s;
}
.crs-btn svg{ width:19px; height:19px; }
.crs-btn:hover:not(:disabled){ border-color:var(--ink); }
.crs-btn:disabled{ opacity:.35; pointer-events:none; }

.kicker{ font:700 12px/1 var(--f-disp); letter-spacing:.18em; color:var(--acc); text-transform:uppercase; }

.crumbs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--ink-3); padding:22px 0 6px; }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--acc); }
.crumbs i{ font-style:normal; color:var(--line-2); }
.crumbs span{ color:var(--ink); }
.crumbs.on-dark, .crumbs.on-dark a{ color:rgb(255 255 255 / .78); }
.crumbs.on-dark i{ color:rgb(255 255 255 / .4); }
/* on articles the breadcrumb sits on the meta row (chip + dates); the gap
   below it matches the meta row's own 14px gap to the title */
.post-page .crumbs{ padding-bottom:14px; }
.crumbs.on-dark span{ color:#fff; }

.bf-pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.bf-pagination .page-numbers{
  min-width:42px; height:42px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-2); border-radius:999px;
  font:500 14px var(--f-disp); text-decoration:none; color:var(--ink);
}
.bf-pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.bf-pagination .pg-svg{ width:17px; height:17px; display:inline-flex; }
.bf-pagination .pg-svg svg{ width:100%; height:100%; }

/* ============================================================
   hero — immersive dark stage
   ============================================================ */
/* R8: hero is a background-image carousel — stacked slides, left copy stack,
   no product stage. A slide without art yet renders the dark studio
   gradient; the gradient also sits UNDER every image as the loading tone. */
.hero{
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(250,100,0,.14), transparent 55%),
    radial-gradient(90% 70% at 15% 90%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(168deg, #1A1A1C 0%, #0E0E10 58%, #131311 100%);
  color:#fff;
  overflow:hidden;
  position:relative;
}
.hero-track{ position:relative; display:grid; }
.hero-slide{
  grid-area:1/1; position:relative; display:grid; align-items:center;
  min-height:clamp(540px,72vh,700px);
  opacity:0; visibility:hidden;
  transition:opacity .7s var(--ease), visibility 0s linear .7s;
}
.hero-slide.is-on{
  opacity:1; visibility:visible;
  transition:opacity .7s var(--ease);
}
.hero-slide.is-alt .hero-copy{ padding-block:clamp(48px,7vh,80px); }
.hero-bg{
  position:absolute; inset:0; margin:0;
}
.hero-bg::after{
  /* left-weighted legibility veil over the art */
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgb(8 9 11 / .84) 0%, rgb(8 9 11 / .55) 44%, rgb(8 9 11 / .18) 72%, rgb(8 9 11 / .30) 100%);
}
.hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-copy{ position:relative; z-index:1; width:100%; }
.hero-slide.is-first .hero-copy{ padding-block:clamp(48px,7vh,80px); }
.eyebrow{
  font:600 12.5px/1 var(--f-disp); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:20px;
}
.hero .eyebrow{ color:rgb(255 255 255 / .68); }
.hero-title{
  font:700 clamp(34px,3.2vw,46px)/1.12 var(--f-disp);
  letter-spacing:-.015em; color:#fff;
  max-width:16ch;
}
.hero-title em{ font-style:normal; color:var(--acc); }
.hero-title .acc, .sb-copy h1 .acc{ color:var(--acc); border-bottom:0 !important; } /* ACF copy wraps the accent words; a legacy hairline bleeds in */
h1 .acc, h2 .acc, .sec-title .acc, .cta-title .acc{ border-bottom:0 !important; }
.hero-sub{
  color:rgb(255 255 255 / .78);
  font-size:16px; line-height:1.65;
  max-width:50ch; margin-top:18px; margin-bottom:32px;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
/* carousel controls: dots bottom-left, arrows bottom-right, one baseline */
.hero-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:24px;
}
.hero-dots{ display:flex; gap:9px; }
.hero-dot{
  width:9px; height:9px; padding:0; border:0; border-radius:999px;
  background:rgb(255 255 255 / .34); cursor:pointer;
  transition:width .3s var(--ease), background .3s var(--ease);
}
.hero-dot.is-on{ width:26px; background:#fff; }
.hero-arrows{ display:flex; gap:10px; }
.hero-arrows .crs-btn{
  background:rgb(255 255 255 / .10); border:1px solid rgb(255 255 255 / .30); color:#fff;
}
.hero-arrows .crs-btn:hover{ background:rgb(255 255 255 / .2); border-color:rgb(255 255 255 / .5); color:#fff; }
.p-badge{
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--acc); color:#fff;
  padding:8px 16px; border-radius:999px;
  font:600 12px/1 var(--f-disp); letter-spacing:.1em; text-transform:uppercase;
}

/* ============================================================
   brand strip
   ============================================================ */
.brand-strip{ background:var(--card); padding:58px 0; min-height:162px; display:flex; align-items:center; }
.brand-strip .bs-inner{ width:100%; }
.bs-inner{ display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.6vw,32px); flex-wrap:wrap; }
/* the brand mark: logo artwork recolored to ink (white asset -> pure black
   via brightness(0); a Customizer logo replaces the shipped file) */
.bs-logo{ display:inline-flex; align-items:center; }
.bs-logo .bs-logo-img{ display:block; height:clamp(24px,2.3vw,32px); width:auto; filter:brightness(0); }
.bs-div{ width:1px; height:42px; background:rgb(10 10 10 / .22); }
.bs-slogan{ font:600 clamp(19px,2.2vw,30px)/1.2 var(--f-disp); letter-spacing:-.045em; text-transform:uppercase; color:var(--ink); }

/* ============================================================
   marquee band
   ============================================================ */
.marquee{
  background:var(--ink); color:#fff;
  overflow:hidden; padding:15px 0;
}
.marquee-inner{
  display:flex; width:max-content;
  animation:marq 36s linear infinite;
  font:600 14px/1.4 var(--f-disp); letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap;
}
.marquee-inner i{ font-style:normal; color:var(--acc); margin:0 26px; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   scene tiles — two squares + one wide banner, copy on top center
   ============================================================ */
.sc-tiles{ padding:clamp(16px,2vh,28px) 0 clamp(56px,7vh,88px); }
.sc-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.sc-tile{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--r-lg); background:var(--dark-panel);
  aspect-ratio:1/1;
  text-decoration:none; isolation:isolate;
}
.sc-tile.sc-wide{ grid-column:1/-1; aspect-ratio:1329/620; }
.sc-tile img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform .8s var(--ease-out);
}
.sc-tile::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgb(0 0 0 / .52) 0%, rgb(0 0 0 / .10) 42%, transparent 62%);
}
.sc-tile:hover img{ transform:scale(1.035); }
.sc-copy{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(22px,3vw,34px) clamp(18px,2.6vw,30px) 0;
  color:#fff;
}
.sc-copy h3{ font:600 clamp(24px,2.4vw,33px)/1.15 var(--f-disp); letter-spacing:-.01em; }
.sc-copy p{ margin-top:10px; font-size:15px; line-height:1.5; color:rgb(255 255 255 / .85); max-width:60ch; }
.sc-more{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:14px; font:600 15px/1 var(--f-disp); color:#fff;
}
.sc-more .cta-arrow{ width:15px; height:15px; }
.sc-tile:hover .sc-more .cta-arrow{ transform:translateX(5px); }

/* ============================================================
   product cards — soft-gray ground, no border
   ============================================================ */
.bs{ padding:clamp(56px,8vh,96px) 0 clamp(24px,3vh,40px); }
.bs-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.shop-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.bs-more{ margin-top:36px; text-align:center; }

/* decorative closing card that evens out the bestseller grid (7 SKUs + this
   = a 4×4 stage); copy is admin-editable, the card itself is a quiet ink
   panel so the row keeps its rhythm */
.p-card.p-card--deco{ background:var(--card); }
.p-card--deco .p-deco{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:12px; padding:clamp(22px,2vw,30px); min-height:100%;
}
.p-deco-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font:600 10.5px/1 var(--f-disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--acc);
}
.p-deco-kicker::before{ content:""; width:16px; height:1px; background:var(--acc); }
.p-card--deco h3{ font:600 clamp(19px,1.6vw,23px)/1.25 var(--f-disp); letter-spacing:-.01em; color:var(--ink); }
.p-card--deco p{ font-size:13.5px; line-height:1.6; color:var(--mut); }
.p-deco .ghost-btn{ margin-top:6px; padding:10px 18px; font-size:13.5px; }

.p-card{
  background:var(--card);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .3s var(--ease);
}
.p-card:hover{ box-shadow:var(--shadow-pop); }
.p-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
.p-img{ position:absolute; inset:0; display:block; }
.p-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; padding:clamp(14px,1.6vw,22px);
  transition:opacity .35s var(--ease);
}
.p-img img.fit{ object-fit:contain; }
.p-badge-flag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:var(--ink); color:#fff;
  padding:7px 12px; border-radius:999px;
  font:600 10.5px/1 var(--f-disp); letter-spacing:.1em; text-transform:uppercase;
}
.p-badge-flag.new{ background:var(--acc); }
.p-rate-badge{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  height:29px; padding:0 11px;
  background:rgb(250 250 250 / .78); border-radius:999px;
  font:600 13px/1 var(--f-disp); color:var(--ink);
}
.p-rate-badge i{ color:var(--acc); font-style:normal; font-size:13px; line-height:1; }
.p-eye{ display:none; } /* hover imagery swap retired */
.p-cart{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ink); color:#fff;
  border:0; border-radius:999px;
  padding:11px 20px;
  font:600 12.5px/1 var(--f-disp); letter-spacing:.02em;
  text-decoration:none; white-space:nowrap;
  box-shadow:0 6px 18px rgb(0 0 0 / .16);
  transition:background .25s;
}
.p-cart:hover{ background:#242424; }
.p-cart.done{ background:var(--ok); color:#fff; }
/* price + quick-add row: pinned to the bottom of the content block so the
   buttons align across a grid row regardless of title length */
.p-meta{
  padding:14px 18px 20px;
  display:flex; flex-direction:column; gap:7px;
  align-items:flex-start;
  flex:1 1 auto; min-width:0;
}
.p-meta h3{
  font:600 16px/1.28 var(--f-disp); letter-spacing:0; color:var(--ink);
}
.p-meta h3 a{ text-decoration:none; color:inherit; }
.p-card:hover .p-meta h3 a{ text-decoration:underline; text-underline-offset:3px; }
.p-sub{
  font:400 12.5px/1.45 var(--f-body); color:var(--mut);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p-rate{ display:flex; align-items:center; gap:7px; margin:2px 0 0; }
.p-rate .stars{ font-size:13.5px; letter-spacing:1.5px; }
.p-rate .r-count{ font:400 12.5px/1 var(--f-body); color:var(--ink-3); }
.p-price{ display:flex; align-items:baseline; gap:8px; margin:0; }
.p-price b{ font:700 16px/1 var(--f-disp); color:var(--ink); letter-spacing:.01em; }
.p-price s{ color:var(--ink-3); font-size:13px; font-weight:400; }
.p-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; margin-top:auto; padding-top:12px; flex-wrap:wrap; }
.p-foot .p-cart-form{ margin-left:auto; }

.r-card span s, .sp-info span s, .bqp-info span s, .bsp-info span s{ color:var(--ink-3); font-size:.85em; margin-left:4px; }
.shop-empty{ padding:60px 0; text-align:center; color:var(--ink-3); }
.p-specs{ font-size:13px; color:var(--ink-3); }

/* ============================================================
   technology bento — soft cards, static visuals
   ============================================================ */
.tech{ padding:clamp(56px,8vh,96px) 0; }
.bento{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.b-card{
  background:var(--card); border-radius:var(--r-lg);
  padding:26px 26px 28px;
  display:flex; flex-direction:column; gap:16px;
}
.b-card.wide{ grid-column:span 2; }
.b-copy h3{ font:600 19px/1.3 var(--f-disp); color:var(--ink); }
.b-copy p{ font-size:14.5px; line-height:1.6; color:var(--mut); }
.b-osc{
  position:relative; height:190px; border-radius:8px; overflow:hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .04), transparent),
    var(--dark-panel);
}
.b-osc::before{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 190' preserveAspectRatio='none'%3E%3Cpath d='M0 95 Q 37 18 75 95 T 150 95 T 225 95 T 300 95 T 375 95 T 450 95 T 525 95 T 600 95' fill='none' stroke='%23FA6400' stroke-width='2.5' opacity='.9'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.b-osc canvas, .b-osc-tag{ display:none; }
.b-visual{
  background:var(--raise); border-radius:8px;
  min-height:120px; display:grid; place-items:center; padding:18px;
  position:relative; overflow:hidden;
}
.big-num{ font:700 44px/1 var(--f-disp); color:var(--ink); }
.big-num i{ font:600 17px/1 var(--f-disp); font-style:normal; color:var(--ink-3); margin-left:3px; }
/* broadcast screen: decorative device display for the custom name /
   passcode card — pairs with the numeric stat panels beside it */
.bk-screen{
  width:min(280px,88%); border-radius:10px;
  background:linear-gradient(180deg,#17181B,#0D0E10);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07), 0 16px 30px -20px rgb(0 0 0 / .5);
  padding:16px 18px;
  display:flex; flex-direction:column; gap:11px;
}
.bk-row{ display:flex; align-items:center; gap:7px; }
.bk-bt{ width:15px; height:15px; color:#7EDCE2; flex:0 0 auto; }
.bk-name{
  height:9px; flex:1 1 auto; max-width:118px; border-radius:5px;
  background:linear-gradient(90deg, rgb(126 220 226 / .85), rgb(126 220 226 / .38));
  position:relative;
}
.bk-name::after{
  content:""; position:absolute; right:-6px; top:-2px; bottom:-2px; width:2px;
  background:#7EDCE2; border-radius:1px;
  animation:bf-blink 1.15s steps(1) infinite;
}
.bk-dot{
  width:9px; height:9px; border-radius:50%;
  background:rgb(126 220 226 / .9);
}
.bk-live{
  margin-left:auto; width:7px; height:7px; border-radius:50%;
  background:var(--acc);
  box-shadow:0 0 0 3px rgb(250 100 0 / .18);
}
@keyframes bf-blink{ 50%{ opacity:0; } }
.codec-bars{ display:grid; gap:12px; align-content:center; flex:1; }
.cb{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; }
.cb span{ font:500 13px/1 var(--f-disp); color:var(--ink); }
.cb i{ display:block; height:6px; border-radius:3px; background:rgb(10 10 10 / .08); position:relative; overflow:hidden; }
.cb i::after{ content:""; position:absolute; inset:0; width:calc(var(--w,50)*1%); background:var(--acc); border-radius:3px; }
.cb em{ font:400 12px/1 var(--f-body); font-style:normal; color:var(--ink-3); }

/* ============================================================
   stats — dark credibility band
   ============================================================ */
.stats{ background:var(--ink); color:#fff; padding:clamp(48px,7vh,76px) 0; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.stat{ text-align:center; }
.stat b{ font:700 clamp(34px,3vw,46px)/1 var(--f-disp); color:#fff; letter-spacing:-.01em; }
.stat p{ margin-top:10px; font-size:14px; color:rgb(255 255 255 / .62); }

/* ============================================================
   press strip / why / help banner
   ============================================================ */
/* creator video band above the press strip — the tech section's bottom
   padding opens the top gap; the strip below closes the bottom one */
.home-creators{ padding:0 0 clamp(16px,2.5vh,32px); }
.press-strip-sec{ padding:clamp(36px,5vh,60px) 0; }
.press-strip{ text-align:center; font-size:15px; color:var(--ink-2); }
.press-strip b{ font-weight:600; color:var(--ink); margin-right:10px; }
.press-strip a{ color:var(--ink-2); text-underline-offset:3px; }
.press-strip a:hover{ color:var(--acc); }
.press-dot{ font-style:normal; margin:0 10px; color:var(--line-2); }

.why{ padding:clamp(56px,8vh,96px) 0; }
.why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.w-card{ background:transparent; padding:0; }
.w-ico{
  width:46px; height:46px; border-radius:12px;
  background:var(--acc-soft); color:var(--acc);
  display:grid; place-items:center;
}
.w-ico svg{ width:23px; height:23px; }
.w-card h3{ margin-top:16px; font:600 17px/1.3 var(--f-disp); color:var(--ink); }
.w-card p{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--mut); }
.w-card.tilt, .spot{ transform:none !important; }

.help-banner{
  background:var(--card); border-radius:16px;
  padding:clamp(28px,4vw,48px);
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,48px); align-items:center;
}
.help-banner h2{ font:700 clamp(22px,2.3vw,30px)/1.25 var(--f-disp); color:var(--ink); }
.help-banner h2 em{ font-style:normal; color:var(--acc); }
.help-banner p{ margin-top:12px; font-size:15px; color:var(--mut); }
.help-banner .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.cb-list{ display:grid; gap:14px; }
.cb-row{ display:flex; align-items:flex-start; gap:14px; }
.cb-row .w-ico{ width:42px; height:42px; border-radius:10px; flex:0 0 auto; background:var(--raise); color:var(--ink); }
.cb-row .w-ico svg{ width:20px; height:20px; }
.cb-row b{ display:block; font:600 15px/1.3 var(--f-disp); color:var(--ink); }
.cb-row i{ display:block; margin-top:3px; font:400 13.5px/1.45 var(--f-body); font-style:normal; color:var(--mut); }

.compat-entry-sec{ padding:0 0 clamp(56px,8vh,96px); }

/* ============================================================
   owner stories — horizontal review rail
   ============================================================ */
.stories{ padding:clamp(56px,8vh,96px) 0; }
.stories-head{
  display:flex; align-items:stretch; justify-content:space-between; gap:24px;
  margin-bottom:clamp(30px,4vw,48px); flex-wrap:wrap;
}
.stories-head .sec-head{ margin-bottom:0; }
.stories-score{
  background:var(--card); border-radius:12px;
  padding:20px 26px;
  display:grid; gap:7px; align-content:center; justify-items:start;
  min-width:230px;
}
.stories-score .ss-num{ font:700 36px/1 var(--f-disp); color:var(--ink); letter-spacing:-.01em; }
.stories-score .ss-meta{ font:400 13px/1.4 var(--f-body); color:var(--ink-3); }
/* masonry wall: CSS columns flow top-to-bottom without scrollbars */
.wall{
  columns:4 290px; column-gap:16px;
}
.wall .wq{
  break-inside:avoid; margin-bottom:16px;
  background:var(--card); border-radius:var(--r-lg);
  padding:22px 22px 24px;
  display:flex; flex-direction:column; gap:12px;
}
.wq header{ display:flex; align-items:center; gap:12px; }
.wq header b{ font:600 15px/1.2 var(--f-disp); color:var(--ink); display:block; }
.wq header i{ font:400 12.5px/1.3 var(--f-body); font-style:normal; color:var(--ink-3); display:block; margin-top:2px; }
.wq-prod{
  margin-left:auto; background:var(--raise); border:1px solid var(--line);
  border-radius:999px; padding:5px 11px;
  font:500 11.5px/1 var(--f-disp); color:var(--ink-2); white-space:nowrap;
}
.q-ava{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  background:var(--ink); color:#fff;
  display:grid; place-items:center;
  font:600 14px/1 var(--f-disp); overflow:hidden;
}
.q-ava img{ width:100%; height:100%; object-fit:cover; }
.q-ava .for-dark{ display:none; }
.wq-score{ font:700 26px/1 var(--f-disp); color:var(--ink); }
.wq p{ font-size:14.5px; line-height:1.6; color:var(--ink-2); }
.wq-media{ margin:0; border-radius:8px; overflow:hidden; }
.wq-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.wq footer{ font:500 12.5px/1 var(--f-body); color:var(--ink-3); }
.wall-more{ margin-top:26px; text-align:center; }

/* ============================================================
   news / blog cards
   ============================================================ */
.news-sec{ padding:clamp(56px,8vh,96px) 0; }
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; }
.n-card{ background:transparent; }
.n-card .n-link{ display:block; text-decoration:none; }
.n-card figure{
  margin:0; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:var(--card);
}
.n-card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.n-card:hover figure img{ transform:scale(1.04); }
.n-body{ padding:14px 2px 0; }
.n-meta{ display:flex; align-items:center; gap:10px; font:400 12.5px/1 var(--f-body); color:var(--ink-3); letter-spacing:.02em; }
.n-chip{ font:600 11px/1 var(--f-disp); letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }
.n-card h3{ margin-top:10px; font:600 15.5px/1.4 var(--f-disp); color:var(--ink); letter-spacing:.01em; }
.n-card .n-link:hover h3{ text-decoration:underline; text-underline-offset:3px; }
.n-body > p{ display:none; } /* reference blog card: image, date, title, read-more */
.n-more{
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  font:600 13px/1 var(--f-disp); color:var(--ink); letter-spacing:.03em;
}
.n-more i{ font-style:normal; transition:transform .3s var(--ease); }
.n-card:hover .n-more i{ transform:translateX(4px); }
.media-ph{ color:var(--acc); opacity:.5; }
.media-ph svg{ width:44px; height:44px; }
.post-media.no-img, .n-card figure.no-img{ display:flex; align-items:center; justify-content:center; background:var(--card); }

/* ============================================================
   FAQ accordions (home + PDP)
   ============================================================ */
.bf-pdp-faq{ padding:clamp(56px,8vh,96px) 0; }
.ov-grid{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:clamp(28px,4vw,64px); align-items:start; }
.accordion{ display:grid; }
.acc{ border-bottom:1px solid var(--line); }
.acc summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:19px 2px; cursor:pointer;
  font:600 16px/1.35 var(--f-disp); color:var(--ink);
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary i{ position:relative; width:16px; height:16px; flex:0 0 auto; }
.acc summary i::before, .acc summary i::after{
  content:""; position:absolute; background:var(--ink); border-radius:2px;
  transition:transform .3s var(--ease);
}
.acc summary i::before{ left:0; right:0; top:7px; height:2px; }
.acc summary i::after{ top:0; bottom:0; left:7px; width:2px; }
.acc[open] summary i::after{ transform:scaleY(0); }
.acc > p{ padding:0 2px 20px; font-size:14.5px; line-height:1.7; color:var(--mut); max-width:80ch; }
.home-faq .bf-faq-q{ min-width:0; }

/* ============================================================
   CTA — inset dark card
   ============================================================ */
.cta{ padding:clamp(40px,6vh,72px) 0 clamp(64px,9vh,104px); background:var(--bg); }
.cta-inner{
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(250,100,0,.16), transparent 52%),
    var(--ink);
  border-radius:16px;
  padding:clamp(40px,6vw,76px);
  color:#fff;
}
.cta-title{ font:700 clamp(28px,3vw,40px)/1.18 var(--f-disp); letter-spacing:-.01em; color:#fff; }
.cta-sub{ margin-top:14px; font-size:16px; color:rgb(255 255 255 / .72); max-width:56ch; }
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
/* on the dark card the ink-filled buttons would vanish — invert the pair */
.cta .cta-btn{ background:#fff; color:var(--ink); }
.cta .cta-btn:hover{ background:rgb(255 255 255 / .85); box-shadow:none; }
.cta .ghost-btn{ color:#fff; border-color:rgb(255 255 255 / .55); }
.cta .ghost-btn:hover{ background:#fff; color:var(--ink); border-color:#fff; }

/* ============================================================
   footer — dark
   ============================================================ */
.foot{ background:var(--ink); color:rgb(255 255 255 / .82); margin-top:0; }
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) repeat(4,minmax(0,1fr));
  gap:clamp(28px,4vw,56px);
  padding-block:clamp(48px,7vh,76px) clamp(36px,5vh,56px);
}
.foot-brand .brand{ margin-bottom:22px; }
.foot-news-title{ font:700 24px/1.25 var(--f-disp); color:#fff; letter-spacing:-.01em; }
.foot-news-sub{ margin-top:10px; font-size:14.5px; color:rgb(255 255 255 / .62); max-width:42ch; }
.foot .news{
  position:relative; margin-top:22px;
  display:flex; align-items:center;
  background:#fff; border-radius:999px;
  padding:5px 5px 5px 22px; max-width:420px;
}
.foot .news input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:400 14.5px var(--f-body); color:var(--ink);
}
.foot .news input::placeholder{ color:var(--ink-3); }
.foot .news-btn{
  border:0; border-radius:999px;
  background:var(--ink); color:#fff;
  padding:11px 22px;
  font:600 13.5px/1 var(--f-disp);
  transition:background .25s;
}
.foot .news-btn:hover{ background:#242424; }
.news-note{ margin-top:12px; font-size:12.5px; color:rgb(255 255 255 / .5); }
.foot-col h3{
  font:700 13px/1 var(--f-disp); letter-spacing:.1em; text-transform:uppercase;
  color:#fff; margin-bottom:18px;
}
.foot-col ul{ list-style:none; display:grid; gap:12px; }
.foot-col a{ color:rgb(255 255 255 / .62); text-decoration:none; font-size:14px; }
.foot-col a:hover{ color:#fff; }
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border-top:1px solid rgb(255 255 255 / .12);
  padding-block:22px;
  font-size:13px; color:rgb(255 255 255 / .55);
}
.foot-legal ul{ display:flex; gap:22px; list-style:none; flex-wrap:wrap; }
.foot-legal a{ color:rgb(255 255 255 / .55); text-decoration:none; }
/* accepted payment marks — dark scheme marks sit on white pills;
   self-contained brand chips (e.g. the purple WooPay badge) render bare */
.foot-pay{ display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.foot-pay img{ display:block; height:24px; width:auto; border-radius:4px; }
.foot-pay img.pay-onlight{ background:#fff; padding:3px 5px; }
.foot-legal a:hover{ color:#fff; }

/* ============================================================
   cart drawer / search overlay / notices
   ============================================================ */
.bf-drawer{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.bf-drawer-backdrop{
  position:absolute; inset:0; background:rgb(10 10 10 / .45);
  opacity:0; transition:opacity .3s;
}
.bf-drawer-panel{
  position:absolute; top:0; right:0; bottom:0;
  width:min(420px,92vw);
  background:var(--raise);
  transform:translateX(102%);
  transition:transform .38s var(--ease-out);
  display:flex; flex-direction:column;
  box-shadow:-24px 0 60px -30px rgb(0 0 0 / .4);
}
.bf-drawer.open{ pointer-events:auto; }
.bf-drawer.open .bf-drawer-backdrop{ opacity:1; }
.bf-drawer.open .bf-drawer-panel{ transform:none; }
.bf-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.bf-drawer-head h3{ font:600 18px var(--f-disp); color:var(--ink); }
.bf-drawer-close{ width:38px; height:38px; border:0; border-radius:50%; background:var(--card); color:var(--ink); display:grid; place-items:center; }
.bf-drawer-close svg{ width:16px; height:16px; }
.bf-drawer-body{ flex:1; overflow:auto; padding:18px 24px; }
.bf-drawer-foot{ border-top:1px solid var(--line); padding:18px 24px; background:var(--raise); }
.bci{ display:grid; grid-template-columns:72px minmax(0,1fr); gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
.bci-thumb img{ width:72px; height:72px; object-fit:contain; background:var(--card); border-radius:8px; }
.bci-info b{ display:block; font:600 14.5px/1.35 var(--f-disp); color:var(--ink); }
.bci-price{ margin-top:6px; font:600 14px var(--f-disp); color:var(--ink); }
.bf-drawer-qty{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; border:1px solid var(--line-2); border-radius:999px; padding:3px; }
.bf-drawer-qty .bf-dqty{ width:24px; height:24px; border:0; border-radius:50%; background:transparent; color:var(--ink); font:700 15px/1 var(--f-disp); display:grid; place-items:center; }
.bf-drawer-qty .bf-dqty:hover{ background:var(--chip); }
.bf-drawer-qty .bf-dqty-val{ min-width:18px; text-align:center; font:600 13px/1 var(--f-disp); color:var(--ink); }
.bf-drawer-empty{ text-align:center; color:var(--ink-3); padding:40px 0; font-size:14.5px; }
.bf-drawer-total{ display:flex; justify-content:space-between; font:600 15px var(--f-disp); color:var(--ink); margin-bottom:14px; }

.search-overlay{
  position:fixed; inset:0; z-index:130;
  background:rgb(10 10 10 / .5);
  display:grid; place-items:start center;
  padding:14vh 20px 0;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.search-overlay.open{ opacity:1; visibility:visible; }
.so-panel{
  width:min(640px,100%);
  background:var(--raise); border-radius:16px;
  padding:22px 24px;
  box-shadow:var(--shadow-pop);
}
.so-input{ display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.so-input svg{ width:19px; height:19px; color:var(--ink-3); }
.so-input input{ flex:1; border:0; outline:0; font:400 16.5px var(--f-body); color:var(--ink); background:transparent; }
.so-input kbd{ font:600 11px var(--f-disp); color:var(--ink-3); border:1px solid var(--line-2); border-radius:6px; padding:3px 7px; }
.so-hints{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.so-hints a{
  font:500 13px/1 var(--f-body); color:var(--ink-2); text-decoration:none;
  background:var(--card); border-radius:999px; padding:8px 14px;
}
.so-hints a:hover{ background:var(--ink); color:#fff; }
.so-note{ margin-top:14px; font-size:12.5px; color:var(--ink-3); }

.bf-subs-notice{
  background:var(--raise); border:1px solid var(--line-2); color:var(--ink);
  border-radius:12px; padding:14px 18px; font-size:14px;
  box-shadow:var(--shadow-pop);
}

/* coupon fab — white text + white pulse dot on the accent pill */
.bf-coupon-fab{ color:#fff; }

/* ============================================================
   PDP — same 1440 stage as every other page (the full-bleed
   override was dropped: the buy box read stretched on wide screens)
   ============================================================ */
.pd-top{
  display:grid; grid-template-columns:minmax(0,59fr) minmax(0,41fr);
  gap:clamp(24px,3vw,40px);
  align-items:start;
  padding-bottom:clamp(40px,6vh,72px);
}
.pd-gallery{
  display:grid; grid-template-columns:112px minmax(0,1fr); grid-template-areas:"thumbs main";
  gap:16px; align-self:start;
  position:sticky; top:90px;
}
.g-main{
  grid-area:main; position:relative;
  aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden;
  background:var(--card);
}
.g-img{ position:absolute; inset:0; }
.g-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.g-flag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--ink); color:#fff;
  padding:7px 13px; border-radius:999px;
  font:600 10.5px/1 var(--f-disp); letter-spacing:.1em; text-transform:uppercase;
}
.g-lens{ display:none; }
/* thumbnail rail: absolutely positioned inside its grid area so the row
   height keeps following the square main image; the rail scrolls inside
   that height instead of stretching the gallery. The rail is wider than
   the thumbnails so the scrollbar never overlaps them. */
.g-thumbs{
  grid-area:thumbs; position:absolute; top:0; left:0;
  width:100%; height:100%; max-height:100%;
  display:flex; flex-direction:column; gap:10px;
  overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  padding-right:8px;
}
.g-thumbs::-webkit-scrollbar{ width:5px; }
.g-thumbs::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.g-th, .g-more-btn{
  width:96px; height:96px; flex:0 0 auto;
  border:1.5px solid transparent; border-radius:8px;
  background:var(--card); padding:6px;
  transition:border-color .2s;
}
.g-th img{ width:100%; height:100%; object-fit:contain; }
.g-th.is-on{ border-color:var(--ink); }
.g-more-btn{ font:600 15px var(--f-disp); color:var(--ink); }
.pd-highlights{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 18px;
  background:var(--card); border-radius:var(--r-lg);
  padding:16px 20px; margin-bottom:clamp(28px,4vh,44px);
}
.pd-highlights > b{ font:600 12.5px/1.3 var(--f-disp); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.pd-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:0; }
.pd-chips span{
  display:inline-flex; align-items:center; min-height:42px;
  background:var(--raise); border:1px solid var(--line);
  border-radius:999px;
  padding:8px 18px;
  font:600 13.5px/1.2 var(--f-disp); color:var(--ink);
}

.pd-info{ position:sticky; top:calc(var(--head-h) + 14px); min-width:0; }
.pd-eyebrow{
  font:600 12px/1 var(--f-disp); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:12px;
}
.pd-eyebrow .dot-live{ margin-right:8px; }
.pd-title{ font:600 clamp(23px,1.8vw,26px)/1.22 var(--f-disp); letter-spacing:-.01em; color:var(--ink); }
.pd-title em{ font-style:normal; color:var(--acc); }
.pd-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin-top:12px; }
.pd-price b{ font:700 24px/1 var(--f-disp); color:var(--ink); }
.pd-price s{ font:400 16px/1 var(--f-body); color:var(--ink-3); }
.pd-rating{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:14px; }
.pd-rating a{ color:var(--mut); text-underline-offset:3px; }
.pd-rating a:hover{ color:var(--acc); }
.pd-warn{
  margin-top:18px;
  background:var(--card); border-radius:8px;
  padding:14px 16px; display:flex; gap:12px; align-items:flex-start;
}
.pd-warn svg{ width:20px; height:20px; flex:0 0 auto; color:var(--acc-deep); margin-top:1px; }
.pd-warn p{ font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.pd-feat{ margin-top:20px; background:var(--card); border-radius:8px; }
.pd-feat summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 22px; cursor:pointer;
  font:600 15.5px/1.3 var(--f-disp); color:var(--ink);
}
.pd-feat summary::-webkit-details-marker{ display:none; }
.pd-feat summary i{ position:relative; width:15px; height:15px; flex:0 0 auto; }
.pd-feat summary i::before, .pd-feat summary i::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease); }
.pd-feat summary i::before{ left:0; right:0; top:6.5px; height:2px; }
.pd-feat summary i::after{ top:0; bottom:0; left:6.5px; width:2px; }
.pd-feat[open] summary i::after{ transform:scaleY(0); }
.pd-feat-body{ padding:2px 22px 20px; font-size:14px; line-height:1.65; color:var(--ink-2); }
.pd-feat-body p + p{ margin-top:8px; }
.pd-feat-body ul{ list-style:disc; padding-left:1.15em; display:grid; gap:7px; }
.pd-feat-body li::marker{ color:var(--ink); }
.pd-feat-body p:empty{ display:none; }

.pd-buy{ margin-top:20px; display:flex; gap:12px; align-items:stretch; }
.pd-buy .bf-qty{
  flex:0 0 auto; width:132px; min-height:56px;
  border:1px solid rgb(10 10 10 / .14); border-radius:999px;
  background:var(--raise);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 10px;
}
.pd-buy .bf-qty-btn{
  width:40px; height:42px; border:0; border-radius:8px;
  background:transparent; color:var(--ink);
  font:400 20px/1 var(--f-disp);
  display:grid; place-items:center;
  transition:background .2s;
}
.pd-buy .bf-qty-btn:hover{ background:var(--chip); }
.pd-buy .bf-qty-val{ font:600 16px/1 var(--f-disp); color:var(--ink); }
.pd-buy .bf-qty-input{ display:none; }
.pd-buy .quantity{ flex:0 0 auto; }
/* express-checkout gate: the payment plugin prints a skeleton frame that
   stays empty until a gateway fills it — keep it collapsed meanwhile. */
.pd-info #bfPayGate{ min-height:0; height:auto; }
.pd-info #bfPayGate .bf-pay-skel{ display:none !important; }
.pd-buy .cta-btn{ flex:1; min-width:0; border-radius:999px; padding:18px 26px; font-size:16px; font-weight:400; }
.pd-buy-now{
  margin-top:12px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:52px;
  background:var(--acc); color:#fff;
  border-radius:999px;
  font:600 15px/1 var(--f-disp);
  text-decoration:none;
  transition:background .25s;
}
.pd-buy-now:hover{ background:var(--acc-deep); }
.pd-buy-now .cta-arrow{ width:16px; height:16px; }

.pd-stock{ margin-top:16px; display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); }
.pd-stock .dot-live{ width:7px; height:7px; background:var(--ok); }
.pd-note{
  margin-top:16px; display:flex; gap:10px; align-items:flex-start;
  background:var(--card); border-radius:8px; padding:13px 16px;
  font-size:13px; line-height:1.55; color:var(--mut);
}
.pd-note svg{ width:17px; height:17px; flex:0 0 auto; margin-top:2px; color:var(--ink-3); }
.pd-help{ margin-top:16px; display:flex; align-items:center; gap:9px; font-size:14px; }
.pd-help svg{ width:18px; height:18px; color:var(--ink-3); }
.pd-help a{ color:var(--ink); text-underline-offset:3px; }
.pd-help a:hover{ color:var(--acc); }
.pd-trust{ list-style:none; margin-top:22px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; }
.pd-trust li{
  display:flex; align-items:center; gap:12px;
  padding:14px 2px; border-top:1px solid var(--line);
  font:500 14px/1.4 var(--f-body); color:var(--ink);
  min-width:0;
}
.pd-trust li:nth-child(-n+2){ border-top:0; }
.pd-trust svg{ width:20px; height:20px; color:var(--ink-2); flex:0 0 auto; }

/* PDP sections */
.codecs{ padding:clamp(48px,7vh,80px) 0; background:var(--raise); }
.codecs .codec-bars.big{ display:grid; gap:18px; max-width:980px; }
.codecs .cb{ grid-template-columns:80px minmax(0,1fr) auto; }
.codecs .cb i{ height:8px; border-radius:4px; }

.overview{ padding:clamp(56px,8vh,96px) 0; }
.ov-media{ position:relative; }
.ov-img{ margin:0; border-radius:var(--r-lg); overflow:hidden; }
.ov-img img{ width:100%; display:block; }
.ov-tag{
  position:absolute; left:16px; bottom:16px;
  background:rgb(255 255 255 / .92); color:var(--ink);
  border-radius:999px; padding:9px 16px;
  font:600 12.5px/1 var(--f-disp);
}
.ov-copy--wide{ max-width:820px; }
.ov-copy .accordion{ margin-top:10px; }

.bf-compat{ padding:clamp(48px,7vh,80px) 0; background:var(--raise); }
.cmp-scroll{ overflow-x:auto; max-width:100%; min-width:0; }
.cmp{ width:100%; border-collapse:collapse; min-width:640px; }
.cmp th, .cmp td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--line); font-size:14.5px; }
.cmp thead th{ font:600 13px/1.2 var(--f-disp); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.cmp tbody th{ font:500 14.5px var(--f-disp); color:var(--ink); white-space:nowrap; }
.bf-state{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-size:14px; }
.bf-state--yes{ background:rgba(31,157,85,.12); color:var(--ok); }
.bf-state--no{ background:rgba(10,10,10,.06); color:var(--ink-3); }
.bf-state--partial{ background:var(--acc-soft); color:var(--acc-deep); }

.specs{ padding:clamp(56px,8vh,96px) 0; }
/* spec tables: each definition list renders as a ruled two-column table
   (label | value) for scannable side-by-side groups */
.spec-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px clamp(28px,4vw,64px); align-content:start; }
.spec-grid dl{ min-width:0; border-top:1px solid var(--line-2); }
.spec-grid dl > div{
  display:grid; grid-template-columns:minmax(96px,2fr) minmax(0,3fr); gap:14px;
  padding:11px 2px; border-bottom:1px solid var(--line);
}
.spec-grid dt{ font:500 12px/1.6 var(--f-disp); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.spec-grid dd{ font:400 14px/1.55 var(--f-body); color:var(--ink); overflow-wrap:anywhere; }
/* R7: title column left, checklist right in two columns — the box reads as
   one full-width instrument card instead of a narrow list with dead space
   on the right. Background stays the shared card tone. */
.inbox{
  margin-top:36px; background:var(--card); border-radius:var(--r-lg);
  padding:30px 36px 32px;
  display:grid; grid-template-columns:minmax(170px,230px) minmax(0,1fr);
  gap:18px clamp(28px,4vw,64px); align-items:start;
}
.inbox h3{ font:600 17px/1.35 var(--f-disp); color:var(--ink); margin:2px 0 0; }
.inbox ul{ margin:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px; }
.inbox li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.inbox li::before{
  content:"✓"; position:absolute; left:0; top:1px;
  width:17px; height:17px; border-radius:50%;
  background:var(--acc); color:#fff;
  font:700 10px/17px var(--f-body); text-align:center;
}
@media (max-width:760px){
  .inbox{ grid-template-columns:1fr; gap:14px; padding:24px 22px 26px; }
  .inbox ul{ grid-template-columns:1fr; gap:10px; }
}

.bf-press{ padding:clamp(48px,7vh,80px) 0; background:var(--card); }
.bf-press-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.bf-press-quote{ margin:0; background:var(--raise); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; gap:16px; }
.bf-press-quote blockquote{ font:500 15.5px/1.6 var(--f-body); color:var(--ink); }
.bf-press-quote figcaption{ font-size:13px; color:var(--ink-3); }
.bf-press-quote figcaption a{ color:var(--acc); text-decoration:none; }
.bf-press-quote figcaption a:hover{ text-decoration:underline; }

.reviews{ padding:clamp(56px,8vh,96px) 0; }
.rev-grid{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }
.rev-sum{
  background:var(--card); border-radius:var(--r-lg); padding:26px;
  position:sticky; top:calc(var(--head-h) + 14px);
  display:grid; gap:14px; justify-items:start;
}
.rev-sum > b{ font:700 52px/1 var(--f-disp); color:var(--ink); }
.rev-bars{ display:grid; gap:8px; width:100%; margin-top:6px; }
.rb{ display:grid; grid-template-columns:30px minmax(0,1fr); align-items:center; gap:10px; font:400 12.5px/1 var(--f-body); color:var(--ink-3); }
.rb i{ display:block; height:6px; border-radius:3px; background:rgb(10 10 10 / .08); position:relative; }
/* --w arrives as a bare number (0-100): calc multiplies it into a valid
   percentage. A bare var() would make `width:90` invalid at computed-value
   time and the absolutely-positioned fill falls back to inset:0 (full bar). */
.rb i::after{ content:""; position:absolute; inset:0; width:calc(var(--w,0)*1%); background:var(--acc); border-radius:3px; }
.rev-list{ display:grid; gap:0; }
.rev{ padding:26px 0; border-bottom:1px solid var(--line); display:grid; gap:12px; }
.rev:first-child{ padding-top:4px; }
.rev-top{ display:flex; align-items:center; gap:12px; }
.rev-who b{ font:600 15px/1.2 var(--f-disp); color:var(--ink); }
.rev-date{ margin-left:auto; font-size:12.5px; color:var(--ink-3); }
.rev-quote{ font-size:14.5px; line-height:1.7; color:var(--ink-2); }
.rev-quote p + p{ margin-top:8px; }
.verified{ font:500 12.5px/1 var(--f-body); color:var(--ok); }
.verified.bf-src-plain{ color:var(--ink-3); }
.rev-photos{ display:flex; gap:10px; flex-wrap:wrap; }
.rev-photo{ width:76px; height:76px; border:0; border-radius:8px; overflow:hidden; padding:0; background:var(--card); }
.rev-photo img{ width:100%; height:100%; object-fit:cover; }
.rev-videos video{ width:min(320px,100%); border-radius:8px; background:#000; }
.rev-reply{ background:var(--card); border-radius:8px; padding:14px 16px; }
.rev-reply > b{ font:600 12.5px/1 var(--f-disp); color:var(--ink); }
.rev-reply blockquote{ margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
.rev-more-link{ border:0; background:none; padding:0; font:600 13px var(--f-disp); color:var(--acc); text-align:left; }
/* PDP reviews pager — compact circle arrows with a page indicator */
.rev-pager{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
}
.rev-pager .rev-count{ font:400 13px/1 var(--f-body); color:var(--ink-3); }
.rev-pager .pg-group{ display:flex; align-items:center; gap:8px; }
.rev-pager .pg-btn{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line-2); background:var(--raise); color:var(--ink);
  display:grid; place-items:center; text-decoration:none;
  transition:border-color .2s;
}
.rev-pager .pg-btn svg{ width:18px; height:18px; }
.rev-pager a.pg-btn:hover{ border-color:var(--ink); }
.rev-pager span.pg-btn{ opacity:.35; pointer-events:none; }
.rev-pager .pg-ind{ font:500 14px/1 var(--f-disp); color:var(--ink); min-width:52px; text-align:center; }
.bf-review-toggle{ margin-top:22px; border:1px solid var(--line-2); border-radius:8px; background:var(--raise); }
.bf-review-toggle summary{ padding:15px 18px; }
.bf-review-toggle .bf-review-form{ padding:6px 18px 20px; display:grid; gap:14px; }
.bf-review-form label{ font:600 13.5px var(--f-disp); color:var(--ink); display:block; margin-bottom:6px; }
.bf-review-form input[type="text"], .bf-review-form input[type="email"], .bf-review-form textarea, .bf-review-form select{
  width:100%; border:1px solid var(--line-2); border-radius:8px;
  padding:11px 14px; font:400 14.5px var(--f-body); color:var(--ink); background:var(--raise);
}
.bf-review-form .submit{ background:var(--ink); color:#fff; border:0; border-radius:999px; padding:13px 28px; font:600 14px var(--f-disp); }
.bf-clamp{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

.compare{ padding:clamp(56px,8vh,96px) 0; background:var(--raise); }
.compare .sec-head{ text-align:center; }
.compare .sec-sub{ margin-inline:auto; text-align:center; max-width:min(640px,100%); }
.compare .cmp{ min-width:820px; }
.cmp .cmp-label{ width:150px; }
.cmp-hint{ font:600 11.5px/1 var(--f-disp); letter-spacing:.1em; color:var(--ink-3); }
.compare .cmp thead th{ text-transform:none; letter-spacing:0; vertical-align:bottom; font:400 13.5px/1.4 var(--f-body); color:var(--mut); }
.compare .cmp thead th figure{ margin:0 auto 12px; width:150px; height:150px; background:var(--card); border-radius:8px; display:grid; place-items:center; padding:8px; }
.compare .cmp thead th figure img{ max-width:100%; max-height:100%; object-fit:contain; }
.compare .cmp thead th b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.7em; /* two reserved name lines keep subtitles aligned when one name wraps */
  font:600 15px/1.35 var(--f-disp); color:var(--ink); margin-top:4px;
}
.compare .cmp thead th i{ font:400 12.5px/1.4 var(--f-body); font-style:normal; color:var(--ink-3); }
.cmp-flag{
  display:inline-block; background:var(--ink); color:#fff;
  border-radius:999px; padding:5px 11px;
  font:600 10px/1 var(--f-disp); letter-spacing:.1em; margin-bottom:10px;
}
.compare .cmp tbody th{ font:700 13.5px/1.4 var(--f-disp); text-align:center; color:var(--ink); white-space:normal; }
.compare .cmp tbody td{ text-align:center; font-size:14px; color:var(--ink-2); }
.cmp-price{ font:700 15.5px var(--f-disp); color:var(--ink); }
.cmp td s{ margin-left:6px; color:var(--ink-3); font-size:12.5px; }
.cmp-cta td{ padding-top:20px; }
.cmp-cta .cta-btn{ width:100%; max-width:230px; background:var(--acc); border-radius:999px; padding:12px 18px; font-size:14px; }
.cmp-cta .cta-btn:hover{ background:var(--acc-deep); box-shadow:none; }
.cmp-cta .ghost-btn{ width:100%; max-width:230px; justify-content:center; }

.faq-sec .wrap > .accordion{ max-width:980px; }

.related{ padding:clamp(48px,7vh,80px) 0 clamp(64px,9vh,104px); }
/* the card rail stays inside the 1440 stage: left edge locks to the same
   line as the section title, cards clip at the frame instead of the
   viewport edge */
.rel-track-wrap{
  overflow:hidden;
  max-width:1440px; margin-inline:auto;
  padding-left:clamp(20px,3.4vw,48px);
}
.rel-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,22vw,300px);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px; scrollbar-width:none;
}
.rel-track::-webkit-scrollbar{ display:none; }
/* R7: the card internals (media/name/price/rating pill) come from the shared
   bmp-card rules in wp-extend.css; the track only owns scrolling + sizing */
.r-card{
  scroll-snap-align:start; text-decoration:none;
}
.rel-nav{ display:flex; gap:10px; }

.mini-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgb(255 255 255 / .97);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 40px -20px rgb(0 0 0 / .25);
  transform:translateY(110%);
  transition:transform .35s var(--ease-out);
}
.mini-bar.show{ transform:none; }
.mb-inner{ display:flex; align-items:center; gap:16px; padding-block:12px; }
.mb-inner img{ width:44px; height:44px; object-fit:contain; background:var(--card); border-radius:8px; }
.mb-info{ flex:1; min-width:0; }
.mb-info b{ display:block; font:600 14.5px/1.3 var(--f-disp); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-info span{ font:600 14px var(--f-disp); color:var(--ink); }

/* ============================================================
   shop / collection
   ============================================================ */
.shop-banner{
  background:
    radial-gradient(110% 130% at 82% 6%, rgba(250,100,0,.12), transparent 52%),
    linear-gradient(168deg, #1B1B1D 0%, #0E0E10 62%, #141412 100%);
  color:#fff;
  background-size:cover; background-position:center;
  display:flex; align-items:flex-end;
  min-height:clamp(360px,50vh,540px);
}
.shop-banner.has-img::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(0 0 0 / .30), rgb(0 0 0 / .62));
}
.shop-banner .wrap{ position:relative; z-index:1; }
.shop-banner .crumbs{ padding-top:0; margin-bottom:18px; }
.sb-copy{ padding-bottom:clamp(36px,6vh,56px); }
.sb-copy h1{
  font:700 clamp(38px,4.6vw,64px)/1.08 var(--f-disp);
  letter-spacing:-.02em; color:#fff; text-transform:uppercase;
}
.sb-copy .page-sub{ margin-top:16px; font-size:16px; color:rgb(255 255 255 / .82); max-width:72ch; }

.shop-page #grid{ padding-top:clamp(30px,5vh,52px) !important; padding-bottom:clamp(50px,8vh,90px) !important; }
/* category landing hero: split stage — copy left, benefit cards right */
.shop-page .page-hero:has(.hero-chips){
  background:var(--card);
  border-radius:16px;
  margin-top:24px;
  padding:clamp(28px,4vw,56px);
}
.shop-page .page-hero:has(.hero-chips) .wrap{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  column-gap:clamp(28px,4vw,60px); row-gap:0;
  align-items:center;
}
.shop-page .page-hero:has(.hero-chips) .eyebrow{ margin-bottom:16px; }
.shop-page .page-hero:has(.hero-chips) h1{ max-width:16ch; }
.shop-page .page-hero:has(.hero-chips) .page-sub{ max-width:48ch; }
.shop-page .page-hero:has(.hero-chips) .hero-chips{
  grid-column:2; grid-row:1 / span 3; align-self:center;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  list-style:none; margin:0; padding:0;
}
.shop-page .page-hero:has(.hero-chips) .hero-chips li{
  display:flex; align-items:center; gap:11px;
  background:var(--raise); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px;
  font:500 14.5px/1.35 var(--f-body); color:var(--ink);
  min-width:0;
}
.shop-page .page-hero:has(.hero-chips) .hero-chips li::before{
  content:"✓"; flex:0 0 auto;
  width:22px; height:22px; border-radius:50%;
  background:var(--acc); color:#fff;
  display:grid; place-items:center;
  font:700 12px/1 var(--f-disp);
}
.filter-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px; }
.filter-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.sort-box{ display:flex; align-items:center; gap:12px; }
.sort-box label{ font:400 14px var(--f-body); color:var(--mut); }
.sort-box select{
  appearance:none; -webkit-appearance:none;
  border:1.5px solid var(--ink); border-radius:10px;
  background:var(--raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/14px no-repeat;
  height:46px; padding:0 40px 0 16px;
  font:500 14px var(--f-disp); color:var(--ink); cursor:pointer;
}

/* ============================================================
   content pages (article / policy / Woo basic)
   ============================================================ */
.entry-content{ font-size:16.5px; line-height:1.75; color:var(--ink-2); max-width:80ch; }
.entry-content h2{ font:700 clamp(22px,2.4vw,30px)/1.3 var(--f-disp); color:var(--ink); margin:1.6em 0 .6em; letter-spacing:-.01em; }
.entry-content h3{ font:600 19px/1.35 var(--f-disp); color:var(--ink); margin:1.4em 0 .5em; }
.entry-content a{ color:var(--acc); text-underline-offset:3px; }
.entry-content ul, .entry-content ol{ padding-left:1.3em; display:grid; gap:6px; margin:1em 0; }
.entry-content img{ border-radius:8px; }
.entry-content blockquote{
  border-left:3px solid var(--acc); background:var(--card);
  padding:16px 20px; border-radius:0 8px 8px 0; margin:1.4em 0;
  font-size:15.5px; color:var(--ink-2);
}
.entry-content table{ width:100%; border-collapse:collapse; margin:1.4em 0; }
.entry-content th, .entry-content td{ border:1px solid var(--line); padding:10px 14px; font-size:14.5px; text-align:left; }

/* Woo core surfaces (cart / checkout / account) — quiet neutral chrome */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-info, .woocommerce .woocommerce-message, .woocommerce .woocommerce-error{
  background:var(--card); color:var(--ink);
  border:0; border-left:3px solid var(--acc); border-radius:8px;
  padding:14px 18px; font-size:14.5px; list-style:none;
}
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.woocommerce button.button.alt, .woocommerce a.button.alt{
  background:var(--ink) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important;
  padding:13px 26px !important; font:500 14.5px var(--f-disp) !important;
}
.woocommerce button.button:hover, .woocommerce a.button:hover{ background:#242424 !important; }
/* the blanket !important padding would flatten intl-tel-input's inline
   flag-clearance on the WooPayments save-info phone field (country code
   overlapping the placeholder) — exclude that input from the padding force
   and give it the same skin with plugin-owned horizontal padding */
.woocommerce input.input-text:not(.phone-input), .woocommerce textarea, .woocommerce select{
  border:1px solid var(--line-2) !important; border-radius:8px !important;
  padding:11px 14px !important; font:400 14.5px var(--f-body) !important; background:var(--raise) !important; color:var(--ink) !important;
}
.woocommerce input.input-text.phone-input{
  border:1px solid var(--line-2) !important; border-radius:8px !important;
  padding:11px 14px; font:400 14.5px var(--f-body) !important; background:var(--raise) !important; color:var(--ink) !important;
}
.woocommerce .quantity .qty{ border:1px solid var(--line-2); border-radius:8px; height:44px; }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:1180px){
  .bs-grid, .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .news-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .why-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:980px){
  :root{ --head-h:66px; }
  .site-head{ height:var(--head-h); }
  .head-inner{ grid-template-columns:1fr auto 1fr; }
  .brand{ grid-column:1; justify-self:start; }
  .head-tools{ grid-column:3; }
  .menu-btn{ display:grid; }
  .main-nav{ display:none; }
  /* carousel hero: center the copy stack over the art */
  .hero-slide{ text-align:center; }
  .hero-copy{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  /* the reference storefront fills the hero CTA with the accent on small
     screens (glass reads washed-out on mobile) */
  .hero .cta-btn.glass{ background:var(--acc); border-color:var(--acc); color:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .hero .cta-btn.glass:hover{ background:var(--acc-deep); }
  .sc-grid{ grid-template-columns:1fr; }
  .sc-tile, .sc-tile.sc-wide{ aspect-ratio:4/3.4; }
  .bento{ grid-template-columns:1fr; }
  .b-card.wide{ grid-column:auto; }
  .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 20px; }
  .help-banner{ grid-template-columns:1fr; }
  .pd-top{ grid-template-columns:1fr; }
  /* the adaptation layer reorders the info column with flex orders on
     small screens (legacy squeeze) — the v3 stack follows the DOM. */
  .pd-info{ display:block; }
  .pd-info > *{ order:0; }
  .pd-gallery{ position:static; grid-template-columns:1fr; grid-template-areas:"main" "thumbs"; }
  .g-thumbs{ position:static; width:auto; height:auto; max-height:none; flex-direction:row; overflow-y:hidden; overflow-x:auto; scrollbar-width:none; }
  .pd-info{ position:static; }
  .rev-grid{ grid-template-columns:1fr; }
  .rev-sum{ position:static; }
  .ov-grid{ grid-template-columns:1fr; }
  .bf-press-grid{ grid-template-columns:1fr; }
  .spec-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-brand{ grid-column:1/-1; }
  .shop-page .page-hero:has(.hero-chips) .wrap{ grid-template-columns:1fr; }
  .shop-page .page-hero:has(.hero-chips) .hero-chips{ grid-column:1; grid-row:auto; }
  .stories-head{ flex-direction:column; align-items:stretch; }
  .stories-score{ min-width:0; }
}
@media (max-width:760px){
  .bs-grid, .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .news-grid{ grid-template-columns:1fr; }
  .rel-track{ grid-auto-columns:min(72vw,260px); }
  .v2-ann{ font-size:12.5px; padding-inline:16px 42px; justify-content:flex-start; overflow:hidden; }
  .v2-ann .ann-track{ width:max-content; animation:bf-marquee 14s linear infinite; }
  .v2-ann .ann-track span + span{ display:inline-block; padding-left:64px; }
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .cta-btn, .cta-row .ghost-btn{ justify-content:center; }
  .pd-buy{ flex-wrap:wrap; }
  .pd-buy .cta-btn{ flex:1 1 100%; order:2; }
  .pd-buy .quantity{ flex:1 1 auto; }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .bs-grid, .shop-grid{ grid-template-columns:1fr; }
  .brand-word{ font-size:22px; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  /* trust points stay a 2×2 grid on phones, just tighter */
  .pd-trust{ column-gap:18px; }
  .pd-trust li{ font-size:13px; gap:9px; padding:12px 2px; }
  .shop-page .page-hero:has(.hero-chips) .hero-chips{ grid-template-columns:1fr; }
}

/* ============================================================
   print
   ============================================================ */
@media print{
  .grain, .site-head, .m-nav, .v2-ann,
  #miniBar, .mini-bar, .foot, .bf-drawer, .search-overlay,
  .head-progress, .skip-link{ display:none !important; }
  body{ background:#fff !important; color:#111 !important; }
  main, .wrap{ max-width:100% !important; padding:0 !important; }
  a{ color:#111 !important; text-decoration:underline; }
  .rv{ opacity:1 !important; transform:none !important; }
  details{ display:block; }
  details > *{ display:block !important; }
}

/* ============================================================
   CONTENT PAGES LAYER — learn hub / article / support / FAQ /
   downloads / reviews wall / video hub blocks carried from the
   previous skin verbatim (they are token-driven, so the v3
   palette above recolors them automatically; nothing here
   redefines the storefront sections styled earlier in this file).
   ============================================================ */
.page-hero{ padding:clamp(36px,6vh,72px) 0 clamp(28px,4vh,48px); }
.page-hero .eyebrow{ margin-bottom:20px; }
.page-hero h1{ font:700 clamp(2.2rem,4.6vw,3.6rem)/1.08 var(--f-disp); letter-spacing:-.02em; max-width:22ch; }
.page-hero h1 .acc{ color:var(--acc); }
.page-hero .page-sub{ color:var(--ink-2); font-size:clamp(1rem,1.3vw,1.12rem); max-width:64ch; margin-top:16px; }
/* ============================================================
   BLOG POST + SIDEBAR
   ============================================================ */
/* article column takes the space freed by the tightened gutter (the sidebar
   keeps its 320px); the gap lands near a third of the old space-between
   leftover instead of stranding ~200px of dead white between the columns */
.post-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; justify-content:start; gap:clamp(28px,4.7vw,68px); align-items:start; }
.post-head{ display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin-bottom:24px; }
.post-title{ font:700 clamp(1.8rem,3.6vw,2.6rem)/1.16 var(--f-disp); letter-spacing:-.02em; }
.post-lede{ font:400 17px/1.65 var(--f-disp); color:var(--ink-2); }
.post-byline{ display:flex; align-items:center; gap:12px; }
.post-byline b{ display:block; font:500 14px/1.2 var(--f-disp); }
.post-byline i{ font:400 12.5px/1.3 var(--f-body); font-style:normal; color:var(--ink-3); }
.post-feat{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); margin:0 0 28px; }
.post-feat img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.post-feat figcaption{ padding:11px 15px; font-size:12.5px; color:var(--ink-3); background:var(--chip); border-top:1px solid var(--line); }
.post-body{ display:grid; gap:18px; }
/* one shared measure: head, hero image, QA card and body all fill the
   same 800px column, so nothing reads wider or narrower than the rest */
.post-page .entry-content{ max-width:none; }
.post-body h2{ font:600 24px/1.3 var(--f-disp); margin-top:18px; letter-spacing:-.01em; scroll-margin-top:calc(var(--ann-h) + var(--head-h) + 24px); }
.post-body h3{ font:600 19px/1.3 var(--f-disp); margin-top:8px; }
.post-body p{ color:#2E2E2E; font-size:16.5px; line-height:1.75; }
.post-body p b{ color:var(--ink); }
.post-fig{ margin:6px 0; }
.post-fig img{ width:100%; border-radius:var(--r-md); border:1px solid var(--line); display:block; }
.post-fig figcaption{ font-size:12.5px; color:var(--ink-3); padding-top:8px; }
.key-box{ background:var(--acc-soft); border:1px solid rgba(250,100,0,.25); border-radius:var(--r-md); padding:20px 22px; }
.key-box h4{ font:600 12.5px/1 var(--f-disp); color:var(--acc); letter-spacing:.14em; text-transform:uppercase; margin-bottom:10px; }
.key-box ul{ margin-left:18px; display:grid; gap:6px; color:var(--ink-2); font-size:14.5px; }
.post-table{ width:100%; border-collapse:collapse; font-size:14px; }
.post-table th, .post-table td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.post-table thead th{ font:500 12px/1.2 var(--f-disp); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.post-table td:first-child, .post-table th:first-child{ padding-left:0; }
.post-ol{ margin-left:20px; display:grid; gap:10px; color:var(--ink-2); font-size:15.5px; }
.post-ol li::marker{ color:var(--acc); font-weight:600; }
.post-ol li b{ color:var(--ink); }

.post-tags{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); }
.post-tags > span{ font:500 12.5px/1 var(--f-disp); color:var(--ink-3); margin-right:4px; }
.post-tags a{
  text-decoration:none; font:400 12.5px/1 var(--f-disp); color:var(--ink-2);
  border:1px solid var(--line-2); padding:8px 14px; border-radius:999px; background:var(--raise);
  transition:border-color .25s, color .25s;
}
.post-tags a:hover{ border-color:var(--ink); color:var(--ink); }
.author-box{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:22px; margin-top:26px;
}
.author-box .q-ava{ width:50px; height:50px; font-size:15px; }
.author-box .a-name b{ display:block; font:500 15px/1.25 var(--f-disp); }
.author-box .a-name i{ font:400 12.5px/1.4 var(--f-body); font-style:normal; color:var(--ink-3); }
.author-box p{ margin-top:8px; font-size:13.5px; color:var(--ink-2); }

.post-side{ position:sticky; top:90px; display:grid; gap:18px; }
.side-box{
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:20px; display:grid; gap:12px; align-content:start;
}
.side-box > h4{ font:600 12px/1 var(--f-disp); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.side-box a{ text-decoration:none; }
.toc a{ position:relative; display:block; padding:7px 0; font-size:14px; color:var(--ink-2); border-bottom:1px dashed var(--line); transition:color .25s, padding-left .25s; }
.toc a:last-child{ border-bottom:none; }
.toc a:hover{ color:var(--ink); padding-left:5px; }
.toc a.is-active{ color:var(--acc); padding-left:6px; }
.toc a.is-active::before{ content:""; position:absolute; left:-12px; top:50%; translate:0 -50%; width:2px; height:62%; background:var(--acc); border-radius:2px; }
.mini-post{ display:grid; gap:2px; padding:9px 0; border-bottom:1px solid var(--line); text-decoration:none; }
.mini-post:last-child{ border-bottom:none; }
.mini-post b{ font:500 14px/1.35 var(--f-disp); color:var(--ink); transition:color .25s; }
.mini-post:hover b{ color:var(--acc); }
.mini-post time{ font:400 12px/1 var(--f-body); color:var(--ink-3); }
.side-prod{ display:flex; align-items:center; gap:12px; padding:6px 0; }
.side-prod figure{ width:56px; height:56px; border-radius:10px; overflow:hidden; flex:0 0 auto; background:#fff; border:1px solid var(--line); margin:0; }
.side-prod figure img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.side-prod .sp-info b{ display:block; font:500 14px/1.3 var(--f-disp); color:var(--ink); }
.side-prod .sp-info span{ font-size:13px; color:var(--ink); font-weight:600; }
.side-news{ background:var(--acc-soft); border-color:rgba(250,100,0,.25); box-shadow:none; }
.side-news p{ font-size:13.5px; color:var(--ink-2); margin:0; }

.related-posts{ padding:clamp(40px,7vh,80px) 0 0; }
.post-nav{ display:flex; justify-content:space-between; gap:16px; padding-block:clamp(28px,5vh,44px); border-top:1px solid var(--line); }
.post-nav a{ display:grid; gap:5px; max-width:46%; text-decoration:none; }
.post-nav a span{ font:500 11.5px/1 var(--f-disp); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.post-nav a b{ font:500 15px/1.35 var(--f-disp); color:var(--ink); transition:color .25s; }
.post-nav a:hover b{ color:var(--acc); }
.post-nav a.next{ text-align:right; margin-left:auto; }

@media (max-width:1100px){
  .post-layout{ grid-template-columns:minmax(0,1fr); }
  .post-side{ position:static; }
  .post-page article.post{ max-width:800px; }
}

/* ============================================================
   SUPPORT / FAQ / DOWNLOADS / GUIDES
   ============================================================ */
.support-search{ display:flex; gap:12px; max-width:640px; margin-top:24px; position:relative; }
.support-search svg{ position:absolute; left:20px; top:50%; translate:0 -50%; width:18px; height:18px; color:var(--ink-3); }
.support-search input{
  flex:1; min-width:0; background:var(--raise); border:1px solid var(--line-2); border-radius:999px;
  color:var(--ink); padding:16px 20px 16px 50px; font:400 16px var(--f-body);
  transition:border-color .25s;
}
.support-search input::placeholder{ color:var(--ink-3); }
.support-search input:focus{ outline:none; border-color:var(--ink); }
.support-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.support-chips a{
  text-decoration:none; font:500 13px/1 var(--f-disp); color:var(--ink-2);
  border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; background:var(--raise);
  transition:border-color .25s, color .25s;
}
.support-chips a:hover{ color:var(--ink); border-color:var(--ink); }

.qa-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.qa-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:24px; text-decoration:none; color:var(--ink);
  transition:box-shadow .3s, transform .3s var(--ease-out);
}
.qa-card:hover{ box-shadow:var(--shadow-pop); transform:translateY(-3px); }
.qa-card .w-ico{ margin-bottom:2px; }
.qa-card b{ font:500 16px/1.3 var(--f-disp); }
.qa-card span{ font-size:13.5px; color:var(--ink-2); }
.qa-card .cta-arrow{ display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; margin-top:auto; align-self:flex-end; color:var(--acc); transition:transform .3s var(--ease); }
.qa-card:hover .cta-arrow{ transform:translateX(5px); }

.topic-card{
  display:grid; gap:8px; align-content:start; text-decoration:none; color:var(--ink);
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:20px 22px; transition:box-shadow .3s, border-color .3s;
}
.topic-card:hover{ border-color:var(--ink); }
.topic-card .n-meta{ display:flex; align-items:center; gap:12px; }
.topic-card b{ font:500 15.5px/1.35 var(--f-disp); }
.topic-card p{ margin:0; font-size:13.5px; color:var(--ink-2); }
.topic-card .t-min{ margin-left:auto; font:400 12px/1 var(--f-body); color:var(--ink-3); }

.sym-card{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; align-items:center; text-decoration:none; color:var(--ink);
  border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:22px; background:var(--raise);
  transition:border-color .25s;
}
.sym-card:hover{ border-color:var(--ink); }
.sym-card b{ font:500 15.5px/1.3 var(--f-disp); }
.sym-card > span:not(.cta-arrow){ font-size:13.5px; color:var(--ink-2); }
/* arrow rides the row's right edge, vertically centered — never wraps under
   the copy */
.sym-card .cta-arrow{ color:var(--acc); grid-column:2; grid-row:1 / span 2; align-self:center; }

/* horizontal card tracks (support topics + symptom rows): three-up rail with
   snap scrolling, dots-free — arrows in the section header page it on desktop */
.crs-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; padding:6px 2px 18px;
}
.crs-track::-webkit-scrollbar{ display:none; }
.crs-track > *{ flex:0 0 calc((100% - 48px) / 3); scroll-snap-align:start; }
@media (max-width:1100px){ .crs-track > *{ flex-basis:calc((100% - 24px) / 2); } }
@media (max-width:640px){ .crs-track > *{ flex-basis:86%; } }

.dl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.dl-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  overflow:hidden; transition:box-shadow .3s, transform .3s var(--ease-out);
}
.dl-card:hover{ box-shadow:var(--shadow-pop); transform:translateY(-3px); }
.dl-card .dl-img{ aspect-ratio:1/1; overflow:hidden; margin:0; border-bottom:1px solid var(--line); background:#fff; }
.dl-card .dl-img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.dl-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; align-items:flex-start; flex:1; }
.dl-card b{ font:500 14.5px/1.3 var(--f-disp); }
.dl-card span{ font-size:12.5px; color:var(--ink-3); }
.dl-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:auto;
  padding:10px 16px; border-radius:999px; background:var(--ink); color:#fff;
  font:500 12.5px/1 var(--f-disp); letter-spacing:.04em;
  transition:background .25s;
}
.dl-btn svg{ width:15px; height:15px; }
.dl-card:hover .dl-btn{ background:#242424; }

.gs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gs-card{
  display:grid; gap:10px; text-decoration:none; color:var(--ink);
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:16px; transition:box-shadow .3s, transform .3s var(--ease-out);
}
.gs-card:hover{ box-shadow:var(--shadow-pop); transform:translateY(-3px); }
.gs-card figure{ aspect-ratio:1/1; border-radius:10px; overflow:hidden; margin:0; background:#fff; }
.gs-card figure img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.gs-card b{ font:500 14.5px/1.3 var(--f-disp); padding:0 4px; }
.gs-card span{ font-size:12.5px; color:var(--ink-2); padding:0 4px 4px; }

.cb-list{ display:grid; gap:10px; }
.cb-list .cb-row{ display:flex; align-items:center; gap:12px; font-size:14.5px; }
.cb-list .cb-row .w-ico{ width:40px; height:40px; border-radius:10px; margin:0; }
.cb-list .cb-row b{ font:500 14px/1.3 var(--f-disp); display:block; }
.cb-list .cb-row i{ font:400 12.5px/1.4 var(--f-body); font-style:normal; color:var(--ink-3); }

/* ============================================================
   COMMUNITY: faq / blog / reviews / videos
   ============================================================ */
.amp{ font-family:inherit !important; }

.h-carousel{ position:relative; }
.h-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc(50% - 12px); gap:24px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:4px;
}
.h-track::-webkit-scrollbar{ display:none; }
.h-track > *{ scroll-snap-align:start; }
.h-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:22px; }
.h-btn{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--raise); border:1px solid var(--line-2); color:var(--ink); cursor:pointer;
  transition:border-color .25s;
}
.h-btn:hover{ border-color:var(--ink); }
.h-btn[disabled]{ opacity:.35; cursor:default; pointer-events:none; }
.h-page{ font:500 13px/1 var(--f-disp); letter-spacing:.08em; color:var(--ink-2); min-width:52px; text-align:center; }
.h-track--thirds{ grid-auto-columns:calc((100% - 48px)/3); }
@media (max-width:1100px){ .h-track--thirds{ grid-auto-columns:calc(50% - 12px); } }

.list-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.search-box{
  display:flex; align-items:center; gap:10px; flex:1 1 260px; max-width:380px;
  background:var(--raise); border:1px solid var(--line-2); border-radius:999px;
  padding:11px 18px; color:var(--ink-3);
}
.search-box:focus-within{ border-color:var(--ink); }
.search-box svg{ flex:0 0 auto; width:18px; height:18px; }
.search-box input{ flex:1; border:none; outline:none; background:transparent; color:var(--ink); font:400 15px/1.4 var(--f-body); min-width:0; }
.search-box input::placeholder{ color:var(--ink-3); }
.search-clear{ display:none; color:var(--ink-3); line-height:0; }
.search-clear:hover{ color:var(--ink); }
.search-box.has-text .search-clear{ display:block; }
.list-count{ margin-left:auto; font:400 13px/1 var(--f-body); color:var(--ink-3); }
.list-count b{ font:500 13px/1 var(--f-disp); color:var(--ink); }

.faq-layout{ display:grid; grid-template-columns:280px 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.faq-side{ position:sticky; top:calc(var(--ann-h) + var(--head-h) + 24px); display:grid; gap:22px; }
.faq-cats{ display:grid; gap:6px; }
.faq-cat-btn{
  display:grid; gap:3px; text-align:left; cursor:pointer;
  padding:12px 18px; border-radius:999px;
  background:transparent; border:1px solid transparent; color:var(--ink-2);
  transition:background .25s, border-color .25s, color .25s;
}
.faq-cat-btn b{ font:500 14px/1.25 var(--f-disp); color:inherit; }
.faq-cat-btn i{ font:400 12px/1 var(--f-body); font-style:normal; }
.faq-cat-btn:hover{ color:var(--ink); background:var(--chip); }
.faq-cat-btn.is-on{ color:var(--ink); background:var(--raise); border-color:var(--line-2); box-shadow:var(--shadow-card); }
.faq-cat-btn.is-on b{ color:var(--ink); }
.faq-group{ margin-bottom:36px; }
.faq-group:last-child{ margin-bottom:0; }
.faq-group > h3{ display:flex; align-items:baseline; gap:10px; font:600 18px/1.3 var(--f-disp); letter-spacing:-.01em; margin-bottom:14px; }
.faq-group > h3 span{ font:500 12.5px/1 var(--f-disp); color:var(--acc); letter-spacing:.08em; }
.faq-hide{ display:none !important; }
.faq-empty{ text-align:center; padding:70px 20px; color:var(--ink-2); font-size:15px; border:1px dashed var(--line-2); border-radius:var(--r-lg); }

/* blog listing */
.feat-article{
  display:grid; grid-template-columns:1.02fr .98fr; gap:0; align-items:stretch;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  overflow:hidden; text-decoration:none; color:var(--ink);
  transition:box-shadow .3s;
}
.feat-article:hover{ box-shadow:var(--shadow-pop); }
.feat-body{ padding:clamp(26px,3.4vw,48px); display:grid; gap:16px; align-content:center; justify-items:start; }
.feat-body h2{ font:600 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--f-disp); letter-spacing:-.015em; }
.feat-body p{ color:var(--ink-2); font-size:15px; line-height:1.65; }
.feat-media{ position:relative; aspect-ratio:16/9; min-height:220px; overflow:hidden; }
.feat-media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.post-meta{ flex-wrap:wrap; row-gap:4px; display:flex; align-items:center; gap:10px; font:400 13px/1 var(--f-body); color:var(--ink-3); }
.post-dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); opacity:.6; }
.post-tag{
  position:absolute; top:14px; left:14px;
  background:var(--ink); color:#fff;
  font:500 11.5px/1 var(--f-disp); letter-spacing:.08em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px;
}
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-card{
  display:flex; flex-direction:column;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  overflow:hidden; text-decoration:none; color:var(--ink);
  transition:box-shadow .3s, transform .3s var(--ease-out);
}
.post-card:hover{ box-shadow:var(--shadow-pop); transform:translateY(-3px); }
.post-media{ position:relative; aspect-ratio:16/9; overflow:hidden; }
.post-media img{ width:100%; height:100%; object-fit:cover; }
.post-card .post-body{ padding:18px 20px 20px; display:grid; gap:10px; flex:1; align-content:start; }
.post-card .post-body h3{ font:500 16.5px/1.35 var(--f-disp); letter-spacing:-.01em; }
.post-card .post-body h3 a{ color:inherit; text-decoration:none; transition:color .25s; }
.post-card .post-body h3 a:hover{ color:var(--acc); }
.post-excerpt{ font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.post-foot{ margin-top:auto; display:flex; align-items:center; gap:8px; font:500 13px/1 var(--f-disp); color:var(--acc); }
.post-foot svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.post-card:hover .post-foot svg{ transform:translateX(5px); }

/* reviews page */
.rev-masonry{ columns:3; column-gap:24px; }
.rev-card{
  break-inside:avoid; margin-bottom:24px;
  display:grid; gap:12px; align-content:start;
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-card); padding:22px;
}
.rev-head{ display:flex; align-items:center; gap:12px; }
.rev-ava{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--acc-soft); color:var(--acc);
  font:600 15px/1 var(--f-disp); text-transform:uppercase;
}
.rev-head b{ display:block; font:500 14px/1.2 var(--f-disp); }
.rev-head time{ font:400 12px/1 var(--f-body); color:var(--ink-3); }
.rev-stars{ display:flex; align-items:center; gap:8px; }
.rev-stars .stars{ font-size:13.5px; }
.rev-prod{
  justify-self:start; font:500 11px/1 var(--f-disp); letter-spacing:.08em; text-transform:uppercase;
  color:var(--acc); background:var(--acc-soft); padding:6px 10px; border-radius:999px;
}
.rev-verified{ display:inline-flex; align-items:center; gap:5px; font:400 12px/1 var(--f-body); color:var(--ink-3); }
.rev-verified svg{ color:var(--acc); }
.rev-text{ font-size:14px; line-height:1.65; color:var(--ink); }
.rev-text.len-long{ display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
.rev-text.len-long.is-open{ -webkit-line-clamp:unset; }
.rev-photos{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.rev-photos img{ width:auto; max-width:100%; height:clamp(120px,12vw,150px); object-fit:cover; justify-self:center; border-radius:10px; border:1px solid var(--line); background:#fff; }
.rev-videos{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:8px; }
.rev-video{ width:100%; max-height:360px; display:block; border-radius:10px; border:1px solid var(--line); background:#000; }

/* videos */
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.video-card{
  position:relative; border-radius:var(--r-lg); overflow:visible;
  border:1px solid var(--line); background:var(--raise); box-shadow:var(--shadow-card);
  cursor:pointer; text-align:left; padding:0; color:var(--ink); display:grid;
  transition:box-shadow .3s;
}
.video-card:hover{ box-shadow:var(--shadow-pop); }
.video-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; }
.video-play{ position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(180deg, rgba(4,8,12,.05), rgba(4,8,12,.5)); }
.video-play span{
  width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.8);
  color:#fff; backdrop-filter:blur(6px); transition:transform .3s var(--ease), background .3s;
}
.video-play svg{ display:block; transform:translateX(-1.5px); }
.video-thumb:hover .video-play span{ transform:scale(1.1); background:var(--ink); border-color:var(--ink); }
.video-body{ padding:16px 20px 20px; display:grid; gap:8px; align-content:start; }
.video-body h3{ font:500 15.5px/1.35 var(--f-disp); }
.video-body p{ font-size:13px; color:var(--ink-2); line-height:1.55; }
.video-meta{ display:flex; align-items:center; gap:8px; font:400 12px/1 var(--f-body); color:var(--ink-3); }
.yt-modal{ position:fixed; inset:0; z-index:90; display:none; background:rgba(5,8,10,.86); backdrop-filter:blur(8px); padding:clamp(16px,4vw,60px); }
.yt-modal.is-open{ display:grid; place-items:center; }
.yt-modal-box{ width:min(1080px, 100%); display:grid; gap:14px; }
.yt-modal-frame{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; }
.yt-modal-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-modal-close{
  justify-self:end; display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.3); color:#fff;
  font:500 13px/1 var(--f-disp); padding:10px 16px; border-radius:999px; cursor:pointer;
}
.yt-modal-close:hover{ background:rgba(255,255,255,.2); }
.yt-modal-title{ color:#fff; font:500 15px/1.4 var(--f-disp); }
.video-grid .video-card[hidden]{ display:none; }

@media (max-width:1100px){
  .post-grid, .video-grid{ grid-template-columns:repeat(2,1fr); }
  .qa-grid, .dl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } /* !important beats inline column counts in body content */
  .gs-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rev-masonry{ columns:2; }
  .faq-layout{ grid-template-columns:1fr; }
  .faq-side{ position:static; }
  .faq-cats{ grid-template-columns:repeat(2,1fr); display:grid; }
}
@media (max-width:640px){
  .post-grid, .video-grid{ grid-template-columns:1fr; }
  .qa-grid, .dl-grid, .gs-grid{ grid-template-columns:1fr !important; }
  .rev-masonry{ columns:1; }
  .h-track{ grid-auto-columns:86%; }
  .feat-article{ grid-template-columns:1fr; }
  .feat-media{ min-height:220px; order:-1; }
}

   POST TEMPLATE REFINEMENTS
   ============================================================ */
@media (max-width:640px){
  .post-page .crumbs{ gap:8px; }
  .post-page .crumbs > :not(:nth-child(3)):not(:nth-child(4)):not(:last-child){ display:none; }
  .post-page .crumbs > :last-child{ max-width:24ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .post-page .post-head .n-meta{ flex-wrap:wrap; gap:8px; }
  .post-page .post-head .n-meta .n-chip{ max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .post-page .post-head .n-meta time,
  .post-page .post-head .n-meta .rev-date{ white-space:nowrap; margin-left:0; }
}
.news-sec .n-card .n-body p{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  line-clamp:3; overflow:hidden;
}
@media (max-width:640px){
  .news-sec .n-card .n-body p{ -webkit-line-clamp:2; line-clamp:2; }
}
.post-page [id]{ scroll-margin-top:calc(var(--ann-h) + var(--head-h) + 16px); }
.post-page figure.wp-block-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }

/* ============================================================
   v3.1 final overrides (win over the content-pages layer above)
   ============================================================ */
/* reference blog card keeps image + date + title + read-more */
.news-sec .n-card .n-body > p{ display:none; }

/* ============================================================
   solution scenes: one coordinated column rhythm — section titles
   and content share the same left edge; module blocks (pain cards,
   setup steps, FAQ) read as one full-row band with evenly scaled
   cards instead of squeezing inside the text measure
   ============================================================ */
.solution-page .wrap.sol-narrow{ max-width:1440px; margin-inline:auto; }
/* intro, gear note and standalone text blocks span the module width so
   text, cards and media share one full-row rhythm on every viewport;
   image-paired text columns keep their own structural half. max-width:none
   outranks the shared 80ch prose measure these blocks also carry */
.solution-page .sol-narrow .post-body,
.solution-page #gear .post-body,
.solution-page .sol-block--solo .sol-block-text{ max-width:none; }
/* curated gear lists: tracks fill by item count instead of stranding the
   empty columns of a fixed 4-track grid. Track max is indefinite (1fr) so
   the auto-fit count keys off the 260px floor — three curated picks always
   share one row (a definite 437px cap computed to 2 tracks on the 1440
   stage and wrapped the third card). Cards themselves stay capped and
   centered, so 1-2 pick scenes render one/two card-widths, centered. */
.solution-page #gear .shop-grid{ grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); }
.solution-page #gear .shop-grid .p-card{ width:100%; max-width:437px; margin-inline:auto; }
.solution-page .sol-qa{ margin-top:36px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.solution-page .qa-card{ padding:26px 26px 30px; }
.solution-page .qa-card b{ font:600 17px/1.35 var(--f-disp); }
.solution-page .qa-card span{ font-size:14.5px; line-height:1.6; }
.solution-page .sol-steps{ gap:20px; }
.solution-page .sol-steps li{ padding:24px 28px 24px 92px; }
.solution-page .sol-steps li::before{ left:26px; top:26px; width:40px; height:40px; font-size:1rem; }
.solution-page .sol-steps li b{ font-size:1.05rem; }
.solution-page .acc summary{ padding:22px 2px; font-size:17px; }
.sol-block-text h2{ font:700 clamp(24px,2.4vw,30px)/1.3 var(--f-disp); letter-spacing:-.01em; margin:0 0 .6em; }
.sol-block-text h2:first-child{ margin-top:0; }

/* ============================================================
   R5c polish: notice marquee / claim-step tags / scene copy
   centering / footer logo
   ============================================================ */
@keyframes bf-marquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .ann-track{ animation:none !important; } }
/* warranty/shipping claim steps: the "Step N" marker renders as a tag
   chip and each step becomes a card, off the running text */
.timeline{ display:grid; gap:14px; }
.tl-item{
  background:var(--card); border-radius:var(--r-lg);
  padding:20px 22px 22px;
  display:grid; gap:8px;
}
.tl-year{
  justify-self:start;
  display:inline-flex; align-items:center;
  background:var(--acc-soft); border:1px solid var(--acc-glow);
  color:var(--acc-deep);
  border-radius:999px; padding:6px 13px;
  font:600 11px/1 var(--f-disp); letter-spacing:.12em; text-transform:uppercase;
}
.tl-item h3{ font:600 16.5px/1.3 var(--f-disp); color:var(--ink); margin:0; }
.tl-item p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); }
.tl-item p:empty{ display:none; }
/* a page that ends on its call-to-action box keeps air before the footer */
.entry-content > .key-box:last-child{ margin-bottom:clamp(56px,12vh,96px); }
/* scene tiles: copy block centered both axes, veil evened out so the
   centered text stays readable on every tile */
.sc-copy{ justify-content:center; padding:clamp(22px,3vw,34px) clamp(18px,2.6vw,30px); }
.sc-tile::after{
  background:linear-gradient(180deg, rgb(0 0 0 / .50), rgb(0 0 0 / .22) 45%, rgb(0 0 0 / .38) 100%);
}
.foot .brand-logo{ height:30px; width:auto; }

/* mobile hero: tighter copy stack and one-line CTA pair so the art + copy
   land fully inside the first screen */
@media (max-width:760px){
  .hero-slide{ min-height:clamp(460px,78vh,620px); }
  .hero-slide .hero-copy{ padding-block:40px 96px !important; }
  .hero .eyebrow{ font-size:10.5px; letter-spacing:.14em; margin-bottom:10px; }
  .hero-title{ font-size:clamp(30px,8.8vw,36px); }
  .hero-sub{
    font-size:13.5px; line-height:1.55; margin-top:10px; margin-bottom:16px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .hero-cta{ flex-wrap:nowrap; gap:10px; }
  .hero-cta a{
    flex:1 1 0; justify-content:center; white-space:nowrap;
    border-radius:999px !important; padding:13px 8px;
    font-size:13.5px; min-height:44px;
  }
  .hero-cta .cta-arrow{ width:14px; height:14px; }
  .hero-nav{ padding-bottom:18px; }
}

/* ============================================================
   R7 additions: solutions-hub quiet Hi-Res entry
   ============================================================ */
/* one low-key line under the scene-card grid — the only nav-level entry to
   the LDAC receiver filter; small, muted, underline-on-hover only */
.sol-hires{ margin:20px 0 0; font:400 13.5px/1.5 var(--f-body); color:var(--ink-3); }
.sol-hires a{
  color:var(--ink-2); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--line2); transition:color .25s var(--ease), border-color .25s var(--ease);
}
.sol-hires a:hover{ color:var(--acc); border-color:var(--acc); }