/** Shopify CDN: Minification failed

Line 10566:36 Expected identifier but found whitespace
Line 10566:38 Unexpected "{"
Line 10566:47 Expected ":"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:1) */
.announcement-bar {
  background: #262320;
  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:cart-drawer (INDEX:4) */
/* ══════════════════════════════════════════
   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, 'Inter', sans-serif);
  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: #262320; margin: 0; }
.nf-cart-drawer__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: #262320; 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: #F3F1E9; border: none; cursor: pointer;
  color: #555; transition: all 0.15s;
}
.nf-cart-drawer__close:hover { background: #eee; color: #262320; }

/* ── 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, #E16C47, #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: #E16C47; }
.nf-cart-drawer__shipping-bar.is-qualified .nf-cart-drawer__shipping-text { color: #E16C47; }
.nf-cart-drawer__shipping-timer {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: auto;
  color: #E16C47;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.nf-cart-drawer__shipping-timer svg { color: #E16C47; }

/* ── 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;
  /* Horizontal scroll on narrow screens instead of wrapping/clipping */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nf-cart-drawer__empty-trust::-webkit-scrollbar { display: none; }
.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; flex-shrink: 0;
}
.nf-cart-drawer__empty-trust-sep {
  width: 1px; height: 12px; background: #ddd; margin: 0 10px; flex-shrink: 0;
}

/* ── Empty State — simple centered message + CTA ── */
.nf-cart-drawer__empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  box-sizing: border-box;
}
.nf-cart-drawer__empty[hidden] { display: none; }
.nf-cart-drawer__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 320px;
  width: 100%;
}
.nf-cart-drawer__empty-icon {
  margin-bottom: 6px;
  opacity: 0.9;
}
.nf-cart-drawer__empty-heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: #262320;
  letter-spacing: -0.01em;
  margin: 0;
}
.nf-cart-drawer__empty-sub {
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.6);
  margin: 0 0 12px;
}
.nf-cart-drawer__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: #E16C47;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.nf-cart-drawer__empty-cta:hover {
  background: #c9563a;
  transform: translateY(-1px);
  text-decoration: none;
}

/* ── 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, #262320);
  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: #262320;
}
.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: #262320; color: #262320; }
.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: #262320; 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: #262320;
  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: #E16C47; 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: #262320;
  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: #262320;
}
.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, #262320); 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;
}
/* `.is-updating` shows a soft overlay + spinner — but ONLY if the network
   request takes longer than ~250ms. Fast responses never see the overlay
   (the optimistic qty UI gives instant feedback). The trick: opacity 0 by
   default, and the transition adds opacity 1 with a 250ms delay when
   `.is-updating` is present. If the class is removed before 250ms (because
   the response landed quickly) the spinner never becomes visible. */
.nf-cart-drawer__item.is-updating {
  pointer-events: none;
}
.nf-cart-drawer__item::after,
.nf-cart-drawer__item::before {
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.nf-cart-drawer__item.is-updating::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.7);
  z-index: 3;
  opacity: 1;
  transition: opacity 0.15s ease 0.25s;
}
.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: #262320;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.15s ease 0.25s;
}
/* Smooth removal preview: dim the row slightly until the real render
   collapses it. Avoids the abrupt "row gone" jump after a remove click. */
.nf-cart-drawer__item.is-removing {
  opacity: 0.4;
  transform: translateX(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}
@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: 6px;
  margin: 12px 20px 16px;
  padding: 14px 24px;
  font-size: 0.9375rem; font-weight: 600;
  color: #fff;
  background: #E16C47;
  text-decoration: none;
  border: none;
  border-radius: 9999px;
  transition: background 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.nf-cart-drawer__discover-view-all:hover {
  background: #c9563a;
  transform: translateY(-1px);
  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: #F3F1E9;
  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: #262320;
  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: #E16C47; }
/* 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: 13px; font-weight: 600; color: #262320; }
.nf-cart-drawer__item-compare {
  font-size: 13px; font-weight: 400; color: rgba(38,35,32,0.45); text-decoration: line-through;
}
.nf-cart-drawer__item-compare[hidden] { display: none; }
.nf-cart-drawer__item-subscription {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.3;
  color: #E16C47;
  font-weight: 500;
}
.nf-cart-drawer__item-subscription[hidden] { display: none; }
.nf-cart-drawer__item-subscription svg { flex-shrink: 0; }

.nf-cart-drawer__item-save-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 7px;
  background: #E16C47; 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: #E16C47; 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: #262320; }

/* ── 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, #262320);
  transition: background 0.15s; user-select: none;
}
.nf-cart-drawer__qty-btn:hover { background: var(--color-surface, #F3F1E9); }
.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, #262320);
  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 — tight stack of price/savings/shipping rows */
.nf-cart-drawer__summary {
  padding: 0;
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 10px;
}
.nf-cart-drawer__summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #6b665d;
  line-height: 1.35;
  padding: 1px 0;
}
/* Subtotal row gets a touch more weight + slight spacing above */
.nf-cart-drawer__summary-row:not([class*="--"]):not([hidden]) {
  margin-top: 2px;
}
.nf-cart-drawer__summary-row:not([class*="--"]):not([hidden]) span:first-child {
  font-weight: 600; color: #262320; font-size: 13px;
}
.nf-cart-drawer__summary-row:not([class*="--"]):not([hidden]) span:last-child {
  font-weight: 700; color: #262320; font-size: 14px;
}
/* Compare-at row */
.nf-cart-drawer__summary-row--compare {
  font-size: 11.5px; 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: #E16C47; font-weight: 600;
}
.nf-cart-drawer__summary-row--savings span:first-child {
  color: #E16C47; font-size: 11.5px;
}
/* Shipping row */
.nf-cart-drawer__summary-row--shipping {
  font-size: 11.5px;
}
.nf-cart-drawer__summary-row--shipping span:last-child {
  font-size: 10.5px; 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: #E16C47; 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 rgba(45, 138, 35, 0.25);
  position: relative;
  overflow: hidden;
}
.nf-cart-drawer__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: ctaShimmer 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes ctaShimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.nf-cart-drawer__checkout-btn:hover {
  box-shadow: 0 4px 20px rgba(45, 138, 35, 0.44);
  transform: translateY(-1px);
  filter: brightness(0.95);
  text-decoration: none;
}
.nf-cart-drawer__checkout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 138, 35, 0.25);
}
.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 — each check+label stays grouped when row wraps */
.nf-cart-drawer__guarantee {
  display: flex; align-items: center; justify-content: center;
  gap: 6px 10px; padding: 6px 0 0;
  font-size: 10px; color: #888; flex-wrap: wrap;
}
.nf-cart-drawer__guarantee-item {
  display: inline-flex; align-items: center; gap: 4px;
}
.nf-cart-drawer__guarantee-item svg { flex-shrink: 0; }
.nf-cart-drawer__guarantee-sep { color: #ccc; }

/* ── 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: #262320;
  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: #262320;
  transition: all 0.15s;
  padding: 0; flex-shrink: 0;
}
.nf-cart-drawer__upsell-arrow:hover {
  background: #262320; color: #fff; border-color: #262320;
}
.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: #262320; 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; }
}

/* ─── Auto-gift line-item styling: keep standard line layout but visually
   mark the price as FREE with a strikethrough $25 (instead of "$0.00"). ─── */
.nf-cart-drawer__item[data-item-auto-gift="true"] [data-item-price] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nf-cart-drawer__item[data-item-auto-gift="true"][data-item-variant-id="46046025154799"] [data-item-price]::before,
.nf-cart-drawer__item[data-item-auto-gift="true"][data-item-variant-id="50220091834607"] [data-item-price]::before {
  content: "$25";
  font-size: 11px;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
}
.nf-cart-drawer__item[data-item-auto-gift="true"] [data-item-price] {
  font-size: 0; /* hide the actual $0.00 text */
}
.nf-cart-drawer__item[data-item-auto-gift="true"] [data-item-price]::after {
  content: "FREE";
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #2F8B5C;
  padding: 2px 7px;
  border-radius: 9999px;
}

/* ─── Cart items loading skeleton (shown when adding to empty cart) ─── */
.nf-cart-drawer__items-skeleton {
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.nf-cart-drawer__items-skeleton-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.nf-cart-drawer__items-skeleton-img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #ECE7DA;
  animation: skeletonPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.nf-cart-drawer__items-skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
}
.nf-cart-drawer__items-skeleton-line {
  height: 10px;
  border-radius: 4px;
  background: #ECE7DA;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.nf-cart-drawer__items-skeleton-line--md { width: 75%; }
.nf-cart-drawer__items-skeleton-line--sm { width: 50%; height: 8px; }
.nf-cart-drawer__items-skeleton-line--xs { width: 35%; height: 8px; }
.nf-cart-drawer__items-skeleton-label {
  margin: 8px auto 0;
  text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #6E6960;
}

/* 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: #262320;
  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: #E16C47; 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: #262320;
  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: 12px; font-weight: 600; color: #262320; margin: 0;
}
.nf-cart-drawer__upsell-card-compare {
  font-size: 12px; font-weight: 400; color: rgba(38,35,32,0.45); 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: #262320; }
.nf-cart-drawer__upsell-card-sub-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #E16C47;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
.nf-cart-drawer__upsell-card-sub-label[hidden] { display: none; }
.nf-cart-drawer__upsell-card-review {
  display: flex; align-items: center; gap: 3px; color: #262320; 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, #262320); 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: #E16C47; pointer-events: none;
}
.nf-cart-drawer__upsell-spinner {
  animation: spin 0.6s linear infinite;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .nf-cart-drawer__checkout-btn::before { animation: none; }
  .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:6) */
.cl-benefits {
  padding-block: 4rem;
  overflow: hidden;
  background: var(--section-bg, #F3F1E9);
  --cl-bg: var(--section-bg, #F3F1E9);
}
.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, #262320);
  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: #F3F1E9;
}
.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, #262320);
  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: #262320;
  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, #262320);
}
.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-hero (INDEX:7) */
.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 brand gradient */
.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, #1a1816 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__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:8) */
.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, #F3F1E9);
  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, #262320);
}
.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, #262320);
}
.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, #262320);
}
.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, #262320);
}
.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:9) */
.cl-reviews {
    padding: 72px 0 80px;
  }

  .cl-reviews__header {
    text-align: center;
    margin-bottom: 40px;
  }

  .cl-reviews__heading {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--color-text, #262320);
    margin: 0 0 8px;
  }

  .cl-reviews__subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text, #262320);
    opacity: 0.7;
    margin: 0;
  }
/* END_SECTION:collection-reviews */

/* START_SECTION:collection-seo-content (INDEX:10) */
.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, #262320);
  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, #262320);
  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, #262320); 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: #262320;
  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: #262320;
}
.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:11) */
.cl-spotlights {
  padding-block: 4rem;
  background: #F3F1E9;
}
.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, #262320);
  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: #F3F1E9;
}
.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, #262320);
  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, #262320);
}
.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, #262320);
  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:12) */
.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: #262320;
  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:13) */
.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, #262320);
  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: #262320;
  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: #262320;
}
.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: #262320;
  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;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: inherit;
  color: #262320;
  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: #262320;
  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: #262320;
  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: #262320;
}
.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: #262320;
  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: #262320; }
.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: #262320; 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:14) */
/* ══════════════════════════════════════
   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: #262320;
  color: #fff;
  border-color: #262320;
}
.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: #262320;
  color: #fff;
  border-color: #262320;
}

/* 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: #262320;
  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: #262320;
  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: #262320;
  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-trust (INDEX:15) */
.cl-trust {
  padding-block: 3rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  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, #262320);
}
.cl-trust--dark .cl-trust__icon { color: #f5f5f5; }
.cl-trust__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
  margin: 0;
  line-height: 1.3;
}
.cl-trust--dark .cl-trust__title { color: #f5f5f5; }
.cl-trust__desc {
  font-size: 0.8125rem;
  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:16) */
.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, #262320);
  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, #262320);
  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:17) */
.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: #262320;
  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: #262320;
}
.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: #262320;
  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: #E16C47;
  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: #262320;
  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__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:footer (INDEX:19) */
/* ── Footer Base ── */
  .footer-wrapper {
    background: #262320;
    color: #fff;
    font-family: inherit;
  }

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

  /* ── Top: Newsletter + Contact ── */
  .nf-footer__top {
    padding: 3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nf-footer__top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .nf-footer__newsletter-heading {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.2;
  }

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

  .nf-footer__newsletter-form { max-width: 480px; }

  .nf-footer__newsletter-field {
    display: flex;
    gap: 0.5rem;
  }

  .nf-footer__newsletter-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: inherit;
    transition: border-color 200ms ease;
  }

  .nf-footer__newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); }

  .nf-footer__newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(45, 138, 35, 0.4);
    border-color: #E16C47;
  }

  .nf-footer__newsletter-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.75rem;
    background: #2e2e3a;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 200ms ease;
  }

  .nf-footer__newsletter-btn:hover { opacity: 0.9; }

  /* Legal disclaimer */
  .nf-footer__newsletter-legal {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0.625rem 0 0;
    line-height: 1.5;
    max-width: 480px;
  }
  .nf-footer__newsletter-legal-link {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: underline;
    text-underline-offset: 1px;
  }
  .nf-footer__newsletter-legal-link:hover {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Klaviyo status */
  .nf-footer__newsletter-status {
    font-size: 0.75rem;
    margin: 0.5rem 0 0;
    line-height: 1.4;
  }
  .nf-footer__newsletter-status[hidden] { display: none; }
  .nf-footer__newsletter-status--success { color: #E16C47; }
  .nf-footer__newsletter-status--error { color: #E16C47; }

  /* ── Contact Card ── */
  .nf-footer__contact-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.75rem;
    padding: 1.25rem;
  }

  .nf-footer__contact-heading { font-size: 0.875rem; font-weight: 600; margin: 0 0 1rem; color: #fff; }

  .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(255, 255, 255, 0.05); }

  .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(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7);
    flex-shrink: 0; transition: background 200ms ease;
  }

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

  .nf-footer__contact-text { display: flex; flex-direction: column; gap: 0.125rem; }
  .nf-footer__contact-label { font-size: 0.625rem; color: rgba(255, 255, 255, 0.4); line-height: 1; }
  .nf-footer__contact-value { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); 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.625rem 1.5rem;
    background: #E16C47; color: #fff; border-radius: var(--radius-button);
    font-size: 0.8125rem; font-weight: 500; text-decoration: none;
    transition: all 200ms ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .nf-footer__live-chat-btn:hover { background: #256e1d; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); }
  .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(255, 255, 255, 0.1); }
  .nf-footer__contact-hours { font-size: 0.625rem; color: rgba(255, 255, 255, 0.3); margin: 0; text-align: center; }

  /* ── Middle: Column Grid ── */
  .nf-footer__middle { padding: 3rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }

  .nf-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }

  .nf-footer__col--brand { grid-column: 1 / -1; }

  .nf-footer__logo-img { height: 2.5rem; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); }
  .nf-footer__tagline { font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin: 0 0 1rem; line-height: 1.6; }
  .nf-footer__social { display: flex; gap: 0.75rem; }

  .nf-footer__social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%;
    background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6);
    transition: background 200ms ease, color 200ms ease;
  }

  .nf-footer__social-link:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
  .nf-footer__col-heading { font-size: 0.875rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin: 0 0 1rem; }

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

  .nf-footer__link {
    font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); 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: #fff; transition: width 0.25s ease;
  }

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

  /* ── Payment Badges (inside last column) ── */
  .nf-footer__payments-wrap { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .nf-footer__payments-label { display: block; font-size: 0.625rem; color: rgba(255, 255, 255, 0.3); margin-bottom: 0.5rem; }
  .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 ── */
  .nf-footer__bottom { padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }

  .nf-footer__bottom-row { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
  .nf-footer__copyright { font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); }
  .nf-footer__legal { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.35); flex-wrap: wrap; justify-content: center; }
  .nf-footer__legal-dot { color: rgba(255, 255, 255, 0.25); user-select: none; }
  .nf-footer__legal-link { color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color 200ms ease; }
  .nf-footer__legal-link:hover { color: rgba(255, 255, 255, 0.7); }

  /* ── 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:20) */
/* ══════════════════════════════════════════
   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: 500; 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: #E16C47; }
.nf-header__nav-list:hover .nf-header__nav-link--sale:hover { color: #E16C47; }
.nf-header__nav-link--mega-active { opacity: 1 !important; color: #1a1a1a; }
.nf-header__nav-link--mega-active.nf-header__nav-link--sale { color: #E16C47; }

.nf-header__sale-badge { position: absolute; top: -8px; right: -22px; background: #E16C47; 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; }
.nf-header__quiz-cta { display: inline-block; background: var(--color-accent, #E16C47); color: #F3F1E9; border-radius: 9999px; padding: 0.45em 1.2em; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; transition: opacity 0.2s ease; font-family: var(--font-heading, inherit); }
.nf-header__quiz-cta:hover { opacity: 0.85; }
@media (max-width: 767px) { .nf-header__quiz-cta { display: none; } }
.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: 500; text-transform: none; letter-spacing: normal; }
.nf-header__flag { width: 20px; height: 14px; border-radius: 2px; object-fit: cover; }
.nf-header__country-code { font-size: 11px; font-weight: 500; }
.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: #E16C47; 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: #F3F1E9; }
.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: 500; 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: #262320; }
/* 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: #262320; 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: 500; 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: #262320; color: #fff; border-color: #262320; }

/* ── Wellness dark mode ── */
.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; }

/* 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, #F3F1E9, transparent); opacity: 0; }
.nf-mega__scroll-fade--right { right: 0; background: linear-gradient(to left, #F3F1E9, transparent); }
.nf-mega__scroll-fade.is-hidden { opacity: 0; }
/* Wellness dark mode fades */
.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: #262320; }
.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; }
/* Wellness dark mode arrows */
.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: #262320; 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: #E16C47; }
.nf-mega__product-name { font-size: 13px; font-weight: 600; color: #262320; 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: #262320; 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: #262320; }
.nf-mega__product-review svg { flex-shrink: 0; }
.nf-mega__product-review span { font-size: 11px; color: #71717a; line-height: 1; }
.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: 500; color: #262320; 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: 500; background: #262320; 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); }

/* ── Quiz card inside mega menu ── */
.nf-mega__quiz-card { display: flex; align-items: center; gap: 12px; background: var(--color-yellow, #F3E891); border-radius: 12px; padding: 14px 18px; margin-top: 16px; text-decoration: none; transition: opacity 0.2s ease; }
.nf-mega__quiz-card:hover { opacity: 0.88; }
.nf-mega__quiz-card-icon { width: 32px; height: 32px; flex-shrink: 0; opacity: 0.7; }
.nf-mega__quiz-card-text { display: flex; flex-direction: column; gap: 2px; }
.nf-mega__quiz-card-heading { font-family: var(--font-heading, inherit); font-weight: 600; font-size: 0.85rem; color: #262320; letter-spacing: -0.01em; }
.nf-mega__quiz-card-link { font-size: 0.78rem; color: #262320; opacity: 0.75; font-weight: 500; }

/* ── 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: 999px; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.nf-mega__filter-pill:hover { background: #262320; color: #fff; border-color: #262320; }
.nf-mega__filter-pill--active { background: #262320; color: #fff; border-color: #262320; }

/* ── BUNDLES MEGA ── */
.nf-mega__bundles-layout { display: flex; min-height: 380px; background: #F3F1E9; }
.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: #262320; 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: #262320; }
.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: #262320; 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: #262320; 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: #262320; 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: #262320; 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: #262320; 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: #262320; 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: #F3F1E9; 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: #262320; transition: width 0.25s ease; }
.nf-mega__support-link:hover { color: #262320; }
.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: #262320; 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: #F3F1E9; }
.nf-mega__support-card-icon { width: 36px; height: 36px; border-radius: 10px; background: #F3F1E9; 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: #262320; }
.nf-mega__support-chat-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px 24px; background: #4aaf47; 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: #3d9a3b; box-shadow: 0 4px 12px rgba(74,175,71,0.25); }
.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; }
.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: #E16C47; 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: 500; 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: #E16C47; 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__bottom-content { padding: 0; }
.nf-mobile-menu__ww-link { display: flex; align-items: center; gap: 10px; }
.nf-mobile-menu__ww-logo { border-radius: 4px; flex-shrink: 0; }
.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: #262320; 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: #F3F1E9; border-color: #ccc; text-decoration: none; }
.nf-mobile-menu__action-btn svg { color: #555; flex-shrink: 0; }
.nf-mobile-menu__flag { border-radius: 2px; flex-shrink: 0; }
/* 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: #262320; border-bottom-color: #262320; }

/* ── 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: #E16C47; }
.nf-mobile-menu__product-name { font-size: 12px; font-weight: 500; 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: #262320; 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: Shop Products — horizontal-scroll cards (matches desktop mega) ── */
.nf-mobile-menu__shop-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Key: scroll-padding-inline-start matches the inline padding so snap
     aligns cards with the content grid, not the viewport edge */
  scroll-padding-inline-start: 1.25rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1.25rem;
  padding: 0 1.25rem 10px;
}
.nf-mobile-menu__shop-scroll::-webkit-scrollbar { display: none; }
.nf-mobile-menu__shop-card {
  flex: 0 0 60%;
  max-width: 200px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.nf-mobile-menu__shop-card-img {
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: #F7F5EF;
}
.nf-mobile-menu__shop-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nf-mobile-menu__shop-card-name {
  font-size: 13px;
  font-weight: 500;
  color: #262320;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nf-mobile-menu__shop-card-price {
  font-size: 12px;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.55);
}
.nf-mobile-menu__shop-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #E16C47;
  border-radius: 999px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.2s;
}
.nf-mobile-menu__shop-all-btn:hover {
  background: #c9563a;
  text-decoration: none;
}

/* Secondary quiz CTA — black pill below Shop All Products */
.nf-mobile-menu__shop-quiz-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #262320;
  border-radius: 999px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.2s;
}
.nf-mobile-menu__shop-quiz-btn:hover {
  background: #111;
  text-decoration: none;
}

/* Take the Quiz — prominent CTA above "Why NOOCI" in the burger drawer */
.nf-mobile-menu__quiz-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px 1.25rem 20px;
  padding: 15px 20px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  background: #E16C47;
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(225, 108, 71, 0.25);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.nf-mobile-menu__quiz-cta:hover,
.nf-mobile-menu__quiz-cta:active {
  background: #c9563a;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(225, 108, 71, 0.3);
  text-decoration: none;
}
.nf-mobile-menu__quiz-cta svg { flex-shrink: 0; }

/* ── 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: #262320; color: #fff; border-color: #262320; }
.nf-mobile-menu__filter-pill--active { background: #262320; color: #fff; border-color: #262320; }
.nf-mobile-menu__section-cta--sale { background: #262320; 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__section-btn--link { border-bottom: 1px solid #f0f0f0; }
.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: #E16C47; 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: #262320; margin: 0; }

/* ── Mobile: Why NOOCI 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/currency switcher styles live in snippets/nf-country-switcher.liquid */

/* ══════════════════════════════════════════
   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: 500;
  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: #E16C47;
}
.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: #E16C47;
  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: #F3F1E9;
  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: #262320;
  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: #262320;
  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:21) */
/* ── 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__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;
}

/* ── 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;
  }
}
/* END_SECTION:help-center */

/* START_SECTION:legal-content (INDEX:23) */
/* ═══════════════════════════════════════
   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, #262320);
}
.legal-breadcrumb span:last-child {
  color: var(--color-foreground, #262320);
}

/* ── 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, #262320);
  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, #F3F1E9);
  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, #262320);
  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, #262320);
  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, #262320);
  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, #262320);
}
.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, #262320);
}
.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-account (INDEX:25) */
.nf-account {
  min-height: calc(100vh - 160px);
  padding: 3rem 1rem 5rem;
  background: var(--color-background, #F3F1E9);
}
.nf-account__wrap {
  max-width: 720px;
  margin: 0 auto;
}
.nf-account__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.nf-account__welcome {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.55);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.nf-account__name {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #262320);
  margin: 0;
}
.nf-account__logout {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.7);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(38, 35, 32, 0.15);
  border-radius: 9999px;
  transition: background 0.15s, border-color 0.15s;
}
.nf-account__logout:hover {
  background: #fff;
  border-color: rgba(38, 35, 32, 0.3);
  text-decoration: none;
}
.nf-account__nav {
  display: flex;
  gap: 2px;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(38, 35, 32, 0.1);
}
.nf-account__nav-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.6);
  text-decoration: none;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.nf-account__nav-link:hover {
  color: var(--color-foreground, #262320);
  text-decoration: none;
}
.nf-account__nav-link.is-active {
  color: var(--color-foreground, #262320);
  border-bottom-color: #E16C47;
  font-weight: 600;
}
.nf-account__section-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--color-foreground, #262320);
  margin: 0 0 1rem;
}
.nf-account__orders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nf-account__order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  flex-wrap: wrap;
}
.nf-account__order:hover {
  border-color: rgba(225, 108, 71, 0.4);
  box-shadow: 0 2px 8px rgba(38, 35, 32, 0.05);
  text-decoration: none;
}
.nf-account__order-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nf-account__order-name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-foreground, #262320);
}
.nf-account__order-date {
  font-size: 0.75rem;
  color: rgba(38, 35, 32, 0.55);
}
.nf-account__order-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nf-account__order-status {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  background: rgba(38, 35, 32, 0.06);
  color: rgba(38, 35, 32, 0.7);
}
.nf-account__order-status--fulfilled { background: rgba(34, 197, 94, 0.12); color: #15803d; }
.nf-account__order-status--partial { background: rgba(234, 179, 8, 0.14); color: #a16207; }
.nf-account__order-total {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-foreground, #262320);
}
.nf-account__empty {
  text-align: center;
  padding: 3rem 1rem;
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px;
}
.nf-account__empty-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: 1.125rem;
  margin: 0 0 0.25rem;
  color: var(--color-foreground, #262320);
}
.nf-account__empty-sub {
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.6);
  margin: 0 0 1.5rem;
}
.nf-account__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
  background: #E16C47;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.nf-account__cta:hover {
  background: #c9563a;
  transform: translateY(-1px);
  text-decoration: none;
}
@media (max-width: 560px) {
  .nf-account__order { flex-direction: column; align-items: flex-start; gap: 10px; }
  .nf-account__order-meta { width: 100%; justify-content: space-between; }
}
/* END_SECTION:main-account */

/* START_SECTION:main-activate-account (INDEX:26) */
.nf-login {
  min-height: calc(100vh - 160px);
  padding: 4rem 1rem;
  background: var(--color-background, #F3F1E9);
  display: flex; align-items: flex-start; justify-content: center;
}
.nf-login__wrap {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08); border-radius: 16px;
  padding: 2.5rem 2rem; box-shadow: 0 2px 12px rgba(38, 35, 32, 0.04);
}
.nf-login__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0 0 0.375rem; text-align: center;
}
.nf-login__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; color: rgba(38, 35, 32, 0.65);
  margin: 0 0 2rem; text-align: center;
}
.nf-login__errors {
  background: rgba(225, 108, 71, 0.08);
  border: 1px solid rgba(225, 108, 71, 0.25);
  color: #c9563a; padding: 12px 14px; border-radius: 10px;
  font-size: 0.8125rem; margin-bottom: 1rem;
}
.nf-login__form { display: flex; flex-direction: column; gap: 1rem; }
.nf-login__field { display: flex; flex-direction: column; gap: 0.375rem; }
.nf-login__field label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--color-foreground, #262320);
}
.nf-login__field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; color: var(--color-foreground, #262320);
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.18);
  border-radius: 10px; transition: border-color 0.15s;
}
.nf-login__field input:focus {
  outline: none; border-color: #E16C47;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.15);
}
.nf-login__submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 20px; margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600; font-size: 0.9375rem; color: #fff;
  background: #E16C47; border: none; border-radius: 9999px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.nf-login__submit:hover { background: #c9563a; transform: translateY(-1px); }
.nf-login__create {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; color: rgba(38, 35, 32, 0.7);
  text-align: center; margin: 1rem 0 0;
}
.nf-login__create a { color: #E16C47; font-weight: 600; text-decoration: none; }
.nf-login__create a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .nf-login__wrap { padding: 2rem 1.25rem; border-radius: 12px; }
  .nf-login__heading { font-size: 1.5rem; }
}
/* END_SECTION:main-activate-account */

/* START_SECTION:main-addresses (INDEX:27) */
.nf-account {
  min-height: calc(100vh - 160px);
  padding: 3rem 1rem 5rem;
  background: var(--color-background, #F3F1E9);
}
.nf-account__wrap { max-width: 720px; margin: 0 auto; }
.nf-account__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.nf-account__welcome {
  display: block; font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500; color: rgba(38, 35, 32, 0.55);
  letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0.25rem;
}
.nf-account__name {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0;
}
.nf-account__logout {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(38, 35, 32, 0.7); text-decoration: none;
  padding: 8px 14px; border: 1px solid rgba(38, 35, 32, 0.15);
  border-radius: 9999px; transition: background 0.15s; cursor: pointer; background: transparent;
}
.nf-account__logout:hover {
  background: #fff; border-color: rgba(38, 35, 32, 0.3); text-decoration: none;
}
.nf-account__empty {
  text-align: center; padding: 3rem 1rem; background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08); border-radius: 12px;
}
.nf-account__empty-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.125rem; margin: 0 0 0.25rem;
  color: var(--color-foreground, #262320);
}
.nf-account__empty-sub { font-size: 0.875rem; color: rgba(38, 35, 32, 0.6); margin: 0 0 1.5rem; }
.nf-account__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; margin-bottom: 1.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600; font-size: 0.875rem; color: #fff;
  background: #E16C47; border: none; border-radius: 9999px;
  text-decoration: none; cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.nf-account__cta:hover { background: #c9563a; transform: translateY(-1px); text-decoration: none; }

.nf-address__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;
}
.nf-address__card {
  position: relative; background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08); border-radius: 12px;
  padding: 20px;
}
.nf-address__badge {
  display: inline-block; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  background: #E16C47; color: #fff; padding: 3px 8px; border-radius: 9999px;
  margin-bottom: 10px;
}
.nf-address__body {
  font-size: 0.875rem; line-height: 1.6; color: var(--color-foreground, #262320);
  margin-bottom: 14px;
}
.nf-address__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.nf-address__form {
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px; padding: 24px; margin-bottom: 1.5rem;
}
.nf-address__form-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1rem; margin: 0 0 1rem;
}
.nf-address__default {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: rgba(38, 35, 32, 0.7); cursor: pointer;
}

.nf-login__form { display: flex; flex-direction: column; gap: 1rem; }
.nf-login__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.nf-login__field { display: flex; flex-direction: column; gap: 0.375rem; }
.nf-login__field label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500; color: var(--color-foreground, #262320);
}
.nf-login__field input, .nf-login__field select {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; color: var(--color-foreground, #262320);
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.18);
  border-radius: 10px; transition: border-color 0.15s;
}
.nf-login__field input:focus, .nf-login__field select:focus {
  outline: none; border-color: #E16C47;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.15);
}
.nf-login__submit {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 20px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600; font-size: 0.9375rem; color: #fff;
  background: #E16C47; border: none; border-radius: 9999px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.nf-login__submit:hover { background: #c9563a; transform: translateY(-1px); }
@media (max-width: 480px) {
  .nf-login__row { grid-template-columns: 1fr; }
}
/* END_SECTION:main-addresses */

/* START_SECTION:main-article (INDEX:28) */
/* ═══════════════════════════════════════
   ARTICLE PAGE — clean reading layout
   ═══════════════════════════════════════ */
.article-pg {
  max-width: 48rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  font-family: var(--font-body, 'Inter', 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, #262320);
}
.article-pg__breadcrumb span:last-child {
  color: var(--color-foreground, #262320);
}

/* ── 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, #262320);
  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, #262320);
  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, #262320);
  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, #262320);
}
.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, #F3F1E9);
  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, #F3F1E9);
  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, #262320);
}

/* ── 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, #F3F1E9);
  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, #262320);
  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, #262320);
  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, #F3F1E9);
  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, #262320);
  border-color: var(--color-foreground, #262320);
  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, #262320);
  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, #262320);
  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, #262320);
  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, #262320);
  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, #F3F1E9);
  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, #262320);
  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:29) */
/* ═══════════════════════════════════════
   BLOG INDEX — Noo Journal
   ═══════════════════════════════════════ */
.blog-idx {
  max-width: 72rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  font-family: var(--font-body, 'Inter', sans-serif);
}

/* ── Hero ── */
.blog-idx__hero {
  text-align: center;
  margin-bottom: 2.5rem;
}
.blog-idx__eyebrow {
  display: block;
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-size: 0.875rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #E16C47);
  margin-bottom: 0.5rem;
}
.blog-idx__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--color-foreground, #262320);
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.blog-idx__description {
  font-size: 1.0625rem;
  color: rgba(38, 35, 32, 0.62);
  margin: 0;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* ── Tag filter pills ── */
.blog-idx__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(38, 35, 32, 0.08);
}
.blog-idx__filter-pill {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.5rem 1.125rem;
  border-radius: 9999px;
  background: var(--color-background, #F3F1E9);
  color: rgba(38, 35, 32, 0.62);
  border: 1px solid rgba(38, 35, 32, 0.08);
  text-decoration: none;
  transition: all 180ms ease;
  white-space: nowrap;
}
.blog-idx__filter-pill:hover {
  color: #262320;
  border-color: rgba(38, 35, 32, 0.2);
  text-decoration: none;
}
.blog-idx__filter-pill--active {
  background: #262320;
  color: #F3F1E9;
  border-color: #262320;
}
.blog-idx__filter-pill--active:hover {
  background: #262320;
  color: #F3F1E9;
}

/* ── Featured article (first, full width) ── */
.blog-featured {
  margin-bottom: 3rem;
  animation: blogCardFadeIn 0.5s ease both;
}
.blog-featured__link {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  text-decoration: none;
  color: inherit;
  align-items: center;
}
.blog-featured__img-wrap {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--color-background, #F3F1E9);
}
.blog-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.blog-featured__link:hover .blog-featured__img {
  transform: scale(1.03);
}
.blog-featured__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-featured__content {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.blog-featured__title {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--color-foreground, #262320);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.blog-featured__excerpt {
  font-size: 1rem;
  color: rgba(38, 35, 32, 0.62);
  margin: 0;
  line-height: 1.65;
}

/* ── 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, #F3F1E9);
  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, #E16C47);
  background: rgba(225, 108, 71, 0.08);
  padding: 0.2rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
  width: fit-content;
}
.blog-card__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-foreground, #262320);
  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, #262320);
  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, #262320);
  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, #F3F1E9);
  border-color: var(--color-foreground, #262320);
  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;
}

/* ── Responsive ── */
@media (max-width: 999px) {
  .blog-idx__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .blog-featured__link {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
@media (max-width: 749px) {
  .blog-idx {
    padding: 3rem 1rem 3rem;
  }
  .blog-idx__filters {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1.5rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .blog-idx__filters::-webkit-scrollbar { display: none; }
  .blog-idx__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .blog-featured__link {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .blog-featured__title { font-size: 1.5rem; }
}
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:30) */
/* ═══════════════════════════════════════
   CART PAGE — Full-page cart
   ═══════════════════════════════════════ */
.cart-pg {
  max-width: 72rem;
  margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
  font-family: var(--font-body, 'Inter', 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, #262320);
}
.cart-pg__breadcrumb span:last-child {
  color: var(--color-foreground, #262320);
}

/* ── Title ── */
.cart-pg__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-foreground, #262320);
  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, #F3F1E9);
  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, #262320);
  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: #E16C47; }
.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, #262320);
}
.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, #262320);
}

/* ── 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, #262320);
  transition: background 0.15s;
  user-select: none;
}
.cart-pg__qty-btn:hover { background: var(--color-surface, #F3F1E9); }
.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, #262320);
  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, #262320);
}

/* ── 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, #262320);
  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, #262320);
  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, #F3F1E9);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.cart-pg__shipping-note svg { flex-shrink: 0; color: #E16C47; }

/* ── 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, #262320);
}
.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, #262320);
  background: transparent;
}
.cart-pg__discount-input:focus {
  outline: none;
  border-color: var(--color-foreground, #262320);
}
.cart-pg__discount-btn {
  height: 2.25rem;
  padding: 0 1rem;
  background: var(--color-foreground, #262320);
  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, #262320);
  background: transparent;
  resize: vertical;
}
.cart-pg__note-input:focus {
  outline: none;
  border-color: var(--color-foreground, #262320);
}

/* ── 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: #E16C47;
  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, #262320);
  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, #262320);
  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, #F3F1E9);
  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: #E16C47;
  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, #262320);
  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, #262320);
}
.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, #262320);
  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, #262320);
  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-login (INDEX:32) */
.nf-login {
  min-height: calc(100vh - 160px);
  padding: 4rem 1rem;
  background: var(--color-background, #F3F1E9);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.nf-login__wrap {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 2px 12px rgba(38, 35, 32, 0.04);
}

.nf-login__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  color: var(--color-foreground, #262320);
  margin: 0 0 0.375rem;
  text-align: center;
}

.nf-login__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.65);
  margin: 0 0 2rem;
  text-align: center;
}

.nf-login__errors {
  background: rgba(225, 108, 71, 0.08);
  border: 1px solid rgba(225, 108, 71, 0.25);
  color: #c9563a;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.nf-login__errors ul { margin: 0; padding-left: 1.25rem; }

.nf-login__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nf-login__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.nf-login__field label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-foreground, #262320);
}

.nf-login__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  color: var(--color-foreground, #262320);
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.18);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.nf-login__field input:focus {
  outline: none;
  border-color: #E16C47;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.15);
}

.nf-login__forgot {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.7);
  text-decoration: none;
  align-self: flex-end;
  margin-top: -0.5rem;
  transition: color 0.15s;
}
.nf-login__forgot:hover {
  color: #E16C47;
  text-decoration: underline;
}

.nf-login__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  color: #fff;
  background: #E16C47;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.nf-login__submit:hover {
  background: #c9563a;
  transform: translateY(-1px);
}

.nf-login__create {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.7);
  text-align: center;
  margin: 1rem 0 0;
}
.nf-login__create a {
  color: #E16C47;
  font-weight: 600;
  text-decoration: none;
}
.nf-login__create a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .nf-login__wrap {
    padding: 2rem 1.25rem;
    border-radius: 12px;
  }
  .nf-login__heading {
    font-size: 1.5rem;
  }
}

.nf-login__success {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #15803d;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}
.nf-login__state[hidden] { display: none; }
/* END_SECTION:main-login */

/* START_SECTION:main-order (INDEX:33) */
.nf-account {
  min-height: calc(100vh - 160px);
  padding: 3rem 1rem 5rem;
  background: var(--color-background, #F3F1E9);
}
.nf-account__wrap { max-width: 960px; margin: 0 auto; }
.nf-account__header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap;
}
.nf-account__name {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0;
}
.nf-account__back-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; color: rgba(38, 35, 32, 0.65);
  text-decoration: none; margin-bottom: 0.5rem; display: inline-block;
}
.nf-account__back-link:hover { color: #E16C47; }
.nf-order__date {
  font-size: 0.8125rem; color: rgba(38, 35, 32, 0.55);
  margin: 0.25rem 0 0;
}
.nf-order__status-group { display: flex; gap: 6px; flex-wrap: wrap; }
.nf-account__order-status {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 9999px;
  background: rgba(38, 35, 32, 0.06); color: rgba(38, 35, 32, 0.7);
}
.nf-account__order-status--fulfilled, .nf-account__order-status--paid { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.nf-account__order-status--partial { background: rgba(234, 179, 8, 0.15); color: #a16207; }
.nf-account__order-status--cancelled, .nf-account__order-status--refunded { background: rgba(225, 108, 71, 0.14); color: #c9563a; }

.nf-account__section-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.125rem;
  color: var(--color-foreground, #262320); margin: 0 0 1rem;
}
.nf-order__grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 24px;
}
.nf-order__items {
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px; padding: 24px;
}
.nf-order__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid rgba(38, 35, 32, 0.06);
}
.nf-order__item:last-child { border-bottom: none; }
.nf-order__item-img {
  width: 64px; height: 64px; border-radius: 8px; object-fit: cover;
  background: #F3F1E9; flex-shrink: 0;
}
.nf-order__item-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nf-order__item-title {
  font-weight: 600; font-size: 0.9375rem;
  color: var(--color-foreground, #262320); text-decoration: none;
}
.nf-order__item-title:hover { color: #E16C47; }
.nf-order__item-variant, .nf-order__item-qty {
  font-size: 0.75rem; color: rgba(38, 35, 32, 0.6);
}
.nf-order__item-price {
  font-weight: 600; font-size: 0.9375rem;
  color: var(--color-foreground, #262320);
}
.nf-order__summary {
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px; padding: 24px; align-self: start;
}
.nf-order__row {
  display: flex; justify-content: space-between;
  font-size: 0.875rem; color: rgba(38, 35, 32, 0.75);
  padding: 6px 0;
}
.nf-order__row--discount { color: #E16C47; }
.nf-order__row--total {
  font-weight: 700; font-size: 1rem;
  color: var(--color-foreground, #262320);
  border-top: 1px solid rgba(38, 35, 32, 0.1);
  margin-top: 6px; padding-top: 12px;
}
.nf-order__section-subtitle {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 0.875rem;
  color: var(--color-foreground, #262320);
  margin: 1.25rem 0 0.5rem;
}
.nf-order__address {
  font-size: 0.8125rem; line-height: 1.55;
  color: rgba(38, 35, 32, 0.75);
}
@media (max-width: 749px) {
  .nf-order__grid { grid-template-columns: 1fr; }
  .nf-order__item { flex-wrap: wrap; }
  .nf-order__item-img { width: 56px; height: 56px; }
  .nf-order__item-price { width: 100%; text-align: right; }
}
/* END_SECTION:main-order */

/* START_SECTION:main-register (INDEX:36) */
/* Relies on the shared .nf-login styles loaded on the login page.
   Own copy lives here for standalone register route. */
.nf-login {
  min-height: calc(100vh - 160px);
  padding: 4rem 1rem;
  background: var(--color-background, #F3F1E9);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.nf-login__wrap {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  box-shadow: 0 2px 12px rgba(38, 35, 32, 0.04);
}
.nf-login__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0 0 0.375rem; text-align: center;
}
.nf-login__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; color: rgba(38, 35, 32, 0.65);
  margin: 0 0 2rem; text-align: center;
}
.nf-login__errors {
  background: rgba(225, 108, 71, 0.08);
  border: 1px solid rgba(225, 108, 71, 0.25);
  color: #c9563a; padding: 12px 14px; border-radius: 10px;
  font-size: 0.8125rem; margin-bottom: 1rem;
}
.nf-login__form { display: flex; flex-direction: column; gap: 1rem; }
.nf-login__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.nf-login__field { display: flex; flex-direction: column; gap: 0.375rem; }
.nf-login__field label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500; color: var(--color-foreground, #262320);
}
.nf-login__field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; color: var(--color-foreground, #262320);
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.18);
  border-radius: 10px; transition: border-color 0.15s, box-shadow 0.15s;
}
.nf-login__field input:focus {
  outline: none; border-color: #E16C47;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.15);
}
.nf-login__submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 20px; margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600; font-size: 0.9375rem; color: #fff;
  background: #E16C47; border: none; border-radius: 9999px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.nf-login__submit:hover { background: #c9563a; transform: translateY(-1px); }
.nf-login__create {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; color: rgba(38, 35, 32, 0.7);
  text-align: center; margin: 1rem 0 0;
}
.nf-login__create a { color: #E16C47; font-weight: 600; text-decoration: none; }
.nf-login__create a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .nf-login__wrap { padding: 2rem 1.25rem; border-radius: 12px; }
  .nf-login__heading { font-size: 1.5rem; }
  .nf-login__row { grid-template-columns: 1fr; }
}
/* END_SECTION:main-register */

/* START_SECTION:main-reset-password (INDEX:37) */
.nf-login {
  min-height: calc(100vh - 160px);
  padding: 4rem 1rem;
  background: var(--color-background, #F3F1E9);
  display: flex; align-items: flex-start; justify-content: center;
}
.nf-login__wrap {
  width: 100%; max-width: 420px; background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.08); border-radius: 16px;
  padding: 2.5rem 2rem; box-shadow: 0 2px 12px rgba(38, 35, 32, 0.04);
}
.nf-login__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: 1.75rem; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0 0 0.375rem; text-align: center;
}
.nf-login__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; color: rgba(38, 35, 32, 0.65);
  margin: 0 0 2rem; text-align: center;
}
.nf-login__errors {
  background: rgba(225, 108, 71, 0.08);
  border: 1px solid rgba(225, 108, 71, 0.25);
  color: #c9563a; padding: 12px 14px; border-radius: 10px;
  font-size: 0.8125rem; margin-bottom: 1rem;
}
.nf-login__form { display: flex; flex-direction: column; gap: 1rem; }
.nf-login__field { display: flex; flex-direction: column; gap: 0.375rem; }
.nf-login__field label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 500;
  color: var(--color-foreground, #262320);
}
.nf-login__field input {
  width: 100%; box-sizing: border-box; padding: 12px 14px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; color: var(--color-foreground, #262320);
  background: #fff; border: 1px solid rgba(38, 35, 32, 0.18);
  border-radius: 10px; transition: border-color 0.15s;
}
.nf-login__field input:focus {
  outline: none; border-color: #E16C47;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.15);
}
.nf-login__submit {
  display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 14px 20px; margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600; font-size: 0.9375rem; color: #fff;
  background: #E16C47; border: none; border-radius: 9999px;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.nf-login__submit:hover { background: #c9563a; transform: translateY(-1px); }
@media (max-width: 480px) {
  .nf-login__wrap { padding: 2rem 1.25rem; border-radius: 12px; }
  .nf-login__heading { font-size: 1.5rem; }
}
/* END_SECTION:main-reset-password */

/* START_SECTION:main-search (INDEX:38) */
/* ═══════════════════════════════════════════════
   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, #262320);
}

/* ── Search bar ── */
.search-page__form {
  margin-bottom: 2rem;
}
.search-page__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-secondary, #F3F1E9);
  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, #262320);
}
.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, #262320);
  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, #262320);
}
.search-page__submit {
  flex-shrink: 0;
  padding: 0.5rem 1.25rem;
  background: var(--color-primary, #262320);
  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, #F3F1E9);
  transition: border-color 0.2s;
}
.search-page__article-card:hover {
  border-color: var(--color-text, #262320);
}
.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, #262320);
}
.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, #262320);
  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, #F3F1E9);
  transition: border-color 0.2s;
}
.search-page__page-card:hover {
  border-color: var(--color-text, #262320);
}
.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, #262320);
}
.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, #262320);
  text-decoration: none;
  transition: background 0.2s;
}
.search-page__page-link:hover {
  background: var(--color-secondary, #F3F1E9);
}
.search-page__page-link--current {
  background: var(--color-primary, #262320);
  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, #262320);
}
.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, #262320);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.search-page__browse-link:hover {
  background: var(--color-secondary, #F3F1E9);
  border-color: var(--color-text, #262320);
}

/* ── 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: #262320;
  }
  .search-page__browse-link {
    border-color: #444;
  }
  .search-page__browse-link:hover {
    background: #2a2a2e;
    border-color: #888;
  }
}
/* END_SECTION:main-search */

/* START_SECTION:newsroom-press-kits (INDEX:39) */
/* ── 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:40) */
/* ── 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:41) */
/* ── 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: 600;
  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:nooci-author-byline (INDEX:42) */
.nooci-author-byline {
  background-color: var(--color-background, #F3F1E9);
  padding: 5rem 0 3rem;
  border-bottom: 1px solid rgba(38, 35, 32, 0.08);
}

.nooci-author-byline__inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: left;
}

.nooci-author-byline__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 1.25rem;
}

.nooci-author-byline__title {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #262320;
  margin: 0 0 1.5rem;
}

.nooci-author-byline__dek {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: rgba(38, 35, 32, 0.72);
  margin: 0 0 2.5rem;
  font-weight: 400;
}

.nooci-author-byline__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(38, 35, 32, 0.1);
}

.nooci-author-byline__photo {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(38, 35, 32, 0.06);
}

.nooci-author-byline__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nooci-author-byline__byline {
  flex: 1;
  min-width: 0;
}

.nooci-author-byline__name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #262320;
  margin: 0 0 0.1875rem;
  line-height: 1.3;
}

.nooci-author-byline__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(38, 35, 32, 0.25);
  transition: border-color 200ms ease;
}

.nooci-author-byline__name a:hover {
  border-bottom-color: #262320;
}

.nooci-author-byline__credentials {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.6);
  margin: 0 0 0.375rem;
  line-height: 1.4;
}

.nooci-author-byline__bio {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.72);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.nooci-author-byline__article-meta {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  color: rgba(38, 35, 32, 0.5);
  margin: 0;
  letter-spacing: 0.02em;
}

.nooci-author-byline__meta-dot {
  margin: 0 0.5rem;
}

@media (max-width: 749px) {
  .nooci-author-byline {
    padding: 3rem 0 2rem;
  }
  .nooci-author-byline__title {
    font-size: clamp(2rem, 8vw, 2.625rem);
  }
  .nooci-author-byline__meta {
    flex-wrap: wrap;
  }
}
/* END_SECTION:nooci-author-byline */

/* START_SECTION:nooci-before-after (INDEX:43) */
.nooci-ba {
    padding: 80px 0;
    background: #F3F1E9;
  }

  .nooci-ba__header {
    text-align: center;
    margin-bottom: 48px;
  }

  .nooci-ba__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E16C47;
    margin-bottom: 12px;
  }

  .nooci-ba__heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.03em;
    color: #262320;
    margin: 0;
  }

  .nooci-ba__columns {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
    align-items: start;
  }

  .nooci-ba__col-label {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.02em;
    color: #E16C47;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(225, 108, 71, 0.2);
  }

  .nooci-ba__col-label--after {
    color: #4F576A;
    border-bottom-color: rgba(79, 87, 106, 0.2);
  }

  .nooci-ba__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: #262320;
    opacity: 0.8;
  }

  .nooci-ba__item--after {
    opacity: 1;
  }

  .nooci-ba__x, .nooci-ba__check {
    flex-shrink: 0;
    margin-top: 2px;
    width: 14px;
    height: 14px;
  }

  .nooci-ba__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 48px;
  }

  .nooci-ba__divider-line {
    width: 1px;
    height: 60px;
    background: rgba(38, 35, 32, 0.12);
  }

  .nooci-ba__divider-icon img {
    opacity: 0.15;
  }

  @media (max-width: 749px) {
    .nooci-ba { padding: 40px 0; }
    .nooci-ba__header { margin-bottom: 28px; }
    .nooci-ba__columns {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .nooci-ba__col { padding: 0; }
    .nooci-ba__col-label {
      font-size: 0.875rem;
      margin-bottom: 14px;
      padding-bottom: 8px;
    }
    .nooci-ba__item {
      font-size: 0.8125rem;
      gap: 8px;
      margin-bottom: 10px;
      line-height: 1.45;
    }
    .nooci-ba__x, .nooci-ba__check {
      width: 12px;
      height: 12px;
      margin-top: 2px;
    }
    .nooci-ba__divider {
      flex-direction: row;
      padding: 10px 0;
      margin: 0;
    }
    .nooci-ba__divider-line {
      flex: 1;
      width: auto;
      height: 1px;
    }
    .nooci-ba__divider-icon img { width: 28px; height: 28px; }
  }
/* END_SECTION:nooci-before-after */

/* START_SECTION:nooci-benefits-grid (INDEX:44) */
.nooci-benefits-grid {
  padding: 64px 0;
}

.nooci-benefits-grid__container {
  border: 1px solid rgba(38, 35, 32, 0.1);
  border-radius: 12px;
  padding: 40px;
  background: #fff;
}

.nooci-benefits-grid__header {
  text-align: center;
  margin-bottom: 36px;
}

.nooci-benefits-grid__heading {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(26px, 3.5vw, 36px);
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0 0 10px;
  line-height: 1.2;
}

.nooci-benefits-grid__subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 400;
  color: #4F576A;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.5;
}

.nooci-benefits-grid__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.nooci-benefits-grid__card {
  display: flex;
  flex-direction: column;
}

.nooci-benefits-grid__image-wrap {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #F3F1E9;
}

.nooci-benefits-grid__image-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nooci-benefits-grid__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nooci-benefits-grid__card-body {
  padding: 16px 4px 0;
}

.nooci-benefits-grid__card-heading {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0 0 6px;
  line-height: 1.3;
}

.nooci-benefits-grid__card-desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 400;
  color: #4F576A;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.5;
}

@media (max-width: 989px) {
  .nooci-benefits-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 749px) {
  .nooci-benefits-grid {
    padding: 48px 0;
  }

  .nooci-benefits-grid__container {
    padding: 24px 20px;
  }

  .nooci-benefits-grid__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* END_SECTION:nooci-benefits-grid */

/* START_SECTION:nooci-color-block (INDEX:46) */
/* ── NOOCI Color Block ── */
.ncb {
  position: relative;
  width: 100%;
  background-color: var(--ncb-bg);
  color: var(--ncb-text);
  overflow: hidden;
}

.ncb__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  padding: 100px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ncb__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin: 0;
  color: inherit;
}

.ncb__body {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.65;
  max-width: 560px;
  color: inherit;
  opacity: 0.88;
}

.ncb__body p {
  margin: 0 0 0.5em;
}

.ncb__body p:last-child {
  margin-bottom: 0;
}

.ncb__cta {
  display: inline-block;
  background: var(--ncb-btn-bg);
  color: var(--ncb-btn-text);
  border-radius: 9999px;
  padding: 0.85em 2em;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  border: none;
  cursor: pointer;
}

.ncb__cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* ── Oversized background icon ── */
.ncb__icon-wrap {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 50%;
  max-width: 520px;
  pointer-events: none;
  z-index: 1;
}

.ncb__icon-img {
  width: 100%;
  height: auto;
  opacity: 0.1;
  display: block;
}

.ncb__curved-text {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  animation: ncb-spin 40s linear infinite;
  opacity: 0.35;
}

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

/* ── Desktop ── */
@media (min-width: 768px) {
  .ncb__inner {
    padding: 160px 48px;
  }

  .ncb__icon-wrap {
    right: -2%;
    width: 42%;
  }
}

/* ── Mobile adjustments ── */
@media (max-width: 767px) {
  .ncb__icon-wrap {
    width: 65%;
    right: -12%;
    opacity: 0.7;
  }

  .ncb__curved-text {
    display: none;
  }
}
/* END_SECTION:nooci-color-block */

/* START_SECTION:nooci-compare-table (INDEX:47) */
.nooci-compare {
  padding: 64px 0;
}

.nooci-compare__header {
  text-align: center;
  margin-bottom: 40px;
}

.nooci-compare__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E16C47;
  margin: 0 0 12px;
}

.nooci-compare__heading {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0;
  line-height: 1.2;
}

.nooci-compare__table-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(38, 35, 32, 0.06);
}

.nooci-compare__col-headers {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(38, 35, 32, 0.1);
}

.nooci-compare__col-label {
  padding: 20px 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: #262320;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nooci-compare__col-label--nooci {
  background: rgba(225, 108, 71, 0.06);
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 8px;
}

.nooci-compare__col-label--competitor {
  justify-content: center;
  text-align: center;
  color: #4F576A;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
}

.nooci-compare__product-img {
  border-radius: 8px;
  object-fit: cover;
}

.nooci-compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid rgba(38, 35, 32, 0.06);
}

.nooci-compare__row:last-child {
  border-bottom: none;
}

.nooci-compare__cell {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nooci-compare__cell--feature {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.03em;
  color: #262320;
}

.nooci-compare__cell--nooci {
  background: rgba(225, 108, 71, 0.04);
  align-items: center;
  text-align: center;
}

.nooci-compare__cell--competitor {
  align-items: center;
  text-align: center;
}

.nooci-compare__indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-bottom: 4px;
}

.nooci-compare__badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nooci-compare__badge--yes {
  background: #E16C47;
  box-shadow: 0 4px 10px rgba(225, 108, 71, 0.28);
}

.nooci-compare__badge--no {
  background: #E8E6E0;
}

.nooci-compare__badge-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.nooci-compare__badge-text--yes {
  color: #262320;
}

.nooci-compare__badge-text--no {
  color: #999;
}

.nooci-compare__value {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: #4F576A;
  margin: 2px 0 0;
  letter-spacing: -0.03em;
}

@media (max-width: 749px) {
  .nooci-compare { padding: 40px 0; }
  .nooci-compare__header { margin-bottom: 24px; }

  /* Horizontal scroll for the table on mobile. Keep the visible
     edges INSIDE .page-width with a small internal margin so the
     rounded corners aren't clipped by the viewport edge. */
  .nooci-compare__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 10px;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .nooci-compare__table-wrap::-webkit-scrollbar { display: none; }

  /* Force a minimum width so the table scrolls instead of cramming */
  .nooci-compare__col-headers,
  .nooci-compare__row {
    min-width: 520px;
  }

  .nooci-compare__col-headers {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr;
    gap: 0;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .nooci-compare__col-label--feature {
    display: block;
    font-size: 11px;
    padding: 10px 12px;
  }
  .nooci-compare__col-label--nooci,
  .nooci-compare__col-label--competitor {
    padding: 10px 12px;
    font-size: 12px;
  }

  .nooci-compare__row {
    display: grid;
    grid-template-columns: minmax(140px, 1.2fr) 1fr 1fr;
    padding: 0;
  }

  .nooci-compare__cell--feature {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    grid-column: auto;
  }

  .nooci-compare__cell--nooci,
  .nooci-compare__cell--competitor {
    padding: 10px 12px;
    font-size: 12px;
  }
}
/* END_SECTION:nooci-compare-table */

/* START_SECTION:nooci-constitution-grid (INDEX:48) */
.cg { padding: 4rem 0; background: var(--bg); }
.cg__inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.cg__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent, #E16C47);
  margin: 0 0 0.75rem;
}
.cg__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320);
  margin: 0 0 0.5rem;
}
.cg__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem; line-height: 1.55;
  color: rgba(38,35,32,0.7); margin: 0 auto 2rem; max-width: 620px;
}
.cg__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: left;
  margin-top: 1rem;
}
.cg__card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(38,35,32,0.08);
  padding: 22px 22px 18px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.cg__card:hover, .cg__card:focus-visible {
  border-color: rgba(225,108,71,0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38,35,32,0.06);
  outline: none;
}
.cg__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(225,108,71,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.cg__icon img { width: 32px; height: 32px; object-fit: contain; }
.cg__glyph { font-size: 1.375rem; line-height: 1; }
.cg__name {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 1.0625rem; font-weight: 600;
  color: var(--color-foreground, #262320);
  margin: 0 0 4px; letter-spacing: -0.01em;
}
.cg__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; line-height: 1.45;
  color: rgba(38,35,32,0.68);
  margin: 0 0 12px;
  flex: 1 1 auto;
}
.cg__readmore {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--color-accent, #E16C47);
}
.cg__cta-row {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 2rem;
}
.cg__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--color-accent, #E16C47);
  border-radius: 9999px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(225,108,71,0.28);
  transition: background 0.2s, transform 0.2s;
}
.cg__cta:hover { background: #c9563a; transform: translateY(-1px); text-decoration: none; }
.cg__cta-sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; color: rgba(38,35,32,0.55);
  margin: 0;
}

@media (max-width: 989px) { .cg__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .cg { padding: 3rem 0; }
  .cg__grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ─── Drawer modal (slides in from the right) ─── */
.cg-modal {
  /* Reset native <dialog> centering so we can pin to the right edge */
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  width: min(520px, 100vw);
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
  box-shadow: -20px 0 60px rgba(20, 18, 16, 0.2);
}
.cg-modal[open] { animation: cg-drawer-in 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes cg-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.cg-modal::backdrop {
  background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: cg-backdrop-in 0.25s ease-out;
}
@keyframes cg-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.cg-modal__inner {
  background: #fff;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.cg-modal__header {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid rgba(38,35,32,0.08);
}
.cg-modal__header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cg-modal__icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(225,108,71,0.1);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.cg-modal__glyph { font-size: 1.4rem; }
.cg-modal__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(38,35,32,0.55);
  margin: 0;
}
.cg-modal__title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 1.25rem; font-weight: 600; margin: 2px 0 0;
  color: var(--color-foreground, #262320);
  letter-spacing: -0.01em;
}
.cg-modal__subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem; color: rgba(38,35,32,0.6);
  margin: 2px 0 0;
}
.cg-modal__close {
  width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid rgba(38,35,32,0.12);
  background: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex: 0 0 auto;
  color: rgba(38,35,32,0.8);
}
.cg-modal__close:hover { background: #F3F1E9; border-color: rgba(38,35,32,0.2); }

.cg-modal__body { padding: 22px 24px 26px; }
.cg-modal__section { margin-bottom: 22px; }
.cg-modal__section:last-child { margin-bottom: 0; }
.cg-modal__h3 {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 1.0625rem; font-weight: 600;
  color: var(--color-foreground, #262320);
  margin: 0 0 10px; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 8px;
}
.cg-modal__h4 {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 700;
  color: rgba(38,35,32,0.65);
  letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 8px;
  display: inline-flex; align-items: center; gap: 6px;
}
.cg-modal__h4--ok { color: #3E8A60; }
.cg-modal__h4--no { color: #C74A3B; }
.cg-modal__p {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; line-height: 1.55;
  color: rgba(38,35,32,0.78);
  margin: 0;
}

.cg-modal__grid-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
@media (max-width: 560px) { .cg-modal__grid-list { grid-template-columns: 1fr; } }
.cg-modal__grid-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; line-height: 1.4;
  color: rgba(38,35,32,0.82);
}
.cg-modal__grid-item svg { flex: 0 0 auto; margin-top: 2px; }

.cg-modal__chipbox {
  padding: 14px; border-radius: 12px; border: 1px solid;
  margin-bottom: 10px;
}
.cg-modal__chipbox:last-child { margin-bottom: 0; }
.cg-modal__chipbox--symptoms { background: rgba(199,74,59,0.04); border-color: rgba(199,74,59,0.2); }
.cg-modal__chipbox--causes { background: rgba(225,108,71,0.04); border-color: rgba(225,108,71,0.2); }
.cg-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cg-modal__chip {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; color: rgba(38,35,32,0.78);
  background: #fff; padding: 5px 10px; border-radius: 9999px;
  border: 1px solid rgba(38,35,32,0.1);
}

.cg-modal__foodcard {
  border: 1px solid rgba(38,35,32,0.08);
  border-radius: 12px;
  padding: 14px 16px;
  background: #fff;
  margin-bottom: 10px;
}
.cg-modal__foodcard:last-child { margin-bottom: 0; }
.cg-modal__foodcard--avoid { background: #FBF8F2; }

.cg-modal__tiplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cg-modal__tipitem {
  display: flex; align-items: flex-start; gap: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; line-height: 1.45;
  color: rgba(38,35,32,0.78);
}
.cg-modal__tipitem svg { flex: 0 0 auto; margin-top: 3px; }

.cg-modal__tcmnote {
  background: rgba(225,108,71,0.05);
  border-radius: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(225,108,71,0.15);
}

.cg-modal__ctawrap {
  padding-top: 18px;
  border-top: 1px solid rgba(38,35,32,0.08);
  text-align: center;
}
.cg-modal__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 28px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem; font-weight: 700;
  color: #fff; background: var(--color-accent, #E16C47);
  border-radius: 9999px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(225,108,71,0.28);
  transition: background 0.2s, transform 0.2s;
}
.cg-modal__cta:hover { background: #c9563a; transform: translateY(-1px); text-decoration: none; }
.cg-modal__ctasub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; color: rgba(38,35,32,0.55);
  margin: 8px 0 0;
}

@media (max-width: 560px) {
  .cg-modal { width: 100vw; }
  .cg-modal__title { font-size: 1.125rem; }
  .cg-modal__body { padding: 18px 18px 22px; }
}
/* END_SECTION:nooci-constitution-grid */

/* START_SECTION:nooci-editorial (INDEX:49) */
.nooci-editorial {
    background-color: var(--color-background, #F3F1E9);
    color: var(--color-foreground, #262320);
    padding: 6rem 0;
  }

  .nooci-editorial--light {
    color: #F3F1E9;
  }

  .nooci-editorial--light .nooci-editorial__eyebrow {
    color: var(--color-coral, #E16C47);
  }

  .nooci-editorial--light .nooci-editorial__btn {
    background-color: #F3F1E9;
    color: var(--color-foreground, #262320);
  }

  /* ---- Centered layout ---- */
  .nooci-editorial--centered .nooci-editorial__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nooci-editorial--centered .nooci-editorial__heading-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 48rem;
  }

  .nooci-editorial--centered .nooci-editorial__body {
    max-width: 40rem;
  }

  /* ---- Split layout ---- */
  .nooci-editorial--split .nooci-editorial__inner {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 4rem;
    align-items: start;
  }

  .nooci-editorial--split .nooci-editorial__body {
    max-width: 40rem;
  }

  /* ---- Eyebrow ---- */
  .nooci-editorial__eyebrow {
    display: block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-coral, #E16C47);
    margin-bottom: 1.25rem;
  }

  /* ---- Heading ---- */
  .nooci-editorial__heading {
    margin: 0 0 1.75rem;
    line-height: 1.15;
    font-size: clamp(1.75rem, 4vw, 3rem);
  }

  .nooci-editorial__heading--bold {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: 500;
    letter-spacing: -0.03em;
  }

  .nooci-editorial__heading--editorial {
    font-family: var(--font-accent, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.2;
  }

  /* ---- Body ---- */
  .nooci-editorial__body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1.05rem;
    line-height: 1.75;
    opacity: 0.85;
  }

  .nooci-editorial__body p {
    margin: 0 0 1em;
  }

  .nooci-editorial__body p:last-child {
    margin-bottom: 0;
  }

  /* ---- CTA ---- */
  .nooci-editorial__cta {
    margin-top: 2.25rem;
  }

  .nooci-editorial__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85em 2em;
    text-decoration: none;
    background-color: var(--color-coral, #E16C47);
    color: #fff;
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    border: none;
  }

  .nooci-editorial__btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
  }

  @media (max-width: 749px) {
    .nooci-editorial {
      padding: 4rem 0;
    }

    .nooci-editorial--split .nooci-editorial__inner {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
  }
/* END_SECTION:nooci-editorial */

/* START_SECTION:nooci-expert-endorsement (INDEX:51) */
.nooci-expert {
    padding: 72px 0;
  }

  .nooci-expert__inner {
    display: flex;
    align-items: center;
    gap: 48px;
    max-width: 800px;
    margin: 0 auto;
  }

  .nooci-expert__photo {
    flex-shrink: 0;
  }

  .nooci-expert__img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
  }

  .nooci-expert__photo--placeholder {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(38, 35, 32, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #262320;
    opacity: 0.3;
  }

  .nooci-expert__content {
    position: relative;
    background: #FBF8F2;
    border-left: 3px solid #E16C47;
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 2px 0 rgba(38, 35, 32, 0.03), 0 12px 32px rgba(38, 35, 32, 0.06);
  }

  .nooci-expert__quote-mark {
    position: absolute;
    top: 12px;
    left: 18px;
  }

  .nooci-expert__quote {
    font-family: var(--font-accent, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
    line-height: 1.5;
    color: #262320;
    margin: 0 0 20px;
    padding-left: 4px;
  }

  .nooci-expert__meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nooci-expert__name {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: #262320;
  }

  .nooci-expert__creds {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: #262320;
    opacity: 0.6;
    line-height: 1.4;
  }

  @media (max-width: 749px) {
    .nooci-expert { padding: 48px 0; }
    .nooci-expert__inner {
      flex-direction: column;
      text-align: left;
      gap: 20px;
    }
    .nooci-expert__content { padding: 22px 22px 22px 24px; }
    .nooci-expert__quote-mark { display: block; top: 10px; left: 14px; width: 28px; height: 22px; }
    .nooci-expert__quote { font-size: 1rem; padding-top: 8px; }
    .nooci-expert__meta { align-items: flex-start; }
  }
/* END_SECTION:nooci-expert-endorsement */

/* START_SECTION:nooci-founder-bio (INDEX:53) */
.fb {
  padding: 5rem 0;
  background: var(--color-background, #F3F1E9);
}
.fb__header {
  text-align: center;
  margin-bottom: 3rem;
}
.fb__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #E16C47);
  margin-bottom: 0.75rem;
}
.fb__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--color-foreground, #262320);
  margin: 0;
}

.fb__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.fb__media {
  position: relative;
}
.fb__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  background: #e9e5d9;
}
.fb__photo-badge {
  position: absolute;
  bottom: -12px;
  left: -12px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--color-accent, #E16C47);
  padding: 8px 16px;
  border-radius: 9999px;
  box-shadow: 0 6px 18px rgba(225, 108, 71, 0.3);
}

.fb__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.fb__name {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--color-foreground, #262320);
  margin: 0;
  line-height: 1.15;
}
.fb__role {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  color: rgba(38, 35, 32, 0.6);
  margin: -0.75rem 0 0;
  letter-spacing: 0.01em;
}

.fb__credentials {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 20px;
}
.fb__credential {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-foreground, #262320);
}
.fb__credential svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.fb__bio {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-size: 1.125rem;
  line-height: 1.65;
  color: rgba(38, 35, 32, 0.82);
  font-weight: 400;
  letter-spacing: 0.005em;
}
.fb__bio p { margin: 0 0 0.85em; }
.fb__bio p:last-child { margin-bottom: 0; }
.fb__bio em, .fb__bio i { font-style: italic; color: rgba(38,35,32,0.95); }
.fb__bio strong, .fb__bio b { font-weight: 600; color: var(--color-foreground,#262320); font-style: normal; }

.fb__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(38, 35, 32, 0.06);
}
.fb__photo-svg { width: 40%; height: 40%; opacity: 0.3; }

.fb__quote {
  position: relative;
  margin: 1rem 0 0;
  padding: 1.25rem 1.5rem 1.25rem 3rem;
  background: #fff;
  border-radius: 14px;
  border-left: 3px solid var(--color-accent, #E16C47);
}
.fb__quote-mark {
  position: absolute;
  top: 1.25rem;
  left: 1rem;
}
.fb__quote p {
  margin: 0;
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  line-height: 1.35;
  font-weight: 500;
  color: var(--color-foreground, #262320);
  font-style: normal;
}
.fb__quote-attr {
  margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.6);
  font-style: normal;
}

.fb__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 12px 24px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  color: #fff;
  background: var(--color-accent, #E16C47);
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.fb__cta:hover {
  background: #c9563a;
  transform: translateY(-1px);
  text-decoration: none;
}

@media (max-width: 749px) {
  .fb { padding: 3rem 0; }
  .fb__header { margin-bottom: 1.5rem; }
  .fb__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .fb__photo { aspect-ratio: 4 / 4; border-radius: 14px; }
  .fb__credentials { grid-template-columns: 1fr; }
  .fb__quote { padding: 1rem 1.25rem 1rem 2.5rem; }
  .fb__quote-mark { top: 1rem; left: 0.75rem; width: 22px; height: 18px; }
  .fb__quote p { font-size: 1.05rem; }
}
/* END_SECTION:nooci-founder-bio */

/* START_SECTION:nooci-fullwidth-quote (INDEX:55) */
.nooci-fwq{position:relative;overflow:hidden;padding:80px 0;color:var(--color-foreground)}
@media(min-width:990px){.nooci-fwq{padding:140px 0}}
.nooci-fwq--dark{color:var(--color-background,#F3F1E9)}
.nooci-fwq__inner{position:relative;z-index:2;max-width:800px;margin:0 auto;text-align:center}
.nooci-fwq__quote{margin:0;padding:0;border:none}
.nooci-fwq__quote p{font-family:var(--font-accent,'Cormorant Garamond',serif);font-weight:400;font-style:italic;font-size:clamp(1.5rem,4vw,2.75rem);line-height:1.35;margin:0}
.nooci-fwq__attribution{display:block;font-family:var(--font-body);font-style:normal;font-size:0.875rem;font-weight:500;letter-spacing:0.05em;text-transform:uppercase;opacity:0.6;margin-top:2rem}
.nooci-fwq__brandmark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.nooci-fwq__brandmark-img{display:block;width:240px;height:240px;opacity:0.04}
.nooci-fwq--dark .nooci-fwq__brandmark-img{filter:invert(1);opacity:0.06}
@media(min-width:990px){.nooci-fwq__brandmark-img{width:360px;height:360px}}
/* END_SECTION:nooci-fullwidth-quote */

/* START_SECTION:nooci-hero (INDEX:56) */
.nooci-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 75svh;
    max-height: 800px;
    background-color: var(--color-background, #F3F1E9);
    color: var(--color-foreground, #262320);
    overflow: hidden;
  }

  .nooci-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .nooci-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .nooci-hero__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-foreground, #262320);
    pointer-events: none;
  }

  .nooci-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6rem 1.5rem;
    width: 100%;
  }

  .nooci-hero__text {
    max-width: 52rem;
  }

  .nooci-hero__heading {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.08;
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    margin: 0 0 1.5rem;
  }

  .nooci-hero__media ~ .nooci-hero__content .nooci-hero__heading {
    color: #fff;
  }

  .nooci-hero__subheading {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    margin: 0 0 2.5rem;
    opacity: 0.8;
    max-width: 36rem;
    margin-inline: auto;
  }

  .nooci-hero__media ~ .nooci-hero__content .nooci-hero__subheading {
    color: #fff;
  }

  .nooci-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }

  .nooci-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.85em 2em;
    text-decoration: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    border: none;
  }

  .nooci-hero__btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
  }

  .nooci-hero__btn--primary {
    background-color: var(--color-coral, #E16C47);
    color: #fff;
  }

  .nooci-hero__btn--secondary {
    background-color: transparent;
    color: var(--color-foreground, #262320);
    border: 1.5px solid var(--color-foreground, #262320);
  }

  .nooci-hero__media ~ .nooci-hero__content .nooci-hero__btn--secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
  }

  /* ── Decorative sachet behind hero text ── */
  .nooci-hero__sachet-deco {
    position: absolute;
    right: 8%;
    top: 50%;
    z-index: 0;
    pointer-events: none;
    transform: translateY(-30%) rotate(-8deg);
    width: clamp(120px, 18vw, 280px);
    opacity: 0;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, black 40%);
    mask-image: linear-gradient(to top, transparent 0%, black 40%);
    animation: nooci-sachet-hero-reveal 1500ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
  }

  .nooci-hero__sachet-img {
    width: 100%;
    height: auto;
    display: block;
  }

  @keyframes nooci-sachet-hero-reveal {
    from {
      opacity: 0;
      transform: translateY(-10%) rotate(-10deg) scale(0.9);
    }
    to {
      opacity: 0.35;
      transform: translateY(-40%) rotate(-8deg) scale(1);
    }
  }

  /* Sachet sits between background (z:0) and content (z:1) */
  .nooci-hero__media ~ .nooci-hero__sachet-deco {
    z-index: 0;
  }

  .nooci-hero__sachet-deco + .nooci-hero__content {
    z-index: 1;
  }

  @media (max-width: 749px) {
    .nooci-hero__sachet-deco {
      right: -5%;
      width: clamp(80px, 25vw, 160px);
      opacity: 0;
    }
  }

  .nooci-hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.5;
    color: var(--color-foreground, #262320);
  }

  /* Hide scroll indicator on mobile — too tight with the CTA stack */
  @media (max-width: 749px) {
    .nooci-hero__scroll { display: none; }
  }

  .nooci-hero__media ~ .nooci-hero__scroll {
    color: #fff;
  }

  .nooci-hero__scroll-dot {
    animation: nooci-scroll-bounce 2s ease-in-out infinite;
  }

  @keyframes nooci-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); opacity: 0.3; }
  }

  @media (max-width: 749px) {
    .nooci-hero__content {
      padding: 4rem 1.25rem;
    }

    .nooci-hero__actions {
      flex-direction: column;
      align-items: center;
    }

    .nooci-hero__btn {
      width: 100%;
      max-width: 18rem;
    }
  }
/* END_SECTION:nooci-hero */

/* START_SECTION:nooci-how-to-enjoy (INDEX:57) */
.hte {
  /* !important guards against any global section bg override */
  background: var(--hte-bg, #E16C47) !important;
  background-color: var(--hte-bg, #E16C47) !important;
  color: var(--hte-fg, #ffffff);
  padding: 3.5rem 0;
}
.hte__inner {
  /* Inline-flex so the box hugs its content, then center it on the
     section. Replaces the grid with 1fr right column that was
     stretching the box to 900px and pushing copy left of center. */
  display: inline-flex;
  align-items: center; /* vertical center between video + text */
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}
/* Force the .page-width parent to center the inline-flex inner */
.hte > .hte__inner { display: flex; }
.hte__video-wrap { flex: 0 0 auto; width: 280px; }
.hte__content { flex: 0 1 auto; max-width: 380px; }

.hte__video-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: 0 14px 34px rgba(38, 35, 32, 0.18);
}
.hte__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hte__video--placeholder { display: flex; align-items: center; justify-content: center; }
.hte__video--placeholder svg { width: 40%; height: auto; opacity: 0.5; }

.hte__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* On desktop the inner grid is align-items: center, so the content
     column is vertically centered against the video already. The flex
     content stays left-aligned for readability — only the wrapper is
     centered. */
}

.hte__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  margin-top: 1.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hte-bg, #E16C47);
  background: #ffffff;
  border-radius: 9999px;
  text-decoration: none;
  width: fit-content;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.hte__cta:hover {
  background: #F3F1E9;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  color: var(--hte-bg, #E16C47);
}
.hte__cta svg { transition: transform 0.2s; }
.hte__cta:hover svg { transform: translateX(3px); }

.hte__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hte-fg);
  opacity: 0.85;
  margin: 0;
}
.hte__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--hte-fg);
  margin: 0 0 0.75rem;
}

.hte__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  counter-reset: hte-step;
}
.hte__step {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--hte-fg);
}
.hte__step-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #ffffff;
  color: var(--hte-bg, #E16C47);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 6px rgba(38, 35, 32, 0.14);
}
.hte__step-text { font-weight: 500; }

@media (max-width: 749px) {
  .hte { padding: 2.5rem 0; }
  .hte > .hte__inner,
  .hte__inner {
    flex-direction: column;
    gap: 1.25rem;
    max-width: 460px;
    align-items: stretch;
  }
  .hte__video-wrap {
    aspect-ratio: 16 / 10;
    max-height: 260px;
    width: 100%;
  }
  .hte__content { max-width: 100%; }
  .hte__heading { font-size: 1.375rem; }
  .hte__step { font-size: 0.9375rem; }
  .hte__cta { align-self: flex-start; }
}
/* END_SECTION:nooci-how-to-enjoy */

/* START_SECTION:nooci-image-text (INDEX:58) */
.nooci-it {
    padding: 4rem 0;
  }

  .nooci-it__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }

  @media (min-width: 990px) {
    .nooci-it {
      padding: 6rem 0;
    }

    .nooci-it__grid {
      grid-template-columns: 1fr 1fr;
      gap: 0;
    }

    .nooci-it--image-right .nooci-it__media {
      order: 2;
    }

    .nooci-it--image-right .nooci-it__content {
      order: 1;
    }
  }

  .nooci-it__media {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
  }

  .nooci-it__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
  }

  @media (min-width: 990px) {
    .nooci-it__img {
      aspect-ratio: 3 / 4;
      min-height: 500px;
    }
  }

  /* ── Compact mode: smaller image side, centered ── */
  .nooci-it--compact .nooci-it__img {
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin: 0 auto;
    border-radius: 12px;
  }
  @media (min-width: 990px) {
    .nooci-it--compact .nooci-it__grid {
      grid-template-columns: 0.7fr 1fr;
      gap: 2rem;
      align-items: center;
    }
    .nooci-it--compact .nooci-it__img {
      max-width: 320px;
      min-height: 0;
      aspect-ratio: 1 / 1;
    }
    .nooci-it--compact .nooci-it__content {
      padding: 1rem 2rem;
    }
  }

  .nooci-it__media--placeholder {
    background: #e8e6de;
    aspect-ratio: 4 / 5;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nooci-it__placeholder {
    width: 60%;
    height: auto;
    opacity: 0.3;
  }

  .nooci-it__content {
    padding: 2rem 0;
  }

  @media (min-width: 990px) {
    .nooci-it__content {
      padding: var(--space-3xl, 4rem);
    }
  }

  .nooci-it__eyebrow {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent, #E16C47);
    margin: 0 0 1rem;
  }

  .nooci-it__heading {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: 500;
    letter-spacing: -0.03em;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.15;
    color: var(--color-foreground, #262320);
    margin: 0 0 1.25rem;
  }

  .nooci-it__body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-foreground, #262320);
    opacity: 0.8;
    margin: 0 0 2rem;
  }

  .nooci-it__body p {
    margin: 0 0 1em;
  }

  .nooci-it__body p:last-child {
    margin-bottom: 0;
  }

  .nooci-it__cta {
    display: inline-block;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: var(--color-foreground, #262320);
    border-radius: 9999px;
    padding: 0.85em 2em;
    transition: opacity 0.25s ease;
  }

  .nooci-it__cta:hover {
    opacity: 0.85;
  }
/* END_SECTION:nooci-image-text */

/* START_SECTION:nooci-ingredients-detail (INDEX:59) */
/* ── NOOCI Ingredients Detail — grid cards + modal overlays ── */

.nid {
  width: 100%;
  padding: 5rem 0;
  background: #F3F1E9;
}

.nid__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Header ── */
.nid__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.nid__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E16C47;
  margin-bottom: 0.75rem;
}

.nid__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0 0 0.6rem;
  line-height: 1.15;
}

.nid__subtitle {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: #262320;
  margin: 0;
  line-height: 1.5;
  max-width: 36rem;
  margin-inline: auto;
  opacity: 0.72;
}
.nid__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #262320;
  background: transparent;
  border: 1px solid rgba(38, 35, 32, 0.25);
  border-radius: 999px;
  text-decoration: none;
  transition: all 180ms ease;
}
.nid__cta:hover {
  background: #262320;
  color: #F3F1E9;
  border-color: #262320;
}
.nid__cta svg {
  transition: transform 180ms ease;
}
.nid__cta:hover svg {
  transform: translateX(3px);
}

/* Footer CTA after the cards — centered, filled brand pill */
.nid__footer-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.nid__cta--footer {
  margin-top: 0;
  padding: 0.85rem 1.75rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  background: #E16C47;
  border: 0;
  box-shadow: 0 6px 18px rgba(225, 108, 71, 0.28);
}
.nid__cta--footer:hover {
  background: #c9563a;
  color: #fff;
  border: 0;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(225, 108, 71, 0.35);
}

/* Native smooth scroll when anchoring to the hero */
html { scroll-behavior: smooth; }
#pdp-hero { scroll-margin-top: 80px; }

/* ── Slider — scrollable carousel across all breakpoints ──
   Make the slider AND its edge-fade extend all the way to the
   viewport edges (break out of page-width's 1.5rem padding). ── */
.nid__slider-wrap {
  position: relative;
  margin-top: 1.5rem;
  /* Pull out of .page-width's 1.5rem padding so fade touches viewport */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.nid__grid {
  --nid-gap: 0.875rem;
  --nid-edge: 1.5rem;
  display: flex;
  gap: var(--nid-gap);
  overflow-x: auto;
  /* Explicitly hide vertical overflow — setting overflow-x: auto
     implicitly sets overflow-y to auto too, which produces a weird
     internal vertical scrollbar on desktop. */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--nid-edge);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Pad the inside so first/last cards aren't glued to viewport edges */
  padding: 4px var(--nid-edge) 0.5rem;
  margin: 0;
  scroll-behavior: smooth;
}
.nid__grid::-webkit-scrollbar { display: none; }

@media (min-width: 750px) {
  /* On desktop, the slider sits inside the page-width container — no negative margin */
  .nid__slider-wrap { margin-left: 0; margin-right: 0; }
  .nid__grid {
    --nid-gap: 1rem;
    --nid-edge: 0px;
    padding: 4px 0 0.5rem;
  }
}
@media (min-width: 1100px) {
  .nid__grid { --nid-gap: 1.25rem; }
}

/* Edge fades — hint that more content lives off-screen */
.nid__fade {
  position: absolute;
  top: 0;
  bottom: 0.5rem;
  width: 48px;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}
.nid__fade--left {
  left: 0;
  background: linear-gradient(to right, var(--nid-section-bg, #F3F1E9), transparent);
}
.nid__fade--right {
  right: 0;
  background: linear-gradient(to left, var(--nid-section-bg, #F3F1E9), transparent);
}
.nid__slider-wrap[data-at-start] .nid__fade--left,
.nid__slider-wrap[data-at-end] .nid__fade--right { opacity: 0; }

/* Arrows */
.nid__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #fff;
  border: 1px solid rgba(38, 35, 32, 0.12);
  color: #262320;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(38, 35, 32, 0.08);
  transition: background 0.15s, opacity 0.2s, transform 0.15s, box-shadow 0.15s;
  padding: 0;
}
.nid__arrow:hover { background: #F3F1E9; box-shadow: 0 8px 22px rgba(38, 35, 32, 0.12); }
.nid__arrow:active { transform: translateY(-50%) scale(0.96); }
.nid__arrow[disabled] { opacity: 0; pointer-events: none; }
.nid__arrow--prev { left: -8px; }
.nid__arrow--next { right: -8px; }
@media (min-width: 750px) {
  .nid__arrow--prev { left: -20px; }
  .nid__arrow--next { right: -20px; }
}

/* Hide arrows on small mobile — scroll-by-swipe is natural, dots still visible */
@media (max-width: 560px) {
  .nid__arrow { display: none; }
}

/* Pager dots */
.nid__pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
  min-height: 8px;
}
.nid__pager:empty { display: none; }
.nid__page-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(38, 35, 32, 0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, width 0.2s;
}
.nid__page-dot:hover { background: rgba(38, 35, 32, 0.35); }
.nid__page-dot--active {
  background: #E16C47;
  width: 18px;
}

/* ── Card ── */
.nid__card {
  /* Mobile: ~2.5 cards visible — 38vw + gap lets the third peek in */
  flex: 0 0 38vw;
  max-width: 38vw;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid rgba(38, 35, 32, 0.12);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  padding: 0;
  text-decoration: none;
  color: inherit;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nid__card:hover,
.nid__card:focus-visible {
  border-color: rgba(38, 35, 32, 0.28);
  transform: translateY(-2px);
}

.nid__card:focus-visible {
  outline: 2px solid #E16C47;
  outline-offset: 2px;
}

/* Tablet: 4 cards visible */
@media (min-width: 750px) {
  .nid__card {
    flex: 0 0 calc((100% - 3 * var(--nid-gap)) / 4);
    max-width: calc((100% - 3 * var(--nid-gap)) / 4);
  }
}
/* Desktop: 5 cards visible */
@media (min-width: 1100px) {
  .nid__card {
    flex: 0 0 calc((100% - 4 * var(--nid-gap)) / 5);
    max-width: calc((100% - 4 * var(--nid-gap)) / 5);
  }
}

/* ── Card image — square ── */
.nid__card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: rgba(38, 35, 32, 0.04);
}

.nid__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nid__card:hover .nid__card-img {
  transform: scale(1.04);
}

.nid__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nid__card-placeholder-svg {
  width: 40%;
  height: auto;
  opacity: 0.15;
}

/* ── Card body ── */
.nid__card-body {
  padding: 1rem 1.25rem 1.25rem;
}

.nid__card-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0 0 0.15rem;
  line-height: 1.3;
}

.nid__card-tcm {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
  color: #262320;
  opacity: 0.6;
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.nid__card-benefit {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  color: #262320;
  opacity: 0.72;
  margin: 0;
}

/* ── Modal overlay ── */
.nid__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.nid__modal--open {
  opacity: 1;
  visibility: visible;
}

.nid__modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(38, 35, 32, 0.45);
  cursor: pointer;
}

.nid__modal-panel {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: #F3F1E9;
  border-radius: 16px;
  transform: translateY(12px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nid__modal--open .nid__modal-panel {
  transform: translateY(0);
}

/* ── Modal close button ── */
.nid__modal-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 12px 12px 0 0;
  background: rgba(38, 35, 32, 0.06);
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: #262320;
  transition: background 0.2s ease;
}

.nid__modal-close:hover,
.nid__modal-close:focus-visible {
  background: rgba(38, 35, 32, 0.12);
}

.nid__modal-close:focus-visible {
  outline: 2px solid #E16C47;
  outline-offset: 2px;
}

/* ── Modal image ── */
.nid__modal-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: rgba(38, 35, 32, 0.04);
}

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

/* ── Modal content ── */
.nid__modal-content {
  padding: 1.75rem 2rem 2.25rem;
}

.nid__modal-name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing: -0.03em;
  color: #262320;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}

.nid__modal-tcm {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 1.05rem;
  color: #262320;
  opacity: 0.55;
  margin: 0 0 1.25rem;
  line-height: 1.3;
}

.nid__modal-desc,
.nid__modal-history,
.nid__modal-dosage {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.65;
  color: #262320;
  margin-bottom: 1.5rem;
}

.nid__modal-desc p,
.nid__modal-history p,
.nid__modal-dosage p {
  margin: 0 0 0.5rem;
}

.nid__modal-label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E16C47;
  margin: 0 0 0.5rem;
}

/* ── Mobile tweaks ── */
@media (max-width: 749px) {
  .nid {
    padding: 3.5rem 0;
  }

  .nid__header {
    margin-bottom: 2.5rem;
  }

  .nid__card {
    flex: 0 0 68%;
    max-width: 68%;
  }

  .nid__modal-content {
    padding: 1.25rem 1.5rem 2rem;
  }

  .nid__modal-panel {
    max-height: 85vh;
    border-radius: 12px;
  }
}
/* END_SECTION:nooci-ingredients-detail */

/* START_SECTION:nooci-ingredients (INDEX:60) */
/* ── Ingredients Story — editorial ingredient showcase ── */
.ingredients-story {
  width: 100%;
  padding: 4rem 0;
}

.ingredients-story__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ── Header ── */
.ingredients-story__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.ingredients-story__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.ingredients-story__heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  color: var(--color-foreground);
  margin: 0 0 0.6rem;
  line-height: 1.15;
}

.ingredients-story__subtitle {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.5;
  max-width: 36rem;
  margin-inline: auto;
}

/* ── Row — desktop grid, mobile horizontal scroll ── */
.ingredients-story__row {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.5rem;
}

.ingredients-story__row::-webkit-scrollbar {
  display: none;
}

@media (min-width: 750px) {
  .ingredients-story__row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
}

/* ── Ingredient card ── */
.ingredients-story__card {
  flex: 0 0 72%;
  max-width: 72%;
  scroll-snap-align: start;
}

@media (min-width: 750px) {
  .ingredients-story__card {
    flex: none;
    max-width: none;
  }
}

/* ── Image area ── */
.ingredients-story__image-area {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  background: rgba(0, 0, 0, 0.03);
}

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

.ingredients-story__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.03);
}

.ingredients-story__placeholder-svg {
  width: 50%;
  height: auto;
  opacity: 0.2;
}

/* ── Text area ── */
.ingredients-story__text-area {
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
  padding-top: 1rem;
}

.ingredients-story__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
  margin: 0 0 0.2rem;
  line-height: 1.3;
}

.ingredients-story__tcm-name {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-navy);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}

.ingredients-story__description {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-foreground);
  opacity: 0.75;
  margin: 0 0 0.6rem;
}

.ingredients-story__badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-coral);
  letter-spacing: 0.01em;
  line-height: 1.4;
}

/* ── Footer CTA ── */
.ingredients-story__footer {
  text-align: center;
  margin-top: 3rem;
}

.ingredients-story__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-background);
  background: var(--color-foreground);
  border: none;
  border-radius: 9999px;
  padding: 0.85em 2em;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.ingredients-story__cta:hover,
.ingredients-story__cta:focus-visible {
  opacity: 0.85;
}

/* ── Mobile: full-viewport scroll with inline padding ── */
@media (max-width: 749px) {
  .ingredients-story {
    padding: 3rem 0;
  }

  .ingredients-story__header {
    margin-bottom: 2.5rem;
  }

  .ingredients-story__row {
    /* Full-bleed: scroll area reaches viewport edges */
    margin-left: calc(-1 * var(--page-padding, 16px));
    margin-right: calc(-1 * var(--page-padding, 16px));
    padding-left: 0;
    padding-right: 0;
  }
  /* Inline padding via spacers so first/last cards align with grid */
  .ingredients-story__row::before,
  .ingredients-story__row::after {
    content: '';
    flex-shrink: 0;
    width: var(--page-padding, 16px);
  }

  .ingredients-story__card {
    flex: 0 0 72%;
    max-width: 72%;
  }
}
/* END_SECTION:nooci-ingredients */

/* START_SECTION:nooci-inline-cta (INDEX:61) */
/* Force section wrapper to inherit our background — theme-level alternating
   section background rules would otherwise paint white over the colored band. */
.section-inline-cta { background: var(--bg, #F3F1E9) !important; }
.inline-cta { padding: 2.5rem 0; background: var(--bg) !important; }
.inline-cta__inner { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inline-cta__eyebrow {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent, #E16C47);
  margin: 0;
}
.inline-cta__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--color-foreground, #262320); margin: 0;
  max-width: 560px;
}
.inline-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; margin-top: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; font-weight: 700;
  color: #fff; background: var(--color-accent, #E16C47);
  border-radius: 9999px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(225,108,71,0.28);
  transition: background 0.2s, transform 0.2s;
}
.inline-cta__btn:hover { background: #c9563a; transform: translateY(-1px); text-decoration: none; }
.inline-cta__micro {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; color: rgba(38,35,32,0.55);
  margin: 2px 0 0;
}
/* Orange (accent-filled) scheme — inverted contrast */
.inline-cta--orange { --bg: #E16C47 !important; background: #E16C47 !important; }
.inline-cta--orange .inline-cta__eyebrow { color: rgba(255,255,255,0.85); }
.inline-cta--orange .inline-cta__heading { color: #fff; }
.inline-cta--orange .inline-cta__btn {
  background: #fff;
  color: #c9563a;
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.inline-cta--orange .inline-cta__btn:hover { background: #F3F1E9; color: #a84429; }
.inline-cta--orange .inline-cta__micro { color: rgba(255,255,255,0.82); }

/* Dark scheme (optional — deep brand background) */
.inline-cta--dark { --bg: #262320 !important; background: #262320 !important; }
.inline-cta--dark .inline-cta__eyebrow { color: rgba(243,241,233,0.7); }
.inline-cta--dark .inline-cta__heading { color: #F3F1E9; }
.inline-cta--dark .inline-cta__micro { color: rgba(243,241,233,0.65); }

@media (max-width: 749px) { .inline-cta { padding: 2rem 0; } }
/* END_SECTION:nooci-inline-cta */

/* START_SECTION:nooci-is-this-for-you (INDEX:62) */
.itfy { padding: 4rem 0; background: {{ section.settings.bg_color | default: '#F3F1E9' }}; }
.itfy__inner { max-width: 960px; margin: 0 auto; text-align: center; }
.itfy__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent, #E16C47);
  padding: 4px 12px; background: rgba(225,108,71,0.08);
  border-radius: 9999px; margin-bottom: 0.75rem;
}
.itfy__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-foreground, #262320); margin: 0 0 0.5rem;
}
.itfy__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem; line-height: 1.55;
  color: rgba(38,35,32,0.7); margin: 0 auto 2rem; max-width: 560px;
}
.itfy__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  text-align: left; margin-top: 1rem;
}
.itfy__col {
  background: #fff; border-radius: 14px; padding: 24px 24px 20px;
  border: 1px solid rgba(38,35,32,0.08);
}
.itfy__col--no { background: #FBF8F2; }
.itfy__col-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(38,35,32,0.08);
}
.itfy__col-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px;
}
.itfy__col--yes .itfy__col-icon { background: rgba(76, 149, 108, 0.14); color: #3E8A60; }
.itfy__col--no  .itfy__col-icon { background: rgba(38,35,32,0.08); color: rgba(38,35,32,0.55); }
.itfy__col-title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 1rem; font-weight: 600; margin: 0;
  color: var(--color-foreground, #262320);
}
.itfy__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.itfy__item {
  position: relative; padding-left: 22px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem; line-height: 1.5;
  color: rgba(38,35,32,0.82);
}
.itfy__col--yes .itfy__item::before {
  content: ''; position: absolute; left: 4px; top: 0.55em;
  width: 8px; height: 8px; border-radius: 9999px; background: #4C956C;
}
.itfy__col--no .itfy__item::before {
  content: ''; position: absolute; left: 2px; top: 0.65em;
  width: 10px; height: 2px; background: rgba(38,35,32,0.35);
}
.itfy__cta-row { margin-top: 2rem; text-align: center; }
.itfy__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem; font-weight: 700; color: #fff;
  background: var(--color-accent, #E16C47);
  border-radius: 9999px; text-decoration: none;
  box-shadow: 0 6px 18px rgba(225,108,71,0.28);
  transition: background 0.2s, transform 0.2s;
}
.itfy__cta:hover { background: #c9563a; transform: translateY(-1px); text-decoration: none; }
@media (max-width: 749px) {
  .itfy { padding: 3rem 0; }
  .itfy__grid { grid-template-columns: 1fr; gap: 14px; }
  .itfy__col { padding: 20px; }
}
/* END_SECTION:nooci-is-this-for-you */

/* START_SECTION:nooci-organ-clock (INDEX:63) */
.nooci-organ-clock {
  padding: 5rem 0;
  background-color: #F3F1E9;
}

.nooci-organ-clock__head {
  max-width: 44rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.nooci-organ-clock__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 1rem;
}

.nooci-organ-clock__heading {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #262320;
  margin: 0 0 1rem;
}

.nooci-organ-clock__intro {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(38, 35, 32, 0.72);
}

.nooci-organ-clock__intro p { margin: 0 0 0.5rem; }
.nooci-organ-clock__intro p:last-child { margin-bottom: 0; }

.nooci-organ-clock__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  max-width: 60rem;
  margin: 0 auto 2.5rem;
}

.nooci-organ-clock__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0.5rem;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid rgba(38, 35, 32, 0.08);
  min-height: 92px;
  text-align: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.nooci-organ-clock__cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(38, 35, 32, 0.08);
}

.nooci-organ-clock__cell--active {
  background: #262320;
  border-color: #262320;
  color: #F3F1E9;
  box-shadow: 0 6px 22px rgba(225, 108, 71, 0.25);
}

.nooci-organ-clock__time {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(38, 35, 32, 0.55);
  margin-bottom: 0.25rem;
}

.nooci-organ-clock__cell--active .nooci-organ-clock__time {
  color: rgba(243, 241, 233, 0.7);
}

.nooci-organ-clock__organ {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #262320;
  line-height: 1.2;
}

.nooci-organ-clock__cell--active .nooci-organ-clock__organ {
  color: #F3F1E9;
}

.nooci-organ-clock__active-pill {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F3F1E9;
  background: #E16C47;
  border-radius: 9999px;
  padding: 3px 8px;
}

.nooci-organ-clock__notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
}

.nooci-organ-clock__note {
  padding: 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px;
}

.nooci-organ-clock__note-window {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 0.5rem;
}

.nooci-organ-clock__note-organ {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #262320;
  margin: 0 0 0.5rem;
}

.nooci-organ-clock__note-body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(38, 35, 32, 0.72);
}

.nooci-organ-clock__note-body p { margin: 0 0 0.5rem; }
.nooci-organ-clock__note-body p:last-child { margin-bottom: 0; }

@media (max-width: 749px) {
  .nooci-organ-clock { padding: 3.5rem 0; }
  .nooci-organ-clock__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
  }
  .nooci-organ-clock__cell { min-height: 80px; padding: 0.875rem 0.375rem; }
  .nooci-organ-clock__time { font-size: 0.625rem; }
  .nooci-organ-clock__organ { font-size: 0.8125rem; }
}
/* END_SECTION:nooci-organ-clock */

/* START_SECTION:nooci-pdp-product-info (INDEX:64) */
/* ========================================
   Sticky Bar — selling-plan toggle, pricing, save badge
   (this section reserves a stable min-height on the meta
    column + uses visibility:hidden on the frequency row
    so the bar never jitters when toggling subscribe/onetime)
   ======================================== */
.pdp-sticky-bar__meta { gap: 0.25rem; min-height: 44px; }
.pdp-sticky-bar__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #262320;
}
.pdp-sticky-bar__sp-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(38, 35, 32, 0.06);
  border: 1px solid rgba(38, 35, 32, 0.1);
  border-radius: 9999px;
  padding: 2px;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
}
.pdp-sticky-bar__sp-select-wrap {
  display: none;
  position: relative;
  align-items: center;
  flex-shrink: 0;
}
.pdp-sticky-bar__sp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(38, 35, 32, 0.06);
  border: 1px solid rgba(38, 35, 32, 0.1);
  border-radius: 9999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: #262320;
  padding: 7px 24px 7px 12px;
  cursor: pointer;
  line-height: 1.2;
}
.pdp-sticky-bar__sp-select-caret {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: #262320;
}
@media (max-width: 749px) {
  .pdp-sticky-bar__sp-toggle { display: none; }
  .pdp-sticky-bar__sp-select-wrap { display: inline-flex; }
}
.theme-dark .pdp-sticky-bar__sp-select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F3F1E9;
}
.theme-dark .pdp-sticky-bar__sp-select-caret { color: #F3F1E9; }
.pdp-sticky-bar__sp-pill {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 5px 12px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: rgba(38, 35, 32, 0.62);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  white-space: nowrap;
  line-height: 1.3;
}
.pdp-sticky-bar__sp-pill--active {
  background: #262320;
  color: #F3F1E9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pdp-sticky-bar__sp-pill:hover:not(.pdp-sticky-bar__sp-pill--active) {
  color: #262320;
}
.pdp-sticky-bar__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  flex-wrap: wrap;
}
.pdp-sticky-bar__price {
  font-size: clamp(0.8125rem, 2.5vw, 1rem);
  font-weight: 700;
  color: #262320;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pdp-sticky-bar__compare {
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}
.pdp-sticky-bar__save-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: #E16C47;
  border-radius: 9999px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.4;
}
/* `display: inline-flex` above overrides the browser default
   `[hidden] { display: none }` — restore explicitly. */
.pdp-sticky-bar__save-badge[hidden] { display: none !important; }
.pdp-sticky-bar__frequency {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  color: rgba(38, 35, 32, 0.55);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Keep the frequency row's vertical space when toggling. */
.pdp-sticky-bar__frequency[hidden] {
  display: block !important;
  visibility: hidden;
}
.theme-dark .pdp-sticky-bar__sp-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.theme-dark .pdp-sticky-bar__sp-pill { color: rgba(255, 255, 255, 0.55); }
.theme-dark .pdp-sticky-bar__sp-pill--active {
  background: #F3F1E9;
  color: #262320;
}
.theme-dark .pdp-sticky-bar__sp-pill:hover:not(.pdp-sticky-bar__sp-pill--active) {
  color: rgba(255, 255, 255, 0.85);
}
.theme-dark .pdp-sticky-bar__compare { color: rgba(255, 255, 255, 0.35); }

/* ========================================
   PDP Hero — 2-column product detail
   ======================================== */

.pdp-hero {
  display: block;
  padding-block-start: 0;
  padding-block-end: var(--space-lg, 2rem);
  overflow-x: clip;
  max-width: 100%;
}
/* Reserve space at the bottom of the page for the sticky add-to-cart bar
   so nothing hides behind it on mobile */
@media (max-width: 749px) {
  pdp-hero ~ *, pdp-hero ~ section:last-of-type {
    padding-bottom: 90px;
  }
}
/* Top padding handled by pdp-breadcrumb bottom padding for equal spacing */

.pdp-hero__grid {
  display: grid;
  /* minmax(0, 1fr) — NOT plain 1fr. `1fr` defaults to minmax(auto, 1fr),
     which lets intrinsic-min-width children (like the 8-slide flex
     .pdp-hero__carousel) push the track wider than the viewport on
     mobile, overflowing the page to the right. minmax(0, 1fr) caps the
     min at 0 so the carousel is forced to fit the column. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.5rem;
}

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

.pdp-hero__gallery-sticky {
  position: relative;
}

/* Mobile: full-bleed gallery — touches viewport left/right edges */
@media (max-width: 749px) {
  .pdp-hero__gallery {
    margin-left: -16px;
    margin-right: -16px;
  }
  .pdp-hero__main-image {
    border-radius: 0;
  }
  .pdp-hero__thumbnails {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.pdp-hero__main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--gallery-bg, var(--color-background, #F3F1E9));
  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 — GIF-like autoplay, no controls */
.pdp-hero__slide video,
.pdp-hero__slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* prevents accidental clicks opening fullscreen */
}
/* Belt-and-braces: hide any user-agent-rendered controls */
.pdp-hero__slide video::-webkit-media-controls,
.pdp-hero__slide video::-webkit-media-controls-panel,
.pdp-hero__slide video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
}
.pdp-hero__slide video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
/* Smooth image transitions when switching carousel slides */
.pdp-hero__slide img {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.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, #262320);
  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, #F3F1E9);
  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, #262320);
}

.pdp-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  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, #262320);
}

.pdp-hero__rating-count {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-secondary, #71717a);
}

/* Eyebrow + Title group — tight spacing between product name and headline */
.pdp-hero__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px between eyebrow and headline */
}
.pdp-hero__eyebrow-title {
  display: block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent, #E16C47);
}

/* Title — 20% smaller per design direction */
.pdp-hero__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-foreground, #262320);
}

/* Price */
.pdp-hero__price {
  display: flex;
  flex-direction: row;
  /* center-align keeps the -N% pill visually centered with the two
     prices instead of sitting on the text baseline (which makes it
     hang lower than the numbers). Current + compare share the same
     font-size so centering doesn't misalign them either. */
  align-items: center;
  gap: 0.5rem;
  margin-block-start: -0.25rem;
}
.pdp-hero__price-current,
.pdp-hero__price-compare { line-height: 1; }

/* Price — deliberately understated; the product sells itself, not
   the number. Current + compare use the same font-size, differentiated
   only by weight and strikethrough. */
.pdp-hero__price-current {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
}

.pdp-hero__price-compare {
  font-size: 1.0625rem;
  font-weight: 400;
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
}

.pdp-hero__price-save {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: #E16C47;
  border: none;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.pdp-hero__price-save[hidden] { display: none; }

/* Total savings line */
.pdp-hero__price-total-savings {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #E16C47;
  font-weight: 500;
}
.pdp-hero__price-total-savings strong { font-weight: 700; }
.pdp-hero__price-total-savings[hidden] { display: none; }


/* Subheadline — rich text content from product.description */
.pdp-hero__subheadline {
  margin: 0;
  color: var(--color-text-secondary, #666);
  line-height: 1.625;
  font-size: 1rem;
}
.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: 600;
  color: var(--color-foreground, #262320);
}
.pdp-hero__subheadline em,
.pdp-hero__subheadline i { font-style: italic; }
.pdp-hero__subheadline a {
  color: var(--color-accent, #E16C47);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-hero__subheadline a:hover { text-decoration-thickness: 2px; }
.pdp-hero__subheadline ul,
.pdp-hero__subheadline ol {
  margin: 0.5em 0 0.75em;
  padding-left: 1.25em;
}
.pdp-hero__subheadline li { margin: 0.25em 0; }
.pdp-hero__subheadline h1,
.pdp-hero__subheadline h2,
.pdp-hero__subheadline h3 {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  margin: 0.75em 0 0.4em;
  color: var(--color-foreground, #262320);
  letter-spacing: -0.02em;
}
.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 blockquote {
  margin: 0.75em 0;
  padding: 0.25em 0.75em;
  border-left: 2px solid var(--color-accent, #E16C47);
  font-style: italic;
  color: rgba(38, 35, 32, 0.7);
}

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

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

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

.pdp-hero__linked-swatch--active {
  border-color: var(--color-foreground, #262320);
  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, #262320);
  background: transparent;
  transition: all 200ms ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.pdp-hero__linked-pill:hover {
  border-color: var(--color-foreground, #262320);
}

.pdp-hero__linked-pill--active {
  background-color: var(--color-foreground, #262320);
  border-color: var(--color-foreground, #262320);
  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, #262320);
  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, #262320);
}

.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, #262320);
  background: transparent;
  transition: all 200ms ease;
  white-space: nowrap;
}

.pdp-hero__pill:hover {
  border-color: var(--color-foreground, #262320);
}

.pdp-hero__pill--active {
  background-color: var(--color-foreground, #262320);
  border-color: var(--color-foreground, #262320);
  color: #fff;
}

.pdp-hero__pill--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── 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, #262320);
  transition: background 0.25s ease, color 0.25s ease;
  padding: 0;
}
.pdp-hero__qty-btn:hover {
  background: rgba(45, 138, 35, 0.07);
  color: #E16C47;
}
.pdp-hero__qty-btn:active {
  background: rgba(45, 138, 35, 0.13);
  color: #E16C47;
}
.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, #262320);
  -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: #E16C47;
  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 rgba(45, 138, 35, 0.25);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}

.pdp-hero__cta:hover {
  box-shadow: 0 4px 16px rgba(45, 138, 35, 0.4);
  transform: translateY(-1px);
}

.pdp-hero__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 138, 35, 0.25);
}

/* 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: #c9563a; box-shadow: 0 2px 12px rgba(225, 108, 71, 0.35); }
.pdp-hero__cta.is-added { background-color: #c9563a; }
.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); } }

/* ── Stats Strip ── */
.pdp-hero__stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(225, 108, 71, 0.06);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.75rem;
}
.pdp-hero__stat {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #262320;
  white-space: nowrap;
}
.pdp-hero__stat svg { flex-shrink: 0; }
.pdp-hero__stat-sep {
  color: rgba(38, 35, 32, 0.25);
  font-size: 13px;
}

/* ── Selling Plan Radio Cards ── */
.pdp-hero__sp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}
.pdp-hero__sp-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1.5px solid rgba(38, 35, 32, 0.15);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.pdp-hero__sp-card--active {
  border-color: #E16C47;
}
.pdp-hero__sp-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pdp-hero__sp-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(38, 35, 32, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease;
  margin-top: 3px;
}
.pdp-hero__sp-card--active .pdp-hero__sp-card-radio {
  border-color: #E16C47;
}
.pdp-hero__sp-card--active .pdp-hero__sp-card-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E16C47;
}
.pdp-hero__sp-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pdp-hero__sp-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pdp-hero__sp-card-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #262320;
}
.pdp-hero__sp-card-badge {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #E16C47;
  color: #fff;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pdp-hero__sp-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pdp-hero__sp-card-detail {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(38, 35, 32, 0.55);
}
.pdp-hero__sp-card-frequency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #E16C47;
  background: rgba(225, 108, 71, 0.09);
  border-radius: 9999px;
  letter-spacing: 0.01em;
}
.pdp-hero__sp-card-frequency svg { flex-shrink: 0; }
.pdp-hero__sp-card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  margin-left: auto;
}
.pdp-hero__sp-card-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(38, 35, 32, 0.4);
  text-decoration: line-through;
}
.pdp-hero__sp-card-price {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #262320;
}

/* ── Subscription perks inside card ── */
.pdp-hero__sp-card-perks-divider {
  height: 1px;
  background: rgba(225, 108, 71, 0.15);
  margin: 8px 0 6px;
}
.pdp-hero__sp-gift {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(225,108,71,0.10), rgba(243,232,145,0.35));
  border: 1px dashed rgba(225,108,71,0.45);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  line-height: 1.3;
  color: #262320;
}
.pdp-hero__sp-gift svg { color: #E16C47; flex: 0 0 auto; }
.pdp-hero__sp-gift strong { font-weight: 700; }
.pdp-hero__sp-gift > span:first-of-type { flex: 1; }
.pdp-hero__sp-gift-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.pdp-hero__sp-gift-compare {
  font-size: 0.6875rem;
  color: rgba(38, 35, 32, 0.45);
  font-weight: 500;
}
.pdp-hero__sp-gift-free {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #2F8B5C;
  padding: 2px 7px;
  border-radius: 9999px;
}
.pdp-hero__sp-card-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pdp-hero__sp-perk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11.5px;
  color: rgba(38, 35, 32, 0.65);
}
.pdp-hero__sp-perk svg {
  flex-shrink: 0;
}

/* ── Gift Incentive Card ── */
.pdp-hero__gift-incentive {
  margin-top: 1rem;
}
.pdp-hero__gift-card {
  border: 1px solid rgba(38, 35, 32, 0.12);
  border-radius: 12px;
  overflow: hidden;
}
.pdp-hero__gift-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgba(225, 108, 71, 0.08);
}
.pdp-hero__gift-card-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #262320;
}
.pdp-hero__gift-card-savings {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #262320;
  color: #F3F1E9;
  padding: 2px 8px;
  border-radius: 4px;
}
.pdp-hero__gift-card-rows {
  padding: 0 1rem;
}
.pdp-hero__gift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(38, 35, 32, 0.06);
}
.pdp-hero__gift-row:last-child { border-bottom: none; }
.pdp-hero__gift-row-name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: #262320;
}
.pdp-hero__gift-row-prices {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdp-hero__gift-row-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  color: rgba(38, 35, 32, 0.4);
  text-decoration: line-through;
}
.pdp-hero__gift-row-price {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #262320;
}
.pdp-hero__gift-row-free {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 600;
  color: #E16C47;
}
.pdp-hero__gift-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(38, 35, 32, 0.06);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(38, 35, 32, 0.7);
}
.pdp-hero__gift-note-icon { font-size: 16px; flex-shrink: 0; }

/* Countdown */
.pdp-hero__countdown-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: rgba(38, 35, 32, 0.03);
  border-radius: 10px;
}
.pdp-hero__countdown-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #E16C47;
  white-space: nowrap;
}
.pdp-hero__countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.pdp-hero__cd-block {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #262320;
}
.pdp-hero__cd-unit {
  font-size: 10px;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.5);
}
.pdp-hero__cd-sep {
  font-size: 13px;
  font-weight: 600;
  color: rgba(38, 35, 32, 0.3);
}

/* (sub trust points moved inside subscription card as perks) */
.pdp-hero__sp-option:not(.pdp-hero__sp-option--active) .pdp-hero__sp-save {
  background: rgba(225, 108, 71, 0.12);
  color: #E16C47;
}

/* ── Sticky Add to Cart Bar ── */
.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60; /* above gallery arrows (z-index: 2) and header (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.625rem 0;
  gap: 0.75rem;
}

.pdp-sticky-bar__info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.pdp-sticky-bar__thumb {
  flex-shrink: 0;
}
.pdp-sticky-bar__thumb-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}
.pdp-sticky-bar__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.125rem;
}

.pdp-sticky-bar__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #262320;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-bar__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.pdp-sticky-bar__price {
  font-size: clamp(0.8125rem, 2.5vw, 1.0625rem);
  font-weight: 700;
  color: #262320;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pdp-sticky-bar__compare {
  font-size: clamp(0.6875rem, 2vw, 0.8125rem);
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
  white-space: nowrap;
}

.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;
  white-space: nowrap;
}

.pdp-sticky-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-width: 0;
  background: #E16C47;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}

/* ── Sticky bar — mobile redesign (<=749px) ──
   All info must fit: price + compare + save + dropdown + CTA.
   Single row can't hold everything at 327px, so use TWO rows:
   Row 1 (top, compact):  [ Price ]  [ Compare ]  [ Save badge ]
   Row 2 (bottom, main):  [ Dropdown ]  [ Big CTA ]
   Thumb + title are hidden (redundant — visible in main buy box above). */
@media (max-width: 749px) {
  .pdp-sticky-bar {
    padding-inline: 10px;
  }
  .pdp-sticky-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "info info"
      "select btn";
    gap: 6px 8px;
    padding: 8px 0;
    align-items: center;
  }
  /* Row 1: pricing only (thumb + title hidden) */
  .pdp-sticky-bar__info {
    grid-area: info;
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: baseline;
  }
  .pdp-sticky-bar__thumb,
  .pdp-sticky-bar__title {
    display: none !important;
  }
  .pdp-sticky-bar__meta {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }
  .pdp-sticky-bar__pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .pdp-sticky-bar__price {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .pdp-sticky-bar__compare {
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(38, 35, 32, 0.5);
  }
  .pdp-sticky-bar__save-badge {
    display: inline-flex;
    font-size: 0.625rem;
    padding: 1px 6px;
    line-height: 1.3;
    margin-left: auto; /* push to right edge of row */
  }
  .pdp-sticky-bar__save-badge[hidden] { display: none !important; }
  /* Mobile: same height stability — frequency keeps its row even when hidden,
     so the bar never jitters between subscribe and onetime. */
  .pdp-sticky-bar__frequency[hidden] {
    display: block !important;
    visibility: hidden;
  }
  /* Row 2: dropdown + CTA — matching heights (40px) */
  .pdp-sticky-bar__sp-toggle { display: none; }
  .pdp-sticky-bar__sp-select-wrap {
    grid-area: select;
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
  }
  .pdp-sticky-bar__sp-select {
    height: 40px;
    padding: 0 26px 0 12px;
    font-size: 0.8125rem;
    line-height: 1;
    box-sizing: border-box;
  }
  .pdp-sticky-bar__btn {
    grid-area: btn;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Very narrow phones (<340px) — hide compare strikethrough if tight */
@media (max-width: 339px) {
  .pdp-sticky-bar__compare { display: none; }
}
.pdp-sticky-bar__btn.is-adding {
  pointer-events: none;
}
.pdp-sticky-bar__btn.is-added {
  background: #c9563a;
}
.pdp-sticky-bar__btn:hover {
  background: #c9563a;
  box-shadow: 0 4px 16px rgba(225, 108, 71, 0.4);
  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: rgba(30, 30, 50, 0.95);
  border-color: rgba(255,255,255,0.1);
  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: #E16C47; color: #fff; }

/* Shimmer pseudo-element */
.pdp-hero__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 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;
  pointer-events: none;
  border-radius: inherit;
}

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

/* 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%, #F3F1E9 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: #262320 !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;
}

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


/* ─── 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, #F3F1E9);
  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, #262320);
}

/* ─── 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, #F3F1E9);
  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, #262320);
  text-decoration: none;
}
.pdp-hero__feature-prompt-link > svg:first-child {
  flex-shrink: 0;
  color: var(--color-foreground, #262320);
}
.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, #262320);
}
.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, #262320);
}

/* ---- Desktop ---- */

@media (min-width: 768px) {
  .pdp-hero {
    padding-block: 0 3rem;
  }

  .pdp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 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__cta::before {
    animation: none;
  }
  .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: #262320;
  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: #262320;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-input:focus {
  border-color: #E16C47;
  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: #E16C47;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(225,108,71,0.25);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-btn:hover { background: #c85d3b; box-shadow: 0 4px 16px rgba(225,108,71,0.4); transform: translateY(-1px); }
.pdp-hero__notify-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(225,108,71,0.25); }
.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: #262320; }
.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: #E16C47; 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: #262320;
  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 */
/* App blocks (Loox micro-reviews, etc.) — discreet under CTA */
.pdp-hero__app-block {
  margin-top: 12px;
  max-width: 100%;
  /* NOTE: no overflow clipping here. Loox Snippets Widget positions its
     scroll arrows slightly outside its own bounding box (intentional —
     arrows sit on the edge), and overflow: clip/hidden would crop them.
     The viewport-level safety net lives on .pdp-hero. */
}
.pdp-hero__app-block:empty {
  display: none;
}

/* ── Flush-align Loox Cards Carousel (and any @app block) with product form ──
   Strip horizontal padding/margin on the OUTER wrapper levels only.
   IMPORTANT: do NOT force width:100% on descendants — that breaks the
   carousel's flex layout (slides would each take 100% and the track
   would burst out the right side of the viewport, pushing the whole
   page off-screen on mobile). */
.pdp-hero__app-block > *,
.pdp-hero__app-block > * > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* Known Loox container classes — belt and suspenders */
.pdp-hero__app-block [class*="loox-product-carousel"],
.pdp-hero__app-block [class*="loox-card-carousel"],
.pdp-hero__app-block [class*="loox-carousel"],
.pdp-hero__app-block [id*="looxReviews"],
.pdp-hero__app-block [id*="loox-card-carousel"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}

/* NOTE: Loox Cards Carousel renders its cards + arrows inside a
   cross-origin <iframe src="loox.io/widget/...">. Our theme CSS can
   only style the outer wrapper (.loox-v2-carousel-container) — anything
   inside the iframe (card padding, arrow size/position, etc.) must be
   configured in the Loox app settings inside Shopify admin.
   The outer wrapper already has zero padding (verified in DevTools). */

.pdp-hero__trust-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
  /* Horizontal scroll on mobile so all badges are reachable */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.pdp-hero__trust-badges::-webkit-scrollbar { display: none; }
.pdp-hero__trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdp-hero__trust-badge svg { color: #16a34a; flex-shrink: 0; }
.pdp-hero__trust-sep { color: rgba(0,0,0,0.15); flex-shrink: 0; }

/* Included Items */
.pdp-hero__included-list p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-foreground, #262320);
  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, #262320);
  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, #262320);
}
.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; }

/* Ingredient icons — small colored SVGs before each <strong> in Key Ingredients tab */
.pdp-hero__accordion-answer--ingredients p {
  position: relative;
  padding-left: 24px;
}
.pdp-hero__accordion-answer--ingredients p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(1)::before {
  background: #E16C47;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.5C5.5 1.5 2 4 2 7.5S5.5 14.5 8 14.5s6-3 6-6.5S10.5 1.5 8 1.5zm0 2c.8 0 2.5 1.2 3.2 2.5.4.7.3 1.5-.2 2-.5.5-1.2.5-1.8.2C8.5 8.3 8 8 8 8s-.5.3-1.2.7c-.6.3-1.3.3-1.8-.2s-.6-1.3-.2-2C5.5 5.2 7.2 4 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.5C5.5 1.5 2 4 2 7.5S5.5 14.5 8 14.5s6-3 6-6.5S10.5 1.5 8 1.5zm0 2c.8 0 2.5 1.2 3.2 2.5.4.7.3 1.5-.2 2-.5.5-1.2.5-1.8.2C8.5 8.3 8 8 8 8s-.5.3-1.2.7c-.6.3-1.3.3-1.8-.2s-.6-1.3-.2-2C5.5 5.2 7.2 4 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(2)::before {
  background: #4F576A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M12 2C9.5 2 8 4.5 8 7c0 1-.3 2-.8 2.8L4 14l1.5 1 2.5-3.2c.6.1 1.2.2 1.8.2 3.3 0 6-2.7 6-6s-1.5-4-3.8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M12 2C9.5 2 8 4.5 8 7c0 1-.3 2-.8 2.8L4 14l1.5 1 2.5-3.2c.6.1 1.2.2 1.8.2 3.3 0 6-2.7 6-6s-1.5-4-3.8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(3)::before {
  background: #F3E891;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13 3C10 3 8 5 8 8v5h1v-5c0-2 1.5-4 4-4V3zM3 5c2.5 0 4 2 4 4v4h1V9c0-3-2-5-5-5v1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13 3C10 3 8 5 8 8v5h1v-5c0-2 1.5-4 4-4V3zM3 5c2.5 0 4 2 4 4v4h1V9c0-3-2-5-5-5v1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(4)::before {
  background: #9EADD2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(5)::before {
  background: #E16C47;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1L6 5H2l3.5 3-1.2 5L8 10.5 11.7 13l-1.2-5L14 5h-4L8 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1L6 5H2l3.5 3-1.2 5L8 10.5 11.7 13l-1.2-5L14 5h-4L8 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* How to Enjoy steps */
.pdp-hero__how-to-steps {
  display: flex;
  gap: 16px;
  padding: 4px 0;
}
.pdp-hero__how-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pdp-hero__how-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E16C47;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}
.pdp-hero__how-step-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 400;
  color: #262320;
  letter-spacing: -0.03em;
  line-height: 1.4;
}
@media (max-width: 549px) {
  .pdp-hero__how-to-steps {
    flex-direction: column;
    gap: 10px;
  }
}

/* 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;
  font-size: 12px;
  font-weight: 500;
  color: #262320;
  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: #262320;
  color: #fff;
  border-color: #262320;
  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, #262320);
}
.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, #262320);
  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, #262320);
}
.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;
}
.pdp-hero__specs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.pdp-hero__specs-row:last-child { border-bottom: none; }
.pdp-hero__specs-row span:first-child {
  font-size: 12px;
  color: #888;
}
.pdp-hero__specs-row span:last-child {
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  color: var(--color-foreground, #262320);
}
.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;
}

/* ── Frequently Bundled Together ── */
.pdp-hero__fb {
  margin-top: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pdp-hero__fb-title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #262320;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pdp-hero__fb-cards {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}
.pdp-hero__fb-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #F7F5EF;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.pdp-hero__fb-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.pdp-hero__fb-card-label {
  font-size: 0.8125rem;
  line-height: 1.25;
  text-align: center;
  color: #262320;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-hero__fb-card-price {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #262320;
}
.pdp-hero__fb-plus {
  align-self: center;
  font-size: 1.5rem;
  font-weight: 300;
  color: rgba(38,35,32,0.5);
  line-height: 1;
}
.pdp-hero__fb-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(225, 108, 71, 0.06);
  border: 1px solid rgba(225, 108, 71, 0.18);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pdp-hero__fb-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: rgba(38,35,32,0.72);
}
/* Bundle frequency dropdown */
.pdp-hero__fb-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pdp-hero__fb-mode-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(38, 35, 32, 0.72);
  flex: 0 0 auto;
}
.pdp-hero__fb-mode-select-wrap {
  position: relative;
  flex: 1 1 auto;
}
.pdp-hero__fb-mode-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #E16C47;
  background: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: #262320;
  padding: 9px 32px 9px 12px;
  border-radius: 9px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pdp-hero__fb-mode-select:hover { background: rgba(225, 108, 71, 0.05); }
.pdp-hero__fb-mode-select:focus-visible {
  outline: 2px solid #E16C47;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.18);
}
.pdp-hero__fb-mode-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #E16C47;
}
@media (max-width: 480px) {
  .pdp-hero__fb-mode { flex-direction: column; align-items: stretch; gap: 4px; }
  .pdp-hero__fb-mode-label { font-size: 0.6875rem; }
}
.pdp-hero__fb-row--bundle { color: #262320; }
.pdp-hero__fb-row s { opacity: 0.6; }
.pdp-hero__fb-savings {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.8125rem;
  color: #E16C47;
  font-weight: 600;
  margin-top: 2px;
}
.pdp-hero__fb-savings strong { font-size: 0.9375rem; font-weight: 700; }
.pdp-hero__fb-pct { font-size: 0.75rem; opacity: 0.85; }
.pdp-hero__fb-sub-label { font-size: 0.6875rem; color: #15803d; font-weight: 500; letter-spacing: 0; }
.pdp-hero__fb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: #E16C47;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.pdp-hero__fb-cta:hover:not(:disabled) { background: #c9563a; }
.pdp-hero__fb-cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
@media (max-width: 479px) {
  .pdp-hero__fb-card img { width: 72px; height: 72px; }
  .pdp-hero__fb { padding: 10px; margin-top: 8px; margin-bottom: 0; }
}

/* ── 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: #F3F1E9;
  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, #262320);
  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, #262320);
}
.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;
  background: #262320;
  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: #E16C47;
  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 ─── */
.pdp-hero__desc-wrap {
  position: relative;
}
.pdp-hero__desc-content {
  /* Always fully visible — no clamp / Read More toggle */
  max-height: none;
  overflow: visible;
}
/* Smaller description on mobile — takes less vertical space */
@media (max-width: 749px) {
  .pdp-hero__desc-wrap,
  .pdp-hero__desc-content,
  .pdp-hero__subheadline {
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
  }
}
/* Always-open variant — belt-and-suspenders override for any CSS that
   references .is-expanded; keeps container fully expanded. */
.pdp-hero__desc-wrap--always-open .pdp-hero__desc-content {
  max-height: none !important;
  overflow: visible !important;
}
.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, #F3F1E9)));
  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: #262320;
  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: #262320;
}
.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 */
/* Size modifiers — all reduced ~20% per design direction */
.pdp-hero__title--sm { font-size: 1.2rem; }
.pdp-hero__title--md { font-size: 1.6rem; }
.pdp-hero__title--lg { font-size: 2rem; }
@media (min-width: 750px) {
  .pdp-hero__title--sm { font-size: 1.4rem; }
  .pdp-hero__title--md { font-size: 1.8rem; }
  .pdp-hero__title--lg { font-size: 2.4rem; }
}

/* ── 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);
    /* No will-change / backface-visibility — see same note in
       nooci-sticky-product-bar.liquid. The `html { overflow-x: clip }`
       fix in theme.css resolves the sticky-jitter at the root; the
       compositor hints actually re-introduce mobile-Safari rendering
       artifacts when present alongside the proper root fix. */
  }
  .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, #F3F1E9)));
    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: #262320;
  }
  .pdp-hero__mobile-sticky-qty span {
    width: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #262320;
  }
  .pdp-hero__mobile-sticky-add {
    flex: 1;
    padding: 0.625rem 0;
    background: #262320;
    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: #c9563a; }
  .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: #262320 !important;
  border-color: #fff;
}
.theme-dark .pdp-hero__doc-btn:hover svg { stroke: #262320 !important; }
.theme-dark .pdp-hero__specs-heading {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row span:last-child {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row {
  border-bottom-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: #262320;
}
.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);
}

/* ── Intro band — sits inside the same .page-width / same bg as the buy box.
   Used on metaobject pages (X Reasons Why) so the headline + supporting copy
   read as one cohesive section with the gallery + form below. The top
   divider was removed once the section gained its white background — the
   bg color now provides the visual separation on its own. ── */
.nooci-pdp-info__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 2.5rem;
  padding-top: 3rem;
}
@media (max-width: 749px) {
  .nooci-pdp-info__intro { padding-top: 2rem; margin-bottom: 1.75rem; }
}
.nooci-pdp-info__intro-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E16C47;
  margin: 0 0 0.875rem;
}
.nooci-pdp-info__intro-heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #262320;
  margin: 0 0 0.875rem;
}
.nooci-pdp-info__intro-sub {
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  line-height: 1.6;
  color: rgba(38,35,32,0.7);
  margin: 0 auto;
  max-width: 620px;
}
/* END_SECTION:nooci-pdp-product-info */

/* START_SECTION:nooci-problem-agitate (INDEX:66) */
.nooci-problem {
    padding: 80px 0;
  }

  .nooci-problem__header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 56px;
  }

  .nooci-problem__eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #E16C47;
    margin-bottom: 16px;
  }

  .nooci-problem__heading {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #262320;
    margin: 0 0 16px;
  }

  .nooci-problem__subtitle {
    font-family: var(--font-accent, 'Cormorant Garamond', serif);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    line-height: 1.5;
    color: #262320;
    opacity: 0.7;
    margin: 0;
  }

  .nooci-problem__grid {
    display: grid;
    grid-template-columns: repeat(var(--nooci-problem-cols, 4), 1fr);
    gap: 20px;
  }
  @media (max-width: 989px) {
    .nooci-problem__grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ── Marquee mode ── */
  .nooci-problem__marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  .nooci-problem__marquee-track {
    display: flex;
    width: max-content;
    gap: 20px;
    animation: nooci-problem-marquee var(--nooci-problem-speed, 60s) linear infinite;
    will-change: transform;
  }
  .nooci-problem__marquee-track:hover { animation-play-state: paused; }
  .nooci-problem__marquee-dup {
    display: flex;
    gap: 20px;
    margin-left: 20px; /* match gap between sets */
  }
  .nooci-problem__marquee .nooci-problem__card {
    flex: 0 0 320px;
    max-width: 320px;
  }
  @keyframes nooci-problem-marquee {
    from { transform: translateX(0); }
    /* Translate by half the combined width (original + duplicate) so the
       duplicate lands exactly where the original started — seamless loop. */
    to   { transform: translateX(calc(-50% - 10px)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nooci-problem__marquee-track { animation: none; }
  }
  @media (max-width: 749px) {
    .nooci-problem__marquee .nooci-problem__card {
      flex: 0 0 260px;
      max-width: 260px;
    }
  }

  .nooci-problem__card {
    padding: 32px 28px;
    border: 1px solid rgba(38, 35, 32, 0.1);
    border-radius: 12px;
    transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nooci-problem__card:hover {
    border-color: #E16C47;
  }

  .nooci-problem__icon {
    color: #E16C47;
    margin-bottom: 16px;
  }

  .nooci-problem__card-title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: #262320;
    margin: 0 0 10px;
  }

  .nooci-problem__card-body {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: #262320;
    opacity: 0.75;
    margin: 0;
  }

  .nooci-problem__stat {
    text-align: center;
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid rgba(38, 35, 32, 0.1);
  }

  .nooci-problem__stat-number {
    display: block;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    letter-spacing: -0.03em;
    color: #E16C47;
    line-height: 1;
  }

  .nooci-problem__stat-text {
    display: block;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: #262320;
    opacity: 0.7;
    margin-top: 8px;
  }

  @media (max-width: 749px) {
    .nooci-problem { padding: 56px 0; }
    .nooci-problem__grid { grid-template-columns: 1fr; gap: 16px; }
    .nooci-problem__header { margin-bottom: 40px; }
  }
/* END_SECTION:nooci-problem-agitate */

/* START_SECTION:nooci-product-trio (INDEX:67) */
/* ── Product Trio — editorial 3-up ── */
.product-trio {
  width: 100%;
  padding: 4rem 0;
}

.product-trio__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.product-trio__header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.product-trio__heading {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  color: var(--color-foreground);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}

.product-trio__subheading {
  font-family: var(--font-accent);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.5;
}

/* ── Grid ── */
.product-trio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}

@media (min-width: 750px) {
  .product-trio__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

/* ── Product item ── */
.product-trio__item {
  text-align: center;
}

.product-trio__image-link {
  display: block;
  text-decoration: none;
}

.product-trio__image-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.product-trio__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.product-trio__placeholder {
  background: var(--color-background);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-trio__placeholder-svg {
  width: 60%;
  height: auto;
  opacity: 0.3;
}

/* ── Details ── */
.product-trio__details {
  padding: 0 0.5rem;
}

.product-trio__product-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--color-foreground);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.product-trio__product-title a {
  text-decoration: none;
  color: inherit;
}

.product-trio__product-title a:hover {
  color: var(--color-accent);
}

.product-trio__description {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-navy);
  margin: 0 0 0.75rem;
  max-width: 28ch;
  margin-inline: auto;
}

.product-trio__price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-foreground);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.product-trio__price-compare {
  color: var(--color-navy);
  opacity: 0.5;
  font-size: 0.85rem;
}

.product-trio__price-current {
  font-weight: 600;
}

.product-trio__cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground);
  background: transparent;
  border: 1.5px solid var(--color-foreground);
  border-radius: 9999px;
  padding: 0.7em 1.8em;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease;
}

.product-trio__cta:hover,
.product-trio__cta:focus-visible {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* ── Mobile spacing ── */
@media (max-width: 749px) {
  .product-trio {
    padding: 3rem 0;
  }

  .product-trio__header {
    margin-bottom: 2.5rem;
  }

  .product-trio__image-wrap {
    max-width: 20rem;
    margin-inline: auto;
    margin-bottom: 1.25rem;
  }
}
/* END_SECTION:nooci-product-trio */

/* START_SECTION:nooci-promo-banner (INDEX:68) */
/* Make the Shopify section wrapper sticky so the banner stays pinned.
   Force yellow on the wrapper too — the theme's alternating section
   background rules would otherwise override our color. */
.section-pb {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  background: #F3E891 !important;
}
.pb {
  display: block;
  width: 100%;
  text-decoration: none;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 8px 14px;
  transition: background 0.15s;
  box-shadow: 0 2px 6px rgba(38, 35, 32, 0.04);
  background: #F3E891 !important;
  color: #262320 !important;
}
.pb__inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
  max-width: 100%;
}
@media (max-width: 640px) {
  .pb {
    font-size: 0.75rem;
    padding: 6px 10px;
    letter-spacing: 0;
  }
  .pb__msg {
    /* keep on one line with link inline */
    display: inline;
  }
  .pb__inner {
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .pb__cta { font-size: 0.75rem; }
  .pb__cta svg { width: 10px; height: 10px; }
}
.pb__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pb--orange { background: #E16C47; color: #fff; }
.pb--orange:hover { background: #c9563a; }
.pb--dark { background: #262320; color: #F3F1E9; }
.pb--dark:hover { background: #100E0C; }
.pb--cream { background: #F3E891 !important; color: #262320 !important; }
.pb--cream:hover { background: #E8DC78 !important; }
/* END_SECTION:nooci-promo-banner */

/* START_SECTION:nooci-ritual-steps (INDEX:69) */
.nooci-ritual-steps {
  padding: 5rem 0;
  background-color: var(--color-background, #F3F1E9);
}

.nooci-ritual-steps__head {
  max-width: 44rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.nooci-ritual-steps__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 1rem;
}

.nooci-ritual-steps__heading {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #262320;
  margin: 0 0 1.25rem;
}

.nooci-ritual-steps__intro {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: 1.65;
  color: rgba(38, 35, 32, 0.72);
}

.nooci-ritual-steps__intro p {
  margin: 0 0 0.75rem;
}

.nooci-ritual-steps__intro p:last-child {
  margin-bottom: 0;
}

.nooci-ritual-steps__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 56rem;
  counter-reset: nooci-ritual;
}

.nooci-ritual-steps__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem 2rem;
  align-items: start;
  padding: 2rem 0;
  border-top: 1px solid rgba(38, 35, 32, 0.1);
}

.nooci-ritual-steps__item:last-child {
  border-bottom: 1px solid rgba(38, 35, 32, 0.1);
}

.nooci-ritual-steps__num {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--color-coral, #E16C47);
  min-width: 2.5rem;
}

.nooci-ritual-steps__body {
  min-width: 0;
}

.nooci-ritual-steps__time {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(38, 35, 32, 0.5);
  margin-bottom: 0.5rem;
}

.nooci-ritual-steps__title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #262320;
  margin: 0 0 0.75rem;
}

.nooci-ritual-steps__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(38, 35, 32, 0.72);
}

.nooci-ritual-steps__desc p {
  margin: 0 0 0.75rem;
}

.nooci-ritual-steps__desc p:last-child {
  margin-bottom: 0;
}

.nooci-ritual-steps__media {
  width: 180px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(38, 35, 32, 0.06);
  align-self: center;
}

.nooci-ritual-steps__img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 749px) {
  .nooci-ritual-steps {
    padding: 3.5rem 0;
  }
  .nooci-ritual-steps__head {
    margin-bottom: 2rem;
  }
  .nooci-ritual-steps__item {
    grid-template-columns: auto 1fr;
    gap: 1rem 1.25rem;
    padding: 1.5rem 0;
  }
  .nooci-ritual-steps__media {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
  }
}
/* END_SECTION:nooci-ritual-steps */

/* START_SECTION:nooci-social-proof-strip (INDEX:70) */
nooci-sps-marquee,
.nooci-sps {
  display: block;
  padding: 0.625rem 0;
  background-color: #4F576A;
  overflow: hidden;
}

/* Marquee container — always has overflow hidden */
.nooci-sps__marquee {
  position: relative;
  overflow: hidden;
}

/* Gradient fades at edges — only shown when marquee is active */
.nooci-sps__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.nooci-sps__fade--left {
  left: 0;
  background: linear-gradient(to right, #4F576A, transparent);
}
.nooci-sps__fade--right {
  right: 0;
  background: linear-gradient(to left, #4F576A, transparent);
}
.nooci-sps.is-marquee .nooci-sps__fade {
  opacity: 1;
}

/* Track — holds content + clones when marqueeing */
.nooci-sps__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* When NOT marqueeing: center content on a single line */
.nooci-sps:not(.is-marquee) .nooci-sps__track {
  width: 100%;
  justify-content: center;
}

.nooci-sps__inner {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0;
  white-space: nowrap;
  justify-content: center;
}
.nooci-sps:not(.is-marquee) .nooci-sps__inner {
  flex-wrap: nowrap;
}

/* ── Badge: INLINE mode (matches live NOOCI — no box, clean icon + text) ── */
.nooci-sps--inline .nooci-sps__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  margin: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  flex-shrink: 0;
  position: relative;
}
.nooci-sps--inline .nooci-sps__badge + .nooci-sps__badge::before,
.nooci-sps--inline .nooci-sps__badge + .nooci-sps__claim::before,
.nooci-sps--inline .nooci-sps__claim + .nooci-sps__claim::before,
.nooci-sps--inline .nooci-sps__claim + .nooci-sps__badge::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.nooci-sps--inline .nooci-sps__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nooci-sps--inline .nooci-sps__badge-icon svg,
.nooci-sps--inline .nooci-sps__badge-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.nooci-sps--inline .nooci-sps__badge-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* ── Badge: BOXED mode ── */
.nooci-sps--boxed .nooci-sps__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  margin: 0 3px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.nooci-sps--boxed .nooci-sps__badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.nooci-sps--boxed .nooci-sps__badge-icon svg,
.nooci-sps--boxed .nooci-sps__badge-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.nooci-sps--boxed .nooci-sps__badge-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.15;
  white-space: nowrap;
}

/* ── Claim items (icon + text, works in both modes) ── */
.nooci-sps__claim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  position: relative;
  flex-shrink: 0;
}
.nooci-sps__claim-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #ffffff;
}
.nooci-sps__claim-icon svg,
.nooci-sps__claim-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.nooci-sps__claim-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* Clones for marquee — never interactive */
[data-clone] {
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .nooci-sps.is-marquee .nooci-sps__track {
    animation: none !important;
    transform: none !important;
  }
}
/* END_SECTION:nooci-social-proof-strip */

/* START_SECTION:nooci-sticky-product-bar (INDEX:71) */
.spb {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 140%);
  z-index: 60;
  width: min(calc(100% - 24px), 720px);
  max-width: 100vw;
  box-sizing: border-box;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(38, 35, 32, 0.18), 0 0 0 1px rgba(38, 35, 32, 0.06);
  opacity: 0;
  pointer-events: none;
  /* No will-change / backface-visibility — they over-promote the bar to its
     own compositor layer on iOS Safari and Android Chrome, which conflicts
     with mobile viewport scroll handling and reintroduces the very jitter
     they were meant to prevent. The real fix lives at the root: the
     `html { overflow-x: clip }` change in theme.css unblocked sticky
     positioning for the whole page; the bar transforms cleanly without
     any GPU hints. */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s;
}
.spb *, .spb *::before, .spb *::after { box-sizing: border-box; }
.spb[data-visible='true'] {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.spb__inner { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 10px; }
.spb__left {
  display: flex; align-items: center; gap: 12px;
  flex: 1 1 auto; min-width: 0;
  color: inherit; text-decoration: none;
}
.spb__img {
  width: 52px; height: 52px; border-radius: 10px;
  object-fit: cover; flex: 0 0 auto;
  background: #F3F1E9;
}
.spb__img--placeholder svg { width: 100%; height: 100%; display: block; }
.spb__meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spb__title {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 0.9375rem; font-weight: 600;
  line-height: 1.15; margin: 0;
  color: var(--color-foreground, #262320);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spb__price { margin: 0; display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.8125rem; }
.spb__price-sub { font-weight: 700; color: var(--color-foreground, #262320); }
.spb__price-compare { color: rgba(38,35,32,0.45); text-decoration: line-through; }
.spb__price-label { color: rgba(38,35,32,0.55); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.spb__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem; font-weight: 700;
  color: #fff; background: var(--color-accent, #E16C47);
  border-radius: 9999px; text-decoration: none;
  white-space: nowrap; flex: 0 0 auto;
  transition: background 0.2s;
}
.spb__cta-text { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; }
.spb__cta-main { font-size: 1em; font-weight: 700; }
.spb__cta-sub { font-size: 0.7em; font-weight: 600; opacity: 0.95; margin-top: 1px; }
.spb__cta--two-line .spb__cta-text { gap: 0; }
.spb__cta:hover { background: #c9563a; text-decoration: none; }

@media (max-width: 640px) {
  /* Full-width sticky bar — touch the screen edges. Use left:0 only (no right:0)
     so the element width is 100vw exact and any sub-pixel rounding can't push it
     past the right edge and trigger a horizontal scroll on the page. */
  .spb {
    left: 0;
    right: auto;
    bottom: 0;
    width: 100vw;
    max-width: 100vw;
    transform: translate(0, 140%);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -8px 24px rgba(38, 35, 32, 0.12), 0 0 0 1px rgba(38, 35, 32, 0.06);
  }
  .spb[data-visible='true'] { transform: translate(0, 0); }
  .spb__inner { padding: 9px 10px 9px 9px; gap: 8px; min-width: 0; }
  .spb__left  { gap: 9px; min-width: 0; }
  .spb__img   { width: 42px; height: 42px; }
  .spb__title { font-size: 0.8125rem; }
  .spb__price-label { display: none; }
  .spb__price { font-size: 0.75rem; }
  /* CTA: two-line text, no arrow svg, tighter padding so the bar can't overflow */
  .spb__cta { padding: 8px 12px; min-width: 0; justify-content: center; flex: 0 0 auto; }
  .spb__cta--two-line { padding: 6px 12px; }
  .spb__cta--two-line .spb__cta-main { font-size: 0.8125rem; line-height: 1.1; }
  .spb__cta--two-line .spb__cta-sub  { font-size: 0.625rem; line-height: 1.05; }
  .spb__cta svg { display: none; }
}
/* END_SECTION:nooci-sticky-product-bar */

/* START_SECTION:nooci-subscription-incentive (INDEX:72) */
.nooci-si {
  padding: 5rem 0;
  background-color: var(--color-dawn, #F3E891);
}

.nooci-si__header {
  text-align: center;
  margin-bottom: 3rem;
}

.nooci-si__heading {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.12;
  color: var(--color-foreground, #262320);
  margin: 0 0 0.75rem;
}

.nooci-si__subtitle {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-foreground, #262320);
  opacity: 0.75;
  margin: 0;
  max-width: 32rem;
  margin-inline: auto;
}

.nooci-si__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.nooci-si__col {
  padding: 2.5rem 2rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.nooci-si__col--onetime {
  background-color: rgba(38, 35, 32, 0.06);
}

.nooci-si__col--subscribe {
  background-color: #fff;
  position: relative;
  box-shadow: 0 2px 16px rgba(38, 35, 32, 0.08);
}

.nooci-si__badge {
  position: absolute;
  top: -0.625rem;
  right: 1.5rem;
  background-color: var(--color-coral, #E16C47);
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35em 1em;
  border-radius: 9999px;
}

.nooci-si__col-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-foreground, #262320);
  opacity: 0.6;
}

.nooci-si__col-price {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.4vw, 1.75rem);
  letter-spacing: -0.03em;
  color: var(--color-foreground, #262320);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  line-height: 1.15;
  word-break: break-word;
}

.nooci-si__col-savings {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-coral, #E16C47);
  letter-spacing: 0;
}
.nooci-si__col-price-current { font-weight: 600; }
.nooci-si__col-price-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
  letter-spacing: 0;
  margin-left: 4px;
}

.nooci-si__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.nooci-si__list-item {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nooci-si__list-item--positive {
  color: var(--color-foreground, #262320);
}

.nooci-si__list-item--neutral {
  color: var(--color-foreground, #262320);
  opacity: 0.7;
}

.nooci-si__list-item--muted {
  color: var(--color-foreground, #262320);
  opacity: 0.4;
  text-decoration: line-through;
}

.nooci-si__check {
  color: var(--color-coral, #E16C47);
  flex-shrink: 0;
}

.nooci-si__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.85em 2em;
  text-decoration: none;
  background-color: var(--color-coral, #E16C47);
  color: #fff;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: none;
  margin-top: 0.5rem;
  width: 100%;
}

.nooci-si__cta:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

@media (max-width: 749px) {
  .nooci-si {
    padding: 3.5rem 0;
  }

  .nooci-si__columns {
    grid-template-columns: 1fr;
  }

  .nooci-si__col {
    padding: 2rem 1.5rem;
  }
}
/* END_SECTION:nooci-subscription-incentive */

/* START_SECTION:nooci-testimonial-cards (INDEX:73) */
.nooci-tc {
  padding: 5rem 0;
  background-color: var(--color-background, #F3F1E9);
}

.nooci-tc__header {
  text-align: center;
  margin-bottom: 3rem;
}

.nooci-tc__eyebrow {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 1rem;
}

.nooci-tc__heading {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  color: var(--color-foreground, #262320);
  margin: 0;
}

.nooci-tc__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.nooci-tc__card {
  background-color: var(--color-secondary, #F3F1E9);
  border: 1px solid rgba(38, 35, 32, 0.08);
  border-radius: 12px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

.nooci-tc__quote {
  margin: 0;
  padding: 0;
  border: none;
}

.nooci-tc__quote p {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.5;
  color: var(--color-foreground, #262320);
  margin: 0;
}

.nooci-tc__footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nooci-tc__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.nooci-tc__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nooci-tc__meta {
  display: flex;
  flex-direction: column;
}

.nooci-tc__name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
  line-height: 1.3;
}

.nooci-tc__duration {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  color: var(--color-foreground, #262320);
  opacity: 0.55;
  line-height: 1.3;
}

@media (max-width: 989px) {
  .nooci-tc__grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 0.5rem;
    /* Full-bleed: overflow beyond .page-width so cards reach viewport edges */
    margin-left: calc(-1 * max(1rem, (100vw - var(--page-width, 1152px)) / 2));
    margin-right: calc(-1 * max(1rem, (100vw - var(--page-width, 1152px)) / 2));
    padding-left: max(1rem, (100vw - var(--page-width, 1152px)) / 2);
    padding-right: max(1rem, (100vw - var(--page-width, 1152px)) / 2);
    /* Snap aligns cards with the content grid, not viewport edge */
    scroll-padding-inline-start: max(1rem, (100vw - var(--page-width, 1152px)) / 2);
  }

  .nooci-tc__grid::-webkit-scrollbar { display: none; }

  .nooci-tc__card {
    /* 75% of viewport = peek at next card for scroll affordance */
    min-width: 75vw;
    max-width: 300px;
    scroll-snap-align: start;
    flex-shrink: 0;
    padding: 1.25rem;
    /* White bg for contrast against the page background on mobile */
    background: #fff !important;
    border-color: rgba(38, 35, 32, 0.08) !important;
  }
}

@media (max-width: 749px) {
  .nooci-tc {
    padding: 3.5rem 0;
  }

  .nooci-tc__header {
    margin-bottom: 2rem;
  }
}
/* END_SECTION:nooci-testimonial-cards */

/* START_SECTION:nooci-video-feature (INDEX:74) */
.nooci-video-feature {
  padding: 5rem 0;
  background-color: #262320;
  color: #F3F1E9;
}

.nooci-video-feature--dark { color: #F3F1E9; }
.nooci-video-feature--light { background-color: #F3F1E9; color: #262320; }

.nooci-video-feature__inner {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.nooci-video-feature__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-coral, #E16C47);
  margin-bottom: 1rem;
}

.nooci-video-feature__heading {
  font-family: var(--font-accent, 'Cormorant Garamond', serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: inherit;
}

.nooci-video-feature__body {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  opacity: 0.78;
  margin: 0 auto 2.5rem;
  max-width: 40rem;
}

.nooci-video-feature__body p { margin: 0 0 0.5rem; }
.nooci-video-feature__body p:last-child { margin-bottom: 0; }

.nooci-video-feature__player {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.nooci-video-feature__video {
  width: 100%;
  height: auto;
  display: block;
}

.nooci-video-feature__embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.nooci-video-feature__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.nooci-video-feature__poster-img {
  width: 100%;
  height: auto;
  display: block;
}

.nooci-video-feature__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  padding: 0.85rem 1.75rem;
  background: var(--color-coral, #E16C47);
  color: #ffffff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 200ms ease, background-color 200ms ease;
}

.nooci-video-feature__cta:hover {
  transform: translateY(-1px);
  background: #c9563a;
}

@media (max-width: 749px) {
  .nooci-video-feature { padding: 3.5rem 0; }
}
/* END_SECTION:nooci-video-feature */

/* START_SECTION:nooci-vsl-hero (INDEX:75) */
.vsl-hero {
  padding: 3rem 0 4rem;
  background: var(--color-background, #F3F1E9);
}
.vsl-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 820px;
}
.vsl-hero__video { max-width: 760px; margin-left: auto; margin-right: auto; }

.vsl-hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #E16C47);
  padding: 4px 12px;
  background: rgba(225, 108, 71, 0.08);
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.vsl-hero__eyebrow-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(38,35,32,0.78);
}
.vsl-hero__eyebrow-rating .vsl-hero__stars {
  display: inline-flex;
  gap: 1px;
}

.vsl-hero__heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-foreground, #262320);
  margin: 0;
  max-width: 820px;
}

.vsl-hero__subheading {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: clamp(0.9375rem, 1.2vw, 1rem);
  line-height: 1.5;
  color: rgba(38, 35, 32, 0.68);
  margin: 0 0 0.5rem;
  max-width: 560px;
}

.vsl-hero__video {
  width: 100%;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}
.vsl-hero__video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(38, 35, 32, 0.18);
}
.vsl-hero__video-wrap video,
.vsl-hero__video-wrap iframe,
.vsl-hero__video-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.vsl-hero__video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4F576A 0%, #262320 100%);
}
.vsl-hero__video-placeholder-img,
.vsl-hero__video-placeholder-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55;
}
.vsl-hero__play-btn {
  position: relative;
  z-index: 1;
  width: 76px; height: 76px;
  border-radius: 9999px;
  background: rgba(225, 108, 71, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.vsl-hero__play-btn svg { margin-left: 4px; }
.vsl-hero__video-hint {
  position: absolute; bottom: 16px; right: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0,0,0,0.7);
  padding: 6px 10px;
  border-radius: 6px;
}
.vsl-hero__video-caption {
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.55);
  margin: 0.75rem 0 0;
}

/* ─── Custom video player ─── */
.vsl-hero__video-wrap--custom { cursor: pointer; }
.vsl-hero__video-wrap--custom .vsl-hero__video-player { cursor: pointer; }

/* Big center play button — visible only when paused */
.vsl-hero__big-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px; height: 76px;
  border-radius: 9999px;
  border: 0;
  background: rgba(225, 108, 71, 0.95);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  z-index: 2;
}
.vsl-hero__big-play svg { margin-left: 4px; }
.vsl-hero__big-play:hover { background: #c9563a; transform: scale(1.05); }
.vsl-hero__video-wrap--custom.is-playing .vsl-hero__big-play { opacity: 0; pointer-events: none; }

/* Bottom control bar */
.vsl-hero__player-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.35) 60%, transparent);
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.vsl-hero__video-wrap--custom:hover .vsl-hero__player-bar,
.vsl-hero__video-wrap--custom:not(.is-playing) .vsl-hero__player-bar,
.vsl-hero__video-wrap--custom.is-active .vsl-hero__player-bar {
  opacity: 1;
}
.vsl-hero__player-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: 9999px;
  transition: background 0.15s, color 0.15s;
  flex: 0 0 auto;
}
.vsl-hero__player-btn:hover { background: rgba(255,255,255,0.18); }
.vsl-hero__icon-pause, .vsl-hero__icon-muted { display: none; }
.vsl-hero__video-wrap--custom.is-playing .vsl-hero__icon-play { display: none; }
.vsl-hero__video-wrap--custom.is-playing .vsl-hero__icon-pause { display: inline-block; }
.vsl-hero__video-wrap--custom.is-muted .vsl-hero__icon-vol { display: none; }
.vsl-hero__video-wrap--custom.is-muted .vsl-hero__icon-muted { display: inline-block; }
.vsl-hero__player-time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: rgba(255,255,255,0.92);
  flex: 0 0 auto;
  padding: 0 4px;
}
.vsl-hero__player-progress {
  flex: 1 1 auto;
  height: 22px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.vsl-hero__player-progress::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.28);
}
.vsl-hero__player-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  background: #E16C47;
  border-radius: 9999px;
  pointer-events: none;
  transition: width 0.08s linear;
}
.vsl-hero__player-progress-fill::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.15s;
}
.vsl-hero__video-wrap--custom:hover .vsl-hero__player-progress-fill::after,
.vsl-hero__video-wrap--custom.is-active .vsl-hero__player-progress-fill::after {
  opacity: 1;
}
/* Compact speed selector inside the player bar */
.vsl-hero__player-speed { position: relative; flex: 0 0 auto; }
.vsl-hero__player-speed-toggle {
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px 5px 10px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-width: 48px;
  cursor: pointer;
  transition: background 0.15s;
}
.vsl-hero__player-speed-toggle:hover { background: rgba(255,255,255,0.22); }
.vsl-hero__player-speed[data-open] .vsl-hero__player-speed-toggle { background: rgba(255,255,255,0.28); }
.vsl-hero__player-speed-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(20,20,20,0.96);
  backdrop-filter: blur(8px);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
  z-index: 5;
}
.vsl-hero__player-speed-menu[hidden] { display: none; }
.vsl-hero__player-speed-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.78);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: left;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s, color 0.12s;
}
.vsl-hero__player-speed-opt:hover { background: rgba(255,255,255,0.12); color: #fff; }
.vsl-hero__player-speed-opt.is-active {
  background: rgba(225,108,71,0.85);
  color: #fff;
}

@media (max-width: 540px) {
  .vsl-hero__player-bar { gap: 6px; padding: 14px 10px 10px; }
  .vsl-hero__player-time { font-size: 0.7rem; padding: 0 2px; }
  .vsl-hero__player-speed-btn { padding: 4px 7px; font-size: 0.68rem; }
  .vsl-hero__big-play { width: 64px; height: 64px; }
}

.vsl-hero__chapters {
  width: 100%;
  max-width: 720px;
  margin: 1.25rem auto 0;
  text-align: left;
  background: #fff;
  border-radius: 14px;
  padding: 0.75rem 1.25rem 1rem;
  box-shadow: 0 2px 12px rgba(38, 35, 32, 0.05);
  border: 1px solid rgba(38, 35, 32, 0.06);
}
.vsl-hero__chapters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent, #E16C47);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.vsl-hero__chapters-toggle::-webkit-details-marker { display: none; }
.vsl-hero__chapters-caret { transition: transform 0.2s; }
.vsl-hero__chapters[open] .vsl-hero__chapters-caret { transform: rotate(180deg); }
.vsl-hero__chapters-list {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}
.vsl-hero__chapter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(38, 35, 32, 0.85);
}
.vsl-hero__chapter-bullet {
  flex: 0 0 auto;
  margin-top: 4px;
}
.vsl-hero__chapter-title { font-weight: 500; }
@media (max-width: 749px) {
  .vsl-hero__chapters-list { grid-template-columns: 1fr; gap: 4px; }
}

.vsl-hero__cta-row--above { margin-top: 1rem; margin-bottom: 0.25rem; }

.vsl-hero__risk-reversal {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.6);
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.vsl-hero__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.vsl-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-accent, #E16C47);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(225, 108, 71, 0.28);
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.vsl-hero__cta:hover {
  background: #c9563a;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(225, 108, 71, 0.35);
  text-decoration: none;
}
.vsl-hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  padding: 14px 22px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(38, 35, 32, 0.25);
}
.vsl-hero__cta-secondary:hover {
  text-decoration-color: #E16C47;
  color: #E16C47;
}

.vsl-hero__social-proof {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(38, 35, 32, 0.72);
}
.vsl-hero__stars {
  display: inline-flex;
  gap: 2px;
}

.vsl-hero__press {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(38, 35, 32, 0.1);
  width: 100%;
}
.vsl-hero__press-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(38, 35, 32, 0.55);
}
.vsl-hero__press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.vsl-hero__press-logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.2s;
}
.vsl-hero__press-logo:hover {
  opacity: 1;
  filter: none;
}

@media (max-width: 749px) {
  .vsl-hero { padding: 2rem 0 3rem; }
  .vsl-hero__inner { gap: 0.75rem; padding: 0 1rem; }
  .vsl-hero__video-wrap { border-radius: 12px; }
  .vsl-hero__press-logos { gap: 20px; }
  .vsl-hero__press-logo { height: 18px; }
  .vsl-hero__cta { padding: 13px 22px; font-size: 0.9375rem; }
}
/* END_SECTION:nooci-vsl-hero */

/* START_SECTION:nooci-x-reasons-page (INDEX:76) */
.xrp { font-family: var(--font-body, 'Inter', sans-serif); color: #262320; }
.xrp h1, .xrp h2, .xrp h3 { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); letter-spacing: -0.02em; }
.xrp .page-width { max-width: 1180px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* CTAs */
.xrp__cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 9999px; text-decoration: none; font-weight: 700; font-size: 0.9375rem; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.xrp__cta--primary { background: #E16C47; color: #fff; box-shadow: 0 6px 18px rgba(225,108,71,0.28); }
.xrp__cta--primary:hover { background: #c9563a; transform: translateY(-1px); color: #fff; text-decoration: none; }
.xrp__cta--ghost { background: transparent; color: #262320; border: 1px solid rgba(38,35,32,0.18); padding-top: 12px; padding-bottom: 12px; }
.xrp__cta--ghost:hover { border-color: #E16C47; color: #E16C47; text-decoration: none; }
.xrp__cta--white { background: #fff; color: #c9563a; box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
.xrp__cta--white:hover { background: #F3F1E9; color: #a84429; transform: translateY(-1px); text-decoration: none; }

/* Hero — yellow band. !important to win over the theme's alternating
   section background rules that paint white over our color. */
.section-xrp { background: #F3E891 !important; overflow-x: clip; }
.xrp { overflow-x: clip; }
.xrp__hero { background: #F3E891 !important; padding: 1.5rem 0 0; }
@media (min-width: 750px) { .xrp__hero { padding: 3.5rem 0 4rem; } }
/* On mobile the gallery should butt right up against the trust strip below — kill all hero padding */
@media (max-width: 749px) {
  .xrp__hero,
  .xrp__hero--split { padding: 0 !important; }
  .xrp__hero .xrp__hero-inner { padding: 1rem 1.5rem 0; gap: 0.5rem; }
  .xrp__hero-gallery { margin-bottom: 0; }
}
.xrp__hero-inner { text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.xrp__hero--split .xrp__hero-inner {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 1180px;
  align-items: center;
}
@media (min-width: 750px) {
  .xrp__hero--split .xrp__hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; text-align: left; }
}
.xrp__hero-copy { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
@media (min-width: 750px) { .xrp__hero-copy { align-items: flex-start; } }
.xrp__hero--split .xrp__hero-rating { justify-self: center; }
.xrp__hero--split .xrp__hero-cta-row { justify-content: center; }
@media (min-width: 750px) {
  .xrp__hero--split .xrp__hero-rating { justify-self: flex-start; }
  .xrp__hero--split .xrp__hero-cta-row { justify-content: flex-start; }
  .xrp__hero--split .xrp__hero-heading { text-align: left; }
  .xrp__hero--split .xrp__hero-eyebrow { text-align: left; }
  .xrp__hero--split .xrp__hero-sub { text-align: left; max-width: none; }
  .xrp__hero--split .xrp__risk-list { justify-content: flex-start; }
  .xrp__hero--split .xrp__risk { text-align: left; }
}
.xrp__hero--split .xrp__hero-heading { font-size: clamp(1.4rem, 6.5vw, 2.4rem); }
.xrp__hero-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  order: -1;
  /* edge-to-edge on mobile: pull out of page-width's 1.5rem padding */
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
@media (min-width: 750px) {
  .xrp__hero-gallery { order: 0; gap: 12px; margin-left: 0; margin-right: 0; }
}
.xrp__hero-gallery-main {
  position: relative;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  border-radius: 0;
  /* Match the PDP gallery background (#fafafa) so transparent product PNGs
     don't float on the yellow hero. !important to win over any inherited bg. */
  background: #fafafa !important;
}
@media (min-width: 750px) {
  .xrp__hero-gallery-main { max-width: 540px; margin: 0 auto; border-radius: 16px; }
}
.xrp__hero-gallery-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.xrp__hero-gallery-img.is-active { opacity: 1; }
.xrp__hero-gallery-thumbs {
  display: flex; gap: 6px;
  overflow-x: auto;
  /* Tight to the main gallery (~6px) on mobile per design feedback */
  padding: 6px 1.5rem 4px;
  justify-content: center;
}
@media (min-width: 750px) { .xrp__hero-gallery-thumbs { gap: 8px; padding: 8px 2px 2px; } }

/* Slightly larger thumbs on mobile (32x32) — desktop stays 40x40. */
.xrp__hero-gallery-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 32px; height: 32px;
  padding: 0;
  border: 2px solid rgba(38,35,32,0.12);
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
@media (min-width: 750px) { .xrp__hero-gallery-thumb { width: 40px; height: 40px; border-radius: 8px; } }
.xrp__hero-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xrp__hero-gallery-thumb.is-active { border-color: #E16C47; }
.xrp__hero-gallery-thumb:hover { transform: translateY(-1px); }
.xrp__hero-gallery-thumb-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #E16C47;
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
@keyframes xrpThumbProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Stars + rating */
.xrp__hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(38,35,32,0.78);
  margin-bottom: 0.25rem;
}
@media (min-width: 750px) {
  .xrp__hero-rating { gap: 8px; margin-bottom: 0.5rem; }
}
.xrp__stars { display: inline-flex; gap: 2px; }
.xrp__rating-text { line-height: 1.3; }
/* Mobile: move the rating row UNDER the CTAs so the title sits higher.
   Use flex `order` to reposition without touching the markup. */
@media (max-width: 749px) {
  .xrp__hero-copy { display: flex; flex-direction: column; }
  .xrp__hero-rating  { order: 5; margin: 0.5rem 0 0; font-size: 0.6875rem; gap: 4px; }
  .xrp__hero-rating .xrp__stars svg { width: 11px !important; height: 11px !important; }
  .xrp__rating-text  { font-size: 0.6875rem; max-width: none; }
  .xrp__hero-eyebrow { order: 1; font-size: 0.625rem; letter-spacing: 0.08em; margin: 0 0 0.375rem; }
  .xrp__hero-heading { order: 2; }
  .xrp__hero-sub     { order: 3; }
  .xrp__hero-cta-row { order: 4; }
  .xrp__risk-list, .xrp__risk { order: 6; }
}
.xrp__hero-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #E16C47; margin: 0.25rem 0 0.5rem; }
.xrp__hero-heading { font-size: clamp(1.375rem, 6vw, 3rem); font-weight: 600; line-height: 1.1; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
.xrp__hero-sub { font-size: clamp(0.875rem, 3.5vw, 1rem); line-height: 1.5; color: rgba(38,35,32,0.72); margin: 0 auto 0.875rem; max-width: 620px; }
.xrp__hero-cta-row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 0.75rem;
  width: 100%;
}
@media (max-width: 480px) {
  .xrp__hero-cta-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .xrp__hero-cta-row .xrp__cta { justify-content: center; width: 100%; padding: 14px 22px; }
}

/* Risk list with checkmarks (replaces the · separated text) */
.xrp__risk { font-size: 0.75rem; color: rgba(38,35,32,0.55); margin: 0; text-align: center; }
.xrp__risk-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(38,35,32,0.65);
}
.xrp__risk-list li { display: inline-flex; align-items: center; gap: 5px; line-height: 1.3; }
.xrp__risk-list svg { flex: 0 0 auto; }
@media (max-width: 480px) {
  .xrp__risk-list { font-size: 0.7rem; gap: 4px 12px; }
}

/* Trust strip */
.xrp__trust { background: #4F576A; color: #F3F1E9; padding: 0.875rem 0; font-size: 0.8125rem; }
.xrp__trust-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; }
.xrp__trust-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }

/* Stats */
.xrp__stats { background: #262320; color: #F3F1E9; padding: 3rem 0; }
.xrp__stats-inner { text-align: center; }
.xrp__stats-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.5rem; }
.xrp__stats-heading { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; max-width: 760px; margin: 0 auto 2rem; line-height: 1.2; }
.xrp__stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.xrp__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.xrp__stat-num { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; color: #E16C47; line-height: 1; }
.xrp__stat-label { font-size: 0.875rem; opacity: 0.85; max-width: 200px; }

/* Reasons */
.xrp__reasons { background: #F3F1E9; padding: 2.25rem 0 2.5rem; }
@media (min-width: 750px) { .xrp__reasons { padding: 4.5rem 0; } }
/* Tighten the page-width gutters on mobile so we don't get triple padding (viewport + section + card) */
.xrp__reasons-inner { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 750px) { .xrp__reasons-inner { padding-left: 1.5rem; padding-right: 1.5rem; } }
.xrp__reasons-header { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.xrp__reasons-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.75rem; }
.xrp__reasons-heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: 0 0 0.75rem; }
.xrp__reasons-sub { font-size: 1rem; color: rgba(38,35,32,0.7); line-height: 1.55; margin: 0; }
.xrp__reasons-list { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 750px) { .xrp__reasons-list { gap: 3rem; } }
.xrp__reason {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.25rem;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(38,35,32,0.06);
  scroll-margin-top: 80px;
  position: relative;
  overflow: hidden; /* clip the edge-to-edge image on mobile */
}
@media (min-width: 750px) {
  .xrp__reason { gap: 1.5rem; padding: 2rem; border-radius: 18px; overflow: visible; }
}
.xrp__reason-head { display: flex; flex-direction: column; }
.xrp__reason-body-wrap { display: flex; flex-direction: column; gap: 0.75rem; }
@media (max-width: 749px) {
  /* Smaller, more digestible text on mobile across the reason card */
  .xrp__reason { padding: 1rem 1rem 1.125rem; gap: 0.625rem; }
  .xrp__reason-bullets { margin-top: 0.5rem; }
  .xrp__reason-bullets li { font-size: 0.75rem; line-height: 1.45; gap: 6px; }
  .xrp__reason-bullets svg { width: 11px; height: 11px; margin-top: 3px; }
  .xrp__reason-body { font-size: 0.8125rem; line-height: 1.5; }
  .xrp__reason-heading { font-size: 0.9375rem; line-height: 1.25; margin: 0 0 0.25rem; }
  .xrp__reason-num { font-size: 0.9375rem; margin-bottom: 0.125rem; }
  .xrp__reason-tag { font-size: 0.5625rem; padding: 2px 7px; letter-spacing: 0.06em; margin-bottom: 0.375rem; }
}
.xrp__reason--has-image { grid-template-columns: 1fr; }
.xrp__reason-image {
  position: relative;
  display: block;
  width: 100%;
  order: -1;
  /* allow badge to overflow on desktop */
  overflow: visible;
  padding-bottom: 18px;
  padding-right: 18px;
}
.xrp__reason-image-frame {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #F3F1E9;
  aspect-ratio: 5/4;
}
@media (max-width: 749px) {
  /* Image goes between heading and body, edge-to-edge inside the card */
  .xrp__reason { display: flex; flex-direction: column; }
  .xrp__reason-head      { order: 1; }
  .xrp__reason-image     { order: 2; padding: 0; margin: 0.25rem -1rem 0.25rem; width: calc(100% + 2rem); }
  .xrp__reason-callout   { order: 2; }
  .xrp__reason-body-wrap { order: 3; }
  .xrp__reason-image-frame { border-radius: 0; aspect-ratio: 5/4; }
  /* Floating badge: tuck against the inner content edge instead of overflowing the card */
  .xrp__img-badge { right: 8px; bottom: 8px; }
}
.xrp__reason-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Floating image badges (overflow bottom-right) ── */
.xrp__img-badge {
  position: absolute;
  right: -10px;
  bottom: -14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(38,35,32,0.16), 0 2px 6px rgba(38,35,32,0.06);
  font-family: var(--font-body, 'Inter', sans-serif);
  color: #262320;
  z-index: 2;
  max-width: 78%;
}
.xrp__img-badge-stars {
  color: #E8B23A;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.xrp__img-badge-icon { display: inline-flex; flex: 0 0 auto; }
/* Higher-specificity selector (.xrp__img-badge img) — beats the legacy
   `.xrp__reason-image img { width:100%; height:100% }` rule that was
   forcing the headshot to fill the whole image frame (rendering at 283px
   instead of 36px). Using `img.xrp__img-badge-photo` plus an `!important`
   on the dimensions guarantees we win regardless of cascade order. */
img.xrp__img-badge-photo,
.xrp__img-badge img.xrp__img-badge-photo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px;
  max-width: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(38,35,32,0.18);
  display: inline-block;
  padding: 0;
  margin: 0;
}
.xrp__img-badge--has-photo { padding-left: 8px; }
.xrp__img-badge-text {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  font-weight: 700;
  font-size: 0.875rem;
  color: #262320;
}
.xrp__img-badge-text strong { font-weight: 700; }
.xrp__img-badge-text span { font-weight: 500; color: rgba(38,35,32,0.65); font-size: 0.75rem; }
.xrp__img-badge-eyebrow {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(38,35,32,0.55) !important;
  margin-bottom: 2px;
}
.xrp__img-badge--loved .xrp__img-badge-text { font-size: 0.875rem; }
.xrp__img-badge--doctor_capodice .xrp__img-badge-text strong,
.xrp__img-badge--doctor_miller .xrp__img-badge-text strong { font-size: 0.875rem; line-height: 1.15; }
@media (max-width: 749px) {
  .xrp__img-badge { right: -6px; bottom: -10px; padding: 8px 12px; max-width: 88%; }
  .xrp__img-badge-text { font-size: 0.8125rem; }
}

.xrp__reason-callout--floating { align-self: flex-start; }
@media (min-width: 750px) {
  /* Desktop: image floats right of head + body via grid template areas.
     Higher-specificity selectors so we win against any cached legacy rule
     that might still be served from Shopify's section render cache. */
  .xrp .xrp__reasons .xrp__reason {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-areas: none;
    gap: 1.5rem;
  }
  .xrp .xrp__reasons .xrp__reason--has-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) !important;
    grid-template-areas:
      "head image"
      "body image" !important;
    align-items: start;
    gap: 1rem 2.5rem;
    padding: 2.25rem 2.5rem;
  }
  .xrp .xrp__reasons .xrp__reason--has-image .xrp__reason-head      { grid-area: head; }
  .xrp .xrp__reasons .xrp__reason--has-image .xrp__reason-image     { grid-area: image; align-self: center; max-width: 420px; aspect-ratio: 5/4; justify-self: end; }
  .xrp .xrp__reasons .xrp__reason--has-image .xrp__reason-body-wrap { grid-area: body; }
}
.xrp__reason-num { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); font-size: 1.5rem; font-weight: 700; color: #E16C47; line-height: 1; margin-bottom: 0.5rem; opacity: 0.6; }
.xrp__reason-tag { display: inline-flex; width: fit-content; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #E16C47; background: rgba(225,108,71,0.08); padding: 4px 10px; border-radius: 9999px; margin-bottom: 0.5rem; }
.xrp__reason-heading { font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.25; margin: 0 0 0.875rem; }
.xrp__reason-body { font-size: 1rem; line-height: 1.6; color: rgba(38,35,32,0.78); }
.xrp__reason-body p { margin: 0 0 0.75rem; }
.xrp__reason-body p:last-child { margin: 0; }
.xrp__reason-bullets { list-style: none; padding: 0; margin: 0.875rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.xrp__reason-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.5; color: rgba(38,35,32,0.85); }
.xrp__reason-bullets svg { flex: 0 0 auto; margin-top: 4px; }
.xrp__reason-callout { display: inline-flex; flex-direction: column; gap: 4px; padding: 1rem 1.25rem; background: rgba(225,108,71,0.08); border-radius: 12px; align-self: flex-start; margin-top: 0.5rem; max-width: fit-content; }
.xrp__callout-num { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); font-size: 1.5rem; font-weight: 700; color: #E16C47; line-height: 1; }
.xrp__callout-label { font-size: 0.75rem; font-weight: 600; color: rgba(38,35,32,0.78); letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Inter-reason interjections — deep navy boxed panels for contrast ── */
.xrp__interject {
  margin: 2.5rem 0;
  padding: 0;
  background: #1A2A47;
  border-radius: 24px;
  color: #F3F1E9;
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(26,42,71,0.35);
}
.xrp__interject-inner {
  padding: 2.5rem 2rem;
}
@media (min-width: 750px) {
  .xrp__interject-inner { padding: 3rem 3rem; }
}
.xrp__interject-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E8B289;
  margin: 0 0 1.25rem;
  text-align: center;
}
.xrp__interject-heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 auto 2rem;
  text-align: center;
  max-width: 640px;
  line-height: 1.25;
  color: #F3F1E9;
}
.xrp__interject-foot {
  text-align: center;
  font-size: 0.75rem;
  color: rgba(243,241,233,0.55);
  margin: 1.25rem 0 0;
}
.xrp__interject-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 750px) {
  .xrp__interject-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.xrp__interject-grid--stats { gap: 1.5rem; }
@media (min-width: 750px) {
  .xrp__interject-grid--stats { grid-template-columns: repeat(4, 1fr); }
}

/* Stat card — Clinically Proven look */
.xrp__stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0.5rem;
  text-align: center;
}
.xrp__stat-card-num {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  color: #F3F1E9;
  line-height: 1;
  letter-spacing: -0.02em;
}
.xrp__stat-card-label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(243,241,233,0.78);
  max-width: 220px;
}

/* Reviews interjection — deep navy box, lighter cards inside */
.xrp__interject--reviews .xrp__t-card {
  background: rgba(243,241,233,0.06);
  border: 1px solid rgba(243,241,233,0.08);
  border-top: 1px solid rgba(243,241,233,0.08);
  border-radius: 14px;
  padding: 1.25rem 1.25rem;
  text-align: left;
}
.xrp__interject--reviews .xrp__t-quote { color: #F3F1E9; font-size: 0.9375rem; line-height: 1.55; margin: 0.5rem 0 1rem; }
.xrp__interject--reviews .xrp__t-attr strong { color: #F3F1E9; }
.xrp__interject--reviews .xrp__t-attr span { color: rgba(243,241,233,0.6); }
.xrp__interject--reviews .xrp__t-stars { color: #E8B23A; }

/* Scientist quote interjection — "What scientists say" UX */
.xrp__interject--quote .xrp__interject-inner { padding: 2.25rem 2rem; }
@media (min-width: 750px) {
  .xrp__interject--quote .xrp__interject-inner { padding: 3rem 3.5rem; }
}
.xrp__expert2 {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1.75rem;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  border: none;
  max-width: 920px;
  margin: 0 auto;
}
.xrp__expert2-photo {
  width: 96px; height: 96px;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
  background: rgba(243,241,233,0.1);
  border: 2px solid rgba(243,241,233,0.18);
}
.xrp__expert2-photo--placeholder { display: flex; align-items: center; justify-content: center; }
.xrp__expert2-quote {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  font-style: normal;
  font-weight: 500;
  color: #F3F1E9;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.xrp__expert2-attr {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243,241,233,0.65);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xrp__expert2-attr strong {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  color: #F3F1E9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.xrp__expert2-attr span {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(243,241,233,0.65);
}
@media (max-width: 640px) {
  .xrp__expert2 { grid-template-columns: 1fr; text-align: center; gap: 1.25rem; }
  .xrp__expert2-photo { margin: 0 auto; }
  .xrp__expert2-attr { align-items: center; }
}

/* Inline CTA */
.xrp__inline-cta { background: #E16C47; color: #fff; padding: 3rem 1.5rem; text-align: center; }
.xrp__inline-cta-inner { max-width: 720px; margin: 0 auto; }
.xrp__inline-cta-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.85); margin: 0 0 0.5rem; }
.xrp__inline-cta-heading { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 600; margin: 0 0 1.25rem; line-height: 1.25; }
.xrp__inline-cta-micro { font-size: 0.75rem; color: rgba(255,255,255,0.82); margin: 0.75rem 0 0; }

/* Purchase intro — sits just above the PDP section, no bg, no CTA */
.xrp__purchase-intro {
  background: transparent;
  padding: 3.5rem 0 4rem;
  text-align: center;
}
@media (max-width: 749px) {
  .xrp__purchase-intro { padding: 2.5rem 0 3rem; }
}
.xrp__purchase-intro-inner { max-width: 760px; margin: 0 auto; }
.xrp__purchase-intro-eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #E16C47;
  margin: 0 0 1rem;
}
.xrp__purchase-intro-heading {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-size: clamp(1.875rem, 4.5vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #262320;
  margin: 0 0 1rem;
}
.xrp__purchase-intro-sub {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: rgba(38,35,32,0.7);
  margin: 0 auto;
  max-width: 620px;
}
.xrp__inline-cta--white { background: #fff; color: #262320; }
.xrp__inline-cta-eyebrow--dark { color: #E16C47; }
.xrp__inline-cta-heading--dark { color: #262320; }
.xrp__inline-cta-micro--dark { color: rgba(38,35,32,0.55); }

/* Compare */
.xrp__compare { background: #fff; padding: 4rem 0; }
.xrp__compare-inner { max-width: 1000px; margin: 0 auto; }
.xrp__compare-eyebrow { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.5rem; }
.xrp__compare-heading { text-align: center; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; line-height: 1.2; margin: 0 0 2rem; }
.xrp__compare-table { display: flex; flex-direction: column; gap: 1px; background: rgba(38,35,32,0.08); border-radius: 14px; overflow: hidden; }
.xrp__compare-row { display: grid; grid-template-columns: 1.2fr 1.5fr 1.5fr; gap: 1px; }
.xrp__compare-row > span { background: #fff; padding: 1rem 1.25rem; font-size: 0.9375rem; line-height: 1.4; }
.xrp__compare-row--head > span { font-weight: 700; background: #F3F1E9; font-size: 0.875rem; }
.xrp__compare-feat { color: rgba(38,35,32,0.65); font-weight: 500; }
.xrp__compare-nooci { color: #262320; }
.xrp__compare-comp { color: rgba(38,35,32,0.65); }
.xrp__check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; background: #E16C47; color: #fff; font-size: 0.875rem; font-weight: 700; margin-right: 6px; box-shadow: 0 4px 10px rgba(225,108,71,0.28); }
.xrp__cross { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 9999px; background: rgba(38,35,32,0.08); color: rgba(38,35,32,0.55); font-size: 0.875rem; font-weight: 700; margin-right: 6px; }

/* Expert */
.xrp__expert { background: #F3F1E9; padding: 4rem 0; }
.xrp__expert-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.xrp__expert-quote { font-family: var(--font-heading, 'GTF Good Sans', sans-serif); font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 500; line-height: 1.45; color: #262320; margin: 0 0 1.25rem; font-style: italic; }
.xrp__expert-attr { font-size: 0.875rem; line-height: 1.5; color: rgba(38,35,32,0.78); }
.xrp__expert-attr strong { color: #262320; }

/* Testimonials */
.xrp__testimonials { background: #fff; padding: 4rem 0; }
.xrp__testimonials-inner { text-align: center; }
.xrp__t-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.5rem; }
.xrp__t-heading { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; margin: 0 0 2rem; }
.xrp__t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.xrp__t-card { background: transparent; border-radius: 14px; padding: 1.25rem 0; text-align: left; margin: 0; border-top: 1px solid rgba(38,35,32,0.08); }
.xrp__t-stars { font-size: 0.875rem; color: #E16C47; letter-spacing: 0.05em; }
.xrp__t-quote { font-size: 0.9375rem; line-height: 1.55; color: #262320; margin: 0.5rem 0 1rem; }
.xrp__t-attr { font-size: 0.8125rem; line-height: 1.4; color: rgba(38,35,32,0.65); }
.xrp__t-attr strong { display: block; color: #262320; margin-bottom: 2px; }

/* FAQ */
.xrp__faq { background: #F3F1E9; padding: 4rem 0; }
.xrp__faq-inner { max-width: 760px; margin: 0 auto; }
.xrp__faq-heading { text-align: center; font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; margin: 0 0 2rem; }
.xrp__faq-item { background: #fff; border-radius: 12px; padding: 0; border: 1px solid rgba(38,35,32,0.08); margin-bottom: 0.625rem; }
.xrp__faq-item summary { padding: 1rem 1.25rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 0.9375rem; }
.xrp__faq-item summary::-webkit-details-marker { display: none; }
.xrp__faq-item summary::after { content: '+'; font-size: 1.25rem; color: #E16C47; transition: transform 0.2s; }
.xrp__faq-item[open] summary::after { transform: rotate(45deg); }
.xrp__faq-body { padding: 0 1.25rem 1.25rem; font-size: 0.9375rem; line-height: 1.55; color: rgba(38,35,32,0.78); }
.xrp__faq-body p { margin: 0; }

/* Guarantee */
.xrp__guarantee { background: #F3E891; padding: 4rem 0; text-align: center; }
.xrp__guarantee-inner { max-width: 720px; margin: 0 auto; }
.xrp__g-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.5rem; }
.xrp__g-heading { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 600; line-height: 1.2; margin: 0 0 1rem; color: #262320; }
.xrp__g-sub { font-size: 1rem; line-height: 1.55; color: rgba(38,35,32,0.78); margin: 0 0 1.5rem; }

/* Final CTA */
.xrp__final { background: #262320; color: #F3F1E9; padding: 4rem 0; text-align: center; }
.xrp__final-inner { max-width: 720px; margin: 0 auto; }
.xrp__final-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #E16C47; margin: 0 0 0.5rem; }
.xrp__final-heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 600; line-height: 1.15; margin: 0 0 1rem; color: #F3F1E9; }
.xrp__final-sub { font-size: 1rem; line-height: 1.55; opacity: 0.85; margin: 0 0 1.5rem; }

@media (max-width: 749px) {
  .xrp__t-grid { grid-template-columns: 1fr; }
  .xrp__stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .xrp__compare-row { grid-template-columns: 1fr; }
  .xrp__compare-row > span { padding: 0.75rem 1rem; }
  .xrp__compare-row--head > span:first-child { display: none; }
}

/* ─── Founder Video interjection (replaces "REAL RESULTS" at slot 4 when enabled) ─── */
/* Vertical-friendly: cap width on desktop so 9:16 founder videos don't dominate.
   Mobile keeps a slightly tighter cap. The aspect-ratio + object-fit ensures the
   video frame stays in the 9:16 box regardless of source dimensions. */
.xrp__interject--video .xrp__video-player {
  max-width: 380px;
  max-height: 70vh;
  aspect-ratio: 9 / 16;
  margin: 1.25rem auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.xrp__interject--video .xrp__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.xrp__interject--video .xrp__video-embed { position: relative; width: 100%; height: 100%; }
.xrp__interject--video .xrp__video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 749px) {
  .xrp__interject--video .xrp__video-player {
    max-width: min(320px, calc(100vw - 2.5rem));
    max-height: 75vh;
  }
}

/* ─── Organ-Clock micro interjection (replaces "WHAT SCIENTISTS SAY" at slot 6 when enabled) ─── */
.xrp__interject--organ-clock .xrp__organ-clock-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  max-width: 880px;
  margin: 1.5rem auto 0;
}
.xrp__oc-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0.375rem;
  background: rgba(243, 241, 233, 0.06);
  border: 1px solid rgba(243, 241, 233, 0.12);
  border-radius: 10px;
  text-align: center;
  min-height: 64px;
  transition: transform 200ms ease;
}
.xrp__oc-cell--active {
  background: var(--color-coral, #E16C47);
  border-color: var(--color-coral, #E16C47);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(225,108,71,0.4);
}
.xrp__oc-time {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(243, 241, 233, 0.55);
  margin-bottom: 0.125rem;
}
.xrp__oc-cell--active .xrp__oc-time { color: rgba(255,255,255,0.85); }
.xrp__oc-organ {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #F3F1E9;
  line-height: 1.15;
}
.xrp__cell--active .xrp__oc-organ { color: #fff; }
.xrp__organ-clock-caption {
  max-width: 600px;
  margin: 1.25rem auto 0;
  text-align: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(243, 241, 233, 0.72);
}
@media (max-width: 749px) {
  .xrp__interject--organ-clock .xrp__organ-clock-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.375rem;
  }
  .xrp__oc-cell { padding: 0.625rem 0.25rem; min-height: 56px; }
  .xrp__oc-organ { font-size: 0.6875rem; }
}
/* END_SECTION:nooci-x-reasons-page */

/* START_SECTION:pdp-app-download (INDEX:77) */
/* 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: #262320;
  }

  .pdp-app-cta--dark .pdp-app-cta__inner {
    background-color: #262320;
    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: #262320;
    color: #fff;
  }

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

  /* 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:78) */
.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: 600;
    letter-spacing: -0.02em;
    color: #262320;
    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: #262320;
    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 #262320;
    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:79) */
.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: 600;
    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:80) */
.pdp-breadcrumb-section {
  background: var(--color-background, #F3F1E9);
  margin: 0;
  padding: 0;
}
.pdp-breadcrumb {
  padding: 8px 0 6px;
  background: var(--color-background, #F3F1E9);
}
.pdp-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 1.3;
  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, #262320);
  transition: width 0.25s ease;
}
.pdp-breadcrumb__item a:hover {
  color: var(--color-foreground, #262320);
  text-decoration: none !important;
}
.pdp-breadcrumb__item a:hover::after {
  width: 100%;
}
.pdp-breadcrumb__item--current {
  color: var(--color-foreground, #262320);
  font-weight: 500;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* END_SECTION:pdp-breadcrumb */

/* START_SECTION:pdp-bundle-upsell (INDEX:81) */
/* ═══════════════════════════════════════
   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: #262320;
}
/* 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: 600;
  line-height: 1.3;
  margin: 0;
}
.pdp-bundle__title a {
  color: #262320;
  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: #262320;
}
.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;
  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: #262320;
  color: #fff;
  border: none;
  font-weight: 600;
  overflow: hidden;
}
/* `is-adding` keeps full color/opacity — the global theme.css rule
   (`button.is-adding { color: #fff; opacity: 1; cursor: progress }`) takes
   over and the spinner stays vivid white. We intentionally do NOT dim the
   button while loading — that read as "buggy" to users. */
.pdp-bundle__badge--primary.is-adding {
  pointer-events: none;
}
.pdp-bundle__badge--primary.is-added {
  background: #22c55e;
}
.pdp-bundle__badge--secondary {
  background: transparent;
  color: #262320;
  border: 1px solid rgba(0,0,0,0.15);
}
.pdp-bundle__badge--secondary:hover {
  border-color: #262320;
  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: #F3F1E9;
  min-width: 56px;
}
.pdp-bundle__tier-pct {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  color: #262320;
}
.pdp-bundle__tier-label {
  font-size: 0.625rem;
  font-weight: 500;
  color: #262320;
  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: #262320;
}

/* 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-comparison (INDEX:82) */
.comparison {
    padding-block: 4rem;
  }

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

  .comparison__title {
    font-size: var(--font-size-3xl);
    font-weight: 600;
    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--nooci {
    text-align: center;
    font-weight: 600;
    border-block-end: 2px solid #E16C47;
    background: rgba(45, 138, 35, 0.1);
    border-start-start-radius: 0.5rem;
    border-start-end-radius: 0.5rem;
    position: relative;
  }

  .comparison__th--nooci::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__nooci-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
  }

  .comparison__nooci-header span {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #262320;
  }

  .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--nooci {
    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--nooci {
    font-weight: 600;
    background: rgba(45, 138, 35, 0.06);
    color: #262320;
    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 NOOCI column */
  .comparison__row:last-child .comparison__value--nooci {
    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-faq (INDEX:83) */
.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: 600;
    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, #15803d 0%, #22c55e 50%, #16a34a 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: #262320;
    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: #262320; }

  .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-hero (INDEX:84) */
/* ========================================
   Sticky Bar — selling-plan toggle, pricing, save badge
   ======================================== */
.pdp-sticky-bar__meta { gap: 0.25rem; }
.pdp-sticky-bar__title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #262320;
}
.pdp-sticky-bar__sp-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(38, 35, 32, 0.06);
  border: 1px solid rgba(38, 35, 32, 0.1);
  border-radius: 9999px;
  padding: 2px;
  width: -moz-fit-content;
  width: fit-content;
  flex-shrink: 0;
}
.pdp-sticky-bar__sp-select-wrap {
  display: none;
  position: relative;
  align-items: center;
  flex-shrink: 0;
}
.pdp-sticky-bar__sp-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(38, 35, 32, 0.06);
  border: 1px solid rgba(38, 35, 32, 0.1);
  border-radius: 9999px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #262320;
  padding: 7px 24px 7px 12px;
  cursor: pointer;
  line-height: 1.2;
}
.pdp-sticky-bar__sp-select-caret {
  position: absolute;
  right: 10px;
  pointer-events: none;
  color: #262320;
}
@media (max-width: 749px) {
  .pdp-sticky-bar__sp-toggle { display: none; }
  .pdp-sticky-bar__sp-select-wrap { display: inline-flex; }
}
.theme-dark .pdp-sticky-bar__sp-select {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #F3F1E9;
}
.theme-dark .pdp-sticky-bar__sp-select-caret { color: #F3F1E9; }
.pdp-sticky-bar__sp-pill {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 5px 12px;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: rgba(38, 35, 32, 0.62);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
  white-space: nowrap;
  line-height: 1.3;
}
.pdp-sticky-bar__sp-pill--active {
  background: #262320;
  color: #F3F1E9;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.pdp-sticky-bar__sp-pill:hover:not(.pdp-sticky-bar__sp-pill--active) {
  color: #262320;
}
.pdp-sticky-bar__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.25rem 0.375rem;
  flex-wrap: wrap;
}
.pdp-sticky-bar__price {
  font-size: clamp(1rem, 2.5vw, 1.1875rem);
  font-weight: 700;
  color: #262320;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.pdp-sticky-bar__compare {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
  font-weight: 500;
  white-space: nowrap;
}
.pdp-sticky-bar__save-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: #E16C47;
  border-radius: 9999px;
  padding: 2px 7px;
  white-space: nowrap;
  line-height: 1.4;
}
.pdp-sticky-bar__frequency {
  display: block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.55);
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdp-sticky-bar__frequency[hidden] { display: none; }
.pdp-sticky-bar__save-badge[hidden] { display: none !important; }
.theme-dark .pdp-sticky-bar__sp-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.theme-dark .pdp-sticky-bar__sp-pill { color: rgba(255, 255, 255, 0.55); }
.theme-dark .pdp-sticky-bar__sp-pill--active {
  background: #F3F1E9;
  color: #262320;
}
.theme-dark .pdp-sticky-bar__sp-pill:hover:not(.pdp-sticky-bar__sp-pill--active) {
  color: rgba(255, 255, 255, 0.85);
}
.theme-dark .pdp-sticky-bar__compare { color: rgba(255, 255, 255, 0.35); }

/* ========================================
   PDP Hero — 2-column product detail
   ======================================== */

.pdp-hero {
  display: block;
  padding-block-start: 0;
  padding-block-end: var(--space-lg, 2rem);
  overflow-x: clip;
  max-width: 100%;
}
/* Reserve space at the bottom of the page for the sticky add-to-cart bar
   so nothing hides behind it on mobile */
@media (max-width: 749px) {
  pdp-hero ~ *, pdp-hero ~ section:last-of-type {
    padding-bottom: 90px;
  }
}
/* Top padding handled by pdp-breadcrumb bottom padding for equal spacing */

.pdp-hero__grid {
  display: grid;
  /* minmax(0, 1fr) — NOT plain 1fr. `1fr` defaults to minmax(auto, 1fr),
     which lets intrinsic-min-width children (like the 8-slide flex
     .pdp-hero__carousel) push the track wider than the viewport on
     mobile, overflowing the page to the right. minmax(0, 1fr) caps the
     min at 0 so the carousel is forced to fit the column. */
  grid-template-columns: minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.5rem;
}

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

.pdp-hero__gallery-sticky {
  position: relative;
}

/* Mobile: full-bleed gallery — touches viewport left/right edges */
@media (max-width: 749px) {
  .pdp-hero__gallery {
    margin-left: -16px;
    margin-right: -16px;
  }
  .pdp-hero__main-image {
    border-radius: 0;
  }
  .pdp-hero__thumbnails {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.pdp-hero__main-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--gallery-bg, var(--color-background, #F3F1E9));
  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 — GIF-like autoplay, no controls */
.pdp-hero__slide video,
.pdp-hero__slide iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* prevents accidental clicks opening fullscreen */
}
/* Belt-and-braces: hide any user-agent-rendered controls */
.pdp-hero__slide video::-webkit-media-controls,
.pdp-hero__slide video::-webkit-media-controls-panel,
.pdp-hero__slide video::-webkit-media-controls-enclosure {
  display: none !important;
  -webkit-appearance: none !important;
}
.pdp-hero__slide video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
}
/* Smooth image transitions when switching carousel slides */
.pdp-hero__slide img {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

.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, #262320);
  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, #F3F1E9);
  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, #262320);
}

.pdp-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  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;
}
a.pdp-hero__rating,
a.pdp-hero__rating:hover,
a.pdp-hero__rating:focus,
a.pdp-hero__rating:visited {
  text-decoration: none !important;
}

/* "Verified Reviews" label — sits right after the Loox star + count
   widget on the same line. Loox controls its own markup/spacing, so
   this is a separate static element rather than something injected
   into the loox-rating div itself. */
.pdp-hero__verified-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-secondary, #71717a);
  white-space: nowrap;
}

/* Eyebrow + Title group — tight spacing between product name and headline */
.pdp-hero__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px between eyebrow and headline */
}
.pdp-hero__eyebrow-title {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent, #E16C47);
}

/* Title — 20% smaller per design direction */
.pdp-hero__title {
  font-size: 1.6875rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0;
  color: var(--color-foreground, #262320);
}

/* Price */
.pdp-hero__price {
  display: flex;
  flex-direction: row;
  /* center-align keeps the -N% pill visually centered with the two
     prices instead of sitting on the text baseline (which makes it
     hang lower than the numbers). Current + compare share the same
     font-size so centering doesn't misalign them either. */
  align-items: center;
  gap: 0.5rem;
  margin-block-start: -0.25rem;
}
.pdp-hero__price-current,
.pdp-hero__price-compare { line-height: 1; }

/* Price — deliberately understated; the product sells itself, not
   the number. Current + compare use the same font-size, differentiated
   only by weight and strikethrough. */
.pdp-hero__price-current {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
}

.pdp-hero__price-compare {
  font-size: 1.25rem;
  font-weight: 400;
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
}

.pdp-hero__price-save {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: #E16C47;
  border: none;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.pdp-hero__price-save[hidden] { display: none; }

/* Total savings line */
.pdp-hero__price-total-savings {
  margin-top: 0.125rem;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #E16C47;
  font-weight: 500;
}
.pdp-hero__price-total-savings strong { font-weight: 700; }
.pdp-hero__price-total-savings[hidden] { display: none; }


/* Subheadline — rich text content from product.description */
.pdp-hero__subheadline {
  margin: 0;
  color: var(--color-text-secondary, #666);
  line-height: 1.625;
  font-size: 1.0625rem; /* 17px */
}
/* Some product descriptions were pasted in from Word/Google Docs and
   carry their own inline font-size (and font-family) on every <p>/
   <span> — inline styles beat this stylesheet's selectors, so without
   this override those products render smaller/different than ones
   with plain, unstyled description text. Forcing every element to
   inherit this block's font-size/family keeps descriptions visually
   consistent across every product page regardless of how the copy
   was pasted in. */
.pdp-hero__subheadline p,
.pdp-hero__subheadline span,
.pdp-hero__subheadline div,
.pdp-hero__subheadline strong,
.pdp-hero__subheadline b,
.pdp-hero__subheadline em,
.pdp-hero__subheadline i,
.pdp-hero__subheadline a,
.pdp-hero__subheadline li {
  font-size: inherit !important;
  font-family: inherit !important;
}
.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: 600;
  color: var(--color-foreground, #262320);
}
.pdp-hero__subheadline em,
.pdp-hero__subheadline i { font-style: italic; }
.pdp-hero__subheadline a {
  color: var(--color-accent, #E16C47);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pdp-hero__subheadline a:hover { text-decoration-thickness: 2px; }
.pdp-hero__subheadline ul,
.pdp-hero__subheadline ol {
  margin: 0.5em 0 0.75em;
  padding-left: 1.25em;
}
.pdp-hero__subheadline li { margin: 0.25em 0; }
.pdp-hero__subheadline h1,
.pdp-hero__subheadline h2,
.pdp-hero__subheadline h3 {
  font-family: var(--font-heading, 'GTF Good Sans', sans-serif);
  font-weight: 600;
  margin: 0.75em 0 0.4em;
  color: var(--color-foreground, #262320);
  letter-spacing: -0.02em;
}
.pdp-hero__subheadline h1 { font-size: 1.3125rem; }
.pdp-hero__subheadline h2 { font-size: 1.25rem; }
.pdp-hero__subheadline h3 { font-size: 1.1875rem; }
.pdp-hero__subheadline blockquote {
  margin: 0.75em 0;
  padding: 0.25em 0.75em;
  border-left: 2px solid var(--color-accent, #E16C47);
  font-style: italic;
  color: rgba(38, 35, 32, 0.7);
}

/* 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.9375rem);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full, 9999px);
  background-color: rgba(0, 0, 0, 0.04);
  color: var(--color-foreground, #262320);
  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, #262320);
  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, 1.0625rem);
  color: var(--color-foreground, #262320);
}

.pdp-hero__usp-desc {
  font-size: var(--font-size-xs, 0.9375rem);
  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: 1.0625rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
}

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

.pdp-hero__linked-swatch--active {
  border-color: var(--color-foreground, #262320);
  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: 1.0625rem;
  font-weight: 500;
  color: var(--color-foreground, #262320);
  background: transparent;
  transition: all 200ms ease;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}

.pdp-hero__linked-pill:hover {
  border-color: var(--color-foreground, #262320);
}

.pdp-hero__linked-pill--active {
  background-color: var(--color-foreground, #262320);
  border-color: var(--color-foreground, #262320);
  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: 1.0625rem;
  font-weight: 600;
  color: var(--color-foreground, #262320);
  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, #262320);
}

.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: 1.0625rem;
  font-weight: 500;
  color: var(--color-foreground, #262320);
  background: transparent;
  transition: all 200ms ease;
  white-space: nowrap;
}

.pdp-hero__pill:hover {
  border-color: var(--color-foreground, #262320);
}

.pdp-hero__pill--active {
  background-color: var(--color-foreground, #262320);
  border-color: var(--color-foreground, #262320);
  color: #fff;
}

.pdp-hero__pill--unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── 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, #262320);
  transition: background 0.25s ease, color 0.25s ease;
  padding: 0;
}
.pdp-hero__qty-btn:hover {
  background: rgba(45, 138, 35, 0.07);
  color: #E16C47;
}
.pdp-hero__qty-btn:active {
  background: rgba(45, 138, 35, 0.13);
  color: #E16C47;
}
.pdp-hero__qty-input {
  width: 32px;
  text-align: center;
  border: none;
  background: transparent;
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-foreground, #262320);
  -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: #E16C47;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(45, 138, 35, 0.25);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background-color 0.2s ease;
}

.pdp-hero__cta:hover {
  box-shadow: 0 4px 16px rgba(45, 138, 35, 0.4);
  transform: translateY(-1px);
}

.pdp-hero__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(45, 138, 35, 0.25);
}

/* 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: 1.0625rem;
}
.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: 1.125rem;
  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: #c9563a; box-shadow: 0 2px 12px rgba(225, 108, 71, 0.35); }
.pdp-hero__cta.is-added { background-color: #c9563a; }
.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); } }

/* ── Stats Strip ── */
.pdp-hero__stats-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(225, 108, 71, 0.06);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  margin-bottom: 0.75rem;
}
.pdp-hero__stat {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #262320;
  white-space: nowrap;
}
.pdp-hero__stat svg { flex-shrink: 0; }
.pdp-hero__stat-sep {
  color: rgba(38, 35, 32, 0.25);
  font-size: 16px;
}

/* ── Selling Plan Radio Cards ── */
.pdp-hero__sp-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: none;
  padding: 0;
  margin: 0;
}
.pdp-hero__sp-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  border: 1.5px solid rgba(38, 35, 32, 0.15);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.pdp-hero__sp-card--active {
  border-color: #E16C47;
  background: #fff;
}
.pdp-hero__sp-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pdp-hero__sp-card-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(38, 35, 32, 0.25);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease;
  margin-top: 3px;
}
.pdp-hero__sp-card--active .pdp-hero__sp-card-radio {
  border-color: #E16C47;
}
.pdp-hero__sp-card--active .pdp-hero__sp-card-radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E16C47;
}
.pdp-hero__sp-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.pdp-hero__sp-card-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pdp-hero__sp-card-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #262320;
}
.pdp-hero__sp-card-badge {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: #E16C47;
  color: #fff;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
}
.pdp-hero__sp-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.pdp-hero__sp-card-detail {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  color: rgba(38, 35, 32, 0.55);
}
.pdp-hero__sp-card-frequency {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: #E16C47;
  background: rgba(225, 108, 71, 0.09);
  border-radius: 9999px;
  letter-spacing: 0.01em;
}
.pdp-hero__sp-card-frequency svg { flex-shrink: 0; }
.pdp-hero__sp-card-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  margin-left: auto;
}
.pdp-hero__sp-card-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  color: rgba(38, 35, 32, 0.4);
  text-decoration: line-through;
}
.pdp-hero__sp-card-price {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #262320;
}

/* ── Split panel + ribbon (Primal-Harvest-style tab layout) ──
   The ribbon is a normal-flow element that sits ABOVE the bordered
   box, at its own height. It never overlaps the box, so neither
   card needs compensating padding — both stay on the same row and
   the same baseline no matter which option is active. */
.pdp-hero__sp-panel {
  position: relative;
  margin: 0 0 1rem;
}
.pdp-hero__sp-ribbon {
  display: inline-block;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #E16C47;
  padding: 6px 14px;
  border-radius: 10px 10px 0 0;
}
.pdp-hero__sp-box {
  /* Plain wrapper on mobile; becomes the bordered box at desktop. */
}
/* Mobile default: keep the existing proven vertical stack — no layout change below 560px */
@media (min-width: 560px) {
  .pdp-hero__sp-ribbon {
    display: block;
    width: 50%;
    text-align: center;
    border-radius: 14px 14px 0 0;
  }
  .pdp-hero__sp-box {
    /* Back to a plain white box — the details panel below (pills, gift
       banner, checklist) lives inside this same box and must stay white,
       not the tan canvas. Only the toggle row above gets the canvas. */
    background: #fff;
    border: 1.5px solid rgba(38, 35, 32, 0.12);
    border-radius: 14px;
    overflow: hidden;
  }
  .pdp-hero__sp-panel--has-ribbon .pdp-hero__sp-box {
    border-top-left-radius: 0;
  }
  .pdp-hero__sp-cards {
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    margin: 0;
    /* Soft neutral canvas — scoped to just the toggle row. The selected
       option's card floats on top of this in solid white; the unselected
       option has no fill of its own, so this canvas color shows through
       (i.e. reads as "transparent" relative to the selected card). The
       box's own overflow:hidden + border-radius above already rounds
       this row's outer corners to match, so no radius is needed here. */
    background: #F5F3EF;
  }
  .pdp-hero__sp-card {
    flex: 1 1 50%;
    border: none;
    border-radius: 0;
    align-items: center;
    background: transparent;
  }
  .pdp-hero__sp-card--active {
    background: #fff;
  }
}

/* ── Subscription perks inside card ── */
/* ── Details panel (toggles with active purchase-type choice) ── */
.pdp-hero__sp-details {
  display: none;
  padding: 0.75rem 1rem 0.875rem;
  background: #fff;
}
.pdp-hero__sp-panel[data-active-choice="subscribe"] .pdp-hero__sp-details[data-sp-details-for="subscribe"] {
  display: block;
}
.pdp-hero__sp-panel[data-active-choice="onetime"] .pdp-hero__sp-details[data-sp-details-for="onetime"] {
  display: block;
}
/* Mobile only: the details panel isn't nested inside a bordered box like
   it is on desktop (where .pdp-hero__sp-box already provides the white
   fill) — give it its own white rounded card here so it doesn't sit
   directly on the page/section background. */
@media (max-width: 559px) {
  .pdp-hero__sp-details {
    border: 1.5px solid rgba(38, 35, 32, 0.12);
    border-radius: 12px;
    margin-top: 0.5rem;
  }
}
.pdp-hero__sp-details-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pdp-hero__sp-savings-badge {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #E16C47;
  background: rgba(225, 108, 71, 0.1);
  padding: 3px 9px;
  border-radius: 9999px;
}
@media (min-width: 560px) {
  .pdp-hero__sp-details {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid rgba(38, 35, 32, 0.08);
  }
}

.pdp-hero__sp-card-perks-divider {
  height: 1px;
  background: rgba(225, 108, 71, 0.15);
  margin: 8px 0 6px;
}
.pdp-hero__sp-gift {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(225,108,71,0.10), rgba(243,232,145,0.35));
  border: 1px dashed rgba(225,108,71,0.45);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #262320;
}
.pdp-hero__sp-gift svg { color: #E16C47; flex: 0 0 auto; }
.pdp-hero__sp-gift strong { font-weight: 700; }
.pdp-hero__sp-gift > span:first-of-type { flex: 1; }
.pdp-hero__sp-gift-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}
.pdp-hero__sp-gift-compare {
  font-size: 0.875rem;
  color: rgba(38, 35, 32, 0.45);
  font-weight: 500;
}
.pdp-hero__sp-gift-free {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: #2F8B5C;
  padding: 2px 7px;
  border-radius: 9999px;
}
.pdp-hero__sp-card-perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.pdp-hero__sp-perk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14.5px;
  color: rgba(38, 35, 32, 0.65);
}
.pdp-hero__sp-perk svg {
  flex-shrink: 0;
}

/* ── Gift Incentive Card ── */
.pdp-hero__gift-incentive {
  margin-top: 1rem;
}
.pdp-hero__gift-card {
  border: 1px solid rgba(38, 35, 32, 0.12);
  border-radius: 12px;
  overflow: hidden;
}
.pdp-hero__gift-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  background: rgba(225, 108, 71, 0.08);
}
.pdp-hero__gift-card-title {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #262320;
}
.pdp-hero__gift-card-savings {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: #262320;
  color: #F3F1E9;
  padding: 2px 8px;
  border-radius: 4px;
}
.pdp-hero__gift-card-rows {
  padding: 0 1rem;
}
.pdp-hero__gift-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(38, 35, 32, 0.06);
}
.pdp-hero__gift-row:last-child { border-bottom: none; }
.pdp-hero__gift-row-name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: #262320;
}
.pdp-hero__gift-row-prices {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pdp-hero__gift-row-compare {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  color: rgba(38, 35, 32, 0.4);
  text-decoration: line-through;
}
.pdp-hero__gift-row-price {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: #262320;
}
.pdp-hero__gift-row-free {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: #E16C47;
}
.pdp-hero__gift-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(38, 35, 32, 0.06);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(38, 35, 32, 0.7);
}
.pdp-hero__gift-note-icon { font-size: 19px; flex-shrink: 0; }

/* Countdown */
.pdp-hero__countdown-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
  background: rgba(38, 35, 32, 0.03);
  border-radius: 10px;
}
.pdp-hero__countdown-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #E16C47;
  white-space: nowrap;
}
.pdp-hero__countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.pdp-hero__cd-block {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #262320;
}
.pdp-hero__cd-unit {
  font-size: 13px;
  font-weight: 500;
  color: rgba(38, 35, 32, 0.5);
}
.pdp-hero__cd-sep {
  font-size: 16px;
  font-weight: 600;
  color: rgba(38, 35, 32, 0.3);
}

/* (sub trust points moved inside subscription card as perks) */
.pdp-hero__sp-option:not(.pdp-hero__sp-option--active) .pdp-hero__sp-save {
  background: rgba(225, 108, 71, 0.12);
  color: #E16C47;
}

/* ── Sticky Add to Cart Bar ── */
.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60; /* above gallery arrows (z-index: 2) and header (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.625rem 0;
  gap: 0.75rem;
}

.pdp-sticky-bar__info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
}
.pdp-sticky-bar__thumb {
  flex-shrink: 0;
}
.pdp-sticky-bar__thumb-img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}
.pdp-sticky-bar__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.125rem;
}

.pdp-sticky-bar__title {
  font-size: 1rem;
  font-weight: 600;
  color: #262320;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-bar__pricing {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.pdp-sticky-bar__price {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 700;
  color: #262320;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.pdp-sticky-bar__compare {
  font-size: clamp(0.875rem, 2vw, 1rem);
  color: rgba(38, 35, 32, 0.45);
  text-decoration: line-through;
  white-space: nowrap;
}

.pdp-sticky-bar__save {
  font-size: 0.875rem;
  font-weight: 600;
  color: #16a34a;
  background: rgba(22,163,74,0.08);
  padding: 1px 6px;
  border-radius: 9999px;
  white-space: nowrap;
}

.pdp-sticky-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  min-width: 0;
  background: #E16C47;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.2s;
}

/* ── Sticky bar — mobile redesign (<=749px) ──
   All info must fit: price + compare + save + dropdown + CTA.
   Single row can't hold everything at 327px, so use TWO rows:
   Row 1 (top, compact):  [ Price ]  [ Compare ]  [ Save badge ]
   Row 2 (bottom, main):  [ Dropdown ]  [ Big CTA ]
   Thumb + title are hidden (redundant — visible in main buy box above). */
@media (max-width: 749px) {
  .pdp-sticky-bar {
    padding-inline: 10px;
  }
  .pdp-sticky-bar__inner {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "info info"
      "select btn";
    gap: 6px 8px;
    padding: 8px 0;
    align-items: center;
  }
  /* Row 1: pricing only (thumb + title hidden) */
  .pdp-sticky-bar__info {
    grid-area: info;
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    display: flex;
    align-items: baseline;
  }
  .pdp-sticky-bar__thumb,
  .pdp-sticky-bar__title {
    display: none !important;
  }
  .pdp-sticky-bar__meta {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }
  .pdp-sticky-bar__pricing {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .pdp-sticky-bar__price {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
  }
  .pdp-sticky-bar__compare {
    font-size: 0.9375rem;
    line-height: 1.2;
    white-space: nowrap;
    color: rgba(38, 35, 32, 0.5);
  }
  .pdp-sticky-bar__save-badge {
    display: inline-flex !important;
    font-size: 0.8125rem;
    padding: 1px 6px;
    line-height: 1.3;
    margin-left: auto; /* push to right edge of row */
  }
  /* Row 2: dropdown + CTA — matching heights (40px) */
  .pdp-sticky-bar__sp-toggle { display: none; }
  .pdp-sticky-bar__sp-select-wrap {
    grid-area: select;
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
  }
  .pdp-sticky-bar__sp-select {
    height: 40px;
    padding: 0 26px 0 12px;
    font-size: 1rem;
    line-height: 1;
    box-sizing: border-box;
  }
  .pdp-sticky-bar__btn {
    grid-area: btn;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    justify-content: center;
    box-sizing: border-box;
  }
}

/* Very narrow phones (<340px) — hide compare strikethrough if tight */
@media (max-width: 339px) {
  .pdp-sticky-bar__compare { display: none; }
}
.pdp-sticky-bar__btn.is-adding {
  pointer-events: none;
}
.pdp-sticky-bar__btn.is-added {
  background: #c9563a;
}
.pdp-sticky-bar__btn:hover {
  background: #c9563a;
  box-shadow: 0 4px 16px rgba(225, 108, 71, 0.4);
  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: rgba(30, 30, 50, 0.95);
  border-color: rgba(255,255,255,0.1);
  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: #E16C47; color: #fff; }

/* Shimmer pseudo-element */
.pdp-hero__cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 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;
  pointer-events: none;
  border-radius: inherit;
}

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

/* 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%, #F3F1E9 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: 1.125rem !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: #262320 !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;
}

/* 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, 1.0625rem);
  font-weight: 500;
  color: var(--color-foreground, #262320);
  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, 1.0625rem);
  color: var(--color-text-secondary, #666);
  line-height: 1.5;
}


/* ─── 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, #F3F1E9);
  border: 1px solid var(--color-border, #deddd8);
  border-radius: 10px;
  font-size: 15px;
  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: 16px;
  color: var(--color-foreground, #262320);
}

/* ─── 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: 13px;
  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, #F3F1E9);
  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, #262320);
  text-decoration: none;
}
.pdp-hero__feature-prompt-link > svg:first-child {
  flex-shrink: 0;
  color: var(--color-foreground, #262320);
}
.pdp-hero__feature-prompt-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pdp-hero__feature-prompt-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-foreground, #262320);
}
.pdp-hero__feature-prompt-desc {
  font-size: 14px;
  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, #262320);
}

/* ---- Desktop ---- */

@media (min-width: 768px) {
  .pdp-hero {
    padding-block: 0 3rem;
  }

  .pdp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 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.4375rem;
  }

  .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__cta::before {
    animation: none;
  }
  .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: 18px;
  font-weight: 700;
  color: #262320;
  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: 16px;
  font-family: inherit;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: #f9f9f7;
  color: #262320;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-input:focus {
  border-color: #E16C47;
  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: 16px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: #E16C47;
  border: none;
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(225,108,71,0.25);
  transition: box-shadow 0.25s ease, transform 0.2s ease, background 0.2s ease;
}
.pdp-hero__notify-btn:hover { background: #c85d3b; box-shadow: 0 4px 16px rgba(225,108,71,0.4); transform: translateY(-1px); }
.pdp-hero__notify-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(225,108,71,0.25); }
.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: 13px;
  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: #262320; }
.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: #E16C47; 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: 19px;
  font-weight: 700;
  color: #262320;
  margin: 0;
}
.pdp-hero__notify-success-desc {
  font-size: 15px;
  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: 15px;
  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: 15px;
  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: 15px;
  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 */
/* App blocks (Loox micro-reviews, etc.) — discreet under CTA */
.pdp-hero__app-block {
  margin-top: 12px;
  max-width: 100%;
  /* NOTE: no overflow clipping here. Loox Snippets Widget positions its
     scroll arrows slightly outside its own bounding box (intentional —
     arrows sit on the edge), and overflow: clip/hidden would crop them.
     The viewport-level safety net lives on .pdp-hero. */
}
.pdp-hero__app-block:empty {
  display: none;
}

/* ── Flush-align Loox Cards Carousel (and any @app block) with product form ──
   Strip horizontal padding/margin on the OUTER wrapper levels only.
   IMPORTANT: do NOT force width:100% on descendants — that breaks the
   carousel's flex layout (slides would each take 100% and the track
   would burst out the right side of the viewport, pushing the whole
   page off-screen on mobile). */
.pdp-hero__app-block > *,
.pdp-hero__app-block > * > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}
/* Known Loox container classes — belt and suspenders */
.pdp-hero__app-block [class*="loox-product-carousel"],
.pdp-hero__app-block [class*="loox-card-carousel"],
.pdp-hero__app-block [class*="loox-carousel"],
.pdp-hero__app-block [id*="looxReviews"],
.pdp-hero__app-block [id*="loox-card-carousel"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100%;
}

/* NOTE: Loox Cards Carousel renders its cards + arrows inside a
   cross-origin <iframe src="loox.io/widget/...">. Our theme CSS can
   only style the outer wrapper (.loox-v2-carousel-container) — anything
   inside the iframe (card padding, arrow size/position, etc.) must be
   configured in the Loox app settings inside Shopify admin.
   The outer wrapper already has zero padding (verified in DevTools). */

.pdp-hero__trust-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #666;
  margin-top: 4px;
  /* Horizontal scroll on mobile so all badges are reachable */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.pdp-hero__trust-badges::-webkit-scrollbar { display: none; }
.pdp-hero__trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pdp-hero__trust-badge svg { color: #16a34a; flex-shrink: 0; }
.pdp-hero__trust-sep { color: rgba(0,0,0,0.15); flex-shrink: 0; }

/* Included Items */
.pdp-hero__included-list p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-foreground, #262320);
  margin: 0;
}
.pdp-hero__included-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-foreground, #262320);
  padding: 0.125rem 0;
}
.pdp-hero__included-qty {
  color: var(--color-text-secondary, #666);
  font-size: 16px;
  flex-shrink: 0;
  margin-left: 1rem;
}
/* Rich text variant for What's Included */
.pdp-hero__included-richtext {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-foreground, #262320);
}
.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: 17px; color: #666; margin-bottom: 8px; }

/* Ingredient icons — small colored SVGs before each <strong> in Key Ingredients tab */
.pdp-hero__accordion-answer--ingredients p {
  position: relative;
  padding-left: 24px;
}
.pdp-hero__accordion-answer--ingredients p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(1)::before {
  background: #E16C47;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.5C5.5 1.5 2 4 2 7.5S5.5 14.5 8 14.5s6-3 6-6.5S10.5 1.5 8 1.5zm0 2c.8 0 2.5 1.2 3.2 2.5.4.7.3 1.5-.2 2-.5.5-1.2.5-1.8.2C8.5 8.3 8 8 8 8s-.5.3-1.2.7c-.6.3-1.3.3-1.8-.2s-.6-1.3-.2-2C5.5 5.2 7.2 4 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1.5C5.5 1.5 2 4 2 7.5S5.5 14.5 8 14.5s6-3 6-6.5S10.5 1.5 8 1.5zm0 2c.8 0 2.5 1.2 3.2 2.5.4.7.3 1.5-.2 2-.5.5-1.2.5-1.8.2C8.5 8.3 8 8 8 8s-.5.3-1.2.7c-.6.3-1.3.3-1.8-.2s-.6-1.3-.2-2C5.5 5.2 7.2 4 8 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(2)::before {
  background: #4F576A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M12 2C9.5 2 8 4.5 8 7c0 1-.3 2-.8 2.8L4 14l1.5 1 2.5-3.2c.6.1 1.2.2 1.8.2 3.3 0 6-2.7 6-6s-1.5-4-3.8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M12 2C9.5 2 8 4.5 8 7c0 1-.3 2-.8 2.8L4 14l1.5 1 2.5-3.2c.6.1 1.2.2 1.8.2 3.3 0 6-2.7 6-6s-1.5-4-3.8-4z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(3)::before {
  background: #F3E891;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13 3C10 3 8 5 8 8v5h1v-5c0-2 1.5-4 4-4V3zM3 5c2.5 0 4 2 4 4v4h1V9c0-3-2-5-5-5v1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M13 3C10 3 8 5 8 8v5h1v-5c0-2 1.5-4 4-4V3zM3 5c2.5 0 4 2 4 4v4h1V9c0-3-2-5-5-5v1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(4)::before {
  background: #9EADD2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Ccircle cx='8' cy='8' r='2.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;
}
.pdp-hero__accordion-answer--ingredients p:nth-child(5)::before {
  background: #E16C47;
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1L6 5H2l3.5 3-1.2 5L8 10.5 11.7 13l-1.2-5L14 5h-4L8 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M8 1L6 5H2l3.5 3-1.2 5L8 10.5 11.7 13l-1.2-5L14 5h-4L8 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* How to Enjoy steps */
.pdp-hero__how-to-steps {
  display: flex;
  gap: 16px;
  padding: 4px 0;
}
.pdp-hero__how-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pdp-hero__how-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #E16C47;
  color: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.03em;
}
.pdp-hero__how-step-text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 400;
  color: #262320;
  letter-spacing: -0.03em;
  line-height: 1.4;
}
@media (max-width: 549px) {
  .pdp-hero__how-to-steps {
    flex-direction: column;
    gap: 10px;
  }
}

/* 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;
  font-size: 15px;
  font-weight: 500;
  color: #262320;
  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: #262320;
  color: #fff;
  border-color: #262320;
  text-decoration: none;
}
.pdp-hero__sku {
  font-size: 14px;
  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: 21px;
  font-weight: 600;
  margin: 0;
  color: var(--color-foreground, #262320);
}
.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, #262320);
  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: 17px;
  font-weight: 600;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-foreground, #262320);
}
.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;
}
.pdp-hero__specs-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.pdp-hero__specs-row:last-child { border-bottom: none; }
.pdp-hero__specs-row span:first-child {
  font-size: 15px;
  color: #888;
}
.pdp-hero__specs-row span:last-child {
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  color: var(--color-foreground, #262320);
}
.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: 13px;
  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: 14px;
  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: 13px;
}
.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;
}

/* ── Frequently Bundled Together ── */
.pdp-hero__fb {
  margin-top: 16px;
  padding: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.pdp-hero__fb-title {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: #262320;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pdp-hero__fb-cards {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}
.pdp-hero__fb-card {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #F7F5EF;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.pdp-hero__fb-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.pdp-hero__fb-card-label {
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  color: #262320;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdp-hero__fb-card-price {
  font-size: 1rem;
  font-weight: 600;
  color: #262320;
}
.pdp-hero__fb-plus {
  align-self: center;
  font-size: 1.6875rem;
  font-weight: 300;
  color: rgba(38,35,32,0.5);
  line-height: 1;
}
.pdp-hero__fb-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(225, 108, 71, 0.06);
  border: 1px solid rgba(225, 108, 71, 0.18);
  border-radius: 8px;
  margin-bottom: 12px;
}
.pdp-hero__fb-row {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  color: rgba(38,35,32,0.72);
}
/* Bundle frequency dropdown */
.pdp-hero__fb-mode {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.pdp-hero__fb-mode-label {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(38, 35, 32, 0.72);
  flex: 0 0 auto;
}
.pdp-hero__fb-mode-select-wrap {
  position: relative;
  flex: 1 1 auto;
}
.pdp-hero__fb-mode-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #E16C47;
  background: #fff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  color: #262320;
  padding: 9px 32px 9px 12px;
  border-radius: 9px;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pdp-hero__fb-mode-select:hover { background: rgba(225, 108, 71, 0.05); }
.pdp-hero__fb-mode-select:focus-visible {
  outline: 2px solid #E16C47;
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(225, 108, 71, 0.18);
}
.pdp-hero__fb-mode-caret {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #E16C47;
}
@media (max-width: 480px) {
  .pdp-hero__fb-mode { flex-direction: column; align-items: stretch; gap: 4px; }
  .pdp-hero__fb-mode-label { font-size: 0.875rem; }
}
.pdp-hero__fb-row--bundle { color: #262320; }
.pdp-hero__fb-row s { opacity: 0.6; }
.pdp-hero__fb-savings {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 1rem;
  color: #E16C47;
  font-weight: 600;
  margin-top: 2px;
}
.pdp-hero__fb-savings strong { font-size: 1.125rem; font-weight: 700; }
.pdp-hero__fb-pct { font-size: 0.9375rem; opacity: 0.85; }
.pdp-hero__fb-sub-label { font-size: 0.875rem; color: #15803d; font-weight: 500; letter-spacing: 0; }
.pdp-hero__fb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px;
  background: #E16C47;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.pdp-hero__fb-cta:hover:not(:disabled) { background: #c9563a; }
.pdp-hero__fb-cta:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
@media (max-width: 479px) {
  .pdp-hero__fb-card img { width: 72px; height: 72px; }
  .pdp-hero__fb { padding: 10px; margin-top: 8px; margin-bottom: 0; }
}

/* ── 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: 13px;
  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: #F3F1E9;
  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: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-foreground, #262320);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pdp-hero__cross-sell-desc {
  font-size: 14px;
  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: 16px;
  font-weight: 700;
  color: var(--color-foreground, #262320);
}
.pdp-hero__cross-sell-compare {
  font-size: 14px;
  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;
  background: #262320;
  color: #fff;
  border: none;
  border-radius: var(--radius-button);
  font-size: 1rem;
  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: #E16C47;
  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: 1.0625rem;
  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 ─── */
.pdp-hero__desc-wrap {
  position: relative;
}
.pdp-hero__desc-content {
  /* Always fully visible — no clamp / Read More toggle */
  max-height: none;
  overflow: visible;
}
/* Smaller description on mobile — takes less vertical space */
@media (max-width: 749px) {
  .pdp-hero__desc-wrap,
  .pdp-hero__desc-content,
  .pdp-hero__subheadline {
    font-size: 1rem; /* 16px */
    line-height: 1.5;
  }
}
/* Always-open variant — belt-and-suspenders override for any CSS that
   references .is-expanded; keeps container fully expanded. */
.pdp-hero__desc-wrap--always-open .pdp-hero__desc-content {
  max-height: none !important;
  overflow: visible !important;
}
.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, #F3F1E9)));
  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: #262320;
  border: none;
  border-radius: 9999px;
  padding: 4px 13px;
  font-family: inherit;
  font-size: 14px;
  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: #262320;
}
.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: 15px;
  font-family: inherit;
  color: #888;
}
.pdp-hero__installments .shopify-installments {
  font-size: 15px;
  color: #888;
  margin: 0;
  padding: 0;
}
.pdp-hero__installments .shopify-installments__content {
  font-size: 15px;
  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 */
/* Size modifiers — all reduced ~20% per design direction */
.pdp-hero__title--sm { font-size: 1.3875rem; }
.pdp-hero__title--md { font-size: 1.7875rem; }
.pdp-hero__title--lg { font-size: 2.1875rem; }
@media (min-width: 750px) {
  .pdp-hero__title--sm { font-size: 1.5875rem; }
  .pdp-hero__title--md { font-size: 1.9875rem; }
  .pdp-hero__title--lg { font-size: 2.5875rem; }
}

/* ── 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, #F3F1E9)));
    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: 1.1875rem;
    font-family: inherit;
    cursor: pointer;
    color: #262320;
  }
  .pdp-hero__mobile-sticky-qty span {
    width: 1.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #262320;
  }
  .pdp-hero__mobile-sticky-add {
    flex: 1;
    padding: 0.625rem 0;
    background: #262320;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    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: #c9563a; }
  .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.9375rem;
    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: #262320 !important;
  border-color: #fff;
}
.theme-dark .pdp-hero__doc-btn:hover svg { stroke: #262320 !important; }
.theme-dark .pdp-hero__specs-heading {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row span:last-child {
  color: #f5f5f5;
}
.theme-dark .pdp-hero__specs-row {
  border-bottom-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: #262320;
}
.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:85) */
.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: 600;
    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: #262320;
    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:86) */
.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: 600;
    letter-spacing: -0.02em;
    color: #262320;
    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:87) */
.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--active {
    color: #f5f5f5;
  }
  .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: 600;
    letter-spacing: -0.01em;
    color: var(--color-foreground, #262320);
    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: #262320;
  }
  .pdp-recommendations--dark .pdp-recommendations__tab--active:hover {
    color: #262320;
  }
  .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%);
  }
  .pdp-recommendations--dark .nf-card__title { color: #f5f5f5; }
  .pdp-recommendations--dark .nf-card__price { color: #f5f5f5; }
  .pdp-recommendations--dark .nf-card__review-count { color: rgba(255,255,255,0.5); }
  .pdp-recommendations--dark .nf-card__star { color: #f5f5f5; }
  .pdp-recommendations--dark .nf-card__compare { color: rgba(255,255,255,0.4); }
  .pdp-recommendations--dark .nf-card__desc { color: rgba(255,255,255,0.45); }
  .pdp-recommendations--dark .nf-card__tag { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
  .pdp-recommendations--dark .nf-card__add-btn { background: #f5f5f5; color: #262320; }
  .pdp-recommendations--dark .nf-card__add-btn:hover { background: #e0e0e0; }

  @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: 500;
    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: #262320;
  }

  .pdp-recommendations__tab--active {
    background: #262320;
    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: 400;
    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: #262320;
  }

  .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: #262320;
    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: #262320;
    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: #262320;
    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, #262320);
  }

  @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:88) */
.pdp-reviews {
    padding: 72px 0 80px;
    background: var(--color-bg, #ffffff);
  }

  .pdp-reviews__inner {
    max-width: 960px;
    margin: 0 auto;
  }

  .pdp-reviews__header {
    text-align: center;
    margin-bottom: 40px;
  }

  .pdp-reviews__trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .pdp-reviews__trust-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text, #262320);
    opacity: 0.55;
  }

  .pdp-reviews__title {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--color-text, #262320);
    margin: 0 0 8px;
  }

  .pdp-reviews__subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text, #262320);
    opacity: 0.7;
    margin: 0;
  }

  /* Loox widget container */
  .pdp-reviews__loox-widget {
    min-height: 200px;
  }

  /* Loox iframe — ensure it renders at a reasonable height.
     Loox uses postMessage to resize, but on local dev (127.0.0.1)
     the cross-origin resize can fail. This ensures visibility. */
  .pdp-reviews__loox-widget iframe {
    min-height: 600px !important;
    width: 100% !important;
    display: block !important;
  }

  /* Override Loox default star color to match brand coral */
  .pdp-reviews .loox-rating .loox-icon,
  .pdp-reviews .loox-rating span,
  .loox-rating .loox-icon {
    color: #E16C47 !important;
  }

  @media (max-width: 749px) {
    .pdp-reviews {
      padding: 56px 0 64px;
    }
  }
/* END_SECTION:pdp-reviews */

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

  .pdp-text-media--light {
    background: #ffffff;
    color: var(--color-foreground);
  }

  .pdp-text-media--dark {
    background: #262320;
    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: #262320;
  }

  .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:90) */
.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: 600;
    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: #262320 !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: #262320 !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: #262320;
    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: #262320;
    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:91) */
/* ── 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: 600;
    letter-spacing: -0.02em;
    color: var(--color-foreground, #262320);
    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: #262320;
    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, #262320);
  }

  /* ── 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:92) */
/* 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: #262320;
  }

  .pdp-works-with--dark .pdp-works-with__inner {
    background-color: #262320;
    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: 600;
    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-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-inline: 1.25rem;
  }

  .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.25rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
  }

  .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: auto;
    object-fit: contain;
    filter: grayscale(100%);
    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: var(--color-text-secondary, #666);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
    text-align: center;
  }

  .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: #262320; }
  .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: 44px; height: 44px; }
    .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:93) */
/* ── 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: #262320;
  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: #262320;
  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:94) */
.press-bar {
    display: block;
    background-color: #F3E891;
    padding-block: 0.75rem;
  }

  .press-bar__eyebrow {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(38, 35, 32, 0.6);
    text-align: center;
    margin: 0 0 0.5rem;
  }

  /* Marquee */
  .press-bar__marquee {
    position: relative;
    overflow: hidden;
    padding-block: 0.375rem;
  }

  /* 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, #F3E891), transparent);
  }

  .press-bar__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--section-bg, #F3E891), 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;
    filter: none;
    opacity: 1;
    transition: opacity 200ms ease;
  }

  .press-bar__logo-wrap:hover .press-bar__logo-img {
    opacity: 0.85;
  }

  /* Size variants */
  .press-bar__logo-img--lg {
    height: 2.5rem;
  }

  .press-bar__logo-img--md {
    height: 2.5rem;
  }

  .press-bar__logo-img--sm {
    height: 2rem;
  }

  .press-bar__logo-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground, #262320);
    white-space: nowrap;
  }

  /* Mobile: cap logo heights so wide logos (Bloomberg, Bustle) don't dominate */
  @media screen and (max-width: 749px) {
    .press-bar__logo-img--lg,
    .press-bar__logo-img--md {
      height: 1.5rem;
      max-width: 90px;
    }
    .press-bar__logo-img--sm {
      height: 1.25rem;
      max-width: 70px;
    }
  }

  @media screen and (min-width: 750px) {
    .press-bar {
      padding-block: 1.25rem;
    }

    .press-bar__fade {
      width: 8rem;
    }

    .press-bar__logo-wrap {
      padding-inline: 3rem;
    }

    .press-bar__logo-img--lg {
      height: 2.5rem;
    }

    .press-bar__logo-img--md {
      height: 2rem;
    }

    .press-bar__logo-img--sm {
      height: 1.75rem;
    }

    .press-bar__marquee {
      padding-block: 0.5rem;
    }
  }

  /* prefers-reduced-motion handled in JS */
/* END_SECTION:press-bar */

/* START_SECTION:sale-banner (INDEX:97) */
/* ── 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 */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:brand-gradient (INDEX:99) */
.nf-brand-gradient {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(225, 108, 71, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(79, 87, 106, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 50%, rgba(170, 125, 44, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 70% 65%, rgba(158, 173, 210, 0.1) 0%, transparent 40%),
    linear-gradient(155deg, #262320 0%, #353230 25%, #3d3a37 45%, #353230 65%, #262320 100%);
}
/* END_SNIPPET:brand-gradient */

/* START_SNIPPET:breadcrumbs (INDEX:100) */
.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);
    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:102) */
.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:price-display (INDEX:118) */
.price {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .price__current {
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
  }

  .price--on-sale .price__current {
    color: var(--color-sale, #e74c3c);
  }

  .price__compare {
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--color-text-secondary, #666);
    text-decoration: line-through;
  }

  .price__save-badge {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    background: var(--color-sale, #e74c3c);
    color: #fff;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    border-radius: var(--radius-sm, 4px);
  }
/* END_SNIPPET:price-display */

/* START_SNIPPET:product-card (INDEX:119) */
/* ═══════════════════════════════════════════════
   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;
}

.nf-card:hover {
  /* no opacity change — use image zoom instead */
}

/* ── 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, #F3F1E9);
  border: 1px solid var(--color-border, #eee);
  border-radius: 0.75rem;
}
.nf-card--dark .nf-card__img-wrap {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.06);
}

.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: none;
  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: #E16C47; }
.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: #262320;
  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: #262320;
}

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

/* L size uses same pill dimensions */
.nf-card--dark .nf-card__add-btn { background: #f5f5f5; color: #262320; }
.nf-card--dark .nf-card__add-btn:hover { background: #e0e0e0; }

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

.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;
  background: transparent;
  color: #262320;
  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: #262320; 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:quick-view-modal (INDEX:121) */
/* ═══════════════════════════════════════════════
   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: #262320;
  --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); }
}

/* ── 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: #E16C47;
  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:124) */
.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 */