/** Shopify CDN: Minification failed

Line 22204:13 Expected identifier but found whitespace
Line 22204:15 Expected identifier but found "%"
Line 22204:44 Unexpected "#1a1a2e"
Line 22204:52 Expected identifier but found "%"
Line 22204:69 Expected identifier but found "%"

**/
/* 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: #51BD7A;
  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:benefits-strip (INDEX:2) */
/* ── HP Benefits Strip ── */
.benefits-strip {
  width: 100%;
}

.benefits-strip__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.benefits-strip__inner::-webkit-scrollbar { display: none; }

.benefits-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  white-space: nowrap;
}

.benefits-strip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  opacity: 0.7;
}

.benefits-strip__text {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .benefits-strip__inner {
    border-radius: 0;
  }
}

@media (min-width: 768px) {
  .benefits-strip__inner {
    justify-content: center;
    gap: var(--space-3xl);
    overflow-x: visible;
  }
}
/* END_SECTION:benefits-strip */

/* START_SECTION:best-sellers (INDEX:3) */
/* ── HP Best Sellers ── */
.hp-bestsellers {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.5rem var(--space-md) 4rem;
  overflow: hidden;
}

.hp-bestsellers__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}

.hp-bestsellers__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-text);
  margin: 0;
}

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

/* ── 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;
  padding-bottom: 0.5rem;
}

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

/* 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: block;
    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; }
}
/* END_SECTION:best-sellers */

/* START_SECTION:brand-segment (INDEX:4) */
/* ── 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: #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__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:5) */
/* ═══════════════════════════════════════
   BUNDLER BLOCKS — BYOB Section
   Nanoleaf Design System
   ═══════════════════════════════════════ */

:root {
  --bb-dark: #1a1a2e;
  --bb-green: #4aaf47;
  --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 (dark surface) ── */
.bb__hero-wrap {
  background: var(--bb-dark);
  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: 3.5rem 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: #fff;
}
.bb__subheading {
  font-size: 1.125rem;
  margin: 0;
  color: rgba(255,255,255,0.7);
  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(74,175,71,0.15);
  color: var(--bb-green);
  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: 0 2rem 1rem;
}
.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: 0 1rem 0.75rem; }
}

/* ── 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);
}
/* END_SECTION:bundler-blocks */

/* START_SECTION:bundler (INDEX:6) */
/* ═══════════════════════════════════════
   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: #22c55e;
  box-shadow: 0 0 0 1px #22c55e;
}
.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: #22c55e;
  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: #22c55e; 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: #22c55e;
  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: #22c55e; }
@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; }
}
/* END_SECTION:bundler */

/* START_SECTION:cart-drawer (INDEX:7) */
/* ══════════════════════════════════════════
   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: #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: #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;

}
.nf-cart-drawer__close:hover { background: #eee; color: #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; }
.nf-cart-drawer__shipping-timer {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  color: #e63946;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;

}
.nf-cart-drawer__shipping-timer svg { color: #e63946; }

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

}
/* Scroll fade gradient — bottom edge indicator */
.nf-cart-drawer__items-wrap {
  flex: 1; position: relative; overflow: hidden;
  display: flex; flex-direction: column;

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

}

/* ── 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 — scrolls as one unit if content overflows ── */
.nf-cart-drawer__empty {
  flex: 1; display: flex; flex-direction: column;
  padding: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;

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

.nf-cart-drawer__empty-heading {
  font-size: 15px; font-weight: 700; color: #1a1a2e;
  text-align: center; margin: 24px 20px 4px;
  letter-spacing: -0.01em; flex-shrink: 0;

}

.nf-cart-drawer__empty-sub {
  font-size: 12px; font-weight: 400; color: #999;
  text-align: center; margin: 0 20px 16px; flex-shrink: 0;

}

/* ── Product Discovery Tabs ── */
.nf-cart-drawer__discover {
  display: flex; flex-direction: column;
  align-items: center;
  padding: 0;

}
.nf-cart-drawer__discover-tabs {
  display: inline-flex; gap: 0;
  margin: 4px auto 10px;
  background: var(--color-primary, #1a1a2e);
  border-radius: var(--radius-button);
  padding: 3px; flex-shrink: 0;

}
.nf-cart-drawer__discover-tab {
  padding: 6px 16px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.55); background: transparent;
  border: none; border-radius: var(--radius-button);
  cursor: pointer; font-family: inherit;
  transition: all 0.2s ease;
  text-align: center; white-space: nowrap;

}
.nf-cart-drawer__discover-tab.is-active {
  background: #fff; color: #1a1a2e;

}
.nf-cart-drawer__discover-tab:hover:not(.is-active) { color: rgba(255,255,255,0.85); }

/* Panels */
.nf-cart-drawer__discover-panel {
  width: 100%; display: flex; flex-direction: column;

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

/* Scroll wrapper with side gradients */
.nf-cart-drawer__discover-scroll-wrap {
  position: relative;

}
.nf-cart-drawer__discover-grad {
  position: absolute; top: 0; bottom: 0; width: 32px;
  pointer-events: none; z-index: 2;
  transition: opacity 0.2s ease;

}
.nf-cart-drawer__discover-grad--left {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
  opacity: 0;

}
.nf-cart-drawer__discover-grad--left.is-visible { opacity: 1; }
.nf-cart-drawer__discover-grad--right {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);

}
.nf-cart-drawer__discover-grad--right.is-hidden { opacity: 0; }

.nf-cart-drawer__discover-scroll {
  display: flex; gap: 10px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 20px 8px 20px;
  scroll-snap-type: x proximity;
  scroll-padding-left: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  align-items: flex-start;

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

/* Nav: arrows + dots */
.nf-cart-drawer__discover-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 4px 0; flex-shrink: 0;

}
.nf-cart-drawer__discover-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #e0e0e0; background: #fff;
  cursor: pointer; color: #555; transition: all 0.15s;

}
.nf-cart-drawer__discover-arrow:hover { border-color: #1a1a2e; color: #1a1a2e; }
.nf-cart-drawer__discover-arrow:disabled { opacity: 0.3; cursor: default; }
.nf-cart-drawer__discover-dots {
  display: flex; gap: 4px; align-items: center;

}
.nf-cart-drawer__discover-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ddd; border: none; padding: 0; cursor: pointer;
  transition: all 0.2s;

}
.nf-cart-drawer__discover-dot.is-active {
  background: #1a1a2e; width: 16px; border-radius: 3px;

}

/* Discovery Card */
.nf-cart-drawer__discover-card {
  display: flex; flex-direction: column;
  flex: 0 0 155px; min-width: 155px;
  text-decoration: none; color: inherit;
  padding: 10px; border-radius: var(--radius-card);
  border: 1px solid #e5e5e5; background: #fff;
  scroll-snap-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;

}
/* First card respects left padding */
.nf-cart-drawer__discover-card:first-child { scroll-snap-align: start; }
.nf-cart-drawer__discover-card:hover {
  border-color: #1a1a2e;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.08);
  text-decoration: none;

}
.nf-cart-drawer__discover-card-img-wrap {
  position: relative; width: 100%;
  aspect-ratio: 1; border-radius: 6px;
  overflow: hidden; background: #e8e8e4;
  margin-bottom: 8px;

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

}
.nf-cart-drawer__discover-card-badge {
  position: absolute; top: 6px; right: 6px;
  background: var(--color-brand-green, #51BD7A); color: #fff;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;

}
.nf-cart-drawer__discover-card-badge[hidden] { display: none; }
.nf-cart-drawer__discover-card-title {
  font-size: 12px; font-weight: 600; color: #1a1a2e;
  margin: 0 0 3px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;

}
.nf-cart-drawer__discover-card-price-row {
  display: flex; align-items: center; gap: 5px;
  margin-top: auto;

}
.nf-cart-drawer__discover-card-price {
  font-size: 13px; font-weight: 700; color: #1a1a2e;

}
.nf-cart-drawer__discover-card-compare {
  font-size: 10px; color: #999; text-decoration: line-through;

}
.nf-cart-drawer__discover-card-compare[hidden] { display: none; }
.nf-cart-drawer__discover-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  width: 100%; padding: 5px 0; margin-top: 6px;
  background: var(--color-primary, #1a1a2e); color: #fff;
  border: none; border-radius: var(--radius-md, 8px);
  font-size: 10px; font-weight: 600;
  font-family: inherit; cursor: pointer;
  transition: background 0.15s;
  position: relative; overflow: hidden;

}
.nf-cart-drawer__discover-add-btn:hover { background: var(--color-primary-hover, #2a2a2d); }
.nf-cart-drawer__discover-add-btn.is-adding { pointer-events: none; opacity: 0.85; }
.nf-cart-drawer__discover-add-btn .nf-spinner,
.nf-cart-drawer__discover-add-btn .nf-checkmark {
  display: flex; align-items: center; justify-content: center;

}
.nf-cart-drawer__discover-add-btn .nf-spinner svg {
  animation: spin 0.6s linear infinite;

}

/* Skeleton cards for discovery panels — matches upsell card sizing */
.nf-cart-drawer__discover-skeleton {
  display: flex; gap: 10px; padding: 0 20px 8px;

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

}
.nf-cart-drawer__discover-skeleton-card .nf-cart-drawer__skeleton-img {
  margin-bottom: 8px;

}
.nf-cart-drawer__discover-skeleton-card .nf-cart-drawer__skeleton-line { height: 8px; margin-bottom: 5px; }
.nf-cart-drawer__discover-skeleton-card .nf-cart-drawer__skeleton-btn { height: 24px; margin-top: 5px; }

/* (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 #deddd8;
  border-top-color: #1a1a2e;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 4;

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

/* ── Smooth cart state transitions ── */
.nf-cart-drawer__items {
  transition: opacity 0.22s ease;

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

}
.nf-cart-drawer__empty {
  transition: opacity 0.22s ease;

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

}

/* Shop All button inside discover panels */
.nf-cart-drawer__discover-view-all {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 8px 20px 16px;
  padding: 10px 0;
  font-size: 12px; font-weight: 600;
  color: var(--color-primary, #1a1a2e);
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.15s;
  flex-shrink: 0;

}
.nf-cart-drawer__discover-view-all:hover {
  background: #f5f4f0; border-color: #ccc;
  text-decoration: none;

}
.nf-cart-drawer__discover-view-all svg { flex-shrink: 0; }

/* Discover scroll uses upsell card styles — ensure scroll-snap alignment */
.nf-cart-drawer__discover-scroll .nf-cart-drawer__upsell-card {
  scroll-snap-align: center;

}
.nf-cart-drawer__discover-scroll .nf-cart-drawer__upsell-card:first-child {
  scroll-snap-align: start;

}

.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: #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;

}
.nf-cart-drawer__item-remove:hover { color: #e63946; }
/* Variant pill — always visible when variant exists */
.nf-cart-drawer__item-variant {
  display: inline-block;
  font-size: 10px; font-weight: 500; color: #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: #1a1a2e; }
.nf-cart-drawer__item-compare {
  font-size: 12px; color: #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, #51BD7A); 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: #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);
  overflow: hidden; margin-top: 4px; align-self: flex-start;

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

}
.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: #1a1a2e; font-size: 14px;

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

}
/* Compare-at row */
.nf-cart-drawer__summary-row--compare {
  font-size: 12px; color: #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: #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, #51BD7A); 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, #51BD7A) 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, #51BD7A) 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, #51BD7A) 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: #999;
  text-transform: uppercase; letter-spacing: 0.05em;

}
.nf-cart-drawer__payment-icons { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.nf-cart-drawer__payment-icon { height: 22px; width: auto; border-radius: 3px; }
@media (max-width: 749px) {
  .nf-cart-drawer__payment-icons { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding: 0 4px; }
  .nf-cart-drawer__payment-icons::-webkit-scrollbar { display: none; }
  .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: #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 #deddd8;
  cursor: pointer; color: #1a1a2e;
  transition: all 0.15s;
  padding: 0; flex-shrink: 0;

}
.nf-cart-drawer__upsell-arrow:hover {
  background: #1a1a2e; color: #fff; border-color: #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: #deddd8; border: none; padding: 0;
  cursor: pointer; transition: all 0.2s;

}
.nf-cart-drawer__upsell-dot.is-active {
  background: #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 */
.nf-cart-drawer__upsell-card {
  display: block; flex: 0 0 160px; min-width: 160px;
  text-decoration: none; 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: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);
  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: #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: #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: #1a1a2e; margin: 0;
}
.nf-cart-drawer__upsell-card-compare {
  font-size: 11px; color: #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: #1a1a2e; }
.nf-cart-drawer__upsell-card-review {
  display: flex; align-items: center; gap: 3px; color: #1a1a2e; min-height: 14px;
}
.nf-cart-drawer__upsell-card-review svg { flex-shrink: 0; }
.nf-cart-drawer__upsell-card-review span { font-size: 11px; color: #71717a; line-height: 1; }

/* 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, #51BD7A); pointer-events: none;

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

}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .nf-cart-drawer * { transition-duration: 0.01ms !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 ── */
body.cart-drawer-open { overflow: hidden; }
/* END_SECTION:cart-drawer */

/* START_SECTION:collection-benefits (INDEX:8) */
.cl-benefits {
  padding-block: 4rem;
  overflow: hidden;
  background: var(--section-bg, #f5f5f0);
  --cl-bg: var(--section-bg, #f5f5f0);
}
.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--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; }
}
/* END_SECTION:collection-benefits */

/* START_SECTION:collection-faq (INDEX:9) */
.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:10) */
.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);
  will-change: transform;
}
/* 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:11) */
.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:12) */
.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:13) */
.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:14) */
.cl-spotlights {
  padding-block: 4rem;
  background: #f5f5f0;
}
.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 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.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 {
  font-size: 0.9375rem;
  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:15) */
.cl-sticky-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  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;
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  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:16) */
.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:17) */
/* ══════════════════════════════════════
   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; /* hidden on mobile/tablet */
}
.cl-subnav__container {
  max-width: 72rem;
  margin: 0 auto;
}

/* ── 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)
   ══════════════════════════════════════ */
.cl-subnav--cards .cl-subnav__item {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 7.5rem;
}
.cl-subnav--cards .cl-subnav__img-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #f4f4f5;
  border: 1px solid rgba(0,0,0,0.06);
}
.cl-subnav--cards .cl-subnav__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cl-subnav--cards .cl-subnav__item:hover .cl-subnav__img {
  transform: scale(1.05);
}
.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.75rem;
  font-weight: 600;
  color: #1a1a2e;
  text-align: center;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* 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: boxed pill bar overlapping hero ── */
@media (min-width: 750px) {
  .cl-subnav {
    position: relative;
    z-index: 2;
    margin-top: -1.75rem;
    padding-block: 0;
    background: transparent;
    display: flex;
    justify-content: center;
  }
  .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__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__container {
    background: #1e1e21;
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  }
}

/* ── 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: 5.5rem; }
  .cl-subnav--cards .cl-subnav__label { font-size: 0.6875rem; }
  .cl-subnav--pills .cl-subnav__item { font-size: 0.75rem; padding: 0.4375rem 0.875rem; }
}
/* END_SECTION:collection-subnav */

/* START_SECTION:collection-tabs (INDEX:18) */
.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-trust (INDEX:19) */
.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:20) */
.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;
}
.cl-video__heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #1a1a2e);
  margin: 0 0 1rem;
  line-height: 1.15;
}
.cl-video--dark .cl-video__heading { color: #f5f5f5; }
.cl-video__description {
  font-size: 0.9375rem;
  line-height: 1.7;
  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: #22c55e; 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:21) */
.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: #4aaf47; }
.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: #4aaf47; 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: #4aaf47; }
.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: #4aaf47; }
.contact-page__quick-links a {
  font-size: 0.8125rem;
  color: #4aaf47;
  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: #4aaf47; }
.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-bar (INDEX:22) */
.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;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ── 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;
  animation: badgePulse 2s ease-in-out infinite;
}
.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: #22c55e; 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:favorite-collection (INDEX:23) */
/* ── favorite-collection ──────────────────────────────────── */
.fc {
  background: var(--color-background, #f5f5f0);
}

.fc__inner {
  display: flex;
  align-items: flex-start;
  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(--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);
}

.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__description {
    max-width: 100%;
  }
}
/* END_SECTION:favorite-collection */

/* START_SECTION:feature-grid (INDEX:24) */
/* ── Feature Grid — PDP Benefits-inspired card layout ── */
.feature-grid {
  padding: 2rem 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;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.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 {
    padding: 1.75rem 0; /* same on all breakpoints */
  }

  .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: #22c55e; background: transparent; }
/* END_SECTION:feature-grid */

/* START_SECTION:footer (INDEX:25) */
/* ── 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: #51BD7A;
    box-shadow: 0 0 0 3px rgba(81, 189, 122, 0.18);
  }

  .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: #51BD7A;
    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: #51BD7A; 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: #45a468; 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: 4-column grid (Brand | Shop | Support | Newsletter) ── */
  .nf-footer__middle { padding: 4rem 0 3rem; border-bottom: 0; }

  .nf-footer__columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
    gap: 2rem 2.5rem;
    align-items: start;
  }
  @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.75rem;
    font-weight: 700;
    color: #51BD7A;
    margin: 0 0 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nf-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }

  .nf-footer__link {
    font-size: 0.875rem; color: rgba(26, 26, 46, 0.75); text-decoration: none;
    transition: color 200ms ease; line-height: 1.4; position: relative; width: fit-content;
  }

  .nf-footer__link::after {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 0; height: 1px; background: #1a1a2e; transition: width 0.25s ease;
  }

  .nf-footer__link:hover { color: #1a1a2e; }
  .nf-footer__link:hover::after { width: 100%; }

  /* ── 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; }
  .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 ── */
  @media screen and (min-width: 768px) {
    .nf-footer__top-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
    .nf-footer__columns { grid-template-columns: repeat(3, 1fr); }
    .nf-footer__col--brand { grid-column: 1 / -1; }
    .nf-footer__bottom-row { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; }
  }

  @media screen and (min-width: 1024px) {
    .nf-footer__columns { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 2rem; }
    .nf-footer__col--brand { grid-column: auto; }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:27) */
/* ══════════════════════════════════════════
   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; }

body.search-drawer-open { overflow: hidden; }

.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: 32px; 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, #51BD7A); 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: 600px; }

.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 */
.nf-mega__tab-indicator { position: absolute; bottom: 0; left: 0; height: 2px; background: #1a1a2e; border-radius: 1px; transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease; pointer-events: none; will-change: transform, width; }

.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, #51BD7A); 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, #51BD7A) 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, #51BD7A); 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, #51BD7A); 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); }
.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, #51BD7A);
}
.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, #51BD7A);
  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:28) */
/* ── 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 ── */
.help-center__panel {
  display: none;
  animation: fadeInUp 0.3s ease;
}

.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;
  animation: fadeInUp 0.25s ease;
}

.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: #4aaf47;
  border-color: #4aaf47;
}

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

.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: opacity 0.25s ease, max-height 0.3s ease;
}
.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: #4aaf47; }
.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 #4aaf47;
}
.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:29) */
/* ── 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 (3 modes for restrained but flexible sizing) ── */
/* Slim — CTA banner. Use for promo strips or supporting sections. */
.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; }
/* Standard — current default. Use for most homepages and main heroes. */
.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; }
/* Tall — landing-page statement. Use for segment landings (Kids, Wellness, AI). */
.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; }

@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 ── */
/* Light scheme = light/white TEXT on dark backgrounds */
.hero-bb--light { --hp-hero-text: #fff; color: #fff; }
/* Dark scheme = dark TEXT on light backgrounds */
.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;
}

/* Single slide: relative position for section height, full viewport coverage */
.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%;
}

/* Multi-slide: first slide stays relative for height, rest absolute */
.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;
  will-change: transform;
}

.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;
  background: linear-gradient(to top, var(--hp-hero-overlay) 0%, transparent 60%);
  pointer-events: none;
}

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

/* Heading sizes */
.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); }

/* Eyebrow / tag label — small uppercase letter-spaced text above the
   heading. Matches the cl-hero__eyebrow + feature-grid__eyebrow tag
   pattern used elsewhere so all "tag" labels feel like one system. */
.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; }

/* Description sizes */
.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); }

/* Tagline alignment follows content position */
.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;
}

/* Light scheme (white text on dark bg): white buttons */
.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;
}

/* Dark scheme (dark text on light bg): dark buttons */
.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 ── */
.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;
}

/* Dark scheme dots */
.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%; }
}

/* ── Scroll-down button arrow bounce ── */
.hero-bb__btn--scroll .hero-bb__btn-arrow {
  display: inline-block;
  animation: hero-bb-bounce 2s ease infinite;
}

/* ── Scroll indicator ── */
.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;
}

/* Color scheme sync */
.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);
  }
}

/* ── Mobile overrides ── */
@media (max-width: 749px) {
  .hero-bb { min-height: 320px; }

  /* Single-slide mobile height */
  .hero-bb[data-slide-count="1"] .hero-bb__slide {
    min-height: 320px !important;
  }

  /* Mobile heading sizes */
  .hero-bb--m-heading-small .hero-bb__heading { font-size: clamp(1.25rem, 5vw, 1.75rem); }
  .hero-bb--m-heading-medium .hero-bb__heading { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .hero-bb--m-heading-large .hero-bb__heading { font-size: clamp(1.75rem, 7vw, 2.75rem); }
  .hero-bb--m-heading-auto .hero-bb__heading { font-size: unset; }

  /* Mobile description sizes */
  .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;
  }
}
/* END_SECTION:hero-billboard */

/* START_SECTION:instagram-gallery (INDEX:30) */
/* ── 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 */
.ig__wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1440px;
  margin-inline: auto;
  overflow: hidden;
}

/* Text block — hidden on mobile/tablet */
.ig__text-cell {
  display: none;
  background: #f0efea;
  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: boxed with rounded corners + bottom margin ───── */
@media (min-width: 1440px) {
  .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 {
    border-radius: 1.25rem;
    overflow: hidden;
  }
}
/* END_SECTION:instagram-gallery */

/* START_SECTION:integration-features (INDEX:31) */
.integration-features--dark {
    color: #ffffff;
  }

  /* Row */
  .integration-features__row {
    padding: 60px 0;
    background-color: #ffffff;
  }

  .integration-features__row--alt {
    background-color: #f8f8f8;
  }

  .integration-features--dark .integration-features__row {
    background-color: #1a1a2e;
  }

  .integration-features--dark .integration-features__row--alt {
    background-color: #151527;
  }

  /* Container */
  .integration-features__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
  }

  @media (min-width: 769px) {
    .integration-features__container {
      grid-template-columns: 1fr 1fr;
      gap: 60px;
    }
  }

  /* Row direction: default = image left, text right */
  /* On desktop, reversed row swaps the visual order */
  @media (min-width: 769px) {
    .integration-features__row--reversed .integration-features__container {
      direction: rtl;
    }

    .integration-features__row--reversed .integration-features__container > * {
      direction: ltr;
    }
  }

  /* Media */
  .integration-features__media img,
  .integration-features__media video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-image);
  }

  .integration-features__placeholder {
    background-color: #e8e8e8;
    border-radius: var(--radius-image);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
  }

  .integration-features--dark .integration-features__placeholder {
    background-color: #2a2a4a;
  }

  .integration-features__placeholder svg {
    width: 60%;
    height: auto;
    opacity: 0.3;
  }

  /* Text */
  .integration-features__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .integration-features__heading {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 20px;
    color: #2d2f30;
    letter-spacing: -0.01em;
  }

  .integration-features--dark .integration-features__heading {
    color: #ffffff;
  }

  .integration-features__description {
    font-size: 16px;
    line-height: 1.7;
    color: #515354;
  }

  .integration-features--dark .integration-features__description {
    color: rgba(255, 255, 255, 0.75);
  }

  /* Rich text elements within description */
  .integration-features__description h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 8px;
    color: #2d2f30;
  }

  .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: #2d2f30;
    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: #f5f4f0;
    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: #f5f4f0;
    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:32) */
.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:33) */
.integration-hero {
    padding: 0 0 60px;
  }

  .integration-hero--light {
    background-color: #f8f8f8;
    color: #2d2f30;
  }

  .integration-hero--dark {
    background-color: #1a1a2e;
    color: #ffffff;
  }

  .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: #515354;
  }

  .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: #515354;
  }

  .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: #2d2f30;
    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: #515354;
    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;
    padding: 14px 32px;
    background-color: #1a1a2e;
    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;
  }

  .integration-hero__ext-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    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: #f5f4f0;
    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:34) */
.ip {
  padding: 3rem 0 4rem;
}
.ip__heading {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  color: #1a1a2e;
}
.ip__subheading {
  font-size: 1rem;
  color: #777;
  margin: 0 0 2rem;
}
.ip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.ip__card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  border: 1px solid #e5e5e5;
  background: #fff;
  text-decoration: none;
  color: #1a1a2e;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.ip__card:hover {
  border-color: #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}
.ip__card-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: #f5f4f0;
}
.ip__card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ip__card-body {
  flex: 1;
  min-width: 0;
}
.ip__card-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip__card-price {
  font-size: 0.8125rem;
  color: #777;
  margin: 0;
}
.ip__card-arrow {
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
  color: #999;
}
.ip__card:hover .ip__card-arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 749px) {
  .ip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* END_SECTION:integration-products */

/* START_SECTION:legal-content (INDEX:35) */
/* ═══════════════════════════════════════
   LEGAL PAGE — narrow centered layout
   ═══════════════════════════════════════ */
.legal-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}

/* ── Breadcrumb ── */
.legal-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin-bottom: 2.5rem;
}
.legal-breadcrumb a {
  color: var(--color-text-muted, #71717a);
  text-decoration: none;
  transition: color 0.2s ease;
}
.legal-breadcrumb a:hover {
  color: var(--color-foreground, #1a1a2e);
}
.legal-breadcrumb span:last-child {
  color: var(--color-foreground, #1a1a2e);
}

/* ── White card container ── */
.legal-content {
  background: #fff;
  border-radius: 1.5rem;
  padding: 3rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  animation: legalFadeIn 0.6s ease both;
}
@keyframes legalFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Header ── */
.legal-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.legal-date {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 3rem;
}

/* ── Table of contents ── */
.legal-toc {
  background: var(--color-secondary, #f5f4f0);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2.5rem;
}
.legal-toc__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #71717a);
  margin: 0 0 0.75rem;
}
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.legal-toc__link {
  font-size: 0.875rem;
  color: var(--color-accent, #2563eb);
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}
.legal-toc__link:hover {
  opacity: 0.7;
}

/* ── Body typography — heading hierarchy ── */
.legal-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;
}
.legal-body h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.legal-body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.3;
}
.legal-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;
}
.legal-body h5 {
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-foreground, #1a1a2e);
  line-height: 1.4;
}
.legal-body p {
  line-height: 1.8;
  margin: 0 0 1.25rem;
  color: var(--color-body-text, #444);
}
.legal-body ul,
.legal-body ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
}
.legal-body li {
  line-height: 1.8;
  margin-bottom: 0.5rem;
  color: var(--color-body-text, #444);
}
.legal-body a {
  color: var(--color-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover {
  opacity: 0.7;
}
.legal-body strong {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.875rem;
}
.legal-body th,
.legal-body td {
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  line-height: 1.6;
}
.legal-body th {
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
}
.legal-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;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
  .legal-content {
    background: #1e1e21;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
  }
  .legal-title,
  .legal-body h2,
  .legal-body h3,
  .legal-body h5,
  .legal-body strong,
  .legal-body th {
    color: #f0f0f5;
  }
  .legal-body h4 {
    color: #a0a0b0;
  }
  .legal-body p,
  .legal-body li {
    color: #c8c8d4;
  }
  .legal-breadcrumb,
  .legal-breadcrumb a,
  .legal-date,
  .legal-body blockquote {
    color: #8888a0;
  }
  .legal-breadcrumb span:last-child {
    color: #f0f0f5;
  }
  .legal-toc {
    background: #24242e;
  }
  .legal-body h2 {
    border-top-color: #2e2e3a;
  }
  .legal-body th,
  .legal-body td {
    border-bottom-color: #2e2e3a;
  }
}

/* ── Responsive ── */
@media (max-width: 749px) {
  .legal-page { padding: 3rem 1rem 3rem; }
  .legal-content { padding: 2rem 1.25rem; border-radius: 1rem; }
  .legal-title { font-size: 1.5rem; }
  .legal-body h2 { font-size: 1.25rem; margin-top: 2rem; }
  .legal-body h3 { font-size: 1.0625rem; }
  .legal-body h4 { font-size: 1rem; }
  .legal-body h5 { font-size: 0.875rem; }
  .legal-toc { padding: 1rem 1.25rem; }
}
/* END_SECTION:legal-content */

/* START_SECTION:main-article (INDEX:40) */
/* ═══════════════════════════════════════
   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:41) */
/* ═══════════════════════════════════════
   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:42) */
/* ═══════════════════════════════════════
   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);
}

/* ── Quantity selector ── */
.cart-pg__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border, #deddd8);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
}
.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;
}
.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; }

/* ── 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; }

/* ── 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:43) */
@keyframes clGridSpin { to { transform: rotate(360deg); } }

.cl-grid {
  padding-block: 1.5rem 3rem;
}

/* Header */
.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);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--color-foreground, #1a1a2e);
  margin: 0;
}

.cl-grid__count {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-foreground-secondary, #71717a);
}

/* Filters */
.cl-grid__filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cl-grid__filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-button, 0.5rem);
  background: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground, #1a1a2e);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
}

.cl-grid__filter-toggle:hover {
  border-color: var(--color-foreground, #1a1a2e);
}

.cl-grid__filter-pills {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.cl-grid__filter-pill {
  padding: 0.3125rem 0.75rem;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-full, 9999px);
  background: none;
  font-size: 0.75rem;
  font-weight: 500;
  color: #71717a;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.cl-grid__filter-pill:hover {
  border-color: var(--color-foreground, #1a1a2e);
  color: var(--color-foreground, #1a1a2e);
}

.cl-grid__filter-pill--active {
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
  border-color: var(--color-foreground, #1a1a2e);
}

/* Product grid */
.cl-grid__products {
  display: grid;
  grid-template-columns: repeat(var(--cl-grid-cols, 4), 1fr);
  gap: 1.25rem 1rem;
}

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

/* Filter hide animation */
.cl-grid__item[hidden] {
  display: none;
}

/* Empty state */
.cl-grid__empty {
  text-align: center;
  color: var(--color-foreground-secondary, #71717a);
  font-size: 0.9375rem;
  padding: 3rem 0;
}

/* Load More */
.cl-grid__load-more {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.cl-grid__load-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 2rem;
  border: 1.5px solid var(--color-foreground, #1a1a2e);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #1a1a2e);
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.cl-grid__load-btn:hover {
  background: var(--color-foreground, #1a1a2e);
  color: #fff;
}

.cl-grid__loading {
  color: var(--color-foreground-secondary, #71717a);
}

.cl-grid__loading svg {
  animation: clGridSpin 0.8s linear infinite;
}

/* Responsive */
@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-direction: column;
    align-items: flex-start;
  }

  .cl-grid__filter-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .cl-grid__filter-pills::-webkit-scrollbar { display: none; }
}
/* END_SECTION:main-collection */

/* START_SECTION:main-password (INDEX:48) */
.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:52) */
/* ═══════════════════════════════════════════════
   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(12px);
  animation: searchFadeIn 0.4s ease 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:53) */
.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: #4aaf47; 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:54) */
.manual-steps {
    --ms-green: #4aaf47;
    --ms-dark: #1a1a2e;
    --ms-text: #2d2f30;
    --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:55) */
.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: #51BD7A; box-shadow: 0 0 0 3px rgba(81, 189, 122, 0.18); }
.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: #51BD7A;
  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;
}
/* END_SECTION:market-suggestion */

/* START_SECTION:newsroom-press-kits (INDEX:56) */
/* ── 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: #4aaf47;
  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:57) */
/* ── 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__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: #4aaf47;
  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:58) */
/* ── 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: #4aaf47;
  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:59) */
/* ═══════════════════════════════════════
   APP HERO — split layout for app pages
   ═══════════════════════════════════════ */
.app-hero {
  background: var(--app-hero-bg, #f5f4f0);
  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);
}

/* ── 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 ── */
.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-declarations (INDEX:60) */
.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: #4aaf47;
    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:61) */
.security-page {
    --security-green: #4aaf47;
    --security-green-dark: #3d9e3a;
    --security-green-light: #4aaf47;
    --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;
  }

  .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:pdp-app-download (INDEX:62) */
/* 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: #00b140;
    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-before-after (INDEX:63) */
.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:64) */
.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);
  }

  .pdp-benefits__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .pdp-benefits__card {
    text-align: center;
    background: transparent;
  }

  .pdp-benefits__image-wrapper {
    aspect-ratio: 3 / 4;
    background-color: var(--color-secondary);
    border-radius: var(--radius-xl);
    margin-block-end: 1rem;
    overflow: hidden;
  }

  .pdp-benefits__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pdp-benefits__card-title {
    font-weight: 600;
    margin-block-end: 0.5rem;
    color: var(--color-foreground);
  }

  .pdp-benefits__card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
  }

  @media screen and (min-width: 750px) {
    .pdp-benefits {
      padding-block: 5rem;
    }

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

    .pdp-benefits__image-wrapper {
      aspect-ratio: 3 / 4;
    }

    /* 2-column variant */
    .pdp-benefits[data-columns="2"] .pdp-benefits__grid {
      grid-template-columns: repeat(2, 1fr);
      max-width: 48rem;
      margin-inline: auto;
    }

    /* 4-column variant */
    .pdp-benefits[data-columns="4"] .pdp-benefits__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
/* END_SECTION:pdp-benefits */

/* START_SECTION:pdp-breadcrumb (INDEX:65) */
.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:66) */
/* ═══════════════════════════════════════
   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;
  z-index: 2;
}

/* 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: #22c55e;
}
.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;
}

/* ── 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:67) */
.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, #51BD7A);
  color: #fff;
  border: none;
  border-radius: var(--radius-full, 9999px);
  cursor: pointer;
  transition: all var(--duration-base, 200ms) var(--ease-default);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--color-brand-green, #51BD7A) 40%, transparent);
  position: relative;
  overflow: hidden;
}

.pdp-buy-box__add-btn::after {
  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: ctaShimmer 4s ease-in-out infinite;
}

@keyframes ctaShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.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, #51BD7A) 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, #51BD7A) 40%, transparent);
  transform: none;
}

.pdp-buy-box__add-btn:focus-visible {
  outline: 2px solid var(--color-brand-green, #51BD7A);
  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;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-buy-box * {
    transition: none !important;
  }
}
/* END_SECTION:pdp-buy-box */

/* START_SECTION:pdp-comparison (INDEX:68) */
.comparison {
    padding-block: 4rem;
  }

  .comparison__header {
    text-align: center;
    margin-block-end: 2.5rem;
  }

  .comparison__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    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);
  }

  .comparison__table-wrap {
    overflow-x: auto;
    margin-inline: -1rem;
    padding-inline: 1rem;
    -webkit-overflow-scrolling: touch;
  }

  .comparison__table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 1rem;
    overflow: hidden;
  }

  .comparison__th {
    padding: 1rem 1.25rem;
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }

  .comparison__th--feature {
    text-align: start;
    font-weight: 500;
    color: var(--color-text-muted);
    border-block-end: 2px solid rgba(0,0,0,0.06);
    width: 200px;
    background: rgba(0,0,0,0.02);
  }

  .comparison__th--nanoleaf {
    text-align: center;
    font-weight: 600;
    border-block-end: 2px solid #2d8a23;
    background: rgba(45, 138, 35, 0.1);
    border-start-start-radius: 0.5rem;
    border-start-end-radius: 0.5rem;
    position: relative;
  }

  .comparison__th--nanoleaf::before {
    content: '';
    position: absolute;
    inset: 0;
    border-left: 2px solid rgba(45, 138, 35, 0.2);
    border-right: 2px solid rgba(45, 138, 35, 0.2);
    border-top: 2px solid rgba(45, 138, 35, 0.2);
    border-radius: 0.5rem 0.5rem 0 0;
    pointer-events: none;
  }

  .comparison__nanoleaf-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
  }

  .comparison__nanoleaf-header span {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1a1a2e;
  }

  .comparison__logo {
    height: 1.25rem;
    width: auto;
  }

  .comparison__logo--dark { display: none; }

  .comparison__th--competitor {
    text-align: center;
    font-weight: 500;
    color: var(--color-text-muted);
    border-block-end: 2px solid rgba(0,0,0,0.06);
    border-left: 1px solid rgba(0,0,0,0.06);
  }

  .comparison__value--competitor {
    border-left: 1px solid rgba(0,0,0,0.06);
  }

  .comparison__row--alt {
    background: rgba(0, 0, 0, 0.015);
  }

  .comparison__row:hover td {
    background: rgba(0, 0, 0, 0.03);
    transition: background 0.15s ease;
  }

  .comparison__row:hover .comparison__value--nanoleaf {
    background: rgba(45, 138, 35, 0.1) !important;
  }

  .comparison__feature {
    padding: 0.875rem 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.06);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
  }

  .comparison__value {
    padding: 0.875rem 1.25rem;
    font-size: var(--font-size-sm);
    text-align: center;
    border-block-end: 1px solid rgba(0, 0, 0, 0.06);
  }

  .comparison__value--nanoleaf {
    font-weight: 600;
    background: rgba(45, 138, 35, 0.06);
    color: #1a1a2e;
    border-left: 2px solid rgba(45, 138, 35, 0.2);
    border-right: 2px solid rgba(45, 138, 35, 0.2);
  }

  /* Last row bottom border for Nanoleaf column */
  .comparison__row:last-child .comparison__value--nanoleaf {
    border-bottom: 2px solid rgba(45, 138, 35, 0.2);
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .comparison__value--competitor {
    color: var(--color-text-muted);
  }

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

  .comparison__price-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .comparison__price-compare {
    color: #999;
    font-weight: 400;
    font-size: 0.8125rem;
    text-decoration: line-through;
  }

  .comparison__price-current {
    font-weight: 700;
    color: #16a34a;
  }

  @media screen and (min-width: 750px) {
    .comparison {
      padding-block: 5rem;
    }

    .comparison__title {
      font-size: var(--font-size-4xl);
    }
  }
/* END_SECTION:pdp-comparison */

/* START_SECTION:pdp-exit-intent (INDEX:69) */
.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:70) */
.faq-section {
    display: block;
    padding-block: 4rem;
  }

  .faq-section__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* --- Header --- */
  .faq-section__header {
    margin-block-end: 2rem;
    padding-inline: 0.25rem;
  }

  .faq-section__title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--color-foreground);
    margin-block-end: 0.75rem;
  }

  .faq-section__subtitle {
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
  }

  /* --- Accordion --- */
  .faq-section__accordion {
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border);
    overflow: hidden;
    background: inherit;
  }

  .faq-section__item {
    border-block-end: 1px solid var(--color-border);
  }

  .faq-section__item:last-child {
    border-block-end: none;
  }

  .faq-section__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: start;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: var(--font-size-sm);
    color: var(--color-foreground);
  }

  .faq-section__question-text {
    padding-inline-end: 1rem;
    line-height: var(--line-height-base);
  }

  .faq-section__chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-default);
  }

  .faq-section__question[aria-expanded="true"] .faq-section__chevron {
    transform: rotate(180deg);
  }

  .faq-section__answer {
    padding-inline: 1.25rem;
    padding-block-end: 1.25rem;
    margin-block-start: -0.25rem;
  }

  .faq-section__answer[hidden] {
    display: none;
  }

  .faq-section__answer p {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
  }

  /* --- Help CTA --- */
  .faq-section__help-cta {
    margin-block-start: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: center;
  }

  .faq-section__help-cta a {
    color: var(--color-foreground);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .faq-section__help-cta a:hover {
    color: var(--color-link-hover, var(--color-foreground));
  }

  /* --- Sidebar App CTA --- */
  .faq-section__sidebar {
    order: -1;
  }

  .faq-section__app-cta {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: linear-gradient(165deg, var(--color-brand-green-dark, #3A8554) 0%, var(--color-brand-green, #51BD7A) 55%, var(--color-brand-green-dark, #3A8554) 100%);
    padding: 1.5rem;
    text-align: center;
    color: #fff;
  }

  .faq-section__app-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
  }

  .faq-section__app-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: #fff;
  }

  .faq-section__app-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 1rem;
  }

  .faq-section__app-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .faq-section__app-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
  }

  .faq-section__app-features svg {
    flex-shrink: 0;
    color: #fff;
  }

  .faq-section__app-stores {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0.75rem;
  }

  .faq-section__store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-full, 9999px);
    background: #fff;
    color: #1a1a2e;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 200ms ease, transform 200ms ease;
    white-space: nowrap;
  }

  .faq-section__store-badge svg { color: #1a1a2e; }

  .faq-section__store-badge:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    text-decoration: none;
  }

  .faq-section__app-free {
    display: block;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.4);
  }

  @media screen and (min-width: 640px) {
    .faq-section__question {
      padding: 1.25rem;
      font-size: var(--font-size-base);
    }

    .faq-section__answer {
      padding-inline: 1.25rem;
      padding-block-end: 1.25rem;
    }

    .faq-section__answer p {
      font-size: var(--font-size-sm);
    }
  }

  @media screen and (min-width: 990px) {
    .faq-section {
      padding-block: 5rem;
    }

    .faq-section__grid {
      grid-template-columns: 1fr 300px;
      gap: 3rem;
    }

    .faq-section__title {
      font-size: var(--font-size-4xl);
    }

    .faq-section__sidebar {
      order: 0;
      position: sticky;
      inset-block-start: 6rem;
      align-self: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-section__chevron {
      transition: none;
    }
  }

  /* ── Dark mode for wellness / collection pages ── */
  .faq-section--dark { background: #0d0d14; }
  .faq-section--dark .faq-section__title { color: #f5f5f5; }
  .faq-section--dark .faq-section__subtitle { color: rgba(255,255,255,0.55); }
  .faq-section--dark .faq-section__accordion { background: #1a1a1d; border-color: rgba(255,255,255,0.08); }
  .faq-section--dark .faq-section__item { border-color: rgba(255,255,255,0.06); }
  .faq-section--dark .faq-section__question { color: #f5f5f5; }
  .faq-section--dark .faq-section__chevron { color: rgba(255,255,255,0.4); }
  .faq-section--dark .faq-section__answer { color: rgba(255,255,255,0.65); }
  .faq-section--dark .faq-section__help-cta { color: rgba(255,255,255,0.5); }
  .faq-section--dark .faq-section__help-cta a { color: #f5f5f5; }
  .faq-section--dark .faq-section__sidebar { color: #f5f5f5; }
  /* App CTA keeps brand green on both light and dark */
  .faq-section--dark .faq-section__app-title { color: #f5f5f5; }
  .faq-section--dark .faq-section__app-desc { color: rgba(255,255,255,0.55); }
  .faq-section--dark .faq-section__app-features li { color: rgba(255,255,255,0.65); }
  /* Store badges stay white on both light and dark */
  .faq-section--dark .faq-section__app-free { color: rgba(255,255,255,0.4); }
/* END_SECTION:pdp-faq */

/* START_SECTION:pdp-gallery (INDEX:71) */
.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:72) */
/* ========================================
   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, #f5f5f0));
  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, #f5f5f0);
  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: #15803d;
  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: var(--color-secondary, #eae9e4);
  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: all 200ms ease;
  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: all 200ms ease;
  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;
  max-height: 88px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f7f8, #efeff1);
  overflow: hidden;
}
.pdp-hero__shape-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  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: 72px; 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, #51BD7A) 10%, transparent);
  color: var(--color-brand-green, #51BD7A);
}
.pdp-hero__qty-btn:active {
  background: color-mix(in srgb, var(--color-brand-green, #51BD7A) 16%, transparent);
  color: var(--color-brand-green, #51BD7A);
}
.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, #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-hero__cta:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-brand-green, #51BD7A) 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, #51BD7A) 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); } }

/* ── 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%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.pdp-sticky-bar[hidden] { display: block; }
.pdp-sticky-bar.is-visible { transform: translateY(0); }

.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: #16a34a;
  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, #51BD7A);
  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, #51BD7A) 50%, transparent);
  transform: translateY(-1px);
}
.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, #51BD7A); 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 */
.pdp-hero__dynamic-checkout.is-loaded .pdp-hero__dynamic-checkout-skeleton {
  opacity: 0;
  pointer-events: 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, #51BD7A);
  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, #51BD7A);
  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, #51BD7A) 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, #51BD7A) 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, #51BD7A) 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: #2d8a23; color: #fff; }
.theme-dark .pdp-hero__notify-btn:hover { background: #248a1a; }
.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.8); 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: #22c55e;
  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: #16a34a; 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: #16a34a; 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, #faf9f6);
  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;
}
/* 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: #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, #f5f5f0)));
  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; }
}

/* ── Mobile Sticky Add-to-Cart ── */
.pdp-hero__mobile-sticky {
  display: none;
}
@media (max-width: 749px) {
  .pdp-hero__mobile-sticky {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .pdp-hero__mobile-sticky.is-visible {
    transform: translateY(0);
  }
  .pdp-hero__mobile-sticky[hidden] { display: none; }
  .pdp-hero__mobile-sticky-fade {
    height: 2rem;
    background: linear-gradient(to bottom, transparent, var(--section-bg, var(--color-background, #f5f5f0)));
    pointer-events: none;
  }
  .theme-dark .pdp-hero__mobile-sticky-fade {
    background: linear-gradient(to bottom, transparent, var(--section-bg, #141416));
  }
  .pdp-hero__mobile-sticky-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.06);
  }
  .pdp-hero__mobile-sticky-qty {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .pdp-hero__mobile-sticky-qty button {
    width: 2rem;
    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;
  }
  .pdp-hero__mobile-sticky-qty span {
    width: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1a1a2e;
  }
  .pdp-hero__mobile-sticky-add {
    flex: 1;
    padding: 0.625rem 0;
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
  }
  .pdp-hero__mobile-sticky-add:hover { background: #2a2a2d; }
  .pdp-hero__mobile-sticky-add.is-added { background: #22c55e; }
  .pdp-hero__mobile-sticky-checkout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.625rem 0.75rem;
    background: #5a31f4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .pdp-hero__mobile-sticky-checkout:hover { background: #4a28c4; }
}

/* ── 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:73) */
.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;
  }

  .how-to-use__card {
    flex: 0 0 65vw;
    scroll-snap-align: center;
  }

  .how-to-use__card-inner {
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: #f0ede8;
    height: 100%;
  }

  .how-to-use__media-wrapper {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    position: relative;
  }

  .how-to-use__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

  .how-to-use__step-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
    display: block;
  }

  .how-to-use__step-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-foreground);
    margin-block-start: 0.25rem;
  }

  .how-to-use__step-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-block-start: 0.125rem;
    line-height: var(--line-height-base);
  }

  /* ── Arrows (gallery style) ── */
  .how-to-use__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;
  }

  .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--prev {
    left: -0.5rem;
  }

  .how-to-use__arrow--next {
    right: -0.5rem;
  }

  .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: grid for ≤5 items, slider for 6+ */
  @media screen and (min-width: 990px) {
    .how-to-use--grid .how-to-use__scroll {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
      overflow-x: visible;
      scroll-snap-type: none;
      padding-block-end: 0;
    }

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

    .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:74) */
.pdp-image-grid {
    padding: 4rem 0;
  }

  @media screen and (min-width: 750px) {
    .pdp-image-grid {
      padding: 5rem 0;
    }
  }

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

  .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;
    color: rgba(26, 26, 46, 0.55);
    margin: 0 auto;
    max-width: 560px;
    line-height: 1.6;
  }

  /* 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__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 */
  .pdp-image-grid__video {
    display: block;
    width: 100%;
    aspect-ratio: var(--image-ratio, 16 / 9);
    border: 0;
    border-radius: var(--radius-xl, 1rem);
  }

  /* 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 */
  .pdp-image-grid__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 1.25rem 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0 0 var(--radius-xl, 1rem) var(--radius-xl, 1rem);
  }

  .pdp-image-grid__caption-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
  }

  /* Mobile responsive */
  @media screen and (max-width: 749px) {
    .pdp-image-grid__title {
      font-size: 1.5rem;
    }

    .pdp-image-grid__header {
      margin-bottom: 1.5rem;
    }

    /* 1-2 blocks stay single column on mobile */
    .pdp-image-grid--count-1 .pdp-image-grid__grid,
    .pdp-image-grid--count-2 .pdp-image-grid__grid {
      grid-template-columns: 1fr;
    }

    /* 3+ blocks: 2 columns on mobile */
    .pdp-image-grid--count-3 .pdp-image-grid__grid,
    .pdp-image-grid--count-4 .pdp-image-grid__grid,
    .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(2, 1fr);
    }
  }
/* END_SECTION:pdp-image-grid */

/* START_SECTION:pdp-recommendations (INDEX:75) */
.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 {% render 'product-card' %} 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;
  }

  .pdp-recommendations__slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
  }

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

  /* ── 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--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:76) */
/* -- 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: #2d8a23;
  }

  .pdp-reviews__sort-select:focus {
    outline: none;
    border-color: #2d8a23;
    box-shadow: 0 0 0 2px rgba(45, 138, 35, 0.15);
  }

  /* -- 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: #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;
    }
  }
/* END_SECTION:pdp-reviews */

/* START_SECTION:pdp-text-media (INDEX:77) */
.pdp-text-media {
    padding-block: 4rem;
  }

  .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;
    opacity: 0.75;
  }

  .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 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 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }

    /* split-right: swap visual order so text is left, media is right */
    .pdp-text-media--split-right .pdp-text-media__media {
      order: 2;
    }

    .pdp-text-media--split-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;
    }
  }
/* END_SECTION:pdp-text-media */

/* START_SECTION:pdp-treatment-modes (INDEX:78) */
.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);
    }
  }

  .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:pdp-treatment-modes */

/* START_SECTION:pdp-video-testimonials (INDEX:79) */
/* ── 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 ── */
  .pdp-video-testimonials__video-wrap {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-xl, 1rem);
    overflow: hidden;
    background: #1a1a2e;
    cursor: pointer;
  }

  .pdp-video-testimonials__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pdp-video-testimonials__thumb[hidden] { display: none; }

  /* ── Play button — matches collection-video design ── */
  .pdp-video-testimonials__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    padding: 0;
    opacity: 0.85;
  }

  .pdp-video-testimonials__play-btn svg circle {
    transition: fill 0.25s ease, stroke 0.25s ease;
  }

  .pdp-video-testimonials__play-btn:hover {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }

  .pdp-video-testimonials__play-btn:hover svg circle {
    fill: rgba(0,0,0,0.55);
    stroke: rgba(255,255,255,0.5);
  }

  .pdp-video-testimonials__play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
  }

  .pdp-video-testimonials__play-btn[hidden] { display: none; }

  /* ── Inline player controls — adapted for vertical cards ── */
  .pdp-video-testimonials__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
    padding: 1.5rem 0.5rem 0.375rem;
  }
  .pdp-video-testimonials__controls[hidden] { display: none; }

  .pdp-video-testimonials__progress {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    cursor: pointer;
    margin-bottom: 0.375rem;
  }
  .pdp-video-testimonials__progress-bar {
    height: 100%;
    background: #fff;
    width: 0%;
    border-radius: 2px;
    transition: width 0.15s linear;
  }
  .pdp-video-testimonials__controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
  }
  .pdp-video-testimonials__playpause {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    padding: 0;
    background: rgba(26, 26, 46, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: none;
    border-radius: var(--radius-button, 9999px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s, opacity 0.25s;
    flex-shrink: 0;
  }
  .pdp-video-testimonials__playpause:hover {
    background: rgba(26, 26, 46, 0.85);
  }
  .pdp-video-testimonials__icon-play[hidden],
  .pdp-video-testimonials__icon-pause[hidden] { display: none; }
  .pdp-video-testimonials__time {
    font-size: 0.625rem;
    color: rgba(255,255,255,0.8);
    font-variant-numeric: tabular-nums;
  }
  .pdp-video-testimonials__controls-right {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .pdp-video-testimonials__mute,
  .pdp-video-testimonials__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;
  }
  .pdp-video-testimonials__mute,
  .pdp-video-testimonials__fullscreen {
    width: 24px;
    height: 24px;
    padding: 0;
  }
  .pdp-video-testimonials__mute:hover,
  .pdp-video-testimonials__fullscreen:hover { background: rgba(255,255,255,0.3); }

  /* ── Inline iframe wrap (YouTube/Vimeo) ── */
  .pdp-video-testimonials__iframe-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .pdp-video-testimonials__iframe-wrap[hidden] { display: none; }
  .pdp-video-testimonials__iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  /* ── Inline native video ── */
  .pdp-video-testimonials__native-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #111;
    z-index: 2;
  }

  /* ── Arrows (gallery style) ── */
  /* Arrows removed — infinite marquee scroll */
  .pdp-video-testimonials__arrow { display: none; }

  /* ── Gradient fades ── */
  .pdp-video-testimonials__fade {
    position: absolute;
    top: 0;
    bottom: 0.5rem;
    width: 3rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 300ms ease;
  }

  .pdp-video-testimonials__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--section-bg, var(--color-background, #fff)) 0%, transparent 100%);
  }

  .pdp-video-testimonials__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--section-bg, var(--color-background, #fff)) 0%, transparent 100%);
  }

  .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:80) */
/* Breaker section — blends with preceding section bg */
  .pdp-works-with-section {
    margin-top: 0 !important;
    padding-top: 0;
  }
  .pdp-works-with {
    display: block;
    padding-block: 1.5rem 2rem;
  }

  .pdp-works-with__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    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-works-with--light .pdp-works-with__inner {
    background-color: #f8f7f4;
    color: #1a1a2e;
  }

  .pdp-works-with--dark .pdp-works-with__inner {
    background-color: #1a1a2e;
    color: #f8f7f4;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .pdp-works-with--accent .pdp-works-with__inner {
    background-color: #00b140;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.15);
  }

  .pdp-works-with__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
  }

  /* Logos area — overflow hidden for marquee */
  .pdp-works-with__logos-area {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* Track — holds all logo groups, animated via JS */
  .pdp-works-with__track {
    display: flex;
    width: max-content;
    will-change: transform;
  }

  /* Animation is now driven by JS via element.animate() — no CSS keyframes needed */

  /* Logo groups */
  .pdp-works-with__logos {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .pdp-works-with__logo-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
  }

  .pdp-works-with__logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: auto;
    min-width: 64px;
    flex-shrink: 0;
    position: relative;
    padding-inline: 1.25rem;
  }

  .pdp-works-with--dark .pdp-works-with__logo-wrap {
    background: rgba(255, 255, 255, 0.08);
  }

  .pdp-works-with--accent .pdp-works-with__logo-wrap {
    background: rgba(255, 255, 255, 0.15);
  }

  .pdp-works-with__logo-img {
    height: 24px;
    width: 24px;
    padding: 14px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    object-fit: contain;
    filter: grayscale(100%);
    box-sizing: content-box;
    opacity: 0.6;
    transition: filter 0.2s ease, opacity 0.2s ease;
  }

  .pdp-works-with__logo-wrap:hover .pdp-works-with__logo-img {
    filter: grayscale(0%);
    opacity: 1;
  }

  .pdp-works-with--dark .pdp-works-with__logo-img {
    filter: grayscale(100%) brightness(2);
  }

  .pdp-works-with--dark .pdp-works-with__logo-wrap:hover .pdp-works-with__logo-img {
    filter: grayscale(0%) brightness(1.5);
    opacity: 1;
  }

  .pdp-works-with__logo-text {
    font-size: 0.6875rem;
    font-weight: 500;
    color: inherit;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0.7;
  }

  .pdp-works-with__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
  }

  .pdp-works-with--light .pdp-works-with__cta { color: #1a1a2e; }
  .pdp-works-with--dark .pdp-works-with__cta { color: #f8f7f4; }
  .pdp-works-with--accent .pdp-works-with__cta { color: #fff; }

  .pdp-works-with__cta:hover { opacity: 0.7; }

  @media screen and (max-width: 749px) {
    .pdp-works-with__inner {
      flex-wrap: wrap;
      gap: 0.75rem;
      padding: 1rem;
    }

    .pdp-works-with__title {
      width: 100%;
      text-align: center;
    }

    .pdp-works-with__logos-area { width: 100%; }
    .pdp-works-with__logo-img { height: 18px; }
    .pdp-works-with__logo-wrap { padding-inline: 0.5rem; width: auto; min-width: 48px; }
    .pdp-works-with__cta { width: 100%; justify-content: center; }
  }

  /* prefers-reduced-motion handled in JS */
/* END_SECTION:pdp-works-with */

/* START_SECTION:popup-modal (INDEX:81) */
/* ── 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:82) */
.press-bar {
    display: block;
    background-color: #f0efea;
    padding-block: 3rem;
  }

  /* 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;
    color: var(--color-text-muted, #4b4b4b);
  }

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

  /* Gradient fades */
  .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;
  }

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

    .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-declarations (INDEX:83) */
.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:84) */
.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:85) */
/* ── 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;
  will-change: transform;
}

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

.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;
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.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:86) */
/* ── products-bundle ──────────────────────────────────────── */
products-bundle { display: block; }

.pb {
  background: var(--color-background, #f5f5f0);
  padding-top: 62px;
  padding-bottom: 56px;
}

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

/* 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);
}

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

/* 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-foreground, #1a1a2e);
  border-color: var(--color-foreground, #1a1a2e);
  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;
}

/* 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, #51BD7A);
  color: #fff;
  border-color: var(--color-brand-green, #51BD7A);
}

.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%;
  aspect-ratio: 1;
  border-radius: var(--radius-card, 1rem);
  overflow: visible;
}

.pb__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card, 1rem);
  display: block;
}

.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: #1a1a2e;
  border-color: #1a1a2e;
  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: rgba(245, 245, 245, 0.92);
  border-color: #f5f5f5;
  color: #111118;
  transform: translate(-50%, -50%) scale(1.12);
}

/* Mobile — stacked, image above list */
@media (max-width: 749px) {
  .pb {
    padding-top: 2.5rem;
    padding-bottom: 2.25rem;
  }

  .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:87) */
/* ── PSU Calculator — Nanoleaf Brand Redesign ── */
.psu-calc {
  --psu-green: #4aaf47;
  --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:88) */
/* ═══════════════════════════════════════
   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; }
.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-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:89) */
/* ═══════════════════════════════════════
   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-accent, #2563eb);
  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:90) */
/* ── 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%);
  animation: saleBannerSlideDown 0.4s ease forwards;
  will-change: transform;
}

.sale-banner[hidden] { display: none; }

.sale-banner.sale-banner--closing {
  animation: saleBannerSlideUp 0.3s ease forwards;
}

@keyframes saleBannerSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes saleBannerSlideUp {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

.sale-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 48px;
  max-width: 1400px;
  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:91) */
.sbc { padding-block: 2.5rem; }
.sbc__container { max-width: 72rem; margin: 0 auto; }
.sbc__header { display: flex; align-items: center; justify-content: space-between; margin-block-end: 1.5rem; }
.sbc__header .sbc__heading { margin-block-end: 0; }
.sbc__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-foreground);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.sbc__view-all:hover { opacity: 0.65; }
.theme-dark .sbc__view-all { color: #f5f5f5; }
.sbc__heading {
  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);
  margin-block-end: 1.5rem;
}
.sbc__tabs { display: flex; gap: 0.5rem; margin-block-end: 1.5rem; flex-wrap: wrap; justify-content: center; }
.sbc__tab {
  appearance: none;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  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: #1a1a2e; }
.sbc__tab--active { background: #1a1a2e; color: #fff; border-color: #1a1a2e; }

.sbc__panel { display: none; }
.sbc__panel--active { display: block; }

.sbc__grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }

.sbc__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-foreground);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  width: 90px;
}
.sbc__card:hover { transform: translateY(-2px); }
.sbc__card:hover .sbc__card-icon { box-shadow: 0 4px 16px rgb(0 0 0 / 0.1); }

.sbc__card-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-card, 0.75rem);
  transition: box-shadow 0.25s ease;
  overflow: hidden;
  flex-shrink: 0;
}
.sbc__card-icon img { width: 28px; height: 28px; object-fit: contain; }
.sbc__card-icon svg { width: 28px; height: 28px; }

.sbc__card-info { padding-top: 0.5rem; text-align: center; }
.sbc__card-name { font-size: 0.6875rem; font-weight: 600; color: var(--color-foreground); margin: 0; line-height: 1.3; }
.sbc__card-count { font-size: 0.625rem; color: #888; margin: 0.125rem 0 0; line-height: 1.3; }

@media screen and (max-width: 749px) {
  .sbc__tabs { gap: 0.375rem; margin-block-end: 1.25rem; justify-content: flex-start; }
  .sbc__tab { font-size: 0.75rem; padding: 0.4rem 1rem; }
  .sbc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; justify-items: start; }
  .sbc__card { width: auto; align-items: flex-start; }
  .sbc__card-info { text-align: left; }
  .sbc__card-name { font-size: 0.75rem; }
  .sbc__card-count { font-size: 0.6875rem; }
}

/* Dark mode */
.theme-dark .sbc__heading { color: #f5f5f5; }
.theme-dark .sbc__tab { background: transparent; border-color: rgba(255,255,255,0.15); color: #ccc; }
.theme-dark .sbc__tab--active { background: #fff; color: #1a1a2e; border-color: #fff; }
.theme-dark .sbc__card-icon { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.theme-dark .sbc__card-name { color: #f5f5f5; }
.theme-dark .sbc__card-count { color: #999; }
/* END_SECTION:shop-by-category */

/* START_SECTION:shop-the-feed (INDEX:92) */
.stf {
  --stf-text: #1a1a2e;
  --stf-muted: rgba(26, 26, 46, 0.6);
  --stf-link: #51BD7A;
  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: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 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; }
.stf__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stf-link);
  margin-bottom: 0.6rem;
}
.stf__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.5rem;
  letter-spacing: -0.01em;
}
.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: 999px;
  background: var(--stf-text);
  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--bg-dark .stf__follow { background: #ffffff; color: #1a1a2e; }
.stf__follow:hover { transform: translateY(-1px); }

/* 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:94) */
/* ── HP Split Panel ── */
.split-panel {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}

.split-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.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: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.split-panel__panel--dark { color: #fff; }

.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__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%);
}

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

.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;
  }
  .split-panel__content {
    padding: var(--space-2xl) var(--space-2xl) var(--space-3xl);
  }
}

/* ── 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; }
}
/* END_SECTION:split-panel */

/* START_SECTION:story-card (INDEX:95) */
/* ── 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;
  background: {% if text_color == 'light' %}#1a1a2e{% else %}#f5f4f0{% endif %};
  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);
  animation: scPulse 2s ease-in-out infinite;
  z-index: -1;
}
@keyframes scPulse {
  0%   { transform: scale(0.85); opacity: 0.7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(0.85); opacity: 0; }
}
.story-card__pin:hover .story-card__pin-dot,
.story-card__pin--active .story-card__pin-dot {
  background: #51BD7A;
  box-shadow: 0 0 0 4px rgba(81, 189, 122, 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: #51BD7A; }
.story-card__pin:focus-visible { outline: none; }
.story-card__pin:focus-visible .story-card__pin-dot {
  box-shadow: 0 0 0 4px rgba(81, 189, 122, 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(280px, 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: 1rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: none;
  flex-direction: column;
  gap: 0.625rem;
  pointer-events: auto;
  color: #1a1a2e;
}
.story-card__product-card--active { display: flex; }

.story-card__product-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.story-card__product-img {
  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-top: 0.625rem; }
.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: #51BD7A;
  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__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__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; }

@media (min-width: 768px) {
  .story-card {
    min-height: 480px;
  }
}
@media (min-width: 1440px) {
  .story-card { margin-block: var(--space-lg, 2rem); }
}
/* END_SECTION:story-card */

/* START_SECTION:student-eligible-products (INDEX:96) */
.sd-products { padding: 4rem 0; text-align: center; }
.sd-products__inner { max-width: 42rem; margin: 0 auto; }
.sd-products__heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.sd-products__desc { font-size: 0.9375rem; color: #666; margin: 0 0 2rem; line-height: 1.6; }
.sd-products__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-block-end: 2rem; }
.sd-products__tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem;
  background: #fff; border: 1px solid #e5e5e5; border-radius: var(--radius-button, 999px); color: #1a1a2e;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sd-products__tag:hover { border-color: #4aaf47; box-shadow: 0 0 0 1px #4aaf4730; }
.sd-products__cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: #fff; font-size: 0.9375rem; font-weight: 700;
  padding: 0.875rem 2rem; border-radius: var(--radius-button, 999px);
  text-decoration: none; transition: filter 0.2s, transform 0.15s;
}
.sd-products__cta:hover { filter: brightness(0.9); transform: translateY(-1px); }
@media (max-width: 749px) { .sd-products { padding: 3rem 0; } }
/* END_SECTION:student-eligible-products */

/* START_SECTION:student-how-it-works (INDEX:97) */
.sd-steps { padding: 4rem 0; }
.sd-steps__inner { max-width: 56rem; margin: 0 auto; }
.sd-steps__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin: 0 0 2.5rem;
}
.sd-steps__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.sd-steps__card { border-radius: var(--radius-card, 12px); padding: 2rem 1.5rem; text-align: center; }
.sd-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; color: #fff;
  font-weight: 800; font-size: 1rem; border-radius: 50%; margin-block-end: 1rem;
}
.sd-steps__title { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.5rem; }
.sd-steps__desc { font-size: 0.875rem; color: #666; line-height: 1.55; margin: 0; }
@media (max-width: 749px) {
  .sd-steps__grid { grid-template-columns: 1fr; }
  .sd-steps { padding: 3rem 0; }
}
/* END_SECTION:student-how-it-works */

/* START_SECTION:testimonials (INDEX:98) */
.ts {
  --ts-quote: #1a1a2e;
  --ts-muted: rgba(26, 26, 46, 0.62);
  --ts-divider: rgba(26, 26, 46, 0.1);
  --ts-link: #51BD7A;
  --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 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
@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:user-guide-grid (INDEX:99) */
.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 */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:brand-gradient (INDEX:102) */
.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:103) */
.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:105) */
.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:mega-cards-mobile (INDEX:114) */
.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: #f5f5f0; 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:116) */
/* 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:pdp-accordion-tab (INDEX:122) */
/* ── 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:123) */
/* ---- 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, #f5f5f0));
  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, #f5f5f0);
  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-notify-form (INDEX:124) */
/* ─── 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, #51BD7A);
  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, #51BD7A);
  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, #51BD7A) 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, #51BD7A) 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, #51BD7A) 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-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: #2d8a23; color: #fff; }
.theme-dark .pdp-hero__notify-btn:hover { background: #248a1a; }
.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.8); 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;
}
/* END_SNIPPET:pdp-notify-form */

/* START_SNIPPET:pdp-variant-picker (INDEX:126) */
/* ---- 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: all 200ms ease;
  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;
}

/* ── 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 {
  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 #51BD7A;
  outline-offset: 2px;
}
.pdp-hero__shape-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 88px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f7f7f8, #efeff1);
  overflow: hidden;
}
.pdp-hero__shape-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  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: 72px; 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:127) */
/* ── 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:128) */
/* ═══════════════════════════════════════════════
   NF-CARD — Unified product card system
   Sizes: L (section) · M (mega menu) · S (cart upsell)
   Schemes: light · dark (wellness)
   ═══════════════════════════════════════════════ */

/* ── Base — unboxed clean card ── */
.nf-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: opacity 0.2s ease;
}

/* ── Image — all corners rounded, consistent bg across all instances ── */
.nf-card__img-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-secondary, #f5f4f0);
  border: 1px solid var(--color-border, #eee);
  border-radius: 0.75rem;
}
.nf-card__img-wrap--portrait {
  aspect-ratio: 3 / 4;
}

.nf-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nf-card--zoom:hover .nf-card__img {
  transform: scale(1.04);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Badge ── */
.nf-card__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;
  letter-spacing: 0.02em;
}

.nf-card__badge--sale { background: #e63946; }
.nf-card__badge--bestseller { background: #3b82f6; }
.nf-card__badge--new { background: #8b5cf6; }
.nf-card__badge--sold-out { background: #ef4444; }

/* ── Info — clean, no box ── */
.nf-card__info {
  padding: 0.625rem 0.125rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}
.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.45); }
.nf-card__tags {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.nf-card__tag {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-button);
  background: #e4e3de;
  color: #555;
  line-height: 1.4;
}
.nf-card--dark .nf-card__tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }

.nf-card__title {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: #1a1a2e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  transition: color 0.2s ease;
}

/* ── Review line ── */
.nf-card__review {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nf-card__stars {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.nf-card__stars svg {
  flex-shrink: 0;
}

.nf-card__review-count {
  font-size: 11px;
  color: #71717a;
  line-height: 1;
}

/* ── Price ── */
.nf-card__price-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.nf-card__price {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.nf-card__compare {
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
}

/* ── Actions container — stacked vertically, Quick View on top ── */
.nf-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.nf-card__actions .nf-card__add-btn {
  margin-top: 0;
  width: 100%;
  order: 2;
}
.nf-card__actions .nf-card__quick-view {
  width: 100%;
  margin-top: 0;
  order: 1;
}
@media (max-width: 749px) {
  .nf-card__actions .nf-card__quick-view { display: none; }
}

/* ── Add button — full width, animated + / text ── */
/* Spinner uses global @keyframes spin */
.nf-card__add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin-top: 0.5rem;
  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;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  line-height: 1;
  transition: opacity 0.2s ease;
}
.nf-card__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;
}
.nf-card__add-text {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Desktop: show + on hover */
@media (hover: hover) {
  .nf-card__add-btn:hover .nf-card__add-plus {
    max-width: 1.25rem;
    opacity: 1;
    margin-right: 0.25rem;
  }
}
/* Mobile: always show + */
@media (hover: none) {
  .nf-card__add-plus {
    max-width: 1.25rem;
    opacity: 1;
    margin-right: 0.25rem;
  }
}
.nf-card__add-btn:hover { opacity: 0.8; }
.nf-card__add-btn.is-adding { pointer-events: none; opacity: 0.85; }
.nf-card__add-btn.is-adding .nf-card__add-text,
.nf-card__add-btn.is-adding .nf-card__add-plus { display: none; }
.nf-card__add-btn.is-adding .nf-card__add-loader { display: inline-flex !important; }
.nf-card__add-btn.is-added { background: #22c55e; pointer-events: none; }
.nf-card__add-loader[hidden] { display: none; }


/* ═══════════════════════════════════════
   SIZE: L (section-level cards)
   ═══════════════════════════════════════ */
.nf-card--l {
  width: 200px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

@media (max-width: 749px) {
  .nf-card--l { width: 180px; }
}

/* ═══════════════════════════════════════
   SIZE: M (mega menu cards)
   ═══════════════════════════════════════ */
.nf-card--m {
  width: 180px;
  flex-shrink: 0;
  padding: 0;
}

.nf-card--m .nf-card__info {
  padding: 0.5rem 0.625rem;
}

.nf-card--m .nf-card__title {
  -webkit-line-clamp: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

.nf-card--m:hover .nf-card__title {
  color: #3b82f6;
}

/* ═══════════════════════════════════════
   SIZE: S (cart upsell cards)
   ═══════════════════════════════════════ */
.nf-card--s {
  width: 160px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nf-card--s .nf-card__info {
  padding: 0.375rem 0.5rem 0.25rem;
}

.nf-card--s .nf-card__title {
  font-size: 12px;
}

.nf-card--s .nf-card__price {
  font-size: 14px;
}

.nf-card--s .nf-card__badge {
  font-size: 8px;
  padding: 1px 6px;
}

@media (max-width: 749px) {
  .nf-card--s { width: 145px; }
  .nf-card--s .nf-card__info { padding: 0.25rem 0.375rem; }
}

/* ═══════════════════════════════════════
   SCHEME: Dark (wellness)
   ═══════════════════════════════════════ */
.nf-card--dark {
  background: transparent;
  border-color: transparent;
}

.nf-card--dark:hover {
  border-color: transparent;
}

.nf-card--dark .nf-card__img-wrap {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.06);
}

.nf-card--dark .nf-card__title {
  color: var(--card-dark-text, #f5f5f5);
}

.nf-card--dark .nf-card__price {
  color: var(--card-dark-text, #f5f5f5);
}

/* Stars stay orange in dark mode — no override needed */
.nf-card--dark .nf-card__review-count {
  color: rgba(255,255,255,0.55);
}

.nf-card--dark .nf-card__compare {
  color: rgba(255,255,255,0.4);
}

.nf-card--dark:hover .nf-card__title {
  color: var(--card-dark-accent, #fbbf24);
}

.nf-card--dark .nf-card__add-btn {
  background: #f5f5f5;
  color: #1a1a1a;
}

.nf-card--dark .nf-card__add-btn:hover {
  background: #fff;
}

/* ── Quick View button ── */
.nf-card__quick-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 1rem;
  min-height: 2.25rem;
  background: transparent;
  color: #1a1a2e;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: var(--radius-button);
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: border-color 0.2s, opacity 0.2s;
}
.nf-card__quick-view:hover { border-color: #1a1a2e; opacity: 0.8; }
.nf-card--dark .nf-card__quick-view { color: #f5f5f5; border-color: rgba(255,255,255,0.2); }
.nf-card--dark .nf-card__quick-view:hover { border-color: #f5f5f5; }
@media (max-width: 749px) { .nf-card__quick-view { display: none; } }
/* END_SNIPPET:product-card */

/* START_SNIPPET:product-rating (INDEX:129) */
.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:130) */
/* ═══════════════════════════════════════════════
   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: #22c55e;
  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:tech-specs-modal (INDEX:133) */
.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 */