/* Green Pastures master menu (see master-menu.js). White cards on the soft panel, Switzer, olive accents. */

/* ---------- the cup, drawn from above ---------- */
.cup { --s:84px; --liq2:color-mix(in srgb, var(--liq) 55%, #fff6e8); position:relative; display:block; width:var(--s); height:var(--s); flex-shrink:0; border-radius:50%;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), filter .4s ease; }
.cup.hot { background:radial-gradient(circle at 50% 50%, #ffffff 0 60%, #f1efe8 61% 100%); box-shadow:0 12px 22px rgba(30,34,24,.13), 0 2px 4px rgba(30,34,24,.06), inset 0 0 0 1px rgba(0,0,0,.04); }
.cup.hot em { position:absolute; right:-15%; top:40%; width:24%; height:20%; border-radius:0 50% 50% 0; background:#fbfaf6; box-shadow:0 6px 10px rgba(30,34,24,.1), inset 0 0 0 1px rgba(0,0,0,.04); z-index:-1; }
.cup s { position:absolute; inset:14%; border-radius:50%; text-decoration:none;
  background:radial-gradient(circle at 42% 38%, var(--liq2) 0 18%, var(--liq) 72%, color-mix(in srgb, var(--liq) 80%, #000) 100%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.2); transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
/* latte art: a soft rosetta */
.cup.t-art s::after { content:""; position:absolute; left:33%; top:22%; width:34%; height:52%; border-radius:50% 50% 46% 46%;
  background:radial-gradient(ellipse at 50% 40%, rgba(255,248,236,.95) 0 34%, rgba(255,248,236,.55) 52%, transparent 72%); }
.cup.t-art s::before { content:""; position:absolute; left:46%; top:62%; width:8%; height:22%; border-radius:4px; background:rgba(255,248,236,.7); }
/* cold foam: a creamy cap */
.cup.t-foam s { background:radial-gradient(circle at 45% 40%, #fffaf0 0 30%, color-mix(in srgb, var(--liq) 35%, #fff6e8) 62%, var(--liq) 100%); }
/* matcha: light foam with fine speckles */
.cup.t-matcha s { background:radial-gradient(circle at 1px 1px, rgba(255,255,255,.35) 1px, transparent 1.5px) 0 0 / 7px 7px,
  radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--liq) 60%, #f4f6e4) 0 30%, var(--liq) 78%, color-mix(in srgb, var(--liq) 80%, #000) 100%); }
/* strawberry matcha: pink below, green swirl above */
.cup.t-berry s { background:conic-gradient(from 40deg, #e6a0a8 0 30%, var(--liq) 30% 62%, #eab2b8 62% 80%, var(--liq) 80%); }
/* iced: a clear cup, ice cubes and a straw */
.cup.iced { background:radial-gradient(circle, rgba(255,255,255,.75) 0 64%, rgba(226,232,220,.9) 65% 100%); box-shadow:0 12px 22px rgba(30,34,24,.11), inset 0 0 0 1.5px rgba(255,255,255,.9), inset 0 0 0 3px rgba(0,0,0,.05); }
.cup.iced s { inset:10%; }
.cup.iced i { position:absolute; width:22%; height:22%; border-radius:5px; background:rgba(255,255,255,.42); box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.08); z-index:2; }
.cup.iced i:nth-of-type(1) { left:24%; top:26%; transform:rotate(14deg); }
.cup.iced i:nth-of-type(2) { left:50%; top:46%; transform:rotate(-18deg); }
.cup.iced i:nth-of-type(3) { left:28%; top:54%; transform:rotate(32deg); width:18%; height:18%; }
.cup.iced b { position:absolute; left:58%; top:24%; width:13%; height:13%; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2.5px var(--olive), 0 2px 4px rgba(0,0,0,.15); z-index:3; }
/* sizes + motion */
.cup.sm { --s:40px; } .cup.xs { --s:22px; } .cup.xl { --s:min(250px, 60vw); }
.dt:hover .cup, .brow.on ~ * .cup { transform:translateY(-4px) rotate(-8deg); }
.dt:hover .cup s { transform:rotate(40deg); }
.cup.pop { animation:cuppop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes cuppop { 0% { transform:scale(.8) rotate(-20deg); } 100% { transform:none; } }

/* ---------- shared drink tile ---------- */
.mm { margin-top:8px; }
.dgrid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.dt { position:relative; display:grid; grid-template-columns:84px minmax(0,1fr); gap:18px; align-items:center; padding:20px; border-radius:24px; background:#fff;
  box-shadow:var(--shadow), inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease), transform .4s var(--spring), opacity .3s var(--ease); }
.dt.hide { display:none; }
.dt.on { box-shadow:0 12px 26px rgba(72,97,55,.16), inset 0 0 0 2px var(--olive); }
.dt.full { opacity:.5; }
.dt.nope { animation:nope .4s ease; }
@keyframes nope { 20%, 60% { transform:translateX(-5px); } 40%, 80% { transform:translateX(5px); } }
.dtn { font-family:var(--fu); font-weight:600; font-size:17px; line-height:22px; letter-spacing:var(--lsu); }
.dtd { font-size:14px; line-height:19px; color:var(--muted); margin-top:3px; }
.dtt { display:flex; gap:4px; margin-top:8px; flex-wrap:wrap; }
.tg { font-family:var(--fu); font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
.mmnote { margin-top:20px; }
.grp2 { font-family:var(--fu); font-size:11px; line-height:1; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:flex; justify-content:space-between; gap:8px; }

/* ---------- 1. build your menu ---------- */
.mm-build { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.mm-build .dgrid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.chips { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.chips button, .moods button, .seg button { height:38px; padding:0 15px; border-radius:99px; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--fu); font-size:14px; font-weight:600; letter-spacing:var(--lsu); transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.chips button.on, .moods button.on, .seg button.on { background:var(--ink); color:#fff; box-shadow:none; }
.add { position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 11px; border-radius:99px; border:0; cursor:pointer;
  background:var(--card); color:var(--ink); font-family:var(--fu); font-size:12.5px; font-weight:600; transition:background .25s var(--ease), color .25s var(--ease); }
.add svg { width:11px; height:11px; }
.add:hover { background:#ecefe6; }
.dt.on .add { background:var(--olive); color:#fff; }
.dt .dtb { padding-bottom:30px; }
.inc { position:absolute; right:14px; bottom:16px; font-family:var(--fu); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--olive); }
.mycard { position:sticky; top:24px; border-radius:28px; background:#fff; padding:26px; box-shadow:0 20px 44px rgba(30,34,24,.1), inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:14px; }
.mch { display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:16px; border-bottom:1px dashed #d9dbd2; }
.mch img { width:130px; height:auto; }
.mch .ui { color:var(--muted); letter-spacing:.12em; text-transform:uppercase; font-size:11px; }
.slots { display:flex; flex-direction:column; gap:6px; }
.slot { display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 12px; border-radius:16px; box-shadow:inset 0 0 0 1.5px #e3e4dc; }
.slot:not(.full) { box-shadow:none; background:repeating-linear-gradient(90deg, #dcded5 0 6px, transparent 6px 11px) top / 100% 1.5px no-repeat, repeating-linear-gradient(90deg, #dcded5 0 6px, transparent 6px 11px) bottom / 100% 1.5px no-repeat,
  repeating-linear-gradient(0deg, #dcded5 0 6px, transparent 6px 11px) left / 1.5px 100% no-repeat, repeating-linear-gradient(0deg, #dcded5 0 6px, transparent 6px 11px) right / 1.5px 100% no-repeat; border-radius:16px; }
.slot .dot { width:40px; height:40px; border-radius:50%; background:var(--card); flex-shrink:0; }
.slot .sn { flex:1; min-width:0; font-family:var(--fu); font-size:15px; font-weight:600; letter-spacing:var(--lsu); }
.slot:not(.full) .sn { color:#a3a69c; font-weight:500; }
.slot.full { animation:slotin .5s cubic-bezier(.22,1,.36,1); }
@keyframes slotin { from { opacity:0; transform:translateY(6px); } }
.rm { width:28px; height:28px; border-radius:50%; border:0; background:var(--card); color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.rm svg { width:11px; height:11px; }
.always { font-size:14px; line-height:20px; margin-top:-4px; }
.mycard .btn { width:100%; margin-top:6px; }
.mmbar { display:none; }

/* ---------- 2. menu board ---------- */
.mm-board { display:grid; grid-template-columns:minmax(0,1fr) 420px; gap:48px; align-items:start; }
.blist { display:grid; grid-template-columns:1fr 1fr; gap:36px 40px; }
.bgrp { display:flex; flex-direction:column; }
.bgrp .grp2 { margin-bottom:10px; }
.brow { display:flex; align-items:center; gap:10px; width:100%; padding:12px 0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); cursor:pointer; text-align:left; }
.brow .bn { font-family:var(--fu); font-size:16px; font-weight:500; letter-spacing:var(--lsu); white-space:nowrap; transition:color .25s var(--ease), transform .35s var(--ease); }
.brow .bl { flex:1; height:1px; background:repeating-linear-gradient(90deg, #d6d8cf 0 2px, transparent 2px 6px); align-self:center; }
.brow .dtt { margin-top:0; flex-wrap:nowrap; }
.brow.on .bn, .brow:hover .bn { color:var(--olive); transform:translateX(4px); }
.mm-board .mmnote { grid-column:1 / -1; margin-top:0; }
.bview { position:sticky; top:24px; border-radius:32px; background:#fff; padding:36px; box-shadow:0 20px 44px rgba(30,34,24,.1), inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:28px; }
.bcup { display:grid; place-items:center; padding:20px 0 6px; }
.bt .bg { color:var(--olive); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.bt .h3 { margin-top:8px; } .bt .txt { color:var(--muted); margin-top:8px; }
.fl { display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.fl span { font-family:var(--fu); font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:99px; background:var(--card); transition:background .25s var(--ease), color .25s var(--ease); }

/* ---------- 3. flavor finder ---------- */
.fbar { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.moods, .segs { display:flex; gap:6px; flex-wrap:wrap; }
.segs { gap:16px; }
.seg { display:inline-flex; gap:4px; padding:4px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
.seg button { height:32px; padding:0 13px; box-shadow:none; }
.fgrid .dt { grid-template-columns:84px minmax(0,1fr); }
.fgrid .fl { grid-column:1 / -1; margin-top:0; }
.fl span.hit { background:var(--olive); color:#fff; }
.fcount { margin-top:18px; color:var(--muted); }

/* ---------- tablet ---------- */
@media (max-width:1199px) {
  .mm-build { grid-template-columns:minmax(0,1fr) 300px; }
  .mm-build .dgrid, .dgrid { grid-template-columns:1fr 1fr; }
  .mm-board { grid-template-columns:1fr 340px; gap:32px; } .blist { grid-template-columns:1fr; }
}
@media (max-width:900px) {
  .mm-build { grid-template-columns:1fr; } .mycard { position:static; }
  .mm-build .mmbar { position:sticky; bottom:14px; z-index:5; display:flex; align-items:center; gap:10px; margin-top:14px; padding:8px 8px 8px 14px; border-radius:99px;
    background:rgba(20,22,18,.9); color:#fff; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 12px 30px rgba(0,0,0,.2);
    opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .mm-build .mmbar.show { opacity:1; transform:none; pointer-events:auto; }
  .mbs { display:flex; gap:4px; } .mbs .dot { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.18); display:block; }
  .mbt { flex:1; font-family:var(--fu); font-size:13px; font-weight:600; }
  .mbg { font-family:var(--fu); font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:99px; background:#fff; color:var(--ink); }
  .mm-board { grid-template-columns:1fr; } .bview { position:sticky; top:12px; z-index:4; order:-1; flex-direction:row; align-items:center; gap:16px; padding:16px; border-radius:22px; }
  .bview .bcup { padding:0; } .bview .cup.xl { --s:96px; } .bview .h3 { font-size:22px; line-height:27px; margin-top:4px; } .bview .txt { font-size:14px; line-height:19px; margin-top:4px; } .bview .fl { margin-top:8px; }
}
/* ---------- phone ---------- */
@media (max-width:809px) {
  .dgrid, .mm-build .dgrid { grid-template-columns:1fr; gap:6px; }
  .dt { grid-template-columns:64px minmax(0,1fr); gap:14px; padding:14px; border-radius:20px; } .dt .cup { --s:64px; }
  .fgrid .dt { grid-template-columns:64px minmax(0,1fr); }
  .dtn { font-size:15px; line-height:20px; } .dtd { font-size:12.5px; line-height:17px; }
  .chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-right:-20px; padding-right:20px; } .chips::-webkit-scrollbar { display:none; }
  .chips button, .moods button { height:34px; padding:0 13px; font-size:13px; flex-shrink:0; }
  .mycard { padding:20px; border-radius:24px; }
  .blist { gap:24px; } .brow .bn { font-size:15px; }
  .bview { flex-direction:row; padding:12px; gap:12px; } .bview .cup.xl { --s:76px; } .bview .bt .bg { font-size:10px; } .bview .fl { display:none; }
  .segs { gap:8px; } .seg button { height:30px; padding:0 10px; font-size:12.5px; }
}
@media (prefers-reduced-motion: reduce) { .cup, .cup s, .dt { transition:none; animation:none; } }

/* ---------- builder + live quote (2026-11-05) ---------- */
.mm-build .mml { min-width:0; }
.bstep { display:flex; align-items:flex-start; gap:14px; margin:36px 0 16px; }
.bstep:first-child { margin-top:0; }
.bn2 { width:30px; height:30px; flex-shrink:0; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-family:var(--fu); font-size:13px; font-weight:700; }
.bh { font-family:var(--fd); font-weight:600; font-size:24px; line-height:30px; letter-spacing:var(--lsd-s); }
.bp { font-size:15px; line-height:21px; color:var(--muted); margin-top:2px; }
.dt { cursor:pointer; user-select:none; -webkit-user-select:none; }
.dt:focus-visible, .cartb:focus-visible, .xb:focus-visible { outline:2px solid var(--olive); outline-offset:3px; }
.add { pointer-events:none; }
.carts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.cartb { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:22px; border:0; background:#fff; color:var(--ink); cursor:pointer; text-align:left;
  box-shadow:var(--shadow), inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease); }
.cartb b { display:block; font-family:var(--fu); font-size:17px; font-weight:600; letter-spacing:var(--lsu); }
.cartb small { display:block; font-size:14px; color:var(--muted); margin-top:2px; }
.cartb.on { box-shadow:0 12px 26px rgba(72,97,55,.16), inset 0 0 0 2px var(--olive); }
.dgrid.dsm .dt { grid-template-columns:56px minmax(0,1fr); padding:14px 16px; gap:14px; }
.dgrid.dsm .cup { --s:56px; }
.dgrid.dsm .dtd { display:none; }
.dgrid.dsm .dt .dtb { padding-bottom:0; padding-right:70px; }
.dgrid.dsm .add { top:50%; bottom:auto; transform:translateY(-50%); }
.xgrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.xb { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:20px; border:0; background:#fff; color:var(--ink); cursor:pointer; text-align:left; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); transition:box-shadow .3s var(--ease); }
.xb .xt { flex:1; min-width:0; } .xb b { display:block; font-family:var(--fu); font-size:15px; font-weight:600; letter-spacing:var(--lsu); }
.xb small { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; }
.xb .xp { font-family:var(--fu); font-weight:600; font-size:14px; }
.sw { width:40px; height:24px; border-radius:99px; background:#e4e5de; padding:2px; display:block; flex-shrink:0; transition:background .3s var(--ease); }
.sw i { display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.xb.on { box-shadow:0 12px 26px rgba(72,97,55,.14), inset 0 0 0 2px var(--olive); }
.xb.on .sw { background:var(--olive); } .xb.on .sw i { transform:translateX(16px); }
.details { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.stp, .gst { padding:16px 18px; border-radius:20px; background:#fff; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); display:flex; flex-direction:column; gap:10px; }
.sl { font-family:var(--fu); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.sc { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sc button { width:40px; height:40px; border-radius:12px; border:0; background:var(--card); color:var(--ink); font-size:20px; line-height:1; cursor:pointer; transition:background .2s var(--ease), transform .2s var(--ease); }
.sc button:hover { background:#ecefe6; } .sc button:active { transform:scale(.92); }
.sc b { font-family:var(--fd); font-weight:600; font-size:34px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.su { font-size:13px; color:var(--muted); }
.gst { grid-column:1 / -1; }
.gl { display:flex; justify-content:space-between; align-items:baseline; }
.gl b { font-family:var(--fd); font-weight:600; font-size:28px; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
#guests { width:100%; accent-color:var(--olive); height:28px; cursor:pointer; }
.prog { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; }
.prog span { display:flex; flex-direction:column; gap:6px; font-family:var(--fu); font-size:11px; font-weight:600; color:#a3a69c; transition:color .3s var(--ease); }
.prog span i { height:4px; border-radius:4px; background:var(--card); overflow:hidden; position:relative; }
.prog span i::after { content:""; position:absolute; inset:0; background:var(--olive); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.prog span.done { color:var(--ink); } .prog span.done i::after { transform:none; }
.mycard .always { margin-top:4px; color:var(--muted); font-size:13px; line-height:18px; }
.rcpt { display:flex; flex-direction:column; border-top:1px dashed #d9dbd2; padding-top:12px; }
.rl { display:flex; justify-content:space-between; gap:12px; padding:6px 0; font-size:14px; line-height:19px; }
.rl span { min-width:0; } .rl b { font-family:var(--fu); font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rl.rinc b { color:var(--olive); }
.rl.new { animation:printin .5s cubic-bezier(.22,1,.36,1); }
@keyframes printin { from { opacity:0; transform:translateY(-6px); clip-path:inset(0 0 100% 0); } to { clip-path:inset(0); } }
.tot { display:flex; justify-content:space-between; align-items:baseline; padding-top:14px; border-top:1px solid var(--ink); }
.tot span { font-family:var(--fu); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tot b { font-family:var(--fd); font-weight:700; font-size:40px; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--olive); }
.tot b.bump { animation:bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 40% { transform:scale(1.08); } }
.fine2 { font-size:12.5px; line-height:17px; color:var(--muted); margin-top:-4px; }
.mycard.cheer { animation:cheer .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes cheer { 30% { transform:translateY(-6px) rotate(-.6deg); box-shadow:0 30px 60px rgba(72,97,55,.25), inset 0 0 0 2px var(--olive); } }
@media (max-width:900px) {
  .mm-build .mmbar { padding:8px 8px 8px 18px; }
  .mm-build .mmbar .mbt { font-weight:500; } .mm-build .mmbar .mbt b { font-weight:700; font-size:15px; }
}
@media (max-width:809px) {
  .bstep { margin:28px 0 12px; } .bh { font-size:20px; line-height:25px; } .bp { font-size:13.5px; }
  .carts, .xgrid { grid-template-columns:1fr; }
  .details { grid-template-columns:1fr 1fr; } .sc b { font-size:28px; } .sc button { width:34px; height:34px; }
  .stp, .gst { padding:14px; } .su { font-size:12px; }
  .tot b { font-size:34px; }
}
.sc button:disabled { opacity:.35; cursor:default; transform:none; }
/* the panel clips its corners without becoming a scroll box, so the quote card and the phone total bar can stay pinned */
#menus .panel { overflow:clip; }
/* cup handle sits outside the rim and paints inside the cup's own layer */
.cup { isolation:isolate; }
.cup.hot em { right:-12%; width:15%; height:22%; top:39%; }

/* real drinks only: no made-up hot/iced tags on specialty tiles */
#dg-special .dt:not(.dream) .dtt { display:none; }
#dg-special .dt .dtb { padding-bottom:34px; }
/* dream up a drink */
.cup.t-dream s { background:conic-gradient(from 20deg, #f3c9cf 0 18%, #fff3e6 18% 34%, #e7a9b2 34% 52%, #fff3e6 52% 66%, #f0bcc4 66% 84%, #fff3e6 84%); animation:dreamspin 14s linear infinite; }
@keyframes dreamspin { to { transform:rotate(360deg); } }
.dt.dream { grid-column:1 / -1; cursor:default; background:linear-gradient(120deg, #fff 0%, #fbf3f3 100%); box-shadow:var(--shadow), inset 0 0 0 1.5px #ecd3d6; }
.dt.dream .dtb { padding-bottom:0; }
.dt.dream .dtn { display:flex; align-items:center; gap:8px; }
.dform { display:flex; gap:8px; margin-top:12px; }
.din { flex:1; min-width:0; height:42px; border-radius:12px; border:1px solid #e3e4dc; background:#fff; padding:0 14px; font-family:var(--fb); font-size:15px; color:var(--ink); outline:none; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.din:focus { border-color:var(--olive); box-shadow:0 0 0 3px rgba(72,97,55,.12); }
.dadd { display:inline-flex; align-items:center; gap:6px; height:42px; padding:0 14px; border-radius:12px; border:0; background:var(--ink); color:#fff; cursor:pointer; font-family:var(--fu); font-size:13.5px; font-weight:600; white-space:nowrap; }
.dadd svg { width:11px; height:11px; }
.dt.dream.full .dform { opacity:.5; }
.slot .sn small { display:block; font-family:var(--fb); font-weight:400; font-size:12px; color:var(--muted); margin-top:1px; }
@media (max-width:809px) { .dform { flex-direction:column; } .dadd { justify-content:center; } }

/* ================= drink lab + shelves + guests (2026-11-05 v3) ================= */
/* new cup tops */
.cup.t-whip s::after { content:""; position:absolute; inset:16%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #fffdf8 0 18%, #f3ece0 19% 24%, #fffdf8 25% 40%, #f1e9dc 41% 46%, #fffdf8 47% 64%, transparent 66%); box-shadow:0 2px 4px rgba(0,0,0,.08); }
.cup.t-sprinkles s::after { content:""; position:absolute; inset:22%; border-radius:50%;
  background:radial-gradient(circle at 20% 30%, #e7848f 0 5%, transparent 6%), radial-gradient(circle at 70% 25%, #8aa45a 0 5%, transparent 6%), radial-gradient(circle at 45% 60%, #f0b56a 0 5%, transparent 6%),
    radial-gradient(circle at 78% 70%, #5b5f9c 0 5%, transparent 6%), radial-gradient(circle at 30% 78%, #fff 0 5%, transparent 6%), radial-gradient(circle at 55% 35%, #d8576b 0 4%, transparent 5%), radial-gradient(circle, #fffaf0 0 100%); opacity:.95; }
.cup.t-fruit s::after { content:""; position:absolute; inset:24%; border-radius:50%;
  background:radial-gradient(ellipse at 30% 35%, #b8323f 0 8%, transparent 10%), radial-gradient(ellipse at 65% 30%, #e7848f 0 7%, transparent 9%), radial-gradient(ellipse at 50% 68%, #b8323f 0 8%, transparent 10%), radial-gradient(ellipse at 75% 62%, #d98a4a 0 6%, transparent 8%); }
.cup.t-plain s { background:radial-gradient(circle at 42% 36%, color-mix(in srgb, var(--liq) 70%, #fff) 0 10%, var(--liq) 60%, color-mix(in srgb, var(--liq) 78%, #000) 100%); }

/* sideways shelf */
.hs { position:relative; min-width:0; }
.hst { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; overscroll-behavior-x:contain; padding:6px 2px 14px; margin:0 -2px; cursor:grab; }
.hst::-webkit-scrollbar { display:none; }
.hst.drag { cursor:grabbing; scroll-snap-type:none; } .hst.drag * { pointer-events:none; }
.hst > * { scroll-snap-align:start; flex-shrink:0; }
.hsn { display:flex; align-items:center; gap:10px; margin-top:6px; }
.hsn.none { display:none; }
.hsn button { width:36px; height:36px; border-radius:10px; border:0; background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); transition:background .2s var(--ease), opacity .2s var(--ease); }
.hsn button:hover:not(:disabled) { background:#eef1ea; } .hsn button:disabled { opacity:.35; cursor:default; }
.hsn svg { width:13px; height:13px; }
.hsn .bar { flex:1; height:2px; border-radius:2px; background:#e6e7e0; overflow:hidden; }
.hsn .bar i { display:block; height:100%; border-radius:2px; background:var(--ink); transition:transform .12s linear; }

/* favorite drink cards: all the same size */
.pt { position:relative; width:176px; height:212px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px 14px 16px; border-radius:24px; background:#fff;
  box-shadow:var(--shadow), inset 0 0 0 1px var(--line); text-align:center; cursor:pointer; user-select:none; -webkit-user-select:none;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease), opacity .3s var(--ease); }
.pt:hover { transform:translateY(-4px); box-shadow:0 18px 34px rgba(30,34,24,.12), inset 0 0 0 1px var(--line); }
.pt:hover .cup { transform:translateY(-3px) rotate(-10deg) scale(1.04); }
.pt .cup { --s:86px; margin-bottom:4px; }
.ptn { font-family:var(--fu); font-size:15px; line-height:19px; font-weight:600; letter-spacing:var(--lsu); min-height:38px; display:flex; align-items:center; }
.ptk { font-family:var(--fu); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.pta { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--card); color:var(--ink); transition:background .25s var(--ease), color .25s var(--ease), transform .35s cubic-bezier(.34,1.56,.64,1); }
.pta svg { width:11px; height:11px; }
.pt.on { box-shadow:0 14px 30px rgba(72,97,55,.16), inset 0 0 0 2px var(--olive); }
.pt.on .pta { background:var(--olive); color:#fff; transform:scale(1.1); }
.pt.full { opacity:.45; }
.pt.nope { animation:nope .4s ease; }
.chips .labt { background:linear-gradient(120deg, #fff 0%, #f6efe6 100%); }
.chips .labt.on { background:var(--olive); }

/* the drink lab */
.lab { display:grid; grid-template-columns:230px minmax(0,1fr); gap:20px; align-items:stretch; }
.lprev { border-radius:26px; background:radial-gradient(circle at 50% 38%, #fff 0%, #f6f4ee 70%); box-shadow:inset 0 0 0 1px var(--line); padding:26px 18px 18px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.lprev .cup.xl { --s:150px; }
.lcup { margin-bottom:8px; }
.lname { font-family:var(--fd); font-weight:600; font-size:19px; line-height:24px; letter-spacing:-.02em; min-height:48px; display:flex; align-items:center; text-wrap:balance; }
.lrec { font-size:12.5px; line-height:17px; color:var(--muted); min-height:34px; }
.seg2 { display:inline-flex; gap:3px; padding:3px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); margin-top:auto; }
.seg2 button { height:30px; padding:0 14px; border-radius:99px; border:0; background:none; color:var(--muted); cursor:pointer; font-family:var(--fu); font-size:13px; font-weight:600; transition:background .25s var(--ease), color .25s var(--ease); }
.seg2 button.on { background:var(--ink); color:#fff; }
.lwiz { border-radius:26px; background:#fff; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); padding:18px 20px 16px; display:flex; flex-direction:column; min-width:0; min-height:330px; }
.lpills { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:4px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.lpills button { display:flex; align-items:center; justify-content:center; gap:7px; height:36px; border-radius:10px; border:0; background:none; color:#a3a69c; cursor:pointer; font-family:var(--fu); font-size:13px; font-weight:600; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease); }
.lpills button b { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; background:var(--card); color:var(--muted); transition:inherit; }
.lpills button.done { color:var(--ink); } .lpills button.done b { background:var(--olive); color:#fff; }
.lpills button.on { background:var(--card); color:var(--ink); } .lpills button.on b { background:var(--ink); color:#fff; }
.lpages { flex:1; padding:16px 0 4px; min-width:0; }
.lpage { display:none; } .lpage.on { display:block; }
.lq { font-family:var(--fu); font-size:15px; font-weight:600; letter-spacing:var(--lsu); margin-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.lq span { font-size:12px; font-weight:500; color:var(--muted); }
.lcs { display:flex; flex-wrap:wrap; gap:6px; }
.lc { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px 0 9px; border-radius:99px; border:0; background:#fff; color:var(--ink); cursor:pointer; box-shadow:inset 0 0 0 1px #e3e4dc;
  font-family:var(--fu); font-size:13.5px; font-weight:500; white-space:nowrap; transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .3s cubic-bezier(.34,1.56,.64,1); }
.lc:hover { transform:translateY(-2px); box-shadow:inset 0 0 0 1px #c9cbc4, 0 6px 14px rgba(30,34,24,.08); }
.lc i { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); flex-shrink:0; }
.lc em { font-style:normal; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--olive); }
.lc.on { background:var(--ink); color:#fff; box-shadow:none; } .lc.on em { color:#c9d8b9; }
.lc:not([data-g="top"]):not(:has(i)) { padding-left:13px; }
.lc.nope { animation:nope .4s ease; }
.fseg { margin:0 0 10px; }
.fwrap .hst { display:grid; grid-auto-flow:column; grid-template-rows:repeat(3, auto); grid-auto-columns:max-content; gap:6px; }
.lpage .din { width:100%; }
.lhint { font-size:13px; line-height:18px; color:var(--muted); margin-top:10px; }
.lnav { display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.lback, .lnext { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 14px; border-radius:12px; border:0; cursor:pointer; font-family:var(--fu); font-size:13.5px; font-weight:600; }
.lback { background:none; color:var(--muted); padding-left:6px; } .lback:hover { color:var(--ink); }
.lnext { background:var(--card); color:var(--ink); transition:background .2s var(--ease), transform .3s cubic-bezier(.34,1.56,.64,1); } .lnext:hover { background:#ecefe6; }
.lnext.golive { background:var(--olive); color:#fff; } .lnext.golive:hover { background:var(--olive-d); }
.lnext:disabled { opacity:.45; cursor:default; }
.lback svg, .lnext svg { width:12px; height:12px; }

/* add on illustrations */
.xart { width:52px; height:52px; flex-shrink:0; transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.xb:hover .xart { transform:translateY(-3px) rotate(-6deg) scale(1.05); }

/* guests */
.gbox { padding:20px 22px; border-radius:22px; background:#fff; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); margin-bottom:8px; }
.gtop { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.gnum { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.gnum b { font-family:var(--fd); font-weight:700; font-size:48px; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; color:var(--olive); }
.gnum span { font-size:15px; color:var(--muted); }
.gpre { display:flex; gap:4px; flex-wrap:wrap; }
.gpre button { height:32px; padding:0 12px; border-radius:99px; border:0; background:var(--card); color:var(--ink); cursor:pointer; font-family:var(--fu); font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; transition:background .2s var(--ease), color .2s var(--ease); }
.gpre button:hover { background:#ecefe6; } .gpre button.on { background:var(--ink); color:#fff; }
.gbox #guests { margin:16px 0 12px; }
.gcups { display:grid; grid-template-columns:repeat(20, 1fr); gap:5px; }
.gcups i { aspect-ratio:1; border-radius:50%; background:#efefea; box-shadow:inset 0 0 0 1px rgba(0,0,0,.03); transition:background .3s var(--ease); }
.gcups i.on { background:radial-gradient(circle at 42% 38%, #e2c79f 0 25%, #a8763f 70%); box-shadow:0 0 0 2px #fff, 0 2px 4px rgba(30,34,24,.15); }
.gcups i.in { animation:cupin .45s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:var(--d); }
@keyframes cupin { from { transform:scale(0); } }
.gcap { font-size:12.5px; color:var(--muted); margin-top:12px; }
.details { margin-top:0; }

@media (max-width:1199px) { .lab { grid-template-columns:1fr; } .lprev { flex-direction:row; text-align:left; padding:16px; gap:14px; } .lprev .cup.xl { --s:90px; } .lcup { margin:0; } .lprev .seg2 { margin:0 0 0 auto; } .lname, .lrec { min-height:0; } .lprev > div:nth-child(2) { flex:1; } }
@media (max-width:809px) {
  .pt { width:148px; height:190px; } .pt .cup { --s:72px; }
  .lprev { flex-wrap:wrap; } .lprev .cup.xl { --s:72px; } .lname { font-size:17px; line-height:22px; }
  .lwiz { padding:14px; min-height:0; } .lpills button { font-size:0; gap:0; } .lpills button b { font-size:11px; } .lpills button.on { font-size:12px; gap:6px; }
  .lc { height:34px; font-size:13px; }
  .gnum b { font-size:40px; } .gcups { grid-template-columns:repeat(10, 1fr); gap:6px; } .gcups i:nth-child(n+21) { display:none; }
  .xart { width:44px; height:44px; }
}
/* surprise me */
.dice { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:99px; border:0; cursor:pointer; margin-top:8px;
  background:linear-gradient(120deg, #486137, #6d8a55); color:#fff; font-family:var(--fu); font-size:13px; font-weight:600; box-shadow:0 6px 16px rgba(72,97,55,.28);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s var(--ease); }
.dice svg { width:16px; height:16px; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.dice:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(72,97,55,.34); } .dice:hover svg { transform:rotate(90deg); }
.dice.rolling svg { animation:diceroll .3s linear infinite; }
@keyframes diceroll { to { transform:rotate(360deg); } }
.dice.landed { animation:bump .5s cubic-bezier(.34,1.56,.64,1); }
.lcup .cup { transition:transform .12s ease; }
.lprev .seg2 { margin-top:auto; }
@media (max-width:1199px) { .lprev .dice { margin:0; } }

/* real latte art (heart / tulip / rosetta) replaces the soft blur */
.cup.t-art s::after, .cup.t-art s::before { content:none; }
.cup .lart { position:absolute; inset:9%; width:82%; height:82%; fill:#fff6e8; stroke:#fff6e8; opacity:.94; filter:drop-shadow(0 0 .6px rgba(255,246,232,.9)); }
.cup.t-matcha .lart { fill:#fbfbf2; stroke:#fbfbf2; opacity:.9; }
.cup.t-art s { background:radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--liq) 82%, #fff3e2) 0 30%, var(--liq) 72%, color-mix(in srgb, var(--liq) 78%, #000) 100%); }
/* little cups on the lab chips (base + topping) */
.cup.chipcup { --s:24px; box-shadow:0 2px 5px rgba(30,34,24,.14), inset 0 0 0 1px rgba(0,0,0,.04); }
.cup.chipcup em { display:none; }
.cup.chipcup.iced i { border-radius:2px; }
.cup.chipcup.iced b { box-shadow:inset 0 0 0 1.2px var(--olive); }
.lc.wc { padding-left:6px; gap:8px; }
.lc i { background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff) 0 22%, var(--c) 70%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.1); }

/* ---------- realistic latte (Timmy: art more blended in, coffee more real) ---------- */
.cup.t-art s, .cup.t-matcha s { --cre:color-mix(in srgb, var(--liq) 62%, #f2d6ad); --dark:color-mix(in srgb, var(--liq) 72%, #2c1a10);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 88%, color-mix(in srgb, var(--liq) 45%, #fff4e4) 91%, transparent 96%),
    radial-gradient(circle at 46% 44%, var(--cre) 0 30%, var(--liq) 58%, var(--dark) 86%, var(--liq) 100%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.22), inset 0 -2px 5px rgba(255,236,205,.18); }
.cup.t-matcha s { --cre:color-mix(in srgb, var(--liq) 60%, #f1f3dc); --dark:color-mix(in srgb, var(--liq) 78%, #23331a); }
.cup .lart { fill:#f3e4cc; stroke:#f3e4cc; opacity:.9; filter:url(#lartsoft); }
.cup.t-matcha .lart { fill:#f4f2e2; stroke:#f4f2e2; opacity:.86; }
.cup.chipcup .lart { filter:none; opacity:.85; }