/*
 * STRONG SPOON — APPLE LAYOUT SYSTEM
 * Applied to: all customer-facing pages
 * Structure inspired by: apple.com tile grid, section stacking, centered editorial type
 * Colors: Strong Spoon dark theme preserved (#000 · #015A64 · #EFE8D8)
 */

/* ═══════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════ */
:root {
  --bg:    #000000;
  --bg1:   #080808;
  --bg2:   #111111;
  --bg3:   #1a1a1a;
  --cream: #EFE8D8;
  --teal:  #015A64;
  --teal2: #017080;
  --c55:   rgba(239,232,216,.55);
  --c38:   rgba(239,232,216,.38);
  --c15:   rgba(239,232,216,.08);
  --pill:  980px;
  --r:     14px;
  --max:   1120px;
}

/* ═══════════════════════════════════════════════════════
   GLOBAL
═══════════════════════════════════════════════════════ */
html { background: #040607 !important; }
body { background: transparent !important; color: var(--cream) !important; }

/* ── Homepage: lifestyle photo pinned behind ALL sections ── */
body.home-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('attached_assets/hero_lifestyle_c.jpg') 50% 40% / cover no-repeat;
  filter: brightness(0.45) saturate(0.85);
}

/* frosted grain texture — subtle tactile quality on the glass */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
}

/* ── Homepage sections: NO backdrop-filter on parents — tiles need direct sight-line to fixed photo ── */
body.home-page .hn-hero { background: transparent !important; }

body.home-page .ap-product-section {
  background: rgba(4, 7, 9, 0.55) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home-page .hn-cup-section {
  background: rgba(4, 7, 9, 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home-page .founder-section {
  background: rgba(4, 7, 9, 0.52) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ─────────────────────────────────────────────────────
   ① FLAVOURS PAGE  (.flavours-page)
───────────────────────────────────────────────────── */
.flavours-page {
  background: transparent !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Video background for flavours hero — content tight to nav, no empty void */
.flav-video-header {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 110px 24px 72px !important;
}
.flav-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 55%;
  z-index: 0;
  filter: brightness(0.85) saturate(0.9);
  opacity: 1;
}
.flav-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.50) 0%,
      rgba(0,0,0,0.25) 40%,
      rgba(0,0,0,0.75) 100%);
}
.flav-video-header > *:not(.flav-hero-video):not(.flav-hero-overlay) {
  position: relative;
  z-index: 2;
}
/* Watermark must stay absolute — if it enters the flex flow its 320px font pushes everything down */
.flav-video-header .flav-wm {
  position: absolute !important;
  z-index: 0 !important;
}

/* Header block: centered Apple-style */
.flavours-page > .flav-connect-zone,
.flavours-page > div:first-child {
  text-align: center;
  padding: 80px 24px 56px;
}
.premium-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(3rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  line-height: 1 !important;
  text-align: center !important;
}
.premium-subtitle {
  font-size: 1.05rem !important;
  color: var(--c55) !important;
  font-weight: 300 !important;
  letter-spacing: 0.02em !important;
  text-align: center !important;
  margin: 12px 0 0 !important;
}
.flav-tagline {
  font-size: clamp(1.2rem, 2.5vw, 1.8rem) !important;
  color: var(--c55) !important;
  font-weight: 400 !important;
  text-align: center !important;
}
#flavCycle, .flav-cycle { color: var(--teal) !important; font-weight: 700 !important; }
.flav-wm { color: rgba(1,90,100,.06) !important; font-weight: 900 !important; }
.header-decoration {
  background: var(--teal) !important; opacity: .4 !important;
  margin: 0 auto !important;
}
.drop-status-banner, .flav-connect-zone .drop-status-banner {
  text-align: center;
}

/* Connecting SVG */
.fcs-line { stroke: rgba(1,90,100,.15) !important; }
.fcs-node { fill: var(--teal) !important; }

/* ── Frosted glass: connect zone ─────────────────── */
.flav-connect-zone {
  background: rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-top: 1px solid rgba(239,232,216,.06) !important;
}

/* Flavour grid — Apple 2-col full-bleed */
.flavour-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  background: rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
}
.pcard {
  border-radius: 0 !important;
  border: none !important;
  height: 52vw !important;
  max-height: 600px !important;
  min-height: 320px !important;
  box-shadow: none !important;
  transition: none !important;
}
.pcard-overlay {
  background: linear-gradient(
    180deg,
    transparent 30%,
    rgba(0,0,0,.55) 65%,
    rgba(0,0,0,.92) 100%
  ) !important;
}
.pcard-body {
  height: 100% !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  position: static !important;
}
.pcard-top {
  padding: 0 32px 8px !important;
  align-items: flex-start !important;
}
.pcard-bottom {
  position: absolute !important;
  bottom: 10px !important;
  left: 10px !important;
  right: 10px !important;
  top: auto !important;
  padding: 10px 18px 12px !important;
  border-top: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  z-index: 5 !important;
}
.pcard-bottom .pcard-macros {
  display: flex !important;
  gap: 20px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
.pcard-name {
  font-size: clamp(1.2rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--cream) !important;
}
.pcard-desc { color: var(--c55) !important; font-size: 0.78rem !important; font-weight: 300 !important; }
.pcard-tag {
  background: rgba(1,90,100,.55) !important;
  backdrop-filter: blur(4px) !important;
  border-radius: 20px !important;
  font-size: 0.58rem !important; font-weight: 700 !important;
  color: var(--cream) !important;
}
.pm-val { color: var(--cream) !important; font-weight: 700 !important; }
.pm-lbl { color: var(--c38) !important; font-size: 0.52rem !important; }

/* UGC / lifestyle grid */
.ls-card { border-radius: 10px !important; overflow: hidden !important; }
.ugc-section { background: var(--bg) !important; border-top: 1px solid var(--c15) !important; }
.ugc-heading {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 800 !important; color: var(--cream) !important;
  letter-spacing: -0.03em !important;
  text-align: center !important;
}
.ugc-sub { color: var(--c55) !important; text-align: center !important; font-weight: 300 !important; }
.ugc-drop-title { color: var(--cream) !important; }
.ugc-drop-hint { color: var(--c38) !important; }
.ugc-upload-box { background: var(--bg2) !important; border: 2px dashed rgba(239,232,216,.15) !important; border-radius: var(--r) !important; }
.ugc-input { background: var(--bg2) !important; border: 1.5px solid rgba(239,232,216,.12) !important; color: var(--cream) !important; border-radius: 8px !important; }
.ugc-submit-btn { background: var(--teal) !important; color: var(--cream) !important; border: none !important; border-radius: var(--pill) !important; padding: 13px 32px !important; }
.ugc-submit-btn:hover { background: var(--teal2) !important; }

/* ─────────────────────────────────────────────────────
   ② PRODUCT DETAIL PAGES — APPLE STACKED LAYOUT
───────────────────────────────────────────────────── */

/* Page wrapper */
.ap-product-page {
  width: 100%;
}

/* ── Hero ─────────────────────────────────────────── */
.ap-hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 130px 40px 0;
  text-align: center;
}
.ap-hero-inner {
  max-width: var(--max);
  width: 100%;
  padding-bottom: 52px;
}
.ap-hero-inner .fp-back {
  display: inline-block !important;
  margin-bottom: 28px !important;
}
.ap-hero-inner .fp-eyebrow {
  margin-bottom: 14px !important;
}
.ap-hero-inner .fp-name {
  text-align: center !important;
}
.ap-hero-tag {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  margin: 14px 0 22px !important;
  display: block !important;
}
.ap-hero-story {
  max-width: 520px !important;
  margin: 0 auto 28px !important;
  text-align: center !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}
.ap-drop-status {
  margin: 0 auto !important;
  display: flex !important;
  justify-content: center !important;
}
.ap-hero-img-wrap {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
}
.ap-hero-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px 24px 0 0;
  cursor: pointer;
  box-shadow: 0 -32px 80px rgba(0,0,0,0.35);
}

/* ── Stacked sections ─────────────────────────────── */
.ap-section {
  padding: 96px 40px;
  border-top: 1px solid rgba(239,232,216,.08);
  text-align: center;
}
.ap-section-inner {
  max-width: 640px;
  margin: 0 auto;
}

/* Macros: centered big numbers */
.ap-macros {
  justify-content: center !important;
  gap: 64px !important;
  margin-top: 40px !important;
}
.ap-macros .fp-macro {
  align-items: center !important;
}
.ap-macros .fp-macro-val {
  font-size: clamp(3.2rem, 6vw, 5rem) !important;
}

/* Purchase CTA */
.ap-price-row {
  justify-content: center !important;
  margin-top: 24px !important;
  margin-bottom: 28px !important;
}
.ap-actions {
  justify-content: center !important;
  gap: 16px !important;
}

@media (max-width: 640px) {
  .ap-hero {
    padding: 110px 24px 0;
  }
  .ap-section {
    padding: 64px 24px;
  }
  .ap-macros {
    gap: 32px !important;
  }
  .ap-actions {
    flex-direction: column;
    align-items: center;
  }
  .ap-actions .fp-btn-customise,
  .ap-actions .fp-btn-cart {
    width: 100%;
    text-align: center;
  }
}

/* Legacy sticky gallery — hide since replaced */
.fsg-wrap {
  background: var(--bg) !important;
  min-height: 100vh !important;
}
.fsg-text { background: var(--bg) !important; }
.fp-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
}
.fp-name {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(3.2rem, 7vw, 6rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.fp-story {
  font-size: 0.92rem !important;
  color: var(--c55) !important;
  font-weight: 300 !important;
  line-height: 1.78 !important;
}
/* Macros: big Apple-style numbers */
.fp-macros {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.fp-macro {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.fp-macro-val {
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}
.fp-macro-unit {
  font-size: 0.5em !important;
  font-weight: 400 !important;
  color: var(--teal) !important;
  vertical-align: super !important;
}
.fp-macro-lbl {
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--c38) !important;
}
.fsg-section-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
}
/* Price row */
.fp-price-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}
.fp-price {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.03em !important;
}
.fp-size-tag {
  font-size: 0.78rem !important;
  color: var(--c38) !important;
  font-weight: 400 !important;
}
/* CTA buttons — Apple pill style */
.fp-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.fp-btn-cart {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: var(--pill) !important;
  padding: 15px 36px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: 'Poppins', sans-serif !important;
  transition: background .2s !important;
}
.fp-btn-cart:hover { background: var(--teal2) !important; }
.fp-btn-customise {
  background: rgba(239,232,216,.1) !important;
  color: var(--cream) !important;
  border: 1.5px solid rgba(239,232,216,.2) !important;
  border-radius: var(--pill) !important;
  padding: 14px 32px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: background .2s !important;
}
.fp-btn-customise:hover { background: rgba(239,232,216,.18) !important; color: var(--cream) !important; }
/* Back link */
.fp-back {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--teal) !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
}
.fp-back:hover { color: var(--teal2) !important; }
/* Ingredients strip */
.fp-ingr-strip {
  background: rgba(239,232,216,.07) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-top: 1px solid rgba(239,232,216,.15) !important;
  border-bottom: 1px solid rgba(239,232,216,.15) !important;
  padding: 16px max(48px, 6vw) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  align-items: center !important;
}
.fp-ingr-item {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(239,232,216,.75) !important;
}
.fp-ingr-sep { color: rgba(239,232,216,.25) !important; margin: 0 14px !important; }
/* Bottom social / review */
.fp-bottom {
  background: var(--bg1) !important;
  border-top: 1px solid var(--c15) !important;
  padding: 40px max(48px, 6vw) !important;
}
.psf-stars { color: #d4a843 !important; font-size: 1.2rem !important; }
.psf-quote { color: var(--c55) !important; font-size: 0.85rem !important; font-style: italic !important; }
/* Media column */
.fsg-media { background: var(--bg1) !important; }
.fsg-featured-inner { border-radius: var(--r) !important; }
.demand-signal, .fp-demand {
  background: rgba(1,90,100,.12) !important;
  border: 1px solid rgba(1,90,100,.22) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 0.72rem !important;
  color: var(--c55) !important;
}
.ds-dot { background: var(--teal) !important; }

/* ─────────────────────────────────────────────────────
   ③ CART PAGE  (.cart-container)
───────────────────────────────────────────────────── */
.cart-container {
  background: var(--bg) !important;
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 60px 48px 96px !important;
}
.cart-header {
  text-align: center !important;
  margin-bottom: 52px !important;
  border-bottom: 1px solid var(--c15) !important;
  padding-bottom: 28px !important;
}
.cart-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
}
.cart-items { background: transparent !important; }
.cart-item {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  margin-bottom: 12px !important;
  padding: 20px 24px !important;
}
.cart-item-name { color: var(--cream) !important; font-weight: 700 !important; font-size: 1rem !important; }
.cart-item-desc { color: var(--c55) !important; font-size: 0.8rem !important; }
.cart-item-price { color: var(--cream) !important; font-weight: 800 !important; font-size: 1.1rem !important; }
.item-qty-btn {
  background: var(--bg3) !important;
  border: 1px solid rgba(239,232,216,.12) !important;
  color: var(--cream) !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
}
.item-qty-btn:hover { background: var(--teal) !important; }
.item-qty { color: var(--cream) !important; font-weight: 700 !important; }
.cart-summary {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 24px 28px !important;
  margin-top: 24px !important;
}
.summary-row { border-bottom: 1px solid var(--c15) !important; }
.summary-row.total .summary-label,
.summary-row.total .summary-value {
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
}
.cart-actions {
  display: flex !important;
  gap: 12px !important;
  margin-top: 24px !important;
  justify-content: flex-end !important;
}
.cart-actions .btn.teal, .cart-actions a.btn.teal {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: var(--pill) !important;
  padding: 15px 40px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.cart-actions .btn.teal:hover { background: var(--teal2) !important; }
.cart-actions .btn.grey {
  background: transparent !important;
  color: var(--c38) !important;
  border: 1.5px solid rgba(239,232,216,.12) !important;
  border-radius: var(--pill) !important;
  padding: 14px 24px !important;
  font-size: 0.85rem !important;
}
.empty-cart-msg { text-align: center !important; color: var(--c55) !important; padding: 80px 0 !important; font-size: 1.1rem !important; }
.tax-included-note { color: var(--c38) !important; font-size: 0.72rem !important; }
/* Edit modal */
.cart-popup { background: var(--bg2) !important; border: 1px solid var(--c15) !important; border-radius: var(--r) !important; }
.cart-popup-btn.primary { background: var(--teal) !important; color: var(--cream) !important; border: none !important; border-radius: var(--pill) !important; }
.cart-popup-btn.secondary { background: transparent !important; border: 1.5px solid rgba(239,232,216,.15) !important; color: var(--c55) !important; border-radius: var(--pill) !important; }

/* ─────────────────────────────────────────────────────
   ④ CHECKOUT PAGE  (.checkout-container)
───────────────────────────────────────────────────── */
.checkout-container {
  background: var(--bg) !important;
  max-width: var(--max) !important;
  margin: 0 auto !important;
  padding: 52px 48px 96px !important;
}
.checkout-header { text-align: center !important; margin-bottom: 40px !important; }
.checkout-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.03em !important;
}
/* Progress bar */
.checkout-progress { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; margin-bottom: 40px !important; }
.progress-dot {
  background: var(--bg3) !important;
  border: 2px solid rgba(239,232,216,.12) !important;
  color: var(--c38) !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0.78rem !important; font-weight: 700 !important;
}
.progress-step.done .progress-dot { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--cream) !important; }
.progress-step.active .progress-dot { background: var(--cream) !important; border-color: var(--cream) !important; color: #000 !important; }
.progress-label { font-size: 0.68rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: var(--c38) !important; margin-top: 6px !important; text-transform: uppercase !important; }
.progress-step.active .progress-label { color: var(--cream) !important; }
.progress-line { height: 1px !important; width: 48px !important; background: rgba(239,232,216,.12) !important; }
/* Layout */
.checkout-content { display: flex !important; gap: 32px !important; align-items: flex-start !important; }
.checkout-left {
  flex: 1 !important;
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 28px !important;
}
.checkout-right {
  width: 360px !important; flex-shrink: 0 !important;
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 28px !important;
}
.checkout-section-label {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  margin: 20px 0 12px !important;
  border-bottom: 1px solid var(--c15) !important;
  padding-bottom: 8px !important;
}
.checkout-total-amount {
  font-size: 1.6rem !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.02em !important;
}
.checkout-total-label { color: var(--c55) !important; }
.checkout-total-cad { color: var(--c38) !important; font-size: 0.68rem !important; }
.checkout-fee-label { color: var(--c55) !important; font-size: 0.82rem !important; }
.checkout-fee-amount { color: var(--cream) !important; font-weight: 600 !important; }
.checkout-trust-line {
  font-size: 0.68rem !important;
  color: var(--c38) !important;
  text-align: center !important;
  margin-top: 16px !important;
  letter-spacing: 0.04em !important;
}
/* Toggle buttons */
.toggle-btn {
  background: var(--bg3) !important;
  border: 1.5px solid rgba(239,232,216,.10) !important;
  color: var(--c55) !important;
  border-radius: 8px !important;
  padding: 11px 20px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.toggle-btn.active { background: var(--teal) !important; border-color: var(--teal) !important; color: var(--cream) !important; }
/* Pay button */
#payBtn, .pay-btn {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: var(--pill) !important;
  width: 100% !important;
  padding: 16px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
}
#payBtn:hover { background: var(--teal2) !important; }
.service-area-notice {
  background: rgba(1,90,100,.10) !important;
  border: 1px solid rgba(1,90,100,.20) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--c55) !important;
  font-size: 0.8rem !important;
  margin-bottom: 24px !important;
}

/* ─────────────────────────────────────────────────────
   ⑤ CONTACT PAGE  (.contact-page)
───────────────────────────────────────────────────── */
.contact-page {
  background: var(--bg) !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  padding: 60px 40px 96px !important;
}
.contact-hero {
  text-align: center !important;
  margin-bottom: 56px !important;
  border-bottom: 1px solid var(--c15) !important;
  padding-bottom: 56px !important;
}
.contact-amp {
  font-size: clamp(5rem, 15vw, 9rem) !important;
  font-weight: 900 !important;
  color: var(--c15) !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
}
.contact-hero-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  display: block !important;
  margin-bottom: 12px !important;
}
.contact-hero h1, .contact-hero h2 {
  font-size: clamp(2.4rem, 5vw, 4rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
}
.contact-divider { background: var(--c15) !important; height: 1px !important; margin: 24px auto !important; max-width: 60px !important; }
.contact-card {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 32px !important;
  margin-bottom: 20px !important;
}
.contact-card-title {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--c15) !important;
}
.contact-item { display: flex !important; gap: 14px !important; align-items: flex-start !important; padding: 14px 0 !important; border-bottom: 1px solid var(--c15) !important; }
.contact-item:last-child { border-bottom: none !important; }
.contact-label { font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--c38) !important; }
.contact-value { color: var(--cream) !important; font-size: 0.88rem !important; font-weight: 400 !important; }
.contact-value a { color: var(--teal) !important; text-decoration: none !important; }
/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--c15) !important;
}
.faq-question {
  width: 100% !important;
  background: none !important;
  border: none !important;
  color: var(--cream) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  text-align: left !important;
  padding: 18px 0 !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  letter-spacing: -0.01em !important;
}
.faq-question:hover { color: var(--teal) !important; }
.faq-chevron { color: var(--teal) !important; font-size: 0.75rem !important; flex-shrink: 0 !important; }
.faq-answer { color: var(--c55) !important; font-size: 0.85rem !important; font-weight: 300 !important; line-height: 1.78 !important; padding-bottom: 18px !important; }
.back-btn {
  display: inline-block !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--teal) !important;
  text-decoration: none !important;
  margin-bottom: 40px !important;
}

/* ─────────────────────────────────────────────────────
   ⑥ CUSTOMISE PAGE  (.cust-hero / .cust-page)
───────────────────────────────────────────────────── */
.cust-page, .customise-page { background: var(--bg) !important; }
.cust-hero {
  text-align: center !important;
  padding: 80px 40px 56px !important;
  border-bottom: 1px solid var(--c15) !important;
  position: relative !important;
}
.cust-hero-glow { display: none !important; }
.cust-hero-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.cust-hero-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(3rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}
.cust-hero-sub {
  font-size: 0.88rem !important;
  color: var(--c55) !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
}
/* Form sections */
.premium-form { max-width: 900px !important; margin: 0 auto !important; padding: 60px 40px 96px !important; }
.premium-section {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}
.section-header {
  padding: 20px 28px !important;
  border-bottom: 1px solid var(--c15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
.cust-sh-num {
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  color: var(--teal) !important;
}
.cust-sh-title {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
}
/* Flavour choice cards */
.cfc-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 3px !important; }
.cfc-card {
  position: relative !important; overflow: hidden !important;
  border: none !important; border-radius: 0 !important;
  cursor: pointer !important; aspect-ratio: 1 !important;
  background: var(--bg3) !important;
}
.cfc-card input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
.cfc-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .6s !important; }
.cfc-card:hover .cfc-img { transform: scale(1.05) !important; }
.cfc-overlay { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.50) !important; transition: background .2s !important; }
.cfc-card:has(input:checked) .cfc-overlay { background: rgba(1,90,100,.40) !important; }
.cfc-mid-label {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 8px 10px !important; text-align: center !important;
  font-size: 0.68rem !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  color: var(--cream) !important;
  background: linear-gradient(to top, rgba(0,0,0,.80), transparent) !important;
}
.cfc-check {
  position: absolute !important; top: 8px !important; right: 8px !important;
  background: var(--teal) !important; color: var(--cream) !important;
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important; font-size: 0.65rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; transition: opacity .2s !important;
}
.cfc-card:has(input:checked) .cfc-check { opacity: 1 !important; }
/* Order summary */
.order-summary-card {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 28px !important;
}
.cust-submit-btn, .order-submit-btn, .premium-form button[type="submit"] {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: var(--pill) !important;
  padding: 16px 48px !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  width: 100% !important;
  cursor: pointer !important;
}

/* ─────────────────────────────────────────────────────
   ⑦ ACCOUNT + AUTH + LOYALTY PAGES  (.page / .header)
   These pages use their own self-contained CSS, not style.css
───────────────────────────────────────────────────── */
body, html { background: var(--bg) !important; }
.page {
  background: var(--bg) !important;
  min-height: 100vh !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 0 0 80px !important;
}
/* Page header */
.header {
  text-align: center !important;
  padding: 60px 28px 40px !important;
  border-bottom: 1px solid var(--c15) !important;
  margin-bottom: 32px !important;
  background: var(--bg) !important;
}
.header .logo {
  width: 52px !important; height: 52px !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
}
.header .brand-name {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.page-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 6vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}
.page-sub { color: var(--c55) !important; font-size: 0.85rem !important; font-weight: 300 !important; }
/* Account header specific */
.avatar {
  width: 64px !important; height: 64px !important;
  background: var(--teal) !important;
  border-radius: 50% !important;
  color: var(--cream) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 12px !important;
}
.greeting {
  font-size: clamp(1.6rem, 5vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: var(--cream) !important;
  letter-spacing: -0.03em !important;
}
.greeting-sub { color: var(--c38) !important; font-size: 0.8rem !important; }
/* Cards */
.card {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  padding: 24px 24px 28px !important;
  margin: 0 16px 16px !important;
}
.card-title {
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--teal) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--c15) !important;
}
/* Fields */
.field {
  margin-bottom: 16px !important;
}
.field label { font-size: 0.72rem !important; font-weight: 600 !important; color: var(--c55) !important; display: block !important; margin-bottom: 6px !important; letter-spacing: 0.04em !important; }
.field input, .field select {
  width: 100% !important;
  background: var(--bg3) !important;
  border: 1.5px solid rgba(239,232,216,.10) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--cream) !important;
  font-size: 0.9rem !important;
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box !important;
}
.field input:focus { border-color: var(--teal) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(1,90,100,.15) !important; }
.field input::placeholder { color: rgba(239,232,216,.25) !important; }
/* Buttons */
.btn-primary, .btn-row .btn-primary {
  background: var(--teal) !important;
  color: var(--cream) !important;
  border: none !important;
  border-radius: var(--pill) !important;
  padding: 14px 36px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  cursor: pointer !important;
}
.btn-primary:hover { background: var(--teal2) !important; }
.btn-danger {
  background: transparent !important;
  border: 1.5px solid rgba(239,232,216,.12) !important;
  color: var(--c38) !important;
  border-radius: var(--pill) !important;
  padding: 12px 28px !important;
  margin: 0 16px !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
}
.btn-danger:hover { border-color: #e55 !important; color: #e55 !important; }
/* Messages */
.msg, .error-msg, .msg-error { color: #e55 !important; font-size: 0.8rem !important; margin-bottom: 12px !important; }
.msg-success, .success-msg { color: #4ade80 !important; font-size: 0.8rem !important; margin-bottom: 12px !important; }
/* Order history */
.order-item {
  background: var(--bg3) !important;
  border: 1px solid var(--c15) !important;
  border-radius: 10px !important;
  padding: 16px 18px !important;
  margin-bottom: 10px !important;
}
.order-num { font-weight: 700 !important; color: var(--cream) !important; font-size: 0.88rem !important; }
.order-date { color: var(--c38) !important; font-size: 0.72rem !important; }
.order-amount { color: var(--cream) !important; font-weight: 700 !important; }
.order-status { border-radius: 20px !important; padding: 3px 10px !important; font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }
.order-type-badge { background: var(--bg3) !important; color: var(--c55) !important; border-radius: 4px !important; padding: 2px 7px !important; font-size: 0.65rem !important; }
.empty-state { text-align: center !important; padding: 48px 0 !important; color: var(--c55) !important; }
.empty-icon { font-size: 2.4rem !important; display: block !important; margin-bottom: 12px !important; }
/* Skeleton */
.skeleton { background: var(--bg3) !important; border-radius: 6px !important; }
/* Auth: Social buttons */
.btn-social {
  background: var(--bg2) !important;
  border: 1.5px solid rgba(239,232,216,.12) !important;
  color: var(--cream) !important;
  border-radius: var(--pill) !important;
  width: 100% !important;
  padding: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin-left: 16px !important; margin-right: 16px !important;
  width: calc(100% - 32px) !important;
}
.btn-social:hover { border-color: rgba(239,232,216,.25) !important; background: var(--bg3) !important; }
.social-divider {
  display: flex !important; align-items: center !important;
  margin: 20px 16px !important; gap: 12px !important;
  color: var(--c38) !important; font-size: 0.72rem !important;
}
.social-divider::before, .social-divider::after {
  content: '' !important; flex: 1 !important;
  height: 1px !important; background: rgba(239,232,216,.08) !important;
}
/* Auth tabs */
.tabs { display: flex !important; margin: 0 16px 20px !important; background: var(--bg3) !important; border-radius: 10px !important; padding: 4px !important; }
.tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--c55) !important;
  padding: 10px !important;
  border-radius: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-family: 'Poppins', sans-serif !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.tab-btn.active { background: var(--teal) !important; color: var(--cream) !important; }
.form-card { margin: 0 16px 16px !important; }

/* ─────────────────────────────────────────────────────
   ⑧ LOYALTY PAGE  (.loyalty-card / .stamps-grid)
───────────────────────────────────────────────────── */
.loyalty-card {
  background: linear-gradient(135deg, #002f36, #015A64) !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 28px !important;
  margin: 0 16px 24px !important;
  box-shadow: 0 12px 40px rgba(1,90,100,.30) !important;
}
.card-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important; }
.card-brand { color: rgba(239,232,216,.75) !important; font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.card-badge { background: rgba(239,232,216,.15) !important; color: var(--cream) !important; border-radius: 20px !important; padding: 3px 10px !important; font-size: 0.6rem !important; font-weight: 600 !important; }
.card-holder { color: rgba(239,232,216,.65) !important; font-size: 0.78rem !important; margin-bottom: 20px !important; }
.stamps-grid { display: grid !important; grid-template-columns: repeat(5,1fr) !important; gap: 10px !important; margin-bottom: 20px !important; }
.stamp {
  aspect-ratio: 1 !important; border-radius: 50% !important;
  background: rgba(239,232,216,.10) !important;
  border: 1.5px solid rgba(239,232,216,.18) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.1rem !important;
}
.stamp.filled { background: rgba(239,232,216,.22) !important; border-color: rgba(239,232,216,.45) !important; }
.card-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.stamps-count { color: rgba(239,232,216,.65) !important; font-size: 0.72rem !important; font-weight: 600 !important; }
.reward-badge { background: #d4a843 !important; color: #000 !important; border-radius: 20px !important; padding: 4px 12px !important; font-size: 0.65rem !important; font-weight: 700 !important; }
.free-cup-banner {
  background: rgba(1,90,100,.15) !important;
  border: 1px solid rgba(1,90,100,.30) !important;
  border-radius: 10px !important; padding: 16px 20px !important;
  margin: 0 16px 16px !important; text-align: center !important;
  color: var(--cream) !important; font-weight: 600 !important;
}
.btn-upload, .btn-switch {
  border-radius: var(--pill) !important;
  padding: 13px 28px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  cursor: pointer !important;
  display: block !important;
  text-align: center !important;
  margin: 0 16px 10px !important;
}
.btn-upload { background: var(--teal) !important; color: var(--cream) !important; border: none !important; }
.btn-switch { background: transparent !important; border: 1.5px solid rgba(239,232,216,.12) !important; color: var(--c55) !important; }
.history-title { font-size: 0.65rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--teal) !important; margin: 24px 16px 12px !important; }
.receipt-list { margin: 0 16px !important; }
.empty-receipts { color: var(--c38) !important; font-size: 0.82rem !important; text-align: center !important; padding: 24px 0 !important; }
.info-note { margin: 0 16px !important; background: var(--bg3) !important; border-radius: 8px !important; padding: 14px !important; color: var(--c38) !important; font-size: 0.78rem !important; line-height: 1.6 !important; }
.page-footer { text-align: center !important; color: var(--c38) !important; font-size: 0.68rem !important; letter-spacing: 0.1em !important; padding: 20px !important; }
/* Upload modal */
.modal-overlay { background: rgba(0,0,0,.75) !important; }
.modal { background: var(--bg2) !important; border-radius: 20px 20px 0 0 !important; border: 1px solid var(--c15) !important; }
.modal-handle { width: 40px !important; height: 4px !important; background: rgba(239,232,216,.18) !important; border-radius: 2px !important; margin: 12px auto 20px !important; }
.upload-zone { border: 2px dashed rgba(239,232,216,.15) !important; border-radius: var(--r) !important; padding: 32px !important; text-align: center !important; color: var(--c55) !important; background: var(--bg3) !important; }
.modal-field input { background: var(--bg3) !important; border: 1.5px solid rgba(239,232,216,.10) !important; color: var(--cream) !important; border-radius: 8px !important; padding: 12px 14px !important; width: 100% !important; font-family: 'Poppins', sans-serif !important; box-sizing: border-box !important; }
.btn-submit { background: var(--teal) !important; color: var(--cream) !important; border: none !important; border-radius: var(--pill) !important; padding: 14px !important; width: 100% !important; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; }
.btn-cancel { background: transparent !important; border: 1.5px solid rgba(239,232,216,.12) !important; color: var(--c55) !important; border-radius: var(--pill) !important; padding: 13px !important; font-family: 'Poppins', sans-serif !important; }

/* ─────────────────────────────────────────────────────
   ⑨ ORDER SUCCESS  (.success-card)
───────────────────────────────────────────────────── */
.success-card {
  background: var(--bg2) !important;
  border: 1px solid var(--c15) !important;
  border-radius: var(--r) !important;
  max-width: 480px !important;
  margin: 80px auto !important;
  padding: 52px 40px !important;
  text-align: center !important;
}
.check-circle {
  width: 72px !important; height: 72px !important;
  background: rgba(1,90,100,.15) !important;
  border: 2px solid var(--teal) !important;
  border-radius: 50% !important;
  font-size: 1.8rem !important;
  color: var(--teal) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 auto 28px !important;
}
.success-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 5vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: var(--cream) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 10px !important;
}
.success-subtitle { color: var(--c55) !important; font-size: 0.88rem !important; font-weight: 300 !important; line-height: 1.72 !important; margin-bottom: 28px !important; }
.order-badge-label { font-size: 0.62rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--teal) !important; margin-bottom: 6px !important; }
.order-badge-number {
  font-size: 1.6rem !important; font-weight: 900 !important;
  color: var(--cream) !important; letter-spacing: -0.02em !important;
  margin-bottom: 28px !important;
}
.info-rows { text-align: left !important; margin-bottom: 32px !important; }
.info-row { display: flex !important; gap: 14px !important; padding: 14px 0 !important; border-bottom: 1px solid var(--c15) !important; align-items: flex-start !important; }
.info-row:last-child { border-bottom: none !important; }
.info-icon { font-size: 1rem !important; flex-shrink: 0 !important; }
.info-text strong { color: var(--cream) !important; font-weight: 700 !important; font-size: 0.85rem !important; display: block !important; }
.info-text p, .info-text span { color: var(--c55) !important; font-size: 0.8rem !important; font-weight: 300 !important; }
.btn-home, .btn-feedback {
  display: block !important;
  border-radius: var(--pill) !important;
  padding: 14px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: 'Poppins', sans-serif !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
}
.btn-home { background: var(--teal) !important; color: var(--cream) !important; }
.btn-home:hover { background: var(--teal2) !important; }
.btn-feedback { background: transparent !important; border: 1.5px solid rgba(239,232,216,.15) !important; color: var(--c55) !important; }
.trust-line { color: var(--c38) !important; font-size: 0.68rem !important; letter-spacing: 0.06em !important; margin-top: 20px !important; }

/* ─────────────────────────────────────────────────────
   GLOBAL FORMS (shared across checkout + customise)
───────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px !important; }
.form-group label { font-size: 0.72rem !important; font-weight: 600 !important; color: var(--c55) !important; display: block !important; margin-bottom: 6px !important; letter-spacing: 0.04em !important; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100% !important;
  background: var(--bg3) !important;
  border: 1.5px solid rgba(239,232,216,.10) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  color: var(--cream) !important;
  font-size: 0.88rem !important;
  font-family: 'Poppins', sans-serif !important;
  box-sizing: border-box !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(1,90,100,.15) !important;
}
.form-group input::placeholder { color: rgba(239,232,216,.22) !important; }

/* ─────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .flavour-grid { grid-template-columns: 1fr !important; }
  .pcard { height: 70vw !important; }
  .checkout-content { flex-direction: column !important; }
  .checkout-right { width: 100% !important; }
  .cfc-grid { grid-template-columns: repeat(2,1fr) !important; }
  .cart-container, .checkout-container, .premium-form { padding: 40px 20px 80px !important; }
  .contact-page { padding: 40px 20px 80px !important; }
  .success-card { margin: 40px 16px !important; padding: 40px 24px !important; }
}
@media (max-width: 480px) {
  .fp-actions { flex-direction: column !important; }
  .fp-btn-cart, .fp-btn-customise { width: 100% !important; text-align: center !important; }
  .cart-actions { flex-direction: column !important; }
}

/* ═══════════════════════════════════════════════════════
   FROSTED GLASS CARDS
   Consistent treatment across all content cards.
   Mirrors the "Share Your Moment" upload card style.
═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   FLAVOUR PRODUCT PAGES — FULL-PAGE BACKGROUND
   Uses data-flavor on <body> to pick each product's image
───────────────────────────────────────────────────── */
.fp-fullpage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  filter: brightness(0.40) saturate(0.75);
}
.fp-fullpage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
[data-flavor="brownie"]  .fp-fullpage-bg { background-image: url('swirl-chocolate.png'); }
[data-flavor="power"]    .fp-fullpage-bg { background-image: url('swirl-peanutbutter.png'); }
[data-flavor="golden"]   .fp-fullpage-bg { background-image: url('splash-vanilla.png'); }
[data-flavor="crumble"]  .fp-fullpage-bg { background-image: url('swirl-cookies.png'); }

/* Override the solid #060606 body background */
body.fp-page {
  background: transparent !important;
}
/* All direct children sit above the fixed bg */
body.fp-page > *:not(.fp-fullpage-bg) {
  position: relative;
  z-index: 1;
}
/* Wipe out every solid panel background */
body.fp-page,
body.fp-page .fsg-wrap,
body.fp-page .fsg-panel,
body.fp-page .fsg-text,
body.fp-page .fsg-section,
body.fp-page .fsg-left,
body.fp-page .fsg-right,
body.fp-page .fp-hero,
body.fp-page .fp-left,
body.fp-page .fp-bottom,
body.fp-page .fp-info,
body.fp-page .fp-nutrition,
body.fp-page .fp-reviews,
body.fp-page .fp-macros,
body.fp-page section,
body.fp-page article,
body.fp-page .nf-section,
body.fp-page .review-section {
  background: transparent !important;
}

/* ── Frosted glass nav + drawer (site-wide) — matches Customise Your Cup tint */
.hn-nav,
body.has-nav .hn-nav {
  background: rgba(239,232,216,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(239,232,216,.15) !important;
}
.hn-drawer,
body.has-nav .hn-drawer {
  background: rgba(239,232,216,.07) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(239,232,216,.12) !important;
}
.hn-drawer-link {
  border-bottom: 1px solid rgba(239,232,216,.06) !important;
}

/* ─────────────────────────────────────────────────────
   FLAVOURS PAGE — FULL-PAGE BACKGROUND
───────────────────────────────────────────────────── */
.flav-fullpage-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('flavours-hero.jpg');
  background-size: cover;
  background-position: 40% 55%;
  filter: brightness(0.45) saturate(0.85);
}
/* Dark scrim so content stays legible as you scroll */
.flav-fullpage-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.52);
}
/* Body transparent + all content above the fixed bg */
body:has(.flav-fullpage-bg),
body:has(.flav-fullpage-bg) html {
  background: transparent !important;
}
body:has(.flav-fullpage-bg) .hn-nav,
body:has(.flav-fullpage-bg) .flavours-page,
body:has(.flav-fullpage-bg) .ls-section,
body:has(.flav-fullpage-bg) .ugc-section,
body:has(.flav-fullpage-bg) .hn-stats,
body:has(.flav-fullpage-bg) footer {
  position: relative;
  z-index: 1;
  background: transparent !important;
}
/* All sections on flavours page must be transparent */
body:has(.flav-fullpage-bg) .flavours-page > *,
body:has(.flav-fullpage-bg) .flavours-page section {
  background: transparent !important;
}
/* Frosted glass for CTA + lifestyle sections so they don't look empty */
body:has(.flav-fullpage-bg) .flav-cta-section {
  background: rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(239,232,216,.08) !important;
}
body:has(.flav-fullpage-bg) .ls-section {
  background: rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
/* Hide empty community upload section on flavours page — nothing to show yet */
body:has(.flav-fullpage-bg) .ugc-section {
  display: none !important;
}

/* ── Core frosted glass — EXACT same recipe as .ap-cta-ghost "See Flavours" button ── */
.hn-why-card,
.hn-stat,
.founder-card,
.contact-card,
.order-summary-card,
.ugc-upload-wrap,
.success-card,
.card,
.form-card,
.cfc-card,
.ls-card {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1.5px solid rgba(239,232,216,0.35) !important;
}

/* ── Why cards (homepage) ── */
.hn-why-card {
  border-radius: 16px !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.hn-why-card:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(239,232,216,0.65) !important;
}

/* ── Stats bar ── */
.hn-stat {
  border-radius: 16px !important;
  transition: background 0.2s, border-color 0.2s !important;
}
.hn-stat.hn-why-card--clickable {
  cursor: pointer !important;
}
.hn-stat.hn-why-card--clickable:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(239,232,216,0.65) !important;
}
.hn-stat .hn-why-tap {
  display: block !important;
  font-size: 0.6rem !important;
  color: var(--cream) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  opacity: 0.22 !important;
  transition: opacity 0.25s !important;
}
.hn-stat.hn-why-card--clickable:hover .hn-why-tap {
  opacity: 0.55 !important;
}

/* ── Founder card ── */
.founder-card {
  border-radius: 20px !important;
}

/* ── Contact cards ── */
.contact-card {
  border-radius: 16px !important;
}

/* ── Order summary (checkout / customise) ── */
.order-summary-card {
  border-radius: 16px !important;
}

/* ── UGC upload wrap (Share Your Moment) ── */
.ugc-upload-wrap {
  border-radius: 16px !important;
}

/* ── Order success card ── */
.success-card {
  border-radius: 20px !important;
}

/* ── Generic .card (account / auth pages) ── */
.card {
  border-radius: 16px !important;
}

/* ── Form card (account sections) ── */
.form-card {
  border-radius: 14px !important;
  padding: 24px !important;
}

/* ── Customise flavour choice cards ── */
.cfc-card {
  border-radius: 14px !important;
}

/* ── Lifestyle / community photo cards ── */
.ls-card {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* loyalty card keeps its own gradient — just add subtle border glow */
.loyalty-card {
  box-shadow: 0 12px 40px rgba(1,90,100,.30), 0 0 0 1px rgba(1,90,100,.25) !important;
}

/* ═══════════════════════════════════════════════════
   PREMIUM FLAVOUR CARDS
═══════════════════════════════════════════════════ */

/* Kill scroll-reveal — all cards visible immediately */
.flavours-page .pcard {
  opacity: 1 !important;
  transform: none !important;
}

/* Rounded, elevated, interactive */
.flavours-page .pcard {
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.35),
    0 8px 32px rgba(0,0,0,0.25) !important;
  transition:
    transform 0.45s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.45s ease !important;
  cursor: pointer !important;
}
.flavours-page .pcard:hover {
  transform: translateY(-8px) scale(1.012) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 0 0 2px rgba(1,130,120,0.8),
    0 0 48px rgba(1,90,100,0.18) !important;
}

/* Photo zooms on hover */
.flavours-page .pcard-bg {
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1) !important;
  transform-origin: center center !important;
}
.flavours-page .pcard:hover .pcard-bg {
  transform: scale(1.08) !important;
}

/* Lighter gradient — product photo is the hero */
.flavours-page .pcard-overlay {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.12) 35%,
    rgba(0,0,0,0.52) 68%,
    rgba(0,0,0,0.84) 100%
  ) !important;
}

/* Bigger, bolder name — reads over the photo */
.flavours-page .pcard-name {
  font-size: clamp(1.55rem, 3.2vw, 2.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.65) !important;
}

/* Flavour tag — more visible */
.flavours-page .pcard-tag {
  font-size: 0.6rem !important;
  letter-spacing: 0.12em !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  background: rgba(1,90,100,0.55) !important;
  border: 1px solid rgba(1,130,120,0.5) !important;
}

/* CTA pill — "Order Now →" */
.flavours-page .pcard-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: 12px !important;
  padding: 9px 20px !important;
  background: transparent !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(239,232,216,0.45) !important;
  border-radius: 99px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: #fff !important;
  text-transform: uppercase !important;
  transition: border-color 0.25s, gap 0.25s, padding-right 0.25s !important;
}
.flavours-page .pcard:hover .pcard-cta {
  background: transparent !important;
  border-color: rgba(239,232,216,0.8) !important;
  gap: 11px !important;
  padding-right: 24px !important;
}
.flavours-page .pcard-cta span {
  display: inline-block !important;
  transition: transform 0.25s !important;
}
.flavours-page .pcard:hover .pcard-cta span {
  transform: translateX(3px) !important;
}

/* Coming Soon pill — muted */
.flavours-page .pcard-cta--soon {
  background: rgba(239,232,216,0.12) !important;
  border: 1px solid rgba(239,232,216,0.18) !important;
  color: rgba(239,232,216,0.65) !important;
  cursor: default !important;
}
.flavours-page .pcard:hover .pcard-cta--soon {
  background: rgba(239,232,216,0.16) !important;
  gap: 7px !important;
  padding-right: 20px !important;
}