/* DIY Boba Cup PDP — lifted from the Claude Design handoff (D2C.dc.html).
   Every value here is from the brief's token table; do not "tidy" them.
   The prototype used inline styles throughout; they are consolidated into
   classes here so four pages share one cached file. */

.diy{
  --leaf:#0F4C3A; --leaf-900:#082F23; --ink:#0E2620; --body:#2B312D;
  --muted:#6E7268; --gold:#C8A862; --gold-200:#ECDDB6; --page:#FAF8F3;
  --card:#fff; --line:#E3E1D8; --sage:#9DB8AC; --mist:#F1EFE8;
  margin:0; background:var(--page); color:var(--body);
  font-family:"DM Sans",system-ui,sans-serif; font-size:16px; line-height:1.5;
  padding-bottom:72px;                 /* room for the sticky buy bar */
}
.diy a{color:inherit;text-decoration:none}
.diy img{display:block;max-width:100%}
.wrapx{max-width:1280px;margin:0 auto;padding:0 24px}

/* breadcrumb */
.bcbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 0}
.bc{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.bc span{opacity:.4}
.bc em{color:var(--body);font-weight:500;font-style:normal}

/* hero */
.hero{padding-top:40px}
.herogrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.gal{position:sticky;top:24px}
.gframe{border-radius:24px;overflow:hidden;background:#fff;border:1.5px solid var(--line);position:relative}
.gframe img{width:100%;height:100%;object-fit:contain;background:#fff;box-sizing:border-box}
.gbadge{position:absolute;top:16px;left:16px;font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--leaf-900)}
.gthumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-top:10px}
.gthumb{border-radius:10px;overflow:hidden;border:2px solid transparent;cursor:pointer;
  aspect-ratio:1/1;background:#fff;padding:0}
.gthumb.on{border-color:var(--leaf)}
.gthumb img{width:100%;height:100%;object-fit:cover}

.commerce{padding-bottom:40px}
.eyebrow{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--leaf);margin-bottom:12px}
.diy h1{font-family:"Instrument Serif",serif;font-size:52px;font-weight:400;line-height:.95;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 10px}
.diy h1 em{color:var(--leaf);font-style:italic}
.lede{font-size:15px;color:var(--body);line-height:1.65;max-width:44ch;margin:0 0 16px}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.chips span{font-size:12px;font-weight:600;color:var(--leaf)}

/* buy / bulk toggle */
.modes{display:flex;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;
  margin-bottom:20px;width:fit-content}
.mode{padding:9px 20px;font-size:13px;font-weight:600;border:none;cursor:pointer;
  font-family:inherit;background:transparent;color:var(--muted)}
.mode.on{background:var(--leaf);color:#fff}
.gsttag{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;
  background:var(--gold);color:var(--leaf-900);margin-left:4px;vertical-align:middle}

.buycard{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:20px;margin-bottom:14px}
.pricerow{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:2px}
.price{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.was{font-size:14px;color:var(--muted);text-decoration:line-through}
.savepill{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;background:var(--gold);color:var(--leaf-900)}
.subline{font-size:13px;color:var(--muted);margin-bottom:16px}
.packlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.pack{border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;cursor:pointer;
  background:#fff;font-family:inherit;text-align:left}
.pack.on{border-color:var(--leaf);background:rgba(15,76,58,.04)}
.pk{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.pv{display:block;font-size:11.5px;color:var(--muted)}
.pv.sel{color:var(--leaf);font-weight:600}
.diy a.cta{display:flex;justify-content:center;align-items:center;padding:15px 24px;border-radius:999px;
  font-weight:600;font-size:15px;background:var(--leaf);color:#fff;margin-bottom:8px}
.diy a.cta:hover{background:var(--leaf-900)}
.ghosts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.diy a.ghost{display:flex;justify-content:center;align-items:center;padding:11px 16px;border-radius:999px;
  font-weight:600;font-size:13.5px;background:var(--page);color:var(--leaf);border:1.5px solid var(--line)}
.diy a.ghost:hover{border-color:var(--leaf)}
.btn-atc{display:flex;justify-content:center;width:100%;padding:14px 24px;border-radius:999px;
  font-weight:600;font-size:15px;background:var(--gold);color:var(--leaf-900);border:none;
  cursor:pointer;font-family:inherit;margin-bottom:8px}
.trustrow{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:14px;border-top:1px solid var(--line)}
.stock{font-size:12px;font-weight:600;color:var(--leaf);display:flex;align-items:center;gap:5px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--leaf)}
.tchip{font-size:11.5px;color:var(--muted)}
.tchip b{color:var(--leaf)}

/* bulk panel */
.bulkcard{background:var(--leaf-900);border-radius:24px;padding:24px;position:relative;overflow:hidden}
.glow{position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,168,98,.12),transparent 70%);bottom:-120px;right:-60px}
.bulkinner{position:relative}
.blabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--gold-200);margin-bottom:8px}
.bh{font-family:"Instrument Serif",serif;font-weight:400;font-size:26px;line-height:1.1;color:#fff;
  margin-bottom:6px;letter-spacing:-.02em}
.bh em{color:var(--gold);font-style:italic}
.bp{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;margin:0 0 16px;max-width:44ch}
.tiers{display:flex;border:.5px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;margin-bottom:14px}
.tier{flex:1;padding:12px 14px;border-right:.5px solid rgba(255,255,255,.1)}
.tier:last-child{border-right:none}
.tier.best{background:rgba(200,168,98,.15)}
.tl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:3px}
.tier.best .tl{color:rgba(255,255,255,.6)}
.tv{font-size:17px;font-weight:600;color:var(--gold);line-height:1}
.tier.best .tv{color:var(--gold-200)}
.tn{font-size:10px;color:rgba(200,168,98,.6);margin-top:2px}
.tier.best .tn{color:var(--gold)}
.bnote{font-size:12px;color:rgba(255,255,255,.45);line-height:1.65;margin-bottom:12px;padding:10px 14px;
  background:rgba(255,255,255,.04);border-radius:8px;border:.5px solid rgba(255,255,255,.08)}
.bnote strong{color:rgba(255,255,255,.7)}
.bnote.gold{background:rgba(200,168,98,.08);border-color:rgba(200,168,98,.2);color:rgba(255,255,255,.5)}
.bnote.gold strong{color:var(--gold-200)}
.diy .bnote.gold a{color:var(--gold);text-decoration:underline}
.bfoot{font-size:11px;color:rgba(255,255,255,.3);text-align:center}
.bfoot strong{color:rgba(255,255,255,.4)}
.diy a.bghost{display:flex;justify-content:center;align-items:center;padding:11px 24px;border-radius:999px;
  font-weight:600;font-size:14px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);
  border:1.5px solid rgba(255,255,255,.15);margin-top:16px}

/* product detail + banner */
.detail{text-align:center;max-width:760px;margin:24px auto 32px}
.detail h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:38px;line-height:1.05;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 12px}
.detail h2 em{color:var(--leaf);font-style:italic}
.detail p{font-size:15px;color:var(--muted);line-height:1.7;margin:0}

/* what's inside */
.inside{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:36px 40px;margin-bottom:40px}
.insidegrid{display:grid;grid-template-columns:1fr 1.35fr;gap:40px;align-items:center}
.insideleft{text-align:center}
.insideleft h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:34px;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 4px}
.insideleft h3 em{color:var(--leaf);font-style:italic}
.insidesub{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cupshot{width:100%;max-width:330px;margin:0 auto;border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(14,38,32,.35)}
.insidefoot{margin-top:16px;font-size:15px;color:var(--ink)}
.insidefoot span{font-family:"Instrument Serif",serif;font-style:italic;color:var(--leaf);font-size:19px}
.insideright{display:flex;flex-direction:column;gap:12px}
.wrow{display:flex;align-items:center}
.wnum{width:28px;height:28px;border-radius:9px;background:var(--leaf);color:#fff;font-weight:700;
  font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wdash{border-top:2px dashed var(--sage);margin:0 12px 0 10px;flex-shrink:0}
.wcard{flex:1;min-width:0;background:var(--page);border:1.5px solid var(--line);border-radius:16px;
  padding:12px 16px;display:flex;gap:16px;align-items:center}
.wimg{width:104px;height:104px;flex-shrink:0}
.wimg img{width:100%;height:100%;object-fit:contain;border-radius:12px}
.wpill{display:inline-block;background:var(--leaf);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:999px;margin-bottom:6px}
.wtext{font-size:13px;color:var(--body);line-height:1.55}

/* four moves */
.steps{background:var(--leaf-900);border-radius:24px;padding:36px 40px;margin-bottom:40px;
  position:relative;overflow:hidden}
.steps .glow{width:360px;height:360px;top:-140px;right:-80px;bottom:auto}
.stepsinner{position:relative}
.steps h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:28px;letter-spacing:-.02em;
  color:#fff;margin:0 0 22px}
.steps h3 em{color:var(--gold);font-style:italic}
/* Column count comes from the number of step cards the flavour actually has
   (Matcha has three moves, not four, because it has no creamer base to mix
   first) — a hardcoded 4 left a dead column. */
.stepgrid{display:grid;grid-template-columns:repeat(var(--stepcols,4),1fr);gap:14px}
.stepcard{background:#fff;border-radius:16px;padding:12px 12px 14px}
/* The step artwork is cut from the printed cup, where panel 4's caption carries a
   ** pointing at a footnote below the strip. The cut separates them, so the
   footnote is reprinted here and the marker resolves again. */
.stepnote{margin-top:16px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62);max-width:70ch}
/* The brief called these "photos" and specified object-fit:cover. The assets
   Drive actually holds are illustrated instruction panels with the caption
   ("Pour 100 ml of hot water…") set into the artwork top and bottom, so cover
   clipped the type off both ends. Same rule as the gallery: contain, never
   crop, because the words are part of the image. */
.stepcard img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;
  border-radius:10px;margin-bottom:10px}
.stepcap{font-size:13px;font-weight:700;color:var(--ink)}
.stepcap span{color:var(--leaf)}

/* spec tabs */
.specs{background:#fff;border:1px solid var(--line);border-radius:24px;padding:36px 40px;margin-bottom:64px}
.tabrow{display:flex;border-bottom:1px solid var(--line);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.tabrow::-webkit-scrollbar{display:none}
.tab{padding:12px 4px;font-size:13.5px;font-weight:600;background:transparent;border:none;
  border-bottom:2px solid transparent;color:var(--muted);cursor:pointer;margin-right:24px;
  white-space:nowrap;font-family:inherit}
.tab.on{border-bottom-color:var(--leaf);color:var(--ink)}
.specgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.srow{display:grid;grid-template-columns:155px 1fr;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;gap:12px}
.srow.last{border-bottom:none}
.srow span:first-child{color:var(--muted);font-weight:500}
.srow span:last-child{color:var(--ink)}
.ingbox{background:var(--page);border:1px solid var(--line);border-radius:16px;padding:20px;
  font-size:14px;line-height:1.75;color:var(--body)}
.inglabel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.ingline{margin:0 0 8px}
.ingline:last-child{margin-bottom:0}
.allergen{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}
.nutriintro{font-size:12.5px;color:var(--muted);margin:0 0 14px}
.nutriwrap{overflow-x:auto}
.nutri{width:100%;border-collapse:collapse;font-size:13px;max-width:560px;min-width:420px}
.nutri th{padding:9px 11px;background:var(--mist);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1.5px solid var(--line);text-align:right}
.nutri th:first-child{text-align:left}
.nutri td{padding:9px 11px;border-bottom:1px solid var(--line);text-align:right;
  color:var(--ink);font-weight:500}
.nutri td:first-child{text-align:left;color:var(--body);font-weight:400}
.faqs{display:grid;gap:20px;max-width:680px}
.fq{font-weight:600;color:var(--ink);margin-bottom:5px;font-size:14px}
.fa{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0}

/* pick a flavour */
.others{background:var(--mist);padding:48px 0 64px}
.oeyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-bottom:6px}
.others h2{font-family:"Instrument Serif",serif;font-weight:400;font-size:38px;line-height:1;
  letter-spacing:-.025em;color:var(--ink);margin:0 0 28px}
.others h2 em{color:var(--leaf);font-style:italic}
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ocard{text-align:center}
.oimg{aspect-ratio:1/1;border-radius:24px;overflow:hidden;background:#fff;border:1.5px solid var(--line);
  margin-bottom:8px;transition:transform .2s,box-shadow .2s}
.ocard:hover .oimg{transform:translateY(-4px);
  box-shadow:0 4px 16px rgba(14,38,32,.08),0 12px 40px rgba(14,38,32,.06)}
.oimg img{width:100%;height:100%;object-fit:cover}
.oimg.allcard{background:var(--mist);display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.oname{font-size:13px;font-weight:600;color:var(--ink)}
.oprice{font-size:12px;color:var(--muted)}

.seotail{font-size:12.5px;color:var(--muted);line-height:1.7;max-width:880px;margin:0 0 40px}

/* b2b band */
.b2bband{background:var(--page);border-top:1px solid var(--line);padding:60px 24px}
.b2bcard{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:24px;padding:32px;text-align:center}
.b2bcard h3{font-family:"Instrument Serif",serif;font-weight:400;font-size:28px;color:var(--ink);margin:0 0 8px}
.b2bcard h3 em{color:var(--leaf);font-style:italic}
.b2bcard p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 auto 18px;max-width:52ch}
.diy a.b2bcta{display:inline-flex;align-items:center;padding:11px 24px;border-radius:999px;font-weight:600;
  font-size:14px;background:var(--gold);color:var(--leaf-900)}
.diy a.b2bcta:hover{background:var(--gold-200)}

/* sticky buy bar */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);
  border-top:1px solid var(--line);box-shadow:0 -8px 30px -12px rgba(14,38,32,.18);
  transform:translateY(100%);transition:transform .25s ease}
.stickybar.show{transform:translateY(0)}
.stickyinner{display:flex;align-items:center;gap:20px;padding-top:10px;padding-bottom:10px}
.stickyinner>img{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.stickytext{min-width:0}
.sname{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ssub{font-size:11.5px;color:var(--muted)}
.stickyright{margin-left:auto;display:flex;align-items:center;gap:14px}
.sprice{text-align:right}
.sp{font-size:19px;font-weight:700;color:var(--ink);line-height:1.1}
.sfree{font-size:10.5px;color:var(--leaf);font-weight:600}
.diy a.scta{display:flex;justify-content:center;align-items:center;padding:12px 26px;border-radius:999px;
  font-weight:600;font-size:14px;background:var(--leaf);color:#fff;white-space:nowrap}
.diy a.scta:hover{background:var(--leaf-900)}

/* ---- responsive. The brief is desktop-only; these keep it upright on phones
   without changing any desktop value. ---- */
@media(max-width:1024px){
  .herogrid{grid-template-columns:1fr;gap:28px}
  .gal{position:static}
  .insidegrid{grid-template-columns:1fr;gap:28px}
  .stepgrid{grid-template-columns:repeat(2,1fr)}
  .inside,.steps,.specs{padding:28px 24px}
}
@media(max-width:768px){
  .diy h1{font-size:38px}
  .detail h2,.others h2{font-size:30px}
  .insideleft h3{font-size:28px}
  .specgrid{grid-template-columns:1fr}
  .ogrid{grid-template-columns:repeat(2,1fr)}
  .packs{grid-template-columns:1fr}
  .tiers{flex-direction:column}
  .tier{border-right:none;border-bottom:.5px solid rgba(255,255,255,.1)}
  .wcard{flex-direction:column;align-items:flex-start;gap:10px}
  .wdash{display:none}
}
@media(max-width:480px){
  .wrapx{padding:0 14px}
  .diy h1{font-size:32px}
  .stepgrid{grid-template-columns:1fr}
  .ghosts{grid-template-columns:1fr}
  .stickyinner{gap:10px}
  .stickyinner>img{display:none}
  .scta{padding:10px 16px;font-size:13px}
}

/* Placeholder for a step panel whose artwork is not in the repo yet — keeps the
   four-card rhythm without shipping a broken image. */
.stepmissing{width:100%;aspect-ratio:1/1;border-radius:10px;margin-bottom:10px;
  background:var(--mist);border:1px dashed var(--line);display:flex;align-items:center;
  justify-content:center;font-family:"Instrument Serif",serif;font-size:40px;color:var(--sage)}

/* The pack of 3 is the offer the page is built around, so it carries the gold
   primary. The single cup is the quieter alternative beneath it. */
.btn-atc.single{background:var(--page);color:var(--leaf);border:1.5px solid var(--line)}
.btn-atc.single:hover{border-color:var(--leaf)}