/* =========================================================
   DOSTII DELIGHT — shared stylesheet
   Swap the brand tokens below once exact colors/fonts arrive.
   ========================================================= */

:root {
  /* Brand palette (defaults — replace with exact brand hex) */
  --saffron:   #F0A500;   /* primary accent  */
  --chili:     #9E1B1B;   /* deep maroon     */
  --chili-dk:  #6E1212;
  --cream:     #FFF7EC;   /* page background */
  --cream-2:   #FBEFD9;
  --leaf:      #4F7A3A;   /* curry-leaf green accent */
  --ink:       #2A1A12;   /* primary text   */
  --ink-soft:  #5b463b;

  --maxw: 1200px;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(110, 18, 18, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Fraunces", "Georgia", serif;     /* headings */
  --font-body:    "Plus Jakarta Sans", system-ui, sans-serif; /* body */
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Lenis smooth-scroll requirement */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* ---------- layout helpers ---------- */
.container { width: min(100% - 3.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; z-index: 1; }
.section > .container { position: relative; z-index: 3; }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--chili); margin-bottom: 1rem;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; }
h1 { font-size: clamp(2.0rem, 6vw, 4.8rem); }
h2 { font-size: clamp(1.6rem, 4vw, 3.0rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
.lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }

.grid-2 {
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}
.grid-split-12 {
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 3rem;
}
.align-start {
  align-items: start !important;
}

/* ---------- buttons ---------- */
.btn {
  --bg: var(--chili); --fg: #fff;
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: var(--bg); color: var(--fg);
  padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 700;
  border: 2px solid var(--bg); cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(158, 27, 27, 0.28);
  background: var(--chili-dk);
  border-color: var(--chili-dk);
}
.btn:active {
  transform: translateY(-1px) scale(0.98);
  box-shadow: 0 6px 15px rgba(158, 27, 27, 0.15);
}
.btn--ghost { --bg: transparent; --fg: var(--chili); border-color: var(--chili); }
.btn--ghost:hover { background: var(--chili); border-color: var(--chili); color: #fff; }
.btn--saffron { --bg: var(--saffron); --fg: var(--ink); border-color: var(--saffron); }
.btn--saffron:hover { background: var(--chili); border-color: var(--chili); color: #fff; }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 1.1rem 0;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s;
}
.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header.scrolled {
  background: rgba(255,247,236,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(110,18,18,.07);
  padding-block: .7rem;
}
.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--chili); }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a { font-weight: 600; position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--chili); transition: width .3s var(--ease);
}
.nav a:hover::after, .nav a.active::after { width: 100%; }
.nav-cta { display: inline-flex; }
.nav-toggle {
  display: none;
  background: var(--cream-2);
  color: var(--chili);
  border: 1px solid rgba(158, 27, 27, 0.15);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(110, 18, 18, 0.08);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 60;
}
.nav-toggle:hover {
  background: var(--chili);
  color: #fff;
  transform: scale(1.05);
}
.nav-close {
  display: none;
}

/* Navigation Overlay Backdrop */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42, 26, 18, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- hero (home) ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; text-align: left; }
#hero-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }
.hero-content { position: relative; z-index: 3; width: 100%; padding: 6rem 0 0; max-width: 560px; }
.hero h1 span { color: var(--chili); font-style: italic; }
.hero .lead { margin: 1.4rem 0 2.2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: flex-start; flex-wrap: wrap; }

/* Mobile video replaces 3D canvas — hidden on desktop */
.hero-video-mobile { display: none; }
.hero-video-mobile video {
  max-width: min(280px, 78vw);
  max-height: 44vh;
  object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 24px 48px rgba(110,18,18,0.22));
}

@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding-block: 0;
    height: auto;
    min-height: auto;
  }
  .hero-content {
    max-width: 100%;
    padding-top: 5.5rem;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .hero .lead { margin: 1.4rem auto 2.2rem; }
  .hero-actions { justify-content: center; padding-bottom: 2.5rem; }
}
.scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); opacity: .8; }
.scroll-hint::after { content: ""; display: block; width: 1px; height: 36px; margin: .6rem auto 0; background: var(--chili); animation: scrollpulse 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes scrollpulse { 0%,100%{transform:scaleY(.3);opacity:.3} 50%{transform:scaleY(1);opacity:1} }

/* ---------- badges row ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.badge {
  background: #fff; border: 1px solid var(--cream-2); border-radius: 999px;
  padding: .5rem 1rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft);
  box-shadow: 0 4px 14px rgba(110,18,18,.05);
  display: inline-flex; align-items: center; gap: .4rem;
}

/* Override excessive padding for homepage sections to tighten layout */
#sec-badges {
  padding-block: 2rem 1rem;
}
#sec-product {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ---------- generic cards / grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  box-shadow: var(--shadow); border: 1px solid var(--cream-2);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-6px); }
.card .icon { font-size: 2rem; margin-bottom: .8rem; }

/* ---------- stats ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; text-align: center; }
.stat .num { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.6rem); color: var(--chili); line-height: 1; }
.stat .label { font-weight: 600; color: var(--ink-soft); margin-top: .4rem; }

/* ---------- section banding ---------- */
.band-cream { background: var(--cream-2); }
.band-chili { background: var(--chili); color: #fff; }
.band-chili .eyebrow { color: var(--saffron); }
.band-chili .lead { color: rgba(255,255,255,.85); }

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: clamp(6.0rem, 11vw, 8.5rem) 0 3rem; text-align: center; }

/* ---------- video showcase ---------- */
/* z-index: 3 lifts the section above the fixed 3D canvas (z-index: 2) */
#sec-video { z-index: 3; }
.video-showcase__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.video-showcase__player {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  display: block;
}
.video-showcase__text .lead { color: rgba(255,255,255,0.8); max-width: 42ch; }
@media (max-width: 992px) {
  .video-showcase__wrap { grid-template-columns: 1fr; gap: 2rem; }
  .video-showcase__text { order: -1; text-align: center; }
  .video-showcase__text .lead { margin-inline: auto; }
  .video-showcase__player { max-height: 56vw; object-fit: cover; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #f4e9df; padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.site-footer h4 { font-family: var(--font-display); color: #fff; margin-bottom: 1rem; }
.site-footer a:hover { color: var(--saffron); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; opacity: .75; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---------- scroll reveal ---------- */
/* Content stays visible when the animation CDNs are unavailable. */
.motion-ready .reveal { opacity: 0; transform: translateY(16px); }

/* ---------- responsive ---------- */
@media (max-width: 992px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  
  .grid-2, .grid-split-12 {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }

  .grid-reverse-md {
    display: flex !important;
    flex-direction: column-reverse !important;
  }

  .site-header {
    padding: 1.2rem 0;
  }

  /* A backdrop filter makes fixed descendants relative to the header in Safari. */
  .site-header.scrolled {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle {
    display: inline-flex;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  
  /* Hide the toggle button when navigation drawer is open to prevent overlapping */
  .nav.open ~ .nav-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
  }

  .nav-close {
    display: flex;
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    background: rgba(198, 40, 40, 0.08);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--chili);
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
  }
  .nav-close:hover {
    background: var(--chili);
    color: #fff;
    transform: rotate(90deg);
  }

  .nav {
    position: fixed;
    inset: 0 0 auto auto;
    width: min(80vw, 300px);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--cream);
    padding: 4.8rem 1.8rem 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(0.32, 0, 0.15, 1);
    box-shadow: -6px 0 40px rgba(110, 18, 18, 0.13);
    border-left: 3px solid var(--chili);
    z-index: 55;
    gap: 0;
  }
  .nav::before {
    content: "Pyaarisi Namkeen Dostii!";
    position: absolute;
    top: 1.55rem;
    left: 1.8rem;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: var(--chili);
    opacity: 0.5;
    text-transform: uppercase;
  }
  .nav.open { transform: translateX(0); }

  .nav a {
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    width: 100%;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(42, 26, 18, 0.07);
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateX(14px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.15s ease, background 0.15s ease, padding 0.15s ease;
  }
  .nav a::after { display: none; }
  .nav a:last-of-type { border-bottom: none; }

  /* Stagger links in on open */
  .nav.open a:nth-of-type(1) { opacity: 1; transform: none; transition-delay: 0.07s; }
  .nav.open a:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 0.13s; }
  .nav.open a:nth-of-type(3) { opacity: 1; transform: none; transition-delay: 0.19s; }
  .nav.open a:nth-of-type(4) { opacity: 1; transform: none; transition-delay: 0.25s; }
  .nav.open a:nth-of-type(5) { opacity: 1; transform: none; transition-delay: 0.31s; }
  .nav.open a:nth-of-type(6) { opacity: 1; transform: none; transition-delay: 0.37s; }

  .nav-cta {
    margin-top: 1.8rem;
    width: 100%;
    justify-content: center;
    background: var(--chili) !important;
    color: #fff !important;
    border-color: var(--chili) !important;
    white-space: nowrap;
    font-size: 0.88rem;
    padding: 0.82rem 1.2rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease !important;
  }
  .nav.open .nav-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.43s !important;
  }
  .nav-cta:hover {
    background: #8b0000 !important;
    transform: translateY(-1px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- 3D Scroll Utilities ---------- */
/* Hide static product image on desktop only when 3D is active */
@media (min-width: 993px) {
  .webgl-active #sec-product img {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
  }
}

.spacer-3d {
  height: 300px;
}

/* Crop static backside product shadow in case of fallback */
.fallback-3d-img[src*="back"] {
  clip-path: inset(0px 0px 7.5% 0px);
  margin-bottom: -7.5%;
}

/* Fallback images for mobile/tablet when WebGL is inactive or hidden */
.fallback-3d-img {
  display: none;
  max-height: 380px;
  margin: 0 auto;
  filter: drop-shadow(0 15px 30px rgba(110, 18, 18, 0.15));
}

.hero-fallback-image {
  display: none;
  width: min(360px, 80vw);
  margin: 1.5rem auto 0;
  filter: drop-shadow(0 20px 45px rgba(110, 18, 18, 0.18));
}

.hero-fallback-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 992px) {
  /* Badges: 2 columns side-by-side, centered */
  #sec-badges .badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  #sec-badges .badge {
    justify-content: center;
    text-align: center;
  }

  /* Hide 3D canvas and fallback image on mobile — hero is text/CTA only */
  #hero-canvas { display: none; }
  .hero-fallback-image,
  body.webgl-active .hero-fallback-image { display: none !important; }

  /* Hide ingredients section spacer — user sees the same product image 3× otherwise */
  #sec-ingredients .spacer-3d {
    display: none;
  }

  .spacer-3d.desktop-3d-spacer {
    display: none;
    min-height: 0;
  }

  /* Set spacer height to fit inline fallback images where still used */
  .spacer-3d {
    height: auto;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Hide hero fallback when 3D canvas is running (all screen sizes) */
body.webgl-active .hero-fallback-image {
  display: none !important;
}

@media (max-width: 600px) {
  /* Collapse layout grids to single column on mobile */
  .grid {
    grid-template-columns: 1fr !important;
  }
  .spacer-3d {
    height: 300px;
  }
}

.nav-toggle svg, .nav-close svg {
  display: block;
  pointer-events: none; /* Let the button handle the clicks */
}

/* ---------- enquiry form feedback ---------- */
.form-status {
  min-height: 1.5rem;
  font-size: 0.92rem;
  font-weight: 600;
}
.form-status.is-success { color: var(--leaf); }
.form-status.is-error { color: var(--chili); }
#enquiry-form .btn:disabled { opacity: 0.65; cursor: wait; }
.form-honeypot { position: absolute !important; left: -9999px !important; }

/* ---------- stats contrast on red bg ---------- */
.band-chili .stat .num {
  color: var(--saffron);
  text-shadow: 0 2px 10px rgba(110, 18, 18, 0.2);
}
.band-chili .stat .label {
  color: rgba(255, 255, 255, 0.9);
}

/* ---------- alignment helper ---------- */
.flex-center {
  justify-content: center !important;
}

/* ---------- inline SVG icons ---------- */
.icon-svg {
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  margin-right: 6px;
  flex-shrink: 0;
}
.badge .icon-svg {
  margin-top: -2px;
  margin-right: 8px;
}
.veg-symbol {
  margin-top: -3px;
}

/* ---------- utility: text align ---------- */
.text-center { text-align: center; }

/* ---------- utility: margins ---------- */
.mt-sm  { margin-top: 1rem; }
.mt-md  { margin-top: 1.5rem; }
.mt-lg  { margin-top: 2rem; }
.mt-xl  { margin-top: 2.5rem; }
.mb-sm  { margin-bottom: 1rem; }
.mb-md  { margin-bottom: 1.5rem; }
.mb-lg  { margin-bottom: 2rem; }
.mb-xl  { margin-bottom: 2.5rem; }

/* ---------- section intro block ---------- */
.section-intro { text-align: center; margin-bottom: 3.5rem; }
.section-intro .lead { margin: 1rem auto 0; max-width: 600px; }

/* ---------- alternate section band ---------- */
.section--alt { background: rgba(251, 239, 217, 0.45); }

/* ---------- product image ---------- */
.product-img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 450px;
  display: block;
  margin: 0 auto;
}
.product-img--card {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 260px;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 15px 25px rgba(110, 18, 18, 0.15));
}

/* ---------- small button ---------- */
.btn.btn--sm { padding: 0.5rem 1.2rem; font-size: 0.9rem; }

/* ---------- badges left-aligned ---------- */
.badges--left { justify-content: flex-start; }
@media (max-width: 992px) { .badges--left { justify-content: center; } }

/* ---------- eyebrow color variants ---------- */
.eyebrow--saffron { color: var(--saffron); }
.eyebrow--leaf    { color: var(--leaf); }

/* ---------- range card (homepage product grid) ---------- */
.range-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 2.5rem 2rem; }
.range-card .eyebrow { font-size: 0.7rem; margin-bottom: 0.4rem; }
.range-card__media { margin-bottom: 1.5rem; text-align: center; }
.range-card__body  { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.range-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(42, 26, 18, 0.06);
}
.range-card__name-hi { font-weight: 700; color: var(--chili); }

/* ---------- story page subheadings ---------- */
.story-h2 {
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: var(--chili);
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
}

/* ---------- content list (ingredients / product SEO) ---------- */
.content-list {
  margin-top: 1.2rem;
  display: grid;
  gap: 0.8rem;
  color: var(--ink-soft);
  font-size: 1rem;
  list-style-type: disc;
  padding-left: 1.5rem;
}

/* ---------- active nav: mobile indicator ---------- */
@media (max-width: 992px) {
  .nav a.active {
    color: var(--chili);
    background: rgba(198, 40, 40, 0.06);
    border-left: 3px solid var(--chili);
    padding-left: 0.75rem;
    margin-left: -3px;
    border-radius: 0 6px 6px 0;
  }
  .nav a:not(.nav-cta):hover {
    color: var(--chili);
    padding-left: 0.4rem;
  }
}

/* ---------- FAQ section ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
}
@media (max-width: 768px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
.faq-item {
  background: #fff;
  border-radius: var(--radius);
  padding: 1.8rem 2rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--cream-2);
}

/* Override default h3 margin inside accordion */
.faq-item h3 { margin-bottom: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Accordion trigger button */
.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0;
  gap: 1rem;
  color: var(--chili);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.faq-question:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-chevron {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--saffron);
  transition: transform 0.35s var(--ease);
}
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

/* Accordion body — uses CSS grid trick for smooth height animation */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-answer__inner { overflow: hidden; }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-answer p {
  padding-top: 0.8rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}

/* =========================================================
   WhatsApp Float + Mobile Sticky Bar
   ========================================================= */
.wa-float {
  position: fixed;
  bottom: 2rem;
  right: 1.5rem;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(37,211,102,0.4);
  z-index: 998;
  transition: transform 0.2s ease;
  animation: wa-pulse 2.5s ease-in-out infinite;
  text-decoration: none;
}
.wa-float:hover { transform: scale(1.1); }
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,0.4); }
  50%      { box-shadow: 0 6px 40px rgba(37,211,102,0.78); }
}

.mobile-sticky-bar { display: none; }

@media (max-width: 992px) {
  .wa-float { display: none; }
  .mobile-sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px)); }
}

.mobile-sticky-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  text-decoration: none;
  transition: filter 0.15s;
}
.mobile-sticky-bar__btn:hover,
.mobile-sticky-bar__btn:active { filter: brightness(1.12); }
.mobile-sticky-bar__btn--wa   { background: #25D366; }
.mobile-sticky-bar__btn--call { background: var(--chili); }

/* =========================================================
   Recipe / Serving Suggestions Section
   ========================================================= */
#sec-recipes { background: #fff; }
#sec-recipes .section-intro { text-align: center; max-width: 50ch; margin: 0 auto 3.5rem; }

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.recipe-card {
  background: var(--cream);
  border-radius: 24px;
  padding: 2.2rem 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.recipe-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--saffron);
  border-radius: 24px 24px 0 0;
}
.recipe-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(42,26,18,.1); }

.recipe-card__num {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--saffron);
  opacity: 0.25;
  margin-bottom: -0.5rem;
}
.recipe-card__occasion {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chili);
}
.recipe-card h3 {
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.recipe-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.recipe-card__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(42,26,18,.1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--chili);
  line-height: 1.4;
}
.recipe-card__tip svg { flex-shrink: 0; margin-top: 2px; }

@media (max-width: 992px) {
  .recipe-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* =========================================================
   Distributor / Wholesale Section
   ========================================================= */
#sec-distributor { background: var(--ink); color: #f4e9df; z-index: 3; }

.dist-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.dist-intro .lead { color: rgba(244,233,223,0.8); max-width: 44ch; margin-top: 1rem; }
.dist-perks {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.dist-perks li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: rgba(244,233,223,0.85);
}
.dist-perks li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--saffron) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
}
.dist-form {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  display: grid;
  gap: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.dist-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dist-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.dist-form input,
.dist-form textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid rgba(42,26,18,0.15);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.dist-form input:focus,
.dist-form textarea:focus { outline: none; border-color: var(--chili); }
.dist-form textarea { resize: vertical; min-height: 80px; }
.dist-form .btn { width: 100%; justify-content: center; }
.dist-status { text-align: center; font-size: 0.9rem; min-height: 1.2em; color: var(--ink-soft); }
.dist-status.is-error { color: var(--chili); }

/* ---- Form success animation ---- */
.dist-success-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem 0.5rem; gap: 1rem;
}
.dist-check-circle { width: 76px; height: 76px; }
.dist-check-bg { fill: #f0fdf4; }
.dist-check-ring {
  fill: none; stroke: #22c55e; stroke-width: 3.5;
  stroke-dasharray: 189; stroke-dashoffset: 189;
  stroke-linecap: round;
  animation: dist-ring 0.65s 0.1s cubic-bezier(.4,0,.2,1) forwards;
}
.dist-check-tick {
  fill: none; stroke: #22c55e; stroke-width: 4;
  stroke-dasharray: 50; stroke-dashoffset: 50;
  stroke-linecap: round; stroke-linejoin: round;
  animation: dist-tick 0.35s 0.72s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes dist-ring { to { stroke-dashoffset: 0; } }
@keyframes dist-tick { to { stroke-dashoffset: 0; } }
.dist-success-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.25rem; color: var(--ink);
  opacity: 0; animation: dist-text-in 0.4s 0.95s ease forwards;
}
.dist-success-body {
  color: rgba(42,26,18,.6); font-size: .95rem;
  opacity: 0; animation: dist-text-in 0.4s 1.1s ease forwards;
}
@keyframes dist-text-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 992px) {
  .dist-wrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .dist-form .form-row { grid-template-columns: 1fr; }
  .dist-intro .lead { max-width: 100%; }
}