/* codex-provenance: last-edited-by="OpenAI Codex" date="2026-09-12" */
/* Crave ordering storefront. The drop: one hero flavor, the week in one
   scroll, and a box drawer that fills as cookies are added.
   Two faces only: Druk Wide for display, Poppins for chrome and body. */
@font-face {
  font-family: "Druk Wide";
  src: url("assets/fonts/DrukWide-Medium.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* night, the default colorway */
  --black: #0D0D0D;
  --ground: #0D0D0D;
  --surface: #141414;
  --recessed: #141414;
  --card: #1A1A1A;
  --card-2: #1F1F1F;
  --line: #242424;
  --line-strong: #3A3A3A;
  --disabled: #2A2A2A;
  --gold: #FFAA00;
  --gold-deep: #D98F00;
  --cyan: #00E6FF;
  --text: #FFFFFF;
  --cream: #FFFFFF;
  --body: #D6D6D6;
  --secondary: #B8B8B8;
  --muted: #8C8C8C;
  --faint: #6E6E6E;
  --good: #2ECC71;
  --bad: #B03A1A;
  --on-gold: #0D0D0D;
  --photo-frame: #000000;
  --sel-border: var(--gold);
  --sel-width: 1px;
  --drawer-shadow: 0 -14px 34px rgba(0,0,0,.7);
  --shade: linear-gradient(to top, rgba(13,13,13,.97), rgba(13,13,13,.2) 55%, transparent 80%);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-row: 16px;
  --radius-slot: 12px;
  --shadow: 0 8px 28px rgba(0,0,0,.5);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --gutter: 20px;
  --display: "Druk Wide", "Poppins", system-ui, sans-serif;
  --ui: "Poppins", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.8,.2,1);
}
[data-theme="mist"] {
  --black: #DDE4E3;
  --ground: #DDE4E3;
  --surface: #FFFFFF;
  --recessed: #D2DAD9;
  --card: #FFFFFF;
  --card-2: #D2DAD9;
  --line: #B7C2C0;
  --line-strong: #B7C2C0;
  --disabled: #C6CFCD;
  --text: #0D0D0D;
  --cream: #0D0D0D;
  --body: #3C4744;
  --secondary: #4A5553;
  --muted: #4A5553;
  --faint: #6E7A78;
  --good: #1F7A3D;
  --bad: #B03A1A;
  --cyan: #0D0D0D;
  --on-gold: #0D0D0D;
  --sel-border: #0D0D0D;
  --sel-width: 1.5px;
  --drawer-shadow: 0 -14px 34px rgba(13,13,13,.16);
  --shadow: 0 8px 28px rgba(13,13,13,.14);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--ground); color: var(--text); }
body { font-family: var(--ui); font-size: 16px; line-height: 1.45; overscroll-behavior-y: none; }
h1,h2,h3,h4 { font-family: var(--ui); margin: 0; }
button { font-family: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
[data-theme="mist"] button:focus-visible, [data-theme="mist"] input:focus-visible { outline-color: #0D0D0D; }
img { display: block; max-width: 100%; }
input, select { font-family: inherit; font-size: 16px; }
.hidden { display: none !important; }

/* the display and chrome faces, applied by role */
.dw { font-family: var(--display); text-transform: uppercase; line-height: .92; letter-spacing: .01em; }
.chrome, .eyebrow, .drop-eyebrow {
  font-family: var(--ui); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

#app { padding-bottom: calc(206px + var(--safe-b)); min-height: 100vh; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 30;
  background: var(--ground);
  padding: 14px 18px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.header img.logo { height: 30px; width: auto; }
.loc-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: var(--cream);
}
.loc-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }

/* ---------- Photo hero ---------- */
.hero-photo { position: relative; margin: 4px 14px 0; border-radius: 16px; overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; }
.hero-photo > img, .hero-photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-photo > video { object-position: center 45%; background: #101010; }
.hero-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,13,.18) 16%, rgba(13,13,13,.55) 55%, rgba(13,13,13,.94) 88%); }
.hero-copy { position: relative; z-index: 1; padding: 22px 18px 20px; width: 100%; }
.hero-copy .kicker { color: var(--gold); font-family: "Poppins"; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.hero-copy h1 { font-size: 29px; font-weight: 800; line-height: 1.12; margin-top: 6px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero-sub { color: rgba(245,239,230,.82); font-size: 14px; margin-top: 7px; }
.hero-ctas { display: flex; gap: 10px; margin-top: 14px; }
.hcta { flex: 1; padding: 13px 10px; border-radius: 16px; font-family: "Poppins"; font-weight: 700; font-size: 14.5px; background: rgba(20,20,20,.72); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(8px); }
.hcta.gold { background: var(--gold); color: #141414; border-color: var(--gold); }
.hcta:active { transform: scale(.97); }

/* image cups */
.cup-img { height: 140px; overflow: hidden; background: #101010; position: relative; }
.cup-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.cup-img.sm { height: 64px; }

/* popularity badge */
.pop-badge { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--gold); color: #141414; font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; letter-spacing: .04em; font-family: "Poppins"; }
.cookie-card .ph { position: relative; }

/* curated boxes */
.curated-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.curated-card { background: linear-gradient(150deg, #241B06, #181203); border: 1px solid rgba(255,170,0,.35); border-radius: var(--radius); overflow: hidden; text-align: left; transition: transform .12s ease; }
.curated-card:active { transform: scale(.97); }
.curated-card .ph { height: 96px; overflow: hidden; }
.curated-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.curated-card .cmeta { padding: 10px 12px 12px; }
.curated-card .cn { font-family: "Poppins"; font-weight: 700; font-size: 14px; line-height: 1.2; }
.curated-card .cd { color: var(--muted); font-size: 12px; margin-top: 3px; min-height: 30px; }
.curated-card .cp { font-weight: 700; font-size: 13.5px; margin-top: 6px; display: flex; align-items: center; }

/* sold out */
.soda-card.soldout { opacity: .92; pointer-events: auto; }
.soda-card.soldout .cup-img img { filter: grayscale(.85) brightness(.55); }
.soda-card.soldout .name, .soda-card.soldout .build { color: var(--faint); }
.so-badge { position: absolute; top: 8px; left: 8px; background: rgba(13,13,13,.85); border: 1px solid var(--line); color: var(--cream); font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 999px; letter-spacing: .04em; }

/* ---------- Hero ---------- */
.hero { padding: 8px 18px 2px; }
.hero .kicker { color: var(--gold); font-family: "Poppins"; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { font-size: 28px; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.hero .sub { color: var(--muted); font-size: 14px; margin-top: 6px; }
.hero .flip { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }

/* ---------- Sections ---------- */
.section { padding: 22px 18px 4px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.section-head h2 { font-size: 20px; font-weight: 700; }
.section-head .see { color: var(--gold); font-size: 14px; font-weight: 600; }
.section .blurb { color: var(--muted); font-size: 14px; margin: -6px 0 14px; }

/* ---------- Cookie grid ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cookie-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-align: left; display: flex; flex-direction: column;
  transition: transform .12s ease;
}
.cookie-card:active { transform: scale(.97); }
.cookie-card .ph { aspect-ratio: 1 / 1.05; overflow: hidden; background: #101010; }
.cookie-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.cookie-card .meta { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.cookie-card .tag { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cookie-card .name { font-family: "Poppins"; font-weight: 700; font-size: 15px; line-height: 1.2; }
.cookie-card .price-row { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.cookie-card .price { color: var(--muted); font-size: 14px; font-weight: 600; }
.cookie-card.soldout .ph img { filter: grayscale(.85) brightness(.55); }
.cookie-card.soldout .name, .cookie-card.soldout .price, .cookie-card.soldout .tag { color: var(--faint); }
.addbtn {
  width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #141414;
  font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  line-height: 1; transition: transform .12s ease;
}
.addbtn:active { transform: scale(.85); }

/* ---------- Pack cards ---------- */
.pack-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 12px; width: 100%; text-align: left;
}
.pack-card:active { transform: scale(.985); }
.pack-card .ph { width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; flex: none; background: #101010; }
.pack-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.pack-card .name { font-family: "Poppins"; font-weight: 700; font-size: 16.5px; }
.pack-card .blurb2 { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.pack-card .row { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.pack-card .price { font-weight: 700; font-size: 15px; }
.badge { background: rgba(255,170,0,.14); color: var(--gold); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; }
.badge.save { background: rgba(91,190,126,.13); color: var(--good); }
.chev { margin-left: auto; color: var(--faint); font-size: 20px; }

/* ---------- Soda cards ---------- */
.soda-strip { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.soda-strip::-webkit-scrollbar { display: none; }
.soda-card {
  flex: none; width: 138px; scroll-snap-align: start; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .12s ease;
}
.soda-card:active { transform: scale(.96); }
.cup { height: 120px; position: relative; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.cup .liquid { position: absolute; inset: 0; opacity: .92; }
.cup .shine { position: absolute; top: 0; left: 18%; width: 14%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.04)); border-radius: 999px; filter: blur(1px); }
.cup .ice1, .cup .ice2 { position: absolute; background: rgba(255,255,255,.22); border-radius: 5px; transform: rotate(14deg); }
.cup .ice1 { width: 26px; height: 26px; top: 18%; left: 16%; }
.cup .ice2 { width: 20px; height: 20px; top: 38%; right: 18%; transform: rotate(-12deg); }
.cup .straw { position: absolute; top: -8px; right: 28%; width: 9px; height: 70%; background: var(--gold); border-radius: 4px; transform: rotate(8deg); }
.cup .cream-cap { position: absolute; top: 0; left: 0; right: 0; height: 26%; background: linear-gradient(180deg, rgba(255,250,240,.95), rgba(255,250,240,0)); }
.soda-card .meta { padding: 10px 12px 12px; }
.soda-card .name { font-family: "Poppins"; font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.soda-card .build { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.35; min-height: 32px; }
.soda-card .price { color: var(--muted); font-weight: 600; font-size: 13px; margin-top: 5px; }

/* ---------- Banner ---------- */
.banner {
  margin: 18px; padding: 16px; border-radius: var(--radius);
  background: linear-gradient(120deg, #2A1F08, #1B1404 70%);
  border: 1px solid rgba(255,170,0,.35);
  display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); text-align: left;
}
.banner .t { font-family: "Poppins"; font-weight: 700; font-size: 15.5px; color: var(--gold); }
.banner .d { font-size: 13.5px; color: var(--cream); opacity: .85; margin-top: 2px; }
.banner .ico { font-size: 26px; }

/* ---------- Sheet ---------- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; opacity: 0; transition: opacity .22s; }
.overlay.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface); border-radius: 16px 16px 0 0;
  max-height: 92vh; max-height: 92dvh; overflow-y: auto; box-shadow: var(--shadow);
  transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,.33,1);
  padding-bottom: calc(16px + var(--safe-b));
}
.sheet.show { transform: translateY(0); }
.sheet .grab { width: 40px; height: 4px; background: var(--line); border-radius: 999px; margin: 10px auto 2px; }
.sheet-pad { padding: 10px 18px 6px; }
.sheet .hero-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); margin-top: 8px; }
.sheet h3 { font-size: 22px; font-weight: 800; margin-top: 14px; }
.sheet .desc { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.sheet .close { display: none; }
.sheet-close-row { position: sticky; top: 8px; z-index: 9; height: 0; display: flex; justify-content: flex-end; padding-right: 14px; }
.close-x { width: 36px; height: 36px; border-radius: 50%; background: rgba(13,13,13,.78); border: 1px solid var(--line); color: var(--cream); display: flex; align-items: center; justify-content: center; font-size: 15px; backdrop-filter: blur(6px); }
.close-x:active { transform: scale(.92); }

/* steppers */
.qty-row { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 16px 0 4px; }
.qty-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qty-btn:active { background: var(--card-2); }
.qty-num { font-family: "Poppins"; font-size: 22px; font-weight: 700; min-width: 30px; text-align: center; }

.cta {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 36px); margin: 14px 18px 4px; padding: 15px 18px;
  background: var(--gold); color: #141414; border-radius: 16px;
  font-family: "Poppins"; font-weight: 700; font-size: 16px;
  transition: transform .12s ease;
}
.cta:active { transform: scale(.98); }
.cta.secondary { background: var(--card); color: var(--cream); border: 1px solid var(--line); }
.cta[disabled] { opacity: .4; pointer-events: none; }

.hint { text-align: center; color: var(--faint); font-size: 12.5px; margin: 8px 18px 0; }

/* ---------- Box builder ---------- */
.size-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.size-opt { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 8px; text-align: center; }
.size-opt.sel { border-color: var(--gold); background: rgba(255,170,0,.08); }
.size-opt .n { font-family: "Poppins"; font-weight: 800; font-size: 19px; }
.size-opt .p { color: var(--muted); font-size: 13px; margin-top: 2px; }
.size-opt .b { display: block; font-size: 10.5px; color: var(--gold); font-weight: 700; margin-top: 4px; min-height: 13px; }

.slot-tray {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, var(--surface) 82%, transparent);
  padding: 12px 0 10px;
}
.slot-tray .label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.slot-tray .label b { color: var(--gold); font-family: "Poppins"; }
.slots { display: flex; gap: 7px; flex-wrap: wrap; }
.slot { width: 44px; height: 44px; border-radius: 12px; border: 1.5px dashed var(--line); background: var(--card); overflow: hidden; transition: transform .15s; }
.slot.filled { border-style: solid; border-color: var(--gold-deep); }
.slot.pop { animation: pop .25s ease; }
.slot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes pop { 40% { transform: scale(1.18); } }

.flavor-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.flavor-row .ph { width: 58px; height: 58px; border-radius: 12px; overflow: hidden; flex: none; background: #101010; }
.flavor-row .ph img { width: 100%; height: 100%; object-fit: cover; }
.flavor-row .fname { font-family: "Poppins"; font-weight: 600; font-size: 15px; }
.flavor-row .fsub { color: var(--faint); font-size: 12px; margin-top: 1px; }
.flavor-row .ctrl { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mini-btn { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mini-btn.gold { background: var(--gold); color: #141414; border-color: var(--gold); }
.mini-btn[disabled] { opacity: .3; }
.mini-num { font-weight: 700; min-width: 16px; text-align: center; }

/* drink attach panel */
.attach { margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.attach .t { font-family: "Poppins"; font-weight: 700; font-size: 15.5px; }
.attach .d { color: var(--muted); font-size: 13px; margin-top: 2px; }
.attach .opts { display: flex; gap: 10px; margin-top: 12px; }
.attach .opt { flex: 1; background: var(--card-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; text-align: left; }
.attach .opt.sel { border-color: var(--gold); }
.attach .opt .cup { height: 64px; }
.attach .opt .m { padding: 8px 10px 10px; }
.attach .opt .n { font-weight: 600; font-size: 12.5px; line-height: 1.2; }
.attach .opt .p { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ---------- Soda builder ---------- */
.step-label { font-family: "Poppins"; font-weight: 700; font-size: 14px; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; margin: 18px 0 8px; }
.step-label small { color: var(--faint); text-transform: none; letter-spacing: 0; font-weight: 500; font-family: var(--ui); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1.5px solid var(--line); background: var(--card); border-radius: 999px;
  padding: 9px 14px; font-size: 14px; font-weight: 600; transition: all .12s;
}
.chip.sel { background: rgba(255,170,0,.12); border-color: var(--gold); color: var(--gold); }
.chip .pp { color: var(--faint); font-size: 12px; font-weight: 500; }
.chip.sel .pp { color: var(--gold-deep); }

.size-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.size-pill { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--radius-sm); padding: 10px 4px; text-align: center; }
.size-pill.sel { border-color: var(--gold); background: rgba(255,170,0,.08); }
.size-pill .s { font-family: "Poppins"; font-weight: 700; font-size: 14.5px; }
.size-pill .p { color: var(--muted); font-size: 12px; margin-top: 1px; }
.size-pill .tag2 { display: block; color: var(--gold); font-size: 9.5px; font-weight: 700; min-height: 12px; margin-top: 2px; }

/* ---------- Cart ---------- */
.cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-item .ph { width: 62px; height: 62px; border-radius: 12px; overflow: hidden; flex: none; background: #101010; }
.cart-item .ph img { width: 100%; height: 100%; object-fit: cover; }
.cart-item .ph.cup-thumb { display: flex; }
.cart-item .cname { font-family: "Poppins"; font-weight: 600; font-size: 15px; }
.cart-item .csub { color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }
.cart-item .cedit { color: var(--gold); font-size: 12.5px; font-weight: 600; margin-top: 4px; }
.cart-item .right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cart-item .cprice { font-weight: 700; font-size: 14.5px; }

.upsell-rail { margin: 16px 0 4px; }
.upsell-rail .t { font-family: "Poppins"; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.upsell-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: linear-gradient(120deg, #241B06, #1A1402); border: 1px solid rgba(255,170,0,.3);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.upsell-card .ph { width: 54px; height: 54px; border-radius: 12px; overflow: hidden; flex: none; }
.upsell-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.upsell-card .un { font-weight: 700; font-size: 14px; font-family: "Poppins"; }
.upsell-card .ud { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.upsell-card .ua { margin-left: auto; flex: none; background: var(--gold); color: #141414; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 999px; }

.summary { margin-top: 14px; }
.sumrow { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--muted); padding: 4px 0; }
.sumrow.total { color: var(--cream); font-weight: 700; font-size: 17px; font-family: "Poppins"; padding-top: 10px; }
.sumrow .free { color: var(--good); font-weight: 600; }
.promo-link { color: var(--gold); font-size: 14px; font-weight: 600; margin: 10px 0 2px; display: inline-block; }
.promo-row { display: flex; gap: 8px; margin-top: 8px; }
.promo-row input { flex: 1; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--cream); padding: 12px 14px; }
.promo-row button { background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 16px; font-weight: 700; }

.loyalty-box { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.loyalty-box .t { font-family: "Poppins"; font-weight: 700; font-size: 14.5px; }
.loyalty-box .d { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.loyalty-box input { width: 100%; margin-top: 10px; background: var(--card-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--cream); padding: 12px 14px; }
.loyalty-box .ok { color: var(--good); font-size: 13px; font-weight: 600; margin-top: 8px; }

/* ---------- Checkout ---------- */
.f-label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; }
.f-input { min-width: 0; width: 100%; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--cream); padding: 13px 14px; }
.f-input:focus { outline: none; border-color: var(--gold); }
.address-search { position: relative; }
.address-locality { display: grid; grid-template-columns: minmax(0, 2fr) minmax(64px, 1fr) minmax(96px, 1.25fr); gap: 8px; }
.address-suggestions {
  position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px; background: #1a1a1a;
  box-shadow: 0 16px 36px rgba(0,0,0,.42);
}
.address-suggestions.loading { opacity: .62; pointer-events: none; }
.address-suggestion {
  width: 100%; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-bottom: 1px solid var(--line); color: var(--cream); text-align: left;
}
.address-suggestion:hover, .address-suggestion:focus-visible { background: rgba(255,170,0,.1); outline: none; }
.address-suggestion strong { font-size: 13.5px; line-height: 1.3; }
.address-suggestion span { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.google-attribution { min-height: 27px; display: flex; align-items: center; justify-content: flex-end; padding: 6px 10px; }
.google-attribution img { width: 120px; height: 14px; object-fit: contain; }
.delivery-estimate {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 11px 12px;
  border-radius: 12px; background: rgba(91,190,126,.1); color: var(--good);
}
.delivery-estimate > span { width: 24px; height: 24px; display: grid; place-items: center; }
.delivery-estimate svg { width: 20px; height: 20px; }
.delivery-estimate > div { display: flex; flex-direction: column; }
.delivery-estimate small { color: var(--muted); font-size: 10.5px; }
.delivery-estimate strong { font-family: "Poppins"; font-size: 15px; }
@media (max-width: 420px) {
  .address-locality { grid-template-columns: 82px minmax(0, 1fr); }
  .address-locality .ad-city { grid-column: 1 / -1; }
}
.time-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.time-row::-webkit-scrollbar { display: none; }
.time-pill { flex: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
.time-pill.sel { border-color: var(--gold); background: rgba(255,170,0,.1); color: var(--gold); }
.expresspay { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pay-apple { background: #000; border: 1px solid #333; color: #fff; border-radius: 16px; padding: 14px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: -apple-system, var(--ui), sans-serif; }
.pay-g { background: #fff; color: #1a1a1a; border-radius: 16px; padding: 14px; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12.5px; margin: 16px 0 2px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------- Confirmation ---------- */
.confirm { text-align: center; padding: 34px 24px 10px; }
.confirm .big { font-size: 54px; }
.confirm h2 { font-size: 24px; font-weight: 800; margin-top: 10px; }
.confirm .sub2 { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.confirm .ordno { display: inline-block; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-family: "Poppins"; font-weight: 700; color: var(--gold); }
.stages { display: flex; justify-content: space-between; margin: 26px 8px 6px; position: relative; }
.stages::before { content: ""; position: absolute; top: 17px; left: 12%; right: 12%; height: 2px; background: var(--line); }
.stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 25%; }
.stage .ic { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.stage.on .ic { background: rgba(255,170,0,.15); border-color: var(--gold); }
.stage span { font-size: 11px; color: var(--faint); font-weight: 600; }
.stage.on span { color: var(--gold); }

/* ---------- Rewards ---------- */
.reward-hero { margin: 14px 18px; background: linear-gradient(135deg, #241B06, #141005); border: 1px solid rgba(255,170,0,.3); border-radius: var(--radius); padding: 20px; }
.reward-hero .pts { font-family: "Poppins"; font-weight: 800; font-size: 34px; color: var(--gold); }
.reward-hero .d { color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.reward-bar { height: 9px; border-radius: 999px; background: var(--card-2); margin-top: 14px; overflow: hidden; }
.reward-bar .fill { height: 100%; width: 60%; border-radius: 999px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.reward-hero .next { font-size: 12.5px; color: var(--faint); margin-top: 8px; }

/* ---------- Cart bar / nav ---------- */
.cartbar {
  position: fixed; left: 16px; right: 16px; bottom: calc(74px + var(--safe-b)); z-index: 35;
  background: var(--gold); color: #141414; border-radius: 16px; padding: 15px 18px;
  display: flex; align-items: center; gap: 12px; font-family: "Poppins"; font-weight: 700; font-size: 15.5px;
  box-shadow: 0 10px 30px rgba(255,170,0,.25);
  animation: rise .3s ease;
}
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }
.cartbar-count { background: #141414; color: var(--gold); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cartbar-total { margin-left: auto; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 36;
  background: rgba(13,13,13,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  display: flex; padding: 8px 8px calc(8px + var(--safe-b));
}
.nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--faint); padding: 5px 0; overflow-wrap: anywhere; text-align: center; }
.nav-btn .nav-ico { display: block; } .nav-btn .nav-ico svg { width: 22px; height: 22px; display: block; }
.nav-btn.active { color: var(--gold); }
.cravings-card .blurb2 {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  color: var(--muted); font-size: 12px; line-height: 1.35;
}


/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(142px + var(--safe-b)); z-index: 60;
  background: var(--card-2); border: 1px solid var(--line); color: var(--cream);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  padding: 11px 16px; border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.5;
  box-shadow: var(--shadow); white-space: normal; overflow-wrap: anywhere;
  animation: toast-rise .18s ease-out;
}
@keyframes toast-rise {
  from { transform: translate(-50%, 10px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* skeleton */
.skel { background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 50%, var(--card) 75%); background-size: 200% 100%; animation: shimmer 1.1s infinite; border-radius: var(--radius); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* confetti */
.confetti { position: fixed; top: -10px; z-index: 70; width: 8px; height: 14px; border-radius: 2px; animation: fall 1.6s ease-in forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }

@media (min-width: 560px) {
  #app, .sheet { max-width: 480px; margin-left: auto; margin-right: auto; }
  .sheet { left: 50%; transform: translate(-50%, 100%); }
  .sheet.show { transform: translate(-50%, 0); }
  .bottomnav, .cartbar { max-width: 480px; margin-left: auto; margin-right: auto; left: 0; right: 0; }
}

/* ---------- Desktop nav (hidden on mobile) ---------- */
.desktopnav { display: none; }

/* ====================================================================
   Desktop / large screens. Mobile styles above stay untouched; the
   560px rule centers a phone column, these rules replace it from 900px.
   ==================================================================== */
@media (min-width: 900px) {
  body { font-size: 16.5px; }

  /* shell: real page width, no bottom nav padding */
  #app, .sheet { max-width: none; }
  #app { max-width: 1160px; margin: 0 auto; padding: 0 32px 90px; min-height: 100vh; }

  /* header becomes the nav bar */
  .header { padding: 18px 0 14px; gap: 24px; }
  .header img.logo { height: 36px; }
  .desktopnav { display: flex; gap: 2px; min-width: 0; margin-left: 4px; margin-right: auto; }
  .dnav {
    padding: 9px 11px; border-radius: 999px; font-family: "Poppins"; font-weight: 600;
    font-size: 13px; color: var(--muted); transition: color .12s, background .12s; white-space: nowrap;
  }
  .dnav:hover { color: var(--cream); background: var(--card); }
  .dnav.active { color: var(--gold); background: rgba(255,170,0,.1); }
  .loc-chip { padding: 9px 16px; font-size: 14px; }
  .bottomnav { display: none; }

  /* floating cart pill, bottom right */
  .cartbar {
    left: auto; right: 40px; bottom: 32px; max-width: 340px; width: 340px; margin: 0;
    padding: 16px 20px; border-radius: 16px;
  }
  .cartbar:hover { filter: brightness(1.05); }

  /* hero */
  .hero-photo { margin: 8px 0 0; min-height: 440px; border-radius: 16px; }
  .hero-copy { padding: 32px 36px 30px; max-width: 640px; }
  .hero-copy h1 { font-size: 44px; }
  .hero-sub { font-size: 16px; }
  .hero-ctas { flex-direction: row !important; max-width: 540px; }
  .hero-ctas .hcta { width: auto !important; flex: 1 !important; padding: 15px 18px !important; font-size: 15px; }
  .hero-ctas .hcta.ghost { text-align: center; font-size: 14px !important; }
  .hero { padding: 14px 0 2px; }
  .hero h1 { font-size: 34px; }

  /* sections lose phone gutters (the shell provides them) */
  .section { padding: 30px 0 4px; }
  .section-head h2 { font-size: 23px; }
  .banner { margin: 22px 0; width: 100%; padding: 18px 20px; }

  /* grids grow up */
  .grid2 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .curated-row { gap: 16px; }
  .curated-card .ph { height: 130px; }
  .soda-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; overflow: visible; padding: 2px 0 4px; }
  .soda-card { width: auto; }
  .cup-img { height: 170px; }

  /* pack cards two-up (section-head/blurb/curated span full width) */
  .section:has(> .pack-card) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
  .section:has(> .pack-card) > .section-head,
  .section:has(> .pack-card) > .blurb,
  .section:has(> .pack-card) > .curated-row { grid-column: 1 / -1; }
  .pack-card:hover, .cookie-card:hover, .soda-card:not(.soldout):hover, .curated-card:hover { border-color: rgba(255,170,0,.5); }

  /* rewards */
  .reward-hero { margin: 14px 0; }
  .promo-row { max-width: 520px; }

  /* sheets become centered modals */
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(620px, 92vw); max-height: 86vh; max-height: 86dvh;
    border-radius: 16px;
    transform: translate(-50%, -46%); opacity: 0;
    transition: transform .24s cubic-bezier(.32,.72,.33,1), opacity .2s ease;
    padding-bottom: 18px;
  }
  .sheet.show { transform: translate(-50%, -50%); opacity: 1; }
  .sheet .grab { display: none; }
  .sheet-close-row { top: 14px; }
  .sheet-pad { padding: 16px 26px 8px; }
  .cta { width: calc(100% - 52px); margin: 14px 26px 8px; }
  .hint { margin: 8px 26px 4px; }

  /* toast above the cart pill */
  .toast { bottom: 110px; }
}

@media (min-width: 1280px) {
  .hero-copy h1 { font-size: 50px; }
  .cup-img { height: 190px; }
}

/* svg icons */
.icon-gold svg { width: 26px; height: 26px; color: var(--gold); display: block; }
.icon-big svg { width: 38px; height: 38px; display: block; }
.icon-hero svg { width: 52px; height: 52px; color: var(--gold); display: inline-block; }
.stage .ic svg { width: 17px; height: 17px; color: var(--faint); }
.stage.on .ic svg { color: var(--gold); }

/* ---------- Adaptive commerce landing ---------- */
.loyalty-promo {
  width: calc(100% - 28px); margin: 6px 14px 10px; padding: 13px 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center;
  text-align: left; border-radius: 16px; border: 1px solid rgba(255,170,0,.34);
  background: linear-gradient(120deg, rgba(255,170,0,.16), rgba(255,170,0,.055) 68%, rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.loyalty-promo.member { border-color: rgba(91,190,126,.34); background: linear-gradient(120deg, rgba(91,190,126,.13), rgba(255,170,0,.05)); }
.loyalty-promo-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--gold); color: #141414; }
.loyalty-promo-icon svg { width: 23px; height: 23px; }
.loyalty-promo.member .loyalty-promo-icon { background: var(--good); }
.loyalty-promo-copy { min-width: 0; display: flex; flex-direction: column; }
.loyalty-promo-copy .eyebrow { color: var(--gold); font-family: "Poppins"; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.loyalty-promo-copy strong { font-family: "Poppins"; font-size: 14px; line-height: 1.2; margin-top: 1px; }
.loyalty-promo-copy > span:last-child { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.loyalty-promo-action { grid-column: 2; color: var(--gold); font-size: 11.5px; font-weight: 700; margin-top: -6px; }

.commerce-hero {
  position: relative; min-height: 338px; margin: 0 14px; border-radius: 16px; overflow: hidden;
  display: flex; align-items: flex-end; isolation: isolate; background: #17120d;
  border: 1px solid rgba(255,255,255,.075); box-shadow: 0 18px 42px rgba(0,0,0,.34);
}
.commerce-hero-media, .commerce-hero-shade { position: absolute; inset: 0; }
.commerce-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.commerce-hero-shade { background: linear-gradient(180deg, rgba(13,13,13,.02) 20%, rgba(13,13,13,.28) 46%, rgba(13,13,13,.96) 86%); }
.commerce-hero-copy { position: relative; z-index: 1; width: 100%; padding: 18px; }
.commerce-hero .kicker { color: var(--gold); font-family: "Poppins"; font-weight: 800; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.commerce-hero .featured-tag { display: inline-flex; margin-top: 7px; border-radius: 999px; padding: 4px 8px; background: rgba(13,13,13,.62); border: 1px solid rgba(255,255,255,.16); color: var(--cream); font-size: 10px; font-weight: 700; }
.commerce-hero h1 { max-width: 92%; margin-top: 5px; font-size: 28px; line-height: 1.05; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.commerce-hero .hero-sub { max-width: 92%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.featured-price { margin-top: 7px; font-family: "Poppins"; font-size: 17px; font-weight: 800; }
.commerce-hero .hero-ctas { margin-top: 11px; }
.commerce-hero .hcta { padding: 11px 10px; font-size: 13px; background: rgba(20,20,20,.78); }
.commerce-hero .hcta.gold { background: var(--gold); color: #141414; border-color: var(--gold); }

.category-rail {
  position: sticky; top: 58px; z-index: 22; display: flex; gap: 7px; overflow-x: auto;
  margin-top: 10px; padding: 9px 14px 10px; background: linear-gradient(180deg, rgba(13,13,13,.98) 75%, rgba(13,13,13,.9));
  scrollbar-width: none;
}
.category-rail::-webkit-scrollbar { display: none; }
.category-rail button { flex: none; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 12px; font-weight: 700; }
.category-rail button.active { background: var(--cream); border-color: var(--cream); color: #141414; }
.more-menu { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.more-menu summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px; cursor: pointer; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu summary > span:first-child { display: flex; flex-direction: column; }
.more-menu summary b { font-family: "Poppins"; }
.more-menu summary small { color: var(--muted); font-size: 11.5px; }
.more-menu summary > span:last-child { color: var(--gold); font-size: 12px; font-weight: 800; }
.more-menu[open] summary { border-bottom: 1px solid var(--line); }
.more-menu[open] summary > span:last-child { font-size: 0; }
.more-menu[open] summary > span:last-child::after { content: "Close −"; font-size: 12px; }
.more-menu-items { padding: 0 12px 12px; }
.more-menu .pack-card:last-child { margin-bottom: 0; }
.pack-card .blurb2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Account and order history ---------- */
.account-section { padding-top: 12px; }
.account-welcome { padding: 19px; border-radius: var(--radius); background: linear-gradient(135deg, #241b06, #151104); border: 1px solid rgba(255,170,0,.3); }
.account-welcome .icon-hero { display: inline-flex; }
.account-welcome strong { display: block; margin-top: 8px; font: 800 20px/1.2 "Poppins"; }
.account-welcome p { margin: 7px 0 0; color: var(--muted); font-size: 13.5px; }
.account-card { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.account-avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #141414; font: 800 16px "Poppins"; }
.account-identity { min-width: 0; display: flex; flex-direction: column; }
.account-identity strong { font-family: "Poppins"; }
.account-identity span { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.account-balance { margin-left: auto; flex: none; padding: 6px 9px; border-radius: 999px; background: rgba(255,170,0,.12); color: var(--gold); font-size: 11px; font-weight: 800; }
.account-list { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.account-row { width: 100%; min-height: 65px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.account-row:last-child { border-bottom: 0; }
.account-row-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 12px; background: var(--card-2); color: var(--gold); }
.account-row-icon svg { width: 17px; height: 17px; }
.account-row span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.account-row strong { font-size: 13.5px; }
.account-row small { color: var(--muted); font-size: 11.5px; }
.account-row.subrow { grid-template-columns: 34px minmax(0,1fr); min-height: 54px; }
.account-reorder { width: 100%; margin-top: 12px; padding: 14px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; text-align: left; border-radius: var(--radius); background: rgba(255,170,0,.1); border: 1px solid rgba(255,170,0,.3); }
.account-reorder > span:first-child svg { width: 22px; }
.account-reorder > span:nth-child(2) { display: flex; flex-direction: column; }
.account-reorder small { color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-reorder > b { color: var(--gold); font-size: 12px; }
.history-order { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.history-order > div { display: flex; flex-direction: column; }
.history-order span { color: var(--muted); font-size: 11.5px; text-transform: capitalize; }
.history-total { align-items: flex-end; }
.history-lines { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.45; }
.checkout-reward { display: flex; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 12px; border: 1px solid rgba(91,190,126,.36); background: rgba(91,190,126,.08); }
.checkout-reward > span { width: 26px; color: var(--good); }
.checkout-reward svg { width: 22px; }
.checkout-reward > div { display: flex; flex-direction: column; }
.checkout-reward small, .quote-earned { color: var(--muted); font-size: 11.5px; }
.quote-earned { margin-top: 8px; color: var(--good); font-weight: 700; }

/* ---------- Durable payment recovery and delivery tracking ---------- */
.payment-recovery { padding-top: 28px; text-align: center; }
.payment-recovery .icon-hero { display: inline-flex; }
.payment-recovery .desc { max-width: 360px; margin: 8px auto 0; }
.active-order {
  width: calc(100% - 28px); margin: 8px 14px 12px; padding: 13px 14px;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center;
  text-align: left; border-radius: 16px; border: 1px solid rgba(91,190,126,.35);
  background: linear-gradient(120deg, rgba(91,190,126,.14), rgba(255,170,0,.075));
}
.active-order-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--good); color: #101010; }
.active-order-icon svg { width: 22px; }
.active-order > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.active-order small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.active-order strong { font: 800 14px/1.3 "Poppins"; }
.active-order b { color: var(--gold); font-size: 12px; }
.history-track { grid-column: 1 / -1; justify-self: start; color: var(--gold); font-size: 12px; font-weight: 800; }
.tracking-head { padding: 8px 0 12px; }
.delivery-instructions { min-height: 88px; resize: vertical; }
.tracking-close-bar { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px 0; background: var(--bg); }
.tracking-close-bar .tracking-head { min-width: 0; }
.tracking-close-bar button { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; color: var(--on-gold); background: var(--gold); font: 30px/1 system-ui; cursor: pointer; }
.tracking-driver-call { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 16px; border-radius: 24px; color: var(--on-gold); background: var(--gold); font: 700 14px var(--ui); text-decoration: none; }
.delivery-action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.delivery-action-row > button, .delivery-action-row > a { flex: 1 1 145px; min-height: 48px; margin: 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--cream); text-align: center; font: 700 14px var(--ui); cursor: pointer; }
.delivery-action-row > [hidden], .delivery-action-editor[hidden], .tracking-external[hidden] { display: none; }
.delivery-action-editor { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.delivery-action-editor label { display: block; font-weight: 700; font-size: 18px; }
.delivery-action-editor p, .delivery-action-notice { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 10px 0; }
.delivery-action-editor textarea { display: block; width: 100%; min-width: 0; min-height: 110px; margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--cream); font: 16px/1.5 var(--ui); resize: vertical; box-sizing: border-box; }
.delivery-action-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.delivery-action-buttons button { min-height: 48px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 24px; background: transparent; color: var(--cream); font: 700 14px var(--ui); cursor: pointer; }
.delivery-action-buttons button[type=submit] { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.delivery-action-buttons button:disabled { opacity: .5; cursor: not-allowed; }
.tracking-head small { color: var(--gold); font: 800 10px/1 "Poppins"; letter-spacing: .12em; }
.tracking-head h3 { margin-top: 5px; }
.tracking-head small.tracking-pickup-note { display: block; margin-top: 6px; color: var(--body); font: 600 13px/1.3 "Poppins"; letter-spacing: 0; }
.tracking-map { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.tracking-map.route img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tracking-eta { margin: 6px 0 0; color: var(--gold); font: 800 18px/1.2 var(--ui); letter-spacing: 0; }
.tracking-courier { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.tracking-courier[hidden] { display: none; }
.tracking-courier-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tracking-courier-id strong { display: block; color: var(--cream); font: 700 15px var(--ui); }
.tracking-courier-id small { display: block; margin-top: 2px; color: var(--faint); font: 500 13px var(--ui); text-transform: capitalize; }
.tracking-courier-badge { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font: 800 16px var(--ui); }
.tracking-courier-actions { display: flex; gap: 8px; }
.tracking-courier-actions a { display: flex; align-items: center; justify-content: center; min-width: 72px; min-height: 44px; padding: 0 16px; border-radius: 22px; font: 700 14px var(--ui); text-decoration: none; }
.tracking-courier-text { border: 1px solid var(--line); color: var(--cream); }
.tracking-courier-call { background: var(--gold); color: var(--on-gold); }
.tracking-map iframe { width: 100%; height: 100%; border: 0; background: var(--card); }
.tracking-map.unavailable { display: grid; place-items: center; color: var(--faint); }
.tracking-map.unavailable svg { width: 34px; }
.tracking-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 18px; }
.tracking-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--faint); text-align: center; font-size: 9.5px; }
.tracking-step::before { content: ""; position: absolute; z-index: 0; top: 5px; right: 50%; width: 100%; height: 2px; background: var(--line); }
.tracking-step:first-child::before { display: none; }
.tracking-step i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); }
.tracking-step.reached { color: var(--cream); }
.tracking-step.reached::before, .tracking-step.reached i { background: var(--gold); border-color: var(--gold); }
.tracking-external { display: inline-flex; margin-top: 16px; color: var(--gold); font-size: 12.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tracking-external.as-button { border: 0; background: none; }

@media (min-width: 900px) {
  .active-order { width: 100%; margin: 8px 0 16px; }
  .tracking-map { aspect-ratio: 16 / 9; }
}

/* ---------- Desktop order rail ---------- */
.desktop-cart { display: none; }
.desktop-cart-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.desktop-cart-head > div { display: flex; flex-direction: column; }
.desktop-cart-head span { font: 800 20px "Poppins"; }
.desktop-cart-head small { color: var(--muted); font-size: 11.5px; }
.desktop-cart-head > b { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #141414; font-size: 12px; }
.desktop-cart-items { max-height: 310px; overflow: auto; }
.desktop-cart-item { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.desktop-cart-item .thumb { width: 44px; height: 44px; overflow: hidden; border-radius: 12px; background: #101010; }
.desktop-cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.desktop-cart-item > div:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.desktop-cart-item strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desktop-cart-item span { color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desktop-cart-item > b { font-size: 11.5px; }
.desktop-cart-more { padding: 8px 0; color: var(--muted); font-size: 11px; }
.desktop-cart-loyalty { margin-top: 14px; padding: 11px; display: flex; gap: 9px; align-items: center; border-radius: 12px; background: rgba(255,170,0,.08); border: 1px solid rgba(255,170,0,.22); color: var(--gold); }
.desktop-cart-loyalty > svg, .desktop-cart-loyalty > span svg { width: 21px; flex: none; }
.desktop-cart-loyalty > div { display: flex; flex-direction: column; color: var(--cream); }
.desktop-cart-loyalty strong { font-size: 11.5px; line-height: 1.3; }
.desktop-cart-loyalty small { color: var(--muted); font-size: 10px; }
.desktop-cart-total { display: flex; justify-content: space-between; margin-top: 15px; font-family: "Poppins"; }
.desktop-cart-cta, .desktop-cart-empty button { width: 100%; margin-top: 12px; padding: 13px; border-radius: 12px; background: var(--gold); color: #141414; font-weight: 800; }
.desktop-cart-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.desktop-cart-empty > span { color: var(--gold); }
.desktop-cart-empty svg { width: 34px; }
.desktop-cart-empty strong { margin-top: 8px; font-family: "Poppins"; }
.desktop-cart-empty small { color: var(--muted); font-size: 11.5px; }

@media (min-width: 900px) {
  .loyalty-promo { width: 100%; margin: 8px 0 14px; grid-template-columns: 48px minmax(0,1fr) auto; padding: 15px 18px; }
  .loyalty-promo-action { grid-column: 3; grid-row: 1; margin: 0; font-size: 13px; }
  .commerce-hero { min-height: 455px; margin: 0; border-radius: 16px; }
  .commerce-hero-copy { padding: 34px 38px; max-width: 660px; }
  .commerce-hero h1 { font-size: 46px; max-width: 78%; }
  .commerce-hero .hero-sub { max-width: 68%; font-size: 15px; }
  .commerce-hero .hero-ctas { max-width: 420px; }
  .commerce-hero .hcta { padding: 14px 16px; font-size: 14px; }
  .category-rail { display: none; }
  .account-section { max-width: 760px; }
}

@media (min-width: 1180px) {
  #app { max-width: 1440px; padding-right: 390px; }
  .desktop-cart {
    display: block; position: fixed; z-index: 25; top: 88px;
    right: max(32px, calc((100vw - 1440px) / 2 + 32px)); width: 330px; max-height: calc(100vh - 120px); overflow: auto;
    padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(24,24,24,.96); backdrop-filter: blur(18px); box-shadow: 0 24px 70px rgba(0,0,0,.38);
  }
  .cartbar { display: none !important; }
  .grid2 { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.banner .ico { display: flex; align-items: center; }

/* ---- 2026-07-17 panel-driven additions ---- */
.search-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: auto; border-radius: 50%; background: var(--card-2, rgba(255,255,255,.06)); border: 1px solid var(--line); color: var(--text, #F5EFE6); }
.search-btn svg { width: 17px; height: 17px; }
.header .loc-chip { margin-left: 8px; }
.confirm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 14px 4px; padding: 10px 14px; border-radius: 16px; background: rgba(255,170,0,.09); border: 1px solid rgba(255,170,0,.28); font-size: 13px; }
.confirm-bar .cb-actions { display: flex; gap: 8px; flex-shrink: 0; }
.confirm-bar .cb-yes { background: var(--gold); color: #141414; border: 0; border-radius: 12px; padding: 7px 14px; font-weight: 700; font-size: 12.5px; }
.confirm-bar .cb-change { background: none; border: 1px solid var(--line); color: inherit; border-radius: 12px; padding: 7px 12px; font-weight: 600; font-size: 12.5px; }
.addbtn.added { background: var(--good, #3f9d5f) !important; color: #fff !important; }
.addbtn.added svg { width: 14px; height: 14px; }
#cartbar.pulse { animation: cartpulse .5s ease; }
@keyframes cartpulse { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.facts-line { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.facts-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.45; }
.paynote { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--card-2, rgba(255,255,255,.05)); border: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--muted); }
.paynote b { color: var(--text, #F5EFE6); }
.promo-link { text-decoration: underline; text-underline-offset: 3px; font-size: 14.5px; }
.howit { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.howit .hi-row { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; }
.howit .ico { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255,170,0,.1); }
.howit .ico svg { width: 17px; height: 17px; }

/* ---------- Build-your-own hero (Sodas tab) ---------- */
.build-hero {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  border: 0; cursor: pointer; border-radius: var(--radius); padding: 16px 18px;
  background: linear-gradient(125deg, #FFC63D, var(--gold) 55%, var(--gold-deep));
  color: #141414; position: relative; overflow: hidden;
  box-shadow: 0 10px 26px rgba(255, 170, 0, .22);
}
.build-hero .bh-cup { width: 66px; height: 84px; flex: none; }
.build-hero .bh-cup img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.build-hero .bh-meta { display: flex; flex-direction: column; min-width: 0; }
.build-hero .bh-kick { font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
.build-hero .bh-title { font-family: "Poppins"; font-weight: 800; font-size: 21px; line-height: 1.08; margin: 2px 0 4px; }
.build-hero .bh-d { font-size: 12.5px; font-weight: 600; opacity: .82; }
.build-hero .bh-arrow { margin-left: auto; font-size: 22px; font-weight: 800; flex: none; opacity: .85; }

/* ====================================================================
   THE DROP REDESIGN (2026-09-01)
   Everything below re-expresses the storefront around one hero flavor,
   the week in one scroll, and a box drawer that fills as you add.
   ==================================================================== */

/* ---------- top bar ---------- */
.header {
  background: var(--ground);
  padding: 14px var(--gutter) 8px;
}
.header img.logo { height: 26px; }
[data-theme="mist"] .header img.logo { filter: invert(1) brightness(.2); }
.loc-chip {
  flex-direction: column; align-items: flex-start; gap: 1px;
  background: var(--card); border: 1px solid var(--line);
  padding: 6px 13px; font-size: 12px; font-weight: 600; color: var(--text);
  text-align: left; max-width: 58%;
}
.loc-chip .loc-name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.loc-chip .loc-status {
  font-family: var(--ui); font-weight: 700; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.loc-chip .dot { width: 6px; height: 6px; background: var(--good); flex: none; }
.search-btn { background: var(--card); border-color: var(--line); color: var(--text); }

/* Menu timing stays secondary to the featured cookie and ordering action. */
.menu-timing {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 16px var(--gutter) 0;
  font-family: var(--ui); font-size: 12px; line-height: 1.5;
}
.menu-timing-label { color: var(--secondary); }
.menu-timing-value {
  color: var(--text); font-weight: 500;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (min-width: 900px) {
  .menu-timing { justify-content: flex-start; gap: 12px; font-size: 13px; }
}

/* ---------- hero: full bleed, one row of price and CTA ---------- */
.commerce-hero {
  margin: 10px 0 0; border-radius: 0; border: 0; box-shadow: none;
  min-height: 340px; background: var(--photo-frame);
}
.commerce-hero-media img { object-position: center 38%; }
.commerce-hero-shade { background: var(--shade); }
.commerce-hero-copy { padding: 20px var(--gutter) 22px; }
.commerce-hero .kicker {
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.commerce-hero .featured-tag { display: none; }
.commerce-hero h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: 30px; line-height: .92; letter-spacing: .01em; font-weight: 500;
  color: #FFFFFF; max-width: 100%; margin-top: 10px; text-shadow: 0 2px 20px rgba(0,0,0,.7);
}
.commerce-hero .hero-sub {
  color: #D6D6D6; font-size: 12.5px; line-height: 1.35; margin-top: 8px; max-width: 100%;
  -webkit-line-clamp: 2;
}
.hero-buyrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.hero-buyrow .featured-price {
  margin: 0; flex: none;
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 22px; line-height: .92; letter-spacing: .01em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.hero-buyrow .hcta {
  flex: none; border-radius: 999px; padding: 13px 20px; border: 0; backdrop-filter: none;
  background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 359px) { .hero-buyrow .hcta { padding: 13px 14px; letter-spacing: .05em; } }

/* ---------- the week, as a grid ---------- */
.section { padding: 22px var(--gutter) 4px; }
.section-head { margin-bottom: 12px; align-items: center; }
.section-head h2 {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text);
}
.section-head .see {
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums;
}
.section .blurb { color: var(--muted); font-size: 12px; margin: -4px 0 12px; }

.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.menu-tile {
  position: relative; width: 100%; padding: 0; text-align: left; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row);
  display: flex; flex-direction: column; color: inherit; font: inherit; cursor: pointer;
}
.menu-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.menu-tile .ph { position: relative; aspect-ratio: 1 / 1; background: var(--photo-frame); overflow: hidden; }
.menu-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.menu-tile .meta { padding: 10px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.menu-tile .anchor-eyebrow {
  font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.menu-tile .name { font-family: var(--ui); font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--text); }
.menu-tile .price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.menu-tile .price { font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--secondary); font-variant-numeric: tabular-nums; }
.menu-tile.soldout .ph img { filter: grayscale(.9) brightness(.4); }
.menu-tile.soldout .name, .menu-tile.soldout .price { color: var(--faint); }
.menu-tile .soldout-mark {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 10px;
  font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: #FFFFFF; text-align: center;
  background: rgba(13,13,13,.55);
}
@media (min-width: 560px) { .menu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .menu-grid { grid-template-columns: repeat(5, 1fr); } }

/* the sodas rail keeps its horizontal scroll; it is the one allowed rail */
.soda-strip { gap: 10px; }
.soda-card { width: 132px; border-radius: var(--radius-row); background: var(--card); border-color: var(--line); }
.soda-card .name { font-family: var(--display); text-transform: uppercase; font-weight: 500; font-size: 11px; line-height: .96; letter-spacing: .01em; }
.soda-card .build { font-size: 11px; color: var(--muted); }
.soda-card .price { font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--secondary); font-variant-numeric: tabular-nums; }
.cup-img { background: var(--photo-frame); }

/* ---------- the box drawer ---------- */
.boxdrawer {
  position: fixed; left: 0; right: 0; bottom: calc(66px + var(--safe-b)); z-index: 34;
  background: var(--recessed); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; box-shadow: var(--drawer-shadow);
  padding: 8px var(--gutter) 12px;
  transform: translateY(0);
}
[data-theme="mist"] .boxdrawer { background: #FFFFFF; }
.boxdrawer.bump { animation: drawerbump .18s ease; }
@keyframes drawerbump { 50% { transform: translateY(-4px); } }
.boxdrawer.full { border-top-color: var(--gold); }
.drawer-handle {
  display: block; width: 100%; padding: 4px 0 8px; background: none;
}
.drawer-handle i { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 999px; background: var(--line-strong); }
.drawer-top { display: flex; align-items: center; gap: 12px; }
.drawer-slots { display: flex; gap: 6px; flex: none; }
.drawer-slot {
  width: 28px; height: 28px; border-radius: 12px; overflow: hidden;
  background: var(--ground); border: 1px dashed var(--line-strong);
}
[data-theme="mist"] .drawer-slot { background: var(--recessed); }
.drawer-slot.filled { border: 1px solid var(--gold); }
.drawer-slot img { width: 100%; height: 100%; object-fit: cover; }
.drawer-slot.cut { overflow: visible; background: none; border-color: transparent; }
.drawer-slot.cut img {
  object-fit: contain; transform: scale(1.08); border-radius: 0;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .42));
}
.drawer-slot.landing { animation: slotpop .2s ease; }
@keyframes slotpop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } }
.drawer-tier {
  margin-left: auto; text-align: right; min-width: 0;
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--secondary); font-variant-numeric: tabular-nums;
}
.drawer-tier em { font-style: normal; color: var(--gold); }
.drawer-bottom { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.drawer-total {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 16px; line-height: .92; letter-spacing: .01em; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.drawer-cta {
  margin-left: auto; flex: none; border-radius: 999px; padding: 13px 20px;
  background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; min-height: 44px;
}
.drawer-cta:active { transform: scale(.98); }
.drawer-cta[disabled] { background: var(--disabled); color: var(--faint); pointer-events: none; }

/* the add-to-box flier */
.fly-cookie {
  position: fixed; z-index: 55; border-radius: 12px; overflow: hidden; pointer-events: none;
  transition: transform .42s ease-in, opacity .42s ease-in;
}
.fly-cookie img { width: 100%; height: 100%; object-fit: cover; }
.fly-cookie.cut { border-radius: 0; }
.fly-cookie.cut img { object-fit: contain; filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .4)); }

/* the legacy cart pill is replaced by the drawer */
.cartbar { display: none !important; }

/* ---------- bottom nav ---------- */
.bottomnav { background: var(--ground); border-top: 1px solid var(--line); }
[data-theme="mist"] .bottomnav { background: #FFFFFF; }
.nav-btn { font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nav-btn.active { color: var(--gold); }
[data-theme="mist"] .nav-btn.active { color: #0D0D0D; }

/* ---------- sheets, shared chrome ---------- */
.sheet { background: var(--surface); border-radius: 16px 16px 0 0; transition: transform .26s var(--ease); }
.overlay { transition: opacity .26s var(--ease); }
.sheet .grab { background: var(--line-strong); }
.sheet-pad { padding: 10px var(--gutter) 6px; }
.sheet h3 {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 20px; line-height: .92; letter-spacing: .01em; color: var(--text);
}
.sheet .desc { color: var(--body); font-size: 13px; line-height: 1.35; }
.close-x { background: var(--card); border-color: var(--line); color: var(--text); }
.cta {
  border-radius: 999px; background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; min-height: 52px; padding: 15px 22px;
}
.cta.secondary { background: var(--card); color: var(--text); border: 1px solid var(--line); }
.cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.cta[disabled] { background: var(--disabled); color: var(--faint); opacity: 1; }
.cta > span:last-child { font-family: var(--display); font-size: 15px; line-height: .92; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.hint { color: var(--faint); font-size: 11.5px; margin: 8px var(--gutter) 0; }

/* ---------- box builder sheet ---------- */
.bb-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 4px;
}
.bb-head .bb-pack {
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text); font-variant-numeric: tabular-nums;
}
.bb-head .bb-save {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  color: var(--good); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bb-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.bb-chip {
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.bb-chip[disabled] { background: var(--disabled); color: var(--faint); }
.bb-row {
  display: flex; align-items: center; gap: 12px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row);
  margin-bottom: 10px;
}
.bb-row.picked { border: var(--sel-width) solid var(--sel-border); }
.bb-row.soldout .ph img { filter: grayscale(.9) brightness(.45); }
.bb-row.soldout .fname { color: var(--faint); }
.bb-row.soldout .bb-soldout-mark { font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bb-row.soldout .bb-add { opacity: .35; cursor: not-allowed; }
.bb-row .ph { width: 60px; height: 60px; flex: none; border-radius: var(--radius-slot); overflow: hidden; background: var(--photo-frame); }
.bb-row .ph img { width: 100%; height: 100%; object-fit: cover; }
.bb-row .bb-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bb-row .fname { font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--text); }
.bb-row .fsub { color: var(--muted); font-size: 12px; line-height: 1.35; }
.bb-row .fsub.inbox { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.bb-row .ctrl { margin-left: auto; flex: none; display: flex; align-items: center; gap: 0; }
.bb-stepper {
  display: flex; align-items: center; gap: 2px; border-radius: 999px;
  background: var(--ground); border: 1px solid var(--line);
}
[data-theme="mist"] .bb-stepper { background: var(--recessed); }
.bb-stepper button { width: 44px; height: 44px; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: var(--text); }
.bb-stepper button.plus { color: var(--gold); }
.bb-stepper .mini-num { font-family: var(--ui); font-weight: 700; font-size: 13px; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.bb-add {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font-size: 22px; font-weight: 700; line-height: 1;
}
.bb-add[disabled] { background: var(--disabled); color: var(--faint); }
.bb-tray {
  position: sticky; bottom: 0; z-index: 6; margin: 12px calc(var(--gutter) * -1) 0;
  padding: 12px var(--gutter) 8px;
  background: var(--recessed); border-top: 1px solid var(--line);
}
[data-theme="mist"] .bb-tray { background: #FFFFFF; }
.bb-tray .label {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums;
}
.bb-tray .label span:last-child { color: var(--muted); }
.slots { display: flex; gap: 8px; }
.slot {
  flex: 1; aspect-ratio: 1; min-width: 0; max-width: 56px; height: auto;
  border-radius: var(--radius-slot); border: 1px dashed var(--line-strong);
  background: var(--ground);
}
[data-theme="mist"] .slot { background: var(--recessed); }
.slot.filled { border: 1px solid var(--gold); border-style: solid; }

/* ---------- checkout ---------- */
.ck-card {
  background: var(--recessed); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-top: 14px;
}
[data-theme="mist"] .ck-card { background: #FFFFFF; }
.ck-store { font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--text); margin-top: 10px; }
.time-row { gap: 8px; margin-top: 10px; }
.time-pill {
  border-radius: var(--radius-slot); border: 1px solid var(--line); background: var(--ground);
  padding: 11px 14px; min-height: 44px;
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--secondary); font-variant-numeric: tabular-nums;
}
[data-theme="mist"] .time-pill { background: var(--recessed); }
.time-pill.sel { border: var(--sel-width) solid var(--sel-border); background: none; color: var(--text); }
.ck-segment {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--ground); border: 1px solid var(--line);
}
[data-theme="mist"] .ck-segment { background: var(--recessed); }
.ck-segment button {
  flex: 1; border-radius: 999px; padding: 9px 8px; min-height: 40px;
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.ck-segment button.sel { background: var(--gold); color: var(--on-gold); }
.ck-pay-row {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 13px 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row);
}
.ck-pay-row > span:first-child { width: 24px; color: var(--gold); flex: none; }
.ck-pay-row svg { width: 20px; }
.ck-pay-row strong { font-family: var(--ui); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.ck-pay-row .ck-change {
  margin-left: auto; flex: none; color: var(--gold);
  font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ck-promise { color: var(--faint); font-size: 11px; line-height: 1.45; text-align: center; margin: 10px var(--gutter) 0; }
.summary { margin-top: 14px; }
.sumrow { color: var(--secondary); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sumrow.total {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 17px; line-height: .92; letter-spacing: .01em; color: var(--text);
}
.sumrow .free { color: var(--good); }
.checkout-reward { border-color: var(--good); background: none; }
.checkout-reward strong { color: var(--good); font-family: var(--ui); font-size: 13.5px; }

/* ---------- location picker ---------- */
.sp-near {
  display: block; margin-top: 10px; color: var(--gold);
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  min-height: 44px;
}
.store-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row);
  padding: 13px 14px; margin-bottom: 10px;
}
.store-row.sel { border: var(--sel-width) solid var(--sel-border); }
.store-row .st-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.store-row .st-name { font-family: var(--ui); font-weight: 600; font-size: 15px; color: var(--text); }
.store-row .st-sub { color: var(--muted); font-size: 12px; line-height: 1.35; }
.store-row .st-status {
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--good); font-variant-numeric: tabular-nums;
}
.store-row .st-status.closed { color: var(--bad); }
.store-row .st-dist {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  color: var(--secondary); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.store-row .st-right { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.store-row .st-pick {
  border-radius: 999px; padding: 8px 13px; background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- rewards ---------- */
.rw-head {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 26px; line-height: .92; letter-spacing: .01em; color: var(--text);
}
.reward-hero { margin: 14px 0 0; background: var(--recessed); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
[data-theme="mist"] .reward-hero { background: #FFFFFF; }
.reward-hero .pts {
  font-family: var(--ui); font-weight: 700; font-size: 40px; line-height: 1;
  letter-spacing: .02em; color: var(--gold); font-variant-numeric: tabular-nums;
}
[data-theme="mist"] .reward-hero .pts { color: #0D0D0D; }
.reward-hero .d { color: var(--secondary); font-size: 13px; margin-top: 6px; }
.reward-bar { height: 8px; background: var(--line); margin-top: 14px; }
.reward-bar .fill { background: var(--gold); }
.rw-tier {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row);
}
.rw-tier.ready { border: var(--sel-width) solid var(--sel-border); }
.rw-tier .rw-name { font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--text); }
.rw-tier .rw-cost {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.rw-tier .rw-state {
  margin-left: auto; flex: none; border-radius: 999px; padding: 7px 12px;
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--disabled); color: var(--faint); white-space: nowrap;
}
.rw-tier.ready .rw-state { background: var(--gold); color: var(--on-gold); }
.rw-bar-track { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 8px; }
.rw-bar-track i { display: block; height: 100%; background: var(--gold); border-radius: 999px; }

/* ---------- mist toggle ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  border-radius: 999px; padding: 11px 16px; min-height: 44px;
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  font-family: var(--ui); font-weight: 700; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- mist photography keeps its black frame ---------- */
[data-theme="mist"] .commerce-hero,
[data-theme="mist"] .menu-tile .ph,
[data-theme="mist"] .bb-row .ph,
[data-theme="mist"] .cup-img,
[data-theme="mist"] .pack-card .ph,
[data-theme="mist"] .cart-item .ph { background: #000; }
[data-theme="mist"] .commerce-hero h1,
[data-theme="mist"] .commerce-hero .hero-sub { color: #FFFFFF; }
[data-theme="mist"] .hero-buyrow .hcta,
[data-theme="mist"] .drawer-cta,
[data-theme="mist"] .cta:not(.secondary),
[data-theme="mist"] .bb-chip,
[data-theme="mist"] .store-row .st-pick,
[data-theme="mist"] .ck-segment button.sel,
[data-theme="mist"] .rw-tier.ready .rw-state { background: #0D0D0D; color: #FFAA00; }
[data-theme="mist"] .bb-add { background: #0D0D0D; color: #FFAA00; }
[data-theme="mist"] .drawer-slot.filled,
[data-theme="mist"] .slot.filled { border-color: #0D0D0D; }

/* ---------- desktop: the drawer becomes a bottom bar ---------- */
@media (min-width: 900px) {
  :root { --gutter: 40px; }
  #app { padding: 0 var(--gutter) 150px; }
  .header { padding: 18px 0 12px; }
  .drop-line { margin: 2px 0 0; }
  .commerce-hero { margin: 14px calc(var(--gutter) * -1) 0; min-height: 420px; }
  .commerce-hero-copy { padding: 34px var(--gutter) 34px; max-width: 720px; }
  .commerce-hero h1 { font-size: 56px; }
  .commerce-hero .hero-sub { font-size: 15px; max-width: 460px; }
  .hero-buyrow { justify-content: flex-start; gap: 20px; max-width: 460px; }
  .hero-buyrow .featured-price { font-size: 26px; }
  .section { padding: 30px 0 4px; }
  .boxdrawer {
    bottom: 0; left: 0; right: 0; padding: 10px var(--gutter) 18px;
    border-radius: 16px 16px 0 0;
  }
  .boxdrawer .drawer-inner { max-width: 1160px; margin: 0 auto; }
  .drawer-handle { display: none; }
  .drawer-slot { width: 34px; height: 34px; }
  .drawer-total { font-size: 20px; }
  .menu-tile:hover { border-color: var(--gold); }
}
@media (min-width: 1180px) {
  #app { padding-right: var(--gutter); max-width: 1240px; }
  .desktop-cart { display: none !important; }
}

/* Checkout order lines */
.ck-lines { display: grid; gap: 8px; margin-top: 12px; }
.ck-lines .bb-row { cursor: default; }
.ck-change { font-family: var(--ui); font-size: 12px; font-weight: 600; color: var(--cyan); background: none; border: 0; padding: 0 4px; cursor: pointer; }

/* ---------------- Soda restyle (drop tokens) ---------------- */
.soda-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0 0 12px; overflow: hidden; text-align: left; transition: border-color .18s var(--ease);
}
.soda-card:active { border-color: var(--line-strong); }
.soda-card .cup-img { background: var(--recessed); border-radius: 0; aspect-ratio: 1 / 1; position: relative; }
.soda-card .cup-img img { width: 100%; height: 100%; object-fit: cover; }
.soda-card .meta { padding: 10px 12px 0; }
.soda-card .meta .name {
  font-family: var(--display); font-size: 13px; line-height: 1.06; letter-spacing: .01em;
  text-transform: uppercase; color: var(--text);
}
.soda-card .meta .build { font-family: var(--ui); font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.soda-card .meta .price { font-family: var(--ui); font-weight: 600; font-size: 12.5px; color: var(--gold); margin-top: 6px; font-variant-numeric: tabular-nums; }
.soda-card.soldout { opacity: .55; }
.soda-card .so-badge {
  position: absolute; left: 8px; top: 8px; background: var(--ground); color: var(--body);
  font-family: var(--ui); font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 7px; border-radius: 999px;
}
.build-hero {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
}
.build-hero .bh-cup { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; background: var(--recessed); flex: none; }
.build-hero .bh-cup img { width: 100%; height: 100%; object-fit: cover; }
.build-hero .bh-kick { font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); display: block; }
.build-hero .bh-title { font-family: var(--display); font-size: 15px; text-transform: uppercase; color: var(--text); display: block; margin-top: 4px; line-height: 1.05; }
.build-hero .bh-d { font-family: var(--ui); font-size: 12px; color: var(--muted); display: block; margin-top: 5px; }
.build-hero .bh-arrow { margin-left: auto; color: var(--gold); font-size: 18px; }
.size-pills { display: flex; gap: 8px; margin-top: 10px; }
.size-pill {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 8px; text-align: center; font-family: var(--ui); color: var(--body);
}
.size-pill .s { font-size: 12px; font-weight: 600; color: var(--text); }
.size-pill .p { font-size: 12px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.size-pill .tag2 { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.size-pill.sel { border: var(--sel-width) solid var(--sel-border); background: var(--card-2); }
.sheet-pad h3 { font-family: var(--display); font-size: 20px; text-transform: uppercase; line-height: 1.04; letter-spacing: .01em; color: var(--text); }
.sheet-pad .desc { font-family: var(--ui); font-size: 13px; color: var(--body); margin-top: 8px; line-height: 1.5; }
.step-label { font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

/* ====================================================================
   FIX ROUND 1 (2026-09-01). Blind-panel repairs: desktop composition for
   the two commerce boards, a scroll seam on phone, the empty drawer, the
   hero crop, and the mist leftovers.
   ==================================================================== */
:root { --surface-fade: rgba(20,20,20,0); }
[data-theme="mist"] { --surface-fade: rgba(255,255,255,0); }

/* ---------- F6: the status line gets its own row ---------- */
.commerce-hero .hero-status { margin-top: 6px; }
.commerce-hero .live-pill {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 5px 10px; background: rgba(13,13,13,.8);
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #FFFFFF; text-decoration: none;
}
.commerce-hero h1 { margin-top: 10px; }

/* ---------- F4: the drawer holds its ground while the box is empty ---------- */
.boxdrawer.empty { box-shadow: none; border-top-color: var(--line); }
.drawer-empty-inner { min-height: 56px; display: flex; align-items: center; }
.drawer-empty-copy { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--secondary); }

/* ---------- F7: one control per row, one meaning per outline ---------- */
.bb-row { border-width: 1px; }
.bb-row.picked { border: 1px solid var(--gold); }
[data-theme="mist"] .bb-row.picked { border-color: #0D0D0D; }

/* ---------- F8: mist leftovers ---------- */
.confirm-bar {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-row); color: var(--text);
}
.f-input, .promo-row input, .promo-row button, .loyalty-box input { border-radius: var(--radius-row); }
[data-theme="mist"] .howit .ico,
[data-theme="mist"] .loyalty-promo .loyalty-promo-icon,
[data-theme="mist"] .account-row-icon,
[data-theme="mist"] .desktop-cart-loyalty { background: #0D0D0D; color: #FFAA00; }
[data-theme="mist"] .howit .ico svg,
[data-theme="mist"] .account-row-icon svg { color: #FFAA00; }
[data-theme="mist"] .icon-gold svg { color: inherit; }

/* ---------- F2: the sticky footer says there is more below it ---------- */
.board-side {
  position: sticky; bottom: 0; z-index: 8;
  margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px;
  background: var(--surface); border-top: 1px solid var(--line);
}
.board-side .side-fade {
  position: absolute; left: 0; right: 0; top: -24px; height: 24px; pointer-events: none;
  background: linear-gradient(to top, var(--surface), var(--surface-fade));
  transition: opacity .18s var(--ease);
}
.board-side.atend .side-fade { opacity: 0; }
.board-side .cta { width: 100%; margin: 8px 0 0; }
.bb-side .bb-tray { position: static; margin: 0; padding: 12px 0 2px; background: none; border-top: 0; }
.ck-side .ck-promise { margin: 8px 0 0; }
.ck-fields { padding-bottom: 4px; }

/* ---------- F1: the desktop board ---------- */
@media (min-width: 900px) {
  .sheet.sheet-board {
    width: min(1120px, 94vw); max-height: 86vh; max-height: 86dvh;
    display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
  }
  .sheet-board .sheet-pad { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 20px; }
  .sheet-board .board-side {
    position: static; margin: 0; padding: 0; border-top: 0; background: none; align-self: start;
  }
  .sheet-board .side-fade { display: none; }

  .bb-board {
    flex: 1; min-height: 0; margin-top: 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 28px;
  }
  .bb-board > #bb-body { min-height: 0; overflow: auto; padding-right: 10px; }
  .bb-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bb-rows .bb-row { margin-bottom: 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .bb-rows .bb-row .ph { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-slot); }
  .bb-rows .bb-row .bb-meta { flex: 1; }
  .bb-rows .bb-row .ctrl { margin-left: 0; align-self: flex-end; }
  .bb-side { position: sticky; top: 0; }
  .bb-side .bb-tray {
    background: var(--recessed); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px;
  }
  [data-theme="mist"] .bb-side .bb-tray { background: #FFFFFF; }

  .ck-board {
    flex: 1; min-height: 0; margin-top: 12px;
    display: grid; grid-template-columns: minmax(0, 1fr) 356px;
    grid-template-rows: auto auto 1fr; gap: 0 28px;
  }
  .ck-form { display: contents; }
  .ck-fields { grid-column: 1; grid-row: 1 / -1; min-height: 0; overflow: auto; padding-right: 10px; }
  .ck-fulfil { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ck-lines { grid-column: 2; grid-row: 2; }
  .ck-side { grid-column: 2; grid-row: 3; }
}
@media (min-width: 1200px) {
  .sheet.sheet-board { width: min(1240px, 94vw); }
  .bb-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- F5: the desktop hero is composed, not centered ---------- */
@media (min-width: 1200px) {
  .commerce-hero-media img { object-position: 72% 42%; }
  .commerce-hero-shade {
    background:
      linear-gradient(90deg, rgba(13,13,13,.96) 0%, rgba(13,13,13,.88) 26%, rgba(13,13,13,.42) 50%, rgba(13,13,13,.06) 72%, rgba(13,13,13,0) 84%),
      linear-gradient(180deg, rgba(13,13,13,0) 52%, rgba(13,13,13,.82) 96%);
  }
  .commerce-hero-copy { max-width: 620px; }
  .commerce-hero .hero-sub { max-width: 420px; }
}

/* Rewards occupies the content column without location-specific campaign art. */
.rw-board, .rw-main { min-width: 0; }
.rw-board { width: 100%; }
.rw-entry { max-width: 560px; padding: 12px 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.rw-entry .f-label { display: block; margin: 0 0 12px; line-height: 1.5; }
.rw-auth-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: 100%; }
.rw-auth-row input { min-width: 0; width: 100%; min-height: 52px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; font: 400 16px/1.5 var(--ui); background: var(--card); color: var(--text); }
.rw-auth-row button { min-width: 112px; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 12px; background: var(--gold); color: var(--on-gold); font: 700 14px/1.5 var(--ui); white-space: nowrap; }
.rw-auth-row input:focus-visible, .rw-auth-row button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 599px) {
  .rw-auth-row { grid-template-columns: minmax(0, 1fr); }
  .rw-auth-row button { width: 100%; }
}

/* ================= Round 2: elevation ================= */

/* ---------- E6: the ground, the card, and the hairline step apart ---------- */
:root { --card: #161616; --line: #2A2A2A; }

/* ---------- E6: one intermediate step, Poppins 600 at 18px ---------- */
.section-head h2, .subhead {
  font-family: var(--ui); font-weight: 600; font-size: 18px; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
}
.section-head h2 { color: var(--text); }
.sheet .desc.subhead { color: var(--secondary); font-size: 18px; margin-top: 8px; }

/* ---------- E3: the grid clears the fold on the phone ---------- */
@media (max-width: 899px) {
  .commerce-hero { min-height: 44vh; max-height: 44vh; margin-top: 6px; }
  .commerce-hero-copy { padding: 14px var(--gutter) 15px; }
  .commerce-hero h1 { font-size: 27px; margin-top: 8px; }
  .commerce-hero .hero-sub { margin-top: 6px; font-size: 12px; }
  .commerce-hero .hero-buyrow { margin-top: 11px; }
  #app > .section:first-of-type, .commerce-hero + .section { padding-top: 16px; }
  .section-head { margin-bottom: 10px; }
}

/* ---------- E2: the box is the hero of the builder ---------- */
.bb-tray { display: grid; gap: 12px; }
.bb-sizes {
  display: flex; gap: 6px; padding: 4px; border-radius: 999px;
  background: var(--ground); border: 1px solid var(--line);
}
[data-theme="mist"] .bb-sizes { background: var(--recessed); }
.bb-size {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 999px; padding: 8px 6px; min-height: 46px; color: var(--muted);
}
.bb-size .n {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 16px; line-height: .92; letter-spacing: .01em;
}
.bb-size .p {
  font-family: var(--ui); font-weight: 700; font-size: 10px; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.bb-size.sel { background: var(--gold); color: var(--on-gold); }
[data-theme="mist"] .bb-size.sel { background: #0D0D0D; color: #FFAA00; }

.bb-box {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius); background: var(--photo-frame);
}
.bb-box-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-box-inner {
  position: absolute; left: 7%; right: 7%; top: 11%; bottom: 12%;
  border-radius: 4px; background: #F2F2F0; padding: 2.5%;
}
.bb-box .slots {
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 4%; width: 100%; height: 100%; flex-wrap: nowrap;
}
.bb-box .slot {
  position: relative; width: 100%; height: 100%; max-width: none; aspect-ratio: 1;
  border-radius: 50%; border: 1.5px dashed var(--gold); background: rgba(13,13,13,.04);
  overflow: visible;
}
.bb-box .slot.filled { border: 1px solid rgba(13,13,13,.14); background: none; }
.bb-box .slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bb-box .slot.drop { animation: slotdrop .18s var(--ease); }
.bb-box .slot.drop::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--gold); animation: slotring .06s ease-out forwards;
}
@keyframes slotdrop { from { transform: scale(1.15); } to { transform: scale(1); } }
@keyframes slotring { from { opacity: 1; } to { opacity: 0; } }

.bb-tray-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bb-tier {
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); font-variant-numeric: tabular-nums;
}
.bb-tray-price {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 18px; line-height: .92; letter-spacing: .01em; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* the grid rhythm: 32 tray to grid, 20 between cards, 16 inside one */
.bb-rows { display: grid; gap: 20px; }
.bb-rows .bb-row { margin-bottom: 0; padding: 16px; }

@media (max-width: 899px) {
  .bb-tray-mount {
    position: sticky; top: 0; z-index: 7; margin: 0 0 32px;
    padding: 8px 0 10px; background: var(--surface);
  }
  .bb-tray-mount.compact { margin-bottom: 20px; padding: 6px 0; }
  .bb-tray-mount.compact .bb-tray {
    height: 72px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px;
  }
  .bb-tray-mount.compact .bb-sizes { display: none; }
  .bb-tray-mount.compact .bb-box { aspect-ratio: auto; height: 46px; background: none; border: 0; border-radius: 0; }
  .bb-tray-mount.compact .bb-box-inner { padding: 0; }
  .bb-tray-mount.compact .bb-box-art { display: none; }
  .bb-tray-mount.compact .bb-box-inner {
    position: static; background: none; padding: 0; height: 46px;
  }
  .bb-tray-mount.compact .bb-box .slot { max-width: 34px; }
  .bb-tray-mount.compact .bb-tray-line { flex-direction: column; align-items: flex-end; gap: 2px; }
}

/* ---------- E2 + E7: the desktop board puts the tray in the right column ---------- */
@media (min-width: 900px) {
  .bb-board { grid-template-rows: auto 1fr; }
  .bb-tray-mount { grid-column: 2; grid-row: 1; position: sticky; top: 0; }
  .bb-board > #bb-body { grid-column: 1; grid-row: 1 / -1; }
  .bb-side { grid-column: 2; grid-row: 2; position: static; align-self: start; }
  .bb-rows { gap: 20px; }

  .ck-board { grid-template-rows: auto 1fr; }
  .ck-fulfil { grid-column: 1; grid-row: 1; margin-top: 0; }
  .ck-fields { grid-column: 1; grid-row: 2 / -1; }
  .ck-lines { grid-column: 2; grid-row: 1; margin-top: 0; }
  .ck-side { grid-column: 2; grid-row: 2; }
}

/* ---------- E1 + E7: the summary sits with the action ---------- */
.ck-side .summary { margin-top: 0; margin-bottom: 6px; }
.ck-lines .bb-row .fsub { white-space: normal; }

/* ---------- E7: a modal owns the screen ---------- */
body.sheet-open .boxdrawer { display: none !important; }

/* ---------- E4: rewards opens on the ladder ---------- */
.rw-ladder { margin: 4px 0 20px; }
.rw-ladder-lead {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 18px; line-height: .92; letter-spacing: .01em; color: var(--text);
}
.rw-track {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  margin: 58px 42px 8px;
}
.rw-track-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--gold); }
.rw-stop {
  position: absolute; bottom: 0; transform: translateX(-50%);
  width: 84px; height: 46px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 1px; text-align: center;
}
.rw-stop b {
  font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--secondary);
  font-variant-numeric: tabular-nums;
}
.rw-stop > span { font-family: var(--ui); font-weight: 600; font-size: 10.5px; line-height: 1.2; color: var(--faint); }
.rw-stop::after {
  content: ""; width: 12px; height: 12px; border-radius: 50%; margin-bottom: -11px;
  background: var(--recessed); border: 1px solid var(--line-strong); z-index: 1;
}
.rw-stop.on b, .rw-stop.on > span { color: var(--gold); }
.rw-stop.on::after { background: var(--gold); border-color: var(--gold); }
[data-theme="mist"] .rw-stop.on b, [data-theme="mist"] .rw-stop.on > span { color: #0D0D0D; }
[data-theme="mist"] .rw-stop.on::after { background: #0D0D0D; border-color: #0D0D0D; }
.rw-lead { color: var(--text); font-size: 15px; font-weight: 600; }

/* ---------- E5: the row is the control, one confirm bar closes it ---------- */
.store-row .st-name { display: flex; align-items: center; gap: 8px; }
.st-near {
  border-radius: 999px; padding: 3px 8px; background: var(--gold); color: var(--on-gold);
  font-family: var(--ui); font-weight: 700; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
}
[data-theme="mist"] .st-near { background: #0D0D0D; color: #FFAA00; }
.store-row .st-dist { margin-left: auto; flex: none; }
.sp-side { padding-top: 4px; }

/* ---------- E8: one motion language ---------- */
.sheet { transition: transform .22s var(--ease); }
.overlay { transition: opacity .22s var(--ease); }
.boxdrawer.slidein { animation: drawerslide .22s var(--ease); }
@keyframes drawerslide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.drawer-tier.tick { animation: tiertick .22s var(--ease); }
@keyframes tiertick { from { transform: translateY(4px); opacity: .25; } to { transform: translateY(0); opacity: 1; } }
.drawer-slot { position: relative; }
.drawer-slot.drop { animation: slotdrop .18s var(--ease); }
.drawer-slot.drop::after {
  content: ""; position: absolute; inset: -3px; border-radius: 12px;
  border: 2px solid var(--gold); animation: slotring .06s ease-out forwards;
}

/* ================= Round 3 ================= */

/* ---------- R4: one radius, one button system ----------
   Pills carry every button. 16px is the card and input radius, 12px the chip
   and tag radius. Nothing else remains in this file except the 50% circles,
   the two illustration primitives inside the drawn cup, and the confetti. */
.cta, .hcta, .drawer-cta, .desktop-cart-cta, .bb-chip, .bb-add, .bb-stepper,
.mini-btn, .time-pill, .chip, .size-pill, .promo-link, .cedit, .ck-change,
.account-reorder, .bb-size, .bb-sizes, #sp-confirm {
  border-radius: 999px;
}
/* Primary: gold fill, ink text. */
.cta, .drawer-cta, .desktop-cart-cta, .hcta.gold {
  background: var(--gold); color: var(--on-gold); border: 0;
}
/* Secondary: the ground, a hairline, and the text colour. */
.bb-chip, .time-pill, .chip, .size-pill, .hcta:not(.gold), .ck-change, .cedit {
  background: var(--ground); border: 1px solid var(--line); color: var(--text);
}
[data-theme="mist"] .bb-chip, [data-theme="mist"] .time-pill,
[data-theme="mist"] .chip, [data-theme="mist"] .size-pill,
[data-theme="mist"] .ck-change, [data-theme="mist"] .cedit {
  background: var(--card); color: var(--text);
}
/* Tertiary: text only. */
.promo-link { background: none; border: 0; color: var(--muted); }
/* The third fill goes: the reorder row is a secondary button like any other. */
.account-reorder { background: var(--ground); border: 1px solid var(--line); }
/* The slot count is a label on the tier line, never a disabled pill. */
#bb-cta:disabled { opacity: .45; }

/* ---------- R1: rewards opens on the rewards ---------- */
.rw-hero { padding-bottom: 0; }
.rw-section { padding-top: 10px; }
.rw-cards { display: grid; gap: 12px; margin: 2px 0 22px; }
.rw-card {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center;
  gap: 16px; padding: 14px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
.rw-card.ready { border-color: var(--gold); }
.rw-card-art {
  width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--photo-frame);
}
.rw-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rw-card-copy { min-width: 0; }
.rw-card-pts {
  font-family: var(--display); text-transform: uppercase; font-weight: 500;
  font-size: 30px; line-height: .92; letter-spacing: .01em; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
[data-theme="mist"] .rw-card-pts { color: #0D0D0D; }
.rw-card-pts span {
  display: inline-block; margin-left: 7px; font-family: var(--ui);
  font-weight: 700; font-size: 10px; letter-spacing: .12em; color: var(--muted);
}
.rw-card-name {
  margin-top: 7px; font-family: var(--ui); font-weight: 600; font-size: 18px;
  line-height: 1.25; color: var(--text);
}
.rw-lead { margin-top: 4px; }

@media (min-width: 900px) {
  /* Three across the 560px column, art over the number. */
  .rw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
  .rw-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; }
  .rw-card-art { width: 100%; height: auto; aspect-ratio: 1; }
}

/* ---------- R3: the tab bar is the only persistent phone chrome ---------- */
@media (max-width: 899px) {
  .boxdrawer.empty { display: none !important; }
}

/* ---------- R6: the tray is a flat night card until the box art lands ----------
   Hook: restore `.bb-box-art` by setting TRAY_GROUND in app.js, then drop the
   two `background` lines below so the photograph shows through again. */
.bb-box {
  position: relative; aspect-ratio: auto; overflow: visible;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
[data-theme="mist"] .bb-box { background: var(--card); }
.bb-box-inner {
  position: static; background: none; border-radius: 0; padding: 16px; height: auto;
}
.bb-box .slots {
  gap: 12px; height: auto; justify-items: center; align-content: center;
}
.bb-box .slot { width: 100%; max-width: 76px; height: auto; }
.bb-box .slot { border-color: var(--gold); background: none; }
.bb-box .slot.filled { border: 1px solid var(--line); background: none; }
[data-theme="mist"] .bb-box .slot.filled { border-color: rgba(13,13,13,.14); }

/* ---------- R7: the first card row clears the desktop fold ---------- */
@media (min-width: 900px) {
  .commerce-hero { min-height: 380px; max-height: 380px; margin-top: 10px; }
  .commerce-hero-copy { padding: 26px var(--gutter) 26px; }
  .commerce-hero h1 { font-size: 46px; }
  #app > .section:first-of-type, .commerce-hero + .section { padding-top: 20px; }
  .section-head { margin-bottom: 12px; }
}

/* ---------- R4: mist keeps its own card and hairline ----------
   The round 2 contrast step set `--card` and `--line` on a bare `:root` after
   the mist block, so the light colorway inherited the night card. Mist gets
   its pair back at the same step. */
[data-theme="mist"] { --card: #FFFFFF; --line: #B7C2C0; }

/* ================= Round 4 ================= */

/* ---------- T1: the tray ground is the real box plate ----------
   Both plates are square, so the image fills the square frame exactly and the
   slot grid can sit on measured percentages of that same frame. */
.bb-box {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: none; border: 0; border-radius: 0;
}
[data-theme="mist"] .bb-box { background: none; }
.bb-box-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
.bb-box-inner {
  position: absolute; left: var(--in-l, 22%); right: var(--in-r, 22%);
  top: var(--in-t, 36%); bottom: var(--in-b, 27%);
  background: none; border-radius: 0; padding: 0; height: auto;
}
.bb-box .slots {
  display: grid; height: 100%; width: 100%;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  grid-template-rows: repeat(var(--rows, 2), 1fr);
  gap: 0; place-items: center;
}
/* The slot is the whole grid cell; the cookie inside it is what carries the
   size, so neighbours can overlap without the cells overlapping. */
.bb-box .slot {
  position: relative; width: 100%; height: 100%;
  max-width: none; aspect-ratio: auto;
  border: 0; border-radius: 50%; background: none; overflow: visible;
}
/* An empty slot is a faint disc, no ring. */
/* The plate interior is white in both colorways, so the faint disc is 8% ink
   rather than 8% white, which would be invisible on the plate. */
.bb-box .slot:not(.filled) { transform: none; background: none; }
.bb-box .slot:not(.filled)::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: calc(var(--cut-w, 107%) * .9); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(13, 13, 13, .08);
}
.bb-box .slot.filled { border: 0; background: none; }
[data-theme="mist"] .bb-box .slot:not(.filled)::before { background: rgba(13, 13, 13, .08); }
[data-theme="mist"] .bb-box .slot.filled { border: 0; }

/* ---------- T2: a filled slot draws the cutout ----------
   `--cut-w` is the drawn file width as a share of the cell width, fixed at
   107%, which puts the 900px cookie at about 96% of the cell (Trent 2026-09-01:
   nearly edge to edge, a slight gap). Every cutout is a 1000x1000 file holding a 900px cookie, so that one
   number lands every flavor at the same diameter with no per file factor. */
.bb-box .slot img {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: var(--cut-w, 100%); height: auto; aspect-ratio: 1; max-width: none;
  margin: 0; object-fit: cover; border-radius: 50%;
}
.bb-box .slot.cut img {
  width: var(--cut-w, 107%);
  object-fit: contain; border-radius: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.bb-box .slot.cut.drop::after { display: none; }
.bb-box .slot.cut.drop { animation: none; }
.bb-box .slot.cut.drop img { animation: slotdropc .18s var(--ease); }
@keyframes slotdropc {
  from { transform: translate(-50%, -50%) scale(1.15); }
  to { transform: translate(-50%, -50%) scale(1); }
}

/* ---------- T3: the count is a line of its own ---------- */
.bb-count {
  font-family: var(--ui); font-weight: 600; font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bb-count.full {
  align-self: start; justify-self: start; padding: 5px 13px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); font-weight: 700;
}
.bb-tier { color: var(--secondary); letter-spacing: .08em; }

/* ---------- T4: the far half of the roster collapses ---------- */
.store-more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; margin-bottom: 10px; padding: 13px 14px;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: var(--radius-row); color: var(--text);
  font-family: var(--ui); font-weight: 600; font-size: 14px;
}
[data-theme="mist"] .store-more { background: var(--card); }

/* ---------- T5: checkout contrast ---------- */
.f-input { border-color: #3A3A3A; }
.f-input::placeholder { color: #8C8C8C; }
.f-input:focus { border-color: var(--gold); }
[data-theme="mist"] .f-input { border-color: var(--line); }
[data-theme="mist"] .f-input::placeholder { color: #5C6664; }
/* The chosen pickup time reads as the chosen one. */
.time-pill.sel {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700;
}
[data-theme="mist"] .time-pill.sel { background: #0D0D0D; border-color: #0D0D0D; color: #FFAA00; }

/* ---------- T5: the desktop checkout sheet owns the screen ---------- */
@media (min-width: 900px) {
  .overlay:has(+ .sheet.sheet-checkout) {
    background: rgba(13, 13, 13, .82);
    backdrop-filter: blur(18px) brightness(.2);
  }
}

/* ---------- T1: the compact phone tray keeps its bar shape ----------
   The round 4 plate rules sit after the compact block, so the compact
   overrides are restated here at the same specificity. */
@media (max-width: 899px) {
  .bb-tray-mount.compact .bb-box { aspect-ratio: auto; height: 46px; overflow: visible; }
  .bb-tray-mount.compact .bb-box-art { display: none; }
  .bb-tray-mount.compact .bb-count { display: none; }
  .bb-tray-mount.compact .bb-box-inner {
    position: static; left: auto; right: auto; top: auto; bottom: auto;
    height: 46px; padding: 0;
  }
  .bb-tray-mount.compact .bb-box .slots {
    grid-template-rows: 1fr; gap: 8px; place-items: center start;
  }
  .bb-tray-mount.compact .bb-box { --cut-w: 100%; }
  .bb-tray-mount.compact .bb-box .slot {
    width: 100%; height: auto; max-width: 34px; aspect-ratio: 1;
  }
  .bb-tray-mount.compact .bb-box .slot.cut img { filter: none; }
}

/* ================= Round 5 ================= */

/* ---------- D1: the box drawer belongs to the two building tabs ----------
   On the phone the filled drawer was floating over Rewards and over the Send
   code row. It now shows on This Week and on Boxes only; the tab bar is
   untouched everywhere, and each of those two tabs pads its scroll so no
   content ever sits under the drawer. `body.sheet-open` already hides it
   inside a sheet or modal. */
@media (max-width: 899px) {
  /* R7 (2026-10-14): the filled slot drawer stays a This Week element; the
     other tabs show only its compact total and Review order row (below). */
  body[data-view="home"]:not(.box-empty) #app,
  body[data-view="boxes"]:not(.box-empty) #app {
    padding-bottom: calc(212px + var(--safe-b));
  }
  body.box-empty #app,
  body:not([data-view="home"]):not([data-view="boxes"]) #app {
    padding-bottom: calc(96px + var(--safe-b));
  }
}

/* ---------- D2: the sheet owns the screen ----------
   Behind the sheet the ground is opaque; above it a 60% scrim, dimmed and
   blurred so the lit hero photo never reads as an edge over the sheet head. */
.overlay {
  background: rgba(13, 13, 13, .6);
  backdrop-filter: blur(16px) brightness(.22) saturate(0);
}
[data-theme="mist"] .overlay {
  background: rgba(233, 236, 241, .6);
  backdrop-filter: blur(16px) brightness(1.45) saturate(0);
}
.sheet { background: #0D0D0D; }
[data-theme="mist"] .sheet { background: #E9ECF1; }
/* D2: the Nearest mark keeps 8px of clear space off the card edge. */
.store-row .st-name .st-near { margin-right: 8px; }

/* ---------- D3: checkout inputs are visible on night ----------
   Mist is unchanged; these are night only. */
html:not([data-theme="mist"]) .f-input,
html:not([data-theme="mist"]) .promo-row input,
html:not([data-theme="mist"]) .loyalty-box input {
  border: 1.5px solid #4A4A4A; background: #161616; color: var(--cream);
}
html:not([data-theme="mist"]) .f-input::placeholder,
html:not([data-theme="mist"]) .promo-row input::placeholder,
html:not([data-theme="mist"]) .loyalty-box input::placeholder { color: #9A9A9A; }
html:not([data-theme="mist"]) .f-input:focus,
html:not([data-theme="mist"]) .promo-row input:focus,
html:not([data-theme="mist"]) .loyalty-box input:focus { border-color: var(--gold); }
html:not([data-theme="mist"]) .f-label { color: #D6D6D6; }

/* ---------- D4: the countdown row clears the headline ----------
   Both urgency devices stay, but only one of them is loud. */
.commerce-hero .live-pill {
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}
.commerce-hero h1 { margin-top: 16px; }
@media (min-width: 900px) {
  .commerce-hero h1 { margin-top: 20px; }
}

/* ---------- D5: the size control carries its number ---------- */
.bb-size .n {
  font-family: var(--display); font-weight: 500; font-size: 22px;
  line-height: .92; letter-spacing: .01em; text-transform: uppercase;
}
.bb-size .p {
  font-family: var(--ui); font-weight: 600; font-size: 12px; letter-spacing: .04em;
  opacity: .7;
}
.bb-size.sel .p { opacity: 1; }
.bb-size { min-height: 58px; }

/* D5: the disabled button says what is still missing. */
.bb-ctarow { display: flex; align-items: center; gap: 12px; }
.bb-ctarow .cta { flex: 1; }
.bb-hint {
  flex: none; font-family: var(--ui); font-weight: 600; font-size: 13px;
  color: var(--muted); white-space: nowrap;
}
.bb-hint:empty { display: none; }

/* ---------- F7: density pass (Trent 2026-09-02, "so crowded and big") ----------
   Type steps down one notch across the board and the tiles give the photo
   less of the card. Breakpoint overrides below repeat the same ratio so the
   desktop hero and rewards shrink with the phone. */
.commerce-hero h1 { font-size: 24px; margin-top: 8px; }
.commerce-hero .hero-sub { font-size: 12px; margin-top: 6px; }
.hero-buyrow { margin-top: 10px; }
.hero-buyrow .featured-price { font-size: 18px; }
.section-head h2, .subhead { font-size: 15px; }
.sheet .desc.subhead { font-size: 15px; }
.menu-grid { gap: 8px; }
.menu-tile .ph { aspect-ratio: 5 / 4; }
.menu-tile .meta { padding: 8px 9px 9px; gap: 2px; }
.menu-tile .name { font-size: 12.5px; }
.menu-tile .price-row { padding-top: 6px; }
.menu-tile .price { font-size: 11px; }
.pack-card .name { font-size: 14.5px; }
.pack-card .blurb2 { font-size: 12.5px; }
.pack-card .ph { width: 80px; height: 80px; }
.rw-head { font-size: 22px; }
.reward-hero { padding: 14px; }
.reward-hero .pts { font-size: 30px; }
.rw-card { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px; }
.rw-card-art { width: 76px; height: 76px; }
.rw-card-pts { font-size: 22px; }
.rw-card-name { font-size: 14px; margin-top: 5px; }
.rw-tier .rw-name { font-size: 13px; }
@media (min-width: 900px) {
  .commerce-hero h1 { font-size: 36px; }
  .commerce-hero .hero-sub { font-size: 13px; }
  .hero-buyrow .featured-price { font-size: 22px; }
  .rw-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .rw-card-art { width: 100%; height: auto; }
  .rw-card-pts { font-size: 24px; }
}
@media (min-width: 1200px) {
  .commerce-hero h1 { font-size: 42px; }
}
@media (max-width: 899px) { .commerce-hero { min-height: 38vh; max-height: 38vh; } }

/* ================= 2026-09-04 conversion and catalog pass =================
   The phone builder keeps the selected cookies in reach; the photographed
   presentation remains a desktop affordance. Soda recipes separate product
   identity from ingredients, and transactional chrome stays visible. */

/* Header actions use one control size and expose the cart without consuming a
   permanent navigation tab. */
.header-cart {
  position: relative; flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--card);
  border: 1px solid var(--line); color: var(--text);
}
.header-cart svg { width: 17px; height: 17px; }
.header-cart-count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px;
  display: grid; place-items: center; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: var(--on-gold); border: 2px solid var(--ground);
  font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.header-cart-count.hidden { display: none; }

/* Recipe-led soda cards: the base is visually scannable even when the store
   only provides one shared cup photograph for several recipes. */
.soda-grid { align-items: stretch; }
.soda-card-full { width: 100%; }
.soda-card .cup-img { overflow: hidden; }
.soda-card.recipe-visual { border-top: 3px solid var(--soda-accent); }
.soda-card.recipe-visual .cup-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--soda-accent) 30%, transparent), transparent 52%);
  mix-blend-mode: screen;
}
.soda-base {
  position: absolute; z-index: 2; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  padding: 5px 8px; border-radius: 999px; background: rgba(13,13,13,.82);
  border: 1px solid color-mix(in srgb, var(--soda-accent) 72%, #FFFFFF 8%);
  color: #FFFFFF; font-size: 9px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.soda-card .meta .name { min-height: 2.12em; }
.soda-card .meta .build {
  min-height: 4.05em; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; overflow: hidden;
}

/* Persistent field labels survive autofill and keep the input purpose visible. */
label.f-label { display: block; }
.st-current {
  display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px;
  border-radius: 999px; background: rgba(255,170,0,.14); color: var(--gold);
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}

/* Cart confidence and action hierarchy. */
.sheet-cart { display: flex; flex-direction: column; overflow: hidden; padding-bottom: calc(10px + var(--safe-b)); }
.sheet-cart > .sheet-pad { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.sheet-cart > #cart-cta { flex: none; margin-top: 8px; }
.cart-context {
  display: flex; align-items: center; gap: 14px; margin: 14px 0 2px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-row); background: var(--card);
}
.cart-context > div { min-width: 0; display: grid; gap: 2px; }
.cart-context strong { font-size: 14px; color: var(--text); }
.cart-context span, .cart-context small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.cart-context button {
  margin-left: auto; min-width: 64px; min-height: 44px; color: var(--gold);
  font-size: 12px; font-weight: 700;
}
.cedit, .account-rewards-link { min-height: 44px; display: inline-flex; align-items: center; }
.account-rewards-link {
  justify-content: center; width: 100%; margin-top: 16px; padding: 0 18px;
  border-radius: 999px; background: var(--gold); color: var(--on-gold); font-weight: 700;
}
.bb-mobile-controls, .bb-mobile-dock { display: none; }

@media (max-width: 899px) {
  .header { gap: 8px; }
  .header img.logo { max-width: 124px; height: auto; }
  .search-btn { margin-left: auto; flex: none; }
  .header .loc-chip { margin-left: 0; max-width: 42%; min-width: 0; }
  .loc-chip .loc-name, .loc-chip .loc-status {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  .soda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .soda-card { width: 100%; }
  .sheet-cart .sumrow.total {
    font-family: var(--ui); font-size: 16px; line-height: 1.4;
    letter-spacing: 0; text-transform: none;
  }

  /* The builder is a composed mobile sheet: context at the top, one dedicated
     flavor scroller, and an in-flow action tray at the bottom. Do not use a
     fixed descendant here. The sheet itself is transformed for its entrance,
     which makes iOS Safari treat a fixed child as sheet-relative and strand it
     in the middle of the scrolling content. */
  .sheet.sheet-builder {
    height: 92vh; height: 92dvh; display: flex; flex-direction: column;
    overflow: hidden; padding-bottom: 0;
  }
  .sheet-builder > .grab, .sheet-builder > .sheet-close-row { flex: none; }
  .sheet-builder .bb-pad {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding-bottom: 0;
  }
  .sheet-builder .bb-board {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    margin-top: 12px;
  }
  .sheet-builder .bb-tray-mount { display: none; }
  .sheet-builder #bb-body {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: 20px;
  }
  .sheet-builder .bb-mobile-controls { display: block; margin-bottom: 14px; }
  .sheet-builder .bb-head { margin-top: 0; }
  .sheet-builder .bb-rows { gap: 10px; }
  .sheet-builder .bb-row { padding: 10px; }
  .sheet-builder .bb-side {
    position: static; z-index: auto; flex: none; width: auto;
    margin: 0 calc(-1 * var(--gutter));
    padding: 10px var(--gutter) calc(10px + var(--safe-b));
    background: rgba(13,13,13,.97); border-top: 1px solid var(--line);
    box-shadow: 0 -18px 40px rgba(0,0,0,.58); backdrop-filter: blur(18px);
  }
  .sheet-builder .bb-side .side-fade { display: none; }
  .sheet-builder .bb-mobile-dock { display: block; }
  .bb-mobile-status {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 7px; color: var(--secondary); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .bb-mobile-status strong { color: var(--text); font-size: 13px; font-variant-numeric: tabular-nums; }
  .bb-mobile-slots {
    display: grid; grid-template-columns: repeat(var(--slot-count), minmax(0, 1fr));
    gap: 5px; margin-bottom: 8px;
  }
  .bb-mobile-slot {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
    border: 1px dashed #4A4A4A; border-radius: 9px; background: #161616;
  }
  .bb-mobile-slot.filled { border-style: solid; border-color: var(--gold); background: #0D0D0D; }
  .bb-mobile-slot img { width: 100%; height: 100%; display: block; object-fit: cover; }
  .bb-mobile-slot.cut img { object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.42)); }
  .bb-mobile-slot.drop img { animation: mobile-slot-drop .18s var(--ease); }
  @keyframes mobile-slot-drop { from { transform: scale(1.18); } to { transform: scale(1); } }
  .sheet-builder .bb-ctarow { gap: 8px; }
  .sheet-builder .bb-ctarow .cta { margin: 0; min-height: 50px; }
}

@media (min-width: 900px) {
  .header-cart { width: 40px; height: 40px; }
  .soda-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soda-card .cup-img { aspect-ratio: 5 / 4; }
}

/* ================= 2026-09-04 responsive ordering refinement ================= */

/* Keep browsing controls legible and comfortably tappable in both navigation
   systems. The active state remains gold; the quiet state is still readable. */
.nav-btn, .dnav { color: var(--secondary); }
.nav-btn { min-height: 44px; justify-content: center; }
.nav-btn > span:last-child { line-height: 1.05; }
.dnav { min-height: 44px; display: inline-flex; align-items: center; }
.header-cart, .search-btn, .loc-chip { min-width: 44px; min-height: 44px; }
.category-rail button, .soda-choice-list .chip { min-height: 44px; }

/* Group labels make the builder's choices scannable without competing with
   the product cards themselves. */
.menu-group-heading {
  margin: 22px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  color: var(--text); font-family: var(--display); font-size: 14px; font-weight: 500;
  line-height: .95; letter-spacing: .01em; text-transform: uppercase;
}
.menu-group-heading:first-child { margin-top: 0; }
.menu-group-heading { grid-column: 1 / -1; }
.sheet .menu-group-heading { font-size: 13px; line-height: 1.3; margin: 18px 0 10px; }
.sheet .menu-group-heading:first-child { margin-top: 0; }

/* The soda builder uses one readable form column and a compact order summary.
   Details retain native disclosure semantics while presenting a clear step. */
.sheet.sheet-soda { overflow-y: auto; }
.sheet-soda > .sheet-pad > h3 { max-width: calc(100% - 38px); line-height: 1.15; text-wrap: balance; }
.sheet-soda > .cta { position: sticky; bottom: 0; z-index: 7; box-shadow: 0 -10px 24px var(--ground); }
.soda-layout { display: grid; gap: 14px; }
.soda-form { min-width: 0; display: grid; gap: 12px; }
.pickup-fields .f-label {
  margin: 0; color: var(--secondary); font-size: 12px; font-weight: 700;
}
.pickup-fields select {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-row); background: var(--card); color: var(--text);
}
.pickup-fields select:focus { border-color: var(--gold); outline: none; }
.soda-choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.soda-choice-list .chips { gap: 8px; }
details.soda-step {
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-row);
  background: var(--card);
}
details.soda-step > summary {
  position: relative; min-height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 10px 42px 10px 14px; cursor: pointer; list-style: none;
}
details.soda-step > summary::-webkit-details-marker { display: none; }
details.soda-step > summary::after {
  content: ""; position: absolute; right: 17px; width: 8px; height: 8px;
  border-right: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s var(--ease);
}
details.soda-step[open] > summary { border-bottom: 1px solid var(--line); }
details.soda-step[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
details.soda-step > summary > strong {
  color: var(--text); font-family: var(--ui); font-size: 13px; font-weight: 700;
}
details.soda-step > summary > span {
  max-width: 16ch; overflow: hidden; color: var(--muted); font-size: 11px;
  text-align: right; text-overflow: ellipsis; white-space: nowrap;
}
details.soda-step > :not(summary) { padding: 12px 14px 14px; }
/* Step actions are text controls, not the circular quantity buttons. An
   overflowing label can otherwise cover and intercept the syrup choices. */
.soda-step [data-soda-next] {
  width: calc(100% - 28px); height: auto; min-height: 44px;
  margin: 0 14px 14px; border-radius: 12px; font-size: 13px;
  line-height: 1.4; padding: 10px 14px; white-space: normal;
}
.soda-summary {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-row);
  background: var(--recessed);
  display: grid; gap: 6px; font-size: 13px;
}
.soda-summary > span { color: var(--secondary); font-size: 12px; overflow-wrap: anywhere; }
.soda-summary > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.soda-summary .summary { margin: 0; }
.pickup-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pickup-fields label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--secondary); }
.checkout-context { display: grid; gap: 4px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.checkout-context strong { font-size: 14px; }
.checkout-context span { font-size: 12px; color: var(--secondary); }
.close-x { min-width: 44px; min-height: 44px; }
.box-complete {
  border-color: var(--gold); box-shadow: 0 10px 26px rgba(255,170,0,.14);
  animation: box-complete .34s var(--ease);
}
@keyframes box-complete { 50% { transform: translateY(-2px); } }

/* A phone hero is image-led: it keeps one balanced, untruncated headline,
   the live ordering action, and enough contrast to read it over photography. */
@media (max-width: 899px) {
  .commerce-hero { min-height: 340px; height: 54svh; max-height: 390px; }
  .commerce-hero-copy { padding: 16px var(--gutter) 18px; }
  .commerce-hero .kicker, .commerce-hero .featured-tag, .commerce-hero .hero-sub { display: none; }
  .commerce-hero h1 {
    max-width: 17ch; margin-top: 0; font-size: clamp(26px, 7vw, 31px); line-height: 1.03;
    overflow: visible; text-wrap: balance; -webkit-line-clamp: unset;
  }
  .commerce-hero-shade {
    background: linear-gradient(180deg, rgba(13,13,13,0) 26%, rgba(13,13,13,.18) 48%, rgba(13,13,13,.92) 92%);
  }
  .loyalty-promo {
    width: calc(100% - 28px); margin: 10px 14px 2px; padding: 10px 12px;
    grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 10px;
  }
  .loyalty-promo-icon { width: 34px; height: 34px; border-radius: 12px; }
  .loyalty-promo-icon svg { width: 19px; height: 19px; }
  .loyalty-promo-copy .eyebrow { font-size: 8.5px; }
  .loyalty-promo-copy strong { font-size: 12.5px; }
  .loyalty-promo-copy > span:last-child { display: none; }
  .loyalty-promo-action { display: block; font-size: 0; }
  .loyalty-promo-action::after { content: "→"; font-size: 19px; }

  .sheet.sheet-soda { height: 92vh; height: 92dvh; overflow-y: auto; }
  .soda-layout { display: flex; flex-direction: column; }
  .soda-summary {
    position: sticky; top: 0; z-index: 4; order: -1; margin: 0;
    box-shadow: 0 12px 24px rgba(0,0,0,.2);
  }
  .pickup-fields { grid-template-columns: 1fr; }
}

/* Above the phone breakpoint the product photo stays cinematic, while the
   compact customizer gains a true two-column operating layout. */
@media (min-width: 900px) {
  .commerce-hero-media img { object-position: 70% 42%; }
  .commerce-hero-shade {
    background:
      linear-gradient(90deg, rgba(13,13,13,.94) 0%, rgba(13,13,13,.78) 30%, rgba(13,13,13,.28) 58%, rgba(13,13,13,0) 84%),
      linear-gradient(180deg, rgba(13,13,13,0) 52%, rgba(13,13,13,.78) 100%);
  }
  .sheet.sheet-soda { width: min(860px, 92vw); }
  .soda-layout { grid-template-columns: minmax(0, 1fr) 244px; align-items: start; gap: 24px; }
  .soda-choice-list, .pickup-fields { grid-column: 1; }
  .soda-summary { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 0; }
}

/* The desktop rail is deliberately conditional: only a live order earns the
   reserved browsing column. The global phone drawer stays out of this mode. */
@media (min-width: 1180px) {
  body.has-desktop-order #app { max-width: 1440px; padding-right: 390px; }
  body.has-desktop-order .desktop-cart { display: block !important; }
  /* Full-bleed negative gutters must not extend under the fixed order rail. */
  body.has-desktop-order .commerce-hero { margin-inline: 0; border-radius: var(--radius); }
  .boxdrawer { display: none !important; }
}

/* ================= 2026-09-06 customer-flow polish =================
   Scoped to the full soda catalog and edit/quick-fill controls. The compact
   home strip, cookie hero, physical box, and phone tray retain their geometry. */
.soda-section-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
  margin: 0 var(--gutter) 22px; padding: 0 0 16px;
  border-bottom: 1px solid var(--line-strong);
}
.soda-nav-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--secondary); background: var(--ground); text-decoration: none;
  font-size: 12px; line-height: 1.25; font-weight: 600; text-align: center;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
.soda-nav-link:first-child { color: var(--gold); border-color: var(--gold-deep); }
.soda-nav-link:hover { color: var(--text); border-color: var(--secondary); }
.soda-nav-link:focus-visible, .soda-edit-cancel:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
#soda-seasonal, #soda-favorites { scroll-margin-top: 90px; }
#soda-seasonal > .section-head, #soda-favorites > .section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.section-head .soda-section-title { margin: 0; font-size: clamp(17px, 2vw, 23px); }
.soda-section-count {
  color: var(--secondary); font-family: var(--ui); font-size: 12px;
  font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.soda-grid .soda-card-full {
  display: flex; flex-direction: column; align-items: stretch; min-width: 0;
  padding: 0; height: 100%; transform-origin: center;
}
.soda-grid .soda-card-full .cup-img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; flex: none;
  background: var(--photo-frame);
}
.soda-grid .soda-card-full .cup-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
}
.soda-grid .soda-card-full .meta {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 14px 16px;
}
.soda-grid .soda-card-full .meta .name {
  min-height: 0; margin: 0; line-height: 1.15; text-wrap: balance;
  overflow-wrap: anywhere;
}
.soda-grid .soda-card-full .meta .build {
  display: block; min-height: 0; margin: 0 0 4px; overflow: visible;
  -webkit-line-clamp: unset; color: var(--secondary); font-size: 12px; line-height: 1.45;
}
.soda-grid .soda-card-full .meta .price { margin-top: auto; }
.soda-grid .soda-card-full:active { transform: scale(.99); }

/* A price preview is part of the shortcut, not a surprise after filling. */
#bb-oneofeach { min-height: 48px; max-width: 100%; white-space: normal; }
.bb-chips { align-items: center; }
.quickfill-price { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.quickfill-note {
  flex-basis: 100%; color: var(--secondary); font-family: var(--ui);
  font-size: 11px; line-height: 1.4; letter-spacing: 0; text-transform: none;
}

/* Edit commits and cancellation have one stable action row. */
.soda-edit-actions {
  position: sticky; bottom: 0; z-index: 8;
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--gutter) calc(12px + var(--safe-b));
  background: var(--ground); border-top: 1px solid var(--line-strong);
}
.soda-edit-actions .cta {
  flex: 1; min-width: 0; width: auto; margin: 0; position: static;
  min-height: 52px; box-shadow: none; padding: 14px 18px;
}
.soda-edit-cancel {
  flex: none; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--secondary); background: var(--ground); font-size: 13px; font-weight: 600;
}
.cart-item .cedit { padding: 6px 12px; gap: 6px; margin-top: 8px; }
/* Reserve the logo's frame before decoding and protect narrow store context. */
.header img.logo { flex: none; width: 112px; height: auto; aspect-ratio: 900 / 264; object-fit: contain; }

@media (min-width: 900px) {
  .header { gap: 12px; }
  .desktopnav { margin-left: 0; gap: 0; }
  .desktopnav .dnav { padding: 9px 12px; font-size: 13px; }
  .soda-section-nav { display: flex; gap: 10px; margin-inline: 0; }
  .soda-nav-link { min-width: 136px; padding: 10px 18px; }
  .soda-grid .soda-card-full .cup-img { aspect-ratio: 6 / 5; }
  .soda-grid .soda-card-full .meta { padding: 16px 18px 18px; }
  .soda-grid .soda-card-full .meta .name { font-size: 15px; }
  .soda-grid .soda-card-full .meta .build { font-size: 13px; }
}
@media (max-width: 359px) {
  .header { padding-inline: 14px; gap: 6px; }
  .header img.logo { width: 88px; }
  .header .loc-chip { flex: 1; max-width: none; padding-inline: 8px; }
  .loc-chip .loc-name { font-size: 10.5px; }
  .loc-chip .loc-status { font-size: 8px; letter-spacing: .02em; }
  .soda-nav-link { padding: 7px 5px; font-size: 11px; }
  .soda-grid .soda-card-full .meta { padding: 12px 10px 14px; }
  .soda-grid .soda-card-full .meta .name { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .soda-nav-link, .soda-grid .soda-card-full { transition: none; }
  .soda-grid .soda-card-full:active { transform: none; }
}

/* 2026-09-06: one branded, in-page window host for every ordering task.
   No backdrop, centered pop-out, transformed containing block, or second CTA. */
body.sheet-open #app,
body.sheet-open #desktop-cart,
body.sheet-open #boxdrawer,
body.sheet-open #cartbar,
body.sheet-open #bottomnav { display: none !important; }
#overlay { display: none !important; }
.cookie-photo-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--secondary); }
.cookie-photo-placeholder svg { width: 48px; height: 48px; }
.order-window {
  display: flex; flex-direction: column; width: 100%; max-width: 1280px;
  height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden;
  background: var(--ground);
}
.window-brandbar {
  flex: none; display: flex; align-items: center; gap: 12px;
  min-height: 76px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px;
  background: var(--ground); border-bottom: 1px solid var(--line);
}
.window-brandbar .logo { flex: none; width: 112px; height: auto; }
.window-back {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--card); color: var(--text);
}
.window-back svg { width: 22px; height: 22px; }
.window-back:hover { border-color: var(--gold); color: var(--gold); }
.window-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.window-store { margin-left: auto; min-width: 0; display: grid; gap: 2px; text-align: right; }
.window-store strong { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.window-store span { color: var(--secondary); font-size: 10px; line-height: 1.3; }
#order-window > #sheet {
  position: relative; inset: auto; z-index: auto; transform: none; transition: none;
  flex: 1; width: 100%; min-height: 0; height: auto; max-height: none;
  max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--ground); overflow-x: hidden; overscroll-behavior: contain;
}
#order-window > #sheet.sheet-builder {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0;
}
#order-window > #sheet.sheet-cart { display: flex; flex-direction: column; }
#order-window .hero-img { max-height: 360px; }
#order-window .sheet-soda > .sheet-pad > h3 { max-width: none; }
#order-window .bb-side { backdrop-filter: none; box-shadow: none; background: var(--ground); }
@media (max-width: 899px) {
  #order-window .bb-rows { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 900px) {
  .window-brandbar { min-height: 88px; }
  .window-brandbar .logo { width: 136px; }
  .window-store strong { font-size: 14px; }
  .window-store span { font-size: 12px; }
  #order-window > #sheet.sheet-board { display: flex; flex-direction: column; overflow: hidden; }
  #order-window > #sheet:not(.sheet-board):not(.sheet-soda) { max-width: 760px; margin-inline: auto; }
  #order-window .bb-tray-mount > .bb-tray { margin: 0; padding: 0; border: 0; background: none; }
}
@media (max-width: 359px) {
  .window-brandbar { gap: 8px; padding-inline: 14px; }
  .window-brandbar .logo { width: 94px; }
  .window-store strong { font-size: 11px; }
  .window-store span { font-size: 9px; }
  #order-window .bb-row { gap: 8px; }
  #order-window .bb-row .ph { width: 48px; height: 48px; }
  #order-window .bb-row.picked { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
  #order-window .bb-row.picked .ctrl { grid-column: 2; justify-self: end; }
  #order-window .bb-ctarow { display: block; }
  #order-window #bb-hint { display: block; margin-bottom: 4px; }
  #order-window .bb-ctarow .cta { width: 100%; }
}
/* Short landscape windows keep usable list space without losing the logo or
   shrinking the touch targets. The same tray simply becomes one compact row. */
@media (max-width: 899px) and (max-height: 500px) {
  .window-brandbar { min-height: 56px; padding-block: 6px; }
  .window-brandbar .logo { width: 100px; }
  #order-window .bb-pad > .desc { display: none; }
  #order-window .bb-pad > h3 { margin-block: 6px 0; font-size: 18px; }
  #order-window .bb-board { margin-top: 8px; }
  #order-window .bb-mobile-dock { display: flex; align-items: center; gap: 14px; }
  #order-window .bb-mobile-status { flex: none; display: grid; gap: 0; margin: 0; }
  #order-window .bb-mobile-slots { flex: 1; min-width: 0; grid-template-columns: repeat(var(--slot-count), minmax(0, 40px)); margin: 0; }
  #order-window .bb-side { padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); }
  #order-window .bb-ctarow { margin-top: 4px; }
  #order-window .bb-ctarow .cta { min-height: 44px; }
}

/* 2026-09-06: customer-flow refinement. One checkout, product-first builders.
   Kept after the legacy board rules so the existing storefront is untouched. */
::selection { background: var(--gold); color: var(--on-gold); }
input, textarea { caret-color: var(--gold); }
.order-window { scrollbar-color: var(--line-strong) var(--ground); }
.window-store { max-width: 48%; }
.window-store span { text-wrap: balance; font-variant-numeric: tabular-nums; }
.header .loc-status { white-space: normal; text-overflow: clip; line-height: 1.35; }

/* #boxes is a normal page, never a hidden order-window task. The only
   builder tray is inline, while the physical plate remains on desktop. */
#inline-box-builder { min-width: 0; }
.inline-box-page { max-width: 1240px; margin: 0 auto; padding: 10px var(--gutter) 36px; }
.inline-box-builder .bb-pad { padding: 0; }
.inline-box-builder .bb-board { margin-top: 12px; }
.inline-box-builder .bb-side .side-fade { display: none; }
body[data-view="boxes"] #boxdrawer { display: none !important; }
@media (min-width: 900px) {
  .inline-box-builder .bb-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; gap: 0 28px; }
  .inline-box-builder #bb-body { grid-column: 1; grid-row: 1 / -1; min-width: 0; padding-right: 10px; }
  .inline-box-builder .bb-summary { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 96px; align-self: start; }
  .inline-box-builder .bb-tray-mount { position: static; }
  .inline-box-builder .bb-side { position: static; margin: 0; padding: 0; border: 0; background: none; }
  .inline-box-builder .bb-side .bb-tray { background: var(--recessed); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
  .inline-box-builder .bb-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .inline-box-builder .bb-rows .bb-row { margin-bottom: 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .inline-box-builder .bb-rows .bb-row .ph { width: 100%; height: auto; aspect-ratio: 1; }
  .inline-box-builder .bb-rows .bb-row .ctrl { margin-left: 0; align-self: flex-end; }
}
@media (min-width: 1200px) { .inline-box-builder .bb-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-height: 740px) {
  .inline-box-builder .bb-summary { position: static; }
}
@media (max-width: 899px) {
  body[data-view="boxes"] #app { padding-bottom: 0; }
  .inline-box-page { padding-top: 4px; padding-bottom: calc(var(--box-nav-height, 88px) + var(--box-dock-height, 200px) + 24px); }
  .inline-box-builder .bb-summary { display: contents; }
  .inline-box-builder .bb-tray-mount { display: none; }
  .inline-box-builder .bb-mobile-controls, .inline-box-builder .bb-mobile-dock { display: block; }
  .inline-box-builder .bb-oneofeach-desktop { display: none; }
  .inline-box-builder .bb-mobile-controls { margin-bottom: 14px; }
  .inline-box-builder .bb-mobile-controls .bb-oneofeach-toolbar { margin-top: 8px; }
  .inline-box-builder .bb-board { display: flex; flex-direction: column; margin-top: 12px; }
  .inline-box-builder #bb-body { min-width: 0; }
  .inline-box-builder .bb-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
  .inline-box-builder .bb-row, .inline-box-builder .menu-group-heading { min-width: 0; }
  .inline-box-builder .bb-side { position: fixed; top: auto; bottom: var(--box-nav-height, calc(88px + var(--safe-b))); left: var(--box-nav-left, 0px); width: var(--box-nav-width, 100%); z-index: 35; margin: 0; padding: 10px var(--gutter); background: var(--ground); border-top: 1px solid var(--line); box-shadow: 0 -12px 24px rgba(0,0,0,.24); }
  .inline-box-builder .bb-ctarow .cta { width: 100%; margin: 0; min-height: 50px; }
}
@media (max-width: 359px) {
  .inline-box-builder .bb-pad > .draft-resume { position: static; margin: 4px 0 8px; }
  .inline-box-builder .bb-pad > h3 { padding-right: 0; }
  .inline-box-builder .bb-pad > .desc.subhead { display: none; }
  .inline-box-builder .bb-row { gap: 8px; }
  .inline-box-builder .bb-row .ph { width: 48px; height: 48px; }
  .inline-box-builder .bb-row.picked { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
  .inline-box-builder .bb-row.picked .ctrl { grid-column: 2; justify-self: end; }
  .bottomnav .nav-btn > span:last-child { overflow-wrap: normal; white-space: nowrap; font-size: 8px; letter-spacing: .03em; }
}

/* Selection belongs to the count and tray, not an outline around every photo. */
#order-window .bb-rows .bb-row { border-color: transparent; background: var(--surface); }
#order-window .bb-rows .bb-row.picked { border-color: var(--line-strong); background: var(--card); }
#order-window .bb-rows .bb-row .ph { background: var(--photo-frame); }
#order-window .bb-row .fsub { color: var(--secondary); }
#order-window .bb-row .fsub.inbox { color: var(--gold); }
#order-window .bb-rows .bb-add { background: var(--card-2); border: 1px solid var(--line-strong); color: var(--gold); }
#order-window .bb-rows .bb-add:disabled { color: var(--muted); }
#order-window .bb-slot-remove { position: relative; padding: 0; cursor: pointer; }
#order-window .bb-slot-remove:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
#order-window .bb-slot-remove:hover { border-color: var(--gold); }
.draft-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.draft-actions > span { font-size: 11px; color: var(--secondary); }
.draft-actions button, .draft-discard { min-height: 44px; padding: 8px 0; color: var(--secondary); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.bb-oneofeach-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.bb-oneofeach-toolbar .quickfill-price { color: var(--secondary); font-size: 12px; }
.draft-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.draft-resume > span { color: var(--secondary); font-size: 11px; }
.draft-resume > button { margin: 0; min-height: 44px; font-size: 11px; color: var(--secondary); text-underline-offset: 4px; }
.bb-pad { position: relative; }
.bb-pad > .draft-resume { position: absolute; top: 10px; right: var(--gutter); margin: 0; }
.bb-pad > .draft-resume > span { display: none; }
.bb-pad > h3 { padding-right: 105px; }
[data-bb-oneofeach] { min-height: 44px; padding: 8px 12px; font-size: 11px; }

/* All editable order details now share one scroller. The confirmed price and
   explicit payment action remain together; nothing overlays a trapped field. */
#order-window .checkout-entry .ck-card,
#order-window .checkout-entry .ck-lines,
#order-window .checkout-entry .checkout-loyalty {
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
.checkout-entry .ck-form,
.checkout-entry .ck-fields,
.checkout-entry .ck-card,
.checkout-entry .checkout-name-fields > div { min-width: 0; }
.checkout-name-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.checkout-validation {
  margin: 10px 0 16px; padding: 12px 14px; max-width: 100%;
  border: 1px solid var(--gold-deep); border-radius: 12px;
  background: var(--surface); color: var(--text); font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere; scroll-margin-block: 24px;
}
.checkout-entry .f-input[aria-invalid="true"] { border-color: var(--gold); }
.checkout-entry .f-input { scroll-margin-block: 24px 180px; }
.checkout-entry .ck-store,
.checkout-entry .checkout-lines .fname,
.checkout-entry .checkout-lines .fsub,
.checkout-entry #pay-note { overflow-wrap: anywhere; }
.checkout-entry .sumrow > span { min-width: 0; }
.checkout-entry .sumrow > span:last-child { flex: none; }
.checkout-entry .cta > span:first-child { min-width: 0; white-space: normal; }
.checkout-entry .cta > span:last-child { flex: none; }
.checkout-entry .ck-fulfil { margin: 0 0 24px; }
.checkout-entry .ck-segment { max-width: 380px; padding: 3px; background: var(--surface); border-color: var(--line-strong); }
.checkout-entry .ck-segment button { min-height: 44px; font-size: 12px; color: var(--secondary); }
.checkout-entry .ck-segment button.sel { color: var(--text); background: var(--card-2); box-shadow: none; }
.checkout-entry .time-pill.sel { color: var(--gold); border-color: var(--gold-deep); background: var(--surface); }
.checkout-entry .ck-store { margin-block: 14px 8px; }
.checkout-entry .checkout-lines { margin-block: 24px; }
.checkout-entry .checkout-lines > summary { cursor: pointer; min-height: 44px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.checkout-entry .checkout-lines h4,
.checkout-entry .checkout-loyalty h4 { font-family: var(--ui); font-size: 15px; font-weight: 700; }
.checkout-entry .checkout-lines .bb-row { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; gap: 12px; }
.checkout-entry .checkout-lines .fname { font-family: var(--ui); font-size: 14px; line-height: 1.4; }
.checkout-entry .checkout-lines .fsub { color: var(--secondary); font-size: 12px; line-height: 1.5; }
.checkout-line-actions { display: grid; grid-template-columns: repeat(2,44px); gap: 4px; flex: none; }
.checkout-line-actions > .st-dist { grid-column: 1 / -1; justify-self: end; font-size: 14px; color: var(--text); }
.checkout-line-actions > .cedit { grid-column: 1 / -1; min-height: 44px; padding: 6px 0; background: none; border: 0; border-radius: 0; color: var(--gold); font-size: 11px; }
.checkout-line-actions > .mini-btn { min-width: 44px; min-height: 44px; }
.checkout-entry .checkout-loyalty { margin-block: 24px; }
.checkout-entry .checkout-loyalty > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; font-weight: 600; }
.checkout-entry .checkout-loyalty .d,
.checkout-entry .checkout-loyalty .hint { color: var(--secondary); font-size: 12px; text-align: left; }
.checkout-entry .checkout-loyalty .t { font-size: 14px; }
.checkout-entry .checkout-loyalty .ok { font-size: 13px; color: var(--good); margin-block: 8px; }
.checkout-entry .checkout-loyalty .promo-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checkout-entry .checkout-loyalty button { min-height: 44px; font-size: 12px; }
.checkout-entry .checkout-loyalty [data-reward] { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: var(--card); }
.checkout-entry .checkout-loyalty .promo-link { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.checkout-entry .ck-fields { padding: 0; }
.checkout-entry .ck-payment-methods {
  margin-top: 24px; padding: 20px; border: 1px solid var(--line-strong);
  border-radius: 16px; background: #171717; min-width: 0; scroll-margin-block: 20px;
}
.checkout-entry .ck-payment-methods .f-label { margin: 0 0 12px; color: #fff; font-size: 14px; }
.checkout-entry .ck-payment-methods #card-container { min-width: 0; width: 100%; }
.checkout-entry .ck-payment-methods #card-wrap { margin: 0; }
.checkout-entry .apple-pay-button:not(.hidden) + #card-wrap:not(.hidden) {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid #454545;
}
/* Apple's standard Apple Pay button (WebKit renders it natively). Black per
   the 2026-09-23 launch brief. Width follows the payment column; it never sets
   its own horizontal padding or margin, so it cannot overflow the panel. */
.checkout-entry .apple-pay-button {
  display: block; width: 100%; max-width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 16px;
  border: 0; border-radius: 8px; background: #fff; color: #000;
  font: 600 17px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
}
.checkout-entry .apple-pay-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.checkout-entry .apple-pay-button:disabled { opacity: .5; cursor: wait; }
@supports (-webkit-appearance: -apple-pay-button) {
  .checkout-entry .apple-pay-button {
    -webkit-appearance: -apple-pay-button; -apple-pay-button-type: order;
    -apple-pay-button-style: white; padding: 0; background: none;
  }
  .checkout-entry .apple-pay-button > span { visibility: hidden; }
}
/* Trust row: small and quiet, directly under the payment controls. */
.checkout-entry .pay-trust {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid #333;
  color: var(--secondary); font-size: 12px; line-height: 1.45; min-width: 0;
}
.checkout-entry .pay-trust p { margin: 0; }
.checkout-entry .pay-trust-line { display: flex; align-items: flex-start; gap: 6px; }
.checkout-entry .pay-trust-line .trust-lock { flex: none; margin-top: 2px; }
.checkout-entry .pay-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.checkout-entry .pay-marks > span { display: inline-flex; line-height: 0; }
.checkout-entry .pay-mark { display: block; width: 38px; height: 24px; }
.checkout-entry .ck-legal { margin: 8px 0 0; color: var(--secondary); font-size: 11px; line-height: 1.5; }
.checkout-entry .ck-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .checkout-entry .ck-payment-methods { padding: 16px; }
}
.checkout-entry .ck-pay-row { padding: 12px 0; background: none; border: 0; border-radius: 0; }
.checkout-entry .ck-side { background: var(--ground); }
.checkout-entry .sumrow.total { font-family: var(--ui); font-size: 19px; letter-spacing: 0; line-height: 1.4; text-transform: none; }
.checkout-entry .checkout-context { padding-bottom: 10px; margin-bottom: 8px; }
.checkout-entry #pay-note:not(:empty) { padding-block: 12px; color: var(--text); }
.checkout-entry .ck-promise { color: var(--secondary); font-size: 10px; }
.checkout-entry .hint { color: var(--secondary); }

/* Recognition beats searching. Families retain every live choice; size icons
   are simple cup geometry and never replace real drink photography. */
.soda-base-family { padding: 0; margin: 0 0 16px; border: 0; min-width: 0; }
.soda-base-family > h4, .soda-base-family > legend { display: block; margin: 0 0 8px; font-size: 12px; font-family: var(--ui); font-weight: 600; color: var(--secondary); }
.soda-base-family .chips { margin-top: 0; }
.soda-cup-size { width: 30px; height: 46px; display: block; margin: 0 auto 5px; overflow: visible; color: var(--secondary); }
.size-pill.sel .soda-cup-size { color: currentColor; }
#order-window .sheet-soda details.soda-step { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
#order-window .sheet-soda details.soda-step > summary { padding-left: 0; }
#order-window .sheet-soda details.soda-step[open] > summary { border-bottom: 0; }
#order-window .sheet-soda details.soda-step > :not(summary) { padding-inline: 0; }
#order-window .sheet-soda .soda-choice-list .chip { border-color: var(--line-strong); border-radius: 12px; }
#order-window .sheet-soda .soda-choice-list .chip.sel { border-color: var(--gold-deep); color: var(--gold); background: var(--surface); }
#order-window .sheet-soda .soda-summary { border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: 12px 0; background: var(--ground); box-shadow: none; }

/* The only celebratory moment is payment-confirmed, never pending or unknown. */
.order-success-art { width: min(170px, 45vw); margin: 0 auto 20px; }
.order-success-art img { width: 100%; height: auto; object-fit: contain; }
.order-success .big.icon-hero { display: none; }
.confirm.order-success { padding-top: 24px; }
.order-success h2 { font-size: clamp(22px, 4vw, 32px); line-height: 1.15; }
[data-payment-state="paid"] .order-success-art { animation: order-box-settle .55s cubic-bezier(.16,1,.3,1); }
@keyframes order-box-settle { from { transform: translateY(-8px) scale(.96); } to { transform: translateY(0) scale(1); } }

@media (max-width: 899px) {
  #order-window .bb-pad > .subhead { display: none; }
  #order-window .bb-pad > h3 { font-size: 20px; line-height: 1.15; margin-bottom: 0; }
  #order-window .bb-board { margin-top: 8px; }
  #order-window .bb-mobile-controls { margin-bottom: 4px; }
  #order-window .bb-mobile-controls .bb-sizes { padding: 3px; gap: 4px; margin-bottom: 0; }
  #order-window .bb-mobile-controls .bb-size { min-height: 44px; padding: 6px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  #order-window .bb-mobile-controls .bb-size .n { font-size: 16px; }
  #order-window .bb-mobile-controls .bb-size .p { font-size: 10px; }
  #order-window .bb-head { display: none; }
  #order-window .bb-chips, #order-window .bb-oneofeach-toolbar { margin: 4px 0 0; }
  #order-window .bb-oneofeach-desktop > [data-bb-oneofeach],
  #order-window .bb-oneofeach-desktop > .quickfill-price { display: none; }
  #order-window #bb-oneofeach { min-height: 44px; padding: 8px 12px; font-size: 11px; }
  #order-window .bb-rows > .menu-group-heading { margin-top: 12px; margin-bottom: 0; }
  #order-window .bb-rows { gap: 8px; }
  #order-window .bb-row { padding: 8px; }
  #order-window .bb-row .ph { width: 64px; height: 64px; }
  #order-window .bb-mobile-slot { min-height: 44px; }
  #order-window .bb-mobile-slots[style*="--slot-count:12"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #order-window .bb-mobile-slot.filled { border-color: var(--line-strong); }
  #order-window .checkout-entry .ck-pad > h3 { font-size: 20px; line-height: 1.2; max-width: 25ch; }
  #order-window .checkout-entry .ck-pad > .subhead { display: none; }
  .checkout-entry .ck-board { margin-top: 20px; }
  .checkout-entry .ck-side { position: static; padding-top: 10px; margin-top: 16px; }
  .checkout-entry .ck-side .checkout-context { display: none; }
  .checkout-entry .ck-side .sumrow { padding-block: 3px; }
  .checkout-entry .ck-side .cta { min-height: 52px; font-size: 14px; }
  .checkout-entry .checkout-lines .ph { width: 56px; height: 56px; }
  #order-window .sheet-soda .size-pills { gap: 6px; }
  #order-window .sheet-soda .size-pill { flex: 1; min-width: 0; padding: 12px 4px 10px; border-radius: 12px; height: auto; }
  #order-window .sheet-soda .size-pill .s { font-size: 14px; }
  #order-window .sheet-soda .size-pill .p { font-size: 11px; }
}
@media (min-width: 900px) {
  #order-window .checkout-entry .ck-board { display: grid; grid-template-columns: minmax(0,1fr) 340px; grid-template-rows: minmax(0,1fr); gap: 36px; }
  #order-window .checkout-entry .ck-form { display: block; grid-column: 1; grid-row: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 28px 0; }
  #order-window .checkout-entry .ck-fields { overflow: visible; min-height: auto; }
  #order-window .checkout-entry .ck-side { grid-column: 2; grid-row: 1; max-height: 100%; overflow-y: auto; padding: 20px; border: 1px solid var(--line-strong); border-radius: 16px; align-self: start; }
  #order-window .checkout-entry .ck-side .side-fade { display: none; }
  #order-window .checkout-entry .ck-pad > h3 { font-size: 28px; line-height: 1.2; }
  #order-window .bb-rows .bb-row { padding: 0; background: transparent; border: 0; }
  #order-window .bb-rows .bb-row.picked { background: transparent; border: 0; }
  #order-window .bb-rows .bb-row .ph { border-radius: 12px; }
  #order-window .bb-rows .bb-row .bb-meta { padding-top: 2px; }
}
@media (max-width: 599px) {
  #order-window .checkout-entry .checkout-lines .bb-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); }
  #order-window .checkout-entry .checkout-line-actions {
    grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  }
  #order-window .checkout-entry .checkout-line-actions > .st-dist { margin-right: auto; }
}
@media (max-width: 899px) and (max-height: 560px) {
  .checkout-entry .ck-side { position: static; }
}
@media (max-width: 359px) {
  .checkout-name-fields { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #order-window .checkout-entry .checkout-lines .ph { width: 48px; height: 48px; }
  #order-window .bb-row .ph { width: 48px; height: 48px; }
  #order-window .checkout-entry .checkout-lines .bb-row { display: grid; grid-template-columns: 48px minmax(0,1fr); }
  #order-window .checkout-entry .checkout-line-actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; }
  #order-window .bb-mobile-slots { gap: 3px; }
}
@media (max-width: 899px) and (max-height: 500px) {
  #order-window .bb-pad > h3 { font-size: 18px; }
  #order-window .bb-mobile-controls { display: flex; align-items: center; gap: 12px; }
  #order-window .bb-mobile-controls .bb-sizes { flex: 1; }
  #order-window .bb-oneofeach-toolbar { flex: none; margin: 0; }
  #order-window .bb-oneofeach-toolbar .quickfill-price { display: none; }
  #order-window .bb-mobile-slots[style*="--slot-count:12"] { grid-template-columns: repeat(12, minmax(0,1fr)); }
  #order-window .bb-mobile-slot { min-width: 44px; }
  #order-window .bb-mobile-slots { overflow-x: auto; }
  #order-window .bb-side { padding-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-payment-state="paid"] .order-success-art, .box-complete { animation: none; transform: none; }
}

/* The inline Boxes page is a two-column storefront, never a third cart rail.
   Its summary contains the physical box, confirmed price, and action as one
   card while the cookie choices stay dense enough to scan. */
.inline-box-builder .bb-group-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); margin: 14px 0 8px; padding-bottom: 10px; min-width: 0; }
.inline-box-builder .bb-group-header:first-child { margin-top: 0; }
.inline-box-builder .bb-group-header .menu-group-heading { margin: 0; padding: 0; border: 0; }
.inline-box-builder .bb-group-header .bb-chips { margin: 0; flex-shrink: 0; }
@media (min-width: 900px) {
  body[data-view="boxes"] #app,
  body[data-view="boxes"].has-desktop-order #app { max-width: none; padding-left: 0; padding-right: 0; }
  body[data-view="boxes"] .desktop-cart { display: none !important; }
  body[data-view="boxes"] .header,
  body[data-view="boxes"] .inline-box-page { width: min(100%, 1280px); max-width: 1280px; margin-left: auto; margin-right: auto; }
  body[data-view="boxes"] .header,
  body[data-view="boxes"] .inline-box-page { padding-left: 32px; padding-right: 32px; }

  .inline-box-builder .bb-board { grid-template-columns: minmax(0, 1fr) 340px; gap: 0 28px; }
  .inline-box-builder #bb-body { padding-right: 0; }
  .inline-box-builder .bb-summary {
    background: var(--recessed); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px;
  }
  .inline-box-builder .bb-tray-mount > .bb-tray {
    position: static; z-index: auto; margin: 0; padding: 0; background: transparent; border: 0;
  }
  .inline-box-builder .bb-side { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
  .inline-box-builder .bb-side .bb-tray { padding: 0; }
  .inline-box-builder .bb-box { width: min(100%, 280px); margin-inline: auto; }
  .inline-box-builder .bb-ctarow .cta { justify-content: center; }
  .inline-box-builder .bb-chips { margin: 0 0 14px; }
  .inline-box-builder .bb-rows .bb-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .inline-box-builder .bb-rows .bb-row .ph { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .inline-box-builder .bb-rows .bb-row .bb-meta { flex: 1; }
  .inline-box-builder .bb-rows .bb-row .ctrl { margin-left: auto; align-self: flex-end; }
}

/* 2026-09-08 storefront refinement: selection is compact on phone, while the
   established desktop box geometry and two-column builder remain unchanged. */
.storefront-info {
  display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter);
}
.confirm-bar { margin: 0 var(--gutter) 12px; padding: 4px 12px; border-width: 0 0 1px; border-radius: 0; background: transparent; font-size: 12px; }
.confirm-bar .cb-yes, .confirm-bar .cb-change { min-height: 44px; padding: 6px 12px; }
.drawer-tier .promo-link { min-height: 36px; padding-block: 6px; }
.storefront-info details { color: var(--secondary); font-size: 11px; }
.storefront-info > a { min-height: 32px; display: inline-flex; align-items: center; color: var(--secondary); font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.storefront-info summary { min-height: 32px; display: inline-flex; align-items: center; cursor: pointer; color: var(--secondary); }
.storefront-info details[open] { width: min(100%, 310px); padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.storefront-info .facts-note, .storefront-info .hint { margin: 4px 0 0; text-align: left; }

.menu-groups { display: grid; gap: 24px; }
.menu-group { min-width: 0; }
.menu-group .menu-group-heading { margin: 0 0 10px; }
.menu-tile .name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
@media (min-width: 900px) {
  .menu-group-single .menu-grid { display: flex; grid-template-columns: none; }
  .menu-group-single .menu-tile { width: min(100%, 310px); }
  .menu-group-single .menu-tile .tile-open { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
  .menu-group-single .menu-tile .ph { aspect-ratio: 1; height: 100%; }
  .menu-group-single .menu-tile .meta { min-height: 110px; }
}

.soda-page-head { margin: 14px var(--gutter) 10px; }
.soda-page-head h1 { margin: 0; }

.bb-build-another {
  width: 100%; min-height: 44px; margin-top: 8px; padding: 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--secondary); font-size: 12px; font-weight: 600;
}

.checkout-entry .f-label { display: block; margin-top: 14px; color: var(--text); font-size: 12px; font-weight: 600; }
.checkout-entry .f-input {
  background: var(--card-2); border: 1.5px solid var(--line-strong); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.checkout-entry .f-input:focus { border-color: var(--gold); outline: 2px solid rgba(255,170,0,.22); outline-offset: 1px; }
.address-locality-labels { display: grid; grid-template-columns: minmax(0, 1fr) 56px 78px; gap: 8px; }
.address-locality-labels .f-label { min-width: 0; }

@media (max-width: 899px) {
  .inline-box-builder .bb-side[data-selection-state="empty"] .bb-mobile-slots,
  .inline-box-builder .bb-side[data-selection-state="empty"] .bb-ctarow,
  .inline-box-builder .bb-side[data-selection-state="partial"] .bb-ctarow { display: none; }
  .inline-box-builder .bb-side[data-selection-state="partial"] .bb-mobile-slots {
    display: flex; align-items: center; gap: 6px; margin-bottom: 0; max-width: 100%; overflow-x: auto;
  }
  .inline-box-builder .bb-side[data-selection-state="partial"] .bb-mobile-slot:not(.filled) { display: none; }
  .inline-box-builder .bb-side[data-selection-state="partial"] .bb-mobile-slot { width: 34px; flex: none; }
  .inline-box-builder .bb-side[data-selection-state="full"] .bb-mobile-slots { margin-bottom: 8px; }

  #order-window > .checkout-entry { display: flex; overflow: hidden; padding-bottom: 0; }
  #order-window .checkout-entry .ck-pad { display: flex; flex-direction: column; flex: 1; min-height: 0; padding-bottom: 0; }
  #order-window .checkout-entry .ck-pad > h3 { flex: none; }
  #order-window .checkout-entry .ck-board { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  #order-window .checkout-entry .ck-form { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; }
  #order-window .checkout-entry .ck-fields { padding-bottom: 22px; }
  #order-window .checkout-entry .ck-side {
    position: static; flex: none; z-index: 4; margin: 0; padding: 10px 0 calc(10px + var(--safe-b));
    border-top: 1px solid var(--line-strong); background: var(--ground);
  }
  #order-window .checkout-entry .ck-side .summary { max-height: min(24dvh, 180px); overflow-y: auto; }
  #order-window .checkout-entry .ck-side .side-fade { display: none; }
}

/* Shared storefront header: opaque chrome, stable controls, no scroll fade.
   The painted backdrop spans desktop gutters without changing page geometry. */
.header {
  isolation: isolate;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--ground);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ground); box-shadow: 0 0 0 100vmax var(--ground);
  clip-path: inset(0 -100vmax); pointer-events: none;
}
.header .header-cart, .header .loc-chip {
  height: 48px; min-height: 48px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line);
}
.header .header-cart { width: 48px; min-width: 48px; }
.header .loc-chip {
  margin-left: 0; min-width: 0; padding: 4px 12px;
  justify-content: center; max-width: 240px;
}
.header .loc-name {
  display: block; width: 100%; line-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.header .loc-name .dot { display: inline-block; margin-right: 6px; vertical-align: middle; }
.header .loc-status {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; line-height: 11px; white-space: normal;
}
@media (max-width: 899px) {
  /* Use the same centered content rails as product cards, even below 360px.
     Paint remains full-bleed, but the logo and controls stay in the column. */
  .header { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; padding-inline: 0; }
  .header .loc-chip { flex: 1; max-width: 210px; padding-inline: 10px; }
  .header img.logo { width: 104px; }
}
@media (max-width: 359px) {
  .header img.logo { width: 80px; }
  .header .loc-chip { padding-inline: 8px; }
}

/* Mobile experience, 2026-09-09: one brand row, five destinations and one
   rewards invitation. Presentation only; box geometry and commerce unchanged. */
.brand-home { display: inline-flex; align-items: center; flex: none; min-height: 44px; text-decoration: none; }
.brand-home:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.header .header-cart { margin-left: auto; border-color: transparent; background: transparent; }
.header .header-cart svg { width: 22px; height: 22px; }
.header .loc-chip { background: transparent; border: 0; border-left: 1px solid var(--line); border-radius: 0; text-align: left; }
.header .loc-name, .header .loc-status { text-align: left; }
.featured-price small { font-family: var(--ui); font-size: 12px; font-weight: 500; color: var(--secondary); }
.menu-tile .price-row { flex-wrap: wrap; gap: 8px; }
.menu-tile .price-row { justify-content: flex-start; gap: 4px; }
.single-price-unit { font-size: 11px; color: var(--secondary); }
.one-each-explanation { display: block; max-width: 34ch; color: var(--secondary); font-family: var(--ui); font-size: 11px; font-weight: 400; line-height: 1.5; }
.bb-oneofeach-toolbar { align-items: center; gap: 12px; margin-bottom: 20px; }
.bb-oneofeach-desktop { flex-wrap: wrap; }
.syrup-family + .syrup-family { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.syrup-family h4 { margin: 0 0 10px; font-family: var(--ui); font-size: 12px; color: var(--secondary); }
.rewards-account { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.rewards-account h2 { font-family: var(--ui); font-size: 18px; margin: 0 0 16px; }
.delivery-cost-pending { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 12px; font-size: 13px; }
.delivery-cost-pending strong { color: var(--gold); }
.delivery-cost-pending p { color: var(--secondary); margin: 6px 0 0; line-height: 1.5; }
.cravings-group + .cravings-group { margin-top: 28px; }
.cravings-group > h2 { font-family: var(--ui); font-size: 18px; margin: 0 0 14px; }
.cravings-card .ph img { object-fit: contain; }
.cravings-card .name, .cravings-card .blurb2 { display: block; -webkit-line-clamp: unset; overflow: visible; }
@media (max-width: 899px) {
  .header { gap: 8px; }
  .header img.logo { width: 112px; }
  .header .loc-chip { flex: 0 1 190px; max-width: 190px; padding-left: 12px; padding-right: 0; }
  .header .loc-name { font-size: 13px; }
  .commerce-hero { min-height: 280px; height: 38svh; max-height: 330px; }
  .commerce-hero h1 { font-size: clamp(24px, 6.5vw, 30px); }
  .loyalty-promo { width: calc(100% - 2 * var(--gutter)); margin: 12px auto 4px; padding: 14px; grid-template-columns: 34px minmax(0, 1fr) 20px; }
  .loyalty-promo-copy strong { font-size: 13px; line-height: 1.4; }
  .loyalty-promo-copy .eyebrow { font-size: 9px; margin-bottom: 3px; }
  .loyalty-promo-action { grid-column: 3; grid-row: 1; margin: 0; }
  .soda-summary { position: static; }
  .sheet-soda > .cta { background: var(--gold); outline: 12px solid var(--ground); margin-bottom: 12px; }
  .cravings-grid { grid-template-columns: 1fr; gap: 12px; }
  .cravings-card { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 14px; }
  .cravings-card .ph { flex: none; width: 96px; height: 112px; margin: 0; border-radius: 12px; background: transparent; }
  .cravings-card .meta { min-width: 0; padding: 0; }
  .cravings-card .name { font-size: 16px; line-height: 1.35; }
  .cravings-card .blurb2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 12px; line-height: 1.5; margin-block: 6px; }
  .cravings-card .price-row { margin-top: 8px; }
}
@media (max-width: 359px) {
  .header img.logo { width: 96px; }
  .header .loc-name { font-size: 12px; }
  .header .loc-chip { padding-left: 8px; }
}

/* Checkout tip selector (2026-09-23). Five equal options, No tip default. */
.checkout-entry .checkout-tip { margin-block: 24px; }
.checkout-entry .checkout-tip h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.checkout-entry .tip-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.checkout-entry .tip-options button {
  min-height: 56px; min-width: 0; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--text); font: 600 13px/1.2 var(--ui); cursor: pointer;
}
.checkout-entry .tip-options button small { color: var(--secondary); font-size: 11px; font-weight: 500; }
.checkout-entry .tip-options button.sel { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.checkout-entry .tip-options button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.checkout-entry .tip-custom { margin-top: 12px; }
@media (max-width: 380px) {
  .checkout-entry .tip-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.delivery-closed-note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted, inherit); opacity: .85; }

.delivery-closed-note { margin: 6px 0 0; font-size: 13px; line-height: 1.4; opacity: .85; }

/* 2026-10-12 launch fixes: store switch confirmation */
.store-switch-actions { display: grid; gap: 10px; margin-top: 18px; }
.store-switch-actions .promo-link { min-height: 44px; }

/* 2026-10-12 launch fixes: payment step.
   Money on the Pay button uses the readable body face, never the display
   face. Before the server total exists the amount is labelled Subtotal. */
.checkout-entry #checkout-action > span:last-child {
  font-family: var(--ui); font-weight: 700; font-size: 17px; line-height: 1.2;
  letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
}
.checkout-entry #checkout-action .cta-money small,
.checkout-entry #checkout-action > span:last-child small {
  font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; margin-right: 4px; opacity: .8;
}
.checkout-entry .quote-inline { display: none; }
.checkout-entry .ck-legal-inline { display: none; }
.checkout-entry .pay-trust-note { display: block; clear: both; margin-top: 8px; }
.checkout-entry #card-container { position: relative; }
@media (max-width: 899px) {
  /* Only the choice, the total and Pay stay pinned. Breakdown, delivery
     estimate and legal copy scroll with the form. */
  .checkout-entry .ck-side .checkout-context {
    display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
    padding-bottom: 6px; margin-bottom: 4px;
  }
  .checkout-entry .ck-side .checkout-context strong { font-size: 13px; }
  .checkout-entry .ck-side .checkout-context span { font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
  .checkout-entry .ck-side .checkout-context strong::after { content: " ·"; color: var(--secondary); }
  #order-window .checkout-entry .ck-side .summary { max-height: none; overflow: visible; }
  .checkout-entry #quote-panel .sumrow:not(.total),
  .checkout-entry #quote-panel .delivery-estimate,
  .checkout-entry #quote-panel .quote-earned,
  .checkout-entry .ck-side .delivery-cost-pending p,
  .checkout-entry .ck-side .tip-row,
  .checkout-entry .ck-legal-side { display: none; }
  .checkout-entry #quote-panel .summary { margin-top: 0 !important; }
  .checkout-entry .quote-inline:not(.hidden) { display: block; margin-top: 24px; }
  .checkout-entry .quote-inline .summary { margin: 0; }
  .checkout-entry .ck-legal-inline { display: block; margin-top: 16px; }
}

/* Menu tile: the photo and name open the cookie sheet; the plain Add drops in
   one single cookie (Trent 2026-10-12). */
.menu-tile.has-add { cursor: default; }
.menu-tile .tile-open {
  display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; margin: 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.menu-tile .tile-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.menu-tile .tile-add {
  margin: 0 9px 9px; min-height: 36px; padding: 0 10px; border-radius: 999px;
  background: var(--gold); color: #111111; border: 1px solid var(--gold);
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
}
.menu-tile .tile-add:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.menu-tile .tile-add:disabled {
  background: transparent; color: var(--faint); border-color: var(--line); cursor: not-allowed;
  letter-spacing: .04em; font-size: 10.5px;
}

/* Apple Pay mark only after the wallet button initialized (2026-10-12). */
.pay-trust .pay-marks > .pay-mark-wallet,
.checkout-entry .pay-trust .pay-marks > .pay-mark-wallet { display: none; }
.pay-trust.has-apple-pay .pay-marks > .pay-mark-wallet,
.checkout-entry .pay-trust.has-apple-pay .pay-marks > .pay-mark-wallet { display: inline-flex; }

/* Apple Pay express at the top of checkout (2026-10-12). */
.ck-express { display: grid; gap: 10px; margin: 2px 0 14px; }
.ck-express.hidden { display: none; }
.ck-express .apple-pay-button { width: 100%; }
.ck-or { display: flex; align-items: center; gap: 10px; color: var(--secondary); font-family: var(--ui); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.ck-or::before, .ck-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Pay waits for a confirmed total (round-2 review 2026-10-12). */
.checkout-entry #checkout-action.is-waiting > span:last-child:empty { display: none; }
.checkout-entry #checkout-action.is-waiting > span:first-child { flex: 1; text-align: center; }
.pickup-time-needed { margin: 10px 0 4px; color: var(--gold, #ffb000); font-weight: 600; font-size: 14px; }

/* Filled-box thumbnail on order lines: the picked cookies, not the pack photo. */
.box-thumb { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1px; width: 100%; height: 100%; padding: 3px; box-sizing: border-box; align-content: center; background: var(--recessed, #1c1c1c); border-radius: inherit; }
.box-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.box-thumb img.cut { object-fit: contain; border-radius: 0; transform: scale(1.1); }
.box-thumb i { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.08); }

/* Box builder money reads in Poppins, soda itemized above the subtotal. */
.bb-tray-price, .bb-mobile-status strong, #bb-attach-lines .bb-tray-price { font-family: var(--ui); font-weight: 700; text-transform: none; letter-spacing: 0; line-height: 1.2; }
.bb-attach-line, .bb-subtotal-line { margin-top: 6px; }
.bb-attach-line .bb-tier { color: var(--secondary, #b8b8b8); }
.bb-subtotal-line { padding-top: 6px; border-top: 1px solid rgba(255,255,255,.12); }
.bb-mobile-status strong small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--secondary, #b8b8b8); margin-right: 2px; }

/* Notices ("added", store change) sit on the header bar, never over the
   cookie grid (round-2 review 2026-10-12). */
.toast {
  top: calc(7px + env(safe-area-inset-top, 0px)); bottom: auto; z-index: 70;
  padding: 8px 14px; font-size: 13px; line-height: 1.35; border-radius: 12px;
  max-width: min(520px, calc(100vw - 24px));
  animation-name: toast-drop;
}
@keyframes toast-drop {
  from { transform: translate(-50%, -8px); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ================= R7 rewards and cart bar (Trent 2026-10-14) ================= */

/* Rewards page: a covered tier's Redeem is a real button. */
.rw-tier button.rw-redeem { min-height: 36px; padding: 9px 16px; cursor: pointer; }
.rw-tier button.rw-redeem:active { transform: scale(.97); }
.rw-tier button.rw-redeem:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* "Pick your free cookie/soda" banner on This Week and Sodas. */
.reward-start-banner {
  display: flex; align-items: center; gap: 10px; margin: 10px var(--gutter, 18px) 4px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--good, #5bbe7e);
  background: rgba(91,190,126,.08); color: var(--text);
}
.reward-start-banner strong { font-family: var(--ui); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.reward-start-icon { flex: none; width: 22px; color: var(--good, #5bbe7e); }
.reward-start-icon svg { width: 22px; height: 22px; display: block; }
.bb-pad .desc.subhead.reward-hint { color: var(--good, #5bbe7e); font-weight: 700; }

/* Checkout: rewards sit under the items with the live balance. */
.checkout-entry .checkout-loyalty { margin-block: 14px 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.checkout-entry .checkout-loyalty h4 { margin: 0; }
.checkout-loyalty-balance { margin-top: 2px; font-family: var(--ui); font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.checkout-entry .checkout-loyalty .checkout-reward-options { margin-top: 10px; }
.checkout-entry .checkout-loyalty [data-checkout-reward] { padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: var(--card); font-weight: 700; }
.checkout-entry .checkout-loyalty [data-checkout-reward]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Cart reward row: on the phone bar and the desktop order rail. */
.cart-reward-row { display: flex; align-items: center; gap: 10px; padding: 2px 0 10px; }
.cart-reward-icon { flex: none; width: 20px; color: var(--good, #5bbe7e); }
.cart-reward-icon svg { width: 20px; height: 20px; display: block; }
.cart-reward-copy { flex: 1; min-width: 0; font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.cart-reward-cta {
  flex: none; min-height: 40px; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--gold); color: var(--gold); background: transparent;
  font-family: var(--ui); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.cart-reward-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.desktop-cart .cart-reward-row { margin: 14px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.desktop-cart .cart-reward-row { flex-wrap: wrap; row-gap: 10px; }
.desktop-cart .cart-reward-copy { flex-basis: calc(100% - 30px); }
.desktop-cart .cart-reward-cta { margin-left: 30px; }

/* The compact row exists only for the phone tabs other than This Week. */
.boxdrawer .drawer-compact { display: none; }
.boxdrawer .drawer-compact.drawer-bottom { margin-top: 0; }

@media (max-width: 899px) {
  /* The bar shows on every tab while the cart holds items, above the tab bar. */
  body:not([data-view="home"]) .boxdrawer .drawer-full { display: none; }
  body:not([data-view="home"]) .boxdrawer .drawer-compact { display: flex; }
  body:not([data-view="home"]):not(.cart-has-items) .boxdrawer { display: none !important; }
  body[data-view="boxes"].cart-has-items:not(.sheet-open) #boxdrawer:not(.hidden):not(.empty) {
    display: block !important; bottom: var(--box-nav-height, calc(66px + var(--safe-b)));
  }
  /* Boxes: the builder's own dock rides directly above the cart bar. */
  body[data-view="boxes"].cart-has-items .inline-box-builder .bb-side {
    bottom: calc(var(--box-nav-height, calc(88px + var(--safe-b))) + var(--cart-bar-height, 0px));
  }
  body[data-view="boxes"].cart-has-items .inline-box-page {
    padding-bottom: calc(var(--box-nav-height, 88px) + var(--box-dock-height, 200px) + var(--cart-bar-height, 0px) + 24px);
  }
  /* Every other tab pads by the bar's live height so the last row clears it. */
  body.cart-has-items:not([data-view="home"]):not([data-view="boxes"]) #app {
    padding-bottom: calc(var(--cart-bar-height, 72px) + 96px + var(--safe-b));
  }
  body[data-view="home"]:not(.box-empty) #app {
    padding-bottom: max(calc(212px + var(--safe-b)), calc(var(--cart-bar-height, 0px) + 96px + var(--safe-b)));
  }
}