/* ==========================================================================
   LUMIERE SOFT LUXE - SHOPLINE OS 3.0
   Palette derived from: DISSH #F8F5F1/#3C302A, RIXO #FDFCF7/#F0ECE3,
   Mejuri #ECE9E0/#EAC37C, TOTEME #F1EBE6/#CAB6A0, STAUD (Cormorant serif)
   Mobile-first; desktop fully adapted from 900px up.
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: 1.66;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.015em;
}
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--c-ink); color: var(--c-bg); padding: 12px 20px; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--c-brass); outline-offset: 2px; }

/* ---------- 2. Layout ---------- */
/* CRITICAL: SHOPLINE wraps every section in <div class="section">.
   Never put padding on .section or the header/hero/announcement all break. */
.section { padding: 0; }
.main { min-height: 50vh; }

.page-width {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding: 0 10px;
}
.page-width--narrow { max-width: 820px; }

.sec { padding: 30px 0 0; }
.sec--tight { padding: 20px 0 0; }
.sec--flush { padding: 0; }
.sec--surface { background: var(--c-surface); }
.sec--ink { background: var(--c-ink); color: var(--c-bg); }
.sec--dark { background: var(--c-ink); color: var(--c-bg); }
.sec--bordered { border-top: 1px solid var(--c-line); }
.sec--dark .section-head__link,
.sec--ink .section-head__link { border-color: currentColor; }

/* ---------- 3. Typography ---------- */
.h-display {
  font-family: var(--f-display);
  font-size: clamp(2.1rem, 6.5vw, var(--fs-display));
  line-height: 1.02; letter-spacing: -0.02em; font-weight: 400;
}
.h1 {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 4.5vw, var(--fs-h1));
  line-height: 1.06; letter-spacing: -0.02em; font-weight: 400;
}
.h2 {
  font-family: var(--f-display);
  font-size: clamp(1.375rem, 3.2vw, var(--fs-h2));
  line-height: 1.12; letter-spacing: -0.018em; font-weight: 400;
}
.h3 {
  font-family: var(--f-display);
  font-size: clamp(1.125rem, 2.6vw, 1.6rem);
  line-height: 1.2; letter-spacing: -0.012em; font-weight: 400;
}
.h4 {
  font-family: var(--f-body); font-size: 0.625rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 500;
}
.eyebrow {
  font-family: var(--f-body); font-size: 0.59375rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500;
}
.lede { font-size: 0.8125rem; color: var(--c-ink-soft); max-width: 60ch; line-height: 1.75; font-weight: 300; }
.muted { color: var(--c-ink-soft); }
.small { font-size: 0.75rem; }
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

.rule { height: 1px; background: var(--c-line); border: 0; margin: 0; }

.section-head { margin-bottom: 12px; padding: 0 10px; }
.section-head--center { text-align: center; padding: 0 10px; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-head__title { font-family: var(--f-display); font-size: 1.3125rem; font-weight: 400; }
.section-head__link {
  font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; border-bottom: 1px solid var(--c-line); padding-bottom: 2px; white-space: nowrap;
  color: var(--c-ink-soft); transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.section-head__link:hover { border-color: var(--c-ink); color: var(--c-ink); }

/* ---------- 4. Marquee ---------- */
.marquee {
  background: var(--c-ink); color: var(--c-bg);
  overflow: hidden; white-space: nowrap; padding: 11px 0;
}
.marquee__track {
  display: inline-flex; gap: 34px;
  animation: marquee-scroll var(--marquee-speed, 32s) linear infinite;
  will-change: transform;
}
.marquee__item { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 26px;
  background: var(--c-ink); color: var(--c-btn-text);
  border: 1px solid var(--c-ink); border-radius: 2px;
  font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.btn:hover { background: transparent; color: var(--c-ink); }
.btn--ghost { background: transparent; color: var(--c-ink); border-color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-btn-text); }
.btn--accent { background: var(--c-brass); border-color: var(--c-brass); color: #fff; }
.btn--accent:hover { background: transparent; color: var(--c-brass); }
.btn--light { background: var(--c-bg); border-color: var(--c-bg); color: var(--c-ink); }
.btn--light:hover { background: transparent; color: var(--c-bg); }
.btn--outline-light { background: transparent; border-color: rgba(247,244,239,.8); color: var(--c-bg); }
.btn--outline-light:hover { background: var(--c-bg); color: var(--c-ink); }
.btn--block { display: flex; width: 100%; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 0.59375rem; letter-spacing: 0.14em; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; }

/* ---------- 6. Announcement ---------- */
.announce {
  background: var(--c-surface); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 0.59375rem; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 500;
  position: relative;
}
.announce__rotator { position: relative; height: 30px; overflow: hidden; }
.announce__item { height: 30px; line-height: 30px; }
.announce__close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; line-height: 1; color: var(--c-ink-soft); }

/* ---------- 7. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
}
/* Transparent header on the home page: floats over the hero, then
   switches back to the solid bone background once the hero scrolls away. */
.tpl-index .header {
  position: sticky; top: 0;
  background: transparent; border-bottom-color: transparent;
  transition: background 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease);
}
.tpl-index .header .nav__link,
.tpl-index .header .header__logo,
.tpl-index .header .header__logo a,
.tpl-index .header .icon-btn { color: #fff; }
.tpl-index .header .cart-count { background: var(--c-brass); color: #fff; }
.tpl-index .header.is-scrolled {
  background: var(--c-bg);
  border-bottom-color: var(--c-line);
  box-shadow: 0 8px 30px rgba(28,26,24,.07);
}
.tpl-index .header.is-scrolled .nav__link,
.tpl-index .header.is-scrolled .header__logo,
.tpl-index .header.is-scrolled .header__logo a,
.tpl-index .header.is-scrolled .icon-btn { color: var(--c-ink); }
.tpl-index .header.is-scrolled .cart-count { background: var(--c-ink); color: var(--c-bg); }
/* The hero slides up under the transparent header so the imagery
   reaches the very top edge of the page. Extra height compensates
   for the band hidden behind the header. */
.tpl-index .hero { margin-top: -56px; }
.tpl-index .hero--tall .hero__media,
.tpl-index .hero--overlay .hero__media { aspect-ratio: auto; height: calc(100vh - 30px); min-height: 560px; }
.tpl-index .hero--tall .hero__media::after,
.tpl-index .hero--overlay .hero__media::after {
  background: linear-gradient(to bottom, rgba(18,16,14,.52) 0%, rgba(18,16,14,.18) 22%, rgba(18,16,14,.06) 44%, rgba(18,16,14,.62) 82%, rgba(18,16,14,.82) 100%);
}
@media (min-width: 900px) {
  .tpl-index .hero { margin-top: -72px; }
  .tpl-index .hero--tall .hero__media,
  .tpl-index .hero--overlay .hero__media { height: calc(100vh - 30px); min-height: 640px; }
}
/* Three-column grid: menu | wordmark | actions. Columns never overlap
   because the middle one is a real grid track, not an absolutely
   positioned overlay. */
.header__inner {
  height: 56px; display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 8px;
  padding: 0 10px;
}
.header__logo {
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
  text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 100%;
}
.header__logo img { max-height: 34px; max-width: min(42vw, 180px); width: auto; display: block; margin: 0 auto; object-fit: contain; }
.header__left, .header__right { display: flex; align-items: center; gap: 0; min-width: 0; }
.header__left { justify-self: start; }
.header__right { justify-self: end; }
.icon-btn {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--c-ink); position: relative; border-radius: 2px;
  transition: opacity 0.2s var(--ease);
}
.icon-btn:hover { opacity: 0.6; }
.icon-btn svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.35;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto; /* never stretch inside flex rows */
}
.cart-count {
  position: absolute; top: 2px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 8px; background: var(--c-ink); color: var(--c-bg);
  font-size: 0.53125rem; font-weight: 600; line-height: 15px; text-align: center;
  transition: transform 0.42s var(--ease);
}
.cart-count.is-bump { animation: count-bump 0.42s var(--ease); }
@keyframes count-bump { 0% { transform: scale(1); } 42% { transform: scale(1.45); } 100% { transform: scale(1); } }
.burger { display: grid; }

.nav { display: none; }
.nav__item { position: relative; }
.nav__link {
  display: block; padding: 10px 0; font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500; border-bottom: 1px solid transparent;
  transition: border-color 0.22s var(--ease);
}
.nav__link:hover { border-color: var(--c-ink); }
.nav__dropdown {
  position: absolute; top: 100%; left: 0; min-width: 200px; padding: 14px 18px;
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown a { display: block; padding: 6px 0; font-size: 0.75rem; color: var(--c-ink-soft); }
.nav__dropdown a:hover { color: var(--c-ink); }

/* ---------- 8. Mobile drawer ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 60; background: var(--c-bg);
  transform: translateX(-100%); transition: transform 0.34s var(--ease-out);
  display: flex; flex-direction: column; max-width: 360px;
  box-shadow: 12px 0 40px rgba(28,26,24,.12);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--c-line); }
.mobile-nav__body { flex: 1; overflow-y: auto; padding: 8px 16px 24px; }
.mobile-nav__item { border-bottom: 1px solid var(--c-line); }
.mobile-nav__link, .mobile-nav__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 15px 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-align: left;
}
.mobile-nav__sub { display: none; padding: 0 0 12px 14px; }
.mobile-nav__item.is-active .mobile-nav__sub { display: block; }
.mobile-nav__sub a { display: block; padding: 8px 0; font-size: 0.75rem; color: var(--c-ink-soft); }
.mobile-nav__item--story .mobile-nav__link { color: var(--c-brass); font-weight: 500; }
.mobile-nav__story-arrow { font-size: 0.875rem; color: var(--c-brass); }
.mobile-nav__foot { padding: 16px; border-top: 1px solid var(--c-line); }

/* ---------- 9. Hero (full-bleed, mobile-first) ---------- */
.hero { position: relative; overflow: hidden; background: var(--c-surface); }
.hero__media { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface); }
.hero__media img, .hero__media video, .hero__media picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 20%);
  transform: scale(var(--hero-zoom, 1));
  transform-origin: var(--hero-focus-x, 50%) var(--hero-focus-y, 20%);
}
/* Desktop gets its own position/zoom; falls back to the mobile values. */
@media (min-width: 750px) {
  .hero__media img, .hero__media video, .hero__media picture > img {
    object-position: var(--hero-focus-x-d, var(--hero-focus-x, 50%)) var(--hero-focus-y-d, var(--hero-focus-y, 20%));
    transform: scale(var(--hero-zoom-d, var(--hero-zoom, 1)));
    transform-origin: var(--hero-focus-x-d, var(--hero-focus-x, 50%)) var(--hero-focus-y-d, var(--hero-focus-y, 20%));
  }
}
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__ph { position: absolute; inset: 0; background: linear-gradient(150deg, var(--c-surface), var(--c-line)); }
.hero__box { position: relative; }
.hero__inner { padding: 22px 16px 0; }
.hero__eyebrow { margin-bottom: 9px; }
.hero__title { font-family: var(--f-display); font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 10px; }
.hero__text { font-size: 0.75rem; line-height: 1.7; color: var(--c-ink-soft); font-weight: 300; max-width: 290px; margin-bottom: 16px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero--overlay .hero__inner {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 22px 34px;
  color: #fff; text-align: center;
}
.hero--overlay .hero__media { aspect-ratio: 4 / 5; }
.hero--overlay .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18,16,14,.34) 0%, rgba(18,16,14,0) 26%, rgba(18,16,14,.06) 48%, rgba(18,16,14,.62) 82%, rgba(18,16,14,.8) 100%);
}
.hero--overlay .hero__inner > * { position: relative; z-index: 2; }
.hero--overlay .hero__eyebrow { color: rgba(255,255,255,.74); }
.hero--overlay .hero__text { color: rgba(255,255,255,.84); margin-left: auto; margin-right: auto; }
.hero--overlay .hero__cta { justify-content: center; }
.hero--overlay .hero__cta .btn { height: 42px; padding: 0 20px; font-size: 0.625rem; }
.hero--overlay .hero__title em { font-style: italic; color: #EBD3AC; }
.hero__title em { font-style: italic; color: var(--c-brass); }

/* ---------- 10. Product grid & card ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 10px; padding: 0 10px; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

.card { position: relative; display: block; }
.card__media {
  display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--c-surface); border-radius: var(--radius);
}
.card__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--card-focus-x, 50%) var(--card-focus-y, 18%);
  transform: scale(var(--card-zoom, 1));
  transform-origin: var(--card-focus-x, 50%) var(--card-focus-y, 18%);
}
/* Desktop gets its own position/zoom; falls back to the mobile values. */
@media (min-width: 750px) {
  .card__media img {
    object-position: var(--card-focus-x-d, var(--card-focus-x, 50%)) var(--card-focus-y-d, var(--card-focus-y, 18%));
    transform: scale(var(--card-zoom-d, var(--card-zoom, 1)));
    transform-origin: var(--card-focus-x-d, var(--card-focus-x, 50%)) var(--card-focus-y-d, var(--card-focus-y, 18%));
  }
}
.card__img--alt { opacity: 0; transition: opacity 0.42s var(--ease); }
.card:hover .card__img--alt { opacity: 1; }
.card__ph { position: absolute; inset: 0; background: linear-gradient(150deg, var(--c-surface), var(--c-line)); }
.card__badges { position: absolute; left: 8px; top: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.badge {
  display: inline-block; font-size: 0.5rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 2px;
  background: rgba(247,244,239,.96); color: var(--c-sale); border: 1px solid rgba(158,61,48,.4);
  box-shadow: 0 2px 8px rgba(28,26,24,.08);
}
.badge--sale { color: var(--c-sale); }
.badge--soldout { color: var(--c-ink-soft); border-color: var(--c-line); }
.card__body { padding-top: 11px; }
.card__title {
  font-size: 0.8125rem; line-height: 1.42; color: var(--c-ink); font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.1em; /* keep cards aligned even with one-line titles */
}
.card__title a { color: inherit; }
.card__meta { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.card__installments { display: none; } /* remove the small instalment text */
.card__quick {
  position: static; /* sits under the product info, always visible on mobile */
  margin-top: 9px; height: 40px; display: grid; place-items: center;
  background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line);
  border-radius: 2px; font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  opacity: 1; transform: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card__quick:hover { border-color: var(--c-ink); }
.card:hover .card__quick { opacity: 1; transform: none; }
.card__quick .btn { width: 100%; height: 100%; border-radius: 0; border: 0; font-size: 0.625rem; }

.price { display: inline-flex; align-items: baseline; gap: 6px; }
.price__now { font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.price__was { font-size: 0.71875rem; color: var(--c-ink-soft); text-decoration: line-through; font-weight: 300; }

/* ---------- 11. Lookbook ---------- */
.look { display: grid; gap: 0; }
.look__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface); border-radius: var(--radius); }
.look__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look__panel { padding: 18px 10px 0; }
.look__items { display: grid; gap: 0; margin-top: 14px; }
.look__item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--c-line); }
.look__thumb { position: relative; width: 52px; height: 65px; border-radius: 3px; overflow: hidden; background: var(--c-surface); }
.look__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.look__name { font-size: 0.71875rem; line-height: 1.35; }
.look__price { font-size: 0.71875rem; font-weight: 500; }
.look__info { }

/* ---------- 12. UGC wall ---------- */
.ugc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 10px; }
.ugc__cell { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius); background: var(--c-surface); display: block; }
.ugc__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 0.5s var(--ease); }
.ugc__cell:hover img { transform: scale(1.045); }
.ugc__tag {
  position: absolute; left: 9px; bottom: 9px; font-size: 0.5625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff;
  background: rgba(28,26,24,.55); backdrop-filter: blur(4px);
  padding: 4px 7px; border-radius: 2px; max-width: calc(100% - 18px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ugc__price {
  position: absolute; right: 9px; top: 9px; font-size: 0.59375rem; font-weight: 500;
  color: var(--c-ink); background: rgba(247,244,239,.92); padding: 4px 7px; border-radius: 2px;
  letter-spacing: 0.03em;
}

/* ---------- 13. Value props ---------- */
.props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--c-line); border-block: 1px solid var(--c-line); }
.prop { background: var(--c-bg); padding: 17px 14px; text-align: center; }
.prop__icon { width: 20px; height: 20px; margin: 0 auto 9px; color: var(--c-brass); }
.prop__title { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.prop__text { font-size: 0.625rem; color: var(--c-ink-soft); margin-top: 5px; font-weight: 300; line-height: 1.55; }

/* ---------- 14. Brand story ---------- */
.story__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface); }
.story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story__body { padding: 24px 16px; text-align: center; }
.story__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.story__stat-num { font-family: var(--f-display); font-size: 1.5rem; font-weight: 400; }
.story__stat-label { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink-soft); margin-top: 4px; }
.story__sign { margin-top: 18px; font-family: var(--f-display); font-style: italic; font-size: 1rem; }

/* ---------- 15. Newsletter ---------- */
.newsletter { background: var(--c-ink); color: var(--c-bg); padding: 32px 16px 34px; text-align: center; }
.newsletter .h2 { font-style: normal; }
.newsletter .h2 em { font-style: italic; color: var(--c-brass); }
.newsletter__note { font-size: 0.71875rem; color: rgba(247,244,239,.66); font-weight: 300; max-width: 290px; margin: 11px auto 18px; line-height: 1.72; }
.newsletter__form { display: flex; border-bottom: 1px solid rgba(247,244,239,.32); max-width: 300px; margin: 0 auto; }
.newsletter__form input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--c-bg);
  font-size: 0.71875rem; padding: 12px 0; letter-spacing: 0.04em; min-width: 0;
}
.newsletter__form input::placeholder { color: rgba(247,244,239,.42); }
.newsletter__form button {
  background: transparent; border: 0; color: var(--c-brass);
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0 0 0 12px; cursor: pointer;
}

/* ---------- 16. Footer ---------- */
.footer { background: var(--c-ink); color: var(--c-bg); padding: 26px 10px 28px; }
.footer__brand { font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 11px; }
.footer__about { font-size: 0.6875rem; color: rgba(247,244,239,.58); line-height: 1.72; max-width: 280px; font-weight: 300; }
.footer__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 24px; }
.footer__title { font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,244,239,.42); margin-bottom: 11px; font-weight: 500; }
.footer__links a { display: block; font-size: 0.71875rem; color: rgba(247,244,239,.86); margin-bottom: 9px; font-weight: 300; }
.footer__links a:hover { color: var(--c-bg); }
.footer__social { display: flex; gap: 14px; margin-top: 20px; }
.footer__social a { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,244,239,.7); }
.footer__bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(247,244,239,.16); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer__pay { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.footer__pay > svg {
  width: auto; height: 20px; display: block;
  background: rgba(247,244,239,.9); border-radius: 3px;
  padding: 3px 5px; box-sizing: content-box;
}

/* ---------- 17. Product page (PDP) ---------- */
.pdp-wrap { padding-bottom: 8px; }
.pdp-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pdp-gallery::-webkit-scrollbar { display: none; }
.pdp-shot {
  position: relative; flex: 0 0 100%; scroll-snap-align: start;
  aspect-ratio: var(--pdp-ratio, 4 / 5); overflow: hidden; background: var(--c-surface);
}
.pdp-shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--pdp-focus-x, 50%) var(--pdp-focus-y, 18%);
  transform: scale(var(--pdp-zoom, 1));
  transform-origin: var(--pdp-focus-x, 50%) var(--pdp-focus-y, 18%);
  transition: opacity 0.22s var(--ease);
}
/* Desktop gets its own ratio/position/zoom; falls back to the mobile values. */
@media (min-width: 750px) {
  .pdp-shot { aspect-ratio: var(--pdp-ratio-d, var(--pdp-ratio, 4 / 5)); }
  .pdp-shot img {
    object-position: var(--pdp-focus-x-d, var(--pdp-focus-x, 50%)) var(--pdp-focus-y-d, var(--pdp-focus-y, 18%));
    transform: scale(var(--pdp-zoom-d, var(--pdp-zoom, 1)));
    transform-origin: var(--pdp-focus-x-d, var(--pdp-focus-x, 50%)) var(--pdp-focus-y-d, var(--pdp-focus-y, 18%));
  }
}
.pdp-ph { position: absolute; inset: 0; background: linear-gradient(150deg, var(--c-surface), var(--c-line)); }
.pdp-dots { display: flex; gap: 5px; justify-content: center; padding: 10px 0 0; }
.pdp-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c-line); display: block; }
.pdp-dots i.is-active { background: var(--c-ink); width: 15px; border-radius: 3px; }
.pdp-thumbs { display: flex; gap: 7px; padding: 11px 10px 0; overflow-x: auto; scrollbar-width: none; }
.pdp-thumbs::-webkit-scrollbar { display: none; }
.pdp-thumbs button {
  flex: 0 0 54px; height: 68px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--c-line); background: var(--c-surface); padding: 0; cursor: pointer;
  transition: border-color 0.2s var(--ease);
}
.pdp-thumbs button.is-active { border-color: var(--c-ink); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pdp-head { padding: 14px 10px 0; }
.pdp-kicker { margin-bottom: 0; font-size: 0.6875rem; }
.pdp-head h1 { font-family: var(--f-display); font-size: 1.375rem; line-height: 1.22; margin-top: 5px; font-weight: 400; letter-spacing: -0.01em; }
.pdp-rate { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 0.75rem; color: var(--c-ink-soft); }
.pdp-stars { color: var(--c-brass); letter-spacing: 0.1em; font-size: 0.75rem; }
.pdp-rate__sep { color: var(--c-line); }
.pdp-rate__sold { color: var(--c-ink-soft); }

.pdp-price { display: flex; align-items: baseline; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.pdp-price__now { font-family: var(--f-display); font-size: 1.75rem; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pdp-price__was { font-size: 0.9375rem; color: var(--c-ink-soft); text-decoration: line-through; font-weight: 300; }
.pdp-price__off {
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--c-sale); color: #fff; padding: 4px 8px; border-radius: 2px; position: relative; top: -2px;
}
.pdp-lead { font-size: 0.8125rem; color: var(--c-sale); margin-top: 7px; font-weight: 400; }
.pdp-bnpl { font-size: 0.75rem; color: var(--c-ink-soft); margin-top: 6px; font-weight: 300; }
.pdp-bnpl b { color: var(--c-ink); font-weight: 500; }

/* flash countdown - one slim line, sits under the gallery */
.pdp-flash {
  margin: 10px 10px 0; background: var(--c-ink); color: var(--c-bg);
  border-radius: 3px; padding: 8px 11px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pdp-flash__left { display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.pdp-flash__tag {
  font-size: 0.4375rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-brass);
  border: 1px solid rgba(168,132,92,.42); border-radius: 2px; padding: 2px 4px; line-height: 1.2; font-weight: 600;
  flex: 0 0 auto;
}
.pdp-flash__text {
  font-size: 0.625rem; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdp-flash__code { color: var(--c-brass); font-weight: 500; }
.pdp-flash__right { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.pdp-flash__label { font-size: 0.4375rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(247,244,239,.42); }
.pdp-flash__time { font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.03em; color: var(--c-brass); font-weight: 500; }

/* promo strip (legacy class kept) */
.pdp-promo { margin: 12px 10px 0; border: 1px dashed var(--c-brass); border-radius: 3px; background: rgba(168,132,92,.075); padding: 12px; display: flex; align-items: center; gap: 11px; }
.pdp-promo__tag { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-brass); font-weight: 600; }
.pdp-promo__text { font-size: 0.6875rem; line-height: 1.5; color: var(--c-ink-soft); }
.pdp-promo__text b { color: var(--c-ink); font-weight: 600; }

.pdp-opt { padding: 13px 10px 0; }
.pdp-opt__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pdp-opt__label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500; }
.pdp-opt__value { color: var(--c-ink); text-transform: none; letter-spacing: 0.02em; font-size: 0.8125rem; margin-left: 6px; font-weight: 500; }
.pdp-opt__guide { font-size: 0.75rem; color: var(--c-ink-soft); border-bottom: 1px solid var(--c-line); padding-bottom: 1px; }
.pdp-opt__values { display: flex; flex-wrap: wrap; gap: 7px; }
.pdp-opt__values button {
  min-width: 48px; padding: 11px 0; text-align: center; font-size: 0.8125rem;
  border: 1px solid var(--c-line); border-radius: 2px; background: transparent;
  letter-spacing: 0.05em; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pdp-opt__values button:hover { border-color: var(--c-ink); }
.pdp-opt__values button.is-active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.pdp-opt__values button.is-off { color: #C6C0B4; text-decoration: line-through; pointer-events: none; }
.pdp-opt__values--swatch { gap: 10px; }
.pdp-opt__values--swatch button {
  width: 28px; height: 28px; min-width: 0; padding: 0; border-radius: 50%;
  border: 1px solid rgba(28,26,24,.16); background: var(--c-bg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.pdp-swatch-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
  background: var(--c-surface);
  box-shadow: inset 0 0 0 1px rgba(28,26,24,.14);
  background-size: cover; background-position: center;
}
.pdp-swatch-name { display: none; } /* colour name shown in the header label */
.pdp-opt__values--swatch button.is-active {
  border-color: var(--c-ink); transform: scale(1.08);
}
.pdp-opt__values--swatch button.is-active::after {
  content: ""; position: absolute; inset: -4px; border: 1px solid var(--c-ink); border-radius: 50%;
}
.pdp-opt__values--swatch button.is-photo {
  background: var(--c-bg);
}
.pdp-opt__values--swatch button.is-named {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  background: var(--c-bg);
}
.pdp-opt__values--swatch button.is-named.is-active::after { display: block; }

.pdp-atc { padding: 15px 10px 0; }
.pdp-atc .btn { height: 52px; width: 100%; }
.pdp-buy2 { margin: 10px 10px 0; }
.pdp-buy2 .btn { height: 48px; width: 100%; }
.pdp-buy2 .btn svg { width: 15px; height: 15px; margin-right: 8px; fill: currentColor; stroke: none; }
.pdp-urgency {
  display: flex; align-items: center; justify-content: flex-start; gap: 8px;
  font-size: 0.75rem; color: var(--c-ink-soft); margin-top: 13px; font-weight: 300;
  letter-spacing: 0.02em; padding: 0 10px;
}
.pdp-urgency__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-brass);
  display: block; flex: 0 0 auto; opacity: 0.65;
}
@keyframes pulse-dot { 0%, 100% { opacity: 0.65; } 50% { opacity: 0.25; } }
.pdp-trust { font-size: 0.71875rem; color: var(--c-ink-soft); text-align: center; margin-top: 11px; line-height: 1.6; font-weight: 300; }
.pdp-stock { margin: 13px 10px 0; }
.pdp-stock__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(158,61,48,.09); border: 1px solid rgba(158,61,48,.35);
  color: var(--c-sale); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em;
  padding: 7px 12px; border-radius: 999px; line-height: 1.2;
}
.pdp-stock__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-sale); flex: 0 0 auto;
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.pdp-rule { height: 1px; background: var(--c-line); margin: 18px 10px 0; border: 0; }

/* bundle builder - compact: tight vertical rhythm, no dead space */
.pdp-bundle { margin: 12px 10px 0; border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,.55); }
.pdp-bundle__head { padding: 10px 14px 9px; border-bottom: 1px solid var(--c-line); background: rgba(239,234,224,.55); }
.pdp-bundle__title { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 400; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pdp-bundle__pct {
  font-family: var(--f-body); font-style: normal; font-size: 0.59375rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase; background: var(--c-sale); color: #fff; padding: 3px 6px; border-radius: 2px;
}
.pdp-bundle__note { font-size: 0.71875rem; color: var(--c-ink-soft); margin-top: 5px; line-height: 1.5; }
.pdp-bundle__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 14px 0; }
.pdp-bundle__tier {
  border: 1px solid var(--c-line); border-radius: 2px; padding: 8px 4px; text-align: center;
  background: var(--c-bg); cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pdp-bundle__tier b { display: block; font-size: 0.8125rem; font-weight: 500; }
.pdp-bundle__tier span { display: block; font-size: 0.65625rem; color: var(--c-ink-soft); margin-top: 2px; }
.pdp-bundle__tier.is-active, .pdp-bundle__tier--hot.is-active { background: var(--c-ink); border-color: var(--c-ink); }
.pdp-bundle__tier.is-active b { color: var(--c-bg); }
.pdp-bundle__tier.is-active span { color: rgba(247,244,239,.72); }
.pdp-bundle__slots { padding: 0 12px; }
.pdp-bundle__row { border-top: 1px solid var(--c-line); padding: 9px 0; }
.pdp-bundle__row:first-child { border-top: 0; }
.pdp-bundle__slot-head { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; align-items: center; }
.pdp-bundle__slot-th { position: relative; width: 54px; height: 68px; border-radius: 3px; overflow: hidden; background: var(--c-surface); }
.pdp-bundle__slot-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.pdp-bundle__slot-name { font-size: 0.8125rem; line-height: 1.35; }
.pdp-bundle__slot-name i { display: block; font-style: normal; font-size: 0.6875rem; color: var(--c-ink-soft); margin-top: 3px; }
.pdp-bundle__slot-price { font-size: 0.8125rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.pdp-bundle__slot-price s { display: block; font-size: 0.6875rem; color: var(--c-ink-soft); font-weight: 300; margin-top: 2px; }
/* options sit in one line per type, label on the left, chips fill the row */
.pdp-bundle__opts { padding: 8px 0 0; }
.pdp-bundle__opt { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.pdp-bundle__opt:last-child { margin-bottom: 0; }
.pdp-bundle__label { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); font-weight: 500; white-space: nowrap; flex: 0 0 46px; }
.pdp-bundle__label b { color: var(--c-ink); text-transform: none; letter-spacing: 0.02em; font-size: 0.75rem; margin-left: 4px; font-weight: 500; display: block; }
.pdp-bundle__sw, .pdp-bundle__sz { flex: 1; min-width: 0; }
.pdp-bundle__sw { display: flex; gap: 7px; }
.pdp-bundle__sw button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(28,26,24,.14); padding: 0; position: relative; cursor: pointer; }
.pdp-bundle__sw button.is-photo { width: 24px; height: 24px; background-size: cover; background-position: center; background-color: var(--c-surface); }
.pdp-bundle__sw button.is-active::after { content: ""; position: absolute; inset: -3px; border: 1px solid var(--c-ink); border-radius: 50%; }
.pdp-bundle__sz { display: flex; gap: 4px; flex-wrap: wrap; }
.pdp-bundle__sz button {
  min-width: 36px; padding: 7px 0; font-size: 0.71875rem; text-align: center;
  border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-bg); cursor: pointer;
}
.pdp-bundle__sz button.is-active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.pdp-bundle__sz button.is-off { color: #C6C0B4; text-decoration: line-through; pointer-events: none; }
.pdp-bundle__sum { padding: 11px 14px 13px; border-top: 1px solid var(--c-line); background: rgba(239,234,224,.5); }
.pdp-bundle__row--save, .pdp-bundle__row--total { display: flex; justify-content: space-between; font-size: 0.8125rem; padding: 4px 0; }
.pdp-bundle__row--save { color: var(--c-sale); }
.pdp-bundle__row--total { font-family: var(--f-display); font-size: 1.1875rem; border-top: 1px solid var(--c-ink); margin-top: 7px; padding-top: 11px; }
.pdp-bundle__row--total b { font-family: var(--f-body); font-size: 1rem; font-weight: 500; }
.pdp-bundle .btn { margin: 10px 14px 13px; width: calc(100% - 28px); height: 46px; font-size: 0.71875rem; }

/* accordion */
.pdp-acc { margin: 20px 10px 0; border-top: 1px solid var(--c-line); }
.pdp-acc__item { border-bottom: 1px solid var(--c-line); }
.pdp-acc__trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 14px 0; font-size: 0.6875rem; letter-spacing: 0.06em; text-align: left; cursor: pointer;
}
.pdp-acc__trigger::after { content: "+"; font-size: 0.8125rem; color: var(--c-ink-soft); font-weight: 300; line-height: 1; }
.pdp-acc__item.is-open .pdp-acc__trigger::after { content: "\2013"; }
.pdp-acc__panel { display: none; padding: 0 0 14px; }
.pdp-acc__item.is-open .pdp-acc__panel { display: block; }
.pdp-acc__panel p { font-size: 0.6875rem; color: var(--c-ink-soft); line-height: 1.7; font-weight: 300; margin: 0; }

.pdp-reviews { padding: 22px 10px 0; }
.pdp-reviews__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 11px; }
.pdp-reviews__title { font-family: var(--f-display); font-size: 1.0625rem; font-weight: 400; }
.pdp-reviews__mount { min-height: 40px; }
.pdp-reviews__empty { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 15px; background: rgba(255,255,255,.5); }
.pdp-reviews__empty-title { font-size: 0.75rem; margin-bottom: 5px; }
.pdp-reviews__empty-text { font-size: 0.6875rem; color: var(--c-ink-soft); margin: 0; font-weight: 300; }

.pdp-sticky {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(247,244,239,.72); backdrop-filter: blur(12px) saturate(1.1);
  border-top: 1px solid rgba(231,225,214,.7);
  padding: 8px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.pdp-sticky__info { min-width: 0; }
.pdp-sticky__name { display: block; font-size: 0.6875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdp-sticky__price { font-size: 0.59375rem; color: var(--c-ink-soft); }
.pdp-sticky .btn { height: 38px; padding: 0 16px; font-size: 0.59375rem; }

/* ---------- 18. Collection ---------- */
.coll-head { padding: 22px 10px 0; }
.coll-head__title { font-family: var(--f-display); font-size: 1.8125rem; font-weight: 400; letter-spacing: -0.015em; line-height: 1; }
.coll-head__desc { font-size: 0.65625rem; color: var(--c-ink-soft); margin-top: 8px; letter-spacing: 0.04em; }
.coll-offer { margin: 15px 10px 0; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 13px; background: rgba(255,255,255,.55); }
.coll-offer__tag { font-size: 0.53125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-sale); font-weight: 600; }
.coll-offer__title { font-family: var(--f-display); font-size: 0.9375rem; margin-top: 5px; font-weight: 400; }
.coll-offer__text { font-size: 0.625rem; color: var(--c-ink-soft); margin-top: 4px; font-weight: 300; }
.coll-chips { display: flex; gap: 7px; overflow-x: auto; padding: 16px 10px 0; scrollbar-width: none; }
.coll-chips::-webkit-scrollbar { display: none; }
.coll-chip {
  flex: 0 0 auto; font-size: 0.65625rem; letter-spacing: 0.05em; padding: 8px 15px;
  border: 1px solid var(--c-line); border-radius: 100px; color: var(--c-ink-soft); white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.coll-chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
.coll-chip.is-active { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.coll-bar { display: flex; align-items: center; justify-content: space-between; padding: 15px 10px 13px; margin-top: 14px; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.coll-bar__count { font-size: 0.65625rem; color: var(--c-ink-soft); letter-spacing: 0.04em; }
.coll-sort { font-size: 0.65625rem; font-weight: 500; letter-spacing: 0.04em; }
.collection-hero { padding: 22px 10px 0; }
.collection-hero__title { font-family: var(--f-display); font-size: 1.8125rem; font-weight: 400; }

/* ---------- 19. Cart ---------- */
.cart-page { padding: 22px 10px 0; }
.cart-page__head { margin-bottom: 0; }
.cart-page__title { font-family: var(--f-display); font-size: 1.625rem; font-weight: 400; letter-spacing: -0.015em; }
.cart-page__count { font-family: var(--f-body); font-size: 0.6875rem; color: var(--c-ink-soft); margin-left: 8px; font-weight: 400; }
.cart-page__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.cart-page__items { }
.cart-page__item { }
.cart-sum { padding: 18px 0 0; }
.cart-sum__ship { margin: 18px 0 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: rgba(255,255,255,.6); padding: 14px; }
.cart-sum__ship-head { font-size: 0.71875rem; line-height: 1.55; margin-bottom: 11px; color: var(--c-ink-soft); }
.cart-sum__ship-head b { color: var(--c-ink); font-weight: 600; }
.cart-sum__bar { height: 2px; background: var(--c-line); border-radius: 2px; overflow: hidden; }
.cart-sum__bar i { display: block; height: 100%; background: var(--c-brass); border-radius: 2px; }
.cart-sum__ship-pct { }
.cart-sum__row { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 7px 0; color: var(--c-ink-soft); font-weight: 300; }
.cart-sum__row b { font-weight: 500; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.cart-sum__row--muted { color: var(--c-ink-soft); }
.cart-sum__row--save b { color: var(--c-sale); }
.cart-sum__row--total { font-family: var(--f-display); font-size: 1.1875rem; border-top: 1px solid var(--c-ink); margin-top: 11px; padding-top: 15px; color: var(--c-ink); }
.cart-sum__row--total span:last-child { font-family: var(--f-body); font-size: 0.9375rem; font-weight: 500; }
.cart-sum__cta { margin-top: 15px; }
.cart-sum__note { font-size: 0.65625rem; color: var(--c-ink-soft); text-align: center; margin-top: 13px; line-height: 1.7; font-weight: 300; }
.cart-sum__trust { display: flex; gap: 7px; justify-content: center; margin-top: 16px; flex-wrap: wrap; align-items: center; }
.cart-sum__trust > svg { width: auto; height: 20px; display: block; background: rgba(255,255,255,.9); border-radius: 3px; padding: 3px 5px; box-sizing: content-box; }

.cart-line { display: grid; grid-template-columns: 78px 1fr auto; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--c-line); }
.cart-line__media { position: relative; width: 78px; height: 98px; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.cart-line__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.cart-line__ph { position: absolute; inset: 0; background: linear-gradient(150deg, var(--c-surface), var(--c-line)); }
.cart-line__name { font-size: 0.75rem; line-height: 1.4; }
.cart-line__variant { font-size: 0.65625rem; color: var(--c-ink-soft); margin-top: 5px; line-height: 1.65; font-weight: 300; }
.cart-line__price { font-size: 0.75rem; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-line__price s { display: block; font-size: 0.65625rem; color: var(--c-ink-soft); font-weight: 300; margin-top: 3px; }
.cart-line__qtyrow { display: flex; align-items: center; gap: 8px; }
.cart-line__qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-bg); margin-top: 10px; }
.cart-line__qty button { width: 28px; height: 28px; display: grid; place-items: center; font-size: 0.8125rem; color: var(--c-ink-soft); font-weight: 300; }
.cart-line__qty span { width: 26px; text-align: center; font-size: 0.71875rem; font-weight: 500; }
/* per-line loading bar: only this line shows activity */
.cart-line__load { width: 34px; height: 2px; border-radius: 2px; background: var(--c-line); overflow: hidden; opacity: 0; transition: opacity 0.2s var(--ease); margin-top: 10px; }
.cart-line__load i { display: block; height: 100%; width: 40%; background: var(--c-brass); border-radius: 2px; animation: line-loading 0.9s ease-in-out infinite; }
.cart-line__load[hidden] { display: none; }
.cart-line.is-loading .cart-line__load { opacity: 1; }
.cart-line.is-loading .cart-line__qty { pointer-events: none; opacity: 0.55; }
@keyframes line-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
.cart-line__remove { font-size: 0.625rem; color: var(--c-ink-soft); border-bottom: 1px solid var(--c-line); margin-top: 11px; display: inline-block; letter-spacing: 0.06em; }
.cart-line__soldout { font-size: 0.65625rem; color: var(--c-sale); font-weight: 500; letter-spacing: 0.02em; margin-top: 6px; }
.cart-line.is-soldout { opacity: 0.72; }

/* ---------- 20. Search / Toast / Sticky / Modal ---------- */
.search-page { padding: 22px 10px 0; }
.search-page__title { font-family: var(--f-display); font-size: 1.625rem; font-weight: 400; }
.search-page__form { display: flex; gap: 8px; margin-top: 15px; border-bottom: 1px solid var(--c-line); }
.search-page__form input { flex: 1; border: 0; background: transparent; outline: 0; padding: 12px 0; font-size: 0.8125rem; min-width: 0; }
.search-page__head { margin-bottom: 0; }

.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 14px);
  background: var(--c-ink); color: var(--c-bg); font-size: 0.6875rem; letter-spacing: 0.06em;
  padding: 11px 18px; border-radius: 100px; z-index: 950;
  opacity: 0; pointer-events: none; transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
  max-width: calc(100% - 32px); text-align: center;
}
.toast.is-open { opacity: 1; transform: translate(-50%, 0); }

.sticky-bar {
  position: sticky; bottom: 0; z-index: 30;
  background: rgba(247,244,239,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--c-line); padding: 10px 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
}
.sticky-bar__info { min-width: 0; }
.sticky-bar__name { display: block; font-size: 0.6875rem; font-weight: 500; }
.sticky-bar__price { font-size: 0.59375rem; color: var(--c-ink-soft); }
.sticky-bar .btn { height: 42px; padding: 0 20px; font-size: 0.59375rem; }

/* added-to-bag modal */
.bag-mask {
  position: fixed; inset: 0; z-index: 900; background: rgba(20,17,14,.44);
  opacity: 0; pointer-events: none; transition: opacity 0.24s var(--ease);
}
.bag-mask.is-open { opacity: 1; pointer-events: auto; }
.bag-sheet {
  position: fixed; left: 50%; bottom: 0; width: 100%; max-width: 390px; z-index: 901;
  background: var(--c-bg); border-radius: 16px 16px 0 0;
  transform: translate(-50%, 102%); transition: transform 0.3s var(--ease-out);
  max-height: 92%; overflow-y: auto; box-shadow: 0 -8px 40px rgba(20,17,14,.18);
}
.bag-sheet.is-open { transform: translate(-50%, 0); }
.bag-sheet__head {
  display: flex; align-items: center; gap: 9px; padding: 17px 20px 15px;
  border-bottom: 1px solid var(--c-line); position: sticky; top: 0; background: var(--c-bg);
  border-radius: 16px 16px 0 0; z-index: 2;
}
.bag-sheet__tick { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: var(--c-ink); color: var(--c-bg); display: grid; place-items: center; font-size: 0.75rem; line-height: 1; }
.bag-sheet__head b { font-size: 0.8125rem; font-weight: 500; }
.bag-sheet__close { margin-left: auto; font-size: 0.65625rem; color: var(--c-ink-soft); letter-spacing: 0.09em; text-transform: uppercase; cursor: pointer; }
.bag-sheet__body { padding: 18px 20px 0; }
.bag-sheet__item { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
.bag-sheet__media { position: relative; width: 96px; height: 120px; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.bag-sheet__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bag-sheet__name { font-family: var(--f-display); font-size: 0.875rem; line-height: 1.35; font-weight: 400; }
.bag-sheet__variant { font-size: 0.6875rem; color: var(--c-ink-soft); margin-top: 7px; line-height: 1.6; }
.bag-sheet__price { font-size: 0.9375rem; font-weight: 500; margin-top: 10px; font-variant-numeric: tabular-nums; }
.bag-sheet__price s { font-size: 0.75rem; color: var(--c-ink-soft); font-weight: 300; margin-left: 9px; }
.bag-sheet__qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-bg); margin-top: 12px; }
.bag-sheet__qty button { width: 29px; height: 29px; display: grid; place-items: center; font-size: 0.875rem; color: var(--c-ink-soft); font-weight: 300; }
.bag-sheet__qty span { width: 28px; text-align: center; font-size: 0.75rem; font-weight: 500; }
.bag-sheet__ship { margin-top: 18px; border: 1px solid var(--c-line); border-radius: var(--radius); background: rgba(255,255,255,.6); padding: 14px; }
.bag-sheet__ship p { font-size: 0.71875rem; margin-bottom: 10px; line-height: 1.6; color: var(--c-ink-soft); }
.bag-sheet__ship p b { color: var(--c-ink); font-weight: 600; }
.bag-sheet__sug { margin-top: 20px; border-top: 1px solid var(--c-line); padding-top: 17px; }
.bag-sheet__sug h4 { font-family: var(--f-display); font-size: 0.96875rem; font-weight: 400; margin-bottom: 14px; }
.bag-sheet__sug-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bag-sheet__sug-card { display: flex; flex-direction: column; min-width: 0; }
.bag-sheet__sug-th { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); }
.bag-sheet__sug-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bag-sheet__sug-name { font-size: 0.71875rem; line-height: 1.4; margin-top: 9px; min-width: 0; }
.bag-sheet__sug-name a { color: var(--c-ink); }
.bag-sheet__sug-price { font-size: 0.6875rem; color: var(--c-ink-soft); }
.bag-sheet__sug-price b { color: var(--c-ink); font-weight: 500; }
.bag-sheet__sug-price s { margin-left: 5px; }
.bag-sheet__sug-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.bag-sheet__sug-add {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--c-ink); border: 1px solid var(--c-ink);
  padding: 8px 11px; border-radius: 2px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.bag-sheet__sug-add:hover { background: var(--c-ink); color: var(--c-bg); }
.bag-sheet__foot { padding: 17px 20px 22px; position: sticky; bottom: 0; background: var(--c-bg); }
.bag-sheet__foot .btn { width: 100%; height: 52px; }
.bag-sheet__keep { display: block; text-align: center; font-size: 0.65625rem; color: var(--c-ink-soft); letter-spacing: 0.11em; text-transform: uppercase; margin-top: 13px; cursor: pointer; }

/* ---------- 21. Reviews / Press ---------- */
.rev__grid { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 0 10px; }
/* mobile: horizontal swipe rail, one visible card + peeking next */
@media (max-width: 749px) {
  .rev__grid {
    display: flex; gap: 10px; padding: 0 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rev__grid::-webkit-scrollbar { display: none; }
  .rev__card {
    flex: 0 0 78%; scroll-snap-align: start;
    display: flex; flex-direction: column;
  }
  .rev__quote { flex: 1; }
}
.rev__card {
  border: 1px solid var(--c-line); border-radius: calc(var(--radius) + 3px);
  padding: 17px 18px 15px; background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46));
  box-shadow: 0 6px 22px rgba(28,26,24,.045);
}
.rev__topline { display: flex; align-items: center; gap: 11px; }
.rev__avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55);
}
.rev__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev__name { font-size: 0.75rem; font-weight: 600; color: var(--c-ink); letter-spacing: 0.02em; }
.rev__meta { font-size: 0.59375rem; color: var(--c-ink-soft); letter-spacing: 0.03em; }
.rev__stars { color: var(--c-brass); font-size: 0.65625rem; letter-spacing: 0.18em; margin-left: auto; white-space: nowrap; }
.rev__quote { font-size: 0.75rem; line-height: 1.75; color: var(--c-ink-soft); margin: 12px 0 10px; font-weight: 300; }
.rev__by { font-size: 0.5625rem; color: var(--c-ink-soft); letter-spacing: 0.12em; text-transform: uppercase; }
.rev__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.53125rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-brass); border: 1px solid rgba(168,132,92,.5); border-radius: 999px;
  padding: 3px 9px; font-weight: 500; background: rgba(168,132,92,.06);
}
.rev__head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 11px; }
.rev__score { font-family: var(--f-display); font-size: 1.0625rem; }

.press { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: 24px 10px; }
.press__row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.press__item { }
.press__name { font-family: var(--f-display); font-size: 0.84375rem; letter-spacing: 0.15em; text-transform: uppercase; color: #B0A89D; }
.press__title { font-size: 0.59375rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-ink-soft); text-align: center; margin-bottom: 16px; }

/* ---------- 22. Category grid ---------- */
.cat-head { display: flex; align-items: baseline; justify-content: space-between; padding: 0 10px 11px; }
.cat-head__title { font-family: var(--f-display); font-size: 1.25rem; font-weight: 400; }
.cat-head__link { font-size: 0.59375rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-ink-soft); border-bottom: 1px solid var(--c-line); padding-bottom: 2px; }
.cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 10px; }
.cat-card { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); display: block; }
.cat-card:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.cat-card__media { position: absolute; inset: 0; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.cat-card__ph { position: absolute; inset: 0; background: linear-gradient(150deg, var(--c-surface), var(--c-line)); }
.cat-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 14px; background: linear-gradient(to top, rgba(16,14,12,.76), rgba(16,14,12,0)); color: #fff; }
.cat-card__name { font-family: var(--f-display); font-size: 1.03125rem; line-height: 1.2; }
.cat-card__sub { display: block; font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.76; margin-top: 5px; }

/* ---------- 23. Promo strip ---------- */
.promo-strip { background: var(--c-surface); border-block: 1px solid var(--c-line); padding: 11px 10px; }
.promo-strip__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.promo-strip__tag {
  font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-sale);
  font-weight: 600; background: rgba(158,61,48,.09); border: 1px solid rgba(158,61,48,.28);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.promo-strip__text { font-size: 0.71875rem; line-height: 1.55; max-width: 560px; }
.promo-strip__link {
  font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-ink); padding-bottom: 1px; white-space: nowrap;
}
@media (min-width: 750px) {
  .promo-strip { padding: 12px 28px; }
  .promo-strip__inner { flex-direction: row; justify-content: center; gap: 16px; }
  .promo-strip__text { max-width: none; }
}

/* ---------- 24. Misc ---------- */
.empty { padding: 60px 10px; text-align: center; }
.err { padding: 70px 10px; text-align: center; }
.err__code { font-family: var(--f-display); font-size: 3.5rem; font-weight: 400; line-height: 1; }
.err__title { font-family: var(--f-display); font-size: 1.25rem; margin-top: 14px; font-weight: 400; }
.err__text { font-size: 0.75rem; color: var(--c-ink-soft); margin-top: 9px; font-weight: 300; }
.err__cta { margin-top: 22px; }
.link-underline { border-bottom: 1px solid var(--c-line); padding-bottom: 2px; transition: border-color 0.2s var(--ease); }
.link-underline:hover { border-color: var(--c-ink); }
.rte { font-size: 0.8125rem; line-height: 1.78; font-weight: 300; }
.rte h2, .rte h3 { margin: 1.4em 0 0.5em; }

/* ---------- 25. Animations ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 26. Mobile header density ----------
   The wordmark sits in its own grid track, so it can never collide with the
   action icons. Very narrow phones shed the secondary actions instead. */
@media (max-width: 430px) {
  .header__right .icon-btn[href*="wishlist"],
  .header__right .icon-btn[href*="user"] { display: none; }
  .header__logo { font-size: 0.875rem; letter-spacing: 0.16em; }
  .header__inner { gap: 6px; padding: 0 8px; }
}
/* Even on the narrowest screens the three tracks stay intact: the logo
   track can shrink but never slides under the icon groups. */
@media (max-width: 359px) {
  .header__inner { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 4px; padding: 0 6px; }
  .header__logo { font-size: 0.75rem; letter-spacing: 0.1em; }
  .icon-btn { width: 28px; height: 28px; }
  .icon-btn svg { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==========================================================================
   DESKTOP ADAPTATION
   ========================================================================== */

/* ---------- Large tablet / small desktop ---------- */
@media (min-width: 750px) {
  .page-width { padding: 0 20px; }
  .grid, .grid--4 { grid-template-columns: repeat(3, 1fr); gap: 30px 16px; padding: 0 20px; }
  .sec { padding: 48px 0 0; }
  .sec--tight { padding: 30px 0 0; }
  .section-head { padding: 0 20px; margin-bottom: 18px; }
  .section-head__title { font-size: 1.5rem; }

  .hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
  .hero__media { aspect-ratio: 4 / 5; }
  .hero__inner { padding: 0 48px; }
  .hero__title { font-size: clamp(2rem, 3.4vw, 3rem); }
  .hero__text { font-size: 0.875rem; max-width: 380px; }
  .hero--overlay { display: block; }
  .hero--overlay .hero__media { aspect-ratio: 21 / 9; }
  .hero--overlay .hero__inner { padding: 0 60px 56px; max-width: 720px; margin: 0 auto; }
  .hero--overlay .hero__title { font-size: clamp(2.25rem, 4vw, 3.5rem); }

  /* desktop: nav on the left, wordmark centred, actions right */
  .header__inner { height: 72px; padding: 0 28px; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .header__logo { font-size: 1.125rem; letter-spacing: 0.3em; }
  .header__left { justify-self: start; }
  .header__right { justify-self: end; }
  .nav { display: flex; gap: 26px; align-items: center; }
  .burger { display: none; }
  .mobile-nav { display: none; }

  .props { grid-template-columns: repeat(4, 1fr); }
  .prop { padding: 24px 18px; }

  .look { grid-template-columns: 1.1fr 1fr; gap: 0; align-items: center; }
  .look__panel { padding: 0 36px; }
  .look__media { aspect-ratio: 4 / 5; }

  .story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .story__media { aspect-ratio: 3 / 4; }
  .story__body { padding: 0 36px; text-align: left; }

  .ugc { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 20px; }
  .rev__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 20px; }

  .cat-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; padding: 0 20px; }
  .cat-card:first-child { grid-column: auto; aspect-ratio: 4 / 5; }
  .cat-card { aspect-ratio: 4 / 5; }
  .cat-card__name { font-size: 1.1875rem; }

  .newsletter { padding: 48px 32px 52px; }
  .newsletter__note { font-size: 0.8125rem; max-width: 380px; }
  .newsletter__form { max-width: 400px; }

  .footer { padding: 44px 24px 32px; }
  .footer__grid { grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 28px; }
  .footer__about { max-width: 340px; }

  .coll-head { padding: 34px 24px 0; }
  .coll-head__title { font-size: 2.25rem; }
  .coll-offer { margin: 20px 24px 0; padding: 16px 18px; }
  .coll-chips { padding: 18px 24px 0; }
  .coll-bar { padding: 16px 24px 14px; }
  .collection-hero { padding: 34px 24px 0; }
  .collection-hero__title { font-size: 2.25rem; }

  .cart-page { padding: 34px 24px 0; }
  .cart-page__title { font-size: 2rem; }
  .cart-page__grid { grid-template-columns: 1fr 380px; gap: 36px; align-items: start; }
  .cart-sum { padding: 0; position: sticky; top: 96px; }
  .cart-sum__ship { margin: 0 0 18px; }
  .cart-line { grid-template-columns: 96px 1fr auto; gap: 18px; padding: 20px 0; }
  .cart-line__media { width: 96px; height: 120px; }

  .search-page { padding: 34px 28px 0; }
  .search-page__title { font-size: 2rem; }

  .sticky-bar, .pdp-sticky { display: none; }
  .toast { bottom: 34px; }
}

/* ---------- Full desktop ---------- */
@media (min-width: 1100px) {
  .grid, .grid--4 { grid-template-columns: repeat(4, 1fr); gap: 36px 20px; }
  .sec { padding: 58px 0 0; }
  .section-head { margin-bottom: 22px; }
  .section-head__title { font-size: 1.625rem; }
  .hero__inner { padding: 0 48px; }
  .look__panel { padding: 0 48px; }
  .story__body { padding: 0 48px; }
  .cat-card__name { font-size: 1.25rem; }
}

/* ---------- PDP desktop ---------- */
@media (min-width: 900px) {
  .pdp-wrap {
    display: grid; grid-template-columns: 1.08fr 1fr;
    gap: 0 40px; align-items: start;
    max-width: var(--page-w); margin: 0 auto; padding: 40px 24px 80px;
  }
  /* left column holds still while the buy module scrolls */
  .pdp-media { position: sticky; top: 104px; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: start; }
  .pdp-gallery { display: block; overflow: visible; grid-column: 2; grid-row: 1; }
  .pdp-shot { display: none; }
  .pdp-shot:first-child { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); }
  .pdp-dots { display: none; }
  .pdp-thumbs { display: flex; flex-direction: column; gap: 8px; padding: 0; overflow: visible; grid-column: 1; grid-row: 1; }
  .pdp-thumbs button { flex: 0 0 auto; width: 84px; height: 105px; }
  .pdp-thumbs button.is-active { border-color: var(--c-ink); }
  .pdp-head { padding: 0; }
  .pdp-head h1 { font-size: 1.75rem; }
  .pdp-price__now { font-size: 1.875rem; }
  .pdp-flash { margin: 18px 0 0; padding: 11px 14px; }
  .pdp-promo { margin: 16px 0 0; }
  .pdp-opt { padding: 22px 0 0; }
  .pdp-buy { padding: 26px 0 0; }
  .pdp-buy .btn { height: 54px; }
  .pdp-buy2 { margin: 9px 0 0; }
  .pdp-buy2 .btn { height: 54px; width: 100%; }
  .pdp-stock { margin: 18px 0 0; }
  .pdp-rule { margin: 24px 0 0; }
  .pdp-bundle { margin: 30px 0 0; }
  .pdp-bundle__opts { padding-left: 56px; }
  .pdp-acc { margin: 30px 0 0; }
  .pdp-reviews { padding: 34px 0 0; }
}

/* ---------- Wide ---------- */
@media (min-width: 1440px) {
  .hero__inner { padding: 0 64px; }
  .look__panel { padding: 0 64px; }
  .story__body { padding: 0 64px; }
}

/* ---------- Reduced motion / print ---------- */
@media print {
  .header, .footer, .announce, .marquee, .pdp-sticky, .sticky-bar, .mobile-nav, .bag-mask, .bag-sheet { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   PRODUCTION MODIFIER BRIDGE
   The live theme editor renders semantic modifiers from section schemas
   (hero--tall, grid--3, card__media--4-5, promo-strip--accent, ...) while
   theme.css was written against the preview markup. These rules map every
   modifier the schemas can emit onto the Soft Luxe system so the uploaded
   store renders identically to the preview.
   ========================================================================== */

/* ---- hero height variants (schema: height = full|tall|medium|square) ---- */
.hero--tall .hero__inner,
.hero--full .hero__inner,
.hero--medium .hero__inner,
.hero--square .hero__inner {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 30px;
  color: #fff; text-align: center;
}
.hero--tall .hero__media,
.hero--full .hero__media { aspect-ratio: 4 / 5; }
.hero--medium .hero__media { aspect-ratio: 16 / 11; }
.hero--square .hero__media { aspect-ratio: 1 / 1; }
.hero--tall .hero__media::after,
.hero--full .hero__media::after,
.hero--medium .hero__media::after,
.hero--square .hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18,16,14,.34) 0%, rgba(18,16,14,0) 26%, rgba(18,16,14,.06) 48%, rgba(18,16,14,.62) 82%, rgba(18,16,14,.8) 100%);
}
.hero--tall .hero__inner > *,
.hero--full .hero__inner > *,
.hero--medium .hero__inner > *,
.hero--square .hero__inner > * { position: relative; z-index: 2; }
.hero--tall .hero__eyebrow,
.hero--full .hero__eyebrow,
.hero--medium .hero__eyebrow,
.hero--square .hero__eyebrow { color: rgba(255,255,255,.74); }
.hero--tall .hero__text,
.hero--full .hero__text,
.hero--medium .hero__text,
.hero--square .hero__text { color: rgba(255,255,255,.84); margin-left: auto; margin-right: auto; }
.hero--tall .hero__cta,
.hero--full .hero__cta,
.hero--medium .hero__cta,
.hero--square .hero__cta { justify-content: center; }

/* ---- hero content position (schema: position = bottom|center|top) ---- */
.hero__box--bottom { margin-top: auto; }
.hero__box--center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); }
.hero__box--top { position: absolute; left: 0; top: 0; padding: 24px 20px; width: 100%; }

/* ---- product grid columns (schema: columns = 2..5) ---- */
.grid--2, .grid--3, .grid--4, .grid--5 { display: grid; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--5 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 750px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .grid--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ---- product card image ratio (schema: card_image_ratio = 3-4|1-1|4-5|2-3) ---- */
.card__media--3-4 { aspect-ratio: 3 / 4; }
.card__media--1-1 { aspect-ratio: 1 / 1; }
.card__media--4-5 { aspect-ratio: 4 / 5; }
.card__media--2-3 { aspect-ratio: 2 / 3; }

/* ---- category grid columns (schema: columns = 2..4) ---- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 10px; }
.cat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cat-grid--3 { grid-template-columns: repeat(2, 1fr); }
.cat-grid--4 { grid-template-columns: repeat(2, 1fr); }
.cat-grid .cat-card:first-child { grid-column: 1 / -1; }
@media (min-width: 750px) {
  .cat-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .cat-grid .cat-card:first-child { grid-column: auto; }
}
@media (min-width: 1100px) {
  .cat-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- promo strip style (schema: style = accent|ink|surface) ---- */
.promo-strip--accent, .promo-strip--ink { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
.promo-strip--accent .promo-strip__tag, .promo-strip--ink .promo-strip__tag {
  color: var(--c-brass); background: rgba(168,132,92,.16); border-color: rgba(168,132,92,.5);
}
.promo-strip--accent .promo-strip__link, .promo-strip--ink .promo-strip__link { border-color: currentColor; }
.promo-strip--surface { background: var(--c-surface); }

/* ---- brand story reverse (schema: reverse = true|false) ---- */
.story--reverse { direction: rtl; }
.story--reverse .story__body,
.story--reverse .story__media { direction: ltr; }

/* ---- section head left/center/split (schema: head_style) ---- */
.section-head--left { text-align: left; justify-content: flex-start; }
.section-head--left .section-head__title { margin-right: auto; }

/* ---- misc semantic gaps ---- */
.story__stat { display: flex; flex-direction: column; align-items: center; }
.rev__stars svg { width: 11px; height: 11px; display: inline-block; }
.rev__stars--sm svg { width: 9px; height: 9px; }
.rev__score-text { font-family: var(--f-body); font-size: 0.65625rem; color: var(--c-ink-soft); margin-left: 6px; }
.coll-head__left { min-width: 0; }
.pdp-bundle__panel[hidden] { display: none !important; }
.pdp-reviews__demo { margin-top: 2px; }
.sec--newsletter { background: var(--c-ink); }
.cart-line__body { min-width: 0; }
.search-panel { position: fixed; inset: 0; z-index: 90; background: rgba(8,8,8,.62); display: grid; place-items: start center; padding: 90px 16px 20px; }
.search-panel__inner { width: min(680px, 100%); background: var(--c-bg); border-radius: 6px; padding: 22px; box-shadow: 0 26px 76px rgba(0,0,0,.4); }
.search-panel__form { display: flex; gap: 10px; border-bottom: 1px solid var(--c-ink); padding-bottom: 10px; }
.search-panel__form input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--c-ink); }
.search-panel__form button { background: var(--c-ink); color: var(--c-bg); border: 0; padding: 10px 18px; border-radius: 2px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.search-panel__hints { margin-top: 14px; font-size: 0.75rem; color: var(--c-ink-soft); }
.search-panel__hints a { color: var(--c-ink); border-bottom: 1px solid var(--c-line); margin: 0 10px 0 0; }
.search-panel__close { position: absolute; top: 18px; right: 22px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 1.1rem; cursor: pointer; }

/* hero desktop: modifier variants follow the overlay treatment */
@media (min-width: 750px) {
  .hero--tall, .hero--full, .hero--medium, .hero--square { display: block; }
  .hero--tall .hero__media,
  .hero--full .hero__media { aspect-ratio: 21 / 9; }
  .hero--medium .hero__media { aspect-ratio: 21 / 10; }
  .hero--square .hero__media { aspect-ratio: 16 / 10; }
  .hero--tall .hero__inner,
  .hero--full .hero__inner,
  .hero--medium .hero__inner,
  .hero--square .hero__inner { padding: 0 60px 56px; max-width: 720px; margin: 0 auto; }
  .hero--tall .hero__title,
  .hero--full .hero__title,
  .hero--medium .hero__title,
  .hero--square .hero__title { font-size: clamp(2.25rem, 4vw, 3.5rem); }
}