/* Little Kettle · menu (sticky chips, search, list rows with photo tiles, order bar), today's special and How it works. Tokens from style.css. */
:root{--mr:24px;--hair:rgba(42,29,20,.12)}
[data-theme=night]{--hair:rgba(243,233,216,.12)}
.cups{padding-block:clamp(72px,8vw,120px) clamp(64px,7vw,104px)}
.cups button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* liquid swatch: a top view into the cup */
.liq{--s:.42em;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:50%;
  background:radial-gradient(circle at 36% 34%,rgba(255,255,255,.55) 0 8%,transparent 26%),radial-gradient(circle,var(--liq) 0 60%,#FBF7F1 62% 80%,rgba(42,29,20,.14) 82% 100%)}
.liq--iced{background:radial-gradient(circle at 38% 40%,rgba(255,255,255,.75) 0 9%,transparent 10%),radial-gradient(circle at 60% 56%,rgba(255,255,255,.6) 0 8%,transparent 9%),radial-gradient(circle at 36% 34%,rgba(255,255,255,.4) 0 8%,transparent 26%),radial-gradient(circle,var(--liq) 0 60%,#FBF7F1 62% 80%,rgba(42,29,20,.14) 82% 100%)}
.liq--img{background:var(--sand) center/120% no-repeat;box-shadow:inset 0 0 0 1px rgba(42,29,20,.08)}
.mprice{font-variant-numeric:tabular-nums;white-space:nowrap}
.mprice small{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:500;color:var(--muted);letter-spacing:.01em}
.mprice s{color:var(--muted);font-weight:400;margin-left:4px}

/* fly-to-bag feedback */
.fly{position:fixed;z-index:90;width:44px;height:44px;pointer-events:none;display:grid;place-items:center;border-radius:50%;background:var(--paper);box-shadow:0 10px 24px -10px rgba(70,40,15,.5)}
.fly .liq{--s:30px}
.fly--img img{width:40px;height:40px;object-fit:contain}

/* today's special art: cup + sweet */
.sp__cup{position:absolute;left:10%;bottom:12%;width:40%;z-index:1;filter:drop-shadow(0 18px 18px rgba(70,40,15,.18))}
.sp__sweet{position:absolute;left:38%;bottom:4%;width:56%;filter:drop-shadow(0 16px 16px rgba(70,40,15,.2))}
.sp__cup .pcup > img,.sp__cup .pcup > svg{transform:scale(1.5);transform-origin:50% 86%}

/* ---------- How it works (restyled: one connected flow, no boxes) ---------- */
.how2{padding-block:clamp(72px,8vw,120px);background:var(--bg)}
.how2__title{font-size:clamp(2rem,1.4rem + 2vw,3rem);letter-spacing:-.04em}
.how2__flow{list-style:none;margin:clamp(32px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.how2__flow li{position:relative}
.how2__flow li:not(:last-child)::after{content:"";position:absolute;top:27px;left:72px;right:calc(-1 * clamp(20px,3vw,48px) + 12px);height:1px;background:var(--hair)}
.how2__ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--paper);border:1px solid var(--hair);color:var(--brand)}
.how2__ic .ic{width:24px;height:24px}
.how2__flow h3{font-size:1.3rem;margin-top:20px;letter-spacing:-.02em}
.how2__flow p{color:var(--muted);margin-top:6px;max-width:30ch;line-height:1.5}
.how2__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin:clamp(40px,5vw,64px) 0 0;padding-top:20px;border-top:1px solid var(--hair)}
.how2__facts dt{font-size:.85rem;color:var(--muted)}
.how2__facts dd{margin:4px 0 0}
@media (max-width:767px){
  .how2__flow{grid-template-columns:minmax(0,1fr);gap:28px}
  .how2__flow li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px}
  .how2__flow li .how2__ic{grid-row:span 2}
  .how2__flow h3{margin-top:4px}
  .how2__flow li:not(:last-child)::after{top:64px;bottom:-24px;left:27px;right:auto;width:1px;height:auto}
  .how2__facts{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ---------- Menu list ---------- */
.cups--menu{padding-bottom:clamp(56px,6vw,96px)}
.m4__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:20px 48px;align-items:end}
.m4__title{font-size:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);letter-spacing:-.045em;line-height:1}
.m4__intro{color:var(--muted);margin-top:10px;max-width:48ch;line-height:1.5}
.m4search{position:relative;display:block}
.m4search .ic{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.m4search input{width:100%;height:52px;padding:0 16px 0 46px;border-radius:14px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:500 1rem "Figtree",sans-serif;transition:border-color 200ms ease,box-shadow 200ms ease}
.m4search input::placeholder{color:var(--muted);opacity:1}
.m4search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%,transparent)}
.m4nav{position:sticky;top:var(--hdr);z-index:6;margin-top:clamp(24px,3vw,36px);background:color-mix(in oklab,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.m4nav__in{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-block:12px}
.m4nav__in::-webkit-scrollbar{display:none}
.m4nav a{flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-radius:12px;border:1.5px solid color-mix(in oklab,var(--brand) 55%,transparent);color:var(--brand);font:600 .95rem "Bricolage",sans-serif;letter-spacing:-.01em;text-decoration:none;transition:background-color 200ms ease,color 200ms ease,transform 160ms var(--ease-out)}
.m4nav a .ic{width:18px;height:18px}
.m4nav a[aria-current]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.m4nav a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.m4nav a:not([aria-current]):hover{background:var(--brand-soft)}}
.m4__body{padding-top:8px}
.m4s{scroll-margin-top:calc(var(--hdr) + 84px);padding-top:clamp(28px,3vw,40px)}
.m4s__t{font-size:clamp(1.45rem,1.25rem + .6vw,1.8rem);letter-spacing:-.03em;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.m4s__t small{font:500 .9rem "Figtree",sans-serif;color:var(--muted);letter-spacing:0}
.m4s ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
.m4r{display:grid;grid-template-columns:minmax(0,1fr) 148px;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--hair)}
.m4r__name{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:600 1.2rem "Bricolage",sans-serif;letter-spacing:-.02em;line-height:1.2}
.m4badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;border:1px solid color-mix(in oklab,var(--terra) 60%,transparent);color:var(--terra);font:700 .66rem "Figtree",sans-serif;letter-spacing:.07em;text-transform:uppercase}
.m4badge .ic{width:13px;height:13px}
.m4r__note{color:var(--muted);font-size:.92rem;line-height:1.45;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m4r__price{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:700;font-size:1.02rem}
.m4r__price .liq{--s:14px}
.m4r__pic{position:relative;width:148px;aspect-ratio:1;border-radius:20px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 90% at 50% 35%,color-mix(in oklab,var(--liq) 14%,#FCF7EF) 0%,color-mix(in oklab,var(--liq) 10%,var(--sand)) 100%);border:1px solid var(--hair)}
.m4r__pic .pcup{position:absolute;left:50%;top:6%;width:96%;transform:translateX(-50%)}
.m4r__pic .pcup > img,.m4r__pic .pcup > svg{transform:scale(1.32);transform-origin:50% 50%}
.m4r__pic.is-sweet .cut{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(70,40,15,.18))}
.m4add{position:absolute;right:8px;bottom:8px;z-index:2;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);box-shadow:0 6px 14px -8px rgba(70,40,15,.5);transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.m4add .ic{width:18px;height:18px}
.m4add:active{transform:scale(.92)}
.m4add.is-added{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.m4add:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.m4add:hover{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}}
[data-theme=night] .m4r__pic{background:radial-gradient(90% 90% at 50% 35%,#26314A,#1A2236)}
/* today's special: one wide row with a sunrise-sand tile */
.m4s--special ul{grid-template-columns:minmax(0,1fr)}
.m4r--special{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border-bottom:0;padding:18px 0 4px}
.m4r--special .m4r__name{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem)}
.m4r--special .m4r__price .mprice{font-size:1.2rem}
.m4r__pic--duo{width:100%;aspect-ratio:auto;height:220px;background:radial-gradient(70% 120% at 30% 100%,#F3D9AE 0%,#F6E8D3 55%,#FBF4EA 100%)}
[data-theme=night] .m4r__pic--duo{background:radial-gradient(70% 120% at 30% 100%,#3A3550,#1A2236)}
.m4r__pic--duo .sp__cup{left:22%;bottom:-4%;width:26%}
.m4r__pic--duo .sp__sweet{left:44%;bottom:2%;width:34%}
.m4badge--sun{border-color:transparent;background:color-mix(in oklab,var(--gold) 22%,transparent);color:var(--brand)}
.m4empty{padding:40px 0;color:var(--muted)}
/* floating review-order bar */
.m4bar{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:min(520px,calc(100% - 32px));min-height:60px;padding:0 22px 0 10px;border:0;border-radius:999px;
  background:var(--ink);color:var(--bg);font:600 1rem "Figtree",sans-serif;box-shadow:0 18px 40px -16px rgba(40,24,10,.6);
  transform:translate(-50%,140%);opacity:0;pointer-events:none;transition:transform 300ms var(--ease-out),opacity 200ms ease}
.m4bar.is-on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.m4bar:active{transform:translate(-50%,0) scale(.98)}
.m4bar__n{display:grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border-radius:999px;background:var(--bg);color:var(--ink);font-variant-numeric:tabular-nums}
.m4bar__t{text-align:center}
.m4bar__sum{font-variant-numeric:tabular-nums}
.m4bar.has-items .m4bar__n{background:var(--gold);color:#2A1D14}
@media (max-width:900px){.m4__head{grid-template-columns:minmax(0,1fr)}.m4s ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){
  .m4r{grid-template-columns:minmax(0,1fr) 116px;gap:14px;padding:18px 0}
  .m4r__pic{width:116px;border-radius:18px}
  .m4add{width:36px;height:36px;right:6px;bottom:6px;border-radius:11px}
  .m4r__name{font-size:1.08rem}
  .m4r--special{grid-template-columns:minmax(0,1fr);gap:16px}
  .m4r--special .m4r__txt{order:2}
  .m4r__pic--duo{height:190px}
  .m4r__pic--duo .sp__cup{left:16%;width:34%}
  .m4r__pic--duo .sp__sweet{left:44%;width:44%}
  .m4nav a{padding:0 14px;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.m4bar{transition:opacity 200ms ease}.m4bar,.m4bar.is-on{transform:translate(-50%,0)}}
.m4r__pic .pcup{top:-7%}
.m4r .m4r__pic--duo{width:100%;height:220px;aspect-ratio:auto}
.m4r__pic--duo .sp__cup .pcup{position:relative;left:auto;top:auto;width:100%;transform:none}
.m4r__pic--duo .sp__cup .pcup > img,.m4r__pic--duo .sp__cup .pcup > svg{transform:scale(1.5);transform-origin:50% 86%}
@media (max-width:767px){.m4r .m4r__pic--duo{height:190px}}
.m4r__pic .pcup{left:44%}
.toast{bottom:calc(92px + env(safe-area-inset-bottom))}

/* ---------- clear plastic cup (cold drinks): the label is printed in normal blend, the cup sits a little lower ---------- */
.pcup--cold .pcup__ink{mix-blend-mode:normal;opacity:1}
.m4r__pic .pcup--cold{top:-30%;left:46%}
.m4r__pic .pcup--cold > img,.m4r__pic .pcup--cold > svg{transform:scale(1.62);transform-origin:50% 62%}
.m4r__pic--duo .sp__cup .pcup--cold > img,.m4r__pic--duo .sp__cup .pcup--cold > svg{transform:scale(1.8);transform-origin:50% 80%}
/* live previews: zoom the clear cup so the label (name + drink) reads */
.opt__top{grid-template-columns:120px minmax(0,1fr) auto}
.opt__top .pcup{width:120px;height:150px}
.opt__top .pcup--cold > img,.opt__top .pcup--cold > svg{transform:scale(1.9);transform-origin:50% 64%}
.stk-preview .pcup--cold > img,.stk-preview .pcup--cold > svg{transform:scale(1.5);transform-origin:50% 68%}
.line .pcup--thumb.pcup--cold > img,.line .pcup--thumb.pcup--cold > svg{transform:scale(1.75);transform-origin:50% 64%}
.cup--photo .pcup--cold > img,.cup--photo .pcup--cold > svg{transform:scale(1.5);transform-origin:50% 68%}