/* ==========================================================================
   DTF VIRGINIA — "NIGHT SHIFT" STOREFRONT
   Palette sampled from DTF Virginia's own neon-lit studio photography.
   Type: Archivo Black (display) + Inter var (UI) + Cabin (body) — real brand fonts.
   ========================================================================== */

@font-face{font-family:'Archivo Black';src:url('/storefront/fonts/archivoblack-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'InterVar';src:url('/storefront/fonts/inter-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Cabin';src:url('/storefront/fonts/cabin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cabin';src:url('/storefront/fonts/cabin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Canvas */
  --ink:#0A0A0C;
  --ink-2:#111116;
  --ink-3:#17171E;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);

  /* Brand — real DTF Virginia values */
  --red:#941B25;
  --red-hot:#E11D2E;
  --red-deep:#6E1119;

  /* Neon accents sampled from their studio photo */
  --cyan:#3ED8E8;
  --magenta:#E93CCB;

  /* Paper */
  --bone:#F4F1EC;
  --bone-2:#E7E2D9;

  /* Text */
  --tx:#F2F2F4;
  --tx-dim:#9A9AA6;
  --tx-mute:#6B6B78;
  --tx-ink:#0A0A0C;

  --shell:min(1440px,100% - 4rem);
  --r:14px;
  --r-lg:22px;
  --ease:cubic-bezier(.22,1,.36,1);

  --f-display:'Archivo Black',ui-sans-serif,system-ui,sans-serif;
  --f-ui:'InterVar','Inter',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Cabin',ui-sans-serif,system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--tx);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* Film-grain atmosphere over the whole page */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell{width:var(--shell);margin-inline:auto}
.eyebrow{
  font-family:var(--f-ui);font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tx-mute);
}
.eyebrow .dot{color:var(--red-hot)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;line-height:.94;letter-spacing:-.02em;margin:0;text-transform:uppercase}
h1{font-size:clamp(2.9rem,7.4vw,6.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.6rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.6rem)}
p{margin:0}

/* ============================ BUTTONS ============================ */
/* Doubled-label vertical swap on hover (structural idea adapted from Wokiee, rebuilt) */
.btn{
  --bg:var(--red);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-ui);font-weight:700;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;
  padding:1.05rem 2.1rem;border-radius:2rem;background:var(--bg);color:var(--fg);
  overflow:hidden;isolation:isolate;transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  border:1px solid transparent;
}
.btn__l{display:block;position:relative;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.btn__l--in{position:absolute;inset:0;display:grid;place-items:center;transform:translateY(115%);opacity:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px color-mix(in srgb,var(--bg) 70%,transparent)}
.btn:hover .btn__l--out{transform:translateY(-115%);opacity:0}
.btn:hover .btn__l--in{transform:translateY(0);opacity:1}
.btn--hot{--bg:var(--red-hot)}
.btn--ghost{--bg:transparent;--fg:var(--tx);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--tx);box-shadow:none}
.btn--bone{--bg:var(--bone);--fg:var(--tx-ink)}
.btn--sm{padding:.72rem 1.35rem;font-size:.7rem}
.btn--wide{width:100%}

.link-u{
  font-family:var(--f-ui);font-size:.78rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5rem;padding-bottom:3px;
  background:linear-gradient(var(--red-hot),var(--red-hot)) left bottom/0% 1.5px no-repeat;
  transition:background-size .45s var(--ease);
}
.link-u:hover{background-size:100% 1.5px}
.link-u svg{transition:transform .45s var(--ease)}
.link-u:hover svg{transform:translateX(5px)}

/* ============================ HEADER ============================ */
.util{
  background:#050506;border-bottom:1px solid var(--line);
  font-family:var(--f-ui);font-size:.73rem;color:var(--tx-dim);
}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.6rem 0;flex-wrap:wrap}
.util__l,.util__r{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.util a:hover{color:var(--tx)}
.util .hi{color:var(--tx);font-weight:600}
.util .sep{width:1px;height:12px;background:var(--line-2)}

.hdr{position:sticky;top:0;z-index:100;background:rgba(10,10,12,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease)}
.hdr.is-stuck{box-shadow:0 12px 40px -18px #000}
.hdr__in{display:flex;align-items:center;gap:2rem;padding:.9rem 0}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{height:46px;width:auto;object-fit:contain}
.brand__tx{font-family:var(--f-display);font-size:1.02rem;letter-spacing:-.01em;line-height:1}
.brand__tx small{display:block;font-family:var(--f-ui);font-size:.56rem;font-weight:600;letter-spacing:.2em;color:var(--tx-mute);margin-top:3px}

.nav{display:flex;align-items:center;gap:.35rem;margin-inline:auto}
.nav > a{
  font-family:var(--f-ui);font-size:.79rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:.6rem .85rem;border-radius:8px;color:var(--tx-dim);transition:color .3s,background .3s;position:relative;
}
.nav > a:hover,.nav > a[aria-current]{color:var(--tx);background:rgba(255,255,255,.05)}
.nav > a[aria-current]::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.32rem;height:2px;background:var(--red-hot);border-radius:2px}
.nav .tag{
  margin-left:.4rem;font-size:.55rem;font-weight:800;letter-spacing:.1em;padding:.15rem .38rem;border-radius:4px;
  background:var(--red);color:#fff;vertical-align:middle;
}

.acts{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
.icb{
  position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;
  color:var(--tx-dim);transition:color .3s,background .3s;
}
.icb:hover{color:var(--tx);background:rgba(255,255,255,.06)}
.icb__n{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--red-hot);color:#fff;font-family:var(--f-ui);font-size:.6rem;font-weight:800;
  display:grid;place-items:center;
}
.burger{display:none}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:clamp(560px,86vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.82) 0%,rgba(10,10,12,.35) 34%,rgba(10,10,12,.72) 72%,var(--ink) 100%),
             radial-gradient(120% 80% at 18% 65%,transparent 30%,rgba(10,10,12,.6) 100%);
}
/* Print-head pass: a light bar sweeping down the hero, like a DTF printer laying ink */
.hero__scan{
  position:absolute;left:0;right:0;height:180px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(62,216,232,.10) 38%,rgba(233,60,203,.09) 62%,transparent);
  filter:blur(2px);animation:pass 9s var(--ease) infinite;
}
@keyframes pass{0%{top:-190px;opacity:0}12%{opacity:1}62%{opacity:1}78%,100%{top:100%;opacity:0}}

.hero__in{position:relative;padding:5rem 0 4.2rem;width:var(--shell);margin-inline:auto}
.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem 1rem;border-radius:2rem;margin-bottom:1.5rem;
  background:rgba(10,10,12,.55);border:1px solid var(--line-2);backdrop-filter:blur(10px);
  font-family:var(--f-ui);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 0 rgba(62,216,232,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(62,216,232,0)}100%{box-shadow:0 0 0 0 rgba(62,216,232,0)}}

.hero h1{max-width:15ch;text-shadow:0 6px 44px rgba(0,0,0,.65)}
.hero h1 em{font-style:normal;color:var(--red-hot);text-shadow:0 0 46px rgba(225,29,46,.5)}
.hero__sub{max-width:46ch;margin-top:1.5rem;font-size:1.08rem;color:#D6D6DC;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.hero__cta{display:flex;gap:.85rem;margin-top:2.2rem;flex-wrap:wrap}
.hero__chips{display:flex;gap:.6rem;margin-top:2.6rem;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:2rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(8px);
  font-family:var(--f-ui);font-size:.73rem;font-weight:600;color:#DCDCE2;
}
.chip svg{color:var(--cyan);flex-shrink:0}

/* ============================ MARQUEE ============================ */
.mq{background:var(--red);border-block:1px solid rgba(0,0,0,.28);padding:.85rem 0;overflow:hidden;display:flex;gap:0}
.mq--bone{background:var(--bone)}
.mq--bone .mq__t{color:var(--tx-ink)}
.mq--dark{background:var(--ink-2);border-block-color:var(--line)}
.mq__row{display:flex;align-items:center;gap:2.6rem;flex-shrink:0;padding-right:2.6rem;animation:slide 34s linear infinite}
.mq:hover .mq__row{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
.mq__t{
  font-family:var(--f-display);font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;color:#fff;display:inline-flex;align-items:center;gap:2.6rem;
}
.mq__t::after{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}

/* ============================ SECTIONS ============================ */
.sec{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.sec--bone{background:var(--bone);color:var(--tx-ink)}
.sec--bone .eyebrow{color:#7A7469}
.sec--ink2{background:var(--ink-2)}
.sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.8rem;flex-wrap:wrap}
.sec__hd h2{max-width:18ch}
.sec__hd p{max-width:42ch;color:var(--tx-dim);margin-top:.9rem}
.sec--bone .sec__hd p{color:#5D584F}
.sec__hd .eyebrow{margin-bottom:.9rem;display:block}

/* ============================ CATEGORY TILES ============================ */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.cat{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-3);
  aspect-ratio:1/1.14;display:flex;align-items:flex-end;isolation:isolate;
  border:1px solid var(--line);transition:transform .6s var(--ease),border-color .5s;
}
.cat--wide{grid-column:span 2;aspect-ratio:auto}
.cat:hover{transform:translateY(-6px);border-color:var(--line-2)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.1s var(--ease);filter:saturate(1.02)}
.cat:hover img{transform:scale(1.07)}
.cat::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(10,10,12,.12) 0%,rgba(10,10,12,.62) 58%,rgba(10,10,12,.93) 100%);
}
.cat__b{padding:1.5rem;width:100%}
.cat__b h3{margin-bottom:.35rem}
.cat__b span{font-family:var(--f-ui);font-size:.74rem;font-weight:600;color:var(--tx-dim)}
.cat__go{
  position:absolute;top:1.1rem;right:1.1rem;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid var(--line-2);backdrop-filter:blur(8px);
  display:grid;place-items:center;opacity:0;transform:translate(-6px,6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),background .3s;
}
.cat:hover .cat__go{opacity:1;transform:none}
.cat:hover .cat__go{background:var(--red-hot);border-color:var(--red-hot)}

/* ============================ PRODUCT CARD ============================ */
.grid-p{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem 1.1rem}
.pc{position:relative;display:flex;flex-direction:column}
.pc__m{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--bone-2);aspect-ratio:1;
  border:1px solid var(--line);
}
.pc__m img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pc:hover .pc__m img{transform:scale(1.06)}
/* transparent brand marks sit ON a surface rather than filling it */
.pc__m--mark{background:linear-gradient(150deg,var(--red-deep),var(--red) 55%,#B02330)}
.pc__m--mark img{object-fit:contain;padding:15%;transition:transform .8s var(--ease)}
.pc:hover .pc__m--mark img{transform:scale(1.06) rotate(-2deg)}
.pc__badges{position:absolute;top:.75rem;left:.75rem;display:flex;flex-direction:column;gap:.35rem;z-index:2}
.bdg{
  font-family:var(--f-ui);font-size:.6rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:5px;background:var(--ink);color:#fff;
}
.bdg--red{background:var(--red-hot)}
.bdg--cyan{background:var(--cyan);color:var(--tx-ink)}
.bdg--bone{background:var(--bone);color:var(--tx-ink)}
.pc__fav{
  position:absolute;top:.75rem;right:.75rem;z-index:2;width:36px;height:36px;border-radius:50%;
  background:rgba(10,10,12,.5);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;
  opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;
}
.pc:hover .pc__fav{opacity:1;transform:none}
.pc__fav:hover,.pc__fav.on{background:var(--red-hot)}
.pc__fav.on svg{fill:currentColor}
/* quick-add slides up over the image */
.pc__qa{
  position:absolute;left:.6rem;right:.6rem;bottom:.6rem;z-index:2;
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.pc:hover .pc__qa,.pc:focus-within .pc__qa{opacity:1;transform:none}
.pc__b{padding-top:.95rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.pc__v{font-family:var(--f-ui);font-size:.63rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mute)}
.pc__t{font-family:var(--f-ui);font-size:.95rem;font-weight:600;line-height:1.35}
.pc:hover .pc__t{color:#fff}
.pc__p{font-family:var(--f-ui);font-weight:700;font-size:.98rem;margin-top:.15rem;display:flex;align-items:baseline;gap:.5rem}
.pc__p .from{font-size:.68rem;font-weight:600;color:var(--tx-mute);text-transform:uppercase;letter-spacing:.1em}
.pc__p .ea{font-size:.72rem;font-weight:600;color:var(--tx-mute)}
.pc__p .quote{font-size:.85rem;font-weight:600;color:var(--cyan)}
.pc__sw{display:flex;gap:.35rem;margin-top:.5rem}
.sw{
  width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line-2);cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s;position:relative;
}
.sw:hover{transform:scale(1.16)}
.sw[aria-pressed="true"]{border-color:var(--tx);box-shadow:inset 0 0 0 2px var(--ink)}
.sec--bone .sw[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--bone)}
.pc__meta{font-family:var(--f-ui);font-size:.72rem;color:var(--tx-mute);margin-top:.35rem}

/* light-section variants */
.sec--bone .pc__m{border-color:rgba(0,0,0,.1)}
.sec--bone .pc__t{color:var(--tx-ink)}
.sec--bone .pc__v,.sec--bone .pc__meta{color:#8A8478}
.sec--bone .pc__p{color:var(--tx-ink)}

/* ============================ EDITORIAL SPLIT ============================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.split--flip .split__m{order:2}
.split__m{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.split__m img{width:100%;aspect-ratio:16/11;object-fit:cover}
.split__stat{
  position:absolute;left:1.2rem;bottom:1.2rem;padding:1rem 1.3rem;border-radius:var(--r);
  background:rgba(10,10,12,.72);backdrop-filter:blur(14px);border:1px solid var(--line-2);
}
.split__stat b{display:block;font-family:var(--f-display);font-size:1.9rem;line-height:1;color:var(--cyan)}
.split__stat span{font-family:var(--f-ui);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-dim)}
.split__c h2{margin-bottom:1.2rem}
.split__c > p{color:var(--tx-dim);max-width:48ch}
.sec--bone .split__c > p{color:#5D584F}
.steps{list-style:none;padding:0;margin:2rem 0 0;display:flex;flex-direction:column;gap:1.1rem}
.steps li{display:flex;gap:1.1rem;align-items:flex-start}
.steps .n{
  flex-shrink:0;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-display);font-size:.92rem;background:var(--red);color:#fff;
}
.sec--bone .steps .n{background:var(--ink);}
.steps h4{font-family:var(--f-ui);font-weight:700;font-size:.95rem;text-transform:none;letter-spacing:0;margin-bottom:.2rem}
.steps p{font-size:.92rem;color:var(--tx-dim)}
.sec--bone .steps p{color:#5D584F}

/* ============================ DESIGN GALLERY ============================ */
/* Hover "prints" the artwork in — an ink-laydown wipe, on-theme for a print shop */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gt{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1;background:var(--ink-3);
  border:1px solid var(--line);isolation:isolate;
}
.gt img{width:100%;height:100%;object-fit:cover;filter:grayscale(.42) brightness(.88);transition:filter .7s var(--ease),transform 1.1s var(--ease)}
.gt::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(10,10,12,.85));
  opacity:0;transition:opacity .5s var(--ease);
}
.gt:hover img{filter:none;transform:scale(1.05)}
.gt:hover::after{opacity:1}
.gt__b{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1rem;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.gt:hover .gt__b{opacity:1;transform:none}
.gt__b b{display:block;font-family:var(--f-ui);font-size:.85rem;font-weight:700}
.gt__b span{font-family:var(--f-ui);font-size:.7rem;color:var(--tx-dim)}

/* ============================ MASCOT ============================ */
.rudi{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--red-deep),var(--red) 46%,#B02330 100%)}
.rudi::before{
  content:'';position:absolute;inset:0;opacity:.16;
  background:radial-gradient(circle at 22% 26%,#fff 0%,transparent 42%),radial-gradient(circle at 82% 76%,var(--magenta) 0%,transparent 48%);
}
.rudi__in{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.rudi__img{position:relative;display:grid;place-items:center}
.rudi__img img{width:min(92%,380px);filter:drop-shadow(0 26px 46px rgba(0,0,0,.42));animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.rudi__ring{
  position:absolute;width:min(96%,430px);aspect-ratio:1;border-radius:50%;z-index:-1;
  border:1px dashed rgba(255,255,255,.3);animation:spin 42s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.rudi h2{margin-bottom:1.1rem}
.rudi p{color:rgba(255,255,255,.9);max-width:50ch}
.rudi__q{
  font-family:var(--f-display);font-size:clamp(1rem,1.6vw,1.32rem);line-height:1.35;
  padding-left:1.2rem;border-left:3px solid rgba(255,255,255,.5);margin:1.6rem 0;text-transform:none;
}
.rudi__row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}

/* ============================ REVIEWS ============================ */
.rv{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.rvc{
  background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;
  display:flex;flex-direction:column;gap:1rem;transition:border-color .4s,transform .5s var(--ease);
}
.rvc:hover{border-color:var(--line-2);transform:translateY(-4px)}
.stars{display:flex;gap:2px;color:var(--red-hot)}
.rvc p{font-size:.98rem;color:#D8D8DE;flex:1}
.rvc footer{display:flex;align-items:center;gap:.75rem;padding-top:.4rem;border-top:1px solid var(--line)}
.av{width:38px;height:38px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-family:var(--f-display);font-size:.85rem;flex-shrink:0}
.rvc b{display:block;font-family:var(--f-ui);font-size:.87rem;font-weight:700}
.rvc small{color:var(--tx-mute);font-family:var(--f-ui);font-size:.74rem}

.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2.6rem}
.tr{display:flex;gap:.9rem;align-items:flex-start;padding:1.3rem;border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2)}
.tr svg{color:var(--cyan);flex-shrink:0;margin-top:2px}
.tr b{display:block;font-family:var(--f-ui);font-size:.88rem;font-weight:700;margin-bottom:.15rem}
.tr span{font-family:var(--f-ui);font-size:.78rem;color:var(--tx-mute);line-height:1.5}

/* ============================ CTA BAND ============================ */
.cta{position:relative;overflow:hidden;background:var(--ink-2);border-block:1px solid var(--line)}
.cta::before{
  content:'';position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 120% at 20% 100%,rgba(148,27,37,.5),transparent 62%),
             radial-gradient(50% 110% at 82% 0%,rgba(62,216,232,.15),transparent 60%);
}
.cta__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.cta__in p{max-width:52ch;color:var(--tx-dim)}
.nl{display:flex;gap:.6rem;width:min(100%,520px);flex-wrap:wrap}
.nl input{
  flex:1;min-width:220px;padding:1.05rem 1.3rem;border-radius:2rem;background:rgba(255,255,255,.06);
  border:1px solid var(--line-2);color:var(--tx);font-family:var(--f-ui);font-size:.9rem;
}
.nl input::placeholder{color:var(--tx-mute)}
.nl input:focus{outline:none;border-color:var(--cyan)}

/* ============================ FOOTER ============================ */
.ft{background:#050506;border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,5rem)}
.ft__top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2.5rem;padding-bottom:3rem}
.ft h4{font-family:var(--f-ui);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem;color:var(--tx)}
.ft ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.ft a{font-family:var(--f-ui);font-size:.88rem;color:var(--tx-dim);transition:color .3s}
.ft a:hover{color:var(--tx)}
.ft__ab p{font-size:.92rem;color:var(--tx-dim);max-width:38ch;margin:1rem 0 1.4rem}
.ft__c{display:flex;flex-direction:column;gap:.5rem;font-family:var(--f-ui);font-size:.88rem;color:var(--tx-dim)}
.ft__c a{display:flex;align-items:center;gap:.6rem}
.ft__c svg{color:var(--red-hot);flex-shrink:0}
.soc{display:flex;gap:.5rem;margin-top:1.3rem}
.soc a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;color:var(--tx-dim);transition:.3s}
.soc a:hover{background:var(--red);border-color:var(--red);color:#fff}
.ft__bot{
  border-top:1px solid var(--line);padding:1.5rem 0;display:flex;justify-content:space-between;
  align-items:center;gap:1.5rem;flex-wrap:wrap;font-family:var(--f-ui);font-size:.78rem;color:var(--tx-mute);
}
.pay{display:flex;gap:.45rem;align-items:center}
.pay span{
  padding:.34rem .6rem;border:1px solid var(--line);border-radius:6px;font-size:.62rem;
  font-weight:700;letter-spacing:.06em;color:var(--tx-dim);
}

/* ============================ REVEAL ============================
   Only ever hide content when JS is confirmed running (html.js, set by an
   inline script in <head>). If JS fails, is blocked, or is throttled, the
   page stays fully readable instead of rendering blank.
   ================================================================ */
.js .rv-up{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rv-up.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}
  .js .rv-up{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================ TOAST ============================ */
.toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,150%);z-index:2000;
  display:flex;align-items:center;gap:.8rem;padding:.9rem 1.4rem;border-radius:2rem;
  background:var(--bone);color:var(--tx-ink);font-family:var(--f-ui);font-size:.86rem;font-weight:600;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.6);transition:transform .6s var(--ease);
}
.toast.show{transform:translate(-50%,0)}
.toast svg{color:var(--red)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .cats{grid-template-columns:repeat(2,1fr)}
  .cat--wide{grid-column:span 2}
  .grid-p{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .ft__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--shell:min(1440px,100% - 2.4rem)}
  .nav{display:none}
  .burger{display:grid}
  .util__l .hide-s{display:none}
  .split,.rudi__in{grid-template-columns:1fr}
  .split--flip .split__m{order:0}
  .rv{grid-template-columns:1fr}
  .rudi__img{order:-1}
}
@media (max-width:640px){
  .grid-p{grid-template-columns:repeat(2,1fr);gap:1.2rem .8rem}
  .gal{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:1fr}
  .cat--wide{grid-column:span 1}
  .trust,.ft__top{grid-template-columns:1fr}
  .hero__in{padding:3.5rem 0 2.8rem}
  .util__r{display:none}
}

/* ============================ COLLECTION / SHOP ============================ */
.crumb{font-family:var(--f-ui);font-size:.76rem;color:var(--tx-mute);padding:1.4rem 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--tx)}
.crumb span{opacity:.5}

.colhero{padding:1rem 0 2.6rem;border-bottom:1px solid var(--line)}
.colhero h1{font-size:clamp(2.4rem,5.4vw,4.4rem);margin-bottom:1rem}
.colhero p{max-width:56ch;color:var(--tx-dim)}
.colhero__row{display:flex;gap:2.5rem;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.colhero__facts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.4rem}

.collay{display:grid;grid-template-columns:250px 1fr;gap:2.6rem;align-items:start;padding:2.4rem 0 clamp(4rem,7vw,6rem)}

/* sidebar is its own bounded, self-contained sticky column */
.side{position:sticky;top:96px;display:flex;flex-direction:column;gap:1.6rem}
.fil{border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);overflow:hidden}
.fil > summary{
  list-style:none;cursor:pointer;padding:1rem 1.1rem;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-ui);font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
}
.fil > summary::-webkit-details-marker{display:none}
.fil > summary svg{transition:transform .4s var(--ease);color:var(--tx-mute)}
.fil[open] > summary svg{transform:rotate(180deg)}
.fil__b{padding:0 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.15rem}
.fck{
  display:flex;align-items:center;gap:.65rem;padding:.44rem 0;cursor:pointer;
  font-family:var(--f-ui);font-size:.85rem;color:var(--tx-dim);transition:color .3s;
}
.fck:hover{color:var(--tx)}
.fck input{
  appearance:none;width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;
  flex-shrink:0;position:relative;cursor:pointer;transition:.25s;
}
.fck input:checked{background:var(--red-hot);border-color:var(--red-hot)}
.fck input:checked::after{
  content:'';position:absolute;left:4.5px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.fck .n{margin-left:auto;font-size:.72rem;color:var(--tx-mute)}

.coltop{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1.4rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line);
}
.coltop__l{font-family:var(--f-ui);font-size:.85rem;color:var(--tx-dim)}
.coltop__l b{color:var(--tx)}
.sortsel{
  appearance:none;padding:.6rem 2.3rem .6rem 1rem;border-radius:2rem;background:var(--ink-2);
  border:1px solid var(--line-2);color:var(--tx);font-family:var(--f-ui);font-size:.8rem;font-weight:600;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239A9AA6' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.sortsel:focus{outline:none;border-color:var(--cyan)}
.pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:2rem;
  background:var(--ink-2);border:1px solid var(--line-2);font-family:var(--f-ui);font-size:.76rem;font-weight:600;
}
.pill button{color:var(--tx-mute);display:grid;place-items:center;transition:color .3s}
.pill button:hover{color:var(--red-hot)}

.filbar{display:none}
@media (max-width:900px){
  .collay{grid-template-columns:1fr;gap:1.4rem}
  .side{position:static;display:none}
  .side.open{display:flex}
  .filbar{display:inline-flex}
}

/* ============================ PRODUCT PAGE ============================ */
.pdp{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(1.5rem,3.6vw,3.4rem);align-items:start;padding-bottom:clamp(3rem,6vw,5rem)}

/* Gallery is its own bounded, self-contained sticky column (never a stretched
   background sibling — that was the dead-space bug on the earlier concepts). */
.gal-w{position:sticky;top:96px;display:flex;flex-direction:column;gap:.75rem}
.gal-main{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--bone-2);
  border:1px solid var(--line);aspect-ratio:1;
}
.gal-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease)}
.gal-main img.on{opacity:1;position:relative}
.gal-tag{
  position:absolute;top:1rem;left:1rem;z-index:3;display:flex;gap:.4rem;
}
.gal-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.gal-thumbs button{
  border-radius:10px;overflow:hidden;border:2px solid transparent;background:var(--bone-2);
  aspect-ratio:1;transition:border-color .35s,transform .35s var(--ease);
}
.gal-thumbs button:hover{transform:translateY(-3px)}
.gal-thumbs button[aria-current="true"]{border-color:var(--red-hot)}
.gal-thumbs img{width:100%;height:100%;object-fit:cover}

/* Buy box */
.buy{display:flex;flex-direction:column;gap:1.15rem}
.buy__top{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.buy__v{font-family:var(--f-ui);font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-mute)}
.buy h1{font-size:clamp(1.9rem,3.4vw,3rem);line-height:1}
.buy__rate{display:flex;align-items:center;gap:.55rem;font-family:var(--f-ui);font-size:.82rem;color:var(--tx-dim)}
.buy__price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.buy__price b{font-family:var(--f-display);font-size:2.5rem;line-height:1}
.buy__price .ea{font-family:var(--f-ui);font-size:.86rem;font-weight:600;color:var(--tx-dim)}
.buy__price .save{
  font-family:var(--f-ui);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--cyan);color:var(--tx-ink);padding:.26rem .55rem;border-radius:5px;
}
.buy__lede{color:var(--tx-dim);font-size:.98rem}

.opt{display:flex;flex-direction:column;gap:.6rem}
.opt__h{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.opt__h span{font-family:var(--f-ui);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.opt__h em{font-style:normal;font-family:var(--f-ui);font-size:.82rem;color:var(--tx-dim);text-transform:none;letter-spacing:0}
.opt__r{display:flex;gap:.5rem;flex-wrap:wrap}
.chipo{
  padding:.62rem 1.05rem;border-radius:2rem;border:1px solid var(--line-2);background:var(--ink-2);
  font-family:var(--f-ui);font-size:.82rem;font-weight:600;color:var(--tx-dim);
  transition:border-color .3s,color .3s,background .3s;
}
.chipo:hover{color:var(--tx);border-color:var(--tx-mute)}
.chipo[aria-pressed="true"]{background:var(--tx);color:var(--tx-ink);border-color:var(--tx)}
.swo{width:40px;height:40px;border-radius:50%;border:2px solid var(--line-2);transition:.3s;position:relative}
.swo:hover{transform:scale(1.08)}
.swo[aria-pressed="true"]{border-color:var(--red-hot);box-shadow:inset 0 0 0 3px var(--ink)}

.qtyrow{display:flex;gap:.7rem;align-items:stretch;flex-wrap:wrap}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:2rem;background:var(--ink-2);overflow:hidden}
.qty button{width:46px;height:52px;display:grid;place-items:center;color:var(--tx-dim);transition:color .3s,background .3s}
.qty button:hover{color:var(--tx);background:rgba(255,255,255,.05)}
.qty input{
  width:64px;height:52px;text-align:center;background:none;border:0;color:var(--tx);
  font-family:var(--f-ui);font-weight:700;font-size:1rem;-moz-appearance:textfield;
}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.nudge{
  display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-radius:var(--r);
  background:linear-gradient(90deg,rgba(62,216,232,.13),rgba(62,216,232,.04));
  border:1px solid rgba(62,216,232,.3);font-family:var(--f-ui);font-size:.85rem;color:#CFEFF4;
}
.nudge svg{color:var(--cyan);flex-shrink:0}
.nudge b{color:#fff}

.tiertoggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--ink-2);
  font-family:var(--f-ui);font-size:.82rem;font-weight:600;color:var(--tx-dim);transition:.3s;
}
.tiertoggle:hover{color:var(--tx);border-color:var(--line-2)}
.tiertoggle svg{transition:transform .4s var(--ease)}
.tiertoggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.tiertbl{border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);overflow:hidden;margin-top:-.6rem}
.tiertbl table{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:.85rem}
.tiertbl th,.tiertbl td{padding:.62rem 1.1rem;text-align:left}
.tiertbl th{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-mute);font-weight:700;background:var(--ink-3)}
.tiertbl tbody tr{border-top:1px solid var(--line)}
.tiertbl tbody tr.on{background:rgba(225,29,46,.11)}
.tiertbl tbody tr.on td{color:#fff;font-weight:700}
.tiertbl td:last-child{text-align:right;font-weight:600}
.tiernote{padding:.6rem 1.1rem;font-family:var(--f-ui);font-size:.7rem;color:var(--tx-mute);background:var(--ink-3);border-top:1px solid var(--line)}

.total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:.3rem}
.total span{font-family:var(--f-ui);font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--tx-mute)}
.total b{font-family:var(--f-display);font-size:1.9rem;line-height:1}

.assure{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding-top:.4rem}
.assure div{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--f-ui);font-size:.8rem;color:var(--tx-dim)}
.assure svg{color:var(--cyan);flex-shrink:0;margin-top:2px}

/* Accordion */
.acc{border-top:1px solid var(--line)}
.acc summary{
  list-style:none;cursor:pointer;padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--f-ui);font-size:.95rem;font-weight:700;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{color:var(--tx-mute);transition:transform .4s var(--ease);flex-shrink:0}
.acc[open] summary svg{transform:rotate(45deg)}
.acc__b{padding:0 0 1.5rem;color:var(--tx-dim);font-size:.95rem;display:flex;flex-direction:column;gap:.9rem;max-width:70ch}
.acc__b ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.45rem}
.specs{width:100%;border-collapse:collapse;font-family:var(--f-ui);font-size:.88rem}
.specs tr{border-bottom:1px solid var(--line)}
.specs th{text-align:left;padding:.7rem 0;color:var(--tx-mute);font-weight:600;width:38%}
.specs td{padding:.7rem 0;color:var(--tx)}

/* Sticky bottom add-to-cart bar */
.sbar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;transform:translateY(105%);
  background:rgba(10,10,12,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line-2);
  transition:transform .55s var(--ease);
}
.sbar.show{transform:none}
.sbar__in{display:flex;align-items:center;gap:1.2rem;padding:.85rem 0;justify-content:space-between;flex-wrap:wrap}
.sbar__p{display:flex;align-items:center;gap:.9rem;min-width:0}
.sbar__p img{width:46px;height:46px;border-radius:9px;object-fit:cover;flex-shrink:0}
.sbar__p b{display:block;font-family:var(--f-ui);font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbar__p span{font-family:var(--f-ui);font-size:.78rem;color:var(--tx-dim)}

@media (max-width:980px){
  .pdp{grid-template-columns:1fr}
  /* stacked layout must not pin the gallery over the buy box */
  .gal-w{position:static}
  .assure{grid-template-columns:1fr}
}