/* ==== BLUE HIPPO — FINAL OVERRIDES LOADED LAST ==== */
:root{ --lavender:#E3D3FF; --lilac:#C7A4FF; --deep:#3D2C8D; --cream:#F4EEFF; --ink:#5B4B8A; }

html, body { background: var(--cream); color: var(--deep); }

/* ----------------------------
   COLLECTION / PRODUCT CARDS
-----------------------------*/
:where(.product-card,.product,.product-item,li.product){
  background:var(--lavender) !important; border-radius:20px !important; border:0 !important;
  padding:16px !important; box-shadow:0 10px 24px rgba(61,44,141,.15) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
:where(.product-card,.product,.product-item,li.product):hover{
  transform:translateY(-6px) rotate(.4deg) !important; box-shadow:0 14px 30px rgba(61,44,141,.22) !important;
}
:where(.product-card,.product,.product-item) :where(.product-image,.image,.thumb,.media,.product-img){
  border-radius:16px !important; overflow:hidden !important;
  background:linear-gradient(135deg,#fff,var(--lilac)) !important;
  box-shadow:0 4px 14px rgba(61,44,141,.12) !important;
}
:where(.product-card,.product,.product-item) :where(.product-title,.title,h3,h2) a,
:where(.product-card,.product,.product-item) :where(.product-title,.title,h3,h2){
  color:var(--deep) !important; font-weight:800 !important; text-decoration:none !important;
}
:where(.product-card,.product,.product-item) :where(.price,.product-price,.price-wrapper){
  color:var(--deep) !important; font-weight:800 !important;
}

/* Badges */
:where(.product-card,.product,.product-item) :where(.badge,.label,.product-label){
  background:#5B4B8A !important; color:#F4EEFF !important; border-radius:999px !important;
  padding:.25rem .6rem !important; font-size:.75rem !important; border:0 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.12) !important;
}

/* ----------------------------
   ADD-TO-CART BUTTON (KILL BLACK)
-----------------------------*/
.theme-product-button-area,
.theme-product-button-area *{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.theme-product-button-area > a[role="button"][data-zs-add-to-cart]{
  background:#3D2C8D !important; color:#fff !important; border:2px solid #3D2C8D !important;
  border-radius:999px !important; padding:.75rem 1.2rem !important; font-weight:700 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  width:auto !important; line-height:1 !important; text-decoration:none !important;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}
.theme-product-button-area > a[role="button"][data-zs-add-to-cart]:hover{
  background:#5B4B8A !important; border-color:#5B4B8A !important;
}
.theme-product-button-area [data-theme-cart-button-text],
.theme-product-button-area .theme-cart-button-loading-container,
.theme-product-button-area .theme-cart-button-loading-dots span{
  background:transparent !important; color:inherit !important; padding:0 !important;
}
/* if theme adds a “black” class */
.theme-product-button-area .btn.black,
.theme-product-button-area .button.black{
  background:#3D2C8D !important; color:#fff !important; border-color:#3D2C8D !important;
}

/* ----------------------------
   STICKY HEADER GAP
-----------------------------*/
:root{ --header-h: 72px; }
.sticky-placeholder,.header-placeholder,.sticky-header-placeholder,
.zcs-sticky-header-spacer,.z-sticky-spacer{ height:0 !important; display:none !important; }
.main-content,.site-content,.page-content,#content{ margin-top:0 !important; padding-top:0 !important; }
.page-content > *:first-child{ scroll-margin-top: var(--header-h); }

/* ----------------------------
   PDP ACCORDIONS + STICKY BUY BAR
-----------------------------*/
#bh-pdp-extras .bh-acc{ max-width:960px; margin:1.5rem auto; padding:0 1rem; }
#bh-pdp-extras details{
  background:#fff; border:1px solid var(--lavender); border-radius:16px;
  margin:.75rem 0; padding:.25rem .75rem; box-shadow:0 6px 16px rgba(61,44,141,.08);
}
#bh-pdp-extras summary{
  list-style:none; cursor:pointer; padding:.9rem .25rem; font-weight:800; color:var(--deep);
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
#bh-pdp-extras summary::-webkit-details-marker{ display:none; }
#bh-pdp-extras .chev{ transition:transform .25s ease; }
#bh-pdp-extras details[open] .chev{ transform:rotate(180deg); }
#bh-pdp-extras .acc-body{ color:var(--ink); padding:0 0 1rem 0; }

#bh-sticky-buy{ position:fixed; left:0; right:0; bottom:12px; z-index:999; display:none; padding:0 .75rem; }
#bh-sticky-buy .bh-wrap{
  margin:0 auto; max-width:980px; display:flex; align-items:center; gap:.75rem;
  background:var(--lavender); border:1px solid var(--lilac); border-radius:999px;
  box-shadow:0 10px 24px rgba(61,44,141,.18); padding:.5rem .5rem;
}
#bh-sticky-buy .bh-title{ font-weight:800; color:var(--deep); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#bh-sticky-buy .bh-price{ font-weight:800; color:var(--deep); margin-left:auto; }
#bh-sticky-buy .bh-cta{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; padding:.7rem 1.1rem; font-weight:700; text-decoration:none;
  border:2px solid var(--deep); background:var(--deep); color:#fff; white-space:nowrap;
}
#bh-sticky-buy .bh-cta:hover{ background:#5B4B8A; border-color:#5B4B8A; }

/* ----------------------------
   ACCESSIBILITY + POLISH
-----------------------------*/
:focus-visible{ outline:3px solid var(--lilac); outline-offset:2px; border-radius:8px; }

/* ---------- Palette ---------- */
:root{
  --lavender:#E3D3FF; --lilac:#C7A4FF; --deep:#3D2C8D; --cream:#F4EEFF; --ink:#2E1065;
}

/* ---------- HEADER: keep lavender, hide category links if theme injects them ---------- */
.theme-header, .site-header, header[role="banner"]{
  background:#C7A4FF !important; border:0 !important; box-shadow:none !important;
}
.theme-header-menu a[href*="/category/"],
.theme-header-menu a[href*="/categories/"],
.theme-header-menu .menu > li[data-category],
.header-categories, .header-categories * { display:none !important; }

/* ---------- HERO: force cream canvas + kill any dark overlay from slider ---------- */
.bh-hero, .bh-hero *:not(img){ background:transparent !important; border:0 !important; box-shadow:none !important; }
.bh-hero{ background:var(--cream) !important; padding:0 !important; margin:0 !important; }

.swiper, .swiper-wrapper, .swiper-slide,
.theme-slider, .theme-slider *, 
.zpcontent-slider, .zpcontent-slider * { background:transparent !important; }
.theme-header + .shadow, .header-shadow, .header-divider { display:none !important; }

/* Optional: soft mist band at bottom of hero */
.bh-hero .bh-mist{
  height:120px; background:linear-gradient(to top, rgba(199,164,255,.45), rgba(227,211,255,0));
  filter:blur(8px);
}

/* ---------- JOIN THE HERD: deep-purple capsule ---------- */
.bh-join{ position:relative; background:var(--cream) !important; padding:72px 16px !important; }
.bh-join .bh-capsule{
  max-width:1100px; margin:0 auto; border-radius:28px;
  background:
    radial-gradient(1200px 260px at 50% 10%, rgba(61,44,141,.25), transparent 60%),
    radial-gradient(900px 200px at 50% -40px, rgba(199,164,255,.45), transparent 60%),
    var(--deep);
  padding:64px 24px; color:#F4EEFF; box-shadow:0 16px 40px rgba(61,44,141,.25);
  text-align:center;
}
.bh-join h2{ font-size:clamp(2rem,4vw,3rem); margin:0 0 10px; color:#fff; }
.bh-join p{ margin:0 0 20px; opacity:.92; color:#fff; }
.bh-join .bh-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--lavender); color:#2E1065; border:0; border-radius:999px;
  font-weight:800; padding:1rem 1.5rem; text-decoration:none;
}
.bh-join .bh-cta:hover{ filter:brightness(.95); }

/* ---------- COLLECTION + PDP CTAs: no navy bar, true pills ---------- */
.theme-product-button-area, .theme-product-button-area *{
  background:transparent !important; box-shadow:none !important;
}
.theme-product-button-area > a[role="button"][data-zs-add-to-cart],
.product-detail .product-actions [data-zs-add-to-cart],
.product-details .product-actions [data-zs-add-to-cart],
.product-cta .btn.add-to-cart,
.product-cta [data-zs-add-to-cart]{
  background:var(--deep) !important; color:#fff !important;
  border:2px solid var(--deep) !important; border-radius:999px !important;
  padding:.95rem 1.5rem !important; width:auto !important; line-height:1 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  font-weight:800 !important; text-decoration:none !important;
}
.theme-product-button-area > a[role="button"][data-zs-add-to-cart]:hover,
.product-detail .product-actions [data-zs-add-to-cart]:hover{
  background:#5B4B8A !important; border-color:#5B4B8A !important;
}

/* ---------- QUICK PDP SKIN (layout + headings) ---------- */
body[class*="product"], .product-detail, .product-details{ background:var(--cream) !important; }
.product-title, .theme-product-title{ color:var(--ink) !important; font-weight:900 !important; }
.product-price, .theme-product-price{ color:var(--ink) !important; font-weight:900 !important; }
.product-summary, .product-description{ color:#5B4B8A !important; }

/* Make the PDP content breathe (without editing template) */
.product-detail .container, .product-details .container { max-width:1180px !important; }
.product-detail .row, .product-details .row { gap:32px !important; }

/* ===========================================
   BLUE HIPPO — HOMEPAGE DESIGN (Hero, Rituals, Botanicals, Join)
   =========================================== */
/*************************************************
 BLUE HIPPO — Theme Styles (Zoho Commerce)
**************************************************/

/* ---------- Brand Tokens & Spacing ---------- */
:root{
  --lavender:#E3D3FF;
  --lilac:#C7A4FF;
  --deep:#3D2C8D;     /* primary */
  --ink:#2E1065;      /* headings */
  --text:#5B4B8A;     /* body text */
  --cream:#F4EEFF;    /* page background */

  /* Section spacing (tweak here to shorten/lengthen the page) */
  --hero-pt:72px; --hero-pb:44px;
  --steps-pt:24px; --steps-pb:32px;
  --bot-pt:52px;  --bot-pb:52px;
  --join-pt:56px; --join-pb:56px;
}

/* ---------- Global ---------- */
html, body{ background:var(--cream); color:var(--ink); }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--deep); text-decoration:none; }
a:hover{ opacity:.95; }

/* ---------- Header (unify color across breakpoints) ---------- */
:root{ --nav-bg:#C7A4FF; --nav-ink:#2E1065; }
.site-header, .header, .navbar, .z-navbar,
.mobile-header, .zcs-mobile-header, .zpheader, .zph-navbar, .zph-nav,
.z-navbar .navbar, .z-navbar .header{
  background:var(--nav-bg) !important; background-image:none !important; box-shadow:none !important; border:0 !important;
}
.theme-header-menu a, .z-navbar a, .mobile-menu a,
.z-navbar .icon, .z-navbar svg, .mobile-header .icon, .mobile-header svg{
  color:var(--nav-ink) !important; fill:var(--nav-ink) !important;
}

/* ---------- Brand Buttons (utilities) ---------- */
.bh-btn{
  display:inline-block; font-weight:800; border-radius:999px; border:2px solid transparent;
  padding:14px 22px; transition:.25s ease; text-decoration:none;
}
.bh-btn--primary{ background:var(--deep); color:#fff; border-color:var(--deep); }
.bh-btn--primary:hover{ background:#5B4B8A; border-color:#5B4B8A; }
.bh-btn--ghost{ background:transparent; color:var(--deep); border-color:var(--deep); }
.bh-btn--ghost:hover{ background:var(--lavender); }

/* =======================================================
   HOMEPAGE — HERO (“Blue is the New Green”)
   Solid cream, centered, correct pill buttons, no gradient
   ======================================================= */
.bh-hero{
  position:relative; overflow:hidden; background:var(--cream) !important;
  padding:var(--hero-pt) 0 var(--hero-pb); margin:0; min-height:auto;
}
.bh-hero::before, .bh-hero::after{ content:none !important; }           /* kill any mist/overlay */
.bh-hero__inner{ max-width:1100px; margin:0 auto; padding:0 16px; text-align:center; }
.bh-hero__inner h1{
  font-size:clamp(2.6rem,6vw,5rem); margin:0 0 12px; color:var(--ink);
  font-weight:900; letter-spacing:-.02em; line-height:1.06;
}
.bh-hero__inner p{ max-width:700px; margin:0 auto 22px; color:var(--text); }
.bh-hero__ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Hero buttons — clean pills, no glow */
.bh-hero a.bh-btn{
  border-radius:999px !important; padding:14px 22px !important; font-weight:800 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  border:2px solid transparent !important; text-decoration:none !important;
  box-shadow:none !important; background-image:none !important; text-shadow:none !important; filter:none !important;
}
.bh-hero a.bh-btn--primary{
  background:var(--deep) !important; border-color:var(--deep) !important; color:#fff !important;
}
.bh-hero a.bh-btn--ghost{
  background:transparent !important; color:var(--deep) !important; border-color:var(--deep) !important;
}

/* Equal buttons on desktop/tablet */
.bh-hero__ctas .bh-btn{
  min-height:52px !important; padding:0 26px !important;
  min-width:13.5rem;
}

/* Mobile hero polish */
@media (max-width:480px){
  .bh-hero{ padding:56px 0 36px !important; }
  .bh-hero__inner h1{
    font-size:clamp(2.6rem,11vw,3.4rem) !important; line-height:1.08 !important; letter-spacing:-.01em !important;
  }
  .bh-hero__inner p{ max-width:22rem !important; margin:8px auto 18px !important; }
  .bh-hero__ctas{ flex-direction:column !important; align-items:center !important; gap:10px !important; }
  .bh-hero__ctas .bh-btn{
    width:100% !important; max-width:20rem !important; min-height:56px !important; padding:0 22px !important;
  }
}

/* =======================================================
   HOMEPAGE — RITUAL FORMULA (no title, 3 cards like mock)
   ======================================================= */
/* If any leftover title appears, hide it (safe) */
.bh-section-title{ display:none !important; }

.bh-steps{
  max-width:1200px; margin:0 auto; padding:var(--steps-pt) 16px var(--steps-pb);
  display:grid; grid-template-columns:repeat(3, minmax(260px,1fr)); gap:1.25rem;
}
@media (max-width:1000px){ .bh-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .bh-steps{ grid-template-columns:1fr; } }

.bh-card{
  background:var(--lavender) !important; border-radius:20px !important; padding:1.6rem !important;
  box-shadow:0 18px 40px rgba(61,44,141,.18) !important;
  transform:translateY(0) rotate(0); transition:transform .25s ease, box-shadow .25s ease;
}
.bh-card:hover{ transform:translateY(-6px) rotate(.4deg); box-shadow:0 22px 48px rgba(61,44,141,.24); }
.bh-card h3{
  color:var(--deep) !important; font-size:1.6rem !important; margin:0 0 .25rem !important;
  font-weight:900 !important; letter-spacing:-.01em;
}
.bh-card p{ color:var(--ink) !important; margin:0 !important; }

/* =======================================================
   HOMEPAGE — BOTANICALS (deep band + mist + white text)
   ======================================================= */
.bh-botanicals{ position:relative; overflow:hidden; padding:var(--bot-pt) 1.25rem var(--bot-pb); background:var(--deep) !important; }
.bh-botanicals__inner{ max-width:1200px; margin:0 auto; text-align:center; position:relative; z-index:2; }
.bh-botanicals__title{ color:#fff; font-size:clamp(1.9rem,4vw,2.6rem); margin:0 0 .5rem; letter-spacing:-.01em; font-weight:900; }
.bh-botanicals__sub{ color:rgba(255,255,255,.85); margin:0 auto 2rem; max-width:42rem; }

.bh-botanicals__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1.25rem; }
@media (max-width:1000px){ .bh-botanicals__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bh-botanicals__grid{ grid-template-columns:1fr; } }

.bh-bot-card{
  background:#5B4B8A; color:#F4EEFF; border-radius:20px; padding:1.4rem;
  box-shadow:0 10px 24px rgba(0,0,0,.15); text-align:left; transition:transform .25s ease, box-shadow .25s ease;
}
.bh-bot-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,.22); }
.bh-bot-card__art{ height:120px; border-radius:16px; margin-bottom:1rem; background:linear-gradient(135deg, var(--lilac), rgba(227,211,255,.35)); }
.bh-bot-card h3{ margin:.25rem 0 .25rem; color:#fff; font-size:1.25rem; font-weight:800; }
.bh-bot-card p{ margin:0; color:rgba(244,238,255,.92); font-size:.95rem; }

.bh-botanicals__cta{ margin-top:2rem; }
.bh-botanicals .bh-btn--ghost{ color:#F4EEFF; border-color:#F4EEFF; }
.bh-botanicals .bh-btn--ghost:hover{ background:rgba(255,255,255,.14); }

/* Soft animated mist */
.bh-botanicals__mist{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(199,164,255,.35), transparent 60%),
    radial-gradient(50% 30% at 0% 0%, rgba(227,211,255,.25), transparent 60%),
    radial-gradient(50% 30% at 100% 0%, rgba(227,211,255,.2), transparent 60%);
  animation:bh-mist-shift 6s ease-in-out infinite alternate; filter:blur(12px);
}
@keyframes bh-mist-shift{ 0%{transform:translateY(0);opacity:.75;} 100%{transform:translateY(18px);opacity:.95;} }

/* =======================================================
   HOMEPAGE — JOIN THE HERD (capsule on cream)
   ======================================================= */
.bh-join{ position:relative; background:var(--cream); padding:var(--join-pt) 16px var(--join-pb); }
.bh-join .bh-capsule{
  max-width:1100px; margin:0 auto; border-radius:28px; color:#F4EEFF;
  background:
    radial-gradient(1000px 240px at 50% 10%, rgba(199,164,255,.25), transparent 60%),
    radial-gradient(900px 200px at 50% -40px, rgba(227,211,255,.35), transparent 60%),
    #3D2C8D;
  padding:48px 20px; box-shadow:0 16px 40px rgba(61,44,141,.25); text-align:center;
}
.bh-join h2{ color:#F4EEFF; margin:0 0 8px; font-size:clamp(2rem,4vw,3rem); font-weight:900; }
.bh-join p{ color:#F4EEFF; opacity:.92; margin:0 0 18px; }
.bh-join .bh-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--lavender); color:var(--ink); border:0; border-radius:999px; font-weight:800; padding:1rem 1.5rem; text-decoration:none;
}
.bh-join .bh-cta:hover{ filter:brightness(.95); }

/* ---------- Pagination polish (optional) ---------- */
:where(.pagination, .pager) a, :where(.pagination, .pager) span{
  border:1px solid var(--lavender) !important; background:#fff !important; color:var(--ink) !important;
  border-radius:10px !important; padding:.45rem .75rem !important; font-weight:700 !important;
}
:where(.pagination, .pager) a:hover{ background:var(--lavender) !important; }

/* === Restore section titles (Shop header etc.) === */
.bh-section-title{ display:block !important; }

/* If you still have a Ritual title anywhere, hide it ONLY there */
#ritual-formula .bh-section-title{ display:none !important; }

/* === HERO: mobile edge protection & equal buttons === */
@media (max-width: 480px){
  .bh-hero{ overflow: hidden; }                 /* keep the section tidy */
  .bh-hero__inner{ padding: 0 20px !important; }/* breathing room on sides */
  .bh-hero__ctas{ gap: 10px !important; }

  /* Make both buttons same width, no cut-off */
  .bh-hero__ctas .bh-btn{
    width: 100% !important;
    max-width: none !important;
    min-height: 56px !important;
    padding: 0 22px !important;
    box-sizing: border-box;                     /* include padding in width */
  }
}

/* ================================
   BLUE HIPPO — PDP (Product Detail) MOCK EXACT
   Put this at the very end of BlueHippoOverrides.css
   ================================ */

/* Color tokens (already defined, repeated for safety) */
:root{
  --lavender:#E3D3FF; --lilac:#C7A4FF; --deep:#3D2C8D;
  --ink:#2E1065; --text:#5B4B8A; --cream:#F4EEFF;
}

/* 1) PDP two-column layout (desktop), stacked on mobile */
.product-detail, .product-details, .product-page{
  position:relative;
}
@media (min-width: 1000px){
  .product-detail, .product-details, .product-page{
    display:grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items:start;
  }
  /* Gallery column (left) & Info column (right) — theme uses these names */
  .product-gallery, .product-images, .product-media{ order:1; }
  .product-info, .product-summary{ order:2; }
}

/* 2) Title / price / ATC styles (brand-consistent) */
.product-detail h1, .product-details h1, .product-title{
  font-size: clamp(1.9rem, 3.8vw, 2.6rem);
  font-weight: 900; color: var(--ink);
  margin: 0 0 .35rem; letter-spacing:-.01em; line-height:1.1;
}
.product-detail .price, .product-details .price{
  font-size: 1.25rem; font-weight: 800; color: var(--ink);
  margin: .25rem 0 .75rem;
}
.product-detail [data-zs-add-to-cart],
.product-details [data-zs-add-to-cart],
.theme-product-button-area [data-zs-add-to-cart]{
  border-radius: 999px !important; font-weight: 800 !important; padding: 14px 22px !important;
  border: 2px solid var(--deep) !important; background: var(--deep) !important; color: #fff !important;
}
.product-detail [data-zs-add-to-cart]:hover{ background:#5B4B8A !important; border-color:#5B4B8A !important; }

/* 3) TRUST BAR (sits right under ATC) */
.bh-trustbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin: 12px 0 6px; font-weight:700; color: var(--ink);
}
.bh-trustbar span{
  background: var(--lavender); border-radius: 999px; padding: .45rem .7rem;
}

/* 4) Where It Fits in Your Ritual (3 cards) */
.bh-ritual-context{ background: var(--lavender); padding: 48px 16px; text-align:center; }
.bh-ritual-context h2{ color: var(--deep); font-weight:900; font-size: clamp(1.8rem, 4vw, 2.4rem); margin:0 0 18px; }
.bh-ritual-grid{ display:flex; flex-wrap:wrap; gap:16px; justify-content:center; max-width: 960px; margin:0 auto; }
.bh-ritual-grid article{
  background:#FDFBFF; border-radius: 20px; box-shadow: 0 8px 22px rgba(61,44,141,.14);
  padding: 22px; width: 100%; max-width: 260px; text-align: left;
}
.bh-ritual-grid h3{ color: var(--deep); margin: 0 0 6px; font-size: 1.25rem; }
.bh-ritual-grid p{ color: var(--text); margin: 0; }

/* 5) Ingredients & Benefits (3 cards + subtle mist) */
.bh-ingredients{ background: var(--cream); padding: 60px 16px; text-align:center; position: relative; overflow:hidden; }
.bh-ingredients h2{ color: var(--deep); font-weight:900; font-size: clamp(1.8rem, 4vw, 2.4rem); margin:0 0 24px; }
.bh-ingredients-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(220px, 1fr)); max-width: 1100px; margin:0 auto; }
@media (max-width: 900px){ .bh-ingredients-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .bh-ingredients-grid{ grid-template-columns: 1fr; } }
.bh-ing-card{
  text-align: left; background: #EDE5FF; color: #3D2C8D;
  border-radius: 20px; padding: 24px; box-shadow: 0 10px 24px rgba(61,44,141,.15);
}
.bh-ing-card h3{ margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; }
.bh-ing-card p{ margin: 0; color: #5B4B8A; }
.bh-ingredients-mist{ position:absolute; inset:auto 0 0 0; height: 120px;
  background: linear-gradient(to top, rgba(199,164,255,.40), transparent); filter: blur(12px);
}

/* 6) Tribe Voices (review-style quotes) */
.bh-tribe{ background: var(--deep); color: #F4EEFF; padding: 64px 16px; text-align:center; }
.bh-tribe h2{ font-weight:900; font-size: clamp(1.8rem, 4vw, 2.4rem); margin:0 0 22px; }
.bh-tribe-grid{ display:grid; gap: 18px; grid-template-columns: repeat(3, minmax(220px, 1fr)); max-width: 1100px; margin: 0 auto; }
@media (max-width: 900px){ .bh-tribe-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .bh-tribe-grid{ grid-template-columns: 1fr; } }
.bh-tribe-grid article{
  background:#5B4B8A; border-radius: 20px; padding: 26px; box-shadow: 0 12px 28px rgba(0,0,0,.18); text-align:left;
}
.bh-tribe .q{ font-style: italic; margin:0 0 10px; }
.bh-tribe .n{ margin:0; font-weight:700; }

/* 7) Complete Your Ritual (3 cards; works with widget or manual links) */
.bh-related{ background: var(--cream); padding: 60px 16px; text-align:center; }
.bh-related h2{ color: var(--deep); font-weight:900; font-size: clamp(1.8rem, 4vw, 2.4rem); margin:0 0 22px; }
.bh-related-grid{ display:grid; gap:18px; grid-template-columns: repeat(3, minmax(220px, 1fr)); max-width:1100px; margin:0 auto; }
@media (max-width: 900px){ .bh-related-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .bh-related-grid{ grid-template-columns: 1fr; } }
.bh-related-grid article{
  background:#E3D3FF; border-radius: 20px; padding: 28px; box-shadow: 0 10px 24px rgba(61,44,141,.15);
}
.bh-related-grid h3{ color: var(--deep); margin: 0 0 6px; font-size: 1.3rem; }
.bh-related-grid .p{ color: var(--text); margin: 0 0 12px; }

/* Make the theme's related product cards look like ours if you use the widget */
.bh-related .product, .bh-related .product-card, .bh-related .product-item{
  background:#E3D3FF !important; border-radius:20px !important; box-shadow:0 10px 24px rgba(61,44,141,.15) !important;
}