/** Shopify CDN: Minification failed

Line 14671:2 Unexpected "{"
Line 14671:3 Expected identifier but found "%"
Line 14672:58 Unexpected "/"
Line 14674:69 Unterminated string token
Line 14677:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-belief (INDEX:0) */
.about-belief {
    background: var(--ab-bg, #FFFFFF);
    color: var(--ab-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .about-belief { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-belief__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-belief__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
  }

  .about-belief__copy { display: contents; }
  @media (min-width: 1024px) {
    .about-belief__copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      text-align: center;
      padding: 36px;
    }
  }
  .about-belief__title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    order: 1;
  }
  @media (min-width: 1024px) {
    .about-belief__title { font-size: 32px; line-height: 41px; font-weight: 400; max-width: 460px; }
  }
  .about-belief__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 24px;
    color: var(--ab-sub, #454545);
    text-align: center;
    margin: 0;
    order: 3;
  }
  @media (min-width: 1024px) {
    .about-belief__text { font-size: 16px; line-height: 26px; max-width: 374px; }
  }

  .about-belief__collage {
    position: relative;
    width: 100%;
    aspect-ratio: 662 / 718;
    order: 2;
  }
  .about-belief__polaroid {
    position: absolute;
    margin: 0;
    background: #FFFFFF;
    padding: 2.4%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }
  .about-belief__polaroid--1 { left: 0; top: 1.8%; width: 59.2%; transform: rotate(-1.5deg); z-index: 1; }
  .about-belief__polaroid--2 { left: 47.2%; top: 23.9%; width: 56.6%; transform: rotate(2deg); z-index: 2; }
  .about-belief__polaroid--3 { left: 26.4%; top: 62.4%; width: 36.3%; transform: rotate(-1.5deg); z-index: 3; }
  .about-belief__polaroid-img,
  .about-belief__polaroid-placeholder {
    width: 100% !important;
    height: auto;
    display: block;
    background: #EDEDED;
  }
  .about-belief__polaroid--1 .about-belief__polaroid-img,
  .about-belief__polaroid--1 .about-belief__polaroid-placeholder { aspect-ratio: 371 / 364; object-fit: cover; }
  .about-belief__polaroid--2 .about-belief__polaroid-img,
  .about-belief__polaroid--2 .about-belief__polaroid-placeholder { aspect-ratio: 348 / 276; object-fit: cover; }
  .about-belief__polaroid--3 .about-belief__polaroid-img,
  .about-belief__polaroid--3 .about-belief__polaroid-placeholder { aspect-ratio: 224 / 205; object-fit: cover; }

  .about-belief__label {
    position: absolute;
    bottom: -5%;
    background: #FFFFFF;
    border: 4px solid #111111;
    border-radius: 50%;
    padding: 6px 20px;
    font-family: 'Permanent Marker', cursive;
    font-size: clamp(13px, 1.35vw, 26px);
    line-height: 1.2;
    text-transform: uppercase;
    color: #111111;
    white-space: nowrap;
    transform: rotate(-2deg);
  }
  .about-belief__polaroid--1 .about-belief__label { left: 18%; }
  .about-belief__polaroid--2 .about-belief__label { left: 30%; bottom: -3%; transform: rotate(1.5deg); }
  .about-belief__polaroid--3 .about-belief__label { left: 12%; bottom: -8%; }
  @media (max-width: 1023px) {
    .about-belief__label { border-width: 3px; padding: 4px 14px; font-size: clamp(12px, 3.6vw, 15px); }
  }
/* END_SECTION:about-belief */

/* START_SECTION:about-built-for (INDEX:1) */
.about-bf {
    background: var(--abf-bg, #FFFFFF);
    color: var(--abf-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .about-bf { padding: 0 clamp(40px, 14.58vw, 280px) 60px; }
  }
  .about-bf__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-bf__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
  }

  .about-bf__content { display: contents; }
  @media (min-width: 1024px) {
    .about-bf__content {
      display: flex;
      flex-direction: column;
      gap: 32px;
      padding: 36px;
    }
  }
  .about-bf__head { display: flex; flex-direction: column; gap: 8px; }
  @media (max-width: 1023px) {
    .about-bf__head { order: 1; }
  }
  @media (min-width: 1024px) {
    .about-bf__head { gap: 12px; }
  }
  .about-bf__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-bf__title { font-size: 48px; line-height: 59px; letter-spacing: -1px; text-align: left; }
  }
  .about-bf__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--abf-sub, #454545);
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-bf__text { font-size: 16px; line-height: 26px; text-align: left; }
  }
  .about-bf__bullets {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (max-width: 1023px) {
    .about-bf__bullets { order: 3; }
  }
  .about-bf__bullet { display: flex; align-items: flex-start; gap: 8px; }
  .about-bf__bullet-icon { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; }
  .about-bf__bullet-icon svg { width: 100%; height: 100%; min-width: 16px; min-height: 16px; flex-shrink: 0; }
  @media (min-width: 1024px) {
    .about-bf__bullet-icon { width: 20px; height: 20px; }
  }
  .about-bf__bullet-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
  }
  @media (min-width: 1024px) {
    .about-bf__bullet-text { font-size: 16px; line-height: 24px; }
  }

  .about-bf__collage {
    position: relative;
    width: 100%;
    aspect-ratio: 664 / 588;
  }
  @media (max-width: 1023px) {
    .about-bf__collage { order: 2; }
  }
  .about-bf__polaroid {
    position: absolute;
    margin: 0;
    background: #FFFFFF;
    padding: 3.5%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }
  .about-bf__polaroid--1 { left: -5%; top: 21.3%; width: 39.5%; transform: rotate(-4deg); z-index: 1; }
  .about-bf__polaroid--2 { left: 34.3%; top: 2.3%; width: 30.9%; transform: rotate(2deg); z-index: 2; }
  .about-bf__polaroid--3 { left: 70.9%; top: 19%; width: 32%; transform: rotate(3deg); z-index: 2; }
  .about-bf__polaroid--4 { left: 37.4%; top: 48%; width: 30.8%; transform: rotate(-2deg); z-index: 3; }
  .about-bf__polaroid-img,
  .about-bf__polaroid-placeholder {
    width: 100% !important;
    height: auto;
    display: block;
    background: #EDEDED;
    object-fit: cover;
  }
  .about-bf__polaroid--1 .about-bf__polaroid-img, .about-bf__polaroid--1 .about-bf__polaroid-placeholder { aspect-ratio: 231 / 301; }
  .about-bf__polaroid--2 .about-bf__polaroid-img, .about-bf__polaroid--2 .about-bf__polaroid-placeholder { aspect-ratio: 174 / 240; }
  .about-bf__polaroid--3 .about-bf__polaroid-img, .about-bf__polaroid--3 .about-bf__polaroid-placeholder { aspect-ratio: 202 / 269; }
  .about-bf__polaroid--4 .about-bf__polaroid-img, .about-bf__polaroid--4 .about-bf__polaroid-placeholder { aspect-ratio: 175 / 251; }
  .about-bf__scribble { position: absolute; color: #121212; z-index: 4; }
  .about-bf__scribble--1 { left: 57%; top: 39.8%; width: 18.5%; }
  .about-bf__scribble--2 { left: 21.2%; top: 42.6%; width: 19.5%; }
/* END_SECTION:about-built-for */

/* START_SECTION:about-certifications (INDEX:2) */
.about-certifications {
    background: var(--ac-bg, #FFFFFF);
    color: var(--ac-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .about-certifications { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-certifications__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-certifications__inner { gap: 48px; }
  }
  .about-certifications__title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-certifications__title { font-size: 24px; line-height: 34px; font-weight: 400; }
  }
  .about-certifications__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 0;
    justify-items: center;
  }
  @media (min-width: 1024px) {
    .about-certifications__grid {
      grid-template-columns: repeat(5, minmax(0, 252.8px));
      justify-content: center;
      gap: 24px;
    }
  }
  /* Mobile: 3 + 2 layout on a 6-col grid — last two centered on row 2 */
  @media (max-width: 1023px) {
    .about-certifications__card { grid-column: span 2; }
    .about-certifications__card:nth-child(4) { grid-column: 2 / span 2; }
    .about-certifications__card:nth-child(5) { grid-column: 4 / span 2; }
  }
  .about-certifications__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 130px;
  }
  @media (min-width: 1024px) {
    .about-certifications__card {
      max-width: none;
      background: var(--ac-card-bg, #F8F8F8);
      border-radius: 12px;
      padding: 20px 12px;
      gap: 12px;
    }
  }
  .about-certifications__icon {
    display: inline-flex;
    width: 74px;
    height: 74px;
  }
  @media (min-width: 1024px) {
    .about-certifications__icon { width: 80px; height: 80px; }
  }
  .about-certifications__icon svg,
  .about-certifications__icon img {
    width: 100%;
    height: 100%;
    min-width: 74px;
    min-height: 74px;
    flex-shrink: 0;
    object-fit: contain;
  }
  .about-certifications__label {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-certifications__label { font-size: 14px; line-height: 26px; }
  }
/* END_SECTION:about-certifications */

/* START_SECTION:about-different (INDEX:3) */
.about-diff {
    background: var(--ad-bg, #FFFFFF);
    color: var(--ad-fg, #121212);
    padding: 32px 0 32px 16px;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .about-diff { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-diff__inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-diff__inner { gap: 48px; }
  }
  .about-diff__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .about-diff__title { font-size: 48px; line-height: 59px; letter-spacing: -1px; text-align: center; padding-right: 0; }
  }
  .about-diff__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 16px;
  }
  .about-diff__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .about-diff__track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 328px));
      justify-content: center;
      gap: 16px;
      overflow: visible;
      padding-right: 0;
    }
  }
  .about-diff__item {
    flex: 0 0 82%;
    max-width: 318px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .about-diff__item { flex: none; max-width: none; }
  }
  .about-diff__media { margin-bottom: 8px; }
  .about-diff__img,
  .about-diff__img-placeholder {
    width: 100%;
    aspect-ratio: 328 / 318;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    background: #EDEDED;
  }
  .about-diff__item-title {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin: 0;
  }
  .about-diff__item-text {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    color: var(--ad-sub, #454545);
    margin: 0;
  }
  .about-diff__nav { display: flex; gap: 8px; margin-top: 8px; }
  @media (min-width: 1024px) {
    .about-diff__nav { display: none; }
  }
  .about-diff__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #D6D6D6;
    background: transparent;
    color: #121212;
    cursor: pointer;
  }
  .about-diff__arrow--next { background: #121212; border-color: #121212; color: #FFFFFF; }
/* END_SECTION:about-different */

/* START_SECTION:about-hero (INDEX:4) */
.about-hero {
    background: var(--ah-bg, #FFFFFF);
    color: var(--ah-fg, #121212);
    padding: 32px 16px 0;
  }
  @media (min-width: 1024px) {
    .about-hero { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-hero__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 48px;
      min-height: 449px;
    }
  }
  .about-hero__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 508px;
  }
  @media (max-width: 1023px) {
    .about-hero__content { text-align: center; max-width: none; }
  }
  @media (min-width: 1024px) {
    .about-hero__content { gap: 16px; margin-left: clamp(0px, 6vw, 117px); flex: 1 0 auto; max-width: min(508px, 44%); }
  }
  .about-hero__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-hero__title { font-size: 54px; line-height: 1.1; letter-spacing: -1px; }
  }
  .about-hero__title--desk { display: none; }
  .about-hero__title--mob { display: block; }
  @media (min-width: 1024px) {
    .about-hero__title--desk { display: block; }
    .about-hero__title--mob { display: none; }
  }
  .about-hero__sub {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--ah-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-hero__sub { font-size: 16px; line-height: 24px; }
  }
  .about-hero__sub--desk { display: none; }
  .about-hero__sub--mob { display: block; }
  @media (min-width: 1024px) {
    .about-hero__sub--desk { display: block; }
    .about-hero__sub--mob { display: none; }
  }
  .about-hero__media { flex: 0 1 auto; min-width: 0; }
  @media (min-width: 1024px) {
    .about-hero__media { flex: 0 1 663px; }
  }
  .about-hero__img,
  .about-hero__img-placeholder {
    width: 100%;
    aspect-ratio: 663 / 449;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    background: #EDEDED;
  }
  @media (max-width: 1023px) {
    .about-hero__img,
    .about-hero__img-placeholder { aspect-ratio: 1 / 1; }
  }
/* END_SECTION:about-hero */

/* START_SECTION:about-research-center (INDEX:5) */
.about-rc {
    background: var(--arc-bg, #FFFFFF);
    color: var(--arc-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .about-rc { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-rc__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-rc__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
  }
  .about-rc__media { order: 2; }
  @media (min-width: 1024px) {
    .about-rc__media { order: 0; }
  }
  .about-rc__img,
  .about-rc__img-placeholder {
    width: 100%;
    aspect-ratio: 358 / 239;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    background: #EDEDED;
  }
  @media (min-width: 1024px) {
    .about-rc__img,
    .about-rc__img-placeholder { aspect-ratio: 663 / 670; }
  }

  .about-rc__content { display: contents; }
  @media (min-width: 1024px) {
    .about-rc__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 48px;
      padding: 36px;
    }
  }
  .about-rc__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    order: 1;
  }
  .about-rc__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-rc__title { font-size: 48px; line-height: 59px; letter-spacing: -1px; }
  }
  .about-rc__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--arc-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-rc__text { font-size: 16px; line-height: 26px; max-width: 460px; }
  }

  .about-rc__cards-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    order: 3;
  }
  .about-rc__cards-label {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    text-align: center;
    margin: 0;
  }
  .about-rc__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .about-rc__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #EEEEEE 0%, #F8F8F8 55%, #FDFDFD 100%);
    border-radius: 24px;
    padding: 24px 20px;
    width: 304px;
    max-width: 100%;
    text-align: center;
  }
  .about-rc__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    margin-bottom: 4px;
    box-sizing: border-box;
  }
  .about-rc__card-icon svg { width: 24px; height: 24px; min-width: 24px; min-height: 24px; flex-shrink: 0; }
  .about-rc__card-title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
  }
  .about-rc__card-text {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    color: #9A9A9A;
    margin: 0;
  }
/* END_SECTION:about-research-center */

/* START_SECTION:about-team (INDEX:6) */
.about-team {
    background: var(--at-bg, #FFFFFF);
    color: var(--at-fg, #121212);
    padding: 32px 16px;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .about-team { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .about-team__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .about-team__inner { gap: 48px; }
  }
  .about-team__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .about-team__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 41px;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (max-width: 1023px) {
    .about-team__title { text-align: center; flex: 1 1 auto; }
  }
  @media (min-width: 1024px) {
    .about-team__title { font-size: 48px; line-height: 59px; letter-spacing: -1px; }
  }
  .about-team__title--desk { display: none; }
  .about-team__title--mob { display: block; }
  @media (min-width: 1024px) {
    .about-team__title--desk { display: block; }
    .about-team__title--mob { display: none; }
  }
  .about-team__nav { display: flex; gap: 8px; }
  .about-team__nav--desk { display: none; }
  @media (min-width: 1024px) {
    .about-team__nav--desk { display: flex; }
    .about-team__nav--mob { display: none; }
  }
  .about-team__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid #D6D6D6;
    background: transparent;
    color: #121212;
    cursor: pointer;
    transition: opacity 160ms ease;
  }
  @media (min-width: 1024px) {
    .about-team__arrow { width: 48px; height: 48px; }
  }
  .about-team__arrow--next { background: #121212; border-color: #121212; color: #FFFFFF; }
  .about-team__arrow:disabled { opacity: 0.35; cursor: default; }

  .about-team__track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .about-team__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .about-team__track {
      gap: 75px;
      margin-right: calc(-1 * clamp(40px, 14.58vw, 280px));
      padding-right: clamp(40px, 14.58vw, 280px);
    }
  }
  .about-team__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .about-team__slide {
      flex: 0 0 calc(100% - clamp(40px, 14.58vw, 280px));
      display: grid;
      grid-template-columns: 42.4% 1fr;
      gap: 48px;
      align-items: stretch;
    }
  }
  .about-team__photo-img,
  .about-team__photo-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    background: #EDEDED;
  }
  @media (min-width: 1024px) {
    .about-team__photo-img,
    .about-team__photo-placeholder { aspect-ratio: 577 / 598; }
  }
  .about-team__info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
  }
  .about-team__bio-wrap { display: flex; flex-direction: column; gap: 12px; }
  @media (min-width: 1024px) {
    .about-team__bio-wrap { flex-direction: column-reverse; gap: 30px; }
  }
  .about-team__ident { display: flex; flex-direction: column; }
  .about-team__name {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  @media (min-width: 1024px) {
    .about-team__name { font-size: 20px; line-height: 26px; }
  }
  .about-team__badge { display: inline-flex; width: 20px; height: 20px; }
  .about-team__badge svg { width: 100%; height: 100%; min-width: 20px; min-height: 20px; flex-shrink: 0; }
  @media (min-width: 1024px) {
    .about-team__badge { width: 24px; height: 24px; }
  }
  .about-team__role {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 20px;
    color: var(--at-sub, #6F6F6F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-team__role { font-size: 18px; line-height: 26px; }
  }
  .about-team__bio {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-team__bio { font-size: 24px; line-height: 35px; letter-spacing: -0.2px; }
  }
  .about-team__mission {
    border-left: 2px solid #121212;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 354px;
  }
  .about-team__mission-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-team__mission-label { font-size: 20px; line-height: 32px; }
  }
  .about-team__mission-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--at-sub, #6F6F6F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .about-team__mission-text { font-size: 16px; line-height: 26px; }
  }
/* END_SECTION:about-team */

/* START_SECTION:announcement-bar (INDEX:7) */
.announcement {
    background: var(--ab-bg, #121212);
    color: var(--ab-fg, #FFFFFF);
    min-height: var(--ab-height-mob, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Above the mega-menu scrim (z-index 25), so the bar keeps its own colour
       while the rest of the page is washed out. */
    position: relative;
    z-index: 40;
  }
  @media (min-width: 1024px) {
    .announcement { min-height: var(--ab-height-desk, 36.9px); }
  }
  .announcement__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    width: 100%;
    /* Messages stack, so the inner needs its own height: the only one in
       flow is the active one, and the rest are absolute. */
    position: relative;
  }
  @media (min-width: 1024px) {
    /* Trimmed from 10px so the inner (20px line-height + 16px padding = 36px)
       stays under the bar's min-height — otherwise the content, not the
       setting, would decide the bar's height. Must sit after the base
       .announcement__inner rule: same specificity, so source order decides. */
    .announcement__inner { padding: 8px 16px; }
  }

  /* One message occupies the flow; the others sit on top of it, faded out.
     Keeping the active one in flow means the bar never needs a fixed height
     for the copy to fit. */
  .announcement__msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--msg-enter, 0));
    transition: opacity 380ms ease, transform 380ms cubic-bezier(.16, 1, .3, 1),
                visibility 0s linear 380ms;
  }
  .announcement__msg.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 380ms ease, transform 380ms cubic-bezier(.16, 1, .3, 1);
  }
  .announcement__text,
  .announcement__link {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: var(--ab-fg, #FFFFFF);
    margin: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .announcement__link:hover { opacity: 0.85; }

  .announcement__arrow {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    cursor: pointer;
    opacity: 0.95;
    transition: opacity 200ms ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .announcement__arrow:hover { opacity: 1; }
  .announcement__arrow svg { width: 15px; height: 15px; }
  /* Pinned to the edges of a 450px band around the centre rather than the
     bar's edges, so they sit next to the message instead of stranded in the
     corners of a very wide bar. */
  .announcement__arrow--prev { left: max(12px, calc(50% - 225px)); }
  .announcement__arrow--next { right: max(12px, calc(50% - 225px)); }
  @media (prefers-reduced-motion: reduce) {
    .announcement__msg { transition: opacity 1ms linear; transform: none; }
  }
  /* Arrows as on histrips: a 7x10 chevron, 16px in from each edge, on a
     28px tap area. */
  .announcement__arrow svg { width: 7px; height: 10px; }
  .announcement__arrow--prev { left: max(6px, calc(50% - 225px)); }
  .announcement__arrow--next { right: max(6px, calc(50% - 225px)); }
  /* The arrows belong to the phone bar only: on desktop the bar rotates on
     its own and the controls stay out of the way. */
  @media (min-width: 1024px) {
    .announcement__arrow { display: none; }
  }
  /* Phones: a 36px bar with 13px copy (18px line + 9px padding each side). */
  @media (max-width: 1023px) {
    .announcement__inner { padding: 9px 16px; }
    .announcement__text,
    .announcement__link { font-size: 13px; line-height: 18px; }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:brush-benefits (INDEX:8) */
.brush-benefits {
    background: var(--bb-bg, #FFFFFF);
    color: var(--bb-fg, #121212);
    padding: var(--bb-pad-mob, 32px 16px);
  }
  @media (min-width: 1024px) {
    .brush-benefits { padding: var(--bb-pad-desk, 60px clamp(40px, 14.58vw, 280px)); }
  }
  .brush-benefits__inner {
    max-width: var(--bb-max-desk, 1920px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "media stats";
    column-gap: 16px;
    row-gap: 24px;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .brush-benefits__inner {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "media head"
        "media stats";
      column-gap: 48px;
      row-gap: 32px;
      align-items: center;
    }
  }

  .brush-benefits__head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .brush-benefits__head { text-align: left; gap: 12px; align-self: end; }
  }
  .brush-benefits__title {
    font-family: var(--font-primary--family);
    font-size: var(--bb-title-mob, 30px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .brush-benefits__title { font-size: var(--bb-title-desk, 54px); line-height: 1.1; letter-spacing: -1px; }
  }
  .brush-benefits__sub {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--bb-sub, #605F5F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .brush-benefits__sub { font-size: 16px; line-height: 24px; }
  }

  .brush-benefits__media { grid-area: media; align-self: center; }
  .brush-benefits__img,
  .brush-benefits__img-placeholder {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  .brush-benefits__img-placeholder { aspect-ratio: 663 / 642; background: #F3F3F3; border-radius: 16px; }

  .brush-benefits__stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }
  @media (min-width: 1024px) {
    .brush-benefits__stats { grid-template-columns: 1fr 1fr; }
  }
  .brush-benefits__stat {
    background: var(--bb-card-bg, #F7F7F7);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .brush-benefits__stat-num {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: var(--bb-fg, #121212);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .brush-benefits__stat-num { font-size: 40px; }
  }
  .brush-benefits__stat-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--bb-sub, #605F5F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .brush-benefits__stat-label { font-size: 16px; line-height: 22px; }
  }
/* END_SECTION:brush-benefits */

/* START_SECTION:brushing-cards (INDEX:9) */
.brushing-cards {
    background: var(--bc-bg, #F3F3F3);
    color: var(--bc-fg, #121212);
    padding: var(--bc-pad-mob, 32px 0 32px 16px);
  }
  @media (min-width: 1024px) {
    .brushing-cards { padding: var(--bc-pad-desk, 60px clamp(40px, 14.58vw, 280px)); }
  }
  .brushing-cards__inner {
    max-width: var(--bc-max-desk, 1920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .brushing-cards__inner { gap: 40px; }
  }
  .brushing-cards__title {
    font-family: var(--font-primary--family);
    font-size: var(--bc-title-mob, 34px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
    text-align: left;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .brushing-cards__title { font-size: var(--bc-title-desk, 48px); line-height: 1.1; letter-spacing: -1px; text-align: center; padding-right: 0; }
  }

  .brushing-cards__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .brushing-cards__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .brushing-cards__track {
      display: grid;
      grid-template-columns: repeat(var(--bc-cols, 3), minmax(0, 1fr));
      gap: 24px;
      overflow: visible;
      padding-right: 0;
    }
  }

  .brushing-cards__card {
    position: relative;
    flex: 0 0 78%;
    max-width: 440px;
    scroll-snap-align: start;
    border-radius: 20px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    aspect-ratio: var(--bc-ratio, 437 / 731);
    background: #EDEDED;
  }
  @media (min-width: 1024px) {
    .brushing-cards__card { flex: none; max-width: none; }
  }
  .brushing-cards__media { position: absolute; inset: 0; }
  .brushing-cards__img,
  .brushing-cards__placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  .brushing-cards__overlay {
    position: absolute;
    inset: 0;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    pointer-events: none;
  }
  .brushing-cards__heading {
    font-family: var(--font-primary--family);
    font-size: 30px;
    line-height: 1.15;
    font-weight: 500;
    color: var(--card-fg, #FFFFFF);
    max-width: 90%;
  }
  @media (min-width: 1024px) {
    .brushing-cards__heading { font-size: 36px; }
  }
  .brushing-cards__heading--has-lead { font-weight: 400; }
  .brushing-cards__heading-lead { font-weight: 700; }
  .brushing-cards__heading-rest { font-weight: 400; }
  .brushing-cards__subtitle {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    color: var(--card-fg, #FFFFFF);
    opacity: 0.82;
    max-width: 90%;
  }
  @media (min-width: 1024px) {
    .brushing-cards__subtitle { font-size: 16px; line-height: 24px; }
  }
  .brushing-cards__bullets { display: flex; flex-direction: column; gap: 6px; }
  .brushing-cards__bullet {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--card-fg, #FFFFFF);
    opacity: 0.9;
  }
  .brushing-cards__bullet-dot {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-3px);
  }
  @media (min-width: 1024px) {
    .brushing-cards__bullet { font-size: 15px; }
  }
  .brushing-cards__pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: #FFFFFF;
    border-radius: 999px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #121212;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
  @media (min-width: 1024px) {
    .brushing-cards__pill { font-size: 16px; line-height: 20px; }
  }

  .brushing-cards__nav { display: flex; gap: 8px; }
  @media (min-width: 1024px) {
    .brushing-cards__nav { display: none; }
  }
  .brushing-cards__arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #D9D9D9;
    background: transparent;
    color: #121212;
    cursor: pointer;
  }
/* END_SECTION:brushing-cards */

/* START_SECTION:cart-drawer (INDEX:10) */
/* Weights: 500 for emphasis, 400 for the rest, like everywhere else on the site. */
  .cart-drawer b, .cart-drawer strong { font-weight: 500; }
  .cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
  }
  .cart-drawer[hidden] { display: none; }
  .cart-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }
  .cart-drawer[data-open="true"] { pointer-events: auto; }
  .cart-drawer[data-open="true"] .cart-drawer__overlay {
    background: rgba(0,0,0,0.4);
    opacity: 1;
    pointer-events: auto;
  }

  .cart-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* Body white; the header and the footer carry the grey. */
    background: #FFFFFF;
    color: var(--cd-fg, #121212);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 24px rgba(0,0,0,0);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  .cart-drawer__panel::-webkit-scrollbar { display: none; }
  /* Keep the header sticky at top while scrolling long content. */
  .cart-drawer__top { position: sticky; top: 0; z-index: 2; }
  .cart-drawer__panel.is-empty { background: #FFFFFF; }
  .cart-drawer[data-open="true"] .cart-drawer__panel {
    transform: translateX(0);
    box-shadow: -8px 0 24px rgba(0,0,0,0.08);
  }

  .cart-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    background: #FFFFFF;
    flex-shrink: 0;
  }
  /* Title and count after Gudslip: "Tu carrito • 2", 18/28 semibold. */
  .cart-drawer__top-title {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .cart-drawer__top-label {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #000;
  }
  .cart-drawer__top-count {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #000;
  }
  .cart-drawer__top-count::before { content: "\2022"; margin-right: 6px; }
  .cart-drawer__close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    color: var(--cd-fg, #121212);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Empty state — don't grab all remaining space, otherwise the bestsellers
     block below gets pushed off screen. */
  .cart-drawer__empty {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px 24px;
    gap: 5px;
  }
  .cart-drawer__empty-title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 26px;
    color: #000;
    margin: 8px 0 0;
  }
  .cart-drawer__empty-sub {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #6C6C6C;
    margin: 0;
    max-width: 247px;
  }
  .cart-drawer__empty-cta-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .cart-drawer__empty-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    color: #000;
    background: transparent;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
  }

  /* Trust row */
  /* USPs under the button, measured on Gudslip: three flex items spread
     across the row, 14px icon + 11px text on a 1.9 line-height, #222. */
  .cart-drawer__usps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .cart-drawer__usp {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 1 auto;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 1.9;
    font-weight: 400;
    color: #222222;
  }
  .cart-drawer__usp-icon { width: 14px; height: 14px; flex-shrink: 0; color: #222222; }

  /* Best sellers (empty state) — 2 cards fill drawer width via grid.
     Flows immediately after the CTA wrap so it's visible without hunting
     for it, matching the Figma empty-state layout. */
  .cart-drawer__bestsellers {
    background: #FFFFFF;
    padding: 20px 16px 24px;
    margin-top: 8px;
    border-top: 1px solid #EAEAEA;
  }
  .cart-drawer__bestsellers-title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: #000;
    margin: 0 0 16px;
  }
  .cart-drawer__bestsellers-track {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .cart-drawer__bs-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
  }
  .cart-drawer__bs-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #F3F3F3;
    border-radius: 8px;
    overflow: hidden;
    display: block;
  }
  .cart-drawer__bs-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cart-drawer__bs-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #3F83F8;
    color: #FFF;
    padding: 4px 8px;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    border-radius: 6px;
    letter-spacing: 0;
  }
  .cart-drawer__bs-pill {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #FFFFFF;
    padding: 4px 10px 4px 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
    color: #121212;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .cart-drawer__bs-body { display: flex; flex-direction: column; gap: 6px; }
  .cart-drawer__bs-title {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
    margin: 0;
  }
  .cart-drawer__bs-tag {
    display: inline-flex;
    align-self: flex-start;
    background: #F3F3F3;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #4A4A4A;
    margin-top: 2px;
  }
  .cart-drawer__bs-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 4px;
  }
  .cart-drawer__bs-price-current {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #1C1C1E;
  }
  .cart-drawer__bs-price-compare {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #A7A7A7;
    text-decoration: line-through;
  }
  .cart-drawer__bs-cta {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #121212;
    color: #FFF;
    padding: 12px 12px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0;
  }
  .cart-drawer__bs-cta:hover { opacity: 0.9; }

  /* Full state — scroll body */
  .cart-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  /* Progress bar after Gudslip: 14px line, 4px track, 24px milestone
     circles sitting on the bar with an 11px label under each. The block
     reserves 44px under the bar for the labels. */
  .cart-drawer__shipping { display: block; padding: 0 0 44px; margin-bottom: -14px; }
  .cart-drawer__shipping-text {
    margin: 0 0 20px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #121212;
  }
  .cart-drawer__shipping-text b { font-weight: 500; }
  .cart-drawer__shipping-bar {
    position: relative;
    height: 4px;
    background: #F0F0F0;
    border-radius: 999px;
  }
  /* Room for the last label, centred under the milestone at 100 %. */
  .cart-drawer__shipping-bar.has-gift { margin-right: 32px; }
  .cart-drawer__shipping-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    background: #000;
    border-radius: 999px;
    transition: width 280ms ease;
  }
  .cart-drawer__milestone {
    position: absolute;
    top: 2px;
    transform: translate(-12px, -12px);
    width: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .cart-drawer__milestone-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ECECEC;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cart-drawer__milestone-icon svg { width: 14px; height: 14px; display: block; }
  .cart-drawer__milestone.is-reached .cart-drawer__milestone-icon { background: #000; color: #FFF; }
  .cart-drawer__milestone-label {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 400;
    color: #121212;
    text-align: center;
  }
  .cart-drawer__milestone-label b { font-weight: 500; }

  .cart-drawer__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Line: media 80 · body · trash, all vertically centred (Gudslip layout).
     The quantity box lives inside the body, under the price. */
  .cart-drawer__item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cd-divider, #EAEAEA);
  }
  .cart-drawer__item-media {
    width: 80px;
    height: 80px;
    background: #FFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    overflow: hidden;
  }
  .cart-drawer__item-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cart-drawer__item-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  /* Figma: 14/20 Medium black */
  .cart-drawer__item-title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Figma: 12/18 Regular #9CA3AF */
  .cart-drawer__item-plan {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #9CA3AF;
    margin: 0;
  }
  .cart-drawer__item-price { display: inline-flex; gap: 4px; align-items: baseline; }
  /* Figma: 14/20 Regular black */
  .cart-drawer__item-price-current {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #000000;
  }
  /* Figma: 12/18 Regular #A7A7A7 line-through */
  .cart-drawer__item-price-compare {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #A7A7A7;
    text-decoration: line-through;
  }

  /* Subscribe pill — Figma spec: bg #EAF3FF, border 1px rgba(63,131,248,0.65),
     padding 5/8, radius 4, text 14/18 #3F83F8; price in Medium tracking 0.6px */
  .cart-drawer__item-subscribe-pill {
    appearance: none;
    border: 1px solid rgba(63, 131, 248, 0.65);
    background: #EAF3FF;
    color: #3F83F8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding: 5px 8px;
    border-radius: 4px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    cursor: pointer;
    text-align: left;
    transition: background 160ms ease;
  }
  .cart-drawer__item-subscribe-pill:hover { background: #DEEBFF; }
  /* Hidden on request (29-09-2026): the pill pushed a subscription on every one-time line. */
  .cart-drawer__item-subscribe-pill { display: none; }
  .cart-drawer__item-subscribe-pill strong {
    font-weight: 500;
    color: #3F83F8;
    letter-spacing: 0;
  }
  .cart-drawer__item-subscribe-pill svg { color: #3F83F8; flex-shrink: 0; width: 16px; height: 16px; }
  /* Quantity box after Gudslip: one 28px pill with a hairline border, the
     two 14px buttons inside with 8px glyphs and the value between them. */
  .cart-drawer__item-qty {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    align-self: flex-start;
    box-sizing: border-box;
    height: 28px;
    padding: 6px 10px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    background: #FFFFFF;
  }
  .cart-drawer__qty-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    cursor: pointer;
  }
  .cart-drawer__qty-btn:hover { color: #6B6B6B; }
  /* Trash: 18px glyph on a 32px tap target, pulled back so it reads as 18. */
  .cart-drawer__item-remove {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: -7px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4A4A4A;
    cursor: pointer;
    border-radius: 6px;
  }
  .cart-drawer__item-remove:hover { color: #000000; }
  .cart-drawer__item-remove svg { width: 18px; height: 18px; display: block; }
  /* Loop bundle card — the media slot stacks the flavor thumbs so the pack
     reads as one product, and the flavors list underneath the price. */
  .cart-drawer__bundle-media {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
  }
  .cart-drawer__bundle-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 3px;
    display: block;
  }
  .cart-drawer__bundle-media .cart-drawer__bundle-thumb:first-child:nth-last-child(1) {
    width: 100%;
    height: 100%;
  }
  .cart-drawer__bundle-title { white-space: normal; }
  .cart-drawer__bundle-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .cart-drawer__bundle-line {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #605F5F;
  }
  .cart-drawer__bundle-line-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cart-drawer__bundle-line-qty { flex-shrink: 0; color: #9CA3AF; }
  .cart-drawer__qty-btn svg { width: 8px; height: 8px; display: block; }
  .cart-drawer__qty-value {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 14px;
    font-weight: 500;
    color: #000000;
    min-width: 12px;
    text-align: center;
  }
  /* Footer */
  .cart-drawer__footer {
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 1;
    padding: 19px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
  }

  /* Upsell — Figma spec 358x164 card, gradient bg + product image spilling
     off top-left (cropped by card overflow). Content column starts at
     x=195. Positions taken from Figma node 8320:10528. */
  .cart-drawer__upsell {
    position: relative;
    min-height: 180px;
    border-radius: 8px;
    overflow: hidden;
    /* Figma spec: two plus-lighter radial glows layered on top of the linear
       gradient base. Order = topmost → bottom; blend modes align pairwise. */
    background:
      radial-gradient(65.55% 101.99% at 22.77% 54.88%, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%),
      radial-gradient(42.24% 81.9% at 24.02% 54.57%, rgba(255, 255, 255, 0.53) 0%, rgba(255, 255, 255, 0) 100%),
      linear-gradient(80deg, #1C64F2 30.84%, #1A56DB 103.72%);
    background-blend-mode: plus-lighter, plus-lighter, normal;
    padding: 14px 14px 14px 170px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
  }
  .cart-drawer__upsell-media {
    position: absolute;
    left: 10px;
    top: 10px;
    bottom: 10px;
    width: 150px;
    pointer-events: none;
  }
  .cart-drawer__upsell-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    display: block;
  }
  .cart-drawer__upsell-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  /* Figma spec: Neue Montreal Medium 22/26 white for title (line-height normal ≈ 1.18) */
  .cart-drawer__upsell-title {
    font-family: var(--font-primary--family);
    font-size: 22px;
    line-height: 26px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
  }
  /* Figma spec: Neue Montreal Regular 12/14 #EBF5FF */
  .cart-drawer__upsell-sub {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #EBF5FF;
    margin: 0;
  }
  .cart-drawer__upsell-sub strong,
  .cart-drawer__upsell-sub b {
    font-family: var(--font-primary--family);
    font-weight: 500;
    color: #FFFFFF;
  }
  /* Figma spec: 124x34 pill (padding 8/24), white bg, rounded 4, black 14/18 Medium.
     Force nowrap + auto width so the copy never wraps if the fallback font
     is wider than Neue Montreal. */
  .cart-drawer__upsell-cta {
    align-self: flex-start;
    min-width: 124px;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #000000;
    padding: 8px 24px;
    border-radius: 4px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    margin-top: 8px;
    transition: opacity 200ms ease;
  }
  .cart-drawer__upsell-cta:hover { opacity: 0.9; }

  /* Figma subtotal: items-end justify-between */
  .cart-drawer__subtotal {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* Gudslip: SUBTOTAL 14 semibold uppercase, black. */
  .cart-drawer__subtotal-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #000000;
  }
  .cart-drawer__subtotal-value {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
  }
  /* Gudslip compare: 12/14 #9CA3AF line-through */
  .cart-drawer__subtotal-compare {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #9CA3AF;
    text-decoration: line-through;
  }
  /* Gudslip current: 14 Medium, black. */
  .cart-drawer__subtotal-current {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #000000;
  }

  .cart-drawer__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #000;
    color: #FFF;
    /* 44px tall like Gudslip's checkout: 12px padding on a 20px line. */
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    width: 100%;
    transition: opacity 200ms ease;
  }
  .cart-drawer__checkout:hover { opacity: 0.9; }
  .cart-drawer__checkout-icon { display: inline-flex; }
  .cart-drawer__checkout-icon svg { width: 16px; height: 16px; display: block; }

  /* Figma payments: gap 6px, opacity 0.9, each icon 31.784x21.795 */
  .cart-drawer__payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    opacity: 1;
    flex-wrap: wrap;
  }
  .cart-drawer__payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }
  .cart-drawer__payment svg { display: block; height: 22px; width: auto; }

  @media (min-width: 1024px) {
    /* Figma spec: 390px wide on desktop (matches mobile viewport width). */
    .cart-drawer__panel { width: 390px; }
  }

  /* ---- Cart recommendations (histrips pattern) ---- */
  .cart-drawer__recs {
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  .cart-drawer__rec-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .cart-drawer__rec-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .cart-drawer__rec-title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    color: var(--cd-fg, #121212);
    margin: 0;
  }
  .cart-drawer__rec-badge {
    display: inline-flex;
    align-items: center;
    background: var(--cd-accent, #3F83F8);
    color: #FFFFFF;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
  }
  /* Full-bleed scroller: cancels the 16px scroll padding so cards run to the
     drawer edge, then puts it back as scroll padding for the snap origin. */
  /* Recommendations: one-row carousel of grey modules (menu-drawer card,
     grey well instead of a border), full bleed to the drawer edge. */
  .cart-drawer__rec-carousel {
    margin-inline: -16px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cart-drawer__rec-carousel::-webkit-scrollbar { display: none; }
  .cart-drawer__rec-track {
    display: flex;
    gap: 8px;
    align-items: stretch;
  }
  .cart-drawer__rec-card {
    /* 2.5 cards per view: two whole ones and a peek of the third. */
    flex: 0 0 calc(40% - 7px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    background: #F4F4F4;
    border: 0;
    border-radius: 8px;
    min-width: 0;
    scroll-snap-align: start;
  }
  .cart-drawer__rec-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
  }
  .cart-drawer__rec-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .cart-drawer__rec-off {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--cd-accent, #3F83F8);
    color: #FFFFFF;
    padding: 3px 8px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    font-weight: 500;
  }
  .cart-drawer__rec-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    flex: 1 1 auto;
    width: 100%;
  }
  .cart-drawer__rec-name {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--cd-fg, #121212);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cart-drawer__rec-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
  }
  /* Same type as the product cards on the home and the collection. */
  .cart-drawer__rec-price-current {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #1C1C1E;
  }
  .cart-drawer__rec-price-compare {
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    font-weight: 400;
    color: #A7A7A7;
    text-decoration: line-through;
  }
  .cart-drawer__rec-add {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #121212;
    color: #FFFFFF;
    border: 1px solid #121212;
    border-radius: 6px;
    padding: 0 12px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
  }
  .cart-drawer__rec-add:hover { background: #000000; border-color: #000000; }
  .cart-drawer__rec-add.is-added {
    background: var(--cd-accent, #3F83F8);
    border-color: var(--cd-accent, #3F83F8);
  }
  .cart-drawer__rec-add:disabled { opacity: .7; pointer-events: none; }

  /* Phones: the upsell card would take 180px of a 400px footer and leave
     356px for the list. It moves into the scroll instead; desktop keeps it
     in the footer, where there is room. */
  @media (max-width: 749px) {
    .cart-drawer__upsell--foot { display: none; }
    .cart-drawer__footer { padding-top: 14px; gap: 12px; padding-bottom: 12px; }
    .cart-drawer__payment svg { height: 20px; }
    .cart-drawer__usps { gap: 30px; max-width: 450px; margin: 0 auto; }
  }
  @media (min-width: 750px) {
    .cart-drawer__upsell--scroll { display: none; }
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:choose-routine (INDEX:11) */
.choose-routine {
    background: var(--cr-bg, #FFFFFF);
    color: var(--cr-fg, #000000);
    padding: var(--cr-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .choose-routine {
      padding: var(--cr-pad-desk, 60px 280px);
    }
  }
  .choose-routine__inner {
    max-width: var(--cr-max-desk, 1360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    /* The flex gap applies between all three children, so it is set to the
       tighter title-to-tabs spacing and the cards row buys its 48px back
       with a margin — otherwise pulling the tabs up would drag them too. */
    .choose-routine__inner { gap: 24px; }
    .choose-routine__track { margin-top: 24px; }
  }

  .choose-routine__title {
    font-family: var(--font-primary--family);
    font-size: var(--cr-title-mob, 32px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--cr-fg, #000);
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .choose-routine__title {
      font-size: var(--cr-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
    }
  }

  /* Figma tabs container: fixed height 48px, border-radius 8, no inner padding.
     Overflow visible so the taller ACTIVE tab (52px) breaks past the container.
     Mobile: full-width bar with equally-distributed tabs. Desktop: intrinsic. */
  /* Pill bar: a hairline drawn with an inset shadow instead of a border, so
     it costs no layout box, and a single pill that slides between tabs. */
  .choose-routine__tabs {
    display: flex;
    width: 100%;
    align-items: center;
    box-shadow: inset 0 0 0 1px #E6E6E6;
    border: 0;
    border-radius: 10px;
    padding: 4px;
    background: #FFFFFF;
    gap: 0;
    height: 42px;
    overflow: hidden;
    position: relative;
  }
  .choose-routine__tab-pill {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    width: var(--pill-w, 0px);
    transform: translateX(var(--pill-x, 0px));
    background: #F3F3F3;
    border-radius: 7px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1),
                width 320ms cubic-bezier(.16, 1, .3, 1),
                opacity 200ms ease;
  }
  .choose-routine__tab-pill.is-ready { opacity: 1; }
  @media (min-width: 1024px) {
    .choose-routine__tabs { display: inline-flex; width: auto; }
  }
  .choose-routine__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    z-index: 1;
    padding: 9px 10px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    letter-spacing: 0;
    line-height: normal;
    font-weight: 400;
    color: #818181;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease;
    white-space: nowrap;
    /* No explicit height: stretch fills the container's content box exactly,
       so tabs sit flush inside its border instead of overhanging it. */
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Sized by the label, spare room shared: long Spanish labels no longer
       overflow equal thirds. */
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .choose-routine__tabs { padding: 5px; height: 48px; }
    .choose-routine__tab-pill { top: 5px; height: calc(100% - 10px); }
    .choose-routine__tab { flex: 0 0 auto; padding: 12px 15px; font-size: 17px; }
  }
  .choose-routine__tab:hover { color: #000; }
  /* Colour only — the pill behind carries the state, and the weight is
     deliberately not changed: any weight shift would resize the label and
     shove its neighbours, since desktop tabs are sized by their content. */
  .choose-routine__tab.is-active { color: #000; }

  /* Mobile: flex row that overflows horizontally with snap. Cards are
     fixed at ~calc((100% - 12px) / 2) so exactly 2 fit at a time and
     later cards scroll into view. Desktop: 5-up flex row centred. */
  .choose-routine__track {
    display: flex;
    gap: 12px;
    /* Bleeds to the screen edge on phones, so the peeking card runs off the
       side instead of being cut at the section's padding. */
    margin-inline: -16px;
    padding-inline: 16px;
    scroll-padding-inline: 16px;
    width: calc(100% + 32px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .choose-routine__track::-webkit-scrollbar { display: none; }
  .choose-routine__track[hidden] { display: none; }
  @media (min-width: 1024px) {
    /* Desktop is a plain grid, not a slider: cards wrap onto a new row instead
       of scrolling sideways, so there is nothing to drag and no progress bar. */
    .choose-routine__track {
      --cr-cols: 4;
      margin-inline: 0;
      padding-inline: 0;
      width: auto;
      --cr-gap: 15px;
      display: grid;
      grid-template-columns: repeat(var(--cr-cols), minmax(0, 1fr));
      gap: var(--cr-gap);
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }

  /* Progress bar under the mobile slider. Thumb width = viewport-share
     of the total track, shifted with scrollLeft via a JS-set CSS var.
     Explicit width:100% because the parent __inner uses align-items:
     center on a flex-column, which would otherwise shrink this empty
     container (only absolute thumb inside) to 0 width. */
  .choose-routine__scrollbar {
    position: relative;
    width: 100%;
    height: 5px;
    background: #E6E6E6;
    border-radius: 999px;
    margin-top: 28px;
    overflow: hidden;
    align-self: stretch;
  }
  .choose-routine__scrollbar[hidden] { display: none; }
  .choose-routine__scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--thumb-w, 33%);
    background: #000000;
    border-radius: 999px;
    transform: translateX(var(--thumb-x, 0px));
    transition: transform 120ms linear;
  }
  /* Mobile only: desktop has no slider to report on. */
  @media (min-width: 1024px) {
    .choose-routine__scrollbar { display: none; }
  }

  .choose-routine__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #808080;
    padding: 32px 0;
  }

  /* Layout only — the card UI itself lives in snippets/product-card.liquid.
     Mobile: 2-up slider, each card takes half the row minus the gap.
     Desktop: each card is an exact fifth of the row. Computed rather than a
     fixed width so the row always fills the 1400px box, and so a tab holding
     fewer than five products keeps the same card size and simply centres. */
  .choose-routine__track > .product-card {
    scroll-snap-align: start;
    /* A card and a half per view, so the next one peeks in. */
    flex: 0 0 calc((100% - 12px) / 1.5);
  }
  @media (min-width: 1024px) {
    /* Grid items: the column track sets the width, so the flex basis goes. */
    .choose-routine__track > .product-card {
      flex: initial;
      width: auto;
    }
    /* Square image well — at a 268px card that's 268x268. Scoped to this
       section (and specific enough to beat the bundle variant's own ratio)
       so collection and PDP cards keep theirs. */
    .choose-routine__track > .product-card .product-card__media {
      aspect-ratio: 1 / 1;
    }
  }
/* END_SECTION:choose-routine */

/* START_SECTION:clinical-stats (INDEX:12) */
/* Light by default, like the rest of the page: white ground, grey cards,
     black type. Only when a photo or video sits behind it does the section
     turn dark (the --media modifier), with the overlay in the brand's ink. */
  .clinical-stats {
    position: relative;
    overflow: hidden;
    color: #121212;
    background: #FFFFFF;
    padding: var(--cs-pad-mob, 56px 16px);
  }
  @media (min-width: 750px) {
    .clinical-stats { padding: var(--cs-pad-desk, 100px max(40px, (100% - 1400px) / 2)); padding-top: 179px; }
  }
  .clinical-stats__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .clinical-stats__overlay {
    position: absolute;
    inset: 0;
    background: var(--cs-overlay, #121212);
    opacity: var(--cs-overlay-opacity, 0.78);
  }
  .clinical-stats__inner {
    position: relative;
    z-index: 1;
    max-width: var(--cs-max, 1400px);
    margin-inline: auto;
  }
  .clinical-stats__intro { max-width: 900px; margin-inline: auto; text-align: center; }
  .clinical-stats__title {
    font-family: var(--font-primary--family);
    font-size: var(--cs-title-mob, 34px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: #121212;
    margin: 0 0 18px;
  }
  @media (min-width: 1024px) {
    .clinical-stats__title { font-size: var(--cs-title-desk, 48px); }
  }
  .clinical-stats__body {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 26px;
    color: #4A4A4A;
    margin-inline: auto;
  }
  .clinical-stats__body p { margin: 0 0 12px; }
  .clinical-stats__body > :last-child { margin-bottom: 0; }
  .clinical-stats__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 26px 0 0;
    padding: 16px 32px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .clinical-stats__cta:hover { transform: translateY(-1px); }

  .clinical-stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 56px 0 0;
  }
  .clinical-stats__item {
    padding: 40px 24px;
    text-align: center;
    background: #F5F5F5;
    border: 0;
    border-radius: 16px;
  }
  .clinical-stats__item-heading {
    margin: 0 0 14px;
    font-family: var(--font-primary--family);
    font-size: 30px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: #121212;
  }
  .clinical-stats__item-value {
    margin: 0 0 10px;
    font-family: var(--font-primary--family);
    font-size: 60px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -2px;
    color: #121212;
  }
  .clinical-stats__item-body {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 24px;
    color: #4A4A4A;
  }
  .clinical-stats__source {
    margin: 40px 0 0;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 12.5px;
    line-height: 19px;
    color: #8A8A8A;
  }
  .clinical-stats__source p { margin: 0; }
  .clinical-stats__source a { color: #121212; }

  /* Over a photo or video: white type, glass cards, white CTA. */
  .clinical-stats--media { color: #FFFFFF; background: #121212; }
  .clinical-stats--media .clinical-stats__title,
  .clinical-stats--media .clinical-stats__item-heading,
  .clinical-stats--media .clinical-stats__item-value,
  .clinical-stats--media .clinical-stats__source a { color: #FFFFFF; }
  .clinical-stats--media .clinical-stats__body,
  .clinical-stats--media .clinical-stats__item-body { color: rgba(255, 255, 255, 0.85); }
  .clinical-stats--media .clinical-stats__source { color: rgba(255, 255, 255, 0.7); }
  .clinical-stats--media .clinical-stats__cta { background: #FFFFFF; color: #121212; }
  .clinical-stats--media .clinical-stats__item {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  @media (max-width: 749px) {
    .clinical-stats__item-heading { font-size: 24px; line-height: 28px; }
    .clinical-stats__item-value { font-size: 44px; }
    .clinical-stats__item { padding: 24px 18px; }
    .clinical-stats__grid { gap: 14px; margin-top: 34px; }
  }
/* END_SECTION:clinical-stats */

/* START_SECTION:clinically-proven (INDEX:13) */
.clinically-proven {
    background: #FFFFFF;
    color: var(--cp-fg, #000);
    padding: var(--cp-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .clinically-proven {
      background: var(--cp-bg, #F3F3F3);
      padding: var(--cp-pad-desk, 60px 280px);
    }
  }

  .clinically-proven__inner {
    max-width: var(--cp-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__inner { gap: 92px; }
  }

  /* Mobile: flatten __head and __text so their children (top text, stats,
     bottom cert+CTA) can be reordered relative to __removes via flex-order.
     Desktop keeps the two-column head. */
  .clinically-proven__head {
    display: contents;
  }
  .clinically-proven__text {
    display: contents;
  }
  @media (min-width: 1024px) {
    .clinically-proven__head {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 48px;
    }
    .clinically-proven__text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 49px;
      flex: 1 1 auto;
      min-height: 498px;
      min-width: 0;
    }
  }

  .clinically-proven__text-top {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
    order: 0;
  }
  .clinically-proven__text-bottom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    order: 4;
  }
  .clinically-proven__stats-wrap { order: 1; }
  .clinically-proven__removes { order: 3; }
  @media (min-width: 1024px) {
    .clinically-proven__text-top { align-items: flex-start; text-align: left; }
    .clinically-proven__text-bottom { align-items: flex-start; gap: 39px; }
    .clinically-proven__stats-wrap,
    .clinically-proven__removes,
    .clinically-proven__text-top,
    .clinically-proven__text-bottom { order: 0; }
  }

  .clinically-proven__title {
    font-family: var(--font-primary--family);
    font-size: var(--cp-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--cp-fg, #000);
    margin: 0;
    padding: 0 72px;
    white-space: pre-line;
  }
  @media (min-width: 1024px) {
    .clinically-proven__title {
      font-size: var(--cp-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
      padding: 0;
    }
  }

  /* Type matches .see-how__subtitle. The max-width stays this section's own:
     see-how caps at 353px, which would over-wrap the longer copy here. */
  .clinically-proven__subtitle {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--cp-sub, #605F5F);
    margin: 0;
    max-width: 100%;
    letter-spacing: 0;
    padding: 0;
    text-wrap: auto;
  }
  @media (min-width: 1024px) {
    .clinically-proven__subtitle {
      font-size: 18px;
      line-height: 26px;
      max-width: 520px;
    }
  }

  .clinically-proven__cert {
    display: inline-flex;
    align-items: center;
    gap: 19px;
    width: 286px;
    max-width: 100%;
  }
  .clinically-proven__cert-img,
  .clinically-proven__cert-icon {
    width: 58px;
    height: 59px;
    flex-shrink: 0;
    display: inline-flex;
  }
  .clinically-proven__cert-img img { width: 100%; height: 100%; object-fit: contain; }
  .clinically-proven__cert-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--cp-fg, #121212);
    margin: 0;
    white-space: pre-line;
  }

  .clinically-proven__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    letter-spacing: 0;
    width: 100%;
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .clinically-proven__cta { width: auto; }
  }
  .clinically-proven__cta:hover { opacity: 0.85; }

  .clinically-proven__stats-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__stats-wrap {
      grid-template-columns: auto auto;
      gap: 0;
    }
  }

  .clinically-proven__stats {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 24px;
    border-radius: 16px;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 30%, #6D6963 0%, #3B3834 55%, #1E1B18 100%);
    color: var(--cp-stats-fg, #F8F6FF);
    min-height: 250px;
    isolation: isolate;
  }
  @media (min-width: 1024px) {
    .clinically-proven__stats {
      gap: 20px;
      padding: 32px;
      min-height: 498px;
    }
  }
  /* BG image sits behind the content in a separate layer so it can be blurred
     by the frosted-glass overlay (::after). */
  .clinically-proven__stats-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .clinically-proven__stats::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    z-index: 1;
    pointer-events: none;
  }
  .clinically-proven__stats > .clinically-proven__stat,
  .clinically-proven__stats > .clinically-proven__stat-divider {
    position: relative;
    z-index: 2;
  }
  @media (min-width: 1024px) {
    .clinically-proven__stats {
      padding: 52px 32px;
      width: 235px;
      min-width: 235px;
      /* Left half of the pair — rounded on its outer edge only, so it meets
         the scale card flush. Mobile stacks them, so it keeps the full 16px. */
      border-radius: 20px 0 0 20px;
    }
  }
  .clinically-proven__stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__stat {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 3px;
    }
  }
  .clinically-proven__stat-value {
    font-family: var(--font-primary--family);
    font-size: 40px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.64px;
    color: var(--cp-stats-fg, #F8F6FF);
  }
  @media (min-width: 1024px) {
    .clinically-proven__stat-value { font-size: 54px; letter-spacing: -1px; }
  }
  .clinically-proven__stat-label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cp-stats-label, #F3F3F3);
  }
  @media (min-width: 1024px) {
    .clinically-proven__stat-label { font-size: 16px; line-height: 20px; }
  }
  .clinically-proven__stat-divider {
    display: block;
    height: 0;
    border-top: 1px dashed rgba(255,255,255,0.25);
    background: transparent;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .clinically-proven__stat-divider {
      height: 1px;
      border-top: 0;
      background: rgba(255,255,255,0.25);
    }
  }

  .clinically-proven__scale {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 24px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__scale {
      flex: 1 1 auto;
      min-width: 0;
      padding: 57px;
      min-height: 498px;
      /* Mirror of the stats card: square where they join, rounded outward. */
      border-radius: 0 20px 20px 0;
    }
  }
  /* Scale card layout:
     - gradient bar absolutely positioned in column 1 spanning full inner height
     - 3 rows as a flex column with space-between so tooth+label pairs align to top/mid/bottom
     - dashed dividers between rows spanning the full card width */
  .clinically-proven__scale-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 270px;
    padding-left: 0;
  }
  @media (min-width: 1024px) {
    .clinically-proven__scale-inner { min-height: 440px; }
  }

  .clinically-proven__tooth-bar-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 32px;
    border: 1px solid #CBCBCB;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFEFB6 0%, #FFFFFF 55.658%);
    z-index: 0;
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .clinically-proven__tooth-bar-bg {
      width: 57px;
      border-width: 1.471px;
      border-radius: 14px;
    }
  }

  .clinically-proven__scale-rows {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    min-height: inherit;
    padding: 8px 0;
  }
  /* Scale reveal. The bar is unmasked downward with clip-path rather than
     scaleY, which would squash its 1px border and corner radius; the rows
     then fade up in sequence behind it. */
  @media (prefers-reduced-motion: no-preference) {
    .clinically-proven__scale .clinically-proven__tooth-bar-bg {
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.2s cubic-bezier(.16, 1, .3, 1);
    }
    .clinically-proven__scale.is-revealed .clinically-proven__tooth-bar-bg {
      clip-path: inset(0 0 0 0);
    }
    .clinically-proven__scale .clinically-proven__scale-row {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
    }
    .clinically-proven__scale.is-revealed .clinically-proven__scale-row {
      opacity: 1;
      transform: none;
    }
    .clinically-proven__scale.is-revealed .clinically-proven__scale-row:nth-child(1) { transition-delay: .30s; }
    .clinically-proven__scale.is-revealed .clinically-proven__scale-row:nth-child(2) { transition-delay: .55s; }
    .clinically-proven__scale.is-revealed .clinically-proven__scale-row:nth-child(3) { transition-delay: .80s; }
  }

  .clinically-proven__scale-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 61px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__scale-row { gap: 28px; }
  }
  /* Dashed divider sits ABOVE each text block (just under the top of the tooth),
     not through the tooth centre — matches the Figma spec. */
  .clinically-proven__scale-text {
    padding-top: 10px;
    padding-left: 30px;
  }
  .clinically-proven__scale-text::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* Extend left into the tooth column: 32px bar + 24px gap (mobile);
       57px bar + 28px gap (desktop). */
    left: -56px;
    border-top: 1px dashed #C9C9C9;
    pointer-events: none;
    z-index: 1;
  }
  @media (min-width: 1024px) {
    .clinically-proven__scale-text::before { left: -85px; }
  }
  .clinically-proven__tooth-slot {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    margin-top: -55px;
  }
  .clinically-proven__tooth-slot svg { width: 32px; height: 32px; display: block; overflow: visible; margin-top: 0; }
  @media (min-width: 1024px) {
    .clinically-proven__tooth-slot {
      flex: 0 0 57px;
      width: 57px;
      height: 61px;
      margin-top: 0;
    }
    .clinically-proven__tooth-slot svg { width: 57px; height: 61px; margin-top: -40px; }
  }
  .clinically-proven__scale-text {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }
  /* Legacy names kept as no-ops in case block editor keeps old references. */
  .clinically-proven__tone-line { display: none; }
  .clinically-proven__tone-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
  }
  .clinically-proven__tone-title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--cp-tone-sub, #605F5F);
    letter-spacing: -0.12px;
    margin: 0;
    word-break: break-word;
  }
  @media (min-width: 1024px) {
    .clinically-proven__tone-title { font-size: 20px; }
  }
  .clinically-proven__tone-desc {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 32px;
    font-weight: 500;
    color: #000;
    letter-spacing: -0.225px;
    margin: 0;
    word-break: break-word;
  }
  @media (min-width: 1024px) {
    .clinically-proven__tone-desc { font-size: 22px; line-height: 1.3; }
  }

  .clinically-proven__removes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    /* Must sit after the base rule, not with the other desktop overrides
       further up: same specificity, so source order decides. Mobile keeps
       12px — 34px between the heading and a stacked row is too much there. */
    .clinically-proven__removes { gap: 34px; }
  }
  .clinically-proven__removes-label {
    font-family: var(--font-primary--family);
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: var(--cp-fg, #121212);
    text-align: center;
    margin: 0;
    letter-spacing: 0;
  }
  .clinically-proven__removes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .clinically-proven__removes-list {
      /* Full content width, with the wider gap kept so the four cards still
         breathe — the space comes out of the gap, not out of a capped row. */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
    }
  }
  .clinically-proven__remove {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 12px;
    background: #F1F1F1;
    border-radius: 12px;
  }
  @media (min-width: 1024px) {
    .clinically-proven__remove {
      padding: 18px;
      background: #FFFFFF;
    }
  }
  /* Rounded-square grey well with a black glyph, matching the see-how
     benefit icons. Two rules used to set this, the second overriding the
     first's background and its 57px (circular) radius. */
  /* White rounded well on the grey chip: the see-how benefit chip, inverted. */
  .clinically-proven__remove-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border-radius: 10px;
    color: #121212;
  }
  .clinically-proven__remove-icon svg { width: 20px; height: 20px; }
  .clinically-proven__remove-label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0;
  }
  @media (min-width: 1024px) {
    .clinically-proven__remove-label { font-size: 18px; line-height: 24px; }
  }
/* END_SECTION:clinically-proven */

/* START_SECTION:collection-banner (INDEX:14) */
.collection-banner {
    background: var(--cb-bg-css, var(--cb-bg, #FFFFFF));
    color: var(--cb-fg, #000);
    padding: var(--cb-pad-mob, 32px 16px 24px);
    overflow: hidden;
    position: relative;
  }
  @media (min-width: 1024px) {
    /* Same 1400px box as every other section. */
    .collection-banner { padding: 48px max(40px, (100% - 1400px) / 2); }
  }
  .collection-banner__inner {
    max-width: var(--cb-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
  }
  @media (min-width: 1024px) {
    .collection-banner__inner {
      flex-direction: row;
      align-items: center;
      gap: 48px;
      min-height: 619px;
    }
  }

  .collection-banner__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 50%;
    min-width: 0;
    align-items: center;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .collection-banner__content {
      gap: 24px;
      max-width: 508px;
      align-items: flex-start;
      text-align: left;
    }
  }

  .collection-banner__title {
    font-family: var(--font-primary--family);
    font-size: var(--cb-title-mob, 32px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--cb-fg, #000);
    margin: 0;
    max-width: min(100%, 340px);
  }
  @media (min-width: 1024px) {
    .collection-banner__title {
      font-size: var(--cb-title-desk, 53px);
      max-width: 428px;
    }
  }

  /* Nº1 tag: a copy of the homepage hero's frosted pill with its sweeping
     highlight ring, followed by the claim. Metrics match the hero. */
  .collection-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .collection-banner__tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0;
    color: var(--cb-fg, #121212);
    border-radius: 999px;
    padding: 6px 15px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
  }
  .collection-banner__tag-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background:
      linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.95) 45%,
        rgba(255, 255, 255, 1) 55%,
        rgba(255, 255, 255, 0) 100%) -60% 0 / 55% 100% no-repeat,
      linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%) 0 0 / 100% 100% no-repeat;
    animation: cb-tag-sheen 3.2s ease-in-out infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  @keyframes cb-tag-sheen {
    0%   { background-position: -60% 0, 0 0; }
    45%  { background-position: 170% 0, 0 0; }
    100% { background-position: 170% 0, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .collection-banner__tag-badge::before { animation: none; }
  }
  .collection-banner__tag-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cb-sub, #454545);
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .collection-banner__tag-badge { font-size: 15px; line-height: 20px; padding: 7px 17px; }
    .collection-banner__tag-text { font-size: 16px; color: var(--cb-fg, #000); }
  }

  .collection-banner__trust-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Same mark, colour and type as the homepage hero's review line. */
  .collection-banner__stars { display: inline-flex; gap: 0; color: #2BB673; }
  .collection-banner__stars-svg { display: block; width: 95px; height: auto; }
  .collection-banner__trust-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cb-sub, #454545);
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .collection-banner__trust-text { font-size: 16px; color: var(--cb-fg, #000); }
  }

  .collection-banner__endorsement {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    max-width: 100%;
  }
  @media (max-width: 1023px) {
    .collection-banner__endorsement { padding-top: 15px; }
  }
  @media (min-width: 1024px) {
    .collection-banner__endorsement {
      justify-content: flex-start;
      margin-top: 16px;
    }
  }
  .collection-banner__avatars { display: inline-flex; align-items: center; }
  .collection-banner__avatar {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #FFFFFF;
    background: #DDD;
    display: inline-flex;
    margin-left: -13px;
    flex-shrink: 0;
  }
  .collection-banner__avatar:first-child { margin-left: 0; }
  .collection-banner__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .collection-banner__endorsement-text {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    color: var(--cb-sub, #454545);
    margin: 0;
    text-align: left;
  }

  /* Full-bleed background behind the copy, matching the homepage hero. It is
     absolute, so the inner no longer splits into two columns and the content
     keeps the left of the 1400px box. */
  .collection-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    pointer-events: none;
  }
  .collection-banner__media-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
    z-index: 1;
  }
  .collection-banner__media-img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center right;
    display: block;
  }
  /* Phones: same badge and line size as the home hero's Nº1 tag. */
  @media (max-width: 1023px) {
    .collection-banner__tag { gap: 8px; }
    .collection-banner__tag-badge { font-size: 12px; line-height: 16px; padding: 5px 12px; }
    .collection-banner__tag-text { font-size: 13px; }
  }
/* END_SECTION:collection-banner */

/* START_SECTION:creators-bar (INDEX:15) */
.creators-bar {
    background: var(--cb-bg, #FFFFFF);
    color: var(--cb-fg, #121212);
    padding: var(--cb-pad-mob, 24px 0);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .creators-bar { padding: var(--cb-pad-desk, 32px 0); }
  }
  /* Held to the same 1400 box as every other homepage section instead of
     bleeding edge to edge; the marquee still runs inside it and the edge
     fades now land on the box, not the viewport. */
  .creators-bar__viewport {
    overflow: hidden;
    position: relative;
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 16px;
  }
  /* Fade the strip into the section colour at both edges so people do not
     appear to be clipped mid-name. Reads the section's own background, so it
     still works if that colour changes. */
  .creators-bar__viewport::before,
  .creators-bar__viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 8vw, 140px);
    z-index: 2;
    pointer-events: none;
  }
  .creators-bar__viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--cb-bg, #FFFFFF), transparent);
  }
  .creators-bar__viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--cb-bg, #FFFFFF), transparent);
  }
  .creators-bar__marquee {
    display: flex;
    gap: var(--cb-gap, 48px);
    width: max-content;
    animation: creators-bar-scroll var(--cb-speed, 45s) linear infinite;
  }
  @media (max-width: 749px) {
    .creators-bar__marquee { animation-duration: var(--cb-speed-mob, 130s); }
  }
  .creators-bar__row {
    display: flex;
    align-items: center;
    gap: var(--cb-gap, 48px);
    flex: 0 0 auto;
  }
  /* Half the strip plus half a gap. With 2n equal rows the strip is
     2n*row + (2n-1)*gap, so -50% lands half a gap short of a whole number of
     rows; the extra gap/2 closes it. Holds for any even row count — and the
     gap is read from the variable so the row spacing and this offset cannot
     drift apart, which would reintroduce a jump on every loop. */
  @keyframes creators-bar-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--cb-gap, 48px) / 2)); }
  }
  /* With JS the strip keeps moving under the pointer and can be dragged by
     hand, like the UGC strip; the CSS animation stays as the no-JS fallback. */
  .creators-bar__viewport.is-draggable {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .creators-bar__viewport.is-draggable .creators-bar__marquee { animation: none; will-change: transform; }
  .creators-bar__viewport.is-draggable img { -webkit-user-drag: none; pointer-events: none; }
  .creators-bar__viewport.is-dragging { cursor: grabbing; }
  @media (prefers-reduced-motion: reduce) {
    .creators-bar__marquee { animation: none; }
    .creators-bar__viewport { overflow-x: auto; }
  }

  .creators-bar__person {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }
  .creators-bar__avatar {
    width: var(--cb-avatar, 40px);
    height: var(--cb-avatar, 40px);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    background: #F3F3F3;
  }
  .creators-bar__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .creators-bar__identity {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  .creators-bar__name-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .creators-bar__name {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--cb-fg, #121212);
    white-space: nowrap;
  }
  .creators-bar__verified {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    display: block;
  }
  .creators-bar__subtext {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    color: var(--cb-sub, #807E7E);
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .creators-bar__name { font-size: 16px; line-height: 22px; }
    .creators-bar__subtext { font-size: 14px; line-height: 18px; }
  }
/* END_SECTION:creators-bar */

/* START_SECTION:custom-liquid (INDEX:16) */
.clab-custom-liquid {
    padding-top: var(--clab-cl-pt, 0);
    padding-bottom: var(--clab-cl-pb, 0);
    font-family: var(--font-primary--family);
  }
  /* The pasted pages set their own families, often through local custom
     properties; the theme family wins on every element, form controls included. */
  .clab-custom-liquid,
  .clab-custom-liquid *:not(svg):not(svg *) {
    font-family: var(--font-primary--family) !important;
  }
/* END_SECTION:custom-liquid */

/* START_SECTION:dentist (INDEX:17) */
.dentist__anchor { display: block; height: 0; scroll-margin-top: 120px; }
  .dentist {
    background: #FFFFFF;
    color: var(--dt-fg, #000);
    padding: var(--dt-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .dentist {
      background: var(--dt-bg, #FFFFFF);
      padding: var(--dt-pad-desk, 60px 280px);
    }
  }

  .dentist__inner {
    max-width: var(--dt-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .dentist__inner { gap: 48px; }
  }

  .dentist__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .dentist__head { justify-content: space-between; text-align: left; }
  }
  .dentist__nav { display: none; }
  @media (min-width: 1024px) {
    .dentist__nav { display: flex; gap: 8px; }
  }

  .dentist__title {
    font-family: var(--font-primary--family);
    font-size: var(--dt-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--dt-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .dentist__title {
      font-size: var(--dt-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
    }
  }

  /* Same arrows as the real-people carousel (and hears.com's UGC): white
     40px disc, hairline border, soft shadow, 20px chevron. */
  .dentist__nav-btn {
    appearance: none;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 150ms;
  }
  .dentist__nav-btn svg { width: 20px; height: 20px; display: block; }
  .dentist__nav-btn:hover { opacity: 0.75; }
  /* Left arrow = same icon rotated 180°. */
  .dentist__nav-btn--prev svg { transform: rotate(180deg); }

  .dentist__body {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .dentist__body {
      flex-direction: row;
      gap: 75px;
      align-items: stretch;
      min-height: 598px;
    }
  }

  /* Portrait box: a faint tint of the wash colour, with the circular halo
     (.dentist__aura) glowing behind the person. */
  .dentist__photo {
    position: relative;
    aspect-ratio: 577 / 598;
    background: #F8F6FE;
    background: color-mix(in srgb, var(--dt-aura, #9B6DFF) 3%, #FFFFFF);
    border-radius: 16px;
    overflow: hidden;
  }
  /* The halo from the PDP dentist cards (social-proof__card-aura), in the
     PDP wash's own tones rather than the raw purple: a bright core at the
     shoulders fading out before the edge, breathing slowly. */
  .dentist__aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(46% 42% at 50% 52%, color-mix(in srgb, var(--dt-aura, #9B6DFF) 55%, #FFFFFF) 0%, transparent 100%),
      radial-gradient(70% 62% at 50% 58%, color-mix(in srgb, var(--dt-aura, #9B6DFF) 24%, #FFFFFF) 0%, transparent 100%);
    filter: blur(14px);
    transform-origin: 50% 55%;
    animation: dt-aura 6s ease-in-out infinite alternate;
  }
  @keyframes dt-aura {
    from { opacity: 0.8; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1.05); }
  }
  @media (prefers-reduced-motion: reduce) {
    .dentist__aura { animation: none; }
  }
  @media (min-width: 1024px) {
    .dentist__photo {
      flex: 0 0 577px;
      width: 577px;
      aspect-ratio: auto;
      align-self: stretch;
      height: 598px;
      min-height: 598px;
      max-height: 598px;
    }
  }
  .dentist__photo-img, .dentist__photo-placeholder {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block;
  }

  .dentist__content {
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: space-between;
  }
  @media (min-width: 1024px) {
    .dentist__content { flex: 1 1 auto; padding: 0 48px; }
  }

  .dentist__content-top {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .dentist__quote {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: -0.1px;
    color: var(--dt-quote, #121212);
    margin: 0;
  }
  .dentist__quote::before { content: '\201C'; }
  .dentist__quote::after { content: '\201D'; }
  @media (min-width: 1024px) {
    .dentist__quote {
      font-size: 30px;
      max-width: 574px;
      letter-spacing: -0.4px;
      line-height: 1.2;
      margin-bottom: 25px;
    }
  }

  .dentist__author {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .dentist__author-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: var(--dt-name, #828282);
  }
  @media (min-width: 1024px) {
    .dentist__author-name { font-size: 18px; line-height: 26px; }
  }
  .dentist__author-role {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: var(--dt-role, #1C1C1E);
  }
  @media (min-width: 1024px) {
    .dentist__author-role { font-size: 17px; line-height: 26px; }
  }
  .dentist__verified-icon { width: 24px; height: 24px; flex-shrink: 0; }

  /* Slider slides — only .is-active is visible. */
  .dentist__photo-slide,
  .dentist__slide { display: none; }
  .dentist__photo-slide.is-active,
  .dentist__slide.is-active { display: block; }
  .dentist__photo-slide { position: absolute; inset: 0; z-index: 1; }
  .dentist__photo-slide.is-active { display: block; }
  .dentist__photo { position: relative; }
  /* A flat photo background, when the section sets one, replaces the wash. */
  [style*="--dt-photo-bg"] .dentist__photo,
  [style*="--dt-photo-bg"] .dentist__avatar-img,
  [style*="--dt-photo-bg"] .dentist__avatar-placeholder { background: var(--dt-photo-bg); }

  .dentist__avatars {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }
  .dentist__avatar {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 180ms ease;
    text-align: left;
  }
  .dentist__avatar.is-active { opacity: 1; }
  .dentist__avatar:hover { opacity: 0.85; }
  .dentist__avatar.is-active:hover { opacity: 1; }
  .dentist__avatar-img,
  .dentist__avatar-placeholder {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 144.85 / 180.46;
    background: linear-gradient(180deg, #F8F6FE 0%, #F4F0FE 60%, #E0D4FA 84%, #B79DF3 100%);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--dt-aura, #9B6DFF) 3%, #FFFFFF) 0%,
      color-mix(in srgb, var(--dt-aura, #9B6DFF) 6%, #FFFFFF) 60%,
      color-mix(in srgb, var(--dt-aura, #9B6DFF) 24%, #FFFFFF) 84%,
      color-mix(in srgb, var(--dt-aura, #9B6DFF) 55%, #FFFFFF) 100%);
    border-radius: 8px;
    object-fit: cover !important;
    object-position: center top !important;
    display: block;
  }
  @media (min-width: 1024px) {
    .dentist__avatar { flex: 0 0 144.85px; }
    .dentist__avatar-img, .dentist__avatar-placeholder {
      width: 144.85px !important;
      height: 180.46px !important;
      aspect-ratio: auto;
    }
  }
  .dentist__avatar-cap {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: var(--dt-role, #1C1C1E);
  }
/* END_SECTION:dentist */

/* START_SECTION:dual-active (INDEX:18) */
.dual-active {
    position: relative;
    background: #FFFFFF;
    padding: var(--da-pad-mob, 0 16px);
  }
  @media (min-width: 1024px) {
    .dual-active {
      /* Grey at the top fading to white at the bottom. The top colour still
         comes from the section's background setting, so it stays adjustable
         from the customizer. */
      background: linear-gradient(180deg, var(--da-bg, #F5F5F5) 0%, #FFFFFF 100%);
      padding: var(--da-pad-desk, 0 280px);
    }
  }
  /* Top gradient leak removed — merchant supplies a full bg image on the card. */

  .dual-active__inner {
    max-width: var(--da-max-desk, none);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .dual-active__inner { gap: 0; display: block; }
  }

  /* Mobile-only title above the card (Figma has it OUTSIDE the card,
     black on section bg). Hidden on desktop where the inside title
     takes over. */
  .dual-active__title-out {
    font-family: var(--font-primary--family);
    font-size: var(--da-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #121212;
    text-align: center;
    margin: 0;
    white-space: pre-line;
  }
  @media (min-width: 1024px) {
    .dual-active__title-out { display: none; }
  }

  .dual-active__card {
    position: relative;
    width: 100%;
    min-height: 440px;
    border-radius: 30px;
    overflow: hidden;
    isolation: isolate;
    color: var(--da-fg, #FFFFFF);
    background: #1A1A1A;
  }
  @media (min-width: 1024px) {
    .dual-active__card { min-height: var(--da-height-desk, 615px); }
  }

  .dual-active__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* Face image should sit anchored to the RIGHT side of the card so the
     mouth is visible past the dark gradient on the right. On mobile it
     centres; on desktop we anchor it to the right so the visible strip
     matches Figma. */
  .dual-active__media-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  @media (min-width: 1024px) {
    .dual-active__media-img { object-position: right center; }
  }
  .dual-active__media-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .dual-active__media-video { object-position: right center; }
  }

  /* Readability veil over the media, under the copy. Mobile stacks the copy at
     the bottom of the card, so the veil rises from the bottom; from 1024px the
     copy moves into the left column and the veil comes in from the left. */
  .dual-active__overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to top,
      var(--da-ov-1, rgba(10, 10, 10, 0.65)) 0%,
      var(--da-ov-2, rgba(10, 10, 10, 0.47)) 34%,
      var(--da-ov-3, rgba(10, 10, 10, 0.20)) 62%,
      var(--da-ov-0, rgba(10, 10, 10, 0)) 88%
    );
  }
  @media (min-width: 1024px) {
    .dual-active__overlay {
      /* Fully transparent by 54%: the copy column is 720px of a 1400px card,
         so the veil dies exactly where the copy ends and the whole right half
         of the media is left untouched. */
      background: linear-gradient(
        to right,
        var(--da-ov-1, rgba(10, 10, 10, 0.65)) 0%,
        var(--da-ov-2, rgba(10, 10, 10, 0.47)) 20%,
        var(--da-ov-3, rgba(10, 10, 10, 0.20)) 38%,
        var(--da-ov-0, rgba(10, 10, 10, 0)) 54%
      );
    }
  }

  /* Content occupies the LEFT half of the card so the merchant bg image
     (mouth close-up) stays visible on the RIGHT. Title + glass card block
     are centred within this left column. */
  .dual-active__content {
    position: relative;
    z-index: 2;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: auto;
  }
  @media (min-width: 1024px) {
    .dual-active__content {
      padding: 94px 60px 80px 116px;
      gap: 64px;
      align-items: center;
      margin-top: 0;
      max-width: 720px;
    }
  }
  /* Card is a flex-column so content margin-top:auto pushes it to bottom. */
  .dual-active__card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  @media (min-width: 1024px) {
    .dual-active__card { justify-content: flex-start; }
  }

  .dual-active__title {
    display: none;
    font-family: var(--font-primary--family);
    font-size: var(--da-title-mob, 36px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--da-fg, #FFFFFF);
    text-align: center;
    margin: 0;
    white-space: pre-line;
    max-width: 500px;
    align-self: center;
  }
  @media (min-width: 1024px) {
    .dual-active__title {
      display: block;
      font-size: var(--da-title-desk, 54px);
      max-width: 548px;
      align-self: center;
    }
  }

  /* Row-oriented layout: 3 stacked rows, each with 2 columns.
     Only the first row (heads) gets the glass panel. */
  .dual-active__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 560px;
  }
  @media (min-width: 1024px) {
    .dual-active__cards { max-width: 548px; gap: 28px; }
  }

  .dual-active__row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .dual-active__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #FFFFFF;
    padding: 0 12px;
  }

  /* Glass panel behind row 1 only. */
  .dual-active__row--head {
    padding: 18px 16px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 1;
  }
  @media (min-width: 1024px) {
    .dual-active__row--head { padding: 22px 24px; }
  }
  .dual-active__row--desc .dual-active__col { padding-top: 0; }

  /* Tag row: two black bars at the very bottom of the card, edge-to-edge
     (escapes the content padding via negative margins). Each column is a
     31px black strip with centered white Medium text. Desktop reverts
     to plain columns without the black-bar treatment. */
  .dual-active__row--tag {
    width: calc(100% + 24px);
    margin: 0 -12px -20px;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .dual-active__row--tag .dual-active__col {
    padding: 0;
    background: #000000;
    height: 31px;
    justify-content: center;
  }
  @media (min-width: 1024px) {
    .dual-active__row--tag {
      width: 100%;
      margin: 0;
    }
    .dual-active__row--tag .dual-active__col {
      padding-top: 0;
      background: transparent;
      height: auto;
    }
  }

  .dual-active__cards-highlight,
  .dual-active__item.is-active::before,
  .dual-active__item { display: none; }
  .dual-active__item-name {
    font-family: var(--font-primary--family);
    font-size: 30.628px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 1.0209px;
    color: #FFFFFF;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .dual-active__item-name { font-size: 34px; }
  }
  .dual-active__item-sub {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 16.335px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 4px 0 0;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .dual-active__item-sub { font-size: 18px; margin-top: 6px; }
  }

  .dual-active__item-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    align-items: center;
    text-align: center;
  }
  @media (min-width: 1024px) {
    /* Centre the description + tag under each card title on desktop too. */
    .dual-active__item-body { gap: 32px; align-items: center; text-align: center; }
  }
  .dual-active__item-desc {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    color: #C0C0C0;
    margin: 0;
    max-width: 220px;
  }
  @media (min-width: 1024px) {
    .dual-active__item-desc { font-size: 15px; line-height: 23px; max-width: none; min-height: 60px; }
  }
  .dual-active__item-tag {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 16.335px;
    font-weight: 400;
    color: #FFFFFF;
    margin: 0;
  }

  /* Dashed vertical divider spans the full cards column from top to bottom
     — crosses through the glass panel too, matching Figma. */
  .dual-active__divider {
    position: absolute;
    top: 0;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    border-left: 1px dashed rgba(255,255,255,0.55);
    pointer-events: none;
    z-index: 2;
  }
  /* Blue "+" badge sits centred on the head row.
     Positioned relative to .dual-active__cards so it's in the same stacking
     context as the divider — z-index above the dashed line covers it cleanly. */
  .dual-active__plus {
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background-color: var(--da-accent, #3F83F8);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  }
  @media (min-width: 1024px) {
    .dual-active__plus { top: 59px; width: 31px; height: 31px; }
  }
  .dual-active__plus svg { width: 16px; height: 16px; }

  /* Media-only card: no copy, so the height comes from the video's own ratio
     instead of a fixed min-height (3:1 on desktop, square on mobile). */
  .dual-active__card--media-only {
    display: block;
    min-height: 0;
    aspect-ratio: var(--da-ratio-mob, 1);
  }
  @media (min-width: 1024px) {
    .dual-active__card--media-only {
      min-height: 0;
      aspect-ratio: var(--da-ratio-desk, 3);
    }
  }

  /* Full-bleed: no side gutters, no radius, and on desktop the media-only
     card takes a fixed height instead of the 3:1 ratio, which on a wide
     monitor would balloon past 700px. Mobile keeps the square. */
  .dual-active--bleed { padding: 0; }
  .dual-active--bleed .dual-active__inner { max-width: none; }
  .dual-active--bleed .dual-active__card { border-radius: 0; }
  @media (min-width: 1024px) {
    .dual-active--bleed { padding: 0; }
    .dual-active--bleed .dual-active__card--media-only {
      aspect-ratio: auto;
      height: var(--da-media-h-desk, 520px);
    }
  }
/* END_SECTION:dual-active */

/* START_SECTION:dual-tech (INDEX:19) */
.dual-tech {
    position: relative;
    background: var(--dt-bg, #FFFFFF);
    color: var(--dt-fg, #121212);
    padding: var(--dt-pad-mob, 56px 0);
    font-family: var(--font-primary--family);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .dual-tech { padding: var(--dt-pad-desk, 88px 0); }
  }
  /* 1400 content lock + fixed gutters. Not the percentage-padding trick:
     with border-box that padding eats into the 1400 max-width and the stage
     came out 830px wide on a 1970 viewport. */
  .dual-tech__inner {
    position: relative;
    max-width: calc(1400px + 32px);
    margin-inline: auto;
    padding-inline: 16px;
  }
  @media (min-width: 1024px) {
    .dual-tech__inner {
      max-width: calc(1400px + 80px);
      padding-inline: 40px;
    }
  }

  /* ---- header ---- */
  .dual-tech__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  @media (min-width: 1024px) {
    .dual-tech__head { margin-bottom: 40px; gap: 14px; }
  }
  .dual-tech__eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dt-purple-2, #5B2CA7);
  }
  .dual-tech__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--dt-fg, #121212);
  }
  @media (min-width: 1024px) {
    .dual-tech__title { font-size: 44px; letter-spacing: -0.8px; }
  }
  .dual-tech__sub {
    margin: 0;
    font-size: 15.5px;
    line-height: 25px;
    color: #4A4A4A;
    max-width: 620px;
  }

  /* ---- stage ---- */
  .dual-tech__stage {
    --dt-medal: 150px;
    --dt-rise: 520px;
    --dt-clip: polygon(0 0, 100% 0, 100% 36%, 0 64%);
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
    background: var(--dt-purple, #41198D);
  }
  @media (min-width: 1024px) {
    .dual-tech__stage {
      --dt-medal: 200px;
      --dt-rise: 760px;
      --dt-clip: polygon(0 0, 60% 0, 40% 100%, 0 100%);
      --dt-medal-x: 20%;
      aspect-ratio: auto;
      height: var(--dt-stage-h, 620px);
      border-radius: 30px;
    }
  }
  @media (min-width: 1280px) {
    .dual-tech__stage { --dt-medal: 240px; --dt-medal-x: 24%; }
  }

  /* gel: one slow drift, no sweep */
  .dual-tech__gel {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(60% 50% at 85% 20%, rgba(139, 92, 246, .45) 0%, transparent 70%),
      linear-gradient(135deg, #34117E 0%, var(--dt-purple-2, #5B2CA7) 48%, #2E0F6E 100%);
  }
  .dual-tech__gel::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(255, 255, 255, .45) 0.8px, transparent 1.6px),
      radial-gradient(circle, rgba(255, 255, 255, .25) 0.8px, transparent 1.6px);
    background-size: 73px 73px, 121px 121px;
    background-position: 13px 27px, 41px 9px;
    opacity: .5;
  }
  .dual-tech__blob {
    position: absolute;
    width: 55%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    filter: blur(30px);
    opacity: .6;
    will-change: transform;
  }
  .dual-tech__blob--a {
    right: -10%;
    top: -15%;
    background: radial-gradient(circle at 40% 40%, rgba(167, 139, 250, .85) 0%, rgba(139, 92, 246, .3) 45%, transparent 70%);
    animation: dt-drift-a 26s ease-in-out infinite alternate;
  }
  .dual-tech__blob--b {
    right: 8%;
    bottom: -25%;
    width: 65%;
    background: radial-gradient(circle at 50% 50%, rgba(76, 29, 149, .95) 0%, rgba(46, 15, 110, .5) 50%, transparent 72%);
    animation: dt-drift-b 32s ease-in-out infinite alternate;
  }
  @keyframes dt-drift-a {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-8%, 10%) scale(1.08); }
  }
  @keyframes dt-drift-b {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(6%, -8%) scale(1.05); }
  }

  /* pap side */
  .dual-tech__pap-shadow {
    position: absolute;
    inset: 0;
    z-index: 1;
    filter: drop-shadow(0 0 22px rgba(255, 255, 255, .45));
    pointer-events: none;
  }
  .dual-tech__pap {
    position: absolute;
    inset: 0;
    clip-path: var(--dt-clip);
    background:
      radial-gradient(circle, rgba(255, 255, 255, .9) 1px, transparent 2px),
      radial-gradient(circle, rgba(200, 214, 224, .7) 1px, transparent 2px),
      radial-gradient(70% 60% at 20% 20%, #FFFFFF 0%, transparent 70%),
      linear-gradient(160deg, #F7F9FB 0%, #E9EFF3 55%, #DCE5EC 100%);
    background-size: 53px 53px, 89px 89px, auto, auto;
    background-position: 3px 7px, 31px 41px, 0 0, 0 0;
  }
  .dual-tech__fizz {
    position: absolute;
    inset: 0;
    z-index: 2;
    clip-path: var(--dt-clip);
    pointer-events: none;
  }
  .dual-tech__bubble {
    position: absolute;
    left: var(--l, 20%);
    bottom: -40px;
    width: var(--s, 8px);
    height: var(--s, 8px);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, rgba(255, 255, 255, .8) 35%, rgba(196, 212, 222, .45) 68%, transparent 72%);
    box-shadow: inset 0 0 3px rgba(255, 255, 255, .9);
    opacity: 0;
    animation: dt-rise var(--d, 14s) linear infinite;
    animation-delay: var(--dl, 0s);
    will-change: transform, opacity;
  }
  @keyframes dt-rise {
    0% { transform: translate3d(0, 0, 0) scale(.8); opacity: 0; }
    10% { opacity: .7; }
    90% { opacity: .6; }
    100% { transform: translate3d(4px, calc(var(--dt-rise) * -1), 0) scale(1); opacity: 0; }
  }

  /* medals: plain discs, no rings */
  .dual-tech__medal {
    position: absolute;
    z-index: 6;
    width: var(--dt-medal);
    height: var(--dt-medal);
    left: 50%;
    transform: translate(-50%, calc(-50% + 14px));
    opacity: 0;
    transition: opacity 700ms ease, transform 900ms cubic-bezier(.2, .8, .2, 1);
  }
  .dual-tech__medal--pap { top: 24%; }
  .dual-tech__medal--v34 { top: 76%; }
  @media (min-width: 1024px) {
    .dual-tech__medal { top: 50%; }
    .dual-tech__medal--pap { left: var(--dt-medal-x, 24%); }
    .dual-tech__medal--v34 { left: calc(100% - var(--dt-medal-x, 24%)); }
  }
  .dual-tech__disc {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .dual-tech__disc--pap {
    background: #FFFFFF;
    box-shadow:
      0 18px 40px rgba(20, 10, 60, .22),
      inset 0 0 0 4px #FFFFFF,
      inset 0 0 0 6px var(--dt-mint, #B9E7D6);
  }
  .dual-tech__disc--pap::before {
    content: '';
    position: absolute;
    inset: 21%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #F3F6F8 55%, #DCE3E9 100%);
    box-shadow: inset 0 3px 8px rgba(40, 60, 80, .14), inset 0 -2px 6px rgba(255, 255, 255, .9);
  }
  .dual-tech__pap-mark {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: var(--dt-purple, #41198D);
    font-size: 26px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -0.5px;
  }
  .dual-tech__pap-mark svg { width: 13px; height: 13px; fill: currentColor; align-self: center; margin-top: -8px; }
  @media (min-width: 1024px) {
    .dual-tech__pap-mark { font-size: 40px; }
    .dual-tech__pap-mark svg { width: 19px; height: 19px; margin-top: -12px; }
  }
  .dual-tech__disc--v34 {
    background:
      radial-gradient(circle at 38% 32%, rgba(167, 139, 250, .9) 0%, rgba(139, 92, 246, .5) 30%, transparent 55%),
      radial-gradient(circle at 70% 75%, rgba(76, 29, 149, .9) 0%, transparent 55%),
      radial-gradient(circle at 50% 50%, var(--dt-purple-2, #5B2CA7) 0%, #2E0F6E 100%);
    box-shadow:
      0 18px 40px rgba(20, 10, 60, .35),
      inset 0 0 0 4px #FFFFFF,
      inset 0 0 0 7px var(--dt-lilac, #C9B3F0);
    overflow: hidden;
  }
  .dual-tech__disc--v34::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(circle, rgba(255, 255, 255, .85) 0.8px, transparent 1.6px),
      radial-gradient(circle, rgba(255, 255, 255, .45) 0.8px, transparent 1.6px);
    background-size: 41px 41px, 67px 67px;
    background-position: 9px 13px, 23px 41px;
    opacity: .7;
  }
  .dual-tech__disc--v34::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 9%;
    height: 32%;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), transparent);
    filter: blur(2px);
  }
  .dual-tech__v34-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    padding: 2px 6px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 1;
    font-weight: 500;
    background: rgba(46, 15, 110, .35);
    backdrop-filter: blur(3px);
  }
  .dual-tech__v34-mark i { font-style: normal; font-size: .72em; }
  @media (min-width: 1024px) {
    .dual-tech__v34-mark { font-size: 30px; padding: 3px 9px; border-width: 2.5px; border-radius: 5px; }
  }
  .dual-tech__tag {
    position: absolute;
    left: 50%;
    top: calc(100% + 22px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 999px;
  }
  .dual-tech__tag--pap { background: var(--dt-fg, #121212); color: #FFFFFF; }
  .dual-tech__tag--v34 { background: #FFFFFF; color: var(--dt-purple, #41198D); }
  @media (min-width: 1024px) {
    .dual-tech__tag { top: calc(100% + 30px); font-size: 12.5px; line-height: 16px; padding: 7px 12px; }
  }

  /* pill */
  .dual-tech__pill {
    position: absolute;
    z-index: 7;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 10px)) scale(.98);
    opacity: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 18px;
    background: #FFFFFF;
    border-radius: 999px;
    box-shadow:
      0 22px 50px rgba(20, 10, 60, .28),
      0 0 0 1px rgba(65, 25, 141, .06);
    transition: opacity 700ms ease 250ms, transform 900ms cubic-bezier(.2, .8, .2, 1) 250ms;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .dual-tech__pill { gap: 16px; padding: 18px 36px 18px 28px; }
  }
  @media (min-width: 1280px) {
    .dual-tech__pill { gap: 20px; padding: 22px 44px 22px 34px; }
  }
  .dual-tech__a {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
  }
  .dual-tech__a path {
    fill: none;
    stroke: var(--dt-purple, #41198D);
    stroke-width: 7.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (min-width: 1024px) {
    .dual-tech__a { width: 56px; height: 56px; }
  }
  @media (min-width: 1280px) {
    .dual-tech__a { width: 68px; height: 68px; }
  }
  .dual-tech__pill-text {
    display: flex;
    flex-direction: column;
    text-transform: uppercase;
    font-size: 17px;
    line-height: 19px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #2A1160;
  }
  @media (min-width: 1024px) {
    .dual-tech__pill-text { font-size: 27px; line-height: 29px; letter-spacing: -0.5px; }
  }
  @media (min-width: 1280px) {
    .dual-tech__pill-text { font-size: 32px; line-height: 34px; letter-spacing: -0.6px; }
  }
  .dual-tech__plus { color: var(--dt-violet, #8B5CF6); font-weight: 700; }

  /* ---- reveal: one soft rise, nothing else ---- */
  .dual-tech.is-active .dual-tech__medal { opacity: 1; transform: translate(-50%, -50%); }
  .dual-tech.is-active .dual-tech__pill { opacity: 1; transform: translate(-50%, -50%) scale(1); }

  /* ---- readouts ---- */
  .dual-tech__readouts {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid #EAEAEA;
  }
  @media (min-width: 1024px) {
    .dual-tech__readouts {
      margin-top: 36px;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
  }
  .dual-tech__readout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 0;
    border-bottom: 1px solid #EAEAEA;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms ease calc(450ms + var(--i, 0) * 120ms), transform 600ms ease calc(450ms + var(--i, 0) * 120ms);
  }
  @media (min-width: 1024px) {
    .dual-tech__readout {
      padding: 26px 32px 26px 0;
      border-bottom: 0;
    }
    .dual-tech__readout + .dual-tech__readout { padding-left: 32px; border-left: 1px solid #EAEAEA; }
  }
  .dual-tech.is-active .dual-tech__readout { opacity: 1; transform: translateY(0); }
  .dual-tech__readout-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--dt-muted, #6B7280);
  }
  .dual-tech__readout-value {
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--dt-fg, #121212);
    font-variant-numeric: tabular-nums;
  }
  .dual-tech__readout-note {
    font-size: 14.5px;
    line-height: 22px;
    color: #4A4A4A;
  }

  /* ---- reduced motion ---- */
  @media (prefers-reduced-motion: reduce) {
    .dual-tech__bubble,
    .dual-tech__blob { animation: none; }
    .dual-tech__bubble { opacity: .5; bottom: auto; top: calc(10% + var(--l)); }
    .dual-tech__medal,
    .dual-tech__pill,
    .dual-tech__readout { transition: none; }
  }
/* END_SECTION:dual-tech */

/* START_SECTION:faq (INDEX:20) */
.faq {
    background: var(--fq-bg, #F3F3F3);
    color: var(--fq-fg, #000);
    padding: var(--fq-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .faq { padding: var(--fq-pad-desk, 60px 280px); }
  }

  .faq__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .faq__subtitle {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--fq-fg, #000);
    opacity: 0.7;
    margin: 0;
    max-width: 420px;
  }
  /* Overlapped circles, same treatment as the collection banner. */
  .faq__avatars { display: inline-flex; align-items: center; }
  .faq__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #FFFFFF;
    background: #DDD;
    display: inline-flex;
    margin-left: -12px;
    flex-shrink: 0;
  }
  .faq__avatar:first-child { margin-left: 0; }
  .faq__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .faq__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 16px 20px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    margin-top: 6px;
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .faq__subtitle { font-size: 18px; line-height: 28px; }
  }

  .faq__inner {
    max-width: var(--fq-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .faq__inner {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
    }
  }

  .faq__title {
    font-family: var(--font-primary--family);
    font-size: var(--fq-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--fq-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .faq__title {
      font-size: var(--fq-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
      flex: 0 0 auto;
    }
  }
  @media (max-width: 1023px) {
    .faq--center-mob .faq__title { text-align: center; }
  }

  /* Figma: separate white rounded cards, 24px gap between them.
     No shared top border; each item owns its rounded-8 shell. */
  .faq__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .faq__list { max-width: 940px; gap: 24px; }
  }

  .faq__item {
    background: var(--fq-item-bg, #FFFFFF);
    border: 0;
    border-bottom: 1px solid var(--fq-divider, #F3F4F6);
    border-radius: 8px;
    overflow: hidden;
  }
  .faq__summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    list-style: none;
    cursor: pointer;
    min-height: 63px;
    box-sizing: border-box;
  }
  @media (min-width: 1024px) {
    .faq__summary { padding: 11px 24px 11px; min-height: 75px; }
  }
  .faq__summary::-webkit-details-marker { display: none; }
  .faq__question {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--fq-fg, #000);
  }
  @media (min-width: 1024px) {
    .faq__question { font-size: 19px; line-height: 33px; }
  }
  .faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--fq-fg, #000);
    transition: transform 200ms ease;
  }
  .faq__icon--plus { width: 22px; height: 22px; display: inline-flex; }
  .faq__icon--chev { display: none; width: 16px; height: 16px; transform: rotate(0deg); }
  @media (min-width: 1024px) {
    .faq__icon--plus { display: none; }
    .faq__icon--chev { display: inline-flex; }
  }
  /* Chevron points DOWN when closed, flips UP when open (desktop). */
  .faq__item[open] .faq__icon--chev { transform: rotate(180deg); }
  /* Plus rotates 45deg to become × when open (mobile). */
  .faq__item[open] .faq__icon--plus { transform: rotate(45deg); }
  /* Icon variant: plus/minus on ALL devices (desktop_icon = plus). */
  .faq--di-plus .faq__icon--chev { display: none; }
  @media (min-width: 1024px) {
    .faq--di-plus .faq__icon--plus { display: inline-flex; width: 16px; height: 16px; }
  }
  .faq--di-plus .faq__icon-v { transition: opacity 200ms ease; }
  .faq--di-plus .faq__item[open] .faq__icon--plus { transform: none; }
  .faq--di-plus .faq__item[open] .faq__icon-v { opacity: 0; }
  .faq__answer {
    /* Left padding matches the summary's, or the answer hangs left of the
       question it belongs to. */
    padding: 0 20px 20px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--fq-fg, #000);
    opacity: 0.85;
  }
  .faq__answer--structured {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px 24px 24px;
    font-size: 14px;
    line-height: 20px;
    opacity: 1;
  }
  @media (min-width: 1024px) {
    /* After the base rules, not before: the desktop summary padding is 24px,
       and an override placed earlier lost to the base 20px on equal
       specificity, leaving the answer 4px left of its question. */
    .faq__answer { padding: 0 24px 24px; }
  }
  .faq__answer-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .faq__answer-label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--fq-fg, #000);
    margin: 0;
  }
  .faq__answer-text {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: normal;
    font-weight: 400;
    color: #454545;
    margin: 0;
  }
  .faq__product-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    padding-right: 12px;
    background: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
  }
  .faq__product-chip-media {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #F3F3F3;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
  }
  .faq__product-chip-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .faq__product-chip-title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--fq-fg, #000);
  }
  .faq__cta--mob { display: none; }
  @media (max-width: 1023px) {
    .faq .faq__intro .faq__cta { display: none; }
    .faq .faq__cta--mob.faq__cta--mob { display: inline-flex; width: 100%; max-width: none; margin: 0; }
  }
/* END_SECTION:faq */

/* START_SECTION:flavor-protection (INDEX:21) */
.flavor-protection {
    background: var(--fp-bg, #FFFFFF);
    color: var(--fp-fg, #121212);
    padding: var(--fp-pad-mob, 32px 16px);
  }
  @media (min-width: 1024px) {
    .flavor-protection { padding: var(--fp-pad-desk, 60px clamp(40px, 14.58vw, 280px)); }
  }
  .flavor-protection__outer {
    max-width: var(--fp-max-desk, 1920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .flavor-protection__outer { gap: 40px; }
  }
  .flavor-protection__title {
    font-family: var(--font-primary--family);
    font-size: var(--fp-title-mob, 30px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .flavor-protection__title { font-size: var(--fp-title-desk, 48px); line-height: 1.1; letter-spacing: -1px; }
  }

  /* Mobile: one light card stacking media → grid → CTA. */
  .flavor-protection__inner {
    background: var(--fp-card-bg, #F6F6F6);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .flavor-protection__inner {
      background: transparent;
      border-radius: 0;
      padding: 0;
      display: grid;
      grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
      gap: 30px;
      align-items: stretch;
    }
  }
  .flavor-protection__media { order: 1; }
  @media (min-width: 1024px) {
    .flavor-protection__media { order: 2; }
  }
  .flavor-protection__img,
  .flavor-protection__img-placeholder {
    width: 100%;
    aspect-ratio: 358 / 300;
    object-fit: cover;
    display: block;
    border-radius: 16px;
    background: linear-gradient(160deg, #E9EDEC 0%, #F4F6F5 60%, #FBFBFB 100%);
  }
  @media (min-width: 1024px) {
    .flavor-protection__img,
    .flavor-protection__img-placeholder { height: 100%; aspect-ratio: 946 / 532; }
  }

  .flavor-protection__panel {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .flavor-protection__panel {
      order: 1;
      background: #FFFFFF;
      border: 1px solid #EFEFEF;
      border-radius: 20px;
      padding: 32px;
      justify-content: center;
    }
  }
  .flavor-protection__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .flavor-protection__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    padding: 20px 12px;
  }
  /* Dashed dividers between the 2x2 quadrants */
  .flavor-protection__cell:nth-child(odd) { border-right: 1px dashed #D8D8D8; }
  .flavor-protection__cell:nth-child(1),
  .flavor-protection__cell:nth-child(2) { border-bottom: 1px dashed #D8D8D8; }
  .flavor-protection__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #121212;
  }
  .flavor-protection__icon svg { width: 26px; height: 26px; min-width: 26px; min-height: 26px; flex-shrink: 0; }
  .flavor-protection__icon img { width: 46px; height: 46px; object-fit: contain; }
  .flavor-protection__label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #121212;
    margin: 0;
    max-width: 160px;
  }
  @media (min-width: 1024px) {
    .flavor-protection__label { font-size: 16px; line-height: 22px; }
  }
  .flavor-protection__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 24px;
    background: #121212;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
  }
/* END_SECTION:flavor-protection */

/* START_SECTION:flavor-showcase (INDEX:22) */
.flavor-showcase {
    background: var(--fs-bg, #FFFFFF);
    color: var(--fs-fg, #121212);
    padding: var(--fs-pad-mob, 32px 0 32px 16px);
  }
  @media (min-width: 1024px) {
    .flavor-showcase { padding: var(--fs-pad-desk, 60px clamp(40px, 14.58vw, 280px)); }
  }
  .flavor-showcase__inner {
    max-width: var(--fs-max-desk, 1920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__inner { gap: 40px; }
  }
  .flavor-showcase__title {
    font-family: var(--font-primary--family);
    font-size: var(--fs-title-mob, 34px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.4px;
    text-align: center;
    margin: 0;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__title { font-size: var(--fs-title-desk, 54px); line-height: 1.1; letter-spacing: -1px; padding-right: 0; }
  }

  .flavor-showcase__groups { display: flex; flex-direction: column; gap: 32px; }
  .flavor-showcase__group { display: flex; flex-direction: column; gap: 18px; }
  .flavor-showcase__group-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 16px;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__group-head { padding-right: 0; }
  }
  .flavor-showcase__group-label {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    color: var(--fs-label, #121212);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__group-label { font-size: 24px; line-height: 31px; }
  }
  .flavor-showcase__nav { display: flex; gap: 8px; margin-left: auto; }
  @media (min-width: 1024px) {
    .flavor-showcase__nav { display: none; }
  }
  .flavor-showcase__arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #FFFFFF;
    color: #121212;
    cursor: pointer;
  }

  /* Track: mobile = horizontal snap slider; desktop = equal-column grid. */
  .flavor-showcase__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .flavor-showcase__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .flavor-showcase__track {
      display: grid;
      grid-template-columns: repeat(var(--fs-cols, 3), minmax(0, 1fr));
      gap: 16px;
      overflow: visible;
      padding-right: 0;
      aspect-ratio: 1360 / 362;
    }
  }

  .flavor-showcase__tile {
    position: relative;
    flex: 0 0 44%;
    max-width: 320px;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__tile { flex: none; max-width: none; height: 100%; }
  }
  .flavor-showcase__tile-media {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #EDEDED;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__tile-media { height: 100%; aspect-ratio: auto; }
  }
  .flavor-showcase__tile-img,
  .flavor-showcase__tile-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  .flavor-showcase__pill {
    position: absolute;
    left: 13px;
    bottom: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 26px);
    padding: 5px 12px 5px 8px;
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  }
  .flavor-showcase__pill-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; }
  .flavor-showcase__pill-name {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #121212;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (min-width: 1024px) {
    .flavor-showcase__pill-name { font-size: 16px; line-height: 20px; }
    .flavor-showcase__pill-emoji { font-size: 18px; }
  }
/* END_SECTION:flavor-showcase */

/* START_SECTION:footer (INDEX:23) */
.site-footer {
    background: var(--ft-outer-bg, #FAFAFB);
    color: var(--ft-fg, #121212);
    padding: var(--ft-pad-mob, 24px 16px);
    display: flex;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .site-footer { padding: var(--ft-pad-desk, 60px); }
  }

  .site-footer__card {
    background: var(--ft-card-bg, #FFFFFF);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .site-footer__card { padding: 40px 61px; gap: 40px; }
  }

  .site-footer__top {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .site-footer__top { flex-direction: row; }
  }

  .site-footer__brand { display: inline-flex; align-items: center; }
  .site-footer__logo { max-width: 225px; height: auto; object-fit: contain; }
  @media (min-width: 1024px) {
    .site-footer__logo { max-width: 189px; height: 51px; }
  }
  .site-footer__wordmark {
    font-family: var(--font-primary--family);
    font-weight: 700;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--ft-fg, #121212);
  }
  @media (min-width: 1024px) {
    .site-footer__wordmark { font-size: 54px; letter-spacing: 6px; }
  }

  .site-footer__follow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .site-footer__follow-label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--ft-fg, #000);
    padding: 8px 12px;
    border-radius: 6px;
  }
  .site-footer__socials { display: inline-flex; gap: 9px; }
  .site-footer__social {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 200ms ease;
  }
  .site-footer__social:hover { opacity: 0.75; }
  .site-footer__social svg { width: 100%; height: 100%; }

  .site-footer__middle {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .site-footer__middle { flex-direction: row; gap: 16px; align-items: flex-start; }
  }

  .site-footer__middle-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .site-footer__middle-left { flex: 0 0 732px; width: 732px; max-width: 732px; gap: 40px; }
  }

  .site-footer__legal-link { color: inherit; text-decoration: none; }
  .site-footer__legal-link:hover { text-decoration: underline; }
  .site-footer__klaviyo { width: 100%; }
  .site-footer__newsletter {
    background: var(--ft-newsletter-bg, #121212);
    color: var(--ft-newsletter-fg, #FFFFFF);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  @media (min-width: 1024px) {
    .site-footer__newsletter { padding: 33px 34px; gap: 14px; min-height: 0; justify-content: center; }
  }

  .site-footer__newsletter-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .site-footer__newsletter-title {
    font-family: var(--font-primary--family);
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.8px;
    color: var(--ft-newsletter-fg, #FFFFFF);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .site-footer__newsletter-title { font-size: 35px; letter-spacing: -1px; }
  }
  .site-footer__newsletter-sub {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--ft-newsletter-sub, #CBCBCB);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .site-footer__newsletter-sub { font-size: 17px; line-height: 26px; }
  }

  .site-footer__form { display: flex; flex-direction: column; gap: 12px; }
  .site-footer__form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 4px 6px 4px 20px;
  }
  .site-footer__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 14px 0;
    background: transparent;
    border: 0;
    color: var(--ft-fg, #121212);
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
  }
  @media (min-width: 1024px) {
    .site-footer__input { font-size: 16px; line-height: 26px; }
  }
  .site-footer__input::placeholder { color: #605F5F; }
  .site-footer__input:focus { outline: none; }
  .site-footer__submit {
    appearance: none;
    padding: 12px 24px;
    background: #000000;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .site-footer__submit { padding: 12px 32px; font-size: 16px; line-height: 26px; }
  }
  .site-footer__disclaimer {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    color: var(--ft-newsletter-sub, #CBCBCB);
    margin: 0;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .site-footer__disclaimer {
      font-size: 14px;
      line-height: 14px;
      font-weight: 400;
      padding-top: 8px;
      text-align: left;
    }
  }

  .site-footer__payments {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
  }
  @media (min-width: 1024px) {
    .site-footer__payments { justify-content: flex-start; }
  }
  .site-footer__payment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    line-height: 0;
  }
  .site-footer__payment .site-footer__payment-icon,
  .site-footer__payment svg {
    height: 24px;
    width: auto;
    display: block;
    border-radius: 3px;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .site-footer__nav {
      flex: 1 1 auto;
      grid-template-columns: 2.8fr 1fr;
      gap: 16px;
      justify-content: flex-end;
    }
  }
  .site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
  }
  @media (min-width: 1024px) {
    .site-footer__col { text-align: right; align-items: flex-end; }
  }
  .site-footer__col-title {
    font-family: var(--font-primary--family);
    font-size: 22px;
    line-height: normal;
    font-weight: 500;
    color: var(--ft-fg, #121212);
    margin: 0;
  }
  .site-footer__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  @media (min-width: 1024px) {
    .site-footer__col-list { gap: 9px; align-items: flex-end; }
  }
  .site-footer__col-link {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 5px;
    font-weight: 400;
    color: var(--ft-muted, #605F5F);
    text-decoration: none;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .site-footer__col-link { font-size: 16px; line-height: 10px; }
  }
  .site-footer__col-link:hover { color: var(--ft-fg, #121212); }

  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #D1D1D1;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .site-footer__bottom { flex-direction: row; gap: 12px; justify-content: space-between; }
  }
  .site-footer__legal-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    /* display: contents dissolves the wrapper so the legal links and the
       copyright become flex items of __bottom themselves — that is what lets
       the three sit as address / copyright / links under space-between.
       order then puts the copyright between the other two, since the DOM has
       it after the links. */
    .site-footer__legal-wrap { display: contents; }
    .site-footer__copyright { order: 1; }
    .site-footer__legal { order: 2; }
  }
  .site-footer__address,
  .site-footer__legal,
  .site-footer__copyright {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    color: #959595;
    margin: 0;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .site-footer__address,
    .site-footer__legal,
    .site-footer__copyright { font-size: 14px; line-height: 20px; }
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  /* ---- Mobile footer (Figma): newsletter → link columns → follow → payments
     → address → legal → copyright. No brand logo. Flatten the desktop wrappers
     so every leaf orders freely inside the card's flex column. ---- */
  @media (max-width: 1023.98px) {
    .site-footer__card { gap: 28px; }
    .site-footer__brand { display: none; }
    .site-footer__top,
    .site-footer__middle,
    .site-footer__middle-left,
    .site-footer__nav,
    .site-footer__bottom { display: contents; }

    .site-footer__newsletter { order: 1; text-align: center; }
    .site-footer__col { order: 2; width: 100%; }
    .site-footer__follow { order: 3; }
    .site-footer__payments { order: 4; }
    .site-footer__address { order: 5; }
    .site-footer__legal-wrap { order: 6; }

    /* Newsletter: centered heading + sub. */
    .site-footer__newsletter-text { align-items: center; }
    .site-footer__newsletter-title,
    .site-footer__newsletter-sub { text-align: center; }

    /* Follow: label above the icons, centered. */
    .site-footer__follow {
      flex-direction: column;
      gap: 14px;
      align-self: center;
    }
    .site-footer__follow-label {
      padding: 0;
      font-size: 18px;
      line-height: 24px;
      font-weight: 500;
    }
    .site-footer__social { width: 36px; height: 36px; }

    /* Link columns stacked, left aligned, bold uppercase headings. */
    .site-footer__col-title { font-size: 16px; line-height: 22px; }
    .site-footer__col-list { gap: 14px; }

    .site-footer__legal-wrap { align-self: center; }
  }

  /* Phones: the card inside the footer and the newsletter card inside that
     both carried 24px, so the email field was 144px wide. Tighter nesting. */
  @media (max-width: 749px) {
    .site-footer__card { padding: 16px; }
    .site-footer__newsletter { padding: 20px 16px; }
  }
  /* Phones: smaller legal line and payment marks. */
  @media (max-width: 1023px) {
    .site-footer__disclaimer { font-size: 12px; line-height: 16px; }
    .site-footer__payment { height: 18px; }
    .site-footer__payment--extra { display: none; }
    .site-footer__payment svg { height: 18px; width: auto; }
    .site-footer__payments { gap: 4px; }
  }
  /* Tight legal block on phones: 16px lines, 4px between them (0 stacked
     the three lines on top of each other). */
  @media (max-width: 1023px) {
    .site-footer__address, .site-footer__legal, .site-footer__copyright { line-height: 16px; }
    .site-footer__legal-wrap { gap: 4px; }
  }
/* END_SECTION:footer */

/* START_SECTION:formula-grid (INDEX:24) */
.formula-grid {
    position: relative;
    background: var(--fg-bg, #FFFFFF);
    color: var(--fg-fg, #121212);
    padding: var(--fg-pad-mob, 40px 0);
    font-family: var(--font-primary--family);
  }
  @media (min-width: 1024px) {
    .formula-grid { padding: var(--fg-pad-desk, 80px 0); }
  }
  .formula-grid__inner {
    max-width: calc(1400px + 32px);
    margin-inline: auto;
    padding-inline: 16px;
  }
  @media (min-width: 1024px) {
    .formula-grid__inner { max-width: calc(1400px + 80px); padding-inline: 40px; }
  }

  /* ---- layout ---- */
  .formula-grid__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }
  @media (min-width: 1024px) {
    .formula-grid__layout {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 56px;
    }
  }
  @media (min-width: 1280px) {
    .formula-grid__layout { gap: 80px; }
  }

  .formula-grid__media {
    position: relative;
    aspect-ratio: var(--fg-ratio, 1);
    border-radius: 24px;
    overflow: hidden;
    background: var(--fg-media-bg, #F3F3F3);
    isolation: isolate;
  }
  @media (min-width: 1024px) {
    .formula-grid__media { border-radius: 30px; position: sticky; top: 100px; }
  }
  .formula-grid__poster,
  .formula-grid__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .formula-grid__video { z-index: 1; pointer-events: none; }

  /* column: lead / index / cta, index takes the slack */
  .formula-grid__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .formula-grid__col { padding-block: 8px; }
  }
  .formula-grid__lead { margin: 0 0 22px; }
  @media (min-width: 1024px) { .formula-grid__lead { margin-bottom: 34px; } }
  .formula-grid__kicker {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 18px;
    color: var(--fg-muted, #8A8A8A);
  }
  .formula-grid__lead-text {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: var(--fg-fg, #121212);
    max-width: 22ch;
  }
  @media (min-width: 1024px) {
    .formula-grid__lead-text { font-size: 30px; line-height: 36px; letter-spacing: -0.5px; }
  }

  /* ---- index: scroll-driven, in the hears.com manner. Each active lights
     its bar and unfolds as the list travels up the screen; nothing to click. ---- */
  .formula-grid__index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 26px;
  }
  @media (min-width: 1024px) { .formula-grid__index { gap: 34px; } }
  .formula-grid__item {
    position: relative;
    padding-left: 20px;
  }
  .formula-grid__bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 500px;
    background: var(--fg-line, #EAEAEA);
    transition: background 420ms ease;
  }
  .formula-grid__item.is-lit .formula-grid__bar { background: #3F83F8; }
  .formula-grid__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--fg-fg, #121212);
  }
  .formula-grid__name {
    font-size: 22px;
    line-height: 28px;
    font-weight: 400;
    letter-spacing: -0.3px;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .formula-grid__head { gap: 25px; }
    .formula-grid__name { font-size: 28px; line-height: 34px; letter-spacing: -0.5px; }
  }
  /* all three the same: a square */
  .formula-grid__thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: var(--fg-media-bg, #F3F3F3);
    overflow: hidden;
    display: block;
  }
  @media (min-width: 1024px) { .formula-grid__thumb { width: 88px; height: 88px; border-radius: 14px; } }
  .formula-grid__thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* panel: height and opacity are written by the scroll script */
  .formula-grid__panel { height: 0; overflow: hidden; }
  .formula-grid__panel-inner { opacity: 0; }
  .formula-grid.is-static .formula-grid__panel { height: auto !important; }
  .formula-grid.is-static .formula-grid__panel-inner { opacity: 1 !important; }
  .formula-grid.is-static .formula-grid__bar { background: #3F83F8; }
  .formula-grid__detail {
    margin: 12px 0 2px;
    font-size: 15.5px;
    line-height: 25px;
    color: var(--fg-sub, #4A4A4A);
    max-width: 46ch;
  }
  @media (min-width: 1024px) { .formula-grid__detail { font-size: 17px; line-height: 27px; margin-top: 14px; } }

  /* ---- CTA at the foot of the column ---- */
  .formula-grid__cta { margin-top: 28px; display: flex; }
  @media (min-width: 1024px) { .formula-grid__cta { margin-top: 32px; } }
  .formula-grid__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    padding: 16px 32px;
    border-radius: 8px;
    background: var(--fg-fg, #121212);
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    transition: background 200ms ease, gap 200ms ease;
  }
  .formula-grid__btn:hover { background: #000000; gap: 14px; }
  .formula-grid__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
  @media (max-width: 1023px) { .formula-grid__btn { width: 100%; } }
/* END_SECTION:formula-grid */

/* START_SECTION:header (INDEX:49) */
/* The header element is now just the wrap: the visible surface is the
     inner, drawn as a floating card. Background and the solid-state swap
     move with it, or they would paint behind the card's rounded corners. */
  .site-header {
    background: transparent;
    color: var(--sh-fg, #000);
    /* Above the scrim (25): the scrim blurs the page, never the header or the
       mega panel that lives inside it. */
    z-index: 30;
    position: relative;
    padding: 21px 16px 12px;
  }
  .site-header.is-scrolled { padding: 15px 16px 12px; }
  /* Only a header that sits in the page at rest carries the band. */
  .site-header.is-solid:not(.is-scrolled) { background: rgb(251 251 251); }
  .site-header__scrim {
    position: fixed;
    top: var(--scrim-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    background: rgba(255, 255, 255, 0.30);
    backdrop-filter: blur(16px) saturate(110%);
    -webkit-backdrop-filter: blur(16px) saturate(110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 260ms ease, visibility 0s linear 260ms;
  }
  .site-header[data-mega-open="true"] + .site-header__scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 260ms ease;
  }
  .site-header__inner {
    max-width: 1400px;
    margin-inline: auto;
    background: var(--sh-bg, #FFFFFF);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 260ms ease, color 200ms ease;
  }
  /* Product pages carry no shadow under the card. */

  /* Transparent overlay on home — header floats over hero via negative margin */
  .site-header[data-overlay="true"] {
    background: transparent;
    z-index: 30;
    /* +12px for the wrap's top padding, or the hero would sit that much low. */
    margin-bottom: calc((var(--sh-height-mob, 60px) + 27px) * -1);
  }
  @media (min-width: 1024px) {
    .site-header[data-overlay="true"] {
      margin-bottom: calc((var(--sh-height-desk, 80px) + 27px) * -1);
    }
  }
  /* Strip icon-bg + nav pill blur so overlay reads cleanly against hero */
  .site-header[data-overlay="true"] .site-header__pill { backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Sticky-on-scroll: fixed under announcement bar, solid bg, colour swap.
     Applied when JS toggles .is-scrolled OR when overlay is off (page loads solid). */
  /* Fixed, not sticky: the section wrapper is exactly as tall as the header,
     so a sticky element has zero travel and never detaches. The wrapper gets
     a matching min-height from JS so taking the header out of flow does not
     pull the page up under it. */
  [data-sticky-mode="always"].site-header,
  [data-sticky-mode="scroll_up"].site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition:
      background-color 260ms ease,
      color 200ms ease,
      transform 260ms ease,
      box-shadow 260ms ease;
  }
  /* Override for overlay-on-home so it can float above hero via negative margin — JS still adds sticky when scrolled via .is-scrolled → position:fixed. */
  .site-header[data-overlay="true"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .site-header[data-overlay="true"].is-scrolled {
    position: fixed;
    top: 0;
    margin-bottom: 0;
  }
  /* Phones: a tighter floating header, after gudslip's (56px pill, 12px
     off the top and the sides, 40px icon buttons, smaller logo). */
  @media (max-width: 1023px) {
    .site-header { padding: 12px 12px 12px; }
    .site-header[data-overlay="true"] { margin-bottom: calc((var(--sh-height-mob, 56px) + 24px) * -1); }
    .site-header.is-scrolled { padding: 10px 12px 10px; }
    .site-header .site-header__inner--mob { padding: 6px 14px; }
    /* Same lift as histrips' mobile header: a hairline ring plus two soft
       shadows, no border. */
    .site-header .site-header__inner--mob {
      border: 0;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
    }
    .site-header .site-header__icon-pill { padding: 8px; }
    .site-header .site-header__icon-pill-inner { width: 20px; height: 20px; }
    /* Cart count: a 15px dot with 10px type, tucked onto the icon's corner. */
    .site-header .site-header__cart-bubble {
      top: -1px;
      right: -1px;
      min-width: 15px;
      height: 15px;
      padding: 0 3px;
      border-radius: 8px;
      font-size: 10px;
      line-height: 15px;
    }
  }
  .site-header.is-solid,
  .site-header.is-scrolled { color: var(--sh-solid-fg, #000000); }
  .site-header.is-solid .site-header__inner,
  .site-header.is-scrolled .site-header__inner {
    background: var(--sh-solid-bg, #FFFFFF);
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
  }
  /* Product pages carry no shadow under the header card, in either state. */
  /* No shadow on the product page, so the hairline is what draws the card. */
  body[class*="template-product"] .site-header__inner,
  body[class*="template-product"] .site-header.is-solid .site-header__inner,
  body[class*="template-product"] .site-header.is-scrolled .site-header__inner {
    box-shadow: none;
    border: 1px solid rgb(0 0 0 / 12%);
  }
  .site-header.is-solid .site-header__pill,
  .site-header.is-scrolled .site-header__pill {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header.is-hidden { transform: translateY(-100%); }

  /* Desktop shell — 3-column grid guarantees the logo sits at true viewport centre
     regardless of how wide the nav pill or right cluster grow. */
  .site-header__inner--desk {
    display: none;
    height: var(--sh-height-desk, 80px);
    /* Same 1400px box as every section below, so the nav lines up with the
       page content instead of sitting on its own margin. */
    padding: 10px 24px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .site-header__inner--desk { display: grid; }
  }
  .site-header__inner--desk > .site-header__nav { justify-self: start; }
  .site-header__inner--desk > .site-header__brand { justify-self: center; }
  .site-header__inner--desk > .site-header__right { justify-self: end; }

  /* Mobile shell — 3-col grid: burger start · logo CENTER · cart end */
  .site-header__inner--mob {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    padding: 10px var(--sh-pad-x-mob, 20px);
    min-height: var(--sh-height-mob, 60px);
  }
  .site-header__inner--mob > .site-header__icon-pill--start { justify-self: start; }
  .site-header__inner--mob > .site-header__brand--mob { justify-self: center; }
  .site-header__inner--mob > .site-header__actions--mob { justify-self: end; display: inline-flex; align-items: center; gap: 2px; }
  @media (min-width: 1024px) {
    .site-header__inner--mob { display: none; }
  }

  /* Left nav pill (desktop) */
  .site-header__nav {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
  }
  .site-header__pill {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .site-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: var(--sh-fg-muted, #807E7E);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    transition: color 160ms ease;
  }
  .site-header__nav-link:hover,
  .site-header__nav-link.is-active { color: var(--sh-fg, #000); }
  .site-header__nav-caret {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: currentColor;
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
  }
  /* Points up while the panel is open, so the arrow reads as a toggle. */
  .site-header[data-mega-open="true"] .site-header__nav-link.has-mega .site-header__nav-caret {
    transform: rotate(180deg);
  }

  /* Brand */
  .site-header__brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
  }
  .site-header__logo {
    width: var(--sh-logo-w-desk, 177px);
    height: var(--sh-logo-h-desk, 36px);
    object-fit: contain;
    display: block;
  }
  .site-header__logo--mob {
    width: var(--sh-logo-w-mob, 138px);
    height: var(--sh-logo-h-mob, 28px);
  }
  .site-header__wordmark {
    font-family: var(--font-primary--family);
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: inherit;
  }
  @media (min-width: 1024px) {
    .site-header__wordmark { font-size: 24px; letter-spacing: 3px; }
  }
  .site-header__wordmark--mob { font-size: 18px; letter-spacing: 2px; }

  /* Right cluster (desktop) */
  .site-header__right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto;
  }

  /* Locale */
  .site-header__locale { position: relative; }
  .site-header__locale > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: var(--sh-fg, #000);
  }
  .site-header__locale > summary::-webkit-details-marker { display: none; }
  .site-header__locale-flag {
    display: inline-flex;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  .site-header__locale-flag svg { width: 100%; height: 100%; display: block; }
  .site-header__locale-label { white-space: nowrap; }
  .site-header__locale-caret { display: inline-flex; color: currentColor; }
  .site-header__locale-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px;
    background: #FFF;
    color: #000;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 40;
  }
  .site-header__locale-title {
    font-family: var(--font-primary--family);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #454545;
    padding: 0 8px;
    margin-bottom: 6px;
  }
  .site-header__locale-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .site-header__locale-option {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 12px;
    text-align: left;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #000;
    cursor: pointer;
    border-radius: 6px;
  }
  .site-header__locale-option:hover { background: #F3F3F3; }
  .site-header__locale-option.is-active { font-weight: 500; }

  /* Icon button — desktop grey pill */
  /* The desktop marks are drawn at 24px, as the old cart icon was. */
  .site-header__icon-btn > svg { width: 24px; height: 24px; display: block; }
  .site-header__icon-btn {
    /* No grey well anywhere: it only ever disappeared on the transparent
       overlay pages, which made the collection header look different. */
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sh-fg, #000);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 160ms ease;
  }
  .site-header__icon-btn:hover { opacity: 0.75; }

  /* Mobile icon pill — transparent + backdrop-blur-23, p-9.2 + 27.6 inner */
  .site-header__icon-pill {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,0);
    color: var(--sh-fg, #000);
    padding: 9.2px;
    border-radius: 4.6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
    backdrop-filter: blur(23px);
    -webkit-backdrop-filter: blur(23px);
    flex-shrink: 0;
    transition: opacity 160ms ease;
  }
  .site-header__icon-pill:hover { opacity: 0.75; }
  .site-header__icon-pill-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27.6px;
    height: 27.6px;
  }
  .site-header__icon-pill-inner svg { width: 100%; height: 100%; display: block; }

  .site-header__cart { position: relative; }
  .site-header__cart-bubble[hidden] { display: none !important; }
  .site-header__cart-bubble {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
  }
  /* Desktop sits the bubble inside the icon rather than hanging off its
     corner, at a smaller size to suit the 70px header. Only the properties
     that differ — the rest carries over from the rule above. */
  @media (min-width: 1024px) {
    .site-header__cart-bubble {
      top: 5px;
      right: 2px;
      min-width: 15px;
      height: 15px;
      font-size: 10px;
      line-height: 16px;
    }
  }

  .site-header__locale-form fieldset { border: 0; padding: 0; margin: 0; }

  /* Megamenu (desktop only, hover-reveal under the first nav link).
     Nav link gets an invisible ::after that overlaps the panel top edge so
     the cursor never crosses a dead-zone between them (hover-bridge). */
  .site-header__mega {
    display: none;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 320ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
    pointer-events: none;
    position: relative;
  }
  @media (min-width: 1024px) {
    .site-header__mega { display: block; }
    .site-header__nav-link { position: relative; }
    /* Invisible bridge under each nav link overlapping the mega panel edge
       (only active while the menu is open so it doesn't block clicks). */
    .site-header[data-mega-open="true"] .site-header__nav-link::after {
      content: '';
      position: absolute;
      left: -8px;
      right: -8px;
      top: 100%;
      height: 32px;
      background: transparent;
    }
  }
  .site-header[data-mega-open="true"] .site-header__mega {
    max-height: 600px;
    opacity: 1;
    pointer-events: auto;
  }
  .site-header__mega-panel {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    max-width: 1400px;
    margin-inline: auto;
    padding: 34px 24px 34px 16px;
    gap: 24px;
    min-height: 456px;
    background: #FFFFFF;
    /* Same card treatment as the header, and the same 12px gap the header
       itself keeps from the announcement bar. */
    border: 0;
    border-radius: 12px;
    margin-top: 12px;
  }

  .site-header__mega-sidebar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 342px;
    flex: 0 0 342px;
    padding: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16.4px);
    -webkit-backdrop-filter: blur(16.4px);
  }
  .site-header__mega-category {
    appearance: none;
    border: 0;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 240px;
    /* Right padding matches the active state so nothing shifts when a
       category lights up — the arrow used to jump left on hover. */
    padding: 8px 16px 8px 8px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 160ms ease;
  }
  .site-header__mega-category:hover,
  .site-header__mega-category.is-active { background: #F3F3F3; }
  .site-header__mega-category:hover .site-header__mega-thumb,
  .site-header__mega-category.is-active .site-header__mega-thumb {
    background: var(--thumb-bg, #F3F3F3);
  }
  /* Sits at the foot of the category list as a plain link — it opens a
     collection rather than switching the panel, so it is not a tab. */
  .site-header__mega-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    width: 240px;
    min-height: 45px;
    padding: 0 16px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Grey by default; the category's own colour only appears on hover or when
     it is the active tab, and it lands on the icon rather than the whole row. */
  .site-header__mega-thumb {
    background: #F3F3F3;
    transition: background 160ms ease;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .site-header__mega-thumb-img {
    width: 15px !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
  }
  .site-header__mega-label {
    flex: 1 1 auto;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #000;
    white-space: nowrap;
  }
  .site-header__mega-arrow {
    display: inline-flex;
    flex-shrink: 0;
    color: #000;
  }

  .site-header__mega-products {
    flex: 1 1 auto;
    min-width: 0;
    background: #FFFFFF;
    display: flex;
    align-items: flex-start;
  }
  .site-header__mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 180px;
    gap: 24px;
    width: 100%;
  }
  .site-header__mega-grid[hidden] { display: none; }
  .site-header__mega-empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 14px;
    color: #807E7E;
    padding: 32px 0;
    margin: 0;
  }

  .site-header__mega-col { display: flex; flex-direction: column; gap: 16px; width: 100%; }
  .site-header__mega-col[hidden] { display: none; }

  /* Staggered entry, left to right. Keyed off the open attribute and the
     panel's hidden state, so it replays every time the menu opens and again
     when a category swaps the grid — the selector stops matching and starts
     matching again, which restarts the animation. */
  @media (prefers-reduced-motion: no-preference) {
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card,
    .site-header[data-mega-open="true"] .site-header__mega-category,
    .site-header[data-mega-open="true"] .site-header__mega-sidebar-title,
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-col-title,
    .site-header[data-mega-open="true"] .site-header__mega-cta {
      animation: mega-in 460ms cubic-bezier(.16, 1, .3, 1) both;
    }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(1) { animation-delay: 0ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(2) { animation-delay: 55ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(3) { animation-delay: 110ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(4) { animation-delay: 165ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(5) { animation-delay: 220ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-card:nth-child(6) { animation-delay: 275ms; }
    .site-header[data-mega-open="true"] .site-header__mega-category:nth-of-type(1) { animation-delay: 0ms; }
    .site-header[data-mega-open="true"] .site-header__mega-category:nth-of-type(2) { animation-delay: 55ms; }
    .site-header[data-mega-open="true"] .site-header__mega-category:nth-of-type(3) { animation-delay: 110ms; }
    .site-header[data-mega-open="true"] .site-header__mega-category:nth-of-type(4) { animation-delay: 165ms; }
    .site-header[data-mega-open="true"] .site-header__mega-category:nth-of-type(5) { animation-delay: 220ms; }
    .site-header[data-mega-open="true"] .site-header__mega-cta { animation-delay: 300ms; }
    .site-header[data-mega-open="true"] .site-header__mega-col:not([hidden]) .site-header__mega-col-title { animation-delay: 40ms; }
  }
  @keyframes mega-in {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: none; }
  }
  .site-header__mega-col-title,
  .site-header__mega-sidebar-title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #000;
    margin: 0;
  }
  /* Indented by the category button's own left padding, so the heading lines
     up with the grey icon wells rather than the invisible button edge. */
  .site-header__mega-sidebar-title { margin-bottom: 4px; padding-left: 8px; }

  .site-header__mega-card {
    display: flex;
    align-items: center;
    gap: 16px;
    color: inherit;
    background: #F3F3F3;
    border-radius: 8px;
    padding: 14px 30px 14px 14px;
  }
  /* Square well for the shot, so every card reads the same regardless of the
     source image's aspect ratio. */
  .site-header__mega-card-media {
    flex: 0 0 124px;
    width: 124px;
    height: 124px;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .site-header__mega-card-media:hover { opacity: 0.9; }
  .site-header__mega-card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .site-header__mega-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header__mega-card-cta {
    margin-top: 10px;
    width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    text-decoration: none;
  }
  .site-header__mega-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: #000000;
    z-index: 1;
  }
  .site-header__mega-card-price {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 1;
  }
  .site-header__mega-card-price-current {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #000000;
  }
  .site-header__mega-card-price-compare {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #A7A7A7;
    text-decoration: line-through;
  }

  /* ---- Search panel, after gudslip's: a scrim under the header, a white
     bar (field + round close) and a body with popular searches and the
     bestsellers; typing swaps them for suggestions and products. Cards are
     the phone menu drawer's product card. ---- */
  .search-overlay[hidden] { display: none; }
  .search-overlay__scrim {
    position: fixed;
    inset: 0;
    z-index: 28;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 220ms ease;
  }
  .search-overlay__panel {
    position: fixed;
    top: var(--so-top, 116px);
    left: 12px;
    right: 12px;
    z-index: 31;
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - var(--so-top, 116px) - 12px);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  }
  .search-overlay[data-open="true"] .search-overlay__scrim { opacity: 1; }
  .search-overlay[data-open="true"] .search-overlay__panel { opacity: 1; transform: translateY(0); }
  .search-overlay__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 8px 8px 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 12px 12px 0 0;
  }
  .search-overlay__bar > svg { width: 18px; height: 18px; flex: 0 0 auto; color: #121212; }
  .search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #121212;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
  .search-overlay__input::placeholder { color: #8A8A8A; }
  .search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .search-overlay__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    border-radius: 999px;
    background: #EFEFEF;
    color: #121212;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .search-overlay__close:hover { background: #E2E2E2; }
  .search-overlay__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 16px 24px;
    background: #FFFFFF;
    border-radius: 0 0 12px 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .search-overlay__heading {
    margin: 0 0 12px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
  }
  .search-overlay__terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .search-overlay__term {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #F3F3F3;
    border-radius: 999px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #121212;
    text-decoration: none;
  }
  .search-overlay__term svg { width: 11px; height: 11px; flex: 0 0 auto; color: #6E6E6E; }
  .search-overlay__term strong { font-weight: 500; }
  .search-overlay__empty {
    margin: 0 0 12px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #605F5F;
  }
  .search-overlay__empty[hidden] { display: none; }
  .search-overlay__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .search-overlay__prod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
  }
  .search-overlay__prod-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .search-overlay__prod-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .search-overlay__prod-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #000000;
  }
  .search-overlay__prod-cta {
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    text-decoration: none;
  }
  .search-overlay__viewall {
    display: inline-flex;
    margin-top: 16px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #121212;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .search-overlay__viewall[hidden] { display: none; }
  @media (min-width: 1024px) {
    /* Same 1400px box and 16px gutters as the header card above it. */
    .search-overlay__panel {
      left: 50%;
      right: auto;
      width: min(1400px, 100vw - 32px);
      transform: translate(-50%, -6px);
    }
    .search-overlay[data-open="true"] .search-overlay__panel { transform: translate(-50%, 0); }
    .search-overlay__bar { padding: 10px 12px 10px 20px; }
    .search-overlay__input { font-size: 18px; line-height: 28px; }
    .search-overlay__body { flex-direction: row; gap: 40px; padding: 24px 24px 28px; }
    .search-overlay__aside { flex: 0 0 280px; }
    .search-overlay__main { flex: 1 1 auto; min-width: 0; }
    .search-overlay__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .search-overlay__prod { padding: 14px; }
    .search-overlay__prod-title { font-size: 16px; line-height: 22px; }
  }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:50) */
.hero-section {
    background: var(--hero-bg, #FFFFFF);
    color: var(--hero-fg, #000000);
    padding: var(--hero-pad-mob, 24px 16px 40px);
    position: relative;
    overflow: hidden;
    min-height: var(--hero-height-mob, 780px);
  }
  @media (min-width: 1024px) {
    .hero-section {
      padding: var(--hero-pad-desk, 0);
      min-height: 0;
    }
  }
  /* Full-bleed image behind everything — content overlays on top.
     Section min-height keeps the current visual height while the bg
     spans the entire block. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
  }
  .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  @media (min-width: 1024px) {
    /* Anchored left: cover crops from whichever side is not anchored, and
       with the taller hero anchoring right was eating the empty left of the
       shot — the model's hand landed on the copy. */
    .hero__bg-img { object-position: 35% center; }
  }

  /* Slide video: same box and crop as the still it covers. */
  .hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    pointer-events: none;
    display: block;
  }
  @media (min-width: 1024px) {
    .hero__bg-video { object-position: 35% center; }
  }
  .hero__slide.is-active .hero__bg-video {
    animation: hero-img-in 300ms ease-out both;
  }

  /* Readability scrim for slides whose art is busy behind the copy. Mobile
     stacks the copy at the top, desktop keeps it on the left. */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--hero-scrim, transparent) 0%, transparent 62%);
  }
  @media (min-width: 1024px) {
    .hero__scrim {
      background: linear-gradient(to right, var(--hero-scrim, transparent) 0%, transparent 58%);
    }
  }

  .hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  @media (min-width: 1024px) {
    .hero__inner {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 0;
      min-height: clamp(700px, 52vw, var(--hero-height-desk, 812px));
      /* Locked to the header's text edge at every width: the header is a
         1400px card inside 16px gutters, and its own padding adds 24px. The
         hero's max_width_desk setting (1920) is deliberately not used here —
         it would drift the copy away from the nav as the viewport grows. */
      max-width: calc(1400px + 32px);
      margin-inline: auto;
      padding-left: calc(16px + 24px);
      padding-right: calc(16px + 24px);
      /* Figma places content at top: 250px (13.02% of 1920). Clamp so it stays
         visually in-place across breakpoints. Bottom padding follows the same
         proportional curve. */
      padding-top: clamp(60px, 13.02vw, 250px);
      padding-bottom: clamp(40px, 4vw, 80px);
      position: relative;
    }
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .hero__content {
      align-items: flex-start;
      text-align: left;
      gap: 40px;
      flex: 0 0 auto;
      width: var(--hero-content-max-desk, 548px);
      max-width: var(--hero-content-max-desk, 548px);
      padding: 0;
    }
  }

  /* Ranking tag: a filled pill followed by the claim, both on one line.
     No letter-spacing — the width comes from the pill's padding. */
  .hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
  }
  /* Frosted pill: the blur does the work, so the fill stays faint and a
     hairline border keeps the edge readable over a light photo. */
  .hero__tag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 0;
    color: var(--hero-fg, #121212);
    border-radius: 999px;
    padding: 6px 15px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
  }
  /* Gradient ring only. The padding-box/border-box background trick paints
     the gradient across the whole element and relies on an OPAQUE fill to
     hide the middle — with a translucent pill it showed through and read as
     a background. This masks a 1px frame instead: the ring is filled and the
     interior punched out, so the fill stays translucent. */
  .hero__tag-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* Only the sweep: a narrow white highlight travelling over a transparent
       base, so the ring is invisible at rest and reads purely as a flash.
       The base layer stays so the two-value background-position still maps
       one value per layer. */
    background:
      linear-gradient(100deg,
        rgba(var(--hero-sheen, 255, 255, 255), 0) 0%,
        rgba(var(--hero-sheen, 255, 255, 255), 0.95) 45%,
        rgba(var(--hero-sheen, 255, 255, 255), 1) 55%,
        rgba(var(--hero-sheen, 255, 255, 255), 0) 100%) -60% 0 / 55% 100% no-repeat,
      linear-gradient(90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 100%) 0 0 / 100% 100% no-repeat;
    animation: hero-tag-sheen 3.2s ease-in-out infinite;
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
  /* Light art (a white studio shot): a white pill and a white ring vanish,
     so the pill takes a faint grey fill and the white flash sweeps across
     the whole pill, behind the label, instead of only along its edge. */
  .hero__slide--light .hero__tag-badge { background: rgba(18, 18, 18, 0.06); }
  .hero__slide--light .hero__tag-badge::before {
    z-index: -1;
    -webkit-mask: none;
    mask: none;
  }
  @keyframes hero-tag-sheen {
    0%   { background-position: -60% 0, 0 0; }
    45%  { background-position: 170% 0, 0 0; }
    100% { background-position: 170% 0, 0 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__tag-badge::before { animation: none; }
  }
  /* Same treatment as the review line below the CTA. */
  .hero__tag-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--hero-fg-soft, #454545);
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .hero__tag-badge { font-size: 15px; line-height: 20px; padding: 7px 17px; }
    .hero__tag-text { font-size: 16px; color: var(--hero-fg, #000); }
  }

  .hero__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
  }
  .hero__rating-stars {
    display: inline-flex;
    gap: 0;
    color: #2BB673;
  }
  /* Scaled via width with height auto so the 78x14 ratio is preserved —
     the snippet's own attributes stay the intrinsic size. */
  .hero__rating-svg { display: block; width: 95px; height: auto; }
  .hero__rating-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--hero-fg-soft, #454545);
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .hero__rating-text {
      font-size: 16px;
      color: var(--hero-fg, #000);
    }
  }

  .hero__title {
    font-family: var(--font-primary--family);
    font-weight: 400;
    font-size: var(--hero-title-mob, 40px);
    line-height: 1.2;
    letter-spacing: -1px;
    color: var(--hero-fg, #000);
    margin: 0;
    max-width: 100%;
  }
  @media (min-width: 1024px) {
    .hero__title {
      font-size: var(--hero-title-desk, 64px);
      /* 452px: "Dientes más blancos hoy." (445px at 44px) fits the first line,
         and the other two slides still break after their second sentence
         (their third would wrap at 462px). */
      max-width: 452px;
    }
  }

  .hero__cards {
    /* Hidden for now. The blocks still render, so the labels survive in the
       customizer and this is a one-line revert — delete the display rule to
       bring the row back. */
    display: none;
    /* Mobile: single row of 4 square 83×83 cards (Figma). Desktop: same
       pattern with the Figma desktop scale (115px). */
    gap: 8px;
    width: 100%;
    justify-content: center;
  }
  @media (min-width: 1024px) {
    .hero__cards {
      gap: 14.738px;
      width: auto;
      justify-content: flex-start;
    }
  }
  .hero__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 11px;
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    max-width: 83px;
    min-height: 83px;
    padding: 10px 4px;
    border: 1px solid var(--hero-card-border, #D7D7D7);
    border-radius: 9px;
    background: transparent;
    /* Figma spec: 61.14px backdrop blur on mobile. */
    backdrop-filter: blur(61px);
    -webkit-backdrop-filter: blur(61px);
  }
  @media (min-width: 1024px) {
    .hero__card {
      flex: 0 0 auto;
      aspect-ratio: auto;
      width: 115.447px;
      max-width: none;
      min-height: 108.078px;
      gap: 14.738px;
      padding: 12.282px;
      border-width: 1.228px;
      border-radius: 11.053px;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(75px);
      -webkit-backdrop-filter: blur(75px);
    }
  }
  .hero__card-icon {
    display: inline-flex;
    color: var(--hero-icon, #2B6EFF);
    width: 18px;
    height: 12px;
  }
  @media (min-width: 1024px) {
    .hero__card-icon {
      width: 22px;
      height: 15px;
    }
  }
  .hero__card-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .hero__card-label {
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--hero-card-label, #454545);
    text-align: center;
  }
  @media (min-width: 1024px) {
    .hero__card-label {
      font-size: 14.738px;
      line-height: 17.194px;
      letter-spacing: 0.6141px;
    }
  }

  .hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #000000;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    width: 100%;
    max-width: 400px;
    transition: opacity 200ms ease;
    margin-top: 4px;
  }
  @media (min-width: 1024px) {
    /* Matches the see-how "Try Our Formula" button. */
    .hero__cta {
      width: auto;
      align-self: flex-start;
      padding: 15px 34px;
      font-size: 17px;
      line-height: 24px;
      font-weight: 400;
      margin-top: 0;
    }
  }
  .hero__cta:hover { opacity: 0.85; }


  /* ---- Slideshow ---- */
  /* Slides are absolute and so contribute no height; the section takes over
     the min-height that .hero__inner carries in single-image mode, or it
     would collapse to zero. */
  .hero-section--slides { min-height: var(--hero-height-mob, 780px); }
  @media (min-width: 1024px) {
    /* The setting is the height, not a ceiling. Single-image mode clamps
       against 42.29vw, which at most window widths lands below the setting
       and silently caps it — so a value like 1100px would never be reached. */
    /* Driven by the setting again rather than the fold: the taller version
       kept the creators strip out of view but scaled the shot up with it. */
    .hero-section--slides { min-height: var(--hero-height-desk, 812px); }
  }
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    /* Outgoing slide: 0.3s ease-in, as on hears. */
    transition: opacity 300ms ease-in, visibility 0s linear 300ms;
  }
  .hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    /* Incoming slide shows at once; only the outgoing one transitions. */
    transition: none;
  }
  .hero__slide.is-active .hero__bg-img {
    animation: hero-img-in 300ms ease-out both;
  }
  .hero__slide.is-active .hero__content > * {
    animation: hero-copy-in 300ms ease both;
    animation-delay: 300ms;
  }
  @keyframes hero-img-in {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes hero-copy-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active .hero__bg-img,
    .hero__slide.is-active .hero__content > * { animation: none; }
  }
  /* Centred vertically: single-image mode pushes the copy down with a
     clamp(60px, 13.02vw, 250px) top padding, which would leave it high in a
     1100px slide. */
  /* Phones: the copy sits above the model's head, so it stays compact:
     54px CTA like the rest of the site, tighter stack. */
  @media (max-width: 1023px) {
    .hero-section--slides .hero__content { gap: 8px; }
    .hero-section--slides .hero__title { line-height: 37px; margin: 6px 0 4px; }
    /* 44px button, the height gudslip's mobile hero CTA uses (12px padding, 16/20 type). */
    .hero-section--slides .hero__cta { max-width: 267px; padding: 12px 16px; font-size: 16px; line-height: 20px; border-radius: 6px; }
    .hero-section--slides .hero__tag-text { font-size: 13px; }
    .hero-section--slides .hero__tag-badge { font-size: 12px; line-height: 16px; padding: 5px 12px; }
    .hero-section--slides .hero__rating { margin-top: 12px; }
    .hero-section--slides .hero__rating-svg { width: 84px; }
  }
  .hero-section--slides .hero__inner {
    position: absolute;
    inset: 0;
    align-items: center;
    /* Absolute slides sit outside the section's padding box, so the mobile
       gutters and the top offset that clears the floating header have to be
       re-applied here. The variable is the section's own padding_mob. */
    padding: var(--hero-pad-mob, 24px 16px 40px);
    padding-bottom: 0;
  }
  @media (min-width: 1024px) {
    .hero-section--slides .hero__inner {
      padding-left: calc(16px + 24px);
      padding-right: calc(16px + 24px);
      padding-top: 0;
      padding-bottom: 0;
    }
  }
  /* Progress dots in a floating white capsule, bottom-right. The active one
     is a track whose black fill starts at dot width and grows to the full
     bar, so at 0% it still reads as a dot rather than an empty outline. */
  .hero__dots {
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 28px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  }
  .hero__dot {
    appearance: none;
    border: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #DCDCDC;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    color: transparent;
    flex: 0 0 auto;
    transition: width 380ms cubic-bezier(.16, 1, .3, 1),
                background 380ms ease;
  }
  .hero__dot.is-active {
    width: 46px;
    background: #E9E9E9;
  }
  .hero__dot::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    border-radius: 999px;
    background: #111111;
    opacity: 0;
  }
  .hero__dot.is-active::after {
    opacity: 1;
    /* 8px at 0%, the whole 46px track at 100%. */
    width: calc(8px + 38px * var(--slide-progress, 0) / 100);
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
  }
  /* ─── Product spotlight ─────────────────────────────────────────────── */
  .hero-spot { display: none; }
  .hero-section .hero-spot,
  .hero-spot.is-portaled { display: block; }
  .hero-spot__backdrop { display: none; }
  .hero-spot__card {
    position: relative;
    display: flex;
    gap: 23px;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    color: #121212;
  }
  .hero-spot__media {
    position: relative;
    flex: 0 0 117px;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: #F3F3F3;
    display: block;
  }
  .hero-spot__img { width: 100%; height: 100%; object-fit: contain; display: block; }
  /* Same tab as the PDP's "Popular" solution tag (.main-product__solution-tag):
     sits on the card's top edge, top-left, and the card drops that corner. */
  .hero-spot__badge {
    position: absolute;
    bottom: 100%;
    left: 0;
    display: inline-flex;
    align-items: center;
    padding: 1px 24px;
    border-radius: 8px 8px 0 0;
    background: #3F83F8;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
  }
  .hero-spot__card--tagged,
  .hero-spot.is-portaled .hero-spot__card.hero-spot__card--tagged { border-top-left-radius: 0; }
  .hero-spot__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .hero-spot__desc {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    color: #605F5F;
  }
  .hero-spot__title {
    display: block;
    max-width: 100%;
    font-family: var(--font-primary--family);
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    color: #121212;
    text-decoration: none;
  }
  .hero-spot__prices {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-family: var(--font-primary--family);
  }
  .hero-spot__price { font-size: 14px; line-height: 20px; font-weight: 400; color: #1C1C1E; }
  .hero-spot__compare { font-size: 12px; line-height: 14px; color: #A7A7A7; }
  .hero-spot__form { align-self: flex-start; margin-top: 7px; padding-top: 0; }
  /* Same button as the mega menu's product cards (.site-header__mega-card-cta):
     40px tall, 0/16 padding, 14px regular, radius 6, sized to its label. */
  .hero-spot__cta {
    position: relative;
    width: 19em;
    min-width: 181px;
    max-width: 100%;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: #121212;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
  }
  .hero-spot__cta.is-added { background: #3F83F8; }
  .hero-spot__cta[disabled] { opacity: 0.5; cursor: default; }
  .hero-spot__cta-added {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .hero-spot__cta-label { transition: opacity 200ms ease; }
  .hero-spot__cta.is-added .hero-spot__cta-label { opacity: 0; }
  .hero-spot__cta.is-added .hero-spot__cta-added { opacity: 1; }

  /* Desktop: floating card, bottom-right of the 1400px box, level with the
     slide dots. Fades up once the delay has passed. */
  @media (min-width: 1024px) {
    .hero-spot {
      position: absolute;
      right: max(40px, (100% - 1400px) / 2);
      bottom: 28px;
      z-index: 4;
      /* Sized by its content: the 117px shot, the 23px gap and the 19em button. */
      width: max-content;
      max-width: calc(100% - 80px);
    }
    .hero-spot__card {
      opacity: 0;
      transform: translateY(12px);
      visibility: hidden;
      pointer-events: none;
      transition: opacity 450ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 450ms;
    }
    .hero-spot.is-visible .hero-spot__card {
      opacity: 1;
      transform: none;
      visibility: visible;
      pointer-events: auto;
      transition: opacity 450ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }
    .hero-spot__dot { display: none !important; }
  }

  /* Phones: a pulsing dot on the product; the card opens as a bottom sheet
     over a frosted veil (the sheet is moved under body so it is fixed to the
     viewport whatever the hero's ancestors do). */
  .hero-spot__dot {
    position: absolute;
    left: var(--dot-x, 74%);
    top: var(--dot-y, 68%);
    z-index: 4;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    transform: translate(-50%, -50%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .hero-spot__dot::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #3F83F8;
    box-shadow: 0 0 0 2px #FFFFFF;
  }
  .hero-spot__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border-radius: 50%;
    background: rgba(63, 131, 248, 0.3);
    animation: hero-spot-dot 2.4s ease-out infinite;
  }
  .hero-spot__dot[aria-expanded="true"]::after { animation: none; opacity: 0; }
  @keyframes hero-spot-dot {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.9); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-spot__dot::after { animation: none; }
  }
  .hero-spot.is-portaled {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .hero-spot.is-portaled .hero-spot__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0s linear 300ms;
  }
  .hero-spot.is-portaled.is-open .hero-spot__backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms ease, visibility 0s;
  }
  .hero-spot.is-portaled .hero-spot__card {
    width: 100%;
    max-width: 520px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 380ms;
  }
  .hero-spot.is-portaled.is-open .hero-spot__card {
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s;
  }
  @media (max-width: 1023px) {
    .hero-section .hero-spot { display: none; }
    /* Tighter sheet on phones: smaller shot so the title keeps to two lines
       and the button stays above the fold. */
    .hero-spot.is-portaled .hero-spot__media { flex-basis: 108px; width: 108px; height: 108px; }
    .hero-spot.is-portaled .hero-spot__title { font-size: 16px; line-height: 20px; }
    .hero-spot.is-portaled .hero-spot__desc { font-size: 12.5px; line-height: 17px; }
    .hero-spot.is-portaled .hero-spot__form { align-self: stretch; }
    .hero-spot.is-portaled .hero-spot__cta { min-width: 0; width: 100%; }
  }
/* END_SECTION:hero */

/* START_SECTION:main-article (INDEX:52) */
.main-article__media { margin: 8px 0 28px; border-radius: 16px; overflow: hidden; background: #F3F3F3; }
  .main-article__img { width: 100%; height: auto; display: block; }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:53) */
.main-blog__grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
  @media (min-width: 750px) { .main-blog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
  @media (min-width: 1024px) { .main-blog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .main-blog__card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #121212; }
  .main-blog__media { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #F3F3F3; }
  .main-blog__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .main-blog__name { font-size: 19px; line-height: 25px; font-weight: 500; letter-spacing: -0.2px; }
  .main-blog__excerpt { font-size: 14.5px; line-height: 22px; color: #4A4A4A; }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:54) */
.main-cart__items { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid #EAEAEA; }
  .main-cart__item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid #EAEAEA; }
  .main-cart__media { width: 88px; height: 88px; border-radius: 8px; overflow: hidden; background: #F3F3F3; display: block; }
  .main-cart__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .main-cart__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .main-cart__name { font-size: 15px; line-height: 20px; font-weight: 500; color: #121212; text-decoration: none; }
  .main-cart__plan { margin: 0; font-size: 13px; line-height: 18px; color: #8A8A8A; }
  .main-cart__price { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 20px; font-weight: 500; }
  .main-cart__price s { font-weight: 400; color: #A7A7A7; font-size: 13px; }
  .main-cart__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
  .main-cart__qty { display: inline-flex; align-items: center; border: 1px solid #EAEAEA; border-radius: 8px; overflow: hidden; }
  .main-cart__qty-btn { width: 40px; height: 40px; border: 0; background: #FFFFFF; font-size: 18px; cursor: pointer; color: #121212; font-family: inherit; }
  .main-cart__qty-input { width: 44px; height: 40px; border: 0; text-align: center; font-family: inherit; font-size: 15px; color: #121212; -moz-appearance: textfield; }
  .main-cart__qty-input::-webkit-outer-spin-button, .main-cart__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .main-cart__remove { font-size: 13px; color: #8A8A8A; text-decoration: underline; text-underline-offset: 3px; }
  .main-cart__summary { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
  .main-cart__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; line-height: 22px; }
  .main-cart__row strong { font-size: 20px; font-weight: 500; }
  .main-cart__checkout { margin-top: 8px; }
  .main-cart__continue { align-self: center; margin-top: 8px; }
  @media (min-width: 750px) { .main-cart__summary .std__btn { width: 100%; } }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:55) */
.main-collection {
    background: var(--mc-bg, #FFFFFF);
    color: var(--mc-fg, #121212);
    padding: var(--mc-pad-mob, 24px 16px 48px);
  }
  @media (min-width: 1024px) {
    .main-collection { padding: var(--mc-pad-desk, 72px max(40px, (100% - 1400px) / 2) 60px); }
  }

  .main-collection__inner {
    max-width: var(--mc-max-desk, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .main-collection__inner { gap: 48px; }
  }

  .main-collection__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
  }
  .main-collection__heading {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    font-weight: 400;
    color: var(--mc-fg, #121212);
    margin: 0;
  }
  .main-collection__subheading {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: var(--mc-fg, #121212);
    opacity: 0.75;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-collection__heading { font-size: 48px; letter-spacing: -1px; }
    .main-collection__subheading { font-size: 18px; line-height: 28px; }
  }

  .main-collection__tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    margin: 0 -16px;
    padding: 0 16px 2px;
    scroll-padding-inline: 16px;
    justify-content: flex-start;
    position: relative;
  }
  /* Hidden on mobile: the strip scrolls there, so a pill anchored to
     offsetLeft would drift out of place as it scrolls. */
  .main-collection__tab-pill { display: none; }
  .main-collection__tabs::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    /* Same pill strip as the homepage Choose your routine tabs. */
    .main-collection__tabs {
      display: inline-flex;
      justify-content: center;
      width: auto;
      max-width: 100%;
      margin: 0;
      padding: 5px;
      gap: 0;
      height: 48px;
      overflow: hidden;
      background: #FFFFFF;
      box-shadow: inset 0 0 0 1px #E6E6E6;
      border-radius: 10px;
    }
    .main-collection__tab-pill {
      display: block;
      position: absolute;
      top: 5px;
      left: 0;
      height: calc(100% - 10px);
      width: var(--pill-w, 0px);
      transform: translateX(var(--pill-x, 0px));
      background: #F3F3F3;
      border-radius: 7px;
      pointer-events: none;
      z-index: 0;
      opacity: 0;
      transition: transform 320ms cubic-bezier(.16, 1, .3, 1),
                  width 320ms cubic-bezier(.16, 1, .3, 1),
                  opacity 200ms ease;
    }
    .main-collection__tab-pill.is-ready { opacity: 1; }
  }
  .main-collection__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid var(--mc-tab-border, #E0E0E0);
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms ease;
  }
  .main-collection__tab.is-active {
    border: 2px solid #000;
    padding: 11px 15px;
    font-weight: 500;
  }
  @media (min-width: 1024px) {
    .main-collection__tab {
      background: transparent;
      border: 0;
      border-radius: 7px;
      z-index: 1;
      min-height: 0;
      padding: 12px 15px;
      font-size: 17px;
      line-height: normal;
      font-weight: 400;
      color: #818181;
      align-self: stretch;
      position: relative;
      flex: 0 0 auto;
      transition: color 180ms ease;
    }
    .main-collection__tab.is-active,
    .main-collection__tab:hover { color: #000; border: 0; padding: 12px 15px; font-weight: 400; }
  }


  /* Toolbar */
  .main-collection__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 0;
    background: #FFFFFF;
    border: 0;
    border-radius: 10px;
    box-sizing: border-box;
    margin-bottom: -26px;
  }
  .main-collection__sort { display: inline-flex; align-items: center; gap: 8px; }
  .main-collection__sort-label {
    font-family: var(--font-primary--family);
    font-size: 15px;
    font-weight: 500;
    color: var(--mc-fg, #121212);
  }
  .main-collection__sort-field { position: relative; display: inline-flex; align-items: center; gap: 8px; }
  .main-collection__sort-value {
    font-family: var(--font-primary--family);
    font-size: 15px;
    font-weight: 400;
    color: var(--mc-fg, #121212);
    white-space: nowrap;
  }
  /* Invisible select stretched over the whole field so the caret is part of
     the hit area — as a sibling it had pointer-events: none and swallowed the
     click. The visible label is the span, which sizes to its own text instead
     of to the widest option. */
  .main-collection__sort-select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
  }
  .main-collection__sort-select:focus-visible ~ .main-collection__sort-caret {
    outline: 2px solid #3F83F8;
    outline-offset: 2px;
  }
  .main-collection__sort-caret {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: #EFEFEF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #121212;
    pointer-events: none;
    flex-shrink: 0;
  }

  .main-collection__tools { display: inline-flex; align-items: center; gap: 14px; }
  .main-collection__switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
  }
  .main-collection__switch-label {
    font-family: var(--font-primary--family);
    font-size: 15px;
    font-weight: 500;
    color: var(--mc-fg, #121212);
  }
  .main-collection__switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }
  .main-collection__switch-track {
    width: 40px;
    height: 20px;
    border-radius: 999px;
    background: #E3E3E3;
    display: inline-flex;
    align-items: center;
    padding: 3px;
    transition: background 200ms ease;
    flex-shrink: 0;
  }
  .main-collection__switch-knob {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #FFFFFF;
    transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
  }
  /* Same blue as the card badges rather than the default black. */
  .main-collection__switch-input:checked ~ .main-collection__switch-track {
    background: var(--pc-badge-bg, #3F83F8);
  }
  .main-collection__switch-input:checked ~ .main-collection__switch-track .main-collection__switch-knob {
    transform: translateX(20px);
  }
  .main-collection__switch-input:focus-visible ~ .main-collection__switch-track {
    outline: 2px solid #3F83F8;
    outline-offset: 2px;
  }

  .main-collection__sep { width: 1px; height: 22px; background: #E0E0E0; }
  .main-collection__density { display: inline-flex; align-items: center; gap: 6px; }
  .main-collection__density-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    color: #C4C4C4;
    display: inline-flex;
    transition: color 160ms ease;
  }
  .main-collection__density-btn.is-active { color: #121212; }
  @media (max-width: 1023px) {
    .main-collection__density, .main-collection__sep { display: none; }
  }

  /* The grid sets display, which would beat the hidden attribute the tab switch relies on. */
  .main-collection__grid[hidden],
  [data-mc-panel][hidden] { display: none !important; }
  .main-collection__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 28px;
    width: 100%;
    align-items: stretch;
  }
  @media (min-width: 1024px) {
    .main-collection__grid {
      grid-template-columns: repeat(var(--mc-cols, 4), minmax(0, 1fr));
      justify-content: center;
      /* Tighter at five up: the cards are narrower, so the same 24px reads as
         a much bigger share of each column. */
      column-gap: var(--mc-col-gap, 24px);
      row-gap: 48px;
      max-width: 1400px;
      margin: 0 auto;
    }
  }

  .main-collection__empty {
    grid-column: 1 / -1;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 14px;
    color: #807E7E;
    padding: 32px 0;
  }

  .main-collection__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
  }
  /* Every cell is the same square, current or not, so the row does not jump
     as you page through it. */
  .main-collection__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    background: transparent;
    color: #121212;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 1;
    font-weight: 400;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }
  .main-collection__page:hover { background: #F3F3F3; border-color: #DCDCDC; }
  .main-collection__page.is-current {
    background: #121212;
    border-color: #121212;
    color: #FFFFFF;
    font-weight: 500;
  }
  .main-collection__page--gap {
    border-color: transparent;
    color: #807E7E;
    pointer-events: none;
  }
  .main-collection__page--nav svg { display: block; }
  .main-collection__page.is-disabled {
    color: #C9C9C9;
    border-color: #F0F0F0;
    pointer-events: none;
  }
  .main-collection__pagination-legacy a,
  .main-collection__pagination-legacy span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    border-radius: 4px;
    color: #121212;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 14px;
  }
  .main-collection__pagination .active span,
  .main-collection__pagination [aria-current="page"] {
    background: #000;
    color: #FFF;
  }
  /* Phones: the banner already says it, so the head can go; the tabs take
     the home routine tabs' size (13px in a 40px chip); sort and the stock
     switch share one row (the label goes, the caret says it) and the grid no
     longer rides up over it. */
  @media (max-width: 1023px) {
    .main-collection__head--hide-mob { display: none; }
    .main-collection__inner { gap: 16px; }
    .main-collection__tab { min-height: 40px; padding: 10px 14px; font-size: 13px; line-height: 20px; }
    .main-collection__tab.is-active { padding: 9px 13px; }
    .main-collection__toolbar { flex-wrap: nowrap; padding: 0; margin-bottom: 0; gap: 12px; }
    .main-collection__sort-label { display: none; }
    .main-collection__sort-value, .main-collection__switch-label { font-size: 14px; }
    .main-collection__sort-caret { width: 24px; height: 24px; }
    .main-collection__switch { gap: 8px; }
    .main-collection__grid { row-gap: 24px; }
    .main-collection__pagination { margin-top: 24px; }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-contact (INDEX:56) */
.main-contact__intro { margin-bottom: 28px; }
  .main-contact__form { margin: 0 0 32px; }
  .main-contact__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 750px) { .main-contact__grid { grid-template-columns: 1fr 1fr; } }
  .main-contact__field { display: flex; flex-direction: column; gap: 6px; }
  .main-contact__field--full { grid-column: 1 / -1; }
  .main-contact__field label { font-size: 13px; line-height: 18px; color: #4A4A4A; }
  .main-contact__field input,
  .main-contact__field textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #DADADA;
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 15px;
    color: #121212;
  }
  .main-contact__field input:focus,
  .main-contact__field textarea:focus { outline: 2px solid #121212; outline-offset: 1px; border-color: #121212; }
  .main-contact__submit { margin-top: 20px; }
  .main-contact__notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 20px; }
  .main-contact__notice--ok { background: #EAF7EA; color: #1B6B2B; }
  .main-contact__notice--error { background: #FCE8E8; color: #A02020; }
  .main-contact__aside { padding-top: 24px; border-top: 1px solid #EAEAEA; }
/* END_SECTION:main-contact */

/* START_SECTION:main-list-collections (INDEX:57) */
.main-lc__card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: #121212; }
  .main-lc__media { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #F3F3F3; }
  .main-lc__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
  .main-lc__card:hover .main-lc__img { transform: scale(1.03); }
  .main-lc__name { font-size: 15px; line-height: 20px; font-weight: 500; }
  .main-lc__count { font-size: 13px; line-height: 18px; color: #8A8A8A; }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-product (INDEX:59) */
/* Warm grey at the top washing out to the section colour further down. */
  .main-product {
    background: linear-gradient(180deg, var(--mp-bg-top, rgb(251 251 251)) 0%, var(--mp-bg, rgb(255 255 255)) 100%);
    color: var(--mp-fg, #121212);
    padding: var(--mp-pad-mob, 16px);
  }
  @media (min-width: 1024px) {
    .main-product { padding: var(--mp-pad-desk, 0 clamp(20px, 6vw, 120px) 64px); }
  }
  .main-product__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 23px;
    font-family: var(--font-primary--family);
    font-size: 13.5px;
    line-height: 20px;
    color: #9C9C9C;
  }
  .main-product__breadcrumbs a { color: #9C9C9C; text-decoration: none; font-weight: 400; }
  .main-product__breadcrumbs a:hover { text-decoration: underline; }
  .main-product__breadcrumbs-sep { flex-shrink: 0; color: #9A9A9A; display: block; }
  .main-product__breadcrumbs [aria-current] { color: #202020; font-weight: 400; }

  .main-product__inner {
    max-width: var(--mp-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .main-product__inner {
      flex-direction: row;
      align-items: flex-start;
      gap: 28px;
    }
  }

  /* Gallery — mobile horizontal scroll + thumbnails / desktop 2-col flex-wrap */
  .main-product__gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    /* Reference layout: an 800px track with the 600px gallery centred in it,
       40px gap, 560px of information — 1400 across. */
    /* Gallery is flush with the header's left edge — no centring inset — and
       the information column takes the width that frees up. */
    .main-product__gallery {
      flex: 0 0 720px;
      max-width: 720px;
      min-width: 0;
      align-items: flex-start;
      gap: 8px;
      padding: 0;
      position: sticky;
      top: 100px;
      align-self: flex-start;
    }
    .main-product__stage,
    .main-product__thumbs { width: 100%; max-width: 720px; }
  }
  .main-product__main {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .main-product__main::-webkit-scrollbar { display: none; }
  .main-product__stage { position: relative; width: 100%; }
  /* Zoom and the hover arrows are desktop affordances; mobile swipes. */
  .main-product__zoom,
  .main-product__nav { display: none; }
  @media (min-width: 1024px) {
    .main-product__zoom {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #FFFFFF;
      cursor: zoom-in;
      z-index: 3;
      transition: background-color 160ms ease;
    }
    .main-product__zoom:hover { background: #FFFFFF; }
    .main-product__nav {
      position: absolute;
      bottom: 20px;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: #FFFFFF;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
      cursor: pointer;
      opacity: 0;
      transition: opacity 160ms ease;
      z-index: 3;
    }
    .main-product__stage:hover .main-product__nav,
    .main-product__nav:focus-visible { opacity: 1; }
    .main-product__nav--prev { left: 20px; }
    .main-product__nav--next { right: 20px; }
  }
  .main-product__lightbox {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.85);
    display: grid;
    place-items: center;
    padding: 40px;
    cursor: zoom-out;
  }
  .main-product__lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  @media (min-width: 1024px) {
    .main-product__main { gap: 8px; }
  }
  .main-product__tile {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    background: var(--mp-card-bg, #F3F3F3);
    border-radius: 20px;
    overflow: hidden;
    scroll-snap-align: center;
  }
  /* No media: keep a square placeholder so the column isn't collapsed. */
  .main-product__tile--empty { aspect-ratio: 1 / 1; }
  @media (min-width: 1024px) {
    /* One image at a time in a square well, like the reference gallery: the
       aspect is fixed so switching between portrait and square shots does not
       resize the column. */
    .main-product__tile { aspect-ratio: 1 / 1; }
    .main-product__tile > img { width: 100%; height: 100%; object-fit: contain; }
  }
  /* Endorsement sticker: laurel mark, the claim, avatars and a link — the
     shape the reference uses over the first gallery shot. */
  .main-product__sticker {
    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 24px);
    padding: 9px 0px 9px 14px;
    background: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.10);
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  /* Only over the first shot: it fades out once the gallery moves on. */
  .main-product__sticker.is-away { opacity: 0; visibility: hidden; pointer-events: none; }
  .main-product__sticker-mark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    color: #121212;
  }
  .main-product__sticker-laurel { width: 13px; height: 27px; display: block; }
  .main-product__sticker-mark-text {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 16px;
    font-weight: 500;
    color: #121212;
    max-width: 76px;
    text-align: center;
  }
  .main-product__sticker-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-left: 17px;
    border-left: 1px solid #E6E6E6;
  }
  .main-product__sticker-copy {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #4B4B4B;
    max-width: 236px;
  }
  /* With no right padding on the sticker, a small float keeps the first line
     of copy clear of the close button; the lines below run full width. */
  .main-product__sticker-copy::before {
    content: '';
    float: right;
    width: 22px;
    height: 18px;
  }
  .main-product__sticker-foot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .main-product__sticker-avatars { display: inline-flex; align-items: center; }
  .main-product__sticker-avatars img {
    width: 20px;
    height: 20px;
    border-radius: 100px;
    object-fit: cover;
    background: #EEE;
    border: 1px solid #FFFFFF;
    display: block;
  }
  .main-product__sticker-avatars img + img { margin-left: -7px; }
  .main-product__sticker-link {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 17px;
    color: #121212;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .main-product__sticker-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #EFEFEF;
    color: #6E6E6E;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 160ms ease;
  }
  .main-product__sticker-close:hover { background: #E2E2E2; color: #121212; }

  .main-product__tile-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 8px;
    background: #FFFFFF;
    border-radius: 24px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #000;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    z-index: 2;
  }

  .main-product__thumbs-wrap { position: relative; width: 100%; }
  .main-product__thumbs-next { display: none; }
  @media (min-width: 1024px) {
    .main-product__thumbs-next {
      position: absolute;
      top: 63px;
      right: 8px;
      transform: translateY(-50%);
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid #E6E6E6;
      border-radius: 999px;
      background: #FFFFFF;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
      cursor: pointer;
      z-index: 2;
    }
    .main-product__thumbs-next[hidden] { display: none; }
  }

  /* Thumbnails row — the gallery's only navigation on both breakpoints */
  .main-product__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-product__thumbs::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .main-product__thumbs { gap: 6px; }
  }
  /* Selected state is a rule under the thumbnail, set off from it by 4px —
     not a box around the image. */
  .main-product__thumb {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    width: 48px;
    height: 54px;
    border-radius: 0;
    flex-shrink: 0;
    cursor: pointer;
    padding: 0 0 4px;
    transition: border-color 160ms ease;
  }
  .main-product__thumb.is-active { border-bottom-color: #000; }
  /* Child selector as well as the class: the class is easy to lose in the
     image_tag call, and a stretched thumbnail is very visible. */
  .main-product__thumb-img,
  .main-product__thumb > img {
    width: 100%;
    height: 48px;
    object-fit: cover;
    display: block;
    background: var(--mp-card-bg, #F3F3F3);
    border-radius: 8px;
  }
  @media (min-width: 1024px) {
    /* 6.5 thumbnails fit the 720px strip, so the seventh is half in view and
       the arrow says there is more. */
    .main-product__thumb { width: 106px; height: 112px; }
    .main-product__thumb-img,
    .main-product__thumb > img { height: 106px; }
  }

  /* Video CTA buttons row — mobile only */
  .main-product__video-ctas {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }
  @media (min-width: 1024px) {
    .main-product__video-ctas { display: none; }
  }
  .main-product__video-cta {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: #F3F3F3;
    border-radius: 8px;
    color: #121212;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: background 160ms ease;
  }
  .main-product__video-cta:hover { background: #EAEAEA; }
  .main-product__video-cta-icon { display: inline-flex; flex-shrink: 0; }
  /* Show the full image at its natural aspect ratio — no cropping. */
  .main-product__tile-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Info — sticky right column */
  .main-product__info {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1 1 0;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .main-product__info {
      flex: 0 0 652px;
      max-width: 652px;
      min-width: 0;
      background-color: #FFFFFF;
      padding: 28px 35px;
      border: 1px solid #EDEDED;
      border-radius: 16px;
      gap: 32px;
      position: sticky;
      top: 100px;
      align-self: flex-start;
    }
  }

  /* Figma: rating→title 8px, title→bullets 20px (tighter than the info gap). */
  .main-product__head { display: flex; flex-direction: column; gap: 20px; }
  .main-product__namebox { display: flex; flex-direction: column; gap: 12px; }

  .main-product__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
  }
  /* Fractional stars: two identical rows stacked, filled row clipped horizontally
     by --stars-fill so any decimal (4.7, 4.9, 4.5…) reads accurately. */
  .main-product__stars {
    position: relative;
    display: inline-block;
    color: #000;
    line-height: 0;
  }
  .main-product__stars-empty,
  .main-product__stars-filled {
    display: inline-flex;
  }
  /* Same review mark as the hero and the reviews grid: a grey rank underneath,
     the coloured one clipped to the score on top. */
  .main-product__stars-empty { color: #E5E5E5; }
  .main-product__stars-filled { color: var(--mp-star, #2BB673); }
  .main-product__stars-filled {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--stars-fill, 100%);
    overflow: hidden;
    white-space: nowrap;
  }
  .main-product__stars-filled svg,
  .main-product__stars-empty svg { flex-shrink: 0; display: block; }
  .main-product__rating-score {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
    margin-left: 2px;
  }
  .main-product__rating-count {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #121212;
    text-decoration: underline;
  }
  /* Stats alongside the score, each introduced by a faint rule. On narrow
     screens they drop to their own line and the leading rule goes away. */
  .main-product__rating-meta {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }
  .main-product__rating-sep {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    color: #D8D8D8;
  }
  .main-product__rating-extra {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #807E7E;
  }
  @media (max-width: 749px) {
    .main-product__rating-meta { flex: 0 0 100%; }
    .main-product__rating-sep--first { display: none; }
  }

  /* Category line over the title, as in the reference. */
  .main-product__eyebrow {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #807E7E;
    margin: 12px 0 0;
  }
  /* Pulls the name up against its category line — the namebox's 12px gap is
     right everywhere else, so it is trimmed only for this pair. */
  .main-product__eyebrow + .main-product__title { margin-top: -2px; }

  /* Title and benefit rows are sized off the reference PDP: 48/57.6 at -0.96px
     for the name, 17/27.2 rows with a 20px mark and a 10px gap. */
  .main-product__title {
    font-family: var(--font-primary--family);
    font-size: 31px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.62px;
    color: #000;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-product__title { font-size: 33px; line-height: 40px; letter-spacing: -0.66px; }
  }

  /* Benefits ride a ticker of pills. The edges fade with a mask so items
     enter and leave instead of being cut. */
  .main-product__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
  .main-product__bullets-track {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    animation: mp-bullets-marquee var(--mp-bullets-speed, 32s) linear infinite;
  }
  @keyframes mp-bullets-marquee {
    from { transform: translateX(0); }
    /* Half the track plus half a gap: the seam then lands exactly on a pill. */
    to { transform: translateX(calc(-50% - 4px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .main-product__bullets-track { animation: none; }
  }
  .main-product__bullet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 15px;
    border: 0;
    border-radius: 999px;
    background: rgba(33, 33, 33, 0.05);
  }
  .main-product__bullet-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    color: #3F83F8;
  }
  .main-product__bullet-icon svg { width: 100%; height: 100%; display: block; }
  .main-product__bullet-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #121212;
  }

  .main-product__short-desc {
    font-family: var(--font-primary--family);
    font-size: 15.5px;
    line-height: 26.6px;
    font-weight: 400;
    color: #121212;
    margin: 0px 0 0;
    max-width: 600px;
  }

  .main-product__divider { border: 0; border-top: 1px solid #EAEAEA; margin: 0; }

  /* Klaviyo back-in-stock link, styled as on the original theme */
  .main-product a.klaviyo-bis-trigger {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    border-radius: 36px;
    background: #ec028c;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
    margin-bottom: 10px;
  }

  /* Flavour picker: one dot per flavour product */
  .main-product__fpick { display: flex; flex-direction: column; gap: 10px; }
  .main-product__fpick-label {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: rgba(18, 18, 18, 0.7);
  }
  .main-product__fpick-label strong { font-weight: 500; color: #121212; }
  .main-product__fpick-list { display: flex; flex-wrap: wrap; gap: 10px; }
  .main-product__fpick-dot {
    flex: 0 0 auto;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .main-product__fpick-dot:hover { transform: scale(1.08); }
  .main-product__fpick-dot:focus-visible { outline: 2px solid #3F83F8; outline-offset: 3px; }
  .main-product__fpick-dot.is-current { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #0F022D; }
  .main-product__fpick-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (prefers-reduced-motion: reduce) {
    .main-product__fpick-dot { transition: none; }
  }
  /* Hairline between the review row and the category line. The namebox already
     spaces its children by 12px, so the rule adds none of its own. */
  .main-product__divider--tight { margin: 0; }
  .main-product__divider--tight + .main-product__eyebrow { margin-top: 13px; }

  .main-product__form { display: flex; flex-direction: column; gap: 24px; }

  .main-product__solution { display: flex; flex-direction: column; gap: 2px; }
  /* Title row plus the tier pills, and the saving line under the cards. */
  .main-product__solution-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
  }
  .main-product__solution-pills { display: inline-flex; flex-wrap: wrap; gap: 8px; }
  .main-product__solution-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px 5px 10px;
    background: #FFFFFF;
    border: 1px solid rgba(20, 23, 26, 0.18);
    border-radius: 999px;
    font-family: var(--font-primary--family);
    font-size: 11.5px;
    line-height: normal;
    font-weight: 700;
    text-transform: uppercase;
    color: #5A6374;
    white-space: nowrap;
  }
  .main-product__solution-savings { margin: 2px 0 0; }
  .main-product__solution-saving {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: #1F2447;
  }
  .main-product__solution-saving strong { font-weight: 600; }
  .main-product__solution-title {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-product__solution-title { font-size: 16px; line-height: 24px; }
  }
  .main-product__solution-sub {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 21px;
    color: #2B2B2B;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-product__solution-sub { font-size: 14px; line-height: 21px; }
  }
  .main-product__solution-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    /* Room for the tab that sits on top of the middle card. */
    padding: 20px 0 16px;
  }
  /* Horizontal: image on the left, name / price / strip count on the right. */
  .main-product__solution-card {
    appearance: none;
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    min-width: 0;
  }
  .main-product__solution-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
  }
  .main-product__solution-card.is-selected {
    background: #3F83F80A;
    border: 1px solid #3F83F8;
  }
  /* The tab is flush with the card's left edge, so that corner squares off —
     same joint as the bundle banner. */
  .main-product__solution-card:has(.main-product__solution-tag) {
    border-top-left-radius: 0;
  }
  .main-product__solution-tag {
    position: absolute;
    bottom: 100%;
    /* Pulled onto the border so the tab's edge lines up with the card's. */
    left: -1px;
    display: flex;
    align-items: stretch;
    width: max-content;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    white-space: nowrap;
  }
  .main-product__solution-tag-save {
    background: #3F83F8;
    color: #FFFFFF;
    padding: 1px 24px 1px;
    text-align: center;
    font-weight: 500;
  }
  .main-product__solution-tag-label {
    background: #FFFFFF;
    color: #3F83F8;
    padding: 4px;
    text-align: center;
  }
  .main-product__solution-label {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    color: #000;
  }
  .main-product__solution-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    background: transparent;
  }
  /* A definite box, not max-* on an auto size: a lazy image with no intrinsic
     size would otherwise lay out at 0x0, never intersect, and never load. */
  .main-product__solution-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .main-product__solution-price {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
  }
  .main-product__solution-price-main {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: #000;
  }
  .main-product__solution-price-unit {
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 18px;
    font-weight: 400;
    color: #807E7E;
  }
  .main-product__solution-subline {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #807E7E;
  }
  .main-product__solution-price {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #807E7E;
  }

  /* ─── Rows layout (stacked list w/ radio) ─────────────────────────── */
  .main-product__solution--rows .main-product__solution-row {
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 0;
  }
  .main-product__solution--rows .main-product__solution-card {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
  }
  .main-product__solution--rows .main-product__solution-card.is-selected {
    background: #FAFAFA;
    border: 1.5px solid #000;
    padding: 19.5px;
  }
  /* Radio indicator */
  .main-product__solution-radio {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #C4C4C4;
    background: #FFFFFF;
    position: relative;
    box-sizing: border-box;
  }
  .main-product__solution-card.is-selected .main-product__solution-radio {
    border-color: #000;
  }
  .main-product__solution-card.is-selected .main-product__solution-radio::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #000;
  }
  /* Thumb in rows: fixed 64px square, no bg */
  .main-product__solution--rows .main-product__solution-thumb {
    width: 64px;
    height: 64px;
    background: transparent;
    border-radius: 8px;
    flex-shrink: 0;
  }
  /* Info column (label + subline) grows to push price right */
  .main-product__solution-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .main-product__solution-label { flex: 0 0 100%; }
  .main-product__solution--rows .main-product__solution-label {
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #121212;
  }
  .main-product__solution--rows .main-product__solution-subline {
    font-size: 14px;
    line-height: 20px;
    color: #807E7E;
  }
  /* Price column, right aligned */
  .main-product__solution-pricecol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    text-align: right;
  }
  .main-product__solution--rows .main-product__solution-price { display: inline-flex; align-items: baseline; gap: 2px; }
  .main-product__solution--rows .main-product__solution-price-main {
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__solution--rows .main-product__solution-price-unit {
    font-size: 14px;
    line-height: 20px;
    color: #807E7E;
  }
  .main-product__solution-compare {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #A7A7A7;
    text-decoration: line-through;
  }
  /* Badges: sit on the top border, left aligned (not centered) */
  .main-product__solution--rows .main-product__solution-tag {
    top: -13px;
    left: 24px;
    transform: none;
    flex-direction: row;
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: 8px;
    min-width: 0;
    font-size: 11px;
    line-height: 18px;
    text-transform: none;
  }
  .main-product__solution--rows .main-product__solution-tag-save {
    padding: 3px 8px;
    border-radius: 4px;
    background: #3F83F8;
    color: #FFFFFF;
  }
  .main-product__solution--rows .main-product__solution-tag-label {
    padding: 3px 8px;
    border-radius: 4px;
    background: #EAF1FE;
    color: #3F83F8;
  }
  /* Radio replaces the check in rows layout */

  /* ─── Bundle builder ─────────────────────────────────────────────── */
  .main-product__bundle { display: flex; flex-direction: column; gap: 0; }
  .main-product__bundle-title {
    font-family: var(--font-primary--family);
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    color: #000;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-product__bundle-title { font-size: 26px; line-height: 32px; }
  }

  /* Tier selector */
  .main-product__tiers {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--tier-count, 4), 1fr);
    padding-top: 18px;
  }
  .main-product__tiers-line,
  .main-product__tiers-line-fill {
    position: absolute;
    top: 80px;
    left: calc(50% / var(--tier-count, 4));
    height: 0;
    z-index: 0;
  }
  .main-product__tiers-line {
    right: calc(50% / var(--tier-count, 4));
    border-top: 2px dashed #D8D8D8;
  }
  .main-product__tiers-line-fill {
    width: 0;
    border-top: 2px solid #000;
    transition: width 220ms ease;
  }
  .main-product__tier {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .main-product__tier-label {
    height: 26px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 26px;
    color: #B0B0B0;
    white-space: nowrap;
  }
  .main-product__tier.is-reached .main-product__tier-label { color: #121212; }
  .main-product__tier-check {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #EDEDED;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .main-product__tier-check svg { opacity: 0; }
  .main-product__tier.is-reached .main-product__tier-check { background: #000; }
  .main-product__tier.is-active .main-product__tier-check svg { opacity: 1; }
  .main-product__tier-price {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 26px;
    color: #B0B0B0;
    white-space: nowrap;
  }
  .main-product__tier.is-active .main-product__tier-price { color: #121212; font-weight: 500; }
  .main-product__tier-chips { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .main-product__tier-chip {
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }
  .main-product__tier-chip--save { background: #EFEFEF; color: #6F6F6F; }
  .main-product__tier-chip--pill { background: #EFEFEF; color: #6F6F6F; }
  .main-product__tier.is-active .main-product__tier-chip--save,
  .main-product__tier.is-active .main-product__tier-chip--pill { background: #000; color: #FFFFFF; }
  .main-product__tier--highlight .main-product__tier-chip--save { background: #3F83F8; color: #FFFFFF; }
  .main-product__tier--highlight .main-product__tier-chip--pill { background: #EAF1FE; color: #3F83F8; }

  /* Flavor list */
  .main-product__flavors {
    background: #F3F3F3;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .main-product__flavor {
    position: relative;
    background: #FFFFFF;
    border: 1.5px solid transparent;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .main-product__flavor.is-added { border-color: #000; }
  .main-product__flavor.has-badge { margin-top: 14px; }
  .main-product__flavor-badge {
    position: absolute;
    top: -12px;
    left: 16px;
    background: #000;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
  }
  .main-product__flavor-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .main-product__flavor-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
  .main-product__flavor-name {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    color: #121212;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .main-product__flavor-name { font-size: 18px; }
  }
  .main-product__flavor-control { flex-shrink: 0; }
  .main-product__flavor-add {
    appearance: none;
    border: 0;
    background: #000;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 160ms ease;
  }
  .main-product__flavor-add:hover { opacity: 0.85; }
  .main-product__flavor-stepper { display: none; align-items: center; gap: 14px; }
  .main-product__flavor.is-added .main-product__flavor-add { display: none; }
  .main-product__flavor.is-added .main-product__flavor-stepper { display: inline-flex; }
  .main-product__flavor-step {
    appearance: none;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 160ms ease;
  }
  .main-product__flavor-step:hover { opacity: 0.85; }
  .main-product__flavor-qty {
    min-width: 18px;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__autodelivery--bundle { margin-top: 0; }

  .main-product__purchase { display: flex; flex-direction: column; gap: 16px; }
  .main-product__purchase-heading {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000;
    margin: 0;
  }
  /* Purchase options in the reference's shape: a radio, name + delivery
     sub-line on the left, price and struck compare-at on the right, a ribbon
     over the best value, and the benefits listed inside the chosen card. */
  .main-product__purchase-card {
    display: block;
    position: relative;
    padding: 0;
    overflow: visible;
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .main-product__purchase-card.is-selected,
  .main-product__purchase-card:has(input:checked) {
    background: #3F83F80A;
    border-color: #3F83F8;
  }
  .main-product__purchase-card input { position: absolute; opacity: 0; pointer-events: none; }
  /* Room for the tab, and a squared corner where it joins. */
  .main-product__purchase-card:has(.main-product__purchase-ribbon) {
    margin-top: 27px;
    border-top-left-radius: 0;
  }
  .main-product__purchase-ribbon {
    position: absolute;
    bottom: 100%;
    left: -1px;
    display: block;
    width: max-content;
    background: #3F83F8;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    text-align: center;
    padding: 5px 24px 4px;
    border-radius: 8px 8px 0 0;
  }
  .main-product__purchase-body {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }
  .main-product__purchase-thumb {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .main-product__purchase-thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
  .main-product__purchase-radio {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    border: 1px solid #C4C4C4;
    background: #FFFFFF;
    position: relative;
    transition: border-color 160ms ease;
  }
  .main-product__purchase-card:has(input:checked) .main-product__purchase-radio { border-color: #3F83F8; }
  .main-product__purchase-card:has(input:checked) .main-product__purchase-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #3F83F8;
  }
  .main-product__purchase-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .main-product__purchase-name {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__purchase-sub {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #6E6E6E;
  }
  .main-product__purchase-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    text-align: right;
  }
  .main-product__purchase-price-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
  }
  .main-product__purchase-pill-price {
    font-family: var(--font-primary--family);
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__purchase-compare {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #8A8A8A;
    text-decoration: line-through;
  }
  .main-product__purchase-pill-unit {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #6E6E6E;
  }
  .main-product__purchase-benefits-wrap {
    display: block;
    padding: 0 16px 14px 18px;
  }
  /* Tier cards: pointer, and the benefits list only under the chosen one. */
  .main-product__purchase-card--tier { cursor: pointer; }
  .main-product__purchase-card--tier .main-product__purchase-benefits-wrap { display: none; }
  .main-product__purchase-card--tier:has(input:checked) .main-product__purchase-benefits-wrap { display: block; }
  /* One-time card: the unit sits beside the name; the compare-at under the price. */
  .main-product__purchase-name-row { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
  .main-product__purchase-name-note {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #6E6E6E;
  }
  .main-product__purchase-compare-row {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    color: #6E6E6E;
  }
  .main-product__purchase-compare-row .main-product__purchase-compare { font-size: 13px; line-height: 18px; }
  /* "You save" line under the name on the one-time card, in the accent. */
  .main-product__purchase-save {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #3F83F8;
  }
  .main-product__purchase-benefits-label {
    display: block;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 0.72px;
    text-transform: uppercase;
    color: #6E6E6E;
    margin-bottom: 8px;
  }
  .main-product__purchase-benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }
  .main-product__purchase-benefits li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    color: #121212;
  }
  .main-product__purchase-benefits li svg { flex: 0 0 16px; }

  .main-product__autodelivery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
  }
  .main-product__autodelivery-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .main-product__autodelivery-title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #121212;
    margin: 0;
  }
  .main-product__autodelivery-sub {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #807E7E;
    margin: 0;
  }
  .main-product__toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
  }
  .main-product__toggle input { position: absolute; opacity: 0; pointer-events: none; }
  .main-product__toggle-track {
    display: block;
    width: 44px;
    height: 24px;
    background: #D9D9D9;
    border-radius: 12px;
    position: relative;
    transition: background 200ms ease;
  }
  .main-product__toggle-thumb {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: transform 200ms ease;
  }
  .main-product__toggle input:checked + .main-product__toggle-track { background: #000; }
  .main-product__toggle input:checked + .main-product__toggle-track .main-product__toggle-thumb {
    transform: translateX(20px);
  }

  /* Stock and delivery, sitting right on top of the button. */
  .main-product__stock {
    --mp-stock: #F0A202;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 14.5px;
    line-height: 35px;
    font-weight: 500;
    color: var(--mp-stock);
  }
  .main-product__stock-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 50%;
    background: var(--mp-stock);
    animation: mp-stock-pulse 2200ms ease-out infinite;
  }
  @keyframes mp-stock-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(240, 162, 2, 0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(240, 162, 2, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 162, 2, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .main-product__stock-dot { animation: none; }
  }
  /* The note sits at the right edge of the row. Neither half wraps: on a
     336px phone a wrapped line doubled the 35px row. */
  .main-product__stock-note { font-weight: 400; color: #121212; margin-left: auto; text-align: right; }
  .main-product__stock-text, .main-product__stock-note { white-space: nowrap; }
  .main-product__stock-note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Availability rather than scarcity: green, no pulse. */
  .main-product__stock--ok { --mp-stock: #16803C; }
  .main-product__stock--ok .main-product__stock-dot { animation: none; }

  .main-product__add {
    appearance: none;
    border: 0;
    background: #000;
    color: #FFF;
    padding: 16px 24px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    transition: opacity 200ms ease;
  }
  .main-product__add:hover:not([disabled]) { opacity: 1; }
  .main-product__add-row { display: flex; align-items: stretch; gap: 8px; }
  .main-product__add-row .main-product__add { flex: 1 1 auto; min-width: 0; }
  .main-product__qty {
    flex: 0 0 104px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FFFFFF;
  }
  .main-product__qty-btn {
    width: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #121212;
    font-family: var(--font-primary--family);
    font-size: 16px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .main-product__qty-input {
    width: 34px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
    color: #121212;
    font-family: var(--font-primary--family);
    font-size: 14px;
    font-weight: 400;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .main-product__qty-input::-webkit-outer-spin-button, .main-product__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .main-product__qty-input:focus { outline: none; }
  /* With the quantity box the price rides inside the button: "Añadir 48,00€". */
  .main-product__add--qty .main-product__add-pill { display: inline; background: none; color: #FFFFFF; padding: 0; border-radius: 0; font-size: 16px; line-height: inherit; font-weight: 500; }
  /* Phones: 44px like Gudslip's bar (12px padding on a 20px line). */
  @media (max-width: 749px) {
    .main-product__add { padding: 12px 16px; line-height: 20px; }
  }
  .main-product__add[disabled] { opacity: 0.5; cursor: not-allowed; }
  .main-product__add-pill {
    display: none;
    background: #1C1C1C;
    color: #939393;
    border-radius: 23px;
    padding: 1px 10px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0.3px;
  }

  .main-product__payments {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    opacity: 0.9;
  }
  /* Reference size: the 38x24 marks are drawn down to 28.5x18. */
  .main-product__payments .payment-icon {
    display: block;
    width: 28.5px;
    height: 18px;
    flex: 0 0 auto;
  }

  /* Three marks under the payment icons, laid out like the reference's
     timeline: a filled block, each mark stacked over its label, hairlines
     running between them. */
  .main-product__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 18px 64px 17px;
    background: transparent;
    border: 1px solid #F3F3F3;
    border-radius: 11px;
  }
  .main-product__trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    flex: 0 1 auto;
  }
  .main-product__trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #F3F3F3;
    color: #4F4F4F;
  }
  .main-product__trust-icon svg { display: block; width: 22px; height: 22px; }
  .main-product__trust-date {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    color: #919191;
    white-space: nowrap;
  }
  .main-product__trust-title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #303030;
  }
  /* Pinned to the top of the row and dropped by half an icon, so the rule
     meets the marks at their centre whatever the labels do. */
  .main-product__trust-line {
    flex: 1 1 auto;
    align-self: flex-start;
    height: 0;
    margin-top: 22px;
    border-top: 1px solid #ECECEC;
  }
  @media (max-width: 480px) {
    .main-product__trust { padding: 16px 26px; gap: 6px; }
    .main-product__trust-line { flex: 1 1 auto; }
    .main-product__trust-title { font-size: 12.5px; }
    .main-product__trust-date { font-size: 11px; }
  }

  /* Real Results inside info column */
  .main-product__rr {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .main-product__rr-title {
    font-family: var(--font-primary--family);
    font-size: 23px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
    margin: 0;
    text-align: left;
  }
  /* Four and a half tiles across (hears.com), the rest scrolls under the bar. */
  .main-product__rr-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .main-product__rr-track::-webkit-scrollbar { display: none; }
  /* Thin progress bar under the row, as on hears.com: 4px hairline track,
     dark thumb sized to the visible share. Shown only when the row scrolls. */
  .main-product__rr-scrollbar {
    position: relative;
    width: 100%;
    height: 4px;
    margin-top: -4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  .main-product__rr-scrollbar[hidden] { display: none; }
  .main-product__rr-scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    border-radius: 10px;
    background: #121212;
    transition: transform 120ms linear;
  }
  .main-product__rr-tile {
    position: relative;
    flex: 0 0 calc((100% - 28px) / 4.5);
    scroll-snap-align: start;
    aspect-ratio: 9 / 14;
    background: #DDDDDD;
    border-radius: 9.582px;
    overflow: hidden;
    display: block;
    text-decoration: none;
  }
  .main-product__rr-tile > img,
  .main-product__rr-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .main-product__rr-play {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  button.main-product__rr-tile {
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .main-product__rr-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* Frosted white veil: the page stays visible, blurred, behind the video. */
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .main-product__rr-modal[hidden] { display: none; }
  /* Desktop and phones alike: the short rating parts only show on phones. */
  .main-product__rating-mob, .main-product__rating-meta--mob { display: none; }
  .main-product__sticker-link-mob { display: none; }
  /* Landscape (or whatever the source is) frame for the how-it-works popup. */
  .main-product__rr-modal-frame.main-product__rr-modal-frame--auto {
    width: min(calc(100vw - 32px), 960px);
    max-height: 88vh;
    aspect-ratio: var(--vm-ar, 16 / 9);
  }
  /* Before / after popup: the shots at their 700x610 ratio, swipe between
     them, a dot row under the frame (long dash for the current one). */
  .main-product__ba-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .main-product__rr-modal-frame.main-product__rr-modal-frame--ba {
    width: min(calc(100vw - 32px), 560px);
    max-height: 80vh;
    aspect-ratio: 700 / 610;
    background: transparent;
  }
  .main-product__ba-track {
    display: flex;
    gap: 12px;
    height: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .main-product__ba-track::-webkit-scrollbar { display: none; }
  .main-product__ba-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
  .main-product__ba-slide .real-people__shot { height: 100%; border-radius: 12px; overflow: hidden; }
  .main-product__ba-slide .real-people__shot-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .main-product__ba-dots { display: flex; justify-content: center; gap: 6px; }
  .main-product__ba-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: rgba(18, 18, 18, 0.25);
    cursor: pointer;
    transition: width 200ms ease, background 200ms ease;
  }
  .main-product__ba-dot.is-active { width: 18px; background: #121212; }
  .main-product__rr-modal-frame {
    position: relative;
    width: min(calc(100vw - 32px), calc(88vh * 9 / 16), 480px);
    aspect-ratio: 9 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
  }
  .main-product__rr-modal-frame video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .main-product__rr-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  /* Bundle promo inside info column */
  .main-product__bundle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .main-product__bundle-tag {
    align-self: flex-start;
    background: #3F83F8;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    padding: 5px 24px 4px;
    border-radius: 8px 8px 0 0;
  }
  /* Full-width bundle banner image (Figma) — tag on top, image below. */
  .main-product__bundle-full { display: block; width: 100%; line-height: 0; }
  .main-product__bundle-full-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0 12px 12px 12px;
  }
  .main-product__bundle-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #F3F3F3;
    background-image: linear-gradient(135deg, rgba(63,131,248,0.04) 0%, rgba(0,0,0,0) 60%);
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
  }
  .main-product__bundle-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .main-product__bundle-title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
  }
  .main-product__bundle-price {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #3F83F8;
  }
  .main-product__bundle-compare {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #A7A7A7;
    text-decoration: line-through;
  }
  .main-product__bundle-sub {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #605F5F;
    margin: 0;
  }
  .main-product__bundle-cta {
    align-self: flex-start;
    margin-top: 6px;
    appearance: none;
    border: 0;
    cursor: pointer;
    background: #000;
    color: #FFF;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
  }
  .main-product__bundle-cta.is-added { background: var(--cd-accent, #3F83F8); }
  .main-product__bundle-cta:disabled { opacity: .7; pointer-events: none; }
  /* Bleed: the shot sits on the card's bottom edge, cropped from the top,
     so a tall product shows its head and a bit of body running off the card. */
  .main-product__bundle-card--bleed .main-product__bundle-media { align-self: end; margin-bottom: -16px; }
  .main-product__bundle-card--bleed .main-product__bundle-img-wrap { height: 132px; }
  .main-product__bundle-card--bleed .main-product__bundle-img { object-fit: cover; object-position: 50% 0; }
  .main-product__bundle-media {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .main-product__bundle-img-wrap {
    width: 110px;
    height: 110px;
    flex: 0 0 110px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-product__bundle-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .main-product__bundle-plus {
    font-family: var(--font-primary--family);
    font-size: 18px;
    color: #6B7280;
  }

  .main-product__accordion {
    display: flex;
    flex-direction: column;
  }
  /* Reference sizing: 56px rows, 16/24 headings, an 11px chevron. */
  .main-product__acc { border-bottom: 1px solid #EAEAEA; }
  .main-product__acc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-primary--family);
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__acc-summary::-webkit-details-marker { display: none; }
  /* A plus that becomes a minus, as in the reference: both bars swing half a
     turn and the upright one fades out on the way. */
  .main-product__acc-icon {
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #121212;
  }
  .main-product__acc-icon::before,
  .main-product__acc-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 4px;
    background: currentColor;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .main-product__acc-icon::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .main-product__acc-icon::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .main-product__acc[open] .main-product__acc-icon::before {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }
  .main-product__acc[open] .main-product__acc-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  .main-product__acc-body {
    padding: 0 0 16px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 21px;
    color: #121212;
    opacity: 0.85;
  }
  /* Rich text inside a panel: paragraphs breathe, lists sit close to the
     left edge instead of the browser's 40px default indent. */
  .main-product__acc-body > :first-child { margin-top: 0; }
  .main-product__acc-body > :last-child { margin-bottom: 0; }
  .main-product__acc-body p { margin: 0 0 10px; }
  .main-product__acc-body ul,
  .main-product__acc-body ol {
    margin: 0 0 10px;
    padding-left: 0;
    list-style-position: inside;
  }
  .main-product__acc-body li { margin: 0 0 4px; }

  /* ─── Dental advisory board (foot of the buy column) ───────────────── */
  .main-product__da { margin: 0; }
  .main-product__da-title {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000;
    margin: 0 0 12px;
  }
  .main-product__da-board {
    border: 1px solid #EDEDED;
    border-radius: 12px;
    overflow: hidden;
  }
  /* One pixel more on top: Neue Montreal sits its caps a touch high in the
     line box, so equal padding reads as a heavier bottom. */
  .main-product__da-board-label {
    margin: 0;
    padding: 15px 16px 14px;
    background: #FAFAFA;
    border-bottom: 1px solid #EDEDED;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
  }
  /* Both strips share a shell: arrows either side of a scroller. */
  .main-product__da-strip-wrap,
  .main-product__da-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .main-product__da-strip-wrap { position: relative; padding: 10px 0; }
  /* The roster scrolls sideways (swipe, trackpad or mouse drag) and runs to
     the board's edges; whichever side still has doctors hidden fades out. */
  .main-product__da-doctors {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    --da-fl: 0px;
    --da-fr: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--da-fl), #000 calc(100% - var(--da-fr)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--da-fl), #000 calc(100% - var(--da-fr)), transparent 100%);
    -webkit-user-select: none;
    user-select: none;
  }
  .main-product__da-doctors.is-fade-l { --da-fl: 48px; }
  .main-product__da-doctors.is-fade-r { --da-fr: 48px; }
  .main-product__da-doctors.is-dragging { cursor: grabbing; }
  .main-product__da-doctors img { -webkit-user-drag: none; pointer-events: none; }
  .main-product__da-tabs-wrap {
    margin: 0;
    padding: 0 16px;
    border-top: 1px solid #EDEDED;
  }
  .main-product__da-arrow {
    appearance: none;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #EDEDED;
    border-radius: 50%;
    color: #121212;
    cursor: pointer;
  }
  .main-product__da-arrow.is-shown { display: inline-flex; }
  .main-product__da-arrow svg { display: block; }
  .main-product__da-doctors,
  .main-product__da-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .main-product__da-tabs { gap: 22px; align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .main-product__da-doctors::-webkit-scrollbar,
  .main-product__da-tabs::-webkit-scrollbar { display: none; }
  .main-product__da-doctor {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 0;
  }
  .main-product__da-avatar {
    display: block;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: #F3F3F3;
  }
  .main-product__da-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .main-product__da-doctor-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
  .main-product__da-doctor-name {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    color: #121212;
    white-space: nowrap;
  }
  .main-product__da-doctor-role {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #807E7E;
    white-space: nowrap;
  }
  .main-product__da-tab {
    appearance: none;
    flex: 0 0 auto;
    padding: 13px 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: #807E7E;
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease;
  }
  .main-product__da-tab.is-active {
    color: #121212;
    border-bottom-color: #121212;
    font-weight: 500;
  }
  .main-product__da-panels { margin: 0; padding: 16px; }
  .main-product__da-panel { display: none; }
  .main-product__da-panel.is-active { display: block; }
  .main-product__da-panel p { margin: 0 0 10px; }
  .main-product__da-panel > :last-child { margin-bottom: 0; }
  .main-product__da-quote {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: #605F5F;
  }
  .main-product__da-body {
    margin: 10px 0 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 24px;
    color: #605F5F;
  }
  .main-product__da-panel { font-size: 15px; line-height: 24px; color: #605F5F; }
  .main-product__da-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #3F83F8;
    text-decoration: none;
  }
  .main-product__da-link:hover { text-decoration: underline; }
  .main-product__da-link svg { display: block; flex-shrink: 0; }
  .main-product__da-body ul,
  .main-product__da-body ol { margin: 0 0 10px; padding-left: 0; list-style-position: inside; }
  .main-product__da-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 0;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
  }
  .main-product__da-byline-name { font-weight: 500; color: #121212; }
  .main-product__da-byline-role { color: #807E7E; }

  /* Contains / does not contain, inside an accordion panel. Laid out like
     IM8's "What's in it and what's not": the note on top, then the two lists
     side by side under a hairline with a divider between them. Left: ticked
     rows separated by hairlines. Right: outlined chips with a red cross.
     Phones stack the two columns. */
  .main-product__acc-lists {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 0 0 16px;
  }
  .main-product__acc-note-mark { flex: 0 0 auto; width: 44px; height: 44px; }
  .main-product__acc-note-mark svg { display: block; width: 100%; height: 100%; }
  .main-product__acc-note { display: flex; align-items: center; gap: 12px; }
  .main-product__acc-note {
    margin: 0;
    padding: 10px 12px;
    background: #FAFAFA;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 20px;
    color: #605F5F;
  }
  .main-product__acc-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .main-product__acc-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 0;
    border-top: 1px solid rgba(18, 18, 18, 0.08);
  }
  .main-product__acc-col--no { padding-bottom: 0; }
  @media (min-width: 750px) {
    .main-product__acc-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }
    .main-product__acc-col { padding: 20px 0 0; }
    .main-product__acc-col--yes { padding-right: 24px; border-right: 1px solid rgba(18, 18, 18, 0.08); }
    .main-product__acc-col--no { padding-left: 24px; }
    .main-product__acc-col:only-child { grid-column: 1 / -1; padding-inline: 0; border-right: 0; }
  }
  .main-product__acc-col-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
  }
  .main-product__acc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
  }
  .main-product__acc-badge--yes { background: #3F83F814; color: #3F83F8; }
  .main-product__acc-badge--no { background: #E0242414; color: #E02424; }
  .main-product__acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .main-product__acc-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(18, 18, 18, 0.06);
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #121212;
  }
  .main-product__acc-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .main-product__acc-tick { display: inline-flex; flex-shrink: 0; margin-top: 3px; color: #3F83F8; }
  .main-product__acc-tick svg, .main-product__acc-badge svg, .main-product__acc-chip-x svg { display: block; }
  .main-product__acc-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .main-product__acc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #FFFFFF;
    border: 1px solid rgba(18, 18, 18, 0.1);
    border-radius: 999px;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    color: #121212;
  }
  .main-product__acc-chip-x { display: inline-flex; flex-shrink: 0; color: #E02424; }

  /* Sticky Add-to-Cart bar — appears once the primary ATC leaves the viewport. */
  /* Floats like the header: the fixed element is only the wrap, the visible
     surface is the inner card. */
  .main-product__sticky-atc {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 38px;
    z-index: 40;
    background: transparent;
    padding: 12px 16px 15px;
    transform: translateY(calc(100% + 38px));
    transition: transform 260ms cubic-bezier(.4,0,.2,1), opacity 200ms ease;
    opacity: 0;
    pointer-events: none;
  }
  .main-product__sticky-atc.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-product__sticky-atc[hidden] { display: none; }
  .main-product__sticky-atc-inner {
    max-width: 960px;
    margin-inline: auto;
    padding: 15px 16px 15px 16px;
    background: #FFFFFF;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  @media (min-width: 1024px) {
    .main-product__sticky-atc-inner { padding: 15px 16px 15px 16px; gap: 18px; }
  }
  /* Purchase option, mirrored both ways with the radios in the form. */
  .main-product__sticky-atc-plan { flex: 0 0 auto; display: none; }
  @media (min-width: 1024px) { .main-product__sticky-atc-plan { display: block; } }
  .main-product__sticky-atc-plan select {
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    color: #121212;
    padding: 12px 38px 12px 16px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%23121212' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
  }
  .main-product__sticky-atc-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
  }
  .main-product__sticky-atc-thumb {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F3F3;
  }
  @media (min-width: 1024px) {
    .main-product__sticky-atc-thumb { width: 58px; height: 58px; flex-basis: 58px; }
  }
  .main-product__sticky-atc-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .main-product__sticky-atc-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .main-product__sticky-atc-title-mob { display: none; }
  .main-product__sticky-atc-title {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (min-width: 1024px) {
    .main-product__sticky-atc-title { font-size: 16px; line-height: 22px; }
  }
  .main-product__sticky-atc-price {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #121212;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .main-product__sticky-atc-price { font-size: 15px; line-height: 20px; }
  }
  .main-product__sticky-atc-btn {
    appearance: none;
    border: 0;
    padding: 14px 26px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: 8px;
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .main-product__sticky-atc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  @media (min-width: 1024px) {
    .main-product__sticky-atc-btn { padding: 14px 32px; min-width: 210px; }
  }

  /* Sticky ATC on phones: 343px minus thumb, gaps and a 160px button left
     67px for the title. Thumb off, button compact, text takes the rest. */
  @media (max-width: 749px) {
    /* Phones: a 40px shot on the left and the short name ("Purple V34"). */
    .main-product__sticky-atc-thumb { display: block; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; }
    .main-product__sticky-atc-title-desk { display: none; }
    .main-product__sticky-atc-title-mob { display: inline; }
    .main-product__sticky-atc-info { min-width: 0; flex: 1 1 auto; }
    .main-product__sticky-atc-text { min-width: 0; flex: 1 1 auto; }
    .main-product__sticky-atc-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .main-product__sticky-atc-btn { flex: 0 0 auto; min-width: 128px; padding-inline: 18px; }
  }

  /* Solution cards on narrow phones: three cards share 343px, so the text
     column next to a 30px thumb was 47px wide and "(14 strips)" broke in
     two. Stack the thumb above the text and let the text use the card. */
  @media (max-width: 479px) {
    .main-product__solution-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 9px; }
    .main-product__solution-info { width: 100%; gap: 2px 5px; }
    .main-product__solution-subline { font-size: 11.5px; line-height: 15px; white-space: nowrap; }
  }
  /* Phones: the endorsement leaves the gallery corner and sits as a card
     above the delivery timeline (same border and radius as that block);
     desktop keeps the corner sticker. Real-results row shows 2.5 tiles. */
  .main-product__sticker--inline { display: none; }
  @media (max-width: 1023px) {
    /* Over the first shot, phones keep only the laurel mark (top-left,
       gold laurels), fading out with the gallery like the desktop card. */
    .main-product__sticker--stage {
      display: flex;
      top: 12px;
      left: 12px;
      padding: 0;
      gap: 0;
      max-width: none;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .main-product__sticker--stage .main-product__sticker-body,
    .main-product__sticker--stage .main-product__sticker-close { display: none; }
    .main-product__sticker--stage .main-product__sticker-laurel { color: #DBB15C; }
    .main-product__sticker--inline {
      display: flex;
      position: static;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
      margin: 0;
      padding: 14px 26px;
      gap: 32px;
      border: 1px solid #F3F3F3;
      border-radius: 11px;
      box-shadow: none;
    }
    .main-product__sticker--inline .main-product__sticker-body { padding-left: 14px; }
    .main-product__sticker--inline .main-product__sticker-copy { max-width: none; }
    .main-product__sticker--inline .main-product__sticker-copy::before { display: none; }
    .main-product__sticker--inline .main-product__sticker-link-desk { display: none; }
    .main-product__sticker--inline .main-product__sticker-link-mob { display: inline; }
    /* The foot may wrap (avatars, then the link) in the narrow copy column;
       the avatars keep their size instead of shrinking with the row. */
    .main-product__sticker--inline .main-product__sticker-foot { flex-wrap: wrap; gap: 11px 10px; margin-top: 2px; }
    /* Phones: the laurels in the promo bar's gold. */
    .main-product__sticker--inline .main-product__sticker-laurel { color: #DBB15C; }
    .main-product__sticker--inline .main-product__sticker-avatars { flex: 0 0 auto; }
    .main-product__sticker--inline .main-product__sticker-avatars img { flex: 0 0 auto; width: 24px; height: 24px; }
    .main-product__sticker--inline .main-product__sticker-avatars img + img { margin-left: -8px; }
    .main-product__rr-tile { flex-basis: calc((100% - 12px) / 2.5); }
  }
  /* Phones: the breadcrumb (two grey lines over the gallery) goes; the
     sticky bar drops from 111px to ~62px (44px button, 8px card padding,
     10px off the bottom); the subscription card's name fits one line. */
  @media (max-width: 1023px) {
    .main-product__breadcrumbs { display: none; }
    .main-product__sticky-atc { bottom: 10px; padding: 0 12px; transform: translateY(calc(100% + 10px)); }
    .main-product__sticky-atc.is-visible { transform: translateY(0); }
    .main-product__sticky-atc-inner { padding: 8px 8px 8px 14px; gap: 10px; }
    .main-product__sticky-atc-title { font-size: 14px; line-height: 18px; }
    .main-product__sticky-atc-price { font-size: 14px; line-height: 18px; }
    .main-product__sticky-atc-btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
    .main-product__purchase-name { font-size: 15px; line-height: 20px; }
    .main-product__purchase-pill-price { font-size: 16px; line-height: 22px; }
    /* Thumbs at histrips' size: 64px squares, 8px radius, 8px apart, the
       active one underlined. */
    .main-product__title { font-size: 28px; }
    /* Rating: 75px stars, "4,8" tight against them, "(22.104)", then the bar
       and the full recommended line. */
    .main-product__stars .rating-stars { width: 78px; height: 12px; }
    .main-product__rating { gap: 4px; }
    .main-product__rating-desk { display: none; }
    .main-product__rating-mob { display: inline; }
    .main-product__rating-score { margin-left: 0; }
    .main-product__rating-sep--first { display: inline; }
    /* One line: the recommended line no longer claims its own row (it only
       wraps if the phone is too narrow for it), 13px across the row. */
    .main-product__rating-meta { flex: 0 0 auto; }
    .main-product__rating-score, .main-product__rating-count, .main-product__rating-extra, .main-product__rating-sep { font-size: 13px; line-height: 18px; white-space: nowrap; }
    .main-product__thumb { width: 64px; height: 70px; }
    .main-product__thumb-img,
    .main-product__thumb > img { height: 64px; border-radius: 8px; }
  }
/* END_SECTION:main-product */

/* START_SECTION:main-search (INDEX:60) */
.main-search__form { max-width: 760px; }
  .main-search__row { display: flex; flex-direction: column; gap: 10px; }
  @media (min-width: 750px) { .main-search__row { flex-direction: row; } .main-search__row .std__btn { width: auto; flex: 0 0 auto; } .main-search__row .std__input { flex: 1 1 auto; } }
  .main-search__other { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid #EAEAEA; border-radius: 12px; text-decoration: none; color: #121212; }
  .main-search__other-kind { font-size: 12px; line-height: 16px; color: #8A8A8A; }
  .main-search__other-title { font-size: 15px; line-height: 21px; font-weight: 500; }
/* END_SECTION:main-search */

/* START_SECTION:nav-drawer (INDEX:61) */
.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
  }
  .nav-drawer[hidden] { display: none; }
  .nav-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    opacity: 0;
    transition: opacity 240ms ease;
    pointer-events: none;
  }
  .nav-drawer[data-open="true"] { pointer-events: auto; }
  .nav-drawer[data-open="true"] .nav-drawer__overlay {
    background: rgba(0,0,0,0.4);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: min(390px, 100vw);
    height: 100%;
    /* Figma spec: light grey drawer body so the white category pills,
       bundle card and secondary card read as raised elements. Header
       stays explicitly white via .nav-drawer__top. */
    background: var(--nd-bg, #F3F3F3);
    color: var(--nd-fg, #121212);
    transform: translateX(-100%);
    transition: transform 280ms cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    box-shadow: 0 0 24px rgba(0,0,0,0);
  }

  /* Views: main + one submenu per parent, stacked and sliding within the panel.
     Each view owns its own vertical scroll so the sticky top stays put. */
  .nav-drawer__view,
  .nav-drawer__submenu {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--nd-bg, #F3F3F3);
  }
  .nav-drawer__submenu {
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(.4,0,.2,1);
    visibility: hidden;
    z-index: 2;
  }
  .nav-drawer__submenu.is-open {
    transform: translateX(0);
    visibility: visible;
  }
  .nav-drawer__submenu-top {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 66px;
    padding: 12px 16px;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
  }
  .nav-drawer__back {
    appearance: none;
    border: 0;
    background: transparent;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    color: var(--nd-fg, #121212);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
  }
  .nav-drawer__submenu-title {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #000;
  }
  .nav-drawer__submenu-list {
    list-style: none;
    margin: 0;
    padding: 15px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  /* Product cards: the desktop mega card (grey well, square shot, title,
     black "Comprar"), stacked and two across. */
  .nav-drawer__prod-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .nav-drawer__prod {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    color: inherit;
  }
  .nav-drawer__prod-media {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer__prod-img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .nav-drawer__prod-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #000000;
  }
  .nav-drawer__prod-cta {
    margin-top: 6px;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    text-decoration: none;
  }
  .nav-drawer__sublink {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: #FFFFFF;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #000;
    transition: background 160ms ease;
  }
  .nav-drawer__sublink:hover { background: #F8F8F8; }
  /* Same button as the desktop mega menu's "Ver todo", full width here. */
  .nav-drawer__sublink--all {
    justify-content: center;
    margin-top: 8px;
    min-height: 45px;
    padding: 0 16px;
    background: #121212;
    color: #FFFFFF;
    border-radius: 6px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .nav-drawer__sublink--all:hover { background: #121212; }
  .nav-drawer[data-open="true"] .nav-drawer__panel {
    transform: translateX(0);
    box-shadow: 8px 0 24px rgba(0,0,0,0.08);
  }
  @media (min-width: 1024px) {
    .nav-drawer { display: none; }
  }

  .nav-drawer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 66px;
    padding: 12px 20px;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .nav-drawer__brand { display: inline-flex; text-decoration: none; color: inherit; }
  .nav-drawer__logo { width: 138px; height: 28px; object-fit: contain; display: block; }
  .nav-drawer__wordmark {
    font-family: var(--font-primary--family);
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .nav-drawer__close {
    appearance: none;
    border: 0;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 4px;
    color: var(--nd-fg, #121212);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .nav-drawer__close svg { width: 24px; height: 24px; }

  .nav-drawer__body {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 15px 24px 24px;
  }

  /* Review line, as in the hero. */
  .nav-drawer__rating { display: flex; align-items: center; gap: 8px; }
  .nav-drawer__rating-stars { display: inline-flex; color: #2BB673; }
  .nav-drawer__rating-svg { display: block; width: 78px; height: auto; }
  .nav-drawer__rating-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--nd-fg, #121212);
  }

  .nav-drawer__categories {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .nav-drawer__category {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px;
    background: #FFFFFF;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    text-align: left;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 160ms ease;
  }
  .nav-drawer__category:hover { background: #F8F8F8; }
  .nav-drawer__cat-thumb {
    width: 40px;
    height: 40px;
    background: #F3F3F3;
    border-radius: 4px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-drawer__cat-thumb-img {
    width: 18px !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
  }
  .nav-drawer__cat-label {
    flex: 1 1 auto;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #000;
  }
  .nav-drawer__cat-arrow {
    color: var(--nd-fg, #121212);
    display: inline-flex;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  .nav-drawer__divider {
    border: 0;
    border-top: 1px solid var(--nd-divider, #F3F4F6);
    margin: 0;
    width: 100%;
  }

  /* Figma spec node 8320:10221 (342×189):
     - Blue tag 174×25 at top-left, only top corners rounded
     - Card 342×164 below (all 4 corners rounded EXCEPT top-left where tag sits)
     - Product image 191×191 spilling out top-left (-30, -9), overflow-clipped
     - Text column absolute at x=123, w=207 with 2-line title + sub + CTA */
  .nav-drawer__bundle {
    position: relative;
    padding-top: 25px;
  }
  .nav-drawer__bundle-tag {
    position: absolute;
    top: 0;
    left: 0;
    width: 174px;
    height: 25px;
    background: var(--nd-accent, #3F83F8);
    color: #F8F8F8;
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 8px 8px 0 0;
    text-align: center;
    z-index: 2;
    box-sizing: border-box;
    /* Figma text "Bundle & Save 15%" is single-line — force nowrap so it
       never spills into the card below (was wrapping to 2 lines because the
       original 35/37 side padding left too little horizontal room). */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer__bundle-card {
    position: relative;
    min-height: 164px;
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
    /* 65 / 35 split so the proportions can be tweaked in one place. Content
       drives card height (padding row-gap 12/20). Image column is a normal
       grid cell with the product still centred inside. */
    display: grid;
    grid-template-columns: 65% 35%;
    align-items: center;
    padding: 12px 12px 20px 20px;
    gap: 8px;
    /* Figma spec: base rgba(63,131,248,0.2) + 2 plus-lighter radial glows.
       Glow centres near ~24%,55% matching the Figma svg transforms. */
    background:
      radial-gradient(64% 100% at 24% 55%, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 100%),
      radial-gradient(42% 82% at 24% 55%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%),
      rgba(63,131,248,0.2);
    background-blend-mode: plus-lighter, plus-lighter, normal;
  }
  /* Media is a normal grid cell now (right column, 35% of card width).
     Image is contained inside and can grow to fill without spilling out. */
  .nav-drawer__bundle-media {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 132px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer__bundle-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  /* Content column flows normally so its intrinsic height drives the card's
     min-height — a 3-line title never gets clipped by the section below. */
  .nav-drawer__bundle-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    z-index: 2;
  }
  /* Figma: 23px Regular for the whole title, but the price part inside is
     Medium — merchant wraps €44.99 in <strong> tags to bold it. */
  .nav-drawer__bundle-title {
    font-family: var(--font-primary--family);
    font-size: 23px;
    line-height: 26px;
    font-weight: 400;
    color: #000000;
    margin: 0;
  }
  .nav-drawer__bundle-title strong,
  .nav-drawer__bundle-title b,
  .nav-drawer__bundle-price { font-weight: 500; }
  .nav-drawer__bundle-sub {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #000000;
    margin: 0;
  }
  .nav-drawer__bundle-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #000000;
    color: #FFFFFF;
    text-decoration: none;
    padding: 8px 32px;
    border-radius: 4px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin-top: 5px;
  }

  .nav-drawer__secondary {
    display: flex;
    gap: 20px;
    padding: 6px 14px;
    background: #FFFFFF;
    border-radius: 8px;
  }
  .nav-drawer__sec-col {
    flex: 1 1 0;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .nav-drawer__sec-col li { padding: 6px 0; }
  .nav-drawer__sec-link {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--nd-fg, #000);
    text-decoration: none;
  }
  .nav-drawer__locale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 4px 0;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--nd-fg, #000);
  }
  .nav-drawer__locale-flag {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
  }
  .nav-drawer__sec-caret { flex-shrink: 0; }
/* END_SECTION:nav-drawer */

/* START_SECTION:pdp-benefit-cards (INDEX:62) */
.benefit-cards {
    background: var(--bc-bg, #FFFFFF);
    padding: var(--bc-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .benefit-cards { padding: var(--bc-pad-desk, 60px 280px); }
  }
  .benefit-cards__inner {
    max-width: var(--bc-max-desk, 1360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .benefit-cards__inner { gap: 48px; }
  }
  .benefit-cards__title {
    font-family: var(--font-primary--family);
    font-size: var(--bc-title-mob, 32px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--bc-fg, #000);
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .benefit-cards__title { font-size: var(--bc-title-desk, 54px); }
  }

  /* Mobile: stacked cards. Desktop: equal-width row. */
  .benefit-cards__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .benefit-cards__row { flex-direction: row; gap: 30px; }
  }
  .benefit-cards__card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--bc-card-bg, #EAEAEA);
    border-radius: 13px;
    overflow: hidden;
    aspect-ratio: 433 / 674;
  }
  .benefit-cards__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* END_SECTION:pdp-benefit-cards */

/* START_SECTION:pdp-bundle-promo (INDEX:63) */
.pdp-bundle {
    background: var(--pb-bg, #FFFFFF);
    padding: var(--pb-pad-mob, 16px);
  }
  @media (min-width: 1024px) {
    .pdp-bundle { padding: var(--pb-pad-desk, 24px clamp(20px, 6vw, 120px)); }
  }
  .pdp-bundle__inner {
    max-width: var(--pb-max-desk, 460px);
    margin: 0 auto;
  }
  .pdp-bundle__wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .pdp-bundle__tag {
    align-self: flex-start;
    background: var(--pb-tag-bg, #3F83F8);
    color: var(--pb-tag-fg, #FFFFFF);
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    padding: 5px 24px 4px;
    border-radius: 8px 8px 0 0;
  }
  .pdp-bundle__card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--pb-card-bg, #F3F3F3);
    border-radius: 0 8px 8px 8px;
    overflow: hidden;
    background-image: linear-gradient(135deg, rgba(63,131,248,0.04) 0%, rgba(0,0,0,0) 60%);
  }
  .pdp-bundle__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pdp-bundle__title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #121212;
    margin: 0;
  }
  .pdp-bundle__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
  }
  .pdp-bundle__price-current {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #3F83F8;
  }
  .pdp-bundle__price-compare {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 18px;
    color: #A7A7A7;
    text-decoration: line-through;
  }
  .pdp-bundle__sub {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16px;
    color: #605F5F;
    margin: 0;
  }
  .pdp-bundle__cta {
    align-self: flex-start;
    margin-top: 6px;
    background: #000;
    color: #FFF;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
  }
  .pdp-bundle__media {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }
  .pdp-bundle__product {
    width: 64px;
    height: 100px;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .pdp-bundle__product { width: 88px; height: 120px; }
  }
  .pdp-bundle__product-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .pdp-bundle__plus {
    font-family: var(--font-primary--family);
    font-size: 18px;
    color: #6B7280;
  }
/* END_SECTION:pdp-bundle-promo */

/* START_SECTION:pdp-comparison (INDEX:64) */
.pdp-comparison {
    background: var(--pc-bg, #FFFFFF);
    color: var(--pc-fg, #121212);
    padding: var(--pc-pad-mob, 32px 16px);
  }
  @media (min-width: 1024px) {
    .pdp-comparison { padding: var(--pc-pad-desk, 48px clamp(20px, 6vw, 120px)); }
  }
  .pdp-comparison__inner {
    max-width: var(--pc-max-desk, 1200px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .pdp-comparison__inner { gap: 62px; align-items: flex-start; }
  }
  /* Same title as the rest of the site: 34px on phones, one flowing line
     (the <br> plus pre-line used to leave an empty line in between). */
  .pdp-comparison__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--pc-fg, #121212);
    text-align: center;
    margin: 0;
  }
  .pdp-comparison__title br { display: none; }
  @media (min-width: 1024px) {
    /* Desktop: single centered line — drop the mobile line break.
       Figma Text/Heading/03: 54/110%, weight 400, tracking -1px, #000. */
    .pdp-comparison__title {
      display: block;
      position: relative;
      width: 100%;
      font-size: 48px;
      line-height: 110%;
      font-weight: 400;
      letter-spacing: -1px;
      color: #000;
      text-align: center;
      white-space: normal;
      font-feature-settings: 'liga' off, 'clig' off;
    }
    .pdp-comparison__title br { display: none; }
  }

  .pdp-comparison__track {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-comparison__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .pdp-comparison__track { gap: 16px; }
  }

  .pdp-comparison__card {
    position: relative;
    flex: 0 0 76%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--pc-card-bg, #F3F3F3);
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    aspect-ratio: 433 / 673;
    color: #FFFFFF;
  }
  @media (min-width: 1024px) {
    .pdp-comparison__card { flex: 1 1 0; min-width: 0; }
  }
  /* When no image is set, keep the grey card with dark text (fallback state). */
  .pdp-comparison__card.is-no-media {
    aspect-ratio: auto;
    color: var(--pc-fg, #121212);
    min-height: 220px;
    justify-content: flex-start;
  }
  .pdp-comparison__card.is-no-media .pdp-comparison__body { padding: 24px 20px; }
  /* Media fills the whole card as a bg layer; dark gradient overlay at the
     bottom makes overlaid white text readable. */
  .pdp-comparison__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }
  .pdp-comparison__media-overlay {
    position: absolute;
    inset: 0;
    /* text sits on top now: the shade comes down from the top edge */
    background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0.15) 25%,
      rgba(0, 0, 0, 0) 45%);
    pointer-events: none;
  }
  .pdp-comparison__media > img,
  .pdp-comparison__media-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  /* Body on top of the image, Figma "Ultra-Soft Bristles" cards: a large
     headline, the catches underneath as plain lines, no icons. */
  .pdp-comparison__body {
    position: relative;
    z-index: 1;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  @media (min-width: 1024px) {
    .pdp-comparison__body { padding: 40px; gap: 14px; }
  }
  .pdp-comparison__card-title {
    font-family: var(--font-primary--family);
    font-size: 24px;
    line-height: 29px;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: inherit;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .pdp-comparison__card-title { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
  }
  .pdp-comparison__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pdp-comparison__bullet {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 21px;
    font-weight: 400;
    color: inherit;
    opacity: 0.8;
  }
  @media (min-width: 1024px) {
    .pdp-comparison__bullet { font-size: 20px; line-height: 28px; }
  }

  /* Hover: the photo eases in a little inside its frame. */
  .pdp-comparison__media-img {
    transform: scale(1);
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  @media (hover: hover) {
    .pdp-comparison__card:hover .pdp-comparison__media-img { transform: scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce) {
    .pdp-comparison__media-img { transition: none; }
  }

  /* Dots only, centred. Hidden when every card is already in view. */
  .pdp-comparison__nav {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 4px;
  }
  .pdp-comparison__nav.is-static { display: none; }
  .pdp-comparison__dots { display: inline-flex; align-items: center; gap: 8px; }
  .pdp-comparison__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: background 200ms ease, width 240ms ease;
  }
  .pdp-comparison__dot.is-active { background: #121212; width: 24px; }
  /* Phones: more air under the title (the inner's 16px gap was tight). */
  @media (max-width: 1023px) {
    .pdp-comparison__title { margin-bottom: 16px; }
  }
/* END_SECTION:pdp-comparison */

/* START_SECTION:pdp-complete-routine (INDEX:65) */
.pdp-complete-routine {
    background: var(--cr-bg, #FFFFFF);
    color: var(--cr-fg, #000000);
    padding: var(--cr-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine { padding: var(--cr-pad-desk, 60px 280px); }
  }
  .pdp-complete-routine__inner {
    max-width: var(--cr-max-desk, 1400px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    /* title to tabs 24px, tabs to cards 48px, as on the home */
    .pdp-complete-routine__panel { margin-top: 24px; }
  }

  /* Title exactly as the home listing's. */
  .pdp-complete-routine__title {
    font-family: var(--font-primary--family);
    font-size: var(--cr-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--cr-fg, #000);
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine__title {
      font-size: var(--cr-title-desk, 48px);
      line-height: 1.1;
      letter-spacing: -1px;
    }
  }

  /* Pill tab bar, as on the home: hairline box, one pill sliding between
     the tabs. Mobile: full width, tabs share the row. Desktop: intrinsic. */
  .pdp-complete-routine__tabs {
    display: flex;
    width: 100%;
    align-items: center;
    box-shadow: inset 0 0 0 1px #E6E6E6;
    border: 0;
    border-radius: 10px;
    padding: 5px;
    background: #FFFFFF;
    gap: 0;
    height: 48px;
    overflow: hidden;
    position: relative;
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine__tabs { display: inline-flex; width: auto; }
  }
  .pdp-complete-routine__tab-pill {
    position: absolute;
    top: 5px;
    left: 0;
    height: calc(100% - 10px);
    width: var(--pill-w, 0px);
    transform: translateX(var(--pill-x, 0px));
    background: #F3F3F3;
    border-radius: 7px;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: transform 320ms cubic-bezier(.16, 1, .3, 1),
                width 320ms cubic-bezier(.16, 1, .3, 1),
                opacity 200ms ease;
  }
  .pdp-complete-routine__tab-pill.is-ready { opacity: 1; }
  .pdp-complete-routine__tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 7px;
    z-index: 1;
    padding: 12px;
    font-family: var(--font-primary--family);
    font-size: 17px;
    letter-spacing: 0;
    line-height: normal;
    font-weight: 400;
    color: #818181;
    cursor: pointer;
    transition: color 180ms ease;
    white-space: nowrap;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1 1 0;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine__tab { flex: 0 0 auto; padding: 12px 15px; }
  }
  .pdp-complete-routine__tab:hover,
  .pdp-complete-routine__tab.is-active { color: #000; }

  .pdp-complete-routine__panel {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .pdp-complete-routine__panel[hidden] { display: none; }

  /* Mobile: 2-up snap slider. Desktop: a plain 4-up grid. */
  .pdp-complete-routine__track {
    display: flex;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-complete-routine__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .pdp-complete-routine__track {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 15px;
      overflow-x: visible;
      scroll-snap-type: none;
    }
  }
  .pdp-complete-routine__track > .product-card {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - 12px) / 2);
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine__track > .product-card { flex: initial; width: auto; }
    .pdp-complete-routine__track > .product-card .product-card__media { aspect-ratio: 1 / 1; }
  }

  .pdp-complete-routine__empty {
    margin: 8px 0 0;
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #808080;
    padding: 24px 0;
  }
  .pdp-complete-routine__empty[hidden] { display: none; }

  /* Progress bar under the mobile slider, as on the home. */
  .pdp-complete-routine__scrollbar {
    position: relative;
    width: 100%;
    height: 5px;
    background: #E6E6E6;
    border-radius: 999px;
    margin-top: 28px;
    overflow: hidden;
  }
  .pdp-complete-routine__scrollbar[hidden] { display: none; }
  .pdp-complete-routine__scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 33%;
    background: #000000;
    border-radius: 999px;
    transition: transform 120ms linear;
  }
  @media (min-width: 1024px) {
    .pdp-complete-routine__scrollbar { display: none; }
  }
  /* Phones: the home's routine block — 42px tab bar with 13px tabs, and a
     card and a half per view on a track that bleeds to the screen edge. */
  @media (max-width: 1023px) {
    /* Sized by the two labels and centred, not the full column. */
    .pdp-complete-routine__tabs { display: inline-flex; width: auto; padding: 4px; height: 42px; }
    .pdp-complete-routine__tab-pill { top: 4px; height: calc(100% - 8px); }
    .pdp-complete-routine__tab { padding: 9px 12px; font-size: 13px; flex: 0 0 auto; }
    .pdp-complete-routine__track {
      margin-inline: -16px;
      padding-inline: 16px;
      scroll-padding-inline: 16px;
      width: calc(100% + 32px);
    }
    .pdp-complete-routine__track > .product-card { flex: 0 0 calc((100% - 12px) / 1.5); }
  }
/* END_SECTION:pdp-complete-routine */

/* START_SECTION:pdp-customer-reviews (INDEX:66) */
.pdp-customer-reviews__col.is-jm-pending { display: none; }
  .pdp-customer-reviews {
    background: var(--pcr-bg, #FFFFFF);
    color: var(--pcr-fg, #121212);
    padding: var(--pcr-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .pdp-customer-reviews { padding: var(--pcr-pad-desk, 60px 280px); }
  }

  .pdp-customer-reviews__inner {
    max-width: var(--pcr-max-desk, 1360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    /* Head LEFT column, reviews grid RIGHT — matches Figma split. */
    .pdp-customer-reviews__inner {
      flex-direction: row;
      align-items: flex-start;
      gap: 60px;
    }
    .pdp-customer-reviews__head { flex: 0 0 340px; }
    .pdp-customer-reviews__grid { flex: 1 1 auto; min-width: 0; }
  }

  .pdp-customer-reviews__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pdp-customer-reviews__head-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .pdp-customer-reviews__title {
    font-family: var(--pcr-font);
    font-size: var(--pcr-title-mob, 32px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--pcr-fg, #121212);
    margin: 0;
    max-width: 260px;
  }
  @media (min-width: 1024px) {
    .pdp-customer-reviews__title { font-size: var(--pcr-title-desk, 32px); }
  }
  .pdp-customer-reviews__score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }
  .pdp-customer-reviews__score-value {
    font-family: var(--pcr-font);
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    color: var(--pcr-fg, #121212);
  }
  .pdp-customer-reviews__score-out {
    font-family: var(--pcr-font);
    font-size: 14px;
    color: #605F5F;
  }
  .pdp-customer-reviews__stars { display: inline-flex; gap: 2px; color: var(--pcr-star, #2BB673); }
  .pdp-customer-reviews__stars-svg { height: 14px; width: auto; display: block; }
  .pdp-customer-reviews__stars-svg--empty { color: #E5E5E5; }
  .pdp-customer-reviews__verdict {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .pdp-customer-reviews__verdict-stars { display: inline-flex; color: var(--pcr-star, #2BB673); }
  .pdp-customer-reviews__verdict-star { height: 22px; width: auto; display: block; }
  .pdp-customer-reviews__verdict-star--empty { color: #D9D9D9; }
  .pdp-customer-reviews__based-on--solo { display: block; margin: 8px 0 0; }
  .pdp-customer-reviews__bar-star { height: 11px; width: auto; display: block; color: var(--pcr-star, #2BB673); }
  .pdp-customer-reviews__based-on {
    font-family: var(--pcr-font);
    font-size: 13px;
    color: #605F5F;
    flex-basis: 100%;
  }
  .pdp-customer-reviews__based-on b,
  .pdp-customer-reviews__based-on u {
    font-weight: 700;
    text-decoration: underline;
    color: #191919;
  }
  .pdp-customer-reviews__bars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 320px;
  }
  .pdp-customer-reviews__bar {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pdp-customer-reviews__bar-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pcr-font);
    font-size: 13px;
    color: #121212;
    flex: 0 0 36px;
  }
  .pdp-customer-reviews__bar-track {
    flex: 1 1 auto;
    height: 4px;
    background: #EAEAEA;
    border-radius: 999px;
    overflow: hidden;
  }
  .pdp-customer-reviews__bar-fill {
    display: block;
    height: 100%;
    background: var(--pcr-star, #121212);
    border-radius: 999px;
  }
  .pdp-customer-reviews__bar-count {
    font-family: var(--pcr-font);
    font-size: 13px;
    color: #121212;
    flex: 0 0 40px;
    text-align: right;
  }
  .pdp-customer-reviews__cta {
    align-self: flex-start;
    padding: 12px 20px;
    background: #121212;
    color: #FFF;
    font-family: var(--pcr-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 200ms ease;
  }
  .pdp-customer-reviews__cta:hover { opacity: 0.85; }

  .pdp-customer-reviews__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  @media (min-width: 768px) {
    .pdp-customer-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .pdp-customer-reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  }

  /* Read more, brand replies and a faded overflow — the same widget
     behaviour as the home grid. */
  /* Clamped text dissolves into the card rather than being cut off. */
  .pdp-customer-reviews__card-quote.is-clamped,
  .pdp-customer-reviews__reply-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--pcr-clamp, 5);
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.15) 100%);
  }
  .pdp-customer-reviews__card-meta {
    margin: 0 0 6px;
    font-family: var(--pcr-font);
    font-size: 13px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.6);
  }
  .pdp-customer-reviews__card-meta-name { font-weight: 700; color: #191919; }
  .pdp-customer-reviews__more {
    appearance: none;
    display: block;
    margin: 12px auto 0;
    text-align: center;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--pcr-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--pcr-star, #2BB673);
    text-decoration: underline;
    cursor: pointer;
  }
  .pdp-customer-reviews__reply {
    margin: 12px 0 0;
    padding: 10px 0 10px 12px;
    border-left: 3px solid var(--pcr-star, #2BB673);
    background: #FFFFFF;
    border-radius: 0 6px 6px 0;
  }
  .pdp-customer-reviews__reply-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-family: var(--pcr-font);
    font-size: 12.5px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.6);
  }
  .pdp-customer-reviews__reply-icon { display: inline-flex; color: rgba(0, 0, 0, 0.45); }
  .pdp-customer-reviews__reply-icon svg { display: block; }
  .pdp-customer-reviews__reply-name { font-weight: 500; color: #191919; }
  .pdp-customer-reviews__reply-date { margin-left: auto; }
  .pdp-customer-reviews__reply-body {
    margin: 0;
    font-family: var(--pcr-font);
    font-size: 13px;
    line-height: 18px;
    color: #191919;
  }
  .pdp-customer-reviews__col { flex: 1 1 auto; min-width: 0; }
  .pdp-customer-reviews__wrap { position: relative; }
  .pdp-customer-reviews__wrap.is-capped { overflow: hidden; }
  .pdp-customer-reviews__wrap.is-capped::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--pcr-bg, #FFFFFF) 88%);
  }
  .pdp-customer-reviews__showmore { display: flex; justify-content: center; margin: 24px 0 0; }
  /* The toggles set display, which beat the hidden attribute: Leer más showed on two-line reviews. */
  .pdp-customer-reviews__more[hidden], .pdp-customer-reviews__showmore[hidden] { display: none; }
  .pdp-customer-reviews__card-footer { margin-top: 14px; }
  .pdp-customer-reviews__showmore-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* The theme's CTA shape: 16/32 on an 8px radius at 18/24. */
    padding: 16px 32px;
    background: transparent;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    font-family: var(--pcr-font);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #191919;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .pdp-customer-reviews__showmore-btn:hover { border-color: #191919; background: #FFFFFF; }
  .pdp-customer-reviews__showmore-btn svg { display: block; }

  .pdp-customer-reviews__stars--card .pdp-customer-reviews__stars-svg { height: 16px; width: auto; }
  .pdp-customer-reviews__card {
    background: var(--pcr-card-bg, #F8F9FA);
    border: 0;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
  }
  .pdp-customer-reviews__card-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #DDD;
  }
  .pdp-customer-reviews__card-body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
  .pdp-customer-reviews__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .pdp-customer-reviews__stars--card { color: var(--pcr-star, #121212); }
  .pdp-customer-reviews__card-date {
    font-family: var(--pcr-font);
    font-size: 12px;
    color: #A7A7A7;
  }
  .pdp-customer-reviews__card-title {
    font-family: var(--pcr-font);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--pcr-fg, #121212);
    margin: 0;
  }
  .pdp-customer-reviews__card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .pdp-customer-reviews__card-quote {
    font-family: var(--pcr-font);
    font-size: 13px;
    line-height: 20px;
    color: #4A4A4A;
    margin: 0;
  }
  .pdp-customer-reviews__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
  }
  .pdp-customer-reviews__card-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--pcr-font);
    font-size: 12px;
    color: #4A4A4A;
  }
  .pdp-customer-reviews__card-name { font-weight: 500; }
  .pdp-customer-reviews__card-verified {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #0088FF;
  }
  .pdp-customer-reviews__card-verified span { color: #0088FF; font-size: 12px; }
  .pdp-customer-reviews__card-tag {
    padding: 3px 8px;
    background: var(--pcr-tag-bg, #F3F3F3);
    border-radius: 999px;
    font-family: var(--pcr-font);
    font-size: 11px;
    color: #4A4A4A;
  }
  /* Phones: the shared 44px button size. */
  @media (max-width: 1023px) {
    .pdp-customer-reviews__showmore-btn { min-height: 44px; padding: 12px 24px; font-size: 16px; line-height: 20px; border-radius: 6px; }
    /* The verdict row was a 24px title beside 22px stars: too loud for a
       336px column. 20px title (template), 16px stars. */
    .pdp-customer-reviews__verdict { gap: 8px; }
    .pdp-customer-reviews__verdict-star { height: 16px; }
  }

  /* Phones: the same head as the home reviews grid. Verdict word beside the
     stars, one summary line "4,8/5 basado en N opiniones", no bars. */
  @media (max-width: 749px) {
    .pdp-customer-reviews__head-left { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; }
    .pdp-customer-reviews__head { margin-bottom: 26px; }
    .pdp-customer-reviews__verdict { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 12px; }
    .pdp-customer-reviews__title { font-size: 24px; line-height: 24px; font-weight: 500; color: #191919; }
    .pdp-customer-reviews__verdict-star { height: 21px; }
    .pdp-customer-reviews__score { display: block; font-size: 14px; line-height: 18px; font-weight: 400; color: #191919; text-align: center; }
    .pdp-customer-reviews__score-value { display: inline; font-size: 14px; line-height: 18px; font-weight: 500; color: #191919; }
    .pdp-customer-reviews__score-out { display: inline; font-size: 14px; line-height: 18px; color: #191919; }
    .pdp-customer-reviews__based-on { display: inline; font-size: 14px; line-height: 18px; color: #191919; margin: 0; }
    .pdp-customer-reviews__based-on u { font-weight: 500; }
    .pdp-customer-reviews__bars { display: none; }
  }
/* END_SECTION:pdp-customer-reviews */

/* START_SECTION:pdp-fresh-heads (INDEX:67) */
.fresh-heads {
    background: var(--fh-bg, #FFFFFF);
    padding: var(--fh-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .fresh-heads { padding: var(--fh-pad-desk, 60px 280px); }
  }

  /* Mobile: title/subtitle centered on top, then image + stacked stats. */
  .fresh-heads__inner {
    max-width: var(--fh-max-desk, 1360px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas:
      "text text"
      "visual stats"
      "foot foot";
    align-items: center;
    column-gap: 16px;
    row-gap: 24px;
  }
  @media (min-width: 1024px) {
    /* Desktop: visual on the left spanning every row, text, stats and foot
       on the right. The visual is taller than the text column, and a grid
       hands a spanning item's extra height to every row it crosses, which
       would push the foot away from the cards: two 1fr spacer rows take
       that leftover instead and keep the column centred on the image. */
    .fresh-heads__inner {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.4fr);
      grid-template-rows: 1fr auto auto auto 1fr;
      grid-template-areas:
        "visual ."
        "visual text"
        "visual stats"
        "visual foot"
        "visual .";
      column-gap: 30px;
      row-gap: 0;
      align-items: center;
    }
    .fresh-heads__stats { margin-top: 48px; }
    .fresh-heads__foot { margin-top: 22px; }
  }

  .fresh-heads__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .fresh-heads__text { gap: 16px; text-align: left; }
  }
  .fresh-heads__title {
    font-family: var(--font-primary--family);
    font-size: var(--fh-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--fh-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .fresh-heads__title { font-size: var(--fh-title-desk, 48px); line-height: 1.1; letter-spacing: -1px; }
  }
  .fresh-heads__sub {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    color: var(--fh-sub, #605F5F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .fresh-heads__sub { font-size: 18px; line-height: 26px; }
  }

  /* Visual: circles behind, brush on top. */
  .fresh-heads__visual {
    grid-area: visual;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  .fresh-heads__circles {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 260%;
    max-width: none;
    opacity: var(--fh-circles-opacity, 0.2);
    pointer-events: none;
    line-height: 0;
  }
  @media (min-width: 1024px) {
    .fresh-heads__circles { width: 150%; }
  }
  .fresh-heads__circles-img { width: 100%; height: auto; display: block; }
  /* Pulse layer: a second copy of the rings behind a circular mask that grows
     from the centre, so the rings light up from the inside out, then fade. */
  .fresh-heads__circles--pulse {
    opacity: 0;
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
  }
  .fresh-heads__brush {
    position: relative;
    z-index: 1;
    width: auto;
    height: 240px;
    max-width: 100%;
    object-fit: contain;
    display: block;
    transform: rotate(8deg);
  }
  @media (min-width: 1024px) {
    .fresh-heads__brush { height: 600px; }
  }

  /* Stats: stacked on mobile, row on desktop. */
  .fresh-heads__stats {
    grid-area: stats;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
  }
  @media (min-width: 1024px) {
    .fresh-heads__stats { flex-direction: row; gap: 16px; align-items: stretch; }
  }
  .fresh-heads__stat {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 0.668px solid #CCCCCC;
    border-radius: 11px;
    background: rgba(243, 243, 243, 0.42);
    backdrop-filter: blur(3.338px);
    -webkit-backdrop-filter: blur(3.338px);
  }
  @media (min-width: 1024px) {
    .fresh-heads__stat { padding: 20px; }
  }
  .fresh-heads__stat-num {
    font-family: var(--font-primary--family);
    /* phones: the cards share the row with the image, so the figure stays
       small enough to sit on one line ("61.9%") */
    font-size: 32px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -1px;
    white-space: nowrap;
    margin: 0;
    color: var(--fh-fg, #000);
  }
  @media (min-width: 1024px) {
    .fresh-heads__stat-num { font-size: 44px; }
  }
  .fresh-heads__stat-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--fh-sub, #605F5F);
    margin: 0;
  }
  /* Optional foot: the site's black button and a small source note. */
  .fresh-heads__foot {
    grid-area: foot;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 0;
  }
  /* phones: pull the foot up through the 24px row gap, leaving 4px */
  @media (max-width: 1023px) {
    .fresh-heads__foot { margin-top: -20px; }
  }
  @media (min-width: 1024px) {
    .fresh-heads__foot { align-items: flex-start; }
  }
  .fresh-heads__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #000;
    color: #FFF;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fresh-heads__cta:hover { transform: translateY(-1px); }
  .fresh-heads__note {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 12.5px;
    line-height: 19px;
    color: #8A8A8A;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .fresh-heads__note { text-align: left; }
  }

  /* Gentle continuous motion: the brush floats, the rings softly breathe. */
  @media (prefers-reduced-motion: no-preference) {
    /* a slow, small drift: a few pixels and a couple of degrees over 8s */
    .fresh-heads__brush { animation: fh-float 8s ease-in-out infinite; }
    @keyframes fh-float {
      0%   { transform: rotate(7deg) translateY(3px); }
      50%  { transform: rotate(8deg) translateY(-9px); }
      100% { transform: rotate(7deg) translateY(3px); }
    }
    .fresh-heads__circles { animation: fh-pulse 14s ease-in-out infinite; }
    @keyframes fh-pulse {
      0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-1deg); }
      50%      { transform: translate(-50%, -50%) scale(1.02) rotate(1deg); }
    }
    .fresh-heads__circles--pulse { animation: fh-ripple 6s ease-out infinite; }
    @keyframes fh-ripple {
      0%   { opacity: 0; -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
      8%   { opacity: 0.6; }
      70%  { opacity: 0.6; -webkit-mask-size: 230% 230%; mask-size: 230% 230%; }
      88%  { opacity: 0; -webkit-mask-size: 230% 230%; mask-size: 230% 230%; }
      100% { opacity: 0; -webkit-mask-size: 230% 230%; mask-size: 230% 230%; }
    }
  }
  /* Phones: one column. The stats stop sharing the row with the image (three
     narrow cards, four-line labels) and become full-width rows: figure on the
     left, label on the right. The image sits a little smaller between text
     and stats. */
  @media (max-width: 1023px) {
    .fresh-heads__inner {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "text" "visual" "stats" "foot";
      row-gap: 20px;
    }
    /* The product carries the visual: 320px tall; the rings shrink to
       frame it (they were 260% of the column and swallowed the screen). */
    .fresh-heads { overflow: hidden; }
    .fresh-heads__brush { height: 320px; }
    .fresh-heads__circles { width: 150%; }
    .fresh-heads__stats { gap: 8px; }
    .fresh-heads__stat { flex-direction: row; align-items: center; gap: 14px; padding: 20px 16px; }
    .fresh-heads__stat-num { flex: 0 0 92px; font-size: 30px; line-height: 36px; }
    .fresh-heads__stat-label { font-size: 14px; line-height: 20px; }
    .fresh-heads__foot { margin-top: -4px; }
  }
/* END_SECTION:pdp-fresh-heads */

/* START_SECTION:pdp-how-to-use (INDEX:68) */
.pdp-how-to-use {
    background: transparent;
    color: var(--htu-fg, #000);
    padding: var(--htu-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use { padding: var(--htu-pad-desk, 40px 280px); }
  }

  .pdp-how-to-use__inner {
    max-width: var(--htu-max-desk, 1360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--htu-bg, #FAFAFB);
    padding: 16px;
    border-radius: 16px;
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use__inner {
      flex-direction: row;
      gap: 48px;
      height: 620px;
      max-height: 620px;
      align-items: center;
      padding: 32px;
    }
  }

  .pdp-how-to-use__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use__content {
      flex: 1 0 0;
      min-width: 0;
      align-self: stretch;
      justify-content: space-between;
      padding: 24px 0;
    }
  }

  .pdp-how-to-use__title {
    font-family: var(--font-primary--family);
    font-size: var(--htu-title-mob, 32px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--htu-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use__title { font-size: var(--htu-title-desk, 54px); }
  }

  .pdp-how-to-use__subtitle {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    color: var(--htu-sub, #605F5F);
    margin: 0;
    max-width: 420px;
  }

  .pdp-how-to-use__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pdp-how-to-use__step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--htu-step-bg, #FFFFFF);
    border-radius: 12px;
  }
  /* Figma spec: step number is a plain "1." tick with a period — no circle. */
  .pdp-how-to-use__step-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #121212;
    letter-spacing: 0.2px;
  }
  .pdp-how-to-use__step-num::after { content: '.'; }
  @media (min-width: 1024px) {
    .pdp-how-to-use__step-num { font-size: 18px; line-height: 24px; }
  }
  .pdp-how-to-use__step-label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #121212;
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use__step-label { font-size: 18px; line-height: 24px; }
  }

  .pdp-how-to-use__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    padding: 16px 32px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 200ms ease;
  }
  .pdp-how-to-use__cta:hover { opacity: 0.85; }

  .pdp-how-to-use__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--htu-radius, 16px);
    overflow: hidden;
    background: #DDD;
  }
  @media (min-width: 1024px) {
    .pdp-how-to-use__media {
      flex: 1 0 0;
      min-width: 0;
      aspect-ratio: auto;
      align-self: stretch;
      max-height: 100%;
    }
  }
  .pdp-how-to-use__media-img,
  .pdp-how-to-use__media-video,
  .pdp-how-to-use__media-placeholder {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    object-fit: cover !important;
    display: block;
  }
  .pdp-how-to-use__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    text-decoration: none;
  }
  .pdp-how-to-use__play:hover { transform: translate(-50%, -50%) scale(1.06); }
/* END_SECTION:pdp-how-to-use */

/* START_SECTION:pdp-real-results (INDEX:69) */
.pdp-real-results {
    background: var(--rr-bg, #F3F3F3);
    color: var(--rr-fg, #121212);
    padding: var(--rr-pad-mob, 32px 16px);
  }
  @media (min-width: 1024px) {
    .pdp-real-results { padding: var(--rr-pad-desk, 48px clamp(20px, 6vw, 120px)); }
  }
  .pdp-real-results__inner {
    max-width: var(--rr-max-desk, 720px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  @media (min-width: 1024px) {
    .pdp-real-results__inner { gap: 24px; }
  }
  .pdp-real-results__title {
    font-family: var(--font-primary--family);
    font-size: var(--rr-title-mob, 18px);
    line-height: 24px;
    font-weight: 500;
    color: var(--rr-fg, #121212);
    text-align: center;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .pdp-real-results__title { font-size: var(--rr-title-desk, 26px); line-height: 32px; }
  }

  .pdp-real-results__track {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pdp-real-results__track::-webkit-scrollbar { display: none; }
  .pdp-real-results__tile {
    position: relative;
    flex: 1 1 0;
    min-width: calc((100% - 16px) / 3);
    max-width: 33%;
    aspect-ratio: 9 / 14;
    background: var(--rr-card-bg, #DDDDDD);
    border-radius: 9.582px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    scroll-snap-align: start;
  }
  .pdp-real-results__tile > img,
  .pdp-real-results__tile-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .pdp-real-results__tile-play {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pdp-real-results__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
  }
  .pdp-real-results__dots { display: inline-flex; gap: 4px; }
  .pdp-real-results__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    transition: background 200ms ease, width 200ms ease;
  }
  .pdp-real-results__dot.is-active {
    background: #000;
    width: 18px;
    border-radius: 3px;
  }
  .pdp-real-results__arrows { display: inline-flex; gap: 8px; }
  .pdp-real-results__arrow {
    appearance: none;
    border: 1px solid #1C1C1C;
    background: transparent;
    color: #000;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .pdp-real-results__arrow:hover { background: #FFF; }
/* END_SECTION:pdp-real-results */

/* START_SECTION:pdp-still-using (INDEX:70) */
.still-using { padding: var(--su-pad-mob, 24px 16px); }
  @media (min-width: 1024px) {
    .still-using { padding: var(--su-pad-desk, 60px 280px); }
  }
  .still-using__inner { max-width: var(--su-max-desk, 1360px); margin: 0 auto; }

  .still-using__card {
    position: relative;
    background: var(--su-card-bg, #D7CFCC);
    border-radius: 8px;
    overflow: hidden;
    padding: 32px 20px;
    min-height: 380px;
  }
  @media (min-width: 1024px) {
    .still-using__card {
      display: flex;
      align-items: center;
      min-height: 565px;
      padding: 40px 56px;
    }
  }

  .still-using__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 444px;
  }
  @media (min-width: 1024px) {
    .still-using__content { gap: 40px; }
  }

  .still-using__title {
    font-family: var(--font-primary--family);
    font-size: var(--su-title-mob, 32px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: var(--su-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .still-using__title { font-size: var(--su-title-desk, 54px); }
  }

  .still-using__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .still-using__item {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .still-using__x {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .still-using__item-text {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--su-text, #1C1C1E);
  }
  @media (min-width: 1024px) {
    .still-using__item-text { font-size: 20px; line-height: 26px; }
  }

  .still-using__cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--su-btn-bg, #000000);
    color: var(--su-btn-fg, #FFFFFF);
    text-decoration: none;
    padding: 16px 28px;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    box-shadow: 0 1.3px 2px rgba(0,0,0,0.1), 0 1.3px 1.3px rgba(0,0,0,0.1);
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .still-using__cta { font-size: 18px; padding: 16px 32px; }
  }
  .still-using__cta:hover { opacity: 0.9; }

  /* Media: worn brush, bleeds off the right on desktop; sits top-right on mobile. */
  .still-using__media {
    position: absolute;
    pointer-events: none;
    right: -20px;
    bottom: -20px;
    width: 220px;
    line-height: 0;
  }
  @media (min-width: 1024px) {
    .still-using__media {
      right: 40px;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
      width: 420px;
    }
  }
  .still-using__img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply;
  }
/* END_SECTION:pdp-still-using */

/* START_SECTION:pdp-tabs-nav (INDEX:71) */
.pdp-tabs {
    background: var(--tn-bg, #FFFFFF);
    position: sticky;
    top: var(--site-header-offset, 0);
    z-index: 15;
    border-bottom: 1px solid var(--tn-border, #EAEAEA);
  }
  .pdp-tabs__inner {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: var(--tn-pad-mob, 0);
  }
  .pdp-tabs__inner::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .pdp-tabs__inner { padding: var(--tn-pad-desk, 0 clamp(20px, 6vw, 120px)); justify-content: flex-start; }
  }

  .pdp-tabs__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--tn-muted, #454545);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
    flex-shrink: 0;
  }
  .pdp-tabs__tab:hover { color: var(--tn-fg, #000); }
  .pdp-tabs__tab.is-active {
    color: var(--tn-fg, #000);
    font-weight: 500;
    border-bottom-color: var(--tn-fg, #000);
  }
/* END_SECTION:pdp-tabs-nav */

/* START_SECTION:press-logos (INDEX:78) */
.press-logos {
    background: var(--pl-bg, #FFFFFF);
    padding: var(--pl-pad-mob, 32px 0);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .press-logos { padding: var(--pl-pad-desk, 48px 0); }
  }
  /* Same 1400px box as every other section, so the strip starts and ends
     where the content above it does. */
  .press-logos__viewport {
    position: relative;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
  }
  /* Fades the strip into the section colour at both edges. */
  .press-logos__viewport::before,
  .press-logos__viewport::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--pl-fade, 75px);
    z-index: 1;
    pointer-events: none;
  }
  .press-logos__viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--pl-bg, #FFFFFF), transparent);
  }
  .press-logos__viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--pl-bg, #FFFFFF), transparent);
  }
  .press-logos__track {
    display: flex;
    align-items: center;
    gap: var(--pl-gap, 100px);
    width: max-content;
    animation: press-logos-scroll var(--pl-speed, 31s) linear infinite;
  }
  .press-logos__row {
    display: flex;
    align-items: center;
    gap: var(--pl-gap, 100px);
    flex-shrink: 0;
  }
  /* One row out of six, plus its share of the gap between rows. */
  @keyframes press-logos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% / 6 - var(--pl-gap, 100px) / 6)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .press-logos__track { animation: none; }
    .press-logos__viewport { overflow-x: auto; }
  }
  .press-logos__item {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }
  .press-logos__img {
    width: var(--pl-logo-w, 170px);
    height: auto;
    object-fit: contain;
    display: block;
  }
  @media (max-width: 1023px) {
    .press-logos__track,
    .press-logos__row { gap: calc(var(--pl-gap, 100px) / 2); }
    /* Sized by height on phones: width-based sizing let tall marks (YSL,
       Pacha) grow to 200px and stretch the whole strip. */
    /* Every mark drawn to a 52px line, wide ones capped at 150px, so the
       square-ish marks (YSL, Pacha) keep a readable size next to the wide
       wordmarks. */
    .press-logos__img { width: auto; height: auto; max-height: 52px; max-width: 150px; object-fit: contain; }
    .press-logos__item { height: 64px; display: inline-flex; align-items: center; justify-content: center; }
    /* Tall marks (YSL, Pacha) get the full 64px line; long wordmarks stay
       at 40px so they don't dwarf the rest. */
    .press-logos__item--tall .press-logos__img { max-height: 64px; }
    .press-logos__item--wide .press-logos__img { max-height: 40px; }
  }
/* END_SECTION:press-logos */

/* START_SECTION:real-people (INDEX:79) */
.real-people {
    background: var(--rp-bg, #FFFFFF);
    color: var(--rp-fg, #121212);
    padding: var(--rp-pad-mob, 48px 0 48px 16px);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    /* Slider bleeds to the right edge; padding-right stays 0 so cards flow beyond viewport. */
    .real-people {
      padding: var(--rp-pad-desk, 60px 0 60px 280px);
    }
  }

  /* Fades the incoming card into the section colour instead of cutting it at
     the box edge. Right only: cards enter from that side. */
  .real-people__inner::after {
    content: '';
    position: absolute;
    top: 0;
    /* Runs past the inner's bottom edge: the cards are zoomed to 0.9 and their
       painted box overhangs the track slightly, so a flush 0 left a visible
       horizontal cut across the last card. */
    bottom: -24px;
    right: 0;
    width: clamp(40px, 6vw, 96px);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to left, var(--rp-bg, #FFFFFF), transparent);
  }
  @media (max-width: 1023px) {
    .real-people__inner::after { display: none; }
  }

  .real-people__inner {
    max-width: var(--rp-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    padding-bottom: 60px;
  }
  @media (min-width: 1024px) {
    /* Force the inner to fill from left padding to viewport right edge so the slider
       has room to bleed cleanly without wasted margins from the centred max-width. */
    .real-people__inner {
      gap: 48px;
      max-width: none;
      margin: 0;
      padding-bottom: 0;
    }
  }

  .real-people__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding-right: 16px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    /* Restore right breathing room for the header (title + nav arrows). */
    .real-people__head {
      justify-content: space-between;
      /* No right inset: space-between should push the arrows to the edge of
         the 1400px box, in line with the cards below. */
      padding-right: 0;
      text-align: left;
    }
  }

  .real-people__title {
    font-family: var(--font-primary--family);
    font-size: var(--rp-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--rp-fg, #000);
    margin: 0;
    padding: 0 67px;
  }
  @media (min-width: 1024px) {
    .real-people__title {
      font-size: var(--rp-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
      padding: 0;
    }
  }

  /* Mobile: pull nav out of the head flow and dock it at the section
     bottom-right; the __inner has padding-bottom:60 to make room. */
  .real-people__nav {
    display: flex;
    gap: 8px;
    /* Above the edge fade, which would otherwise wash them out. */
    position: relative;
    z-index: 3;
    position: absolute;
    right: 16px;
    bottom: 0;
  }
  @media (min-width: 1024px) {
    .real-people__nav { position: static; right: auto; bottom: auto; }
  }

  /* Phones: no arrows or dots; a 5px progress bar under the slider instead,
     the same one the routine slider uses. */
  .real-people__scrollbar {
    position: relative;
    width: 100%;
    height: 5px;
    background: #E6E6E6;
    border-radius: 999px;
    margin: 24px 16px 0 0;
    overflow: hidden;
    align-self: stretch;
  }
  .real-people__scrollbar-thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--thumb-w, 33%);
    background: #000000;
    border-radius: 999px;
    transform: translateX(var(--thumb-x, 0px));
    transition: transform 120ms linear;
  }
  @media (max-width: 1023px) {
    .real-people__nav { display: none; }
    .real-people__inner { padding-bottom: 0; }
    .real-people__scrollbar { width: calc(100% - 16px); }
  }
  @media (min-width: 1024px) {
    .real-people__scrollbar { display: none; }
  }
  /* Same as hears.com's UGC arrows: white 40px disc, hairline border, 20px
     chevron. */
  .real-people__nav-btn {
    appearance: none;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    color: #111111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 150ms;
  }
  .real-people__nav-btn svg { width: 20px; height: 20px; display: block; }
  .real-people__nav-btn--prev svg { transform: rotate(180deg); }
  .real-people__nav-btn:hover { opacity: 0.75; }

  .real-people__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .real-people__track::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .real-people__track { gap: 24px; padding-right: 0; cursor: grab; }
    .real-people__track.is-dragging { cursor: grabbing; user-select: none; }
    .real-people__track.is-dragging * { pointer-events: none; }
  }

  .real-people__card {
    flex: 0 0 288px;
    min-width: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--rp-card-bg, #F3F3F3);
    border-radius: 12px;
    overflow: hidden;
  }
  @media (min-width: 640px) {
    .real-people__card { flex-basis: 60vw; }
  }
  @media (min-width: 1024px) {
    .real-people__card {
      zoom: 0.9;
      flex: 0 0 782px;
      flex-direction: row;
      gap: 20px;
      padding: 16px;
      align-items: stretch;
      justify-content: center;
      overflow: visible;
    }
  }

  .real-people__media { display: block; }
  @media (min-width: 1024px) {
    .real-people__media {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 0;
      width: 336px;
      flex: 0 0 336px;
      height: 293px;
      border-radius: 12px;
      overflow: hidden;
    }
  }
  .real-people__shot {
    position: relative;
    /* Matches the exported file, which carries the before over the after. */
    aspect-ratio: 672 / 585;
    background: #CBCBCB;
    border-radius: 0;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .real-people__shot {
      aspect-ratio: auto;
      border-radius: 0;
      height: 100%;
    }
  }
  /* The two halves of the shot each carry their own caption: the before sits
     just above the midline, the after at the foot. */
  .real-people__shot-label {
    position: absolute;
    left: 12px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    color: #FFFFFF;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    z-index: 1;
    pointer-events: none;
  }
  .real-people__shot-label--before { bottom: calc(50% + 12px); }
  .real-people__shot-label--after { bottom: 12px; }
  @media (min-width: 1024px) {
    .real-people__shot-label { left: 16px; font-size: 16px; }
    .real-people__shot-label--before { bottom: calc(50% + 16px); }
    .real-people__shot-label--after { bottom: 16px; }
  }

  .real-people__shot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  @media (min-width: 1024px) {
  }

  .real-people__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
  }
  @media (min-width: 1024px) {
    .real-people__body { padding: 13px; gap: 16px; }
  }
  .real-people__body-top {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  @media (min-width: 1024px) {
    .real-people__body-top { gap: 30px; }
  }

  /* Typographic quotes, added in CSS so the stored copy stays clean. */
  .real-people__quote::before { content: '\201C'; }
  .real-people__quote::after { content: '\201D'; }
  .real-people__quote {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20.93px;
    font-weight: 400;
    color: var(--rp-fg, #121212);
    letter-spacing: 0;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .real-people__quote { font-size: 20px; line-height: 28px; font-weight: 400; }
  }

  .real-people__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .real-people__name {
    font-family: var(--font-primary--family);
    font-size: 12.88px;
    line-height: 16.09px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rp-fg, #121212);
  }
  .real-people__role {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 16.09px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rp-sub, #605F5F);
  }
  @media (min-width: 1024px) {
    .real-people__name { font-size: 17px; line-height: 20px; font-weight: 400; }
    .real-people__role { font-size: 14px; line-height: 24px; }
  }

  /* Name and its verified badge share a row inside the stacked meta block. */
  .real-people__name-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .real-people__verified {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
  }

  /* Mobile: tags render BEFORE quote (Figma). Desktop keeps DOM order. */
  .real-people__tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    order: -1;
  }
  @media (min-width: 1024px) {
    .real-people__tags { gap: 12px; order: 0; }
  }
  .real-people__tag {
    display: inline-flex;
    align-items: center;
    padding: 3.22px 9.66px;
    background: #FFFFFF;
    color: #000000;
    font-family: var(--font-primary--family);
    font-size: 11.27px;
    line-height: 16.09px;
    font-weight: 400;
    letter-spacing: 0;
    border-radius: 19.316px;
  }
  @media (min-width: 1024px) {
    .real-people__tag {
      padding: 4px 12px;
      font-size: 16px;
      line-height: 20px;
    }
  }
  /* Phones: whole-pixel type scale and a little more air in the body. */
  @media (max-width: 1023px) {
    .real-people__body { padding: 14px 14px 16px; gap: 14px; }
    .real-people__body-top { gap: 14px; }
    .real-people__quote { font-size: 14px; line-height: 20px; }
    .real-people__meta { gap: 1px; }
    .real-people__name { font-size: 14px; line-height: 18px; }
    .real-people__role { font-size: 13px; line-height: 18px; }
    .real-people__name-row { gap: 6px; }
    .real-people__tags { gap: 6px; }
    .real-people__tag { padding: 4px 10px; font-size: 12px; line-height: 16px; border-radius: 999px; }
    /* The 67px side padding is the desktop centring; phones use the column. */
    .real-people__title { padding: 0; }
  }
/* END_SECTION:real-people */

/* START_SECTION:research-hero (INDEX:81) */
.research-hero {
    position: relative;
    background: var(--rh-bg, #121212);
    color: var(--rh-fg, #FFFFFF);
    overflow: hidden;
    min-height: var(--rh-h-mob, 481px);
    display: flex;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .research-hero { min-height: var(--rh-h-desk, 812px); }
  }
  .research-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .research-hero__media-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
  }
  .research-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-hero__inner { padding: 60px clamp(40px, 20.6vw, 396px); }
  }
  .research-hero__content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    align-items: center;
  }
  @media (min-width: 1024px) {
    .research-hero__content { text-align: left; align-items: flex-start; }
  }
  .research-hero__title {
    font-family: var(--font-primary--family);
    font-size: var(--rh-title-mob, 30px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.5px;
    color: var(--rh-fg, #FFFFFF);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-hero__title { font-size: var(--rh-title-desk, 54px); line-height: 1.1; letter-spacing: -1px; }
  }
  .research-hero__sub {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rh-sub, #C7C7C7);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-hero__sub { font-size: 16px; line-height: 26px; }
  }

  /* Header goes white while overlaying this page's dark hero (scoped by
     template body class so home overlay keeps its own colors). */
  /* Inline custom props on the header element beat stylesheet rules, so force
     them with !important (an !important stylesheet decl wins over inline). */
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) {
    --sh-fg: #FFFFFF !important;
    --sh-fg-muted: rgba(255, 255, 255, 0.82) !important;
    --sh-icon-bg: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
  }
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) .site-header__nav-link,
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) .site-header__nav-label,
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) .site-header__locale-label,
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) .site-header__icon-btn {
    color: #FFFFFF !important;
  }
  .template-page-research .site-header[data-overlay="true"]:not(.is-scrolled):not(.is-solid) .site-header__logo {
    filter: brightness(0) invert(1);
  }
/* END_SECTION:research-hero */

/* START_SECTION:research-problem (INDEX:82) */
.research-problem {
    background: var(--rp-bg, #FFFFFF);
    color: var(--rp-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-problem { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .research-problem__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .research-problem__inner {
      flex-direction: row;
      align-items: center;
      gap: 48px;
    }
  }

  .research-problem__media { flex: 1 1 50%; min-width: 0; order: 2; }
  @media (min-width: 1024px) {
    .research-problem__media { order: 0; }
  }
  .research-problem__img {
    width: 100%;
    height: auto;
    max-height: 564px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
  }
  .research-problem__img-placeholder {
    width: 100%;
    aspect-ratio: 552 / 564;
    max-height: 564px;
    background: #F3F3F3;
    border-radius: 12px;
  }

  .research-problem__content {
    display: contents;
  }
  @media (min-width: 1024px) {
    .research-problem__content {
      display: flex;
      flex-direction: column;
      gap: 32px;
      flex: 1 1 50%;
      min-width: 0;
      padding: 36px 32px;
    }
  }
  .research-problem__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    order: 1;
  }
  .research-problem__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--rp-fg, #121212);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-problem__title { font-size: 54px; line-height: 1.1; letter-spacing: -1px; }
  }
  .research-problem__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rp-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-problem__text { font-size: 16px; line-height: 26px; }
  }
  .research-problem__text-2 {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: center;
    color: var(--rp-fg, #121212);
    margin: 0;
    order: 3;
  }
  @media (min-width: 1024px) {
    .research-problem__text-2 {
      font-size: 16px;
      line-height: 26px;
      font-weight: 400;
      text-align: left;
      color: #807E7E;
      max-width: 449px;
    }
  }
/* END_SECTION:research-problem */

/* START_SECTION:research-team (INDEX:83) */
.research-team {
    background: var(--rm-bg, #FFFFFF);
    color: var(--rm-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-team { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .research-team__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .research-team__inner { gap: 32px; }
  }

  .research-team__photos {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .research-team__photo {
    display: inline-flex;
    border-radius: 50%;
    overflow: hidden;
    background: #EDEDED;
    width: 82px;
    height: 82px;
    flex-shrink: 0;
  }
  .research-team__photo--2 { width: 116px; height: 116px; }
  @media (min-width: 1024px) {
    .research-team__photo { width: 167px; height: 167px; }
    .research-team__photo--2 { width: 236px; height: 236px; }
  }
  .research-team__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .research-team__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .research-team__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-team__title { font-size: 48px; line-height: 1.22; letter-spacing: -1px; }
  }
  .research-team__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rm-sub, #454545);
    margin: 0;
    max-width: 560px;
  }
  @media (min-width: 1024px) {
    .research-team__text { font-size: 16px; line-height: 26px; }
  }
  .research-team__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 32px;
    background: #121212;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .research-team__cta { width: auto; }
  }
/* END_SECTION:research-team */

/* START_SECTION:research-tests (INDEX:84) */
.research-tests {
    background: var(--rt-bg, #FFFFFF);
    color: var(--rt-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-tests { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .research-tests__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .research-tests__inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: stretch;
    }
  }

  /* Panel: title + intro + checklist. Mobile order sandwiches the collage. */
  .research-tests__panel { display: contents; }
  @media (min-width: 1024px) {
    .research-tests__panel {
      display: flex;
      flex-direction: column;
      gap: 32px;
      background: var(--rt-card-bg, #F8F8F8);
      border-radius: 12px;
      padding: 36px;
      justify-content: center;
    }
  }
  .research-tests__head { display: flex; flex-direction: column; gap: 12px; order: 1; }
  .research-tests__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .research-tests__title { font-size: 54px; line-height: 1.1; letter-spacing: -1px; text-align: left; }
  }
  .research-tests__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rt-sub, #454545);
    margin: 0;
    display: none;
  }
  @media (min-width: 1024px) {
    .research-tests__text { display: block; font-size: 16px; line-height: 26px; max-width: 460px; }
  }

  .research-tests__checklist { display: flex; flex-direction: column; gap: 12px; order: 3; }
  .research-tests__checklist-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
  }
  .research-tests__bullets {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .research-tests__bullet { display: flex; align-items: flex-start; gap: 8px; }
  .research-tests__bullet-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
  }
  .research-tests__bullet-icon svg { width: 100%; height: 100%; min-width: 16px; min-height: 16px; flex-shrink: 0; }
  @media (min-width: 1024px) {
    .research-tests__bullet-icon { width: 20px; height: 20px; }
  }
  .research-tests__bullet-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
  }
  @media (min-width: 1024px) {
    .research-tests__bullet-text { font-size: 16px; line-height: 24px; }
  }

  /* ---- Collage ---- */
  .research-tests__collage {
    position: relative;
    width: 100%;
    aspect-ratio: 358 / 502;
    order: 2;
  }
  @media (min-width: 1024px) {
    .research-tests__collage { aspect-ratio: 656 / 670; order: 0; }
  }

  .research-tests__polaroid {
    position: absolute;
    margin: 0;
    background: #FFFFFF;
    padding: 2.2%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    z-index: 1;
  }
  .research-tests__polaroid::after {
    /* Tape strip */
    content: "";
    position: absolute;
    width: 38%;
    height: 24px;
    background: rgba(158, 158, 158, 0.75);
    top: -12px;
  }
  .research-tests__polaroid-img,
  .research-tests__polaroid-placeholder {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    background: #EDEDED;
  }

  .research-tests__note {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Gochi Hand', cursive;
    color: var(--rt-fg, #121212);
    z-index: 2;
  }
  .research-tests__note-num { font-size: 20px; line-height: 1.1; }
  .research-tests__note-text { font-size: 13px; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.3px; }
  @media (min-width: 1024px) {
    .research-tests__note-num { font-size: 26px; }
    .research-tests__note-text { font-size: 16px; }
  }
  .research-tests__arrow { position: absolute; color: var(--rt-fg, #121212); }

  /* Desktop scatter (percentages of 656x670 frame from Figma) */
  @media (min-width: 1024px) {
    .research-tests__polaroid--1 { left: 6.4%; top: 8.9%; width: 43.2%; aspect-ratio: 280 / 244; transform: rotate(-4deg); }
    .research-tests__polaroid--1::after { right: -10%; transform: rotate(40deg); }
    .research-tests__note--1 { left: 49.6%; top: 9.3%; width: 29.5%; }
    .research-tests__arrow--1 { width: 44px; left: -54px; top: 52px; }

    .research-tests__polaroid--2 { left: 62.8%; top: 34.3%; width: 33.8%; aspect-ratio: 221 / 218; transform: rotate(3deg); }
    .research-tests__polaroid--2::after { right: -12%; transform: rotate(55deg); }
    .research-tests__note--2 { left: 31.7%; top: 43.8%; width: 30%; }
    .research-tests__arrow--2 { width: 72px; right: -80px; top: 18px; }

    .research-tests__polaroid--3 { left: 11%; top: 70.7%; width: 35.4%; aspect-ratio: 218 / 191; transform: rotate(-2.5deg); }
    .research-tests__polaroid--3::after { left: -10%; transform: rotate(-38deg); }
    .research-tests__note--3 { left: 44.7%; top: 74.3%; width: 33%; }
    .research-tests__arrow--3 { width: 56px; left: -62px; top: 6px; }
  }
  /* Mobile scatter (percentages of 358x502 frame from Figma) */
  @media (max-width: 1023px) {
    .research-tests__polaroid--1 { left: -1.4%; top: 7.3%; width: 60%; aspect-ratio: 280 / 244; transform: rotate(-4deg); }
    .research-tests__polaroid--1::after { right: -10%; transform: rotate(40deg); }
    .research-tests__note--1 { left: 61.5%; top: 7.8%; width: 38%; }
    .research-tests__arrow--1 { width: 30px; left: -36px; top: 40px; }

    .research-tests__polaroid--2 { left: 54%; top: 37%; width: 46%; aspect-ratio: 221 / 218; transform: rotate(3deg); }
    .research-tests__polaroid--2::after { right: -12%; transform: rotate(55deg); }
    .research-tests__note--2 { left: 12%; top: 46.4%; width: 40%; }
    .research-tests__arrow--2 { width: 46px; right: -50px; top: 12px; }

    .research-tests__polaroid--3 { left: 9.5%; top: 73.2%; width: 44%; aspect-ratio: 218 / 191; transform: rotate(-2.5deg); }
    .research-tests__polaroid--3::after { left: -10%; transform: rotate(-38deg); }
    .research-tests__note--3 { left: 53.9%; top: 76.7%; width: 42%; }
    .research-tests__arrow--3 { width: 36px; left: -42px; top: 4px; }
  }
/* END_SECTION:research-tests */

/* START_SECTION:research-trial (INDEX:85) */
.research-trial {
    background: var(--rl-bg-mob, #FFFFFF);
    color: var(--rl-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-trial {
      background: var(--rl-bg-desk, #F3F3F3);
      padding: 60px clamp(40px, 14.58vw, 280px);
    }
  }
  .research-trial__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .research-trial__inner {
      display: grid;
      grid-template-columns: minmax(0, 421px) minmax(0, 1fr);
      gap: 48px;
      align-items: stretch;
    }
  }

  .research-trial__left { display: contents; }
  @media (min-width: 1024px) {
    .research-trial__left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 32px;
    }
  }
  .research-trial__head { display: flex; flex-direction: column; gap: 12px; }
  @media (max-width: 1023px) {
    .research-trial__head { order: 1; }
  }
  .research-trial__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-trial__title { font-size: 54px; line-height: 1.1; letter-spacing: -1px; }
  }
  .research-trial__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rl-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-trial__text { font-size: 16px; line-height: 26px; }
  }

  .research-trial__foot { display: contents; }
  @media (min-width: 1024px) {
    .research-trial__foot { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
  }
  .research-trial__note {
    border-left: 2px solid var(--rl-fg, #121212);
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  @media (max-width: 1023px) {
    .research-trial__note { order: 5; }
  }
  .research-trial__note-strong {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    margin: 0;
  }
  .research-trial__note-muted {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rl-muted, #807E7E);
    margin: 0;
  }
  .research-trial__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 32px;
    background: #121212;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    width: 100%;
  }
  @media (max-width: 1023px) {
    .research-trial__cta { order: 7; }
  }
  @media (min-width: 1024px) {
    .research-trial__cta { width: auto; height: 56px; }
  }
  .research-trial__cta--desk { display: none; }
  .research-trial__cta-wrap-mob { max-width: 1920px; margin: 24px auto 0; }
  @media (min-width: 1024px) {
    .research-trial__cta--desk { display: inline-flex; }
    .research-trial__cta-wrap-mob { display: none; }
  }

  .research-trial__right { display: contents; }
  @media (min-width: 1024px) {
    .research-trial__right {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(170px, 235px);
      gap: 8px;
      align-items: stretch;
    }
  }

  /* ---- Desktop chart ---- */
  .research-trial__chart--desk { display: none; }
  @media (min-width: 1024px) {
    .research-trial__chart--desk {
      display: block;
      position: relative;
      background: #FFFFFF;
      border-radius: 12px;
      padding: 32px;
      height: 537px;
      overflow: hidden;
    }
  }
  .research-trial__scale-numbers {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    text-align: center;
    font-family: var(--font-primary--family);
    font-size: 22px;
    line-height: 35px;
    color: #9A9A9A;
  }
  .research-trial__scale-numbers .is-strong { color: #121212; font-weight: 500; }
  .research-trial__scale-bar {
    position: relative;
    height: 48px;
    margin-top: 4px;
    border: 1.5px solid #121212;
    border-radius: 12px;
    background: linear-gradient(90deg, #F2E7BC 0%, #FFFBEF 28%, #FFFFFF 45%);
  }
  .research-trial__tooth {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 50px;
    display: inline-flex;
  }
  .research-trial__tooth svg { width: 100%; height: 100%; min-width: 40px; min-height: 50px; flex-shrink: 0; }
  .research-trial__tooth--1 { left: 5%; }
  .research-trial__tooth--2 { left: 30%; }
  .research-trial__tooth--3 { left: 75%; }

  .research-trial__callout-line {
    position: absolute;
    top: 24.5%;
    bottom: 7%;
    width: 0;
    border-left: 1px dashed #C4C4C4;
  }
  .research-trial__callout-line--1 { left: 9.4%; }
  .research-trial__callout-line--2 { left: 31.9%; }
  .research-trial__callout-line--3 { left: 72.4%; }

  .research-trial__callout {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #FFFFFF;
    padding: 4px 0 4px 8px;
  }
  .research-trial__callout--1 { left: 10.2%; bottom: 5%; max-width: 46%; }
  .research-trial__callout--2 { left: 32.7%; top: 52%; max-width: 36%; }
  .research-trial__callout--3 { left: 73.2%; top: 23%; max-width: 24%; }
  .research-trial__callout-muted {
    font-family: var(--font-primary--family);
    font-size: clamp(13px, 0.83vw, 16px);
    line-height: 1.38;
    color: #9A9A9A;
    margin: 0;
  }
  .research-trial__callout-strong {
    font-family: var(--font-primary--family);
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 1.5;
    font-weight: 500;
    color: #121212;
    margin: 0;
  }
  .research-trial__callout--1 .research-trial__callout-muted { color: #454545; }

  /* ---- Mobile chart ---- */
  .research-trial__chart--mob {
    position: relative;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 24px;
    order: 3;
  }
  @media (min-width: 1024px) {
    .research-trial__chart--mob { display: none; }
  }
  .research-trial__vbar {
    position: absolute;
    left: 24px;
    top: 24px;
    bottom: 24px;
    width: 32px;
    border: 1.5px solid #121212;
    border-radius: 999px;
    background: linear-gradient(180deg, #F2E7BC 0%, #FFFBEF 45%, #FFFFFF 70%);
  }
  .research-trial__vtooth {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 42px;
    display: inline-flex;
  }
  .research-trial__vtooth svg { width: 100%; height: 100%; min-width: 34px; min-height: 42px; flex-shrink: 0; }
  .research-trial__vtooth--1 { top: -4px; }
  .research-trial__vtooth--2 { top: calc(36% - 4px); }
  .research-trial__vtooth--3 { top: calc(72% - 4px); }
  .research-trial__vrow {
    margin-left: 56px;
    border-top: 1px dashed #C4C4C4;
    padding: 12px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .research-trial__vrow:last-child { padding-bottom: 0; }
  .research-trial__vrow .research-trial__callout-muted { font-size: 16px; line-height: 22px; }
  .research-trial__vrow .research-trial__callout-strong { font-size: 17px; line-height: 24px; }
  .research-trial__vrow--1 .research-trial__callout-muted { color: #6F6F6F; }

  /* ---- Stats ---- */
  .research-trial__stats {
    display: flex;
    flex-direction: column;
    background: #F3F3F3;
    border-radius: 16px;
    padding: 8px 24px;
    order: 2;
  }
  @media (min-width: 1024px) {
    .research-trial__stats {
      background: linear-gradient(165deg, #9C9484 0%, #77776D 45%, #3E5156 100%);
      border-radius: 12px;
      padding: 20px 32px;
      justify-content: space-between;
    }
  }
  .research-trial__stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    order: var(--ord-m, 0);
  }
  .research-trial__stat + .research-trial__stat { border-top: 1px dashed #C9C9C9; }
  @media (min-width: 1024px) {
    .research-trial__stat {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 4px;
      padding: 20px 0;
      order: 0;
    }
    .research-trial__stat + .research-trial__stat { border-top: 1px dashed rgba(255, 255, 255, 0.5); }
  }
  .research-trial__stat-number {
    font-family: var(--font-primary--family);
    font-size: 40px;
    line-height: 48px;
    font-weight: 400;
    color: #121212;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-trial__stat-number { font-size: 48px; line-height: 59px; color: #FFFFFF; }
  }
  .research-trial__stat-label {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: #6F6F6F;
    margin: 0;
    text-align: right;
  }
  @media (min-width: 1024px) {
    .research-trial__stat-label { color: rgba(255, 255, 255, 0.85); text-align: left; }
  }

  /* ---- About the study ---- */
  .research-trial__study {
    max-width: 1920px;
    margin: 24px auto 0;
    background: #F3F3F3;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  @media (min-width: 1024px) {
    .research-trial__study {
      background: transparent;
      border-radius: 0;
      padding: 12px;
      margin-top: 48px;
      gap: 16px;
    }
  }
  .research-trial__study-label {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    margin: 0;
  }
  .research-trial__study-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  @media (min-width: 1024px) {
    .research-trial__study-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: 12px;
      row-gap: 12px;
    }
  }
  .research-trial__study-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  @media (min-width: 1024px) {
    .research-trial__study-item {
      background: #FFFFFF;
      border-radius: 8px;
      padding: 12px;
    }
  }
  .research-trial__study-icon { display: inline-flex; flex-shrink: 0; width: 20px; height: 20px; }
  .research-trial__study-icon svg { width: 100%; height: 100%; min-width: 20px; min-height: 20px; flex-shrink: 0; }
  .research-trial__study-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
  }
/* END_SECTION:research-trial */

/* START_SECTION:research-why (INDEX:86) */
.research-why {
    background: var(--rw-bg, #FFFFFF);
    color: var(--rw-fg, #121212);
    padding: 32px 16px;
  }
  @media (min-width: 1024px) {
    .research-why { padding: 60px clamp(40px, 14.58vw, 280px); }
  }
  .research-why__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1920px;
    margin: 0 auto;
  }
  @media (min-width: 1024px) {
    .research-why__inner {
      display: grid;
      grid-template-columns: minmax(0, 432px) minmax(0, 546px);
      justify-content: space-between;
      gap: 48px;
      padding: 0 clamp(0px, 6vw, 116px);
    }
  }

  .research-why__head { display: flex; flex-direction: column; gap: 12px; }
  .research-why__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-why__title { font-size: 54px; line-height: 1.1; letter-spacing: -1px; }
  }
  .research-why__text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rw-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-why__text { font-size: 16px; line-height: 26px; }
  }

  .research-why__col { display: flex; flex-direction: column; gap: 24px; }
  @media (min-width: 1024px) {
    .research-why__col { gap: 20px; }
  }

  .research-why__card {
    background: var(--rw-card-bg, #FFFFFF);
    border: 1px solid var(--rw-card-border, #ECECEC);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }
  @media (min-width: 1024px) {
    .research-why__card {
      padding: 24px;
      display: block;
    }
  }
  .research-why__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #121212;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
  }
  @media (min-width: 1024px) {
    .research-why__num { width: 54px; height: 54px; font-size: 20px; line-height: 32px; }
  }
  .research-why__card-body { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
  @media (min-width: 1024px) {
    .research-why__card-body { gap: 8px; padding-top: 20px; }
  }
  .research-why__card-title {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-why__card-title { font-size: 24px; line-height: 32px; font-weight: 400; }
  }
  .research-why__card-text {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    color: var(--rw-sub, #454545);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .research-why__card-text { font-size: 16px; line-height: 24px; }
  }

  .research-why__quote {
    position: relative;
    background: var(--rw-quote-bg, #F3F3F3);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
  }
  .research-why__quote-icon {
    position: absolute;
    left: 20px;
    top: -10px;
    color: #121212;
    display: inline-flex;
    width: 22px;
    height: 20px;
  }
  .research-why__quote-icon svg { width: 100%; height: 100%; min-width: 22px; min-height: 20px; flex-shrink: 0; }
  .research-why__quote-text {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    max-width: 398px;
  }
  @media (min-width: 1024px) {
    .research-why__quote-text { font-size: 24px; line-height: 32px; }
  }
/* END_SECTION:research-why */

/* START_SECTION:reviews-grid (INDEX:87) */
/* Type scale, weights, colours and spacing are taken 1:1 from the reference
     review grid: verdict 24/500, summary 14/300, filter 13/400 grey, card
     padding 16 on a #F8F9FA tile, headline 14/700, body 13/18, and the
     name/date line at 12px in 60% black — the name is bolder, not darker. */
  .reviews-grid {
    background: var(--rv-bg, #FFFFFF);
    padding: var(--rv-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .reviews-grid { padding: var(--rv-pad-desk, 80px max(40px, (100% - 1400px) / 2)); }
  }
  .reviews-grid__inner { max-width: 1400px; margin: 0 auto; }

  /* Verdict line: word and stars on one baseline, centred. */
  .reviews-grid__head {
    text-align: center;
    margin: 0 0 4px;
  }
  .reviews-grid__verdict {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .reviews-grid__verdict-word {
    font-family: var(--rv-font);
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    color: #191919;
  }
  .reviews-grid__verdict-stars { color: var(--rv-star, #2BB673); height: 21px; width: auto; display: block; }
  .reviews-grid__summary {
    font-family: var(--rv-font);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #191919;
    margin: 0 0 4px;
  }
  /* The score and the review count carry the emphasis, as in the reference.
     In the Summary line setting: <b> for emphasis, <u> for the review count,
     which is emphasised and underlined. */
  .reviews-grid__summary b,
  .reviews-grid__summary strong,
  .reviews-grid__summary u { font-weight: 500; }
  .reviews-grid__summary u {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1.5px;
  }
  .reviews-grid__provider {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    vertical-align: middle;
  }
  .reviews-grid__provider-img { height: 17px; width: auto; display: block; }
  .reviews-grid__provider-mark { color: var(--rv-star, #2BB673); height: 14px; width: auto; display: block; }
  .reviews-grid__provider-name {
    font-weight: 500;
    color: #191919;
  }
  .reviews-grid__filter {
    font-family: var(--rv-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #727273;
    margin: 16px 0;
  }

  .reviews-grid__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
  }
  @media (min-width: 640px) {
    .reviews-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .reviews-grid__list { grid-template-columns: repeat(var(--rv-cols, 4), minmax(0, 1fr)); }
  }
  /* Block flow, not flex: the reference spaces the four rows with per-element
     margins that differ (8 / 6 / 12), which a single flex gap cannot express. */
  .reviews-grid__card {
    display: block;
    background: var(--rv-card-bg, #F8F9FA);
    border-radius: 2px;
    padding: 16px;
    line-height: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }
  /* A long review is clamped; the toggle appears only where it overflows. */
  .reviews-grid__body.is-clamped,
  .reviews-grid__reply-body.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: var(--rv-clamp, 4);
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.15) 100%);
    mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, 0.15) 100%);
  }
  .reviews-grid__more {
    appearance: none;
    display: block;
    margin: 10px auto 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: var(--rv-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: var(--rv-star, #2BB673);
    text-decoration: underline;
    cursor: pointer;
  }
  /* Brand reply, marked by a rule down its left edge. */
  .reviews-grid__reply {
    margin: 12px 0 0;
    padding: 10px 0 10px 12px;
    border-left: 3px solid var(--rv-star, #2BB673);
    background: #FFFFFF;
  }
  .reviews-grid__reply-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    font-family: var(--rv-font);
    font-size: 12.5px;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.6);
  }
  .reviews-grid__reply-icon { display: inline-flex; color: rgba(0, 0, 0, 0.45); }
  .reviews-grid__reply-icon svg { display: block; }
  .reviews-grid__reply-name { font-weight: 500; color: #191919; }
  .reviews-grid__reply-date { margin-left: auto; }
  .reviews-grid__reply-body {
    margin: 0;
    font-family: var(--rv-font);
    font-size: 13px;
    line-height: 18px;
    color: #191919;
  }
  /* Overflow rows stay in place, dissolved under a fade, until asked for. */
  .reviews-grid__wrap { position: relative; }
  .reviews-grid__wrap.is-capped { overflow: hidden; }
  .reviews-grid__wrap.is-capped::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--rv-bg, #FFFFFF) 88%);
  }
  .reviews-grid__showmore { display: flex; justify-content: center; margin: 24px 0 0; }
  /* display beat the hidden attribute, so Leer más showed on short reviews. */
  .reviews-grid__more[hidden], .reviews-grid__showmore[hidden] { display: none; }
  .reviews-grid__showmore-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* The theme's CTA shape: 16/32 on an 8px radius at 18/24. */
    padding: 16px 32px;
    background: transparent;
    border: 1px solid #DCDCDC;
    border-radius: 8px;
    font-family: var(--rv-font);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #191919;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease;
  }
  .reviews-grid__showmore-btn:hover { border-color: #191919; background: #FFFFFF; }
  .reviews-grid__showmore-btn svg { display: block; }
  .reviews-grid__top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .reviews-grid__stars { color: var(--rv-star, #2BB673); height: 16px; width: auto; display: block; }
  .reviews-grid__verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rv-font);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.6);
  }
  .reviews-grid__meta {
    font-family: var(--rv-font);
    font-size: 12px;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.6);
    margin: 0 0 6px;
  }
  .reviews-grid__author { font-weight: 700; color: inherit; }
  .reviews-grid__date { font-weight: 400; color: inherit; }
  .reviews-grid__card-title {
    font-family: var(--rv-font);
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 600;
    color: #191919;
    margin: 12px 0 5px;
  }
  .reviews-grid__body {
    font-family: var(--rv-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: #191919;
    margin: 0;
  }
  /* Phones: the shared 44px button size. */
  @media (max-width: 1023px) {
    .reviews-grid__showmore-btn { min-height: 44px; padding: 12px 24px; font-size: 16px; line-height: 20px; border-radius: 6px; }
  }
/* END_SECTION:reviews-grid */

/* START_SECTION:scratch-popup (INDEX:88) */
.scratch-popup {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: none;
    opacity: 0;
    transition: opacity 350ms ease;
    font-family: var(--font-primary--family);
    color: #FFFFFF;
  }
  .scratch-popup.is-mounted { display: block; }
  .scratch-popup.is-open { opacity: 1; }
  html.scratch-popup-open { overflow: hidden; }
  .scratch-popup__backdrop { position: absolute; inset: 0; overflow: hidden; background: #121212; }
  .scratch-popup__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
  .scratch-popup__bg-wrap { position: absolute; inset: 0; display: block; }
  /* The sky backdrop is bright, so the scrim is heavier than Gudslip's. */
  .scratch-popup__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.2) 60%); }
  .scratch-popup__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #F5F5F5;
    color: #121212;
    cursor: pointer;
  }
  .scratch-popup__panel {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: max(48px, 50vw - 606px);
    transform: translateY(-50%);
    width: min(348px, 100vw - 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .scratch-popup__wordmark {
    margin: 0 0 28px;
    font-size: 26px;
    line-height: 1;
    font-weight: 500;
    color: #FFFFFF;
  }
  .scratch-popup__title {
    margin: 0 0 12px;
    font-size: 40px;
    line-height: 1;
    font-weight: 500;
    color: #FFFFFF;
  }
  .scratch-popup__subtitle {
    margin: 0 0 30px;
    font-size: 26px;
    line-height: 24px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .scratch-popup__card {
    position: relative;
    width: 348px;
    height: 255px;
    border-radius: 20px;
    overflow: hidden;
    touch-action: none;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  }
  .scratch-popup__canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
  .scratch-popup__prize {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: var(--scratch-prize-bg, #3F83F8);
    color: #FFFFFF;
  }
  .scratch-popup__prize-pct { font-size: 72px; line-height: 1; font-weight: 500; }
  .scratch-popup__prize-label { font-size: 18px; text-transform: uppercase; }
  .scratch-popup__card.is-revealed .scratch-popup__canvas { opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
  .scratch-popup__form { width: 100%; margin-top: 22px; }
  .scratch-popup__won { margin: 0 0 12px; font-size: 16px; line-height: 1.35; color: #FFFFFF; }
  .scratch-popup__row { display: flex; gap: 8px; }
  .scratch-popup__email {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
    background: #FFFFFF;
    color: #121212;
  }
  .scratch-popup__email:focus { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }
  .scratch-popup__cta {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #121212;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }
  .scratch-popup__cta[disabled] { opacity: 0.6; cursor: wait; }
  .scratch-popup__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
    cursor: pointer;
  }
  .scratch-popup__consent input { margin: 2px 0 0; accent-color: #121212; }
  .scratch-popup__error { margin: 10px 0 0; font-size: 13px; color: #FFB4B4; }
  .scratch-popup__success-title { margin: 20px 0 6px; font-size: 24px; font-weight: 500; color: #FFFFFF; }
  .scratch-popup__success-text { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
  .scratch-popup__code {
    margin-top: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 18px;
    border: 1px dashed rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 20px;
    font-weight: 500;
    cursor: pointer;
  }
  .scratch-popup__code small { font-size: 11px; font-weight: 400; color: rgba(255, 255, 255, 0.8); }

  @media (min-width: 750px) and (max-height: 700px) {
    .scratch-popup__wordmark { margin-bottom: 16px; font-size: 22px; }
    .scratch-popup__title { font-size: 32px; margin-bottom: 8px; }
    .scratch-popup__subtitle { font-size: 20px; margin-bottom: 18px; }
    .scratch-popup__card { width: 300px; height: 220px; }
    .scratch-popup__form { margin-top: 14px; }
  }
  @media (max-width: 749px) {
    .scratch-popup__scrim { background: rgba(0, 0, 0, 0.13); }
    .scratch-popup__panel { left: 50%; transform: translate(-50%, -50%); width: min(320px, 100vw - 40px); }
    .scratch-popup__wordmark { margin-bottom: 22px; font-size: 24px; }
    .scratch-popup__title { font-size: 28px; line-height: 28px; margin-bottom: 8px; }
    .scratch-popup__subtitle { font-size: 20px; line-height: 24px; margin-bottom: 22px; }
    .scratch-popup__card { width: 230px; height: 169px; border-radius: 16px; }
    .scratch-popup__prize-pct { font-size: 52px; }
    .scratch-popup__prize-label { font-size: 14px; }
    .scratch-popup__row { flex-direction: column; }
    .scratch-popup__cta { height: 44px; }
  }
  @media (max-width: 999px) and (max-height: 480px) {
    .scratch-popup__panel { width: min(300px, 100vw - 48px); }
    .scratch-popup__wordmark { display: none; }
    .scratch-popup__title { font-size: 24px; }
    .scratch-popup__subtitle { font-size: 16px; margin-bottom: 12px; }
    .scratch-popup__card { width: 200px; height: 147px; }
  }
/* END_SECTION:scratch-popup */

/* START_SECTION:see-how-it-works (INDEX:89) */
/* Section outer: transparent (the visible card is __inner). */
  .see-how {
    background: transparent;
    color: var(--sh-fg, #000);
    padding: var(--sh-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .see-how { padding: var(--sh-pad-desk, 40px 280px); }
  }

  /* Mobile: __inner is transparent — card treatment lives only on
     __card (media + benefits + cta). Head + subtitle are OUTSIDE the
     card on the section bg. Desktop reverts to a 2-column grid where
     the head+benefits sit in the left column and the media fills the
     right column across both rows. */
  .see-how__inner {
    max-width: var(--sh-max-desk, 1360px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
  @media (min-width: 1024px) {
    .see-how__inner {
      background: var(--sh-bg, #FAFAFB);
      padding: 37px;
      border-radius: 16px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      /* Equal rows: the head sits at the bottom of the first, the benefits at
         the top of the second, so the pair meets at the column's midpoint and
         reads as one centred block instead of being pinned top and bottom.
         The media still spans both rows, so it keeps its full height. */
      grid-template-rows: 1fr 1fr;
      column-gap: 48px;
      row-gap: 55px;
      align-items: start;
      height: 670px;
      max-height: 670px;
    }
    .see-how__head { grid-column: 1; grid-row: 1; align-self: end; }
    .see-how__benefits { grid-column: 1; grid-row: 2; align-self: start; }
    /* Inset the left column off the card edge; the media keeps the card's
       own padding so only the copy side moves. The benefits list sets
       its own padding further down (it has a list reset to undo), so it
       takes the same inset from there rather than here. */
    .see-how__head { padding-left: 32px; }
    .see-how__media { grid-column: 2; grid-row: 1 / span 2; }
    .see-how__cta--mob { display: none; }
    /* Reverse variant (PDP): media on the LEFT, content on the RIGHT — so the
       copy inset flips to the outer edge on that side. */
    .see-how--reverse .see-how__head { grid-column: 2; }
    .see-how--reverse .see-how__benefits { grid-column: 2; }
    .see-how--reverse .see-how__head { padding-left: 0; padding-right: 32px; }
    .see-how--reverse .see-how__media { grid-column: 1; }
  }

  /* Card wraps only media + benefits + CTA on mobile. On desktop it
     un-wraps via display:contents so its children become grid items of
     __inner. */
  .see-how__card {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);
  }
  @media (min-width: 1024px) {
    .see-how__card { display: contents; }
  }
  /* Mobile only: media renders between the subtitle and the benefits.
     Flatten __content so its children participate in __inner's flex flow,
     then use `order` to insert __media in position 1. */
  .see-how__content { display: contents; }
  .see-how__head { order: 0; }
  .see-how__media { order: 1; }
  .see-how__benefits { order: 2; }
  .see-how__cta--mob { order: 3; }
  @media (min-width: 1024px) {
    .see-how__content {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .see-how__head,
    .see-how__media,
    .see-how__benefits,
    .see-how__cta--mob { order: 0; }
  }
  {% comment %}
    A desktop flex block used to sit here re-declaring gap/height/align-items
    on .see-how__inner. The layout became a grid above, so its flex-direction
    rules were inert while its gap: 48px silently overrode the grid's
    row-gap: 24px — that, not the row sizing, was what held the copy and the
    benefits apart. Height and alignment are set in the grid block above.
  {% endcomment %}

  @media (min-width: 1024px) {
    .see-how__content {
      display: flex;
      flex-direction: column;
      flex: 1 0 0;
      min-width: 0;
      align-self: center;
      justify-content: flex-start;
      gap: 28px;
    }
  }

  .see-how__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .see-how__head { text-align: left; }
  }

  .see-how__title {
    font-family: var(--font-primary--family);
    font-weight: 400;
    font-size: var(--sh-title-mob, 34px);
    line-height: 1.2;
    letter-spacing: -0.4px;
    color: var(--sh-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .see-how__title {
      font-size: var(--sh-title-desk, 54px);
      line-height: 53px;
      letter-spacing: -1px;
    }
  }

  .see-how__subtitle {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--sh-sub, #605F5F);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .see-how__subtitle { font-size: 18px; line-height: 26px; max-width: 353px; }
  }

  .see-how__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .see-how__cta { padding: 14px 20px; font-size: 14px; line-height: 20px; border-radius: 6px; }
  }
  .see-how__cta:hover { opacity: 0.85; }
  .see-how__cta--desk { display: none; align-self: flex-start; }
  /* Mobile CTA reaches the card's edges (negates the __inner 16px pad)
     and only rounds the bottom corners so it inherits the card's
     bottom-8 clip. */
  .see-how__cta--mob {
    display: inline-flex;
    width: 100%;
    margin: 0;
    justify-content: center;
    border-radius: 0;
  }
  @media (min-width: 1024px) {
    .see-how__cta--desk {
      display: inline-flex;
      width: auto;
      padding: 15px 34px;
      font-size: 17px;
      line-height: 24px;
      font-weight: 400;
      /* On top of the head's 12px flex gap, not instead of it. */
      margin-top: 4px;
      margin-bottom: 14px;
    }
    .see-how__cta--mob { display: none; }
  }

  /* Mobile: inside the card. Rows left-aligned uniformly. */
  .see-how__benefits {
    list-style: none;
    margin: 0;
    padding: 24px 24px 24px 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    background: transparent;
    border-radius: 0;
  }
  @media (min-width: 1024px) {
    .see-how__benefits {
      /* Undoes the mobile list padding and picks up the same 32px inset the
         head uses, so the icons line up with the title above them. */
      padding: 0 0 0 32px;
      /* Columns hug their content instead of splitting the row in two: with
         the label capped at 128px, 1fr tracks left ~120px of dead space to
         the right of every card and made them read as oversized. */
      grid-template-columns: repeat(2, max-content);
      justify-content: start;
      gap: 10px;
    }
    /* Reverse variant (PDP): the copy column sits on the right. */
    .see-how--reverse .see-how__benefits { padding: 0 32px 0 0; }
  }
  /* Mobile (Figma 8320:2347): simple blue check + label rows, left-aligned. */
  .see-how__benefit {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    background: transparent;
    padding: 0;
    border-radius: 0;
    width: 100%;
  }
  @media (min-width: 1024px) {
    .see-how__benefit {
      background: #FFFFFF;
      padding: 12px 15px 12px 12px;
      border-radius: 12px;
      gap: 12px;
    }
  }
  .see-how__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sh-icon, #000000);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
  }
  @media (min-width: 1024px) {
    .see-how__benefit-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      /* Grey well against the card's white — the icon itself is the section's
         icon colour, set to black in the template. */
      background: #F3F3F3;
    }
  }
  .see-how__benefit-icon svg { width: 22px; height: 22px; }
  .see-how__benefit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .see-how__benefit-label {
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
    color: #000;
  }
  @media (min-width: 1024px) {
    /* The label cap is what sets the card width, since the track is
       max-content — widening it grows the card by giving the text more room
       rather than by padding it out with dead space. Still short enough that
       every label keeps wrapping to two lines, so the rows stay level. */
    .see-how__benefit-label { font-size: 16px; line-height: 21px; max-width: 168px; }
  }
  .see-how__benefit-desc {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: var(--sh-sub, #605F5F);
  }

  /* Compact pills variant (PDP): smaller icon square + no icon bg, tighter row. */
  .see-how__benefits--compact .see-how__benefit {
    padding: 14px 16px;
    gap: 10px;
  }
  .see-how__benefits--compact .see-how__benefit-icon {
    width: 24px;
    height: 24px;
    border-radius: 0;
    background: transparent;
  }
  .see-how__benefits--compact .see-how__benefit-label { font-size: 16px; line-height: 20px; max-width: none; }
  .see-how__benefits--compact .see-how__benefit-desc { font-size: 13px; line-height: 17px; }

  .see-how__media {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--sh-radius, 12px);
    overflow: hidden;
    background: #DDD;
  }
  @media (min-width: 1024px) {
    .see-how__media {
      flex: 1 0 0;
      min-width: 0;
      aspect-ratio: auto;
      align-self: stretch;
      /* Cap so any tall media stays inside the fixed 670px row. */
      max-height: 100%;
    }
  }
  .see-how__media-img,
  .see-how__media-placeholder,
  .see-how__media-video {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    object-fit: cover !important;
    display: block;
  }
  .see-how__media-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    text-decoration: none;
    transition: transform 200ms ease;
  }
  .see-how__media-play:hover { transform: translate(-50%, -50%) scale(1.06); }
  /* Phones: the same composition as desktop, stacked. One light card holds
     the copy, a square shot, a 2x2 grid of white benefit chips with grey icon
     wells, and the shared 44px button. The white card + shadow wrapper goes:
     the card unwraps so its children join the flex column in order. */
  @media (max-width: 1023px) {
    .see-how .see-how__inner {
      background: var(--sh-bg, #FAFAFB);
      border-radius: 16px;
      padding: 26px 25px 32px;
      gap: 22px;
    }
    .see-how .see-how__head { gap: 10px; }
    .see-how .see-how__subtitle { font-size: 15px; line-height: 21px; }
    .see-how .see-how__card { display: contents; }
    .see-how .see-how__media { order: 1; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; }
    .see-how .see-how__benefits {
      order: 2;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .see-how .see-how__benefit {
      background: #FFFFFF;
      border-radius: 12px;
      padding: 12px;
      gap: 12px;
      width: auto;
    }
    .see-how .see-how__benefit-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: #F3F3F3;
    }
    .see-how .see-how__benefit-icon svg { width: 18px; height: 18px; }
    .see-how .see-how__benefit-label { font-size: 14px; line-height: 18px; }
    /* Media first, the title and copy under it, then the chips and a
       full-width button. */
    .see-how .see-how__head { order: 2; }
    .see-how .see-how__benefits { order: 3; }
    .see-how .see-how__cta--mob.see-how__cta--mob { order: 4; margin-top: 6px; width: 100%; max-width: none; align-self: stretch; }
  }
/* END_SECTION:see-how-it-works */

/* START_SECTION:shop-now-bar (INDEX:90) */
/* Slides down from above once the page has been scrolled past the
     threshold, and sits over everything else at the top of the window. */
  .shop-now-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background: linear-gradient(90deg, var(--snb-bg-from) 0%, var(--snb-bg-mid) 52%, var(--snb-bg-to) 100%);
    transform: translateY(-100%);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .shop-now-bar.is-visible { transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .shop-now-bar { transition: none; }
  }
  .shop-now-bar__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1400px;
    min-height: var(--snb-h-desk, 68px);
    margin: 0 auto;
    padding: 18px 16px;
  }
  .shop-now-bar__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
  }
  .shop-now-bar__logo {
    display: block;
    width: 157px;
    height: auto;
    filter: brightness(0) invert(1);
  }
  .shop-now-bar__wordmark {
    font-family: var(--font-primary--family);
    font-size: 22px;
    line-height: 26px;
    font-weight: 500;
    color: #FFFFFF;
  }
  .shop-now-bar__details {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    pointer-events: none;
  }
  /* The eyebrow is plain gold: no gradient, no sheen. */
  .shop-now-bar__event {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--snb-gold-from);
  }
  .shop-now-bar__event::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--snb-gold-from);
  }
  .shop-now-bar__sep {
    display: inline-block;
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.32);
  }
  .shop-now-bar__offer {
    font-family: var(--font-primary--family);
    font-size: 15.5px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
  }
  .shop-now-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 10px 35px;
    background: #FFFFFF;
    color: #121212;
    border-radius: 8px;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .shop-now-bar__cta:hover { transform: translateY(-1px); }
  /* Scoped to this button so the shared roll lines keep their own layout
     everywhere else. */
  .shop-now-bar__cta .clab-roll__line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .shop-now-bar__cta-arrow { display: inline-block; }

  @media (max-width: 989px) {
    .shop-now-bar__event { font-size: 14px; }
    .shop-now-bar__offer { font-size: 13.5px; }
  }
  /* Too narrow for three columns: the logo steps aside and the message
     stacks over two lines in the middle. */
  @media (max-width: 749px) {
    .shop-now-bar__inner {
      min-height: var(--snb-h-mob, 74px);
      padding: 8px 12px;
      gap: 10px;
    }
    .shop-now-bar__brand { display: none; }
    .shop-now-bar__details {
      position: static;
      transform: none;
      display: block;
      flex: 1 1 auto;
      text-align: left;
      line-height: 1.5;
    }
    .shop-now-bar__event { font-size: 12px; }
    .shop-now-bar__sep { display: none; }
    .shop-now-bar__offer { display: block; font-size: 12.5px; }
    .shop-now-bar__cta { padding: 9px 14px; font-size: 13px; gap: 6px; }
    /* nowrap text never shrinks on its own: allow the column to give way
       and truncate, so the CTA can never be pushed off the right edge. */
    .shop-now-bar__details { min-width: 0; }
    .shop-now-bar__event,
    .shop-now-bar__offer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .shop-now-bar__cta-label--desk { display: none; }
    .shop-now-bar__cta-label--mob { display: inline; }
  }
  .shop-now-bar__cta-label--mob { display: none; }
  @media (max-width: 749px) {
    .shop-now-bar__cta-label--desk { display: none; }
    .shop-now-bar__cta-label--mob { display: inline; }
  }
  /* Phones: a single 48px line. The offer copy was a second, truncated line
     under the event and the announcement bar already carries it; the CTA
     shrinks to 36px so the bar stops competing with the sticky add-to-cart. */
  @media (max-width: 749px) {
    .shop-now-bar__inner { min-height: 48px; padding: 6px 12px; }
    .shop-now-bar__offer { display: none; }
    /* Flex, not a block with a 24px line: the 16px headline sat 6px down. */
    .shop-now-bar__details { display: flex; align-items: center; line-height: 16px; }
    .shop-now-bar__event { font-size: 12px; line-height: 16px; }
    .shop-now-bar__cta { min-height: 36px; padding: 7px 12px; font-size: 13px; line-height: 20px; border-radius: 6px; }
  }
  /* ---- Countdown layout ---- */
  .shop-now-bar__inner--timer { justify-content: center; padding: 10px 16px; }
  .shop-now-bar__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    width: 100%;
    color: #FFFFFF;
    text-decoration: none;
    transition: opacity 200ms ease;
  }
  .shop-now-bar__link:hover { opacity: 0.92; }
  .shop-now-bar__copy { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
  .shop-now-bar__headline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 8px;
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: #FFFFFF;
  }
  .shop-now-bar__headline .shop-now-bar__event { font-weight: 700; }
  .shop-now-bar__dot { opacity: 0.7; }
  .shop-now-bar__inner--timer .shop-now-bar__offer { font-size: 12px; line-height: 16px; }
  .shop-now-bar__timer.is-off { display: none !important; }
  .shop-now-bar__timer { display: inline-flex; align-items: flex-start; gap: 8px; font-variant-numeric: tabular-nums; }
  .shop-now-bar__unit { display: flex; flex-direction: column; align-items: center; min-width: 30px; }
  .shop-now-bar__num { font-family: var(--font-primary--family); font-size: 17px; line-height: 1; font-weight: 500; color: #FFFFFF; }
  .shop-now-bar__lbl { margin-top: 3px; font-family: var(--font-primary--family); font-size: 9px; line-height: 1; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
  .shop-now-bar__colon { font-family: var(--font-primary--family); font-size: 17px; line-height: 1; font-weight: 500; color: #FFFFFF; opacity: 0.55; }
  @media (max-width: 749px) {
    .shop-now-bar__inner--timer { padding: 6px 12px; }
    /* Copy on one line (gold eyebrow, then the headline at 14px, no dots),
       the timer on its own row under it. */
    .shop-now-bar__link { flex-direction: column; gap: 4px; }
    .shop-now-bar__headline { gap: 0 8px; font-size: 14px; line-height: 18px; }
    .shop-now-bar__headline .shop-now-bar__event { gap: 0; font-size: 13px; line-height: 18px; }
    .shop-now-bar__headline .shop-now-bar__event::before { display: none; }
    .shop-now-bar__dot { display: none; }
    .shop-now-bar__inner--timer .shop-now-bar__offer { display: none; }
    .shop-now-bar__num, .shop-now-bar__colon { font-size: 14px; }
    .shop-now-bar__unit { min-width: 24px; }
    .shop-now-bar__lbl { font-size: 8px; }
  }
/* END_SECTION:shop-now-bar */

/* START_SECTION:social-proof (INDEX:91) */
.social-proof {
    position: relative;
    overflow: hidden;
    background: var(--sp-bg, #0F032D);
    color: #FFFFFF;
    padding: var(--sp-pad-mob, 56px 0);
  }
  @media (min-width: 750px) {
    .social-proof { padding: var(--sp-pad-desk, 80px 0); }
  }
  /* A single soft light from the top right, in place of the reference's orbs. */
  .social-proof::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 900px;
    height: 900px;
    max-width: 100vw;
    pointer-events: none;
    background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--sp-glow) 7%, transparent) 0%, transparent 70%);
  }
  /* 1400 lock with fixed gutters. The old max(16px, (100% - 1400px)/2)
     padding sat inside the border-box max-width and shrank the content to
     830px on a 1970 viewport. */
  .social-proof__inner {
    position: relative;
    z-index: 1;
    max-width: calc(var(--sp-max, 1400px) + 32px);
    margin-inline: auto;
    padding-inline: 16px;
  }
  @media (min-width: 1024px) {
    .social-proof__inner {
      max-width: calc(var(--sp-max, 1400px) + 80px);
      padding-inline: 40px;
    }
  }
  .social-proof__anchor { position: absolute; top: 0; left: 0; height: 0; scroll-margin-top: 120px; }
  /* Wide enough for the Spanish first line ("Dentistas. Higienistas. Más de
     2.000 profesionales." is 982px at 48px), so the title holds two lines. */
  .social-proof__header { max-width: 1040px; margin-inline: auto; text-align: center; }
  @media (min-width: 1024px) and (max-width: 1139px) {
    .social-proof .social-proof__title { font-size: 44px; }
  }
  /* The badge is retired: the review stats now open the section instead. */
  .social-proof__eyebrow { display: none; }
  .social-proof__eyebrow--legacy {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    margin: 0 0 18px;
    border-radius: 6px;
    background: #3F83F8;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    color: #FFFFFF;
  }
  .social-proof__title {
    font-family: var(--font-primary--family);
    font-size: var(--sp-title-mob, 34px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .social-proof__title { font-size: var(--sp-title-desk, 48px); }
  }
  /* The second line carries a white-to-orchid sheen, the gradient's highlight.
     Same type as the title: this beats the theme-wide accent rule
     ([class*="__title-accent"] = accent font in italic). */
  .social-proof__title .social-proof__title-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
  }
  .social-proof__title-accent {
    display: block;
    background: linear-gradient(90deg, var(--sp-accent-from) 0%, var(--sp-accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Grid of cards: one column on phones, four across on desktop. */
  .social-proof__grid-wrap {
    z-index: 1;
    margin-top: 80px;
    margin-bottom: 0;
  }
  .social-proof__track {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  @media (min-width: 750px) {
    .social-proof__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .social-proof__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .social-proof__slide { list-style: none; min-width: 0; }
  .social-proof__slide[hidden] { display: none; }
  /* phones start with four cards (two rows); "Load more" adds the rest */
  @media (max-width: 749px) {
    .social-proof__slide:nth-child(n+5):not(.is-on) { display: none; }
  }
  .social-proof__card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--sp-card, #1E1E1E);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
  }
  /* Cut-out portraits sit on a vertical wash: a faint tint of the product's
     colour over most of the card, deepening to a darker purple only at the
     foot (the reference is a coral studio backdrop, same ramp). */
  .social-proof__card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: linear-gradient(180deg, #F8F6FE 0%, #F4F0FE 60%, #E0D4FA 84%, #B79DF3 100%);
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--sp-aura, #9B6DFF) 3%, #FFFFFF) 0%,
      color-mix(in srgb, var(--sp-aura, #9B6DFF) 6%, #FFFFFF) 60%,
      color-mix(in srgb, var(--sp-aura, #9B6DFF) 24%, #FFFFFF) 84%,
      color-mix(in srgb, var(--sp-aura, #9B6DFF) 55%, #FFFFFF) 100%);
  }
  .social-proof__card-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    -webkit-user-drag: none;
    user-select: none;
  }
  /* A glow in the product's colour behind the cut-out portrait: a bright
     core at the shoulders, fading out before the card edge. It breathes
     slowly so the rail feels alive without pulling focus. */
  .social-proof__card-aura {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(46% 42% at 50% 52%, color-mix(in srgb, var(--sp-aura) 70%, transparent) 0%, transparent 100%),
      radial-gradient(70% 62% at 50% 58%, color-mix(in srgb, var(--sp-aura) 34%, transparent) 0%, transparent 100%);
    filter: blur(14px);
    transform-origin: 50% 55%;
    animation: sp-aura 6s ease-in-out infinite alternate;
  }
  @keyframes sp-aura {
    from { opacity: 0.8; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1.05); }
  }
  /* A curtain wipes up over the whole card, the foot fading out under it.
     Inside, an accent rule sweeps across and the three lines rise in turn. */
  .social-proof__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px 22px;
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0) 0%,
      rgba(10, 10, 10, 0.4) 26%,
      rgba(10, 10, 10, 0.88) 54%,
      rgba(10, 10, 10, 0.98) 100%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 420ms;
    pointer-events: none;
  }
  .social-proof__card:hover .social-proof__card-overlay,
  .social-proof__card:focus-within .social-proof__card-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
  }
  .social-proof__card-overlay::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 1px;
    margin-bottom: 18px;
    background: linear-gradient(90deg, var(--sp-accent-from), color-mix(in srgb, var(--sp-accent-from) 40%, transparent), transparent);
  }
  .social-proof__card-overlay-name {
    margin: 0 0 3px;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    color: #FFFFFF;
  }
  /* same type as the resting foot's role: no case change on hover */
  .social-proof__card-overlay-role {
    margin: 0 0 14px;
    font-family: var(--font-primary--family);
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 400;
    text-transform: none;
    background: linear-gradient(90deg, var(--sp-accent-from) 0%, var(--sp-accent-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  /* The foot belongs to the resting state only. */
  .social-proof__card-body { transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1); }
  .social-proof__card:hover .social-proof__card-body,
  .social-proof__card:focus-within .social-proof__card-body { opacity: 0; }
  .social-proof__card-quote {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 14.5px;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.9);
  }
  .social-proof__card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 20px 20px;
    background-color: #ffffff75;
    -webkit-backdrop-filter: blur(17px);
    backdrop-filter: blur(17px);
  }
  .social-proof__card-name {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    color: #FFFFFF;
  }
  .social-proof__card-role {
    margin: 0;
    font-family: var(--font-primary--family);
    font-size: 12.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.65);
  }
  .social-proof__card-credentials {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 0;
  }
  .social-proof__card-credential {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 400;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
  }

  /* "Load more" under the grid: the site's 54px black CTA (see-how__cta). */
  .social-proof__more {
    display: flex;
    justify-content: center;
    margin: 77px 0 0;
  }
  .social-proof__more[hidden] { display: none; }
  .social-proof__more-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border: 0;
    border-radius: 6px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: normal;
    cursor: pointer;
    transition: opacity 200ms ease;
  }
  .social-proof__more-btn:hover { opacity: 0.85; }

  /* Review stats open the section, one row above the title. */
  .social-proof__stats {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px 23px;
    margin: 0 0 40px;
  }
  .social-proof__stat { display: inline-flex; align-items: center; gap: 8px; }
  .social-proof__stat-stars { display: inline-flex; margin-right: 8px; color: var(--sp-star, #2BB673); }
  .social-proof__stat-stars svg { display: block; height: 16px; width: auto; }
  .social-proof__stat-number {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400;
    color: #FFFFFF;
  }
  .social-proof__stat-text {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 500;
    color: #FFFFFF;
  }
  .social-proof__stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.35);
  }

  @media (max-width: 749px) {
    .social-proof__card-name { font-size: 16px; }
    /* No hover on touch: the panel stays up and the foot stays hidden. */
    .social-proof__card-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
    .social-proof__card-body { opacity: 0; }
    .social-proof__card-quote { font-size: 13.5px; line-height: 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .social-proof__card-overlay,
    .social-proof__card-body { transition: none; }
    .social-proof__card-aura { animation: none; }
  }

  /* ---- background image (bg_image) ---- */
  .social-proof__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* phones see a narrow slice: keep the left drops in it */
    object-position: 12% 40%;
    z-index: 0;
    pointer-events: none;
  }
  /* Fine grain over the animated satin, like the original artwork. */
  .social-proof--animated::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.09;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }
  @media (min-width: 1024px) { .social-proof__bg { object-position: center; } }
  /* Phones: cover turned the wide swirl into a blurry slice. The artwork
     sits whole at 220% width, anchored to the bottom behind the cards; the
     white veil above keeps the top clean. */
  @media (max-width: 749px) {
    .social-proof__bg {
      top: auto;
      right: auto;
      bottom: 0;
      left: 50%;
      width: 220%;
      height: auto;
      transform: translateX(-50%);
      object-fit: fill;
      object-position: center;
    }
  }
  /* White veil from the top: the section opens white like the one above and
     the drops appear little by little. */
  .social-proof--image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
      #FFFFFF 0%,
      #FFFFFF 35%,
      rgba(255, 255, 255, 0.85) 55%,
      rgba(255, 255, 255, 0.45) 75%,
      rgba(255, 255, 255, 0) 95%);
  }
  .social-proof--rich::before { display: none; }
  /* Glass over the gradient: the colour comes through, the edges hold. */
  .social-proof--rich .social-proof__card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  /* The card itself carries no backdrop blur: a blurred parent (like the
     old edge-fade mask on the track) becomes the backdrop root and leaves
     the foot's blur nothing to see. The foot blurs the section instead. */
  .social-proof--rich .social-proof__card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .social-proof--rich .social-proof__card-overlay {
    background: linear-gradient(180deg,
      rgba(15, 3, 45, 0) 0%,
      rgba(15, 3, 45, 0.45) 26%,
      rgba(15, 3, 45, 0.9) 54%,
      rgba(15, 3, 45, 0.98) 100%);
  }
  .social-proof--rich .social-proof__card-credential {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
  }
  .social-proof--rich .social-proof__stat-divider { background: rgba(255, 255, 255, 0.3); }

  /* ---- animated satin (bg_style: animated) ---- */
  .social-proof__aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* still fallback for no-JS / no-WebGL: a gloss and a fold in the same lilacs */
    background:
      linear-gradient(118deg, rgba(255, 255, 255, 0) 16%, rgba(255, 255, 255, 0.8) 32%, rgba(255, 255, 255, 0) 48%),
      linear-gradient(118deg, rgba(126, 112, 177, 0) 52%, rgba(126, 112, 177, 0.45) 68%, rgba(126, 112, 177, 0) 84%),
      linear-gradient(180deg, #C9B8F4 0%, #E4DCF6 100%);
  }
  .social-proof__aurora-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 900ms ease;
  }
  .social-proof__aurora-canvas.is-live { opacity: 1; }
  /* Over a moving background the cards skip backdrop blur (it would be
     recomputed every frame) and carry a touch more fill instead. */
  .social-proof--animated .social-proof__card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(255, 255, 255, 0.08);
  }
  /* Dark ink for the light backgrounds (lilac satin, liquid image):
     everything outside the cards turns to Midnight, accent line included.
     The cards keep their dark treatment over the photos. */
  /* Light backgrounds start white: until the lazy image (or the satin)
     arrives, the section must not flash the dark Midnight base. */
  .social-proof--ink-dark { color: #0F032D; background: #FFFFFF; }
  .social-proof--ink-dark .social-proof__title {
    color: #0F032D;
    margin-top: 18px;
    /* 61px at the 48px desktop size; the same ratio on the smaller mobile title */
    line-height: 1.27;
  }
  @media (min-width: 1024px) {
    .social-proof--ink-dark .social-proof__title { line-height: 61px; }
  }
  /* The foot is now light glass, so its text is ink too. */
  .social-proof--ink-dark .social-proof__card-name { color: #0F032D; }
  .social-proof--ink-dark .social-proof__card-role { color: rgba(15, 3, 45, 0.65); }
  /* Credential = the product-card feature pill: grey fill, blue check,
     sentence case, no border. */
  .social-proof--ink-dark .social-proof__card-credential {
    gap: 4px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(33, 33, 33, 0.05);
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;
    text-transform: none;
    color: #121212;
  }
  .social-proof__card-credential-icon { display: inline-flex; flex-shrink: 0; color: #3F83F8; }
  .social-proof__card-credential-icon svg { display: block; }
  @media (min-width: 1024px) {
    .social-proof--ink-dark .social-proof__card-credential { padding: 4px 8px; font-size: 12px; line-height: 18px; }
  }
  /* A barely-there grey edge on the light background. */
  .social-proof--ink-dark .social-proof__card { border: 1px solid rgba(18, 18, 18, 0.06); }
  .social-proof--ink-dark .social-proof__title-accent {
    background: none;
    -webkit-text-fill-color: #0F032D;
    color: #0F032D;
  }
  .social-proof--ink-dark .social-proof__stat-number,
  .social-proof--ink-dark .social-proof__stat-text { color: #0F032D; }
  .social-proof--ink-dark .social-proof__stat-number { font-weight: 500; }
  .social-proof--ink-dark .social-proof__stat-text { font-weight: 400; }
  /* Hover panel on the light background: the same curtain, but white frost
     with dark text instead of the dark gradient. The blur sits on its own
     layer and fades with its own opacity (a fading parent would switch the
     blur off mid-transition); its mask makes the blur grow with the tint. */
  .social-proof--ink-dark .social-proof__card-overlay { background: none; }
  .social-proof--ink-dark .social-proof__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* the face stays sharp: white and blur only start low, under the chin,
       and grow in over a long run so there is no seam */
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 15%,
      rgba(255, 255, 255, 0.4) 38%,
      rgba(255, 255, 255, 0.68) 60%,
      rgba(255, 255, 255, 0.8) 100%);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 15%, #000 58%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 15%, #000 58%);
    opacity: 0;
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .social-proof--ink-dark .social-proof__card:hover::after,
  .social-proof--ink-dark .social-proof__card:focus-within::after { opacity: 1; }
  /* no rule above the name in the hover panel */
  .social-proof__card-overlay::before { display: none; }
  .social-proof--ink-dark .social-proof__card-overlay-name { color: #0F032D; }
  .social-proof--ink-dark .social-proof__card-overlay-role {
    background: none;
    -webkit-text-fill-color: rgba(15, 3, 45, 0.65);
    color: rgba(15, 3, 45, 0.65);
  }
  .social-proof--ink-dark .social-proof__card-quote { color: rgba(15, 3, 45, 0.85); }
  @media (max-width: 749px) {
    /* no hover on touch: the frosted foot stays up */
    .social-proof--ink-dark .social-proof__card::after { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .social-proof--ink-dark .social-proof__card::after { transition: none; }
  }
  .social-proof--ink-dark .social-proof__stat-divider { background: rgba(15, 3, 45, 0.2); }

  /* Phones: the desktop grid at two columns, four cards up front and the
     load-more button for the rest. */
  @media (max-width: 749px) {
    .social-proof__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .social-proof__grid-wrap { margin-top: 39px; }
    .social-proof__more { margin-top: 16px; }
    /* Two narrow cards: the quote can't sit over the photo, so the panel
       becomes the card's text block under it and the hover foot goes. */
    .social-proof__card-overlay {
      position: static;
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      background: none;
      padding: 12px 12px 14px;
      gap: 2px;
    }
    .social-proof__card-body { display: none; }
    .social-proof__card-overlay-name { font-size: 15px; line-height: 20px; color: #121212; }
    .social-proof__card-overlay-role { font-size: 12px; line-height: 16px; color: #605F5F; margin-bottom: 6px; }
    .social-proof__card-quote { font-size: 13px; line-height: 18px; color: #121212; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
    .social-proof .social-proof__quote-desk { display: none; }
    .social-proof .social-proof__quote-mob { display: inline; }
    .social-proof .social-proof__title:has(.social-proof__title-mob) .social-proof__title-desk { display: none; }
    .social-proof .social-proof__title-mob { display: inline; }
    /* The artwork as a band at the bottom of the section, 220% wide. */
    .social-proof__bg { width: 220%; }
  }
  .social-proof__quote-mob, .social-proof__title-mob { display: none; }
/* END_SECTION:social-proof */

/* START_SECTION:trustpilot-grid (INDEX:92) */
.trustpilot-grid {
    background: var(--tp-bg, #FFFFFF);
    padding: var(--tp-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .trustpilot-grid { padding: var(--tp-pad-desk, 80px 40px); }
  }
  .trustpilot-grid__inner {
    max-width: 1400px;
    margin: 0 auto;
  }
  .trustpilot-grid__title {
    font-family: var(--font-primary--family);
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.4px;
    font-weight: 400;
    margin: 0 0 32px;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .trustpilot-grid__title { font-size: 48px; letter-spacing: -1px; }
  }
  .trustpilot-grid__desktop { display: none; }
  .trustpilot-grid__mobile { display: block; }
  @media (min-width: 1024px) {
    .trustpilot-grid__desktop { display: block; }
    .trustpilot-grid__mobile { display: none; }
  }
  .trustpilot-grid__empty {
    font-family: var(--font-primary--family);
    font-size: 15px;
    color: #807E7E;
    text-align: center;
    margin: 0;
  }
/* END_SECTION:trustpilot-grid */

/* START_SECTION:ugc (INDEX:93) */
.ugc {
    background: var(--ugc-bg, #FFFFFF);
    color: var(--ugc-fg, #000);
    /* Zero horizontal padding so the video track can bleed edge-to-edge.
       Head keeps its own inner padding via .ugc__head. */
    padding: var(--ugc-pad-mob, 48px 0);
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .ugc { padding: var(--ugc-pad-desk, 60px 0); }
  }

  .ugc__inner {
    max-width: var(--ugc-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  @media (min-width: 1024px) {
    /* Full-bleed on desktop so the track fills the viewport edge-to-edge.
       Head has its own 280px padding to stay in the safe area. */
    .ugc__inner { gap: 48px; max-width: none; margin: 0; }
  }

  .ugc__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 16px;
    flex-wrap: wrap;
    text-align: center;
  }
  @media (min-width: 1024px) {
    /* The left inset comes from the section padding, which also clips the
       marquee at the 1400px box edge. The right edge is set with max-width
       rather than padding: inside the head, the % in
       max(40px, (100% - 1400px) / 2) resolves against the head's own width,
       not the viewport, so it computes far too small. */
    .ugc__head { max-width: 1400px; padding: 0; flex-wrap: nowrap; justify-content: space-between; text-align: left; }
  }

  .ugc__title {
    font-family: var(--font-primary--family);
    font-size: var(--ugc-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--ugc-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .ugc__title {
      font-size: var(--ugc-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
    }
  }

  .ugc__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 8px;
    white-space: nowrap;
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .ugc__cta { font-size: 18px; line-height: 24px; }
  }
  .ugc__cta:hover { opacity: 0.85; }
  .ugc__cta--desk { display: none; }
  .ugc__cta--mob {
    display: inline-flex;
    align-self: center;
    margin: 24px 16px 0;
    width: calc(100% - 32px);
    max-width: 358px;
  }
  @media (min-width: 1024px) {
    .ugc__cta--desk { display: inline-flex; }
    .ugc__cta--mob { display: none; }
  }

  /* Mobile: center-mode slider. Each tile snap-aligns to the CENTER of
     the viewport with peeks of the prev/next tiles on either side. The
     side padding equals (viewport - tile)/2 so the first and last tiles
     can reach the exact centre. */
  .ugc__track {
    overflow: hidden;
  }
  .ugc__marquee {
    display: flex;
    gap: 10px;
    width: max-content;
    animation: ugc-marquee 70s linear infinite;
  }
  .ugc__row {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
  }
  /* Shift by one full row plus the gap between the two rows: the pair is
     2*row + gap wide, so -50% lands half a gap short. */
  @keyframes ugc-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - 5px)); }
  }
  /* With JS the strip keeps moving under the pointer and can be dragged by
     hand (mouse or finger); the CSS animation stays as the no-JS fallback. */
  .ugc__track.is-draggable {
    cursor: grab;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }
  .ugc__track.is-draggable .ugc__marquee { animation: none; will-change: transform; }
  .ugc__track.is-draggable .ugc__tile { cursor: inherit; }
  .ugc__track.is-draggable img { -webkit-user-drag: none; pointer-events: none; }
  .ugc__track.is-dragging { cursor: grabbing; }
  @media (prefers-reduced-motion: reduce) {
    .ugc__marquee { animation: none; }
    .ugc__track { overflow-x: auto; }
  }

  /* Handle sits on the shot, over a gradient so it stays legible whatever the
     photo does behind it. */
  .ugc__tile-name {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    pointer-events: none;
  }
  .ugc__tile-handle {
    font-family: var(--font-primary--family);
    font-size: 17px;
    line-height: 22px;
    font-weight: 500;
    color: #FFFFFF;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  .ugc__tile-verified { width: 17px; height: 17px; flex-shrink: 0; display: block; }
  .ugc__tile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
  }

  .ugc__tile {
    flex: 0 0 58vw;
    aspect-ratio: 295 / 432;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    background: #DDDDDD;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    padding: 16px;
  }
  @media (min-width: 640px) {
    .ugc__tile { flex-basis: 35vw; }
  }
  @media (min-width: 1024px) {
    .ugc__tile {
      flex: 0 0 295px;
      height: 432px;
      aspect-ratio: auto;
    }
  }
  .ugc__tile > img,
  .ugc__tile-img,
  .ugc__tile-placeholder,
  .ugc__tile-video,
  .ugc__tile--video video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 0;
  }
  .ugc__tile { padding: 0; }
  /* No button under the UGC grid on phones. */
  .ugc .ugc__cta--mob.ugc__cta--mob { display: none; }
/* END_SECTION:ugc */

/* START_SECTION:whitening-fades (INDEX:94) */
.whitening-fades {
    background: var(--wf-bg, #FFFFFF);
    color: var(--wf-fg, #121212);
    padding: var(--wf-pad-mob, 32px 0 32px 16px);
  }
  @media (min-width: 1024px) {
    .whitening-fades { padding: var(--wf-pad-desk, 60px clamp(40px, 14.58vw, 280px)); }
  }
  .whitening-fades__inner {
    max-width: var(--wf-max-desk, 1920px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .whitening-fades__inner { gap: 40px; }
  }
  .whitening-fades__head { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; padding-right: 16px; }
  @media (min-width: 1024px) { .whitening-fades__head { padding-right: 0; } }
  .whitening-fades__title {
    font-family: var(--font-primary--family);
    font-size: var(--wf-title-mob, 32px);
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.4px;
    margin: 0;
  }
  @media (min-width: 1024px) {
    .whitening-fades__title { font-size: var(--wf-title-desk, 54px); line-height: 1.1; letter-spacing: -1px; }
  }
  .whitening-fades__subtitle {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    color: var(--wf-sub, #605F5F);
    margin: 0;
  }
  @media (min-width: 1024px) { .whitening-fades__subtitle { font-size: 16px; } }

  .whitening-fades__causes { display: flex; flex-direction: column; gap: 16px; }
  .whitening-fades__causes-head { display: flex; align-items: center; gap: 16px; padding-right: 16px; }
  @media (min-width: 1024px) {
    .whitening-fades__causes-head { justify-content: center; padding-right: 0; }
  }
  .whitening-fades__label {
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--wf-label, #121212);
    margin: 0;
  }
  @media (min-width: 1024px) { .whitening-fades__label { font-size: 18px; } }
  .whitening-fades__label--center { text-align: center; padding-right: 16px; }
  @media (min-width: 1024px) { .whitening-fades__label--center { padding-right: 0; } }
  .whitening-fades__nav { display: flex; gap: 8px; margin-left: auto; }
  @media (min-width: 1024px) { .whitening-fades__nav { display: none; } }
  .whitening-fades__arrow {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #E0E0E0;
    background: #F3F3F3;
    color: #121212;
    cursor: pointer;
  }

  .whitening-fades__tiles {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .whitening-fades__tiles::-webkit-scrollbar { display: none; }
  @media (min-width: 1024px) {
    .whitening-fades__tiles {
      display: grid;
      grid-template-columns: repeat(var(--wf-cols, 5), minmax(0, 1fr));
      gap: 16px;
      overflow: visible;
      padding-right: 0;
    }
  }
  .whitening-fades__tile {
    position: relative;
    flex: 0 0 60%;
    max-width: 280px;
    scroll-snap-align: start;
    border-radius: 12px;
    overflow: hidden;
  }
  @media (min-width: 1024px) { .whitening-fades__tile { flex: none; max-width: none; } }
  .whitening-fades__tile-media { display: block; width: 100%; aspect-ratio: 1 / 1; background: #EDEDED; }
  @media (min-width: 1024px) { .whitening-fades__tile-media { aspect-ratio: 264 / 232; } }
  .whitening-fades__tile-img,
  .whitening-fades__tile-placeholder { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
  .whitening-fades__tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 45%);
    pointer-events: none;
  }
  .whitening-fades__tile-name {
    position: absolute;
    left: 16px;
    bottom: 14px;
    z-index: 1;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .whitening-fades__caption {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 22px;
    color: var(--wf-sub, #807E7E);
    margin: 0;
    padding-right: 16px;
  }
  @media (min-width: 1024px) { .whitening-fades__caption { font-size: 16px; text-align: center; padding-right: 0; } }

  .whitening-fades__solution { display: flex; flex-direction: column; gap: 20px; }
  @media (min-width: 1024px) { .whitening-fades__solution { gap: 24px; } }
  .whitening-fades__banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-right: 16px;
    aspect-ratio: 358 / 620;
    background: #8B8078;
  }
  @media (min-width: 1024px) {
    .whitening-fades__banner { margin-right: 0; aspect-ratio: 1360 / 560; }
  }
  .whitening-fades__banner-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
  .whitening-fades__banner-img--desk { display: none; }
  .whitening-fades__banner-img--mob { display: block; }
  @media (min-width: 1024px) {
    .whitening-fades__banner-img--desk { display: block; }
    .whitening-fades__banner-img--mob { display: none; }
  }
  .whitening-fades__banner-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 55%);
  }
  @media (min-width: 1024px) {
    .whitening-fades__banner-scrim { background: linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 55%); }
  }
  .whitening-fades__banner-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    padding: 28px;
  }
  @media (min-width: 1024px) {
    .whitening-fades__banner-content { justify-content: center; gap: 16px; padding: 48px clamp(32px, 5vw, 80px); max-width: 55%; }
  }
  .whitening-fades__banner-heading {
    font-family: var(--font-primary--family);
    font-size: 30px;
    line-height: 1.12;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: #FFFFFF;
    margin: 0;
  }
  @media (min-width: 1024px) { .whitening-fades__banner-heading { font-size: 48px; line-height: 1.1; letter-spacing: -1px; } }
  .whitening-fades__banner-text {
    font-family: var(--font-primary--family);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    color: #FFFFFF;
    margin: 0;
  }
  @media (min-width: 1024px) { .whitening-fades__banner-text { font-size: 18px; line-height: 26px; } }
  .whitening-fades__banner-note {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 18px;
    color: rgba(255,255,255,0.8);
    margin: 0;
  }
  @media (min-width: 1024px) { .whitening-fades__banner-note { font-size: 14px; line-height: 20px; max-width: 420px; } }
  .whitening-fades__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    height: 56px;
    padding: 0 32px;
    background: #FFFFFF;
    color: #121212;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 10px;
    width: 100%;
  }
  @media (min-width: 1024px) { .whitening-fades__cta { width: auto; min-width: 300px; } }
/* END_SECTION:whitening-fades */

/* START_SECTION:why-shop (INDEX:95) */
.why-shop {
    background: var(--ws-bg, #FFFFFF);
    color: var(--ws-fg, #000);
    padding: var(--ws-pad-mob, 48px 16px);
  }
  @media (min-width: 1024px) {
    .why-shop { padding: var(--ws-pad-desk, 0 280px 60px); }
  }

  .why-shop__inner {
    max-width: var(--ws-max-desk, none);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  @media (min-width: 1024px) {
    .why-shop__inner { gap: 48px; }
  }

  .why-shop__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    text-align: center;
  }
  @media (min-width: 1024px) {
    .why-shop__head { justify-content: space-between; text-align: left; }
  }

  .why-shop__title {
    font-family: var(--font-primary--family);
    font-size: var(--ws-title-mob, 34px);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.4px;
    color: var(--ws-fg, #000);
    margin: 0;
  }
  @media (min-width: 1024px) {
    .why-shop__title {
      font-size: var(--ws-title-desk, 54px);
      line-height: 1.1;
      letter-spacing: -1px;
    }
  }

  .why-shop__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: #000;
    color: #FFF;
    font-family: var(--font-primary--family);
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity 200ms ease;
  }
  @media (min-width: 1024px) {
    .why-shop__cta { font-size: 18px; line-height: 24px; min-width: 212px; }
  }
  .why-shop__cta:hover { opacity: 0.85; }
  .why-shop__cta--desk { display: none; }
  .why-shop__cta--mob {
    display: inline-flex;
    align-self: center;
    margin-top: 24px;
    min-width: 212px;
  }
  @media (min-width: 1024px) {
    .why-shop__cta--desk { display: inline-flex; }
    .why-shop__cta--mob { display: none; }
  }

  .why-shop__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  @media (min-width: 1024px) {
    .why-shop__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  }

  .why-shop__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 143px;
    padding: 20px;
    background: var(--ws-card-bg, #EAEAEA);
    border-radius: 12px;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .why-shop__card { min-height: 190px; }
  }

  .why-shop__card-deco {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 110%;
    pointer-events: none;
    opacity: 0.8;
    z-index: 0;
  }
  .why-shop__card-deco img { width: 100%; height: auto; display: block; }

  .why-shop__card-icon {
    width: 40px;
    height: 40px;
    background: var(--ws-icon-bg, #121212);
    color: var(--ws-icon-fg, #FFFFFF);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
  }
  .why-shop__card-icon img,
  .why-shop__card-icon svg {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
  }

  .why-shop__card-title {
    font-family: var(--font-primary--family);
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ws-fg, #121212);
    margin: 0;
    position: relative;
    z-index: 1;
  }
/* END_SECTION:why-shop */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:96) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:97) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:flavor-swatches (INDEX:104) */
.flavor-swatches {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .flavor-swatches__dot {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.1);
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  a.flavor-swatches__dot:hover { transform: scale(1.12); }
  .flavor-swatches__dot.is-current { box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 3px #0F022D; }
  .flavor-swatches__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .flavor-swatches__more {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #121212;
  }
  /* Placement per card */
  .product-card__flavors { margin: 8px 0 4px; }
  .site-header__mega-card-flavors { margin: 6px 0 4px; gap: 5px; }
  .site-header__mega-card-flavors .flavor-swatches__dot { width: 20px; height: 20px; }
  .nav-drawer__prod-flavors { margin: 4px 0 2px; gap: 4px; }
  .nav-drawer__prod-flavors .flavor-swatches__dot { width: 18px; height: 18px; }
  .nav-drawer__prod-flavors .flavor-swatches__more { font-size: 9px; }
  @media (prefers-reduced-motion: reduce) {
    .flavor-swatches__dot { transition: none; }
  }
/* END_SNIPPET:flavor-swatches */

/* START_SNIPPET:image (INDEX:109) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */

/* START_SNIPPET:product-card (INDEX:122) */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    /* No explicit height: let the flex/grid track stretch every card to the
       tallest one, so the body can grow and the CTAs bottom-align. */
    height: auto;
    border-radius: 6px;
  }

  .product-card__media {
    position: relative;
    aspect-ratio: 163 / 160;
    background: var(--pc-card-bg, #F3F3F3);
    border-radius: 6px;
    overflow: hidden;
    /* Column so the top banner takes real space and the image starts below
       it rather than running underneath. */
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }
  @media (min-width: 1024px) {
    .product-card__media { aspect-ratio: 272 / 266; }
  }
  .product-card__media-img,
  .product-card__media-placeholder {
    width: 100%;
    /* Fills whatever the banner leaves, instead of the full media height. */
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    object-fit: contain;
    display: block;
  }

  /* Full-width banner across the top of the card — one rule for the bundle's
     "Save X%" strip and the metafield badge on every other variant, so the two
     can't drift apart. The media clips the corners (border-radius + overflow
     hidden), so no rounding is needed here. */
  .product-card__save,
  .product-card__badge {
    /* Corner pill on every card. It used to be a full-width band in flow at
       the top of the media, which read as a ribbon across the photo. */
    position: absolute;
    top: 6px;
    left: 6px;
    right: auto;
    max-width: calc(100% - 12px);
    flex: 0 0 auto;
    /* Same pill as the cart drawer's "El más popular" badge. */
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--font-primary--family);
    font-size: 11px;
    line-height: 14px;
    text-align: left;
    font-weight: 500;
    text-align: center;
    background: var(--pc-badge-bg, #3F83F8);
    color: var(--pc-badge-fg, #FFFFFF);
    z-index: 3;
  }

  .product-card__feature-pill {
    position: absolute;
    bottom: 6px;
    left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 12px);
    padding: 3px 7px 3px 5px;
    background: #FFFFFF;
    color: #000000;
    border-radius: 18px;
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 13px;
    font-weight: 400;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 2;
  }
  .product-card__feature-pill svg {
    width: 12px;
    height: 12px;
    color: #000;
    flex-shrink: 0;
  }
  @media (min-width: 1024px) {
    .product-card__feature-pill {
      bottom: 8px;
      left: 8px;
      padding: 3px 8px 3px 6px;
      font-size: 12px;
      line-height: 14px;
    }
    .product-card__feature-pill svg {
      width: 14px;
      height: 14px;
    }
  }

  /* Body grows so the CTA sits at the bottom, aligning CTAs across a row/track. */
  .product-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 0 0;
  }
  @media (min-width: 1024px) {
    .product-card__body { gap: 8px; }
  }

  /* The alt image is stacked over the first and revealed on hover. Both are
     absolute so the media box keeps its aspect-ratio height either way. */
  .product-card__media-img--alt {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
  }
  @media (hover: hover) {
    .product-card__media:hover .product-card__media-img--alt { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .product-card__media-img--alt { transition: none; }
  }

  .product-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2BB673;
    padding-top: 12px;
    padding-bottom: 2px;
  }
  .product-card__stars { display: block; flex-shrink: 0; width: 66px; height: auto; }
  /* Grey rank underneath, the green one clipped to the real score on top. */
  .product-card__stars-wrap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
  .product-card__stars-empty { display: block; color: #E5E5E5; }
  .product-card__stars-filled { position: absolute; top: 0; left: 0; width: var(--pc-stars-fill, 100%); overflow: hidden; white-space: nowrap; color: #2BB673; }
  .product-card__stars-filled .product-card__stars { max-width: none; }
  /* No reviews yet: keep the row's height so the cards in a row stay aligned. */
  .product-card__rating--none { min-height: 31px; }
  @media (min-width: 1024px) { .product-card__rating--none { min-height: 32px; } }
  @media (min-width: 1024px) { .product-card__stars { width: 78px; } }
  .product-card__rating-count {
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 17px;
    font-weight: 400;
    color: #605F5F;
  }
  @media (min-width: 1024px) {
    .product-card__rating-count { font-size: 14px; line-height: 18px; }
  }
  .product-card__title {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #121212;
    margin: 0;
    padding-top: 4px;
  }
  @media (min-width: 1024px) {
    .product-card__title { font-size: 20px; line-height: 26px; }
  }
  .product-card__title a { color: inherit; text-decoration: none; }

  .product-card__tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    background: rgba(33, 33, 33, 0.05);
    padding: 4px 9px;
    border-radius: 999px;
    margin: 10px 0;
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 14px;
    color: #121212;
  }
  @media (min-width: 1024px) {
    .product-card__tag {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 18px;
    }
  }

  /* Pills, not a bulleted box: each feature carries its own background and
     they wrap onto the next row. Wrapping rather than scrolling — the card
     has a fixed width, so a scroller would hide features behind an edge with
     nothing to signal them. */
  /* Hidden for now — the badge still renders so it can be brought back by
     dropping this rule. */
  .product-card__feature-pill { display: none; }

  .product-card__features {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-self: flex-start;
    background: none;
    padding: 0;
    border-radius: 0;
    margin: 10px 0;
  }
  .product-card__feature-line {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(33, 33, 33, 0.05);
    padding: 4px 9px;
    border-radius: 999px;
    font-family: var(--font-primary--family);
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;
    color: #121212;
    margin: 0;
  }
  .product-card__feature-icon {
    display: inline-flex;
    flex-shrink: 0;
    color: #3F83F8;
  }
  .product-card__feature-icon svg { display: block; }
  @media (min-width: 1024px) {
    .product-card__features { gap: 6px; }
    .product-card__feature-line {
      padding: 4px 8px;
      font-size: 12px;
      line-height: 18px;
    }
  }

  .product-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 2px;
    padding-bottom: 9px;
  }
  .product-card__price-current {
    font-family: var(--font-primary--family);
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: #1C1C1E;
  }
  @media (min-width: 1024px) {
    .product-card__price {
      margin-top: 4px;
    }
    .product-card__price-current { font-size: 17px; line-height: 19.353px; }
  }
  .product-card__price-compare {
    font-family: var(--font-primary--family);
    font-size: 12px;
    line-height: 14px;
    color: #A7A7A7;
    text-decoration: line-through;
  }

  .product-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 12px;
    background: #000000;
    color: #FFFFFF;
    font-family: var(--font-primary--family);
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    box-shadow: 0 0.744px 2.233px rgba(0, 0, 0, 0.1), 0 0.744px 1.489px rgba(0, 0, 0, 0.1);
    transition: opacity 200ms ease;
  }
  .product-card__cta:hover { opacity: 0.85; }
  @media (min-width: 1024px) {
    .product-card__cta {
      min-height: 45px;
      padding: 0 16px;
      font-size: 14px;
      line-height: normal;
    }
  }

  /* ---- Bundle variant overrides ---- */
  .product-card--bundle .product-card__media { aspect-ratio: 1 / 1; }
  @media (min-width: 1024px) {
    .product-card--bundle .product-card__media { aspect-ratio: 272 / 266; }
    /* Badge moves to top-left with pill rounding on desktop. */
    .product-card__badge {
      top: 10px;
      left: 10px;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 15px;
    }
    .product-card--bundle .product-card__feature-pill {
      bottom: 12px;
      left: 12px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      line-height: 16px;
      font-weight: 500;
    }
  }
  /* Phones: no feature chips — stars, title, price and the button are the
     card; the chips made every card a different height and the grid busy. */
  @media (max-width: 1023px) {
    .product-card__features,
    .product-card__tag { display: none; }
  }
/* END_SNIPPET:product-card */