/* ==========================================================================
   BREW CULTURE

   1. Fonts and colours        7. Footer
   2. Base                     8. Cart drawer
   3. Header                   9. Screen sizes (tablet, phone, tiny phone)
   4. Buttons and shared      10. Short landscape screens (phones on their side)
   5. Hero                    11. Touch screens, mouse hover
   6. Sections                12. Big screens and TVs, slow devices, foldables
                              13. Reduced motion

   Compatibility note: wherever a modern CSS feature is used (clamp, svh,
   aspect-ratio, env), a plain older value is written on the line BEFORE it.
   Older phones, tablets and TVs ignore the line they do not understand and
   keep the plain one. Please keep that order when you edit.
   ========================================================================== */

/* ---------- 1. Fonts and colours ---------- */
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../assets/fonts/inter-tight-rupee.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+20B9;
}

/* Lets the page colours glide smoothly when the background changes (new browsers only). */
@property --bg     { syntax: "<color>"; inherits: true; initial-value: #C4977A; }
@property --ink    { syntax: "<color>"; inherits: true; initial-value: #2A160D; }
@property --on-ink { syntax: "<color>"; inherits: true; initial-value: #F9E0C6; }
@property --card   { syntax: "<color>"; inherits: true; initial-value: #F9E0C6; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #5A2E1B; }
@property --muted  { syntax: "<color>"; inherits: true; initial-value: #462D21; }
@property --line   { syntax: "<color>"; inherits: true; initial-value: rgba(42, 22, 13, .22); }
@property --glass  { syntax: "<color>"; inherits: true; initial-value: rgba(196, 151, 122, .82); }

:root {
  /* brand colours, taken from the first page */
  --tan: #C4977A;
  --cream: #F9E0C6;
  --espresso: #2A160D;
  --coffee: #5A2E1B;   /* the rich brown from the poured coffee */

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: 20px;         /* side space; grows on bigger screens (section 9) */
  --head-h: 4rem;      /* header height */

  /* start colours (the page switches these as you scroll) */
  --bg: #C4977A; --ink: #2A160D; --on-ink: #F9E0C6; --card: #F9E0C6; --accent: #5A2E1B;
  --muted: #462D21; --line: rgba(42, 22, 13, .22); --glass: rgba(196, 151, 122, .82);
}
@media (min-width: 601px)  { :root { --head-h: 4.5rem; } }
@media (min-width: 640px)  { :root { --pad: 32px; } }
@media (min-width: 1000px) { :root { --pad: 48px; } }

/* One block per background. The <body> picks one as you scroll.
   --muted = softer text, --line = thin rules, --glass = see-through header. */
body[data-theme="tan"]      { --bg: #C4977A; --ink: #2A160D; --on-ink: #F9E0C6; --card: #F9E0C6; --accent: #5A2E1B; --muted: #462D21; --line: rgba(42, 22, 13, .22);   --glass: rgba(196, 151, 122, .82); }
body[data-theme="cream"]    { --bg: #F9E0C6; --ink: #2A160D; --on-ink: #F9E0C6; --card: #C4977A; --accent: #7A3E1D; --muted: #4F3A2E; --line: rgba(42, 22, 13, .22);   --glass: rgba(249, 224, 198, .82); }
body[data-theme="espresso"] { --bg: #2A160D; --ink: #F9E0C6; --on-ink: #2A160D; --card: #F9E0C6; --accent: #C4977A; --muted: #D4BCA5; --line: rgba(249, 224, 198, .22); --glass: rgba(42, 22, 13, .82); }
body[data-theme="coffee"]   { --bg: #5A2E1B; --ink: #F9E0C6; --on-ink: #5A2E1B; --card: #F9E0C6; --accent: #C4977A; --muted: #DCC0A7; --line: rgba(249, 224, 198, .22); --glass: rgba(90, 46, 27, .82); }

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 4.5rem; scroll-padding-top: var(--head-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 17px/1.6 "Helvetica Neue", Helvetica, Arial, sans-serif;
  font: 400 1.0625rem/1.6 var(--font);
  background: #C4977A; background: var(--bg);
  color: #2A160D; color: var(--ink);
  overflow-x: hidden;
  transition: --bg .9s ease, --ink .9s ease, --on-ink .9s ease, --card .9s ease, --accent .9s ease, --muted .9s ease, --line .9s ease, --glass .9s ease;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; -webkit-tap-highlight-color: rgba(42, 22, 13, .15); touch-action: manipulation; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: rgba(42, 22, 13, .15); touch-action: manipulation; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%; max-width: 77.5rem; margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
  padding-left: var(--pad); padding-right: var(--pad);
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));    /* keeps clear of notches in landscape */
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.section {
  position: relative; overflow: hidden;
  padding-top: 80px; padding-bottom: 80px;
  padding-top: clamp(72px, 9vw, 8rem); padding-bottom: clamp(72px, 9vw, 8rem);
}

.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--espresso); color: var(--cream); padding: 10px 16px; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: #2A160D; background: var(--ink); -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; pointer-events: none; }

/* shared text styles */
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; opacity: .8; }
.h2 { font-size: 3.2rem; font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 800; line-height: .95; letter-spacing: -.045em; }
.lead { max-width: 46ch; margin-top: 20px; color: #4F3A2E; color: var(--muted); font-size: 1.15rem; }

/* ---------- 3. Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); transition: background-color .3s, box-shadow .3s; }
.site-header__in { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; height: var(--head-h); }
.site-header.is-stuck {
  background: #C4977A; background: var(--bg); background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(128, 100, 80, .35); box-shadow: 0 1px 0 var(--line);
}
.logo { margin-right: 16px; font-weight: 800; font-size: 1.45rem; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.nav { display: flex; align-items: center; }
.nav > * + * { margin-left: 28px; }
.nav__link { font-weight: 700; font-size: .95rem; text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.cartbtn { font-weight: 700; font-size: .95rem; line-height: 1.2; background: transparent; border: 2px solid #2A160D; border-color: var(--ink); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background-color .2s, color .2s; white-space: nowrap; }
.cartbtn span { display: inline-block; min-width: 1ch; }
.cartbtn.bump span { animation: bump .45s var(--ease); }
@keyframes bump { 40% { transform: scale(1.5); } }

/* ---------- 4. Buttons and shared ---------- */
.btns { display: flex; flex-wrap: wrap; margin: -6px; }          /* spacing made with margins, so it works on every browser */
.btns > * { margin: 6px; }
.btn {
  display: inline-block; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; text-align: center; cursor: pointer;
  padding: 16px 28px; border-radius: 999px;
  border: 2px solid #2A160D; border-color: var(--ink);
  background: #2A160D; background: var(--ink);
  color: #F9E0C6; color: var(--on-ink);
  transition: transform .25s var(--ease), background-color .2s, color .2s;
}
.btn--ghost { background: transparent; color: #2A160D; color: var(--ink); }

.js .reveal { opacity: 0; -webkit-transform: translate3d(0, 36px, 0); transform: translate3d(0, 36px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; -webkit-transform: none; transform: none; }
.js .reveal.done { transition-delay: 0s; }
/* safety net: if the script ever fails to start, show everything after a few seconds */
.js-late .reveal { opacity: 1 !important; -webkit-transform: none !important; transform: none !important; }

.px { -webkit-transform: translate3d(0, var(--ty, 0px), 0); transform: translate3d(0, var(--ty, 0px), 0); will-change: transform; }
.deco { position: absolute; pointer-events: none; z-index: 0; -webkit-transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg)); transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg)); will-change: transform; }

/* ---------- 5. Hero ---------- */
.hero-wrap { position: relative; height: 300vh; }
.hero {
  position: -webkit-sticky; position: sticky; top: 0; overflow: hidden;
  height: 100vh;                           /* old browsers */
  height: calc(var(--vh, 1vh) * 100);      /* phones whose address bar moves (set by the script) */
  height: 100svh;                          /* newest browsers */
  min-height: 560px;
  background: #C4977A; background: var(--tan); color: #2A160D; color: var(--espresso); --p: 0;
}
.hero__inner { position: relative; height: 100%; container-type: inline-size; padding-top: 5.5rem; padding-top: calc(var(--head-h) + 6px); }

.hero__title {
  font-size: 22vw;
  font-size: min(23vw, 21rem, calc(var(--vh, 1vh) * 38));
  font-size: min(29.4cqi, 38svh);
  font-weight: 800; line-height: .8; letter-spacing: -.06em; color: #F9E0C6; color: var(--cream);
  -webkit-user-select: none; user-select: none; position: relative; z-index: 1;
}
.hero__line { display: block; will-change: transform; }
.hero__line--1 { -webkit-transform: translate3d(calc(var(--p) * 2.6vw), 0, 0); transform: translate3d(calc(var(--p) * 2.6vw), 0, 0); }
.hero__line--2 { -webkit-transform: translate3d(calc(var(--p) * -2.6vw), 0, 0); transform: translate3d(calc(var(--p) * -2.6vw), 0, 0); text-align: right; }
.hero__word { display: inline-block; white-space: nowrap; animation: rise 1s var(--ease) both; }
.hero__line--2 .hero__word { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(56px); } }

.hero__c, .hero__e { position: relative; display: inline-block; }
.hero__bean { position: absolute; left: -.3em; top: -.22em; width: .56em; z-index: 3; pointer-events: none;
  -webkit-transform: translate3d(0, calc(var(--p) * 60px), 0) rotate(calc(var(--p) * 28deg)); transform: translate3d(0, calc(var(--p) * 60px), 0) rotate(calc(var(--p) * 28deg)); }
.hero__bean img, .hero__bear img { width: 100%; height: auto; animation: float 6s ease-in-out infinite; }
.hero__bear { position: absolute; left: .105em; top: -.115em; width: .32em; z-index: 3; pointer-events: none; }   /* sits on top of the "e" */
.hero__bear img { animation: bob 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-14px) rotate(4deg); } }
@keyframes bob { 50% { transform: translateY(-4px); } }

.hero__art {
  position: absolute; left: 50%; bottom: -8%; z-index: 2;
  width: 48vw; height: 48vw;
  width: min(48vw, calc(var(--vh, 1vh) * 84), 43.75rem); height: min(48vw, calc(var(--vh, 1vh) * 84), 43.75rem);
  width: min(48vw, 84svh, 43.75rem); height: min(48vw, 84svh, 43.75rem);
  -webkit-transform: translateX(-45%); transform: translateX(-45%);
}
.hero__art img, .hero__art svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: opacity, transform; }

.hero__foot { position: absolute; left: var(--pad); bottom: 2.5rem; z-index: 3; max-width: 25ch; }
.hero__foot p { font-size: 1.15rem; font-weight: 500; line-height: 1.5; margin-bottom: 18px; }
.hero__foot .btns { flex-wrap: nowrap; }
.hero__foot .btn { padding: 14px 22px; font-size: .95rem; white-space: nowrap; }
.hero .btn { border-color: #2A160D; background: #2A160D; color: #F9E0C6; }
.hero .btn--ghost { background: transparent; color: #2A160D; }

.hero__hint { position: absolute; right: var(--pad); bottom: 2.5rem; z-index: 3; font-weight: 700; font-size: .95rem; display: flex; align-items: center; }
.hero__hint::after { content: ""; margin-left: 10px; width: 1px; height: 36px; background: currentColor; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; animation: drip 1.8s var(--ease) infinite; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Marquee (moving words strip) ---------- */
.marquee { background: #2A160D; color: #F9E0C6; overflow: hidden; white-space: nowrap; padding: 18px 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; position: relative; z-index: 2; }
.marquee__track { display: inline-block; animation: slide 36s linear infinite; }
.marquee span { margin: 0 26px; }
.marquee span::after { content: "\2726"; margin-left: 52px; color: #C4977A; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 6. Sections ---------- */
/* Intro */
.intro { min-height: 80vh; display: flex; align-items: center; }
.intro .wrap { position: relative; z-index: 1; }
.intro__text { font-size: 2.6rem; font-size: clamp(2rem, 5.2vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; max-width: 14em; }
.intro__text .w { opacity: .18; transition: opacity .35s ease; }
.intro__text .w.on { opacity: 1; }
.intro__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  margin-top: 56px; margin-top: clamp(40px, 7vw, 80px); padding-top: 32px;
  border-top: 1px solid rgba(128, 100, 80, .35); border-top-color: var(--line);
}
.intro__foot > * { margin-bottom: 20px; }
.intro__foot .btns { margin-bottom: 14px; }
.stat { display: flex; align-items: baseline; margin-right: 32px; }
.stat__n, .stat__plus { font-size: 4.5rem; font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: #C4977A; color: var(--accent); }
.stat__plus { margin-left: 4px; }
.stat__l { margin-left: 16px; font-weight: 600; line-height: 1.25; }

/* Signature drinks */
.drinks .eyebrow { margin-bottom: 0; }
.drink {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  grid-gap: 48px; gap: 48px;
  grid-gap: clamp(24px, 6vw, 6rem); gap: clamp(24px, 6vw, 6rem);
  padding-top: 64px; padding-bottom: 64px;
  padding-top: clamp(48px, 7vw, 6rem); padding-bottom: clamp(48px, 7vw, 6rem);
  border-bottom: 1px solid rgba(128, 100, 80, .35); border-bottom-color: var(--line);
}
.drink:first-child { padding-top: 40px; padding-top: clamp(32px, 4vw, 3.5rem); }
.drink:last-child { border-bottom: 0; padding-bottom: 0; }
.drink:nth-child(even) .drink__text { -webkit-box-ordinal-group: 3; order: 2; }
.drink__num { display: block; font-size: .9rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; opacity: .8; }
.drink__note { font-weight: 700; margin-bottom: 14px; }
.drink__name { font-size: 4rem; font-size: clamp(3rem, 7.4vw, 6.4rem); font-weight: 800; line-height: .88; letter-spacing: -.055em; margin-bottom: 20px; }
.drink__desc { max-width: 34ch; margin-bottom: 20px; color: #4F3A2E; color: var(--muted); }
.drink__price { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: 24px; }
.drink__card {
  position: relative; width: 100%; min-height: 340px; max-height: 520px; overflow: hidden;
  border-radius: 32px; background: #C4977A; background: var(--card);
  display: grid; align-items: center; justify-items: center;
  box-shadow: 0 30px 60px -30px rgba(42, 22, 13, .45);
}
@supports (aspect-ratio: 1 / 1) { .drink__card { min-height: 0; aspect-ratio: 1 / .9; } }
.drink__card::before { content: ""; position: absolute; left: 50%; top: 50%; width: 74%; height: 0; padding-bottom: 74%; border-radius: 50%; background: #F9E0C6; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.drink__card svg { position: relative; z-index: 1; width: 62%; max-width: 320px; height: auto; -webkit-transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg)); transform: translate3d(0, var(--ty, 0px), 0) rotate(var(--rot, 0deg)); will-change: transform; }

/* Full menu */
.menu .h2 { margin-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; margin: 31px -5px 35px; }
.tabs button { margin: 5px; font-weight: 700; font-size: .95rem; padding: 12px 22px; border-radius: 999px; border: 2px solid #F9E0C6; border-color: var(--ink); background: transparent; cursor: pointer; transition: background-color .2s, color .2s; }
.tabs button[aria-pressed="true"] { background: #F9E0C6; background: var(--ink); color: #2A160D; color: var(--on-ink); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(255px, 100%), 1fr)); grid-gap: 22px; gap: 22px; }
.mcard { background: #F9E0C6; background: var(--card); color: #2A160D; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; }
.js .mcard.done { transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.mcard__pic { height: 230px; display: grid; align-items: center; justify-items: center; background: #E9CAAF; }
.mcard__pic svg { height: 80%; width: auto; transition: transform .4s var(--ease); }
.mcard__meta { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.mcard__meta > * + * { margin-top: 6px; }
.mcard__meta h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.035em; line-height: 1.1; }
.mcard__meta p { flex: 1 1 auto; color: #5A3B2A; font-size: .95rem; line-height: 1.45; }
.mcard__buy { display: flex; justify-content: space-between; align-items: center; margin-top: 14px !important; }
.mcard__price { margin-right: 12px; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.add { font-weight: 700; font-size: .9rem; background: #2A160D; color: #F9E0C6; border: 0; border-radius: 999px; padding: 12px 20px; cursor: pointer; transition: background-color .2s, transform .2s; white-space: nowrap; }
.add.is-added { background: #3F6B34; }
.drink .add, .drink .buy-now { font-size: 1rem; }
.noscript { padding: 24px; border: 2px solid currentColor; border-radius: 16px; margin-top: 28px; }

/* Franchise */
.cta__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; grid-gap: 48px; gap: 48px; }
.cta__text .h2 { max-width: 12ch; }
.cta__text .btn { margin-top: 32px; }
.cta__art { justify-self: center; width: 100%; max-width: 440px; }
.cta__art img { width: 100%; height: auto; }
.deco--b { width: 110px; width: clamp(80px, 10vw, 9.4rem); left: 44%; bottom: 9%; }

/* ---------- 7. Footer ---------- */
.footer { background: #5A2E1B; color: #F9E0C6; overflow: hidden; position: relative; padding: 72px 0 28px; padding: clamp(56px, 8vw, 6rem) 0 28px; }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; margin-bottom: -12px; }
.footer__top > * { margin: 0 24px 12px 0; }
.footer__tag { font-size: 1.15rem; font-weight: 600; }
.footer__nav { display: flex; flex-wrap: wrap; }
.footer__nav a { margin: 0 28px 8px 0; font-weight: 700; text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.footer__nav a:last-child, .footer__top > :last-child { margin-right: 0; }
.footer .wrap { container-type: inline-size; }
.footer__word {
  font-size: 14vw;
  font-size: min(14vw, 13.4rem);
  font-size: 18.8cqi;
  font-weight: 800; line-height: .82; letter-spacing: -.065em;
  margin: 60px 0 20px -.04em; margin-top: clamp(40px, 8vw, 90px);
  white-space: nowrap; -webkit-user-select: none; user-select: none;
}
.footer__small { font-size: .9rem; opacity: .7; }

/* ---------- 8. Cart drawer ---------- */
.scrim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 70; background: rgba(42, 22, 13, .5); opacity: 0; transition: opacity .3s; }
.scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 80; width: 100%; max-width: 26.25rem;
  background: #F9E0C6; color: #2A160D;
  display: flex; flex-direction: column;
  padding: 22px 24px 22px;
  padding: calc(22px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) 24px;
  -webkit-transform: translateX(100%); transform: translateX(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s;
  box-shadow: -20px 0 50px rgba(0, 0, 0, .25);
  -webkit-overflow-scrolling: touch;
}
.drawer.is-open { -webkit-transform: none; transform: none; visibility: visible; transition: transform .35s var(--ease); }
.drawer .btn { background: #2A160D; border-color: #2A160D; color: #F9E0C6; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; font-size: 2rem; font-weight: 800; letter-spacing: -.04em; margin-bottom: 12px; }
.drawer__head button { font-weight: 700; font-size: .95rem; letter-spacing: 0; background: none; border: 0; cursor: pointer; padding: 12px 0 12px 16px; }
.drawer__list { flex: 1 1 auto; overflow: auto; list-style: none; margin: 0; padding: 0; -webkit-overflow-scrolling: touch; }
.drawer__list li { display: grid; grid-template-columns: 1fr auto; grid-gap: 4px 12px; gap: 4px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(42, 22, 13, .2); }
.drawer__list small { color: #5A3B2A; }
.drawer__list .empty { display: block; color: #5A3B2A; border: 0; }
.qty { display: flex; align-items: center; }
.qty button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #2A160D; background: none; cursor: pointer; font-weight: 700; line-height: 1; }
.qty span { min-width: 30px; text-align: center; font-weight: 700; }
.drawer__total { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.25rem; padding: 18px 0; }

/* ---------- 9. Screen sizes ---------- */
/* tablets and small laptops: the cups move to the middle */
@media (max-width: 1100px) {
  .hero__foot { display: none; }
  .hero__art {
    width: 100vw; height: 100vw;
    width: min(122vw, calc(var(--vh, 1vh) * 68)); height: min(122vw, calc(var(--vh, 1vh) * 68));
    width: min(122vw, 68svh); height: min(122vw, 68svh);
    bottom: -3%; -webkit-transform: translateX(-50%); transform: translateX(-50%);
  }
  .hero__hint { right: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: 22px; padding: 8px 16px; border-radius: 999px; background: rgba(196, 151, 122, .82); }
  .hero__hint::after { display: none; }
}
/* big phones and small tablets: one column */
@media (max-width: 820px) {
  .drink { grid-template-columns: minmax(0, 1fr); grid-gap: 28px; gap: 28px; }
  .drink:nth-child(even) .drink__text { -webkit-box-ordinal-group: 1; order: 0; }
  .drink__card { max-height: 380px; }
  .cta__in { grid-template-columns: minmax(0, 1fr); grid-gap: 24px; gap: 24px; }
  .cta__art { max-width: 340px; }
  .intro { min-height: 0; }
  .deco { display: none; }
}
/* phones */
@media (max-width: 600px) {
  .nav > * + * { margin-left: 16px; }
  .nav__link--opt { display: none; }
  .hero__title {
    font-size: 25vw;
    font-size: min(26vw, calc(var(--vh, 1vh) * 30));
    font-size: min(29.4cqi, 30svh);
  }
  .hero__inner {
    padding-top: 6.5rem;
    padding-top: calc(var(--head-h) + 7vh);
    padding-top: calc(var(--head-h) + 7svh);
  }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding-left: calc(var(--pad) - 5px); padding-right: calc(var(--pad) - 5px); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { white-space: nowrap; flex: 0 0 auto; }
  .intro__foot { flex-direction: column; align-items: flex-start; }
}
/* very small screens (folded phones, old small phones) */
@media (max-width: 340px) {
  .logo { font-size: 1.2rem; margin-right: 8px; }
  .nav__link { display: none; }
  .cartbtn { padding: 9px 14px; }
  .btn { padding: 15px 22px; }
  .h2 { font-size: 2.2rem; }
}

/* ---------- 10. Short landscape screens (phones on their side) ---------- */
@media (max-height: 560px) {
  :root { --head-h: 3.25rem; }
  .hero { min-height: 0; }
  .hero__foot { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 1100px) {
  .hero__title {
    max-width: 60%;
    font-size: 20vw;
    font-size: min(20vw, calc(var(--vh, 1vh) * 36));
    font-size: min(17cqi, 36svh);
  }
  .hero__line--2 { text-align: left; }
  .hero__inner { padding-top: 3.9rem; }
  .hero__art {
    left: auto; right: 2%; bottom: -8%;
    width: 52vw; height: 52vw;
    width: min(52vw, calc(var(--vh, 1vh) * 100)); height: min(52vw, calc(var(--vh, 1vh) * 100));
    width: min(52vw, 100svh); height: min(52vw, 100svh);
    -webkit-transform: none; transform: none;
  }
  .hero__hint { left: var(--pad); -webkit-transform: none; transform: none; bottom: 14px; }
  .drink__card { max-height: 300px; }
}

/* ---------- 11. Touch screens and mouse hover ---------- */
@media (pointer: coarse) {
  .nav__link { padding: 13px 4px; }
  .cartbtn { padding: 12px 18px; }
  .btn { padding: 18px 28px; }
  .add { padding: 14px 20px; }
  .qty button { width: 44px; height: 44px; }
  .drawer__head button { padding: 14px 0 14px 18px; }
  .tabs button { padding: 14px 22px; }
}
/* hover effects only where a mouse exists, so phones never get "stuck" hover colours */
@media (hover: hover) {
  .nav__link:hover, .footer__nav a:hover { background-size: 100% 2px; }
  .cartbtn:hover { background: #2A160D; background: var(--ink); color: #C4977A; color: var(--bg); }
  .btn:hover { -webkit-transform: translateY(-2px); transform: translateY(-2px); }
  .btn--ghost:hover { background: #2A160D; background: var(--ink); color: #F9E0C6; color: var(--on-ink); }
  .hero .btn--ghost:hover { background: #2A160D; color: #F9E0C6; }
  .tabs button:hover { background: #F9E0C6; background: var(--ink); color: #2A160D; color: var(--on-ink); }
  .mcard.done:hover { -webkit-transform: translateY(-6px); transform: translateY(-6px); box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .55); }
  .mcard:hover .mcard__pic svg { -webkit-transform: scale(1.08) rotate(-3deg); transform: scale(1.08) rotate(-3deg); }
  .add:hover { background: #7A3E1D; }
  .qty button:hover { background: #2A160D; color: #F9E0C6; }
}

/* ---------- 12. Big screens and TVs, slow devices, foldables ---------- */
/* everything is sized in rem, so making the root text bigger scales the whole page */
@media (min-width: 1920px) { html { font-size: 112.5%; } }
@media (min-width: 2560px) { html { font-size: 150%; } }
@media (min-width: 3400px) { html { font-size: 200%; } }

/* TVs (detected by the script): larger text, safe margins for overscan, clear focus ring for remote controls */
html.tv { font-size: 125%; }
html.tv { --pad: 5vw; }
@media (min-width: 1920px) { html.tv { font-size: 137.5%; } }
@media (min-width: 2560px) { html.tv { font-size: 187.5%; } }
@media (min-width: 3400px) { html.tv { font-size: 250%; } }
.tv a:focus, .tv button:focus { outline: 4px solid currentColor; outline-offset: 5px; }
.tv .btn:focus, .tv .cartbtn:focus, .tv .add:focus { -webkit-transform: scale(1.06); transform: scale(1.06); }
html.tv { scroll-behavior: auto; }

/* slow or old devices and TVs (detected by the script): fewer effects, shorter scroll */
.lite body { transition: none; }
.lite .site-header.is-stuck, .tv .site-header.is-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .marquee__track, .lite .hero__bean img, .lite .hero__bear img, .lite .hero__hint::after,
.tv .marquee__track, .tv .hero__bean img, .tv .hero__bear img, .tv .hero__hint::after { animation: none; }
.lite .hero-wrap, .tv .hero-wrap { height: 220vh; }
.lite .hero__bean, .lite .hero__line, .tv .hero__bean, .tv .hero__line { -webkit-transform: none; transform: none; }

/* dual-screen foldables, opened across the hinge (Surface Duo and similar).
   Text goes on the left screen, pictures on the right, so nothing sits on the hinge. */
@media (horizontal-viewport-segments: 2) {
  .wrap {
    max-width: none; margin: 0; padding-left: 0; padding-right: 0;
    display: grid;
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
    column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
  .wrap > * { grid-column: 1; padding-left: var(--pad); padding-right: var(--pad); }
  .site-header__in { display: flex; }
  .site-header__in > * { padding: 0; }
  .site-header__in { padding-left: var(--pad); padding-right: var(--pad); }

  /* hero */
  .hero__inner { display: block; width: env(viewport-segment-width 0 0); }
  .hero__inner > * { padding-left: 0; padding-right: 0; }
  .hero__title { padding-left: var(--pad); padding-right: var(--pad); }
  .hero__art { left: env(viewport-segment-left 1 0); width: env(viewport-segment-width 1 0); height: env(viewport-segment-width 1 0); -webkit-transform: none; transform: none; bottom: -4%; }
  .hero__hint { left: calc(env(viewport-segment-width 0 0) / 2); }

  /* rows that have text + picture: one on each screen */
  #showcase, .cards { grid-column: 1 / -1; padding-left: 0; padding-right: 0; }
  .drink, .cta__in {
    grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);
    grid-gap: 0; gap: 0; column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
  }
  .drink:nth-child(even) .drink__text { order: 0; }
  .drink__text, .cta__text, .cta__art { padding-left: var(--pad); padding-right: var(--pad); max-width: none; }
  .drink__card { width: auto; margin: 0 var(--pad); }
  .cta__in { padding-left: 0; padding-right: 0; }
  .cta__in > * { grid-column: auto; }
  .cards { grid-template-columns: env(viewport-segment-width 0 0) env(viewport-segment-width 1 0); column-gap: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)); row-gap: 22px; }
  .cards .mcard { margin: 0 var(--pad); }
  .footer__word { font-size: 9cqi; }
}

/* ---------- 13. Reduced motion (people who ask their device for less movement) ---------- */
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
  .hero-wrap { height: auto; }
  .hero { position: relative; }
  .hero__word, .hero__bean img, .hero__bear img, .marquee__track, .hero__hint::after { animation: none; }
  .js .reveal { opacity: 1; -webkit-transform: none; transform: none; transition: none; }
  .intro__text .w { opacity: 1; }
  .deco, .px, .drink__card svg { -webkit-transform: none; transform: none; }
}

/* browsers without position: sticky: the hero is not pinned, it simply shows the finished cups */
.no-sticky .hero-wrap { height: auto; }
.no-sticky .hero { position: relative; }
.no-sticky .hero__hint { display: none; }