/* ─── DOLLOP — HOMEPAGE REDESIGN DRAFT ──────────────────────────────────────
   Reuses the production design tokens/fonts/component patterns from
   ../index.html verbatim (colors, type scale, class-naming conventions like
   .sb-*, .flv-*, .pcard-*, .spb-*, .bs-*, .ft-*) so this draft could be
   merged back into the live site with minimal translation. New sections
   (flavour tease, featured highlight, parallax, process) follow the same
   visual grammar rather than inventing a new system.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --cream:#FFF8EE; --yellow:#F5C518; --yellow-deep:#E0A800;
  --brown:#3B1F0A; --brown-mid:#6B3A1F; --brown-light:#B07B4A;
  --green:#2D5016; --green-mid:#4A7C24; --green-light:#8CC63F;
  --thorn:#1A3A0A; --white:#FFFDF7; --sb:64px;
  --nav-mint:#E9F3E7; --nav-sage:#7C8B6E; --bg:#E5F2E8;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Lenis (see redesign.js) takes over easing once it initialises — its own
   recommended reset, so it doesn't fight the native smooth-behavior above
   or the browser's own momentum scroll. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto!important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
/* Deliberately NOT adding Lenis's usual iframe{pointer-events:none} reset
   here — the Google Map embed (story-where section) needs to stay
   draggable/zoomable; its wrapper carries data-lenis-prevent instead so
   Lenis just leaves that area alone rather than disabling it outright. */
body{font-family:'Barlow',sans-serif;font-weight:500;background:var(--bg);color:var(--brown);overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{font:inherit;cursor:pointer;}

/* Swap the browser's default blue focus ring for an on-brand one (kept
   only for keyboard/focus-visible use, not on every mouse click). */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2.5px solid var(--green-mid);outline-offset:2px;
}
.shop-quickadd:focus-visible,.sb-shop-btn:focus-visible{outline-offset:3px;}

/* reveal-on-scroll utility (mirrors index.html's .reveal / IntersectionObserver pattern) */
.reveal{opacity:0;transform:translateY(32px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1);}
.reveal.visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ── PAGE-LOAD INTRO (homepage hero only) ───────────────────────────────
   Distinct from .reveal above: .reveal is scroll-triggered (IntersectionObserver);
   this is a one-time entrance that plays as soon as the page loads, before
   the visitor has scrolled at all — the nav drops in, then each hero line
   fades/slides up in sequence (staggered via --intro-delay, set in JS). */
.sb--intro{animation:nav-drop-in 0.7s cubic-bezier(0.22,1,0.36,1) backwards;}
@keyframes nav-drop-in{
  0%{opacity:0;transform:translateY(-100%);}
  100%{opacity:1;transform:translateY(0);}
}
[data-intro]{opacity:0;transform:translateY(28px);transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1),transform 1.1s cubic-bezier(0.22,1,0.36,1);transition-delay:calc(var(--intro-delay,0)*1ms);}
[data-intro].is-revealed{opacity:1;transform:none;}
[data-intro-fade]{opacity:0;transition:opacity 1.4s ease-out;transition-delay:calc(var(--intro-delay,0)*1ms);}
[data-intro-fade].is-revealed{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .sb--intro{animation:none;}
  [data-intro],[data-intro-fade]{opacity:1;transform:none;transition:none;}
}

.sec-lbl{font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;color:var(--brown-mid);font-weight:500;display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;}
.sec-lbl::before{content:'—';color:var(--yellow);letter-spacing:0;font-family:sans-serif;}

/* ── NAV ─────────────────────────────────────────────────────────────── */
/* Logo leads, nav links follow immediately after it — both left-aligned
   as one cluster, rest of the bar left empty (no more right-side cta). */
.sb{position:fixed;top:0;left:0;right:0;height:64px;background:var(--nav-mint);z-index:200;display:flex;align-items:center;gap:44px;padding:0 40px;border-bottom:1px solid rgba(59,31,10,0.08);}
.sb-logo{display:flex;align-items:center;justify-content:center;text-decoration:none;}
.sb-logo img{height:38px;width:auto;object-fit:contain;}
.sb-nav{display:flex;flex-direction:row;gap:26px;align-items:center;}
.sb-link{font-family:'Barlow',sans-serif;font-size:0.82rem;font-weight:500;text-transform:uppercase;letter-spacing:0.06em;color:var(--nav-sage);transition:color 0.2s;}
.sb-link:hover,.sb-link.active{color:var(--brown);font-weight:700;}
/* "Shop" nav item — icon button, pushed to the far right of the bar via
   margin-left:auto (everything else stays left-clustered with the logo). */
.sb-shop-btn{position:relative;margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--brown);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.2s,box-shadow 0.2s;}
.sb-shop-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sb-shop-btn:hover{transform:scale(1.08);box-shadow:0 6px 16px rgba(245,197,24,0.45);}
.sb-shop-btn.active{box-shadow:0 0 0 3px rgba(59,31,10,0.18);}
/* Badge sits on a yellow button, so invert its colours (default yellow-on-
   brown badge would be invisible here) and ring it so it reads on yellow. */
.sb-shop-btn .cart-badge{background:var(--brown);color:var(--cream);border:1.5px solid var(--yellow);}
.cart-badge{display:none;position:absolute;top:-6px;right:-6px;background:var(--yellow);color:var(--brown);font-size:0.62rem;font-weight:700;min-width:17px;height:17px;border-radius:50%;align-items:center;justify-content:center;}
.mob-menu-btn{display:none;width:36px;height:36px;background:none;border:none;color:var(--brown);align-items:center;justify-content:center;}
.mob-menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}

.mob-drawer{position:fixed;top:0;right:-280px;width:280px;height:100%;background:#FFF8EE;z-index:9999;transition:right 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:-4px 0 24px rgba(59,31,10,0.12);}
.mob-drawer.open{right:0;}
.mob-drawer-inner{display:flex;flex-direction:column;padding:24px 28px;gap:4px;height:100%;}
.mob-drawer-close{align-self:flex-end;width:40px;height:40px;background:none;border:none;color:var(--brown);margin-bottom:16px;}
.mob-drawer-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.mob-nav-link{font-family:'Barlow',sans-serif;font-size:1.1rem;font-weight:500;color:rgba(59,31,10,0.6);padding:14px 0;border-bottom:1px solid rgba(59,31,10,0.07);}
.mob-nav-link:hover{color:var(--brown);}
.mob-nav-cta{position:relative;margin-top:auto;padding:14px 0;background:var(--green);color:#FFF8EE;font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.12em;border-radius:40px;text-align:center;}
.mob-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:9998;}
.mob-drawer-overlay.open{display:block;}

@media(max-width:860px){
  .sb{display:grid;grid-template-columns:auto 1fr auto;height:52px;padding:0 16px;}
  .sb-nav{display:none;}
  .mob-menu-btn{display:flex;grid-column:1;}
  /* Was hidden entirely on mobile (only the drawer's own "Order Now" CTA
     gave access to the cart) — brought back as a third grid column so
     there's a persistent, always-visible way to reach the cart on phones
     too, not just after opening the hamburger menu. Sized down to match
     the hamburger button (36px) instead of the desktop 40px. */
  .sb-shop-btn{display:flex;grid-column:3;width:36px;height:36px;margin-left:0;}
  .sb-shop-btn svg{width:17px;height:17px;}
  /* Absolutely centered on the nav bar itself (not a grid track) so it
     stays dead-center regardless of the hamburger/shop-button widths. */
  .sb-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}

.main{padding-top:64px;}
@media(max-width:860px){.main{padding-top:52px;}}

/* ── HERO — spec item 1 ──────────────────────────────────────────────── */
/* Fills nearly the full viewport (nav + hero together = 100vh minus a
   deliberate ~56px peek) so the next section barely shows at the bottom —
   a nudge to scroll, not a full reveal. Viewport-relative rather than a
   fixed aspect-ratio, so the peek stays consistent across window sizes
   (a fixed-aspect hero would leave a lot more of the next section exposed
   on tall monitors). object-fit:cover on the image handles the crop.
   Text/button block follows graeters.com's hero pattern — confirmed via
   a live screenshot, not guesswork: left-aligned text block, vertically
   centered in the band, button directly below the headline. */
.hero{position:relative;width:100%;height:calc(100vh - 64px - 56px);min-height:460px;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;background:#1a1a1a;}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;}
.hero-slide.active{opacity:1;}
.hero-slide img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* left-to-right dark fade so the left-aligned text stays legible over the
   trees/sky, while the product cups on the right stay unobscured */
.hero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.28) 38%,transparent 62%);}
.hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:8px;}
.hero-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,248,238,0.35);border:none;transition:all 0.3s;padding:0;}
.hero-dot.active{background:var(--yellow);transform:scale(1.3);}
/* Anchored to the bottom corners (same row as the dots) rather than
   vertically centered, so they never collide with the left-aligned,
   vertically-centered text block above them. */
.hero-prev,.hero-next{position:absolute;bottom:22px;z-index:5;background:rgba(255,248,238,0.15);border:1px solid rgba(255,248,238,0.25);backdrop-filter:blur(6px);color:#fff8ee;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background 0.2s,transform 0.2s;}
.hero-prev{left:24px;}
.hero-next{right:24px;}
.hero-prev:hover,.hero-next:hover{background:rgba(255,248,238,0.3);transform:scale(1.08);}
/* Anchored bottom-left, clear of the dots/arrows row (bottom:22-28px)
   anchored below it. */
.hero-content{position:absolute;left:56px;bottom:80px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:26px;max-width:660px;}
/* Type scale matches the live site's hero (.hero-hl / .hl-stinky in
   ../index.html) exactly — clamp(2.5rem,7.4vw,6.8rem), line-height 0.91,
   letter-spacing 2.48px — just with "STINKY" dropped from the copy. */
.hero-headline{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(2.5rem,7.4vw,6.8rem);letter-spacing:2.48px;color:#fff8ee;line-height:0.91;text-shadow:0 4px 30px rgba(0,0,0,0.4);}
.hl-line{display:block;white-space:nowrap;}
/* Third headline line carries "Order Now" inline next to "THIS GOOD." —
   a flex row instead of the block/nowrap default so the button can sit
   beside the text and wrap onto its own line gracefully on narrow screens. */
.hl-line--cta{display:flex;align-items:center;flex-wrap:wrap;gap:22px;white-space:normal;}
.hl-xbold{font-weight:800;font-family:'Barlow',sans-serif;}
.hl-barrio{font-family:'Barrio',cursive;font-weight:400;}
.hero-headline em{font-style:italic;font-weight:600;color:var(--yellow);display:inline-block;transition:opacity 0.25s ease;}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;background:var(--yellow);color:var(--brown);font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.18em;padding:15px 38px;border-radius:40px;white-space:nowrap;transition:transform 0.2s,box-shadow 0.2s;border:none;}
.hero-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(245,197,24,0.38);}

@media(max-width:860px){
  .hero{height:calc(100vh - 52px - 40px);min-height:420px;}
  .hero-dots{bottom:16px;}
  .hero-content{left:24px;right:24px;bottom:64px;gap:16px;max-width:none;}
  .hl-line--cta{gap:16px;}
  .hero-btn{padding:12px 28px;font-size:1rem;}
}
/* clamp()'s 2.5rem floor doesn't shrink below that on its own — on very
   narrow phones (iPhone SE etc.) that floor is still too wide for a
   nowrap line like "NEVER TASTED" and it clips off-screen. Shrink
   further here so every line still fits on one line, uncropped. */
@media(max-width:400px){
  .hero-headline{font-size:clamp(1.5rem,8.2vw,2rem);}
}

/* ── PROMO TICKER — sits between the hero and "Our Flavours" ─────────────
   Continuous auto-scrolling strip (not scroll-linked like the parallax
   marquee further down — this one runs on its own regardless of scroll
   position). Content is duplicated once so the -50% loop point is
   seamless; each phrase gets its own fill colour per spec. */
.ticker{display:block;overflow:hidden;background:var(--brown);padding:15px 0;cursor:pointer;transition:background 0.2s;}
.ticker:hover{background:#2E1508;}
.ticker-track{display:flex;width:max-content;animation:tickerScroll 22s linear infinite;white-space:nowrap;}
.ticker-item{font-family:'Bebas Neue',sans-serif;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:0.14em;padding:0 20px;flex-shrink:0;}
.ticker-blue{color:#4C7CF0;}
.ticker-red{color:#E8564A;}
.ticker-yellow{color:var(--yellow);}
.ticker-sep{color:rgba(255,248,238,0.28);padding:0 4px;flex-shrink:0;font-size:0.8rem;}
@keyframes tickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

/* ── FLAVOUR TEASE GRID — spec item 2 ────────────────────────────────── */
.flv-hd{text-align:center;padding:96px 24px 48px;max-width:640px;margin:0 auto;}
.flv-hd-lbl{font-size:0.62rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-mid);margin-bottom:14px;}
.flv-hd-title{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(2.6rem,4.5vw,4rem);letter-spacing:2px;color:var(--brown);line-height:0.9;text-transform:uppercase;margin-bottom:16px;}
.flv-hd-title .accent{font-family:'Barrio',cursive;font-weight:400;color:var(--green-mid);text-transform:none;letter-spacing:1px;}
.flv-hd-sub{font-size:0.92rem;color:rgba(59,31,10,0.55);line-height:1.65;}

.flv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1240px;margin:0 auto;padding:0 40px 40px;}
/* Matches the ~54px gap already above the disclaimer (40px grid padding +
   14px disclaimer margin) so it sits centred in the whitespace instead of
   hugging the Featured section right below it. */
#flavours{padding-bottom:54px;}
/* transition here must also carry opacity (with .reveal's own 0.7s/easing)
   — this is a full shorthand, same specificity as and later in the file
   than .reveal's, so it fully overrides .reveal's transition rather than
   merging with it; leaving opacity out made the reveal fade-in snap
   instantly instead of animating, silently breaking any transition-delay
   stagger between cards. */
.flv-card{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(59,31,10,0.08);text-decoration:none;color:inherit;transition:transform 0.3s ease,box-shadow 0.3s ease,opacity 0.7s cubic-bezier(0.22,1,0.36,1);}
.flv-card:not(.flv-card--soon){cursor:pointer;}
.flv-card:not(.flv-card--soon):hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(59,31,10,0.13);}
.flv-card--soon{cursor:default;}
.flv-card-img{position:relative;aspect-ratio:1/1;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.flv-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.4s ease;}
.flv-card:not(.flv-card--soon):hover .flv-card-img img{transform:scale(1.05);}
.flv-card-img-overlay{display:none;}
.flv-card-wordmark{font-family:'Bebas Neue',sans-serif;font-size:1.7rem;letter-spacing:0.05em;color:rgba(255,248,238,0.92);text-align:center;text-transform:uppercase;line-height:1.15;padding:0 20px;text-shadow:0 2px 10px rgba(0,0,0,0.25);}
.flv-badge{position:absolute;top:14px;left:14px;font-size:0.6rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 13px;border-radius:40px;background:#E15B4F;color:#fff;box-shadow:0 4px 10px rgba(0,0,0,0.15);}
.flv-badge--new{background:#E6F4EA;color:#2D6A4F;}
.flv-badge--soon{background:rgba(255,255,255,0.85);color:var(--brown);box-shadow:0 4px 10px rgba(0,0,0,0.12);}
.flv-card-body{padding:18px 18px 16px;flex:1;display:flex;flex-direction:column;}
.flv-card-name{font-family:'Barlow',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--green);margin-bottom:5px;}
.flv-card-tagline{font-size:0.78rem;color:rgba(59,31,10,0.5);line-height:1.5;flex:1;margin-bottom:14px;}
.flv-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.flv-card-price{font-family:'Barlow',sans-serif;font-size:1.05rem;font-weight:700;color:var(--brown);letter-spacing:0.02em;line-height:1;}
.flv-card-price-sub{font-size:0.58rem;color:rgba(59,31,10,0.38);letter-spacing:0.03em;margin-top:2px;}
.flv-card-cta{display:inline-block;padding:9px 16px;background:var(--green);color:#fff;border:none;border-radius:40px;font-family:'Barlow',sans-serif;font-weight:700;font-size:0.68rem;letter-spacing:0.06em;text-transform:uppercase;transition:background 0.2s,transform 0.15s;white-space:nowrap;}
.flv-card-cta:hover{background:var(--thorn);transform:scale(1.04);}
.flv-card-cta--soon{background:transparent;color:rgba(59,31,10,0.4);border:1.5px solid rgba(59,31,10,0.2);font-size:0.66rem;padding:8px 13px;}
.flv-card-cta--soon:hover{background:transparent;transform:none;color:var(--brown);border-color:var(--brown-mid);}


@media(max-width:1024px){.flv-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.flv-grid{grid-template-columns:1fr;padding:0 20px 32px;}.flv-hd{padding:64px 20px 36px;}}

/* ── FEATURED FLAGSHIP — spec item 3 ─────────────────────────────────── */
.featured{padding:80px 40px 100px;background:#F5E3A6;}
.pcard{background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;display:grid;grid-template-columns:1fr 1fr;max-width:1160px;margin:0 auto;align-items:start;gap:40px;}
.pcard-img-col{position:relative;background:transparent;display:flex;flex-direction:column;}
.pcard-img-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:40px;min-height:340px;}
.pcard-img-wrap img{max-width:78%;max-height:340px;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,0.35));}
.pcard-img-wrap--video{padding:0;min-height:0;display:flex;align-items:center;justify-content:center;}
.pcard-video-frame{position:relative;height:min(70vh,640px);aspect-ratio:9/16;}
.pcard-video{width:100%;height:100%;object-fit:cover;display:block;box-shadow:0 24px 48px rgba(59,31,10,0.3);}
.pcard-mute-btn{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;background:rgba(59,31,10,0.35);border:1.5px solid rgba(255,248,238,0.5);display:flex;align-items:center;justify-content:center;color:var(--cream);backdrop-filter:blur(4px);transition:background 0.2s;}
.pcard-mute-btn:hover{background:rgba(255,248,238,0.3);}
.pcard-img-stats{display:flex;border-top:1px solid rgba(255,248,238,0.14);}
.pcard-img-stat{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px 8px;gap:2px;}
.pcard-img-stat:not(:last-child){border-right:1px solid rgba(255,248,238,0.14);}
.pcard-img-stat-num{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--cream);line-height:1;letter-spacing:0.04em;}
.pcard-img-stat-lbl{font-size:0.58rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(255,248,238,0.6);text-align:center;line-height:1.3;}
.pcard-info{background:var(--white);border-radius:20px;box-shadow:0 16px 40px rgba(59,31,10,0.12);padding:44px;margin-top:32px;display:flex;flex-direction:column;justify-content:flex-start;}
.pcard-eyebrow{font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-mid);font-weight:500;margin-bottom:12px;}
.pcard-title{font-family:'Barlow',sans-serif;font-weight:800;font-size:clamp(2.2rem,3.5vw,3.2rem);letter-spacing:1px;color:var(--brown);line-height:0.95;margin-bottom:14px;}
.pcard-desc{font-size:0.92rem;color:var(--brown-mid);line-height:1.7;margin-bottom:22px;}
.pcard-feats{display:grid;grid-template-columns:1fr 1fr;background:rgba(59,31,10,0.04);border:1.5px solid rgba(59,31,10,0.08);border-radius:10px;padding:16px 20px;gap:9px 14px;margin-bottom:24px;}
.pcard-feat{font-size:0.8rem;color:var(--brown-mid);line-height:1.4;}
.pcard-feat::before{content:'✓ ';color:var(--green-mid);font-weight:700;}
.pcard-szrow{display:flex;gap:10px;margin-bottom:20px;}
.pcard-sz{padding:8px 20px;border:1.5px solid rgba(59,31,10,0.16);border-radius:40px;background:transparent;font-family:'Barlow',sans-serif;font-size:0.84rem;font-weight:500;color:var(--brown-mid);transition:all 0.2s;}
.pcard-sz.active{border-color:var(--green);background:var(--green);color:var(--cream);}
.pcard-sz:hover:not(.active){border-color:var(--brown-mid);color:var(--brown);}
.pcard-price-line{margin-bottom:24px;padding-top:18px;border-top:1px solid rgba(59,31,10,0.08);display:flex;align-items:baseline;gap:10px;}
.pcard-price-num{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--brown);letter-spacing:0.04em;line-height:1;}
.pcard-price-note{font-size:0.74rem;color:var(--brown-light);}
.pcard-order-btn{display:block;width:fit-content;padding:15px 40px;background:var(--yellow);color:var(--brown);font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.12em;border:none;border-radius:40px;transition:background 0.2s,transform 0.15s;}
.pcard-order-btn:hover{background:var(--yellow-deep);transform:translateY(-2px);}

@media(max-width:900px){
  .pcard{grid-template-columns:1fr;margin:0 20px;border-radius:18px;}
  .pcard-info{padding:36px 28px 40px;}
}

/* ── PARALLAX TAGLINE — "Pure ___" marquee — Figma node 45:4298 ───────── */
/* Once the section's top reaches the viewport top, .pt-sticky pins in
   place — scrolling stops moving the page visually for the extra height
   added to .parallax-tagline below, giving the marquee rows a window to
   move through. Row motion is SCROLL-DRIVEN, not autoplaying: redesign.js
   reads scroll progress through that pinned window and sets each row's
   translateX directly (.hpy-dir-left rows travel negative/leftward,
   .hpy-dir-right rows travel positive/rightward), so it only moves while
   the user scrolls. Track content is duplicated several times over so it
   stays wide of the viewport at max travel distance either direction.
   One flat background + solid gold wordmark text, per Figma (no more
   per-row colour banding). */
.parallax-tagline{position:relative;height:calc(100vh + 420px);background:#FFFDE9;}
.pt-sticky{position:sticky;top:0;height:100vh;min-height:620px;overflow:hidden;}

.hpy-rows{display:flex;flex-direction:column;height:100%;}
.hpy-band{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;align-items:center;}
.hpy-circles-row{flex:none;height:clamp(96px,15vw,210px);position:relative;overflow:hidden;display:flex;align-items:center;z-index:2;}

/* Rows that travel rightward (.hpy-dir-right) start flush against the
   row's LEFT edge by default (flex's default justify-content:flex-start),
   so shifting them right exposes empty background there before the track
   catches up. justify-content:flex-end instead anchors the track's RIGHT
   edge to the row's right edge at rest — since the track is far wider
   than the row, the overflow spills off-screen to the LEFT, giving a deep
   reserve of already-rendered content to reveal as it's nudged rightward.
   (margin-left:auto doesn't work here: auto margins only redistribute
   positive leftover space, and there is none once content overflows its
   container — justify-content positions correctly regardless.) Leftward
   rows (.hpy-dir-left) don't need this: starting flush-left, they only
   ever reveal MORE of their own (already very wide) content as they
   slide left. :has() targets the row by its track's direction class so
   this keeps working correctly if directions are swapped again later. */
.hpy-band:has(.hpy-dir-right),.hpy-circles-row:has(.hpy-dir-right){justify-content:flex-end;}

.hpy-track{display:flex;gap:clamp(20px,3.2vw,54px);width:max-content;will-change:transform;}
.hpy-word{font-family:'Barlow',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.4rem,8.5vw,6.2rem);letter-spacing:0.02em;white-space:nowrap;user-select:none;color:var(--yellow);}
.hpy-word--em{font-weight:800;}

.hpy-circles-track{display:flex;width:max-content;will-change:transform;}
.hpy-circles-row--wide .hpy-circles-track{gap:clamp(48px,9vw,120px);}
.hpy-circles-row--tight .hpy-circles-track{gap:clamp(36px,6.5vw,90px);}
.hpy-circle{width:clamp(90px,15vw,200px);height:clamp(90px,15vw,200px);flex:none;border-radius:50%;overflow:hidden;box-shadow:0 10px 22px rgba(0,0,0,0.16);}
.hpy-circle img{width:100%;height:100%;object-fit:cover;display:block;}

@media(max-width:860px){
  .parallax-tagline{height:calc(100vh + 260px);}
  .pt-sticky{min-height:500px;}
}

/* ── PROCESS — spec item 6 ───────────────────────────────────────────── */
.process{padding:100px 40px;background:var(--bg);}
.process-inner{max-width:1080px;margin:0 auto;}
.process-hd{text-align:center;max-width:560px;margin:0 auto 64px;}
.process-hd .flv-hd-title{margin-bottom:14px;}
.proc-steps{display:flex;gap:0;}
.proc-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 20px;position:relative;}
.proc-step:not(:last-child)::after{content:'';position:absolute;top:29px;left:calc(50% + 45px);right:calc(-50% + 45px);height:1.5px;background:repeating-linear-gradient(to right,rgba(59,31,10,0.15) 0 6px,transparent 6px 12px);}
.proc-num{width:58px;height:58px;border-radius:50%;background:rgba(245,197,24,0.14);border:1.5px solid rgba(245,197,24,0.4);display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--brown);margin-bottom:20px;position:relative;z-index:1;background-color:var(--white);}
.proc-title{font-family:'Barlow',sans-serif;font-weight:700;font-style:italic;font-size:1.05rem;color:var(--brown);margin-bottom:8px;letter-spacing:-0.01em;}
.proc-note{font-size:0.84rem;color:var(--brown-mid);line-height:1.65;}

@media(max-width:860px){
  .proc-steps{flex-direction:column;gap:36px;}
  .proc-step:not(:last-child)::after{display:none;}
}

/* ── BRAND STORY — spec item 7 (near-verbatim from ../index.html #brand) ─
   Background fill follows the live site: the section itself has no fill
   (video fills its own column), .bs-text-col carries the cream fill, dark
   ink text — not the dark-brown block this draft used before. */
.brand-story{display:grid;grid-template-columns:1fr 1fr;min-height:88vh;}
.bs-img-col{position:relative;overflow:hidden;}
.bs-vid{width:100%;height:100%;object-fit:cover;display:block;}
.bs-img-tag{position:absolute;bottom:20px;left:20px;background:var(--yellow);color:var(--brown);font-family:'Bebas Neue',sans-serif;font-size:0.8rem;letter-spacing:0.12em;padding:8px 16px;border-radius:6px;}
.bs-text-col{background:var(--cream);padding:80px 72px;display:flex;flex-direction:column;justify-content:center;}
.bs-head{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(2.4rem,4vw,3.4rem);line-height:0.95;color:var(--brown);letter-spacing:1px;margin-bottom:22px;}
.bs-head span:not(.bs-real){color:var(--green);}
.bs-born{font-weight:900;}
.bs-real{font-weight:900;color:var(--yellow);}
.bs-obsession{font-family:'Barrio',cursive;font-weight:400;letter-spacing:1px;}
.bs-body{font-size:0.92rem;color:var(--brown-light);line-height:1.8;margin-bottom:14px;}
.bs-stats{display:flex;gap:36px;margin-top:24px;padding-top:28px;border-top:1px solid rgba(59,31,10,0.1);}
.bs-stat-num{font-family:'Bebas Neue',sans-serif;font-size:2.2rem;color:var(--brown);line-height:1;margin-bottom:4px;}
.bs-stat-lbl{font-size:0.7rem;color:var(--brown-light);letter-spacing:0.04em;line-height:1.4;max-width:110px;}

@media(max-width:860px){
  .brand-story{grid-template-columns:1fr;min-height:auto;}
  .bs-img-col{height:52vmax;order:2;}
  .bs-text-col{padding:44px 24px 56px;order:1;}
  .bs-stats{flex-wrap:wrap;gap:24px;}
}

/* ── WHERE TO FIND — spec item 7.5 (near-verbatim from ../index.html #where) ──
   Live site uses a dark green fill + photo overlay with translucent-white
   cards; this draft is re-themed for a light E2F2E6 fill per request —
   opaque white cards + dark ink text instead, same layout/copy. */
.story-where{background:#E2F2E6;padding:100px 40px;position:relative;overflow:hidden;}
.sw-inner{max-width:1000px;margin:0 auto;position:relative;z-index:1;}
.sw-head-row{margin-bottom:52px;text-align:center;}
.sw-head{font-family:'Barlow',sans-serif;font-weight:500;font-size:clamp(2.2rem,4.5vw,4.4rem);line-height:0.92;color:var(--brown);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.sw-find{font-weight:900;color:var(--green);}
.sw-fix{font-family:'Barrio',cursive;letter-spacing:1px;color:var(--green-mid);text-transform:none;}
.sw-sub{font-size:0.95rem;color:var(--brown-mid);max-width:460px;line-height:1.65;margin:0 auto;}
.sw-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.sw-lbl{font-size:0.66rem;font-weight:700;letter-spacing:0.22em;text-transform:uppercase;color:var(--green-mid);margin-bottom:16px;}
.sw-locs,.sw-order{display:flex;flex-direction:column;}
.sw-map-wrap{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(59,31,10,0.08);flex:1;}
.sw-map-frame{width:100%;height:230px;border:none;display:block;}
.sw-addr-block{background:#fff;border-top:1px solid rgba(59,31,10,0.08);padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;}
.sw-addr-text{font-size:0.82rem;color:var(--brown);line-height:1.5;}
.sw-dir-link{font-family:'Barlow',sans-serif;font-weight:700;font-style:italic;font-size:0.82rem;color:var(--green);text-decoration:none;white-space:nowrap;transition:opacity 0.2s;}
.sw-dir-link:hover{opacity:0.7;}
.sw-order-card{background:var(--yellow);border-radius:18px;padding:34px 30px;text-align:center;flex:1;display:flex;flex-direction:column;justify-content:center;}
.sw-order-title{font-family:'Bebas Neue',sans-serif;font-size:2rem;letter-spacing:0.1em;color:var(--brown);margin-bottom:12px;line-height:1;}
.sw-order-sub{font-size:0.84rem;color:rgba(59,31,10,0.65);line-height:1.65;margin-bottom:22px;}
.sw-order-btn{display:inline-block;background:var(--brown);color:var(--yellow);font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:0.18em;padding:14px 36px;border-radius:40px;border:none;transition:transform 0.2s,box-shadow 0.2s;margin-bottom:12px;width:100%;}
.sw-order-btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(59,31,10,0.22);}
.sw-order-note{font-size:0.7rem;color:rgba(59,31,10,0.5);letter-spacing:0.04em;}

@media(max-width:860px){
  .story-where{padding:64px 20px;}
  .sw-cols{grid-template-columns:1fr;}
}

/* ── FAT FOOTER — spec item 8 ────────────────────────────────────────── */
/* Illustrated landscape background (redesign/assets/images/Dollop-Footer-
   Redesign.png). Link columns sit directly on the illustration at the
   top in solid, fully-opaque text (no frosted panel — the light sky
   already gives clean contrast); the wordmark is large and centered in
   the middle, with the hills/flowers showing below it. */
/* Background illustration wipes up into view from the bottom edge as the
   footer scrolls into view (clip-path grows from a 0-height sliver at the
   bottom to the full section) — independent of .ft-fat-top's own
   opacity/slide .reveal, which keeps working exactly as before.
   The clip-path lives on a separate .ft-fat-bg layer rather than on
   .ft-fat itself: a clip-path on the observed element (or any ancestor
   of an observed descendant, e.g. the logo) collapses its rendered area
   to zero, which makes IntersectionObserver report it as never
   intersecting — a permanent deadlock since the footer can't be
   scrolled past. Observing the always-unclipped .ft-fat instead and
   gating the child layer's clip-path off its .visible class avoids that. */
.ft-fat-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;background-repeat:no-repeat;clip-path:inset(100% 0 0 0);transition:clip-path 1.2s cubic-bezier(0.22,1,0.36,1);}
.ft-fat.visible .ft-fat-bg{clip-path:inset(0 0 0 0);}
@media (prefers-reduced-motion: reduce){
  .ft-fat-bg{clip-path:none;transition:none;}
}
.ft-fat{position:relative;padding:72px 56px 0;display:flex;flex-direction:column;}

.ft-fat-top{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;max-width:1240px;margin:0 auto 96px;width:100%;}
.ft-ct{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:16px;}
.ft-col{min-width:150px;}
.ft-col > a{display:block;font-size:0.9rem;font-weight:500;color:var(--brown);margin-bottom:12px;transition:color 0.2s;}
.ft-col > a:hover{color:var(--green-mid);}
.ft-col > a em{color:var(--brown-mid);font-style:italic;}
.ft-addr{font-style:normal;font-size:0.9rem;color:var(--brown);line-height:1.7;margin-bottom:18px;}

.ft-fat-mid{display:flex;flex-direction:column;align-items:center;padding-bottom:120px;transform:translateY(-100px);}
.ft-fat-logo{height:110px;width:auto;display:block;margin-bottom:22px;filter:drop-shadow(0 4px 16px rgba(255,255,255,0.5));}
/* Logo's own fade+scale entrance — separate element from .ft-fat-mid, so
   this doesn't fight that container's static translateY(-100px) layout
   offset above; starts 0.3s after the background wipe so the logo pops
   in just as the illustration finishes rising into view. */
.ft-fat-logo.reveal-logo{opacity:0;transform:scale(0.82) translateY(24px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s,transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.3s;}
.ft-fat-logo.reveal-logo.visible{opacity:1;transform:scale(1) translateY(0);}
@media (prefers-reduced-motion: reduce){
  .ft-fat-logo.reveal-logo{opacity:1;transform:none;transition:none;}
}
.ft-fat-soc{display:flex;gap:12px;}
.ft-fat-soc a{width:40px;height:40px;border:1.5px solid rgba(59,31,10,0.3);border-radius:50%;background:rgba(255,248,238,0.6);display:flex;align-items:center;justify-content:center;color:var(--brown);transition:background 0.2s,border-color 0.2s;}
.ft-fat-soc a:hover{background:var(--yellow);border-color:var(--yellow);}

.ft-bot{width:100%;max-width:1240px;padding:20px 0 40px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:0.7rem;color:rgba(59,31,10,0.4);flex-wrap:wrap;}

@media(max-width:860px){
  .ft-fat{padding:56px 24px 0;}
  .ft-fat-top{gap:32px 24px;margin-bottom:64px;}
  .ft-fat-logo{height:76px;}
  .ft-fat-mid{padding-bottom:80px;}
  .ft-bot{padding-bottom:32px;}
}
@media(max-width:520px){
  .ft-fat-top{gap:28px 20px;}
  .ft-col{min-width:calc(50% - 12px);}
}

/* ── SHOP PAGE — "Create Your Own Pack" ──────────────────────────────────
   Card visuals reuse .flv-* from the homepage flavour tease (same grid
   language); everything below is new: per-card size toggle + Add to Pack,
   a persistent cart bar, and the checkout modal (ported near-verbatim from
   ../product.html — same cart.js, site-config.js and Apps Script/WhatsApp
   backend, so orders placed here land in the same place as the live site). */
.shop-hero{text-align:center;padding:96px 24px 48px;max-width:640px;margin:0 auto;}

/* MERDEKA COMBO — same Buy 4 Get 1 Free (RM45) offer already live on the
   staging site's product.html, restyled here in the redesign's own colour
   system (cream/yellow/green/brown) instead of the live site's palette. */
/* scroll-margin-top clears the fixed 64px nav when linked to directly
   (the ticker on index.html deep-links here via #merdekaCombo) so the
   section doesn't land partially hidden behind it. */
.combo-section{padding:0 40px 40px;scroll-margin-top:80px;}
.combo-card{max-width:1000px;margin:0 auto;background:var(--white);border-radius:24px;overflow:hidden;border:1px solid rgba(59,31,10,0.08);display:grid;grid-template-columns:1fr 1fr;align-items:center;box-shadow:0 20px 50px rgba(59,31,10,0.1);}
.combo-img{width:100%;height:100%;object-fit:cover;display:block;}
.combo-body{padding:44px 48px;}
.combo-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(74,124,36,0.09);color:var(--green);font-size:0.66rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;padding:6px 16px;border-radius:40px;margin-bottom:16px;}
.combo-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:0.06em;color:var(--brown);margin-bottom:12px;}
.combo-desc{font-size:0.92rem;color:var(--brown-mid);line-height:1.7;margin-bottom:22px;}
.combo-flavours{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.combo-flavour-pill{padding:6px 16px;border:1.5px solid rgba(59,31,10,0.14);border-radius:40px;font-size:0.76rem;font-weight:500;color:var(--brown-mid);background:var(--cream);}
.combo-price-row{display:flex;align-items:baseline;gap:10px;margin-bottom:24px;}
.combo-price{font-family:'Bebas Neue',sans-serif;font-size:2.4rem;letter-spacing:0.04em;color:var(--brown);}
.combo-price-note{font-size:0.8rem;color:var(--brown-light);}
.combo-order-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--yellow);color:var(--brown);font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.14em;padding:14px 38px;border-radius:40px;border:none;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s;}
.combo-order-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(245,197,24,0.4);}
@media(max-width:760px){
  .combo-section{padding:0 20px 32px;}
  .combo-card{grid-template-columns:1fr;}
  .combo-img{aspect-ratio:1/1;}
  .combo-body{padding:32px 24px;}
}

.shop-grid-section{padding:0 40px 120px;}
.shop-card .flv-card-body{display:flex;flex-direction:column;}
.shop-sz-row{display:flex;gap:8px;margin:14px 0 12px;}
.shop-sz{flex:1;padding:8px 6px;border:1.5px solid rgba(59,31,10,0.16);border-radius:10px;background:transparent;font-family:'Barlow',sans-serif;font-size:0.72rem;font-weight:700;color:var(--brown-mid);transition:all 0.2s;}
.shop-sz.active{border-color:var(--green);background:var(--green);color:var(--cream);}
.shop-sz:hover:not(.active){border-color:var(--brown-mid);color:var(--brown);}
/* Quick-add icon (cart+plus) — replaces the old "Add to Pack" text button,
   sits over the top-right corner of the card image instead. */
.shop-quickadd{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,253,247,0.94);border:none;display:flex;align-items:center;justify-content:center;color:var(--brown);cursor:pointer;box-shadow:0 6px 16px rgba(59,31,10,0.22);transition:background 0.2s,transform 0.2s,box-shadow 0.2s;z-index:2;}
.shop-quickadd svg{width:18px;height:18px;}
.shop-quickadd:hover{background:var(--yellow);transform:scale(1.1);box-shadow:0 8px 20px rgba(59,31,10,0.3);}
.shop-quickadd:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

.shop-cart-bar{position:fixed;left:50%;bottom:-100px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:var(--brown);color:var(--cream);padding:14px 22px;border-radius:50px;box-shadow:0 16px 40px rgba(59,31,10,0.35);border:none;cursor:pointer;z-index:400;transition:bottom 0.3s cubic-bezier(0.34,1.56,0.64,1);font-family:'Barlow',sans-serif;}
.shop-cart-bar.show{bottom:28px;}
.shop-cart-bar-icon{position:relative;font-size:1.2rem;line-height:1;}
.shop-cart-bar-icon .cart-badge{display:none;position:absolute;top:-9px;right:-11px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--yellow);color:var(--brown);font-size:0.62rem;font-weight:800;align-items:center;justify-content:center;line-height:1;}
.shop-cart-bar-label{font-weight:700;font-size:0.86rem;letter-spacing:0.02em;}
.shop-cart-bar-total{font-family:'Bebas Neue',sans-serif;font-size:1.05rem;letter-spacing:0.04em;color:var(--yellow);}
@media(max-width:560px){
  .shop-cart-bar{left:20px;right:20px;transform:none;justify-content:center;}
  .shop-cart-bar.show{bottom:20px;}
}

/* ── CHECKOUT MODAL — ported from ../product.html, same class names ──── */
.modal-overlay{display:none;position:fixed;inset:0;z-index:900;background:rgba(18,8,2,0.65);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--white);border-radius:18px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;padding:44px;position:relative;animation:modalIn 0.3s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes modalIn{from{transform:scale(0.92) translateY(16px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.m-close{position:absolute;top:17px;right:17px;width:33px;height:33px;background:var(--cream);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.95rem;color:var(--brown);transition:background 0.2s;cursor:pointer;}
.m-close:hover{background:var(--yellow);}
.m-step{display:none;}.m-step.active{display:block;}
.m-title{font-family:'Barlow',sans-serif;font-size:1.85rem;font-weight:700;font-style:italic;color:var(--brown);margin-bottom:5px;letter-spacing:-0.02em;}
.m-sub{font-size:0.84rem;color:var(--brown-light);margin-bottom:24px;}
.fulfilment-toggle{display:flex;gap:0;border:1.5px solid rgba(59,31,10,0.14);border-radius:40px;overflow:hidden;margin-bottom:20px;background:var(--cream);}
.ft-btn{flex:1;padding:10px 16px;background:transparent;border:none;font-family:'Bebas Neue',sans-serif;font-size:0.95rem;letter-spacing:0.12em;color:var(--brown);opacity:0.5;cursor:pointer;transition:background 0.2s,opacity 0.2s;}
.ft-btn.active{background:var(--yellow);opacity:1;border-radius:40px;}
.delivery-fields{display:none;margin-bottom:20px;}
.delivery-fields.show{display:block;}
.delivery-note{background:rgba(245,197,24,0.12);border:1.5px solid rgba(245,197,24,0.35);border-radius:10px;padding:12px 14px;font-size:0.8rem;color:var(--brown);line-height:1.6;margin-bottom:10px;}
.pickup-fields{display:block;}
.pickup-fields.hide{display:none;}
.m-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:20px;}
.m-card{border:2px solid rgba(59,31,10,0.12);border-radius:12px;padding:20px;text-align:center;transition:all 0.2s;background:var(--cream);cursor:pointer;}
.m-card:hover{border-color:var(--green-mid);background:rgba(74,124,36,0.05);}
.m-card.selected{border-color:var(--green);background:rgba(74,124,36,0.08);}
.m-icon{font-size:1.8rem;margin-bottom:7px;display:block;}
.m-name{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.1em;color:var(--brown);margin-bottom:3px;}
.m-note{font-size:0.71rem;color:var(--brown-light);}
.fg{margin-bottom:17px;}
.fl{display:block;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--brown-mid);margin-bottom:6px;}
.fi2,.fs,.fta{width:100%;padding:11px 13px;border:1.5px solid rgba(59,31,10,0.14);border-radius:8px;font-family:'Barlow',sans-serif;font-size:0.92rem;color:var(--brown);background:var(--cream);transition:border-color 0.2s;outline:none;}
.fi2:focus,.fs:focus,.fta:focus{border-color:var(--green-mid);}
.fta{resize:vertical;min-height:72px;}
.os{background:var(--cream);border-radius:10px;padding:17px 20px;margin-bottom:20px;}
.or{display:flex;justify-content:space-between;font-size:0.86rem;color:var(--brown-mid);padding:4px 0;}
.or.tot{border-top:1px solid rgba(59,31,10,0.1);margin-top:7px;padding-top:12px;font-weight:700;color:var(--brown);font-size:0.98rem;}
.si{display:flex;align-items:center;gap:5px;margin-bottom:26px;}
.sd{width:7px;height:7px;border-radius:50%;background:rgba(59,31,10,0.12);transition:all 0.3s;}
.sd.active{background:var(--green);width:21px;border-radius:3px;}
.sd.done{background:var(--green-light);}
.mb{width:100%;padding:14px;border:none;border-radius:8px;font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:0.15em;transition:all 0.2s;cursor:pointer;}
.mb-p{background:var(--green);color:var(--yellow);}
.mb-p:hover{background:var(--thorn);}
.mb-s{background:transparent;color:var(--brown-mid);border:1.5px solid rgba(59,31,10,0.17);margin-top:8px;font-size:0.92rem;letter-spacing:0.08em;font-family:'Barlow',sans-serif;}
.mb-s:hover{border-color:var(--brown);color:var(--brown);}
.ss{text-align:center;padding:14px 0;}
.si2{width:70px;height:70px;background:rgba(74,124,36,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 18px;border:2px solid var(--green-light);}
.st{font-family:'Barlow',sans-serif;font-size:2rem;font-weight:700;font-style:italic;color:var(--brown);margin-bottom:7px;letter-spacing:-0.02em;}
.ssub{color:var(--brown-mid);line-height:1.7;margin-bottom:26px;font-size:0.88rem;}
.son{background:var(--cream);border-radius:8px;padding:13px;font-family:'Bebas Neue',sans-serif;font-size:1.35rem;letter-spacing:0.2em;color:var(--green);margin-bottom:20px;}

/* CART (shared cart.js list rendering, inside modal step 1) */
.cart-list{margin-bottom:20px;}
.cart-line{display:flex;align-items:center;gap:10px;background:var(--cream);border-radius:10px;padding:12px 14px;margin-bottom:8px;}
.cart-line-info{flex:1;min-width:0;}
.cart-line-name{font-weight:700;font-size:0.88rem;color:var(--brown);}
.cart-line-size{font-size:0.74rem;color:var(--brown-light);margin-top:1px;}
.cart-line-qty{display:flex;align-items:center;gap:0;border:1.5px solid rgba(59,31,10,0.14);border-radius:40px;overflow:hidden;background:#fff;flex-shrink:0;}
.cart-line-qty button{width:26px;height:26px;background:transparent;border:none;font-size:1rem;color:var(--brown);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.cart-line-qty button:hover{background:rgba(59,31,10,0.07);}
.cart-line-qty span{min-width:20px;text-align:center;font-weight:700;font-size:0.82rem;}
.cart-line-price{font-weight:700;font-size:0.84rem;color:var(--brown);min-width:64px;text-align:right;flex-shrink:0;}
.cart-line-remove{width:26px;height:26px;flex-shrink:0;background:transparent;border:none;color:var(--brown-light);font-size:0.9rem;cursor:pointer;border-radius:50%;transition:background 0.15s,color 0.15s;}
.cart-line-remove:hover{background:rgba(192,57,43,0.1);color:#C0392B;}
.cart-subtotal{display:flex;justify-content:space-between;font-weight:700;font-size:0.95rem;color:var(--brown);padding:10px 2px 4px;}
.cart-empty{text-align:center;padding:28px 10px;color:var(--brown-light);font-size:0.88rem;line-height:1.6;}
/* bottom:104px (not 28px) so this clears the .shop-cart-bar sitting at
   bottom:28px on shop.html instead of overlapping it — both can be
   visible at the same time right after an "Add to Order" click. */
.cart-toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--green);color:#fff;font-family:inherit;font-size:0.88rem;font-weight:600;padding:12px 24px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;z-index:9999;white-space:nowrap;}
.cart-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#soldout-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(16px);background:#1a0a00;color:#fff;font-family:inherit;font-size:0.92rem;padding:12px 24px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;z-index:9999;white-space:nowrap;}
#soldout-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media(max-width:860px){
  .m-cards{grid-template-columns:1fr;}
  .modal{padding:26px 18px;}
}

/* ── PRODUCT PAGE — ported from ../product.html, nav/footer/modal swapped
   for the redesign's shared ones; checkout itself lives on shop.html only,
   so there's no cart/order modal on this page — "Order Now" adds to the
   shared cart then sends the visitor straight to shop.html. ──────────── */
.bc{padding:18px 48px 0;display:flex;align-items:center;gap:8px;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--brown-light);}
.bc a{color:var(--brown-mid);transition:color 0.2s;}
.bc a:hover{color:var(--green-mid);}
.bc-sep{opacity:0.35;}

.ph{padding:44px 48px 80px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;max-width:1200px;margin:0 auto;}
.ph-img-wrap{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:1/1;background:#fff;border:1.5px solid rgba(59,31,10,0.08);}
.ph-img-wrap.less-bg{background:radial-gradient(ellipse at 60% 70%,#A8D458 0%,#6B9E2A 35%,#3A6A12 70%,#0D2205 100%);}
.ph-img-wrap img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:24px;}
.ph-img-badge{position:absolute;top:20px;left:20px;background:var(--yellow);color:var(--brown);font-size:0.62rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding:5px 13px;border-radius:40px;border:1.5px solid rgba(59,31,10,0.15);}
.ph-stats{display:flex;align-items:center;margin-top:20px;border-top:1.5px solid rgba(59,31,10,0.1);padding-top:20px;}
.ph-img-disclaimer{font-size:0.74rem;font-style:italic;color:var(--brown-mid);line-height:1.5;margin-top:14px;text-align:center;}
.ph-stat{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;}
.ph-stat-num{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--brown);line-height:1;letter-spacing:0.04em;}
.ph-stat-unit{font-size:0.65rem;color:var(--brown-light);letter-spacing:0.06em;margin-top:-2px;}
.ph-stat-lbl{font-size:0.65rem;color:var(--brown-light);letter-spacing:0.05em;text-transform:uppercase;}
.ph-stat-div{width:1px;height:40px;background:rgba(59,31,10,0.12);flex-shrink:0;}
.ph-features{display:grid;grid-template-columns:1fr 1fr;background:rgba(59,31,10,0.04);border:1.5px solid rgba(59,31,10,0.09);border-radius:12px;padding:20px 24px;margin-bottom:20px;gap:10px 16px;margin-top:25px;}
.ph-feat-item{font-size:0.84rem;color:var(--brown-mid);line-height:1.4;}
.ph-divider{height:1px;background:rgba(59,31,10,0.1);margin:8px 0;}
.ph-accordion{border-top:1.5px solid rgba(59,31,10,0.1);}
.ph-acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:10px 0;background:transparent;border:none;font-family:'Barlow',sans-serif;font-size:0.92rem;font-weight:500;color:var(--brown);cursor:pointer;letter-spacing:0.01em;}
.ph-acc-trigger:hover{color:var(--green);}
.ph-acc-icon{font-size:1.3rem;font-weight:300;color:var(--brown-light);transition:transform 0.2s;}
.ph-acc-icon.open{transform:rotate(45deg);}
.ph-acc-body{padding-bottom:20px;}
.ph-acc-section{margin-bottom:16px;}
.ph-acc-head{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--brown-mid);margin-bottom:6px;}
.ph-acc-body p{font-size:0.85rem;color:var(--brown-mid);line-height:1.65;margin:0;}
.ph-acc-note{font-size:0.75rem;color:var(--brown-light);margin-bottom:10px;}
.ph-acc-nut{width:100%;border-collapse:collapse;font-size:0.8rem;}
.ph-acc-nut thead td{color:var(--brown-light);font-size:0.7rem;letter-spacing:0.06em;padding:4px 0;text-align:right;}
.ph-acc-nut thead td:first-child{text-align:left;}
.ph-acc-nut tr{border-top:1px solid rgba(59,31,10,0.07);}
.ph-acc-nut td{padding:5px 0;color:var(--brown-mid);}
.ph-acc-nut td:not(:first-child){text-align:right;}
.ph-acc-nut .nut-big td{font-weight:600;color:var(--brown);}
.ph-acc-nut .nut-sub td:first-child{padding-left:14px;font-size:0.75rem;}
.ph-acc-nut tfoot td{font-size:0.68rem;color:var(--brown-light);padding-top:8px;}
.ph-title-row{display:flex;align-items:flex-end;gap:20px;margin-bottom:8px;}
.ph-price-tag{padding-bottom:6px;flex-shrink:0;}
.ph-price-tag strong{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:var(--brown);letter-spacing:0.04em;}
.ph-info{display:flex;flex-direction:column;gap:0;}
.ph-eyebrow{font-size:0.68rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--green-mid);font-weight:500;margin-bottom:10px;display:flex;align-items:center;gap:10px;}
.ph-eyebrow::before{content:'';display:block;width:22px;height:1.5px;background:var(--green-mid);}
.ph-name{font-family:'Bebas Neue',sans-serif;font-size:clamp(3.6rem,6vw,6.4rem);letter-spacing:0.04em;color:var(--brown);line-height:0.92;margin-bottom:8px;}
.ph-sub{font-size:0.94rem;color:var(--brown-mid);line-height:1.7;margin-bottom:24px;max-width:440px;}
.ph-label{font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--brown-mid);margin-bottom:10px;display:block;}
.ph-sz-row{display:flex;gap:10px;margin-top:12px;}
.ph-sz{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 12px;border:1.5px solid rgba(59,31,10,0.13);border-radius:16px;background:#fff;cursor:pointer;transition:border-color 0.18s,background 0.18s,box-shadow 0.18s;text-align:center;}
.ph-sz.active{border-color:var(--green);background:rgba(107,158,42,0.06);box-shadow:0 0 0 3px rgba(107,158,42,0.15);}
.ph-sz:hover:not(.active){border-color:rgba(59,31,10,0.3);background:rgba(59,31,10,0.02);}
.ph-sz-img{width:88px;height:88px;object-fit:contain;}
.ph-sz-name{font-family:'Barlow',sans-serif;font-size:0.8rem;font-weight:700;color:var(--brown);letter-spacing:0.02em;line-height:1.2;}
.ph-sz-price{font-family:'Barlow',sans-serif;font-size:0.75rem;font-weight:400;color:var(--brown-mid);margin-top:2px;}
.ph-flavours{display:flex;gap:8px;margin-bottom:24px;}
.ph-flv-switcher{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.ph-flv-btn{padding:7px 18px;border:1.5px solid rgba(59,31,10,0.18);border-radius:40px;background:transparent;font-family:'Barlow',sans-serif;font-size:0.82rem;font-weight:500;color:rgba(59,31,10,0.55);cursor:pointer;transition:all 0.2s;}
.ph-flv-btn.active,.ph-flv-btn:hover:not(.ph-flv-btn--soon){border-color:var(--brown);background:var(--brown);color:var(--cream);}
.ph-flv-btn--soon{opacity:0.38;cursor:default;}
.ph-coming-soon-box{background:#FAF6EE;border:1.5px solid rgba(59,31,10,0.14);border-radius:14px;padding:20px;text-align:center;margin-top:4px;}
.ph-coming-soon-box strong{font-family:'Barlow',sans-serif;font-size:1.05rem;font-weight:500;letter-spacing:1px;display:block;margin-bottom:6px;}
.ph-coming-soon-box p{font-size:0.82rem;color:rgba(59,31,10,0.55);line-height:1.6;margin-bottom:14px;}
.ph-order-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--yellow);color:var(--brown);font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:0.2em;padding:14px 32px;border-radius:50px 44px 52px 46px;border:2.5px solid var(--brown);transition:transform 0.2s,box-shadow 0.2s;position:relative;overflow:hidden;cursor:pointer;}
.ph-order-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,0.2) 50%,transparent 60%);transform:translateX(-100%);transition:transform 0.5s;}
.ph-order-btn:hover::after{transform:translateX(100%);}
.ph-order-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(245,197,24,0.4);}
.ph-order-btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none;}

@media(max-width:860px){
  .ph{grid-template-columns:1fr;padding:24px 24px 48px;gap:32px;}
  .bc{padding-left:24px;padding-right:24px;}
}

/* Admin-controlled announcement popup (ported from the live site) */
.ann-overlay{display:none;position:fixed;inset:0;z-index:900;background:rgba(18,8,2,0.70);backdrop-filter:blur(8px);align-items:center;justify-content:center;padding:20px;}
.ann-overlay.open{display:flex;}
.ann-card{position:relative;width:min(864px,74vw,74vh);aspect-ratio:1/1;background:var(--cream);border-radius:16px;overflow:hidden;}
.ann-close{position:absolute;top:20px;right:20px;z-index:10;width:40px;height:40px;border-radius:50%;border:none;background:rgba(59,31,10,0.12);color:var(--brown);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s ease,transform 0.2s ease;}
.ann-close:hover{background:rgba(59,31,10,0.22);transform:scale(1.1);}
.ann-close:active{transform:scale(0.95);}