/* ==========================================================================
   VOLTECHARGED — shared stylesheet for the product pages
   (blender.html, soft-serve.html)

   GENERATED FILE — the block below is copied verbatim from index.html's
   inline <style>, so the product pages render in exactly the same visual
   language as the landing page. Regenerate: python3 tools/sync-vc-css.py
   ========================================================================== */
/* ============ RESET / TOKENS ============ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#fdf6f8;
  --blush:#f0b3c1;
  --blush-soft:#fce4e9;
  --rose:#d47287;
  --rose-deep:#b85a6f;
  --ink:#3d2c32;
  --muted:#8a7a80;
  --line:rgba(232,203,210,.35);
  --hero-bg:#eba8b7;
  --hero-ink:#3d2c32;
  --hero-sub:rgba(61,44,50,.72);
  /* tri-tone palette pulled straight from the hero's panning backgrounds */
  --forest:#2e4a3a;
  --forest-mid:#3f6b52;
  --forest-soft:#e3ece5;
  --forest-ink:#f6f0e6;
  --sand:#e8e1d6;
  --sand-soft:#f2ede4;
  --sand-deep:#a98a63;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth}
html.lenis{height:auto;scroll-behavior:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--rose);color:#fff}
section{scroll-margin-top:70px}

/* ============ GRAIN ============ */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ============ NAV ============ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);
  color:var(--hero-ink);
  transition:background .45s var(--ease),color .65s var(--ease),box-shadow .45s var(--ease),padding .45s var(--ease);
}
nav.solid{
  background:rgba(253,246,248,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
  padding-top:12px;padding-bottom:12px;
}
nav .logo{font-family:'Playfair Display',serif;font-size:23px;font-weight:600;letter-spacing:-.01em}
nav .logo em{font-style:italic;opacity:.65}
nav .links{display:flex;gap:30px;align-items:center}
nav .links a{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  opacity:.72;transition:opacity .2s;position:relative;
}
nav .links a:hover{opacity:1}
nav .links a::after{
  content:'';position:absolute;left:0;bottom:-5px;height:1.5px;width:0;
  background:currentColor;transition:width .3s var(--ease-out);
}
nav .links a:hover::after{width:100%}
nav .cart-btn{
  padding:10px 22px;border-radius:24px;
  background:linear-gradient(135deg,var(--blush),var(--rose));
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .2s,box-shadow .2s;box-shadow:0 4px 18px rgba(212,114,135,.3);
}
nav .cart-btn:hover{transform:scale(1.05);box-shadow:0 8px 26px rgba(212,114,135,.45)}
@media(max-width:820px){nav .links a{display:none}}

/* ============ HERO ============ */
.hero{
  position:relative;width:100%;height:100vh;min-height:620px;overflow:hidden;
  background:var(--hero-bg);
  transition:background-color .65s var(--ease);
}
.hero .ghost{
  position:absolute;inset-inline:0;top:13%;
  display:flex;justify-content:center;pointer-events:none;user-select:none;z-index:2;
  font-family:'Anton',sans-serif;
  font-size:clamp(90px,23vw,330px);
  line-height:1;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;
  color:#fff;
  transition:opacity .3s var(--ease);
}
.hero .ghost.swap{opacity:0}
.hero .carousel{position:absolute;inset:0;z-index:3}
.hero .item{
  position:absolute;
  transform-origin:50% 100%;
  transition:left .65s var(--ease),bottom .65s var(--ease),height .65s var(--ease),
             transform .65s var(--ease),filter .65s var(--ease),opacity .65s var(--ease);
  will-change:transform,filter,opacity,left;
}
.hero .item img{
  height:100%;width:auto;max-width:none;object-fit:contain;object-position:bottom center;
  -webkit-user-drag:none;user-select:none;
  filter:drop-shadow(0 34px 44px rgba(61,30,38,.28));
}
.hero .item[data-role="center"]{left:50%;bottom:0;height:72%;transform:translateX(-50%) scale(1.28);filter:blur(0);opacity:1;z-index:20}
.hero .item[data-role="left"]{left:29%;bottom:11%;height:25%;transform:translateX(-50%) scale(1);filter:blur(2px);opacity:.9;z-index:10}
.hero .item[data-role="right"]{left:71%;bottom:11%;height:25%;transform:translateX(-50%) scale(1);filter:blur(2px);opacity:.9;z-index:10}
.hero .hud{
  position:absolute;z-index:60;color:var(--hero-ink);
  transition:color .65s var(--ease);
}
.hero .hud-tl{top:96px;left:clamp(18px,4vw,44px);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
.hero .hud-bl{bottom:clamp(22px,7vh,72px);left:clamp(18px,4vw,64px);max-width:340px}
.hero .hud-bl .kick{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.hero .hud-bl h2{
  font-family:'Anton',sans-serif;font-weight:400;
  font-size:clamp(26px,3.4vw,44px);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;
  margin-bottom:10px;
}
.hero .hud-bl p{font-size:13.5px;line-height:1.65;color:var(--hero-sub);margin-bottom:20px;transition:color .65s var(--ease)}
.hero .controls{display:flex;align-items:center;gap:14px}
.hero .arrow{
  width:52px;height:52px;border-radius:50%;
  border:2px solid currentColor;display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background-color .15s,color .65s var(--ease);
}
.hero .arrow:hover{transform:scale(1.1);background:rgba(255,255,255,.16)}
.hero .arrow:active{transform:scale(.96)}
.hero .swatches{display:flex;gap:10px;margin-top:18px}
.hero .swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  box-shadow:0 2px 8px rgba(0,0,0,.18);position:relative;
  transition:transform .2s;
}
.hero .swatch:hover{transform:scale(1.15)}
.hero .swatch.on::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid currentColor;
}
.hero .hud-br{
  bottom:clamp(22px,7vh,72px);right:clamp(18px,4vw,64px);
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;
}
.hero .shop-link{
  display:inline-flex;align-items:center;gap:12px;
  font-family:'Anton',sans-serif;font-size:clamp(24px,3.6vw,52px);
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  opacity:.95;transition:opacity .2s,transform .2s;
}
.hero .shop-link:hover{opacity:1;transform:translateX(6px)}
.hero .shop-link svg{transition:transform .2s}
.hero .shop-link:hover svg{transform:translateX(5px)}
.hero .price-note{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-sub);transition:color .65s var(--ease)}
.hero .scroll-cue{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:var(--hero-ink);opacity:.65;transition:color .65s var(--ease);
  font-size:9px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
}
.hero .scroll-cue .line{width:1.5px;height:34px;background:currentColor;overflow:hidden;position:relative}
.hero .scroll-cue .line::after{
  content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--rose);animation:cue 1.8s var(--ease) infinite;
}
@keyframes cue{0%{top:-100%}55%{top:0}100%{top:100%}}
@media(max-width:640px){
  nav .cart-btn{display:none}
  .hero .hud-tl{display:none}
  .hero .ghost{top:15%}
  .hero .item[data-role="center"]{height:68%;bottom:18%;transform:translateX(-50%) scale(1.12)}
  .hero .item[data-role="left"]{left:14%;bottom:34%;height:24%}
  .hero .item[data-role="right"]{left:86%;bottom:34%;height:24%}
  .hero .hud-bl{max-width:250px;bottom:20px}
  .hero .hud-bl p{display:none}
  .hero .hud-br{bottom:20px}
  .hero .scroll-cue{display:none}
  .hero .arrow{width:46px;height:46px}
}

/* ============ MARQUEE ============ */
.marquee{
  background:var(--forest);color:var(--forest-ink);overflow:hidden;
  padding:16px 0;position:relative;z-index:5;
}
.marquee .track{
  display:flex;width:max-content;gap:0;
  animation:mq 26s linear infinite;
}
.marquee span{
  font-family:'Anton',sans-serif;font-size:clamp(15px,1.6vw,20px);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;padding:0 26px;
  display:flex;align-items:center;gap:26px;
}
.marquee span i{font-style:normal;color:var(--blush)}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SECTIONS SHARED ============ */
.section{padding:clamp(70px,10vh,120px) 0}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.label{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose);margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.label::before{content:'';width:26px;height:1.5px;background:var(--rose)}
.section-title{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(30px,4vw,46px);line-height:1.12;color:var(--ink);
}
.section-title em{font-style:italic;color:var(--rose)}
[data-reveal]{opacity:0;transform:translateY(36px);transition:opacity .9s ease var(--d,0s),transform .9s var(--ease-out) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}

/* ============ PRODUCT SHOWROOM (carousel + details) ============ */
.showroom{
  position:relative;overflow:hidden;
  padding:clamp(64px,9vh,110px) 0;
  background:linear-gradient(180deg,#fff 0%,var(--pr-wash,var(--cream)) 100%);
  transition:background .8s var(--ease);
}
.showroom .container{position:relative;z-index:2}
.showroom .word{
  position:absolute;left:50%;top:clamp(8px,3vh,34px);transform:translateX(-50%);
  font-family:'Anton',sans-serif;font-size:clamp(74px,17vw,250px);line-height:1;
  text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap;
  pointer-events:none;user-select:none;z-index:1;
  color:var(--pr-ghost,rgba(212,114,135,.07));transition:color .8s var(--ease);
}
.shop-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,66px);align-items:center}

/* ---- gallery side ---- */
.pr-gallery{display:flex;flex-direction:column;gap:16px}
.pr-stage{
  position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:var(--pr-panel,#fbe6ec);
  box-shadow:0 34px 90px rgba(61,30,38,.16);
  transition:background-color .8s var(--ease);
}
.pr-stage::before{
  content:'';position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.65),transparent 70%);
  filter:blur(6px);
}
.pr-stage .badge{
  position:absolute;top:18px;left:18px;z-index:5;
  padding:8px 15px;border-radius:22px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pr-accent,#d47287);transition:color .5s var(--ease);
}
.pr-stage .stock{
  position:absolute;top:18px;right:18px;z-index:5;
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:22px;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#5a4a50;
}
.pr-stage .stock i{width:8px;height:8px;border-radius:50%;background:#4caf7d;box-shadow:0 0 0 0 rgba(76,175,125,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(76,175,125,.5)}70%{box-shadow:0 0 0 8px rgba(76,175,125,0)}100%{box-shadow:0 0 0 0 rgba(76,175,125,0)}}
.pr-main{position:relative;width:80%;height:80%;z-index:3}
.pr-main img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  filter:drop-shadow(0 30px 42px rgba(61,30,38,.3));
  opacity:0;transform:scale(.92) translateY(8px);
  transition:opacity .5s var(--ease-out),transform .65s var(--ease-out);
}
.pr-main img.show{opacity:1;transform:scale(1) translateY(0)}
.pr-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pr-thumb{
  position:relative;aspect-ratio:1;border-radius:16px;overflow:hidden;cursor:pointer;
  background:#fff;border:2px solid var(--line);
  transition:border-color .3s,transform .3s var(--ease-out),box-shadow .3s;
}
.pr-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-out)}
.pr-thumb.prod{background:var(--pr-panel,#fbe6ec);transition:background-color .6s var(--ease),border-color .3s,transform .3s,box-shadow .3s}
.pr-thumb.prod img{object-fit:contain;padding:14%}
.pr-thumb:hover{transform:translateY(-4px)}
.pr-thumb:hover img{transform:scale(1.07)}
.pr-thumb.on{border-color:var(--pr-accent,#d47287);box-shadow:0 12px 26px rgba(61,30,38,.14)}
.pr-thumb .lens{position:absolute;inset:0;background:rgba(0,0,0,.28);opacity:0;display:flex;align-items:center;justify-content:center;color:#fff;transition:opacity .25s}
.pr-thumb:hover .lens{opacity:1}

/* ---- info side ---- */
.pr-info{max-width:470px}
.pr-info .eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--pr-accent,var(--rose));margin-bottom:12px;display:flex;align-items:center;gap:10px;
  transition:color .5s var(--ease);
}
.pr-info .eyebrow::before{content:'';width:26px;height:1.5px;background:currentColor}
.pr-info h2{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(30px,4vw,46px);line-height:1.06;color:var(--ink);margin-bottom:6px;
}
.pr-info h2 em{font-style:italic;color:var(--pr-accent,var(--rose));transition:color .5s var(--ease)}
.pr-rating{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.pr-rating .stars{color:var(--pr-accent,var(--rose));font-size:14px;letter-spacing:2px;transition:color .5s var(--ease)}
.pr-rating span{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.03em}
.pr-price{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.pr-price b{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(26px,3vw,34px);color:var(--pr-accent,var(--rose));transition:color .5s var(--ease)}
.pr-price s{font-size:16px;color:var(--muted)}
.pr-price .save{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--forest-mid);background:var(--forest-soft);padding:5px 10px;border-radius:14px}
.pr-desc{font-size:14.5px;color:#5a4a50;line-height:1.72;margin-bottom:22px}
.pr-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.pr-chip{
  padding:7px 14px;border-radius:20px;border:1px solid var(--line);background:#fff;
  font-size:11.5px;font-weight:600;letter-spacing:.03em;color:#5a4a50;
  display:flex;align-items:center;gap:7px;
}
.pr-chip svg{color:var(--pr-accent,var(--rose));transition:color .5s var(--ease)}
.pr-color-row{margin-bottom:24px}
.pr-color-row .lab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pr-color-row .lab b{color:var(--ink);font-weight:700}
.pr-swatches{display:flex;gap:14px}
.pr-swatch{
  position:relative;width:40px;height:40px;border-radius:50%;cursor:pointer;
  border:2px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.18);
  transition:transform .2s var(--ease-out);
}
.pr-swatch:hover{transform:scale(1.12)}
.pr-swatch.on{transform:scale(1.06)}
.pr-swatch.on::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--pr-accent,var(--rose));transition:border-color .4s var(--ease)}
.pr-size-row{margin-bottom:24px}
.pr-size-row .lab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pr-size-row .lab b{color:var(--ink);font-weight:700}
.pr-sizes{display:flex;gap:10px}
.pr-size{
  padding:10px 22px;border-radius:24px;border:1.5px solid var(--line);background:#fff;
  font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  transition:transform .2s var(--ease-out),border-color .3s,color .3s,box-shadow .3s;
}
.pr-size:hover{transform:scale(1.05)}
.pr-size.on{
  border-color:var(--pr-accent,var(--rose));color:var(--pr-accent,var(--rose));
  box-shadow:0 4px 14px var(--pr-shadow,rgba(212,114,135,.25));
}
.pr-actions{display:flex;align-items:stretch;gap:14px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:30px;overflow:hidden;background:#fff}
.qty button{width:44px;height:100%;font-size:18px;color:var(--ink);transition:background .2s}
.qty button:hover{background:var(--cream)}
.qty span{min-width:34px;text-align:center;font-size:15px;font-weight:700}
.pr-buy{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;border-radius:30px;
  background:var(--pr-accent,var(--rose));color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 12px 30px var(--pr-shadow,rgba(212,114,135,.4));
  transition:transform .22s var(--ease-out),box-shadow .22s,background-color .5s var(--ease);
}
.pr-buy:hover{transform:translateY(-3px)}
.pr-buy svg{transition:transform .2s}
.pr-buy:hover svg{transform:translateX(4px)}
.pr-note{margin-top:16px;font-size:12px;color:var(--muted);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.pr-note svg{color:var(--forest-mid)}
@media(max-width:900px){
  .shop-grid{grid-template-columns:1fr;gap:36px}
  .showroom .word{font-size:clamp(70px,26vw,140px)}
  .pr-info{max-width:none}
}
@media(max-width:480px){
  .pr-actions{flex-wrap:wrap}
  .qty{width:100%;justify-content:space-between}
  .pr-buy{width:100%}
}

/* ============ FEATURES ============ */
.features{background:#fff}
.features .head{max-width:560px;margin-bottom:56px}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.f-card{
  background:#fff;padding:46px 34px;position:relative;overflow:hidden;
  transition:background .3s;
}
.f-card::after{
  content:'';position:absolute;left:0;bottom:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--blush),var(--rose));
  transition:width .45s var(--ease-out);
}
.f-card:hover{background:var(--cream)}
.f-card:hover::after{width:100%}
.f-card .icon{
  width:52px;height:52px;border-radius:16px;margin-bottom:20px;
  background:linear-gradient(135deg,var(--blush-soft),#fff);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--rose);
  transition:transform .3s var(--ease-out);
}
.f-card:hover .icon{transform:translateY(-4px) rotate(-6deg)}
/* tri-tone accents rotate through the grid — blush · forest · sand */
.features-grid .f-card:nth-child(3n+2)::after{background:linear-gradient(90deg,var(--forest-mid),var(--forest))}
.features-grid .f-card:nth-child(3n+2) .icon{color:var(--forest-mid);background:linear-gradient(135deg,var(--forest-soft),#fff)}
.features-grid .f-card:nth-child(3n+3)::after{background:linear-gradient(90deg,var(--sand-deep),#8a6f45)}
.features-grid .f-card:nth-child(3n+3) .icon{color:var(--sand-deep);background:linear-gradient(135deg,var(--sand-soft),#fff)}
.f-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.f-card p{font-size:14px;color:var(--muted);line-height:1.65}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr}}

/* ============ GALLERY ============ */
.gallery{background:linear-gradient(180deg,#fff 0%,var(--cream) 100%);overflow:hidden}
.gallery .head{text-align:center;margin-bottom:54px}
.gallery .head .label{justify-content:center}
.gallery .head .label::before{display:none}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.mosaic .col{display:flex;flex-direction:column;gap:18px;will-change:transform}
.mosaic .ph{
  border-radius:18px;overflow:hidden;position:relative;
  box-shadow:0 14px 40px rgba(212,114,135,.12);
}
.mosaic .ph img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s var(--ease-out)}
.mosaic .ph:hover img{transform:scale(1.06)}
.mosaic .ph.tall img{aspect-ratio:.78}
.mosaic .ph .tag{
  position:absolute;left:12px;bottom:12px;padding:6px 12px;border-radius:14px;
  background:rgba(253,246,248,.85);backdrop-filter:blur(6px);
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);
}
.mosaic .col:nth-child(2) .ph .tag{color:var(--forest)}
.mosaic .col:nth-child(3) .ph .tag{color:var(--sand-deep)}
@media(max-width:700px){.mosaic{grid-template-columns:repeat(2,1fr)}.mosaic .col:nth-child(3){display:none}}

/* ============ UGC VIDEO CAROUSEL ============ */
#ugc{padding:72px 0 96px;overflow:hidden;text-align:center;background:var(--cream)}
#ugc .eyebrow{margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);display:inline-flex;align-items:center;gap:10px}
#ugc .eyebrow::before{content:'';width:26px;height:1.5px;background:var(--rose)}
#ugc h2{font-size:clamp(26px,3.4vw,40px);margin:0 0 8px;font-family:'Playfair Display',serif;font-weight:400}
#ugc h2 em{font-style:italic;color:var(--rose)}
#ugc .ugc-sub{color:var(--muted);max-width:460px;margin:0 auto 40px;line-height:1.6}
.ugc-stage{position:relative;height:540px;max-width:1200px;margin:0 auto}
.ugc-card{position:absolute;top:50%;left:50%;width:300px;height:500px;border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:0 24px 55px rgba(212,114,135,.28);transform:translate(-50%,-50%);transform-origin:center;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .5s ease,box-shadow .6s;cursor:pointer;will-change:transform}
.ugc-card video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}
.ugc-card .ugc-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(61,44,50,.55),rgba(61,44,50,0) 42%);pointer-events:none}
.ugc-controls{position:absolute;top:14px;right:14px;display:flex;flex-direction:column;gap:10px;opacity:0;transition:opacity .4s ease;pointer-events:none}
.ugc-card.active .ugc-controls{opacity:1;pointer-events:auto}
.ugc-btn{width:40px;height:40px;border-radius:999px;border:none;background:rgba(61,44,50,.5);backdrop-filter:blur(6px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;padding:0}
.ugc-btn:hover{background:rgba(212,114,135,.82)}
.ugc-btn svg{width:17px;height:17px;display:block;fill:#fff}
.ugc-product{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-radius:14px;padding:8px;box-shadow:0 6px 16px rgba(212,114,135,.18);text-align:left;cursor:pointer}
.ugc-product img{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:0 0 auto;background:var(--cream);border:1px solid var(--line)}
.ugc-product .info{flex:1;min-width:0}
.ugc-product .pname{display:block;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.ugc-product .pprice{display:block;font-size:13px;color:var(--rose);margin-top:2px}
.ugc-product .padd{width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,var(--blush),var(--rose));color:#fff;border:none;font-size:18px;line-height:1;flex:0 0 auto;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center}
.ugc-product .padd:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(212,114,135,.4)}
@media(max-width:640px){.ugc-stage{height:470px}.ugc-card{width:230px;height:410px}}

/* ============ REVIEWS ============ */
.reviews{background:var(--cream)}
.reviews .head{text-align:center;margin-bottom:50px}
.reviews .head .label{justify-content:center}
.reviews .head .label::before{display:none}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.r-card{
  background:#fff;padding:30px;border-radius:18px;border:1px solid var(--line);
  transition:transform .3s var(--ease-out),box-shadow .3s;
}
.r-card:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(212,114,135,.14)}
.r-card .stars{color:var(--blush);font-size:15px;letter-spacing:2px;margin-bottom:12px}
.reviews-grid .r-card:nth-child(2) .stars{color:var(--forest-mid)}
.reviews-grid .r-card:nth-child(3) .stars{color:var(--sand-deep)}
.r-card blockquote{font-size:14.5px;color:#5a4a50;line-height:1.7;font-style:italic;margin-bottom:14px}
.r-card .who{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em}
@media(max-width:820px){.reviews-grid{grid-template-columns:1fr}}

/* ============ CTA ============ */
.cta{
  position:relative;overflow:hidden;text-align:center;
  padding:clamp(90px,14vh,150px) 24px;
  background:linear-gradient(135deg,var(--blush-soft) 0%,var(--sand-soft) 52%,var(--forest-soft) 100%);
}
.cta .big-ghost{
  position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);
  font-family:'Anton',sans-serif;font-size:clamp(80px,17vw,260px);
  text-transform:uppercase;line-height:1;white-space:nowrap;
  color:rgba(212,114,135,.07);pointer-events:none;user-select:none;
}
.cta .price{
  font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,50px);
  color:var(--rose);margin-bottom:6px;
}
.cta h2{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(28px,3.6vw,42px);margin-bottom:12px}
.cta h2 em{color:var(--rose);font-style:italic}
.cta p{font-size:14px;color:var(--muted);letter-spacing:.04em;margin-bottom:30px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:17px 38px;border-radius:32px;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .25s var(--ease-out),box-shadow .25s;
}
.btn-primary{
  background:linear-gradient(135deg,var(--blush),var(--rose));color:#fff;
  box-shadow:0 10px 30px rgba(212,114,135,.35);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(212,114,135,.45)}
.btn-outline{background:transparent;color:var(--rose);border:1.5px solid var(--rose)}
.btn-outline:hover{background:rgba(212,114,135,.07)}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:rgba(253,246,248,.55);padding:54px 24px 34px;text-align:center}
footer .f-logo{font-family:'Playfair Display',serif;font-size:26px;color:var(--cream);margin-bottom:6px}
footer .f-tag{font-size:12px;font-style:italic;font-family:'Playfair Display',serif;color:var(--blush);margin-bottom:26px}
footer .f-links{display:flex;justify-content:center;gap:26px;margin-bottom:26px;flex-wrap:wrap}
footer .f-links a{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.6;transition:opacity .2s}
footer .f-links a:hover{opacity:1}
footer small{display:block;font-size:11px;line-height:1.9;opacity:.5}

/* ============ CART DRAWER ============ */
.cart-overlay{
  position:fixed;inset:0;z-index:290;background:rgba(61,44,50,.45);
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  backdrop-filter:blur(2px);
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:300;
  width:min(400px,94vw);display:flex;flex-direction:column;
  background:var(--cream);box-shadow:-24px 0 70px rgba(61,30,38,.25);
  transform:translateX(105%);transition:transform .5s var(--ease-out);
}
.cart-drawer.open{transform:translateX(0)}
.cd-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 24px;border-bottom:1px solid var(--line);
}
.cd-head h3{font-family:'Playfair Display',serif;font-weight:600;font-size:21px}
.cd-count{color:var(--rose);font-size:15px}
.cd-close{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink);border:1.5px solid var(--line);transition:transform .2s,background .2s;
}
.cd-close:hover{transform:scale(1.08);background:#fff}
.cd-items{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.cd-empty{
  margin:auto;text-align:center;color:var(--muted);font-size:14px;line-height:1.7;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.cd-empty .btn-outline{padding:12px 28px;font-size:12px;border-radius:26px}
.cd-item{
  display:flex;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;
}
.cd-item .thumb{
  width:70px;height:70px;flex:none;border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.cd-item .thumb img{height:88%;width:auto;object-fit:contain}
.cd-item .thumb.ss{overflow:hidden}
.cd-item .thumb.ss img{mix-blend-mode:multiply;filter:brightness(1.06) saturate(1.02)}
.cd-item .info{flex:1;min-width:0}
.cd-item .name{font-size:13.5px;font-weight:700;margin-bottom:2px}
.cd-item .meta{font-size:11.5px;color:var(--muted);letter-spacing:.04em;margin-bottom:8px}
.cd-item .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cd-qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:18px;background:var(--cream)}
.cd-qty button{width:28px;height:28px;font-size:15px;color:var(--ink);transition:background .2s;border-radius:18px}
.cd-qty button:hover{background:var(--blush-soft)}
.cd-qty span{min-width:24px;text-align:center;font-size:13px;font-weight:700}
.cd-item .price{font-size:13.5px;font-weight:700;color:var(--rose)}
.cd-item .rm{
  font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:6px;transition:color .2s;
}
.cd-item .rm:hover{color:var(--rose-deep)}
.cd-foot{padding:18px 24px 22px;border-top:1px solid var(--line);background:#fff}
.cd-sub{display:flex;align-items:center;justify-content:space-between;font-size:14px;margin-bottom:8px}
.cd-sub b{font-family:'Playfair Display',serif;font-size:22px;color:var(--ink)}
.cd-ship{
  display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);
  letter-spacing:.02em;margin-bottom:16px;
}
.cd-ship svg{color:var(--forest-mid);flex:none}
.cd-checkout{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 30px;border-radius:30px;
  background:linear-gradient(135deg,var(--blush),var(--rose));color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 12px 30px rgba(212,114,135,.35);
  transition:transform .22s var(--ease-out),box-shadow .22s;
}
.cd-checkout:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(212,114,135,.45)}
.cd-checkout svg{transition:transform .2s}
.cd-checkout:hover svg{transform:translateX(4px)}

/* ============ NEW DROP : countertop soft serve maker ============ */
.nd-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:15px 20px;border-radius:18px;margin-bottom:clamp(28px,4vh,44px);
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 12px 34px rgba(61,30,38,.06);
}
.nd-flag{
  flex:none;padding:8px 16px;border-radius:22px;
  background:linear-gradient(135deg,var(--blush),var(--rose));color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(212,114,135,.3);
}
.nd-banner-txt{flex:1;min-width:200px}
.nd-banner-main{font-size:14.5px;font-weight:700;margin-bottom:3px}
.nd-banner-sub{font-size:12.5px;color:var(--muted);letter-spacing:.02em}
.nd .pr-stage .badge.new{
  background:linear-gradient(135deg,var(--blush),var(--rose));color:#fff;
  box-shadow:0 6px 18px rgba(212,114,135,.3);
}
/* the CDN shots carry a light studio background: drop .pr-main's stacking
   context so multiply reaches the pastel panel, and lift the near-white
   background to pure white so it takes the panel colour exactly */
.nd .pr-main{z-index:auto}
.nd .pr-main img{mix-blend-mode:multiply;filter:brightness(1.06) saturate(1.02)}
.nd .pr-thumb.prod img{mix-blend-mode:multiply;filter:brightness(1.06) saturate(1.02)}
.nd-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.nd-step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px}
.nd-step b{
  display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--pr-panel,var(--blush-soft));color:var(--pr-accent,var(--rose));
  font-size:11px;font-weight:700;margin-bottom:10px;
  transition:background-color .6s var(--ease),color .6s var(--ease);
}
.nd-step h4{font-size:12.5px;font-weight:700;margin-bottom:3px;letter-spacing:.01em}
.nd-step p{font-size:12px;line-height:1.55;color:var(--muted)}
.nd-more{
  margin-top:20px;padding:16px 20px;border-radius:16px;
  border:1px dashed var(--line);background:rgba(255,255,255,.6);
  display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;
}
.nd-more-flag{
  flex:none;padding:5px 13px;border-radius:20px;
  background:var(--pr-panel,#fbe6ec);color:var(--pr-accent,var(--rose));
  font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .6s var(--ease),color .6s var(--ease);
}
.nd-more p{flex:1;min-width:200px;font-size:12.5px;line-height:1.68;color:var(--muted)}
.nd-more p b{color:var(--ink)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}
@media(max-width:640px){
  .nd-steps{grid-template-columns:1fr}
  .nd-banner{padding:14px 16px;gap:12px}
  .nd-banner-txt{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}
}

/* ==========================================================================
   SHARED ADDITIONS — kept in sync with tools/vc-extra.css (and therefore with
   assets/vc.css, which the product pages load). One block, two consumers.
========================================================================== */
/* ============================================================================
   VOLTECHARGED — SHARED ADDITIONS
   Appended to assets/vc.css AND pasted at the end of index.html's inline
   <style> block (keep both in sync — tools/sync-vc-css.py checks this).
============================================================================ */

/* ---- product-page link on a product card (2026-09-17 naming fix) -------- */
.pr-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pr-accent,var(--rose));
  transition:opacity .2s,gap .2s var(--ease-out);
}
.pr-more:hover{opacity:.75;gap:13px}
.pr-more svg{flex:none}

/* ---- cart: made-to-order / availability note --------------------------- */
.pr-stage-note{
  position:absolute;bottom:16px;left:18px;right:18px;z-index:5;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pr-accent,var(--rose));text-align:center;
}

/* ---- coffee maker card + page: the generated shots are full-bleed PHOTOGRAPHS
   (the silver and black heroes sit on dark backgrounds), so they render as
   photo cards — cover, rounded, no multiply blend and no product drop-shadow,
   unlike the blender cut-outs and the soft-serve studio shots. ------------- */
.nd.coffee .pr-main, .pdp.coffee .pr-main{width:100%;height:100%}
.nd.coffee .pr-main img, .pdp.coffee .pr-main img{object-fit:cover;border-radius:26px;mix-blend-mode:normal;filter:none}
.nd.coffee .pr-thumb.prod img, .pdp.coffee .pr-thumb.prod img{object-fit:cover;padding:0}
/* the coffee card is the third product in the drop: keep its colour rows calm */
.nd.coffee .pr-swatches{padding-left:0}

/* ---- HERO product selector (owner, 2026-09-22) — the row lives directly
   beneath .hero .swatches inside the bottom-left HUD and switches the hero
   between the store's three products. Same visual language as .swatch (small,
   rounded, an active ring drawn in currentColor), but a product cut-out
   thumbnail instead of a flat colour dot. The HUD is a bottom-anchored
   absolutely-positioned block, so nothing else on the hero moves: the block
   simply grows upward by this row's height. ------------------------------- */
.hero .propsel{display:flex;gap:12px;margin-top:14px}
.hero .pchip{
  width:32px;height:32px;border-radius:10px;flex:none;overflow:hidden;position:relative;
  border:2px solid rgba(255,255,255,.6);background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s,border-color .2s,background-color .2s;
}
.hero .pchip img{width:100%;height:100%;object-fit:contain;padding:2px;-webkit-user-drag:none;user-select:none}
.hero .pchip:hover{transform:scale(1.12)}
.hero .pchip.on{border-color:#fff;background:rgba(255,255,255,.45)}
.hero .pchip.on::after{
  content:'';position:absolute;inset:-5px;border-radius:14px;
  border:1.5px solid currentColor;
}
/* Very narrow phones (<=380px): the row is trimmed so it never gets closer to
   the bottom-right CTA than the colour swatch row above it already does — the
   hud-bl / hud-br collision at that width predates this row (the live site's
   3rd swatch dot already reaches the CTA), so this row must not widen it. */
@media(max-width:380px){
  .hero .propsel{gap:8px;margin-top:12px}
  .hero .pchip{width:26px;height:26px;border-radius:8px}
  .hero .pchip.on::after{inset:-4px;border-radius:11px}
}

/* ============================================================================
   VOLTECHARGED — SHARED ADDITIONS
   Appended to assets/vc.css AND pasted at the end of index.html's inline
   <style> block (keep both in sync — tools/sync-vc-css.py checks this).
============================================================================ */

/* ---- product-page link on a product card (2026-09-17 naming fix) -------- */
.pr-more{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pr-accent,var(--rose));
  transition:opacity .2s,gap .2s var(--ease-out);
}
.pr-more:hover{opacity:.75;gap:13px}
.pr-more svg{flex:none}

/* ---- cart: made-to-order / availability note --------------------------- */
.pr-stage-note{
  position:absolute;bottom:16px;left:18px;right:18px;z-index:5;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--pr-accent,var(--rose));text-align:center;
}

/* ---- coffee maker card + page: the generated shots are full-bleed PHOTOGRAPHS
   (the silver and black heroes sit on dark backgrounds), so they render as
   photo cards — cover, rounded, no multiply blend and no product drop-shadow,
   unlike the blender cut-outs and the soft-serve studio shots. ------------- */
.nd.coffee .pr-main, .pdp.coffee .pr-main{width:100%;height:100%}
.nd.coffee .pr-main img, .pdp.coffee .pr-main img{object-fit:cover;border-radius:26px;mix-blend-mode:normal;filter:none}
.nd.coffee .pr-thumb.prod img, .pdp.coffee .pr-thumb.prod img{object-fit:cover;padding:0}
/* the coffee card is the third product in the drop: keep its colour rows calm */
.nd.coffee .pr-swatches{padding-left:0}