/* Eateryy Box - brand layer.
 *
 * Loaded last, after theme-base.css (the inherited component layer). Most of the re-skin is a
 * remap of the :root tokens every component already reads; the rest restyles the pieces whose
 * look was baked into the old theme and adds the home page sections (.eb-*).
 *
 * Everything here comes off the pack:
 *   box purple  #601A88  the wordmark - primary, buttons, headings on white
 *   pouch green #1B8A62  the pouch panel - the diagonal field, links, stock, steps
 *   haldi       #F0B429  the "Ghar jaisa khana!" gold - one accent, buttons on dark only
 *   paper       #F1F6F3  a green-tinted white for tinted bands
 *   ink         #1E1631  purple-black text
 * Type is the logo's own face, Avant Garde (TeX Gyre Adventor), regular and bold only.
 * The one bold move is the pack's diagonal cut: behind the hero packs and on the Jain band.
 * Nothing else gets decoration.
 */

:root {
  --navy: #601A88;
  --navy-dark: #4A1369;
  --ink: #1E1631;
  --ink-deep: #2B0E40;
  --orange: #F0B429;
  --orange-dark: #D99A12;
  --amber: #F6C955;
  --cyan: #1B8A62;

  --body: #3E3A4B;
  --muted: #6E6A7C;
  --muted-strong: #565166;
  --line: #E1E8E4;
  --line-strong: #C7D6CE;
  --tint: #E6F1EC;
  --paper: #F1F6F3;
  --white: #fff;

  --ivory: #FFFFFF;
  --leaf: #1B8A62;
  --earth: #601A88;
  --tan: #F0B429;
  --sage-soft: #E3F2EB;
  --haldi-soft: #FDF1D2;
  --earth-soft: #F1E8F6;
  --gold-text: #8A5A00;

  --green: #1B8A62;
  --green-dark: #146B4C;
  --purple: #601A88;

  --radius: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(30, 22, 49, .06);
  --shadow: 0 1px 2px rgba(30, 22, 49, .05), 0 10px 26px rgba(30, 22, 49, .07);
  --shadow-lg: 0 2px 6px rgba(30, 22, 49, .06), 0 20px 44px rgba(30, 22, 49, .12);

  /* The logo face (Avant Garde, via Adventor) for everything; Manrope after it only supplies the
     rupee sign, which Adventor lacks. */
  --sans: Adventor, Manrope, "Segoe UI", system-ui, sans-serif;
  --serif: Adventor, Manrope, "Segoe UI", system-ui, sans-serif;
  --deva: Adventor, Manrope, sans-serif;

  --bs-primary: #601A88;
  --bs-primary-rgb: 96, 26, 136;
  --bs-success: #1B8A62;
  --bs-success-rgb: 27, 138, 98;
  --bs-warning: #F0B429;
  --bs-warning-rgb: 240, 180, 41;
  --bs-info: #601A88;
  --bs-info-rgb: 96, 26, 136;
  --bs-light: #F1F6F3;
  --bs-light-rgb: 241, 246, 243;
  --bs-dark: #1E1631;
  --bs-dark-rgb: 30, 22, 49;
  --bs-body-color: #3E3A4B;
  --bs-body-color-rgb: 62, 58, 75;
  --bs-border-color: #E1E8E4;
}

/* ---------- base ---------- */
body { background: #fff }
a { color: var(--green) }
a:hover { color: var(--purple) }
::selection { background: var(--haldi-soft); color: var(--ink) }
:focus-visible { outline-color: var(--purple) }

h1, h2, h3, h3.as-h2 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.025em;
  font-variation-settings: normal;
  color: var(--ink)
}
.on-dark h1, .on-dark h2, .on-dark h3, .section-dark h2, .section-dark h3 { color: #fff }

/* The pack sets dish names lowercase ("tasty poha"); section headings take the same voice. */
.eb-h {
  text-transform: lowercase;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -.025em;
  margin: 0 0 12px
}
.eb-h::first-letter { text-transform: none }

.eyebrow { color: var(--green); letter-spacing: .02em; text-transform: none; font-size: 14px }
.eyebrow::before { display: none }

.section { padding: 88px 0 }
.section-tint { background: var(--paper) }

/* Avant Garde bold closes up at small sizes; the inherited CSS tightened tracking for Manrope,
   so small UI text gets a touch of air back. */
.btn, .navlink, .eb-tabs [role=tab], .pcard-stock, .price-tax, .pcard-off, .pcard-offer,
.topbar, .hsearch input, .hsearch-scope, .crumbs, .eb-course-n, .eb-quote-by, .foot-links a { letter-spacing: .015em }

/* ---------- buttons ---------- */
.btn { border-radius: 12px; font-weight: 700; text-transform: none }
.btn-lg { padding: 17px 30px; font-size: 16px }
.btn-primary { background: var(--purple); color: #fff; box-shadow: none }
.btn-primary:hover { background: var(--navy-dark); color: #fff; box-shadow: none }
.btn-accent { background: var(--orange); color: var(--ink); box-shadow: none }
.btn-accent:hover { background: var(--amber); color: var(--ink) }
.btn-ghost { color: var(--purple); border-color: var(--line-strong); background: #fff }
.btn-ghost:hover { background: var(--purple); border-color: var(--purple); color: #fff }
.on-dark .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45) }
.on-dark .btn-ghost:hover { background: #fff; color: var(--purple); border-color: #fff }

/* ---------- header ---------- */
.topbar { background: var(--purple); color: rgba(255, 255, 255, .85) }
.topbar-promise i { color: var(--orange) }
.head::before { background: rgba(255, 255, 255, .96) }
.head-in { min-height: 80px }
.brand-logo { height: 56px; width: auto }
.head.is-compact .brand-logo { height: 42px }
.catbar { border-top: 1px solid var(--line) }
.navlink { color: var(--ink); font-size: 14.5px; font-weight: 700 }
.navlink:hover, .navlink.is-on { color: var(--purple) }
.navlink.nav-offer, .navlink.nav-offer i { color: var(--green) }
.hsearch button { background: var(--purple) }

/* Search bar: a fixed height, and a submit button that is a true circle. It inherited
   border-radius:50% on a 38px-wide button whose height came from the bar (29px), so it drew as a
   squashed oval; the browser's default button padding squeezed it further. */
.hsearch { height: 48px; align-items: center; border-radius: 999px }
.hsearch input { align-self: stretch; height: 100%; padding: 0 16px; font-size: 15px; line-height: normal }
.hsearch .hscope { align-self: stretch; display: flex }
.hsearch .hscope-btn { height: 100%; align-self: stretch }
.hsearch > button[type=submit] {
  flex: 0 0 40px; width: 40px; height: 40px; margin: 0 4px 0 0; padding: 0;
  align-self: center; border-radius: 50%; background: var(--purple); color: #fff
}
.hsearch > button[type=submit]:hover { background: var(--navy-dark); color: #fff }
.hsearch > button[type=submit] i { font-size: 15px }
.hsearch-scope { height: 100% }
@media (max-width: 860px) {
  .hsearch { height: 44px }
  .hsearch > button[type=submit] { flex-basis: 36px; width: 36px; height: 36px }
}
.cart-n { background: var(--green) }
.mega-thumb { background: var(--paper); overflow: hidden }
.mega-thumb img { width: 100%; height: 100%; object-fit: cover }
.nav-m-logo { height: 44px; width: auto }

/* Category bar (desktop only - the same <nav> is the phone drawer below 861px). Even spacing and
   no "|" separators; hover and the current page get a green bar on the bottom edge; the menu
   trigger is a rounded rectangle like every other button; Offer Zone sits apart on the right. */
@media (min-width: 861px) {
  .catbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff }
  .catbar-in { min-height: 58px }
  .catbar .mainnav { flex: 1; align-items: stretch; gap: 6px }
  .catbar .mainnav > a.navlink::before,
  .catbar .mainnav > .nav-m-eyebrow + a.navlink::before,
  .catbar .mainnav > .has-drop + a.navlink::before { display: none }
  .catbar .navlink { padding: 0 16px; font-size: 15px; font-weight: 700; color: var(--ink) }
  .catbar .navlink:hover, .catbar .navlink.is-on { color: var(--purple) }
  .catbar .mainnav > a.navlink::after { left: 16px; right: 16px; height: 3px; background: var(--green); border-radius: 3px 3px 0 0 }
  .catbar .mainnav > a.navlink:hover::after { transform: scaleX(1) }

  .catbar .has-mega .navlink-btn {
    align-self: center; height: 42px; margin: 0 18px 0 0; padding: 0 18px 0 16px; gap: 10px;
    border-radius: 12px; background: var(--purple); color: #fff; font-size: 15px
  }
  .catbar .has-mega .navlink-btn:hover, .catbar .has-mega.is-open .navlink-btn { background: var(--navy-dark); color: #fff }
  .catbar .has-mega .grid-ic { font-size: 15px; opacity: .9 }
  .catbar .has-mega .caret { font-size: 11px; margin-left: 2px }
  .head.is-compact .catbar .has-mega .navlink-btn { height: 36px }

  /* Offer Zone: last, pushed right, as a light green tag rather than a link among the pages. */
  .catbar .mainnav > a.navlink.nav-offer {
    order: 9; margin-left: auto; align-self: center; height: 38px; padding: 0 16px; gap: 8px;
    border-radius: 999px; background: var(--sage-soft); color: var(--green-dark)
  }
  .catbar .mainnav > a.navlink.nav-offer i { color: var(--green) }
  .catbar .mainnav > a.navlink.nav-offer:hover, .catbar .mainnav > a.navlink.nav-offer.is-on { background: var(--green); color: #fff }
  .catbar .mainnav > a.navlink.nav-offer:hover i, .catbar .mainnav > a.navlink.nav-offer.is-on i { color: #fff }
  .catbar .mainnav > a.navlink.nav-offer::after { display: none }
}

/* ---------- product cards: flat, image-led ---------- */
.pcard { border-radius: var(--radius-lg); border: 1px solid var(--line); background: #fff; box-shadow: none }
.pcard:hover { border-color: var(--line-strong); box-shadow: none }
.pcard-img { background: #fff !important; margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden }
.pcard-img img { transition: transform .35s var(--ease) }
.pcard:hover .pcard-img img { transform: scale(1.03) }
.pcard-name { font-family: var(--serif); font-weight: 700; font-size: 18px; letter-spacing: -.015em }
.pcard-name a { color: var(--ink) }
.pcard-off { background: var(--green) !important }
.pcard-stock { color: var(--green) }
.price { color: var(--ink); font-family: var(--serif) }
@media (prefers-reduced-motion: reduce) { .pcard-img img { transition: none } .pcard:hover .pcard-img img { transform: none } }

/* ---------- inner page banner: purple, quiet ---------- */
.phero { background: var(--purple); border-image: none; border-bottom: 0 }
.phero::before { background: none }
.phero-copy > h1::after { background: var(--orange) }
.crumbs a { color: var(--green) }
.phero .crumbs a, .crumbs-bare a { color: rgba(255, 255, 255, .8) }
.phero .crumbs a:hover, .crumbs-bare a:hover { color: var(--amber) }

/* ---------- dark sections and footer: deep purple, no glow ---------- */
.section-dark { background: var(--ink-deep) }
.section-dark::before { background: none }

.foot { background: var(--ink-deep); border-image: none; border-top: 6px solid var(--green) }
.foot::before { background: none }
.foot a:hover { color: var(--amber) }
.foot h4::after { background: var(--green) }
.foot-brand-logo { background: transparent; padding: 0 }
.foot-brand-logo img { height: 64px }
.foot h4, .foot-lbl { text-transform: none; letter-spacing: 0; font-size: 15px }
.foot-lbl { font-size: 13px; color: rgba(255, 255, 255, .6) }
.foot-ic { background: rgba(240, 180, 41, .14); color: var(--amber) }
.foot-brand-deva { font-family: var(--serif); font-weight: 700; color: var(--amber); font-size: 22px; letter-spacing: -.02em }

/* ---------- home: hero ----------
   Copy left; on the right, three packs on the pack's green diagonal, the middle one larger and in
   front, with one note card. Sentence-case headline, four trust points, no prices or counts. */
.eb-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #fff 0%, #FAFCFB 100%) }
.eb-hero-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 56px; min-height: 580px
}
.eb-hero-copy { padding: 72px 0; position: relative; z-index: 1 }
.eb-hero-kicker {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 22px;
  padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--sage-soft);
  font-size: 14px; color: var(--green-dark); font-weight: 700
}
.eb-hero-kicker span { padding: 5px 12px; border-radius: 999px; background: var(--purple); color: #fff }
.eb-hero h1 {
  margin: 0; max-width: 17ch;
  font-size: clamp(36px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -.02em;
  color: var(--ink); text-transform: none
}
.eb-hero-lede { margin: 20px 0 0; font-size: 18px; line-height: 1.65; max-width: 42ch; color: var(--muted-strong) }
.eb-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px }
.eb-hero-actions .btn-primary i { margin-left: 8px; font-size: 14px; transition: transform .2s var(--ease) }
.eb-hero-actions .btn-primary:hover i { transform: translateX(3px) }
.eb-hero-trust {
  list-style: none; margin: 40px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 36px;
  color: var(--ink); font-size: 15px; font-weight: 700
}
.eb-hero-trust li { display: flex; align-items: center; gap: 10px }
.eb-hero-trust i {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-soft); color: var(--green); font-size: 14px
}

.eb-hero-visual { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 56px 0 56px 40px }
.eb-hero-visual::before {
  content: ""; position: absolute; inset: 0 -50vw 0 0; z-index: 0;
  background: var(--green); clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%)
}
.eb-hero-packs { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: center }
.eb-hero-packs li { position: relative; transition: transform .3s var(--ease) }
.eb-hero-packs li:first-child { margin-right: -14%; transform: rotate(-4deg) translateY(18px) }
.eb-hero-packs li:last-child { margin-left: -14%; transform: rotate(4deg) translateY(18px) }
.eb-hero-packs li.is-front { z-index: 2 }
.eb-hero-packs a {
  display: block; background: #fff; border-radius: 18px; padding: 8px; text-decoration: none; color: var(--ink);
  box-shadow: 0 18px 40px rgba(20, 60, 45, .28)
}
.eb-hero-packs img { display: block; width: 100%; height: auto; border-radius: 12px }
.eb-hero-packs span { display: block; padding: 10px 6px 4px; font-weight: 700; font-size: 15px; text-align: center }
.eb-hero-packs li:not(.is-front) span { font-size: 13.5px }
.eb-hero-packs li:hover { z-index: 3 }
.eb-hero-packs li:first-child:hover { transform: rotate(-4deg) translateY(8px) }
.eb-hero-packs li:last-child:hover { transform: rotate(4deg) translateY(8px) }
.eb-hero-packs li.is-front:hover { transform: translateY(-8px) }
.eb-hero-packs a:hover span { color: var(--purple) }

.eb-hero-note {
  position: relative; z-index: 3; align-self: center; margin: 34px 0 0;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 28px rgba(20, 60, 45, .22); font-size: 14px; color: var(--muted-strong)
}
.eb-hero-note i {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--haldi-soft); color: var(--gold-text); font-size: 17px
}
.eb-hero-note strong { display: block; color: var(--ink); font-size: 15px }
@media (prefers-reduced-motion: reduce) { .eb-hero-packs li, .eb-hero-actions .btn-primary i { transition: none } }

/* ---------- home: courses ---------- */
.eb-courses { padding: 72px 0 24px }
.eb-courses-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap }
.eb-courses-intro { max-width: 760px }
.eb-courses-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px; background: rgba(27, 138, 98, .1); color: var(--green, #1B8A62);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase
}
.eb-courses-eyebrow i { font-size: 12px }
.eb-courses-head h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em }
/* The accent word: brand purple over a haldi brush stroke. */
.eb-courses-head h2 em {
  font-style: normal; color: var(--purple); position: relative; white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-courses-head p { margin: 0; color: var(--muted-strong); font-size: 16.5px; line-height: 1.6; padding-left: 14px; border-left: 3px solid var(--purple) }
.eb-courses-all {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 22px;
  border: 1.5px solid var(--purple); border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--purple); text-decoration: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease)
}
.eb-courses-all i { font-size: 13px; transition: transform .2s var(--ease) }
.eb-courses-all:hover { background: var(--purple); color: #fff }
.eb-courses-all:hover i { transform: translateX(3px) }

/* Each category is one framed card: photo on top, name + count + arrow below. The frame gives the
   photos a finished edge - their white lower half used to run straight into the page. */
.eb-course-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.eb-course {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}
.eb-course:hover { border-color: var(--purple); box-shadow: 0 14px 30px rgba(96, 26, 136, .12); transform: translateY(-3px); color: var(--ink) }
.eb-course:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px }
.eb-course-pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper) }
.eb-course-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease) }
.eb-course:hover .eb-course-pic img { transform: scale(1.05) }
.eb-course-tag {
  position: absolute; left: 10px; bottom: 10px;
  padding: 5px 10px; border-radius: 999px; background: var(--purple); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .015em; line-height: 1.2
}
.eb-course-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 16px 16px; border-top: 1px solid var(--line) }
.eb-course-txt { min-width: 0 }
.eb-course-name { display: block; font-weight: 700; font-size: 19px; line-height: 1.25; letter-spacing: -.01em }
.eb-course-n { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px }
.eb-course-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--purple); font-size: 13px;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease)
}
.eb-course:hover .eb-course-name { color: var(--purple) }
.eb-course:hover .eb-course-go { background: var(--purple); color: #fff; transform: translateX(2px) }

/* ---------- home: how it works (a real sequence, so numbered) ---------- */
.eb-how { padding: 80px 0; margin-top: 56px; background: var(--paper) }
.eb-how-head { text-align: center; max-width: 720px; margin: 0 auto 48px }
.eb-how-head h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em }
.eb-how-head p { margin: 0; font-size: 16.5px; color: var(--muted-strong) }

/* Three cards on one dashed line through the icons: the line is what says "in this order". */
.eb-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.eb-steps::before {
  content: ""; position: absolute; top: 56px; left: 16.66%; right: 16.66%; z-index: 0;
  border-top: 2px dashed var(--line-strong)
}
.eb-steps li {
  position: relative; z-index: 1; text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px 26px 30px
}
.eb-step-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 21px;
  box-shadow: 0 0 0 8px var(--sage-soft)
}
.eb-step-no { display: block; margin: 20px 0 6px; font-size: 13px; font-weight: 700; color: var(--green); letter-spacing: .03em }
.eb-steps h3 { font-size: 20px; margin: 0 0 8px; letter-spacing: -.01em }
.eb-steps p { margin: 0 auto; max-width: 30ch; font-size: 15px; line-height: 1.6; color: var(--muted-strong) }

.eb-how-alt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px;
  margin-top: 32px; font-size: 14.5px; color: var(--muted-strong)
}
.eb-how-alt-l { font-weight: 700; color: var(--ink) }
.eb-how-alt-i { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line) }
.eb-how-alt-i i { color: var(--purple) }
.eb-how-alt-i strong { color: var(--ink) }

/* ---------- home: menu shelf with course tabs ---------- */
/* Course tabs: one white segmented bar, the active course filled purple. */
.eb-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 32px; padding: 5px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(30, 22, 49, .05)
}
.eb-tabs [role=tab] {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 15px;
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--muted-strong);
  transition: background .2s var(--ease), color .2s var(--ease)
}
.eb-tabs [role=tab] i { font-size: 13px; color: var(--green); transition: color .2s var(--ease) }
.eb-tabs [role=tab]:hover { color: var(--purple); background: var(--earth-soft) }
.eb-tabs [role=tab][aria-selected=true] { background: var(--purple); color: #fff; box-shadow: 0 6px 16px rgba(96, 26, 136, .25) }
.eb-tabs [role=tab][aria-selected=true] i { color: var(--amber) }
.eb-tabs [role=tab]:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px }
.eb-tabs[hidden] { display: none }
.eb-shelf-head { margin-bottom: 28px }
@media (max-width: 600px) {
  .eb-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 22px }
  .eb-tabs::-webkit-scrollbar { display: none }
  .eb-tabs [role=tab] { flex: none; padding: 9px 16px; font-size: 14px }
}
@media (prefers-reduced-motion: reduce) { .eb-tabs [role=tab], .eb-tabs [role=tab] i { transition: none } }
.eb-panel + .eb-panel { margin-top: 48px }
.eb-shelf.has-tabs .eb-panel + .eb-panel { margin-top: 0 }
.eb-panel-h { font-size: 24px; margin: 0 0 18px }
.eb-shelf.has-tabs .eb-panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.eb-panel-more { margin: 22px 0 0; font-weight: 700 }

/* ---------- home: Jain band - the second diagonal ---------- */
.eb-jain {
  position: relative;
  /* The live site's purple vegetable-sketch pattern, as on the offers panel, toned right down
     under a purple wash so it stays a texture behind the text and cards. */
  background:
    linear-gradient(rgba(96, 26, 136, .82), rgba(96, 26, 136, .82)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat;
  color: rgba(255, 255, 255, .86);
  padding: 120px 0 88px
}
/* The slanted top edge, drawn as a triangle in the colour of the section above (the bestseller
   shelf's paper) so the two sections join with no white gap. */
.eb-jain::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 65px; pointer-events: none;
  background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%)
}
.eb-jain > .wrap { position: relative; z-index: 1 }
.eb-jain-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: end; margin-bottom: 36px }
.eb-jain-head .eb-h { color: #fff; max-width: 24ch; grid-column: 1 }
.eb-jain-head p { margin: 0; grid-column: 1; max-width: 52ch; font-size: 16.5px }
.eb-jain-head .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end }
.eb-jain .slider-btn { background: #fff; color: var(--purple) }

/* ---------- home: who it is for ---------- */
.eb-who-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 48px; align-items: end; margin-bottom: 40px }
.eb-who-head h2 { margin: 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em }
.eb-who-head p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted-strong); max-width: 48ch }
.eb-who-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.eb-who-card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px 24px 24px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}
.eb-who-card:hover { border-color: var(--purple); box-shadow: 0 14px 30px rgba(96, 26, 136, .1); transform: translateY(-3px) }
.eb-who-ic {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--earth-soft); color: var(--purple); font-size: 21px; margin-bottom: 20px
}
.eb-who-card.is-green .eb-who-ic { background: var(--sage-soft); color: var(--green) }
.eb-who-card h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em }
.eb-who-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted-strong) }
.eb-who-try {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  padding-top: 16px; width: 100%; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 14.5px; color: var(--purple); text-decoration: none
}
.eb-who-card.is-green .eb-who-try { color: var(--green-dark) }
.eb-who-try i { font-size: 12px; transition: transform .2s var(--ease) }
.eb-who-try:hover i { transform: translateX(3px) }
@media (prefers-reduced-motion: reduce) { .eb-who-card, .eb-who-try i { transition: none } .eb-who-card:hover { transform: none } }

/* ---------- home: quotes - one large, three small, no cards ---------- */
.eb-quotes { background: var(--paper) }
.eb-quotes-head { text-align: center; max-width: 640px; margin: 0 auto 44px }
.eb-quotes-head h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em }
.eb-quotes-head p { margin: 0; font-size: 16.5px; color: var(--muted-strong) }

/* Reviews slider: equal cards on the site's scroll-snap track, three to a view on desktop. */
.eb-quote-slider .slider-track.eb-quote-list { gap: 20px }
.eb-quote-slider .slider-track > li { flex: 0 0 calc((100% - 40px) / 3) }
.eb-quote {
  display: flex; flex-direction: column;
  padding: 28px 28px 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease)
}
.eb-quote:hover { border-color: var(--purple); box-shadow: 0 14px 30px rgba(96, 26, 136, .1) }
.eb-quote-mark {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); color: var(--amber); font-size: 18px; margin-bottom: 20px
}
.eb-quote blockquote { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink) }
.eb-quote-by {
  display: flex; align-items: center; gap: 12px; margin: auto 0 0; padding-top: 22px;
  font-weight: 700; font-size: 15px; color: var(--ink)
}
.eb-quote blockquote + .eb-quote-by { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px }
.eb-quote-by small { display: block; font-weight: 400; font-size: 13px; color: var(--muted) }
.eb-quote-av {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-soft); color: var(--green-dark); font-size: 16px
}
.eb-quote-slider .slider-btn { background: #fff; color: var(--purple) }
.eb-quote-slider .slider-btn:hover:not(:disabled) { background: var(--purple); border-color: var(--purple); color: #fff }
.eb-quote-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px }
.eb-quote-dots[hidden] { display: none }
.eb-quote-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: var(--line-strong); cursor: pointer; transition: width .25s var(--ease), background .25s var(--ease) }
.eb-quote-dot.is-on { width: 28px; background: var(--purple) }
@media (max-width: 1100px) { .eb-quote-slider .slider-track > li { flex-basis: calc((100% - 20px) / 2) } }
@media (max-width: 600px) { .eb-quote-slider .slider-track > li { flex-basis: 86% } .eb-quote { padding: 22px 20px } }
@media (prefers-reduced-motion: reduce) { .eb-quote-dot, .eb-quote { transition: none } }

/* ---------- home: bulk orders ---------- */
.eb-bulk { background: var(--green); color: rgba(255, 255, 255, .9); padding: 64px 0 }
.eb-bulk-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px }
.eb-bulk .eb-h { color: #fff; max-width: 20ch }
.eb-bulk p { margin: 0; font-size: 16.5px }
.eb-bulk-actions { display: flex; flex-wrap: wrap; gap: 12px }
.eb-bulk .btn-wa { background: #fff; color: var(--green-dark) }
.eb-bulk .btn-wa:hover { background: var(--haldi-soft); color: var(--green-dark) }

.sj-seo { padding: 64px 0 }
.sj-seo-in h2 { font-size: 24px }
.sj-h1band { background: var(--paper) }
.sj-h1band h1 { color: var(--purple) }

/* ---------- about page ---------- */
.about-photo img { border-radius: var(--radius-lg) }
.how-no { color: var(--green); font-family: var(--serif) }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .eb-course-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .eb-who-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .eb-who-head { grid-template-columns: 1fr }
}
@media (max-width: 900px) {
  .eb-hero-in { grid-template-columns: 1fr; gap: 0; min-height: 0 }
  .eb-hero-copy { padding: 36px 0 32px }
  .eb-hero-visual { padding: 64px 0 48px }
  .eb-hero-visual::before { inset: 0 -50vw; clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%) }
  .eb-how { padding: 56px 0 }
  .eb-how-head { margin-bottom: 32px }
  /* Phone: cards stack, icon on the left, the dashed line runs down through the icons. */
  .eb-steps { grid-template-columns: 1fr; gap: 14px }
  .eb-steps::before { top: 40px; bottom: 40px; left: 47px; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong) }
  .eb-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; text-align: left; padding: 18px 18px 20px }
  .eb-step-ic { grid-row: 1 / span 3; width: 44px; height: 44px; font-size: 17px; box-shadow: 0 0 0 6px var(--sage-soft) }
  .eb-step-no { margin: 0 0 2px }
  .eb-steps h3 { font-size: 17.5px; margin-bottom: 4px }
  .eb-steps p { margin: 0; font-size: 14.5px }
  .eb-how-alt { justify-content: flex-start }
  .eb-how-alt-l { width: 100% }
  .eb-how-alt-i { border-radius: 14px; align-items: flex-start }
  .eb-how-alt-i i { margin-top: 3px }
  .eb-jain { padding: 88px 0 64px }
  .eb-jain::before { height: 37px }
  .eb-jain-head { grid-template-columns: 1fr }
  .eb-jain-head .btn { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 12px }
  .eb-quotes-head { margin-bottom: 28px }
  .section { padding: 64px 0 }
}
@media (max-width: 600px) {
  /* Two meals a row on phones: a menu is scanned, not read one card at a time. */
  .pgrid, .pgrid.pgrid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .pgrid .pcard-body { padding: 12px 12px 14px }
  .pgrid .pcard-name { font-size: 15.5px; line-height: 1.25 }
  .pgrid .pcard-foot { padding-top: 8px; margin-top: 8px }
  .pgrid .pcard-stock { font-size: 12px }
  .pgrid .price { font-size: 17px }
  .pgrid .price-tax { display: block; font-size: 11px }
  .pgrid .pcard-add .btn, .pgrid .btn-block { padding: 10px 8px; font-size: 13px }
  .pgrid .pcard-wish { transform: scale(.85); transform-origin: bottom right }
  .eb-courses { overflow: hidden }
  .eb-course-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px }
  .eb-course-meta { padding: 11px 10px 12px 12px }
  .eb-course-name { font-size: 15.5px }
  .eb-course-go { width: 28px; height: 28px; font-size: 11px }
  .eb-course-tag { left: 8px; bottom: 8px; font-size: 10.5px; padding: 4px 8px }
  .eb-courses-all { order: 2 }
  .eb-who-list { grid-template-columns: 1fr; gap: 12px }
  .eb-who-head { margin-bottom: 24px }
  .eb-who-card { padding: 20px 18px 18px }
  .eb-who-ic { width: 44px; height: 44px; font-size: 18px; margin-bottom: 14px }
  .eb-hero-kicker { display: flex; font-size: 12.5px; gap: 8px; padding: 0; background: none }
  .eb-hero-lede { font-size: 16.5px }
  .eb-hero-actions .btn { flex: 1 1 auto; justify-content: center }
  .eb-hero-trust { grid-template-columns: 1fr 1fr; gap: 12px 14px; font-size: 13.5px; margin-top: 28px }
  .eb-hero-trust i { width: 28px; height: 28px; font-size: 12px }
  .eb-hero-packs span { font-size: 12.5px; padding: 8px 2px 2px }
  .eb-hero-packs li:not(.is-front) span { font-size: 11.5px }
  .eb-hero-packs a { padding: 5px; border-radius: 14px }
  .eb-hero-note { font-size: 13px; margin-top: 26px }
  .brand-logo { height: 46px }
}
@media (prefers-reduced-motion: reduce) {
  .eb-course, .eb-course-pic img, .eb-course-go { transition: none }
  .eb-course:hover, .eb-course:hover .eb-course-pic img, .eb-course:hover .eb-course-go { transform: none }
}

/* ---------- home: offers ----------
   A purple promo panel beside the offer cards. With up to three offers the panel spans what the
   cards leave of a 4-column row (--offer-span, set in the markup); with more, the cards slide. */
.eb-offers-lay { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch }
.eb-offers-lay.is-slider { grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr) }
.eb-offers-panel {
  grid-column: span var(--offer-span, 1);
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 40px clamp(28px, 4vw, 56px); border-radius: var(--radius-lg);
  /* The live site's purple vegetable-sketch pattern, the same art its banners sit on. */
  background: #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat; color: rgba(255, 255, 255, .88)
}
.eb-offers-lay.is-slider .eb-offers-panel { grid-column: auto }
/* The pack's diagonal, as a green corner. */
.eb-offers-panel::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 46%; height: 62%;
  background: var(--green); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .9
}
.eb-offers-panel > * { position: relative; z-index: 1 }
.eb-offers-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .015em
}
.eb-offers-panel h2 { margin: 18px 0 6px; color: #fff; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.02em }
.eb-offers-big { margin: 0 0 14px; font-size: 18px; color: #fff }
.eb-offers-big strong { color: var(--amber); font-size: 1.5em; letter-spacing: -.02em }
.eb-offers-panel p:not(.eb-offers-big) { margin: 0 0 26px; max-width: 38ch; font-size: 15.5px; line-height: 1.6 }
.eb-offers-panel .btn i { margin-left: 8px; font-size: 13px; transition: transform .2s var(--ease) }
.eb-offers-panel .btn:hover i { transform: translateX(3px) }
.eb-offers-card { display: flex }
.eb-offers-card .pcard { width: 100% }
.eb-offers-items .prod-track > li { flex-basis: calc((100% - 40px) / 3) }

@media (max-width: 1100px) {
  .eb-offers-lay, .eb-offers-lay.is-slider { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .eb-offers-panel, .eb-offers-lay.is-slider .eb-offers-panel { grid-column: 1 / -1 }
  .eb-offers-panel::after { width: 30%; height: 100% }
  .eb-offers-lay.is-slider .eb-offers-items { grid-column: 1 / -1 }
}
@media (max-width: 600px) {
  .eb-offers-lay { gap: 10px }
  .eb-offers-panel { padding: 28px 22px }
  .eb-offers-panel::after { width: 38%; height: 55% }
  .eb-offers-items .prod-track > li { flex-basis: 70% }
}
@media (max-width: 600px) {
  /* Offer cards get the same compact phone styling as the .pgrid cards. */
  .eb-offers-card .pcard-body { padding: 12px 12px 14px }
  .eb-offers-card .pcard-name { font-size: 15.5px; line-height: 1.25 }
  .eb-offers-card .pcard-stock { font-size: 12px }
  .eb-offers-card .price { font-size: 17px }
  .eb-offers-card .price-tax { display: block; font-size: 11px }
  .eb-offers-card .pcard-wish { transform: scale(.85); transform-origin: bottom right }
  /* Two-up cards: "Add to cart" on one line, no bag icon. */
  .pgrid .pcard-add .btn, .eb-offers-card .pcard-add .btn { white-space: nowrap; padding: 10px 8px; font-size: 13px }
  .pgrid .pcard-add .btn i, .eb-offers-card .pcard-add .btn i { display: none }
}

/* ---------- home: FAQ ----------
   Intro + a help card on the left; each question its own card on the right, with a +/- toggle
   drawn in CSS (it turns into a minus when open). */
.eb-faq-lay { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 56px; align-items: start }
.eb-faq-intro { position: sticky; top: 140px }
.eb-faq-intro h2 { margin: 0 0 10px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em }
.eb-faq-intro > p { margin: 0 0 18px; font-size: 16.5px; color: var(--muted-strong) }
.eb-faq-all { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--purple); text-decoration: none }
.eb-faq-all i { font-size: 13px; transition: transform .2s var(--ease) }
.eb-faq-all:hover i { transform: translateX(3px) }
.eb-faq-help { margin-top: 32px; padding: 24px; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line) }
.eb-faq-help-ic {
  width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--purple); color: #fff; font-size: 18px; margin-bottom: 14px
}
.eb-faq-help strong { display: block; font-size: 18px; color: var(--ink); margin-bottom: 4px }
.eb-faq-help p { margin: 0 0 16px; font-size: 14.5px; color: var(--muted-strong) }
.eb-faq-help-actions { display: flex; flex-wrap: wrap; gap: 10px }
.eb-faq-help-actions .btn i { margin-right: 6px }

.eb-faq-list { display: flex; flex-direction: column; gap: 12px }
.eb-faq-item {
  border: 1px solid var(--line); border-radius: 16px; background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease)
}
.eb-faq-item:hover { border-color: var(--line-strong) }
.eb-faq-item[open] { border-color: var(--purple); box-shadow: 0 12px 28px rgba(96, 26, 136, .08) }
.eb-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 22px; font-weight: 700; font-size: 16.5px; color: var(--ink)
}
.eb-faq-item summary::-webkit-details-marker { display: none }
.eb-faq-item summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 16px }
.eb-faq-item[open] summary { color: var(--purple) }
.eb-faq-tog { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); transition: background .2s var(--ease) }
.eb-faq-tog::before, .eb-faq-tog::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px;
  border-radius: 2px; background: var(--purple); transition: transform .25s var(--ease)
}
.eb-faq-tog::after { transform: rotate(90deg) }
.eb-faq-item[open] .eb-faq-tog { background: var(--purple) }
.eb-faq-item[open] .eb-faq-tog::before, .eb-faq-item[open] .eb-faq-tog::after { background: #fff }
.eb-faq-item[open] .eb-faq-tog::after { transform: rotate(0) }
.eb-faq-a { padding: 0 22px 22px; margin-top: -4px; font-size: 15.5px; line-height: 1.7; color: var(--muted-strong); max-width: 70ch }

@media (max-width: 900px) {
  .eb-faq-lay { grid-template-columns: 1fr; gap: 28px }
  .eb-faq-intro { position: static }
  .eb-faq-help { margin-top: 24px }
}
@media (max-width: 600px) {
  .eb-faq-item summary { padding: 16px 16px; font-size: 15.5px }
  .eb-faq-a { padding: 0 16px 18px; font-size: 14.5px }
  .eb-faq-tog { width: 28px; height: 28px }
}
@media (prefers-reduced-motion: reduce) { .eb-faq-item, .eb-faq-tog, .eb-faq-tog::before, .eb-faq-tog::after { transition: none } }

/* ---------- home: about our meals (the SEO text) ----------
   One card: heading and intro on the left, a meal-time guide on the right whose rows link to the
   categories - the same words and links the plain paragraphs carried, laid out to scan. */
.eb-about { background: var(--paper) }
.eb-about-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px;
  padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line)
}
.eb-about-intro h2 { margin: 0 0 16px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.02em }
.eb-about-intro p { margin: 0 0 14px; font-size: 16px; line-height: 1.75; color: var(--muted-strong) }
.eb-about-who { padding: 16px 18px; border-left: 3px solid var(--green); border-radius: 0 12px 12px 0; background: var(--paper); color: var(--ink) !important }
.eb-about-guide h3 { margin: 0 0 14px; font-size: 18px }
.eb-about-guide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px }
.eb-about-guide a {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--line); text-decoration: none; color: var(--muted-strong); font-size: 14.5px; line-height: 1.5;
  transition: border-color .2s var(--ease), background .2s var(--ease)
}
.eb-about-guide a:hover { border-color: var(--purple); background: var(--earth-soft) }
.eb-about-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-soft); color: var(--green); font-size: 18px
}
.eb-about-guide li:nth-child(even) .eb-about-ic { background: var(--earth-soft); color: var(--purple) }
.eb-about-txt { flex: 1; min-width: 0 }
.eb-about-txt strong { display: block; font-size: 16px; color: var(--ink) }
.eb-about-go { flex: none; color: var(--purple); font-size: 13px; transition: transform .2s var(--ease) }
.eb-about-guide a:hover .eb-about-go { transform: translateX(3px) }

/* Admin-written text: the same card, as prose. */
.eb-about-prose { display: block; max-width: 900px; margin: 0 auto }
.eb-about-prose h2 { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 30px) }
.eb-about-prose p { font-size: 16px; line-height: 1.75; color: var(--muted-strong) }
.eb-about-prose a { color: var(--purple); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--earth-soft) }
.eb-about-prose a:hover { border-color: var(--purple) }

@media (max-width: 900px) { .eb-about-card { grid-template-columns: 1fr; gap: 28px } }
@media (max-width: 600px) { .eb-about-guide a { padding: 12px; gap: 12px } .eb-about-ic { width: 38px; height: 38px; font-size: 15px } }
@media (prefers-reduced-motion: reduce) { .eb-about-guide a, .eb-about-go { transition: none } }

/* About-our-meals with photos: a pack photo on each guide row (the icon becomes a small badge on
   it), and a strip of three packs under the intro. */
.eb-about-pic { position: relative; flex: none; width: 76px; height: 76px }
.eb-about-pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px }
.eb-about-pic .eb-about-ic {
  position: absolute; right: -6px; bottom: -6px; width: 30px; height: 30px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 0 0 3px #fff
}
.eb-about-guide a { padding: 12px 18px 12px 12px }
.eb-about-guide a:hover .eb-about-pic img { transform: scale(1.04) }
.eb-about-pic img { transition: transform .3s var(--ease) }

.eb-about-strip { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.eb-about-strip a { display: block; text-decoration: none; color: var(--ink) }
.eb-about-strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .2s var(--ease) }
.eb-about-strip a:hover img { transform: translateY(-3px); border-color: var(--purple) }
.eb-about-strip span { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 700; text-align: center }
.eb-about-strip a:hover span { color: var(--purple) }
@media (max-width: 600px) {
  .eb-about-pic { width: 62px; height: 62px }
  .eb-about-pic .eb-about-ic { width: 26px; height: 26px; font-size: 11px }
  .eb-about-strip { gap: 8px }
  .eb-about-strip span { font-size: 12px }
}
@media (prefers-reduced-motion: reduce) { .eb-about-pic img, .eb-about-strip img { transition: none } }

/* ---------- footer ----------
   Brand column (logo, line, contact, actions, socials) and four link columns, then a bottom bar
   with the legal line, the FSSAI licence and the credit. Deep purple, green top edge. */
.eb-foot { background: var(--ink-deep); color: rgba(255, 255, 255, .72); border-top: 6px solid var(--green); border-image: none }
.eb-foot::before, .eb-foot::after { display: none }
.ef-main {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 40px 32px; padding-top: 64px; padding-bottom: 48px
}
.ef-logo { display: inline-block }
.ef-logo img { height: 64px; width: auto; display: block }
.ef-tag { margin: 18px 0 6px; font-weight: 700; font-size: 20px; color: var(--amber); letter-spacing: -.01em }
.ef-about { margin: 0 0 22px; max-width: 38ch; font-size: 14.5px; line-height: 1.7 }
.ef-contact { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14.5px }
.ef-contact li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5 }
.ef-contact i {
  flex: none; width: 30px; height: 30px; border-radius: 9px; margin-top: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: var(--amber); font-size: 13px
}
.ef-contact a { color: #fff; text-decoration: none }
.ef-contact a:hover { color: var(--amber) }
.ef-contact span { max-width: 32ch }
.ef-actions { display: flex; flex-wrap: wrap; gap: 10px }
.ef-actions .btn i { margin-right: 6px }
.eb-foot .ef-actions .btn-accent, .eb-foot .ef-actions .btn-accent:hover { color: var(--ink) }
.eb-foot .ef-contact { margin: 0 0 24px }
.eb-foot .ef-social { margin: 20px 0 0 }
.ef-actions .sj-install-foot { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3) }
.ef-actions .sj-install-foot:hover { background: #fff; color: var(--purple) }
.ef-social { list-style: none; margin: 22px 0 0; padding: 0; display: flex; gap: 10px }
.ef-social a {
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease)
}
.ef-social a:hover { background: var(--amber); color: var(--ink) }

.eb-foot .ef-col h4 {
  margin: 8px 0 18px; padding: 0; font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #fff
}
.eb-foot .ef-col h4::after { display: none }
.ef-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px }
.ef-col a { color: rgba(255, 255, 255, .72); text-decoration: none; font-size: 14.5px; transition: color .2s var(--ease), padding .2s var(--ease) }
.ef-col a:hover { color: #fff; padding-left: 4px }

.ef-base { border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .14) }
.ef-base-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; padding-top: 18px; padding-bottom: 18px; font-size: 13px }
.ef-base p { margin: 0 }
.ef-legal { color: rgba(255, 255, 255, .6) }
.ef-fssai { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .75) }
.ef-fssai-mark { padding: 2px 8px; border-radius: 6px; background: #fff; color: #1F6E2C; font-weight: 700; font-size: 12px; letter-spacing: .02em }
.ef-credit { color: rgba(255, 255, 255, .6) }
.ef-credit a { color: #fff; font-weight: 700; text-decoration: none }
.ef-credit a:hover { color: var(--amber) }

@media (max-width: 1100px) {
  .ef-main { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .ef-brand { grid-column: 1 / -1 }
  .ef-about { max-width: 60ch }
}
@media (max-width: 760px) {
  .ef-main { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 48px; padding-bottom: 32px; gap: 32px 20px }
  .ef-brand { display: block }
  .ef-base-in { flex-direction: column; align-items: flex-start; gap: 8px }
}
@media (prefers-reduced-motion: reduce) { .ef-col a, .ef-social a { transition: none } }

/* Footer "Get in touch": one horizontal card across the top of the footer - heading, the three
   ways to reach us side by side, then the actions and the socials. */
.ef-reach-wrap { padding-top: 48px }
.ef-reach {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px 28px;
  padding: 22px 24px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12); border-top: 3px solid var(--amber)
}
.ef-reach-h { grid-column: 1 / -1; margin: 0; font-weight: 700; font-size: 18px; color: #fff; line-height: 1.3 }
.ef-reach-h small { display: block; margin: 2px 0 0 }
.ef-reach-h small { display: block; font-weight: 400; font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 2px }
.eb-foot .ef-contact { margin: 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px }
.ef-contact li { display: block; min-width: 0 }
.ef-contact a {
  display: flex; align-items: center; gap: 12px; height: 100%; padding: 10px 12px; border-radius: 12px;
  background: rgba(0, 0, 0, .16); color: #fff; text-decoration: none; transition: background .2s var(--ease)
}
.ef-contact a:hover { background: rgba(255, 255, 255, .1); color: #fff }
.ef-contact i { flex: none; margin-top: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--amber); color: var(--ink); font-size: 14px }
.ef-contact span { min-width: 0; max-width: none; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere }
.ef-contact small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); margin-bottom: 1px }
.ef-reach .ef-actions { display: flex; flex-direction: column; gap: 8px }
.ef-reach .ef-actions .btn { justify-content: center; white-space: nowrap }
.ef-follow { display: flex; flex-direction: column; align-items: flex-start; gap: 8px }
.ef-follow > span { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .75) }
.eb-foot .ef-follow .ef-social { margin: 0 }
.eb-foot .ef-main { padding-top: 48px }

@media (max-width: 1100px) {
  .ef-reach { grid-template-columns: minmax(0, 1fr) auto }
  .ef-reach .ef-contact { grid-column: 1 / -1 }
  .ef-reach .ef-actions { flex-direction: row; flex-wrap: wrap }
  .ef-follow { flex-direction: row; align-items: center; justify-self: end }
}
@media (max-width: 680px) {
  .ef-reach { grid-template-columns: 1fr; padding: 18px }
  .ef-reach-h small { display: block; margin: 2px 0 0 }
  .eb-foot .ef-contact { grid-template-columns: 1fr }
  .ef-reach .ef-actions .btn { flex: 1 1 auto }
  .ef-follow { justify-self: stretch; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1) }
}
@media (prefers-reduced-motion: reduce) { .ef-contact a { transition: none } }

/* ---------- home: benefits strip under the hero ----------
   Two copies of the list side by side, moved left by one copy's width, so the loop never jumps. */
.eb-marquee { overflow: hidden; background: var(--purple); color: #fff; border-block: 1px solid rgba(255, 255, 255, .08) }
.eb-marquee-track { display: flex; width: max-content; animation: eb-marquee 38s linear infinite }
.eb-marquee:hover .eb-marquee-track { animation-play-state: paused }
.eb-marquee ul { display: flex; flex: none; list-style: none; margin: 0; padding: 0 }
.eb-marquee li {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; white-space: nowrap;
  font-weight: 700; font-size: 15px; letter-spacing: .01em; position: relative
}
.eb-marquee li::after { content: ""; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--amber) }
.eb-marquee li i { color: var(--amber); font-size: 15px }
@keyframes eb-marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .eb-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center }
  .eb-marquee ul[aria-hidden] { display: none }
  .eb-marquee ul { flex-wrap: wrap; justify-content: center }
}

/* ---------- shared section head (title + subtitle left, link right) ---------- */
.eb-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 28px }
.eb-sec-head h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; letter-spacing: -.02em }
.eb-sec-head p { margin: 0; font-size: 16px; color: var(--muted-strong) }
.eb-sec-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--purple); text-decoration: none; white-space: nowrap }
.eb-sec-link i { font-size: 13px; transition: transform .2s var(--ease) }
.eb-sec-link:hover i { transform: translateX(3px) }

/* Menu shelf on a tinted band, so it reads apart from the offers above it. */
.eb-shelf { background: var(--paper) }
.eb-shelf .eb-tabs { margin: 0 0 26px }
.eb-shelf .eb-tabs [role=tab] { background: #fff }
.eb-shelf .eb-tabs [role=tab][aria-selected=true] { background: var(--purple) }

/* Jain band heading, now sentence case like the rest. */
.eb-jain-head h2 { margin: 0 0 10px; color: #fff; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; max-width: 22ch }

/* ---------- home: bulk orders card ---------- */
.eb-bulk-sec { padding-top: 24px }
.eb-bulk {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center; gap: 32px; padding: clamp(32px, 4.5vw, 60px); border-radius: 24px;
  background: var(--green); color: rgba(255, 255, 255, .88)
}
.eb-bulk::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
  background: var(--purple); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%)
}
.eb-bulk > * { position: relative; z-index: 1 }
.eb-bulk-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 700
}
.eb-bulk h2 { margin: 16px 0 12px; color: #fff; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; max-width: 18ch }
.eb-bulk-copy > p { margin: 0 0 18px; max-width: 50ch; font-size: 16px; line-height: 1.65 }
.eb-bulk-points { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; font-size: 14.5px; color: #fff }
.eb-bulk-points i { color: var(--amber); margin-right: 6px }
.eb-bulk-actions { display: flex; flex-wrap: wrap; gap: 12px }
.eb-bulk-actions .btn i { margin-right: 8px }
.eb-bulk .btn-accent { color: var(--ink) }

.eb-bulk-packs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center }
.eb-bulk-packs li { background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .25) }
.eb-bulk-packs li:first-child { transform: rotate(-6deg) translate(18%, 10px) }
.eb-bulk-packs li:nth-child(2) { position: relative; z-index: 2 }
.eb-bulk-packs li:last-child { transform: rotate(6deg) translate(-18%, 10px) }
.eb-bulk-packs img { display: block; width: 100%; height: auto; border-radius: 11px }

@media (max-width: 900px) {
  .eb-bulk { grid-template-columns: 1fr }
  .eb-bulk::before { width: 100%; top: auto; height: 42%; clip-path: polygon(0 24%, 100% 0, 100% 100%, 0 100%) }
  .eb-bulk-packs { max-width: 420px; margin: 8px auto 0 }
}
@media (max-width: 600px) {
  .eb-marquee li { padding: 13px 22px; font-size: 14px }
  .eb-sec-head { margin-bottom: 20px }
  .eb-bulk { padding: 28px 22px; border-radius: 18px }
  .eb-bulk-actions .btn { flex: 1 1 100%; justify-content: center }
}

/* Home slider: the live site's banners, shown whole. A banner with no phone artwork is
   desktop-only; site.js skips it on phones and its dot is hidden here. */
@media (max-width: 860px) {
  .sj-slide-deskonly.sj-dot { display: none; }
}

/* =====================================================================
   Live-site imagery on the home page (assets/img/home/, from eateryybox.in).
   ===================================================================== */

/* How to prepare: the "Travel friendly" art beside numbered step cards, on a light paper with
   the food doodle barely showing through. */
.eb-how {
  background:
    linear-gradient(rgba(250, 252, 251, .92), rgba(250, 252, 251, .92)),
    #fafcfb url("../img/home/food-doodle.webp") center / 900px auto repeat;
  border-block: 1px solid var(--line)
}
.eb-how-lay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center }
.eb-how-pic { position: relative; margin: 0; padding: 12px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .18) }
.eb-how-pic img { display: block; width: 100%; height: auto; border-radius: 18px }
.eb-how-badge {
  position: absolute; right: 28px; top: -22px; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(30, 22, 49, .16);
  font-size: 14px; color: var(--muted-strong); line-height: 1.25
}
.eb-how-badge i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 17px }
.eb-how-badge strong { display: block; font-size: 18px; color: var(--ink) }
.eb-how-lay .eb-how-head { text-align: left; margin: 0 0 28px; max-width: none }
.eb-how-lay .eb-how-head h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em }
.eb-how-head h2 em {
  font-style: normal; color: var(--purple); white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-how-lay .eb-how-head p { font-size: 16.5px; line-height: 1.6 }
.eb-how-lay .eb-steps { grid-template-columns: 1fr; gap: 12px }
.eb-how-lay .eb-steps::before { top: 44px; bottom: 44px; left: 49px; right: auto; border-top: 0; border-left: 2px dashed var(--line-strong) }
.eb-how-lay .eb-steps li {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px;
  text-align: left; padding: 18px 24px 18px 22px; border-radius: 18px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}
.eb-how-lay .eb-steps li:hover { border-color: var(--green); box-shadow: 0 14px 30px rgba(27, 138, 98, .1); transform: translateX(4px) }
.eb-how-lay .eb-step-ic { flex: none; width: 54px; height: 54px; font-size: 20px; box-shadow: 0 0 0 6px var(--sage-soft) }
.eb-step-txt { min-width: 0; flex: 1 }
.eb-how-lay .eb-step-no { margin: 0 0 2px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase }
.eb-how-lay .eb-steps h3 { margin: 0 0 4px; font-size: 18.5px }
.eb-how-lay .eb-steps p { margin: 0; max-width: none; font-size: 14.5px; line-height: 1.55 }
.eb-step-big { flex: none; font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--sage-soft) }
.eb-how-lay .eb-steps li:hover .eb-step-big { color: rgba(27, 138, 98, .22) }
.eb-how-lay .eb-how-alt {
  display: block; margin-top: 18px; padding: 16px 18px; border-radius: 18px;
  background: #fff; border: 1px dashed var(--line-strong)
}
.eb-how-lay .eb-how-alt-l { display: block; margin-bottom: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong) }
.eb-how-alt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.eb-how-lay .eb-how-alt-i { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; line-height: 1.4; color: var(--muted-strong) }
.eb-how-lay .eb-how-alt-i > i { flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--earth-soft); color: var(--purple); font-size: 15px }
.eb-how-lay .eb-how-alt-i strong { display: block; font-size: 15px; color: var(--ink) }
@media (max-width: 960px) {
  .eb-how-lay { grid-template-columns: 1fr; gap: 36px }
  .eb-how-pic { max-width: 520px; width: 100%; margin: 0 auto }
  .eb-how-badge { right: 20px }
}
@media (max-width: 600px) {
  .eb-how-lay .eb-steps li { gap: 14px; padding: 16px }
  .eb-how-lay .eb-step-ic { width: 44px; height: 44px; font-size: 16px }
  .eb-how-lay .eb-steps::before { left: 37px }
  .eb-step-big { display: none }
  .eb-how-alt-row { grid-template-columns: 1fr }
  .eb-how-badge { top: -18px; padding: 10px 14px 10px 10px }
}
@media (prefers-reduced-motion: reduce) { .eb-how-lay .eb-steps li { transition: none } .eb-how-lay .eb-steps li:hover { transform: none } }

/* Who it's for: the "Ghar jaisa khana" photo in a white frame on the left; heading and four
   compact audience cards (icon beside text) on the right. A corn sketch sits in the corner. */
.eb-who { position: relative; overflow: hidden }
.eb-who::before {
  content: ""; position: absolute; right: -40px; top: 20px; width: 220px; height: 360px; opacity: .25; pointer-events: none;
  background: url("../img/home/corn-sketch.webp") center / contain no-repeat
}
.eb-who > .wrap { position: relative }
.eb-who-lay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center }
.eb-who-pic { position: relative; margin: 0; padding: 12px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .18) }
.eb-who-pic img { display: block; width: 100%; height: auto; aspect-ratio: 768 / 872; object-fit: cover; border-radius: 18px }
.eb-who-badge {
  position: absolute; left: -18px; bottom: 40px; display: flex; align-items: center; gap: 12px; max-width: 250px;
  padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(30, 22, 49, .16);
  font-size: 13.5px; line-height: 1.3; color: var(--muted-strong)
}
.eb-who-badge i { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--purple); color: #fff; font-size: 16px }
.eb-who-badge strong { display: block; font-size: 15.5px; color: var(--ink) }
.eb-who-lay .eb-who-head { display: block; margin: 0 0 28px }
.eb-who-lay .eb-who-head h2 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em }
.eb-who-head h2 em {
  font-style: normal; color: var(--purple); white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-who-lay .eb-who-head p { max-width: 56ch; padding-left: 14px; border-left: 3px solid var(--purple) }
.eb-who-lay .eb-who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.eb-who-lay .eb-who-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 20px; border-radius: 18px }
.eb-who-lay .eb-who-ic { flex: none; width: 46px; height: 46px; margin: 0; border-radius: 13px; font-size: 18px }
.eb-who-txt { min-width: 0; display: flex; flex-direction: column; height: 100% }
.eb-who-lay .eb-who-card h3 { margin: 0 0 4px; font-size: 17.5px }
.eb-who-lay .eb-who-card p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.55 }
.eb-who-lay .eb-who-try { padding-top: 0; border-top: 0; width: auto; font-size: 14px }
@media (max-width: 960px) {
  .eb-who-lay { grid-template-columns: 1fr; gap: 36px }
  .eb-who-pic { max-width: 560px; width: 100%; margin: 0 auto }
  .eb-who-badge { left: 20px }
}
@media (max-width: 600px) {
  .eb-who-lay .eb-who-list { grid-template-columns: 1fr }
  .eb-who::before { display: none }
  .eb-who-badge { bottom: 20px; padding: 10px 14px 10px 10px }
}

/* Testimonials: the live site's vegetable sketch borders, faded into the paper. */
.eb-quotes {
  background:
    linear-gradient(rgba(246, 249, 247, .94), rgba(246, 249, 247, .94)),
    var(--paper) url("../img/home/veg-sketch-border.webp") center / cover no-repeat
}

/* FAQ: a home-kitchen photo in the intro column, leaf sketches in the corners. */
.eb-faq { position: relative; overflow: hidden }
.eb-faq::before, .eb-faq::after {
  content: ""; position: absolute; width: 300px; height: 274px; pointer-events: none; opacity: .7;
  background: center / contain no-repeat
}
.eb-faq::before { left: -60px; bottom: -40px; background-image: url("../img/home/leaf-sketch-1.webp") }
.eb-faq::after { right: -60px; top: -30px; background-image: url("../img/home/leaf-sketch-2.webp") }
.eb-faq > .wrap { position: relative; z-index: 1 }
.eb-faq-pic { margin: 24px 0 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 10 }
.eb-faq-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30% }
.eb-faq-pic + .eb-faq-help { margin-top: 16px }

/* About: the bowls photo under the intro. */
.eb-about-photo { margin: 20px 0 0; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9 }
.eb-about-photo img { display: block; width: 100%; height: 100%; object-fit: cover }


/* Jain range heading: eyebrow, accent line, lede with a rule, three promise chips, arrow button. */
.eb-jain-head { align-items: end; gap: 24px 48px }
.eb-jain-intro { max-width: 720px }
.eb-jain-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase
}
.eb-jain-eyebrow i { color: #7FE0B4; font-size: 12px }
.eb-jain-head h2 { max-width: none; margin: 0 0 14px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em }
.eb-jain-head h2 em { font-style: normal; color: var(--amber); white-space: nowrap }
.eb-jain-head .eb-jain-intro > p { margin: 0 0 18px; padding-left: 14px; border-left: 3px solid var(--amber); font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .88) }
.eb-jain-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
.eb-jain-points li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  color: #fff; font-size: 14px; font-weight: 700
}
.eb-jain-points i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); font-size: 9.5px }
.eb-jain-head .eb-jain-cta { grid-column: 2; grid-row: 1; align-self: end; border-radius: 999px; padding: 14px 26px; font-size: 15.5px; white-space: nowrap }
.eb-jain-cta i { margin-left: 8px; font-size: 13px; transition: transform .2s var(--ease) }
.eb-jain-cta:hover i { transform: translateX(3px) }
@media (max-width: 760px) {
  .eb-jain-head { grid-template-columns: 1fr }
  .eb-jain-head .eb-jain-cta { grid-column: 1; grid-row: auto; justify-self: start }
}
@media (prefers-reduced-motion: reduce) { .eb-jain-cta i { transition: none } }

/* Testimonials heading: centred eyebrow, accent words, and a quote mark between two rules. */
.eb-quotes-head h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.025em; margin-bottom: 12px }
.eb-quotes-head h2 em {
  font-style: normal; color: var(--purple); white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-quotes-head p { line-height: 1.6 }
.eb-quotes-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; color: var(--purple); font-size: 15px }
.eb-quotes-rule::before, .eb-quotes-rule::after { content: ""; width: 56px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--amber)) }
.eb-quotes-rule::after { transform: scaleX(-1) }

/* FAQ: eyebrow + accent heading; the kitchen photo and the help strip in one framed card;
   numbered question cards with "View all FAQs" under them. */
.eb-faq-intro h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 12px }
.eb-faq-intro h2 em {
  font-style: normal; color: var(--purple); white-space: nowrap;
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-faq-intro > p { padding-left: 14px; border-left: 3px solid var(--purple); line-height: 1.6; margin-bottom: 24px }
.eb-faq-card { border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(30, 22, 49, .18); overflow: hidden }
.eb-faq-card .eb-faq-pic { margin: 0; border-radius: 0; aspect-ratio: 16 / 10 }
.eb-faq-card .eb-faq-help {
  margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center;
  padding: 20px 22px 22px; border: 0; border-radius: 0; background: #fff
}
.eb-faq-card .eb-faq-help-ic { margin: 0; width: 46px; height: 46px; border-radius: 14px }
.eb-faq-help-txt strong { margin-bottom: 2px }
.eb-faq-card .eb-faq-help p { margin: 0 }
.eb-faq-card .eb-faq-help-actions { grid-column: 1 / -1; margin-top: 14px }
.eb-faq-card .eb-faq-help-actions .btn { flex: 1; justify-content: center; border-radius: 999px }

.eb-faq-item summary { justify-content: flex-start }
.eb-faq-no {
  flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--earth-soft); color: var(--purple); font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .2s var(--ease), color .2s var(--ease)
}
.eb-faq-q { flex: 1; min-width: 0 }
.eb-faq-item[open] .eb-faq-no { background: var(--purple); color: #fff }
.eb-faq-item[open] { border-left: 4px solid var(--purple) }
.eb-faq-a { padding-left: 76px }
.eb-faq-list .eb-faq-all { align-self: flex-start; margin-top: 10px }
@media (max-width: 600px) {
  .eb-faq-no { width: 30px; height: 30px; font-size: 12px; border-radius: 9px }
  .eb-faq-a { padding-left: 16px }
}
@media (prefers-reduced-motion: reduce) { .eb-faq-no { transition: none } }

/* Bulk orders, refined: textured halves (food doodle on the green, the live site's vegetable
   sketch on the purple), an amber accent line, the promises as chips, pill buttons, and who
   it serves as tags under the packs. */
.eb-bulk {
  background:
    linear-gradient(rgba(27, 138, 98, .95), rgba(27, 138, 98, .95)),
    var(--green) url("../img/home/food-doodle.webp") center / 700px auto repeat;
  box-shadow: 0 30px 60px -28px rgba(27, 138, 98, .55)
}
.eb-bulk::before {
  background:
    linear-gradient(rgba(96, 26, 136, .8), rgba(96, 26, 136, .8)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat
}
.eb-bulk-tag { padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .22); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase }
.eb-bulk h2 { max-width: 20ch; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -.025em }
.eb-bulk h2 em { font-style: normal; color: var(--amber) }
.eb-bulk-copy > p { padding-left: 14px; border-left: 3px solid var(--amber); color: rgba(255, 255, 255, .9) }
.eb-bulk-points { gap: 8px }
.eb-bulk-points li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-size: 14px
}
.eb-bulk-points i {
  margin: 0; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--ink); font-size: 9.5px
}
.eb-bulk-actions .btn { border-radius: 999px; padding: 13px 24px }
.eb-bulk-art { display: flex; flex-direction: column; align-items: center; gap: 30px }
.eb-bulk-art .eb-bulk-packs { width: 100%; max-width: 440px }
.eb-bulk-for { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px }
.eb-bulk-for li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--purple); font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 24px rgba(0, 0, 0, .18)
}
.eb-bulk-for i { color: var(--green) }
@media (max-width: 900px) {
  .eb-bulk-art { gap: 22px }
}
@media (max-width: 900px) {
  /* Stacked: keep the purple half behind the packs only, clear of the buttons. */
  .eb-bulk::before { height: 34%; clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%) }
}
/* Bigger packs: the art column gets an equal share and the fan spans it. */
.eb-bulk { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px }
.eb-bulk-art .eb-bulk-packs { max-width: 600px; grid-template-columns: 1fr 1.3fr 1fr }
.eb-bulk-packs li { padding: 8px; border-radius: 20px }
.eb-bulk-packs img { border-radius: 14px }
@media (max-width: 900px) {
  .eb-bulk { grid-template-columns: 1fr }
  .eb-bulk-art .eb-bulk-packs { max-width: 100% }
}
.eb-bulk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) }
.eb-bulk-art .eb-bulk-packs { max-width: none; grid-template-columns: 1fr 1.35fr 1fr }
.eb-bulk-packs li:first-child { transform: rotate(-6deg) translate(12%, 12px) }
.eb-bulk-packs li:last-child { transform: rotate(6deg) translate(-12%, 12px) }
@media (max-width: 900px) { .eb-bulk { grid-template-columns: 1fr } }

/* About: eyebrow + accent heading, a labelled time-of-day guide, and four pack facts under it. */
.eb-about-card { box-shadow: 0 30px 60px -32px rgba(30, 22, 49, .16) }
.eb-about-intro h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; margin-bottom: 18px }
.eb-about-intro h2 em {
  font-style: normal; color: var(--purple);
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-about-guide h3 {
  display: flex; align-items: center; gap: 10px; margin: 6px 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong)
}
.eb-about-guide h3 i { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--earth-soft); color: var(--purple); font-size: 13px }
.eb-about-guide h3::after { content: ""; flex: 1; height: 1px; background: var(--line) }
.eb-about-guide a { transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease) }
.eb-about-guide a:hover { transform: translateX(4px) }
.eb-about-guide .eb-about-facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.eb-about-guide .eb-about-facts li {
  padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px
}
.eb-about-facts li:nth-child(1), .eb-about-facts li:nth-child(4) { background: var(--earth-soft); border-color: transparent }
.eb-about-facts strong { font-size: 24px; line-height: 1.15; letter-spacing: -.02em; color: var(--purple) }
.eb-about-facts li:nth-child(2) strong, .eb-about-facts li:nth-child(3) strong { color: var(--green) }
.eb-about-facts span { font-size: 14px; color: var(--muted-strong) }
@media (prefers-reduced-motion: reduce) { .eb-about-guide a:hover { transform: none } }

/* =====================================================================
   About us page
   ===================================================================== */
.eb-ab-head h2, .eb-ab-copy h2 { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.025em }
.eb-ab-head h2 em, .eb-ab-copy h2 em {
  font-style: normal; color: var(--purple);
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}

/* Story */
.eb-ab-story-lay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start }
.eb-ab-media { position: sticky; top: 140px; padding: 0 0 70px 0 }
.eb-ab-main { margin: 0; padding: 12px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .18) }
.eb-ab-main img { display: block; width: 100%; height: auto; border-radius: 18px }
.eb-ab-inset {
  position: absolute; right: -24px; bottom: 0; width: 46%; margin: 0; padding: 8px;
  border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -12px rgba(30, 22, 49, .28)
}
.eb-ab-inset img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 15px }
.eb-ab-badge {
  position: absolute; left: -18px; bottom: 130px; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px; background: #fff; box-shadow: 0 16px 34px rgba(30, 22, 49, .16);
  font-size: 13.5px; line-height: 1.3; color: var(--muted-strong)
}
.eb-ab-badge i { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--purple); color: #fff; font-size: 16px }
.eb-ab-badge strong { display: block; font-size: 15.5px; color: var(--ink) }

.eb-ab-prose { font-size: 16.5px; line-height: 1.75; color: var(--muted-strong) }
.eb-ab-prose > p:first-child { font-size: 18.5px; line-height: 1.65; color: var(--ink) }
.eb-ab-prose strong { color: var(--ink) }
.eb-ab-prose h2 {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 10px;
  font-size: 21px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink)
}
.eb-ab-prose h2::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 3px; background: var(--amber) }
.eb-ab-prose ul { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.eb-ab-prose li {
  position: relative; margin: 0; padding: 16px 16px 16px 50px; border-radius: 16px;
  background: var(--paper); border: 1px solid var(--line); font-size: 15px; line-height: 1.55
}
.eb-ab-prose li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 16px; top: 16px; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 11px
}
.eb-ab-prose li strong { display: block; margin-bottom: 2px }
.eb-ab-prose > p:last-child { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px }

/* Facts */
.eb-ab-facts-sec { padding: 8px 0 72px }
.eb-ab-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.eb-ab-facts li {
  display: flex; flex-direction: column; gap: 4px; padding: 24px; border-radius: 20px;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 36px -24px rgba(30, 22, 49, .25)
}
.eb-ab-fact-ic { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--earth-soft); color: var(--purple); font-size: 18px }
.eb-ab-facts li:nth-child(even) .eb-ab-fact-ic { background: var(--sage-soft); color: var(--green) }
.eb-ab-facts strong { font-size: 30px; line-height: 1.1; letter-spacing: -.025em; color: var(--ink) }
.eb-ab-facts span:last-child { font-size: 14.5px; color: var(--muted-strong) }

/* How it works */
.eb-ab-how-lay { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center }
.eb-ab-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
.eb-ab-steps li { display: flex; gap: 16px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--line) }
.eb-ab-step-ic { flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font-size: 18px; box-shadow: 0 0 0 6px var(--sage-soft) }
.eb-ab-step-no { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--green) }
.eb-ab-steps h3 { margin: 2px 0 6px; font-size: 17.5px; letter-spacing: -.01em }
.eb-ab-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-strong) }
.eb-ab-how-pic { margin: 0; padding: 12px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .18) }
.eb-ab-how-pic img { display: block; width: 100%; height: auto; border-radius: 18px }

/* Closing CTA */
.eb-ab-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
  padding: clamp(32px, 4.5vw, 56px); border-radius: 28px; color: rgba(255, 255, 255, .88);
  background:
    linear-gradient(rgba(96, 26, 136, .82), rgba(96, 26, 136, .82)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat;
  box-shadow: 0 30px 60px -28px rgba(96, 26, 136, .6)
}
.eb-ab-cta-k { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber) }
.eb-ab-cta h2 { margin: 0 0 8px; color: #fff; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em }
.eb-ab-cta p { margin: 0; font-size: 16.5px }
.eb-ab-cta-actions { display: flex; flex-wrap: wrap; gap: 12px }
.eb-ab-cta-actions .btn { border-radius: 999px; padding: 14px 26px }
.eb-ab-cta-actions .btn-accent { color: var(--ink) }
.eb-ab-cta-actions .btn i { margin: 0 6px }
.eb-ab-cta-actions .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .5) }

@media (max-width: 1100px) {
  .eb-ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 960px) {
  .eb-ab-story-lay, .eb-ab-how-lay { grid-template-columns: 1fr; gap: 40px }
  .eb-ab-media { position: relative; top: 0; max-width: 560px; width: 100%; margin: 0 auto }
  .eb-ab-inset { right: 0 }
  .eb-ab-badge { left: 12px }
}
@media (max-width: 600px) {
  .eb-ab-prose ul, .eb-ab-steps { grid-template-columns: 1fr }
  .eb-ab-facts { gap: 10px }
  .eb-ab-facts li { padding: 18px }
  .eb-ab-facts strong { font-size: 24px }
  .eb-ab-media { padding-bottom: 48px }
  .eb-ab-badge { bottom: 96px; padding: 10px 14px 10px 10px }
  .eb-ab-cta-actions .btn { flex: 1 1 100%; justify-content: center }
}

/* Hero aside: the four promises as a 2x2 of glass chips. */
.eb-ab-hero-pts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.eb-ab-hero-pts li {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); color: #fff; font-weight: 700; font-size: 14.5px
}
.eb-ab-hero-pts i { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--ink); font-size: 13px }

/* Page header band (every inner page): the live site's purple vegetable-sketch pattern, and on
   wide screens the bowls photo fading in from the right. Split bands (with an aside) keep the
   pattern only, so the aside stays readable. */
.phero {
  background:
    linear-gradient(rgba(96, 26, 136, .78), rgba(96, 26, 136, .78)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat
}
.phero::after {
  display: block; content: ""; position: absolute; pointer-events: none;
  inset: 0 0 0 auto; width: 46%; opacity: 1; background-size: auto;
  background:
    linear-gradient(rgba(96, 26, 136, .35), rgba(96, 26, 136, .35)),
    url("../img/home/meal-bowls.webp") center 40% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%)
}
.phero-split::after { display: none }
@media (max-width: 860px) {
  .phero::after { width: 100%; opacity: .16; background: url("../img/home/meal-bowls.webp") center / cover no-repeat; -webkit-mask-image: none; mask-image: none }
}

/* =====================================================================
   FAQ page: help column (heading, photo + help card, policy links) and a numbered accordion
   - the same cards the home page FAQ uses.
   ===================================================================== */
.eb-faqpg-lay { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 56px; align-items: start }
.eb-faqpg-side { position: sticky; top: 140px }
.eb-faqpg-side h2 { margin: 0 0 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em }
.eb-faqpg-side h2 em {
  font-style: normal; color: var(--purple);
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-faqpg-intro { margin: 0 0 24px; padding-left: 14px; border-left: 3px solid var(--purple); font-size: 16px; line-height: 1.6; color: var(--muted-strong) }
.eb-faqpg-intro p { margin: 0 }
.eb-faqpg-pol { margin-top: 20px; display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: #fff; overflow: hidden }
.eb-faqpg-pol span { padding: 14px 18px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong) }
.eb-faqpg-pol a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease)
}
.eb-faqpg-pol a i { font-size: 12px; color: var(--purple); transition: transform .2s var(--ease) }
.eb-faqpg-pol a:hover { background: var(--earth-soft); color: var(--purple) }
.eb-faqpg-pol a:hover i { transform: translateX(3px) }
.eb-faqpg-main .eb-faq-list { gap: 12px }
.eb-faqpg-main .eb-faq-a { max-width: none }
.eb-faqpg-main .eb-faq-a > :first-child { margin-top: 0 }
.eb-faqpg-main .eb-faq-a > :last-child { margin-bottom: 0 }
.eb-faqpg-main .eb-faq-a ol, .eb-faqpg-main .eb-faq-a ul { margin: 0; padding-left: 20px }
.eb-faqpg-main .eb-faq-a a { color: var(--purple); font-weight: 700 }
.eb-faqpg-main .policy-stamp { margin-top: 20px }
@media (max-width: 960px) {
  .eb-faqpg-lay { grid-template-columns: 1fr; gap: 32px }
  /* Stacked: heading, then the questions, then the help card and policy links. */
  .eb-faqpg-lay { gap: 0 }
  .eb-faqpg-side { display: contents }
  .eb-faqpg-side > * { order: 0 }
  .eb-faqpg-main { order: 1; margin-bottom: 28px }
  .eb-faqpg-side .eb-faq-card { order: 2 }
  .eb-faqpg-pol { order: 3 }
}
@media (prefers-reduced-motion: reduce) { .eb-faqpg-pol a, .eb-faqpg-pol a i { transition: none } }
@media (max-width: 960px) {
  /* The eyebrow is a grid item when the side column is display:contents; keep it pill-sized. */
  .eb-faqpg-side .eb-courses-eyebrow { justify-self: start }
}

/* =====================================================================
   Contact page
   ===================================================================== */
.eb-ct-top { padding-bottom: 24px }
.eb-ct-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px }
.eb-ct-way {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start;
  padding: 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 44px -30px rgba(30, 22, 49, .3);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}
.eb-ct-way::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--purple) }
.eb-ct-way.is-green::before { background: var(--green) }
.eb-ct-way.is-amber::before { background: var(--amber) }
.eb-ct-way:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(30, 22, 49, .38) }
.eb-ct-ic { width: 54px; height: 54px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; background: var(--earth-soft); color: var(--purple); font-size: 22px }
.eb-ct-way.is-green .eb-ct-ic { background: var(--sage-soft); color: var(--green) }
.eb-ct-way.is-amber .eb-ct-ic { background: #FDF3D8; color: #B7791F }
.eb-ct-lbl { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-strong) }
.eb-ct-val { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); text-decoration: none; word-break: break-word }
a.eb-ct-val:hover { color: var(--purple) }
.eb-ct-note { margin: 8px 0 22px; font-size: 14.5px; line-height: 1.6; color: var(--muted-strong) }
.eb-ct-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px }
.eb-ct-acts .btn { border-radius: 999px; padding: 11px 20px; font-size: 14px }
.eb-ct-acts .btn i { margin-right: 6px }

.eb-ct-main { background: var(--paper) }
.eb-ct-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start }
.eb-ct-form { padding: clamp(26px, 3.5vw, 44px); border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -36px rgba(30, 22, 49, .3) }
.eb-ct-form h2 { margin: 0 0 12px; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; letter-spacing: -.025em }
.eb-ct-form h2 em {
  font-style: normal; color: var(--purple);
  background: linear-gradient(transparent 68%, rgba(240, 180, 41, .45) 68%, rgba(240, 180, 41, .45) 92%, transparent 92%)
}
.eb-ct-intro { margin: 0 0 24px; padding-left: 14px; border-left: 3px solid var(--purple); font-size: 15.5px; line-height: 1.65; color: var(--muted-strong) }
.eb-ct-form .enq-form { padding: 0; border: 0; box-shadow: none; background: none }
.eb-ct-form .enq-form .btn-primary, .eb-ct-form .enq-form button[type=submit] { border-radius: 999px; padding: 14px 30px }
.eb-ct-form input, .eb-ct-form select, .eb-ct-form textarea { border-radius: 12px }

.eb-ct-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 140px }
.eb-ct-map { position: relative; height: 300px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: #e9eef0; box-shadow: 0 20px 44px -30px rgba(30, 22, 49, .3) }
.eb-ct-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.eb-ct-bulk {
  padding: 26px; border-radius: 22px; color: rgba(255, 255, 255, .88);
  background:
    linear-gradient(rgba(96, 26, 136, .82), rgba(96, 26, 136, .82)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat
}
.eb-ct-bulk-ic { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--amber); color: var(--ink); font-size: 18px }
.eb-ct-bulk h3 { margin: 0 0 6px; color: #fff; font-size: 20px }
.eb-ct-bulk p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6 }
.eb-ct-bulk .btn { border-radius: 999px; color: var(--ink) }
.eb-ct-bulk .btn i { margin-right: 6px }
.eb-ct-faq {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px;
  background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--muted-strong); font-size: 14px; line-height: 1.45;
  transition: border-color .2s var(--ease)
}
.eb-ct-faq strong { display: block; color: var(--ink); font-size: 15.5px }
.eb-ct-faq > span:nth-child(2) { flex: 1 }
.eb-ct-faq-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-soft); color: var(--green); font-size: 17px }
.eb-ct-faq > i { color: var(--purple); transition: transform .2s var(--ease) }
.eb-ct-faq:hover { border-color: var(--purple) }
.eb-ct-faq:hover > i { transform: translateX(3px) }

@media (max-width: 1000px) {
  .eb-ct-ways { grid-template-columns: 1fr }
  .eb-ct-grid { grid-template-columns: 1fr }
  .eb-ct-side { position: static }
}
@media (max-width: 600px) {
  .eb-ct-way { padding: 22px }
  .eb-ct-acts .btn { flex: 1; justify-content: center }
  .eb-ct-map { height: 240px }
}
@media (prefers-reduced-motion: reduce) { .eb-ct-way, .eb-ct-faq > i { transition: none } .eb-ct-way:hover { transform: none } }
.eb-ct-form .enq-form button.btn-primary[type=submit] { border-radius: 999px; padding: 14px 32px; font-size: 15px }

/* =====================================================================
   "Shop the menu" mega (desktop): course cards with the category art, a Jain promo and the
   bulk-order panel on the brand's sketch pattern. The drawer keeps its own list styling.
   ===================================================================== */
.mega-go, .mega-jain, .mega-help-ic { display: none }
@media (min-width: 861px) {
  .mega { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(30, 22, 49, .25) }
  .mega-in { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; padding-block: 28px 32px; align-items: stretch }
  .mega-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line) }
  .mega-label {
    display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px; border-radius: 999px;
    background: rgba(27, 138, 98, .1); color: var(--green); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase
  }
  .mega-all {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
    border: 1.5px solid var(--purple); color: var(--purple); font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
    text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease)
  }
  .mega-all:hover { background: var(--purple); color: #fff }
  .mega-cats ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
  .mega-cats li a {
    display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: 16px;
    border: 1px solid var(--line); background: #fff; text-decoration: none;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
  }
  .mega-cats li a:hover { border-color: var(--purple); box-shadow: 0 14px 30px -14px rgba(96, 26, 136, .35); transform: translateY(-2px) }
  .mega-thumb { flex: none; width: 72px; height: 72px; border-radius: 12px; border: 0; box-shadow: none }
  .mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease) }
  .mega-cats li a:hover .mega-thumb img { transform: scale(1.06) }
  .mega-cat-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
  .mega-cat-txt b { font-size: 16.5px; color: var(--ink); letter-spacing: -.01em }
  .mega-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green) }
  .mega-go i { font-size: 11px; transition: transform .2s var(--ease) }
  .mega-cats li a:hover .mega-cat-txt b { color: var(--purple) }
  .mega-cats li a:hover .mega-go i { transform: translateX(3px) }

  .mega-side { display: flex; flex-direction: column; gap: 12px }
  .mega-jain {
    display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: 16px;
    background: var(--earth-soft); text-decoration: none; color: var(--muted-strong); font-size: 13.5px; line-height: 1.4;
    transition: box-shadow .2s var(--ease)
  }
  .mega-jain img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover }
  .mega-jain span { flex: 1; min-width: 0 }
  .mega-jain b { display: block; font-size: 16px; color: var(--purple) }
  .mega-jain > i { color: var(--purple); font-size: 13px; transition: transform .2s var(--ease) }
  .mega-jain:hover { box-shadow: 0 12px 26px -14px rgba(96, 26, 136, .45) }
  .mega-jain:hover > i { transform: translateX(3px) }
  .mega-help {
    flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 24px; border-radius: 18px; color: rgba(255, 255, 255, .86);
    background:
      linear-gradient(rgba(96, 26, 136, .84), rgba(96, 26, 136, .84)),
      #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat
  }
  .mega-help::before, .mega-help::after { display: none }
  .mega-help-ic { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; align-items: center; justify-content: center; margin-bottom: 12px; background: var(--amber); color: var(--ink); font-size: 16px }
  .mega-help strong { display: block; margin-bottom: 6px; color: #fff; font-size: 18px; line-height: 1.3 }
  .mega-help p { margin: 0 0 16px; font-size: 14px; line-height: 1.55 }
  .mega-help .btn { border-radius: 999px; padding: 10px 18px; color: var(--ink) }
  .mega-help .btn i { margin-right: 6px }
}
@media (prefers-reduced-motion: reduce) {
  .mega-cats li a, .mega-thumb img, .mega-go i, .mega-jain > i { transition: none }
  .mega-cats li a:hover { transform: none }
}
@media (min-width: 861px) {
  .mega .mega-cats .mega-thumb, .mega .mega-cats .mega-thumb img { border-radius: 12px }
}
@media (min-width: 861px) {
  /* theme-base.css rounds these with !important; the brand mega wants square category art. */
  .mega .mega-cats .mega-thumb { border-radius: 12px !important; padding: 0; background: var(--paper) !important }
  .mega .mega-cats .mega-thumb img { object-fit: cover; mix-blend-mode: normal }
}
.mega-all-tile { display: none }
@media (min-width: 861px) {
  .mega-cats li.mega-all-tile { display: block }
  .mega-cats li.mega-all-tile a { border-style: dashed; border-color: var(--line-strong); background: var(--paper) }
  .mega .mega-cats .mega-all-tile .mega-thumb { display: inline-flex; align-items: center; justify-content: center; background: var(--purple) !important; color: #fff; font-size: 24px }
  .mega-cats li.mega-all-tile a:hover { border-style: solid }
}
@media (min-width: 861px) { .mega .mega-cats .mega-all-tile .mega-thumb i { color: #fff; font-size: 24px } }

/* =====================================================================
   Product page
   ===================================================================== */
/* Name and lede */
.pdp-info h1 { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -.025em; line-height: 1.08 }
.pdp-lede { font-size: 16.5px; line-height: 1.65 }

/* Pack facts */
.eb-pfacts { list-style: none; margin: 20px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
.eb-pfacts li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 14px 12px;
  border-radius: 16px; background: var(--earth-soft); border: 1px solid transparent
}
.eb-pfacts li:nth-child(even) { background: var(--sage-soft) }
.eb-pfacts i { margin-bottom: 6px; font-size: 16px; color: var(--purple) }
.eb-pfacts li:nth-child(even) i { color: var(--green) }
.eb-pfacts span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-strong) }
.eb-pfacts strong { font-size: 17px; letter-spacing: -.01em; color: var(--ink) }
.eb-pfacts li.is-time { background: var(--purple) }
.eb-pfacts li.is-time i, .eb-pfacts li.is-time strong { color: #fff }
.eb-pfacts li.is-time span { color: rgba(255, 255, 255, .75) }

/* Assurance list as a 2x2 of chips */
.pdp-assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line) }
.pdp-assure li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; line-height: 1.35; color: var(--ink) }
.pdp-assure-ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--sage-soft); color: var(--green); font-size: 13px }

/* Gallery and buy box */
.pdp-gal-main, .pdp-buy-in { border-radius: 24px }
.pdp-buy-in { box-shadow: 0 30px 60px -32px rgba(30, 22, 49, .28) }
.pdp-now { font-size: 34px; letter-spacing: -.02em; color: var(--purple) }
.pdp-buy .btn-primary, .pdp-buy .btn-ghost { border-radius: 999px }

/* How to prepare band */
.eb-pprep { padding: 34px 0; background:
    linear-gradient(rgba(96, 26, 136, .86), rgba(96, 26, 136, .86)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat; color: rgba(255, 255, 255, .85) }
.eb-pprep-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; align-items: center }
.eb-pprep-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber) }
.eb-pprep h2 { margin: 6px 0 0; color: #fff; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em }
.eb-pprep-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; counter-reset: s }
.eb-pprep-steps li {
  counter-increment: s; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18)
}
.eb-pprep-ic { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--ink); font-size: 17px }
.eb-pprep-ic::after {
  content: counter(s); position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--purple); font-size: 10.5px; font-weight: 700
}
.eb-pprep-steps b { display: block; color: #fff; font-size: 15.5px }
.eb-pprep-steps div span { font-size: 13px; line-height: 1.4 }

/* About panel: ingredients as chips */
#panel-about h3 { margin-top: 26px; font-size: 19px }
#panel-about h3 + ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px }
#panel-about h3 + ul li {
  margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line);
  font-size: 14px; line-height: 1.3; color: var(--ink)
}
#panel-about h3 + ul li::before, #panel-about h3 + ul li::marker { content: none }

/* Who it's for: three across, so six cards make two full rows */
.pdp-apps .ind-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.pdp-apps .ind-item { border-radius: 18px }

@media (max-width: 1100px) {
  .eb-pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .eb-pprep-in { grid-template-columns: 1fr; gap: 18px }
}
@media (max-width: 760px) {
  .eb-pprep-steps { grid-template-columns: 1fr }
  .pdp-apps .ind-grid { grid-template-columns: 1fr }
  .pdp-assure { grid-template-columns: 1fr }
}
/* Pack facts: 2x2, icon beside the label and value, so nothing wraps in the narrow column. */
.eb-pfacts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.eb-pfacts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 14px }
.eb-pfacts i { grid-row: span 2; margin: 0; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #fff; font-size: 16px }
.eb-pfacts li.is-time i { background: rgba(255, 255, 255, .16) }
.eb-pfacts span { font-size: 11.5px }
.eb-pfacts strong { font-size: 16.5px; line-height: 1.2 }
@media (max-width: 600px) {
  .eb-pfacts { gap: 8px }
  .eb-pfacts li { grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; padding: 10px }
  .eb-pfacts i { width: 32px; height: 32px; border-radius: 10px; font-size: 14px }
  .eb-pfacts span { font-size: 10.5px; letter-spacing: .02em }
  .eb-pfacts strong { font-size: 15px }
}

/* =====================================================================
   Product detail tabs: a pill tab bar across the top of one white card, the panel under it,
   and the "Not sure what to pick?" help as a strip at the foot.
   ===================================================================== */
.pdp-detail-in { max-width: 1280px; margin-inline: auto }
.pdp-vt {
  display: block; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 30px 60px -36px rgba(30, 22, 49, .3)
}
.pdp-vt-nav {
  flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 16px 20px; background: var(--paper);
  border: 0; border-bottom: 1px solid var(--line)
}
.pdp-vt-tab {
  flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 11px 20px;
  border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted-strong);
  font-size: 15px; font-weight: 700; white-space: nowrap
}
.pdp-vt-tab::before, .pdp-vt-tab::after, .pdp-vt-tab + .pdp-vt-tab::after { display: none }
.pdp-vt-tab i { width: auto; font-size: 14px; color: var(--green) }
.pdp-vt-tab:hover { background: var(--earth-soft); border-color: transparent; color: var(--purple) }
.pdp-vt-tab.is-on { background: var(--purple); border-color: var(--purple); color: #fff; box-shadow: 0 8px 18px -6px rgba(96, 26, 136, .45) }
.pdp-vt-tab.is-on i { color: var(--amber) }
.pdp-vt-body { padding: clamp(22px, 3vw, 40px) }
.pdp-panel-h { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.02em }
.pdp-panel.prose > p { font-size: 16px; line-height: 1.75; max-width: 80ch }
#panel-about h3 { display: flex; align-items: center; gap: 10px; font-size: 17px }
#panel-about h3::before { content: ""; width: 24px; height: 3px; border-radius: 3px; background: var(--amber) }

/* Product FAQs as cards */
.pdp-vt-body .pdp-faqs { display: flex; flex-direction: column; gap: 10px }
.pdp-vt-body .pdp-faq, .pdp-vt-body .pdp-faq:first-child { border: 1px solid var(--line); border-radius: 14px; background: #fff }
.pdp-vt-body .pdp-faq + .pdp-faq { border-top: 1px solid var(--line) }
.pdp-vt-body .pdp-faq summary { padding: 16px 18px; font-weight: 700 }
.pdp-vt-body .pdp-faq[open] { border-color: var(--purple); border-left-width: 4px }
.pdp-vt-body .pdp-faq[open] summary { color: var(--purple) }
.pdp-vt-body .pdp-faq-a { padding: 0 18px 16px }

/* Help strip */
.pdp-vt-help {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; padding: 18px clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--line); background: var(--earth-soft)
}
.pdp-vt-help-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--purple); color: #fff; font-size: 17px }
.pdp-vt-help-txt { flex: 1; min-width: 220px }
.pdp-vt-help-t { margin: 0; font-size: 16px; color: var(--ink) }
.pdp-vt-help-p { margin: 2px 0 0; font-size: 14px; color: var(--muted-strong) }
.pdp-vt-help .btn { border-radius: 999px; padding: 10px 20px }
.pdp-vt-help .btn i { margin-right: 6px }
@media (max-width: 760px) {
  .pdp-vt-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 12px 14px }
  .pdp-vt-nav::-webkit-scrollbar { display: none }
  .pdp-vt-tab { padding: 9px 16px; font-size: 14px }
  .pdp-vt-help { display: flex }
  .pdp-vt-help .btn { flex: 1; justify-content: center }
}
.pdp-vt .pdp-vt-nav .pdp-vt-tab { border-radius: 999px }
.pdp-vt .pdp-vt-body .pdp-panel-h { margin-top: 0 }

/* Ingredients tab */
.eb-ing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px }
.eb-ing li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; line-height: 1.3; color: var(--ink)
}
.eb-ing li i { font-size: 11px; color: var(--green) }
.eb-ing-note {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 14px 16px; border-radius: 14px;
  background: var(--sage-soft); color: var(--green-dark, #146B4C); font-size: 14px
}
/* With the tabs running, the panel after a hidden one must not keep the stacked-layout gap. */
.pdp-vt-body .pdp-panel[hidden] ~ .pdp-panel { margin-top: 0 }

/* Buy box: WhatsApp and call as two tappable cards. */
.pdp-reach { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line) }
.pdp-reach-h { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong) }
.pdp-reach .pdp-wa, .pdp-reach .pdp-call {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border-radius: 16px;
  border: 1px solid var(--line); background: #fff; text-decoration: none; color: var(--ink); font-size: inherit;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
}
.pdp-reach-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff }
.pdp-wa .pdp-reach-ic { background: #25D366 }
.pdp-call .pdp-reach-ic { background: var(--purple); font-size: 16px }
.pdp-reach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3 }
.pdp-reach-txt b { font-size: 15.5px; color: var(--ink) }
.pdp-reach-txt small { font-size: 13px; color: var(--muted-strong) }
.pdp-reach-go { font-size: 12px; color: var(--muted-strong); transition: transform .2s var(--ease), color .2s var(--ease) }
.pdp-reach .pdp-wa:hover { border-color: #25D366; background: #F1FBF4; box-shadow: 0 12px 24px -14px rgba(37, 211, 102, .6) }
.pdp-reach .pdp-call:hover { border-color: var(--purple); background: var(--earth-soft); box-shadow: 0 12px 24px -14px rgba(96, 26, 136, .5) }
.pdp-reach a:hover .pdp-reach-go { transform: translateX(3px); color: var(--ink) }
@media (prefers-reduced-motion: reduce) { .pdp-reach a, .pdp-reach-go { transition: none } }
.pdp-reach { align-items: stretch }
.pdp-reach .pdp-wa, .pdp-reach .pdp-call { width: 100%; box-sizing: border-box }

/* Offers panel: two packs fanned on the green corner. */
.eb-offers-panel { min-height: 460px }
.eb-offers-panel > .eb-offers-packs { position: absolute; z-index: 1; right: 22px; bottom: 22px; width: 46%; max-width: 300px; list-style: none; margin: 0; padding: 0 }
.eb-offers-packs li {
  position: absolute; width: 62%; padding: 6px; border-radius: 16px; background: #fff;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .3)
}
.eb-offers-packs li:first-child { right: 34%; bottom: 14%; transform: rotate(-8deg) }
.eb-offers-packs li:last-child { right: 0; bottom: 0; transform: rotate(6deg); z-index: 1 }
.eb-offers-packs img { display: block; width: 100%; height: auto; border-radius: 11px }
.eb-offers-panel > .eb-offers-packs { aspect-ratio: 1 / 1 }
/* Keep the copy clear of the packs. */
.eb-offers-panel > p:not(.eb-offers-big) { max-width: 30ch }
@media (max-width: 1100px) {
  .eb-offers-panel { min-height: 0; padding-right: 42% }
  .eb-offers-panel > .eb-offers-packs { width: 36%; max-width: 260px; top: 50%; bottom: auto; transform: translateY(-50%) }
}
@media (max-width: 600px) {
  .eb-offers-panel { padding-right: 22px; padding-bottom: 210px }
  .eb-offers-panel > .eb-offers-packs { width: 200px; top: auto; bottom: 16px; right: 16px; transform: none }
}

/* Drawer "Menu by course" (phones/tablets): photo tiles with the category art filling the top,
   the name under it, and a "Full menu" tile so the two-up grid has no hole. */
@media (max-width: 860px) {
  .mega { background: none; box-shadow: none; border: 0 }
  .mega-in { padding: 4px 0 8px; background: none; box-shadow: none }
  .mega-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px }
  .mega-label { display: block; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-strong) }
  .mega-all { font-size: 13px; letter-spacing: .02em }
  .mega-cats ul { gap: 10px }
  .mega-cats ul a { padding: 0 0 12px; gap: 10px; overflow: hidden; border-radius: 16px }
  .mega .mega-cats .mega-thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 0 !important; padding: 0; border: 0; background: var(--paper) !important }
  .mega .mega-cats .mega-thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal }
  .mega-cat-txt b { font-size: 14.5px }
  .mega-cats ul a:hover, .mega-cats ul a:active { border-color: var(--purple) }
  .mega-cats li.mega-all-tile { display: block }
  .mega-cats li.mega-all-tile a { border-style: dashed; border-color: var(--line-strong); background: var(--paper) }
  .mega .mega-cats .mega-all-tile .mega-thumb { display: flex; align-items: center; justify-content: center; background: var(--purple) !important }
  .mega .mega-cats .mega-all-tile .mega-thumb i { color: #fff; font-size: 30px }
  .mega-side { display: none }
}

/* =====================================================================
   Policy pages (shipping, returns, privacy, terms): key facts, each H2 section as a card,
   tick bullets, and a sticky policy menu with the help card under it.
   ===================================================================== */
.eb-policy .policy-layout { gap: 48px; align-items: start }
.eb-policy-facts { list-style: none; margin: 0 0 28px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.eb-policy-facts li {
  display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 16px 18px !important; border-radius: 18px;
  background: var(--earth-soft); line-height: 1.3
}
.eb-policy-facts li:nth-child(4n+2), .eb-policy-facts li:nth-child(4n+3) { background: var(--sage-soft) }
.eb-policy-facts li::before { display: none !important }
.eb-policy-fact-ic { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--purple); font-size: 17px }
.eb-policy-facts li:nth-child(4n+2) .eb-policy-fact-ic, .eb-policy-facts li:nth-child(4n+3) .eb-policy-fact-ic { color: var(--green) }
.eb-policy-facts small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-strong) }
.eb-policy-facts b { display: block; font-size: 17px; color: var(--ink) }

.eb-policy .policy-body > p:first-of-type { font-size: 17px; line-height: 1.7; color: var(--ink) }
.eb-policy .policy-body h2 {
  display: flex; align-items: center; gap: 12px; margin: 34px 0 14px; font-size: clamp(21px, 2vw, 25px); letter-spacing: -.02em
}
.eb-policy .policy-body h2::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 3px; background: var(--amber) }
.eb-policy .policy-body h2 + ul {
  list-style: none; margin: 0; padding: 6px 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 16px 36px -28px rgba(30, 22, 49, .3)
}
.eb-policy .policy-body h2 + ul > li { position: relative; margin: 0; padding: 14px 0 14px 34px; border-bottom: 1px solid var(--line); line-height: 1.65 }
.eb-policy .policy-body h2 + ul > li:last-child { border-bottom: 0 }
.eb-policy .policy-body h2 + ul > li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 16px;
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sage-soft); color: var(--green); font-size: 10px
}
.eb-policy .policy-body a { color: var(--purple); font-weight: 700 }

/* Sidebar */
.eb-policy .policy-side { position: sticky; top: 140px }
.eb-policy .policy-nav { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid var(--line); background: #fff; overflow: hidden }
.eb-policy .policy-nav a {
  display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 13px 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: #fff; color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none
}
.eb-policy .policy-nav a:first-child { border-top: 0 }
.eb-policy .policy-nav a::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; color: var(--muted-strong) }
.eb-policy .policy-nav a:hover { background: var(--earth-soft); color: var(--purple) }
.eb-policy .policy-nav a.is-on { background: var(--purple); color: #fff; box-shadow: none }
.eb-policy .policy-nav a.is-on::after { color: var(--amber) }
.eb-policy .policy-nav a.is-on::before { display: none }
.eb-policy .policy-ask {
  margin-top: 16px; padding: 22px; border-radius: 18px; border: 0; color: rgba(255, 255, 255, .86);
  background:
    linear-gradient(rgba(96, 26, 136, .84), rgba(96, 26, 136, .84)),
    #5f0092 url("../img/eb-offers-bg.webp") center / cover no-repeat
}
.eb-policy .policy-ask-h { color: #fff; font-size: 17px }
.eb-policy .policy-ask p { color: rgba(255, 255, 255, .86) }
.eb-policy .policy-ask-tel {
  display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 10px; padding: 10px 18px; border-radius: 999px;
  background: var(--amber); color: var(--ink) !important; font-weight: 700; text-decoration: none
}
.eb-policy .policy-ask-tel i { color: var(--ink) }
.eb-policy .policy-ask-link { display: block; color: #fff !important; font-weight: 700; text-decoration: underline; text-underline-offset: 3px }
.eb-policy .policy-stamp { margin-top: 26px; font-size: 13.5px; color: var(--muted-strong) }
@media (max-width: 900px) {
  .eb-policy .policy-side { position: static }
}
@media (max-width: 600px) {
  .eb-policy-facts { grid-template-columns: 1fr }
  .eb-policy .policy-body h2 + ul { padding: 4px 16px }
}

/* Mega: the Jain range as one large card filling the side column (bulk panel removed). */
@media (min-width: 861px) {
  .mega-side { display: flex }
  .mega-side .mega-jain {
    flex: 1; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
    border-radius: 18px; background: var(--earth-soft); border: 1px solid transparent;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease)
  }
  .mega-side .mega-jain img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 70%; border-radius: 0; transition: transform .4s var(--ease) }
  .mega-jain-txt { display: block; padding: 16px 18px 6px; font-size: 14px; line-height: 1.45; color: var(--muted-strong) }
  .mega-jain-txt b { display: block; margin-bottom: 2px; font-size: 19px; color: var(--purple) }
  .mega-jain-go { display: inline-flex; align-items: center; gap: 8px; margin: 6px 18px 18px; font-size: 14px; font-weight: 700; color: var(--green) }
  .mega-jain-go i { font-size: 12px; transition: transform .2s var(--ease) }
  .mega-side .mega-jain:hover { border-color: var(--purple); box-shadow: 0 16px 34px -16px rgba(96, 26, 136, .45); transform: translateY(-2px) }
  .mega-side .mega-jain:hover img { transform: scale(1.04) }
  .mega-side .mega-jain:hover .mega-jain-go i { transform: translateX(3px) }
}
@media (min-width: 861px) {
  .mega-side .mega-jain img { aspect-ratio: 4 / 3; object-position: center 35% }
}
/* Mega: course cards grow to the Jain card's height, so there is no gap under the grid. */
@media (min-width: 861px) {
  .mega-cats { display: flex; flex-direction: column }
  .mega-cats ul { flex: 1; grid-auto-rows: 1fr }
  .mega-cats li a { height: 100%; padding: 12px 16px 12px 12px; gap: 16px }
  .mega .mega-cats .mega-thumb { width: 104px; height: 104px; border-radius: 14px !important }
  .mega-cat-txt b { font-size: 18px }
  .mega-go { font-size: 14px }
  .mega .mega-cats .mega-all-tile .mega-thumb i { font-size: 32px }
}
@media (min-width: 861px) {
  .mega .mega-cats .mega-thumb { width: 88px; height: 88px }
  .mega-cats li a { gap: 14px }
  .mega-cat-txt b { font-size: 17px; white-space: nowrap }
  .mega-go { font-size: 13.5px; white-space: nowrap }
}

/* Course tabs: a sliding purple pill instead of an instant colour swap, and the panel fades up. */
.eb-tabs { position: relative; isolation: isolate }
.eb-tabs-pill {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: var(--purple);
  box-shadow: 0 6px 16px rgba(96, 26, 136, .25); pointer-events: none
}
.eb-tabs.is-ready .eb-tabs-pill { transition: transform .38s cubic-bezier(.22, 1, .36, 1), width .38s cubic-bezier(.22, 1, .36, 1) }
.eb-shelf .eb-tabs [role=tab], .eb-shelf .eb-tabs [role=tab][aria-selected=true] { background: transparent; box-shadow: none }
.eb-tabs [role=tab] { transition: color .25s ease }
.eb-tabs [role=tab][aria-selected=true]:hover { color: #fff }
.eb-tabs [role=tab]:not([aria-selected=true]):hover { background: transparent; color: var(--purple) }
.eb-panel.is-in { animation: ebPanelIn .45s cubic-bezier(.22, 1, .36, 1) both }
@keyframes ebPanelIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .eb-tabs.is-ready .eb-tabs-pill, .eb-tabs [role=tab] { transition: none }
  .eb-panel.is-in { animation: none }
}
/* Sixth tile: Jain in the phone drawer, Full menu on desktop. */
.mega-jain-tile { display: none }
@media (max-width: 860px) {
  .mega-cats li.mega-jain-tile { display: block }
  .mega-cats li.mega-all-tile { display: none }
}

/* Product card: "% off" and "In stock" as pills stacked in the photo's top-left corner. */
.pcard-badges { position: absolute; left: 12px; top: 12px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none }
.pcard-badges .pcard-off { position: static }
.pcard-instock {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: #fff; color: var(--green); font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.2;
  box-shadow: 0 4px 12px rgba(30, 22, 49, .14)
}
.pcard-instock i { font-size: 11px }
.pcard-instock.is-out { background: #fff; color: var(--muted-strong) }
@media (max-width: 600px) {
  .pcard-badges { left: 8px; top: 8px; gap: 4px }
  .pcard-instock, .pcard-badges .pcard-off { padding: 4px 9px; font-size: 11px }
}
/* "In stock" sits bottom-left of the photo, level with the heart, clear of the pack's logo. */
.pcard-img { position: relative }
.pcard-badges { top: 12px; bottom: 12px; justify-content: space-between }
@media (max-width: 600px) { .pcard-badges { top: 8px; bottom: 8px } }
.pcard-badges .pcard-instock { margin-top: auto }

/* ---------- Combo deal: Flat 10% OFF on combo packs and meal kits ---------- */
.pcard-off.pcard-deal { letter-spacing:.02em }
.pdp-deal { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:10px 0 4px; padding:10px 12px;
  border:1px dashed rgba(96,26,136,.35); border-radius:12px; background:#FAF7FD; font-size:14px; color:var(--ink, #1E1631) }
.pdp-deal-tag { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  background:var(--purple); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.02em }
.pdp-deal strong { color:var(--green) }

/* ---------- Product page: "Included in this combo" ---------- */
.eb-cbox { margin:18px 0 6px; padding:20px; border:1px solid #E6DCF0; border-radius:18px;
  background:linear-gradient(180deg,#FAF7FD 0%,#fff 70%); box-shadow:0 10px 26px rgba(96,26,136,.06) }
.eb-cbox-head { display:flex; align-items:center; gap:12px; margin-bottom:14px }
.eb-cbox-ic { flex:0 0 44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--purple); color:#fff; font-size:18px }
.eb-cbox-eyebrow { display:block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green) }
.eb-cbox-h { margin:2px 0 0; font-size:19px; line-height:1.2; color:var(--ink,#1E1631) }
.eb-cbox-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.eb-cbox-item { display:flex; align-items:center; gap:12px; height:100%; padding:8px 12px 8px 8px; border:1px solid #EEE5F6;
  border-radius:14px; background:#fff; color:inherit; text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s }
a.eb-cbox-item:hover { border-color:rgba(96,26,136,.35); box-shadow:0 8px 18px rgba(96,26,136,.10); transform:translateY(-1px) }
.eb-cbox-img { flex:0 0 52px; height:52px; border-radius:10px; overflow:hidden; background:#F4EEF9; display:grid; place-items:center; color:var(--purple) }
.eb-cbox-img img { width:100%; height:100%; object-fit:cover }
.eb-cbox-name { flex:1; min-width:0; font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink,#1E1631) }
a.eb-cbox-item:hover .eb-cbox-name { color:var(--purple) }
.eb-cbox-qty { flex:0 0 auto; min-width:34px; padding:4px 9px; border-radius:999px; background:#EAF6F1; color:var(--green);
  font-size:13px; font-weight:700; text-align:center }
.eb-cbox-foot { display:flex; align-items:center; gap:8px; margin:14px 0 0; padding-top:12px; border-top:1px dashed #E6DCF0;
  font-size:13px; color:var(--muted-strong,#5B5470) }
.eb-cbox-foot i { color:var(--green) }
@media (max-width:600px){
  .eb-cbox { padding:16px }
  .eb-cbox-list { grid-template-columns:1fr }
}
/* One clean row per pouch; a long kit (7-Day) packs into two compact columns. */
.eb-cbox-list { grid-template-columns:1fr; gap:8px }
.eb-cbox-img img { transform:scale(1.3) }
.eb-cbox-list.is-many { grid-template-columns:repeat(2,minmax(0,1fr)) }
.eb-cbox-list.is-many .eb-cbox-item { gap:9px; padding:6px 8px 6px 6px; border-radius:12px }
.eb-cbox-list.is-many .eb-cbox-img { flex-basis:38px; height:38px; border-radius:8px }
.eb-cbox-list.is-many .eb-cbox-name { font-size:13px }
.eb-cbox-list.is-many .eb-cbox-qty { min-width:28px; padding:2px 7px; font-size:12px }
@media (max-width:600px){ .eb-cbox-list.is-many { grid-template-columns:1fr } }
/* Grid of tiles: photo on top, quantity chip on the photo, name underneath. */
.eb-cbox-list, .eb-cbox-list.is-many { grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px }
.eb-cbox-item, .eb-cbox-list.is-many .eb-cbox-item { position:relative; flex-direction:column; align-items:stretch; gap:8px; padding:8px 8px 10px; border-radius:14px; text-align:center }
.eb-cbox-img, .eb-cbox-list.is-many .eb-cbox-img { flex:none; width:100%; height:auto; aspect-ratio:1/1; border-radius:10px }
.eb-cbox-img img { transform:none }
.eb-cbox-img i { font-size:26px }
.eb-cbox-name, .eb-cbox-list.is-many .eb-cbox-name { flex:1; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1.25 }
.eb-cbox-qty, .eb-cbox-list.is-many .eb-cbox-qty { position:absolute; top:12px; right:12px; min-width:0; padding:3px 8px; font-size:12px;
  background:var(--green); color:#fff; box-shadow:0 3px 8px rgba(27,138,98,.3) }
@media (max-width:600px){ .eb-cbox-list, .eb-cbox-list.is-many { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px } }
@media (max-width:360px){ .eb-cbox-list, .eb-cbox-list.is-many { grid-template-columns:repeat(2,minmax(0,1fr)) } }
/* 2 or 4 pouches sit as a neat 2 x N block instead of leaving one tile alone on a row. */
.eb-cbox-list.is-pairs { grid-template-columns:repeat(2,minmax(0,1fr)) }
.eb-cbox-list.is-pairs .eb-cbox-img { width:76%; margin:0 auto }
/* Multipack: the chosen pack, one tile per pouch, 3 to a row. */
.eb-cbox-list.is-pack { grid-template-columns:repeat(3,minmax(0,1fr)) }
.eb-cbox-list.is-pack .eb-cbox-qty { background:#fff; color:var(--green); box-shadow:0 2px 6px rgba(30,22,49,.15) }

/* ---------- Product page: a kit's meal plan (Breakfast / Lunch / Dinner) ---------- */
.eb-cplan { display:grid; gap:16px }
.eb-cplan-meal h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:15px; line-height:1.3; color:var(--purple) }
.eb-cplan-meal h3 i { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#F4EEF9; font-size:13px }
.eb-cplan-meal ul { list-style:none; margin:0; padding:0; display:grid; gap:6px }
.eb-cplan-meal li { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border:1px solid #EEE5F6; border-radius:12px; background:#fff }
.eb-cplan-pics { flex:none; display:flex }
.eb-cplan-pic { display:grid; place-items:center; width:44px; height:44px; overflow:hidden; border-radius:8px; border:2px solid #fff; background:#F4EEF9; color:var(--purple) }
.eb-cplan-pic + .eb-cplan-pic { margin-left:-14px }
.eb-cplan-pic img { width:100%; height:100%; object-fit:cover }
.eb-cplan-name { min-width:0; font-size:13.5px; font-weight:600; line-height:1.35; color:var(--ink,#1E1631) }
.eb-cplan-name a { color:inherit; text-decoration:none }
.eb-cplan-name a:hover { color:var(--purple); text-decoration:underline }
.eb-cplan-plus { margin:0 3px; color:var(--green); font-weight:700 }
/* Meal plan as a grid of tiles: photo on top, name under it; dishes served together share a tile.
   A tile left over at the end of a row stretches to fill it, so no meal ends on a gap. */
.eb-cplan-meal ul { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
.eb-cplan-meal li { flex-direction:column; align-items:stretch; gap:8px; padding:7px 7px 9px; border-radius:14px; text-align:center }
.eb-cplan-pics { width:100% }
.eb-cplan-pic { flex:1 1 0; width:auto; min-width:0; height:auto; aspect-ratio:1/1; border-radius:10px }
.eb-cplan-pic + .eb-cplan-pic { margin-left:-12% }
.eb-cplan-name { flex:1; display:block; font-size:12.5px; line-height:1.3 }
.eb-cplan-plus { margin:0 2px }
.eb-cplan-meal li:last-child:nth-child(3n+1) { grid-column:1 / -1; flex-direction:row; align-items:center; gap:12px; padding:7px 12px 7px 7px; text-align:left }
.eb-cplan-meal li:last-child:nth-child(3n+1) .eb-cplan-pics { flex:0 0 96px; width:96px }
.eb-cplan-meal li:last-child:nth-child(3n+2) { grid-column:span 2; flex-direction:row; align-items:center; gap:12px; text-align:left }
.eb-cplan-meal li:last-child:nth-child(3n+2) .eb-cplan-pics { flex:0 0 96px; width:96px }
.eb-cplan-meal li:last-child .eb-cplan-name { font-size:13.5px }
@media (max-width:380px){ .eb-cplan-meal ul { gap:6px } .eb-cplan-meal li { padding:6px 5px 8px } .eb-cplan-name { font-size:11.5px; overflow-wrap:anywhere } }

/* Product sliders: the arrows sit at the height of the photo's upper half. Centred on the whole
   card they landed on the "In stock" pill and the wishlist heart. */
.slider:has(> .prod-track) > .slider-nav .slider-btn { top:170px }
/* Narrow offers panel (slider mode): compact text so the panel stays the height of the cards beside
   it; the two packs sit small in the green corner, under the button. */
@media (min-width:1101px){
  .eb-offers-lay.is-slider { align-items:stretch }
  .eb-offers-lay.is-slider .eb-offers-panel { min-height:0; padding:26px 28px }
  .eb-offers-lay.is-slider .eb-offers-panel h2 { margin:12px 0 4px; font-size:30px }
  .eb-offers-lay.is-slider .eb-offers-big { margin-bottom:10px; font-size:17px }
  .eb-offers-lay.is-slider .eb-offers-panel > p:not(.eb-offers-big) { margin-bottom:16px; font-size:14px; line-height:1.5 }
  .eb-offers-lay.is-slider .eb-offers-panel > .eb-offers-packs { right:16px; bottom:14px; width:112px }
}
.eb-offers-panel > .btn { position:relative; z-index:2 }
/* Too narrow for the packs beside a full-height button: the panel goes without them. */
@media (min-width:1101px) and (max-width:1279px){ .eb-offers-lay.is-slider .eb-offers-panel > .eb-offers-packs { display:none } }

/* Pack picker on the product page (_helpers/offers.php offer_packs). */
.eb-packs { flex:0 0 100%; width:100%; border:0; margin:0 0 16px; padding:0; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 10px }
.eb-packs[hidden] { display:none }
.eb-packs legend { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:0; margin-bottom:16px; font-weight:700; font-size:15px; color:#1E1631 }
.eb-packs legend em { padding:3px 10px; border-radius:999px; background:#FDF3D7; color:#6B4A00; font-style:normal; font-size:12px; font-weight:700; white-space:nowrap }
.eb-pack { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; margin:0; padding:18px 8px 11px; border:1.5px solid #E2DBEA; border-radius:14px; background:#fff; text-align:center; cursor:pointer; font-weight:400; transition:border-color .15s, background-color .15s, box-shadow .15s, transform .15s }
.eb-pack:hover { border-color:#601A88; transform:translateY(-1px); box-shadow:0 6px 16px rgba(96,26,136,.1) }
.eb-pack:has(input:checked) { border-color:#601A88; background:#F8F2FC; box-shadow:0 8px 20px rgba(96,26,136,.16) }
.eb-pack:has(input:focus-visible) { outline:2px solid #601A88; outline-offset:2px }
.eb-pack input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none }
.eb-pack-name { font-weight:800; font-size:15px; line-height:1.2; color:#1E1631 }
.eb-pack-off { padding:2px 8px; border-radius:6px; background:#1B8A62; color:#fff; font-style:normal; font-size:11px; font-weight:700; line-height:1.35; white-space:nowrap }
.eb-pack-price { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 6px; margin-top:2px; line-height:1.25 }
.eb-pack-price strong { font-size:17px; font-weight:800; color:#1E1631 }
.eb-pack:has(input:checked) .eb-pack-price strong, .eb-pack:has(input:checked) .eb-pack-name { color:#601A88 }
.eb-pack-price del { font-size:12px; color:#6F667F }
.eb-pack-each { font-size:12px; color:#5F5670 }
.eb-pack-flag { position:absolute; top:-9px; left:50%; transform:translateX(-50%); padding:2px 9px; border-radius:999px; background:#F0B429; color:#1E1631; font-size:11px; font-weight:800; line-height:1.4; white-space:nowrap; box-shadow:0 2px 6px rgba(30,22,49,.15) }
.eb-pack.is-out { opacity:.55; cursor:not-allowed }
.eb-pack.is-out:hover { border-color:#E2DBEA; transform:none; box-shadow:none }
.eb-pack-sum { grid-column:1 / -1; margin:0; padding:9px 12px; border-radius:10px; background:#E6F4EE; font-size:13px; font-weight:600; line-height:1.4; color:#14694A }
.eb-pack-sum[hidden] { display:none }
/* A wide buy box (it runs full width below the desktop layout) takes the four in one line. */
.pdp-form:has(.eb-packs) { container-type:inline-size }
@container (min-width:520px){ .eb-packs { grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (prefers-reduced-motion:reduce){ .eb-pack, .eb-pack:hover { transition:none; transform:none } }

/* An odd course left over on the last row sits in the middle rather than alone at the left. */
.eb-course-list > li:last-child:nth-child(3n+1) { grid-column:2 }
@media (max-width:600px){
  .eb-course-list > li:last-child:nth-child(3n+1) { grid-column:auto }
  .eb-course-list > li:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 6px) }
}
/* Phone drawer: same for Jain when it lands alone on the last row. */
@media (max-width:860px){ .mega-cats li.mega-jain-tile:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 6px) } }

/* Footer: Call us and Email us each hold one or two links inside one card. */
.ef-contact-two { display:flex; align-items:center; gap:12px; height:100%; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.16); color:#fff }
.ef-contact .ef-contact-two a { display:block; height:auto; padding:2px 0; border-radius:0; background:none }
.ef-contact .ef-contact-two a:hover { background:none; color:var(--amber) }
.eb-ct-val + .eb-ct-val { margin-top:2px }

/* Ingredients tab on a combo: one list per dish inside it. */
.eb-ing-dish { margin:20px 0 10px; font-size:15px; font-weight:700; color:var(--ink) }
.eb-ing-dish:first-of-type { margin-top:0 }
.eb-ing-dish + .eb-ing { margin-bottom:6px }

/* Home: intro videos. Brand purple, with the two reels resting on a haldi-yellow thali. */
.eb-vids { background: var(--navy-dark); overflow: hidden }
.eb-vids-lay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 72px; align-items: center }
.eb-vids .eb-courses-eyebrow { background: rgba(255, 255, 255, .12); color: var(--amber) }
.eb-vids-head h2 { margin: 0 0 14px; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -.025em; color: #fff }
.eb-vids-head h2 em { font-style: normal; color: var(--amber) }
.eb-vids-head > p { margin: 0 0 22px; max-width: 46ch; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .84) }
.eb-vids-points { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; color: #fff; font-size: 15.5px; font-weight: 600 }
.eb-vids-points li { display: flex; align-items: center; gap: 10px }
.eb-vids-points i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--ink); font-size: 11px }
.eb-vids-cta { border-radius: 999px; padding: 14px 26px }
.eb-vids-cta i { margin-left: 8px; font-size: 13px }

.eb-vids-list { position: relative; list-style: none; margin: 0; padding: 28px 0 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
/* The thali: a solid disc and its rim, wider than the cards so it shows on every side. */
.eb-vids-list::before {
  content: ""; position: absolute; top: 50%; left: 50%; width: 112%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--orange);
  box-shadow: inset 0 0 0 14px var(--amber), inset 0 0 0 16px rgba(138, 90, 0, .28)
}
.eb-vid { position: relative; transition: transform .28s var(--ease, ease) }
.eb-vid:nth-child(1) { transform: translateY(-14px) rotate(-2.5deg) }
.eb-vid:nth-child(2) { transform: translateY(22px) rotate(2.5deg) }
.eb-vid:hover, .eb-vid:focus-within { transform: translateY(0) rotate(0) }
.eb-vid-box {
  position: relative; aspect-ratio: 9 / 16; border-radius: 20px; overflow: hidden; background: var(--ink-deep);
  border: 5px solid #fff; box-shadow: 0 22px 44px rgba(43, 14, 64, .42)
}
.eb-vid-box img { display: block; width: 100%; height: 100%; object-fit: cover }
.eb-vid-play {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; color: var(--ink);
  display: flex; align-items: flex-end; justify-content: flex-start
}
.eb-vid-play i {
  position: relative; z-index: 1; margin: 0 0 104px 18px; width: 58px; height: 58px; border-radius: 50%; background: var(--amber);
  display: flex; align-items: center; justify-content: center; font-size: 19px; padding-left: 3px;
  box-shadow: 0 0 0 0 rgba(246, 201, 85, .6); animation: eb-vid-pulse 2.4s ease-out infinite
}
.eb-vid-play:hover i { background: #fff }
.eb-vid-play:focus-visible { outline: 3px solid var(--amber); outline-offset: -8px; border-radius: 16px }
@keyframes eb-vid-pulse { to { box-shadow: 0 0 0 18px rgba(246, 201, 85, 0) } }
.eb-vid-by {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 56px 18px 18px; pointer-events: none;
  background: linear-gradient(transparent, rgba(30, 22, 49, .88) 55%); color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 1.35
}
.eb-vid-by strong { display: block; margin-bottom: 2px; font-size: 19px; line-height: 1.2; color: #fff }
.eb-vid-modal {
  position: fixed; inset: 0; margin: auto; padding: 0; border: 0; overflow: visible; background: transparent;
  width: min(92vw, calc(90vh * 9 / 16)); width: min(92vw, calc(90dvh * 9 / 16)); height: fit-content; max-width: none; max-height: none
}
.eb-vid-modal::backdrop { background: rgba(30, 22, 49, .86) }
.eb-vid-modal video { display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 16px; background: var(--ink-deep) }
.eb-vid-close {
  position: absolute; z-index: 1; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 19px
}
.eb-vid-close:hover { background: var(--navy) }
.eb-vid-close:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px }
@media (prefers-reduced-motion: reduce) {
  .eb-vid { transition: none }
  .eb-vid-play i { animation: none }
}
@media (max-width: 900px) {
  .eb-vids-lay { grid-template-columns: minmax(0, 1fr); gap: 24px }
  .eb-vids-list { max-width: 520px; width: 100%; margin: 0 auto }
}
@media (max-width: 560px) {
  .eb-vids-list { gap: 12px; padding: 22px 0 34px }
  .eb-vids-list::before { width: 104% }
  .eb-vid:nth-child(1) { transform: translateY(-8px) rotate(-1.5deg) }
  .eb-vid:nth-child(2) { transform: translateY(12px) rotate(1.5deg) }
  .eb-vid-box { border-width: 3px; border-radius: 16px }
  .eb-vid-by { padding: 40px 10px 12px; font-size: 12.5px }
  .eb-vid-by strong { font-size: 15.5px }
  .eb-vid-play i { margin: 0 0 88px 10px; width: 44px; height: 44px; font-size: 15px }
}

/* Home: Instagram slider. Instagram's embed needs about 326px, so the cards keep that width. */
.eb-ig .slider-track.eb-ig-list > li { flex: 0 0 min(340px, 88%) }
.eb-ig-card { height: 560px; border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--line) }
.eb-ig-card iframe { display: block; width: 100%; height: 100%; border: 0 }
.eb-ig-card a { position: relative; display: block; height: 100% }
.eb-ig-card img { display: block; width: 100%; height: 100%; object-fit: cover }
.eb-ig-mark {
  position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(30, 22, 49, .66); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px
}
.eb-ig-more { margin: 32px 0 0; text-align: center }

/* Product page: the shorter buy box. Price and stock share a line, pack cards lose their tall
   stack, and the three ways to reach us sit in one row. */
.pdp-buy-compact .pdp-buy-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; padding: 22px }
.pdp-buy-compact .pdp-buy-in > * { flex: 0 0 100%; min-width: 0 }
.pdp-buy-compact .pdp-buy-in > .pdp-price { flex: 0 0 auto; width: auto; min-height: 38px; margin: 0; padding-right: 92px }
/* The stock line goes under the price, clear of the Save button in the corner. */
.pdp-buy-compact .pdp-buy-in > .pdp-stock { flex: 0 0 100%; margin: -8px 0 0 }
.pdp-buy-compact .pdp-form { margin: 2px 0 0 }
.pdp-buy-compact .pdp-form .btn { flex: 1 1 120px }
.pdp-buy-compact .eb-packs { margin-bottom: 2px; gap: 12px 8px }
.pdp-buy-compact .eb-packs legend { margin-bottom: 12px }
.pdp-buy-compact .eb-pack { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; padding: 12px 10px 9px; text-align: left }
.pdp-buy-compact .eb-pack-name { font-size: 14px; white-space: nowrap }
.pdp-buy-compact .eb-pack-off { padding: 2px 6px }
.pdp-buy-compact .eb-pack-price, .pdp-buy-compact .eb-pack-each { grid-column: 1 / -1 }
.pdp-buy-compact .eb-pack-price { justify-content: flex-start; margin: 0 }
.pdp-buy-compact .pdp-pin { order: 1 }
.pdp-buy-compact .pdp-reach { display: contents }
.pdp-buy-compact .pdp-reach-h { order: 2; flex: 0 0 100%; margin: 2px 0 -4px }
.pdp-buy-compact .pdp-quote, .pdp-buy-compact .pdp-reach .pdp-wa, .pdp-buy-compact .pdp-reach .pdp-call {
  order: 3; flex: 1 1 auto; width: auto; min-width: 0; height: 44px; margin: 0; padding: 0 10px; gap: 6px; justify-content: center; border-radius: 999px; font-size: 13px; white-space: nowrap
}
.pdp-buy-compact .pdp-reach-ic { width: 26px; height: 26px; border-radius: 50%; font-size: 13px }
.pdp-buy-compact .pdp-reach-txt { flex: 0 1 auto }
.pdp-buy-compact .pdp-reach-txt b { font-size: 13px; white-space: nowrap }
.pdp-buy-compact .pdp-reach-txt small, .pdp-buy-compact .pdp-reach-go { display: none }
.pdp-buy-compact .pdp-hsn { order: 4 }
@media (max-width: 560px) {
  .pdp-buy-compact .pdp-buy-in { padding: 16px }
  .pdp-buy-compact .eb-pack { padding: 12px 8px 9px; gap: 4px }
  .pdp-buy-compact .eb-pack-name { font-size: 13px }
  .pdp-buy-compact .eb-pack-off { padding: 2px 5px; font-size: 10.5px }
  .pdp-buy-compact .eb-pack-price strong { font-size: 16px }
  .pdp-buy-compact .pdp-pin input[type="text"] { font-size: 14px; letter-spacing: 0 }
}
@media (max-width: 380px) {
  .pdp-buy-compact .eb-pack { padding-inline: 6px }
  .pdp-buy-compact .eb-pack-name { font-size: 12.5px }
  .pdp-buy-compact .eb-pack-off { padding: 2px 4px; font-size: 10px }
  .pdp-buy-compact .pdp-quote, .pdp-buy-compact .pdp-reach .pdp-wa, .pdp-buy-compact .pdp-reach .pdp-call { padding: 0 6px; gap: 4px }
  .pdp-buy-compact .pdp-reach-ic { width: 22px; height: 22px; font-size: 11px }
  .pdp-buy-compact .pdp-reach-txt b { font-size: 12.5px }
}
@media (max-width: 340px) {
  .pdp-buy-compact .eb-pack { grid-template-columns: minmax(0, 1fr) }
  .pdp-buy-compact .eb-pack-off { justify-self: start }
}

/* Home: the last row is Jain across two columns, its photo filling the height the square
   All Products card sets, then All Products. On a phone both are ordinary single cards. */
@media (min-width: 601px) {
  .eb-course-list > li.is-wide { grid-column: span 2 }
  .eb-course-list > li.is-wide .eb-course-pic { flex: 1; aspect-ratio: auto; min-height: 0 }
  .eb-course-list > li.is-wide .eb-course-pic img { position: absolute; inset: 0; object-position: center bottom }
}

/* Home: the licence credit under the Who it is for photo. */
.eb-who-credit { display: block; margin: 8px 4px -2px; text-align: right; font-size: 11px; line-height: 1.3 }
.eb-who-credit a { color: var(--muted-strong); text-decoration: none }
.eb-who-credit a:hover { text-decoration: underline }