/* Build a Gift — design system (spec §3, single consolidated palette) */
:root{
  --pink:#f0178a; --pink-ink:#c40f70; --pink-soft:#fdeef6;
  --green:#6a9739; --green2:#8bc34a; --coral:#ff5a44;
  --ink:#001524; --muted:#575757; --line:#eaeaea;
  --bg:#ffffff; --bg2:#faf6f2; --bg3:#fbf3f8;
  --white:#fff;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(0,21,36,.08);
  --shadow-sm:0 4px 14px rgba(0,21,36,.06);
  --wrap:1440px;
  --serif:"Merriweather",Georgia,serif;
  --sans:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --script:"Sacramento",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.2;margin:0 0 .5em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:100}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;justify-content:center;font-family:var(--sans);
  font-weight:700;border:0;border-radius:999px;padding:.8em 1.5em;cursor:pointer;font-size:1rem;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--pink);color:#fff;box-shadow:0 8px 20px rgba(240,23,138,.28)}
.btn-primary:hover{background:var(--pink-ink)}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:#5b8330}
.btn-block{display:flex;width:100%}
.btn-sm{padding:.55em 1em;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.pink-script{font-family:var(--script);color:var(--pink);font-weight:400;line-height:1}

/* Top bar + header */
.topbar{background:var(--ink);color:#fff;font-size:.82rem;text-align:center}
.topbar .wrap{padding:8px 20px}
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.head-inner{display:flex;align-items:center;gap:24px;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:1.4rem}
.brand-mark{font-size:1.5rem}
/* Image logo mark.
   The mark's LAYOUT BOX is pinned to the 24px geometry it had before, so it can
   never affect the header's height or the brand's spacing again. The image
   itself draws at 28px and simply overflows a couple of px into the header's
   existing 14px padding — visually bigger, zero layout shift. To resize the
   logo, change the img height only; leave the box alone. */
.brand-mark-img{display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;height:24px;width:22px}
/* At 48px the mark is 42.8px wide in a 22px box — it overflows ~10.4px each side
   and with no X nudge would actually overlap the wordmark. -5px splits the
   difference: ~4.6px clear of the text and ~4.6px from the page edge. This is
   about the limit of the pinned box; going larger needs the box itself widened,
   which would shift the wordmark right. Transforms and overflow are
   layout-neutral, so the header still cannot move. */
.brand-mark-img img{height:48px;width:auto;max-width:none;display:block;
  transform:translate(-5px,-3px)}
.brand-name{letter-spacing:-.5px}
.brand-a{color:var(--pink)}
.main-nav{display:flex;gap:26px;margin-left:auto;font-weight:600}
.main-nav a{padding:6px 2px;position:relative;color:var(--ink)}
.main-nav a:hover,.main-nav a.active{color:var(--pink)}
.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--pink);border-radius:2px}
.cart-link{position:relative;display:flex;align-items:center;gap:8px;font-weight:700;padding:8px 14px;
  border:1.5px solid var(--line);border-radius:999px}
.cart-link:hover{border-color:var(--pink);color:var(--pink)}
.cart-badge{position:absolute;top:-8px;right:-8px;background:var(--pink);color:#fff;font-size:.7rem;
  min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

/* Sections */
.section{padding:64px 0}
.section-tight{padding:40px 0}
.section-head{text-align:center;max-width:640px;margin:0 auto 40px}
.section-head h2{font-size:2rem}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--pink);
  font-family:var(--sans);margin-bottom:8px}
.lead{color:var(--muted);font-size:1.05rem}

/* Hero */
.hero{background:linear-gradient(135deg,var(--bg3),var(--bg2));overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero-eyebrow{color:var(--green);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
.hero h1{font-size:clamp(2.4rem,5vw,3.6rem);margin:.2em 0 .3em}
.hero h1 .pink-script{font-size:clamp(3.2rem,7vw,5rem);display:block}
.hero p{font-size:1.15rem;color:var(--muted);max-width:44ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art .gift-emoji{font-size:clamp(9rem,22vw,15rem);filter:drop-shadow(0 20px 30px rgba(240,23,138,.25))}
.hero-badges{position:absolute;inset:0;pointer-events:none}
.floaty{position:absolute;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:var(--shadow);font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:8px}
.floaty small{display:block;color:var(--muted);font-weight:500;font-size:.72rem}
.floaty.f1{top:6%;left:-2%}
.floaty.f2{bottom:12%;right:-2%}
.floaty.f3{bottom:36%;left:-6%}

/* Feature columns */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:center;transition:.2s}
.feature:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.feature .ico{font-size:2.2rem;margin-bottom:10px}
.feature h3{font-size:1.1rem;margin-bottom:.3em}
.feature p{color:var(--muted);font-size:.92rem;margin:0}

/* Product grid + cards */
.grid{display:grid;gap:22px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:.2s;position:relative}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.card-media{aspect-ratio:1;background:var(--bg2);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-tag{position:absolute;top:12px;left:12px;background:var(--pink);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px}
.card-tag.oos{background:var(--muted)}
.card-tag.free{background:var(--green)}
.card-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.card-title{font-family:var(--serif);font-size:1.02rem;font-weight:700;line-height:1.25}
.card-title a:hover{color:var(--pink)}
.card-price{font-weight:800;color:var(--ink);margin-top:auto}
.card-price .was{color:var(--muted);text-decoration:line-through;font-weight:500;margin-left:6px;font-size:.9em}
.card-actions{padding:0 16px 16px}

/* Promo banners */
.promo{border-radius:var(--radius);padding:48px 40px;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--pink),#ff5aa8)}
.promo h2{color:#fff;font-size:2rem}
.promo.green{background:linear-gradient(120deg,var(--green),var(--green2))}
.promo .btn{margin-top:14px}

/* Tagline band */
.band{background:var(--ink);color:#fff;text-align:center;padding:56px 0}
.band h2{color:#fff;font-size:clamp(1.6rem,4vw,2.4rem)}
.band .pink-script{font-size:clamp(2.6rem,6vw,4rem);color:#ff7ac0;display:block}

/* Category tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tile{position:relative;border-radius:var(--radius);overflow:hidden;min-height:220px;display:flex;
  align-items:flex-end;padding:24px;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55))}
.tile-bg{position:absolute;inset:0;z-index:-1}
.tile h3{color:#fff;font-size:1.4rem;margin-bottom:.2em}
.tile a{position:absolute;inset:0}

/* Steps / how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{text-align:center;padding:24px}
.step-num{width:52px;height:52px;border-radius:50%;background:var(--pink-soft);color:var(--pink);
  font-family:var(--serif);font-weight:900;font-size:1.4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}

/* Breadcrumb + page header */
.page-head{background:var(--bg2);padding:40px 0;text-align:center}
.page-head .pink-script{font-size:clamp(2.6rem,6vw,3.4rem);display:block}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.crumb{font-size:.85rem;color:var(--muted);margin-bottom:6px}
.crumb a:hover{color:var(--pink)}

/* Toolbar / filters */
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start}
.filters{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.filters h4{font-size:.95rem;margin-bottom:12px}
.filters ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:2px}
.filters a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);font-size:.92rem}
.filters a:hover{background:var(--bg2);color:var(--ink)}
.filters a.active{background:var(--pink-soft);color:var(--pink);font-weight:700}
.shop-count{color:var(--muted);font-size:.9rem;margin-bottom:16px}

/* Product detail */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.pdp-media{border-radius:var(--radius);overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.pdp h1{font-size:2rem}
.pdp .price{font-size:1.6rem;font-weight:800;color:var(--pink);margin:8px 0 16px}
.pdp .qty{display:flex;align-items:center;gap:10px;margin:18px 0}
.qty-box{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden}
.qty-box button{background:none;border:0;padding:8px 14px;font-size:1.1rem;cursor:pointer}
.qty-box input{width:44px;text-align:center;border:0;font-size:1rem;font-weight:700}
.swatches{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.swatch{width:38px;height:38px;border-radius:50%;border:2px solid var(--line);cursor:pointer;position:relative}
.swatch.sel{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.meta-list{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--line);padding-top:16px;color:var(--muted);font-size:.92rem}
.meta-list li{margin-bottom:6px}

/* Cart */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start}
.cart-lines{display:flex;flex-direction:column;gap:14px}
.cline{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.cline img{width:88px;height:88px;border-radius:10px;object-fit:cover;background:var(--bg2)}
.cline .kit-parts{font-size:.82rem;color:var(--muted);margin-top:4px}
.summary{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:90px}
.summary .row{display:flex;justify-content:space-between;margin-bottom:12px;color:var(--muted)}
.summary .row.total{color:var(--ink);font-weight:800;font-size:1.2rem;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
.empty{text-align:center;padding:70px 20px}
.empty .big{font-size:4rem;margin-bottom:10px}

/* Forms */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font:inherit;background:#fff}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--pink)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.notice{background:var(--pink-soft);border:1px solid #f7c6e2;color:var(--pink-ink);padding:14px 16px;border-radius:var(--radius-sm);font-size:.92rem}
.notice.info{background:#eef6ff;border-color:#cfe4ff;color:#1c5fb0}

/* Footer */
.site-foot{background:#0a1b28;color:#c7d2dc;padding:56px 0 0;margin-top:80px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px}
.foot-brand{color:#fff;font-size:1.4rem;margin-bottom:12px}
.foot-col h4{color:#fff;font-size:1rem;margin-bottom:14px}
.foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.foot-col a:hover{color:#fff}
.foot-about p{font-size:.9rem;line-height:1.7}
.foot-soon{color:#7f96a8;font-size:.82rem}
.socials{display:flex;gap:10px;font-size:1.3rem;margin-top:8px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;
  font-size:.85rem;color:#7f96a8;flex-wrap:wrap;gap:10px}

/* Toast */
.toast{position:fixed;right:20px;bottom:20px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:12px;
  box-shadow:var(--shadow);z-index:200;opacity:0;transform:translateY(12px);transition:.25s;font-weight:600}
.toast.show{opacity:1;transform:none}

/* Responsive */
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-art{display:none}
  .features{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .pdp,.cart-layout{grid-template-columns:1fr}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  /* translateY(-120%) is a percentage of the panel's OWN height, so a short menu
     never travels far enough to clear the 64px top offset and its last link
     (Contact) stayed visible above the header. Hide it outright as well;
     visibility flips back only after the slide-up finishes. */
  .main-nav{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;gap:0;padding:10px 20px;
    border-bottom:1px solid var(--line);box-shadow:var(--shadow);margin:0;
    transform:translateY(-120%);visibility:hidden;
    transition:transform .25s ease,visibility 0s .25s}
  .main-nav.open{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .main-nav a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav-toggle{display:flex}
  .cart-link .cart-amt{display:none}
  .features,.grid-4,.grid-3,.tiles,.form-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:44px 0}
}

/* ---- Build-a-Gift wizard (spec §7) ---- */
.wizard{--wc-w:320px}
.wiz-tabs{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 26px;flex-wrap:wrap}
.wiz-tab{flex:1;min-width:150px;display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;color:var(--muted);transition:.2s;font-size:.95rem}
.wiz-tab .n{width:26px;height:26px;border-radius:50%;background:var(--bg2);color:var(--muted);display:flex;
  align-items:center;justify-content:center;font-size:.85rem;flex:none}
.wiz-tab.active{border-color:var(--pink);color:var(--ink)}
.wiz-tab.active .n{background:var(--pink);color:#fff}
.wiz-tab.done .n{background:var(--green);color:#fff}
.wiz-body{display:grid;grid-template-columns:1fr var(--wc-w);gap:28px;align-items:start}
.wiz-step{display:none;animation:fade .25s ease}
.wiz-step.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}}
.wiz-step h2{font-size:1.5rem;margin-bottom:.2em}

.pick-grid{margin-top:22px}
.pick{position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--radius);
  padding:12px;cursor:pointer;text-align:center;font:inherit;display:flex;flex-direction:column;gap:6px;transition:.15s}
.pick:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pick img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--bg2)}
.pick-name{font-weight:700;font-size:.92rem}
.pick-price{color:var(--pink);font-weight:800;font-size:.9rem}
.pick-check{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--pink);
  color:#fff;display:none;align-items:center;justify-content:center;font-weight:800}
.pick.sel{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.pick.sel .pick-check{display:flex}
/* Item cards: clicking anywhere adds one; the badge shows how many are in the box. */
.pick-badge{position:absolute;top:8px;right:8px;z-index:2;min-width:26px;height:26px;padding:0 7px;
  border-radius:999px;background:var(--pink);color:#fff;display:none;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.pick-item.sel .pick-badge{display:flex}
.pick-badge.bump{animation:pickBump .28s ease}
@keyframes pickBump{0%{transform:scale(.5)}60%{transform:scale(1.28)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.pick-badge.bump{animation:none}}
.pick-qty{display:inline-flex;align-items:center;gap:6px;justify-content:center;margin-top:2px}
.pick-qty button{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  font-size:1.1rem;cursor:pointer;line-height:1}
.pick-qty button:hover{border-color:var(--pink);color:var(--pink)}
.pick-qty [data-count]{min-width:22px;font-weight:800}

.wiz-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;
  border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap}
.wiz-nav-right{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}

.wiz-cart{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.wiz-cart-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;
  background:var(--bg3);border-bottom:1px solid var(--line)}
.wiz-cart-head h3{margin:0;font-size:1.1rem}
.wiz-cart-toggle{background:none;border:0;font-size:1.1rem;cursor:pointer;display:none}
.wiz-cart-body{max-height:340px;overflow:auto;padding:8px 18px}
.wiz-cart-empty{color:var(--muted);font-size:.9rem;padding:22px 0;text-align:center}
.wiz-cart-list{list-style:none;margin:0;padding:0}
.wc-line{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.9rem}
.wc-kind{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:#fff;
  background:var(--pink);border-radius:6px;padding:2px 6px}
.wc-name{font-weight:600}
.wc-price{font-weight:800;white-space:nowrap}
.wiz-cart-foot{padding:16px 18px;border-top:1px solid var(--line)}
.wiz-cart-total{display:flex;justify-content:space-between;font-size:1.05rem;margin-bottom:4px}
.wiz-cart-total strong{color:var(--pink)}
.wiz-cart-note{font-size:.78rem;color:var(--muted);margin:6px 0 12px}
.wiz-cart.collapsed .wiz-cart-body,.wiz-cart.collapsed .wiz-cart-foot{display:none}

@media(max-width:960px){
  .wiz-body{grid-template-columns:1fr}
  .wiz-cart{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:16px 16px 0 0;z-index:40;margin:0}
  .wiz-cart-toggle{display:block}
  .wiz-cart-body{max-height:200px}
  .pick-grid.grid-4{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){.pick-grid.grid-4,.pick-grid.grid-3{grid-template-columns:repeat(2,1fr)}}

/* drawer palette (theme1) */
:root{--cd-bg:#fff;--cd-line:var(--line);--cd-ink:var(--ink);--cd-muted:var(--muted);
  --cd-accent:var(--pink);--cd-soft:var(--bg2);--cd-display:var(--serif)}

/* ---- Slide-out cart drawer ---- */
body.cd-lock{overflow:hidden}
.cd-overlay{position:fixed;inset:0;background:rgba(20,14,18,.42);backdrop-filter:blur(2px);
  opacity:0;transition:opacity .28s ease;z-index:90}
.cd-overlay.show{opacity:1}
.cd{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:91;
  background:var(--cd-bg);border-left:1px solid var(--cd-line);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .3s cubic-bezier(.22,.8,.3,1);box-shadow:-18px 0 46px -22px rgba(20,14,18,.45)}
.cd.open{transform:none}
.cd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--cd-line);flex:none}
.cd-head h2{margin:0;font-size:1.15rem;display:flex;align-items:center;gap:9px}
.cd-count{background:var(--cd-accent);color:#fff;font-family:var(--sans);font-size:.72rem;font-weight:800;
  min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.cd-x{background:none;border:0;font-size:1.7rem;line-height:1;cursor:pointer;color:var(--cd-muted);padding:0 4px}
.cd-x:hover{color:var(--cd-ink)}
.cd-inner{flex:1;display:flex;flex-direction:column;min-height:0}
.cd-items{flex:1;overflow-y:auto;padding:6px 20px}
.cd-item{display:grid;grid-template-columns:72px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--cd-line)}
.cd-item img{width:72px;height:72px;border-radius:10px;object-fit:cover;background:var(--cd-soft)}
.cd-name{font-family:var(--cd-display);font-weight:700;font-size:.98rem;line-height:1.3}
.cd-parts{font-size:.78rem;color:var(--cd-muted);margin-top:3px;line-height:1.4}
.cd-edit{display:inline-block;margin-top:5px;font-size:.78rem;font-weight:700;color:var(--cd-accent);text-decoration:underline}
.cd-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.cd-qty{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--cd-line);border-radius:999px;overflow:hidden}
.cd-qty button{background:none;border:0;width:30px;height:30px;font-size:1.05rem;cursor:pointer;color:var(--cd-ink);line-height:1}
.cd-qty button:hover{color:var(--cd-accent)}
.cd-qty span{min-width:24px;text-align:center;font-weight:800;font-size:.9rem}
.cd-price{font-weight:800}
.cd-remove{background:none;border:0;padding:0;margin-top:7px;font:inherit;font-size:.78rem;
  color:var(--cd-muted);text-decoration:underline;cursor:pointer}
.cd-remove:hover{color:#c0392b}
.cd-foot{flex:none;padding:18px 20px;border-top:1px solid var(--cd-line);background:var(--cd-soft)}
.cd-sub{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem;margin-bottom:4px}
.cd-sub strong{font-size:1.3rem;color:var(--cd-accent)}
.cd-note{font-size:.76rem;color:var(--cd-muted);margin:6px 0 13px}
.cd-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 26px;gap:2px}
.cd-empty-ico{font-size:2.6rem;margin-bottom:6px}
.cd-empty p{margin:0 0 4px}
.cd-muted{color:var(--cd-muted);font-size:.9rem;margin-bottom:16px!important}
.cd-empty .btn{max-width:260px}
@media(max-width:520px){ .cd{width:100%} }

/* Stripe embedded checkout */
.stripe-embed{min-height:520px}
.stripe-loading{padding:44px 20px;text-align:center;color:var(--cd-muted,#777);font-size:.95rem}
#shipping-element,#payment-element{margin-bottom:4px}
#co-pay[disabled]{opacity:.6;cursor:progress}

/* Hero photo (used automatically when /pics/hero.* exists) */
/* Hero photo blended into the page: no radius/shadow (those draw a visible
   card edge) and the edges are feathered so the image melts into the hero
   background. Bottom fades slightly more - the image is warmer down there. */
.hero-art .hero-photo{width:100%;max-width:560px;height:auto;
  border-radius:0;box-shadow:none;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,  transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 86%, transparent 100%);
  mask-composite:intersect}

/* Crossfading hero slideshow — each image is visible 3s, then a 1s fade.
   Slides are stacked; --cycle (set inline) = slides x 4s. */
.hero-slides{position:relative;width:100%;max-width:560px;aspect-ratio:1}
.hero-slides .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:heroFade var(--cycle,16s) infinite}
@keyframes heroFade{
  0%      {opacity:0}
  6.25%   {opacity:1}   /* faded in  (1s) */
  25%     {opacity:1}   /* held      (3s) */
  31.25%  {opacity:0}   /* faded out (1s) */
  100%    {opacity:0}
}
/* Respect users who ask for less motion: show the first slide only. */
@media (prefers-reduced-motion: reduce){
  .hero-slides .hero-photo{animation:none;opacity:0}
  .hero-slides .hero-photo:first-child{opacity:1}
}
@media(max-width:960px){
  /* the emoji was hidden on phones; a real photo should still show */
  .hero-art.has-photo{display:flex;margin-top:10px}
}

/* Feature icons as images (fall back to emoji sizing when no file) */
.feature .ico-img{font-size:0;line-height:0;margin-bottom:14px}
.feature .ico-img img{width:84px;height:84px;object-fit:contain;margin:0 auto;display:block}
@media(max-width:720px){ .feature .ico-img img{width:72px;height:72px} }