/*
Theme Name:  Anca DIY Adventures
Theme URI:   https://example.com/anca-diy-adventures
Author:      Anca DIY Adventures
Author URI:  https://www.youtube.com/@AncaDIYAdventures
Description: Dark, jewel-box storefront for enamel pins. Built for WooCommerce, with a
             YouTube + Instagram Reels homepage. Ships with placeholder content so the
             theme looks finished the moment you activate it.
Version:     1.5.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      8.0
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: anca
Tags:        e-commerce, dark, one-column, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   The whole design system flows from the custom properties in
   :root. Change those and every component follows.
   Ground options live under [data-bg] and are chosen in
   Appearance > Customize > Anca: Brand.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   ANCA DIY ADVENTURES — MIDNIGHT COBALT
   Palette locked from the logo:
     glasses  #D9578C  → magenta, the lead accent
     hair     #C79A4B  → honey, the secondary
     shirt    #2E6BA8  → cobalt, the ground + support
     skin     #F8DCC0  → cream text
     linework #3B3F45  → charcoal

   Two accent tiers, never mixed:
     --a1  / --a2   text-safe accents
     --a1-v / --a2-v vivid — glows, rings, haloes ONLY
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#0A1222;
  --bg-2:#0F1A2E;
  --bg-3:#17253E;
  --panel:rgba(214,232,255,.055);
  --panel-2:rgba(214,232,255,.1);
  --edge:rgba(150,190,240,.17);
  --edge-2:rgba(150,190,240,.34);

  --ink:#EAF1FB;
  --ink-mid:#AEBFD9;
  --ink-soft:#7D8FAE;

  --a1:#F075A6;            /* magenta — primary */
  --a1-2:#C24A7C;
  --a2:#E8BC70;            /* honey — secondary */
  --a2-2:#B8873A;
  --a3:#5B96D0;            /* cobalt — support */
  --a1-v:#F894BC;
  --a2-v:#F3D394;

  --grad-1:linear-gradient(135deg,#F894BC 0%,#BE4576 100%);
  --grad-2:linear-gradient(135deg,#F3D394 0%,#BE8C3C 100%);
  --grad-duo:linear-gradient(115deg,#F075A6 0%,#5B96D0 100%);
  --grad-head:linear-gradient(115deg,#F894BC 0%,#7FB4E4 100%);
  --grad-ink:linear-gradient(180deg,#17253E 0%,#0A1222 100%);

  --glow-1:0 18px 50px -18px rgba(240,117,166,.5);
  --glow-2:0 18px 50px -18px rgba(232,188,112,.42);
  --on-accent:#26101B;

  --case:radial-gradient(120% 90% at 50% 8%, #24406E 0%, #101C33 46%, #05090F 100%);
  --lamp:rgba(196,228,255,.30);
  --star:#DCEBFF;
  --starglow:rgba(190,225,255,.7);
  --floor:rgba(0,0,0,.6);

  --lift-1:0 2px 6px rgba(0,0,0,.4);
  --lift-2:0 14px 34px -12px rgba(0,0,0,.7);
  --lift-3:0 34px 80px -24px rgba(0,0,0,.85);
  --radius:20px;
  --shell:1180px;
  color-scheme:dark;

  /* brighter text across the board — the point of a darker ground */
  --ink:#F2F6FF;
  --ink-mid:#BDC9DF;
  --ink-soft:#8695B2;

  --amb-1:.10; --amb-2:.10; --amb-3:.05;
  --vig:.6;
}

/* ══════ GROUND OPTIONS — crushed. only the ground changes, accents stay ══════ */

/* 1 · INK — deep blue-black. keeps the cobalt DNA */
:root[data-bg="ink"]{
  --bg:#02040A; --bg-2:#05070E; --bg-3:#0A0E18;
  --panel:rgba(190,215,255,.035); --panel-2:rgba(190,215,255,.07);
  --edge:rgba(150,185,240,.12); --edge-2:rgba(150,185,240,.25);
  --grad-ink:linear-gradient(180deg,#0A0E18 0%,#02040A 100%);
  --case:radial-gradient(120% 90% at 50% 8%, #142744 0%, #060B16 46%, #000103 100%);
  --amb-1:.09; --amb-2:.09; --amb-3:.05;
  --vig:.55;
}

/* 2 · VOID — true black, everything else crushed to match */
:root[data-bg="void"]{
  --bg:#000000; --bg-2:#020203; --bg-3:#08080A;
  --panel:rgba(255,255,255,.03); --panel-2:rgba(255,255,255,.062);
  --edge:rgba(255,255,255,.10); --edge-2:rgba(255,255,255,.22);
  --grad-ink:linear-gradient(180deg,#0A0A0D 0%,#000000 100%);
  --case:radial-gradient(120% 90% at 50% 8%, #101C33 0%, #04060B 46%, #000000 100%);
  --amb-1:.10; --amb-2:.10; --amb-3:.05;
  --vig:.7;
  --lift-2:0 14px 34px -12px rgba(0,0,0,1);
  --lift-3:0 34px 80px -24px rgba(0,0,0,1);
}

/* 3 · GRAPHITE — neutral charcoal, lets the honey read warm */
:root[data-bg="graphite"]{
  --bg:#050506; --bg-2:#08080A; --bg-3:#0E0E11;
  --panel:rgba(255,250,245,.035); --panel-2:rgba(255,250,245,.07);
  --edge:rgba(240,232,226,.115); --edge-2:rgba(240,232,226,.24);
  --grad-ink:linear-gradient(180deg,#0E0E11 0%,#050506 100%);
  --case:radial-gradient(120% 90% at 50% 8%, #22222A 0%, #0A0A0C 46%, #000000 100%);
  --amb-1:.09; --amb-2:.07; --amb-3:.06;
  --vig:.6;
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.65; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  isolation:isolate;   /* keeps the ambient layer below content, above the ground */
}

/* ONE ambient wash for the whole page — fixed, so nothing tints section by section */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(62vw 62vw at 10% -12%, rgba(240,117,166,var(--amb-1)), transparent 60%),
    radial-gradient(58vw 58vw at 94% 14%,  rgba(91,150,208,var(--amb-2)),  transparent 60%),
    radial-gradient(54vw 54vw at 46% 106%, rgba(232,188,112,var(--amb-3)), transparent 60%),
    radial-gradient(120% 95% at 50% 45%, transparent 30%, rgba(0,0,0,var(--vig)) 100%);
}
.display{font-family:"Hoefler Text",Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.022em; line-height:1.03; margin:0; text-wrap:balance}
h1,h2,h3{margin:0; font-weight:600}
.label{font-family:"Cascadia Code",ui-monospace,Consolas,monospace; font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--a1)}
.mono,.price,.crumbs,.dur{font-family:"Cascadia Code",ui-monospace,Consolas,monospace}
a{color:var(--a1); text-decoration:none}
button{font:inherit; cursor:pointer; color:inherit}
.shell{max-width:var(--shell); margin:0 auto; padding:0 26px}
section{position:relative}
:focus-visible{outline:2px solid var(--a1); outline-offset:3px; border-radius:6px}
::selection{background:var(--a2-2); color:#fff}

body::after{
  content:""; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.20; mix-blend-mode:overlay;
  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)' opacity='.32'/%3E%3C/svg%3E");
}

.rv{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i,0)*70ms)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition-duration:.01ms!important}
  .rv{opacity:1; transform:none} html{scroll-behavior:auto}
}

/* ============ HEADER ============ */
.topbar{
  text-align:center; padding:9px 18px; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  font-family:"Cascadia Code",ui-monospace,monospace; background:var(--grad-duo); color:var(--on-accent);
  font-weight:700; position:relative; z-index:60;
}
header.site{
  position:sticky; top:0; z-index:70;
  /* Heavy frost AND a nearly opaque ground: content scrolling underneath
     should read as a soft wash, never as legible text. */
  backdrop-filter:blur(36px) saturate(1.7);
  -webkit-backdrop-filter:blur(36px) saturate(1.7);
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  border-bottom:1px solid var(--edge);
}
/* Without backdrop-filter support, go fully solid rather than see-through. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.site{background:var(--bg)}
}
.bar{display:flex; align-items:center; gap:28px; max-width:var(--shell); margin:0 auto; padding:13px 26px}
.brand{display:flex; align-items:center; gap:13px; color:var(--ink)}
.brand-ring{
  width:50px; height:50px; border-radius:50%; flex:none; position:relative; overflow:hidden;
  background:var(--bg-3); padding:2px; box-shadow:0 0 0 1.5px var(--edge-2), var(--glow-1);
  display:flex; align-items:flex-end; justify-content:center;
}
.brand-ring::before{
  content:""; position:absolute; inset:-40%;
  background:conic-gradient(from 0deg, transparent 0 62%, var(--a1-v) 78%, var(--a2-v) 88%, transparent 100%);
  animation:spin 7s linear infinite;
}
.brand-ring svg{position:relative; z-index:1; width:90%; height:90%; border-radius:50%; background:var(--bg-3)}
@keyframes spin{to{transform:rotate(360deg)}}
.brand .wm{display:flex; flex-direction:column; line-height:1.06}
.brand .wm b{font-family:"Hoefler Text",Georgia,serif; font-size:18px; font-weight:600; letter-spacing:-.01em}
.brand .wm i{font-style:normal; font-family:"Cascadia Code",ui-monospace,monospace; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft)}
nav.main{display:flex; gap:6px; margin-left:auto}
nav.main a{
  color:var(--ink-mid); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  padding:10px 15px; border-radius:999px; position:relative; transition:color .25s, background .25s;
}
nav.main a:hover{color:var(--ink); background:var(--panel)}
nav.main a.active{color:var(--ink)}
nav.main a.active::after{content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px; border-radius:2px; background:var(--grad-duo)}
.cart-btn{
  display:flex; align-items:center; gap:9px; border:1px solid var(--edge-2); background:var(--panel);
  border-radius:999px; padding:10px 17px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; transition:border-color .25s, box-shadow .25s, transform .2s;
}
.cart-btn:hover{border-color:var(--a1); box-shadow:var(--glow-1); transform:translateY(-1px)}
.cart-count{
  min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--grad-1); color:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; font-family:"Cascadia Code",ui-monospace,monospace;
  font-size:11.5px; font-weight:700;
}
@media (max-width:820px){ nav.main{display:none} }

/* ============ HERO ============ */
.hero{padding:96px 0 104px; overflow:hidden}
.hero-in{position:relative; z-index:2; display:grid; grid-template-columns:1.02fr .98fr; gap:64px; align-items:center}
@media (max-width:940px){ .hero-in{grid-template-columns:1fr; gap:52px} }
.hero h1{font-size:clamp(46px,7.4vw,92px)}
.hero h1 em{font-style:italic; background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{font-size:clamp(16.5px,1.6vw,19px); color:var(--ink-mid); max-width:47ch; margin:26px 0 36px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.hero-stats{display:flex; gap:34px; margin-top:52px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--edge)}
.hero-stats div b{display:block; font-family:"Hoefler Text",Georgia,serif; font-size:27px; font-weight:600; letter-spacing:-.02em}
.hero-stats div span{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-family:"Cascadia Code",ui-monospace,monospace}

.case{
  position:relative; aspect-ratio:1/1.06; border-radius:32px; overflow:hidden; background:var(--case);
  box-shadow:var(--lift-3), inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px var(--edge);
  display:grid; place-items:center; transition:background .5s ease;
}
.case::before{
  content:""; position:absolute; left:50%; top:-14%; width:74%; height:86%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 0%, var(--lamp), transparent 66%); filter:blur(6px);
}
.stars{position:absolute; inset:0; opacity:.85}
.stars i{position:absolute; width:2px; height:2px; border-radius:50%; background:var(--star); box-shadow:0 0 6px 1px var(--starglow); animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1.25)}}
.halo{
  position:absolute; width:64%; aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 210deg, var(--a1-v), var(--a2-v), var(--a1-v)); opacity:.38;
  filter:blur(46px); animation:spin 18s linear infinite;
}
.pin-float{position:relative; z-index:2; width:63%; animation:bob 6.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-9px) rotate(-4deg)} 50%{transform:translateY(9px) rotate(-1.5deg)}}
.plinth{position:absolute; bottom:11%; width:44%; height:16px; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 72%); filter:blur(7px)}
.case-tag{
  position:absolute; left:20px; bottom:20px; z-index:3; font-family:"Cascadia Code",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  background:rgba(10,10,14,.6); border:1px solid var(--edge-2); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:999px;
}
.case-badge{
  position:absolute; right:20px; top:20px; z-index:3; display:flex; align-items:center; gap:7px;
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-accent); background:var(--grad-1); padding:8px 14px; border-radius:999px; font-weight:700; box-shadow:var(--glow-1);
}
.case-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--on-accent); animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.25}}

/* ============ BUTTONS ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, filter .22s, border-color .22s;
  overflow:hidden; isolation:isolate;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.4) 50%,transparent 80%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.btn:hover::after{transform:translateX(120%)}
.btn-1{background:var(--grad-1); color:var(--on-accent); box-shadow:var(--glow-1)}
.btn-1:hover{transform:translateY(-3px); filter:brightness(1.07)}
.btn-2{background:var(--grad-2); color:var(--on-accent); box-shadow:var(--glow-2)}
.btn-2:hover{transform:translateY(-3px); filter:brightness(1.07)}
.btn-glass{background:var(--panel); border-color:var(--edge-2); color:var(--ink); backdrop-filter:blur(10px)}
.btn-glass:hover{transform:translateY(-3px); border-color:var(--a1); box-shadow:var(--glow-1)}
.btn[disabled]{opacity:.42; pointer-events:none; filter:grayscale(.5)}

/* ============ SECTIONS ============ */
.sec{padding:100px 0}
.sec-tight{padding:100px 0}
.head{max-width:760px; margin:0 auto 56px; text-align:center}
.head .label{display:block; margin-bottom:16px}
.head h2{font-size:clamp(32px,4.4vw,54px)}
.head p{color:var(--ink-mid); margin:18px auto 0; max-width:58ch}

.marquee{overflow:hidden; border-block:1px solid var(--edge); background:transparent; padding:19px 0; display:flex; user-select:none}
.marquee div{display:flex; gap:44px; padding-right:44px; flex:none; animation:slide 34s linear infinite; align-items:center}
@keyframes slide{to{transform:translateX(-100%)}}
.marquee span{font-family:"Hoefler Text",Georgia,serif; font-size:20px; font-style:italic; color:var(--ink-soft); white-space:nowrap}
.marquee b{color:var(--a1); font-size:13px}

/* ============ CARDS ============ */
.grid{display:grid; gap:26px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .g4,.g3{grid-template-columns:1fr 1fr; gap:14px} }
.card{
  position:relative; display:flex; flex-direction:column; border-radius:var(--radius); overflow:hidden;
  background:var(--panel); border:1px solid var(--edge); color:var(--ink); box-shadow:var(--lift-2);
  transform-style:preserve-3d; transition:box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s, transform .18s ease-out;
}
.card:hover{border-color:var(--edge-2); box-shadow:var(--lift-3), var(--glow-1)}
.card .stagewrap{
  position:relative; aspect-ratio:1/.94; display:grid; place-items:center; padding:15%;
  background:radial-gradient(circle at 50% 42%, var(--tint) 0%, transparent 62%), var(--grad-ink); overflow:hidden;
}
.card .stagewrap::after{
  content:""; position:absolute; left:50%; bottom:13%; width:46%; height:13px; transform:translateX(-50%);
  background:radial-gradient(ellipse,var(--floor),transparent 72%); filter:blur(6px);
}
.card .stagewrap svg{position:relative; z-index:1; width:100%; height:100%; transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card:hover .stagewrap svg{transform:translateY(-7px) rotate(-4deg) scale(1.06)}
.card .body{padding:18px 19px 21px; display:flex; flex-direction:column; gap:5px; flex:1}
.card .coll{font-family:"Cascadia Code",ui-monospace,monospace; font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--a2)}
.card .nm{font-family:"Hoefler Text",Georgia,serif; font-size:18px; font-weight:600; letter-spacing:-.012em; line-height:1.22}
.card .foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px}
.card .price{font-size:15px; font-weight:700}
.card .go{width:32px; height:32px; border-radius:50%; border:1px solid var(--edge-2); display:grid; place-items:center; font-size:13px; color:var(--ink-mid); transition:all .3s cubic-bezier(.16,1,.3,1)}
.card:hover .go{background:var(--grad-1); color:var(--on-accent); border-color:transparent; transform:rotate(-45deg)}
.card .tag{
  position:absolute; top:14px; left:14px; z-index:3; padding:6px 12px; border-radius:999px;
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; background:var(--grad-1); color:var(--on-accent); box-shadow:var(--glow-1);
}
.card .tag.new{background:var(--grad-2); box-shadow:var(--glow-2)}
.card .tag.out{background:rgba(10,10,16,.75); color:var(--ink-mid); border:1px solid var(--edge-2); box-shadow:none; backdrop-filter:blur(8px)}
.card.out .stagewrap svg{filter:grayscale(.72) brightness(.72)}
.card.out .price{text-decoration:line-through; color:var(--ink-soft)}

/* ============ MEET ============ */
.meet{position:relative; overflow:hidden}
.meet-in{position:relative; z-index:2; display:grid; grid-template-columns:.85fr 1.15fr; gap:66px; align-items:center}
@media (max-width:940px){ .meet-in{grid-template-columns:1fr; gap:44px} }
.avatar{
  position:relative; aspect-ratio:1; max-width:360px; margin:0 auto; border-radius:50%;
  background:var(--bg-3); padding:8px; display:flex; align-items:flex-end; justify-content:center;
  overflow:hidden; box-shadow:var(--lift-3);
}
.avatar::before{content:""; position:absolute; inset:-30%; background:conic-gradient(from 90deg,var(--a1-v),var(--a2-v),var(--a1-v)); animation:spin 12s linear infinite}
.avatar::after{content:""; position:absolute; inset:8px; border-radius:50%; background:var(--bg-3)}
.avatar svg{position:relative; z-index:2; width:88%; height:88%}
.meet h2{font-size:clamp(30px,4vw,48px)}
.meet p{color:var(--ink-mid); max-width:56ch; margin:20px 0 0}
.meet .sig{font-family:"Hoefler Text",Georgia,serif; font-style:italic; font-size:22px; color:var(--a2); margin-top:22px}
.meet .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:32px}

/* ============ VIDEOS ============ */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media (max-width:860px){ .vgrid{grid-template-columns:1fr} }
.vcard{border-radius:var(--radius); overflow:hidden; background:var(--panel); border:1px solid var(--edge); color:var(--ink); box-shadow:var(--lift-2); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s, border-color .35s}
.vcard:hover{transform:translateY(-7px); box-shadow:var(--lift-3), var(--glow-2); border-color:var(--edge-2)}
.vthumb{aspect-ratio:16/9; position:relative; display:grid; place-items:center; overflow:hidden}
.vthumb::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(6,6,10,.6) 100%)}
/* fixed logo colours — thumbnails are media, they shouldn't shift per palette */
.vthumb.t1{background:radial-gradient(120% 120% at 20% 10%,#F3D394,#A8742A 72%)}
.vthumb.t2{background:radial-gradient(120% 120% at 20% 10%,#5B96D0,#1B3F66 74%)}
.vthumb.t3{background:radial-gradient(120% 120% at 20% 10%,#F492BA,#A83C68 72%)}
.play{
  position:relative; z-index:2; width:60px; height:60px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42); backdrop-filter:blur(10px);
  display:grid; place-items:center; transition:transform .35s cubic-bezier(.16,1,.3,1), background .35s;
}
.play::after{content:""; border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; margin-left:4px}
.vcard:hover .play{transform:scale(1.14); background:rgba(255,255,255,.26)}
.dur{position:absolute; z-index:2; bottom:11px; right:12px; font-size:10.5px; letter-spacing:.1em; background:rgba(6,6,10,.72); color:#F2F2F2; padding:4px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.16)}
.vcard .vt{padding:17px 19px 5px; font-family:"Hoefler Text",Georgia,serif; font-size:17.5px; font-weight:600; line-height:1.3; letter-spacing:-.01em}
.vcard .vm{padding:0 19px 18px; color:var(--ink-soft); font-size:12.5px; font-family:"Cascadia Code",ui-monospace,monospace; letter-spacing:.04em}


/* ============ SECTION SEPARATION ============ */
/* one continuous ground; a hairline + diamond marks the rhythm between sections */
.divider{
  position:relative; height:1px; margin:0 auto;
  max-width:calc(var(--shell) - 52px);
  background:linear-gradient(90deg,transparent,var(--edge-2) 26%,var(--edge-2) 74%,transparent);
}
.divider::after{
  content:""; position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:1px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--a1); box-shadow:0 0 14px var(--a1-v);
}
/* ============ LEFT SCROLL-SPY ============ */
.spy{
  position:fixed; left:26px; top:50%; transform:translateY(-50%); z-index:65;
  display:none; flex-direction:column; gap:2px; padding:14px 0;
}
body[data-page="home"] .spy{display:flex}
.spy .rail{position:absolute; left:5.5px; top:14px; bottom:14px; width:2px; border-radius:2px; background:var(--edge)}
.spy .fill{
  position:absolute; left:5.5px; top:14px; width:2px; border-radius:2px; height:0;
  background:var(--grad-duo); box-shadow:0 0 12px var(--a1-v);
  transition:height .18s linear;
}
.spy a{
  position:relative; display:flex; align-items:center; gap:13px; padding:8px 0 8px 0;
  color:var(--ink-soft); text-decoration:none; transition:color .35s cubic-bezier(.16,1,.3,1);
}
.spy .dot{
  width:13px; height:13px; flex:none; border-radius:50%; margin-left:0; position:relative; z-index:2;
  background:var(--bg); box-shadow:inset 0 0 0 2px var(--edge-2);
  transition:all .4s cubic-bezier(.16,1,.3,1);
}
.spy .lbl{
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateX(-8px); white-space:nowrap;
  transition:opacity .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.spy:hover .lbl{opacity:.8; transform:none}
.spy a:hover{color:var(--ink)}
.spy a:hover .dot{box-shadow:inset 0 0 0 2px var(--a1)}
.spy a.on{color:var(--ink)}
.spy a.on .dot{background:var(--a1); box-shadow:0 0 0 4px rgba(240,117,166,.18), 0 0 16px var(--a1-v); transform:scale(1.15)}
.spy a.on .lbl{opacity:1; transform:none; color:var(--ink)}
@media (max-width:1340px){ .spy{display:none!important} }

/* ============ SOCIAL RAIL ============ */
.social{
  position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:65;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.social::after{content:""; width:1px; height:74px; background:linear-gradient(180deg,var(--edge-2),transparent); margin-top:4px}
.social a{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-mid); border:1px solid var(--edge); background:var(--panel); backdrop-filter:blur(10px);
  transition:all .34s cubic-bezier(.16,1,.3,1);
}
.social a svg{width:17px; height:17px; fill:currentColor; display:block}
.social a:hover{color:var(--on-accent); background:var(--grad-1); border-color:transparent; transform:translateY(-3px) scale(1.06); box-shadow:var(--glow-1)}
@media (max-width:1180px){ .social{display:none} }

/* horizontal social row — footer + mobile fallback */
.social-row{display:flex; gap:11px; margin-top:20px}
.social-row a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  color:var(--ink-mid); border:1px solid var(--edge); background:var(--panel);
  transition:all .34s cubic-bezier(.16,1,.3,1);
}
.social-row a svg{width:18px; height:18px; fill:currentColor; display:block}
.social-row a:hover{color:var(--on-accent); background:var(--grad-1); border-color:transparent; transform:translateY(-3px); box-shadow:var(--glow-1)}

/* ============ REELS CAROUSEL ============ */
.reels{position:relative; overflow:hidden}
.reel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px}
.handle{display:flex; align-items:center; gap:15px}
.ig-ring{
  width:62px; height:62px; border-radius:50%; flex:none; padding:2.5px;
  background:conic-gradient(from 200deg,#F894BC,#E8BC70,#5B96D0,#F075A6,#F894BC);
  display:grid; place-items:center; box-shadow:var(--glow-1);
}
.ig-ring span{width:100%; height:100%; border-radius:50%; background:var(--bg); display:grid; place-items:center; overflow:hidden}
.ig-ring svg{width:88%; height:88%}
.handle .ht b{display:block; font-family:"Hoefler Text",Georgia,serif; font-size:20px; font-weight:600; letter-spacing:-.01em}
.handle .ht span{font-family:"Cascadia Code",ui-monospace,monospace; font-size:11px; letter-spacing:.14em; color:var(--ink-soft)}
.reel-nav{display:flex; gap:9px; align-items:center}
.rnav{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--edge-2); background:var(--panel);
  display:grid; place-items:center; font-size:15px; color:var(--ink);
  transition:all .3s cubic-bezier(.16,1,.3,1); backdrop-filter:blur(10px);
}
.rnav:hover:not(:disabled){border-color:var(--a1); box-shadow:var(--glow-1); transform:translateY(-2px)}
.rnav:disabled{opacity:.3; cursor:default}
.reel-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 0 20px; scrollbar-width:none; -ms-overflow-style:none;
}
.reel-track::-webkit-scrollbar{display:none}
@media (hover:hover){ .reel-track{cursor:grab} }
.reel{
  flex:0 0 clamp(196px,21vw,238px); scroll-snap-align:start; aspect-ratio:9/16;
  position:relative; border-radius:22px; overflow:hidden; color:#FBF6EE;
  box-shadow:var(--lift-2); border:1px solid var(--edge);
  transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s;
  isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:18px 16px;
}
.reel:hover{transform:translateY(-8px); box-shadow:var(--lift-3), var(--glow-1); border-color:var(--edge-2)}
.reel::before{content:""; position:absolute; inset:0; z-index:-2; transition:transform .8s cubic-bezier(.16,1,.3,1)}
.reel:hover::before{transform:scale(1.09)}
.reel::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(4,8,16,.16) 34%,rgba(4,8,16,.86) 100%)}
.reel .rplay{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); z-index:2;
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.45); backdrop-filter:blur(10px);
  display:grid; place-items:center; opacity:.85; transition:all .4s cubic-bezier(.16,1,.3,1);
}
.reel .rplay::after{content:""; border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; margin-left:3px}
.reel:hover .rplay{transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,.3); opacity:1}
.reel .rcap{position:relative; z-index:2; font-size:13.5px; line-height:1.35; font-weight:600; text-shadow:0 1px 6px rgba(0,0,0,.5)}
.reel .rmeta{
  position:relative; z-index:2; margin-top:8px; display:flex; align-items:center; gap:10px;
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:10.5px; letter-spacing:.08em; color:rgba(251,246,238,.82);
}
.reel .rmeta i{font-style:normal; display:flex; align-items:center; gap:4px}
.reel .rlen{
  position:absolute; top:14px; right:14px; z-index:2; font-family:"Cascadia Code",ui-monospace,monospace;
  font-size:10px; background:rgba(5,9,18,.62); border:1px solid rgba(255,255,255,.2);
  padding:3px 8px; border-radius:999px; backdrop-filter:blur(6px);
}
.reel-r1::before{background:radial-gradient(130% 110% at 30% 15%,#F894BC,#7A2B4E 74%)}
.reel-r2::before{background:radial-gradient(130% 110% at 30% 15%,#5B96D0,#12294A 74%)}
.reel-r3::before{background:radial-gradient(130% 110% at 30% 15%,#F3D394,#8A5E1E 74%)}
.reel-r4::before{background:radial-gradient(130% 110% at 30% 15%,#C287E0,#3F2A63 74%)}
.reel-r5::before{background:radial-gradient(130% 110% at 30% 15%,#7FD3D0,#134745 74%)}
.reel-r6::before{background:radial-gradient(130% 110% at 30% 15%,#F0A98E,#7A3A2B 74%)}
.reel-r7::before{background:radial-gradient(130% 110% at 30% 15%,#9FB4E8,#232F5C 74%)}
.reel-r8::before{background:radial-gradient(130% 110% at 30% 15%,#F075A6,#4A1E38 74%)}
.reel-hint{
  text-align:center; font-family:"Cascadia Code",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px;
}
@media (max-width:620px){ .reel-nav{display:none} }

/* ============ COLLECTIONS ============ */
.cgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:1000px){ .cgrid{grid-template-columns:repeat(2,1fr)} }
.ctile{
  position:relative; min-height:230px; border-radius:var(--radius); overflow:hidden; padding:28px 24px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:7px; color:#FBF6EE;
  box-shadow:var(--lift-2); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; isolation:isolate;
}
.ctile:hover{transform:translateY(-8px); box-shadow:var(--lift-3)}
.ctile::before{content:""; position:absolute; inset:0; z-index:-2; transition:transform .7s cubic-bezier(.16,1,.3,1)}
.ctile:hover::before{transform:scale(1.1)}
.ctile::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(6,5,4,.05) 30%,rgba(6,5,4,.8) 100%)}
.ct1::before{background:radial-gradient(130% 110% at 25% 15%,#F3D394,#8F6526 72%)}
.ct2::before{background:radial-gradient(130% 110% at 25% 15%,#5B96D0,#1B3F66 72%)}
.ct3::before{background:radial-gradient(130% 110% at 25% 15%,#F492BA,#A83C68 72%)}
.ct4::before{background:radial-gradient(130% 110% at 25% 15%,#E8BC70,#A83C68 76%)}
.ctile .ci{font-size:30px; line-height:1; margin-bottom:6px}
.ctile h3{font-family:"Hoefler Text",Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.015em}
.ctile span{font-family:"Cascadia Code",ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.85}
.ctile .arrow{position:absolute; top:22px; right:22px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.35); display:grid; place-items:center; font-size:13px; transition:all .4s cubic-bezier(.16,1,.3,1)}
.ctile:hover .arrow{background:#fff; color:#1B1305; transform:rotate(-45deg)}

/* ============ TRUST ============ */
.tgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:860px){ .tgrid{grid-template-columns:repeat(2,1fr)} }
.tcard{padding:30px 22px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--edge); text-align:center; transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s}
.tcard:hover{transform:translateY(-5px); border-color:var(--edge-2)}
.tcard .ti{width:52px; height:52px; margin:0 auto 15px; border-radius:15px; display:grid; place-items:center; font-size:21px; background:var(--grad-duo); box-shadow:var(--glow-1)}
.tcard b{display:block; font-family:"Hoefler Text",Georgia,serif; font-size:17px; font-weight:600; margin-bottom:5px}
.tcard span{font-size:13px; color:var(--ink-soft); line-height:1.5}

/* ============ BAND ============ */
/* the band is always a dark, lit surface — its text is fixed light in every variant */
.band{position:relative; overflow:hidden; border-radius:32px; padding:76px 42px; text-align:center;
  background:linear-gradient(150deg, rgba(240,117,166,.10), rgba(91,150,208,.07) 55%, transparent);
  border:1px solid var(--edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.band h2{font-size:clamp(30px,4.4vw,52px)}
.band p{color:var(--ink-mid); max-width:52ch; margin:20px auto 34px}
.band .label{color:var(--a1)}

/* ============ FOOTER ============ */
footer.site{background:transparent; border-top:1px solid var(--edge); margin-top:120px; position:relative; overflow:hidden}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:72px 0 44px; position:relative; z-index:2}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr; gap:32px} }
footer.site h4{font-family:"Cascadia Code",ui-monospace,monospace; font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--a1); margin:0 0 18px; font-weight:600}
footer.site p{color:var(--ink-soft); font-size:14px; max-width:34ch; margin:0}
footer.site a{display:block; color:var(--ink-mid); padding:6px 0; font-size:14.5px; transition:color .25s, transform .25s}
footer.site a:hover{color:var(--a1); transform:translateX(4px)}
.fbrand{font-family:"Hoefler Text",Georgia,serif; font-size:23px; font-weight:600; letter-spacing:-.015em; margin-bottom:14px; display:block; color:var(--ink)}
.fbot{border-top:1px solid var(--edge); padding:22px 0 30px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:"Cascadia Code",ui-monospace,monospace; font-size:11.5px; letter-spacing:.1em; color:var(--ink-soft); position:relative; z-index:2}

/* ============ PAGE HEADS / SHOP ============ */
.phead{padding:76px 0 10px; text-align:center; position:relative; z-index:2}
.crumbs{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:20px}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--a1)}
.phead h1{font-size:clamp(38px,6vw,72px)}
.phead p{color:var(--ink-mid); max-width:58ch; margin:20px auto 0}
.filters{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:42px 0 22px; position:relative; z-index:2}
.chip{border:1px solid var(--edge); background:var(--panel); border-radius:999px; padding:11px 21px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-mid); transition:all .3s cubic-bezier(.16,1,.3,1)}
.chip:hover{color:var(--ink); border-color:var(--edge-2); transform:translateY(-2px)}
.chip.on{background:var(--grad-1); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-1)}
.count{text-align:center; font-family:"Cascadia Code",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:30px}

/* ============ PRODUCT ============ */
.pd{display:grid; grid-template-columns:1.02fr .98fr; gap:62px; padding-top:34px; position:relative; z-index:2}
@media (max-width:940px){ .pd{grid-template-columns:1fr; gap:40px} }
.pstage{position:relative; aspect-ratio:1/1.02; border-radius:28px; display:grid; place-items:center; padding:14%; background:var(--case); box-shadow:var(--lift-3), 0 0 0 1px var(--edge); overflow:hidden}
.pstage::before{content:""; position:absolute; left:50%; top:-12%; width:70%; height:80%; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%, var(--lamp), transparent 66%); filter:blur(6px)}
.pstage svg{position:relative; z-index:2; width:100%; height:100%; animation:bob 7s ease-in-out infinite}
.pthumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-top:16px}
.pthumbs button{aspect-ratio:1; border-radius:16px; border:1px solid var(--edge); background:var(--grad-ink); display:grid; place-items:center; padding:14%; transition:all .3s cubic-bezier(.16,1,.3,1)}
.pthumbs button:hover{transform:translateY(-3px); border-color:var(--edge-2)}
.pthumbs button.on{border-color:var(--a1); box-shadow:var(--glow-1)}
.pthumbs svg{width:100%; height:100%}
.pinfo .label{display:block; margin-bottom:14px; color:var(--a2)}
.pinfo h1{font-size:clamp(32px,4.4vw,52px)}
.rate{display:flex; align-items:center; gap:11px; margin-top:16px}
.stars-r{color:var(--a2); letter-spacing:3px; font-size:14px}
.rate small{color:var(--ink-soft); font-family:"Cascadia Code",ui-monospace,monospace; font-size:11.5px; letter-spacing:.1em}
.pprice{font-family:"Hoefler Text",Georgia,serif; font-size:42px; font-weight:600; letter-spacing:-.03em; margin:20px 0 6px}
.pdesc{color:var(--ink-mid); max-width:50ch}
.buy{display:flex; gap:13px; margin:30px 0 16px; flex-wrap:wrap}
.qty{display:inline-flex; align-items:center; border:1px solid var(--edge-2); border-radius:999px; background:var(--panel); overflow:hidden}
.qty button{width:46px; min-height:52px; border:none; background:transparent; font-size:19px; font-weight:600; transition:background .25s}
.qty button:hover{background:var(--panel-2)}
.qty output{width:40px; text-align:center; font-family:"Cascadia Code",ui-monospace,monospace; font-weight:700}
.stock{display:inline-flex; align-items:center; gap:9px; padding:10px 18px; border-radius:999px; background:var(--panel); border:1px solid var(--edge-2); font-size:12.5px; font-weight:600}
.stock i{width:7px; height:7px; border-radius:50%; background:var(--a1); box-shadow:0 0 10px var(--a1-v); animation:pulse 1.9s ease-in-out infinite; font-style:normal}
.stock.gone i{background:var(--ink-soft); box-shadow:none; animation:none}
.spec{display:grid; grid-template-columns:auto 1fr; margin:34px 0 0; border:1px solid var(--edge); border-radius:18px; overflow:hidden; background:var(--panel)}
.spec dt{padding:14px 20px; font-family:"Cascadia Code",ui-monospace,monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1px solid var(--edge); display:flex; align-items:center}
.spec dd{margin:0; padding:14px 20px; font-size:14.5px; font-weight:600; border-bottom:1px solid var(--edge)}
.spec dt:nth-last-of-type(1), .spec dd:nth-last-of-type(1){border-bottom:none}
.tabs{margin-top:76px; position:relative; z-index:2}
.tabbtns{display:flex; gap:9px; flex-wrap:wrap; justify-content:center}
.tabbtns button{border:1px solid var(--edge); background:var(--panel); border-radius:999px; padding:11px 21px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); transition:all .3s cubic-bezier(.16,1,.3,1)}
.tabbtns button:hover{color:var(--ink); transform:translateY(-2px)}
.tabbtns button.on{background:var(--grad-2); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-2)}
.pane{display:none; margin-top:24px; padding:38px 40px; border-radius:24px; background:var(--panel); border:1px solid var(--edge)}
.pane.on{display:block; animation:fade .5s cubic-bezier(.16,1,.3,1)}
.pane p{color:var(--ink-mid); max-width:66ch; margin:0 0 14px}
.pane p:last-child{margin-bottom:0}
.embed{aspect-ratio:16/9; max-width:600px; border-radius:20px; margin-top:18px; display:grid; place-items:center; background:var(--case); box-shadow:var(--lift-2)}
.rev{padding:20px 0; border-bottom:1px solid var(--edge)}
.rev:last-child{border-bottom:none; padding-bottom:0}
.rev .rh{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.rev b{font-size:14.5px}
.rev p{margin:8px 0 0; font-size:14.5px; color:var(--ink-mid)}
@keyframes fade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ============ ABOUT ============ */
.ab-hero{display:grid; grid-template-columns:.82fr 1.18fr; gap:64px; align-items:center; padding:74px 0 40px; position:relative; z-index:2}
@media (max-width:900px){ .ab-hero{grid-template-columns:1fr; gap:44px} }
.ab-hero h1{font-size:clamp(34px,5.2vw,62px); margin:16px 0 22px}
.ab-hero p{color:var(--ink-mid); max-width:56ch; margin:0 0 16px}
.ab-hero em{color:var(--a2); font-style:italic}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:34px 0 70px; position:relative; z-index:2}
@media (max-width:700px){ .facts{grid-template-columns:1fr} }
.fact{padding:34px 26px; border-radius:var(--radius); text-align:center; position:relative; overflow:hidden; background:var(--panel); border:1px solid var(--edge); box-shadow:var(--lift-2); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s}
.fact:hover{transform:translateY(-6px); box-shadow:var(--lift-3)}
.fact::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad-duo)}
.fact b{display:block; font-family:"Hoefler Text",Georgia,serif; font-size:46px; font-weight:600; letter-spacing:-.035em; line-height:1; background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:10px}
.fact span{font-size:13px; color:var(--ink-soft)}

/* ============ CART ============ */
.veil{position:fixed; inset:0; background:rgba(3,4,8,.74); backdrop-filter:blur(5px); z-index:190; opacity:0; pointer-events:none; transition:opacity .35s}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(430px,94vw); z-index:200; display:flex; flex-direction:column; background:var(--bg-2); border-left:1px solid var(--edge); transform:translateX(102%); transition:transform .48s cubic-bezier(.16,1,.3,1); box-shadow:-30px 0 80px rgba(0,0,0,.55)}
body.open .drawer{transform:none}
body.open .veil{opacity:1; pointer-events:auto}
.dh{display:flex; align-items:center; justify-content:space-between; padding:24px 26px; border-bottom:1px solid var(--edge)}
.dh h3{font-family:"Hoefler Text",Georgia,serif; font-size:23px; font-weight:600}
.dx{border:1px solid var(--edge); background:transparent; width:36px; height:36px; border-radius:50%; font-size:17px; line-height:1; transition:all .3s}
.dx:hover{border-color:var(--a1); color:var(--a1); transform:rotate(90deg)}
.items{flex:1; overflow-y:auto; padding:8px 26px}
.ci{display:flex; gap:15px; align-items:center; padding:17px 0; border-bottom:1px solid var(--edge)}
.ci .ca{width:62px; height:62px; flex:none; border-radius:14px; display:grid; place-items:center; padding:9px; background:var(--grad-ink); border:1px solid var(--edge)}
.ci .ca svg{width:100%; height:100%}
.ci .cn{font-family:"Hoefler Text",Georgia,serif; font-size:15.5px; font-weight:600; line-height:1.3}
.ci .cq{font-family:"Cascadia Code",ui-monospace,monospace; font-size:11.5px; color:var(--ink-soft)}
.ci .rm{margin-left:auto; border:none; background:transparent; color:var(--ink-soft); font-size:19px; transition:color .25s, transform .25s}
.ci .rm:hover{color:var(--a2); transform:rotate(90deg)}
.empty{color:var(--ink-soft); text-align:center; padding:60px 16px; font-family:"Hoefler Text",Georgia,serif; font-style:italic; font-size:17px}
.df{padding:22px 26px 28px; border-top:1px solid var(--edge)}
.tot{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px}
.tot span:first-child{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-family:"Cascadia Code",ui-monospace,monospace}
.tot span:last-child{font-family:"Hoefler Text",Georgia,serif; font-size:28px; font-weight:600; letter-spacing:-.02em}
.df .btn{width:100%}
.nt{font-size:11px; color:var(--ink-soft); text-align:center; margin-top:13px}

.toast{position:fixed; bottom:30px; left:50%; z-index:220; transform:translate(-50%,140px); background:var(--bg-3); border:1px solid var(--edge-2); border-radius:999px; padding:14px 26px; font-size:14px; font-weight:600; box-shadow:var(--lift-3), var(--glow-1); transition:transform .5s cubic-bezier(.16,1,.3,1); display:flex; align-items:center; gap:10px}
.toast::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--a1); box-shadow:0 0 10px var(--a1); flex:none}
.toast.show{transform:translate(-50%,0)}


/* ════════════════════════════════════════════════════════════
   ACCENT LAYER — gradients, rings, coloured light.
   Everything here sits on top of the crushed black ground.
   ════════════════════════════════════════════════════════════ */

/* -- animated accent bar at the very top -- */
.topbar{
  background:linear-gradient(90deg,#F075A6,#5B96D0,#E8BC70,#F894BC,#F075A6);
  background-size:300% 100%; animation:tbshift 14s linear infinite;
}
@keyframes tbshift{to{background-position:300% 0}}

/* -- glowing gradient rule under the header and over the footer -- */
header.site::after, footer.site::before{
  content:""; position:absolute; left:0; right:0; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--a1) 28%,var(--a3) 55%,var(--a2) 78%,transparent);
  opacity:.55;
}
header.site::after{bottom:-1px}
footer.site::before{top:-1px}

/* -- section headings get a lit underscore -- */
.head h2::after{
  content:""; display:block; width:66px; height:2px; margin:24px auto 0; border-radius:2px;
  background:var(--grad-duo); box-shadow:0 0 18px var(--a1-v), 0 0 44px rgba(240,117,166,.45);
}

/* -- divider diamond burns a little brighter -- */
.divider::after{box-shadow:0 0 18px var(--a1-v), 0 0 46px rgba(240,117,166,.55)}

/* -- prices and figures in gradient type -- */
.card .price, .pprice, .hero-stats div b{
  background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* -- richer buttons: inner highlight + layered coloured glow -- */
.btn-1{
  background:linear-gradient(135deg,#FBA9C9 0%,#F075A6 46%,#BE4576 100%);
  box-shadow:0 0 0 1px rgba(248,148,188,.34), 0 12px 32px -10px rgba(240,117,166,.78),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-1:hover{box-shadow:0 0 0 1px rgba(248,148,188,.5), 0 20px 50px -12px rgba(240,117,166,.95),
             inset 0 1px 0 rgba(255,255,255,.55)}
.btn-2{
  background:linear-gradient(135deg,#F7DFA8 0%,#E8BC70 46%,#B8873A 100%);
  box-shadow:0 0 0 1px rgba(243,211,148,.34), 0 12px 32px -10px rgba(232,188,112,.7),
             inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-2:hover{box-shadow:0 0 0 1px rgba(243,211,148,.5), 0 20px 50px -12px rgba(232,188,112,.9),
             inset 0 1px 0 rgba(255,255,255,.55)}
.btn-glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.btn-glass:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 36px -14px rgba(240,117,166,.55)}

/* -- gradient ring that lights up on hover (mask keeps the centre clear) -- */
.card::before, .vcard::before, .tcard::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.2px; z-index:4;
  background:conic-gradient(from 140deg, var(--a1), var(--a3) 30%, var(--a2) 62%, var(--a1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s cubic-bezier(.16,1,.3,1); pointer-events:none;
}
.card:hover::before, .vcard:hover::before, .tcard:hover::before{opacity:.85}
.vcard, .tcard{position:relative}

/* -- cursor spotlight inside product cards -- */
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:3; pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%), rgba(240,117,166,.17), transparent 68%);
  opacity:0; transition:opacity .4s ease;
}
.card:hover::after{opacity:1}

/* -- coloured shadows instead of flat black -- */
.card:hover{box-shadow:var(--lift-3), 0 24px 64px -22px rgba(240,117,166,.6)}
.vcard:hover{box-shadow:var(--lift-3), 0 24px 64px -22px rgba(232,188,112,.5)}
.ctile:hover{box-shadow:var(--lift-3), 0 28px 74px -24px rgba(240,117,166,.55)}
.reel:hover{box-shadow:var(--lift-3), 0 24px 64px -22px rgba(240,117,166,.55), inset 0 0 0 1px var(--a1-v)}
.tcard:hover{box-shadow:0 20px 50px -18px rgba(91,150,208,.5)}
.tcard .ti{box-shadow:0 10px 28px -8px rgba(240,117,166,.6), inset 0 1px 0 rgba(255,255,255,.35)}

/* -- collection tiles get a lit inner edge -- */
.ctile{box-shadow:var(--lift-2), inset 0 0 0 1px rgba(255,255,255,.07)}

/* -- marquee fades out at both ends -- */
.marquee{
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* -- gradient scrollbar (the reel track keeps its hidden one) -- */
*::-webkit-scrollbar{width:11px; height:11px}
*::-webkit-scrollbar-track{background:var(--bg-2)}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--a1),var(--a3)); border-radius:99px; border:3px solid var(--bg);
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--a1-v),var(--a1))}


/* ════════════════════════════════════════════════════════════
   WORDPRESS + WOOCOMMERCE GLUE
   ════════════════════════════════════════════════════════════ */

/* --- core WP classes --- */
.alignleft{float:left; margin:0 1.6em 1em 0}
.alignright{float:right; margin:0 0 1em 1.6em}
.aligncenter{display:block; margin-inline:auto}
.alignwide{max-width:1400px; margin-inline:auto}
.alignfull{max-width:none; width:100%}
.wp-caption{max-width:100%}
.wp-caption-text, .wp-element-caption{font-size:13px; color:var(--ink-soft); text-align:center; margin-top:8px}
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--bg-3); color:var(--ink); padding:12px 20px; border-radius:0 0 12px 0;
  border:1px solid var(--edge-2);
}
.skip-link:focus{left:0}
.admin-bar header.site{top:32px}
@media (max-width:782px){ .admin-bar header.site{top:46px} }

/* --- long-form page / post content --- */
.entry{padding:60px 0 100px; position:relative; z-index:2}
.entry-header{text-align:center; margin-bottom:44px}
.entry-content{max-width:70ch; margin-inline:auto}
.entry-content > * + *{margin-top:1.1em}
.entry-content h2{font-family:"Hoefler Text",Georgia,serif; font-size:32px; margin-top:1.8em}
.entry-content h3{font-family:"Hoefler Text",Georgia,serif; font-size:24px; margin-top:1.5em}
.entry-content a{text-decoration:underline; text-underline-offset:3px}
.entry-content blockquote{border-left:2px solid var(--a1); padding-left:22px; font-style:italic; color:var(--ink-mid)}
.entry-content img{border-radius:16px}
.entry-content ul, .entry-content ol{padding-left:1.3em}
.entry-content li + li{margin-top:.4em}
.entry-content code{background:var(--panel); padding:2px 7px; border-radius:6px; font-size:.9em}

/* --- pagination --- */
.nav-links{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; padding:20px 0 90px}
.nav-links .page-numbers{
  min-width:44px; height:44px; padding:0 14px; border-radius:999px; display:grid; place-items:center;
  border:1px solid var(--edge); background:var(--panel); color:var(--ink-mid);
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:13px; text-decoration:none;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.nav-links .page-numbers:hover{color:var(--ink); border-color:var(--edge-2); transform:translateY(-2px)}
.nav-links .page-numbers.current{background:var(--grad-1); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-1)}

/* --- mobile nav (no room for the desktop bar) --- */
.nav-toggle{
  display:none; margin-left:auto; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--edge-2); background:var(--panel); color:var(--ink);
  align-items:center; justify-content:center; font-size:17px;
}
@media (max-width:820px){
  .nav-toggle{display:inline-flex}
  nav.main{
    position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; gap:4px;
    background:var(--bg-2); border-bottom:1px solid var(--edge-2); padding:88px 26px 26px;
    transform:translateY(-102%); transition:transform .4s cubic-bezier(.16,1,.3,1); z-index:69;
  }
  body.nav-open nav.main{display:flex; transform:none}
  nav.main a{font-size:14px; padding:14px 16px; width:100%}
}

/* --- WooCommerce notices --- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
  list-style:none; margin:0 0 22px; padding:16px 22px; border-radius:14px;
  background:var(--panel); border:1px solid var(--edge-2); font-size:14.5px;
}
.woocommerce-message{border-left:3px solid var(--a1)}
.woocommerce-error{border-left:3px solid #E0544F}

/* --- Woo form fields --- */
.woocommerce form .form-row{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.woocommerce form .form-row label{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.woocommerce input[type=text], .woocommerce input[type=email], .woocommerce input[type=tel],
.woocommerce input[type=password], .woocommerce input[type=number], .woocommerce textarea,
.woocommerce select, .woocommerce .input-text, .search-field{
  background:var(--panel); border:1px solid var(--edge-2); border-radius:12px;
  color:var(--ink); padding:13px 16px; font:inherit; width:100%;
}
.woocommerce input:focus, .woocommerce textarea:focus, .woocommerce select:focus, .search-field:focus{
  outline:none; border-color:var(--a1); box-shadow:var(--glow-1);
}

/* --- Woo buttons inherit the theme button --- */
.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit, .woocommerce .button.alt{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  background:linear-gradient(135deg,#FBA9C9 0%,#F075A6 46%,#BE4576 100%); color:var(--on-accent);
  box-shadow:0 0 0 1px rgba(248,148,188,.34), 0 12px 32px -10px rgba(240,117,166,.78),
             inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, filter .22s;
  text-decoration:none; line-height:1;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover{
  transform:translateY(-3px); filter:brightness(1.06);
}
.woocommerce .button:disabled, .woocommerce button.button:disabled{opacity:.42; transform:none; filter:grayscale(.5)}
.woocommerce .quantity{display:inline-flex; align-items:center; border:1px solid var(--edge-2); border-radius:999px; background:var(--panel); overflow:hidden}
.woocommerce .quantity input[type=number]{width:84px; text-align:center; border:none; background:transparent; border-radius:0}

/* --- cart + checkout tables --- */
.woocommerce table.shop_table{
  width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--edge);
  border-radius:18px; overflow:hidden; background:var(--panel); margin-bottom:26px;
}
.woocommerce table.shop_table th{
  text-align:left; padding:16px 20px; font-family:"Cascadia Code",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  border-bottom:1px solid var(--edge);
}
.woocommerce table.shop_table td{padding:18px 20px; border-bottom:1px solid var(--edge); vertical-align:middle}
.woocommerce table.shop_table tr:last-child td{border-bottom:none}
.woocommerce table.shop_table img{width:64px; border-radius:12px; display:block}
.woocommerce .cart_totals h2, .woocommerce-billing-fields h3, .woocommerce-checkout h3{
  font-family:"Hoefler Text",Georgia,serif; font-size:24px; margin-bottom:16px;
}
.woocommerce .cart-collaterals{max-width:460px; margin-left:auto}
.woocommerce-cart-form{margin-bottom:34px}
.woocommerce .cart-empty, .woocommerce-info{text-align:center}

/* --- shop archive wrapper --- */
.shop-wrap{padding-bottom:110px; position:relative; z-index:2}
.shop-toolbar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:26px}
.woocommerce-result-count{font-family:"Cascadia Code",ui-monospace,monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:0}
.woocommerce-ordering select{width:auto; padding:10px 16px}

/* --- related products --- */
.related > h2, .upsells > h2, .cross-sells > h2{
  font-family:"Hoefler Text",Georgia,serif; font-size:clamp(26px,3.4vw,38px);
  text-align:center; margin:70px 0 34px; font-weight:600; letter-spacing:-.02em;
}

/* --- single product tabs (Woo markup) --- */
.woocommerce-tabs{margin-top:76px; position:relative; z-index:2}
.woocommerce-tabs ul.tabs{
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center; list-style:none; margin:0 0 24px; padding:0;
}
.woocommerce-tabs ul.tabs li a{
  display:block; border:1px solid var(--edge); background:var(--panel); border-radius:999px;
  padding:11px 21px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--ink-soft); text-decoration:none; transition:all .3s cubic-bezier(.16,1,.3,1);
}
.woocommerce-tabs ul.tabs li a:hover{color:var(--ink); transform:translateY(-2px)}
.woocommerce-tabs ul.tabs li.active a{background:var(--grad-2); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-2)}
.woocommerce-tabs .panel{background:var(--panel); border:1px solid var(--edge); border-radius:24px; padding:38px 40px; color:var(--ink-mid)}
.woocommerce-tabs .panel > h2:first-child{display:none}

/* --- reviews --- */
.woocommerce #reviews #comments ol.commentlist{list-style:none; margin:0; padding:0}
.woocommerce #reviews .comment_container{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--edge)}
.woocommerce #reviews img.avatar{width:46px; height:46px; border-radius:50%}
.woocommerce .star-rating{color:var(--a1)}

/* --- Woo price markup --- */
.woocommerce div.product p.price, .woocommerce div.product span.price{
  font-family:"Hoefler Text",Georgia,serif; font-size:42px; font-weight:600; letter-spacing:-.03em;
  margin:20px 0 6px; background:var(--grad-head); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.woocommerce div.product p.price del{opacity:.45; font-size:.6em}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--ink-mid); max-width:50ch}
.woocommerce div.product div.images img{border-radius:20px}
.woocommerce div.product form.cart{display:flex; gap:13px; flex-wrap:wrap; margin:30px 0 16px}
.woocommerce div.product form.cart .button{flex:1; min-width:210px}

/* --- editor palette parity with theme.json --- */
.has-magenta-color{color:var(--a1)}       .has-magenta-background-color{background-color:var(--a1)}
.has-honey-color{color:var(--a2)}         .has-honey-background-color{background-color:var(--a2)}
.has-cobalt-color{color:var(--a3)}        .has-cobalt-background-color{background-color:var(--a3)}
.has-cream-color{color:var(--ink)}        .has-ground-background-color{background-color:var(--bg)}


/* ════════════════════════════════════════════════════════════
   SINGLE PRODUCT — REAL PHOTO GALLERY
   The stage was sized for the generated SVG pins. WooCommerce's
   gallery is different markup, so it gets its own rules.
   ════════════════════════════════════════════════════════════ */

/* With a real photo the stage hugs the image instead of holding a fixed square */
.pstage.has-photo{
  aspect-ratio:auto;
  padding:18px;
  display:block;
}
.pstage.has-photo::before{opacity:.55}

/* the gallery itself */
.woocommerce div.product div.images,
.woocommerce div.product div.images.woocommerce-product-gallery{
  position:relative; z-index:2; width:100%; margin:0; float:none; opacity:1 !important;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper{margin:0}
.woocommerce div.product div.images img{
  width:100%; height:auto; display:block; border-radius:18px; box-shadow:var(--lift-2);
}
.woocommerce div.product div.images .flex-viewport{border-radius:18px; overflow:hidden}

/* thumbnails: a tidy row, not floated circles */
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid; grid-template-columns:repeat(5,1fr); gap:10px;
  margin:12px 0 0; padding:0; list-style:none; overflow:visible;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  width:auto; margin:0; float:none; list-style:none;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px;
  opacity:.5; cursor:pointer; box-shadow:none;
  border:1px solid var(--edge);
  transition:opacity .3s cubic-bezier(.16,1,.3,1), border-color .3s, transform .3s;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover{
  opacity:.85; transform:translateY(-2px);
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active{
  opacity:1; border-color:var(--a1); box-shadow:var(--glow-1);
}

/* the zoom trigger, as a glass button in the corner */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
  position:absolute; top:16px; right:16px; left:auto; z-index:4;
  width:42px; height:42px; border-radius:50%; margin:0; padding:0;
  background:rgba(255,255,255,.1); border:1px solid var(--edge-2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; place-items:center; text-decoration:none; color:var(--ink);
  font-size:0; line-height:1; text-indent:0;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger::after{
  content:"\2315"; font-size:19px; color:var(--ink); line-height:1;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger img{display:none}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover{
  background:var(--grad-1); color:var(--on-accent); border-color:transparent; box-shadow:var(--glow-1);
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger:hover::after{color:var(--on-accent)}

/* sale flash sits with the other badges */
.woocommerce div.product span.onsale{
  position:absolute; top:16px; left:16px; z-index:4; min-height:0; min-width:0;
  padding:6px 13px; border-radius:999px; margin:0; line-height:1.4;
  font-family:"Cascadia Code",ui-monospace,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  background:var(--grad-1); color:var(--on-accent); box-shadow:var(--glow-1);
}

/* title: two-word names were splitting awkwardly at the big size */
.pinfo h1{font-size:clamp(28px,3.4vw,44px); text-wrap:pretty}

/* keep the two columns balanced now the image is a real photo */
@media (min-width:941px){
  .pd{grid-template-columns:1.05fr .95fr; align-items:start}
}

/* the summary column shouldn't inherit Woo's float/width */
.woocommerce div.product .summary{float:none; width:auto; margin:0}


/* ── override WooCommerce's own two-column floats ──────────────
   Woo ships `div.images{float:left;width:48%}` and the same for
   `div.summary`. Inside our CSS grid those fight the layout, and Woo's
   stylesheet can load after the theme's. !important is deliberate here:
   we are overriding a plugin's layout, not our own rules.            */
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .pinfo,
.woocommerce div.product .pd-media{
  float:none !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
.woocommerce div.product::before,
.woocommerce div.product::after{content:none !important}
.woocommerce div.product .woocommerce-product-gallery{width:100% !important}

/* give the copy a comfortable measure again */
.woocommerce div.product .woocommerce-product-details__short-description{max-width:56ch}
.pinfo .pdesc, .pinfo p{max-width:56ch}

/* ════════════════════════════════════════════════════════════
   REEL LIGHTBOX
   The Instagram embed only loads when a card is clicked, so the
   homepage never pays for eight third-party iframes up front.
   ════════════════════════════════════════════════════════════ */
.lb{
  position:fixed; inset:0; z-index:400; display:none;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(0,0,0,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .3s ease;
}
.lb.open{display:flex}
.lb.in{opacity:1}
.lb-box{
  position:relative; width:min(420px,94vw); max-height:92vh;
  border-radius:22px; overflow:hidden; background:#0f0f12;
  box-shadow:var(--lift-3), 0 0 0 1px var(--edge-2), var(--glow-1);
  transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.lb.in .lb-box{transform:none}
.lb-box iframe{display:block; width:100%; height:min(760px,86vh); border:0; background:#0f0f12}
.lb-load{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:"Cascadia Code",ui-monospace,monospace; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.lb-close{
  position:absolute; top:-52px; right:0; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--edge-2); background:var(--panel); color:var(--ink);
  display:grid; place-items:center; font-size:17px; transition:all .3s cubic-bezier(.16,1,.3,1);
  backdrop-filter:blur(10px);
}
.lb-close:hover{background:var(--grad-1); color:var(--on-accent); border-color:transparent; transform:rotate(90deg)}
.lb-open-ig{
  position:absolute; top:-52px; left:0; padding:11px 18px; border-radius:999px;
  border:1px solid var(--edge-2); background:var(--panel); color:var(--ink);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  text-decoration:none; backdrop-filter:blur(10px); transition:all .3s cubic-bezier(.16,1,.3,1);
}
.lb-open-ig:hover{background:var(--grad-1); color:var(--on-accent); border-color:transparent}
@media (max-width:520px){
  .lb{padding:16px}
  .lb-close{top:auto; bottom:-52px; right:50%; transform:translateX(50%)}
  .lb-close:hover{transform:translateX(50%) rotate(90deg)}
  .lb-open-ig{top:auto; bottom:-50px; left:0; display:none}
}
/* a card that opens a lightbox should feel clickable, not like a link away */
.reel[data-embed]{cursor:zoom-in}

/* ════════════════════════════════════════════════════════════
   MOBILE & TABLET REFINEMENT
   Layout already reflowed; this tightens the spacing and type so
   small screens are not just a squeezed desktop.
   ════════════════════════════════════════════════════════════ */

/* ── tablet ─────────────────────────────────────────────── */
@media (max-width:900px){
  .sec, .sec-tight{padding:72px 0}
  .hero{padding:60px 0 68px}
  .head{margin-bottom:40px}
  .fgrid{padding:56px 0 34px}
  .phead{padding:56px 0 8px}
  .band{padding:56px 30px; border-radius:26px}
  .pane{padding:28px 26px}
  .woocommerce-tabs{margin-top:56px}
  .related > h2, .upsells > h2{margin:52px 0 28px}
}

/* ── phone ──────────────────────────────────────────────── */
@media (max-width:600px){
  .shell{padding:0 18px}
  .sec, .sec-tight{padding:54px 0}
  .hero{padding:40px 0 52px}

  .hero h1{font-size:clamp(32px,9.5vw,46px)}
  .hero .lede{font-size:16px; margin:16px 0 24px}
  .hero-cta{gap:10px}
  .hero-cta .btn, .meet .cta .btn{flex:1 1 46%; justify-content:center; padding:14px 18px}
  .hero-stats{gap:20px; margin-top:32px; padding-top:20px}
  .hero-stats div b{font-size:21px}
  .hero-stats div span{font-size:10px}

  .head{margin-bottom:30px}
  .head h2{font-size:clamp(25px,7.6vw,34px)}
  .head p{font-size:15px}
  .head .label, .label{font-size:10px; letter-spacing:.24em}

  .grid.g4, .grid.g3{gap:12px}
  .card .body{padding:13px 13px 15px}
  .card .nm{font-size:15px}
  .card .price{font-size:14px}
  .card .go{width:28px; height:28px}

  .marquee{padding:15px 0}
  .marquee span{font-size:16px}
  .marquee div{gap:30px; padding-right:30px}

  .meet-in{gap:32px}
  .avatar{max-width:220px}
  .meet h2{font-size:clamp(26px,8vw,34px)}

  .reel{flex:0 0 66vw}
  .reel-head{gap:16px}
  .ig-ring{width:52px; height:52px}
  .handle .ht b{font-size:17px}

  .ctile{min-height:172px; padding:22px 18px}
  .ctile h3{font-size:19px}
  .tcard{padding:22px 16px}
  .tcard .ti{width:46px; height:46px; font-size:19px}

  .band{padding:42px 20px; border-radius:22px}
  .band h2{font-size:clamp(25px,7.6vw,34px)}
  .band p{font-size:15px; margin:16px auto 26px}

  .fgrid{grid-template-columns:1fr; gap:24px; padding:44px 0 26px}
  .fbot{flex-direction:column; gap:8px; text-align:center; padding-bottom:26px}

  .phead{padding:38px 0 6px}
  .phead h1{font-size:clamp(28px,8.6vw,42px)}
  .phead p{font-size:15px}
  .filters{gap:7px; margin:24px 0 14px}
  .chip{padding:9px 15px; font-size:10.5px}

  .pd{gap:26px; padding-top:20px}
  .pinfo h1{font-size:clamp(25px,7.8vw,36px)}
  .pprice,
  .woocommerce div.product p.price,
  .woocommerce div.product span.price{font-size:30px}
  .pd-thumbs{gap:9px}
  .spec dt, .spec dd{padding:11px 14px; font-size:13.5px}
  .pane{padding:22px 18px; border-radius:18px}
  .tabbtns{gap:7px}
  .tabbtns button, .woocommerce-tabs ul.tabs li a{padding:10px 15px; font-size:10.5px}

  .entry{padding:40px 0 70px}
  .entry-content h2{font-size:26px}
  .entry-content h3{font-size:21px}
}

/* ── very small phones ──────────────────────────────────── */
@media (max-width:380px){
  .grid.g4, .grid.g3{grid-template-columns:1fr}
  .card .nm{font-size:16px}
  .reel{flex:0 0 78vw}
}

/* ── touch targets: nothing tappable under 44px ─────────── */
@media (hover:none){
  .social-row a{width:44px; height:44px}
  nav.main a{padding:15px 16px}
  .pthumbs button, .pd-thumbs button{min-height:56px}
  .qty button, .woocommerce .quantity input{min-height:48px}
}

/* ── WooCommerce cart / checkout on small screens ───────────
   Woo's own smallscreen stylesheet stacks these tables; make sure
   our restyling cannot push them wider than the viewport.        */
@media (max-width:768px){
  .woocommerce table.shop_table{
    display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:14px;
  }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td{padding:12px 14px}
  .woocommerce table.shop_table img{width:52px}
  .woocommerce .cart-collaterals{max-width:none; margin-left:0}
  .woocommerce div.product form.cart{gap:10px}
  .woocommerce div.product form.cart .button{min-width:0; width:100%}
  .woocommerce-checkout .col2-set .col-1,
  .woocommerce-checkout .col2-set .col-2{width:100%; float:none}
}


/* ── reel thumbnails ────────────────────────────────────────
   .reel::before carries the gradient at z-index:-2. Inside the card's
   stacking context that paints ABOVE the element's own background, so a
   background-image on .reel is invisible. Put the photo on ::before
   instead, passed in as --thumb.                                       */
.reel.has-thumb::before{
  background-image:var(--thumb);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* a photo needs a stronger scrim than a flat gradient does */
.reel.has-thumb::after{
  background:linear-gradient(180deg,rgba(4,8,16,.10) 28%,rgba(4,8,16,.55) 62%,rgba(4,8,16,.92) 100%);
}

/* ════════════════════════════════════════════════════════════
   PRODUCT TABS — ADDITIONAL INFORMATION & REVIEWS
   These use their own WooCommerce markup, not .shop_table, so
   they were inheriting almost nothing.
   ════════════════════════════════════════════════════════════ */

/* ── Additional information ─────────────────────────────── */
.woocommerce table.woocommerce-product-attributes{
  width:100%; border-collapse:separate; border-spacing:0; margin:0;
  border:1px solid var(--edge); border-radius:16px; overflow:hidden; background:var(--panel);
}
.woocommerce table.woocommerce-product-attributes th{
  width:38%; text-align:left; padding:14px 20px; vertical-align:middle;
  font-family:"Cascadia Code",ui-monospace,Consolas,monospace;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--ink-soft); border-bottom:1px solid var(--edge); background:transparent;
}
.woocommerce table.woocommerce-product-attributes td{
  padding:14px 20px; font-size:14.5px; font-weight:600; color:var(--ink);
  border-bottom:1px solid var(--edge); background:transparent;
}
.woocommerce table.woocommerce-product-attributes tr:last-child th,
.woocommerce table.woocommerce-product-attributes tr:last-child td{border-bottom:none}
.woocommerce table.woocommerce-product-attributes td p{margin:0}

/* ── Reviews ────────────────────────────────────────────── */
.woocommerce #reviews h2,
.woocommerce #reviews .woocommerce-Reviews-title{
  font-family:"Hoefler Text",Georgia,serif; font-size:24px; font-weight:600;
  letter-spacing:-.015em; margin:0 0 18px; color:var(--ink);
}
.woocommerce #reviews .woocommerce-noreviews{
  margin:0 0 26px; padding:16px 20px; border-radius:14px;
  background:var(--panel); border:1px solid var(--edge); color:var(--ink-mid); font-size:14.5px;
}
.woocommerce #reviews #comments ol.commentlist{list-style:none; margin:0 0 30px; padding:0}
.woocommerce #reviews #comments ol.commentlist li{margin:0; list-style:none}
.woocommerce #reviews .comment_container{
  display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--edge); background:transparent;
}
.woocommerce #reviews img.avatar{
  width:46px; height:46px; border-radius:50%; margin:0; padding:0; border:1px solid var(--edge); float:none;
}
.woocommerce #reviews .comment-text{margin:0; padding:0; border:0; width:100%}
.woocommerce #reviews .comment-text p{margin:8px 0 0; color:var(--ink-mid); font-size:14.5px}
.woocommerce #reviews .comment-text .meta{
  font-size:13.5px; color:var(--ink-soft); margin:0;
}
.woocommerce #reviews .comment-text .meta strong{color:var(--ink); font-weight:600}

/* the review form */
.woocommerce #review_form_wrapper{margin-top:8px}
.woocommerce #respond{
  background:var(--panel); border:1px solid var(--edge); border-radius:18px; padding:26px 24px; margin:0;
}
.woocommerce #respond .comment-reply-title{
  display:block; font-family:"Hoefler Text",Georgia,serif; font-size:19px; font-weight:600;
  color:var(--ink); margin-bottom:16px;
}
.woocommerce #respond .comment-form{margin:0}
.woocommerce #respond p{margin:0 0 15px}
.woocommerce #respond label{
  display:block; margin-bottom:7px;
  font-family:"Cascadia Code",ui-monospace,Consolas,monospace;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.woocommerce #respond input[type=text],
.woocommerce #respond input[type=email],
.woocommerce #respond input[type=url],
.woocommerce #respond textarea{
  width:100%; background:var(--bg-2); border:1px solid var(--edge-2); border-radius:12px;
  color:var(--ink); padding:13px 16px; font:inherit;
}
.woocommerce #respond textarea{min-height:130px; resize:vertical}
.woocommerce #respond input:focus,
.woocommerce #respond textarea:focus{outline:none; border-color:var(--a1); box-shadow:var(--glow-1)}
.woocommerce #respond .required{color:var(--a1); border:0}

/* the interactive star picker */
.woocommerce #respond p.stars{margin-bottom:18px}
.woocommerce #respond p.stars a{color:var(--ink-soft); text-decoration:none; transition:color .2s}
.woocommerce #respond p.stars:hover a,
.woocommerce #respond p.stars.selected a.active,
.woocommerce #respond p.stars.selected a:not(.active){color:var(--a2)}
.woocommerce #respond p.stars a:hover ~ a{color:var(--ink-soft)}
.woocommerce .star-rating span{color:var(--a1)}
.woocommerce .star-rating::before{color:var(--ink-soft)}

/* checkboxes must not stretch to full width like text inputs do */
.woocommerce input[type=checkbox],
.woocommerce input[type=radio],
.woocommerce #respond input[type=checkbox],
.woocommerce #respond input[type=radio]{
  width:auto; min-width:0; margin:0 8px 0 0; accent-color:var(--a1);
}
.woocommerce .comment-form-cookies-consent,
.woocommerce form .form-row-checkbox,
.woocommerce p.woocommerce-form__label-for-checkbox{
  display:flex; flex-direction:row; align-items:flex-start; gap:2px;
}
.woocommerce .comment-form-cookies-consent label,
.woocommerce p.woocommerce-form__label-for-checkbox span{
  display:inline; margin:0; text-transform:none; letter-spacing:0;
  font-family:inherit; font-size:13.5px; color:var(--ink-soft);
}
.woocommerce #respond #submit{margin-top:4px}

/* logged-out notice / verification prompt */
.woocommerce .woocommerce-verification-required,
.woocommerce #reviews .must-log-in{
  padding:16px 20px; border-radius:14px; background:var(--panel);
  border:1px solid var(--edge); color:var(--ink-mid); font-size:14.5px;
}

/* ════════════════════════════════════════════════════════════
   UPLOADED LOGO
   The drawn avatar needs a decorative ring around it. A real logo
   usually brings its own, so the ring and inner disc step aside
   and the mark is given a little more room.
   ════════════════════════════════════════════════════════════ */
.brand-ring.has-logo{
  width:58px; height:58px; padding:0;
  background:transparent; box-shadow:none; border:0;
}
.brand-ring.has-logo::before{display:none}
.brand-ring img.brand-img{
  position:relative; z-index:2; display:block;
  width:100%; height:100%; border-radius:50%;
  object-fit:cover; background:transparent;
}

.avatar.has-logo{
  background:transparent; padding:0; border-radius:0;
  box-shadow:none; overflow:visible; max-width:340px;
}
.avatar.has-logo::before, .avatar.has-logo::after{display:none}
.avatar img.brand-img{
  position:relative; z-index:2; display:block; width:100%; height:auto;
  filter:drop-shadow(0 22px 46px rgba(240,117,166,.30)) drop-shadow(0 12px 28px rgba(0,0,0,.65));
}

.ig-ring.has-logo{background:transparent; padding:0; box-shadow:none}
.ig-ring.has-logo span{background:transparent}
.ig-ring img.brand-img{
  display:block; width:100%; height:100%; border-radius:50%; object-fit:cover;
}

/* ── hero image in the display case ─────────────────────────
   A photo needs more room than the generated pin, and its own
   shadow rather than the SVG's built-in one.                  */
.case .pin-float.is-photo{width:78%}
.case .pin-float img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.62)) drop-shadow(0 6px 14px rgba(0,0,0,.5));
}
@media (max-width:600px){ .case .pin-float.is-photo{width:86%} }