/* Ninth Harbor · menu (sticky chips, search, list rows with image tiles, order bar), V60 feature row, How it works. Tokens from style.css. */
:root{--hair:rgba(24,52,111,.12)}
:root[data-theme="night"]{--hair:rgba(255,255,255,.12)}
.cups button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mprice{font-variant-numeric:tabular-nums;white-space:nowrap}

/* fly-to-bag: the cup (or logo) arcs up and drops into the bag */
.fly{position:fixed;z-index:90;width:44px;height:44px;pointer-events:none;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 10px 24px -10px rgba(15,37,82,.55)}
.fly img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.fly--cup img{width:38px;height:38px;border-radius:0;object-fit:contain}

/* ---------- How it works ---------- */
.how2{padding-block:clamp(64px,7vw,104px) clamp(24px,3vw,40px);background:var(--bg);border-top:1px solid var(--hair)}
.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(--tint);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 ---------- */
.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(--tint);color:var(--ink);font:500 1rem "Figtree",sans-serif;transition:border-color 200ms ease,box-shadow 200ms ease,background-color 200ms ease}
.m4search input::placeholder{color:var(--muted);opacity:1}
.m4search input:focus{outline:none;background:var(--bg);border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 16%,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;scroll-padding-inline:var(--pad,20px);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent)}
.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:999px;border:1.5px solid color-mix(in oklab,var(--brand) 28%,transparent);background:var(--paper);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);box-shadow:0 8px 18px -10px color-mix(in oklab,var(--brand) 70%,transparent)}
.m4nav a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.m4nav a:not([aria-current]):hover{background:var(--tint)}}
.m4__body{padding-top:8px}
.m4s{scroll-margin-top:calc(var(--hdr) + 72px);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) 136px;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair);cursor:pointer;border-radius:4px}
.m4r:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
/* brand menus use bold uppercase sans for item names */
.m4r__name{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:800 1.02rem/1.25 "Figtree",sans-serif;letter-spacing:.05em;text-transform:uppercase}
.m4badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--tint);color:var(--brand);font:700 .66rem "Figtree",sans-serif;letter-spacing:.08em;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:8px;font-weight:700;font-size:1.02rem}
.m4r__pic{width:136px;aspect-ratio:1;border-radius:20px;transition:transform .4s var(--ease-out)}
.m4r__pic .tile__img{transition:transform .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.m4r:hover .m4r__pic .tile__img{transform:translateY(-3%) rotate(-2deg)}.m4r:hover .m4r__name{color:var(--brand-2)}}
.m4add{position:absolute;right:6px;bottom:6px;z-index:2;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;border:1px solid var(--hair);background:var(--raise);color:var(--ink);box-shadow:0 6px 14px -8px rgba(15,37,82,.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)}}
/* V60 feature: one wide row with the three flavour posters */
.m4s--special ul{grid-template-columns:minmax(0,1fr)}
.m4r--special{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);border-bottom:0;padding:18px 0 4px}
.m4r--special .m4r__name{font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);letter-spacing:.03em}
.m4r--special .m4r__price .mprice{font-size:1.2rem}
.m4r__pic--duo{position:relative;width:100%;aspect-ratio:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px;border-radius:24px;background:var(--tint)}
.m4r__pic--duo img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
.m4r__pic--duo .m4add{right:16px;bottom:16px;width:40px;height:40px;border-radius:12px}
.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(--brand);color:var(--on-brand);font:600 1rem "Figtree",sans-serif;box-shadow:0 18px 40px -16px rgba(10,24,56,.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:color-mix(in srgb,var(--on-brand) 16%,transparent);color:var(--on-brand);font-variant-numeric:tabular-nums}
.m4bar.has-items .m4bar__n{background:var(--on-brand);color:var(--brand)}
.m4bar__t{text-align:center}
.m4bar__sum{font-variant-numeric:tabular-nums}
@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:16px 0}
  .m4r__pic{width:116px;border-radius:18px}
  .m4add{width:32px;height:32px;right:5px;bottom:5px}
  .m4r__name{font-size:.96rem}
  .m4r--special{grid-template-columns:minmax(0,1fr);gap:16px}
  .m4r--special .m4r__txt{order:2}
  .m4r__pic--duo{gap:6px;padding:6px;border-radius:20px}
  .m4r__pic--duo img{border-radius:12px}
  .m4r__pic--duo .m4add{right:12px;bottom:12px}
  .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)}}
/* the order bar and toast step aside while the bag is open, and the toast sits above the bar */
body:has(.bag.is-open) .m4bar,body:has(.bag:not([hidden]).is-open) .toast{opacity:0;pointer-events:none;transform:translate(-50%,140%)}
body:has(.m4bar.is-on) .toast{bottom:calc(92px + env(safe-area-inset-bottom))}

/* ===== product view: tap a row to see it big ===== */
html.pv-on{overflow:hidden}
.pview__panel{padding-top:12px;max-height:94svh;overflow-y:auto}
.pview__x{position:absolute;top:14px;right:14px;z-index:3;background:var(--paper)}
.pview__pic{margin:4px 0 18px}
.pview__art.m4r__pic{width:100%;aspect-ratio:1/1;height:auto;border-radius:24px}
.pview__art.m4r__pic--duo{aspect-ratio:auto}
.pview__cat{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pview__txt h2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:800 clamp(1.4rem,1.2rem + 1vw,1.8rem)/1.15 "Figtree",sans-serif;letter-spacing:.04em;text-transform:uppercase;margin-top:4px}
.pview__note{color:var(--muted);margin-top:8px;line-height:1.5}
.pview__note:empty{display:none}
.pview__price{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:700;font-size:1.15rem}
@media (min-width:700px){.pview__panel{width:min(460px,100%)}}
@media (max-width:420px){.pview__art.m4r__pic:not(.m4r__pic--duo){max-height:40svh;aspect-ratio:auto;height:40svh}}
html.pv-on .m4bar{opacity:0;pointer-events:none;transform:translate(-50%,140%)}
/* the V60 poster strip always spans its column (beats the square tile sizes above) */
.m4r__pic.m4r__pic--duo{width:100%;aspect-ratio:auto}
/* night: the add button and the shadows sit on navy */
:root[data-theme="night"] .m4add{border-color:rgba(255,255,255,.2);box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
:root[data-theme="night"] .m4bar{box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
:root[data-theme="night"] .m4nav a[aria-current]{box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}


/* design strip at the top of the menu: two navy photos, no text */

/* ---------- Ordering is on: orders are sent to the café on WhatsApp (no online payment). The demo order-status button stays hidden. ---------- */
#statusBtn{display:none!important}
body.has-order .hdr__logo{visibility:visible}

/* Iced / Hot switch on hot-or-cold drinks */
.m4temp{display:inline-flex;margin-top:10px;padding:3px;border-radius:999px;background:var(--tint);gap:2px}
.m4temp button{min-height:30px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 .78rem/1 Figtree,sans-serif;letter-spacing:.04em;cursor:pointer}
.m4temp button[aria-pressed="true"]{background:var(--brand,#18346F);color:var(--on-brand,#fff)}
#pvTemp .m4temp{margin-top:14px}
#pvTemp .m4temp button{min-height:38px;padding:0 20px;font-size:.88rem}