/* ==============================================================
   RTPR COMMON CSS — v2.0
   Real Time Pain Relief · BigCommerce Custom Pages

   Hosted on BC File Manager. Loaded via BC Script Manager into
   every page — no <link> tag needed in individual page pastes.

   CDN URL:
   https://store-oprnxuib2u.mybigcommerce.com/content/rtpr-css/rtpr-common.css

   To update all pages at once: edit this file and re-upload.
   If you ever need to cache-bust, update the ?v= query string
   in BC Script Manager (one edit — no page re-pasting needed).

   SECTIONS:
     1. TOKENS & BASE
     2. SHARED COMPONENTS   — used on both article and product pages
     3. ARTICLE COMPONENTS  — ela- prefix, content/article pages only
     4. PRODUCT COMPONENTS  — ela-pp- prefix, product pages only
     5. RESPONSIVE
   ============================================================== */


/* ==============================================================
   1. TOKENS & BASE
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
  /* Brand Colors */
  --ela-teal:        #005961;
  --ela-light-teal:  #125B61;
  --ela-yellow:      #FECD08;

  /* Action / Accent — overridden per product page on .ela-page */
  --ela-red:         #DD1F26;
  --ela-red-dark:    #a9151a;
  --ela-red-rgb:     221,31,38;   /* used in rgba() — e.g. rgba(var(--ela-red-rgb), .24) */

  /* Neutrals */
  --ela-light-gray:  #F2F4F7;
  --ela-white:       #ffffff;
  --ela-dark:        #173034;
  --ela-muted:       #4e666a;
  --ela-border:      #d9e4e6;

  /* Shadows */
  --ela-shadow:      0 18px 45px rgba(0,89,97,0.16);
  --ela-shadow-sm:   0 10px 22px rgba(0,89,97,0.08);

  /* Shape */
  --ela-radius:      22px;
  --ela-radius-md:   18px;
  --ela-radius-sm:   16px;
  --ela-radius-pill: 999px;

  /* Typography */
  --ela-font: 'Roboto', Arial, Helvetica, sans-serif;

  /* Page background gradient */
  --ela-page-bg: linear-gradient(180deg, #ffffff 0%, #f2f7f7 44%, #ffffff 100%);
}

/* Page wrapper */
.ela-page {
  position: relative;
  overflow: hidden;
  background: var(--ela-page-bg);
  font-family: var(--ela-font);
  color: var(--ela-dark);
}
.ela-page * { box-sizing: border-box; }

/* Font override — forces Roboto on all text, !important on headings to beat BC Poppins theme */
.ela-page,
.ela-page p,
.ela-page li,
.ela-page a,
.ela-page div,
.ela-page span,
.ela-page strong,
.ela-page em { font-family: var(--ela-font); }

.ela-page h1,
.ela-page h2,
.ela-page h3,
.ela-page h4,
.ela-page h5,
.ela-page h6 { font-family: var(--ela-font) !important; }

/* Container */
.ela-container {
  position: relative;
  z-index: 1;
  max-width: 1300px;
  margin: 0 auto;
  padding: 28px 18px 52px;
}


/* ==============================================================
   2. SHARED COMPONENTS
   Used on both article pages and product pages
   ============================================================== */

/* Eyebrow badge */
.ela-eyebrow {
  display: inline-block;
  background: rgba(254,205,8,.25);
  border: 1px solid rgba(254,205,8,.65);
  border-radius: var(--ela-radius-pill);
  padding: 7px 14px;
  font-weight: 700;
  color: var(--ela-teal);
  font-size: .88rem;
  margin-bottom: 12px;
}

/* Buttons */
.ela-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--ela-radius-pill);
  padding: 13px 22px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ela-btn:hover { transform: translateY(-2px); }

.ela-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--ela-red), var(--ela-red-dark));
  box-shadow: 0 12px 24px rgba(var(--ela-red-rgb), .24);
}
.ela-btn-primary:hover { color: var(--ela-teal) !important; }

.ela-btn-secondary {
  color: var(--ela-teal);
  background: #fff;
  border: 2px solid var(--ela-teal);
}
.ela-btn-secondary:hover { color: var(--ela-teal) !important; }

.ela-btn-teal {
  color: #fff;
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal));
  box-shadow: 0 12px 24px rgba(0,89,97,.22);
}
.ela-btn-teal:hover { color: var(--ela-yellow) !important; }

/* Section wrapper + centered section title */
.ela-section { margin: 30px 0; }

.ela-section-title { text-align: center; margin: 0 auto 20px; max-width: 960px; }
.ela-section-title h2 {
  margin: 0 0 12px;
  color: var(--ela-teal);
  font-size: clamp(1.4rem, 2.3vw, 2.3rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.035em;
}
.ela-section-title h2 span { color: var(--ela-red); }
.ela-section-title p { margin: 0; color: var(--ela-muted); font-size: 1.1rem; line-height: 1.7; }

/* Yellow callout note */
.ela-note {
  background: linear-gradient(135deg, rgba(254,205,8,.28), rgba(254,205,8,.12));
  border: 1px solid rgba(254,205,8,.7);
  border-radius: var(--ela-radius-md);
  padding: 16px 18px;
  color: var(--ela-dark);
  font-weight: 800;
  line-height: 1.5;
  margin-top: 16px;
}

/* Red / accent CTA banner */
.ela-cta {
  background: linear-gradient(135deg, var(--ela-red), var(--ela-red-dark));
  border-radius: var(--ela-radius);
  box-shadow: 0 20px 45px rgba(var(--ela-red-rgb), .22);
  padding: 36px 28px;
  text-align: center;
  color: #fff;
}
.ela-cta h2 {
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(1.5rem, 2.7vw, 2.625rem);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 900;
}
.ela-cta h2 span { color: var(--ela-yellow); }
.ela-cta p { max-width: 900px; margin: 0 auto 18px; color: rgba(255,255,255,.92); font-size: 1.1rem; line-height: 1.7; }
.ela-cta .ela-btn { background: #fff; color: var(--ela-red); }
.ela-cta .ela-btn:hover { color: var(--ela-teal) !important; }

/* Footer strip */
.ela-footer-strip {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--ela-teal);
  border-radius: var(--ela-radius-md);
  overflow: hidden;
  margin-top: 24px;
}
.ela-footer-strip div {
  padding: 16px 10px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  background: rgba(255,255,255,.06);
}

/* Shared card base */
.ela-card,
.ela-panel,
.ela-hero-main,
.ela-hero-card {
  background: var(--ela-white);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
}


/* ==============================================================
   3. ARTICLE PAGE COMPONENTS  (ela- prefix)
   ============================================================== */

/* Top header bar */
.ela-top-header {
  display: flex;
  align-items: center;
  gap: 28px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 22px 26px;
  margin-bottom: 28px;
}
.ela-header-copy { flex: 1; text-align: center; }
.ela-header-copy h1 {
  margin: 0;
  color: var(--ela-teal);
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -.04em;
}
.ela-header-copy h1 span { color: var(--ela-red); }
.ela-header-copy p {
  margin: 14px auto 0;
  max-width: 760px;
  color: var(--ela-muted);
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 700;
}

/* Hero layout */
.ela-hero {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(300px,.8fr);
  gap: 26px;
  align-items: stretch;
  margin-bottom: 30px;
}
.ela-hero-main { padding: 34px; position: relative; overflow: hidden; }
.ela-hero-main::before {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(254,205,8,.38), transparent 65%);
}
.ela-hero-main h2 {
  position: relative;
  margin: 0 0 16px;
  color: var(--ela-teal);
  font-size: clamp(1.55rem, 3vw, 3.3rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.05em;
}
.ela-hero-main h2 span { color: var(--ela-red); }
.ela-lead {
  position: relative;
  margin: 0 0 16px;
  color: var(--ela-dark);
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 700;
}
.ela-hero-main p { position: relative; color: var(--ela-muted); font-size: 1.1rem; line-height: 1.7; margin: 0 0 15px; }

/* Button row */
.ela-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Trust strip (3-up badges) */
.ela-trust-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-top: 24px;
}
.ela-trust-item {
  background: #f8fbfb;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius-sm);
  padding: 14px;
  text-align: center;
  color: var(--ela-teal);
  font-weight: 800;
}

/* Sidebar card */
.ela-hero-card { padding: 0; overflow: hidden; }
.ela-card-header {
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal));
  color: #fff;
  padding: 22px;
  border-radius: var(--ela-radius) var(--ela-radius) 0 0;
}
.ela-card-header h3,
.ela-card-header h2 { margin: 0; font-size: 1.15rem; line-height: 1.2; color: #fff; }
.ela-card-header span { color: var(--ela-yellow); }
.ela-card-body { padding: 24px; }

/* Routine list */
.ela-routine-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ela-routine-item {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr);
  gap: 14px;
  align-items: stretch;
  background: #f8fbfb;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius-md);
  padding: 14px;
  box-shadow: var(--ela-shadow-sm);
}
.ela-routine-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  border-radius: var(--ela-radius-sm);
  background: linear-gradient(135deg, var(--ela-yellow), #fff0a6);
  color: var(--ela-dark);
  font-size: 1.35rem;
  font-weight: 900;
  border: 1px solid rgba(254,205,8,.85);
}
.ela-routine-copy strong { display: block; color: var(--ela-teal); font-size: 1.05rem; line-height: 1.2; margin-bottom: 4px; }
.ela-routine-copy span  { display: block; color: var(--ela-muted); font-size: .96rem; line-height: 1.45; font-weight: 600; }
.ela-routine-note {
  margin-top: 16px;
  background: rgba(254,205,8,.18);
  border: 1px solid rgba(254,205,8,.72);
  border-radius: var(--ela-radius-sm);
  padding: 14px;
  color: var(--ela-dark);
  font-weight: 800;
  line-height: 1.45;
}

/* Quick checklist */
.ela-quick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ela-quick-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ela-dark); font-weight: 700; line-height: 1.45; font-size: 1.1rem; }
.ela-check {
  flex: 0 0 28px; width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal));
  color: #fff; font-weight: 900;
}

/* 4-up feature / relief grid */
.ela-relief-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ela-relief-card {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(0,89,97,.1);
  padding: 22px;
}
.ela-icon {
  width: 70px; height: 70px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-red));
  box-shadow: 0 10px 24px rgba(0,89,97,.18);
  margin-bottom: 14px;
}
.ela-icon img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.ela-relief-card h3 { margin: 0 0 10px; color: var(--ela-teal); font-size: 1.05rem; line-height: 1.18; font-weight: 900; }
.ela-relief-card p  { margin: 0; color: var(--ela-muted); line-height: 1.7; font-size: 1rem; }

/* Split layout */
.ela-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.78fr);
  gap: 24px;
  align-items: center;
}
.ela-panel { padding: 30px; }
.ela-panel h2 {
  margin: 0 0 14px;
  color: var(--ela-teal);
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 900;
}
.ela-panel h2 span { color: var(--ela-red); }
.ela-panel p { color: var(--ela-muted); line-height: 1.7; margin: 0 0 14px; font-size: 1.1rem; }

/* Image card */
.ela-image-card {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 16px;
}
.ela-image-card img { display: block; width: 100%; height: auto; border-radius: var(--ela-radius-sm); }

/* Product cards (alternating media/copy) */
.ela-product-grid { display: grid; gap: 22px; }
.ela-product-card {
  display: grid;
  grid-template-columns: minmax(250px,.8fr) minmax(0,1.2fr);
  gap: 26px;
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 22px;
  align-items: center;
  overflow: hidden;
}
.ela-product-card:nth-child(even) { grid-template-columns: minmax(0,1.2fr) minmax(250px,.8fr); }
.ela-product-card:nth-child(even) .ela-product-media { order: 2; }
.ela-product-media {
  background: linear-gradient(180deg, #f8fbfb, #ffffff);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius-md);
  padding: 16px;
  text-align: center;
}
.ela-product-media img { max-width: 100%; height: auto; border-radius: 14px; display: block; margin: 0 auto; }
.ela-product-copy h3 { margin: 0 0 10px; color: var(--ela-teal); font-size: 1.35rem; line-height: 1.1; font-weight: 900; }
.ela-product-copy h3 span { color: var(--ela-red); }
.ela-product-copy p { margin: 0 0 14px; color: var(--ela-muted); line-height: 1.7; font-size: 1.1rem; }

/* Pill tags */
.ela-pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.ela-pill {
  display: inline-flex;
  border-radius: var(--ela-radius-pill);
  background: rgba(0,89,97,.08);
  border: 1px solid rgba(0,89,97,.18);
  color: var(--ela-teal);
  font-weight: 800;
  font-size: .88rem;
  padding: 7px 11px;
}

/* Benefit checklist */
.ela-benefit-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.ela-benefit-list li { position: relative; padding-left: 28px; color: var(--ela-dark); line-height: 1.5; font-size: 1.05rem; }
.ela-benefit-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ela-red); font-weight: 900; }

/* Product CTA button wrapper */
.ela-product-cta { margin-top: 18px; }
.ela-product-cta .ela-btn { min-height: 44px; padding: 11px 18px; font-size: .94rem; }

/* How-to panel */
.ela-how-panel {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  overflow: hidden;
}
.ela-how-header {
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal));
  color: #fff;
  text-align: center;
  padding: 26px 20px;
}
.ela-how-header h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.3rem); line-height: 1.05; font-weight: 900; }
.ela-how-header span { color: var(--ela-yellow); }
.ela-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding: 26px; }
.ela-step { border: 1px solid var(--ela-border); border-radius: var(--ela-radius-md); padding: 20px; background: #f8fbfb; }
.ela-step-number {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ela-yellow);
  color: var(--ela-dark);
  font-weight: 900;
  margin-bottom: 12px;
}
.ela-step h3 { margin: 0 0 8px; color: var(--ela-teal); font-weight: 900; font-size: 1.05rem; }
.ela-step p  { margin: 0; color: var(--ela-muted); line-height: 1.7; font-size: 1rem; }

/* Testimonials */
.ela-testimonials {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  overflow: hidden;
}
.ela-proof-header {
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal));
  padding: 28px;
  text-align: center;
  color: #fff;
}
.ela-proof-header h2  { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.05; font-weight: 900; }
.ela-proof-header span { color: var(--ela-yellow); }
.ela-proof-header p   { max-width: 780px; margin: 12px auto 0; color: rgba(255,255,255,.88); line-height: 1.7; font-size: 1.1rem; }
.ela-proof-body  { padding: 26px; }
.ela-proof-grid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ela-proof-card  { position: relative; background: #f8fbfb; border: 1px solid var(--ela-border); border-radius: var(--ela-radius-md); padding: 24px; overflow: hidden; }
.ela-proof-card.featured {
  border: 2px solid var(--ela-yellow);
  background: radial-gradient(circle at top right, rgba(254,205,8,.24), #fff 48%);
}
.ela-quote-mark  { position: absolute; right: 18px; top: 8px; font-size: 4rem; line-height: 1; color: rgba(0,89,97,.12); font-weight: 900; }
.ela-proof-card p { position: relative; margin: 0 0 12px; color: var(--ela-dark); line-height: 1.7; font-style: italic; font-size: 1.1rem; }
.ela-proof-name  { position: relative; color: var(--ela-teal); font-weight: 900; font-style: normal !important; margin-top: 10px !important; }

/* Specials layout */
.ela-specials-layout {
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 24px;
  text-align: left;
}
.ela-package-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.ela-package-card {
  background: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(0,0,0,.18);
  padding: 16px;
  text-align: center;
  color: var(--ela-dark);
}
.ela-package-card img   { display: block; width: 100%; height: auto; border-radius: var(--ela-radius-sm); border: 1px solid var(--ela-border); background: #fff; margin: 0 auto 14px; }
.ela-package-card h3    { margin: 0 0 8px; color: var(--ela-teal); font-size: 1.1rem; line-height: 1.12; font-weight: 900; }
.ela-package-card p     { margin: 0 0 14px; color: var(--ela-muted); font-size: 1rem; line-height: 1.5; }
.ela-package-card .ela-btn { width: 100%; background: linear-gradient(135deg, var(--ela-red), var(--ela-red-dark)); color: #fff; }
.ela-package-card .ela-btn:hover { color: var(--ela-teal) !important; }

.ela-individual-panel   { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 20px; padding: 18px; color: #fff; }
.ela-individual-panel h3 { margin: 0 0 8px; color: #fff; font-size: 1.1rem; line-height: 1.15; font-weight: 900; }
.ela-individual-panel p  { margin: 0 0 14px; color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.5; }
.ela-individual-links   { display: grid; gap: 10px; }
.ela-individual-link {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--ela-radius-sm);
  padding: 12px;
  text-decoration: none;
  color: var(--ela-dark);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ela-individual-link:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.16); color: var(--ela-teal); }
.ela-individual-number {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--ela-yellow);
  color: var(--ela-dark) !important;
  font-weight: 900;
  font-size: 1rem !important;
  line-height: 1 !important;
  margin-top: 0 !important;
}
.ela-individual-link strong { display: block; color: var(--ela-teal); font-size: 1rem; line-height: 1.15; }
.ela-individual-link > span:not(.ela-individual-number) { display: block; color: var(--ela-muted); font-size: .9rem; line-height: 1.35; margin-top: 3px; }


/* Ingredient photo card grid (natures-ingredients page) */
.ela-ing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ela-ing-card { background: #fff; border: 1px solid var(--ela-border); border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(0,89,97,.09); display: flex; flex-direction: column; }
.ela-ing-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.ela-ing-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ela-ing-card h3 { margin: 0; color: var(--ela-teal); font-size: .92rem; font-weight: 800; line-height: 1.35; }
.ela-ing-card p { margin: 0; color: var(--ela-muted); font-size: .82rem; line-height: 1.5; flex: 1; }

/* Formulation strategy ingredient grid (real-time-approach page) */
.ela-ingredient-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.ela-ingredient-card { background: #fff; border: 1px solid var(--ela-border); border-radius: 18px; box-shadow: 0 10px 22px rgba(0,89,97,.08); padding: 20px; }
.ela-ingredient-card h4 { margin: 0 0 8px; color: var(--ela-teal); font-size: 1rem; font-weight: 900; }
.ela-ingredient-card p { margin: 0; color: var(--ela-muted); line-height: 1.55; font-size: .95rem; }
.ela-num-grid { display: grid; gap: 14px; margin-top: 16px; }

/* ==============================================================
   4. PRODUCT PAGE COMPONENTS  (ela-pp- prefix)
   ============================================================== */

/* Hero layout */
.ela-pp-hero {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 30px;
}
.ela-pp-hero-main {
  background: var(--ela-white);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 34px;
  position: relative;
  overflow: hidden;
}
.ela-pp-hero-main::before {
  content: "";
  position: absolute;
  right: -120px; top: -120px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(254,205,8,.38), transparent 65%);
}
.ela-pp-hero-main h1 {
  position: relative;
  margin: 0 0 16px;
  color: var(--ela-teal);
  font-size: clamp(1.9rem, 4vw, 4rem);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.05em;
}
.ela-pp-hero-main h1 span { color: var(--ela-red); }
.ela-pp-lead {
  position: relative;
  margin: 0 0 16px;
  color: var(--ela-dark);
  font-size: 1.3rem;
  line-height: 1.6;
  font-weight: 700;
}
.ela-pp-hero-main p { position: relative; color: var(--ela-muted); font-size: 1.1rem; line-height: 1.7; margin: 0 0 15px; }

/* Trust pills */
.ela-pp-trust-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; margin-bottom: 4px; }
.ela-pp-pill { display: inline-flex; border-radius: 999px; background: rgba(0,89,97,.08); border: 1px solid rgba(0,89,97,.18); color: var(--ela-teal); font-weight: 800; font-size: .84rem; padding: 6px 12px; }
.ela-pp-pill-fsa { background: rgba(254,205,8,.25); border-color: rgba(254,205,8,.8); color: var(--ela-dark); }
.ela-pp-pill-fda { background: rgba(0,89,97,.14); border-color: var(--ela-teal); }
.ela-pp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Hero image card (sticky on desktop) */
.ela-pp-image-card {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 20px;
}
.ela-pp-fsa-badge {
  background: linear-gradient(135deg, var(--ela-yellow), #ffd700);
  border-radius: 14px;
  padding: 13px 16px;
  text-align: center;
}
.ela-pp-fsa-badge strong { display: block; color: var(--ela-dark); font-size: 1rem; font-weight: 900; line-height: 1.2; }
.ela-pp-fsa-badge span   { display: block; color: var(--ela-dark); font-size: .82rem; font-weight: 700; margin-top: 3px; opacity: .85; }
.ela-pp-image-card img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--ela-border); }
.ela-pp-image-card .ela-btn { width: 100%; justify-content: center; background: var(--ela-teal); color: #fff; box-shadow: none; }
.ela-pp-image-card .ela-btn:hover { color: var(--ela-yellow) !important; }
.ela-pp-card-tagline { margin: 0; text-align: center; color: var(--ela-teal); font-weight: 900; font-size: 1.05rem; line-height: 1.35; }

/* Trust bar (6-up credential strip) */
.ela-pp-trust-bar { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 28px; }
.ela-pp-trust-item {
  background: #fff;
  border: 1px solid var(--ela-border);
  border-radius: 16px;
  padding: 13px 10px;
  text-align: center;
  color: var(--ela-teal);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0,89,97,.07);
}
.ela-pp-trust-item strong { display: block; font-size: .75rem; color: var(--ela-muted); font-weight: 700; margin-top: 3px; }

/* Pain / conditions grid */
.ela-pp-pain-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ela-pp-pain-card { background: #fff; border: 1px solid var(--ela-border); border-radius: 20px; box-shadow: 0 14px 30px rgba(0,89,97,.1); padding: 22px; }
.ela-pp-pain-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ela-teal), var(--ela-red));
  box-shadow: 0 10px 24px rgba(0,89,97,.18);
  margin-bottom: 14px;
}
.ela-pp-pain-icon img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.ela-pp-pain-card h3 { margin: 0 0 10px; color: var(--ela-teal); font-size: 1.05rem; line-height: 1.18; font-weight: 900; }
.ela-pp-pain-card p  { margin: 0; color: var(--ela-muted); line-height: 1.7; font-size: 1rem; }

/* Split panels */
.ela-pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.ela-pp-panel {
  background: var(--ela-white);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
  padding: 30px;
}
.ela-pp-panel h2 {
  margin: 0 0 14px;
  color: var(--ela-teal);
  font-size: clamp(1.3rem, 2.3vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 900;
}
.ela-pp-panel h2 span { color: var(--ela-red); }
.ela-pp-panel p { color: var(--ela-muted); line-height: 1.7; margin: 0 0 14px; font-size: 1.1rem; }
.ela-pp-panel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ela-pp-panel ul li { position: relative; padding-left: 26px; color: var(--ela-dark); line-height: 1.5; font-weight: 700; font-size: 1.05rem; }
.ela-pp-panel ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ela-red); font-weight: 900; }
.ela-pp-diff-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ela-teal); font-weight: 800; font-size: .92rem;
  text-decoration: none; border-bottom: 1px solid rgba(0,89,97,.3); padding-bottom: 2px;
  transition: color .15s ease;
}
.ela-pp-diff-link:hover { color: var(--ela-red); }
.ela-pp-split-right { display: flex; flex-direction: column; gap: 16px; }

/* Brand tag card */
.ela-pp-brand-tag {
  text-align: center;
  color: var(--ela-teal);
  padding: 24px;
  background: var(--ela-white);
  border: 1px solid var(--ela-border);
  border-radius: var(--ela-radius);
  box-shadow: var(--ela-shadow);
}
.ela-pp-brand-tag span { color: var(--ela-red); }
/* Extended brand tag with headline + bullet list */
.ela-pp-brand-tag-hl {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ela-teal);
}
.ela-pp-brand-tag-hl span { color: var(--ela-red); }
.ela-pp-brand-tag ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.ela-pp-brand-tag ul li { position: relative; padding-left: 24px; color: var(--ela-dark); line-height: 1.45; font-weight: 700; font-size: 1rem; }
.ela-pp-brand-tag ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ela-red); font-weight: 900; }

/* How to use panel (product page variant) */
.ela-pp-how-panel { background: #fff; border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); overflow: hidden; }
.ela-pp-how-header { background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); color: #fff; text-align: center; padding: 26px 20px; }
.ela-pp-how-header h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.3rem); line-height: 1.05; font-weight: 900; }
.ela-pp-how-header span { color: var(--ela-yellow); }
.ela-pp-how-header p { max-width: 700px; margin: 10px auto 0; color: rgba(255,255,255,.88); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; padding: 26px; }
.ela-pp-step { border: 1px solid var(--ela-border); border-radius: 18px; padding: 22px; background: #f8fbfb; }
.ela-pp-step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ela-red), var(--ela-red-dark));
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 14px;
  box-shadow: 0 6px 16px rgba(var(--ela-red-rgb), .22);
}
.ela-pp-step h3 { margin: 0 0 8px; color: var(--ela-teal); font-size: 1.05rem; font-weight: 900; }
.ela-pp-step p  { margin: 0; color: var(--ela-muted); font-size: 1rem; line-height: 1.7; }

/* Ingredients section */
.ela-pp-ingredients { background: var(--ela-white); border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); overflow: hidden; }
.ela-pp-ing-header { background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); padding: 28px; text-align: center; }
.ela-pp-ing-header h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.2rem); line-height: 1.05; font-weight: 900; }
.ela-pp-ing-header span { color: var(--ela-yellow); }
.ela-pp-ing-header p { margin: 10px auto 0; color: rgba(255,255,255,.88); font-size: 1.1rem; line-height: 1.7; }
.ela-pp-ing-header a { color: var(--ela-yellow); font-weight: 800; }
.ela-pp-ing-body { padding: 28px; }
.ela-pp-hero-ings { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 26px; }
.ela-pp-hero-ing { background: #f8fbfb; border: 1px solid var(--ela-border); border-radius: 18px; padding: 18px; }
.ela-pp-hero-ing.highlight {
  background: rgba(var(--ela-red-rgb), .06);
  border-color: rgba(var(--ela-red-rgb), .28);
}
.ela-pp-hero-ing h3 { margin: 0 0 6px; color: var(--ela-teal); font-size: .98rem; font-weight: 900; }
.ela-pp-hero-ing p  { margin: 0; color: var(--ela-muted); font-size: .95rem; line-height: 1.6; }
.ela-pp-ing-list-label { text-align: center; color: var(--ela-teal); font-weight: 900; font-size: 1.15rem; margin-bottom: 16px; letter-spacing: -.02em; }
.ela-pp-ing-full-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.ela-pp-ing-item {
  background: rgba(0,89,97,.05);
  border: 1px solid var(--ela-border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--ela-teal);
  font-weight: 700;
  font-size: .87rem;
  text-align: left;
  display: flex; align-items: center; gap: 7px;
}
.ela-pp-ing-item::before { content: "✓"; color: var(--ela-red); font-weight: 900; font-size: .9rem; flex-shrink: 0; }

/* FSA/HSA callout section */
.ela-pp-fsa-section { background: linear-gradient(135deg, rgba(254,205,8,.18), rgba(254,205,8,.06)); border: 2px solid rgba(254,205,8,.65); border-radius: var(--ela-radius); padding: 32px; text-align: center; }
.ela-pp-fsa-section h2 { margin: 0 0 14px; color: var(--ela-teal); font-size: clamp(1.4rem, 2.3vw, 2.2rem); font-weight: 900; }
.ela-pp-fsa-section h2 span { color: var(--ela-red); }
.ela-pp-fsa-section p { margin: 0 auto 12px; max-width: 700px; color: var(--ela-muted); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-fsa-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 20px; }

/* Sizes section */
.ela-pp-sizes-banner { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 22px; }
.ela-pp-sizes-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 22px; }
.ela-pp-size-card { background: #fff; border: 1px solid var(--ela-border); border-radius: 20px; box-shadow: 0 14px 30px rgba(0,89,97,.1); padding: 22px; display: flex; flex-direction: column; }
.ela-pp-size-card.featured { border: 2px solid var(--ela-yellow); background: radial-gradient(circle at top right, rgba(254,205,8,.18), #fff 65%); }
.ela-pp-size-label { display: inline-block; background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); color: #fff; border-radius: 999px; padding: 5px 13px; font-weight: 900; font-size: .8rem; margin-bottom: 12px; align-self: flex-start; letter-spacing: .02em; }
.ela-pp-size-card.featured .ela-pp-size-label { background: linear-gradient(135deg, var(--ela-yellow), #ffd700); color: var(--ela-dark); }
.ela-pp-size-card h3 { margin: 0 0 10px; color: var(--ela-teal); font-size: 1.15rem; font-weight: 900; line-height: 1.1; }
.ela-pp-size-card h3 span { color: var(--ela-red); }
.ela-pp-size-card p { margin: 0; color: var(--ela-muted); font-size: 1rem; line-height: 1.6; flex: 1; padding-bottom: 16px; }
.ela-pp-size-cta { display: block; text-align: center; background: linear-gradient(135deg, var(--ela-red), var(--ela-red-dark)); color: #fff; border-radius: 999px; padding: 12px 16px; font-weight: 800; font-size: .9rem; text-decoration: none; margin-top: auto; transition: transform .2s ease, box-shadow .2s ease; }
.ela-pp-size-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(var(--ela-red-rgb), .22); color: #fff !important; }

/* Convenience pack banner */
.ela-pp-conv-pack { background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); border-radius: var(--ela-radius); padding: 32px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; margin: 30px 0; }
.ela-pp-conv-copy h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1rem, 1.45vw, 1.45rem); line-height: 1.1; font-weight: 900; white-space: nowrap; }
.ela-pp-conv-copy h2 span { color: var(--ela-yellow); }
.ela-pp-conv-copy p { margin: 0; color: rgba(255,255,255,.9); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-conv-pack .ela-btn { background: var(--ela-yellow); color: var(--ela-dark); min-width: 210px; white-space: nowrap; flex-shrink: 0; }
.ela-pp-conv-pack .ela-btn:hover { color: var(--ela-teal) !important; }

/* Layering system panel */
.ela-pp-layers { background: #fff; border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); overflow: hidden; margin: 30px 0; }
.ela-pp-layers-header { background: transparent; padding: 28px 28px 0; text-align: center; }
.ela-pp-layers-header h2 { margin: 0 0 12px; color: var(--ela-teal); font-size: clamp(1.4rem, 2.3vw, 2.3rem); font-weight: 900; letter-spacing: -.035em; }
.ela-pp-layers-header span { color: var(--ela-red); }
.ela-pp-layers-header p { margin: 0 auto; max-width: 700px; color: var(--ela-muted); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-layers-body { padding: 28px; }
.ela-pp-layers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ela-pp-layer-card { background: #f8fbfb; border: 1px solid var(--ela-border); border-radius: 18px; padding: 22px; }
.ela-pp-layer-card h3 { margin: 0 0 16px; color: var(--ela-teal); font-size: 1.05rem; font-weight: 900; }
.ela-pp-layer-card h3 span { color: var(--ela-red); }
.ela-pp-layer-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ela-pp-layer-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 10px; align-items: start; }
.ela-pp-layer-num { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ela-yellow); color: var(--ela-dark); font-weight: 900; font-size: .95rem; flex-shrink: 0; margin-top: 2px; }
.ela-pp-layer-copy strong { display: block; color: var(--ela-teal); font-size: .96rem; line-height: 1.2; margin-bottom: 3px; }
.ela-pp-layer-copy span { display: block; color: var(--ela-muted); font-size: .92rem; line-height: 1.5; }
.ela-pp-layers-cta { text-align: center; margin-top: 22px; }

/* Testimonials — product page variant */
.ela-pp-testimonials { background: #fff; border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); overflow: hidden; margin: 30px 0; }
.ela-pp-proof-header { background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); padding: 28px; text-align: center; }
.ela-pp-proof-header h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.2rem); font-weight: 900; }
.ela-pp-proof-header span { color: var(--ela-yellow); }
.ela-pp-proof-header p { max-width: 780px; margin: 12px auto 0; color: rgba(255,255,255,.88); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-proof-body { padding: 26px; }
.ela-pp-proof-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.ela-pp-proof-card { position: relative; background: #f8fbfb; border: 1px solid var(--ela-border); border-radius: 18px; padding: 24px; overflow: hidden; }
.ela-pp-proof-card.featured { border: 2px solid var(--ela-yellow); background: radial-gradient(circle at top right, rgba(254,205,8,.22), #fff 50%); grid-column: 1 / -1; }
.ela-pp-stars { color: #FECD08; font-size: 1.05rem; letter-spacing: 3px; margin-bottom: 8px; }
.ela-pp-quote-mark { position: absolute; right: 18px; top: 8px; font-size: 4rem; line-height: 1; color: rgba(0,89,97,.1); font-weight: 900; }
.ela-pp-proof-card p { position: relative; margin: 0 0 12px; color: var(--ela-dark); line-height: 1.7; font-style: italic; font-size: 1.1rem; }
.ela-pp-proof-name { position: relative; color: var(--ela-teal); font-weight: 900; font-style: normal !important; margin-top: 10px !important; }
.ela-pp-verified { font-weight: 400; color: var(--ela-muted); }
.ela-pp-reviews-cta { text-align: center; margin-top: 20px; }

/* Related product teaser */
.ela-pp-plus-teaser { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,.45fr); gap: 26px; align-items: center; background: #fff; border: 2px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); padding: 28px; margin: 30px 0; }
.ela-pp-plus-teaser-copy h3 { margin: 0 0 8px; color: var(--ela-teal); font-size: 1.3rem; font-weight: 900; }
.ela-pp-plus-teaser-copy h3 span { color: var(--ela-red); }
.ela-pp-plus-teaser-copy p { margin: 0 0 18px; color: var(--ela-muted); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-plus-teaser-copy .ela-btn { background: var(--ela-teal); color: #fff; }
.ela-pp-plus-teaser-copy .ela-btn:hover { color: var(--ela-yellow) !important; }
.ela-pp-plus-img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: contain; background: #f8fbfb; border-radius: 18px; border: 1px solid var(--ela-border); }

/* Order banner (pet / single-size products) */
.ela-pp-order-banner { margin: 30px 0; }
.ela-pp-order-banner img { display: block; width: 100%; height: auto; border-radius: var(--ela-radius); border: 1px solid var(--ela-border); box-shadow: var(--ela-shadow); }
.ela-pp-order-card { background: #fff; border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); padding: 28px; text-align: center; margin-top: 18px; }
.ela-pp-order-card h2 { margin: 0 0 12px; color: var(--ela-teal); font-size: clamp(1.3rem, 2.3vw, 2rem); font-weight: 900; letter-spacing: -.035em; }
.ela-pp-order-card h2 span { color: var(--ela-red); }
.ela-pp-order-card p { margin: 0 auto 18px; max-width: 700px; color: var(--ela-muted); line-height: 1.7; font-size: 1.1rem; }

/* Awards / Certifications section (teal header + 2-col copy/image body) */
.ela-pp-awards { background: var(--ela-white); border: 1px solid var(--ela-border); border-radius: var(--ela-radius); box-shadow: var(--ela-shadow); overflow: hidden; margin: 30px 0; }
.ela-pp-awards-header { background: linear-gradient(135deg, var(--ela-teal), var(--ela-light-teal)); padding: 28px; text-align: center; }
.ela-pp-awards-header h2 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.3vw, 2.2rem); font-weight: 900; }
.ela-pp-awards-header span { color: var(--ela-yellow); }
.ela-pp-awards-header p { max-width: 780px; margin: 12px auto 0; color: rgba(255,255,255,.88); line-height: 1.7; font-size: 1.1rem; }
.ela-pp-awards-body { padding: 28px; }
.ela-pp-awards-inner { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 32px; align-items: center; }
.ela-pp-awards-copy h3 { margin: 0 0 10px; color: var(--ela-teal); font-size: 1.1rem; font-weight: 900; }
.ela-pp-awards-copy h3 span { color: var(--ela-red); }
.ela-pp-awards-copy p { color: var(--ela-muted); line-height: 1.7; margin: 0 0 14px; font-size: 1.1rem; }
.ela-pp-awards-copy ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ela-pp-awards-copy ul li { position: relative; padding-left: 26px; color: var(--ela-dark); line-height: 1.5; font-weight: 700; font-size: 1.05rem; }
.ela-pp-awards-copy ul li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ela-red); font-weight: 900; }
.ela-pp-awards-img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--ela-border); }

/* Centered CTA row */
.ela-pp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 22px; }


/* ==============================================================
   5. HOMEPAGE COMPONENTS  (hp- prefix)
   ============================================================== */

.hp-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:24px;align-items:stretch;padding:28px 0 0;}
.hp-hero-main{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);padding:40px 38px;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.hp-hero-main::before{content:"";position:absolute;right:-130px;top:-130px;width:300px;height:300px;background:radial-gradient(circle,rgba(254,205,8,.36),transparent 65%);pointer-events:none;}
.hp-hero-main::after{content:"";position:absolute;left:-80px;bottom:-80px;width:220px;height:220px;background:radial-gradient(circle,rgba(0,89,97,.06),transparent 65%);pointer-events:none;}
.hp-hero-main h1{position:relative;margin:0 0 16px;color:var(--ela-teal);font-size:clamp(1.9rem,3.8vw,3.8rem);line-height:.96;font-weight:900;letter-spacing:-.05em;}
.hp-hero-main h1 span{color:var(--ela-red);}
.hp-hero-lead{position:relative;margin:0 0 18px;color:var(--ela-dark);font-size:1.15rem;line-height:1.6;font-weight:700;}
.hp-hero-main p{position:relative;color:var(--ela-muted);font-size:1rem;line-height:1.65;margin:0 0 6px;}
.hp-hero-btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.hp-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.hp-hero-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(0,89,97,.07);border:1px solid rgba(0,89,97,.16);border-radius:999px;color:var(--ela-teal);font-weight:800;font-size:.82rem;padding:6px 12px;}
.hp-hero-pill.fsa{background:rgba(254,205,8,.22);border-color:rgba(254,205,8,.75);color:var(--ela-dark);}
.hp-hero-aside{display:flex;flex-direction:column;gap:18px;}
.hp-hero-img-card{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;flex:1;display:flex;flex-direction:column;}
.hp-hero-img-card img{display:block;width:100%;flex:1;min-height:220px;object-fit:cover;}
.hp-hero-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--ela-teal);}
.hp-hero-stat{padding:14px 10px;text-align:center;color:#fff;}
.hp-hero-stat strong{display:block;font-size:1.25rem;font-weight:900;line-height:1;color:var(--ela-yellow);}
.hp-hero-stat span{display:block;font-size:.78rem;font-weight:700;margin-top:3px;color:rgba(255,255,255,.85);}
.hp-hero-mini-card{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow-sm);padding:20px 22px;}
.hp-hero-mini-card h3{margin:0 0 10px;color:var(--ela-teal);font-size:1rem;font-weight:900;}
.hp-hero-mini-card h3 span{color:var(--ela-red);}
.hp-mini-checklist{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.hp-mini-checklist li{display:flex;gap:9px;align-items:flex-start;font-size:.88rem;color:var(--ela-dark);font-weight:700;line-height:1.4;}
.hp-mini-check{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));color:#fff;font-size:.72rem;font-weight:900;}

.hp-trust-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:24px 0;}
.hp-trust-item{background:#fff;border:1px solid var(--ela-border);border-radius:18px;padding:16px 10px;text-align:center;box-shadow:var(--ela-shadow-sm);}
.hp-trust-icon{font-size:1.8rem;line-height:1;margin-bottom:7px;}
.hp-trust-item strong{display:block;color:var(--ela-teal);font-size:.88rem;font-weight:900;line-height:1.2;}
.hp-trust-item span{display:block;color:var(--ela-muted);font-size:.76rem;font-weight:700;margin-top:3px;}

.hp-club-strip{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#1a5560,var(--ela-teal));border-radius:16px;padding:16px 24px;margin:4px 0 24px;gap:16px;flex-wrap:wrap;}
.hp-club-strip-msg{color:#fff;font-size:1rem;font-weight:700;margin:0;line-height:1.4;}
.hp-club-strip-msg strong{color:var(--ela-yellow);}
.hp-club-strip-btn{background:var(--ela-yellow);color:var(--ela-dark)!important;border-radius:999px;padding:11px 24px;font-weight:900;font-size:.92rem;text-decoration:none;white-space:nowrap;transition:transform .2s ease,box-shadow .2s ease;flex-shrink:0;}
.hp-club-strip-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.2);}

.hp-section{margin:36px 0;}
.hp-section-header{text-align:center;margin:0 auto 26px;max-width:820px;}
.hp-section-header h2{margin:0 0 10px;color:var(--ela-teal);font-size:clamp(1.45rem,2.5vw,2.5rem);line-height:1.04;font-weight:900;letter-spacing:-.04em;}
.hp-section-header h2 span{color:var(--ela-red);}
.hp-section-header p{margin:0;color:var(--ela-muted);font-size:1.05rem;line-height:1.65;}

.hp-awards{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;margin:0 0 36px;}
.hp-awards-header{background:linear-gradient(135deg,#173034,#1f3f43);padding:28px;text-align:center;}
.hp-awards-header h2{margin:0 0 8px;color:#fff;font-size:clamp(1.4rem,2.4vw,2.4rem);font-weight:900;letter-spacing:-.04em;}
.hp-awards-header span{color:var(--ela-yellow);}
.hp-awards-header p{margin:8px auto 0;color:rgba(255,255,255,.85);font-size:1rem;line-height:1.6;max-width:680px;}
.hp-awards-body{padding:30px;}
.hp-awards-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;}
.hp-awards-copy h3{margin:0 0 12px;color:var(--ela-teal);font-size:1.15rem;font-weight:900;line-height:1.2;}
.hp-awards-copy h3 span{color:var(--ela-red);}
.hp-awards-copy p{margin:0 0 12px;color:var(--ela-muted);font-size:.95rem;line-height:1.65;}
.hp-awards-copy ul{margin:10px 0 14px;padding:0 0 0 20px;color:var(--ela-dark);font-size:.92rem;line-height:1.8;}
.hp-awards-note{background:rgba(0,89,97,.08);border-left:4px solid var(--ela-teal);border-radius:0 12px 12px 0;padding:13px 16px;color:var(--ela-teal);font-size:.88rem;font-weight:700;line-height:1.5;}
.hp-awards-img{width:240px;max-width:100%;border-radius:16px;box-shadow:var(--ela-shadow-sm);}

.hp-products-wrap{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;margin:0 0 36px;}
.hp-products-header{background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));padding:28px;text-align:center;}
.hp-products-header h2{margin:0 0 8px;color:#fff;font-size:clamp(1.45rem,2.4vw,2.4rem);font-weight:900;letter-spacing:-.04em;}
.hp-products-header span{color:var(--ela-yellow);}
.hp-products-header p{margin:8px auto 0;color:rgba(255,255,255,.88);font-size:1rem;line-height:1.6;max-width:680px;}
.hp-products-body{padding:26px;}
.hp-product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.hp-product-card{background:#f8fbfb;border:1px solid var(--ela-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease,transform .22s ease;}
.hp-product-card:hover{box-shadow:0 12px 32px rgba(0,89,97,.14);transform:translateY(-3px);}
.hp-product-img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:#f0f4f4;}
.hp-product-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.hp-product-label{display:inline-block;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:900;letter-spacing:.03em;margin-bottom:8px;align-self:flex-start;}
.hp-label-original{background:rgba(226,61,50,.12);color:#c0342b;}
.hp-label-maxx{background:rgba(184,146,89,.14);color:#8a6a2e;}
.hp-label-maxxplus{background:rgba(140,140,139,.12);color:#555;}
.hp-label-hemp{background:rgba(0,153,51,.1);color:#007a29;}
.hp-label-pr26{background:rgba(42,53,91,.12);color:#2a355b;}
.hp-label-foot{background:rgba(0,89,97,.1);color:var(--ela-teal);}
.hp-label-night{background:rgba(67,69,121,.12);color:#434579;}
.hp-label-pet{background:rgba(0,160,168,.1);color:#007a82;}
.hp-product-body h3{margin:0 0 6px;color:var(--ela-teal);font-size:.96rem;font-weight:900;line-height:1.2;}
.hp-product-body p{margin:0 0 12px;color:var(--ela-muted);font-size:.82rem;line-height:1.5;flex:1;}
.hp-product-cta{display:block;text-align:center;background:linear-gradient(135deg,var(--ela-red),var(--ela-red-dark));color:#fff;border-radius:999px;padding:11px 14px;font-weight:800;font-size:.86rem;text-decoration:none;margin-top:auto;transition:transform .2s ease,box-shadow .2s ease;}
.hp-product-cta:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(var(--ela-red-rgb),.24);color:#fff!important;}
.hp-products-row2{margin-top:18px;}
.hp-view-all-wrap{text-align:center;margin-top:22px;}

.hp-proof-strip{background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));border-radius:var(--ela-radius);padding:40px 34px;text-align:center;margin:0 0 36px;position:relative;overflow:hidden;}
.hp-proof-strip::before{content:"\201C";position:absolute;left:20px;top:-10px;font-size:12rem;line-height:1;color:rgba(255,255,255,.06);font-weight:900;pointer-events:none;}
.hp-proof-strip h2{margin:0 0 10px;color:#fff;font-size:clamp(1.6rem,2.8vw,2.8rem);font-weight:900;letter-spacing:-.04em;}
.hp-proof-strip h2 span{color:var(--ela-yellow);}
.hp-proof-strip p{margin:0 auto 28px;color:rgba(255,255,255,.88);font-size:1.05rem;max-width:680px;line-height:1.65;}
.hp-proof-numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.12);}
.hp-proof-num{padding:20px 14px;text-align:center;}
.hp-proof-num strong{display:block;color:var(--ela-yellow);font-size:clamp(1.5rem,3vw,2.6rem);font-weight:900;line-height:1;letter-spacing:-.03em;}
.hp-proof-num span{display:block;color:rgba(255,255,255,.85);font-size:.82rem;font-weight:700;margin-top:5px;line-height:1.3;}

.hp-testimonials{margin:0 0 36px;}
.hp-testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.hp-testimonial{background:#fff;border:1px solid var(--ela-border);border-radius:20px;padding:26px;position:relative;overflow:hidden;box-shadow:var(--ela-shadow-sm);}
.hp-testimonial.featured{border:2px solid var(--ela-yellow);background:radial-gradient(circle at top right,rgba(254,205,8,.18),#fff 55%);}
.hp-t-stars{color:var(--ela-yellow);font-size:1rem;letter-spacing:2px;margin-bottom:10px;}
.hp-t-quote{position:absolute;right:18px;top:10px;font-size:4.5rem;line-height:1;color:rgba(0,89,97,.08);font-weight:900;pointer-events:none;}
.hp-testimonial p{position:relative;margin:0 0 14px;color:var(--ela-dark);font-style:italic;line-height:1.7;font-size:.98rem;}
.hp-t-name{position:relative;color:var(--ela-teal);font-weight:900;font-size:.92rem;}
.hp-t-product{display:inline-block;background:rgba(254,205,8,.22);border:1px solid rgba(254,205,8,.65);border-radius:999px;color:var(--ela-dark);font-size:.74rem;font-weight:900;padding:4px 10px;margin-top:8px;}

.hp-diff{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;margin:0 0 36px;}
.hp-diff-header{background:linear-gradient(135deg,#173034,#1f3f43);padding:30px;text-align:center;}
.hp-diff-header h2{margin:0 0 8px;color:#fff;font-size:clamp(1.45rem,2.4vw,2.4rem);font-weight:900;letter-spacing:-.04em;}
.hp-diff-header span{color:var(--ela-yellow);}
.hp-diff-header p{margin:8px auto 0;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.6;max-width:680px;}
.hp-diff-body{padding:30px;}
.hp-diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hp-diff-card{background:#f8fbfb;border:1px solid var(--ela-border);border-radius:18px;padding:24px;}
.hp-diff-icon{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px;}
.hp-diff-card h3{margin:0 0 8px;color:var(--ela-teal);font-size:1rem;font-weight:900;}
.hp-diff-card h3 span{color:var(--ela-red);}
.hp-diff-card p{margin:0;color:var(--ela-muted);font-size:.9rem;line-height:1.6;}

.hp-fsa-band{background:linear-gradient(135deg,rgba(254,205,8,.18),rgba(254,205,8,.06));border:2px solid rgba(254,205,8,.65);border-radius:var(--ela-radius);padding:32px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;margin:0 0 36px;}
.hp-fsa-copy h2{margin:0 0 10px;color:var(--ela-teal);font-size:clamp(1.2rem,2vw,1.9rem);font-weight:900;line-height:1.05;letter-spacing:-.03em;}
.hp-fsa-copy h2 span{color:var(--ela-red);}
.hp-fsa-copy p{margin:0;color:var(--ela-muted);line-height:1.65;font-size:1rem;}

.hp-club{background:linear-gradient(135deg,rgba(254,205,8,.14),rgba(254,205,8,.04));border:2px solid rgba(254,205,8,.5);border-radius:var(--ela-radius);padding:36px 34px;margin:0 0 36px;position:relative;overflow:hidden;}
.hp-club::before{content:"";position:absolute;right:-100px;top:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(254,205,8,.25),transparent 65%);pointer-events:none;}
.hp-club-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;position:relative;}
.hp-club-copy h2{margin:0 0 10px;color:var(--ela-teal);font-size:clamp(1.3rem,2.2vw,2rem);font-weight:900;line-height:1.05;letter-spacing:-.04em;}
.hp-club-copy h2 span{color:var(--ela-red);}
.hp-club-copy>p{margin:0 0 18px;color:var(--ela-muted);font-size:1rem;line-height:1.65;}
.hp-club-perks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px;}
.hp-club-perk{display:flex;align-items:flex-start;gap:10px;}
.hp-club-perk-check{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:.78rem;margin-top:1px;}
.hp-club-perk-text{font-size:.9rem;color:var(--ela-dark);font-weight:800;line-height:1.3;}
.hp-club-perk-text span{display:block;font-size:.8rem;color:var(--ela-muted);font-weight:400;margin-top:2px;}
.hp-club-badge-col{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;}
.hp-club-badge{background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));color:#fff;border-radius:50%;width:120px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,89,97,.28);}
.hp-club-badge strong{display:block;font-size:2rem;font-weight:900;line-height:1;color:var(--ela-yellow);}
.hp-club-badge span{display:block;font-size:.7rem;font-weight:800;line-height:1.3;text-align:center;padding:0 6px;}

.hp-ing{background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;margin:0 0 36px;}
.hp-ing-header{background:linear-gradient(135deg,var(--ela-teal),var(--ela-light-teal));padding:28px;text-align:center;}
.hp-ing-header h2{margin:0 0 8px;color:#fff;font-size:clamp(1.45rem,2.4vw,2.4rem);font-weight:900;}
.hp-ing-header span{color:var(--ela-yellow);}
.hp-ing-header p{margin:8px auto 0;color:rgba(255,255,255,.88);font-size:1rem;line-height:1.6;max-width:680px;}
.hp-ing-body{padding:28px;}
.hp-ing-sampling{text-align:center;margin:0 0 22px;padding:14px 20px;background:rgba(0,89,97,.06);border-radius:14px;color:var(--ela-teal);font-size:.92rem;font-weight:700;line-height:1.5;}
.hp-ing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hp-ing-item{background:#f8fbfb;border:1px solid var(--ela-border);border-radius:16px;padding:18px;text-align:center;}
.hp-ing-emoji{font-size:2rem;margin-bottom:10px;display:block;}
.hp-ing-item h3{margin:0 0 5px;color:var(--ela-teal);font-size:.9rem;font-weight:900;}
.hp-ing-item p{margin:0;color:var(--ela-muted);font-size:.8rem;line-height:1.5;}
.hp-ing-cta{text-align:center;margin-top:22px;}

.hp-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.5fr);gap:0;align-items:stretch;background:#fff;border:1px solid var(--ela-border);border-radius:var(--ela-radius);box-shadow:var(--ela-shadow);overflow:hidden;margin:0 0 36px;}
.hp-story-copy{padding:36px 32px;display:flex;flex-direction:column;justify-content:center;}
.hp-story-copy .ela-eyebrow{margin-bottom:12px;}
.hp-story-copy h2{margin:0 0 14px;color:var(--ela-teal);font-size:clamp(1.4rem,2.3vw,2.2rem);font-weight:900;line-height:1.05;letter-spacing:-.04em;}
.hp-story-copy h2 span{color:var(--ela-red);}
.hp-story-copy p{color:var(--ela-muted);line-height:1.7;margin:0 0 12px;font-size:1rem;}
.hp-story-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.hp-story-logo-wrap{background:#f8fbfb;display:flex;align-items:center;justify-content:center;padding:32px;}
.hp-story-logo{display:block;width:100%;max-width:280px;height:auto;object-fit:contain;}

.hp-articles{margin:0 0 36px;}
.hp-article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hp-article-row2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:780px;margin:20px auto 0;}
.hp-article-card{background:#fff;border:1px solid var(--ela-border);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .22s ease,transform .22s ease;}
.hp-article-card:hover{box-shadow:0 10px 30px rgba(0,89,97,.12);transform:translateY(-3px);}
.hp-article-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#f0f4f4;}
.hp-article-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.hp-article-tag{display:inline-block;background:rgba(0,89,97,.08);border-radius:999px;color:var(--ela-teal);font-size:.74rem;font-weight:900;padding:4px 10px;margin-bottom:9px;letter-spacing:.04em;text-transform:uppercase;}
.hp-article-card h3{margin:0 0 8px;color:var(--ela-dark);font-size:1.02rem;font-weight:900;line-height:1.3;}
.hp-article-card p{margin:0 0 14px;color:var(--ela-muted);font-size:.86rem;line-height:1.55;flex:1;}
.hp-article-link{font-size:.86rem;font-weight:800;color:var(--ela-red);text-decoration:none;letter-spacing:.01em;}
.hp-article-link:hover{color:var(--ela-teal);}
.hp-article-link::after{content:" \2192";}

.hp-final-cta{background:linear-gradient(135deg,var(--ela-red),var(--ela-red-dark));border-radius:var(--ela-radius);padding:48px 34px;text-align:center;color:#fff;box-shadow:0 24px 60px rgba(var(--ela-red-rgb),.22);margin:0 0 36px;position:relative;overflow:hidden;}
.hp-final-cta::before{content:"";position:absolute;right:-120px;top:-100px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 65%);pointer-events:none;}
.hp-final-cta h2{margin:0 0 14px;color:#fff;font-size:clamp(1.7rem,3.2vw,3.2rem);font-weight:900;letter-spacing:-.045em;line-height:1;}
.hp-final-cta h2 span{color:var(--ela-yellow);}
.hp-final-cta p{margin:0 auto 26px;max-width:700px;color:rgba(255,255,255,.9);font-size:1.08rem;line-height:1.65;}
.hp-final-cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.hp-btn-white{background:#fff;color:var(--ela-red);font-weight:900;display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;padding:14px 28px;font-size:1rem;text-decoration:none;transition:transform .2s ease;}
.hp-btn-white:hover{color:var(--ela-teal)!important;transform:translateY(-2px);}
.hp-btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.65);font-weight:800;display:inline-flex;align-items:center;justify-content:center;min-height:50px;border-radius:999px;padding:14px 28px;font-size:1rem;text-decoration:none;transition:all .2s ease;}
.hp-btn-outline:hover{background:rgba(255,255,255,.12);color:#fff!important;transform:translateY(-2px);}

.hp-footer-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ela-teal);border-radius:18px;overflow:hidden;}
.hp-footer-strip div{padding:16px 10px;text-align:center;color:#fff;font-weight:900;font-size:.88rem;background:rgba(255,255,255,.06);line-height:1.3;}
.hp-footer-strip div span{display:block;font-size:.74rem;font-weight:700;color:rgba(255,255,255,.72);margin-top:3px;}


/* ==============================================================
   6. RESPONSIVE
   ============================================================== */

@media (max-width: 980px) {
  /* Article components */
  .ela-ing-grid { grid-template-columns: repeat(3,1fr); }
  .ela-ingredient-grid { grid-template-columns: repeat(2,1fr); }
  /* Awards section */
  .ela-pp-awards-inner { grid-template-columns: 1fr; }
  /* Article */
  .ela-hero        { grid-template-columns: 1fr; }
  .ela-split       { grid-template-columns: 1fr; }
  .ela-specials-layout { grid-template-columns: 1fr; }
  .ela-relief-grid { grid-template-columns: repeat(2,1fr); }
  .ela-product-card,
  .ela-product-card:nth-child(even) { grid-template-columns: 1fr; }
  .ela-product-card:nth-child(even) .ela-product-media { order: 0; }
  .ela-steps       { grid-template-columns: 1fr; }
  .ela-proof-grid  { grid-template-columns: 1fr; }
  .ela-trust-strip { grid-template-columns: 1fr; }
  .ela-footer-strip { grid-template-columns: repeat(2,1fr); }
  /* Product */
  .ela-pp-hero     { grid-template-columns: 1fr; }
  .ela-pp-image-card { position: static; }
  .ela-pp-trust-bar { grid-template-columns: repeat(3,1fr); }
  .ela-pp-pain-grid { grid-template-columns: repeat(2,1fr); }
  .ela-pp-split    { grid-template-columns: 1fr; }
  .ela-pp-hero-ings { grid-template-columns: repeat(2,1fr); }
  .ela-pp-ing-full-list { grid-template-columns: repeat(2,1fr); }
  .ela-pp-sizes-grid { grid-template-columns: repeat(2,1fr); }
  .ela-pp-conv-pack { grid-template-columns: 1fr; text-align: center; }
  .ela-pp-layers-grid { grid-template-columns: 1fr; }
  .ela-pp-proof-card.featured { grid-column: auto; }
  .ela-pp-plus-teaser { grid-template-columns: 1fr; }
  .ela-pp-plus-img { min-height: 140px; }
  .ela-pp-steps    { grid-template-columns: 1fr; }
  /* Homepage */
  .hp-hero { grid-template-columns: 1fr; }
  .hp-hero-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .hp-hero-img-card { flex: none; }
  .hp-trust-bar { grid-template-columns: repeat(3,1fr); }
  .hp-product-grid { grid-template-columns: repeat(2,1fr); }
  .hp-proof-numbers { grid-template-columns: repeat(2,1fr); }
  .hp-testimonial-grid { grid-template-columns: 1fr; }
  .hp-diff-grid { grid-template-columns: repeat(2,1fr); }
  .hp-fsa-band { grid-template-columns: 1fr; text-align: center; }
  .hp-awards-inner { grid-template-columns: 1fr; text-align: center; }
  .hp-awards-img { width: 200px; margin: 0 auto; }
  .hp-club-inner { grid-template-columns: 1fr; text-align: center; }
  .hp-club-badge-col { flex-direction: row; justify-content: center; }
  .hp-club-perks { grid-template-columns: 1fr; }
  .hp-ing-grid { grid-template-columns: repeat(2,1fr); }
  .hp-story { grid-template-columns: 1fr; }
  .hp-story-logo-wrap { min-height: 220px; }
  .hp-article-grid { grid-template-columns: repeat(2,1fr); }
  .hp-article-row2 { grid-template-columns: 1fr; }
  .hp-footer-strip { grid-template-columns: repeat(2,1fr); }
  .hp-club-strip { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .ela-ing-grid { grid-template-columns: repeat(2,1fr); }
  .ela-ingredient-grid { grid-template-columns: 1fr; }
  .ela-container   { padding: 18px 12px 38px; }
  .ela-top-header  { flex-direction: column; text-align: center; padding: 18px; }
  .ela-hero-main,
  .ela-panel       { padding: 24px; }
  .ela-relief-grid { grid-template-columns: 1fr; }
  .ela-package-grid { grid-template-columns: 1fr; }
  .ela-btn         { width: 100%; }
  .ela-footer-strip { grid-template-columns: 1fr; }
  /* Product */
  .ela-pp-hero-main,
  .ela-pp-panel,
  .ela-pp-ing-body,
  .ela-pp-layers-body,
  .ela-pp-proof-body { padding: 22px; }
  .ela-pp-steps    { padding: 18px; }
  .ela-pp-trust-bar { grid-template-columns: repeat(2,1fr); }
  .ela-pp-pain-grid { grid-template-columns: 1fr; }
  .ela-pp-hero-ings { grid-template-columns: 1fr; }
  .ela-pp-ing-full-list { grid-template-columns: repeat(2,1fr); }
  .ela-pp-sizes-grid { grid-template-columns: 1fr; }
  /* Homepage */
  .hp-hero-main { padding: 28px 22px; }
  .hp-hero-aside { grid-template-columns: 1fr; }
  .hp-trust-bar { grid-template-columns: repeat(2,1fr); }
  .hp-product-grid { grid-template-columns: repeat(2,1fr); }
  .hp-testimonial-grid { grid-template-columns: 1fr; }
  .hp-diff-grid { grid-template-columns: 1fr; }
  .hp-ing-grid { grid-template-columns: repeat(2,1fr); }
  .hp-story-copy { padding: 24px 20px; }
  .hp-article-grid { grid-template-columns: 1fr; }
  .hp-article-row2 { grid-template-columns: 1fr; }
  .hp-proof-numbers { grid-template-columns: repeat(2,1fr); }
  .hp-final-cta { padding: 34px 22px; }
  .hp-footer-strip { grid-template-columns: 1fr; }
  .hp-hero-btn-row,
  .hp-story-btns,
  .hp-final-cta-btns { flex-direction: column; }
}