/** Shopify CDN: Minification failed

Line 2318:19 Unexpected "{"
Line 2318:28 Expected ":"
Line 2318:35 Unexpected "{"
Line 2323:21 Unexpected "{"
Line 2323:30 Expected ":"
Line 2329:21 Unexpected "{"
Line 2329:30 Expected ":"
Line 2342:21 Unexpected "{"
Line 2342:30 Expected ":"
Line 2349:21 Unexpected "{"
... and 48 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:custom-product-page (INDEX:32) */
.ph {
        background-color: #fffff1;
        padding: 4rem 4rem;
        line-height: normal;
      }

      .ph .ph__content {
        display: flex;
        flex-direction: column;
        gap: 1.5rem; /* 24px, matches Figma's outer gap between breadcrumb and the row below */
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
      }

   .ph .ph__content-row {
      display: grid;
      grid-template-columns: minmax(0, 828px) minmax(0, 434px);
      gap: 32px;
      padding: 0rem 4rem;
      align-items: start;
      width: 100%;
      justify-content: space-between;
  }
      /* ---------------- Breadcrumbs ---------------- */
    ph .ph__breadcrumbs {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      max-width: 1440px;
      padding: 0rem 4rem;
      width: 100%;
      margin: 0 auto;
  }
  nav.ph__breadcrumbs {
      display: flex;
      padding: 0rem 4rem;
  }
  .ph .ph__hero-img,
  .ph .ph__thumb-img,
  .ph .ph__mgallery-img {
    filter: none !important;
    opacity: 1 !important;
    -webkit-filter: none !important;
    image-rendering: auto;
  }
      .ph .ph__crumb-link,
      .ph .ph__crumb-current {
        font-family: 'Area', sans-serif;
        font-size: 0.875rem; /* 14px */
        line-height: 1.5;
        color: #000000 !important;
        text-decoration: none !important;
        white-space: nowrap;
      }

      .ph .ph__crumb-link:hover {
        text-decoration: underline !important;
      }

      .ph .ph__crumb-current {
        font-weight: 500;
      }

      .ph .ph__crumb-sep {
        display: flex;
        width: 1rem;
        height: 1rem;
      }

      .ph .ph__crumb-sep svg {
        width: 100%;
        height: 100%;
            margin-top: 3px;
      }

      /* ---------------- Gallery: desktop (hero + thumb grid) ---------------- */
      /* Fixed-ish width (~828px in Figma) — NOT a percentage split with info */
     .ph .ph__gallery {
      display: flex;
      flex-direction: column;
      gap: 17.6px;
      width: 100%;
      max-width: 828px;
      min-width: 0;
    }

      .ph .ph__hero {
      position: relative;
      width: 100%;
      aspect-ratio: 828 / 859;
      overflow: hidden;
      border-radius: 8.8px;
    }

    .ph .ph__hero-img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: 8.8px;
    }

      .ph .ph__badge {
        position: absolute;
        top: 1.653rem; /* ~26.5px */
        left: 1.653rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.75rem;
        border-radius: 0.98rem;
        font-family: 'Area', sans-serif;
        font-weight: 700;
        font-size: 0.87rem;
        white-space: nowrap;
            text-transform: capitalize;
      }

      .ph .ph__badge--bundle {
        background-color: #c2f7a5;
        color: #1e5813;
      }

      .ph .ph__badge--seller,
      .ph .ph__pack-badge,
      .ph .ph__discount-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #c2f7a5;
        color: #1e5813;
        font-family: 'Area', sans-serif;
        font-weight: 700;
        font-size: 0.6rem; /* 8px */
        text-transform: uppercase;
        padding: 0.178rem 0.53rem; /* ~2.8px / 5.3px */
        border-radius: 0.889rem; /* ~14.2px */
        white-space: nowrap;
        -webkit-text-stroke: 0.3px currentColor;
      }

      .ph .ph__pack-badge--gold {
      background-color: #fce08c !important;
        color: #6a4d00 !important;
      }

      .ph .ph__badge--seller {
        position: static;
      }

      .ph .ph__thumb-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.102rem; /* ~17.6px */
      }

      .ph .ph__thumb-img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 404 / 418.063;
        object-fit: cover;
        border-radius: 0.551rem; /* ~8.8px */
      }

      /* ---------------- Gallery: mobile (single carousel + dots) ---------------- */
      /* Hidden on desktop; shown only inside the mobile media query below */
      .ph .ph__mgallery {
        display: none;
      }

      /* ---------------- Info column ---------------- */
      /* Flexible remainder of the row — not a fixed percentage of it */
    .ph .ph__info {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: 100%;
      max-width: 28.25rem;
      min-width: 28.25rem;
    }

      .ph .ph__review-row {
        display: flex;
        align-items: center;
        gap: 1.5rem; /* 24px */
        flex-wrap: wrap;
      }

      .ph .ph__rating-group {
        display: flex;
        align-items: center;
        gap: 0.5rem; /* 8px — tight gap, distinct from the 24px badge-to-group gap */
      }

      .ph .ph__rating {
        position: relative;
        display: inline-block;
        font-size: 1rem;
        line-height: 1;
      }

      .ph .ph__stars {
        letter-spacing: 0.125rem;
        white-space: nowrap;
      }

      .ph .ph__stars--bg {
        color: #e2e2e2;
      }

      .ph .ph__stars--fg {
        position: absolute;
        inset: 0;
        color: #f5a623;
        overflow: hidden;
        width: var(--ph-rating-pct, 0%);
      }

      .ph .ph__review-count {
        font-family: 'Area', sans-serif;
        font-weight: 400;
        font-size: 0.75rem; /* 12px */
        color: #000000;
        margin: 0;
      }

      .ph .ph__title-block {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* 12px */
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(16, 16, 16, 0.4);
      }

      .ph .ph__title {
        font-family: 'Area', sans-serif;
        font-weight: 600;
        font-size: 2rem; /* 32px */
        line-height: 1.2;
        letter-spacing: -0.02rem;
        margin: 0;
      }

      .ph .ph__description {
        font-family: 'Area', sans-serif;
        font-weight: 400;
        font-size: 1rem;
        line-height: 1.5;
        margin: 0;
        color: #000;
      }

      .ph .ph__benefits-price-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.625rem; /* 10px — tighter than the column's outer 32px gap */
      }

      .ph .ph__benefits {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem; /* 16px both axes */
        max-width: 27.125rem; /* 434px */
        margin: 0;
        padding: 0;
        list-style: none;
      }

    .ph .ph__benefit {
      display: flex;
      align-items: center;
     gap: 0.25rem;
      white-space: nowrap;
    }


    .ph .ph__benefit-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.5rem;
      height: 1.62rem;
      flex: 0 0 1.5rem;
    }

    .ph .ph__benefit-icon img {
      width: 1.5rem;
      height: 1.62rem;
      object-fit: contain;
    }
      .ph .ph__benefit-label {
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 1rem; /* 16px */
        color: #000000;
      }

      .ph .ph__price-row {
        display: flex;
        align-items: baseline;
        gap: 0.5rem; /* 8px */
        flex-wrap: wrap;
      }

      .ph .ph__price {
        font-family: 'Area', sans-serif;
        font-weight: 700;
        color: #000;
        font-size: 1.125rem; /* 18px */
        letter-spacing: -0.011rem;
      }

      .ph .ph__compare-price {
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 1.125rem;
        color: rgba(16, 16, 16, 0.7);
        text-decoration: line-through;
      }

      .ph .ph__tax-note {
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 0.625rem; /* 10px */
        color: rgba(16, 16, 16, 0.7);
      }

      .ph .ph__form {
        display: block;
        width: 100%;
      }

      /* ---------------- Pack size cards ---------------- */
      .ph .ph__packs {
        display: flex;
        flex-direction: column;
        gap: 1.4225rem; /* ~22.76px */
        max-width: 27.125rem; /* 434px */
      }

      .ph .ph__packs-title {
        font-family: 'Area', sans-serif;
        font-weight: 700;
        font-size: 1.067rem; /* ~17px */
        color: #101010;
        margin: 0;
      }

      .ph .ph__packs-cards-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* 8px */
      }

      .ph .ph__packs-hint {
        /* padding: 0.356rem 0.711rem;  */
        font-family: 'Area', sans-serif;
        font-weight: 800;
        font-size: 0.625rem; /* 10px */
        color: #101010;
        margin: 0;
        -webkit-text-stroke: 0.3px currentColor;
      }

      .ph .ph__delivery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem; /* 8px */
        width: 100%;
      }

      .ph .ph__delivery-chip {
        display: flex;
        align-items: center;
        gap: 0.267rem; /* ~4.27px */
        background-color: #f6f7f9;
        border: 0.3px solid #101010;
        border-radius: 0.375rem; /* 6px */
        padding: 0.356rem 0.711rem; /* ~5.7px / 11.4px */
      }

      .ph .ph__delivery-icon {
        display: flex;
        flex-shrink: 0;
        width: 1.25rem; /* 20px */
        height: 1.25rem;
        color: #101010;
      }

      .ph .ph__delivery-icon svg,.ph .ph__delivery-icon img {
        width: 100%;
        height: 100%;
      }

      .ph .ph__delivery-text {
        font-family: 'Area', sans-serif;
        font-weight: 800;
        font-size: 0.625rem; /* 10px */
        color: #101010;
        white-space: nowrap;
         -webkit-text-stroke: 0.5px currentColor;
      }

      .ph .ph__packs-row {
        display: flex;
        gap: 0.711rem; /* ~11.4px */
        align-items: stretch;
      }

      .ph .ph__pack-col {
        flex: 1 1 0;
        min-width: 0;
      }

      .ph .ph__pack-radio {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
      }

      .ph .ph__pack-card {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #eaeaec;
        border-radius: 0.711rem; /* ~11.4px */
        cursor: pointer;
        background-color: #ffffff;
        transition: border-color 0.15s ease;
      }

      .ph .ph__pack-radio:checked + .ph__pack-card {
        border: 1.5px solid #101010;
        background: transparent;
      }

      .ph .ph__pack-radio:focus-visible + .ph__pack-card {
        outline: 2px solid #101010;
        outline-offset: 2px;
      }

      .ph .ph__pack-badge {
        position: absolute;
        top: -0.578rem; /* ~-9.25px */
        left: 50%;
        transform: translateX(-50%);
        background-color: #c2f7a5;
        color: #1e5813;
      }

      .ph .ph__pack-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.356rem; /* ~5.7px */
        padding: 1.245rem 0.711rem 0.889rem; /* ~19.9px / 11.4px / 14.2px */
        text-align: center;
        flex: 1;
      }

      .ph .ph__pack-name {
        font-family: 'Area', sans-serif;
        font-weight: 800;
        font-size: 0.75rem; /* 12px */
        color: #101010;
        line-height: normal;
            -webkit-text-stroke: 0.3px currentColor;
                display: none;
      }

      .ph .ph__pack-subtitle {
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 1rem; /* 16px */
        color: #101010;
        line-height: normal;

      }

      .ph .ph__pack-price-row {
        display: flex;
        align-items: center;
        gap: 0.356rem; /* ~5.7px */
      }

      .ph .ph__pack-compare {
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.622rem; /* ~9.96px */
        color: #88919a;
        text-decoration: line-through;
        white-space: nowrap;
      }

      .ph .ph__pack-price {
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.75rem; /* ~11.4px */
        color: #101010;
        line-height: normal;
        white-space: nowrap;
      }

      .ph .ph__pack-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2rem; /* keeps empty bars visually consistent with text-filled ones */
        background-color: #101010;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        line-height: normal;
        font-size: 0.622rem; /* ~9.96px */
        padding: 0.622rem 0.711rem; /* ~9.96px / 11.4px */
        white-space: nowrap;
        border-radius: 0 0 0.622rem 0.622rem; /* ~9.96px, matches card's own bottom radius since parent no longer clips */
      }

      /* ---------------- Add to cart / guarantee ---------------- */
      .ph .ph__action-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.711rem; /* ~11.4px */
        width: 100%;
      }

      .ph .ph__add-to-cart {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #101010;
        color: #ffffff;
        font-family: 'Inter', sans-serif;
        font-weight: 700;
        font-size: 0.8rem; /* ~12.8px */
        padding: 0.8rem 1.4225rem; /* ~12.8px / 22.76px */
        border: none;
        border-radius: 1.334rem; /* ~21.3px */
        cursor: pointer;
        transition: opacity 0.15s ease;
      }

      .ph .ph__add-to-cart.is-loading {
        opacity: 0.6;
        cursor: default;
      }

      .ph .ph__add-to-cart.is-added {
        background-color: #1e5813;
      }

      .ph .ph__add-to-cart.is-error {
        background-color: #b3261e;
      }

      .ph .ph__guarantee {
        display: inline-flex;
        align-self: stretch;
        align-items: center;
        gap: 0.267rem; /* ~4.27px */
        background-color: #f6f7f9;
        border: 0.3px solid #101010;
        padding: 0.356rem 0.711rem; /* ~5.7px / 11.4px */
        border-radius: 0.375rem; /* 6px */
        margin: auto;
        max-width: 25rem;
      }

      .ph .ph__guarantee-icon {
        display: flex;
        flex-shrink: 0;
        width: 1.5rem; /* 24px */
        height: 1.5rem;
        color: #101010;
      }

      .ph .ph__guarantee-icon svg {
        width: 100%;
        height: 100%;
      }

      .ph .ph__guarantee-text {
        font-family: 'Area', sans-serif;
        font-weight: 800;
        font-size: 0.625rem; /* 10px */
        color: #101010;
        margin: 0;
         -webkit-text-stroke: 0.5px currentColor;
      }

      /* ---------------- Accordion ---------------- */
      .ph .ph__accordion {
        display: flex;
        flex-direction: column;
      }

      .ph .ph__accordion-item {
        border-bottom: 1px solid #00291f;
      }

      .ph .ph__accordion-summary {
        display: flex;
        align-items: center;
        gap: 0.75rem; /* 12px */
        padding: 1rem 0; /* 16px */
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 1.125rem; /* 18px */
        color: #000000;
        cursor: pointer;
        list-style: none;
      }

      .ph .ph__accordion-summary::-webkit-details-marker {
        display: none;
      }

      .ph .ph__accordion-summary span:first-child {
        flex: 1;
      }

      .ph .ph__accordion-icon {
        display: flex;
        width: 1.5rem; /* 24px */
        height: 1.5rem;
        transform: rotate(180deg);
        transition: transform 0.2s ease;
      }

      .ph .ph__accordion-icon svg {
        width: 100%;
        height: 100%;
      }

      .ph .ph__accordion-item[open] .ph__accordion-icon {
        transform: rotate(0deg);
      }

      .ph .ph__accordion-content {
        padding-bottom: 1rem;
        font-family: 'Area', sans-serif;
        font-size: 0.9375rem;
        line-height: 1.5;
        color: rgba(16, 16, 16, 0.85);
      }

      /* ---------------- Mobile ---------------- */
      @media screen and (max-width: 749px) {
         .ph .ph__badge {
        position: absolute;
            top: 1.23rem;
        left: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.21rem 0.43rem;
        border-radius: 0.98rem;
        font-family: 'Area', sans-serif;
        font-weight: 700;
        font-size: 0.87rem;
        white-space: nowrap;
            text-transform: capitalize;
      }
          .ph .ph__benefit-icon img {
      width: 1.25rem;
      height: 1.25rem;
      object-fit: contain;
    }
        .ph {
          padding: 1.5rem 1rem;
        }

        .ph .ph__content {
          margin-top: 1rem;
        }

      .ph .ph__content-row {
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      gap: 1.5rem;
      width: 100%;
      min-width: 0;
       padding: 0rem 0rem;
    }
    ph .ph__breadcrumbs {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      max-width: 1440px;
      padding: 0rem 0rem;
      width: 100%;
      margin: 0 auto;
  }
        .ph .ph__gallery {
          display: none; /* desktop hero+grid hidden; mobile carousel shown instead */
        }

    .ph .ph__accordion-content p{
    font-size: 0.7rem;
    }

        .ph .ph__mgallery {
          display: flex;
          flex-direction: column;
          gap: 0.625rem; /* 10px */
          width: 100%;
        }

        .ph .ph__mgallery-track {
          display: flex;
          width: 100%;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -ms-overflow-style: none;
          border-radius: 1.653rem; /* ~26.5px */
        }

        .ph .ph__mgallery-track::-webkit-scrollbar {
          display: none;
        }

        .ph .ph__pack-top{
              padding: 1.245rem 0.1rem 0.889rem;
        }

        .ph .ph__mgallery-slide {
          position: relative;
          flex: 0 0 100%;
          scroll-snap-align: start;
        }

        .ph .ph__mgallery-img {
          display: block;
          width: 100%;
          height: auto;
          aspect-ratio: 358 / 371;
          object-fit: cover;
          border-radius: 0.551rem; /* ~8.8px */
        }

        .ph .ph__badge--bundle-mobile {
          font-size: 0.75rem; /* 14px */
        }

        .ph .ph__mgallery-dots {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.25rem; /* 4px */
        }

        .ph .ph__mgallery-dot {
          width: 0.8125rem; /* 13px */
          height: 0.25rem; /* 4px */
          border-radius: 999px;
          background-color: rgba(16, 16, 16, 0.3);
          transition: width 0.2s ease, background-color 0.2s ease;
        }

        .ph .ph__mgallery-dot.is-active {
          width: 2.4375rem; /* 39px */
          background-color: rgba(16, 16, 16, 0.7);
        }

        .ph .ph__info {
          padding: 0;
          max-width: 100%;
        }

        .ph .ph__badge--seller {
          font-size: 0.75rem;
        }

        .ph .ph__title {
          font-size: 1.75rem; /* 28px */
          line-height: 1.2;
          letter-spacing: -0.0175rem;
        }

        .ph .ph__description {
          font-size: 0.875rem; /* 14px */
        }

        .ph .ph__benefit-label {
          font-size: 0.875rem; /* 14px */
        }

        .ph .ph__benefits,
        .ph .ph__packs {
          max-width: 100%;
        }

        .ph .ph__pack-subtitle {
          font-size: 0.9375rem; /* 15px */
        }

        .ph .ph__packs-row {
          flex-wrap: nowrap;
        }

        .ph .ph__pack-col {
          flex: 1 1 calc(50% - 0.356rem);
        }

        .ph .ph__accordion-summary {
          font-size: 0.875rem; /* 14px */
        }
      }
      @media screen and (max-width: 749px) {

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .ph,
      .ph *,
      .ph *::before,
      .ph *::after {
        box-sizing: border-box;
      }

      .ph {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      .ph .ph__content,
      .ph .ph__content-row,
      .ph .ph__info,
      .ph .ph__form,
      .ph .ph__packs,
      .ph .ph__packs-cards-wrap,
      .ph .ph__accordion {
        width: 100%;
        max-width: 100%;
        min-width: 0;
            /* gap: 1.5rem; */
      }

      /* Breadcrumb overflow fix */
      .ph .ph__breadcrumbs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        padding:0px;
      }

      .ph .ph__crumb-current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* Benefits */
      .ph .ph__benefits {
        width: 100%;
        min-width: 0;
      }

      .ph .ph__benefit {
        min-width: 0;
        white-space: normal;
      }

      .ph .ph__benefit-label {
        min-width: 0;
        overflow-wrap: break-word;
      }

      /* Pack cards */
      .ph .ph__packs-row {
        width: 100%;
        min-width: 0;
        gap: 0.5rem;
      }

      .ph .ph__pack-col {
        min-width: 0;
        width: 0;
        flex: 1 1 0;
      }

      .ph .ph__pack-card {
        width: 100%;
        min-width: 0;
      }

      .ph .ph__pack-name,
      .ph .ph__pack-subtitle,
      .ph .ph__pack-price-row,
      .ph .ph__pack-bottom {
        white-space: normal;
        overflow-wrap: anywhere;
      }

      /* Delivery grid */
      .ph .ph__delivery-grid {
        width: 100%;
        min-width: 0;
      }

      .ph .ph__delivery-chip {
        min-width: 0;
        padding: 0.356rem 0.5rem;
      }

      .ph .ph__delivery-text {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      /* Guarantee */
      .ph .ph__guarantee {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .ph .ph__guarantee-text {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      /* Mobile gallery */
      .ph .ph__mgallery {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      .ph .ph__mgallery-track {
        width: 100%;
        max-width: 100%;
      }

    }
  @media screen and (max-width: 749px) {

    /* Best Seller + Review same line */
    .ph .ph__review-row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.5rem;
      width: 100%;
    }

    .ph .ph__badge--seller {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    .ph .ph__rating-group {
      display: flex;
      flex: 0 1 auto;
      min-width: 0;
      align-items: center;
      gap: 0.35rem;
      white-space: nowrap;
    }

    .ph .ph__rating {
      flex: 0 0 auto;
    }

    .ph .ph__stars {
      letter-spacing: 0.08rem;
      font-size: 0.85rem;
    }

    .ph .ph__review-count {
      flex: 0 1 auto;
      margin: 0;
      font-size: 0.75rem;
      white-space: nowrap;
    }

  }
/* END_SECTION:custom-product-page */

/* START_SECTION:home-bundles (INDEX:42) */
.sbc {
      position: relative;
      overflow: hidden;
      border-radius: 2rem 2rem 0 0;
      isolation: isolate;
    }

    .sbc__bg {
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: #7a5fb0;
    }

    .sbc__bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .sbc__bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.2);
    }
.sbc__inner.page-width {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 4rem !important;
  padding-right: 4rem !important;
}
    .sbc__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3.75rem;
      padding: 5.625rem 4rem !important;
      position: relative;
      z-index: 1;
    }

    .sbc__header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      text-align: center;
    }

    .sbc__eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 1rem;
      border: 0.0625rem solid #ffffff;
      border-radius: 6.25rem;
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1.5;
      white-space: nowrap;
          letter-spacing: 0%;

    }

    .sbc__eyebrow--mobile { display: none; }

    .sbc__heading {
      max-width: 62.75rem;
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-size: 3rem;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.01rem;
      margin: 0;
    }

    .sbc__heading em,
    .sbc__heading i {
      font-family: 'Instrument Serif', serif;
      font-weight: 400;
      font-style: italic;
      font-size: 3.5rem;
      line-height: 1.2;
    }

    .sbc__heading--mobile { display: none; }

    /* ── Tabs: hardened to sit above anything (background layer, theme
       overlays) that might otherwise intercept the click — position +
       z-index + explicit pointer-events, plus the tab icon set to
       pointer-events:none so a click landing on the icon <img> can never
       behave differently from a click on the label/button itself. ── */
    .sbc__tabs {
      display: flex;
      flex-wrap: nowrap;
      gap: 0.25rem;
      overflow-x: auto;
      scrollbar-width: none;
      max-width: 100%;
      position: relative;
      z-index: 2;
    }

    .sbc__tabs::-webkit-scrollbar { display: none; }

    .sbc__tab {
      display: flex;
      align-items: center;
      gap: 0.2667rem;
      flex-shrink: 0;
      padding: 0.3556rem 0.7113rem;
      border-radius: 0.375rem;
      border: 0.0188rem solid transparent;
      background: transparent;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      z-index: 1;
      pointer-events: auto;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
  span.sbc__pack-name {
      display: none;
  }
    .sbc__tab--active {
      background: #fffffd;
      /* border-color: #101010; */
      color: #101010;
    }

    .sbc__tab-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 2.25rem;
      width: auto;
      max-width: 1.5625rem;
      pointer-events: none;
    }

    .sbc__tab-icon img {
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      display: block;
      pointer-events: none;
    }

    .sbc__tab-label {
      font-family: 'Area', sans-serif;
      font-weight: 800;
      font-size: 1rem;
      line-height: normal;
      white-space: nowrap;
      pointer-events: none;
    }

    .sbc__panels { width: 100%; }

    .sbc__panel[hidden] { display: none; }

    .sbc__content {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 2rem;
      flex-wrap: wrap;
    }

    .sbc__gallery-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.625rem;
      flex: 1 1 26rem;
      max-width: 60%;
    }
    .sbc__gallery {
      position: relative;
      width: 100%;
      border-radius: 1.6496rem;
      overflow: hidden;

    }

    .sbc__gallery-track {
      display: flex;
      width: 100%;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      border-radius: 0.5499rem;
    }

    .sbc__gallery-track::-webkit-scrollbar { display: none; }

    .sbc__gallery-slide {
      flex: 0 0 100%;
      scroll-snap-align: start;
      min-width: 0;
    }

    .sbc__gallery-image,
    .sbc__gallery-placeholder {
      width: 100%;
      height: auto;
      object-fit:fill;
      display: block;
      border-radius: 0.5499rem;
      background: #ece5d8;
    }

    .sbc__gallery-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: #c2f7a5;
      color: #1e5813;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 0.8rem;
      line-height: normal;
      padding: 0.175rem 0.75rem;
      border-radius: 0.9799rem;
    }

    /* ── Gallery dots ("image swiping tabs"): same hardening as the bundle
       tabs above — explicit stacking + pointer-events so they can't get
       silently swallowed by an overlapping element. ── */
    .sbc__dots {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      position: relative;
      z-index: 2;
    }
.sbc__pack--active .sbc__pack-bar--dark {
  background: #ffffff !important;
  /* color: #101010 !important; */
}
    .sbc__dot {
      width: 0.8125rem;
      height: 0.25rem;
      border-radius: 6.25rem;
      border: none;
      padding: 0;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      position: relative;
      z-index: 1;
      pointer-events: auto;
      transition: width 0.25s ease, background-color 0.25s ease;
    }

    .sbc__dot--active {
      width: 2.4375rem;
      background: rgba(255, 255, 255, 0.7);
    }

    .sbc__info-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2rem;
      flex: 1 1 24rem;
      max-width: 40%;
      padding: 1.5rem 0;
    }

    .sbc__review-row {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      flex-wrap: wrap;
    }

    .sbc__badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.1778rem 0.5334rem;
      border-radius: 0.8891rem;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 0.5rem;
      line-height: normal;
    }

    .sbc__badge--uc { text-transform: uppercase; }
    .sbc__badge--green { background: #c2f7a5; color: #1e5813;    -webkit-text-stroke: 0.1px currentColor; }

    .sbc__rating {
      display: inline-flex;
      align-items: center;
      gap: 0.5002rem;
    }

    .sbc__stars svg { display: block; width: 5.2105rem; height: 0.825rem; }

    .sbc__rating-text {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 400;
      font-size: 0.75rem;
      line-height: 1.5;
      white-space: nowrap;
    }

    .sbc__title {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 600;
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -0.02rem;
      margin: 0;
    }

    .sbc__benefits {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem 1rem;
      width: 100%;
      max-width: 27.125rem;
    }

    .sbc__benefit {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .sbc__benefit-icon {
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
    }

    /* Figma's benefit glyphs (noun-energy, noun-liver-detox, etc.) are flat
       WHITE icon assets. A merchant-uploaded File-reference metafield can't
       be guaranteed to already be white — and even when it IS an SVG, an
       <img src="icon.svg"> can't be recolored with CSS color/fill (that
       only affects inline <svg> markup, not a raster-style <img> reference).
       brightness(0) invert(1) flattens whatever color/shading the source
       file has into solid white while preserving its alpha shape, so the
       icon renders correctly regardless of what the merchant actually
       uploads. */
    .sbc__benefit-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: brightness(0) invert(1);
    }

    .sbc__benefit-label {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.5;
    }

    .sbc__price-row {
      display: flex;
      align-items: flex-end;
      gap: 0.5rem;
      margin-top: 0.5rem;
      flex-wrap: wrap;
    }

    .sbc__price {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 1.125rem;
      letter-spacing: -0.01125rem;
      line-height: 1.4;
    }

    .sbc__compare-price {
      color: rgba(255, 255, 255, 0.7);
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 1.125rem;
      letter-spacing: -0.01125rem;
      line-height: 1.4;
      text-decoration: line-through;
      text-decoration-skip-ink: none;
    }

    .sbc__mrp-note {
      color: rgba(255, 255, 255, 0.7);
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 0.625rem;
      letter-spacing: -0.00625rem;
      line-height: 1.4;
    }

    .sbc__pack-section {
      display: flex;
      flex-direction: column;
      gap: 1.4225rem;
      width: 100%;
    }

    .sbc__pack-heading {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 1.0669rem;
      line-height: normal;
      margin: 0;
    }

    .sbc__pack-row {
      display: flex;
      gap: 0.7113rem;
      width: 100%;
    }

    .sbc__pack {
      position: relative;
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      border-radius: 0.7113rem;
      /* Every pack card is white by default now — same background as
         --featured, same as --active. The gradient-dependent transparent/
         tinted looks kept causing inconsistent contrast depending on where
         a card happened to sit on the page's swirl background. White is
         the one thing that looks the same everywhere.
         UPDATE (border removed from inactive cards): no border on the
         default/inactive state anymore — cards are distinguished by white
         fill + the ribbon (featured) only. .sbc__pack--active below is the
         ONE state that still gets a border, since it's the only thing
         communicating which pack is currently selected for Add to cart.
         !important: this is a <button> element — Dawn's global button
         styles are a confirmed override conflict elsewhere in this theme,
         and a plain (non-important) border:none here was still showing a
         faint border on inactive cards, consistent with a more specific
         Dawn button rule winning over this one. */
      border: none !important;
      background: #ffffff;
      padding: 0;
      justify-content: space-between;
      cursor: pointer;
      overflow: visible;
      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Featured = has a ribbon (Recommended / Best value) — matches Figma's
       white-card treatment for packs 2 & 3, independent of user selection.
       No border here either (see .sbc__pack above) unless it's ALSO the
       active card, in which case .sbc__pack--active's !important border
       wins regardless of class order. */
    .sbc__pack--featured {
      background: #ffffff;
    }

    /* Active = currently selected pack for Add to cart. This is the only
       pack state that keeps a border — it's what visually communicates
       selection now that inactive/featured cards have none.
       UPDATE: transparent background turned out unreliable — this section
       sits on a soft gradient blob whose lightness varies across the card
       row, so "transparent" rendered as solid-black in one spot and
       near-white in another depending on which card it was. Combined with
       featured cards ALSO having dark text (see .sbc__pack--featured rules
       below), an unselected featured card and the actual active card ended
       up looking like the same "selected" state. Solid white here guarantees
       legible dark text regardless of what's behind the card, and the
       border being the only pack border left on the page makes the selected
       card unambiguous. */
    .sbc__pack--active {
      background: transparent !important;
      border: 0.1333rem solid #FFFFFF !important;
      box-shadow: none;
    }

    .sbc__pack-ribbon {
      position: absolute;
      -webkit-text-stroke: 0.3px currentColor;
      top: -0.5781rem;
      left: 50%;
      transform: translateX(-50%);
      padding: 0.1778rem 0.5334rem;
      border-radius: 0.8891rem;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 0.5rem;
      line-height: normal;
      text-transform: uppercase;
      white-space: nowrap;
      background: #c2f7a5;
      color: #1e5813;
    }

    .sbc__pack-ribbon--best-value {
      background: #fce08c;
      color: #6a4d00;
    }

    .sbc__pack-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.3556rem;
      padding: 1.2447rem 0.7113rem 0.8891rem;
      width: 100%;
    }

    .sbc__pack-name {
      color: #101010;
      font-family: 'Area', sans-serif;
      font-weight: 800;
      font-size: 0.75rem;
      line-height: normal;
      text-align: center;
    }

    /* Active also gets dark text — its background is transparent now (see
       .sbc__pack--active above), so it can't rely on the default WHITE
       text color (.sbc__pack-name/-sub/-price below), which only reads
       against a dark/colored card. Without this, a selected non-featured
       pack showed white text on a see-through card over the lighter part
       of the page's gradient — effectively white-on-white. */
    .sbc__pack--featured .sbc__pack-name,
    .sbc__pack--featured .sbc__pack-sub
     { color: #101010; }


    .sbc__pack--active .sbc__pack-name,.sbc__pack--active .sbc__pack-sub,.sbc__pack--active .sbc__pack-price,.sbc__pack--active .sbc__pack-compare{

    color:#fff;
    }
    .sbc__pack-sub {
      color: #101010;
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      line-height: normal;
      text-align: center;
    }

    .sbc__pack-price-row {
      display: flex;
      align-items: center;
      gap: 0.3556rem;
    }

    .sbc__pack-compare {
      color: #88919a;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 0.6224rem;
      line-height: normal;
      text-decoration: line-through;
      text-decoration-skip-ink: none;
    }

    .sbc__pack-price {
      color: #101010;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      line-height: normal;
    }


    .sbc__pack-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.9947rem;
      border-radius: 0 0 0.6224rem 0.6224rem;
      background: #ffffff;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.6224rem;
      line-height: normal;
      width: 100%;
    }

    .sbc__pack-bar--dark {
      background: #101010;
      color: #ffffff;
    }

    .sbc__action {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7113rem;
      width: 100%;
    }

    .sbc__action form { width: 100%; }

    .sbc__cta {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0.8001rem 1.4225rem;
      border-radius: 1.3336rem;
      border: none;
      background: #ffffff;
      color: #000000;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
    }

    .sbc__cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #101010;
      transform: translate3d(0, 100%, 0);
      transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
      z-index: -1;
    }

    .sbc__cta:hover::before,
    .sbc__cta:focus-visible::before {
      transform: translate3d(0, 0, 0);
    }

    .sbc__cta:hover .sbc__cta-label,
    .sbc__cta:focus-visible .sbc__cta-label {
      color: #ffffff;
    }

    /* Matches Figma node 316:682 (desktop): Inter SemiBold, 12.802px, black
       on the white button. (Mobile flips this — see the @media block below,
       which matches node 317:1220: Inter Bold, white on black.) The values
       here were already correct; what wasn't guaranteed was that 'Inter'
       itself would actually be loaded — see the <link> tags added near the
       top of this file for that half of the fix. */
    .sbc__cta-label {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.8001rem;
      line-height: normal;
      transition: color 0.2s ease;
    }

    .sbc__guarantee {
      display: flex;
      align-items: center;
      gap: 0.2667rem;
      padding: 0.3556rem 0.7113rem;
      border-radius: 0.375rem;
      background: #f6f7f9;
      border: 0.0188rem solid #101010;
      width: auto;
    }

    .sbc__guarantee-icon {
      flex-shrink: 0;
      width: 1.5rem;
      height: 1.5rem;
      color: #101010;
    }

    .sbc__guarantee-icon svg { display: block; width: 100%; height: 100%; }

    .sbc__guarantee-text, .sbc__guarantee p {
      color: #101010;
      font-family: 'Area', sans-serif;
      font-weight: 800;
      font-size: 0.625rem;
      line-height: normal;
      max-width: 18.625rem;
      margin: 0;
    }

    @media screen and (max-width: 749px) 
    {
      .sbc__inner { padding: 2rem 1rem !important; gap: 2rem; }
      .sbc__eyebrow--desktop { display: none; }
      .sbc__eyebrow--mobile {
        display: inline-flex;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }
      .sbc__inner.page-width {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
      .sbc__heading--desktop { display: none; }
      .sbc__heading--mobile {
        display: block;
        font-size: 1.75rem;
        letter-spacing: -0.0175rem;
        max-width: 100%;
      }
      .sbc__heading--mobile em,
      .sbc__heading--mobile i { font-size: 1.75rem; }

      .sbc__content { flex-direction: column; align-items: stretch; gap: 1.5rem; }
      .sbc__gallery-col { max-width: 100%; flex:auto;}
      .sbc__gallery { padding: 0; border-radius: 1.6533rem; }
      .sbc__gallery-track { border-radius: 0.5511rem; }
      .sbc__gallery-image,
      .sbc__gallery-placeholder { height: auto; border-radius: 0.5511rem; }
      .sbc__gallery-badge {
        font-size: 0.875rem;
        top: 1rem;
        left: 1rem;
        padding: 0.25rem 0.75rem;
      }
      .sbc__badge--bestseller { font-size: 0.75rem; }

      .sbc__info-col { max-width: 100%; padding:  0; }
      .sbc__title { font-size: 1.75rem; letter-spacing: -0.0175rem; }
      .sbc__benefits { max-width: 100%; }
      .sbc__benefit-label { font-size: 0.875rem; }
      .sbc__pack-sub { font-size: 0.9375rem; }

      /* Matches Figma node 317:1220 (mobile): Inter Bold, white on the
         black button — the inverse of desktop. Already correct; unaffected
         by the fixes above. */
      .sbc__cta { background: #101010; }
      .sbc__cta::before { background: #ffffff; }
      .sbc__cta-label { color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 700; }
      .sbc__cta:hover .sbc__cta-label,
      .sbc__cta:focus-visible .sbc__cta-label { color: #101010; }
    }
/* END_SECTION:home-bundles */

/* START_SECTION:pdp-ingredients (INDEX:83) */
.pi__section {
        background-color: #EDEDE1;
    border-top: 0.0625rem solid #fffff1; /* was #FFFFFF — exact Figma value */
    border-radius: 2rem 2rem 0 0; /* 32px — confirmed present on BOTH desktop (109-3782) and mobile (109-4762), not mobile-only */
    overflow: hidden;
    max-width: 100%;
    display: flex;
    padding: 3.75rem 4rem;
    justify-content: center;
  }

  .pi__section {
    position: relative;
  }

  .pi__section .pi__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 1312px;
    gap: 3.75rem;
  }

  /* Decorative mobile-only background — hidden on desktop */
  .pi__section .pi__mobile-bg {
    display: none;
  }

  /* Decorative desktop-only background — hidden until has-desktop-bg is
     set, and hidden again on mobile regardless (see mobile media query
     below), same pattern as the mobile background above but mirrored. */
  .pi__section .pi__desktop-bg {
    display: none;
  }

  .pi__section.has-desktop-bg .pi__desktop-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .pi__section .pi__desktop-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pi__section .pi__desktop-bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.2);
  }

  /* Transparent pass-through on desktop — same gap pi__panel-left
     always had between name and copy (24px, unchanged from before). */
  .pi__section .pi__panel-highlight {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
  }

  /* ---------- Intro (heading + description) ---------- */
  .pi__section .pi__intro {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
  }

  .pi__section .pi__heading {
    flex: 1 0 0;
    font-family: 'Area', sans-serif;
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.2;
    letter-spacing: -0.03rem;
    color: #101010;
    margin: 0;
  }

  .pi__section .pi__heading em,
  .pi__section .pi__heading i {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 3.5rem;
  }

  .pi__section .pi__description {
    flex: 1 0 0;
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.5;
    color: #101010;
    margin: 0;
  }

  /* Heading/description switch to white when a desktop bg image is set
     — mirrors the mobile has-mobile-bg color switch below, but scoped
     to desktop widths only (min-width 990px) so it doesn't clash with
     the mobile-only color rule when only one of the two is configured. */
  @media (min-width: 990px) {
    .pi__section.has-desktop-bg .pi__heading,
    .pi__section.has-desktop-bg .pi__description {
      color: #ffffff;
    }
  }

  /* ---------- Body wrapper ---------- */
  .pi__section .pi__body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* ---------- Tabs ---------- */
  .pi__section .pi__tabs {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    -webkit-overflow-scrolling: touch;
  }

  .pi__section .pi__tab {
    display: flex;
    align-items: center;
    gap: 0.267rem;
    padding: 0.356rem 0.711rem;
    border-radius: 0.375rem;
    border: 0.019rem solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
  }

  .pi__section .pi__tab:hover {
    background-color: rgba(255, 255, 253, 0.6);
  }

  .pi__section .pi__tab--active {
    background-color: #FFFFFD;
    border-color: #101010;
    border-width: 0.019rem;
  }

  .pi__section .pi__tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: auto;
    overflow: hidden;
  }

  .pi__section .pi__tab-icon img {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
  }

  .pi__section .pi__tab-label {
    font-family: 'Area', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    color: #101010;
    white-space: nowrap;
  }

  /* Inactive tab labels switch to white when a desktop bg image is set
     (they sit transparent over the colorful photo) — the active tab
     keeps dark text since it always has its own white pill regardless.
     Default (no bg image) stays dark for every tab, since the fallback
     background is light beige either way. */
  @media (min-width: 990px) {
    .pi__section.has-desktop-bg .pi__tab:not(.pi__tab--active) .pi__tab-label {
      color: #ffffff;
    }
  }

  /* ---------- Card ---------- */
  .pi__section .pi__card {
    position: relative;
    background-color: #FFFFFD;
    border: 0.0625rem solid #fffff1; /* missing before — confirmed on both breakpoints */
    border-radius: 1.5rem;
    padding: 2rem;
    width: 100%;
    min-height: auto;
  }

  .pi__section .pi__panel {
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    opacity: 1;
    transition: opacity 0.35s ease;
    will-change: opacity;
  }

  .pi__section .pi__panel[hidden] {
    display: none;
  }

  .pi__section .pi__panel-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 0 0 19.6875rem;
    max-width: 19.6875rem;
  }

  .pi__section .pi__panel-name {
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 3.375rem;
    letter-spacing: -0.0625rem;
    color: #101010;
    margin: 0;
  }

  .pi__section .pi__panel-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
  }

  .pi__section .pi__panel-description {
    font-family: 'Area', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.4;
    color: #101010;
    /* text-transform: capitalize; was missing — confirmed in both Figma nodes */
    margin: 0;
    width: 100%;
  }

  .pi__section .pi__panel-description > p {
    margin: 0;
  }

  .pi__section .pi__panel-molecule {
    width: 15.0625rem;
    max-width: 100%;
    height: auto;
  }

  .pi__section .pi__panel-right {
    flex: 1 0 0;
    min-width: 0;
    aspect-ratio: auto;
    border-radius: 1rem;
    overflow: hidden;
  }

  .pi__section .pi__panel-right img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    object-position: bottom;
  }

  /* ---------- Mobile (per Figma node 109-4762) ---------- */
  @media (max-width: 989px) {
    /* Padding still switches per breakpoint — radius/overflow are now
       in the base rule above since desktop has them too. */
    .pi__section {
      padding: 2.5rem 1rem;
    }

    /* Desktop background never shows on mobile, even if a desktop_bg_image
       is set — same specificity as the has-desktop-bg rule above, so this
       later rule wins the cascade without needing !important. */
    .pi__section.has-desktop-bg .pi__desktop-bg {
      display: none;
    }

    /* Outer gap was inheriting desktop's 60px unmodified — Figma mobile
       spec is 32px between the intro block and the tabs+card block. */
    .pi__section .pi__content {
      gap: 2rem;
      width:100%;
    }

    .pi__section .pi__intro {
      flex-direction: column;
      gap: 1rem;
    }

    /* Mobile-only decorative background, rendered only when the
       merchant sets one in theme settings. object-fit: cover is used
       instead of Figma's exact bespoke crop offsets, since this needs
       to work reasonably for whatever image is uploaded. */
    .pi__section.has-mobile-bg .pi__mobile-bg {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    /* Same logic as the desktop rule above — inactive tab labels are
       white only when a mobile bg image is actually set. This was
       previously unconditional, making inactive tab labels invisible
       whenever no mobile bg image was configured. */
    .pi__section.has-mobile-bg .pi__tab:not(.pi__tab--active) .pi__tab-label {
      color: #fff;
    }

    .pi__section .pi__panel-right {
      flex: auto;
    }

    .pi__section .pi__mobile-bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pi__section .pi__mobile-bg-overlay {
      position: absolute;
      inset: 0;
      background-color: rgba(255, 255, 255, 0.2);
    }

    /* Heading/description are dark by default (safe fallback with no
       bg image). They only switch to white when a mobile bg is set —
       matching Figma, where the white text only appears over the
       decorative image; desktop stays dark always. */
    .pi__section .pi__heading {
      font-size: 1.5rem; /* 24px, was wrongly 32px */
      letter-spacing: -0.015rem; /* -0.24px */
    }

    .pi__section .pi__heading em,
    .pi__section .pi__heading i {
      font-size: 1.625rem; /* 26px, was wrongly 37px */
    }



    .pi__section.has-mobile-bg .pi__heading,
    .pi__section.has-mobile-bg .pi__description {
      color: #ffffff;
    }

    .pi__section .pi__description {
      font-size: 0.875rem; /* 14px, was inheriting desktop's 18px */
    }

    .pi__section .pi__tabs {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .pi__section .pi__tabs::-webkit-scrollbar {
      display: none;
    }

    .pi__section .pi__card {
      padding: 1rem; /* 16px, was wrongly 20px */
      min-height: 0;
    }

    /* Was column-reverse (chart above text) — Figma mobile shows text
       block THEN chart below, same DOM order as desktop, just stacked. */
    .pi__section .pi__panel {
      flex-direction: column;
      align-items: stretch;
      gap: 1.5rem;
    }

    .pi__section .pi__panel-left {
      flex: 1 1 auto;
      max-width: 100%;
    }

    /* The beige box from Figma — mobile only, grouping name + molecule
       + description together. Transparent/no-op on desktop (base rule). */
    .pi__section .pi__panel-highlight {
      background-color: #edebd4;
      border-radius: 1rem; /* 16px */
      padding: 1rem 0.5rem; /* 16px top/bottom, 8px sides */
      gap: 1.25rem; /* 20px */
      align-items: center;
      text-align: center;
    }

    .pi__section .pi__panel-name {
      font-size: 1.25rem; /* 20px, was wrongly 32px */
      line-height: 1; /* leading-none */
      letter-spacing: -0.0625rem; /* -1px, unchanged from base but explicit here */
      text-align: left;
      width: 100%;
    }

    /* Molecule image comes before description on mobile (Figma order),
       while desktop keeps description-then-molecule in the DOM as-is —
       swapped visually here via flex order instead of duplicating markup. */
    .pi__section .pi__panel-copy {
      gap: 1.25rem; /* 20px, matches the highlight box's gap rhythm */
    }

    .pi__section .pi__panel-molecule {
      order: -1;
    }

    .pi__section .pi__panel-description {
      font-size: 0.875rem; /* 14px, was inheriting desktop's 16px */
      text-align: left;
    }

    /* Chart is the SAME aspect ratio as desktop (621/345 = 315/175 =
       1.8:1) — the previous 16:10 (1.6:1) override was simply wrong,
       not an intentional mobile-specific ratio. Removed; base rule's
       aspect-ratio: 621/345 now applies unchanged at every size. */
  }
/* END_SECTION:pdp-ingredients */

/* START_SECTION:pdp-lab-tests (INDEX:84) */
.lt {
    background-color: #fffffd;
    padding: 2.5rem 5rem 2.5rem; /* 40px 80px 20px — matches Figma pt-40 pb-20 px-80 */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem; /* 48px */
  }

  .lt .lt__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem; /* 24px */
  }

  .lt .lt__pill {
    color: #101010;
    font-family: 'Area', sans-serif;
    font-size: 0.8125rem; /* 13px */
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding: 0.625rem 1.75rem; /* 10px 28px */
    border-radius: 6.25rem;
    border: 1px solid #101010;
    margin: 0;
    text-align:center;
  }

  .lt .lt__heading {
    color: #101010;
    text-align: center;
    font-family: 'Area', sans-serif;
    font-size: 3rem; /* 48px */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03rem; /* -0.48px */
    width: 49.875rem; /* 798px */
    max-width: 100%;
  }

  .lt .lt__heading p {
    margin: 0;
  }

  .lt .lt__heading em,
  .lt .lt__heading i {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 3.5rem; /* 56px */
    letter-spacing: -0.035rem;
  }

  .lt .lt__seals {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5rem; /* 80px */
    
  }

  .lt .lt__seal {
    flex-shrink: 0;
    width: 7.4375rem; /* 119px */
    height: 7.4375rem;
  }

  .lt .lt__seal-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---- Mobile (per Figma node 109-4966) ---- */
  @media screen and (max-width: 749px) {
    .lt {
      padding: 2.5rem 1rem 1.25rem; /* 40px 16px 20px */
      gap: 3rem; /* 48px — unchanged, matches mobile spec too */
    }

    .lt .lt__heading {
      font-size: 1.5rem; /* 24px */
      letter-spacing: -0.015rem; /* -0.24px */
      width: 22.37rem;
    }

    /* Mobile does NOT upsize the italic runs the way desktop does —
       both regular and italic text sit at the same 24px on mobile. */
    .lt .lt__heading em,
    .lt .lt__heading i {
      font-size: 1.5rem; /* 24px, not 56px */
      letter-spacing: -0.015rem;
    }

    .lt .lt__seals {
      gap: 1rem; /* 16px, was 80px */
      width: 22.37rem;
    }

    .lt .lt__seal {
      width: 6.75rem; /* ~108px */
      height: 6.75rem;
    }
  }
/* END_SECTION:pdp-lab-tests */

/* START_SECTION:pdp-wellness-hero (INDEX:87) */
#WellnessHeroCard-{{ section.id }} {
    background-color: #fffef6;
    padding: var(--whc-page-pad, 64px);
  }

  #WellnessHeroCard-{{ section.id }} .whc__inner {
      max-width: 1440px;
     margin: 0rem auto;
    padding: 4rem 4rem;
  }

  #WellnessHeroCard-{{ section.id }} .whc__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    min-height: 32rem; /* 482px */
    padding: 2rem; /* 32px */
    border-radius: var(--whc-radius, 24px);
    overflow: clip;
  }

  #WellnessHeroCard-{{ section.id }} .whc__bg {
    position: absolute;
    inset: 0;
    border-radius: var(--whc-radius, 24px);
    pointer-events: none;
  }

  #WellnessHeroCard-{{ section.id }} .whc__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    border-radius: var(--whc-radius, 24px);
  }

  #WellnessHeroCard-{{ section.id }} .whc__overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--whc-radius, 24px);
    background-image: linear-gradient(
      var(--whc-overlay-angle, 159.83deg),
      rgba(0, 0, 0, var(--whc-overlay-start, 0.3)) 25%,
      rgba(0, 0, 0, var(--whc-overlay-mid, 0.1)) 50%,
      rgba(0, 0, 0, var(--whc-overlay-end, 0.5)) 75%
    );
  }

  #WellnessHeroCard-{{ section.id }} .whc__header {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  #WellnessHeroCard-{{ section.id }} .whc__heading {
      display: -webkit-box;
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 2.5rem; /* 44px */
    line-height: 3.375rem; /* 54px */
    letter-spacing: -0.0625rem; /* -1px */
    color: #ffffff;
    max-width:58.31rem; /* 533px */
    word-break: break-word;
    margin: 0;
  }

  #WellnessHeroCard-{{ section.id }} .whc__glass {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; /* 48px */
    width: 100%;
    padding: 2.25rem 3rem 2.75rem; /* 36px 48px 44px */
    border-radius: var(--whc-glass-radius, 14px);
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(var(--whc-blur, 10.7px));
    -webkit-backdrop-filter: blur(var(--whc-blur, 10.7px));
  }

  #WellnessHeroCard-{{ section.id }} .whc__col {
    display: flex;
    flex: 1 0 12.5rem; /* 200px min before wrapping */
    flex-direction: column;
    gap: 1rem; /* 16px */
    min-width: 0;
  }

  #WellnessHeroCard-{{ section.id }} .whc__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem; /* 44px */
    height: 2.75rem;
  }

  #WellnessHeroCard-{{ section.id }} .whc__icon {
    width: 2.139rem; /* 34.222px */
    height: 2.139rem;
    display: block;
  }

  #WellnessHeroCard-{{ section.id }} .whc__text-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* 8px */
    width: 100%;
    word-break: break-word;
  }

  #WellnessHeroCard-{{ section.id }} .whc__col-title {
    font-family: 'Area', sans-serif;
    font-weight: 600;
    font-size: 1.125rem; /* 18px */
    line-height: 1.5rem; /* 24px */
    color: #ffffff;
    margin: 0;
  }

  #WellnessHeroCard-{{ section.id }} .whc__col-desc {
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
  }

  #WellnessHeroCard-{{ section.id }} .whc__dots {
    display: none;
  }

  /* ---- Mobile ---- */
  @media screen and (max-width: 749px) {
    #WellnessHeroCard-{{ section.id }} {
      padding: 2rem 1rem;
     
    }

   #WellnessHeroCard-{{ section.id }} .whc__inner {
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 0;
}

    #WellnessHeroCard-{{ section.id }} .whc__card {
            min-height: 30.125rem;
        padding: 1.5rem 1rem;
        gap: 1rem;
        padding-right: 0;
        border-radius: 1.5rem;
        margin: 2.5rem 1rem;
        width: auto;
    }

    #WellnessHeroCard-{{ section.id }} .whc__heading {
      font-size: 1.5rem; /* 24px */
      line-height: 2.125rem; /* 34px */
      letter-spacing: -0.03125rem;
      max-width: 100%;
      padding-right: 1.25rem;
    }

    #WellnessHeroCard-{{ section.id }} .whc__header {
      margin-bottom: var(--whc-mobile-gap, 64px);
    }

    /* Glass bar becomes a horizontal scroll-snap carousel; each card
       carries its own background/blur instead of one shared panel. */
    #WellnessHeroCard-{{ section.id }} .whc__glass {
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.75rem;
      padding: 0;
      background-color: transparent;
      backdrop-filter: none;
      border-radius: 0;
      -webkit-backdrop-filter: none;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    #WellnessHeroCard-{{ section.id }} .whc__bg-img {
border-radius: 0.5rem;
    }

    #WellnessHeroCard-{{ section.id }} .whc__glass::-webkit-scrollbar {
      display: none;
    }

    #WellnessHeroCard-{{ section.id }} .whc__col {
      flex: 0 0 82%;
      scroll-snap-align: start;
      padding: 1rem;
      border-radius: var(--whc-glass-radius, 14px);
      background-color: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(var(--whc-blur, 10.7px));
      -webkit-backdrop-filter: blur(var(--whc-blur, 10.7px));
    }

    #WellnessHeroCard-{{ section.id }} .whc__dots {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.5rem;
      position: relative;
      z-index: 1;
      width: 100%;
      padding-right: 1.25rem;
    }

    #WellnessHeroCard-{{ section.id }} .whc__dot {
      width: 0.375rem; /* 6px */
      height: 0.375rem;
      padding: 0;
      border: none;
      border-radius: 999px;
      background-color: rgba(255, 255, 255, 0.4);
      transition: background-color 0.2s ease, width 0.2s ease;
    }

    #WellnessHeroCard-{{ section.id }} .whc__dot.is-active {
      width: 1.25rem; /* 20px */
      background-color: #ffffff;
    }
  }
/* END_SECTION:pdp-wellness-hero */

/* START_SECTION:product-journey (INDEX:90) */
.pj__section {
      position: relative;
      background-color: #EDEDE1;
      border-top: 0.0625rem solid #FFFFFF;
      border-radius: 2rem 2rem 0 0; /* 32px — present on BOTH breakpoints per Figma, not mobile-only */
      overflow: hidden;
      padding: 3.75rem 4rem;
    }

    /* Decorative full-bleed background photo. Desktop version shows by
       default and hides on mobile; mobile version is the reverse. Both
       are only rendered/visible when their respective schema setting is
       actually set. See comment above the Liquid for why this uses
       object-fit:cover instead of Figma's bespoke rotated-crop technique. */
    .pj__section .pj__bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }

    .pj__section .pj__bg--mobile {
      display: none;
    }

    .pj__section .pj__bg-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pj__section .pj__content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
    }

    /* ---------- Intro (heading + description) ---------- */
    .pj__section .pj__intro {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
      width: 100%;
    }

    .pj__section .pj__heading {
      flex: 1 0 0;
      font-family: 'Area', sans-serif;
      font-weight: 600;
      font-size: 3rem;
      line-height: 1.2;
      letter-spacing: -0.03rem;
      color: #101010;
      margin: 0;
    }

    .pj__section .pj__heading em,
    .pj__section .pj__heading i {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-weight: 400;
      font-size: 3.5rem;
    }

    .pj__section .pj__description {
      flex: 1 0 0;
      font-family: 'Area', sans-serif;
      font-weight: 400;
      font-size: 1.125rem;
      line-height: 1.5;
      color: #101010;
      margin: 0;
    }

    /* Heading/description/title/desc text + timeline line switch to
       white when the DESKTOP bg photo is active — scoped to desktop
       widths only so it doesn't clash with the mobile-only version
       below when only one of the two is configured. */
    @media (min-width: 990px) {
      .pj__section--has-desktop-bg .pj__heading,
      .pj__section--has-desktop-bg .pj__description,
      .pj__section--has-desktop-bg .pj__title,
      .pj__section--has-desktop-bg .pj__desc {
        color: #FFFFFF;
      }

      /* Against a photo background the dim backbone and the bright fill
         end up the same white, so a low but non-trivial 0.35 opacity
         (fine on the plain beige background) reads as an already-full
         progress line the moment the section loads — before the fill
         has grown at all. Dropping it further here keeps the backbone
         as a faint guide instead of something that can be mistaken for
         "all steps already reached". */
      .pj__section--has-desktop-bg .pj__list::before {
        background-color: #FFFFFF;
        opacity: 0.15;
      }
    }

    /* ---------- Row (timeline + collage) ---------- */
    .pj__section .pj__row {
      display: flex;
      align-items: center;
      gap: 4rem;
      width: 100%;
    }

    /* ---------- Timeline ---------- */
    .pj__section .pj__timeline {
      flex: 0 0 24.6875rem; /* 395px */
      max-width: 24.6875rem;
    }

    .pj__section .pj__list {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      width: 100%;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    /* Dim track line spanning the full first-to-last badge distance —
       always visible, represents the whole journey. */
    .pj__section .pj__list::before {
      content: '';
      position: absolute;
      top: var(--pj-line-top, 0.9rem);
      height: var(--pj-line-height, 0px);
      left: 3.25rem;
      width: 0.125rem;
      background-color: #fff;
      opacity: 0.35;
      z-index: 0;
    }

    /* Progress-fill line — grows to reach the currently active step as
       the auto-cycle advances. Positioned/sized via JS (top and height
       set directly via inline style, not CSS custom properties, since
       they need to update on every cycle tick). Kept intentionally
       minimal: one steady, flat-color line — no glow, no shimmer
       sweep, no pulsing — so the motion itself (the line growing) is
       what reads, not decorative noise on top of it. --pj-glow-color
       is still kept as a custom property (even though nothing reads it
       for a shadow anymore) purely so the bg-photo variant override
       below only needs to redefine one value if glow is ever reintroduced.

       Transition duration is 5.5s — deliberately kept close to the JS
       autoplay tick (6s, see INTERVAL_MS) so growth is visible for
       nearly the entire cycle instead of finishing in under a second
       and then sitting static; that gap between transition duration
       and tick interval was what made the "constant speed" line read
       as jumpy rather than a slow, consistent crawl. */
    .pj__section .pj__line-fill {
      position: absolute;
      left: 3.25rem;
      width: 0.125rem;
      background-color: #1F3322;
      opacity: 1;
      z-index: 0;
      height: 0;
      overflow: visible;
      --pj-glow-color: 31, 51, 34;
      /* !important: confirmed Dawn global-CSS override conflict — Dawn's
         base.css/main.css leak transition resets into custom sections,
         which was silently killing this transition (bar jumping
         instantly instead of growing). The JS text-sync no longer
         depends on this transition actually running (see goToStep), but
         the visible growth animation itself does, so it still needs to
         survive Dawn's override. */
      transition:
        height 5.5s linear,
        top 5.5s linear !important;
    }

    .pj__section .pj__line-fill-marker {
      display: block;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    /* Small solid dot marking the current position — sits at the
       growing edge via ::after so it always tracks progress without
       extra JS. Flat color, no glow, matching the line itself. */
    .pj__section .pj__line-fill::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0.5rem;
      height: 0.5rem;
      background-color: inherit;
      border-radius: 999px;
      transform: translate(-50%, 50%);
    }

    /* Same white as the faded backbone above, so this needs to win on
       weight rather than color/opacity to stay readable as "the
       reached portion" against a busy photo background: a touch wider
       than the 0.125rem backbone (re-centered via left). */
    .pj__section--has-desktop-bg .pj__line-fill,
    .pj__section--has-mobile-bg .pj__line-fill {
      left: 3.21875rem;
      width: 0.1875rem;
      background-color: #FFFFFF;
      --pj-glow-color: 255, 255, 255;
    }

    .pj__section--has-desktop-bg .pj__line-fill::after,
    .pj__section--has-mobile-bg .pj__line-fill::after {
      background-color: #FFFFFF;
    }

    /* NOTE: the fade for inactive steps is applied to .pj__title /
       .pj__desc individually (see rules below), NOT to .pj__item as a
       whole. Fading the whole <li> used to fade its .pj__badge too —
       since the badge sits directly over the progress line (left:
       2.25rem/3.25rem lands inside the badge's own width), an item at
       opacity: 0.2 made its solid white badge background see-through,
       letting the line paint visibly THROUGH the badge text. Keeping
       the badge itself always fully opaque (default opacity: 1, never
       overridden) means the line stays hidden behind it regardless of
       which step is active — z-index order was already correct, this
       was a transparency bleed-through issue, not a stacking order one. */
    .pj__section .pj__item {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      width: 100%;
    }

    .pj__section .pj__title,
    .pj__section .pj__desc {
      transition: opacity 0.6s ease;
    }

    /* Cumulative reveal: the current step AND every step already passed
       stay at full opacity (.pj__item--active / .pj__item--reached).
       Only steps not yet reached are dimmed, uniformly to 30% — no
       separate "next step at 60%" tier anymore, since once a step is
       reached it's meant to stay fully visible rather than fading back
       down as the cycle moves past it. */
    .pj__section .pj__item--reached .pj__title,
    .pj__section .pj__item--reached .pj__desc {
      opacity: 1;
    }

    .pj__section .pj__item--upcoming .pj__title,
    .pj__section .pj__item--upcoming .pj__desc {
      opacity: 0.3;
    }

    .pj__section .pj__item-top {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      width: 100%;
    }

    /* Badge sits beside the header block; nudge it down slightly so its
       center lines up with the title's cap-height instead of the top
       edge of the whole (title + description) block. */
    .pj__section .pj__item-top .pj__badge {
      margin-top: 0.25rem;
    }

    /* Badge is white-bg/dark-text in BOTH Figma references (desktop and
       mobile) regardless of the bg-photo variant — not conditional. */
    .pj__section .pj__badge {
      flex: 0 0 auto;
      min-width: 6.5rem;
      text-align: center;
      background-color: #FFFFFF;
      color: #101010;
      border-radius: 999px;
      padding: 0.375rem 0.75rem;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 0.75rem;
      white-space: nowrap;
    }

    .pj__section .pj__title {
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 1.25rem;
      color: #fff;
      line-height: 1.5;
      margin: 0;
    }

    .pj__section .pj__item-header {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      flex: 1 1 0;
      min-width: 0;
    }

    .pj__section .pj__desc {
      font-family: 'Area', sans-serif;
      font-weight: 400;
      font-size: 0.9375rem;
      line-height: 1.4;
      color: #fff;
      margin: 0;
    }

    /* ---------- Collage ---------- */
    .pj__section .pj__collage {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    /* min-width: 0 is required here — without it, a flex item's default
       min-width is "auto", which factors in its content's intrinsic
       size. The <img> inside carries width/height attributes matching
       the ORIGINAL uploaded image's full pixel dimensions (often much
       larger than the box), so the flex item was refusing to shrink
       below that intrinsic size and blowing out of its flex-basis —
       that's what was actually causing the visible stretching/distortion,
       not object-fit (which was already correct). */
    .pj__section .pj__main-image {
      flex: 1 1 0;
      min-width: 0;
      max-width: 30rem;
      aspect-ratio: 1 / 1;
      border-radius: 2rem;
      overflow: hidden;
    }

    .pj__section .pj__main-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .pj__section .pj__peek-column {
      flex: 1 1 0;
      min-width: 0;
      max-width: 30rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* Same fix as .pj__main-image above, but min-height: 0 since this
       flex item sits in a COLUMN-direction container (.pj__peek-column),
       so it's the intrinsic image height that was forcing it to overflow
       its flex-basis, not width. */
    .pj__section .pj__peek-image {
      width: 100%;
      min-height: 0;
      aspect-ratio: 480 / 228;
      border-radius: 2rem;
      overflow: hidden;
      opacity: 0.8;
    }

    .pj__section .pj__peek-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ---------- Mobile (per Figma node 109-4979) ---------- */
    @media (max-width: 989px) {
      .pj__section {
        padding: 2.5rem 1rem;
      }

      /* Desktop bg never shows on mobile, even if desktop_bg_image is
         set; mobile bg shows here instead when mobile_bg_image is set. */
      .pj__section .pj__bg--desktop {
        display: none;
      }

      .pj__section--has-mobile-bg .pj__bg--mobile {
        display: block;
      }

      .pj__section--has-mobile-bg .pj__heading,
      .pj__section--has-mobile-bg .pj__description,
      .pj__section--has-mobile-bg .pj__title,
      .pj__section--has-mobile-bg .pj__desc {
        color: #FFFFFF;
      }

      /* Same reasoning as the desktop bg variant above — keep the
         always-visible backbone faint enough that it doesn't read as
         an already-complete progress line before the fill has grown. */
      .pj__section--has-mobile-bg .pj__list::before {
        background-color: #FFFFFF;
        opacity: 0.15;
      }

      /* Outer gap between the intro block and the row block is 24px on
         mobile, not the desktop 40px it was inheriting unmodified. */
      .pj__section .pj__content {
        gap: 1.5rem;
      }

      .pj__section .pj__item-top {
        gap: 0.75rem;
      }

      .pj__section .pj__intro {
        flex-direction: column;
        gap: 1.5rem;
      }

      .pj__section .pj__heading {
        font-size: 1.5rem; /* 24px */
        letter-spacing: -0.015rem; /* -0.24px */
      }

      /* Mobile does NOT upsize the italic runs like desktop does. */
      .pj__section .pj__heading em,
      .pj__section .pj__heading i {
        font-size: 1.5rem; /* 24px */
      }

      .pj__section .pj__description {
        font-size: 0.875rem; /* 14px */
      }

      .pj__section .pj__row {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
      }

      .pj__section .pj__timeline {
        flex: 1 1 auto;
        max-width: 100%;
      }

      /* Collage stays a ROW on mobile (main image + stacked peek column
         side by side), matching Figma. Fixed height matches Figma's
         261px so the row has a consistent height to split via flex. */
      .pj__section .pj__collage {
        height: 16.3125rem; /* 261px */
        flex: auto;
      }

      .pj__section .pj__main-image {
        max-width: none;
        width: auto;
        height: 100%;
        aspect-ratio: unset;
      }

      .pj__section .pj__peek-column {
        max-width: none;
        height: 100%;
      }

      .pj__section .pj__peek-image {
        flex: 1 1 0;
        aspect-ratio: unset;
        border-radius: 1rem; /* 16px, was wrongly inheriting desktop's 32px */
      }
    }
/* END_SECTION:product-journey */

/* START_SECTION:stats-metrics (INDEX:95) */
.stm__section {
    background-color: var(--stm-bg-color, #EDEDE1);
    padding: 5.625rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 10rem;
    overflow: clip;
  }

  .stm__section.stm__round-top {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
  }

  .stm__inner {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
        width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    display: flex;
    gap: 10rem;
    flex-direction: column;
  }

  /* ---------- header row: heading/CTA + made-in/seals ---------- */
  .stm__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 7.5rem;
    width: 100%;
  }

  .stm__heading-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .stm__heading {
    margin: 0;
    max-width: 43.8125rem;
    font-family: 'Area Semibold', 'Area', sans-serif;
    font-weight: 600;
    font-size: 2.5rem;
    line-height: 1.2;
    letter-spacing: -0.025rem;
    color: var(--stm-text-color, #000000);
  }

  .stm__heading em,
  .stm__heading i {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 2.75rem;
    line-height: 1.2;
    font-weight:400;
  }

  .stm__heading--mobile {
    display: none;
  }

  .stm__button {
    --stm-fill: #000000;
    --stm-text-idle: #000000;
    --stm-text-hover: #ffffff;
    --stm-border-hover: #000000;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid #000000;
    border-radius: 6.25rem;
    padding: 0.5rem 1.125rem;
    text-decoration: none;
    background: transparent;
    color: var(--stm-text-idle);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: color 0.3s cubic-bezier(0.7, 0, 0.2, 1),
                border-color 0.3s cubic-bezier(0.7, 0, 0.2, 1);
  }

  .stm__button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stm-fill);
    transform: translate3d(0, 100%, 0);
    transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
    z-index: -1;
    will-change: transform;
  }

  .stm__button:hover::before,
  .stm__button:focus-visible::before {
    transform: translate3d(0, 0, 0);
  }

  .stm__button:hover,
  .stm__button:focus-visible {
    color: var(--stm-text-hover);
    border-color: var(--stm-border-hover);
  }



  .stm__button-label {
    font-family: 'Area Medium', 'Area', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
    color: inherit;
    white-space: nowrap;
  }

  .stm__button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: inherit;
  }

  .stm__button-icon svg {
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
    display: block;
    transition: transform 0.3s cubic-bezier(0.7, 0, 0.2, 1);
  }

  .stm__meta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .stm__made-in {
    margin: 0;
    max-width: 16.5rem;
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -0.01rem;
    color: #101010;
  }

  .stm__seals {
    display: flex;
    align-items: flex-start;
    gap: 1.3075rem;
  }

  .stm__seal {
    width: 3.6875rem;
    height: 3.6875rem;
    flex-shrink: 0;
  }

  .stm__seal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ---------- metrics grid ---------- */
  .stm__metrics-grid {
    display: grid;
    grid-template-columns: repeat(var(--stm-metric-count, 4), 1fr);
    gap: 2.5rem;
    width: 100%;
  }

  .stm__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
    position: relative;
    padding-left: 2.5rem;
  }

  .stm__metric:first-child {
    padding-left: 0;
  }

  .stm__metric:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000000;
  }

  .stm__metric-value {
    margin: 0;
    font-family: 'Instrument Serif', serif;
    font-weight: 400;
    line-height: 0.9;
    color: #111112;
    white-space: nowrap;
  }

  .stm__metric-value .stm__metric-number {
    font-size: 6.875rem;
  }

  .stm__metric-value .stm__metric-suffix {
    font-size: 3rem;
  }

  .stm__metric-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }

  .stm__metric-title {
    margin: 0;
    font-family: 'Area Bold', 'Area', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.3;
    color: #111112;
    width: 100%;
  }

  .stm__metric-description {
    margin: 0;
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #6b7280;
    width: 100%;
  }

  /* ---------- mobile (<= 749px) ---------- */
  @media screen and (max-width: 749px) {
    .stm__section {
      padding: 3.75rem 0;
      gap: 1.5rem;
              border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .stm__inner {
      padding: 0 1.25rem;
      gap:1.5rem;
    }

    .stm__header {
      flex-direction: column;
      align-items: flex-start;
      gap: 3.75rem;
    }

    .stm__heading {
      max-width: 21.875rem;
      font-size: 1.75rem;
      letter-spacing: -0.0175rem;
    }

    .stm__heading em,
    .stm__heading i {
      font-size: 1.75rem;
    }

    .stm__heading--desktop {
      display: none;
    }

    .stm__heading--mobile {
      display: block;
    }

    .stm__button-label {
      font-size: 0.875rem;
    }

    .stm__made-in {
      max-width: 14.5rem;
      font-size: 0.875rem;
      letter-spacing: -0.00875rem;
    }

    .stm__seals {
      gap: 1.108rem;
    }

    .stm__seal {
      width: 3.125rem;
      height: 3.125rem;
    }

    .stm__metrics-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }

    .stm__metric {
      padding-left: 0;
    }

    .stm__metric:not(:first-child)::before {
      content: none;
    }

    .stm__metric-value .stm__metric-number {
      font-size: 3.75rem;
    }

    .stm__metric-value .stm__metric-suffix {
      font-size: 1.25rem;
    }

    .stm__metric-title {
      font-size: 0.875rem;
    }

    .stm__metric-description {
      font-size: 0.75rem;
    }
  }
/* END_SECTION:stats-metrics */