/* BBK Foods v27: refined health benefits copy */

:root{--sun:#ffd400;--sun-hot:#ffb800;--sun-soft:#fff1a8;--cream:#fff9dc;--ink:#17130a;--text:#241b0a;--muted:#725b25;--line:rgba(23,19,10,.11);--shadow:0 24px 70px rgba(23,19,10,.10)}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;width:100%;overflow-x:hidden;font-family:Calibri,Candara,"Segoe UI",Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.34),transparent 18rem),radial-gradient(circle at 90% 4%,rgba(255,255,255,.28),transparent 18rem),linear-gradient(180deg,#ffd400 0%,#ffc72c 42%,#ffdf66 100%)}img{max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit}.scroll-progress{position:fixed;top:0;left:0;width:0%;height:3px;background:var(--ink);z-index:999}.top-note{background:var(--ink);color:#fff2a8;text-align:center;padding:.72rem 1rem;font-size:1rem;font-weight:800}.site-header{position:sticky;top:0;z-index:60;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:.9rem clamp(1rem,4vw,4rem);background:rgba(255,212,0,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(23,19,10,.08)}.brand{display:flex;align-items:center;gap:.75rem;min-width:0}.brand img{width:52px;height:52px;object-fit:cover;border-radius:16px;border:1px solid rgba(23,19,10,.1);box-shadow:0 10px 24px rgba(23,19,10,.1)}.brand-text strong{display:block;color:var(--ink);font-size:1.18rem}.brand-text span{display:block;color:var(--muted);font-size:.96rem}.desktop-nav{display:flex;gap:1.25rem;color:rgba(23,19,10,.76);font-size:1.05rem;font-weight:700}.desktop-nav a:hover{color:var(--ink)}
.header-button,.primary-button,.secondary-button,.soft-button{min-height:48px;padding:.82rem 1.14rem;border-radius:999px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;font-weight:800;display:inline-flex;align-items:center;justify-content:center}.header-button,.primary-button{border:1px solid var(--ink);background:var(--ink);color:#fff;box-shadow:0 14px 34px rgba(23,19,10,.18)}.secondary-button,.soft-button{border:1px solid rgba(23,19,10,.13);background:rgba(255,253,238,.82);color:var(--ink)}.header-button:hover,.primary-button:hover,.secondary-button:hover,.soft-button:hover{transform:translateY(-2px)}
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(2.75rem,7vw,5.2rem) clamp(1rem,5vw,5rem) 2.2rem}.eyebrow{margin:0 0 .75rem;color:rgba(23,19,10,.62);text-transform:uppercase;letter-spacing:.14em;font-size:.92rem;font-weight:900}h1,h2,h3{margin:0;color:var(--ink)}h1{max-width:780px;font-size:clamp(3.2rem,7.4vw,6.2rem);line-height:.96;letter-spacing:-.055em}h2{font-size:clamp(2rem,4.7vw,3.5rem);line-height:1.04;letter-spacing:-.035em}h3{font-size:1.28rem;line-height:1.22}.hero-text,p{color:var(--muted);font-size:1.13rem;line-height:1.65}.hero-text{max-width:680px;margin:1.15rem 0 1.35rem;font-size:clamp(1.16rem,2vw,1.32rem)}.hero-tags{display:flex;flex-wrap:wrap;gap:.55rem}.hero-tags span{display:inline-flex;padding:.55rem .78rem;border-radius:999px;background:rgba(255,253,238,.76);border:1px solid rgba(23,19,10,.08);color:var(--ink);font-size:.98rem;font-weight:800}.hero-tags .highlight-tag{background:var(--ink);color:#fff2a8;border-color:var(--ink)}.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.35rem}
.hero-showcase-safe{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;min-width:0}.hero-food-card{display:grid;gap:.75rem;padding:.82rem;border-radius:28px;background:rgba(255,253,238,.84);border:1px solid rgba(23,19,10,.10);box-shadow:var(--shadow);min-width:0;transition:transform .22s ease}.hero-food-card:hover{transform:rotate(-1deg) translateY(-4px)}.hero-main-food{grid-row:span 2}.hero-food-card img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:22px}.hero-food-card small{display:block;color:var(--muted);font-weight:800;font-size:.94rem;margin-bottom:.22rem}.hero-food-card strong{display:block;color:var(--ink);font-size:1.2rem}
.quality-highlight{margin:0 clamp(1rem,5vw,5rem) 1rem;padding:1rem 1.2rem;border-radius:26px;background:rgba(255,253,238,.82);border:1px solid rgba(23,19,10,.10);box-shadow:var(--shadow);display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center}.quality-highlight strong{color:var(--ink);font-size:1.25rem}.quality-highlight span{color:var(--muted);font-size:1.08rem}.section,.section-small{padding:clamp(2.6rem,6vw,4.5rem) clamp(1rem,5vw,5rem)}
.quick-vibe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.vibe-card,.product-card,.bulk-card,.cta-card{background:rgba(255,253,238,.82);border:1px solid rgba(23,19,10,.10);box-shadow:var(--shadow)}.vibe-card{padding:1.15rem;border-radius:26px}.vibe-card span{display:inline-grid;place-items:center;width:42px;height:42px;margin-bottom:.75rem;border-radius:50%;background:var(--sun);color:var(--ink);font-weight:900}.vibe-card strong{display:block;color:var(--ink);font-size:1.22rem}.vibe-card p{margin:.45rem 0 0}.section-header{max-width:820px;margin:0 auto 1.7rem;text-align:center}.section-header.split{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);gap:2rem;align-items:end;text-align:left}.filter-row{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin:-.2rem 0 1.6rem}.filter-pill{border:1px solid rgba(23,19,10,.14);border-radius:999px;background:rgba(255,253,238,.78);color:var(--ink);padding:.78rem 1rem;font-size:1rem;font-weight:800;cursor:pointer}.filter-pill.active{background:var(--ink);color:#fff2a8}.snack-section{background:rgba(255,253,238,.18);border-top:1px solid rgba(23,19,10,.08);border-bottom:1px solid rgba(23,19,10,.08)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.product-card{display:flex;flex-direction:column;min-height:100%;padding:.95rem;border-radius:28px;transition:transform .22s ease,box-shadow .22s ease}.product-card:hover{transform:translateY(-6px);box-shadow:0 30px 90px rgba(23,19,10,.14)}.product-card.hide-card{display:none}button.product-image{display:block;width:100%;border:0;padding:0;background:transparent;cursor:zoom-in}.product-image{aspect-ratio:1/1;border-radius:22px;overflow:hidden;margin-bottom:.9rem}.product-image img{display:block;width:100%;height:100%;object-fit:cover}.product-badge{align-self:flex-start;padding:.42rem .65rem;border-radius:999px;background:rgba(255,212,0,.2);color:var(--ink);font-size:.9rem;font-weight:900;border:1px solid rgba(23,19,10,.08);margin-bottom:.8rem}.product-top{display:flex;justify-content:space-between;gap:.8rem;align-items:flex-start}.price{white-space:nowrap;font-size:1.34rem;font-weight:900;color:var(--ink)}.product-tags{display:flex;flex-wrap:wrap;gap:.42rem;margin:0 0 1rem}.product-tag{padding:.42rem .62rem;border-radius:999px;background:rgba(255,255,255,.52);color:var(--muted);border:1px solid rgba(23,19,10,.08);font-size:.9rem;font-weight:800}.product-tag.fasting{background:var(--ink);color:#fff2a8;border-color:var(--ink)}.ingredients-btn{align-self:flex-start;margin:0 0 .9rem;border:1px solid rgba(23,19,10,.10);border-radius:999px;background:#fffaf0;color:var(--ink);padding:.65rem .88rem;font-weight:800;cursor:pointer}.product-actions{display:grid;grid-template-columns:auto 1fr;gap:.65rem;align-items:center;margin-top:auto}.qty{display:inline-flex;align-items:center;background:#fffaf0;border:1px solid rgba(23,19,10,.10);border-radius:999px;overflow:hidden}.qty button{width:38px;height:42px;border:0;background:transparent;color:var(--ink);font-size:1.1rem;font-weight:900;cursor:pointer}.qty span{min-width:30px;text-align:center;font-weight:900}.add-btn{border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;padding:.82rem 1rem;font-weight:900;cursor:pointer}
.bulk-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:1rem;align-items:center;padding:1.35rem;border-radius:30px}.bulk-list{display:grid;gap:.7rem}.bulk-list div{display:flex;justify-content:space-between;gap:1rem;padding:.92rem;border-radius:18px;background:rgba(255,255,255,.48);border:1px solid rgba(23,19,10,.08)}.bulk-list strong{color:var(--ink);font-size:1.08rem}.bulk-list span{color:var(--muted);font-weight:800;white-space:nowrap}.bulk-button{grid-column:1/-1;justify-self:start}.final-cta{display:flex;justify-content:space-between;gap:2rem;align-items:center}.cta-copy{max-width:680px}.cta-card{width:min(420px,100%);padding:1rem;border-radius:28px;display:grid;gap:.8rem}.full{width:100%;margin:0}
.cart-panel{position:fixed;top:0;right:0;z-index:100;width:min(450px,100%);height:100vh;background:var(--cream);border-left:1px solid rgba(23,19,10,.10);box-shadow:-18px 0 60px rgba(23,19,10,.12);transform:translateX(110%);transition:transform .25s ease;display:flex;flex-direction:column}.cart-panel.open{transform:translateX(0)}.cart-header,.cart-footer{padding:1.2rem}.cart-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(23,19,10,.08)}.cart-footer{margin-top:auto;border-top:1px solid rgba(23,19,10,.08)}.icon-button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(23,19,10,.10);background:#fffaf0;color:var(--ink);font-size:1.5rem;cursor:pointer}.cart-items{padding:1rem;overflow-y:auto}.cart-item{display:grid;grid-template-columns:1fr auto;gap:.6rem;padding:.9rem 0;border-bottom:1px dashed rgba(23,19,10,.10)}.cart-item strong{display:block;color:var(--ink)}.cart-item span,.cart-note{color:var(--muted);line-height:1.6}.remove-btn{border:0;background:transparent;color:var(--ink);font-weight:800;cursor:pointer}.cart-total{display:flex;justify-content:space-between;margin-bottom:1rem;font-size:1.12rem}.floating-cart{position:fixed;right:1rem;bottom:1rem;z-index:75;display:inline-flex;align-items:center;gap:.7rem;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;padding:.95rem 1rem;font-weight:900;box-shadow:0 16px 40px rgba(23,19,10,.18);cursor:pointer}.floating-cart strong{display:grid;place-items:center;min-width:28px;height:28px;border-radius:50%;background:var(--sun);color:var(--ink)}.floating-cart.pulse{animation:cartPulse .45s ease}@keyframes cartPulse{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.ingredient-modal,.image-modal{position:fixed;inset:0;z-index:130;display:none;place-items:center;padding:1rem}.image-modal{z-index:160}.ingredient-modal.open,.image-modal.open{display:grid}.modal-overlay{position:absolute;inset:0;background:rgba(23,19,10,.42);backdrop-filter:blur(6px)}.modal-card,.image-modal-card{position:relative;width:min(560px,100%);padding:1.5rem;border-radius:30px;background:#fffaf0;border:1px solid rgba(23,19,10,.10);box-shadow:0 22px 80px rgba(23,19,10,.16)}.image-modal-card{width:min(92vw,760px);max-height:90vh;padding:.75rem;overflow:hidden}.image-modal-card img{display:block;width:100%;max-height:82vh;object-fit:contain;border-radius:20px}.modal-close,.image-modal-close{position:absolute;right:1rem;top:1rem;z-index:2}.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,150%);z-index:150;background:var(--ink);color:#fff;padding:.9rem 1rem;border-radius:999px;font-weight:800;box-shadow:0 16px 40px rgba(23,19,10,.18);transition:transform .25s ease;font-size:1.04rem}.toast.show{transform:translate(-50%,0)}
.footer{display:grid;grid-template-columns:1fr auto;gap:1rem 2rem;padding:2rem clamp(1rem,5vw,5rem) 1rem;border-top:1px solid rgba(23,19,10,.08);color:var(--ink)}.footer p{margin:.35rem 0 0;color:var(--muted)}.footer-links{grid-column:1/-1;display:flex;gap:1rem;flex-wrap:wrap}.footer-links a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:4px}.copyright{padding:0 1rem 2rem;text-align:center;color:rgba(23,19,10,.72);font-size:1rem}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.desktop-nav{display:none}.hero,.bulk-card,.final-cta,.section-header.split{grid-template-columns:1fr}.quick-vibe,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.final-cta{display:grid;align-items:start}.cta-card{width:100%}}
@media(max-width:700px){.top-note{padding:.64rem 1rem;font-size:.92rem;line-height:1.35}.site-header{padding:.78rem 1rem;gap:.75rem}.brand img{width:48px;height:48px}.brand-text span{display:none}.brand-text strong{font-size:1.02rem}.header-button{min-height:42px;padding:.68rem .9rem;font-size:.95rem}.hero{display:block;padding:2rem 1rem 1.25rem}h1{font-size:clamp(2.65rem,13vw,3.45rem);line-height:1.02}h2{font-size:clamp(2rem,9vw,2.65rem)}.hero-text,p,.product-card p,.section-header p,.vibe-card p,.bulk-copy p,.cta-copy p{font-size:1.05rem;line-height:1.58}.hero-actions{flex-direction:column}.hero-actions .primary-button,.hero-actions .secondary-button{width:100%}.hero-showcase-safe{grid-template-columns:1fr;gap:.8rem;margin-top:1.25rem}.hero-main-food{grid-row:auto}.hero-food-card{grid-template-columns:92px 1fr;align-items:center;border-radius:22px}.hero-food-card img{width:92px;height:92px;aspect-ratio:auto;border-radius:18px}.quality-highlight{margin:.8rem 1rem 0}.section,.section-small{padding:2.7rem 1rem}.section-header,.section-header.split{text-align:left;margin-bottom:1.35rem}.quick-vibe,.product-grid{grid-template-columns:1fr}.filter-row{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem;-webkit-overflow-scrolling:touch}.filter-pill{flex:0 0 auto;font-size:.95rem}.product-actions{grid-template-columns:1fr}.qty{width:100%;justify-content:space-between}.add-btn,.ingredients-btn,.primary-button,.secondary-button,.soft-button{width:100%}.bulk-list div{flex-direction:column;gap:.2rem}.bulk-button{justify-self:stretch}.cta-card{padding:.8rem}.footer{grid-template-columns:1fr;text-align:center}.footer-links{justify-content:center}.cart-panel{width:100%}.toast{width:calc(100% - 2rem);text-align:center;border-radius:18px}}
@media(prefers-color-scheme:dark){:root{--sun:#17130a;--sun-hot:#000;--sun-soft:#f2c117;--cream:#17130a;--ink:#f2c117;--text:#fff3c7;--muted:#e8cf73;--line:rgba(242,193,23,.18);--shadow:0 24px 70px rgba(0,0,0,.35)}body{color:var(--text);background:radial-gradient(circle at 16% 10%,rgba(242,193,23,.18),transparent 18rem),radial-gradient(circle at 88% 8%,rgba(242,193,23,.12),transparent 18rem),linear-gradient(180deg,#000 0%,#17130a 42%,#211a0c 100%)}.top-note{background:#f2c117;color:#17130a}.site-header{background:#17130a;border-bottom-color:rgba(242,193,23,.18)}h1,h2,h3,.brand-text strong,.price,.product-top h3,.hero-food-card strong,.vibe-card strong,.bulk-list strong,.footer-links a,.quality-highlight strong{color:#f2c117}p,.hero-text,.brand-text span,.desktop-nav,.eyebrow,.hero-food-card small,.quality-highlight span,.footer p,.bulk-list span,.cart-note,.cart-item span,.modal-card p,.modal-card small{color:#e8cf73}.header-button,.primary-button,.add-btn,.floating-cart,.hero-tags .highlight-tag,.product-tag.fasting,.filter-pill.active{background:#f2c117;color:#17130a;border-color:#f2c117}.secondary-button,.soft-button,.ingredients-btn,.qty,.icon-button,.filter-pill{background:rgba(242,193,23,.08);color:#f2c117;border-color:rgba(242,193,23,.22)}.hero-food-card,.quality-highlight,.vibe-card,.product-card,.bulk-card,.cta-card,.cart-panel,.modal-card,.image-modal-card{background:rgba(23,19,10,.88);border-color:rgba(242,193,23,.18)}.hero-tags span,.product-tag,.product-badge{color:#f2c117;background:rgba(242,193,23,.08);border-color:rgba(242,193,23,.16)}.snack-section{background:rgba(0,0,0,.18)}.floating-cart strong{background:#17130a;color:#f2c117;border:1px solid rgba(242,193,23,.24)}.toast{background:#f2c117;color:#17130a}.scroll-progress{background:#f2c117}.copyright{color:#e8cf73}}



/* ===== V8: bigger logo + cleaner exciting hero block ===== */
.brand img {
  width: 68px !important;
  height: 68px !important;
  border-radius: 20px !important;
}

.site-header {
  min-height: 92px !important;
}

.brand-text strong {
  font-size: 1.32rem !important;
}

.brand-text span {
  font-size: 1.02rem !important;
}

.hero-brand-burst {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  align-self: stretch;
}

.burst-card,
.burst-mini,
.burst-pill-grid div {
  background: rgba(255,253,238,0.84);
  border: 1px solid rgba(23,19,10,0.10);
  box-shadow: var(--shadow);
}

.burst-card {
  min-height: 350px;
  border-radius: 36px;
  padding: clamp(1.5rem, 4vw, 2.2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.burst-card::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  right: -90px;
  top: -90px;
  background: radial-gradient(circle, rgba(255,212,0,0.7), rgba(255,212,0,0.05) 66%, transparent 70%);
}

.burst-card::after {
  content: "BBK";
  position: absolute;
  right: 1.4rem;
  bottom: -0.8rem;
  font-size: clamp(5rem, 11vw, 8.5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.08em;
  color: rgba(23,19,10,0.08);
}

.burst-card span {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff2a8;
  font-weight: 900;
  margin-bottom: 1rem;
}

.burst-card strong {
  position: relative;
  z-index: 1;
  max-width: 560px;
  color: var(--ink);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.burst-card p {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 1rem 0 0;
  font-size: 1.14rem;
}

.burst-pill-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.burst-pill-grid div {
  min-height: 74px;
  border-radius: 22px;
  padding: 1rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink);
  font-weight: 900;
}

.burst-mini {
  border-radius: 28px;
  padding: 1.2rem;
}

.burst-mini strong {
  display: block;
  color: var(--ink);
  font-size: 1.28rem;
  margin-bottom: 0.3rem;
}

.burst-mini span {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.45;
}

@media (max-width: 700px) {
  .site-header {
    min-height: 82px !important;
  }

  .brand img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
  }

  .brand-text strong {
    font-size: 1.12rem !important;
  }

  .hero-brand-burst {
    margin-top: 1.25rem;
  }

  .burst-card {
    min-height: 280px;
    border-radius: 28px;
  }

  .burst-card strong {
    font-size: clamp(2.35rem, 12vw, 3.25rem);
  }

  .burst-pill-grid {
    grid-template-columns: 1fr;
  }

  .burst-pill-grid div {
    min-height: 58px;
  }
}

@media (max-width: 430px) {
  .brand img {
    width: 56px !important;
    height: 56px !important;
  }

  .site-header {
    min-height: 78px !important;
  }
}

@media (prefers-color-scheme: dark) {
  .burst-card,
  .burst-mini,
  .burst-pill-grid div {
    background: rgba(23,19,10,0.88);
    border-color: rgba(242,193,23,0.18);
  }

  .burst-card span {
    background: #f2c117;
    color: #17130a;
  }

  .burst-card strong,
  .burst-mini strong,
  .burst-pill-grid div {
    color: #f2c117;
  }

  .burst-card p,
  .burst-mini span {
    color: #e8cf73;
  }

  .burst-card::after {
    color: rgba(242,193,23,0.08);
  }
}

/* ===== V9 translucent header while scrolling ===== */
.site-header {
  transition: background 0.25s ease, backdrop-filter 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.site-header.scrolled {
  background: rgba(255, 212, 0, 0.50) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  border-bottom-color: rgba(23,19,10,0.10) !important;
  box-shadow: 0 10px 36px rgba(23,19,10,0.08);
}

@media (prefers-color-scheme: dark) {
  .site-header.scrolled {
    background: rgba(23, 19, 10, 0.50) !important;
    border-bottom-color: rgba(242,193,23,0.18) !important;
    box-shadow: 0 10px 36px rgba(0,0,0,0.25);
  }
}



/* ===== V10 iOS-style liquid glass header ===== */
.site-header {
  position: sticky;
  isolation: isolate;
  transition: background 0.28s ease, backdrop-filter 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 7px clamp(0.7rem, 2vw, 1.2rem);
  z-index: -1;
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.08) 42%, rgba(255,255,255,0.22)),
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.55), transparent 34%),
    rgba(255, 212, 0, 0.25);
  border: 1px solid rgba(255,255,255,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(23,19,10,0.08),
    0 16px 42px rgba(23,19,10,0.10);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  transition: opacity 0.28s ease;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: 8px clamp(0.72rem, 2vw, 1.22rem);
  z-index: -1;
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 10%, rgba(255,255,255,0.24) 30%, transparent 48%);
  transform: translateX(-16%);
  transition: opacity 0.28s ease;
}

.site-header.scrolled {
  background: rgba(255, 212, 0, 0.25) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

.site-header.scrolled::before,
.site-header.scrolled::after {
  opacity: 1;
}

@media (max-width: 700px) {
  .site-header::before,
  .site-header::after {
    inset-left: 0.45rem;
    inset-right: 0.45rem;
    border-radius: 24px;
  }
}

@media (prefers-color-scheme: dark) {
  .site-header::before {
    background:
      linear-gradient(135deg, rgba(242,193,23,0.18), rgba(255,255,255,0.05) 42%, rgba(242,193,23,0.12)),
      radial-gradient(circle at 20% 15%, rgba(242,193,23,0.22), transparent 34%),
      rgba(23, 19, 10, 0.25);
    border: 1px solid rgba(242,193,23,0.22);
    box-shadow:
      inset 0 1px 0 rgba(242,193,23,0.18),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 16px 42px rgba(0,0,0,0.28);
  }

  .site-header::after {
    background: linear-gradient(120deg, transparent 10%, rgba(242,193,23,0.13) 30%, transparent 48%);
  }

  .site-header.scrolled {
    background: rgba(23, 19, 10, 0.25) !important;
  }
}



/* ===== V11 more visible iOS liquid glass + softer yellow background ===== */
:root {
  --sun: #f4cf35;
  --sun-hot: #efbd18;
  --sun-soft: #fff2b5;
}

/* Softer yellow page background */
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,0.46), transparent 18rem),
    radial-gradient(circle at 90% 4%, rgba(255,255,255,0.38), transparent 18rem),
    linear-gradient(180deg, #f4cf35 0%, #f8dc63 44%, #fff0a8 100%) !important;
}

.site-header {
  background: rgba(244, 207, 53, 0.86) !important;
}

/* More visible glass effect after scrolling */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(34px) saturate(210%) contrast(106%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(210%) contrast(106%) !important;
  border-bottom-color: rgba(255,255,255,0.32) !important;
  box-shadow: none !important;
}

/* Actual rounded glass slab */
.site-header::before {
  inset: 6px clamp(0.55rem, 1.8vw, 1rem) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.58), rgba(255,255,255,0.12) 38%, rgba(255,255,255,0.30)),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.72), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(244,207,53,0.18), transparent 42%),
    rgba(255, 255, 255, 0.10) !important;
  border: 1px solid rgba(255,255,255,0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    inset 0 -1px 0 rgba(23,19,10,0.09),
    0 18px 48px rgba(23,19,10,0.12) !important;
  backdrop-filter: blur(34px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(34px) saturate(220%) !important;
}

/* Animated-looking shine layer */
.site-header::after {
  inset: 7px clamp(0.58rem, 1.8vw, 1.02rem) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.10) 18%,
      rgba(255,255,255,0.42) 32%,
      rgba(255,255,255,0.12) 46%,
      transparent 64%) !important;
  transform: translateX(-10%) !important;
}

.site-header.scrolled::before,
.site-header.scrolled::after {
  opacity: 1 !important;
}

/* Keep header content crisp above glass */
.site-header > * {
  position: relative;
  z-index: 1;
}

/* Slightly glassy content cards for visual consistency */
.hero-food-card,
.quality-highlight,
.vibe-card,
.product-card,
.bulk-card,
.cta-card {
  background: rgba(255, 253, 238, 0.72) !important;
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

/* Mobile glass should be stronger so users can notice it */
@media (max-width: 700px) {
  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .site-header::before,
  .site-header::after {
    inset-left: 0.35rem !important;
    inset-right: 0.35rem !important;
    border-radius: 24px !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(circle at 16% 10%, rgba(242,193,23,0.14), transparent 18rem),
      radial-gradient(circle at 88% 8%, rgba(255,255,255,0.06), transparent 18rem),
      linear-gradient(180deg, #000000 0%, #151108 42%, #201907 100%) !important;
  }

  .site-header {
    background: rgba(23, 19, 10, 0.86) !important;
  }

  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.06) !important;
    border-bottom-color: rgba(242,193,23,0.18) !important;
  }

  .site-header::before {
    background:
      linear-gradient(135deg, rgba(242,193,23,0.18), rgba(255,255,255,0.04) 38%, rgba(242,193,23,0.10)),
      radial-gradient(circle at 18% 12%, rgba(242,193,23,0.22), transparent 34%),
      rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(242,193,23,0.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(242,193,23,0.24),
      inset 0 -1px 0 rgba(0,0,0,0.22),
      0 18px 48px rgba(0,0,0,0.32) !important;
  }

  .site-header::after {
    background:
      linear-gradient(115deg,
        transparent 0%,
        rgba(242,193,23,0.05) 18%,
        rgba(242,193,23,0.18) 32%,
        rgba(255,255,255,0.04) 46%,
        transparent 64%) !important;
  }

  .hero-food-card,
  .quality-highlight,
  .vibe-card,
  .product-card,
  .bulk-card,
  .cta-card {
    background: rgba(23,19,10,0.76) !important;
  }
}



/* ===== V12 softer starting yellow + lighter glass blur ===== */
:root {
  --sun: #f7d85b;
  --sun-hot: #f3c935;
  --sun-soft: #fff4bf;
}

/* Softer yellow right from the starting hero */
body {
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,0.58), transparent 18rem),
    radial-gradient(circle at 90% 6%, rgba(255,255,255,0.42), transparent 20rem),
    linear-gradient(180deg, #fff0a8 0%, #f9dc63 42%, #f7d85b 100%) !important;
}

/* Top bar before scroll should also feel softer */
.site-header {
  background: rgba(255, 240, 168, 0.82) !important;
}

/* Less blur, cleaner iOS-like glass on scroll */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(14px) saturate(145%) contrast(102%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%) contrast(102%) !important;
}

/* Reduce glass slab blur and shine intensity */
.site-header::before {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.42), rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.20)),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.48), transparent 34%),
    rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(23,19,10,0.06),
    0 12px 32px rgba(23,19,10,0.08) !important;
  backdrop-filter: blur(14px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%) !important;
}

.site-header::after {
  background:
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,0.06) 18%,
      rgba(255,255,255,0.22) 32%,
      rgba(255,255,255,0.08) 46%,
      transparent 64%) !important;
}

/* Softer hero/content glass cards */
.hero-food-card,
.quality-highlight,
.vibe-card,
.product-card,
.bulk-card,
.cta-card {
  background: rgba(255, 253, 238, 0.78) !important;
  backdrop-filter: blur(6px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
}

/* Keep yellow highlight less loud */
.hero-tags .highlight-tag,
.product-tag.fasting,
.filter-pill.active,
.primary-button,
.header-button,
.add-btn,
.floating-cart {
  box-shadow: 0 10px 28px rgba(23,19,10,0.14) !important;
}

@media (max-width: 700px) {
  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }

  .site-header::before {
    backdrop-filter: blur(12px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background:
      radial-gradient(circle at 16% 10%, rgba(242,193,23,0.10), transparent 18rem),
      radial-gradient(circle at 88% 8%, rgba(255,255,255,0.04), transparent 18rem),
      linear-gradient(180deg, #060503 0%, #151108 46%, #201907 100%) !important;
  }

  .site-header.scrolled {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
  }

  .site-header::before {
    backdrop-filter: blur(14px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(145%) !important;
    box-shadow:
      inset 0 1px 0 rgba(242,193,23,0.16),
      inset 0 -1px 0 rgba(0,0,0,0.18),
      0 12px 32px rgba(0,0,0,0.24) !important;
  }

  .hero-food-card,
  .quality-highlight,
  .vibe-card,
  .product-card,
  .bulk-card,
  .cta-card {
    background: rgba(23,19,10,0.80) !important;
    backdrop-filter: blur(6px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
  }
}



/* ===== V13 clearer liquid glass header: less fog, stronger liquid edges ===== */
.site-header {
  background: rgba(255, 240, 168, 0.78) !important;
}

/* Around 15% fill, much lower blur */
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(7px) saturate(155%) contrast(104%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(155%) contrast(104%) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Liquid-glass slab: clearer, less foggy, more visible rim and shine */
.site-header::before {
  inset: 6px clamp(0.55rem, 1.8vw, 1rem) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.07) 42%, rgba(255,255,255,0.22)),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.40), transparent 34%),
    radial-gradient(circle at 85% 80%, rgba(255,212,0,0.16), transparent 45%),
    rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255,255,255,0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.74),
    inset 0 -1px 0 rgba(23,19,10,0.08),
    inset 1px 0 0 rgba(255,255,255,0.24),
    inset -1px 0 0 rgba(255,255,255,0.12),
    0 10px 26px rgba(23,19,10,0.07) !important;
  backdrop-filter: blur(7px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(165%) !important;
}

/* Stronger liquid highlight without adding fog */
.site-header::after {
  inset: 7px clamp(0.58rem, 1.8vw, 1.02rem) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(112deg,
      transparent 0%,
      rgba(255,255,255,0.00) 15%,
      rgba(255,255,255,0.42) 28%,
      rgba(255,255,255,0.12) 42%,
      transparent 60%),
    radial-gradient(circle at 10% 18%, rgba(255,255,255,0.34), transparent 18%),
    radial-gradient(circle at 92% 22%, rgba(255,255,255,0.20), transparent 16%) !important;
  transform: translateX(-6%) !important;
  mix-blend-mode: screen;
}

.site-header.scrolled::before,
.site-header.scrolled::after {
  opacity: 1 !important;
}

/* Keep text crisp inside glass */
.site-header > * {
  position: relative;
  z-index: 1;
}

/* Make cards less glassy than header so header effect stands out */
.hero-food-card,
.quality-highlight,
.vibe-card,
.product-card,
.bulk-card,
.cta-card {
  backdrop-filter: blur(3px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
}

/* Add a tiny hover sheen to nav items for liquid feel */
.desktop-nav a,
.header-button {
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.desktop-nav a:hover {
  opacity: 0.82;
}

@media (max-width: 700px) {
  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(6px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(150%) !important;
  }

  .site-header::before {
    backdrop-filter: blur(6px) saturate(155%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(155%) !important;
    border-radius: 24px !important;
  }

  .site-header::after {
    border-radius: 24px !important;
  }
}

@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(23,19,10,0.78) !important;
  }

  .site-header.scrolled {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(7px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(150%) !important;
  }

  .site-header::before {
    background:
      linear-gradient(135deg, rgba(242,193,23,0.14), rgba(255,255,255,0.03) 42%, rgba(242,193,23,0.08)),
      radial-gradient(circle at 18% 12%, rgba(242,193,23,0.18), transparent 34%),
      rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(242,193,23,0.26) !important;
    box-shadow:
      inset 0 1px 0 rgba(242,193,23,0.26),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      inset 1px 0 0 rgba(242,193,23,0.10),
      inset -1px 0 0 rgba(242,193,23,0.08),
      0 10px 26px rgba(0,0,0,0.22) !important;
    backdrop-filter: blur(7px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(7px) saturate(150%) !important;
  }

  .site-header::after {
    background:
      linear-gradient(112deg,
        transparent 0%,
        rgba(242,193,23,0.00) 15%,
        rgba(242,193,23,0.18) 28%,
        rgba(255,255,255,0.05) 42%,
        transparent 60%),
      radial-gradient(circle at 10% 18%, rgba(242,193,23,0.12), transparent 18%),
      radial-gradient(circle at 92% 22%, rgba(242,193,23,0.10), transparent 16%) !important;
  }
}

/* ===== V16 removed numbered intro boxes ===== */
.quality-highlight {
  margin-bottom: 0 !important;
}

#combos {
  padding-top: clamp(2.4rem, 5vw, 3.8rem) !important;
}

/* ===== V17 handmade hero + warmer footer ===== */
.copyright {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.copyright::first-letter {
  color: var(--ink);
}

/* ===== V18 theme toggle: light default, manual dark only ===== */
html:not(.dark-mode){color-scheme:light}html.dark-mode{color-scheme:dark}
.theme-toggle{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;border-radius:999px;background:rgba(255,253,238,.72);border:1px solid rgba(23,19,10,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.theme-option{border:0;border-radius:999px;padding:.58rem .75rem;background:transparent;color:var(--ink);font-weight:900;cursor:pointer;min-height:38px;line-height:1}.theme-option.active{background:var(--ink);color:#fff2a8;box-shadow:0 8px 20px rgba(23,19,10,.14)}
@media (prefers-color-scheme:dark){
 html:not(.dark-mode) body{color:var(--text)!important;background:radial-gradient(circle at 10% 8%,rgba(255,255,255,.58),transparent 18rem),radial-gradient(circle at 90% 6%,rgba(255,255,255,.42),transparent 20rem),linear-gradient(180deg,#fff0a8 0%,#f9dc63 42%,#f7d85b 100%)!important}
 html:not(.dark-mode) .top-note{background:var(--ink)!important;color:#fff2a8!important} html:not(.dark-mode) .site-header{background:rgba(255,240,168,.78)!important}
 html:not(.dark-mode) h1,html:not(.dark-mode) h2,html:not(.dark-mode) h3,html:not(.dark-mode) .brand-text strong,html:not(.dark-mode) .price,html:not(.dark-mode) .product-top h3,html:not(.dark-mode) .hero-food-card strong,html:not(.dark-mode) .vibe-card strong,html:not(.dark-mode) .bulk-list strong,html:not(.dark-mode) .footer-links a,html:not(.dark-mode) .quality-highlight strong,html:not(.dark-mode) .burst-card strong,html:not(.dark-mode) .burst-mini strong,html:not(.dark-mode) .burst-pill-grid div{color:var(--ink)!important}
 html:not(.dark-mode) p,html:not(.dark-mode) .hero-text,html:not(.dark-mode) .brand-text span,html:not(.dark-mode) .desktop-nav,html:not(.dark-mode) .eyebrow,html:not(.dark-mode) .hero-food-card small,html:not(.dark-mode) .quality-highlight span,html:not(.dark-mode) .footer p,html:not(.dark-mode) .bulk-list span,html:not(.dark-mode) .cart-note,html:not(.dark-mode) .cart-item span,html:not(.dark-mode) .modal-card p,html:not(.dark-mode) .modal-card small,html:not(.dark-mode) .burst-card p,html:not(.dark-mode) .burst-mini span{color:var(--muted)!important}
 html:not(.dark-mode) .header-button,html:not(.dark-mode) .primary-button,html:not(.dark-mode) .add-btn,html:not(.dark-mode) .floating-cart,html:not(.dark-mode) .hero-tags .highlight-tag,html:not(.dark-mode) .product-tag.fasting,html:not(.dark-mode) .filter-pill.active,html:not(.dark-mode) .burst-card span{background:var(--ink)!important;color:#fff2a8!important;border-color:var(--ink)!important}
 html:not(.dark-mode) .secondary-button,html:not(.dark-mode) .soft-button,html:not(.dark-mode) .ingredients-btn,html:not(.dark-mode) .qty,html:not(.dark-mode) .icon-button,html:not(.dark-mode) .filter-pill{background:rgba(255,253,238,.82)!important;color:var(--ink)!important;border-color:rgba(23,19,10,.13)!important}
 html:not(.dark-mode) .hero-food-card,html:not(.dark-mode) .quality-highlight,html:not(.dark-mode) .vibe-card,html:not(.dark-mode) .product-card,html:not(.dark-mode) .bulk-card,html:not(.dark-mode) .cta-card,html:not(.dark-mode) .cart-panel,html:not(.dark-mode) .modal-card,html:not(.dark-mode) .image-modal-card,html:not(.dark-mode) .burst-card,html:not(.dark-mode) .burst-mini,html:not(.dark-mode) .burst-pill-grid div{background:rgba(255,253,238,.82)!important;border-color:rgba(23,19,10,.10)!important}
 html:not(.dark-mode) .site-header.scrolled{background:rgba(255,255,255,.15)!important;backdrop-filter:blur(7px) saturate(155%) contrast(104%)!important;-webkit-backdrop-filter:blur(7px) saturate(155%) contrast(104%)!important}
 html:not(.dark-mode) .site-header::before{background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 42%,rgba(255,255,255,.22)),radial-gradient(circle at 18% 12%,rgba(255,255,255,.40),transparent 34%),radial-gradient(circle at 85% 80%,rgba(255,212,0,.16),transparent 45%),rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.56)!important}
 html:not(.dark-mode) .toast{background:var(--ink)!important;color:white!important} html:not(.dark-mode) .scroll-progress{background:var(--ink)!important} html:not(.dark-mode) .copyright{color:rgba(23,19,10,.72)!important}
}
html.dark-mode{--sun:#17130a;--sun-hot:#000;--sun-soft:#f2c117;--cream:#17130a;--ink:#f2c117;--text:#fff3c7;--muted:#e8cf73;--line:rgba(242,193,23,.18);--shadow:0 24px 70px rgba(0,0,0,.35)}
html.dark-mode body{color:var(--text)!important;background:radial-gradient(circle at 16% 10%,rgba(242,193,23,.10),transparent 18rem),radial-gradient(circle at 88% 8%,rgba(255,255,255,.04),transparent 18rem),linear-gradient(180deg,#060503 0%,#151108 46%,#201907 100%)!important}
html.dark-mode .top-note{background:#f2c117!important;color:#17130a!important}html.dark-mode .site-header{background:rgba(23,19,10,.78)!important;border-bottom-color:rgba(242,193,23,.18)!important}html.dark-mode .site-header.scrolled{background:rgba(255,255,255,.05)!important;backdrop-filter:blur(7px) saturate(150%)!important;-webkit-backdrop-filter:blur(7px) saturate(150%)!important}
html.dark-mode .site-header::before{background:linear-gradient(135deg,rgba(242,193,23,.14),rgba(255,255,255,.03) 42%,rgba(242,193,23,.08)),radial-gradient(circle at 18% 12%,rgba(242,193,23,.18),transparent 34%),rgba(255,255,255,.05)!important;border:1px solid rgba(242,193,23,.26)!important;box-shadow:inset 0 1px 0 rgba(242,193,23,.26),inset 0 -1px 0 rgba(0,0,0,.20),inset 1px 0 0 rgba(242,193,23,.10),inset -1px 0 0 rgba(242,193,23,.08),0 10px 26px rgba(0,0,0,.22)!important}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,html.dark-mode .brand-text strong,html.dark-mode .price,html.dark-mode .product-top h3,html.dark-mode .hero-food-card strong,html.dark-mode .vibe-card strong,html.dark-mode .bulk-list strong,html.dark-mode .footer-links a,html.dark-mode .quality-highlight strong,html.dark-mode .burst-card strong,html.dark-mode .burst-mini strong,html.dark-mode .burst-pill-grid div,html.dark-mode .cart-total strong,html.dark-mode .cart-item strong{color:#f2c117!important}
html.dark-mode p,html.dark-mode .hero-text,html.dark-mode .brand-text span,html.dark-mode .desktop-nav,html.dark-mode .eyebrow,html.dark-mode .hero-food-card small,html.dark-mode .quality-highlight span,html.dark-mode .footer p,html.dark-mode .bulk-list span,html.dark-mode .cart-note,html.dark-mode .cart-item span,html.dark-mode .modal-card p,html.dark-mode .modal-card small,html.dark-mode .burst-card p,html.dark-mode .burst-mini span{color:#e8cf73!important}
html.dark-mode .header-button,html.dark-mode .primary-button,html.dark-mode .add-btn,html.dark-mode .floating-cart,html.dark-mode .hero-tags .highlight-tag,html.dark-mode .product-tag.fasting,html.dark-mode .filter-pill.active,html.dark-mode .burst-card span,html.dark-mode .theme-option.active{background:#f2c117!important;color:#17130a!important;border-color:#f2c117!important}
html.dark-mode .secondary-button,html.dark-mode .soft-button,html.dark-mode .ingredients-btn,html.dark-mode .qty,html.dark-mode .icon-button,html.dark-mode .filter-pill,html.dark-mode .theme-toggle{background:rgba(242,193,23,.08)!important;color:#f2c117!important;border-color:rgba(242,193,23,.22)!important}
html.dark-mode .hero-food-card,html.dark-mode .quality-highlight,html.dark-mode .vibe-card,html.dark-mode .product-card,html.dark-mode .bulk-card,html.dark-mode .cta-card,html.dark-mode .cart-panel,html.dark-mode .modal-card,html.dark-mode .image-modal-card,html.dark-mode .burst-card,html.dark-mode .burst-mini,html.dark-mode .burst-pill-grid div{background:rgba(23,19,10,.80)!important;border-color:rgba(242,193,23,.18)!important}
html.dark-mode .hero-tags span,html.dark-mode .product-tag,html.dark-mode .product-badge{color:#f2c117!important;background:rgba(242,193,23,.08)!important;border-color:rgba(242,193,23,.16)!important}html.dark-mode .snack-section{background:rgba(0,0,0,.18)!important}html.dark-mode .floating-cart strong{background:#17130a!important;color:#f2c117!important;border:1px solid rgba(242,193,23,.24)!important}html.dark-mode .toast{background:#f2c117!important;color:#17130a!important}html.dark-mode .scroll-progress{background:#f2c117!important}html.dark-mode .copyright{color:#e8cf73!important}
@media(max-width:700px){.theme-toggle{order:3;width:100%;justify-content:center;margin-top:.25rem}.theme-option{flex:1;min-height:40px}.site-header{flex-wrap:wrap}}@media(max-width:430px){.theme-toggle{padding:.2rem}.theme-option{font-size:.9rem;padding:.52rem .6rem}}



/* ===== V19 mobile light-mode text fix ===== */
/* 
   Some phones in system dark mode were still inheriting previous dark-mode yellow text.
   This force-resets all important text to dark colours whenever manual dark mode is NOT selected.
*/
html:not(.dark-mode),
html:not(.dark-mode) body {
  color-scheme: light !important;
}

html:not(.dark-mode) body {
  color: #241b0a !important;
}

/* Global light-mode text reset */
html:not(.dark-mode) h1,
html:not(.dark-mode) h2,
html:not(.dark-mode) h3,
html:not(.dark-mode) h4,
html:not(.dark-mode) h5,
html:not(.dark-mode) h6,
html:not(.dark-mode) strong,
html:not(.dark-mode) .brand-text strong,
html:not(.dark-mode) .price,
html:not(.dark-mode) .product-top h3,
html:not(.dark-mode) .hero-food-card strong,
html:not(.dark-mode) .vibe-card strong,
html:not(.dark-mode) .bulk-list strong,
html:not(.dark-mode) .footer-links a,
html:not(.dark-mode) .quality-highlight strong,
html:not(.dark-mode) .burst-card strong,
html:not(.dark-mode) .burst-mini strong,
html:not(.dark-mode) .burst-pill-grid div,
html:not(.dark-mode) .cart-total strong,
html:not(.dark-mode) .cart-item strong,
html:not(.dark-mode) .modal-card h2,
html:not(.dark-mode) .theme-option {
  color: #17130a !important;
}

html:not(.dark-mode) p,
html:not(.dark-mode) span,
html:not(.dark-mode) small,
html:not(.dark-mode) .hero-text,
html:not(.dark-mode) .brand-text span,
html:not(.dark-mode) .desktop-nav,
html:not(.dark-mode) .eyebrow,
html:not(.dark-mode) .hero-food-card small,
html:not(.dark-mode) .quality-highlight span,
html:not(.dark-mode) .footer p,
html:not(.dark-mode) .bulk-list span,
html:not(.dark-mode) .cart-note,
html:not(.dark-mode) .cart-item span,
html:not(.dark-mode) .modal-card p,
html:not(.dark-mode) .modal-card small,
html:not(.dark-mode) .burst-card p,
html:not(.dark-mode) .burst-mini span {
  color: #725b25 !important;
}

/* Buttons/tags that should intentionally stay light-on-dark */
html:not(.dark-mode) .header-button,
html:not(.dark-mode) .primary-button,
html:not(.dark-mode) .add-btn,
html:not(.dark-mode) .floating-cart,
html:not(.dark-mode) .hero-tags .highlight-tag,
html:not(.dark-mode) .product-tag.fasting,
html:not(.dark-mode) .filter-pill.active,
html:not(.dark-mode) .burst-card span,
html:not(.dark-mode) .theme-option.active {
  background: #17130a !important;
  color: #fff2a8 !important;
  border-color: #17130a !important;
}

/* Header and cards remain light in manual light mode */
html:not(.dark-mode) .site-header {
  background: rgba(255, 240, 168, 0.78) !important;
}

html:not(.dark-mode) .hero-food-card,
html:not(.dark-mode) .quality-highlight,
html:not(.dark-mode) .vibe-card,
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .bulk-card,
html:not(.dark-mode) .cta-card,
html:not(.dark-mode) .cart-panel,
html:not(.dark-mode) .modal-card,
html:not(.dark-mode) .image-modal-card,
html:not(.dark-mode) .burst-card,
html:not(.dark-mode) .burst-mini,
html:not(.dark-mode) .burst-pill-grid div,
html:not(.dark-mode) .theme-toggle {
  background: rgba(255,253,238,0.82) !important;
  border-color: rgba(23,19,10,0.10) !important;
}

/* Light mode filter / secondary buttons */
html:not(.dark-mode) .secondary-button,
html:not(.dark-mode) .soft-button,
html:not(.dark-mode) .ingredients-btn,
html:not(.dark-mode) .qty,
html:not(.dark-mode) .icon-button,
html:not(.dark-mode) .filter-pill {
  background: rgba(255,253,238,0.82) !important;
  color: #17130a !important;
  border-color: rgba(23,19,10,0.13) !important;
}

/* Mobile-specific safeguard */
@media (max-width: 700px) {
  html:not(.dark-mode) body,
  html:not(.dark-mode) main,
  html:not(.dark-mode) section,
  html:not(.dark-mode) article,
  html:not(.dark-mode) .site-header,
  html:not(.dark-mode) .cart-panel {
    color: #241b0a !important;
  }

  html:not(.dark-mode) h1,
  html:not(.dark-mode) h2,
  html:not(.dark-mode) h3,
  html:not(.dark-mode) .brand-text strong,
  html:not(.dark-mode) .product-top h3,
  html:not(.dark-mode) .price,
  html:not(.dark-mode) .burst-card strong,
  html:not(.dark-mode) .burst-mini strong,
  html:not(.dark-mode) .bulk-list strong {
    color: #17130a !important;
  }

  html:not(.dark-mode) p,
  html:not(.dark-mode) .hero-text,
  html:not(.dark-mode) .eyebrow,
  html:not(.dark-mode) .brand-text span,
  html:not(.dark-mode) .burst-card p,
  html:not(.dark-mode) .burst-mini span,
  html:not(.dark-mode) .product-card p,
  html:not(.dark-mode) .section-header p,
  html:not(.dark-mode) .bulk-copy p,
  html:not(.dark-mode) .cta-copy p,
  html:not(.dark-mode) .footer p {
    color: #725b25 !important;
  }
}



/* ===== V24 key health benefits on individual boxes ===== */
.benefits-block {
  margin: 0 0 0.95rem;
  padding: 0.85rem 0.9rem;
  border-radius: 18px;
  background: rgba(255,255,255,0.44);
  border: 1px solid rgba(23,19,10,0.08);
}

.benefits-block strong {
  display: block;
  color: var(--ink);
  font-size: 0.98rem;
  margin-bottom: 0.28rem;
}

.benefits-block p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.48;
}

@media (max-width: 700px) {
  .benefits-block p {
    font-size: 0.96rem;
  }
}

html.dark-mode .benefits-block {
  background: rgba(242,193,23,0.07) !important;
  border-color: rgba(242,193,23,0.16) !important;
}

html.dark-mode .benefits-block strong {
  color: #f2c117 !important;
}

html.dark-mode .benefits-block p {
  color: #e8cf73 !important;
}

/* ===== V25 ingredient-specific benefits polish ===== */
.benefits-disclaimer {
  max-width: 860px;
  margin: 1.2rem auto 0;
  text-align: center;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
  color: var(--muted);
  opacity: 0.92;
}

.benefits-block {
  background: rgba(255,255,255,0.52) !important;
}

.benefits-block strong {
  letter-spacing: 0.01em;
}

@media (max-width: 700px) {
  .benefits-disclaimer {
    text-align: left;
  }
}

html.dark-mode .benefits-disclaimer {
  color: #e8cf73 !important;
}

/* ===== V27 refined health benefits copy ===== */
.benefits-block strong {
  text-transform: none;
}

.benefits-block p {
  font-size: 0.97rem !important;
  line-height: 1.48 !important;
}