/*
Theme Name: SPINEL
Theme URI: https://spinelglobal.com
Author: SPINEL / Eye Equip
Description: Premium eyewear brand theme for SPINEL — campaign collections, progressive lens engineering, myopia control and a WooCommerce store for Frames and Sunglasses. Built from the SPINEL website prototype. Requires WooCommerce (product catalogue, cart, checkout) and ACF PRO (page content, Lens Designs).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: spinel
*/

:root{
  --azure:#2E7CD6;--amber:#EFC066;
  --blush:#F4C9CC;--noir:#4A86B8;--desert:#E4CD9C;
  --max:1240px;--ease:cubic-bezier(.22,.61,.36,1);

  /* ---- Light theme (default) ---- */
  color-scheme:light;
  --void:#F5F7FB;--void-2:#EAEEF5;--void-rgb:245,247,251;
  --ink:#0A0D14;--ink-rgb:10,13,20;
  --sky:#1D62C4;
  --on-dark:#2A3242;--muted-dark:#5E687A;--rule-dark:rgba(var(--void-rgb),.12);
  --surface-1:#E4E9F1;--surface-2:#EEF2F8;--surface-3:#FFFFFF;--surface-4:#E1E7F0;--surface-5:#F2F5FA;
  --deep-blue:#D6E4F8;
  --btn-bg:#0A0D14;--btn-fg:#FFFFFF;--btn-hover:#2E7CD6;
}
/* ---- Dark theme (switcher) ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --void:#0A0D14;--void-2:#0E1220;--void-rgb:10,13,20;
  --ink:#FFFFFF;--ink-rgb:255,255,255;
  --sky:#8FC1FF;
  --on-dark:#D9DFEA;--muted-dark:#98A3B8;--rule-dark:rgba(var(--ink-rgb),.13);
  --surface-1:var(--surface-1);--surface-2:var(--surface-2);--surface-3:var(--surface-3);--surface-4:var(--surface-4);--surface-5:var(--surface-5);
  --deep-blue:#0A1C3C;
  --btn-bg:#FFFFFF;--btn-fg:#0A0D14;--btn-hover:#8FC1FF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--on-dark);background:var(--void);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
h1,h2,h3{letter-spacing:-.03em;line-height:1.05;font-weight:700;color:var(--ink)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:4px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sky);font-weight:500}
img{display:block}

/* ---------------- loader ---------------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--void);display:flex;align-items:center;justify-content:center;
  transition:opacity .7s var(--ease),visibility .7s}
.loader.gone{opacity:0;visibility:hidden}
.loader .mark{height:30px;animation:pulse 1.4s var(--ease) infinite alternate}
@keyframes pulse{from{opacity:.35}to{opacity:1}}

/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;background:transparent;
  border-bottom:1px solid transparent;transition:background .35s var(--ease),border-color .35s var(--ease)}
.nav.solid{background:rgba(var(--void-rgb),.9);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border-bottom-color:var(--rule-dark)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.nav-links{display:flex;gap:6px}
.nav-links a{font-size:14px;font-weight:600;padding:9px 17px;border-radius:100px;color:var(--nav-fg);
  transition:color .25s,background .25s;text-shadow:0 1px 12px rgba(0,0,0,.4);display:inline-block}
.nav-links a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.12)}
.nav-links a.on{color:var(--nav-fg-inv);background:var(--nav-fg);text-shadow:none}
.mark{display:block;height:17px;width:auto}
.mark-lg{height:32px}

/* ---------------- hero ---------------- */
.hero{position:relative;height:108svh;overflow:hidden}
.hero .hero-media{position:absolute;inset:-12% 0;will-change:transform}
.hero .hero-media img,.hero .hero-media video{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--void-rgb),.34),rgba(var(--void-rgb),.06) 40%,var(--void) 97%)}
.hero-type{position:absolute;left:0;right:0;bottom:9svh;z-index:2}
.hero-type .giant{
  font-weight:900;font-size:clamp(64px,14.5vw,220px);letter-spacing:-.02em;line-height:.86;color:var(--ink);
  text-transform:uppercase;
}
.hero-type .giant .ghost{
  -webkit-text-stroke:1.5px rgba(var(--ink-rgb),.75);color:transparent;display:block
}
/* Line-mask wrapper for the homepage GSAP entrance (gsap-home.js) — each
   line clips via the outer span while the inner one slides up through it. */
.hero-line{display:block;overflow:hidden}
.hero-line-inner{display:block;will-change:transform}
.hero-type p{margin-top:22px;max-width:480px;font-size:16.5px;line-height:1.6;color:#EDF1F7;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.scroll-cue{position:absolute;right:30px;bottom:34px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;color:var(--ink);opacity:.75}

@keyframes drop{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.btn{padding:15px 30px;border-radius:100px;font-size:14px;font-weight:600;display:inline-block;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
/* Homepage buttons get a GSAP magnetic-follow effect (gsap-home.js) that sets
   transform itself every frame — a competing CSS transition on the same
   property makes that feel laggy, so drop it there and let :hover's lift go too. */
body.tpl-home .btn{transition:background .3s var(--ease)}
body.tpl-home .btn:hover{transform:none}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-glass{background:rgba(var(--ink-rgb),.12);color:var(--ink);border:1px solid rgba(var(--ink-rgb),.4);backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(var(--ink-rgb),.22)}

/* ---------------- marquee ---------------- */
.tick{border-block:1px solid var(--rule-dark);overflow:hidden;padding:16px 0;background:var(--void)}
.tick-in{display:flex;gap:56px;white-space:nowrap;width:max-content;animation:tick 26s linear infinite}
.tick span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-dark)}
.tick b{color:var(--ink);font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}
/* Homepage drives the marquee with a GSAP tween instead (pausable on hover) — see gsap-home.js. */
body.tpl-home .tick-in{animation:none}

/* ---------------- sections ---------------- */
section{padding:110px 0;position:relative}
.sec-head{max-width:700px;margin-bottom:52px}
.sec-head h2{font-size:clamp(32px,5vw,58px);margin-top:16px}
.sec-head p{margin-top:18px;color:var(--muted-dark);font-size:16.5px;line-height:1.66}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
/* Homepage animates .reveal via GSAP/ScrollTrigger directly (gsap-home.js) —
   drop the CSS transition there so it isn't fighting GSAP's own tween. */
body.tpl-home .reveal{transition:none}

/* ---------------- collections (frames & sunglasses) ---------------- */
.coll{margin-bottom:84px}
.coll:last-child{margin-bottom:0}
.coll-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.coll-head .cname{font-size:clamp(30px,4.6vw,54px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.coll-head .cname i{font-style:normal;color:var(--cAccent,var(--ink))}
.coll-head .cmeta{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-dark)}
.strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;
  scrollbar-width:none;-ms-overflow-style:none}
.strip::-webkit-scrollbar{display:none}
.shot{flex:0 0 min(76vw,340px);scroll-snap-align:start;border-radius:16px;overflow:hidden;position:relative;
  aspect-ratio:3/4;border:1px solid var(--rule-dark)}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.shot:hover img{transform:scale(1.05)}
.shot .sl{position:absolute;left:14px;bottom:12px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.shot.tall{flex-basis:min(84vw,420px)}

/* ---------------- lenses — engineering treatment ---------------- */
.lab{background:var(--void-2);border-block:1px solid var(--rule-dark);overflow:hidden}
.lab .lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lab .cell{border:1px solid var(--rule-dark);border-radius:16px;overflow:hidden;background:var(--surface-1);position:relative;
  text-align:left;padding:0;display:block;width:100%;cursor:pointer;
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.lab .cell:hover{transform:translateY(-5px);border-color:var(--sky)}
.lab .cell video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.92}
.lab .cell .ci{padding:18px 20px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.lab .cell .cn{font-size:17px;font-weight:600;color:var(--ink)}
.lab .cell .cs{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.lab .cell .cell-cta{display:block;padding:0 20px 18px;font-size:13px;font-weight:600;color:var(--sky)}
.lab .idx{position:absolute;top:12px;left:14px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.2em;color:var(--ink);background:rgba(var(--void-rgb),.55);padding:4px 8px;border-radius:5px;backdrop-filter:blur(6px);z-index:1}

/* ---------------- MyoCare home section ---------------- */
.myo-home{background:linear-gradient(150deg,var(--deep-blue),var(--void) 70%);border-block:1px solid var(--rule-dark)}
.myo-home-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.myo-points{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.mp{border-left:2px solid var(--sky);padding-left:16px}
.mp b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.mp span{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted-dark)}
.myo-home-film{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--rule-dark);
  padding:0;cursor:pointer;display:block;background:var(--surface-1);
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.myo-home-film:hover{transform:translateY(-5px);border-color:var(--sky)}
.myo-home-film img{width:100%;display:block;opacity:.92}
.myo-home-film .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--ink)}
.myo-home-film .play::before{content:'';position:absolute;width:74px;height:74px;border-radius:50%;
  background:rgba(var(--void-rgb),.55);border:1px solid rgba(var(--ink-rgb),.5);backdrop-filter:blur(6px)}
@media(max-width:960px){.myo-home-grid{grid-template-columns:1fr}}
@media(max-width:960px){.lab .lab-grid{grid-template-columns:1fr}}

/* ---------------- lifestyle mosaic (parallax) ---------------- */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.mo{border-radius:16px;overflow:hidden;border:1px solid var(--rule-dark);position:relative}
.mo img{width:100%;height:100%;object-fit:cover}
.mo .pm{will-change:transform;height:116%;margin-top:-8%}
.mo1{grid-column:1/6;aspect-ratio:3/4}
.mo2{grid-column:6/13;aspect-ratio:4/3;margin-top:64px}
.mo3{grid-column:1/8;aspect-ratio:4/3;margin-top:-40px}
.mo4{grid-column:8/13;aspect-ratio:3/4;margin-top:40px}
@media(max-width:820px){.mo1,.mo2,.mo3,.mo4{grid-column:1/13;margin-top:0!important;aspect-ratio:3/4}}

/* ---------------- vision & mission ---------------- */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vm-card{position:relative;border:1px solid var(--rule-dark);border-radius:20px;padding:44px 40px;overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.015))}
.vm-card::before{content:'';position:absolute;left:50%;bottom:-58%;width:130%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;border:1.5px solid rgba(143,193,255,.20);pointer-events:none}
.vm-card::after{content:'';position:absolute;left:50%;bottom:-66%;width:150%;aspect-ratio:1;transform:translateX(-50%);
  border-radius:50%;border:1.5px solid rgba(107,91,210,.16);pointer-events:none}
.vm-card .vlabel{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sky)}
.vm-card h3{font-size:clamp(22px,2.6vw,30px);margin-top:16px;line-height:1.28;letter-spacing:-.02em}
.vm-card p{margin-top:16px;font-size:15px;line-height:1.7;color:var(--muted-dark)}
@media(max-width:860px){.vm{grid-template-columns:1fr}}

/* ---------------- banner post ---------------- */
.post{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--rule-dark);
  min-height:440px;display:flex;align-items:flex-end}
.post .post-media{position:absolute;inset:-10% 0;will-change:transform}
.post .post-media img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.post .post-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--void-rgb),.85) 22%,rgba(var(--void-rgb),.2) 70%)}
.post .post-body{position:relative;z-index:1;padding:44px 40px;max-width:560px}
.post h3{font-size:clamp(24px,3.4vw,38px);line-height:1.14}
.post p{margin-top:14px;font-size:15px;line-height:1.66;color:var(--on-dark)}
.post .btn{margin-top:24px}

/* ---------------- per-design sections ---------------- */
.dsec{padding:100px 0}
.dsec-line{border-top:1px solid var(--rule-dark)}
.dhead{margin-bottom:38px;position:relative}
.dhead .dno{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;color:var(--muted-dark);display:block;margin-bottom:14px}
.dhead .dname{font-size:clamp(38px,6.4vw,76px);font-weight:800;letter-spacing:-.035em;text-transform:uppercase;margin-top:10px}
.dgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:start}
.dgrid.flip>div:first-child{order:2}
.dlead{font-size:17px;line-height:1.7;color:var(--on-dark)}
.dpoints{margin-top:26px;display:flex;flex-direction:column;gap:16px}
.dp{border-left:2px solid var(--sky);padding-left:16px}
.dp b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.dp span{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--muted-dark)}
.dnote{margin-top:12px;font-size:12.5px;color:var(--muted-dark)}
.dstage{display:flex;flex-direction:column;gap:14px}
.ddiag{width:100%;height:auto;background:radial-gradient(70% 70% at 50% 42%,rgba(46,124,214,.22),transparent 72%);
  border:1px solid var(--rule-dark);border-radius:18px;padding:20px}
.dlab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;fill:var(--ink)}
.dlab2{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;fill:rgba(var(--ink-rgb),.68)}
.dnum{font-family:'JetBrains Mono',monospace;font-size:13px;fill:#EFC066}
.dcap{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.14em;fill:rgba(var(--ink-rgb),.5)}
.dfilm{border-radius:18px;overflow:hidden;border:1px solid var(--rule-dark);background:var(--surface-1)}
.dfilm video{width:100%;display:block}
.design-list.compact .design-btn .dd{display:none}
.design-list.compact .design-btn .coat-row{display:none}
.design-list.compact .design-btn{padding:14px 18px}
@media(max-width:960px){.dgrid{grid-template-columns:1fr;gap:34px}.dgrid.flip>div:first-child{order:0}}

/* ---------------- 3D scroll flythrough (Hero → Collections → Lab) ---------------- */
/* z-index:2 sits above .floaters (0) but below nav (80); placed early in the
   DOM (front-page.php, before <header class="hero">) so normal in-flow page
   content painting after it still stacks visually on top — see gsap-3d.js. */
#spinel3d{position:fixed;inset:0;z-index:2;pointer-events:none}
@media(max-width:860px){#spinel3d{display:none}}

/* ---------------- floating background eyewear ---------------- */
.floaters{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform}
.o1{width:52vw;height:52vw;left:-14%;top:-12%;background:radial-gradient(closest-side,rgba(46,124,214,.34),transparent 70%);animation:orbA 46s var(--ease) infinite alternate}
.o2{width:44vw;height:44vw;right:-12%;top:34%;background:radial-gradient(closest-side,rgba(107,91,210,.30),transparent 70%);animation:orbB 58s var(--ease) infinite alternate}
.o3{width:36vw;height:36vw;left:26%;bottom:-16%;background:radial-gradient(closest-side,rgba(212,120,200,.16),transparent 70%);animation:orbA 64s var(--ease) infinite alternate-reverse}
@keyframes orbA{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,7vh) scale(1.22)}}
@keyframes orbB{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vw,-6vh) scale(.92)}}
.fl-wrap{position:absolute;will-change:transform}
.fl1{width:min(52vw,560px);left:-8%;top:16%}
.fl2{width:min(44vw,470px);right:-7%;top:52%}
.fl3{width:min(34vw,360px);left:30%;top:88%}
.drifter{width:100%;opacity:.07;stroke:#8FC1FF;fill:none;stroke-width:2;display:block}
.d1{animation:selfFloat 13s var(--ease) infinite alternate}
.d2{animation:selfFloat 17s var(--ease) infinite alternate-reverse}
.d3{animation:selfFloat 11s var(--ease) infinite alternate}
@keyframes selfFloat{from{transform:translateY(-14px) rotate(-2.5deg)}to{transform:translateY(14px) rotate(2.5deg)}}

/* ---------------- ratings, aspheric table, shell ---------------- */
.drating{margin-top:22px;display:flex;flex-direction:column;gap:9px;border:1px solid var(--rule-dark);border-radius:14px;padding:18px 20px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.045),rgba(var(--ink-rgb),.01))}
.dr{display:flex;align-items:center;gap:14px}
.drl{width:104px;font-size:13px;color:var(--on-dark)}
.drd{display:flex;gap:5px}
.drd i{width:10px;height:10px;border-radius:50%;background:rgba(var(--ink-rgb),.14);display:block}
.drd i.on{background:var(--sky)}
.drn{font-size:11px;color:var(--muted-dark);margin-left:auto}
.asp-table{margin-top:24px;border:1px solid var(--rule-dark);border-radius:14px;overflow:hidden}
.at-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8px;padding:11px 16px;font-size:13.5px;border-top:1px solid var(--rule-dark)}
.at-row:first-child{border-top:0}
.at-head{background:rgba(var(--ink-rgb),.05);font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.at-x{color:var(--muted-dark)}
.at-c{color:#7CE3B1;font-weight:500}
.shell-box{border:1px solid var(--rule-dark);border-radius:20px;padding:22px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.shell-tabs{display:flex;gap:6px;margin-bottom:12px}
.shell-box .ddiag{border:0;background:radial-gradient(70% 70% at 58% 50%,rgba(46,124,214,.18),transparent 74%);padding:8px}
.shell-mode{transition:opacity .55s var(--ease)}
#shellArc{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.shell-note{margin-top:10px;font-size:13px;color:var(--muted-dark);line-height:1.6}

/* ---------------- ring diagram (Correct / Control) ---------------- */
.ringbox{border:1px solid var(--rule-dark);border-radius:20px;padding:26px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.ring-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:22px;align-items:center}
.ring-stage svg{width:100%;height:auto;display:block}
.ring-call{text-align:left;border:1px solid var(--rule-dark);border-radius:14px;padding:18px;cursor:pointer;
  background:rgba(var(--ink-rgb),.03);transition:border-color .3s var(--ease),background .3s var(--ease)}
.ring-call:hover{background:rgba(var(--ink-rgb),.07)}
.ring-call.on{border-color:var(--sky);background:rgba(46,124,214,.18)}
.ring-call b{display:block;font-size:17px;font-weight:700;color:var(--ink)}
.ring-call span{display:block;margin-top:8px;font-size:13.5px;line-height:1.6;color:var(--muted-dark)}
#zCorrect,#zControl{transition:opacity .4s var(--ease),filter .4s var(--ease)}
#ringSvg.hl-correct #zControl{opacity:.22}
#ringSvg.hl-correct #zCorrect{filter:drop-shadow(0 0 14px rgba(var(--ink-rgb),.8))}
#ringSvg.hl-control #zCorrect{opacity:.25}
#ringSvg.hl-control #zControl{filter:drop-shadow(0 0 10px rgba(143,193,255,.9))}
@media(max-width:900px){.ring-grid{grid-template-columns:1fr}.ring-stage{order:-1}}

/* ---------------- through-the-lens slider ---------------- */
.vs-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:26px}
.vs-cap{margin-top:14px;font-size:14px;line-height:1.6;color:var(--muted-dark);max-width:640px}
.vslide{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--rule-dark);
  aspect-ratio:16/9;max-height:560px;cursor:ew-resize;touch-action:none;user-select:none;margin-top:34px}
.vslide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.vs-zones{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vs-over{position:absolute;inset:0;width:50%;overflow:hidden;pointer-events:none}
.vs-over img{width:auto;height:100%;filter:blur(5px) saturate(.75) brightness(.9)}
.vs-over::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(var(--ink-rgb),.10) 0 2px,transparent 2px 7px);
  mask-image:linear-gradient(90deg,#000 0 62%,transparent 92%);-webkit-mask-image:linear-gradient(90deg,#000 0 62%,transparent 92%)}
.vs-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--ink);pointer-events:none}
.vs-handle span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(var(--void-rgb),.6);border:1.5px solid var(--ink);
  backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:13px;letter-spacing:.06em}
.vs-tag{position:absolute;bottom:14px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);background:rgba(var(--void-rgb),.6);padding:6px 10px;border-radius:6px;backdrop-filter:blur(6px)}
.vs-tag.left{left:14px}.vs-tag.right{right:14px}

.banner.short{min-height:64svh}
.banner.short h1{font-size:clamp(36px,5.6vw,72px)}

/* ---------------- social + instagram + sterling ---------------- */
.soc-row{display:flex;gap:10px}
.soc{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule-dark);display:flex;align-items:center;justify-content:center;
  color:var(--on-dark);transition:color .25s,border-color .25s,transform .25s var(--ease)}
.soc svg{width:19px;height:19px}
.soc:hover{color:var(--sky);border-color:var(--sky);transform:translateY(-2px)}
.soc.off{opacity:.45;cursor:default}
.soc.off:hover{transform:none;color:var(--on-dark);border-color:var(--rule-dark)}
.ig{border:1px solid var(--rule-dark);border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.ig-head{display:flex;align-items:center;gap:18px;padding:24px 26px;flex-wrap:wrap}
.ig-ava{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,#2E7CD6,#0A1C3C);border:1.5px solid rgba(var(--ink-rgb),.4);flex:0 0 auto}
.ig-ava .mark{height:9px}
.ig-handle{font-size:17px;font-weight:700;color:var(--ink)}
.ig-bio{font-size:13px;color:var(--muted-dark);margin-top:4px}
.ig-follow{margin-left:auto;padding:11px 26px}
.ig-follow.off{opacity:.5;pointer-events:none}
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.ig-cell{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.ig-cell:hover img{transform:scale(1.07)}
.ig-cell .ig-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(var(--void-rgb),.45);color:var(--ink);font-size:20px;opacity:0;transition:opacity .3s}
.ig-cell:hover .ig-ov{opacity:1}
@media(max-width:820px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
.sterling-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center;
  border:1px solid var(--rule-dark);border-radius:20px;padding:44px 40px;margin-bottom:16px;
  background:radial-gradient(70% 90% at 30% 50%,rgba(46,124,214,.14),transparent 70%)}
.sterling-art{width:100%;height:auto}
.sterling-media{border-radius:16px;overflow:hidden;border:1px solid var(--rule-dark)}
.sterling-media img,.sterling-media video{position:static;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sterling-art .draw path{stroke-dasharray:900;stroke-dashoffset:900}
.reveal.in .sterling-art .draw path{animation:drawline 2.2s var(--ease) forwards}
.reveal.in .sterling-art .draw path:nth-child(2){animation-delay:.25s}
.reveal.in .sterling-art .draw path:nth-child(3){animation-delay:.5s}
.reveal.in .sterling-art .draw path:nth-child(4){animation-delay:.7s}
@keyframes drawline{to{stroke-dashoffset:0}}
.glaze{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule-dark);border-radius:20px;overflow:hidden}
.glaze-film video{width:100%;height:100%;object-fit:cover;display:block}
.glaze-copy{padding:40px 38px;background:linear-gradient(160deg,rgba(var(--ink-rgb),.045),rgba(var(--ink-rgb),.01))}
@media(max-width:900px){.sterling-hero,.glaze{grid-template-columns:1fr}}

.pcard.linky{cursor:pointer}
.pd-back{font-size:14px;font-weight:600;color:var(--muted-dark);margin-bottom:26px;transition:color .25s;display:inline-block}
.pd-back:hover{color:var(--sky)}
.pd-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.pd-main{aspect-ratio:4/4.4;border-radius:20px;overflow:hidden;border:1px solid var(--rule-dark);
  background:linear-gradient(160deg,var(--surface-4),var(--surface-2));display:flex;align-items:center;justify-content:center}
.pd-main img{width:100%;height:100%;object-fit:cover}
.pd-thumbs{display:flex;gap:10px;margin-top:12px}
.pd-th{width:84px;height:84px;border-radius:12px;overflow:hidden;border:1.5px solid var(--rule-dark);padding:0;cursor:pointer;
  transition:border-color .25s,transform .25s var(--ease)}
.pd-th:hover{transform:translateY(-2px)}
.pd-th.on{border-color:var(--sky)}
.pd-th img{width:100%;height:100%;object-fit:cover;display:block}
.pd-name{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.035em;margin-top:12px}
.pd-meta{margin-top:8px;font-size:15px;color:var(--muted-dark)}
.pd-price{margin-top:16px;font-size:16px;color:var(--sky)}
.pd-desc{margin-top:20px;font-size:15.5px;line-height:1.7;color:var(--on-dark);max-width:520px}
.pd-note{margin-top:24px;border:1px solid var(--rule-dark);border-radius:14px;padding:18px 20px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.pd-note b{font-size:13.5px;color:var(--ink)}
.pd-note p{margin-top:6px;font-size:13.5px;line-height:1.62;color:var(--muted-dark)}
@media(max-width:920px){.pd-grid{grid-template-columns:1fr;gap:30px}}
.who{display:grid;grid-template-columns:.95fr 1.05fr;gap:52px;align-items:center}
.who-img{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--rule-dark);aspect-ratio:4/5;max-height:520px}
.who-img .pm{height:112%;margin-top:-6%}
.who-img img{width:100%;height:100%;object-fit:cover}
.who-chip{position:absolute;left:14px;top:14px}
@media(max-width:920px){.who{grid-template-columns:1fr}.who-img{aspect-ratio:16/10;max-height:340px}}
.cust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ccard{border:1px solid var(--rule-dark);border-radius:16px;overflow:hidden;background:var(--void-2);
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.ccard:hover{transform:translateY(-5px);border-color:rgba(143,193,255,.4)}
.ccard-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.ccard-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ccard:hover .ccard-img img{transform:scale(1.06)}
.ccard-ic{position:absolute;left:12px;bottom:10px;width:34px;height:34px;border-radius:50%;
  background:rgba(var(--void-rgb),.65);border:1px solid rgba(var(--ink-rgb),.4);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;color:var(--sky);font-size:15px}
.ccard-b{padding:18px 20px 20px}
.ccard-b b{display:block;font-size:15.5px;font-weight:600;color:var(--ink)}
.ccard-b p{margin-top:8px;font-size:13.5px;line-height:1.62;color:var(--muted-dark)}
@media(max-width:1000px){.cust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cust-grid{grid-template-columns:1fr}}
.qstrip .qcard{flex:0 0 min(82vw,420px);scroll-snap-align:start;position:relative;
  border:1px solid var(--rule-dark);border-radius:18px;padding:28px;padding-top:46px;
  background:linear-gradient(160deg,rgba(46,124,214,.12),rgba(var(--ink-rgb),.02))}
.qmark{position:absolute;right:20px;top:2px;font-size:88px;font-weight:800;color:rgba(143,193,255,.16);line-height:1;pointer-events:none}
.qcard h4{font-size:16px;font-weight:600;color:var(--ink)}
.qcard p{margin-top:10px;font-size:15px;line-height:1.68;color:var(--on-dark);font-style:italic}
.brand{position:relative;overflow:hidden;padding:120px 0;border-block:1px solid var(--rule-dark)}
.brand-media{position:absolute;inset:-12% 0;will-change:transform}
.brand-media img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.brand-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--void-rgb),.92) 30%,rgba(var(--void-rgb),.55) 70%,rgba(var(--void-rgb),.35))}
.brand-in{position:relative;z-index:1}
.brand-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.bcard{border:1px solid rgba(var(--ink-rgb),.22);border-radius:16px;padding:24px;
  background:rgba(var(--void-rgb),.5);backdrop-filter:blur(10px)}
.bcard h3{font-size:17px;line-height:1.4;margin-top:10px;letter-spacing:-.01em}
.bcard.story-b{position:relative;padding-top:40px}
.bcard.story-b p{font-style:italic;font-size:14.5px;line-height:1.6;color:var(--on-dark)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.chip{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 13px;border-radius:100px;border:1px solid rgba(var(--ink-rgb),.3);color:var(--ink);background:rgba(var(--void-rgb),.4);backdrop-filter:blur(8px)}
@media(max-width:900px){.brand-cards{grid-template-columns:1fr}}
.feat.pol a{color:var(--sky)}
.feat.pol a:hover{text-decoration:underline}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.story{position:relative;border:1px solid var(--rule-dark);border-radius:18px;padding:26px;padding-top:44px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.045),rgba(var(--ink-rgb),.01))}
.story-badge{position:absolute;top:12px;left:14px;font-size:8.5px;letter-spacing:.1em;color:var(--amber);
  border:1px dashed rgba(239,192,102,.5);border-radius:5px;padding:3px 7px}
.story h4{font-size:16px;font-weight:600;color:var(--ink)}
.story p{margin-top:10px;font-size:14.5px;line-height:1.66;color:var(--on-dark);font-style:italic}
.story-who{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
@media(max-width:860px){.stories{grid-template-columns:1fr}}
.contact-strip{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  border:1px solid var(--rule-dark);border-radius:20px;padding:34px 36px;
  background:linear-gradient(150deg,rgba(46,124,214,.16),rgba(var(--ink-rgb),.02))}
.c-lines{margin-top:12px;font-size:13px;line-height:1.9;color:var(--on-dark)}
.soc-row.big .soc{width:46px;height:46px}

.mark-img{height:15px;width:auto;display:block}
.mark-img.lg{height:26px}
.tick-logo{height:13px;width:auto;display:inline-block;vertical-align:middle;opacity:.85}
.cue-arrow{display:inline-block;font-size:15px;color:var(--ink);animation:bob 1.5s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(-6px);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.pol{border:1px solid var(--rule-dark);border-radius:16px;padding:26px 28px;margin-bottom:14px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
/* paragraph alignment normalisation */
.dlead,.sec-head p,.banner p,.vm-card p,.feat p,.dp span,.mp span,.ms p,.mf p,.story p,.notice p{text-align:left}
.dlead{max-width:620px}
.sec-head p{max-width:640px}

/* ---------------- notice ---------------- */
.notice{border:1px solid var(--rule-dark);border-left:3px solid var(--amber);background:rgba(239,192,102,.07);
  border-radius:12px;padding:20px 24px}
.notice h4{font-size:15px;font-weight:600;color:var(--ink)}
.notice p{font-size:14px;color:var(--muted-dark);line-height:1.62;margin-top:8px}

/* shop/lens page styles */
.banner{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden}
.banner video,.banner .bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--void-rgb),.5) 0%,rgba(var(--void-rgb),.15) 40%,rgba(var(--void-rgb),.92) 100%)}
.banner-in{position:relative;z-index:2;width:100%;padding:130px 0 66px}
.banner h1{font-size:clamp(40px,7vw,96px);font-weight:800;letter-spacing:-.045em;margin-top:18px;
  text-shadow:0 2px 44px rgba(0,0,0,.5)}
.banner h1 .thin{font-weight:300;color:var(--sky)}
.banner p{margin-top:24px;max-width:530px;font-size:17px;line-height:1.62;color:var(--on-dark)}
.banner-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.model-slot{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(80% 60% at 76% 20%,rgba(46,124,214,.14),transparent 60%),
    radial-gradient(60% 50% at 14% 88%,rgba(107,91,210,.10),transparent 60%),
    linear-gradient(165deg,var(--surface-2),var(--void))}
.model-slot .tag{position:absolute;right:26px;top:96px;text-align:right}
.model-slot .tag b{display:block;font-size:13px;font-weight:600;color:var(--muted-dark)}
.model-slot .tag code{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--amber)}
.silhouette{width:min(46vw,430px);opacity:.5}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{border:1px solid var(--rule-dark);border-radius:16px;overflow:hidden;background:var(--void-2);
  transition:transform .35s var(--ease),border-color .35s var(--ease)}
.pcard:hover{transform:translateY(-5px);border-color:rgba(143,193,255,.4)}
.pcard .ph{position:relative;aspect-ratio:1;background:
  radial-gradient(80% 80% at 50% 30%,rgba(46,124,214,.18),transparent 70%),linear-gradient(160deg,var(--surface-4),var(--surface-2));
  display:flex;align-items:center;justify-content:center}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .badge{position:absolute;left:12px;top:12px;font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:100px;background:var(--ink);color:var(--void);z-index:1}
.ph-empty{display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--muted-dark)}
.ph-empty .ic{width:32px;height:32px;border-radius:50%;border:1.5px dashed var(--muted-dark);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.ph-empty code{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amber)}
.pcard .pb{padding:16px 18px 18px}
.pcard .pn{font-size:15px;font-weight:600;color:var(--ink)}
.pcard .pm{font-size:12.5px;color:var(--muted-dark);margin-top:5px}
.pcard .pp{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--sky);margin-top:9px}
.sec-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.sec-row .sec-head{margin-bottom:0}
@media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr 1fr;gap:10px}}
.cor-layout{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.stage-tabs{display:flex;gap:6px;margin-bottom:14px}
.stab{font-size:12px;font-weight:600;padding:8px 16px;border-radius:100px;color:var(--muted-dark);
  border:1px solid var(--rule-dark);transition:background .25s,color .25s,border-color .25s}
.stab:hover{color:var(--ink);background:rgba(var(--ink-rgb),.08)}
.stab.on{background:var(--ink);color:var(--void);border-color:var(--ink)}
.cor-stage{background:radial-gradient(70% 70% at 50% 40%,rgba(46,124,214,.30),transparent 70%);border-radius:20px;padding:22px}
.cor-stage svg{width:100%;height:auto;display:block}
.film-stage{padding:0;overflow:hidden;background:var(--surface-1);position:relative;min-height:200px;
  display:flex;align-items:center;justify-content:center;border-radius:20px}
.film-stage video{width:100%;height:auto;display:block;border-radius:20px}
.no-film{padding:60px 24px;text-align:center;color:var(--muted-dark);font-size:14px}
.zone-label{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;fill:rgba(var(--ink-rgb),.93)}
.design-list{display:flex;flex-direction:column;gap:10px}
.design-btn{width:100%;text-align:left;padding:19px 22px;border-radius:14px;border:1px solid var(--rule-dark);
  background:rgba(var(--ink-rgb),.04);transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.design-btn:hover{background:rgba(var(--ink-rgb),.09);transform:translateX(4px)}
.design-btn.active{background:rgba(46,124,214,.24);border-color:var(--sky)}
.design-btn .dn{font-size:18px;font-weight:600;letter-spacing:-.02em;display:block;color:var(--ink)}
.design-btn .dd{font-size:13.5px;color:var(--muted-dark);margin-top:7px;line-height:1.55;display:block}
.coat-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.coat{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;background:rgba(var(--ink-rgb),.10);color:var(--on-dark)}
.spec-strip{display:flex;gap:32px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--rule-dark)}
.spec .sv{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:500;color:var(--ink)}
.spec .sv.pending{color:var(--amber)}
.spec .sl{font-size:10.5px;color:var(--muted-dark);letter-spacing:.13em;text-transform:uppercase;margin-top:6px}
@media(max-width:960px){.cor-layout{grid-template-columns:1fr;gap:38px}}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 60px}
.feat .fic{color:var(--sky);margin-bottom:12px}
.feat b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.feat p{margin-top:8px;font-size:14.5px;line-height:1.64;color:var(--muted-dark)}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr}}
.myo-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.myo-steps{display:flex;flex-direction:column;gap:26px}
.ms{position:relative;padding-left:52px}
.ms .msn{position:absolute;left:0;top:2px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sky);
  border:1px solid var(--rule-dark);border-radius:8px;padding:5px 8px}
.ms b{display:block;font-size:16px;font-weight:600;color:var(--ink)}
.ms p{margin-top:6px;font-size:14.5px;line-height:1.64;color:var(--muted-dark)}
.myo-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.mf{border:1px solid var(--rule-dark);border-radius:16px;padding:24px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.045),rgba(var(--ink-rgb),.01))}
.mf b{display:block;font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
.mf p{margin-top:10px;font-size:14px;line-height:1.64;color:var(--muted-dark)}
@media(max-width:860px){.myo-faq{grid-template-columns:1fr}}
.myo-film{border-radius:18px;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.55);background:var(--surface-1)}
.myo-film video{width:100%;height:auto;display:block}
@media(max-width:960px){.myo-layout{grid-template-columns:1fr}}

footer.site-footer{border-top:1px solid var(--rule-dark);padding:68px 0 36px;background:rgba(var(--void-rgb),.6)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.foot-grid h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-dark);margin-bottom:14px;font-weight:600}
.foot-grid a,.foot-grid button{display:block;font-size:14px;color:var(--on-dark);padding:5px 0;transition:color .2s;text-align:left}
.foot-grid a:hover,.foot-grid button:hover{color:var(--sky)}
.foot-bot{margin-top:50px;padding-top:24px;border-top:1px solid var(--rule-dark);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-dark)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.nav-links a{padding:9px 12px;font-size:13px}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  [data-para]{transform:none!important}
}

/* ---------------- nav right cluster (menu + account + cart), always right-aligned ---------------- */
.nav-right{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%;color:var(--ink)}
.nav-toggle svg{width:20px;height:20px}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed;top:72px;left:0;right:0;bottom:0;flex-direction:column;gap:2px;padding:18px 24px;
    background:rgba(var(--void-rgb),.98);backdrop-filter:blur(18px);transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
  .nav-links.open{transform:translateY(0);opacity:1;visibility:visible}
  .nav-links a{padding:16px 6px;font-size:17px;border-bottom:1px solid var(--rule-dark);border-radius:0}
  .nav-links a.on{background:none;color:var(--sky)}
}

/* ---------------- nav icons (search / account / cart) ---------------- */
.nav-icon{position:relative;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--nav-fg);transition:color .25s,background .25s;flex:0 0 auto;background:none;border:0;cursor:pointer;font-family:inherit}
.nav-icon:hover{color:var(--ink);background:rgba(var(--ink-rgb),.12)}
.nav-icon svg{width:20px;height:20px}

.nav-search{position:relative}
.nav-search-panel{position:absolute;top:calc(100% + 12px);right:0;width:min(320px,88vw);
  border:1px solid var(--rule-dark);border-radius:16px;padding:10px;
  background:rgba(var(--void-rgb),.97);backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav-search-panel.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.spinel-search-form{display:flex;align-items:center;gap:6px}
.spinel-search-input{flex:1;padding:11px 14px;border-radius:100px;border:1px solid var(--rule-dark);
  background:rgba(var(--ink-rgb),.04);color:var(--ink);font-family:inherit;font-size:14px}
.spinel-search-input:focus{outline:none;border-color:var(--sky);background:rgba(var(--ink-rgb),.07)}
.spinel-search-input::placeholder{color:var(--muted-dark);opacity:.8}
.spinel-search-submit{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--void);transition:background .25s}
.spinel-search-submit:hover{background:var(--sky)}
.spinel-search-submit svg{width:17px;height:17px}
@media(max-width:760px){.nav-search-panel{position:fixed;top:72px;left:14px;right:14px;width:auto}}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =====================================================================
   WOOCOMMERCE
   ===================================================================== */

/* ---------------- cart badge (.nav-icon itself is defined sitewide, above) ---------------- */
.nav-cart-count{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;
  background:var(--sky);color:var(--void);font-size:10px;font-weight:700;line-height:16px;text-align:center;
  font-family:'JetBrains Mono',monospace}
.nav-cart-count:empty{display:none}

/* ---------------- mini-cart drawer ---------------- */
.mini-cart-backdrop{position:fixed;inset:0;z-index:290;background:rgba(4,6,10,.6);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.mini-cart-backdrop.open{opacity:1;visibility:visible}
.mini-cart{position:fixed;top:0;right:0;bottom:0;z-index:300;width:min(420px,92vw);
  background:rgba(var(--void-rgb),.97);backdrop-filter:blur(20px) saturate(140%);
  border-left:1px solid var(--rule-dark);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.mini-cart.open{transform:translateX(0)}
.mini-cart-head{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 18px;
  border-bottom:1px solid var(--rule-dark);flex:0 0 auto}
.mini-cart-close{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted-dark);transition:color .2s,background .2s}
.mini-cart-close:hover{color:var(--ink);background:rgba(var(--ink-rgb),.1)}
.mini-cart-inner{flex:1;overflow-y:auto;padding:22px 24px}

.mini-cart-inner ul.woocommerce-mini-cart{list-style:none;display:flex;flex-direction:column;gap:16px}
.mini-cart-inner .woocommerce-mini-cart-item{position:relative;display:grid;grid-template-columns:60px 1fr 26px;
  gap:14px;align-items:start;padding-bottom:16px;border-bottom:1px solid var(--rule-dark)}
.mini-cart-inner .woocommerce-mini-cart-item:last-child{border-bottom:0;padding-bottom:0}
.mini-cart-inner .woocommerce-mini-cart-item img{width:60px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--rule-dark)}
.mini-cart-inner .woocommerce-mini-cart-item a:not(.remove){color:var(--ink);font-weight:600;font-size:14px;display:block;line-height:1.35}
.mini-cart-inner .woocommerce-mini-cart-item a:not(.remove):hover{color:var(--sky)}
.mini-cart-inner .woocommerce-mini-cart-item .quantity{margin-top:6px;font-size:12.5px;color:var(--muted-dark);
  font-family:'JetBrains Mono',monospace;display:block}
.mini-cart-inner .woocommerce-mini-cart-item a.remove{width:26px;height:26px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;border:1px solid var(--rule-dark);color:var(--muted-dark)!important;
  font-size:15px;line-height:1;text-decoration:none!important;transition:color .2s,border-color .2s}
.mini-cart-inner .woocommerce-mini-cart-item a.remove:hover{color:#E37B7B!important;border-color:#E37B7B}
.woocommerce-mini-cart__empty-message{text-align:center;color:var(--muted-dark);font-size:14px;padding:80px 10px 0}
.woocommerce-mini-cart__total{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule-dark);
  display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted-dark);font-weight:500}
.woocommerce-mini-cart__total .woocommerce-Price-amount{font-size:18px;color:var(--ink);font-weight:700}
.woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mini-cart-inner .button.wc-forward{display:block;text-align:center;padding:14px 20px;border-radius:100px;
  font-size:14px;font-weight:600;background:rgba(var(--ink-rgb),.1);color:var(--ink);border:1px solid rgba(var(--ink-rgb),.25);
  transition:transform .3s var(--ease),background .3s var(--ease)}
.mini-cart-inner .button.wc-forward:hover{background:rgba(var(--ink-rgb),.18);transform:translateY(-2px)}
.mini-cart-inner .button.wc-forward.checkout{background:var(--ink);color:var(--void);border-color:var(--ink)}
.mini-cart-inner .button.wc-forward.checkout:hover{background:var(--sky)}

/* ---------------- "added to cart" toast — futuristic, matches the loader/hero glow language ---------------- */
.spinel-toasts{position:fixed;top:90px;right:24px;z-index:400;display:flex;flex-direction:column;gap:12px;
  width:min(360px,90vw);pointer-events:none}
.spinel-toast{position:relative;overflow:hidden;pointer-events:auto;display:flex;gap:14px;align-items:flex-start;
  padding:16px 18px;border-radius:16px;border:1px solid var(--rule-dark);border-left:3px solid var(--sky);
  background:linear-gradient(160deg,rgba(14,18,32,.92),rgba(var(--void-rgb),.96));
  backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(143,193,255,.06),0 0 30px -6px rgba(143,193,255,.35);
  transform:translateX(120%) scale(.96);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.spinel-toast.in{transform:translateX(0) scale(1);opacity:1}
.spinel-toast.out{transform:translateX(30px) scale(.97);opacity:0}
.spinel-toast::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(143,193,255,.9),transparent);
  background-size:200% 100%;animation:toastScan 2.6s linear infinite}
@keyframes toastScan{from{background-position:200% 0}to{background-position:-200% 0}}
.spinel-toast-thumb{width:52px;height:52px;border-radius:10px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--rule-dark);background:var(--surface-2)}
.spinel-toast-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.spinel-toast-body{flex:1;min-width:0}
.spinel-toast-eyebrow{display:flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sky)}
.spinel-toast-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--sky);display:block;
  box-shadow:0 0 8px 1px rgba(143,193,255,.8);animation:toastPulse 1.4s var(--ease) infinite}
@keyframes toastPulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.spinel-toast-name{margin-top:5px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.spinel-toast-link{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;color:var(--sky)}
.spinel-toast-link:hover{text-decoration:underline}
.spinel-toast-close{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--muted-dark);transition:color .2s,background .2s;background:none;border:0}
.spinel-toast-close:hover{color:var(--ink);background:rgba(var(--ink-rgb),.1)}
.spinel-toast-close svg{width:13px;height:13px}
.spinel-toast-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--sky);
  box-shadow:0 0 8px 1px rgba(143,193,255,.6);width:100%;transform-origin:left;animation:toastDeplete 4.2s linear forwards}
@keyframes toastDeplete{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:600px){.spinel-toasts{left:14px;right:14px;width:auto;top:80px}}

/* Error / notice variants — server-rendered toasts carry data-type (inc/woocommerce.php) */
.spinel-toast[data-type="error"]{border-left-color:#E37B7B;
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(227,123,123,.06),0 0 30px -6px rgba(227,123,123,.35)}
.spinel-toast[data-type="error"]::before{background:linear-gradient(90deg,transparent,rgba(227,123,123,.9),transparent);background-size:200% 100%}
.spinel-toast[data-type="error"] .spinel-toast-eyebrow{color:#E37B7B}
.spinel-toast[data-type="error"] .spinel-toast-eyebrow i{background:#E37B7B;box-shadow:0 0 8px 1px rgba(227,123,123,.8)}
.spinel-toast[data-type="error"] .spinel-toast-bar{background:#E37B7B;box-shadow:0 0 8px 1px rgba(227,123,123,.6)}

/* ---------------- shared form controls (cart / checkout / my account) ---------------- */
.woocommerce input[type=text],.woocommerce input[type=email],.woocommerce input[type=tel],
.woocommerce input[type=password],.woocommerce input[type=number],.woocommerce input[type=search],
.woocommerce select,.woocommerce textarea,
.woo-page input[type=text],.woo-page input[type=email],.woo-page input[type=tel],
.woo-page input[type=password],.woo-page input[type=number],.woo-page select,.woo-page textarea{
  width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--rule-dark);
  background:rgba(var(--ink-rgb),.04);color:var(--ink);font-family:inherit;font-size:14.5px;transition:border-color .2s,background .2s}
.woocommerce input:focus,.woocommerce select:focus,.woocommerce textarea:focus,
.woo-page input:focus,.woo-page select:focus,.woo-page textarea:focus{
  outline:none;border-color:var(--sky);background:rgba(var(--ink-rgb),.07)}
.woocommerce select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398A3B8' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.woocommerce label,.woo-page label{display:block;font-size:12.5px;font-weight:600;letter-spacing:.04em;
  color:var(--muted-dark);margin-bottom:7px}
.woocommerce .form-row{margin-bottom:16px}
.woocommerce .form-row.woocommerce-invalid input{border-color:#E37B7B}
.woocommerce .form-row.woocommerce-invalid label{color:#E37B7B}
.woocommerce .required{color:var(--sky);text-decoration:none}
.woocommerce ::placeholder,.woo-page ::placeholder{color:var(--muted-dark);opacity:.7}
.woocommerce input[readonly],.woocommerce input:disabled,.woocommerce select:disabled{opacity:.5;cursor:not-allowed}

/* Chrome/Edge/Safari autofill paints its own light background over ours —
   force it transparent (long transition-delay trick) and keep our text colour. */
.woocommerce input:-webkit-autofill,.woo-page input:-webkit-autofill,
.woocommerce input:-webkit-autofill:hover,.woo-page input:-webkit-autofill:hover,
.woocommerce input:-webkit-autofill:focus,.woo-page input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 1000px var(--surface-5) inset;
  box-shadow:0 0 0 1000px var(--surface-5) inset;transition:background-color 9999s ease-in-out 0s}

/* Checkboxes / radios everywhere on WC forms (ship-to-different-address,
   create-account, payment method, terms) — not just the two spots we'd
   singled out before. */
.woocommerce input[type=checkbox],.woocommerce input[type=radio],
.woo-page input[type=checkbox],.woo-page input[type=radio]{
  width:16px;height:16px;accent-color:var(--sky);cursor:pointer}

/* Native <option> list — Firefox/Windows honour this; Chrome/macOS use the
   OS picker regardless, but this keeps what can be styled consistent. */
.woocommerce select option,.woo-page select option{background:var(--surface-3);color:var(--ink)}

/* Password-strength meter (checkout "create an account" / register forms) —
   keep its red/orange/green semantics, just fit the surrounding chrome. */
.woocommerce-password-strength{margin-top:8px;padding:9px 14px;border-radius:8px;font-size:12px;
  font-weight:600;text-align:center;border:1px solid var(--rule-dark);background:rgba(var(--ink-rgb),.03)}
.woocommerce-password-strength.strong{color:#7CE3B1;border-color:rgba(124,227,177,.4)}
.woocommerce-password-strength.good{color:var(--sky);border-color:rgba(143,193,255,.4)}
.woocommerce-password-strength.short,.woocommerce-password-strength.bad{color:#E37B7B;border-color:rgba(227,123,123,.4)}
.woocommerce-password-hint{margin-top:6px;font-size:12px;color:var(--muted-dark)}

/* ---------------- select2 (Country / State dropdowns) ---------------- */
.select2-container{width:100%!important}
.select2-container .select2-selection--single{height:auto!important;padding:13px 16px;border-radius:10px!important;
  border:1px solid var(--rule-dark)!important;background:rgba(var(--ink-rgb),.04)!important;transition:border-color .2s,background .2s}
.select2-container--open .select2-selection--single,.select2-container--focus .select2-selection--single{
  border-color:var(--sky)!important;background:rgba(var(--ink-rgb),.07)!important}
.select2-container .select2-selection__rendered{color:var(--ink)!important;line-height:1.4!important;padding:0!important;
  font-family:inherit;font-size:14.5px}
.select2-container .select2-selection__placeholder{color:var(--muted-dark)!important}
.select2-container .select2-selection__arrow{height:100%!important;right:12px!important}
.select2-container .select2-selection__arrow b{border-color:var(--muted-dark) transparent transparent transparent!important}
.select2-container--open .select2-selection__arrow b{border-color:transparent transparent var(--sky) transparent!important}
.select2-dropdown{background:var(--surface-3)!important;border:1px solid var(--rule-dark)!important;border-radius:12px!important;
  overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.select2-search--dropdown{padding:10px!important;background:var(--surface-3)!important}
.select2-search--dropdown .select2-search__field{background:rgba(var(--ink-rgb),.05)!important;border:1px solid var(--rule-dark)!important;
  border-radius:8px!important;color:var(--ink)!important;padding:9px 12px!important}
.select2-results__option{color:var(--on-dark)!important;padding:10px 14px!important;font-size:14px}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:rgba(46,124,214,.28)!important;color:var(--ink)!important}
.select2-results__option[aria-selected=true]{background:rgba(143,193,255,.14)!important;color:var(--ink)!important}
.select2-results__group{color:var(--muted-dark)!important;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase}
.select2-container .select2-search--inline .select2-search__field{color:var(--ink)!important}

/* ---------------- buttons WC renders itself ---------------- */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woo-page .button,.woo-page button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;border-radius:100px;font-size:14px;font-weight:600;
  background:var(--ink);color:var(--void);border:0;cursor:pointer;font-family:inherit;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woo-page .button:hover{background:var(--sky);transform:translateY(-2px);color:var(--void)}
.woocommerce .button.alt,.woocommerce #place_order,.woocommerce .checkout-button{width:100%}
.woocommerce a.remove{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;border:1px solid var(--rule-dark);color:var(--muted-dark)!important;font-size:16px;
  text-decoration:none!important;transition:color .2s,border-color .2s}
.woocommerce a.remove:hover{color:#E37B7B!important;border-color:#E37B7B}

/* ---------------- notices ---------------- */
.woocommerce-notices-wrapper{margin-bottom:24px}
.woocommerce-message,.woocommerce-error,.woocommerce-info,.woocommerce-noreviews{
  list-style:none;border:1px solid var(--rule-dark);border-left:3px solid var(--sky);border-radius:12px;
  padding:16px 20px;font-size:14px;color:var(--on-dark);background:rgba(143,193,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.woocommerce-error{border-left-color:#E37B7B;background:rgba(227,123,123,.07)}
.woocommerce-message .button,.woocommerce-error .button{padding:10px 20px;font-size:13px}
.woocommerce-error li,.woocommerce-message li{list-style:none}

/* ---------------- price / stock / rating ---------------- */
.woocommerce-Price-amount{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
del .woocommerce-Price-amount{color:var(--muted-dark);opacity:.6;text-decoration:line-through;font-weight:400}
ins{text-decoration:none}
.pp-pending{color:var(--amber);font-family:'JetBrains Mono',monospace}
.stock{margin-top:10px;font-size:12.5px;color:var(--muted-dark);font-family:'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.stock.out-of-stock{color:#E37B7B}
.star-rating{color:var(--sky);font-size:14px}

/* ---------------- add to cart (single product) ---------------- */
.pd-cart form.cart{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pd-cart .quantity{display:inline-flex}
.pd-cart .quantity .qty{width:76px;padding:14px 12px;border-radius:100px;border:1px solid var(--rule-dark);
  background:rgba(var(--ink-rgb),.04);color:var(--ink);font-family:'JetBrains Mono',monospace;text-align:center;font-size:14px}
.pd-cart .single_add_to_cart_button{padding:15px 34px;border-radius:100px;font-size:14px;font-weight:600;
  background:var(--ink);color:var(--void);border:0;cursor:pointer;font-family:inherit;
  transition:transform .3s var(--ease),background .3s var(--ease)}
.pd-cart .single_add_to_cart_button:hover{background:var(--sky);transform:translateY(-2px)}
.pd-cart .single_add_to_cart_button.disabled{opacity:.5;pointer-events:none}

/* ---------------- shop tables (cart / order review / order history) ---------------- */
.woocommerce table.shop_table{width:100%;border-collapse:collapse;border:1px solid var(--rule-dark);
  border-radius:14px;overflow:hidden;font-size:14px}
.woocommerce table.shop_table thead th{background:rgba(var(--ink-rgb),.05);font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark);text-align:left;padding:14px 16px}
.woocommerce table.shop_table td{padding:16px;border-top:1px solid var(--rule-dark);color:var(--on-dark);vertical-align:middle}
.woocommerce table.shop_table tr:first-child td{border-top:0}
.woocommerce .product-thumbnail img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--rule-dark)}
.woocommerce .product-name a{color:var(--ink);font-weight:600}
.woocommerce .product-name a:hover{color:var(--sky)}
.woocommerce td.actions{padding-top:20px}

/* ---------------- cart page ---------------- */
.woocommerce-cart-form{margin-bottom:24px}
.woocommerce-cart-form .coupon{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.woocommerce-cart-form .coupon input{width:auto;flex:0 0 200px}
.cart-collaterals{margin-top:36px}
.cart_totals{border:1px solid var(--rule-dark);border-radius:20px;padding:28px;max-width:420px;margin-left:auto;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.cart_totals h2{font-size:20px;margin-bottom:18px}
.cart_totals table{width:100%;font-size:14px}
.cart_totals table th{text-align:left;padding:12px 0;color:var(--muted-dark);font-weight:500;border-top:1px solid var(--rule-dark)}
.cart_totals table td{text-align:right;padding:12px 0;border-top:1px solid var(--rule-dark);color:var(--ink);font-family:'JetBrains Mono',monospace}
.cart_totals tr:first-child th,.cart_totals tr:first-child td{border-top:0}
.cart_totals .order-total td,.cart_totals .order-total th{font-size:17px;font-weight:700;color:var(--ink)}
.wc-proceed-to-checkout{margin-top:18px}
.wc-proceed-to-checkout .checkout-button{display:block;text-align:center}
.cross-sells{margin-top:56px}
.cross-sells h2{font-size:22px;margin-bottom:24px}

/* ---------------- checkout page ---------------- */
.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.woocommerce-checkout #order_review_heading,.woocommerce-checkout h3{font-size:20px;margin:28px 0 16px}
.woocommerce-checkout .col2-set h3:first-child{margin-top:0}
.woocommerce-checkout .form-row-first,.woocommerce-checkout .form-row-last{display:inline-block;width:calc(50% - 8px)}
.woocommerce-checkout .form-row-first{margin-right:16px}
.woocommerce-additional-fields{margin-top:8px}
#order_review{border:1px solid var(--rule-dark);border-radius:20px;padding:26px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.woocommerce-checkout-review-order-table{border:0!important;background:transparent}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table td,.woocommerce-checkout-review-order-table th{border-top:1px solid var(--rule-dark);padding:12px 0;background:transparent}
.woocommerce-checkout-review-order-table tr:first-child td,.woocommerce-checkout-review-order-table tr:first-child th{border-top:0}
ul.wc_payment_methods{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:8px}
li.wc_payment_method{border:1px solid var(--rule-dark);border-radius:14px;padding:16px 18px;background:rgba(var(--ink-rgb),.03)}
li.wc_payment_method label{display:inline;color:var(--ink);font-weight:600;font-size:14px;margin-left:8px}
li.wc_payment_method input[type=radio]{accent-color:var(--sky)}
.payment_box{margin-top:12px;padding-top:12px;border-top:1px solid var(--rule-dark);font-size:13.5px;color:var(--muted-dark);line-height:1.6}
.woocommerce-terms-and-conditions-wrapper{margin:18px 0;font-size:13px;color:var(--muted-dark)}
.woocommerce-terms-and-conditions-wrapper input[type=checkbox]{accent-color:var(--sky);margin-right:8px}
#place_order{margin-top:18px}
@media(max-width:900px){.woocommerce-checkout .col2-set{grid-template-columns:1fr}}

/* ---------------- my account ---------------- */
/* Scoped to .woo-account (added in page.php only when logged in) rather than
   the body's .woocommerce-account class, which is present on the logged-out
   login view too — using it here squeezed the login form into a 220px column. */
.woo-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:44px;align-items:start}
.woocommerce-MyAccount-navigation ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.woocommerce-MyAccount-navigation a{display:block;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;
  color:var(--on-dark);transition:background .2s,color .2s}
.woocommerce-MyAccount-navigation a:hover{background:rgba(var(--ink-rgb),.06);color:var(--ink)}
.woocommerce-MyAccount-navigation .is-active a{background:rgba(46,124,214,.2);color:var(--ink)}
.woocommerce-MyAccount-content{min-width:0}
.woocommerce-MyAccount-content h2{font-size:22px;margin-bottom:18px}
.woocommerce-MyAccount-content h3{font-size:17px;margin:24px 0 12px}
.woocommerce-Addresses{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.woocommerce-Address{border:1px solid var(--rule-dark);border-radius:16px;padding:22px}
.woocommerce-Address-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.woocommerce-Address-title h3{margin:0}
@media(max-width:820px){.woo-account .woocommerce{grid-template-columns:1fr}.woocommerce-Addresses{grid-template-columns:1fr}}

/* ---------------- login / register (my account + checkout guest) ---------------- */
.woocommerce-form-login,.woocommerce-form-register{border:1px solid var(--rule-dark);border-radius:20px;padding:28px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.u-columns.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.woocommerce-form-login__rememberme{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted-dark);margin:12px 0}
.woocommerce-form-login__rememberme input{accent-color:var(--sky)}
.lost_password a,.woocommerce-LostPassword a{font-size:13px;color:var(--sky)}
@media(max-width:760px){.u-columns.col2-set{grid-template-columns:1fr}}

/* ---------------- order received / order details ---------------- */
.woocommerce-order{border:1px solid var(--rule-dark);border-radius:20px;padding:30px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.04),rgba(var(--ink-rgb),.01))}
.woocommerce-order-details,.woocommerce-customer-details{margin-top:28px}
.woocommerce-thankyou-order-received{font-size:16px;color:var(--ink);margin-bottom:8px}

/* ---------------- shop / archive banner links ---------------- */
.banner p a:hover{text-decoration:underline}

/* =====================================================================
   SEARCH / 404 / ARCHIVE / SINGLE POST
   ===================================================================== */
.search-refine{max-width:420px}
.search-results{margin-top:36px;display:flex;flex-direction:column;gap:16px}
.search-result{display:flex;gap:18px;align-items:flex-start;border:1px solid var(--rule-dark);border-radius:16px;
  padding:20px;transition:border-color .25s,background .25s}
.search-result:hover{border-color:rgba(143,193,255,.4);background:rgba(var(--ink-rgb),.02)}
.search-result-thumb{flex:0 0 auto;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--rule-dark)}
.search-result-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-result-body{min-width:0}
.search-result-type{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky)}
.search-result-body h3{margin-top:6px;font-size:18px}
.search-result-body h3 a{color:var(--ink)}
.search-result-body h3 a:hover{color:var(--sky)}
.search-result-body p{margin-top:8px;font-size:14px;line-height:1.6;color:var(--muted-dark)}
.search-form-wrap{margin-bottom:0}

/* generic blog post content — headings/paragraphs/lists/images/quotes */
.prose{font-size:16px;line-height:1.75;color:var(--on-dark)}
.prose > *+*{margin-top:20px}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--ink);line-height:1.25;letter-spacing:-.01em}
.prose h2{font-size:28px}
.prose h3{font-size:22px}
.prose a{color:var(--sky);text-decoration:underline;text-underline-offset:2px}
.prose img{border-radius:14px;max-width:100%;height:auto}
.prose blockquote{border-left:3px solid var(--sky);padding-left:20px;color:var(--muted-dark);font-style:italic}
.prose ul,.prose ol{padding-left:24px}
.prose li+li{margin-top:8px}
.prose code{font-family:'JetBrains Mono',monospace;background:rgba(var(--ink-rgb),.06);padding:2px 6px;border-radius:5px;font-size:.9em}
.prose pre{background:var(--surface-2);border:1px solid var(--rule-dark);border-radius:12px;padding:18px;overflow-x:auto}

/* =====================================================================
   MAINTENANCE MODE (standalone page — no header.php/footer.php)
   ===================================================================== */
.maintenance-page{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--void);color:var(--on-dark);font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
.maintenance-screen{position:relative;z-index:1;max-width:520px;padding:32px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.maintenance-screen .mark-img{margin:0 auto}
.maintenance-screen h1{margin-top:14px;font-size:clamp(28px,5vw,42px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.maintenance-screen p{margin-top:16px;font-size:15.5px;line-height:1.7;color:var(--muted-dark)}
.maintenance-contact{margin-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:13.5px}
.maintenance-contact a{color:var(--sky)}
.maintenance-contact a:hover{text-decoration:underline}
.maintenance-contact span{color:var(--muted-dark)}
.maintenance-screen .soc-row{margin-top:28px;justify-content:center}

/* Replacement diagram image (ACF) — sits where the drawn SVG diagram would */
.dstage .ddiag-img{width:100%;height:auto;display:block}

/* ---------------- Responsive mobile hero/banner image (ACF) ----------------
   .bg-img--mobile = portrait image for phones; .bg-img--desktop = the desktop image/film.
   Swapped at 768px. Image-only banners use <picture> and need no CSS. */
.bg-img--mobile{display:none}
@media (max-width:768px){
  .bg-img--desktop{display:none!important}
  .banner .bg-img--mobile,.hero .hero-media .bg-img--mobile{display:block}
  .hero .hero-media .bg-img--mobile{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
}

/* Mobile banner image focal point (ACF "Mobile image position") */
@media (max-width:768px){
  .banner [data-mob-pos],.hero .hero-media [data-mob-pos]{object-position:var(--mob-pos,50% 50%)!important}
}

/* Homepage: hero-type at the top on phones (below the 72px fixed nav); tint reversed so the type stays legible */
@media (max-width:768px){
  .hero .hero-type{top:calc(72px + 22px);bottom:auto}
  .hero .tint{background:linear-gradient(180deg,rgba(var(--void-rgb),.62) 0%,rgba(var(--void-rgb),.28) 45%,rgba(var(--void-rgb),.06) 70%,var(--void) 97%)}
}

/* Phone focal point for any ACF image/film with a "Mobile position" set */
@media (max-width:768px){
  img[data-mob-pos],video[data-mob-pos]{object-position:var(--mob-pos,50% 50%)!important}
}

/* ============================================================
 * Contact page (page-contact.php)
 * ============================================================ */
.contact-banner{min-height:56svh}
.contact-cards-sec{padding-bottom:0}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.contact-grid.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ccon,.chours{border:1px solid var(--rule-dark);border-radius:20px;padding:28px 26px 24px;
  background:linear-gradient(160deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),.015));display:flex;flex-direction:column}
.ccon .fic,.chours .fic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:rgba(143,193,255,.12);color:var(--sky);margin-bottom:16px}
.ccon .fic svg,.chours .fic svg{width:20px;height:20px}
.ccon b,.chours b{display:block;font-size:17px;font-weight:600;color:var(--ink)}
.ccon .clines{margin-top:8px;display:flex;flex-direction:column}
.ccon .clines a{display:inline-flex;align-items:center;min-height:40px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:14px;color:var(--on-dark);transition:color .2s;word-break:break-word}
.ccon .clines a:hover{color:var(--sky)}
.ccon .clines span{padding:8px 0;font-size:14.5px;line-height:1.7;color:var(--muted-dark)}
.ccon .cmore{margin-top:auto;padding-top:16px;font-size:13.5px;font-weight:600;color:var(--sky);display:inline-flex;gap:8px;align-items:center;min-height:36px}
.ccon .cmore svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.ccon .cmore:hover svg{transform:translateX(3px)}
.contact-cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:start}
.contact-cols.is-single{grid-template-columns:minmax(0,1fr)}
.cform{border:1px solid var(--rule-dark);border-radius:24px;padding:38px 40px;
  background:linear-gradient(160deg,rgba(46,124,214,.10),rgba(var(--ink-rgb),.015));scroll-margin-top:90px}
.cform h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.03em;margin-top:12px;color:var(--ink);line-height:1.05}
.cform>p{margin-top:12px;color:var(--muted-dark);font-size:15px;line-height:1.66;max-width:520px}
.cform form{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.cform .f-full{grid-column:1/-1}
.cform label{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);margin-bottom:8px;font-weight:500}
.cform label span{text-transform:none;letter-spacing:0;opacity:.7}
.cform input,.cform select,.cform textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--rule-dark);
  background:rgba(var(--ink-rgb),.04);color:var(--ink);font-family:inherit;font-size:15px;transition:border-color .2s,background .2s;-webkit-appearance:none}
.cform input::placeholder,.cform textarea::placeholder{color:var(--muted-dark);opacity:.7}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-color:var(--sky);background:rgba(var(--ink-rgb),.07)}
.cform textarea{min-height:150px;resize:vertical}
.cform select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2398A3B8' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.cform select option{color:var(--void);background:var(--ink)}
.cform .hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden;opacity:0}
.cform .f-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.cform .f-actions .btn{border:0;cursor:pointer;font-family:inherit}
.cform .f-note{font-size:12.5px;color:var(--muted-dark);line-height:1.5}
.cnotice{margin-top:18px;padding:14px 18px;border-radius:12px;font-size:14px;line-height:1.6;border:1px solid;color:var(--ink)}
.cnotice.ok{background:rgba(143,193,255,.12);border-color:rgba(143,193,255,.4)}
.cnotice.bad{background:rgba(227,123,123,.12);border-color:rgba(227,123,123,.45)}
.cnotice a{color:var(--sky);text-decoration:underline}
.contact-aside{display:flex;flex-direction:column;gap:18px}
.contact-aside .contact-strip{flex-direction:column;align-items:flex-start;padding:28px 26px;gap:20px}
.chours table{width:100%;border-collapse:collapse;margin-top:14px}
.chours td{padding:11px 0;border-top:1px solid var(--rule-dark);font-size:14px;color:var(--on-dark);vertical-align:top}
.chours td:last-child{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--ink);white-space:nowrap;padding-left:14px}
.chours tr:first-child td{border-top:0}
.chours-note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--muted-dark)}

@media(max-width:960px){
  .contact-grid,.contact-grid.is-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .banner-in{padding:104px 0 40px}
  .banner p{font-size:15.5px;margin-top:16px}
  .contact-banner{min-height:48svh}
  .cform{padding:28px 22px;border-radius:20px}
  .cform form{grid-template-columns:1fr;gap:14px}
  .cform .f-actions{flex-direction:column;align-items:stretch;gap:12px}
  .cform .f-actions .btn{width:100%;text-align:center;padding:16px 24px}
  .cform .f-note{text-align:center}
}
@media(max-width:600px){
  .contact-grid,.contact-grid.is-2{grid-template-columns:1fr;gap:12px}
  .ccon,.chours,.contact-aside .contact-strip{padding:22px 20px;border-radius:18px}
  .ccon .fic,.chours .fic{margin-bottom:12px}
  .contact-aside .contact-strip .soc-row{flex-wrap:wrap}
}

/* ============================================================
 * Theme switcher (light default / dark)
 * Photo-backed components keep the dark palette in both themes so
 * white type stays legible over imagery.
 * ============================================================ */
.hero,.banner,.post,.shot,.lab .cell,.myo-home-film,.vslide,.ig-cell,.dfilm,.film-stage,.mo,.glaze-film,.mini-cart-thumb{
  --ink:#fff;--ink-rgb:255,255,255;--void:#0A0D14;--void-2:#0E1220;--void-rgb:10,13,20;--sky:#8FC1FF;
  --on-dark:#D9DFEA;--muted-dark:#98A3B8;--rule-dark:rgba(255,255,255,.13);
  --btn-bg:#fff;--btn-fg:#0A0D14;--btn-hover:#8FC1FF}
.hero,.banner{color:var(--on-dark)}

/* nav: light type over a hero photo, page-ink once solid or on pages without a hero */
.nav{--nav-fg:#E7ECF4;--nav-fg-inv:#0A0D14}
.nav.solid,body:not(.has-hero) .nav{--nav-fg:var(--ink);--nav-fg-inv:var(--void)}
.nav.solid .nav-links a,body:not(.has-hero) .nav .nav-links a{text-shadow:none}
body:not(.has-hero) .nav{background:rgba(var(--void-rgb),.9);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-bottom-color:var(--rule-dark)}
body:not(.has-hero) main,body:not(.has-hero) .woo-page{padding-top:72px}
@media(max-width:760px){.nav-links.open a{color:var(--ink);text-shadow:none}.nav-links.open a.on{color:var(--sky)}}

/* wordmark is a white PNG: invert it on light surfaces */
:root:not([data-theme="dark"]) .mark-img,:root:not([data-theme="dark"]) .tick-logo{filter:invert(1)}
:root:not([data-theme="dark"]) body.has-hero .nav:not(.solid) .mark-img{filter:none}

/* toggle button */
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}

/* light-mode polish */
:root:not([data-theme="dark"]) .pol,:root:not([data-theme="dark"]) .ccon,:root:not([data-theme="dark"]) .cform,:root:not([data-theme="dark"]) .chours,:root:not([data-theme="dark"]) .contact-strip{box-shadow:0 10px 30px rgba(20,30,50,.05)}
:root:not([data-theme="dark"]) .banner h1,:root:not([data-theme="dark"]) .hero-type h1{color:#fff}


/* ---------------- mobile menu: fully solid panel (2026-10-16) ----------------
   The nav's backdrop-filter makes it the containing block for the fixed menu,
   collapsing top:72px/bottom:0 to zero height. Give the panel an explicit height
   and an opaque background; make the bar solid while the menu is open. */
@media(max-width:760px){
  .nav-links{bottom:auto;height:calc(100vh - 72px);height:calc(100dvh - 72px);overflow-y:auto;
    background:var(--void);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav:has(.nav-links.open){background:var(--void);border-bottom-color:var(--rule-dark);
    backdrop-filter:none;-webkit-backdrop-filter:none;--nav-fg:var(--ink);--nav-fg-inv:var(--void)}
  :root:not([data-theme="dark"]) body.has-hero .nav:has(.nav-links.open) .mark-img{filter:invert(1)}
}

/* ---------------- single product: no horizontal overflow on phones (2026-10-16) ----------------
   5 fixed 84px thumbs (~460px) forced the grid column wider than the screen. Thumbs now share
   the row (max 84px each), and grid children may shrink below their content width. */
.pd-grid>*{min-width:0}
.pd-thumbs{flex-wrap:nowrap}
.pd-th{flex:1 1 0;min-width:0;max-width:84px;width:auto;height:auto;aspect-ratio:1/1}
.pd-name,.pd-desc{overflow-wrap:break-word}
@media(max-width:560px){
  .pd-thumbs{gap:8px}
  .pd-name{font-size:clamp(28px,8vw,34px)}
  .pd-cart form.cart{flex-wrap:nowrap}
  .pd-cart .single_add_to_cart_button{flex:1 1 auto;padding-left:20px;padding-right:20px}
}