/* Bitter Coffee, version 2. White page in their logo colours: black + logo orange. WhatsApp actions use WhatsApp green with dark text (white on it is 2:1). Buttons and chips are pills, cards 14px, inputs 10px. */
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/bricolage.woff2) format('woff2'); font-weight: 600 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url(fonts/dmsans.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
:root {
  --bg: #fff; --surface: #f5f5f5; --surface-2: #ebebeb; --ink: #111; --muted: #5c5c5c; --line: rgb(17 17 17 / .13);
  --orange: #e0601a; --orange-dk: #c85210; --on-orange: #111; --open: #0b7a43; --warn: #a8460a;
  --wa: #25d366; --wa-dk: #1ebe5b; --on-wa: #10231a;
  --head: 'Bricolage Grotesque', system-ui, sans-serif; --body: 'DM Sans', system-ui, sans-serif;
  --top-h: 64px; --ease: cubic-bezier(.22, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); color-scheme: light; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--head); letter-spacing: -.02em; line-height: 1.05; }
h2 { font-size: clamp(30px, 5vw, 44px); font-weight: 800; }
.wrap { width: min(100% - 40px, 1160px); margin-inline: auto; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 28px; border-radius: 99px; font: 700 16px/1 var(--body); white-space: nowrap;
  transition: background-color .25s, transform .25s var(--ease); }
.btn:active { transform: scale(.98); }
.btn.sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-main { background: var(--orange); color: var(--on-orange); }
.btn-wa { background: var(--wa); color: var(--on-wa); }
.btn-line { box-shadow: inset 0 0 0 1.5px var(--line); }
@media (hover: hover) { .btn-main:hover { background: var(--orange-dk); } .btn-wa:hover { background: var(--wa-dk); } .btn-line:hover { background: var(--surface-2); } }
.txt-link { font-weight: 600; border-bottom: 1.5px solid var(--orange); padding-bottom: 2px; }
.ic { width: 18px; height: 18px; flex: none; }

/* header */
.top { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--top-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; background: rgb(255 255 255 / .96); box-shadow: 0 1px 0 var(--line); }
.logo { display: flex; align-items: center; gap: 10px; }
.logo img { width: 40px; height: 40px; }
.logo b { font: 800 18px/1 var(--head); letter-spacing: -.01em; white-space: nowrap; }
.top-nav { display: none; gap: 28px; margin-left: auto; font-weight: 600; font-size: 15px; }
.top-nav a:hover { color: var(--orange); }
.branch-chip { min-height: 38px; padding: 0 16px; border-radius: 99px; font-weight: 700; font-size: 14px; background: var(--orange); color: var(--on-orange); white-space: nowrap; }
.branch-chip.on { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--orange); }
@media (min-width: 760px) { .top-nav { display: flex; } .top { padding: 0 max(20px, calc((100vw - 1160px) / 2)); } }

/* hero: tagline + a fan of their real drink photos */
.hero { padding: calc(var(--top-h) + 32px) 20px 36px; display: grid; gap: 30px; align-content: start; overflow: hidden; }
.hero h1 { font-size: clamp(42px, 11.5vw, 76px); font-weight: 800; line-height: 1; text-wrap: balance; }
.lead { margin-top: 16px; font-size: clamp(16.5px, 2vw, 19px); color: var(--muted); max-width: 44ch; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 24px; }
/* Seven drinks, mango in front. Phones and the desktop split show five, the two outermost are hidden. */
.fan { position: relative; height: min(256px, 66vw); width: 100%; margin-inline: auto; }
.fan img { position: absolute; top: 0; left: 50%; width: auto; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 36px -16px rgb(17 17 17 / .45);
  transform: translateX(calc(-50% + var(--x, 0%))) rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.fan img:nth-child(-n+2) { display: none; }
.fan img:nth-child(5) { --x: -44%; --r: -5deg; --s: .86; } .fan img:nth-child(6) { --x: 44%; --r: 5deg; --s: .86; }
.fan img:nth-child(3) { --x: -82%; --r: -10deg; --s: .72; } .fan img:nth-child(4) { --x: 82%; --r: 10deg; --s: .72; }
@media (min-width: 600px) {
  .hero { min-height: 100dvh; }
  .fan { height: clamp(300px, 44vh, 380px); }
  .fan img:nth-child(-n+2) { display: block; }
  .fan img:nth-child(5) { --x: -56%; } .fan img:nth-child(6) { --x: 56%; }
  .fan img:nth-child(3) { --x: -102%; } .fan img:nth-child(4) { --x: 102%; }
  .fan img:nth-child(1) { --x: -140%; --r: -15deg; --s: .6; } .fan img:nth-child(2) { --x: 140%; --r: 15deg; --s: .6; }
}
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; align-content: center; padding-inline: max(20px, calc((100vw - 1160px) / 2)); gap: 40px; }
  .hero h1 { font-size: clamp(46px, 4.1vw, 60px); }
  .fan { height: min(58vh, 30vw, 430px); }
  .fan img:nth-child(-n+2) { display: none; }
  .fan img:nth-child(5) { --x: -40%; } .fan img:nth-child(6) { --x: 40%; }
  .fan img:nth-child(3) { --x: -70%; --s: .66; } .fan img:nth-child(4) { --x: 70%; --s: .66; }
}

/* branch picker */
.pick { padding: 56px 0; background: var(--orange); color: var(--on-orange); }
.pick-list { display: grid; gap: 10px; margin-top: 24px; }
@media (min-width: 760px) { .pick-list { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.pick-b { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 12px 18px; text-align: left; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background-color .2s; }
.pick-b b { display: block; font: 700 19px/1.2 var(--head); }
.pick-b small { display: block; margin-top: 2px; font-size: 13.5px; }
.pick-b.on { box-shadow: inset 0 0 0 3px var(--ink); }
.radio { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); transition: box-shadow .2s; }
.on > .radio { box-shadow: inset 0 0 0 7px var(--ink); }
.st { color: var(--muted); }
.st.is-open { color: var(--open); }
.sheet .pick-b { background: var(--surface); margin-top: 10px; }
.sheet .pick-b.on { box-shadow: inset 0 0 0 2px var(--orange); }
.sheet .on > .radio { box-shadow: inset 0 0 0 7px var(--orange); }

/* fruity rail */
.picks { padding: 72px 0 8px; }
.row-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.arrows { display: none; gap: 8px; }
.arrows button { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 18px; }
.arrows button:hover { background: var(--surface-2); }
@media (min-width: 760px) { .arrows { display: flex; } }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 68%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 max(20px, calc((100vw - 1160px) / 2)); scroll-padding: 0 max(20px, calc((100vw - 1160px) / 2)); }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 760px) { .rail { grid-auto-columns: calc((min(100vw - 40px, 1160px) - 36px) / 4); } }
.card { position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: var(--surface); }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(17 17 17 / .9)); pointer-events: none; }
.card-txt { position: absolute; z-index: 1; inset: auto 0 0; padding: 16px; }
.card h3 { font-size: 20px; font-weight: 700; color: #fff; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.pr { display: flex; gap: 14px; font-weight: 700; font-size: 15px; }
.pr i { font-style: normal; font-weight: 500; color: var(--muted); }
.card .pr { color: #fff; }
.card .pr i { color: #fff; }
.plus { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--orange); color: var(--on-orange); font-size: 22px; font-weight: 600; line-height: 1; display: grid; place-items: center; transition: transform .25s var(--ease); }
.plus:active { transform: scale(.9); }
.plus.in { font-size: 14px; font-weight: 700; box-shadow: 0 0 0 3px rgb(255 255 255 / .55); }

/* full menu */
.menu { padding: 72px 0 90px; }
.seg { position: sticky; top: var(--top-h); z-index: 30; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 12px 20px; margin: 16px -20px 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.seg::-webkit-scrollbar { display: none; }
.seg button { flex: none; min-height: 40px; padding: 0 18px; border-radius: 99px; font-weight: 600; font-size: 15px; color: var(--muted); transition: background-color .2s, color .2s; }
.seg button.on { background: var(--ink); color: var(--bg); }
.cat { padding-top: 40px; scroll-margin-top: 24px; }
.cat > h3 { font-size: 24px; font-weight: 800; padding-bottom: 6px; }
.rows { list-style: none; display: grid; }
@media (min-width: 900px) { .rows { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.row { display: grid; grid-template-columns: 72px 1fr auto; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.row.no-img { grid-template-columns: 1fr auto; }
.row img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--surface); }
.row h4 { font: 600 16.5px/1.3 var(--body); letter-spacing: 0; }
.row .d { font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.row .pr { margin-top: 3px; }
.adds { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--surface); font-size: 14px; color: var(--muted); }
.adds b { color: var(--ink); }

/* branches + footer */
.visit, .foot { --ink: #fff; --muted: #c4c4c4; --line: rgb(255 255 255 / .18); --surface-2: #2a2a2a; --open: #5fdc9c; background: #111; color: var(--ink); }
.visit { padding: 72px 0; }
.visit-list { display: grid; margin-top: 16px; }
@media (min-width: 900px) { .visit-list { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.vb { padding: 22px 0; border-bottom: 1px solid var(--line); }
.vb:last-child { border-bottom: 0; }
@media (min-width: 900px) { .vb { border: 0; } }
.vb h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.vb .st { font-size: 14.5px; font-weight: 500; }
.vb-h { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.vb-addr { font-style: normal; display: block; }
.vb-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.foot { padding: 28px 0 110px; border-top: 1px solid var(--line); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.fine { font-size: 13px; color: var(--muted); }
.fine a { color: var(--ink); border-bottom: 1px solid var(--orange); }

/* cart bar */
.cartbar { position: fixed; z-index: 46; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 56px; padding: 0 22px; border-radius: 99px; background: var(--orange); color: var(--on-orange); font-size: 14.5px; font-weight: 600; box-shadow: 0 12px 30px -10px rgb(17 17 17 / .55);
  transform: translateY(150%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.cartbar b { font-size: 15.5px; }
@media (min-width: 760px) { .cartbar { left: auto; width: 380px; right: 24px; } }
body.has-cart .cartbar { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }

/* bottom sheet */
.veil { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .5); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet:focus { outline: none; }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--bg); border-radius: 14px 14px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
@media (min-width: 760px) { .sheet { left: auto; top: 0; width: 460px; max-height: none; border-radius: 0; transform: translateX(105%); } }
body.sheet-on .veil { opacity: 1; pointer-events: auto; }
body.sheet-on .sheet { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
body.sheet-on { overflow: hidden; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.sh-head h3 { font-size: 22px; font-weight: 800; line-height: 1.15; }
.x { flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--muted); }
.x:hover { background: var(--surface-2); }
.sh-body { flex: 1; overflow-y: auto; padding: 14px 22px 20px; overscroll-behavior: contain; }
.sh-note { color: var(--muted); font-size: 14.5px; }
.sh-img { width: 108px; height: 108px; border-radius: 14px; object-fit: cover; margin-bottom: 12px; }
.sh-branch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--surface); margin-bottom: 8px; }
.sh-branch small { display: block; font-size: 13px; color: var(--muted); }
.sh-branch b { display: block; font-size: 16px; }
.sh-branch .warn { margin-top: 3px; color: var(--warn); }
.line { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.line .t { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.3; }
.line .t small { display: block; font-weight: 400; font-size: 13.5px; color: var(--muted); }
.line .t span { display: block; font-weight: 500; font-size: 14px; color: var(--muted); margin-top: 2px; }
.qty { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 99px; background: var(--surface-2); }
.qty button { width: 36px; height: 36px; border-radius: 50%; font-size: 19px; line-height: 1; }
.qty output { min-width: 24px; text-align: center; font-weight: 700; font-size: 15px; }
.fld { margin-top: 20px; }
.lb { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 42px; padding: 0 16px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; font-weight: 500; transition: background-color .15s, color .15s; }
.chips button.on { background: var(--orange); color: var(--on-orange); box-shadow: none; font-weight: 700; }
.fld input, .fld textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgb(17 17 17 / .28); border-radius: 10px; font-size: 16px; background: #fff; }
.fld textarea { min-height: 76px; resize: vertical; }
.fld ::placeholder { color: var(--muted); }
.sh-foot { padding: 14px 22px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.tot { display: flex; justify-content: space-between; align-items: baseline; font: 800 20px/1.2 var(--head); margin-bottom: 12px; }
.send { width: 100%; }
.send[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.hint { text-align: center; font-size: 13px; color: var(--muted); margin-top: 7px; min-height: 18px; }
.hint:empty { display: none; }
.toast { position: fixed; z-index: 70; left: 50%; top: calc(var(--top-h) + 12px); transform: translate(-50%, -20px); padding: 10px 18px; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s var(--ease); white-space: nowrap; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* motion: hero enters once, sections fade up as they arrive */
@media (prefers-reduced-motion: no-preference) {
  .lead, .acts { animation: rise .9s var(--ease) both; } .acts { animation-delay: .1s; }
  .fan img { animation: deal .9s var(--ease) both; } .fan img:nth-child(-n+4) { animation-delay: .2s; } .fan img:nth-child(5), .fan img:nth-child(6) { animation-delay: .12s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes deal { from { opacity: 0; } }
.rv { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .rv { opacity: 1; transform: none; } }