/** Shopify CDN: Minification failed

Line 10:31 Unexpected "-->"
Line 27:41 Unexpected "-->"

**/
/* Extracted from layout/theme.liquid body <style> blocks (template: product) on 2026-09-06. Order preserved; linked right after footer-group, which is where these blocks sat. */

/* from layout/theme.liquid L1392 */
<!-- opt-shopnow-bar v5 polish -->
      /* Push page bottom up by bar height when bar is shown so footer isn't covered */
      body.opt-bar-active { padding-bottom: 88px; }
      @media (max-width: 600px) { body.opt-bar-active { padding-bottom: 76px; } }
      @supports (padding-bottom: env(safe-area-inset-bottom)) {
        body.opt-bar-active { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
        @media (max-width: 600px) { body.opt-bar-active { padding-bottom: calc(76px + env(safe-area-inset-bottom)); } }
      }
      .opt-bar-product-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        font: inherit;
        cursor: pointer;
        text-align: left;
      }
      <!-- opt-shopnow-bar v6 no-dismiss -->
      /* Bottom safe-area inset for iOS */
      #opt-shopnow-bar { padding-bottom: env(safe-area-inset-bottom, 0); }
      #opt-shopnow-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 998;
        background: #EDE8DF;
        border-top: 1px solid rgba(20, 19, 10, 0.08);
        box-shadow: 0 -10px 28px rgba(20, 19, 10, 0.12);
        opacity: 0;
        transform: translateY(100%);
        transition: opacity .25s ease, transform .25s ease;
      }
      #opt-shopnow-bar[hidden] { display: none !important; }
      #opt-shopnow-bar.opt-visible { opacity: 1; transform: translateY(0); }
      .opt-bar-inner {
        max-width: 1200px;
        margin: 0 auto;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .opt-bar-product {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 14px;
        text-decoration: none;
        color: #14130a;
      }
      .opt-bar-img {
        width: 56px;
        height: 56px;
        object-fit: contain;
        background: #F5F0E8;
        border-radius: 10px;
        flex-shrink: 0;
      }
      .opt-bar-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
      .opt-bar-title {
        font-size: 16px;
        font-weight: 800;
        line-height: 1.2;
        color: #14130a;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .opt-bar-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #2f3d20; }
      .opt-bar-guarantee {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        line-height: 1;
        font-weight: 700;
        color: #2f3d20;
        background: rgba(47, 61, 32, 0.08);
        border: 1px solid rgba(47, 61, 32, 0.18);
        border-radius: 999px;
        padding: 4px 9px;
        align-self: flex-start;
        letter-spacing: 0.1px;
      }
      .opt-bar-guarantee svg { flex: 0 0 11px; }
      @media (max-width: 600px) {
        .opt-bar-guarantee { font-size: 11px; padding: 3px 7px; gap: 4px; }
        .opt-bar-guarantee svg { width: 9px; height: 9px; flex-basis: 9px; }
      }
      .opt-bar-stars { color: #14130a; letter-spacing: 1px; font-size: 13px; line-height: 1; }
      .opt-bar-rating-text strong { font-weight: 700; }
      .opt-bar-reviews { text-decoration: underline; text-underline-offset: 2px; opacity: 0.9; }
      .opt-bar-btn {
        flex-shrink: 0;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #2f3d20;
        color: #EDE8DF;
        border: none; padding: 14px 28px;
        font-size: 15px;
        font-weight: 800;
        letter-spacing: 0.6px;
        cursor: pointer;
        transition: background .2s ease, transform .1s ease, box-shadow .2s ease;
        font-family: inherit;
      }
      .opt-bar-btn:hover { background: #758956; box-shadow: 0 6px 18px rgba(20,19,10,0.18); }
      .opt-bar-btn:active { transform: scale(.97); }

      /* Mobile: stack image+title row tighter, keep button on the right */
      @media (max-width: 600px) {
        .opt-bar-inner { padding: 10px 12px; gap: 10px; }
        .opt-bar-img { width: 44px; height: 44px; border-radius: 8px; }
        .opt-bar-title { font-size: 13px; text-decoration: none; }
        .opt-bar-rating { font-size: 11px; gap: 5px; }
        .opt-bar-stars { font-size: 11px; }
        .opt-bar-reviews { display: none; }
        .opt-bar-btn { padding: 11px 16px; font-size: 13px; letter-spacing: 0.4px; }
      }
      @media (max-width: 360px) {
        .opt-bar-inner { padding: 8px 10px; gap: 8px; }
        .opt-bar-img { width: 38px; height: 38px; }
        .opt-bar-title { font-size: 12px; }
        .opt-bar-rating-text { font-size: 11px; }
        .opt-bar-btn { padding: 10px 12px; font-size: 12px; }
      }
      @media (prefers-reduced-motion: reduce) {
        #opt-shopnow-bar { transition: opacity .15s ease; transform: none !important; }
      }

/* from layout/theme.liquid L1994 */
/* Universal press scale + brightness — fires on :active for any pressable */
    button:active:not(:disabled):not([aria-disabled="true"]):not(.shop-mobile-arrow),
    input[type="submit"]:active:not(:disabled),
    input[type="button"]:active:not(:disabled),
    a.button:active,
    a[class*="-btn"]:active,
    a[class*="-button"]:active,
    a[class*="cta"]:active,
    a[class*="shopnow"]:active,
    [role="button"]:active:not([aria-disabled="true"]) {
      transform: scale(0.97) !important;
      filter: brightness(0.93) saturate(1.08) !important;
      transition: transform 0.12s cubic-bezier(0.22, 0.61, 0.36, 1),
                  filter 0.12s ease !important;
    }
    /* Hover lift only for clearly CTA-style elements — avoid disturbing every
       <a> on the page */
    a.button:hover,
    a[class*="-btn"]:hover,
    a[class*="-button"]:hover,
    a[class*="cta"]:hover,
    a[class*="shopnow"]:hover {
      filter: brightness(1.04);
    }
    /* Ripple element injected by JS — sage tint on light buttons, cream on dark */
    .opt-ripple {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(168, 184, 144, 0.55) 0%, rgba(168, 184, 144, 0) 70%);
      transform: scale(0);
      opacity: 0.85;
      pointer-events: none;
      z-index: 0;
      animation: optGlobalRipple 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }
    .opt-ripple.opt-ripple-dark-bg {
      /* cream ripple for dark-backgrounded buttons */
      background: radial-gradient(circle, rgba(245, 240, 232, 0.45) 0%, rgba(245, 240, 232, 0) 70%);
    }
    @keyframes optGlobalRipple {
      0%   { transform: scale(0);   opacity: 0.85; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    /* Respect motion preference */
    @media (prefers-reduced-motion: reduce) {
      button:active:not(:disabled),
      input[type="submit"]:active,
      a.button:active,
      [role="button"]:active {
        transform: none !important;
      }
      .opt-ripple { display: none !important; }
    }

/* from layout/theme.liquid L2125 */
.shop-product-carousel .shop-main-image,
      .shop-product-carousel .shop-main-image img {
        transition:
          opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
          filter 0.5s ease !important;
        will-change: opacity, transform;
        backface-visibility: hidden;
      }
      /* Non-active slide: scaled slightly down + fully transparent */
      .shop-product-carousel .shop-main-image:not(.active) {
        transform: scale(0.97) !important;
        pointer-events: none;
      }
      /* Active slide: scale settles to 1 with the fade-in */
      .shop-product-carousel .shop-main-image.active {
        transform: scale(1) !important;
      }
      /* Ensure stacking context for the absolute-positioned slides */
      .shop-product-carousel .shop-image-container.shop-square-container {
        position: relative;
        isolation: isolate;
      }
      .shop-product-carousel .shop-image-zoom-wrapper {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      /* Hover micro-zoom on the active image (subtle, premium) */
      .shop-product-carousel .shop-main-image.active img {
        transition:
          opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
      }
      .shop-product-carousel .shop-image-container:hover .shop-main-image.active img {
        transform: scale(1.025);
      }
      /* Thumbnail polish — smooth select state */
      .shop-product-carousel [class*="thumbnail"] {
        transition:
          transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
          border-color 0.3s ease,
          box-shadow 0.3s ease,
          opacity 0.3s ease !important;
      }
      .shop-product-carousel [class*="thumbnail"]:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(47, 61, 32, 0.18);
      }
      .shop-product-carousel [class*="thumbnail"]:active {
        transform: translateY(0) scale(0.96);
      }
      @media (prefers-reduced-motion: reduce) {
        .shop-product-carousel .shop-main-image,
        .shop-product-carousel .shop-main-image img {
          transition: opacity 0.2s linear !important;
          transform: none !important;
        }
        .shop-product-carousel [class*="thumbnail"]:hover {
          transform: none;
        }
      }

/* from layout/theme.liquid L2200 */
.testimonials-carousel {
      position: relative !important;
    }
    .testimonials-carousel .testimonials-navigation {
      position: absolute !important;
      top: 50%;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0 8px !important;
      margin: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      pointer-events: none !important;
      z-index: 5 !important;
      gap: 0 !important;
      column-gap: 0 !important;
    }
    /* Testimonials chevrons need MUCH higher contrast than the default v2
       white-frosted base — cream section bg made the white buttons disappear.
       Override with sage-green fill + cream chevron + deep shadow so they
       pop clearly. Press state still transitions to deeper darkness. */
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button {
      pointer-events: auto !important;
      margin: 0 !important;
      width: 52px !important;
      height: 52px !important;
      background: #758956 !important;
      border: 2px solid #5d6e44 !important;
      box-shadow:
        0 6px 18px rgba(47, 61, 32, 0.32),
        0 1px 4px rgba(47, 61, 32, 0.18) !important;
    }
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button svg {
      width: 24px !important;
      height: 24px !important;
      color: #f5f0e8 !important;
      stroke-width: 2.5 !important;
    }
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button svg path,
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button svg line,
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button svg polyline {
      stroke: #f5f0e8 !important;
      stroke-width: 2.5 !important;
    }
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button:hover {
      background: #5d6e44 !important;
      border-color: #2f3d20 !important;
      transform: translateY(-3px) scale(1.06) !important;
      box-shadow:
        0 12px 28px rgba(47, 61, 32, 0.42),
        0 0 0 5px rgba(168, 184, 144, 0.22) !important;
    }
    /* Press state: deepest green + cream icon + tight scale */
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button:active,
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button.is-pressing {
      background: #2f3d20 !important;
      border-color: #2f3d20 !important;
      transform: translateY(0) scale(0.93) !important;
      box-shadow:
        0 3px 8px rgba(47, 61, 32, 0.45),
        0 0 0 6px rgba(168, 184, 144, 0.35) !important;
    }
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button.prev + .nav-button.global-nav-button.next,
    .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button.next ~ .nav-button.global-nav-button.prev {
      margin-left: 0 !important;
    }
    @media (max-width: 989px) {
      .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button {
        width: 46px !important;
        height: 46px !important;
      }
      .testimonials-carousel .testimonials-navigation .nav-button.global-nav-button svg {
        width: 22px !important;
        height: 22px !important;
      }
    }
    /* Keep the dot pagination visible at the natural bottom */
    .testimonials-carousel .testimonials-dots {
      position: relative;
      z-index: 4;
    }

    /* Homepage / video-testimonials section — same side-positioning */
    .video-testimonials-section {
      position: relative !important;
    }
    .video-testimonials-section .carousel-nav {
      position: absolute !important;
      top: 50%;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      transform: translateY(-50%) !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 0 8px !important;
      margin: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      pointer-events: none !important;
      z-index: 5 !important;
      gap: 0 !important;
      column-gap: 0 !important;
    }
    /* Visual design comes from the global v2 nav-button rule. */
    .video-testimonials-section .carousel-nav .nav-button.global-nav-button {
      pointer-events: auto !important;
      margin: 0 !important;
    }
    .video-testimonials-section .carousel-nav .nav-button.global-nav-button.prev + .nav-button.global-nav-button.next,
    .video-testimonials-section .carousel-nav .nav-button.global-nav-button.next ~ .nav-button.global-nav-button.prev {
      margin-left: 0 !important;
    }
    @media (max-width: 989px) {
      .video-testimonials-section .carousel-nav .nav-button.global-nav-button {
        width: 44px !important;
        height: 44px !important;
      }
      .video-testimonials-section .carousel-nav .nav-button.global-nav-button svg {
        width: 20px !important;
        height: 20px !important;
      }
    }

/* from layout/theme.liquid L2462 */
/* ── 1. Universal interactive-card hover ──────────────────────────── */
      .results-steps-section .step-card,
      [class*="testimonial-card"],
      [class*="testimonial-item"],
      [class*="roadmap-item"],
      [class*="roadmap-card"],
      [class*="comparison-row"],
      [class*="product-comparison"] tr,
      [class*="before-after"] [class*="card"],
      [class*="founder"] [class*="card"] {
        transition:
          transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.4s ease,
          border-color 0.4s ease !important;
        will-change: transform;
      }
      .results-steps-section .step-card:hover,
      [class*="testimonial-card"]:hover,
      [class*="testimonial-item"]:hover,
      [class*="roadmap-item"]:hover,
      [class*="roadmap-card"]:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 16px 36px rgba(47, 61, 32, 0.14), 0 0 0 1px rgba(168, 184, 144, 0.22) !important;
      }
      /* Image inside any of the above zooms gently on hover */
      .results-steps-section .step-card img,
      [class*="testimonial-card"] img,
      [class*="testimonial-item"] img,
      [class*="roadmap-item"] img,
      [class*="founder"] img,
      [class*="image-with-text"] img {
        transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
      }
      .results-steps-section .step-card:hover img,
      [class*="testimonial-card"]:hover img,
      [class*="testimonial-item"]:hover img,
      [class*="roadmap-item"]:hover img,
      [class*="image-with-text"]:hover img {
        transform: scale(1.04) !important;
      }

      /* ── 2. CTA button premium hover with sage glow + shine sweep ─────── */
      .opt-bar-btn,
      .opt-bar-product-btn,
      [class*="bundle"] button[type="button"],
      [class*="bundle"] button[type="submit"],
      .product-form__submit,
      button[name="add"],
      a[href*="/checkout"],
      [class*="add-to-cart"],
      .obs-bundle-cta,
      [class*="quick-add"] button {
        position: relative !important;
        overflow: hidden !important;
        transition:
          transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
          box-shadow 0.3s ease,
          background 0.3s ease !important;}
      .opt-bar-btn:hover:not(:disabled),
      .opt-bar-product-btn:hover:not(:disabled),
      [class*="bundle"] button[type="button"]:hover:not(:disabled),
      .product-form__submit:hover:not(:disabled),
      button[name="add"]:hover:not(:disabled),
      a[href*="/checkout"]:hover,
      .obs-bundle-cta:hover {
        transform: translateY(-3px) scale(1.015) !important;
        box-shadow:
          0 14px 30px rgba(47, 61, 32, 0.30),
          0 0 0 1px rgba(168, 184, 144, 0.35),
          0 0 0 6px rgba(168, 184, 144, 0.10) !important;
      }
      .opt-bar-btn:active:not(:disabled),
      .product-form__submit:active:not(:disabled),
      button[name="add"]:active:not(:disabled),
      [class*="bundle"] button[type="button"]:active:not(:disabled) {
        transform: translateY(-1px) scale(0.99) !important;
        transition-duration: 0.1s !important;
      }

      /* Shine sweep: pseudo-element overlay that translates across on hover */
      .opt-bar-btn::before,
      .opt-bar-product-btn::before,
      .product-form__submit::before,
      button[name="add"]::before,
      .obs-bundle-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          120deg,
          transparent 25%,
          rgba(255, 255, 255, 0.32) 50%,
          transparent 75%
        );
        transform: translateX(-100%);
        pointer-events: none;
        z-index: 1;}
      .opt-bar-btn:hover::before,
      .opt-bar-product-btn:hover::before,
      .product-form__submit:hover::before,
      button[name="add"]:hover::before,
      .obs-bundle-cta:hover::before {
        animation: optBtnShine 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;}
      @keyframes optBtnShine {
        0%   { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }
      /* Make sure button text/icons sit above the shine overlay */
      .opt-bar-btn > *,
      .opt-bar-product-btn > *,
      .product-form__submit > *,
      button[name="add"] > *,
      .obs-bundle-cta > * {
        position: relative;
        z-index: 2;
      }

      /* ── 3. Scroll progress bar (top of page) ─────────────────────────── */
      .opt-scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 0;
        background: linear-gradient(90deg, #2f3d20 0%, #758956 50%, #a8b890 100%);
        z-index: 9999;
        transition: width 0.15s ease-out;
        pointer-events: none;
        box-shadow: 0 1px 4px rgba(47, 61, 32, 0.2);
      }

      /* ── 4. Back-to-top floating button ───────────────────────────────── */
      .opt-back-to-top {
        position: fixed;
        bottom: 110px;
        right: 22px;
        width: 48px;
        height: 48px;
        background: #2f3d20;
        color: #f5f0e8;
        border: none;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        opacity: 0;
        transform: translateY(20px) scale(0.85);
        transition:
          opacity 0.35s ease,
          transform 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55),
          background 0.3s ease;
        z-index: 9998;
        box-shadow: 0 10px 24px rgba(47, 61, 32, 0.35);
        pointer-events: none;
      }
      .opt-back-to-top.opt-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      .opt-back-to-top:hover {
        background: #758956;
        transform: translateY(-4px) scale(1.06);
      }
      .opt-back-to-top svg {
        width: 20px;
        height: 20px;
        stroke: #f5f0e8;
        stroke-width: 2.5;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      @media (max-width: 768px) {
        .opt-back-to-top {
          bottom: 130px;
          right: 16px;
          width: 44px;
          height: 44px;
        }
      }

      /* ── 5. Smooth FAQ accordion ──────────────────────────────────────── */
      [class*="store-faq"] details summary,
      [class*="faq"] summary {
        transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease;
        cursor: pointer;
      }
      [class*="store-faq"] details summary:hover,
      [class*="faq"] summary:hover {
        background-color: rgba(168, 184, 144, 0.08);
      }
      [class*="store-faq"] details summary [class*="icon"],
      [class*="store-faq"] details summary svg,
      [class*="faq"] summary svg {
        transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
      }
      [class*="store-faq"] details[open] summary [class*="icon"],
      [class*="store-faq"] details[open] summary svg,
      [class*="faq"] details[open] summary svg {
        transform: rotate(180deg) !important;
      }

      /* ── 6. Reduce motion support ─────────────────────────────────────── */
      @media (prefers-reduced-motion: reduce) {
        .opt-scroll-progress,
        .opt-back-to-top {
          display: none !important;
        }
        .opt-bar-btn::before,
        .opt-bar-product-btn::before,
        .product-form__submit::before,
        button[name="add"]::before,
        .obs-bundle-cta::before {
          display: none !important;}
      }

/* from layout/theme.liquid L2747 */
/* Initial state: invisible + below resting position */
      section[id^="shopify-section-"][data-opt-fade] {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        transition:
          opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
          transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
      }
      /* Visible state — once IO fires */
      section[id^="shopify-section-"][data-opt-fade].opt-section-in {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      /* Repeating-child stagger inside steps / roadmap / comparison /
         testimonials. Once the section reveals, the cards fan in. */
      section[data-opt-fade].opt-section-in [class*="step-item"],
      section[data-opt-fade].opt-section-in [class*="roadmap-item"],
      section[data-opt-fade].opt-section-in [class*="comparison-row"],
      section[data-opt-fade].opt-section-in [class*="testimonial-item"],
      section[data-opt-fade].opt-section-in [class*="testimonial-card"],
      section[data-opt-fade].opt-section-in [class*="ingredient-item"] {
        animation: optChildFadeUp 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
      }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(1),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(1),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(1),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(1),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(1),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(1) { animation-delay: 60ms; }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(2),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(2),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(2),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(2),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(2),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(2) { animation-delay: 180ms; }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(3),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(3),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(3),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(3),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(3),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(3) { animation-delay: 300ms; }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(4),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(4),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(4),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(4),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(4),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(4) { animation-delay: 420ms; }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(5),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(5),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(5),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(5),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(5),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(5) { animation-delay: 540ms; }
      section[data-opt-fade].opt-section-in [class*="step-item"]:nth-child(n+6),
      section[data-opt-fade].opt-section-in [class*="roadmap-item"]:nth-child(n+6),
      section[data-opt-fade].opt-section-in [class*="comparison-row"]:nth-child(n+6),
      section[data-opt-fade].opt-section-in [class*="testimonial-item"]:nth-child(n+6),
      section[data-opt-fade].opt-section-in [class*="testimonial-card"]:nth-child(n+6),
      section[data-opt-fade].opt-section-in [class*="ingredient-item"]:nth-child(n+6) { animation-delay: 660ms; }
      @keyframes optChildFadeUp {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
      }

/* from layout/theme.liquid L2940 */
.opt-info-page {
      max-width: 780px;
      margin: 0 auto;
      padding: 48px 28px 80px;
      color: #3d4a30;
      font-size: 16px;
      line-height: 1.7;
    }
    .opt-info-page h1 {
      font-size: clamp(36px, 5vw, 48px);
      font-weight: 800;
      color: #14130a;
      letter-spacing: -0.02em;
      line-height: 1.1;
      margin: 0 0 32px;
    }
    .opt-info-page h2 {
      font-size: clamp(26px, 3.5vw, 32px);
      font-weight: 700;
      color: #2f3d20;
      letter-spacing: -0.01em;
      line-height: 1.2;
      margin: 56px 0 16px;
      padding-bottom: 14px;
      border-bottom: none;
      position: relative;
    }
    .opt-info-page h2::after {
      content: '';
      display: block;
      width: 48px;
      height: 3px;
      background: linear-gradient(90deg, #758956 0%, #a8b890 100%);
      border-radius: 2px;
      margin-top: 14px;
    }
    .opt-info-page > h2:first-child,
    .opt-info-page > div:first-child h2:first-child {
      margin-top: 0;
    }
    .opt-info-page h3 {
      font-size: 19px;
      font-weight: 700;
      color: #2f3d20;
      letter-spacing: -0.005em;
      line-height: 1.3;
      margin: 36px 0 10px;
    }
    .opt-info-page p {
      font-size: 16px;
      line-height: 1.75;
      color: #3d4a30;
      margin: 0 0 18px;
    }
    .opt-info-page p:last-child { margin-bottom: 0; }

    .opt-info-page strong {
      color: #2f3d20;
      font-weight: 700;
    }
    .opt-info-page em {
      font-style: italic;
    }
    .opt-info-page a {
      color: #5d6e44;
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1.5px;
      transition: color 0.2s ease;
    }
    .opt-info-page a:hover {
      color: #2f3d20;
      text-decoration-thickness: 2px;
    }

    /* Lists — refined sage bullets with hanging indent */
    .opt-info-page ul {
      list-style: none;
      padding: 0;
      margin: 0 0 24px;
    }
    .opt-info-page ul li {
      position: relative;
      padding-left: 22px;
      font-size: 16px;
      line-height: 1.75;
      color: #3d4a30;
      margin-bottom: 10px;
    }
    .opt-info-page ul li::before {
      content: '';
      position: absolute;
      left: 4px;
      top: 11px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #a8b890;
    }
    /* Lists already styled inline (delivery times with flags) — preserve them */
    .opt-info-page ul[style*="list-style:none"] li {
      padding-left: 0;
    }
    .opt-info-page ul[style*="list-style:none"] li::before {
      display: none;
    }

    /* Horizontal rule — more refined */
    .opt-info-page hr {
      border: none;
      border-top: 1px solid rgba(47, 61, 32, 0.10);
      margin: 56px 0 40px;
    }

    /* Inline code (for order number examples, etc.) */
    .opt-info-page code {
      background: rgba(168, 184, 144, 0.18);
      color: #2f3d20;
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 0.9em;
      font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
    }

    @media (max-width: 749px) {
      .opt-info-page {
        padding: 32px 20px 60px;
        font-size: 15px;
      }
      .opt-info-page h1 {
        font-size: 30px;
        margin-bottom: 24px;
      }
      .opt-info-page h2 {
        font-size: 22px;
        margin-top: 44px;
      }
      .opt-info-page h2::after {
        width: 40px;
        height: 2.5px;
        margin-top: 12px;
      }
      .opt-info-page h3 {
        font-size: 17px;
        margin-top: 28px;
      }
      .opt-info-page p,
      .opt-info-page ul li {
        font-size: 15px;
        line-height: 1.7;
      }
      .opt-info-page hr {
        margin: 44px 0 32px;
      }
    }

/* from layout/theme.liquid L3111 */
/* ── 1. Headline word reveal ─────────────────────────────────────── */
    .opt-headline-reveal .opt-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(14px);
      transition:
        opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: opacity, transform;
    }
    .opt-headline-reveal.opt-headline-in .opt-word {
      opacity: 1;
      transform: translateY(0);
    }
    /* opt-word-gradient-fix v1 — word-split spans must re-inherit gradient text,
       otherwise clipped accents render transparent (invisible headings) */
    .opt-headline-reveal .opt-word {
      background-image: inherit;
      -webkit-background-clip: text;
      background-clip: text;
    }

    /* ── 2. Number count-up (placeholder span, JS animates textContent) ── */
    .opt-counter {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum";
    }

    /* ── 3. Soft pulse on primary CTAs ───────────────────────────────── */
    @keyframes optCTAPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(168, 184, 144, 0.45); }
      50%      { box-shadow: 0 0 0 8px rgba(168, 184, 144, 0); }
    }
    /* Only the *primary* CTAs (bundle selector chosen card, sticky main CTA).
       Avoid every button — would be noisy. */
    [class*="bundle"] [class*="selected"],
    [class*="bundle"] [aria-selected="true"],
    .opt-bar-btn:not(:hover):not(:active) {
      animation: optCTAPulse 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
    }
    /* Pause the pulse while user interacts so it doesn't compete with hover */
    .opt-bar-btn:hover,
    .opt-bar-btn:focus-visible,
    [class*="bundle"] [class*="selected"]:hover {
      animation-play-state: paused !important;}

    /* ── 4. Image micro-tilt on hover (desktop only) ─────────────────── */
    @media (hover: hover) and (min-width: 990px) {
      [class*="image-with-text"] img,
      [class*="testimonial"] img,
      [class*="founder"] img,
      [class*="before-after"] img {
        transition:
          transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
          filter 0.4s ease !important;
        will-change: transform;
      }
      [class*="image-with-text"]:hover img,
      [class*="founder"]:hover img {
        transform: perspective(1200px) rotateY(-2deg) rotateX(1.5deg) scale(1.025) !important;
        filter: saturate(1.08) brightness(1.02);
      }
    }

    /* ── 5. Smooth anchor scrolling with sticky-header offset ────────── */
    html {
      scroll-behavior: smooth;
      scroll-padding-top: 80px; /* keeps target below sticky header */
    }
    @media (max-width: 989px) {
      html { scroll-padding-top: 68px; }
    }

    /* ── Reduce motion respect ───────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .opt-headline-reveal .opt-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
      [class*="bundle"] [class*="selected"],
      .opt-bar-btn:not(:hover):not(:active) {
        animation: none !important;
      }
      [class*="image-with-text"]:hover img,
      [class*="founder"]:hover img {
        transform: none !important;
      }
      html { scroll-behavior: auto; }
    }

/* from layout/theme.liquid L3361 */
.opt-sale-countdown{font-variant-numeric:tabular-nums;letter-spacing:0.4px;white-space:nowrap;font-weight:700;}


/* 2026-09-07 · sub-avatar tab photos are 3:4 portraits; the card crops them to
   269x168 landscape, which cut the women's heads off. Taller box, crop from the
   upper third so the face stays in frame. */
#shopify-section-template--22547926221040__content_tabs_subavatar .content-block-content-template--22547926221040__content_tabs_subavatar{
  height:auto !important;
}
#shopify-section-template--22547926221040__content_tabs_subavatar .content-image-template--22547926221040__content_tabs_subavatar{
  height:300px !important;
  width:100% !important;
  object-fit:cover !important;
  object-position:50% 20% !important;
}
@media (max-width:749px){
  #shopify-section-template--22547926221040__content_tabs_subavatar .content-image-template--22547926221040__content_tabs_subavatar{
    height:340px !important;
  }
}





/* 2026-09-07 · remove the sub-avatar tick badge.
   optistasis-overrides-head.css paints a checkmark ::before on each card
   ("Checkmark badge (SVG data URI)"). Nothing is selectable in this section, so
   the tick asserts a state that does not exist. ID selector so this wins over the
   attribute-selector rule regardless of stylesheet order. The badge can be deleted
   at source in overrides-head.css, at which point this block is redundant. */
#shopify-section-template--22547926221040__content_tabs_subavatar [class*="tab-content-template"]:not([class*="inner"])::before{
  content:none !important;
  display:none !important;
}
/* the card's 38px top padding existed only to clear that badge */
#shopify-section-template--22547926221040__content_tabs_subavatar [class*="tab-content-template"]:not([class*="inner"]){
  padding-top:22px !important;
}


/* 2026-09-07 · sticky bar: drop the link-style underlines.
   .opt-bar-title carried text-decoration:underline (desktop only — it was already
   switched off under 600px) and .opt-bar-reviews carried one at every width. The
   row is a button, not a link, so the underlines read as unstyled text. */
#opt-shopnow-bar .opt-bar-title,
#opt-shopnow-bar .opt-bar-reviews{
  text-decoration:none !important;
}

/* 2026-09-07 · anchor targets: the offer-recap and closing CTAs now link to
   #obs-obs_bundle_block instead of reloading the product URL. Keep the bundle
   selector clear of the header when the browser jumps to it. */
[id^="obs-"]{ scroll-margin-top:90px; }


/* 2026-09-07 · sticky bar: hidden state must not swallow taps.
   The hidden bar is parked off-screen with transform:translateY(100%) — but the
   prefers-reduced-motion block above cancels that with `transform:none !important`.
   On a phone with Reduce Motion on, the bar therefore sat AT the bottom of the
   viewport from page load: opacity 0, visibility visible, pointer-events auto.
   elementFromPoint proved it — taps in the bottom 90px (13.5% of an iPhone 13
   screen) hit .opt-bar-title / .opt-bar-meta and got yanked to the bundle block
   by an invisible button. Gate interactivity on the visible class instead of on
   geometry, so the hidden bar can never take a tap at any width or motion setting.
   visibility also stops the hidden button being reachable by keyboard tabbing. */
#opt-shopnow-bar{
  pointer-events:none;
  visibility:hidden;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#opt-shopnow-bar.opt-visible{
  pointer-events:auto;
  visibility:visible;
  transition:opacity .25s ease, transform .25s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce){
  #opt-shopnow-bar{ transition:opacity .15s ease, visibility 0s linear .15s; }
  #opt-shopnow-bar.opt-visible{ transition:opacity .15s ease, visibility 0s; }
}


/* 2026-09-07 · sticky bar button must not change size.
   The shared premium-button rule gives .opt-bar-btn `translateY(-3px) scale(1.015)` on
   hover and `translateY(-1px) scale(0.99)` on active. On a pointer device hover and press
   land together, so the button visibly inflates as you click it — reported as "when I
   press choose ur supply it become bigger". A CTA that resizes under the cursor reads as
   a glitch, and on a fixed bar it also nudges the text baseline. Keep the lift and the
   shadow, drop the scale, so the button moves but never changes size. */
#opt-shopnow-bar .opt-bar-btn:hover:not(:disabled),
#opt-shopnow-bar .opt-bar-product-btn:hover:not(:disabled){
  transform:translateY(-2px) !important;
}
#opt-shopnow-bar .opt-bar-btn:active:not(:disabled),
#opt-shopnow-bar .opt-bar-product-btn:active:not(:disabled){
  transform:translateY(0) !important;
  transition-duration:.1s !important;
}


/* 2026-09-07 · the press ripple must never take part in layout.
   THE BUG the user reported as "when I press choose ur supply it become bigger the button".
   spawnRipple() injects <span class="opt-ripple"> as a direct CHILD of the pressed button
   and sizes it to 2x the button's longest side (425px here). `.opt-ripple` sets
   position:absolute so it floats as an overlay — but the rule above,

       .opt-bar-btn > *, .opt-bar-product-btn > *, .product-form__submit > *,
       button[name="add"] > *, .obs-bundle-cta > * { position: relative; z-index: 2; }

   which exists to lift button labels above the shine sweep, ALSO matches the injected span.
   Same specificity (0,1,0), later in the file, so it wins: the ripple becomes position
   relative, joins the flex flow, and inflates its button. Measured on the live sticky bar:
   button 213x49 -> 638x453, and the whole fixed bar 92px -> 478px tall, on every press.
   The same selector list covers .product-form__submit, button[name="add"] and
   .obs-bundle-cta, so Add to Cart and BUY NOW were doing it too.
   A decorative, pointer-events:none overlay must never be able to affect layout, so pin it
   absolutely with enough weight that no descendant-of-button rule can pull it back in. */
.opt-ripple{
  position:absolute !important;
  z-index:0 !important;
}


/* 2026-09-08 · PDP mobile gallery arrows to 44px.
   The head sheet takes .shop-mobile-arrow to 44x44 for the whole store, but on the product page
   `shop-product-details-static.css` L10 sets `.shop-product-section .shop-mobile-arrow` to 40px
   !important and would otherwise win on specificity. That file is regenerated by the perf
   tooling, so it must not be edited directly — this sheet loads after it (position 57 vs 21),
   so an equal-specificity rule here wins on cascade order and survives their next deploy.
   Target is the 44x44 touch minimum; see the note in optistasis-overrides-head.css. */
.shop-product-section .shop-mobile-arrow{
  width: 44px !important;
  height: 44px !important;
}