/** Shopify CDN: Minification failed

Line 5499:0 Unexpected "{"
Line 5499:1 Expected identifier but found "%"
Line 5501:13 Expected identifier but found whitespace
Line 5502:83 Unterminated string token

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:age-gate (INDEX:0) */
.ag {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ag[hidden] { display: none; }
.ag.ag--active { opacity: 1; }

.ag__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 30, 0.55);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.ag__panel {
  position: relative;
  background: #ffffff;
  color: #1a1a2e;
  max-width: 480px;
  width: 100%;
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ag.ag--active .ag__panel { transform: translateY(0) scale(1); }

.ag__logo {
  display: block;
  margin: 0 auto 1.25rem;
  height: 32px;
  width: auto;
}

.ag__heading {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: #1a1a2e;
}

.ag__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(26, 26, 46, 0.72);
  margin: 0 0 1.75rem;
}
.ag__body p { margin: 0 0 0.5rem; }
.ag__body p:last-child { margin: 0; }

.ag__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.ag__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease, border-color 0.18s ease;
  line-height: 1;
  text-decoration: none;
}
.ag__cta:active { transform: scale(0.98); }

.ag__cta--confirm {
  background: var(--color-brand-green, #48A06A);
  color: #ffffff;
}
.ag__cta--confirm:hover { background: #45a468; }

.ag__cta--decline {
  background: transparent;
  color: rgba(26, 26, 46, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.ag__cta--decline:hover {
  color: #1a1a2e;
  border-color: rgba(0, 0, 0, 0.32);
}

.ag__legal {
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(26, 26, 46, 0.5);
  margin: 0;
}

/* Body lock — prevents scroll while gate is up */
body.ag-locked {
  overflow: hidden;
  height: 100vh;
}

@media (max-width: 480px) {
  .ag__panel { padding: 2rem 1.25rem 1.5rem; border-radius: 14px; }
  .ag__heading { font-size: 1.25rem; }
  .ag__body { font-size: 0.875rem; }
  .ag__cta { padding: 0.75rem 1rem; font-size: 0.875rem; }
}
/* END_SECTION:age-gate */

/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
  background: var(--color-brand-green, #51BD7A);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  position: relative;
  z-index: 60;
}

.announcement-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 1280px;
  margin: 0 auto;
}

.announcement-bar__slides {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: hidden;
}

.announcement-bar__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
  pointer-events: none;
}
.announcement-bar__slide--active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}
/* Exit left (next arrow clicked — content slides out to the left) */
.announcement-bar__slide--exit-left {
  opacity: 0;
  transform: translateX(-100%);
}
/* Enter from right (next arrow — new content slides in from the right) */
.announcement-bar__slide--enter-from-right {
  transform: translateX(100%);
  opacity: 0;
}
/* Enter from left (prev arrow — new content slides in from the left) */
.announcement-bar__slide--enter-from-left {
  transform: translateX(-100%);
  opacity: 0;
}

.announcement-bar__message {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
}

.announcement-bar__text {
  color: inherit;
}

/* Link text — bold + underlined, appears inline after message */
.announcement-bar__link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.announcement-bar__link:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Arrow buttons — inline next to text, compact */
.announcement-bar__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
  flex-shrink: 0;
  padding: 0;
  vertical-align: middle;
}
.announcement-bar__arrow:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

@media (min-width: 640px) {
  .announcement-bar { padding: 6px 16px; }
}
/* END_SECTION:announcement-bar */

/* START_SECTION:app-download (INDEX:2) */
/* Chameleon section: inherits predecessor's background, collapses margins */
  .pdp-app-cta-section {
    margin-top: 0 !important;
    padding: 0;
    background-color: #fff;
  }
  .theme-dark .pdp-app-cta-section {
    background-color: #1e1e21;
  }
  /* On PDP, also paint the preceding reviews wrapper white */
  .pdp-reviews-section {
    background-color: #fff;
  }
  .theme-dark .pdp-reviews-section {
    background-color: #1e1e21;
  }
  .pdp-app-cta {
    padding-block: 12px 2rem;
  }

  .pdp-app-cta__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-xl, 1rem);
    min-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Background variants */
  .pdp-app-cta--light .pdp-app-cta__inner {
    background-color: #f8f7f4;
    color: #1a1a2e;
  }

  .pdp-app-cta--dark .pdp-app-cta__inner {
    background-color: #1a1a2e;
    color: #f8f7f4;
  }

  .pdp-app-cta--accent .pdp-app-cta__inner {
    background-color: #48A06A;
    color: #fff;
  }

  .pdp-app-cta--custom .pdp-app-cta__inner {
    background-color: var(--app-cta-bg, #48A06A);
    color: var(--app-cta-text, #ffffff);
  }

  /* Icon */
  .pdp-app-cta__icon {
    flex-shrink: 0;
  }

  .pdp-app-cta__icon img {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    object-fit: cover;
  }

  /* Text */
  .pdp-app-cta__text {
    flex: 1;
    min-width: 0;
  }

  .pdp-app-cta__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  .pdp-app-cta__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.125rem 0 0;
    opacity: 0.75;
  }

  /* Badges */
  .pdp-app-cta__badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .pdp-app-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    line-height: 1;
  }

  .pdp-app-cta__badge:hover {
    opacity: 0.8;
  }

  .pdp-app-cta__badge-icon {
    flex-shrink: 0;
  }

  /* Light / accent variant badges */
  .pdp-app-cta--light .pdp-app-cta__badge,
  .pdp-app-cta--accent .pdp-app-cta__badge {
    background-color: #48A06A;
    color: #fff;
  }

  /* Dark variant badges */
  .pdp-app-cta--dark .pdp-app-cta__badge {
    background-color: #fff;
    color: #1a1a2e;
  }

  /* Mobile: compact stack */
  @media screen and (max-width: 749px) {
    .pdp-app-cta__inner {
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
    }

    .pdp-app-cta__text {
      flex-basis: calc(100% - 56px);
    }

    .pdp-app-cta__badges {
      width: 100%;
    }

    .pdp-app-cta__badge {
      flex: 1;
      justify-content: center;
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
    }
  }
/* END_SECTION:app-download */

/* START_SECTION:best-sellers (INDEX:3) */
/* ── HP Best Sellers ── */
/* Accent color drives eyebrow pill tint + view-all link color (recolors the
   nf-section-heading eyebrow via CSS variable override). Default = green. */
.hp-bestsellers--accent-green {
  --hp-bs-accent: var(--color-brand-green-dark, #2d8a23);
  --hp-bs-accent-tint: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
}
.hp-bestsellers--accent-warm {
  --hp-bs-accent: #c2410c;
  --hp-bs-accent-tint: #fff7ed;
}
.hp-bestsellers--accent-blue {
  --hp-bs-accent: #1e40af;
  --hp-bs-accent-tint: #eff6ff;
}
.hp-bestsellers--accent-neutral {
  --hp-bs-accent: #1a1a2e;
  --hp-bs-accent-tint: #f5f5f0;
}

/* Override pill eyebrow color/tint when accent is set */
.hp-bestsellers .nf-section-heading__eyebrow {
  background: var(--hp-bs-accent-tint, color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent));
  color: var(--hp-bs-accent, var(--color-brand-green-dark, #2d8a23));
}

.hp-bestsellers__view-all { color: var(--hp-bs-accent, var(--color-text, #1a1a2e)) !important; }

.hp-bestsellers {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
  padding-inline: var(--pdp-gutter, 1.25rem);
  overflow: hidden;
}
@media (min-width: 768px) {
  .hp-bestsellers {
    padding-inline: var(--pdp-gutter, 2rem);
  }
}

.hp-bestsellers__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-xl);
}

.hp-bestsellers__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md, 1.25rem);
  flex-wrap: wrap;
}

.hp-bestsellers__title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
}

.hp-bestsellers__title-row .nf-section-heading__title { margin: 0; }

.hp-bestsellers__subtitle {
  margin: 0;
  max-width: 44rem;
}

.hp-bestsellers__header--center .hp-bestsellers__title-row { justify-content: center; }
.hp-bestsellers__header--center .hp-bestsellers__title-block { align-items: center; text-align: center; }
.hp-bestsellers__header--center .hp-bestsellers__subtitle { text-align: center; margin-inline: auto; }

.hp-bestsellers__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.2s ease;
}

.hp-bestsellers__view-all:hover { opacity: 0.7; }

/* Desktop scroll */
.hp-bestsellers__scroll-wrap {
  position: relative;
  /* flow-root keeps the track's shadow-bleed negative margins from
     collapsing through this wrapper (which would shift the section). */
  display: flow-root;
}

/* ── Gradient fades ── */
.hp-bestsellers__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.hp-bestsellers__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--section-bg, #fff), transparent);
}
.hp-bestsellers__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--section-bg, #fff), transparent);
}

.hp-bestsellers__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Vertical bleed so the card hover shadow (0 8px 24px) can paint
     instead of being clipped by the scroller. The negative margins
     cancel the padding, so net layout keeps the original 0.5rem
     bottom spacing. */
  padding-top: 24px;
  margin-top: -24px;
  padding-bottom: 40px;
  margin-bottom: -32px;
}

.hp-bestsellers__track::-webkit-scrollbar { display: none; }

.hp-bestsellers__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.hp-bestsellers__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.hp-bestsellers__arrow:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.hp-bestsellers__arrow--prev { left: -0.75rem; }
.hp-bestsellers__arrow--next { right: -0.75rem; }

.hp-bestsellers__arrow:disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Mobile grid */
.hp-bestsellers__grid {
  display: none;
}

.hp-bestsellers__footer {
  text-align: center;
  margin-top: var(--space-xl);
}

/* Desktop: show scroll, hide grid */
@media (min-width: 768px) {
  .hp-bestsellers__view-all--mobile { display: none; }
  .hp-bestsellers__grid { display: none; }
  .hp-bestsellers__scroll-wrap { display: flow-root; }
}

/* Mobile: first card aligned with title, scroll bleeds to both viewport edges */
@media (max-width: 767px) {
  .hp-bestsellers {
    overflow: visible;
  }
  .hp-bestsellers__scroll-wrap {
    display: flow-root;
    position: relative;
    /* Bleed both sides to viewport edge */
    margin-left: calc(-1 * var(--space-md, 1rem));
    margin-right: calc(-1 * var(--space-md, 1rem));
  }
  .hp-bestsellers__grid { display: none; }
  .hp-bestsellers__view-all--desktop { display: none; }
  .hp-bestsellers__footer { display: block; }
  .hp-bestsellers__arrow--prev { display: none; }
  .hp-bestsellers__arrow--next {
    display: flex;
    right: 0.5rem;
    width: 36px;
    height: 36px;
  }
  .hp-bestsellers__fade--left {
    display: block;
    left: 0;
    width: 3rem;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .hp-bestsellers__fade--right {
    display: block;
    right: 0;
    width: 3rem;
  }
  .hp-bestsellers__track {
    gap: 0.75rem;
    /* Left padding = container padding, so first card aligns with title */
    padding-left: var(--space-md, 1rem);
    padding-right: 3rem;
  }
  .hp-bestsellers__card { min-width: 200px; max-width: 220px; }
}

/* ════════════════════════════════════════════
   PROMOTION CARD — slots into the carousel as a same-size card.
   Used for "Build Your Own Kit" / contextual CTAs.
   Width matches product-card size 'l' (200px desktop, 180px mobile).
   Height is intentionally unset: the track's default align-items:stretch
   makes the promo match the product cards' natural height. A fixed
   min-height here inflates every card in the row (price row pins to the
   bottom via margin-top:auto → visible void between swatches and price).
   ════════════════════════════════════════════ */
.hp-promo {
  --hp-promo-bg: #1d4ed8;
  --hp-promo-cta-text: #1d4ed8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 100%;
  padding: 1.25rem 1.125rem 1.125rem;
  border-radius: 14px;
  background: var(--hp-promo-bg);
  color: #fff;
  text-align: left;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
.hp-promo--accent-dark  { --hp-promo-bg: #1a1a2e; --hp-promo-cta-text: #1a1a2e; }
.hp-promo--accent-green { --hp-promo-bg: var(--color-brand-green-dark, #2d8a23); --hp-promo-cta-text: var(--color-brand-green-dark, #2d8a23); }

.hp-promo__body {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.hp-promo__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3125rem 0.75rem;
  background: rgba(255,255,255,0.18);
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff;
}

.hp-promo__heading {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}

.hp-promo__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.85);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hp-promo__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.625rem 1rem;
  margin-top: 1rem;
  background: #fff;
  color: var(--hp-promo-cta-text);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease;
  align-self: stretch;
}
.hp-promo__cta:hover {
  transform: translateY(-1px);
}

@media (max-width: 749px) {
  .hp-promo { width: 180px; }
  .hp-promo__heading { font-size: 1.25rem; }
}
/* END_SECTION:best-sellers */

/* START_SECTION:brand-segment-portal (INDEX:4) */
.bsp {
  width: 100%;
  /* Bleed full-bleed so the section actually takes the viewport */
  margin-inline: calc(50% - 50vw);
  padding: 0;
}

.bsp__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--bsp-mobile-h, 60vh);
}

@media (min-width: 990px) {
  .bsp__inner {
    flex-direction: row;
    /* 85vh minus the sticky header so the About section peeks below = invites scroll */
    min-height: calc(var(--bsp-min-h, 85vh) - var(--bsp-header-offset, 60px));
    height: calc(var(--bsp-min-h, 85vh) - var(--bsp-header-offset, 60px));
  }
  /* Hover-expand pattern: parent loses focus on each panel hover. */
  .bsp__inner:has(.bsp__panel:hover) .bsp__panel { flex: 0.85; }
  .bsp__inner .bsp__panel:hover { flex: 1.5; }
}

.bsp__panel {
  position: relative;
  overflow: hidden;
  display: block;
  text-decoration: none;
  color: #fff;
  background: var(--bsp-tone, #0d0d18);
  flex: 1;
  min-height: var(--bsp-mobile-h, 60vh);
  isolation: isolate;
  /* flex is a layout property — keep the reflow window short.
     (Post-launch: replace with transform: scaleX on a wrapper.) */
  transition: flex 400ms cubic-bezier(0.77, 0, 0.175, 1);
  border: none; /* no dividing lines between panels */
}
@media (min-width: 990px) {
  .bsp__panel { min-height: calc(var(--bsp-min-h, 85vh) - var(--bsp-header-offset, 60px)); }
}

/* ── Hover-expand pattern using :not(:hover) on siblings.
   When the parent .bsp__inner is hovered (any descendant), shrink every
   panel that isn't the hovered one and expand the hovered one. More widely
   supported than :has() and survives older browsers gracefully. ── */
@media (hover: hover) and (min-width: 990px) {
  .bsp__inner:hover .bsp__panel:not(:hover) { flex: 0.78; }
  .bsp__inner .bsp__panel:hover { flex: 1.6; }
}

.bsp__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (min-width: 990px) {
  .bsp__panel:hover .bsp__img { transform: scale(1.04); }
}

.bsp__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.08) 30%, rgba(0,0,0,0.5) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.45), transparent 70%);
  /* No transition: CSS cannot interpolate multi-layer gradient backgrounds,
     so the old `transition: background 0.8s` was a no-op — the shade always
     snapped. (To crossfade for real: hover gradient on a ::after, animate
     opacity — post-launch.) */
}
.bsp__panel:hover .bsp__shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.6) 100%),
    radial-gradient(120% 80% at 50% 100%, rgba(0,0,0,0.5), transparent 70%);
}

.bsp__body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  z-index: 1;
}

.bsp__badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}

.bsp__eyebrow {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
  margin-bottom: 0.875rem;
}

.bsp__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.bsp__subtitle {
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.5rem;
  max-width: 22rem;
  text-wrap: balance;
}

.bsp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.005em;
  transition: gap 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.bsp__panel:hover .bsp__cta { gap: 0.85rem; }
.bsp__cta svg { flex-shrink: 0; }

@media (max-width: 989px) {
  .bsp__heading { font-size: clamp(2rem, 6vw, 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .bsp__panel, .bsp__img, .bsp__shade, .bsp__cta { transition: none; }
  .bsp__panel:hover .bsp__img { transform: none; }
}
/* END_SECTION:brand-segment-portal */

/* START_SECTION:brand-segment (INDEX:5) */
/* ── Brand Segment Bar ─────────────────────────────────────────────────
   Top strip with brand tabs. Uses a transparent inset underline on the
   active tab that sits flush with the bar's bottom border (no corner
   radius — old Safari versions rendered the 1.5px-tall pill at angle).
   Padding is split into block (vertical) + inline (horizontal) so the
   underline lines up cleanly with the label/icon's optical center.
*/
.nf-brand-bar { background: #ffffff; border-bottom: 1px solid #eaeaea; font-family: inherit; }
.nf-brand-bar--desktop { display: none; }
.nf-brand-bar--mobile { display: block; }
.nf-brand-bar__inner { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; padding: 0 2rem; height: 30px; }
.nf-brand-bar__tabs { display: flex; align-items: stretch; gap: 0; height: 100%; }

.nf-brand-bar__tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 14px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--color-text-muted, #999); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none;
  position: relative;
  /* Reserve underline space so the active state doesn't shift layout */
  border-block-end: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.nf-brand-bar__tab:first-child { padding-inline-start: 0; }
.nf-brand-bar__tab:hover { color: #555; }

/* Active state — single solid 2px underline using border, perfectly
   square corners by definition, aligned with the bar's bottom border. */
.nf-brand-bar__tab--active {
  color: #1a1a2e;
  font-weight: 700;
  border-block-end-color: #1a1a2e;
}

.nf-brand-bar__tab-segment { line-height: 1; }

/* Icon-only tab variant (e.g. home / house icon for the corporate tab).
   Drops uppercase letter-spacing meant for text labels and tightens
   horizontal padding so the icon sits centered. The icon inherits the
   tab color so hover/active states cascade naturally. */
.nf-brand-bar__tab--icon { padding-inline: 12px; letter-spacing: normal; }
.nf-brand-bar__tab--icon:first-child { padding-inline-start: 4px; }
.nf-brand-bar__tab-icon { display: block; flex-shrink: 0; }

.nf-brand-bar__divider {
  width: 1px; height: 12px;
  background: #e3e3e3;
  flex-shrink: 0;
  align-self: center;
}
.nf-brand-bar__social { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 14px; }
.nf-brand-bar__support-link { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #555; text-decoration: none; padding: 4px 10px; border: 1px solid #e2e2e2; border-radius: 999px; margin-inline-end: 4px; transition: color 0.2s, border-color 0.2s; }
.nf-brand-bar__support-link:hover { color: #1a1a1a; border-color: #bbb; }
.nf-brand-bar__social-link { color: #bbb; display: inline-flex; align-items: center; transition: color 120ms ease; }
.nf-brand-bar__social-link:hover { color: #555; }

/* Mobile — same logic, slightly tighter spacing + smaller font */
.nf-brand-bar--mobile .nf-brand-bar__inner { padding: 0 1rem; height: 28px; }
.nf-brand-bar--mobile .nf-brand-bar__tab { padding-inline: 10px; font-size: 9px; }
.nf-brand-bar--mobile .nf-brand-bar__tab--icon { padding-inline: 10px; }
.nf-brand-bar--mobile .nf-brand-bar__tab--icon:first-child { padding-inline-start: 2px; }

@media (min-width: 768px) {
  .nf-brand-bar--desktop { display: block; }
  .nf-brand-bar--mobile { display: none; }
}

/* ── Segment nav containers ── */
.nf-segment-nav[hidden], .nf-segment-right-nav[hidden], .nf-segment-mega[hidden], .nf-segment-mobile-menu[hidden] { display: none !important; }
.nf-segment-nav { display: flex; }
.nf-segment-right-nav { display: flex; align-items: center; gap: 0; }
.nf-segment-mobile-menu { display: contents; }
/* END_SECTION:brand-segment */

/* START_SECTION:bundler-blocks (INDEX:6) */
/* ═══════════════════════════════════════
   BUNDLER BLOCKS — BYOB Section
   Nanoleaf Design System
   ═══════════════════════════════════════ */

:root {
  --bb-dark: #1a1a2e;
  --bb-green: var(--color-brand-green, #48A06A);
  --bb-green-light: #e8f5e7;
  --bb-surface: #f5f4f0;
  --bb-border: #e5e5e5;
  --bb-radius: 12px;
  --bb-pill: 999px;
  --bb-shadow: 0 1px 3px rgba(0,0,0,0.08);
  --bb-shadow-lg: 0 4px 16px rgba(0,0,0,0.10);
}

.bb {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--bb-dark);
  background: #fff;
}

/* ── Section reset: hero flush to header ── */
.bundler-blocks-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ── Hero (light surface) ── */
.bb__hero-wrap {
  background: var(--bb-surface, #f7f7f8);
  margin-bottom: 2.5rem;
}
.bb__hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.75rem 2rem 3rem;
}
.bb__hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.bb__heading {
  font-size: 2.75rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--bb-dark);
}
.bb__subheading {
  font-size: 1.125rem;
  margin: 0;
  color: #5b5b66;
  line-height: 1.55;
}
.bb__hero-tiers {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.bb__hero-tier-pill {
  display: inline-flex;
  padding: 0.3rem 0.75rem;
  background: rgba(72,160,106,0.12);
  color: #2f7a4d;
  border-radius: var(--bb-pill);
  font-size: 0.75rem;
  font-weight: 700;
}
.bb__hero-image {
  border-radius: var(--bb-radius);
  overflow: hidden;
}
.bb__hero-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--bb-radius);
}
@media (max-width: 749px) {
  .bb__hero {
    grid-template-columns: 1fr;
    padding: 2rem 1rem 1.5rem;
    text-align: center;
  }
  .bb__heading { font-size: 1.75rem; }
  .bb__subheading { font-size: 0.9375rem; color: rgba(255,255,255,0.7); }
  .bb__hero-tiers { justify-content: center; }
  .bb__hero-image { order: -1; }
  .bb__hero-wrap { margin-bottom: 1.5rem; }
}

/* ── Breadcrumb ── */
.bb__breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 2rem 0;
}
.bb__breadcrumb ol {
  display: flex;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: #999;
}
.bb__breadcrumb li + li::before {
  content: '›';
  margin-right: 0.35rem;
}
.bb__breadcrumb a {
  color: #666;
  text-decoration: none;
}
.bb__breadcrumb a:hover {
  color: var(--bb-dark);
  text-decoration: underline;
}
.bb__breadcrumb [aria-current="page"] {
  color: var(--bb-dark);
  font-weight: 600;
}
@media (max-width: 749px) {
  .bb__breadcrumb { padding: 1rem 1rem 0; }
}

/* ── Two-column layout ── */
.bb__layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  align-items: start;
}
@media (max-width: 999px) {
  .bb__layout {
    grid-template-columns: 1fr;
    padding: 0 1rem 2rem;
  }
}

/* ── Steps ── */
.bb__step {
  margin-bottom: 2rem;
}
.bb__step-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.bb__step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--bb-dark);
  color: #fff;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}
.bb__step-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  color: var(--bb-dark);
}
.bb__step-note {
  font-size: 0.8125rem;
  color: #777;
  margin: 0 0 0.75rem 2.75rem;
  line-height: 1.5;
}
.bb__step-link {
  color: var(--bb-green);
  text-decoration: underline;
  font-weight: 600;
}
.bb__step-body {
  margin-left: 2.75rem;
}

/* ── Inline PSU Helper ── */
.bb__psu-helper {
  margin: 0 0 1rem 2.75rem;
}
.bb__psu-helper-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border-radius: var(--bb-pill);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--bb-dark);
  cursor: pointer;
  list-style: none;
  transition: border-color 0.15s;
}
.bb__psu-helper-toggle::-webkit-details-marker { display: none; }
.bb__psu-helper-toggle:hover { border-color: var(--bb-dark); }
.bb__psu-helper[open] .bb__psu-helper-toggle {
  border-color: var(--bb-green);
  color: var(--bb-green);
}
.bb__psu-helper-body {
  margin-top: 0.75rem;
  padding: 1.25rem;
  border-radius: var(--bb-radius);
  background: var(--bb-surface);
  border: 1px solid var(--bb-border);
}
.bb__psu-helper-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: block;
  color: var(--bb-dark);
}
.bb__psu-helper-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.bb__psu-helper-input {
  width: 80px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border);
  font-size: 0.875rem;
  font-family: inherit;
  text-align: center;
}
.bb__psu-helper-input:focus {
  outline: none;
  border-color: var(--bb-green);
  box-shadow: 0 0 0 2px rgba(74,175,71,0.15);
}
.bb__psu-helper-unit {
  font-size: 0.8125rem;
  color: #777;
}
.bb__psu-helper-result {
  padding: 0.625rem 1rem;
  border-radius: var(--bb-radius);
  background: #fff;
  border: 1px solid var(--bb-border);
  font-size: 0.875rem;
  color: var(--bb-dark);
  margin-bottom: 0.5rem;
}
.bb__psu-helper-result strong {
  color: var(--bb-green);
  font-size: 1.125rem;
}
.bb__psu-helper-note {
  font-size: 0.75rem;
  color: #999;
  margin: 0 0 0.75rem;
}
.bb__psu-helper-link {
  font-size: 0.8125rem;
  color: var(--bb-green);
  font-weight: 600;
  text-decoration: none;
}
.bb__psu-helper-link:hover { text-decoration: underline; }

@media (max-width: 749px) {
  .bb__step-body { margin-left: 0; }
  .bb__step-note { margin-left: 0; }
  .bb__psu-helper { margin-left: 0; }
}

/* ── Mode Switcher ── */
.bb__mode-switcher {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 2rem;
}
.bb__mode-switcher-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.bb__mode-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--bb-radius);
  border: 2px solid var(--bb-border);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: left;
  font-family: inherit;
}
.bb__mode-card:hover {
  border-color: #999;
}
.bb__mode-card.is-active {
  border-color: var(--bb-dark);
  box-shadow: 0 0 0 1px var(--bb-dark);
}
.bb__mode-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-card);
  background: var(--bb-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb__mode-card.is-active .bb__mode-icon {
  background: var(--bb-dark);
  color: #fff;
}
.bb__mode-icon svg { color: inherit; }
.bb__mode-text { flex: 1; }
.bb__mode-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--bb-dark);
}
.bb__mode-desc {
  font-size: 0.8125rem;
  margin: 0;
  color: #666;
  line-height: 1.45;
}
@media (max-width: 749px) {
  .bb__mode-switcher { padding: 0 1rem; }
  .bb__mode-switcher-inner { grid-template-columns: 1fr; }
}

/* ── Kits grid ── */
.bb__kits {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}
.bb__kits-header {
  margin-bottom: 1.5rem;
}
.bb__kits-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.bb__filter-pill {
  padding: 0.375rem 1rem;
  border-radius: var(--bb-pill);
  border: 1px solid var(--bb-border);
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  color: var(--bb-dark);
}
.bb__filter-pill:hover { border-color: #999; }
.bb__filter-pill.is-active {
  background: var(--bb-dark);
  color: #fff;
  border-color: var(--bb-dark);
}
.bb__kits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.bb__kit-card {
  border-radius: var(--bb-radius);
  border: 1px solid var(--bb-border);
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.bb__kit-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.bb__kit-card-img {
  display: block;
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bb-surface);
}
.bb__kit-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: multiply;
}
.bb__kit-card-body {
  padding: 1rem;
}
.bb__kit-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bb-dark);
  text-decoration: none;
  display: block;
  margin-bottom: 0.375rem;
  line-height: 1.35;
}
.bb__kit-card-title:hover { text-decoration: underline; text-underline-offset: 2px; }
.bb__kit-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.bb__kit-card-price {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--bb-dark);
}
.bb__kit-card-compare {
  font-size: 0.8125rem;
  color: #999;
  text-decoration: line-through;
}
.bb__kit-card-actions {
  display: flex;
  gap: 0.5rem;
}
.bb__kit-qv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bb-pill);
  border: 1px solid var(--bb-border);
  background: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: inherit;
  color: var(--bb-dark);
}
.bb__kit-qv-btn:hover { border-color: var(--bb-dark); }
.bb__kit-atc-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bb-pill);
  border: none;
  background: var(--bb-dark);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}
.bb__kit-atc-btn:hover { opacity: 0.85; }
.bb__kit-atc-btn.is-added { background: var(--bb-green); }
.bb__kit-sold-out {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border-radius: var(--bb-pill);
  border: 1px solid var(--bb-border);
  background: var(--bb-surface);
  color: #999;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: center;
}
@media (max-width: 749px) {
  .bb__kits { padding: 0 1rem; }
  .bb__kits-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .bb__kit-card-actions { flex-direction: column; }
}

/* ── Product grid ── */
.bb__product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.75rem;
}
.bb__product-grid--accessories {
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
}
@media (max-width: 749px) {
  .bb__product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }
}

/* ── Product card ── */
.bb__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bb__card.is-selected {
  border-color: var(--bb-green);
  box-shadow: 0 0 0 2px var(--bb-green);
}
.bb__card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bb-surface);
}
.bb__card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bb__badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--bb-pill);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}
.bb__badge--sale { background: #e63946; }
.bb__badge--sold-out { background: #ef4444; }
.bb__card-body {
  padding: 0.625rem 0.75rem 0.375rem;
  flex: 1;
}
.bb__card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.125rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bb__card-price {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--bb-dark);
}

/* ── Variant dropdown ── */
.bb__variant-select {
  margin-top: 0.375rem;
}
.bb__variant-label {
  font-size: 0.6875rem;
  color: #999;
  display: block;
  margin-bottom: 0.15rem;
}
.bb__variant-dropdown {
  width: 100%;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bb-border);
  border-radius: 8px;
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--bb-dark);
  background: #fff;
  cursor: pointer;
}

/* ── Card actions ── */
.bb__card-actions {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bb__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.5rem 0;
  background: var(--bb-dark);
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.bb__add-btn:hover {
  background: var(--bb-green);
  transform: scale(1.03);
}
.bb__qty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.bb__qty button {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--bb-dark);
  transition: background 0.15s;
}
.bb__qty button:hover { background: var(--bb-surface); }
.bb__qty span {
  width: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}
.bb__sold-out-label {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: #999;
  font-weight: 600;
}
.bb__empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #999;
}

/* ── Sidebar & Summary ── */
.bb__sidebar {
  position: sticky;
  top: 1.5rem;
  align-self: start;
}
@media (max-width: 999px) {
  .bb__sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    z-index: 90;
    padding: 0;
  }
  .bb__summary {
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12) !important;
    max-height: 60vh;
    overflow-y: auto;
  }
}
@media (min-width: 1000px) {
  .bb__summary {
    max-height: none;
    overflow-y: visible;
  }
}

.bb__summary {
  background: #fff;
  border: 1px solid var(--bb-border);
  border-radius: var(--bb-radius);
  box-shadow: var(--bb-shadow-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.3s ease;
}
.bb__summary-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: var(--bb-dark);
}

/* ── Tier buttons in summary ── */
.bb__tier-progress {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bb__tier-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bb-surface);
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.bb__tier-btn:hover {
  border-color: var(--bb-border);
}
.bb__tier-btn.is-active {
  border-color: var(--bb-dark);
}
.bb__tier-btn.is-reached {
  border-color: var(--bb-green);
  background: var(--bb-green-light);
}
.bb__tier-label {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--bb-dark);
}
.bb__tier-meta {
  font-size: 0.6875rem;
  color: #777;
}
.bb__tier-check {
  display: none;
  width: 20px;
  height: 20px;
  background: var(--bb-green);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bb__tier-btn.is-reached .bb__tier-check {
  display: flex;
}

/* ── Progress bar ── */
.bb__progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bb__progress-bar {
  height: 6px;
  background: var(--bb-surface);
  border-radius: 3px;
  overflow: hidden;
}
.bb__progress-fill {
  height: 100%;
  background: var(--bb-green);
  border-radius: 3px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb__progress-text {
  font-size: 0.6875rem;
  color: #999;
  margin: 0;
}

/* ── Summary items ── */
.bb__summary-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 180px;
  overflow-y: auto;
}
.bb__summary-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #555;
  padding: 0.2rem 0;
}
.bb__summary-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.5rem;
}

/* ── Totals ── */
.bb__summary-totals {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bb-border);
}
.bb__summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: #555;
}
.bb__summary-row--discount .bb__summary-savings {
  color: var(--bb-green);
  font-weight: 700;
}
.bb__summary-row--total {
  font-size: 1rem;
  color: var(--bb-dark);
  font-weight: 700;
  padding-top: 0.35rem;
  border-top: 1px solid var(--bb-border);
}
.bb__summary-count {
  font-size: 0.75rem;
  color: #999;
  text-align: center;
}

/* ── Add to cart button ── */
.bb__atc-btn {
  width: 100%;
  padding: 0.875rem;
  background: var(--bb-green);
  color: #fff;
  border: none;
  border-radius: var(--bb-pill);
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.15s;
}
.bb__atc-btn:hover:not(:disabled) {
  background: #3d9a3b;
  transform: scale(1.02);
}
.bb__atc-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.bb__atc-btn.is-adding {
  opacity: 0.7;
  pointer-events: none;
}
.bb__atc-btn.is-added {
  background: var(--bb-dark);
}

/* Eyebrow */
.bb__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-text-secondary, #71717a);
  line-height: 1.2;
  margin-block-end: 0.5rem;
}
@media (min-width: 750px) { .bb__eyebrow { font-size: 0.8125rem; } }
/* END_SECTION:bundler-blocks */

/* START_SECTION:bundler (INDEX:7) */
/* ═══════════════════════════════════════
   BUNDLER — Bundle Builder Section
   ═══════════════════════════════════════ */

.bundler {
  display: block;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1a1a2e;
}

/* ── Hero ── */
.bundler__hero {
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
  color: #fff;
}
.bundler__hero-inner {
  max-width: 640px;
  margin: 0 auto;
}
.bundler__heading {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.bundler__subheading {
  font-size: 1rem;
  margin: 0;
  opacity: 0.85;
  line-height: 1.5;
}
@media (max-width: 749px) {
  .bundler__hero { padding: 2.5rem 1rem 2rem; }
  .bundler__heading { font-size: 1.625rem; }
  .bundler__subheading { font-size: 0.875rem; }
}

/* ── Tier selector ── */
.bundler__tiers {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 0;
  max-width: 900px;
  margin: 0 auto;
  justify-content: center;
  flex-wrap: wrap;
}
.bundler__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1rem 1.5rem;
  background: #fff;
  border: 2px solid #e5e5e5;
  border-radius: var(--radius-card);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-width: 160px;
}
.bundler__tier:hover {
  border-color: #bbb;
}
.bundler__tier.is-active {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 1px #1a1a2e;
}
.bundler__tier.is-reached {
  border-color: var(--color-brand-green, #48A06A);
  box-shadow: 0 0 0 1px var(--color-brand-green, #48A06A);
}
.bundler__tier-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1a1a2e;
}
.bundler__tier-meta {
  font-size: 0.75rem;
  color: #71717a;
}
.bundler__tier-check {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}
.bundler__tier.is-reached .bundler__tier-check {
  display: flex;
}
@media (max-width: 749px) {
  .bundler__tiers { padding: 1rem; gap: 0.5rem; }
  .bundler__tier { padding: 0.75rem 1rem; min-width: 0; flex: 1; }
  .bundler__tier-label { font-size: 0.8125rem; }
}

/* ── Product grid ── */
.bundler__grid-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem;
}
.bundler__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.bundler__product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.bundler__product.is-selected {
  border-color: #1a1a2e;
  box-shadow: 0 0 0 1px #1a1a2e;
}
.bundler__product-img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f9f9f9;
}
.bundler__product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bundler__product-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-button);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}
.bundler__product-badge--sale { background: #e63946; }
.bundler__product-badge--sold-out { background: #ef4444; }
.bundler__product-info {
  padding: 0.625rem 0.75rem 0.375rem;
  flex: 1;
}
.bundler__product-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0 0 0.125rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bundler__product-price {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0;
  color: #1a1a2e;
}
.bundler__product-actions {
  padding: 0 0.75rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bundler__product-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
  padding: 0.4375rem 0;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.25s, transform 0.2s;
}
.bundler__product-toggle:hover { background: var(--color-brand-green, #48A06A); transform: scale(1.04); }
.bundler__product-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.bundler__product-qty button {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  color: #1a1a2e;
  transition: background 0.15s;
}
.bundler__product-qty button:hover { background: #f5f5f5; }
.bundler__product-qty span {
  width: 2rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}
.bundler__product-sold-out {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  color: #999;
  font-weight: 600;
}
.bundler__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
}
@media (max-width: 749px) {
  .bundler__grid-wrap { padding: 1rem; }
  .bundler__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* ── Sticky summary bar ── */
.bundler__summary {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.bundler__summary.is-visible {
  transform: translateY(0);
}
.bundler__summary[hidden] { display: none; }
.bundler__summary-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
}
.bundler__summary-details {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.bundler__summary-count {
  font-size: 0.875rem;
  font-weight: 700;
}
.bundler__summary-original {
  font-size: 0.8125rem;
  color: #999;
}
.bundler__summary-total {
  font-size: 1rem;
  color: #1a1a2e;
}
.bundler__summary-savings {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand-green, #48A06A);
  background: #f0fdf4;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-button);
}
.bundler__summary-add {
  padding: 0.75rem 1.5rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bundler__summary-add:hover { background: #2a2a2d; }
.bundler__summary-add:disabled { opacity: 0.4; cursor: default; }
.bundler__summary-add.is-adding { opacity: 0.7; pointer-events: none; }
.bundler__summary-add.is-added { background: var(--color-brand-green, #48A06A); }
@media (max-width: 749px) {
  .bundler__summary-inner {
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.5rem;
  }
  .bundler__summary-details { justify-content: center; gap: 0.5rem; }
  .bundler__summary-add { width: 100%; text-align: center; }
}

/* Eyebrow */
.bundler__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-text-secondary, #71717a);
  line-height: 1.2;
  margin-block-end: 0.5rem;
}
@media (min-width: 750px) { .bundler__eyebrow { font-size: 0.8125rem; } }
/* END_SECTION:bundler */

/* START_SECTION:cart-drawer (INDEX:9) */
/* ══════════════════════════════════════════
   CART DRAWER — On-brand CRO Styles
   ══════════════════════════════════════════ */

/* ── Backdrop ── */
.nf-cart-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  z-index: 998; opacity: 0; transition: opacity 0.3s ease;
  cursor: pointer;
}
.nf-cart-backdrop[hidden] { display: none; }
.nf-cart-backdrop.is-visible { opacity: 1; }

/* ── Drawer Shell ── */
.nf-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 460px; max-width: 100vw;
  background: #fff; z-index: 999;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: var(--font-body, inherit);
  box-shadow: -8px 0 30px rgba(0,0,0,0.12);
  overscroll-behavior: contain;
}
.nf-cart-drawer.is-open { transform: translateX(0); }

/* ── Header ── */
.nf-cart-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;

}
.nf-cart-drawer__header-left { display: flex; align-items: center; gap: 8px; }
.nf-cart-drawer__title { font-size: 16px; font-weight: 700; color: var(--color-foreground, #1a1a2e); margin: 0; }
.nf-cart-drawer__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--color-primary, #1a1a2e); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: var(--radius-button);

}
.nf-cart-drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #f5f4f0; border: none; cursor: pointer;
  color: #555; transition: all 0.15s;
  position: relative;

}
/* 44x44 minimum hit area without inflating the 32px visual circle */
.nf-cart-drawer__close::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.nf-cart-drawer__close:hover { background: #eee; color: var(--color-foreground, #1a1a2e); }

/* ── Free Shipping Bar ── */
.nf-cart-drawer__shipping-bar {
  padding: 12px 20px;
  background: #f9f9f7;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;

}
.nf-cart-drawer__shipping-bar.is-qualified { background: #f0faf0; }
.nf-cart-drawer__shipping-bar.is-empty-cart {
  padding: 10px 20px;
  background: transparent;
  border-bottom: none;

}
.nf-cart-drawer__shipping-bar.is-empty-cart .nf-cart-drawer__shipping-progress { display: none; }
.nf-cart-drawer__shipping-bar.is-empty-cart .nf-cart-drawer__shipping-text { margin: 0; justify-content: center; }
.nf-cart-drawer__shipping-progress {
  width: 100%; height: 6px; background: #e5e5e5;
  border-radius: 999px; overflow: hidden;

}
.nf-cart-drawer__shipping-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #2d8a23, #3ec232);
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);

}
.nf-cart-drawer__shipping-text {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #555; margin: 8px 0 0;

}
.nf-cart-drawer__shipping-text svg { flex-shrink: 0; color: #2d8a23; }
.nf-cart-drawer__shipping-bar.is-qualified .nf-cart-drawer__shipping-text { color: #2d8a23; }
/* Own line rather than pinned to the right of the shipping message: the timer
   carries a full sentence now, and squeezing both onto one 12px row inside a
   100vw mobile drawer crushed the shipping copy. */
.nf-cart-drawer__shipping-timer {
  display: flex; align-items: center; gap: 5px;
  margin: 8px 0 0;
  color: var(--color-accent, #e63946);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;

}
/* display:flex above beats the UA [hidden] rule — without this timerEl.hidden =
   true was a no-op. main-cart.liquid fixes the identical bug on its
   .cart-pg__shipping-note. */
.nf-cart-drawer__shipping-timer[hidden] { display: none; }
.nf-cart-drawer__shipping-timer svg { flex-shrink: 0; color: var(--color-accent, #e63946); }
.nf-cart-drawer__shipping-timer [data-cart-timer-display] { white-space: nowrap; }
.nf-cart-drawer__shipping-bar.is-empty-cart .nf-cart-drawer__shipping-timer { justify-content: center; }

/* A free-shipping threshold of 0 divides by zero for the progress width and
   makes `total >= threshold` true for an empty cart, so the bar and its message
   are dropped rather than claiming free shipping on nothing. */
.nf-cart-drawer__shipping-bar[hidden] { display: none; }
.nf-cart-drawer__shipping-bar.is-no-threshold .nf-cart-drawer__shipping-progress,
.nf-cart-drawer__shipping-bar.is-no-threshold .nf-cart-drawer__shipping-text { display: none; }
.nf-cart-drawer__shipping-bar.is-no-threshold .nf-cart-drawer__shipping-timer { margin-top: 0; }

/* ── Items Container ── */
.nf-cart-drawer__items {
  flex: 1; overflow-y: auto; padding: 0;
  -webkit-overflow-scrolling: touch;
  position: relative;
  transition: opacity 0.22s ease;

}
.nf-cart-drawer__items.is-fading-out {
  opacity: 0;
  transition: opacity 0.18s ease;

}
/* Scroll fade gradient — bottom edge indicator */
.nf-cart-drawer__items-wrap {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  /* overflow:hidden resolves min-height:auto to 0, so on short viewports the
     fixed-height neighbours (header, shipping bar, upsell, summary) could eat
     ALL the space and the item list collapsed to nothing — Iris saw an empty
     cart at 100% zoom on a MacBook (2026-08-11). Guarantee one item's worth. */
  min-height: 148px;
}
/* When even that floor doesn't fit, the recommendations yield — the items ARE
   the cart; upsell is a nice-to-have. */
@media (max-height: 760px) {
  .nf-cart-drawer__upsell { display: none; }
}
.nf-cart-drawer__items-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.95));
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;

}
.nf-cart-drawer__items-wrap.has-overflow::after {
  opacity: 1;

}
/* display:flex above beats the UA [hidden] rule. Without this the wrapper keeps
   flex: 1 on an empty cart and the empty block only centres in the half of the
   drawer body that is left over. */
.nf-cart-drawer__items-wrap[hidden] { display: none; }

/* ── Error strip (add/update failures) ── */
.nf-cart-drawer__error {
  flex-shrink: 0;
  margin: 0;
  padding: 10px 20px;
  background: #fdf2f0;
  border-bottom: 1px solid #f3d9d3;
  font-size: 12px; line-height: 1.4;
  color: #a53f2c;

}
.nf-cart-drawer__error[hidden] { display: none; }

/* ── Live region — announced, never seen ── */
.nf-cart-drawer__live {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;

}

/* ── Empty State Trust Bar (under shipping bar) ── */
.nf-cart-drawer__empty-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 10px 20px;
  background: #f9f9f7; border-bottom: 1px solid #eee;
  flex-shrink: 0; flex-wrap: wrap;

}
.nf-cart-drawer__empty-trust[hidden] { display: none; }
.nf-cart-drawer__empty-trust-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; color: #555;
  white-space: nowrap;

}
.nf-cart-drawer__empty-trust-sep {
  width: 1px; height: 12px; background: #ddd; margin: 0 10px; flex-shrink: 0;

}

/* ── Empty State — centred in the drawer body, scrolls if it outgrows it ── */
.nf-cart-drawer__empty {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  transition: opacity 0.22s ease;

}
.nf-cart-drawer__empty::-webkit-scrollbar { display: none; }
.nf-cart-drawer__empty[hidden] { display: none; }

.nf-cart-drawer__empty-inner {
  /* auto block margins centre the group in the leftover height without the
     clipping that justify-content: center causes inside a scroll container */
  margin-block: auto;
  padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;

}

.nf-cart-drawer__empty-icon {
  display: block;
  margin-block-end: 16px;
  color: var(--color-text-muted, #71717a);
  opacity: 0.5;

}
.nf-cart-drawer__empty-icon svg { display: block; }

.nf-cart-drawer__empty-heading {
  font-size: 18px; font-weight: 700; color: var(--color-foreground, #1a1a2e);
  margin: 0 0 6px;
  letter-spacing: -0.01em;

}

.nf-cart-drawer__empty-sub {
  font-size: 13px; font-weight: 400; color: var(--color-text-muted, #71717a);
  margin: 0 0 20px;

}

/* ── Empty State: brand segment links ──
   Same shape as the primary CTA on the cart page empty state
   (.cart-pg__empty-cta): filled dark pill, white label, full radius. Three
   equal destinations, so none of them is demoted to a secondary style. */
.nf-cart-drawer__segments {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; max-width: 20rem;

}
.nf-cart-drawer__segment {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem; font-weight: 600; line-height: 1.2;
  color: #fff;
  text-decoration: none;
  background: var(--color-foreground, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  transition: opacity 0.2s ease;

}
.nf-cart-drawer__segment:hover {
  opacity: 0.85;
  color: #fff;
  text-decoration: none;

}
.nf-cart-drawer__segment:focus-visible {
  outline: 2px solid var(--color-foreground, #1a1a2e);
  outline-offset: 2px;

}
.nf-cart-drawer__segment svg { flex-shrink: 0; opacity: 0.7; }
.nf-cart-drawer__segment:hover svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nf-cart-drawer__segment { transition: none; }
}

/* (USPs removed from empty state — redundant with footer guarantees) */

/* ── Single Item ── */
.nf-cart-drawer__item {
  display: flex; gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;

}
.nf-cart-drawer__item.is-updating {
  pointer-events: none;

}
/* Full overlay spinner centered on the entire line item */
.nf-cart-drawer__item.is-updating::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  z-index: 3;

}
.nf-cart-drawer__item.is-updating::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border: 2.5px solid var(--color-border, #deddd8);
  border-top-color: var(--color-primary, #1a1a2e);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 4;

}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Smooth cart state transitions ──
   (the .nf-cart-drawer__items and .nf-cart-drawer__empty base rules that used to
   be duplicated here now live with their originals further up) */
.nf-cart-drawer__empty.is-fading-in {
  opacity: 0;
  animation: cartFadeIn 0.28s ease forwards;

}
@keyframes cartFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }

}


.nf-cart-drawer__item-img-link { flex-shrink: 0; }
.nf-cart-drawer__item-img {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 10px; background: #f5f4f0;
  border: 1px solid #eee;

}
.nf-cart-drawer__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nf-cart-drawer__item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.nf-cart-drawer__item-title {
  font-size: 13px; font-weight: 600; color: var(--color-foreground, #1a1a2e);
  text-decoration: none; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;

}
.nf-cart-drawer__item-title:hover { color: var(--color-primary-hover, #2a2a2d); }
.nf-cart-drawer__item-remove {
  flex-shrink: 0; background: none; border: none;
  cursor: pointer; color: #bbb; padding: 2px;
  transition: color 0.15s;
  position: relative;

}
/* The visual target is only 18x18. Same pseudo-element trick as the close button
   and the steppers: extend the clickable box past the WCAG 24x24 minimum without
   inflating the icon. 6px a side lands on 30x30 and still clears the 8px gap
   between the title and this button. */
.nf-cart-drawer__item-remove::after {
  content: '';
  position: absolute;
  inset: -6px;
}
.nf-cart-drawer__item-remove:hover { color: var(--color-accent, #e63946); }
/* Variant pill — always visible when variant exists */
.nf-cart-drawer__item-variant {
  display: inline-block;
  font-size: 10px; font-weight: 500; color: var(--color-text-secondary, #666);
  background: #f0efea; border-radius: 999px;
  padding: 2px 8px; margin: 0;
  line-height: 1.4; letter-spacing: 0.01em;
  width: auto; max-width: max-content;
}
.nf-cart-drawer__item-variant[hidden] { display: none; }

/* Price row */
.nf-cart-drawer__item-price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nf-cart-drawer__item-prices { display: flex; align-items: center; gap: 6px; }
.nf-cart-drawer__item-price { font-size: 14px; font-weight: 700; color: var(--color-foreground, #1a1a2e); }
.nf-cart-drawer__item-compare {
  font-size: 12px; color: var(--color-text-muted, #999); text-decoration: line-through;

}
.nf-cart-drawer__item-compare[hidden] { display: none; }
.nf-cart-drawer__item-save-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px;
  background: var(--color-brand-green, #48A06A); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 9999px;
  white-space: nowrap; letter-spacing: 0.01em;

}
.nf-cart-drawer__item-save-badge[hidden] { display: none; }

/* "You Save" line */
.nf-cart-drawer__item-you-save {
  font-size: 11px; color: #2d8a23; font-weight: 600; margin: 0;

}
.nf-cart-drawer__item-you-save[hidden] { display: none; }

/* On-sale price — stays black like PDP, strikethrough + badge provide sale context */
.nf-cart-drawer__item--on-sale .nf-cart-drawer__item-price { color: var(--color-foreground, #1a1a2e); }

/* ── Quantity Selector ── */
.nf-cart-drawer__item-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-border, #deddd8); border-radius: var(--radius-md, 8px);
  margin-top: 4px; align-self: flex-start;
  /* No overflow:hidden — it would clip the 44px hit-area extension on the
     steppers. Corner rounding moved onto the first/last buttons instead. */

}
.nf-cart-drawer__qty-btn {
  width: 32px; height: 32px; display: flex;
  align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--color-foreground, #1a1a2e);
  transition: background 0.15s; user-select: none;
  position: relative;

}
/* 44x44 minimum hit area (mobile majority) without inflating the 32px control:
   pseudo-element extends the clickable box by 6px a side. */
.nf-cart-drawer__qty-btn::before {
  content: '';
  position: absolute;
  inset: -6px;
}
.nf-cart-drawer__qty-btn:first-child { border-radius: 7px 0 0 7px; }
.nf-cart-drawer__qty-btn:last-child { border-radius: 0 7px 7px 0; }
.nf-cart-drawer__qty-btn:hover { background: var(--color-surface, #f5f5f0); }
.nf-cart-drawer__qty-btn:active { background: var(--color-secondary, #eae9e4); }
.nf-cart-drawer__qty-input {
  width: 36px; height: 32px; text-align: center;
  border: none; border-left: 1px solid var(--color-border, #deddd8);
  border-right: 1px solid var(--color-border, #deddd8);
  font-size: 13px; font-weight: 600; color: var(--color-foreground, #1a1a2e);
  font-family: inherit; background: transparent;
  -moz-appearance: textfield;

}
.nf-cart-drawer__qty-input::-webkit-outer-spin-button,
.nf-cart-drawer__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── Footer ── */
.nf-cart-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid #eee;
  background: #fafaf8;
  padding: 14px 20px 12px;

}
.nf-cart-drawer__footer[hidden] { display: none; }

/* Summary */
.nf-cart-drawer__summary {
  padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 14px;

}
.nf-cart-drawer__summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: #555;

}
/* Subtotal row gets more weight */
.nf-cart-drawer__summary-row:not([class*="--"]):not([hidden]) span:first-child {
  font-weight: 600; color: var(--color-foreground, #1a1a2e); font-size: 14px;

}
.nf-cart-drawer__summary-row:not([class*="--"]):not([hidden]) span:last-child {
  font-weight: 700; color: var(--color-foreground, #1a1a2e); font-size: 15px;

}
/* Compare-at row */
.nf-cart-drawer__summary-row--compare {
  font-size: 12px; color: var(--color-text-muted, #999);

}
.nf-cart-drawer__compare-value {
  text-decoration: line-through;

}
/* Savings row */
.nf-cart-drawer__summary-row--savings .nf-cart-drawer__savings-value {
  color: #2d8a23; font-weight: 600;

}
.nf-cart-drawer__summary-row--savings span:first-child {
  color: #2d8a23;

}
/* Shipping row */
.nf-cart-drawer__summary-row--shipping span:last-child {
  font-size: 11px; color: var(--color-text-muted, #999);

}
.nf-cart-drawer__summary-row[hidden] { display: none; }

/* CTA — matches PDP green pill pattern */
.nf-cart-drawer__checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 20px;
  background: var(--color-brand-green, #48A06A); color: #fff;
  border: none; border-radius: var(--radius-full, 9999px);
  font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 4px;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
  position: relative;
  overflow: hidden;

}
/* Shimmer pseudo-element — removed for cleaner CTA appearance */
.nf-cart-drawer__checkout-btn:hover {
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-brand-green, #48A06A) 55%, transparent);
  transform: translateY(-1px);
  filter: brightness(0.95);
  text-decoration: none;

}
.nf-cart-drawer__checkout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);

}
.nf-cart-drawer__lock-icon { opacity: 0.85; position: relative; z-index: 1; }
.nf-cart-drawer__checkout-total { opacity: 0.9; position: relative; z-index: 1; }
.nf-cart-drawer__checkout-btn span { position: relative; z-index: 1; }

/* Payment Trust */
.nf-cart-drawer__trust {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 0 4px;

}
.nf-cart-drawer__trust-label {
  font-size: 10px; font-weight: 500; color: var(--color-text-muted, #999);
  text-transform: uppercase; letter-spacing: 0.05em;

}
/* Layout of the icon row now lives in snippets/payment-icons.liquid, which keeps
   it on one line and drops the least important methods when space runs out. The
   old rule here wrapped onto a second line, which is what we were asked to stop. */
.nf-cart-drawer__trust payment-icons { justify-content: center; }
.nf-cart-drawer__payment-icon { height: 22px; width: auto; border-radius: 3px; }
@media (max-width: 749px) {
  /* .nf-cart-drawer__payment-icons rules dropped: the container class stopped
     existing when snippets/payment-icons.liquid moved to a <payment-icons>
     custom element, which owns its own overflow behaviour. */
  .nf-cart-drawer__payment-icon { flex-shrink: 0; }
}

/* Guarantee */
.nf-cart-drawer__guarantee {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 0 0;
  font-size: 10px; color: #888; flex-wrap: wrap;

}
.nf-cart-drawer__guarantee svg { flex-shrink: 0; }
.nf-cart-drawer__guarantee-sep { color: #ccc; margin: 0 2px; }

/* ── Upsell Section ── */
.nf-cart-drawer__upsell {
  flex-shrink: 0;
  border-top: 1px solid #eee;
  padding: 14px 0 10px;
  background: #fafaf8;

}
.nf-cart-drawer__upsell[hidden] { display: none; }
.nf-cart-drawer__upsell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 10px;

}
.nf-cart-drawer__upsell-title {
  font-size: 13px; font-weight: 700; color: var(--color-foreground, #1a1a2e);
  letter-spacing: -0.01em;

}

/* Upsell Nav — arrows & dots */
.nf-cart-drawer__upsell-nav {
  display: flex; align-items: center; gap: 6px;

}
.nf-cart-drawer__upsell-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 1px solid var(--color-border, #deddd8);
  cursor: pointer; color: var(--color-foreground, #1a1a2e);
  transition: all 0.15s;
  padding: 0; flex-shrink: 0;

}
.nf-cart-drawer__upsell-arrow:hover {
  background: var(--color-primary, #1a1a2e); color: #fff; border-color: var(--color-primary, #1a1a2e);

}
.nf-cart-drawer__upsell-arrow:disabled {
  opacity: 0.3; cursor: default; pointer-events: none;

}
.nf-cart-drawer__upsell-dots {
  display: flex; align-items: center; gap: 4px;

}
.nf-cart-drawer__upsell-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-border, #deddd8); border: none; padding: 0;
  cursor: pointer; transition: all 0.2s;

}
.nf-cart-drawer__upsell-dot.is-active {
  background: var(--color-primary, #1a1a2e); width: 16px; border-radius: 3px;

}

/* Scroll container */
.nf-cart-drawer__upsell-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; padding: 0 20px 10px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

}
.nf-cart-drawer__upsell-scroll::-webkit-scrollbar { display: none; }

/* Upsell skeleton loading */
.nf-cart-drawer__upsell-skeleton {
  display: flex; gap: 12px; padding: 0 20px 10px;

}
.nf-cart-drawer__upsell-skeleton-card {
  flex: 0 0 160px; min-width: 160px;
  padding: 12px; border-radius: 8px;
  border: 1px solid #eee; background: #fff;

}
.nf-cart-drawer__skeleton-img {
  width: 100%; aspect-ratio: 1;
  border-radius: 6px; background: #f0efea;
  margin-bottom: 8px;
  animation: skeletonPulse 1.5s ease-in-out infinite;

}
.nf-cart-drawer__skeleton-line {
  height: 10px; border-radius: 4px;
  background: #f0efea; margin-bottom: 6px;
  animation: skeletonPulse 1.5s ease-in-out infinite;

}
.nf-cart-drawer__skeleton-line--short { width: 60%; }
.nf-cart-drawer__skeleton-line--medium { width: 80%; }
.nf-cart-drawer__skeleton-btn {
  height: 28px; border-radius: 8px;
  background: #f0efea; margin-top: 6px;
  animation: skeletonPulse 1.5s ease-in-out infinite;

}
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }

}

/* Smooth upsell list transition */
.nf-cart-drawer__upsell-scroll.is-transitioning {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s, transform 0.25s;

}
.nf-cart-drawer__upsell-scroll.is-visible {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.35s ease, transform 0.35s ease;

}

/* Upsell Card — matches mega menu product card exactly.
   Wrapper div since the Add button is a sibling of the link, not inside it. */
.nf-cart-drawer__upsell-card {
  display: block; flex: 0 0 160px; min-width: 160px;
  color: inherit;
  padding: 12px; border-radius: 8px;
  border: 1px solid #e5e5e5; background: #fff;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}
.nf-cart-drawer__upsell-card-link {
  display: block;
  text-decoration: none; color: inherit;

}
.nf-cart-drawer__upsell-card-link:hover { text-decoration: none; color: inherit; }
.nf-cart-drawer__upsell-card:hover {
  border-color: var(--color-primary, #1a1a2e);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  text-decoration: none;

}

/* Image wrap — 1:1 aspect ratio like mega menu */
.nf-cart-drawer__upsell-card-img-wrap {
  position: relative; width: 100%;
  aspect-ratio: 1; border-radius: 6px;
  overflow: hidden; background: #e8e8e4;
  margin-bottom: 8px;

}
.nf-cart-drawer__upsell-card-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;

}

/* Badge */
.nf-cart-drawer__upsell-card-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--color-sale, #e63946); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase;

}
.nf-cart-drawer__upsell-card-badge[hidden] { display: none; }

/* Title — 2-line clamp like mega menu */
.nf-cart-drawer__upsell-card-title {
  font-size: 13px; font-weight: 600; color: var(--color-foreground, #1a1a2e);
  margin: 0 0 2px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  transition: color 0.2s;

}
.nf-cart-drawer__upsell-card:hover .nf-cart-drawer__upsell-card-title { color: var(--color-primary-hover, #2a2a2d); }

/* Price row */
.nf-cart-drawer__upsell-card-price-row {
  display: flex; align-items: center; gap: 6px;

}
.nf-cart-drawer__upsell-card-price {
  font-size: 15px; font-weight: 700; color: var(--color-foreground, #1a1a2e); margin: 0;
}
.nf-cart-drawer__upsell-card-compare {
  font-size: 11px; color: var(--color-text-muted, #999); text-decoration: line-through;
}
.nf-cart-drawer__upsell-card-compare[hidden] { display: none; }
.nf-cart-drawer__upsell-card--on-sale .nf-cart-drawer__upsell-card-price { color: var(--color-foreground, #1a1a2e); }

/* Add button */
.nf-cart-drawer__upsell-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  width: 100%; padding: 6px 0; margin-top: 6px;
  background: var(--color-primary, #1a1a2e); color: #fff;
  border: none; border-radius: var(--radius-md, 8px);
  font-size: 11px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background 0.15s;

}
.nf-cart-drawer__upsell-add-btn:hover { background: var(--color-primary-hover, #2a2a2d); }
.nf-cart-drawer__upsell-add-btn.is-adding {
  pointer-events: none; opacity: 0.85;

}
.nf-cart-drawer__upsell-add-btn.is-added {
  background: var(--color-brand-green, #48A06A); pointer-events: none;

}
.nf-cart-drawer__upsell-spinner {
  animation: spin 0.6s linear infinite;

}
/* ── Reduced motion ──
   Transitions alone were not enough: the line-item spinner, the upsell skeleton
   pulse and cartFadeIn are keyframe ANIMATIONS, and the spinner lives on a
   pseudo-element, so both have to be covered explicitly. */
@media (prefers-reduced-motion: reduce) {
  .nf-cart-drawer,
  .nf-cart-drawer *,
  .nf-cart-drawer *::before,
  .nf-cart-drawer *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}

/* ── Mobile ── */
@media screen and (max-width: 480px) {
  .nf-cart-drawer { width: 100vw; }
  .nf-cart-drawer__item-img { width: 68px; height: 68px; }
  .nf-cart-drawer__upsell-arrow { width: 24px; height: 24px; }
  .nf-cart-drawer__upsell-arrow svg { width: 10px; height: 10px; }
  .nf-cart-drawer__upsell-dot { width: 5px; height: 5px; }
  .nf-cart-drawer__upsell-dot.is-active { width: 12px; }
  .nf-cart-drawer__upsell-card { flex: 0 0 145px; min-width: 145px; padding: 10px; }
  .nf-cart-drawer__upsell-scroll { gap: 10px; }

}

/* ── Body scroll lock ── */
/* Scroll locking lives in assets/nf-scroll-lock.js — body overflow does not
   hold here, because html carries overflow-x: clip so body's overflow never
   propagates to the viewport. The class is kept as a state hook only. */
/* END_SECTION:cart-drawer */

/* START_SECTION:collection-benefits (INDEX:10) */
.cl-benefits {
  padding-block: 4rem;
  overflow: hidden;
  background: var(--section-bg, #f7f7f8);
  --cl-bg: var(--section-bg, #f7f7f8);
}
.cl-benefits--dark {
  background: var(--section-bg, #141416);
  --cl-bg: var(--section-bg, #141416);
}
.cl-benefits__header {
  text-align: center;
  margin-block-end: 2.5rem;
  max-width: 72rem;
  margin-inline: auto;
}
.cl-benefits__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.cl-benefits--dark .cl-benefits__heading { color: #f5f5f5; }
.cl-benefits__subheading {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted, #71717a);
  max-width: 40rem;
  margin: 0.75rem auto 0;
}
.cl-benefits--dark .cl-benefits__subheading { color: rgba(255,255,255,0.6); }

.cl-benefits__track-wrap {
  position: relative;
  max-width: 72rem;
  margin-inline: auto;
}
.cl-benefits__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 72rem;
  margin-inline: auto;
  padding: 0 1rem 1rem;
  scroll-padding-left: 1rem;
}
.cl-benefits__track::-webkit-scrollbar { display: none; }

.cl-benefits__card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.25s;
}
.cl-benefits--dark .cl-benefits__card {
  background: #1e1e21;
  border-color: rgba(255,255,255,0.06);
}
/* hover removed — cards are not clickable */

.cl-benefits__card-media {
  aspect-ratio: var(--cl-benefit-ratio, 1 / 1);
  overflow: hidden;
  background: #f5f4f0;
}
.cl-benefits--dark .cl-benefits__card-media { background: #0d0d14; }
.cl-benefits__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-benefits__card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.cl-benefits__card-number {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #999);
  margin-block-end: 0.25rem;
}
.cl-benefits--dark .cl-benefits__card-number { color: rgba(255,255,255,0.35); }
.cl-benefits__card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
  line-height: 1.3;
}
.cl-benefits--dark .cl-benefits__card-title { color: #f5f5f5; }
.cl-benefits__card-desc {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted, #71717a);
  margin: 0.375rem 0 0;
}
.cl-benefits--dark .cl-benefits__card-desc { color: rgba(255,255,255,0.5); }

.cl-benefits__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  color: #1a1a2e;
  padding: 0;
}
.cl-benefits--dark .cl-benefits__arrow {
  background: #1e1e21;
  border-color: rgba(255,255,255,0.15);
  color: #f5f5f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.cl-benefits__arrow:hover { transform: translateY(-50%) scale(1.08); }
.cl-benefits__arrow:active { transform: translateY(-50%) scale(0.97); }
.cl-benefits__arrow--prev { left: 0.5rem; }
.cl-benefits__arrow--next { right: 0.5rem; }
.cl-benefits__arrow[hidden] { display: none; }

/* ── Side fade gradients — dynamically sourced from section background ── */
.cl-benefits__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: none;
  z-index: 1;
}
.cl-benefits__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--cl-bg) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.cl-benefits__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--cl-bg) 0%, transparent 100%);
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ── Nav dots ── */
.cl-benefits__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-block-start: 1.25rem;
}
.cl-benefits__dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-border, #deddd8);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}
.cl-benefits--dark .cl-benefits__dot {
  background: rgba(255,255,255,0.2);
}
.cl-benefits__dot.is-active {
  width: 18px;
  background: var(--color-foreground, #1a1a2e);
}
.cl-benefits--dark .cl-benefits__dot.is-active {
  background: #f5f5f5;
}

@media (max-width: 749px) {
  .cl-benefits { padding-block: 2.5rem; }
  .cl-benefits__card { flex: 0 0 75vw; max-width: 300px; }
  .cl-benefits__arrow { display: none; }
  /* No left fade on mobile — content snags to left edge */
  .cl-benefits__fade--left { display: none; }
  .cl-benefits__track { padding-left: 1rem; scroll-padding-left: 1rem; }
}

/* Eyebrow */
.cl-benefits__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--p-text-secondary, #71717a);
  line-height: 1.2;
  margin-block-end: 0.5rem;
}
@media (min-width: 750px) { .cl-benefits__eyebrow { font-size: 0.8125rem; } }
/* END_SECTION:collection-benefits */

/* START_SECTION:collection-faq (INDEX:11) */
.cl-faq {
  padding-block: 4rem;
}
.cl-faq--dark {
  background: #111118;
}
.cl-faq__container {
  max-width: 48rem;
  margin: 0 auto;
}
.cl-faq__header {
  text-align: center;
  margin-block-end: 2.5rem;
}
.cl-faq__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.cl-faq--dark .cl-faq__heading { color: #f5f5f5; }
.cl-faq__subheading {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted, #71717a);
  margin: 0.75rem 0 0;
}
.cl-faq--dark .cl-faq__subheading { color: rgba(255,255,255,0.6); }

.cl-faq__accordion {
  display: flex;
  flex-direction: column;
}
.cl-faq__item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cl-faq--dark .cl-faq__item {
  border-color: rgba(255,255,255,0.08);
}
.cl-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--color-foreground, #1a1a2e);
  gap: 1rem;
  line-height: 1.4;
}
.cl-faq--dark .cl-faq__question { color: #f5f5f5; }
.cl-faq__chevron {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  color: var(--color-text-muted, #999);
}
.cl-faq__question[aria-expanded="true"] .cl-faq__chevron {
  transform: rotate(180deg);
}
.cl-faq__answer {
  padding-block-end: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-text-muted, #555);
}
.cl-faq--dark .cl-faq__answer { color: rgba(255,255,255,0.65); }
.cl-faq__answer p { margin: 0 0 0.5rem; }
.cl-faq__answer p:last-child { margin-bottom: 0; }

.cl-faq__footer {
  text-align: center;
  margin-block-start: 2.5rem;
  padding-block-start: 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.cl-faq--dark .cl-faq__footer { border-color: rgba(255,255,255,0.06); }
.cl-faq__cta-text {
  font-size: 0.875rem;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 0.75rem;
}
.cl-faq__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
}
.cl-faq--dark .cl-faq__cta-link { color: #f5f5f5; }

@media (max-width: 749px) {
  .cl-faq { padding-block: 2.5rem; }
  .cl-faq__question { font-size: 0.9375rem; padding: 1rem 0; }
}
/* END_SECTION:collection-faq */

/* START_SECTION:collection-hero (INDEX:12) */
.cl-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: var(--cl-hero-desktop-h, 70vh);
}
.cl-hero__media {
  position: absolute;
  inset: 0;
}
.cl-hero__img {
  width: 100%;
  height: 125%;
  object-fit: cover;
  display: block;
  transform: translateY(0);
}
/* Premium Nanoleaf brand-green gradient — vibrant, clearly green */
.cl-hero__gradient {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 15% 80%, rgba(76, 175, 80, 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 15%, rgba(56, 195, 80, 0.45) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(34, 197, 94, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(22, 163, 74, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 25% 30%, rgba(74, 222, 128, 0.15) 0%, transparent 30%),
    linear-gradient(155deg, #0b3a16 0%, #18703a 20%, #22944a 40%, #1e8842 55%, #167a36 70%, #0f5a26 85%, #0a3818 100%);
}
.cl-hero__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
}
.cl-hero__content {
  position: relative;
  z-index: 2;
  padding-block: 5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.cl-hero__content--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}
.cl-hero__content--left {
  align-items: flex-start;
  text-align: left;
}
.cl-hero__content--narrow { max-width: 40rem; }
.cl-hero__content--medium { max-width: 50rem; }
.cl-hero__content--wide { max-width: 64rem; }

.cl-hero__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-block-end: 0.75rem;
  color: rgba(255,255,255,0.65);
}
.cl-hero__icon {
  margin: 0.75rem 0 0.5rem;
}
.cl-hero__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}
.cl-hero__heading {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.cl-hero__subheading {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 36rem;
  margin: 1rem 0 0;
}
.cl-hero__content--center .cl-hero__subheading { margin-inline: auto; }

.cl-hero__cta-wrap {
  margin-block-start: 1.5rem;
}
.cl-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.cl-hero__cta--primary {
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
}
.cl-hero__cta--primary:hover {
  background: rgba(255,255,255,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.cl-hero__cta--secondary {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.45);
}
.cl-hero__cta--secondary:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.08);
}

/* ── Breadcrumb inside hero — matches PDP breadcrumb position ── */
.cl-hero__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 14px 0;
}
.cl-hero__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  justify-content: flex-start;
}
.cl-hero__breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-inline-start: 0.5rem;
  color: rgba(255,255,255,0.35);
}
.cl-hero__breadcrumb-item a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}
.cl-hero__breadcrumb-item a:hover {
  color: #fff;
}
.cl-hero__breadcrumb-item--current {
  color: rgba(255,255,255,0.85);
}

@media (max-width: 749px) {
  .cl-hero { min-height: var(--cl-hero-mobile-h, auto) !important; }
  .cl-hero__content { padding-block: 3rem; }
  .cl-hero__cta { padding: 0.5rem 1.125rem; font-size: 0.75rem; }
  .cl-hero__breadcrumb { padding: 10px 0; }
  .cl-hero__breadcrumb-list { font-size: 0.75rem; }
}
/* END_SECTION:collection-hero */

/* START_SECTION:collection-promo-splitters (INDEX:13) */
.cl-promos {
  padding-block: 1rem;
}
.cl-promos--dark {
  background: #141416;
}
.cl-promos__container {
  max-width: 72rem;
  margin: 0 auto;
}
.cl-promos__grid {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cl-promos__grid--two {
  flex-direction: row;
}
.cl-promos__card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.cl-promos--dark .cl-promos__card {
  background: #1e1e21;
  border-color: rgba(255,255,255,0.08);
}
.cl-promos__card:hover {
  border-color: var(--color-foreground, #1a1a2e);
}
.cl-promos--dark .cl-promos__card:hover {
  border-color: rgba(255,255,255,0.25);
}
.cl-promos__card > svg:first-child {
  flex-shrink: 0;
  color: var(--color-foreground, #1a1a2e);
}
.cl-promos--dark .cl-promos__card > svg:first-child {
  color: #f5f5f5;
}
.cl-promos__card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cl-promos__card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.cl-promos--dark .cl-promos__card-title {
  color: #f5f5f5;
}
.cl-promos__card-desc {
  font-size: 11px;
  color: var(--color-text-muted, #999);
}
.cl-promos--dark .cl-promos__card-desc {
  color: rgba(255,255,255,0.45);
}
.cl-promos__card-arrow {
  flex-shrink: 0;
  color: #bbb;
  transition: transform 0.15s;
}
.cl-promos__card:hover .cl-promos__card-arrow {
  transform: translateX(2px);
  color: var(--color-foreground, #1a1a2e);
}
.cl-promos--dark .cl-promos__card:hover .cl-promos__card-arrow {
  color: #f5f5f5;
}

@media (max-width: 749px) {
  .cl-promos__grid--two {
    flex-direction: column;
  }
}
/* END_SECTION:collection-promo-splitters */

/* START_SECTION:collection-reviews (INDEX:14) */
.cl-reviews {
  padding-block: 4rem;
  /* --section-bg set by JS (alternation or homepage init) — no hardcoded default here */
}
.cl-reviews--dark {
  background: #1e1e21;
}
.cl-reviews__container {
  max-width: 72rem;
  margin: 0 auto;
}
.cl-reviews__header {
  text-align: center;
  margin-block-end: 2.5rem;
}
.cl-reviews__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.cl-reviews--dark .cl-reviews__heading { color: #f5f5f5; }
.cl-reviews__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #71717a);
}
.cl-reviews--dark .cl-reviews__stats { color: rgba(255,255,255,0.5); }
.cl-reviews__tp-stars {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  margin-inline-end: 4px;
}
.cl-reviews__loading {
  text-align: center;
  padding: 2rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #999);
}
.cl-reviews--dark .cl-reviews__loading { color: rgba(255,255,255,0.4); }

/* Dark override: card text MUST stay dark on white card bg.
   Uses !important to beat .theme-dark #main-content p global override. */
.cl-reviews--dark .cl-reviews__card { background: #fff !important; color: #1a1a2e !important; }
.cl-reviews--dark .cl-reviews__card h3,
.cl-reviews--dark .cl-reviews__card p,
.cl-reviews--dark .cl-reviews__card span,
.cl-reviews--dark .cl-reviews__card a { color: #1a1a2e !important; }
.cl-reviews--dark .cl-reviews__card-title { color: #1a1a2e !important; }
.cl-reviews--dark .cl-reviews__card-quote { color: #444 !important; }
.cl-reviews--dark .cl-reviews__card-author-name { color: #1a1a2e !important; }
.cl-reviews--dark .cl-reviews__card-verified { color: #111 !important; }
.cl-reviews--dark .cl-reviews__card-verified svg { color: #111 !important; }
.cl-reviews--dark .cl-reviews__card-date { color: #999 !important; }
.cl-reviews--dark .cl-reviews__card-footer { border-color: #f0f0f0 !important; }
.cl-reviews--dark .cl-reviews__card-stars svg polygon { fill: #f59e0b; }

/* ── Masonry layout — identical to PDP ── */
.cl-reviews__masonry-wrap {
  position: relative;
}
.cl-reviews__masonry {
  columns: 3;
  column-gap: 1rem;
}
.cl-reviews__blur-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  /* Fallback resolves to the theme's actual background variable — never a hardcoded colour */
  background: linear-gradient(to bottom, var(--section-bg-transparent, transparent) 0%, var(--section-bg-semi, rgba(245,245,240,0.7)) 40%, var(--section-bg, var(--color-background, #f5f5f0)) 100%);
  pointer-events: none;
  z-index: 2;
}
.cl-reviews--dark .cl-reviews__blur-overlay {
  background: linear-gradient(to bottom, var(--section-bg-transparent, rgba(30,30,33,0)) 0%, var(--section-bg-semi, rgba(30,30,33,0.7)) 40%, var(--section-bg, #1e1e21) 100%);
}

/* ── Review card — ALWAYS white, same as PDP ── */
.cl-reviews__card {
  break-inside: avoid;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cl-reviews__card[hidden] { display: none; }
.cl-reviews__card-stars {
  display: flex;
  align-items: center;
  line-height: 1;
}
.cl-reviews__card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
  line-height: 1.45;
}
.cl-reviews__card-quote {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #444;
  margin: 0;
}
.cl-reviews__card-footer {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}
.cl-reviews__card-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.cl-reviews__card-author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cl-reviews__card-author-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a2e;
}
.cl-reviews__card-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: #111;
  font-weight: 500;
}
.cl-reviews__card-date {
  font-size: 0.6875rem;
  color: #999;
}

/* ── Footer ── */
.cl-reviews__footer {
  text-align: center;
  margin-top: 1.5rem;
  position: relative;
  z-index: 3;
}
.cl-reviews__show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 2rem;
  background: transparent;
  border: 1.5px solid #1a1a2e;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.cl-reviews--dark .cl-reviews__show-more {
  border-color: rgba(255,255,255,0.3);
  color: #f5f5f5;
}
.cl-reviews__show-more:hover {
  background: #1a1a2e;
  color: #fff;
}
.cl-reviews--dark .cl-reviews__show-more:hover {
  background: rgba(255,255,255,0.1);
}
.cl-reviews__show-more[hidden] { display: none; }

@media (max-width: 989px) {
  .cl-reviews__masonry { columns: 2; }
}
@media (min-width: 1200px) {
  .cl-reviews__masonry { columns: 3; }
  .cl-reviews__card { padding: 1.5rem; }
  .cl-reviews__card-quote { font-size: 0.875rem; }
}
@media (max-width: 749px) {
  .cl-reviews { padding-block: 2.5rem; }
  .cl-reviews__masonry { columns: 1; }
  .cl-reviews__masonry .cl-reviews__card:nth-child(n+2) { display: none; }
  .cl-reviews__masonry.cl-reviews__masonry--expanded .cl-reviews__card { display: flex; }
}
/* END_SECTION:collection-reviews */

/* START_SECTION:collection-seo-content (INDEX:15) */
.cl-seo {
  padding-block: 3.5rem;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.cl-seo--dark {
  background: var(--section-bg, #1e1e21);
  border-color: rgba(255,255,255,0.06);
}
.cl-seo__container {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}
.cl-seo__heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}
.cl-seo--dark .cl-seo__heading { color: #f5f5f5; }
.cl-seo__wrap {
  position: relative;
  text-align: left;
}
.cl-seo__wrap.is-collapsed .cl-seo__body {
  max-height: 25rem; /* ~400 chars equivalent */
  overflow: hidden;
}
.cl-seo__fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent 0%, var(--section-bg, #fff) 100%);
  pointer-events: none;
}
.cl-seo--dark .cl-seo__fade {
  background: linear-gradient(to bottom, transparent 0%, var(--section-bg, #1e1e21) 100%);
}
.cl-seo__fade[hidden] { display: none; }
.cl-seo__body {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-text-muted, #555);
}
.cl-seo--dark .cl-seo__body { color: rgba(255,255,255,0.6); }
.cl-seo__body h2, .cl-seo__body h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 2rem 0 0.75rem;
}
.cl-seo--dark .cl-seo__body h2,
.cl-seo--dark .cl-seo__body h3 { color: #f5f5f5; }
.cl-seo__body p { margin: 0 0 1rem; }
.cl-seo__body p:last-child { margin-bottom: 0; }
.cl-seo__body a { color: var(--color-foreground, #1a1a2e); text-decoration: underline; }
.cl-seo--dark .cl-seo__body a { color: #f5f5f5; }
.cl-seo__body ul, .cl-seo__body ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}
.cl-seo__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  background: #e5e5e5;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1a1a2e;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, color 0.2s;
}
.cl-seo--dark .cl-seo__toggle {
  background: rgba(255,255,255,0.15);
  color: #f5f5f5 !important;
  border: 1px solid rgba(255,255,255,0.2);
}
.cl-seo--dark .cl-seo__toggle svg { color: #f5f5f5; }
.cl-seo__toggle:hover {
  background: #d4d4d4;
  color: #1a1a2e;
}
.cl-seo--dark .cl-seo__toggle:hover {
  background: rgba(255,255,255,0.25);
  color: #f5f5f5 !important;
}
.cl-seo__toggle[hidden] { display: none; }
.cl-seo__toggle svg {
  transition: transform 0.3s ease;
}
.cl-seo__toggle.is-expanded svg { transform: rotate(180deg); }

@media (max-width: 749px) {
  .cl-seo { padding-block: 2.5rem; }
}
/* END_SECTION:collection-seo-content */

/* START_SECTION:collection-spotlights (INDEX:16) */
.cl-spotlights {
  padding-block: 4rem;
  background: #f7f7f8;
}
.cl-spotlights--dark {
  background: #1e1e21;
}
.cl-spotlights__container {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.cl-spotlights__header {
  text-align: center;
}
.cl-spotlights__section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.cl-spotlights--dark .cl-spotlights__section-heading {
  color: #f5f5f5;
}
.cl-spotlights__section-sub {
  color: var(--color-text-muted, #71717a);
  max-width: 36rem;
  margin: 0.75rem auto 0;
  line-height: 1.6;
}

/* ── Row: image + content side by side ── */
.cl-spotlights__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.cl-spotlights__row--reversed {
  direction: rtl;
}
.cl-spotlights__row--reversed > * {
  direction: ltr;
}

.cl-spotlights__media {
  border-radius: 1rem;
  overflow: hidden;
  background: #f5f4f0;
}
.cl-spotlights--dark .cl-spotlights__media {
  background: #0d0d14;
}
.cl-spotlights__media img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.cl-spotlights__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
}
.cl-spotlights__video-wrap iframe,
.cl-spotlights__video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
}

.cl-spotlights__content {
  padding: var(--cl-text-pad, 1rem);
}

.cl-spotlights__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #71717a);
  margin-block-end: 0.5rem;
}
.cl-spotlights--dark .cl-spotlights__eyebrow {
  color: rgba(255,255,255,0.45);
}
.cl-spotlights__heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.cl-spotlights--dark .cl-spotlights__heading {
  color: #f5f5f5;
}
.cl-spotlights__body {
  /* Was 0.9375rem, which rendered 15px against the theme's 17px body and read
     as a different font next to every other block (Marta, 2026-08-10).
     1.0625rem lands on 17px exactly; plain 1rem is 16px and still looks off. */
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted, #555);
}
.cl-spotlights--dark .cl-spotlights__body {
  color: rgba(255,255,255,0.65);
}
.cl-spotlights__body p { margin: 0 0 0.5rem; }
.cl-spotlights__body p:last-child { margin-bottom: 0; }

.cl-spotlights__specs {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.cl-spotlights__spec {
  font-size: 0.875rem;
  line-height: 1.5;
}
.cl-spotlights__spec-label {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.cl-spotlights--dark .cl-spotlights__spec-label {
  color: #f5f5f5;
}
.cl-spotlights__spec-value {
  color: var(--color-text-muted, #555);
}

.cl-spotlights__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-block-start: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  transition: gap 0.2s;
}
.cl-spotlights--dark .cl-spotlights__cta {
  color: #f5f5f5;
}
.cl-spotlights__cta:hover {
  gap: 0.625rem;
}

@media (max-width: 749px) {
  .cl-spotlights { padding-block: 2.5rem; }
  .cl-spotlights__container { gap: 2.5rem; }
  .cl-spotlights__row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cl-spotlights__row--reversed { direction: ltr; }
  /* Normalize text padding on mobile — ignore CMS override */
  .cl-spotlights__content { padding: 1rem !important; }
}
/* END_SECTION:collection-spotlights */

/* START_SECTION:collection-sticky-cta (INDEX:17) */
.cl-sticky-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  /* Self-relative offset clears the pill's own height at any content length,
     unlike the old hardcoded 80px which left tall pills partly on screen */
  transform: translateX(-50%) translateY(calc(100% + 1.5rem));
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.cl-sticky-cta.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cl-sticky-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-button);
  text-decoration: none;
  /* No backdrop-filter on a fixed element: it re-samples the backdrop every
     scroll frame (worst on iOS Safari). Near-opaque fill instead. */
  background: rgba(255,255,255,0.96);
  color: #1a1a2e;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: background 0.2s, box-shadow 0.2s;
}
.cl-sticky-cta__btn:hover {
  background: rgba(255,255,255,0.35);
  box-shadow: 0 6px 28px rgba(0,0,0,0.15);
}
.cl-sticky-cta--dark .cl-sticky-cta__btn {
  background: rgba(255,255,255,0.12);
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.15);
}
.cl-sticky-cta--dark .cl-sticky-cta__btn:hover {
  background: rgba(255,255,255,0.2);
}
.cl-sticky-cta[hidden] { display: none; }
/* END_SECTION:collection-sticky-cta */

/* START_SECTION:collection-subcategories (INDEX:18) */
.cl-subcats {
  padding-block: 2rem;
  background: transparent;
  overflow-x: clip;
}
.cl-subcats--dark {
  background: transparent;
}

.cl-subcats__container {
  max-width: 72rem;
  margin: 0 auto;
}
.cl-subcats__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: 1.5rem;
}
/* Sticky only when filters are enabled */
.cl-subcats--has-filters .cl-subcats__header {
  position: sticky;
  top: 0;
  z-index: 10;
  /* Full-bleed background, boxed content */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0.75rem calc(50vw - 50%);
  background: var(--section-bg, #fff);
  margin-top: -0.75rem;
  transition: box-shadow 0.2s ease;
}
.cl-subcats--has-filters .cl-subcats__header.is-stuck {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.cl-subcats--has-filters.cl-subcats--dark .cl-subcats__header {
  background: var(--section-bg, #141416);
}
.cl-subcats--has-filters.cl-subcats--dark .cl-subcats__header.is-stuck {
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.cl-subcats__header-left {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.cl-subcats__heading {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.cl-subcats__bundle-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #1a1a2e;
  border: none;
  border-radius: var(--radius-button);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cl-subcats__bundle-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
.cl-subcats--dark .cl-subcats__bundle-btn {
  background: #fff;
  color: #1a1a2e;
}
.cl-subcats--dark .cl-subcats__heading {
  color: #f5f5f5;
}
.cl-subcats__subheading {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin: 0;
}
.cl-subcats--dark .cl-subcats__subheading {
  color: rgba(255,255,255,0.5);
}

/* ── Product grid — auto columns with minimum 3 ── */
.cl-subcats__grid {
  display: grid;
  grid-template-columns: repeat(var(--cl-cols-mobile, 1), 1fr);
  gap: 1rem;
}
@media (min-width: 750px) {
  .cl-subcats__grid { grid-template-columns: repeat(var(--cl-cols-tablet, 2), 1fr); }
}
@media (min-width: 990px) {
  .cl-subcats__grid { grid-template-columns: repeat(var(--cl-cols-desktop, 3), 1fr); }
}

.cl-subcats__product-item {
  min-width: 0;
}
/* Force product cards to fill their grid cell */
.cl-subcats__product-item .nf-card {
  width: 100%;
}
.cl-subcats__product-item .nf-card__img-wrap {
  width: 100%;
}
.cl-subcats__product-item .nf-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark card overrides handled globally by .theme-dark .nf-card__* in theme.liquid */

/* ── Filter button ── */
.cl-subcats__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.4375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  color: #1a1a2e;
  background: #f4f4f5;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
}
.cl-subcats__filter-btn:hover {
  background: #e4e4e7;
  transform: translateY(-1px);
}
.cl-subcats--dark .cl-subcats__filter-btn {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
  color: #f5f5f5;
}
.cl-subcats--dark .cl-subcats__filter-btn:hover {
  background: rgba(255,255,255,0.14);
}

/* ── Filter area: button + active chips inline ── */
.cl-subcats__filter-area {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cl-subcats__active-filters {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Desktop: show inline chips, hide mobile row */
.cl-subcats__active-filters--mobile { display: none; }
@media (max-width: 749px) {
  .cl-subcats__active-filters--desktop { display: none !important; }
  .cl-subcats__active-filters--mobile {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.25rem;
    margin-bottom: 1rem;
  }
  .cl-subcats__active-filters--mobile:empty { display: none; }
}
.cl-subcats__active-filters:empty { display: none; }
.cl-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.3125rem 0.625rem;
  min-height: 1.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  color: #1a1a2e;
  background: #e8e8ec;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  line-height: 1;
}
.cl-filter-chip:hover {
  background: #d4d4d8;
}
.cl-filter-chip:active {
  transform: scale(0.95);
}
.cl-filter-chip__x {
  width: 12px;
  height: 12px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.cl-filter-chip:hover .cl-filter-chip__x {
  opacity: 0.9;
}
/* Dark theme chips */
.cl-subcats--dark .cl-filter-chip {
  background: rgba(255,255,255,0.1);
  color: #f5f5f5;
}
.cl-subcats--dark .cl-filter-chip:hover {
  background: rgba(255,255,255,0.18);
}

/* ══════════════════════════════════════
   Filter Drawer — slides from left
   ══════════════════════════════════════ */
.cl-filter-drawer { position: fixed; inset: 0; z-index: 999; display: flex; pointer-events: none; }
.cl-filter-drawer[hidden] { display: none; }
.cl-filter-drawer.is-open { pointer-events: auto; }
.cl-filter-drawer__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
}

.cl-filter-drawer__panel {
  position: relative; z-index: 1;
  width: 22rem; max-width: 85vw;
  height: 100%;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cl-filter-drawer.is-open .cl-filter-drawer__panel { transform: translateX(0); }
.cl-filter-drawer__overlay { opacity: 0; transition: opacity 0.3s ease; }
.cl-filter-drawer.is-open .cl-filter-drawer__overlay { opacity: 1; }

.cl-filter-drawer__panel--dark {
  background: #1e1e21;
  color: #f5f5f5;
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}

.cl-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__header {
  border-color: rgba(255,255,255,0.1);
}
.cl-filter-drawer__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}
.cl-filter-drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: none; border: none;
  color: inherit; cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
}
.cl-filter-drawer__close:hover { background: rgba(0,0,0,0.05); }
.cl-filter-drawer__panel--dark .cl-filter-drawer__close:hover { background: rgba(255,255,255,0.1); }

.cl-filter-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0;
}

/* Filter groups (details/summary) */
.cl-filter-drawer__group {
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__group {
  border-color: rgba(255,255,255,0.08);
}
.cl-filter-drawer__group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cl-filter-drawer__group-title::-webkit-details-marker { display: none; }
.cl-filter-drawer__chevron {
  transition: transform 0.2s ease;
}
.cl-filter-drawer__group[open] .cl-filter-drawer__chevron {
  transform: rotate(180deg);
}
.cl-filter-drawer__group-body {
  padding: 0 1.5rem 1rem;
}

/* Checkboxes */
.cl-filter-drawer__values {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cl-filter-drawer__check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.375rem 0;
  font-size: 0.8125rem;
  cursor: pointer;
}
.cl-filter-drawer__checkbox {
  width: 16px; height: 16px;
  accent-color: #1a1a2e;
  flex-shrink: 0;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__checkbox {
  accent-color: #f5f5f5;
}
.cl-filter-drawer__check-count {
  color: #a1a1aa;
  font-size: 0.75rem;
  margin-left: auto;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__check-count {
  color: rgba(255,255,255,0.35);
}

/* Price range */
.cl-filter-drawer__price-range {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}
.cl-filter-drawer__price-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  flex: 1;
}
.cl-filter-drawer__price-input {
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-family: inherit;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #f9f9f7;
  color: inherit;
  width: 100%;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__price-input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}
.cl-filter-drawer__price-sep {
  color: #a1a1aa;
  padding-bottom: 0.5rem;
}

/* Footer */
.cl-filter-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(0,0,0,0.08);
  gap: 1rem;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__footer {
  border-color: rgba(255,255,255,0.1);
}
.cl-filter-drawer__clear {
  font-size: 0.8125rem;
  color: #71717a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__clear {
  color: rgba(255,255,255,0.5);
}
.cl-filter-drawer__apply {
  flex: 1;
  max-width: 10rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #1a1a2e;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s;
}
.cl-filter-drawer__apply:hover { background: #2a2a2d; }
.cl-filter-drawer__panel--dark .cl-filter-drawer__apply {
  background: #f5f5f5;
  color: #1a1a2e;
}
.cl-filter-drawer__panel--dark .cl-filter-drawer__apply:hover {
  background: #e0e0e0;
}

/* Infinite scroll trigger */
.cl-subcats__infinite-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 0;
}
.cl-subcats__infinite-trigger[hidden] { display: none; }
.cl-subcats__infinite-spinner svg {
  animation: clInfSpin 0.7s linear infinite;
  color: #999;
}
.cl-subcats--dark .cl-subcats__infinite-spinner svg { color: rgba(255,255,255,0.4); }
@keyframes clInfSpin { to { transform: rotate(360deg); } }
.cl-subcats__infinite-text {
  font-size: 0.8125rem;
  color: #999;
  font-weight: 500;
}
.cl-subcats--dark .cl-subcats__infinite-text { color: rgba(255,255,255,0.4); }

/* Pagination */
.cl-subcats__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 0.875rem;
}
.cl-subcats__page-btn {
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  background: #1a1a2e;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.8125rem;
  transition: background 0.2s;
}
.cl-subcats__page-btn:hover { background: #2a2a2d; }
.cl-subcats__page-info { color: #666; font-weight: 500; }
.cl-subcats--dark .cl-subcats__page-btn { background: #f5f5f5; color: #1a1a2e; }
.cl-subcats--dark .cl-subcats__page-info { color: rgba(255,255,255,0.5); }
.cl-subcats__no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: #666;
  font-size: 0.9375rem;
}
.cl-subcats__no-results a { color: #1a1a2e; font-weight: 600; text-decoration: underline; }
.cl-subcats--dark .cl-subcats__no-results { color: rgba(255,255,255,0.5); }
.cl-subcats--dark .cl-subcats__no-results a { color: #f5f5f5; }

@media (max-width: 749px) {
  .cl-subcats { padding-block: 1.25rem; }
  .cl-subcats__grid { gap: 0.75rem; }
  .cl-filter-drawer__panel { width: 85vw; }
}
/* END_SECTION:collection-subcategories */

/* START_SECTION:collection-subnav (INDEX:19) */
/* ══════════════════════════════════════
   Collection Sub-Navigation
   Design A = cards (image + label)
   Design B = pills (icon + label) — default
   ══════════════════════════════════════ */
/* Force the shopify-section wrapper to be transparent */
.shopify-section:has(.cl-subnav) {
  background: transparent !important;
}
.cl-subnav {
  padding-block: 1.25rem 0.5rem;
  background: transparent !important;
}
.cl-subnav__label {
  display: none; /* pills: hidden on mobile/tablet (cards always show theirs) */
}
.cl-subnav__container {
  max-width: 72rem;
  margin: 0 auto;
}
/* Optional section heading (Marta, Aug 1) — sbc-style scale, extra top padding */
.cl-subnav__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text, #1a1a2e);
  text-align: center;
  margin: 0 0 1.25rem;
  padding-top: 1.5rem;
}

/* ── Track: horizontal scroll ── */
.cl-subnav__track {
  display: flex;
  gap: 0.625rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
}
.cl-subnav__track::-webkit-scrollbar { display: none; }
.cl-subnav__track::after { content: ''; flex-shrink: 0; width: 0.25rem; }
@media (max-width: 749px) { .cl-subnav__track::after { width: 1.25rem; } }

/* ── Shared item base ── */
.cl-subnav__item {
  display: flex;
  text-decoration: none;
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   Design B: Pills (default)
   Mirrors megamenu room filter pills
   ══════════════════════════════════════ */
.cl-subnav--pills .cl-subnav__item {
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: var(--radius-button);
  background: transparent;
  border: 1px solid #ccc;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  letter-spacing: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cl-subnav--pills .cl-subnav__item:hover {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}
.cl-subnav--pills .cl-subnav__icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
/* Active/current collection pill */
.cl-subnav--pills .cl-subnav__item[aria-current="page"],
.cl-subnav--pills .cl-subnav__item.is-active {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
}

/* Pills — dark theme */
.cl-subnav--dark.cl-subnav--pills .cl-subnav__item {
  background: transparent;
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.55);
}
.cl-subnav--dark.cl-subnav--pills .cl-subnav__item:hover {
  background: #fff;
  color: #1a1a2e;
  border-color: #fff;
  box-shadow: none;
}
.cl-subnav--dark.cl-subnav--pills .cl-subnav__item[aria-current="page"],
.cl-subnav--dark.cl-subnav--pills .cl-subnav__item.is-active {
  background: #fff;
  color: #1a1a2e;
  border-color: #fff;
}

/* ══════════════════════════════════════
   Design A: Cards (image + label)
   Restyled Aug 1 (Marta): mirrors shop-by-category's sub-cards — same radius,
   same slow image zoom — but WITHOUT the card/pill background: naked image
   with the label underneath. Labels are always visible, including mobile.
   ══════════════════════════════════════ */
.cl-subnav--cards .cl-subnav__item {
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  width: 10rem;
}
.cl-subnav--cards .cl-subnav__label {
  display: block; /* overrides the pills-oriented base hide — mobile included */
}
.cl-subnav--cards .cl-subnav__img-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--pdp-radius-card, 18px);
  overflow: hidden;
  background: #f5f5f0;
  transition: box-shadow 0.25s ease;
}
.cl-subnav--cards .cl-subnav__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same easing/duration as .sbc__sub-img */
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-subnav--cards .cl-subnav__item:hover .cl-subnav__img {
  transform: scale(1.04);
}
.cl-subnav--cards .cl-subnav__item:hover .cl-subnav__img-wrap {
  box-shadow: 0 10px 25px -8px rgba(0,0,0,0.12);
}
.cl-subnav--cards .cl-subnav__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a1a1aa;
}
.cl-subnav--cards .cl-subnav__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.25;
  transition: color 0.2s ease;
}
/* Current collection: brand-green ring on the image + emphasised label */
.cl-subnav--cards .cl-subnav__item[aria-current="page"] .cl-subnav__img-wrap {
  box-shadow: 0 0 0 2px var(--color-brand-green, #48A06A);
}
.cl-subnav--cards .cl-subnav__item[aria-current="page"] .cl-subnav__label {
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .cl-subnav--cards .cl-subnav__img,
  .cl-subnav--cards .cl-subnav__item:hover .cl-subnav__img {
    transition: none;
    transform: none;
  }
}

/* Cards — dark theme */
.cl-subnav--dark.cl-subnav--cards .cl-subnav__img-wrap {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.08);
}
.cl-subnav--dark.cl-subnav--cards .cl-subnav__label {
  color: #f5f5f5;
}
.cl-subnav--dark.cl-subnav--cards .cl-subnav__img-placeholder {
  color: rgba(255,255,255,0.3);
}

/* ── Desktop, PILLS ONLY: boxed pill bar overlapping hero ──
   (Cards mode used to inherit this white box; Marta was killing it with
   template custom_css. The box is now scoped to pills and cards sit naked.) */
@media (min-width: 750px) {
  .cl-subnav--pills {
    position: relative;
    z-index: 2;
    margin-top: -1.75rem;
    padding-block: 0;
    background: transparent;
    display: flex;
    justify-content: center;
  }
  .cl-subnav--pills .cl-subnav__container {
    display: inline-flex !important;
    align-items: center;
    gap: 0.75rem;
    max-width: 72rem;
    width: auto !important;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-button);
    padding: 0.375rem 1rem;
  }
  .cl-subnav--pills .cl-subnav__label {
    display: block;
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #999);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .cl-subnav--dark .cl-subnav__label {
    color: rgba(255,255,255,0.5);
  }
  .cl-subnav__track {
    justify-content: center;
    overflow: visible;
    gap: 0.5rem;
  }
  .cl-subnav--dark.cl-subnav--pills .cl-subnav__container {
    background: #1e1e21;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }

  /* Cards on desktop: centered open row, generous air (bakes in the intent of
     the template custom_css Marta had added — now removable). */
  .cl-subnav--cards {
    padding-block: 2rem 1rem;
  }
  .cl-subnav--cards .cl-subnav__track {
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* ── Mobile ── */
@media (max-width: 749px) {
  .cl-subnav { padding-block: 1rem 0.25rem; }
  .cl-subnav__container.page-width { max-width: 100vw !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
  .cl-subnav__track { padding-left: 1.25rem; padding-right: 1.25rem; overflow-x: auto; }
  .cl-subnav__track::after { content: ''; flex-shrink: 0; width: 1px; } /* ensures last pill isn't clipped */
  .cl-subnav--cards .cl-subnav__item { width: 6.5rem; gap: 0.5rem; }
  .cl-subnav--cards .cl-subnav__label { font-size: 0.75rem; }
  .cl-subnav--pills .cl-subnav__item { font-size: 0.75rem; padding: 0.4375rem 0.875rem; }
}
/* END_SECTION:collection-subnav */

/* START_SECTION:collection-tabs (INDEX:20) */
.shop-categories {
  padding-block: 2.5rem;
}

.shop-categories__container {
  max-width: 72rem;
  margin: 0 auto;
}

.shop-categories__header {
  margin-block-end: 2rem;
}

.shop-categories__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-foreground);
}

.shop-categories__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.shop-categories__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-foreground);
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.shop-categories__card:hover {
  transform: translateY(-4px);
}

.shop-categories__card-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-xl, 1rem);
  background: var(--color-secondary, #f0ede8);
}

.shop-categories__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.shop-categories__card:hover .shop-categories__card-img {
  transform: scale(1.05);
}

.shop-categories__card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.25) 0%, transparent 50%);
  pointer-events: none;
}

.shop-categories__card-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8e6e1 0%, #d5d3ce 100%);
}

.shop-categories__card-label {
  display: block;
  padding: 0.75rem 0.25rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-foreground);
}

/* 3 rows max on desktop (15 items at 5 per row) */
/* Desktop: same padding as mobile — unified */

/* Tablet: 3 columns */
@media screen and (max-width: 989px) and (min-width: 750px) {
  .shop-categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile: 2 columns, max 6 */
@media screen and (max-width: 749px) {
  .shop-categories__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .shop-categories__card--hide-mobile {
    display: none;
  }

  .shop-categories__card-label {
    font-size: 0.8125rem;
    padding-top: 0.5rem;
  }
}

/* Dark mode */
.theme-dark .shop-categories__title { color: #f5f5f5; }
.theme-dark .shop-categories__card-label { color: #f5f5f5; }
.theme-dark .shop-categories__card-media { background: rgba(255,255,255,0.05); }
/* END_SECTION:collection-tabs */

/* START_SECTION:collection-treatment-modes (INDEX:21) */
.treatment-modes {
    display: block;
    position: relative;
    min-height: 600px;
    overflow: hidden;
    color: #fff;
  }

  .treatment-modes__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .treatment-modes__bg-img,
  .treatment-modes__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.7s ease;
  }

  .treatment-modes__bg-video {
    position: absolute;
    inset: 0;
  }

  .treatment-modes__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.20));
  }

  .treatment-modes__content {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin-inline: auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
  }

  .treatment-modes__header {
    margin-block-end: 2rem;
  }

  .treatment-modes__eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-block-end: 0.5rem;
  }

  .treatment-modes__title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.2;
  }

  .treatment-modes__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* --- Tab list --- */
  .treatment-modes__list {
    display: flex;
    flex-direction: column;
  }

  .treatment-modes__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.625rem 0;
    text-align: start;
    font-family: inherit;
    position: relative;
  }

  .treatment-modes__item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.3s ease;
  }

  .treatment-modes__item .treatment-modes__item-row {
    transform: translateX(-0.625rem);
  }

  .treatment-modes__item:hover .treatment-modes__item-row {
    transform: translateX(0);
  }

  .treatment-modes__item--active .treatment-modes__item-row {
    transform: translateX(0);
  }

  .treatment-modes__indicator {
    width: 2px;
    height: 1.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .treatment-modes__item--active .treatment-modes__indicator {
    opacity: 1;
  }

  .treatment-modes__concern {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
  }

  .treatment-modes__item:hover .treatment-modes__concern {
    color: rgba(255, 255, 255, 0.7);
  }

  .treatment-modes__item--active .treatment-modes__concern {
    color: #fff;
  }

  /* Progress bar — under concern text, fixed width */
  .treatment-modes__progress {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.375rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .treatment-modes__item--active .treatment-modes__progress {
    opacity: 1;
  }

  .treatment-modes__progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    /* will-change: width removed — width transitions cannot be GPU-composited */
  }

  /* --- Info card --- */
  .treatment-modes__panels {
    position: relative;
  }

  .treatment-modes__card {
    max-width: 24rem;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    color: #1a1a2e !important;
    animation: treatmentCardIn 0.3s ease;
  }

  /* hidden attribute is natively handled by browsers — no CSS needed */
  .treatment-modes__card--hidden {
    display: none;
  }

  @keyframes treatmentCardIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Keyboard-initiated switches skip the entrance animation entirely */
  .tm-kbd-instant .treatment-modes__card {
    animation: none;
  }

  .treatment-modes__card-icon {
    width: 44px;
    height: 44px;
    margin-block-end: 0.5rem;
    color: var(--color-brand-green, #48A06A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .treatment-modes__card-icon img,
  .treatment-modes__card-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .treatment-modes__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-block-end: 0.25rem;
    color: #1a1a2e !important;
  }

  .treatment-modes__card-desc {
    font-size: 0.875rem;
    color: #6b7280 !important;
    line-height: 1.625;
    margin-block-end: 0.75rem;
  }

  .treatment-modes__card-desc strong {
    font-weight: 500;
  }

  .treatment-modes__wavelength {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    color: #888;
    margin-top: 0.5rem;
  }
  .treatment-modes__wavelength-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Nav inside card */
  .treatment-modes__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1rem;
    padding-block-start: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .treatment-modes__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: none;
    color: #1a1a2e;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .treatment-modes__nav-btn:hover {
    background: rgba(0, 0, 0, 0.05);
  }

  .treatment-modes__counter {
    font-size: 0.75rem;
    color: #6b7280;
  }

  .treatment-modes__counter-current {
    color: #1a1a2e;
    font-weight: 600;
  }

  /* --- Desktop --- */
  @media screen and (min-width: 750px) {
    .treatment-modes {
      min-height: 700px;
    }

    .treatment-modes__content {
      padding: 5rem 1.5rem;
      min-height: 700px;
    }

    .treatment-modes__header {
      margin-block-end: 3rem;
    }

    .treatment-modes__title {
      font-size: 2.25rem;
    }

    .treatment-modes__body {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 4rem;
    }

    .treatment-modes__list {
      flex-shrink: 0;
      min-width: 180px;
    }

    .treatment-modes__item {
      padding: 0.75rem 0;
    }

    .treatment-modes__concern {
      font-size: 1.125rem;
    }

    .treatment-modes__card {
      padding: 1.5rem;
    }
  }

  @media screen and (min-width: 990px) {
    .treatment-modes__title {
      font-size: 3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .treatment-modes__card {
      animation: none;
    }

    .treatment-modes__progress-fill {
      transition: none;
    }

    .treatment-modes__bg-img {
      transition: none;
    }

    .treatment-modes__item-row,
    .treatment-modes__concern,
    .treatment-modes__indicator {
      transition: none;
    }
  }
/* END_SECTION:collection-treatment-modes */

/* START_SECTION:collection-trust (INDEX:22) */
.cl-trust {
  padding-block: 3rem;
  background: var(--color-secondary, #f0ede8);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.cl-trust--dark {
  background: #111118;
  border-color: rgba(255,255,255,0.06);
}
.cl-trust__container {
  max-width: 72rem;
  margin: 0 auto;
}
.cl-trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.cl-trust__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.cl-trust__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground, #1a1a2e);
}
.cl-trust--dark .cl-trust__icon { color: #f5f5f5; }
.cl-trust__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
  line-height: 1.3;
}
.cl-trust--dark .cl-trust__title { color: #f5f5f5; }
.cl-trust__desc {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text-muted, #71717a);
  margin: 0.25rem 0 0;
}
.cl-trust--dark .cl-trust__desc { color: rgba(255,255,255,0.5); }

@media (max-width: 749px) {
  .cl-trust { padding-block: 2rem; }
  .cl-trust__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* END_SECTION:collection-trust */

/* START_SECTION:collection-video (INDEX:23) */
.cl-video {
  padding-block: 4rem;
}
.cl-video--dark {
  background: #1e1e21;
}
.cl-video__container {
  max-width: 72rem;
  margin: 0 auto;
}
.cl-video__layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: center;
}
{%- comment -%} .cl-video__heading used to be styled here as well as by the
     shared section-heading snippet, so two rules competed for the same
     element. The snippet owns the heading now. Description sizing moved to
     assets/type-scale.css so it follows the site's prose scale. {%- endcomment -%}
.cl-video__description {
  color: var(--color-text-muted, #555);
}
.cl-video--dark .cl-video__description { color: rgba(255,255,255,0.65); }
.cl-video__description p { margin: 0 0 0.75rem; }
.cl-video__trust-point {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  margin-block-start: 0.625rem;
}
.cl-video--dark .cl-video__trust-point { color: #f5f5f5; }
.cl-video__trust-point svg { color: var(--color-brand-green, #48A06A); flex-shrink: 0; }

/* ── Player ── */
.cl-video__player {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0d0d14;
}
.cl-video__native {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cl-video__player:hover .cl-video__poster { transform: scale(1.02); }
.cl-video__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s;
}
.cl-video__play-btn:hover { transform: translate(-50%, -50%) scale(1.08); }
.cl-video__play-btn[hidden] { display: none; }

.cl-video__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
  padding: 1.5rem 0.75rem 0.5rem;
}
.cl-video__controls[hidden] { display: none; }
.cl-video__progress {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 0.5rem;
}
.cl-video__progress-bar {
  height: 100%;
  background: #fff;
  width: 0%;
  border-radius: 2px;
  transition: width 0.15s linear;
}
.cl-video__controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cl-video__time {
  font-size: 0.6875rem;
  color: rgba(255,255,255,0.8);
  font-variant-numeric: tabular-nums;
}
.cl-video__controls-right {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cl-video__speed,
.cl-video__mute,
.cl-video__fullscreen {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 0.25rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cl-video__speed {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  font-family: inherit;
  min-width: 2rem;
}
.cl-video__mute,
.cl-video__fullscreen {
  width: 28px;
  height: 28px;
  padding: 0;
}
.cl-video__speed:hover,
.cl-video__mute:hover,
.cl-video__fullscreen:hover { background: rgba(255,255,255,0.3); }

.cl-video__iframe-wrap {
  position: absolute;
  inset: 0;
}
.cl-video__iframe-wrap iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 749px) {
  .cl-video { padding-block: 2.5rem; }
  .cl-video__layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .cl-video__player { border-radius: 0.75rem; }
  .cl-video__play-btn svg { width: 48px; height: 48px; }
}
/* END_SECTION:collection-video */

/* START_SECTION:contact-form (INDEX:24) */
.contact-page {
  padding: 3rem 1.5rem 4rem;
}
.contact-page__container {
  max-width: 72rem;
  margin: 0 auto;
}

/* Help Center nudge */
.contact-page__help-nudge {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 1rem;
  margin-bottom: 3rem;
}
.contact-page__help-icon { flex-shrink: 0; color: var(--color-brand-green, #51BD7A); }
.contact-page__help-text { flex: 1; }
.contact-page__help-title { font-weight: 600; font-size: 0.9375rem; margin: 0 0 0.25rem; }
.contact-page__help-desc { font-size: 0.8125rem; color: #666; margin: 0; }
.contact-page__help-desc a { color: var(--color-brand-green, #51BD7A); font-weight: 600; }
.contact-page__help-btn {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  background: #1a1a2e;
  color: #fff;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.contact-page__help-btn:hover { background: #2a2a2d; }

/* Grid */
.contact-page__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 3rem;
  align-items: start;
}

/* Form */
.contact-page__form-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.contact-page__form-desc {
  color: #666;
  font-size: 0.875rem;
  margin: 0 0 2rem;
}
.contact-page__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.contact-page__field {
  margin-bottom: 1.25rem;
}
.contact-page__label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: #1a1a2e;
}
.contact-page__required { color: #ef4444; }
.contact-page__optional { color: #999; font-weight: 400; }
.contact-page__input,
.contact-page__select,
.contact-page__textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-family: inherit;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 0.625rem;
  background: #fff;
  color: #1a1a2e;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  box-sizing: border-box;
}
.contact-page__input:focus,
.contact-page__select:focus,
.contact-page__textarea:focus {
  border-color: #2d8a23;
  box-shadow: 0 0 0 3px rgba(45,138,35,0.1);
}
.contact-page__input::placeholder,
.contact-page__textarea::placeholder { color: #aaa; }
.contact-page__select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.contact-page__textarea { resize: vertical; min-height: 120px; }
.contact-page__submit {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.contact-page__submit:hover { background: #2a2a2d; transform: translateY(-1px); }

/* Success / Error */
.contact-page__success {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #166534;
}
.contact-page__error {
  padding: 1rem 1.25rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #991b1b;
}

/* Info sidebar */
.contact-page__info-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.contact-page__info-card {
  padding: 1.25rem;
  background: #f9f9f7;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.contact-page__info-icon { margin-bottom: 0.5rem; color: #666; }
.contact-page__info-card h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.375rem; }
.contact-page__info-card p { font-size: 0.8125rem; color: #666; margin: 0; line-height: 1.6; }
.contact-page__info-card a { color: var(--color-brand-green, #51BD7A); }
.contact-page__chat-btn {
  margin-top: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.contact-page__chat-btn:hover { background: #2a2a2d; }

.contact-page__quick-links h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.75rem; }
.contact-page__quick-links ul { list-style: none; padding: 0; margin: 0; }
.contact-page__quick-links li {
  margin-bottom: 0.375rem;
  border-left: 2px solid #e5e5e5;
  padding-left: 0.75rem;
  transition: border-color 0.2s;
}
.contact-page__quick-links li:hover { border-left-color: var(--color-brand-green, #51BD7A); }
.contact-page__quick-links a {
  font-size: 0.8125rem;
  color: var(--color-brand-green, #51BD7A);
  text-decoration: none;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0;
}
.contact-page__quick-links a svg { flex-shrink: 0; opacity: 0.5; transition: opacity 0.2s, transform 0.2s; }
.contact-page__quick-links a:hover svg { opacity: 1; transform: translateX(2px); }
.contact-page__quick-links a:hover { opacity: 0.85; }

/* Dark mode */
.theme-dark .contact-page__help-nudge { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.theme-dark .contact-page__quick-links li { border-left-color: rgba(255,255,255,0.12); }
.theme-dark .contact-page__quick-links li:hover { border-left-color: var(--color-brand-green, #51BD7A); }
.theme-dark .contact-page__help-title { color: #f5f5f5; }
.theme-dark .contact-page__form-title { color: #f5f5f5; }
.theme-dark .contact-page__label { color: #f5f5f5; }
.theme-dark .contact-page__input,
.theme-dark .contact-page__select,
.theme-dark .contact-page__textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: #f5f5f5; }
.theme-dark .contact-page__info-card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.theme-dark .contact-page__info-card h3 { color: #f5f5f5; }
.theme-dark .contact-page__info-card p { color: rgba(255,255,255,0.6); }
.theme-dark .contact-page__quick-links h3 { color: #f5f5f5; }

@media (max-width: 749px) {
  .contact-page__grid { grid-template-columns: 1fr; gap: 2rem; }
  .contact-page__field-row { grid-template-columns: 1fr; }
  .contact-page__help-nudge { flex-direction: column; text-align: center; }
  .contact-page__info-col { order: -1; }
}
/* END_SECTION:contact-form */

/* START_SECTION:cta-banner (INDEX:25) */
.cta-banner {
    background: var(--cta-band, transparent);
    padding-block: var(--cta-band-pad, 0px);
  }

  .cta-banner__container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  }

  .cta-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    min-height: 80px;
    border-radius: var(--cta-radius, 16px);
    background: var(--cta-bg, #ffffff);
    color: var(--cta-text, #1a1a2e);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
  }

  .cta-banner__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: block;
  }
  .cta-banner__icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .cta-banner__text {
    flex: 1;
    min-width: 0;
  }
  .cta-banner__title {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--cta-text, #1a1a2e);
  }
  .cta-banner__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.125rem 0 0;
    opacity: 0.75;
    color: var(--cta-text, #1a1a2e);
  }
  .cta-banner__desc p {
    margin: 0;
  }
  .cta-banner__desc > :first-child { margin-top: 0; }
  .cta-banner__desc > :last-child { margin-bottom: 0; }
  .cta-banner__title a,
  .cta-banner__desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .cta-banner__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }
  .cta-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    min-height: 2.25rem;
    border-radius: var(--radius-button, 0.5rem);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }
  .cta-banner__btn:hover {
    opacity: 0.85;
  }
  .cta-banner__btn--primary {
    background: var(--cta-btn-bg, #1a1a2e);
    color: var(--cta-btn-text, #ffffff);
    border: none;
  }
  .cta-banner__btn--secondary {
    background: transparent;
    color: var(--cta-text, #1a1a2e);
    border: 1px solid rgba(0, 0, 0, 0.15);
  }
  .cta-banner__btn--secondary:hover {
    border-color: var(--cta-text, #1a1a2e);
    opacity: 1;
  }

  /* Overlap mode: nothing behind the card may paint, unconditionally.
     Two layers can slice the hero above edge-to-edge and cover its rounded
     bottom corners on wide screens: the .cta-banner wrapper band, and the
     .shopify-section wrapper — the alternating-bg JS inlines a white
     background-color on BOTH elements. !important is the only way to beat
     an inline style, hence both rules carry it. */
  .cta-banner[data-hero-overlap] {
    background: transparent !important;
    padding-block: 0;
  }
  .shopify-section:has(> .cta-banner[data-hero-overlap]) {
    background: transparent !important;
  }

  /* Overlap the hero when this banner sits directly below one.
     Detects Melriver's hero classes (.hero-bb billboard, .cl-hero collection hero).
     The wrapper is full-width: if it paints a band or carries the shadow, it
     slices the hero edge-to-edge — ugly against the boxed rounded hero on wide
     screens. So the wrapper goes invisible and only the inner card overlays
     the hero, carrying its own elevation. */
  .shopify-section:has(.hero-bb) + .cta-banner-section .cta-banner[data-hero-overlap],
  .shopify-section:has(.integration-hero) + .cta-banner-section .cta-banner[data-hero-overlap],
  .shopify-section:has(.cl-hero) + .cta-banner-section .cta-banner[data-hero-overlap] {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--cta-overlap, 0px));
    background: transparent;
    padding-block: 0;
  }
  .shopify-section:has(.hero-bb) + .cta-banner-section .cta-banner[data-hero-overlap] .cta-banner__inner,
  .shopify-section:has(.integration-hero) + .cta-banner-section .cta-banner[data-hero-overlap] .cta-banner__inner,
  .shopify-section:has(.cl-hero) + .cta-banner-section .cta-banner[data-hero-overlap] .cta-banner__inner {
    box-shadow: 0 16px 40px rgba(19, 28, 41, 0.14), 0 2px 8px rgba(19, 28, 41, 0.08);
  }

  @media screen and (max-width: 749px) {
    .cta-banner__inner {
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
    }
    .cta-banner__actions {
      width: 100%;
      flex-direction: column;
    }
    .cta-banner__btn {
      width: 100%;
      justify-content: center;
      padding: 0.625rem 1rem;
    }
    /* Ease the overlap on small screens so the card does not crowd the hero text */
    .shopify-section:has(.hero-bb) + .cta-banner-section .cta-banner[data-hero-overlap],
    .shopify-section:has(.integration-hero) + .cta-banner-section .cta-banner[data-hero-overlap],
    .shopify-section:has(.cl-hero) + .cta-banner-section .cta-banner[data-hero-overlap] {
      margin-top: calc(-0.5 * var(--cta-overlap, 0px));
    }
  }
/* END_SECTION:cta-banner */

/* START_SECTION:cta-bar (INDEX:26) */
.cta-bar { position: relative; z-index: 2; }
.cta-bar__container { max-width: 72rem; margin: 0 auto; }

/* ── Grid ── */
.cta-bar__grid { display: grid; gap: 0.625rem; }
.cta-bar__grid--1 { grid-template-columns: 1fr; }
.cta-bar__grid--2 { grid-template-columns: repeat(2, 1fr); }
.cta-bar__grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ── Card ── */
.cta-bar__card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border-radius: var(--radius-xl, 1rem);
  text-decoration: none;
  color: #1a1a2e;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  min-height: 64px;
}
.cta-bar__card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* ── Image ── */
.cta-bar__img-wrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.5rem;
  overflow: hidden;
}
.cta-bar__img { width: 100%; height: 100%; object-fit: cover; }

/* ── Badge ── */
.cta-bar__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2d8a23;
  background: transparent;
  border: 1px solid currentColor;
  padding: 3px 8px;
  border-radius: 999px;
  margin-bottom: 2px;
  line-height: 1.3;
  opacity: 0.8;
}
.cta-bar__badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Text ── */
.cta-bar__text { flex: 1; min-width: 0; }
.cta-bar__title { font-size: 0.875rem; font-weight: 700; line-height: 1.3; margin: 0; }
.cta-bar__desc { font-size: 0.75rem; color: #666; margin: 0.125rem 0 0; line-height: 1.4; }

/* ── Arrow ── */
.cta-bar__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-surface-alt, #f0efea);
  color: #1a1a2e;
  transition: background 0.2s, transform 0.2s, color 0.2s;
}
.cta-bar__card:hover .cta-bar__arrow { background: #1a1a2e; color: #fff; transform: translateX(2px); }

/* ════ Sale Override ════ */
.cta-bar__sale {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.5rem;
  background: #1a1a2e;
  color: #fff;
  border-radius: var(--radius-xl, 1rem);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.cta-bar__sale:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.25); transform: translateY(-2px); }
.cta-bar__sale-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  color: #ef4444;
  border: 1px solid currentColor;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 4px;
  opacity: 0.85;
}
.cta-bar__sale-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cta-bar__sale-text { flex: 1; }
.cta-bar__sale-title { font-size: 1rem; font-weight: 700; margin: 0; }
.cta-bar__sale-desc { font-size: 0.8125rem; opacity: 0.7; margin: 0.25rem 0 0; }
.cta-bar__sale-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1.25rem;
  background: #fff;
  color: #1a1a2e;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.cta-bar__sale:hover .cta-bar__sale-cta { background: #f0efea; transform: translateX(2px); }

/* ── Countdown ── */
.cta-bar__countdown { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }
.cta-bar__countdown-unit { text-align: center; min-width: 2.5rem; }
.cta-bar__countdown-unit span { display: block; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cta-bar__countdown-unit small { display: block; font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.cta-bar__countdown-sep { font-size: 1rem; font-weight: 600; opacity: 0.4; margin-top: -0.5rem; }

/* ── Dark scheme ── */
.theme-dark .cta-bar__card { background: #1e1e21; border-color: rgba(255,255,255,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.2); color: #f5f5f5; }
.theme-dark .cta-bar__desc { color: rgba(255,255,255,0.5); }
.theme-dark .cta-bar__arrow { background: rgba(255,255,255,0.1); color: #f5f5f5; }
.theme-dark .cta-bar__card:hover .cta-bar__arrow { background: #fff; color: #1a1a2e; }
.theme-dark .cta-bar__badge { color: var(--color-brand-green, #51BD7A); background: transparent; }

/* ── Hero overlap ── */
.shopify-section:has(.hero-bb) + .shopify-section > .cta-bar,
.shopify-section:has(.cl-hero) + .shopify-section > .cta-bar {
  margin-top: -1.5rem;
}

/* ── Mobile ── */
@media (max-width: 749px) {
  .cta-bar__grid--2, .cta-bar__grid--3 { grid-template-columns: 1fr; }
  .cta-bar__card { padding: 0.625rem 0.875rem; min-height: 52px; gap: 0.625rem; }
  .cta-bar__img-wrap { width: 36px; height: 36px; }
  .cta-bar__title { font-size: 0.8125rem; }
  .cta-bar__desc { font-size: 0.6875rem; }
  .cta-bar__arrow { width: 24px; height: 24px; }
  .cta-bar__sale { flex-wrap: wrap; gap: 0.75rem; padding: 0.75rem 1rem; }
  .cta-bar__countdown-unit span { font-size: 1rem; }
}
/* END_SECTION:cta-bar */

/* START_SECTION:cta-cards (INDEX:27) */
.cta-cards__container {
    max-width: var(--pdp-container, 72rem);
    margin-inline: auto;
    padding-inline: var(--pdp-gutter, 1.25rem);
  }

  .cta-cards__grid {
    display: grid;
    grid-template-columns: repeat(var(--cc-count, 3), minmax(0, 1fr));
    gap: 1rem;
  }

  .cta-cards__card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #deddd8);
    border-radius: var(--pdp-radius-card, 14px);
    text-decoration: none;
    color: var(--color-foreground, #1a1a2e);
    transition: border-color var(--duration-base, 200ms) var(--ease-default, ease),
                box-shadow var(--duration-base, 200ms) var(--ease-default, ease),
                transform var(--duration-fast, 150ms) var(--ease-default, ease);
  }
  .cta-cards__card:hover {
    border-color: color-mix(in srgb, var(--cc-accent, #48A06A) 55%, transparent);
    box-shadow: 0 6px 18px -8px rgba(19, 28, 41, 0.18);
    transform: translateY(-1px);
  }
  .cta-cards__card:focus-visible {
    outline: 2px solid var(--cc-accent, #48A06A);
    outline-offset: 2px;
  }

  .cta-cards__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
  }

  .cta-cards__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cc-accent, #48A06A) 45%, transparent);
    color: color-mix(in srgb, var(--cc-accent, #48A06A) 65%, #1a1a2e);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.2rem;
  }

  .cta-cards__title {
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.005em;
  }

  .cta-cards__desc {
    font-size: 0.8125rem;
    color: var(--pdp-text-muted, #555c65);
    line-height: 1.45;
  }

  .cta-cards__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border, #deddd8);
    color: var(--color-foreground, #1a1a2e);
    transition: background var(--duration-base, 200ms) var(--ease-default, ease),
                color var(--duration-base, 200ms) var(--ease-default, ease);
  }
  .cta-cards__card:hover .cta-cards__arrow {
    background: var(--cc-accent, #48A06A);
    border-color: var(--cc-accent, #48A06A);
    color: #ffffff;
  }

  @media screen and (max-width: 749px) {
    .cta-cards__grid {
      grid-template-columns: 1fr;
      gap: 0.75rem;
    }
  }
/* END_SECTION:cta-cards */

/* START_SECTION:editorial-text-page (INDEX:28) */
/* Everything this section adds is scoped to .editorial-page-section (the
   wrapper class in this file's schema). sections/editorial-text.liquid styles
   the same .editorial block and compiles after this file, so unscoped rules
   here either lose to it or leak into every editorial-text section. */
.editorial {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .editorial { padding-inline: var(--pdp-gutter, 2rem); }
}

/* Top / bottom spacing selects. Without these the data attributes the section
   emits are inert, which is why the editor's spacing controls did nothing. */
.editorial-page-section .editorial                            { padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem)); }
.editorial-page-section .editorial[data-spacing-top="tight"]     { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.editorial-page-section .editorial[data-spacing-top="none"]      { padding-block-start: 0; }
.editorial-page-section .editorial[data-spacing-bottom="tight"]  { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.editorial-page-section .editorial[data-spacing-bottom="none"]   { padding-block-end: 0; }

/* Gray Haze panel — page width, rounded, held off the viewport edge so the
   corners read as a card rather than a clipped band. */
.editorial-page-section .editorial--bg-cream {
  background: var(--color-gray-haze, #F7F7F8);
  width: calc(100% - 2rem);
  border-radius: var(--uw-r, 1.25rem);
}
@media (min-width: 1400px) {
  .editorial-page-section .editorial--bg-cream { max-width: var(--uw-max, 1280px); }
}

.editorial__container {
  max-width: 56rem;
  margin: 0 auto;
}
.editorial--align-left .editorial__container   { margin-inline: auto; }
.editorial--align-center .editorial__container { margin-inline: auto; text-align: center; }

.editorial__items {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}

/* ── Header ── */
.editorial__header {
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 44rem;
}
/* Same 56rem measure as .editorial__container, so the eyebrow and heading sit
   on the body copy's left edge instead of the section's. */
.editorial-page-section .editorial__header {
  max-width: 56rem;
  margin-inline: auto;
}
.editorial--align-center .editorial__header {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.editorial__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green-text, #308551);
  line-height: 1.4;
}
.editorial--align-center .editorial__eyebrow { align-self: center; }

.editorial__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text, #131C29);
  margin: 0;
  text-wrap: balance;
}
/* Rich heading/lead come wrapped in <p> from metafield_tag; reset that margin */
.editorial__heading p { margin: 0; }
.editorial__heading em { color: var(--color-brand-green, #48A06A); font-style: normal; }

/* Subtitle: same family and weight as body copy. Lighter tone comes from
   Mirage at 72% on white (--pdp-text-muted), never a neutral grey. */
.editorial__lead {
  font-family: inherit;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--pdp-text-muted, #555c65);
  margin: 0;
  font-weight: 400;
  text-wrap: balance;
}
.editorial__lead p { margin: 0; }

/* ── Body — 1 or 2 column on desktop ── */
.editorial__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text, #1a1a2e);
  columns: 1;
}
@media (min-width: 900px) {
  .editorial--cols-2 .editorial__body {
    columns: 2;
    column-gap: 3rem;
    column-rule: 1px solid color-mix(in srgb, var(--color-text, #1a1a2e) 8%, transparent);
  }
}

/* `pretty` and not `balance` on body copy: these paragraphs carry hard <br>
   breaks from the rich-text metafield, and balancing bails out on blocks with
   forced breaks. `pretty` still pulls a word down to kill the orphan. */
.editorial__body p {
  margin: 0 0 1.25rem;
  break-inside: avoid-column;
  text-wrap: pretty;
}
.editorial__body p:last-child { margin-bottom: 0; }

.editorial--drop-cap .editorial__body p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: 700;
  float: left;
  margin: 0.05em 0.12em 0 0;
  line-height: 0.85;
  color: var(--color-brand-green-text, #308551);
  font-family: var(--font-heading, inherit);
}

.editorial__body h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a1a2e);
  margin: 2rem 0 0.75rem;
  break-after: avoid;
}

.editorial__body ul, .editorial__body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.editorial__body li { margin-bottom: 0.5rem; }

.editorial__body strong { font-weight: 700; }
.editorial__body em { font-style: italic; }

.editorial__body a {
  color: var(--color-brand-green-text, #308551);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1.5px;
}
.editorial__body a:hover { text-decoration-thickness: 2px; }

/* ── Media (contained, below the text) ── */
.editorial__media--below { margin-block-start: 1.5rem; }

.editorial__video-el {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-image, 12px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}

.editorial__img--wide {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-xl, 1rem);
  display: block;
  aspect-ratio: 16 / 9;
}

.editorial__video-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl, 1rem);
  aspect-ratio: 16 / 9;
}

.editorial__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ── Scoped re-assertions ──
   sections/editorial-text.liquid declares the same selectors and compiles after
   this file, so these values only survive at .editorial-page-section
   specificity. Keep this block in sync with the base rules above. */
.editorial-page-section .editorial__eyebrow {
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  color: var(--color-brand-green-text, #308551);
}
.editorial-page-section .editorial__heading { color: var(--color-text, #131C29); text-wrap: balance; }
.editorial-page-section .editorial__lead {
  font-family: inherit;
  color: var(--pdp-text-muted, #555c65);
  text-wrap: balance;
}
.editorial-page-section .editorial__body p { text-wrap: pretty; }
.editorial-page-section .editorial--drop-cap .editorial__body p:first-of-type::first-letter {
  color: var(--color-brand-green-text, #308551);
}

/* ── Editor-only empty-state notice (never shown to customers) ── */
.editorial--editor { padding-block: 2rem; }
.editorial__editor-msg {
  max-width: 56rem;
  margin-inline: auto;
  padding: 2.5rem 1.75rem;
  border: 1px dashed #c9c9c9;
  border-radius: 1rem;
  background: #fafafa;
  text-align: center;
  color: #6b6b6b;
  font-size: 0.9rem;
  line-height: 1.6;
}
.editorial__editor-msg strong { color: var(--color-foreground, #1a1a2e); font-weight: 600; }
.editorial__editor-sub { display: block; margin-top: 0.5rem; }
.editorial__editor-steps {
  display: inline-block;
  text-align: left;
  margin: 0.85rem 0 0.75rem;
  padding-left: 1.25rem;
  max-width: 38rem;
}
.editorial__editor-steps li { margin: 0.3rem 0; }
.editorial__editor-foot {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #9a9a9a;
}
.editorial__editor-msg code {
  background: #ececec;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--color-foreground, #1a1a2e);
}
/* END_SECTION:editorial-text-page */

/* START_SECTION:editorial-text (INDEX:29) */
.editorial {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .editorial { padding-inline: var(--pdp-gutter, 2rem); }
}

.editorial--bg-cream { background: #f7f7f8; }

.editorial__media {
  margin-top: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: 14px;
  overflow: hidden;
}
.editorial__video, .editorial__img {
  width: 100%;
  height: auto;
  display: block;
}
.editorial__container {
  max-width: 56rem;
  margin: 0 auto;
}
.editorial--align-left .editorial__container   { margin-inline: auto; }
.editorial--align-center .editorial__container { margin-inline: auto; text-align: center; }

/* ── Header ── */
.editorial__header {
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 44rem;
}
.editorial--align-center .editorial__header {
  margin-inline: auto;
  align-items: center;
  text-align: center;
}

.editorial__eyebrow {
  display: inline-block;
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green-dark, #2d8a23);
  line-height: 1.4;
}
.editorial--align-center .editorial__eyebrow { align-self: center; }

.editorial__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-text, #1a1a2e);
  margin: 0;
}

.editorial__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--pdp-text-muted, #4b5563);
  margin: 0;
  font-weight: 400;
}

/* ── Body — 1 or 2 column on desktop ── */
.editorial__body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text, #1a1a2e);
  columns: 1;
}
@media (min-width: 900px) {
  .editorial--cols-2 .editorial__body {
    columns: 2;
    column-gap: 3rem;
    column-rule: 1px solid color-mix(in srgb, var(--color-text, #1a1a2e) 8%, transparent);
  }
}

.editorial__body p {
  margin: 0 0 1.25rem;
  break-inside: avoid-column;
}
.editorial__body p:last-child { margin-bottom: 0; }

/* Drop-cap opt-in. Controlled by show_drop_cap setting via the
   .editorial--drop-cap modifier on the section root. */
.editorial--drop-cap .editorial__body p:first-of-type::first-letter {
  font-size: 3em;
  font-weight: 700;
  float: left;
  margin: 0.05em 0.12em 0 0;
  line-height: 0.85;
  color: var(--color-brand-green-dark, #2d8a23);
  font-family: var(--font-heading, inherit);
}

.editorial__body h3 {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a1a2e);
  margin: 2rem 0 0.75rem;
  break-after: avoid;
}

.editorial__body ul, .editorial__body ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}
.editorial__body li { margin-bottom: 0.5rem; }

.editorial__body strong { font-weight: 700; }
.editorial__body em { font-style: italic; }

.editorial__body a {
  color: var(--color-brand-green-dark, #2d8a23);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1.5px;
}
.editorial__body a:hover { text-decoration-thickness: 2px; }

/* ── Pull quote ── */
.editorial__quote {
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 0 clamp(1rem, 3vw, 2rem);
  max-width: 44rem;
  text-align: center;
  border-left: 4px solid var(--color-brand-green-dark, #2d8a23);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border: none;
  position: relative;
}
.editorial__quote::before {
  content: "“";
  position: absolute;
  top: -0.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-brand-green, #48A06A) 30%, transparent);
}
.editorial__quote p {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--color-text, #1a1a2e);
  margin: 0 0 0.75rem;
}
.editorial__quote cite {
  font-style: normal;
  font-size: 0.875rem;
  color: var(--pdp-text-muted, #6b7280);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
/* END_SECTION:editorial-text */

/* START_SECTION:faq-accordion (INDEX:30) */
.pdp-faq {
  display: block;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: 0;
}
.pdp-faq--bg-cream { background: #f7f7f8; }
.pdp-faq--bg-white { background: #ffffff; }
.pdp-faq--bg-transparent { background: transparent; }

.pdp-faq__container {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .pdp-faq__container { padding-inline: 2rem; }
}

.pdp-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .pdp-faq--with-sidebar .pdp-faq__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.pdp-faq__header {
  margin-block-end: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Center the header when no sidebar is shown (CMS pages, collection
   pages, anywhere `show_sidebar` is off). When the sidebar IS shown,
   the asymmetric layout dictates left-align so the title hangs over
   the FAQ list, not the sidebar gutter. */
.pdp-faq:not(.pdp-faq--with-sidebar) .pdp-faq__header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

.pdp-faq__title {
  font-size: clamp(1.5rem, 2.75vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.pdp-faq__subtitle {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5a5a6a);
  margin: 0;
  max-width: 38rem;
}

.pdp-faq__accordion {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.pdp-faq__item { border-block-end: 1px solid rgba(0, 0, 0, 0.06); }
.pdp-faq__item:last-child { border-block-end: none; }
.pdp-faq__item > summary { list-style: none; cursor: pointer; }
.pdp-faq__item > summary::-webkit-details-marker { display: none; }

.pdp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .pdp-faq__question { padding: 1.25rem 1.5rem; font-size: 1rem; }
}
.pdp-faq__question-text { flex: 1; }
.pdp-faq__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted, #5a5a6a);
  transition: transform 0.2s ease;
}
.pdp-faq__item[open] .pdp-faq__chevron { transform: rotate(180deg); }

.pdp-faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5a5a6a);
}
@media (min-width: 768px) {
  .pdp-faq__answer { padding: 0 1.5rem 1.5rem; }
}
.pdp-faq__answer > *:first-child { margin-top: 0; }
.pdp-faq__answer > *:last-child  { margin-bottom: 0; }
.pdp-faq__answer p { margin: 0 0 0.75em; }
.pdp-faq__answer p:last-child { margin-bottom: 0; }
.pdp-faq__answer a {
  /* Core green per Marta's stylization pass (2026-08-10) */
  color: #48A06A;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-faq__answer strong { color: var(--color-foreground, #1a1a2e); font-weight: 600; }

.pdp-faq__help-cta {
  margin-block-start: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #5a5a6a);
  text-align: center;
}
.pdp-faq__help-cta a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-faq__sidebar { min-width: 0; }
.pdp-faq__app-card {
  position: sticky;
  top: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #15803d 0%, #22c55e 50%, #16a34a 100%);
  padding: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  color: #fff;
}
.pdp-faq__app-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.pdp-faq__app-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: #fff;
}
.pdp-faq__app-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.25rem;
}
.pdp-faq__app-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-faq__app-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
}
.pdp-faq__app-features svg { flex-shrink: 0; color: #fff; }
.pdp-faq__app-stores {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.pdp-faq__store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  background: #fff;
  color: #1a1a2e;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pdp-faq__store-badge svg { color: #1a1a2e; }
.pdp-faq__store-badge:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  text-decoration: none;
}
.pdp-faq__app-free {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 899px) {
  .pdp-faq__app-card { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-faq__chevron,
  .pdp-faq__store-badge { transition: none !important; }
}
/* END_SECTION:faq-accordion */

/* START_SECTION:favorite-collection (INDEX:31) */
/* ── favorite-collection ──────────────────────────────────── */
.fc {
  background: var(--color-background, #f5f5f0);
}

.fc__inner {
  display: flex;
  /* Columns must stretch to the row's full height: the sticky element's
     travel range is its parent column. flex-start collapsed .fc__left to
     content height, leaving position:sticky zero room to move. */
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4rem);
}

/* LEFT column */
.fc__left {
  flex: 0 0 var(--fc-left);
  max-width: var(--fc-left);
}

.fc__sticky {
  position: sticky;
  top: 100px;
}

.fc__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fc-eyebrow, var(--color-text-muted, #71717a));
  margin: 0 0 0.75rem;
}

.fc__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, var(--font-size-4xl));
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.25rem;
}

.fc__description {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-foreground-secondary, #3d3d56);
  margin: 0 0 2rem;
  max-width: 38ch;
}

.fc__cta {
  display: inline-flex;
}

/* RIGHT column */
.fc__right {
  flex: 0 0 var(--fc-right);
  max-width: var(--fc-right);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Optional multi-column grid (right_columns > 1) — gap from .fc__right applies */
.fc__right--grid {
  display: grid;
  grid-template-columns: repeat(var(--fc-cols, 2), minmax(0, 1fr));
  align-content: start;
}

.fc__product-wrap {
  width: 100%;
}

/* Placeholder cards shown in editor when no products are added */
.fc__placeholder-card {
  height: 280px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-card, 1rem);
}

/* Mobile — single column, no sticky */
@media (max-width: 749px) {
  .fc__inner {
    flex-direction: column;
    gap: 2rem;
  }

  .fc__left,
  .fc__right {
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .fc__sticky {
    position: static;
  }

  .fc__right--grid {
    grid-template-columns: 1fr;
  }

  .fc__description {
    max-width: 100%;
  }
}
/* END_SECTION:favorite-collection */

/* START_SECTION:feature-accordion (INDEX:32) */
/* ── Feature Accordion ── */
  .fa-accordion {
    --fa-accent: var(--color-brand-green, #51BD7A);
    --nf-section-heading-eyebrow: var(--fa-accent);
    --fa-accent-tint: color-mix(in srgb, var(--fa-accent) 12%, transparent);
    --fa-box-bg: var(--color-surface-alt, #f0efea);
    --fa-box-border: var(--color-border, #deddd8);
    --fa-text: var(--color-text, #1a1a2e);
    --fa-text-muted: var(--color-text-secondary, #666);
    --fa-divider: rgba(26, 26, 46, 0.08);
    --fa-box-radius: var(--radius-xl, 1.5rem);
    --fa-media-radius: var(--radius-lg, 1rem);
  }

  .fa-accordion--accent-blue {
    --fa-accent: #1e40af;
    --fa-accent-tint: color-mix(in srgb, #1e40af 10%, transparent);
  }
  .fa-accordion--accent-warm {
    --fa-accent: #c2410c;
    --fa-accent-tint: color-mix(in srgb, #c2410c 10%, transparent);
  }
  .fa-accordion--accent-dark {
    --fa-accent: #1a1a2e;
    --fa-accent-tint: rgba(26, 26, 46, 0.08);
  }

  /* Container matches sitewide --pdp-container (72rem) so the box aligns
     with SBC, Why Nanoleaf, and every other boxed section on ultra-wide. */
  .fa-accordion {
    width: 100%;
    max-width: var(--pdp-container, 72rem);
    margin-inline: auto;
    padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
    padding-inline: var(--pdp-gutter, 1.25rem);
  }
  @media (min-width: 768px) {
    .fa-accordion { padding-inline: var(--pdp-gutter, 2rem); }
  }
  .fa-accordion__container { width: 100%; }

  /* Kicker — large standalone heading above the section header. On the
     wellness PDPs it carries the product's features_showcase_header
     ("Light That Powers You From the Inside Out"). */
  .fa-accordion__kicker {
    font-size: clamp(1.75rem, 4vw, var(--font-size-4xl, 2.5rem));
    font-weight: 700;
    letter-spacing: var(--tracking-tight, -0.015em);
    line-height: 1.15;
    color: var(--color-foreground, #1a1a2e);
    max-width: 34ch;
    margin: 0 auto 2rem;
    text-align: center;
    text-wrap: balance;
  }

  /* Wavelength / mode chip — sits on top of the open panel content
     (wellness accordion, MEL-1136). */
  .fa-accordion__wavelength {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--fa-accent-tint, rgba(72, 160, 106, 0.25));
    color: color-mix(in srgb, var(--fa-accent, #51BD7A) 62%, #1a1a2e);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.65rem;
  }

  .fa-accordion__header {
    margin-block-end: var(--space-xl);
  }

  /* ── Box ── */
  .fa-accordion__box {
    background: var(--fa-box-bg);
    border: 1px solid var(--fa-box-border);
    border-radius: var(--fa-box-radius);
    padding: var(--space-lg);
    overflow: hidden;
  }
  @media (min-width: 750px) {
    .fa-accordion__box {
      padding: var(--space-xl);
    }
  }
  @media (min-width: 990px) {
    .fa-accordion__box {
      padding: var(--space-2xl);
    }
  }

  /* ── Grid ── */
  .fa-accordion__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  @media (min-width: 990px) {
    .fa-accordion__grid {
      grid-template-columns: 1fr 1.1fr;
      gap: var(--space-2xl);
      align-items: start;
    }
  }

  /* ── Media (right) ── */
  .fa-accordion__media {
    order: -1;
  }
  @media (min-width: 990px) {
    .fa-accordion__media {
      order: 2;
      position: sticky;
      top: calc(var(--header-height, 80px) + var(--space-md));
    }
  }

  .fa-accordion__media-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #1a1a2e;
    border-radius: var(--fa-media-radius);
    overflow: hidden;
    isolation: isolate;
  }
  @media (min-width: 990px) {
    .fa-accordion__media-frame {
      aspect-ratio: 1 / 1;
    }
  }

  .fa-accordion__media-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  .fa-accordion__media-slide--active {
    opacity: 1;
    pointer-events: auto;
  }
  .fa-accordion__media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .fa-accordion__media-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
  }
  .fa-accordion__placeholder-svg {
    width: 64px;
    height: 64px;
    opacity: 0.5;
  }

  /* ── Accordion list (left) ── */
  .fa-accordion__list {
    order: 1;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 990px) {
    .fa-accordion__list { order: 1; }
  }

  .fa-accordion__item {
    border-block-end: 1px solid var(--fa-divider);
  }
  .fa-accordion__item:first-child { border-block-start: 1px solid var(--fa-divider); }

  .fa-accordion__item-heading {
    margin: 0;
    font-family: var(--font-heading);
  }

  .fa-accordion__item-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-lg) 0;
    text-align: start;
    cursor: pointer;
    color: var(--fa-text);
    font-family: inherit;
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--tracking-tight, -0.015em);
    transition: color 0.2s ease;
  }

  .fa-accordion__item-trigger:hover {
    color: var(--fa-accent);
  }

  .fa-accordion__item-trigger:focus-visible {
    outline: 2px solid var(--fa-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
  }

  .fa-accordion__item-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--fa-accent);
    opacity: 0.85;
  }
  .fa-accordion__item-icon svg {
    width: 100%;
    height: 100%;
  }

  .fa-accordion__item-title {
    flex: 1;
    min-width: 0;
  }

  .fa-accordion__item-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--fa-text-muted);
    /* Chevron pops first (faster) — natural easing curve from MD spec */
    transition:
      transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
      background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fa-accordion__item-trigger {
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .fa-accordion__item--open .fa-accordion__item-trigger {
    color: var(--fa-text);
  }
  .fa-accordion__item--open .fa-accordion__item-icon {
    opacity: 1;
  }
  .fa-accordion__item--open .fa-accordion__item-toggle {
    transform: rotate(180deg);
    background: var(--fa-accent-tint);
    color: var(--fa-accent);
  }

  /* ── Smooth expand using grid-row trick ──
     `grid-template-rows: 0fr → 1fr` animates the natural height of the
     content, no JS measurement required, no `max-height` cliff. The inner
     wrapper handles overflow + opacity for a soft cross-fade that starts
     slightly after the expand begins. */
  .fa-accordion__item-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fa-accordion__item--open .fa-accordion__item-panel {
    grid-template-rows: 1fr;
  }
  .fa-accordion__item-panel[hidden] {
    display: grid; /* Override [hidden] so the transition still runs */
  }

  .fa-accordion__item-body {
    overflow: hidden;
    min-height: 0;
    padding-block-end: 0;
    color: var(--fa-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    max-width: 56ch;
    opacity: 0;
    transform: translateY(-4px);
    transition:
      opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
      padding-block-end 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fa-accordion__item--open .fa-accordion__item-body {
    opacity: 1;
    transform: translateY(0);
    padding-block-end: var(--space-lg);
  }
  .fa-accordion__item-body > *:first-child { margin-block-start: 0; }
  .fa-accordion__item-body > *:last-child { margin-block-end: 0; }
  .fa-accordion__item-body strong,
  .fa-accordion__item-body b {
    color: var(--fa-text);
    font-weight: 600;
  }
  .fa-accordion__item-body a {
    color: var(--fa-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }

  .fa-accordion__item-cta-wrap {
    margin-block-start: var(--space-md);
    margin-block-end: 0;
  }
  .fa-accordion__item-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--fa-accent);
    text-decoration: none;
    transition: opacity 0.2s ease, gap 0.2s ease;
  }
  .fa-accordion__item-cta:hover {
    opacity: 0.8;
    gap: 0.55em;
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .fa-accordion__media-slide,
    .fa-accordion__item-panel,
    .fa-accordion__item-toggle,
    .fa-accordion__item-trigger {
      transition: none;
    }
  }
/* END_SECTION:feature-accordion */

/* START_SECTION:feature-grid (INDEX:33) */
/* ── Feature Grid — PDP Benefits-inspired card layout ── */
.feature-grid {
  /* No vertical padding here: the .shopify-section wrapper pays the rhythm via
     section-rhythm.css's BOXED :has(.feature-grid) rule. */
  padding: 0;
}

.feature-grid__container {
  max-width: 72rem;
  margin: 0 auto;
}

.feature-grid__eyebrow-wrap {
  margin-block-end: 0.5rem;
}
/* Alignment syncs eyebrow, title, and subtitle */
.feature-grid--align-left .feature-grid__eyebrow-wrap,
.feature-grid--align-left .feature-grid__subtitle { text-align: left; }
.feature-grid--align-center .feature-grid__eyebrow-wrap,
.feature-grid--align-center .feature-grid__header { justify-content: center; }
.feature-grid--align-center .feature-grid__subtitle { text-align: center; }
.feature-grid--align-right .feature-grid__eyebrow-wrap,
.feature-grid--align-right .feature-grid__subtitle { text-align: right; }
.feature-grid--align-right .feature-grid__header { justify-content: flex-end; }

.feature-grid__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-xl, 1.5rem);
}

.feature-grid__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.feature-grid__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-foreground);
}

.feature-grid__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-foreground);
  transition: opacity var(--duration-base, 0.2s) var(--ease-default, ease);
  white-space: nowrap;
}

.feature-grid__view-all:hover { opacity: 0.7; }

.feature-grid__subtitle {
  color: var(--color-text-muted);
  margin-block-end: 2rem;
  max-width: 42rem;
  line-height: var(--line-height-base);
  font-size: var(--font-size-sm);
}

.feature-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Card — portrait image above, text below */
.feature-grid__card {
  display: block;
  text-decoration: none;
  color: var(--color-foreground);
  text-align: center;
  transition: transform 0.3s ease;
  cursor: default;
}
.feature-grid__card--linked { cursor: pointer; }

.feature-grid__card--linked:hover {
  transform: translateY(-4px);
}

.feature-grid__card-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-xl, 1rem);
  overflow: hidden;
  margin-block-end: 1rem;
  background: var(--color-secondary, #f0ede8);
}

.feature-grid__card-media--placeholder {
  background: linear-gradient(135deg, #e8e6e1 0%, #d5d3ce 100%);
}

.feature-grid__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.feature-grid__card--linked:hover .feature-grid__card-img {
  transform: scale(1.03);
}

.feature-grid__card-body {
  padding: 0 0.5rem;
}

.feature-grid__card-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2d8a23;
  background: transparent;
  border: 1px solid currentColor;
  padding: 3px 10px;
  border-radius: 999px;
  margin-block-end: 0.5rem;
  opacity: 0.85;
}
.feature-grid__card-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.feature-grid__card-title {
  font-weight: 700;
  font-size: 1.0625rem;
  margin-block-end: 0.375rem;
  color: var(--color-foreground);
}

.feature-grid__card-desc {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  margin-block-end: 0.75rem;
}

.feature-grid__card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.feature-grid__card--linked:hover .feature-grid__card-link {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive grid */
@media screen and (min-width: 750px) {

  .feature-grid__grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .feature-grid[data-columns="2"] .feature-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 48rem;
    margin-inline: auto;
  }

  .feature-grid[data-columns="3"] .feature-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .feature-grid[data-columns="4"] .feature-grid__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Mobile: horizontal slider ── */
@media (max-width: 749px) {
  .feature-grid {
    overflow: visible;
  }
  .feature-grid__container {
    overflow: visible;
  }
  .feature-grid__grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-top: 8px;
    padding-bottom: 0.5rem;
    padding-left: var(--space-md, 1rem);
    padding-right: var(--space-md, 1rem);
    margin-left: calc(-1 * var(--space-md, 1rem));
    margin-right: calc(-1 * var(--space-md, 1rem));
  }

  .feature-grid__grid::-webkit-scrollbar { display: none; }

  .feature-grid__card {
    width: 65vw;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .feature-grid__card-link {
    opacity: 1;
    transform: none;
  }

  /* Dot navigation */
  .feature-grid__dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 1rem;
  }

  .feature-grid__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(0,0,0,0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
  }

  .feature-grid__dot--active {
    background: rgba(0,0,0,0.6);
    transform: scale(1.25);
  }
}

/* Desktop: hide dots */
@media (min-width: 750px) {
  .feature-grid__dots { display: none; }
}

/* Dark mode */
.theme-dark .feature-grid__title { color: #f5f5f5; }
.theme-dark .feature-grid__eyebrow { color: rgba(255,255,255,0.5); }
.theme-dark .feature-grid__subtitle { color: rgba(255,255,255,0.6); }
.theme-dark .feature-grid__card-title { color: #f5f5f5; }
.theme-dark .feature-grid__card-desc { color: rgba(255,255,255,0.6); }
.theme-dark .feature-grid__card-link { color: #f5f5f5; }
.theme-dark .feature-grid__view-all { color: #f5f5f5; }
.theme-dark .feature-grid__card-media { background: rgba(255,255,255,0.05); }
.theme-dark .feature-grid__card-badge { color: var(--color-brand-green, #48A06A); background: transparent; }
/* END_SECTION:feature-grid */

/* START_SECTION:footer (INDEX:34) */
/* ── Footer Base — light theme #F7F7F8 ── */
  .footer-wrapper {
    background: #F7F7F8;
    color: #1a1a2e;
    font-family: inherit;
  }

  .nf-footer__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ── Top band (only when contact card is enabled) ── */
  .nf-footer__top {
    padding: 3rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .nf-footer__top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 480px;
  }

  /* ── Newsletter column (4th column of the middle grid) ── */
  .nf-footer__col--newsletter {
    /* All copy + form lives in the column, max-width contains it nicely */
  }

  .nf-footer__newsletter-sub {
    font-size: 0.875rem;
    color: rgba(26, 26, 46, 0.65);
    margin: 0 0 1.25rem;
    line-height: 1.5;
  }

  .nf-footer__newsletter-form { max-width: 100%; }

  /* Pill input (input + button visually fused, like reference screenshot) */
  .nf-footer__newsletter-field {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    padding: 0.25rem 0.25rem 0.25rem 1.1rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }
  .nf-footer__newsletter-field:focus-within {
    border-color: var(--color-brand-green, #48A06A);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-green, #48A06A) 18%, transparent);
  }

  .nf-footer__newsletter-input {
    flex: 1;
    padding: 0.65rem 0.4rem;
    border: none;
    background: transparent;
    color: #1a1a2e;
    font-size: 0.875rem;
    font-family: inherit;
    min-width: 0;
  }
  .nf-footer__newsletter-input:focus { outline: none; }
  .nf-footer__newsletter-input::placeholder { color: rgba(26, 26, 46, 0.4); }

  .nf-footer__newsletter-btn {
    padding: 0.55rem 1.35rem;
    border: none;
    border-radius: 999px;
    background: var(--color-brand-green, #48A06A);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 200ms ease, transform 0.15s ease;
  }
  .nf-footer__newsletter-btn:hover { background: #45a468; transform: translateY(-1px); }
  .nf-footer__newsletter-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

  /* Legal disclaimer (small text under the form) */
  .nf-footer__newsletter-legal {
    font-size: 0.6875rem;
    color: rgba(26, 26, 46, 0.5);
    margin: 0.75rem 0 0;
    line-height: 1.55;
  }
  .nf-footer__newsletter-legal-link {
    color: rgba(26, 26, 46, 0.65);
    text-decoration: underline;
    text-underline-offset: 1px;
  }
  .nf-footer__newsletter-legal-link:hover { color: #1a1a2e; }

  /* Klaviyo status */
  .nf-footer__newsletter-status {
    font-size: 0.8125rem;
    margin: 0.6rem 0 0;
    line-height: 1.4;
  }
  .nf-footer__newsletter-status[hidden] { display: none; }
  .nf-footer__newsletter-status--success { color: #1d6e3a; }
  .nf-footer__newsletter-status--error { color: #c1304a; }

  /* ── Contact Card ── */
  .nf-footer__contact-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 1rem;
    padding: 1.5rem;
  }

  .nf-footer__contact-heading { font-size: 0.9375rem; font-weight: 700; margin: 0 0 1rem; color: #1a1a2e; }

  .nf-footer__contact-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 0.75rem; }

  .nf-footer__contact-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.625rem; border-radius: 0.5rem;
    text-decoration: none; color: inherit;
    transition: background 200ms ease;
  }

  .nf-footer__contact-item:hover { background: rgba(0, 0, 0, 0.03); }

  .nf-footer__contact-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.06); color: rgba(26, 26, 46, 0.7);
    flex-shrink: 0; transition: background 200ms ease;
  }

  .nf-footer__contact-item:hover .nf-footer__contact-icon-wrap { background: rgba(0, 0, 0, 0.1); }

  .nf-footer__contact-text { display: flex; flex-direction: column; gap: 0.125rem; }
  .nf-footer__contact-label { font-size: 0.6875rem; color: rgba(26, 26, 46, 0.5); line-height: 1; }
  .nf-footer__contact-value { font-size: 0.8125rem; font-weight: 500; color: #1a1a2e; line-height: 1.3; }

  /* ── Live Chat Button ── */
  .nf-footer__live-chat-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    width: 100%; padding: 0.7rem 1.5rem;
    background: var(--color-brand-green, #48A06A); color: #fff; border-radius: 999px;
    font-size: 0.8125rem; font-weight: 600; text-decoration: none;
    transition: background 200ms ease, transform 0.15s ease;
  }

  .nf-footer__live-chat-btn:hover { background: var(--color-brand-green-hover, #3D885A); transform: translateY(-1px); }
  .nf-footer__chat-chevron { transition: transform 200ms ease; }
  .nf-footer__live-chat-btn:hover .nf-footer__chat-chevron { transform: translateX(2px); }

  /* ── Hours ── */
  .nf-footer__contact-hours-wrap { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(0, 0, 0, 0.06); }
  .nf-footer__contact-hours { font-size: 0.6875rem; color: rgba(26, 26, 46, 0.5); margin: 0; text-align: center; }

  /* ── Middle: Brand | flexible link columns | Newsletter ──────────────
     Default density is "comfortable". The merchant can switch the section
     to "compact" (data-footer-density="compact" on the section) to fit more
     link columns with multi-word names without clutter. Link columns size
     via auto-fit minmax so they always fill available width evenly
     regardless of count (2 / 3 / 4 / 5 link sections in the footer menu). */
  .nf-footer__middle { padding: 4rem 0 3rem; border-bottom: 0; }

  .nf-footer__columns {
    --nf-footer-col-min: 9rem;
    display: grid;
    grid-template-columns:
      minmax(15rem, 1.3fr)
      repeat(auto-fit, minmax(var(--nf-footer-col-min), 1fr))
      minmax(22rem, 2.4fr);
    gap: 2rem 2rem;
    align-items: start;
  }

  /* Newsletter column: roomy on desktop so it doesn't look packed.
     Input + button stretch to fill the column width. */
  .nf-footer__col--newsletter {
    min-width: 0;
  }
  .nf-footer__col--newsletter .nf-footer__newsletter-form {
    width: 100%;
  }
  .nf-footer__col--newsletter .nf-footer__newsletter-field {
    display: flex;
    width: 100%;
  }
  .nf-footer__col--newsletter .nf-footer__newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .nf-footer__col--newsletter .nf-footer__newsletter-btn {
    flex: 0 0 auto;
  }
  .nf-footer__col--newsletter .nf-footer__newsletter-sub {
    max-width: 32ch;
  }

  /* Compact: tighter min + smaller gap → fits 4-5 link columns with
     multi-word labels (e.g. "Find a Retailer", "Customer Support"). */
  [data-footer-density="compact"] .nf-footer__columns {
    --nf-footer-col-min: 7.5rem;
    gap: 1.5rem 1.5rem;
  }

  @media (max-width: 990px) {
    .nf-footer__columns {
      grid-template-columns: 1fr 1fr;
    }
    .nf-footer__col--brand,
    .nf-footer__col--newsletter { grid-column: 1 / -1; }
  }
  @media (max-width: 540px) {
    .nf-footer__columns { grid-template-columns: 1fr; }
    .nf-footer__col--brand,
    .nf-footer__col--newsletter { grid-column: auto; }
  }

  .nf-footer__logo-img { height: 2.5rem; width: auto; margin-bottom: 1rem; }
  .nf-footer__tagline { font-size: 0.8125rem; color: rgba(26, 26, 46, 0.6); margin: 0 0 1.5rem; line-height: 1.6; max-width: 18rem; }
  .nf-footer__social { display: flex; gap: 0.5rem; }

  .nf-footer__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: #fff; color: #1a1a2e;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: background 200ms ease, color 200ms ease, transform 0.15s ease;
  }

  .nf-footer__social-link:hover { background: #1a1a2e; color: #fff; transform: translateY(-1px); }

  /* Column heading: brand green, uppercase, small caps tracking */
  .nf-footer__col-heading {
    font-family: var(--font-heading-family, inherit);
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-brand-green, #48A06A);
    margin: 0 0 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
  }

  [data-footer-density="compact"] .nf-footer__col-heading {
    font-size: 0.625rem;
    margin-bottom: 0.625rem;
    letter-spacing: 0.06em;
  }

  .nf-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
  [data-footer-density="compact"] .nf-footer__links { gap: 0.375rem; }

  /* Link: inline-block so it wraps on its own line when needed, but the
     hover underline (pseudo-element) sizes to text not the whole column.
     `width: fit-content` would prevent multi-word links from wrapping at
     all — overflow follows. Letting the link sit as block + underline-by-
     pseudo-element keeps multi-word labels readable in a narrow column. */
  .nf-footer__link {
    display: inline;
    font-size: 0.8125rem;
    color: rgba(26, 26, 46, 0.75);
    text-decoration: none;
    transition: color 200ms ease;
    line-height: 1.45;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom: 1px;
    transition: background-size 0.25s ease, color 200ms ease;
  }

  [data-footer-density="compact"] .nf-footer__link {
    font-size: 0.75rem;
    line-height: 1.4;
  }

  .nf-footer__link:hover {
    color: #1a1a2e;
    background-size: 100% 1px;
  }

  /* ── Payment Badges (full-width row under the columns) ── */
  .nf-footer__payments-row {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
  }
  .nf-footer__payments-label { font-size: 0.6875rem; color: rgba(26, 26, 46, 0.5); }
  .nf-footer__payments { display: flex; flex-wrap: wrap; gap: 0.375rem; }
  /* The payment-icons web component is the actual container live — without
     wrap it clips the last icon at 375px (NL-QA-09). */
  .nf-footer__payments-row payment-icons { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; }
  .nf-footer__payment-icon { display: inline-block; height: 1.5rem; width: auto; border-radius: 0.25rem; overflow: hidden; vertical-align: middle; }

  /* ── Bottom Bar — copyright left, legal links right ── */
  .nf-footer__bottom { padding: 1.25rem 0; border-top: 1px solid rgba(0, 0, 0, 0.06); }

  .nf-footer__bottom-row {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  @media (max-width: 540px) {
    .nf-footer__bottom-row { flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
  }

  .nf-footer__copyright { font-size: 0.75rem; color: rgba(26, 26, 46, 0.55); }
  .nf-footer__legal { display: flex; align-items: center; gap: 1.25rem; font-size: 0.75rem; color: rgba(26, 26, 46, 0.55); flex-wrap: wrap; }
  .nf-footer__legal-dot { display: none; }
  .nf-footer__legal-link { color: rgba(26, 26, 46, 0.55); text-decoration: none; transition: color 200ms ease; }
  .nf-footer__legal-link:hover { color: #1a1a2e; }

  /* ── Hover underline override ── */
  .nf-footer__contact-item:hover,
  .nf-footer__live-chat-btn:hover,
  .nf-footer__social-link:hover,
  .nf-footer__link:hover,
  .nf-footer__legal-link:hover {
    text-decoration: none;
  }

  /* ── Responsive ──
     Desktop layout is handled by the auto-fit grid above. Only the
     top-grid contact area + bottom-row alignment need explicit
     breakpoints here. */
  @media screen and (min-width: 768px) {
    .nf-footer__top-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
    .nf-footer__bottom-row { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:36) */
/* ══════════════════════════════════════════
   DESKTOP HEADER
   ══════════════════════════════════════════ */

/* Prevent FOUC: hide segment navs until JS moves them into the header */
nav.nf-segment-nav { opacity: 0; transition: opacity 0.15s ease; }
div.nf-segment-right-nav { opacity: 0; transition: opacity 0.15s ease; }
div.nf-segment-mobile-menu { opacity: 0; }
.nf-header__inner nav.nf-segment-nav:not([hidden]) { opacity: 1; }
.nf-header__actions div.nf-segment-right-nav:not([hidden]) { opacity: 1; }
.nf-mobile-menu__sections div.nf-segment-mobile-menu:not([hidden]) { opacity: 1; }

/* Scroll locking lives in assets/nf-scroll-lock.js. Class kept as a state hook. */

.nf-header--desktop { display: none; background: #fff; border-bottom: 1px solid #e5e5e5; position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.nf-header__inner { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; height: 56px; }
.nf-header__logo { display: inline-flex; align-items: center; text-decoration: none; margin-right: 2rem; flex-shrink: 0; }
.nf-header__logo-img { height: 28px; width: auto; }
.nf-header__logo-img--mobile { height: 28px; }
.nf-header__nav { flex: 1; }
.nf-header__nav-list { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nf-header__actions-segment { display: inline-flex; align-items: center; gap: 0; }
.nf-header__actions-segment[hidden] { display: none !important; }

/* Nav links — NO ::after underline (React uses opacity dimming instead) */
.nf-header__nav-link { font-size: 14px; font-weight: 600; color: #666; text-decoration: none; padding: 6px 0; background: none; border: none; cursor: pointer; font-family: inherit; transition: opacity 0.2s, color 0.2s; }
.nf-header__nav-link:hover { color: #1a1a1a; }

/* Opacity dimming: when any nav item is hovered, non-hovered items dim */
.nf-header__nav-list:hover .nf-header__nav-link { opacity: 0.35; }
.nf-header__nav-list:hover .nf-header__nav-link:hover { opacity: 1; color: #1a1a1a; }
.nf-header__nav-link--sale { color: #e63946; }
.nf-header__nav-list:hover .nf-header__nav-link--sale:hover { color: #e63946; }
.nf-header__nav-link--mega-active { opacity: 1 !important; color: #1a1a1a; }
.nf-header__nav-link--mega-active.nf-header__nav-link--sale { color: #e63946; }

.nf-header__sale-badge { position: absolute; top: -8px; right: -22px; background: #e63946; color: #fff; font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 999px; line-height: 1.2; }
.nf-header__nav-item--sale { position: relative; }

/* Right Actions */
.nf-header__actions { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
/* Cluster separation: bump the first utility icon (country) further from the text-nav segment
   block, so the icon cluster reads as a distinct group from the text nav. Without this, the
   uniform 24px parent gap makes the visually-dense text items and the visually-sparse icon
   glyphs read as one undifferentiated row, which feels off-balance. */
.nf-header__actions > .nf-header__action-btn--country { margin-inline-start: 0.75rem; }
.nf-header__action-btn { display: inline-flex; align-items: center; gap: 0.375rem; background: none; border: none; cursor: pointer; color: #1a1a1a; padding: 0; text-decoration: none; font-family: inherit; font-size: 14px; }
.nf-header__action-btn:hover { opacity: 0.7; }
.nf-header__help-text { font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: normal; }
.nf-header__flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  object-fit: cover;
  /* Discreet 1px outline so white-background flags (Japan etc.) stay
     visible against white surfaces. box-shadow used instead of border
     so it doesn't take layout space. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.nf-header__country-code { font-size: 11px; font-weight: 600; }
.nf-header__cart { position: relative; display: inline-flex; align-items: center; color: #1a1a1a; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
.nf-header__cart:hover { opacity: 0.7; }
.nf-header__cart-badge { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-brand-green, #48A06A); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ══════════════════════════════════════════
   MEGA MENU SYSTEM
   ══════════════════════════════════════════ */
.nf-mega-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 40; opacity: 0; transition: opacity 0.2s ease; }
.nf-mega-backdrop[hidden] { display: none; }
.nf-mega-backdrop.is-visible { opacity: 1; }

.nf-mega-container { position: fixed; left: 0; right: 0; z-index: 45; overflow: hidden; max-height: 0; transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.nf-mega-container[hidden] { display: none; }
.nf-mega-container.is-open { max-height: 90vh; }
.nf-mega__hero-img--brand {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #48A06A 0%, #2E7A4E 100%);
}

.nf-mega[hidden] { display: none; }

/* Shared layout */
.nf-mega__layout { display: flex; min-height: 400px; background: #f5f4f0; }
.nf-mega__hero { width: 380px; flex-shrink: 0; position: relative; overflow: hidden; background: #171717; display: block; text-decoration: none; color: inherit; cursor: pointer; }
.nf-mega__hero--narrow { width: 320px; }
.nf-mega__hero-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.nf-mega__hero:hover .nf-mega__hero-img { transform: scale(1.04); }
.nf-mega__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1), transparent); }
.nf-mega__hero-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; }
.nf-mega__hero-title { color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; text-shadow: 0 2px 8px rgba(0,0,0,0.3); margin: 0; }
.nf-mega__hero-tagline { color: rgba(255,255,255,0.8); font-size: 13px; margin-top: 4px; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }

/* Content area */
.nf-mega__content { flex: 1; padding: 20px 32px; display: flex; flex-direction: column; min-width: 0; }

/* Tabs */
.nf-mega__tabs-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
.nf-mega__tabs { display: flex; align-items: center; gap: 2px; position: relative; }
.nf-mega__tab { padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 600; color: #999; background: none; border: none; cursor: pointer; font-family: inherit; position: relative; white-space: nowrap; transition: color 0.2s; }
.nf-mega__tab:hover { color: #555; }
.nf-mega__tab--active { color: #1a1a2e; }
/* Remove static ::after — replaced by sliding indicator */

/* Sliding tab indicator — mimics Framer Motion layoutId spring animation */
/* Fixed 100px base width; JS scales it with transform so the whole move is
   compositor-only (width cannot be composited and desyncs from transform). */
.nf-mega__tab-indicator { position: absolute; bottom: 0; left: 0; width: 100px; height: 2px; background: #1a1a2e; border-radius: 1px; transform-origin: left center; transition: transform 200ms cubic-bezier(0.77, 0, 0.175, 1), background-color 200ms ease; pointer-events: none; will-change: transform; }

.nf-mega__quick-links { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; }
.nf-mega__quick-pill { padding: 4px 10px; font-size: 11px; font-weight: 600; border-radius: 999px; background: #f0f0f0; color: #999; border: 1px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.nf-mega__quick-pill:hover,
.nf-mega__quick-pill--active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* ── Segment color tint — uses --segment-active-color from brand-segment.liquid ── */
.nf-mega__layout { position: relative; }
.nf-mega__layout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--segment-active-color, transparent) 4%, transparent);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.nf-mega__layout > * { position: relative; z-index: 1; }

/* ── PRESERVED: Wellness dark mode (disabled — uncomment to re-enable) ──
.nf-mega__layout--dark { background: #0f0f0f; transition: background 0.3s ease; }
.nf-mega__layout--dark .nf-mega__tabs-row { border-bottom-color: rgba(255,255,255,0.1); }
.nf-mega__layout--dark .nf-mega__tab { color: rgba(255,255,255,0.4); }
.nf-mega__layout--dark .nf-mega__tab:hover { color: rgba(255,255,255,0.7); }
.nf-mega__layout--dark .nf-mega__tab--active { color: #fbbf24; }
.nf-mega__layout--dark .nf-mega__tab-indicator { background: #fbbf24; }
.nf-mega__layout--dark .nf-mega__quick-pill { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.4); border-color: transparent; }
.nf-mega__layout--dark .nf-mega__quick-pill:hover,
.nf-mega__layout--dark .nf-mega__quick-pill--active { background: #f59e0b; color: #000; border-color: #f59e0b; }
.nf-mega__layout--dark .nf-mega__product-card { background: #1a1a1a; border-color: rgba(255,255,255,0.1); }
.nf-mega__layout--dark .nf-mega__product-card:hover { border-color: rgba(255,255,255,0.25); }
.nf-mega__layout--dark .nf-mega__product-name { color: rgba(255,255,255,0.9); }
.nf-mega__layout--dark .nf-mega__product-card:hover .nf-mega__product-name { color: #fbbf24; }
.nf-mega__layout--dark .nf-mega__product-price { color: #fff; }
.nf-mega__layout--dark .nf-mega__product-compare { color: rgba(255,255,255,0.4); }
.nf-mega__layout--dark .nf-mega__product-img-wrap { background: #1a1a1a; }
.nf-mega__layout--dark .nf-mega__see-all { color: rgba(255,255,255,0.6); }
.nf-mega__layout--dark .nf-mega__see-all:hover { color: #fbbf24; }
.nf-mega__layout--dark .nf-mega__cta-btn { background: #fbbf24; color: #000; }
.nf-mega__layout--dark .nf-mega__cta-btn:hover { background: #f59e0b; }
.nf-mega__layout--dark .nf-mega__products-scroll { scrollbar-color: rgba(255,255,255,0.2) transparent; }
── end dark mode ── */

/* Product cards — 1:1 match with React reference */
.nf-mega__scroll-wrap { position: relative; flex: 1; margin-bottom: 16px; margin-right: -32px; }
.nf-mega__products-scroll { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; padding-right: 32px; }
.nf-mega__products-scroll::-webkit-scrollbar { display: none; }
.nf-mega__products-row { display: flex; gap: 12px; }

/* Scroll gradient fades */
.nf-mega__scroll-fade { position: absolute; top: 0; bottom: 0; width: 4rem; z-index: 3; pointer-events: none; transition: opacity 0.25s; }
.nf-mega__scroll-fade--left { left: 0; background: linear-gradient(to right, #f5f4f0, transparent); opacity: 0; }
.nf-mega__scroll-fade--right { right: 0; background: linear-gradient(to left, #f5f4f0, transparent); }
.nf-mega__scroll-fade.is-hidden { opacity: 0; }
/* PRESERVED: dark mode fades (disabled)
.nf-mega__layout--dark .nf-mega__scroll-fade--left { background: linear-gradient(to right, #0f0f0f, transparent); }
.nf-mega__layout--dark .nf-mega__scroll-fade--right { background: linear-gradient(to left, #0f0f0f, transparent); }
*/
/* Support non-layout fades */
.nf-mega__support .nf-mega__scroll-fade--left { background: linear-gradient(to right, #fff, transparent); }
.nf-mega__support .nf-mega__scroll-fade--right { background: linear-gradient(to left, #fff, transparent); }

/* Scroll arrows */
.nf-mega__scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: opacity 0.25s, background 0.2s, box-shadow 0.2s; color: #1a1a2e; }
.nf-mega__scroll-arrow:hover { background: #f5f5f5; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.nf-mega__scroll-arrow--prev { left: -4px; }
.nf-mega__scroll-arrow--next { right: 4px; }
.nf-mega__scroll-arrow.is-hidden { opacity: 0; pointer-events: none; }
/* PRESERVED: dark mode arrows (disabled)
.nf-mega__layout--dark .nf-mega__scroll-arrow { background: #2a2a2a; border-color: rgba(255,255,255,0.15); color: #fff; }
.nf-mega__layout--dark .nf-mega__scroll-arrow:hover { background: #3a3a3a; }
*/
.nf-mega__product-card { display: block; width: 180px; flex-shrink: 0; text-decoration: none; color: inherit; padding: 12px; border-radius: 8px; border: 1px solid #e5e5e5; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.nf-mega__product-card:hover { border-color: #1a1a2e; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); }
.nf-mega__product-img-wrap { position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #e8e8e4; margin-bottom: 8px; }
.nf-mega__product-img { width: 100%; height: 100%; object-fit: cover; }
.nf-mega__product-badge { position: absolute; top: 8px; right: 8px; background: #6b7280; color: #fff; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; }
.nf-mega__product-badge--new { background: #8b5cf6; }
.nf-mega__product-badge--bestseller { background: #3b82f6; }
.nf-mega__product-badge--popular { background: #3b82f6; }
.nf-mega__product-badge--limited { background: #ef4444; }
.nf-mega__product-badge--sale { background: #e63946; }
.nf-mega__product-name { font-size: 13px; font-weight: 600; color: #1a1a2e; margin: 0 0 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.nf-mega__product-card:hover .nf-mega__product-name { color: #3b82f6; }
.nf-mega__product-price { font-size: 15px; font-weight: 700; color: #1a1a2e; margin: 0; }
.nf-mega__product-price-row { display: flex; align-items: center; gap: 6px; }
.nf-mega__product-compare { font-size: 11px; color: #999; text-decoration: line-through; }
.nf-mega__product-review { display: flex; align-items: center; gap: 3px; margin: 1px 0; color: #1a1a2e; }
.nf-mega__product-review svg { flex-shrink: 0; }
.nf-mega__product-review span { font-size: 11px; color: #71717a; line-height: 1; }
/* PRESERVED: dark mode reviews (disabled)
.nf-mega__layout--dark .nf-mega__product-review { color: #f5f5f5; }
.nf-mega__layout--dark .nf-mega__product-review span { color: rgba(255,255,255,0.55); }
*/

/* Bottom actions */
.nf-mega__bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.nf-mega__see-all { font-size: 13px; font-weight: 600; color: #1a1a2e; text-decoration: none; }
.nf-mega__see-all:hover { text-decoration: underline; }
.nf-mega__cta-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; background: #1a1a2e; color: #fff; padding: 10px 24px; border-radius: 999px; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.nf-mega__cta-btn:hover { background: #111122; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* ── FILTER PILLS (Spaces/Rooms) ── */
.nf-mega__filter-pills { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.nf-mega__filter-pill { padding: 5px 14px; font-size: 12px; font-weight: 500; color: #666; background: transparent; border: 1px solid #ccc; border-radius: var(--radius-button, 999px); cursor: pointer; font-family: inherit; white-space: nowrap; letter-spacing: 0; text-transform: none; line-height: 1.4; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.nf-mega__filter-pill:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.nf-mega__filter-pill--active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

/* ── BUNDLES MEGA ── */
.nf-mega__bundles-layout { display: flex; min-height: 380px; background: #f5f4f0; }
.nf-mega__bundles-list { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; }
.nf-mega__bundles-heading { font-size: 13px; font-weight: 600; color: #1a1a2e; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.nf-mega__bundles-items { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nf-mega__bundle-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 8px; background: #fff; border: 1px solid #e5e5e5; text-decoration: none; color: inherit; transition: all 0.2s ease; cursor: pointer; }
.nf-mega__bundle-item:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-color: #1a1a2e; }
.nf-mega__bundle-chevron { flex-shrink: 0; color: #71717a; opacity: 0; transition: opacity 0.2s; }
.nf-mega__bundle-item:hover .nf-mega__bundle-chevron { opacity: 1; }
.nf-mega__bundle-thumb { width: 48px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: #f5f5f5; border: 1px solid #e5e5e5; }
.nf-mega__bundle-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nf-mega__bundle-info { flex: 1; min-width: 0; }
.nf-mega__bundle-title-row { display: flex; align-items: center; gap: 8px; }
.nf-mega__bundle-title-row h4 { font-size: 12px; font-weight: 600; color: #1a1a2e; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-mega__bundle-tag { font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: #1a1a2e; color: #fff; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.nf-mega__bundle-desc { font-size: 10px; color: #71717a; margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-mega__bundle-pricing { text-align: right; flex-shrink: 0; }
.nf-mega__bundle-price { font-size: 13px; font-weight: 700; color: #1a1a2e; display: block; }
.nf-mega__bundle-compare { font-size: 10px; color: #71717a; text-decoration: line-through; }
.nf-mega__bundles-view-all { font-size: 12px; font-weight: 500; color: #1a1a2e; text-decoration: none; margin-top: 12px; }
.nf-mega__bundles-view-all:hover { text-decoration: underline; }

/* Build Your Own */
.nf-mega__build-own { width: 300px; flex-shrink: 0; padding: 20px; }
.nf-mega__build-card { display: block; height: 100%; border-radius: 12px; overflow: hidden; position: relative; background: #1a1a2e; text-decoration: none; color: #fff; transition: box-shadow 0.3s; }
.nf-mega__build-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.nf-mega__build-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.nf-mega__build-card:hover .nf-mega__build-bg { opacity: 0.5; }
.nf-mega__build-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,30,1), rgba(15,15,30,0.8), transparent); }
.nf-mega__build-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; }
.nf-mega__build-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.nf-mega__build-label svg { color: #c8a942; }
.nf-mega__build-label span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #c8a942; }
.nf-mega__build-title { font-size: 24px; font-weight: 900; line-height: 1.1; margin: 0 0 8px; }
.nf-mega__build-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.nf-mega__build-desc strong { color: #fff; }
.nf-mega__build-tiers { display: flex; flex-direction: column; gap: 8px; margin: 20px 0; }
.nf-mega__build-tier { display: flex; align-items: center; gap: 8px; }
.nf-mega__build-tier-count { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.nf-mega__build-tier-line { flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.nf-mega__build-tier-disc { font-size: 13px; font-weight: 700; color: #c8a942; }
.nf-mega__build-benefits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.nf-mega__build-benefit { display: flex; align-items: center; gap: 6px; }
.nf-mega__build-benefit svg { color: #c8a942; }
.nf-mega__build-benefit span { font-size: 10px; color: rgba(255,255,255,0.6); }
.nf-mega__build-cta { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #1a1a2e; padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; width: fit-content; transition: background 0.2s; }
.nf-mega__build-card:hover .nf-mega__build-cta { background: #c8a942; }

/* ── Support mega menu ── */
.nf-mega__support { padding: 24px; background: #f5f4f0; border-bottom: 1px solid #e5e5e5; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.nf-mega__support-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 280px; gap: 40px; max-width: 1200px; margin: 0 auto; align-items: start; }
.nf-mega__support-heading { font-size: 10px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; }
.nf-mega__support-links { display: flex; flex-direction: column; gap: 10px; }
.nf-mega__support-link { font-size: 14px; font-weight: 500; color: #555; text-decoration: none; width: fit-content; transition: color 0.2s; position: relative; }
.nf-mega__support-link::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: #1a1a2e; transition: width 0.25s ease; }
.nf-mega__support-link:hover { color: #1a1a2e; }
.nf-mega__support-link:hover::after { width: 100%; }
.nf-mega__support-contact { min-width: 260px; }
.nf-mega__support-card { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.nf-mega__support-card-title { font-size: 16px; font-weight: 700; color: #1a1a2e; margin: 0 0 20px; letter-spacing: -0.01em; }
.nf-mega__support-card-items { display: flex; flex-direction: column; gap: 12px; }
.nf-mega__support-card-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; transition: background 0.15s; }
.nf-mega__support-card-item:hover { background: #f5f4f0; }
.nf-mega__support-card-icon { width: 36px; height: 36px; border-radius: 10px; background: #f5f4f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #555; }
.nf-mega__support-card-item:hover .nf-mega__support-card-icon { background: #e8e7e3; }
.nf-mega__support-card-label { font-size: 11px; color: #999; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 500; }
.nf-mega__support-card-value { font-size: 13px; font-weight: 600; color: #1a1a2e; }
.nf-mega__support-chat-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 24px; background: var(--color-brand-green, #48A06A); color: #fff; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; margin-top: 4px; }
.nf-mega__support-chat-btn:hover { background: var(--color-brand-green-hover, #44A168); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-brand-green, #48A06A) 35%, transparent); }
.nf-mega__support-card-hours { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e5e5; }
.nf-mega__support-card-hours p { font-size: 11px; color: #999; text-align: center; margin: 0; }

/* ── Hover underline override (global a:hover sets underline — override per class) ── */
.nf-header__logo:hover,
.nf-header__nav-link:hover,
.nf-header__action-btn:hover,
.nf-header__cart:hover,
.nf-mega__product-card:hover,
.nf-mega__cta-btn:hover,
.nf-mega__support-link:hover,
.nf-mega__support-card-item:hover,
.nf-mega__support-chat-btn:hover { text-decoration: none; }

/* ══════════════════════════════════════════
   MOBILE HEADER
   ══════════════════════════════════════════ */
.nf-header--mobile { display: block; background: #fff; border-bottom: 1px solid #e5e5e5; position: relative; z-index: 70; }
.nf-header--mobile.menu-locked { position: fixed; width: 100%; touch-action: none; }
.nf-header--mobile .nf-header__inner { height: 56px; justify-content: space-between; }
.nf-header__burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: #1a1a1a; }
.nf-header__burger-lines { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.nf-header__burger-line { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease; transform-origin: center; }
.nf-header__burger.is-open .nf-header__burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nf-header__burger.is-open .nf-header__burger-line:nth-child(2) { opacity: 0; }
.nf-header__burger.is-open .nf-header__burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nf-header--mobile .nf-header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }

@media (min-width: 768px) {
  .nf-header--desktop { display: block; }
  .nf-header--mobile { display: none; }
}

/* ── Mobile Drawer ── */
.nf-mobile-menu { position: fixed; top: var(--mobile-header-bottom, 56px); left: 0; right: 0; bottom: 0; z-index: 61; pointer-events: none; overflow: hidden; font-weight: 500; }
.nf-mobile-menu[hidden] { display: none; }
.nf-mobile-menu.is-open { pointer-events: auto; overflow: visible; }
.nf-mobile-menu__backdrop { position: fixed; top: var(--mobile-header-bottom, 56px); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 60; opacity: 0; transition: opacity 0.2s ease; }
.nf-mobile-menu.is-open .nf-mobile-menu__backdrop { opacity: 1; }
.nf-mobile-menu__drawer { position: fixed; top: var(--mobile-header-bottom, 56px); left: 0; right: 0; bottom: 0; width: 100vw; background: #fff; z-index: 61; overflow: hidden; display: flex; flex-direction: column; height: 100dvh; height: calc(100vh - var(--mobile-header-bottom, 56px)); clip-path: inset(0 0 100% 0); transition: clip-path 0.28s cubic-bezier(0.16, 1, 0.3, 1); overscroll-behavior: contain; }
.nf-mobile-menu.is-open .nf-mobile-menu__drawer { clip-path: inset(0 0 0 0); }
/* close button removed — burger transforms to × */
.nf-mobile-menu__search { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 1.25rem; padding: 0.625rem 1rem; background: #f5f5f5; border-radius: 999px; color: #999; }
.nf-mobile-menu__search-input { flex: 1; border: none; background: none; font-size: 14px; color: #1a1a1a; outline: none; font-family: inherit; }
.nf-mobile-menu__search-input::placeholder { color: #999; }
.nf-mobile-menu__pills { display: flex; gap: 0.5rem; padding: 1.25rem 1.25rem 0.75rem; flex-wrap: wrap; align-items: center; }
.nf-mobile-menu__pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.5rem 0.875rem; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; flex-shrink: 0; }
.nf-mobile-menu__pill--dark { background: #171717; color: #fff; }
.nf-mobile-menu__pill--amber { background: linear-gradient(to right, #f59e0b, #f97316); color: #fff; }
.nf-mobile-menu__pill--green { background: var(--color-brand-green, #48A06A); color: #fff; }
.nf-mobile-menu__pill--purple { background: #9333ea; color: #fff; }
.nf-mobile-menu__pill-sub { font-size: 9px; background: rgba(255,255,255,0.3); padding: 1px 4px; border-radius: 4px; }
.nf-mobile-menu__sections { flex: 1; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; }
.nf-mobile-menu__section { border-bottom: 1px solid #f0f0f0; }
.nf-mobile-menu__section-btn { display: flex; align-items: center; width: 100%; padding: 0.875rem 1.25rem; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 600; color: #1a1a1a; font-family: inherit; gap: 0.5rem; }
.nf-mobile-menu__section-btn svg { margin-left: auto; color: #999; transition: transform 0.2s; }
.nf-mobile-menu__section-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nf-mobile-menu__section-badge { font-size: 9px; font-weight: 700; background: #e63946; color: #fff; padding: 2px 6px; border-radius: 999px; }
.nf-mobile-menu__section-content { padding: 0 1.25rem 0.75rem 1.25rem; overflow: visible; }
/* Tabs break out of section padding to scroll edge-to-edge */
.nf-mobile-menu__section-content > .nf-mobile-menu__tab-row { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
/* Filter pills break out too */
.nf-mobile-menu__section-content > .nf-mobile-menu__filter-pills { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
.nf-mobile-menu__section-content[hidden] { display: none; }
.nf-mobile-menu__section-link { display: block; padding: 0.5rem 0; font-size: 14px; color: #666; text-decoration: none; }
.nf-mobile-menu__sub-heading { font-size: 10px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin: 12px 0 4px; }
.nf-mobile-menu__sub-heading:first-child { margin-top: 0; }
.nf-mobile-menu__section-btn--link { text-decoration: none; color: #1a1a1a; border-bottom: 1px solid #f0f0f0; }
.nf-mobile-menu__section-link--accent { color: #2e2e3a; font-weight: 500; }
.nf-mobile-menu__footer { position: sticky; bottom: 0; z-index: 5; flex-shrink: 0; border-top: 1px solid #f0f0f0; padding: 0.75rem 1.25rem; background: #fff; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); }
/* Action bar — icon buttons matching desktop header UX */
.nf-mobile-menu__actions { display: flex; gap: 6px; margin-top: 12px; margin-bottom: 12px; }
.nf-mobile-menu__action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 0; border-radius: 8px; border: 1px solid #e5e5e5;
  background: #fff; color: #1a1a2e; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.nf-mobile-menu__action-btn:hover { background: #f5f4f0; border-color: #ccc; text-decoration: none; }
.nf-mobile-menu__action-btn svg { color: #555; flex-shrink: 0; }
/* `flagcdn.com` serves most flags 4:3 but the Swiss and Vatican flags are
   square (1:1). Without `object-fit: cover` + an explicit ratio, those two
   render visibly different from the rest. Pinning dimensions + cover keeps
   every flag the same physical size and shape. */
.nf-mobile-menu__flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  /* Discreet outline so white-background flags (Japan, etc.) stay
     visible against the menu's white panel. */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* Legacy (keep for compat) */
.nf-mobile-menu__footer-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; font-size: 14px; font-weight: 500; color: #1a1a1a; text-decoration: none; }
.nf-mobile-menu__footer-link svg { color: #666; }

/* ── Mobile: tab row (bottom border indicator — matches desktop mega tabs) ── */
.nf-mobile-menu__tab-row { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding: 0; margin-bottom: 12px; border-bottom: 1px solid #e5e5e5; }
.nf-mobile-menu__tab-row::-webkit-scrollbar { display: none; }
.nf-mobile-menu__tab { padding: 8px 12px 10px; font-size: 12px; font-weight: 500; border-radius: 0; background: none; color: #999; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; }
.nf-mobile-menu__tab:hover { color: #555; }
.nf-mobile-menu__tab--active { color: #1a1a2e; border-bottom-color: #1a1a2e; }

/* ── Mobile: horizontal scrollable product cards ── */
.nf-mobile-menu__card-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 0 0 8px; margin-left: -1.25rem; margin-right: -1.25rem; }
.nf-mobile-menu__card-scroll::before,
.nf-mobile-menu__card-scroll::after { content: ''; flex-shrink: 0; width: 1.25rem; }
.nf-mobile-menu__card-scroll::-webkit-scrollbar { display: none; }
.nf-mobile-menu__card-scroll--hidden { display: none; }
.nf-mobile-menu__product-card { display: block; width: 130px; flex-shrink: 0; text-decoration: none; color: inherit; }
.nf-mobile-menu__product-img { position: relative; width: 130px; height: 130px; border-radius: 8px; overflow: hidden; background: #f0f0f0; margin-bottom: 6px; }
.nf-mobile-menu__product-img img { width: 100%; height: 100%; object-fit: cover; }
.nf-mobile-menu__product-badge { position: absolute; top: 6px; right: 6px; font-size: 8px; font-weight: 700; background: #3b82f6; color: #fff; padding: 2px 6px; border-radius: 999px; }
.nf-mobile-menu__product-badge--sale { background: #e63946; }
.nf-mobile-menu__product-name { font-size: 12px; font-weight: 600; color: #1a1a1a; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-mobile-menu__product-price { font-size: 13px; font-weight: 700; color: #1a1a1a; margin: 2px 0 0; }
.nf-mobile-menu__product-price-row { display: flex; align-items: center; gap: 6px; }
.nf-mobile-menu__product-compare { font-size: 11px; color: #999; text-decoration: line-through; }

/* ── Mobile: section CTA link ── */
.nf-mobile-menu__section-cta { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; background: #1a1a2e; padding: 12px 24px; border-radius: 999px; width: 100%; text-align: center; box-sizing: border-box; transition: background 0.2s; }
.nf-mobile-menu__section-cta:hover { background: #111122; text-decoration: none; }

/* ── Mobile: room filter pills ── */
.nf-mobile-menu__filter-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; padding-bottom: 4px; }
.nf-mobile-menu__filter-pills::-webkit-scrollbar { display: none; }
.nf-mobile-menu__filter-pill { padding: 5px 14px; font-size: 12px; font-weight: 500; color: #666; background: transparent; border: 1px solid #ccc; border-radius: 999px; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.nf-mobile-menu__filter-pill:hover { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.nf-mobile-menu__filter-pill--active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }
.nf-mobile-menu__section-cta--sale { background: #1a1a2e; color: #fff; }
.nf-mobile-menu__section-cta--sale:hover { background: #111122; }
.nf-mobile-menu__ww-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #f0f0f0; border-radius: var(--radius-card, 12px); margin-bottom: 4px; transition: border-color 0.2s, box-shadow 0.2s; }
.nf-mobile-menu__ww-link:hover { border-color: #ddd; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.nf-mobile-menu__ww-logo { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; flex-shrink: 0; }
.nf-mobile-menu__ww-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nf-mobile-menu__bottom-content { padding: 1.25rem 1.25rem 0.5rem; margin-top: 0; border-top: none !important; }
.nf-mobile-menu__bottom-content .nf-search-drawer__section-title { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin-bottom: 0.5rem; }
.nf-mobile-menu__bottom-content .nf-search-drawer__usps { margin-top: 0; }
.nf-mobile-menu__bottom-content .nf-search-drawer__usp { padding: 0.5rem 0; }
.nf-mobile-menu__bottom-content .nf-search-drawer__usp:last-child { border-bottom: none; }

/* ── Mobile: inspiration 2-col grid ── */
.nf-mobile-menu__insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nf-mobile-menu__insp-card { position: relative; border-radius: 10px; overflow: hidden; height: 100px; display: block; }
.nf-mobile-menu__insp-card img { width: 100%; height: 100%; object-fit: cover; }
.nf-mobile-menu__insp-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); }
.nf-mobile-menu__insp-card-title { position: absolute; bottom: 8px; left: 10px; right: 10px; color: #fff; font-size: 12px; font-weight: 600; }

/* ── Mobile: BYOB CTA button ── */
/* byob-cta replaced by section-cta */

/* ── Mobile: help heading + contact card ── */
.nf-mobile-menu__help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 1.5rem; }
.nf-mobile-menu__help-col { padding-top: 0.5rem; }
.nf-mobile-menu__help-col:first-child, .nf-mobile-menu__help-col:nth-child(2) { padding-top: 0; }
.nf-mobile-menu__help-heading { font-size: 10px; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.75rem 0 4px; }
.nf-mobile-menu__help-heading:first-child { margin-top: 0; }
.nf-mobile-menu__contact-card { margin-top: 16px; padding: 12px; background: #f8f8f8; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.nf-mobile-menu__contact-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #1a1a1a; text-decoration: none; }
.nf-mobile-menu__contact-item svg { color: #666; flex-shrink: 0; }
.nf-mobile-menu__chat-btn { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--color-brand-green, #48A06A); color: #fff; border: none; border-radius: 999px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; }
.nf-mobile-menu__contact-hours { font-size: 11px; color: #999; margin: 0; }

/* ── Mobile: social links row ── */
.nf-mobile-menu__social { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px 0 4px; border-top: 1px solid #f0f0f0; margin-top: 8px; }
.nf-mobile-menu__social-link { display: inline-flex; align-items: center; color: #666; transition: color 0.2s; }
.nf-mobile-menu__social-link:hover { color: #1a1a1a; }

/* ── Mobile: Trending Now gallery ── */
.nf-mobile-menu__trending { padding: 1rem 1.25rem 0.5rem; }
.nf-mobile-menu__trending-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #999; margin: 0 0 0.625rem; }
.nf-mobile-menu__trending-scroll { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.nf-mobile-menu__trending-scroll::-webkit-scrollbar { display: none; }
.nf-mobile-menu__trending-card { display: flex; align-items: center; gap: 10px; flex-shrink: 0; width: 200px; padding: 8px; background: #f9f9f9; border-radius: 10px; text-decoration: none; color: inherit; transition: background 0.15s; }
.nf-mobile-menu__trending-card:hover { background: #f0efea; text-decoration: none; }
.nf-mobile-menu__trending-img { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #eee; }
.nf-mobile-menu__trending-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-mobile-menu__trending-info { min-width: 0; }
.nf-mobile-menu__trending-name { font-size: 12px; font-weight: 600; color: #1a1a1a; margin: 0 0 2px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nf-mobile-menu__trending-price { font-size: 12px; font-weight: 700; color: #1a1a2e; margin: 0; }

/* ── Mobile: Why Nanoleaf trust bar ── */
.nf-mobile-menu__trust { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.75rem 1.25rem 1rem; }
.nf-mobile-menu__trust-item { display: flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: #777; white-space: nowrap; }
.nf-mobile-menu__trust-sep { width: 1px; height: 12px; background: #ddd; flex-shrink: 0; }

/* ── Mobile header padding fix ── */
.nf-header--mobile .nf-header__inner { padding: 0 1rem; }
/* Optically align burger & cart icons with page content grid */
.nf-header--mobile .nf-header__burger { margin-left: -10px; }
.nf-header__mobile-actions { display: flex; align-items: center; gap: 0; margin-right: -10px; }
.nf-header__mobile-actions .nf-header__action-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; color: #1a1a1a; padding: 0; }
.nf-header--mobile .nf-header__cart { box-sizing: content-box; padding: 10px; background: none; border: none; cursor: pointer; }
.nf-header--mobile .nf-header__cart-badge { top: 2px; right: 2px; }

/* ── Mobile hover underline override ── */
.nf-mobile-menu__pill:hover,
.nf-mobile-menu__section-link:hover,
.nf-mobile-menu__footer-link:hover { text-decoration: none; }

/* Country Selector Overlay */
.nf-country-overlay {
  position: fixed; inset: 0; z-index: 100;
  opacity: 0; transition: opacity 0.3s ease-out;
  pointer-events: none;
}
.nf-country-overlay--open { opacity: 1; pointer-events: auto; }
.nf-country-overlay__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.nf-country-overlay__panel {
  position: absolute; inset: 0 0 auto 0;
  background: #fff; box-shadow: 0 25px 50px rgba(0,0,0,0.25);
  max-height: 100vh;
  transform: translateY(-16px); opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.nf-country-overlay--open .nf-country-overlay__panel { transform: translateY(0); opacity: 1; }
.nf-country-overlay__header {
  border-bottom: 1px solid #f3f4f6;
  padding: 20px 24px; max-width: 72rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.nf-country-overlay__title { font-size: 20px; font-weight: 600; color: #111827; }
.nf-country-overlay__subtitle { font-size: 14px; color: #6b7280; margin-top: 2px; }
.nf-country-overlay__close {
  width: 40px; height: 40px; border-radius: 50%; border: none; background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s; font-size: 0;
}
.nf-country-overlay__close:hover { background: #f3f4f6; }
.nf-country-overlay__close svg { width: 20px; height: 20px; color: #4b5563; }
.nf-country-overlay__search-wrap {
  border-bottom: 1px solid #f3f4f6;
  padding: 12px 24px; max-width: 72rem; margin: 0 auto;
}
.nf-country-overlay__search-inner { position: relative; max-width: 28rem; }
.nf-country-overlay__search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9ca3af; pointer-events: none;
}
.nf-country-overlay__search {
  width: 100%; padding: 10px 16px 10px 40px; font-size: 14px;
  border: 1px solid #e5e7eb; border-radius: 12px;
  background: #f9fafb; outline: none; font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.nf-country-overlay__search:focus { background: #fff; border-color: #d1d5db; }
.nf-country-overlay__scroll { overflow-y: auto; max-height: calc(100vh - 160px); }
.nf-country-overlay__content { max-width: 72rem; margin: 0 auto; padding: 32px 24px; }
.nf-country-overlay__continent { margin-bottom: 40px; }
.nf-country-overlay__continent:last-child { margin-bottom: 0; }
.nf-country-overlay__continent-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #9ca3af;
  margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #f3f4f6;
}
.nf-country-overlay__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
@media (max-width: 1024px) { .nf-country-overlay__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .nf-country-overlay__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .nf-country-overlay__grid { grid-template-columns: 1fr; } }
.nf-country-overlay__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; border: none; background: none;
  cursor: pointer; text-align: left; width: 100%;
  font-family: inherit; transition: background 0.2s;
}
.nf-country-overlay__item:hover { background: #f9fafb; }
.nf-country-overlay__item--selected { background: #111827 !important; }
.nf-country-overlay__item--selected .nf-country-overlay__item-name,
.nf-country-overlay__item--selected .nf-country-overlay__item-lang { color: #fff; }
.nf-country-overlay__item--selected .nf-country-overlay__item-lang { background: rgba(255,255,255,0.2); }
/* Language chips — one country row, languages inline (Marta 2026-08-07).
   Chip click submits that country+language; row click uses the default. */
.nf-country-overlay__item-langs { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; align-items: center; }
.nf-country-overlay__lang-chip {
  display: inline-block; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
  background: #f0f0f2; color: #6b7280; transition: background 0.15s, color 0.15s;
}
.nf-country-overlay__lang-chip:hover { background: #111827; color: #fff; }
.nf-country-overlay__lang-chip--selected { background: #48a06a; color: #fff; }
.nf-country-overlay__item--selected .nf-country-overlay__lang-chip { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.75); }
.nf-country-overlay__item--selected .nf-country-overlay__lang-chip--selected { background: #48a06a; color: #fff; }
.nf-country-overlay__item--selected .nf-country-overlay__lang-chip:hover { background: rgba(255,255,255,0.35); color: #fff; }
.nf-country-overlay__item-flag {
  width: 28px; height: 20px; object-fit: cover; border-radius: 3px;
  /* 1px outline + the existing soft shadow — outline keeps Japan's
     white background distinguishable from the white panel. */
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.nf-country-overlay__item-name {
  font-size: 14px; font-weight: 500; color: #111827; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-country-overlay__item-lang {
  font-size: 11px; font-weight: 500; padding: 2px 8px;
  border-radius: 6px; background: #f3f4f6; color: #6b7280; flex-shrink: 0;
}
.nf-country-overlay__item:hover .nf-country-overlay__item-lang { background: #e5e7eb; }
.nf-country-overlay__item--selected:hover .nf-country-overlay__item-lang { background: rgba(255,255,255,0.2); }
.nf-country-overlay__empty {
  text-align: center; padding: 64px 0; color: #9ca3af; font-size: 14px;
}
@keyframes nfCountryFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   SEARCH DRAWER
   ══════════════════════════════════════════ */
.nf-search-backdrop {
  position: fixed; inset: 0; z-index: 75;
  background: rgba(0,0,0,0.4); opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.nf-search-backdrop.is-visible { opacity: 1; }

.nf-search-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 80; width: 460px; max-width: 100vw;
  background: #fff; display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -8px 0 30px rgba(0,0,0,0.08);
  overscroll-behavior: contain;
}
.nf-search-drawer.is-open { transform: translateX(0); }

/* Header */
.nf-search-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.nf-search-drawer__header-left {
  display: flex; align-items: center; gap: 0.5rem;
}
.nf-search-drawer__header-left svg { color: #666; }
.nf-search-drawer__title {
  font-size: 1rem; font-weight: 600; color: #111; margin: 0;
  letter-spacing: -0.01em;
}
.nf-search-drawer__close {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: none; background: #f5f5f5; cursor: pointer;
  color: #555; transition: background 0.2s, color 0.2s;
}
.nf-search-drawer__close:hover { background: #eee; color: #111; }

/* Search Input */
.nf-search-drawer__input-wrap {
  position: relative; padding: 1rem 1.25rem;
  flex-shrink: 0;
}
.nf-search-drawer__input-icon {
  position: absolute; left: 2rem; top: 50%; transform: translateY(-50%);
  color: #999; pointer-events: none;
}
.nf-search-drawer__input {
  width: 100%; padding: 0.75rem 2.5rem 0.75rem 2.75rem;
  font-size: 0.95rem; font-family: inherit;
  border: 1.5px solid #e5e5e5; border-radius: 12px;
  background: #fafafa; outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.nf-search-drawer__input:focus {
  border-color: #ccc; background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
.nf-search-drawer__input::placeholder { color: #aaa; }
.nf-search-drawer__input::-webkit-search-cancel-button { display: none; }
.nf-search-drawer__input-clear {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: #999; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: color 0.2s;
}
.nf-search-drawer__input-clear:hover { color: #333; }

/* Scrollable content area */
.nf-search-drawer__default,
.nf-search-drawer__results {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Sections */
.nf-search-drawer__section {
  padding: 1.25rem 1.25rem 0;
}
.nf-search-drawer__section:last-child { padding-bottom: 2rem; }
.nf-search-drawer__section-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #999; margin: 0 0 0.75rem;
}

/* Popular search pills */
.nf-search-drawer__pills {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.nf-search-drawer__pill {
  padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600;
  font-family: inherit; border: 1px solid #e8e8e8; border-radius: 9999px;
  background: #fff; color: #333; cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.nf-search-drawer__pill:hover {
  background: #111; border-color: #111; color: #fff;
}

/* USPs */
.nf-search-drawer__usps {
  display: flex; flex-direction: column; gap: 0;
}
.nf-search-drawer__usp {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0; border-bottom: 1px solid #f5f5f5;
}
.nf-search-drawer__usp:last-child { border-bottom: none; }
.nf-search-drawer__usp-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #f5f7f5; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--color-brand-green, #48A06A);
}
.nf-search-drawer__usp-text {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.nf-search-drawer__usp-text strong {
  font-size: 0.82rem; font-weight: 600; color: #111;
}
.nf-search-drawer__usp-text span {
  font-size: 0.75rem; color: #888; line-height: 1.3;
}

/* Trending products */
.nf-search-drawer__trending {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
.nf-search-drawer__trending-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  text-decoration: none; color: inherit;
  border-radius: 12px; overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.nf-search-drawer__trending-card:hover {
  border-color: #ddd;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.nf-search-drawer__trending-img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  background: #f5f5f5;
}
.nf-search-drawer__trending-info { padding: 0.5rem 0.65rem 0.65rem; }
.nf-search-drawer__trending-name {
  font-size: 0.78rem; font-weight: 600; color: #111;
  margin: 0; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.nf-search-drawer__trending-price {
  font-size: 0.75rem; color: #666; margin: 0.15rem 0 0;
}

/* Search Results */
.nf-search-drawer__results-inner { padding: 0.5rem 1.25rem 2rem; }
.nf-search-drawer__result-group { margin-bottom: 1.25rem; }
.nf-search-drawer__result-group-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: #999; margin: 0 0 0.5rem;
}
.nf-search-drawer__result-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid #f5f5f5;
  text-decoration: none; color: inherit;
  transition: background 0.15s;
  border-radius: 8px;
}
.nf-search-drawer__result-item:hover { background: #fafafa; }
.nf-search-drawer__result-item:last-child { border-bottom: none; }
.nf-search-drawer__result-img {
  width: 52px; height: 52px; border-radius: 8px;
  object-fit: cover; background: #f5f5f5; flex-shrink: 0;
}
.nf-search-drawer__result-info {
  flex: 1; min-width: 0;
}
.nf-search-drawer__result-name {
  font-size: 0.82rem; font-weight: 600; color: #111; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nf-search-drawer__result-price {
  font-size: 0.78rem; color: #666; margin: 0.1rem 0 0;
}
.nf-search-drawer__result-link {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0; text-decoration: none; color: var(--color-brand-green, #48A06A);
  font-size: 0.82rem; font-weight: 600; transition: opacity 0.2s;
}
.nf-search-drawer__result-link:hover { opacity: 0.7; }

/* No results */
.nf-search-drawer__no-results {
  text-align: center; padding: 3rem 1rem;
}
.nf-search-drawer__no-results-icon { color: #ccc; margin-bottom: 0.75rem; }
.nf-search-drawer__no-results-text {
  font-size: 0.9rem; font-weight: 600; color: #333; margin: 0 0 0.25rem;
}
.nf-search-drawer__no-results-sub {
  font-size: 0.8rem; color: #999; margin: 0;
}

/* Loading */
.nf-search-drawer__loading {
  display: flex; align-items: center; justify-content: center;
  padding: 3rem; color: #999;
}
.nf-search-drawer__loading svg { animation: nfSearchSpin 0.8s linear infinite; }
@keyframes nfSearchSpin { to { transform: rotate(360deg); } }

/* Mobile */
@media (max-width: 767px) {
  .nf-search-drawer { width: 100vw; }
  .nf-search-drawer__trending { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
}

/* ── Works With Mega ── */
.nf-mega__ww {
  padding: 24px;
  background: #f5f4f0;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.nf-mega__ww-columns {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}
.nf-mega__ww-section {
  flex: 1;
  min-width: 0;
}
.nf-mega__ww-section--wide {
  flex: 2;
}
.nf-mega__ww-heading {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin: 0 0 10px 4px;
}
.nf-mega__ww-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nf-mega__ww-cards--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.nf-mega__ww-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid transparent;
  text-decoration: none;
  color: #1a1a2e;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.nf-mega__ww-card:hover {
  background: #fff;
  border-color: #e5e5e5;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.nf-mega__ww-card-logo {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  object-fit: contain;
  flex-shrink: 0;
}
.nf-mega__ww-card-name {
  font-size: 13px;
  font-weight: 500;
  flex: 1;
}
.nf-mega__ww-card-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  color: #999;
  flex-shrink: 0;
}
.nf-mega__ww-card:hover .nf-mega__ww-card-arrow {
  opacity: 1;
  transform: translateX(0);
}
.nf-mega__ww-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0,0,0,0.06);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.nf-mega__ww-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 999px;
  background: #1a1a2e;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.nf-mega__ww-view-all-btn:hover {
  opacity: 0.85;
  text-decoration: none;
}
/* END_SECTION:header */

/* START_SECTION:help-center (INDEX:37) */
/* ── Help Center ── */
.help-center {
  padding-block-end: var(--space-3xl);
}

/* ── Full-width top bar (title + tabs share one background) ── */
.help-center__top-bar {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
  padding-block-start: var(--space-3xl);
}

.help-center__top-bar-inner {
  max-width: 72rem;
  margin: 0 auto;
}

.help-center__container {
  max-width: 72rem;
  margin: 0 auto;
  padding-block-start: var(--space-xl);
}

.help-center__header {
  text-align: center;
  margin-block-end: var(--space-2xl);
}

.help-center__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--color-foreground);
  margin-block-end: var(--space-xs);
}

.help-center__subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 500px;
  margin-inline: auto;
}

/* ── Tabs ── */
.help-center__tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--color-background);
  padding-block: var(--space-sm);
  margin-block-end: 0;
}

.help-center__tabs-track {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px;
}

@media (max-width: 749px) {
  .help-center__tabs-track {
    justify-content: flex-start;
    padding-inline: 1rem;
  }
}

.help-center__tabs-track::-webkit-scrollbar { display: none; }

.help-center__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-default),
              color var(--duration-base) var(--ease-default),
              border-color var(--duration-base) var(--ease-default);
  flex-shrink: 0;
  -webkit-appearance: none;
  appearance: none;
}

.help-center__tab:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}

.help-center__tab--active {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}

.help-center__tab svg {
  flex-shrink: 0;
}

/* ── Panels ── */
/* No entry animation: a throttled tab can freeze a CSS animation on its
   first frame (opacity 0), leaving the whole panel invisible — Marta hit
   this on the Submit a Ticket panel. A 0.3s fade is not worth that. */
.help-center__panel {
  display: none;
}

.help-center__panel--active {
  display: block;
}

.help-center__panel-inner {
  max-width: 56rem;
  margin: 0 auto;
}

.help-center__panel-title {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  margin-block-end: var(--space-xl);
  color: var(--color-foreground);
}

/* ── Info Cards Grid ── */
.help-center__cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 750px) {
  .help-center__cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.help-center__cards-grid--2col {
  grid-template-columns: 1fr;
}

@media (min-width: 750px) {
  .help-center__cards-grid--2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

.help-center__info-card {
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}

.help-center__info-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-block-end: var(--space-xs);
  color: var(--color-foreground);
}

.help-center__info-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.help-center__chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.5rem 1.25rem;
  background: #2d8a23;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(45,138,35,0.25);
}
.help-center__chat-btn:hover {
  background: #248a1a;
  box-shadow: 0 4px 16px rgba(45,138,35,0.4);
  transform: translateY(-1px);
}

.help-center__info-card p a {
  color: var(--color-foreground);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help-center__info-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-muted);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-md);
  color: var(--color-foreground);
}

/* ── Resource Cards ── */
.help-center__resource-card {
  display: block;
  background: var(--color-card);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  text-decoration: none;
  color: var(--color-foreground);
  transition: transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);
}

.help-center__resource-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.help-center__resource-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-radius: var(--radius-lg);
  margin-block-end: var(--space-md);
}

.help-center__resource-card h3 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-block-end: var(--space-xs);
}

.help-center__resource-card p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

/* ── Two-col content ── */
.help-center__two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

@media (min-width: 750px) {
  .help-center__two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.help-center__content-block h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-block-end: var(--space-sm);
  color: var(--color-foreground);
}

.help-center__content-block h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-block-start: var(--space-lg);
  margin-block-end: var(--space-xs);
  color: var(--color-foreground);
}

.help-center__content-block p {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-block-end: var(--space-sm);
}

.help-center__content-block p a {
  color: var(--color-foreground);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.help-center__content-block ul,
.help-center__content-block ol {
  padding-inline-start: var(--space-lg);
  margin-block-end: var(--space-md);
}

.help-center__content-block li {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-block-end: var(--space-xs);
}

.help-center__content-block li strong {
  color: var(--color-foreground);
}

.help-center__note {
  background: var(--color-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block-start: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

.help-center__note strong {
  color: var(--color-foreground);
}

/* ── FAQ Accordion ── */
.help-center__faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.help-center__faq-item {
  border-bottom: 1px solid var(--color-border);
}

.help-center__faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-lg) 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-foreground);
  cursor: pointer;
  text-align: left;
  gap: var(--space-md);
  -webkit-appearance: none;
  appearance: none;
}

.help-center__faq-question:hover {
  color: var(--color-text-secondary);
}

.help-center__faq-chevron {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-default);
}

.help-center__faq-question[aria-expanded="true"] .help-center__faq-chevron {
  transform: rotate(180deg);
}

.help-center__faq-answer {
  padding-block-end: var(--space-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 48rem;
}

/* ── Product Support layout ── */
.ps-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

@media (min-width: 750px) {
  .ps-layout {
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
  }
}

/* ── Radio cards (sidebar) ── */
.ps-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 750px) {
  .ps-sidebar {
    position: sticky;
    top: 12px;
    align-self: start;
  }
}

@media (max-width: 749px) {
  .ps-layout {
    margin-left: calc(-1 * var(--space-md, 1rem));
    margin-right: calc(-1 * var(--space-md, 1rem));
  }
  .ps-sidebar {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-md, 1rem) 4px;
  }
  .ps-sidebar::-webkit-scrollbar { display: none; }
  .ps-radio-card {
    min-width: 200px;
    flex-shrink: 0;
  }
  .ps-forms {
    padding: 0 var(--space-md, 1rem);
  }
}

.ps-radio-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-card, 12px);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  position: relative;
}

.ps-radio-card:hover {
  border-color: #bbb;
}

.ps-radio-card--active {
  border: 2px solid #1a1a2e;
  box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08);
  padding: 15px; /* compensate for 2px border */
}

.ps-radio-card__indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s;
}

.ps-radio-card--active .ps-radio-card__indicator {
  border-color: #1a1a2e;
}

.ps-radio-card--active .ps-radio-card__indicator::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1a1a2e;
}

.ps-radio-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ps-radio-card__text strong {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.3;
}

.ps-radio-card__text span {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #666);
  line-height: 1.4;
}

/* ── Form panels ── */
.ps-forms {
  min-width: 0;
}

.ps-form-panel {
  display: none;
}

.ps-form-panel--active {
  display: block;
}

.ps-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg, 1.25rem);
}

.ps-form__header {
  margin-block-end: var(--space-sm, 0.5rem);
}

.ps-form__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin-block-end: 4px;
}

.ps-form__subtext {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #666);
}

/* ── Form fields ── */
.ps-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ps-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
}

.ps-req {
  color: #e53e3e;
  margin-left: 2px;
}

.ps-input,
.ps-select,
.ps-textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-card, 12px);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-foreground, #1a1a2e);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.ps-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

.ps-date-picker {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr;
  gap: 8px;
}
.ps-date-picker .ps-select {
  padding: 14px 32px 14px 12px;
  background-position: right 10px center;
  min-width: 0;
}

.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.08);
}

.ps-input.ps-input--error,
.ps-select.ps-select--error,
.ps-textarea.ps-textarea--error {
  border-color: #e53e3e;
}

.ps-textarea {
  resize: vertical;
  min-height: 120px;
}

.ps-helper {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #888);
  line-height: 1.4;
}

/* ── Checkboxes ── */
.ps-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ps-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  position: relative;
}

.ps-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ps-checkbox__box {
  width: 20px;
  height: 20px;
  border: 2px solid #d0d0d0;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

.ps-checkbox input:checked + .ps-checkbox__box {
  background: var(--color-brand-green, #48A06A);
  border-color: var(--color-brand-green, #48A06A);
}

.ps-checkbox input:checked + .ps-checkbox__box::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ps-checkbox input:focus-visible + .ps-checkbox__box {
  box-shadow: 0 0 0 3px rgba(74, 175, 71, 0.25);
}

.ps-checkbox__label {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #555);
  line-height: 1.45;
}

/* ── Submit button ── */
.ps-submit {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button, 999px);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-top: var(--space-sm, 0.5rem);
}

.ps-submit:hover {
  background: #2a2a42;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 26, 46, 0.2);
}

/* Link variant (Submit a Ticket → Zendesk): flex keeps the label and the
   external-link arrow on ONE line instead of the block/inline wrap. */
.ps-submit--link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}
.ps-submit--link svg { flex-shrink: 0; display: block; }

.ps-submit:active {
  transform: translateY(0);
}

.ps-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.ps-submit--loading {
  position: relative;
  color: transparent;
}

.ps-submit--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: psSpinner 0.6s linear infinite;
}

@keyframes psSpinner {
  to { transform: rotate(360deg); }
}

/* ── Success message ── */
.ps-success {
  text-align: center;
  padding: var(--space-3xl, 3rem) var(--space-xl, 1.5rem);
}

.ps-success__icon {
  margin-block-end: var(--space-md, 1rem);
}

.ps-success__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin-block-end: 8px;
}

.ps-success__text {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #666);
}

/* .visually-hidden is defined globally in assets/theme.css */

/* ── Mobile ── */
@media (max-width: 749px) {
  .help-center {
    padding-block: var(--space-2xl);
  }

  .help-center__tabs-track {
    padding-inline: var(--space-xs);
  }

  .help-center__tab {
    font-size: 0.75rem;
    padding: 0.4375rem 0.875rem;
  }
}

/* ── Warranty Form Dynamic Fields ── */
.wf-dynamic-field {
  /* transition removed: the [hidden] { display: none } rule below makes any
     transition here dead code — display is not transitionable */
}
.wf-dynamic-field[hidden] {
  display: none;
}

/* ── Secretlab info card ── */
.wf-info-card {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-lg);
  margin-block: var(--space-md);
}
.wf-info-card a {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── Serial validation status ── */
.wf-serial-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: var(--font-size-sm);
}
.wf-serial-msg--valid { color: var(--color-brand-green, #48A06A); }
.wf-serial-msg--invalid { color: #e53935; }
.wf-serial-msg--loading { color: var(--color-text-secondary); }

/* ── Spinner ── */
.wf-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-foreground);
  border-radius: 50%;
  animation: wf-spin 0.6s linear infinite;
}
@keyframes wf-spin {
  to { transform: rotate(360deg); }
}

/* ── Result panels ── */
.wf-result-panel {
  margin-top: var(--space-lg);
}
.wf-result-panel[hidden] {
  display: none;
}
.wf-result-panel__inner {
  border-radius: 12px;
  padding: var(--space-xl);
  text-align: center;
}
.wf-result-panel--codes {
  background: rgba(74, 175, 71, 0.06);
  border: 1.5px solid var(--color-brand-green, #48A06A);
}
.wf-result-panel--draft {
  background: rgba(33, 150, 243, 0.06);
  border: 1.5px solid #2196f3;
}
.wf-result-panel--ticket {
  background: rgba(255, 152, 0, 0.06);
  border: 1.5px solid #ff9800;
}
.wf-result-panel__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
}
.wf-result-panel__instructions {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ── Code badges ── */
.wf-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-block: var(--space-sm);
}
.wf-badge {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--color-foreground);
  color: var(--color-background);
}

/* ── Outline button variant ── */
.ps-submit--outline {
  background: transparent;
  border: 1.5px solid var(--color-foreground);
  color: var(--color-foreground);
}
.ps-submit--outline:hover {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* ── Detail rows in result ── */
.wf-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.wf-detail-row:last-child {
  border-bottom: none;
}
.wf-detail-label {
  color: var(--color-text-secondary);
}
.wf-detail-value {
  font-weight: 600;
}
/* END_SECTION:help-center */

/* START_SECTION:hero-billboard (INDEX:38) */
/* HP Hero Billboard Carousel */
.hero-bb {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: var(--hp-hero-align, center);
  justify-content: var(--hp-hero-justify, center);
  overflow: hidden;
  background: #000;
}

/* Height variants */
.hero-bb--height-slim          { min-height: 280px; }
.hero-bb--height-slim .hero-bb__slide,
.hero-bb[data-slide-count="1"].hero-bb--height-slim .hero-bb__slide { min-height: 280px; }
.hero-bb--height-standard      { min-height: 560px; }
.hero-bb--height-standard .hero-bb__slide,
.hero-bb[data-slide-count="1"].hero-bb--height-standard .hero-bb__slide { min-height: 560px; }
.hero-bb--height-tall          { min-height: 720px; }
.hero-bb--height-tall .hero-bb__slide,
.hero-bb[data-slide-count="1"].hero-bb--height-tall .hero-bb__slide { min-height: 720px; }
/* Full-viewport hero — the video "fold indicator" (Marta, PDP review Jul 8).
   svh keeps mobile URL-bar changes from jumping the fold. */
.hero-bb--height-full          { min-height: calc(100svh - 96px); }
.hero-bb--height-full .hero-bb__slide,
.hero-bb[data-slide-count="1"].hero-bb--height-full .hero-bb__slide { min-height: calc(100svh - 96px); }

@media (max-width: 749px) {
  .hero-bb--height-slim,
  .hero-bb--height-slim .hero-bb__slide,
  .hero-bb[data-slide-count="1"].hero-bb--height-slim .hero-bb__slide { min-height: 200px !important; }
  .hero-bb--height-standard,
  .hero-bb--height-standard .hero-bb__slide,
  .hero-bb[data-slide-count="1"].hero-bb--height-standard .hero-bb__slide { min-height: 420px !important; }
  .hero-bb--height-tall,
  .hero-bb--height-tall .hero-bb__slide,
  .hero-bb[data-slide-count="1"].hero-bb--height-tall .hero-bb__slide { min-height: 560px !important; }
}

/* Override any alternation bg on the section wrapper */
.hp-section:has(.hero-bb) {
  background: transparent !important;
}

/* Color scheme applied to section wrapper */
.hero-bb--light { --hp-hero-text: #fff; color: #fff; }
.hero-bb--dark { --hp-hero-text: #1a1a2e; color: #1a1a2e; }

/* Slides */
.hero-bb__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: var(--hp-hero-align, center);
  justify-content: var(--hp-hero-justify, center);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  z-index: 0;
}
.hero-bb__slide--active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.hero-bb[data-slide-count="1"] .hero-bb__slide {
  position: relative;
  opacity: 1;
  visibility: visible;
  min-height: 480px;
  width: 100%;
}
.hero-bb[data-slide-count="1"] .hero-bb__slide .hero-bb__content {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-bb[data-slide-count="1"] .hero-bb__slide .hero-bb__media {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 120%;
}

.hero-bb[data-slide-count]:not([data-slide-count="1"]) .hero-bb__slide:first-child {
  position: relative;
}

/* Text fade-in with delay after image */
.hero-bb__slide .hero-bb__content {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.hero-bb__slide--active .hero-bb__content {
  opacity: 1;
  transform: translateY(0);
}

/* Media */
.hero-bb__media {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 120%;
  z-index: 0;
}

.hero-bb__image,
.hero-bb__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-bb__color-bg {
  position: absolute;
  inset: 0;
  background: var(--hero-bg-fallback, #1a1a2e);
}

.hero-bb__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--hp-hero-overlay) 0%, transparent 60%);
}

@supports (color: rgb(from #000 r g b / 0.5)) {
  .hero-bb__slide[data-overlay-style="gradient"] .hero-bb__overlay {
    background: linear-gradient(
      to top,
      rgb(from var(--slide-overlay-color, #000) r g b / var(--slide-overlay-alpha, 0.35)) 0%,
      transparent 60%
    );
  }
  .hero-bb__slide[data-overlay-style="solid"] .hero-bb__overlay {
    background: rgb(from var(--slide-overlay-color, #000) r g b / var(--slide-overlay-alpha, 0.35));
  }
  .hero-bb__slide[data-overlay-style="none"] .hero-bb__overlay {
    background: transparent;
  }
}

.hero-bb__content {
  position: relative;
  z-index: 2;
  text-align: var(--hp-hero-text-align, center);
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
}

.hero-bb__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}
.hero-bb--heading-small .hero-bb__heading { font-size: clamp(1.5rem, 3.5vw, 2.5rem); }
.hero-bb--heading-medium .hero-bb__heading { font-size: clamp(2rem, 5vw, 3.5rem); }
.hero-bb--heading-large .hero-bb__heading { font-size: clamp(2.25rem, 6vw, 4.5rem); }

.hero-bb__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  color: currentColor;
  opacity: 0.85;
  line-height: 1.4;
}
.hero-bb__content--h-center .hero-bb__eyebrow { margin-inline: auto; }
.hero-bb__content--h-right .hero-bb__eyebrow { margin-inline: 0 0; margin-left: auto; }

.hero-bb__tagline {
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: var(--space-xl);
  line-height: var(--line-height-base);
  max-width: 42rem;
}
.hero-bb--desc-small .hero-bb__tagline { font-size: clamp(0.8125rem, 1.5vw, 1rem); }
.hero-bb--desc-medium .hero-bb__tagline { font-size: clamp(1rem, 2vw, 1.375rem); }
.hero-bb--desc-large .hero-bb__tagline { font-size: clamp(1.125rem, 2.5vw, 1.625rem); }

/* Rich-text tagline (metafield_tag wraps in .metafield-rich_text_field with
   its own <p>s) — inherit the tagline scale, keep paragraphs tight. */
.hero-bb__tagline--rich p { margin: 0 0 0.5em; font-size: inherit; line-height: inherit; color: inherit; }
.hero-bb__tagline--rich p:last-child { margin-bottom: 0; }
.hero-bb__tagline--rich a { color: inherit; text-decoration: underline; }

.hero-bb__content--h-center .hero-bb__tagline { margin-inline: auto; }
.hero-bb__content--h-left .hero-bb__tagline { margin-inline: 0; }
.hero-bb__content--h-right .hero-bb__tagline { margin-inline: 0 0; margin-left: auto; }

.hero-bb__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.hero-bb__content--h-center .hero-bb__ctas { justify-content: center; }
.hero-bb__content--h-left .hero-bb__ctas { justify-content: flex-start; }
.hero-bb__content--h-right .hero-bb__ctas { justify-content: flex-end; }

.hero-bb__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.85em 2em;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);
  cursor: pointer;
}

.hero-bb--light .hero-bb__btn--primary {
  background: #fff;
  color: #1a1a2e;
}
.hero-bb--light .hero-bb__btn--primary:hover {
  background: #f0f0f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.hero-bb--light .hero-bb__btn--secondary {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.6);
  color: #fff;
}
.hero-bb--light .hero-bb__btn--secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.hero-bb--dark .hero-bb__btn--primary {
  background: #1a1a2e;
  color: #fff;
}
.hero-bb--dark .hero-bb__btn--primary:hover {
  background: #111122;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.hero-bb--dark .hero-bb__btn--secondary {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.3);
  color: #1a1a2e;
}
.hero-bb--dark .hero-bb__btn--secondary:hover {
  background: rgba(0,0,0,0.06);
  border-color: #1a1a2e;
}

/* Dot navigation */
/* Side arrows (nav_style: arrows) */
.hero-bb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: #131329;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease, transform 0.15s ease;
}
.hero-bb__arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.06); }
.hero-bb__arrow--prev { left: 20px; }
.hero-bb__arrow--next { right: 20px; }
@media (max-width: 749px) {
  .hero-bb__arrow { width: 38px; height: 38px; }
  .hero-bb__arrow--prev { left: 10px; }
  .hero-bb__arrow--next { right: 10px; }
}

.hero-bb__dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-bb__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(255,255,255,0.4);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.hero-bb__dot--active {
  width: 24px;
  background: rgba(255,255,255,0.5);
}

.hero-bb__dot-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 4px;
  pointer-events: none;
}

.hero-bb__dot--active .hero-bb__dot-fill {
  animation: hero-bb-dot-progress var(--hp-autoplay-duration, 5s) linear forwards;
}

.hero-bb--paused .hero-bb__dot--active .hero-bb__dot-fill {
  animation-play-state: paused;
}

.hero-bb--dark .hero-bb__dot {
  background: rgba(0,0,0,0.2);
}
.hero-bb--dark .hero-bb__dot--active {
  background: rgba(0,0,0,0.3);
}
.hero-bb--dark .hero-bb__dot-fill {
  background: #1a1a2e;
}

@keyframes hero-bb-dot-progress {
  from { width: 0%; }
  to { width: 100%; }
}

.hero-bb__btn--scroll .hero-bb__btn-arrow {
  display: inline-block;
  animation: hero-bb-bounce 2s ease infinite;
}

.hero-bb__scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--hp-hero-text, #fff);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  line-height: 0;
  animation: hero-bb-pulse 2.5s ease-in-out infinite;
}

.hero-bb__scroll-indicator:hover {
  opacity: 1;
}

.hero-bb__scroll-indicator--light { color: #fff; }
.hero-bb__scroll-indicator--dark { color: #1a1a2e; }

@keyframes hero-bb-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@keyframes hero-bb-pulse {
  0%, 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); }
  50% { opacity: 0.9; transform: translateX(-50%) translateY(4px); }
}

@media (min-width: 768px) {
  .hero-bb__content {
    padding-bottom: var(--space-4xl);
  }
}

/* Breadcrumb inside hero */
.hero-bb__breadcrumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 14px 1.5rem;
}
.hero-bb__breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 0.8125rem;
  justify-content: flex-start;
}
.hero-bb__breadcrumb-item a {
  text-decoration: none;
  transition: color 0.2s;
}
.hero-bb__breadcrumb-item--home a {
  display: inline-flex;
  align-items: center;
  /* Icon baseline-aligns with the 0.8125rem text row */
  transform: translateY(1.5px);
}
.hero-bb__breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-inline-start: 0.5rem;
}
.hero-bb--light .hero-bb__breadcrumb-list { color: rgba(255,255,255,0.6); }
.hero-bb--light .hero-bb__breadcrumb-item a { color: rgba(255,255,255,0.6); }
.hero-bb--light .hero-bb__breadcrumb-item a:hover { color: #fff; }
.hero-bb--light .hero-bb__breadcrumb-item:not(:last-child)::after { color: rgba(255,255,255,0.35); }
.hero-bb--light .hero-bb__breadcrumb-item--current { color: rgba(255,255,255,0.85); }
.hero-bb--dark .hero-bb__breadcrumb-list { color: rgba(26,26,46,0.6); }
.hero-bb--dark .hero-bb__breadcrumb-item a { color: rgba(26,26,46,0.6); }
.hero-bb--dark .hero-bb__breadcrumb-item a:hover { color: #1a1a2e; }
.hero-bb--dark .hero-bb__breadcrumb-item:not(:last-child)::after { color: rgba(26,26,46,0.35); }
.hero-bb--dark .hero-bb__breadcrumb-item--current { color: rgba(26,26,46,0.85); }

@media (max-width: 749px) {
  .hero-bb { min-height: 320px; }

  .hero-bb[data-slide-count="1"] .hero-bb__slide {
    min-height: 320px !important;
  }

  .hero-bb--m-heading-small .hero-bb__heading { font-size: clamp(1.5rem, 6vw, 2rem); }
  .hero-bb--m-heading-medium .hero-bb__heading { font-size: clamp(1.875rem, 7vw, 2.5rem); }
  .hero-bb--m-heading-large .hero-bb__heading { font-size: clamp(2.125rem, 8vw, 3rem); }
  .hero-bb--m-heading-auto .hero-bb__heading { font-size: unset; }

  .hero-bb--m-desc-small .hero-bb__tagline { font-size: 0.8125rem; }
  .hero-bb--m-desc-medium .hero-bb__tagline { font-size: 1rem; }
  .hero-bb--m-desc-large .hero-bb__tagline { font-size: 1.125rem; }
  .hero-bb--m-desc-auto .hero-bb__tagline { font-size: unset; }

  .hero-bb__dots {
    bottom: 1.25rem;
  }

  .hero-bb__breadcrumb { padding: 10px 1rem; }
  .hero-bb__breadcrumb-list { font-size: 0.75rem; }

  /* ── Mobile layout: text below the media (MEL-1146) ──
     The overlay layout squeezes wide hero art into a ~390x420 portrait slot,
     so a 2.2:1 source is upscaled and roughly two thirds of the frame is
     thrown away, and the copy then sits on whatever pixels survive. A slide
     with overlay_style "none" has no scrim at all, so legibility depends on
     the photo. Here the media keeps a ratio of its own and the copy moves to
     a flat panel underneath, which makes contrast independent of the image.
     Opt-in per section: the default stays "overlay". */
  .hero-bb--m-below,
  .hero-bb--m-below.hero-bb--height-slim,
  .hero-bb--m-below.hero-bb--height-standard,
  .hero-bb--m-below.hero-bb--height-tall,
  .hero-bb--m-below.hero-bb--height-full {
    display: block;
    min-height: 0 !important;
  }

  /* Only the active slide takes part in layout, so the section is as tall as
     the slide being read rather than the tallest one. The carousel JS still
     drives everything through the --active class, so nothing else changes;
     the cross-fade is simply replaced by a swap at this width. */
  .hero-bb--m-below[data-slide-count] .hero-bb__slide {
    position: relative;
    inset: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0 !important;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .hero-bb--m-below[data-slide-count] .hero-bb__slide--active { display: flex; }

  /* Media becomes an ordinary block. transform is forced off because the
     parallax handler shifts the media by up to 10% of the hero height, which
     only works while the box is oversized (top: -5%; height: 120%) — in flow
     it would drag a gap in behind the image. */
  .hero-bb--m-below[data-slide-count] .hero-bb__slide .hero-bb__media {
    position: relative;
    top: 0;
    height: auto;
    aspect-ratio: var(--m-below-ratio, 16 / 9);
    transform: none !important;
  }
  /* Auto: no crop at all, the image reports its own ratio. Video and the
     no-image colour fallback have no intrinsic height to fall back on, so
     they keep a 16:9 box instead of collapsing. */
  .hero-bb--m-below[data-m-ratio="auto"] .hero-bb__slide .hero-bb__media {
    aspect-ratio: auto;
  }
  .hero-bb--m-below[data-m-ratio="auto"] .hero-bb__slide .hero-bb__media:not(:has(.hero-bb__image)) {
    aspect-ratio: 16 / 9;
  }
  .hero-bb--m-below[data-m-ratio="auto"] .hero-bb__image {
    height: auto;
  }

  /* Copy panel. The scrim is dropped since nothing sits over the image, and
     the panel colour follows the slide's own scheme — which goToSlide mirrors
     onto the section — so the heading, tagline and both buttons keep the
     contrast they were designed with. */
  .hero-bb--m-below .hero-bb__overlay { display: none; }
  .hero-bb--m-below[data-slide-count] .hero-bb__slide .hero-bb__content {
    position: relative;
    width: 100%;
    max-width: none;
    opacity: 1;
    transform: none;
    transition: none;
    /* Bottom padding clears the dots and the scroll indicator, both of which
       stay pinned 1.25rem from the section's bottom edge. */
    padding: var(--space-xl) var(--space-lg) var(--space-3xl);
  }
  .hero-bb--m-below.hero-bb--light .hero-bb__slide .hero-bb__content { background: #1a1a2e; }
  .hero-bb--m-below.hero-bb--dark .hero-bb__slide .hero-bb__content { background: #f5f4f0; }
}

/* ── Top-of-page hero opts out of ultrawide boxing ──
   theme.css boxes .hero-bb at 1400px+ (max-width + radius + clip-path) the same
   way it boxes the content blocks. A hero that opens a page has to read as the
   page's edge, so it stays full bleed and the boxing is left to the blocks
   below it. Selectors are deliberately heavier than theme.css's, because
   section stylesheets are served before theme.css. */
@media (min-width: 1400px) {
  #main-content > .shopify-section:first-child .hero-bb {
    max-width: none;
    margin-inline: 0;
    border-radius: 0;
    clip-path: none;
  }

  #main-content > .shopify-section:first-child:has(.hero-bb) {
    padding-block: 0;
  }
}
/* END_SECTION:hero-billboard */

/* START_SECTION:instagram-gallery (INDEX:39) */
/* ── instagram-gallery ───────────────────────────────────────── */
.ig__section {
  background: var(--color-background, #f5f5f0);
}

/* Separator line — visible on mobile/tablet/desktop, gone on ultrawide */
.ig__separator {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin-inline: var(--space-md, 1rem);
}

/* Mobile/tablet header (above grid) */
.ig__header-outer {
  background: var(--color-background, #f5f5f0);
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
  text-align: center;
}

.ig__header-inner {
  max-width: 36rem;
  margin-inline: auto;
}

/* Grid wrapper — full-bleed below 1400px. The --uw-max cap lives in the
   1400px block below: capping earlier (unconditionally) created a dead
   zone between 1280 and 1400px where the grid was already narrowed and
   centered but not yet boxed (no radius, separators still showing). */
.ig__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  overflow: hidden;
}

/* Text block — hidden on mobile/tablet */
.ig__text-cell {
  display: none;
  background: #f7f7f8;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 2.5rem 2rem;
  grid-column: var(--ig-col-start, 3) / var(--ig-col-end, 5);
  grid-row: 1 / 3;
  border-top: 1px solid rgba(0, 0, 0, 0.10);
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

/* Image cells */
.ig__cell {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: var(--color-surface, #e8e7e2);
}

.ig__cell-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ig__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.ig__cell:hover .ig__img {
  transform: scale(1.04);
}

.ig__img--placeholder {
  opacity: 0.15;
}

/* Shared text styles */
.ig__eyebrow {
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 0.75rem;
}

.ig__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1rem;
}

.ig__description {
  font-family: var(--font-body);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  color: var(--color-foreground-secondary, #3d3d56);
  margin: 0 0 1.75rem;
  max-width: 28ch;
  margin-inline: auto;
}

.ig__cta {
  display: inline-flex;
}

/* ── Mobile: show 4 images (skip every other), text between ── */
@media (max-width: 749px) {
  /* Hide the separate mobile header — we use the inline text cell instead */
  .ig__header-outer {
    display: none;
  }

  .ig__wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  /* Show text cell on mobile too, spanning full width between image rows */
  .ig__text-cell {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 1.5rem 1rem;
    border-top: none;
    border-bottom: none;
  }

  /* Show images at odd DOM positions (text-cell is first child, then image cells follow):
     show cells 2/4/6/8 (images 1/3/5/7), hide cells 3/5/7/9 (images 2/4/6/8) */
  .ig__cell:nth-of-type(even) {
    display: none;
  }

  /* First 2 visible images go in row 1, last 2 in row 3 (after text) */
  .ig__cell:nth-of-type(1) { grid-row: 1; }
  .ig__cell:nth-of-type(3) { grid-row: 1; }
  .ig__cell:nth-of-type(5) { grid-row: 3; }
  .ig__cell:nth-of-type(7) { grid-row: 3; }
}

/* ── Tablet: 4-col grid ─────────────────────────────────────── */
@media (min-width: 750px) {
  .ig__wrap {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ── Desktop: 6-col grid, text cell visible ─────────────────── */
@media (min-width: 1100px) {
  .ig__header-outer {
    display: none;
  }

  .ig__wrap {
    grid-template-columns: repeat(6, 1fr);
  }

  .ig__text-cell {
    display: flex;
  }

  .ig__description {
    margin-inline: auto;
  }
}

/* ── Ultrawide: capped + boxed, same 1400px moment as theme.css --uw ── */
@media (min-width: 1400px) {
  .ig__section {
    padding-inline: 1.5rem;
    padding-bottom: 2rem;
  }

  /* Hide full-width separator — borders are on the center cell only */
  .ig__separator {
    display: none;
  }

  .ig__wrap {
    max-width: var(--uw-max, 1280px);
    border-radius: var(--uw-r, 1.25rem);
    overflow: hidden;
  }
}
/* END_SECTION:instagram-gallery */

/* START_SECTION:integration-features (INDEX:40) */
/* Links inside feature copy: core green (Marta stylization pass, 2026-08-10) */
.integration-features a:not([class]) { color: #48A06A; text-decoration: underline; text-underline-offset: 2px; }
.integration-features a:not([class]):hover { color: #3a8557; }

  /* ═══════════════════════════════════════════════
     INTEGRATION FEATURES — Variant D / brand-segment language
     Alternating image-text rows (story-block pattern)
     ═══════════════════════════════════════════════ */
  .integration-features--dark {
    color: #fff;
  }

  /* ── Row — generous vertical rhythm matching brand-segment pages.
     No alternating background: rows are white so the cream hero above
     and the rounded media tile (still cream) provide the visual rhythm.
     Avoids the chameleon-style striping. ── */
  .integration-features__row {
    padding-block: var(--pdp-section-pad-y, 2.5rem);
    background: #ffffff;
  }
  .integration-features--dark .integration-features__row {
    background: #1a1a2e;
  }
  @media (min-width: 769px) {
    .integration-features__row {
      padding-block: 4rem;
    }
  }

  /* ── Container — design-token-driven ── */
  .integration-features__container {
    max-width: var(--pdp-container, 72rem);
    margin-inline: auto;
    padding-inline: var(--pdp-gutter, 1.25rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }
  @media (min-width: 769px) {
    .integration-features__container {
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
    }
  }

  /* Reversed row: image right, text left */
  @media (min-width: 769px) {
    .integration-features__row--reversed .integration-features__container {
      direction: rtl;
    }
    .integration-features__row--reversed .integration-features__container > * {
      direction: ltr;
    }
  }

  /* ── Media — clean rounded card ── */
  .integration-features__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background: var(--color-cream, #f7f7f8);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .integration-features--dark .integration-features__media {
    background: #2a2a4a;
  }
  .integration-features__media img,
  .integration-features__media video {
    display: block;
    width: 100%;
    height: auto;
  }

  .integration-features__placeholder--icon {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pdp-text-muted, #6f6f7d);
  }
  .integration-features__placeholder svg {
    width: 60%;
    height: auto;
    opacity: 0.25;
  }

  /* ── Text block ── */
  .integration-features__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Heading — Variant D type scale ── */
  .integration-features__heading {
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.625rem, 3.5vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 1rem;
    color: var(--color-text, #0f172a);
  }
  .integration-features--dark .integration-features__heading {
    color: #fff;
  }

  /* ── Description — body type, muted ── */
  .integration-features__description {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--pdp-text-muted, #6f6f7d);
  }
  .integration-features--dark .integration-features__description {
    color: rgba(255, 255, 255, 0.72);
  }

  /* ── Optional per-feature link ── */
  .integration-features__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    transition: gap 0.15s ease, opacity 0.15s ease;
  }
  .integration-features__link:hover { gap: 12px; }
  .integration-features--dark .integration-features__link { color: #ffffff; }
  .integration-features__link-arrow { flex-shrink: 0; }
  /* Video variant — filled pill with a play glyph */
  .integration-features__link--video {
    gap: 10px;
    padding: 11px 22px;
    border-radius: var(--radius-button);
    background: #1a1a2e;
    color: #ffffff;
  }
  .integration-features__link--video:hover { gap: 10px; opacity: 0.85; }
  .integration-features--dark .integration-features__link--video { background: #ffffff; color: #1a1a2e; }
  .integration-features__link-icon { flex-shrink: 0; }

  /* Rich text elements within description */
  .integration-features__description h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: var(--color-foreground, #1a1a2e);
  }

  .integration-features--dark .integration-features__description h3 {
    color: #ffffff;
  }

  .integration-features__description h3:first-child {
    margin-top: 0;
  }

  .integration-features__description p {
    margin: 0 0 16px;
  }

  .integration-features__description p:last-child {
    margin-bottom: 0;
  }

  .integration-features__description ul,
  .integration-features__description ol {
    margin: 12px 0;
    padding-left: 20px;
  }

  .integration-features__description li {
    margin-bottom: 8px;
    line-height: 1.6;
  }

  .integration-features__description li:last-child {
    margin-bottom: 0;
  }

  .integration-features__description strong {
    color: var(--color-foreground, #1a1a2e);
    font-weight: 600;
  }

  .integration-features--dark .integration-features__description strong {
    color: #ffffff;
  }

  .integration-features__description em {
    font-style: italic;
  }

  .integration-features__media {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-image);
    overflow: hidden;
    background: #f7f7f8;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .integration-features__illustration {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Large images: fill the square */
  .integration-features__illustration[width],
  .integration-features__illustration.--fill {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Small images (badges/logos): center at half size for @2x sharpness */
  .integration-features__illustration.--center {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
  }

  .integration-features__placeholder--icon {
    background: #f7f7f8;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-image);
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .integration-features__row {
      padding: 40px 0;
    }

    .integration-features__heading {
      font-size: 26px;
      margin-bottom: 16px;
    }

    .integration-features__description {
      font-size: 15px;
    }
  }
/* END_SECTION:integration-features */

/* START_SECTION:integration-grid (INDEX:41) */
.integration-grid { padding-block: var(--space-3xl); }
.integration-grid__container { max-width: 72rem; margin: 0 auto; }

.integration-grid__header { text-align: center; margin-block-end: var(--space-xl); }
.integration-grid__title { font-family: var(--font-heading); font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--color-foreground); margin-block-end: var(--space-xs); }
.integration-grid__subtitle { font-size: var(--font-size-base); color: var(--color-text-secondary); max-width: 500px; margin-inline: auto; line-height: var(--line-height-base); }

/* ── Filters ── */
.integration-grid__filters { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-block-end: var(--space-2xl); }
.integration-grid__filter { display: inline-flex; align-items: center; padding: 0.5rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: transparent; color: var(--color-text-secondary); font-family: inherit; font-size: var(--font-size-sm); font-weight: 500; cursor: pointer; transition: background var(--duration-base), color var(--duration-base), border-color var(--duration-base); -webkit-appearance: none; appearance: none; }
.integration-grid__filter:hover,
.integration-grid__filter--active { background: var(--color-primary); color: var(--color-text-on-primary); border-color: var(--color-primary); }

/* ── Grid ── */
.integration-grid__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
@media (min-width: 750px) { .integration-grid__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 990px) { .integration-grid__grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Cards ── */
.integration-grid__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-xl) var(--space-md); background: var(--color-card); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-xl); text-decoration: none; color: var(--color-foreground); transition: transform var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); position: relative; overflow: hidden; }
.integration-grid__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.integration-grid__card[hidden] { display: none; }

/* ── Card visual (logo + hover overlay) ── */
.integration-grid__card-visual { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-block-end: var(--space-md); border-radius: var(--radius-lg); }
.integration-grid__card-img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); transition: filter 0.4s ease, transform 0.4s ease; }
.integration-grid__card-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--color-muted); color: var(--color-text-muted); border-radius: var(--radius-lg); transition: filter 0.4s ease; }

/* ── Hover overlay: centered arrow in circle, bg blurs ── */
.integration-grid__card-overlay { position: absolute; inset: -8px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; z-index: 2; }
.integration-grid__card-arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255,255,255,0.95); border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,0.15); color: #1a1a2e; transform: scale(0.8); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Hover state — only for linked cards */
.integration-grid__card[href]:not([href="#"]):hover .integration-grid__card-overlay { opacity: 1; }
.integration-grid__card[href]:not([href="#"]):hover .integration-grid__card-arrow { transform: scale(1); }
.integration-grid__card[href]:not([href="#"]):hover .integration-grid__card-img { filter: blur(2px) brightness(0.85); transform: scale(1.05); }
.integration-grid__card[href]:not([href="#"]):hover .integration-grid__card-placeholder { filter: blur(2px) brightness(0.85); }
.integration-grid__card[href]:not([href="#"]):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* No link — static card, no hover effects */
.integration-grid__card[href="#"],
.integration-grid__card:not([href]) { cursor: default; }
.integration-grid__card[href="#"]:hover,
.integration-grid__card:not([href]):hover { transform: none; box-shadow: none; }

/* No description — remove bottom margin on name */
.integration-grid__card-body:only-child { margin-top: auto; }
.integration-grid__card-name:last-child { margin-block-end: 0; }

/* ── Card body ── */
.integration-grid__card-name { font-size: var(--font-size-base); font-weight: 600; margin-block-end: var(--space-2xs); color: var(--color-foreground); }
.integration-grid__card-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-base); }

/* ── Dark mode ── */
.theme-dark .integration-grid__card { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.theme-dark .integration-grid__card-arrow { background: rgba(255,255,255,0.15); color: #fff; backdrop-filter: blur(8px); }
.theme-dark .integration-grid__card:hover .integration-grid__card-img { filter: blur(2px) brightness(0.6); }

/* ── Mobile ── */
@media (max-width: 749px) {
  .integration-grid { padding-block: var(--space-2xl); }
  .integration-grid__filters { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 4px; }
  .integration-grid__filters::-webkit-scrollbar { display: none; }
  .integration-grid__filter { flex-shrink: 0; font-size: 0.75rem; padding: 0.4375rem 0.875rem; }
  .integration-grid__card { padding: var(--space-lg) var(--space-sm); }
  .integration-grid__card-visual { width: 56px; height: 56px; }
  .integration-grid__card-name { font-size: var(--font-size-sm); }
}
/* END_SECTION:integration-grid */

/* START_SECTION:integration-hero (INDEX:42) */
/* Italic-only paragraphs are disclaimers: render as an info chip instead of
     plain italics (MEL-1125 / MEL-1134). */
  .integration-hero__description p > em:only-child {
    display: inline-block;
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    background: var(--color-surface-alt, #f7f7f8);
    border: 1px solid var(--color-border, #e4e3de);
    color: var(--color-foreground, #1a1a2e);
  }

  /* "*" footnote paragraphs inside the description — small print, matching
     the desktop-app page disclaimers. */
  .integration-hero__description .integration-hero__footnote {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #8a8d92;
  }
  .integration-hero--dark .integration-hero__description .integration-hero__footnote {
    color: rgba(255, 255, 255, 0.5);
  }

  /* Partner pill — driven by the metaobject partner_badge field
     (e.g. Secretlab "Powered by Nanoleaf"). */
  .integration-hero__partner-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(72, 160, 106, 0.12);
    border: 1px solid rgba(72, 160, 106, 0.45);
    color: var(--color-brand-green-dark, #388455);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .integration-hero--dark .integration-hero__partner-pill {
    background: rgba(72, 160, 106, 0.18);
    color: #7fd6a1;
  }

  .integration-hero__dl-icon {
    flex: 0 0 auto;
  }

  .integration-hero {
    padding: 0 0 60px;
  }

  .integration-hero--light {
    background-color: #f8f8f8;
    color: var(--color-foreground, #1a1a2e);
  }

  .integration-hero--dark {
    background-color: #F7F7F8;
    color: #131329;
  }

  .integration-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* Breadcrumb */
  .integration-hero__breadcrumb {
    padding: 16px 0;
  }

  .integration-hero__breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    font-size: 14px;
  }

  .integration-hero__breadcrumb li {
    display: flex;
    align-items: center;
    color: var(--pdp-text-muted, #555c65);
  }

  .integration-hero--dark .integration-hero__breadcrumb li {
    color: rgba(255, 255, 255, 0.6);
  }

  .integration-hero__breadcrumb li + li::before {
    content: '/';
    margin: 0 8px;
    color: var(--pdp-text-muted, #555c65);
  }

  .integration-hero--dark .integration-hero__breadcrumb li + li::before {
    color: rgba(255, 255, 255, 0.4);
  }

  .integration-hero__breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .integration-hero__breadcrumb a:hover {
    text-decoration: underline;
  }

  .integration-hero__breadcrumb li[aria-current="page"] {
    color: var(--color-foreground, #1a1a2e);
    font-weight: 500;
  }

  .integration-hero--dark .integration-hero__breadcrumb li[aria-current="page"] {
    color: #ffffff;
  }

  /* Layout */
  .integration-hero__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 40px;
  }

  @media (min-width: 769px) {
    .integration-hero__layout {
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      padding-top: 60px;
    }
  }

  /* Content */
  .integration-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .integration-hero__logo {
    margin-bottom: 20px;
  }

  .integration-hero__logo img {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .integration-hero__heading {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
  }

  .integration-hero__description {
    font-size: 18px;
    line-height: 1.6;
    color: var(--pdp-text-muted, #555c65);
    margin: 0 0 32px;
    max-width: 520px;
  }

  .integration-hero--dark .integration-hero__description {
    color: rgba(255, 255, 255, 0.75);
  }

  .integration-hero__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .integration-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    /* Core brand green per Marta's works-with stylization pass (2026-08-10) */
    background-color: #48A06A;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-button);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
  }

  .integration-hero__cta:hover {
    opacity: 0.85;
  }

  /* Secondary hero buttons (outline) — from metaobject hero_buttons */
  .integration-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background-color: #ffffff;
    color: #131329;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-button);
    border: 1px solid #d9d9e0;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }
  .integration-hero__btn:hover { border-color: #131329; }
  .integration-hero--dark .integration-hero__btn {
    background-color: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
  }
  .integration-hero--dark .integration-hero__btn:hover { border-color: #ffffff; }

  .integration-hero__ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #48A06A;
    text-decoration: none;
    padding: 14px 24px;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius-button);
    transition: border-color 0.15s;
  }
  .integration-hero__ext-link:hover { border-color: #1a1a2e; }
  .integration-hero--dark .integration-hero__ext-link { color: #fff; border-color: rgba(255,255,255,0.3); }
  .integration-hero--dark .integration-hero__ext-link:hover { border-color: #fff; }

  .integration-hero__voice {
    margin-bottom: 20px;
  }
  .integration-hero__voice-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #999;
    margin: 0 0 8px;
  }
  .integration-hero__voice-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .integration-hero__voice-cmd {
    display: inline-block;
    padding: 6px 12px;
    background: #f7f7f8;
    border-radius: var(--radius-button);
    font-size: 13px;
    font-weight: 500;
    color: #1a1a2e;
    font-style: italic;
  }
  .integration-hero--dark .integration-hero__voice-cmd {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.85);
  }

  .integration-hero__disclaimer {
    font-size: 11px;
    color: #999;
    margin: 0;
    line-height: 1.5;
  }
  .integration-hero--dark .integration-hero__disclaimer {
    color: rgba(255,255,255,0.4);
  }

  /* Media */
  .integration-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-image);
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .integration-hero {
      padding: 0 0 40px;
    }

    .integration-hero__heading {
      font-size: 32px;
    }

    .integration-hero__description {
      font-size: 16px;
      margin-bottom: 24px;
    }

    .integration-hero__cta {
      padding: 12px 28px;
      font-size: 15px;
    }
  }
/* END_SECTION:integration-hero */

/* START_SECTION:integration-products (INDEX:43) */
/* ═══════════════════════════════════════════════
   INTEGRATION PRODUCTS — clean grid using the unified product-card snippet
   The card styling lives in snippets/product-card.liquid; this section only
   handles the grid layout, container, and section header spacing.
   ═══════════════════════════════════════════════ */
.ip {
  padding-block: var(--pdp-section-pad-y, 2.5rem) calc(var(--pdp-section-pad-y, 2.5rem) * 1.4);
}
.ip__container {
  max-width: var(--pdp-container, 72rem);
  margin-inline: auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}

/* Grid — matches the collection grid pattern (4 cols desktop, 2 mobile) */
.ip__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  grid-auto-rows: 1fr;
}
@media (min-width: 750px) {
  .ip__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 990px) {
  .ip__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
  }
}

/* Stretch nf-card to fill the grid cell (handled in product-card snippet, but
   defensive for older browsers without :has support) */
.ip__grid > .nf-card { width: 100%; max-width: none; height: 100%; }
@media (min-width: 750px) { .ip__eyebrow { font-size: 0.8125rem; } }
/* END_SECTION:integration-products */

/* START_SECTION:legal-content (INDEX:44) */
/* ═══════════════════════════════════════════════════════════
   LEGAL / LONG-FORM PAGE
   Single centred column by default. When the runtime table of
   contents is built, desktop switches to sidebar + measure-capped
   body via .is-toc-ready (set by <legal-longform>).
   ═══════════════════════════════════════════════════════════ */
.legal-page {
  max-inline-size: 48rem;
  margin-inline: auto;
  padding-block: 6rem 4rem;
  padding-inline: 1.5rem;
}

/* ── Breadcrumb ── */
.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  margin-block-end: 2.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #666);
}
.legal-breadcrumb a {
  color: var(--color-text-secondary, #666);
  text-decoration: none;
  transition: color var(--duration-base, 200ms) var(--ease-default, ease);
}
.legal-breadcrumb a:hover {
  color: var(--color-foreground, #1a1a2e);
}
.legal-breadcrumb a:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.25rem);
}
.legal-breadcrumb span:last-child {
  color: var(--color-foreground, #1a1a2e);
}

/* ── White card container ── */
.legal-content {
  padding: 3rem;
  background: var(--color-card, #fff);
  border-radius: var(--radius-xl, 1.5rem);
  box-shadow: 0 2px 12px rgb(0 0 0 / 4%);
  animation: legalFadeIn 0.6s var(--ease-default, ease) both;
}
@keyframes legalFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.legal-title {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-3xl, 2rem);
  font-weight: 800;
  line-height: var(--line-height-tight, 1.15);
  letter-spacing: var(--tracking-tight, -0.02em);
  color: var(--color-foreground, #1a1a2e);
  overflow-wrap: break-word;
}
.legal-date {
  margin: 0 0 2.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #666);
}

/* ── Layout shell ── */
.legal-layout {
  display: block;
}

/* ── Table of contents ── */
.legal-toc[hidden] {
  display: none;
}
.legal-toc {
  margin-block-end: 2rem;
}
.legal-toc__disclosure {
  padding: 1rem 1.25rem;
  background: var(--color-surface-alt, #f7f7f8);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 0.75rem);
}
.legal-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 0.75rem);
  cursor: pointer;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary, #666);
  list-style: none;
}
.legal-toc__summary::-webkit-details-marker {
  display: none;
}
.legal-toc__summary:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 3px;
  border-radius: var(--radius-sm, 0.25rem);
}
.legal-toc__chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary, #666);
  transition: transform var(--duration-base, 200ms) var(--ease-default, ease);
}
.legal-toc__disclosure[open] .legal-toc__chevron {
  transform: rotate(180deg);
}
.legal-toc__panel {
  margin-block-start: 0.875rem;
}
.legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-toc__item {
  min-inline-size: 0;
}
.legal-toc__list--nested {
  margin-block: 0.125rem 0.375rem;
  padding-inline-start: 1rem;
  border-inline-start: 1px solid var(--color-border, #deddd8);
}
.legal-toc__link {
  display: block;
  padding-block: 0.3125rem;
  font-size: var(--font-size-sm, 0.875rem);
  line-height: 1.45;
  color: var(--color-text-secondary, #666);
  text-decoration: none;
  overflow-wrap: break-word;
  transition:
    color var(--duration-base, 200ms) var(--ease-default, ease),
    opacity var(--duration-base, 200ms) var(--ease-default, ease);
}
.legal-toc__link:hover {
  color: var(--color-foreground, #1a1a2e);
}
.legal-toc__link:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.25rem);
}
/* Accessible small-text green (#308551) — the large-object Core Green
   #48A06A only reaches 3.2:1 on white, which fails AA at this size. */
.legal-toc__link.is-active {
  font-weight: 600;
  color: var(--color-brand-green-text, #308551);
}
.legal-toc__list--nested .legal-toc__link {
  font-size: 0.8125rem;
}

/* ── Body typography — comfortable measure + clear hierarchy ── */
.legal-body {
  max-inline-size: var(--legal-measure, 50ch);
  min-inline-size: 0;
  font-size: var(--font-size-base, 1.0625rem);
  color: color-mix(in srgb, var(--color-foreground, #1a1a2e) 88%, #fff);
  overflow-wrap: break-word;
}
.legal-body :is(h2, h3, h4, h5, h6) {
  scroll-margin-block-start: 5.5rem;
  overflow-wrap: break-word;
}
.legal-body h2 {
  margin: 2.75rem 0 1rem;
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--color-border, #deddd8);
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking-tight, -0.015em);
  color: var(--color-foreground, #1a1a2e);
}
.legal-body h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: none;
}
.legal-body h3 {
  margin: 2.25rem 0 0.75rem;
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-foreground, #1a1a2e);
}
.legal-body h4 {
  margin: 1.875rem 0 0.5rem;
  font-size: var(--font-size-lg, 1.125rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-foreground, #1a1a2e);
}
.legal-body h5,
.legal-body h6 {
  margin: 1.5rem 0 0.5rem;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--color-text-secondary, #666);
}
.legal-body p {
  margin: 0 0 1.125rem;
  line-height: var(--line-height-relaxed, 1.75);
}
.legal-body :is(ul, ol) {
  margin: 0 0 1.25rem;
  padding-inline-start: 1.375rem;
}
.legal-body :is(ul, ol) :is(ul, ol) {
  margin-block: 0.5rem 0.75rem;
}
.legal-body li {
  margin-block-end: 0.5rem;
  padding-inline-start: 0.25rem;
  line-height: var(--line-height-relaxed, 1.75);
}
.legal-body li::marker {
  color: var(--color-text-muted, #999);
}
.legal-body a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-body a:hover {
  color: var(--color-brand-green-text, #308551);
}
.legal-body a:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 0.25rem);
}
.legal-body strong {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.legal-body :is(img, video, iframe) {
  max-inline-size: 100%;
  height: auto;
  border-radius: var(--radius-md, 0.5rem);
}
.legal-body hr {
  margin-block: 2.5rem;
  border: 0;
  border-block-start: 1px solid var(--color-border, #deddd8);
}
.legal-body blockquote {
  margin: 1.5rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--color-border, #deddd8);
  color: var(--color-text-muted, #999);
  font-style: italic;
}

/* ── Tables (warranty coverage grids etc.) ── */
.legal-body__table-scroll {
  margin-block: 1.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 0.5rem);
}
.legal-body__table-scroll:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 2px;
}
.legal-body table {
  inline-size: 100%;
  min-inline-size: min(100%, 34rem);
  border-collapse: collapse;
  font-size: var(--font-size-sm, 0.875rem);
}
.legal-body__table-scroll table {
  margin: 0;
}
.legal-body :is(th, td) {
  padding: 0.75rem 0.875rem;
  border-block-end: 1px solid var(--color-border, #deddd8);
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
}
.legal-body th {
  background: var(--color-surface-alt, #f7f7f8);
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.legal-body tr:last-child :is(th, td) {
  border-block-end: none;
}

/* ── Desktop: sticky sidebar table of contents ── */
@media screen and (min-width: 990px) {
  .legal-page:has(.legal-layout.is-toc-ready) {
    max-inline-size: 64rem;
  }
  .legal-layout.is-toc-ready {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .legal-toc {
    position: sticky;
    inset-block-start: 5.5rem;
    max-block-size: calc(100dvh - 8rem);
    margin-block-end: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .legal-toc__disclosure {
    padding: 1.125rem 1.25rem;
  }
}

/* ── Mobile ── */
@media screen and (max-width: 749px) {
  .legal-page {
    padding-block: 3rem;
    padding-inline: 1rem;
  }
  .legal-content {
    padding: 2rem 1.25rem;
    border-radius: var(--radius-lg, 1rem);
  }
  .legal-title {
    font-size: var(--font-size-2xl, 1.5rem);
  }
  .legal-body h2 {
    margin-block-start: 2.25rem;
    padding-block-start: 1.5rem;
    font-size: var(--font-size-xl, 1.25rem);
  }
  .legal-body h3 {
    font-size: var(--font-size-lg, 1.125rem);
  }
  .legal-body h4 {
    font-size: var(--font-size-base, 1.0625rem);
  }
  .legal-toc__disclosure {
    padding: 0.875rem 1rem;
  }
}

/* ── Dark scheme ── */
@media (prefers-color-scheme: dark) {
  .legal-content {
    background: #1e1e21;
    box-shadow: 0 2px 12px rgb(0 0 0 / 20%);
  }
  .legal-title,
  .legal-body :is(h2, h3, h4),
  .legal-body strong,
  .legal-body th {
    color: #f0f0f5;
  }
  .legal-body :is(h5, h6) {
    color: #a0a0b0;
  }
  .legal-body,
  .legal-body :is(p, li) {
    color: #c8c8d4;
  }
  .legal-body a {
    color: #f0f0f5;
  }
  .legal-breadcrumb,
  .legal-breadcrumb a,
  .legal-date,
  .legal-body blockquote {
    color: #8888a0;
  }
  .legal-breadcrumb span:last-child {
    color: #f0f0f5;
  }
  .legal-toc__disclosure {
    background: #24242e;
    border-color: #2e2e3a;
  }
  .legal-toc__link {
    color: #a8a8bc;
  }
  .legal-toc__link:hover {
    color: #f0f0f5;
  }
  .legal-toc__list--nested {
    border-inline-start-color: #2e2e3a;
  }
  .legal-body h2 {
    border-block-start-color: #2e2e3a;
  }
  .legal-body :is(th, td),
  .legal-body__table-scroll,
  .legal-body hr {
    border-color: #2e2e3a;
  }
  .legal-body th {
    background: #24242e;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .legal-content {
    animation: none;
  }
  .legal-toc__chevron,
  .legal-toc__link,
  .legal-breadcrumb a {
    transition: none;
  }
}
/* END_SECTION:legal-content */

/* START_SECTION:main-article (INDEX:49) */
/* ═══════════════════════════════════════
   ARTICLE PAGE — clean reading layout
   ═══════════════════════════════════════ */
.article-pg {
  max-width: 48rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Breadcrumb ── */
.article-pg__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.article-pg__breadcrumb a {
  color: var(--color-text-muted, #71717a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.article-pg__breadcrumb a:hover {
  color: var(--color-foreground, #1a1a2e);
}
.article-pg__breadcrumb span:last-child {
  color: var(--color-foreground, #1a1a2e);
}

/* ── Card container (matches legal template) ── */
.article-pg__card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  animation: articleFadeIn 0.6s ease both;
}
@keyframes articleFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Category tag ── */
.article-pg__category {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-button);
  margin-bottom: 1rem;
}

/* ── Title ── */
.article-pg__title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.75rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* ── Meta ── */
.article-pg__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.article-pg__meta-sep { opacity: 0.5; }

/* ── Featured image ── */
.article-pg__hero-img-wrap {
  width: 100%;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.article-pg__hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Article body typography ── */
.article-pg__body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.3;
}
.article-pg__body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.article-pg__body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.3;
}
.article-pg__body h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 1.75rem 0 0.625rem;
  color: var(--color-text-muted, #71717a);
  line-height: 1.4;
}
.article-pg__body p {
  line-height: 1.8;
  margin: 0 0 1.25rem;
  color: var(--color-body-text, #444);
}
.article-pg__body ul,
.article-pg__body ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.article-pg__body li {
  line-height: 1.8;
  margin-bottom: 0.5rem;
  color: var(--color-body-text, #444);
}
.article-pg__body a {
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-pg__body a:hover { opacity: 0.7; }
.article-pg__body strong {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.article-pg__body blockquote {
  border-left: 3px solid var(--color-border, #e5e5e5);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--color-text-muted, #71717a);
  font-style: italic;
}
.article-pg__body pre,
.article-pg__body code {
  font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}
.article-pg__body pre {
  background: var(--color-secondary, #f5f4f0);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
  line-height: 1.7;
}
.article-pg__body code {
  background: var(--color-secondary, #f5f4f0);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}
.article-pg__body pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}
.article-pg__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  display: block;
}
.article-pg__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
.article-pg__body th,
.article-pg__body td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  line-height: 1.6;
}
.article-pg__body th {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}

/* ── Tags row ── */
.article-pg__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.article-pg__tag-pill {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
  background: var(--color-secondary, #f5f4f0);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-button);
  text-decoration: none;
  transition: all 0.15s;
}
.article-pg__tag-pill:hover {
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  text-decoration: none;
}

/* ── Share ── */
.article-pg__share {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.article-pg__share-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin-right: 0.25rem;
}
.article-pg__share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-md, 8px);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.article-pg__share-btn:hover {
  color: var(--color-foreground, #1a1a2e);
  border-color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
}

/* ── Author card ── */
.article-pg__author-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.article-pg__author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
}
.article-pg__author-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.article-pg__author-role {
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
  margin: 0;
}

/* ── Prev/Next nav ── */
.article-pg__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.article-pg__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  transition: opacity 0.2s;
}
.article-pg__nav-link:hover { opacity: 0.7; text-decoration: none; }
.article-pg__nav-link--next { margin-left: auto; }
.article-pg__nav-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #71717a);
}

/* ── Related articles ── */
.article-pg__related {
  margin-top: 3rem;
}
.article-pg__related-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.25rem;
  text-align: center;
}
.article-pg__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.article-pg__related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  animation: articleFadeIn 0.6s ease both;
}
.article-pg__related-card:hover { text-decoration: none; }
.article-pg__related-img-wrap {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--color-secondary, #f5f4f0);
  margin-bottom: 0.625rem;
}
.article-pg__related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.article-pg__related-card:hover .article-pg__related-img {
  transform: scale(1.04);
}
.article-pg__related-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-pg__related-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.25rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-pg__related-date {
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .article-pg__card {
    background: #1e1e21;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .article-pg__title,
  .article-pg__body h2,
  .article-pg__body h3,
  .article-pg__body strong,
  .article-pg__body th {
    color: #f0f0f5;
  }
  .article-pg__body h4 { color: #a0a0b0; }
  .article-pg__body p,
  .article-pg__body li { color: #c8c8d4; }
  .article-pg__breadcrumb,
  .article-pg__breadcrumb a,
  .article-pg__meta,
  .article-pg__body blockquote { color: #8888a0; }
  .article-pg__breadcrumb span:last-child { color: #f0f0f5; }
  .article-pg__body h2 { border-top-color: #2e2e3a; }
  .article-pg__body th,
  .article-pg__body td { border-bottom-color: #2e2e3a; }
  .article-pg__body pre { background: #24242e; }
  .article-pg__body code { background: #24242e; }
  .article-pg__category { background: rgba(37, 99, 235, 0.15); }
  .article-pg__related-img-wrap { background: #24242e; }
  .article-pg__tag-pill { background: #24242e; color: #a0a0b0; }
  .article-pg__share-btn { background: #24242e; border-color: #2e2e3a; color: #a0a0b0; }
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .article-pg {
    padding: 3rem 1rem 3rem;
  }
  .article-pg__card {
    padding: 2rem 1.25rem;
    border-radius: 1rem;
  }
  .article-pg__title { font-size: 1.5rem; }
  .article-pg__body h2 { font-size: 1.25rem; margin-top: 2rem; }
  .article-pg__body h3 { font-size: 1.0625rem; }
  .article-pg__related-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .article-pg__nav {
    flex-direction: column;
    gap: 0.75rem;
  }
  .article-pg__nav-link--next { margin-left: 0; }
}
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:50) */
/* ═══════════════════════════════════════
   BLOG INDEX — article grid
   ═══════════════════════════════════════ */
.blog-idx {
  max-width: 72rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Hero ── */
.blog-idx__hero {
  text-align: center;
  margin-bottom: 3rem;
}
.blog-idx__title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.blog-idx__description {
  font-size: 1.0625rem;
  color: var(--color-text-muted, #71717a);
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ── Grid ── */
.blog-idx__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

/* ── Card ── */
.blog-card {
  animation: blogCardFadeIn 0.6s ease both;
}
@keyframes blogCardFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.blog-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.blog-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--color-secondary, #f5f4f0);
  margin-bottom: 1rem;
}
.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card__link:hover .blog-card__img {
  transform: scale(1.04);
}
.blog-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent, #2563eb);
  background: rgba(37, 99, 235, 0.08);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-button);
  margin-bottom: 0.5rem;
  width: fit-content;
}
.blog-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.375rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 0.75rem;
  line-height: 1.6;
  flex: 1;
}
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 0.5rem;
}
.blog-card__meta-sep { opacity: 0.5; }
.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  transition: gap 0.2s ease;
}
.blog-card__link:hover .blog-card__read-more {
  gap: 0.5rem;
}

/* ── Pagination ── */
.blog-idx__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.blog-idx__pag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-button);
  transition: all 0.15s;
}
.blog-idx__pag-btn:hover {
  background: var(--color-secondary, #f5f4f0);
  border-color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
}
.blog-idx__pag-btn--disabled {
  opacity: 0.35;
  pointer-events: none;
}
.blog-idx__pag-info {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
}

/* ── Empty ── */
.blog-idx__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted, #71717a);
  font-size: 0.9375rem;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .blog-card__img-wrap { background: #24242e; }
  .blog-card__tag { background: rgba(37, 99, 235, 0.15); }
}

/* ── Responsive ── */
@media (max-width: 999px) {
  .blog-idx__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}
@media (max-width: 749px) {
  .blog-idx {
    padding: 3rem 1rem 3rem;
  }
  .blog-idx__title { font-size: 1.75rem; }
  .blog-idx__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:51) */
/* ═══════════════════════════════════════
   CART PAGE — Full-page cart
   ═══════════════════════════════════════ */
.cart-pg {
  max-width: 72rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Breadcrumb ── */
.cart-pg__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 1.5rem;
}
.cart-pg__breadcrumb a {
  color: var(--color-text-muted, #71717a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cart-pg__breadcrumb a:hover {
  color: var(--color-foreground, #1a1a2e);
}
.cart-pg__breadcrumb span:last-child {
  color: var(--color-foreground, #1a1a2e);
}

/* ── Title ── */
.cart-pg__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.cart-pg__count {
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--color-text-muted, #71717a);
}

/* ── Two-column layout ── */
.cart-pg__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: flex-start;
}

/* ── Items column ── */
.cart-pg__items {
  display: flex;
  flex-direction: column;
}
.cart-pg__item {
  display: flex;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  position: relative;
  transition: opacity 0.2s ease;
}
.cart-pg__item:first-child {
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.cart-pg__item.is-updating {
  opacity: 0.5;
  pointer-events: none;
}
.cart-pg__item-img-link { flex-shrink: 0; }
.cart-pg__item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: var(--radius-image);
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #e5e5e5);
  display: block;
}
.cart-pg__item-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-pg__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cart-pg__item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}
.cart-pg__item-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-pg__item-name:hover {
  color: var(--color-primary-hover, #2a2a2d);
}
.cart-pg__item-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  padding: 2px;
  transition: color 0.15s;
}
.cart-pg__item-remove:hover { color: #e63946; }
.cart-pg__item-variant {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #666;
  background: #f0efea;
  border-radius: var(--radius-button);
  padding: 2px 8px;
  margin: 0;
  width: fit-content;
}
.cart-pg__item-price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cart-pg__item-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}
.cart-pg__item-compare {
  font-size: 0.75rem;
  color: #999;
  text-decoration: line-through;
}
.cart-pg__item-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.25rem;
}
.cart-pg__item-line-total {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}

/* ── Inline cart error (created by JS on failed updates) ── */
.cart-pg__error {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: #a53f2c;
}

/* ── Quantity selector ── */
.cart-pg__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 8px);
  /* No overflow:hidden — it would clip the 44px hit-area extension on the
     steppers. Corner rounding moved onto the first/last buttons instead. */
}
.cart-pg__qty-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  transition: background 0.15s;
  user-select: none;
  position: relative;
}
/* 44x44 minimum hit area (WCAG 2.5.5 / mobile majority) without inflating the
   34px visual control: pseudo-element extends the clickable box by 5px a side. */
.cart-pg__qty-btn::before {
  content: '';
  position: absolute;
  inset: -5px;
}
.cart-pg__qty-btn:first-child { border-radius: 7px 0 0 7px; }
.cart-pg__qty-btn:last-child { border-radius: 0 7px 7px 0; }
.cart-pg__qty-btn:hover { background: var(--color-surface, #f5f5f0); }
.cart-pg__qty-input {
  width: 40px;
  height: 34px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border, #deddd8);
  border-right: 1px solid var(--color-border, #deddd8);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  font-family: inherit;
  background: transparent;
  -moz-appearance: textfield;
}
.cart-pg__qty-input::-webkit-outer-spin-button,
.cart-pg__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.cart-pg__continue-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.cart-pg__continue-link:hover {
  color: var(--color-foreground, #1a1a2e);
}

/* ── Summary column ── */
.cart-pg__summary-col {
  position: sticky;
  top: 6rem;
}
.cart-pg__summary-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  border: 1px solid var(--color-border, #e5e5e5);
}
.cart-pg__summary-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.25rem;
}
.cart-pg__summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--color-foreground, #1a1a2e);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border, #f0f0f0);
}
.cart-pg__summary-row:last-of-type {
  border-bottom: none;
  margin-bottom: 0.75rem;
}
.cart-pg__summary-row span:last-child {
  font-weight: 700;
}
.cart-pg__summary-row--light span {
  font-weight: 400 !important;
  color: var(--color-text-muted, #71717a);
  font-size: 0.8125rem;
}
.cart-pg__shipping-note {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-text-muted, #71717a);
  background: var(--color-secondary, #f5f4f0);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.cart-pg__shipping-note svg { flex-shrink: 0; color: #2d8a23; }
/* display:flex above beats the UA [hidden] rule — restore hidden behaviour so
   the note actually disappears once the free-shipping threshold is met */
.cart-pg__shipping-note[hidden] { display: none; }

/* ── Discount ── */
.cart-pg__discount-wrap,
.cart-pg__note-wrap {
  border-top: 1px solid var(--color-border, #f0f0f0);
  padding: 0.75rem 0 0;
  margin-top: 0.5rem;
}
.cart-pg__discount-toggle,
.cart-pg__note-toggle {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s;
}
.cart-pg__discount-toggle:hover,
.cart-pg__note-toggle:hover {
  color: var(--color-foreground, #1a1a2e);
}
.cart-pg__discount-toggle::-webkit-details-marker,
.cart-pg__note-toggle::-webkit-details-marker { display: none; }
.cart-pg__discount-inner {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.625rem;
}
.cart-pg__discount-input {
  flex: 1;
  height: 2.25rem;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 8px);
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-foreground, #1a1a2e);
  background: transparent;
}
.cart-pg__discount-input:focus {
  outline: none;
  border-color: var(--color-foreground, #1a1a2e);
}
.cart-pg__discount-btn {
  height: 2.25rem;
  padding: 0 1rem;
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s;
}
.cart-pg__discount-btn:hover { opacity: 0.85; }

.cart-pg__discount-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.cart-pg__discount-hint {
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b7280);
}

/* ── Order note ── */
.cart-pg__note-input {
  width: 100%;
  margin-top: 0.625rem;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 8px);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-foreground, #1a1a2e);
  background: transparent;
  resize: vertical;
}
.cart-pg__note-input:focus {
  outline: none;
  border-color: var(--color-foreground, #1a1a2e);
}

/* ── Checkout CTA ── */
.cart-pg__checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  margin-top: 1rem;
  background: #2d8a23;
  color: #fff;
  border: none;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(45,138,35,0.25);
  position: relative;
  overflow: hidden;
}
.cart-pg__checkout-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%, transparent 100%);
  background-size: 200% 100%;
  animation: cartPgShimmer 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes cartPgShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.cart-pg__checkout-btn:hover {
  box-shadow: 0 4px 20px rgba(45,138,35,0.44);
  transform: translateY(-1px);
  filter: brightness(0.95);
  text-decoration: none;
}
.cart-pg__checkout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45,138,35,0.25);
}

/* Dynamic checkout */
.cart-pg__dynamic-checkout {
  margin-top: 0.75rem;
}
.cart-pg__dynamic-checkout [data-shopify="dynamic-checkout-cart"] {
  max-height: none !important;
}

/* ── Trust badges ── */
.cart-pg__trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border, #f0f0f0);
}
.cart-pg__trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted, #71717a);
}
.cart-pg__trust-item svg { flex-shrink: 0; }

/* ── Payment icons ── */
.cart-pg__payment-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border, #f0f0f0);
  flex-wrap: wrap;
}
.cart-pg__payment-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cart-pg__payment-icons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.cart-pg__payment-icon {
  height: 22px;
  width: auto;
  border-radius: 3px;
}

/* ── Upsell section ── */
.cart-pg__upsell {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border, #e5e5e5);
}
.cart-pg__upsell-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.25rem;
}
.cart-pg__upsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cart-pg__upsell-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border, #e5e5e5);
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cart-pg__upsell-card:hover {
  border-color: var(--color-foreground, #1a1a2e);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
  text-decoration: none;
}
.cart-pg__upsell-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--color-secondary, #f5f4f0);
  margin-bottom: 0.625rem;
}
.cart-pg__upsell-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cart-pg__upsell-badge {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  background: #2d8a23;
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-button);
}
.cart-pg__upsell-card-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.25rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cart-pg__upsell-card-price-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.cart-pg__upsell-card-price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}
.cart-pg__upsell-card-compare {
  font-size: 0.6875rem;
  color: #999;
  text-decoration: line-through;
}

/* ── Empty state ── */
.cart-pg__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 1rem;
  text-align: center;
  animation: cartPgFadeIn 0.6s ease both;
}
@keyframes cartPgFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cart-pg__empty-icon {
  color: var(--color-text-muted, #71717a);
  margin-bottom: 1.5rem;
  opacity: 0.5;
}
.cart-pg__empty-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.5rem;
}
.cart-pg__empty-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 1.5rem;
}
.cart-pg__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2rem;
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}
.cart-pg__empty-cta:hover { opacity: 0.85; text-decoration: none; }

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .cart-pg__summary-card {
    background: #1e1e21;
    border-color: #2e2e3a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .cart-pg__item-img { background: #24242e; border-color: #2e2e3a; }
  .cart-pg__item-variant { background: #24242e; color: #a0a0b0; }
  .cart-pg__upsell-card { background: #1e1e21; border-color: #2e2e3a; }
  .cart-pg__upsell-card-img-wrap { background: #24242e; }
  .cart-pg__discount-input,
  .cart-pg__note-input { border-color: #2e2e3a; color: #f0f0f5; }
  .cart-pg__shipping-note { background: #24242e; }
}

/* ── Responsive ── */
@media (max-width: 999px) {
  .cart-pg__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cart-pg__summary-col {
    position: static;
  }
  .cart-pg__upsell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 749px) {
  .cart-pg {
    padding: 3rem 1rem 3rem;
  }
  .cart-pg__title { font-size: 1.5rem; }
  .cart-pg__summary-card { padding: 1.5rem; border-radius: 1rem; }
  .cart-pg__upsell-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 479px) {
  .cart-pg__upsell-grid {
    grid-template-columns: 1fr;
  }
}
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:52) */
@keyframes clGridSpin { to { transform: rotate(360deg); } }

.cl-grid {
  /* No padding-block here: .cl-grid is in section-rhythm.css's FLOW list and
     pays the standard edge there. The hardcoded 1.5rem/3rem didn't scale on
     mobile and broke the rhythm below the grid. */
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .cl-grid { padding-inline: var(--pdp-gutter, 2rem); }
}

/* ── Layout: single-column. Sidebar is a slide-in drawer at all viewports. ── */
.cl-grid__layout {
  display: block;
}

/* ── Sidebar = page-toggle drawer (always fixed, slides from left) ── */
.cl-grid__sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 360px;
  max-width: 88vw;
  background: #fff;
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 4px 0 32px rgba(0,0,0,0.18);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem 1.25rem 2rem;
}
.cl-grid__sidebar[data-open="true"] { transform: translateX(0); }

.cl-grid__sidebar-inner {
  display: flex;
  flex-direction: column;
}

.cl-grid__sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
}

.cl-grid__sidebar-title {
  font-family: var(--font-heading, inherit);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text, #1a1a2e);
}

.cl-grid__sidebar-close {
  display: inline-flex;
  background: none;
  border: 1px solid var(--pdp-border, #e5e7eb);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text, #1a1a2e);
  transition: border-color 0.15s, background 0.15s;
}
.cl-grid__sidebar-close:hover {
  border-color: var(--color-text, #1a1a2e);
  background: var(--pdp-border, #f3f4f6);
}

/* ── Filter group (collapsible) ── */
.cl-filter-group {
  border-bottom: 1px solid var(--pdp-border, #e5e7eb);
  padding-block: 0.875rem;
}
.cl-filter-group:first-of-type { padding-top: 0; }

.cl-filter-group__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
  cursor: pointer;
  list-style: none;
  letter-spacing: -0.005em;
}
.cl-filter-group__legend::-webkit-details-marker { display: none; }

.cl-filter-group__chevron {
  transition: transform 0.2s ease;
  color: var(--pdp-text-muted, #6b7280);
}
.cl-filter-group[open] .cl-filter-group__chevron { transform: rotate(180deg); }

.cl-filter-group__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.875rem;
  max-height: 14rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ── Filter option (checkbox row) ── */
.cl-filter-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--color-text, #1a1a2e);
  line-height: 1.4;
  transition: opacity 0.15s;
}
.cl-filter-option:hover { opacity: 0.75; }
.cl-filter-option--empty { opacity: 0.4; cursor: not-allowed; }
.cl-filter-option--empty:hover { opacity: 0.4; }

.cl-filter-option input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--pdp-border, #d4d4d8);
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
  display: grid;
  place-content: center;
  transition: border-color 0.15s, background 0.15s;
}
.cl-filter-option input[type="checkbox"]:checked {
  background: var(--color-brand-green-dark, #2d8a23);
  border-color: var(--color-brand-green-dark, #2d8a23);
}
.cl-filter-option input[type="checkbox"]:checked::after {
  content: '';
  width: 9px;
  height: 9px;
  background: #fff;
  clip-path: polygon(15% 50%, 0% 65%, 35% 100%, 100% 35%, 85% 20%, 35% 70%);
}

.cl-filter-option__label { flex: 1; }
.cl-filter-option__count {
  font-size: 0.6875rem;
  color: var(--pdp-text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

/* ── Price range input ── */
.cl-filter-price {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.cl-filter-price__input {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--pdp-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cl-filter-price__input input {
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 6px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--color-text, #1a1a2e);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.cl-filter-price__input input:focus {
  border-color: var(--color-brand-green-dark, #2d8a23);
}

/* ── Sidebar action buttons (always visible now — drawer pattern at all sizes) ── */
.cl-grid__sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pdp-border, #e5e7eb);
  /* Keep buttons in-view while scrolling long filter lists */
  position: sticky;
  bottom: -1rem;
  background: linear-gradient(to top, #fff 70%, rgba(255,255,255,0));
  padding-bottom: 0.5rem;
}

.cl-grid__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.cl-grid__btn--primary {
  background: var(--color-text, #1a1a2e);
  color: #fff;
  border: 1.5px solid var(--color-text, #1a1a2e);
}
.cl-grid__btn--primary:hover { opacity: 0.85; }

.cl-grid__btn--ghost {
  background: transparent;
  color: var(--color-text, #1a1a2e);
  border: 1.5px solid var(--pdp-border, #e5e7eb);
}
.cl-grid__btn--ghost:hover { border-color: var(--color-text, #1a1a2e); }

/* ── Header (title + tools row) ── */
.cl-grid__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.cl-grid__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text, #1a1a2e);
  margin: 0;
}

.cl-grid__count {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--pdp-text-muted, #71717a);
  margin-left: 0.375rem;
}

.cl-grid__tools {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.cl-grid__filter-toggle {
  display: inline-flex; /* always visible — sidebar is a drawer at all viewports */
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 9999px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
}
.cl-grid__filter-toggle:hover { border-color: var(--color-text, #1a1a2e); }

.cl-grid__filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.375rem;
  background: var(--color-brand-green-dark, #2d8a23);
  color: #fff;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
}

/* ── MEL-1015: Gallery vs Catalogue view toggle ───────────── */
.cl-grid__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--color-surface-alt, #f5f2eb);
  border-radius: 9999px;
  padding: 3px;
}
.cl-grid__view-pill {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0.4375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--pdp-text-muted, #71717a);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
  font-family: inherit;
  letter-spacing: 0.01em;
}
.cl-grid__view-pill:hover {
  color: var(--color-foreground, #1a1a2e);
}
.cl-grid__view-pill--active {
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
}
.cl-grid__view-pill:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}

/* Product card image swap (default = catalogue) */
.nf-card__img--gallery { display: none; }
[data-view-mode="gallery"] .nf-card__img--catalogue { display: none; }
[data-view-mode="gallery"] .nf-card__img--gallery { display: block; }
/* When no gallery image exists, gracefully fall back to catalogue */
[data-view-mode="gallery"] .nf-card:not(:has(.nf-card__img--gallery)) .nf-card__img--catalogue { display: block; }

.cl-grid__sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.cl-grid__sort-label {
  color: var(--pdp-text-muted, #71717a);
  font-weight: 500;
}
/* Sort select — identical surface to .cl-grid__filter-toggle so they sit as
   a matched pair. Custom chevron via background-image since native <select>
   styling is constrained. */
.cl-grid__sort-select {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 2.25rem 0.5rem 0.9rem;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 9999px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a1a2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 0.75rem center;
  background-size: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
  line-height: 1.4;
}
.cl-grid__sort-select:hover  { border-color: var(--color-text, #1a1a2e); }
.cl-grid__sort-select:focus  { border-color: var(--color-text, #1a1a2e); }

/* ── Chips row (active filters) ── */
.cl-grid__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cl-grid__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.5rem 0.375rem 0.75rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-brand-green, #48A06A) 25%, transparent);
  color: var(--color-brand-green-dark, #2d8a23);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.cl-grid__chip:hover { background: color-mix(in srgb, var(--color-brand-green, #48A06A) 20%, transparent); }
.cl-grid__chip svg { opacity: 0.7; }
.cl-grid__chip-label { line-height: 1; }

.cl-grid__chip--clear {
  background: transparent;
  border-color: var(--pdp-border, #e5e7eb);
  color: var(--color-text, #1a1a2e);
  padding: 0.375rem 0.75rem;
}
.cl-grid__chip--clear:hover { background: var(--pdp-border, #f3f4f6); }

/* ── Product grid — full width since sidebar is now a drawer (not inline) ── */
.cl-grid__products {
  display: grid;
  grid-template-columns: repeat(var(--cl-grid-cols, 4), 1fr);
  gap: 1.5rem 1rem;
  transition: opacity 0.2s ease;
}
/* AJAX loading state — fade the grid + count, leave header/filter clickable */
[data-collection-grid][data-loading="true"] .cl-grid__products,
[data-collection-grid][data-loading="true"] .cl-grid__chips,
[data-collection-grid][data-loading="true"] .cl-grid__count {
  opacity: 0.5;
  pointer-events: none;
}

/* Override product-card fixed width for grid context */
.cl-grid__item .nf-card,
.cl-grid__item .nf-card--l {
  width: 100% !important;
  flex-shrink: 1;
}
.cl-grid__item .nf-card__img-wrap { aspect-ratio: 1; }
.cl-grid__item[hidden] { display: none; }

/* Empty state */
.cl-grid__empty {
  text-align: center;
  padding: 3rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.cl-grid__empty-title {
  color: var(--pdp-text-muted, #71717a);
  font-size: 0.9375rem;
  margin: 0;
}

/* Load More */
.cl-grid__load-more {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}
/* An author `display` beats the UA stylesheet's [hidden]{display:none}, so the
   JS setting .hidden = true on these left them fully visible and clickable.
   On the last page the button therefore stayed up with its href frozen at the
   final ?page=N, and every further click re-fetched and re-appended that same
   page (Iris, 2026-08-10: "it always repeats the last two products").
   .cl-grid__item[hidden] below already carries this guard; these two were
   missed. Any new element toggled via .hidden needs the same pairing. */
.cl-grid__load-more[hidden],
.cl-grid__load-btn[hidden] { display: none; }
.cl-grid__load-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  border: 1.5px solid var(--color-text, #1a1a2e);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.cl-grid__load-btn:hover {
  background: var(--color-text, #1a1a2e);
  color: #fff;
}
.cl-grid__loading svg {
  animation: clGridSpin 0.8s linear infinite;
  color: var(--pdp-text-muted, #71717a);
}

/* ── Drawer overlay backdrop (all viewports) ── */
.cl-grid__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.cl-grid__overlay[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* Body lock when drawer open */
/* Scroll locking lives in assets/nf-scroll-lock.js. Attribute kept as a state hook. */

/* Mobile col count */
@media (max-width: 989px) {
  .cl-grid__products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 749px) {
  .cl-grid__products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 0.75rem;
  }
  .cl-grid__header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .cl-grid__chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }
  .cl-grid__chips::-webkit-scrollbar { display: none; }
}
/* END_SECTION:main-collection */

/* START_SECTION:main-page (INDEX:56) */
.page-default {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: #ffffff;
}

.page-default__container {
  max-width: var(--pdp-container, 72rem);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.page-default__title {
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.5rem;
}

/* Prose measure: long-form text should not run the full container width */
.page-default__content {
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-foreground-secondary, #3d3d56);
}

.page-default__content h2 {
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 2rem 0 0.75rem;
  color: var(--color-foreground, #1a1a2e);
}

.page-default__content h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-foreground, #1a1a2e);
}

.page-default__content p {
  margin: 0 0 1rem;
}

.page-default__content ul,
.page-default__content ol {
  margin: 0 0 1rem;
  padding-inline-start: 1.5rem;
}

.page-default__content li {
  margin-bottom: 0.375rem;
}

.page-default__content a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.page-default__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card, 14px);
}

.page-default__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1rem;
}

.page-default__content th,
.page-default__content td {
  border: 1px solid var(--color-border, #e4e3de);
  padding: 0.5rem 0.75rem;
  text-align: start;
}
/* END_SECTION:main-page */

/* START_SECTION:main-password (INDEX:57) */
.main-password { display: flex; align-items: center; justify-content: center; min-height: 60vh; text-align: center; }
.main-password__inner { max-width: 400px; }
.main-password__title { font-size: 2rem; font-weight: 700; margin: 0 0 1rem; }
.main-password__message { color: #666; margin: 0 0 1.5rem; }
.main-password__form { display: flex; gap: 0.5rem; }
.main-password__input { flex: 1; padding: 0.75rem 1rem; border: 1px solid #ddd; border-radius: var(--radius-button, 6px); font-size: 0.875rem; }
.main-password__btn { padding: 0.75rem 1.5rem; background: #1a1a2e; color: #fff; border: none; border-radius: var(--radius-button, 6px); font-weight: 600; cursor: pointer; }
.main-password__error { color: #e63946; font-size: 0.8125rem; margin-top: 0.5rem; }
/* END_SECTION:main-password */

/* START_SECTION:main-search (INDEX:61) */
/* ═══════════════════════════════════════════════
   SEARCH PAGE
   ═══════════════════════════════════════════════ */

.search-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 4rem;
}

/* ── Breadcrumb ── */
.search-page__breadcrumb ol {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1.5rem;
  list-style: none;
  font-size: 0.875rem;
  color: var(--color-text-secondary, #666);
}
.search-page__breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-inline-start: 0.5rem;
}
.search-page__breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.search-page__breadcrumb a:hover {
  text-decoration: underline;
}
.search-page__breadcrumb [aria-current="page"] {
  color: var(--color-text, #1a1a2e);
}

/* ── Search bar ── */
.search-page__form {
  margin-bottom: 2rem;
}
.search-page__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-button);
  padding: 0.625rem 0.625rem 0.625rem 1.25rem;
  transition: border-color 0.2s;
}
.search-page__input-wrap:focus-within {
  border-color: var(--color-text, #1a1a2e);
}
.search-page__icon {
  flex-shrink: 0;
  color: var(--color-text-secondary, #999);
}
.search-page__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text, #1a1a2e);
  outline: none;
  min-width: 0;
}
.search-page__input::placeholder {
  color: var(--color-text-secondary, #999);
}
.search-page__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary, #999);
  padding: 0.25rem;
  flex-shrink: 0;
}
.search-page__clear:hover {
  color: var(--color-text, #1a1a2e);
}
.search-page__submit {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  background: var(--color-primary, #1a1a2e);
  color: var(--color-primary-text, #fff);
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.search-page__submit:hover {
  opacity: 0.85;
}

/* ── Results count ── */
.search-page__count {
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #666);
  margin-bottom: 1.5rem;
}

/* ── Results grid ── */
.search-page__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 989px) {
  .search-page__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 549px) {
  .search-page__grid { grid-template-columns: 1fr; }
}

/* Override product card fixed width inside grid */
.search-page__grid .nf-card--l {
  width: 100%;
}

/* ── Fade-in animation ── */
.search-page__fade-in {
  opacity: 0;
  transform: translateY(8px);
  animation: searchFadeIn 240ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes searchFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Article card ── */
.search-page__article-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--color-border, #eee);
  background: var(--color-secondary, #f5f4f0);
  transition: border-color 0.2s;
}
.search-page__article-card:hover {
  border-color: var(--color-text, #1a1a2e);
}
.search-page__article-img-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.search-page__article-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.search-page__article-card:hover .search-page__article-img {
  transform: scale(1.04);
}
.search-page__article-info {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.search-page__type-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #999);
}
.search-page__article-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  color: var(--color-text, #1a1a2e);
}
.search-page__article-excerpt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #666);
  margin: 0;
}
.search-page__read-more {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  margin-top: 0.25rem;
}

/* ── Page card ── */
.search-page__page-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 0.75rem;
  border: 1px solid var(--color-border, #eee);
  background: var(--color-secondary, #f5f4f0);
  transition: border-color 0.2s;
}
.search-page__page-card:hover {
  border-color: var(--color-text, #1a1a2e);
}
.search-page__page-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.search-page__page-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, #1a1a2e);
}
.search-page__page-excerpt {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #666);
  margin: 0;
}

/* ── Pagination ── */
.search-page__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  margin-top: 3rem;
}
.search-page__page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #1a1a2e);
  text-decoration: none;
  transition: background 0.2s;
}
.search-page__page-link:hover {
  background: var(--color-secondary, #f5f4f0);
}
.search-page__page-link--current {
  background: var(--color-primary, #1a1a2e);
  color: var(--color-primary-text, #fff);
}
.search-page__page-link--gap {
  color: var(--color-text-secondary, #999);
}

/* ── Empty state ── */
.search-page__empty {
  text-align: center;
  padding: 3rem 1rem;
}
.search-page__empty-icon {
  color: var(--color-text-secondary, #ccc);
  margin-bottom: 1rem;
}
.search-page__empty-heading {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--color-text, #1a1a2e);
}
.search-page__suggestions {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #666);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.search-page__browse {
  margin-top: 2rem;
}
.search-page__browse-label {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #999);
  margin-bottom: 0.75rem;
}
.search-page__browse-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.search-page__browse-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text, #1a1a2e);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.search-page__browse-link:hover {
  background: var(--color-secondary, #f5f4f0);
  border-color: var(--color-text, #1a1a2e);
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .search-page__breadcrumb [aria-current="page"],
  .search-page__empty-heading,
  .search-page__article-title,
  .search-page__page-title,
  .search-page__read-more,
  .search-page__page-link,
  .search-page__browse-link {
    color: #f0f0f5;
  }
  .search-page__input {
    color: #f0f0f5;
  }
  .search-page__input-wrap {
    background: #1e1e22;
    border-color: #333;
  }
  .search-page__article-card,
  .search-page__page-card {
    background: #1e1e22;
    border-color: #333;
  }
  .search-page__article-card:hover,
  .search-page__page-card:hover {
    border-color: #666;
  }
  .search-page__page-link--current {
    background: #f0f0f5;
    color: #1a1a2e;
  }
  .search-page__browse-link {
    border-color: #444;
  }
  .search-page__browse-link:hover {
    background: #2a2a2e;
    border-color: #888;
  }
}
/* END_SECTION:main-search */

/* START_SECTION:manual-grid (INDEX:62) */
.manual-grid { padding: 3rem 0 4rem; }
.manual-grid__container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.manual-grid__header { text-align: center; margin-bottom: 3rem; }
.manual-grid__title { font-size: 2rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.5rem; }
.manual-grid__subtitle { font-size: 1rem; color: #666; margin: 0; max-width: 600px; margin-inline: auto; }

.manual-grid__category { margin-bottom: 2.5rem; }
.manual-grid__category-title {
  font-size: 1.125rem; font-weight: 600; color: #1a1a2e;
  margin: 0 0 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}

.manual-grid__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.25rem;
}

.manual-grid__card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #eee; border-radius: var(--radius-card);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.manual-grid__card:hover {
  border-color: #ccc;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.manual-grid__card-img {
  aspect-ratio: 1; background: #f5f5f5;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.manual-grid__card-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.manual-grid__card-placeholder { color: #ccc; }

.manual-grid__card-info { padding: 0.75rem 1rem 1rem; }
.manual-grid__card-title {
  font-size: 0.875rem; font-weight: 600; color: #1a1a2e;
  margin: 0 0 0.25rem; line-height: 1.3;
}
.manual-grid__card-link {
  font-size: 0.75rem; color: var(--color-brand-green, #48A06A); font-weight: 500;
  display: inline-flex; align-items: center; gap: 2px;
}

@media (max-width: 767px) {
  .manual-grid__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .manual-grid__title { font-size: 1.5rem; }
}
/* END_SECTION:manual-grid */

/* START_SECTION:manual-steps (INDEX:63) */
.manual-steps {
    --ms-green: var(--color-brand-green, #51BD7A);
    --ms-dark: #1a1a2e;
    --ms-text: var(--color-foreground, #1a1a2e);
    --ms-bg: #ffffff;
    --ms-card-bg: #ffffff;
    --ms-card-border: #e2e2e2;
    --ms-muted: #6b6e70;
    padding: 64px 24px;
  }

  .manual-steps--dark {
    --ms-bg: #1a1a2e;
    --ms-card-bg: #252540;
    --ms-card-border: #3a3a55;
    --ms-text: #f0f0f0;
    --ms-muted: #b0b0b8;
  }

  .manual-steps {
    background-color: var(--ms-bg);
    color: var(--ms-text);
  }

  .manual-steps__container {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ---- Hero ---- */
  .manual-steps__hero {
    text-align: center;
    margin-bottom: 48px;
  }

  .manual-steps__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-green);
    margin: 0 0 12px;
  }

  .manual-steps__heading {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--ms-text);
  }

  .manual-steps__intro {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ms-muted);
    max-width: 640px;
    margin: 0 auto;
  }

  /* ---- Steps grid ---- */
  .manual-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
  }

  .manual-steps__card {
    background: var(--ms-card-bg);
    border: 1px solid var(--ms-card-border);
    border-radius: var(--radius-card);
    padding: 32px 24px;
    text-align: center;
  }

  .manual-steps__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--ms-green);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 16px;
  }

  .manual-steps__card-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ms-text);
  }

  .manual-steps__card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ms-muted);
    margin: 0;
  }

  /* ---- CTA ---- */
  .manual-steps__cta {
    text-align: center;
  }

  .manual-steps__download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1.5px solid var(--ms-green);
    border-radius: var(--radius-button);
    color: var(--ms-green);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .manual-steps__download:hover {
    background-color: var(--ms-green);
    color: #ffffff;
  }

  .manual-steps__download-icon {
    flex-shrink: 0;
  }

  /* ---- Responsive ---- */
  @media screen and (max-width: 768px) {
    .manual-steps {
      padding: 48px 16px;
    }

    .manual-steps__heading {
      font-size: 28px;
    }

    .manual-steps__grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
/* END_SECTION:manual-steps */

/* START_SECTION:market-suggestion (INDEX:64) */
.mp {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  z-index: 100;
  background: #F7F7F8;
  color: #1a1a2e;
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.mp[hidden] { display: none; }
.mp.mp--visible { max-height: 200px; }

.mp__form {
  margin: 0;
  width: 100%;
}

.mp__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  padding: 0.85rem 1.25rem;
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.mp__flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.mp__heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: #1a1a2e;
  flex: 0 1 auto;
}
.mp__heading[hidden] { display: none; }

/* Language select — minimal native control styled to match the bar */
.mp__lang-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.mp__lang-select-wrap[hidden] { display: none; }
.mp__lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0.5rem 2rem 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mp__lang-select:hover { border-color: rgba(0, 0, 0, 0.25); }
.mp__lang-select:focus { outline: none; border-color: var(--color-brand-green, #48A06A); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand-green, #48A06A) 18%, transparent); }
.mp__lang-select-chevron {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  color: #555;
  pointer-events: none;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mp__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.mp__cta:hover { background: #45a468; }
.mp__cta:active { transform: scale(0.98); }
.mp__cta svg { transition: transform 0.2s ease; }
.mp__cta:hover svg { transform: translateX(2px); }
.mp__cta span[hidden] { display: none; }

.mp__close {
  background: transparent;
  border: none;
  color: rgba(26, 26, 46, 0.5);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.mp__close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a2e;
}

@media (max-width: 640px) {
  .mp__inner {
    padding: 0.7rem 0.85rem;
    gap: 0.5rem 0.75rem;
  }
  .mp__heading { font-size: 0.8125rem; flex: 1 1 100%; order: 2; }
  .mp__flag { order: 1; }
  .mp__lang-select-wrap { order: 3; flex-shrink: 0; }
  .mp__cta { font-size: 0.8125rem; padding: 0.5rem 0.85rem; order: 4; flex: 1; }
  .mp__close { order: 5; }
}

/* ── Editor: only hide editor-only previews when section is NOT actively selected ── */
.shopify-section:not(.shopify-section-active) .mp.mp--editor-only {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mp,
  .mp__cta,
  .mp__cta svg,
  .mp__close,
  .mp__lang-select {
    transition: none;
  }
}
/* END_SECTION:market-suggestion */

/* START_SECTION:mood-switcher (INDEX:65) */
/* ──────────────────────────────────────────────────────────────
   Mood Switcher — visually identical to story-card.liquid
   except for the bottom pill switcher + image-stack mechanic.
   Typography, spacing, min-heights, overlay all match. */

.mood-switcher {
  max-width: var(--pdp-container, 72rem);
  margin-inline: auto;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ms-text, #fff);
}
@media (min-width: 768px) {
  .mood-switcher { min-height: 480px; }
}

.mood-switcher__bg-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ms-bg-fallback, #1a1a2e);
}

/* ── Media — stack, fade between ── */
.mood-switcher__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  /* Subtle blur masks the double-exposure while both moods are co-present
     mid-crossfade (both filter and opacity are compositable) */
  filter: blur(2px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.mood-switcher__media.is-active {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

.mood-switcher__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mood-switcher__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / var(--ms-overlay, 0.35));
  pointer-events: none;
}

/* ── Content (identical to story-card__content) ── */
.mood-switcher__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  max-width: 700px;
}

.mood-switcher__category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35em 1em;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-md);
  color: inherit;
}

.mood-switcher__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

.mood-switcher__desc {
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: var(--line-height-base);
  opacity: 0.85;
  margin-bottom: var(--space-xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.mood-switcher__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-default);
}
.mood-switcher__link:hover { opacity: 0.7; }

/* ── Pill switcher (bottom center) ── */
.mood-switcher__pill {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.75rem);
  transform: translateX(-50%);
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  max-width: calc(100% - 2rem);
}
/* Dark text mode → swap pill to dark glass */
.mood-switcher[style*="--ms-text: var(--color-text)"] .mood-switcher__pill {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(0, 0, 0, 0.08);
}

.mood-switcher__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.6875rem 1.5rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
  line-height: 1.25;
}
.mood-switcher__tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.mood-switcher__tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mood-switcher__tab.is-active {
  background: #fff;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* Dark text mode → inactive tab text uses --color-text */
.mood-switcher[style*="--ms-text: var(--color-text)"] .mood-switcher__tab { color: rgba(26,26,46,0.7); }
.mood-switcher[style*="--ms-text: var(--color-text)"] .mood-switcher__tab:hover { color: var(--color-text); }
.mood-switcher[style*="--ms-text: var(--color-text)"] .mood-switcher__tab.is-active { background: var(--color-text); color: #fff; }

/* ── Mobile ── */
@media (max-width: 749px) {
  .mood-switcher__pill {
    bottom: 0.875rem;
    padding: 0.3125rem;
    gap: 0.125rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mood-switcher__pill::-webkit-scrollbar { display: none; }
  .mood-switcher__tab {
    font-size: 0.75rem;
    padding: 0.5625rem 1.125rem;
    scroll-snap-align: start;
  }
  /* Extra padding-bottom on the content so the heading doesn't sit behind the pill */
  .mood-switcher__content {
    padding-bottom: calc(var(--space-3xl) + 1.5rem);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mood-switcher__media { transition: none; }
}
/* END_SECTION:mood-switcher */

/* START_SECTION:newsroom-press-kits (INDEX:66) */
/* ── Newsroom: Press Kits ── */
.newsroom-kits {
  padding: var(--space-3xl) 0;
}

.newsroom-kits__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.newsroom-kits__heading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
}

.newsroom-kits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.newsroom-kits__card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
}

.newsroom-kits__image-wrap {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f5f5f5;
}

.newsroom-kits__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsroom-kits__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
}

.newsroom-kits__product {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.newsroom-kits__files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.newsroom-kits__file-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  transition: background 0.15s ease;
}

.newsroom-kits__file-link:hover {
  background: var(--color-surface-alt);
}

.newsroom-kits__file-label {
  font-weight: 500;
}

.newsroom-kits__file-size {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  background: var(--color-surface-alt);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.newsroom-kits__download-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-top: auto;
  transition: background 0.15s ease;
}

.newsroom-kits__download-all:hover {
  background: #3d9a3b;
}

@media (min-width: 768px) {
  .newsroom-kits__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .newsroom-kits__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* END_SECTION:newsroom-press-kits */

/* START_SECTION:newsroom-press-quotes (INDEX:67) */
/* ── Newsroom: Press Quotes ── */
.newsroom-quotes {
  padding: var(--space-3xl) 0;
  background: var(--color-surface-alt);
}

.newsroom-quotes__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.newsroom-quotes__heading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
}

.newsroom-quotes__track {
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
}

.newsroom-quotes__track::-webkit-scrollbar {
  display: none;
}

.newsroom-quotes__card {
  flex: 0 0 min(400px, 85vw);
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--color-surface);
}

.newsroom-quotes__text {
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: 1.6;
  color: var(--color-text);
  margin: 0;
  flex: 1;
}
.newsroom-quotes__text > * { margin: 0; }
.newsroom-quotes__text > :first-child::before { content: "\201C"; }
.newsroom-quotes__text > :last-child::after { content: "\201D"; }

.newsroom-quotes__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.newsroom-quotes__source {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.newsroom-quotes__logo-wrap {
  width: 80px;
  flex-shrink: 0;
}

.newsroom-quotes__logo {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
}

.newsroom-quotes__source-name {
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.newsroom-quotes__article-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand-green, #51BD7A);
  text-decoration: none;
}

.newsroom-quotes__article-link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .newsroom-quotes__track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .newsroom-quotes__card {
    flex: unset;
  }
}

@media (min-width: 1024px) {
  .newsroom-quotes__track {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* END_SECTION:newsroom-press-quotes */

/* START_SECTION:newsroom-releases (INDEX:68) */
/* ── Newsroom: Press Releases ── */
.newsroom-releases {
  padding: var(--space-3xl) 0;
}

.newsroom-releases__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.newsroom-releases__heading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
}

.newsroom-releases__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--space-sm);
}

.newsroom-releases__track::-webkit-scrollbar {
  display: none;
}

.newsroom-releases__card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  transition: box-shadow 0.2s ease;
}

.newsroom-releases__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.newsroom-releases__image-wrap {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}

.newsroom-releases__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.newsroom-releases__date {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.newsroom-releases__title {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}

.newsroom-releases__title-link {
  color: inherit;
  text-decoration: none;
}

.newsroom-releases__title-link:hover {
  text-decoration: underline;
}

.newsroom-releases__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-brand-green, #48A06A);
  text-decoration: none;
  margin-top: auto;
}

.newsroom-releases__link:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .newsroom-releases__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }

  .newsroom-releases__card {
    flex: unset;
  }
}

@media (min-width: 1024px) {
  .newsroom-releases__track {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* END_SECTION:newsroom-releases */

/* START_SECTION:page-app-hero (INDEX:69) */
/* ═══════════════════════════════════════
   APP HERO — split layout for app pages
   ═══════════════════════════════════════ */
.app-hero {
  background: var(--app-hero-bg, #f7f7f8);
  padding: 5rem 0;
  overflow: hidden;
}
.app-hero__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* ── App badge ── */
.app-hero__app-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.app-hero__app-icon {
  border-radius: 0.75rem;
}
.app-hero__app-icon-fallback {
  display: flex;
}
.app-hero__app-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Text ── */
.app-hero__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.25rem;
}
.app-hero__description {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-body-text, #555);
  margin: 0 0 2rem;
  max-width: 36rem;
}

/* ── Download buttons ── */
.app-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.app-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: #1a1a2e;
  color: #fff;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-button);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.app-hero__btn:hover {
  background: #2a2a3e;
  transform: translateY(-1px);
}
.app-hero__dl {
  opacity: 0.55;
  flex: 0 0 auto;
}

/* ── System requirements ── */
.app-hero__sys-req {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  line-height: 1.5;
  margin: 0;
  max-width: 30rem;
}

/* ── Media ── */
@media (min-width: 750px) {
  .app-hero--media-left .app-hero__media { order: -1; }
}
.app-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-hero__image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.app-hero__placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: rgba(0,0,0,0.04);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .app-hero { padding: 3rem 0; }
  .app-hero__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .app-hero__text { order: 1; }
  .app-hero__media { order: 2; }
  .app-hero__heading { font-size: 1.75rem; }
  .app-hero__buttons { flex-direction: column; }
  .app-hero__btn { justify-content: center; }
}
/* END_SECTION:page-app-hero */

/* START_SECTION:page-breadcrumb (INDEX:70) */
.page-breadcrumb {
  padding-top: 24px;
  padding-bottom: 4px;
}
.page-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #6b6b76);
}
.page-breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }
.page-breadcrumb__item:not(:last-child)::after {
  content: "/";
  color: var(--color-text-secondary, #b5b5bd);
}
.page-breadcrumb__item a {
  color: inherit;
  text-decoration: none;
}
.page-breadcrumb__item a:hover { color: var(--color-text, #131329); text-decoration: underline; text-underline-offset: 2px; }
.page-breadcrumb__item[aria-current="page"] { color: var(--color-text, #131329); font-weight: 500; }
/* END_SECTION:page-breadcrumb */

/* START_SECTION:page-declarations (INDEX:71) */
.declarations-page {
    padding: 60px 20px;
    background: #fff;
  }

  .declarations-container {
    max-width: 1000px;
    margin: 0 auto;
  }

  .declarations-heading {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    line-height: 1.2;
  }

  .declarations-subtitle {
    font-size: 16px;
    color: #666;
    margin: 0 0 40px;
    line-height: 1.5;
  }

  .declarations-table-heading {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 16px;
  }

  /* Desktop table */
  .declarations-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .declarations-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .declarations-table thead tr {
    background: #1a1a2e;
  }

  .declarations-table th {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 14px 20px;
    letter-spacing: 0.02em;
  }

  .declarations-table tbody tr {
    background: #fff;
    transition: background 0.15s ease;
  }

  .declarations-table tbody tr:nth-child(even) {
    background: #f8f8f8;
  }

  .declarations-table tbody tr:hover {
    background: #f0f0f0;
  }

  .declarations-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
  }

  .declarations-table tbody tr:last-child td {
    border-bottom: none;
  }

  .declarations-download-btn {
    display: inline-block;
    background: var(--color-brand-green, #48A06A);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: background 0.2s ease;
    white-space: nowrap;
  }

  .declarations-download-btn:hover {
    background: #3d9a3b;
    color: #fff;
  }

  .declarations-unavailable {
    color: #999;
  }

  /* Mobile cards - hidden on desktop */
  .declarations-cards {
    display: none;
  }

  .declarations-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-card);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  .declarations-card:nth-child(even) {
    background: #f8f8f8;
  }

  .declarations-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }

  .declarations-card-row:not(:last-child) {
    border-bottom: 1px solid #eee;
  }

  .declarations-card-label {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .declarations-card-value {
    font-size: 14px;
    color: #333;
    text-align: right;
  }

  .declarations-empty {
    font-size: 15px;
    color: #999;
    text-align: center;
    padding: 40px 0;
  }

  @media screen and (max-width: 749px) {
    .declarations-page {
      padding: 40px 16px;
    }

    .declarations-heading {
      font-size: 26px;
    }

    .declarations-table-wrapper {
      display: none;
    }

    .declarations-cards {
      display: block;
    }
  }
/* END_SECTION:page-declarations */

/* START_SECTION:page-security (INDEX:72) */
.security-page {
    --security-green: var(--color-brand-green, #48A06A);
    --security-green-dark: #3d9e3a;
    --security-green-light: var(--color-brand-green, #48A06A);
    --security-dark: #1a1a2e;
  }

  .security-hero {
    background: var(--security-dark);
    padding: 60px 20px 0;
    text-align: center;
  }

  .security-hero__inner {
    max-width: 900px;
    margin: 0 auto;
  }

  .security-hero__heading {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.2;
  }

  .security-hero__description {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
  }

  .security-tabs {
    display: inline-flex;
    gap: 0;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
  }

  .security-tab {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .security-tab:hover {
    background: rgba(255, 255, 255, 0.35);
  }

  .security-tab--active {
    background: #fff;
    color: var(--security-dark);
  }

  .security-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 60px;
  }

  .security-panel {
    display: none;
  }

  .security-panel--active {
    display: block;
  }

  .security-panel[hidden] {
    display: none;
  }

  .security-panel__heading {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--security-dark);
    margin: 0 0 24px;
  }

  .security-panel__body.rte {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
  }

  .security-panel__body.rte ul,
  .security-panel__body.rte ol {
    padding-left: 24px;
    margin: 16px 0;
  }

  .security-panel__body.rte li {
    margin-bottom: 8px;
  }

  .security-panel__body.rte a {
    color: var(--security-green);
    text-decoration: underline;
  }

  .security-panel__empty {
    color: #666;
    font-size: 1rem;
    padding: 40px 0;
    text-align: center;
  }

  /* PGP Key */
  .pgp-key {
    margin-top: 32px;
    border: 1px solid #e0e0e0;
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .pgp-key__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: #f7f7f7;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--security-dark);
    transition: background 0.2s ease;
  }

  .pgp-key__toggle:hover {
    background: #efefef;
  }

  .pgp-key__chevron {
    transition: transform 0.2s ease;
  }

  .pgp-key__toggle[aria-expanded="true"] .pgp-key__chevron {
    transform: rotate(180deg);
  }

  .pgp-key__block {
    padding: 0 20px 20px;
    background: #fafafa;
  }

  .pgp-key__block[hidden] {
    display: none;
  }

  .pgp-key__pre {
    background: #1a1a2e;
    color: #e0e0e0;
    padding: 20px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 16px 0 12px;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .pgp-key__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: var(--security-green);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
  }

  .pgp-key__copy:hover {
    background: var(--security-green-dark);
  }

  /* Fixed Issues Table */
  .fixed-issues-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fixed-issues-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }

  .fixed-issues-table thead th {
    text-align: left;
    padding: 12px 16px;
    background: #f7f7f7;
    font-weight: 700;
    color: var(--security-dark);
    border-bottom: 2px solid #e0e0e0;
    white-space: nowrap;
  }

  .fixed-issues-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    color: #333;
    vertical-align: top;
    line-height: 1.5;
  }

  .fixed-issues-table__date {
    white-space: nowrap;
    min-width: 120px;
    font-weight: 600;
  }

  .fixed-issues-table__desc {
    min-width: 250px;
  }
  /* Reset richtext <p> margin inside the table cell so rows don't grow. */
  .fixed-issues-table__desc > * { margin: 0; }

  .fixed-issues-table__release {
    min-width: 140px;
  }

  .fixed-issues-table__link {
    display: inline-block;
    margin-top: 4px;
    color: var(--security-green);
    text-decoration: underline;
    font-size: 0.88rem;
  }

  .fixed-issues-table tbody tr:hover {
    background: #fafafa;
  }

  @media (max-width: 600px) {
    .security-hero {
      padding: 40px 16px 0;
    }

    .security-hero__heading {
      font-size: 1.6rem;
    }

    .security-hero__description {
      font-size: 0.95rem;
    }

    .security-tab {
      padding: 12px 20px;
      font-size: 0.78rem;
    }

    .security-content {
      padding: 28px 16px 40px;
    }

    .security-panel__heading {
      font-size: 1.3rem;
    }

    .fixed-issues-table {
      font-size: 0.85rem;
    }

    .fixed-issues-table thead th,
    .fixed-issues-table tbody td {
      padding: 10px 12px;
    }
  }
/* END_SECTION:page-security */

/* START_SECTION:patents-list (INDEX:73) */
.patents {
  padding-block: var(--pdp-section-pad-y, 3rem);
  color: var(--color-foreground, #1a1a2e);
}
.patents__wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .patents__wrap { padding-inline: var(--pdp-gutter, 2rem); }
}

.patents__intro {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--pdp-text-muted, #5a5a6a);
  margin-bottom: 1.25rem;
}
.patents__intro p:last-child { margin-bottom: 0; }

.patents__notice {
  background: #f7f7f8;
  border-inline-start: 3px solid var(--color-foreground, #1a1a2e);
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pdp-text-muted, #5a5a6a);
  border-radius: 0 var(--pdp-radius-card, 14px) var(--pdp-radius-card, 14px) 0;
  margin: 0 0 2.75rem;
}
.patents__notice p:last-child { margin-bottom: 0; }

.patents__group { margin-bottom: 2.5rem; }

.patents__cat {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green, #51BD7A);
  margin: 0 0 0.5rem;
  padding-bottom: 0.625rem;
  border-bottom: 2px solid var(--color-foreground, #1a1a2e);
}

.patents__entry {
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--color-border, #e6e6e6);
}
.patents__entry:last-child { border-bottom: none; }

.patents__products {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary, #555);
}
.patents__products-label {
  font-weight: 600;
  color: var(--color-text, #131329);
}

.patents__entry-title {
  font-family: var(--font-heading, inherit);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 0.625rem;
  color: var(--color-foreground, #1a1a2e);
}

.patents__rights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}
.patents__right {
  font-size: 0.875rem;
  background: #fafafa;
  border: 1px solid var(--color-border, #e6e6e6);
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  color: var(--color-foreground, #1a1a2e);
  white-space: nowrap;
}
.patents__right--pending {
  background: #f7f7f8;
  color: var(--pdp-text-muted, #6f6f7d);
  font-style: italic;
}

.patents__footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border, #e6e6e6);
  color: var(--pdp-text-muted, #6f6f7d);
  font-size: 0.85rem;
  line-height: 1.6;
}
.patents__footer-line { margin: 0 0 0.375rem; }
.patents__footer-line:last-child { margin-bottom: 0; }
.patents__footer-line p { margin: 0; }

.patents__empty {
  max-width: 52rem;
  margin: 1.5rem auto;
  padding: 1.25rem 1.5rem;
  border: 2px dashed #b9b9b9;
  border-radius: 10px;
  background: #fbfbfb;
  color: #4a4a4a;
  font-size: 0.9rem;
  line-height: 1.5;
  display: grid;
  gap: 0.375rem;
}
.patents__empty code { background: #eee; padding: 0.05rem 0.35rem; border-radius: 4px; }

@media (max-width: 749px) {
  .patents__right { white-space: normal; }
}
/* END_SECTION:patents-list */

/* START_SECTION:pdp-app-download (INDEX:75) */
/* Chameleon section: inherits predecessor's background, collapses margins */
  .pdp-app-cta-section {
    margin-top: 0 !important;
    padding: 0;
    background-color: #fff;
  }
  .theme-dark .pdp-app-cta-section {
    background-color: #1e1e21;
  }
  /* On PDP, also paint the preceding reviews wrapper white */
  .pdp-reviews-section {
    background-color: #fff;
  }
  .theme-dark .pdp-reviews-section {
    background-color: #1e1e21;
  }
  .pdp-app-cta {
    padding-block: 12px 2rem;
  }

  .pdp-app-cta__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-xl, 1rem);
    min-height: 80px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }

  /* Background variants */
  .pdp-app-cta--light .pdp-app-cta__inner {
    background-color: #f8f7f4;
    color: #1a1a2e;
  }

  .pdp-app-cta--dark .pdp-app-cta__inner {
    background-color: #1a1a2e;
    color: #f8f7f4;
  }

  .pdp-app-cta--accent .pdp-app-cta__inner {
    background-color: var(--color-brand-green, #48A06A);
    color: #fff;
  }

  /* Icon */
  .pdp-app-cta__icon {
    flex-shrink: 0;
  }

  .pdp-app-cta__icon img {
    width: 40px;
    height: 40px;
    border-radius: 0.5rem;
    object-fit: cover;
  }

  /* Text */
  .pdp-app-cta__text {
    flex: 1;
    min-width: 0;
  }

  .pdp-app-cta__title {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
  }

  .pdp-app-cta__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0.125rem 0 0;
    opacity: 0.75;
  }

  /* Badges */
  .pdp-app-cta__badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .pdp-app-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-button);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    line-height: 1;
  }

  .pdp-app-cta__badge:hover {
    opacity: 0.8;
  }

  .pdp-app-cta__badge-icon {
    flex-shrink: 0;
  }

  /* Light / accent variant badges */
  .pdp-app-cta--light .pdp-app-cta__badge,
  .pdp-app-cta--accent .pdp-app-cta__badge {
    background-color: #1a1a2e;
    color: #fff;
  }

  /* Dark variant badges */
  .pdp-app-cta--dark .pdp-app-cta__badge {
    background-color: #fff;
    color: #1a1a2e;
  }

  /* Mobile: compact stack */
  @media screen and (max-width: 749px) {
    .pdp-app-cta__inner {
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
    }

    .pdp-app-cta__text {
      flex-basis: calc(100% - 56px);
    }

    .pdp-app-cta__badges {
      width: 100%;
    }

    .pdp-app-cta__badge {
      flex: 1;
      justify-content: center;
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
    }
  }
/* END_SECTION:pdp-app-download */

/* START_SECTION:pdp-background-video (INDEX:76) */
/* ── PDP Background Video — page-width contained card on desktop,
   full-bleed on mobile. Matches the new theme's framed-content rhythm
   (Comparison Table, Benefits, etc.) at desktop, falls back to edge-to-edge
   cinematic break on mobile. */
.pdp-bg-video {
  position: relative;
  width: 100%;
  background: transparent;
}

/* Mobile: full-bleed edge-to-edge (no container constraint) */
.pdp-bg-video__container {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.pdp-bg-video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 280px;
  overflow: hidden;
  background: #0a0a0a;
  border-radius: 0; /* mobile: no radius, full-bleed */
}

.pdp-bg-video__video,
.pdp-bg-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  border: 0;
}

/* Desktop: contain to page-width + add radius — reads as native to the
   new theme's "framed content" pattern. */
@media (min-width: 750px) {
  .pdp-bg-video__container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
  }
  .pdp-bg-video__frame {
    border-radius: 18px;
    min-height: 380px;
  }
}

@media (min-width: 1400px) {
  .pdp-bg-video { margin-block: var(--space-lg, 2rem); }
}
/* END_SECTION:pdp-background-video */

/* START_SECTION:pdp-before-after (INDEX:77) */
.pdp-before-after {
    padding: 4rem 0;
  }

  @media screen and (min-width: 750px) {
    .pdp-before-after {
      padding: 5rem 0;
    }
  }

  .pdp-before-after__inner {
    max-width: 56rem;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  /* Header */
  .pdp-before-after__header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  .pdp-before-after__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 0 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .pdp-before-after__title {
      font-size: 2.25rem;
    }
  }

  .pdp-before-after__subtitle {
    font-size: 0.9375rem;
    color: rgba(26, 26, 46, 0.55);
    margin: 0 auto;
    max-width: 480px;
    line-height: 1.6;
  }

  /* Slider container */
  .pdp-before-after__slider {
    display: block;
  }

  .pdp-before-after__container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl, 1rem);
    aspect-ratio: 16 / 9;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
  }

  @media screen and (max-width: 749px) {
    .pdp-before-after__container {
      aspect-ratio: 4 / 3;
    }
  }

  .pdp-before-after__container--active {
    cursor: grabbing;
  }

  /* Images */
  .pdp-before-after__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }

  .pdp-before-after__before-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }

  /* Handle */
  .pdp-before-after__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    outline: none;
  }

  .pdp-before-after__handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  }

  .pdp-before-after__handle-knob {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: #1a1a2e;
    transition: transform 150ms ease;
    z-index: 1;
  }

  .pdp-before-after__handle:hover .pdp-before-after__handle-knob,
  .pdp-before-after__handle:focus-visible .pdp-before-after__handle-knob {
    transform: scale(1.1);
  }

  .pdp-before-after__handle:focus-visible .pdp-before-after__handle-knob {
    outline: 2px solid #1a1a2e;
    outline-offset: 2px;
  }

  /* Labels */
  .pdp-before-after__label {
    position: absolute;
    top: 1rem;
    z-index: 4;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    pointer-events: none;
  }

  .pdp-before-after__label--before {
    left: 1rem;
  }

  .pdp-before-after__label--after {
    right: 1rem;
  }

  /* Demo placeholders — shown when no images uploaded */
  .pdp-before-after__demo-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .pdp-before-after__demo-panel--before {
    background: linear-gradient(135deg, #e8e5e0 0%, #d4d1cc 100%);
  }

  .pdp-before-after__demo-panel--after {
    background: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 100%);
  }

  .pdp-before-after__demo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(26, 26, 46, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  .pdp-before-after__demo-subtext {
    font-size: 0.75rem;
    color: rgba(26, 26, 46, 0.25);
    text-align: center;
    max-width: 200px;
  }

  /* Mobile */
  @media screen and (max-width: 749px) {
    .pdp-before-after__title {
      font-size: 1.5rem;
    }

    .pdp-before-after__header {
      margin-bottom: 1.5rem;
    }

    .pdp-before-after__handle-knob {
      width: 36px;
      height: 36px;
    }

    .pdp-before-after__handle-knob svg {
      width: 16px;
      height: 16px;
    }
  }
/* END_SECTION:pdp-before-after */

/* START_SECTION:pdp-benefits (INDEX:78) */
.pdp-benefits {
    padding-block: 4rem;
  }

  .pdp-benefits__header {
    text-align: center;
    margin-block-end: 3rem;
  }

  .pdp-benefits__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-block-end: 0.5rem;
  }

  .pdp-benefits__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground);
  }

  .pdp-benefits__subtitle {
    color: var(--color-text-muted);
    margin-block-start: 0.75rem;
    max-width: 42rem;
    margin-inline: auto;
    line-height: var(--line-height-base);
  }

  /* Desktop grid — auto-fit minmax keeps the row balanced 2/3/4 cards. */
  .pdp-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .pdp-benefits__card {
    text-align: left;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .pdp-benefits__image-wrapper {
    aspect-ratio: 4 / 5;
    background-color: var(--alt-bg, #f0efea);
    border-radius: 18px;
    overflow: hidden;
    margin: 0;
  }

  .pdp-benefits__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-benefits__card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--color-foreground);
    margin: 0 0 0.2rem;
  }

  .pdp-benefits__card-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
  }

  /* ── Mobile / tablet ── Horizontal swipe with snap + peek next card */
  @media screen and (max-width: 749px) {
    .pdp-benefits__grid {
      display: flex;
      grid-template-columns: none;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 1.25rem;
      gap: 1rem;
      padding-inline: 1.25rem;
      margin-inline: -1.25rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .pdp-benefits__grid::-webkit-scrollbar { display: none; }
    .pdp-benefits__card {
      flex: 0 0 75%;
      scroll-snap-align: start;
    }
    .pdp-benefits__card-title { text-align: left; }
    .pdp-benefits__card-desc { text-align: left; }
  }

  @media screen and (min-width: 750px) {
    .pdp-benefits {
      padding-block: 5rem;
    }
    .pdp-benefits__card { text-align: center; gap: 1rem; }
    .pdp-benefits__grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    /* Explicit column counts for tighter visual rhythm */
    .pdp-benefits[data-columns="2"] .pdp-benefits__grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 48rem;
      margin-inline: auto;
    }
    .pdp-benefits[data-columns="3"] .pdp-benefits__grid {
      grid-template-columns: repeat(3, 1fr);
    }
    .pdp-benefits[data-columns="4"] .pdp-benefits__grid {
      grid-template-columns: repeat(4, 1fr);
    }
    .pdp-benefits[data-columns="5"] .pdp-benefits__grid {
      grid-template-columns: repeat(5, 1fr);
    }
  }
/* END_SECTION:pdp-benefits */

/* START_SECTION:pdp-breadcrumb (INDEX:79) */
.pdp-breadcrumb-section {
  background: var(--color-background, #f5f5f0);
  margin: 0;
  padding: 0;
}
.pdp-breadcrumb {
  padding: 14px 0;
  background: var(--color-background, #f5f5f0);
}
.pdp-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary, #888);
  overflow: hidden;
}
.pdp-breadcrumb__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pdp-breadcrumb__item--current {
  flex-shrink: 1;
  min-width: 0;
}
.pdp-breadcrumb__item:not(:last-child)::after {
  content: '/';
  margin: 0 8px;
  color: var(--color-border, #ccc);
  font-size: 11px;
}
.pdp-breadcrumb__item a {
  color: var(--color-text-secondary, #888);
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
  width: fit-content;
}
.pdp-breadcrumb__item a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-foreground, #1a1a2e);
  transition: width 0.25s ease;
}
.pdp-breadcrumb__item a:hover {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none !important;
}
.pdp-breadcrumb__item a:hover::after {
  width: 100%;
}
.pdp-breadcrumb__item--current {
  color: var(--color-foreground, #1a1a2e);
  font-weight: 500;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* END_SECTION:pdp-breadcrumb */

/* START_SECTION:pdp-bundle-upsell (INDEX:80) */
/* ═══════════════════════════════════════
   BUNDLE UPSELL — matches App CTA design
   ═══════════════════════════════════════ */
/* Breaker section — blends with preceding section bg */
.pdp-bundle-section {
  margin-top: 0 !important;
  padding-top: 0;
}
.pdp-bundle {
  padding-block: 12px 2rem;
  position: relative;
   margin-top: -50px; /* Adjust as needed */
  z-index: 10;
}

/* When bundle follows a hero section — overlap it */
.shopify-section:has(.hero-bb) + .shopify-section > .pdp-bundle,
.shopify-section:has(.cl-hero) + .shopify-section > .pdp-bundle {
  margin-top: -1.5rem;
  padding-top: 0;
}
.pdp-bundle__container {
  max-width: 72rem;
  margin: 0 auto;
}
.pdp-bundle__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-xl, 1rem);
  min-height: 80px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0,0,0,0.02);
  color: #1a1a2e;
}
/* Dark scheme handled globally via body.theme-dark */

/* Icon / thumbnail */
.pdp-bundle__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 0.625rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
}
.pdp-bundle__icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pdp-bundle__icon svg {
  color: #999;
}

/* Text */
.pdp-bundle__text {
  flex: 1;
  min-width: 0;
}
.pdp-bundle__title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}
.pdp-bundle__title a {
  color: #1a1a2e;
  text-decoration: none;
}
.pdp-bundle__title a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-bundle__desc {
  font-size: 0.8125rem;
  line-height: 1.4;
  margin: 0.125rem 0 0;
  opacity: 0.75;
  color: #1a1a2e;
}
.pdp-bundle__compare {
  color: #999;
  text-decoration: line-through;
  font-weight: 400;
}

/* Badges / CTAs — same pattern as App CTA badges */
.pdp-bundle__badges {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pdp-bundle__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.pdp-bundle__badge:hover { opacity: 0.8; }
.pdp-bundle__badge-plus {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 0;
}
@media (hover: hover) {
  .pdp-bundle__badge--primary:hover .pdp-bundle__badge-plus {
    max-width: 1.25rem;
    opacity: 1;
    margin-right: 0.25rem;
  }
}
.pdp-bundle__badge--primary {
  background: #1a1a2e;
  color: #fff;
  border: none;
  font-weight: 600;
  overflow: hidden;
}
.pdp-bundle__badge--primary.is-adding {
  pointer-events: none;
  opacity: 0.7;
}
.pdp-bundle__badge--primary.is-added {
  background: var(--color-brand-green, #48A06A);
}
.pdp-bundle__badge--secondary {
  background: transparent;
  color: #1a1a2e;
  border: 1px solid rgba(0,0,0,0.15);
}
.pdp-bundle__badge--secondary:hover {
  border-color: #1a1a2e;
  opacity: 1;
}

/* ── Relevant bundles (fallback when no dedicated bundle is set) ── */
.pdp-bundle__rel {
  padding: 1.25rem 1.5rem;
  border: 1px solid #e8e6e1;
  border-radius: 1rem;
  background: #fff;
}
.pdp-bundle__rel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.pdp-bundle__rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.pdp-bundle__rel-card { min-width: 0; }
@media (max-width: 749px) {
  .pdp-bundle__rel-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 0.75rem;
  }
  .pdp-bundle__rel-card {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }
}

/* ── Tier fallback ── */
.pdp-bundle__inner--tiers {
  flex-wrap: wrap;
}
.pdp-bundle__tiers {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.pdp-bundle__tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  background: #f5f4f0;
  min-width: 56px;
}
.pdp-bundle__tier-pct {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a2e;
}
.pdp-bundle__tier-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: #1a1a2e;
  opacity: 0.6;
  white-space: nowrap;
}

/* ── Dark mode for bundle section ── */
.theme-dark .pdp-bundle__inner {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
  color: #f5f5f5;
}
.theme-dark .pdp-bundle__title { color: #f5f5f5; }
.theme-dark .pdp-bundle__desc { color: rgba(255,255,255,0.6); }
.theme-dark .pdp-bundle__tier {
  background: rgba(255,255,255,0.1);
}
.theme-dark .pdp-bundle__tier-pct { color: #f5f5f5; }
.theme-dark .pdp-bundle__tier-label { color: rgba(255,255,255,0.6); }
.theme-dark .pdp-bundle__badge--secondary {
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.3);
}
.theme-dark .pdp-bundle__badge--secondary:hover {
  border-color: #f5f5f5;
}
.theme-dark .pdp-bundle__badge--primary {
  background: #f5f5f5;
  color: #1a1a2e;
}

/* Mobile: compact stack */
@media screen and (max-width: 749px) {
  .pdp-bundle__inner {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem;
  }
  .pdp-bundle__badges {
    width: 100%;
    flex-direction: column;
  }
  .pdp-bundle__badge {
    width: 100%;
    justify-content: center;
    padding: 0.625rem 1rem;
  }
  /* Tier pills: horizontal row, equal width, centered */
  .pdp-bundle__tiers {
    width: 100%;
    justify-content: center;
  }
  .pdp-bundle__tier {
    flex: 1;
    min-width: 0;
  }
  .pdp-bundle__inner--tiers .pdp-bundle__badge {
    margin-top: 0.25rem;
  }
}
/* END_SECTION:pdp-bundle-upsell */

/* START_SECTION:pdp-buy-box (INDEX:81) */
.pdp-buy-box form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
}

.pdp-buy-box__variants {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.5rem);
}

.pdp-buy-box__variants-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a1a);
}

.pdp-buy-box__variant-select {
  width: 100%;
  padding: var(--space-sm, 0.75rem);
  font-size: var(--font-size-base, 1rem);
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-card, #fff);
  color: var(--color-foreground, #1a1a2e);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-inline-end: 2rem;
}

.pdp-buy-box__variant-select:focus-visible {
  outline: 2px solid var(--color-primary, #000);
  outline-offset: 2px;
}

.pdp-buy-box__quantity {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 0.5rem);
}

.pdp-buy-box__quantity-label {
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a1a);
}

.pdp-buy-box__quantity-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
  width: fit-content;
}

.pdp-buy-box__quantity-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-foreground, #1a1a1a);
  font-size: var(--font-size-lg, 1.25rem);
}

.pdp-buy-box__quantity-btn:hover {
  background-color: var(--color-surface, #f5f5f5);
}

.pdp-buy-box__quantity-btn:focus-visible {
  outline: 2px solid var(--color-primary, #000);
  outline-offset: -2px;
}

.pdp-buy-box__quantity-input {
  width: 52px;
  height: 44px;
  text-align: center;
  border: none;
  border-inline: 1px solid var(--color-border, #e5e5e5);
  font-size: var(--font-size-base, 1rem);
  font-weight: 500;
  color: var(--color-foreground, #1a1a1a);
  background: transparent;
  -moz-appearance: textfield;
}

.pdp-buy-box__quantity-input::-webkit-outer-spin-button,
.pdp-buy-box__quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdp-buy-box__price {
  font-size: var(--font-size-xl, 1.5rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a1a);
}

.pdp-buy-box__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: var(--space-sm, 0.75rem) var(--space-lg, 2rem);
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  background-color: var(--color-brand-green, #48A06A);
  color: #fff;
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
  position: relative;
  overflow: hidden;
}

.pdp-buy-box__add-btn:hover:not(:disabled) {
  background-color: var(--color-brand-green-hover, #44A168);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--color-brand-green, #48A06A) 50%, transparent);
  transform: translateY(-0.5px);
}

.pdp-buy-box__add-btn:active:not(:disabled) {
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
  transform: scale(0.97);
}

.pdp-buy-box__add-btn:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}

.pdp-buy-box__add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .pdp-buy-box__add-btn {
    max-width: 400px;
  }
}

/* Reduced motion = less motion, not zero feedback: movement goes, but the
   colour/opacity transitions that explain state changes are kept. */
@media (prefers-reduced-motion: reduce) {
  .pdp-buy-box__add-btn {
    transition: background-color 150ms ease, opacity 150ms ease;
  }
  .pdp-buy-box__add-btn:hover:not(:disabled),
  .pdp-buy-box__add-btn:active:not(:disabled) {
    transform: none;
  }
}
/* END_SECTION:pdp-buy-box */

/* START_SECTION:pdp-byo-kit (INDEX:82) */
.pdp-byo-kit {
    display: block;
    padding-block: 4rem;
  }

  .pdp-byo-kit__inner {
    max-width: 56rem;
    margin-inline: auto;
  }

  /* ── Section header (same pattern as pdp-benefits / unified PDP headers) ── */
  .pdp-byo-kit__header {
    text-align: center;
    max-width: 42rem;
    margin-inline: auto;
    margin-block-end: 2.5rem;
  }

  .pdp-byo-kit__eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pdp-brand-dark, var(--color-brand-green-dark, #38835a));
    margin-block-end: 0.75rem;
  }

  .pdp-byo-kit__title {
    font-family: var(--font-heading, inherit);
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    color: var(--color-foreground, #1a1a2e);
    margin: 0;
  }

  .pdp-byo-kit__subtitle {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--pdp-text-muted, var(--color-text-muted, #6f6f7d));
    line-height: 1.55;
    margin: 1rem auto 0;
  }

  /* ── Component rows card — 18px radius, white on the cream page bg ── */
  .pdp-byo-kit__rows {
    background: #fff;
    border: 1px solid var(--color-border, #e6e4de);
    border-radius: 18px;
    overflow: hidden;
  }

  .pdp-byo-kit__row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    transition: background-color 0.25s ease;
  }

  .pdp-byo-kit__row + .pdp-byo-kit__row {
    border-top: 1px solid var(--color-border, #ecebe6);
  }

  .pdp-byo-kit__row.is-selected {
    background: color-mix(in srgb, var(--color-brand-green, #51bd7a) 5%, #fff);
  }

  .pdp-byo-kit__media {
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--alt-bg, #f0efea);
    overflow: hidden;
    flex-shrink: 0;
  }

  .pdp-byo-kit__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .pdp-byo-kit__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem;
  }

  .pdp-byo-kit__placeholder svg {
    width: 100%;
    height: auto;
    opacity: 0.35;
  }

  .pdp-byo-kit__info {
    min-width: 0;
  }

  .pdp-byo-kit__name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.35;
    color: var(--color-foreground, #1a1a2e);
    margin: 0;
  }

  .pdp-byo-kit__price {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #5a5a6a);
    margin: 0.15rem 0 0;
    font-variant-numeric: tabular-nums;
  }

  .pdp-byo-kit__soldout {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b42318;
    background: #fef3f2;
    border-radius: var(--radius-full, 9999px);
    padding: 0.2em 0.7em;
    margin-block-start: 0.35rem;
  }

  .pdp-byo-kit__row--soldout .pdp-byo-kit__media,
  .pdp-byo-kit__row--soldout .pdp-byo-kit__name,
  .pdp-byo-kit__row--soldout .pdp-byo-kit__price {
    opacity: 0.55;
  }

  /* ── Quantity stepper — same pill pattern as pdp-hero__qty ── */
  .pdp-byo-kit__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.875rem;
  }

  .pdp-byo-kit__qty {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1.5px solid var(--color-border, #deddd8);
    border-radius: var(--radius-full, 9999px);
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
  }

  .pdp-byo-kit__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-foreground, #1a1a2e);
    transition: background 0.25s ease, color 0.25s ease;
    padding: 0;
  }

  .pdp-byo-kit__qty-btn:hover {
    background: color-mix(in srgb, var(--color-brand-green, #51bd7a) 10%, transparent);
    color: var(--color-brand-green, #51bd7a);
  }

  .pdp-byo-kit__qty-btn:active {
    background: color-mix(in srgb, var(--color-brand-green, #51bd7a) 16%, transparent);
    color: var(--color-brand-green, #51bd7a);
  }

  .pdp-byo-kit__qty-btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
    color: var(--color-foreground, #1a1a2e);
  }

  .pdp-byo-kit__qty-btn:focus-visible {
    outline: 2px solid var(--color-brand-green, #51bd7a);
    outline-offset: -2px;
  }

  .pdp-byo-kit__qty-input {
    width: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-foreground, #1a1a2e);
    -moz-appearance: textfield;
    appearance: textfield;
    padding: 0;
    line-height: 1;
  }

  .pdp-byo-kit__qty-input::-webkit-outer-spin-button,
  .pdp-byo-kit__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .pdp-byo-kit__qty-input:focus-visible {
    outline: 2px solid var(--color-brand-green, #51bd7a);
    outline-offset: -2px;
    border-radius: 4px;
  }

  /* Kept in the layout when hidden so the column width stays stable */
  .pdp-byo-kit__line-total {
    min-width: 4.5rem;
    text-align: right;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground, #1a1a2e);
    font-variant-numeric: tabular-nums;
    margin: 0;
  }

  .pdp-byo-kit__line-total[hidden] {
    display: block;
    visibility: hidden;
  }

  /* ── Summary bar ── */
  .pdp-byo-kit__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-block-start: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.5rem;
    background: #fff;
    border: 1px solid var(--color-border, #e6e4de);
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  }

  .pdp-byo-kit__summary-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .pdp-byo-kit__summary-count {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #5a5a6a);
    white-space: nowrap;
  }

  .pdp-byo-kit__summary-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground, #1a1a2e);
    font-variant-numeric: tabular-nums;
  }

  /* CTA — same treatment as pdp-hero__cta */
  .pdp-byo-kit__cta {
    position: relative;
    height: 52px;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background-color: var(--color-brand-green, #51bd7a);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: 0.01em;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #51bd7a) 40%, transparent);
    transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
  }

  .pdp-byo-kit__cta:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-green, #51bd7a) 55%, transparent);
    transform: translateY(-1px);
  }

  .pdp-byo-kit__cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #51bd7a) 40%, transparent);
  }

  .pdp-byo-kit__cta:disabled {
    background: #e4e4e7;
    color: #999;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
  }

  .pdp-byo-kit__cta:focus-visible {
    outline: 2px solid var(--color-foreground, #1a1a2e);
    outline-offset: 2px;
  }

  .pdp-byo-kit__cta-text {
    position: relative;
    z-index: 1;
    transition: opacity 0.2s;
  }

  .pdp-byo-kit__cta-loader,
  .pdp-byo-kit__cta-check {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
    font-weight: 600;
    font-size: 0.9375rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }

  .pdp-byo-kit__cta-loader[hidden],
  .pdp-byo-kit__cta-check[hidden] {
    display: none;
  }

  .pdp-byo-kit__cta.is-adding {
    background-color: var(--color-brand-green-dark, #38835a);
    color: #fff;
    box-shadow: 0 2px 12px color-mix(in srgb, var(--color-brand-green-dark, #38835a) 50%, transparent);
  }

  .pdp-byo-kit__cta.is-added {
    background-color: var(--color-brand-green, #51bd7a);
    color: #fff;
  }

  .pdp-byo-kit__cta.is-adding .pdp-byo-kit__cta-text,
  .pdp-byo-kit__cta.is-added .pdp-byo-kit__cta-text {
    opacity: 0;
  }

  .pdp-byo-kit__cta.is-adding .pdp-byo-kit__cta-loader,
  .pdp-byo-kit__cta.is-added .pdp-byo-kit__cta-check {
    opacity: 1;
  }

  .pdp-byo-kit__cta-loader svg {
    animation: pdp-byo-kit-spin 0.7s linear infinite;
  }

  @keyframes pdp-byo-kit-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ── Mobile — image left 72px, text right, controls below text.
        Summary sticks to the viewport bottom while inside the section. ── */
  @media screen and (max-width: 749px) {
    .pdp-byo-kit__row {
      grid-template-columns: 72px minmax(0, 1fr);
      row-gap: 0.75rem;
      padding: 1rem;
    }

    .pdp-byo-kit__media {
      grid-row: 1 / span 2;
      align-self: start;
    }

    .pdp-byo-kit__controls {
      grid-column: 2;
      justify-content: space-between;
    }

    .pdp-byo-kit__summary {
      position: sticky;
      bottom: 0.75rem;
      z-index: 4;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
      padding: 0.75rem 0.75rem 0.75rem 1.25rem;
    }

    .pdp-byo-kit__cta {
      flex: 1;
      min-width: 0;
      padding: 0 1.25rem;
    }
  }

  @media screen and (min-width: 750px) {
    .pdp-byo-kit {
      padding-block: 5rem;
    }

    .pdp-byo-kit__title {
      font-size: 2.5rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-byo-kit__row,
    .pdp-byo-kit__qty-btn,
    .pdp-byo-kit__cta,
    .pdp-byo-kit__cta-text,
    .pdp-byo-kit__cta-loader,
    .pdp-byo-kit__cta-check {
      transition: none;
    }

    .pdp-byo-kit__cta:hover {
      transform: none;
    }

    .pdp-byo-kit__cta-loader svg {
      animation: none;
    }
  }

  /* ── Editor-only empty-state notice (never shown to customers) ── */
  .pdp-byo-kit--editor {
    padding-block: 2rem;
  }

  .pdp-byo-kit__editor-msg {
    max-width: 56rem;
    margin-inline: auto;
    padding: 2.5rem 1.75rem;
    border: 1px dashed #c9c9c9;
    border-radius: 1rem;
    background: #fafafa;
    text-align: center;
    color: #6b6b6b;
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .pdp-byo-kit__editor-msg strong {
    color: var(--color-foreground, #1a1a2e);
    font-weight: 600;
  }

  .pdp-byo-kit__editor-sub {
    display: block;
    margin-top: 0.5rem;
  }

  .pdp-byo-kit__editor-steps {
    display: inline-block;
    text-align: left;
    margin: 0.85rem 0 0.75rem;
    padding-left: 1.25rem;
    max-width: 38rem;
  }

  .pdp-byo-kit__editor-steps li {
    margin: 0.3rem 0;
  }

  .pdp-byo-kit__editor-foot {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #9a9a9a;
  }

  .pdp-byo-kit__editor-msg code {
    background: #ececec;
    padding: 0.12em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--color-foreground, #1a1a2e);
  }
/* END_SECTION:pdp-byo-kit */

/* START_SECTION:pdp-comparison (INDEX:83) */
/* ────────────────────────────────────────────────────────
     Comparison Table — V3 floating featured card
     ────────────────────────────────────────────────────────
     Architecture:
       1. .comparison__inner wraps the table in a warm cream "canvas" with
          generous padding + border-radius. This is the FLAT comparison
          surface that the featured column floats above.
       2. The table itself is transparent — no bg, no outer border. Only
          hairline horizontal row dividers between cells.
       3. The featured Nanoleaf column visual is ONE positioned overlay
          (::before pseudo on .comparison__table-wrap) that extends 10px
          above + below the table. Solid white bg, brand-green border, drop
          shadow. This IS the featured card — cells inside the column have
          no per-cell bg/border, just text.
       4. A pill badge ("Smart Choice") sits centered ON the card's top
          border line (half above, half below).
     Column widths: feature 22% · nanoleaf 30% · competitors 24% each. */

  .comparison {
    padding-block: 4rem;
  }

  .comparison__header {
    text-align: center;
    margin-block-end: 3rem;
  }

  .comparison__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight, -0.02em);
    color: var(--color-foreground);
    margin-block-end: 0.75rem;
  }

  .comparison__subtitle {
    color: var(--color-text-muted);
    max-width: 36rem;
    margin-inline: auto;
    line-height: var(--line-height-base, 1.55);
  }

  /* Cream canvas — tight frame that hugs the table edge to edge. No
     vertical padding so the Nanoleaf column's overlay card can extend
     above + below the table cleanly without competing with canvas padding.
     Horizontal padding kept minimal for safe text breathing inside cells. */
  .comparison__inner {
    position: relative;
    background: #f7f7f8;
    border-radius: 18px;
    padding: 0 1rem;
    max-width: 56rem;
    margin-inline: auto;
    overflow: visible;
  }

  /* Anchor for the featured overlay card. overflow: visible at desktop so
     the pseudo's vertical extension renders. On mobile we switch this to
     overflow-x: auto and hide the pseudo (cell-level styling takes over). */
  .comparison__table-wrap {
    position: relative;
    overflow: visible;
  }

  /* The featured floating card — one element provides bg + border + radius
     + shadow + lift. Cells inside the column render content on top. With
     inner padding now zero, the card lift extends BEYOND the canvas top
     and bottom — that's intentional, makes the Nanoleaf column visually
     "rise" above the cream surface. */
  .comparison__table-wrap::before {
    content: '';
    position: absolute;
    top: -14px;
    bottom: -14px;
    /* Vars set inline from the competitor count; 22%/30% is the 2-competitor case. */
    left: var(--cmp-card-left, 22%);
    width: var(--cmp-card-width, 30%);
    background: #ffffff;
    border: 1.5px solid rgba(45, 138, 35, 0.32);
    border-radius: 14px;
    box-shadow: 0 16px 36px -16px rgba(45, 138, 35, 0.32);
    z-index: 0;
    pointer-events: none;
  }

  /* "Smart Choice" badge — anchored to .comparison__inner. With inner
     padding-top = 0, the floating card extends 14px above the inner
     edge. Badge center sits on the card's top border (half above,
     half below) → top: -14px. */
  .comparison__badge {
    position: absolute;
    top: -14px;
    /* Featured card occupies left: 22%, width: 30% of the inner content
       area. Inner content has 1rem horizontal padding. Card horizontal
       center = padding-left + (inner-content-width * 0.37). */
    left: calc(1rem + (100% - 2rem) * var(--cmp-badge-frac, 0.37));
    transform: translate(-50%, -50%);
    background: #2d8a23;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px -2px rgba(45, 138, 35, 0.4);
    z-index: 3;
    white-space: nowrap;
  }

  .comparison__table {
    width: 100%;
    min-width: 680px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: transparent;
    position: relative;
    z-index: 1;
  }

  /* ── Header row ───────────────────────────────────────── */
  .comparison__th {
    padding: 1.6rem 1rem 1.2rem;
    font-size: var(--font-size-sm);
    vertical-align: middle;
    border-block-end: 1px solid rgba(0, 0, 0, 0.06);
  }

  .comparison__th--feature {
    text-align: start;
    font-weight: 500;
    color: var(--color-text-muted);
    width: 22%;
    padding-inline-start: 1.25rem;
  }

  /* Competitor columns recede — equal widths, no inline border (the
     hairline row dividers handle visual structure). */
  .comparison__th--competitor {
    width: 24%;
    text-align: center;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
  }

  /* Featured Nanoleaf column header — text only, no bg/border. The card
     overlay behind it provides all the chrome. */
  .comparison__th--nanoleaf {
    width: 30%;
    text-align: center;
    padding-block: 1.8rem 1.3rem; /* extra top breathing for the lift */
    font-weight: 700;
    color: #1a1a2e;
    background: transparent;
    border: 0;
    position: relative;
    z-index: 2;
  }

  .comparison__nanoleaf-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .comparison__nanoleaf-header span {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.005em;
  }
  .comparison__logo { height: 1.25rem; width: auto; }
  .comparison__logo--dark { display: none; }

  /* ── Body cells ───────────────────────────────────────── */
  .comparison__feature {
    padding: 1.05rem 1rem 1.05rem 1.25rem;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-foreground);
    border-block-end: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
  }

  .comparison__value {
    padding: 1.05rem 1rem;
    font-size: var(--font-size-sm);
    text-align: center;
    border-block-end: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted);
    background: transparent;
  }

  .comparison__value--competitor {
    background: transparent;
  }

  /* Featured column body cells — text only, no bg/border (overlay card
     provides the visual). z-index 2 so text renders above the card. */
  .comparison__value--nanoleaf {
    position: relative;
    z-index: 2;
    padding-inline: 1.25rem;
    padding-block: 1.15rem;
    font-weight: 600;
    color: #1a1a2e;
    background: transparent;
    border: 0;
  }

  /* Last row keeps the same padding so the card bottom sits cleanly */
  .comparison__row:last-child .comparison__value--nanoleaf {
    padding-block-end: 1.3rem;
  }

  /* No bottom border on the last row of competitors/feature either —
     keep the flat-canvas look continuous */
  .comparison__row:last-child .comparison__feature,
  .comparison__row:last-child .comparison__value--competitor {
    border-block-end: none;
  }

  /* No row stripes — clean flat surface */
  .comparison__check,
  .comparison__x {
    display: inline-block;
    vertical-align: middle;
  }

  .comparison__footer {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
    margin-block-start: 2rem;
  }

  /* ── Price row premium treatment ──────────────────────── */
  .comparison__price-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .comparison__price-compare {
    color: #b8bcc4;
    font-weight: 400;
    font-size: 0.85rem;
    text-decoration: line-through;
    text-decoration-color: rgba(0, 0, 0, 0.3);
  }

  .comparison__price-current {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--color-foreground, #1a1a2e);
    letter-spacing: -0.01em;
  }

  .comparison__value--nanoleaf .comparison__price-current {
    font-size: 1.1875rem;
    color: #2d8a23;
  }

  /* ── Tablet / mobile ──────────────────────────────────────
     Mobile comparison playbook — patterned on Apple, Whoop, Oura compare
     pages, all of which face the same constraint (5+ columns, 320–414px
     viewport) and converge on the same pattern:

       1. Edge-to-edge canvas (no double padding stacking).
       2. Horizontal scroll inside the canvas with snap-stop on each
          competitor column.
       3. Sticky Feature column on the left, always visible — keeps the
          user oriented while they swipe through competitors.
       4. Nanoleaf column gets its own card chrome (white bg, brand-green
          border, radius) so it visually pops as you scroll.
       5. Right-edge gradient fade hints at more-content-to-scroll.

     The desktop floating overlay card is replaced by per-cell styling
     because the card pseudo can't follow a scroll context. */
  @media screen and (max-width: 749px) {
    /* Edge-to-edge — let the table breathe past the section gutters.
       Cells provide their own horizontal padding. */
    .comparison__inner {
      padding: 0;
      border-radius: 14px;
      max-width: none;
      margin-inline: 0;
    }

    .comparison__table-wrap {
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
      padding-block: 1.25rem 1rem;
      /* Right-side fade indicator via mask-image — works on iOS Safari + Chrome. */
      mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
      -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 2.25rem), transparent 100%);
    }
    .comparison__table-wrap::-webkit-scrollbar { display: none; }
    /* Hide the desktop overlay card on mobile — cell-level styling replaces it */
    .comparison__table-wrap::before { display: none; }

    .comparison__table {
      min-width: 560px;
      table-layout: fixed;
    }

    /* Sticky Feature column — stays in view as user scrolls competitors. */
    .comparison__th--feature,
    .comparison__feature {
      position: sticky;
      left: 0;
      z-index: 4;
      background: #f7f7f8;
      box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.06);
    }

    /* Each competitor column snap-stops as user swipes */
    .comparison__th--competitor,
    .comparison__value--competitor,
    .comparison__th--nanoleaf,
    .comparison__value--nanoleaf {
      scroll-snap-align: start;
    }

    /* Badge sits centered over the Nanoleaf column. Its position adapts
       to wherever that column scrolls — we anchor it just above the canvas
       top. Visual alignment is approximate but the Nanoleaf column card
       chrome (border + bg) makes the connection clear. */
    .comparison__badge {
      top: 0.875rem;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.62rem;
      padding: 0.3rem 0.75rem;
      /* On mobile the canvas itself has no padding-top, so badge floats
         above the canvas edge — give it some breathing room via section
         padding (already exists). */
    }

    /* Cell-level Nanoleaf column chrome — replaces the desktop overlay card.
       White bg + green border on all 4 sides creates a continuous "card". */
    .comparison__th--nanoleaf,
    .comparison__value--nanoleaf {
      background: #ffffff;
      border-inline: 1.5px solid rgba(45, 138, 35, 0.32);
    }
    .comparison__th--nanoleaf {
      border-block-start: 1.5px solid rgba(45, 138, 35, 0.32);
      border-start-start-radius: 12px;
      border-start-end-radius: 12px;
    }
    .comparison__row:last-child .comparison__value--nanoleaf {
      border-block-end: 1.5px solid rgba(45, 138, 35, 0.32);
      border-end-end-radius: 12px;
      border-end-start-radius: 12px;
    }

    /* Column widths — Feature wider so labels fit comfortably; competitors
       and Nanoleaf equal so swipe rhythm is even. */
    .comparison__th--feature,
    .comparison__feature {
      width: 32%;
      min-width: 8.5rem;
      padding: 1rem 0.85rem;
      font-size: 0.8125rem;
    }
    .comparison__th--competitor { padding: 1rem 0.5rem 0.85rem; font-size: 0.7rem; }
    .comparison__th--nanoleaf { padding: 1.1rem 0.6rem 0.85rem; }
    .comparison__value { padding: 0.95rem 0.5rem; font-size: 0.8125rem; }
    .comparison__value--nanoleaf { padding-inline: 0.75rem; }
  }

  @media screen and (min-width: 750px) {
    .comparison { padding-block: 5rem; }
    .comparison__title { font-size: var(--font-size-4xl); }
  }

  /* ── Compatibility mode (mode: "compatibility" in the compare_table JSON) ──
     Neutral equal-column grid: no featured overlay card, no badge, all value
     columns weighted the same. "Not compatible" renders as a muted dash — a
     red X reads as a defect in a mostly-sparse compatibility matrix. */
  .comparison--compat .comparison__table-wrap::before { display: none; }
  .comparison--compat .comparison__inner { max-width: 64rem; }
  .comparison--compat .comparison__th--feature { width: 26%; }
  .comparison--compat .comparison__th--competitor { width: auto; }
  .comparison--compat .comparison__row:last-child .comparison__feature,
  .comparison--compat .comparison__row:last-child .comparison__value {
    border-block-end: none;
  }
  .comparison__dash {
    color: #c9cbd1;
    font-weight: 500;
  }
  /* Compat mode on mobile: plain horizontal scroll. The snap-stops are tuned
     for the us-vs-them layout's wide columns; on an 8-column grid they yank
     the scroll position sideways instead of letting it glide. */
  @media screen and (max-width: 749px) {
    .comparison--compat .comparison__table-wrap {
      scroll-snap-type: none;
    }
    .comparison--compat .comparison__th--competitor,
    .comparison--compat .comparison__value--competitor {
      scroll-snap-align: none;
    }
  }
/* END_SECTION:pdp-comparison */

/* START_SECTION:pdp-exit-intent (INDEX:84) */
.exit-intent__dialog {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 1.6rem;
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  .exit-intent__dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .exit-intent__dialog:not([open]) {
    display: none;
  }

  .exit-intent__content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 48rem;
    width: 100%;
    background-color: var(--exit-bg, #ffffff);
    border-radius: 0.8rem;
    overflow: hidden;
    box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.15);
  }

  .exit-intent__close {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    transition: background-color 0.2s ease;
  }

  .exit-intent__close:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .exit-intent__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  .exit-intent__image {
    width: 100%;
    overflow: hidden;
  }

  .exit-intent__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }

  .exit-intent__body {
    padding: 2.4rem;
    text-align: center;
  }

  .exit-intent__heading {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    line-height: 1.2;
  }

  .exit-intent__desc {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    color: rgba(0, 0, 0, 0.7);
  }

  .exit-intent__cta {
    display: inline-block;
  }

  @media screen and (min-width: 750px) {
    .exit-intent__content {
      flex-direction: row;
      max-width: 64rem;
    }

    .exit-intent__image {
      width: 50%;
      flex-shrink: 0;
    }

    .exit-intent__img {
      height: 100%;
      object-fit: cover;
    }

    .exit-intent__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 3.2rem;
      text-align: left;
    }

    .exit-intent__heading {
      font-size: 2.8rem;
    }
  }
/* END_SECTION:pdp-exit-intent */

/* START_SECTION:pdp-faq (INDEX:85) */
.pdp-faq {
  display: block;
  padding-block: clamp(3rem, 6vw, 5rem);
  padding-inline: 0;
}
.pdp-faq--bg-cream { background: #f7f7f8; }
.pdp-faq--bg-white { background: #ffffff; }
.pdp-faq--bg-transparent { background: transparent; }

.pdp-faq__container {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
}
@media (min-width: 768px) {
  .pdp-faq__container { padding-inline: 2rem; }
}

.pdp-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 900px) {
  .pdp-faq--with-sidebar .pdp-faq__grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.pdp-faq__header {
  margin-block-end: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-faq__title {
  font-size: clamp(1.5rem, 2.75vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.pdp-faq__subtitle {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5a5a6a);
  margin: 0;
  max-width: 38rem;
}

.pdp-faq__accordion {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}
.pdp-faq__item { border-block-end: 1px solid rgba(0, 0, 0, 0.06); }
.pdp-faq__item:last-child { border-block-end: none; }
.pdp-faq__item > summary { list-style: none; cursor: pointer; }
.pdp-faq__item > summary::-webkit-details-marker { display: none; }

.pdp-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.4;
}
@media (min-width: 768px) {
  .pdp-faq__question { padding: 1.25rem 1.5rem; font-size: 1rem; }
}
.pdp-faq__question-text { flex: 1; }
.pdp-faq__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted, #5a5a6a);
  transition: transform 0.2s ease;
}
.pdp-faq__item[open] .pdp-faq__chevron { transform: rotate(180deg); }

.pdp-faq__answer {
  padding: 0 1.25rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--color-text-muted, #5a5a6a);
}
@media (min-width: 768px) {
  .pdp-faq__answer { padding: 0 1.5rem 1.5rem; }
}
.pdp-faq__answer > *:first-child { margin-top: 0; }
.pdp-faq__answer > *:last-child  { margin-bottom: 0; }
.pdp-faq__answer p { margin: 0 0 0.75em; }
.pdp-faq__answer p:last-child { margin-bottom: 0; }
.pdp-faq__answer a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-faq__answer strong { color: var(--color-foreground, #1a1a2e); font-weight: 600; }

.pdp-faq__help-cta {
  margin-block-start: 1.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted, #5a5a6a);
  text-align: center;
}
.pdp-faq__help-cta a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pdp-faq__sidebar { min-width: 0; }
.pdp-faq__app-card {
  position: sticky;
  top: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(165deg, #15803d 0%, #22c55e 50%, #16a34a 100%);
  padding: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
  color: #fff;
}
.pdp-faq__app-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.pdp-faq__app-title {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
  color: #fff;
}
.pdp-faq__app-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 1.25rem;
}
.pdp-faq__app-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-faq__app-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
}
.pdp-faq__app-features svg { flex-shrink: 0; color: #fff; }
.pdp-faq__app-stores {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
}
.pdp-faq__store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 9999px;
  background: #fff;
  color: #1a1a2e;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pdp-faq__store-badge svg { color: #1a1a2e; }
.pdp-faq__store-badge:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
  text-decoration: none;
}
.pdp-faq__app-free {
  display: block;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 899px) {
  .pdp-faq__app-card { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-faq__chevron,
  .pdp-faq__store-badge { transition: none !important; }
}
/* END_SECTION:pdp-faq */

/* START_SECTION:pdp-gallery (INDEX:86) */
.pdp-gallery__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.75rem);
}

.pdp-gallery__inner:has(.pdp-gallery__thumbnails--left) {
  flex-direction: row;
}

.pdp-gallery__main {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 1rem);
  background-color: var(--color-surface, #f5f5f0);
  aspect-ratio: 1 / 1;
}

.pdp-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery__lightbox-trigger {
  position: absolute;
  inset-block-end: var(--space-sm, 0.75rem);
  inset-inline-end: var(--space-sm, 0.75rem);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: var(--space-xs, 0.5rem) var(--space-sm, 0.75rem);
  background: rgb(255 255 255 / 0.9);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 0.5rem);
  cursor: pointer;
  color: var(--color-foreground, #1a1a2e);
  font-size: var(--font-size-sm, 0.875rem);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.pdp-gallery__lightbox-trigger:focus-visible {
  outline: 2px solid var(--color-primary, #000);
  outline-offset: 2px;
}

.pdp-gallery__thumbnails {
  display: flex;
  gap: var(--space-xs, 0.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-xs, 0.25rem);
}

.pdp-gallery__thumbnails--left {
  flex-direction: column;
  overflow-x: visible;
  overflow-y: auto;
  max-height: 100%;
  order: -1;
  width: 80px;
  flex-shrink: 0;
}

.pdp-gallery__thumbnail {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 0.5rem);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-surface, #f5f5f0);
  scroll-snap-align: start;
  transition: border-color var(--duration-fast, 150ms) var(--ease-default);
}

.pdp-gallery__thumbnail:focus-visible {
  outline: 2px solid var(--color-primary, #000);
  outline-offset: 2px;
}

.pdp-gallery__thumbnail--active,
.pdp-gallery__thumbnail[aria-selected="true"] {
  border-color: var(--color-foreground, #1a1a2e);
  box-shadow: 0 0 0 1px var(--color-foreground, #1a1a2e);
}

.pdp-gallery__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-gallery__lightbox {
  width: 100%;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: rgb(0 0 0 / 0.95);
}

.pdp-gallery__lightbox::backdrop {
  background: rgb(0 0 0 / 0.8);
}

.pdp-gallery__lightbox-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 10;
  padding: var(--space-md, 1rem);
}

.pdp-gallery__lightbox-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgb(255 255 255 / 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
}

.pdp-gallery__lightbox-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pdp-gallery__lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: var(--space-lg, 2rem);
}

.pdp-gallery__lightbox-content img {
  max-width: 100%;
  max-height: 90dvh;
  object-fit: contain;
}

@media (min-width: 768px) {
  .pdp-gallery__main {
    aspect-ratio: 4 / 3;
  }

  .pdp-gallery__thumbnail {
    width: 64px;
    height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-gallery * {
    transition: none !important;
  }
}
/* END_SECTION:pdp-gallery */

/* START_SECTION:pdp-hero (INDEX:87) */
/* ========================================
   PDP Hero — 2-column product detail
   ======================================== */

.pdp-hero {
  display: block;
  padding-block-start: 0;
  padding-block-end: var(--space-lg, 2rem);
}
/* Top padding handled by pdp-breadcrumb bottom padding for equal spacing */

.pdp-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
}

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

.pdp-hero__gallery-sticky {
  position: relative;
}

.pdp-hero__main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--gallery-bg, var(--color-background, #f7f7f8));
  overflow: hidden;
}
.pdp-hero__main-image--bordered {
  border: 1px solid var(--color-border, #eee);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.pdp-hero__carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-width: none;
}

.pdp-hero__carousel::-webkit-scrollbar {
  display: none;
}

.pdp-hero__slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}

.pdp-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  cursor: zoom-in;
}

/* Video in gallery */
.pdp-hero__slide video,
.pdp-hero__slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full, 9999px);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 0;
  color: var(--color-foreground, #1a1a2e);
  transition: opacity 0.2s ease;
}

.pdp-hero__arrow:hover {
  background-color: #fff;
}
.pdp-hero__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.pdp-hero__arrow--prev {
  inset-inline-start: 0.5rem;
}

.pdp-hero__arrow--next {
  inset-inline-end: 0.5rem;
}

.pdp-hero__thumbnails {
  display: flex;
  gap: 0.375rem;
  margin-block-start: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.375rem;
  scrollbar-width: none;
}

.pdp-hero__thumbnails::-webkit-scrollbar {
  display: none;
}

.pdp-hero__thumb {
  position: relative;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--color-border, #eee);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-background, #f7f7f8);
  transition: border-color 0.2s ease;
}

.pdp-hero__thumb:hover {
  border-color: var(--color-text-muted, #aaa);
}

.pdp-hero__thumb--active,
.pdp-hero__thumb--active:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__thumb img {
  width: 100%;
  height: 100%;
  /* Fill the thumb bounding box edge-to-edge so merchant uploads don't
     leave letterboxing. Most product imagery is square / near-square and
     looks better cropped to the thumb's aspect than floating inside it. */
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
}

.pdp-hero__thumb-video-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  color: #fff;
  pointer-events: none;
}

/* ---- Product Info ---- */

.pdp-hero__info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-inline: 0;
  min-width: 0;
  overflow: visible;
}

/* Rating — reserve fixed height to prevent layout shift, fades in */
.pdp-hero__rating {
  display: flex;
  flex-direction: row;
  gap: 0.375rem;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 1 !important;
  height: 15px;
  min-height: 15px;
}
.pdp-hero__rating.is-visible {
  opacity: 1;
}

.pdp-hero__rating:hover {
  opacity: 1;
  text-decoration: none;
}
.pdp-hero__rating:hover .pdp-hero__rating-count,
.pdp-hero__rating:hover .pdp-hero__rating-score {
  text-decoration: none;
}
a.pdp-hero__rating,
a.pdp-hero__rating:hover,
a.pdp-hero__rating:focus,
a.pdp-hero__rating:visited {
  text-decoration: none !important;
}

/* Rating Trustpilot stars image — renders instantly, no fade */
.pdp-hero__rating-tp-stars {
  width: 80px;
  height: 15px;
  flex-shrink: 0;
  opacity: 1 !important;
}

/* Review text fades in once Judge.me injects it */
.pdp-hero__rating-text {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary, #71717a);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pdp-hero__rating-text:not(:empty) {
  opacity: 1;
}

.pdp-hero__rating-score {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary, #1a1a2e);
}

.pdp-hero__rating-count {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-secondary, #71717a);
}

/* Title */
.pdp-hero__title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
}

/* Price */
.pdp-hero__price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  margin-block-start: -0.25rem;
}

.pdp-hero__price-current {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__price-compare {
  font-size: 1rem;
  color: var(--color-text-muted, #999);
  text-decoration: line-through;
}

.pdp-hero__price-save {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-brand-green-dark, #388455);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 9999px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}


/* Subheadline — renders the rich-text product description.
   Selectors below preserve the Shopify Admin formatting (bold / italic /
   links / lists / line breaks) without bleeding outside the description. */
.pdp-hero__subheadline {
  margin: 0;
  color: var(--color-text-secondary, #666);
  line-height: 1.625;
  font-size: 1rem;
}
.pdp-hero__subheadline > *:first-child { margin-top: 0; }
.pdp-hero__subheadline > *:last-child  { margin-bottom: 0; }
.pdp-hero__subheadline p {
  margin: 0 0 0.75em;
}
.pdp-hero__subheadline p:last-child { margin-bottom: 0; }
.pdp-hero__subheadline strong,
.pdp-hero__subheadline b { font-weight: 700; color: var(--color-foreground, #1a1a2e); }
.pdp-hero__subheadline em,
.pdp-hero__subheadline i { font-style: italic; }
.pdp-hero__subheadline u { text-decoration: underline; text-underline-offset: 2px; }
.pdp-hero__subheadline a {
  color: var(--color-foreground, #1a1a2e);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 0.15s ease;
}
.pdp-hero__subheadline a:hover { opacity: 0.7; }
.pdp-hero__subheadline ul,
.pdp-hero__subheadline ol {
  margin: 0 0 0.75em;
  padding-left: 1.25em;
}
.pdp-hero__subheadline li { margin-bottom: 0.25em; }
.pdp-hero__subheadline li:last-child { margin-bottom: 0; }
.pdp-hero__subheadline h1,
.pdp-hero__subheadline h2,
.pdp-hero__subheadline h3,
.pdp-hero__subheadline h4,
.pdp-hero__subheadline h5,
.pdp-hero__subheadline h6 {
  margin: 1em 0 0.4em;
  color: var(--color-foreground, #1a1a2e);
  font-weight: 700;
  line-height: 1.3;
}
.pdp-hero__subheadline h1 { font-size: 1.125rem; }
.pdp-hero__subheadline h2 { font-size: 1.0625rem; }
.pdp-hero__subheadline h3 { font-size: 1rem; }
.pdp-hero__subheadline h4,
.pdp-hero__subheadline h5,
.pdp-hero__subheadline h6 { font-size: 0.9375rem; }
.pdp-hero__subheadline blockquote {
  margin: 0.75em 0;
  padding: 0.25em 0 0.25em 0.9em;
  border-left: 2px solid var(--color-border, #deddd8);
  color: var(--color-foreground, #1a1a2e);
  font-style: italic;
}
.pdp-hero__subheadline hr {
  border: none;
  border-top: 1px solid var(--color-border, #deddd8);
  margin: 0.75em 0;
}
.pdp-hero__subheadline code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pdp-hero__subheadline img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em 0;
  border-radius: 6px;
}
/* Dark theme adjustments */
.theme-dark .pdp-hero__subheadline strong,
.theme-dark .pdp-hero__subheadline b,
.theme-dark .pdp-hero__subheadline a,
.theme-dark .pdp-hero__subheadline h1,
.theme-dark .pdp-hero__subheadline h2,
.theme-dark .pdp-hero__subheadline h3,
.theme-dark .pdp-hero__subheadline h4,
.theme-dark .pdp-hero__subheadline h5,
.theme-dark .pdp-hero__subheadline h6,
.theme-dark .pdp-hero__subheadline blockquote { color: #f5f5f5; }
.theme-dark .pdp-hero__subheadline blockquote { border-left-color: rgba(255,255,255,0.2); }
.theme-dark .pdp-hero__subheadline code { background: rgba(255,255,255,0.08); }

/* Tags — hidden mobile, flex desktop — positioned above description */
.pdp-hero__tags {
  display: none;
  margin-bottom: 6px;
}

.pdp-hero__tag {
  font-size: var(--font-size-xs, 0.75rem);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full, 9999px);
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground, #1a1a2e);
  white-space: nowrap;
}

/* USP Cards */
.pdp-hero__usps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 4px;
  margin-bottom: 4px;
}

.pdp-hero__usp {
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: flex-start;
}

.pdp-hero__usp-icon {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: var(--radius-full, 9999px);
  background-color: #f7f7f8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foreground, #1a1a2e);
  overflow: hidden;
}
.pdp-hero__usp-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.pdp-hero__usp-text {
  display: flex;
  flex-direction: column;
}

.pdp-hero__usp-title {
  font-weight: 500;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__usp-desc {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #999);
}

/* ---- Linked Options (sibling products) ---- */
.pdp-hero__linked-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block-end: 1.25rem;
  padding-block-end: 1.25rem;
  border-bottom: 1px solid var(--color-border, #deddd8);
}

.pdp-hero__linked-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pdp-hero__linked-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__linked-selected {
  font-weight: 400;
  color: var(--color-text-secondary, #666);
}

/* Linked swatches */
.pdp-hero__linked-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pdp-hero__linked-swatch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
  text-decoration: none;
}

.pdp-hero__linked-swatch:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__linked-swatch--active {
  border-color: var(--color-foreground, #1a1a2e);
  cursor: default;
}

/* Linked pills */
.pdp-hero__linked-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pdp-hero__linked-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-border, #deddd8);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  background: transparent;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.pdp-hero__linked-pill:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__linked-pill--active {
  background-color: var(--color-foreground, #1a1a2e);
  border-color: var(--color-foreground, #1a1a2e);
  color: #fff;
  cursor: default;
  pointer-events: none;
}

/* ---- Variant Selectors ---- */
.pdp-hero__variants {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pdp-hero__option {
  border: none;
  padding: 0;
  margin: 0;
}

.pdp-hero__option-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin-block-end: 0.5rem;
  display: block;
}

.pdp-hero__option-selected {
  font-weight: 400;
  color: var(--color-text-secondary, #666);
}

/* Color swatches */
.pdp-hero__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pdp-hero__swatch {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}

.pdp-hero__swatch--active,
.pdp-hero__swatch:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__swatch-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.pdp-hero__swatch-dot--image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-hero__swatch-dot--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* Pill buttons */
.pdp-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pdp-hero__pill {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-border, #deddd8);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  background: transparent;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}

.pdp-hero__pill:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.pdp-hero__pill--active {
  background-color: var(--color-foreground, #1a1a2e);
  border-color: var(--color-foreground, #1a1a2e);
  color: #fff;
}

.pdp-hero__pill--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Type filter (inline tabs sharing one continuous underline) ──
   The 1px line you see under the entire row IS the tab bar's underline —
   it just extends visually to the left under the label too. The active
   tab thickens its segment of that line to 2px navy; everywhere else
   stays 1px gray. One continuous horizontal mark, no double lines.

   Layout: label flush left, tabs flush right, text baselines aligned.
   Picker (pills / swatches / shapes) drops to a new row below at full
   width. No horizontal scroll, no vertical dividers between tabs —
   visual hierarchy is carried by typography (bold + navy on active)
   and the underline. Wraps gracefully on narrow mobile widths.

   Acts as a presentation-layer filter: the WAI-ARIA tablist filters
   which option values are visible — variant resolution still uses
   Shopify's native 3-option pipeline underneath.
*/
.pdp-hero__option[data-type-host] {
  margin-block-end: 1rem;
  /* No bottom border here — the line sits on the type-header below so it
     ends right under the label + tabs row, never under the pills. */
}
/* Header row: option label + type tabs.
   The 1px bottom border IS the shared horizontal line under both
   children. The active tab carries its own 2px border that lands
   exactly on the header's 1px border — adjacent (touching) so the
   two read as a single continuous line, thicker under the active tab.
   align-items: flex-end aligns the BOTTOMS of all children, which
   makes the tab.border-bottom = header.content-bottom regardless of
   font metrics (baseline-based alignment depended on descender size
   and broke the alignment by ~3-5px). */
.pdp-hero__type-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 1rem;
  row-gap: 0.3rem;
  border-block-end: 1px solid var(--color-border, #eaeaea);
  padding-block-end: 0;
  margin-block-end: 0.85rem;
}
.pdp-hero__type-header > .pdp-hero__option-label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  /* Slight offset so the label's bottom sits just above the 1px line,
     not flush against it. */
  padding-block-end: 2px;
}

.pdp-hero__type-tabs {
  display: inline-flex;
  align-items: flex-end;
  gap: 1rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.pdp-hero__type-tab {
  appearance: none;
  background: none;
  border: none;
  display: inline-flex;
  align-items: baseline;
  padding: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary, #999);
  cursor: pointer;
  /* 2px bottom border (transparent until active). With the parent's
     flex-end alignment, the tab.box.bottom equals the header's
     content-bottom — so this border ends exactly where the header's
     1px border begins. One continuous line. */
  border-block-end: 2px solid transparent;
  padding-block-end: 0.55rem;
  margin: 0;
  transition: color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.pdp-hero__type-tab:hover { color: var(--color-foreground, #1a1a2e); }
.pdp-hero__type-tab--active {
  color: var(--color-foreground, #1a1a2e);
  font-weight: 700;
  border-block-end-color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__type-tab:focus-visible {
  outline: 2px solid var(--color-foreground, #1a1a2e);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Mobile: tighten the tab gap so the row wraps gracefully (or fits) */
@media (max-width: 540px) {
  .pdp-hero__option[data-type-host] {
    row-gap: 0.5rem;
  }
  .pdp-hero__type-tabs {
    gap: 0.85rem;
  }
}

/* Hidden by the Type filter — applies to all option-value labels. */
.pdp-hero__swatch[hidden],
.pdp-hero__shape[hidden],
.pdp-hero__pill[hidden] {
  display: none !important;
}

/* ── Shape picker (image card grid) ──
   Used for any option named "Shape" / "Shapes" / "Panel Shape".
   Cards render an illustration on top (sourced from the shape_swatch
   metaobject's `image` field) + a label below. Falls back to a
   single-letter placeholder when no image has been uploaded yet. */
.pdp-hero__shapes {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
}
@media (min-width: 540px) {
  .pdp-hero__shapes--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .pdp-hero__shapes--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pdp-hero__shapes--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.pdp-hero__shape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem 0.7rem;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pdp-hero__shape:hover {
  border-color: rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.pdp-hero__shape--active {
  border-color: #1a1a2e;
  background: #f7f7f8;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}
.pdp-hero__shape:focus-within {
  /* Keyboard-only focus ring — uses the same navy as the active state so
     mouse + keyboard selection look unified. */
  outline: 2px solid #1a1a2e;
  outline-offset: 2px;
}
/* Hide the focus ring for mouse users so we don't get a double-visual on click
   (the --active class already conveys selection). Keyboard users still see it
   via :focus-visible-within emulation. */
.pdp-hero__shape:focus-within:not(:has(:focus-visible)) {
  outline: none;
}
.pdp-hero__shape-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* 88 letterboxed the 1/1 box, and % padding resolves against WIDTH, so 8% of
     158px ate the 72px height and drew a 200px asset at ~47px. Owned here so
     deleting the orphan pdp-variant-picker cannot revert it. */
  max-height: 104px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f7f8, #efeff1);
  overflow: hidden;
}
.pdp-hero__shape-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  display: block;
}
.pdp-hero__shape-placeholder {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(26, 26, 46, 0.35);
  letter-spacing: -0.02em;
}
.pdp-hero__shape-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: #1a1a2e;
  letter-spacing: -0.005em;
}
@media (max-width: 539px) {
  .pdp-hero__shape { padding: 0.7rem 0.4rem 0.6rem; border-radius: 12px; }
  .pdp-hero__shape-media { max-height: 88px; border-radius: 8px; }
  .pdp-hero__shape-label { font-size: 0.75rem; }
}

/* ── Quantity + CTA Row ── */
.pdp-hero__cta-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.pdp-hero__qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--color-border, #deddd8);
  border-radius: var(--radius-full, 9999px);
  background: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.pdp-hero__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-foreground, #1a1a2e);
  transition: background 0.25s ease, color 0.25s ease;
  padding: 0;
}
.pdp-hero__qty-btn:hover {
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  color: var(--color-brand-green, #48A06A);
}
.pdp-hero__qty-btn:active {
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 16%, transparent);
  color: var(--color-brand-green, #48A06A);
}
.pdp-hero__qty-input {
  width: 32px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-foreground, #1a1a2e);
  -moz-appearance: textfield;
  padding: 0;
  line-height: 1;
}
.pdp-hero__qty-input::-webkit-outer-spin-button,
.pdp-hero__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pdp-hero__qty-input:focus {
  outline: none;
}

/* CTA Button */
.pdp-hero__cta {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-button);
  background-color: var(--color-brand-green, #48A06A);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}

.pdp-hero__cta:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-green, #48A06A) 55%, transparent);
  transform: translateY(-1px);
}

.pdp-hero__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
}

/* CTA disabled / sold out state */
.pdp-hero__cta:disabled,
.pdp-hero__cta--sold-out {
  opacity: 1;
  cursor: not-allowed;
  background: #e4e4e7;
  color: #999;
  box-shadow: none;
  pointer-events: none;
  border: none;
  font-size: 0.875rem;
}
.pdp-hero__cta--sold-out::before { display: none; }

.pdp-hero__cta:disabled:hover {
  transform: none;
  box-shadow: none;
}

.pdp-hero__cta-text {
  position: relative;
  z-index: 1;
  transition: opacity 0.2s;
}
.pdp-hero__cta-loader,
.pdp-hero__cta-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 2;
  font-weight: 600;
  font-size: 0.9375rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.pdp-hero__cta-loader[hidden],
.pdp-hero__cta-check[hidden] { display: none; }
/* When visible (hidden removed), show as flex but don't block clicks when at opacity 0 */
.pdp-hero__cta-loader,
.pdp-hero__cta-check { pointer-events: none; }
.pdp-hero__cta.is-adding .pdp-hero__cta-text { opacity: 0; }
.pdp-hero__cta.is-adding .pdp-hero__cta-loader { opacity: 1; }
.pdp-hero__cta.is-adding { background-color: var(--color-brand-green-dark, #38835A); box-shadow: 0 2px 12px color-mix(in srgb, var(--color-brand-green-dark, #38835A) 50%, transparent); }
.pdp-hero__cta.is-added .pdp-hero__cta-text { opacity: 0; }
.pdp-hero__cta.is-added .pdp-hero__cta-check { opacity: 1; }
.pdp-hero__cta-loader svg { animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Visible add-to-cart failure message under the CTA row */
.pdp-hero__cta-error {
  margin-block-start: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #a53f2c;
}
.pdp-hero__cta-error[hidden] { display: none; }


/* ── Sticky Add to Cart Bar ── */
.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  transform: translateY(100%);
  /* visibility is what keeps the parked bar out of the tab order. transform
     alone never removes focusability, so this bar used to leave a working Add
     to Cart button off-screen but reachable by keyboard on every PDP. The
     visibility change is delayed by the length of the slide so the bar stays
     on screen while it slides out, then leaves the tab order once gone. */
  visibility: hidden;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 260ms;
  will-change: transform;
}
/* A `.pdp-sticky-bar[hidden] { display: block }` rule used to sit here and
   override the browser's native [hidden] handling, so the bar rendered even
   while the HTML said it did not exist. That defeated the only purpose of the
   `hidden` attribute in the markup, which is to keep the bar absent until the
   JS has run. It is removed: `hidden` is respected again, so if the JS never
   runs the bar is genuinely gone rather than invisible and focusable. */
.pdp-sticky-bar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 260ms cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .pdp-sticky-bar,
  .pdp-sticky-bar.is-visible { transition-duration: 0.01ms; transition-delay: 0s; }
}

.pdp-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  gap: 1rem;
}

.pdp-sticky-bar__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pdp-sticky-bar__title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-bar__pricing {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.pdp-sticky-bar__price {
  font-size: 0.75rem;
  font-weight: 600;
  color: #1a1a2e;
}

.pdp-sticky-bar__compare {
  font-size: 0.75rem;
  color: #999;
  text-decoration: line-through;
}

.pdp-sticky-bar__save {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-brand-green-dark, #388455);
  background: rgba(22,163,74,0.08);
  padding: 1px 6px;
  border-radius: 9999px;
}

.pdp-sticky-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.5rem;
  min-width: 140px;
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}
.pdp-sticky-bar__btn.is-adding {
  pointer-events: none;
}
.pdp-sticky-bar__btn.is-added {
  background: var(--color-brand-green-dark, #38835A);
}
.pdp-sticky-bar__btn:hover {
  background: var(--color-brand-green-hover, #44A168);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-green, #48A06A) 50%, transparent);
  transform: translateY(-1px);
}
.pdp-sticky-bar__btn:active:not(:disabled) {
  transform: scale(0.97);
}
.pdp-sticky-bar__btn:disabled {
  background: #e4e4e7;
  color: #999;
  box-shadow: none;
  cursor: not-allowed;
}

/* Dark mode */
.theme-dark .pdp-sticky-bar {
  background: color-mix(in srgb, var(--color-background, #141416) 95%, transparent);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.theme-dark .pdp-sticky-bar__title { color: #f5f5f5; }
.theme-dark .pdp-sticky-bar__price { color: #f5f5f5; }
.theme-dark .pdp-sticky-bar__compare { color: rgba(255,255,255,0.4); }
.theme-dark .pdp-sticky-bar__btn { background: var(--color-brand-green, #48A06A); color: #fff; }

/* Shimmer pseudo-element — removed for cleaner CTA appearance */

/* Dynamic Checkout Button — match main CTA dimensions */
.pdp-hero__dynamic-checkout {
  margin-top: 0;
  position: relative;
  min-height: 52px;
  width: 100%;
}

/* Skeleton loader while Shopify JS loads the real button */
.pdp-hero__dynamic-checkout-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.3s;
}
.pdp-hero__dynamic-checkout-skeleton-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--radius-button);
  background: linear-gradient(90deg, #eae9e4 25%, #f5f4f0 50%, #eae9e4 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Hide skeleton once JS marks it loaded — and stop the infinite
   background-position animation, which otherwise keeps repainting an
   invisible element forever on every PDP */
.pdp-hero__dynamic-checkout.is-loaded .pdp-hero__dynamic-checkout-skeleton {
  opacity: 0;
  pointer-events: none;
}
.pdp-hero__dynamic-checkout.is-loaded .pdp-hero__dynamic-checkout-skeleton-btn {
  animation: none;
}
.pdp-hero__dynamic-checkout .shopify-payment-button {
  margin: 0;
  width: 100%;
  min-height: 52px;
}
.pdp-hero__dynamic-checkout .shopify-payment-button__button {
  width: 100%;
  min-height: 52px !important;
  height: 52px !important;
  max-height: 52px !important;
  padding: 0 2rem !important;
  box-sizing: border-box;
  border-radius: var(--radius-button) !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  letter-spacing: 0.01em;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
/* Target all nested elements Shopify injects */
.pdp-hero__dynamic-checkout .shopify-payment-button__button--unbranded,
.pdp-hero__dynamic-checkout .shopify-payment-button__button--branded {
  border-radius: var(--radius-button) !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
}
/* Force iframe inside dynamic checkout to match */
.pdp-hero__dynamic-checkout .shopify-payment-button__button iframe {
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: var(--radius-button) !important;
}
/* Target the div wrapper Shopify adds around the button */
.pdp-hero__dynamic-checkout .shopify-payment-button__button > div {
  border-radius: var(--radius-button) !important;
  overflow: hidden !important;
  height: 52px !important;
}
.pdp-hero__dynamic-checkout .shopify-payment-button__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.pdp-hero__dynamic-checkout .shopify-payment-button__button--unbranded {
  background-color: #1a1a2e !important;
  color: #fff !important;
}
.pdp-hero__dynamic-checkout .shopify-payment-button__button--unbranded:hover {
  background-color: #111122 !important;
}
.pdp-hero__dynamic-checkout .shopify-payment-button__more-options {
  display: none;
}
/* CMS editor preview — force rounded corners on all possible wrappers */
.pdp-hero__dynamic-checkout .shopify-payment-button__button *,
.pdp-hero__dynamic-checkout .shopify-payment-button__button *::before,
.pdp-hero__dynamic-checkout .shopify-payment-button__button *::after {
  border-radius: 999px !important;
}

/* ── Buy on Amazon Button ── */
.pdp-hero__amazon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 52px;
  margin-top: 0;
  padding: 0 2rem;
  background-color: #FFD814;
  border: 1px solid #FCD200;
  border-radius: var(--radius-button);
  color: #0F1111;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
}
.pdp-hero__amazon-btn:hover {
  background-color: #F7CA00;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.pdp-hero__amazon-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.pdp-hero__amazon-logo {
  flex-shrink: 0;
}
.pdp-hero__amazon-text {
  white-space: nowrap;
}
.pdp-hero__amazon-arrow {
  flex-shrink: 0;
  opacity: 0.65;
  width: 14px;
  height: 14px;
}

/* Product form gap */
.pdp-hero__info form[data-product-form] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Accordions */
.pdp-hero__accordions {
  border-block-start: 1px solid var(--color-border, #deddd8);
  padding-block-start: 0;
  margin-top: 0;
}

.pdp-hero__accordion {
  border-block-end: 1px solid var(--color-border, #deddd8);
}

.pdp-hero__accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  text-align: start;
  font-family: inherit;
}

.pdp-hero__accordion-chevron {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.pdp-hero__accordion-trigger[aria-expanded="true"] .pdp-hero__accordion-chevron {
  transform: rotate(180deg);
}

.pdp-hero__accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.pdp-hero__accordion-trigger[aria-expanded="true"] + .pdp-hero__accordion-content {
  grid-template-rows: 1fr;
}

.pdp-hero__accordion-body {
  overflow: hidden;
}

.pdp-hero__accordion-text {
  margin: 0;
  padding-block-end: 0.75rem;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #666);
  line-height: 1.5;
}


/* ─── 4D Gallery Trigger — matches arrow style ─── */
.pdp-hero__4d-trigger {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-foreground, #1a1a2e);
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}
.pdp-hero__4d-trigger:hover { background-color: #fff; }
.pdp-hero__4d-trigger[hidden] { display: none; }
.pdp-hero__4d-trigger svg { width: 16px; height: 16px; }
.pdp-hero__4d-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ─── Discount Timer ─── */
.pdp-hero__discount-timer { }
.pdp-hero__discount-timer[hidden] { display: none; }
.pdp-hero__discount-timer-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: 10px;
  font-size: 12px;
  color: var(--color-text-secondary, #666);
}
.pdp-hero__discount-timer-inner svg { color: #888; flex-shrink: 0; }
.pdp-hero__discount-timer-label { font-weight: 500; }
.pdp-hero__discount-timer-digits {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  font-size: 13px;
  color: var(--color-foreground, #1a1a2e);
}

/* ─── Compatible With — inside accordion, logo grid ─── */
.pdp-hero__compat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pdp-hero__compat-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: 8px;
  padding: 6px 10px;
}
.pdp-hero__compat-logo span {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.pdp-hero__compat-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


/* ─── Feature Prompts (App / Bundle / Student) ─── */
/* Unified single-line prompt — follows trust badge visual language */
.pdp-hero__feature-prompt { }
.pdp-hero__feature-prompt[hidden] { display: none; }
.pdp-hero__feature-prompt-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.pdp-hero__feature-prompt-link:hover {
  border-color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
}
.pdp-hero__feature-prompt-link > svg:first-child {
  flex-shrink: 0;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__feature-prompt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pdp-hero__feature-prompt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__feature-prompt-desc {
  font-size: 11px;
  color: var(--color-text-muted, #999);
}
.pdp-hero__feature-prompt-arrow {
  flex-shrink: 0;
  color: #bbb;
  transition: transform 0.15s;
}
.pdp-hero__feature-prompt-link:hover .pdp-hero__feature-prompt-arrow {
  transform: translateX(2px);
  color: var(--color-foreground, #1a1a2e);
}

/* ---- Desktop ---- */

@media (min-width: 768px) {
  .pdp-hero {
    padding-block: 0 3rem;
  }

  .pdp-hero__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 0.5rem;
  }

  .pdp-hero__gallery-sticky {
    position: sticky;
    top: 12px;
    align-self: start;
  }

  .pdp-hero__main-image {
    border-radius: 0.5rem;
  }

  .pdp-hero__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }

  .pdp-hero__thumb {
    width: 4rem;
    height: 4rem;
  }

  .pdp-hero__info {
    padding-inline: 0;
  }

  .pdp-hero__title {
    font-size: 2.25rem;
  }

  .pdp-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
    margin-bottom: 6px;
  }

}

@media (min-width: 1024px) {
  .pdp-hero__grid {
    column-gap: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-hero__carousel {
    scroll-behavior: auto;
  }
  .pdp-hero__accordion-content {
    transition: none;
  }
  .pdp-hero__accordion-chevron {
    transition: none;
  }
}

/* ─── Back In Stock Notify Form ─── */
.pdp-hero__notify {
  margin-top: 12px;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pdp-hero__notify[hidden] { display: none; }
.pdp-hero__notify-inner {
  padding: 1.25rem;
  text-align: left;
}
.pdp-hero__notify-icon {
  margin-block-end: 0.5rem;
  color: #999;
}
.pdp-hero__notify-heading {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem;
}
.pdp-hero__notify-input-wrap {
  display: flex;
  gap: 8px;
}
.pdp-hero__notify-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  font-size: 13px;
  font-family: inherit;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #f9f9f7;
  color: #1a1a2e;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-input:focus {
  border-color: var(--color-brand-green, #48A06A);
  background: #fff;
}
.pdp-hero__notify-input::placeholder { color: #999; }
.pdp-hero__notify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 120px;
  padding: 0.625rem 1.25rem;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--color-brand-green, #48A06A);
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-btn:hover { background: var(--color-brand-green-hover, #44A168); box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-green, #48A06A) 55%, transparent); transform: translateY(-1px); }
.pdp-hero__notify-btn:active { transform: translateY(0); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-brand-green, #48A06A) 40%, transparent); }
.pdp-hero__notify-btn:disabled { opacity: 0.8; cursor: not-allowed; transform: none; }
.pdp-hero__notify-btn.is-loading [data-notify-btn-text] { opacity: 0; }
.pdp-hero__notify-btn.is-loading .pdp-hero__notify-spinner { opacity: 1; }
.pdp-hero__notify-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.pdp-hero__notify-spinner svg { animation: spin 0.6s linear infinite; }
.pdp-hero__notify-spinner[hidden] { display: none !important; }
.pdp-hero__notify-input--error { border-color: #ef4444 !important; background: #fef2f2 !important; }
.pdp-hero__notify-input--error::placeholder { color: #ef4444; }
.theme-dark .pdp-hero__notify-input--error { background: rgba(239,68,68,0.1) !important; }
.pdp-hero__notify-disclaimer {
  font-size: 10px;
  color: #999;
  margin: 6px 0 0;
}
/* Dark mode notify */
.theme-dark .pdp-hero__notify {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
}
.theme-dark .pdp-hero__notify-icon { color: rgba(255,255,255,0.5); }
.theme-dark .pdp-hero__notify-heading { color: #f5f5f5; }
.theme-dark .pdp-hero__notify-input {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  color: #f5f5f5;
}
.theme-dark .pdp-hero__notify-input::placeholder { color: rgba(255,255,255,0.4); }
.theme-dark .pdp-hero__notify-input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.12); }
.theme-dark .pdp-hero__notify-btn { background: #f5f5f5; color: #1a1a2e; }
.theme-dark .pdp-hero__notify-btn:hover { background: #e0e0e0; }
.theme-dark .pdp-hero__notify-disclaimer { color: rgba(255,255,255,0.4); }
.theme-dark .pdp-hero__notify-success-title { color: #f5f5f5; }
.theme-dark .pdp-hero__notify-success-desc { color: rgba(255,255,255,0.6); }
.theme-dark .pdp-hero__notify-btn { background: var(--color-brand-green-dark, #2d8a23); color: #fff; }
.theme-dark .pdp-hero__notify-btn:hover { background: color-mix(in srgb, var(--color-brand-green-dark, #2d8a23) 85%, #000); }
.pdp-hero__notify-success {
  text-align: center;
}
.pdp-hero__notify-success[hidden] { display: none; }
.pdp-hero__notify-success-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  animation: notifySuccessIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes notifySuccessIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.pdp-hero__notify-success-icon {
  margin-bottom: 0.25rem;
}
.pdp-hero__notify-success-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
}
.pdp-hero__notify-success-desc {
  font-size: 12px;
  color: #666;
  margin: 0;
  max-width: 20rem;
}

/* Urgency Module (inventory wrapper) */
.pdp-hero__urgency-module {
  margin-top: 4px;
}

/* Stock Inventory */
.pdp-hero__inventory { }
.pdp-hero__inventory-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
}
.pdp-hero__inventory-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdp-hero__inventory-dot {
  --dot-color: var(--color-brand-green, #48A06A);
  position: relative;
  width: 6px;
  height: 6px;
}
.pdp-hero__inventory-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--dot-color);
}
.pdp-hero__inventory-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--dot-color);
  opacity: 0.5;
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.pdp-hero__inventory-dot.is-out::after { animation: none; opacity: 0; }
@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.pdp-hero__inventory-status { color: var(--color-brand-green-dark, #388455); font-weight: 500; }

/* Inventory progress bar */
.pdp-hero__inventory-bar {
  width: 100%;
  height: 4px;
  background: #eee;
  border-radius: 9999px;
  margin-top: 8px;
  overflow: hidden;
}
.pdp-hero__inventory-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
  border-radius: 9999px;
  width: 68%;
  transition: width 0.6s ease;
}
.pdp-hero__inventory-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888;
}
.pdp-hero__inventory-sep {
  color: rgba(0,0,0,0.15);
}
.pdp-hero__inventory-country {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pdp-hero__inventory-timer {
  display: flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
  color: #888;
}
.pdp-hero__inventory-timer svg { flex-shrink: 0; }
.pdp-hero__inventory-timer[hidden] { display: none; }

/* Shipping line — sits under inventory bar */
.pdp-hero__shipping {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #888;
  margin-top: 6px;
}
.pdp-hero__shipping svg { flex-shrink: 0; color: #888; }
.pdp-hero__shipping strong { color: #888; font-weight: 600; }

/* Trust Badges */
.pdp-hero__trust-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.pdp-hero__trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pdp-hero__trust-badge svg { color: var(--color-brand-green-dark, #388455); flex-shrink: 0; }
.pdp-hero__trust-sep { color: rgba(0,0,0,0.15); }

/* Included Items */
.pdp-hero__included-list p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.pdp-hero__included-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground, #1a1a2e);
  padding: 0.125rem 0;
}
.pdp-hero__included-qty {
  color: var(--color-text-secondary, #666);
  font-size: 13px;
  flex-shrink: 0;
  margin-left: 1rem;
}
/* Rich text variant for What's Included */
.pdp-hero__included-richtext {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__included-richtext ul,
.pdp-hero__included-richtext ol {
  padding-left: 1.25rem;
  margin: 0;
}
.pdp-hero__included-richtext li {
  padding: 0.125rem 0;
}
.pdp-hero__included-richtext p {
  margin: 0 0 0.25rem;
}

/* Certification Logos */
.pdp-hero__cert-logos {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  padding: 12px 0;
}
.pdp-hero__cert-logos img {
  height: 40px;
  width: auto;
  object-fit: contain;
  opacity: 0.8;
}
.theme-dark .pdp-hero__cert-logos img {
  filter: invert(1) brightness(2);
  opacity: 0.9;
}
.pdp-hero__accordion-answer p { font-size: 14px; color: #666; margin-bottom: 8px; }

/* Doc Buttons */
.pdp-hero__doc-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding-top: 4px;
  margin-top: 0;
}
.pdp-hero__doc-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pdp-hero__doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  min-height: 1.875rem;
  font-size: 12px;
  font-weight: 500;
  color: #1a1a2e;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  font-family: inherit;
  line-height: 1;
}
.pdp-hero__doc-btn:hover {
  background: #1a1a2e;
  color: #fff;
  border-color: #1a1a2e;
  text-decoration: none;
}
.pdp-hero__sku {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  color: #999;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Tech Specs Modal */
.pdp-hero__modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
}
.pdp-hero__modal-overlay.is-open {
  display: flex;
}
.pdp-hero__modal-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.pdp-hero__modal {
  position: relative;
  background: var(--color-background, #f7f7f8);
  border-radius: var(--radius-card);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  max-width: 32rem;
  width: calc(100% - 2rem);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: fadeSlideIn 0.3s ease-out;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pdp-hero__modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--color-border, #deddd8);
  flex-shrink: 0;
}
.pdp-hero__modal-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}
.pdp-hero__modal-close:hover {
  color: var(--color-foreground, #1a1a2e);
  background: var(--color-secondary, #eae9e4);
}
.pdp-hero__modal-body {
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pdp-hero__specs-section { }
.pdp-hero__specs-section--last { padding-bottom: 8px; }
.pdp-hero__specs-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__specs-bar {
  width: 4px;
  height: 16px;
  border-radius: 100px;
  flex-shrink: 0;
}
.pdp-hero__specs-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Bullet groups — array-format spec entries (Wellness Benefits, Key Features) */
.pdp-hero__specs-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pdp-hero__specs-bullets li {
  position: relative;
  padding-inline-start: 1.1rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--pdp-text-muted, #555c65);
}
.pdp-hero__specs-bullets li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-brand-green, #48A06A);
}
/* Row is a vertical stack: label+main on top, optional full-width secondary below */
.pdp-hero__specs-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.pdp-hero__specs-row:last-child { border-bottom: none; }
.pdp-hero__specs-row-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}
.pdp-hero__specs-row-label {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}
.pdp-hero__specs-row-main {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  text-align: right;
  line-height: 1.4;
  min-width: 0;
}
/* Secondary note: sits below the main value, right-aligned to match the
   main value's column. Width fits the content (capped at the row width
   so long text wraps onto multiple lines instead of overflowing). Same
   font weight as the main value (500) — just slightly smaller — so it
   reads as quieter detail without feeling washed out. */
.pdp-hero__specs-row-sec {
  display: inline-block;
  align-self: flex-end;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  color: #6b7280;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: right;
}
/* ── Subsections (Level 3 — collapsible per-shape groups) ────────────── */
.pdp-hero__specs-subs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.pdp-hero__specs-sub {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  background: rgba(0,0,0,0.015);
  overflow: hidden;
}
.pdp-hero__specs-sub-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pdp-hero__specs-sub-summary::-webkit-details-marker { display: none; }
.pdp-hero__specs-sub-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  letter-spacing: 0.01em;
}
.pdp-hero__specs-sub-chev {
  transition: transform 0.18s ease;
  color: #888;
  flex-shrink: 0;
}
.pdp-hero__specs-sub[open] .pdp-hero__specs-sub-chev {
  transform: rotate(180deg);
}
.pdp-hero__specs-sub-body {
  padding: 4px 12px 10px 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.pdp-hero__specs-sub[open] .pdp-hero__specs-sub-summary {
  border-bottom: none;
}
.pdp-hero__specs-modes {
  margin-top: 12px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
  padding: 12px;
}
.pdp-hero__specs-modes-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 8px;
}
.pdp-hero__specs-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 3px 0;
}
.pdp-hero__specs-mode-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdp-hero__specs-mode-name {
  font-weight: 500;
  min-width: 70px;
}
.pdp-hero__specs-mode-wave {
  color: #888;
  flex: 1;
}
.pdp-hero__specs-mode-density {
  color: #888;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 10px;
}
.pdp-hero__specs-certs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 8px 0;
}
.pdp-hero__specs-certs img {
  height: 32px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
}

/* ── Pairs Well With — vertical stacked, boxed white ── */
.pdp-hero__cross-sell {
  margin-top: 8px;
}
.pdp-hero__cross-sell-box {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-card);
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
}
.pdp-hero__cross-sell-title {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.75rem;
}
/* ── Skeleton loader ── */
.pdp-hero__cross-sell-skeleton {
  display: flex;
  gap: 10px;
}
.pdp-hero__cross-sell-skeleton-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  border: 1px solid #eee;
  background: #fff;
}
.pdp-hero__cross-sell-skeleton-img {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-image);
  background: #f0eeea;
  animation: crossSellPulse 1.5s ease-in-out infinite;
}
.pdp-hero__cross-sell-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdp-hero__cross-sell-skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: #f0eeea;
  animation: crossSellPulse 1.5s ease-in-out infinite;
}
.pdp-hero__cross-sell-skeleton-line:nth-child(2) { animation-delay: 0.15s; }
.pdp-hero__cross-sell-skeleton-line:nth-child(3) { animation-delay: 0.3s; }
.pdp-hero__cross-sell-skeleton-btn {
  flex-shrink: 0;
  width: 52px;
  height: 30px;
  border-radius: 6px;
  background: #f0eeea;
  animation: crossSellPulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}
@keyframes crossSellPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pdp-hero__cross-sell-skeleton[hidden] { display: none; }

/* ── Stack: vertical list inside the white box ── */
.pdp-hero__cross-sell-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pdp-hero__cross-sell-stack:empty { display: none; }
.pdp-hero__cross-sell-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid #f0f0f0;
}
.pdp-hero__cross-sell-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pdp-hero__cross-sell-card:first-child {
  padding-top: 0;
}
.pdp-hero__cross-sell-img {
  position: relative;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #f5f4f0;
  border: 1px solid #eee;
}
.pdp-hero__cross-sell-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pdp-hero__cross-sell-card:hover .pdp-hero__cross-sell-img img {
  transform: scale(1.04);
}
/* Badge removed — no discount label on cross-sell images */
.pdp-hero__cross-sell-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pdp-hero__cross-sell-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-hero__cross-sell-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-text-secondary, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-hero__cross-sell-pricing {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}
.pdp-hero__cross-sell-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__cross-sell-compare {
  font-size: 11px;
  color: var(--color-text-muted, #999);
  text-decoration: line-through;
}
.pdp-hero__cross-sell-add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
}
.pdp-hero__cross-sell-add-plus {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 0;
}
@media (hover: hover) {
  .pdp-hero__cross-sell-add:hover .pdp-hero__cross-sell-add-plus {
    max-width: 1rem;
    opacity: 1;
    margin-right: 0.2rem;
  }
}
.pdp-hero__cross-sell-add:hover {
  opacity: 0.8;
}
.pdp-hero__cross-sell-add.is-adding {
  pointer-events: none;
  opacity: 0.7;
}
.pdp-hero__cross-sell-add.is-added {
  background: var(--color-brand-green-dark, #2d8a23);
  pointer-events: none;
}

/* ---- Lightbox ---- */

.pdp-hero__lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
}

.pdp-hero__lightbox.is-open {
  display: flex;
}

.pdp-hero__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
}

.pdp-hero__lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.pdp-hero__lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pdp-hero__lightbox-counter {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
}

.pdp-hero__lightbox-stage {
  position: relative;
  z-index: 5;
  max-width: 56rem;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdp-hero__lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 0.5rem;
  user-select: none;
}

.pdp-hero__lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.pdp-hero__lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.pdp-hero__lightbox-nav--prev {
  left: 1rem;
}

.pdp-hero__lightbox-nav--next {
  right: 1rem;
}

.pdp-hero__lightbox-thumbs {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}

.pdp-hero__lightbox-thumb {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: opacity 200ms ease, border-color 200ms ease;
  flex-shrink: 0;
}

.pdp-hero__lightbox-thumb--active {
  border-color: #fff;
  opacity: 1;
}

.pdp-hero__lightbox-thumb:hover {
  opacity: 0.9;
}

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

/* Breadcrumb moved to standalone pdp-breadcrumb.liquid section */

/* ─── Description Read More ─── */
.pdp-hero__desc-wrap {
  position: relative;
}
.pdp-hero__desc-content {
  max-height: calc(1.625em * 4);
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-content {
  max-height: 60em;
}
.pdp-hero__desc-fade {
  position: absolute;
  bottom: 2.1rem;
  left: 0;
  right: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, transparent, var(--section-bg, var(--color-background, #f7f7f8)));
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-fade {
  opacity: 0;
}

/* Full-width divider with centered pill button */
.pdp-hero__desc-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
}
.pdp-hero__desc-divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-border, #e4e4e7);
}
.pdp-hero__desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e4e4e7;
  color: #1a1a2e;
  border: none;
  border-radius: 9999px;
  padding: 4px 13px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.pdp-hero__desc-toggle:hover {
  background: #d4d4d8;
}
.pdp-hero__desc-toggle:active {
  transform: scale(0.97);
}
.pdp-hero__desc-toggle-icon {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  flex-shrink: 0;
}
.pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-toggle-icon {
  transform: rotate(180deg);
}
/* Expanded = same bg, same color — unified look */
.pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-toggle {
  background: #e4e4e7;
  color: #1a1a2e;
}
.pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-toggle:hover {
  background: #d4d4d8;
}

/* ─── Installments ─── */
.pdp-hero__installments {
  margin-top: -0.5rem;
}
.pdp-hero__installments form {
  margin: 0;
  padding: 0;
}
.pdp-hero__installments shopify-payment-terms {
  font-size: 12px;
  font-family: inherit;
  color: #888;
}
.pdp-hero__installments .shopify-installments {
  font-size: 12px;
  color: #888;
  margin: 0;
  padding: 0;
}
.pdp-hero__installments .shopify-installments__content {
  font-size: 12px;
  color: #888;
}
/* Hide "Check your purchasing power" button */
.pdp-hero__installments .shopify-installments__learn-more,
.pdp-hero__installments shopify-payment-terms button,
.pdp-hero__installments .shopify-installments button {
  display: none !important;
}

/* Title sizes */
.pdp-hero__title--sm { font-size: 1.5rem; }
.pdp-hero__title--md { font-size: 2rem; }
.pdp-hero__title--lg { font-size: 2.5rem; }
@media (min-width: 750px) {
  .pdp-hero__title--sm { font-size: 1.75rem; }
  .pdp-hero__title--md { font-size: 2.25rem; }
  .pdp-hero__title--lg { font-size: 3rem; }
}

/* ── Dark scheme overrides ── */
.theme-dark .pdp-hero__doc-btn {
  color: #f5f5f5;
  border-color: rgba(255,255,255,0.25);
}
.theme-dark .pdp-hero__doc-btn svg { stroke: #f5f5f5; }
.theme-dark .pdp-hero__doc-btn:hover {
  background: #fff;
  color: #1a1a2e !important;
  border-color: #fff;
}
.theme-dark .pdp-hero__doc-btn:hover svg { stroke: #1a1a2e !important; }
.theme-dark .pdp-hero__specs-heading {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row-main {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row {
  border-bottom-color: rgba(255,255,255,0.06);
}
.theme-dark .pdp-hero__specs-row-label {
  color: rgba(255,255,255,0.6);
}
.theme-dark .pdp-hero__specs-row-sec {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.theme-dark .pdp-hero__specs-sub {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.theme-dark .pdp-hero__specs-sub-title {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-sub-body {
  border-top-color: rgba(255,255,255,0.06);
}
.theme-dark .pdp-hero__modal-title {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__modal-body {
  color: rgba(255,255,255,0.8);
}
.theme-dark .pdp-hero__modal {
  background: var(--color-background, #141416);
}
.theme-dark .pdp-hero__modal-close {
  color: rgba(255,255,255,0.5);
}
.theme-dark .pdp-hero__modal-close:hover {
  color: #f5f5f5;
  background: rgba(255,255,255,0.1);
}
.theme-dark .pdp-hero__specs-modes {
  background: rgba(255,255,255,0.05);
}
/* END_SECTION:pdp-hero */

/* START_SECTION:pdp-how-to-use (INDEX:88) */
.how-to-use {
    display: block;
    padding-block: 4rem;
  }

  .how-to-use__container {
    max-width: 72rem;
    padding-inline: 1rem;
  }

  .how-to-use__header {
    text-align: center;
    margin-block-end: 2.5rem;
  }

  .how-to-use__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground);
  }

  .how-to-use__subtitle {
    color: var(--color-text-muted);
    margin-block-start: 0.5rem;
  }

  /* Slider wrapper — positions arrows and fades */
  .how-to-use__slider-wrap {
    position: relative;
  }

  /* Scroll container */
  .how-to-use__scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 1rem;
    scrollbar-width: none;
    scroll-behavior: smooth;
  }

  .how-to-use__scroll::-webkit-scrollbar {
    display: none;
  }

  /* Card — clean editorial flow, no surrounding card chrome. Image gets
     the radius directly; text sits below clean. Mirrors the Benefits
     section's pattern so the two sections feel consistent. */
  .how-to-use__card {
    flex: 0 0 70%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
  }

  /* Image wrapper — 18px unified radius across PDP sections. */
  .how-to-use__media-wrapper {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
    border-radius: 18px;
    background: var(--alt-bg, #f0efea);
  }

  .how-to-use__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .how-to-use__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    position: absolute;
    inset: 0;
  }

  .how-to-use__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e5e0;
    padding: 2rem;
  }

  .how-to-use__placeholder svg {
    width: 100%;
    height: auto;
    opacity: 0.4;
  }

  .how-to-use__text {
    padding-inline: 0.25rem;
  }

  /* Step meta row — green pill (number) + uppercase "Step" label.
     Drawn from the section-proposals.html design the team approved. */
  .how-to-use__meta {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-block-end: 0.45rem;
  }

  .how-to-use__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--color-brand-green, #2d8a23);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }

  .how-to-use__step-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-text-muted, #5a5a6a);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .how-to-use__step-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.3;
    color: var(--color-foreground);
    margin: 0;
  }

  .how-to-use__step-desc {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted, #5a5a6a);
    margin: 0.25rem 0 0;
    line-height: 1.55;
  }

  /* ── Arrows (gallery style) ── Vertically centered on the IMAGE area
     (not the whole card with text below) — sits at ~38% of card height. */
  .how-to-use__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    padding: 0;
  }

  .how-to-use__arrow:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%) scale(1.05);
  }

  .how-to-use__arrow:active {
    transform: translateY(-50%) scale(0.97);
  }

  .how-to-use__arrow--prev {
    left: -0.75rem;
  }

  .how-to-use__arrow--next {
    right: -0.75rem;
  }

  .how-to-use__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Gradient fades (same as "You Might Like") ── */
  .how-to-use__fade {
    position: absolute;
    top: 0;
    bottom: 1rem;
    width: 3rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .how-to-use__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--section-bg, var(--color-background, #fff)) 0%, transparent 100%);
  }

  .how-to-use__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--section-bg, var(--color-background, #fff)) 0%, transparent 100%);
  }

  .how-to-use__fade--visible {
    opacity: 1;
  }

  /* ── Page-view dots (fewer dots = groups of cards) ── */
  .how-to-use__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block-start: 1rem;
  }

  .how-to-use__page-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: var(--color-border);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
  }

  .how-to-use__page-dot--active {
    width: 1.5rem;
    height: 0.5rem;
    background: var(--color-foreground);
  }

  /* Tablet: 3 visible */
  @media screen and (min-width: 750px) {
    .how-to-use {
      padding-block: 5rem;
    }

    .how-to-use__container {
      padding-inline: 1.5rem;
    }

    .how-to-use__title {
      font-size: var(--font-size-4xl);
    }

    .how-to-use__card {
      flex: 0 0 calc(33.333% - 0.67rem);
    }

    .how-to-use__arrow--prev {
      left: 0.5rem;
    }

    .how-to-use__arrow--next {
      right: 0.5rem;
    }

    .how-to-use__arrow {
      width: 40px;
      height: 40px;
    }
  }

  /* Desktop ≥990px — grid kicks in for ≤5 items, slider with arrows for 6+.
     Strict column count via [data-block-count] attribute so we get exactly
     N columns instead of auto-fit guessing (which broke on 5-item grids by
     dropping to 4 cols at typical PDP widths). */
  @media screen and (min-width: 990px) {
    .how-to-use--grid .how-to-use__scroll {
      display: grid;
      gap: 1.25rem;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-block-end: 0;
    }

    /* Fallback for grid mode (count not set) */
    .how-to-use--grid .how-to-use__scroll {
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }

    /* Strict N-col grid based on item count — 1 to 5 items render in 1-5 cols */
    .how-to-use[data-block-count="1"].how-to-use--grid .how-to-use__scroll {
      grid-template-columns: minmax(0, 22rem);
      justify-content: center;
    }
    .how-to-use[data-block-count="2"].how-to-use--grid .how-to-use__scroll {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 48rem;
      margin-inline: auto;
    }
    .how-to-use[data-block-count="3"].how-to-use--grid .how-to-use__scroll {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .how-to-use[data-block-count="4"].how-to-use--grid .how-to-use__scroll {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .how-to-use[data-block-count="5"].how-to-use--grid .how-to-use__scroll {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .how-to-use--grid .how-to-use__pager,
    .how-to-use--grid .how-to-use__arrow,
    .how-to-use--grid .how-to-use__fade {
      display: none;
    }

    /* Slider mode (6+ items) — show 5 cards with arrows for paging */
    .how-to-use--slider .how-to-use__card {
      flex: 0 0 calc(20% - 0.8rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .how-to-use__page-dot,
    .how-to-use__arrow {
      transition: none;
    }
  }
/* END_SECTION:pdp-how-to-use */

/* START_SECTION:pdp-image-grid (INDEX:89) */
.pdp-image-grid {
    padding: 4rem 0;
  }

  @media screen and (min-width: 750px) {
    .pdp-image-grid {
      padding: 5rem 0;
    }
  }

  /* Background scheme — Mirage is the darker option that breaks the page's
     light rhythm; the others keep the section flush with its neighbours.
     assets/pdp-unified-v2.css pins every PDP section to
     `background-color: transparent !important`, so an opt-in scheme has to
     match that weight. Doubled class keeps it above the unified rule on
     specificity too, not just on source order. */
  .pdp-image-grid.pdp-image-grid--bg-transparent { background-color: transparent !important; }
  .pdp-image-grid.pdp-image-grid--bg-white { background-color: #ffffff !important; }
  .pdp-image-grid.pdp-image-grid--bg-cream { background-color: #f7f7f8 !important; }
  .pdp-image-grid.pdp-image-grid--bg-mirage { background-color: #131c29 !important; }

  .pdp-image-grid__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  /* Header */
  .pdp-image-grid__header {
    text-align: center;
    margin-bottom: 2.5rem;
  }

  /* Logo sits on its own line above the heading. The theme's global
     `img { display: block }` strips the inline centring the header's
     text-align would otherwise give it, hence the explicit auto margins. */
  .pdp-image-grid__corner-icon {
    display: block;
    width: 48px;
    height: auto;
    margin: 0 auto 1rem;
    object-fit: contain;
  }

  .pdp-image-grid__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 0 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .pdp-image-grid__title {
      font-size: 2.25rem;
    }
  }

  .pdp-image-grid__subtitle {
    font-size: 0.9375rem;
    /* Mirage-derived light text (client palette): the neutral grey secondary
       token read off-brand here (MEL-1124). */
    color: rgba(19, 28, 41, 0.66);
    margin: 0 auto;
    max-width: 560px;
    line-height: 1.6;
  }

  /* On Mirage the header flips to light type. The corner logo is mostly black
     artwork, so it gets the same white plaque the per-card icon chips use
     rather than disappearing into the background. */
  .pdp-image-grid--bg-mirage .pdp-image-grid__title { color: #ffffff !important; }
  .pdp-image-grid--bg-mirage .pdp-image-grid__subtitle { color: rgba(255, 255, 255, 0.72) !important; }
  .pdp-image-grid--bg-mirage .pdp-image-grid__corner-icon {
    box-sizing: content-box;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    box-shadow: 0 2px 10px -2px rgba(0, 0, 0, 0.18);
  }

  /* Grid layouts */
  .pdp-image-grid__grid {
    display: grid;
    gap: var(--grid-gap, 1rem);
  }

  /* 1 block: full width */
  .pdp-image-grid--count-1 .pdp-image-grid__grid {
    grid-template-columns: 1fr;
  }

  /* 2 blocks: 2 equal columns */
  .pdp-image-grid--count-2 .pdp-image-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 blocks: 3 equal columns */
  .pdp-image-grid--count-3 .pdp-image-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 4 blocks: 2x2 grid */
  .pdp-image-grid--count-4 .pdp-image-grid__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 5+ blocks: auto-fit */
  .pdp-image-grid--count-5 .pdp-image-grid__grid,
  .pdp-image-grid--count-6 .pdp-image-grid__grid,
  .pdp-image-grid--count-7 .pdp-image-grid__grid,
  .pdp-image-grid--count-8 .pdp-image-grid__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  /* Item */
  .pdp-image-grid__item {
    position: relative;
  }

  .pdp-image-grid__media-wrap {
    position: relative;
    border-radius: var(--radius-xl, 1rem);
    overflow: hidden;
  }

  .pdp-image-grid__link {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  /* Media container */
  .pdp-image-grid__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl, 1rem);
    background: #f0efea;
  }

  .pdp-image-grid__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--image-ratio, auto);
    transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pdp-image-grid__media--zoomable:hover .pdp-image-grid__img {
    transform: scale(1.03);
  }

  /* Video — object-fit: cover means the file crops to the block ratio rather
     than letterboxing, so export the source at the ratio you set above. */
  .pdp-image-grid__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: var(--image-ratio, 16 / 9);
    border: 0;
    border-radius: var(--radius-xl, 1rem);
    background: #131c29;
  }

  /* Shopify's video_tag can wrap the <video> in its own deferred-media
     container; force that wrapper to fill the cell so the ratio holds. */
  .pdp-image-grid__media > deferred-media,
  .pdp-image-grid__media > .video-wrapper,
  .pdp-image-grid__media > .deferred-media {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* External embeds (YouTube/Vimeo) — iframes have no intrinsic ratio, so the
     wrapper carries it and the iframe fills absolutely. */
  .pdp-image-grid__media--embed {
    aspect-ratio: var(--image-ratio, 16 / 9);
  }

  .pdp-image-grid__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  /* Placeholder */
  .pdp-image-grid__placeholder {
    aspect-ratio: var(--image-ratio, 1 / 1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e7e3;
  }

  .pdp-image-grid__placeholder-svg {
    width: 60%;
    height: 60%;
    opacity: 0.3;
  }

  /* ── Caption overlay (bottom of each card) ────────────── */
  .pdp-image-grid__item { position: relative; }
  .pdp-image-grid__item .blur-up,
  .pdp-image-grid__item .pdp-image-grid__media {
    border-radius: 14px;
    overflow: hidden;
  }

  .pdp-image-grid__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    /* Taller top pad + earlier gradient ramp: the icon now sits inside this
       overlay, so the scrim has to start higher to keep it legible. */
    padding: 3.25rem 1.25rem 1.1rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.42) 42%, rgba(0, 0, 0, 0) 100%);
    border-end-end-radius: 14px;
    border-end-start-radius: 14px;
    pointer-events: none;
  }

  /* Icon stacks above the caption text in a single column */
  .pdp-image-grid__caption-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
  }

  /* No plaque, no chip — white/light SVGs read directly against the media.
     The drop-shadow mirrors the caption text-shadow so light icons still hold
     up over a bright frame. */
  .pdp-image-grid__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
    filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.45));
  }

  .pdp-image-grid__caption-text {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  }

  /* ── Description popover (optional, via <details>) ─────── */
  .pdp-image-grid__more {
    position: relative;
    pointer-events: auto;
    flex-shrink: 0;
  }
  .pdp-image-grid__more > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .pdp-image-grid__more > summary::-webkit-details-marker { display: none; }
  .pdp-image-grid__more > summary:hover { background: rgba(0, 0, 0, 0.7); transform: scale(1.05); }
  .pdp-image-grid__more[open] > summary { background: #ffffff; color: #1a1a2e; }

  .pdp-image-grid__description {
    position: absolute;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline-end: 0;
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.875rem 1rem;
    background: #ffffff;
    color: #1a1a2e;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
    font-size: 0.8125rem;
    line-height: 1.55;
    z-index: 5;
  }
  .pdp-image-grid__description::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 12px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }

  /* ── Mobile: switch to horizontal scroll (same rhythm as recs / treatment-modes) ── */
  @media screen and (max-width: 749px) {
    .pdp-image-grid { padding: 3rem 0; }
    .pdp-image-grid__title { font-size: 1.5rem; }
    .pdp-image-grid__header { margin-bottom: 1.5rem; }
    .pdp-image-grid__inner { padding: 0; }
    .pdp-image-grid__header { padding-inline: 1.25rem; }

    .pdp-image-grid__grid {
      display: flex !important;
      grid-template-columns: none !important;
      gap: 0.75rem !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding-inline-start: 1.25rem;
      padding-inline: 1.25rem 1.25rem;
      padding-block-end: 0.5rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .pdp-image-grid__grid::-webkit-scrollbar { display: none; }

    .pdp-image-grid__item {
      flex: 0 0 78%;
      scroll-snap-align: start;
    }

    .pdp-image-grid__icon {
      width: 1.75rem;
      height: 1.75rem;
    }

    .pdp-image-grid__caption {
      padding: 2.75rem 1rem 0.95rem;
    }

    /* Hide the popover arrow on mobile — popover anchors differently here */
    .pdp-image-grid__description::after { display: none; }
    .pdp-image-grid__description {
      inset-inline-start: 0;
      inset-inline-end: auto;
      max-width: calc(100vw - 2.5rem);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-image-grid__video {
      /* Autoplay loops are decorative; let the OS setting pause them. */
      animation-play-state: paused;
    }
  }
/* END_SECTION:pdp-image-grid */

/* START_SECTION:pdp-recommendations (INDEX:90) */
.pdp-recommendations {
    display: block;
    padding: 3rem 0;
    background: transparent;
  }
  .pdp-recommendations--dark {
    background: transparent;
  }
  .pdp-recommendations--dark .pdp-recommendations__tab {
    color: rgba(255,255,255,0.5);
  }
  .pdp-recommendations--dark .pdp-recommendations__tab::after {
    background: #f5f5f5;
  }
  .pdp-recommendations--dark .pdp-recommendations__arrow {
    background: #1e1e21;
    border-color: rgba(255,255,255,0.1);
    color: #f5f5f5;
  }
  .pdp-recommendations--dark .pdp-recommendations__dot,
  .pdp-recommendations--dark .pdp-recommendations__page-dot {
    background: rgba(255,255,255,0.2);
  }
  .pdp-recommendations--dark .pdp-recommendations__dot--active,
  .pdp-recommendations--dark .pdp-recommendations__page-dot--active {
    background: #f5f5f5;
  }
  .pdp-recommendations--dark .pdp-recommendations__empty {
    color: rgba(255,255,255,0.4);
  }
  /* Hide add-to-cart + quick view buttons inside recommendations */
  .pdp-recommendations .nf-card__actions { display: none; }
  .pdp-recommendations .nf-card__add-btn { display: none; }
  .pdp-recommendations .nf-card__quick-view { display: none; }

  .pdp-recommendations__section-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-foreground, #1a1a2e);
    margin: 0;
    padding: 0.375rem 0;
  }
  .pdp-recommendations--dark .pdp-recommendations__section-title { color: #f5f5f5; }
  .pdp-recommendations--dark .pdp-recommendations__tab-container {
    background: rgba(255,255,255,0.08);
  }
  .pdp-recommendations--dark .pdp-recommendations__tab-container:has(.pdp-recommendations__section-title) {
    background: transparent;
    padding: 0;
  }
  .pdp-recommendations--dark .pdp-recommendations__tab--active {
    background: #f5f5f5;
    color: #1a1a2e;
  }
  .pdp-recommendations--dark .pdp-recommendations__tab--active:hover {
    color: #1a1a2e;
  }
  .pdp-recommendations--dark .pdp-recommendations__browse-link {
    color: rgba(255,255,255,0.5);
  }
  .pdp-recommendations--dark .pdp-recommendations__browse-link:hover {
    color: #f5f5f5;
  }
  .pdp-recommendations--dark .pdp-recommendations__fade--left {
    background: linear-gradient(to right, #141416 0%, transparent 100%);
  }
  .pdp-recommendations--dark .pdp-recommendations__fade--right {
    background: linear-gradient(to left, #141416 0%, transparent 100%);
  }
  /* Card-level dark styling lives in snippets/product-card.liquid (.nf-card--dark).
     Pass color_scheme: 'dark' to the product-card render call to enable. */

  @media screen and (min-width: 750px) {
    .pdp-recommendations {
      padding: 4rem 0;
    }
  }

  .pdp-recommendations__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .pdp-recommendations__header {
    margin-bottom: 1.5rem;
  }

  .pdp-recommendations__tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .pdp-recommendations__tab-container {
    display: inline-flex;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-button);
    padding: 0.25rem;
  }
  /* When only a section title is inside (collection context), strip pill bg */
  .pdp-recommendations__tab-container:has(.pdp-recommendations__section-title) {
    background: transparent;
    padding: 0;
  }

  .pdp-recommendations__tab {
    padding: 0.375rem 1rem;
    border: none;
    border-radius: var(--radius-button);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
    background: transparent;
    color: #71717a;
    white-space: nowrap;
  }

  .pdp-recommendations__tab:hover {
    color: #1a1a2e;
  }

  .pdp-recommendations__tab--active {
    background: #1a1a2e;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .pdp-recommendations__tab--active:hover {
    color: #fff;
  }

  .pdp-recommendations__browse-link,
  .pdp-recommendations__browse-link:hover {
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .pdp-recommendations__browse-link {
    color: #71717a;
    transition: color 200ms ease;
  }

  .pdp-recommendations__browse-link:hover {
    color: #1a1a2e;
  }

  .pdp-recommendations__browse-arrow {
    font-size: 0.6875rem;
  }

  .pdp-recommendations__browse-link--desktop {
    display: none;
  }

  .pdp-recommendations__browse-link--mobile {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  .pdp-recommendations__panel {
    display: none;
  }

  .pdp-recommendations__panel--active {
    display: block;
  }

  .pdp-recommendations__slider-wrap {
    position: relative;
    /* flow-root keeps the slider's shadow-bleed negative margins from
       collapsing through this wrapper (which would shift the section). */
    display: flow-root;
  }

  .pdp-recommendations__slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Vertical bleed so the card hover shadow (0 8px 24px) can paint
       instead of being clipped by the scroller. The negative margins
       cancel the padding, so net layout keeps the original 0.5rem
       bottom spacing. */
    padding-top: 24px;
    margin-top: -24px;
    padding-bottom: 40px;
    margin-bottom: -32px;
  }

  .pdp-recommendations__slider::-webkit-scrollbar {
    display: none;
  }

  .pdp-recommendations__fade {
    position: absolute;
    top: 0;
    bottom: 0.5rem;
    width: 3rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .pdp-recommendations__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--section-bg, var(--color-background, #f0efea)) 0%, transparent 100%);
  }

  .pdp-recommendations__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--section-bg, var(--color-background, #f0efea)) 0%, transparent 100%);
  }

  .pdp-recommendations__fade--visible {
    opacity: 1;
  }

  .pdp-recommendations__card {
    flex: 0 0 200px;
    min-width: 200px;
  }

  .pdp-recommendations__card .nf-card {
    width: 100%;
  }

  .pdp-recommendations__card-link,
  .pdp-recommendations__card-link:hover {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .pdp-recommendations__card-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #f5f5f7;
    margin-bottom: 0.625rem;
    border: 1px solid #e5e5e5;
    transition: border-color 200ms ease;
  }

  .pdp-recommendations__card-link:hover .pdp-recommendations__card-image-wrap {
    border-color: rgba(26, 26, 46, 0.2);
  }

  .pdp-recommendations__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
  }

  .pdp-recommendations__card-link:hover .pdp-recommendations__card-image {
    transform: scale(1.05);
  }

  .pdp-recommendations__badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-button);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.4;
  }

  .pdp-recommendations__badge--bestseller {
    background: #3b82f6;
  }

  .pdp-recommendations__badge--new {
    background: #8b5cf6;
  }

  .pdp-recommendations__badge--limited {
    background: #ef4444;
  }


  .pdp-recommendations__card-info {
    padding: 0 0.125rem;
  }

  .pdp-recommendations__card-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
  }

  .pdp-recommendations__card-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
  }

  .pdp-recommendations__stars {
    color: #f59e0b;
    font-size: 0.8125rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }

  .pdp-recommendations__review-count {
    font-size: 0.75rem;
    color: #71717a;
  }

  .pdp-recommendations__card-price {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0.125rem 0 0;
  }

  .pdp-recommendations__empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #71717a;
    font-size: 0.9375rem;
  }

  .pdp-recommendations__loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #71717a;
    font-size: 0.9375rem;
    width: 100%;
  }

  .pdp-recommendations__browse-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 3rem auto;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    background: var(--color-foreground, #1a1a2e);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.15s ease, opacity 0.2s ease;
  }
  .pdp-recommendations__browse-cta:hover {
    transform: translateY(-1px);
    opacity: 0.92;
  }
  .pdp-recommendations__browse-cta svg {
    transition: transform 0.2s ease;
  }
  .pdp-recommendations__browse-cta:hover svg {
    transform: translateX(2px);
  }

  /* ── Arrows (gallery style) ── */
  .pdp-recommendations__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a2e;
    transition: opacity 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    padding: 0;
  }

  .pdp-recommendations__arrow:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transform: translateY(-50%) scale(1.05);
  }

  .pdp-recommendations__arrow:active {
    transform: translateY(-50%) scale(0.97);
  }

  .pdp-recommendations__arrow--prev { left: 0.5rem; }
  .pdp-recommendations__arrow--next { right: 0.5rem; }

  .pdp-recommendations__arrow[disabled] {
    opacity: 0;
    pointer-events: none;
  }

  /* ── Page dots ── */
  .pdp-recommendations__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .pdp-recommendations__page-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-border, #deddd8);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
  }

  .pdp-recommendations__page-dot--active {
    width: 1.5rem;
    background: var(--color-foreground, #1a1a2e);
  }

  @media screen and (min-width: 750px) {
    .pdp-recommendations__browse-link--desktop {
      display: inline-flex;
    }

    .pdp-recommendations__browse-link--mobile {
      display: none;
    }

    .pdp-recommendations__card {
      flex: 0 0 200px;
      min-width: 200px;
    }

    .pdp-recommendations__arrow {
      width: 40px;
      height: 40px;
    }
    .pdp-recommendations__arrow--prev { left: 0.5rem; }
    .pdp-recommendations__arrow--next { right: 0.5rem; }
  }
/* END_SECTION:pdp-recommendations */

/* START_SECTION:pdp-reviews (INDEX:91) */
/* -- Section wrapper -- */
  .pdp-reviews {
    display: block;
    padding: 3.5rem 0 3rem;
  }

  @media screen and (min-width: 750px) {
    .pdp-reviews {
      padding: 4rem 0;
    }
  }

  .pdp-reviews__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
  }

  /* -- Header -- */
  .pdp-reviews__header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .pdp-reviews__title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #1a1a2e;
    margin: 0 0 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .pdp-reviews__title {
      font-size: 2.25rem;
    }
  }

  .pdp-reviews__subtitle {
    font-size: 0.9375rem;
    color: rgba(26, 26, 46, 0.55);
    margin: 0 auto 1rem;
    max-width: 480px;
    line-height: 1.5;
  }

  .pdp-reviews__trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
  }

  .pdp-reviews__tp-stars-img {
    height: 20px;
    width: auto;
    flex-shrink: 0;
  }

  .pdp-reviews__trust-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a2e;
    letter-spacing: 0.01em;
  }

  /* -- Loading -- */
  .pdp-reviews__loading {
    text-align: center;
    padding: 2rem 0;
    color: rgba(26, 26, 46, 0.45);
    font-size: 0.875rem;
  }

  /* -- Toolbar: star filter left, sort dropdown right -- */
  .pdp-reviews__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  /* -- Star rating filter -- */
  .pdp-reviews__star-filter {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
  }

  .pdp-reviews__star-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5c5f6e;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: inherit;
    line-height: 1.4;
  }

  .pdp-reviews__star-btn:hover:not(:disabled):not(.pdp-reviews__star-btn--active) {
    border-color: #00b67a;
    color: #1a1a2e;
  }

  .pdp-reviews__star-btn--active,
  .pdp-reviews__star-btn--active:hover {
    background: #00b67a;
    color: #fff !important;
    border-color: #00b67a;
  }

  .pdp-reviews__star-btn--active:hover {
    background: #009a65;
  }

  .pdp-reviews__star-btn--active svg polygon {
    fill: #fff;
  }

  .pdp-reviews__star-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
  }

  .pdp-reviews__star-btn-count {
    font-size: 0.6875rem;
    opacity: 0.7;
  }

  /* -- Sort dropdown -- */
  .pdp-reviews__sort-wrap {
    flex-shrink: 0;
  }

  .pdp-reviews__sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235c5f6e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
    border: 1px solid #e5e7eb;
    border-radius: 2rem;
    padding: 0.4375rem 2.25rem 0.4375rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5c5f6e;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 200ms ease;
  }

  .pdp-reviews__sort-select:hover {
    border-color: var(--color-brand-green-dark, #2d8a23);
  }

  .pdp-reviews__sort-select:focus {
    outline: none;
    border-color: var(--color-brand-green-dark, #2d8a23);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-green-dark, #2d8a23) 15%, transparent);
  }

  /* -- Masonry grid -- */
  .pdp-reviews__masonry-wrap {
    position: relative;
  }

  .pdp-reviews__masonry {
    columns: 3;
    column-gap: 1rem;
  }

  .pdp-reviews__blur-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, var(--section-bg-transparent, rgba(255,255,255,0)) 0%, var(--section-bg-semi, rgba(255,255,255,0.7)) 40%, var(--section-bg, #fff) 100%);
    pointer-events: none;
    z-index: 2;
  }

  /* -- Review card -- */
  .pdp-reviews__card {
    break-inside: avoid;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
  }

  .pdp-reviews__card-stars {
    display: flex;
    align-items: center;
    line-height: 1;
  }

  .pdp-reviews__card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.4;
  }

  .pdp-reviews__card-quote {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #444;
    margin: 0;
  }

  /* -- Card photos -- */
  .pdp-reviews__card-photos {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .pdp-reviews__card-photo-btn {
    display: block;
    border: 1px solid #eee;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    background: #f5f5f0;
    padding: 0;
    transition: border-color 200ms ease, transform 200ms ease;
  }

  .pdp-reviews__card-photo-btn:hover {
    border-color: #1a1a2e;
    transform: scale(1.04);
  }

  .pdp-reviews__card-photo {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.375rem;
  }

  /* -- Card footer -- */
  .pdp-reviews__card-footer {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid #f0f0f0;
    margin-top: auto;
  }

  .pdp-reviews__card-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
  }

  .pdp-reviews__card-author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .pdp-reviews__card-author-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a2e;
  }

  .pdp-reviews__card-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: #111;
    font-weight: 500;
  }

  .pdp-reviews__card-date {
    font-size: 0.6875rem;
    color: #999;
  }

  /* -- Section footer -- */
  .pdp-reviews__footer {
    text-align: center;
    margin-top: 1.5rem;
    position: relative;
    z-index: 3;
  }

  .pdp-reviews__show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid #1a1a2e;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.75rem 2.25rem;
    border-radius: var(--radius-button);
    cursor: pointer;
    transition: all 250ms ease;
  }

  .pdp-reviews__show-more:hover {
    background: #1a1a2e;
    color: #fff;
  }

  /* -- Photo gallery grid -- */
  .pdp-reviews__photo-gallery {
    margin-bottom: 1.5rem;
  }

  .pdp-reviews__photo-gallery-grid {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .pdp-reviews__photo-gallery-grid::-webkit-scrollbar { display: none; }

  .pdp-reviews__gallery-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #eee;
    cursor: pointer;
    background: none;
    padding: 0;
    scroll-snap-align: start;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    position: relative;
  }

  .pdp-reviews__gallery-thumb:hover {
    border-color: var(--color-brand-green-dark, #2d8a23);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 2;
  }

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

  /* -- Desktop hover preview popup -- */
  .pdp-reviews__photo-preview {
    display: none;
    position: fixed;
    z-index: 100;
    width: 320px;
    height: 320px;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 200ms ease, transform 200ms ease;
  }

  .pdp-reviews__photo-preview.is-visible {
    display: block;
    opacity: 1;
    transform: scale(1);
  }

  .pdp-reviews__photo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hide hover preview on touch devices */
  @media (hover: none) {
    .pdp-reviews__photo-preview { display: none !important; }
  }

  /* -- Lightbox with navigation -- */
  .pdp-reviews__lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  .pdp-reviews__lightbox--open {
    display: flex;
  }

  .pdp-reviews__lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    padding: 0.5rem;
    transition: opacity 200ms ease;
  }

  .pdp-reviews__lightbox-close:hover { opacity: 0.7; }

  .pdp-reviews__lightbox-img {
    max-width: 85vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 0.5rem;
    user-select: none;
    -webkit-user-drag: none;
  }

  .pdp-reviews__lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 200ms ease;
    z-index: 10;
  }

  .pdp-reviews__lightbox-nav:hover {
    background: rgba(255,255,255,0.25);
  }

  .pdp-reviews__lightbox-nav--prev { left: 1rem; }
  .pdp-reviews__lightbox-nav--next { right: 1rem; }

  .pdp-reviews__lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
  }

  /* -- Hidden Judge.me source -- */
  .pdp-reviews__jdgm-source {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .pdp-reviews__jdgm-source .jdgm-rev-widg,
  .pdp-reviews__jdgm-source .jdgm-rev-widg__body,
  .pdp-reviews__jdgm-source .jdgm-rev-widg__reviews,
  .pdp-reviews__jdgm-source .jdgm-rev,
  .pdp-reviews__jdgm-source .jdgm-rev__header,
  .pdp-reviews__jdgm-source .jdgm-rev__content {
    display: block !important;
    visibility: visible !important;
  }

  .pdp-reviews__jdgm-source .jdgm-temp-hiding-style {
    display: none !important;
  }

  /* -- Responsive -- */
  @media screen and (max-width: 1024px) {
    .pdp-reviews__masonry {
      columns: 2;
    }
  }

  @media screen and (max-width: 749px) {
    .pdp-reviews {
      padding: 2.5rem 0 2rem;
    }
    .pdp-reviews__title {
      font-size: 1.5rem;
    }
    .pdp-reviews__masonry {
      columns: 2;
      column-gap: 0.75rem;
    }
    .pdp-reviews__card {
      padding: 1rem;
      border-radius: 0.5rem;
    }
    .pdp-reviews__card-quote {
      font-size: 0.75rem;
    }
    .pdp-reviews__card-avatar {
      width: 1.75rem;
      height: 1.75rem;
      font-size: 0.625rem;
    }
    /* Show only 2 cards on mobile, rest hidden until expanded */
    .pdp-reviews__masonry .pdp-reviews__card:nth-child(n+3) {
      display: none;
    }
    .pdp-reviews__masonry.pdp-reviews__masonry--expanded .pdp-reviews__card {
      display: flex !important;
    }
    .pdp-reviews__blur-overlay {
      height: 90px;
    }
    .pdp-reviews__card-photo {
      width: 48px;
      height: 48px;
    }
    .pdp-reviews__gallery-thumb {
      flex: 0 0 60px;
      width: 60px;
      height: 60px;
    }
    .pdp-reviews__lightbox-nav {
      width: 36px;
      height: 36px;
    }
    .pdp-reviews__lightbox-nav svg {
      width: 18px;
      height: 18px;
    }
  }

  @media screen and (max-width: 480px) {
    .pdp-reviews__masonry {
      columns: 1;
    }
    .pdp-reviews__title--rich p,
  .pdp-reviews__subtitle--rich p { margin: 0; }
  }
/* END_SECTION:pdp-reviews */

/* START_SECTION:pdp-stories (INDEX:92) */
/* ════════════════════════════════════════════
   PDP Text + Media Blocks
   ──────────────────────────────────────────
   Section-level cohesion: shared container,
   shared background, consistent block rhythm,
   constrained aspect ratios.
   ════════════════════════════════════════════ */

.pdp-tmb {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  /* Same glyph as snippets/info-tooltip.liquid, as a mask so the note pill
     below can tint it with currentColor on light and dark blocks alike. */
  --pdp-tmb-info-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Ccircle cx='12' cy='8' r='1' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.pdp-tmb--bg-cream {
  background: #f7f7f8;
}
.pdp-tmb--bg-white {
  background: #ffffff;
}
.pdp-tmb--bg-transparent {
  background: transparent;
}

.pdp-tmb__container {
  max-width: 72rem;
  margin: 0 auto;
  padding-inline: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 768px) {
  .pdp-tmb__container { padding-inline: 2rem; }
}

/* ── Section header (optional, from section settings) ── */
.pdp-tmb__section-header {
  text-align: center;
  max-width: 54rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pdp-tmb__section-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green, #48A06A);
}
.pdp-tmb__section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.pdp-tmb__section-sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted, #5a5a6a);
  margin: 0.25rem 0 0;
}

/* ── Blocks list (vertical stack with consistent gap) ── */
.pdp-tmb__blocks {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 3.5rem);
}

/* ── Inline alternating block ── */
.pdp-tmb__block--inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .pdp-tmb__block--inline {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  /* Cleaner image-right using direction trick (no order shuffling) */
  .pdp-tmb__block--image-right {
    direction: rtl;
  }
  .pdp-tmb__block--image-right > * {
    direction: ltr;
  }
}

/* ── Media ── */
.pdp-tmb__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  isolation: isolate;
}
.pdp-tmb__img,
.pdp-tmb__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Copy ── */
.pdp-tmb__copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .pdp-tmb__copy {
    padding-inline: 0.5rem;
  }
}

.pdp-tmb__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green, #48A06A);
}
.pdp-tmb__heading {
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(1.5rem, 2.75vw, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}
.pdp-tmb__heading--full {
  font-size: clamp(1.75rem, 3.5vw, 2.625rem);
}
.pdp-tmb__body {
  font-size: 1rem;
  line-height: 1.65;
  /* --color-text-muted resolves to #999 theme-wide, which sits under the
     4.5:1 floor on these light backgrounds and read washed out beside the
     headings (Marta, MEL-1134). Mirage at 78% stays in the brand tonal
     family instead of jumping to a neutral grey. */
  color: rgba(19, 28, 41, 0.78);
  max-width: 34rem;
}
.pdp-tmb__body > *:first-child { margin-top: 0; }
.pdp-tmb__body > *:last-child  { margin-bottom: 0; }
.pdp-tmb__body p { margin: 0 0 0.75em; }
.pdp-tmb__body p:last-child { margin-bottom: 0; }

/* ── Note pill ──────────────────────────────────────────────
   A paragraph set entirely in italics is the editors' convention for a
   caveat ("Requires Overwolf and the Nanoleaf App…"). At this size italics
   read as a typo rather than an aside, so the whole paragraph renders as an
   info pill instead (Marta, MEL-1134). Driven off the markup the rich-text
   editor already produces, so no new metaobject field is needed.
   Browsers without :has() keep today's italic paragraph. */
.pdp-tmb__body p:has(> em:only-child) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  margin-block: 0.25rem 0;
  padding: 0.5rem 1rem 0.5rem 0.8125rem;
  border-radius: 999px;
  background: rgba(72, 160, 106, 0.1);
  border: 1px solid rgba(72, 160, 106, 0.28);
  color: var(--color-brand-green-text, #308551);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.45;
}
.pdp-tmb__body p:has(> em:only-child)::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-block-start: 0.1em;
  background: currentColor;
  -webkit-mask: var(--pdp-tmb-info-mask) center / contain no-repeat;
  mask: var(--pdp-tmb-info-mask) center / contain no-repeat;
}
.pdp-tmb__body p:has(> em:only-child) > em { font-style: normal; }
.pdp-tmb__block--dark .pdp-tmb__body p:has(> em:only-child) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}
.pdp-tmb__body strong { color: var(--color-foreground, #1a1a2e); font-weight: 600; }
.pdp-tmb__body a {
  color: var(--color-brand-green, #48A06A);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-tmb__body ul, .pdp-tmb__body ol {
  margin: 0.25em 0 0.75em;
  padding-left: 1.25em;
}
.pdp-tmb__body ul { list-style: none; padding-left: 0; }
.pdp-tmb__body ul li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: 0.4em;
  line-height: 1.55;
}
.pdp-tmb__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand-green, #48A06A);
}
.pdp-tmb__body ol li { margin-bottom: 0.4em; line-height: 1.55; }
.pdp-tmb__body h3, .pdp-tmb__body h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 1.25em 0 0.4em;
}
.pdp-tmb__body h3:first-child, .pdp-tmb__body h4:first-child { margin-top: 0; }

/* ── CTA — underlined text link with arrow ── */
.pdp-tmb__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-self: flex-start;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-brand-green, #48A06A);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid currentColor;
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.pdp-tmb__cta svg { transition: transform 0.2s ease; flex-shrink: 0; }
.pdp-tmb__cta:hover { gap: 0.75rem; opacity: 0.85; }
.pdp-tmb__cta:hover svg { transform: translateX(2px); }

/* ── Full-width hero block ── */
.pdp-tmb__block--full {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pdp-tmb__media--full {
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: 14px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .pdp-tmb__media--full { aspect-ratio: 4 / 3; }
}
.pdp-tmb__copy--full {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
  align-items: center;
  padding-inline: 0.5rem;
}
.pdp-tmb__copy--full .pdp-tmb__body { max-width: 54rem; }
.pdp-tmb__block--full .pdp-tmb__cta { align-self: center; }

/* ── Dark color scheme (per-block override) ── */
.pdp-tmb__block--dark {
  background: #1a1a2e;
  color: #f5f5f5;
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.pdp-tmb__block--dark .pdp-tmb__heading { color: #ffffff; }
.pdp-tmb__block--dark .pdp-tmb__body    { color: rgba(255, 255, 255, 0.72); }
.pdp-tmb__block--dark .pdp-tmb__body strong { color: #ffffff; }
.pdp-tmb__block--dark .pdp-tmb__body a      { color: #ffffff; }
.pdp-tmb__block--dark .pdp-tmb__eyebrow     { color: var(--color-brand-green, #48A06A); }
.pdp-tmb__block--dark .pdp-tmb__cta         { color: #ffffff; }
.pdp-tmb__block--dark .pdp-tmb__media       { background: rgba(255, 255, 255, 0.08); }

/* ── Split duo panel ── */
.pdp-tmb__block--split {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pdp-tmb__split-frame {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) {
  .pdp-tmb__split-frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: clamp(400px, 42vw, 540px);
  }
}
.pdp-tmb__split-panel {
  position: relative;
  min-width: 0;
}
.pdp-tmb__split-panel--media {
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .pdp-tmb__split-panel--media { aspect-ratio: auto; }
}
.pdp-tmb__split-panel--media .pdp-tmb__img,
.pdp-tmb__split-panel--media .pdp-tmb__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .pdp-tmb__split-panel--media .pdp-tmb__img,
  .pdp-tmb__split-panel--media .pdp-tmb__video {
    position: static;
  }
}
.pdp-tmb__split-panel--copy {
  background: #f7f7f8;
  display: flex;
  align-items: center;
}
.pdp-tmb__copy--split {
  padding: clamp(2rem, 5vw, 3.5rem);
}
.pdp-tmb__copy--split .pdp-tmb__body { max-width: 28rem; }
.pdp-tmb__block--dark .pdp-tmb__split-panel--copy {
  background: #1a1a2e;
}
/* Dark split keeps panel bg; cancel the generic dark-block card wrap */
.pdp-tmb__block--dark.pdp-tmb__block--split {
  background: transparent;
  padding: 0;
  color: inherit;
}
.pdp-tmb__block--dark.pdp-tmb__block--split .pdp-tmb__copy--split .pdp-tmb__heading { color: #ffffff; }
.pdp-tmb__block--dark.pdp-tmb__block--split .pdp-tmb__copy--split .pdp-tmb__body { color: rgba(255, 255, 255, 0.72); }
.pdp-tmb__block--dark.pdp-tmb__block--split .pdp-tmb__copy--split .pdp-tmb__cta { color: #ffffff; }
.pdp-tmb__block--dark.pdp-tmb__block--split .pdp-tmb__copy--full .pdp-tmb__heading { color: var(--color-foreground, #1a1a2e); }
.pdp-tmb__block--dark.pdp-tmb__block--split .pdp-tmb__copy--full .pdp-tmb__body { color: rgba(19, 28, 41, 0.78); }

/* ── Before/after slider ── */
.pdp-tmb__block--slider {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.pdp-tmb__block--dark.pdp-tmb__block--slider {
  background: transparent;
  padding: 0;
  color: inherit;
}
.pdp-tmb__ba {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(0, 0, 0, 0.04);
}
@media (max-width: 767px) {
  .pdp-tmb__ba { aspect-ratio: 4 / 3; }
}
.pdp-tmb__ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pdp-tmb__ba-before {
  position: absolute;
  inset: 0;
  /* Initial 50% split; JS drives clip-path directly per pointer event —
     writing a parent custom property invalidated the whole subtree. */
  clip-path: inset(0 50% 0 0);
  z-index: 1;
}
/* Labels are merchant-editable, so they can run longer than "Before"/"After".
   Cap the width and ellipsize rather than let a long label collide with the
   divider or wrap into a two-line pill. */
.pdp-tmb__ba-label {
  position: absolute;
  top: 1rem;
  z-index: 2;
  max-width: calc(50% - 2rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(26, 26, 46, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  pointer-events: none;
}
.pdp-tmb__ba-label--before { left: 1rem; }
.pdp-tmb__ba-label--after  { right: 1rem; }
.pdp-tmb__ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Initial 50%; once JS is live it parks left at 0 and drives position
     via transform only (left is a layout property, recomputed per event) */
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pdp-tmb__ba-handle:focus-visible {
  outline: none;
}
.pdp-tmb__ba-handle:focus-visible .pdp-tmb__ba-knob {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}
.pdp-tmb__ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
}
.pdp-tmb__ba-knob {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--color-foreground, #1a1a2e);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  transition: transform 0.15s ease;
}
.pdp-tmb__ba-handle:hover .pdp-tmb__ba-knob,
.pdp-tmb__ba[data-dragging] .pdp-tmb__ba-knob {
  transform: scale(1.06);
}

/* ── Mobile refinements ── */
@media (max-width: 767px) {
  .pdp-tmb__media { aspect-ratio: 4 / 3; }
  .pdp-tmb__cta { font-size: 0.875rem; }
  .pdp-tmb__ba-knob { width: 40px; height: 40px; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .pdp-tmb__cta, .pdp-tmb__cta svg {
    transition: none !important;
  }
}
/* END_SECTION:pdp-stories */

/* START_SECTION:pdp-text-media (INDEX:93) */
.pdp-text-media {
    padding-block: 4rem;
  }

  /* Top / bottom spacing selects. pdp-unified-v2.css pins this section's
     padding-block with !important and loads after the section stylesheets, so
     the overrides need both a repeated class and !important to land. */
  .pdp-text-media.pdp-text-media[data-spacing-top="tight"]    { padding-block-start: clamp(1.5rem, 3vw, 2.5rem) !important; }
  .pdp-text-media.pdp-text-media[data-spacing-top="none"]     { padding-block-start: 0 !important; }
  .pdp-text-media.pdp-text-media[data-spacing-bottom="tight"] { padding-block-end: clamp(1.5rem, 3vw, 2.5rem) !important; }
  .pdp-text-media.pdp-text-media[data-spacing-bottom="none"]  { padding-block-end: 0 !important; }

  .pdp-text-media--light {
    background: #ffffff;
    color: var(--color-foreground);
  }

  .pdp-text-media--dark {
    background: #1a1a2e;
    color: #ffffff;
  }

  .pdp-text-media__container {
    max-width: 72rem;
    padding-inline: 1rem;
  }

  /* ---- Mobile: always stacked ---- */
  .pdp-text-media__container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* ---- Media ---- */
  .pdp-text-media__image--split-left,
  .pdp-text-media__image--split-right {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
  }

  .pdp-text-media__image--stacked {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
  }

  .pdp-text-media__video-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
  }

  .pdp-text-media__video-wrap--split-left,
  .pdp-text-media__video-wrap--split-right {
    aspect-ratio: 1 / 1;
  }

  .pdp-text-media__video-wrap--stacked {
    aspect-ratio: 16 / 9;
  }

  .pdp-text-media__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  .pdp-text-media__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0ede8;
    border-radius: var(--radius-xl);
    padding: 3rem;
  }

  .pdp-text-media__placeholder--split-left,
  .pdp-text-media__placeholder--split-right {
    aspect-ratio: 1 / 1;
  }

  .pdp-text-media__placeholder--stacked {
    aspect-ratio: 16 / 9;
  }

  .pdp-text-media__placeholder svg {
    width: 60%;
    height: auto;
    opacity: 0.35;
  }

  /* ---- Content ---- */
  .pdp-text-media__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
  }

  .pdp-text-media__eyebrow {
    font-size: var(--font-size-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    opacity: 0.6;
  }

  .pdp-text-media__heading {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    letter-spacing: var(--tracking-tight);
    line-height: 1.15;
  }

  .pdp-text-media__body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    max-width: 32rem;
    /* 0.75 read too light on white (MEL-1134) */
    opacity: 0.9;
  }
  /* Italic-only paragraphs are disclaimers: render as an info chip instead of
     plain italics (MEL-1125 / MEL-1134). */
  .pdp-text-media__body p > em:only-child {
    display: inline-block;
    font-style: normal;
    font-size: 0.8125rem;
    line-height: 1.45;
    padding: 0.375rem 0.875rem;
    border-radius: 12px;
    background: var(--color-surface-alt, #f7f7f8);
    border: 1px solid var(--color-border, #e4e3de);
    color: var(--color-foreground, #1a1a2e);
  }


  .pdp-text-media--dark .pdp-text-media__body {
    opacity: 0.7;
  }

  .pdp-text-media__button {
    display: inline-block;
    margin-block-start: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-full, 9999px);
    transition: opacity var(--duration-base) var(--ease-default);
    align-self: flex-start;
  }

  .pdp-text-media--light .pdp-text-media__button {
    background: var(--color-foreground);
    color: #ffffff;
  }

  .pdp-text-media--light .pdp-text-media__button:hover {
    opacity: 0.85;
  }

  .pdp-text-media--dark .pdp-text-media__button {
    background: #ffffff;
    color: #1a1a2e;
  }

  .pdp-text-media--dark .pdp-text-media__button:hover {
    opacity: 0.85;
  }

  /* ---- Stacked layout: center content ---- */
  .pdp-text-media--stacked .pdp-text-media__content {
    align-items: center;
    text-align: center;
  }

  .pdp-text-media--stacked .pdp-text-media__button {
    align-self: center;
  }

  /* ---- Tablet ---- */
  @media screen and (min-width: 750px) {
    .pdp-text-media {
      padding-block: 5rem;
    }

    .pdp-text-media__container {
      padding-inline: 1.5rem;
    }

    .pdp-text-media__heading {
      font-size: var(--font-size-4xl);
    }
  }

  /* ---- Desktop: side-by-side for split / slider / features layouts ---- */
  @media screen and (min-width: 990px) {
    .pdp-text-media--split-left .pdp-text-media__container,
    .pdp-text-media--split-right .pdp-text-media__container,
    .pdp-text-media--slider-left .pdp-text-media__container,
    .pdp-text-media--slider-right .pdp-text-media__container,
    .pdp-text-media--features-left .pdp-text-media__container,
    .pdp-text-media--features-right .pdp-text-media__container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }

    /* "-right" variants: swap visual order so text is left, media is right */
    .pdp-text-media--split-right .pdp-text-media__media,
    .pdp-text-media--slider-right .pdp-text-media__media,
    .pdp-text-media--features-right .pdp-text-media__media {
      order: 2;
    }

    .pdp-text-media--split-right .pdp-text-media__content,
    .pdp-text-media--slider-right .pdp-text-media__content,
    .pdp-text-media--features-right .pdp-text-media__content {
      order: 1;
    }

    .pdp-text-media__image--split-left,
    .pdp-text-media__image--split-right {
      aspect-ratio: 1 / 1;
    }

    .pdp-text-media__video-wrap--split-left,
    .pdp-text-media__video-wrap--split-right {
      aspect-ratio: 1 / 1;
    }

    .pdp-text-media__placeholder--split-left,
    .pdp-text-media__placeholder--split-right {
      aspect-ratio: 1 / 1;
    }

    /* Stacked stays single column on desktop */
    .pdp-text-media--stacked .pdp-text-media__container {
      flex-direction: column;
      gap: 2.5rem;
    }
  }

  /* ── MEL-1027 — Slider variant ─────────────────────────────────── */
  .pdp-text-media__slider {
    display: block;
    width: 100%;
  }

  .pdp-text-media__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 0.75rem;
    border-radius: var(--radius-xl);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .pdp-text-media__track::-webkit-scrollbar {
    display: none;
  }

  .pdp-text-media__slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: #f0ede8;
  }

  .pdp-text-media__slide img,
  .pdp-text-media__image--slider {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-xl);
  }

  .pdp-text-media__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4375rem;
    margin-top: 1rem;
  }

  .pdp-text-media__dot {
    appearance: none;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 9999px;
    border: none;
    background: color-mix(in srgb, var(--color-foreground, #1a1a2e) 25%, transparent);
    cursor: pointer;
    transition: width 220ms ease, background-color 220ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .pdp-text-media__dot:hover {
    background: color-mix(in srgb, var(--color-foreground, #1a1a2e) 55%, transparent);
  }

  .pdp-text-media__dot--active {
    width: 24px;
    background: var(--color-brand-green, #48A06A);
  }

  .pdp-text-media--dark .pdp-text-media__dot {
    background: rgba(255, 255, 255, 0.35);
  }

  .pdp-text-media--dark .pdp-text-media__dot:hover {
    background: rgba(255, 255, 255, 0.6);
  }

  .pdp-text-media--dark .pdp-text-media__dot--active {
    background: var(--color-brand-green, #48A06A);
  }

  /* ── MEL-1027 — Features variant (dense checklist) ─────────────── */
  .pdp-text-media__features {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
  }

  .pdp-text-media__feature {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.55;
  }

  .pdp-text-media__feature-icon {
    color: var(--color-brand-green, #48A06A);
    flex-shrink: 0;
    margin-top: 0.1875rem;
  }

  .pdp-text-media--dark .pdp-text-media__feature-text {
    opacity: 0.9;
  }

  .pdp-text-media__image--features-left,
  .pdp-text-media__image--features-right {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-xl);
    display: block;
  }

  @media (prefers-reduced-motion: reduce) {
    .pdp-text-media__track {
      scroll-behavior: auto;
    }
    .pdp-text-media__dot {
      transition: none;
    }
  }
/* END_SECTION:pdp-text-media */

/* START_SECTION:pdp-treatment-modes (INDEX:94) */
.treatment-modes {
    display: block;
    position: relative;
    min-height: 600px;
    overflow: hidden;
    color: #fff;
  }

  .treatment-modes__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
  }

  .treatment-modes__bg-img,
  .treatment-modes__bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.7s ease;
  }

  .treatment-modes__bg-video {
    position: absolute;
    inset: 0;
  }

  .treatment-modes__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.20));
  }

  .treatment-modes__content {
    position: relative;
    z-index: 2;
    max-width: 72rem;
    margin-inline: auto;
    padding: 4rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 600px;
  }

  .treatment-modes__header {
    margin-block-end: 2rem;
  }

  .treatment-modes__eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    margin-block-end: 0.5rem;
  }

  .treatment-modes__title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #fff;
    line-height: 1.2;
  }

  .treatment-modes__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  /* --- Tab list --- */
  .treatment-modes__list {
    display: flex;
    flex-direction: column;
  }

  .treatment-modes__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.625rem 0;
    text-align: start;
    font-family: inherit;
    position: relative;
  }

  .treatment-modes__item-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.3s ease;
  }

  .treatment-modes__item .treatment-modes__item-row {
    transform: translateX(-0.625rem);
  }

  .treatment-modes__item:hover .treatment-modes__item-row {
    transform: translateX(0);
  }

  .treatment-modes__item--active .treatment-modes__item-row {
    transform: translateX(0);
  }

  .treatment-modes__indicator {
    width: 2px;
    height: 1.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .treatment-modes__item--active .treatment-modes__indicator {
    opacity: 1;
  }

  .treatment-modes__concern {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
  }

  .treatment-modes__item:hover .treatment-modes__concern {
    color: rgba(255, 255, 255, 0.7);
  }

  .treatment-modes__item--active .treatment-modes__concern {
    color: #fff;
  }

  /* Progress bar — under concern text, fixed width */
  .treatment-modes__progress {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.375rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .treatment-modes__item--active .treatment-modes__progress {
    opacity: 1;
  }

  .treatment-modes__progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 9999px;
    /* will-change: width removed — width transitions cannot be GPU-composited */
  }

  /* --- Info card --- */
  .treatment-modes__panels {
    position: relative;
  }

  /* MEL-1151: the team found the card was hiding too much of the mood photo, so
     it is now light glass rather than near-solid white. Opacity is a section
     setting (--tm-card-alpha) because legibility depends on the photo behind it,
     and Marta can nudge it per section without a code change. */
  .treatment-modes__card {
    max-width: 24rem;
    background: rgba(255, 255, 255, var(--tm-card-alpha, 0.45)) !important;
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 1rem;
    padding: 1.15rem 1.35rem;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.28);
    color: #14161a !important;
    animation: treatmentCardIn 0.3s ease;
  }

  /* Without backdrop-filter the glass is just flat translucent white, and body
     copy over a photo becomes unreadable. Older Firefox and some Android
     webviews land here, so raise the fill for them. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .treatment-modes__card {
      background: rgba(255, 255, 255, 0.88) !important;
    }
  }

  /* hidden attribute is natively handled by browsers — no CSS needed */
  .treatment-modes__card--hidden {
    display: none;
  }

  @keyframes treatmentCardIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Keyboard-initiated switches skip the entrance animation entirely */
  .tm-kbd-instant .treatment-modes__card {
    animation: none;
  }

  .treatment-modes__card-icon {
    width: 44px;
    height: 44px;
    margin-block-end: 0.5rem;
    color: var(--color-brand-green, #48A06A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .treatment-modes__card-icon img,
  .treatment-modes__card-icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .treatment-modes__card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-block-end: 0.25rem;
    color: #14161a !important;
  }

  /* Darker than the old #6b7280. On glass the copy sits partly on the photo, so
     the grey that worked on solid white loses too much contrast. */
  .treatment-modes__card-desc {
    font-size: 0.875rem;
    color: #33383f !important;
    line-height: 1.625;
    margin-block-end: 0.75rem;
  }

  .treatment-modes__card-desc strong {
    font-weight: 500;
  }

  .treatment-modes__wavelength {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    color: #888;
    margin-top: 0.5rem;
  }
  .treatment-modes__wavelength-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* Nav inside card */
  .treatment-modes__nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-block-start: 1rem;
    padding-block-start: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.45);
  }

  /* Filled rather than outline only: on glass a transparent button sits directly
     on the photo and the chevron disappears on a busy frame. */
  .treatment-modes__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.6);
    color: #14161a;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .treatment-modes__nav-btn:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: #ffffff;
  }

  .treatment-modes__nav-btn:focus-visible {
    outline: 2px solid var(--color-brand-green, #48A06A);
    outline-offset: 2px;
  }

  .treatment-modes__counter {
    font-size: 0.75rem;
    color: #6b7280;
  }

  .treatment-modes__counter-current {
    color: #1a1a2e;
    font-weight: 600;
  }

  /* --- Desktop --- */
  @media screen and (min-width: 750px) {
    .treatment-modes {
      min-height: 700px;
    }

    .treatment-modes__content {
      padding: 5rem 1.5rem;
      min-height: 700px;
    }

    .treatment-modes__header {
      margin-block-end: 3rem;
    }

    .treatment-modes__title {
      font-size: 2.25rem;
    }

    .treatment-modes__body {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 4rem;
    }

    .treatment-modes__list {
      flex-shrink: 0;
      min-width: 180px;
    }

    .treatment-modes__item {
      padding: 0.75rem 0;
    }

    .treatment-modes__concern {
      font-size: 1.125rem;
    }

    .treatment-modes__card {
      padding: 1.5rem;
    }
  }

  @media screen and (min-width: 990px) {
    .treatment-modes__title {
      font-size: 3rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .treatment-modes__card {
      animation: none;
    }

    .treatment-modes__progress-fill {
      transition: none;
    }

    .treatment-modes__bg-img {
      transition: none;
    }

    .treatment-modes__item-row,
    .treatment-modes__concern,
    .treatment-modes__indicator {
      transition: none;
    }
  }
/* END_SECTION:pdp-treatment-modes */

/* START_SECTION:pdp-video-testimonials (INDEX:95) */
/* ── Section wrapper ── */
  .pdp-video-testimonials {
    display: block;
    padding: 4rem 0;
  }

  @media screen and (min-width: 750px) {
    .pdp-video-testimonials {
      padding: 5rem 0;
    }
  }

  .pdp-video-testimonials__inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* ── Header ── */
  .pdp-video-testimonials__header {
    text-align: center;
    margin-bottom: 2rem;
  }

  .pdp-video-testimonials__title {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-foreground, #1a1a2e);
    margin: 0 0 0.5rem;
  }

  @media screen and (min-width: 750px) {
    .pdp-video-testimonials__title {
      font-size: 2.25rem;
    }
  }

  .pdp-video-testimonials__subtitle {
    font-size: 0.9375rem;
    color: var(--color-text-muted, rgba(26, 26, 46, 0.55));
    margin: 0 auto;
    max-width: 480px;
    line-height: 1.6;
  }

  /* ── Slider wrapper ── */
  .pdp-video-testimonials__slider-wrap {
    position: relative;
  }

  .pdp-video-testimonials__slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .pdp-video-testimonials__slider::-webkit-scrollbar {
    display: none;
  }

  /* ── Card sizing ── */
  .pdp-video-testimonials__card {
    flex: 0 0 45vw;
    max-width: 200px;
    scroll-snap-align: start;
  }

  @media screen and (min-width: 750px) {
    .pdp-video-testimonials__card {
      flex: 0 0 calc(25% - 0.75rem);
      max-width: 240px;
    }
  }

  @media screen and (min-width: 990px) {
    .pdp-video-testimonials__card {
      flex: 0 0 calc(20% - 0.8rem);
      max-width: 220px;
    }
  }

  /* ── Video area — 9:16 portrait. Whole surface is the click target;
     hover anywhere on the wrap scales the play button + lifts overlay. */
  .pdp-video-testimonials__video-wrap {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-xl, 1rem);
    overflow: hidden;
    background: #1a1a2e;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .pdp-video-testimonials__video-wrap:focus-visible {
    outline: 2px solid var(--color-brand-green, #2d8a23);
    outline-offset: 3px;
  }

  /* Subtle dark veil that appears on hover — makes the play button pop
     and signals the whole surface is interactive. */
  .pdp-video-testimonials__video-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 2;
  }

  @media (hover: hover) {
    .pdp-video-testimonials__video-wrap:hover::after,
    .pdp-video-testimonials__video-wrap:focus-visible::after {
      opacity: 1;
    }
  }

  .pdp-video-testimonials__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pdp-video-testimonials__thumb--empty {
    background: #1a1a2e;
  }

  /* Play button — visual only (the whole video-wrap is the click target).
     Scales when the wrap is hovered/focused so the entire surface reads
     as a single interactive area. */
  .pdp-video-testimonials__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    opacity: 0.92;
  }

  .pdp-video-testimonials__play-btn svg circle {
    transition: fill 0.25s ease, stroke 0.25s ease;
  }

  @media (hover: hover) {
    .pdp-video-testimonials__video-wrap:hover .pdp-video-testimonials__play-btn,
    .pdp-video-testimonials__video-wrap:focus-visible .pdp-video-testimonials__play-btn {
      transform: translate(-50%, -50%) scale(1.12);
      opacity: 1;
    }
    .pdp-video-testimonials__video-wrap:hover .pdp-video-testimonials__play-btn svg circle,
    .pdp-video-testimonials__video-wrap:focus-visible .pdp-video-testimonials__play-btn svg circle {
      fill: rgba(0, 0, 0, 0.6);
      stroke: rgba(255, 255, 255, 0.55);
    }
  }

  .pdp-video-testimonials__video-wrap:active .pdp-video-testimonials__play-btn {
    transform: translate(-50%, -50%) scale(0.95);
  }

  /* ── Arrows (gallery style) — removed; infinite marquee scroll instead ── */
  .pdp-video-testimonials__arrow { display: none; }

  /* ── Gradient fades — identical on both sides. The fade end-colour was
     previously a CSS variable (`--section-bg`) which sometimes resolved
     to `transparent` on the left side due to a chameleon-system race,
     making the left fade invisible. Now hardcoded with a sensible
     fallback then layered with the variable so it works in both lit and
     unlit theme states. */
  .pdp-video-testimonials__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
  }

  .pdp-video-testimonials__fade--left {
    left: 0;
    background:
      linear-gradient(to right, var(--section-bg, #f0efea) 0%, rgba(240, 239, 234, 0) 100%);
  }

  .pdp-video-testimonials__fade--right {
    right: 0;
    background:
      linear-gradient(to left,  var(--section-bg, #f0efea) 0%, rgba(240, 239, 234, 0) 100%);
  }

  /* Legacy class kept for back-compat — already opacity:1 above */
  .pdp-video-testimonials__fade--visible { opacity: 1; }

  /* ── Page dots ── */
  .pdp-video-testimonials__pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  .pdp-video-testimonials__page-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--color-border, #deddd8);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
  }

  .pdp-video-testimonials__page-dot--active {
    width: 1.5rem;
    background: var(--color-foreground, #1a1a2e);
  }

  /* ── Responsive play button ── */
  @media (max-width: 749px) {
    .pdp-video-testimonials__play-btn svg { width: 40px; height: 40px; }
  }

  /* ── Reduced motion ── */
  @media (prefers-reduced-motion: reduce) {
    .pdp-video-testimonials__play-btn,
    .pdp-video-testimonials__arrow,
    .pdp-video-testimonials__page-dot {
      transition: none;
    }
  }
/* END_SECTION:pdp-video-testimonials */

/* START_SECTION:pdp-works-with (INDEX:96) */
/* Unified grid (Round 21) — all platforms in one clean responsive grid.
     Sized to land between the compare table and the image grid. */
  .pdp-works-with {
    display: block;
    padding-block: clamp(2rem, 4vw, 3rem);
  }

  .pdp-works-with__container {
    max-width: var(--pdp-container, 72rem);
    margin-inline: auto;
    padding-inline: var(--pdp-gutter, 1.25rem);
  }

  .pdp-works-with__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    align-items: center;
    text-align: center;
  }

  /* Title + subtitle are part of the section-heading pattern.
     Subtitle sits right under the title with the same gap the
     rest of the PDP uses (matches pdp-features, pdp-comparison, etc). */
  .pdp-works-with__title + .pdp-works-with__subtitle {
    margin-top: -0.75rem;
  }

  /* Color variants */
  .pdp-works-with--dark { background: #1a1a2e; color: #f8f7f4; }
  .pdp-works-with--accent { background: var(--color-brand-green, #48A06A); color: #ffffff; }

  .pdp-works-with__title {
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: inherit;
    margin: 0;
  }

  .pdp-works-with__subtitle {
    font-family: var(--font-body, inherit);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--pdp-text-muted, #71717a);
    margin: 0;
    max-width: 40rem;
  }

  /* Category filter tabs */
  .pdp-works-with__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  .pdp-works-with__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid var(--pdp-border, #e5e7eb);
    border-radius: 9999px;
    font-family: var(--font-body, inherit);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--pdp-text-muted, #71717a);
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
  }
  .pdp-works-with__tab:hover {
    border-color: var(--color-brand-green, #48A06A);
    color: var(--color-brand-green-dark, #2d8a23);
  }
  .pdp-works-with__tab.is-active {
    background: color-mix(in srgb, var(--color-brand-green, #48A06A) 12%, transparent);
    border-color: var(--color-brand-green, #48A06A);
    color: var(--color-brand-green-dark, #2d8a23);
  }
  .pdp-works-with__tab-count {
    font-size: 0.6875rem;
    font-weight: 700;
    opacity: 0.7;
  }
  .pdp-works-with--dark .pdp-works-with__tab {
    border-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.7);
  }
  .pdp-works-with--dark .pdp-works-with__tab.is-active {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.4);
    color: #ffffff;
  }

  /* Unified grid — auto-fits to width */
  .pdp-works-with__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
    width: 100%;
  }
  @media (min-width: 480px) { .pdp-works-with__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 750px) { .pdp-works-with__grid { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 990px) { .pdp-works-with__grid { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; } }

  .pdp-works-with__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--pdp-border, #e5e7eb);
    border-radius: var(--pdp-radius-card, 12px);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    aspect-ratio: 1;
  }
  .pdp-works-with__tile:hover {
    border-color: var(--color-brand-green, #48A06A);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.12);
  }
  /* Static tile — platform has no page (e.g. No App Required): no link affordance */
  .pdp-works-with__tile--static,
  .pdp-works-with__tile--static:hover {
    cursor: default;
    border-color: var(--pdp-border, #e5e7eb);
    transform: none;
    box-shadow: none;
  }
  .pdp-works-with--dark .pdp-works-with__tile {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
  }

  .pdp-works-with__logo {
    width: auto;
    height: clamp(28px, 5vw, 36px);
    max-width: 80%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.2s ease, opacity 0.2s ease;
  }
  .pdp-works-with__tile:hover .pdp-works-with__logo {
    filter: grayscale(0%);
    opacity: 1;
  }
  .pdp-works-with--dark .pdp-works-with__logo { filter: grayscale(100%) brightness(2.5); }
  .pdp-works-with--dark .pdp-works-with__tile:hover .pdp-works-with__logo { filter: grayscale(0%) brightness(1.5); opacity: 1; }

  .pdp-works-with__name {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pdp-text-muted, #71717a);
    text-align: center;
  }
  .pdp-works-with--dark .pdp-works-with__name { color: rgba(255,255,255,0.7); }

  /* Optional CTA below grid */
  .pdp-works-with__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-brand-green-dark, #2d8a23);
    text-decoration: none;
    margin-top: 0.5rem;
    transition: gap 0.2s ease;
  }
  .pdp-works-with__cta:hover { gap: 0.6rem; }
  .pdp-works-with--dark .pdp-works-with__cta { color: #b6f1c9; }
  .pdp-works-with--accent .pdp-works-with__cta { color: #ffffff; }
/* END_SECTION:pdp-works-with */

/* START_SECTION:popup-modal (INDEX:97) */
/* ── Popup Modal ── */
.popup-modal {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.popup-modal[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* ── Centered mode ── */
.popup-modal--centered {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.popup-modal--centered .popup-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.popup-modal--centered[aria-hidden="false"] .popup-modal__backdrop {
  opacity: 1;
}

.popup-modal--centered .popup-modal__card {
  position: relative;
  max-width: 480px;
  width: 100%;
  transform: scale(0.9);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.popup-modal--centered[aria-hidden="false"] .popup-modal__card {
  transform: scale(1);
  opacity: 1;
}

/* ── Corner mode ── */
.popup-modal--corner {
  bottom: 1.5rem;
  right: 1.5rem;
}

.popup-modal--corner .popup-modal__card {
  width: 360px;
  max-width: calc(100vw - 2rem);
  transform: translateY(1.5rem);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.popup-modal--corner[aria-hidden="false"] .popup-modal__card {
  transform: translateY(0);
  opacity: 1;
}

/* ── Card ── */
.popup-modal__card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .popup-modal__card {
    background: #1e1e2e;
    color: #f0f0f5;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
  }
  .popup-modal__input {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f0f0f5 !important;
  }
  .popup-modal__input::placeholder { color: rgba(255, 255, 255, 0.4) !important; }
  .popup-modal__disclaimer { color: rgba(255, 255, 255, 0.4) !important; }
  .popup-modal__desc { color: rgba(255, 255, 255, 0.6) !important; }
  .popup-modal__close { color: rgba(255, 255, 255, 0.5) !important; }
  .popup-modal__close:hover { color: #fff !important; background: rgba(255, 255, 255, 0.1) !important; }
}

/* ── Close button ── */
.popup-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  background: transparent;
  border: none;
  padding: 0.375rem;
  border-radius: 50%;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease, background 0.2s ease;
  line-height: 0;
}

.popup-modal__close:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.06);
}

/* ── Image ── */
.popup-modal__image-wrap {
  width: 100%;
  overflow: hidden;
}

.popup-modal__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ── Body ── */
.popup-modal__body {
  padding: 1.5rem;
}

.popup-modal__title {
  font-family: var(--font-heading, inherit);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: inherit;
}

.popup-modal__desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #555;
  margin: 0 0 1.25rem;
}

/* ── Form ── */
.popup-modal__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.popup-modal__input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-family: inherit;
  background: #fafafa;
  color: #111;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.popup-modal__input:focus {
  outline: none;
  border-color: #1a1a2e;
  box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.1);
}

.popup-modal__input::placeholder {
  color: #999;
}

.popup-modal__submit {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.8rem;
  background: #1a1a2e;
  color: #fff;
  border: none;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.popup-modal__submit:hover {
  background: #111122;
}

.popup-modal__submit:active {
  transform: scale(0.98);
}

.popup-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Success ── */
.popup-modal__success {
  text-align: center;
  padding: 1rem 0;
}

.popup-modal__success svg {
  margin-bottom: 0.75rem;
}

.popup-modal__success-text {
  font-size: 0.9375rem;
  font-weight: 500;
  color: inherit;
  margin: 0;
  line-height: 1.4;
}

/* ── Disclaimer ── */
.popup-modal__disclaimer {
  font-size: 0.6875rem;
  color: #888;
  line-height: 1.4;
  margin: 1rem 0 0;
}

/* ── Hide form on success ── */
.popup-modal__form[hidden] { display: none; }

/* ── Mobile corner mode becomes full-width ── */
@media (max-width: 480px) {
  .popup-modal--corner {
    bottom: 0;
    right: 0;
    left: 0;
  }
  .popup-modal--corner .popup-modal__card {
    width: 100%;
    max-width: 100%;
    border-radius: 1.25rem 1.25rem 0 0;
  }
}
/* END_SECTION:popup-modal */

/* START_SECTION:press-bar (INDEX:98) */
.press-bar {
    display: block;
    background-color: #f0efea;
    padding-block: 3rem;
  }

  /* Seamless mode: blend with page bg (no visible "bar" effect) */
  .press-bar--seamless {
    background-color: transparent;
  }

  /* Tight mode: compact vertical rhythm — use when stacked between hero + main content.
     Doubled class: section-rhythm.css declares `.press-bar { padding-block: ... }` at
     equal specificity AFTER this sheet, which silently won on mobile (desktop already
     had the doubled form below). */
  .press-bar.press-bar--tight {
    padding-block: 0.5rem;
  }
  @media (min-width: 750px) {
    .press-bar--tight { padding-block: 0.75rem; }
  }
  /* When tight, the marquee already provides 1.5rem internal padding so we
     don't need any wrapper padding on top */
  .press-bar--tight .press-bar__marquee { padding-block: 0.75rem; }
  .press-bar--tight .press-bar__heading { margin-bottom: 0.4rem; }
  @media (min-width: 750px) {
    .press-bar--tight .press-bar__heading { margin-bottom: 0.6rem; }
  }

  /* Featured-In eyebrow heading (new "press mentions" mode) */
  .press-bar__heading {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* Mirage at 72% on white, not the neutral --color-text-muted grey. */
    color: var(--pdp-text-muted, #555c65);
  }

  @media screen and (min-width: 750px) {
    .press-bar__heading {
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
  }

  .press-bar__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
    flex-wrap: wrap;
  }

  .press-bar__stars {
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .press-bar__stars svg {
    width: 1rem;
    height: 1rem;
  }

  .press-bar__secondary {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted, #71717a);
  }

  .press-bar__separator {
    font-size: 0.875rem;
    color: var(--color-text-muted, #71717a);
  }

  .press-bar__available {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground, #1a1a2e);
  }

  /* Marquee */
  .press-bar__marquee {
    position: relative;
    overflow: hidden;
    padding-block: 1.5rem;
  }

  /* Seamless mode: mask the marquee edges instead of using overlay divs.
     mask-image fades the actual content opacity → looks correct on ANY
     page bg (white, cream, dark) without needing to match a bg color. */
  .press-bar--seamless .press-bar__marquee {
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      #000 6rem,
      #000 calc(100% - 6rem),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      #000 6rem,
      #000 calc(100% - 6rem),
      transparent 100%);
  }
  .press-bar--seamless .press-bar__fade { display: none; }

  /* Gradient fades (non-seamless mode only — uses section bg color) */
  .press-bar__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5rem;
    z-index: 2;
    pointer-events: none;
  }

  .press-bar__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--section-bg, var(--color-background, #f5f5f0)), transparent);
  }

  .press-bar__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--section-bg, var(--color-background, #f5f5f0)), transparent);
  }

  /* Track — holds all logo groups, animated via JS */
  .press-bar__track {
    display: flex;
    width: max-content;
    will-change: transform;
  }

  /* Animation is now driven by JS via element.animate() — no CSS keyframes needed */

  .press-bar__logos {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .press-bar__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-inline: 2rem;
  }

  .press-bar__logo-img {
    width: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    /* `darken` neutralises white backgrounds (e.g. the Verge JPG) so they
       blend into the press-bar's beige background, while leaving coloured
       logos (CNET red, NBC peacock, Wired wordmark) untouched. Safer than
       `multiply` which would tint mid-tone colours toward the bg. */
    mix-blend-mode: darken;
  }

  /* Size variants — kept compact so the bar reads as a "logos strip", not a
     showcase. Logos should feel secondary to the headline. */
  .press-bar__logo-img--lg {
    height: 1.75rem;
  }

  .press-bar__logo-img--md {
    height: 1.375rem;
  }

  .press-bar__logo-img--sm {
    height: 1.125rem;
  }

  /* Editor-only empty-state notice (never shown to customers) */
  .press-bar__empty {
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--pdp-text-muted, #555c65);
  }

  .press-bar__logo-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground, #1a1a2e);
    white-space: nowrap;
  }

  @media screen and (min-width: 750px) {
    .press-bar {
      padding-block: 4rem;
    }

    /* Re-stated here because the desktop `.press-bar` rule above sits later in
       the sheet at equal specificity and was silently winning. */
    .press-bar.press-bar--tight {
      padding-block: 0.75rem;
    }

    .press-bar__fade {
      width: 8rem;
    }

    .press-bar__logo-wrap {
      padding-inline: 3rem;
    }

    .press-bar__logo-img--lg {
      height: 2rem;
    }

    .press-bar__logo-img--md {
      height: 1.625rem;
    }

    .press-bar__logo-img--sm {
      height: 1.375rem;
    }

    .press-bar__marquee {
      padding-block: 2rem;
    }
  }

  /* prefers-reduced-motion handled in JS */
/* END_SECTION:press-bar */

/* START_SECTION:product-all-features (INDEX:100) */
/* ============================================================
   Product All Features — self-contained, scoped to .paf
   Uses Melriver theme CSS variables.
   ============================================================ */

/* ── Wrapper ── */
.paf {
  width: 100%;
}

/* ── Top header ── */
.paf__top {
  text-align: center;
  margin-bottom: var(--space-2xl, 3rem);
}

.paf__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight, -0.015em);
  color: #131c29;
  margin-bottom: var(--space-sm, 0.75rem);
}

.paf__desc,
.paf__desc p,
.paf__desc strong {
  font-family: var(--font-body);
  font-size: var(--font-size-lg, 1.125rem);
  color: #131c29;
  max-width: 760px;
  margin-inline: auto;
  line-height: var(--line-height-relaxed, 1.75);
}

/* ── Two cards side by side, gap between, boxed by .page-width ── */
.paf__center {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-lg, 1.5rem);
  width: 100%;
}

/* ── Each feature item is a rounded card ── */
.paf-center-item {
  display: flex;
  flex-direction: row;
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
  position: relative;
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  gap: var(--space-2xl, 3rem);
}

/* Image column — fills the full height of the card and sits flush to the
   bottom-outer corner, so the device reads large and touches the bottom. */
.paf-center-item__img {
  flex: 0 0 34%;
  align-self: stretch;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
}

/* Left card: image fills the area and sits at the bottom-left.
   Display is controlled by the swap classes below, not here, so the
   mobile/desktop swap is never overridden. */
.paf-center-item__img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  object-position: left bottom;
  position: relative !important;
}

/* Right card (content on left): large image sitting at the bottom-right */
.paf-center-item--content-left .paf-center-item__img img {
  object-position: right bottom;
}

/* Desktop / mobile image swap */
.paf-center-item__img-desktop {
  display: block;
}

.paf-center-item__img-mobile {
  display: none;
}

/* Content column — top-aligned beside the image, small space above */
.paf-center-item__content {
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
  padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 1rem);
  justify-content: flex-start;
  box-sizing: border-box;
}

/* Content on left: push image to right */
.paf-center-item--content-left .paf-center-item__img {
  order: 1;
}

/* Icon + heading inline */
.paf-center-item__content-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm, 0.75rem);
}

.paf-center-item__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.paf-center-item__heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-2xl, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight, -0.015em);
  color: #131c29;
}

/* ── Accordions ── */
.paf-center-item__accordions {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border, #e0e0e0);
}

.paf-accordion {
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.paf-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm, 0.75rem);
  padding: var(--space-md, 1rem) 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-base, 1rem);
  font-weight: 600;
  color: #131c29;
  text-align: left;
  transition: color var(--duration-fast, 150ms) var(--ease-default);
}

.paf-accordion__trigger:hover {
  color: var(--color-brand-green, #48A06A);
}

/* Left side: icon + label inline */
.paf-accordion__trigger-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm, 0.75rem);
  flex: 1;
  min-width: 0;
}

.paf-accordion__row-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.paf-accordion__label {
  flex: 1;
  min-width: 0;
}

/* + / x toggle */
.paf-accordion__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: #131c29;
}

.paf-accordion__icon-close {
  display: none;
}

.paf-accordion.is-open .paf-accordion__icon-plus {
  display: none;
}

.paf-accordion.is-open .paf-accordion__icon-close {
  display: block;
}

.paf-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow, 300ms) var(--ease-default);
}

.paf-accordion__body-inner {
  padding-bottom: var(--space-md, 1rem);
  font-family: var(--font-body);
  font-size: var(--font-size-base, 1rem);
  color: var(--color-text-secondary, #666666);
  line-height: var(--line-height-base, 1.6);
}

/* ── Bottom bar ── */
.paf__bottom {
  margin-top: var(--space-2xl, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg, 1.5rem);
  text-align: center;
  position: relative;
  z-index: 1;
  background: transparent;
}

.paf__bottom-text,
.paf__bottom-text p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #666666);
  max-width: 640px;
  margin-inline: auto;
  line-height: var(--line-height-base, 1.6);
}

/* Icon row */
.paf__icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-xl, 2rem);
}

.paf-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs, 0.5rem);
  max-width: 140px;
  text-align: center;
}

.paf-icon-item__img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.paf-icon-item__text,
.paf-icon-item__text p {
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #666666);
  line-height: 1.4;
}

/* ── Responsive ── */
@media screen and (max-width: 767px) {
  .paf__center {
    flex-direction: column;
  }

  .paf-center-item {
    flex-direction: column;
    flex: none;
    gap: 0;
  }

  .paf-center-item--content-left .paf-center-item__img {
    order: unset;
  }

  /* Image stacked on top, full width, centered */
  .paf-center-item__img {
    flex: none;
    width: 100%;
    height: 260px;
    align-self: auto;
    align-items: flex-end;
    padding-top: 0;
    justify-content: center;
  }

  .paf-center-item__img img,
  .paf-center-item--content-left .paf-center-item__img img {
    width: 100% !important;
    height: 100% !important;
    object-position: center bottom;
  }

  /* Prefer the mobile image; fall back to the desktop image when there is none */
  .paf-center-item__img-desktop {
    display: none;
  }

  .paf-center-item__img-desktop.paf-center-item__img--always {
    display: block;
  }

  .paf-center-item__img-mobile {
    display: block;
  }

  .paf-center-item__content {
    flex: none;
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
    padding: var(--space-xl, 2rem) var(--space-md, 1rem);
  }

  .paf__title {
    font-size: var(--font-size-2xl, 1.5rem);
  }

  .paf-center-item__heading {
    font-size: var(--font-size-2xl, 1.5rem);
  }

  .paf__icon-row {
    gap: var(--space-lg, 1.5rem);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .paf-accordion__body {
    transition: none !important;
  }
}
/* END_SECTION:product-all-features */

/* START_SECTION:product-declarations (INDEX:101) */
.product-declarations {
  padding-block: var(--page-padding-block, 3rem);
  background: var(--color-background, #f5f5f0);
}
.product-declarations__container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.product-declarations__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block-end: 0.5rem;
}
.product-declarations__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.product-declarations__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--color-text-secondary, #555);
  margin: 0;
  line-height: 1.4;
}

/* Table */
.product-declarations__table {
  display: flex;
  flex-direction: column;
}
.product-declarations__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 220px);
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-block-end: 1px solid rgba(0, 0, 0, 0.08);
  align-items: center;
}
.product-declarations__row:last-child { border-block-end: none; }
.product-declarations__row--head {
  border-block-end: 1px solid rgba(0, 0, 0, 0.12);
  padding-block: 1.25rem;
}
.product-declarations__row--head .product-declarations__cell {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
}

.product-declarations__cell {
  font-size: 1rem;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.5;
  min-width: 0;
}
.product-declarations__cell--product { font-weight: 600; }
.product-declarations__cell--date { color: var(--color-text-secondary, #555); }

.product-declarations__pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--color-foreground, #1a1a2e);
  font-weight: 500;
  transition: color 160ms ease, opacity 160ms ease;
}
.product-declarations__pdf-link:hover { opacity: 0.7; }
.product-declarations__pdf-link:focus-visible {
  outline: 2px solid var(--color-foreground, #1a1a2e);
  outline-offset: 4px;
  border-radius: 2px;
}
.product-declarations__pdf-icon {
  flex-shrink: 0;
  color: var(--color-foreground, #1a1a2e);
}
.product-declarations__pdf-link--empty { color: var(--color-text-secondary, #999); }

.product-declarations__empty {
  padding: 4rem 2rem;
  text-align: center;
  color: var(--color-text-secondary, #888);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}

/* Tablet / mobile — collapse the date and doc columns under the product name */
@media (max-width: 760px) {
  .product-declarations__row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-block: 1.25rem;
  }
  .product-declarations__row--head { display: none; }
  .product-declarations__cell--date {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #888);
  }
  .product-declarations__cell--doc { margin-block-start: 0.25rem; }
}

/* Dark theme */
.theme-dark .product-declarations__title,
.theme-dark .product-declarations__row--head .product-declarations__cell,
.theme-dark .product-declarations__cell--product,
.theme-dark .product-declarations__pdf-link { color: #f5f5f5; }
.theme-dark .product-declarations__subtitle,
.theme-dark .product-declarations__cell--date { color: rgba(255, 255, 255, 0.65); }
.theme-dark .product-declarations__row { border-block-end-color: rgba(255, 255, 255, 0.08); }
.theme-dark .product-declarations__row--head { border-block-end-color: rgba(255, 255, 255, 0.15); }
.theme-dark .product-declarations__pdf-icon { color: #f5f5f5; }
/* END_SECTION:product-declarations */

/* START_SECTION:product-recommendations (INDEX:102) */
.product-recommendations {
    padding: var(--space-xl, 3rem) 0;
  }

  .product-recommendations .section-heading {
    text-align: center;
    margin-bottom: var(--space-lg, 2rem);
  }

  .product-recommendations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg, 2rem);
  }

  .product-card {
    text-align: center;
  }

  .product-card__link {
    display: block;
    margin-bottom: var(--space-sm, 1rem);
    overflow: hidden;
    border-radius: var(--radius-lg, 1rem);
  }

  .product-card__image {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform var(--duration-base, 200ms) var(--ease-default);
  }

  .product-card__link:hover .product-card__image {
    transform: scale(1.03);
  }

  .product-card__title {
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    margin-bottom: var(--space-2xs, 0.5rem);
    color: var(--color-foreground, #1a1a2e);
  }

  .product-card__title a {
    text-decoration: none;
    color: inherit;
  }

  .product-card__title a:hover {
    text-decoration: underline;
  }

  .product-card__price {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-foreground, #1a1a2e);
    opacity: 0.7;
  }

  @media screen and (min-width: 750px) {
    .product-recommendations__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-card__image {
      transition: none;
    }
  }
/* END_SECTION:product-recommendations */

/* START_SECTION:product-spotlight (INDEX:103) */
/* ── HP Product Spotlight ── */
.spotlight {
  position: relative;
  width: 100%;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: var(--sp-align, flex-end);
  background: var(--hp-spotlight-bg, var(--color-primary));
  color: #fff;
  overflow: hidden;
}

.spotlight--dark { color: #fff; }
.spotlight--light { color: var(--color-text); }

.spotlight__media {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 120%;
  z-index: 0;
}

.spotlight__img,
.spotlight__video,
.spotlight__media iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

.spotlight__color-bg {
  position: absolute;
  inset: 0;
  background: var(--hp-spotlight-bg, #1a1a2e);
}

.spotlight__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / var(--sp-overlay, 0.25)) 0%, transparent 60%);
  pointer-events: none;
}

.spotlight__inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl) var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.spotlight__content {
  max-width: 600px;
}

.spotlight__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid currentColor;
  margin-bottom: var(--space-md);
  opacity: 0.85;
}
.spotlight__badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.spotlight__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-sm);
}

.spotlight__desc {
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  opacity: 0.85;
  line-height: var(--line-height-base);
  margin-bottom: var(--space-md);
  max-width: 480px;
}

.spotlight__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.85em 2em;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default);
}

.spotlight--dark .spotlight__btn {
  background: #fff;
  color: var(--color-text);
}

.spotlight--light .spotlight__btn {
  background: var(--color-primary);
  color: #fff;
}

.spotlight__btn:hover {
  opacity: 0.88;
  box-shadow: var(--shadow-lg);
}

/* ── Product card overlay ── */
.spotlight__product-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-radius: 1rem;
  padding: 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  max-width: 320px;
  align-self: flex-end;
}

.spotlight__product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  transform: translateY(-2px);
}

.spotlight__product-img {
  width: 64px;
  height: 64px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f5f4f0;
}

.spotlight__product-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.spotlight__product-title {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight__product-price {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.spotlight__product-compare {
  font-size: 11px;
  color: #999;
  font-weight: 400;
}

.spotlight__product-discount {
  font-size: 10px;
  font-weight: 700;
  color: #e53e3e;
  background: rgba(229, 62, 62, 0.08);
  padding: 1px 5px;
  border-radius: 4px;
}

.spotlight__product-cta {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-accent, #3b82f6);
  margin-top: 0.125rem;
}

@media (min-width: 768px) {
  .spotlight__inner {
    padding: var(--space-3xl) var(--space-3xl);
    flex-direction: row;
    align-items: var(--sp-align, flex-end);
    justify-content: space-between;
  }
}

@media (max-width: 749px) {
  .spotlight { justify-content: var(--mobile-sp-align, var(--sp-align, flex-end)); padding-top: 2rem; }
  .spotlight__product-card {
    align-self: flex-start;
  }
}
/* END_SECTION:product-spotlight */

/* START_SECTION:products-bundle (INDEX:104) */
/* ── products-bundle ──────────────────────────────────────── */
products-bundle { display: block; }

.pb {
  background: transparent;
  padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
}

.pb__inner {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
}

/* Image on right (default) */
.pb--image-right .pb__list-col { order: 1; }
.pb--image-right .pb__image-col { order: 2; }

/* Image on left */
.pb--image-left .pb__list-col { order: 2; }
.pb--image-left .pb__image-col { order: 1; }

/* Columns */
.pb__list-col {
  flex: 1 1 50%;
  min-width: 0;
}

.pb__image-col {
  flex: 1 1 50%;
  min-width: 0;
}

/* Editor-only notice (design mode, no bundle connected) */
.pb__editor-notice {
  border: 1px dashed rgba(19, 28, 41, 0.35);
  border-radius: var(--radius-card, 1rem);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: rgba(19, 28, 41, 0.02);
  font-family: var(--font-body);
  color: rgba(19, 28, 41, 0.82);
}

.pb__editor-notice strong {
  font-size: var(--font-size-sm, 0.875rem);
  color: #131c29;
}

.pb__editor-notice span {
  font-size: var(--font-size-xs, 0.8125rem);
  line-height: 1.5;
}

.pb__editor-notice code {
  font-family: monospace;
  background: rgba(19, 28, 41, 0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}

/* Eyebrow pill — matches story-card__category */
.pb__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35em 1em;
  border: 1px solid var(--color-foreground, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  color: var(--color-foreground, #1a1a2e);
  opacity: 0.85;
  margin-bottom: var(--space-lg, 1.5rem);
}

/* Home & Lighting brand segment — filled green pill */
.pb__eyebrow--brand {
  background: var(--color-brand-green, #48A06A);
  border-color: var(--color-brand-green, #48A06A);
  color: #131c29;
  opacity: 1;
}

/* Editor-only diagnostic chip */
.pb__debug {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(19, 28, 41, 0.7);
  border: 1px dashed rgba(19, 28, 41, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.pb__debug code {
  font-family: monospace;
  background: rgba(19, 28, 41, 0.06);
  padding: 0.05em 0.35em;
  border-radius: 4px;
}

.pb__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1.75rem;
}

/* Keep rich-text output from adding stray paragraph spacing */
.pb__heading--rich > * {
  margin: 0;
}

.pb__eyebrow > * {
  margin: 0;
  display: inline;
}

/* Product list */
.pb__products {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-bottom: 1.75rem;
}

/* Individual product row */
.pb__product-wrap {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding-block: 0.875rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: opacity 200ms var(--ease-default, ease);
  cursor: pointer;
}

/* Arrow — hidden by default, slides in on row hover */
.pb__product-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-left: 0;
  color: var(--color-foreground, #1a1a2e);
}

@media (hover: hover) {
  .pb__product-wrap:hover .pb__product-arrow {
    max-width: 1.25rem;
    opacity: 1;
    margin-left: 0.25rem;
  }
}

@media (hover: none) {
  .pb__product-arrow {
    max-width: 1.25rem;
    opacity: 1;
    margin-left: 0.25rem;
  }
}

/* Fade non-active rows when any item is hovered (row or pin) */
products-bundle.is-hover .pb__product-wrap:not(.is-active) {
  opacity: 0.45;
}

/* Show arrow on active row when any hover is active */
products-bundle.is-hover .pb__product-wrap.is-active .pb__product-arrow {
  max-width: 1.25rem;
  opacity: 1;
  margin-left: 0.25rem;
}

/* Number circle — smaller, translucent */
.pb__number-circle {
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 46, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(26, 26, 46, 0.5);
  background: rgba(245, 245, 240, 0.4);
  backdrop-filter: blur(4px);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  user-select: none;
}

.pb__product-wrap.is-active .pb__number-circle {
  background: var(--color-brand-green-dark, #2d8a23);
  border-color: var(--color-brand-green-dark, #2d8a23);
  color: #fff;
}

/* Product body row (thumb + info) */
.pb__product-body {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex: 1;
  min-width: 0;
}

/* Thumbnail — smaller */
.pb__thumb {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-md, 0.625rem);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}

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

.pb__thumb--empty {
  background: rgba(0, 0, 0, 0.06);
}

/* Product info */
.pb__product-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Title — no underline, same style as product card */
.pb__product-title {
  font-family: var(--font-body);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

/* Locked variant label (variant explicitly chosen in metaobject) */
.pb__variant-label {
  font-family: var(--font-body);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  color: var(--color-foreground-secondary, #3d3d56);
}

/* Variant select */
.pb__variant-wrap {
  position: relative;
  display: inline-block;
}

.pb__variant-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-foreground-secondary, #3d3d56);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-button, 0.5rem);
  padding: 0.2rem 1.5rem 0.2rem 0.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a2e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 10px 6px;
}

/* Price wrap — uses canonical price-display snippet */
.pb__price-wrap .price {
  margin: 0;
}

/* Add All button — Spotlight-style pill */
.pb__add-all {
  width: 100%;
  justify-content: center;
  position: relative;
  border-radius: var(--radius-full, 9999px);
  padding: 0.85em 2em;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow: hidden;
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border-color: var(--color-brand-green, #48A06A);
}

.pb__add-all-plus {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  margin-right: 0;
  font-size: 1.1em;
  line-height: 1;
}

@media (hover: hover) {
  .pb__add-all:hover .pb__add-all-plus {
    max-width: 1.5rem;
    opacity: 1;
    margin-right: 0.3rem;
  }
}

@media (hover: none) {
  .pb__add-all-plus {
    max-width: 1.5rem;
    opacity: 1;
    margin-right: 0.3rem;
  }
}

.pb__add-all-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pb__add-all-loading svg {
  animation: pbSpin 0.8s linear infinite;
}

@keyframes pbSpin {
  to { transform: rotate(360deg); }
}

/* Image column */
.pb__image-wrap {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card, 1rem);
  overflow: visible;
}

.pb__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card, 1rem);
}

.pb__image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card, 1rem);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.pb__image-placeholder svg {
  width: 100%;
  height: 100%;
}

/* Hotspot pins — smaller, translucent, blurred */
.pb__pin {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, border-color 150ms ease;
  user-select: none;
  z-index: 2;
}

.pb__pin:focus-visible {
  outline: 2px solid var(--color-focus, #1a1a2e);
  outline-offset: 3px;
}

/* Light pin */
.pb__pin--light {
  border-color: rgba(26, 26, 46, 0.6);
  color: rgba(26, 26, 46, 0.8);
  background: rgba(245, 245, 240, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pb__pin--light:hover,
.pb__pin--light.is-active {
  background: var(--color-brand-green-dark, #2d8a23);
  border-color: var(--color-brand-green-dark, #2d8a23);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Dark pin */
.pb__pin--dark {
  border-color: rgba(245, 245, 245, 0.6);
  color: rgba(245, 245, 245, 0.85);
  background: rgba(17, 17, 24, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pb__pin--dark:hover,
.pb__pin--dark.is-active {
  background: var(--color-brand-green, #48A06A);
  border-color: var(--color-brand-green, #48A06A);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Pin position helper — theme editor only (injected by JS in design mode) */
.pb__pin-editor {
  margin-top: 1rem;
  border: 1px solid rgba(19, 28, 41, 0.15);
  border-radius: var(--radius-card, 1rem);
  padding: 0.9rem 1.1rem;
  background: rgba(19, 28, 41, 0.03);
  font-family: var(--font-body);
}

.pb__pin-editor-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #131c29;
}

.pb__pin-editor-hint {
  font-size: 0.75rem;
  color: rgba(19, 28, 41, 0.7);
  margin: 0.25rem 0 0.6rem;
  line-height: 1.45;
}

.pb__pin-editor-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pb__pin-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.75rem;
}

.pb__pin-editor-key {
  font-weight: 600;
  color: #131c29;
  flex-shrink: 0;
}

.pb__pin-editor-val {
  color: rgba(19, 28, 41, 0.82);
  font-variant-numeric: tabular-nums;
}

.pb__pin--editable { z-index: 5; }

.pb__pin--dragging {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Mobile — stacked, image above list */
@media (max-width: 749px) {
  .pb__inner {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .pb__list-col,
  .pb__image-col {
    flex: none;
    width: 100%;
  }

  .pb--image-right .pb__list-col,
  .pb--image-left .pb__list-col {
    order: 2;
  }

  .pb--image-right .pb__image-col,
  .pb--image-left .pb__image-col {
    order: 1;
  }

  .pb__product-wrap {
    gap: 0.75rem;
  }

  .pb__thumb {
    width: 3.5rem;
    height: 3.5rem;
  }
}
/* END_SECTION:products-bundle */

/* START_SECTION:psu-calculator (INDEX:105) */
/* ── PSU Calculator — Nanoleaf Brand Redesign ── */
.psu-calc {
  --psu-green: var(--color-brand-green, #48A06A);
  --psu-green-hover: #3d9a3b;
  --psu-dark: #1a1a2e;
  --psu-surface: #f5f4f0;
  --psu-card-bg: #ffffff;
  --psu-border: #e5e5e5;
  --psu-radius: 12px;
  --psu-pill: 999px;
  --psu-text: #1a1a2e;
  --psu-text-secondary: #6b6b7b;
  --psu-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --psu-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08);
  --psu-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  padding: 72px 24px;
  background: var(--psu-surface);
  color: var(--psu-text);
  font-family: inherit;
}

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

.psu-calc__inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* ── Header ── */
.psu-calc__heading {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: -0.02em;
  color: var(--psu-dark);
}

.psu-calc__description {
  font-size: 1.05rem;
  text-align: center;
  margin: 0 auto 48px;
  max-width: 560px;
  color: var(--psu-text-secondary);
  line-height: 1.6;
}

/* ── Two-Column Layout ── */
.psu-calc__columns {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 840px) {
  .psu-calc__columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ── Form Card ── */
.psu-calc__form {
  background: var(--psu-card-bg);
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  padding: 32px;
  box-shadow: var(--psu-shadow);
  transition: box-shadow var(--psu-transition);
}

.psu-calc__form:hover {
  box-shadow: var(--psu-shadow-hover);
}

.psu-calc__form-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--psu-border);
}

.psu-calc__form-icon {
  color: var(--psu-green);
  flex-shrink: 0;
}

.psu-calc__form-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--psu-dark);
  letter-spacing: -0.01em;
}

.psu-calc__instruction {
  font-size: 0.9rem;
  margin: 20px 0 24px;
  color: var(--psu-text-secondary);
  line-height: 1.5;
}

/* ── Fields ── */
.psu-calc__field {
  margin-bottom: 20px;
}

.psu-calc__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--psu-text-secondary);
}

/* ── Select ── */
.psu-calc__select-wrap {
  position: relative;
}

.psu-calc__select {
  width: 100%;
  padding: 12px 40px 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  background: var(--psu-card-bg);
  color: var(--psu-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--psu-transition), box-shadow var(--psu-transition);
}

.psu-calc__select:focus {
  outline: none;
  border-color: var(--psu-green);
  box-shadow: 0 0 0 3px rgba(74, 175, 71, 0.12);
}

.psu-calc__select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--psu-text-secondary);
  pointer-events: none;
}

/* ── Number inputs ── */
.psu-calc__input {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  background: var(--psu-card-bg);
  color: var(--psu-text);
  transition: border-color var(--psu-transition), box-shadow var(--psu-transition);
}

.psu-calc__input:focus {
  outline: none;
  border-color: var(--psu-green);
  box-shadow: 0 0 0 3px rgba(74, 175, 71, 0.12);
}

.psu-calc__input::placeholder {
  color: #c0c0c8;
}

/* Remove number spinners */
.psu-calc__input[type="number"] {
  -moz-appearance: textfield;
}
.psu-calc__input[type="number"]::-webkit-outer-spin-button,
.psu-calc__input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Wattage Toggle (Pill Style) ── */
.psu-calc__toggle {
  display: inline-flex;
  gap: 8px;
}

.psu-calc__toggle-btn {
  padding: 8px 22px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  border: 1.5px solid var(--psu-border);
  border-radius: var(--psu-pill);
  background: transparent;
  color: var(--psu-text-secondary);
  cursor: pointer;
  transition: all var(--psu-transition);
}

.psu-calc__toggle-btn.is-active {
  background: var(--psu-dark);
  border-color: var(--psu-dark);
  color: #fff;
}

.psu-calc__toggle-btn:not(.is-active):hover {
  border-color: var(--psu-dark);
  color: var(--psu-dark);
}

/* ── Calculate Button (Pill, Dark) ── */
.psu-calc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 28px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--psu-pill);
  background: var(--psu-dark);
  color: #fff;
  cursor: pointer;
  transition: background var(--psu-transition), transform var(--psu-transition);
}

.psu-calc__btn:hover {
  background: #2a2a44;
}

.psu-calc__btn:active {
  transform: scale(0.98);
}

.psu-calc__btn svg {
  flex-shrink: 0;
}

.psu-calc__error {
  color: #d32f2f;
  font-size: 0.85rem;
  margin: 12px 0 0;
  font-weight: 500;
}

/* ── Right Column Wrapper ── */
.psu-calc__results-wrapper {
  position: sticky;
  top: 24px;
}

/* ── Placeholder State ── */
.psu-calc__placeholder {
  background: var(--psu-card-bg);
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  padding: 48px 32px;
  text-align: center;
  box-shadow: var(--psu-shadow);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.psu-calc__placeholder-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--psu-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: var(--psu-green);
}

.psu-calc__placeholder-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--psu-dark);
}

.psu-calc__placeholder-text {
  font-size: 0.88rem;
  margin: 0;
  color: var(--psu-text-secondary);
  line-height: 1.6;
  max-width: 280px;
}

/* ── Results Card ── */
.psu-calc__results {
  background: var(--psu-card-bg);
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  padding: 32px;
  text-align: center;
  box-shadow: var(--psu-shadow);
  animation: psuFadeIn 0.3s ease;
}

@keyframes psuFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.psu-calc__result-count {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--psu-border);
}

.psu-calc__result-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--psu-text-secondary);
}

.psu-calc__result-number {
  display: block;
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--psu-green);
  letter-spacing: -0.03em;
}

.psu-calc__result-unit {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2px;
  color: var(--psu-dark);
}

/* ── Product Card (inside results) ── */
.psu-calc__product-card {
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  overflow: hidden;
  text-align: left;
}

.psu-calc__product-img-wrap {
  background: var(--psu-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.psu-calc__product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.psu-calc__product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #ccc;
}

.psu-calc__product-info {
  padding: 20px;
}

.psu-calc__product-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--psu-dark);
}

.psu-calc__product-price {
  font-size: 0.9rem;
  margin: 0 0 16px;
  color: var(--psu-text-secondary);
}

.psu-calc__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  font-size: 0.88rem;
  font-weight: 700;
  font-family: inherit;
  border-radius: var(--psu-pill);
  background: var(--psu-green);
  color: #fff;
  text-decoration: none;
  transition: background var(--psu-transition), transform var(--psu-transition);
}

.psu-calc__add-btn:hover {
  background: var(--psu-green-hover);
}

.psu-calc__add-btn:active {
  transform: scale(0.97);
}

/* ── Support Section ── */
.psu-calc__support {
  margin-top: 64px;
}

.psu-calc__support-heading {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 24px;
  text-align: center;
  color: var(--psu-dark);
  letter-spacing: -0.01em;
}

.psu-calc__support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .psu-calc__support-grid {
    grid-template-columns: 1fr;
  }
}

.psu-calc__support-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: var(--psu-card-bg);
  border: 1px solid var(--psu-border);
  border-radius: var(--psu-radius);
  text-decoration: none;
  color: var(--psu-dark);
  box-shadow: var(--psu-shadow);
  transition: border-color var(--psu-transition), box-shadow var(--psu-transition), transform var(--psu-transition);
}

.psu-calc__support-card:hover {
  border-color: var(--psu-green);
  box-shadow: var(--psu-shadow-hover);
  transform: translateY(-2px);
}

.psu-calc__support-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-card);
  background: rgba(74, 175, 71, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--psu-green);
}

.psu-calc__support-title {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--psu-dark);
}

.psu-calc__support-arrow {
  flex-shrink: 0;
  color: var(--psu-text-secondary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--psu-transition), transform var(--psu-transition);
}

.psu-calc__support-card:hover .psu-calc__support-arrow {
  opacity: 1;
  transform: translateX(0);
}
/* END_SECTION:psu-calculator */

/* START_SECTION:quick-view (INDEX:106) */
/* ═══════════════════════════════════════
   QUICK VIEW SECTION — full mini-PDP
   Two-column: gallery left, info right
   ═══════════════════════════════════════ */
.qv-section { font-family: inherit; padding: 1rem; }

/* ── Grid ── */
.qv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 899px) { .qv-grid { grid-template-columns: 1fr; } }

/* ── Gallery ── */
.qv-gallery-col { position: sticky; top: 0; align-self: flex-start; }
.qv-main-image { position: relative; border-radius: 0.5rem; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.qv-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.qv-carousel::-webkit-scrollbar { display: none; }
.qv-slide { flex: 0 0 100%; scroll-snap-align: start; }
.qv-slide__img { width: 100%; height: auto; display: block; }

/* Arrows */
.qv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.08); border-radius: 50%; cursor: pointer; transition: opacity 0.2s; z-index: 2; }
.qv-arrow:hover { opacity: 0.8; }
.qv-arrow--prev { left: 0.5rem; }
.qv-arrow--next { right: 0.5rem; }
.qv-arrow.is-disabled { opacity: 0.3; pointer-events: none; }

/* Thumbnails */
.qv-thumbs { display: flex; gap: 0.375rem; margin-top: 0.5rem; padding: 0 0.25rem; }
.qv-thumb { width: 3rem; height: 3rem; border-radius: 0.375rem; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: none; transition: border-color 0.2s; }
.qv-thumb--active { border-color: #1a1a2e; }
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Info column ── */
.qv-info-col { display: flex; flex-direction: column; gap: 0; }

/* Title */
.qv-title { font-size: 1.25rem; font-weight: 700; color: #1a1a2e; margin: 0 0 0.375rem; line-height: 1.3; }

/* Price */
.qv-price-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.qv-price { font-size: 1.125rem; font-weight: 700; color: #1a1a2e; }
.qv-compare { font-size: 0.8125rem; color: #999; text-decoration: line-through; }
.qv-save-badge { font-size: 0.6875rem; font-weight: 600; color: #e63946; background: #fef2f2; padding: 0.125rem 0.5rem; border-radius: var(--radius-button, 6px); }

/* Description with Read More */
.qv-desc-wrap { margin-bottom: 0.75rem; position: relative; }
.qv-desc-wrap--clamped .qv-desc { max-height: 4.5em; overflow: hidden; }
.qv-desc-wrap--clamped.is-expanded .qv-desc { max-height: none; }
.qv-desc { font-size: 0.8125rem; line-height: 1.55; color: #71717a; margin: 0; }
/* Rich text formatting inside quick-view description — keep paragraph
   spacing tight, normalize bold/italic to inherit the muted body color,
   and constrain list/heading sizes to fit the compact popup scale. */
.qv-desc p { margin: 0 0 0.5em; }
.qv-desc p:last-child { margin-bottom: 0; }
.qv-desc strong, .qv-desc b { color: #1a1a2e; font-weight: 600; }
.qv-desc em, .qv-desc i { font-style: italic; }
.qv-desc a { color: var(--color-brand-green, #48A06A); text-decoration: underline; text-underline-offset: 2px; }
.qv-desc ul, .qv-desc ol { margin: 0 0 0.5em; padding-inline-start: 1.25em; }
.qv-desc li { margin-bottom: 0.25em; }
.qv-desc h1, .qv-desc h2, .qv-desc h3, .qv-desc h4 { font-size: 0.875rem; font-weight: 600; color: #1a1a2e; margin: 0.5em 0 0.25em; line-height: 1.3; }
.qv-desc br + br { display: none; } /* collapse double breaks */
.qv-desc-fade { position: absolute; bottom: 1.75rem; left: 0; right: 0; height: 2rem; background: linear-gradient(to bottom, transparent, #fff); pointer-events: none; }
.qv-desc-wrap.is-expanded .qv-desc-fade { display: none; }
.qv-desc-toggle { display: flex; align-items: center; justify-content: center; gap: 0.25rem; width: 100%; padding: 0.25rem 0; margin-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: #71717a; background: rgba(0,0,0,0.04); border: none; border-radius: 4px; cursor: pointer; transition: background 0.2s; }
.qv-desc-toggle:hover { background: rgba(0,0,0,0.07); }
.qv-desc-wrap.is-expanded .qv-desc-toggle svg { transform: rotate(180deg); }

/* Variant selectors */
.qv-variants { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }
.qv-option { border: none; padding: 0; margin: 0; }
.qv-option__label { font-size: 0.75rem; font-weight: 600; color: #1a1a2e; margin-bottom: 0.375rem; display: block; }
.qv-option__selected { font-weight: 400; color: #71717a; }
.qv-swatches { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.qv-swatch { cursor: pointer; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 50%; padding: 2px; transition: border-color 0.2s; }
.qv-swatch--active { border-color: #1a1a2e; }
.qv-swatch__dot { width: 28px; height: 28px; border-radius: 50%; display: block; }
.qv-swatch__dot--image { overflow: hidden; }
.qv-swatch__dot--image img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.qv-pills { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.qv-pill { cursor: pointer; padding: 0.3125rem 0.75rem; border: 1px solid #e5e5e5; border-radius: var(--radius-button, 6px); font-size: 0.75rem; font-weight: 500; color: #555; transition: border-color 0.2s, background 0.2s; }
.qv-pill--active { border-color: #1a1a2e; background: #1a1a2e; color: #fff; }

/* Availability + Shipping row */
.qv-status-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.qv-availability { font-size: 0.75rem; color: #71717a; margin: 0; display: flex; align-items: center; gap: 0.375rem; }
.qv-availability__dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.qv-availability__dot--in { background: #22c55e; }
.qv-availability__dot--out { background: #ef4444; }
.qv-shipping-note { font-size: 0.75rem; color: #71717a; display: flex; align-items: center; gap: 0.25rem; }
.qv-shipping-note svg { color: #888; }

/* Trust badges */
.qv-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-bottom: 0.75rem; padding: 0.5rem 0; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); }
.qv-trust__badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: #555; white-space: nowrap; }
.qv-trust__badge svg { flex-shrink: 0; }
.qv-trust__sep { color: rgba(0,0,0,0.15); font-size: 0.75rem; }

/* Accordions */
.qv-accordions { display: flex; flex-direction: column; }
.qv-accordion { border-bottom: 1px solid rgba(0,0,0,0.06); }
.qv-accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.625rem 0; background: none; border: none; cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: #1a1a2e; font-family: inherit; }
.qv-accordion__trigger:hover { opacity: 0.7; }
.qv-accordion__chevron { transition: transform 0.2s; flex-shrink: 0; }
.qv-accordion__trigger[aria-expanded="true"] .qv-accordion__chevron { transform: rotate(180deg); }
.qv-accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.qv-accordion__trigger[aria-expanded="true"] + .qv-accordion__content { max-height: 500px; }
.qv-accordion__content p { font-size: 0.8125rem; color: #666; margin: 0 0 0.5rem; line-height: 1.5; }
.qv-accordion__content p:last-child { margin-bottom: 0.625rem; }
.qv-accordion__content a { color: #1a1a2e; text-decoration: underline; }

/* Hidden form */
.qv-form { display: none; }

/* Dark theme overrides */
.theme-dark .qv-title { color: #f5f5f5; }
.theme-dark .qv-price { color: #f5f5f5; }
.theme-dark .qv-desc { color: rgba(255,255,255,0.55); }
.theme-dark .qv-desc strong, .theme-dark .qv-desc b,
.theme-dark .qv-desc h1, .theme-dark .qv-desc h2,
.theme-dark .qv-desc h3, .theme-dark .qv-desc h4 { color: #f5f5f5; }
.theme-dark .qv-desc-fade { background: linear-gradient(to bottom, transparent, var(--qv-bg, #1e1e21)); }
.theme-dark .qv-desc-toggle { color: #f5f5f5; background: rgba(255,255,255,0.1); }
.theme-dark .qv-option__label { color: #f5f5f5; }
.theme-dark .qv-swatch--active { border-color: #f5f5f5; }
.theme-dark .qv-pill--active { border-color: #f5f5f5; background: #f5f5f5; color: #1a1a2e; }
.theme-dark .qv-accordion__trigger { color: #f5f5f5; }
.theme-dark .qv-accordion__content p { color: rgba(255,255,255,0.55); }
.theme-dark .qv-accordion { border-color: rgba(255,255,255,0.1); }
.theme-dark .qv-trust { border-color: rgba(255,255,255,0.1); }
.theme-dark .qv-trust__badge { color: rgba(255,255,255,0.7); }
.theme-dark .qv-main-image { border-color: rgba(255,255,255,0.1); }

/* .visually-hidden is defined globally in assets/theme.css */
/* END_SECTION:quick-view */

/* START_SECTION:retailer-grid (INDEX:107) */
/* ═══════════════════════════════════════
   RETAILER GRID — where to buy
   ═══════════════════════════════════════ */
.retailer-grid {
  padding: var(--space-3xl) 0;
}

.retailer-grid__header {
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: 36rem;
  margin-inline: auto;
}

.retailer-grid__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 0.75rem;
}

.retailer-grid__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-body-text, #555);
  margin: 0;
}

/* ── Grid ── */
.retailer-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* ── Card ── */
.retailer-grid__card {
  background: #fff;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.retailer-grid__card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ── Logo ── */
.retailer-grid__logo-wrap {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.retailer-grid__logo {
  max-width: 120px;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.retailer-grid__logo-placeholder {
  width: 120px;
  background: var(--color-secondary, #f5f4f0);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

.retailer-grid__logo-text {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-muted, #71717a);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.retailer-grid__name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}

.retailer-grid__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-brand-green-dark, #388455);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.retailer-grid__link:hover {
  opacity: 0.7;
}

/* ── Desktop: 3 columns ── */
@media (min-width: 768px) {
  .retailer-grid__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .retailer-grid__card {
    padding: 2.5rem 2rem;
  }
}

/* ── Mobile ── */
@media (max-width: 749px) {
  .retailer-grid { padding: var(--space-2xl) 0; }
  .retailer-grid__card { padding: 1.5rem 1rem; }
}
/* END_SECTION:retailer-grid */

/* START_SECTION:sale-banner (INDEX:108) */
/* ── Sale Banner ── */
.sale-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--sale-bg, #000);
  color: var(--sale-fg, #fff);
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
  /* One transition instead of two keyframe animations: a dismiss that lands
     mid-entrance retargets from the current position instead of snapping
     fully open before sliding away. */
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.sale-banner[hidden] { display: none; }

.sale-banner.is-open { transform: translateY(0); }
.sale-banner.sale-banner--closing { transform: translateY(-100%); }

.sale-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 48px;
  max-width: var(--uw-max, 1280px);
  width: 100%;
  justify-content: center;
}

.sale-banner__headline {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Countdown */
.sale-banner__countdown {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sale-banner__digit {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.12);
  padding: 3px 6px;
  border-radius: 4px;
  min-width: 28px;
  text-align: center;
  color: var(--sale-accent);
}

.sale-banner__sep {
  font-family: 'SF Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  opacity: 0.5;
  margin: 0 1px;
}

/* CTA */
.sale-banner__cta {
  display: inline-flex;
  align-items: center;
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--sale-accent);
  color: var(--sale-bg, #000);
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.sale-banner__cta:hover { opacity: 0.85; }

/* Close */
.sale-banner__close {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--sale-fg);
  opacity: 0.5;
  cursor: pointer;
  padding: 6px;
  line-height: 0;
  transition: opacity 0.2s ease;
}
.sale-banner__close:hover { opacity: 1; }

/* ── Body offset when banner is visible ── */
html.has-sale-banner {
  --sale-banner-height: 52px;
}
html.has-sale-banner body {
  padding-top: var(--sale-banner-height);
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .sale-banner { height: 44px; }
  html.has-sale-banner { --sale-banner-height: 44px; }

  .sale-banner__inner {
    gap: 10px;
    padding: 0 40px 0 12px;
    flex-wrap: nowrap;
  }

  .sale-banner__headline {
    font-size: 11px;
    flex: 1;
    min-width: 0;
  }

  .sale-banner__digit {
    font-size: 11px;
    padding: 2px 4px;
    min-width: 22px;
  }

  .sale-banner__sep { font-size: 11px; }

  .sale-banner__cta {
    font-size: 10px;
    padding: 4px 10px;
  }

  .sale-banner__close { right: 8px; }
}

/* Stack on very small screens */
@media (max-width: 479px) {
  .sale-banner__cta { display: none; }
}
/* END_SECTION:sale-banner */

/* START_SECTION:shop-by-category (INDEX:109) */
.sbc {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .sbc { padding-inline: var(--pdp-gutter, 2rem); }
}

.sbc__container { width: 100%; }

.sbc__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md, 1.5rem);
  margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sbc__header-text { flex: 1 1 auto; min-width: 0; }
.sbc__heading { margin-block-end: 0 !important; }

.sbc__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text, #1a1a2e);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sbc__view-all:hover { opacity: 0.7; }

/* Mobile: the desktop title-row squeezed the intro into a narrow column next
   to the link (NL-QA-07) — stack them instead. */
@media (max-width: 749px) {
  .sbc__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* ════════════════════════════════════════════
   BENTO MOOD GRID
   ════════════════════════════════════════════ */
.sbc__bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block-end: 0; /* Tightened — drilldown immediately below, no big air */
}
@media (min-width: 750px) {
  .sbc__bento { grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }

  /* 2 blocks: side-by-side equal */
  .sbc__bento[data-block-count="2"] .sbc__bento-card { grid-column: span 6; }

  /* 3 blocks: hero on top, two beneath */
  .sbc__bento[data-block-count="3"] .sbc__bento-card:first-child { grid-column: span 12; }
  .sbc__bento[data-block-count="3"] .sbc__bento-card:not(:first-child) { grid-column: span 6; }

  /* 4 blocks: 2x2 square grid — every card same size, simple + premium */
  .sbc__bento[data-block-count="4"] .sbc__bento-card { grid-column: span 6; }
}

.sbc__bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--pdp-radius-card, 18px);
  background: var(--bento-tone, #0d0d18);
  text-decoration: none;
  color: #fff;
  aspect-ratio: 16 / 10;
  isolation: isolate;
  transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 250ms ease;
}
.sbc__bento-card:hover {
  transform: translateY(-3px);
  /* 24px blur instead of 40px: a 40px-blur shadow animating on a ~600px
     surface was the most expensive shadow animation in the theme */
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.18);
}

@media (min-width: 750px) {
  .sbc__bento[data-block-count="3"] .sbc__bento-card:first-child { aspect-ratio: 21 / 9; }
  .sbc__bento[data-block-count="4"] .sbc__bento-card { aspect-ratio: 5 / 4; }
}

.sbc__bento-media { position: absolute; inset: 0; z-index: -1; }
.sbc__bento-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1); }
.sbc__bento-card:hover .sbc__bento-img { transform: scale(1.05); }
.sbc__bento-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 35%, transparent 70%);
}

.sbc__bento-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.sbc__bento-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.375rem 0.875rem;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: #fff;
}

.sbc__bento-text { margin-top: auto; }

.sbc__bento-meta {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.75;
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.sbc__bento-title {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 0.5rem;
}

.sbc__bento[data-block-count="4"] .sbc__bento-card:first-child .sbc__bento-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }

.sbc__bento-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.82);
  margin: 0 0 1rem;
  max-width: 26rem;
}

.sbc__bento-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  transition: gap 0.25s ease;
}
.sbc__bento-card:hover .sbc__bento-cta { gap: 0.7rem; }

/* ════════════════════════════════════════════
   DRILLDOWN (tabs + scroller)
   ════════════════════════════════════════════ */
.sbc__drilldown {
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: clamp(1.25rem, 2vw, 1.5rem);
  border-top: 1px solid var(--pdp-border, #e5e7eb);
}

.sbc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 1.5rem;
}

.sbc__tab {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--pdp-border, #e5e7eb);
  background: #fff;
  color: var(--color-text, #1a1a2e);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.125rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
  line-height: 1.4;
}
.sbc__tab:hover { border-color: var(--color-text, #1a1a2e); }
.sbc__tab--active {
  background: var(--color-brand-green-dark, #2d8a23);
  color: #fff;
  border-color: var(--color-brand-green-dark, #2d8a23);
}
.sbc--accent-neutral .sbc__tab--active { background: #1a1a2e; border-color: #1a1a2e; }

.sbc__tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  height: 1.125rem;
  background: rgba(0,0,0,0.06);
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sbc__tab--active .sbc__tab-count { background: rgba(255,255,255,0.2); color: #fff; }

.sbc__panel { display: none; }
.sbc__panel--active { display: block; }

.sbc__scroll-wrap { position: relative; }

.sbc__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.sbc__track::-webkit-scrollbar { display: none; }

.sbc__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--color-text, #1a1a2e);
}
.sbc__arrow:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.14); }
.sbc__arrow--prev { left: -0.75rem; }
.sbc__arrow--next { right: -0.75rem; }
.sbc__arrow:disabled { opacity: 0; pointer-events: none; visibility: hidden; }
@media (max-width: 749px) {
  .sbc__arrow--prev { display: none; }
  .sbc__arrow--next { right: 0.5rem; width: 36px; height: 36px; }
}

.sbc__sub-card {
  flex: 0 0 220px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: var(--pdp-radius-card, 18px);
  overflow: hidden;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.sbc__sub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -8px rgba(0,0,0,0.08);
  border-color: color-mix(in srgb, var(--color-brand-green, #48A06A) 30%, var(--pdp-border, #e5e7eb));
}

.sbc__sub-thumb {
  aspect-ratio: 4 / 3;
  background: #f5f5f0;
  position: relative;
  overflow: hidden;
}
.sbc__sub-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.sbc__sub-card:hover .sbc__sub-img { transform: scale(1.04); }
.sbc__sub-icon { width: 60%; height: 60%; margin: 20% auto; display: block; object-fit: contain; }
.sbc__sub-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #9ca3af;
}

.sbc__sub-info { padding: 0.875rem 1rem 1rem; }
.sbc__sub-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
  margin: 0 0 0.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sbc__sub-count {
  font-size: 0.75rem;
  color: var(--pdp-text-muted, #6b7280);
  margin: 0;
  line-height: 1.3;
}

/* Mobile: bleed scroller to viewport edge */
@media (max-width: 749px) {
  .sbc__bento { gap: 0.75rem; }
  .sbc__bento-card { aspect-ratio: 16 / 12; }
  .sbc__scroll-wrap {
    margin-inline: calc(-1 * var(--pdp-gutter, 1.25rem));
  }
  .sbc__track {
    padding-inline: var(--pdp-gutter, 1.25rem);
    padding-right: 3rem;
    gap: 0.75rem;
  }
  .sbc__sub-card { flex-basis: 180px; }
}
/* END_SECTION:shop-by-category */

/* START_SECTION:shop-the-feed (INDEX:110) */
.stf {
  --stf-text: #1a1a2e;
  --stf-muted: rgba(26, 26, 46, 0.6);
  --stf-link: var(--color-brand-green-text, #308551);
  padding: var(--section-spacing-l) 0;
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  color: var(--stf-text);
}
.stf--bg-auto  { background: transparent; }
.stf--bg-grey  { background: #F7F7F8; }
.stf--bg-dark {
  background: #1a1a2e;
  --stf-text: #ffffff;
  --stf-muted: rgba(255, 255, 255, 0.7);
}

.stf__inner {
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .stf__inner { padding-inline: var(--pdp-gutter, 2rem); }
}

/* Header */
.stf__header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: var(--section-spacing-m);
  align-items: flex-start;
}
@media (min-width: 768px) {
  .stf__header { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
}

.stf__headline { max-width: 640px; }
/* Brand-green pill eyebrow — matches every other section theme-wide */
.stf__eyebrow {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-green-dark, #2d8a23);
  line-height: 1.4;
  margin-bottom: 0.875rem;
}
.stf--bg-dark .stf__eyebrow {
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 18%, transparent);
  color: #b6f1c9;
}
.stf__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}
.stf__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--stf-muted);
}

.stf__social {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.stf__handle {
  font-weight: 700;
  font-size: 1rem;
  color: var(--stf-text);
}
.stf__follow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.1rem;
  border-radius: 9999px;
  background: var(--color-brand-green-dark, #2d8a23);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.stf__follow:hover { background: var(--color-brand-green, #48A06A); transform: translateY(-1px); }
.stf--bg-dark .stf__follow { background: #ffffff; color: var(--color-text, #1a1a2e); }
.stf--bg-dark .stf__follow:hover { background: var(--color-brand-green, #48A06A); color: #ffffff; }

/* Scroll wrap (carousel) */
.stf__scroll-wrap {
  position: relative;
}

/* Track */
.stf__track {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stf__track::-webkit-scrollbar { display: none; }

/* Card sizing per breakpoint */
.stf__card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 70vw;
  max-width: 18rem;
}
@media (min-width: 640px) and (max-width: 979px) {
  .stf__track { gap: 1.25rem; }
  .stf__card { width: calc((100% - 2.5rem) / 2.5); max-width: none; }
}
@media (min-width: 980px) {
  .stf__track { gap: 1.25rem; }
  .stf--cols-3 .stf__card { width: calc((100% - 2.5rem) / 3); max-width: none; }
  .stf--cols-4 .stf__card { width: calc((100% - 3.75rem) / 4); max-width: none; }
  .stf--cols-5 .stf__card { width: calc((100% - 5rem)    / 5); max-width: none; }
}

/* Gradient edge fades */
.stf__fade {
  position: absolute;
  top: 0;
  bottom: 0.5rem; /* match track padding-bottom */
  width: 4rem;
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.stf__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--section-bg, #ffffff) 0%, transparent 100%);
}
.stf__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--section-bg, #ffffff) 0%, transparent 100%);
}
.stf--bg-grey { --section-bg: #F7F7F8; }
.stf--bg-dark { --section-bg: #1a1a2e; }

/* Arrow buttons */
.stf__arrow {
  position: absolute;
  top: calc(50% - 0.25rem);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: opacity 0.25s ease, visibility 0.25s ease, box-shadow 0.2s ease;
}
.stf__arrow:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14); }
.stf__arrow:focus-visible { outline: 2px solid var(--stf-link); outline-offset: 2px; }
.stf__arrow--prev { left: -0.75rem; }
.stf__arrow--next { right: -0.75rem; }
.stf__arrow:disabled,
.stf__arrow[hidden] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.stf--bg-dark .stf__arrow { border-color: rgba(255, 255, 255, 0.3); }

/* Card */
.stf__card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a2e; /* fallback while media loads */
}
.stf__card-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.stf__media {
  position: relative;
  width: 100%;
  background: #1a1a2e;
}
.stf--ratio-portrait  .stf__media { aspect-ratio: 4 / 5; }
.stf--ratio-square    .stf__media { aspect-ratio: 1 / 1; }
.stf--ratio-landscape .stf__media { aspect-ratio: 16 / 9; }

.stf__img,
.stf__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.stf__video-external,
.stf__video-external iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
.stf__media-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #2a2a3e, #1a1a2e);
}
.stf__media-icon {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Overlay (user handle + hover CTA) */
.stf__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}
.stf__user,
.stf__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.stf__cta {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  background: #ffffff;
  color: #1a1a2e;
  pointer-events: auto;
}
.stf__card-link:hover .stf__user,
.stf__card-link:focus-visible .stf__user { opacity: 0; }
.stf__card-link:hover .stf__cta,
.stf__card-link:focus-visible .stf__cta {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile: always show CTA (no hover state on touch devices), hide user handle.
   Track bleeds slightly to viewport edges + only the next-arrow shows. */
@media (max-width: 639px) {
  .stf { padding: var(--section-spacing-m) 0; }
  .stf__inner { padding: 0 1rem; }
  .stf__overlay { padding: 1rem; }
  .stf__user { font-size: 0.75rem; padding: 0.5rem 0.75rem; }
  .stf__cta  { font-size: 0.75rem; padding: 0.55rem 0.85rem; bottom: 1rem; }

  .stf__scroll-wrap {
    margin-left: -1rem;
    margin-right: -1rem;
  }
  .stf__track {
    padding-left: 1rem;
    padding-right: 3rem;
  }
  .stf__arrow--prev { display: none; }
  .stf__arrow--next {
    width: 36px;
    height: 36px;
    right: 0.5rem;
  }
  .stf__fade--left  { left: 0; }
  .stf__fade--right { right: 0; }
}
/* END_SECTION:shop-the-feed */

/* START_SECTION:split-panel (INDEX:112) */
/* ── HP Split Panel ── */
.split-panel__empty-hint {
  margin: 0.75rem auto 0;
  max-width: var(--pdp-container, 72rem);
  padding: 0.875rem 1.25rem;
  border: 2px dashed #b9b9b9;
  border-radius: 10px;
  background: #fbfbfb;
  color: #4a4a4a;
  font-size: 0.9rem;
}
.split-panel {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  /* No padding-block here: the .shopify-section wrapper pays the rhythm via
     section-rhythm.css's BOXED :has(.split-panel) rule. Declaring it in both
     places doubled the gap on /pages/about. */
  padding-block: 0;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .split-panel {
    padding-inline: var(--pdp-gutter, 2rem);
  }
}

/* The data-spacing selects act on the wrapper (which owns the rhythm now),
   not the inner element — otherwise "tight" would ADD padding on top of the
   zero default above. */
#main-content > .shopify-section:has(> .split-panel[data-spacing-top="tight"])    { padding-block-start: 1.5rem; }
#main-content > .shopify-section:has(> .split-panel[data-spacing-top="none"])     { padding-block-start: 0; }
#main-content > .shopify-section:has(> .split-panel[data-spacing-bottom="tight"]) { padding-block-end: 1.5rem; }
#main-content > .shopify-section:has(> .split-panel[data-spacing-bottom="none"])  { padding-block-end: 0; }

.split-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 72rem;
  margin-inline: auto;
}

.split-panel__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: var(--sp-justify, flex-end);
  aspect-ratio: var(--sp-ratio, 3 / 4);
  background: var(--hp-panel-bg, var(--color-surface));
  color: var(--color-text);
  overflow: hidden;
  border-radius: var(--pdp-radius-card, 14px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.split-panel__panel--dark { color: #fff; }

/* Editor-only panel — dashed outline so it reads as a slot, not a live card */
.split-panel__panel--editor-only {
  box-shadow: none;
  outline: 2px dashed #c4c4cc;
  outline-offset: -2px;
}

.split-panel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.split-panel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-panel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Missing-image placeholder — editor only. It used to render on the storefront
   (Marta PDP review Jul 8, basic #4); shoppers now see the panel's bg_color
   card instead and the badge is gated behind request.design_mode. */
.split-panel__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #f0f0f2, #f0f0f2 12px, #e9e9ec 12px, #e9e9ec 24px);
}
.split-panel__media-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #6f6f7d;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.split-panel__content {
  position: relative;
  z-index: 2;
  padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  text-align: center;
  background: linear-gradient(to top, rgb(0 0 0 / var(--sp-overlay, 0.3)) 0%, rgb(0 0 0 / calc(var(--sp-overlay, 0.3) * 0.5)) 50%, transparent 100%);
}

.split-panel__panel--dark .split-panel__content {
  background: linear-gradient(to top, rgb(0 0 0 / calc(var(--sp-overlay, 0.3) + 0.15)) 0%, rgb(0 0 0 / calc(var(--sp-overlay, 0.3) * 0.4)) 55%, transparent 100%);
}

/* Editor-only note block — no gradient, centred in the card */
.split-panel__content--editor-note,
.split-panel__panel--dark .split-panel__content--editor-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  padding: var(--space-lg);
}
.split-panel__editor-note {
  max-width: 22rem;
  padding: 0.75rem 1rem;
  border: 2px dashed #b9b9b9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
  color: #4a4a4a;
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
}

.split-panel__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-xs);
  color: #fff;
}

/* Text sizes */
.split-panel--text-small .split-panel__heading { font-size: clamp(1.125rem, 2vw, 1.5rem); }
.split-panel--text-medium .split-panel__heading { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.split-panel--text-large .split-panel__heading { font-size: clamp(1.75rem, 4vw, 3rem); }

.split-panel--text-small .split-panel__desc { font-size: var(--font-size-xs); }
.split-panel--text-medium .split-panel__desc { font-size: var(--font-size-sm); }
.split-panel--text-large .split-panel__desc { font-size: var(--font-size-base, 1rem); }

.split-panel__desc {
  opacity: 0.9;
  margin-bottom: var(--space-md);
  line-height: var(--line-height-base);
  color: #fff;
}

/* Normalize rich-text inner paragraphs so the description box height
   matches plain text — keeps headings aligned across panels. */
.split-panel__desc p { margin: 0; }
.split-panel__desc p + p { margin-top: 0.5em; }

/* Last child in the content box never carries trailing margin — an absent CTA
   would otherwise leave the description's margin hanging under it. */
.split-panel__content > :last-child { margin-bottom: 0; }

.split-panel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: #fff;
}

/* Linked panel — full card clickable */
.split-panel__panel--linked {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.split-panel__panel--linked:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.split-panel__panel--linked:hover .split-panel__img {
  transform: scale(1.04);
}
.split-panel__panel--linked:hover .split-panel__link {
  opacity: 1;
}
.split-panel__panel--linked:hover .split-panel__link svg {
  transform: translateX(4px);
  transition: transform 0.2s ease;
}
.split-panel__link { transition: opacity 0.2s; }
.split-panel__link:hover { opacity: 0.7; }

/* No-image fallback — remove gradient, use bg_color text contrast */
.split-panel__content--no-image {
  background: none;
}
.split-panel__panel:not(.split-panel__panel--dark) .split-panel__content--no-image .split-panel__heading,
.split-panel__panel:not(.split-panel__panel--dark) .split-panel__content--no-image .split-panel__desc,
.split-panel__panel:not(.split-panel__panel--dark) .split-panel__content--no-image .split-panel__link {
  color: var(--color-text, #1a1a2e);
}

@media (min-width: 768px) {
  .split-panel__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* One visible panel — collapse to a single column and keep the card at
     roughly the width it would have had in the pair, so it does not stretch
     to 72rem and blow out the 3/4 aspect ratio. */
  .split-panel__grid--single {
    grid-template-columns: minmax(0, 35.5rem);
    justify-content: center;
  }
  /* Fixed structure: heading anchored at a consistent line, description flows
     below it. Box spans from the anchor line to the panel bottom so the
     gradient still reaches the edge; heading sits at the top of that box,
     so its position never depends on description length. */
  .split-panel__content {
    position: absolute;
    inset: var(--sp-anchor-top, 56%) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-md) var(--space-2xl) var(--space-3xl);
  }
  .split-panel__content--editor-note {
    inset: 0;
    padding: var(--space-lg);
  }
}

/* ── Mobile overrides ── */
@media (max-width: 749px) {
  .split-panel__panel { aspect-ratio: var(--mobile-sp-ratio, auto); }

  /* Mobile text sizes */
  .split-panel--m-text-small .split-panel__heading { font-size: clamp(1rem, 4vw, 1.25rem); }
  .split-panel--m-text-medium .split-panel__heading { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .split-panel--m-text-large .split-panel__heading { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .split-panel--m-text-auto .split-panel__heading { font-size: unset; }

  .split-panel--m-text-small .split-panel__desc { font-size: var(--font-size-xs); }
  .split-panel--m-text-medium .split-panel__desc { font-size: var(--font-size-sm); }
  .split-panel--m-text-large .split-panel__desc { font-size: var(--font-size-base, 1rem); }
  .split-panel--m-text-auto .split-panel__desc { font-size: unset; }
}

.split-panel__eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  color: var(--color-brand-green-text, #308551);
}
/* END_SECTION:split-panel */

/* START_SECTION:stats-band (INDEX:113) */
.stats-band {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
  padding-inline: var(--pdp-gutter, 1.25rem);
  /* section-heading defaults to neutral greys; the palette only has Core Green,
     Mirage, Gray Haze, white and black, so drive both off brand tokens. */
  --nf-section-heading-eyebrow: var(--color-brand-green-text, #308551);
  --nf-section-heading-subtitle: var(--pdp-text-muted, #555c65);
}

@media (min-width: 768px) {
  .stats-band { padding-inline: var(--pdp-gutter, 2rem); }
}

/* Match the page-width boxing the other content blocks get on ultrawide. The
   gutter is dropped there so the card's edge lands on the same line as the
   neighbouring panels; below 1400px it still keeps the card off the viewport.
   Must follow the 768px rule, which would otherwise win on source order. */
@media (min-width: 1400px) {
  .stats-band {
    max-width: var(--uw-max, 1280px);
    padding-inline: 0;
  }
}

/* Top / bottom spacing selects. Without these the data attributes the section
   emits are inert, which is why the editor's spacing controls did nothing. */
.stats-band[data-spacing-top="tight"]    { padding-block-start: clamp(1.5rem, 3vw, 2.5rem); }
.stats-band[data-spacing-top="none"]     { padding-block-start: 0; }
.stats-band[data-spacing-bottom="tight"] { padding-block-end: clamp(1.5rem, 3vw, 2.5rem); }
.stats-band[data-spacing-bottom="none"]  { padding-block-end: 0; }

.stats-band__container {
  background: var(--stats-band-bg, color-mix(in srgb, var(--color-brand-green, #48A06A) 6%, transparent));
  border: 1px solid var(--stats-band-border, color-mix(in srgb, var(--color-brand-green, #48A06A) 18%, transparent));
  border-radius: var(--pdp-radius-card, 18px);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.stats-band__head {
  margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Auto grid — cols match number of blocks (1-5) */
.stats-band__grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .stats-band--cols-2 .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band--cols-3 .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band--cols-4 .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band--cols-5 .stats-band__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .stats-band--cols-2 .stats-band__grid { grid-template-columns: repeat(2, 1fr); max-width: 36rem; margin-inline: auto; }
  .stats-band--cols-3 .stats-band__grid { grid-template-columns: repeat(3, 1fr); }
  .stats-band--cols-4 .stats-band__grid { grid-template-columns: repeat(4, 1fr); }
  .stats-band--cols-5 .stats-band__grid { grid-template-columns: repeat(5, 1fr); }
}

.stats-band__item {
  text-align: center;
  padding: 0.5rem 0.25rem;
}

.stats-band__value {
  font-family: var(--font-heading, inherit);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--stats-band-accent, var(--color-brand-green-dark, #328549));
  margin-block-end: 0.5rem;
}

.stats-band__label {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--pdp-text-muted, #555c65);
  font-weight: 500;
  margin: 0;
  max-width: 14rem;
  margin-inline: auto;
}

/* ── Accent variants ── */
.stats-band--accent-green {
  --stats-band-accent: var(--color-brand-green-dark, #328549);
  --stats-band-bg: color-mix(in srgb, var(--color-brand-green, #48A06A) 6%, transparent);
  --stats-band-border: color-mix(in srgb, var(--color-brand-green, #48A06A) 18%, transparent);
}
.stats-band--accent-neutral {
  --stats-band-accent: #1a1a2e;
  --stats-band-bg: #f5f5f0;
  --stats-band-border: #e5e7eb;
}
.stats-band--accent-warm {
  --stats-band-accent: #c2410c;
  --stats-band-bg: #fff7ed;
  --stats-band-border: #fed7aa;
}
.stats-band--accent-dark {
  --stats-band-accent: #fff;
  --stats-band-bg: #1a1a2e;
  --stats-band-border: rgba(255,255,255,0.1);
}
.stats-band--accent-dark .stats-band__label { color: rgba(255,255,255,0.65); }
/* END_SECTION:stats-band */

/* START_SECTION:story-card (INDEX:114) */
/* ── HP Story Card ── */
.story-card {
  position: relative;
  width: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--hp-story-text, #fff);
}

.story-card__color-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* The conditional that used to sit here never ran: {% stylesheet %} does not
     render Liquid, so the raw tag landed in the compiled CSS and its `{` opened
     a stray block that the parser had to recover from. The section already
     passes the real colour in through this custom property. */
  background: var(--hp-story-bg-fallback, #1a1a2e);
}

.story-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.story-card__img,
.story-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story-card__video { background: #000; }
.story-card__media--external {
  width: 100%;
  height: 100%;
}
.story-card__media--external iframe,
.story-card__media--external .story-card__video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.story-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / var(--story-overlay, 0.35));
  pointer-events: none;
}

.story-card__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  max-width: 700px;
}

/* ─────────── Shop the Look ─────────── */
.story-card--shoppable .story-card__content {
  /* When shoppable, pull the heading content to the side opposite the card overlay */
  text-align: left;
  max-width: 540px;
  align-self: flex-start;
  padding: var(--space-3xl) var(--space-xl);
}
.story-card--card-top-right    .story-card__content,
.story-card--card-middle-right .story-card__content,
.story-card--card-bottom-right .story-card__content { margin-right: auto; margin-left: 0; }
.story-card--card-top-left     .story-card__content,
.story-card--card-middle-left  .story-card__content,
.story-card--card-bottom-left  .story-card__content { margin-left: auto; margin-right: 0; text-align: right; }

/* Pin dots positioned on the image */
.story-card__pins {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.story-card__pin {
  position: absolute;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.story-card__pin-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.32), 0 2px 8px rgba(0, 0, 0, 0.25);
  margin: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  transition: box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.story-card__pin-dot::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  z-index: -1;
}
.story-card__pin:hover .story-card__pin-dot,
.story-card__pin--active .story-card__pin-dot {
  background: var(--color-brand-green, #48A06A);
  box-shadow: 0 0 0 4px rgba(72, 160, 106, 0.32), 0 2px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-50%) scale(1.15);
}
.story-card__pin--dark .story-card__pin-dot { background: #1a1a2e; }
.story-card__pin--dark.story-card__pin--active .story-card__pin-dot,
.story-card__pin--dark:hover .story-card__pin-dot { background: var(--color-brand-green, #48A06A); }
.story-card__pin:focus-visible { outline: none; }
.story-card__pin:focus-visible .story-card__pin-dot {
  box-shadow: 0 0 0 4px rgba(72, 160, 106, 0.5), 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* Product card overlay — anchored to a corner or mid-edge */
.story-card__products {
  position: absolute;
  z-index: 4;
  width: min(260px, calc(100vw - 2.5rem));
  pointer-events: none;
}
/* Right-side variants */
.story-card--card-top-right    .story-card__products { top: 1.5rem;       right: 1.5rem; }
.story-card--card-middle-right .story-card__products { top: 50%;          right: 1.5rem; transform: translateY(-50%); }
.story-card--card-bottom-right .story-card__products { bottom: 1.5rem;    right: 1.5rem; }
/* Left-side variants */
.story-card--card-top-left     .story-card__products { top: 1.5rem;       left: 1.5rem; }
.story-card--card-middle-left  .story-card__products { top: 50%;          left: 1.5rem;  transform: translateY(-50%); }
.story-card--card-bottom-left  .story-card__products { bottom: 1.5rem;    left: 1.5rem; }

.story-card__product-card {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 0.7rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: auto;
  color: #1a1a2e;
  width: 100%;
}
.story-card__product-card--active { display: flex; }

/* Compact popup: thumbnail + info sit side by side so the card stays short
   and the Add to Cart button is always visible within the section. */
.story-card__product-link {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.story-card__product-img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 1 / 1;
}
.story-card__product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card__product-info { padding: 0; flex: 1; min-width: 0; }
.story-card__product-note {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: #45a468;
  margin: 0 0 0.4rem;
}
.story-card__product-note p {
  margin: 0 0 0.25rem;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
.story-card__product-note > :last-child { margin-bottom: 0; }
.story-card__product-note a {
  color: #45a468;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ── Floating callout (note-only pin): a light glass tag on the image ── */
.story-card__callouts {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.story-card__callout {
  position: absolute;
  transform: translate(-50%, -50%);
}
/* The pill floats above the dot, hidden until the dot is tapped */
.story-card__callout-pill {
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: max-content;
  max-width: min(220px, 56vw);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: normal;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s, box-shadow 0.18s ease;
}
/* Revealed on tap */
.story-card__callout.is-open .story-card__callout-pill {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
a.story-card__callout-pill:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}
/* Small downward pointer from the pill toward the dot */
.story-card__callout-pill::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
}
.story-card__callout-text p { display: inline; margin: 0; }
.story-card__callout-arrow { flex-shrink: 0; }
/* The anchor dot is the tap target that reveals the tag */
.story-card__callout-dot {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.story-card__callout-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.story-card__callout-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
}

/* Light style: frosted dark glass, white text (for light/busy images) */
.story-card__callout--light .story-card__callout-pill {
  background: rgba(20, 22, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
}
.story-card__callout--light .story-card__callout-pill::after {
  background: rgba(20, 22, 32, 0.55);
  border-right: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.story-card__callout--light .story-card__callout-dot { background: #fff; }

/* Dark style: frosted white glass, dark text (for dark images) */
.story-card__callout--dark .story-card__callout-pill {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a2e;
}
.story-card__callout--dark .story-card__callout-pill::after {
  background: rgba(255, 255, 255, 0.82);
  border-right: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.story-card__callout--dark .story-card__callout-dot { background: #1a1a2e; }

/* ── Callout product card: tap a dot to reveal a product preview above it ── */
.story-card__callout-card {
  pointer-events: none;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  width: 240px;
  max-width: 72vw;
  background: #ffffff;
  color: #1a1a2e;
  border-radius: 12px;
  padding: 0.7rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.story-card__callout.is-open .story-card__callout-card {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.story-card__callout-card::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
}
.story-card__callout-card-link {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.story-card__callout-card-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 1 / 1;
  display: block;
}
.story-card__callout-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card__callout-card-info { display: block; flex: 1; min-width: 0; }
.story-card__callout-card-note {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color: #45a468;
  margin-bottom: 0.25rem;
}
.story-card__callout-card-note p { display: inline; margin: 0; }
.story-card__callout-card-note a { color: #45a468; text-decoration: underline; text-underline-offset: 2px; }
.story-card__callout-card-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a2e;
}
.story-card__callout-card-price {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: #1a1a2e;
}
.story-card__callout-card-price-was {
  margin-left: 0.4rem;
  text-decoration: line-through;
  color: rgba(26, 26, 46, 0.45);
}
.story-card__callout-card-form { margin: 0.6rem 0 0; }
.story-card__callout-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--color-brand-green, #48A06A);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.story-card__callout-card-cta:hover { background: #45a468; }
.story-card__callout-card-cta:disabled { background: #c8c8c8; cursor: not-allowed; }

.story-card__product-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a2e;
}
.story-card__product-price {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: #1a1a2e;
}
.story-card__product-price-was {
  margin-left: 0.5rem;
  text-decoration: line-through;
  color: rgba(26, 26, 46, 0.45);
}
.story-card__product-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: rgba(26, 26, 46, 0.7);
}
.story-card__product-rating svg { color: #f5b400; }
.story-card__product-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  background: var(--color-brand-green, #48A06A);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 0.625rem 0.85rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 0.5rem;
  line-height: 1;
  transition: background-color 0.2s ease;
}
.story-card__product-cta:hover { background: #45a468; }
.story-card__product-cta:disabled { background: #c8c8c8; cursor: not-allowed; }
.story-card__product-quick {
  display: block;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(26, 26, 46, 0.65);
  text-decoration: underline;
  text-decoration-color: rgba(26, 26, 46, 0.25);
  text-underline-offset: 3px;
  margin-top: 0.25rem;
}
.story-card__product-quick:hover { color: #1a1a2e; text-decoration-color: #1a1a2e; }

/* Mobile: card overlay becomes a full-width strip below the image
   (anchor positions are desktop-only; on phones the card is in the flow). */
@media (max-width: 640px) {
  .story-card--shoppable .story-card__content { max-width: 100%; padding: var(--space-2xl) var(--space-md); }
  .story-card__products,
  .story-card--card-top-right    .story-card__products,
  .story-card--card-middle-right .story-card__products,
  .story-card--card-bottom-right .story-card__products,
  .story-card--card-top-left     .story-card__products,
  .story-card--card-middle-left  .story-card__products,
  .story-card--card-bottom-left  .story-card__products {
    position: relative;
    inset: auto;
    bottom: auto; top: auto; left: auto; right: auto;
    transform: none;
    width: calc(100% - 1.5rem);
    margin: 0.75rem auto;
  }
  .story-card__product-card { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.75rem; }
  .story-card__product-card .story-card__product-link { display: flex; gap: 0.75rem; flex: 1; }
  .story-card__product-img { width: 64px; height: 64px; flex-shrink: 0; aspect-ratio: 1; }
  .story-card__product-info { padding: 0; flex: 1; min-width: 0; }
  .story-card__product-cta { width: auto; padding: 0.5rem 0.85rem; margin: 0; flex-shrink: 0; }
  .story-card__product-quick { display: none; }
  .story-card__callout-card { width: 220px; max-width: 78vw; }
}

.story-card__category {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35em 1em;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-lg);
  opacity: 0.85;
}

.story-card__subheading {
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: var(--line-height-tight);
  opacity: 0.9;
  margin-bottom: var(--space-sm);
}

.story-card__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-md);
}

.story-card__desc {
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: var(--line-height-base);
  opacity: 0.85;
  margin-bottom: var(--space-xl);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  transition: opacity var(--duration-base) var(--ease-default);
}

.story-card__link:hover { opacity: 0.7; }

/* ── Editor-only empty-state notice (never shown to customers) ── */
.story-card-editor {
  width: 100%;
}
.story-card__editor-msg {
  max-width: 78rem;
  margin-inline: auto;
  padding: 2.5rem 1.75rem;
  border: 1px dashed #c9c9c9;
  border-radius: 1rem;
  background: #fafafa;
  text-align: center;
  color: #6b6b6b;
  font-size: 0.9rem;
  line-height: 1.6;
}
.story-card__editor-msg strong { color: var(--color-foreground, #1a1a2e); font-weight: 600; }
.story-card__editor-sub { display: block; margin-top: 0.5rem; }
.story-card__editor-steps {
  display: inline-block;
  text-align: left;
  margin: 0.85rem 0 0.75rem;
  padding-left: 1.25rem;
  max-width: 36rem;
}
.story-card__editor-steps li { margin: 0.3rem 0; }
.story-card__editor-foot {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: #9a9a9a;
  max-width: 40rem;
  margin-inline: auto;
}
.story-card__editor-msg code {
  background: #ececec;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--color-foreground, #1a1a2e);
}

@media (min-width: 768px) {
  .story-card {
    min-height: 480px;
  }
}
@media (min-width: 1400px) {
  .story-card { margin-block: var(--space-lg, 2rem); }
}
/* END_SECTION:story-card */

/* START_SECTION:student-discount-embed (INDEX:115) */
.student-discount-embed {
    display: block;
    padding-block: clamp(2rem, 5vw, 4rem);
  }
  .student-discount-embed[data-spacing-top="tight"]    { padding-block-start: 1rem; }
  .student-discount-embed[data-spacing-top="none"]     { padding-block-start: 0; }
  .student-discount-embed[data-spacing-bottom="tight"] { padding-block-end: 1rem; }
  .student-discount-embed[data-spacing-bottom="none"]  { padding-block-end: 0; }

  .student-discount-embed__container {
    max-width: 72rem;
    margin: 0 auto;
    padding-inline: 1.25rem;
  }
  @media (min-width: 768px) {
    .student-discount-embed__container { padding-inline: 2rem; }
  }

  .student-discount-embed__header {
    margin-block-end: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  .student-discount-embed__title {
    font-size: clamp(1.5rem, 2.75vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-foreground, #1a1a2e);
    margin: 0;
  }
  .student-discount-embed__subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-muted, #5a5a6a);
    margin: 0 auto;
    max-width: 38rem;
  }
  .student-discount-embed__subtitle > *:first-child { margin-top: 0; }
  .student-discount-embed__subtitle > *:last-child  { margin-bottom: 0; }

  /* Reserve vertical space so the embed doesn't jump in once Pion loads. */
  .student-discount-embed__widget {
    width: 100%;
    min-height: var(--student-discount-mh-mobile, 800px);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.02);
  }
  @media (min-width: 768px) {
    .student-discount-embed__widget {
      min-height: var(--student-discount-mh-desktop, 900px);
    }
  }
  .student-discount-embed__widget beansid-landing-page {
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
  }
/* END_SECTION:student-discount-embed */

/* START_SECTION:student-eligible-products (INDEX:116) */
.sd-products {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
  text-align: center;
}
@media (min-width: 768px) {
  .sd-products { padding-inline: var(--pdp-gutter, 2rem); }
}

.sd-products__inner {
  max-width: 56rem;
  margin: 0 auto;
}

.sd-products__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}

.sd-products__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: 9999px;
  color: var(--color-text, #1a1a2e);
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.sd-products__tag svg { color: var(--color-brand-green-dark, #2d8a23); flex-shrink: 0; }
.sd-products__tag:hover {
  border-color: var(--color-brand-green, #48A06A);
  color: var(--color-brand-green-dark, #2d8a23);
  transform: translateY(-1px);
}

.sd-products__cta-wrap {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}

.sd-products__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.sd-products__cta svg { transition: transform 0.2s; }
.sd-products__cta:hover svg { transform: translateX(3px); }
/* END_SECTION:student-eligible-products */

/* START_SECTION:student-how-it-works (INDEX:117) */
.sd-steps {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .sd-steps { padding-inline: var(--pdp-gutter, 2rem); }
}

.sd-steps__inner { max-width: 56rem; margin: 0 auto; }

.sd-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 750px) {
  .sd-steps__grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.sd-steps__card {
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  border-radius: var(--pdp-radius-card, 18px);
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sd-steps__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -8px rgba(0,0,0,0.08);
}

.sd-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 14%, transparent);
  color: var(--color-brand-green-dark, #2d8a23);
  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: 1rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.sd-steps__title {
  font-family: var(--font-heading, inherit);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text, #1a1a2e);
  margin: 0;
}

.sd-steps__desc {
  font-size: 0.9375rem;
  color: var(--pdp-text-muted, #6b7280);
  line-height: 1.55;
  margin: 0;
}
/* END_SECTION:student-how-it-works */

/* START_SECTION:subscribe (INDEX:118) */
.subscribe {
    position: relative;
    width: 100%;
    max-width: var(--pdp-container, 72rem);
    margin-inline: auto;
    padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
    padding-inline: var(--pdp-gutter, 1.25rem);
  }
  @media (min-width: 768px) {
    .subscribe { padding-inline: var(--pdp-gutter, 2rem); }
  }

  /* Hero mode = TRUE full-bleed (edge-to-edge, no gutter, no rounded corners).
     Sits flush against the header so it feels like a real hero section.
     !important needed to beat the base `.subscribe { padding-block: clamp(...) }`.
     Matches hero-billboard min-height system (560px desktop / 420px mobile) so
     it visually pairs with hero-billboard heroes on other pages. */
  .subscribe--hero {
    max-width: none !important;
    margin-block: 0 !important;
    padding-inline: 0 !important;
    padding-block: 0 !important;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (min-width: 750px) {
    .subscribe--hero { min-height: 560px; }
  }
  /* Theme.css adds top padding to the first .shopify-section under main —
     kill it when subscribe is used as the page hero so the dark cosmic bg
     starts flush against the header. */
  main#main-content > .shopify-section:first-child:has(.subscribe--hero) {
    padding-top: 0 !important;
  }
  /* Container fills the 560/420 section min-height. Inner content is
     vertically centered by flex — no extra padding-block needed (which
     would otherwise stack on top of min-height and overshoot 560px). */
  .subscribe--hero .subscribe__container {
    position: relative;
    z-index: 2;
    padding: var(--space-xl, 2rem) clamp(1.5rem, 4vw, 3rem);
    border-radius: 0;
    overflow: hidden;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .subscribe--hero .subscribe__inner { max-width: 720px; width: 100%; }
  .subscribe--hero .subscribe__heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
  }
  .subscribe--hero .subscribe__header {
    margin-block-end: var(--space-lg, 1.5rem);
  }

  /* Background image */
  .subscribe__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
  }
  .subscribe--hero .subscribe__bg {
    inset: 0;
    margin-inline: 0;
    border-radius: 0;
  }
  .subscribe__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .subscribe__bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--subscribe-overlay-alpha, 0.4));
    pointer-events: none;
  }

  .subscribe__container { position: relative; z-index: 1; width: 100%; }

  .subscribe__inner {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
  }

  .subscribe__header {
    margin-block-end: var(--space-xl, 2rem);
  }

  .subscribe__eyebrow {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-brand-green, #48A06A);
    margin-block-end: var(--space-sm);
  }

  .subscribe__heading {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight, -0.015em);
    line-height: var(--line-height-tight, 1.1);
    margin: 0 0 var(--space-sm);
  }

  .subscribe__description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0;
    color: var(--subscribe-desc, var(--color-text-secondary, #666));
  }

  /* ── Interest checkboxes ── */
  .subscribe__interests {
    border: 0;
    padding: 0;
    margin: 0 0 var(--space-md);
  }
  .subscribe__interest-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
  }
  @media (max-width: 640px) {
    .subscribe__interest-list { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding-inline: var(--space-md); }
  }

  .subscribe__interest {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--subscribe-label, var(--color-text, #1a1a2e));
    user-select: none;
  }

  .subscribe__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }

  .subscribe__interest-box {
    width: 18px;
    height: 18px;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1.5px solid var(--subscribe-checkbox-border, currentColor);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
  }
  .subscribe__interest-box svg {
    opacity: 0;
    color: var(--subscribe-check, #fff);
    transition: opacity 0.15s ease;
  }
  .subscribe__checkbox:checked + .subscribe__interest-box {
    background: var(--color-brand-green, #48A06A);
    border-color: var(--color-brand-green, #48A06A);
  }
  .subscribe__checkbox:checked + .subscribe__interest-box svg { opacity: 1; }
  .subscribe__checkbox:focus-visible + .subscribe__interest-box {
    outline: 2px solid var(--color-brand-green, #48A06A);
    outline-offset: 2px;
  }

  /* ── Email field row ── */
  .subscribe__field-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--subscribe-input-bg, #fff);
    border: 1px solid var(--subscribe-input-border, var(--color-border, #deddd8));
    border-radius: var(--radius-full, 9999px);
    padding: 4px;
    overflow: hidden;
  }
  @media (max-width: 640px) {
    .subscribe__field-row { border-radius: var(--radius-lg, 1rem); padding: 6px; flex-direction: column; }
  }

  .subscribe__email {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.875em 1.25em;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--subscribe-input-text, var(--color-text, #1a1a2e));
    outline: none;
    border-radius: var(--radius-full);
  }
  .subscribe__email::placeholder {
    color: var(--subscribe-placeholder, var(--color-text-muted, #999));
  }
  .subscribe__email:focus-visible {
    box-shadow: 0 0 0 2px var(--color-brand-green, #48A06A);
  }

  .subscribe__submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    border: 0;
    background: var(--color-brand-green, #48A06A);
    color: #fff;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.875em 1.75em;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    min-height: 44px;
  }
  .subscribe__submit:hover {
    background: var(--color-brand-green-hover, color-mix(in srgb, #48A06A 85%, #000));
  }
  .subscribe__submit:active { transform: scale(0.98); }
  .subscribe__submit:disabled { cursor: wait; opacity: 0.7; }
  .subscribe__submit:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .subscribe__submit-loader {
    animation: subscribeSpin 0.85s linear infinite;
    display: inline-flex;
  }
  @keyframes subscribeSpin { to { transform: rotate(360deg); } }
  .subscribe--loading .subscribe__submit-label { display: none; }
  .subscribe--loading .subscribe__submit-loader { display: inline-flex; }
  .subscribe--loading .subscribe__submit { pointer-events: none; }

  .subscribe__feedback {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-sale, #e63946);
  }
  .subscribe__feedback:not([hidden]) { display: block; }

  .subscribe__legal {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-xs);
    color: var(--subscribe-legal, var(--color-text-muted, #999));
  }

  /* ── Success state ── */
  .subscribe__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-md);
    color: var(--color-brand-green, #48A06A);
  }
  .subscribe__success-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    color: var(--subscribe-label, var(--color-text, #1a1a2e));
  }

  /* ── Light theme (default) ── */
  .subscribe--theme-light {
    --subscribe-label: var(--color-text, #1a1a2e);
    --subscribe-desc: var(--color-text-secondary, #666);
    --subscribe-input-bg: #fff;
    --subscribe-input-border: var(--color-border, #deddd8);
    --subscribe-input-text: var(--color-text, #1a1a2e);
    --subscribe-placeholder: var(--color-text-muted, #999);
    --subscribe-legal: var(--color-text-muted, #999);
    --subscribe-checkbox-border: var(--color-text-muted, #999);
  }

  /* ── Boxed theme — minified subscribe inside a soft grey card.
     Same form-factor as the hero (heading → desc → checkboxes → email
     pill → CTA) but smaller, on a light grey background. Acts as the
     bottom-of-page "Sign up to get notified" repeat. ── */
  .subscribe--theme-boxed {
    --subscribe-label: var(--color-text, #1a1a2e);
    --subscribe-desc: var(--color-text-secondary, #666);
    --subscribe-input-bg: #fff;
    --subscribe-input-border: var(--color-border, #deddd8);
  }
  .subscribe--theme-boxed .subscribe__container {
    background: var(--color-surface-alt, #f0efea);
    border-radius: var(--radius-xl, 1.5rem);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  }
  .subscribe--theme-boxed .subscribe__heading {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
  }
  .subscribe--theme-boxed .subscribe__description {
    font-size: var(--font-size-sm);
  }

  /* ── Dark theme — full-bleed dark hero (AI Robotics page) ── */
  .subscribe--theme-dark {
    --subscribe-label: #fff;
    --subscribe-desc: rgba(255, 255, 255, 0.75);
    --subscribe-input-bg: rgba(255, 255, 255, 0.05);
    --subscribe-input-border: rgba(255, 255, 255, 0.18);
    --subscribe-input-text: #fff;
    --subscribe-placeholder: rgba(255, 255, 255, 0.5);
    --subscribe-legal: rgba(255, 255, 255, 0.5);
    --subscribe-checkbox-border: rgba(255, 255, 255, 0.5);
    --subscribe-check: #0d0d18;
    color: #fff;
  }
  .subscribe--theme-dark .subscribe__heading,
  .subscribe--theme-dark .subscribe__description { color: #fff; }
  .subscribe--theme-dark .subscribe__email:focus-visible {
    box-shadow: 0 0 0 2px rgba(72, 160, 106, 0.6);
  }
  /* Dark-theme fallback when no background image is set — cosmic gradient */
  .subscribe--theme-dark .subscribe__container {
    background: radial-gradient(ellipse at top, #1a1f3a 0%, #0a0e1f 70%);
  }
  .subscribe--theme-dark.subscribe--has-bg .subscribe__container {
    background: transparent;
  }
  .subscribe--theme-dark.subscribe--hero:not(.subscribe--has-bg) .subscribe__container {
    background: radial-gradient(ellipse at center top, #1a2347 0%, #0d0f1f 60%, #050714 100%);
  }
  /* Paint the section itself dark so any parent-imposed padding area is
     covered with the same deep navy as the gradient base. This makes the
     hero appear truly flush against the header even when external CSS
     wins the padding-block battle. */
  .subscribe--theme-dark.subscribe--hero {
    background: #050714;
  }
  /* HTML hidden attribute must always win over our display rules */
  .subscribe__submit-loader[hidden],
  .subscribe__success[hidden],
  .subscribe__feedback[hidden] { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    .subscribe__submit-loader { animation: none; }
    .subscribe__submit { transition: none; }
  }

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

/* START_SECTION:testimonials (INDEX:122) */
.ts {
  --ts-quote: #1a1a2e;
  --ts-muted: rgba(26, 26, 46, 0.62);
  --ts-divider: rgba(26, 26, 46, 0.1);
  --ts-link: var(--color-brand-green-text, #308551);
  --ts-star: #f5b400;
  padding: var(--section-spacing-l) 0;
  font-family: var(--font-body-family, system-ui, -apple-system, sans-serif);
  color: var(--ts-quote);
}
/* Default: inherit body alternation (no explicit bg) — section blends with the page */
.ts--bg-auto  { background: transparent; }
.ts--bg-grey  { background: #F7F7F8; }
.ts--bg-white { background: #ffffff; }
.ts--bg-dark  {
  background: #1a1a2e;
  --ts-quote: #ffffff;
  --ts-muted: rgba(255, 255, 255, 0.7);
  --ts-divider: rgba(255, 255, 255, 0.16);
}

.ts__header {
  max-width: 720px;
  margin: 0 auto var(--section-spacing-m);
  padding: 0 1.5rem;
}
.ts--align-center .ts__header { text-align: center; }
.ts--align-left .ts__header { text-align: left; margin-left: max(1.5rem, calc((100vw - 1280px) / 2)); margin-right: auto; padding-left: 0; }

.ts__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ts-link);
  margin-bottom: 0.75rem;
}
.ts__heading {
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}
.ts__description {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ts-muted);
  margin: 0;
}

/* ── FEATURED layout (carousel) ── */
.ts--featured .ts__body { max-width: 880px; margin: 0 auto; padding: 0 1.5rem; }

/* Wrapper card — white background extends under viewport AND controls.
   Decorative quote glyph at the top of the card. */
.ts__featured-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 4.5rem 2.5rem 1.75rem;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 12px 40px rgba(0, 0, 0, 0.05);
  margin: 1rem auto;
  overflow: hidden; /* clips the carousel's overflowing slides cleanly within the radius */
}
.ts__featured-card::before {
  content: '"';
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--ts-link);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
/* On dark section bg, swap white for a translucent overlay + subtle border */
.ts--bg-dark .ts__featured-card {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  border: 1px solid var(--ts-divider);
  color: var(--ts-quote);
}

.ts__viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
  z-index: 1;
}
.ts__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.ts__slide {
  flex: 0 0 100%;
  min-width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* Each quote inside is just content — no individual bg, no padding (wrapper handles it) */
.ts__quote--featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: 0;
}
.ts__quote--featured .ts__logo {
  height: 40px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.85;
}
.ts__quote--featured .ts__text {
  font-family: var(--font-heading-family, inherit);
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0;
  position: relative;
  padding: 0;
  color: var(--ts-quote);
}
/* (old text-level ::before glyph removed — moved to .ts__quote--featured::before above) */

.ts__quote--featured .ts__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* ── GRID layout (3 cols responsive) ── */
.ts__grid {
  list-style: none;
  margin: 0;
  padding: 0 var(--pdp-gutter, 1.25rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* Match the sitewide --pdp-container (72rem / 1152px) so this section
     aligns with SBC, feature-accordion, why-nanoleaf, etc. on ultra-wide. */
  max-width: var(--pdp-container, 72rem);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 768px) {
  .ts__grid { padding-inline: var(--pdp-gutter, 2rem); }
}
@media (min-width: 640px) { .ts__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .ts__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

.ts__cell { display: flex; }

.ts__quote--card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  background: var(--ts-card-bg, #ffffff);
  border: 1px solid var(--ts-divider);
  border-radius: 12px;
  width: 100%;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ts__quote--card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}
.ts--bg-white .ts__quote--card { background: #fafafa; border-color: rgba(0, 0, 0, 0.05); }
.ts--bg-dark .ts__quote--card { background: rgba(255, 255, 255, 0.04); }

.ts__quote--card .ts__logo {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  align-self: flex-start;
  margin-bottom: 0.25rem;
  opacity: 0.85;
}
.ts__quote--card .ts__text {
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  margin: 0;
  color: var(--ts-quote);
}

/* ── Author block (shared) ── */
.ts__author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.ts__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
  background: rgba(0, 0, 0, 0.04);
}
.ts__avatar--circle { border-radius: 50%; }
.ts__avatar--square { border-radius: 6px; }
.ts__quote--featured .ts__avatar { width: 56px; height: 56px; }

.ts__author-text { min-width: 0; }
.ts__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ts-quote);
}
.ts__subline {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ts-muted);
}

/* ── Stars ── */
.ts__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--ts-star);
}
.ts__stars svg { display: block; }

/* ── Tag (e.g., press-related product name) ── */
.ts__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ts-link);
  margin: 0;
}
.ts__quote--card .ts__tag { align-self: flex-start; }

/* ── Link ── */
.ts__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
/* Text style — small inline link with arrow (default for customer testimonials) */
.ts__link--text {
  color: var(--ts-link);
  align-self: flex-start;
  padding: 0;
}
.ts__link--text:hover { gap: 0.55rem; }
/* Button style — pill with full padding (recommended for press articles) */
.ts__link--button {
  align-self: flex-start;
  padding: 0.625rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ts-quote);
  border: 1px solid var(--ts-divider);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.ts__link--button:hover {
  background: var(--ts-link);
  color: #ffffff;
  border-color: var(--ts-link);
}
.ts--featured .ts__link { align-self: center; margin-top: 1rem; }
.ts--featured .ts__link--button { align-self: center; }

/* ── Carousel controls (inside the white card) ── */
.ts__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ts-divider);
  position: relative;
  z-index: 2;
}
.ts__arrow {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ts-divider);
  color: var(--ts-quote);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.ts__arrow:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); }
.ts--bg-dark .ts__arrow:hover { background: rgba(255, 255, 255, 0.08); }

.ts__dots { display: inline-flex; align-items: center; gap: 0.4rem; }
.ts__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ts-divider);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.ts__dot--active { background: var(--ts-link); transform: scale(1.2); }

@media (max-width: 640px) {
  .ts { padding: var(--section-spacing-m) 0; }
  .ts__header { padding: 0 1rem; }
  .ts__grid { padding: 0 1rem; }
  .ts__quote--card { padding: 1.5rem 1.25rem; }
  .ts--featured .ts__body { padding: 0 1rem; }
  .ts__featured-card { padding: 3.25rem 1.5rem 1.5rem; }
  .ts__featured-card::before { top: 0.6rem; font-size: 2.75rem; }
  .ts__quote--featured { gap: 1rem; }
  .ts__controls { gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; }
  .ts__arrow { width: 36px; height: 36px; }
}
/* END_SECTION:testimonials */

/* START_SECTION:trust-grid (INDEX:123) */
.trust-grid {
  /* Inherits the PDP section rhythm so spacing reads identical to
     pdp-benefits / comparison / faq. Transparent so the page bg
     shows through (cream on body, white on lifted sections). */
  padding-block: var(--pdp-section-pad-y, 3rem);
  background: transparent;
}
.trust-grid__icon--image img { width: 28px; height: 28px; object-fit: contain; display: block; }
.trust-grid__empty-hint {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border: 2px dashed #b9b9b9;
  border-radius: 10px;
  background: #fbfbfb;
  color: #4a4a4a;
  font-size: 0.9rem;
}
.trust-grid__empty-hint code { background: #eee; padding: 0.05rem 0.35rem; border-radius: 4px; }
.trust-grid__container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}

/* Header — matches PDP section-header pattern */
.trust-grid__header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
/* Unified pill eyebrow — same family as story-card__category + section-heading
   pill. Brand-green tinted bg + brand-green-dark text. */
.trust-grid__eyebrow {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  border-radius: 9999px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.trust-grid__title {
  font-family: var(--font-heading, "Gilroy", sans-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.trust-grid__subtitle {
  font-size: 1rem;
  color: var(--pdp-text-muted, #6f6f7d);
  margin: 0;
  line-height: 1.6;
}

/* Grid — mobile 1-col, tablet 2-col, desktop N-col where N comes from
   section.settings.columns (3 or 4). Default = 4 for backward-compat. */
.trust-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 750px) {
  .trust-grid__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 990px) {
  .trust-grid--cols-3 .trust-grid__cards { grid-template-columns: repeat(3, 1fr); }
  .trust-grid--cols-4 .trust-grid__cards { grid-template-columns: repeat(4, 1fr); }
}

/* Card — white on cream, subtle elevation, hover lift */
.trust-grid__card {
  background: #ffffff;
  border: 1px solid var(--color-border, #efeee8);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 100%;
}
.trust-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -12px rgba(26, 26, 46, 0.12);
  border-color: color-mix(in srgb, var(--color-brand-green-dark, #2d8a23) 18%, transparent);
}

/* Icon — soft brand-green tinted circle */
.trust-grid__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  border-radius: 999px;
  margin-block-end: 1.25rem;
  flex-shrink: 0;
}

/* Card text */
.trust-grid__card-title {
  font-family: var(--font-heading, "Gilroy", sans-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.trust-grid__card-proof {
  font-size: 0.9375rem;
  color: var(--pdp-text-muted, #555c65);
  margin: 0 0 1rem;
  line-height: 1.55;
  flex-grow: 1;
}
.trust-grid__card-proof p {
  margin: 0;
}
.trust-grid__card-detail {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  margin: 0;
  padding: 0.375rem 0.75rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 8%, transparent);
  border-radius: 999px;
  display: inline-block;
}

/* Optional learn-more CTA (renders only when both label + url are set) */
.trust-grid__cta-wrap {
  text-align: center;
  margin-block-start: clamp(2rem, 4vw, 3rem);
}
.trust-grid__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-brand-green, #48A06A);
  color: #fff;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.trust-grid__cta:hover {
  background: var(--color-brand-green-dark, #2d8a23);
  transform: translateY(-1px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .trust-grid__card { transition: none; }
  .trust-grid__card:hover { transform: none; }
  .trust-grid__cta { transition: none; }
}
/* END_SECTION:trust-grid */

/* START_SECTION:under-construction (INDEX:124) */
.uc {
  min-height: 55vh;
  display: flex;
  align-items: center;
  background: #fff;
  padding-block: clamp(4rem, 10vw, 7rem);
}
.uc__inner {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.uc__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-green, #48A06A);
  margin: 0;
}
.uc__heading {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.1;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
  text-wrap: balance;
}
.uc__body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-foreground, #1a1a2e);
  opacity: 0.7;
  margin: 0;
  max-width: 32rem;
}
.uc__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
}
.uc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.uc__btn--primary {
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
}
.uc__btn--primary:hover { opacity: 0.85; }
.uc__btn--ghost {
  border: 1.5px solid var(--color-border, #e5e7eb);
  color: var(--color-foreground, #1a1a2e);
}
.uc__btn--ghost:hover { background: #f7f7f8; }
/* END_SECTION:under-construction */

/* START_SECTION:user-guide-grid (INDEX:125) */
.user-guide {
  padding-block: var(--page-padding-block, 3rem);
  background: var(--user-guide-bg, var(--color-background, #f5f5f0));
}
.user-guide__container { display: flex; flex-direction: column; gap: 2.5rem; }
.user-guide__header { text-align: center; max-width: 720px; margin-inline: auto; }
.user-guide__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; margin: 0 0 0.5rem; color: var(--color-foreground, #1a1a2e); }
.user-guide__subtitle { font-size: 0.95rem; color: var(--color-text-secondary, #666); margin: 0; line-height: 1.6; }

/* Brand segment toggle — pill bar centered above the content */
.user-guide__toggle {
  display: inline-flex;
  align-self: center;
  gap: 4px;
  padding: 4px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.04);
  margin: 0 auto;
}
.user-guide__toggle-pill {
  appearance: none;
  background: transparent;
  border: none;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary, #666);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.user-guide__toggle-pill:hover { color: var(--color-foreground, #1a1a2e); }
.user-guide__toggle-pill--active {
  background: var(--color-background, #fff);
  color: var(--color-foreground, #1a1a2e);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.user-guide__toggle-pill:focus-visible {
  outline: 2px solid var(--color-foreground, #1a1a2e);
  outline-offset: 2px;
}

.user-guide__panel { display: flex; flex-direction: column; gap: 1.75rem; }
/* The browser's default [hidden] { display: none } is overridden by
   our display:flex above due to class specificity. Re-assert hidden
   so the toggle actually hides non-active panels. */
.user-guide__panel[hidden] { display: none; }

/* One category row: title on the left, grid on the right (desktop). */
.user-guide__category,
.user-guide__support {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.5fr;
  gap: 2rem;
  background: var(--user-guide-card-wrap-bg, rgba(255, 255, 255, 0.6));
  border-radius: 16px;
  padding: 1.75rem 2rem;
  align-items: start;
}
.user-guide__category-heading-wrap { position: sticky; top: 1rem; }
.user-guide__category-heading {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
}

.user-guide__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.user-guide__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem 1.25rem;
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.user-guide__card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); }
.user-guide__card:focus-visible { outline: 2px solid var(--color-foreground, #1a1a2e); outline-offset: 4px; }
.user-guide__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--color-foreground, #1a1a2e);
}
.user-guide__card-icon-img { width: 100%; height: 100%; object-fit: contain; }
.user-guide__card-icon-placeholder { opacity: 0.5; }
.user-guide__card-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  color: var(--color-foreground, #1a1a2e);
}

.user-guide__support-cards { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.user-guide__support-card {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border-radius: 100px;
  text-decoration: none;
  color: var(--color-foreground, #1a1a2e);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 160ms ease;
}
.user-guide__support-card:hover { background: rgba(0, 0, 0, 0.03); }

.user-guide__empty {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--color-text-secondary, #888);
}

@media (max-width: 900px) {
  .user-guide__category, .user-guide__support {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    gap: 1rem;
  }
  .user-guide__category-heading-wrap { position: static; }
}

@media (max-width: 600px) {
  .user-guide { padding-block: 1.5rem; }
  .user-guide__container { gap: 1.5rem; }
  .user-guide__toggle { gap: 2px; padding: 3px; }
  .user-guide__toggle-pill { padding: 6px 12px; font-size: 12px; }
  .user-guide__cards { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .user-guide__card { padding: 1rem 0.75rem; }
  .user-guide__card-icon { width: 48px; height: 48px; }
  .user-guide__card-label { font-size: 0.825rem; }
  .user-guide__category, .user-guide__support { padding: 1.25rem 1rem; }
}

/* Dark theme */
.theme-dark .user-guide__title,
.theme-dark .user-guide__category-heading { color: #f5f5f5; }
.theme-dark .user-guide__subtitle { color: rgba(255, 255, 255, 0.7); }
.theme-dark .user-guide__toggle { background: rgba(255, 255, 255, 0.08); }
.theme-dark .user-guide__toggle-pill { color: rgba(255, 255, 255, 0.6); }
.theme-dark .user-guide__toggle-pill--active { background: #1a1a2e; color: #f5f5f5; }
.theme-dark .user-guide__category,
.theme-dark .user-guide__support { background: rgba(255, 255, 255, 0.03); }
.theme-dark .user-guide__card { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); color: #f5f5f5; }
.theme-dark .user-guide__card-label,
.theme-dark .user-guide__card-icon { color: #f5f5f5; }
.theme-dark .user-guide__support-card { background: rgba(255, 255, 255, 0.06); color: #f5f5f5; border-color: rgba(255, 255, 255, 0.1); }
/* END_SECTION:user-guide-grid */

/* START_SECTION:wellness-trust-grid (INDEX:126) */
.wellness-trust-grid {
  /* Inherits the PDP section rhythm so spacing reads identical to
     pdp-benefits / comparison / faq. Transparent so the page bg
     shows through (cream on body, white on lifted sections). */
  padding-block: var(--pdp-section-pad-y, 3rem);
  background: transparent;
}
.wellness-trust-grid__container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--pdp-gutter, 1.25rem);
}

/* Header — matches PDP section-header pattern */
.wellness-trust-grid__header {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: clamp(2rem, 4vw, 3rem);
}
.wellness-trust-grid__eyebrow {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.wellness-trust-grid__title {
  font-family: var(--font-heading, "Gilroy", sans-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.wellness-trust-grid__subtitle {
  font-size: 1rem;
  color: var(--pdp-text-muted, #6f6f7d);
  margin: 0;
  line-height: 1.6;
}

/* Grid — mobile 1-col, tablet 2-col, desktop 4-col */
.wellness-trust-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 750px) {
  .wellness-trust-grid__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}
@media (min-width: 990px) {
  .wellness-trust-grid__cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card — white on cream, subtle elevation, hover lift */
.wellness-trust-grid__card {
  background: #ffffff;
  border: 1px solid var(--color-border, #efeee8);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 100%;
}
.wellness-trust-grid__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -12px rgba(26, 26, 46, 0.12);
  border-color: color-mix(in srgb, var(--color-brand-green-dark, #2d8a23) 18%, transparent);
}

/* Icon — soft brand-green tinted circle */
.wellness-trust-grid__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 10%, transparent);
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  border-radius: 999px;
  margin-block-end: 1.25rem;
  flex-shrink: 0;
}

/* Card text */
.wellness-trust-grid__card-title {
  font-family: var(--font-heading, "Gilroy", sans-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.wellness-trust-grid__card-proof {
  font-size: 0.9375rem;
  color: var(--pdp-text-muted, #6f6f7d);
  margin: 0 0 1rem;
  line-height: 1.55;
  flex-grow: 1;
}
.wellness-trust-grid__card-detail {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--color-brand-green-dark, var(--pdp-brand-dark, #2d8a23));
  margin: 0;
  padding: 0.375rem 0.75rem;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 8%, transparent);
  border-radius: 999px;
  display: inline-block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wellness-trust-grid__card { transition: none; }
  .wellness-trust-grid__card:hover { transform: none; }
}
/* END_SECTION:wellness-trust-grid */

/* START_SECTION:why-nanoleaf (INDEX:127) */
.why-nl {
  width: 100%;
  max-width: var(--pdp-container, 72rem);
  margin: 0 auto;
  padding-block: var(--pdp-section-pad-y, clamp(3rem, 6vw, 5rem));
  padding-inline: var(--pdp-gutter, 1.25rem);
}
@media (min-width: 768px) {
  .why-nl { padding-inline: var(--pdp-gutter, 2rem); }
}

.why-nl__container {
  border-radius: var(--pdp-radius-card, 18px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pdp-border, #e5e7eb);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.why-nl__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .why-nl__grid { grid-template-columns: 1fr 1fr; }
  .why-nl--reverse .why-nl__grid { direction: rtl; }
  .why-nl--reverse .why-nl__copy,
  .why-nl--reverse .why-nl__media { direction: ltr; }
}

/* ── Media pane ── */
.why-nl__media {
  position: relative;
  aspect-ratio: 5 / 4;
  background: #0d0d18;
  overflow: hidden;
}
@media (min-width: 900px) {
  /* Desktop: image fills the height of the copy column but keeps a sensible
     min aspect so a wide landscape doesn't get squeezed into a tall column. */
  .why-nl__media {
    aspect-ratio: auto;
    min-height: 100%;
    min-height: 26rem; /* hard floor so it never collapses */
  }
}

.why-nl__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.why-nl__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.2);
}
.why-nl__placeholder-svg { width: 60%; height: auto; }

/* Overlay system — mirrors hero-billboard's pattern.
   gradient: soft fade from color (bottom) to transparent (40%) — text legible without harsh band
   solid:    flat color wash at given alpha — for editorial / heavily-darkened looks
   none:     no overlay — clean image */
.why-nl__media-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.why-nl[data-overlay-style="gradient"] .why-nl__media-overlay {
  background: linear-gradient(
    to top,
    rgb(from var(--why-overlay-color, #000000) r g b / var(--why-overlay-alpha, 0.35)) 0%,
    rgb(from var(--why-overlay-color, #000000) r g b / 0) 55%
  );
}
.why-nl[data-overlay-style="solid"] .why-nl__media-overlay {
  background: var(--why-overlay-color, #000000);
  opacity: var(--why-overlay-alpha, 0.35);
}
.why-nl[data-overlay-style="none"] .why-nl__media-overlay {
  display: none;
}

/* Fallback for browsers without rgb(from ...) — bg-color with mix-blend */
@supports not (background: rgb(from red r g b / 0.5)) {
  .why-nl[data-overlay-style="gradient"] .why-nl__media-overlay {
    background: linear-gradient(to top, var(--why-overlay-color, #000) 0%, transparent 55%);
    opacity: var(--why-overlay-alpha, 0.35);
  }
}

.why-nl__media-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  color: #fff;
  z-index: 1;
}

.why-nl__media-badge {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-block-end: 0.75rem;
  align-self: flex-start;
}

.why-nl__media-title {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: #fff;
}

.why-nl__media-text {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  margin: 0;
  max-width: 28rem;
}

/* ── Copy pane ── */
.why-nl__copy {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-nl__heading { margin-block-end: var(--space-lg, 1.5rem) !important; }

.why-nl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.why-nl__item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.why-nl__check {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--color-brand-green, #48A06A) 14%, transparent);
  color: var(--color-brand-green-dark, #2d8a23);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.125rem;
}

.why-nl__item-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text, #1a1a2e);
  margin: 0 0 0.125rem;
}

.why-nl__item-desc {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--pdp-text-muted, #4b5563);
  margin: 0;
}

.why-nl__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.25rem);
}

.why-nl__cta { white-space: nowrap; }

/* Mobile media height cap */
@media (max-width: 899px) {
  .why-nl__media { aspect-ratio: 4 / 3; max-height: 22rem; }
}
/* END_SECTION:why-nanoleaf */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:age-gate (INDEX:131) */
/* ═══════════════════════════════════════════════
   AGE-GATE — full-screen site-blocking modal
   ═══════════════════════════════════════════════ */

/* Overlay: position fixed full viewport, custom-property-driven color */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 99999;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background: rgb(from var(--age-overlay-color, #0a0a0a) r g b / var(--age-overlay-opacity, 0.92));
  display: grid;
  place-items: center;
  color: #0f172a;
  font-family: inherit;
  overscroll-behavior: contain;
  animation: age-gate-fade-in 0.3s ease;
}

/* Fallback for browsers without rgb-from support */
@supports not (background: rgb(from black r g b / 0.5)) {
  .age-gate {
    background: rgba(10, 10, 10, 0.92);
  }
}

/* Native <dialog> default ::backdrop — we draw our own bg */
.age-gate::backdrop {
  background: transparent;
}

.age-gate__inner {
  max-width: 32rem;
  width: 100%;
  background: #fff;
  padding-inline: clamp(1.5rem, 4vw, 2.5rem);
  padding-block: clamp(2rem, 5vw, 3rem);
  border-radius: var(--pdp-radius-card, 18px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  text-align: center;
}

.age-gate__heading {
  font-family: var(--font-heading, inherit);
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.age-gate__sub {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pdp-text-muted, #64748b);
  margin-block: 0.75rem 0;
}

.age-gate__form,
.age-gate__actions {
  margin-block-start: 1.5rem;
}

.age-gate__fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 0.75rem;
}

.age-gate__legend {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
  margin-block-end: 0.5rem;
}

.age-gate__dob {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr;
  gap: 0.5rem;
}

.age-gate__dob-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: start;
  font-size: 0.75rem;
  color: var(--pdp-text-muted, #64748b);
}

.age-gate__dob-input {
  min-block-size: 44px;
  padding: 0.625rem 0.75rem;
  font-size: 1rem;
  border: 1.5px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}
.age-gate__dob-input::-webkit-outer-spin-button,
.age-gate__dob-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.age-gate__dob-input:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 1px;
  border-color: transparent;
}

.age-gate__pwd-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
  margin-block-end: 0.375rem;
  text-align: start;
}
.age-gate__pwd-input {
  width: 100%;
  min-block-size: 44px;
  padding: 0.75rem 0.875rem;
  font-size: 1rem;
  border: 1.5px solid rgba(15, 23, 42, 0.15);
  border-radius: 8px;
  font-family: inherit;
  color: #0f172a;
}
.age-gate__pwd-input:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 1px;
  border-color: transparent;
}

.age-gate__error {
  color: #dc2626;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-block: 0.5rem 0;
  text-align: start;
}

.age-gate__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.age-gate__btn {
  min-block-size: 44px;
  padding-block: 0.875rem;
  padding-inline: 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 9999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.age-gate__btn:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}
.age-gate__btn:active {
  transform: scale(0.98);
}

/* Confirm — primary, dark */
.age-gate__btn--confirm {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
.age-gate__btn--confirm:hover {
  background: #1e293b;
  border-color: #1e293b;
}

/* Reject — EQUAL visual weight per legal compliance (no dark patterns) */
.age-gate__btn--reject {
  background: transparent;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.25);
}
.age-gate__btn--reject:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.5);
}

.age-gate__legal {
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--pdp-text-muted, #64748b);
  margin-block-start: 1.25rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid rgba(15, 23, 42, 0.06);
  text-align: start;
}
.age-gate__legal p { margin-block: 0 0.5rem; }
.age-gate__legal p:last-child { margin-block-end: 0; }
.age-gate__legal a {
  color: var(--color-brand-green, #48A06A);
  text-decoration: underline;
}

/* Mobile — stack DOB inputs */
@media (max-width: 480px) {
  .age-gate__dob {
    grid-template-columns: 1fr;
  }
}

/* Animation entry */
@keyframes age-gate-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Reduced motion — kill animation */
@media (prefers-reduced-motion: reduce) {
  .age-gate { animation: none; }
  .age-gate__btn { transition: none; }
  .age-gate__btn:active { transform: none; }
}

/* When body has data-age-gate-locked, block scroll + interaction underneath */
body[data-age-gate-locked] {
  overflow: hidden;
}
/* END_SNIPPET:age-gate */

/* START_SNIPPET:brand-gradient (INDEX:136) */
.nf-brand-gradient {
  background:
    radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 55%, transparent) 0%, transparent 45%),
    radial-gradient(ellipse at 85% 15%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 45%, transparent) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 25%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 35%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 15%, transparent) 0%, transparent 30%),
    linear-gradient(155deg, var(--color-brand-green-dark, #38835A) 0%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 80%, #000) 35%, var(--color-brand-green, #51BD7A) 55%, color-mix(in srgb, var(--color-brand-green, #51BD7A) 80%, #000) 75%, var(--color-brand-green-dark, #38835A) 100%);
}
/* END_SNIPPET:brand-gradient */

/* START_SNIPPET:breadcrumbs (INDEX:137) */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
  }

  .breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin-inline-start: 0.5rem;
  }

  .breadcrumbs__item a {
    color: inherit;
    text-decoration: none;
  }

  .breadcrumbs__item a:hover {
    text-decoration: underline;
  }

  .breadcrumbs__item[aria-current="page"] {
    color: var(--color-text, #1a1a1a);
  }
/* END_SNIPPET:breadcrumbs */

/* START_SNIPPET:country-selector (INDEX:142) */
.country-selector select {
    appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-background, #fff);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
  }
/* END_SNIPPET:country-selector */

/* START_SNIPPET:image-overlay (INDEX:149) */
.image-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
  }

  /* ── Option C — Badge chip (bottom-left) ──────────────────────── */
  .image-overlay__badge {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline-start: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem 0.4375rem 0.5rem;
    background: #ffffff;
    color: var(--color-foreground, #1a1a2e);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    pointer-events: auto;
    max-width: calc(100% - 1.5rem);
  }

  .image-overlay__badge-icon {
    color: var(--color-brand-green, #51BD7A);
    flex-shrink: 0;
  }

  .image-overlay__badge-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Option A — Info card (bottom band, frosted) ─────────────── */
  .image-overlay__card {
    position: absolute;
    inset-inline: 0.875rem;
    inset-block-end: 0.875rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    color: var(--color-foreground, #1a1a2e);
    pointer-events: auto;
  }

  .image-overlay__card-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-brand-green, #51BD7A);
    margin: 0 0 0.375rem;
  }

  .image-overlay__card-body {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-foreground, #1a1a2e);
  }

  .image-overlay__card-body p {
    margin: 0;
  }

  .image-overlay__card-body p + p,
  .image-overlay__card-body ul,
  .image-overlay__card-body ol {
    margin-top: 0.375rem;
  }

  .image-overlay__card-body ul,
  .image-overlay__card-body ol {
    padding-inline-start: 1rem;
  }

  .image-overlay__card-body li + li {
    margin-top: 0.25rem;
  }

  /* If both render, lift the badge so it doesn't collide with the card */
  .image-overlay:has(.image-overlay__card) .image-overlay__badge {
    inset-block-end: auto;
    inset-block-start: 0.75rem;
  }

  /* ── Mobile tuning ───────────────────────────────────────────── */
  @media screen and (max-width: 749px) {
    .image-overlay__badge {
      inset-block-end: 0.5rem;
      inset-inline-start: 0.5rem;
      font-size: 0.6875rem;
      padding: 0.375rem 0.625rem 0.375rem 0.4375rem;
    }
    .image-overlay__card {
      inset-inline: 0.625rem;
      inset-block-end: 0.625rem;
      padding: 0.75rem 0.875rem;
    }
    .image-overlay__card-body {
      font-size: 0.75rem;
    }
  }
/* END_SNIPPET:image-overlay */

/* START_SNIPPET:info-tooltip (INDEX:150) */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-inline-start: 0.375rem;
  }

  .info-tooltip__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    color: var(--color-foreground-secondary, #6b6b6b);
    border: 1px solid currentColor;
    border-radius: 50%;
    cursor: help;
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease;
    opacity: 0.6;
  }

  .info-tooltip__icon:hover,
  .info-tooltip__icon:focus-visible {
    color: var(--color-brand-green, #48A06A);
    opacity: 1;
  }
  /* The theme's global 2px :focus-visible ring applies — the old replacement
     (a 25%-opacity glow) was under the 3:1 non-text contrast floor. */

  .info-tooltip__icon svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .info-tooltip__bubble {
    position: absolute;
    inset-block-end: calc(100% + 0.5rem);
    width: max-content;
    max-width: min(20rem, 80vw);
    padding: 0.75rem 0.875rem;
    background: #ffffff;
    color: var(--color-foreground, #1a1a2e);
    border-radius: 12px;
    box-shadow:
      0 10px 40px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    font-size: 0.8125rem;
    line-height: 1.55;
    font-weight: 400;
    text-align: start;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 50;
  }

  /* Anchor positions */
  .info-tooltip--center .info-tooltip__bubble {
    inset-inline-start: 50%;
    transform: translate(-50%, 4px);
  }
  .info-tooltip--start .info-tooltip__bubble {
    inset-inline-start: 0;
  }
  .info-tooltip--end .info-tooltip__bubble {
    inset-inline-end: 0;
  }

  /* Caret */
  .info-tooltip__bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg);
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }
  .info-tooltip--center .info-tooltip__bubble::after {
    left: 50%;
    margin-left: -6px;
  }
  .info-tooltip--start .info-tooltip__bubble::after {
    left: 12px;
  }
  .info-tooltip--end .info-tooltip__bubble::after {
    right: 12px;
  }

  /* Reveal on hover / focus / focus-within (for touch tap) */
  .info-tooltip:hover .info-tooltip__bubble,
  .info-tooltip:focus-within .info-tooltip__bubble {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .info-tooltip--start:hover .info-tooltip__bubble,
  .info-tooltip--start:focus-within .info-tooltip__bubble,
  .info-tooltip--end:hover .info-tooltip__bubble,
  .info-tooltip--end:focus-within .info-tooltip__bubble {
    transform: translateY(0);
  }

  .info-tooltip__content > :first-child {
    margin-block-start: 0;
  }
  .info-tooltip__content > :last-child {
    margin-block-end: 0;
  }
  .info-tooltip__content p {
    margin: 0 0 0.5rem;
  }
  .info-tooltip__content p:last-child {
    margin-bottom: 0;
  }

  /* Mobile: keep within viewport, flip to start anchor if would overflow */
  @media screen and (max-width: 749px) {
    .info-tooltip__bubble {
      max-width: min(16rem, calc(100vw - 2rem));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .info-tooltip__bubble {
      transition: opacity 0.01ms;
    }
  }
/* END_SNIPPET:info-tooltip */

/* START_SNIPPET:mega-cards-mobile (INDEX:155) */
.nf-mobile-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0 0.75rem; }
.nf-mobile-cards__card { position: relative; display: flex; align-items: flex-end; min-height: 120px; border-radius: 0.5rem; overflow: hidden; text-decoration: none; color: #fff; }
.nf-mobile-cards__card--no-image { background: #f7f7f8; color: #1a1a2e; border: 1px solid rgba(0,0,0,0.06); }
.nf-mobile-cards__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.nf-mobile-cards__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); z-index: 1; }
.nf-mobile-cards__title { position: relative; z-index: 2; font-family: 'Gilroy', var(--font-heading), sans-serif; font-weight: 600; font-size: 0.8125rem; line-height: 1.2; padding: 0.75rem; }
/* END_SNIPPET:mega-cards-mobile */

/* START_SNIPPET:mega-cards (INDEX:157) */
/* Override the default layout min-height for cards mega */
.nf-mega__layout:has(> .nf-mega-cards) {
  min-height: auto;
}

.nf-mega-cards {
  padding: 1.5rem 2rem 2rem;
  width: 100%;
}

.nf-mega-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--mega-cards-cols, 4), 1fr);
  gap: 0.75rem;
  max-width: 72rem;
  margin: 0 auto;
}

.nf-mega-cards__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 180px;
  border-radius: 0.625rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}

.nf-mega-cards__card:hover .nf-mega-cards__img {
  transform: scale(1.04);
}

.nf-mega-cards__card--no-image {
  background: #fff;
  color: #1a1a2e;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.nf-mega-cards__card--no-image:hover {
  background: #f0efea;
}

.nf-mega-cards__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 400ms ease;
}

.nf-mega-cards__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.05) 100%);
  z-index: 1;
}

.nf-mega-cards__title {
  position: relative;
  z-index: 2;
  font-family: 'Gilroy', var(--font-heading), sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  padding: 1rem;
  width: 100%;
}

.nf-mega-cards__card--no-image .nf-mega-cards__title {
  padding: 1.25rem 1rem;
}

@media (max-width: 1100px) {
  .nf-mega-cards__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 899px) {
  .nf-mega-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* END_SNIPPET:mega-cards */

/* START_SNIPPET:mega-menu-panel (INDEX:160) */
/* ── Custom mega panels (metaobject-driven) ─────────────────────────── */
.nf-mega__layout--full { display: block; padding: 1.5rem 2rem 2rem; }
.nf-mega__layout--full .nf-mega__content { max-width: 72rem; margin: 0 auto; }

.nf-mm-pane { display: flex; gap: 1.5rem; align-items: flex-start; }
.nf-mm-pane[hidden] { display: none; }
.nf-mm-pane__main { flex: 1 1 auto; min-width: 0; }
.nf-mm-pane--feature .nf-mm-pane__main { padding-right: 0.5rem; }

.nf-mm-colh {
  margin: 0 0 0.75rem; font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: #43473f;
}

/* Pills read as brand accents (Marta 2026-08-03): Core Green everywhere,
   Sage on the wellness segment. Hover/active keep the dark fill from header. */
.nf-mega[data-mega-type="custom"] .nf-mega__quick-pill {
  color: #48a06a; background: rgba(72, 160, 106, 0.08); border-color: rgba(72, 160, 106, 0.25);
}
.nf-mega[data-mega-type="custom"][data-segment="wellness"] .nf-mega__quick-pill {
  color: #68947a; background: rgba(104, 148, 122, 0.1); border-color: rgba(104, 148, 122, 0.3);
}
.nf-mega[data-mega-type="custom"] .nf-mega__quick-pill:hover,
.nf-mega[data-mega-type="custom"] .nf-mega__quick-pill--active {
  color: #fff; background: #48a06a; border-color: #48a06a;
}
.nf-mega[data-mega-type="custom"][data-segment="wellness"] .nf-mega__quick-pill:hover,
.nf-mega[data-mega-type="custom"][data-segment="wellness"] .nf-mega__quick-pill--active {
  color: #fff; background: #68947a; border-color: #68947a;
}

.nf-mm-cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.nf-mm-group + .nf-mm-group { margin-top: 1.75rem; }
.nf-mm-card { display: block; text-decoration: none; color: inherit; }
.nf-mm-card__media {
  display: flex; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: var(--color-background, #f5f5f0);
  align-items: center; justify-content: center;
}
.nf-mm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.nf-mm-card:hover .nf-mm-card__media img { transform: scale(1.04); }
.nf-mm-card__ph { font-size: 0.6875rem; color: #a8a49d; }
.nf-mm-card__label { display: block; margin-top: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.nf-mm-card:hover .nf-mm-card__label { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nf-mm-card__desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.35;
  color: #5b5f58; font-weight: 400;
}

.nf-mm-links { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.nf-mm-links__item { font-size: 0.875rem; color: inherit; text-decoration: none; }
.nf-mm-links__item:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.nf-mm-feature { flex: 0 0 220px; display: block; text-decoration: none; color: inherit; }
.nf-mm-feature__media {
  display: flex; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  background: var(--color-background, #f5f5f0); align-items: center; justify-content: center;
}
.nf-mm-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.nf-mm-feature__title { display: block; margin-top: 0.625rem; font-size: 0.875rem; font-weight: 500; }
.nf-mm-feature__desc { display: block; margin-top: 0.1875rem; font-size: 0.8125rem; color: var(--color-text-muted, #71717a); }

/* Single-card panels (e.g. About) hug their content instead of inheriting the
   400px product-panel height, and sit as a compact centered media object
   (Marta 2026-08-04: About panel had a large empty band + left-stranded card). */
.nf-mega .nf-mega__layout--single { min-height: 0; padding: 2rem; }
.nf-mm-single { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: center; max-width: 56rem; margin: 0 auto; }
.nf-mm-single__media { display: flex; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--color-background, #f5f5f0); align-items: center; justify-content: center; }
.nf-mm-single__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.nf-mm-single__media:hover img { transform: scale(1.04); }
.nf-mm-single__title { margin: 0; font-size: 1.125rem; font-weight: 500; }
.nf-mm-single__desc { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--color-text-muted, #71717a); }
.nf-mm-single__link { display: inline-block; margin-top: 0.75rem; font-size: 0.875rem; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.nf-mm-empty { font-size: 0.8125rem; color: var(--color-text-muted, #71717a); margin: 0; }

/* Photo cards: text sits ON imagery, so it stays white and the bottom
   gradient is strengthened for legibility on light photos (Marta 2026-08-04). */
.nf-mega-cards__card .nf-mm-card__desc { color: rgba(255, 255, 255, 0.92); }
.nf-mega[data-mega-type="custom"] .nf-mega-cards__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.05) 100%);
}

@media (max-width: 989px) {
  .nf-mm-pane { flex-direction: column; }
  .nf-mm-feature { flex-basis: auto; width: 100%; max-width: 320px; }
  .nf-mm-single { grid-template-columns: 1fr; }
}
/* END_SNIPPET:mega-menu-panel */

/* START_SNIPPET:payment-icons (INDEX:167) */
payment-icons {
    display: flex;
    align-items: center;
    gap: 4px;
    /* The whole point: this row is one line, at every width. Icons that do not
       fit are hidden by the element below rather than pushed to a second row. */
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  payment-icons > * {
    flex: none;
  }

  payment-icons [hidden] {
    display: none !important; /* beats the svg display the payment tag ships with */
  }
/* END_SNIPPET:payment-icons */

/* START_SNIPPET:pdp-accordion-tab (INDEX:168) */
/* ── What's in the box list ─────────────────────────────────────────────
   Visual language matches the Tech Specs modal rows:
     • Each item on its own row
     • Subtle 1px separator between rows (none on last)
     • Tabular numerals for the qty badge
   The qty badge sits first as a fixed-width pill so all item names align
   in a neat column, regardless of whether some items have no qty.
*/
.pdp-hero__kit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.pdp-hero__kit-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-foreground, #1a1a2e);
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.pdp-hero__kit-item:last-child { border-bottom: none; }
.pdp-hero__kit-qty {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-foreground, #1a1a2e);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.pdp-hero__kit-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  display: block;
}
.pdp-hero__kit-name {
  flex: 1 1 auto;
  min-width: 0;
}
.theme-dark .pdp-hero__kit-item {
  color: #f5f5f5;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.theme-dark .pdp-hero__kit-qty {
  background: rgba(255, 255, 255, 0.08);
  color: #f5f5f5;
}
/* END_SNIPPET:pdp-accordion-tab */

/* START_SNIPPET:pdp-hero-gallery (INDEX:170) */
/* ---- Gallery ---- */
.pdp-hero__gallery-sticky {
  position: relative;
}

.pdp-hero__main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--gallery-bg, var(--color-background, #f7f7f8));
  overflow: hidden;
}
.pdp-hero__main-image--bordered {
  border: 1px solid var(--color-border, #eee);
  border-radius: var(--radius-image);
  overflow: hidden;
}

.pdp-hero__carousel {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100%;
  scrollbar-width: none;
}
.pdp-hero__carousel::-webkit-scrollbar { display: none; }

.pdp-hero__slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
}
.pdp-hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  cursor: zoom-in;
}
.pdp-hero__slide video,
.pdp-hero__slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdp-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full, 9999px);
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  z-index: 2;
  padding: 0;
  color: var(--color-foreground, #1a1a2e);
  transition: opacity 0.2s ease;
}
.pdp-hero__arrow:hover { background-color: #fff; }
.pdp-hero__arrow.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.pdp-hero__arrow--prev { inset-inline-start: 0.5rem; }
.pdp-hero__arrow--next { inset-inline-end: 0.5rem; }

.pdp-hero__thumbnails {
  display: flex;
  gap: 0.375rem;
  margin-block-start: 0.5rem;
  overflow-x: auto;
  padding-block-end: 0.375rem;
  scrollbar-width: none;
}
.pdp-hero__thumbnails::-webkit-scrollbar { display: none; }

.pdp-hero__thumb {
  position: relative;
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
  border: 2px solid var(--color-border, #eee);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--color-background, #f7f7f8);
  transition: border-color 0.2s ease;
}
.pdp-hero__thumb:hover { border-color: var(--color-text-muted, #aaa); }
.pdp-hero__thumb--active,
.pdp-hero__thumb--active:hover { border-color: var(--color-foreground, #1a1a2e); }
.pdp-hero__thumb img {
  width: 100%;
  height: 100%;
  /* Fill the thumb edge-to-edge — landscape/portrait crops look better than
     letterboxed inside the small 56px square. Matches the rule in
     sections/pdp-hero.liquid (kept in sync). */
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
}
.pdp-hero__thumb-video-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  color: #fff;
  pointer-events: none;
}

/* 4D viewer trigger */
.pdp-hero__4d-trigger {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-foreground, #1a1a2e);
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s;
}
.pdp-hero__4d-trigger:hover { background-color: #fff; }
.pdp-hero__4d-trigger[hidden] { display: none; }
.pdp-hero__4d-trigger svg { width: 16px; height: 16px; }
.pdp-hero__4d-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Lightbox */
.pdp-hero__lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
}
.pdp-hero__lightbox.is-open { display: flex; }

.pdp-hero__lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
}
.pdp-hero__lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}
.pdp-hero__lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }

.pdp-hero__lightbox-counter {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  font-weight: 500;
}
.pdp-hero__lightbox-stage {
  position: relative;
  z-index: 5;
  max-width: 56rem;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-hero__lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 0.5rem;
  user-select: none;
}
.pdp-hero__lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}
.pdp-hero__lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); }
.pdp-hero__lightbox-nav--prev { left: 1rem; }
.pdp-hero__lightbox-nav--next { right: 1rem; }

.pdp-hero__lightbox-thumbs {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
}
.pdp-hero__lightbox-thumb {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: opacity 200ms ease, border-color 200ms ease;
  flex-shrink: 0;
}
.pdp-hero__lightbox-thumb--active {
  border-color: #fff;
  opacity: 1;
}
.pdp-hero__lightbox-thumb:hover { opacity: 0.9; }
.pdp-hero__lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desktop overrides — only the gallery-related rules from the section's ≥768px block */
@media (min-width: 768px) {
  .pdp-hero__gallery-sticky {
    position: sticky;
    top: 12px;
    align-self: start;
  }
  .pdp-hero__main-image {
    border-radius: 0.5rem;
  }
  .pdp-hero__arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
  .pdp-hero__thumb {
    width: 4rem;
    height: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-hero__carousel { scroll-behavior: auto; }
}
/* END_SNIPPET:pdp-hero-gallery */

/* START_SNIPPET:pdp-sticky-bar (INDEX:176) */
/* Selected variant next to the title, `add` mode with one option only. */
.pdp-sticky-bar__variant {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #666);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}
@media (max-width: 749px) {
  .pdp-sticky-bar__variant { display: none; }
}
/* END_SNIPPET:pdp-sticky-bar */

/* START_SNIPPET:pdp-variant-picker (INDEX:177) */
/* ---- Variant Selectors ---- */
.pdp-hero__variants {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.pdp-hero__option {
  border: none;
  padding: 0;
  margin: 0;
}
.pdp-hero__option-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin-block-end: 0.5rem;
  display: block;
}
.pdp-hero__option-selected {
  font-weight: 400;
  color: var(--color-text-secondary, #666);
}

/* Color swatches */
.pdp-hero__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-hero__swatch {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 2px solid transparent;
  transition: border-color 200ms ease;
}
.pdp-hero__swatch--active,
.pdp-hero__swatch:hover {
  border-color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__swatch-dot {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.pdp-hero__swatch-dot--image {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdp-hero__swatch-dot--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px;
}

/* Pill buttons */
.pdp-hero__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdp-hero__pill {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-border, #deddd8);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  background: transparent;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, opacity 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
  white-space: nowrap;
}
.pdp-hero__pill:hover {
  border-color: var(--color-foreground, #1a1a2e);
}
.pdp-hero__pill:active {
  transform: scale(0.97);
}
.pdp-hero__pill--active {
  background-color: var(--color-foreground, #1a1a2e);
  border-color: var(--color-foreground, #1a1a2e);
  color: #fff;
}
.pdp-hero__pill--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Shape picker (image card grid) ── */
.pdp-hero__shapes {
  display: grid;
  gap: 0.625rem;
  /* Default: 2 cols on mobile */
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
}
@media (min-width: 540px) {
  .pdp-hero__shapes--cols-2 { grid-template-columns: repeat(2, 1fr); }
  .pdp-hero__shapes--cols-3 { grid-template-columns: repeat(3, 1fr); }
  .pdp-hero__shapes--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Mobile: 5+ shape values fall back to 3 cols so cards don't get tiny */
@media (max-width: 539px) {
  .pdp-hero__shapes { grid-template-columns: repeat(2, 1fr); }
}

.pdp-hero__shape {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.5rem 0.7rem;
  border-radius: 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.pdp-hero__shape:hover {
  border-color: rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}
.pdp-hero__shape:active {
  transform: scale(0.97);
}
.pdp-hero__shape--active {
  border-color: #1a1a2e;
  background: #f7f7f8;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}
.pdp-hero__shape:focus-within {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}
.pdp-hero__shape-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* max-height is what actually bounds this box: the card is wider than the
     cap, so aspect-ratio never gets to apply and the tile is a letterbox.
     Raised from 88/72 because the glyph is bounded by the short side, and at
     72px there was too little left once padding was taken off. MEL-1068. */
  max-height: 104px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f7f8, #efeff1);
  overflow: hidden;
}
.pdp-hero__shape-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Fixed inset, not a percentage. Percentages resolve against the box WIDTH,
     so 8% of a 158px tile took 12.7px off all four sides and left only 47 of
     the 72px height for the glyph — object-fit: contain then scaled the swatch
     to about a quarter of its size and its hairline stroke sub-pixelled away.
     The swatch PNGs already carry ~25% transparent margin of their own. */
  padding: 6px;
  display: block;
}
.pdp-hero__shape-placeholder {
  font-family: var(--font-heading-family, inherit);
  font-size: 1.5rem;
  font-weight: 700;
  color: rgba(26, 26, 46, 0.35);
  letter-spacing: -0.02em;
}
.pdp-hero__shape-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: #1a1a2e;
  letter-spacing: -0.005em;
}

@media (max-width: 539px) {
  .pdp-hero__shape { padding: 0.7rem 0.4rem 0.6rem; border-radius: 12px; }
  .pdp-hero__shape-media { max-height: 88px; border-radius: 8px; }
  .pdp-hero__shape-label { font-size: 0.75rem; }
}

.theme-dark .pdp-hero__shape {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.theme-dark .pdp-hero__shape:hover { border-color: rgba(255, 255, 255, 0.32); }
.theme-dark .pdp-hero__shape--active {
  background: rgba(255, 255, 255, 0.08);
  border-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}
.theme-dark .pdp-hero__shape-media {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08));
}
.theme-dark .pdp-hero__shape-label { color: #ffffff; }
/* END_SNIPPET:pdp-variant-picker */

/* START_SNIPPET:price-display (INDEX:178) */
/* ── price-display (canonical) ────────────────────────── */
.price {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.price__current {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-foreground, #1a1a2e);
}

.price--on-sale .price__current {
  color: var(--color-sale, #e63946);
}

.price__compare {
  font-family: 'Inter', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  color: var(--color-text-muted, #71717a);
  text-decoration: line-through;
}

.price__save-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.5em;
  background: var(--color-sale, #e63946);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}

/* Size modifiers */
.price--sm .price__current   { font-size: var(--font-size-sm, 0.875rem); }
.price--sm .price__compare   { font-size: var(--font-size-xs, 0.75rem); }
.price--sm .price__save-badge{ font-size: 0.65rem; }

.price--md .price__current   { font-size: var(--font-size-base, 1rem); }
.price--md .price__compare   { font-size: var(--font-size-sm, 0.875rem); }
.price--md .price__save-badge{ font-size: var(--font-size-xs, 0.75rem); }

.price--lg .price__current   { font-size: var(--font-size-xl, 1.25rem); }
.price--lg .price__compare   { font-size: var(--font-size-base, 1rem); }
.price--lg .price__save-badge{ font-size: var(--font-size-sm, 0.875rem); }
/* END_SNIPPET:price-display */

/* START_SNIPPET:product-card (INDEX:179) */
/* ═══════════════════════════════════════════════
   NF-CARD — Unified product card system (Variant D)
   Sizes: XS · S · M · L · XL
   Layouts: vertical (default) · horizontal (xs/s) · text-only
   Schemes: light · dark (wellness)

   Design spec: docs/review/product-card-variant-d-detailed-2026-05-25.html
   Locks: 1:1 image · no inline ATC · Quick View hover-pill on image · hover-lift to brand-green
   ═══════════════════════════════════════════════ */

/* ── Base — REAL card with border, white bg, rounded, hover-lift ──
   height:100% + flex column makes ALL cards in a grid row match the tallest
   sibling's height. Combined with margin-top:auto on .nf-card__price-row,
   price always pins to the bottom of the info area, aligning prices across
   the grid even when title/review/swatches vary card-to-card. ── */
.nf-card {
  --nf-brand: var(--color-brand-green, #48A06A);
  --nf-card-bg: #fff;
  --nf-card-border: rgba(0, 0, 0, 0.12);
  --nf-card-radius: var(--pdp-radius-card, 14px);
  --nf-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--nf-card-bg);
  border: 1px solid var(--nf-card-border);
  border-radius: var(--nf-card-radius);
  overflow: hidden;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

/* Stretch direct grid/flex parent items so cards align top + grow to match.
   overflow:visible on the item ensures the card's hover shadow can paint
   outward over neighbor cards. */
/* Kept as two separate rules: browsers drop an entire selector list when one
   selector is unsupported, so pairing :has() with .nf-card__cell would kill
   the .nf-card__cell styles in non-:has browsers. */
.cl-grid__item:has(.nf-card) {
  display: flex;
  height: 100%;
  overflow: visible;
}
.nf-card__cell {
  display: flex;
  height: 100%;
  overflow: visible;
}
.cl-grid__item .nf-card { flex: 1; }

/* Hover motion gated to real pointers: on touch, a tap would stick the card
   in its lifted state until the next tap elsewhere. */
@media (hover: hover) and (pointer: fine) {
  .nf-card:hover {
    /* Lift above neighbors so the hover shadow paints over their white bg
       instead of being visually clipped by the next row of cards. */
    z-index: 2;
    border-color: color-mix(in srgb, var(--nf-brand) 40%, transparent);
    box-shadow: var(--nf-card-shadow-hover);
    transform: translateY(-1px);
  }
}

/* ── Image — flush to card edges, no extra border ── */
.nf-card__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* White across the board (Marta 2026-08-11): product photos are shot on
     white, so a cream tile made those cards read as mismatched patches. */
  background: #fff;
}
.nf-card__img-wrap--portrait {
  aspect-ratio: 3 / 4;
}

.nf-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 250ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Gallery (lifestyle) image ships hidden everywhere; only the collection
   grid's [data-view-mode="gallery"] CSS reveals it. Keeps every other
   card surface (menus, recs, spotlights) on the catalogue shot. */
.nf-card__img--gallery { display: none; }
[data-view-mode="gallery"] .nf-card__img--catalogue { display: none; }
[data-view-mode="gallery"] .nf-card__img--gallery { display: block; }

@media (hover: hover) and (pointer: fine) {
  .nf-card--zoom:hover .nf-card__img {
    transform: scale(1.04);
  }
}

/* ── Badge — TOP-LEFT, white/95 backdrop-blur pill (Variant D spec) ── */
.nf-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a2e;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Sale badge breaks from the white pill — uses brand red for urgency */
.nf-card__badge--sale {
  background: #dc2626;
  color: #fff;
}
.nf-card__badge--sold-out {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
}
/* Bestseller / New / Limited badges stay on the white/95 backdrop-blur base. */

/* ── Info — uniform p:0.75rem padding, stretches to fill card height ──
   flex:1 fills available vertical space; price-row pins to bottom via
   margin-top:auto. This is what makes the grid look perfectly aligned
   even when cards have differing meta (review/swatches/etc). ── */
.nf-card__info {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-height: 0;
}
.nf-card__desc {
  font-size: 11px;
  line-height: 1.4;
  color: #71717a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nf-card--dark .nf-card__desc { color: rgba(255,255,255,0.55); }

/* Display tag pill styles removed — see markup comment for context. */

/* ── Title — 14px semibold (Variant D L spec) ── */
.nf-card__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-foreground, #1a1a2e);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  transition: color 0.2s ease;
}

/* ── Review — inline format: ★ 4.8 · 94 ── */
.nf-card__review {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--pdp-text-muted, #6f6f7d);
  line-height: 1.2;
}
.nf-card__star {
  color: #f59e0b;
  font-size: 11px;
  line-height: 1;
}
.nf-card__rating {
  font-weight: 600;
  color: var(--pdp-text-muted, #6f6f7d);
}
.nf-card__review-dot {
  color: #cbd5e1;
}
.nf-card__review-count {
  color: var(--pdp-text-muted, #6f6f7d);
  font-weight: 400;
}
.nf-card--dark .nf-card__review { color: rgba(255,255,255,0.55); }
.nf-card--dark .nf-card__rating { color: rgba(255,255,255,0.85); }
.nf-card--dark .nf-card__review-dot { color: rgba(255,255,255,0.25); }
.nf-card--dark .nf-card__review-count { color: rgba(255,255,255,0.55); }

/* ── Price — 13px bold, compare-at inline. Pinned to BOTTOM of info area
   via margin-top:auto so prices align horizontally across the grid even
   when sibling cards have varying review/swatches/display-tag content. ── */
.nf-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.nf-card__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  letter-spacing: -0.005em;
}
.nf-card__compare {
  font-size: 11px;
  color: var(--pdp-text-muted, #6f6f7d);
  text-decoration: line-through;
  font-weight: 400;
}
.nf-card--dark .nf-card__price { color: #f5f5f5; }
.nf-card--dark .nf-card__compare { color: rgba(255,255,255,0.4); }

/* ── Inline Add-to-Cart — OPT-IN ONLY (show_add_to_cart param, collection grid).
   Variant D removed the default ATC; this button renders solely where a
   context passes show_add_to_cart: true. Outline pill under the price row. ── */
.nf-card__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  /* Filled brand green across the board, softer sage on wellness surfaces
     (Marta 2026-08-11). --card-atc-bg is overridden per template below. */
  background: var(--card-atc-bg, #48A06A);
  border: 1.5px solid var(--card-atc-bg, #48A06A);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
/* Wellness templates (pages, collections, PDPs) carry "wellness" in the body
   template class. */
body[class*="wellness"] .nf-card__add-btn { --card-atc-bg: #8FC8A5; }
@media (hover: hover) and (pointer: fine) {
  .nf-card__add-btn:hover {
    background: var(--color-foreground, #1a1a2e);
    border-color: var(--color-foreground, #1a1a2e);
    color: #fff;
  }
}
.nf-card__add-btn:active { transform: scale(0.98); }
.nf-card__add-btn.is-adding { opacity: 0.6; pointer-events: none; }
.nf-card__add-btn.is-added {
  background: var(--color-brand-green-dark, #2d8a23);
  border-color: var(--color-brand-green-dark, #2d8a23);
  color: #fff;
}
.nf-card__add-btn--soldout,
.nf-card__add-btn:disabled {
  background: transparent;
  border-color: var(--pdp-border, #e5e7eb);
  color: var(--pdp-text-muted, #9ca3af);
  cursor: not-allowed;
}
.nf-card--dark .nf-card__add-btn {
  background: var(--card-atc-bg, #48A06A);
  border-color: var(--card-atc-bg, #48A06A);
  color: #fff;
}
.nf-card--dark .nf-card__add-btn:hover {
  background: #fff;
  border-color: #fff;
  color: #1a1a2e;
}


/* ═══════════════════════════════════════
   SIZE: L (section-level cards — reference size)
   ═══════════════════════════════════════ */
.nf-card--l {
  width: 200px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
@media (max-width: 749px) {
  .nf-card--l { width: 180px; }
}

/* (SIZE: M lives further down — single consolidated block, "SIZE: M".) */

/* ═══════════════════════════════════════
   SIZE: S (cart upsell — vertical 160px card)
   ═══════════════════════════════════════ */
.nf-card--s {
  width: 160px;
  flex-shrink: 0;
  scroll-snap-align: start;
  border-radius: 10px;
}
.nf-card--s .nf-card__info { padding: 0.5rem; gap: 0.125rem; }
.nf-card--s .nf-card__title { font-size: 13px; }
.nf-card--s .nf-card__price { font-size: 13px; }
.nf-card--s .nf-card__compare { font-size: 11px; }
.nf-card--s .nf-card__badge { font-size: 9px; padding: 0.125rem 0.5rem; }
.nf-card--s .nf-card__review,
.nf-card--s .nf-card__swatches,
.nf-card--s .nf-card__quick-view { display: none; }
@media (max-width: 749px) {
  .nf-card--s { width: 145px; }
}

/* ═══════════════════════════════════════
   SCHEME: Dark (wellness)
   Card background follows section bg (transparent) — the "card-ness" comes
   from the image-wrap which has its own dark background.
   ═══════════════════════════════════════ */
.nf-card--dark {
  --nf-card-bg: transparent;
  --nf-card-border: rgba(255, 255, 255, 0.08);
}
.nf-card--dark:hover {
  border-color: color-mix(in srgb, var(--nf-brand) 50%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.nf-card--dark .nf-card__img-wrap {
  background: #1a1a1d;
}
.nf-card--dark .nf-card__title {
  color: var(--card-dark-text, #f5f5f5);
}
/* (dark .nf-card__add-btn rules removed — ATC no longer rendered) */

/* ═══════════════════════════════════════
   QUICK VIEW — HOVER variant (Variant D L spec)
   Absolute pill on image bottom-right. Hidden by default, fades in on card hover.
   ═══════════════════════════════════════ */
.nf-card__quick-view--hover {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-foreground, #1a1a2e);
  border: 0;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
  z-index: 2;
}
@media (hover: hover) {
  .nf-card:hover .nf-card__quick-view--hover {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Touch devices: always visible on the L card */
@media (hover: none) {
  .nf-card__quick-view--hover {
    opacity: 1;
    transform: none;
  }
}
.nf-card__quick-view--hover:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════
   QUICK VIEW — SECONDARY variant (XL + text-only spec)
   Inline pill button at the bottom of .nf-card__info, dark on light, light on dark
   ═══════════════════════════════════════ */
.nf-card__quick-view--secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.5rem 0.875rem;
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
}
.nf-card__quick-view--secondary:hover {
  background: color-mix(in srgb, #1a1a2e 85%, #ffffff);
}
.nf-card__quick-view--secondary svg {
  transition: transform 0.2s ease;
}
.nf-card__quick-view--secondary:hover svg {
  transform: translateX(2px);
}
.nf-card--dark .nf-card__quick-view--secondary {
  background: #fff;
  color: var(--color-foreground, #1a1a2e);
}
.nf-card--dark .nf-card__quick-view--secondary:hover {
  background: #f1f5f9;
}

/* ═══════════════════════════════════════
   COLOR SWATCHES (Variant D)
   Renders only when product has Color option with multiple values.
   --swatch CSS var is set inline per dot. Falls back to grey if invalid.
   ═══════════════════════════════════════ */
.nf-card__swatches {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  min-height: 14px;
}
.nf-card__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--swatch, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 1.5px transparent;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
/* Card-hover lift on swatches — but DON'T touch the selected one (its ring
   from .is-selected wins via specificity). Excluding :not(.is-selected)
   prevents the brand-green ring from being clobbered when the user hovers
   anywhere on the card. */
.nf-card:hover .nf-card__swatch:not(.is-selected) {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 0 0 1.5px rgba(0,0,0,0.05);
}
.nf-card--dark .nf-card__swatch {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 0 1.5px transparent;
}
.nf-card__swatch-more {
  font-size: 10px;
  color: #666;
  font-weight: 600;
  margin-inline-start: 2px;
}
.nf-card--dark .nf-card__swatch-more { color: rgba(255,255,255,0.55); }

/* (Quick View variants moved above — kept here for legacy compat). */

/* ═══════════════════════════════════════
   SIZE: XS (predictive search, mini cards)
   Compact horizontal — 48×48 image, 1-line title, no signals
   ═══════════════════════════════════════ */
.nf-card--xs {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.375rem 0;
}
.nf-card--xs .nf-card__img-wrap {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
}
.nf-card--xs .nf-card__info {
  flex: 1;
  min-width: 0;
  padding: 0;
  gap: 2px;
}
.nf-card--xs .nf-card__title {
  font-size: 12px;
  line-height: 1.3;
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
}
.nf-card--xs .nf-card__price { font-size: 12px; }
.nf-card--xs .nf-card__compare { font-size: 10px; }
.nf-card--xs .nf-card__badge,
.nf-card--xs .nf-card__review,
.nf-card--xs .nf-card__tags,
.nf-card--xs .nf-card__swatches,
.nf-card--xs .nf-card__actions,
.nf-card--xs .nf-card__desc { display: none; }

/* ═══════════════════════════════════════
   SIZE: XL (product spotlight / hero cards)
   Larger image, bigger type, Quick View as inline secondary button
   ═══════════════════════════════════════ */
.nf-card--xl {
  width: 100%;
  max-width: 360px;
}
.nf-card--xl .nf-card__title { font-size: 16px; -webkit-line-clamp: 2; }
.nf-card--xl .nf-card__price { font-size: 18px; }
.nf-card--xl .nf-card__compare { font-size: 13px; }
.nf-card--xl .nf-card__info { padding-top: 0.875rem; gap: 0.25rem; }
.nf-card--xl .nf-card__desc { display: -webkit-box; font-size: 13px; }
.nf-card--xl .nf-card__actions { margin-top: 0.75rem; }

/* ═══════════════════════════════════════
   LAYOUT: text-only (Story Card pins, editorial overlays)
   No image, compact info block, secondary Quick View
   Inherits the size param's type scale (L is reference, S is smaller, etc.)
   ═══════════════════════════════════════ */
.nf-card[data-layout="text-only"] {
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
}
.nf-card[data-layout="text-only"] .nf-card__img-wrap { display: none; }
.nf-card[data-layout="text-only"] .nf-card__info { padding: 0; }
.nf-card[data-layout="text-only"] .nf-card__actions { margin-top: 0.5rem; }
.nf-card--dark[data-layout="text-only"] {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════
   SIZE: M (mega menu — un-carded, minimal; Phase 8 Variant D polish)
   Single consolidated block. Transparent + borderless: the "card-ness"
   comes from the image well. Title + price only — Liquid skips rendering
   review/badges/tags/swatches for this size; the display:none below is
   defensive so CSS agrees even if markup ever leaks back in.
   ═══════════════════════════════════════ */
.nf-card--m {
  background: transparent;
  border: none;
  padding: 0;
  width: 180px;
  flex-shrink: 0;
  border-radius: 10px;
}
/* Un-carded means no floating card shadow or lift in the mega menu —
   the image well below carries the hover feedback instead. */
.nf-card--m:hover {
  box-shadow: none;
  transform: none;
}
.nf-card--m .nf-card__img-wrap {
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #eee);
}
.nf-card--m:hover .nf-card__img-wrap {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.nf-card--m .nf-card__info { padding: 0.625rem 0.25rem 0; gap: 0.125rem; }
.nf-card--m .nf-card__title {
  font-size: 13px;
  display: block;      /* unsets the base -webkit-box 2-line clamp */
  white-space: normal;
  overflow: visible;
}
.nf-card--m .nf-card__price { font-size: 14px; }
.nf-card--m .nf-card__compare { font-size: 11px; }
.nf-card--m .nf-card__review,
.nf-card--m .nf-card__swatches { display: none; }
/* No hover-recolor on M — keep title color consistent */
.nf-card--m:hover .nf-card__title { color: var(--color-foreground, #1a1a2e); }

/* ═══════════════════════════════════════
   SWATCH SELECTED STATE (Round 28 — functional swatches)
   ═══════════════════════════════════════ */
.nf-card__swatch {
  cursor: pointer;
  outline: 0;
}
.nf-card__swatch:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12), 0 0 0 2px var(--nf-brand);
}
.nf-card__swatch.is-selected {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 0 0 1.5px #fff, 0 0 0 3px var(--nf-brand);
  transform: scale(1.05);
}
.nf-card--dark .nf-card__swatch.is-selected {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25), 0 0 0 1.5px #1a1a1d, 0 0 0 3px var(--nf-brand);
}
/* Swatch hover scale removed: ungated it stuck on touch after a tap,
   leaving a NON-selected swatch enlarged and competing with the real
   .is-selected ring — misinforming which colour is chosen. The ring
   already carries the state. Press feedback below instead. */
.nf-card__swatch:active {
  transform: scale(0.97);
}
.nf-card__quick-view--hover:active {
  transform: scale(0.97);
}

/* ═══════════════════════════════════════
   KEYBOARD ACCESS
   The hover Quick View pill must also reveal for keyboard users: on its own
   focus and when anything inside the card has focus. Card itself gets the
   theme-wide green focus ring.
   ═══════════════════════════════════════ */
.nf-card__quick-view--hover:focus-visible,
.nf-card:focus-within .nf-card__quick-view--hover {
  opacity: 1;
  transform: none;
}
.nf-card:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}

/* ── Reduced motion — kill card/swatch transitions + transforms
     (mirrors sibling-product-picker's reduced-motion block) ── */
@media (prefers-reduced-motion: reduce) {
  .nf-card,
  .nf-card:hover,
  .nf-card__img,
  .nf-card--zoom:hover .nf-card__img,
  .nf-card__swatch,
  .nf-card__swatch:hover:not(.is-selected),
  .nf-card__swatch.is-selected,
  .nf-card__quick-view--hover {
    transition: none;
    transform: none;
  }
}
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-rating (INDEX:180) */
.product-rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .product-rating__stars {
    display: flex;
    gap: 0.125rem;
    color: #f5a623;
  }

  .product-rating__stars svg {
    width: 1rem;
    height: 1rem;
  }

  .product-rating__count {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:product-rating */

/* START_SNIPPET:quick-view-modal (INDEX:182) */
/* ═══════════════════════════════════════════════
   QUICK VIEW MODAL
   ═══════════════════════════════════════════════ */

/* ── Overlay container ── */
.qv-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.qv-modal[hidden] { display: none; }
.qv-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* ── Backdrop ── */
.qv-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ── Panel ── */
.qv-modal__panel {
  --qv-bg: #fff;
  --qv-text: #1a1a2e;
  --qv-text-muted: #71717a;
  --qv-border: rgba(0,0,0,0.08);
  --qv-footer-fade: #fff;

  position: relative;
  width: 56rem;
  max-width: calc(100vw - 2rem);
  max-height: 90vh;
  background: var(--qv-bg);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(30px) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.qv-modal.is-open .qv-modal__panel {
  transform: translateY(0) scale(1);
}

/* ── Dark theme panel ── */
.theme-dark .qv-modal__panel {
  --qv-bg: #1e1e21;
  --qv-text: #f5f5f5;
  --qv-text-muted: rgba(255,255,255,0.55);
  --qv-border: rgba(255,255,255,0.12);
  --qv-footer-fade: #1e1e21;
  --color-border: rgba(255,255,255,0.12);
  --color-foreground: #f5f5f5;
}
/* Dark QV: all borders/separators inherit --qv-border */
.theme-dark .qv-modal__scroll .pdp-hero__accordion {
  border-color: var(--qv-border) !important;
}
.theme-dark .qv-modal__scroll hr,
.theme-dark .qv-modal__scroll .pdp-hero__desc-divider-line {
  border-color: var(--qv-border) !important;
  background-color: var(--qv-border) !important;
}
/* Catch hardcoded border colors */
.theme-dark .qv-modal__scroll .pdp-hero__inventory-bar {
  background: rgba(255,255,255,0.12) !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__accordion-trigger {
  color: var(--qv-text) !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__accordion-chevron {
  color: var(--qv-text) !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__accordion-answer,
.theme-dark .qv-modal__scroll .pdp-hero__accordion-body {
  color: var(--qv-text-muted) !important;
}
/* Light QV: ensure accordions use proper light border */
.qv-modal__scroll .pdp-hero__accordion {
  border-color: rgba(0,0,0,0.08);
}

/* ── Close button ── */
.qv-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--qv-bg);
  border: 1px solid var(--qv-border);
  border-radius: 50%;
  color: var(--qv-text);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.qv-modal__close:hover {
  opacity: 0.8;
  transform: scale(1.06);
}

/* ── Scrollable content area ── */
.qv-modal__scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ═══ PDP HERO OVERRIDES INSIDE MODAL ═══ */

/* Remove page-level padding/width constraints */
.qv-modal__scroll .page-width {
  padding: 0 !important;
  max-width: none !important;
}

/* Hero section padding reset */
.qv-modal__scroll .pdp-hero {
  padding-block: 0.5rem 0.5rem !important;
}

/* Grid: two columns on wide modal, single column on narrow */
.qv-modal__scroll .pdp-hero__grid {
  grid-template-columns: 1fr 1fr !important;
  column-gap: 1.5rem !important;
  row-gap: 0.5rem !important;
  padding: 0 1rem;
}

/* Gallery: sticky so it stays visible while scrolling product details */
.qv-modal__scroll .pdp-hero__gallery-sticky {
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start;
}

/* Gallery image: rounded, normal cursor, block lightbox */
.qv-modal__scroll .pdp-hero__main-image,
.qv-modal__scroll .pdp-hero__slide,
.qv-modal__scroll .pdp-hero__gallery,
.qv-modal__scroll .pdp-hero__carousel {
  cursor: default !important;
}
.qv-modal__scroll .pdp-hero__main-image {
  border-radius: 0.5rem !important;
  border: 1px solid var(--qv-border) !important;
}
/* Block the lightbox overlay and expand icons */
.qv-modal__scroll .pdp-hero__expand-icon,
.qv-modal__scroll .pdp-hero__zoom-icon,
.qv-modal__scroll [data-lightbox-trigger],
.qv-modal__scroll .pdp-hero__lightbox,
.qv-modal__scroll .pdp-hero__4d-trigger {
  display: none !important;
}
/* Slides: default cursor */
.qv-modal__scroll .pdp-hero__slide {
  cursor: default !important;
}

/* Gallery arrows: keep clickable, smaller */
.qv-modal__scroll .pdp-hero__arrow {
  width: 2rem;
  height: 2rem;
}

/* Thumbnails: keep clickable, smaller */
.qv-modal__scroll .pdp-hero__thumbnails {
  padding-inline: 0;
  gap: 0.25rem;
}
.qv-modal__scroll .pdp-hero__thumb {
  width: 2.75rem;
  height: 2.75rem;
}

/* ── Info column: tighter spacing, allow pulse overflow ── */
.qv-modal__scroll .pdp-hero__info {
  padding-inline: 0 !important;
  padding-top: 0.25rem;
  overflow: visible !important;
}
.qv-modal__scroll .pdp-hero__inventory,
.qv-modal__scroll .pdp-hero__inventory-info,
.qv-modal__scroll .pdp-hero__inventory-left {
  overflow: visible !important;
}

/* Title: smaller for modal */
.qv-modal__scroll .pdp-hero__title {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
}

/* Description: smaller */
.qv-modal__scroll .pdp-hero__description,
.qv-modal__scroll [data-desc-content] {
  font-size: 0.8125rem !important;
  line-height: 1.55 !important;
}

/* ── Hide elements that belong on the full PDP only ── */
.qv-modal__scroll [data-qty-selector],
.qv-modal__scroll [data-add-to-cart],
.qv-modal__scroll .pdp-hero__cta-row,
.qv-modal__scroll .pdp-hero__dynamic-checkout,
.qv-modal__scroll .pdp-hero__cross-sell,
.qv-modal__scroll .pdp-hero__mobile-sticky,
.qv-modal__scroll .pdp-hero__feature-prompt,
.qv-modal__scroll .pdp-hero__gallery-sticky::after {
  display: none !important;
}

/* ── Description fade — must use panel bg, not section bg ── */
.qv-modal .qv-modal__scroll .pdp-hero__desc-fade {
  background: linear-gradient(to bottom, transparent, var(--qv-bg, #fff)) !important;
}
.theme-dark .qv-modal .qv-modal__scroll .pdp-hero__desc-fade {
  background: linear-gradient(to bottom, transparent, var(--qv-bg, #1e1e21)) !important;
}

/* ── Price: smaller + thinner in modal to distinguish from title ── */
.qv-modal__scroll .pdp-hero__price-current {
  font-size: 1.125rem !important;
  font-weight: 400 !important;
}
.qv-modal__scroll .pdp-hero__price-row {
  margin-top: 0.125rem !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__price-current {
  color: #f5f5f5 !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__price-compare {
  color: rgba(255,255,255,0.4) !important;
}

/* ── Read More toggle — unified grey, dark mode override in QV ── */
.theme-dark .qv-modal__scroll .pdp-hero__desc-toggle {
  background: rgba(255,255,255,0.12) !important;
  color: #f5f5f5 !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__desc-toggle:hover {
  background: rgba(255,255,255,0.18) !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__desc-wrap.is-expanded .pdp-hero__desc-toggle {
  background: rgba(255,255,255,0.12) !important;
  color: #f5f5f5 !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__desc-divider-line {
  background: rgba(255,255,255,0.12) !important;
}

/* ── Accordion — dark mode text ── */
.theme-dark .qv-modal__scroll .pdp-hero__accordion-trigger {
  color: #f5f5f5 !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__accordion-content {
  color: rgba(255,255,255,0.65) !important;
}
.theme-dark .qv-modal__scroll .pdp-hero__accordion {
  border-color: rgba(255,255,255,0.1) !important;
}

/* ── Keep visible: variant picker, price, reviews, description, accordion, trust, shipping, inventory ── */

/* ── Loading spinner ── */
.qv-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem;
}
.qv-modal__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--qv-border);
  border-top-color: var(--qv-text);
  border-radius: 50%;
  animation: qvSpin 0.6s linear infinite;
}
@keyframes qvSpin {
  to { transform: rotate(360deg); }
}
/* Skeleton shimmer placeholder */
.qv-modal__skeleton { display: flex; gap: 1.5rem; padding: 2rem; width: 100%; }
.qv-modal__skeleton-img { width: 50%; aspect-ratio: 1; border-radius: var(--radius-image, 12px); background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: qvShimmer 1.2s ease-in-out infinite; }
.qv-modal__skeleton-info { width: 50%; display: flex; flex-direction: column; justify-content: center; }
.qv-modal__skeleton-line { border-radius: 6px; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%); background-size: 200% 100%; animation: qvShimmer 1.2s ease-in-out infinite; }
@keyframes qvShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@media (max-width: 749px) {
  .qv-modal__skeleton { flex-direction: column; }
  .qv-modal__skeleton-img, .qv-modal__skeleton-info { width: 100%; }
}

/* ── Footer: Add to Cart + View Full ── */
.qv-modal__footer {
  flex-shrink: 0;
  position: relative;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--qv-border);
  background: var(--qv-bg);
}
.qv-modal__footer-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}

/* Add to Cart button */
.qv-modal__add-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  background: #2d8a23;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(45, 138, 35, 0.25);
  transition: box-shadow 0.2s, transform 0.2s;
}
.qv-modal__add-btn:hover {
  box-shadow: 0 4px 16px rgba(45, 138, 35, 0.4);
  transform: translateY(-1px);
}
.qv-modal__add-btn.is-adding {
  pointer-events: none;
  opacity: 0.7;
}
.qv-modal__add-btn.is-added {
  background: var(--color-brand-green, #48A06A);
  box-shadow: none;
}

/* View Full link */
.qv-modal__full-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--qv-text);
  text-decoration: none;
  border: 1.5px solid var(--qv-border);
  border-radius: var(--radius-button);
  transition: border-color 0.2s, background 0.2s;
}
.qv-modal__full-link:hover {
  border-color: var(--qv-text);
}

/* ── Responsive: single column on narrower viewports ── */
@media (max-width: 899px) {
  .qv-modal__scroll .pdp-hero__grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Hide on mobile entirely (Quick View buttons are hidden on mobile too) ── */
@media (max-width: 749px) {
  .qv-modal { display: none !important; }
}
/* END_SNIPPET:quick-view-modal */

/* START_SNIPPET:section-heading (INDEX:184) */
.nf-section-heading {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-inline: auto;
    margin-block-end: var(--space-xl, 2.5rem);
    max-width: 56rem;
  }

  .nf-section-heading--left   { align-items: flex-start; text-align: start; margin-inline: 0; }
  .nf-section-heading--center { align-items: center;     text-align: center; }
  .nf-section-heading--right  { align-items: flex-end;   text-align: end;    margin-inline-end: 0; margin-inline-start: auto; }

  .nf-section-heading__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nf-section-heading-eyebrow, #71717a);
    line-height: 1.2;
  }

  .nf-section-heading__title {
    font-family: var(--font-heading, inherit);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--nf-section-heading-title, var(--color-text, #1a1a2e));
    margin: 0;
  }

  .nf-section-heading__subtitle {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--nf-section-heading-subtitle, var(--p-text-secondary, #4b5563));
    margin: 0;
    max-width: 54rem;
  }
  /* Subheading is richtext: wrapped <p>/<ul> from the editor inherit
     parent typography and lose default vertical margins so it lays out
     like the legacy plain-text subheading. */
  .nf-section-heading__subtitle > :first-child { margin-top: 0; }
  .nf-section-heading__subtitle > :last-child { margin-bottom: 0; }
  .nf-section-heading__subtitle p { font: inherit; color: inherit; }

  /* Dark scheme — wellness / dark-themed sections */
  .nf-section-heading--dark {
    --nf-section-heading-eyebrow: rgba(255, 255, 255, 0.55);
    --nf-section-heading-title: #f5f5f5;
    --nf-section-heading-subtitle: rgba(255, 255, 255, 0.7);
  }

  @media screen and (min-width: 750px) {
    .nf-section-heading {
      gap: 0.75rem;
      margin-block-end: var(--space-2xl, 3rem);
    }
    .nf-section-heading__eyebrow { font-size: 0.8125rem; }
  }
/* END_SNIPPET:section-heading */

/* START_SNIPPET:sibling-product-picker (INDEX:186) */
/* ── Sibling product picker — cross-product navigation row ──
   Image-icon + framed pill design. Container is a subtle bordered frame
   to anchor the picker visually within the buy box.                          */

.sibling-picker {
  border: 1px solid var(--color-border, #e4e3de);
  border-radius: var(--radius-card, 14px);
  padding: 0.875rem 1rem 1rem;
  margin: 0 0 var(--space-md, 1rem);
  background: var(--color-surface-alt, #faf9f6);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* Header — same type ramp as the hero's option labels (Type:, Color:, …) */
.sibling-picker__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
  padding: 0;
  display: block;
}

.sibling-picker__selected {
  font-weight: 400;
  color: var(--color-text-secondary, #666);
}

.sibling-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sibling-picker__option {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 56px;
  padding: 0.375rem 0.875rem 0.375rem 0.375rem;
  /* NOT var(--radius-button): that token is the 999px CTA pill. These are
     image cards — squared with a soft radius so the button and its thumb
     read as one shape (concentric radii: outer 12 = thumb 6 + 6px padding). */
  border-radius: 12px;
  border: 1.5px solid var(--color-border, #e4e3de);
  background: #ffffff;
  color: var(--color-foreground, #1a1a2e);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Text-only pills (no image, no swatch) get tighter padding */
.sibling-picker__option:not(.sibling-picker__option--with-image) {
  padding-inline: 0.875rem;
}

.sibling-picker__option:hover {
  border-color: rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sibling-picker__option:active {
  transform: scale(0.97);
}

.sibling-picker__option:focus-visible {
  outline: 2px solid var(--color-brand-green, #48A06A);
  outline-offset: 2px;
}

/* Active — dark-navy convention shared with the hero's shape cards */
.sibling-picker__option--active {
  border-color: #1a1a2e;
  background-color: #f7f7f8;
  cursor: default;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}

.sibling-picker__option--active:hover {
  border-color: #1a1a2e;
  transform: none;
  box-shadow: 0 0 0 2px rgba(26, 26, 46, 0.08);
}

/* ── Cross-sell mode ("Bundle & Save", hide_current) — Marta 2026-08-07:
   the framed box + floating white card read as off-brand next to the hero's
   option rows. Inline mode drops the frame and renders the options in the
   exact same pill language as the variant pickers above it. ── */
.sibling-picker--inline {
  border: 0;
  border-radius: 0;
  /* !important: an untraceable rule (fieldset UA/aggregated) keeps re-applying
     a 12/14px inset, misaligning the row vs the variant option rows. */
  padding: 0 !important;
  background: transparent;
  gap: 0.5rem;
}
.sibling-picker--inline .sibling-picker__label {
  font-size: 0.875rem;
  font-weight: 600;
}
.sibling-picker--inline .sibling-picker__option:not(.sibling-picker__option--with-image) {
  min-height: 0;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  border: 1.5px solid var(--color-border, #deddd8);
  background: transparent;
  font-size: 0.875rem;
  font-weight: 500;
}
.sibling-picker--inline .sibling-picker__option:hover {
  border-color: var(--color-foreground, #1a1a2e);
  transform: none;
  box-shadow: none;
}
.sibling-picker--inline .sibling-picker__option:active {
  transform: scale(0.97);
}

.sibling-picker__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  /* Concentric with the option's 12px outer radius minus the 6px padding. */
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

.sibling-picker__option--active .sibling-picker__thumb {
  border-color: rgba(26, 26, 46, 0.16);
}

.sibling-picker__swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 0.375rem;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.sibling-picker__name {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

/* ── Mobile: pills stack to full-width for easier tapping ── */
@media (max-width: 749px) {
  .sibling-picker {
    padding: 0.75rem 0.875rem 0.875rem;
  }
  .sibling-picker__options {
    flex-direction: column;
    gap: 0.4375rem;
  }
  .sibling-picker__option {
    width: 100%;
    justify-content: flex-start;
  }
  .sibling-picker__name {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sibling-picker__option,
  .sibling-picker__option:hover {
    transition: none;
    transform: none;
  }
}
/* END_SNIPPET:sibling-product-picker */

/* START_SNIPPET:tech-specs-modal (INDEX:188) */
.tech-specs-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    max-width: min(90vw, 600px);
    max-height: 80vh;
    padding: 0;
    border: none;
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
  }

  .tech-specs-modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .tech-specs-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md, 1.5rem);
    border-block-end: 1px solid var(--color-border, #e5e5e5);
  }

  .tech-specs-modal__title {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
  }

  .tech-specs-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 50%;
  }

  .tech-specs-modal__close:hover {
    background: var(--color-background-secondary, #f5f5f5);
  }

  .tech-specs-modal__content {
    padding: var(--space-md, 1.5rem);
    overflow-y: auto;
    max-height: calc(80vh - 5rem);
  }

  .tech-specs-modal__list {
    margin: 0;
  }

  .tech-specs-modal__row {
    display: flex;
    justify-content: space-between;
    padding-block: 0.75rem;
    border-block-end: 1px solid var(--color-border, #e5e5e5);
  }

  .tech-specs-modal__row:last-child {
    border-block-end: none;
  }

  .tech-specs-modal__label {
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
  }

  .tech-specs-modal__value {
    margin: 0;
    color: var(--color-text-secondary, #666);
    text-align: end;
  }
/* END_SNIPPET:tech-specs-modal */