/* ==========================================================================
   TurboLazer · Game Tape design system
   Base layer ported 1:1 from concepts/02-game-tape (approved design).
   Extension layer below it covers: collection, product, cart, contact,
   search, account, 404. Tokens are brand-kit/tokens/turbolazer-tokens.css.
   Shopify transfer: this file becomes assets/game-tape.css in the theme;
   section-specific blocks are marked with [section:*] comments.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --magenta:#EC008C;        /* brand ink: fills, buttons, display type 24px+ */
  --magenta-text:#FF22CE;   /* small magenta text on dark only */
  --cyan:#09E1FF;
  --ice:#8FEAF6;
  --carbon:#151515;
  --void:#030303;
  --white:#FFFFFF;
  --grey:#D9D9D9;
  --blue-deep:#263E86;
  --blue-sky:#6681C9;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --track-label:.12em;
  /* VIS-10: the display face the whole brand rests on had no weight token, so
     nothing stopped it drifting to 800 in the Shopify port. The brand kit
     defines regular 400 and bold 700 only. */
  --tl-weight-display:900;
  --slant:15deg;
  --ease:cubic-bezier(.2,.7,.2,1);
  --maxw:1200px;
  --gut:24px;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .hero-video{display:none}}
body{
  font-family:var(--font);font-size:16px;line-height:1.65;
  background:var(--carbon);color:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:2px;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--magenta);
  color:#000;font-weight:700;padding:10px 18px;text-transform:uppercase;font-size:13px;
}
.skip:focus{left:12px;top:12px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ============ TYPE ============ */
.eyebrow{
  font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--magenta-text);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--magenta);transform:skewX(calc(-1 * var(--slant)))}
.display{
  font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.95;
}
h1.display{font-size:clamp(44px,7.5vw,92px)}
h2.display{font-size:clamp(30px,4.5vw,54px);letter-spacing:-.01em;line-height:1}
.sub{color:var(--grey);max-width:56ch}
.mag{color:var(--magenta)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;line-height:1;
  padding:16px 26px;transform:skewX(calc(-1 * var(--slant)));
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
}
.btn>span{display:inline-block;transform:skewX(var(--slant))}
.btn-primary{background:var(--magenta);color:#000}
.btn-primary:hover{transform:skewX(calc(-1 * var(--slant))) translate(-2px,-2px);box-shadow:4px 4px 0 var(--cyan)}
.btn-primary:active{transform:skewX(calc(-1 * var(--slant)));box-shadow:none}
.btn-ghost{background:transparent;color:var(--cyan);box-shadow:inset 0 0 0 1.5px var(--cyan)}
.btn-ghost:hover{background:rgba(9,225,255,.12)}
.btn-dark{background:#000;color:var(--white)}
.btn-dark:hover{transform:skewX(calc(-1 * var(--slant))) translate(-2px,-2px);box-shadow:4px 4px 0 rgba(0,0,0,.35)}
.btn-sm{padding:12px 18px;font-size:12px}
.btn[aria-disabled="true"]{opacity:.4;box-shadow:none;cursor:not-allowed}
.btn[aria-disabled="true"]:hover{transform:skewX(calc(-1 * var(--slant)));box-shadow:none}
/* ghost on white panels */
.btn-ghost.on-white{color:var(--carbon);box-shadow:inset 0 0 0 1.5px var(--carbon)}
.btn-ghost.on-white:hover{background:rgba(21,21,21,.08)}

/* ============ SPEEDLINE DIVIDER ============ */
.speedline{
  height:8px;
  background:repeating-linear-gradient(75deg,var(--magenta) 0 5px,transparent 5px 10px);
  opacity:.85;
}
.speedline.cy{background:repeating-linear-gradient(75deg,var(--cyan) 0 5px,transparent 5px 10px)}

/* ============ LOWER THIRD ============ */
.lt{
  position:absolute;left:0;bottom:22px;display:flex;align-items:stretch;
  transform:skewX(calc(-1 * var(--slant)));margin-left:-6px;max-width:92%;
}
.lt>*{transform:none}
.lt .tag{
  background:var(--magenta);color:#000;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:8px 14px 8px 20px;
  display:flex;align-items:center;white-space:nowrap;
}
.lt .cap{
  background:rgba(3,3,3,.88);color:var(--white);font-size:13px;
  padding:8px 18px;display:flex;align-items:center;
}
.lt .cap>span,.lt .tag>span{display:inline-block;transform:skewX(var(--slant))}

/* ============ HEADER [section:header] ============ */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(21,21,21,.96);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(217,217,217,.14);
}
.head-row{
  display:flex;align-items:center;gap:28px;
  min-height:64px;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.logo-link img{height:24px;width:auto}
.nav-main{margin-left:auto}
.nav-main ul{display:flex;gap:26px;list-style:none}
.nav-main a{
  color:var(--white);text-decoration:none;font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:6px 0;
}
.nav-main a:hover,.nav-main a[aria-current="page"]{color:var(--cyan);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.head-utils{display:flex;align-items:center;gap:18px}
.util-btn,.util-link{
  background:none;border:0;cursor:pointer;color:var(--white);
  display:flex;align-items:center;gap:6px;text-decoration:none;
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-family:var(--font);padding:6px 2px;
}
.util-btn:hover,.util-link:hover{color:var(--cyan)}
.util-btn svg,.util-link svg{width:20px;height:20px;flex-shrink:0}
.acct{display:flex;gap:14px}
.cart-link{position:relative;padding-right:10px}
.cart-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;
  background:var(--magenta);color:#000;font-size:11px;font-weight:700;
  border-radius:999px;display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}
.burger{display:none}
.search-panel{
  display:none;border-top:1px solid rgba(217,217,217,.14);
  background:var(--void);
}
.search-panel.open{display:block}
.search-panel form{
  max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);
  display:flex;gap:12px;
}
.search-panel input{
  flex:1;background:var(--carbon);border:1.5px solid var(--grey);color:var(--white);
  font-family:var(--font);font-size:16px;padding:12px 16px;min-width:0;
}
.search-panel input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(9,225,255,.35)}
.search-panel input::placeholder{color:rgba(217,217,217,.75)}
.mobile-menu{display:none;background:var(--void);border-top:1px solid rgba(217,217,217,.14)}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;padding:8px var(--gut) 20px}
.mobile-menu a{
  display:block;color:var(--white);text-decoration:none;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:15px;padding:14px 0;
  border-bottom:1px solid rgba(217,217,217,.1);
}
.mobile-menu a:hover{color:var(--cyan)}
.mobile-menu .mm-acct a{font-weight:400;font-size:14px;text-transform:none;letter-spacing:0;color:var(--grey)}

/* ============ HERO [section:hero-game-tape] ============ */
.hero{position:relative;background:var(--void);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media{background:#030303 url(../video/hero-ice-poster.jpg) center/cover no-repeat}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:72% center}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    /* A11Y-02: the magenta run in the h1 sits at 39% to 51% of the plate, right
       where the old .92 stop at 38% fell away to .35 by 64%, and over the lit
       board seam it measured 1.94:1 against the 3:1 large-text minimum. Hold
       the dark out to 52% and land softer, so the wordmark zone past 69% keeps
       its brightness. */
    linear-gradient(90deg,#030303 0%,rgba(3,3,3,.92) 52%,rgba(3,3,3,.40) 72%,rgba(3,3,3,.10) 100%),
    linear-gradient(0deg,rgba(3,3,3,.75) 0%,rgba(3,3,3,0) 30%);
}
.hero-inner{
  position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;
  padding:110px var(--gut) 140px;min-height:min(86vh,780px);
  display:flex;flex-direction:column;justify-content:center;
}
.hero-inner .eyebrow{margin-bottom:22px}
.hero-inner h1{max-width:12ch;margin-bottom:24px}
.hero-inner .sub{font-size:17px;margin-bottom:36px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-left:6px}
.team-link{
  font-size:14px;color:var(--cyan);text-underline-offset:5px;
  text-decoration-thickness:1.5px;margin-left:8px;
}
.hero .lt{bottom:26px}

/* ============ SECTION SCAFFOLD ============ */
section{position:relative}
.sect{padding:96px 0}
.sect-head{margin-bottom:44px}
.sect-head .eyebrow{margin-bottom:14px}
.sect-head .sub{margin-top:14px}

/* ============ PROOF [section:proof-wall] ============ */
.proof{background:var(--carbon)}
.proof-grid{
  display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;
  gap:16px;
}
.pcell{position:relative;overflow:hidden;background:var(--void)}
.pcell img{width:100%;height:100%;object-fit:cover}
.pcell.big{grid-row:1 / span 2;min-height:520px}
.pcell.small{min-height:252px}
.pcell.small img{object-position:center 30%}

/* ============ LINEUP / ICE PANEL [section:featured-lineup] ============ */
.lineup{background:var(--white);color:var(--carbon)}
.lineup .eyebrow{color:var(--carbon)}
.lineup .sub{color:rgba(21,21,21,.78)}
.lineup-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;justify-content:space-between;
}
.lineup-links{display:flex;gap:22px;padding-bottom:6px}
.lineup-links a{
  color:var(--carbon);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.08em;text-decoration:none;border-bottom:2px solid var(--magenta);
  padding-bottom:4px;
}
.lineup-links a:hover{border-color:var(--carbon)}
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px;
}
.card{
  background:var(--white);border:1px solid var(--grey);
  display:flex;flex-direction:column;
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.card:hover,.card:focus-within{
  transform:translateY(-4px);border-color:var(--cyan);
  box-shadow:0 14px 32px rgba(21,21,21,.12);
}
.card-img{position:relative;border-bottom:1px solid var(--grey)}
/* portrait tile: sticks are tall. height:auto defeats the width/height
   attribute hint so the ratio scales with the column instead of pinning
   photo cards at a fixed 900px */
.card-img img{width:100%;height:auto;aspect-ratio:2/5;object-fit:cover}
.chip{
  position:absolute;top:12px;left:12px;z-index:1;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;padding:5px 10px;
  transform:skewX(calc(-1 * var(--slant)));
}
.chip>span{display:inline-block;transform:skewX(var(--slant))}
.chip.hockey{background:var(--carbon);color:var(--white)}
.chip.ringette{background:var(--magenta);color:#000}
/* grip/merch chips sit on carbon type tiles too: keep an edge so they never vanish */
.chip.grip{background:var(--carbon);color:var(--ice);box-shadow:inset 0 0 0 1.5px var(--ice)}
.chip.merch{background:var(--carbon);color:var(--white);box-shadow:inset 0 0 0 1.5px var(--grey)}
.chip.team{background:var(--cyan);color:#000}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-body h3{font-size:17px;font-weight:700;line-height:1.3}
.card-body h3 a{color:var(--carbon);text-decoration:none}
.card-body h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--magenta);text-decoration-thickness:2px}
.spec{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(21,21,21,.72);line-height:1.7;
}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;gap:10px}
.price{font-size:19px;font-weight:var(--tl-weight-display);display:flex;align-items:center;gap:8px}
.price::before{content:"";width:4px;height:18px;background:var(--magenta);transform:skewX(calc(-1 * var(--slant)))}

/* typographic tile: the honest stand-in for products whose only "photo" is a screenshot */
.tile-type{
  aspect-ratio:2/5;background:var(--carbon);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:24px;gap:8px;
}
.tile-type::before{
  content:"";position:absolute;inset:auto -20px -34px auto;width:150%;height:96px;
  background:repeating-linear-gradient(75deg,rgba(236,0,140,.55) 0 6px,transparent 6px 18px);
  transform:rotate(0deg);opacity:.7;
}
.tile-type .tt-label{
  font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;line-height:.95;
  letter-spacing:-.01em;font-size:clamp(24px,3.2vw,34px);color:var(--white);
}
.tile-type .tt-label em{font-style:italic;color:var(--magenta)}
.tile-type .tt-sub{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey);
}

/* grip / promo band [section:grip-band] */
aside.grip{
  margin-top:56px;background:var(--magenta);color:#000;position:relative;overflow:hidden;
  padding:44px 40px;display:flex;flex-wrap:wrap;align-items:center;gap:28px;justify-content:space-between;
}
aside.grip::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(75deg,rgba(0,0,0,.12) 0 5px,transparent 5px 22px);
  pointer-events:none;
}
.grip-copy{position:relative;max-width:60ch}
.grip-copy h3,.grip-copy h2{
  font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;
  font-size:clamp(24px,3.4vw,38px);line-height:1;letter-spacing:-.01em;margin-bottom:8px;
}
.grip-copy p{font-size:15px;font-weight:400}
aside.grip .btn{position:relative}

/* ============ TEAM ORDERS [section:team-orders] ============ */
.team{background:var(--carbon)}
.team-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
.team-photo{position:relative;overflow:hidden}
.team-photo img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:center 32%;transform:scale(1.32)}
.stat-row{display:flex;gap:18px;margin:30px 0 34px;flex-wrap:wrap}
.stat{
  border:1.5px solid rgba(217,217,217,.45);padding:18px 22px;flex:1;min-width:180px;
}
.stat .k{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--magenta-text);margin-bottom:6px;
}
.stat .v{font-size:24px;font-weight:var(--tl-weight-display);font-style:italic;line-height:1.1}
.stat .n{font-size:12px;color:var(--grey);margin-top:4px}
.contest{
  margin-top:64px;border:1.5px solid var(--cyan);padding:40px;
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;
  position:relative;
}
.contest::before{
  content:"";position:absolute;top:-1.5px;left:40px;width:120px;height:6px;
  background:repeating-linear-gradient(75deg,var(--cyan) 0 5px,transparent 5px 10px);
}
.trophy{
  width:88px;height:88px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(9,225,255,.1);transform:skewX(calc(-1 * var(--slant)));
}
.trophy svg{width:44px;height:44px;transform:skewX(var(--slant))}
.contest h3{
  font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;
  font-size:clamp(22px,3vw,32px);line-height:1;margin:10px 0 12px;
}
.contest p{color:var(--grey);max-width:64ch}
.contest .fine{font-size:12px;color:var(--grey);opacity:.75;margin-top:12px}

/* ============ STORY [section:brand-story] ============ */
.story{background:var(--carbon)}
.story-grid{display:grid;grid-template-columns:1fr .82fr;gap:64px;align-items:center}
.story-copy p{color:var(--grey);margin-bottom:18px;max-width:58ch}
.story-copy p strong{color:var(--white)}
.facts{
  list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px 28px;margin-top:30px;
}
.facts li{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  display:flex;align-items:center;gap:10px;
}
.facts li::before{content:"";width:14px;height:3px;background:var(--cyan);transform:skewX(calc(-1 * var(--slant)));flex-shrink:0}
.story-photo{position:relative;overflow:hidden}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.story-video{display:inline-block;margin-top:26px;font-size:14px;color:var(--cyan);text-underline-offset:5px;text-decoration-thickness:1.5px}

/* ============ FOOTER [section:footer] ============ */
.site-foot{background:var(--void);padding:72px 0 36px;border-top:1px solid rgba(217,217,217,.1)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:56px}
.foot-logo img{height:44px;width:auto;margin-bottom:18px}/* 122px wide: the brand kit lockup minimum is 120px (VIS-05) */
.foot-tag{font-size:14px;color:var(--grey);max-width:34ch}
.foot-h{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--magenta-text);margin-bottom:16px;
}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:10px}
.site-foot a{color:var(--white);text-decoration:none;font-size:14px}
.site-foot a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.foot-base{
  border-top:1px solid rgba(217,217,217,.12);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12px;color:var(--grey);
}

/* ==========================================================================
   EXTENSION LAYER · pages the concept never covered, same voice
   ========================================================================== */

/* ---- collection header [section:collection-banner] ---- */
.coll-hero{background:var(--carbon);padding:72px 0 56px;position:relative;overflow:hidden}
.coll-hero::after{
  content:"";position:absolute;right:-40px;top:0;bottom:0;width:34%;
  background:repeating-linear-gradient(75deg,rgba(236,0,140,.16) 0 6px,transparent 6px 22px);
  pointer-events:none;
}
.coll-hero .display{margin-top:14px}
.coll-hero .sub{margin-top:16px}
.crumbs{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--grey);display:flex;gap:10px;flex-wrap:wrap;list-style:none;
}
.crumbs a{color:var(--grey);text-decoration:none}
.crumbs a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:4px}
.crumbs .sep{color:var(--magenta-text)}
.crumbs.on-white,.crumbs.on-white a{color:rgba(21,21,21,.65)}
.crumbs.on-white a:hover{color:var(--carbon)}

/* ---- filter rail [section:collection-filters] ---- */
.filter-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:40px;
}
.filter-row .f-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:rgba(21,21,21,.6);margin-right:4px;
}
.fchip{
  font-family:var(--font);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--carbon);background:transparent;cursor:pointer;
  border:1.5px solid rgba(21,21,21,.35);padding:9px 16px;
  transform:skewX(calc(-1 * var(--slant)));
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.fchip>span{display:inline-block;transform:skewX(var(--slant))}
.fchip:hover{border-color:var(--carbon)}
.fchip[aria-pressed="true"]{background:var(--carbon);color:var(--white);border-color:var(--carbon)}
.coll-count{font-size:13px;color:rgba(21,21,21,.6);margin-left:auto}

/* ---- PDP [section:product-main] ---- */
.pdp{background:var(--carbon);padding:40px 0 96px}
.pdp .crumbs{margin-bottom:36px}
.pdp-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
.pdp-gallery{position:sticky;top:88px}
.pdp-main{
  background:var(--white);border:1px solid rgba(217,217,217,.25);position:relative;overflow:hidden;
}
.pdp-main img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pdp-main .tile-type{aspect-ratio:1/1}
.pdp-main .tile-type .tt-label{font-size:clamp(30px,4.4vw,52px)}
.pdp-thumbs{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.pdp-thumbs button{
  width:76px;height:76px;padding:0;border:1.5px solid rgba(217,217,217,.35);
  background:var(--white);cursor:pointer;overflow:hidden;
}
.pdp-thumbs button img{width:100%;height:100%;object-fit:cover}
.pdp-thumbs button[aria-pressed="true"]{border-color:var(--cyan);box-shadow:0 0 0 1.5px var(--cyan)}
.pdp-buy .chip{position:static;display:inline-block;margin-bottom:16px}
.pdp-buy h1{
  font-weight:var(--tl-weight-display);font-style:italic;text-transform:uppercase;
  font-size:clamp(32px,4.4vw,52px);line-height:.98;letter-spacing:-.01em;
  margin-bottom:16px;
}
.pdp-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:22px}
.pdp-price{font-size:28px;font-weight:var(--tl-weight-display);display:flex;align-items:center;gap:10px}
.pdp-price::before{content:"";width:5px;height:24px;background:var(--magenta);transform:skewX(calc(-1 * var(--slant)))}
.pdp-cur{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--grey)}
.pdp-desc p{color:var(--grey);margin-bottom:14px;max-width:56ch}
.pdp-desc p strong{color:var(--white)}
/* option groups */
.optgroup{margin-top:26px}
.optgroup .og-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--white);margin-bottom:10px;display:flex;gap:8px;align-items:baseline;
}
.optgroup .og-value{color:var(--magenta-text)}
.optlist{display:flex;flex-wrap:wrap;gap:10px}
.opt{
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--white);
  background:transparent;border:1.5px solid rgba(217,217,217,.5);cursor:pointer;
  padding:11px 16px;transform:skewX(calc(-1 * var(--slant)));
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease);
  text-align:left;
}
.opt>span{display:inline-block;transform:skewX(var(--slant))}
.opt .od{display:block;font-size:10px;font-weight:400;color:var(--grey);letter-spacing:.02em;margin-top:2px}
.opt:hover{border-color:var(--cyan)}
.opt[aria-pressed="true"]{background:var(--magenta);border-color:var(--magenta);color:#000}
.opt[aria-pressed="true"] .od{color:rgba(0,0,0,.82)}
/* flex helper */
.flexhelp{margin-top:14px;border:1px solid rgba(9,225,255,.4);max-width:480px}
.flexhelp summary{
  cursor:pointer;list-style:none;padding:12px 16px;font-size:13px;font-weight:700;
  color:var(--cyan);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:8px;align-items:center;
}
.flexhelp summary::-webkit-details-marker{display:none}
.flexhelp summary::before{content:"+";font-weight:var(--tl-weight-display)}
.flexhelp[open] summary::before{content:"·"}
.flexhelp .fh-body{padding:0 16px 16px;font-size:14px;color:var(--grey)}
.flexhelp table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.flexhelp th,.flexhelp td{text-align:left;padding:7px 8px;border-top:1px solid rgba(217,217,217,.18)}
.flexhelp th{color:var(--white);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
/* buy row */
.buy-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:stretch}
.qty{display:flex;border:1.5px solid rgba(217,217,217,.5);transform:skewX(calc(-1 * var(--slant)))}
.qty button{
  width:44px;background:none;border:0;color:var(--white);font-size:18px;font-weight:700;
  cursor:pointer;font-family:var(--font);
}
.qty button:hover{color:var(--cyan)}
.qty input{
  width:52px;background:none;border:0;border-inline:1.5px solid rgba(217,217,217,.5);
  color:var(--white);font-family:var(--font);font-size:15px;font-weight:700;text-align:center;
}
.qty>*{transform:skewX(var(--slant))}
/* A11Y-04: this was the only focusable control on the site without the house
   2px cyan ring. outline:none plus an 8% tint measured 1.16:1 between states,
   against the 3:1 SC 1.4.11 asks for. */
.qty input:focus{outline:none;background:rgba(9,225,255,.08);box-shadow:inset 0 0 0 2px var(--cyan)}
.qty input:focus-visible{box-shadow:inset 0 0 0 2px var(--cyan)}
.pdp-facts{margin-top:36px}
.pdp-facts .facts{grid-template-columns:1fr 1fr;max-width:480px}
.pdp-note{font-size:13px;color:var(--grey);margin-top:18px;max-width:52ch}
.pdp-note a{color:var(--cyan)}
/* related [section:related-products] */
.related{background:var(--white);color:var(--carbon)}
.related .eyebrow{color:var(--carbon)}

/* ---- cart [section:cart-main] ---- */
.cart-sect{background:var(--white);color:var(--carbon);min-height:52vh}
.cart-sect .eyebrow{color:var(--carbon)}
.cline{
  display:grid;grid-template-columns:96px 1fr auto auto auto;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--grey);
}
.cline-img{width:96px;height:96px;border:1px solid var(--grey);overflow:hidden;background:var(--carbon)}
.cline-img img{width:100%;height:100%;object-fit:cover}
.cline-img .mini-type{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-weight:var(--tl-weight-display);font-style:italic;font-size:11px;text-transform:uppercase;
  text-align:center;padding:6px;line-height:1.2;
}
.cline h3{font-size:16px;font-weight:700}
.cline h3 a{color:var(--carbon);text-decoration:none}
.cline h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--magenta)}
.cline .copts{font-size:12px;color:rgba(21,21,21,.65);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.cline .qty{border-color:rgba(21,21,21,.4)}
.cline .qty button,.cline .qty input{color:var(--carbon);border-color:rgba(21,21,21,.4)}
.cline .qty button:hover{color:var(--magenta)}
.cline-price{font-weight:var(--tl-weight-display);font-size:17px;min-width:80px;text-align:right}
.cline-remove{
  background:none;border:0;cursor:pointer;font-family:var(--font);font-size:12px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(21,21,21,.72);/* A11Y-05: .55 composited to 4.04:1 on white, under the 4.5:1 minimum */
  text-decoration:underline;text-underline-offset:3px;
}
.cline-remove:hover{color:var(--magenta)}
.cart-foot{
  margin-top:36px;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start;
}
.cart-total .t-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(21,21,21,.6)}
.cart-total .t-value{font-size:34px;font-weight:var(--tl-weight-display);font-style:italic}
.cart-total .t-note{font-size:12px;color:rgba(21,21,21,.6);max-width:34ch;margin-top:6px}
.cart-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.cart-actions .note{font-size:12px;color:rgba(21,21,21,.6);max-width:36ch;text-align:right}
.cart-empty{padding:48px 0 12px}
.cart-empty h2{margin-bottom:12px}
.cart-empty p{color:rgba(21,21,21,.7);margin-bottom:28px}

/* ---- contact / team page [section:contact-main] ---- */
.contact-hero{background:var(--void);position:relative;overflow:hidden;padding:88px 0 72px}
.contact-hero .display{margin-top:14px;max-width:14ch}
.contact-hero .sub{margin-top:18px}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.method{border:1.5px solid rgba(217,217,217,.35);padding:26px 24px}
.method .m-k{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-label);
  color:var(--magenta-text);margin-bottom:10px;
}
.method .m-v{font-size:19px;font-weight:var(--tl-weight-display);font-style:italic;line-height:1.2}
.method .m-v a{color:var(--white);text-decoration:none}
.method .m-v a:hover{color:var(--cyan);text-decoration:underline;text-underline-offset:5px}
.method .m-n{font-size:13px;color:var(--grey);margin-top:8px}
.steps{list-style:none;counter-reset:step;margin-top:36px;display:grid;gap:18px;max-width:60ch}
.steps li{counter-increment:step;display:flex;gap:18px;align-items:baseline}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-weight:var(--tl-weight-display);font-style:italic;font-size:26px;color:var(--magenta);flex-shrink:0;
}
.steps li p{color:var(--grey)}
.steps li p strong{color:var(--white)}

/* ---- utility pages (404 / account / search) ---- */
.util-hero{background:var(--carbon);padding:120px 0;position:relative;overflow:hidden}
.util-hero::after{
  content:"";position:absolute;left:-60px;bottom:-30px;width:70%;height:120px;
  background:repeating-linear-gradient(75deg,rgba(9,225,255,.25) 0 6px,transparent 6px 22px);
  /* VIS-08: was a flat vertical cut through the middle of the diagonals, which
     read as a rendering artefact on the short 404 hero. Every other stripe
     device on the site runs out cleanly. */
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);
  pointer-events:none;
}
.util-hero .display{margin-top:14px}
.util-hero .sub{margin-top:18px;margin-bottom:36px}
.search-hero{padding:72px 0 56px}
.search-form-big{display:flex;gap:12px;max-width:640px;margin-top:32px}
.search-form-big input{
  flex:1;background:var(--void);border:1.5px solid var(--grey);color:var(--white);
  font-family:var(--font);font-size:17px;padding:14px 18px;min-width:0;
}
.search-form-big input:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 2px rgba(9,225,255,.35)}
.results-count{font-size:13px;color:rgba(21,21,21,.65)}

/* ============ HERO MARK ============ */
/* Real vector logo over the ice plate. Never generated: the sweep is a
   gradient masked to the logo outline, so the letterforms stay exact. */
.hero-mark{
  position:absolute;z-index:1;right:calc(var(--gut) + 10px);top:50%;
  transform:translateY(-50%);width:min(36vw,430px);pointer-events:none;
}
/* The plate is bright where the boards cross, so the mark carries its own
   scrim. Sized past the logo box and heavily feathered, so it reads as a
   vignette rather than a panel. */
.hero-mark::before{
  content:"";position:absolute;left:-22%;right:-22%;top:-140%;bottom:-140%;
  background:radial-gradient(ellipse at center,
    rgba(3,3,3,.92) 0%,rgba(3,3,3,.78) 38%,rgba(3,3,3,.42) 62%,rgba(3,3,3,0) 82%);
  pointer-events:none;
}
.hero-mark__logo{position:relative;display:block;width:100%;height:auto;
  filter:drop-shadow(0 8px 34px rgba(3,3,3,.92))}
.hero-mark__sweep{
  position:absolute;inset:0;
  -webkit-mask:url(../img/logo/turbolazer-logo-horizontal-white.svg) center/contain no-repeat;
  mask:url(../img/logo/turbolazer-logo-horizontal-white.svg) center/contain no-repeat;
  background:linear-gradient(115deg,
    rgba(236,0,140,0) 40%,
    rgba(236,0,140,.95) 47%,
    rgba(143,234,246,.9) 51%,
    rgba(9,225,255,.85) 54%,
    rgba(9,225,255,0) 61%);
  background-size:320% 100%;background-position:130% 0;
  mix-blend-mode:screen;
}

/* ============ REVEAL MOTION ============ */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js .reveal.in{opacity:1;transform:none}
  .js .hero-inner>*{opacity:0;transform:translateY(24px);animation:rise .55s var(--ease) forwards}
  .js .hero-inner>*:nth-child(2){animation-delay:.08s}
  .js .hero-inner>*:nth-child(3){animation-delay:.16s}
  .js .hero-inner>*:nth-child(4){animation-delay:.24s}
  .js .hero-mark{opacity:0;animation:markin .8s var(--ease) .35s forwards}
  .js .hero-mark__sweep{animation:tlsweep 4s var(--ease) 1.2s infinite}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes markin{to{opacity:1}}
  @keyframes tlsweep{0%{background-position:130% 0}60%,100%{background-position:-70% 0}}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .nav-main ul{gap:18px}
  .head-row{gap:18px}
  .acct{display:none}
  .pdp-grid{gap:36px}
}
/* VIS-11: the mark is sized min(36vw,430px) and the copy column is not, so
   between 861 and about 1000 they collide. Hide it a little earlier rather than
   let it crowd the headline; it was already a mobile-hidden element by design. */
@media (max-width:1000px){
  .hero-mark{display:none}
}

@media (max-width:860px){
  .hero-mark{display:none}
  .nav-main{display:none}
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    background:none;border:0;cursor:pointer;width:34px;height:34px;padding:5px;
  }
  .burger span{display:block;height:2.5px;background:var(--white);transition:transform .18s var(--ease),opacity .18s var(--ease)}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .head-row{gap:14px}
  .logo-link{margin-right:auto}
  .logo-link img{height:20px}
  .util-btn .lbl{display:none}
  .team-grid,.story-grid{grid-template-columns:1fr;gap:36px}
  .contest{grid-template-columns:1fr;gap:20px;padding:32px 24px}
  .proof-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .pcell.big{grid-row:auto;min-height:0}
  .pcell.big img{aspect-ratio:16/10}
  .pcell.small{min-height:0}
  .pcell.small img{aspect-ratio:16/10}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .pdp-grid{grid-template-columns:1fr}
  .pdp-gallery{position:static}
  .method-grid{grid-template-columns:1fr}
  .cline{grid-template-columns:72px 1fr;grid-auto-rows:auto;gap:12px 16px}
  .cline-img{width:72px;height:72px}
  .cline .qty{grid-column:2}
  .cline-price{grid-column:2;text-align:left}
  .cline-remove{grid-column:2;justify-self:start;padding:0}
  .cart-actions{align-items:flex-start}
  .cart-actions .note{text-align:left}
}
@media (max-width:560px){
  :root{--gut:16px}
  .sect{padding:64px 0}
  .hero-inner{padding:72px var(--gut) 120px;min-height:0}
  .hero-media img{object-position:70% center}
  .hero-inner .sub{font-size:15px}
  .cta-row{flex-direction:column;align-items:stretch;margin-left:0;max-width:320px}
  .cta-row .btn{text-align:center;white-space:nowrap}
  .team-link{margin-left:0;margin-top:6px;align-self:flex-start}
  .prod-grid{
    display:flex;overflow-x:auto;gap:14px;margin-inline:calc(-1 * var(--gut));
    padding:4px var(--gut) 18px;scroll-snap-type:x mandatory;
    scrollbar-width:thin;
  }
  .card{flex:0 0 78vw;scroll-snap-align:start}
  /* collection pages keep a 2-up grid instead of the rail: browsing, not sampling */
  .coll-grid .prod-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-inline:0;padding:0;
    overflow:visible;
  }
  .coll-grid .card{flex:none}
  .coll-grid .card .btn{padding:10px 12px;font-size:11px}
  aside.grip{padding:32px 22px}
  .lt .cap{font-size:12px;padding:7px 12px}
  .lt .tag{font-size:10px;padding:7px 10px 7px 16px}
  .stat-row{flex-direction:column}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  body{font-size:15px}
  .buy-row{flex-direction:column;align-items:stretch}
  .buy-row .btn{text-align:center}
  .qty{justify-content:space-between}
  .search-form-big{flex-direction:column}
  .coll-hero{padding:56px 0 44px}
}

/* utilities: promoted from inline styles (audit addendum, local punch list item 5) */
.sect-head--flush{margin-bottom:0}
.sect-head--tight{margin-bottom:8px}
.sect-head--cart{margin-top:26px;margin-bottom:12px}
.sect--flush-top{padding-top:0}
.sect--tight-top{padding-top:56px}
.sect--related{padding:64px 0}
.display--md{font-size:clamp(24px,3vw,36px)}
.display--lg{font-size:clamp(34px,5vw,60px)}
.display--stack{margin-top:14px}
.display--story{margin:14px 0 22px}
.sub--stack{margin-top:18px}
.eyebrow--crumbed{margin-top:26px}
.prod-grid--spaced{margin-top:32px}
.cta-row--flush{margin-left:0}
.fh-note{margin-top:10px}
.stat .n a{color:var(--cyan)}
.pdp-thumbs--mini img{width:76px;height:76px;object-fit:cover;border:1.5px solid rgba(217,217,217,.35)}
/* second placement of a repeated photo reads as a different frame */
.team-photo--low img{object-position:center 62%;transform:scale(1.18)}

/* level tag: differentiates identical renders across Jr/Int/Sr tiles */
.chip.lvl{left:auto;right:12px;background:var(--void);color:var(--ice);box-shadow:inset 0 0 0 1.5px rgba(9,225,255,.55)}
/* selected option chip: keep the size detail legible on magenta */
.opt[aria-pressed="true"] .od{color:#000}
.no-results{grid-column:1/-1;color:rgba(21,21,21,.7)}

/* A11Y-01. Under 861px the hero copy goes full bleed, so it runs out past the
   64% stop of the horizontal scrim and onto the lit boards: the sub-headline
   measured 1.70:1 against a required 4.5:1. The hero wordmark is already hidden
   at this width, so the right side of the plate carries nothing that needs to
   stay bright. Keep the scrim dark all the way across instead. */
@media (max-width:860px){
  .hero-media::after{
    background:
      linear-gradient(90deg,#030303 0%,rgba(3,3,3,.94) 45%,rgba(3,3,3,.86) 100%),
      linear-gradient(0deg,rgba(3,3,3,.80) 0%,rgba(3,3,3,.28) 40%,rgba(3,3,3,.18) 100%);
  }
}

/* COM-03. The per-stick team price and the lead time lived only inside the
   builder, so the collection band and the team PDP asked for $2,366 without
   ever saying what a stick costs or when it arrives. */
.grip-price{margin-top:6px;font-size:14px;color:var(--ice);font-weight:700}

/* ============ QA round 2026-08-21: S3 visual fixes ============ */

/* VIS-01. The header row was capped at --maxw 1200, and logo 129 + nav 675 +
   utils 292 + two 28px gaps came to exactly the 1152px available, so four of
   six nav labels wrapped to two lines on a 1440 screen with 240px of window
   going unused either side. Give the bar its own wider cap above 1200px, and
   centre the list so a short label never hangs off the top of a tall row. */
.nav-main ul{align-items:center}
@media (min-width:1200px){
  .head-row{max-width:1360px}
}

/* VIS-02 and VIS-04. `1fr` floors at min-content, and .card-body measures
   188.5px min-content, so a two-up grid at 390 demanded 361.6px inside a 343px
   box: the right card ran 3px past the viewport and the page scrolled sideways.
   minmax(0,1fr) lets the track actually shrink, which also settles the unequal
   card widths in the merchandise row. */
@media (max-width:860px){
  .coll-grid .prod-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .coll-grid .card{min-width:0}
  .coll-grid .card-body{min-width:0}
}

/* VIS-03. Both chips are absolutely positioned at opposite top corners with the
   same z-index, so on a 174px card "Intermediate" drove a 44px overlap and
   painted over "Hockey", truncating it to "HOC". Keep the overlay treatment the
   design uses and move the level chip to the opposite corner below 860, where
   the two can no longer meet whatever the label says. */
@media (max-width:860px){
  .card-img .chip.lvl{top:auto;bottom:12px}
}

/* VIS-04. The Hat is a 900x900 studio square poured into the 2/5 stick crop, so
   the hats sat in a 195px band inside a 395px frame with flat white above and
   below. Apparel gets a square crop; the stick ratio stays for sticks. */
.coll-merchandise .card-img img,
.coll-merchandise .card-img .tile-type{aspect-ratio:1/1}

/* VIS-07. Cart thumbs are 900x900 photos of a thin diagonal shaft on white, so
   at 70px they read as failed image loads next to the LazerGrip tile. Crop into
   the middle of the frame where the shaft graphics actually are. */
.cline-img img{transform:scale(2.1);transform-origin:center}
@media (prefers-reduced-motion:reduce){.cline-img img{transform:scale(2.1)}}

/* A11Y-08. WCAG 2.2 SC 2.5.8 wants 24x24 CSS px. The cart Remove button
   measured 56x15 and the quantity steppers 44x22, and neither qualifies for the
   inline or spacing exceptions: the steppers sit flush against the quantity
   input, which is itself a target. */
.qty button{min-height:26px;padding-block:4px}
.cline-remove{min-height:24px;padding:5px 0}

/* A11Y-06: hero video pause toggle. Small, out of the copy's way, and it never
   hides: an invisible control is not a mechanism. */
.hero-pause{
  position:absolute;right:16px;bottom:16px;z-index:3;
  display:flex;align-items:center;gap:8px;
  min-height:32px;padding:6px 12px;cursor:pointer;
  background:rgba(3,3,3,.72);border:1px solid rgba(217,217,217,.4);
  color:var(--white);font-family:var(--font);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--track-label);
}
.hero-pause:hover{border-color:var(--cyan);color:var(--cyan)}
/* two bars while playing, a triangle while paused. Borders, not clip-path:
   the polygon version rendered as one lopsided glyph. */
.hero-pause__icon{
  width:10px;height:11px;box-sizing:border-box;background:none;
  border-left:3px solid currentColor;border-right:3px solid currentColor;
}
.hero-pause[aria-pressed="true"] .hero-pause__icon{
  width:0;height:0;border-left:9px solid currentColor;border-right:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.hero-pause__label{white-space:nowrap}
@media (max-width:560px){
  .hero-pause{right:12px;bottom:12px;padding:6px 10px}
  .hero-pause__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
}
/* no video, nothing to pause */
@media (prefers-reduced-motion:reduce){.hero-pause{display:none}}

/* Visually hidden but announced. Used by the builder's step live region. */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* CONT-12: the hard numbers from the live product pages. "Elite carbon" was on
   every page with nothing behind it. */
.pdp-specs{margin-top:32px;border-top:1px solid rgba(217,217,217,.25);padding-top:20px}
.pdp-specs-h{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--track-label);color:var(--cyan);margin:0 0 12px;
}
.sp-list{margin:0;display:grid;gap:0}
.sp-row{display:flex;gap:16px;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(217,217,217,.14)}
.sp-row:last-child{border-bottom:0}
.sp-row dt{font-size:13px;color:var(--grey);margin:0}
.sp-row dd{font-size:13px;font-weight:700;margin:0;text-align:right}

/* COM-08. The team order is ten times the value of a single stick and sat in
   the hero as plain text between two buttons. Still third in the row, but it
   now reads as an action rather than a footnote. */
.team-link--btn{
  padding:10px 16px;border:1.5px solid rgba(9,225,255,.55);
  text-decoration:none;background:rgba(9,225,255,.06);
}
.team-link--btn:hover{border-color:var(--cyan);background:rgba(9,225,255,.14)}

/* PERF-07: no video source matches under 861px, so the element has nothing to
   play. Hide it and let the poster background on .hero-media carry the plate,
   exactly as the reduced-motion path already does. */
@media (max-width:860px){
  .hero-video{display:none}
  .hero-pause{display:none}
}

/* UX-08: inline add-to-cart confirmation, next to the button that caused it. */
.added-note{
  margin:10px 0 0;font-size:13px;font-weight:700;color:var(--cyan);
}
.added-note a{color:var(--cyan);text-underline-offset:4px}

/* UX-09. At 390 the gallery was 988px tall in an 844px viewport, so the whole
   first screen was a cropped photo: no name, no price, no options, with the buy
   button 2.4 screens down a 4507px page. Cap the gallery so the h1 and the price
   clear the fold, and keep the price with the button at the moment of purchase. */
@media (max-width:860px){
  .pdp-main img{aspect-ratio:4/3;height:auto}
  .pdp-thumbs--mini{display:flex;gap:8px;overflow-x:auto}
  .pdp-grid{gap:20px}
}