/*! responsive.css — dead rules removed (2026 build) */
/*! ------------------------------------------------------------------
 *  responsive.css — responsive, accessibility and polish layer.
 *
 *  Loaded last so it can correct the theme without editing the 300 KB of
 *  generated section CSS. Everything here is additive: no existing rule is
 *  deleted, and every override is scoped to a breakpoint or a state the
 *  original stylesheet never addressed.
 *
 *  The theme ships a single breakpoint at 915px. Below it the phone layout
 *  is used verbatim, which means a 900px-wide tablet renders a stretched
 *  phone page. The tablet block below fixes that without touching the
 *  full-bleed section backgrounds.
 * ------------------------------------------------------------------ */
*, :before, :after {
  box-sizing: border-box;
}

html {
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

html, body {
  overflow-x: clip;
}

img, video {
  max-width: 100%;
}

p, li, h1, h2, h3, h4, h6, td, th, .rte {
  overflow-wrap: break-word;
}

h1, h2, h3, .rich-text__heading {
  text-wrap: balance;
}

@media (min-width: 640px) and (max-width: 914.98px) {
  .container_hk {
    max-width: 660px;
    margin-inline: auto;
  }

  .custom_popup_hp .container_hk {
    max-width: none;
  }

  .lf-footer__container {
    max-width: 660px;
  }

  .sticky-cta__inner {
    max-width: 660px;
    margin-inline: auto;
  }
}

@media (min-width: 480px) and (max-width: 639.98px) {
  .container_hk {
    padding-inline: 24px;
  }
}

@media (min-width: 640px) {
  .rich-text__heading.h1, h1.rich-text__heading, h2.rich-text__heading {
    font-size: clamp(1.75rem, 1.16rem + 1.47vw, 2.375rem);
    line-height: 1.18;
  }
}

@media (min-width: 640px) and (max-width: 914.98px) {
  .icons_with_text_item, .icon_with_text_item {
    font-size: clamp(.8125rem, .52rem + .73vw, 1.125rem);
  }
}

/* Offer paragraph above the bundle picker.
 *
 * The theme marks it up as an <h3> but it reads as body copy: 16px/1.4 on
 * phones, which is tight for a three-line sentence, and the emphasised phrase
 * could break across lines and lose its punch. Larger type, a looser leading,
 * and the highlighted spans kept whole. */
.quantity_landing_page .offer-text {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.55;
  margin-bottom: 28px;
  text-wrap: pretty;
}

.quantity_landing_page .offer-text b {
  white-space: nowrap;
}

@media (max-width: 380px) {
  /* on the narrowest phones the emphasised phrase needs the room back */
  .quantity_landing_page .offer-text b {
    white-space: normal;
  }
}

/* Guarantee bottle: the artwork it reuses from the variant picker is a square
 * canvas that is ~80% transparent padding, so object-fit:contain was fitting
 * the padding into the box and the bottle came out a fraction of its slot.
 * assets/img/guarantee-bottle.webp is that same bottle with the padding
 * trimmed (157x456), which lets it use the height it is given. */
.money_section_lp .money_right_img--bottle .guarantee-bottle-img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Phone: centre the row against the card instead of hanging everything off the
 * bottom edge, and let the bottle use the card height. */
@media (max-width: 915.98px) {
  .money_section_lp .richtext_blocks_new {
    align-items: stretch;
    display: flex;
    /* Mobile: the bottle sits on the left (row-reverse) and the card had
       padding-left:0, gluing it to the edge. Give it breathing room. */
    padding-left: 16px;
  }

  .money_section_lp .custom-flex_two_ad {
    align-items: center !important;
    flex: 1 1 auto;
  }

  .money_section_lp .custom-flex_item_ad_2 {
    flex: 0 0 124px !important;
    width: 124px !important;
    max-width: 124px !important;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .money_section_lp .custom-flex_item_ad_1 {
    max-width: calc(100% - 136px) !important;
  }

  .money_section_lp .money_right_img--bottle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0 !important;
  }

  .money_section_lp .money_right_img--bottle .guarantee-bottle-img {
    object-position: center;
    /* the card is 295px tall here; this uses it without touching the edges */
    max-height: 265px;
  }
}

@media (min-width: 916px) {
  .money_section_lp .richtext_blocks_new {
    align-items: stretch;
    display: flex;
  }

  .money_section_lp .custom-flex_two_ad {
    flex: auto;
    align-items: stretch !important;
    height: auto !important;
  }

  .money_section_lp .custom-flex_item_ad_1 {
    align-items: center;
    display: flex;
  }

  .money_section_lp .custom-flex_item_ad_2 {
    align-self: stretch;
    align-items: flex-end;
    display: flex;
  }

  .money_section_lp .money_right_img--bottle {
    /* Desktop: push the bottle to the right edge of its column so it stops
       looking shifted to the left. */
    justify-content: flex-end;
    align-self: stretch;
    align-items: flex-end;
    width: 100%;
    height: auto;
    display: flex;
    padding-right: 8px;
  }

  .money_section_lp .money_right_img--bottle .guarantee-bottle-img {
    object-fit: contain;
    object-position: bottom center;
    width: auto;
    max-width: 100%;
    height: 100%;
    /* stop short of the card edge so the bottle does not look glued to it,
       and keep the card from growing into a very tall green band */
    max-height: 320px;
    padding-bottom: 12px;
  }
}

@media (min-width: 1100px) {
  .money_section_lp .custom-flex_item_ad_2 {
    flex: 0 0 340px !important;
    width: 340px !important;
    max-width: 340px !important;
  }

  .money_section_lp .custom-flex_item_ad_1 {
    max-width: calc(100% - 360px) !important;
  }

  .section2_lp .custom-flex_two_ad {
    justify-content: flex-start;
    gap: clamp(24px, 3vw, 56px);
  }

  .section2_lp .custom-flex_item_ad_1 {
    flex: 0 0 36%;
    max-width: 36% !important;
  }

  .section2_lp .custom-flex_item_ad_2 {
    flex: auto;
    margin-inline: auto;
    max-width: 660px !important;
  }
}

@media (min-width: 916px) {
  .section2_lp {
    background-position: 0 100%;
  }
}

@media (pointer: coarse) {
  .drawer-close, .cart-close, .cart_item_single_right_remove, .slick-dots button, .slick-arrow {
    position: relative;
  }

  .drawer-close:after, .cart-close:after, .cart_item_single_right_remove:after, .slick-dots button:after, .slick-arrow:after {
    content: "";
    width: 44px;
    height: 44px;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
  }

  .slick-dots li {
    margin-inline: 4px;
  }
}

a.sticky-cta:after, .custom_sticky_bottom-shopi:after, .sticky_form:after, .drawer:after, .cart-drawer:after {
  content: "";
  height: env(safe-area-inset-bottom, 0px);
  flex: none;
  display: block;
}

.drawer, .cart-drawer {
  overscroll-behavior: contain;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline-offset: 2px;
  border-radius: 3px;
  outline: 2px solid #085431;
}

.timeline_section_lp :focus-visible, .faq_lp :focus-visible, .lf-footer :focus-visible, .section5_lp :focus-visible {
  outline-color: #f2fffa;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .scroll_bar_lp .flex_custom_item_flex {
    animation: none !important;
  }
}

@media print {
  .drawer, .cart-drawer, .sticky-cta, .sticky_form, .scroll_bar_lp, .custom_popup_hp, [class*="countdown"] {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }
}