/* =============== Variables / base =============== */
:root{
  --grad-start:#7b3aed;  /* purple */
  --grad-end:#2563eb;    /* blue */
  --brand:#1e40af;       /* deep blue for text accents */
  --accent:#f6c90e;      /* yellow CTA + hero title */
  --bg:#f3f6fb;          /* page background around the rounded canvas */
  --card:#ffffff;
  --ink:#0f172a;
  --muted:#59647a;
  --ring:#dbe4ff;
  --success:#16a34a;     /* green */
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(15,23,42,.12);
  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;
  --maxw:1200px;

  /* Feature colors (hero row) */
  --feat-title:#f6c90e;  /* heading color */
  --feat-text:#dbeafe;   /* subtext color */

  /* Rainbow brand gradient */
  --brand-rainbow: linear-gradient(
    90deg,
    #ff3b30 0%,
    #ff7f50 12%,
    #ffb400 24%,
    #ffd60a 36%,
    #34c759 48%,
    #00c7be 60%,
    #0a84ff 72%,
    #5e5ce6 84%,
    #bf5af2 92%,
    #ff2d55 100%
  );

  /* Site-wide background gradient behind the page (Option A) */
  --site-bg: linear-gradient(135deg, #6a5c77 0%, #463a71 55%, #2e275f 100%);

  /* Floating WhatsApp button */
  --wa-size: 60px;
  --wa-gap: 20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#2e275f;               /* fallback solid */
  background:var(--site-bg) fixed;   /* gradient behind the white page */
  line-height:1.6;
}
/* Rounded site canvas */
.page{
  background:#fff;
  min-height:100dvh;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(15,23,42,.05), 0 25px 60px rgba(2,6,23,.12);
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(90deg,var(--grad-start),var(--grad-end));
  color:#fff;
  box-shadow:0 2px 0 rgba(255,255,255,.1) inset;
  transition:backdrop-filter .3s, box-shadow .3s;
}
.header.scrolled{
  backdrop-filter:saturate(120%) blur(6px);
  box-shadow:0 6px 24px rgba(2,6,23,.18);
}
.nav-wrap{
  /* FULL-WIDTH header row */
  max-width:none;
  width:100%;
  margin:0;

  padding:18px 20px;
  display:flex; align-items:center;
  justify-content:space-between; /* brand left, nav right */
  gap:18px;
  position:relative;
}
.brand{display:flex; align-items:center; gap:12px; white-space:nowrap}
.brand-logo{
  width:42px; height:42px; object-fit:contain; border-radius:8px; background:transparent;
  filter: drop-shadow(0 2px 6px rgba(239,68,68,.25));
}
.brand-name{
  font-family:"Lobster Two",cursive; font-size:26px; letter-spacing:.6px; line-height:1; font-weight:900;
}
/* Rainbow brand text + animated image emoji */
.brand-rainbow{
  display:inline-flex; align-items:center; gap:6px;
  background-image: var(--brand-rainbow);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.brand-emoji-img{
  width:24px; height:24px; object-fit:contain; aspect-ratio:1;
  display:inline-block; transform-origin:60% 80%;
  animation:flex-pop 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
  vertical-align:middle;
}
@keyframes flex-pop{
  0%,100%{ transform:rotate(0deg) scale(1) translateY(0) }
  30%{ transform:rotate(10deg) scale(1.12) translateY(-1px) }
  60%{ transform:rotate(-6deg) scale(1.06) translateY(0) }
}
@media (prefers-reduced-motion:reduce){
  .brand-emoji-img{ animation:none }
}

.nav{display:flex; align-items:center; gap:28px; margin-left:auto; position:relative;}
.links{display:flex; gap:22px; align-items:center}
.links a{color:#e6edff; text-decoration:none; font-weight:600}
.links a:hover{color:#fff}
.cta{
  background:#fff; color:#0b3df2; font-weight:800; padding:10px 18px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 18px rgba(255,255,255,.25); border:3px solid rgba(255,255,255,.6)
}
.menu-btn{display:none}

/* Announcement bar (ticker) */
.announce{
  background: linear-gradient(90deg,var(--grad-start),var(--grad-end));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.announce-inner{
  /* FULL-WIDTH ticker row */
  max-width:none;
  width:100%;
  margin:0;

  padding:8px 48px 8px 20px; /* room for close button */
  display:flex; align-items:center; gap:12px;
  overflow:hidden; position:relative;
}
.announce .a-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:rgba(255,255,255,.25); color:#fff; font-weight:900; font-size:12px
}
.ticker{ flex:1; min-width:0; white-space:nowrap }
.ticker-track{
  display:inline-flex; align-items:center; gap:40px;
  will-change: transform;
}

/* Multicolor shiny ticker text */
.ticker-track a{
  color:#ffffff; /* fallback */
  text-decoration:none;
  font-weight:800;
  opacity:.98;
  position:relative;
  display:inline-block;
  padding:2px 0;

  background-image: linear-gradient(
    90deg,
    #34d399, #22d3ee, #60a5fa, #a78bfa, #f472b6, #f59e0b, #34d399
  );
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: rainbow-text 8s linear infinite;
  text-shadow: 0 0 8px rgba(255,255,255,.25);
}
@keyframes rainbow-text{
  0%   { background-position:   0% 50%; }
  100% { background-position: 100% 50%; }
}
.ticker-track a:hover{ text-decoration:underline }

/* Shimmer sweep overlay */
.ticker-track a::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:35%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg) translateX(-140%);
  animation: shine-sweep 2.8s linear infinite;
  pointer-events:none;
  mix-blend-mode: screen;
  border-radius:2px;
}
@keyframes shine-sweep{
  0%   { transform: skewX(-20deg) translateX(-140%); }
  100% { transform: skewX(-20deg) translateX(240%); }
}

.announce .close{
  position:absolute; right:8px; top:6px;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:999px; background:rgba(0,0,0,.15);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; font-weight:900; cursor:pointer
}
@keyframes ticker-left{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes ticker-right{ 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
.ticker-anim{ animation: ticker-left 24s linear infinite }
.ticker-anim.dir-right{ animation-name: ticker-right }
.announce.paused .ticker-anim{ animation-play-state: paused }
@media (prefers-reduced-motion:reduce){
  .ticker-anim{ animation:none }
  .ticker-track a::after{ display:none }
  .ticker-track a{ animation:none } /* stop rainbow pan */
}

/* ECG line under navbar (health-themed) */
.nav-ecg{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:26px;
  pointer-events:none;
  opacity:.9;
}
.nav-ecg svg{ width:100%; height:100%; display:block }
.ecg-path{
  fill:none;
  stroke:#22c55e;             /* green */
  stroke-width:2.2;
  filter:
    drop-shadow(0 0 4px rgba(34,197,94,.6))
    drop-shadow(0 0 10px rgba(34,197,94,.35));
}
.animate-ecg .ecg-path{
  stroke-dasharray: 140 560;  /* dash pattern for motion */
  stroke-dashoffset: 0;
  animation: ecg-dash 3.2s linear infinite;
}
@keyframes ecg-dash{
  to { stroke-dashoffset: -700; }
}
@media (prefers-reduced-motion:reduce){
  .animate-ecg .ecg-path{ animation:none }
}
@media (max-width:760px){
  .nav-ecg{ display:none }
}

/* Hero */
.hero{
  position:relative;
  background:
    linear-gradient(120deg, rgba(16,24,40,.54), rgba(16,24,40,.54)),
    url('https://images.unsplash.com/photo-1617791160536-598cf32026fb?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
  color:#fff;
}
.hero-inner{max-width:var(--maxw); margin:0 auto; padding:76px 20px 72px}
.hero-pills{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.pill{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.9); color:#0b3df2; font-weight:700;
  border:1px solid #e8edff;
}
.hero h1{
  font-size:64px; line-height:1.1; text-align:center; margin:26px 0 12px; font-weight:900;
}
/* Make hero title all yellow */
.hero h1 { color: var(--accent); }
.hero h1 span { color: inherit; }

.hero p{
  font-size:20px; max-width:900px; margin:0 auto; text-align:center; color:#d9e2ff
}
.hero-stats{display:flex; gap:12px; justify-content:center; margin-top:26px; flex-wrap:wrap}
.chip{background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); color:#fff; padding:10px 16px; border-radius:999px; font-weight:700}
.hero-ctas{display:flex; gap:16px; justify-content:center; margin-top:28px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; text-decoration:none; font-weight:800; border-radius:999px; padding:14px 22px}
.btn-primary{background:var(--accent); color:#2b2b2b; box-shadow:0 12px 26px rgba(246,201,14,.32)}
.btn-outline{color:#fff; border:2px solid rgba(255,255,255,.8); background:transparent}
.hero-feats{max-width:var(--maxw); margin:32px auto 0; padding:0 20px 18px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.feat{display:grid; place-items:center; gap:6px; padding:20px; color:#fff}
.feat h4{margin:0; font-size:20px}
.feat p{margin:0; opacity:.9}

/* Colors for the three hero features */
.hero-feats .feat h4 { color: var(--feat-title); }
.hero-feats .feat p  { color: var(--feat-text); }

/* Sections */
.section{padding:70px 20px; background:#f7faff}
.section .wrap{max-width:var(--maxw); margin:0 auto}
.title{font-size:42px; line-height:1.15; text-align:center; margin:0 0 10px; font-weight:900; color:#0b1730}
.sub{color:#6b7280; text-align:center; max-width:820px; margin:0 auto 34px}

/* Offers */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.card{
  border-radius:var(--radius-xl);
  background:var(--card);
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 18px 44px rgba(2,6,23,.16)}
.card-img{height:220px; background:#eff4ff center/cover no-repeat}
.card-body{padding:20px}
.badge{display:inline-block; font-weight:800; color:#1f45ff; background:#e7eeff; padding:6px 12px; border-radius:999px; font-size:13px}
.card h3{margin:12px 0 6px; font-size:22px}
.meta{display:grid; gap:8px; margin:14px 0 8px; color:#435065}
.meta .ok{color:#16a34a; font-weight:700}
.card-foot{display:flex; align-items:center; justify-content:space-between; padding:0 20px 20px}
.rating{color:#fbbf24; font-weight:800}
.get{background:#1659f8; color:#fff; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:800}

.view-all{display:flex; justify-content:center; margin-top:26px}
.view-all .btn{background:#1f45ff; color:#fff}

/* Categories */
.categories{background:#fbfdff}
.grid-4{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:22px
}
.cat{background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.cat-img{height:200px; background:#eee center/cover no-repeat}
.cat-body{padding:18px}
.cat h4{margin:6px 0 6px}
.cat a{color:#2b54ff; font-weight:700; text-decoration:none}
.cat a:hover{text-decoration:underline}

/* Trusted blocks */
.trusted{background:#fff}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:18px}
.trust{
  padding:26px; border-radius:var(--radius-lg);
  background:#eef2ff; color:#1d4ed8; text-align:center; font-weight:800;
}
.trust:nth-child(2){background:#f6eeff; color:#7c3aed}
.trust:nth-child(3){background:#ebffef; color:#16a34a}
.trust:nth-child(4){background:#ffeff0; color:#e11d48}
.trust p{margin:6px 0 0; color:#4b5563; font-weight:600}

/* Testimonials */
.testimonials{background:#f0f6ff}
.tgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.tcard{background:#fff; border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow)}
.tstars{color:#fbbf24; font-weight:800}
.tauthor{display:flex; align-items:center; gap:10px; margin-top:14px; font-weight:800}
.tauthor img{ border-radius:999px; }

/* Footer */
.footer{background:#0b1220; color:#e5ecff; padding:60px 20px}
.foot-wrap{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:26px}
.brand-foot{display:flex; align-items:center; gap:12px}
.foot p{color:#b6c3e1}
.foot h4{margin:6px 0 10px}
.foot a{color:#cfe2ff; text-decoration:none}
.foot a:hover{color:#fff}
.social{display:flex; gap:12px; margin-top:12px}
.social a{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:#111a2d;color:#d7e6ff;text-decoration:none}
.foot-bottom{max-width:var(--maxw); margin:18px auto 0; padding-top:18px; border-top:1px solid #1d2940; color:#9cb0d8; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px}

/* Responsive */
@media (max-width: 1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 760px){
  .links{display:none}
  .menu-btn{display:inline-flex; margin-left:auto; background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5); color:#fff; border-radius:10px; padding:8px 12px; font-weight:800}
  .cta{display:none}
  .brand-logo{width:38px;height:38px}
  .brand-name{font-size:24px}
  .brand-emoji-img{width:22px;height:22px}
  .hero h1{font-size:42px}
  .hero p{font-size:18px}
  .hero-feats{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .tgrid{grid-template-columns:1fr}
  .foot-wrap{grid-template-columns:1fr}
}

/* ===== Floating WhatsApp Chat Button (final, single source of truth) ===== */
.whatsapp-float{
  position: fixed;
  right: var(--wa-gap);
  bottom: max(var(--wa-gap), env(safe-area-inset-bottom));
  width: var(--wa-size);
  height: var(--wa-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  text-decoration: none;
  z-index: 1000;
  overflow: hidden;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-size: 0;            /* prevent emoji/font scaling */
  touch-action: manipulation;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.whatsapp-float:hover{
  background: #1da851;
  transform: translateY(-2px);
}
.whatsapp-float:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.whatsapp-float:focus-visible{
  outline: 3px solid #1da851;
  outline-offset: 3px;
}
.whatsapp-icon{
  width: 30px;
  height: 30px;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: whatsapp-bounce 1.8s ease-in-out infinite;
}
@keyframes whatsapp-bounce{
  0%,20%,50%,80%,100%{ transform: translateY(0) }
  40%{ transform: translateY(-8px) }
  60%{ transform: translateY(-4px) }
}
/* Mobile: keep it visible but slightly smaller */
@media (max-width: 760px){
  :root{ --wa-size: 56px; }
  .whatsapp-icon{ width: 26px; height: 26px; }
}
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .whatsapp-icon{ animation: none; }
}

/* ===== Product-quality floating section ===== */
.product-quality-floating {
  background: linear-gradient(135deg, #2f4b87 0%, #1a2366 50%, #482b6e 100%);
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}
.quality-wrap {
  background: #ffffff10; /* transparent white overlay */
  backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 35px;
  padding: 30px;
  max-width: 1100px;
}
.quality-wrap:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  transform: translateY(-4px);
  transition: all 0.3s ease-in-out;
}
.quality-item { text-align: center; color: white; font-family: 'Poppins', sans-serif; }
.quality-item img {
  max-width: 80px; height: auto;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.quality-item h4 { color: #ffeb3b; margin: 12px 0 4px; font-size: 18px; font-weight: 800; }
.quality-item p { margin: 0; font-size: 15px; font-weight: 300; color: #f3f4f6; }

/* ===== Rainbow headings (reused across sections) ===== */
.rainbow-text,
.categories-rainbow,
.trusted-rainbow,
.testimonials-rainbow {
  background: linear-gradient(90deg, #ff416c, #ff4b2b, #ffbb00, #00c9ff, #92fe9d, #f72585);
  background-size: 300% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
  animation: rainbowMove 3s linear infinite;
}
@keyframes rainbowMove {
  0% { background-position: 0% center; }
  100% { background-position: 100% center; }
}

/* ===== Categories heading + sub ===== */
.categories-sub,
.trusted-sub {
  font-weight: 700;
  color: #16a34a;
}

/* ===== Explore categories button ===== */
.explore-btn {
  color: var(--accent);
  border: 2px solid var(--accent);
  background-color: transparent;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease-in-out;
}
.explore-btn:hover {
  background-color: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(246, 201, 14, 0.4);
}

/* ===== Trusted by medical professionals (heading helper) ===== */
.emoji-lg { width:48px; height:48px; }

/* ===== Newsletter section ===== */
.section--newsletter { background:linear-gradient(90deg,#2563eb,#7b3aed); color:white; text-align:center; }
.wrap-medium { max-width:800px; margin:0 auto; }
.newsletter-title { margin-bottom:10px; font-weight:900; font-size:2rem; }
.newsletter-sub { margin-bottom:20px; color:#dbeafe; font-size:1.1rem; }
.newsletter-form { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.newsletter-input { padding:12px 16px; border:none; border-radius:6px; flex:1 1 280px; max-width:350px; font-size:1rem; }
.newsletter-button { padding:12px 22px; background:#f6c90e; color:#000; border:none; font-weight:bold; border-radius:6px; cursor:pointer; font-size:1rem; }
.newsletter-note { margin-top:12px; font-size:0.85rem; color:#c7d2fe; }

/* ===== Experts section (logos FIX) ===== */
.section--experts { background:linear-gradient(180deg,#ffed99,#ffd633); text-align:center; padding:50px 20px; }
.text-brown-900 { color:#3a2c00; }
.text-brown-700 { color:#5a4a00; }

/* FIX: responsive clamped logo sizes */
.experts-logos {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap: clamp(12px, 2.5vw, 30px);
  margin-top: 24px;
}
.experts-logo {
  flex: 0 0 auto;
  width: clamp(120px, 22vw, 230px);
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}
@media (max-width: 520px){
  .experts-logo { width: clamp(120px, 40vw, 200px); }
}

/* Optional: comfortable heading sizes on all screens */
.section--experts .title { font-size: clamp(28px, 4vw, 44px); }
.section--experts .sub   { font-size: clamp(14px, 1.6vw, 18px); }

.experts-box {
  background:#fff8e1; border-radius:12px; padding:30px; margin-top:50px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; text-align:left;
}
.experts-pills { display:flex; flex:1; min-width:220px; justify-content:center; gap:20px; flex-wrap:wrap; }
.experts-pill { text-align:center; }
.experts-pill img { max-width:100px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); }
.experts-pill-label { margin-top:8px; font-weight:bold; }
.experts-content { flex:1; min-width:260px; }
.experts-cta { display:inline-block; background:#ffcc00; padding:10px 20px; border-radius:6px; font-weight:bold; color:#000; text-decoration:none; margin-top:10px; }

/* ===== Small utilities ===== */
.text-center{ text-align:center; }
.fw-700{ font-weight:700; }
.fw-900{ font-weight:900; }
.mt-8{ margin-top:8px; }
.mt-18{ margin-top:18px; }
.mt-20{ margin-top:20px; }
.mt-26{ margin-top:26px; }
.mt-50{ margin-top:50px; }
.mb-10{ margin-bottom:10px; }
.mb-20{ margin-bottom:20px; }
.fs-085{ font-size:.85rem; }
.fs-2xl{ font-size:2rem; }
.rounded-6{ border-radius:6px; }
.link-underline{ text-decoration:underline; }
.text-green-600{ color:#16a34a; }

/* Button variants for “View All Supplements” */
.btn-slim{ padding:10px 20px; }
.btn-dark{ background:#333; color:#fff; }

/* Disclaimer small text */
.disclaimer { color:#9cb0d8; font-size:13px; margin-top:10px; }

/* Noscript mini-wrap */
.noscript-wrap { padding:12px 20px; }

/* ===== Background-image helper classes ===== */
/* Featured product cards */
.bg-card-bsb{
  background-image:url('../../../images.weserv.nl/indexd7d0.html?w=800&h=600&fit=contain&bg=F4F6FB&url=ssl:usahealthboss.com/images/Blood-Sugar-Blaster.png');
}
.bg-card-dsr{
  background-image:url('../../../images.weserv.nl/index7afd.html?w=800&h=600&fit=contain&bg=F4F6FB&url=ssl:usahealthboss.com/images/deepskinrestore.jpg');
}
.bg-card-tbb{
  background-image:url('../../../images.weserv.nl/index9ff0.html?w=800&h=600&fit=contain&bg=F4F6FB&url=ssl:1892.efuserassets.com/1892/offers/155/thumb/RP_TotalBrainBoost_1BottleFront.png');
}

/* Category tiles (initial four) */
.bg-cat-men{
  background-image:url('https://images.unsplash.com/photo-1542060748-10c28b62716e?q=80&w=1400&auto=format&fit=crop');
}
.bg-cat-digestive{
  background-image:url('https://images.unsplash.com/photo-1622912543076-1b2dcf86de01?q=80&w=1400&auto=format&fit=crop');
}
.bg-cat-antiaging{
  background-image:url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1400&auto=format&fit=crop');
}
.bg-cat-muscle{
  background-image:url('https://images.unsplash.com/photo-1517837016564-aec76e0e2af6?q=80&w=1400&auto=format&fit=crop');
}

/* ===== HOTFIX: Experts logos (legacy markup support) ===== */
/* Works for BOTH markups:
   - New:  <div class="experts-logos"> <img class="experts-logo"> …
   - Old:  <div style="display:flex;…"> (first DIV inside .wrap) with plain <img width="230"> */
.section--experts .experts-logos,
.section--experts .wrap > div:first-of-type {
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:center !important;
  gap: clamp(12px, 2.5vw, 30px) !important;
  margin-top: 24px !important;
}
.section--experts .experts-logos img,
.section--experts .wrap > div:first-of-type > img {
  width: clamp(120px, 22vw, 230px) !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* Keep pills inside the cream box at 100px even if the global rule above applies elsewhere */
.section--experts .experts-box .experts-pill img {
  width: 100px !important;
  height: auto !important;
}