/** Shopify CDN: Minification failed

Line 3478:19 Unexpected "{"
Line 3478:28 Expected ":"
Line 3478:35 Unexpected "{"
Line 3483:21 Unexpected "{"
Line 3483:30 Expected ":"
Line 3488:19 Expected ":"
Line 3488:20 Expected identifier but found ":"
Line 3492:21 Unexpected "{"
Line 3492:30 Expected ":"
Line 3505:21 Unexpected "{"
... and 48 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:custom-product-page (INDEX:36) */
.ph {
                    background-color: #fffff1;
              padding: 4rem 0rem;
              line-height: normal;
              width: 100%;
              padding: 1rem 2rem;
              margin-left: auto;
              margin-right: auto;
              box-sizing: border-box;
                }

                .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, 1200px) minmax(0, 452px);
              gap: 32px;
              padding: 0rem 2rem;
              align-items: start;
              width: 100%;

              max-width: 90rem;
              /* margin: 0rem auto; */
            }
                /* ---------------- 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;
          flex-wrap: wrap;
          align-items: center;
          gap: .5rem;
          width: 100%;
          max-width: 90rem;
           padding: 0rem 2rem;
        }

            .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%;

                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: 100%;
          min-width: 0;
        }

                .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: 1.25rem;
                }

                .ph .ph__benefits {
                  display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        max-width: 100%;   /* પહેલાં 27.125rem હતું */
        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: 28px;
                height: 28px;
                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;
                      letter-spacing: 0%;
          line-height: 150%;
      }


                .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: 10px;
        color: rgba(16, 16, 16, 0.7) !important;
        letter-spacing: -1%;
                }

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

                /* ---------------- Pack size cards ---------------- */
               .ph .ph__packs {
            display: flex;
            flex-direction: column;
            gap: 1.4225rem;
            width: 100%;
            max-width: 100%;
          }

                .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: #ffffff;
                  border: 0.3px solid #101010;
                  border-radius: 0.375rem; /* 6px */
                  padding: 0.356rem 0.711rem; /* ~5.7px / 11.4px */
                      line-height: 100%;
              letter-spacing: 0%;
                }

                .ph .ph__delivery-icon {
                  display: flex;
                  flex-shrink: 0;
                  width: 28px;
                  height: 28px;
                  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: 11.38px;
      align-items: stretch;
      width: 100%;
      max-width: 434px;
    }

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

    .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;
      justify-content: space-between;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      border: 0.71px solid #eaeaec;
      border-radius: 11.38px;
      background: #ffffff;
      cursor: pointer;
      transition: border-color 0.15s ease;
    }

              .ph .ph__pack-radio:checked + .ph__pack-card {
      border: 1px 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;
      left: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      padding: 2.85px 8.53px;
      border-radius: 14.23px;
      background: #c2f7a5;
      color: #1e5813;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 8px;
      line-height: 100%;
      letter-spacing: 0;
      text-transform: uppercase;
      white-space: nowrap;
      z-index: 2;
    }

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

    /* ───────── TOP HALF (Figma: card-top-half) ───────── */
    .ph .ph__pack-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 5.69px;
      flex: 1;
      box-sizing: border-box;
      padding: 20px 11.43px 14.28px;
      text-align: center;
    }

    .ph .ph__pack-name { display: none; }

    /* "Pack of 1" / subtitle → Area 500, 16px */
    .ph .ph__pack-subtitle {
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0;
      color: #101010;
      white-space: nowrap;
    }

    /* price-row → gap 5.69px, height 15px */
    .ph .ph__pack-price-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5.69px;
      min-height: 15px;
    }

    /* ₹7498 → Inter 500, 10.04px, strikethrough, #88919A */
    .ph .ph__pack-compare {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 10.04px;
      line-height: 100%;
      color: #88919a;
      text-decoration: line-through;
      white-space: nowrap;
    }

    /* ₹5759 → Inter 700, 11.38px */
    .ph .ph__pack-price {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 11.38px;
      line-height: 100%;
      color: #101010;
      white-space: nowrap;
    }

    /* ───────── SERVING BAR (Figma: serving-bar, bottom radius 10px) ───────── */
    .ph .ph__pack-bottom {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      min-height: 32px;
      padding: 10px 11.38px;
      background: #101010;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 10px;
      line-height: 100%;
      letter-spacing: 0;
      white-space: nowrap;
      border-radius: 0 0 10px 10px;
      flex-direction: column;
      gap: 4px;
    }

    .ph .ph__pack-extra {
      font-weight: 500;
      font-size: 9px;
      color: #c2f7a5;
    }
    @media screen and (max-width: 749px) {
      .ph .ph__packs-row {
        max-width: 100%;
        gap: 8px;
        flex-wrap: nowrap;
      }

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

      .ph .ph__pack-top {
        padding: 16px 6px 12px;
        gap: 4px;
      }

      .ph .ph__pack-subtitle {
        font-size: 14px;
        white-space: normal;
      }

      .ph .ph__pack-compare { font-size: 9px; }
      .ph .ph__pack-price   { font-size: 11px; }

      .ph .ph__pack-bottom {
        min-height: 28px;
        padding: 8px 6px;
        font-size: 9px;
      }
    }

                /* ---------------- 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: 0rem !important;
                  justify-content: center;
            text-align: center;
                }

                .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 {

                  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 */
                            left: 4px;
                  }

                  .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 */
                        letter-spacing: 0%;
          line-height: 150%;
      }
                  }

                  .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;
                      letter-spacing: 0%;
          line-height: 150%;
      }
                }

                /* 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;
                      line-height: 100%;
              letter-spacing: 0%;
                }

                .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;
                  text-align: left;
                }

                .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) {
    .ph .ph__title-block {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin-top: -0.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(16, 16, 16, 0.4);
    }
    .ph .ph__benefit-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem !important;
        height: 1.25rem !important;
        flex: 0 0 1.5rem;
        box-sizing: border-box;
    }
    ph .ph_badge--seller, .ph .phpack-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.5rem;
      text-transform: uppercase;
      padding: 0.178rem 0.53rem;
      border-radius: 0.889rem;
      white-space: nowrap;
      -webkit-text-stroke: 0.3px currentColor;
  }
  ph .ph__benefits-price-wrap {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
  }
  
 .ph .ph__packs-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
              /* 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:47) */
/* ==========================================================
       BASE / DESKTOP
       ========================================================== */

    .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-top: 90px !important;
      padding-bottom: 90px !important;
      position: relative;
      z-index: 1;
    }

    /* ---------- Header ---------- */

    .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.25rem 1rem 0.625rem;
      border: 0.0625rem solid #ffffff;
      border-radius: 6.25rem;
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 400;
      font-size: 1rem;
      line-height: 1rem;
      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 ---------- */

    .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;
    }

    .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: 10px;
      line-height: normal;
      white-space: nowrap;
      pointer-events: none;
    }

    /* ---------- Panels ---------- */

    .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;
    }

    /* ---------- Gallery ---------- */

    .sbc__gallery-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.625rem;
      flex: 1 1 26rem;
      max-width: 670px;
    }

    .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;
  aspect-ratio: 1 / 1; /* apni requirement ke hisaab se: 4 / 5, 1 / 1, 16 / 9 etc. */
}

.sbc__gallery-image,
.sbc__gallery-placeholder {
  width: 100%;
  height: 100%;          /* auto ki jagah 100% */
  object-fit: cover;     /* crop hoke fill hoga; poori image dikhani ho to `contain` */
  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: 1rem;
      line-height: normal;
      padding: 0.25rem 0.75rem;
      border-radius: 0.9799rem;
    }

    .sbc__dots {
      display: none;
      align-items: center;
      gap: 0.25rem;
      position: relative;
      z-index: 2;
    }

    .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);
      border-color: rgba(255, 255, 255, 0.7);
    }

    /* ---------- Info column ---------- */

    .sbc__info-col {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* gap: 2rem; */
      max-width: 40%;
      padding: 2.4375rem 0;
      flex: 0 0 454px;
      width: 100% !important;
      max-width: 454px;
    }

    .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: 12px;
      line-height: normal;
    }

    .sbc__badges {
      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: 8px;
      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-top: 24px;
      margin-bottom: 32px;
    }

    /* ---------- Benefits ---------- */

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

    .sbc__benefit {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      min-width: 0;
      height: 100%;
      overflow: hidden;
    }

    .sbc__benefit-label {
      color: #ffffff;
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 1rem;
      line-height: 1.15;
      min-width: 0;
      text-wrap: balance;
    }

    .sbc__benefit-icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
    }

    .sbc__benefit-icon img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      filter: brightness(0) invert(1);
    }

    /* ---------- Price ---------- */

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

    .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;
    }

    /* ---------- Pack size ---------- */

    .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: 11.38px;
      width: 100%;
    }

    .sbc__pack {
      position: relative;
      flex: 0 0 136.62px;
      width: 136.62px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      background: #ffffff;
      border: 0 !important;
      outline: 0 !important;
      -webkit-appearance: none;
      appearance: none;
      box-shadow: none;
      border-radius: 11.38px;
      cursor: pointer;
      overflow: visible;
    }

    .sbc__pack::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 11.38px;
      border: 1.5px solid transparent;
      pointer-events: none;
      z-index: 3;
      display: block !important;
    }

    .sbc__pack.sbc__pack--active::after {
      border-color: #ffffff;
    }

    .sbc__pack.sbc__pack--active {
      background: transparent !important;
    }

    .sbc__pack.sbc__pack--active .sbc__pack-top {
      background: transparent;
      border-radius: 11.38px 11.38px 0 0;
    }

    .sbc__pack.sbc__pack--active .sbc__pack-sub,
    .sbc__pack.sbc__pack--active .sbc__pack-price,
    .sbc__pack.sbc__pack--active .sbc__pack-compare {
      color: #ffffff !important;
    }

    .sbc__pack.sbc__pack--active .sbc__pack-compare {
      opacity: 0.85;
      text-decoration: line-through;
    }

    .sbc__pack.sbc__pack--active .sbc__pack-bar,
    .sbc__pack.sbc__pack--active .sbc__pack-bar--dark {
      background: #ffffff !important;
      color: #101010 !important;
    }

    .sbc__pack--featured {
      background: #ffffff;
    }

    .sbc__pack-ribbon {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 2.85px 8.53px;
      border-radius: 14.23px;
      background: #c2f7a5;
      color: #1e5813;
      font-family: 'Area', sans-serif;
      font-weight: 700;
      font-size: 8px;
      line-height: normal;
      text-transform: uppercase;
      white-space: nowrap;
      -webkit-text-stroke: 0.3px currentColor;
      z-index: 2;
    }

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

    .sbc__pack-top {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 5.71px;
      width: 100%;
      box-sizing: border-box;
      padding: 20px 11.43px 14.28px 11.43px;
    }

    .sbc__pack-name {
      display: none;
    }

    .sbc__pack--featured .sbc__pack-name,
    .sbc__pack--featured .sbc__pack-sub {
      color: #101010;
    }

    .sbc__pack--active .sbc__pack-sub,
    .sbc__pack--active .sbc__pack-price {
      color: #ffffff;
    }

    .sbc__pack--active .sbc__pack-compare {
      color: rgba(255, 255, 255, 0.7);
    }

    .sbc__pack-sub {
      color: #101010;
      font-family: 'Area', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 19px;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
    }

    .sbc__pack-price-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5.71px;
      height: 15px;
    }

    .sbc__pack-compare {
      color: #88919a;
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 10.04px;
      line-height: 1;
      letter-spacing: 0;
      text-decoration: line-through;
      text-decoration-skip-ink: none;
    }

    .sbc__pack-price {
      color: #101010;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 12.05px;
      line-height: 1;
      letter-spacing: 0;
    }

    .sbc__pack-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      width: 100%;
      min-height: 32px;
      padding: 10px 11.43px;
      border-radius: 0 0 10px 10px;
      background: #ffffff;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 10px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: uppercase;
    }

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

    .sbc__pack--active .sbc__pack-bar--dark {
      background: #ffffff !important;
    }

    /* ---------- Action (CTA / view more / guarantee) ---------- */

    .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;
      margin-top: 22px;
    }

    .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;
    }

    .sbc__cta-label {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 0.8001rem;
      line-height: normal;
      transition: color 0.2s ease;
    }

    .sbc__view-more {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 40.6px;
      background: transparent;
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-size: 12.8px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      text-underline-offset: 3px;
      border: 0;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.25s ease;
      letter-spacing: 0%;
    }

    .sbc__view-more:hover,
    .sbc__view-more:focus-visible {
      color: #f0f0f0;
      text-decoration: none;
    }

    .sbc__view-more:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
    }

    .sbc__guarantee {
      display: flex;
      align-items: center;
      gap: 0.2667rem;
      padding: 0.3556rem 0.7113rem;
      border-radius: 0.375rem;
      background: #f6f7f9;
      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;
    }

    /* ==========================================================
       MOBILE  (max-width: 749px)
       ========================================================== */

    @media screen and (max-width: 749px) {
      .sbc__inner {
        padding: 2rem 1rem !important;
        gap: 1rem;
      }

      .sbc__inner.page-width {
        width: 100%;
        max-width: 390px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
      }

      /* Header */
      .sbc__eyebrow--desktop {
        display: none;
      }

      .sbc__eyebrow--mobile {
        display: inline-flex;
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        margin-right: auto;
      }

      .sbc__heading--desktop {
        display: none;
      }

      .sbc__heading--mobile {
        display: block;
        font-size: 1.75rem;
        letter-spacing: -1%;
        max-width: 100%;
        line-height: 120%;
        font-family: Area;
        font-weight: 600;
        text-align: start;
      }

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

      /* Tabs */
      .sbc__tab--active {
        background: #fffffd;
        color: #101010;
        height: 46px;
        width: 145px;
      }

      /* Content / gallery */
      .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;
      }

      /* mobile slide ratio (change to 4 / 5 etc. if needed) */
      .sbc__gallery-slide {
        aspect-ratio: 1 / 1;
      }

      /* FIX: height 100% (was auto) so mobile keeps the fixed ratio */
      .sbc__gallery-image,
      .sbc__gallery-placeholder {
        height: 100%;
        border-radius: 0.5511rem;
      }

      .sbc__gallery-badge {
        font-size: 0.875rem;
        top: 1rem;
        left: 1rem;
        padding: 0.25rem 0.75rem;
      }

      /* Info column */
      .sbc__info-col {
        max-width: 100%;
        padding: 0;
      }

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

      .sbc__badge--bestseller {
        font-size: 0.75rem;
      }

      .sbc__title {
        font-size: 1.75rem;
        letter-spacing: -0.0175rem;
      }

      /* Benefits */
      .sbc__benefits {
        grid-auto-rows: 2.25rem;
      }

      .sbc__benefit-label {
        font-size: 0.875rem;
        line-height: 1.15;
      }

      .sbc__benefit-icon {
        width: 24px;
        height: 24px;
      }

      .sbc__pack-row {
        gap: 11.38px;
        width: 100%;
      }

      .sbc__pack .sbc__pack-name {
        display: block;
        font-family: 'Area', sans-serif;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
        color: #101010;
      }

      .sbc__pack.sbc__pack--active .sbc__pack-name {
        color: #ffffff;
      }

      .sbc__pack {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        min-height: 123.44px;
        border-radius: 9.96px;
      }

      .sbc__pack::after {
        border-radius: 9.96px;
      }

      .sbc__pack-top {
        padding: 19px 11px 14px 11px;
        gap: 6px;
      }

      .sbc__pack-sub {
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: nowrap;
      }

      .sbc__pack-price-row {
        gap: 4px;
        flex-wrap: nowrap;
      }

      .sbc__pack-compare {
        font-size: 9px;
      }

      .sbc__pack-price {
        font-size: 11px;
      }

      .sbc__pack-bar {
        min-height: 31.92px;
        padding: 10px 4px;
        border-radius: 0 0 9.96px 9.96px;
        font-size: 9px;
      }

      .sbc__pack-ribbon {
        font-size: 7px;
        padding: 2.5px 6px;
      }

      /* CTA: white text on the black button (inverse of desktop) */
      .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;
      }

      .sbc__view-more {
        min-height: 44px;
        font-size: 12.8px;
      }
    }
/* END_SECTION:home-bundles */

/* START_SECTION:main-product (INDEX:76) */
@media screen and (max-width: 749px) {
           .ph__guarantee {
                                                  width: 100%;
                                                        max-width: 100%;
                                                        min-width: 0;
                                                   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-left: 10px !important; */
                                                        max-width: 25rem;
                                                       
                                                }
        .pdp-breadcrumbs {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .5rem;
        width: 100%;
        max-width: 1300px;
        margin: auto;
        margin-bottom: 0!important;
            /* padding: 0rem 4rem; */
    }
      .ph__price-row {
              display: flex;
              align-items: baseline;
              gap: 0.5rem;
                 white-space: nowrap!important;
          }
        /* gallery ne single swipeable carousel banavo */
        .product__media-list {
          display: flex !important;
          flex-wrap: nowrap;
          width: 100%;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -ms-overflow-style: none;
          gap: 0;
          margin: 0;
          padding: 0;
          border-radius: 1.653rem;
        }
        .product__media-list::-webkit-scrollbar { display: none; }

        .product__media-item {
          flex: 0 0 100% !important;
          width: 100% !important;
          max-width: 100% !important;
          scroll-snap-align: start;
          position: relative;
        }
.product-description-text {
    font-family: 'Area', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #000;
    padding-top: 12px;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(16, 16, 16, 0.4);
}
        /* image: 358/371 ratio, cover, rounded */
        .product-media-container,
        .product-media-container .product__media {
          width: 100%;
          max-width: 100%;
          border-radius: 0.551rem;
          overflow: hidden;
        }
        .product-media-container .product__media img {
          display: block;
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 358 / 371;
          object-fit: cover;
          border-radius: 0.551rem;
          filter: none !important;
          opacity: 1 !important;
        }

        /* zoom icon mobile ma chhupavo, thumbnails + arrows pan */
        .product__media-icon,
        .product__media-gallery-thumbs,
        .thumbnail-slider,
        .slider-buttons { display: none !important; }

        /* dots */
        .pm-dots {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.25rem;
          margin-top: 0.625rem;
        }
        .pm-dot {
          width: 0.8125rem;
          height: 0.25rem;
          border-radius: 999px;
          background: rgba(16, 16, 16, 0.3);
          transition: width 0.2s ease, background-color 0.2s ease;
        }
        .pm-dot.is-active {
          width: 2.4375rem;
          background: rgba(16, 16, 16, 0.7);
        }
      }
    /* ==========================================================
   MOBILE GALLERY DOTS: image ni niche, Figma jevi
   ========================================================== */
@media screen and (max-width: 749px) {
  product-info .product__media-wrapper .pm-dots {
    display: flex !important;
    position: static !important;   /* image ni upar nahi, niche */
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 0;
    pointer-events: none;
  }

  product-info .product__media-wrapper .pm-dot {
    display: block;
    flex: 0 0 auto;
    width: 13px;
    height: 4px;
    border-radius: 999px;
    background: rgba(16, 16, 16, 0.3);   /* inactive: grey */
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  product-info .product__media-wrapper .pm-dot.is-active {
    width: 39px;                          /* active: lambi dark line */
    background: rgba(16, 16, 16, 0.7);
  }
}
       @media screen and (max-width: 749px) {


     .ph__review-row .ph__badge,
      .ph__review-row .ph__badge--seller {
        position: static;
        top: auto;
        left: auto;
        flex: 0 0 auto;
        font-size: 0.6rem;
        padding: 0.178rem 0.53rem;
        white-space: nowrap;
        text-transform: uppercase;
      }

      .ph__rating-group {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        gap: 0.25rem;
      }

      .ph__rating {
        flex: 0 0 auto;
      }

      .ph__stars {
        letter-spacing: 0.04rem;
        font-size: 0.75rem;
      }

      .ph__review-count {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-size: 0.6875rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    /* ---------------- Mobile block 1: layout, gallery, typography ---------------- */
    @media screen and (max-width: 749px) {
      .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__benefit-icon img {
        width: 1.25rem;
        height: 1.25rem;
        object-fit: contain;
      }

      .ph {
        padding: 1.5rem 1rem;
      }

      .ph__content {
        margin-top: 1rem;
      }

      .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__gallery {
        display: none; /* desktop hero+grid hidden; mobile carousel shown instead */
      }

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

      .ph__mgallery {
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        width: 100%;
      }

      .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;
      }

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

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

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

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

      .ph__badge--bundle-mobile {
        font-size: 0.75rem;
                left: 4px;
      }

      .ph__mgallery-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;
      }

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

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

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

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

      .ph__title {
        font-size: 1.75rem;
        line-height: 1.2;
        letter-spacing: -0.0175rem;
      }

      .ph__description {
        font-size: 0.875rem;
      }

      .ph__benefit-label {
       font-family: 'Area', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    color: #000000;
    letter-spacing: 0%;
    line-height: 150%;
}
      span.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.5rem;
    text-transform: uppercase;
    padding: 0.178rem 0.53rem;
    border-radius: 0.889rem;
    white-space: nowrap;
    -webkit-text-stroke: 0.3px currentColor;
}

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

      .ph__pack-subtitle {
        font-size: 0.9375rem;
      }

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

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

      .ph__accordion-summary {
        font-size: 0.875rem;
      }
    }

    /* ---------------- Mobile block 2: overflow fixes ---------------- */
    @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__content,
      .ph__content-row,
      .ph__info,
      .ph__form,
      .ph__packs,
      .ph__packs-cards-wrap,
      .ph__accordion {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

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

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

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

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

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

      /* Pack cards */
       .ph__packs-row {
    max-width: 100%;
    gap: 8px;
    flex-wrap: nowrap;
  }

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

  .ph__pack-top {
    padding: 14px 6px 10px;
    gap: 4px;
  }

 .ph__pack-name {
    font-family: 'Area', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0;
    color: #101010;
    white-space: nowrap;
    -webkit-text-stroke: 0;
}

  .ph__pack-compare { font-size: 9px; }
  .ph__pack-price   { font-size: 11px; }

  .ph__pack-bottom {
    min-height: 28px;
    padding: 8px 6px;
    font-size: 9px;
  }

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

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

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

      .ph__delivery-chip {
        min-width: 0;
        padding: 0.356rem 0.5rem;
            line-height: 100%;
    letter-spacing: 0%;
      }

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

      /* Guarantee */
      .ph__guarantee {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        text-align: left!important;
      }

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

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

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

    /* ---------------- Mobile block 3: Best Seller + review row ---------------- */
    @media screen and (max-width: 749px) {


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

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

      .ph__rating {
        flex: 0 0 auto;
      }

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

      .ph__review-count {
        flex: 0 1 auto;
        margin: 0;
        font-size: 0.75rem;
        white-space: nowrap;
      }
    }
    /* ==========================================================
   DELIVERY GRID — Figma "Frame 32" / "installment-hint"
   ========================================================== */
.ph .ph__delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  align-items: stretch;      /* ek row na banne chip same height */
  gap: 8px;                  /* row gap 8 + column gap 8 */
  width: 100%;
  min-width: 0;
}

/* display:grid ae [hidden] ne override karyu hatu — aa fix chhe */
.ph .ph__delivery-grid[hidden] {
  display: none;
}

.ph .ph__delivery-chip {
  display: flex;
  flex-direction: row;
  align-items: center;       /* icon + text vertically center */
  gap: 4.27px;
  min-width: 0;
  min-height: 31.38px;       /* 20px icon + 5.69*2 padding */
  padding: 5.69px 11.38px;
  background-color: #F6F7F9;
  border: 0.3px solid #101010;
  border-radius: 6px;
  box-sizing: border-box;
}

.ph .ph__delivery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;            /* icon kyarey shrink nahi thay */
  width: 20px;
  height: 20px;
  color: #101010;
}

.ph .ph__delivery-icon svg,
.ph .ph__delivery-icon img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ph .ph__delivery-text {
  flex: 1 1 auto;
  min-width: 0;              /* wrap thava mate jaruri */
  font-family: 'Area', sans-serif;
  font-weight: 800;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 0;
  color: #101010;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  margin: 0;
}

/* ---------------- Mobile ---------------- */
@media screen and (max-width: 749px) {
  .ph .ph__delivery-grid {
    gap: 8px;
  }

  .ph .ph__delivery-chip {
    padding: 5.69px 8px;     /* nana screen ma text ne vadhu jagya */
    align-items: center;     /* 2 line hoy to pan icon vachche rahe */
  }

  .ph .ph__delivery-text {
    line-height: 1.2;        /* 2 line hoy to text chipke nahi */
  }
}
/* ==========================================================
   DELIVERY GRID — Figma "Frame 32" / "installment-hint"
   ========================================================== */
product-info .ph__delivery-wrap {
  margin: 16px 0;
}

product-info .ph__delivery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

product-info .ph__delivery-grid[hidden] {
  display: none !important;
}

product-info .ph__delivery-chip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4.27px;
  width: 100%;
  min-width: 0;
  min-height: 31.38px;
  padding: 5.69px 11.38px;
  background: #F6F7F9;
  border: 0.3px solid #101010;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
}

product-info .ph__delivery-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  color: #101010;
}

product-info .ph__delivery-icon img,
product-info .ph__delivery-icon svg {
  display: block;
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  object-fit: contain;
}

product-info .ph__delivery-text {
  flex: 1 1 0;
  min-width: 0;
  font-family: 'Area', sans-serif;
  font-weight: 800;
  font-size: 10px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #101010;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  margin: 0;
}

/* ---------------- Mobile ---------------- */
@media screen and (max-width: 749px) {
  product-info .ph__delivery-chip {
    padding: 5.69px 8px;
    gap: 4px;
  }
}
/* END_SECTION:main-product */

/* START_SECTION:pdp-ingredients (INDEX:90) */
.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:91) */
.lt {
    background-color: #FFFEF6;
    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;
        width: 100%;
    }

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

/* START_SECTION:pdp-wellness-hero (INDEX:94) */
#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; */
    padding-top: 4rem!important;
     padding-bottom;: 4rem!important
    
  }

  #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;
     
    }

  .whc__inner {
    max-width: 100%;
    margin: 2.5rem auto;
    padding: 0!important;
}

    #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:99) */
.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: 2rem 0rem;
      }

      /* 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: 2rem;
        letter-spacing: -1%;
        font-weight: 600;
      }

      /* 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:106) */
.stm__section {
    background-color: var(--stm-bg-color, #EDEDE1);
    display: flex;
    flex-direction: column;
    gap: 10rem;
    overflow: clip;
        padding-top: 90px;
    padding-bottom: 90px;
  }

  .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: 7.55rem;
    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: 400;
    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 ---------- */
/* ---------- METRICS GRID ---------- */

.stm__metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2.5rem;
  width: 100%;
}

.stm__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0;

  /* REMOVE OLD VERTICAL DIVIDER */
  border: 0;
}

/* Completely remove vertical lines */
.stm__metric::before,
.stm__metric:not(:first-child)::before {
  display: none !important;
  content: none !important;
}

/* 8%, 30%, 98% */
.stm__metric-value {
  margin: 0;
  width: 298px;
  font-family: 'Area', sans-serif;
  font-weight: 400;
  font-size: 2.5rem; /* 40px */
  line-height: 90%;
  letter-spacing: 0;
  color: #111112;
  white-space: nowrap;
  padding-bottom: 1rem;
  border-bottom: 0.5px dashed #6B7280;
}

.stm__metric-value .stm__metric-number {
  font-size: inherit;
  line-height: inherit;
}

.stm__metric-value .stm__metric-suffix {
  font-size: inherit;
  line-height: inherit;
}

/* Content below horizontal line */
.stm__metric-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;

  width: 100%;
  padding-top: 1rem;
}

/* Average revenue boost */
.stm__metric-title {
  margin: 0;
  width: 100%;

  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 1.125rem; /* 18px */
  line-height: 130%;
  letter-spacing: 0;

  color: #111112;
}

/* Description */
.stm__metric-description {
  margin: 0;
  width: 100%;

  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 150%;
  letter-spacing: 0;

  color: #6B7280;
}
@media screen and (max-width: 749px) {

  /* MAIN SECTION */
  .stm__section {
    padding: 40px 20px;
    gap: 0;
  }

  .stm__inner {
    width: 100%;
    max-width: 100%;
    margin: 0;
    gap: 40px;
  }

  /* HEADER */
  .stm__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
  }

  .stm__heading-col {
    width: 100%;
    gap: 24px;
  }

  /* Mobile heading show */
  .stm__heading--mobile {
    display: block;
  }

  .stm__heading {
    width: 100%;
    max-width: 24ch;
    margin: 0;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0;
  }

  .stm__heading em,
  .stm__heading i {
    font-size: 18px;
    line-height: 24px;
  }

  /* BUTTON */
  .stm__button {
    padding: 10px 24px;
    min-height: 40px;
  }

  .stm__button-label {
    font-size: 13px;
    line-height: 1;
  }

  .stm__button-icon {
    width: 12px;
    height: 12px;
  }


  /* STATS 2 x 2 */
  .stm__metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
    row-gap: 30px;
    width: 100%;
  }

  .stm__metric {
    width: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* 8+, 12, 300+, 30+ */
  .stm__metric-value {
    width: 100%;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 0.5px dashed #6B7280;

    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
  }

  .stm__metric-value .stm__metric-number,
  .stm__metric-value .stm__metric-suffix {
    font-size: inherit;
    line-height: inherit;
  }

  /* Text below dotted line */
  .stm__metric-meta {
    width: 100%;
    padding-top: 10px;
    gap: 8px;
  }

  .stm__metric-title {
    width: 100%;
    margin: 0;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
  }

  .stm__metric-description {
    width: 100%;
    margin: 0;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 400;
  }

}
@media screen and (max-width: 749px) {
  .stm__metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .stm__metric {
    padding: 0;
  }

  .stm__metric::before,
  .stm__metric:not(:first-child)::before {
    display: none !important;
    content: none !important;
  }

  .stm__metric-value {
    font-size: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.5px dashed #000000;
  }

  .stm__metric-value .stm__metric-number,
  .stm__metric-value .stm__metric-suffix {
    font-size: inherit;
  }

  .stm__metric-meta {
    padding-top: 0.75rem;
    gap: 0.5rem;
  }

  .stm__metric-title {
    font-size: 0.875rem;
    line-height: 130%;
  }

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