/* ==========================================================================
   MELIORA — Dream Projector product page

   Palette is taken from the product's own world: a lavender-white room
   by day, deep indigo when the lights go out, violet from the projection,
   gold for the stars. Dark "night" sections carry a faint starfield; that
   and the slide discs in the set picker are the only decoration.
   ========================================================================== */

:root{
  --sky:#F4F3FB;
  --card:#FFFFFF;
  --ink:#17153A;
  --ink-soft:#4A4870;
  --muted:#7D7BA0;
  --rule:rgba(23,21,58,.12);
  --rule-2:rgba(23,21,58,.22);

  --night:#0E0C2B;
  --night-2:#1A1745;
  --on-night:#EDEBFF;
  --on-night-soft:#A9A6D6;

  --violet:#6C5CE7;
  --violet-deep:#5646D4;
  --violet-tint:#ECE9FF;
  --save:#0E8F78;
  --star:#F5B83D;
  --low:#C2410C;
  --low-dot:#EA580C;

  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --sans:'Figtree','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'DM Mono',ui-monospace,Consolas,monospace;

  --max:1200px;
  --narrow:760px;
  --gutter:clamp(16px,4vw,40px);
  --section-y:clamp(56px,8vw,104px);
  --radius:16px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--sky);color:var(--ink);
  font:400 16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}
.section{padding:var(--section-y) 0}

.h2{
  font:800 clamp(28px,4.2vw,46px)/1.05 var(--display);
  letter-spacing:-.02em;margin:0 0 20px;
}
.label{
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin:0 0 16px;
}
.fine{font-size:13px;color:var(--muted);margin:8px 0 0}
.stars{color:var(--star);letter-spacing:2px}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font:700 17px/1 var(--sans);
  padding:20px 28px;
  transition:background .2s,transform .2s var(--ease),box-shadow .2s;
}
.btn--buy{
  width:100%;background:var(--violet);color:#fff;
  box-shadow:0 10px 28px -10px rgba(108,92,231,.7);
}
.btn--buy:hover{background:var(--violet-deep);transform:translateY(-1px)}
.btn--buy:active{transform:translateY(0)}
.btn--inline{width:auto;padding:18px 44px}
.btn--sm{width:auto;padding:14px 22px;font-size:15px}
.btn--ghost{background:transparent;border:1.5px solid var(--rule-2);padding:15px 28px;font-size:15px;margin-top:32px}
.btn--ghost:hover{border-color:var(--ink)}
.btn__sep{width:1px;height:18px;background:rgba(255,255,255,.4)}
.btn:disabled{background:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.btn--line{background:transparent;color:var(--on-night);border:1.5px solid rgba(237,235,255,.35);padding:18px 32px}
.btn--line:hover{border-color:var(--on-night)}

/* ------------------------------------------------------ announcement bar */
.announce{
  background:var(--night);color:var(--on-night);
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px 14px;
  font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:10px var(--gutter);text-align:center;
}
.announce__dot{width:4px;height:4px;border-radius:50%;background:var(--star)}

/* ---------------------------------------------------------------- header */
.head{background:var(--card);border-bottom:1px solid var(--rule);position:relative;z-index:20}
.head__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:68px}
.head__nav{grid-column:1;grid-row:1;display:flex;gap:26px;font-size:14px;font-weight:500}
.head__nav a{text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:1.5px solid transparent}
.head__nav a:hover{color:var(--ink)}
.head__nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--violet)}
.head__in > .logo{grid-column:2;grid-row:1;justify-self:center}
.head__in > .head__cart{grid-column:3;grid-row:1}
.burger{
  display:none;grid-column:1;grid-row:1;background:none;border:0;cursor:pointer;
  width:44px;height:44px;place-items:center;border-radius:50%;
}
.burger:hover{background:var(--sky)}
.logo{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font:800 26px/1 var(--display);letter-spacing:-.03em;color:var(--ink);
}
.logo__star{color:var(--violet)}
.logo--light{color:var(--on-night)}
.logo--light .logo__star{color:var(--star)}
.head__cart{
  justify-self:end;position:relative;background:none;border:0;cursor:pointer;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
}
.head__cart:hover{background:var(--sky)}
.head__count{
  position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--violet);color:#fff;
  font:700 11px/18px var(--sans);text-align:center;
}

/* ----------------------------------------------------------------- PDP */
.pdp{padding:clamp(20px,3vw,40px) 0 var(--section-y)}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}

.gallery{position:sticky;top:20px}
.gallery__main{border-radius:var(--radius);overflow:hidden;background:var(--card);aspect-ratio:1}
.gallery__main img{width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.gallery__thumbs button{
  padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;cursor:pointer;
  background:var(--card);aspect-ratio:1;opacity:.72;transition:opacity .2s,border-color .2s;
}
.gallery__thumbs button:hover{opacity:1}
.gallery__thumbs button[aria-current="true"]{border-color:var(--violet);opacity:1}
.gallery__thumbs img{width:100%;height:100%;object-fit:cover}

.buy{min-width:0}
.rating{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-soft);text-decoration:none}
.rating strong{color:var(--ink)}
.rating:hover{color:var(--ink)}
.buy__title{
  font:800 clamp(32px,4.4vw,50px)/1 var(--display);letter-spacing:-.03em;
  margin:12px 0 18px;
}
.perks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:8px}
.perks li{display:flex;gap:10px;align-items:baseline;color:var(--ink-soft)}
.perks li::before{
  content:"";flex:none;width:10px;height:10px;transform:translateY(1px);
  background:var(--violet);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
}

/* set picker — the discs show how many slides are in each set */
.sets{border:0;margin:0;padding:0;display:grid;gap:12px}
.sets__legend{
  width:100%;padding:0;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.sets__legend span{display:flex;align-items:center;gap:14px;width:100%}
.sets__legend span::before,.sets__legend span::after{content:"";flex:1;height:1px;background:var(--rule-2)}

.set{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  background:var(--card);border:1.5px solid var(--rule);border-radius:14px;
  padding:16px 18px;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s;
}
.set:hover{border-color:var(--rule-2)}
.set input{
  appearance:none;margin:0;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--rule-2);display:grid;place-items:center;cursor:pointer;
}
.set input::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--violet);transform:scale(0);transition:transform .2s var(--ease)}
.set input:checked{border-color:var(--violet)}
.set input:checked::after{transform:scale(1)}
.set:has(input:checked){border-color:var(--violet);background:linear-gradient(0deg,var(--violet-tint),var(--violet-tint)),var(--card);box-shadow:0 0 0 3px rgba(108,92,231,.14)}
.set.is-on{border-color:var(--violet);background:var(--violet-tint);box-shadow:0 0 0 3px rgba(108,92,231,.14)}

.set__body{display:grid;gap:6px;min-width:0}
.set__name{font-weight:700;font-size:16px}
.set__save{font-size:13px;color:var(--save);font-weight:600}
.set__save b{font-weight:700}
.set__price{display:grid;justify-items:end;gap:2px}
.set__now{font:800 19px/1 var(--display)}
.set__was{font-size:13px;color:var(--muted)}
.set__badge{
  position:absolute;top:-10px;right:14px;
  background:var(--ink);color:#fff;border-radius:999px;padding:4px 10px;
  font:500 10px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}

.set__discs{display:flex;flex-wrap:wrap;gap:3px;max-width:230px}
.disc{
  width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff 0 6%,transparent 7%),var(--g);
  box-shadow:inset 0 0 0 1px rgba(23,21,58,.12);
  transform:scale(.6);opacity:0;animation:disc-in .5s var(--ease) forwards;
}
.disc:nth-child(4n+1){--g:radial-gradient(circle at 60% 60%,#8E7BFF,#1C1650 70%)}
.disc:nth-child(4n+2){--g:radial-gradient(circle at 40% 70%,#43E0C4,#123B5A 70%)}
.disc:nth-child(4n+3){--g:radial-gradient(circle at 50% 40%,#FF8FC7,#3A1850 70%)}
.disc:nth-child(4n+4){--g:radial-gradient(circle at 50% 50%,#E8E3D2,#55536B 75%)}
@keyframes disc-in{to{transform:scale(1);opacity:1}}

/* free gifts */
.gifts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 20px}
.gift{
  display:grid;justify-items:center;text-align:center;gap:4px;
  background:var(--card);border:1.5px dashed var(--rule-2);border-radius:12px;
  padding:14px 8px 12px;transition:border-color .25s,background .25s,opacity .25s;
}
.gift__icon{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky);color:var(--muted);margin-bottom:2px;transition:background .25s,color .25s;
}
.gift__name{font-size:13px;font-weight:700;line-height:1.25}
.gift__state{font:500 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--muted)}
.gift.is-free{border-style:solid;border-color:rgba(14,143,120,.45)}
.gift.is-free .gift__icon{background:#DDF5EF;color:var(--save)}
.gift.is-free .gift__state{color:var(--save);font-weight:500}
.gift.is-locked{opacity:.62}
.gift.is-locked .gift__icon::after{content:""}

.assure{list-style:none;padding:0;margin:16px 0 12px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-weight:600;font-size:14px}
.assure li{display:flex;align-items:center;gap:8px}
.assure svg{color:var(--save);flex:none}

/* low stock badge — driven by `stock` and `lowStockAt` in catalog.js */
.stock{display:inline-flex;align-items:center;gap:9px;margin:0;font-size:14px;font-weight:700}
.stock--low{color:var(--low)}
.stock--out{color:var(--muted)}
.stock--sm{font-size:12px;gap:7px}
.stock__dot{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--low-dot)}
.stock__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{to{transform:scale(2.8);opacity:0}}
.buy__stock{display:flex;justify-content:center;min-height:0;margin:0 0 12px}
.buy__stock:empty{display:none}
.pay{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pay li{
  font:600 11px/1 var(--sans);color:var(--ink-soft);
  border:1px solid var(--rule);background:var(--card);border-radius:6px;padding:7px 9px;
}

/* short quotes in the buy box */
.quotes{
  display:grid;grid-auto-flow:column;grid-auto-columns:88%;gap:10px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-bottom:22px;
  scrollbar-width:thin;
}
.quote{
  scroll-snap-align:start;margin:0;display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:14px;
}
.quote img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none}
.quote blockquote{margin:0;font-size:14px;line-height:1.45}
.quote figcaption{margin-top:6px;font-size:13px;font-weight:700}

/* accordions */
.acc{border-top:1px solid var(--rule)}
.acc details{border-bottom:1px solid var(--rule)}
.acc summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 2px;font-weight:700;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"";flex:none;width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease);
}
.acc details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.acc details p{margin:0 2px 16px;color:var(--ink-soft)}
.acc details p.fine{margin-top:-8px;color:var(--muted)}
.acc--lg summary{font:600 clamp(17px,2vw,20px)/1.3 var(--display);padding:22px 2px}

/* ----------------------------------------------------------- night bands */
.night{
  position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(120% 90% at 80% 0%,var(--night-2),var(--night) 60%);
  color:var(--on-night);
}
.night::before,.night::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 38% 72%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 30%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 86% 64%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 24% 88%,#fff 50%,transparent 51%);
  background-size:260px 260px;
  opacity:.55;
}
.night::after{
  background-image:
    radial-gradient(1px 1px at 52% 12%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 54%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 72% 86%,#fff 50%,transparent 51%);
  background-size:190px 190px;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.15}to{opacity:.7}}
.night .label{color:var(--star)}

.how{padding:var(--section-y) 0}
.how__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.how__img{border-radius:var(--radius);width:100%;aspect-ratio:1;object-fit:cover}
.steps{list-style:none;margin:28px 0;padding:0;display:grid;gap:4px}
.steps li{display:flex;gap:18px;padding:16px 0;border-top:1px solid rgba(237,235,255,.14)}
.steps li:last-child{border-bottom:1px solid rgba(237,235,255,.14)}
.steps__n{
  flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(237,235,255,.3);font:500 14px/1 var(--mono);color:var(--star);
}
.steps strong{font:600 19px/1.3 var(--display)}
.steps p{margin:4px 0 0;color:var(--on-night-soft)}
.how__close{color:var(--on-night-soft);margin:0;max-width:44ch}

/* --------------------------------------------------------------- videos */
.videos__row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;
}
.videos__row video{width:100%;aspect-ratio:9/14;object-fit:cover;border-radius:var(--radius);background:var(--night)}

/* ------------------------------------------------------------------ FAQ */
.faq{background:var(--card)}
.faq .acc{margin-top:36px}

/* --------------------------------------------------------------- banner */
.banner__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.banner__grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius)}
.banner__grid p{max-width:44ch;margin:0 0 28px;font-size:17px;color:var(--ink-soft)}

/* ------------------------------------------------------------ guarantee */
.promise{padding:var(--section-y) 0}
.promise__seal{color:var(--star);margin:0 auto 18px}
.promise__text{color:var(--on-night-soft);max-width:52ch;margin:0 auto 32px;font-size:17px}

/* -------------------------------------------------------------- marquee */
.marquee{background:var(--violet);color:#fff;overflow:hidden;padding:13px 0}
.marquee__track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee__track span{
  display:inline-flex;align-items:center;gap:28px;padding-right:28px;white-space:nowrap;
  font:500 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
}
.marquee__track span::after{content:"✦";color:var(--star)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* -------------------------------------------------------------- reviews */
.reviews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.reviews__head .h2{margin-bottom:8px}
.reviews__note{margin:0;color:var(--muted);font-size:14px;max-width:52ch}
.score{display:flex;align-items:center;gap:14px}
.score__num{font:800 56px/1 var(--display);letter-spacing:-.03em}
.score .stars{display:block;font-size:18px}
.score__count{font-size:14px;color:var(--ink-soft)}

.wall{columns:4 250px;column-gap:16px}
.review{
  break-inside:avoid;margin:0 0 16px;background:var(--card);
  border:1px solid var(--rule);border-radius:14px;overflow:hidden;
}
.review img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--night)}
.review h3{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:16px 16px 6px;font:700 15px/1.2 var(--sans);
}
.review p{margin:0 16px 16px;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.verified{
  display:inline-flex;align-items:center;gap:4px;
  font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--save);
}
.verified::before{content:"✓";font-family:var(--sans);font-weight:700}
.wall.is-clipped .review:nth-child(n+13){display:none}

/* --------------------------------------------------------------- footer */
.foot{padding:64px 0 32px}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot__blurb{color:var(--on-night-soft);font-size:14px;max-width:34ch;margin:14px 0 0}
.foot__h{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--star);margin:6px 0 16px}
.foot__list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.foot__list a{color:var(--on-night-soft);text-decoration:none}
.foot__list a:hover{color:var(--on-night)}
.foot__list span{color:var(--on-night-soft)}
.foot__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(237,235,255,.14);
  font-size:13px;color:var(--on-night-soft);
}
.pay--dark{margin:0}
.pay--dark li{background:transparent;border-color:rgba(237,235,255,.2);color:var(--on-night-soft)}

/* ---------------------------------------------------------- sticky bar */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--rule);
  padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.sticky.is-on{transform:none}
.sticky__info{display:grid;min-width:0}
.sticky__info strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky__info span{font:800 17px/1.2 var(--display);color:var(--violet)}

/* ----------------------------------------------------------------- cart */
.overlay{position:fixed;inset:0;background:rgba(14,12,43,.5);z-index:40}
.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(420px,100%);
  background:var(--card);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .4s var(--ease);
}
.cart.is-open{transform:none}
.cart__head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--rule)}
.cart__title{font:800 22px/1 var(--display)}
.cart__close{background:none;border:0;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%}
.cart__close:hover{background:var(--sky)}
.cart__body{flex:1;overflow-y:auto;padding:20px 22px}
.cart__empty{display:grid;justify-items:start;gap:16px;color:var(--muted)}
.cart__empty p{margin:0}
.cart__ship{display:grid;gap:8px;padding:12px 22px;background:var(--violet-tint);font-size:14px}
.ship-bar{display:block;height:6px;border-radius:3px;background:rgba(108,92,231,.2);overflow:hidden}
.ship-bar span{display:block;height:100%;border-radius:inherit;background:var(--violet);transition:width .4s var(--ease)}
.line + .line{margin-top:18px}
.line__main{flex:1;min-width:0}
.line__variant{margin:0 0 4px;font-size:13px;color:var(--ink-soft)}
.line__ph{flex:none;width:76px;height:76px;border-radius:10px;background:var(--sky);display:grid;place-items:center;color:var(--violet)}
.cart__row--total{margin-top:10px;padding-top:12px;border-top:1px solid var(--rule)}
.no-scroll{overflow:hidden}
.line{display:flex;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--rule)}
.line img{width:76px;height:76px;border-radius:10px;object-fit:cover;background:var(--sky)}
.line__name{font-weight:700;margin:0 0 4px}
.line__gifts{margin:0 0 10px;font-size:13px;color:var(--save)}
.line__row{display:flex;justify-content:space-between;align-items:center}
.qty{display:inline-flex;align-items:center;border:1px solid var(--rule-2);border-radius:999px}
.qty button{background:none;border:0;cursor:pointer;width:32px;height:32px;font-size:18px}
.qty span{min-width:22px;text-align:center;font-weight:600}
.line__price{font:800 17px/1 var(--display)}
.cart__foot{padding:18px 22px 22px;border-top:1px solid var(--rule)}
.cart__row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.cart__row strong{font:800 24px/1 var(--display)}
.cart__save{margin:0 0 14px;font-size:14px;color:var(--save);font-weight:600;min-height:1.3em}

/* ---------------------------------------------------------- page heads */
.h1{font:800 clamp(38px,6vw,72px)/.98 var(--display);letter-spacing:-.035em;margin:0 0 20px}
.page-hero{padding:clamp(48px,7vw,88px) 0}
.page-hero .h1{margin-bottom:14px}
.page-hero__lede{margin:0;max-width:56ch;color:var(--on-night-soft);font-size:18px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px 24px;margin-bottom:32px}
.sec-head .h2{margin:0}
.sec-head__link{font-weight:700;color:var(--violet);text-decoration:none;white-space:nowrap}
.sec-head__link::after{content:" →"}
.sec-head__link:hover{text-decoration:underline}

/* --------------------------------------------------------------- home */
.hero{padding:clamp(48px,7vw,96px) 0}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.rating--light{color:var(--on-night-soft);margin-bottom:18px}
.rating--light strong{color:var(--on-night)}
.rating--light:hover{color:var(--on-night)}
.hero__lede{font-size:18px;color:var(--on-night-soft);max-width:46ch;margin:0 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__note{margin:22px 0 0;font:500 12px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-night-soft)}
.hero__img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:24px;box-shadow:0 40px 90px -30px rgba(108,92,231,.6)}

.trust{background:var(--card);border-bottom:1px solid var(--rule)}
.trust__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:22px;padding-bottom:22px}
.trust__item{display:flex;align-items:center;gap:14px}
.trust__icon{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--violet-tint);color:var(--violet)}
.trust__item strong{display:block;font-size:15px}
.trust__item span{font-size:13px;color:var(--muted)}

.spot{background:var(--card)}
.spot__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.spot__grid video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);background:var(--night)}
.spot__price{margin:0 0 10px;font-size:15px;color:var(--ink-soft)}
.spot__price strong{font:800 30px/1 var(--display);color:var(--ink)}
.spot__stock{margin-bottom:22px}
.spot__stock:empty{display:none}

.quotes-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start;margin-bottom:18px}
.quotes-grid .review{margin:0}

.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.cat{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius);overflow:hidden;background:var(--night);color:var(--on-night)}
.cat__media{display:block;aspect-ratio:4/3;overflow:hidden}
.cat__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.cat:hover .cat__media img{transform:scale(1.04)}
.cat .ph{background:radial-gradient(120% 90% at 70% 10%,var(--night-2),var(--night) 70%);color:var(--on-night-soft)}
.cat .ph svg{color:var(--star)}
.cat__body{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:16px 18px}
.cat__name{font:700 20px/1.1 var(--display)}
.cat__count{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--on-night-soft)}

/* ------------------------------------------------------- product cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(12px,2vw,24px)}
.card{
  display:flex;flex-direction:column;text-decoration:none;background:var(--card);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s;
}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 40px -24px rgba(23,21,58,.35)}
.card__media{position:relative;display:block;aspect-ratio:1;background:var(--sky)}
.card__media img{width:100%;height:100%;object-fit:cover}
.card.is-out .card__media img,.card.is-out .ph{opacity:.55}
.card__tags{position:absolute;top:10px;left:10px;right:10px;display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:999px}
.tag--sale{background:var(--violet);color:#fff}
.tag--out{background:var(--ink);color:#fff}
.tag--example{background:var(--card);color:var(--ink-soft);border:1px dashed var(--rule-2)}
.card__body{display:grid;gap:6px;padding:14px 16px 18px}
.card__name{font:600 17px/1.25 var(--display);color:var(--ink)}
.card__rating{font-size:13px;color:var(--ink-soft)}
.card__rating .stars{letter-spacing:1px}
.card__price{font-size:14px;color:var(--ink-soft)}
.card__price strong{font:800 18px/1 var(--display);color:var(--ink)}
.card__price s{margin-left:8px;color:var(--muted)}
.ph{
  width:100%;height:100%;display:grid;place-content:center;justify-items:center;gap:10px;
  color:var(--muted);font-size:13px;text-align:center;
  background:repeating-linear-gradient(135deg,var(--sky) 0 12px,#EEECF8 12px 24px);
}
.ph svg{width:28px;height:28px;color:var(--violet)}

/* ---------------------------------------------------------- collection */
.coll{padding-top:clamp(28px,4vw,48px)}
.coll__bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--card);border:1.5px solid var(--rule-2);border-radius:999px;
  padding:9px 14px;font-weight:600;font-size:14px;
}
.chip span{font:500 11px/1 var(--mono);color:var(--muted)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chip[aria-pressed="true"] span{color:rgba(255,255,255,.65)}
.sort{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:14px;color:var(--ink-soft)}
.sort select{
  appearance:none;cursor:pointer;font:600 14px/1.2 var(--sans);color:var(--ink);
  background:var(--card) 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='%2317153A' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1.5px solid var(--rule-2);border-radius:999px;padding:9px 34px 9px 14px;
}
.coll__count{margin:0 0 20px;font-size:14px;color:var(--muted)}
.coll__empty{padding:48px 0;text-align:center;color:var(--ink-soft)}
.coll__empty .btn--ghost{margin-top:8px}

/* ------------------------------------------------------ catalog product */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.pdp-price{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 16px}
.pdp-price__now{font:800 32px/1 var(--display)}
.pdp-price s{color:var(--muted);font-size:17px}
.item-desc{color:var(--ink-soft);margin:0 0 18px}
.example-note{margin:0 0 16px;padding:10px 12px;border-radius:8px;background:#FFF1C2;color:#6B4A00;font-size:13px}
.example-note code{font-family:var(--mono)}
.opts{border:0;margin:0 0 20px;padding:0}
.opts legend{padding:0;margin-bottom:12px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.opts__row{display:flex;flex-wrap:wrap;gap:8px}
.optchip{position:relative}
.optchip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.optchip span{display:block;background:var(--card);border:1.5px solid var(--rule-2);border-radius:10px;padding:11px 18px;font-weight:600;font-size:14px}
.optchip input:checked + span{border-color:var(--violet);background:var(--violet-tint);box-shadow:0 0 0 3px rgba(108,92,231,.14)}
.optchip input:focus-visible + span{outline:2px solid var(--violet);outline-offset:2px}
.item-stock{margin:0 0 14px}
.item-stock:empty{display:none}
.buyrow{display:flex;gap:10px;align-items:stretch}
.buyrow .btn--buy{flex:1;width:auto}
.qty--lg{background:var(--card)}
.qty--lg button{width:44px;height:100%;min-height:56px}
.acc a{color:var(--violet);font-weight:600}
.related{background:var(--card)}
.notfound{padding:var(--section-y) 0;text-align:center}
.notfound p{color:var(--ink-soft);margin:0 0 24px}

/* --------------------------------------------------------------- forms */
.contact__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.form{display:grid;gap:18px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(20px,3vw,36px)}
.field{display:grid;gap:8px}
.field label{font-weight:700;font-size:14px}
.field label span{font-weight:400;color:var(--muted)}
.field input,.field textarea{
  width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);
  background:var(--sky);border:1.5px solid var(--rule);border-radius:10px;padding:13px 14px;
}
.field textarea{resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(108,92,231,.18)}
.field [aria-invalid="true"]{border-color:var(--low)}
.field__hint{font-size:13px;color:var(--muted)}
.form__error{margin:0;color:var(--low);font-weight:600;font-size:14px}
.form__done{margin:0;padding:14px 16px;border-radius:10px;background:#DDF5EF;color:#0B6B5A;font-size:14px}
.form__done a{color:inherit;font-weight:700}
.info-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.info-card h2{font:700 22px/1.2 var(--display);margin:0 0 18px}
.info-card p{margin:0 0 16px;color:var(--ink-soft);font-size:15px}
.info-card p:last-child{margin:0}
.info-card strong{color:var(--ink)}
.info-card a{color:var(--violet);font-weight:600}

/* --------------------------------------------------------------- legal */
.prose{max-width:760px;margin:0 auto;padding:var(--section-y) var(--gutter)}
.prose h2{font:700 24px/1.2 var(--display);margin:40px 0 12px}
.prose p,.prose li{color:var(--ink-soft)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose a{color:var(--violet);font-weight:600}
.prose .updated{margin:0;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.todo{background:#FFF1C2;color:#6B4A00;padding:0 4px;border-radius:4px;font-weight:600}

/* --------------------------------------------------------------- motion
   Load entrances run in CSS so they start with the first paint. Scroll
   reveals (.rv), shooting stars and change feedback are added by motion.js.
   Only transform and opacity are animated. */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes zoom-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* page-load entrances */
.hero__grid > div > *,
.page-hero .wrap > *,
.buy > .rating,.buy > .buy__title,.buy > .perks,.buy > .pdp-price,.buy > .item-desc{animation:rise .9s var(--ease) both}
.hero__grid > div > :nth-child(2),.page-hero .wrap > :nth-child(2),.buy > .buy__title{animation-delay:.07s}
.hero__grid > div > :nth-child(3),.page-hero .wrap > :nth-child(3),.buy > .perks,.buy > .pdp-price{animation-delay:.14s}
.hero__grid > div > :nth-child(4),.buy > .item-desc{animation-delay:.21s}
.hero__grid > div > :nth-child(5){animation-delay:.28s}
.hero__img{animation:zoom-in 1.1s var(--ease) .15s both,float 6s ease-in-out 1.3s infinite alternate}
.gallery__main{animation:zoom-in .9s var(--ease) both}
.overlay{animation:fade .3s ease}

/* scroll reveals */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.rv--media{transform:scale(.94)}
.rv.is-in{opacity:1;transform:none}

/* shooting stars — the signature moment of the night sections */
.meteor{
  position:absolute;z-index:-1;top:var(--y);left:var(--x);pointer-events:none;
  width:130px;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,#fff,rgba(255,255,255,0));
  box-shadow:0 0 6px rgba(255,255,255,.55);
  opacity:0;transform:rotate(-28deg);
  animation:meteor 11s linear var(--delay,0s) infinite;
}
@keyframes meteor{
  0%{opacity:0;transform:rotate(-28deg) translateX(0)}
  1.5%{opacity:1}
  8%,100%{opacity:0;transform:rotate(-28deg) translateX(-380px)}
}

/* buttons: press, and a soft shine across the add-to-cart buttons */
.btn:active,.btn--buy:active{transform:scale(.97)}
.buy [data-add],.sticky [data-add],[data-item-add]{position:relative;overflow:hidden;isolation:isolate}
.buy [data-add]::after,.sticky [data-add]::after,[data-item-add]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);animation:shine 5s ease-in-out 2s infinite;
}
[data-add]:disabled::after,[data-item-add]:disabled::after{display:none}
@keyframes shine{0%{transform:translateX(-120%)}25%,100%{transform:translateX(120%)}}

/* product photos zoom on hover */
.card__media{overflow:hidden}
.card__media img{transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}

/* change feedback */
@keyframes tick{from{opacity:0;transform:translateY(-40%)}to{opacity:1;transform:none}}
.tick{display:inline-block;animation:tick .45s var(--ease)}
@keyframes bump{0%,100%{transform:none}35%{transform:scale(1.18) rotate(-8deg)}70%{transform:scale(.95)}}
.head__cart.bump{animation:bump .6s var(--ease)}
@keyframes line-new{
  from{opacity:0;transform:translateX(18px);background:var(--violet-tint);box-shadow:0 0 0 8px var(--violet-tint)}
  30%{opacity:1;transform:none;background:var(--violet-tint);box-shadow:0 0 0 8px var(--violet-tint)}
  to{background:transparent;box-shadow:0 0 0 8px transparent}
}
.line.is-new{border-radius:4px;animation:line-new 1.4s var(--ease)}
@keyframes pop{0%{transform:scale(.5)}55%{transform:scale(1.18)}100%{transform:none}}
.gift.is-free .gift__icon{animation:pop .55s var(--ease)}
@keyframes disc-wave{0%{transform:scale(1);opacity:1}40%{transform:scale(1.45);opacity:1}100%{transform:scale(1);opacity:1}}
.set.is-on .disc{animation-name:disc-wave;animation-duration:.6s}
details[open] > :not(summary){animation:drop .35s var(--ease)}
.chip{transition:background .2s,border-color .2s,color .2s}
[data-countup]{font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .head__nav.is-open{animation:drop .3s var(--ease)}
}

/* quick cross-fade between pages, in browsers that support it */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* ---------------------------------------------------------- responsive */
@media (max-width:900px){
  .pdp__grid,.how__grid,.banner__grid,.hero__grid,.spot__grid,.contact__grid{grid-template-columns:minmax(0,1fr)}
  .trust__row{grid-template-columns:minmax(0,1fr);gap:14px}
  .quotes-grid{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__grid > :first-child{grid-column:1/-1}
  .gallery{position:static}
  .gallery__thumbs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:64px;overflow-x:auto}
  .how__img{order:-1}
  .head__in{grid-template-columns:44px 1fr 44px}
  .burger{display:grid}
  .head__nav{
    display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--card);border-bottom:1px solid var(--rule);
    padding:4px var(--gutter) 12px;box-shadow:0 18px 30px -20px rgba(23,21,58,.3);
  }
  .head__nav.is-open{display:flex}
  .head__nav a{padding:14px 0;border-bottom:1px solid var(--rule);font-size:16px}
  .head__nav a:last-child{border-bottom:0}
  .head__nav a[aria-current="page"]{border-bottom-color:var(--rule);color:var(--violet)}
  .videos__row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory}
  .videos__row video{scroll-snap-align:center}
}
@media (max-width:520px){
  .set{padding:16px 14px;gap:10px}
  .set__name{font-size:15px}
  .set__discs{max-width:150px}
  .disc{width:9px;height:9px}
  .gifts{gap:6px}
  .gift__name{font-size:12px}
  .wall.is-clipped .review:nth-child(n+7){display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card__body{padding:12px}
  .card__name{font-size:15px}
  .card__price strong{font-size:16px}
  .cats{grid-template-columns:minmax(0,1fr)}
  .sort{width:100%;justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .disc{opacity:1;transform:none}
}