/** Shopify CDN: Minification failed

Line 18:91 Expected identifier but found whitespace
Line 18:93 Unexpected "{"
Line 18:96 Expected ":"
Line 20:130 Expected identifier but found whitespace
Line 20:132 Unexpected "{"
Line 20:135 Expected ":"
Line 20:170 Expected identifier but found "!"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-team (INDEX:3) */
.about-team { background: var(--bg); color: var(--fg); padding-block: clamp(80px, 10vw, 140px); overflow: hidden; }
.about-team__header { max-width: 800px; margin: 0 auto clamp(60px, 8vw, 100px); text-align: {{ s.text_align | default: 'center' }}; }
.about-team__heading { font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -0.02em; margin-bottom: 24px; text-transform: lowercase; }
.about-team__subtext, .about-team__subtext * { font-size: clamp(1rem, 1.5vw, 1.25rem); opacity: 0.8; line-height: 1.6; text-align: {{ s.text_align | default: 'center' }} !important; }

.about-team__members { display: flex; flex-direction: column; gap: clamp(80px, 10vw, 150px); max-width: 1200px; margin: 0 auto; }

.team-member { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.team-member:nth-child(even) .team-member__media { order: 2; }

.team-member__media { position: relative; border-radius: 50% !important; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: 0 20px 50px rgba(0,0,0,0.08); max-width: 380px; margin: 0 auto; }
.team-member__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50% !important; transition: transform 0.8s ease; }
.team-member:hover .team-member__img { transform: scale(1.03); }

.team-member__content { display: flex; flex-direction: column; gap: 32px; padding: 20px; }
.team-member__quote { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.05; margin: 0; letter-spacing: -0.04em; font-weight: 500; text-transform: lowercase; }
.team-member__meta { display: flex; flex-direction: column; gap: 4px; }
.team-member__name { font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.team-member__role { font-size: 1rem; opacity: 0.6; }

@media (max-width: 767px) {
  .team-member { grid-template-columns: 1fr; gap: 32px; }
  .team-member:nth-child(even) .team-member__media { order: 0; }
  .team-member__content { padding: 0 16px; }
}
/* END_SECTION:about-team */

/* START_SECTION:about-values (INDEX:5) */
.about-values { background: var(--bg); color: var(--fg); padding-block: clamp(60px, 8vw, 120px); }
.about-values__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: stretch; }

.about-values__media { position: relative; border-radius: 16px; overflow: hidden; }
.about-values__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.about-values__content-wrapper { display: flex; flex-direction: column; justify-content: center; padding-block: 40px; }
.about-values__card { background: var(--card-bg); padding: clamp(30px, 5vw, 60px); border-radius: 16px; display: flex; flex-direction: column; gap: 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.04); }

.about-values__heading { font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -0.02em; margin: 0; line-height: 1.1; font-weight: 500; }
.about-values__body { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.6; opacity: 0.85; }

.about-values__accordion { display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 16px; }
.accordion-item { border-bottom: 1px solid rgba(0,0,0,0.1); }
.accordion-item__header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; list-style: none; }
.accordion-item__header::-webkit-details-marker { display: none; }
.accordion-item__title { font-weight: 700; font-size: 1.1rem; text-transform: lowercase; letter-spacing: 0.02em; color: var(--fg); }
.accordion-item__icon { opacity: 0.5; transition: transform 0.3s ease; }
.accordion-item[open] .accordion-item__icon { transform: rotate(45deg); }
.accordion-item__content { padding-bottom: 24px; font-size: 1rem; opacity: 0.8; line-height: 1.6; }

@media (max-width: 900px) {
  .about-values__grid { grid-template-columns: 1fr; gap: 24px; }
  .about-values__media { aspect-ratio: 4/3; }
  .about-values__content-wrapper { padding-block: 0; }
}
/* END_SECTION:about-values */

/* START_SECTION:article-grid (INDEX:7) */
/* ═══════════════════════════════════════
   EDITORIAL MAGAZINE BLOG SECTION
   ═══════════════════════════════════════ */

.editorial-blog {
  background: var(--bg, #FAF8F5);
  padding-top: clamp(8px, 1.2vw, 16px) !important;
  padding-bottom: clamp(6px, 1vw, 14px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #111111;
  box-sizing: border-box;
}

/* Same left/right line as Nimble Care Standard and From the Community
   (--page-edge-* in snippets/css-variables.liquid). The doubled selector
   outranks the generic .container rule regardless of stylesheet order. */
.editorial-blog .editorial-blog__container {
  max-width: var(--page-edge-max, 1360px);
  margin: 0 auto;
  padding-inline: var(--page-edge-pad, clamp(16px, 4vw, 48px));
}

.editorial-blog__header {
  margin-bottom: 6px;
  text-align: left;
}

.editorial-blog__eyebrow {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777777;
  margin-bottom: 2px;
}

.editorial-blog__heading {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 500;
  color: #111111;
  margin: 0;
  letter-spacing: -0.02em;
}

/* ── Asymmetric Layout: Left Hero | Right 2x2 Grid ── */
.editorial-blog__layout {
  display: grid;
  grid-template-columns: calc(50% - 12px) calc(50% - 12px);
  gap: 24px;
  align-items: start;
}

/* ── Left Hero Article ── */
.editorial-blog__featured {
  display: flex;
  flex-direction: column;
}

.editorial-blog__featured-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.editorial-blog__featured-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 205px;
  max-height: 205px;
  overflow: hidden;
  background: #EAE8E4;
  margin-bottom: 6px;
  border-radius: 6px;
  flex: none;
}

.editorial-blog__featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.editorial-blog__featured-link:hover .editorial-blog__featured-img {
  transform: scale(1.03);
}

.editorial-blog__placeholder-img {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #E6E1DA 0%, #D8D2C8 100%);
}

.editorial-blog__placeholder-img--hero {
  background: radial-gradient(circle at 40% 40%, #E2DDD5 0%, #C8C2B8 100%);
}

.p-img-1 { background: linear-gradient(135deg, #E8DDD0 0%, #D4C4A8 100%); }
.p-img-2 { background: linear-gradient(135deg, #D4C4A8 0%, #C0B094 100%); }
.p-img-3 { background: linear-gradient(135deg, #ECE6DC 0%, #D8CEBE 100%); }
.p-img-4 { background: linear-gradient(135deg, #DFD7CC 0%, #C4BCB0 100%); }

.editorial-blog__tag {
  font-family: var(--font-heading, Georgia, serif);
  font-style: italic;
  font-size: 0.74rem;
  color: #777777;
  display: block;
  margin-bottom: 2px;
}

.editorial-blog__featured-title {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(0.86rem, 1.1vw, 0.94rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111111;
  line-height: 1.25;
  margin: 0 0 3px;
}

.editorial-blog__excerpt {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.74rem;
  line-height: 1.4;
  color: #666666;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-blog__read-more {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #111111;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

.editorial-blog__featured-link:hover .editorial-blog__read-more,
.editorial-card__link:hover .editorial-card__read-more {
  opacity: 0.6;
}

/* ── Right 2x2 Grid ── */
.editorial-blog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}

.editorial-card {
  display: flex;
  flex-direction: column;
}

.editorial-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.editorial-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: 105px;
  max-height: 105px;
  overflow: hidden;
  background: #EAE8E4;
  margin-bottom: 4px;
  border-radius: 4px;
}

.editorial-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.editorial-card__link:hover .editorial-card__img {
  transform: scale(1.04);
}

.editorial-card__tag {
  font-family: var(--font-heading, Georgia, serif);
  font-style: italic;
  font-size: 0.7rem;
  color: #777777;
  display: block;
  margin-bottom: 1px;
}

.editorial-card__title {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111111;
  line-height: 1.25;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-card__excerpt {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.68rem;
  line-height: 1.3;
  color: #666666;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-blog__footer {
  margin-top: 16px;
}

.editorial-blog__btn {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 999px;
  border: 1px solid #111111;
  color: #111111;
  background: transparent;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.25s ease;
}

.editorial-blog__btn:hover {
  background: #111111;
  color: #FFFFFF;
}

@media (min-width: 990px) {
  .editorial-blog {
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  .editorial-blog__layout {
    grid-template-columns: calc(50% - 12px) calc(50% - 12px) !important;
    gap: 24px !important;
    align-items: start !important;
  }
  .editorial-blog__featured-media {
    aspect-ratio: auto !important;
    height: var(--feat-img-h, 220px) !important;
    max-height: var(--feat-img-h, 220px) !important;
    flex: none !important;
    margin-bottom: 6px !important;
  }
  .editorial-blog__featured-content {
    flex: none !important;
  }
  .editorial-blog__grid {
    gap: 8px 14px !important;
    grid-auto-rows: min-content !important;
    align-content: start !important;
  }
  .editorial-card__media {
    aspect-ratio: auto !important;
    height: var(--grid-img-h, 105px) !important;
    max-height: var(--grid-img-h, 105px) !important;
    margin-bottom: 3px !important;
  }
}

@media (max-width: 989px) {
  .editorial-blog {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .editorial-blog__layout {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 20px;
    padding-bottom: 4px;
  }
  .editorial-blog__layout::-webkit-scrollbar {
    display: none;
  }

  .editorial-blog__grid {
    display: contents;
  }

  .editorial-blog__featured,
  .editorial-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }

  .editorial-blog__featured-media,
  .editorial-card__media {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 280px;
  }

  .editorial-blog__featured-title,
  .editorial-card__title {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .editorial-blog__excerpt {
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}
/* END_SECTION:article-grid */

/* START_SECTION:bento-grid (INDEX:9) */
.bento { padding-block: clamp(60px, 8vw, 100px); background: var(--cream); position: relative; }
.bento__head { max-width: 100%; margin-bottom: var(--sp-7); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.bento__section-title { margin-top: 10px; }

/* Bento nav arrows */
.bento__nav { display: flex; gap: 8px; }
.bento__nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12); background: var(--white, #fff);
  display: grid; place-items: center; cursor: pointer;
  color: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.15s, opacity 0.25s;
}
.bento__nav-btn:hover:not(:disabled) { background: var(--ink, #111); color: var(--cream, #fff); border-color: transparent; transform: scale(1.06); }
.bento__nav-btn:active:not(:disabled) { transform: scale(0.95); }
.bento__nav-btn:focus-visible { outline: 2px solid var(--ink, #111); outline-offset: 2px; }
.bento__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
@media (min-width: 768px) { .bento__nav { display: none; } } /* Only show arrows on mobile */

.bento__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(220px, 24vw, 280px);
  grid-auto-flow: row dense;
  gap: var(--bento-gap);
}
.bento__cell { grid-column: span var(--col); grid-row: span var(--row); min-width: 0; }
.bento__cell[data-reveal] { transition-delay: calc(var(--i, 0) * 90ms); }

.bento__tile {
  --tile-bg: var(--sage);
  --tile-fg: var(--cream);
  position: relative;
  display: flex;
  height: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--tile-bg);
  color: var(--tile-fg);
  isolation: isolate;
  transition: transform 500ms var(--ease-out-soft), box-shadow 500ms var(--ease-out-soft);
}
a.bento__tile:hover { box-shadow: 0 34px 70px rgba(var(--ink-rgb), 0.16); }
.bento__tile--feature { border-radius: calc(var(--radius-card) + 4px); }

/* Colour schemes */
.bento__tile[data-scheme="sage"]       { --tile-bg: var(--sage);       --tile-fg: var(--cream); }
.bento__tile[data-scheme="terracotta"] { --tile-bg: var(--terracotta); --tile-fg: var(--cream); }
.bento__tile[data-scheme="pale"]       { --tile-bg: var(--sage-pale);  --tile-fg: var(--sage-deep); }
.bento__tile[data-scheme="stone"]      { --tile-bg: #E7E5E2;           --tile-fg: var(--ink); }
.bento__tile[data-scheme="ink"]        { --tile-bg: #363636;           --tile-fg: var(--cream); }
.bento__tile[data-scheme="terra-pale"] { --tile-bg: var(--terra-pale); --tile-fg: var(--ink); }
.bento__tile[data-scheme="white"]      { --tile-bg: var(--white);      --tile-fg: var(--ink); box-shadow: inset 0 0 0 1px var(--stone); }

/* Media + parallax hover */
.bento__media, .bento__video { position: absolute; inset: 0; z-index: -2; }
.bento__img, .bento__video { width: 100%; height: 100%; object-fit: cover; }
.bento__img { transition: transform 600ms var(--ease); }
a.bento__tile:hover .bento__img { transform: scale(1.06); }
.bento__video { z-index: -2; }
.bento__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--ink-rgb),0) 35%, rgba(var(--ink-rgb),0.55) 100%); }

/* Body */
.bento__body { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: clamp(18px, 2vw, 28px); }
.bento__badge { align-self: flex-start; margin-bottom: 16px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--tile-fg) 16%, transparent); }
.bento__stars { display: inline-flex; gap: 2px; color: var(--terracotta); margin-bottom: 10px; }
.bento__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.bento__heading { font-family: var(--font-body); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.12; letter-spacing: -0.01em; }
.bento__tile--feature .bento__heading, .bento__tile--category .bento__heading { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.8rem); }
.bento__sub { font-size: 0.9rem; line-height: 1.4; margin-top: 8px; max-width: 30ch; opacity: 0.88; }
.bento__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 600; font-size: 0.85rem; }
a.bento__tile:hover .bento__cta { gap: 10px; }

/* Tablet */
@media (max-width: 1023px) and (min-width: 768px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(220px, 30vw, 260px); }
  .bento__cell { grid-column: span min(var(--col), 2); }
}

/* Mobile horizontal snap-scroll carousel, feature first (blueprint §5.5) */
@media (max-width: 767px) {
  .bento__grid {
    display: flex;
    grid-auto-flow: unset;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding-bottom: 8px;
    margin-inline: calc(-1 * var(--gutter-page));
    padding-inline: var(--gutter-page);
    scrollbar-width: none;
  }
  .bento__grid::-webkit-scrollbar { display: none; }
  .bento__cell { flex: 0 0 78%; scroll-snap-align: start; height: clamp(340px, 90vw, 440px); }
  .bento__cell:first-child { flex-basis: 84%; }
}
/* END_SECTION:bento-grid */

/* START_SECTION:bestsellers (INDEX:10) */
.bestsellers { background: var(--bs-bg); color: var(--bs-fg); }
.bestsellers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: var(--sp-6); }
.bestsellers__title { margin-top: 8px; }
.bestsellers__arrows { display: flex; gap: 10px; }
.bestsellers__arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--stone); border-radius: 999px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.bestsellers__arrow:hover { background: var(--sage); color: var(--cream); border-color: var(--sage); }
.bestsellers__arrow:disabled { opacity: 0.3; cursor: default; }
.bestsellers__arrow:disabled:hover { background: none; color: inherit; border-color: var(--stone); }

.bestsellers__track { display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter-page); padding-bottom: 6px; cursor: grab; -webkit-overflow-scrolling: touch; }
.bestsellers__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.bestsellers__cell { flex: 0 0 clamp(240px, 30%, 340px); scroll-snap-align: start; }

@media (max-width: 767px) {
  .bestsellers__cell { flex-basis: 78%; }
}
/* END_SECTION:bestsellers */

/* START_SECTION:cart-drawer (INDEX:11) */
/* The drawer must sit above the fixed site header (z-index 9999) and sticky ATC bar (999999) */
#shopify-section-cart-drawer { position: static !important; z-index: auto !important; }
.cart-drawer { position: fixed; inset: 0; top: 0; z-index: 9999999 !important; visibility: hidden; pointer-events: none; }
.cart-drawer.is-open { visibility: visible; pointer-events: auto; }
.cart-drawer__overlay { position: absolute; inset: 0; background: rgba(var(--ink-rgb), 0.42); opacity: 0; transition: opacity var(--dur) var(--ease); backdrop-filter: blur(2px); }
.cart-drawer.is-open .cart-drawer__overlay { opacity: 1; }
.cart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(452px, 92vw);
  background: #FFFFFF !important; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out-soft);
  box-shadow: -30px 0 80px rgba(var(--ink-rgb), 0.16);
  max-height: 100vh; max-height: 100dvh;
  z-index: 10;
}
.cart-drawer.is-open .cart-drawer__panel { transform: none; opacity: 1 !important; }
.cart-drawer.is-busy .cart-drawer__panel { pointer-events: none; }
.cart-drawer.is-busy [data-cart-contents],
.cart-drawer.is-busy .cart-drawer__foot { opacity: 0.55; transition: opacity 0.2s ease; }
  .cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--hairline); background: var(--surface); color: var(--ink); }
.cart-drawer__title { font-size: 1.35rem; color: var(--ink); font-weight: 600; }
.cart-drawer__count { color: var(--ink-soft); font-family: var(--font-body); font-size: 1rem; font-weight: 400; }
.cart-drawer__close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease); color: var(--ink); }
.cart-drawer__close:hover { background: rgba(0,0,0,0.06); }
[data-cart-contents] { flex: 1; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

/* Free-shipping progress ------------------------------------------------- */
.cart-ship { padding: 16px 24px; border-bottom: 1px solid var(--hairline); background: var(--surface); }
.cart-ship__msg { font-size: 0.86rem; margin: 0 0 10px; display: flex; align-items: center; gap: 6px; max-width: none; }
.cart-ship__msg strong { font-weight: 700; }
.cart-ship__msg--won { color: var(--ink); }
.cart-ship__track { height: 6px; border-radius: 99px; background: rgba(var(--ink-rgb), 0.10); overflow: hidden; position: relative; }
.cart-ship__fill { display: block; height: 100%; border-radius: 99px; background: var(--ink); transition: width var(--dur-slow) var(--ease-out-soft); position: relative; z-index: 1; }
.cart-ship__milestone { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cream); z-index: 2; transform: translateX(-50%); }
.cart-ship.is-unlocked .cart-ship__fill { background: var(--ink); }

.cart-drawer__items { padding: 8px 24px; list-style: none; margin: 0; }
.cart-drawer__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.cart-drawer__thumb img { border-radius: 10px; background: var(--white); }
.cart-drawer__name { font-family: var(--font-heading); font-size: 1.05rem; line-height: 1.2; }
.cart-drawer__variant { color: var(--ink-soft); font-size: 0.85rem; margin-top: 2px; }
.cart-drawer__plan { color: var(--sage-deep); font-size: 0.78rem; font-weight: 600; margin-top: 2px; }
.cart-drawer__plan-upgrade { font-size: 0.75rem; font-weight: 500; color: var(--white); background: var(--accent); padding: 4px 10px; border-radius: 999px; border: none; margin-top: 6px; cursor: pointer; text-align: left; display: inline-flex; align-items: center; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); text-decoration: none; }
.cart-drawer__plan-upgrade:hover { background: var(--accent-strong); transform: translateY(-1px); }
.cart-drawer__qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); padding: 2px; }
.cart-drawer__qty button { width: 30px; height: 30px; border-radius: var(--radius-pill); font-size: 1.1rem; line-height: 1; transition: background var(--dur-fast) var(--ease); }
.cart-drawer__qty button:hover { background: rgba(var(--ink-rgb), 0.06); }
.cart-drawer__qty input { width: 32px; text-align: center; border: 0; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; padding: 0; }
.cart-drawer__lineside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cart-drawer__price { font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-drawer__was { font-size: 0.78rem; opacity: 0.5; text-decoration: line-through; }
.cart-drawer__remove { font-size: 0.78rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; margin-top: auto; transition: color var(--dur-fast) var(--ease); }
.cart-drawer__remove:hover { color: var(--accent); }

/* Upsells ---------------------------------------------------------------- */
.cart-drawer__upsells-li { display: block; list-style: none; margin: 0 -24px; padding: 16px 24px; border-top: 1px solid var(--hairline); }
.cart-drawer__upsells { padding: 16px 24px; border-top: 1px solid var(--hairline); }
.cart-drawer__upsell-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; color: var(--ink-soft); }
.cart-drawer__upsell-items { display: flex; flex-direction: column; gap: 10px; }
.cart-upsell-card { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--white); align-items: center; }
.cart-upsell-card__img { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--cream); }
.cart-upsell-card__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-upsell-card__info { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
.cart-upsell-card__name { font-weight: 600; font-size: 0.86rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-upsell-card__price { font-size: 0.82rem; font-weight: 600; }
.cart-upsell-card__price del { opacity: 0.5; margin-left: 5px; font-weight: 400; }
.cart-upsell-card__btn { flex-shrink: 0; min-height: 36px; padding: 8px 16px; font-size: 0.78rem; }

.cart-drawer__foot {
  flex-shrink: 0;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream);
  position: relative;
  z-index: 10;
}
.cart-drawer__subtotal { display: flex; justify-content: space-between; font-size: 1.1rem; }
.cart-drawer__subtotal strong { font-variant-numeric: tabular-nums; }
.cart-drawer__tax { color: var(--ink-soft); font-size: 0.82rem; }
.cart-drawer__checkout { font-variant-numeric: tabular-nums; }
.cart-drawer__viewcart { align-self: center; font-size: 0.9rem; }
.cart-drawer__empty { flex: 1; display: flex; flex-direction: column; gap: 18px; align-items: center; justify-content: center; text-align: center; padding: 40px; }
.cart-drawer__empty-icon { color: var(--ink-soft); opacity: 0.5; }
/* END_SECTION:cart-drawer */

/* START_SECTION:category-tiles (INDEX:12) */
.explore-range {
  background: var(--bg, #FFFFFF);
  padding-top: 4px !important;
  padding-bottom: clamp(16px, 2.5vw, 28px) !important;
  margin-top: 0 !important;
  width: 100%;
}

.explore-range__container {
  max-width: 1360px;
  margin: 0 auto;
  padding-inline: 24px;
}

.explore-range__header {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.explore-range__heading {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 500;
  color: #111111;
  margin: 0;
  letter-spacing: -0.02em;
  text-transform: none;
}

.explore-range__rail {
  position: relative;
}

/* Scroll arrows: sit over the row's edges and hint there's more to see. */
.explore-range__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.95);
  color: #111111;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, color 0.2s ease;
}
.explore-range__arrow:hover {
  background: #111111;
  color: #FFFFFF;
}
.explore-range__arrow[hidden] { display: none; }
.explore-range__arrow--prev { left: -8px; }
.explore-range__arrow--next { right: -8px; animation: explore-range-nudge 1.8s ease-in-out infinite; }
.explore-range__arrow--next:hover { animation: none; }

@keyframes explore-range-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50% { transform: translateY(-50%) translateX(4px); }
}

@media (max-width: 767px) {
  .explore-range__arrow { width: 36px; height: 36px; }
  .explore-range__arrow--prev { left: 4px; }
  .explore-range__arrow--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .explore-range__arrow--next { animation: none; }
}

.explore-range__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden; /* sideways only: the row must not drag up and down or catch page swipes */
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding: 2px 2px 4px;
  width: 100%;
  align-items: stretch;
}

.explore-range__track::-webkit-scrollbar {
  display: none;
}

.explore-range__card {
  flex: 0 0 calc(33.333% - 14px);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}

@media (max-width: 989px) {
  .explore-range__card { flex: 0 0 calc(50% - 10px); min-width: 200px; }
}

@media (max-width: 576px) {
  .explore-range__card { flex: 0 0 82%; min-width: 220px; }
}

/* Closing tile: a single Shop all button once the products run out. */
.explore-range__end {
  flex: 0 0 auto;
  min-width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  scroll-snap-align: end;
}

.explore-range__shop-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border: 1.5px solid #111111;
  background: #111111;
  color: #FFFFFF;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}

.explore-range__shop-all:hover {
  background: transparent;
  color: #111111;
}
/* END_SECTION:category-tiles */

/* START_SECTION:featured-in (INDEX:14) */
.featured-press {
  background: var(--press-bg, #1B1B1F);
  background-image: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.04) 0%, rgba(0, 0, 0, 0) 70%);
  color: var(--press-text, rgba(255, 255, 255, 0.85));
  padding-block: 8px !important;
  margin-block: 0 !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(12px);
  animation: pressFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pressFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.featured-press__container {
  display: flex;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-inline: 32px;
}

@media (max-width: 989px) {
  .featured-press__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-inline: 16px;
  }
}

.featured-press__header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.featured-press__title {
  font-family: var(--font-heading, Georgia, serif);
  font-style: italic;
  font-size: clamp(0.85rem, 1.1vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  white-space: nowrap;
}

.featured-press__divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 989px) {
  .featured-press__divider { display: none; }
  .featured-press__title {
    font-size: 0.85rem;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    opacity: 0.65;
  }
}

.featured-press__content {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Marquee infinite scroll mode */
.featured-press__marquee-container {
  overflow: hidden;
  width: 100%;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.featured-press__marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: pressInfiniteScroll var(--marquee-speed, 35s) linear infinite;
}

.featured-press__content.is-pausable:hover .featured-press__marquee-track {
  animation-play-state: paused;
}

.featured-press__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: 12px;
  flex-shrink: 0;
}

/* Static Row / Mobile Scroll Mode */
.featured-press__static-row {
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.featured-press__static-row::-webkit-scrollbar { display: none; }

.featured-press__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.featured-press__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

/* Refined Glass & Minimal Cards */
.featured-press--card-glass .featured-press__card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}

.featured-press--card-minimal .featured-press__card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}

.featured-press__link .featured-press__card {
  cursor: pointer;
}

/* Hover Micro-interactions */
.featured-press__card:hover {
  transform: translateY(-2px) scale(1.04);
  color: #FFFFFF;
  opacity: 1;
}

.featured-press--card-glass .featured-press__card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 15px rgba(255, 255, 255, 0.06);
}

.featured-press__svg {
  height: 18px;
  width: auto;
  max-width: 130px;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.featured-press__logo-img {
  height: 18px;
  width: auto;
  max-width: 115px;
  object-fit: contain;
  filter: brightness(0) invert(0.85);
  transition: filter 0.3s ease;
}

.featured-press__card:hover .featured-press__logo-img {
  filter: brightness(0) invert(1);
}

.featured-press__text-logo {
  font-family: var(--font-heading, Georgia, serif);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: currentColor;
  white-space: nowrap;
}

.featured-press__quote {
  font-family: var(--font-heading, Georgia, serif);
  font-style: italic;
  font-size: 0.8rem;
  opacity: 0.7;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 10px;
}

@keyframes pressInfiniteScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-12.5%, 0, 0); }
}
/* END_SECTION:featured-in */

/* START_SECTION:footer (INDEX:15) */
.site-footer__wrapper {
  width: 100%;
  background: var(--footer-bg, #FFFFFF);
  color: var(--footer-fg, #222222);
  font-family: var(--font-body);
  border-top: 1px solid var(--footer-line, #E5E5E5);
}
.site-footer {
  width: 100%;
}

/* 1. NEWSLETTER BAR */
.site-footer__newsletter-bar {
  border-bottom: 1px solid var(--footer-line);
  padding: clamp(24px, 4vw, 40px) 0;
  background: color-mix(in srgb, var(--footer-fg) 2%, transparent);
}
.site-footer__newsletter-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.newsletter-bar__title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 6px 0;
  color: var(--footer-fg);
}
.newsletter-bar__sub {
  font-size: 0.95rem;
  color: var(--footer-fg-soft);
  margin: 0;
}
.newsletter-bar__form-wrap {
  flex: 1;
  min-width: 300px;
  max-width: 480px;
}
.newsletter-bar__input-group {
  display: flex;
  border: 1px solid var(--footer-line);
  border-radius: 0 !important;
  background: #fff;
  overflow: hidden;
  margin-bottom: 8px;
}
.newsletter-bar__input {
  flex: 1;
  border: none;
  padding: 12px 18px;
  font-size: 0.9rem;
  outline: none;
  color: var(--footer-fg);
}
.newsletter-bar__submit {
  background: var(--footer-fg);
  color: var(--footer-bg);
  border: none;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.newsletter-bar__submit:hover {
  opacity: 0.85;
}
.newsletter-bar__privacy {
  font-size: 0.78rem;
  color: var(--footer-fg-soft);
  margin: 0;
}
.newsletter-bar__privacy a {
  text-decoration: underline;
}
.newsletter-bar__success {
  color: #2e7d32;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 2. MAIN GRID */
.site-footer__main {
  display: grid;
  grid-template-columns: 35% 65%;
  padding-top: clamp(40px, 6vw, 70px);
  padding-bottom: clamp(40px, 6vw, 70px);
}
.site-footer__brand-col {
  padding-right: clamp(24px, 4vw, 50px);
  border-right: 1px solid var(--footer-line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 36px;
}
.site-footer__logo-wrap {
  margin-bottom: 12px;
}
.site-footer__brand-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--footer-fg);
  background: transparent;
  letter-spacing: 0.12em;
  text-align: center;
}
.brand-box__title {
  font-family: var(--font-heading, serif);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--footer-fg);
  line-height: 1.1;
}
.brand-box__sub {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: var(--footer-fg-soft);
  margin-top: 4px;
}

/* Bio Row */
.site-footer__bio-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.site-footer__bio-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--footer-fg-soft);
  margin: 0;
  flex: 1;
}

/* B-Corp Badge */
.site-footer__bcorp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  flex-shrink: 0;
  text-align: center;
}
.bcorp-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--footer-fg);
  margin-bottom: 2px;
}
.bcorp-circle {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  border: 2px solid var(--footer-fg);
  display: grid;
  place-items: center;
  position: relative;
}
.bcorp-circle::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2px;
  background: var(--footer-fg);
}
.bcorp-letter {
  font-family: var(--font-heading, serif);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--footer-fg);
  line-height: 1;
}
.bcorp-sub {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--footer-fg);
  margin-top: 6px;
}

/* App & Social Row */
.site-footer__app-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 12px;
}
.site-footer__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #000;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px !important;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-footer__app-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
.app-btn-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.app-btn-sub {
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}
.app-btn-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.site-footer__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-icon {
  color: var(--footer-fg);
  opacity: 0.8;
  display: grid;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}
.footer-icon:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* 3. RIGHT LINKS COLUMNS */
.site-footer__links-col {
  padding-left: clamp(24px, 4vw, 50px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 20px;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
}
.footer-nav__heading {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: none;
  color: var(--footer-fg);
  margin: 0 0 16px 0;
  letter-spacing: 0.02em;
}
.footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav__list li {
  margin-bottom: 12px;
}
.footer-nav__list a {
  color: var(--footer-fg-soft);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.footer-nav__list a:hover {
  color: var(--footer-fg);
  transform: translateX(3px);
}
.footer-nav__text {
  font-size: 0.9rem;
  color: var(--footer-fg-soft);
  line-height: 1.6;
}
.footer-nav__subtext {
  font-size: 0.84rem;
  color: var(--footer-fg-soft);
  line-height: 1.5;
  margin: 0 0 12px 0;
}
.footer-grid-newsletter__group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 4px 4px 4px 14px;
}
.footer-grid-newsletter__input {
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 0.82rem;
  width: 100%;
  outline: none;
}
.footer-grid-newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.footer-grid-newsletter__btn {
  background: #FFFFFF;
  color: #111111;
  border: none;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}
.footer-grid-newsletter__btn:hover {
  opacity: 0.85;
}

/* 4. BOTTOM BAR */
.site-footer__bottom-wrap {
  border-top: 1px solid var(--footer-line);
  background: var(--footer-bg);
}
.site-footer__bottom {
  padding: 36px 0 60px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.footer-bottom__left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-legal__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--footer-fg-soft);
}
.footer-legal__links a {
  color: var(--footer-fg-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal__links a:hover {
  color: var(--footer-fg);
  text-decoration: underline;
}
.legal-sep {
  opacity: 0.4;
}
.footer-copyright {
  font-size: 0.82rem;
  color: var(--footer-fg-soft);
  margin: 0;
}

.footer-bottom__right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-pay__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pay-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 36px;
  padding: 0 5px;
  background: #fff;
  border: 1px solid var(--footer-line);
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.footer-back-to-top {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--footer-line);
  background: transparent;
  color: var(--footer-fg);
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-back-to-top:hover {
  background: var(--footer-fg);
  color: var(--footer-bg);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .site-footer__main {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .site-footer__brand-col {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--footer-line);
    padding-bottom: 40px;
  }
  .site-footer__links-col {
    padding-left: 0;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    padding: 36px 0 80px;
  }
  .footer-bottom__right {
    width: 100%;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--footer-line);
  }
}
@media (max-width: 600px) {
  .site-footer__links-col {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }
  .site-footer__bio-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .site-footer__app-social {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* END_SECTION:footer */

/* START_SECTION:full-banner (INDEX:18) */
.full-banner { position: relative; min-height: var(--fb-height); display: flex; align-items: flex-end; color: var(--fb-fg); overflow: hidden; padding-bottom: 8vh; margin-block: var(--section-pad-lg); }
.full-banner__media { position: absolute; inset: 0; z-index: 0; }
.full-banner__img { width: 100%; height: 100%; object-fit: cover; transition: transform 2s var(--ease); }
.full-banner:hover .full-banner__img { transform: none; }
.full-banner__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.4) 100%); }

.full-banner__content { position: relative; z-index: 1; width: 100%; display: flex; height: 100%; }
.full-banner__inner { max-width: 46rem; display: flex; flex-direction: column; gap: 20px; }

/* Positioning */
.full-banner--pos-middle-center .full-banner__content { align-items: center; justify-content: center; }
.full-banner--pos-bottom-left .full-banner__content { align-items: flex-end; justify-content: flex-start; padding-bottom: 4vh; }
.full-banner--pos-bottom-center .full-banner__content { align-items: flex-end; justify-content: center; padding-bottom: 4vh; }

/* Alignment */
.full-banner--align-center .full-banner__inner { align-items: center; text-align: center; margin: 0 auto; }
.full-banner--align-left .full-banner__inner { align-items: flex-start; text-align: left; margin: 0; }

.full-banner__title { font-size: clamp(32px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; font-weight: 500; }
.full-banner__body { font-size: clamp(1rem, 1.4vw, 1.2rem); opacity: 0.9; }
.full-banner__btn { margin-top: 10px; }

/* White button specific style if needed */
.btn--white { background: #FFFFFF; color: #000000; border-color: #FFFFFF; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 16px 32px; border-radius: 4px; }
.btn--white:hover { background: #FFFFFF; }

@media (max-width: 767px) {
  .full-banner { min-height: auto; aspect-ratio: var(--aspect-m); padding-bottom: 40px; margin-block: var(--section-pad); }
  .full-banner--pos-bottom-left .full-banner__content { padding-bottom: 0; }
}
/* END_SECTION:full-banner */

/* START_SECTION:header (INDEX:19) */
#shopify-section-announcement-bar,
.announcement-section,
.announcement-bar {
  position: relative !important;
  z-index: 10000 !important;
  width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.shopify-section-group-header-group {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
}

#shopify-section-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 100% !important;
}

/* Sticky Header Enforcement */
.site-header { 
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #FFFFFF !important; 
  border-bottom: 1px solid rgba(0,0,0,0.08) !important; 
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease) !important; 
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.site-header--overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

.site-header--overlay.is-scrolled,
.site-header--overlay.is-solid {
  position: sticky !important;
  top: 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Ensure Logo & Wordmark are ALWAYS 100% visible immediately from start */
.site-header__logo-dark,
.site-header__wordmark {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #111111 !important;
}

/* ==================== DESKTOP STYLES (Clean 1-Row Compact Layout) ==================== */
@media (min-width: 769px) {
  .desktop-only { display: block !important; visibility: visible !important; }
  .mobile-only,
  .mobile-header { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }

  .site-header__container {
    padding-inline: clamp(20px, 3.5vw, 40px);
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    display: block !important;
  }

  .site-header__row {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    min-height: 56px !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .site-header__col-left { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
  .site-header__col-center { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
  .site-header__col-right { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 14px !important; }

  .site-header__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #111111;
    transition: opacity 0.2s ease;
  }
  .site-header__search-btn:hover { opacity: 0.7; }
  .site-header__search-icon { flex-shrink: 0; }

  .site-header__action {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 0px;
    position: relative;
    color: #111111;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
  }
  .site-header__action:hover { opacity: 0.7; }

  .site-header__nav--center { justify-content: center; width: 100%; display: flex; }
  .site-header__menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 32px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }
  .site-header__item { position: relative; display: inline-flex; align-items: center; }
  .site-header__link {
    font-family: var(--font-body, Arial, sans-serif);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    padding: 6px 0;
    position: relative;
    font-weight: 500;
    text-transform: uppercase;
    color: #111111;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .site-header__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1.5px; background: #111111; transition: width var(--dur-fast) var(--ease); }
  .site-header__item:hover .site-header__link::after, .site-header__link[aria-current]::after { width: 100%; }
}

/* ==================== MOBILE STYLES (Clean Single Row) ==================== */
@media (max-width: 768px) {
  .desktop-only,
  .site-header__container { 
    display: none !important; 
    visibility: hidden !important; 
    height: 0 !important; 
    min-height: 0 !important; 
    overflow: hidden !important; 
    margin: 0 !important; 
    padding: 0 !important; 
  }
  .mobile-only,
  .mobile-header { 
    display: block !important; 
    visibility: visible !important; 
    height: auto !important; 
    width: 100% !important;
  }

  .site-header { 
    background: #FFFFFF !important; 
    color: #111111 !important; 
    border-bottom: 1px solid rgba(0,0,0,0.08) !important; 
    width: 100% !important;
  }
  .mobile-header {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .mobile-header__top {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    height: 52px !important;
    padding: 0 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .mobile-header__left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  .mobile-header__center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .mobile-header__center .site-header__logo {
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .mobile-header__right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
  }
  .mobile-header__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    position: relative;
    color: #111111;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
  .mobile-header__burger {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #111111;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }
}

.site-header__logo { display: inline-flex; align-items: center; justify-content: flex-start; z-index: 10; text-decoration: none; color: inherit; }
.site-header__logo img { height: var(--logo-h); width: auto; max-width: 100%; object-fit: contain; }
.site-header__wordmark { font-family: var(--font-heading, Arial, sans-serif); font-weight: 600; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: 0.08em; text-transform: uppercase; }

.site-header__count { position: absolute; top: 1px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; display: grid; place-items: center; background: #111111; color: #FFFFFF; font-size: 9px; font-weight: 700; border-radius: 0px !important; font-variant-numeric: tabular-nums; }
.site-header__count.is-empty { display: none; }

/* Mega Menu */
.site-header__item--mega { position: static; }
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #F4F4F4;
  border-top: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 40px 60px rgba(0,0,0,0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  filter: blur(10px);
  transition: all 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  padding: 18px 0 20px;
  z-index: 500;
  color: #111111;
  white-space: normal;
  pointer-events: none;
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mega-menu [data-reveal] { opacity: 1 !important; transform: none !important; }
.site-header__item--mega:hover .mega-menu,
.site-header__item--mega:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto !important;
}
.mega-menu a, .mega-menu button { pointer-events: auto !important; cursor: pointer !important; }
.mega-menu__tab, .mega-menu__cta .btn { position: relative; z-index: 2; }
.mega-menu__inner { display: flex; flex-direction: column; gap: 14px; }
.mega-menu__tabs { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 24px; border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 10px; flex-wrap: wrap; }
.mega-menu__tab { font-family: inherit; font-size: 0.9rem; letter-spacing: 0.01em; font-weight: 700; color: #111111; background: none; border: none; padding: 6px 16px; cursor: pointer; text-align: center; transition: opacity 0.3s; position: relative; }
.mega-menu__tab:hover, .mega-menu__tab.is-active { color: #111111; opacity: 1; }
.mega-menu__tab.is-active::after { content: ''; position: absolute; bottom: -13px; left: 0; width: 100%; height: 2px; background: #111111; }
.mega-menu__content { flex: 1; position: relative; }
.mega-menu__panel { display: none; opacity: 0; transform: translateY(10px); transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.mega-menu__panel.is-active { display: block; opacity: 1; transform: translateY(0); }
.mega-menu__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.mega-menu__grid .pcard { flex: 0 1 calc(25% - 12px); max-width: calc(25% - 12px); background: #FFFFFF; border-radius: 0px; padding: 0 !important; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 10px rgba(0,0,0,0.04); height: auto; display: flex; flex-direction: column; overflow: hidden; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mega-menu__grid .pcard:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); border-color: rgba(0,0,0,0.15); }
@media (min-width: 1440px) { .mega-menu__grid { gap: 20px; max-width: 1100px; } .mega-menu__grid .pcard { flex-basis: calc(25% - 15px); max-width: calc(25% - 15px); } }
/* Product photos are square: a square box shows them whole (contain covers the short-viewport cap). */
.mega-menu__grid .pcard__media { width: 100% !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 1 / 1 !important; height: auto; max-height: 46vh !important; min-height: 0 !important; flex: 0 0 auto; position: relative; overflow: hidden; border-radius: 0 !important; }
.mega-menu__grid .pcard .pcard__media .pcard__img,
.mega-menu__grid .pcard .pcard__media .pcard__slide > img { object-fit: contain !important; }
/* The header's centre column centres its text; card copy starts at the left edge, under the stars. */
.mega-menu__grid .pcard__body { padding: 10px 12px 12px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; background: #FFFFFF; position: relative; z-index: 2; text-align: left !important; }
.mega-menu__grid .pcard__info { margin-bottom: 0; }
.mega-menu__grid .pcard__title { font-size: 0.8rem; font-weight: 700; line-height: 1.25; margin: 0; text-transform: uppercase; color: #111111; }
.mega-menu__grid .pcard__title a::before { content: none !important; }
.mega-menu__grid .pcard__price { font-size: 0.82rem; font-weight: 700; color: #111111; }
.mega-menu__grid .pcard__arrow { width: 26px !important; height: 26px !important; }
.mega-menu__grid .pcard__actions { padding: 10px !important; gap: 6px !important; }
.mega-menu__grid .pcard__btn { min-height: 32px !important; height: 32px !important; padding: 0 6px !important; font-size: 0.66rem !important; font-weight: 700 !important; text-transform: uppercase !important; border-radius: 0px !important; white-space: nowrap !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: background 0.2s ease, color 0.2s ease !important; }
.mega-menu__grid .pcard:hover .pcard__btn,
.mega-menu__grid .pcard__btn:hover { border-radius: 0px !important; }
.mega-menu__cta { margin-top: 14px; text-align: center; }
.mega-menu__cta .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  color: #111111 !important;
  border: 1px solid #111111 !important;
  font-family: var(--font-body, Arial, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0px !important;
  min-width: 180px !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
.mega-menu__cta .btn:hover {
  background: #111111 !important;
  color: #FFFFFF !important;
  border-color: #111111 !important;
}
/* Mobile Drawer */
.nav-drawer { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; z-index: 999999 !important; visibility: hidden; pointer-events: none; display: flex; transition: visibility 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-drawer.is-open { visibility: visible !important; pointer-events: auto !important; }
.nav-drawer__overlay { position: absolute !important; inset: 0 !important; background: rgba(0, 0, 0, 0.4) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.nav-drawer.is-open .nav-drawer__overlay { opacity: 1 !important; }

.nav-drawer__container { position: relative !important; width: 100% !important; max-width: 440px !important; height: 100% !important; height: 100dvh !important; background: #FAF8F5 !important; color: #111111 !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; transform: translateX(-100%) !important; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important; box-shadow: 20px 0 50px rgba(0, 0, 0, 0.1) !important; overflow-y: auto !important; }
.nav-drawer.is-open .nav-drawer__container { transform: translateX(0) !important; }
.nav-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; flex-shrink: 0; }
.nav-drawer__close { display: grid; place-items: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; color: #111111; padding: 0; }
.nav-drawer__body { padding: 0 20px 32px; display: flex; flex-direction: column; }

/* Category tabs — plain text (not pills), switches the product panel below */
.mobile-menu__tabs-bar {
  display: block;
  width: calc(100% + 40px);
  margin-inline: -20px;
  padding-inline: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 20px;
  padding-bottom: 12px;
}
.mobile-menu__tabs-bar::-webkit-scrollbar { display: none; }
.mobile-menu__tabs-scroll {
  display: flex;
  gap: 20px;
  white-space: nowrap;
}

.mobile-menu__tab-btn {
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  color: #111111;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  position: relative;
  transition: opacity 0.2s ease;
}
.mobile-menu__tab-btn.is-active {
  color: #111111;
  font-weight: 800;
}
.mobile-menu__tab-btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #111111;
}

.mobile-menu__content { margin-bottom: 28px; }
.mobile-menu__panel { display: none; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.mobile-menu__panel.is-active { display: block; opacity: 1; transform: translateY(0); }

.mobile-menu__product-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  width: calc(100% + 40px);
  margin-inline: -20px;
  padding-inline: 20px;
  margin-bottom: 20px;
}
.mobile-menu__product-list::-webkit-scrollbar { display: none; }
.mobile-menu__product-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: center !important;
  background: #FFFFFF !important;
  border-radius: 0px !important;
  padding: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  flex: 0 0 148px !important;
  width: 148px !important;
  scroll-snap-align: start !important;
  overflow: hidden !important;
}
.mobile-menu__product-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: 148px !important;
  max-height: 148px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #F4F4F4 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
.mobile-menu__product-img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.mobile-menu__product-info {
  padding: 10px 8px 12px !important;
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  background: #FFFFFF !important;
  box-sizing: border-box !important;
}
.mobile-menu__product-title {
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: #111111 !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-align: center !important;
  margin: 0 !important;
}
.mobile-menu__product-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
.mobile-menu__cta-wrap {
  text-align: center;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  padding: 6px 0 !important;
}
.mobile-menu__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 320px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  font-family: var(--font-body, Arial, sans-serif) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  border: 1px solid #111111 !important;
  color: #111111 !important;
  background: transparent !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  border-radius: 0px !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}
.mobile-menu__cta:hover { background: #111111 !important; color: #FFFFFF !important; }

/* Main navigation accordion */
.mobile-menu__accordion { border-top: 1px solid rgba(0,0,0,0.08); }
.mobile-menu__accordion-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.mobile-menu__accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading, Arial, sans-serif);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #111111;
  text-align: left;
}
.mobile-menu__accordion-icon {
  flex-shrink: 0;
  width: 18px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  color: #111111;
  text-align: center;
}
.mobile-menu__accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu__accordion-panel-inner { padding: 2px 0 18px; }
.mobile-menu__sublist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mobile-menu__sublist-link {
  display: block;
  font-family: var(--font-body, Arial, sans-serif);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #111111;
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-menu__sublist-link:hover { color: #111111; }

/* Nested accordion — Shop All > Laundry / Cleaning / Sets */
.mobile-menu__accordion--nested { border-top: 1px solid rgba(0,0,0,0.06); }
.mobile-menu__accordion-item--nested { border-bottom: 1px solid rgba(0,0,0,0.06); }
.mobile-menu__accordion-item--nested:last-child { border-bottom: none; }
.mobile-menu__accordion-trigger--nested { padding: 13px 0; font-size: 0.86rem; font-weight: 700; }
.mobile-menu__accordion-item--nested .mobile-menu__accordion-panel-inner { padding-left: 2px; }

/* Promotional banner */
.mobile-menu__banner {
  position: relative;
  display: block;
  margin: 24px 0;
  overflow: hidden;
  text-decoration: none;
}
.mobile-menu__banner-img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.mobile-menu__banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  color: #FFFFFF;
  background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0) 60%);
}
.mobile-menu__banner-heading { font-family: var(--font-heading, Georgia, serif); font-style: italic; font-size: 1.35rem; }
.mobile-menu__banner-cta { font-family: var(--font-body, Arial, sans-serif); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }

/* Secondary pages links */
.mobile-menu__pages { border-top: 1px solid rgba(0,0,0,0.08); }
.mobile-menu__pages-list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__pages-list li { border-bottom: 1px solid rgba(0,0,0,0.08); }
.mobile-menu__pages-list li:last-child { border-bottom: none; }
.mobile-menu__pages-list a { display: block; padding: 14px 0; font-family: var(--font-heading, Arial, sans-serif); font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #111111; text-decoration: none; }

/* Search Overlay */
.search-overlay { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.search-overlay.is-active { opacity: 1; visibility: visible; transform: translateY(0); }
.search-overlay__inner { position: relative; width: 100%; max-width: 900px; margin: 0 auto; padding: 80px 24px; }
.search-overlay__close { position: absolute; top: 24px; right: 24px; background: none; border: none; cursor: pointer; color: #111; transition: opacity 0.2s; }
.search-overlay__close:hover { opacity: 0.6; }
.search-overlay__form { position: relative; display: flex; align-items: center; border-bottom: 2px solid #111; margin-bottom: 40px; }
.search-overlay__input { flex: 1; background: transparent; border: none; font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); color: #111; padding: 10px 0; outline: none; }
.search-overlay__input::placeholder { color: #111; opacity: 0.5; }
.search-overlay__submit { background: transparent; border: none; cursor: pointer; color: #111; }
.search-overlay__body { display: flex; flex-direction: column; gap: 40px; }
.search-overlay__suggestions { display: flex; gap: 60px; }
.search-overlay__group { flex: 1; }
.search-overlay__group.is-hidden { display: none; }
.search-overlay__title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: #111111; margin-bottom: 16px; font-weight: 700; }
.search-overlay__list { list-style: none; padding: 0; margin: 0; }
.search-overlay__list li { margin-bottom: 12px; }
.search-overlay__list button { background: none; border: none; font-size: 1.2rem; color: #111; cursor: pointer; padding: 0; text-align: left; transition: color 0.2s; }
.search-overlay__list button:hover { color: #111; text-decoration: underline; }
.search-overlay__results { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
/* END_SECTION:header */

/* START_SECTION:hero (INDEX:20) */
.nhero {
  position: relative;
  overflow: hidden;
  margin: 0 auto !important;
  border-radius: 0;
}
.nhero__carousel {
  position: relative;
  width: 100%;
}
.nhero__track {
  display: flex;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.nhero__track::-webkit-scrollbar { display: none; }
.nhero__slide {
  flex: 0 0 100%;
  width: 100%;
  min-height: var(--h-d);
  position: relative;
  display: flex;
  align-items: flex-end;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--ground);
  color: var(--fg);
  isolation: isolate;
}

/* ── Media stack ── */
.nhero__bg { position: absolute; inset: 0; z-index: 0; }
.nhero__poster, .nhero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none !important; max-height: none !important; object-fit: cover; }
.nhero__poster img { width: 100%; height: 100%; max-width: none !important; max-height: none !important; object-fit: cover; }
.nhero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--scrim-c) calc(var(--scrim) * 40%), transparent) 0%, transparent 30%),
    linear-gradient(0deg, color-mix(in srgb, var(--scrim-c) calc(var(--scrim) * 115%), transparent) 0%, transparent 62%),
    linear-gradient(90deg, color-mix(in srgb, var(--scrim-c) calc(var(--scrim) * 80%), transparent) 0%, transparent 55%);
}
.nhero__dark-veil {
  position: absolute; inset: 0;
  background-color: var(--dark-veil-c, #000000);
  opacity: var(--dark-veil-op, 0.4);
  pointer-events: none;
  z-index: 1;
}
.nhero__grain {
  position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Content ── */
.nhero__inner { position: relative; z-index: 2; width: 100%; padding-top: clamp(90px, 12vh, 130px); padding-bottom: clamp(36px, 5vw, 64px); pointer-events: none; }
.nhero__inner * { pointer-events: auto; }
.nhero__content { max-width: min(58rem, 82%); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 1.8vw, 24px); padding-bottom: 24px; }
.nhero--align-center .nhero__content { max-width: 52rem; margin-inline: auto; align-items: center; text-align: center; }
.nhero__slide.nhero--align-center { align-items: center; justify-content: center; }
.nhero--align-right .nhero__content { margin-left: auto; align-items: flex-start; }

.nhero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--eyebrow-c); margin: 0;
}
.nhero__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: nheroPulse 2.6s var(--ease) infinite; }
@keyframes nheroPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--eyebrow-c) 70%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }

.nhero__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.18);
}
.nhero__title--medium {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.05;
}
.nhero__sub {
  font-size: clamp(0.92rem, 1.2vw, 1.12rem); line-height: 1.35; max-width: 44ch;
  color: color-mix(in srgb, var(--fg) 90%, transparent); margin: 0;
  margin-top: -14px;
}
.nhero__ctas { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 20px); flex-wrap: wrap; margin-top: 4px; margin-bottom: 12px; }
.nhero__cta {
  border-radius: 999px;
  padding: 10px 24px;
  min-height: 42px;
  font-size: 0.88rem;
  font-weight: 500;
  background: #555555 !important;
  color: #FFFFFF !important;
  border: 1px solid #555555 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
.nhero__cta:hover {
  background: #333333 !important;
  color: #FFFFFF !important;
  border-color: #333333 !important;
}
.nhero__link { position: relative; display: inline-flex; flex-direction: column; gap: 4px; font-weight: 500; font-size: 0.9rem; color: var(--fg); }
.nhero__link-line { display: block; height: 1px; width: 100%; background: currentColor; transform: scaleX(1); transform-origin: left; opacity: 0.6; }

/* ── Navigation ── */
.nhero__nav-wrapper {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: clamp(16px, 2.5vw, 28px);
  z-index: 10;
  pointer-events: none;
}
.nhero__nav-wrapper * { pointer-events: auto; }

.nhero__dots { display: flex; gap: 8px; align-items: center; }
.nhero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.4); border: none; padding: 0;
  cursor: pointer; transition: all 0.3s;
}
.nhero__dot.is-active { background: #fff; transform: scale(1.2); }

.nhero__arrows { display: none; gap: 10px; }
.nhero__arrow {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer; transition: background 0.3s;
}
.nhero__arrow:hover { background: rgba(255,255,255,0.35); }

.nhero__pause {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: transparent; color: rgba(255,255,255,0.5);
  border: none; cursor: pointer; transition: color 0.3s;
}
.nhero__pause:hover { color: #fff; }

@media (min-width: 1024px) {
  .nhero__arrows { display: flex; }
  .nhero__nav-wrapper { justify-content: flex-start; gap: 20px; }
}

/* ── Trust marquee ribbon ── */
.nhero__marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0; background: transparent; }
.nhero__marquee-image-strip { display: flex; align-items: center; justify-content: center; width: 100%; }
.nhero__marquee-image-strip img { width: 100%; height: auto; object-fit: contain; }

/* ── Scroll cue ── */
.nhero__cue { position: absolute; right: clamp(16px, 3vw, 36px); bottom: 40px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity var(--dur) var(--ease); }
.nhero__cue-word { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; writing-mode: vertical-rl; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.nhero__cue-line { width: 1px; height: 36px; background: linear-gradient(var(--fg), transparent); position: relative; overflow: hidden; }
.nhero__cue-line::after { content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--eyebrow-c); animation: nheroCue 1.9s var(--ease-in-out) infinite; }
@keyframes nheroCue { 0% { transform: translateY(-120%); } 100% { transform: translateY(300%); } }

/* ── Responsive ── */
@media (max-width: 1023px) {
  .nhero { margin: 0 !important; border-radius: 0 !important; }
  .nhero__content { max-width: 85%; }
  .nhero__cue { display: none; }
}

@media (max-width: 767px) {
  .nhero { margin: 0 !important; border-radius: 0 !important; }
  .nhero__slide { min-height: max(var(--h-m), 260px, var(--fit-h, 0px)); }
  .nhero__content { max-width: 100%; gap: 12px; padding-bottom: 24px !important; }
  .nhero__inner { padding-top: 80px !important; padding-bottom: 32px !important; }
  .nhero__eyebrow { font-size: 0.74rem !important; letter-spacing: 0.20em !important; }
  .nhero__title { font-size: clamp(1.48rem, 4.8vw, 1.85rem) !important; line-height: 1.15 !important; }
  .nhero__sub { font-size: 0.90rem !important; line-height: 1.45 !important; max-width: 40ch; margin-top: 0 !important; }
  .nhero__ctas { width: auto; gap: 12px; margin-top: 6px; margin-bottom: 18px !important; }
  .nhero__cta {
    padding: 9px 22px !important;
    min-height: 40px !important;
    font-size: 0.84rem !important;
    background: #555555 !important;
    color: #FFFFFF !important;
    border-color: #555555 !important;
  }
  .nhero__nav-wrapper { padding-bottom: clamp(16px, 2.5vw, 24px) !important; }
  .nhero__marquee { padding: 8px 0; }
  .nhero__poster--desktop { display: none !important; }
  .nhero__poster--mobile { display: block !important; }
  .nhero__poster--desktop-only { display: block !important; }
}

@media (min-width: 768px) {
  .nhero__poster--mobile { display: none !important; }
  .nhero__poster--desktop { display: block !important; }
  .nhero__poster--mobile-only { display: block !important; }
}
/* END_SECTION:hero */

/* START_SECTION:in-the-press (INDEX:22) */
.press {
  background: var(--press-bg, #FFFFFF);
  color: var(--press-fg, #111111);
  /* Top padding is capped so the heading sits close to the section above,
     whatever the "Top padding" setting says. */
  padding: min(var(--press-pt, 72px), clamp(16px, 2vw, 24px)) 16px var(--press-pb, 80px);
  text-align: center;
}
.press__inner { max-width: 1100px; margin: 0 auto; }

.press__heading {
  font-family: var(--font-heading, Georgia, serif);
  font-size: var(--fs-heading-xl, clamp(30px, 3.6vw, 49px));
  line-height: var(--lh-heading-xl, 1.1);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: inherit;
  margin: 0 0 clamp(28px, 4vw, 48px);
}
.press__empty {
  margin: 0 auto 24px;
  max-width: 52ch;
  padding: 16px 20px;
  border: 1px dashed currentColor;
  opacity: 0.6;
  font-size: 0.9rem;
}

/* Quote slider: only the active slide is visible and only it takes up height, so a short quote
   does not leave the gap a long one needs */
.press__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  margin-bottom: clamp(32px, 4.5vw, 56px);
}
.press__viewport { position: relative; }
.press__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.press__slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s;
}
.press__quote {
  margin: 0 auto;
  max-width: 44ch;
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: inherit;
  text-wrap: balance;
}
.press__cite {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.press__cite a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.press__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.press__arrow:hover,
.press__arrow:focus-visible { opacity: 1; background: var(--press-fg, #111111); color: var(--press-bg, #FFFFFF); }

/* Logos */
.press__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px clamp(32px, 6vw, 80px);
}
.press__logo-item { display: flex; align-items: center; margin: 0; }
.press__logo {
  display: inline-flex;
  align-items: center;
  background: none;
  border: 0;
  padding: 4px;
  color: inherit;
  text-decoration: none;
}
.press__logo-img {
  display: block;
  height: var(--press-logo-h, 34px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.press__logo-text {
  font-family: var(--font-heading, Georgia, serif);
  font-size: calc(var(--press-logo-h, 34px) * 0.7);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.press__logos--mono .press__logo-img { filter: grayscale(1); }
.press__logos--switch .press__logo { opacity: 0.4; cursor: pointer; transition: opacity 0.3s ease; }
.press__logos--switch .press__logo:hover,
.press__logos--switch .press__logo:focus-visible,
.press__logos--switch .press__logo.is-active { opacity: 1; }
.press__logo.is-link:hover { opacity: 0.7; }

@media (max-width: 767px) {
  /* Quote on its own row, arrows underneath */
  .press__stage {
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }
  .press__viewport { grid-column: 1 / -1; grid-row: 1; }
  .press__arrow--prev { grid-row: 2; grid-column: 1; justify-self: end; margin-right: 8px; }
  .press__arrow--next { grid-row: 2; grid-column: 2; justify-self: start; margin-left: 8px; }
  .press__logos { gap: 16px 32px; }
}
/* END_SECTION:in-the-press */

/* START_SECTION:ingredients-spread (INDEX:25) */
/* ═══════════════════════════════════════
   INGREDIENTS SPREAD — premium editorial aesthetic
   ═══════════════════════════════════════ */
.ingredients {
  background: var(--ing-bg);
  color: var(--ing-fg);
  padding-block: 0;
  position: relative;
  overflow: hidden;
}

/* ── Centered intro: heading, short rule, edge-to-edge justified paragraph ── */
.ingredients__intro {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin-inline: auto;
  padding-top: clamp(48px, 7vw, 96px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ingredients__rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--rule-olive, #8B8553);
  margin: clamp(16px, 2vw, 22px) auto clamp(20px, 2.4vw, 28px);
}

/* ── Beige strip (same beige as the reviews band) ── */
.ingredients__strip {
  position: relative;
  z-index: 1;
  width: 100%;
  background: var(--ing-strip-bg, #F0EDE7);
  padding: clamp(22px, 3vw, 36px) var(--gutter-page, 16px);
  text-align: center;
}
.ingredients__strip-text {
  max-width: none;
  margin: 0 auto;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: #111111;
}

.section-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.section-bg-media__img,
.section-bg-media__svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-bg-media__placeholder {
  width: 100%;
  height: 100%;
}
.section-bg-media__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ingredients__grid { 
  display: grid; 
  grid-template-columns: 0.8fr 1.2fr; 
  gap: clamp(40px, 8vw, 100px);
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 8vw, 110px);
}
.ingredients--media-right .ingredients__media-col { order: 2; }

/* Media Column */
.ingredients__media { 
  position: sticky; 
  top: clamp(80px, 10vh, 120px); 
  margin-bottom: 40px;
}

@media (max-width: 1023px) and (min-width: 768px) {
  .ingredients__grid { grid-template-columns: 1fr; gap: 60px; }
  .ingredients__media { position: relative; top: auto; max-width: 500px; margin: 0 auto; }
}
.ingredients__img-wrapper {
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.1);
  transform: translateZ(0);
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
}
.ingredients__img { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
}

/* Copy Column */
.ingredients__copy { 
  display: flex; 
  flex-direction: column; 
  gap: 48px; 
  min-width: 0;
}

.ingredients__intro .eyebrow { margin-bottom: 14px; }

.ingredients__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-heading-xl, clamp(30px, 3.6vw, 49px));
  line-height: var(--lh-heading-xl, 1.1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
  color: #111111;
  margin: 0;
  font-weight: 500;
}

/* Justified so every line runs border to border; the short last line is centred */
.ingredients__body {
  width: 100%;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 300;
  max-width: none;
  line-height: 1.65;
  color: #111111;
  text-align: justify;
  text-align-last: center;
  text-justify: inter-word;
  hyphens: manual;
}
.ingredients__body p { max-width: none; margin: 0; }
.ingredients__body p + p { margin-top: 0.8em; }

/* ── Option 2 — Staggered Icon Cards (Rhode/Aesop) ── */
.ingredients__cards {
  display: grid;
  padding-bottom: 40px;
}

.ingredients__slide {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.ingredients__slide.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
}

@media (min-width: 768px) {
  .ingredients__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .ingredients__slide {
    display: contents;
    visibility: visible !important;
  }
  .ingredients__slide > * {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

.ingredients__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 30px;
  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
  width: 100%;
}

.ingredients__card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.22);
  background: rgba(0,0,0,0.035);
}

.ingredients__card.is-active-card {
  border-color: var(--ing-fg);
  background: rgba(0,0,0,0.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

.ingredients__card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.ingredients__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: color-mix(in srgb, var(--ing-fg) 6%, transparent);
  color: var(--terracotta, #C7A265);
}
.ingredients__card-icon svg { width: 22px; height: 22px; }

.ingredients__card-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  font-weight: 300;
  opacity: 0.18;
  line-height: 1;
}

.ingredients__card-toggle {
  width: 32px;
  height: 32px;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 0;
}

.ingredients__card:hover .ingredients__card-toggle,
.ingredients__card.is-active-card .ingredients__card-toggle {
  background: var(--ing-fg);
  color: var(--ing-bg);
  border-color: var(--ing-fg);
}

.ingredients__card.is-active-card .ing-plus-svg {
  transform: rotate(45deg);
}

.ing-plus-svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.ingredients__card-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.ingredients__card-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.01em;
}

.ingredients__card-detail-wrap {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, margin-top 0.3s ease;
  margin-top: 0;
}

.ingredients__card.is-active-card .ingredients__card-detail-wrap {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
}

.ingredients__card-detail {
  font-size: 0.92rem;
  line-height: 1.5;
  opacity: 0.8;
  margin: 0;
}

/* Quote card */
.ingredients__quote-card {
  padding: 32px;
  background: rgba(0,0,0,0.03);
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.06);
  width: 100%;
}
.ingredients__quote-card .pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.4;
  margin: 0;
}
.ingredients__cite { 
  display: block; 
  margin-top: 16px; 
  font-style: normal; 
  font-size: 0.82rem; 
  font-weight: 600; 
  letter-spacing: 0.1em; 
  text-transform: uppercase; 
  opacity: 0.5;
}

.ingredients__cta-wrap { margin-top: 8px; }
.ingredients__cta {
  padding: 15px 30px;
  font-size: 1rem;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .ingredients__grid { grid-template-columns: 1fr; gap: 48px; }
  .ingredients--media-right .ingredients__media-col { order: 0; }
  .ingredients__media { position: static; }
  .ingredients__img-wrapper { aspect-ratio: 4/5 !important; max-height: 60vh; }
  .ingredients__img[style] { aspect-ratio: auto !important; }
}

@media (max-width: 767px) {
  .ingredients .container { padding-inline: 0; }
  .ingredients .ingredients__intro { padding-inline: var(--gutter-page); }
  .ingredients__grid { padding-block: 40px; }
  .ingredients__body { font-size: 0.95rem; line-height: 1.6; }
  .ingredients__media-col, .ingredients__cta-wrap { padding-inline: var(--gutter-page); }

  .ingredients__img-wrapper {
    aspect-ratio: 1 / 1 !important;
    max-height: 340px;
  }

  .ingredients__cards {
    padding-bottom: 24px;
    padding-inline: var(--gutter-page);
  }
  
  .ingredients__slide {
    gap: 16px;
  }

  .ingredients__card {
    padding: 24px;
    gap: 12px;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  .ingredients__card-icon { width: 40px; height: 40px; border-radius: 0; }
  .ingredients__card-icon svg { width: 20px; height: 20px; }
  .ingredients__card-number { font-size: 1.8rem; }
  .ingredients__card-title { font-size: 1.1rem; }
  .ingredients__card-detail { font-size: 0.95rem; line-height: 1.4; }
  
  .ingredients__card:nth-child(2n) { transform: none !important; }
}
/* END_SECTION:ingredients-spread */

/* START_SECTION:ingredients-tabs (INDEX:26) */
.pdp-tabs-section {
  background: var(--bg);
  color: var(--text);
  padding-block: clamp(60px, 8vw, 100px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.section-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.section-bg-media__img,
.section-bg-media__svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-bg-media__placeholder {
  width: 100%;
  height: 100%;
}
.section-bg-media__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pdp-tabs-section__inner {
  position: relative;
  z-index: 1;
}

.pdp-tabs-nav {
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 6vw, 60px);
}

.pdp-tabs-nav:has(.pdp-tabs-nav__btn:only-child) {
  border-bottom: none;
}

.pdp-tabs-nav__btn {
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text, #222222);
  opacity: 0.65;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}

.pdp-tabs-nav__btn:hover {
  color: var(--text, #222222);
  opacity: 1;
}

.pdp-tabs-nav__btn.is-active {
  color: var(--text, #222222);
  opacity: 1;
}

.pdp-tabs-nav__btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--sage);
}

.pdp-tabs-content {
  max-width: 660px;
  margin: 0;
}

.pdp-tabs-panel {
  display: none;
  animation: fadeIn 0.4s ease;
}

.pdp-tabs-panel.is-active {
  display: block;
}

/* Ingredients Specific Layout */
.pdp-tabs-ingredients-title {
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 2.1vw, 1.65rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text, #222222);
  margin-bottom: 32px;
  text-transform: uppercase;
}

.pdp-tabs-ingredients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 40px;
  margin-bottom: 60px;
}

.pdp-tabs-ingredient {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding-bottom: 16px;
  transition: border-color 0.3s;
}

.pdp-tabs-ingredient-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.pdp-tabs-ingredient-name {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 600;
  margin: 0;
  color: var(--text, #222222);
  transition: color 0.3s;
  line-height: 1.25;
}

.pdp-tabs-ingredient.is-open .pdp-tabs-ingredient-name {
  color: var(--text, #222222);
}

.pdp-tabs-ingredient-sign {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  flex-shrink: 0;
}

.pdp-tabs-ingredient-header:hover .pdp-tabs-ingredient-sign {
  background: var(--ink, #363636);
  color: #FFFFFF;
  border-color: var(--ink, #363636);
  transform: scale(1.08);
}

.pdp-tabs-ingredient.is-open .pdp-tabs-ingredient-sign {
  background: var(--sage, #363636);
  color: #FFFFFF;
  border-color: var(--sage, #363636);
  transform: rotate(90deg);
}

.sign-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.sign-v {
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform-origin: center;
}

.pdp-tabs-ingredient.is-open .sign-v {
  opacity: 0;
  transform: rotate(90deg);
}

.pdp-tabs-ingredient-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text, #222222);
  opacity: 0.9;
  font-weight: 450;
  margin: 12px 0 0 0;
  padding-right: 24px;
}

.pdp-tabs-ingredients-footer {
  font-size: 0.9rem;
  color: var(--text, #222222);
  opacity: 0.95;
}

.pdp-tabs-ingredients-footer p {
  margin: 0 0 8px 0;
}

.pdp-tabs-ingredients-footer strong {
  font-weight: 700;
  color: var(--text, #222222);
}

.pdp-tabs-link {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text, #222222);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity 0.3s;
}

.pdp-tabs-link:hover {
  opacity: 0.7;
}

/* Media */
@media (max-width: 900px) {
  .pdp-tabs-content {
    gap: 60px;
  }
  .pdp-tabs-ingredients-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .pdp-tabs-nav {
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    width: 100%;
  }
  .pdp-tabs-nav::-webkit-scrollbar { display: none; }
  .pdp-tabs-nav__btn {
    padding: 12px 20px;
    white-space: nowrap;
  }
}

@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}
/* END_SECTION:ingredients-tabs */

/* START_SECTION:judgeme-reviews (INDEX:27) */
.judgeme-reviews-section {
  background-color: var(--jdgm-sec-bg);
  color: var(--jdgm-sec-fg);
  padding: clamp(28px, 4vw, 56px) 0;
  width: 100%;
  scroll-margin-top: 90px;
}

.judgeme-reviews-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: clamp(16px, 3.5vw, 40px);
}

.judgeme-reviews-header {
  text-align: center;
  margin-bottom: 24px;
}

.judgeme-reviews-eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #666666;
  display: block;
  margin-bottom: 6px;
}

.judgeme-reviews-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 500;
  color: var(--jdgm-sec-fg);
  margin: 0;
}

.judgeme-reviews-widget-wrap {
  width: 100%;
}

/* Judge.me ships its own accent colour inline (on the widget and again on each review); keep stars and buttons in the theme's ink like the rest of the PDP */
.jm-review-widget,
.jm-review-widget [style*="--jm-review-widget-star-and-histogram-color"] {
  --jm-review-widget-star-and-histogram-color: #111111 !important;
  --jm-review-widget-button-color: #111111 !important;
  --jm-review-widget-form-button-color: #111111 !important;
  --jm-widget-primary-color: #111111 !important;
}
/* END_SECTION:judgeme-reviews */

/* START_SECTION:main-addresses (INDEX:32) */
.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.addr-grid label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.addr-grid input { padding: 12px 16px; border: 1px solid var(--stone); border-radius: 12px; background: var(--white); font-weight: 400; }
.addr-list { display: grid; gap: 16px; margin-top: 16px; }
.addr-list li { padding: 16px; border: 1px solid var(--stone); border-radius: var(--radius-card-sm); }
@media (max-width: 600px) { .addr-grid { grid-template-columns: 1fr; } }
/* END_SECTION:main-addresses */

/* START_SECTION:main-article (INDEX:34) */
.main-article__head { text-align: center; margin-bottom: var(--sp-6); max-width: 42rem; margin-inline: auto; }
.main-article__head h1 { font-family: var(--font-heading); font-size: var(--fs-h1); text-transform: none; color: var(--ink); line-height: var(--lh-heading); }
.main-article__hero img { border-radius: var(--radius-card); margin-bottom: var(--sp-7); }
.main-article__body { max-width: 42rem; margin-inline: auto; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.7; color: var(--ink); }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:35) */
.main-blog-mag {
  background-color: #FFFFFF;
  /* The banner carries its own top gap (--banner-top-gap); flow-root keeps
     that margin inside the section so the background still covers it. */
  display: flow-root;
  padding-top: 0 !important;
  padding-bottom: 0;
}

/* Content under the banner keeps the inset width shared with Shop and
   Subscription (--banner-content-* in snippets/css-variables.liquid). */
.mag-container {
  max-width: calc(var(--banner-content-max-w) + 2 * var(--banner-content-gutter));
  margin: 0 auto;
  padding-inline: var(--banner-content-gutter);
}

/* Magazine Hero Banner — geometry (width, height, padding, spacing) is the
   shared .nc-banner frame in base.css; only the colours live here. */
.mag-hero-banner {
  background: #111111;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .mag-hero-banner__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: auto 0 !important;
  }
  .mag-hero-banner h1 {
    font-size: clamp(2rem, 7.5vw, 3rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

.mag-title {
  font-family: var(--font-heading) !important;
  font-size: clamp(3rem, 6vw, 5rem) !important;
  line-height: 1.02 !important;
  font-weight: 500 !important;
  color: var(--ink, #222);
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  width: 100% !important;
}
.mag-subtitle {
  font-family: var(--font-body) !important;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft, #555);
  margin: 0 auto !important;
  max-width: 680px !important;
  text-align: center !important;
  width: 100% !important;
}

/* Toolbar: Search + Pills */
.mag-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--stone, #E7E5E2);
  border-bottom: 1px solid var(--stone, #E7E5E2);
  padding-block: 16px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
@media (max-width: 900px) {
  .mag-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
}

.mag-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--stone, #E7E5E2);
  padding: 10px 18px;
  border-radius: 999px;
  width: 340px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (max-width: 900px) {
  .mag-search-box {
    width: 100%;
  }
}
.mag-search-box:focus-within {
  border-color: var(--ink, #222);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.mag-search-icon {
  color: var(--ink-soft, #777);
  flex-shrink: 0;
}
.mag-search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink, #222);
  width: 100%;
}

.mag-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
}
.mag-filter-pills::-webkit-scrollbar { display: none; }

.mag-pill {
  background: #fff;
  border: 1px solid var(--stone, #E7E5E2);
  color: var(--ink-soft, #555);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mag-pill:hover {
  border-color: var(--ink, #222);
  color: var(--ink, #222);
}
.mag-pill.is-active {
  background: var(--ink, #222);
  color: #ffffff;
  border-color: var(--ink, #222);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.mag-pill--more {
  background: var(--sage-pale, #F5F5F3);
  border-color: var(--stone, #E7E5E2);
  color: var(--ink, #222);
  font-weight: 600;
}
.mag-pill--more:hover {
  background: var(--ink, #222);
  color: #ffffff;
}

/* ── Exact Editorial Pacing & Grid (Matching The White Company) ── */
.mag-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 44px 16px !important;
  align-items: start !important;
}

.mag-card {
  display: flex !important;
  flex-direction: column !important;
  grid-column: span 1 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.mag-card__link {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.mag-card__media {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: hidden !important;
  margin-bottom: 10px !important;
  background: var(--sage-pale, #F5F5F3) !important;
  border-radius: 0px !important;
}

/* Position-Specific Pacing: Col 1 is Tall Portrait 3:4, Col 2 & 3 start 1:1 Square then 3:4 Portrait */
.mag-card--pos-1 { grid-column: span 1 !important; }
.mag-card--pos-1 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-2 { grid-column: span 1 !important; }
.mag-card--pos-2 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-3 { grid-column: span 1 !important; }
.mag-card--pos-3 .mag-card__media { aspect-ratio: 1 / 1 !important; }

.mag-card--pos-4 { grid-column: span 1 !important; }
.mag-card--pos-4 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-5 { grid-column: span 1 !important; }
.mag-card--pos-5 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-6 { grid-column: span 1 !important; }
.mag-card--pos-6 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-7 { grid-column: span 1 !important; }
.mag-card--pos-7 .mag-card__media { aspect-ratio: 1 / 1 !important; }

.mag-card--pos-8 { grid-column: span 1 !important; }
.mag-card--pos-8 .mag-card__media { aspect-ratio: 3 / 4 !important; }

.mag-card--pos-9 { grid-column: span 1 !important; }
.mag-card--pos-9 .mag-card__media { aspect-ratio: 1 / 1 !important; }

.mag-card--pos-1 .mag-card__title,
.mag-card--pos-2 .mag-card__title,
.mag-card--pos-6 .mag-card__title {
  font-size: clamp(1.15rem, 1.35vw, 1.4rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
}

.mag-card--pos-6 .mag-card__link {
  display: flex !important;
  flex-direction: column !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0px !important;
  padding: 0 !important;
}

.mag-card__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0px !important;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.mag-card:hover .mag-card__img {
  transform: scale(1.03) !important;
}

.mag-card__video-badge {
  position: absolute !important;
  bottom: 10px !important;
  right: 10px !important;
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: blur(4px) !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  padding: 4px 8px !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-transform: uppercase !important;
}

.mag-card__body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.mag-card__meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #444444 !important;
  margin-top: 2px !important;
  margin-bottom: 5px !important;
}

.mag-card__tag {
  color: #333333 !important;
  font-weight: 700 !important;
}

.mag-card__readtime {
  margin-left: auto !important;
  color: #888888 !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
}

.mag-card__title {
  font-family: var(--font-heading, Georgia, serif) !important;
  font-size: clamp(1.15rem, 1.35vw, 1.4rem) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
  color: #111111 !important;
  margin: 0 0 4px 0 !important;
  transition: color 200ms ease !important;
}

.mag-card:hover .mag-card__title {
  color: var(--sage-deep, #555555) !important;
}

.mag-card__excerpt {
  font-family: var(--font-body, sans-serif) !important;
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  color: #666666 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

@media (max-width: 900px) {
  .mag-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 18px !important;
  }
}

@media (max-width: 600px) {
  .mag-grid {
    grid-template-columns: 1fr !important;
    gap: 28px 0 !important;
  }
  .mag-container {
    padding-inline: var(--banner-content-gutter) !important;
  }
}

/* Pagination */
.mag-pagination {
  margin-top: clamp(48px, 6vw, 72px) !important;
  margin-bottom: clamp(32px, 4vw, 56px) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--stone, #E7E5E2) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.mag-page-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 16px !important;
  border: 1px solid var(--ink, #222) !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--ink, #222) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 200ms ease !important;
}
.mag-page-btn:hover:not(.is-disabled) {
  background: var(--ink, #222) !important;
  color: #ffffff !important;
}
.mag-page-btn.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  border-color: var(--stone, #ccc) !important;
}

.mag-page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.mag-page-num {
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: var(--ink-soft, #666) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 180ms ease !important;
}
.mag-page-num:hover {
  color: var(--ink, #222) !important;
  background: rgba(0,0,0,0.06) !important;
}
.mag-page-num.is-active {
  background: #333333 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

@media (max-width: 600px) {
  .mag-pagination {
    gap: 4px !important;
  }
  .mag-page-btn {
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
  }
  .mag-page-num {
    min-width: 26px !important;
    height: 26px !important;
    font-size: 0.78rem !important;
  }
}

/* Slide-out Topic Drawer (Cart-like right side panel) */
.mag-drawer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  opacity: 0;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.mag-drawer.is-open {
  visibility: visible;
  opacity: 1;
}

.mag-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
}

.mag-drawer__panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0,0,0,0.2);
  z-index: 2;
}
.mag-drawer.is-open .mag-drawer__panel {
  transform: translateX(0);
}

.mag-drawer__header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--stone, #E7E5E2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mag-drawer__head-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mag-drawer__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin: 0;
  color: var(--ink, #222);
}
.mag-drawer__count-badge {
  background: var(--sage-pale, #F5F5F3);
  color: var(--sage-deep, #363636);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.mag-drawer__close {
  background: none;
  border: none;
  color: var(--ink, #222);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease;
}
.mag-drawer__close:hover {
  background: var(--sage-pale, #F5F5F3);
}

.mag-drawer__search {
  padding: 16px 28px;
  border-bottom: 1px solid var(--stone, #E7E5E2);
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FAF8F5;
}
.mag-drawer__search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.88rem;
  width: 100%;
  color: var(--ink, #222);
}

.mag-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.mag-drawer__sub {
  font-size: 0.82rem;
  color: var(--ink-soft, #666);
  margin: 0 0 16px 0;
}

.mag-drawer__tags-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.drawer-tag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid var(--stone, #E7E5E2);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #222);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: left;
}
.drawer-tag-row:hover {
  border-color: var(--ink, #222);
  background: #FAF8F5;
}
.drawer-tag-row.is-active {
  background: var(--ink, #222);
  color: #ffffff;
  border-color: var(--ink, #222);
  font-weight: 600;
}
.drawer-tag-row__count {
  font-size: 0.78rem;
  opacity: 0.7;
}

.mag-drawer__footer {
  padding: 20px 28px;
  border-top: 1px solid var(--stone, #E7E5E2);
  background: #fff;
}
.mag-drawer__footer .btn {
  height: 48px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Bottom USP Strip */
.mag-usps-strip {
  margin-top: clamp(80px, 10vw, 120px);
  padding-block: clamp(56px, 7vw, 84px);
  background-color: #FAF8F5;
  border-top: 1px solid var(--stone, #E7E5E2);
  border-bottom: 1px solid var(--stone, #E7E5E2);
}

.mag-usps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  text-align: center;
}
@media (max-width: 960px) {
  .mag-usps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}
@media (max-width: 540px) {
  .mag-usps-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.mag-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 12px;
}
.mag-usp-icon {
  color: var(--ink, #363636);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mag-usp-title {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink, #363636);
  margin: 0 0 6px 0;
  line-height: 1.3;
}
.mag-usp-sub {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft, #666);
  margin: 0;
}
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:37) */
.main-cart__title { margin-bottom: var(--sp-7); }
.main-cart__items { display: flex; flex-direction: column; gap: 20px; }
.cart-line { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--stone); }
.cart-line__media img { border-radius: 10px; }
.cart-line__title { font-weight: 600; }
.cart-line__qty { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.cart-line__qty input { width: 64px; padding: 8px; border: 1px solid var(--stone); border-radius: 8px; text-align: center; }
.main-cart__foot { margin-top: var(--sp-7); display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }
.main-cart__subtotal { display: flex; gap: 20px; font-size: 1.2rem; }
.main-cart__actions { display: flex; gap: 12px; }
.main-cart__empty { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
/* END_SECTION:main-cart */

/* START_SECTION:main-contact (INDEX:39) */
.contact-section { padding-block: calc(var(--section-pad-lg) * 1.5) var(--section-pad-lg); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1400px; margin: 0 auto; align-items: start; }
@media (max-width: 767px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-info .h2 { margin-bottom: 16px; font-size: 2.2rem; font-family: var(--font-heading); }
.contact-sub { font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 40px; max-width: 32ch; }

.contact-methods { display: flex; flex-direction: column; gap: 24px; }
.contact-method .h3 { margin-bottom: 4px; font-size: 1rem; color: var(--sage-deep); }
.contact-method p { color: var(--ink); font-weight: 600; }

.contact-form-wrap { background: var(--white); padding: 40px; border-radius: 24px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); border: 1px solid var(--stone); overflow: hidden; }
@media (max-width: 767px) { .contact-form-wrap { padding: 24px; border-radius: 16px; } }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 767px) { .field-row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 1rem; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.field input, .field textarea, .field select { width: 100%; padding: 18px 20px; border: 1px solid var(--stone); border-radius: 12px; background: var(--cream); font-family: var(--font-body); font-size: 1.15rem; line-height: 1.6; transition: border-color var(--dur-fast); outline: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--sage-deep); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 0.6; }

.form-success { padding: 16px; background: color-mix(in srgb, var(--sage) 15%, transparent); color: var(--sage-deep); border-radius: 12px; margin-bottom: 20px; font-weight: 600; text-align: center; }
.form-error { padding: 16px; background: color-mix(in srgb, var(--terracotta) 15%, transparent); color: var(--terracotta); border-radius: 12px; margin-bottom: 20px; }

/* Stepper styles */
.stepper-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.step-indicator { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); color: var(--ink-soft); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; border: 2px solid var(--stone); transition: all 0.3s ease; }
.step-indicator.active { background: var(--sage-deep); color: var(--cream); border-color: var(--sage-deep); }
.step-indicator.completed { background: var(--sage); color: var(--sage-deep); border-color: var(--sage); }
.step-line { flex: 1; height: 2px; background: var(--stone); margin: 0 10px; transition: background 0.3s ease; }
.step-line.active { background: var(--sage-deep); }

.step-container { position: relative; }
.form-step { display: none; animation: fadeIn 0.4s ease forwards; }
.form-step.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
/* END_SECTION:main-contact */

/* START_SECTION:main-list-collections (INDEX:41) */
.collection-tile { display: block; }
.collection-tile img, .collection-tile .placeholder-media { border-radius: var(--radius-card); overflow: hidden; }
.collection-tile__title { font-size: 1.4rem; margin-top: 14px; }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-subscription (INDEX:50) */
.sub-bundle {
  background: var(--bg);
  /* The banner carries its own top gap (--banner-top-gap); flow-root keeps
     that margin inside the section so the background still covers it. */
  display: flow-root;
  padding-top: 0 !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

.sub-bundle .container,
.sub-bundle__container {
  max-width: 1400px !important;
  margin-inline: auto !important;
  padding-inline: clamp(20px, 4vw, 48px) !important;
}

/* Subscription Hero Banner — geometry (width, height, padding, spacing) is
   the shared .nc-banner frame in base.css; only the colours live here. */
.sub-hero-banner {
  background: #111111;
  color: #FFFFFF;
}

@media (max-width: 767px) {
  .sub-hero-banner__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: auto 0 !important;
  }
  .sub-hero-banner h1 {
    font-size: clamp(2rem, 7.5vw, 3rem) !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    text-align: center !important;
  }
}

.sub-bundle__pillars {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: var(--banner-content-max-w, 1304px) !important;
  margin: 0 auto 36px !important; /* Centered directly beneath banner */
}
.sub-pillar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: clamp(0.74rem, 0.95vw, 0.85rem) !important;
  font-weight: 600 !important;
  color: var(--ink, #363636) !important;
  background: var(--white, #fff) !important;
  padding: 8px 14px !important;
  border-radius: 0px !important;
  border: 1px solid var(--stone, #E7E5E2) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
.sub-pillar__icon {
  display: inline-flex !important;
  align-items: center !important;
  color: var(--sage-deep, #363636) !important;
}

@media (max-width: 767px) {
  .sub-bundle__pillars {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    padding-inline: 16px !important;
    padding-bottom: 6px !important;
    gap: 10px !important;
    width: calc(100% + 32px) !important;
    margin-inline: -16px !important;
  }
  .sub-bundle__pillars::-webkit-scrollbar {
    display: none !important;
  }
  .sub-pillar {
    scroll-snap-align: start !important;
    font-size: 0.78rem !important;
    padding: 8px 14px !important;
  }
}

/* Layout Grid */
.sub-bundle__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 1024px) {
  .sub-bundle__layout {
    grid-template-columns: 1fr 330px;
    gap: 24px;
  }
}
@media (max-width: 860px) {
  .sub-bundle__layout {
    grid-template-columns: 1fr;
  }
}

.sub-bundle__tabs-nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
}

.sub-bundle__tabs-wrapper {
  flex: 1;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  max-width: 100% !important;
}
.sub-bundle__tabs-wrapper::-webkit-scrollbar { display: none; }

.sub-bundle__tabs {
  display: inline-flex !important;
  gap: 6px !important;
  background: var(--white, #fff);
  padding: 6px !important;
  border-radius: 0px;
  border: 1px solid var(--stone, #E7E5E2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 100% !important;
  white-space: nowrap !important;
  width: max-content !important;
  margin: 0 auto !important;
}

.sub-bundle__nav-arrow {
  display: none !important;
}
@media (max-width: 860px) {
  .sub-bundle__tabs-nav-wrap {
    overflow: hidden !important;
  }
  .sub-bundle__tabs-wrapper {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }
  .sub-bundle__tabs {
    display: inline-flex !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .sub-bundle__tab {
    scroll-snap-align: center !important;
    flex: 0 0 auto !important;
  }
  .sub-bundle__tab:first-child {
    scroll-snap-align: start !important;
  }
  .sub-bundle__tab:last-child {
    scroll-snap-align: end !important;
  }
  .sub-bundle__nav-arrow {
    display: flex !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 0px !important;
    background: var(--white, #ffffff) !important;
    border: 1px solid var(--stone, #E7E5E2) !important;
    color: var(--ink, #363636) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: all 180ms ease !important;
  }
  .sub-bundle__nav-arrow:hover {
    background: var(--ink, #222) !important;
    color: #ffffff !important;
    border-color: var(--ink, #222) !important;
  }
}

/* Phones: all four categories visible at once in a 2 x 2 block, no arrows and no sideways scrolling */
@media (max-width: 860px) {
  .sub-bundle__nav-arrow { display: none !important; }
  .sub-bundle__tabs-nav-wrap { overflow: visible !important; }
  .sub-bundle__tabs-wrapper {
    overflow: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0;
  }
  .sub-bundle__tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    width: 100% !important;
    box-sizing: border-box;
  }
  .sub-bundle__tab {
    /* !important: the base .sub-bundle__tab rule comes later in this file */
    justify-content: space-between !important;
    min-width: 0;
    padding: 10px !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    line-height: 1.2;
    text-align: left;
    white-space: normal !important; /* a long name wraps inside its cell rather than being cut off */
  }
}

.sub-bundle__tabs {
  display: inline-flex;
  gap: 6px;
  background: var(--white, #fff);
  padding: 6px;
  border-radius: 0px;
  border: 1px solid var(--stone, #E7E5E2);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sub-bundle__tab {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft, #666);
  padding: 8px 16px;
  border-radius: 0px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all 200ms ease;
}
.sub-bundle__tab:hover {
  color: var(--ink, #363636);
  background: rgba(0,0,0,0.03);
}
.sub-bundle__tab.is-active {
  background: var(--sage-deep, #363636);
  color: var(--white, #ffffff);
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.sub-bundle__tab-count {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 0px;
  background: rgba(0,0,0,0.07);
  color: inherit;
}
.sub-bundle__tab.is-active .sub-bundle__tab-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* Catalogue Cards Grid */
.sub-bundle__catalogue {
  min-width: 0;
}
.sub-bundle__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
  min-width: 0;
}

@media (max-width: 640px) {
  .sub-bundle {
    overflow-x: hidden !important;
  }
  .sub-bundle__grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sub-card {
    width: 100% !important;
  }
}

/* Floating Mini Circular Routine Button on Mobile */
.sub-mobile-floating-routine {
  display: none;
}

@media (max-width: 860px) {
  .sub-mobile-floating-routine {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 900;
  }

  .sub-floating-btn {
    width: 56px;
    height: 56px;
    border-radius: 0px;
    background: var(--ink, #111111);
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .sub-floating-btn:active {
    transform: scale(0.92);
  }

  .sub-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
  }

  .sub-floating-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #059669;
    color: #FFFFFF;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    border-radius: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 4px;
    border: 2px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  }
}

.sub-card {
  background: var(--white, #fff);
  border-radius: 0px;
  border: 1px solid var(--stone, #E7E5E2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  min-width: 0;
  max-width: 100%;
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}
.sub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.07);
  border-color: rgba(54,54,54,0.3);
}
.sub-card.is-selected {
  border-color: var(--sage-deep, #363636);
  box-shadow: 0 0 0 2px var(--sage-deep, #363636), 0 10px 25px rgba(0,0,0,0.07);
}

.sub-card__badge-wrap {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
.sub-card__badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0px;
}
.sub-card__badge--save {
  background: var(--sage-deep, #363636);
  color: #fff;
}
.sub-card__badge--added {
  background: #059669;
  color: #fff;
}

.sub-card__img {
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  background: var(--sage-pale, #F1F1F1);
}
.sub-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.sub-card:hover .sub-card__img img {
  transform: scale(1.05);
}

.sub-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.sub-card__cat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sage-deep, #363636);
  margin-bottom: 4px;
  opacity: 0.8;
}
.sub-card__title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #363636);
  margin: 0 0 6px 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.sub-card__rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
}
.sub-card__stars {
  color: #F59E0B;
  font-size: 0.78rem;
  letter-spacing: 1px;
}
.sub-card__rating-val {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-soft, #666);
}

.sub-card__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.sub-card__option {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
}
.sub-card__option-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink, #363636);
  opacity: 0.8;
}
.sub-card__option-select {
  width: 100%;
  min-height: 38px;
  padding: 6px 28px 6px 10px;
  border: 1px solid rgba(0, 0, 0, 0.28);
  border-radius: 0;
  background-color: #fff;
  color: var(--ink, #363636);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
}
.sub-card__option-select:focus-visible {
  outline: 2px solid var(--ink, #111111);
  outline-offset: 1px;
}
.sub-card__prices {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 16px;
}
.sub-card__price-sub {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #363636);
}
.sub-card__price-orig {
  font-size: 0.82rem;
  color: var(--ink-soft, #888);
  text-decoration: line-through;
  opacity: 0.7;
}
.sub-card__sub-label {
  font-size: 0.72rem;
  color: var(--ink-soft, #777);
}

.sub-card__action {
  margin-top: auto;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.sub-card__add-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 0px !important;
  padding: 10px 16px !important;
  min-height: 42px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: transparent !important;
  color: var(--ink, #111111) !important;
  border: 1.5px solid var(--ink, #111111) !important;
  cursor: pointer !important;
  transition: all 180ms ease !important;
}
.sub-card__add-btn:hover {
  background: var(--ink, #111111) !important;
  color: #FFFFFF !important;
}

.sub-card__stepper {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: 1.5px solid var(--ink, #111111) !important;
  border-radius: 0px !important;
  padding: 3px 6px !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}
.sub-card__step-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 0px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink, #111111) !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: background 180ms ease, color 180ms ease, transform 150ms ease !important;
}
.sub-card__step-btn:hover {
  background: var(--ink, #111111) !important;
  color: #FFFFFF !important;
  transform: scale(1.05) !important;
}
.sub-card__step-btn:active {
  transform: scale(0.94) !important;
}
.sub-card__step-count {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--ink, #111111) !important;
  padding-inline: 8px !important;
}

/* Empty category box */
.empty-cat-box {
  background: var(--white, #fff);
  border-radius: 0px;
  padding: 48px 24px;
  text-align: center;
  border: 1px solid var(--stone, #E7E5E2);
}
.empty-cat-icon {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--sage-deep, #363636);
}

/* Drawer Close Button (Hidden on Desktop) */
.sub-drawer-close {
  display: none !important;
  width: 32px;
  height: 32px;
  border-radius: 0px;
  border: 1px solid var(--stone, #E7E5E2);
  background: var(--sage-pale, #F1F1F1);
  color: var(--ink, #363636);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 180ms ease;
}
.sub-drawer-close:hover {
  background: var(--ink, #111);
  color: #fff;
}

.sub-summary__head-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (max-width: 860px) {
  /* On Mobile ONLY: Convert inline summary panel into a slide-up drawer modal */
  .sub-bundle__summary {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
    display: flex !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 300ms ease !important;
  }

  .sub-bundle__summary.is-drawer-open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .sub-bundle__summary-inner {
    background: #FFFFFF !important;
    border-radius: 0px !important;
    padding: 24px 20px 32px 20px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.3) !important;
    transform: translateY(100%) !important;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    top: auto !important;
  }

  .sub-bundle__summary.is-drawer-open .sub-bundle__summary-inner {
    transform: translateY(0) !important;
  }

  .sub-drawer-close {
    display: flex !important;
  }

  /* Mobile drawer: the panel keeps a fixed height and the items list scrolls
     on its own, so a routine with 4+ products stays fully reachable without
     the list pushing the frequency picker / totals / CTA off-screen. */
  .sub-summary__items-scroll {
    max-height: 34vh !important;
    min-height: 120px !important;
    overflow-y: auto !important;
  }
}

/* Summary Panel Right */
.sub-bundle__summary-inner {
  background: var(--white, #fff);
  border-radius: 0px;
  padding: 24px;
  border: 1px solid var(--stone, #E7E5E2);
  box-shadow: 0 12px 36px rgba(0,0,0,0.05);
  position: sticky;
  top: 100px;
}

.sub-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--stone, #E7E5E2);
  margin-bottom: 16px;
}
.sub-summary__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin: 0;
  color: var(--ink, #363636);
}
.sub-summary__badge-count {
  background: var(--sage-pale, #F1F1F1);
  color: var(--sage-deep, #363636);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0px;
}

/* Progress Tier Bar */
.sub-progress {
  background: var(--sage-pale, #F1F1F1);
  border-radius: 0px;
  padding: 14px;
  margin-bottom: 18px;
}
.sub-progress__banner {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink, #363636);
  text-align: center;
  margin-bottom: 10px;
}
.sub-progress__bar-wrap {
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 0px;
  overflow: hidden;
  margin-bottom: 8px;
}
.sub-progress__bar {
  height: 100%;
  background: var(--sage-deep, #363636);
  border-radius: 0px;
  transition: width 300ms ease;
}
.sub-progress__steps {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ink-soft, #666);
  font-weight: 600;
}
.sub-progress__step {
  display: flex;
  align-items: center;
  gap: 4px;
}
.step-dot {
  width: 6px;
  height: 6px;
  border-radius: 0px;
  background: #ccc;
}
.sub-progress__step.is-unlocked .step-dot {
  background: #059669;
}
.sub-progress__step.is-unlocked {
  color: #059669;
}

/* Selected Items — fixed-height, independently scrollable list.
   The rows must NOT flex-shrink: in a column flex container with a capped
   height they would otherwise compress to fit instead of overflowing, so the
   4th item onward got squashed/clipped rather than becoming scrollable. */
.sub-summary__items-scroll {
  height: auto;
  max-height: 264px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 18px;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.bundle-row { flex: 0 0 auto; }

/* Keep a slim visible scrollbar so it's discoverable that the list scrolls.
   This intentionally overrides the .no-scrollbar utility on this element. */
.sub-summary__items-scroll.no-scrollbar {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(54,54,54,0.28) transparent !important;
  -ms-overflow-style: auto !important;
}
.sub-summary__items-scroll.no-scrollbar::-webkit-scrollbar {
  display: block !important;
  width: 5px;
}
.sub-summary__items-scroll.no-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.sub-summary__items-scroll.no-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(54,54,54,0.28);
  border-radius: 0px;
}
.sub-summary__items-scroll.no-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(54,54,54,0.45);
}
.sub-summary__empty-state {
  text-align: center;
  padding: 24px 12px;
  background: var(--sage-pale, #F1F1F1);
  border-radius: 0px;
}
.empty-icon {
  display: inline-flex;
  color: var(--ink-soft, #777);
  margin-bottom: 8px;
}
.empty-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0 0 4px 0;
}
.empty-sub {
  font-size: 0.78rem;
  color: var(--ink-soft, #666);
  margin: 0;
}

.bundle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--sage-pale, #F1F1F1);
  border-radius: 0px;
}
.bundle-row__img {
  width: 42px;
  height: 42px;
  border-radius: 0px;
  object-fit: cover;
  background: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage-deep, #363636);
}
.bundle-row__info {
  flex: 1;
  min-width: 0;
}
.bundle-row__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink, #363636);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px 0;
}
.bundle-row__price {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sage-deep, #363636);
}
.bundle-row__ctrls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bundle-row__btn {
  width: 26px;
  height: 26px;
  border-radius: 0px;
  border: none;
  background: transparent;
  color: var(--ink, #111111);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 180ms ease;
}
.bundle-row__btn:hover {
  background: var(--ink, #111111);
  color: #ffffff;
}
.bundle-row__qty {
  font-size: 0.8rem;
  font-weight: 700;
}

/* Frequency Radios */
.sub-summary__freq {
  margin-bottom: 18px;
}
.sub-summary__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink, #363636);
  display: block;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sub-summary__freq-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.freq-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--stone, #E7E5E2);
  border-radius: 0px;
  cursor: pointer;
  transition: all 150ms ease;
}
.freq-card input {
  margin-top: 3px;
  accent-color: var(--sage-deep, #363636);
}
.freq-card:hover {
  border-color: var(--sage-deep, #363636);
}
.freq-card.is-selected {
  border-color: var(--sage-deep, #363636);
  background: rgba(54,54,54, 0.04);
}
.freq-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.freq-card__title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink, #363636);
}
.freq-card__badge {
  font-size: 0.6rem;
  font-weight: 800;
  background: var(--sage-deep, #363636);
  color: #fff;
  padding: 2px 6px;
  border-radius: 0px;
}
.freq-card__badge--soft {
  background: var(--stone, #E7E5E2);
  color: var(--ink, #363636);
}
.freq-card__sub {
  font-size: 0.72rem;
  color: var(--ink-soft, #666);
  display: block;
}

/* Totals */
.sub-summary__totals {
  border-top: 1px solid var(--stone, #E7E5E2);
  padding-top: 12px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-summary__line {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-soft, #666);
}
.sub-summary__line--discount {
  color: #059669;
  font-weight: 600;
}
.sub-summary__free-shipping {
  color: #059669;
  font-weight: 700;
}
.sub-summary__line--final {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink, #363636);
  border-top: 1px dashed var(--stone, #E7E5E2);
  padding-top: 8px;
  margin-top: 4px;
}

/* Checkout CTA */
.sub-summary__checkout-btn {
  border-radius: 0px !important;
  height: 48px;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sub-summary__guarantee {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--ink-soft, #666);
  text-align: center;
}
.guarantee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* END_SECTION:main-subscription */

/* START_SECTION:newsletter (INDEX:51) */
.newsletter { background: var(--nl-bg); color: var(--nl-fg); padding-block: clamp(60px, 8vw, 100px); }
.newsletter__inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.newsletter__eyebrow { color: color-mix(in srgb, var(--nl-fg) 70%, var(--terracotta)); }
.newsletter__title { font-size: clamp(30px, 4vw, 56px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; max-width: 18ch; }
.newsletter__sub { max-width: 44ch; color: color-mix(in srgb, var(--nl-fg) 82%, transparent); }
.newsletter__form { width: 100%; max-width: 480px; margin-top: 10px; }
.newsletter__field { display: flex; gap: 10px; }
.newsletter__field input { flex: 1; min-width: 0; padding: 15px 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--nl-fg) 40%, transparent); background: color-mix(in srgb, var(--nl-fg) 6%, transparent); color: var(--nl-fg); }
.newsletter__field input::placeholder { color: color-mix(in srgb, var(--nl-fg) 55%, transparent); }
.newsletter__field input:focus-visible { outline-color: var(--nl-fg); }
.newsletter__btn { flex: none; }
.newsletter__disclaimer { margin-top: 12px; font-size: 0.8rem; color: color-mix(in srgb, var(--nl-fg) 65%, transparent); }
.newsletter__success { display: inline-flex; align-items: center; gap: 12px; font-size: 1.15rem; }
.newsletter__success-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: color-mix(in srgb, var(--nl-fg) 12%, transparent); color: var(--terracotta); animation: nlPop 0.55s var(--ease-spring) both; }
@keyframes nlPop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: scale(1) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .newsletter__success-check { animation: none; } }
.newsletter__error { color: #F2C4AC; font-size: 0.85rem; }
@media (max-width: 560px) { .newsletter__field { flex-direction: column; } .newsletter__btn { width: 100%; } }
/* END_SECTION:newsletter */

/* START_SECTION:pdp-image-with-text (INDEX:57) */
.pdp-bento-wrapper {
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
  position: relative;
  font-family: var(--font-body);
}

.pdp-bento__container {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px);
}

.pdp-bento__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto clamp(32px, 5vw, 56px);
}

.pdp-bento__subheading {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C85A32;
  margin-bottom: 10px;
}

.pdp-bento__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  color: inherit;
}

/* BENTO GRID LAYOUT - 3 COLUMNS, NO DEAD SPACES */
.pdp-bento__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

@media (max-width: 900px) {
  /* Horizontal swipeable row instead of a stacked single column, so cards
     stay readable within the viewport instead of a long vertical scroll. */
  .pdp-bento__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: 4px;
  }
  .pdp-bento__grid::-webkit-scrollbar {
    display: none;
  }
}

/* CARD COMMON STYLES */
.pdp-bento-card {
  position: relative;
  border-radius: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 36px rgba(0,0,0,0.05);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  isolation: isolate;
}

.pdp-bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 56px rgba(0,0,0,0.1);
}

.pdp-bento-card:hover .pdp-bento__img {
  transform: scale(1.05);
}

/* CARD COLOR SCHEMES */
.pdp-bento-card[data-scheme="white"] {
  background: #FFFFFF;
  color: #363636;
  border: 1px solid rgba(0,0,0,0.08);
}
.pdp-bento-card[data-scheme="cream"] {
  background: #F1F1F1;
  color: #363636;
}
.pdp-bento-card[data-scheme="sage"] {
  background: #363636;
  color: #FFFFFF !important;
}
.pdp-bento-card[data-scheme="sage"] .pdp-bento__title,
.pdp-bento-card[data-scheme="sage"] .pdp-bento__body,
.pdp-bento-card[data-scheme="sage"] .pdp-bento__body p,
.pdp-bento-card[data-scheme="sage"] .pdp-bento__body *,
.pdp-bento-card[data-scheme="sage"] .pdp-bento__badge {
  color: #FFFFFF !important;
}
.pdp-bento-card[data-scheme="sage"] .pdp-bento__btn {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
.pdp-bento-card[data-scheme="terracotta"] {
  background: #E1E0DF;
  color: #363636;
}
.pdp-bento-card[data-scheme="stone"] {
  background: #E7E5E2;
  color: #363636;
}

/* CARD PLACEMENT IN 5-CARD BENTO */
.pdp-bento-card--medium_img,
.pdp-bento-card--text_only {
  grid-column: span 1;
}

.pdp-bento-card--feature {
  grid-column: span 2;
}

@media (max-width: 900px) {
  .pdp-bento-card--feature,
  .pdp-bento-card--medium_img,
  .pdp-bento-card--text_only {
    flex: 0 0 85%;
    max-width: 85%;
    scroll-snap-align: start;
  }
}

@media (min-width: 901px) {
  .pdp-bento-card--feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
/* MEDIA & IMAGES - STANDARDIZED SPACING */
.pdp-bento__media-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 260px;
  background: rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 901px) {
  .pdp-bento-card--feature .pdp-bento__media-wrap {
    height: 100%;
    min-height: 320px;
  }
}

.pdp-bento__media-wrap--top {
  height: 260px;
  min-height: 260px;
}

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

/* Phones: show each photo whole at its own proportions instead of a fixed crop. */
@media (max-width: 900px) {
  .pdp-bento__media-wrap,
  .pdp-bento__media-wrap--top {
    height: auto;
    min-height: 0;
    display: block;
  }
  .pdp-bento__img {
    height: auto;
    object-fit: contain;
  }
}

/* BADGES */
.pdp-bento__badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 2;
}

.pdp-bento__badge--floating {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #181712;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.pdp-bento__badge--pill {
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  margin-top: auto;
  align-self: flex-start;
}

.pdp-bento-card[data-scheme="white"] .pdp-bento__badge--pill,
.pdp-bento-card[data-scheme="cream"] .pdp-bento__badge--pill,
.pdp-bento-card[data-scheme="stone"] .pdp-bento__badge--pill {
  background: rgba(0, 0, 0, 0.08);
}

/* CONTENT BOXES - 100% STANDARDIZED SPACING & PADDING */
.pdp-bento__content {
  padding: clamp(28px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  flex: 1;
  height: 100%;
}

.pdp-bento__eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 8px;
}

.pdp-bento__eyebrow--bright {
  color: #F4B41A;
  opacity: 1;
}

/* STANDARDIZED TYPOGRAPHY FOR ALL CARD TITLES */
.pdp-bento__title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px 0;
  color: inherit;
}

.pdp-bento__body {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.88;
  margin: 0;
}

.pdp-bento__stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.pdp-bento__footer-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* BUTTONS & FORMS */
.pdp-bento__cta-wrap {
  margin-top: auto;
}

.pdp-bento__cart-form {
  margin: 0;
}

.pdp-bento__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: all 0.25s ease;
  text-decoration: none;
}

.pdp-bento__btn.btn--primary {
  background: var(--ink, #181712);
  color: #FFFFFF;
  border: 2px solid var(--ink, #181712);
}

.pdp-bento-card[data-scheme="sage"] .pdp-bento__btn.btn--primary,
.pdp-bento-card[data-scheme="terracotta"] .pdp-bento__btn.btn--primary {
  background: #FFFFFF;
  color: #181712;
  border-color: #FFFFFF;
}

.pdp-bento__btn:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.pdp-bento__btn.is-loading {
  opacity: 0.7;
  pointer-events: none;
}
/* END_SECTION:pdp-image-with-text */

/* START_SECTION:reviews (INDEX:61) */
.reviews-widget { background: var(--rv-bg); color: var(--rv-fg); padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(16px, 2vw, 28px); }
.reviews-widget__head { max-width: 50rem; margin-bottom: clamp(16px, 3vw, 24px); text-align: center; margin-inline: auto; }
.reviews-widget__title { margin-top: 12px; font-family: var(--font-heading); font-size: clamp(36px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.reviews-widget__sub { margin-top: 12px; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.6; opacity: 0.9; max-width: 44rem; margin-inline: auto; }
.reviews-widget__content { width: 100%; margin-bottom: clamp(16px, 3vw, 24px); }

/* Grid for native quotes */
.reviews-widget__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 40px;
}
@media (max-width: 900px) {
  .reviews-widget__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}
@media (max-width: 600px) {
  .reviews-widget__grid { grid-template-columns: 1fr; gap: 48px; }
}

/* Individual Quote Card */
.review-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.review-card__stars {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-bottom: 24px;
}
.review-card__stars svg { width: 16px; height: 16px; }
.review-card__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 20px;
  line-height: 1.35;
}
.review-card__body {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0.85;
  margin-bottom: 24px;
  flex-grow: 1;
}
.review-card__author {
  font-family: var(--font-body);
  font-size: 0.85rem;
}
.review-card__name {
  font-weight: 500;
}
.review-card__verified {
  opacity: 0.7;
  font-style: italic;
}

.reviews-widget__placeholder { padding: 60px 20px; text-align: center; background: rgba(0,0,0,0.03); border: 2px dashed rgba(0,0,0,0.1); border-radius: 12px; font-weight: 500; }
.reviews-widget__cta-wrapper { text-align: center; }
.reviews-widget__cta { min-width: 200px; display: inline-block; padding: 16px 32px; background: var(--sage, #8A9A80); color: #fff; text-decoration: none; font-weight: 600; border-radius: 999px; transition: opacity 0.2s; border: none; letter-spacing: 0.02em; }
.reviews-widget__cta:hover { opacity: 0.9; }
/* END_SECTION:reviews */

/* START_SECTION:split-banner (INDEX:63) */
/* Width + centring come from .nc-banner-frame (shared banner frame in
   base.css). Banners stack end to end: no margin or padding between them. */
.split {
  background: var(--split-bg);
  color: var(--split-fg);
  overflow: hidden;
  padding-block: 0px !important;
  margin-block: 0px !important;
}

.section-split,
.shopify-section:has(.split) {
  margin: 0 !important;
  padding: 0 !important;
}

.section-split + .section-split,
.shopify-section:has(.split) + .shopify-section:has(.split),
.section-ingredients-pinned + .section-split,
.shopify-section:has(.ing-split) + .shopify-section:has(.split),
.section-split + .section-ingredients-pinned,
.shopify-section:has(.split) + .shopify-section:has(.ing-split) {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

.section-founders-editorial + .section-split,
.shopify-section:has(.founders-westman) + .shopify-section,
.shopify-section:has(.founders-westman) + .shopify-section:has(.split),
div[id*="founders_note"] + div,
div[id*="founders-editorial"] + div,
.section-founders-editorial + * {
  margin-top: 12px !important;
  padding-top: 0px !important;
}

@media (max-width: 900px) {
  .section-founders-editorial + .section-split,
  .shopify-section:has(.founders-westman) + .shopify-section,
  .shopify-section:has(.founders-westman) + .shopify-section:has(.split),
  div[id*="founders_note"] + div,
  div[id*="founders-editorial"] + div,
  .section-founders-editorial + * {
    margin-top: 0px !important;
    padding-top: 0px !important;
  }
}

.section-founders-editorial + .section-split .split,
.shopify-section:has(.founders-westman) + .shopify-section .split,
.shopify-section:has(.founders-westman) + .shopify-section:has(.split) .split,
div[id*="founders_note"] + div .split,
div[id*="founders-editorial"] + div .split,
.section-founders-editorial + .shopify-section .split,
.section-split + .section-split .split,
.shopify-section:has(.split) + .shopify-section:has(.split) .split,
.shopify-section:has(.ing-split) + .shopify-section:has(.split) .split {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Bundle product pages: the banner connects straight to the lifestyle video above it (no ingredients panel in between) */
.template-product .split.split--joins-above {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* When split banners are consecutive or adjacent to ingredient split, remove ALL vertical spacing from Shopify wrappers */
.section-split,
.shopify-section:has(.split) {
  margin-block: 0 !important;
  padding-block: 0 !important;
}

.split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: var(--banner-min-h);
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  padding-block: 0px !important;
}
.split__media { position: relative; overflow: hidden; border-radius: 0px !important; box-shadow: none !important; width: 100%; height: 100%; min-height: var(--banner-min-h); }
.split__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); display: block; }
.split__grid:hover .split__img { transform: none; }
.split__content { 
  display: flex; 
  align-items: center; 
  justify-content: center;
}
.split--image-left .split__media { order: 1; }
.split--image-left .split__content { order: 2; justify-content: center; }
.split--image-right .split__media { order: 2; }
.split--image-right .split__content { order: 1; justify-content: center; }

.split__inner { 
  max-width: 540px; 
  width: 100%; 
  padding: clamp(20px, 3.5vw, 48px) clamp(20px, 3.5vw, 48px); 
  display: flex; 
  flex-direction: column; 
  gap: 8px; /* Tight minimal spacing like lifestyle video */
}

.split__heading { 
  font-family: var(--font-heading, Georgia, serif); 
  font-size: clamp(1.75rem, 3vw, 2.75rem); 
  line-height: 1.06; 
  letter-spacing: 0.04em; 
  text-transform: lowercase !important; /* ALL CAPITAL */
  text-wrap: balance; 
  font-weight: 500; 
  color: var(--split-fg, #111111);
  margin: 0; 
}

.split__body { 
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem);
  font-weight: 500;
  line-height: 1.35; /* Small compact inline line spacing */
  letter-spacing: 0.04em;
  text-transform: lowercase !important; /* ALL CAPITAL */
  color: color-mix(in srgb, var(--split-fg, #111111) 75%, transparent); 
  max-width: 48ch; 
  margin: 0;
}
.split__body p,
.split__body * { 
  margin: 0; 
  text-transform: lowercase !important;
}
.split__body p + p { margin-top: 8px; }
.split__cta { margin-top: 12px; align-self: flex-start; }

.split .btn--gray,
.split .btn--grey,
.template-page .split .split__cta,
.template-page-about .split .split__cta,
.page-about .split .split__cta,
body[class*="about"] .split .split__cta,
div[id*="split"] .split__cta {
  background: #555555 !important;
  color: #FFFFFF !important;
  border: 1px solid #555555 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}

.split .btn--gray:hover,
.split .btn--grey:hover,
.template-page .split .split__cta:hover,
.template-page-about .split .split__cta:hover,
.page-about .split .split__cta:hover,
body[class*="about"] .split .split__cta:hover,
div[id*="split"] .split__cta:hover {
  background: #333333 !important;
  color: #FFFFFF !important;
  border-color: #333333 !important;
  transform: translateY(-1px) !important;
}

.split .btn--gray *,
.split .btn--grey *,
.template-page .split .split__cta *,
.template-page-about .split .split__cta *,
.page-about .split .split__cta *,
body[class*="about"] .split .split__cta *,
div[id*="split"] .split__cta * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  fill: none !important;
}

/* ── Editorial style (About page copy): sentence-case Circe heading, short
      rule, small Campton body, large Circe pull-quote. ── */
.split--editorial .split__inner { max-width: 580px; gap: 0; }
.split--editorial .split__heading {
  font-size: var(--fs-heading-xl);
  line-height: var(--lh-heading-xl);
  letter-spacing: -0.01em;
  text-transform: none !important;
  font-weight: 500;
}
.split__rule {
  display: block;
  width: 44px;
  height: 2px;
  background: var(--rule-olive, #8B8553);
  margin: 18px 0 22px;
}
.split--editorial .split__body {
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  text-transform: none !important;
  color: color-mix(in srgb, var(--split-fg, #111111) 85%, transparent);
  max-width: 52ch;
}
.split--editorial .split__body p,
.split--editorial .split__body * { text-transform: none !important; }
.split--editorial .split__body p + p { margin-top: 14px; }
.split__quote {
  margin: 18px 0 0;
  font-family: var(--font-heading, Georgia, serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--split-fg, #111111);
  text-indent: -0.42em; /* hang the opening quote mark */
  text-wrap: pretty;
}
.split--editorial .split__cta { margin-top: 26px; }

/* Editorial blocks: large statement / small supporting copy, separated by short rules */
.split__statement,
.split__copy {
  margin: 0;
  color: var(--split-fg, #111111);
  text-transform: none !important;
}
.split__statement p,
.split__copy p {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  max-width: none;
  text-transform: none !important;
}
.split__statement {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.split__statement p + p { margin-top: 0.35em; }
.split__copy {
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(0.92rem, 1.05vw, 1rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--split-fg, #111111) 85%, transparent);
  max-width: 52ch;
}
.split__copy p + p { margin-top: 0.7em; }

/* Responsive image switching when both mobile and desktop images exist */
.split__img--mobile { display: block; }
.split__img--desktop { display: none; }

@media (min-width: 768px) {
  .split__img--mobile { display: none !important; }
  .split__img--desktop { display: block !important; }
}

@media (max-width: 1023px) {
  .split {
    padding-block: 0 !important;
    margin-block: 0 !important;
  }
  .section-split + .section-split .split,
  .shopify-section:has(.split) + .shopify-section:has(.split) .split,
  .shopify-section:has(.ing-split) + .shopify-section:has(.split) .split {
    padding-top: 0 !important;
  }
  .split__grid { 
    grid-template-columns: minmax(0, 100%); 
    min-height: 0; 
    gap: 0 !important; 
    padding-inline: 0 !important; 
    padding-block: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
  }
  .split--image-right .split__media,
  .split--image-left .split__media {
    order: -1;
  }
  /* Optional: copy above the image once the banner stacks */
  .split--mobile-text-first .split__content { order: 1; }
  .split--mobile-text-first .split__media { order: 2; }
  /* Text now follows the banner above it, so give it room before and after */
  .split--mobile-text-first .split__inner {
    padding-top: clamp(40px, 11vw, 56px) !important;
    padding-bottom: clamp(32px, 9vw, 44px) !important;
  }
  /* Stacked: the photo keeps its own proportions, so nothing is cropped. */
  .split__media {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
    display: block;
    position: relative;
    border-radius: 0px !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  .split__img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
  .split__inner { 
    padding: clamp(18px, 4vw, 28px) 16px !important; 
    max-width: 100%; 
    width: 100%; 
    box-sizing: border-box; 
    gap: 8px;
  }
  .split__heading {
    font-size: clamp(1.3rem, 4.8vw, 1.75rem);
  }
  .split__body {
    font-size: 0.78rem;
  }
}

@media (max-width: 767px) {
  .split__media {
    height: auto !important;
    min-height: 0 !important;
  }
  .split__inner {
    padding: 20px 16px !important;
  }
}
/* END_SECTION:split-banner */

/* START_SECTION:stat-bar (INDEX:64) */
.stat-split {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(32px, 4vw, 56px);
  border-radius: 0;
  margin-inline: clamp(16px, 3vw, 32px);
  margin-block: 20px;
  overflow: hidden;
}
.stat-split__inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.stat-split__copy { display: flex; flex-direction: column; }
.stat-split__headline { font-family: var(--font-heading); font-size: clamp(2.2rem, 3.5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 24px 0; color: var(--fg); }
.stat-split__highlight { color: var(--terracotta, #B08D57); }
.stat-split__body { font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.6; opacity: 0.9; margin-bottom: 40px; max-width: 48ch; }
.stat-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; margin-bottom: 40px; }
.stat-split__item { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.stat-split__value { font-family: var(--font-heading); font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 400; line-height: 1; color: var(--fg); }
.stat-split__caption { font-size: 0.85rem; line-height: 1.6; opacity: 0.8; margin: 0; }
.stat-split__caption p { margin: 0; }
.stat-split__cta-wrap { margin-top: 10px; }
.stat-split__cta { background: var(--fg, #363636); color: var(--bg, #FFFFFF); border-radius: 0; padding: 16px 36px; font-weight: 600; letter-spacing: 0.02em; border: none; text-transform: none; font-size: 1rem; transition: opacity 0.3s ease, transform 0.3s ease; }
.stat-split__cta:hover { opacity: 0.9; transform: translateY(-2px); color: var(--bg, #FFFFFF); }
.stat-split__media { width: 100%; position: relative; }
.stat-split__img { width: 100%; height: auto; border-radius: 0; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .stat-split__inner { grid-template-columns: 1fr; gap: 40px; }
}

/* Reviews CSS */
.reviews-widget__head { max-width: 50rem; margin-bottom: clamp(16px, 2.5vw, 24px); text-align: center; margin-inline: auto; }
.reviews-widget__title { margin-top: 8px; font-family: var(--font-heading); font-size: clamp(28px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.02em; font-weight: 500; }
.reviews-widget__sub { margin-top: 10px; font-family: var(--font-body); font-size: 1rem; line-height: 1.5; opacity: 0.9; max-width: 44rem; margin-inline: auto; }
.reviews-widget__content { width: 100%; margin-bottom: clamp(16px, 2.5vw, 24px); }

.reviews-widget__grid {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reviews-widget__grid::-webkit-scrollbar { display: none; }

.review-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 0 calc(33.333% - 14px);
  scroll-snap-align: start;
  padding: clamp(20px, 3vw, 28px) clamp(16px, 2.5vw, 24px);
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.04);
}

.reviews-nav__btn:hover {
  background: var(--fg, #363636) !important;
  color: var(--bg, #FFFFFF) !important;
  border-color: var(--fg, #363636) !important;
}

@media (max-width: 900px) {
  .review-card { flex: 0 0 calc(50% - 15px); }
}
@media (max-width: 600px) {
  .review-card { flex: 0 0 100%; }
}
.reviews-widget__cta-wrapper { text-align: center; }
.reviews-widget__cta { min-width: 200px; display: inline-block; padding: 16px 32px; background: var(--fg, #363636); color: var(--bg, #FFFFFF); text-decoration: none; font-weight: 600; border-radius: 0; transition: opacity 0.2s; border: none; letter-spacing: 0.02em; }
.reviews-widget__cta:hover { opacity: 0.9; }
/* END_SECTION:stat-bar */

/* START_SECTION:trending-tabs (INDEX:67) */
.trending-tabs {
  background: var(--bg);
  padding-block: var(--section-pad, 96px);
}
.trending-tabs__header {
  margin-bottom: 10px;
  text-align: left;
  width: 100%;
}
.trending-tabs__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow, 0.75rem);
  letter-spacing: var(--tracking-eyebrow, 0.14em);
  color: var(--ink-soft);
  margin-bottom: 4px;
  text-align: left;
}
.trending-tabs__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--ink);
  margin: 0 0 8px 0;
  text-transform: none;
  text-align: left;
}

.trending-tabs__tab-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.trending-tabs__tab-btn:first-child {
  padding-left: 0;
}
.trending-tabs__tab-btn {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 8px;
  transition: color 200ms ease;
}
.trending-tabs__tab-btn.is-active,
.trending-tabs__tab-btn:hover {
  color: var(--ink);
}
.trending-tabs__tab-divider {
  color: var(--hairline);
  font-size: 0.8rem;
}

.trending-tabs__panel {
  display: none;
}
.trending-tabs__panel.is-active {
  display: block;
  animation: fadeIn 300ms ease;
}

.trending-tabs__rail { position: relative; }
.trending-tabs__arrows {
  position: absolute;
  top: -50px;
  right: 0;
  display: flex !important;
  gap: 8px;
  z-index: 10;
}
.trending-tabs__arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--stone, #e2e2e2);
  border-radius: 999px;
  background: #FFFFFF;
  color: #111111;
  cursor: pointer;
  transition: all 0.2s ease;
}
.trending-tabs__arrow:hover { background: #111111; color: #FFFFFF; border-color: #111111; }
.trending-tabs__arrow:disabled { opacity: 0.3; cursor: default; }
.trending-tabs__arrow:disabled:hover { background: none; color: inherit; border-color: var(--stone); }

.trending-tabs__track {
  display: flex; gap: var(--sp-6); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter-page); padding-bottom: 6px; cursor: grab; -webkit-overflow-scrolling: touch;
}
.trending-tabs__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.trending-tabs__slide { flex: 0 0 clamp(240px, 30%, 340px); scroll-snap-align: start; }

@media (max-width: 767px) {
  .trending-tabs__slide { flex-basis: 78%; }
}
/* END_SECTION:trending-tabs */

/* START_SECTION:ugc-strip (INDEX:69) */
/* ═══════════════════════════════════════
   UGC STRIP — premium editorial aesthetic
   ═══════════════════════════════════════ */
.ugc { background: var(--ugc-bg); color: var(--ugc-fg); padding-block: var(--section-pad); }
/* Same left/right line as Nimble Care Standard and The Thread
   (--page-edge-* in snippets/css-variables.liquid). */
.ugc .ugc__container {
  max-width: var(--page-edge-max, 1360px);
  padding-inline: var(--page-edge-pad, clamp(16px, 4vw, 48px));
}
/* .section--card adds a 12px side margin that would push this panel off the
   shared line, so it is dropped here. */
.ugc.section--card { margin-inline: 0; }
.ugc__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: var(--sp-6); flex-wrap: wrap; }
.ugc__title { font-size: 2.2rem; font-weight: 500; text-transform: none; margin: 0; letter-spacing: -0.02em; }
.ugc__head-right { display: flex; align-items: center; gap: 16px; }
.ugc__handle { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ugc__handle:hover { background: var(--ugc-fg); color: var(--ugc-bg); }

/* Navigation arrows */
.ugc__nav { display: flex; gap: 8px; }
.ugc__nav-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12); background: #fff;
  display: grid; place-items: center; cursor: pointer;
  color: inherit;
  transition: background 0.25s, border-color 0.25s, transform 0.15s, opacity 0.25s;
}
.ugc__nav-btn:hover:not(:disabled) { background: var(--ugc-fg, #111); color: var(--ugc-bg, #fff); border-color: transparent; transform: scale(1.06); }
.ugc__nav-btn:active:not(:disabled) { transform: scale(0.95); }
.ugc__nav-btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.ugc__nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* Scrollable track */
.ugc__track {
  display: flex; gap: 4px; overflow-x: auto;
  overflow-y: hidden; /* sideways only: the row must not drag up and down or catch page swipes */
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.ugc__track::-webkit-scrollbar { display: none; }

.ugc__cell {
  flex: 0 0 calc(25% - 3px); scroll-snap-align: start;
  position: relative; display: block; overflow: hidden; border-radius: 4px;
}
.ugc__img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.ugc__cell:hover .ugc__img { transform: scale(1.05); }
.ugc__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 24px 16px; text-align: center; color: #FFFFFF; background: linear-gradient(180deg, transparent 40%, rgba(54, 54, 54, 0.65) 100%); opacity: 0; transition: all 400ms var(--ease); }
.ugc__overlay--always { opacity: 1; }
.ugc__cell:hover .ugc__overlay { opacity: 1; background: rgba(54, 54, 54, 0.55); justify-content: center; }
.ugc__caption { font-size: 1.1rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; color: #FFFFFF; font-family: var(--font-body); text-shadow: 0 1px 4px rgba(0,0,0,0.35); }

@media (max-width: 767px) {
  .ugc__cell { flex: 0 0 78%; }
  .ugc__head { flex-direction: column; align-items: flex-start; }
  .ugc__head-right { width: 100%; justify-content: space-between; }
}
/* END_SECTION:ugc-strip */

/* START_SECTION:usp-strip (INDEX:70) */
.usp-strip { 
  overflow: hidden; 
  display: flex;
  justify-content: center;
}
.usp-strip__image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* END_SECTION:usp-strip */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:banner-video (INDEX:72) */
.banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.banner-video.is-playing { opacity: 1; }
@media (max-width: 767px) { .banner-video--desktop { display: none; } }
@media (min-width: 768px) { .banner-video--mobile { display: none; } }
/* END_SNIPPET:banner-video */