/* ================================================================
   GOLD COAST COMMODORE WRECKERS — "APEX"
   Motorsport carbon design system. Blacked-out carbon-fibre,
   gunmetal, electric red. Angular / chamfered / technical.
   ================================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Carbon blacks & gunmetal */
  --carbon:  #07090C;
  --coal:    #0B0E12;
  --panel:   #0E1319;
  --panel2:  #131A22;
  --steel:   #1B242F;
  --steel2:  #26323F;

  /* Platinum text */
  --ink:     #ECEFF3;
  --sub:     #C3CCD6;
  --dim:     #8592A0;
  --faint:   #5D6773;

  /* Electric red (HSV) + data cyan (used sparingly) */
  --red:     #FF2E3B;
  --red2:    #C8101C;
  --red-dk:  #8A0C14;
  --data:    #6FE0FF;

  /* Lines */
  --edge:    rgba(159,178,199,.14);
  --edge2:   rgba(159,178,199,.24);
  --glass:   rgba(159,178,199,.04);

  --grad-red: linear-gradient(103deg, var(--red) 0%, var(--red2) 100%);
  --grad-steel: linear-gradient(180deg, #171F28, #0C1116);

  /* Type */
  --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --disp: 'Anton', 'Oswald', var(--font);
  --head: 'Oswald', 'Inter', var(--font);
  --mono: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* client wants Outfit for prices/labels, not a mono */

  --h1: clamp(2.1rem, 4.6vw, 4.2rem);
  --h2: clamp(1.9rem, 4vw, 3.2rem);
  --h3: clamp(1.15rem, 1.5vw, 1.45rem);
  --lede: clamp(1rem, 1.1vw, 1.12rem);

  /* Space */
  --sec: clamp(58px, 7vw, 104px);
  --gut: clamp(18px, 3.4vw, 46px);
  --max: 1340px;
  --max-narrow: 860px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --hdr-h: 74px;
  --chamf: 12px;                 /* corner cut size */
  --cut: polygon(var(--chamf) 0, 100% 0, 100% calc(100% - var(--chamf)), calc(100% - var(--chamf)) 100%, 0 100%, 0 var(--chamf));
  --cut-sm: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr-h) + 24px)}
body{
  margin:0; background:var(--carbon); color:var(--ink);
  font-family:var(--font); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video{max-width:100%; display:block}
/* Inline icons carry only a viewBox (no width/height attr), so give them a sane
   default box — every component rule (.btn svg, .iconbtn svg, …) overrides this,
   and it stops any un-styled icon rendering at full SVG size. */
svg{width:1.15em; height:1.15em; flex:none; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,h5{margin:0; line-height:1; font-weight:700}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em; padding-left:1.1em}
hr{border:0; border-top:1px solid var(--edge); margin:2rem 0}
b,strong{font-weight:600; color:var(--ink)}
::selection{background:var(--red); color:#fff}

@supports (scrollbar-color: red blue){
  html{scrollbar-color: var(--steel2) var(--carbon); scrollbar-width: thin}
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--carbon)}
::-webkit-scrollbar-thumb{background:var(--steel2); border:2px solid var(--carbon)}
::-webkit-scrollbar-thumb:hover{background:var(--red2)}

/* ---------- 2. CARBON TEXTURE ---------- */
/* A fine carbon-fibre twill, fixed behind everything. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.014) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.5) 0 1px, transparent 1px 4px),
    radial-gradient(120% 80% at 50% -10%, rgba(255,46,59,.06), transparent 60%);
}
body > *{position:relative; z-index:1}
#emberfx{display:none!important}      /* the old ember canvas is retired */

/* ---------- 3. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.wrap-n{width:100%; max-width:var(--max-narrow); margin-inline:auto; padding-inline:var(--gut)}
.sec{padding-block:var(--sec); position:relative}
.sec-t{padding-top:var(--sec)} .sec-b{padding-bottom:var(--sec)}
.stack>*+*{margin-top:var(--st,1rem)}
.center{text-align:center}
.gap{height:1px;background:var(--edge)}
.visually-hidden,.skip:not(:focus){position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;top:10px;left:10px;z-index:100;background:var(--red);color:#fff;padding:10px 16px;font-family:var(--head);text-transform:uppercase;letter-spacing:.1em}
.reveal{opacity:1}      /* never gate content on JS reveal */
.hairline{height:1px;background:var(--edge);border:0}

/* ---------- 4. TYPE UTILITIES ---------- */
h1,.h1{font-family:var(--disp); font-weight:400; letter-spacing:.005em; text-transform:uppercase; line-height:.92}
h2,.sec-head h2{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:var(--h2); letter-spacing:.01em; line-height:.94}
h3{font-family:var(--head); font-weight:600; font-size:var(--h3); letter-spacing:.01em}
h4,h5{font-family:var(--head); font-weight:600; letter-spacing:.04em; text-transform:uppercase}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color:var(--red); margin:0 0 1.1rem;
}
.eyebrow::before{content:"//"; color:var(--red); font-weight:700; letter-spacing:0}
.eyebrow.c{justify-content:center}
.lede{font-family:var(--font); font-size:var(--lede); color:var(--sub); line-height:1.7; font-weight:400; max-width:64ch}
.muted{color:var(--dim)}
.tnum,.tnum *{font-family:var(--mono); font-variant-numeric:tabular-nums}
.grad-txt{color:var(--red)}       /* the hero red phrase */
.serif-alt{font-style:italic}

.sec-head{max-width:760px; margin-bottom:clamp(30px,3.6vw,52px)}
.sec-head.c{margin-inline:auto; text-align:center}
.sec-head h2{margin-bottom:.3em}
.sec-head p{margin-top:.9rem; margin-bottom:0}
/* red underline tick under section titles */
.sec-head h2::after{content:""; display:block; width:64px; height:3px; background:var(--grad-red); margin-top:.5rem}
.sec-head.c h2::after{margin-inline:auto}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--grad-red); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--head); font-weight:600; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.95em 1.5em; background:var(--bg); color:var(--fg);
  clip-path:var(--cut-sm); position:relative; cursor:pointer; border:0;
  transition:transform .18s var(--ease), filter .2s var(--ease), box-shadow .2s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn .ic{display:inline-grid;place-items:center;width:1.05em;height:1.05em;transition:transform .25s var(--ease-out)}
.btn:hover .ic{transform:translateX(4px)}
.btn svg{width:1.15em; height:1.15em; flex:none}   /* raw icons in buttons must not render at full SVG size */
.btn.sm{padding:.66em 1.05em; font-size:.76rem}
.btn.lg{padding:1.08em 1.9em; font-size:.92rem}
.btn.block{display:flex; justify-content:center; width:100%}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge2)}
.btn.ghost:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--red); filter:none}
.btn.solid,.btn.solid-light{background:var(--panel2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge2)}
.btn.solid:hover{box-shadow:inset 0 0 0 1px var(--red)}
.tlink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--ink)}
.tlink .ic,.tlink .ic svg{width:1em;height:1em}
.tlink:hover{color:var(--red)}
.arr svg{width:1.1em;height:1.1em}

/* generic angular panel used across cards */
.panel,.formcard,.fcard,.pcard,.ctile,.trust-c,.dial-stage,.figure,.tcard,.statgrid > div{
  background:var(--grad-steel);
  border:1px solid var(--edge);
}

/* ---------- 6. TOPBAR ---------- */
.topbar{background:#04060A; border-bottom:1px solid var(--edge); font-family:var(--mono); font-size:.72rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:34px}
.tb-marq{flex:1; overflow:hidden; -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tb-track{display:inline-flex; gap:44px; white-space:nowrap; animation:marq 34s linear infinite; will-change:transform}
.tb-item{display:inline-flex; align-items:center; gap:.55em; color:var(--sub); letter-spacing:.14em; text-transform:uppercase}
.tb-item svg{width:14px;height:14px;color:var(--red)}
.tb-right{display:flex; align-items:center; gap:20px; color:var(--dim); letter-spacing:.08em}
.tb-right a,.tb-right span{display:inline-flex;align-items:center;gap:.5em}
.tb-right svg{width:14px;height:14px;color:var(--red)}
.tb-right a:hover{color:var(--ink)}
@media(max-width:860px){ .tb-right{display:none} }
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- 7. HEADER / NAV ---------- */
.hdr{position:sticky; top:0; z-index:60; background:rgba(7,9,12,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--edge)}
.hdr-in{display:flex; align-items:center; gap:26px; height:var(--hdr-h)}
.brand{display:flex; align-items:center}
.hdr-in > nav{flex:1; display:flex; justify-content:center}   /* menu centred between logo and actions */
.brand img{height:58px; width:auto}
@media(max-width:600px){ .brand img{height:46px} }
.nav{display:none; list-style:none; margin:0; padding:0; gap:6px; align-items:center}
@media(min-width:1000px){ .nav{display:flex} }
.nav li{position:relative}
.nav-l,.nav a{
  display:inline-flex; align-items:center; gap:.4em; padding:10px 14px;
  font-family:var(--head); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--sub);
  position:relative; transition:color .2s;
  background:transparent; border:0; border-radius:0; cursor:pointer; line-height:1; /* reset UA <button> chrome on the mega trigger */
}
.nav-l .cav svg{width:11px;height:11px}
.nav > li > a::after{content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.nav li:hover > a, .nav .on > a{color:#fff}
.nav li:hover > a::after, .nav .on > a::after{transform:scaleX(1)}
.nav a:focus{outline:0}
.nav a:focus-visible{outline:2px solid var(--red); outline-offset:-2px}
.nav .cav{display:inline-grid;place-items:center;width:11px;height:11px;opacity:.6}
.hdr-acts{display:flex; align-items:center; gap:8px}
.iconbtn{
  display:grid; place-items:center; width:42px; height:42px; background:var(--panel); color:var(--sub);
  border:1px solid var(--edge); clip-path:var(--cut-sm); position:relative; cursor:pointer; transition:.2s;
}
.iconbtn:hover{color:#fff; border-color:var(--red); background:var(--panel2)}
.iconbtn svg{width:20px;height:20px}
/* Badge sits JUST INSIDE the top-right corner — the button's chamfer clip-path
   clips anything outside its bounds, so a badge stuck out past the edge renders
   as a cut-off red square. The panel-coloured ring separates it from the icon. */
.iconbtn .cnt,.cnt{position:absolute; top:3px; right:3px; min-width:16px; height:16px; padding:0 4px; display:grid; place-items:center;
  background:var(--red); color:#fff; font-family:var(--font); font-size:.6rem; font-weight:700; line-height:1;
  border-radius:100px; box-shadow:0 0 0 2px var(--panel)}
.cnt[data-n="0"]{display:none}
.burger{display:grid}
@media(min-width:1000px){ .burger{display:none} }
.prog{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--grad-red); z-index:2}
.scrim{position:fixed; inset:0; background:rgba(2,4,7,.72); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.3s; z-index:70}
.scrim.open{opacity:1; visibility:visible}
.noscroll{overflow:hidden}

/* ---------- 8. MEGA MENU ---------- */
.mega{position:absolute; left:0; right:0; top:100%; background:var(--coal); border-top:1px solid var(--red); border-bottom:1px solid var(--edge);
  opacity:0; visibility:hidden; transform:translateY(-8px); transition:.25s var(--ease); z-index:59; box-shadow:0 30px 60px rgba(0,0,0,.5)}
.mega.open{opacity:1; visibility:visible; transform:none}
.mega-in{display:grid; grid-template-columns:1.6fr 1fr; gap:clamp(24px,3vw,54px); padding-block:clamp(26px,3vw,44px)}
.mega-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.mega h4{color:var(--dim); font-size:.72rem; letter-spacing:.16em; margin-bottom:12px}
.mega-cols a{display:flex; align-items:center; gap:14px; padding:12px 15px; color:var(--sub);
  border:1px solid var(--edge); clip-path:var(--cut-sm); background:var(--panel); position:relative; overflow:hidden;
  transition:background .2s var(--ease), border-color .2s var(--ease)}
.mega-cols a::after{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:bottom; transition:transform .25s var(--ease)}
.mega-cols a:hover{background:var(--panel2); border-color:var(--edge2)}
.mega-cols a:hover::after{transform:scaleY(1)}
.mega-cols .mi{flex:none; width:56px; height:56px; display:block; overflow:hidden; clip-path:var(--cut-sm); background:var(--panel2)}
.mega-cols .mi img{width:56px; height:56px; object-fit:cover; transition:transform .4s var(--ease)}
.mega-cols a:hover .mi img{transform:scale(1.09)}
.mega-cols a > span:not(.mi){display:flex; flex-direction:column; gap:4px; min-width:0}
.mega-cols a > span:not(.mi) > span:first-child{font-family:var(--head); font-weight:600; text-transform:uppercase;
  letter-spacing:.02em; font-size:.86rem; line-height:1.15; color:#fff; transition:color .2s}
.mega-cols a:hover > span:not(.mi) > span:first-child{color:var(--red)}
.mega-cols .mc{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.mgroup a{display:block; padding:7px 0; color:var(--sub); font-size:.92rem; transition:.18s}
.mgroup a:hover{color:var(--red)}
.mega-feat{background:var(--grad-steel); border:1px solid var(--edge); clip-path:var(--cut); padding:22px; position:relative; overflow:hidden}
.mega-feat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5}
.mega-feat > *{position:relative}

/* ---------- 9. HERO ---------- */
.hero{position:relative; overflow:hidden; display:flex; align-items:center;
  min-height:calc(100svh - var(--hdr-h)); padding-block:clamp(24px,3vw,48px); border-bottom:1px solid var(--edge)}
.hero-bg{position:absolute; inset:0; z-index:-2}
.hero-bg img{width:100%; height:100%; object-fit:cover; opacity:.32; filter:grayscale(.3) contrast(1.05)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--carbon) 24%, rgba(7,9,12,.55) 62%, rgba(7,9,12,.2)),
             linear-gradient(0deg, var(--carbon), transparent 40%)}
/* red diagonal speed slash */
.hero-glow{position:absolute; top:0; right:-10%; width:60%; height:100%; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,46,59,.16) 50%, transparent 60%)}
.hero-in{width:100%}   /* full .wrap (1340) so the content's left edge lines up with the header logo */
.hero h1{font-size:var(--h1); margin-bottom:.3em; max-width:19ch}
.hero .eyebrow{margin-bottom:.9rem}
.hero .eyebrow,.hero-sub,.hero-cta,.hero .specs{max-width:720px}
.hero .grad-txt{display:inline-block; color:var(--red)}
.hero-sub{margin-bottom:1.3rem; max-width:52ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.6rem}
.specs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--edge); max-width:560px; background:var(--panel)}
.specs div{padding:16px 18px; border-right:1px solid var(--edge); position:relative}
.specs div:last-child{border-right:0}
.specs b{display:block; font-family:var(--disp); font-weight:400; font-size:clamp(1.7rem,3vw,2.5rem); color:#fff; line-height:1}
.specs b i{font-style:normal; color:var(--red); font-size:.6em}
.specs span{display:block; margin-top:6px; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}

.hero-art{position:relative}
.plate{position:relative; clip-path:var(--cut); border:1px solid var(--edge2); background:var(--panel);
  aspect-ratio:4/3.4; overflow:hidden}
.plate::before{content:""; position:absolute; top:0; left:0; width:46px; height:46px; z-index:3;
  border-top:3px solid var(--red); border-left:3px solid var(--red)}
.plate::after{content:""; position:absolute; bottom:0; right:0; width:46px; height:46px; z-index:3;
  border-bottom:3px solid var(--red); border-right:3px solid var(--red)}
.plate img{width:100%; height:100%; object-fit:cover}
.plate-tag{position:absolute; left:14px; right:14px; bottom:14px; z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:rgba(7,9,12,.9); border:1px solid var(--edge2); backdrop-filter:blur(8px); padding:12px 14px; clip-path:var(--cut-sm)}
.plate-tag > div{min-width:0}
.plate-tag .t{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--head); font-weight:600; font-size:.9rem; color:#fff; line-height:1.2}
.plate-tag .s{display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:3px}
.plate-tag .p{font-family:var(--mono); font-weight:700; color:var(--red); white-space:nowrap}
.hero-float{position:absolute; z-index:5; display:flex; align-items:center; gap:11px; background:rgba(11,14,18,.92); border:1px solid var(--edge2);
  padding:11px 14px; clip-path:var(--cut-sm)}
.hero-float.a{top:16px; left:-14px} .hero-float.b{bottom:74px; right:-14px}
.hero-float .fi{display:grid;place-items:center;width:34px;height:34px;background:var(--grad-red);clip-path:var(--cut-sm)}
.hero-float .fi svg{width:18px;height:18px;color:#fff}
.hero-float b{display:block;font-family:var(--head);font-weight:600;font-size:.82rem;color:#fff}
.hero-float span span,.hero-float > span > span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
@media(max-width:600px){ .hero-float{display:none} }

/* ---------- 10. MODEL-BADGE MARQUEE ---------- */
.badgestrip{border-block:1px solid var(--edge); background:#04060A; overflow:hidden; padding:0}
.badgestrip .btrack{display:inline-flex; gap:0; white-space:nowrap; animation:marq 40s linear infinite}
.badge-item{display:inline-flex; align-items:center; gap:14px; padding:16px 30px; font-family:var(--disp); font-weight:400;
  font-size:1.35rem; letter-spacing:.05em; color:var(--faint); text-transform:uppercase}
.badge-item::after{content:"◆"; color:var(--red); font-size:.5em}

/* ---------- 11. TRUST STRIP ---------- */
.trust{border-bottom:1px solid var(--edge); background:var(--coal)}
.trust-in{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--edge)}
@media(min-width:760px){ .trust-in{grid-template-columns:repeat(4,1fr)} }
.trust-c{display:flex; align-items:center; gap:13px; padding:clamp(20px,2.4vw,30px); background:var(--carbon)}
.trust-c .ti{display:grid; place-items:center; width:44px; height:44px; flex:none; background:var(--panel2); border:1px solid var(--edge); clip-path:var(--cut-sm); color:var(--red)}
.trust-c .ti svg{width:22px;height:22px}
.trust-c b{display:block; font-family:var(--head); font-weight:600; font-size:.94rem; color:#fff; text-transform:uppercase; letter-spacing:.03em}
.trust-c span span,.trust-c > span > span{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; color:var(--dim)}

/* ---------- 12. GRIDS ---------- */
.grid{display:grid; gap:clamp(14px,1.5vw,22px)}
.grid.p2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.p3{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
/* auto-fill so cards never over-column in a narrow column (e.g. beside the
   shop sidebar) — as many ~230px tracks as fit, min 2 on phones. */
.grid.p4{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}

/* ---------- 13. CATEGORY TILES (ctile) ---------- */
.ctile{position:relative; display:block; overflow:hidden; min-height:270px; clip-path:var(--cut);
  border:1px solid var(--edge); transition:.3s var(--ease)}
.ctile:hover{border-color:var(--red); transform:translateY(-3px)}
.ctile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s var(--ease); filter:grayscale(.35) contrast(1.05)}
.ctile:hover img{transform:scale(1.06); filter:none}
.ctile::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(7,9,12,.94) 6%, rgba(7,9,12,.35) 60%, rgba(7,9,12,.55))}
.ctile .cb{position:absolute; left:0; right:0; bottom:0; padding:clamp(18px,2vw,24px); border-left:3px solid var(--red)}
.ctile .cc{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.ctile h3{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.3rem; color:#fff; margin-top:6px}
.ctile .arr{position:absolute; top:16px; right:16px; width:38px; height:38px; display:grid; place-items:center;
  background:var(--grad-red); clip-path:var(--cut-sm); opacity:0; transform:translate(6px,-6px); transition:.3s}
.ctile .arr svg{width:18px;height:18px;color:#fff}
.ctile:hover .arr{opacity:1; transform:none}
.grid.mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){ .grid.mosaic{grid-template-columns:repeat(3,minmax(0,1fr))} .grid.mosaic .ctile.wide{grid-column:span 2} }

/* ---------- 14. CATEGORY DIAL ---------- */
.dial{display:grid; gap:20px}
@media(min-width:900px){ .dial{grid-template-columns:.9fr 1.4fr; align-items:start} }
.dial-list{display:flex; flex-direction:column; border:1px solid var(--edge); background:var(--panel)}
.dial-btn{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:16px 18px; background:transparent; border:0; border-bottom:1px solid var(--edge); cursor:pointer; transition:.2s; position:relative}
.dial-btn:last-child{border-bottom:0}
.dial-btn::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red); transform:scaleY(0); transition:.25s}
.dial-btn[aria-selected="true"]::before{transform:scaleY(1)}
.dial-btn[aria-selected="true"], .dial-btn:hover{background:var(--panel2)}
.dial-btn .dn{font-family:var(--mono); font-size:.7rem; color:var(--faint)}
.dial-btn .dt{font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--sub); flex:1}
.dial-btn[aria-selected="true"] .dt{color:#fff}
.dial-btn .dc{font-family:var(--mono); font-size:.68rem; color:var(--red)}
.dial-stage{position:relative; clip-path:var(--cut); overflow:hidden; min-height:340px}
.dial-pane{display:none; position:relative}
.dial-pane.on{display:block}
.dial-pane img{width:100%; height:clamp(300px,42vw,470px); object-fit:cover; filter:grayscale(.3)}
.dial-cap{position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:clamp(18px,2.5vw,30px); background:linear-gradient(0deg, rgba(7,9,12,.94), transparent); border-left:3px solid var(--red)}
.dial-cap h3{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.5rem; color:#fff}
.dial-cap p{margin:6px 0 0; color:var(--sub); font-size:.9rem; max-width:44ch}

/* ---------- 15. RAILS ---------- */
.rail-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:clamp(22px,2.6vw,34px)}
.rail-nav{display:flex; gap:8px}
.rnav{display:grid; place-items:center; width:44px; height:44px; background:var(--panel); border:1px solid var(--edge); clip-path:var(--cut-sm); color:var(--sub); cursor:pointer; transition:.2s}
.rnav:hover{color:#fff; border-color:var(--red)}
.rnav svg{width:20px;height:20px}
.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
@media(min-width:700px){ .rail{grid-auto-columns:minmax(272px,1fr)} }
.rail > *{scroll-snap-align:start}

/* ---------- 16. PRODUCT CARD (spec-sheet) ---------- */
.pcard{position:relative; display:flex; flex-direction:column; clip-path:var(--cut); border:1px solid var(--edge); background:var(--grad-steel); transition:.25s var(--ease); overflow:hidden}
.pcard:hover{border-color:var(--red2); transform:translateY(-3px)}
/* Product photos fill the box edge-to-edge (cover), for a clean uniform grid. */
.pcard-media{position:relative; aspect-ratio:1/1; background:var(--panel); overflow:hidden; border-bottom:1px solid var(--edge)}
.pcard-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .35s var(--ease), transform .55s var(--ease)}
/* The gallery/hover image (.b) fades in OVER the first one. The first image is
   never faded out — a product with no second image would otherwise go black
   on hover. */
.pcard-media .b{opacity:0}
.pcard:hover .pcard-media .b{opacity:1}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard:hover .pcard-media img{transform:scale(1.05)}
.pcard-link{position:absolute; inset:0; z-index:3}
.pcard-flags{position:absolute; top:0; left:0; z-index:4; display:flex; flex-direction:column}
.pcard-flags .flag{font-family:var(--mono); font-weight:700; font-size:.64rem; letter-spacing:.08em; padding:4px 9px; color:#fff; background:var(--grad-red); text-transform:uppercase}
.pcard-flags .flag.out{background:var(--steel2); color:var(--dim)}
.pcard-quick{position:absolute; top:10px; right:10px; z-index:5; display:grid; gap:7px}
.pcard-quick .qbtn{width:36px;height:36px;display:grid;place-items:center;background:rgba(7,9,12,.8);border:1px solid var(--edge2);clip-path:var(--cut-sm);color:var(--sub);cursor:pointer;transition:.2s}
.pcard-quick .qbtn:hover{color:#fff;border-color:var(--red)}
.pcard-quick .qbtn svg{width:17px;height:17px}
.pcard-body{padding:16px 16px 0; flex:1; display:flex; flex-direction:column}
.pcard-cat{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:7px}
.pcard-t{font-family:var(--head); font-weight:600; font-size:.98rem; line-height:1.2; color:#fff; min-height:2.4em; text-transform:uppercase; letter-spacing:.01em}
.pcard-t a:hover{color:var(--red)}
.pcard-meta{margin-top:auto}
.pcard-foot{display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:14px 16px; margin-top:14px; border-top:1px solid var(--edge)}
.price,.pcard-price{font-family:var(--mono); font-weight:700; color:#fff; font-size:1.06rem; display:inline-flex; align-items:baseline; gap:.4em; letter-spacing:-.01em; flex-wrap:wrap}
.price .was,.was{color:var(--faint); text-decoration:line-through; font-weight:400; font-size:.8em}
.price .now,.now{color:#fff}
.price ins,.pcard-price ins{text-decoration:none; color:#fff}
.price del,.pcard-price del{color:var(--faint); font-weight:400; font-size:.82em; margin-right:.35em}
.pcard .amount{font-family:var(--mono)}
.pcard-add{display:inline-flex; align-items:center; justify-content:center; gap:.55em; width:100%; padding:.85em 1em;
  background:var(--grad-red); color:#fff; clip-path:var(--cut-sm); border:0; cursor:pointer; transition:.2s;
  font-family:var(--head); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; line-height:1; white-space:nowrap;
  position:relative; z-index:4}   /* above the full-card .pcard-link overlay so the click reaches the button, not the product link */
.pcard-add:hover{filter:brightness(1.1)}
.pcard-add svg{width:16px; height:16px; flex:none}
.pcard-add.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--edge2)}
.pcard-add.ghost:hover{color:#fff; box-shadow:inset 0 0 0 1px var(--red); filter:none}
.pcard-add.done{background:var(--steel2)}
.pcard .sprice{font-family:var(--mono); color:var(--red); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em}

/* ---------- 17. FEATURE BAND ---------- */
.band{position:relative; overflow:hidden; border-block:1px solid var(--edge); padding-block:clamp(52px,6vw,90px)}
.band-bg{position:absolute; inset:0; z-index:-2}
.band-bg img{width:100%; height:100%; object-fit:cover; opacity:.24; filter:grayscale(.4)}
.band-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--carbon) 20%, rgba(7,9,12,.6))}
.band-in{max-width:640px}
.band-in h2{margin-bottom:.35em}

/* ---------- 18. FEATURE CARDS (why us) ---------- */
.fcards{display:grid; gap:clamp(14px,1.6vw,20px)}
@media(min-width:640px){ .fcards{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .fcards{grid-template-columns:repeat(3,1fr)} }
@media(min-width:640px){ .fcards.four{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1060px){ .fcards.four{grid-template-columns:repeat(4,1fr)} }
.fcard{position:relative; padding:clamp(24px,2.6vw,32px); clip-path:var(--cut); border:1px solid var(--edge); overflow:hidden; transition:.25s}
.fcard:hover{border-color:var(--red2); transform:translateY(-3px)}
.fcard .fnum{position:absolute; top:12px; right:16px; font-family:var(--disp); font-weight:400; font-size:2.6rem; color:rgba(255,255,255,.05)}
.fcard .fi{display:grid; place-items:center; width:52px; height:52px; background:var(--panel2); border:1px solid var(--edge); clip-path:var(--cut-sm); color:var(--red); margin-bottom:18px}
.fcard .fi svg{width:26px;height:26px}
.fcard h3{font-family:var(--head); text-transform:uppercase; font-size:1.05rem; color:#fff; margin-bottom:.5em; letter-spacing:.02em}
.fcard p{color:var(--sub); font-size:.92rem; margin:0}

/* ---------- 19. SPLIT / FIGURE ---------- */
.split{display:grid; gap:clamp(28px,3.6vw,60px); align-items:center}
@media(min-width:900px){ .split{grid-template-columns:1fr 1fr} .split.rev>*:first-child{order:2} }
.figure{position:relative; clip-path:var(--cut); overflow:hidden; border:1px solid var(--edge2)}
.figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3.2; filter:grayscale(.25)}
.figure.tall img{aspect-ratio:4/4.6}
.figure-badge{position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:.5em; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; color:#fff; background:var(--grad-red); padding:8px 12px; clip-path:var(--cut-sm)}
.figure-badge svg{width:16px;height:16px}
.ticks{list-style:none; margin:1.5rem 0 1.9rem; padding:0; display:grid; gap:.8rem}
.ticks li{display:flex; gap:.7em; align-items:flex-start; color:var(--sub); font-size:.95rem}
.ticks li svg{width:20px; height:20px; flex:none; margin-top:.1em; color:var(--red)}

/* ---------- 20. FAQ / ACCORDION ---------- */
.faq-lay{display:grid; gap:clamp(24px,3vw,48px); align-items:start}
@media(min-width:960px){ .faq-lay{grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr)} }
.faq-side{position:static}
@media(min-width:960px){ .faq-side{position:sticky; top:calc(var(--hdr-h) + 22px)} }
.acc{border-top:1px solid var(--edge)}
.acc-i{border-bottom:1px solid var(--edge)}
.acc-b{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; padding:20px 0; background:transparent; border:0; cursor:pointer; color:var(--ink); font-family:var(--head); font-weight:600; font-size:1.02rem; text-transform:uppercase; letter-spacing:.02em; transition:color .2s}
.acc-b:hover{color:var(--red)}
.acc-b .pm{position:relative; width:20px; height:20px; flex:none}
.acc-b .pm::before,.acc-b .pm::after{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:currentColor}
.acc-b .pm::before{width:13px; height:2px}
.acc-b .pm::after{width:2px; height:13px; transition:transform .35s var(--ease)}
.acc-b[aria-expanded="true"]{color:var(--red)}
.acc-b[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-p{overflow:hidden; max-height:0; transition:max-height .5s var(--ease)}
.acc-p .inr{padding:0 0 22px; color:var(--sub); font-size:.94rem; line-height:1.7}

/* ---------- 21. FORM CARD / FIELDS ---------- */
.formcard{padding:clamp(24px,3vw,34px); clip-path:var(--cut); border:1px solid var(--edge)}
.field{margin-bottom:14px}
.field label,.fgroup h5{display:block; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--dim); margin-bottom:7px}
.field input,.field textarea,.field select,input[type=text],input[type=email],input[type=tel],input[type=search],textarea,select{
  width:100%; background:var(--carbon); border:1px solid var(--edge2); color:var(--ink); padding:.85em 1em; font-family:var(--font); clip-path:var(--cut-sm); transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus,input:focus,textarea:focus,select:focus{outline:0; border-color:var(--red); background:var(--panel)}
.field textarea{min-height:130px; resize:vertical}
::placeholder{color:var(--faint)}
.formnote,.sp-hint,.dnote{font-family:var(--mono); font-size:.72rem; color:var(--dim); letter-spacing:.03em}
.gccw-cf7-block .btn,.gccw-cf7-submit{margin-top:6px}

/* ---------- 22. PAGE HEAD / BREADCRUMBS ---------- */
.phead{position:relative; padding-block:clamp(48px,6vw,88px); border-bottom:1px solid var(--edge); overflow:hidden}
.phead.img::before{content:""; position:absolute; inset:0; z-index:-2; background:var(--phimg) center/cover; opacity:.26; filter:grayscale(.4)}
.phead::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, var(--carbon) 26%, rgba(7,9,12,.5))}
.phead h1{font-size:clamp(2.2rem,4.6vw,3.6rem); margin-top:.3em}
.phead .lede{margin-top:1rem}
.crumbs{display:flex; align-items:center; flex-wrap:wrap; gap:.5em; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--dim)}
.crumbs a:hover{color:var(--red)}
.crumbs svg{width:12px;height:12px;color:var(--faint)}
.crumbs [aria-current]{color:var(--sub)}

/* ---------- 23. PRODUCT PAGE (PDP) ---------- */
.pdp{display:grid; gap:clamp(26px,3.4vw,52px); padding-block:clamp(30px,4vw,56px)}
@media(min-width:900px){ .pdp{grid-template-columns:1.05fr .95fr; align-items:start} }
.gal{display:grid; gap:12px}
.gal-main,.gal .woocommerce-product-gallery__image,.gal figure.gal-main{position:relative; clip-path:var(--cut); border:1px solid var(--edge2); background:linear-gradient(158deg,#eef1f4,#d9dee4); overflow:hidden; aspect-ratio:1/1}
.gal-main img,.gal .woocommerce-product-gallery__image img{width:100%;height:100%;object-fit:contain;padding:6%;mix-blend-mode:multiply}
.gal .woocommerce-product-gallery__wrapper{margin:0}
.gal-thumbs,.gal .flex-control-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; list-style:none; padding:0; margin:0}
.gal-thumbs img,.gal-thumbs button,.gal .flex-control-thumbs img{clip-path:var(--cut-sm); border:1px solid var(--edge); background:linear-gradient(158deg,#eef1f4,#dbe0e6); aspect-ratio:1/1; object-fit:contain; padding:8%; cursor:pointer; transition:.2s; mix-blend-mode:multiply}
.gal-thumbs img:hover,.gal-thumbs button:hover,.gal-thumbs .on img,.gal-thumbs button.on{border-color:var(--red)}
.pdp-info .pcard-cat,.pdp-meta{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red)}
.pdp-info h1,.entry-title,.product_title{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:clamp(1.7rem,3vw,2.6rem); color:#fff; line-height:1; margin:.4em 0}
.pdp-price{font-family:var(--mono); font-weight:700; font-size:1.7rem; color:#fff; margin:.4em 0 1em; display:flex; align-items:baseline; gap:.5em}
.pdp-price del{color:var(--faint); font-weight:400; font-size:.6em}
.pdp-price ins{text-decoration:none; color:var(--red)}
.pdp-short{color:var(--sub); line-height:1.7; margin-bottom:1.4em}
.pdp-buy{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:1.2em 0}
.qty{display:inline-flex; align-items:center; border:1px solid var(--edge2); clip-path:var(--cut-sm); background:var(--carbon)}
.qty input,.qtybig input{width:56px; text-align:center; background:transparent; border:0; clip-path:none; font-family:var(--mono)}
.qty button,.qtybig button{width:42px;height:44px;background:transparent;border:0;color:var(--sub);cursor:pointer;font-size:1.1rem}
.qty button:hover{color:var(--red)}
.pdp-assure{display:grid; gap:12px; margin-top:1.6em; padding-top:1.6em; border-top:1px solid var(--edge)}
.pdp-assure > div{display:flex; gap:.8em; align-items:flex-start; color:var(--sub); font-size:.9rem}
.pdp-assure svg{width:20px;height:20px;flex:none;color:var(--red);margin-top:.1em}
.tabs{display:flex; gap:4px; flex-wrap:wrap; border-bottom:1px solid var(--edge); margin-top:8px}
.tab{padding:12px 18px; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:.82rem; color:var(--dim); cursor:pointer; border-bottom:2px solid transparent}
.tab.on,.tab:hover{color:#fff; border-color:var(--red)}

/* ---------- 24. SHOP / ARCHIVE ---------- */
.shop-lay{display:grid; gap:clamp(20px,2.6vw,38px); padding-block:clamp(26px,3vw,46px)}
@media(min-width:900px){ .shop-lay{grid-template-columns:264px 1fr; align-items:start} }
.shop-bar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--edge)}
.filters,.fgroup{border:1px solid var(--edge); background:var(--panel); padding:18px; clip-path:var(--cut); margin-bottom:16px}
.fgroup h5{margin-bottom:12px; color:var(--dim)}
.fopt,.filters li,.fgroup li{list-style:none}
.filters ul,.fgroup ul{padding:0; margin:0}
.fopt a,.fgroup a{display:flex; justify-content:space-between; gap:8px; padding:7px 0; color:var(--sub); font-size:.92rem; transition:.18s}
.fopt a:hover,.fgroup a:hover{color:var(--red)}
.chip,.achip{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.45em .8em; background:var(--panel2); border:1px solid var(--edge2); clip-path:var(--cut-sm); color:var(--sub)}
.achip{color:#fff; border-color:var(--red)}
.activechips{display:flex; gap:8px; flex-wrap:wrap}
.rangebox{display:flex; gap:8px; align-items:center}
@media(max-width:900px){ .filters{position:static} }

/* ---------- 25. CART DRAWER ---------- */
.drawer{position:fixed; top:0; right:0; height:100dvh; width:min(420px,92vw); background:var(--coal); border-left:1px solid var(--red); z-index:80;
  transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--edge)}
.drawer-top h3,.drawer-top .t{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.3rem}
.drawer-body{flex:1; overflow-y:auto; padding:20px 22px}
.drawer-foot{padding:20px 22px; border-top:1px solid var(--edge)}
.drawer-empty,.empty{text-align:center; color:var(--dim); padding:40px 0; font-family:var(--mono); font-size:.82rem; letter-spacing:.06em}
.drow{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--edge)}
.drow img{width:70px;height:70px;object-fit:contain;background:var(--panel);border:1px solid var(--edge);clip-path:var(--cut-sm);padding:6px}
.dnote{margin-top:10px}
.tot,.drawer-foot .tot{display:flex; justify-content:space-between; font-family:var(--mono); font-weight:700; color:#fff; margin-bottom:14px; text-transform:uppercase; letter-spacing:.04em}

/* ---------- 26. SEARCH PANE ---------- */
.searchpane{position:fixed; inset:0; z-index:82; background:rgba(4,6,10,.94); backdrop-filter:blur(10px); opacity:0; visibility:hidden; transition:.3s; display:flex; flex-direction:column}
.searchpane.open{opacity:1; visibility:visible}
.sp-in{max-width:760px; width:100%; margin:14vh auto 0; padding-inline:var(--gut)}
.sp-field{display:flex; align-items:center; gap:14px; border-bottom:2px solid var(--red); padding-bottom:14px}
.sp-field input{flex:1; min-width:0; background:transparent; border:0; clip-path:none; color:var(--ink);
  font-family:var(--font); font-weight:500; text-transform:none; letter-spacing:0; font-size:clamp(1.1rem,2.4vw,1.6rem); padding:0}
.sp-field input::placeholder{color:var(--faint); font-weight:400}
.sp-field input:focus{background:transparent; outline:0}
.sp-field svg{width:26px; height:26px; color:var(--red); flex:none}
.sp-res,.sp-r{margin-top:24px; display:grid; gap:10px; max-height:52vh; overflow-y:auto}
.sp-r a,.sp-res a{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--edge); clip-path:var(--cut-sm); background:var(--panel); transition:.2s}
.sp-r a:hover,.sp-res a:hover{border-color:var(--red)}
.sp-r img,.sp-res img{width:52px;height:52px;object-fit:contain;background:var(--carbon);padding:5px}

/* ---------- 27. MOBILE NAV ---------- */
.mnav{position:fixed; top:0; left:0; height:100dvh; width:min(360px,90vw); background:var(--coal); border-right:1px solid var(--red); z-index:80; transform:translateX(-100%); transition:transform .35s var(--ease); display:flex; flex-direction:column}
.mnav.open{transform:none}
.mnav-top{display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--edge)}
.mnav-body{flex:1; overflow-y:auto; padding:12px 8px}
.mnav-body a,.mi a,.ml a{display:block; padding:13px 14px; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--sub); border-bottom:1px solid var(--edge)}
.mnav-body a:hover{color:#fff; padding-left:20px}
.mnav-foot{padding:18px 20px; border-top:1px solid var(--edge)}

/* ---------- 28. LIGHTBOX / WHATSAPP / TOAST ---------- */
.lb{position:fixed; inset:0; z-index:90; background:rgba(4,6,10,.94); display:none; align-items:center; justify-content:center; padding:5vw}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:88vh; object-fit:contain; border:1px solid var(--edge2)}
.lb-x{position:absolute; top:20px; right:20px; width:46px;height:46px; display:grid;place-items:center; background:var(--panel); border:1px solid var(--edge2); clip-path:var(--cut-sm); color:#fff; cursor:pointer}
/* Floating WhatsApp button — simple: just the icon with a drop shadow. */
.wa{position:fixed; right:24px; bottom:24px; z-index:75; display:block; width:58px; height:58px; line-height:0;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.4)); transition:transform .2s var(--ease)}
.wa:hover{transform:translateY(-3px) scale(1.04)}
.wa svg{width:100%; height:100%; display:block}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--panel2); border:1px solid var(--red); color:#fff; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em; padding:12px 18px; clip-path:var(--cut-sm); opacity:0; visibility:hidden; transition:.3s; z-index:95}
.toast.on{opacity:1; visibility:visible; transform:translateX(-50%)}

/* ---------- 29. ARTICLE CARDS / RICH TEXT ---------- */
.acard{display:block; clip-path:var(--cut); border:1px solid var(--edge); overflow:hidden; transition:.25s}
.acard:hover{border-color:var(--red); transform:translateY(-3px)}
.acard-media img{width:100%; aspect-ratio:16/10; object-fit:cover; filter:grayscale(.3)}
.acard-body{padding:20px}
.acard-body .dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red)}
.acard-body h3{font-family:var(--head); text-transform:uppercase; color:#fff; margin:8px 0}
.acard-body p{color:var(--sub); font-size:.9rem}
.rt{max-width:var(--max-narrow); font-size:1.02rem; line-height:1.8; color:var(--sub)}
.rt h2,.rt h3{color:#fff; margin:1.6em 0 .5em}
.rt a{color:var(--red); text-decoration:underline; text-underline-offset:3px}
.rt ul,.rt ol{padding-left:1.3em}
.rt img{clip-path:var(--cut); margin:1.5em 0}
.pager{display:flex; gap:8px; margin-top:2rem}
.pays{display:flex; gap:.6rem; flex-wrap:wrap}
.paychip{display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--dim); border:1px solid var(--edge); clip-path:var(--cut-sm); padding:.45em .9em}
.paychip svg{width:15px;height:15px;color:var(--red)}

/* ---------- 30. FOOTER ---------- */
.foot{background:#04060A; border-top:1px solid var(--red); margin-top:var(--sec); position:relative}
.foot::before{content:""; position:absolute; top:-1px; left:0; right:0; height:3px; background:repeating-linear-gradient(90deg, var(--red) 0 40px, transparent 40px 80px)}
.foot-top{display:grid; gap:clamp(30px,3vw,50px); grid-template-columns:1fr; padding-block:clamp(46px,5vw,72px)}
@media(min-width:760px){ .foot-top{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot-brand img{height:46px; margin-bottom:16px}
.foot-brand p{color:var(--dim); font-size:.9rem; max-width:38ch}
.foot-contact{display:grid; gap:12px; margin-top:20px}
.foot-contact a,.foot-contact span{display:flex; gap:.7em; align-items:flex-start; color:var(--sub); font-size:.88rem}
.foot-contact a:hover{color:var(--red)}
.foot-contact svg{width:18px;height:18px;flex:none;color:var(--red);margin-top:.1em}
.foot h5{font-family:var(--head); text-transform:uppercase; letter-spacing:.1em; color:#fff; font-size:.82rem; margin-bottom:16px}
.foot ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
.foot ul a{color:var(--dim); font-size:.9rem}
.foot ul a:hover{color:var(--ink)}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:40px;height:40px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--edge);clip-path:var(--cut-sm);color:var(--sub);transition:.2s}
.socials a:hover{color:#fff;border-color:var(--red)}
.socials svg{width:19px;height:19px}
.foot-bot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-block:22px; border-top:1px solid var(--edge); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--faint)}

/* ---------- 31. MISC / WOO NOTICES / STARS ---------- */
.stars,.tstars{display:inline-flex; gap:2px; color:var(--red)}
.stars svg,.tstars svg{width:15px;height:15px}
.statgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--edge); border:1px solid var(--edge)}
@media(min-width:760px){ .statgrid{grid-template-columns:repeat(4,1fr)} }
.statgrid > div{background:var(--carbon); padding:clamp(22px,2.6vw,32px) 20px; text-align:center}
.statgrid b{display:block; font-family:var(--disp); font-weight:400; font-size:2.2rem; color:var(--red)}
.gccw-postfoot{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:24px; border-top:1px solid var(--edge)}

/* honour reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
}

/* small screens */
@media(max-width:640px){
  :root{ --chamf:9px }
  .hero h1{font-size:clamp(2.3rem,10vw,3.2rem)}
  .rail{grid-auto-columns:minmax(210px,1fr)}
  .grid.p4,.grid.p3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- FIXES ---------- */
/* Standalone wishlist icon button (PDP buy row) — was rendering as a white UA button. */
.pdp-buy .qbtn, .qty ~ .qbtn, form.cart .qbtn{
  display:grid; place-items:center; width:54px; height:54px; flex:none; align-self:stretch;
  background:var(--panel); border:1px solid var(--edge2); clip-path:var(--cut-sm); color:var(--sub); cursor:pointer; transition:.2s}
.pdp-buy .qbtn:hover, form.cart .qbtn:hover{color:var(--red); border-color:var(--red)}
.pdp-buy .qbtn svg, form.cart .qbtn svg{width:20px; height:20px}

/* ─── Product description ────────────────────────────────────────────────
   A centred editorial column (never a left-jammed panel with a dead right
   half) with a top hairline header, and the spec bullets rendered as a filled
   two-column spec sheet. The tab NAV is hidden — these products only carry a
   Description, so the tab label just duplicated the panel's own heading. */
.pdp-tabs{margin-top:clamp(34px,4.5vw,64px)}
.woocommerce-tabs .tabs, .woocommerce-tabs ul.wc-tabs{display:none}

.woocommerce-Tabs-panel{
  display:block!important; position:relative;
  /* !important: WooCommerce base ships `.woocommerce-tabs .panel{padding:0}`
     which otherwise glues the text to the panel edges. */
  padding:clamp(30px,3.6vw,52px) clamp(28px,4vw,64px) clamp(34px,3.6vw,56px)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 55%), var(--panel);
  border:1px solid var(--edge);
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  color:var(--sub); line-height:1.8; font-size:1.02rem;
}
/* All content shares ONE left edge (the panel padding). Nothing is
   individually centred, so paragraphs, heading and spec cards stay aligned. */
.woocommerce-Tabs-panel > *{margin-left:0; margin-right:0}

/* Header: red kicker + hairline rule across the full content width. */
.woocommerce-Tabs-panel::before{
  content:"Product details"; display:block;
  padding-bottom:.9rem; margin-bottom:1.4rem; border-bottom:1px solid var(--edge);
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase; color:var(--red);
}
/* WooCommerce's own "Description" <h2> is redundant — hide it accessibly. */
.woocommerce-Tabs-panel > h2:first-of-type{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.woocommerce-Tabs-panel h2{
  font-family:var(--disp); font-weight:400; color:#fff; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.06; font-size:clamp(1.5rem,2.8vw,2.3rem);
  margin:0 0 .7em;
}
.woocommerce-Tabs-panel h2::after{
  content:""; display:block; width:56px; height:3px; background:var(--red); margin-top:.65rem;
}
.woocommerce-Tabs-panel h3{
  font-family:var(--head); color:#fff; text-transform:uppercase; letter-spacing:.03em;
  font-size:1.12rem; margin:1.8em 0 .6em;
}
.woocommerce-Tabs-panel p{margin:0 0 1.1em}   /* full width — same right edge as the spec cards */
.woocommerce-Tabs-panel strong{color:#fff; font-weight:600}
.woocommerce-Tabs-panel a{color:var(--red); text-decoration:underline; text-underline-offset:3px}

/* The spec bullets → a filled 2-column spec sheet spanning the full width. */
.woocommerce-Tabs-panel ul{
  list-style:none; padding:0; margin:1.6em 0 1.2em;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
}
.woocommerce-Tabs-panel ul li{
  position:relative; margin:0; padding:15px 18px 15px 40px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), rgba(255,255,255,.015);
  border:1px solid var(--edge);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.woocommerce-Tabs-panel ul li::before{        /* red chevron marker */
  content:""; position:absolute; left:18px; top:1.55em;
  width:7px; height:7px; border-right:2px solid var(--red); border-top:2px solid var(--red);
  transform:rotate(45deg);
}
/* Ordered lists (steps) — a clean numbered column. */
.woocommerce-Tabs-panel ol{list-style:none; counter-reset:i; padding:0; margin:1.4em 0; max-width:70ch}
.woocommerce-Tabs-panel ol li{counter-increment:i; position:relative; padding:.45em 0 .45em 2.4em; border-bottom:1px solid var(--edge)}
.woocommerce-Tabs-panel ol li:last-child{border-bottom:0}
.woocommerce-Tabs-panel ol li::before{
  content:counter(i,decimal-leading-zero); position:absolute; left:0; top:.5em;
  color:var(--red); font-family:var(--head); font-weight:600; font-size:.9em; letter-spacing:.05em;
}
@media(max-width:640px){
  .woocommerce-Tabs-panel{clip-path:none; padding:26px 20px}
  .woocommerce-Tabs-panel ul{grid-template-columns:1fr}
}

/* Cart / wishlist count — a clean rounded badge instead of a red square. */
.cnt{border-radius:100px; box-shadow:0 2px 6px rgba(0,0,0,.4); font-weight:700; line-height:1}

/* ---------- CART DRAWER ITEMS ---------- */
.gccw-mini-items{display:flex; flex-direction:column}
.citem{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--edge); position:relative}
.citem .ci{flex:none; width:66px; height:66px; display:block}
.citem .ci img{width:66px; height:66px; object-fit:cover; background:linear-gradient(158deg,#eef1f4,#dbe0e6);
  border:1px solid var(--edge); clip-path:var(--cut-sm)}
.citem > div{flex:1; min-width:0; padding-right:26px}
.citem .cn{display:block; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.02em;
  font-size:.8rem; line-height:1.25; color:#fff}
.citem .cn:hover{color:var(--red)}
.citem .cp{font-family:var(--mono); color:var(--red); font-weight:700; font-size:.9rem; margin:5px 0 0}
.gccw-mini-items .qty{display:inline-flex; align-items:center; border:1px solid var(--edge2); clip-path:var(--cut-sm); margin-top:8px; background:var(--carbon)}
.gccw-mini-items .qty .gccw-qty{width:30px; height:30px; display:grid; place-items:center; color:var(--sub); font-size:1rem; text-decoration:none}
.gccw-mini-items .qty .gccw-qty:hover{color:var(--red)}
.gccw-mini-items .qty span{min-width:26px; text-align:center; font-family:var(--mono); font-size:.85rem}
.crm{position:absolute; top:14px; right:0; width:26px; height:26px; display:grid; place-items:center; flex:none;
  color:var(--dim); border:1px solid var(--edge); clip-path:var(--cut-sm); background:var(--panel); transition:.2s}
.crm:hover{color:var(--red); border-color:var(--red)}
.crm svg{width:13px; height:13px}

/* ---------- LEGACY TOKEN ALIASES ---------- */
/* blocks.css (WooCommerce cart/checkout styling) was authored against the old
   ember palette. Map those token names onto the new carbon+red system so the
   checkout matches the rest of the site. */
:root{
  --ember:var(--red);
  --flame:var(--red);
  --blaze:var(--red2);
  --gold:var(--red);
  --grad-ember:var(--grad-red);
  --grad-heat:radial-gradient(60% 60% at 50% 100%, rgba(255,46,59,.28), transparent 72%);
  --bone:var(--ink);
  --linen:var(--ink);
  --parchment:var(--ink);
  --clay:var(--sub);
  --dust:var(--dim);
  --muted:var(--dim);
  --void:var(--carbon);
  --ash:var(--panel);
  --soot:var(--panel2);
  --smoke:var(--steel);
  --iron:var(--steel2);
  --line:var(--edge);
  --line-2:var(--edge2);
  --r-s:8px; --r:10px; --r-l:14px; --r-xl:18px;
}

/* ---------- SERVICES CTA TILE (4th slot) ---------- */
.ctile.cta{display:flex; background:var(--grad-steel); border:1px solid var(--edge2)}
.ctile.cta::after{display:none}
.ctile.cta .cta-in{display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:clamp(22px,2.4vw,30px); border-left:3px solid var(--red); width:100%}
.ctile.cta .cta-ic{width:48px; height:48px; display:grid; place-items:center; background:var(--panel2);
  border:1px solid var(--edge); clip-path:var(--cut-sm); color:var(--red); margin-bottom:16px}
.ctile.cta .cta-ic svg{width:24px; height:24px}
.ctile.cta .cc{font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red)}
.ctile.cta h3{font-family:var(--disp); font-weight:400; text-transform:uppercase; font-size:1.35rem; color:#fff; margin:6px 0 8px; position:static}
.ctile.cta p{color:var(--sub); font-size:.86rem; line-height:1.55; margin:0 0 16px}
.ctile.cta .tlink{color:#fff}
.ctile.cta:hover{border-color:var(--red); transform:translateY(-4px)}
.ctile.cta:hover .tlink{color:var(--red)}
.ctile.cta:hover .tlink .ic{transform:translateX(4px)}
.ctile.cta .tlink .ic{display:inline-grid;place-items:center;width:1em;height:1em;transition:transform .3s var(--ease)}

/* ---------- REVIEWS PAGE ---------- */
.rev-summary{display:flex; flex-wrap:wrap; align-items:center; gap:clamp(20px,3vw,44px);
  padding:clamp(22px,2.6vw,32px); border:1px solid var(--edge); clip-path:var(--cut); background:var(--grad-steel); margin-bottom:clamp(26px,3vw,40px)}
.rev-score{display:flex; align-items:center; gap:14px; flex:none}
.rev-score b{font-family:var(--disp); font-weight:400; font-size:clamp(2.4rem,4vw,3.4rem); color:#fff; line-height:1}
.rev-score .stars{display:inline-flex; gap:3px; color:var(--red)}
.rev-score .stars svg{width:20px; height:20px}
.rev-score .rev-count{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.rev-summary .lede{flex:1; min-width:240px}

.reviews-grid{display:grid; gap:clamp(14px,1.6vw,20px)}
@media(min-width:640px){ .reviews-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1020px){ .reviews-grid{grid-template-columns:repeat(3,1fr)} }
.rcard{display:flex; flex-direction:column; gap:14px; padding:clamp(22px,2.4vw,30px);
  background:var(--grad-steel); border:1px solid var(--edge); clip-path:var(--cut); position:relative; overflow:hidden; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.rcard:hover{border-color:var(--red2); transform:translateY(-3px)}
.rcard::before{content:"\201D"; position:absolute; top:6px; right:18px; font-family:var(--disp); font-size:5rem; line-height:1; color:rgba(255,46,59,.10)}
.rcard .rstars{display:inline-flex; gap:2px; color:var(--red); position:relative}
.rcard .rstars svg{width:16px; height:16px}
.rcard blockquote{margin:0}
.rcard blockquote p{color:var(--sub); line-height:1.7; margin:0; font-size:.95rem; position:relative}
.rcard .rby{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px}
.rcard .rav{width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--grad-red); color:#fff;
  font-family:var(--head); font-weight:600; font-size:.9rem; clip-path:var(--cut-sm); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.rcard .rname{display:block; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#fff; font-size:.9rem; line-height:1.2}
.rcard .rmeta{display:block; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:3px}

.rev-cta{text-align:center; max-width:640px; margin:clamp(40px,5vw,72px) auto 0; padding-top:clamp(30px,4vw,48px); border-top:1px solid var(--edge)}