/** Shopify CDN: Minification failed

Line 808:19 Expected "{" but found "and("
Line 819:0 Unexpected "<"

**/
/* ============================================================
   GTGT — design tokens
   ============================================================ */
:root{
  --ink:#101725;      /* brand navy, sampled from logo */
  --ink-2:#1B2536;
  --void:#070B13;     /* hero / dark sections */
  --bone:#F4F2ED;     /* brand paper, sampled from logo lockup */
  --paper:#FFFFFF;
  --mist:#F7F8FA;
  --line:#E4E2DC;
  --line-dark:rgba(255,255,255,.12);
  --muted:#6B7280;
  --muted-d:rgba(255,255,255,.62);
  --halo:#F7DCAE;     /* warm ring light */

  --pure:#4C9BE0; --pure-ice:#E3F1FC; --pure-deep:#1E5F9E;
  --apex:#C7CFDC; --apex-black:#0C0F16; --apex-deep:#2B3444;
  --soft:#E4909F; --soft-blush:#FBEAEE; --soft-deep:#B25B70;

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,23,37,.04),0 8px 24px -12px rgba(16,23,37,.14);
  --sh-2:0 2px 6px rgba(16,23,37,.05),0 24px 60px -24px rgba(16,23,37,.26);
  --sh-3:0 40px 90px -32px rgba(16,23,37,.42);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --head-h:84px;
  --f-display:"Archivo","Archivo Expanded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* figure/figcaption carry a UA margin of 1em 40px. The community tiles are
   figures, and that 40px pushed each one out of its grid cell. */
figure,figcaption{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     /* The header is sticky, so an in-page anchor must stop below it or
        the heading it jumped to sits underneath the bar. */
     scroll-padding-top:calc(var(--head-h) + 16px)}
/* Sideways scrolling is clipped on BOTH html and body, and with `clip` rather
   than `hidden` wherever it is supported. overflow-x:hidden on body alone is the
   fragile pattern: it only reaches the viewport by propagation, it turns the
   page into a scroll container, and iOS Safari will still let the viewport pan
   sideways. `clip` creates no scroll container at all, so nothing can pan.
   overflow-y is deliberately left alone - pairing clip with an untouched
   overflow-y keeps position:sticky (the product gallery) working. */
html,body{overflow-x:hidden;overflow-x:clip}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* Scroll lock for the nav drawer. It has to reach the root: html carries
   overflow-x above, so the viewport takes html's overflow and body.lock alone
   stopped holding the page. gtgt-header.js sets .lock on both; the :has() rule
   covers any other code that only marks the body. */
html.lock,body.lock{overflow:hidden}
html:has(body.lock){overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;line-height:1.04}
p{margin:0}
svg{display:block}
:focus-visible{outline:2px solid var(--pure);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--halo)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:8px;left:8px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;transform:translateY(-200%)}
.skip:focus{transform:none}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
@media(min-width:1200px){.wrap{padding:0 40px}}
.dark{background:var(--void);color:#fff}

/* type scale */
.display{font-family:var(--f-display);font-weight:800;letter-spacing:-.035em;line-height:.92}
.h-xl{font-size:clamp(2.9rem,10.4vw,5.9rem)}
.h-lg{font-size:clamp(2.2rem,6.2vw,4.1rem)}
.h-md{font-size:clamp(1.65rem,3.6vw,2.6rem)}
.h-sm{font-size:clamp(1.25rem,2.4vw,1.7rem);letter-spacing:-.02em}
.eyebrow{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.dark .eyebrow{color:rgba(255,255,255,.55)}
.lede{font-size:clamp(1rem,1.35vw,1.075rem);color:var(--muted);max-width:56ch;line-height:1.65}
.dark .lede{color:var(--muted-d)}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  --bg:var(--ink);--fg:#fff;--bd:var(--ink);
  display:inline-flex;align-items:center;gap:14px;position:relative;
  padding:15px 24px 15px 28px;border-radius:var(--r-pill);
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  font-weight:600;font-size:.875rem;letter-spacing:.055em;text-transform:uppercase;
  transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),background .25s,color .25s,border-color .25s;
  will-change:transform;overflow:hidden;
}
.btn .arw{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .4s var(--ease-out),background .25s}
.btn .arw svg{width:13px;height:13px}
.btn:hover{box-shadow:0 18px 34px -16px rgba(16,23,37,.6)}
.btn:hover .arw{transform:translateX(4px);background:rgba(255,255,255,.26)}
.btn:active{transform:scale(.975)}
.btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff}
.btn--light .arw{background:rgba(16,23,37,.08)}
.btn--light:hover .arw{background:rgba(16,23,37,.14)}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:rgba(16,23,37,.22)}
.btn--ghost .arw{background:rgba(16,23,37,.07)}
.btn--ghost:hover{--bd:var(--ink)}
.dark .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.28)}
.dark .btn--ghost .arw{background:rgba(255,255,255,.12)}
.dark .btn--ghost:hover{--bd:#fff}
.btn--sm{padding:11px 16px 11px 20px;font-size:.72rem;gap:10px}
.btn--sm .arw{width:20px;height:20px}.btn--sm .arw svg{width:11px;height:11px}
.btn--block{width:100%;justify-content:center}
.btn[disabled]{opacity:.45;pointer-events:none}

.link-arw{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase}
.link-arw svg{width:14px;height:14px;transition:transform .35s var(--ease-out)}
.link-arw:hover svg{transform:translateX(5px)}

/* ============================================================
   Header
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:rgba(244,242,237,.82);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:height .35s var(--ease),background .35s,border-color .35s,box-shadow .35s;
  height:var(--head-h);
}
.hdr.small{height:64px;background:rgba(248,247,244,.9);border-bottom-color:var(--line);box-shadow:0 10px 30px -24px rgba(16,23,37,.5)}
.hdr__in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:38px;width:auto;transition:height .35s var(--ease)}
.hdr.small .brand img{height:30px}
.nav{display:none;gap:4px}
@media(min-width:1024px){.nav{display:flex;position:absolute;left:50%;transform:translateX(-50%)}}
.nav a{
  position:relative;padding:9px 16px;border-radius:var(--r-pill);
  font-size:.9rem;font-weight:500;color:#3A4354;transition:color .2s,background .2s;
}
.nav a:hover{color:var(--ink);background:rgba(16,23,37,.05)}
.nav a.on{color:var(--ink);font-weight:600}
.nav a.on::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.tools{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.icbtn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;position:relative;transition:background .2s,transform .2s}
.icbtn:hover{background:rgba(16,23,37,.06)}
.icbtn:active{transform:scale(.92)}
.icbtn svg{width:19px;height:19px;stroke-width:1.6}
.cart-dot{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--ink);color:#fff;font-size:.64rem;font-weight:700;
  display:grid;place-items:center;transform:scale(0);transition:transform .35s var(--ease-out);
  font-family:var(--f-body);letter-spacing:0;
}
.cart-dot.show{transform:scale(1)}
.cart-dot.pop{animation:pop .5s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.45)}100%{transform:scale(1)}}
.burger{display:flex;flex-direction:column;align-items:center;justify-content:center}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block;width:19px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.hide-lg{display:flex}
@media(min-width:1024px){.hide-lg{display:none}}
.only-lg{display:none}
@media(min-width:1024px){.only-lg{display:grid}}

/* mobile menu */
.mnav{
  position:fixed;inset:0;z-index:120;background:var(--bone);
  transform:translateX(100%);transition:transform .5s var(--ease-out);
  display:flex;flex-direction:column;
}
.mnav.open{transform:none}
.mnav__top{height:var(--head-h);display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.mnav__body{flex:1;overflow-y:auto;padding-block:24px 40px}
.mnav__links a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-size:2.1rem;font-weight:700;letter-spacing:-.03em;
  opacity:0;transform:translateY(18px);
}
.mnav.open .mnav__links a{animation:mIn .55s var(--ease-out) forwards;animation-delay:calc(var(--i)*60ms + 120ms)}
@keyframes mIn{to{opacity:1;transform:none}}
.mnav__links a span{font-family:var(--f-body);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mnav__foot{padding:26px 0 40px;display:flex;flex-direction:column;gap:18px}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background .25s,color .25s,border-color .25s}
.socials a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.socials svg{width:17px;height:17px}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;background:var(--void);color:#fff;
  padding:calc(var(--head-h) + 40px) 0 56px;
}
@media(min-width:1024px){.hero{padding:calc(var(--head-h) + 56px) 0 72px;min-height:100svh;display:flex;align-items:center}}
.hero__bg{position:absolute;inset:0;pointer-events:none;opacity:0;animation:fadeIn 1.1s var(--ease) .05s forwards}
@keyframes fadeIn{to{opacity:1}}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 68% 42%, rgba(60,86,132,.36) 0%, rgba(10,15,26,0) 62%),
    radial-gradient(70% 60% at 12% 12%, rgba(76,155,224,.16) 0%, rgba(7,11,19,0) 60%),
    radial-gradient(80% 70% at 92% 96%, rgba(228,144,159,.13) 0%, rgba(7,11,19,0) 60%),
    linear-gradient(180deg,#0A0F1A 0%, #070B13 55%, #05080E 100%);
}
.hero__bg::after{ /* fine grain, keeps gradients from banding */
  content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__grid{position:relative;display:grid;gap:8px;align-items:center}
@media(min-width:1024px){.hero__grid{grid-template-columns:minmax(420px,.96fr) 1.04fr;gap:24px}}

.hero__copy{position:relative;z-index:3;max-width:620px}
.hero__eyebrow{display:block;margin-bottom:18px;color:rgba(255,255,255,.52);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
.hero h1{margin:0 0 22px}
.hero h1 .ln{display:block;overflow:hidden;padding:0 .05em .04em 0}
.hero h1 .ln i{display:block;font-style:normal}
.hero__lede{color:rgba(255,255,255,.66);font-size:1.02rem;line-height:1.65;max-width:44ch;margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .btn--ghost{--fg:#fff;--bd:rgba(255,255,255,.3)}
.hero .btn--ghost .arw{background:rgba(255,255,255,.14)}
.hero .btn--ghost:hover{--bd:#fff;--bg:rgba(255,255,255,.07)}
.hero__stats{display:flex;flex-wrap:wrap;gap:16px 28px;margin-top:38px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1)}
.hero__stats div{display:flex;flex-direction:column;gap:3px}
.hero__stats b{font-family:var(--f-display);font-size:1.35rem;letter-spacing:-.02em;white-space:nowrap}
@media(max-width:520px){.hero__stats b{font-size:1.08rem}.hero__stats{gap:14px 22px}}
.hero__stats span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* --- the stage: the one bold moment --- */
.stage{position:relative;z-index:2;aspect-ratio:1/.92;max-width:680px;margin:0 auto;width:100%}
@media(max-width:1023px){.stage{margin-top:18px;max-width:560px}}
.stage__glow{
  position:absolute;left:50%;top:43%;width:92%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(247,220,174,.34) 0%, rgba(247,220,174,.10) 38%, rgba(247,220,174,0) 68%);
  filter:blur(8px);animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.82;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.ring{
  position:absolute;left:50%;top:41%;width:73%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);
  border-radius:50%;
  background:conic-gradient(from 172deg,
     rgba(255,255,255,0) 0deg 22deg,
     rgba(255,241,220,.35) 54deg,
     #FFFBF2 122deg, #FFFFFF 176deg, #FFF7E9 228deg,
     rgba(255,238,212,.32) 300deg,
     rgba(255,255,255,0) 334deg 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent 0 88.4%,#000 89.2%);
          mask:radial-gradient(closest-side,transparent 0 88.4%,#000 89.2%);
  filter:drop-shadow(0 0 22px rgba(255,233,198,.55)) drop-shadow(0 0 74px rgba(247,214,164,.28));
  opacity:0;
}
.ring.lit{animation:ringIn 1.5s var(--ease-out) forwards}
@keyframes ringIn{0%{opacity:0;transform:translate(-50%,-50%) rotate(-38deg) scale(.86)}100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

.stage__products{position:absolute;left:50%;bottom:21%;transform:translateX(-50%);width:63%;display:flex;align-items:flex-end;justify-content:center;gap:3%;z-index:3}
.pod{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;opacity:0;transform:translateY(26px) scale(.9)}
.pod.set{animation:podIn .9s var(--ease-out) forwards}
@keyframes podIn{to{opacity:1;transform:none}}
.pod__inner{width:100%;animation:float 6.5s ease-in-out infinite;will-change:transform}
.pod:nth-child(1) .pod__inner{animation-delay:-1.2s}
.pod:nth-child(2) .pod__inner{animation-delay:-3.1s}
.pod:nth-child(3) .pod__inner{animation-delay:-2.1s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.pod svg{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.pod--mid{flex:1.22;z-index:2}

.plinth{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:45%;z-index:2;opacity:0}
.plinth.set{animation:fadeUp .9s var(--ease-out) .15s forwards}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translateX(-50%)}}
.plinth__top{height:15px;border-radius:50%;background:linear-gradient(180deg,#8E99AA,#525C6D);filter:blur(.3px)}
.plinth__face{
  margin-top:-7px;height:74px;border-radius:0 0 14px 14px;
  background:linear-gradient(175deg,#5F6979 0%,#3A4353 44%,#1E2530 100%);
  display:grid;place-items:center;box-shadow:0 34px 50px -18px rgba(0,0,0,.75), inset 0 -12px 24px rgba(0,0,0,.35);
}
.plinth__face img{height:24px;opacity:.26;filter:saturate(0)}
.stage__floorlight{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);width:88%;height:70px;background:radial-gradient(ellipse at center, rgba(150,180,220,.20), rgba(0,0,0,0) 70%);filter:blur(6px)}

/* floating glass labels */
.tag{
  position:absolute;z-index:4;display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 9px;border-radius:var(--r-pill);
  background:rgba(10,14,22,.62);border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:0 16px 40px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.26);
  opacity:0;transform:translateY(10px) scale(.94);white-space:nowrap;
  transition:border-color .3s,background .3s;
}
.tag.set{animation:tagIn .7s var(--ease-out) forwards}
@keyframes tagIn{to{opacity:1;transform:none}}
.tag__ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff}
.tag__ic svg{width:15px;height:15px}
.tag__tx b{display:block;font-size:.74rem;font-weight:700;letter-spacing:.1em;line-height:1.25}
/* Scoped to .tag__tx: as ".tag span" this also matched .tag__ic, which is a
   span, and beat it on specificity - the icon lost display:grid (so it sat
   pinned to the top of its circle) and had its colour dimmed to 60%. */
.tag__tx span{display:block;font-size:.66rem;color:rgba(255,255,255,.72);letter-spacing:.02em}
.tag--pure{left:-4%;top:41%;animation-delay:1.05s}
.tag--apex{left:36%;top:0%;animation-delay:1.2s}
.tag--soft{right:-5%;top:15%;animation-delay:1.35s}
.tag--pure .tag__ic{background:linear-gradient(145deg,#5FA8E8,#2F6FB5)}
.tag--apex .tag__ic{background:linear-gradient(145deg,#3A424F,#12161F)}
.tag--soft .tag__ic{background:linear-gradient(145deg,#E9A0AE,#B9647A)}
.tag.set .tag__fl{animation:tagFloat 7s ease-in-out infinite}
.tag--apex.set{animation-delay:1.2s}
@media(max-width:640px){
  .tag{padding:7px 12px 7px 7px}
  .tag__ic{width:25px;height:25px}.tag__ic svg{width:12px;height:12px}
  .tag__tx b{font-size:.63rem}.tag__tx span{font-size:.57rem}
  .tag--pure{left:0;top:40%}.tag--apex{left:28%;top:2%}.tag--soft{right:1%;top:20%}
}

/* particles */
.dust{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.5);animation:drift linear infinite}
@keyframes drift{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.75}88%{opacity:.5}100%{transform:translateY(-130px) translateX(22px);opacity:0}}

/* section rail */
.rail{position:absolute;right:26px;top:50%;transform:translateY(-50%);z-index:5;display:none;flex-direction:column;align-items:center;gap:14px}
/* Built by script; show nothing at all if it never ran. */
.rail:empty{display:none}
@media(min-width:1200px){.rail{display:flex}}
.rail__bar{width:1px;height:52px;background:rgba(255,255,255,.16);position:relative;overflow:hidden}
.rail__bar i{position:absolute;inset:0 0 auto 0;height:0%;background:#fff;transition:height .5s var(--ease)}
.rail button{font-size:.68rem;letter-spacing:.12em;font-weight:600;color:rgba(255,255,255,.58);transition:color .3s;font-variant-numeric:tabular-nums}
.rail button.on{color:#fff}
.scrollcue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;display:none;align-items:center;gap:9px;font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4)}
@media(min-width:1024px){.scrollcue{display:flex}}
.scrollcue i{display:block;width:22px;height:1px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:#fff;animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ============================================================
   Reveal system
   ============================================================ */
[data-r]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}
[data-r="scale"]{transform:scale(.96)}
[data-r="left"]{transform:translateX(-24px)}
[data-r].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-r]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* section scaffolding */
.sec{padding:72px 0}
@media(min-width:768px){.sec{padding:104px 0}}
@media(min-width:1200px){.sec{padding:124px 0}}
.sec--tight{padding:56px 0}
@media(min-width:768px){.sec--tight{padding:76px 0}}
.sec__head{margin-bottom:44px}
.sec__head--center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.sec__head p{margin-top:14px}
.sec__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}

/* ============================================================
   Collection cards
   ============================================================ */
.cols{display:grid;gap:16px}
@media(min-width:820px){.cols{grid-template-columns:repeat(3,1fr);gap:18px}}
.col{
  position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  min-height:480px;display:flex;flex-direction:column;padding:32px 28px;
  box-shadow:var(--sh-1);transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
@media(min-width:820px){.col{min-height:560px}}
.col:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.col__bg{position:absolute;inset:0;z-index:-3;overflow:hidden;transition:transform .8s var(--ease-out)}
.col:hover .col__bg{transform:scale(1.045)}
.col__art{position:absolute;right:-7%;bottom:-3%;height:62%;width:auto;z-index:-1;transition:transform .7s var(--ease-out);transform-origin:bottom right}
.col:hover .col__art{transform:translateY(-10px) scale(1.06)}
.col__art svg{height:100%;width:auto;filter:drop-shadow(0 22px 30px rgba(0,0,0,.22))}
.col__k{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;opacity:.62}
/* Logo lettering variant. Height is matched to the typed kicker's cap height so
   swapping between them does not move anything below. */
/* The GTGT wordmark, tintable. The PNG is used as a MASK and filled with
   currentColor, so the lettering takes whatever colour its context has - gold
   on Apex, blue on Pure - instead of needing a separate file per colourway.
   Height is 0.84em, which puts the glyphs at the same cap height as the text
   beside them: the letters occupy 50 of the image's 58px, and type caps are
   about 0.72em, so 0.72 x 58/50 = 0.835. */
.gtgt-mark{
  display:inline-block;height:.84em;aspect-ratio:282/58;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:var(--mark) no-repeat center/contain;
          mask:var(--mark) no-repeat center/contain;
}
.col__k--logo{display:block;opacity:.62;line-height:0}
.col__n{font-family:var(--f-display);font-size:clamp(2.4rem,4.4vw,3.1rem);font-weight:800;letter-spacing:-.035em;line-height:.94;margin:2px 0 20px}
.col h3{font-size:1.22rem;font-weight:700;letter-spacing:-.02em;line-height:1.22;margin-bottom:10px}
.col p{font-size:.9rem;line-height:1.55;max-width:26ch;opacity:.72;margin-bottom:26px}
.col .btn{align-self:flex-start}
.col__foot{margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:11px}
.col__foot i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);flex:0 0 auto}
.col__foot i svg{width:16px;height:16px}
.col__foot span{font-size:.78rem;font-weight:500;opacity:.72}
.col--pure{background:linear-gradient(165deg,#F2F9FE 0%,#DCEDFB 58%,#C8E2F7 100%);color:#12314C}
.col--pure .col__n{color:var(--pure-deep)}
.col--apex{background:linear-gradient(165deg,#1C222E 0%,#0E1219 60%,#07090E 100%);color:#EEF1F6}
.col--apex .col__n{color:#fff}
.col--apex .col__foot i{background:rgba(255,255,255,.09)}
.col--apex .btn{--bg:#fff;--fg:var(--ink);--bd:#fff}
.col--apex .btn .arw{background:rgba(16,23,37,.09)}
.col--soft{background:linear-gradient(165deg,#FEF5F7 0%,#FBE6EB 58%,#F7D6DE 100%);color:#4A2831}
.col--soft .col__n{color:var(--soft-deep)}
.col--pure .btn,.col--soft .btn{--bg:transparent;--fg:currentColor;--bd:currentColor}
.col--pure .btn .arw,.col--soft .btn .arw{background:rgba(255,255,255,.6)}
.col--pure .btn:hover,.col--soft .btn:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)}
.col--pure .btn:hover .arw,.col--soft .btn:hover .arw{background:rgba(255,255,255,.18)}

/* ============================================================
   Why GTGT
   ============================================================ */
.why{background:var(--paper)}
.whys{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:640px){.whys{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.whys{grid-template-columns:repeat(4,1fr)}}
.why-card{background:var(--paper);padding:34px 26px;text-align:center;transition:background .35s}
.why-card:hover{background:var(--mist)}
.why-card i{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 18px;border-radius:16px;background:var(--bone);color:var(--ink);transition:transform .45s var(--ease-out),background .35s,color .35s}
.why-card:hover i{transform:translateY(-3px) rotate(-4deg);background:var(--ink);color:#fff}
.why-card i svg{width:23px;height:23px;stroke-width:1.5}
.why-card h3{font-size:.95rem;letter-spacing:-.01em;margin-bottom:9px}
.why-card p{font-size:.85rem;line-height:1.58;color:var(--muted)}

/* ============================================================
   Product cards
   ============================================================ */
.grid3{display:grid;gap:18px}
@media(min-width:700px){.grid3{grid-template-columns:repeat(3,1fr)}}
/* A two-product row fills the width rather than leaving a third empty. */
@media(min-width:700px){.grid3.grid3--2{grid-template-columns:repeat(2,1fr)}}
.pcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--paper);border:1px solid var(--line);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.pcard__media{position:relative;aspect-ratio:1/1;overflow:hidden;display:grid;place-items:center;padding:12%}
.pcard__media>svg,.pcard__media>img{width:auto;height:100%;max-width:100%;object-fit:contain;transition:transform .7s var(--ease-out);filter:drop-shadow(0 18px 26px rgba(0,0,0,.2))}
.pcard:hover .pcard__media>svg,.pcard:hover .pcard__media>img{transform:translateY(-8px) scale(1.05)}
/* collection surfaces — shared by cards, galleries, cart thumbs, modals */
.t-pure{background:radial-gradient(circle at 50% 40%,#F6FBFE,#D8EBFA)}
.t-apex{background:radial-gradient(circle at 50% 40%,#222933,#0A0D13)}
.t-soft{background:radial-gradient(circle at 50% 40%,#FFF8FA,#F8DFE5)}
.badge{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:var(--r-pill);font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--ink);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.t-apex .badge{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.wish{position:absolute;top:12px;right:12px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.86);backdrop-filter:blur(8px);transition:transform .3s var(--ease-out),background .25s;color:var(--ink)}
.t-apex .wish{background:rgba(255,255,255,.14);color:#fff}
.wish:hover{transform:scale(1.1)}
.wish svg{width:16px;height:16px;transition:fill .25s,stroke .25s}
.wish.on svg{fill:#E0465F;stroke:#E0465F}
.wish.on{animation:heart .5s var(--ease-out)}
@keyframes heart{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.92)}100%{transform:scale(1)}}
.qv{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
  padding:11px;border-radius:var(--r-pill);background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  opacity:0;transform:translateY(12px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.3);
}
.pcard:hover .qv,.pcard:focus-within .qv{opacity:1;transform:none}
@media(hover:none){.qv{opacity:1;transform:none}}
.pcard__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.pcard__k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.pcard__n{font-family:var(--f-display);font-size:1.02rem;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.stars{display:flex;align-items:center;gap:6px}
.stars i{display:flex;gap:1.5px}
.stars svg{width:13px;height:13px;fill:#F0A73B;stroke:none}
.stars svg.off{fill:#D8DCE3}
.stars span{font-size:.72rem;color:var(--muted)}
.pcard__row{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.price{font-family:var(--f-display);font-size:1.12rem;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px}
.price s{font-family:var(--f-body);font-size:.82rem;font-weight:400;color:var(--muted);text-decoration:line-through}
.addbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;transition:transform .3s var(--ease-out),background .3s;flex:0 0 auto}
.addbtn:hover{transform:scale(1.08)}
.addbtn:active{transform:scale(.9)}
.addbtn svg{width:17px;height:17px}
.addbtn.done{background:#1F9D62}
.addbtn.done svg{animation:tick .4s var(--ease-out)}
@keyframes tick{from{transform:scale(0) rotate(-30deg)}to{transform:none}}

/* ============================================================
   Reviews
   ============================================================ */
.rev{background:var(--void);color:#fff;position:relative;overflow:hidden}
.rev::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 20%,rgba(76,155,224,.14),transparent 62%),radial-gradient(60% 50% at 10% 90%,rgba(228,144,159,.1),transparent 60%)}
.rev>*{position:relative}
.rev__grid{display:grid;gap:40px}
@media(min-width:1024px){.rev__grid{grid-template-columns:minmax(300px,.78fr) 1.22fr;gap:48px;align-items:center}}
.rev__grid h2{font-size:clamp(2rem,4.6vw,3.3rem)}
.rcar{overflow:hidden;margin:0 -20px;padding:0 20px}
@media(min-width:768px){.rcar{margin:0;padding:0}}
.rtrack{display:flex;gap:16px;transition:transform .65s var(--ease-out);will-change:transform}
.rcard{
  flex:0 0 84%;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:24px 22px;display:flex;flex-direction:column;gap:13px;
  backdrop-filter:blur(6px);
}
@media(min-width:700px){.rcard{flex-basis:calc(50% - 8px)}}
@media(min-width:1024px){.rcard{flex-basis:calc(33.333% - 11px)}}
.rcard__top{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.92rem;color:#fff;flex:0 0 auto}
.rcard b{font-size:.9rem;font-weight:600;display:block}
.rcard blockquote{margin:0;font-size:.92rem;line-height:1.62;color:rgba(255,255,255,.82)}
.vfy{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:6px;font-size:.72rem;color:rgba(255,255,255,.5)}
.vfy svg{width:14px;height:14px;color:#4FB98A}
.rctl{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:28px}
.rctl button.nav-a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:background .25s,border-color .25s,transform .25s}
.rctl button.nav-a:hover{background:#fff;color:var(--ink);border-color:#fff}
.rctl button.nav-a:active{transform:scale(.92)}
.rctl svg{width:16px;height:16px}
.dots{display:flex;gap:7px;margin-left:4px}
.dots button{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.26);transition:width .4s var(--ease-out),background .3s}
.dots button.on{width:24px;background:#fff}
.note{font-size:.68rem;color:rgba(255,255,255,.34);margin-left:auto;letter-spacing:.03em;min-width:0}

/* ============================================================
   Community
   ============================================================ */
.comm{background:var(--bone)}
.comm__grid{display:grid;gap:32px}
.comm__grid>*,.rev__grid>*{min-width:0}
@media(min-width:1024px){.comm__grid{grid-template-columns:minmax(300px,.65fr) 1.35fr;gap:40px;align-items:center}}
.gal{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px;width:100%}
.gal::-webkit-scrollbar{display:none}

.gtile{
  flex:0 0 76%;scroll-snap-align:start;position:relative;aspect-ratio:4/5;border-radius:var(--r-md);
  container-type:inline-size;
  overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;padding:18px;
  transition:transform .5s var(--ease-out);
}
@media(min-width:640px){.gtile{flex-basis:42%}}
@media(min-width:1024px){.gtile{flex-basis:calc(33.333% - 10px);aspect-ratio:3/4}}
.gtile:hover{transform:translateY(-5px)}
.gtile__ph{position:absolute;inset:0;z-index:0}
.gtile__cap{position:relative;z-index:2;font-family:var(--f-display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.gtile__tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;background:rgba(255,255,255,.82);color:var(--ink);padding:5px 10px;border-radius:var(--r-pill)}

/* ============================================================
   Footer
   ============================================================ */
.ftr{background:var(--void);color:#fff;padding:64px 0 28px}
.ftr__grid{display:grid;gap:40px}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1100px){.ftr__grid{grid-template-columns:1.5fr .8fr .8fr .9fr 1.3fr;gap:32px}}
.ftr img.mark{height:40px;margin-bottom:18px}
.ftr p.tiny{font-size:.86rem;color:rgba(255,255,255,.55);max-width:30ch;line-height:1.6}
.ftr h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.45);margin-bottom:16px;font-family:var(--f-body)}
.ftr li+li{margin-top:11px}
.ftr li a{font-size:.88rem;color:rgba(255,255,255,.74);transition:color .2s,padding-left .25s}
.ftr li a:hover{color:#fff;padding-left:5px}
.sub{display:flex;gap:8px;margin-top:14px}
.sub input{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);padding:13px 18px;font-size:.87rem;color:#fff;transition:border-color .25s,background .25s}
.sub input::placeholder{color:rgba(255,255,255,.4)}
.sub input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.sub button{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;transition:transform .3s var(--ease-out)}
.sub button:hover{transform:scale(1.07)}
.sub button svg{width:17px;height:17px}
.ftr__bot{margin-top:52px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.ftr__bot small{font-size:.76rem;color:rgba(255,255,255,.42)}
.pays{display:flex;gap:8px;align-items:center}
.pay{height:26px;padding:0 9px;border-radius:5px;background:rgba(255,255,255,.9);display:grid;place-items:center;font-size:.6rem;font-weight:800;letter-spacing:.02em;color:#1A2230;font-family:var(--f-display)}
.totop{position:fixed;right:20px;bottom:20px;z-index:70;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:var(--sh-2);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease-out)}
.totop.in{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:17px;height:17px}

/* ============================================================
   Scrim + overlays
   ============================================================ */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(8,12,20,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.scrim.in{opacity:1;pointer-events:auto}

/* search */
.search{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;pointer-events:none}
.search__pane{background:var(--bone);padding:0 0 34px;transform:translateY(-100%);transition:transform .5s var(--ease-out);box-shadow:0 30px 70px -30px rgba(0,0,0,.5);max-height:100%;overflow-y:auto}
.search.open{pointer-events:auto}
.search.open .search__pane{transform:none}
.search__top{height:var(--head-h);display:flex;align-items:center;justify-content:space-between}
.search h2{font-size:clamp(1.7rem,4.4vw,2.7rem);letter-spacing:-.035em;font-weight:800;margin:18px 0 22px}
.search__field{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:14px}
.search__field svg{width:20px;height:20px;flex:0 0 auto}
.search__field input{flex:1;background:none;border:0;font-size:clamp(1.05rem,2.4vw,1.4rem);font-weight:500;padding:0}
.search__field input:focus{outline:none}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;align-items:center}
.quick span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.chip{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font-size:.82rem;font-weight:500;transition:background .25s,color .25s,border-color .25s}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.results{margin-top:26px;display:grid;gap:10px}
.res{display:flex;align-items:center;gap:16px;padding:12px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);transition:transform .3s var(--ease-out),box-shadow .3s;text-align:left;width:100%}
.res:hover{transform:translateX(4px);box-shadow:var(--sh-1)}
.res__th{width:58px;height:58px;border-radius:10px;display:grid;place-items:center;padding:8px;flex:0 0 auto}
.res__th svg{height:100%;width:auto}
.res b{display:block;font-size:.94rem;font-weight:600;letter-spacing:-.01em}
.res small{font-size:.74rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.res .price{margin-left:auto;font-size:.98rem}
.empty{padding:26px 4px;color:var(--muted);font-size:.9rem}

/* cart drawer */
.cart{position:fixed;top:0;right:0;bottom:0;width:min(430px,100%);z-index:130;background:var(--bone);display:flex;flex-direction:column;transform:translateX(101%);transition:transform .5s var(--ease-out);box-shadow:-30px 0 70px -30px rgba(0,0,0,.45)}
.cart.open{transform:none}
.cart__top{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 16px;flex:0 0 auto}
.cart__top h2{font-size:1.22rem;letter-spacing:-.02em}
.cart__top span{font-size:.76rem;color:var(--muted);margin-left:8px;font-family:var(--f-body);font-weight:500}
.ship{padding:0 22px 16px;flex:0 0 auto}
.ship p{font-size:.78rem;color:var(--muted);margin-bottom:9px}
.ship p b{color:var(--ink);font-weight:600}
.ship__bar{height:5px;border-radius:99px;background:rgba(16,23,37,.09);overflow:hidden}
.ship__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pure),var(--ink));width:0;transition:width .6s var(--ease-out)}
.cart__body{flex:1;overflow-y:auto;padding:4px 22px 22px;display:flex;flex-direction:column;gap:12px}
.citem{display:flex;gap:14px;padding:12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);animation:slideIn .45s var(--ease-out)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.citem__th{width:64px;height:64px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;padding:8px}
.citem__th svg{height:100%;width:auto}
.citem__b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.citem__b b{font-size:.87rem;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.citem__b small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qty{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);padding:2px;align-self:flex-start;margin-top:4px}
.qty button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.qty button:hover{background:var(--bone)}
.qty svg{width:12px;height:12px}
.qty span{min-width:22px;text-align:center;font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums}
.citem__r{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex:0 0 auto}
.citem__r .price{font-size:.95rem}
.rm{font-size:.7rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.rm:hover{color:#D2463C}
.cart__foot{flex:0 0 auto;padding:18px 22px 24px;border-top:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;gap:14px}
.crow{display:flex;align-items:baseline;justify-content:space-between}
.crow b{font-family:var(--f-display);font-size:1.35rem;letter-spacing:-.02em}
.crow span{font-size:.84rem;color:var(--muted)}
.cart__foot small{font-size:.72rem;color:var(--muted);text-align:center}
.cempty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:40px 20px;color:var(--muted)}
.cempty svg{width:42px;height:42px;opacity:.3}
.cempty b{font-family:var(--f-display);font-size:1.15rem;color:var(--ink)}
.cempty p{font-size:.88rem;max-width:26ch}

/* quick view modal */
.modal{position:fixed;inset:0;z-index:135;display:grid;place-items:center;padding:20px;pointer-events:none}
.modal.open{pointer-events:auto}
.modal__card{
  width:min(900px,100%);max-height:92svh;overflow-y:auto;background:var(--bone);border-radius:var(--r-lg);
  display:grid;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);
  box-shadow:var(--sh-3);
}
.modal.open .modal__card{opacity:1;transform:none}
@media(min-width:800px){.modal__card{grid-template-columns:1fr 1fr}}
.modal__media{position:relative;display:grid;place-items:center;padding:16% 12%;min-height:260px}
.modal__media svg{height:100%;max-height:300px;width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.22))}
.modal__body{padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px}
.modal__body h3{font-size:1.6rem;letter-spacing:-.03em;line-height:1.1}
.modal__body .lede{font-size:.92rem}
.closex{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;backdrop-filter:blur(6px);transition:transform .3s,background .25s}
.closex:hover{transform:rotate(90deg)}
.closex svg{width:16px;height:16px}
.qrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* toast */
.toasts{position:fixed;left:50%;bottom:22px;transition:bottom .3s var(--ease);transform:translateX(-50%);z-index:160;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:calc(100% - 32px);max-width:400px}
.toast{
  display:flex;align-items:center;gap:12px;padding:12px 20px 12px 14px;border-radius:var(--r-pill);
  background:var(--ink);color:#fff;box-shadow:var(--sh-2);font-size:.86rem;font-weight:500;
  animation:tIn .45s var(--ease-out);max-width:100%;
}
.toast i{width:26px;height:26px;border-radius:50%;background:#1F9D62;display:grid;place-items:center;flex:0 0 auto}
.toast svg{width:14px;height:14px}
.toast.out{animation:tOut .35s var(--ease) forwards}
@keyframes tIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(12px) scale(.96)}}

/* ============================================================
   Inner pages
   ============================================================ */
main{padding-top:0}
.page{padding-top:var(--head-h)}
.crumb{display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--muted);padding:22px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb svg{width:12px;height:12px;opacity:.5}

.pdp{display:grid;gap:32px;padding:26px 0 12px}
@media(min-width:900px){.pdp{grid-template-columns:1.05fr .95fr;gap:52px;padding:34px 0 20px;align-items:start}}
.gallery{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--head-h) + 16px)}
@media(max-width:899px){.gallery{position:static}}
.gmain{position:relative;border-radius:var(--r-lg);aspect-ratio:1/1;display:grid;place-items:center;padding:11%;overflow:hidden}
.gmain svg{height:100%;width:auto;max-width:100%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.24));animation:gIn .6s var(--ease-out)}
@keyframes gIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.gthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gthumb{min-width:0;aspect-ratio:1/1;border-radius:12px;padding:9px;display:grid;place-items:center;border:2px solid transparent;transition:border-color .25s,transform .3s}
.gthumb svg{height:100%;width:auto;max-width:100%}
.gthumb:hover{transform:translateY(-2px)}
.gthumb.on{border-color:var(--ink)}
.gthumb.t-apex{background:radial-gradient(circle at 50% 40%,#3C4552,#171C25)}
.pdp__k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.pdp h1{font-size:clamp(1.9rem,4.2vw,2.9rem);letter-spacing:-.035em;margin:8px 0 14px;line-height:1.02}
.pdp__price{display:flex;align-items:baseline;gap:12px;margin:20px 0 6px}
.pdp__price .price{font-size:1.7rem}
.save{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:#E7F6EE;color:#17784E;padding:5px 10px;border-radius:6px}
.buys{display:flex;flex-direction:column;gap:10px;margin:22px 0 18px}
.buys__row{display:flex;gap:10px;align-items:center}
.trust{display:flex;flex-wrap:wrap;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.trust div{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}
.trust svg{width:15px;height:15px;opacity:.7}
.bul{display:grid;gap:10px;margin:20px 0 0}
.bul li{display:flex;gap:11px;font-size:.9rem;line-height:1.5}
.bul svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--ok,#1F9D62)}

.panels{display:grid;gap:16px}
@media(min-width:820px){.panels{grid-template-columns:repeat(2,1fr)}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px}
.panel h3{font-size:1.12rem;margin-bottom:16px;letter-spacing:-.02em}
.spec{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.87rem}
.spec:last-child{border-bottom:0}
.spec span{color:var(--muted)}
.spec b{font-weight:600;text-align:right}
.steps{display:grid;gap:18px}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px}
.step em{font-family:var(--f-display);font-style:normal;font-size:.78rem;font-weight:700;letter-spacing:.1em;color:var(--muted);display:block;margin-bottom:14px}
.step h4{font-size:1rem;margin-bottom:8px;letter-spacing:-.01em}
.step p{font-size:.87rem;color:var(--muted);line-height:1.55}

.acc{border-top:1px solid var(--line)}
.acc__i{border-bottom:1px solid var(--line)}
.acc__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-align:left;font-size:1rem;font-weight:600;letter-spacing:-.01em;transition:color .2s}
.acc__q:hover{color:var(--pure-deep)}
.acc__q i{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;transition:transform .35s var(--ease-out),background .25s,color .25s}
.acc__q svg{width:12px;height:12px}
.acc__i.on .acc__q i{transform:rotate(45deg);background:var(--ink);color:#fff;border-color:var(--ink)}
/* The panel is shown and hidden by the [hidden] attribute, which gtgt-accordion.js
   toggles. It used to also carry max-height:0 with nothing anywhere to raise it,
   so removing [hidden] revealed a box clamped to zero height and no answer ever
   appeared. The open state is animated instead of measured. */
.acc__a{overflow:hidden}
.acc__i.on .acc__a{animation:accOpen .38s var(--ease-out) both}
@keyframes accOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.acc__i.on .acc__a{animation:none}}
.acc__a p{padding:0 0 22px;font-size:.9rem;color:var(--muted);line-height:1.65;max-width:70ch}

.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(255,255,255,.95);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;gap:14px;transform:translateY(110%);transition:transform .45s var(--ease-out)}
.stickybuy.in{transform:none}
@media(min-width:900px){.stickybuy{display:none}}
.stickybuy .price{font-size:1.05rem}
.stickybuy b{display:block;font-size:.78rem;font-weight:600}

/* editorial / about / support */
.split{display:grid;gap:34px}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px;align-items:center}}
.prose p{font-size:1rem;line-height:1.75;color:var(--muted);max-width:64ch}
.prose p+p{margin-top:18px}
.stat-row{display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:36px}
@media(min-width:600px){.stat-row{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--paper);padding:26px 22px}
.stat b{display:block;font-family:var(--f-display);font-size:1.9rem;letter-spacing:-.03em;margin-bottom:5px}
.stat span{font-size:.8rem;color:var(--muted)}
.cards2{display:grid;gap:16px}
@media(min-width:720px){.cards2{grid-template-columns:repeat(2,1fr)}}
.scard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .4s var(--ease-out),box-shadow .4s}
.scard:hover{transform:translateY(-4px);box-shadow:var(--sh-1)}
.scard i{width:44px;height:44px;border-radius:13px;background:var(--bone);display:grid;place-items:center;margin-bottom:6px}
.scard i svg{width:20px;height:20px;stroke-width:1.5}
.scard h3{font-size:1.05rem;letter-spacing:-.02em}
.scard p{font-size:.88rem;color:var(--muted);line-height:1.6}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.76rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 15px;font-size:.92rem;transition:border-color .25s,box-shadow .25s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,23,37,.07)}
.field textarea{resize:vertical;min-height:120px}
.form{display:grid;gap:16px;justify-items:stretch}
.form>.btn{justify-self:start}
@media(min-width:620px){.form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.tab{padding:10px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--paper);font-size:.85rem;font-weight:500;transition:all .25s}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabpane{display:none}
.tabpane.on{display:block;animation:paneIn .4s var(--ease-out)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* collection hero band */
.band{padding:calc(var(--head-h) + 46px) 0 56px;position:relative;overflow:hidden}
.band h1{font-size:clamp(2.6rem,8vw,5rem);letter-spacing:-.04em;line-height:.94}
.band .lede{margin-top:18px}
.band__art{position:absolute;right:-6%;bottom:-14%;width:38%;opacity:.9;pointer-events:none}
@media(max-width:820px){.band__art{display:none}}
.t-pure-bg{background:linear-gradient(160deg,#F4FAFE,#DCEDFB 70%,#CBE4F8)}
.t-apex-bg{background:linear-gradient(160deg,#1A202B,#0B0E14 70%,#07090E);color:#fff}
.t-soft-bg{background:linear-gradient(160deg,#FEF6F8,#FBE7EC 70%,#F8D9E0)}

/* misc */
.marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--paper);padding:15px 0}
.marquee__t{display:flex;gap:44px;width:max-content;animation:mq 34s linear infinite;align-items:center}
.marquee:hover .marquee__t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee span{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:14px}
.marquee span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line)}
.cursor{position:fixed;top:0;left:0;width:26px;height:26px;border:1px solid rgba(16,23,37,.35);border-radius:50%;pointer-events:none;z-index:200;transform:translate(-50%,-50%);transition:width .3s var(--ease-out),height .3s var(--ease-out),background .3s,border-color .3s,opacity .3s;opacity:0}
@media(hover:hover)and(pointer:fine){.cursor{opacity:.55}}
.cursor.big{width:54px;height:54px;background:rgba(16,23,37,.05);border-color:rgba(16,23,37,.22)}
.dark .cursor,.hero .cursor{border-color:rgba(255,255,255,.4)}

/* --- hero load sequence --- */
[data-seq]{opacity:0;transform:translateY(20px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.hero h1 .ln i[data-seq]{opacity:1;transform:translateY(106%);transition:transform 1s var(--ease-out)}
[data-seq].go,.hero h1 .ln i[data-seq].go{opacity:1;transform:none}
.tag.act{background:rgba(10,14,22,.74);border-color:rgba(255,255,255,.5);box-shadow:0 18px 44px -16px rgba(0,0,0,.85),0 0 0 3px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.3)}

body.lock .toasts{bottom:auto;top:calc(var(--head-h) + 12px)}
</style>

/* ============================================================
   GTGT V2 — Shopify section additions
   ============================================================ */

/* Hero: slide + media swapping (rail-driven carousel) */
.hero__slide{display:none}
.hero__slide.is-active{display:block;animation:heroCopyIn .6s var(--ease-out) both}
@keyframes heroCopyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero__stage{position:relative;z-index:2;aspect-ratio:1/.92;max-width:680px;margin:0 auto;width:100%}
@media(max-width:1023px){.hero__stage{margin-top:18px;max-width:560px}}

.hero__media{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out)}
.hero__media.is-active{opacity:1;visibility:visible}
.hero__img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 46px rgba(0,0,0,.55))}

/* Placeholder slot — final hero photography pending */
.hero__ph{
  width:100%;height:100%;display:grid;place-items:center;gap:14px;align-content:center;
  border:1px dashed rgba(255,255,255,.22);border-radius:var(--r-lg);
  background:radial-gradient(circle at 50% 42%, rgba(247,220,174,.10), rgba(255,255,255,.02) 62%);
}
.hero__ph-svg{width:52%;max-width:300px;height:auto;opacity:.26;fill:#fff}
.hero__ph-note{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-align:center;padding:0 18px;
}

/* Rail: numbered slide indicators */
.rail__btn{font-size:.68rem;letter-spacing:.12em;font-weight:600;color:rgba(255,255,255,.58);transition:color .3s;font-variant-numeric:tabular-nums}
.rail__btn.on{color:#fff}
.rail__bar{width:1px;height:52px;background:rgba(255,255,255,.16);display:block}

.tag__tx{min-width:0}

@media (prefers-reduced-motion: reduce){
  .hero__slide.is-active{animation:none}
  .hero__media{transition:none}
  .stage__glow,.pod__inner{animation:none}
}

/* Section headers */
.sec__head{margin-bottom:34px}
.sec__head--center{text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.sec__head--split{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sec__head--split .lede{margin-top:6px}
.lede--center{margin-left:auto;margin-right:auto}
.wrap--wide{max-width:1440px}

/* Brand cards: optional background image */
.col__bg-img{width:100%;height:100%;object-fit:cover;object-position:50% var(--bg-y,50%)}

/* Product cards */
.pcard__ph{width:100%;height:100%;object-fit:contain;opacity:.4}
.pcard__media-link{position:absolute;inset:0;z-index:1}
.pcard__media{cursor:pointer}
.pcard__form{display:flex}
.addbtn--view{text-decoration:none}

/* Ratings slot — reserved, intentionally empty until real reviews exist.
   Keeps card heights stable now and when ratings are added later. */
.pcard__rating-slot{min-height:19px}

.price--soon{
  font-family:var(--f-body);font-size:.88rem;font-weight:500;
  letter-spacing:0;color:var(--muted);
}
.t-apex .price--soon{color:rgba(255,255,255,.62)}

/* Reviews / community carousels */
.rev__car,.comm__car{position:relative;min-width:0}
.rev__intro .btn{margin-top:26px}
.rctl button[disabled]{opacity:.35;pointer-events:none}

.gal__arw{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:var(--sh-1);transition:transform .25s var(--ease-out),background .25s;
}
.gal__arw:hover{transform:translateY(-50%) scale(1.08)}
.gal__arw[disabled]{opacity:0;pointer-events:none}
.gal__arw svg{width:16px;height:16px}
.gal__arw--prev{left:-6px}
.gal__arw--next{right:-6px}
@media(min-width:1024px){.gal__arw--prev{left:-18px}.gal__arw--next{right:-18px}}

.gtile__ph{width:100%;height:100%;object-fit:cover;object-position:var(--tile-x,50%) center}
.gtile__ph--empty{background:linear-gradient(160deg,#E8E5DE,#D8D4CB)}
.gtile::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42) 100%)}

.comm__intro .socials{margin-top:22px}

/* ============================================================
   Header / footer — GTGT V2 shell
   ============================================================ */
.brand{gap:11px}
.brand__logo{height:38px;width:auto;transition:height .35s var(--ease)}
.hdr.small .brand__logo{height:30px}
.brand__wordmark{font-family:var(--f-display);font-weight:800;font-size:1.45rem;letter-spacing:-.03em}
.brand__tag{
  display:none;font-size:.52rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--muted);line-height:1.1;max-width:11ch;
}
@media(min-width:560px){.brand__tag{display:block}}
.dark .brand__tag,.ftr .brand__tag{color:rgba(255,255,255,.5)}

/* Mobile nav needs the hidden attribute to lose to the open state */
.mnav[hidden]{display:flex}

/* Footer */
.ftr__brand .ftr__logo{height:40px;width:auto;margin-bottom:18px}
.ftr__tag{font-size:.86rem;color:rgba(255,255,255,.55);max-width:30ch;line-height:1.6;margin-top:12px}
.ftr__h{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.45);margin-bottom:16px;font-family:var(--f-body);
}
.ftr__col li+li{margin-top:11px}
.ftr__col li a{font-size:.88rem;color:rgba(255,255,255,.74);transition:color .2s,padding-left .25s}
.ftr__col li a:hover{color:#fff;padding-left:5px}
.ftr__news-copy{font-size:.86rem;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:14px}
.ftr__field{display:flex;gap:8px}
.ftr__field input{
  flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill);padding:13px 18px;font-size:.87rem;color:#fff;
  transition:border-color .25s,background .25s;
}
.ftr__field input::placeholder{color:rgba(255,255,255,.4)}
.ftr__field input:focus{outline:none;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.ftr__field button{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;transition:transform .3s var(--ease-out);
}
.ftr__field button:hover{transform:scale(1.07)}
.ftr__field button svg{width:17px;height:17px}
.ftr__msg{margin-top:10px;font-size:.8rem}
.ftr__msg--ok{color:#7BD7AC}
.ftr__msg--err{color:#F2A0AC}
.ftr__copy{font-size:.76rem;color:rgba(255,255,255,.42)}
.ftr__pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ftr__pay-ic{height:26px;width:auto;border-radius:5px;background:#fff}

/* ============================================================
   Inner pages — About / Support (GTGT V2)
   ============================================================ */
.page__head{padding:40px 0 30px}
.page__head .eyebrow{display:block}
.page__head h1{margin:14px 0 0}
.page__head .lede{margin-top:16px}

.rte p+p{margin-top:14px}
.rte a{text-decoration:underline;text-underline-offset:3px}
.rte ul{list-style:disc;padding-left:20px;margin-top:12px}
.rte li+li{margin-top:6px}

/* About — alternating story rows */
.story{display:grid;gap:28px;align-items:center;padding:34px 0}
@media(min-width:900px){
  .story{grid-template-columns:1fr 1fr;gap:56px}
  .story--b .story__copy{order:2}
}
.story+.story{border-top:1px solid var(--line)}
.story__copy .eyebrow{display:block;margin-bottom:12px}
.story__copy h2{margin-bottom:14px}
.story__media{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:var(--mist)}
.story__img{width:100%;height:100%;object-fit:cover}
.story__ph{position:absolute;inset:0;background:linear-gradient(160deg,#EDEAE3,#DAD6CC)}

.about__values{padding-top:40px}
.about__values-h{margin-bottom:24px}

/* Support */
.split--form{display:grid;gap:36px;align-items:start}
@media(min-width:900px){.split--form{grid-template-columns:1.15fr .85fr;gap:48px}}
.support__formwrap h2{margin-bottom:20px}
.support__faqs{margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.support__faqs h2{margin-bottom:20px}
.support__faqs .acc{max-width:820px}
.field__opt{text-transform:none;font-weight:400}
.form__note{padding:12px 16px;border-radius:var(--r-md);font-size:.86rem;margin-bottom:18px}
.form__note--ok{background:#E7F6EE;color:#166A45}
.form__note--err{background:#FCEBEE;color:#9B2440}
.acc__a[hidden]{display:none}

/* ============================================================
   Prototype parity additions (GTGT V2)
   ============================================================ */

/* Section bar: eyebrow + heading left, lede or link right */
.sec__bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:34px}
.sec__bar>div{min-width:0}
.sec__bar-h{margin-top:12px}
.sec__bar-sub{margin-top:10px}
.sec__bar-lede{max-width:40ch}

/* Hero stage: image slots */
.pod__img{width:100%;height:auto;filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}
.pod__ph{display:grid;place-items:center;width:100%;aspect-ratio:1/1.6;
  border:1px dashed rgba(255,255,255,.2);border-radius:var(--r-md);
  background:rgba(255,255,255,.03)}
.pod__ph-svg{width:60%;height:auto;opacity:.3;fill:#fff}
.rail__btn.on{color:#fff}
.tag{text-decoration:none}

/* Brand card artwork */
.col__art-img{height:100%;width:auto;object-fit:contain}
.col__art-ph{height:100%;width:auto;opacity:.22;fill:currentColor}
.col{text-decoration:none}

/* Ratings slot reserved while ratings are off */
.stars--empty{min-height:19px}

/* Product cards */
.pcard__img{width:auto;height:100%;max-width:100%;object-fit:contain}
.pcard__ph{width:auto;height:100%;opacity:.35}
.pcard__n{display:block}
.addbtn--view{text-decoration:none}
.qv{display:block;text-align:center;text-decoration:none}

/* Reviews */
.rev__lede{margin-top:18px}
.rev__note{margin:22px 0 0}
.nav-a--light{border-color:rgba(16,23,37,.18);color:var(--ink)}
.nav-a--light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.comm__h{margin-top:12px}
.comm__lede{margin-top:16px}
.comm__ctl{margin-top:18px}
.comm__note{color:var(--muted);margin-left:4px}
.comm__intro .socials{margin-top:24px}

/* Product page */
.pdp__info{min-width:0}
.pdp__desc{margin-top:14px}
.pdp__desc p+p{margin-top:12px}
.pdp__variants{display:grid;gap:14px;margin-bottom:18px}
.gmain__img{width:auto;height:100%;max-width:100%;object-fit:contain}
.gmain__ph{width:60%;height:auto;opacity:.3}
.gthumb img{width:100%;height:100%;object-fit:contain}
.gallery__note{color:var(--muted);font-size:.72rem;margin-top:10px}
.qty input{width:44px;text-align:center;background:none;border:0;font-weight:600;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp__add{flex:1;justify-content:center}
.pdp__add[disabled]{opacity:.45;pointer-events:none}
.buys .shopify-payment-button{margin-top:10px}

.stickybuy__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stickybuy__info b{font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stickybuy[hidden]{display:none}

.steps__h,.faq__h{margin-bottom:26px}

/* Collection band + grid */
.band__img{width:100%;height:auto;object-fit:contain}
.band__ph{width:100%;height:auto;opacity:.2;fill:currentColor}
.band__eyebrow{display:block;margin:26px 0 14px}
.band__lede{font-size:1.1rem}
.band__cta{margin-top:30px}
.grid__lede{max-width:36ch}

.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px}
.pager__a{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600}
.pager__a svg{width:15px;height:15px}
.pager__n{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Simple / 404 page */
.page__center{padding:90px 0;text-align:center}
.page__center-lede{margin:16px auto 28px}

/* About */
.about__side .stat-row{margin-top:0}
.about__panel{margin-top:16px}

/* Support tabs */
.tabpane[hidden]{display:none}
.tabpane.on{display:block}
.acc--wide{max-width:820px}
.panel--narrow{max-width:560px}
.cards2--single{grid-template-columns:1fr}
.track__copy{font-size:.9rem;color:var(--muted);line-height:1.6;margin-bottom:16px}
.track__note{color:var(--muted);margin-top:16px}
.ftr__socials{margin-top:22px}
.ftr__socials a{border-color:rgba(255,255,255,.16)}

/* Variant swatches — only rendered for products that have variants */
.swatches{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.swatches__legend{
  width:100%;padding:0;margin-bottom:10px;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--muted);
}
.swatches__legend span{color:var(--ink);letter-spacing:.02em;text-transform:none;font-size:.84rem}
.swatch{position:relative;display:inline-grid;place-items:center;cursor:pointer}
.swatch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.swatch__chip{
  width:34px;height:34px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(16,23,37,.18);
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.swatch:hover .swatch__chip{transform:scale(1.06)}
.swatch input:checked+.swatch__chip{
  box-shadow:inset 0 0 0 1px rgba(16,23,37,.18), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}
.swatch input:focus-visible+.swatch__chip{outline:2px solid var(--pure);outline-offset:4px}

/* Thumbnail row scrolls when a product has more images than fit */
.gthumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.gthumbs::-webkit-scrollbar{display:none}
.gthumbs .gthumb{flex:0 0 72px}

/* Richtext fields emit their own <p>, so their wrappers are <div>. Keep the
   typographic rhythm and stop the last paragraph adding trailing space. */
.lede > p, .hero__lede > p, .ftr__news-copy > p, .track__copy > p,
.col p > p, .step p > p, .why-card p > p{margin:0}
.lede > p + p, .hero__lede > p + p{margin-top:12px}
.page__bar{margin:26px 0 36px;align-items:flex-end}
.page__bar-lede{max-width:38ch}
.gtgt-product-grid .grid3{padding-bottom:60px}

/* Reviews: CTA and centred controls (design-image layout) */
.rev__cta{margin-top:26px}
.rctl--center{justify-content:center;margin-top:28px}
.comm__note--under{margin-top:14px;color:var(--muted)}

/* Why GTGT: vertical rules between columns, no surrounding panel */
.whys--lines{background:none;border:0;border-radius:0;gap:0}
.whys--lines .why-card{background:none;position:relative}
.whys--lines .why-card:hover{background:none}
@media(min-width:640px){
  .whys--lines .why-card + .why-card::before{
    content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:var(--line);
  }
  .whys--lines .why-card:nth-child(3)::before{content:none}
}
@media(min-width:1024px){
  .whys--lines .why-card:nth-child(3)::before{content:""}
}
.av--img{object-fit:cover}

/* Hero pods: height drives the size so differently shaped products read at a
   comparable scale. Pods are content-width - clamping to the flex track made a
   square canvas letterbox itself down to a fraction of its height. */
.stage__products{width:80%;height:48%;gap:2.5%;align-items:flex-end;justify-content:center}
.pod{flex:0 0 auto;height:100%}
.pod--mid{flex:0 0 auto}
.pod__inner{height:100%;display:flex;align-items:flex-end;justify-content:center}
.pod__img{
  height:calc(var(--pod-scale, 90) * 1%);
  width:auto;max-width:none;object-fit:contain;object-position:bottom;
  transform:rotate(calc(var(--pod-rot, 0) * 1deg)) scaleX(var(--pod-flip, 1));
  transform-origin:50% 100%;
}
.pod__ph{aspect-ratio:1/2.1;width:auto;height:calc(var(--pod-scale, 90) * 1%)}
@media(max-width:640px){.stage__products{width:92%;gap:1.5%}}

/* ============================================================
   Photographic hero
   ============================================================
   The supplied composition backs the whole band and the copy sits over its
   darker left side. Sizing the picture inside the right-hand column instead
   made it read as a pasted-in rectangle.

   The photograph supplies the background, so the gradient layer is suppressed:
   it is animated (which promotes it to its own compositing layer) and painted
   over the photo. Layer order is set explicitly rather than by DOM order. */
.hero--photo .hero__bg{display:none}
.hero__photo{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero--photo .hero__scrim{z-index:2}
.hero--photo .dust{z-index:3}
.hero--photo .hero__grid{z-index:4}
.hero--photo .hero__pins{z-index:5}
.hero--photo .rail{z-index:6}

/* --- the frame ---------------------------------------------------------
   hero__frame is the picture's own box: the full band width, the picture's own
   aspect ratio, centred vertically. Percentages inside it are therefore the
   PICTURE's coordinates, which is what lets a pill be pinned to the product it
   names instead of drifting with the viewport.

   The width is deliberately locked rather than left to object-fit: cover. Cover
   crops sideways as soon as the band is taller than width / 2.045 - which the
   copy causes around 1024px - and that silently slid every pill inwards,
   off its product. Locking the width means the picture is only ever cropped top
   and bottom (which the band does anyway), and when the copy makes the band
   taller than the picture the shortfall shows as flat --void at the top and
   bottom edges, where the scrim is already at its darkest. */
.hero__frame{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:100%;aspect-ratio:1794/877;
}
.hero__photo-img{width:100%;height:100%;object-fit:cover;display:block}

/* Band is sized from the photograph's own proportions. Letting it fill 100svh
   zoomed the composition in and cut the ring off. */
@media(min-width:1024px){
  .hero--photo{min-height:min(100svh, 49vw)}
}

/* Scrim: darkens only the left third for legibility. Running it to 72% buried
   the composition, which sits centred in the photograph. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(7,11,19,.94) 0%, rgba(7,11,19,.86) 14%,
      rgba(7,11,19,.62) 30%, rgba(7,11,19,.22) 42%, rgba(7,11,19,0) 50%),
    linear-gradient(180deg,
      rgba(7,11,19,.72) 0%, rgba(7,11,19,.2) 10%, rgba(7,11,19,0) 20%,
      rgba(7,11,19,0) 78%, rgba(7,11,19,.45) 90%, rgba(7,11,19,.92) 100%);
}
.hero__grid{position:relative;z-index:2}

/* --- copy: hard left ---------------------------------------------------
   The centred 1280px wrap pushed the headline into the middle of the picture,
   where it ran over the Pure bottle. In photograph mode the copy leaves the
   wrap, hugs the left edge and is capped so it always ends before the
   composition starts (the products begin at 46% of the picture). */
@media(min-width:1024px){
  /* The gutter and the column are both in vw, so the copy ends at the same
     43.6% of the picture at every width, clear of the Pure bottle at 46%. */
  .hero--photo .hero__grid{
    max-width:none;grid-template-columns:1fr;
    padding-left:clamp(24px, 3.6vw, 104px);padding-right:40px;
  }
  .hero--photo .hero__copy{max-width:min(40vw, 760px)}
  /* Same 5.9rem ceiling as the shared scale, but the vw term is tuned to the
     column rather than the viewport: "EVERYDAY" is 5.43em wide and .ln clips
     its overflow for the reveal animation, so at 10.4vw the headline lost its
     last letter below about 1370px. */
  .hero--photo .h-xl{font-size:clamp(2.6rem, 6.9vw, 5.9rem)}
  .hero--photo .hero__lede{max-width:34ch}
}

/* --- brand pills over the photograph -----------------------------------
   Coordinates are read off the picture itself: Pure occupies 46-53.5% across
   and 20-73% down, Apex 55.5-64% / 17-74%, Soft 65.5-72.5% / 26-73%, and the
   plinth face runs 32-79% across from 76% down. Each pill is placed hard
   against its own product - Pure to the left, Apex grounded on the plinth
   beneath it, Soft to the right - so no pill can be read as labelling its
   neighbour. Two constraints set the heights: nothing above 29%, because on a
   short window the band is height-capped and the top of the picture is cropped
   up behind the header; and nothing left of about 42%, which is where the copy
   ends - Pure's pill straddles the bottle's own left edge rather than sitting in
   the gap beside it, so the headline keeps its full size instead of being
   squeezed into the strip left of the pill. */
.hero__pins{position:absolute;inset:0;pointer-events:none}
.hero__pins .tag{pointer-events:auto}
/* Pure and Apex are centred on their own product and Soft is anchored just
   past the shaver's right edge, never on a pill's far edge: a pill is a fixed
   number of pixels wide while the picture scales with the viewport, so
   anchoring the far edge walked it into - or away from - the product as the
   window changed. Apex sits on the clipper's black body rather than on the
   plinth below it, where frosted glass over lit marble all but vanished. The
   three form a diagonal - Soft at 29%, Apex at 40%, Pure at 55% - so no two
   ever meet and each reads against the product it names. */
.hero__pins .tag--pure{left:48%;right:auto;top:55%;translate:-50% 0}
.hero__pins .tag--apex{left:59.7%;right:auto;top:40%;translate:-50% 0}
/* Soft was anchored just past the shaver's right edge, which put the whole
   pill in empty background and read as detached - the other two sit ON their
   product. Measured off the picture, the lilac body runs 66.6-73.8% across and
   25.3-99.3% down, so the pill is now centred on 70.2% like Apex is on its
   clipper, and dropped to 50% so it crosses the plain mid-body: clear of the
   head at the top and of the GTGT branding near the foot. */
.hero__pins .tag--soft{left:70.2%;right:auto;top:50%;translate:-50% 0}

/* Below 1440px the picture is small enough that a full-size pill starts to read
   as furniture rather than a label. */
@media(min-width:1024px) and (max-width:1439px){
  .hero__pins .tag{padding:7px 13px 7px 7px}
  .hero__pins .tag__ic{width:26px;height:26px}
  .hero__pins .tag__ic svg{width:13px;height:13px}
  .hero__pins .tag__tx b{font-size:.66rem}
  .hero__pins .tag__tx span{font-size:.6rem}
}

/* --- phones and small tablets ------------------------------------------
   The same composed scene as the desktop hero, only smaller: one dark band,
   the picture zoomed in on the plinth, the pills still pinned to the products.
   The copy sits above the composition rather than over it - at 375px the left
   third is 125px wide, which is not a column - and the picture's top fades into
   the band, so it reads as one hero rather than a stack of blocks.

   The trick is that hero__frame is widened past the viewport instead of being
   cropped by object-fit. A 2.05:1 picture in a phone-shaped band loses about
   three quarters of its width to cover, and the pills went with it. Here the
   frame is 180vw wide and pulled 70vw left, so the visible window is the
   picture's own 38.9%-94.4% - all three products, the ring, and room to the
   right of Soft for its pill - and the pill percentages stay the values they
   have on desktop. */
@media(max-width:1023px){
  .hero--photo{
    display:flex;flex-direction:column;min-height:0;position:relative;
    padding:calc(var(--head-h) + 30px) 0 0;overflow:hidden;
    background:
      radial-gradient(120% 70% at 50% 0%, rgba(60,86,132,.34) 0%, rgba(7,11,19,0) 70%),
      linear-gradient(180deg,#0A0F1A 0%, #070B13 100%);
  }
  .hero--photo .hero__grid{order:1;z-index:4;position:relative}
  .hero--photo .hero__copy{max-width:none}
  .hero--photo .hero__eyebrow{letter-spacing:.2em;font-size:.65rem;margin-bottom:14px}
  .hero--photo .hero__lede{font-size:.97rem;margin-bottom:26px;max-width:38ch}
  .hero--photo .hero__cta .btn{width:auto}
  .hero--photo .hero__scrim{display:none}
  .hero--photo .dust{display:none}

  /* The picture is the last element in the band, so bottom:0 aligns the pin
     layer's frame with it without either needing to know the copy's height. */
  .hero--photo .hero__photo{
    position:relative;inset:auto;order:2;width:100%;height:88vw;
    margin-top:-4vw;overflow:hidden;z-index:1;
  }
  .hero--photo .hero__frame{
    position:absolute;left:-70vw;right:auto;top:auto;bottom:0;transform:none;
    width:180vw;aspect-ratio:1794/877;min-height:0;
  }
  .hero--photo .hero__photo-img{object-position:50% 50%}
  /* Melts the picture's top into the copy's ground and darkens its foot, so the
     band has no seam in it. */
  .hero--photo .hero__photo::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,
      #070B13 0%, rgba(7,11,19,.72) 7%, rgba(7,11,19,.2) 16%, rgba(7,11,19,0) 26%,
      rgba(7,11,19,0) 84%, rgba(7,11,19,.55) 95%, #070B13 100%);
  }

  /* Pins overlay the picture exactly: same height, same frame offset. */
  .hero--photo .hero__pins{
    position:absolute;left:0;right:0;bottom:0;top:auto;
    height:88vw;padding:0;overflow:hidden;
  }
  .hero--photo .hero__frame--pins{
    position:absolute;left:-70vw;bottom:0;width:180vw;aspect-ratio:1794/877;
  }
  /* A pill is a fifth of the frame at this size, so the two outer ones are
     re-anchored on the edges that face the window: Soft by its right edge, which
     keeps it inside the frame whatever its subtitle says, and Pure a point
     further right. Both are still hard against their own product. */
  .hero--photo .hero__pins .tag--soft{left:70.2%;right:auto;top:56%;translate:-50% 0}
  .hero--photo .hero__pins .tag--pure{left:49%}
  .hero--photo .hero__pins .tag{
    padding:5px 11px 5px 5px;gap:7px;
  }
  .hero--photo .hero__pins .tag__ic{width:22px;height:22px}
  .hero--photo .hero__pins .tag__ic svg{width:11px;height:11px}
  .hero--photo .hero__pins .tag__tx b{font-size:.58rem;letter-spacing:.07em}
  .hero--photo .hero__pins .tag__tx span{font-size:.52rem}
}

/* Tablets have room to pull back from the crop and show nearly the whole
   picture, closer to how the desktop band frames it. */
@media(min-width:600px) and (max-width:1023px){
  .hero--photo .hero__photo{height:63.6vw;margin-top:-2vw}
  .hero--photo .hero__frame{left:-26vw;width:130vw}
  .hero--photo .hero__pins{height:63.6vw}
  .hero--photo .hero__frame--pins{left:-26vw;width:130vw}
  .hero--photo .hero__pins .tag{padding:7px 13px 7px 7px;gap:9px}
  .hero--photo .hero__pins .tag__ic{width:26px;height:26px}
  .hero--photo .hero__pins .tag__ic svg{width:13px;height:13px}
  .hero--photo .hero__pins .tag__tx b{font-size:.66rem}
  .hero--photo .hero__pins .tag__tx span{font-size:.6rem}
}

/* Brand card background photo (reference layout: photo fills the card, copy
   sits top-left over a tint wash that fades out before the subject). */
.col__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:var(--scrim-o,.75)}
.col--pure .col__scrim{background:
  linear-gradient(112deg,#EAF4FD 0%,#EAF4FD 20%,rgba(234,244,253,.74) 40%,rgba(234,244,253,0) 70%),
  linear-gradient(to top,rgba(234,244,253,.82) 0%,rgba(234,244,253,0) 26%)}
.col--apex .col__scrim{background:
  linear-gradient(112deg,#0E1219 0%,#0E1219 20%,rgba(14,18,25,.74) 40%,rgba(14,18,25,0) 70%),
  linear-gradient(to top,rgba(14,18,25,.82) 0%,rgba(14,18,25,0) 26%)}
.col--soft .col__scrim{background:
  linear-gradient(112deg,#FBE9EE 0%,#FBE9EE 20%,rgba(251,233,238,.74) 40%,rgba(251,233,238,0) 70%),
  linear-gradient(to top,rgba(251,233,238,.82) 0%,rgba(251,233,238,0) 26%)}

/* On a photo card the copy column is held to the clear left band. */
.col--photo .col__n{margin-bottom:16px}
.col--photo h3{max-width:17ch}
.col--photo p{max-width:21ch;opacity:.82}
@media(max-width:819px){
  /* One column. Left to stretch, the card turns landscape and crops a portrait
     photo to pieces, so hold it to the same ~0.69 box the desktop grid gives.
     One focus value then frames correctly at every width. */
  .col--photo{width:100%;max-width:460px;margin-inline:auto;aspect-ratio:9/13;min-height:440px}
  .col--photo h3{max-width:20ch}
  .col--photo p{max-width:24ch}
}

/* Community gallery, grid layout: every tile visible, nothing to slide. */
/* Three tiles in two columns leaves an orphan on row two, so phones get one
   full-width tile per row and everything above goes straight to three. */
.gal--grid{display:grid;grid-template-columns:1fr;gap:14px;
  overflow:visible;scroll-snap-type:none;padding-bottom:0}
@media(min-width:560px){.gal--grid{grid-template-columns:repeat(3,1fr)}}
.gal--grid .gtile{flex:none;width:100%;height:auto;align-self:start;scroll-snap-align:none}
/* Grid rows stretch by default; with aspect-ratio that derived the tile's
   WIDTH from the row height and left it narrower than its cell. */
.gal--grid + .comm__note--under{margin-top:16px}

/* ============================================================
   Product page - brand-tinted, square gallery
   Each product page wears the palette of its own range, taken from the
   same tokens the brand landing pages use so a shopper moving from
   /collections/gtgt-soft to the product does not change colour world.
   ============================================================ */
.pdp--pure{
  --pdp:#4C9BE0; --pdp-deep:#1E5F9E; --pdp-ink:#12314C;
  --pdp-ice:#E8F3FD; --pdp-pale:#F4FAFE; --pdp-line:#D7E8F7;
}
.pdp--apex{
  /* The Apex range is black with a gold accent; on a white product page the
     gold does the accenting and the near-black carries the call to action. */
  --pdp:#B8912F; --pdp-deep:#161C28; --pdp-ink:#161C28;
  --pdp-ice:#EFF1F4; --pdp-pale:#F7F8FA; --pdp-line:#DFE3EA;
}
.pdp--soft{
  /* Blush ground, lavender accent - matches the Soft landing page. */
  --pdp:#B49AD8; --pdp-deep:#8E72BC; --pdp-ink:#3A2B52;
  --pdp-ice:#FBF1EF; --pdp-pale:#FDF7F5; --pdp-line:#F0DFDB;
}

.pdp--pure .crumb a:hover,.pdp--apex .crumb a:hover,.pdp--soft .crumb a:hover{color:var(--pdp-deep)}
.pdp--pure .pdp__k,.pdp--apex .pdp__k,.pdp--soft .pdp__k{color:var(--pdp-deep)}

/* The buy button carries the range colour. Doubled selector: gtgt.css is the
   last stylesheet in the document, so a single class would tie with .btn. */
.gtgt-product .btn.pdp__add{--bg:var(--pdp-deep);--fg:#fff;--bd:var(--pdp-deep)}
.gtgt-product .btn.pdp__add:hover{box-shadow:0 18px 34px -16px color-mix(in srgb,var(--pdp-deep) 60%,transparent)}

/* --- square gallery ------------------------------------------------- */
.gmain{background:var(--pdp-pale,var(--mist))}
.gmain--fill{padding:0}
.gmain--fill .gmain__img{width:100%;height:100%;object-fit:cover}
.gmain--contain{padding:8%}
.gmain--contain .gmain__img{width:100%;height:100%;object-fit:contain}

.gzoom{
  position:absolute;right:14px;bottom:14px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);
  box-shadow:var(--sh-1);transition:transform .25s var(--ease-out),background .2s;
}
.gzoom svg{width:16px;height:16px}
.gzoom:hover{transform:scale(1.07);background:#fff}

/* --- thumbnail rail with arrows ------------------------------------- */
.grail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px}
.grail__nav{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  color:var(--ink);transition:background .2s,opacity .2s;
}
.grail__nav:hover{background:var(--bone)}
.grail__nav[hidden]{visibility:hidden;display:grid}
.grail__nav svg{width:15px;height:15px}
.grail__nav--prev svg{transform:rotate(180deg)}
/* Thumbnails share the rail so a 5-7 shot set shows in one row, the way the
   reference does. Below 56px they stop shrinking and the row scrolls instead,
   which is when the arrows appear. Doubled selector beats .gthumbs .gthumb. */
.gthumbs .gthumb.gthumb{scroll-snap-align:start;flex:1 1 0;min-width:56px;max-width:100px;width:auto}
.gthumbs{scroll-snap-type:x mandatory;scroll-behavior:smooth}
.gthumb.on{border-color:var(--pdp-deep,var(--ink))}
.gmain--fill ~ .grail .gthumb img,.gthumb img{object-fit:cover;border-radius:8px}
.gmain--fill ~ .grail .gthumb{padding:0;overflow:hidden}

/* --- full-size view -------------------------------------------------- */
.glight{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:4vmin;
  background:rgba(7,11,19,.86);backdrop-filter:blur(6px);animation:glightIn .25s var(--ease-out);
}
.glight[hidden]{display:none}
.glight__img{max-width:min(92vw,900px);max-height:90vh;border-radius:var(--r-md);display:block}
.glight__x{
  position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;
}
.glight__x:hover{background:rgba(255,255,255,.26)}
.glight__x svg{width:18px;height:18px}

/* --- name, subtitle -------------------------------------------------- */
.pdp__sub{font-size:1.05rem;color:var(--muted);margin:-6px 0 4px}

/* --- colour swatches: name under each chip --------------------------- */
.swatches{gap:18px}
.swatch{gap:7px;justify-items:center}
.swatch__name{font-size:.74rem;color:var(--muted);letter-spacing:.01em}
.swatch input:checked~.swatch__name{color:var(--ink);font-weight:600}
.swatch input:checked+.swatch__chip{
  box-shadow:inset 0 0 0 1px rgba(16,23,37,.18), 0 0 0 2px var(--paper), 0 0 0 4px var(--pdp-deep,var(--ink));
}
.swatch input:focus-visible+.swatch__chip{outline-color:var(--pdp-deep,var(--pure))}

/* --- trust row: four across, icon above the label -------------------- */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px;margin-top:22px}
@media(min-width:560px){.trust{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trust .trust__i{display:grid;justify-items:center;gap:7px;text-align:center}
.trust__ic{display:grid;place-items:center;color:var(--pdp-deep,var(--ink))}
.trust__ic svg{width:24px;height:24px;opacity:1}
.trust .trust__t{font-size:.76rem;font-weight:600;line-height:1.35;color:var(--ink)}
.trust__n{font-size:.68rem;color:var(--muted);line-height:1.3}
@keyframes glightIn{from{opacity:0}to{opacity:1}}

/* Shopify's dynamic checkout button ships bright blue with square corners,
   which is nothing like the rest of the site. Restyled as the outlined pill
   the reference uses. Shopify serves its own stylesheet for these, so the
   selectors are doubled and the paint properties forced. */
.buys .shopify-payment-button{margin-top:12px;display:block}
.buys .shopify-payment-button .shopify-payment-button__button,
.buys .shopify-payment-button .shopify-payment-button__button--unbranded,
.buys .shopify-payment-button .shopify-payment-button__button--branded{
  background:transparent !important;
  background-color:transparent !important;
  color:var(--ink) !important;
  border:1px solid var(--ink) !important;
  border-radius:var(--r-pill) !important;
  min-height:56px;
  font-family:var(--f-body);
  font-weight:600;
  font-size:.875rem;
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:none !important;
  transition:background .25s,color .25s;
}
.buys .shopify-payment-button .shopify-payment-button__button:hover{
  background:var(--ink) !important;
  background-color:var(--ink) !important;
  color:#fff !important;
}
/* The branded button renders its label inside a nested element. */
.buys .shopify-payment-button__button--branded .shopify-cleanslate > div{
  background:transparent !important;
  color:inherit !important;
}
.buys .shopify-payment-button__more-options{
  margin-top:10px;font-size:.78rem;color:var(--muted);text-decoration:underline;
}

/* The buy box stacks, the way the reference does: quantity on its own row,
   then a full-width Add to bag, then Buy it now beneath. */
.buys .buys__row{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.buys .qty{align-self:flex-start}
.buys .btn.pdp__add{width:100%;min-height:56px;justify-content:center}

/* An empty ratings block should take no space at all. */
.pdp .stars--empty:empty{display:none}

/* ============================================================
   Product page reviews, wearing the range's own colours
   The values match the brand landing pages so a shopper moving between
   them does not change colour world. .rev is dark by default, so the light
   palettes have to undo the white type as well as set the ground.
   ============================================================ */
.rev--apex{background:#0A0A0C}
.rev--apex::before{
  background:radial-gradient(70% 60% at 78% 20%,rgba(217,179,108,.16),transparent 62%),
             radial-gradient(60% 50% at 10% 90%,rgba(217,179,108,.08),transparent 60%);
}
.rev--apex .av{box-shadow:0 0 0 1px rgba(217,179,108,.45)}

.rev--pure,.rev--lilac{color:var(--ink)}
.rev--pure{background:linear-gradient(160deg,#F4FAFE 0%,#E2F0FC 55%,#D3E8FA 100%)}
.rev--lilac{background:linear-gradient(160deg,#FDF7F5 0%,#FBEFEC 55%,#F7E4E0 100%)}
.rev--pure::before,.rev--lilac::before{background:none}

.rev--pure .rcard,.rev--lilac .rcard{
  background:rgba(255,255,255,.72);
  border-color:rgba(16,23,37,.08);
  box-shadow:var(--sh-1);
}
.rev--pure .rcard blockquote,.rev--lilac .rcard blockquote{color:var(--muted)}
.rev--pure .rcard b,.rev--lilac .rcard b{color:var(--ink)}
.rev--pure .note,.rev--lilac .note{color:var(--muted)}
.rev--pure .vfy,.rev--lilac .vfy{color:var(--ink);opacity:.62}
.rev--apex .vfy{color:#D9B36C;opacity:.9}

/* Support page: the contact form and the FAQ read as one continuous flow, so
   the join between them does not need two full section paddings stacked.
   Both selectors are used only on this page, so nothing else shifts. */
.supcx{padding-bottom:40px}
.supfaq{padding-top:48px}

/* "You might also like", wearing the range's colours.
   bsel--none is the default and keeps the page background, so the homepage
   and the Apex chooser are unaffected. */
.bsel--pure{background:linear-gradient(160deg,#F4FAFE 0%,#E8F3FD 60%,#DDEDFB 100%)}
.bsel--lilac{background:linear-gradient(160deg,#FDF7F5 0%,#FBEFEC 60%,#F7E6E3 100%)}
.bsel--apex{background:#0A0A0C}
.bsel--apex .sec__bar-h,.bsel--apex .sec__bar-sub{color:#fff}
.bsel--apex .eyebrow{color:rgba(255,255,255,.55)}
.bsel--apex .link-arw{color:#D9B36C}
.bsel--pure .link-arw{color:var(--pure-deep)}
.bsel--lilac .link-arw{color:#8E72BC}

/* Product pages run to a tighter rhythm than the marketing pages. The sections
   below the buy box are supporting detail, not full-page statements, and at
   1200px+ the default .sec gave 124px a side - a 248px gap between each one.
   Scoped to the product template; .sec--flush and .sec--tight set their own
   padding and are left alone. */
body.template-product .sec:not(.sec--flush):not(.sec--tight){padding:56px 0}
@media(min-width:768px){
  body.template-product .sec:not(.sec--flush):not(.sec--tight){padding:72px 0}
}

/* Community tile captions are white, but the Pure and Soft photographs are
   bright: measured behind "Happy Little Ones" the old gradient left an
   effective luminance of 134/255, a contrast ratio of 3.66:1 - under the 4.5:1
   needed at this size. The scrim now starts higher and ends darker, which puts
   the caption band at roughly 7:1 without dimming the picture itself. */
.gtile::after{
  background:linear-gradient(180deg,
    transparent 38%,
    rgba(0,0,0,.30) 66%,
    rgba(0,0,0,.74) 100%);
}
.gtile__cap{text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45)}

/* ============================================================
   Cart
   Replaces Savor's default cart page. Uses the same container, type
   scale, buttons and quantity stepper as the rest of the site.
   ============================================================ */
.gtgt-cart{padding-bottom:72px}
.gtgt-cart.is-busy{opacity:.55;pointer-events:none;transition:opacity .2s}

.cart__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:22px 0 26px}
.cart__count{font-size:.86rem;color:var(--muted)}

.cart__grid{display:grid;gap:30px}
@media(min-width:900px){
  .cart__grid{grid-template-columns:1fr 340px;gap:44px;align-items:start}
}

/* --- line items ------------------------------------------------------ */
.cart__lines{display:grid;gap:0;border-top:1px solid var(--line)}
.cline{
  display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.cline__media{
  grid-row:span 2;width:96px;aspect-ratio:1/1;border-radius:var(--r-sm);overflow:hidden;
  background:var(--mist);display:block;
}
.cline__img{width:100%;height:100%;object-fit:cover;display:block}
.cline__body{min-width:0}
.cline__n{
  font-family:var(--f-display);font-size:1rem;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);display:block;line-height:1.3;
}
.cline__n:hover{text-decoration:underline}
.cline__opt{font-size:.78rem;color:var(--muted);margin-top:4px}
.cline__unit{font-size:.78rem;color:var(--muted);margin-top:4px}
.cline__controls{display:flex;align-items:center;gap:16px;margin-top:12px;flex-wrap:wrap}
.cline__qty{margin-top:0}
.cline__rm{font-size:.78rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cline__rm:hover{color:var(--ink)}
.cline__price{text-align:right;white-space:nowrap}
.cline__price b{font-size:1rem;font-weight:700}
.cline__price s{display:block;font-size:.78rem;color:var(--muted);font-weight:400}
.cart__update{margin-top:18px}

@media(max-width:559px){
  .cline{grid-template-columns:72px 1fr;gap:14px}
  .cline__media{width:72px;grid-row:span 1}
  .cline__price{grid-column:2;text-align:left;margin-top:-4px}
}

/* --- summary --------------------------------------------------------- */
.csum{
  background:var(--mist);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 22px;display:grid;gap:12px;
}
@media(min-width:900px){.csum{position:sticky;top:calc(var(--head-h) + 20px)}}
.csum__h{font-family:var(--f-display);font-size:1.05rem;font-weight:700;letter-spacing:-.02em}
.csum__row{display:flex;justify-content:space-between;gap:16px;font-size:.88rem;align-items:baseline}
.csum__row--off b{color:var(--ok,#1F9D62)}
.csum__row--total{
  border-top:1px solid var(--line);padding-top:12px;margin-top:2px;font-size:1rem;
}
.csum__row--total b{font-size:1.25rem;font-family:var(--f-display);letter-spacing:-.02em}
.csum__note{font-size:.74rem;color:var(--muted);line-height:1.5}
.csum__note-box summary{
  font-size:.8rem;cursor:pointer;color:var(--ink);padding:6px 0;
  text-decoration:underline;text-underline-offset:3px;
}
.csum__note-box textarea{
  width:100%;margin-top:8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:.84rem;background:var(--paper);resize:vertical;
}
.gtgt-cart .btn.csum__go{width:100%;justify-content:center;margin-top:4px;min-height:54px}
.csum__back{
  text-align:center;font-size:.82rem;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;
}
.csum__back:hover{color:var(--ink)}
.csum__trust{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.csum__t{display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--muted)}
.csum__t svg{width:15px;height:15px;flex:0 0 auto;opacity:.75}

/* --- empty state ----------------------------------------------------- */
.cart-empty{
  text-align:center;max-width:520px;margin:0 auto;padding:64px 0 88px;
  display:grid;gap:16px;justify-items:center;
}
.cart-empty__ic{
  width:64px;height:64px;border-radius:50%;background:var(--bone);
  display:grid;place-items:center;color:var(--ink);
}
.cart-empty__ic svg{width:26px;height:26px}
.cart-empty__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}
.gtgt-cart .btn.cart-empty__btn{padding:12px 18px 12px 22px;font-size:.8rem}

/* Handwritten overlay on a community tile, matching the script printed into
   the Pure and Soft artwork. Sits top-right, clear of the corner tag. */
.gtile__script{
  /* Kept inside the photo's clear area: on the Apex shot the bright wall runs
     from 55% across, so a wider box put the first two lines over the model's
     hair. Measured, not guessed. */
  position:absolute;top:9%;right:4%;z-index:3;max-width:38%;
  font-family:"Segoe Script","Bradley Hand","Brush Script MT",cursive;
  /* Sized against the TILE, not the viewport: these tiles go from three across
     to one across, so a vw-based size left the script tiny on a big mobile
     tile and overflowing on a small desktop one. At 6cqw the longest word
     ("Confidence") is ~37% of the tile, inside the 38% box at every width.
     The vw clamp is the fallback for browsers without container units. */
  font-size:clamp(.8rem,1.1vw,1.05rem);
  /* cqw resolves against the tile's CONTENT box, and the tile has 18px of
     padding, so 6cqw came out noticeably smaller than intended. */
  font-size:7cqw;
  line-height:1.32;
  text-align:center;font-weight:600;pointer-events:none;
}
.gtile__script b{display:block;margin-top:2px}
.gtile__script svg{width:15px;height:15px;display:inline-block}
/* A layered halo rather than one blur: thin script strokes go muddy over a
   busy photo with a single soft shadow. */
.gtile__script--dark{
  color:#2B2440;
  text-shadow:0 1px 2px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.85),0 0 20px rgba(255,255,255,.55);
}
.gtile__script--light{
  color:#fff;font-weight:400;
  text-shadow:0 1px 3px rgba(0,0,0,.72),0 0 14px rgba(0,0,0,.5);
}