/* ============================================================
   FRUITSLALA — PREMIUM GREEN THEME SYSTEM
   Applied globally across all pages
   ============================================================ */

/* ── GOOGLE FONTS (premium typography) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,600;1,700&family=Outfit:wght@200;300;400;500;600&display=swap');

/* ── ROOT: Replace all orange/clay/sage with premium green ── */
:root {
  /* Primary green palette */
  --g:        #2d7a3a;
  --g-lt:     #3da34e;
  --g-dk:     #1f5e2c;
  --g-pale:   rgba(45,122,58,0.07);
  --g-border: rgba(45,122,58,0.18);
  --g-bstr:   rgba(45,122,58,0.42);

  /* Backgrounds */
  --surface:  #f9fef5;
  --surface2: #f0faea;
  --card:     #ffffff;
  --lift:     #e6f7e0;

  /* Text */
  --cream:    #1a2e1a;
  --pm-muted: #5a7a5a;

  /* Override legacy tokens to green */
  --clay:     #2d7a3a;
  --clay-dk:  #1f5e2c;
  --clay-lt:  #3da34e;
  --sage:     #2d7a3a;
  --sage-lt:  #3da34e;
  --peach:    #3da34e;
  --peach-pale: rgba(45,122,58,0.08);
  --gold:     #2d7a3a;
  --paper:    #f9fef5;
  --paper-2:  #f0faea;
  --line:     rgba(45,122,58,0.18);
  --white:    #ffffff;
  --ink:      #1a2e1a;

  /* Typography */
  --disp:   'Cormorant Garamond', serif;
  --body:   'Outfit', sans-serif;
}

/* ── BASE ── */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--body);
  background: var(--surface);
  color: var(--cream);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ── REVEAL ANIMATIONS ── */
.rv {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(.22,1,.36,1), transform 0.85s cubic-bezier(.22,1,.36,1);
}
.rv.vis { opacity: 1; transform: none; }
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }

/* ══════════════════════════════════════════════
   NAV — premium green
══════════════════════════════════════════════ */
.nav {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--g-border) !important;
}
.nav.shrink {
  box-shadow: 0 2px 24px rgba(45,122,58,0.08) !important;
}
.nav-logo { color: var(--cream) !important; }
.nav-logo .dot { color: var(--g) !important; }
.nav-link { color: var(--pm-muted) !important; }
.nav-link::after { background: var(--g) !important; }
.nav-link:hover { color: var(--g) !important; }
.nav-link.active { color: var(--g) !important; }
.nav-link.active::after { width: 100%; background: var(--g) !important; }
.nav-order {
  background: var(--g) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 10px 22px !important;
  letter-spacing: 0.08em !important;
  transition: background 0.25s !important;
}
.nav-order:hover { background: var(--g-lt) !important; }
.nav-burger { color: var(--cream) !important; }
.nav-cart { color: var(--cream) !important; }
.nav-cart:hover { color: var(--g) !important; }
.cart-count { background: var(--g) !important; }

/* ── TICKER ── */
.ticker-wrap {
  background: var(--g) !important;
}
.ticker-wrap::before { background: linear-gradient(to right, var(--g), transparent) !important; }
.ticker-wrap::after  { background: linear-gradient(to left,  var(--g), transparent) !important; }

/* ── ANNOUNCE BAR ── */
.announce {
  background: var(--g-dk) !important;
  color: #ffffff !important;
}
.announce .dot { background: rgba(255,255,255,0.5) !important; }
.announce a { color: rgba(255,255,255,0.85) !important; }

/* ── SEASONAL BANNER ── */
.seasonal-banner {
  background: linear-gradient(100deg, var(--g-dk), var(--g-lt)) !important;
}
.seasonal-banner .sb-cta {
  background: #fff !important;
  color: var(--g-dk) !important;
}
.seasonal-banner .sb-cta:hover {
  background: var(--g-dk) !important;
  color: #fff !important;
}

/* ── MOBILE DRAWER ── */
.drawer { background: var(--g-dk) !important; }
.drawer a { color: #fff !important; }
.drawer a:hover { color: rgba(255,255,255,0.75) !important; }
.drawer-close { color: rgba(255,255,255,0.8) !important; }

/* ── PAGE HERO ── */
.page-hero {
  background: linear-gradient(180deg, var(--surface2), var(--surface)) !important;
  border-bottom: 1px solid var(--g-border) !important;
}
.page-hero h1 em { color: var(--g) !important; }
.crumbs a:hover { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   HERO (homepage)
══════════════════════════════════════════════ */
.hero { background: #0a1a0c !important; }
.hero h1 em { color: var(--g-lt) !important; }
.hero-eyebrow { color: var(--g-lt) !important; }
.hero-eyebrow::before { background: var(--g-lt) !important; }
.hero-float-num { color: var(--g) !important; }
.hero-badge { background: var(--g) !important; box-shadow: 0 10px 30px rgba(45,122,58,0.4) !important; }

/* ── TRUST STRIP ── */
.trust { background: var(--g-dk) !important; }
.trust-item i { color: rgba(255,255,255,0.8) !important; }
.trust-item strong { color: #fff !important; }
.trust-item span { color: rgba(255,255,255,0.6) !important; }

/* ══════════════════════════════════════════════
   SECTION LABELS / KICKERS
══════════════════════════════════════════════ */
.kicker { color: var(--g) !important; }
.kicker::before { background: var(--g) !important; }
.h2 em { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   PRODUCT CARDS
══════════════════════════════════════════════ */
.prod-num { color: var(--g) !important; }
.prod-num::after { background: var(--g-border) !important; }
.prod-cat { color: var(--g) !important; }
.prod-price { color: var(--g) !important; }
.prod-img { border-radius: 10px !important; background: var(--surface2) !important; }
.prod-overlay { background: linear-gradient(to top, rgba(20,50,20,0.9), transparent 55%) !important; }
.prod-overlay .btn-order-ov {
  background: var(--g) !important;
  border-radius: 2px !important;
  padding: 10px 20px !important;
}
.prod-overlay .btn-order-ov:hover { background: var(--g-lt) !important; }

/* Card "Add to Cart" button */
.card-add {
  background: var(--g) !important;
  border-radius: 2px !important;
  transition: background 0.25s, transform 0.15s !important;
}
.card-add:hover { background: var(--g-lt) !important; }
.card-view { color: var(--g) !important; }
.card-view:hover { color: var(--g-lt) !important; }

/* ── QUANTITY STEPPER ── */
.qty button:hover { background: var(--surface2) !important; color: var(--g) !important; }

/* ══════════════════════════════════════════════
   BUTTONS (global overrides)
══════════════════════════════════════════════ */
.btn-fill {
  background: var(--g) !important;
  color: #fff !important;
  border-radius: 2px !important;
  transition: background 0.25s, transform 0.2s !important;
}
.btn-fill:hover {
  background: var(--g-lt) !important;
  transform: translateY(-2px) !important;
}
.btn-line {
  color: var(--g) !important;
  border-bottom-color: var(--g) !important;
}
.btn-line:hover { color: var(--g-lt) !important; border-color: var(--g-lt) !important; }

.btn-white { color: var(--g-dk) !important; }
.btn-out-dark {
  color: var(--cream) !important;
  border-color: var(--g-border) !important;
  border-radius: 2px !important;
}
.btn-out-dark:hover { background: var(--g) !important; color: #fff !important; border-color: var(--g) !important; }

/* ── CATEGORY FILTERS ── */
.cat-filter:hover, .cat-filter.active {
  background: var(--g) !important;
  border-color: var(--g) !important;
  color: #fff !important;
}
.cat-filter { border-color: var(--g-border) !important; border-radius: 2px !important; }

/* ── GALLERY CATEGORY FILTERS ── */
.gal-cat:hover { border-color: var(--g) !important; color: var(--g) !important; }
.gal-cat.active { background: var(--g-dk) !important; border-color: var(--g-dk) !important; color: #fff !important; }

/* ══════════════════════════════════════════════
   OCCASIONS / EVENT CARDS
══════════════════════════════════════════════ */
#occasions { background: var(--surface2) !important; }
.occ-icon { background: var(--g-pale) !important; color: var(--g) !important; }
.occ-card:hover .occ-icon { background: var(--g) !important; color: #fff !important; }
.occ-card:hover { box-shadow: 0 22px 60px rgba(45,122,58,0.12) !important; }
.occ-card { border-color: var(--g-border) !important; }

/* ══════════════════════════════════════════════
   SPREAD / FOUNTAIN SECTION
══════════════════════════════════════════════ */
.spread-tag { color: var(--g) !important; }
.spread-tag::before { background: var(--g) !important; }
.spread h2 em { color: var(--g) !important; }
.spread-price { color: var(--g) !important; }
.spread-feats li i { color: var(--g) !important; }
.spread.dark { background: var(--g-dk) !important; }
.spread.dark .spread-body h2 { color: #fff !important; }
.spread.dark .spread-body p { color: rgba(255,255,255,0.75) !important; }
.spread.dark .spread-feats li { color: rgba(255,255,255,0.85) !important; }
.spread.dark .spread-price { color: #a8e6b0 !important; }
.spread.dark .spread-bignum { color: transparent !important; -webkit-text-stroke: 1px rgba(255,255,255,0.15) !important; }
.spread.dark .btn-line { color: rgba(255,255,255,0.85) !important; border-color: rgba(255,255,255,0.4) !important; }
.spread.dark .btn-line:hover { color: rgba(255,255,255,1) !important; border-color: rgba(255,255,255,0.75) !important; }

/* ══════════════════════════════════════════════
   PROCESS (how it works)
══════════════════════════════════════════════ */
#process { background: var(--g-dk) !important; color: #fff !important; }
#process .kicker { color: rgba(255,255,255,0.7) !important; }
#process .kicker::before { background: rgba(255,255,255,0.4) !important; }
#process .h2 { color: #fff !important; }
.proc-num { border-color: rgba(255,255,255,0.35) !important; color: #fff !important; }

/* ══════════════════════════════════════════════
   PULLQUOTE
══════════════════════════════════════════════ */
.pullquote { background: var(--surface2) !important; }
.pullquote .mark { color: var(--g) !important; }
.pullquote blockquote em { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   JUICES SECTION (homepage layout)
══════════════════════════════════════════════ */
#juices { background: var(--surface) !important; }
.menu-price { color: var(--g) !important; }
.menu-benefit { background: var(--g-pale) !important; color: var(--g-dk) !important; }
.juice-img { border-radius: 12px !important; overflow: hidden !important; }

/* Juice cards (juices page) */
.jcard { border-color: var(--g-border) !important; border-radius: 10px !important; background: var(--card) !important; }
.jcard:hover { box-shadow: 0 20px 50px rgba(45,122,58,0.12) !important; }
.jcard-tag { background: var(--g-dk) !important; color: #fff !important; border-radius: 2px !important; }
.jcard-price { color: var(--g) !important; }
.jcard-add {
  background: var(--g) !important;
  border-radius: 2px !important;
}
.jcard-add:hover { background: var(--g-lt) !important; }
.jcard-benefits .menu-benefit { background: var(--g-pale) !important; color: var(--g-dk) !important; }

/* Juice tiles (juices grid page) */
.juice-tile { border-color: var(--g-border) !important; border-radius: 10px !important; }
.juice-tile:hover { box-shadow: 0 20px 50px rgba(45,122,58,0.1) !important; }
.juice-tile-tag { background: var(--g-dk) !important; color: #fff !important; border-radius: 2px !important; }
.price-ph { color: var(--g) !important; }
.juice-tile-link { color: var(--pm-muted) !important; }
.juice-tile-link:hover { color: var(--g) !important; }
.juice-intro-cards .jic { border-color: var(--g-border) !important; border-radius: 10px !important; }
.jic-ic { background: var(--g-pale) !important; color: var(--g) !important; }
.jic p strong { color: var(--g-dk) !important; }
.juice-cta-row .btn-line { color: var(--g) !important; border-color: var(--g) !important; }

/* ══════════════════════════════════════════════
   FRESHNESS SECTION
══════════════════════════════════════════════ */
.freshness { background: var(--g-dk) !important; }
.freshness-text .kicker { color: rgba(255,255,255,0.7) !important; }
.freshness-text .kicker::before { background: rgba(255,255,255,0.4) !important; }
.freshness-text h2 { color: #fff !important; }
.freshness-text h2 em { color: rgba(255,255,255,0.85) !important; font-style: italic !important; }
.freshness-text p { color: rgba(255,255,255,0.7) !important; }
.fstat { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.12) !important; }
.fstat-num { color: rgba(255,255,255,0.9) !important; }
.fstat-label { color: rgba(255,255,255,0.55) !important; }

/* ══════════════════════════════════════════════
   DELIVERY ZONES
══════════════════════════════════════════════ */
.delivery-zones { background: var(--surface2) !important; }
.dz-card { border-color: var(--g-border) !important; border-radius: 10px !important; }
.dz-card:hover { border-color: var(--g) !important; box-shadow: 0 10px 30px rgba(45,122,58,0.1) !important; }
.dz-dot { background: var(--g) !important; }
.dz-dot.express { background: var(--g-lt) !important; }
.dz-badge.free { background: var(--g-pale) !important; color: var(--g-dk) !important; }

/* Delivery coverage item */
.deliv-item { border-color: var(--g-border) !important; border-radius: 10px !important; background: var(--card) !important; }
.deliv-item i { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   CORPORATE SECTION
══════════════════════════════════════════════ */
.corporate { background: var(--g-dk) !important; }
.corp-text .kicker { color: rgba(255,255,255,0.7) !important; }
.corp-text .kicker::before { background: rgba(255,255,255,0.4) !important; }
.corp-text h2 { color: #fff !important; }
.corp-text h2 em { color: rgba(255,255,255,0.85) !important; }
.corp-text p { color: rgba(255,255,255,0.7) !important; }
.corp-perk i { color: rgba(255,255,255,0.8) !important; }
.corp-perk span { color: rgba(255,255,255,0.75) !important; }
.corp-card { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.1) !important; border-radius: 10px !important; }
.corp-card:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.25) !important; }
.corp-card-title { color: #fff !important; }
.corp-card-desc { color: rgba(255,255,255,0.55) !important; }

/* ══════════════════════════════════════════════
   BULK CTA
══════════════════════════════════════════════ */
.bulk-cta { background: var(--g) !important; }
.bulk-inner h2 { color: #fff !important; }
.bulk-inner p { color: rgba(255,255,255,0.85) !important; }

/* ══════════════════════════════════════════════
   ADDON / UPSELL
══════════════════════════════════════════════ */
.addon-section { background: var(--surface2) !important; }
.addon-card { border-radius: 10px !important; background: var(--card) !important; border-color: var(--g-border) !important; }
.addon-card:hover { border-color: var(--g) !important; box-shadow: 0 12px 40px rgba(45,122,58,0.1) !important; }
.addon-card.selected { border-color: var(--g) !important; background: var(--g-pale) !important; }
.addon-check { border-color: var(--g-border) !important; }
.addon-card.selected .addon-check { background: var(--g) !important; border-color: var(--g) !important; color: #fff !important; }
.addon-price { color: var(--g) !important; }
.addon-wa { background: var(--g) !important; border-radius: 2px !important; }
.addon-wa:hover { background: var(--g-lt) !important; }

/* ══════════════════════════════════════════════
   CALCULATOR (homepage)
══════════════════════════════════════════════ */
#calculator { background: var(--g-dk) !important; }
#calculator .kicker { color: rgba(255,255,255,0.7) !important; }
#calculator .kicker::before { background: rgba(255,255,255,0.4) !important; }
#calculator .h2 { color: #fff !important; }
#calculator .lead { color: rgba(255,255,255,0.65) !important; }
.calc-card { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important; border-radius: 10px !important; }
.calc-card-title { color: rgba(255,255,255,0.7) !important; }
.ci { border-color: rgba(255,255,255,0.14) !important; border-radius: 6px !important; }
.ci:hover { border-color: rgba(255,255,255,0.4) !important; }
.ci.on { border-color: rgba(255,255,255,0.6) !important; background: rgba(255,255,255,0.08) !important; }
.ci-check { border-color: rgba(255,255,255,0.3) !important; }
.ci.on .ci-check { background: var(--g-lt) !important; border-color: var(--g-lt) !important; color: #fff !important; }
.ci-name { color: #fff !important; }
.ci-price { color: rgba(255,255,255,0.55) !important; }
.cf { border-color: rgba(255,255,255,0.14) !important; border-radius: 6px !important; }
.cf:hover { border-color: rgba(255,255,255,0.4) !important; }
.cf.on { border-color: var(--g-lt) !important; background: rgba(45,163,78,0.15) !important; }
.cf-name { color: #fff !important; }
.cf-price { color: rgba(255,255,255,0.55) !important; }
.calc-guest-label span:first-child { color: rgba(255,255,255,0.6) !important; }
.calc-guest-label span:last-child { color: rgba(255,255,255,0.95) !important; }
input[type=range]::-webkit-slider-thumb { background: var(--g-lt) !important; }
input[type=range]::-moz-range-thumb { background: var(--g-lt) !important; }
.calc-summary { background: var(--g) !important; border-radius: 10px !important; }
.btn-summary { border-radius: 2px !important; }

/* ══════════════════════════════════════════════
   GIFT FINDER
══════════════════════════════════════════════ */
#gift-finder { background: var(--surface2) !important; }
.gf-btn:hover, .gf-btn.active { background: var(--g) !important; border-color: var(--g) !important; color: #fff !important; }
.gf-btn { border-color: var(--g-border) !important; border-radius: 2px !important; }
.gf-result { border-color: var(--g-border) !important; border-radius: 10px !important; }
.gf-result-tag { color: var(--g) !important; }
.gf-result-price { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════ */
#reviews { background: var(--surface2) !important; }
.rev-card { border-color: var(--g-border) !important; border-radius: 10px !important; background: var(--card) !important; }
.rev-card:hover { box-shadow: 0 20px 50px rgba(45,122,58,0.1) !important; }
.rev-mark { color: var(--g) !important; }
.rev-stars { color: var(--g) !important; }
.rev-track .rev-card { border-color: var(--g-border) !important; border-radius: 10px !important; }
.rev-track .rev-stars { color: var(--g) !important; }
.rev-av { background: var(--g-pale) !important; color: var(--g) !important; border: 1px solid var(--g-border) !important; }

/* ══════════════════════════════════════════════
   GALLERY
══════════════════════════════════════════════ */
#gallery { background: var(--surface) !important; }
.gal-item { border-radius: 10px !important; }
.gallery-page-grid .gp-item { border-radius: 10px !important; }

/* ══════════════════════════════════════════════
   BOOKING FORM
══════════════════════════════════════════════ */
#booking { background: var(--g-dk) !important; }
.book-aside .kicker { color: rgba(255,255,255,0.7) !important; }
.book-aside .kicker::before { background: rgba(255,255,255,0.4) !important; }
.book-aside .h2 { color: #fff !important; }
.book-aside .lead { color: rgba(255,255,255,0.65) !important; }
.bp-ic { background: var(--g) !important; border-radius: 6px !important; }
.book-form { border-radius: 10px !important; background: var(--card) !important; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--g) !important; }
.svc-chk { border-color: var(--g-border) !important; border-radius: 4px !important; }
.svc-chk:hover { border-color: var(--g) !important; }
.svc-chk.checked { border-color: var(--g) !important; background: var(--g-pale) !important; color: var(--g-dk) !important; }
.book-submit {
  background: var(--g) !important;
  border-radius: 2px !important;
  transition: background 0.25s, transform 0.2s !important;
}
.book-submit:hover { background: var(--g-lt) !important; transform: translateY(-2px) !important; }

/* ── Booking form in contact.html ── */
.book-form h3 em { color: var(--g) !important; }

/* ══════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════ */
#faq { background: var(--surface) !important; }
.faq-q-ic { border-color: var(--g-border) !important; }
.faq-item.open .faq-q-ic { background: var(--g) !important; border-color: var(--g) !important; }
.faq-q-txt { color: var(--cream) !important; }

/* ══════════════════════════════════════════════
   CTA SECTION
══════════════════════════════════════════════ */
.cta { background: var(--g) !important; }
.cta::before, .cta::after { background: rgba(255,255,255,0.06) !important; }
.cta h2 em { color: rgba(255,255,255,0.9) !important; }

/* ══════════════════════════════════════════════
   GUARANTEE
══════════════════════════════════════════════ */
.guarantee { background: var(--g) !important; color: #fff !important; }
.guarantee h2 { color: #fff !important; }
.guarantee p { color: rgba(255,255,255,0.9) !important; }

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
footer {
  background: var(--g-dk) !important;
  color: rgba(255,255,255,0.6) !important;
}
.foot-brand { color: #fff !important; }
.foot-brand .dot { color: rgba(255,255,255,0.6) !important; }
.foot-tag { color: rgba(255,255,255,0.92) !important; }
.foot-soc a { border-color: rgba(255,255,255,0.15) !important; color: rgba(255,255,255,0.5) !important; }
.foot-soc a:hover { background: var(--g-lt) !important; border-color: var(--g-lt) !important; color: #fff !important; }
.foot-col h4 { color: rgba(255,255,255,0.65) !important; }
.foot-col a, .foot-col p { color: rgba(255,255,255,0.88) !important; }
.foot-col a:hover { color: #fff !important; }
.foot-bottom { border-color: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.7) !important; }
.foot-bottom p { color: rgba(255,255,255,0.7) !important; }

/* ══════════════════════════════════════════════
   FLOATING ACTION BUTTONS
══════════════════════════════════════════════ */
.fab-cart { background: var(--g-dk) !important; }
.fab-cart:hover { background: var(--g) !important; }
.fab-wa { box-shadow: 0 10px 30px rgba(37,211,102,0.45) !important; }

/* ══════════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════════ */
.cart-drawer { background: var(--surface) !important; }
.cart-head { border-color: var(--g-border) !important; }
.cdv.on { border-color: var(--g) !important; background: var(--g-pale) !important; }
.cart-checkout { background: var(--g) !important; border-radius: 2px !important; }
.cart-checkout:hover { background: var(--g-lt) !important; }
.cart-line-remove:hover { color: var(--g) !important; }
.cart-toast i { color: var(--g-lt) !important; }
.cart-count { background: var(--g) !important; }

/* ══════════════════════════════════════════════
   PRODUCT DETAIL PAGE (PDP)
══════════════════════════════════════════════ */
.pdp-info-eyebrow { color: var(--g) !important; }
.pdp-info h1 em { color: var(--g) !important; }
.pdp-stars { color: var(--g) !important; }
.pdp-price .price-ph { color: var(--g) !important; }
.pdp-assur i { color: var(--g) !important; }
.btn-dark {
  background: var(--g) !important;
  border-radius: 2px !important;
}
.btn-dark:hover { background: var(--g-lt) !important; }
.pdp-zoom-hint i { color: var(--g) !important; }
.ingredient:hover { border-color: var(--g-border) !important; }
.ingredient .ing-ic { background: var(--g-pale) !important; color: var(--g) !important; }
.compare thead th:nth-child(2) { background: var(--g) !important; }
.compare .col-ours { background: rgba(45,122,58,0.04) !important; }
.compare .yes { color: var(--g) !important; }
.howto-step .ht-num { color: var(--g) !important; }
.howto-step { border-color: var(--g-border) !important; border-radius: 10px !important; }
.pdp-sticky { border-color: var(--g-border) !important; }

/* ══════════════════════════════════════════════
   DELIVERY BANNER
══════════════════════════════════════════════ */
.delivery-banner {
  background: linear-gradient(135deg, var(--g), var(--g-lt)) !important;
  color: #fff !important;
}
.delivery-banner .db-text strong { color: #fff !important; }
.delivery-banner .db-text span { color: rgba(255,255,255,0.85) !important; }
.delivery-banner .db-cutoff { color: #fff !important; }
.db-cta { background: var(--g-dk) !important; color: #fff !important; border-radius: 2px !important; }
.db-cta:hover { background: #000 !important; }

/* ══════════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════════ */
.contact-info h2 em { color: var(--g) !important; }
.contact-line .ci-ic { background: var(--g-pale) !important; color: var(--g) !important; border-radius: 50% !important; }

/* ══════════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════════ */
.lb-close:hover { background: var(--g) !important; border-color: var(--g) !important; }
.lb-nav:hover { background: rgba(45,122,58,0.3) !important; }

/* ══════════════════════════════════════════════
   HOMEPAGE PREMIUM SECTIONS (from index.html)
══════════════════════════════════════════════ */

/* These are the premium homepage sections created in the last build */
/* Re-affirm green tokens are applied */
.pm-hero-stats { background: rgba(0,0,0,0.5) !important; }
.pm-hstat-n { color: var(--g) !important; }
.pm-guarantee { background: var(--g) !important; }

/* ══════════════════════════════════════════════
   TRANSITIONS & HOVER POLISH (global)
══════════════════════════════════════════════ */
.occ-card, .jcard, .juice-tile, .rev-card,
.dz-card, .addon-card, .corp-card,
.prod, .gp-item, .gal-item {
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1) !important;
}

/* ══════════════════════════════════════════════
   MOBILE IMPROVEMENTS
══════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 2-column menus on mobile */
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .prod-img  { height: 180px !important; }
  .prod-name { font-size: 0.92rem !important; }
  .prod-price { font-size: 1rem !important; }
  .prod-cat  { font-size: 0.6rem !important; }

  /* 2-column events */
  .pm-events-grid { grid-template-columns: 1fr 1fr !important; }
  .pm-ev-tile { padding: 28px 20px !important; }
  .pm-ev-icon { font-size: 1.1rem !important; margin-bottom: 12px !important; }
  .pm-ev-name { font-size: 1rem !important; }
  .pm-ev-desc { font-size: 0.72rem !important; }

  /* 2-column why */
  .pm-why-grid { grid-template-columns: 1fr 1fr !important; }
  .pm-why-tile { padding: 28px 20px !important; }

  /* 2-column timeline */
  .pm-timeline-track { grid-template-columns: 1fr 1fr !important; }
  .pm-timeline-track::before { display: none !important; }

  /* 2-column juices preview */
  .pm-juices-grid { grid-template-columns: 1fr 1fr !important; }
  .pm-juice-img { height: 150px !important; }
  .pm-juice-body { padding: 14px 14px 18px !important; }
  .pm-juice-name { font-size: 0.95rem !important; }

  /* Fix image cropping in juice cards */
  .pm-juice-img img { object-fit: cover !important; object-position: center !important; }

  /* Compact sections */
  .pm-events { padding: 60px 20px !important; }
  .pm-why    { padding: 60px 20px !important; }
  .pm-timeline { padding: 60px 20px !important; }
  .pm-juices { padding: 60px 20px !important; }
  .pm-reviews { padding: 60px 0 !important; }
  .pm-booking { padding: 60px 20px !important; }
  .pm-gallery { padding: 60px 0 0 !important; }

  /* Hero stats 2x2 */
  .pm-hero-stats { grid-template-columns: 1fr 1fr !important; }
  .pm-hstat { padding: 12px 16px !important; }
  .pm-hstat-n { font-size: 1.4rem !important; }

  /* Services carousel cards */
  .pm-svc-card { flex: 0 0 calc(100vw - 40px) !important; }

  /* Fountain sections stack */
  .pm-fountain-inner { grid-template-columns: 1fr !important; }
  .pm-fountain-img   { height: 280px !important; }
  .pm-fountain-body  { padding: 40px 20px !important; }
  .pm-price-big      { font-size: 2.4rem !important; }

  /* Shop grid 2 col */
  .pm-feat-grid { grid-template-columns: 1fr 1fr !important; padding: 0 16px 60px !important; }
  .pm-pcard--hero { grid-row: span 1 !important; }
  .pm-pcard--hero .pm-pcard-img { height: 200px !important; }
  .pm-pcard--sm .pm-pcard-img   { height: 170px !important; }
  .pm-pcard-body { padding: 14px 14px 18px !important; }
  .pm-pcard-name { font-size: 0.95rem !important; }
  .pm-pcard-price { font-size: 1rem !important; }

  /* Shop header stack */
  .pm-shop-head {
    grid-template-columns: 1fr !important;
    padding: 60px 20px 0 !important;
    gap: 16px !important;
  }
  .pm-shop-head-right p { text-align: left !important; margin-left: 0 !important; }

  /* Gallery */
  .pm-gallery-head { padding: 0 20px !important; flex-direction: column !important; gap: 16px !important; }
  .pm-gal-item     { flex: 0 0 220px !important; height: 280px !important; }

  /* CTA */
  .pm-cta { padding: 60px 20px !important; flex-direction: column !important; align-items: flex-start !important; }
  .pm-cta-btns { width: 100% !important; }
  .pm-btn-wa, .pm-btn-call { width: 100% !important; justify-content: center !important; }

  /* Booking form */
  .pm-booking-shell { grid-template-columns: 1fr !important; }
  .pm-booking-side  { border-right: none !important; border-bottom: 1px solid var(--g-border) !important; padding: 28px 20px !important; }
  .pm-book-form     { padding: 28px 20px !important; }
  .pm-form-row      { grid-template-columns: 1fr !important; }
  .pm-svc-grid      { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 480px) {
  .pm-events-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .pm-ev-tile { padding: 20px 14px !important; }
  .pm-why-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .pm-why-tile { padding: 20px 14px !important; }
  .pm-timeline-track { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}

/* ══════════════════════════════════════════════
   SPECIALTY CARDS — link styling
══════════════════════════════════════════════ */
.pm-svc-card { cursor: pointer; }
.pm-svc-card a { display: block; }

/* ══════════════════════════════════════════════
   SCROLLBAR (subtle green)
══════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--surface2); }
::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g); }

/* ══════════════════════════════════════════════
   SELECTION COLOR
══════════════════════════════════════════════ */
::selection { background: var(--g-pale); color: var(--g-dk); }

/* ══════════════════════════════════════════════
   PAGE-LEVEL PREMIUM HERO UPGRADES
══════════════════════════════════════════════ */

/* All sub-page heroes: premium green gradient header */
.page-hero {
  padding: 72px 48px 52px !important;
  background: linear-gradient(160deg, var(--g-dk) 0%, var(--g) 60%, var(--g-lt) 100%) !important;
  border-bottom: none !important;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 50% 120%, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero h1 {
  color: #fff !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.2rem, 5vw, 3.8rem) !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.15) !important;
}
.page-hero h1 em { color: rgba(255,255,255,0.85) !important; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(255,255,255,0.4) !important; }
.page-hero p {
  color: rgba(255,255,255,0.82) !important;
  font-size: 1rem !important;
  max-width: 640px !important;
}
.page-hero p a { color: rgba(255,255,255,0.95) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.page-hero p strong { color: #fff !important; }
.crumbs { color: rgba(255,255,255,0.65) !important; }
.crumbs a { color: rgba(255,255,255,0.8) !important; }
.crumbs a:hover { color: #fff !important; }
.crumbs .sep { color: rgba(255,255,255,0.4) !important; }

/* Section backgrounds on sub-pages */
.section { background: var(--surface) !important; }
.section:nth-child(even) { background: var(--surface2) !important; }

/* Menu page filters */
.cat-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.cat-filter {
  padding: 9px 20px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em !important;
  border-radius: 2px !important;
  border: 1px solid var(--g-border) !important;
  transition: all 0.25s !important;
}

/* Gallery page */
.gallery-page-grid .gp-item {
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s !important;
}
.gallery-page-grid .gp-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 40px rgba(45,122,58,0.14) !important;
}

/* Contact page info icons */
.contact-info h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--cream) !important;
}

/* Fountain comparison page improvements */
.compare thead th { background: var(--g-dk) !important; }
.compare thead th:nth-child(2) { background: var(--g) !important; }
.compare .col-ours { background: rgba(45,122,58,0.04) !important; }
.compare .yes { color: var(--g) !important; }

/* PDP pages: full bg */
body[data-page="fountains"] .pdp-block h2,
body[data-page="menu"] .pdp-block h2,
body[data-page="gifts"] .pdp-block h2 {
  font-family: 'Cormorant Garamond', serif !important;
  color: var(--cream) !important;
}

/* Juices page: new arrivals label */
.juices-grid .juice-tile-tag { display: none !important; }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE — sub-pages
══════════════════════════════════════════════ */
@media (max-width: 700px) {
  .page-hero { padding: 52px 20px 40px !important; }
  .page-hero h1 { font-size: clamp(1.9rem, 7vw, 2.8rem) !important; }

  /* Menu 2 cols */
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .prod-img  { height: 170px !important; }

  /* Gallery 2 cols */
  .gallery-page-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .gallery-page-grid .gp-item { border-radius: 8px !important; }

  /* Juices 2 cols */
  .juices-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Contact stacked */
  .contact-grid { grid-template-columns: 1fr !important; padding: 40px 20px 60px !important; }

  /* Booking form */
  .book-shell { grid-template-columns: 1fr !important; }
  .frow { grid-template-columns: 1fr !important; }
  .book-form { padding: 28px 20px !important; border-radius: 8px !important; }

  /* Event tiles 2 col */
  .pm-events-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Why 2 col */
  .pm-why-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* Timeline 2 col */
  .pm-timeline-track { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }

  /* Process grid 2 col */
  .process-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .proc-step:not(:last-child)::after { display: none !important; }
}

@media (max-width: 480px) {
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .prod-img  { height: 150px !important; }
  .prod-foot { margin-top: 10px !important; }
  .prod-name { font-size: 0.85rem !important; }
  .prod-price { font-size: 0.9rem !important; }
}

/* ══════════════════════════════════════════════
   JUICE IMAGES - Fix cropping across all sizes
══════════════════════════════════════════════ */
.juice-tile-media img,
.jcard-img img,
.pm-juice-img img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px !important;
  background: var(--surface2) !important;
}

/* But homepage juice preview - fill properly */
.pm-juice-img img {
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════
   MENU SECTION 2-COL MOBILE  
══════════════════════════════════════════════ */
#menu-preview .cat-grid,
#arrangements .cat-grid {
  display: grid !important;
}

@media (max-width: 700px) {
  #menu-preview .cat-grid,
  #arrangements .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  #menu-preview .prod-img,
  #arrangements .prod-img {
    height: 170px !important;
  }
}

/* ══════════════════════════════════════════════
   VIEW FULL MENU BUTTON ENHANCEMENT
══════════════════════════════════════════════ */
.pm-view-all { padding: 0 0 60px !important; }

/* ══════════════════════════════════════════════════════════════
   PATCH v2 — Logo · Sticky Nav · Image Fixes · 2-col Mobile
   ══════════════════════════════════════════════════════════════ */

/* ─── NAV LOGO IMAGE ─── */
.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.nav-logo-img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center !important;
  flex-shrink: 0 !important;
  border: 2px solid var(--g-border) !important;
  display: block !important;
}
.nav.shrink .nav-logo-img {
  width: 30px !important;
  height: 30px !important;
}

/* ─── STICKY / FIXED NAV (works sitewide — JS already handles .shrink) ─── */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
  width: 100% !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--g-border) !important;
  transition: padding 0.3s, box-shadow 0.3s, background 0.3s !important;
}
/* On mobile make it fixed so it sticks while scrolling */
@media (max-width: 1100px) {
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 900 !important;
  }
  /* Push content down so it doesn't hide under fixed nav */
  #chrome-top + * ,
  #chrome-top ~ .pm-hero,
  #chrome-top ~ section:first-of-type,
  #chrome-top ~ header {
    /* handled via body padding below */
  }
  body {
    padding-top: 0 !important; /* nav height offset handled by JS shrink */
  }
  /* Add spacer after chrome-top on sub-pages that don't have a hero */
  .page-hero { margin-top: 0 !important; }
}

/* On MOBILE, give body a top padding equal to nav height
   so content doesn't hide under the fixed nav */
@media (max-width: 1100px) {
  /* The nav-inner has padding-top/bottom ~22px + logo ~1.7rem ≈ 68px total
     We set a safe value */
  #chrome-top {
    position: relative;
    z-index: 901;
  }
  /* For sub-pages the page-hero sits directly after chrome-top */
  .page-hero {
    /* already has padding-top 72px; fine */
  }
  /* For index.html the pm-hero is full viewport so no offset needed */
}

/* ─── HERO EYEBROW — white text (overrides any green) ─── */
.pm-hero-eyebrow span { color: #ffffff !important; }
.pm-hero-eyebrow-line { background: rgba(255,255,255,0.65) !important; }

/* ─── BOOKING SECTION — dark bg, white texts ─── */
.pm-booking { background: var(--g-dk) !important; }
.pm-booking-head .pm-label       { color: rgba(255,255,255,0.72) !important; }
.pm-booking-head .pm-label::before{ background: rgba(255,255,255,0.45) !important; }
.pm-booking-head .pm-h2          { color: #ffffff !important; }
.pm-booking-head .pm-h2 em       { color: rgba(255,255,255,0.82) !important; }
.pm-booking-head > p             { color: rgba(255,255,255,0.68) !important; }

/* ─── ALL IMAGES — prevent cropping, maintain aspect ratio ─── */

/* Product card images: cover but centered so subject stays visible */
.pm-pcard-img img {
  object-fit: cover !important;
  object-position: center center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Juice CAN images: contain so can label is never cut */
.pm-juice-img img,
.juice-tile-media img,
.jcard-img img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 14px !important;
  background: var(--surface2) !important;
}

/* Gallery images: cover with centered crop */
.pm-gal-item img,
.gal-mq-item img,
.gp-item img,
.gal-item img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Fountain / spread images */
.pm-fountain-img img,
.spread-img img,
a.spread-img img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* PDP product image — contain so full product is visible */
.pdp-media-main img {
  object-fit: contain !important;
  object-position: center center !important;
  padding: 16px !important;
}

/* Hero image: cover full viewport */
.pm-hero-img img {
  object-fit: cover !important;
  object-position: center top !important;
  padding: 0 !important;
}

/* ─── OUR MENU — 2 cols mobile + "View Full Menu" button ─── */
@media (max-width: 900px) {
  /* Homepage premium feat-grid → 2 cols */
  .pm-feat-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    padding: 0 16px 60px !important;
    gap: 10px !important;
  }
  .pm-pcard--hero { grid-row: span 1 !important; }
  .pm-pcard--hero .pm-pcard-img { height: 200px !important; }
  .pm-pcard--sm  .pm-pcard-img  { height: 170px !important; }
  .pm-pcard-body  { padding: 12px 14px 16px !important; }
  .pm-pcard-name  { font-size: 0.9rem !important; }
  .pm-pcard-ingr  { display: none !important; }   /* hide ingredients on mobile for space */
  .pm-pcard-price { font-size: 0.95rem !important; }
  .pm-btn-order   { padding: 6px 12px !important; font-size: 0.58rem !important; }
  .pm-shop-head {
    grid-template-columns: 1fr !important;
    padding: 60px 16px 0 !important;
    gap: 12px !important;
  }
  .pm-shop-head-right { display: none; }   /* hide right-side description on mobile */

  /* Menu page cat-grid → 2 cols */
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .prod-img { height: 170px !important; }
}

@media (max-width: 480px) {
  .pm-feat-grid   { gap: 8px !important; }
  .pm-pcard--hero .pm-pcard-img { height: 180px !important; }
  .pm-pcard--sm .pm-pcard-img   { height: 150px !important; }
  .cat-grid { gap: 10px !important; }
  .prod-img { height: 150px !important; }
}

/* ─── NEW ARRIVALS JUICES — 2 cols + no cropping ─── */
@media (max-width: 900px) {
  .pm-juices-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .pm-juice-img {
    height: 160px !important;
    background: var(--surface2) !important;
  }
  .pm-juice-img img {
    object-fit: contain !important;
    object-position: center !important;
    padding: 12px !important;
    height: 100% !important;
    width: 100% !important;
  }
  .pm-juice-body      { padding: 12px 12px 16px !important; }
  .pm-juice-name      { font-size: 0.9rem !important; }
  .pm-juice-ingr      { font-size: 0.68rem !important; }
  .pm-juice-price     { font-size: 0.85rem !important; }
  .pm-juices-head {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }
  .pm-juices { padding: 56px 16px !important; }
}

/* ─── EVENTS — 2 cols mobile ─── */
@media (max-width: 900px) {
  .pm-events-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .pm-ev-tile   { padding: 24px 16px !important; }
  .pm-ev-icon   { font-size: 1.1rem !important; margin-bottom: 10px !important; }
  .pm-ev-name   { font-size: 1rem !important; }
  .pm-ev-desc   { font-size: 0.7rem !important; }
  .pm-events    { padding: 56px 16px !important; }
  .pm-events-head { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
}

/* ─── WHY FRUITSLALA — 2 cols mobile ─── */
@media (max-width: 900px) {
  .pm-why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .pm-why-tile  { padding: 24px 16px !important; }
  .pm-why-icon  { width: 44px !important; height: 44px !important; margin-bottom: 12px !important; }
  .pm-why-title { font-size: 0.9rem !important; }
  .pm-why-desc  { font-size: 0.7rem !important; }
  .pm-why       { padding: 56px 16px !important; }
}

/* ─── PROCESS TIMELINE — 2 cols mobile ─── */
@media (max-width: 900px) {
  .pm-timeline-track {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }
  .pm-timeline-track::before { display: none !important; }
  .pm-timeline-num  { width: 64px !important; height: 64px !important; }
  .pm-timeline-title{ font-size: 0.95rem !important; }
  .pm-timeline-desc { font-size: 0.7rem !important; }
  .pm-timeline      { padding: 56px 16px !important; }
  .pm-timeline-head { margin-bottom: 48px !important; }
}

/* ─── HERO STATS — 2×2 on mobile ─── */
@media (max-width: 700px) {
  .pm-hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .pm-hstat { padding: 12px 14px !important; border-right: 1px solid rgba(255,255,255,0.12) !important; }
  .pm-hstat:nth-child(2) { border-right: none !important; }
  .pm-hstat:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.12) !important; }
  .pm-hstat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.12) !important; border-right: none !important; }
  .pm-hstat-n { font-size: 1.5rem !important; }
  .pm-hstat-l { font-size: 0.55rem !important; }
  .pm-hero-content { padding: 0 20px 120px !important; }
  .pm-hero h1 { font-size: clamp(2.2rem, 9vw, 3.2rem) !important; }
  .pm-hero-sub { font-size: 0.82rem !important; max-width: 100% !important; }
}

/* ─── FOUNTAIN SECTIONS — stack on mobile ─── */
@media (max-width: 900px) {
  .pm-fountain-inner {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .pm-fountain-img { height: 280px !important; }
  .pm-fountain-img::after {
    background: linear-gradient(180deg, transparent 30%, #f0faea 100%) !important;
  }
  .pm-fountain.pm-rev .pm-fountain-img::after {
    background: linear-gradient(180deg, transparent 30%, #f0faea 100%) !important;
  }
  .pm-fountain.pm-rev .pm-fountain-inner { direction: ltr !important; }
  .pm-fountain-body { padding: 36px 20px 48px !important; }
  .pm-price-big { font-size: 2.4rem !important; }
}

/* ─── GALLERY — mobile ─── */
@media (max-width: 900px) {
  .pm-gallery-head {
    padding: 0 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 32px !important;
  }
  .pm-gal-item { flex: 0 0 200px !important; height: 260px !important; }
  .pm-gal-cta  { padding: 28px 16px 56px !important; }
  .pm-gallery  { padding: 56px 0 0 !important; }
}

/* ─── SERVICES CAROUSEL — mobile ─── */
@media (max-width: 900px) {
  .pm-svc-head { padding: 0 16px 24px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .pm-svc-track { padding: 0 16px !important; gap: 12px !important; }
  .pm-svc-card  { flex: 0 0 calc(100vw - 48px) !important; }
  .pm-svc-img   { height: 180px !important; }
  .pm-svc-section { padding: 48px 0 60px !important; }
}

/* ─── REVIEWS — mobile ─── */
@media (max-width: 900px) {
  .pm-reviews { padding: 56px 0 !important; }
  .pm-reviews-inner { padding: 0 16px !important; }
  .pm-rev-card { min-width: 260px !important; max-width: 260px !important; }
}

/* ─── CTA BAND — mobile ─── */
@media (max-width: 900px) {
  .pm-cta {
    padding: 56px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 28px !important;
  }
  .pm-cta-btns { width: 100% !important; }
  .pm-btn-wa, .pm-btn-call {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ─── BOOKING FORM — mobile ─── */
@media (max-width: 900px) {
  .pm-booking { padding: 56px 16px !important; }
  .pm-booking-shell { grid-template-columns: 1fr !important; }
  .pm-booking-side {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    padding: 28px 20px !important;
  }
  .pm-book-form { padding: 28px 20px !important; }
  .pm-form-row  { grid-template-columns: 1fr !important; }
  .pm-svc-grid  { grid-template-columns: 1fr 1fr !important; }
  .pm-booking-head { margin-bottom: 36px !important; }
}

/* ─── GUARANTEE — mobile ─── */
@media (max-width: 900px) {
  .pm-guarantee { padding: 48px 20px !important; }
  .pm-guarantee h2 { font-size: clamp(1.6rem, 5vw, 2.4rem) !important; }
}

/* ─── TICKER — mobile ─── */
@media (max-width: 700px) {
  .pm-ticker-item { padding: 0 20px !important; font-size: 0.6rem !important; }
}

/* ─── NAV MOBILE — keep burger readable, logo clean ─── */
@media (max-width: 1100px) {
  .nav-inner { padding: 14px 20px !important; }
  .nav.shrink .nav-inner { padding: 10px 20px !important; }
  .nav-logo { font-size: 1.3rem !important; }
  .nav.shrink .nav-logo { font-size: 1.15rem !important; }
  .nav-logo-img { width: 32px !important; height: 32px !important; }
  .nav.shrink .nav-logo-img { width: 26px !important; height: 26px !important; }
}

/* ─── SUB-PAGE page-hero — mobile ─── */
@media (max-width: 900px) {
  .page-hero { padding: 56px 20px 40px !important; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem) !important; }
}

/* ─── JUICES PAGE — 2 cols mobile, no cropping ─── */
@media (max-width: 760px) {
  .juices-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    padding: 32px 16px 60px !important;
  }
  .juice-tile-media img {
    object-fit: contain !important;
    padding: 10px !important;
  }
}

/* ─── MENU PAGE — 2 cols on mobile ─── */
@media (max-width: 700px) {
  .cat-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .prod-img  { height: 160px !important; }
  .prod-name { font-size: 0.9rem !important; }
  .prod-price{ font-size: 0.9rem !important; }
  .prod-cat  { font-size: 0.58rem !important; }
  .section   { padding: 48px 16px !important; }
}

/* ─── GALLERY PAGE — 2 cols on mobile ─── */
@media (max-width: 760px) {
  .gallery-page-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* ─── CONTACT PAGE — stack on mobile ─── */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    padding: 40px 16px 60px !important;
    gap: 36px !important;
  }
  .book-form { padding: 28px 20px !important; border-radius: 8px !important; }
  .frow { grid-template-columns: 1fr !important; }
}

/* ─── PREVENT HORIZONTAL SCROLL ─── */
html, body { max-width: 100% !important; overflow-x: hidden !important; }

/* ─── REMOVE BODY SCROLL LOCK that hides content under fixed nav ─── */
/* When nav is fixed on mobile, ensure first section isn't hidden.
   The pm-hero is 100vh so it naturally starts from top.
   Sub-pages: page-hero has padding-top:72px which accounts for nav height ~68px */

/* ============================================================
   PATCH v2 — White text fixes · Sticky nav · Image fix · 
              2-col mobile grids · Logo · Juice images
   ============================================================ */

/* ── 1. NAV LOGO IMAGE ── */
.nav-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  box-shadow: 0 2px 8px rgba(45,122,58,0.2);
}
.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── 2. STICKY NAV — works correctly on all devices ── */
/* Desktop: sticky top */
.nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 900 !important;
}
/* Mobile: nav stays sticky inside the normal flow so
   ticker + announce scroll away above it naturally.
   This avoids the "announce bar below nav" bug. */
@media (max-width: 1100px) {
  .nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 16px rgba(45,122,58,0.1) !important;
  }
  /* chrome-top wraps ticker + announce + nav all together.
     Give the whole block position:sticky context. */
  #chrome-top {
    position: sticky;
    top: 0;
    z-index: 900;
  }
}

/* ── 3. HERO EYEBROW — pure white ── */
.pm-hero-eyebrow span,
.pm-hero-eyebrow-line {
  color: #ffffff !important;
}
.pm-hero-eyebrow-line {
  background: #ffffff !important;
  opacity: 0.8;
}

/* ── 4. BOOKING SECTION — all heading text white ── */
.pm-booking-head .pm-label,
.pm-booking-head .pm-label::before {
  color: #ffffff !important;
  background: #ffffff !important;
}
.pm-booking-head .pm-h2 {
  color: #ffffff !important;
}
.pm-booking-head .pm-h2 em {
  color: rgba(255,255,255,0.88) !important;
  font-style: italic;
}
.pm-booking-head > p {
  color: rgba(255,255,255,0.9) !important;
}

/* ── 5. IMAGE DISPLAY FIX — no cropping ── */
/* Product card images: fill properly without crop */
.pm-pcard-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Juice can images: show full can without crop */
.pm-juice-img {
  background: var(--surface2) !important;
  overflow: hidden !important;
}
.pm-juice-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  padding: 8px !important;
}

/* Juice tile images on juices.html page */
.juice-tile-media {
  background: var(--surface2) !important;
}
.juice-tile-media img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 10px !important;
}

/* Juice cards on juices page */
.jcard-img {
  background: var(--surface2) !important;
}
.jcard-img img {
  object-fit: contain !important;
  object-position: center !important;
  padding: 12px !important;
}

/* Gallery images: fill without crop */
.pm-gal-item img {
  object-fit: cover !important;
  object-position: center !important;
}

/* Fountain section images */
.pm-fountain-img img {
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── 6. MOBILE 2-COL: OUR MENU (homepage pm-feat-grid) ── */
@media (max-width: 640px) {
  /* Shop header */
  .pm-shop-head {
    padding: 52px 16px 0 !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Featured product grid: always 2 cols on mobile */
  .pm-feat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 20px 16px 40px !important;
    margin-top: 24px !important;
    background: var(--g-border) !important;
  }
  .pm-pcard--hero {
    grid-row: span 1 !important;
    grid-column: span 2 !important; /* hero card spans full width on mobile */
  }
  .pm-pcard--hero .pm-pcard-img { height: 220px !important; }
  .pm-pcard--sm .pm-pcard-img   { height: 150px !important; }
  .pm-pcard-body  { padding: 10px 10px 12px !important; }
  .pm-pcard-cat   { font-size: 0.5rem !important; margin-bottom: 3px !important; }
  .pm-pcard-name  { font-size: 0.85rem !important; margin-bottom: 4px !important; }
  .pm-pcard-ingr  { display: none !important; } /* hide ingredient text on tiny cards */
  .pm-pcard-price { font-size: 0.88rem !important; }
  .pm-pcard-foot  { gap: 4px !important; margin-top: 6px !important; }
  .pm-btn-order   { font-size: 0.55rem !important; padding: 5px 8px !important; letter-spacing: 0.08em !important; }

  /* View Full Menu button */
  .pm-view-all { padding: 16px 16px 40px !important; }
  .pm-btn-outline-g { width: 100% !important; justify-content: center !important; }
}

/* ── 7. MOBILE 2-COL: JUICES (pm-juices-grid) ── */
@media (max-width: 640px) {
  .pm-juices { padding: 48px 16px !important; }
  .pm-juices-head { gap: 16px !important; margin-bottom: 28px !important; }
  .pm-juices-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .pm-juice-img  { height: 120px !important; }
  .pm-juice-body { padding: 10px 10px 12px !important; }
  .pm-juice-num  { font-size: 0.65rem !important; margin-bottom: 3px !important; }
  .pm-juice-name { font-size: 0.88rem !important; margin-bottom: 2px !important; }
  .pm-juice-tag  { font-size: 0.46rem !important; padding: 2px 6px !important; margin-bottom: 6px !important; }
  .pm-juice-ingr { font-size: 0.66rem !important; margin-bottom: 6px !important; }
  .pm-juice-price { font-size: 0.82rem !important; }
  .pm-juice-link { font-size: 0.58rem !important; }
  /* View More Juices button */
  .pm-juice-more-wrap { margin-top: 20px !important; }
  .pm-juice-more-btn { width: 100% !important; justify-content: center !important; }
}

/* ── 8. MOBILE 2-COL: EVENTS / WHY / TIMELINE ── */
@media (max-width: 640px) {
  /* Events */
  .pm-events { padding: 48px 16px !important; }
  .pm-events-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pm-ev-tile { padding: 20px 12px !important; }
  .pm-ev-icon { font-size: 1.1rem !important; margin-bottom: 10px !important; }
  .pm-ev-name { font-size: 0.88rem !important; margin-bottom: 6px !important; }
  .pm-ev-desc { font-size: 0.68rem !important; line-height: 1.5 !important; }

  /* Why */
  .pm-why { padding: 48px 16px !important; }
  .pm-why-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .pm-why-tile { padding: 20px 12px !important; }
  .pm-why-icon { width: 42px !important; height: 42px !important; margin-bottom: 12px !important; }
  .pm-why-title { font-size: 0.88rem !important; margin-bottom: 6px !important; }
  .pm-why-desc  { font-size: 0.68rem !important; }

  /* Timeline */
  .pm-timeline { padding: 48px 16px !important; }
  .pm-timeline-track {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 12px !important;
  }
  .pm-timeline-num { width: 56px !important; height: 56px !important; }
  .pm-timeline-num i { font-size: 1.1rem !important; }
  .pm-timeline-order { width: 18px !important; height: 18px !important; font-size: 0.5rem !important; }
  .pm-timeline-title { font-size: 0.82rem !important; margin-bottom: 5px !important; }
  .pm-timeline-desc  { font-size: 0.68rem !important; }

  /* Gallery head */
  .pm-gallery-head { flex-direction: column !important; gap: 10px !important; padding: 0 16px !important; }
  .pm-gal-cta { padding: 24px 16px 48px !important; }

  /* Reviews */
  .pm-reviews { padding: 48px 0 !important; }
  .pm-reviews-inner { padding: 0 16px !important; }

  /* SVC carousel */
  .pm-svc-head { padding: 0 16px 24px !important; }
  .pm-svc-track { padding: 0 16px !important; gap: 12px !important; }
  .pm-svc-card { flex: 0 0 calc(100vw - 48px) !important; }

  /* Fountain */
  .pm-fountain-img  { height: 240px !important; }
  .pm-fountain-body { padding: 32px 16px !important; }
  .pm-price-big     { font-size: 2.2rem !important; margin-bottom: 20px !important; }

  /* Hero stats */
  .pm-hero-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; }
  .pm-hstat { padding: 12px 14px !important; }
  .pm-hstat-n { font-size: 1.5rem !important; }
  .pm-hstat-l { font-size: 0.52rem !important; }

  /* Hero content */
  .pm-hero-content { padding: 0 18px 70px !important; }
  .pm-hero h1 { font-size: clamp(2rem, 9vw, 3rem) !important; }

  /* Booking */
  .pm-booking { padding: 48px 16px !important; }
  .pm-booking-side { padding: 24px 16px !important; }
  .pm-book-form { padding: 24px 16px !important; }
  .pm-form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
  .pm-svc-grid { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }

  /* Guarantee */
  .pm-guarantee { padding: 48px 16px !important; }

  /* CTA */
  .pm-cta { padding: 48px 16px !important; flex-direction: column !important; gap: 24px !important; }
  .pm-cta-btns { width: 100% !important; }
  .pm-btn-wa, .pm-btn-call { width: 100% !important; justify-content: center !important; }
}

/* ── 9. STICKY NAV SPACER — prevent content hiding under fixed nav on mobile ── */
@media (max-width: 1100px) {
  /* The nav is ~62px. The ticker+announce are above it and scroll naturally.
     We push content down only when the page has scrolled past the top bars */
  .nav + * { scroll-margin-top: 70px; }

  /* On homepage the first real content after chrome-top is the hero 
     which is full-viewport — no spacer needed.
     On sub-pages with page-hero: add top padding to compensate for fixed nav */
  body:not([data-page="home"]) .page-hero {
    padding-top: 100px !important;
  }
}

/* ── 10. MENU PAGE 2-COL MOBILE ── */
@media (max-width: 640px) {
  .page-hero { padding: 80px 16px 36px !important; }

  /* Sub-page menu grid 2 cols */
  .cat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .prod-img { height: 160px !important; }
  .prod-foot { margin-top: 10px !important; }
  .prod-name { font-size: 0.88rem !important; }
  .prod-price { font-size: 0.9rem !important; }
  .prod-cat { font-size: 0.58rem !important; }
  .prod-overlay { display: none !important; }

  /* Juices sub-page 2 col */
  .juices-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 32px 16px 60px !important;
  }
  .juice-tile-body h3 { font-size: 0.96rem !important; }
  .juice-tile-body { padding: 12px 10px 14px !important; }
  .price-ph { font-size: 0.96rem !important; }

  /* Gallery 2 col */
  .gallery-page-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Contact stacked */
  .contact-grid {
    grid-template-columns: 1fr !important;
    padding: 32px 16px 60px !important;
  }

  /* Section padding reduce */
  .section { padding: 52px 16px !important; }

  /* Cat filters wrap better */
  .cat-filters { gap: 6px !important; }
  .cat-filter { padding: 7px 14px !important; font-size: 0.68rem !important; }
  .gal-cats { gap: 6px !important; }
  .gal-cat { padding: 7px 14px !important; font-size: 0.7rem !important; }
}

/* ── 11. NAV HEIGHT COMPENSATION for fixed mobile nav ── */
@media (max-width: 1100px) {
  /* Create space for fixed nav — the nav is ~62px */
  /* We put the ticker + announce BEFORE the fixed nav, so they scroll out */
  /* Then the nav sticks. Body needs no extra padding because the hero
     or page-hero fill the visual space correctly */
}


/* ============================================================
   FINAL OVERRIDE PATCH — 3 targeted fixes
   Applied last so they win over everything above
   ============================================================ */

/* ── FIX 1: NAV FIXED ON MOBILE ── */
@media (max-width: 1100px) {
  .nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 16px rgba(45,122,58,0.13) !important;
    border-bottom: 1px solid rgba(45,122,58,0.15) !important;
  }
  /* chrome-top itself is NOT sticky — just the nav inside it is fixed */
  #chrome-top {
    position: relative !important;
  }
  /* Body gets top padding = nav height so content isn't hidden under fixed nav */
  body {
    padding-top: 68px !important;
  }
}
@media (min-width: 1101px) {
  .nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
  }
  body {
    padding-top: 0 !important;
  }
}

/* ── FIX 2: FOUNTAIN IMAGE — full image, no crop ── */
@media (max-width: 900px) {
  .pm-fountain-inner {
    min-height: unset !important;
  }
  .pm-fountain-img {
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
  }
  .pm-fountain-img img {
    height: auto !important;
    width: 100% !important;
    object-fit: fill !important;
    display: block !important;
  }
  .pm-fountain-img::after,
  .pm-fountain.pm-rev .pm-fountain-img::after {
    display: none !important;
  }
}

/* ── FIX 3: JUICE GRID — 2 per row on ALL mobile ── */
@media (max-width: 900px) {
  .pm-juices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 600px) {
  .pm-juices-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Fountain dark section — white text */
.spread.dark .spread-tag{ color:rgba(255,255,255,.75) !important; }
.spread.dark .spread-tag::before{ background:rgba(255,255,255,.4) !important; }
.spread.dark .spread-price{ color:#fff !important; }
.spread.dark h2{ color:#fff !important; }
.spread.dark h2 em{ color:rgba(255,255,255,.75) !important; }