/* Shared storefront layer. Loaded last so page-specific legacy rules
   inherit the same readable surfaces and typography. */
:root {
  --theme-nav-bg: rgba(250, 248, 244, .92);
  --brew-gradient: linear-gradient(135deg, #2B1B12 0%, #5D3D2A 57%, #9B6C43 100%);
}

body.lp {
  --green: #2B211A;
  --green-deep: #211813;
  --green-dark: #18110D;
  --moss: #9B6C43;
  --cream: #FAF8F4;
  --cream-dim: #D5C7B8;
  --paper-2: var(--paper-sunken);
  --clay: #A85F3E;
}
html, body, button, input, select, textarea,
body.lp, body.lp *, .admin-body, .admin-body * { font-family: var(--font-body) !important; }
body { background: var(--paper); color: var(--ink); }
h1, h2, h3, h4, h5, h6, .mobile-menu a, .drink-card__tagline { font-family: var(--font-body) !important; }
button, input, select, textarea { color: var(--ink); }
input, select, textarea { background: var(--paper-raised); border-color: var(--hairline-strong); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); opacity: 1; }
:focus-visible { outline-color: var(--focus); }

.lp-nav.is-scrolled, .lp-nav--solid { background: var(--theme-nav-bg) !important; }
.lp-nav__left a, .lp-nav__right, .lp-ico { color: var(--ink) !important; }
.notfound { position: relative; }
body.lp .lp-home-nav:not(.is-scrolled) .lp-nav__left a,
body.lp .lp-home-nav:not(.is-scrolled) .lp-ico { color: var(--cream) !important; }
.lp-menu { background: var(--paper-raised) !important; }
.lp-menu a { color: var(--ink) !important; border-color: var(--hairline) !important; }
body.lp .hero { background: var(--brew-gradient) !important; }
body.lp .delivery__visual,
body.lp .lp-foot,
body.lp .announce,
body.lp .lp-nav--solid { background-color: #2B211A; }
body.lp .pill--dark,
body.lp .account-body .btn-primary,
body.lp .checkout-body .btn-primary { background: #2B211A; border-color: #2B211A; }
body.lp .pill--dark:hover,
body.lp .account-body .btn-primary:hover,
body.lp .checkout-body .btn-primary:hover { background: #18110D; }
body.lp .dcard__add, body.lp .order-ribbon__icon { background: #2B211A; }
body.lp .delivery__status, body.lp .delivery__line i { background: #A85F3E; }
body.lp .hero__note { background: rgba(43, 33, 26, .86); }
body.lp .hero__big em, body.lp .hero__eyebrow span { color: #D79870; }
body.lp .hero__eyebrow span { background: #D79870; }
body.lp .hero__mascot { position: absolute; left: 1%; bottom: 27%; z-index: 6; display: flex; align-items: center; gap: 10px; pointer-events: none; animation: quokka-float 5.5s ease-in-out infinite; }
body.lp .hero__mascot-art { width: 104px; height: 124px; overflow: hidden; border: 1px solid rgba(255, 248, 234, .3); border-radius: 52% 52% 44% 44%; background: linear-gradient(145deg, #B27A51, #5D3D2A); box-shadow: 0 18px 35px rgba(16, 8, 4, .28); }
body.lp .hero__mascot-art img { width: 164px; max-width: none; height: 164px; object-fit: cover; object-position: center top; transform: translate(-30px, -2px); filter: drop-shadow(0 10px 8px rgba(16, 8, 4, .2)); }
body.lp .hero__mascot-label { align-self: flex-end; margin-bottom: 6px; padding: 8px 10px; border: 1px solid rgba(255, 248, 234, .28); border-radius: 999px; background: rgba(43, 33, 26, .8); color: #F7EFE3; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
body.lp .hero__mascot-steam { position: absolute; top: -16px; left: 43px; color: #E0B687; font-size: 22px; opacity: .8; animation: quokka-steam 2.8s ease-in-out infinite; }
@keyframes quokka-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes quokka-steam { 0%, 100% { opacity: 0; transform: translateY(5px) scale(.8); } 35%, 70% { opacity: .8; } 80% { opacity: 0; transform: translateY(-16px) scale(1.15); } }
body.lp .loyalty__points,
body.lp .lp-foot,
body.lp .finale,
body.lp .places { background: var(--brew-gradient) !important; }
body.lp .order-ribbon { background: linear-gradient(110deg, #B27A51, #E0B687); }
body.lp .lp-nav__brand img { background: transparent; }
@media (max-width: 640px) { body.lp .hero__mascot { left: -6px; bottom: 24%; transform: scale(.78); transform-origin: left bottom; } body.lp .hero__mascot-label { display: none; } }
@media (prefers-reduced-motion: reduce) { body.lp .hero__mascot, body.lp .hero__mascot-steam { animation: none; } }