/* =========================================================================
   SOULBREW SIGNATURE — storefront flagship layer (loads last).
   Keeps the approved espresso · foam · caramel system and raises the craft:
   Gambetta for display (a soft, full-bodied variable serif with a true
   italic for every "feeling"), Satoshi for reading and UI, an arched "café
   window" as the recurring product frame, app-scale rhythm on touch screens
   and a few precise motions. Pure presentation — no markup or behaviour
   depends on this file.
   ========================================================================= */

@font-face {
  font-family: "Gambetta";
  src: url("/assets/fonts/gambetta.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gambetta";
  src: url("/assets/fonts/gambetta-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/satoshi.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

html:root body.lp {
  --sig-display: "Gambetta", "Iowan Old Style", Georgia, serif;
  --sig-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--sig-sans);
  --font-display: var(--sig-display);
  --sig-espresso: #2b1a13;
  --sig-roast: #1f130d;
  --sig-mocha: #4a3226;
  --sig-foam: #fffcf7;
  --sig-milk: #f7efe5;
  --sig-latte: #efe2d1;
  --sig-caramel: #a85d25;
  --sig-caramel-deep: #8f451a;
  --sig-honey: #e7b98a;
  --sig-ink: #2b1a13;
  --sig-ink-2: #6b574b;
  --sig-ink-3: #968477;
  --sig-line: rgba(43, 26, 19, .10);
  --sig-line-strong: rgba(43, 26, 19, .20);
  --sig-line-dark: rgba(255, 244, 232, .14);
  --sig-arch: 999px 999px 28px 28px;
  --sig-ease: cubic-bezier(.2, .7, .1, 1);
  --sig-spring: cubic-bezier(.34, 1.4, .5, 1);
  --sig-shadow: 0 1px 2px rgba(43, 26, 19, .04), 0 18px 40px -18px rgba(43, 26, 19, .18);
  --sig-shadow-lift: 0 2px 4px rgba(43, 26, 19, .04), 0 34px 60px -24px rgba(43, 26, 19, .30);
  font-family: var(--sig-sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html:root body.lp ::selection { background: #f0d3b4; color: var(--sig-espresso); }

/* ------------------------------------------------------------ Display type */
html:root body.lp :is(.hero__big, .section-title, .menu-hero__big, .home-story__copy h2,
  .loyalty__copy h2, .places__head, .finale__big, .outlets-hero__big, .account-hero__big,
  .checkout-hero__big, .about-story h1, .menu-section__title, .outlet__body h2, .place h3,
  .item-modal__body h2, .cart-drawer__head h3):not(#_) {
  font-family: var(--sig-display) !important;
  font-optical-sizing: auto;
  font-weight: 360 !important;
  letter-spacing: -.012em !important;
  text-transform: none !important;
  font-kerning: normal;
  text-wrap: balance;
}
html:root body.lp :is(.hero__big, .menu-hero__big, .finale__big, .checkout-hero__big, .account-hero__big, .outlets-hero__big, .about-story h1, .section-title, .places__head, .home-story__copy h2, .loyalty__copy h2) em,
html:root body.lp :is(.hero__big, .menu-hero__big) em:not(#_) {
  font-family: var(--sig-display) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  letter-spacing: -.02em !important;
  color: var(--sig-honey);
}
html:root body.lp:not(.lp-home) :is(.menu-hero__big, .checkout-hero__big, .account-hero__big) em { color: var(--sig-caramel) !important; }

/* Eyebrows — a hairline lead-in, tracked small caps */
html:root body.lp :is(.ey, .hero__eyebrow, .eyebrow):not(#_) {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sig-sans) !important;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: .2em !important; text-transform: uppercase !important;
}
html:root body.lp :is(.ey, .eyebrow):not(#_)::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55; flex: 0 0 22px;
}
html:root body.lp .hero__eyebrow > span[aria-hidden] { display: none !important; }
html:root body.lp .hero__eyebrow:not(#_)::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }

/* ------------------------------------------------------------------ Buttons */
html:root body.lp .pill:not(#_) {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 0 26px !important;
  border-radius: 999px !important;
  font-family: var(--sig-sans) !important; font-size: 14px !important; font-weight: 550 !important;
  letter-spacing: -.005em !important; text-transform: none !important;
  transition: background .35s var(--sig-ease), color .35s var(--sig-ease), border-color .35s var(--sig-ease), transform .35s var(--sig-ease), box-shadow .35s var(--sig-ease) !important;
}
html:root body.lp .pill:not(#_) > span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: -12px;
  border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: transform .45s var(--sig-ease);
}
html:root body.lp .pill:not(#_):hover { transform: translateY(-1px); }
html:root body.lp .pill:not(#_):hover > span { transform: translateX(3px) rotate(-8deg); }
html:root body.lp .pill--peach:not(#_) { background: var(--sig-foam) !important; color: var(--sig-espresso) !important; border: 1px solid transparent !important; box-shadow: 0 10px 30px -12px rgba(0,0,0,.45); }
html:root body.lp .pill--peach:not(#_):hover { background: var(--sig-honey) !important; }
html:root body.lp .pill--dark:not(#_) { background: var(--sig-espresso) !important; color: var(--sig-foam) !important; border: 1px solid var(--sig-espresso) !important; box-shadow: 0 14px 30px -16px rgba(43,26,19,.6); }
html:root body.lp .pill--dark:not(#_):hover { background: var(--sig-caramel-deep) !important; border-color: var(--sig-caramel-deep) !important; }
html:root body.lp .pill--outline:not(#_) { background: transparent !important; color: var(--sig-espresso) !important; border: 1px solid var(--sig-line-strong) !important; }
html:root body.lp .pill--outline:not(#_):hover { border-color: var(--sig-espresso) !important; background: var(--sig-espresso) !important; color: var(--sig-foam) !important; }
html:root body.lp .pill--lg:not(#_) { min-height: 62px; padding: 0 32px !important; font-size: 15px !important; }

/* ---------------------------------------------------------------- Navigation */
html:root body.lp .lp-nav:not(#_) {
  border-bottom: 1px solid var(--sig-line-dark) !important;
  transition: background .4s var(--sig-ease), box-shadow .4s var(--sig-ease);
}
html:root body.lp .lp-nav.is-scrolled:not(#_) {
  background: rgba(31, 19, 13, .82) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 10px 30px -20px rgba(0,0,0,.6);
}
html:root body.lp .lp-nav__left a:not(#_) {
  position: relative; padding-block: 6px;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: .01em !important;
  color: rgba(255, 248, 240, .78) !important; text-decoration: none;
  transition: color .3s var(--sig-ease);
}
html:root body.lp .lp-nav__left a:not(#_)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--sig-honey); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--sig-ease);
}
html:root body.lp .lp-nav__left a:not(#_):hover,
html:root body.lp .lp-nav__left a[aria-current="page"]:not(#_) { color: #fff !important; }
html:root body.lp .lp-nav__left a:not(#_):hover::after,
html:root body.lp .lp-nav__left a[aria-current="page"]:not(#_)::after { transform: scaleX(1); transform-origin: left; }
html:root body.lp .nav-order:not(#_) {
  min-height: 40px; padding: 0 8px 0 18px; gap: 12px;
  border: 1px solid rgba(255, 244, 232, .26) !important; border-radius: 999px !important;
  font-size: 12.5px; font-weight: 550; letter-spacing: 0;
}
html:root body.lp .nav-order:not(#_) span {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  background: var(--sig-foam); color: var(--sig-espresso); font-size: 12px;
  transition: transform .4s var(--sig-ease);
}
html:root body.lp .nav-order:not(#_):hover { background: var(--sig-foam) !important; color: var(--sig-espresso) !important; }
html:root body.lp .nav-order:not(#_):hover span { background: var(--sig-espresso); color: var(--sig-foam); transform: rotate(45deg); }
html:root body.lp .lp-ico:not(#_) { border-radius: 999px !important; transition: background .3s var(--sig-ease); }
html:root body.lp .lp-ico:not(#_):hover { background: rgba(255, 244, 232, .1) !important; }
html:root body.lp .cart-count:not(#_) { background: var(--sig-honey) !important; color: var(--sig-espresso) !important; font-weight: 700 !important; }

/* ===================================================================== HOME */
html:root body.lp.lp-home .hero:not(#_) {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(168, 93, 37, .26), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, rgba(231, 185, 138, .10), transparent 70%),
    linear-gradient(180deg, #2b1a13 0%, #24160f 100%) !important;
}
html:root body.lp.lp-home .hero__big:not(#_) {
  color: var(--sig-foam) !important;
  font-size: clamp(64px, 7.6vw, 124px) !important;
  line-height: .9 !important;
  letter-spacing: -.022em !important;
  font-weight: 400 !important;
}
html:root body.lp.lp-home .hero__big em:not(#_) { display: inline-block; padding-right: .06em; }
html:root body.lp.lp-home .hero__eyebrow:not(#_) { color: var(--sig-honey) !important; }
html:root body.lp.lp-home .hero__sub:not(#_) { color: rgba(255, 244, 232, .72) !important; font-size: 17px !important; line-height: 1.65 !important; max-width: 38ch; }
html:root body.lp.lp-home .hero__text-link:not(#_) { color: rgba(255,244,232,.86) !important; font-size: 13.5px; font-weight: 500; text-underline-offset: 6px; text-decoration-color: rgba(255,244,232,.3); }
html:root body.lp.lp-home .hero__text-link:not(#_):hover { color: #fff !important; text-decoration-color: var(--sig-honey); }
@media (min-width: 701px) {
  html:root body.lp.lp-home .hero__proof:not(#_) { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; }
}
html:root body.lp.lp-home .hero__proof:not(#_) {
  border-top: 1px solid var(--sig-line-dark) !important; padding-top: 22px;
}
html:root body.lp.lp-home .hero__proof span:not(#_) {
  padding: 0 28px; border-left: 1px solid var(--sig-line-dark);
  color: rgba(255, 244, 232, .56) !important; font-size: 12px; line-height: 1.5;
}
html:root body.lp.lp-home .hero__proof span:first-child:not(#_) { padding-left: 0; border-left: 0; }
html:root body.lp.lp-home .hero__proof b:not(#_) { display: block; margin-bottom: 2px; color: var(--sig-foam) !important; font-family: var(--sig-display); font-weight: 400; font-size: 17px; letter-spacing: -.01em; }

/* The signature arched window */
html:root body.lp.lp-home .hero__visual:not(#_) {
  border-radius: var(--sig-arch) !important;
  background:
    radial-gradient(70% 55% at 50% 42%, #f9dcc0 0%, #ecc29c 55%, #d9a57a 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 50px 90px -40px rgba(0,0,0,.65);
  overflow: hidden;
}
html:root body.lp.lp-home .hero__visual:not(#_)::before {
  content: ""; position: absolute; inset: 14px; z-index: 0; pointer-events: none;
  border: 1px solid rgba(255, 252, 247, .55); border-radius: var(--sig-arch);
}
html:root body.lp.lp-home .hero__halo:not(#_) { background: radial-gradient(circle, rgba(255,250,242,.7), transparent 62%) !important; opacity: .9; }
html:root body.lp.lp-home .hero__drink:not(#_) { position: relative; z-index: 1; filter: drop-shadow(0 40px 34px rgba(74, 38, 16, .30)) !important; }
html:root body.lp.lp-home .hero__feature:not(#_) {
  z-index: 2;
  background: rgba(255, 252, 247, .72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7) !important; border-radius: 18px !important;
  padding: 16px 20px 15px !important;
  box-shadow: 0 20px 40px -20px rgba(74, 38, 16, .35) !important;
}
html:root body.lp.lp-home .hero__feature span:not(#_) { color: var(--sig-caramel-deep) !important; font-size: 10px; letter-spacing: .18em; font-weight: 650; }
html:root body.lp.lp-home .hero__feature strong:not(#_) { font-family: var(--sig-display); font-weight: 420; font-size: 20px; letter-spacing: -.015em; color: var(--sig-espresso) !important; }
html:root body.lp.lp-home .hero__feature small:not(#_) { color: var(--sig-ink-2) !important; }
html:root body.lp.lp-home .hero__scrolllink:not(#_) { color: rgba(255,244,232,.6) !important; }

/* Order ribbon */
html:root body.lp .order-ribbon:not(#_) { border-bottom: 1px solid var(--sig-line) !important; }
html:root body.lp .order-ribbon__intro span:not(#_) { font-family: var(--sig-display); font-size: 22px; font-weight: 400; letter-spacing: -.02em; color: var(--sig-espresso) !important; }
html:root body.lp .order-ribbon__intro b:not(#_) { color: var(--sig-caramel-deep) !important; font-size: 10.5px; letter-spacing: .18em; font-weight: 650; }
html:root body.lp .order-ribbon__actions a:not(#_) {
  border: 1px solid var(--sig-line) !important; border-radius: 18px !important;
  background: #fff !important; box-shadow: 0 1px 2px rgba(43,26,19,.04) !important;
  transition: border-color .35s var(--sig-ease), box-shadow .35s var(--sig-ease), transform .35s var(--sig-ease);
}
html:root body.lp .order-ribbon__actions a:not(#_):hover { border-color: var(--sig-line-strong) !important; box-shadow: var(--sig-shadow) !important; transform: translateY(-2px); }
html:root body.lp .order-ribbon__actions a:not(#_) b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
html:root body.lp .order-ribbon__icon:not(#_) { background: var(--sig-milk) !important; color: var(--sig-caramel-deep) !important; border-radius: 999px !important; }
html:root body.lp .order-ribbon__actions a:not(#_) i { transition: transform .4s var(--sig-ease); }
html:root body.lp .order-ribbon__actions a:not(#_):hover i { transform: translateX(4px); }

/* Section headings */
html:root body.lp .section-heading h2:not(#_),
html:root body.lp .selection .section-heading h2:not(#_) {
  font-size: clamp(48px, 5.8vw, 88px) !important; line-height: .96 !important; color: var(--sig-espresso) !important;
}
html:root body.lp .section-heading:not(#_) { padding-bottom: clamp(24px, 3vw, 40px); border-bottom: 1px solid var(--sig-line); }
html:root body.lp .section-heading > p:not(#_) { font-size: 15.5px !important; color: var(--sig-ink-2) !important; }
html:root body.lp .section-heading .ey:not(#_) { margin-bottom: 18px; color: var(--sig-caramel-deep) !important; }

/* Product cards (home + menu) share one card language */
html:root body.lp :is(.dcard__im, .menu-body .drink-card__media):not(#_) {
  border-radius: 22px !important;
  background:
    radial-gradient(80% 70% at 50% 38%, #fbf1e5 0%, #efdfcb 70%, #e7d3bc 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(43,26,19,.04);
  transition: box-shadow .5s var(--sig-ease), transform .5s var(--sig-ease);
}
html:root body.lp .dcard:nth-child(3n+2) .dcard__im:not(#_),
html:root body.lp .drink-card:nth-child(3n+2) .drink-card__media:not(#_) { background: radial-gradient(80% 70% at 50% 38%, #f7efe2 0%, #e9ddcb 70%, #dfd0bb 100%) !important; }
html:root body.lp .dcard:nth-child(3n+3) .dcard__im:not(#_),
html:root body.lp .drink-card:nth-child(3n+3) .drink-card__media:not(#_) { background: radial-gradient(80% 70% at 50% 38%, #fbeee6 0%, #f0dccf 70%, #e6cdbd 100%) !important; }
html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__im, .drink-card__media) { box-shadow: inset 0 0 0 1px rgba(43,26,19,.06), var(--sig-shadow-lift); transform: translateY(-4px); }
html:root body.lp :is(.dcard__im, .drink-card__media) img:not(#_) { transition: transform .8s var(--sig-ease) !important; filter: drop-shadow(0 18px 16px rgba(74,38,16,.16)); }
html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__im, .drink-card__media) img { transform: translateY(-8px) scale(1.04) !important; }
html:root body.lp :is(.dcard__add, .drink-card__media .add-btn):not(#_) {
  width: 40px !important; height: 40px !important; border-radius: 999px !important;
  background: var(--sig-foam) !important; color: var(--sig-espresso) !important;
  box-shadow: 0 8px 18px -8px rgba(43,26,19,.35) !important;
  transition: background .35s var(--sig-ease), color .35s var(--sig-ease), transform .35s var(--sig-ease) !important;
}
html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__add, .add-btn) { background: var(--sig-espresso) !important; color: var(--sig-foam) !important; transform: rotate(90deg) !important; }
html:root body.lp :is(.dcard__no, .drink-card__tagline):not(#_) { margin-top: 18px; color: var(--sig-caramel-deep) !important; font-size: 10px !important; font-weight: 650 !important; letter-spacing: .18em !important; }
html:root body.lp :is(.dcard__nm, .drink-card__name):not(#_) {
  font-family: var(--sig-display) !important;
  font-size: clamp(21px, 1.75vw, 26px) !important; font-weight: 400 !important;
  letter-spacing: -.004em !important; line-height: 1.12 !important; color: var(--sig-espresso) !important;
}
html:root body.lp .drink-card__name .product-feeling:not(#_),
html:root body.lp .dcard__feeling:not(#_) {
  font-family: var(--sig-display) !important; font-weight: 500 !important; font-style: italic;
  text-transform: none !important; letter-spacing: -.02em !important;
}
html:root body.lp .drink-card__name .product-type:not(#_),
html:root body.lp .dcard__feeling + .dcard__nm:not(#_) { font-family: var(--sig-sans) !important; font-style: normal; font-size: 13.5px !important; color: var(--sig-ink-2) !important; letter-spacing: -.005em !important; }
html:root body.lp :is(.dcard__pr, .drink-card__price):not(#_) { font-size: 13.5px !important; font-weight: 600 !important; color: var(--sig-ink) !important; font-variant-numeric: tabular-nums; }
html:root body.lp .drink-card__badge:not(#_) {
  background: rgba(255,252,247,.86) !important; color: var(--sig-espresso) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.8) !important; border-radius: 999px !important;
  font-size: 9.5px !important; letter-spacing: .16em !important; font-weight: 650 !important;
}

/* Loyalty */
html:root body.lp .loyalty__copy h2:not(#_) { font-size: clamp(52px, 5.6vw, 88px) !important; }
html:root body.lp .loyalty__copy li:not(#_) { border-color: var(--sig-line) !important; }
html:root body.lp .loyalty__step-number:not(#_) { font-family: var(--sig-display); font-style: italic; font-size: 15px; color: var(--sig-caramel) !important; }
html:root body.lp .loyalty__points:not(#_) { border-radius: 20px !important; box-shadow: 0 30px 60px -24px rgba(43,26,19,.55) !important; border: 1px solid rgba(255,255,255,.12); }
html:root body.lp .loyalty__points strong:not(#_) { font-family: var(--sig-display); font-weight: 380; letter-spacing: -.02em; }
html:root body.lp .loyalty__stamp:not(#_) { font-family: var(--sig-display) !important; font-style: italic; }

/* Story */
html:root body.lp .home-story__visual:not(#_) { border-radius: var(--sig-arch); margin-block: clamp(40px, 5vw, 80px); background: radial-gradient(70% 60% at 50% 45%, #f6e4cf, #e3c9ab) !important; }
html:root body.lp .home-story__copy h2:not(#_) { font-size: clamp(48px, 5.2vw, 82px) !important; line-height: .98 !important; }
html:root body.lp .home-story__link:not(#_) { font-size: 13.5px; font-weight: 550; }

/* Visit */
html:root body.lp .places__head:not(#_) { font-size: clamp(48px, 5.6vw, 88px) !important; line-height: .96 !important; }
html:root body.lp .place:not(#_) { border-radius: 26px !important; border: 1px solid var(--sig-line) !important; box-shadow: var(--sig-shadow) !important; overflow: hidden; transition: box-shadow .5s var(--sig-ease), transform .5s var(--sig-ease); }
html:root body.lp .place:not(#_):hover { box-shadow: var(--sig-shadow-lift) !important; transform: translateY(-3px); }
html:root body.lp .place h3:not(#_) { font-size: clamp(30px, 3.2vw, 46px) !important; }
html:root body.lp .place__idx:not(#_) { font-size: 10.5px; letter-spacing: .18em; font-weight: 650; color: var(--sig-caramel-deep) !important; }

/* Finale */
html:root body.lp .finale:not(#_) {
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(168,93,37,.35), transparent 70%),
    linear-gradient(180deg, #24160f, #1f130d) !important;
}
html:root body.lp .finale__big:not(#_) { color: var(--sig-foam) !important; font-size: clamp(64px, 9vw, 150px) !important; line-height: .88 !important; letter-spacing: -.025em !important; font-weight: 400 !important; }
html:root body.lp .finale__sub:not(#_) { color: rgba(255,244,232,.66) !important; font-size: 16px; }
html:root body.lp .finale__ticker:not(#_) { font-family: var(--sig-display); font-style: italic; letter-spacing: 0 !important; text-transform: none !important; font-size: 15px !important; }

/* ---------------------------------------------------------------- Footer */
html:root body.lp .lp-foot:not(#_) { background: var(--sig-roast) !important; border-top: 1px solid var(--sig-line-dark); }
html:root body.lp .lp-foot .wrap:not(#_)::after {
  content: "Every cup tells a feeling.";
  display: block; margin-top: clamp(40px, 5vw, 72px); padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--sig-line-dark);
  font-family: var(--sig-display); font-weight: 300;
  font-size: clamp(44px, 9.4vw, 168px); line-height: .9; letter-spacing: -.025em;
  color: rgba(255, 244, 232, .1);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
  user-select: none; pointer-events: none;
}
html:root body.lp .lp-foot h4:not(#_) { color: var(--sig-honey) !important; font-size: 10.5px !important; letter-spacing: .2em !important; font-weight: 650 !important; }
html:root body.lp .lp-foot :is(a, span):not(#_) { color: rgba(255,244,232,.7) !important; font-size: 14px; transition: color .3s var(--sig-ease); }
html:root body.lp .lp-foot a:not(#_):hover { color: #fff !important; }
html:root body.lp .lp-foot__tag:not(#_) { font-family: var(--sig-display); font-style: italic; font-size: 18px !important; color: rgba(255,244,232,.72) !important; }
html:root body.lp .lp-foot__bottom :is(span):not(#_) { font-size: 11.5px !important; letter-spacing: .12em; color: rgba(255,244,232,.46) !important; }

/* ===================================================================== MENU */
html:root body.lp .menu-hero__big:not(#_) { font-size: clamp(56px, 6.8vw, 104px) !important; line-height: .94 !important; color: var(--sig-espresso) !important; }
html:root body.lp .menu-hero__art:not(#_) {
  border-radius: var(--sig-arch) !important;
  background: radial-gradient(70% 55% at 50% 45%, #f9dcc0, #e5b890) !important;
  box-shadow: var(--sig-shadow-lift) !important; overflow: hidden;
}
html:root body.lp .menu-hero__art img:not(#_) { filter: drop-shadow(0 30px 26px rgba(74,38,16,.26)); }
html:root body.lp .menu-hero__art :is(.menu-hero__art-label, .menu-hero__art-note):not(#_) { color: rgba(43,26,19,.66) !important; font-size: 10px; letter-spacing: .2em; font-weight: 650; }
html:root body.lp .menu-order-context:not(#_) { border: 1px solid var(--sig-line) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(43,26,19,.04) !important; }
html:root body.lp .menu-order-context__button:not(#_) { border-radius: 999px !important; border: 1px solid var(--sig-line-strong) !important; min-height: 42px; padding-inline: 18px !important; font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 550 !important; background: transparent !important; color: var(--sig-espresso) !important; transition: background-color .3s var(--sig-ease), border-color .3s var(--sig-ease), color .3s var(--sig-ease), box-shadow .3s var(--sig-ease), transform .3s var(--sig-ease); }
html:root body.lp .menu-order-context__button:not(#_):hover { background: var(--sig-espresso) !important; color: var(--sig-foam) !important; border-color: var(--sig-espresso) !important; }
html:root body.lp .filter-pill:not(#_) {
  min-height: 40px; padding: 0 18px !important;
  border: 1px solid var(--sig-line) !important; border-radius: 999px !important;
  background: rgba(255,255,255,.7) !important; color: var(--sig-ink-2) !important;
  font-size: 13px !important; font-weight: 500 !important; letter-spacing: -.005em !important; text-transform: none !important;
  transition: background-color .3s var(--sig-ease), border-color .3s var(--sig-ease), color .3s var(--sig-ease), box-shadow .3s var(--sig-ease), transform .3s var(--sig-ease);
}
html:root body.lp .filter-pill:not(#_):hover { border-color: var(--sig-line-strong) !important; color: var(--sig-espresso) !important; }
html:root body.lp .filter-pill[aria-pressed="true"]:not(#_),
html:root body.lp .filter-pill.is-active:not(#_) { background: var(--sig-espresso) !important; border-color: var(--sig-espresso) !important; color: var(--sig-foam) !important; }
html:root body.lp .menu-section__title:not(#_) {
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(34px, 3.4vw, 52px) !important; line-height: 1 !important; color: var(--sig-espresso) !important;
  padding-bottom: 18px; border-bottom: 1px solid var(--sig-line) !important;
}
html:root body.lp .menu-section:not(#_) { margin-bottom: clamp(56px, 6vw, 96px); }

/* Item modal */
html:root body.lp .item-modal:not(#_) { border-radius: 28px !important; overflow: hidden; box-shadow: 0 60px 120px -40px rgba(31,19,13,.55) !important; }
@media (max-width: 640px) { html:root body.lp .item-modal:not(#_) { border-radius: 28px 28px 0 0 !important; } }
html:root body.lp .item-modal__media:not(#_) { background: radial-gradient(70% 60% at 50% 45%, #f9e4cf, #e9c7a4) !important; }
html:root body.lp .item-modal__body h2:not(#_) { font-size: clamp(32px, 3.6vw, 46px) !important; line-height: 1.02 !important; }
html:root body.lp .option-chip:not(#_) { border-radius: 999px !important; min-height: 40px; transition: background-color .25s var(--sig-ease), border-color .25s var(--sig-ease), color .25s var(--sig-ease), box-shadow .25s var(--sig-ease), transform .25s var(--sig-ease); }

/* ======================================================= CHECKOUT & ACCOUNT */
html:root body.lp :is(.checkout-hero, .account-hero, .outlets-hero):not(#_) { border-bottom: 1px solid var(--sig-line) !important; }
html:root body.lp :is(.checkout-hero__big, .account-hero__big, .outlets-hero__big):not(#_) { font-size: clamp(52px, 6.4vw, 100px) !important; line-height: .94 !important; color: var(--sig-espresso) !important; }
html:root body.lp :is(.checkout-hero__sub, .account-hero__sub, .outlets-hero__sub):not(#_) { font-size: 16.5px !important; line-height: 1.65 !important; color: var(--sig-ink-2) !important; }
html:root body.lp :is(.checkout-card, .order-summary, .auth-card, .account-dashboard-card, .account-address-card, .checkout-context-card):not(#_) {
  background: #fff !important;
  border: 1px solid var(--sig-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 1px 2px rgba(43,26,19,.03), 0 24px 48px -32px rgba(43,26,19,.22) !important;
}
html:root body.lp .checkout-card h2:not(#_),
html:root body.lp .order-summary h2:not(#_),
html:root body.lp .auth-card h1:not(#_),
html:root body.lp .auth-card h2:not(#_) {
  font-family: var(--sig-display) !important;
  font-size: clamp(24px, 2vw, 30px) !important; font-weight: 400 !important; letter-spacing: -.022em !important; color: var(--sig-espresso) !important;
}
html:root body.lp .checkout-card h2:not(#_)::before,
html:root body.lp .order-summary h2:not(#_)::before { background: var(--sig-caramel) !important; width: 6px !important; height: 6px !important; }
html:root body.lp :is(.checkout-body, .account-body) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not(#_) {
  min-height: 52px; padding: 14px 16px !important;
  border: 1px solid var(--sig-line-strong) !important; border-radius: 14px !important;
  background: var(--sig-foam) !important; color: var(--sig-espresso) !important;
  font-size: 15px !important; box-shadow: none !important;
  transition: border-color .25s var(--sig-ease), box-shadow .25s var(--sig-ease), background .25s var(--sig-ease);
}
html:root body.lp :is(.checkout-body, .account-body) :is(input, select, textarea):not(#_):hover { border-color: rgba(43,26,19,.34) !important; }
html:root body.lp :is(.checkout-body, .account-body) :is(input, select, textarea):not(#_):focus {
  outline: none !important; background: #fff !important;
  border-color: var(--sig-caramel) !important; box-shadow: 0 0 0 4px rgba(168,93,37,.14) !important;
}
html:root body.lp :is(.checkout-body, .account-body) .field label:not(#_) { font-size: 12.5px !important; font-weight: 550 !important; color: var(--sig-ink) !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root body.lp .segmented:not(#_) { gap: 4px !important; padding: 4px; border-radius: 999px; background: var(--sig-milk); border: 1px solid var(--sig-line); }
html:root body.lp .segmented button:not(#_) {
  min-height: 46px; border: 0 !important; border-radius: 999px !important;
  background: transparent !important; color: var(--sig-ink-2) !important; box-shadow: none !important;
  font-size: 13.5px !important; font-weight: 550 !important; transition: background-color .3s var(--sig-ease), border-color .3s var(--sig-ease), color .3s var(--sig-ease), box-shadow .3s var(--sig-ease), transform .3s var(--sig-ease);
}
html:root body.lp .segmented button:not(#_):hover { color: var(--sig-espresso) !important; }
html:root body.lp .segmented button[aria-pressed="true"]:not(#_),
html:root body.lp .segmented button.is-active:not(#_) { background: #fff !important; color: var(--sig-espresso) !important; box-shadow: 0 1px 2px rgba(43,26,19,.08), 0 6px 16px -8px rgba(43,26,19,.25) !important; }
html:root body.lp :is(.checkout-body, .account-body, .cart-drawer) .btn-primary:not(#_) {
  min-height: 54px; border-radius: 999px !important;
  background: var(--sig-espresso) !important; border-color: var(--sig-espresso) !important; color: var(--sig-foam) !important;
  font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -.005em !important; text-transform: none !important;
  box-shadow: 0 16px 30px -16px rgba(43,26,19,.6) !important;
  transition: background .3s var(--sig-ease), transform .3s var(--sig-ease) !important;
}
html:root body.lp :is(.checkout-body, .account-body, .cart-drawer) .btn-primary:not(#_):hover:not(:disabled) { background: var(--sig-caramel-deep) !important; border-color: var(--sig-caramel-deep) !important; transform: translateY(-1px); }
html:root body.lp :is(.checkout-body, .account-body, .cart-drawer) .btn-primary:not(#_):disabled { background: var(--sig-latte) !important; border-color: var(--sig-latte) !important; color: var(--sig-ink-2) !important; box-shadow: none !important; }
html:root body.lp :is(.checkout-body, .account-body, .cart-drawer) :is(.btn-secondary, .btn-ghost):not(#_) { border-radius: 999px !important; border: 1px solid var(--sig-line-strong) !important; background: transparent !important; color: var(--sig-espresso) !important; }
html:root body.lp :is(.checkout-body, .account-body, .cart-drawer) :is(.btn-secondary, .btn-ghost):not(#_):hover { border-color: var(--sig-espresso) !important; }
html:root body.lp .promo-row button:not(#_) { min-height: 52px; border-radius: 14px !important; padding-inline: 20px !important; }
html:root body.lp .loyalty-card:not(#_),
html:root body.lp .account-points-card:not(#_) {
  border-radius: 24px !important;
  background: radial-gradient(90% 120% at 90% 0%, rgba(231,185,138,.35), transparent 60%), linear-gradient(135deg, #2b1a13, #4a2a18) !important;
  box-shadow: 0 30px 60px -28px rgba(43,26,19,.6) !important;
}

/* ============================================================ CART DRAWER */
html:root body.lp .cart-drawer:not(#_) { background: var(--sig-foam) !important; box-shadow: none !important; border-left: 1px solid var(--sig-line) !important; }
html:root body.lp .cart-drawer.is-open:not(#_) { box-shadow: -40px 0 80px -30px rgba(31,19,13,.4) !important; }
html:root body.lp .cart-drawer__head:not(#_) { border-bottom: 1px solid var(--sig-line) !important; }
html:root body.lp .cart-drawer__head h3:not(#_) { font-size: 28px !important; color: var(--sig-espresso) !important; }
html:root body.lp .cart-line:not(#_) { border-bottom: 1px solid var(--sig-line) !important; }
html:root body.lp .cart-line img:not(#_) { background: var(--sig-milk) !important; border-radius: 14px !important; }
html:root body.lp .qty-stepper:not(#_) { border-radius: 999px !important; border: 1px solid var(--sig-line-strong) !important; }
html:root body.lp .drawer-overlay:not(#_) { background: rgba(31,19,13,.36) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* =========================================================== OUTLETS/ABOUT */
html:root body.lp .outlet:not(#_) { border: 1px solid var(--sig-line) !important; border-radius: 28px !important; background: #fff !important; box-shadow: var(--sig-shadow) !important; overflow: hidden; }
html:root body.lp .outlet__media:not(#_) { border-radius: 20px !important; overflow: hidden; }
html:root body.lp .outlet__body h2:not(#_) { font-size: clamp(34px, 3.4vw, 52px) !important; line-height: 1 !important; color: var(--sig-espresso) !important; }
html:root body.lp .outlet__idx:not(#_) { font-size: 10.5px; letter-spacing: .18em; font-weight: 650; color: var(--sig-caramel-deep) !important; }
html:root body.lp .about-story h1:not(#_) { font-size: clamp(56px, 7vw, 112px) !important; line-height: .92 !important; color: var(--sig-espresso) !important; }
html:root body.lp .about-story__body p:first-child:not(#_) { font-family: var(--sig-display) !important; font-size: clamp(24px, 2.2vw, 32px) !important; font-weight: 350; line-height: 1.32 !important; letter-spacing: -.018em !important; }
html:root body.lp .about-story__body p:not(:first-child):not(#_) { font-size: 16.5px; line-height: 1.78; color: var(--sig-ink-2); }
html:root body.lp .about-story__drink:not(#_) { border-radius: var(--sig-arch) !important; background: radial-gradient(70% 60% at 50% 45%, #f6e4cf, #e3c9ab) !important; }

/* ================================================================= MOTION */
@media (prefers-reduced-motion: no-preference) {
  html:root body.lp .reveal:not(#_) { transition: opacity 1s var(--sig-ease), transform 1.1s var(--sig-ease), filter 1s var(--sig-ease) !important; }
  /* Hero intro runs on the compositor only (opacity + translate/scale — no
     blur or clip-path repaints). The drink waits for its image to decode
     (html.hero-wait, set by an inline script in index.html), rises in, then
     hands over to the float at the same resting point so nothing snaps. */
  html:root body.lp.lp-home .hero__big { animation: sig-hero-rise 1.1s var(--sig-ease) both; }
  html:root body.lp.lp-home .hero__sub { animation: sig-hero-rise 1.1s .1s var(--sig-ease) both; }
  html:root body.lp.lp-home .hero__actions { animation: sig-hero-rise 1.1s .18s var(--sig-ease) both; }
  html:root body.lp.lp-home .hero__visual { animation: sig-hero-window 1.2s .05s var(--sig-ease) both; }
  html:root body.lp.lp-home .hero__drink {
    will-change: translate, opacity;
    animation: sig-hero-drink 1.3s .2s var(--sig-ease) both, sig-float 8s 1.5s ease-in-out infinite;
  }
  html.hero-wait body.lp.lp-home .hero__drink { animation-play-state: paused; }
}
@keyframes sig-hero-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes sig-hero-window { from { opacity: 0; translate: 0 26px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sig-hero-drink { from { opacity: 0; translate: 0 34px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes sig-rise { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sig-window { from { opacity: 0; clip-path: inset(18% 8% 0 8% round 400px 400px 28px 28px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 0); } }
@keyframes sig-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 1024px) {
  html:root body.lp.lp-home .hero__proof span:not(#_) { padding: 0 18px; }
}
@media (max-width: 700px) {
  html:root body.lp.lp-home .hero__big:not(#_) { font-size: clamp(52px, 14vw, 72px) !important; }
  html:root body.lp .section-heading h2:not(#_),
  html:root body.lp .selection .section-heading h2:not(#_) { font-size: clamp(44px, 12vw, 60px) !important; }
  html:root body.lp .finale__big:not(#_) { font-size: clamp(52px, 14vw, 80px) !important; }
  html:root body.lp .home-story__visual:not(#_) { margin: 0 22px; width: auto; }
  html:root body.lp :is(.dcard__im, .menu-body .drink-card__media):not(#_) { border-radius: 18px !important; }
  html:root body.lp .lp-foot .wrap:not(#_)::after { white-space: normal; font-size: clamp(44px, 13vw, 64px); }
  html:root body.lp :is(.checkout-card, .order-summary, .auth-card):not(#_) { border-radius: 20px !important; }
  html:root body.lp .segmented button:not(#_) { min-height: 44px; }
}
html:root body.lp .menu-hero__art-label:not(#_) { position: absolute; top: clamp(34px, 4vw, 52px); left: 0; right: 0; display: flex; justify-content: center; gap: 8px; text-align: center; }

/* ------------------------------------------------------------ Type system
   Gambetta is a true variable serif: weight carries hierarchy (400 display,
   500 for small headings so they hold up at card size) and the italic is
   reserved for each drink's "feeling". Satoshi handles every UI string. */
html:root body.lp :is(.hero__big, .section-title, .menu-hero__big, .home-story__copy h2, .loyalty__copy h2,
  .places__head, .finale__big, .outlets-hero__big, .account-hero__big, .checkout-hero__big, .about-story h1):not(#_) {
  font-weight: 400 !important;
  letter-spacing: -.035em !important;
  font-synthesis: none;
}
html:root body.lp :is(.hero__big, .menu-hero__big, .finale__big, .checkout-hero__big, .account-hero__big, .outlets-hero__big, .about-story h1, .section-title, .places__head, .home-story__copy h2, .loyalty__copy h2) em:not(#_) {
  font-weight: 400 !important; letter-spacing: -.03em !important;
}
html:root body.lp :is(.menu-section__title, .outlet__body h2, .place h3, .item-modal__body h2, .cart-drawer__head h3,
  .checkout-card h2, .order-summary h2, .auth-card h1, .auth-card h2):not(#_) {
  font-weight: 500 !important; letter-spacing: -.025em !important; font-synthesis: none;
}
html:root body.lp :is(.dcard__nm, .drink-card__name):not(#_) { font-weight: 500 !important; letter-spacing: -.02em !important; font-synthesis: none; }
html:root body.lp :is(.drink-card__name .product-feeling, .dcard__feeling):not(#_) { font-style: italic !important; font-weight: 500 !important; letter-spacing: -.02em !important; }
html:root body.lp :is(.hero__proof b, .hero__feature strong, .order-ribbon__intro span, .loyalty__points strong):not(#_) { font-weight: 500 !important; letter-spacing: -.02em !important; }
html:root body.lp :is(.lp-foot__tag, .finale__ticker, .loyalty__stamp, .loyalty__step-number):not(#_) { font-style: italic; font-weight: 400; }
html:root body.lp .about-story__body p:first-child:not(#_) { font-weight: 400 !important; letter-spacing: -.02em !important; }
html:root body.lp .lp-foot .wrap:not(#_)::after { font-weight: 400; letter-spacing: -.04em; }

/* Gambetta sets wider than a condensed display face: rebalance the scale. */
html:root body.lp.lp-home .hero__big:not(#_) { font-size: clamp(56px, 6.4vw, 104px) !important; line-height: .96 !important; }
html:root body.lp .section-heading h2:not(#_),
html:root body.lp .selection .section-heading h2:not(#_),
html:root body.lp :is(.places__head, .loyalty__copy h2, .home-story__copy h2):not(#_) { font-size: clamp(44px, 4.8vw, 76px) !important; line-height: 1 !important; }
html:root body.lp :is(.menu-hero__big, .checkout-hero__big, .account-hero__big, .outlets-hero__big):not(#_) { font-size: clamp(48px, 5.4vw, 88px) !important; line-height: 1 !important; }
html:root body.lp .finale__big:not(#_) { font-size: clamp(60px, 8vw, 132px) !important; line-height: .94 !important; }
html:root body.lp :is(.dcard__nm, .drink-card__name):not(#_) { font-size: clamp(19px, 1.5vw, 23px) !important; line-height: 1.15 !important; }

/* UI voice: Satoshi, confident weights, gentler tracking on labels. */
html:root body.lp :is(.ey, .hero__eyebrow, .eyebrow, .dcard__no, .drink-card__tagline, .place__idx, .outlet__idx, .lp-foot h4, .order-ribbon__intro b, .hero__feature span, .drink-card__badge):not(#_) {
  font-family: var(--sig-sans) !important; font-weight: 700 !important; letter-spacing: .12em !important;
}
html:root body.lp :is(.pill, .nav-order, .filter-pill, .btn-primary, .segmented button, .menu-order-context__button):not(#_) { font-family: var(--sig-sans) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html:root body.lp :is(.dcard__pr, .drink-card__price):not(#_) { font-weight: 700 !important; letter-spacing: -.01em; }
html:root body.lp :is(.hero__sub, .section-heading > p, .menu-hero__sub, .finale__sub):not(#_) { letter-spacing: -.005em; }

/* =========================================================================
   APP SHELL — the storefront behaves like a native app on every device.
   ========================================================================= */
html:has(body.lp) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:root body.lp :is(a, button, [role="button"], label, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
html:root body.lp :is(button, .pill, .filter-pill, .app-tab, .nav-order, .lp-ico) { -webkit-user-select: none; user-select: none; }
html:root body.lp img { -webkit-user-drag: none; }

/* Tactile press feedback, like a native control. */
html:root body.lp :is(.pill, .btn, .filter-pill, .option-chip, .segmented button, .order-ribbon__actions a, .menu-order-context__button, .dcard, .drink-card, .place, .app-tab, .lp-ico, .nav-order):not(#_):active {
  transform: scale(.972) !important;
  transition-duration: .08s !important;
}

/* Touch devices never get stuck hover states. */
@media (hover: none) {
  html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__im, .drink-card__media) { transform: none; box-shadow: inset 0 0 0 1px rgba(43,26,19,.04); }
  html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__im, .drink-card__media) img { transform: none !important; }
  html:root body.lp :is(.dcard, .drink-card):not(#_):hover :is(.dcard__add, .add-btn) { background: var(--sig-foam) !important; color: var(--sig-espresso) !important; transform: none !important; }
  html:root body.lp :is(.pill, .place, .order-ribbon__actions a):not(#_):hover { transform: none; }
}

/* ------------------------------------------------------------ Tab bar */
html:root body.lp .app-tabbar { display: none; }
@media (max-width: 1024px) {
  html:root body.lp .app-tabbar:not(#_) {
    position: fixed; z-index: 70;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    margin-inline: auto; max-width: 520px;
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
    height: 66px; padding: 0 6px;
    border-radius: 26px;
    background: rgba(255, 252, 247, .82);
    -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 1px rgba(43,26,19,.06), 0 18px 40px -14px rgba(31,19,13,.34), inset 0 1px 0 rgba(255,255,255,.8);
  }
  html:root body.lp .app-tab:not(#_) {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 56px; padding: 0; border: 0; background: transparent;
    color: var(--sig-ink-3); text-decoration: none; cursor: pointer;
    font: 600 10.5px/1 var(--sig-sans); letter-spacing: .01em;
    transition: color .25s var(--sig-ease), transform .25s var(--sig-ease);
  }
  html:root body.lp .app-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  html:root body.lp .app-tab:not(.app-tab--bag) svg { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; transition: background .3s var(--sig-ease); }
  html:root body.lp .app-tab[aria-current="page"]:not(#_) { color: var(--sig-espresso); }
  html:root body.lp .app-tab[aria-current="page"] svg { background: var(--sig-latte); stroke-width: 1.9; }
  html:root body.lp .app-tab__bag {
    position: relative; display: grid; place-items: center;
    width: 50px; height: 50px; margin-top: -22px; margin-bottom: 1px;
    border-radius: 999px; background: var(--sig-espresso); color: var(--sig-foam);
    box-shadow: 0 10px 22px -8px rgba(43,26,19,.6), 0 0 0 4px rgba(255,252,247,.9);
  }
  html:root body.lp .app-tab__bag svg { width: 22px; height: 22px; }
  html:root body.lp .app-tab--bag:not(#_) { color: var(--sig-espresso); }
  html:root body.lp .app-tab__bag .cart-count:not(#_) {
    position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
    display: grid; place-items: center; border-radius: 999px;
    background: var(--sig-honey) !important; color: var(--sig-espresso) !important;
    font: 700 10.5px/1 var(--sig-sans); box-shadow: 0 0 0 2px var(--sig-foam);
  }
  /* Content clears the floating bar; the header's own cart button hands off to the tab. */
  html:root body.lp:has(.app-tabbar):not(#_) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  html:root body.lp:has(.app-tabbar) .lp-nav__right [data-cart-open]:not(#_),
  html:root body.lp:has(.app-tabbar) .lp-nav__right [data-account-link]:not(#_) { display: none !important; }
  html:root body.lp :is(.cart-drawer, .item-modal, .order-context-sheet, .mobile-menu) { z-index: 90; }
  html:root body.lp .drawer-overlay { z-index: 85; }

  /* Compact, frosted app header */
  html:root body.lp .lp-nav:not(#_) {
    background: rgba(36, 22, 15, .86) !important;
    -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px);
    padding-top: env(safe-area-inset-top);
  }
}
@media (max-width: 640px) {
  html:root body.lp .app-tabbar:not(#_) { height: 64px; border-radius: 24px; }
  html:root body.lp .app-tab:not(.app-tab--bag) svg { padding: 3px 12px; }
}
@media (max-width: 359px) {
  html:root body.lp .app-tabbar:not(#_) { left: 8px; right: 8px; padding: 0 2px; }
  html:root body.lp .app-tab:not(.app-tab--bag) svg { padding: 3px 8px; }
  html:root body.lp .app-tab:not(#_) { font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body.lp :is(.pill, .btn, .filter-pill, .dcard, .drink-card, .app-tab):active { transform: none !important; }
}

/* ------------------------------------------------ Fluid sizing, every width */
/* Phones: app-style list rhythm, edge-to-edge horizontal category rail. */
@media (max-width: 640px) {
  html:root body.lp .menu-hero .filter-row:not(#_) {
    margin-inline: calc(-1 * var(--sb-gutter, 22px)); padding-inline: var(--sb-gutter, 22px);
    scroll-snap-type: x proximity; scroll-padding-inline: var(--sb-gutter, 22px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  }
  html:root body.lp .filter-pill:not(#_) { scroll-snap-align: start; flex: 0 0 auto; }
  html:root body.lp .pill:not(#_) { min-height: 50px; }
  html:root body.lp .lp-foot .lp-foot__cols:not(#_) { gap: 22px 16px; }
}
/* Large desktops and ultra-wide: scale the stage, never stretch reading widths. */
@media (min-width: 1680px) {
  html:root body.lp { --sb-content: 1440px; }
  html:root body.lp .wrap:not(#_) { max-width: 1440px; }
}
@media (min-width: 2200px) {
  html:root body.lp { --sb-content: 1600px; }
  html:root body.lp .wrap:not(#_) { max-width: 1600px; }
  html:root body.lp.lp-home .hero:not(#_) { max-width: 1920px; }
}
/* Short landscape screens (phones sideways, small laptops). */
@media (max-height: 520px) and (orientation: landscape) {
  html:root body.lp .app-tabbar:not(#_) { height: 54px; bottom: max(6px, env(safe-area-inset-bottom)); }
  html:root body.lp .app-tab:not(#_) span:not(.app-tab__bag):not(.cart-count) { display: none; }
  html:root body.lp .app-tab__bag { margin-top: 0; width: 42px; height: 42px; }
  html:root body.lp.lp-home .hero:not(#_) { min-height: 0 !important; }
}

/* Tablet + phone header: logo and one menu control; primary routes live in the tab bar. */
@media (max-width: 1024px) {
  html:root body.lp:has(.app-tabbar) .lp-nav__left:not(#_) { display: none !important; }
  html:root body.lp .lp-nav .nav-toggle:not(#_) { display: inline-flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; }
  html:root body.lp .lp-nav__row:not(#_) { min-height: 64px !important; }
  html:root body.lp .lp-nav__brand img:not(#_) { height: 46px !important; }
}
@media (min-width: 1025px) {
  html:root body.lp.lp-home .hero__big:not(#_) { max-width: 12ch !important; }
}

/* Keep the product centred inside its arch at every intermediate width. */
@media (max-width: 1024px) {
  html:root body.lp.lp-home .hero__drink:not(#_) {
    position: absolute !important; inset: auto !important; left: 50% !important; top: 50% !important;
    translate: none; margin: 0 !important; /* transform already centres it; a second offset made it snap */
    width: min(86%, 460px) !important; max-width: 86% !important; height: auto !important;
  }
}
@media (max-width: 380px) {
  html:root body.lp.lp-home .hero__actions:not(#_) { flex-wrap: wrap !important; row-gap: 14px; }
  html:root body.lp.lp-home .hero__text-link:not(#_) { white-space: normal !important; }
}

/* Segmented controls always read as one row, like a native control. */
html:root body.lp .segmented:not(#_) { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none !important; border-radius: 18px; }
html:root body.lp .segmented button:not(#_) { width: auto !important; border-radius: 14px !important; padding: 8px 10px !important; line-height: 1.2 !important; white-space: normal; text-align: center; }

/* =========================================================================
   APP RHYTHM — on touch-size screens the storefront stops pacing like a
   website (tall heroes, 70px section gaps, display-size headings) and adopts
   native-app proportions: a compact bar, 28–34px screen titles, snap-scrolling
   shelves, list-style menu rows and sticky section headers.
   ========================================================================= */

/* Native-feeling page changes where supported (Chrome/Edge/Safari 18+):
   the header and tab bar stay put while the screen content cross-fades. */
@view-transition { navigation: auto; }
html:root body.lp .lp-nav { view-transition-name: sb-header; }
html:root body.lp .app-tabbar { view-transition-name: sb-tabbar; }
::view-transition-old(root) { animation: sig-vt-out .18s ease both; }
::view-transition-new(root) { animation: sig-vt-in .32s var(--sig-ease, ease) both; }
@keyframes sig-vt-out { to { opacity: 0; } }
@keyframes sig-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

@media (max-width: 1024px) {
  /* Compact bar */
  html:root body.lp .lp-nav__row:not(#_) { min-height: 56px !important; height: 56px; padding-block: 6px !important; }
  html:root body.lp .lp-nav__brand img:not(#_) { height: 38px !important; }
  html:root body.lp .lp-nav:not(#_) { border-bottom: 1px solid rgba(255,244,232,.08) !important; }
  html:root body.lp .lp-nav .nav-toggle:not(#_) { width: 44px; height: 44px; border-radius: 999px !important; }

  /* Eyebrows lose the editorial hairline — a plain label, like an app section tag. */
  html:root body.lp :is(.ey, .eyebrow, .hero__eyebrow):not(#_)::before { display: none !important; }
  html:root body.lp :is(.ey, .eyebrow, .hero__eyebrow):not(#_) { font-size: 11px !important; letter-spacing: .1em !important; gap: 0; }

  /* Tab bar: Satoshi labels, springy selection. */
  html:root body.lp .app-tab:not(#_) { font-family: var(--sig-sans); font-weight: 700; font-size: 10.5px; letter-spacing: 0; }
  html:root body.lp .app-tab svg { transition: background .35s var(--sig-spring), transform .35s var(--sig-spring) !important; }
  html:root body.lp .app-tab[aria-current="page"] svg { transform: translateY(-1px); }
}

@media (max-width: 640px) {
  html:root body.lp { --app-gutter: 20px; }

  /* ---- Home: a welcome screen, not a landing page */
  html:root body.lp.lp-home .hero:not(#_) { padding-top: 28px !important; padding-bottom: 28px !important; min-height: 0 !important; row-gap: 24px !important; }
  html:root body.lp.lp-home .hero__eyebrow:not(#_) { margin-bottom: 12px !important; }
  html:root body.lp.lp-home .hero__big:not(#_) { max-width: 9ch !important; font-size: clamp(44px, 12.4vw, 54px) !important; line-height: 1 !important; letter-spacing: -.035em !important; }
  html:root body.lp.lp-home .hero__sub:not(#_) { font-size: 15.5px !important; line-height: 1.5 !important; margin-top: 14px !important; }
  html:root body.lp.lp-home .hero__actions:not(#_) { margin-top: 22px !important; gap: 18px !important; }
  html:root body.lp.lp-home .hero__proof:not(#_) { display: none !important; }
  html:root body.lp.lp-home .hero__visual:not(#_) { max-height: 420px; }
  html:root body.lp .pill:not(#_) { min-height: 48px; padding: 0 20px !important; font-size: 14.5px !important; }

  /* Section rhythm */
  html:root body.lp :is(.selection, .places):not(#_) { padding-top: 40px !important; padding-bottom: 40px !important; }
  html:root body.lp .finale:not(#_) { padding-top: 72px !important; padding-bottom: 64px !important; }
  html:root body.lp .order-ribbon:not(#_) { padding-top: 16px !important; padding-bottom: 16px !important; }
  html:root body.lp .order-ribbon__actions a:not(#_) { border-radius: 16px !important; min-height: 64px; }
  html:root body.lp .section-heading:not(#_) { padding-bottom: 0 !important; border-bottom: 0 !important; margin-bottom: 18px !important; }
  html:root body.lp .section-heading .ey:not(#_) { margin-bottom: 8px !important; }
  html:root body.lp .section-heading h2:not(#_),
  html:root body.lp .selection .section-heading h2:not(#_),
  html:root body.lp :is(.places__head, .loyalty__copy h2, .home-story__copy h2):not(#_) { font-size: 34px !important; line-height: 1.04 !important; letter-spacing: -.03em !important; }
  html:root body.lp .section-heading > p:not(#_) { font-size: 14.5px !important; line-height: 1.5 !important; margin-top: 8px !important; }
  html:root body.lp .finale__big:not(#_) { font-size: clamp(44px, 12.4vw, 56px) !important; }

  html:root body.lp .dcard__im:not(#_) { border-radius: 18px !important; }
  html:root body.lp :is(.dcard__add):not(#_) { width: 32px !important; height: 32px !important; }
  html:root body.lp .dcard__no:not(#_) { margin-top: 12px !important; font-size: 9.5px !important; }
  html:root body.lp .dcard__nm:not(#_) { font-size: 19px !important; }
  html:root body.lp .dcard__pr:not(#_) { margin-top: 4px !important; font-size: 14px !important; }
  html:root body.lp .sel-foot:not(#_) { margin-top: 20px !important; }

  html:root body.lp .loyalty__art:not(#_) { min-height: 0 !important; height: 340px !important; padding-block: 24px !important; }
  html:root body.lp .loyalty__copy:not(#_) { padding-top: 32px !important; padding-bottom: 40px !important; }
  html:root body.lp .loyalty__copy li:not(#_) { padding-block: 12px !important; font-size: 15px !important; }
  html:root body.lp .home-story__visual:not(#_) { min-height: 0 !important; height: 300px !important; margin-block: 24px 0 !important; }
  html:root body.lp .home-story__visual img:not(#_) { max-height: 240px !important; width: auto !important; }
  html:root body.lp .home-story__copy:not(#_) { padding-top: 28px !important; padding-bottom: 40px !important; }
  html:root body.lp .home-story__copy p:not(#_) { font-size: 15px !important; line-height: 1.6 !important; }

  /* ---- Menu: a compact screen title, then an ordering list */
  html:root body.lp .menu-hero:not(#_) { padding-top: 16px !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  html:root body.lp .menu-order-context:not(#_) { margin: 0 0 20px !important; padding: 14px 16px !important; border-radius: 18px !important; }
  html:root body.lp .menu-order-context :is(.ey, .eyebrow):not(#_) { font-size: 10px !important; margin-bottom: 4px !important; }
  html:root body.lp .menu-order-context__button:not(#_) { min-height: 40px; margin-top: 10px; }
  html:root body.lp .menu-hero__intro:not(#_) { padding: 0 !important; width: auto !important; }
  html:root body.lp .menu-hero__big:not(#_) { font-size: 36px !important; line-height: 1.04 !important; letter-spacing: -.03em !important; }
  html:root body.lp .menu-hero__sub:not(#_) { font-size: 14.5px !important; line-height: 1.5 !important; margin-top: 8px !important; }
  html:root body.lp .menu-hero .filter-row:not(#_) {
    top: 56px !important; margin-top: 14px !important; padding-block: 10px !important;
    background: color-mix(in srgb, var(--sig-foam) 86%, transparent) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 0 !important; box-shadow: none !important;
  }
  html:root body.lp .filter-pill:not(#_) { min-height: 36px; padding: 0 15px !important; font-size: 13.5px !important; }
  html:root body.lp .menu-body:not(#_) { padding-top: 8px !important; }
  html:root body.lp .menu-section:not(#_) { margin-bottom: 28px !important; }

  /* Sticky, frosted section headers — like an iOS grouped list. */
  html:root body.lp .menu-section__title:not(#_) {
    position: sticky; top: 56px; z-index: 5;
    margin: 0 calc(-1 * var(--app-gutter)) 4px !important; padding: 12px var(--app-gutter) 10px !important;
    font-size: 24px !important; line-height: 1.1 !important;
    background: color-mix(in srgb, var(--sig-foam) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
    border-bottom: 1px solid var(--sig-line) !important;
  }

  /* Drinks as list rows: thumbnail · name + feeling · price, add on the thumb. */
  html:root body.lp .drink-grid:not(#_) { display: flex !important; flex-direction: column; gap: 0 !important; }
  html:root body.lp .drink-card:not(#_) {
    display: grid !important; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 14px;
    width: 100%; padding: 14px 0 !important; text-align: left;
    border-bottom: 1px solid var(--sig-line) !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
  }
  html:root body.lp .drink-card:last-child:not(#_) { border-bottom: 0 !important; }
  html:root body.lp .drink-card__media:not(#_) { width: 84px !important; height: 84px !important; aspect-ratio: 1 !important; border-radius: 18px !important; display: grid !important; place-items: center; }
  html:root body.lp .drink-card__media img:not(#_) { width: 116% !important; height: 116% !important; max-width: none !important; object-fit: contain; }
  html:root body.lp .drink-card__media .add-btn:not(#_) { width: 28px !important; height: 28px !important; min-width: 0 !important; min-height: 0 !important; right: 4px !important; bottom: 4px !important; font-size: 16px !important; }
  html:root body.lp .drink-card__badge:not(#_) { top: 6px !important; left: 6px !important; padding: 3px 7px !important; font-size: 8px !important; letter-spacing: .08em !important; }
  html:root body.lp .drink-card__body:not(#_) { padding: 0 !important; gap: 2px !important; min-width: 0; }
  html:root body.lp .drink-card__tagline:not(#_) { margin: 0 0 3px !important; font-size: 9.5px !important; }
  html:root body.lp .drink-card__name:not(#_) { font-size: 20px !important; line-height: 1.12 !important; margin: 0 !important; }
  html:root body.lp .drink-card__name .product-type:not(#_) { display: block; margin-top: 1px; font-size: 13.5px !important; }
  html:root body.lp .drink-card__meta:not(#_) { margin-top: 4px !important; }
  html:root body.lp .drink-card__foot:not(#_) { margin-top: 8px !important; padding: 0 !important; border: 0 !important; }
  html:root body.lp .drink-card__price:not(#_) { font-size: 14.5px !important; }

  /* ---- Other screens share the compact screen-title scale */
  html:root body.lp :is(.checkout-hero, .account-hero, .outlets-hero):not(#_) { padding-top: 22px !important; padding-bottom: 22px !important; }
  html:root body.lp :is(.checkout-hero__big, .account-hero__big, .outlets-hero__big, .about-story h1):not(#_) { font-size: 36px !important; line-height: 1.04 !important; letter-spacing: -.03em !important; }
  html:root body.lp :is(.checkout-hero__sub, .account-hero__sub, .outlets-hero__sub):not(#_) { font-size: 14.5px !important; line-height: 1.5 !important; }
  html:root body.lp :is(.checkout-card, .order-summary, .auth-card, .account-dashboard-card, .account-address-card, .checkout-context-card):not(#_) { border-radius: 20px !important; box-shadow: 0 1px 2px rgba(43,26,19,.04) !important; }
  html:root body.lp .outlet__body h2:not(#_) { font-size: 28px !important; }
  html:root body.lp .place h3:not(#_) { font-size: 26px !important; }

  /* Bottom sheets feel native: grabber + rounded top. */
  html:root body.lp :is(.item-modal, .cart-drawer):not(#_)::before {
    content: ""; position: absolute; top: 8px; left: 50%; z-index: 3; translate: -50% 0;
    width: 38px; height: 5px; border-radius: 999px; background: rgba(43,26,19,.18);
  }
}

/* Tablets keep a grid, but at app density. */
@media (min-width: 641px) and (max-width: 1024px) {
  html:root body.lp :is(.selection, .places):not(#_) { padding-top: 56px !important; padding-bottom: 56px !important; }
  html:root body.lp .section-heading h2:not(#_),
  html:root body.lp .selection .section-heading h2:not(#_),
  html:root body.lp :is(.places__head, .loyalty__copy h2, .home-story__copy h2):not(#_) { font-size: clamp(40px, 5.6vw, 52px) !important; }
  html:root body.lp .section-heading:not(#_) { border-bottom: 0 !important; padding-bottom: 0 !important; }
  html:root body.lp .menu-section__title:not(#_) {
    position: sticky; top: 56px; z-index: 5; padding-top: 12px !important;
    background: color-mix(in srgb, var(--sig-foam) 88%, transparent);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
}

/* Header logo: smaller mark, bigger tap target. Padding widens the hit area;
   the matching negative margin keeps the bar's layout unchanged. */
html:root body.lp .lp-nav .lp-nav__brand:not(#_) {
  padding: 8px 14px; margin: -8px -14px; border-radius: 14px;
  position: relative; z-index: 2; /* sit above .lp-nav__left, whose box overlapped the logo */
  min-height: 48px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease, background-color .2s ease;
}
html:root body.lp .lp-nav .lp-nav__brand img:not(#_) { height: 48px !important; width: auto !important; pointer-events: none; }
html:root body.lp .lp-nav .lp-nav__brand:not(#_):focus-visible { outline: 2px solid rgba(255,244,232,.7); outline-offset: 0; }
@media (hover: hover) { html:root body.lp .lp-nav .lp-nav__brand:not(#_):hover { opacity: .82; } }
html:root body.lp .lp-nav .lp-nav__brand:not(#_):active { background-color: rgba(255,244,232,.08); }
@media (max-width: 1024px) {
  html:root body.lp .lp-nav .lp-nav__brand img:not(#_) { height: 34px !important; }
}

/* ------------------------------------------------ Type consistency (v2)
   One rule set for the whole storefront:
   · Every product name is one line of Gambetta, upright, weight 500 —
     whether or not the drink is named for a feeling.
   · Italic is reserved for the <em> accent inside display headlines.
     Supporting lines (slogan tag, ticker, loyalty stamp, step numbers)
     are upright Gambetta so the slogan reads the same everywhere. */
html:root body.lp :is(.drink-card__name, .dcard__nm, .item-modal__body h2):not(#_) {
  font-family: var(--sig-display) !important; font-style: normal !important;
  font-weight: 500 !important; letter-spacing: -.02em !important; font-synthesis: none;
}
html:root body.lp :is(.drink-card__name, .item-modal__body h2, .cart-line__name, .order-summary, .order-history-item) :is(.product-feeling, .product-type):not(#_),
html:root body.lp .dcard__feeling:not(#_) {
  font: inherit !important; font-style: inherit !important; color: inherit !important;
  letter-spacing: inherit !important; text-transform: none !important;
}
html:root body.lp .dcard__feeling:not(#_) { display: none !important; }
html:root body.lp :is(.lp-foot__tag, .finale__ticker, .loyalty__stamp, .loyalty__step-number):not(#_) {
  font-family: var(--sig-display) !important; font-style: normal !important; font-weight: 400 !important; font-synthesis: none;
}
html:root body.lp :is(.hero__big, .menu-hero__big, .finale__big, .checkout-hero__big, .account-hero__big, .outlets-hero__big, .about-story h1, .section-title, .places__head, .home-story__copy h2, .loyalty__copy h2) em:not(#_) {
  font-style: italic !important; font-weight: 400 !important; font-synthesis: none;
}

/* Footer wordmark: sized to the footer's own width so the full slogan
   always fits on one line (Gambetta sets ≈9.4em wide for this phrase). */
html:root body.lp .lp-foot .wrap:not(#_) { container-type: inline-size; }
html:root body.lp .lp-foot .wrap:not(#_)::after {
  font-size: 10.2cqi !important; white-space: nowrap !important; overflow: visible !important;
  text-overflow: clip; line-height: 1 !important; padding-bottom: .08em;
}
@supports not (font-size: 1cqi) {
  html:root body.lp .lp-foot .wrap:not(#_)::after { font-size: 8.6vw !important; }
}

/* Footer columns: always stacked link lists; one slogan line (the wordmark
   below carries it), no duplicate in the legal bar. */
html:root body.lp .lp-foot__cols > div:not(#_) { display: flex !important; flex-direction: column; align-items: flex-start; gap: 12px; }
html:root body.lp .lp-foot__cols > div > :is(a, span):not(#_) { display: inline-block; margin: 0 !important; color: rgba(255,244,232,.7) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.4; }
html:root body.lp .lp-foot__cols h4:not(#_) { margin: 0 0 4px !important; }
html:root body.lp .lp-foot__bottom > span:last-child:not(:first-child):not(#_) { display: none !important; }
/* Feeling names read as one continuous product name. */
html:root body.lp :is(.drink-card__name, .item-modal__body h2) .product-feeling:not(#_) { display: inline !important; text-transform: none !important; }
html:root body.lp :is(.drink-card__name, .item-modal__body h2) .product-type:not(#_) { display: inline !important; }
html:root body.lp .lp-foot__cols > div:not(#_) { gap: 2px; }
html:root body.lp .lp-foot__cols > div > :is(a, span):not(#_) { display: inline-flex; align-items: center; min-height: 40px; padding: 0 !important; }

/* =========================================================================
   ROUND 3 — persistent category bar, calmer footer
   ========================================================================= */

/* Menu: the category bar stays docked under the app bar for the whole list,
   like a native ordering app. The hero wrappers dissolve (display: contents)
   so the bar's sticky range is the full page instead of the hero box. */
@media (max-width: 640px) {
  html:root body.lp .menu-hero:not(#_),
  html:root body.lp .menu-hero > .wrap:not(#_) { display: contents !important; }
  html:root body.lp .menu-hero > .wrap > :not(.filter-row):not(#_) { margin-inline: var(--app-gutter) !important; }
  html:root body.lp .menu-order-context:not(#_) { margin-top: 16px !important; }
  html:root body.lp .menu-hero__art:not(#_) { display: none !important; }
  html:root body.lp .menu-hero .filter-row:not(#_) {
    position: sticky !important; top: 56px !important; z-index: 6;
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important;
    margin: 18px 0 0 !important; padding: 8px var(--app-gutter) !important;
    scroll-padding-inline: var(--app-gutter); scrollbar-width: none;
    background: color-mix(in srgb, var(--sig-foam) 90%, transparent) !important;
    box-shadow: 0 1px 0 var(--sig-line) !important;
  }
  html:root body.lp .menu-hero .filter-row:not(#_)::-webkit-scrollbar { display: none; }
  html:root body.lp .menu-hero .filter-pill:not(#_) { flex: 0 0 auto; min-height: 36px; }
  html:root body.lp .menu-body:not(#_) { padding-top: 0 !important; }

  /* Section headers dock beneath the category bar (56 bar + 52 chips). */
  html:root body.lp .menu-section__title:not(#_) {
    top: 108px !important; z-index: 5;
    padding: 14px var(--app-gutter) 8px !important;
    font-size: 21px !important; border-bottom: 0 !important;
    box-shadow: 0 1px 0 var(--sig-line);
  }

  /* Footer: a compact two-column index instead of a long stacked list;
     the giant wordmark already carries the slogan, so the tag steps back. */
  html:root body.lp .lp-foot__tag:not(#_) { display: none !important; }
  html:root body.lp .lp-foot__top:not(#_) { padding-bottom: 24px !important; }
  html:root body.lp .lp-foot__brand img:not(#_) { height: 44px !important; width: auto !important; }
  html:root body.lp .lp-foot__cols:not(#_) {
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important;
    padding-top: 24px !important;
  }
  html:root body.lp .lp-foot__cols > div > :is(a, span):not(#_) { min-height: 36px; font-size: 14.5px !important; }
  html:root body.lp .lp-foot:not(#_) { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ---------------------------------------------------------------- Round 4
   Tab bar stays crisp over the dark footer; footer wordmark is legible as
   an engraving rather than nearly invisible. */
@media (max-width: 1024px) {
  html:root body.lp .app-tabbar:not(#_) {
    background: rgba(255, 252, 247, .92);
    box-shadow: 0 0 0 1px rgba(43,26,19,.08), 0 18px 40px -14px rgba(31,19,13,.45), inset 0 1px 0 rgba(255,255,255,.9);
  }
}
html:root body.lp .lp-foot .wrap:not(#_)::after { color: rgba(255, 244, 232, .17) !important; }
/* Loyalty sits on latte, so its italic accent takes the deeper caramel. */
html:root body.lp .loyalty__copy h2 em:not(#_) { color: var(--sig-caramel-deep) !important; }

/* =========================================================================
   ROUND 5 — one arrival motion, a docked category rail, calmer product
   grids and best sellers shelved by type.
   ========================================================================= */

/* A stale storefront script once injected a second route dock that covered
   the tab bar's Bag button. The tab bar is the only dock. */
html:root body.lp:has(.app-tabbar) :is(.mobile-order-dock, .mobile-cart-summary):not(#_) { display: none !important; }

/* ---------------------------------------------------------------- Arrival
   The home hero's entrance, reused: copy rises out of a soft blur, imagery
   opens through the café-window arch. JS (initArrivals) marks elements as
   they scroll in; page intros run on load. */
@media (prefers-reduced-motion: no-preference) {
  html:root body.lp .will-arrive:not(.is-arrived):not(#_) { opacity: 0; }
  html:root body.lp [data-arrive="rise"].is-arrived { animation: sig-rise .9s var(--sig-ease) var(--arrive-delay, 0ms) backwards; }
  html:root body.lp [data-arrive="window"].is-arrived { animation: sig-window 1.2s var(--sig-ease) var(--arrive-delay, 0ms) backwards; }
  html:root body.lp [data-arrive="card"].is-arrived :is(.dcard__im, .drink-card__media) {
    animation: sig-window 1.05s var(--sig-ease) var(--arrive-delay, 0ms) backwards;
  }
  html:root body.lp [data-arrive="card"].is-arrived > :not(.dcard__im):not(.drink-card__media) {
    animation: sig-rise .9s var(--sig-ease) calc(var(--arrive-delay, 0ms) + 140ms) backwards;
  }

  /* Every page opens the way home does. */
  html:root body.lp :is(.menu-hero__intro, .outlets-hero .wrap, .account-hero .wrap, .checkout-hero .wrap, .about-story__intro, .about-story__copy) > * {
    animation: sig-rise 1.1s var(--sig-ease) backwards;
  }
  html:root body.lp :is(.menu-hero__intro, .outlets-hero .wrap, .account-hero .wrap, .checkout-hero .wrap, .about-story__intro, .about-story__copy) > :nth-child(2) { animation-delay: .1s; }
  html:root body.lp :is(.menu-hero__intro, .outlets-hero .wrap, .account-hero .wrap, .checkout-hero .wrap, .about-story__intro, .about-story__copy) > :nth-child(3) { animation-delay: .2s; }
  html:root body.lp :is(.menu-hero__intro, .outlets-hero .wrap, .account-hero .wrap, .checkout-hero .wrap, .about-story__intro, .about-story__copy) > :nth-child(n+4) { animation-delay: .28s; }
  html:root body.lp .menu-order-context { animation: sig-rise 1s var(--sig-ease) backwards; }
  html:root body.lp .menu-rail { animation: sig-rise 1s .3s var(--sig-ease) backwards; }
  html:root body.lp :is(.menu-hero__art, .about-story__drink) { animation: sig-window 1.3s .08s var(--sig-ease) backwards; }
}

/* ------------------------------------------------------------ Menu rail
   Categories live in a docked segmented track under the app bar for the
   whole list; an espresso highlight glides to the chosen category. */
html:root body.lp .menu-rail:not(#_) {
  --rail-top: 82px;
  position: sticky; top: var(--rail-top); z-index: 30;
  padding: 12px 0;
  background: #fbf8f3; /* the page canvas; <main> itself is white */
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--sig-ease), border-color .3s var(--sig-ease);
}
html:root body.lp .menu-rail.is-stuck:not(#_) {
  background: color-mix(in srgb, var(--sig-foam) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px);
  border-bottom-color: var(--sig-line);
}
html:root body.lp .menu-rail__track:not(#_) {
  position: relative; display: flex; gap: 2px;
  width: max-content; max-width: 100%;
  padding: 4px; border-radius: 999px;
  background: var(--sig-milk);
  box-shadow: inset 0 0 0 1px var(--sig-line);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-padding-inline: 4px;
}
html:root body.lp .menu-rail__track:not(#_)::-webkit-scrollbar { display: none; }
html:root body.lp .menu-rail__ink:not(#_) {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px; background: var(--sig-espresso);
  box-shadow: 0 6px 14px -6px rgba(43,26,19,.45);
  transition: transform .5s var(--sig-spring), width .5s var(--sig-spring);
  pointer-events: none;
}
html:root body.lp .menu-chip:not(#_) {
  position: relative; z-index: 1; flex: 0 0 auto;
  height: 40px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--sig-ink-2);
  font: 600 14px/1 var(--sig-sans); letter-spacing: 0; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .35s var(--sig-ease), background-color .25s var(--sig-ease);
}
html:root body.lp .menu-chip[aria-pressed="true"]:not(#_) { color: var(--sig-foam); }
html:root body.lp .menu-chip:not(#_):focus-visible { outline: 2px solid var(--sig-caramel); outline-offset: 2px; }
@media (hover: hover) {
  html:root body.lp .menu-chip[aria-pressed="false"]:not(#_):hover { color: var(--sig-espresso); background: rgba(43,26,19,.05); }
}
html:root body.lp .menu-chip:not(#_):active { transform: scale(.96); }
html:root body.lp .menu-hero:not(#_) { border-bottom: 0 !important; padding-bottom: clamp(28px, 3vw, 44px) !important; }
html:root body.lp .menu-body:not(#_) { padding-top: clamp(32px, 4vw, 56px) !important; }

/* Section titles carry a quiet item count. */
html:root body.lp .menu-section__title:not(#_) { display: flex !important; align-items: baseline; justify-content: space-between; gap: 16px; }
html:root body.lp .menu-section__count:not(#_) {
  flex: none; font: 600 11px/1 var(--sig-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--sig-ink-3);
}

/* ------------------------------------------------------- Product cards
   Square tiles with the cup set inside at ~3/4 size, so a row reads as a
   catalogue rather than a wall of photos; name and price share one line. */
@media (min-width: 641px) {
  html:root body.lp .menu-body .drink-grid:not(#_) {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr)) !important;
    gap: clamp(28px, 2.8vw, 40px) clamp(14px, 1.6vw, 22px) !important;
  }
  html:root body.lp .menu-body .drink-card:not(#_) {
    display: flex !important; flex-direction: column; min-width: 0;
    padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left;
  }
  html:root body.lp :is(.dcard__im, .menu-body .drink-card__media):not(#_) {
    position: relative; display: grid !important; place-items: center;
    width: 100% !important; height: auto !important; aspect-ratio: 1 !important;
    border-radius: 20px !important; overflow: hidden;
  }
  html:root body.lp :is(.dcard__im, .menu-body .drink-card__media) img:not(#_) {
    width: 80% !important; height: 80% !important; max-width: none !important;
    object-fit: contain !important; margin: 0 !important; position: static !important;
  }
  /* Menu thumbs carry their own margin; home uses the looser full-size photo. */
  html:root body.lp .menu-body .drink-card__media img:not(#_) { width: 100% !important; height: 100% !important; }
  html:root body.lp .dcard__im img:not(#_) { width: 88% !important; height: 88% !important; }
  html:root body.lp :is(.dcard__add, .menu-body .drink-card__media .add-btn):not(#_) {
    position: absolute !important; right: 12px !important; bottom: 12px !important; top: auto !important; left: auto !important;
    display: grid !important; place-items: center; width: 36px !important; height: 36px !important;
  }
  html:root body.lp .menu-body .drink-card__badge:not(#_) { position: absolute !important; top: 12px !important; left: 12px !important; }

  html:root body.lp .menu-body .drink-card__body:not(#_) {
    display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: baseline;
    row-gap: 0; padding: 14px 2px 0 !important;
  }
  html:root body.lp .menu-body .drink-card__tagline:not(#_) { grid-column: 1 / -1; margin: 0 0 7px !important; }
  html:root body.lp .menu-body .drink-card__name:not(#_) { grid-column: 1; margin: 0 !important; }
  html:root body.lp .menu-body .drink-card__foot:not(#_) { grid-column: 1; margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; }
  html:root body.lp .menu-body .drink-card__meta:not(#_) { grid-column: 1 / -1; margin-top: 10px !important; }
}
html:root body.lp :is(.dcard__nm, .drink-card__name):not(#_) { font-size: clamp(18px, 1.3vw, 20px) !important; line-height: 1.16 !important; }
html:root body.lp :is(.dcard__pr, .drink-card__price):not(#_) { font-size: 14px !important; white-space: nowrap; }

/* -------------------------------------------------------- Best sellers
   Drinks and food each get their own grid behind a segmented switch.
   It wraps instead of scrolling sideways: 5 across on desktop, 3 on
   tablet, 2 on phones — and touch sizes show the top six only. */
html:root body.lp .sel-bar:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(24px, 3vw, 36px) 0 clamp(18px, 2vw, 26px); }
html:root body.lp .sel-bar[hidden]:not(#_) { display: none; }
html:root body.lp .sel-tabs:not(#_) {
  position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: var(--sig-milk); box-shadow: inset 0 0 0 1px var(--sig-line);
}
html:root body.lp .sel-tabs[hidden]:not(#_) { display: none; }
html:root body.lp .sel-tabs [role="tab"]:not(#_) {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
  color: var(--sig-ink-2); font: 600 14.5px/1 var(--sig-sans); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .35s var(--sig-ease);
}
html:root body.lp .sel-tabs [role="tab"] span:not(#_) {
  min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center;
  border-radius: 999px; background: rgba(43,26,19,.07); font-size: 11.5px; font-weight: 700;
  transition: background .35s var(--sig-ease);
}
html:root body.lp .sel-tabs [aria-selected="true"]:not(#_) { color: var(--sig-foam); }
html:root body.lp .sel-tabs [aria-selected="true"] span:not(#_) { background: rgba(255,244,232,.16); }
html:root body.lp .sel-tabs [role="tab"]:not(#_):focus-visible { outline: 2px solid var(--sig-caramel); outline-offset: 2px; }
html:root body.lp .sel-tabs__ink:not(#_) {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px; background: var(--sig-espresso); box-shadow: 0 6px 14px -6px rgba(43,26,19,.45);
  transition: transform .5s var(--sig-spring), width .5s var(--sig-spring); pointer-events: none;
}

html:root body.lp .sel-grid:not(#_) {
  display: grid !important; grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: clamp(28px, 2.8vw, 40px) clamp(14px, 1.6vw, 22px) !important;
  overflow: visible; margin-inline: 0 !important; padding: 0 !important;
}
html:root body.lp .sel-grid > *:not(#_) { min-width: 0; }
html:root body.lp .sel-grid > .selection__status:not(#_) { grid-column: 1 / -1; }
html:root body.lp .dcard:not(#_) { display: flex !important; flex-direction: column; min-width: 0; text-decoration: none; }
html:root body.lp .dcard__no:not(#_) { margin: 16px 0 0 !important; }
/* Name above price at every width: five-up desktop tiles are too narrow for a
   side-by-side row, so long names wrapped into three lines beside the price. */
html:root body.lp .dcard__row:not(#_) { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; padding-inline: 2px; }
html:root body.lp .dcard__row .dcard__nm:not(#_) { margin: 0 !important; min-width: 0; }
html:root body.lp .dcard__row .dcard__pr:not(#_) { margin: 0 !important; padding-top: 0 !important; flex: none; }
html:root body.lp .dcard__no:not(#_) { padding-inline: 2px; }
html:root body.lp .sel-foot:not(#_) { margin-top: clamp(20px, 2.4vw, 32px) !important; }

/* ---------------------------------------------------- Tablet + phone */
@media (max-width: 1024px) {
  html:root body.lp .menu-rail:not(#_) { --rail-top: 56px; }
  html:root body.lp .sel-grid:not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  html:root body.lp .sel-grid > .dcard:nth-child(n+7):not(#_) { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  html:root body.lp .menu-section__title:not(#_) { top: calc(56px + 64px) !important; }
}
@media (max-width: 640px) {
  html:root body.lp .menu-rail:not(#_) { padding: 8px 0; margin-top: 10px; background: transparent; }
  html:root body.lp .menu-rail > .wrap:not(#_) { padding-inline: 0 !important; }
  html:root body.lp .menu-rail__track:not(#_) {
    max-width: calc(100% - 2 * var(--app-gutter, 20px)); margin-inline: var(--app-gutter, 20px);
    padding: 3px;
  }
  html:root body.lp .menu-rail__ink:not(#_) { top: 3px; bottom: 3px; }
  html:root body.lp .menu-chip:not(#_) { height: 36px; padding: 0 15px; font-size: 13.5px; }
  html:root body.lp .menu-hero:not(#_) { padding-bottom: 0 !important; }
  html:root body.lp .menu-body:not(#_) { padding-top: 0 !important; }
  /* Section headers dock beneath the rail (56 bar + 58 rail). */
  html:root body.lp .menu-section__title:not(#_) { top: 114px !important; }
  html:root body.lp .menu-section__count:not(#_) { font-size: 10px; }
  html:root body.lp .menu-body .menu-section:not(#_) { margin-top: 0 !important; }

  html:root body.lp .sel-bar:not(#_) { margin: 4px 0 16px; }
  html:root body.lp .sel-tabs:not(#_) { display: flex; width: 100%; }
  html:root body.lp .sel-tabs [role="tab"]:not(#_) { flex: 1 1 0; justify-content: center; height: 40px; }
  html:root body.lp .sel-grid:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 12px !important; }
  html:root body.lp .dcard__im:not(#_) { aspect-ratio: 1 !important; height: auto !important; border-radius: 18px !important; display: grid !important; place-items: center; position: relative; overflow: hidden; }
  html:root body.lp .dcard__im img:not(#_) { width: 84% !important; height: 84% !important; max-width: none !important; object-fit: contain !important; }
  html:root body.lp .dcard__add:not(#_) { position: absolute !important; right: 8px !important; bottom: 8px !important; }
  html:root body.lp .dcard__no:not(#_) { margin-top: 10px !important; }
  html:root body.lp .dcard__row:not(#_) { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }
  html:root body.lp .dcard__nm:not(#_) { font-size: 16.5px !important; }
  html:root body.lp .dcard__pr:not(#_) { font-size: 13.5px !important; }
}

/* ------------------------------------------------------------- Bag sheet
   The bag unfolds upward out of the dock instead of sliding in from the
   side: same width and corner radius as the tab bar, anchored to it, and
   revealed bottom-up with a clip so it reads as the dock growing. The dock
   stays on top as the sheet's base; tapping Bag again folds it away.
   Desktop has no dock, so the same card rises from the bottom-right. */
html:root body.lp .cart-drawer:not(#_) {
  --bag-radius: 26px;
  --bag-base: 0px;
  top: auto !important; left: auto !important; right: 24px !important; bottom: 24px !important;
  width: min(420px, calc(100vw - 48px)) !important; max-width: none !important;
  height: min(720px, calc(100dvh - 120px)) !important; max-height: none !important;
  padding-bottom: var(--bag-base) !important;
  border: 1px solid var(--sig-line) !important; border-radius: var(--bag-radius) !important;
  overflow: hidden;
  transform: none !important;
  clip-path: inset(calc(100% - 64px) 0 0 0 round var(--bag-radius));
  opacity: 0; visibility: hidden; pointer-events: none;
  box-shadow: 0 40px 90px -30px rgba(31,19,13,.45), 0 0 0 1px rgba(43,26,19,.04) !important;
  transition: clip-path .56s var(--sig-spring, cubic-bezier(.22,1,.36,1)), opacity .22s ease, visibility 0s linear .56s !important;
}
html:root body.lp .cart-drawer.is-open:not(#_) {
  clip-path: inset(0 0 0 0 round var(--bag-radius));
  opacity: 1; visibility: visible; pointer-events: auto;
  box-shadow: 0 40px 90px -30px rgba(31,19,13,.45), 0 0 0 1px rgba(43,26,19,.04) !important;
  transition: clip-path .56s var(--sig-spring, cubic-bezier(.22,1,.36,1)), opacity .16s ease, visibility 0s !important;
}
/* Contents drift up a touch behind the reveal. */
html:root body.lp .cart-drawer > *:not(#_) { transition: transform .56s var(--sig-spring, cubic-bezier(.22,1,.36,1)), opacity .3s ease; transform: translateY(28px); opacity: 0; }
html:root body.lp .cart-drawer.is-open > *:not(#_) { transform: none; opacity: 1; transition-delay: .06s; }
html:root body.lp .cart-drawer__foot:not(#_) { padding-bottom: 22px !important; }

@media (max-width: 1024px) {
  html:root body.lp .cart-drawer:not(#_) {
    left: max(12px, env(safe-area-inset-left)) !important; right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    margin-inline: auto; width: auto !important; max-width: 520px !important;
    height: min(680px, calc(100dvh - 96px - env(safe-area-inset-top))) !important;
  }
  html:root body.lp:has(.app-tabbar) .cart-drawer:not(#_) { --bag-base: 66px; }
  /* While the bag is up the dock is its base: above the sheet and the scrim. */
  html:root body.lp:has(.cart-drawer.is-open) .app-tabbar:not(#_) {
    z-index: 95; background: rgba(255, 252, 247, .96);
    box-shadow: 0 0 0 1px rgba(43,26,19,.08), inset 0 1px 0 rgba(255,255,255,.8);
  }
  html:root body.lp .app-tab__bag svg { transition: transform .45s var(--sig-spring, ease); }
  html:root body.lp:has(.cart-drawer.is-open) .app-tab__bag svg { transform: translateY(-1px) scale(1.08); }
  html:root body.lp:has(.cart-drawer.is-open) .app-tab:not(.app-tab--bag)[aria-current="page"] svg:not(#_) { background: transparent !important; }
}
@media (max-width: 640px) {
  html:root body.lp .cart-drawer:not(#_) { --bag-radius: 24px; }
  html:root body.lp:has(.app-tabbar) .cart-drawer:not(#_) { --bag-base: 64px; }
}
@media (max-width: 359px) {
  html:root body.lp .cart-drawer:not(#_) { left: 8px !important; right: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body.lp .cart-drawer:not(#_),
  html:root body.lp .cart-drawer.is-open:not(#_) { clip-path: none; transition: opacity .2s ease, visibility 0s linear .2s !important; }
  html:root body.lp .cart-drawer > *:not(#_) { transform: none; transition: none; }
}

/* =========================================================================
   ACCOUNT — member app screen (2026-09-25)
   Signed-in visitors get an app profile instead of a marketing page: a
   greeting, the Soulmates wallet card, a quiet stats strip, and a segmented
   control that swaps Orders / Rewards / Addresses / Settings in place.
   `html.has-session` is set before first paint (inline script in
   account.html) so the marketing hero never flashes for members.
   ========================================================================= */
html.has-session body.lp .account-hero:not(#_) { display: none !important; }
html.has-session body.lp .account-body:not(#_) { padding-top: clamp(28px, 4vw, 48px) !important; background: var(--sig-milk) !important; }
html:root body.lp .acct:not(#_) { max-width: 860px; margin: 0 auto; display: grid; gap: 18px; font-family: var(--sig-sans); color: var(--sig-ink); }
html:root body.lp .acct .is-loading:not(#_) {
  display: inline-block; min-width: 4.5ch; border-radius: 8px; color: transparent !important;
  background: linear-gradient(90deg, rgba(43,26,19,.06), rgba(43,26,19,.12), rgba(43,26,19,.06)) 0 0 / 200% 100%;
  animation: acct-shimmer 1.3s linear infinite;
}
html:root body.lp .acct-card .is-loading:not(#_) { background-image: linear-gradient(90deg, rgba(255,252,247,.08), rgba(255,252,247,.18), rgba(255,252,247,.08)); }
@keyframes acct-shimmer { to { background-position: -200% 0; } }
html:root body.lp .acct-skeleton:not(#_) { height: 76px; border-radius: 18px; margin-bottom: 10px; background: linear-gradient(90deg, var(--sig-milk), var(--sig-latte), var(--sig-milk)) 0 0 / 200% 100%; animation: acct-shimmer 1.3s linear infinite; }

/* Greeting */
html:root body.lp .acct-head:not(#_) { display: flex; align-items: center; gap: 16px; padding: 4px 2px 6px; }
html:root body.lp .acct-avatar:not(#_) {
  flex: 0 0 56px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(120% 120% at 20% 10%, #6b3f24, var(--sig-espresso)); color: var(--sig-honey);
  font: 500 26px/1 var(--sig-display); box-shadow: 0 10px 24px -12px rgba(43,26,19,.55), inset 0 0 0 1px rgba(255,255,255,.08);
}
html:root body.lp .acct-head__copy:not(#_) { min-width: 0; flex: 1; }
html:root body.lp .acct-head__copy p:not(#_) { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--sig-ink-2); }
html:root body.lp .acct-head__copy h1:not(#_) { margin: 2px 0 0; font: 400 clamp(32px, 4vw, 44px)/1 var(--sig-display) !important; letter-spacing: -.02em !important; text-transform: none !important; color: var(--sig-espresso) !important; }
html:root body.lp .acct-head__copy small:not(#_) { display: block; margin-top: 6px; font-size: 13px; color: var(--sig-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body.lp .acct-head__cta:not(#_) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--sig-espresso); color: var(--sig-foam) !important; font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 12px 26px -14px rgba(43,26,19,.7); transition: transform .25s var(--sig-ease), background .25s var(--sig-ease);
}
html:root body.lp .acct-head__cta:not(#_):hover { background: var(--sig-caramel-deep); transform: translateY(-1px); }

/* Wallet card */
html:root body.lp .acct-card:not(#_) {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(22px, 3.4vw, 32px); border-radius: 28px; color: var(--sig-foam);
  background: radial-gradient(80% 110% at 100% 0%, rgba(231,185,138,.34), transparent 58%), linear-gradient(140deg, #2b1a13 10%, #4a2a18 100%);
  box-shadow: 0 30px 60px -30px rgba(43,26,19,.7), inset 0 0 0 1px rgba(255,255,255,.06);
}
html:root body.lp .acct-card:not(#_)::after {
  content: ""; position: absolute; z-index: -1; right: -60px; bottom: -120px; width: 300px; height: 300px;
  border-radius: 999px 999px 40px 40px; border: 1px solid rgba(231,185,138,.18); transform: rotate(-12deg);
}
html:root body.lp .acct-card__top:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html:root body.lp .acct-card__brand:not(#_) { font: italic 400 22px/1 var(--sig-display); color: var(--sig-honey); letter-spacing: -.01em; }
html:root body.lp .acct-card__rule:not(#_) { min-width: 9ch; min-height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; background: rgba(255,252,247,.1); border: 1px solid rgba(255,252,247,.14); font-size: 12px; font-weight: 600; color: var(--sig-foam); white-space: nowrap; }
html:root body.lp .acct-card__balance:not(#_) { display: flex; align-items: baseline; gap: 10px; margin: clamp(26px, 5vw, 44px) 0 18px; }
html:root body.lp .acct-card__balance strong:not(#_) { font: 400 clamp(56px, 9vw, 84px)/.9 var(--sig-display); letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
html:root body.lp .acct-card__balance span:not(#_) { font-size: 14px; font-weight: 500; color: rgba(255,252,247,.64); }
html:root body.lp .acct-card__meter:not(#_) { height: 6px; border-radius: 999px; background: rgba(255,252,247,.12); overflow: hidden; }
html:root body.lp .acct-card__meter i:not(#_) { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sig-honey), #f6d7b0); transition: width 1.1s var(--sig-ease); }
html:root body.lp .acct-card__foot:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: rgba(255,252,247,.72); }
html:root body.lp .acct-card__foot a:not(#_) { color: var(--sig-foam) !important; font-weight: 600; text-decoration: none; white-space: nowrap; border-bottom: 1px solid rgba(255,252,247,.3); padding-bottom: 1px; }
html:root body.lp .acct-card__foot a:not(#_):hover { border-color: var(--sig-honey); }

/* Stats strip */
html:root body.lp .acct-stats:not(#_) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; background: var(--sig-foam); border: 1px solid var(--sig-line); overflow: hidden; }
html:root body.lp .acct-stats > div:not(#_) { min-width: 0; padding: 16px 20px; display: grid; gap: 4px; align-content: start; }
html:root body.lp .acct-stats > div + div:not(#_) { border-left: 1px solid var(--sig-line); }
html:root body.lp .acct-stats span:not(#_) { font-size: 12px; font-weight: 500; color: var(--sig-ink-3); }
html:root body.lp .acct-stats strong:not(#_) { font-size: clamp(17px, 2vw, 21px); font-weight: 650; letter-spacing: -.01em; color: var(--sig-espresso); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body.lp .acct-stats small:not(#_) { font-size: 11.5px; color: var(--sig-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Segmented tabs */
html:root body.lp .acct-tabs:not(#_) {
  position: sticky; top: 92px; z-index: 5; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px; margin-top: 8px; border-radius: 999px;
  background: rgba(239,226,209,.82); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--sig-line);
}
html:root body.lp .acct-tab:not(#_) {
  position: relative; z-index: 1; height: 40px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 14px/1 var(--sig-sans); color: var(--sig-ink-2); transition: color .25s var(--sig-ease);
}
html:root body.lp .acct-tab.is-active:not(#_) { color: var(--sig-espresso); }
html:root body.lp .acct-tab:not(#_):focus-visible { outline: 2px solid var(--sig-caramel); outline-offset: 2px; }
html:root body.lp .acct-tabs__ink:not(#_) {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(43,26,19,.08), 0 6px 16px -8px rgba(43,26,19,.25);
  transition: transform .4s var(--sig-spring), width .3s var(--sig-ease);
}

/* Panes */
html:root body.lp .acct-pane:not(#_) { padding: clamp(20px, 3vw, 28px); border-radius: 24px; background: var(--sig-foam); border: 1px solid var(--sig-line); margin: 0 !important; box-shadow: none !important; animation: acct-pane-in .35s var(--sig-ease) both; }
html:root body.lp .acct-pane[hidden]:not(#_) { display: none !important; }
@keyframes acct-pane-in { from { opacity: 0; transform: translateY(6px); } }
html:root body.lp .acct-pane__head:not(#_) { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
html:root body.lp .acct-pane__head h2:not(#_) { margin: 0; font: 400 26px/1.1 var(--sig-display) !important; letter-spacing: -.015em !important; text-transform: none !important; color: var(--sig-espresso) !important; }
html:root body.lp .acct-pane__head p:not(#_) { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sig-ink-2); max-width: 52ch; }
html:root body.lp .acct-link:not(#_) { flex: 0 0 auto; font-size: 13.5px; font-weight: 600; color: var(--sig-caramel-deep) !important; text-decoration: none; }
html:root body.lp .acct-muted:not(#_) { font-size: 13.5px; color: var(--sig-ink-3); }
html:root body.lp .acct-error:not(#_) { font-size: 13.5px; color: #a33a2a; }

/* Orders */
html:root body.lp .acct-orders:not(#_) { display: grid; margin: 0 -10px; }
html:root body.lp .acct-order:not(#_) { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 16px; transition: background .2s var(--sig-ease); }
html:root body.lp .acct-order + .acct-order:not(#_) { box-shadow: 0 -1px 0 var(--sig-line); }
html:root body.lp .acct-order:not(#_):hover { background: var(--sig-milk); }
html:root body.lp .acct-order__main:not(#_) { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding: 14px 0; color: inherit !important; text-decoration: none; }
html:root body.lp .acct-order__icon:not(#_) { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--sig-latte); color: var(--sig-espresso); }
html:root body.lp :is(.acct-order__icon, .acct-empty) svg:not(#_) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html:root body.lp .acct-order__body:not(#_) { flex: 1; min-width: 0; display: grid; gap: 2px; }
html:root body.lp .acct-order__body strong:not(#_) { font-size: 14.5px; font-weight: 650; letter-spacing: .01em; }
html:root body.lp .acct-order__items:not(#_) { font-size: 13.5px; color: var(--sig-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body.lp .acct-order__body small:not(#_) { font-size: 12px; color: var(--sig-ink-3); }
html:root body.lp .acct-order__side:not(#_) { flex: 0 0 auto; display: grid; justify-items: end; gap: 6px; }
html:root body.lp .acct-order__side strong:not(#_) { font-size: 14.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
html:root body.lp .acct-status:not(#_) {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(168,93,37,.12) !important; color: var(--sig-caramel-deep) !important;
  font-size: 11px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: capitalize !important;
}
html:root body.lp .acct-status:not(#_)::before { display: none !important; }
html:root body.lp .acct-status--completed:not(#_) { background: rgba(47,110,66,.1) !important; color: #2f6e42 !important; }
html:root body.lp :is(.acct-status--cancelled, .acct-status--pending_payment):not(#_) { background: rgba(43,26,19,.07) !important; color: var(--sig-ink-2) !important; }
html:root body.lp .acct-order__receipt:not(#_) {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--sig-line-strong); background: transparent; color: var(--sig-espresso); cursor: pointer;
  font: 600 12.5px/1 var(--sig-sans); transition: border-color .2s var(--sig-ease), background .2s var(--sig-ease);
}
html:root body.lp .acct-order__receipt svg:not(#_) { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:root body.lp .acct-order__receipt:not(#_):hover:not(:disabled):not(.is-pending) { border-color: var(--sig-espresso); background: #fff; }
html:root body.lp .acct-order__receipt.is-pending:not(#_) { border-style: dashed; color: var(--sig-ink-3); cursor: default; font-weight: 500; font-size: 11.5px; }
html:root body.lp .acct-empty:not(#_) { display: grid; justify-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
html:root body.lp .acct-empty svg:not(#_) { width: 34px; height: 34px; color: var(--sig-caramel); margin-bottom: 4px; }
html:root body.lp .acct-empty p:not(#_) { margin: 0 0 10px; font-size: 13.5px; color: var(--sig-ink-2); }

/* Rewards */
html:root body.lp .acct-steps:not(#_) { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
html:root body.lp .acct-steps li:not(#_) { display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--sig-milk); }
html:root body.lp .acct-steps b:not(#_) { width: 26px; height: 26px; display: grid; place-items: center; margin-bottom: 6px; border-radius: 50%; background: var(--sig-espresso); color: var(--sig-honey); font: 500 13px/1 var(--sig-display); }
html:root body.lp .acct-steps strong:not(#_) { font-size: 14.5px; font-weight: 650; }
html:root body.lp .acct-steps span:not(#_) { font-size: 13px; line-height: 1.45; color: var(--sig-ink-2); }
html:root body.lp .acct-subhead:not(#_) { margin: 0 0 8px; font: 650 12px/1 var(--sig-sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--sig-ink-3) !important; }
html:root body.lp .acct-list__row:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--sig-line); }
html:root body.lp .acct-list__row:last-child:not(#_) { border-bottom: 0; }
html:root body.lp .acct-list__row > span:not(#_) { display: grid; gap: 2px; min-width: 0; }
html:root body.lp .acct-list__row strong:not(#_) { font-size: 14px; font-weight: 600; }
html:root body.lp .acct-list__row small:not(#_) { font-size: 12px; color: var(--sig-ink-3); }
html:root body.lp .acct-list__value:not(#_) { justify-items: end; text-align: right; }
html:root body.lp .acct-list__value strong:not(#_) { color: var(--sig-caramel-deep); font-variant-numeric: tabular-nums; }

/* Addresses + settings inside panes: flat rows, not cards in cards */
html:root body.lp .acct-pane .account-address-card:not(#_) { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px !important; margin: 0 0 10px !important; border-radius: 18px !important; border: 1px solid var(--sig-line) !important; background: #fff !important; box-shadow: none !important; }
html:root body.lp .acct-pane .account-address-card p:not(#_) { margin: 4px 0 2px; font-size: 13.5px; color: var(--sig-ink); }
html:root body.lp .acct-pane .account-address-card small:not(#_) { font-size: 12px; color: var(--sig-ink-3); }
html:root body.lp .acct-pane :is(.account-settings, .account-settings__grid):not(#_) { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
html:root body.lp .acct-pane .account-settings__grid:not(#_) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html:root body.lp .acct-pane .account-form:not(#_) { margin: 0 !important; padding: 20px !important; border-radius: 18px !important; border: 1px solid var(--sig-line) !important; background: #fff !important; box-shadow: none !important; }
html:root body.lp .acct-pane .account-form h3:not(#_) { font-size: 16px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; }
html:root body.lp .acct-pane .account-form__intro:not(#_) { font-size: 13px !important; color: var(--sig-ink-2) !important; }
html:root body.lp .acct-pane .account-form__hint:not(#_) { padding: 10px 12px !important; border-radius: 12px !important; background: var(--sig-milk) !important; font-size: 13px; }
html:root body.lp .acct-pane [data-address-form]:not(#_) { margin-top: 12px !important; }

@media (max-width: 1024px) {
  html:root body.lp .acct-tabs:not(#_) { top: 66px; }
}
@media (max-width: 640px) {
  html.has-session body.lp .account-body:not(#_) { padding-top: 20px !important; padding-bottom: 120px !important; }
  html:root body.lp .acct:not(#_) { gap: 14px; }
  html:root body.lp .acct-head:not(#_) { gap: 12px; }
  html:root body.lp .acct-avatar:not(#_) { flex-basis: 48px; width: 48px; height: 48px; font-size: 22px; }
  html:root body.lp .acct-head__copy h1:not(#_) { font-size: 30px !important; }
  html:root body.lp .acct-head__cta:not(#_) { height: 40px; padding: 0 14px; font-size: 13px; }
  html:root body.lp .acct-head__cta span:not(#_) { display: none; }
  html:root body.lp .acct-card:not(#_) { border-radius: 24px; }
  html:root body.lp .acct-card__foot:not(#_) { font-size: 12.5px; }
  html:root body.lp .acct-stats > div:not(#_) { padding: 12px 14px; }
  html:root body.lp .acct-stats strong:not(#_) { font-size: 16px; }
  html:root body.lp .acct-tab:not(#_) { height: 38px; font-size: 13px; }
  html:root body.lp .acct-pane:not(#_) { padding: 18px 16px; border-radius: 22px; }
  html:root body.lp .acct-pane__head:not(#_) { flex-wrap: wrap; }
  html:root body.lp .acct-pane__head h2:not(#_) { font-size: 23px !important; }
  html:root body.lp .acct-orders:not(#_) { margin: 0 -8px; }
  html:root body.lp .acct-order:not(#_) { flex-wrap: wrap; padding: 0 8px 12px; gap: 0; }
  html:root body.lp .acct-order__main:not(#_) { flex-basis: 100%; gap: 12px; padding: 12px 0 8px; }
  html:root body.lp .acct-order__icon:not(#_) { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
  html:root body.lp .acct-order__receipt:not(#_) { margin-left: 52px; height: 32px; }
  html:root body.lp .acct-steps:not(#_) { grid-template-columns: 1fr; }
  html:root body.lp .acct-steps li:not(#_) { grid-template-columns: 26px 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; }
  html:root body.lp .acct-steps b:not(#_) { grid-row: span 2; margin: 0; }
  html:root body.lp .acct-pane .account-settings__grid:not(#_) { grid-template-columns: 1fr; }
  html:root body.lp .acct-pane .account-address-card:not(#_) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body.lp :is(.acct-pane, .acct-tabs__ink, .acct-card__meter i, .is-loading, .acct-skeleton):not(#_) { animation: none !important; transition: none !important; }
}

/* ======================================================= CONSISTENCY SWEEP
   Surfaces rendered outside the roles listed above fell back to Satoshi
   headings, 9px controls and the global disabled fill. Bring them into the
   same serif + pill language as the rest of the storefront. */
html:root body.lp :is(.order-context-modal__head h2, .track-empty h2):not(#_) {
  font-family: var(--sig-display) !important; font-weight: 500 !important;
  letter-spacing: -.025em !important; text-transform: none !important; font-synthesis: none;
}
html:root body.lp .notfound h1:not(#_) {
  font-family: var(--sig-display) !important; font-weight: 400 !important;
  letter-spacing: -.03em !important; font-synthesis: none;
}
html:root body.lp .order-context-modal__foot .btn:not(#_) {
  min-height: 48px; padding-inline: 24px !important; border-radius: 999px !important;
  font-size: 14px !important; font-weight: 600 !important;
}
html:root body.lp .order-context-modal__foot .btn-primary:not(#_) { background: var(--sig-espresso) !important; border-color: var(--sig-espresso) !important; color: var(--sig-foam) !important; }
html:root body.lp .order-context-modal__foot .btn-primary:not(#_):hover { background: var(--sig-caramel-deep) !important; border-color: var(--sig-caramel-deep) !important; }
html:root body.lp .order-context-modal__foot .btn-ghost:not(#_) { background: transparent !important; border: 1px solid var(--sig-line-strong) !important; color: var(--sig-espresso) !important; }
html:root body.lp .order-context-trigger:not(#_) { border-radius: 14px !important; }
html:root body.lp .order-context-choice[aria-pressed="true"]:not(#_):not(:disabled) {
  background: #fff !important; border-color: var(--sig-espresso) !important;
  box-shadow: 0 0 0 3px rgba(43, 26, 19, .08) !important;
}
html:root body.lp .order-context-choice__icon:not(#_) { color: var(--sig-caramel-deep); background: var(--sig-milk); }
/* An unavailable method must read as unavailable, not as a tinted selection. */
html:root body.lp .order-context-choice:disabled:not(#_),
html:root body.lp .order-ribbon__actions a.is-unavailable:not(#_) {
  background: transparent !important; border-style: dashed !important;
  border-color: var(--sig-line-strong) !important; color: inherit !important;
  box-shadow: none !important; opacity: .55 !important; cursor: not-allowed; transform: none !important;
}
html:root body.lp .order-ribbon__actions a.is-unavailable:not(#_) { pointer-events: none; }
html:root body.lp .order-ribbon__actions a.is-unavailable:not(#_) i { visibility: hidden; }

/* ======================================================= CHECKOUT FLOW
   Below the two-column breakpoint checkout behaves like an app's pay screen:
   a floating pay bar (same card language as the tab bar) keeps the total and
   Place order under the thumb, the marketing footer steps aside, and the promo
   field keeps its button inline. */
html:root body.lp .checkout-paybar { display: none; }
@media (max-width: 959px) {
  html:root body.lp .checkout-paybar:not(#_):not([hidden]) {
    position: fixed; z-index: 70;
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    margin-inline: auto; max-width: 560px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 68px; padding: 8px 8px 8px 20px;
    border-radius: 24px;
    background: rgba(255, 252, 247, .86);
    -webkit-backdrop-filter: saturate(1.8) blur(22px); backdrop-filter: saturate(1.8) blur(22px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 1px rgba(43,26,19,.06), 0 18px 40px -14px rgba(31,19,13,.34), inset 0 1px 0 rgba(255,255,255,.8);
    transition: transform .45s var(--sig-ease), opacity .3s var(--sig-ease);
  }
  html:root body.lp .checkout-paybar.is-tucked:not(#_) { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
  html:root body.lp .checkout-paybar__sum { display: grid; gap: 3px; min-width: 0; }
  html:root body.lp .checkout-paybar__label {
    font: 600 10.5px/1.25 var(--sig-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sig-ink-3);
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  html:root body.lp .checkout-paybar.is-blocked .checkout-paybar__label { letter-spacing: 0; text-transform: none; font-size: 12px; font-weight: 500; color: var(--sig-caramel-deep); }
  html:root body.lp .checkout-paybar__total { font: 600 21px/1 var(--sig-sans); letter-spacing: -.02em; color: var(--sig-espresso); font-variant-numeric: tabular-nums; }
  html:root body.lp .checkout-paybar .btn:not(#_) {
    flex: none; min-height: 52px; padding-inline: 26px !important; border-radius: 18px !important;
    background: var(--sig-espresso) !important; border-color: var(--sig-espresso) !important; color: var(--sig-foam) !important;
    font-size: 15px !important; font-weight: 600 !important;
  }
  html:root body.lp .checkout-paybar .btn:not(#_):disabled { background: var(--sig-milk) !important; border-color: transparent !important; color: var(--sig-ink-3) !important; box-shadow: none !important; }
  html:root body.lp .checkout-paybar .btn:not(#_):active:not(:disabled) { transform: scale(.97); }
  html:root body.lp:has(.checkout-paybar):not(#_) { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html:root body.lp:has(.checkout-paybar) .lp-foot:not(#_) { display: none; }
}
@media (max-width: 380px) {
  html:root body.lp .checkout-paybar .btn:not(#_) { padding-inline: 18px !important; }
}
html:root body.lp .promo-row:not(#_) { flex-direction: row; align-items: stretch; }
html:root body.lp .promo-row input:not(#_) { min-width: 0; }
html:root body.lp .promo-row .btn:not(#_) { width: auto; flex: none; }
@media (prefers-reduced-motion: reduce) {
  html:root body.lp .checkout-paybar:not(#_) { transition: none; }
}
html:root body.lp .acct-order__pts:not(#_) { color: var(--sig-espresso, currentColor); font-weight: 650; }

/* ── SOULMATES TIERS (2026-09-28) ─────────────────────────────────────────
   Wallet card takes a colourway per tier; Rewards pane shows the ladder. */
html:root body.lp .acct-card:not(#_) { --tier-accent: var(--sig-honey); --tier-ink: #fff; }
html:root body.lp .acct-card[data-tier="silver"]:not(#_) {
  --tier-accent: #e6e1d9;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(140deg, #3b3632 8%, #6f675f 100%);
}
html:root body.lp .acct-card[data-tier="gold"]:not(#_) {
  --tier-accent: #f1c98f;
  background: radial-gradient(90% 120% at 100% 0%, rgba(241,201,143,.45), transparent 58%), linear-gradient(140deg, #2b1a13 8%, #7a4a22 100%);
}
html:root body.lp .acct-card[data-tier="platinum"]:not(#_) {
  --tier-accent: #dcd8ee;
  background: radial-gradient(70% 90% at 100% 0%, rgba(220,216,238,.26), transparent 60%), radial-gradient(60% 80% at 0% 100%, rgba(231,185,138,.14), transparent 60%), linear-gradient(140deg, #141012 8%, #2f2a2c 100%);
}
html:root body.lp .acct-card__brand:not(#_) { color: var(--tier-accent); }
html:root body.lp .acct-card__tier:not(#_) {
  display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 13px 0 10px; border-radius: 999px;
  background: rgba(255,252,247,.1); border: 1px solid rgba(255,252,247,.16);
  font: 650 11.5px/1 var(--sig-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tier-accent);
}
html:root body.lp .acct-card__tier i:not(#_) { width: 9px; height: 9px; border-radius: 50%; background: var(--tier-accent); box-shadow: 0 0 0 3px rgba(255,252,247,.08), 0 0 12px var(--tier-accent); }
html:root body.lp .acct-card__tier b:not(#_) { font-weight: inherit; min-width: 5ch; }
html:root body.lp .acct-card__balance:not(#_) { flex-wrap: wrap; margin-bottom: 22px; }
html:root body.lp .acct-card__balance small:not(#_) { flex-basis: 100%; margin-top: 8px; font-size: 12.5px; color: rgba(255,252,247,.56); }
html:root body.lp .acct-card__progress:not(#_) { display: grid; gap: 9px; }
html:root body.lp .acct-card__progress-head:not(#_) { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 550; color: rgba(255,252,247,.86); }
html:root body.lp .acct-card__progress-head span:last-child:not(#_) { color: rgba(255,252,247,.56); font-variant-numeric: tabular-nums; white-space: nowrap; }
html:root body.lp .acct-card__meter:not(#_) { height: 8px; }
html:root body.lp .acct-card__meter i:not(#_) { background: linear-gradient(90deg, color-mix(in srgb, var(--tier-accent) 70%, transparent), var(--tier-accent)); box-shadow: 0 0 14px color-mix(in srgb, var(--tier-accent) 60%, transparent); }
html:root body.lp .acct-card__foot:not(#_) { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,252,247,.1); }
html:root body.lp .acct-card__foot a:not(#_):hover { border-color: var(--tier-accent); }

html:root body.lp .acct-tiers:not(#_) { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
html:root body.lp .acct-tier:not(#_) {
  --tier-accent: #8b847b;
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 18px; background: var(--sig-milk); border: 1px solid transparent;
}
html:root body.lp .acct-tier--gold:not(#_) { --tier-accent: #c08a3e; }
html:root body.lp .acct-tier--platinum:not(#_) { --tier-accent: #6d6784; }
html:root body.lp .acct-tier.is-current:not(#_) { background: var(--sig-foam); border-color: color-mix(in srgb, var(--tier-accent) 45%, transparent); box-shadow: var(--sig-shadow); }
html:root body.lp .acct-tier:not(.is-reached):not(#_) { opacity: .72; }
html:root body.lp .acct-tier__badge:not(#_) {
  width: 40px; height: 40px; border-radius: 999px 999px 12px 12px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tier-accent) 35%, #fff), var(--tier-accent));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
html:root body.lp .acct-tier__copy:not(#_) { display: grid; gap: 3px; min-width: 0; }
html:root body.lp .acct-tier__copy strong:not(#_) { font: 500 19px/1.1 var(--sig-display); letter-spacing: -.01em; color: var(--sig-espresso); }
html:root body.lp .acct-tier__copy em:not(#_) {
  margin-left: 6px; padding: 3px 8px; border-radius: 999px; vertical-align: 3px;
  font: 650 10px/1 var(--sig-sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sig-espresso); color: var(--sig-foam);
}
html:root body.lp .acct-tier__copy small:not(#_) { font-size: 12.5px; color: var(--sig-ink-2); }
html:root body.lp .acct-tier__rate:not(#_) { display: grid; justify-items: end; gap: 2px; }
html:root body.lp .acct-tier__rate b:not(#_) { font: 500 24px/1 var(--sig-display); color: var(--sig-espresso); font-variant-numeric: tabular-nums; }
html:root body.lp .acct-tier__rate small:not(#_) { font-size: 11px; color: var(--sig-ink-3); white-space: nowrap; }

html:root body.lp .cart-summary-row--earn:not(#_) { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--sig-line-strong); font-size: 13px; color: var(--sig-ink-2); }
html:root body.lp .cart-summary-row--earn span:first-child:not(#_) { display: inline-flex; align-items: center; gap: 8px; }
html:root body.lp .cart-summary-row--earn span:last-child:not(#_) { font-weight: 650; color: var(--sig-caramel-deep); }
html:root body.lp .tier-dot:not(#_) { width: 9px; height: 9px; border-radius: 50%; background: #9d968c; flex: none; }
html:root body.lp .tier-dot--gold:not(#_) { background: #c99a52; }
html:root body.lp .tier-dot--platinum:not(#_) { background: #7d7797; }
@media (max-width: 640px) {
  html:root body.lp .acct-tier:not(#_) { grid-template-columns: 34px 1fr auto; gap: 12px; padding: 12px 14px; }
  html:root body.lp .acct-tier__badge:not(#_) { width: 34px; height: 34px; }
  html:root body.lp .acct-card__progress-head:not(#_) { font-size: 12.5px; }
}
html:root body.lp .loyalty__copy li > .loyalty__step-number:not(#_) { flex: none; min-width: 5.6em; font-size: 17px !important; }
html:root body.lp .loyalty__copy li b:not(#_) { font-weight: 650; color: var(--sig-espresso); }

/* ── SIGN IN / JOIN (2026-09-28) ───────────────────────────────────────────
   Signed-out account = one composed screen: the form beside a Soulmates tier
   pitch. `html.is-auth` is set pre-paint so the marketing hero never flashes. */
html.is-auth body.lp .account-hero:not(#_) { display: none !important; }
html.is-auth body.lp .account-body:not(#_) { padding: clamp(28px, 6vw, 88px) 0 clamp(96px, 10vw, 140px) !important; background: radial-gradient(90% 60% at 100% 0%, rgba(231,185,138,.18), transparent 60%), var(--sig-milk) !important; min-height: calc(100svh - 80px); }
html:root body.lp .auth-shell:not(#_) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center;
  gap: clamp(32px, 6vw, 96px); max-width: 1080px; margin: 0 auto;
}
html:root body.lp .auth-shell--solo:not(#_) { grid-template-columns: minmax(0, 460px); justify-content: center; }
html:root body.lp .auth-shell .auth-card:not(#_) { grid-column: 2; grid-row: 1; width: 100%; max-width: none !important; margin: 0 !important; padding: clamp(24px, 3vw, 36px) !important; border-radius: 28px !important; }
html:root body.lp .auth-shell--solo .auth-card:not(#_) { grid-column: 1; }
html:root body.lp .auth-pitch:not(#_) { grid-column: 1; grid-row: 1; min-width: 0; }
html:root body.lp .auth-pitch__eyebrow:not(#_) { margin: 0 0 14px; font: 650 12px/1 var(--sig-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--sig-caramel); }
html:root body.lp .auth-pitch__title:not(#_) { margin: 0; font: 400 clamp(44px, 5.4vw, 76px)/.98 var(--sig-display) !important; letter-spacing: -.035em !important; color: var(--sig-espresso) !important; }
html:root body.lp .auth-pitch__title em:not(#_) { font-style: italic; color: var(--sig-caramel-deep); }
html:root body.lp .auth-pitch__lede:not(#_) { max-width: 40ch; margin: 18px 0 0; font-size: 16px; line-height: 1.6; color: var(--sig-ink-2); }
html:root body.lp .auth-pitch__cards:not(#_) { position: relative; height: 236px; margin: clamp(28px, 4vw, 44px) 0 8px; }
html:root body.lp .auth-tiercard:not(#_) {
  --tier-accent: #e6e1d9;
  position: absolute; left: calc(var(--i) * 76px); top: calc(var(--i) * 22px); width: 272px; aspect-ratio: 1.586;
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 18px 20px; border-radius: 18px; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255,255,255,.22), transparent 55%), linear-gradient(140deg, #3b3632 8%, #6f675f 100%);
  box-shadow: 0 24px 40px -22px rgba(43,26,19,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  transform: rotate(calc(-7deg + var(--i) * 5deg)); transform-origin: 30% 100%;
  transition: transform .5s var(--sig-ease);
}
html:root body.lp .auth-tiercard--gold:not(#_) { --tier-accent: #f1c98f; background: radial-gradient(90% 120% at 100% 0%, rgba(241,201,143,.45), transparent 58%), linear-gradient(140deg, #2b1a13 8%, #7a4a22 100%); }
html:root body.lp .auth-tiercard--platinum:not(#_) { --tier-accent: #dcd8ee; background: radial-gradient(70% 90% at 100% 0%, rgba(220,216,238,.26), transparent 60%), linear-gradient(140deg, #141012 8%, #2f2a2c 100%); }
html:root body.lp .auth-tiercard__brand:not(#_) { font: italic 400 15px/1 var(--sig-display); color: var(--tier-accent); }
html:root body.lp .auth-tiercard strong:not(#_) { align-self: end; font: 500 26px/1 var(--sig-display); letter-spacing: -.02em; color: #fff; }
html:root body.lp .auth-tiercard__rate:not(#_) { margin-top: 6px; font-size: 13px; color: rgba(255,252,247,.78); }
html:root body.lp .auth-tiercard__rate b:not(#_) { color: var(--tier-accent); font-weight: 700; }
html:root body.lp .auth-tiercard small:not(#_) { margin-top: 3px; font-size: 11.5px; color: rgba(255,252,247,.56); }
@media (hover: hover) {
  html:root body.lp .auth-pitch__cards:hover .auth-tiercard:not(#_) { transform: rotate(calc(-4deg + var(--i) * 4deg)) translateX(calc(var(--i) * 18px)); }
}
html:root body.lp .auth-pitch__perks:not(#_) { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; }
html:root body.lp .auth-pitch__perks li:not(#_) { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--sig-line); font-size: 13px; font-weight: 550; color: var(--sig-ink-2); }
html:root body.lp .auth-pitch__perks li:not(#_)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sig-caramel); }

/* Card internals */
html:root body.lp .auth-shell .auth-card h1:not(#_) { margin-top: 22px !important; font-size: clamp(30px, 2.6vw, 36px) !important; }
html:root body.lp .auth-shell .auth-card__intro:not(#_) { margin-top: 8px !important; }
html:root body.lp .field__labelrow:not(#_) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
html:root body.lp .field__aside:not(#_) { font-size: 13px; font-weight: 600; color: var(--sig-caramel-deep) !important; text-decoration: none; }
html:root body.lp .field__aside:not(#_):hover { text-decoration: underline; }
html:root body.lp .field__reveal:not(#_) { position: relative; }
html:root body.lp .field__reveal input:not(#_) { width: 100%; padding-right: 54px !important; }
html:root body.lp .field__reveal-btn:not(#_) {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center;
  border: 0; border-radius: 12px; background: transparent; color: var(--sig-ink-3); cursor: pointer;
}
html:root body.lp .field__reveal-btn:not(#_):hover { background: var(--sig-milk); color: var(--sig-espresso); }
html:root body.lp .field__reveal-btn[aria-pressed="true"]:not(#_) { color: var(--sig-caramel-deep); }
html:root body.lp .field__reveal-btn svg:not(#_) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 900px) {
  html:root body.lp .auth-shell:not(#_) { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 520px; }
  html:root body.lp .auth-shell .auth-card:not(#_) { grid-column: 1; grid-row: 1; }
  html:root body.lp .auth-pitch:not(#_) { grid-row: 2; padding: 0 4px; }
  html:root body.lp .auth-pitch__title:not(#_) { font-size: 40px !important; }
  html:root body.lp .auth-pitch__cards:not(#_) { height: 196px; }
  html:root body.lp .auth-tiercard:not(#_) { width: 224px; left: calc(var(--i) * 56px); top: calc(var(--i) * 18px); padding: 15px 16px; }
  html:root body.lp .auth-tiercard strong:not(#_) { font-size: 22px; }
}
@media (max-width: 640px) {
  html.is-auth body.lp .account-body:not(#_) { padding-top: 16px !important; min-height: 0; }
  html:root body.lp .auth-shell .auth-card:not(#_) { padding: 22px 20px 24px !important; border-radius: 24px !important; }
  html:root body.lp .auth-tiercard:not(#_) { width: 196px; left: calc(var(--i) * 46px); }
}
@media (prefers-reduced-motion: reduce) { html:root body.lp .auth-tiercard:not(#_) { transition: none; } }
html:root body.lp .auth-tiercard:not(#_) { left: calc(var(--i) * 128px); top: calc(var(--i) * 18px); }
html:root body.lp .auth-pitch__cards:not(#_) { height: 226px; }
html:root body.lp .auth-shell .auth-status:empty:not(#_) { display: none; }
@media (max-width: 900px) {
  html:root body.lp .auth-pitch__cards:not(#_) { height: auto; display: grid; gap: 8px; margin-top: 24px; }
  html:root body.lp .auth-tiercard:not(#_) {
    position: relative; left: auto; top: auto; width: auto; aspect-ratio: auto; transform: none;
    grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; padding: 14px 16px; border-radius: 16px;
  }
  html:root body.lp .auth-tiercard__brand:not(#_) { display: none; }
  html:root body.lp .auth-tiercard strong:not(#_) { grid-column: 1; grid-row: 1; font-size: 20px; }
  html:root body.lp .auth-tiercard small:not(#_) { grid-column: 1; grid-row: 2; }
  html:root body.lp .auth-tiercard__rate:not(#_) { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; text-align: right; }
  html:root body.lp .auth-tiercard__rate b:not(#_) { display: block; font: 500 22px/1 var(--sig-display); }
}

/* ── SOULMATES LADDER (2026-09-28) ─────────────────────────────────────────
   Home loyalty section: fixed three-tier ladder with reach + keep targets. */
html:root body.lp .tier-ladder:not(#_) { list-style: none; width: 100%; margin: 30px 0 18px !important; padding: 0; border-top: 1px solid var(--sig-line) !important; counter-reset: none; }
html:root body.lp .tier-ladder__row:not(#_) {
  display: grid !important; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: baseline;
  padding: 16px 0 !important; border-bottom: 1px solid var(--sig-line) !important; font-size: 15px !important; line-height: 1.5 !important;
}
html:root body.lp .tier-ladder__row span:not(#_) { font: inherit; letter-spacing: normal !important; color: var(--sig-ink-2) !important; }
html:root body.lp .tier-ladder__name:not(#_) { grid-row: span 2; display: inline-flex !important; align-items: center; gap: 9px; font-family: var(--sig-display) !important; font-style: italic; font-size: 19px !important; color: var(--sig-espresso) !important; }
html:root body.lp .tier-ladder__rate:not(#_) { color: var(--sig-espresso) !important; font-weight: 500 !important; }
html:root body.lp .tier-ladder__rate b:not(#_) { font-family: var(--sig-display); font-size: 21px; font-weight: 500; letter-spacing: -.02em; margin-right: 4px; color: var(--sig-caramel-deep) !important; }
html:root body.lp .tier-ladder__rule:not(#_) { font-size: 13.5px !important; color: var(--sig-ink-2) !important; }
html:root body.lp .tier-ladder__rule b:not(#_) { font-weight: 650; color: var(--sig-espresso) !important; }
html:root body.lp .loyalty__fine:not(#_) { max-width: 52ch; margin: 0 0 30px !important; font-size: 12.5px !important; line-height: 1.6 !important; color: var(--sig-ink-2) !important; opacity: .85; }
@media (max-width: 640px) {
  html:root body.lp .tier-ladder__row:not(#_) { grid-template-columns: 1fr auto; padding: 14px 0 !important; }
  html:root body.lp .tier-ladder__name:not(#_) { grid-row: auto; font-size: 18px !important; }
  html:root body.lp .tier-ladder__rate:not(#_) { text-align: right; font-size: 13px !important; }
  html:root body.lp .tier-ladder__rule:not(#_) { grid-column: 1 / -1; }
}

/* ── ONE EDGE (2026-09-28, refinement round) ───────────────────────────────
   Header, hero, order ribbon and every section wrap now share one gutter and
   one content measure, so text starts on the same vertical line down the
   whole page (it used to jump between 63 / 101 / 163px on desktop and
   18 / 22 / 40px on phones). */
html:root body.lp {
  --sig-gutter: clamp(20px, 4.4vw, 64px);
  --sig-measure: 1312px;
  --sig-edge: max(var(--sig-gutter), (100% - var(--sig-measure)) / 2);
}
@media (min-width: 1680px) { html:root body.lp { --sig-measure: 1440px; } }
@media (min-width: 2200px) { html:root body.lp { --sig-measure: 1600px; } }
@media (max-width: 640px) { html:root body.lp { --sig-gutter: 20px; } }

html:root body.lp .wrap:not(#_):not(#_) { max-width: calc(var(--sig-measure) + 2 * var(--sig-gutter)); padding-inline: var(--sig-gutter) !important; }
html:root body.lp .lp-nav__row:not(#_):not(#_) { max-width: none; padding-inline: var(--sig-edge) !important; }
html:root body.lp.lp-home .hero:not(#_):not(#_) { max-width: none; padding-inline: var(--sig-edge) !important; }
html:root body.lp .order-ribbon:not(#_):not(#_) { padding-inline: var(--sig-edge) !important; }
/* Inner-page heroes pad through their .wrap only (they doubled up to 38px). */
html:root body.lp :is(.outlets-hero, .checkout-hero, .account-hero):not(#_):not(#_) { padding-inline: 0 !important; }
@media (max-width: 640px) { html:root body.lp .home-story__copy:not(#_):not(#_) { padding-inline: 0 !important; } }
@media (max-width: 1050px) { html:root body.lp .loyalty__copy:not(#_):not(#_) { padding-inline: var(--sig-gutter) !important; } }
/* The docked phone menu keeps its own edge-to-edge rail. */
@media (max-width: 640px) {
  html:root body.lp .menu-rail > .wrap:not(#_):not(#_) { padding-inline: 0 !important; }
}

/* Scrolled header: a deeper espresso so it never reads grey over cream. */
html:root body.lp .lp-nav.is-scrolled:not(#_):not(#_) { background: rgba(31, 19, 13, .93) !important; -webkit-backdrop-filter: saturate(1.1) blur(18px); backdrop-filter: saturate(1.1) blur(18px); }

/* Hero scroll cue only where it has room beside the arch. */
@media (max-width: 1279px) { html:root body.lp .hero__scrolllink:not(#_) { display: none !important; } }
html:root body.lp .hero__scrolllink:not(#_):not(#_) { right: calc(var(--sig-edge) / 2 - 8px) !important; }

/* Best sellers: four across on desktop — eight drinks make two full rows. */
@media (min-width: 1025px) {
  html:root body.lp .sel-grid:not(#_):not(#_) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* Visit card: the arrow sat on the photo's own signage; it now follows the
   hours line and nudges forward on hover. */
html:root body.lp .place > i:not(#_):not(#_) {
  position: relative !important; inset: auto !important; z-index: 2; align-self: flex-start;
  display: inline-grid !important; place-items: center; width: 44px; height: 44px; margin-top: 22px;
  font-style: normal; transition: transform .45s var(--sig-ease), background-color .3s var(--sig-ease);
}
@media (hover: hover) {
  html:root body.lp .place:hover > i:not(#_):not(#_) { transform: translateX(4px); background: var(--sig-caramel-deep) !important; border-color: var(--sig-caramel-deep) !important; }
}

/* Account stats: long totals shrink instead of truncating ("RM 1956…"). */
html:root body.lp .acct-stats strong:not(#_):not(#_) { font-size: clamp(15px, 4.2vw, 21px); text-overflow: clip; }
@media (max-width: 400px) { html:root body.lp .acct-stats > div:not(#_):not(#_) { padding: 14px 14px; } }

/* Display headlines break into even lines ("Every cup / tells a / feeling",
   not "Every / cup tells a"); body copy avoids single-word last lines. */
html:root body.lp :is(h1, h2, h3, .hero__big, .section-title):not(#_) { text-wrap: balance; }
html:root body.lp :is(p, li, small):not(#_) { text-wrap: pretty; }
@media (max-width: 640px) { html:root body.lp.lp-home .hero__big:not(#_):not(#_) { max-width: none !important; } }

/* Header links read the same on every page (checkout kept an uppercase
   legacy style); below desktop the burger carries them, as on the rest. */
html:root body.lp .lp-nav__left a:not(#_):not(#_) { text-transform: none !important; letter-spacing: .01em !important; }
@media (max-width: 1024px) { html:root body.lp .lp-nav__left:not(#_):not(#_) { display: none !important; } }

/* Small phones: segmented options stay on one line. */
@media (max-width: 400px) {
  html:root body.lp .segmented button:not(#_):not(#_) { white-space: nowrap; font-size: 13px; padding-inline: 8px; }
}

/* Account header: Sign out lives beside "Order again" at every size (it was
   buried at the bottom of the Settings tab). Phones keep the icon + label. */
html:root body.lp .acct-head__actions:not(#_) { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
html:root body.lp .acct-head__signout:not(#_) {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px 0 16px; border-radius: 999px;
  border: 1px solid var(--sig-line-strong); background: rgba(255,255,255,.6); color: var(--sig-espresso);
  font: 600 14px/1 var(--sig-sans); cursor: pointer;
  transition: border-color .25s var(--sig-ease), background-color .25s var(--sig-ease), color .25s var(--sig-ease), transform .2s var(--sig-ease);
}
html:root body.lp .acct-head__signout svg:not(#_) { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
html:root body.lp .acct-head__signout:not(#_):active { transform: scale(.96); }
@media (hover: hover) { html:root body.lp .acct-head__signout:not(#_):hover { border-color: rgba(163,63,56,.45); color: #a33f38; background: #fff; } }
@media (max-width: 640px) {
  html:root body.lp .acct-head:not(#_) { flex-wrap: wrap; row-gap: 14px; }
  html:root body.lp .acct-head__actions:not(#_) { flex: 1 0 100%; }
  html:root body.lp .acct-head__actions > *:not(#_) { flex: 1; justify-content: center; height: 44px; }
  html:root body.lp .acct-head__actions .acct-head__cta span:not(#_) { display: inline; }
}

/* Item sheet: option groups had no space between them on phones (the grid
   gap only exists ≥720), so each chip row ran into the next group's label. */
@media (max-width: 719px) {
  html:root body.lp .item-modal__body [data-groups]:not(#_) { display: flex; flex-direction: column; gap: 22px; }
}
/* Checkout payment note sat flush against the segmented control. */
html:root body.lp .checkout-payment-card [data-payment-note]:not(#_) { margin-top: 12px; }

/* ===================================================== INSTALLABLE APP (PWA)
   Install card above the tab bar, the iOS "Add to Home Screen" sheet, and
   standalone tweaks. pwa.js mounts the markup; html.is-app = running installed. */
html:root body.lp .app-install-hint:not(#_) {
  position: fixed; z-index: 80;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 86px);
  max-width: 520px; margin-inline: auto;
  display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 8px 10px 10px; border-radius: 22px;
  background: rgba(255, 252, 247, .92); border: 1px solid var(--sig-line);
  -webkit-backdrop-filter: saturate(1.5) blur(20px); backdrop-filter: saturate(1.5) blur(20px);
  box-shadow: var(--sig-shadow-lift); color: var(--sig-ink); font-family: var(--sig-sans);
  opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none;
  transition: opacity .32s var(--sig-ease), transform .42s var(--sig-spring);
}
html:root body.lp .app-install-hint.is-shown:not(#_) { opacity: 1; transform: none; pointer-events: auto; }
html:root body.lp .app-install-hint img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 1px var(--sig-line); }
html:root body.lp .app-install-hint div { display: grid; min-width: 0; line-height: 1.3; }
html:root body.lp .app-install-hint strong { white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: -.005em; }
html:root body.lp .app-install-hint span { font-size: 12.5px; color: var(--sig-mocha); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body.lp .app-install-hint__go:not(#_) {
  min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sig-espresso); color: var(--sig-foam); font: 700 13px/1 var(--sig-sans);
}
html:root body.lp .app-install-hint__x:not(#_) {
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sig-mocha); cursor: pointer;
}
html:root body.lp .app-install-hint__x svg { width: 16px; height: 16px; }
html:root body.lp .app-install-hint :is(button):active { transform: scale(.94); }
/* Desktop: a quiet card in the bottom-right corner instead of above a tab bar. */
@media (min-width: 1025px) {
  html:root body.lp .app-install-hint:not(#_) { left: auto; right: 24px; bottom: 24px; width: 380px; max-width: none; margin: 0; }
}

html:root body.lp .app-install-sheet:not(#_) { position: fixed; inset: 0; z-index: 120; display: grid; align-items: end; justify-items: center; }
html:root body.lp .app-install-sheet__scrim { position: absolute; inset: 0; background: rgba(31, 19, 13, .42); opacity: 0; transition: opacity .25s var(--sig-ease); }
html:root body.lp .app-install-sheet__panel:not(#_) {
  position: relative; width: min(100%, 460px); margin: 0 auto;
  padding: 10px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0;
  background: var(--sig-foam); color: var(--sig-ink); font-family: var(--sig-sans); outline: none;
  transform: translateY(100%); transition: transform .38s var(--sig-ease);
  box-shadow: 0 -20px 50px -20px rgba(31, 19, 13, .35);
}
html:root body.lp .app-install-sheet.is-open .app-install-sheet__scrim { opacity: 1; }
html:root body.lp .app-install-sheet.is-open .app-install-sheet__panel:not(#_) { transform: none; }
@media (min-width: 641px) {
  html:root body.lp .app-install-sheet:not(#_) { align-items: center; }
  html:root body.lp .app-install-sheet__panel:not(#_) { border-radius: 28px; padding-bottom: 22px; transform: translateY(24px); opacity: 0; transition: transform .38s var(--sig-ease), opacity .25s; }
  html:root body.lp .app-install-sheet.is-open .app-install-sheet__panel:not(#_) { opacity: 1; }
}
html:root body.lp .app-install-sheet__grab { display: block; width: 38px; height: 5px; margin: 0 auto 14px; border-radius: 99px; background: var(--sig-line-strong); }
html:root body.lp .app-install-sheet__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
html:root body.lp .app-install-sheet__head img { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 1px var(--sig-line); }
html:root body.lp .app-install-sheet__head div { display: grid; gap: 2px; }
html:root body.lp .app-install-sheet__head strong { font: 500 22px/1.15 var(--sig-display); letter-spacing: -.01em; }
html:root body.lp .app-install-sheet__head span { font-size: 13px; color: var(--sig-mocha); }
html:root body.lp .app-install-sheet__steps:not(#_) { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--sig-line); }
html:root body.lp .app-install-sheet__steps li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--sig-line); }
html:root body.lp .app-install-sheet__steps li > span { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--sig-milk); font: 700 12px/1 var(--sig-sans); }
html:root body.lp .app-install-sheet__steps p { margin: 0; font-size: 14.5px; line-height: 1.45; }
html:root body.lp .app-install-sheet__steps svg:not(#_) { display: inline-block; width: 19px; height: 19px; vertical-align: -4px; margin: 0 2px; color: #0a84ff; }
html:root body.lp .app-install-sheet__done:not(#_) {
  width: 100%; min-height: 52px; margin-top: 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--sig-espresso); color: var(--sig-foam); font: 700 15px/1 var(--sig-sans);
}

/* Installed: no browser chrome, so the app owns the status bar area (iOS
   black-translucent) and feels native under the finger. */
html.is-app body.lp .lp-nav:not(#_) { padding-top: env(safe-area-inset-top); }
html.is-app body.lp { -webkit-tap-highlight-color: transparent; }
html.is-app body.lp :is(.lp-nav, .app-tabbar) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html:root body.lp .acct-pane .account-app-card[hidden]:not(#_) { display: none !important; }
html:root body.lp .acct-pane .account-app-card .account-form__head:not(#_) { display: flex; align-items: center; gap: 14px; }
html:root body.lp .acct-pane .account-app-card img { flex: none; width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px var(--sig-line); }