/** Shopify CDN: Minification failed

Line 113:8 Expected identifier but found whitespace
Line 113:9 Unexpected "rgba("

**/
/* ============================================================
   ELARIS7 — BUNDLE PRODUCT PAGE
   Premium Bundle + Giveaway Styling

   IMPORTANT:
   This stylesheet is loaded ONLY when template.suffix == 'bundle-sets'
   from theme.liquid. Therefore the rules below intentionally do not
   depend on Prestige body classes.
   ============================================================ */

:root {
  --e7b-navy: #073c5d;
  --e7b-navy-deep: #052f49;
  --e7b-blue: #eaf5fa;
  --e7b-blue-soft: #f5fafd;
  --e7b-white: #ffffff;
  --e7b-text: #234e69;
  --e7b-muted: #668397;
  --e7b-line: rgba(7, 60, 93, 0.15);
}

/* ============================================================
   REAL RESULTS
   Bundles don't need the hardcoded results section.
   ============================================================ */

[id*="real_results"] {
  display: none !important;
}


/* ============================================================
   TOP PRODUCT AREA
   ============================================================ */

[id*="shopify-section-template"] [class*="product-information"],
[class*="product-information"] {
  background: #ffffff;
}


/* Product title */

.product-information h1 {
  color: var(--e7b-navy) !important;

  font-weight: 500 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
}


/* Product description */

.product-information .rte,
.product-information .rte *,
.product-information .rte,
.product-information .rte * {
  color: var(--e7b-text);
}


/* ============================================================
   BUY BUTTON / GIFT AREA POLISH
   VISUAL ONLY — NO FUNCTIONALITY CHANGES
   ============================================================ */

.product-information button[type="submit"] {
  min-height: 52px;

  border-radius: 0 !important;

  font-weight: 700;
  letter-spacing: 0.08em;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
}


@media (hover: hover) {

  .product-information button[type="submit"]:hover {
    transform: translateY(-1px);
  }

}


/* ============================================================
   BUNDLE GIVEAWAY MESSAGE
   Creates a campaign/perk module without touching Liquid.
   ============================================================ */
[id*="key_benefits"] {
  position: relative;

  padding-top: 48px !important;
  padding-bottom: 48px !important;

  background: #ffffff !important;
}


/* Main giveaway panel */

  color: rgba(255, 255, 255, 0.82);

  font-size: 11px;
  line-height: 1.65;
  letter-spacing: 0.02em;

  border: 1px solid rgba(255,255,255,0.05);

  box-shadow: 0 12px 40px rgba(5, 47, 73, 0.08);
}


/* ============================================================
   KEY BENEFITS
   ============================================================ */

[id*="key_benefits"]::before {
  content: "WHY THIS BUNDLE";

  display: block;

  width: min(calc(100% - 40px), 1200px);

  margin: 0 auto 14px;

  color: #718b9c;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
}


[id*="key_benefits"] h2,
[id*="key_benefits"] h2 *,
[id*="key_benefits"] h2,
[id*="key_benefits"] h2 * {
  color: var(--e7b-navy) !important;

  font-size: clamp(34px, 4vw, 52px) !important;
  font-weight: 500 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
}


[id*="key_benefits"] ul {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 0 50px !important;

  margin: 30px 0 0 !important;
  padding: 0 !important;

  list-style: none !important;

  counter-reset: e7b-benefit;
}


[id*="key_benefits"] li {
  position: relative;

  margin: 0 !important;

  padding:
    20px
    8px
    20px
    48px !important;

  border-top: 1px solid var(--e7b-line);

  color: var(--e7b-text) !important;

  font-size: 13px !important;
  line-height: 1.55 !important;

  opacity: 1 !important;

  counter-increment: e7b-benefit;
}


[id*="key_benefits"] li * {
  color: var(--e7b-text) !important;
  opacity: 1 !important;
}


[id*="key_benefits"] li::before {
  content: "0" counter(e7b-benefit);

  position: absolute;

  top: 22px;
  left: 0;

  color: #718b9c;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.1em;
}


/* ============================================================
   WHAT'S INSIDE
   Main bundle showcase panel
   ============================================================ */

[id*="whats_inside"] {
  position: relative;

  overflow: hidden;

  padding: 0 !important;

  background:
    linear-gradient(
      115deg,
      #073c5d 0%,
      #06466d 52%,
      #073957 100%
    ) !important;
}


[id*="whats_inside"] > div {
  position: relative;
  z-index: 2;

  padding-top: 86px !important;
  padding-bottom: 86px !important;
}


/* Decorative circle */

[id*="whats_inside"]::after {
  content: "";

  position: absolute;

  top: -270px;
  right: -220px;

  width: 500px;
  height: 500px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 50%;

  pointer-events: none;
}


/* Number */

[id*="whats_inside"]::before {
  content: "01";

  position: absolute;

  z-index: 3;

  top: 34px;

  right:
    max(
      24px,
      calc((100vw - 1200px) / 2)
    );

  color: rgba(255,255,255,0.34);

  font-size: 17px;
  font-weight: 400;

  letter-spacing: 0.08em;
}


/* Heading */

[id*="whats_inside"] h2,
[id*="whats_inside"] h2 *,
[id*="whats_inside"] h2,
[id*="whats_inside"] h2 * {
  max-width: 700px;

  margin-top: 0 !important;
  margin-bottom: 30px !important;

  color: #ffffff !important;

  font-size: clamp(40px, 5vw, 66px) !important;
  font-weight: 400 !important;

  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;

  opacity: 1 !important;
}


[id*="whats_inside"] h2::before {
  content: "INSIDE YOUR BUNDLE";

  display: block;

  margin-bottom: 17px;

  color:
    rgba(255,255,255,0.65) !important;

  font-size: 9px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.25em;
}


[id*="whats_inside"] h2::after {
  content: "";

  display: block;

  width: 44px;
  height: 2px;

  margin-top: 23px;

  background:
    rgba(255,255,255,0.82);
}


/* Content */

[id*="whats_inside"] p,
[id*="whats_inside"] p *,
[id*="whats_inside"] span,
[id*="whats_inside"] li,
[id*="whats_inside"] li *,
[id*="whats_inside"] .rte,
[id*="whats_inside"] .rte *,
[id*="whats_inside"] p,
[id*="whats_inside"] p *,
[id*="whats_inside"] li,
[id*="whats_inside"] li *,
[id*="whats_inside"] .rte,
[id*="whats_inside"] .rte * {
  color:
    rgba(255,255,255,0.84) !important;

  opacity: 1 !important;
}


[id*="whats_inside"] p {
  max-width: 850px;

  font-size: 13px !important;
  line-height: 1.75 !important;
}


[id*="whats_inside"] strong,
[id*="whats_inside"] b,
[id*="whats_inside"] strong,
[id*="whats_inside"] b {
  color: #ffffff !important;

  font-weight: 700 !important;

  opacity: 1 !important;
}


/* Bundle item list */

[id*="whats_inside"] ul,
[id*="whats_inside"] ol,
[id*="whats_inside"] ul,
[id*="whats_inside"] ol {
  max-width: 900px;

  margin: 30px 0 0 !important;
  padding: 0 !important;

  list-style: none !important;
}


[id*="whats_inside"] li {
  position: relative;

  margin: 0 !important;

  padding:
    18px
    10px
    18px
    32px !important;

  border-top:
    1px solid rgba(255,255,255,0.17);
}


[id*="whats_inside"] li:last-child {
  border-bottom:
    1px solid rgba(255,255,255,0.17);
}


[id*="whats_inside"] li::before {
  content: "";

  position: absolute;

  left: 1px;
  top: 25px;

  width: 6px;
  height: 6px;

  border:
    1px solid rgba(255,255,255,0.8);

  border-radius: 50%;
}


/* ============================================================
   HOW TO USE
   Light editorial section
   ============================================================ */

[id*="how_to_use"] {
  position: relative;

  padding: 0 !important;

  background:
    linear-gradient(
      115deg,
      #ffffff 0%,
      #f3f9fc 100%
    ) !important;
}


[id*="how_to_use"] > div {
  padding-top: 82px !important;
  padding-bottom: 82px !important;
}


[id*="how_to_use"]::before {
  content: "02";

  position: absolute;

  top: 34px;

  right:
    max(
      24px,
      calc((100vw - 1200px) / 2)
    );

  color: rgba(7,60,93,0.28);

  font-size: 17px;
  font-weight: 400;

  letter-spacing: 0.08em;
}


[id*="how_to_use"] h2,
[id*="how_to_use"] h2 *,
[id*="how_to_use"] h2,
[id*="how_to_use"] h2 * {
  max-width: 700px;

  margin: 0 0 30px !important;

  color: var(--e7b-navy) !important;

  font-size: clamp(40px, 5vw, 66px) !important;
  font-weight: 400 !important;

  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;

  opacity: 1 !important;
}


[id*="how_to_use"] h2::before {
  content: "THE ROUTINE";

  display: block;

  margin-bottom: 17px;

  color: #5f8298 !important;

  font-size: 9px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.25em;
}


[id*="how_to_use"] h2::after {
  content: "";

  display: block;

  width: 44px;
  height: 2px;

  margin-top: 23px;

  background: var(--e7b-navy);
}


[id*="how_to_use"] p,
[id*="how_to_use"] p *,
[id*="how_to_use"] span,
[id*="how_to_use"] li,
[id*="how_to_use"] li *,
[id*="how_to_use"] .rte,
[id*="how_to_use"] .rte *,
[id*="how_to_use"] p,
[id*="how_to_use"] p *,
[id*="how_to_use"] li,
[id*="how_to_use"] li *,
[id*="how_to_use"] .rte,
[id*="how_to_use"] .rte * {
  color: #31566f !important;

  opacity: 1 !important;
}


[id*="how_to_use"] strong,
[id*="how_to_use"] b,
[id*="how_to_use"] strong,
[id*="how_to_use"] b {
  color: var(--e7b-navy) !important;

  font-weight: 700 !important;
}


/* ============================================================
   INGREDIENTS
   Dark formulation section
   ============================================================ */

[id*="ingredients"] {
  position: relative;

  overflow: hidden;

  padding: 0 !important;

  background:
    linear-gradient(
      115deg,
      #073c5d 0%,
      #06466d 55%,
      #073957 100%
    ) !important;
}


[id*="ingredients"] > div {
  position: relative;
  z-index: 2;

  padding-top: 82px !important;
  padding-bottom: 82px !important;
}


[id*="ingredients"]::before {
  content: "03";

  position: absolute;

  z-index: 3;

  top: 34px;

  right:
    max(
      24px,
      calc((100vw - 1200px) / 2)
    );

  color: rgba(255,255,255,0.34);

  font-size: 17px;
  font-weight: 400;

  letter-spacing: 0.08em;
}


[id*="ingredients"] h2,
[id*="ingredients"] h2 *,
[id*="ingredients"] h2,
[id*="ingredients"] h2 * {
  max-width: 700px;

  margin: 0 0 30px !important;

  color: #ffffff !important;

  font-size: clamp(40px, 5vw, 66px) !important;
  font-weight: 400 !important;

  line-height: 0.94 !important;
  letter-spacing: -0.045em !important;

  opacity: 1 !important;
}


[id*="ingredients"] h2::before {
  content: "FORMULATED WITH";

  display: block;

  margin-bottom: 17px;

  color:
    rgba(255,255,255,0.65) !important;

  font-size: 9px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.25em;
}


[id*="ingredients"] h2::after {
  content: "";

  display: block;

  width: 44px;
  height: 2px;

  margin-top: 23px;

  background:
    rgba(255,255,255,0.82);
}


[id*="ingredients"] p,
[id*="ingredients"] p *,
[id*="ingredients"] span,
[id*="ingredients"] li,
[id*="ingredients"] li *,
[id*="ingredients"] .rte,
[id*="ingredients"] .rte *,
[id*="ingredients"] p,
[id*="ingredients"] p *,
[id*="ingredients"] li,
[id*="ingredients"] li *,
[id*="ingredients"] .rte,
[id*="ingredients"] .rte * {
  color:
    rgba(255,255,255,0.84) !important;

  opacity: 1 !important;
}


[id*="ingredients"] strong,
[id*="ingredients"] b,
[id*="ingredients"] strong,
[id*="ingredients"] b {
  color: #ffffff !important;

  font-weight: 700 !important;
}


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */

[id*="product_recommendations"] {
  padding-top: 72px !important;
  padding-bottom: 72px !important;

  background: #ffffff !important;

  border-top: 1px solid var(--e7b-line);
}


[id*="product_recommendations"] h2 {
  color: var(--e7b-navy) !important;

  font-size: clamp(31px, 3.5vw, 46px) !important;
  font-weight: 500 !important;

  letter-spacing: -0.04em !important;
}


[id*="product_recommendations"] h2::before {
  content: "PAIR IT WITH";

  display: block;

  margin-bottom: 13px;

  color: #718b9c;

  font-size: 8px;
  font-weight: 700;

  letter-spacing: 0.2em;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 749px) {

  [id*="key_benefits"] {
    padding-top: 48px !important;
    padding-bottom: 50px !important;
  }


  [id*="key_benefits"]::after {
    top: 18px;

    width: calc(100% - 32px);

    padding: 24px 21px;

    font-size: 10px;
    line-height: 1.65;
  }


  [id*="key_benefits"]::before {
    width: calc(100% - 32px);
  }


  [id*="key_benefits"] h2 {
    font-size: 32px !important;
  }


  [id*="key_benefits"] ul {
    grid-template-columns: 1fr !important;

    gap: 0 !important;
  }


  [id*="key_benefits"] li {
    padding:
      17px
      0
      17px
      42px !important;

    font-size: 12px !important;
  }


  /* Editorial sections */

  [id*="whats_inside"] > div,
  [id*="how_to_use"] > div,
  [id*="ingredients"] > div,
  [id*="whats_inside"] > div,
  [id*="how_to_use"] > div,
  [id*="ingredients"] > div {
    padding-top: 62px !important;
    padding-bottom: 62px !important;
  }


  [id*="whats_inside"]::before,
  [id*="how_to_use"]::before,
  [id*="ingredients"]::before,
  [id*="whats_inside"]::before,
  [id*="how_to_use"]::before,
  [id*="ingredients"]::before {
    top: 22px;
    right: 18px;

    font-size: 13px;
  }


  [id*="whats_inside"] h2,
  [id*="how_to_use"] h2,
  [id*="ingredients"] h2,
  [id*="whats_inside"] h2,
  [id*="how_to_use"] h2,
  [id*="ingredients"] h2 {
    max-width: 320px;

    margin-bottom: 25px !important;

    font-size: 39px !important;

    line-height: 0.96 !important;
  }


  [id*="whats_inside"] p,
  [id*="how_to_use"] p,
  [id*="ingredients"] p,
  [id*="whats_inside"] p,
  [id*="how_to_use"] p,
  [id*="ingredients"] p {
    font-size: 12px !important;

    line-height: 1.7 !important;
  }


  [id*="product_recommendations"] {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

}


/* ============================================================
   FINAL BUNDLE TEXT-COLOR NORMALIZATION
   Prevents product-specific/Azeyl saved text colors from
   overriding the Elaris bundle palette (incl. Hydrapotion).
   ============================================================ */

/* WHAT'S INSIDE — dark blue section */
[id*="whats_inside"],
[id*="whats_inside"] > *,
[id*="whats_inside"] [class*="text"],
[id*="whats_inside"] [class*="content"],
[id*="whats_inside"] .prose,
[id*="whats_inside"] .rte {
  --text-color: 255 255 255 !important;
  --heading-color: 255 255 255 !important;
  color: rgba(255,255,255,.84) !important;
}

[id*="whats_inside"] h1,
[id*="whats_inside"] h2,
[id*="whats_inside"] h3,
[id*="whats_inside"] h4,
[id*="whats_inside"] h5,
[id*="whats_inside"] h6,
[id*="whats_inside"] h1 *,
[id*="whats_inside"] h2 *,
[id*="whats_inside"] h3 *,
[id*="whats_inside"] h4 *,
[id*="whats_inside"] h5 *,
[id*="whats_inside"] h6 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

[id*="whats_inside"] p,
[id*="whats_inside"] p *,
[id*="whats_inside"] li,
[id*="whats_inside"] li *,
[id*="whats_inside"] .rte,
[id*="whats_inside"] .rte *,
[id*="whats_inside"] .prose,
[id*="whats_inside"] .prose * {
  color: rgba(255,255,255,.84) !important;
  -webkit-text-fill-color: rgba(255,255,255,.84) !important;
  opacity: 1 !important;
}

[id*="whats_inside"] strong,
[id*="whats_inside"] strong *,
[id*="whats_inside"] b,
[id*="whats_inside"] b * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[id*="whats_inside"] h2::before {
  color: rgba(255,255,255,.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,.65) !important;
}

[id*="whats_inside"] h2::after {
  background: rgba(255,255,255,.82) !important;
}


/* APPLICATION / HOW TO USE — light section */
[id*="how_to_use"],
[id*="how_to_use"] > *,
[id*="how_to_use"] [class*="text"],
[id*="how_to_use"] [class*="content"],
[id*="how_to_use"] .prose,
[id*="how_to_use"] .rte {
  --text-color: 49 86 111 !important;
  --heading-color: 7 60 93 !important;
  color: #31566f !important;
}

[id*="how_to_use"] h1,
[id*="how_to_use"] h2,
[id*="how_to_use"] h3,
[id*="how_to_use"] h4,
[id*="how_to_use"] h5,
[id*="how_to_use"] h6,
[id*="how_to_use"] h1 *,
[id*="how_to_use"] h2 *,
[id*="how_to_use"] h3 *,
[id*="how_to_use"] h4 *,
[id*="how_to_use"] h5 *,
[id*="how_to_use"] h6 * {
  color: #073c5d !important;
  -webkit-text-fill-color: #073c5d !important;
  opacity: 1 !important;
}

[id*="how_to_use"] p,
[id*="how_to_use"] p *,
[id*="how_to_use"] li,
[id*="how_to_use"] li *,
[id*="how_to_use"] .rte,
[id*="how_to_use"] .rte *,
[id*="how_to_use"] .prose,
[id*="how_to_use"] .prose * {
  color: #31566f !important;
  -webkit-text-fill-color: #31566f !important;
  opacity: 1 !important;
}

[id*="how_to_use"] strong,
[id*="how_to_use"] strong *,
[id*="how_to_use"] b,
[id*="how_to_use"] b * {
  color: #073c5d !important;
  -webkit-text-fill-color: #073c5d !important;
}

[id*="how_to_use"] h2::before {
  color: #5f8298 !important;
  -webkit-text-fill-color: #5f8298 !important;
}

[id*="how_to_use"] h2::after {
  background: #073c5d !important;
}


/* INGREDIENTS — dark blue section */
[id*="ingredients"],
[id*="ingredients"] > *,
[id*="ingredients"] [class*="text"],
[id*="ingredients"] [class*="content"],
[id*="ingredients"] .prose,
[id*="ingredients"] .rte {
  --text-color: 255 255 255 !important;
  --heading-color: 255 255 255 !important;
  color: rgba(255,255,255,.84) !important;
}

[id*="ingredients"] h1,
[id*="ingredients"] h2,
[id*="ingredients"] h3,
[id*="ingredients"] h4,
[id*="ingredients"] h5,
[id*="ingredients"] h6,
[id*="ingredients"] h1 *,
[id*="ingredients"] h2 *,
[id*="ingredients"] h3 *,
[id*="ingredients"] h4 *,
[id*="ingredients"] h5 *,
[id*="ingredients"] h6 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

[id*="ingredients"] p,
[id*="ingredients"] p *,
[id*="ingredients"] li,
[id*="ingredients"] li *,
[id*="ingredients"] .rte,
[id*="ingredients"] .rte *,
[id*="ingredients"] .prose,
[id*="ingredients"] .prose * {
  color: rgba(255,255,255,.84) !important;
  -webkit-text-fill-color: rgba(255,255,255,.84) !important;
  opacity: 1 !important;
}

[id*="ingredients"] strong,
[id*="ingredients"] strong *,
[id*="ingredients"] b,
[id*="ingredients"] b * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[id*="ingredients"] h2::before {
  color: rgba(255,255,255,.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,.65) !important;
}

[id*="ingredients"] h2::after {
  background: rgba(255,255,255,.82) !important;
}


/* Mobile keeps the same contrast */
@media screen and (max-width: 749px) {
  [id*="whats_inside"] h2,
  [id*="whats_inside"] h2 *,
  [id*="ingredients"] h2,
  [id*="ingredients"] h2 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  [id*="how_to_use"] h2,
  [id*="how_to_use"] h2 * {
    color: #073c5d !important;
    -webkit-text-fill-color: #073c5d !important;
  }
}
/* ============================================================
   HYDRAPOTION BUNDLE — AZEYL MAROON + IVORY OVERRIDE
   Requires .hydrapotion-bundle-page hook from
   snippets/product-information-content.liquid
   ============================================================ */

:root:has(.hydrapotion-bundle-page) {
  --hydra-maroon: #64151d;
  --hydra-maroon-deep: #4b0e15;
  --hydra-maroon-soft: #7a3a40;
  --hydra-ivory: #fff8f2;
  --hydra-ivory-light: #fffdf9;
  --hydra-gold: #b7a57a;
  --hydra-line: rgba(100, 21, 29, 0.15);
}

/* Main product information */
.hydrapotion-bundle-page {
  --e7-navy: var(--hydra-maroon) !important;
  --e7-line: var(--hydra-line) !important;
}

.hydrapotion-bundle-page .product-details h1,
.hydrapotion-bundle-page .product-details h2,
.hydrapotion-bundle-page .product-details h3,
.hydrapotion-bundle-page .product-details h4,
.hydrapotion-bundle-page .product-details h5,
.hydrapotion-bundle-page .product-details h6,
.hydrapotion-bundle-page .product-details .price,
.hydrapotion-bundle-page .product-details product-price,
.hydrapotion-bundle-page .product-details .price-item,
.hydrapotion-bundle-page .product-details summary,
.hydrapotion-bundle-page .product-details summary * {
  color: var(--hydra-maroon) !important;
  -webkit-text-fill-color: var(--hydra-maroon) !important;
}

.hydrapotion-bundle-page .product-details product-form button[type='submit'],
.hydrapotion-bundle-page .product-details .product-form__submit,
.hydrapotion-bundle-page .product-details button[name='add'],
.hydrapotion-bundle-page .product-details .add-to-cart-button {
  background: var(--hydra-maroon) !important;
  background-color: var(--hydra-maroon) !important;
  border-color: var(--hydra-maroon) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  --button-background-color: var(--hydra-maroon) !important;
  --button-border-color: var(--hydra-maroon) !important;
  --button-color: #ffffff !important;
}

/* Everything below main product information:
   only activates on the page containing Hydrapotion hook. */
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] {
  background: var(--hydra-ivory-light) !important;
}

html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h1,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h2,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h3,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h4,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h5,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] h6,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] strong {
  color: var(--hydra-maroon) !important;
  -webkit-text-fill-color: var(--hydra-maroon) !important;
}

html:has(.hydrapotion-bundle-page) [id*="key_benefits"] p,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] li,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] .rte,
html:has(.hydrapotion-bundle-page) [id*="key_benefits"] .prose {
  color: var(--hydra-maroon-soft) !important;
}

/* WHAT'S INSIDE — deep maroon + ivory */
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] {
  --text-color: 255 248 242 !important;
  --heading-color: 255 255 255 !important;
  background:
    radial-gradient(circle at 85% 15%, rgba(183,165,122,.12), transparent 32%),
    linear-gradient(145deg, var(--hydra-maroon-deep), var(--hydra-maroon)) !important;
  color: rgba(255,248,242,.88) !important;
}

html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h1,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h3,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h4,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h5,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h6,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h1 *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2 *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h3 *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h4 *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h5 *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h6 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html:has(.hydrapotion-bundle-page) [id*="whats_inside"] p,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] p *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] li,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] li *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] .rte,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] .rte *,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] .prose,
html:has(.hydrapotion-bundle-page) [id*="whats_inside"] .prose * {
  color: rgba(255,248,242,.88) !important;
  -webkit-text-fill-color: rgba(255,248,242,.88) !important;
}

html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2::before {
  color: var(--hydra-gold) !important;
  -webkit-text-fill-color: var(--hydra-gold) !important;
}

html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2::after {
  background: var(--hydra-gold) !important;
}

/* HOW TO USE — ivory + maroon */
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] {
  --text-color: 100 21 29 !important;
  --heading-color: 100 21 29 !important;
  background: var(--hydra-ivory) !important;
  color: var(--hydra-maroon-soft) !important;
}

html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h1,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h3,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h4,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h5,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h6,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h1 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h3 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h4 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h5 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h6 *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] strong {
  color: var(--hydra-maroon) !important;
  -webkit-text-fill-color: var(--hydra-maroon) !important;
}

html:has(.hydrapotion-bundle-page) [id*="how_to_use"] p,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] p *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] li,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] li *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] .rte,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] .rte *,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] .prose,
html:has(.hydrapotion-bundle-page) [id*="how_to_use"] .prose * {
  color: var(--hydra-maroon-soft) !important;
  -webkit-text-fill-color: var(--hydra-maroon-soft) !important;
}

html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2::before {
  color: var(--hydra-gold) !important;
  -webkit-text-fill-color: var(--hydra-gold) !important;
}

html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2::after {
  background: var(--hydra-maroon) !important;
}

/* INGREDIENTS — deep maroon + ivory */
html:has(.hydrapotion-bundle-page) [id*="ingredients"] {
  --text-color: 255 248 242 !important;
  --heading-color: 255 255 255 !important;
  background:
    radial-gradient(circle at 15% 85%, rgba(183,165,122,.11), transparent 30%),
    linear-gradient(145deg, var(--hydra-maroon), var(--hydra-maroon-deep)) !important;
  color: rgba(255,248,242,.88) !important;
}

html:has(.hydrapotion-bundle-page) [id*="ingredients"] h1,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h3,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h4,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h5,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h6,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h1 *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2 *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h3 *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h4 *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h5 *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] h6 * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html:has(.hydrapotion-bundle-page) [id*="ingredients"] p,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] p *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] li,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] li *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] .rte,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] .rte *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] .prose,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] .prose * {
  color: rgba(255,248,242,.88) !important;
  -webkit-text-fill-color: rgba(255,248,242,.88) !important;
}

html:has(.hydrapotion-bundle-page) [id*="ingredients"] strong,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] strong *,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] b,
html:has(.hydrapotion-bundle-page) [id*="ingredients"] b * {
  color: var(--hydra-gold) !important;
  -webkit-text-fill-color: var(--hydra-gold) !important;
}

html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2::before {
  color: var(--hydra-gold) !important;
  -webkit-text-fill-color: var(--hydra-gold) !important;
}

html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2::after {
  background: var(--hydra-gold) !important;
}

/* Related products */
html:has(.hydrapotion-bundle-page) [id*="recommend"] {
  background: var(--hydra-ivory-light) !important;
}

html:has(.hydrapotion-bundle-page) [id*="recommend"] h1,
html:has(.hydrapotion-bundle-page) [id*="recommend"] h2,
html:has(.hydrapotion-bundle-page) [id*="recommend"] h3,
html:has(.hydrapotion-bundle-page) [id*="recommend"] .price {
  color: var(--hydra-maroon) !important;
  -webkit-text-fill-color: var(--hydra-maroon) !important;
}

@media screen and (max-width: 749px) {
  html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2,
  html:has(.hydrapotion-bundle-page) [id*="whats_inside"] h2 *,
  html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2,
  html:has(.hydrapotion-bundle-page) [id*="ingredients"] h2 * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2,
  html:has(.hydrapotion-bundle-page) [id*="how_to_use"] h2 * {
    color: var(--hydra-maroon) !important;
    -webkit-text-fill-color: var(--hydra-maroon) !important;
  }
}
/* ============================================================
   HYDRAPOTION — FINAL MAROON OVERRIDE
   ============================================================ */

/* Product description + all description text */
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details .rte,
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details .rte *,
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details p,
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details p *,
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details .prose,
html:has(.hydrapotion-bundle-page)
.hydrapotion-bundle-page .product-details .prose * {
  color: #64151d !important;
  -webkit-text-fill-color: #64151d !important;
  opacity: 1 !important;
}


/* ============================================================
   GIVEAWAY / ELARIS PRODUCT OFFER SECTION
   Blue → Hydrapotion Maroon
   ============================================================ */

html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"],
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] {
  --e7-navy: #64151d !important;
  --e7-blue: #fff8f2 !important;
  --e7-text: #64151d !important;
  --e7-line: rgba(100, 21, 29, 0.15) !important;

  background: #fff8f2 !important;
}


/* Text inside offer section */
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] h1,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] h2,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] h3,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] h4,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] strong,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] h1,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] h2,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] h3,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] h4,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] strong {
  color: #64151d !important;
  -webkit-text-fill-color: #64151d !important;
}


/* Normal offer-section copy */
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] p,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] p *,
html:has(.hydrapotion-bundle-page)
[id*="elaris_product_offer"] span,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] p,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] p *,
html:has(.hydrapotion-bundle-page)
[id*="product_offer"] span {
  color: #7a3a40 !important;
  -webkit-text-fill-color: #7a3a40 !important;
}


/* ============================================================
   BUNDLE PERKS PANEL
   This is the blue rectangle still visible in your screenshot
   ============================================================ */





/* WHY THIS BUNDLE label */
html:has(.hydrapotion-bundle-page)
[id*="key_benefits"]::before {
  color: #7a3a40 !important;
}


/* Benefit numbering */
html:has(.hydrapotion-bundle-page)
[id*="key_benefits"] li::before {
  color: #b7a57a !important;
}


/* Benefit divider */
html:has(.hydrapotion-bundle-page)
[id*="key_benefits"] li {
  border-color: rgba(100, 21, 29, 0.15) !important;
}
/* =========================================================
   ELARIS7 BUNDLE — DESKTOP MEDIA HEIGHT FIX
   Stop stacked gallery images creating huge page height
   ========================================================= */

@media screen and (min-width: 750px) {

  .e7-product-page .product-information__media {
    align-self: start !important;
    height: fit-content !important;
    min-height: 0 !important;
  }

  .e7-product-page .e7-product-media {
    height: fit-content !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .e7-product-page .product-information__media media-gallery,
  .e7-product-page .product-information__media .media-gallery {
    height: auto !important;
    min-height: 0 !important;
    max-height: 560px !important;
    overflow: hidden !important;
  }

}
.bundle-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}