/** Shopify CDN: Minification failed

Line 1456:20 Unexpected "{"
Line 1456:29 Expected ":"
Line 1459:20 Unexpected "{"
Line 1459:29 Expected ":"
Line 1465:20 Unexpected "{"
Line 1465:29 Expected ":"
Line 1468:20 Unexpected "{"
Line 1468:29 Expected ":"
Line 1472:20 Unexpected "{"
Line 1472:29 Expected ":"
... and 70 more hidden warnings

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:cart-drawer (INDEX:5) */
.cart-drawer__express {
    display: grid;
    gap: 0.5rem;
  }

  .cart-drawer__express-divider {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .cart-drawer__express-divider::before,
  .cart-drawer__express-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(var(--text-color) / 0.18);
  }

  /* SFB: replace the theme's slide-wipe hover on the checkout button with a
     modern scale + soft glow. We override the default two-layer gradient so the
     fill stays solid (no wipe), then layer transform + box-shadow on hover. */
  .cart-drawer__footer button[name="checkout"] {
    background-image: linear-gradient(rgb(var(--button-background)), rgb(var(--button-background)));
    background-size: 100% 100%;
    background-position: 0 0;
    transition:
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s ease,
      color 0.2s ease,
      border-color 0.2s ease;
    transform-origin: center;
    will-change: transform;
  }

  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cart-drawer__footer button[name="checkout"]:not([disabled]):hover {
      background-size: 100% 100%;
      background-position: 0 0;
      color: rgb(var(--button-text-color));
      border-color: rgb(var(--button-background));
      transform: scale(1.015);
      box-shadow:
        0 10px 28px -10px rgb(var(--button-background) / 0.55),
        0 0 0 1px rgb(var(--button-background) / 0.12);
    }
    .cart-drawer__footer button[name="checkout"]:not([disabled]):active {
      transform: scale(0.995);
      transition-duration: 0.1s;
    }
  }

  /* SFB: lay the wallet buttons (Shop Pay / PayPal / Google Pay) side-by-side
     instead of the Shopify default vertical stack. */
  .cart-drawer__express .additional-checkout-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
  }
  .cart-drawer__express .additional-checkout-buttons > * {
    flex: 1 1 0;
    min-width: 0;
  }
  .cart-drawer__express .additional-checkout-buttons shopify-accelerated-checkout,
  .cart-drawer__express .additional-checkout-buttons shopify-accelerated-checkout-cart {
    flex: 1 1 0;
    --shopify-accelerated-checkout-row-gap: 0.5rem;
  }

  .cart-drawer__express-divider span {
    font-size: 0.5625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgb(var(--text-color) / 0.6);
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:countdown-condensed (INDEX:9) */
@media screen and (max-width: 699px) {
    .countdown-condensed {
      flex-direction: column;
      column-gap: 0;
      row-gap: 0.4rem;
      justify-content: center;
      text-align: center;
      padding: 0.5rem var(--container-gutter);
    }

    .countdown-condensed__text {
      width: 100%;
      justify-content: center;
      text-align: center;
      gap: 0.25rem 0.5rem;
    }

    .countdown-condensed__text .prose,
    .countdown-condensed__text .h6 {
      text-align: center;
      line-height: 1.45;
      letter-spacing: 0.14em;
    }

    .countdown-condensed__text a,
    .countdown-condensed__text u {
      white-space: nowrap;
    }

    .countdown-condensed__timer {
      column-gap: 0.4rem;
      justify-content: center;
    }

    .countdown-condensed__timer-item {
      gap: 0.25em;
    }
  }
/* END_SECTION:countdown-condensed */

/* START_SECTION:sfb-atelier-favorites (INDEX:55) */
.sfb-fc {
    padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(64px, 7vw, 100px);
    background: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: #1A0F0A;
  }
  .sfb-fc__inner { max-width: 1648px; margin: 0 auto; }

  .sfb-fc__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 36px;
    position: relative;
  }
  .sfb-fc__title-block {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sfb-fc__eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #3D6357;
  }
  .sfb-fc__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(38px, 4vw, 42px);
    font-weight: 500;
    color: #1A0F0A;
    letter-spacing: -0.01em;
    /* line-height 1 clipped descenders ("g", "p", "y") on mobile when the
       title-block container had a tight overflow. 1.15 gives breathing room
       without changing the visual rhythm meaningfully on desktop. */
    line-height: 1.15;
    margin: 0;
    overflow: visible;
  }
  .sfb-fc__subtitle {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 15px;
    font-style: italic;
    color: #5a514c;
    margin-top: 4px;
    letter-spacing: 0.005em;
  }
  .sfb-fc__tabs {
    display: flex;
    gap: clamp(20px, 3vw, 48px);
    align-items: center;
  }
  .sfb-fc__tab {
    background: none;
    border: 0;
    padding: 0 0 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #5a514c;
    cursor: pointer;
    transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  .sfb-fc__tab::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%; bottom: 0;
    height: 1px;
    background: #1A0F0A;
    transition:
      left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      right 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sfb-fc__tab:hover { color: #1A0F0A; }
  .sfb-fc__tab.is-active { color: #1A0F0A; }
  .sfb-fc__tab.is-active::after { left: 0; right: 0; }

  .sfb-fc__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .sfb-fc-pt {
    display: flex;
    flex-direction: column;
  }
  .sfb-fc-pt__media {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 16px;
  }
  .sfb-fc-pt__image {
    aspect-ratio: 1 / 1;
    /* Warm cream that matches typical product-photo backdrops so any seam
       between source-image padding and the card disappears. */
    background: #F5F0E8;
    display: block;
    overflow: hidden;
    position: relative;
  }
  .sfb-fc-pt__img {
    /* !important beats the HTML width/height attributes that `image_tag`
       writes, which otherwise win over CSS in some renderers and leave the
       image rendered at its intrinsic size centered in the card. */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Subtle empty-state hint when no image is set on a card. */
  .sfb-fc-pt__image:not(:has(img))::before {
    content: '';
    position: absolute;
    inset: 32px;
    border: 1px dashed rgba(26, 15, 10, 0.18);
  }
  .sfb-fc-pt__media:hover .sfb-fc-pt__img,
  .sfb-fc-pt__media:focus-visible .sfb-fc-pt__img {
    transform: scale(1.04);
  }
  .sfb-fc-pt__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .sfb-fc-pt__badge span {
    background: #FFFFFF;
    color: #1A0F0A;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 4px 8px;
  }
  .sfb-fc-pt__badge .is-new {
    background: #B8CDBE;
    color: #1A0F0A;
  }

  .sfb-fc-pt__details {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .sfb-fc-pt__subtitle {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: #5a514c;
    margin: 0;
  }
  .sfb-fc-pt__name {
    font-size: 15px;
    font-weight: 500;
    color: #1A0F0A;
    margin: 0;
    line-height: 1.3;
  }
  .sfb-fc-pt__name a {
    color: inherit;
    text-decoration: none;
  }
  .sfb-fc-pt__price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
  }
  .sfb-fc-pt__price {
    font-size: 14px;
    font-weight: 500;
    color: #1A0F0A;
  }
  .sfb-fc-pt__sep { color: #E8DED0; }
  .sfb-fc-pt__quick {
    background: none;
    border: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #1A0F0A;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
  }
  .sfb-fc-pt__quick:hover { color: #3D6357; }
  .sfb-fc-pt__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    color: #5a514c;
  }
  .sfb-fc-pt__stars {
    color: #B08A4A;
    letter-spacing: 1px;
    font-size: 12px;
  }
  .sfb-fc-pt__stars--empty { color: #E8DED0; }

  /* Coming Soon variant — desktop full-width Notify Me button + sand badge */
  .sfb-fc-pt__price-row--soon { display: flex; }
  .sfb-fc-pt--soon .sfb-fc-pt__quick {
    flex: 1;
    padding: 12px 18px;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    color: #5a514c;
    border: 1px solid #E8DED0;
    background: transparent;
    transition:
      color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sfb-fc-pt--soon .sfb-fc-pt__quick:hover,
  .sfb-fc-pt--soon .sfb-fc-pt__quick:focus-visible {
    color: #FFFFFF;
    border-color: #1A0F0A;
    background: #1A0F0A;
  }
  .sfb-fc-pt--soon .sfb-fc-pt__badge span {
    background: #E8DED0;
    color: #1A0F0A;
  }

  .sfb-fc__mobile-foot { display: none; }
  .sfb-fc__shop-all { display: none; }

  @media (max-width: 1100px) {
    .sfb-fc__grid { grid-template-columns: repeat(2, 1fr); }
    .sfb-fc__header { flex-direction: column; }
    .sfb-fc__title-block {
      position: static;
      transform: none;
      align-items: center;
      text-align: center;
      margin-bottom: 20px;
    }
  }

  /* Mobile: single-card swiper layout with peek of next card */
  @media (max-width: 768px) {
    .sfb-fc { padding: 28px 0 36px; }
    .sfb-fc__inner { padding: 0; max-width: none; }
    .sfb-fc__header { display: block; margin-bottom: 0; padding: 0 24px; }
    .sfb-fc__title-block {
      position: static;
      transform: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 4px;
      margin-bottom: 24px;
      padding-top: 8px;
    }
    .sfb-fc__title-block .sfb-fc__eyebrow { font-size: 10px; }
    .sfb-fc__title-block .sfb-fc__title { font-size: 38px; }
    .sfb-fc__title-block .sfb-fc__subtitle { font-size: 14px; }

    .sfb-fc__tabs {
      gap: 36px;
      justify-content: flex-start;
      padding-bottom: 0;
      border-bottom: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .sfb-fc__tabs::-webkit-scrollbar { display: none; }
    .sfb-fc__tab {
      font-size: 13px;
      letter-spacing: 0.06em;
      padding-bottom: 8px;
      text-transform: uppercase;
      font-weight: 600;
      flex-shrink: 0;
      color: #5a514c;
    }
    .sfb-fc__tab::after {
      background: #B56442;
      height: 3px;
      left: 50%; right: 50%;
    }
    .sfb-fc__tab.is-active { color: #1A0F0A; }
    .sfb-fc__tab.is-active::after { left: 0; right: 0; }

    .sfb-fc__grid {
      display: flex;
      grid-template-columns: none;
      gap: 0;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 24px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 24px 0 0;
    }
    .sfb-fc__grid::-webkit-scrollbar { display: none; }
    .sfb-fc-pt {
      flex: 0 0 88%;
      scroll-snap-align: start;
      padding: 0 12px 0 24px;
    }
    .sfb-fc-pt:last-child { padding-right: 24px; }
    .sfb-fc-pt__image {
      aspect-ratio: 1 / 1;
      margin-bottom: 22px;
    }
    .sfb-fc-pt__media { margin-bottom: 0; }
    .sfb-fc-pt__badge {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      top: 14px;
      left: 14px;
    }
    .sfb-fc-pt__badge span {
      font-size: 10.5px;
      padding: 7px 14px;
      letter-spacing: 0.1em;
      font-weight: 600;
    }
    .sfb-fc-pt__details { gap: 10px; }
    .sfb-fc-pt__subtitle {
      display: block;
      order: 2;
      font-size: 12.5px;
      font-weight: 300;
      color: #5a514c;
      margin-top: 2px;
    }
    .sfb-fc-pt__name {
      order: 1;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.3;
      margin-bottom: 0;
      color: #1A0F0A;
    }

    /* Mobile: single outlined Quick Add bar with `|` separator + espresso-fill hover.
       Coming Soon shares the same outlined treatment (its sand-bordered button is desktop-only). */
    .sfb-fc-pt__price-row {
      display: flex;
      align-items: stretch;
      gap: 0;
      margin-top: 16px;
      width: 100%;
      flex-direction: row;
      order: 3;
      border: 1px solid #1A0F0A;
      transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-fc-pt__price-row:hover { background: #1A0F0A; }
    .sfb-fc-pt__price-row:hover .sfb-fc-pt__price,
    .sfb-fc-pt__price-row:hover .sfb-fc-pt__sep,
    .sfb-fc-pt__price-row:hover .sfb-fc-pt__quick {
      color: #FFFFFF;
    }
    .sfb-fc-pt__price-row:hover .sfb-fc-pt__sep { opacity: 0.5; }
    .sfb-fc-pt__price {
      flex: 0 0 auto;
      border: 0;
      padding: 14px 4px 14px 22px;
      font-size: 15px;
      font-weight: 600;
      display: flex;
      align-items: center;
      color: #1A0F0A;
      transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-fc-pt__sep {
      display: flex;
      align-items: center;
      padding: 0 8px;
      font-size: 14px;
      font-weight: 300;
      color: #1A0F0A;
      opacity: 0.3;
      transition:
        color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-fc-pt__quick {
      flex: 1;
      border: 0;
      padding: 14px 18px;
      text-decoration: none;
      font-size: 13px;
      letter-spacing: 0.16em;
      text-align: center;
      background: transparent;
      color: #1A0F0A;
      font-weight: 600;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-fc-pt__quick::before { content: none; }
    /* Coming Soon mobile: ride along with the espresso-outline row (no sand desktop border). */
    .sfb-fc-pt--soon .sfb-fc-pt__quick { color: #1A0F0A; }

    .sfb-fc-pt__rating {
      order: 4;
      margin-top: 16px;
      font-size: 13px;
      justify-content: flex-start;
    }
    .sfb-fc-pt__stars {
      font-size: 17px;
      letter-spacing: 2px;
      color: #5B7E6F;
    }
    .sfb-fc-pt__stars--empty { color: #E8DED0; }

    .sfb-fc__mobile-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 24px 0;
    }
    .sfb-fc__dots {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .sfb-fc__dots button {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      border: 1px solid #1A0F0A;
      background: transparent;
      padding: 0;
      cursor: pointer;
      transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-fc__dots button.is-active { background: #1A0F0A; }
    .sfb-fc__shop-all {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #1A0F0A;
      text-decoration: none;
    }
    .sfb-fc__shop-all svg {
      width: 12px;
      height: 12px;
    }
  }
/* END_SECTION:sfb-atelier-favorites */

/* START_SECTION:sfb-corner-popup (INDEX:57) */
/* All rules scoped to .sfb-corner so they survive any DOM moves. */
  .sfb-corner {
    --sfb-corner-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --sfb-corner-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 90;                        /* below mega menu (z:120), above page content */
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: var(--sfb-corner-accent);
    color: #fff;
    font-family: var(--text-font-family);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1;
    border: 0;
    border-radius: 0;
    box-shadow:
      0 14px 32px -10px rgba(64, 62, 57, 0.35),
      0 4px 10px -4px rgba(64, 62, 57, 0.25);
    cursor: pointer;
    transform: translateY(0);
    transition:
      transform 0.25s var(--sfb-corner-ease-out),
      background-color 0.2s var(--sfb-corner-ease),
      box-shadow 0.25s var(--sfb-corner-ease),
      opacity 0.2s var(--sfb-corner-ease);
  }
  .sfb-corner:hover {
    background: var(--sfb-corner-accent-dark);
    transform: translateY(-2px);
    box-shadow:
      0 18px 40px -10px rgba(64, 62, 57, 0.4),
      0 6px 14px -4px rgba(64, 62, 57, 0.3);
  }
  .sfb-corner:focus-within {
    outline: 2px solid #fff;
    outline-offset: -4px;
  }

  .sfb-corner__cta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 22px;
    gap: 3px;
    text-align: left;
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
  }
  .sfb-corner__big {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1;
  }
  .sfb-corner__sub {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.16em;
    line-height: 1;
    opacity: 0.85;
    text-transform: uppercase;
  }
  .sfb-corner__close {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: rgba(0, 0, 0, 0.10);
    color: #fff;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background-color 0.15s var(--sfb-corner-ease);
  }
  .sfb-corner__close:hover { background: rgba(0, 0, 0, 0.22); }
  .sfb-corner__close svg {
    width: 12px;
    height: 12px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
  }

  /* Hidden state — used before reveal AND after dismiss. */
  .sfb-corner.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
  }
  .sfb-corner.is-revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Mobile — anchor to bottom-LEFT and float above sticky ATC (72px + safe-area). */
  @media (max-width: 699px) {
    .sfb-corner {
      right: auto;
      left: 14px;
      bottom: calc(72px + env(safe-area-inset-bottom, 0) + 14px);
    }
    .sfb-corner__cta { padding: 12px 16px; }
    .sfb-corner__big { font-size: 12px; letter-spacing: 0.18em; }
    .sfb-corner__sub { font-size: 9.5px; letter-spacing: 0.14em; }
    .sfb-corner__close { width: 32px; }
    .sfb-corner__close svg { width: 11px; height: 11px; }
    .sfb-corner.is-hidden { transform: translate(-12px, 16px); }
  }

  @media (prefers-reduced-motion: reduce) {
    .sfb-corner,
    .sfb-corner__close { transition: none; }
  }
/* END_SECTION:sfb-corner-popup */

/* START_SECTION:sfb-hero (INDEX:59) */
.sfb-hero {
    background: #FFFFFF;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: #1A0F0A;
  }
  .sfb-hero__wrap {
    padding: 0 64px;
    background: #FFFFFF;
  }
  .sfb-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
    background: #1A0F0A;
  }
  .sfb-hero__track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    /* Tell the browser: user owns vertical scroll, JS owns horizontal swipe.
       Without this, iOS/Chrome can consume the horizontal pan (e.g. swipe-back)
       before our touch handler fires, which is the usual "swipe doesn't work"
       symptom on mobile carousels. */
    touch-action: pan-y;
  }
  .sfb-hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 600px;
    overflow: hidden;
    touch-action: pan-y;
  }

  .sfb-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Prevent iOS long-press image callout / native drag from stealing the
       swipe gesture mid-drag. */
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    user-select: none;
    pointer-events: none;
  }
  /* Single <picture> per slide — no class-based show/hide needed. */

  .sfb-hero__content--desktop {
    position: absolute;
    top: 50%;
    right: 64px;
    transform: translateY(-50%);
    width: 718px;
    max-width: 50%;
    text-align: left;
    z-index: 2;
    color: #FFFFFF;
  }
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--desktop { color: #1A0F0A; }

  .sfb-hero__content--desktop .sfb-hero__eyebrow {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 18px;
    color: inherit;
  }
  .sfb-hero__content--desktop .sfb-hero__title {
    font-family: inherit;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: 0.005em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 22px;
    color: inherit;
  }
  .sfb-hero__content--desktop .sfb-hero__desc {
    color: inherit;
    max-width: 560px;
  }
  .sfb-hero__content--desktop .sfb-hero__desc p {
    font-family: inherit;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    color: inherit;
  }
  .sfb-hero__content--desktop .sfb-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 28px;
    margin-top: 32px;
    background: #1A0F0A;
    color: #FFFFFF;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
  }
  .sfb-hero__content--desktop .sfb-hero__btn:hover { background: #3D6357; }
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--desktop .sfb-hero__btn:hover { background: #3D6357; color: #FFFFFF; }

  /* Light-mode slide button — outlined pink CTA mirroring the announce-bar
     "View Promo" treatment (transparent bg + 1px border + uppercase tracking).
     Currently scoped to the Mother's Day slide via [data-color="light"]. */
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--desktop .sfb-hero__btn,
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn {
    background: transparent;
    color: #C49595;
    border: 1px solid #C49595;
    font-weight: 500;
    letter-spacing: 0.22em;
    font-size: 10.5px;
    height: 40px;
    padding: 0 22px;
  }
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--desktop .sfb-hero__btn:hover,
  .sfb-hero__slide[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn:hover {
    background: rgba(196, 149, 149, 0.15);
    border-color: #D9B3B3;
    color: #D9B3B3;
  }

  .sfb-hero__content--mobile { display: none; }

  /* Spa Ritual Set slide (block "crystal-file") — push desktop content
     higher up the slide so the long body copy doesn't sit too low. The
     base rule centers content at 50% of slide height; we shift it to 30%
     so the box's vertical center anchors to roughly the upper third. */
  .sfb-hero__slide--crystal-file .sfb-hero__content--desktop {
    top: 30%;
  }

  /* Lumicet "The Restorative Cream" slide (block "cuticle-serum" —
     legacy ID) — slight upward shift; sits lower than crystal-file
     because the bottle on the left is shorter and the green wall above
     reads as empty when the text rides too high. */
  .sfb-hero__slide--cuticle-serum .sfb-hero__content--desktop {
    top: 42%;
  }

  /* Slide 2 (block "hand-balm") image focal point — picked via
     .tmp/playground/slide-2-focal.html. Targets by block ID class so the
     rule survives the carousel's infinite-loop clones (which preserve
     classes but get aria-hidden injected at runtime). */
  .sfb-hero__slide--hand-balm .sfb-hero__img {
    object-position: 39% 17%;
  }

  /* Slide 2 (hand-balm) CTA — solid white fill with dark text. */
  .sfb-hero__slide--hand-balm .sfb-hero__btn {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #1A0F0A !important;
    border: none !important;
  }
  .sfb-hero__slide--hand-balm .sfb-hero__btn:hover {
    background: #F2EDE3 !important;
    color: #1A0F0A !important;
  }

  /* Slide 3 (crystal-file) CTA — solid white fill with espresso text, same
     pattern as hand-balm. Wins over color-scheme button defaults via the
     chained content-wrapper selector + !important. */
  .sfb-hero__slide--crystal-file .sfb-hero__content--desktop .sfb-hero__btn,
  .sfb-hero__slide--crystal-file .sfb-hero__content--mobile .sfb-hero__btn {
    background: #FFFFFF !important;
    background-image: none !important;
    background-color: #FFFFFF !important;
    color: #1A0F0A !important;
    border: none !important;
  }
  .sfb-hero__slide--crystal-file .sfb-hero__content--desktop .sfb-hero__btn:hover,
  .sfb-hero__slide--crystal-file .sfb-hero__content--mobile .sfb-hero__btn:hover {
    background: #F2EDE3 !important;
    background-color: #F2EDE3 !important;
    color: #1A0F0A !important;
  }

  /* Crystal-file mobile CTA — compact "Shop" pill, narrower than the
     default 50x large mobile button. Desktop unaffected. */
  @media (max-width: 768px) {
    .sfb-hero__slide--crystal-file .sfb-hero__content--mobile .sfb-hero__btn {
      height: 40px;
      padding: 0 22px;
      font-size: 11.5px;
      letter-spacing: 0.2em;
    }

    /* Hand-balm mobile — pin copy to the right edge so the bottle fills the
     left side of the frame. Title intentionally breaks after "Botanic" via
     a newline in mobile_title (rendered through `newline_to_br`), so the
     stacked layout reads BOTANIC / CUTICLE SERUM at the default 32px. */
    .sfb-hero__slide--hand-balm .sfb-hero__content--mobile {
      left: auto;
      right: 28px;
      max-width: 88%;
      text-align: right;
    }
    .sfb-hero__slide--hand-balm .sfb-hero__content--mobile .sfb-hero__desc p {
      margin-left: auto;
    }
  }

  /* Mobile focal points — picked via .tmp/playground/mobile-focal-all-slides.html. */
  @media screen and (max-width: 699px) {
    .sfb-hero__slide--mothers-day .sfb-hero__img {
      object-position: 17% 73%;
    }
    .sfb-hero__slide--hand-balm .sfb-hero__img {
      object-position: 74% 55%;
    }
    .sfb-hero__slide--crystal-file .sfb-hero__img {
      object-position: 41% 58%;
    }
    .sfb-hero__slide--cuticle-serum .sfb-hero__img {
      object-position: 24% 66%;
    }
  }

  /* Mothers-day slide headline — deeper near-black so the heading reads
     bolder against the photo than the default light-mode espresso. */
  .sfb-hero__slide--mothers-day .sfb-hero__content--desktop .sfb-hero__title,
  .sfb-hero__slide--mothers-day .sfb-hero__content--mobile .sfb-hero__title {
    color: #231815;
  }

  /* Mothers-day desktop content — nudge slightly right so the copy column
     sits closer to the woman's silhouette focal point. */
  .sfb-hero__slide--mothers-day .sfb-hero__content--desktop {
    right: 40px;
  }

  /* Mothers-day slide CTA — solid rose fill, no trim. The chained
     content-wrapper selector raises specificity above the color-scheme
     button defaults that were winning at 0,2,0 + !important and tinting
     the button espresso. */
  .sfb-hero__slide--mothers-day .sfb-hero__content--desktop .sfb-hero__btn,
  .sfb-hero__slide--mothers-day .sfb-hero__content--mobile .sfb-hero__btn,
  .sfb-hero__slide--mothers-day[data-color="light"] .sfb-hero__content--desktop .sfb-hero__btn,
  .sfb-hero__slide--mothers-day[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn {
    background: #C9A6A1 !important;
    background-image: none !important;
    background-color: #C9A6A1 !important;
    color: #231815 !important;
    border: none !important;
  }
  .sfb-hero__slide--mothers-day .sfb-hero__content--desktop .sfb-hero__btn:hover,
  .sfb-hero__slide--mothers-day .sfb-hero__content--mobile .sfb-hero__btn:hover,
  .sfb-hero__slide--mothers-day[data-color="light"] .sfb-hero__content--desktop .sfb-hero__btn:hover,
  .sfb-hero__slide--mothers-day[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn:hover {
    background: #B3908A !important;
    background-color: #B3908A !important;
    color: #231815 !important;
  }

  .sfb-hero__pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    z-index: 3;
  }
  /* 44x44 invisible hit zone with the visible 6px dot painted via the inner
     content-box (so the visual stays small/minimal while the tap area meets
     WCAG 2.5.5 AA). Border + fill apply only to the painted dot. Inactive
     ring is 60% white so it reads as a hushed indicator rather than a row of
     bold rings; active fills solid white. */
  .sfb-hero__bullet {
    width: 44px;
    height: 44px;
    padding: 19px;
    box-sizing: border-box;
    background: transparent;
    background-clip: content-box;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
  }
  .sfb-hero__bullet::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-sizing: border-box;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sfb-hero__bullet.is-active::before {
    background: #FFFFFF;
    border-color: #FFFFFF;
  }

  .sfb-hero__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0);
    color: #FFFFFF;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sfb-hero__nav:hover { background: rgba(255, 255, 255, 0.18); }
  .sfb-hero__nav svg { width: 20px; height: 20px; }
  .sfb-hero__nav--prev { left: 24px; }
  .sfb-hero__nav--next { right: 24px; }

  @media (max-width: 900px) {
    .sfb-hero__wrap { padding: 0 24px; }
  }

  @media (max-width: 768px) {
    .sfb-hero__slide {
      height: auto;
      aspect-ratio: 640 / 900;
    }
    /* Single <picture> per slide — no toggle needed. */

    .sfb-hero__content--desktop { display: none; }
    .sfb-hero__content--mobile {
      display: block;
      position: absolute;
      top: 56px;
      left: 28px;
      right: 28px;
      text-align: left;
      z-index: 2;
      color: #FFFFFF;
    }
    .sfb-hero__slide[data-color="light"] .sfb-hero__content--mobile { color: #1A0F0A; }
    .sfb-hero__content--mobile .sfb-hero__eyebrow {
      font-family: inherit;
      font-size: 11.5px;
      line-height: 1.2;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      margin: 0 0 10px;
      color: inherit;
    }
    .sfb-hero__content--mobile .sfb-hero__title {
      font-family: inherit;
      font-size: 32px;
      line-height: 1;
      letter-spacing: 0;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0 0 12px;
      color: inherit;
      max-width: 100%;
    }
    .sfb-hero__content--mobile .sfb-hero__desc { color: inherit; }
    .sfb-hero__content--mobile .sfb-hero__desc p {
      font-family: inherit;
      font-size: 15px;
      line-height: 1.35;
      font-weight: 400;
      margin: 0 0 18px;
      color: inherit;
      max-width: 92%;
    }
    .sfb-hero__content--mobile .sfb-hero__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      padding: 0 38px;
      background: #FFFFFF;
      color: #1A0F0A;
      border: 0;
      border-radius: 0;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .sfb-hero__content--mobile .sfb-hero__btn:hover {
      background: #F2EDE3;
      color: #1A0F0A;
    }
    .sfb-hero__slide[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn {
      background: #1A0F0A;
      color: #FFFFFF;
    }
    .sfb-hero__slide[data-color="light"] .sfb-hero__content--mobile .sfb-hero__btn:hover {
      background: #3D6357;
      color: #FFFFFF;
    }

    .sfb-hero__pagination { bottom: 6px; }
    /* Mobile-only: shrink the painted dot from 10px to 5px and soften the
       inactive border to 40% espresso so the indicator reads as a quiet
       hint rather than a row of bold rings. The 44x44 invisible hit zone
       (set on .sfb-hero__bullet at line 351) is unchanged, so tap target
       remains WCAG-compliant. */
    .sfb-hero__bullet::before {
      width: 5px;
      height: 5px;
      margin: -2.5px 0 0 -2.5px;
      border-color: rgba(26, 15, 10, 0.4);
    }
    .sfb-hero__bullet.is-active::before {
      background: #1A0F0A;
      border-color: #1A0F0A;
    }

    .sfb-hero__nav { display: none; }
  }

  @media (max-width: 600px) {
    .sfb-hero__wrap { padding: 0; }
  }
/* END_SECTION:sfb-hero */

/* START_SECTION:sfb-product-crystal (INDEX:61) */
/* === Anatomy (V-A) =================================================== */
  .sfb-cf-anatomy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .sfb-cf-anatomy { grid-template-columns: 1fr 1fr; gap: 80px; }
  }
  .sfb-cf-anatomy__list { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
  .sfb-cf-anatomy__row { display: grid; grid-template-columns: 32px 1fr; gap: 18px; align-items: start; }
  .sfb-cf-anatomy__n {
    font-style: italic;
    font-size: 18px;
    color: #5B7E6F;
    letter-spacing: 0.02em;
    padding-top: 2px;
  }
  .sfb-cf-anatomy__t { font-weight: 500; font-size: 16px; line-height: 1.4; margin: 0 0 4px; }
  .sfb-cf-anatomy__d { font-size: 14px; line-height: 1.55; color: #6b6058; margin: 0; }

  .sfb-cf-anatomy__stage {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #faf8f4;
  }
  .sfb-cf-anatomy__stage img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .sfb-cf-anatomy__pin {
    position: absolute;
    left: var(--pin-x, 50%); top: var(--pin-y, 50%);
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #1A0F0A;
    font-size: 12px;
    font-weight: 600;
    display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(26, 15, 10, 0.18);
    transition: transform 200ms ease-out;
  }
  .sfb-cf-anatomy__pin:hover { transform: translate(-50%, -50%) scale(1.1); }

  /* === For Whom (V-F) ================================================== */
  .sfb-cf-fw {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  @media (min-width: 700px) { .sfb-cf-fw { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1150px) { .sfb-cf-fw { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
  .sfb-cf-fw__card {
    padding: 32px 28px;
    background: #faf8f4;
    border: 1px solid rgba(26, 15, 10, 0.06);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sfb-cf-fw__ey {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #5B7E6F;
    margin: 0;
  }
  .sfb-cf-fw__t {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 22px;
    line-height: 1.25;
    color: #1A0F0A;
    margin: 0;
  }
  .sfb-cf-fw__t em { font-style: italic; color: #5B7E6F; }
  .sfb-cf-fw__d { font-size: 14px; line-height: 1.55; color: #6b6058; margin: 0; }

  /* === Sustainability (V-E) ============================================ */
  .sfb-cf-sustain {
    display: grid;
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .sfb-cf-sustain { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 96px; }
  }
  .sfb-cf-sustain__stat {
    padding: 48px 32px;
    background: #faf8f4;
    border-radius: 4px;
    text-align: center;
  }
  .sfb-cf-sustain__big {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: clamp(72px, 12vw, 144px);
    line-height: 1;
    color: #1A0F0A;
    margin: 12px 0 4px;
  }
  .sfb-cf-sustain__big em {
    font-style: italic;
    color: #5B7E6F;
    font-size: 1.25em;
  }
  .sfb-cf-sustain__big-unit {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6b6058;
    margin: 0 0 28px;
  }
  .sfb-cf-sustain__stack {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    margin: 24px auto 0;
    max-width: 360px;
    opacity: 0.55;
  }
  .sfb-cf-sustain__em {
    flex: 1;
    background: #5B7E6F;
    height: var(--h, 50%);
    border-radius: 1px;
    transform-origin: bottom;
  }
  .sfb-cf-sustain__numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-top: 36px;
  }
  .sfb-cf-sustain__num-v {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 40px;
    line-height: 1;
    color: #1A0F0A;
    margin: 0 0 6px;
  }
  .sfb-cf-sustain__num-v em {
    font-style: italic;
    color: #5B7E6F;
    font-size: 0.6em;
    margin-left: 2px;
  }
  .sfb-cf-sustain__num-l {
    font-size: 13px;
    line-height: 1.45;
    color: #6b6058;
    margin: 0;
  }

  /* Reduced-motion: disable hover transforms */
  @media (prefers-reduced-motion: reduce) {
    .sfb-cf-anatomy__pin { transition: none; }
    .sfb-cf-anatomy__pin:hover { transform: translate(-50%, -50%); }
  }
/* END_SECTION:sfb-product-crystal */

/* START_SECTION:sfb-product-reviews (INDEX:63) */
.sfb-rv {
    --sfb-rv-sage: #5B7E6F;
    --sfb-rv-sage-dark: #3D6357;
    --sfb-rv-sage-pale: #E8EDE5;
    --sfb-rv-cream: #FAF8F4;
    --sfb-rv-cream-warm: #F5F0E8;
    --sfb-rv-espresso: #1A0F0A;
    --sfb-rv-espresso-light: #6E5C54;
    --sfb-rv-sand: #E8DED0;
    --sfb-rv-ease: cubic-bezier(0.16, 1, 0.3, 1);

    background: var(--sfb-rv-cream);
    color: var(--sfb-rv-espresso);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    padding: 80px 0 96px;
  }
  .sfb-rv__inner {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 64px;
  }

  .sfb-rv__header { text-align: center; margin-bottom: 48px; }
  .sfb-rv__eyebrow {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--sfb-rv-sage);
    margin: 0 0 14px;
  }
  .sfb-rv__title {
    font-family: 'Inter', sans-serif;
    font-size: 36px; font-weight: 600;
    line-height: 1.1; letter-spacing: -0.005em;
    margin: 0 0 8px;
    color: var(--sfb-rv-espresso);
  }
  .sfb-rv__title--sm { font-size: 26px; }
  .sfb-rv__lede {
    font-size: 15px; font-weight: 300; line-height: 1.6;
    color: var(--sfb-rv-espresso-light);
    margin: 12px 0 20px;
  }
  .sfb-rv__lede p { margin: 0; }

  /* Stats grid */
  .sfb-rv__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    background: var(--sfb-rv-cream-warm);
    border: 1px solid var(--sfb-rv-sand);
    padding: 36px 24px;
    margin-bottom: 40px;
  }
  .sfb-rv__stat { text-align: center; }
  .sfb-rv__stat-value {
    font-size: 36px; font-weight: 600;
    line-height: 1; color: var(--sfb-rv-espresso);
    margin-bottom: 8px;
  }
  .sfb-rv__stat-stars { display: flex; justify-content: center; gap: 2px; margin-bottom: 8px; }
  .sfb-rv-star { width: 14px; height: 14px; fill: var(--sfb-rv-sand); }
  .sfb-rv-star--on { fill: var(--sfb-rv-sage); }
  .sfb-rv__stat-label {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sfb-rv-espresso-light);
  }

  /* Rating breakdown */
  .sfb-rv__breakdown { margin-bottom: 40px; }
  .sfb-rv__breakdown-title {
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--sfb-rv-espresso-light);
    margin: 0 0 18px;
  }

  /* Re-skin Judge.me histogram (auto-injected by .jdgm-widget.jdgm-histogram). */
  #shopify-section-{{ section.id }} .sfb-rv-bars-jdgm .jdgm-histogram {
    display: flex !important; flex-direction: column; gap: 10px;
  }
  #shopify-section-{{ section.id }} .jdgm-histogram__row {
    display: grid !important; grid-template-columns: 56px 1fr 36px; gap: 14px;
    align-items: center;
    font-size: 12px; color: var(--sfb-rv-espresso-light);
    margin: 0 !important;
  }
  #shopify-section-{{ section.id }} .jdgm-histogram__star-text {
    font-weight: 500; letter-spacing: 0.04em;
  }
  #shopify-section-{{ section.id }} .jdgm-histogram__bar {
    height: 6px; background: var(--sfb-rv-sand);
    border-radius: 999px; overflow: hidden;
  }
  #shopify-section-{{ section.id }} .jdgm-histogram__bar-content {
    height: 100%; background: var(--sfb-rv-sage);
    transition: width 0.6s var(--sfb-rv-ease);
  }
  #shopify-section-{{ section.id }} .jdgm-histogram__frequency {
    text-align: right; font-variant-numeric: tabular-nums;
    color: var(--sfb-rv-espresso);
  }

  /* Filter bar */
  .sfb-rv__filterbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; border-top: 1px solid var(--sfb-rv-sand);
    border-bottom: 1px solid var(--sfb-rv-sand);
    margin-bottom: 32px;
  }
  .sfb-rv__count { font-size: 13px; color: var(--sfb-rv-espresso-light); }
  .sfb-rv__count strong { font-weight: 600; color: var(--sfb-rv-espresso); }
  .sfb-rv__sort { display: flex; align-items: center; gap: 10px; }
  .sfb-rv__sort label {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--sfb-rv-espresso-light);
  }
  .sfb-rv__sort select {
    appearance: none; -webkit-appearance: none;
    background: transparent;
    border: 1px solid var(--sfb-rv-sand);
    color: var(--sfb-rv-espresso);
    font-family: inherit; font-size: 13px;
    padding: 8px 32px 8px 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A0F0A' stroke-width='1.5'><path d='M4 6l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
  }
  .sfb-rv__sort select:hover { border-color: var(--sfb-rv-sage); }

  /* Review-widget list */
  .sfb-rv__list { margin-bottom: 56px; }

  /* Hide Judge.me's own header/score block — we render our own above. */
  #shopify-section-{{ section.id }} .jdgm-rev-widg__header,
  #shopify-section-{{ section.id }} .jdgm-rev-widg__title,
  #shopify-section-{{ section.id }} .jdgm-rev-widg__summary,
  #shopify-section-{{ section.id }} .jdgm-rev-widg__summary-text,
  #shopify-section-{{ section.id }} .jdgm-rev-widg__sort-wrapper { display: none !important; }

  /* Review-card grid — single column for editorial cards. */
  #shopify-section-{{ section.id }} .jdgm-rev-widg__reviews {
    display: flex !important; flex-direction: column; gap: 20px;
    border: 0 !important; padding: 0 !important;
  }
  #shopify-section-{{ section.id }} .jdgm-rev {
    background: var(--sfb-rv-cream-warm);
    border: 1px solid var(--sfb-rv-sand) !important;
    border-radius: 4px;
    padding: 28px !important;
    margin: 0 !important;
    position: relative;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__header {
    display: flex !important; flex-direction: row !important;
    align-items: flex-start; justify-content: space-between;
    gap: 12px; margin-bottom: 14px !important;
  }
  /* Author wrapper grows to take up room next to date. */
  #shopify-section-{{ section.id }} .jdgm-rev__author-wrapper {
    display: flex; align-items: center; gap: 12px;
    margin: 0 !important; padding: 0 !important;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__author {
    font-size: 14px; font-weight: 600; color: var(--sfb-rv-espresso);
    letter-spacing: 0;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__buyer-badge,
  #shopify-section-{{ section.id }} .jdgm-rev__icon-verified-buyer {
    color: var(--sfb-rv-sage) !important;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__timestamp {
    font-size: 12px; color: var(--sfb-rv-espresso-light);
    flex-shrink: 0;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__rating {
    color: var(--sfb-rv-sage) !important;
    letter-spacing: 1px; margin-bottom: 12px !important;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__rating::before,
  #shopify-section-{{ section.id }} .jdgm-rev__star { color: var(--sfb-rv-sage) !important; }
  #shopify-section-{{ section.id }} .jdgm-rev__title {
    font-family: 'Inter', sans-serif;
    font-weight: 600; font-size: 16px;
    color: var(--sfb-rv-espresso);
    margin: 0 0 8px !important;
  }
  #shopify-section-{{ section.id }} .jdgm-rev__body {
    font-size: 14px; font-weight: 300; line-height: 1.7;
    color: var(--sfb-rv-espresso-light);
  }

  /* Single-letter avatar — JS prepends .sfb-rv-avatar to each card header. */
  .sfb-rv-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sfb-rv-sage-pale);
    color: var(--sfb-rv-sage-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 16px;
    flex-shrink: 0;
    text-transform: uppercase;
  }

  /* Pagination — minimal pill */
  #shopify-section-{{ section.id }} .jdgm-paginate {
    display: flex !important; gap: 4px; justify-content: center;
    margin-top: 32px !important; padding: 0 !important; border: 0 !important;
  }
  #shopify-section-{{ section.id }} .jdgm-paginate__page,
  #shopify-section-{{ section.id }} .jdgm-paginate__nav-btn {
    min-width: 36px; height: 36px;
    background: transparent !important;
    border: 1px solid var(--sfb-rv-sand) !important;
    color: var(--sfb-rv-espresso-light) !important;
    font-size: 13px; padding: 0 12px;
    border-radius: 4px;
    transition: background-color 0.2s var(--sfb-rv-ease), color 0.2s var(--sfb-rv-ease);
    cursor: pointer;
  }
  #shopify-section-{{ section.id }} .jdgm-paginate__page:hover,
  #shopify-section-{{ section.id }} .jdgm-paginate__nav-btn:hover {
    background: var(--sfb-rv-sage-pale) !important;
    border-color: var(--sfb-rv-sage) !important;
    color: var(--sfb-rv-sage-dark) !important;
  }
  #shopify-section-{{ section.id }} .jdgm-paginate__page--active {
    background: var(--sfb-rv-espresso) !important;
    border-color: var(--sfb-rv-espresso) !important;
    color: var(--sfb-rv-cream) !important;
  }

  /* Write-a-review section + button */
  .sfb-rv__write {
    text-align: center;
    padding: 48px 24px 12px;
    border-top: 1px solid var(--sfb-rv-sand);
    margin-top: 24px;
  }
  .sfb-rv__write .sfb-rv__lede { max-width: 520px; margin-left: auto; margin-right: auto; }

  #shopify-section-{{ section.id }} .sfb-rv__btn,
  #shopify-section-{{ section.id }} .jdgm-write-rev-link {
    display: inline-flex; align-items: center; justify-content: center;
    height: 48px; padding: 0 32px;
    background: var(--sfb-rv-espresso) !important;
    color: var(--sfb-rv-cream) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: inherit;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s var(--sfb-rv-ease);
    margin-top: 8px;
  }
  #shopify-section-{{ section.id }} .sfb-rv__btn:hover,
  #shopify-section-{{ section.id }} .jdgm-write-rev-link:hover {
    background: var(--sfb-rv-sage-dark) !important;
    color: var(--sfb-rv-cream) !important;
  }

  /* Reveal animations */
  #shopify-section-{{ section.id }} [data-reveal] {
    opacity: 0; transform: translateY(18px);
    transition: opacity 0.7s var(--sfb-rv-ease), transform 0.7s var(--sfb-rv-ease);
  }
  #shopify-section-{{ section.id }} [data-reveal].is-visible {
    opacity: 1; transform: none;
  }

  /* Tablet */
  @media (max-width: 900px) {
    .sfb-rv__inner { padding: 0 32px; }
  }

  /* Mobile */
  @media (max-width: 768px) {
    .sfb-rv { padding: 56px 0 72px; }
    .sfb-rv__inner { padding: 0 20px; }
    .sfb-rv__title { font-size: 28px; }
    .sfb-rv__title--sm { font-size: 22px; }
    .sfb-rv__stats {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 28px 20px;
    }
    .sfb-rv__stat { padding: 16px 0; border-top: 1px solid var(--sfb-rv-sand); }
    .sfb-rv__stat:first-child { border-top: 0; padding-top: 0; }
    .sfb-rv__stat-value { font-size: 32px; }
    .sfb-rv__filterbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .sfb-rv__sort { justify-content: space-between; }
    .sfb-rv__sort select { flex: 1; min-width: 0; }
    #shopify-section-{{ section.id }} .jdgm-rev { padding: 22px !important; }
    #shopify-section-{{ section.id }} .jdgm-rev__header {
      flex-direction: column !important;
      align-items: flex-start;
    }
    #shopify-section-{{ section.id }} .jdgm-rev__title { font-size: 15px; }
    #shopify-section-{{ section.id }} .jdgm-rev__body { font-size: 13.5px; }
  }
/* END_SECTION:sfb-product-reviews */

/* START_SECTION:sfb-product-serum (INDEX:64) */
/* === Problem / Fit (§3) ============================================== */
  .sfb-cf-pf__chips {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
    margin-top: 28px;
  }
  .sfb-cf-pf__chip {
    padding: 8px 16px;
    background: #faf8f4;
    border: 1px solid rgba(26, 15, 10, 0.08);
    border-radius: 999px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: #1A0F0A;
  }

  /* === Texture / Format (§5) =========================================== */
  .sfb-cf-tf {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: start;
  }
  @media (min-width: 900px) {
    .sfb-cf-tf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
  }
  .sfb-cf-tf__table {
    margin: 0;
    padding: 28px 32px;
    background: #faf8f4;
    border-radius: 4px;
  }
  .sfb-cf-tf__row {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(26, 15, 10, 0.08);
  }
  .sfb-cf-tf__row:last-child { border-bottom: 0; }
  .sfb-cf-tf__row dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #5B7E6F;
    margin: 0;
    font-weight: 600;
  }
  .sfb-cf-tf__row dd {
    margin: 0;
    font-size: 14px;
    color: #1A0F0A;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }

  /* === Ingredient story (§6) =========================================== */
  .sfb-cf-ing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 36px 0 24px;
  }
  @media (min-width: 700px)  { .sfb-cf-ing { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  .sfb-cf-ing__card {
    padding: 28px 24px;
    background: #faf8f4;
    border: 1px solid rgba(26, 15, 10, 0.06);
    border-radius: 4px;
  }
  .sfb-cf-ing__n {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 20px;
    line-height: 1.25;
    color: #1A0F0A;
    margin: 0 0 10px;
  }
  .sfb-cf-ing__d {
    font-size: 14px;
    line-height: 1.55;
    color: #6b6058;
    margin: 0;
  }
  .sfb-cf-ing__inci { margin: 12px 0 24px; }
  .sfb-cf-ing__inci .sfb-cf-fq__a {
    font-size: 12.5px;
    line-height: 1.55;
    color: #6b6058;
    font-style: italic;
  }
  .sfb-cf-ing__standards {
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #5B7E6F;
    margin: 24px 0 16px;
  }
  .sfb-cf-ing__caution {
    text-align: center;
    font-size: 12px;
    line-height: 1.55;
    color: #6b6058;
    margin: 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* === Brand story (§7) ================================================ */
  .sfb-cf-bs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .sfb-cf-bs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; }
    /* Collapse to single column on desktop when no image is configured */
    .sfb-cf-bs:not(:has(.sfb-cf-bs__img)) { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  }
  .sfb-cf-bs__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #faf8f4;
  }
  .sfb-cf-bs__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .sfb-cf-bs__sig {
    margin-top: 20px;
    font-style: italic;
    font-size: 14px;
    color: #5B7E6F;
    letter-spacing: 0.01em;
  }
/* END_SECTION:sfb-product-serum */

/* START_SECTION:sfb-product-soak (INDEX:65) */
/* === Mineral Trio (§4) =============================================== */
  .sfb-cs-trio {
    display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 48px;
  }
  @media (min-width: 700px)  { .sfb-cs-trio { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  @media (min-width: 1000px) { .sfb-cs-trio { gap: 40px; } }
  .sfb-cs-trio__card { display: flex; flex-direction: column; }
  .sfb-cs-trio__img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #faf8f4;
    margin-bottom: 18px;
  }
  .sfb-cs-trio__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .sfb-cs-trio__card:hover .sfb-cs-trio__img img { transform: scale(1.03); }
  .sfb-cs-trio__num {
    position: absolute; bottom: 16px; left: 18px;
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    color: rgba(250, 248, 244, 0.92);
    letter-spacing: 0.02em;
  }
  .sfb-cs-trio__origin {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #6b6058;
    margin: 0 0 8px;
  }
  .sfb-cs-trio__name {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: #1A0F0A;
    margin: 0 0 10px;
    letter-spacing: -0.005em;
  }
  .sfb-cs-trio__name em { font-style: italic; color: #3D6357; }
  .sfb-cs-trio__role {
    font-size: 13.5px;
    line-height: 1.55;
    color: #6b6058;
    margin: 0 0 16px;
    flex: 1;
  }
  .sfb-cs-trio__spec {
    display: flex;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(26, 15, 10, 0.1);
    margin: 0;
    font-size: 11.5px;
  }
  .sfb-cs-trio__spec dt {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #6b6058;
    font-weight: 600;
    margin: 0;
  }
  .sfb-cs-trio__spec dd {
    color: #1A0F0A;
    margin: 0;
    font-weight: 500;
  }

  /* === Water Journey (§5) ============================================== */
  .sfb-cs-journey {
    list-style: none;
    padding: 0;
    margin: 48px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  @media (min-width: 900px) {
    .sfb-cs-journey {
      grid-template-columns: repeat(5, 1fr);
      gap: 24px;
    }
  }
  .sfb-cs-journey__step {
    position: relative;
    padding: 26px 0 0;
    border-top: 1px solid #5B7E6F;
  }
  .sfb-cs-journey__step::before {
    content: '';
    position: absolute;
    top: -5px; left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #5B7E6F;
  }
  .sfb-cs-journey__time {
    display: block;
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-style: italic;
    font-size: 22px;
    line-height: 1;
    color: #5B7E6F;
    margin-bottom: 10px;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
  }
  .sfb-cs-journey__t {
    font-family: var(--heading-font-family, 'Playfair Display', serif);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    color: #1A0F0A;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
  }
  .sfb-cs-journey__d {
    font-size: 13px;
    line-height: 1.55;
    color: #6b6058;
    margin: 0;
  }

  /* === Craftsmanship (§7) ============================================== */
  .sfb-cs-craft__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .sfb-cs-craft__grid {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: 80px;
    }
  }
  .sfb-cs-craft__list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 28px;
  }
  .sfb-cs-craft__item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 18px;
    align-items: start;
  }
  .sfb-cs-craft__ic {
    color: #5B7E6F;
    padding-top: 4px;
  }
  .sfb-cs-craft__ic svg { width: 22px; height: 22px; display: block; }
  .sfb-cs-craft__t {
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.4;
    color: #1A0F0A;
    margin: 0 0 4px;
  }
  .sfb-cs-craft__d {
    font-size: 13px;
    line-height: 1.55;
    color: #6b6058;
    margin: 0;
  }
  .sfb-cs-craft__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #faf8f4;
  }
  .sfb-cs-craft__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* === Brand story (§7) ================================================ */
  .sfb-cs-bs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
  }
  @media (min-width: 900px) {
    .sfb-cs-bs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; }
    /* Collapse to single column on desktop when no image is configured */
    .sfb-cs-bs:not(:has(.sfb-cs-bs__img)) { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
  }
  .sfb-cs-bs__img {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 4px;
    background: #faf8f4;
  }
  .sfb-cs-bs__img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .sfb-cs-bs__sig {
    margin-top: 20px;
    font-style: italic;
    font-size: 14px;
    color: #5B7E6F;
    letter-spacing: 0.01em;
  }
/* END_SECTION:sfb-product-soak */

/* START_SECTION:sfb-promo-popup (INDEX:66) */
/* Scoped to #sfb-promo-popup because <x-modal> moves itself to <body> on open. */
  #sfb-promo-popup {
    --sfb-pp-ink: #1a1916;
    --sfb-pp-espresso: #403e39;
    --sfb-pp-espresso-soft: #706c66;
    --sfb-pp-cream: #FAF8F4;
    --sfb-pp-cream-warm: #F8EFE9;
    --sfb-pp-line: #cfc8bd;
    --sfb-pp-line-soft: rgba(64, 62, 57, 0.18);
    --sfb-pp-error: #A04A35;
    --sfb-pp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* ------- Modal shell — override Maestrooo's default x-modal styling ------- */
  #sfb-promo-popup::part(content) {
    width: min(880px, calc(100vw - 32px));
    max-width: min(880px, calc(100vw - 32px));
    padding: 0;
    background: #fff;
    color: var(--sfb-pp-espresso);
    border-radius: 0;
    overflow: hidden;
    box-shadow:
      0 30px 80px -20px rgba(64, 62, 57, 0.28),
      0 8px 24px -8px rgba(64, 62, 57, 0.14);
  }
  #sfb-promo-popup::part(header) { display: none; }
  #sfb-promo-popup::part(body) { padding: 0; overflow: visible; }

  /* ------- Two-column layout ------- */
  #sfb-promo-popup .sfb-pp {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 560px;
    background: #fff;
    overflow: hidden;
  }

  /* ------- Close button ------- */
  #sfb-promo-popup .sfb-pp__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sfb-pp-espresso);
    border-radius: 50%;
    z-index: 5;
    padding: 0;
    transition: background 0.15s var(--sfb-pp-ease);
  }
  #sfb-promo-popup .sfb-pp__close:hover { background: rgba(64, 62, 57, 0.08); }
  #sfb-promo-popup .sfb-pp__close svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none; stroke-width: 1.4;
  }

  /* ------- Left pane ------- */
  #sfb-promo-popup .sfb-pp__left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 48px 44px;
    background: #fff;
    text-align: center;
    overflow: hidden;
  }

  /* ------- Right pane (image) ------- */
  #sfb-promo-popup .sfb-pp__right {
    position: relative;
    overflow: hidden;
    background: var(--sfb-pp-cream-warm);
  }
  #sfb-promo-popup .sfb-pp__right img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  #sfb-promo-popup .sfb-pp__right::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sfb-pp-accent) 6%, transparent), color-mix(in srgb, var(--sfb-pp-accent) 22%, transparent));
    z-index: 1;
    pointer-events: none;
  }

  /* ------- Step machine ------- */
  #sfb-promo-popup .sfb-pp__step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: sfbPpFadeIn 0.35s ease both;
  }
  #sfb-promo-popup .sfb-pp__step[hidden] { display: none; }
  @keyframes sfbPpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ------- Brand wordmark (serif, accent color) ------- */
  #sfb-promo-popup .sfb-pp__brand {
    font-family: var(--sfb-serif-font, var(--heading-font-family));
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 400;
    color: var(--sfb-pp-accent);
    letter-spacing: 0.005em;
    line-height: 1.05;
    margin-bottom: 36px;
  }

  /* ------- Tracked-uppercase labels ------- */
  #sfb-promo-popup .sfb-pp__lead,
  #sfb-promo-popup .sfb-pp__sub {
    font-family: var(--text-font-family);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso);
  }
  #sfb-promo-popup .sfb-pp__lead { margin-bottom: 14px; }
  #sfb-promo-popup .sfb-pp__sub { margin-bottom: 32px; }

  /* ------- Hero (oversized "20% off") ------- */
  #sfb-promo-popup .sfb-pp__hero {
    font-family: var(--text-font-family);
    font-size: clamp(38px, 5.2vw, 52px);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso);
    line-height: 1;
    margin-bottom: 14px;
  }

  /* ------- CTAs ------- */
  #sfb-promo-popup .sfb-pp__cta {
    width: 100%;
    display: block;
    padding: 18px 24px;
    background: var(--sfb-pp-accent);
    color: #fff;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s var(--sfb-pp-ease), transform 0.1s var(--sfb-pp-ease);
  }
  #sfb-promo-popup .sfb-pp__cta:hover { background: var(--sfb-pp-accent-dark); }
  #sfb-promo-popup .sfb-pp__cta:active { transform: translateY(1px); }
  #sfb-promo-popup .sfb-pp__cta--ink { background: var(--sfb-pp-ink); }
  #sfb-promo-popup .sfb-pp__cta--ink:hover { background: #000; }
  #sfb-promo-popup .sfb-pp__cta[disabled] { opacity: 0.6; cursor: not-allowed; }

  #sfb-promo-popup .sfb-pp__decline {
    margin-top: 18px;
    background: transparent;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    padding: 0;
  }
  #sfb-promo-popup .sfb-pp__decline:hover { color: var(--sfb-pp-espresso-soft); }

  /* ------- Email form ------- */
  #sfb-promo-popup .sfb-pp__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  #sfb-promo-popup .sfb-pp__field {
    position: relative;
    width: 100%;
  }
  #sfb-promo-popup .sfb-pp__email {
    width: 100%;
    padding: 18px;
    border: 1px solid var(--sfb-pp-line);
    background: #fff;
    font-family: var(--text-font-family);
    font-size: 14px;
    color: var(--sfb-pp-espresso);
    letter-spacing: 0.02em;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    transition: border-color 0.2s var(--sfb-pp-ease), padding 0.15s var(--sfb-pp-ease);
  }
  #sfb-promo-popup .sfb-pp__email::placeholder { color: var(--sfb-pp-espresso-soft); }
  #sfb-promo-popup .sfb-pp__email:focus { border-color: var(--sfb-pp-accent); }
  #sfb-promo-popup .sfb-pp__label {
    position: absolute;
    left: 18px; top: 6px;
    font-family: var(--text-font-family);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso-soft);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--sfb-pp-ease);
  }
  #sfb-promo-popup .sfb-pp__field--filled .sfb-pp__email {
    padding-top: 24px;
    padding-bottom: 12px;
  }
  #sfb-promo-popup .sfb-pp__field--filled .sfb-pp__label { opacity: 1; }
  #sfb-promo-popup .sfb-pp__error {
    font-family: var(--text-font-family);
    font-size: 11px;
    color: var(--sfb-pp-error);
    letter-spacing: 0.04em;
    text-align: left;
    min-height: 14px;
  }
  #sfb-promo-popup .sfb-pp__back {
    margin-top: 18px;
    background: transparent;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }
  #sfb-promo-popup .sfb-pp__back:hover { color: var(--sfb-pp-espresso); }
  #sfb-promo-popup .sfb-pp__back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* ------- Step 3: success ------- */
  #sfb-promo-popup .sfb-pp__check {
    width: 64px; height: 64px;
    border: 1.5px solid var(--sfb-pp-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }
  #sfb-promo-popup .sfb-pp__check svg {
    width: 28px; height: 28px;
    stroke: var(--sfb-pp-accent);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  #sfb-promo-popup .sfb-pp__success-title {
    font-family: var(--sfb-serif-font, var(--heading-font-family));
    font-size: 34px;
    font-weight: 400;
    color: var(--sfb-pp-accent);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  #sfb-promo-popup .sfb-pp__success-body {
    font-family: var(--text-font-family);
    font-size: 13px;
    color: var(--sfb-pp-espresso-soft);
    line-height: 1.65;
    max-width: 320px;
    margin: 0 auto;
  }
  #sfb-promo-popup .sfb-pp__success-body strong {
    color: var(--sfb-pp-espresso);
    font-weight: 500;
  }
  #sfb-promo-popup .sfb-pp__code-hint {
    font-family: var(--text-font-family);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sfb-pp-espresso-soft);
    margin: 18px 0 6px;
  }
  #sfb-promo-popup .sfb-pp__code {
    width: 100%;
    max-width: 320px;
    display: flex;
    align-items: stretch;
    border: 1px dashed var(--sfb-pp-accent);
    background: var(--sfb-pp-rose-pale);
  }
  #sfb-promo-popup .sfb-pp__code-value {
    flex: 1;
    padding: 14px 16px;
    font-family: var(--text-font-family);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--sfb-pp-accent-dark);
    text-align: center;
    user-select: all;
  }
  #sfb-promo-popup .sfb-pp__code-copy {
    background: var(--sfb-pp-accent);
    color: #fff;
    border: 0;
    padding: 0 16px;
    font-family: var(--text-font-family);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s var(--sfb-pp-ease);
    min-width: 84px;
  }
  #sfb-promo-popup .sfb-pp__code-copy:hover { background: var(--sfb-pp-accent-dark); }
  #sfb-promo-popup .sfb-pp__code-copy.is-copied { background: #5B7E6F; }

  /* ------- Tablet ------- */
  @media (max-width: 880px) and (min-width: 561px) {
    #sfb-promo-popup .sfb-pp { height: auto; min-height: 520px; }
    #sfb-promo-popup .sfb-pp__left { padding: 40px 32px 32px; }
    #sfb-promo-popup .sfb-pp__brand { margin-bottom: 24px; }
  }

  /* ------- Phones: single column, no image ------- */
  @media (max-width: 560px) {
    #sfb-promo-popup::part(content) {
      width: min(360px, calc(100vw - 32px));
      max-width: min(360px, calc(100vw - 32px));
    }
    #sfb-promo-popup .sfb-pp {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      height: auto;
    }
    #sfb-promo-popup .sfb-pp__right { display: none; }
    #sfb-promo-popup .sfb-pp__left {
      padding: 40px 26px 32px;
    }
    #sfb-promo-popup .sfb-pp__brand {
      font-size: 28px;
      margin-bottom: 32px;
    }
    #sfb-promo-popup .sfb-pp__lead,
    #sfb-promo-popup .sfb-pp__sub { font-size: 12px; }
    #sfb-promo-popup .sfb-pp__hero {
      font-size: 42px;
      font-weight: 600;
      letter-spacing: 0.005em;
      margin-bottom: 14px;
    }
    #sfb-promo-popup .sfb-pp__sub { margin-bottom: 26px; }
    #sfb-promo-popup .sfb-pp__cta { padding: 16px 18px; }
    #sfb-promo-popup .sfb-pp__success-title { font-size: 24px; }
    #sfb-promo-popup .sfb-pp__close { top: 12px; right: 12px; width: 32px; height: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    #sfb-promo-popup .sfb-pp__step,
    #sfb-promo-popup .sfb-pp__cta,
    #sfb-promo-popup .sfb-pp__close,
    #sfb-promo-popup .sfb-pp__email,
    #sfb-promo-popup .sfb-pp__code-copy { transition: none; animation: none; }
  }
/* END_SECTION:sfb-promo-popup */

/* START_SECTION:sfb-ritual-scroll (INDEX:67) */
/* Apple-style scroll-pin: the entire section (bottle + panels frame) locks
     to the viewport while the user scrolls past it. Inside the pinned frame,
     a panels track translates upward, sliding panel 2 up where panel 1 was.
     Section's min-height = N × 100vh = total scroll length the user travels
     before the section unsticks and the next page section appears. */
  .sfb-rscroll {
    position: relative;
    background: #FFFFFF;
    color: var(--sfb-espresso, #1A0F0A);
    /* Section is N panels of pin + 1 extra viewport of hold so the final
       panel rests at center for a beat before the section unpins and the
       next page section slides up. */
    min-height: calc(100vh * (var(--sfb-rscroll-panels, 2) + 1));
  }

  .sfb-rscroll__layout {
    /* THIS is the pin — sticks the entire layout to the top while the user
       scrolls through the section's allocated height. */
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: 100vh minmax(0, 1fr);
    align-items: stretch;
  }

  .sfb-rscroll__media-col {
    /* Layout pins the whole grid — no per-column sticky needed. */
    height: 100vh;
    display: flex;
    align-items: center;
    /* Right-align so the bottle sits flush against the panel column. */
    justify-content: flex-end;
  }

  .sfb-rscroll__media {
    position: relative;
    aspect-ratio: 1 / 1;
    /* Fill the section vertically — bottle is exactly 100vh tall, touches
       the section's top and bottom edges. */
    width: 100vh;
    height: 100vh;
    /* Nudge the rendered bottle to the right within its column so it sits
       closer to center / closer to the panel column instead of clustering
       on the far left. Tweak the value to taste — bigger = more rightward. */
    transform: translateX(clamp(48px, 6vw, 120px));
  }

  .sfb-rscroll__iframe,
  .sfb-rscroll__fallback {
    width: 100%;
    height: 100%;
    display: block;
  }
  .sfb-rscroll__fallback {
    object-fit: contain;
  }

  /* Iframe: hidden initially, revealed once it loads to avoid flash of
     blank rectangle. The .is-iframe-loaded class is added by JS on iframe
     load event. The static fallback image stays visible until then. */
  .sfb-rscroll__iframe {
    border: 0;
    background: #FFFFFF;
    visibility: hidden;
    position: absolute;
    inset: 0;
  }
  .sfb-rscroll.is-iframe-loaded .sfb-rscroll__iframe {
    visibility: visible;
  }
  .sfb-rscroll.is-iframe-loaded .sfb-rscroll__fallback {
    display: none;
  }
  /* On mobile / reduced-motion / save-data, JS adds .use-fallback to the
     section root and the iframe is killed entirely (saves the ~3MB GLB
     load on phones). Static image carries the section. */
  .sfb-rscroll.use-fallback .sfb-rscroll__iframe {
    display: none;
  }

  .sfb-rscroll__panels {
    display: flex;
    flex-direction: column;
  }

  /* Panels window — clips the translating track to the viewport's panel
     column. Without overflow:hidden, panel 2 would leak above the section
     into the prior page section as it translates upward. */
  .sfb-rscroll__panels-window {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  /* Panels track — the long vertical stack that JS translates upward as the
     user scrolls. translateY(0) shows panel 1, translateY(-100vh) shows
     panel 2, translateY(-200vh) shows panel 3, etc. */
  .sfb-rscroll__panels {
    display: flex;
    flex-direction: column;
    will-change: transform;
  }

  .sfb-rscroll__panel {
    /* Each panel is exactly viewport height — sits centered when its slot
       is the visible one. */
    min-height: 100vh;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 clamp(24px, 5vw, 56px);
  }

  /* Inner caps the text width so body copy reads as two short lines instead
     of stretching across the panel column. */
  .sfb-rscroll__panel-inner {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* All panel text in solid espresso brown on white bg — compact editorial
     stack to match the reference. */
  .sfb-rscroll__eyebrow {
    font-family: var(--font-body, Inter), sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sfb-espresso, #1A0F0A);
    margin: 0 0 22px;
  }

  .sfb-rscroll__head {
    font-family: var(--font-body, Inter), sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 2.1vw, 30px);
    line-height: 1.15;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 24px;
    color: var(--sfb-espresso, #1A0F0A);
  }

  .sfb-rscroll__body {
    font-family: var(--font-body, Inter), sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--sfb-espresso, #1A0F0A);
    max-width: 38ch;
  }
  .sfb-rscroll__body p {
    margin: 0;
  }
  .sfb-rscroll__body p + p {
    margin-top: 10px;
  }

  /* CTA — underlined espresso link below the body. */
  .sfb-rscroll__cta {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--font-body, Inter), sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    color: var(--sfb-espresso, #1A0F0A);
    text-decoration: none;
    border-bottom: 1px solid var(--sfb-espresso, #1A0F0A);
    padding-bottom: 3px;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sfb-rscroll__cta:hover,
  .sfb-rscroll__cta:focus-visible {
    opacity: 0.65;
  }

  /* Reduced motion — pin everything to its settled state. */
  @media (prefers-reduced-motion: reduce) {
    .sfb-rscroll__panel-inner {
      opacity: 1 !important;
      transform: none !important;
      animation: none !important;
      transition: none !important;
    }
  }

  @media (max-width: 750px) {
    /* Mobile: kill the desktop scroll-pin layout entirely. Stack vertically,
       reset height/transform/justify so nothing overflows the viewport.
       The 3D Three.js iframe + 100vh-per-panel pin is a desktop-only luxury;
       on mobile we hide the media column (the iframe never becomes visible
       on mobile because the rAF/load handler bails before adding
       .is-iframe-loaded) and stack the panel cards as a normal editorial
       column with auto height so panels fit their content snugly instead
       of leaving a viewport of whitespace per panel. */
    .sfb-rscroll {
      min-height: 0;
    }
    .sfb-rscroll__layout {
      position: static;
      height: auto;
      grid-template-columns: 1fr;
    }
    /* Hide the media column on mobile. The fallback image setting is
       optional and currently unset; the iframe is initialized with
       visibility:hidden and never reveals on mobile. Leaving the column
       in DOM creates a 400px+ blank stripe above the first panel. */
    .sfb-rscroll__media-col {
      display: none;
    }
    .sfb-rscroll__panels-window {
      height: auto;
      overflow: visible;
    }
    .sfb-rscroll__panels {
      transform: none !important;
    }
    .sfb-rscroll__panel {
      /* Auto height — panels shrink to content instead of forcing a
         100vh-tall slot per panel. Without this, each panel left a
         viewport's worth of whitespace centered around the headline. */
      min-height: 0;
      height: auto;
      padding: 48px clamp(24px, 6vw, 64px);
      opacity: 1;
      transform: none;
    }
    /* First panel keeps a top-of-section feel; subsequent panels get a
       hairline divider so the cards read as a sequence, not a single block. */
    .sfb-rscroll__panel + .sfb-rscroll__panel {
      border-top: 1px solid #E8DFD0;
    }
  }
/* END_SECTION:sfb-ritual-scroll */

/* START_SECTION:sfb-testimonials (INDEX:69) */
.sfb-testimonials {
  --sfb-t-sage: #5B7E6F;
  --sfb-t-sage-dark: #3D6357;
  --sfb-t-sage-light: #A8B5A0;
  --sfb-t-sage-muted: #C8D4C0;
  --sfb-t-sage-pale: #E8EDE5;
  --sfb-t-cream: #FAF8F4;
  --sfb-t-espresso: #3E2E27;
  --sfb-t-espresso-light: #6E5C54;
  --sfb-t-sand: #E8DED0;
  --sfb-t-white: #FFFFFF;
  --sfb-t-star: #C8A456;
  --sfb-t-star-empty: #E4DDD2;
  --sfb-t-font-display: 'Cormorant Garamond', Georgia, serif;
  --sfb-t-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sfb-t-pad: 20px;
  --sfb-t-tap-min: 44px;
  --sfb-t-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sfb-t-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  background: var(--sfb-t-white);
  padding: 48px 0 40px;
  border-top: 1px solid rgba(62, 46, 39, 0.06);
  overflow: hidden;
  position: relative;
  color: var(--sfb-t-espresso);
}

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

.sfb-testimonials__inner { width: 100%; }

.sfb-testimonials__header {
  padding: 0 var(--sfb-t-pad);
  text-align: center;
  margin-bottom: 12px;
}

.sfb-testimonials__icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(62, 46, 39, 0.12);
  color: var(--sfb-t-sage);
}

.sfb-testimonials__icon svg { width: 18px; height: 18px; }

.sfb-testimonials__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sfb-t-sage);
  margin: 0 0 10px;
}

.sfb-testimonials__title {
  font-family: var(--sfb-t-font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--sfb-t-espresso);
  margin: 0 0 8px;
}

.sfb-testimonials__subtitle {
  font-size: 13px;
  font-weight: 300;
  color: var(--sfb-t-espresso-light);
  line-height: 1.6;
  max-width: 300px;
  margin: 0 auto 6px;
}

.sfb-testimonials__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.sfb-testimonials__summary-stars { display: flex; gap: 2px; }
.sfb-testimonials__summary-stars svg { width: 13px; height: 13px; fill: var(--sfb-t-star); }

.sfb-testimonials__summary-rating {
  font-family: var(--sfb-t-font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--sfb-t-espresso);
}

.sfb-testimonials__summary-count {
  font-size: 11px;
  font-weight: 400;
  color: var(--sfb-t-espresso-light);
}

.sfb-testimonials__mobile-carousel {
  display: flex;
  gap: 14px;
  padding: 0 var(--sfb-t-pad);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--sfb-t-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.sfb-testimonials__mobile-carousel::-webkit-scrollbar { display: none; }

.sfb-testimonials__mobile-carousel .testimonial-card {
  min-width: calc(100vw - 56px);
  max-width: calc(100vw - 56px);
  scroll-snap-align: center;
  flex-shrink: 0;
}

.sfb-testimonials__swipe-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 400;
  color: var(--sfb-t-espresso-light);
  letter-spacing: 0.3px;
  opacity: 1;
  transition: opacity 0.5s var(--sfb-t-ease-smooth);
}

.sfb-testimonials__swipe-hint.is-hidden { opacity: 0; pointer-events: none; }

.sfb-testimonials__swipe-hint svg {
  width: 14px;
  height: 14px;
  stroke: var(--sfb-t-sage-light);
  fill: none;
  stroke-width: 1.5;
  animation: sfb-t-hint-nudge 1.5s var(--sfb-t-ease-out) infinite;
}

@keyframes sfb-t-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.sfb-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}

.sfb-testimonials__dot {
  width: 6px;
  height: 6px;
  background: var(--sfb-t-sand);
  transition: all 0.3s var(--sfb-t-ease-smooth);
  display: inline-block;
}

.sfb-testimonials__dot.active {
  background: var(--sfb-t-espresso);
  width: 20px;
}

.sfb-testimonials__columns {
  display: none;
  justify-content: center;
  gap: 16px;
  padding: 0 var(--sfb-t-pad);
  max-height: 620px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 90%, transparent 100%);
}

.sfb-testimonials__column {
  flex: 1;
  max-width: 340px;
  min-width: 0;
  overflow: hidden;
}

.sfb-testimonials__column-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  will-change: transform;
}

.sfb-testimonials__column--1 .sfb-testimonials__column-track {
  animation: sfb-t-scroll-up 28s linear infinite;
}

.sfb-testimonials__column--2 .sfb-testimonials__column-track {
  animation: sfb-t-scroll-down 34s linear infinite;
}

.sfb-testimonials__column--3 .sfb-testimonials__column-track {
  animation: sfb-t-scroll-up 32s linear infinite;
}

@keyframes sfb-t-scroll-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes sfb-t-scroll-down {
  0% { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

.sfb-testimonials__columns:hover .sfb-testimonials__column-track,
.sfb-testimonials__columns:focus-within .sfb-testimonials__column-track {
  animation-play-state: paused;
}

.sfb-testimonials__column--3 { display: none; }

.sfb-testimonials .testimonial-card {
  background: var(--sfb-t-cream);
  border: 1px solid rgba(62, 46, 39, 0.08);
  padding: 22px;
  position: relative;
  transition: border-color 0.3s var(--sfb-t-ease-smooth), box-shadow 0.3s var(--sfb-t-ease-smooth);
  font-family: var(--sfb-t-font-body);
}

.sfb-testimonials .testimonial-card:hover {
  border-color: rgba(91, 126, 111, 0.2);
  box-shadow: 0 4px 24px rgba(62, 46, 39, 0.06);
}

.sfb-testimonials .testimonial-card__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
}

.sfb-testimonials .testimonial-card__stars svg {
  width: 12px;
  height: 12px;
  fill: var(--sfb-t-star);
}

.sfb-testimonials .testimonial-card__stars svg.empty {
  fill: var(--sfb-t-star-empty);
}

.sfb-testimonials .testimonial-card__text {
  font-family: var(--sfb-t-font-display);
  font-size: 17px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--sfb-t-espresso);
  margin: 0 0 18px;
}

.sfb-testimonials .testimonial-card__text::before {
  content: '\201C';
  font-family: var(--sfb-t-font-display);
  font-size: 28px;
  font-weight: 300;
  color: var(--sfb-t-sage-light);
  line-height: 0;
  vertical-align: -0.25em;
  margin-right: 2px;
}

.sfb-testimonials .testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sfb-testimonials .testimonial-card__avatar {
  width: 34px;
  height: 34px;
  background: var(--sfb-t-sage-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.sfb-testimonials .testimonial-card__avatar-letter {
  font-family: var(--sfb-t-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-t-sage-dark);
  line-height: 1;
}

.sfb-testimonials .testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sfb-testimonials .testimonial-card__name {
  font-family: var(--sfb-t-font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-t-espresso);
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.sfb-testimonials .testimonial-card__detail {
  font-family: var(--sfb-t-font-body);
  font-size: 10px;
  font-weight: 400;
  color: var(--sfb-t-espresso-light);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sfb-testimonials .testimonial-card__verified svg {
  width: 11px;
  height: 11px;
  fill: var(--sfb-t-sage);
  flex-shrink: 0;
}

.sfb-testimonials .testimonial-card--featured {
  background: var(--sfb-t-sage-pale);
  border-color: var(--sfb-t-sage-muted);
}

.sfb-testimonials .testimonial-card--featured .testimonial-card__text { font-size: 18px; }

.sfb-testimonials .testimonial-card--featured .testimonial-card__text::before {
  color: var(--sfb-t-sage);
}

.sfb-testimonials .testimonial-card__photo {
  width: 100%;
  height: 120px;
  object-fit: cover;
  margin-bottom: 14px;
  border: 1px solid rgba(62, 46, 39, 0.06);
  display: block;
}

.sfb-testimonials .testimonial-card__product {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--sfb-t-sage-dark);
  background: var(--sfb-t-white);
  border: 1px solid var(--sfb-t-sage-muted);
  padding: 3px 8px;
  margin-bottom: 12px;
}

.sfb-testimonials .testimonial-card__product svg {
  width: 11px;
  height: 11px;
  stroke: var(--sfb-t-sage);
  fill: none;
  stroke-width: 1.5;
}

.sfb-testimonials__cta {
  text-align: center;
  padding: 28px var(--sfb-t-pad) 0;
}

.sfb-testimonials__cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sfb-t-tap-min);
  padding: 14px 36px;
  font-family: var(--sfb-t-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sfb-t-white);
  background: var(--sfb-t-espresso);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s var(--sfb-t-ease-smooth), transform 0.2s;
}

.sfb-testimonials__cta-link:hover { background: #2C1F1A; }
.sfb-testimonials__cta-link:active { transform: scale(0.97); }
.sfb-testimonials__cta-link:focus-visible { outline: 2px solid var(--sfb-t-sage); outline-offset: 3px; }

.sfb-testimonials__cta-sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--sfb-t-espresso-light);
  margin: 10px 0 0;
}

.sfb-testimonials__divider {
  width: 48px;
  height: 1px;
  background: var(--sfb-t-sage-muted);
  margin: 40px auto 0;
}

.sfb-testimonials .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--sfb-t-ease-out), transform 0.7s var(--sfb-t-ease-out);
}

.sfb-testimonials .reveal.is-visible { opacity: 1; transform: translateY(0); }
.sfb-testimonials .reveal-d1 { transition-delay: 0.05s; }
.sfb-testimonials .reveal-d2 { transition-delay: 0.12s; }
.sfb-testimonials .reveal-d3 { transition-delay: 0.2s; }
.sfb-testimonials .reveal-d4 { transition-delay: 0.3s; }

@media (max-width: 359px) {
  .sfb-testimonials { --sfb-t-pad: 16px; padding: 40px 0 32px; }
  .sfb-testimonials__title { font-size: 24px; }
  .sfb-testimonials__subtitle { font-size: 12px; max-width: 260px; }
  .sfb-testimonials__mobile-carousel .testimonial-card {
    min-width: calc(100vw - 40px);
    max-width: calc(100vw - 40px);
    padding: 18px;
  }
  .sfb-testimonials .testimonial-card__text { font-size: 16px; }
  .sfb-testimonials .testimonial-card--featured .testimonial-card__text { font-size: 17px; }
  .sfb-testimonials .testimonial-card__photo { height: 100px; }
}

@media (min-width: 375px) and (max-width: 639px) {
  .sfb-testimonials__mobile-carousel .testimonial-card {
    min-width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }
}

@media (min-width: 640px) {
  .sfb-testimonials { padding: 64px 0 48px; }
  .sfb-testimonials__title { font-size: 32px; }
  .sfb-testimonials__subtitle { max-width: 360px; font-size: 14px; }
  .sfb-testimonials__summary { margin-bottom: 32px; }
  .sfb-testimonials__summary-stars svg { width: 14px; height: 14px; }
  .sfb-testimonials__summary-rating { font-size: 14px; }

  .sfb-testimonials__mobile-carousel { display: none !important; }
  .sfb-testimonials__swipe-hint { display: none !important; }
  .sfb-testimonials__dots { display: none !important; }

  .sfb-testimonials__columns {
    display: flex;
    gap: 20px;
    padding: 0 32px;
    max-height: 660px;
  }

  .sfb-testimonials .testimonial-card { padding: 26px; }
  .sfb-testimonials .testimonial-card__stars svg { width: 13px; height: 13px; }
  .sfb-testimonials .testimonial-card__text { font-size: 18px; }
  .sfb-testimonials .testimonial-card--featured .testimonial-card__text { font-size: 20px; }
  .sfb-testimonials .testimonial-card__photo { height: 140px; }
  .sfb-testimonials .testimonial-card__avatar { width: 36px; height: 36px; }
  .sfb-testimonials .testimonial-card__avatar-letter { font-size: 13px; }
  .sfb-testimonials .testimonial-card__name { font-size: 12px; }
  .sfb-testimonials .testimonial-card__detail { font-size: 11px; }
  .sfb-testimonials .testimonial-card__product { font-size: 10px; padding: 3px 10px; }
  .sfb-testimonials__cta { padding: 36px var(--sfb-t-pad) 0; }
}

@media (min-width: 960px) {
  .sfb-testimonials { padding: 80px 0 56px; }
  .sfb-testimonials__title { font-size: 36px; }
  .sfb-testimonials__subtitle { max-width: 400px; }
  .sfb-testimonials__columns {
    gap: 24px;
    padding: 0 48px;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    max-height: 700px;
  }
  .sfb-testimonials__column--3 { display: block; }
  .sfb-testimonials .testimonial-card--featured .testimonial-card__text { font-size: 21px; }
}

@media (min-width: 1200px) {
  .sfb-testimonials { padding: 96px 0 64px; }
  .sfb-testimonials__title { font-size: 40px; }
  .sfb-testimonials__columns {
    max-width: 1200px;
    max-height: 740px;
    padding: 0 60px;
  }
  .sfb-testimonials .testimonial-card { padding: 28px; }
  .sfb-testimonials .testimonial-card__text { font-size: 19px; }
  .sfb-testimonials .testimonial-card--featured .testimonial-card__text { font-size: 22px; }
  .sfb-testimonials .testimonial-card__photo { height: 160px; }
  .sfb-testimonials__cta { padding: 40px var(--sfb-t-pad) 0; }
  .sfb-testimonials__divider { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .sfb-testimonials .sfb-testimonials__column-track { animation: none !important; }
  .sfb-testimonials .reveal { opacity: 1; transform: none; transition: none; }
  .sfb-testimonials__swipe-hint svg { animation: none; }
}
/* END_SECTION:sfb-testimonials */

/* START_SECTION:sfb-welcome-popup (INDEX:70) */
/* All rules scoped to .sfb-wp so they survive Maestrooo's PopIn DOM movement. */
  .sfb-wp {
    --sfb-wp-ink: #1a1916;
    --sfb-wp-espresso: #403e39;
    --sfb-wp-espresso-soft: #706c66;
    --sfb-wp-cream-warm: #F5F0E8;
    --sfb-wp-line: #cfc8bd;
    --sfb-wp-error: #A04A35;
    --sfb-wp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  /* Override Maestrooo's .pop-in defaults — two-pane card. */
  .sfb-wp.pop-in {
    width: min(880px, calc(100vw - 32px)) !important;
    max-width: min(880px, calc(100vw - 32px)) !important;
    padding: 0 !important;
    background: #fff !important;
    color: var(--sfb-wp-espresso) !important;
    border-radius: 0;
    overflow: hidden;
    box-shadow:
      0 30px 80px -20px rgba(64, 62, 57, 0.28),
      0 8px 24px -8px rgba(64, 62, 57, 0.14);
    /* Center in viewport — vendor anchors to bottom-right which doesn't fit a
       two-pane card. !important required because vendor rules win on specificity. */
    inset: 50% auto auto 50% !important;
    transform: translate(-50%, -50%) !important;
  }
  /* Backdrop dimming when the popup is open */
  body.modal-shown::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(64, 62, 57, 0.55);
    z-index: 9;
    pointer-events: none;
  }

  .sfb-wp__layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 560px;
    background: #fff;
    overflow: hidden;
  }

  /* ------- Close ------- */
  .sfb-wp__close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sfb-wp-espresso);
    border-radius: 50%;
    z-index: 5;
    padding: 0;
    transition: background 0.15s var(--sfb-wp-ease);
  }
  .sfb-wp__close:hover { background: rgba(64, 62, 57, 0.08); }
  .sfb-wp__close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.4; }

  /* ------- Left pane ------- */
  .sfb-wp__left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 48px 44px;
    background: #fff;
    text-align: center;
    overflow: hidden;
  }

  /* ------- Right pane ------- */
  .sfb-wp__right {
    position: relative;
    overflow: hidden;
    background: var(--sfb-wp-cream-warm);
  }
  .sfb-wp__right img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .sfb-wp__right::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--sfb-wp-accent) 4%, transparent), color-mix(in srgb, var(--sfb-wp-accent) 18%, transparent));
    z-index: 1;
    pointer-events: none;
  }

  /* ------- Steps ------- */
  .sfb-wp__step {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: sfbWpFadeIn 0.35s ease both;
  }
  .sfb-wp__step[hidden] { display: none; }
  @keyframes sfbWpFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ------- Brand wordmark ------- */
  .sfb-wp__brand {
    font-family: var(--sfb-serif-font, var(--heading-font-family));
    font-size: clamp(30px, 3.4vw, 40px);
    font-weight: 400;
    color: var(--sfb-wp-accent-dark);
    letter-spacing: 0.005em;
    line-height: 1.05;
    margin-bottom: 36px;
  }

  /* ------- Tracked-uppercase labels ------- */
  .sfb-wp__lead,
  .sfb-wp__sub {
    font-family: var(--text-font-family);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sfb-wp-espresso);
  }
  .sfb-wp__lead { margin-bottom: 14px; }
  .sfb-wp__sub { margin-bottom: 32px; }

  /* ------- Hero ------- */
  .sfb-wp__hero {
    font-family: var(--text-font-family);
    font-size: clamp(38px, 5.2vw, 52px);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--sfb-wp-espresso);
    line-height: 1;
    margin-bottom: 14px;
  }

  /* ------- CTAs ------- */
  /* Scoped under .sfb-wp to beat vendor's `button { background: transparent }`
     reset in theme.css (which loads after section styles and ties on specificity). */
  .sfb-wp .sfb-wp__cta {
    width: 100%;
    display: block;
    padding: 18px 24px;
    background: var(--sfb-wp-accent-dark);
    color: #fff;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    transition: background 0.2s var(--sfb-wp-ease), transform 0.1s var(--sfb-wp-ease);
  }
  .sfb-wp .sfb-wp__cta:hover { background: #2c4a40; }
  .sfb-wp .sfb-wp__cta:active { transform: translateY(1px); }
  .sfb-wp .sfb-wp__cta--ink { background: var(--sfb-wp-ink); }
  .sfb-wp .sfb-wp__cta--ink:hover { background: #000; }
  .sfb-wp .sfb-wp__cta[disabled] { opacity: 0.6; cursor: not-allowed; }

  .sfb-wp__decline {
    margin-top: 18px;
    background: transparent;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sfb-wp-espresso);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    cursor: pointer;
    padding: 0;
  }
  .sfb-wp__decline:hover { color: var(--sfb-wp-espresso-soft); }

  /* ------- Form ------- */
  .sfb-wp__form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .sfb-wp__field { position: relative; width: 100%; }
  .sfb-wp__email {
    width: 100%;
    padding: 18px;
    border: 1px solid var(--sfb-wp-line);
    background: #fff;
    font-family: var(--text-font-family);
    font-size: 14px;
    color: var(--sfb-wp-espresso);
    letter-spacing: 0.02em;
    outline: none;
    box-shadow: none;
    border-radius: 0;
    transition: border-color 0.2s var(--sfb-wp-ease), padding 0.15s var(--sfb-wp-ease);
  }
  .sfb-wp__email::placeholder { color: var(--sfb-wp-espresso-soft); }
  .sfb-wp__email:focus { border-color: var(--sfb-wp-accent-dark); }
  .sfb-wp__label {
    position: absolute;
    left: 18px; top: 6px;
    font-family: var(--text-font-family);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sfb-wp-espresso-soft);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s var(--sfb-wp-ease);
  }
  .sfb-wp__field--filled .sfb-wp__email { padding-top: 24px; padding-bottom: 12px; }
  .sfb-wp__field--filled .sfb-wp__label { opacity: 1; }
  .sfb-wp__error {
    font-family: var(--text-font-family);
    font-size: 11px;
    color: var(--sfb-wp-error);
    letter-spacing: 0.04em;
    text-align: left;
    min-height: 14px;
  }
  .sfb-wp__back {
    margin-top: 18px;
    background: transparent;
    border: 0;
    font-family: var(--text-font-family);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sfb-wp-espresso-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
  }
  .sfb-wp__back:hover { color: var(--sfb-wp-espresso); }
  .sfb-wp__back svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

  /* ------- Step 3 success ------- */
  .sfb-wp__check {
    width: 64px; height: 64px;
    border: 1.5px solid var(--sfb-wp-accent-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }
  .sfb-wp__check svg {
    width: 28px; height: 28px;
    stroke: var(--sfb-wp-accent-dark);
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .sfb-wp__success-title {
    font-family: var(--sfb-serif-font, var(--heading-font-family));
    font-size: 34px;
    font-weight: 400;
    color: var(--sfb-wp-accent-dark);
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .sfb-wp__success-body {
    font-family: var(--text-font-family);
    font-size: 13px;
    color: var(--sfb-wp-espresso-soft);
    line-height: 1.65;
    max-width: 320px;
    margin: 0 auto;
  }
  .sfb-wp__success-body strong {
    color: var(--sfb-wp-espresso);
    font-weight: 500;
  }

  /* ------- Tablet ------- */
  @media (max-width: 880px) and (min-width: 561px) {
    .sfb-wp__layout { height: auto; min-height: 520px; }
    .sfb-wp__left { padding: 40px 32px 32px; }
    .sfb-wp__brand { margin-bottom: 24px; }
  }

  /* ------- Phones ------- */
  @media (max-width: 560px) {
    .sfb-wp.pop-in {
      width: min(360px, calc(100vw - 32px)) !important;
      max-width: min(360px, calc(100vw - 32px)) !important;
    }
    .sfb-wp__layout {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      height: auto;
    }
    .sfb-wp__right { display: none; }
    .sfb-wp__left { padding: 40px 26px 32px; }
    .sfb-wp__brand { font-size: 28px; margin-bottom: 32px; }
    .sfb-wp__lead, .sfb-wp__sub { font-size: 12px; }
    .sfb-wp__hero {
      font-size: 42px;
      font-weight: 600;
      letter-spacing: 0.005em;
      margin-bottom: 14px;
    }
    .sfb-wp__sub { margin-bottom: 26px; }
    .sfb-wp__cta { padding: 16px 18px; }
    .sfb-wp__success-title { font-size: 24px; }
    .sfb-wp__close { top: 12px; right: 12px; width: 32px; height: 32px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sfb-wp__step,
    .sfb-wp__cta,
    .sfb-wp__close,
    .sfb-wp__email { transition: none; animation: none; }
  }
/* END_SECTION:sfb-welcome-popup */