/* storefront/static/style.css - Editorial Atelier Lookbook for Misykath
   Inspired by Brunello Cucinelli's Quiet Luxury & Architectural Solomeo Aesthetics.
   Tokens strictly follow Design Bible & Brunello editorial standards.
   Zero literal hex allowed outside the :root block. */

:root {
  --paper: #fbfaf8;
  --surface: #ffffff;
  --ink: #1c1a17;
  --btn-dark: #1a202c;
  --btn-dark-hover: #11141a;
  --rule: #e8e2d8;
  --sand: #f4efe9;
  --sand-deep: #eae3d8;
  --muted: #756d64;
  --shopee: #ee4d2d;
  --shopee-dark: #d73211;
  --gold: #b39768;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --measure: 1680px;
  /* Header height is split into its two measured rows. The utility row holds
     the service icons and the centred crest. The nav row holds the category
     strip. Both sum to the 176px header measured on the reference at 1440px.
     The lookbook stage is sticky and must sit exactly under the header, so
     --header-h stays the single source of truth for the combined height. */
  --header-utility-h: 130px;
  --header-nav-h: 46px;
  /* Must stay a plain pixel length. The lookbook scroll controller reads this
     token with parseFloat, which returns NaN on a calc() expression and leaves
     the whole scroll stack dormant. Keep it in sync with the two rows above. */
  --header-h: 176px;
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --frosted-bg: rgba(255, 255, 255, 0.7);
  --overlay-bg: rgba(0, 0, 0, 0.45);
}

/* Base Reset & Box Model */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0;
}

html {
  font-size: 16px;
  /* Anchor jumps only. This does NOT affect wheel or trackpad scrolling, which
     Chrome drives directly, so it cannot fight the scroll-driven timeline below.
     Keep it: .filter-pill targets read as janky without it. */
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  -webkit-text-size-adjust: 100%;
  /* `clip`, NOT `hidden`. `hidden` makes the root a scroll container, so
     overflow-y computes to auto and the root scrollport never moves. That
     freezes both `position: sticky` and `view-timeline`. `clip` clips the same
     sideways overflow without a scrollport. */
  overflow-x: clip;
  background-color: var(--paper);
}

body {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Container Invariant with Fluid Luxury Padding */
.unified-dashboard-container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 2.5rem;
  width: 100%;
}

/* Micro-caps Typography */
.micro-caps {
  font-size: 10px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.sentence-case {
  text-transform: none;
}

/* Headings & Display Serif */
h1, h2, h3, h4, .display-font {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 300;
}

h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 300;
}

h3 {
  font-size: 1.45rem;
  font-weight: 400;
}

/* Prices & Tabular Numbers */
.price, .tabular-nums {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   NAVIGATION HEADER (BRUNELLO TWO-ROW ARCHITECTURE)
   Measured at 1440px against the live reference: header 176px tall and
   transparent, utility icons 16px on a centred logo, then a 46px category
   strip with 12px/400 labels at 3px tracking and a 22x22 chevron trigger.
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--rule);
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1101;
  width: 100%;
  /* Frosted paper once the reader scrolls, so hero imagery reads through the
     bar at rest but labels never sit on a busy photograph. */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
  background-color: var(--frosted-bg);
  box-shadow: 0 1px 0 var(--rule);
}

/* Row 1: Service utilities, centred crest, quick actions */
.header-utility-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-utility-h);
  width: 100%;
  padding: 0 clamp(1.25rem, 2.5vw, 2.5rem);
}

.utility-cluster {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  /* min-width: 0 lets each cluster shrink. Without it the clusters pin to
     content width and the centred logo loses the viewport at 320px. */
  flex: 1 1 0;
  min-width: 0;
}

.utility-cluster-right {
  justify-content: flex-end;
}

.utility-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: opacity 0.2s ease;
}

.utility-icon:hover {
  opacity: 0.65;
}

.utility-icon.bag-btn .bag-count {
  position: absolute;
  top: 9px;
  right: 8px;
  font-family: var(--font-ui);
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  color: var(--muted);
}

/* The brandmark is centred in the viewport, not in the gap between the two
   clusters. `position: absolute` guarantees that even when the left and right
   clusters hold different numbers of icons. */
.boutique-brand-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  /* The row is absolutely positioned, so the link gets no height from it.
     Without an explicit 44px the link collapses to the 18px text box and
     fails the touch-target minimum on every mobile viewport. */
  min-height: 44px;
  padding: 0 0.25rem;
}

.brand-crest {
  color: var(--ink);
  flex-shrink: 0;
}

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 400;
  letter-spacing: clamp(0.14em, 0.5vw, 0.22em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* Row 2: Centred category strip */
.category-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--header-nav-h);
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.category-strip::-webkit-scrollbar {
  display: none;
}

.category-strip-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.8vw, 1rem);
  margin: 0;
  padding: 0 clamp(1rem, 3vw, 3rem);
  list-style: none;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.category-link {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  /* 14px of vertical padding yields a 44px link. 12px left it at 41.6px,
     which failed the touch-target minimum on every mobile viewport. */
  padding: 14px 6px;
  transition: opacity 0.2s ease;
}

.category-link:hover {
  opacity: 0.6;
}

/* The glyph stays at the reference's 14px. The hit area is 44px tall so the
   control clears the WCAG touch minimum without changing how it reads. */
.category-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 44px;
  margin-block: -1px;
  color: var(--ink);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.category-caret:hover {
  opacity: 0.6;
}

/* The chevron points down while closed and rotates up when the panel is open,
   so the control reads its own state without an extra icon swap. */
.category-caret svg {
  transition: transform 0.25s var(--ease-editorial);
}

.category-item.is-open .category-caret svg {
  transform: rotate(180deg);
}

.category-item.is-open .category-caret,
.category-item.is-open .category-link {
  opacity: 1;
}

/* Submenu panel. The category strip is a horizontally scrollable row
   (overflow-x: auto), and any scroll container also clips its overflow on the
   cross axis. An absolutely positioned panel would therefore be cut off at the
   strip edge. The panel is fixed instead, and openCategoryPanel writes its
   viewport coordinates from the trigger's rect, so no ancestor can clip it.
   Collapsed panels stay in the DOM for the aria relationship but take no space
   and are hidden from assistive tech. */
.category-submenu {
  position: fixed;
  z-index: 50;
  min-width: 240px;
  padding: 1.5rem 0 1.75rem;
  background-color: #ffffff;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s var(--ease-editorial),
    visibility 0.22s ease;
}

.category-item.is-open .category-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.category-submenu ul {
  margin: 0;
  padding: 0 2rem;
  list-style: none;
  text-align: center;
}

.category-submenu a {
  display: block;
  padding: 0.6rem 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.category-submenu a:hover {
  opacity: 0.6;
}

/* The header is fixed rather than sticky, so it no longer occupies flow space.
   Reserve its height on main, otherwise the first editorial slide sits under
   the bar. --header-h is the single source of truth for both. */
#main-content {
  padding-top: var(--header-h);
}

/* Below 900px the reference collapses to one compact bar. The 130px utility row
   would eat a third of a phone screen, so shrink it and drop the secondary
   service icons, keeping only menu, search, and the bag. */
/* Below 900px the header utility row starts to compact. */
@media (max-width: 900px) {
  :root {
    --header-h: 112px;
  }

  .site-header {
    --header-utility-h: 72px;
    --header-nav-h: 40px;
  }

  .utility-cluster-left li:nth-child(2),
  .utility-cluster-left li:nth-child(4) {
    display: none;
  }

  .category-link {
    font-size: 11px;
    letter-spacing: 2px;
    padding: 15px 4px;
  }

  .brand-title {
    font-size: 1.15rem;
  }

  .brand-crest {
    width: 22px;
    height: 22px;
  }
}

/* Below 768px (Mobile & Small Tablets):
   User requirement:
   1. Hide .category-strip from top navbar; all categories are cleanly accessible in #nav-drawer.
   2. Clean, proportional mobile header (64px) without crowding or icon overlap.
   3. Hide left utility cluster on the top bar; guest services are moved to hamburger drawer.
   4. Brandmark stays centred and responsive without colliding with action icons.
   5. Touch targets strictly >= 44px.
*/
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
  }

  .site-header {
    --header-utility-h: 64px;
    --header-nav-h: 0px;
  }

  .header-utility-row {
    padding: 0 1rem;
    height: 64px;
  }

  /* Category strip is hidden from mobile top navbar; all categories live in #nav-drawer */
  .category-strip {
    display: none !important;
  }

  /* Left utility cluster is hidden from top bar on mobile; accessible via drawer */
  .utility-cluster-left {
    display: none !important;
  }

  /* Keep right utility cluster right-aligned with comfortable gap */
  .utility-cluster-right {
    gap: 0.35rem;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Hamburger menu pinned on the left on mobile */
  #menu-trigger {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .utility-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Brandmark centred in viewport with crest logo on mobile */
  .boutique-brand-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: calc(100% - 140px);
    padding: 0;
    text-decoration: none;
    color: var(--ink);
    z-index: 1;
  }

  .brand-title {
    font-size: 1.15rem;
    letter-spacing: 0.16em;
    line-height: 1;
    white-space: nowrap;
  }

  .brand-crest {
    display: block !important;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }
}

/* At 480px and below (Small Mobile Viewports down to 320px) */
@media (max-width: 480px) {
  .header-utility-row {
    padding: 0 0.5rem;
  }

  #menu-trigger {
    left: 0.5rem;
  }

  .boutique-brand-link {
    max-width: calc(100% - 130px);
    gap: 0.4rem;
  }

  .brand-crest {
    display: block !important;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }

  .brand-title {
    font-size: 1rem;
    letter-spacing: 0.14em;
    line-height: 1;
  }

  .utility-cluster-right {
    gap: 0.15rem;
  }

  .utility-icon {
    width: 44px;
    height: 44px;
  }
}

/* Slide-Over Navigation Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-bg);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 380px;
  max-width: 85vw;
  background-color: var(--surface);
  z-index: 1000;
  box-shadow: 4px 0 24px var(--overlay-bg);
  transform: translateX(-100%);
  transition: transform 0.35s var(--ease-editorial);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.drawer-overlay.active .nav-drawer {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.drawer-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--ink);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.drawer-body {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.drawer-section-label {
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.nav-categories {
  display: flex;
  flex-direction: column;
  list-style: none;
  gap: 0.35rem;
}

.drawer-accordion-item {
  border-bottom: 1px solid var(--sand);
}

.drawer-category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-link {
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 500;
  min-height: 44px;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  flex: 1;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.nav-link:hover {
  color: var(--ink);
  padding-left: 0.5rem;
}

.drawer-accordion-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  padding: 0;
  transition: color 0.2s ease;
}

.drawer-accordion-btn:hover {
  color: var(--ink);
}

.drawer-accordion-btn svg {
  transition: transform 0.25s var(--ease-editorial);
}

.drawer-accordion-item.is-open .drawer-accordion-btn svg {
  transform: rotate(180deg);
}

.drawer-sublinks {
  list-style: none;
  padding: 0.25rem 0 0.75rem 1rem;
  margin: 0;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  border-left: 1px solid var(--rule);
  margin-left: 0.25rem;
  margin-bottom: 0.5rem;
}

.drawer-accordion-item.is-open .drawer-sublinks {
  display: flex;
}

.drawer-sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.35rem 0.5rem;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.drawer-sublink:hover {
  color: var(--ink);
  transform: translateX(4px);
}

.drawer-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  padding: 0;
}

.drawer-divider {
  height: 1px;
  background-color: var(--rule);
  margin: 0.5rem 0;
}

.drawer-aux-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.drawer-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.drawer-link:hover {
  color: var(--ink);
}

/* Quick Search Modal */
.search-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-bg);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.search-modal-overlay.active {
  visibility: visible;
  opacity: 1;
}

.search-modal {
  background-color: var(--surface);
  width: 640px;
  max-width: 92vw;
  border: 1px solid var(--rule);
  padding: 1.75rem 2rem;
  box-shadow: 0 16px 48px var(--overlay-bg);
}

.search-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.5rem;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-ui);
  font-size: 1.05rem;
  color: var(--ink);
  background: transparent;
  min-height: 44px;
}

.search-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
  color: var(--muted);
  min-height: 44px;
  padding: 0 0.5rem;
}

.search-modal-results {
  padding-top: 1.5rem;
  max-height: 45vh;
  overflow-y: auto;
}

.search-hint {
  color: var(--muted);
  text-align: center;
  padding: 1.5rem 0;
}

/* Search result rows. Each row is a real anchor to the product page, so the
   row itself is the touch target and the focus ring lands on one element. */
.search-result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-result-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title  price"
    "meta   price";
  align-items: baseline;
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  min-height: 44px;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.search-result-item:hover,
.search-result-item:focus-visible {
  background-color: var(--sand);
}

.search-result-title {
  grid-area: title;
  font-size: 0.95rem;
  line-height: 1.35;
}

.search-result-title mark {
  background-color: transparent;
  color: inherit;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
}

.search-result-meta {
  grid-area: meta;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 1.6px;
}

.search-result-price {
  grid-area: price;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ==========================================================================
   LOOKBOOK STACK (BRUNELLO 'CREATIVE' EFFECT, DISCRETE ONE-GESTURE-ONE-IMAGE)
   Port of shop.brunellocucinelli.com's Swiper 'creative' configuration. The
   effect is discrete, not scrub-linked: one gesture advances exactly one photo.

   No library is vendored. .lookbook-stack-stage is the capture-phase scroll
   owner, and it hands the wheel back to the page on the last photo.

   VIEWPORT TAKEOVER, NOT A SCRUBBED TRACK. Every gesture resolves to one step,
   so there is no scroll progress to map and no view-timeline. While the lookbook
   is active the plate covers the whole viewport below the header, and the page
   does not move.

   THE SECTION RESERVES NO SCROLL AT ALL. Brunello's animated-slide container is
   `position: relative` with height `calc(100dvh - header)` and no extra track.
   ========================================================================== */

.lookbook-stack {
  /* Brunello creativeEffect.prev.translate: [0, "-24%", 0].
     How far the departing photo drifts up as its successor rises over it. */
  --stack-travel: -24%;
  /* opacity applied to the departing photo while it lifts. */
  --stack-depart-opacity: 0.92;
  /* Brunello speed: 600. One shared tween drives both photos. */
  --stack-speed: 600ms;
  --stack-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --stack-inset: 0px;
  background-color: var(--paper);
  position: relative;
  scroll-snap-align: start;
  scroll-margin-top: var(--header-h);
  /* Load-bearing height. Section and plate fill viewport below the header. */
  height: calc(100svh - var(--header-h));
}

.lookbook-stack:focus {
  outline: none;
}

.lookbook-stack-stage {
  position: relative;
  top: auto;
  height: calc(100svh - var(--header-h));
  margin: 0 var(--stack-inset);
  width: auto;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  gap: 0.75rem;
  background-color: var(--paper);
  touch-action: pan-y;
}

.lookbook-stack:not(.lookbook-stack-active) .lookbook-stack-stage {
  pointer-events: none;
}

.lookbook-stack-card {
  grid-area: 1 / 1;
  margin: 0;
  overflow: hidden;
  background-color: var(--paper);
  z-index: 1;
  will-change: transform, opacity;
  transition:
    transform var(--stack-speed) var(--stack-ease),
    opacity var(--stack-speed) var(--stack-ease);
}

/* base -> z1, prev -> z2, active -> z3, next -> z4 */
.lookbook-stack-card.is-prev { z-index: 2; }
.lookbook-stack-card.is-active { z-index: 3; }
.lookbook-stack-card.is-next { z-index: 4; }

/* Departing photo: lifts to -24% of its own height and dims to 0.92. */
.lookbook-stack-card.is-prev {
  transform: translate3d(0, var(--stack-travel), 0);
  opacity: var(--stack-depart-opacity);
}

/* Incoming photo: rises from fully below the stage. */
.lookbook-stack-card.is-next {
  transform: translate3d(0, 100%, 0);
  opacity: 1;
}

/* Resting state. */
.lookbook-stack-card.is-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Hidden neighbours. */
.lookbook-stack-card.is-idle {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

/* Contain photo with natural margins for quiet luxury balance */
.lookbook-stack-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.lookbook-stack-meta {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  padding: 1.75rem 2.5rem;
  background: linear-gradient(to top, rgba(28, 26, 23, 0.6) 0%, rgba(28, 26, 23, 0.15) 70%, transparent 100%);
  pointer-events: none;
}

.lookbook-stack-index {
  color: var(--sand);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
}

.lookbook-stack-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--surface);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

/* Lookbook Pagination Bullets */
.lookbook-stack-pagination {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 5.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1.5rem;
}

.lookbook-stack-bullet {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lookbook-stack-bullet::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--surface);
  opacity: 0.45;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.lookbook-stack-bullet:hover::after {
  opacity: 0.8;
}

.lookbook-stack-bullet.active::after {
  opacity: 1;
  transform: scale(1.45);
}

.lookbook-stack-bullet:focus-visible {
  outline: 1px solid var(--surface);
  outline-offset: -4px;
}

.hero-spread-section {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid var(--rule);
  background-color: var(--ink);
  box-shadow: 0 -24px 60px rgba(18, 16, 14, 0.45);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
}

/* Full-bleed stage. The reference slide is viewport-height and edge to edge,
   so this one breaks out of .unified-dashboard-container on purpose. */
.hero-spread-stage {
  position: relative;
  height: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: calc(var(--header-h) * 0.35);
  overflow: hidden;
  isolation: isolate;
}

.hero-stage-media,
.hero-stage-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-stage-img {
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transform: scale(1.01);
  animation: hero-stage-drift 26s ease-in-out infinite alternate;
}

@keyframes hero-stage-drift {
  from { transform: scale(1.01); }
  to   { transform: scale(1.07); }
}

/* Subtle chiaroscuro atmospheric veil for Brunello campaign overlay */
.hero-stage-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(16, 14, 12, 0.38) 0%, rgba(16, 14, 12, 0.20) 55%, rgba(16, 14, 12, 0.48) 100%),
    linear-gradient(to bottom, rgba(16, 14, 12, 0.26) 0%, rgba(16, 14, 12, 0.12) 40%, rgba(16, 14, 12, 0.44) 100%);
  z-index: 1;
}

.hero-stage-body {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 2rem;
  text-align: center;
  color: var(--surface);
}

.hero-stage-eyebrow {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--surface);
  letter-spacing: 3.6px;
  text-transform: uppercase;
  margin-bottom: 0.95rem;
  opacity: 0.96;
}

.hero-stage-title {
  font-family: var(--font-ui);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.35px;
  color: var(--surface);
  margin-bottom: 2.25rem;
  text-wrap: balance;
  opacity: 0.94;
}

/* Brunello Minimalist Underlined Search Bar */
/* Accessibility visually hidden utility */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



/* 3.2px tracking on the overlay call to action. Measured on the reference
   full-bleed overlay only, not on grid labels. */
.btn-stage-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border: 1px solid var(--surface);
  color: var(--surface);
  background-color: transparent;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  font-weight: 400;
  padding: 0 2.25rem;
  min-height: 50px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-stage-link:hover {
  background-color: var(--surface);
  color: var(--ink);
}

.btn-stage-link-quiet {
  border-color: transparent;
  opacity: 0.85;
}

.btn-stage-link-quiet:hover {
  background-color: transparent;
  border-color: var(--surface);
  color: var(--surface);
}

.hero-stage-caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 2.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  color: var(--surface);
  pointer-events: none;
}

.hero-stage-caption .caption-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--surface);
}

.hero-stage-caption .micro-caps {
  color: var(--surface);
  opacity: 0.75;
}

/* Catalog "view all" control. It cannot reuse .btn-stage-link: that style is
   transparent-on-image, and it would be invisible on the light catalog. */
.btn-catalog-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 2.25rem;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.btn-catalog-view-all:hover {
  background-color: var(--btn-dark-hover);
  border-color: var(--btn-dark-hover);
}

/* ==========================================================================
   PHILOSOPHY INTERMEZZO BANNER (SOLOMEO ETHOS)
   ========================================================================== */

.philosophy-banner {
  position: relative;
  z-index: 1;
  height: calc(100svh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  background-color: var(--paper);
  border-bottom: 1px solid var(--rule);
  text-align: center;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.philosophy-inner {
  max-width: 920px;
  margin: 0 auto;
  will-change: transform, opacity;
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.philosophy-quote {
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.4vw, 2.5rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  font-style: italic;
  margin-bottom: 1.75rem;
}

.philosophy-author {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ==========================================================================
   CATALOGUE SECTION & BRUNELLO 3-COLUMN BOUTIQUE GRID (PLP)
   ========================================================================== */

.catalog-section {
  position: relative;
  z-index: 3;
  background-color: var(--paper);
  box-shadow: 0 -20px 50px rgba(18, 16, 14, 0.15);
  padding: 5rem 0 7rem 0;
}

.boutique-plp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.plp-header-left {
  display: flex;
  flex-direction: column;
}

.section-counter {
  margin-bottom: 0.35rem;
}

.section-title {
  font-size: clamp(2.25rem, 4.2vw, 3.25rem);
  font-weight: 300;
  letter-spacing: -0.01em;
}

.plp-header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
}

.grid-mode-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.view-mode-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.view-mode-btn.active, .view-mode-btn:hover {
  color: var(--ink);
}

.btn-filter-trigger {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 500;
  color: var(--ink);
  min-height: 44px;
  padding: 0 0.5rem;
  text-transform: uppercase;
}

.btn-filter-trigger:hover {
  opacity: 0.7;
}

/* Category Quick Filter Bar */
.category-filter-bar {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 3rem;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.35rem;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.25s var(--ease-editorial);
  cursor: pointer;
  font-weight: 500;
}

.filter-pill:hover, .filter-pill.active {
  background-color: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

/* Color Family Filter Bar (Brunello Color Taxonomy) */
.color-filter-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2.25rem;
}

.color-filter-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted);
}

.color-filter-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.color-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  background-color: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.25s var(--ease-editorial);
  cursor: pointer;
  font-weight: 500;
  border-radius: 0;
}

.color-filter-pill:hover {
  border-color: var(--ink);
}

.color-filter-pill.active,
.color-filter-pill[aria-pressed="true"] {
  background-color: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.color-filter-pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Product Tile Color Families Annotation */
.product-tile-families {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Empty State when zero products match color filter */
.product-grid-empty {
  padding: 4rem 1.5rem;
  text-align: center;
  background-color: var(--paper);
  border: 1px dashed var(--rule);
  margin-bottom: 3rem;
}

.product-grid-empty .empty-message {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
  font-style: italic;
}

.btn-reset-color-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.5rem;
  background-color: var(--ink);
  color: var(--surface);
  border: 1px solid var(--ink);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s var(--ease-editorial);
  font-family: inherit;
  border-radius: 0;
}

.btn-reset-color-filter:hover {
  background-color: transparent;
  color: var(--ink);
}

.btn-reset-color-filter:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Slide-Over Filter Drawer */
.filter-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-bg);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.filter-drawer-overlay.active {
  visibility: visible;
  opacity: 1;
}

.filter-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  width: 420px;
  max-width: 88vw;
  background-color: var(--surface);
  z-index: 1000;
  box-shadow: -4px 0 24px var(--overlay-bg);
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-editorial);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.filter-drawer-overlay.active .filter-drawer {
  transform: translateX(0);
}

.filter-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--rule);
}

.filter-drawer-title {
  color: var(--ink);
  font-weight: 600;
}

.filter-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.filter-drawer-body {
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1;
}

.filter-group-title {
  margin-bottom: 0.75rem;
  color: var(--muted);
}

.filter-options-row {
  display: flex;
  gap: 0.75rem;
}

.filter-view-option {
  background-color: var(--paper);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-view-option.active {
  background-color: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.filter-drawer-footer {
  padding: 1.5rem 2rem;
  border-top: 1px solid var(--rule);
  display: flex;
  gap: 1rem;
  position: sticky;
  bottom: 0;
  background-color: var(--surface);
}

.btn-reset-filters {
  flex: 1;
  background: none;
  border: 1px solid var(--rule);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 500;
  min-height: 44px;
  cursor: pointer;
}

.btn-apply-filters {
  flex: 2;
  background-color: var(--btn-dark);
  border: none;
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}

/* Product Grid (Brunello 3-Column Mode Default, Generous Editorial Gaps) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4.5rem 2rem;
  margin-bottom: 5rem;
}

.product-grid.grid-2-mode {
  grid-template-columns: repeat(2, 1fr);
  gap: 5.5rem 3rem;
}

/* Borderless Luxury Product Tile */
.product-card-wrap {
  width: 100%;
}

.product-tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  border: 0;
  border-width: 0px;
  box-shadow: none;
  position: relative;
}

.product-tile-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--sand);
  overflow: hidden;
  border: none;
}

.product-tile-img-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.product-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-editorial);
}

.product-tile:hover .product-card-img {
  transform: scale(1.025);
}

/* Floating Frosted Glass Wishlist Heart Button */
.tile-wishlist-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background-color: var(--frosted-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  z-index: 2;
  transition: background-color 0.2s ease, transform 0.2s ease;
  padding: 0;
}

.tile-wishlist-btn:hover {
  background-color: var(--surface);
  transform: scale(1.08);
}

.tile-wishlist-btn.active svg {
  fill: var(--ink);
  stroke: var(--ink);
}

/* Subtle Bottom-Left Slider Dash Indicator */
.tile-slider-indicator {
  position: absolute;
  bottom: 14px;
  left: 16px;
  width: 20px;
  height: 2px;
  background-color: var(--ink);
  opacity: 0.5;
  z-index: 2;
}

.product-tile-info {
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.product-tile-title-link {
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.product-tile-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.3px;
  color: var(--ink);
  transition: opacity 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-tile-title-link:hover .product-tile-title {
  opacity: 0.7;
}

.product-tile-price {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.6px;
  color: var(--ink);
  margin-top: 0.15rem;
}

.product-tile-colorway {
  margin-top: 0.25rem;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--muted);
  font-weight: 500;
}

.plp-pagination-row {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

/* ==========================================================================
   ATELIER STORY & CRAFTSMANSHIP NARRATIVE
   ========================================================================== */

.craft-pillars-section,
.atelier-story-section {
  padding: 6.5rem 0;
  background-color: var(--sand);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.atelier-story-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.atelier-story-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.atelier-story-title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--ink);
  margin-bottom: 1.75rem;
  line-height: 1.25;
}

.atelier-story-lead {
  font-family: var(--font-ui);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.95;
  color: var(--muted);
  margin-bottom: 0;
  letter-spacing: 0.2px;
}

/* Fallback legacy compatibility */
.craft-pillars-grid {
  display: none;
}

/* ==========================================================================
   PRODUCT DETAIL PAGE (PDP) - EDITORIAL SPLIT
   ========================================================================== */

.breadcrumb-nav {
  padding: 1.75rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
}

.breadcrumb-nav a {
  color: var(--muted);
  text-decoration: none;
  min-height: 44px;
  padding: 0 0.35rem;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-nav a:hover {
  color: var(--ink);
}

.breadcrumb-nav span[aria-current="page"] {
  word-break: break-word;
  color: var(--ink);
}

/* Brunello PDP Luxury Boutique Anatomy (2-Column Split) */
.boutique-pdp-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 5rem;
  padding-bottom: 6rem;
  align-items: flex-start;
}

.boutique-pdp-layout > * {
  min-width: 0;
}

/* Gallery Column (Portrait 3:4 with 6 Vertical Dots) */
.pdp-gallery-column {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  min-width: 0;
  max-width: 100%;
}

.pdp-main-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--sand);
  overflow: hidden;
  border: none;
}

.pdp-main-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* 6 Vertical Slider Dots on Right Edge */
.pdp-vertical-dots {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.pdp-dot {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}

.pdp-dot::after {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--ink);
  opacity: 0.35;
  transition: all 0.25s ease;
}

.pdp-dot.active::after, .pdp-dot:hover::after {
  opacity: 1;
  transform: scale(1.4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Gallery Column Order (ADR-013: one frame, the colour owns it) */
.pdp-gallery-column > .pdp-main-frame {
  order: 0;
}

.pdp-gallery-column > .mobile-variant-rail {
  order: 1;
}

.pdp-gallery-column > .gallery-thumbnails {
  order: 2;
}

/* Colour Badge on the Main Frame (ADR-013) */
.pdp-colour-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 12;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 6px 10px;
  background: var(--gold);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.pdp-colour-badge[hidden] {
  display: none;
}

.pdp-colour-badge-label {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  opacity: 0.9;
}

.pdp-colour-badge-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

/* Thumbnail Strip */
.gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.6rem;
}

.thumb-frame {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  background-color: var(--sand);
  border: 1px solid var(--sand-deep);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.thumb-frame:hover, .thumb-frame.active {
  border-color: var(--ink);
  opacity: 0.9;
}

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

/* Mobile Variant Horizontal Carousel (<=768px) */
.mobile-variant-rail {
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1rem 0;
  contain: paint;
  box-sizing: border-box;
}

.mobile-variant-track {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0.25rem;
  scrollbar-width: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.mobile-variant-track::-webkit-scrollbar {
  display: none;
}

.mobile-variant-spacer {
  flex: 0 0 auto;
  display: block;
  width: 0;
  pointer-events: none;
}

.mobile-variant-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 62px;
  height: 62px;
  min-width: 62px;
  box-sizing: border-box;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--rule);
  background-color: var(--surface);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  scroll-snap-align: start;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mobile-variant-item img {
  width: 40px;
  height: 53px;
  object-fit: cover;
  border-radius: 2px;
  display: block;
  flex-shrink: 0;
}

.mobile-variant-name {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}

.mobile-variant-item:hover {
  border-color: var(--ink);
}

.mobile-variant-item.active {
  border-color: var(--ink);
  border-width: 2px;
  padding: 3px 11px 3px 3px;
  background-color: var(--sand);
}

.mobile-variant-item.active .mobile-variant-name {
  font-weight: 600;
}

/* Product Purchase Rail */
.pdp-info-rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.pdp-title {
  font-family: var(--font-ui);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0.3px;
}

.pdp-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.pdp-price {
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 300;
  letter-spacing: 0.6px;
  color: var(--ink);
}

.pdp-action-icons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pdp-icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: none;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.2s ease;
}

.pdp-icon-btn:hover, .pdp-icon-btn.active {
  background-color: var(--sand);
  border-color: var(--ink);
}

.pdp-icon-btn.active svg {
  fill: var(--ink);
  stroke: var(--ink);
}

/* Solid Black BUY CTA Button (Brunello #1a202c Parity) */
.pdp-buy-block {
  width: 100%;
  margin-top: 0.5rem;
}

.btn-pdp-buy {
  width: 100%;
  min-height: 52px;
  background-color: var(--btn-dark);
  color: var(--surface);
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-pdp-buy:hover {
  background-color: var(--btn-dark-hover);
}

.pdp-colorway-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--sand);
}

/* Selected Colorway & Active SKU Display */
.active-sku-display {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 1.25rem 0 0.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sand);
  font-size: 13px;
  color: var(--ink);
}

.active-sku-label {
  letter-spacing: 0.3px;
}

.active-sku-label strong {
  font-weight: 600;
  color: var(--ink);
}

.active-sku-code {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Desktop Variant Photo Grid (ADR-011: 3:4 photo plus the colour name) */
.desktop-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 1rem 0 1.5rem 0;
}

.swatch-tile {
  width: 100%;
  height: auto;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  line-height: 1.25;
  box-sizing: border-box;
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.swatch-tile:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.swatch-tile.active,
.swatch-tile[aria-checked="true"] {
  border: 2px solid var(--ink);
  padding: 3px;
}

.swatch-tile:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.swatch-tile img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 1px;
  display: block;
}

.swatch-name {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  overflow-wrap: anywhere;
}

.swatch-tile.active .swatch-name,
.swatch-tile[aria-checked="true"] .swatch-name {
  font-weight: 600;
}

/* Minimalist Luxury Accordions */
.pdp-accordions {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 0.75rem;
}

.pdp-accordion-item {
  border-bottom: 1px solid var(--sand);
}

.pdp-accordion-item:last-child {
  border-bottom: none;
}

.pdp-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ink);
  cursor: pointer;
  padding: 0.85rem 0;
  text-align: left;
}

.pdp-chevron {
  transition: transform 0.3s ease;
  color: var(--muted);
}

.pdp-accordion-item.open .pdp-chevron {
  transform: rotate(90deg);
  color: var(--ink);
}

.pdp-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.pdp-accordion-item.open .pdp-accordion-content {
  max-height: 500px;
  padding-bottom: 1.35rem;
}

.pdp-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem 1.75rem;
  margin-bottom: 1.25rem;
}

.spec-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  display: block;
}

.spec-val {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: block;
}

.pdp-description-text {
  white-space: pre-line;
  font-size: 13px;
  line-height: 1.75;
}

/* Dual Underlined Boutique Service Links */
.pdp-boutique-services {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 1.25rem 0;
}

.pdp-service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 500;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--ink);
  min-height: 44px;
  transition: opacity 0.2s ease;
}

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

/* Cross-Sell Recommendations Section */
.pdp-cross-sell-section {
  margin-top: 5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--rule);
}

.cross-sell-tabs-header {
  display: flex;
  gap: 3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.cross-sell-tab-btn {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--muted);
  cursor: pointer;
  padding-bottom: 1rem;
  position: relative;
  min-height: 44px;
  transition: color 0.2s ease;
}

.cross-sell-tab-btn.active {
  color: var(--ink);
  font-weight: 500;
}

.cross-sell-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ink);
}

.cross-sell-panel {
  display: none;
}

.cross-sell-panel.active {
  display: block;
}

.cross-sell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
}

.cross-sell-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.cross-sell-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--sand);
  overflow: hidden;
  border: none;
}

.cross-sell-img-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.cross-sell-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.cross-sell-card:hover .cross-sell-image-frame img {
  transform: scale(1.025);
}

.cross-sell-info {
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cross-sell-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.cross-sell-title-link {
  text-decoration: none;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.cross-sell-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cross-sell-plus-btn {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.cross-sell-plus-btn:hover {
  transform: scale(1.2);
}

.cross-sell-price {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.8px;
  color: var(--ink);
}

/* Slide-Up Variant Selection Drawer */
.variant-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--overlay-bg);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.variant-drawer-overlay.active {
  visibility: visible;
  opacity: 1;
}

.variant-drawer {
  background-color: var(--surface);
  width: 600px;
  max-width: 100vw;
  border-top: 1px solid var(--rule);
  padding: 2.25rem 2rem;
  transform: translateY(100%);
  transition: transform 0.35s var(--ease-editorial);
  box-shadow: 0 -8px 32px var(--overlay-bg);
  max-height: 80vh;
  overflow-y: auto;
}

.variant-drawer-overlay.active .variant-drawer {
  transform: translateY(0);
}

.variant-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

.variant-drawer-product-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.variant-drawer-product-price {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
}

.variant-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.variant-drawer-body {
  padding-top: 1.5rem;
}

.variant-select-label {
  margin-bottom: 1rem;
  color: var(--muted);
}

.variant-chips-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.variant-select-chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  font-size: 13px;
  min-height: 44px;
  background-color: var(--paper);
  transition: all 0.2s ease;
}

.variant-select-chip:hover {
  background-color: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.btn-shopee-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  background-color: var(--btn-dark);
  color: var(--surface);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.btn-shopee-checkout:hover {
  background-color: var(--btn-dark-hover);
}

/* Sticky Bottom BUY Bar on Scroll */
.pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--surface);
  border-top: 1px solid var(--rule);
  z-index: 90;
  transform: translateY(100%);
  transition: transform 0.3s var(--ease-editorial);
  box-shadow: 0 -4px 16px var(--overlay-bg);
}

.pdp-sticky-bar.visible {
  transform: translateY(0);
}

.pdp-sticky-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.pdp-sticky-product-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  overflow: hidden;
}

.pdp-sticky-title {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pdp-sticky-price {
  font-size: 14px;
  font-weight: 300;
  color: var(--ink);
}

.btn-sticky-buy {
  background-color: var(--btn-dark);
  color: var(--surface);
  border: none;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
  min-height: 44px;
  padding: 0 2rem;
  cursor: pointer;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.btn-sticky-buy:hover {
  background-color: var(--btn-dark-hover);
}

/* 404 Error Page */
.error-page-container {
  padding: 7rem 0;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.error-code {
  font-size: 6rem;
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--gold);
  margin-bottom: 1rem;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.75rem;
  background-color: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 2rem;
  transition: background-color 0.2s ease;
}

.btn-secondary:hover {
  background-color: var(--btn-dark-hover);
}

/* Colophon Footer */
.site-footer {
  border-top: 1px solid var(--rule);
  background-color: var(--paper);
  padding: 5rem 0 3.5rem 0;
  margin-top: auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--rule);
}

.footer-brand h4 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.footer-brand p {
  color: var(--muted);
  font-size: 13px;
  max-width: 440px;
  line-height: 1.75;
}

.footer-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.footer-links a {
  text-decoration: none;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--ink);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS & VIEWPORT CONSTRAINTS (T-12)
   ========================================================================== */

@media (max-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3.5rem 1.5rem;
  }
  .boutique-pdp-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .pdp-info-rail {
    position: static;
  }
}

@media (max-width: 900px) {
  .cross-sell-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .unified-dashboard-container {
    padding: 0 1.5rem;
  }
  .lookbook-stack {
    --stack-travel: -16%;
    --stack-inset: 0px;
  }
  .lookbook-stack-img {
    object-fit: cover;
    object-position: center top;
  }
  .lookbook-stack-meta {
    padding: 1.25rem 1.5rem;
  }
  .lookbook-stack-title {
    font-size: 1.25rem;
  }
  .lookbook-stack-pagination {
    bottom: 4.5rem;
  }
  .hero-spread-section {
    height: calc(100svh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
  .hero-spread-stage {
    height: 100%;
    min-height: calc(100svh - var(--header-h));
  }
  .hero-stage-body {
    padding: 0 1.5rem;
  }
  .hero-stage-lead {
    font-size: 0.9rem;
    margin-bottom: 2rem;
  }
  .btn-stage-link {
    padding: 0 1.5rem;
    letter-spacing: 2.4px;
  }
  .hero-stage-caption {
    padding: 1.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .hero-stage-caption .caption-title {
    font-size: 1.05rem;
  }
  .product-grid, .product-grid.grid-2-mode {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.75rem 1.25rem;
  }
  .atelier-story-section {
    padding: 4.5rem 1.25rem;
  }
  .atelier-story-title {
    font-size: 1.75rem;
  }
  .atelier-story-lead {
    font-size: 0.95rem;
    line-height: 1.8;
  }
  .footer-top {
    flex-direction: column;
    gap: 2rem;
  }
  .footer-links {
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* Variant Presentation Breakpoint: Hide desktop swatches, show mobile carousel */
  .desktop-swatch-grid {
    display: none !important;
  }
  .mobile-variant-rail {
    display: block !important;
  }
}

@media (max-width: 768px) {
  /* On small screens the variant rail is the colour control. It sits
     between the hero and the editorial thumb strip. */
  .pdp-gallery-column > .mobile-variant-rail {
    order: 1;
  }

  .pdp-gallery-column > .gallery-thumbnails {
    order: 2;
  }
}

@media (min-width: 769px) {
  /* Variant Presentation: Desktop swatches visible, mobile carousel hidden */
  .desktop-swatch-grid {
    display: grid !important;
  }
  .mobile-variant-rail {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .unified-dashboard-container {
    padding: 0 1.25rem;
  }
  .hero-spread-section {
    height: calc(100svh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
  .hero-spread-stage {
    height: 100%;
    min-height: calc(100svh - var(--header-h));
  }
  .hero-stage-body {
    padding: 0 1.25rem;
  }
  .hero-stage-eyebrow {
    letter-spacing: 2.6px;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
  }
  .hero-stage-title {
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
    line-height: 1.4;
  }
  .hero-stage-caption {
    padding: 1.25rem;
  }
  .product-grid, .product-grid.grid-2-mode {
    grid-template-columns: 1fr;
    gap: 3rem 0;
  }
  .category-filter-bar {
    gap: 0.5rem;
    padding-bottom: 2rem;
  }
  .filter-pill {
    font-size: 10px;
    padding: 0 1rem;
  }
  .color-filter-bar {
    gap: 0.4rem;
  }
  .color-filter-pill {
    font-size: 10px;
    padding: 0 0.85rem;
    min-height: 44px;
  }
  .variant-chips-grid {
    grid-template-columns: 1fr;
  }
  .cross-sell-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem 0;
  }
  .cross-sell-tabs-header {
    gap: 1.5rem;
  }
  .cross-sell-tab-btn {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .unified-dashboard-container {
    padding: 0 1rem;
  }
}

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .hero-stage-img {
    animation: none;
    transform: none;
  }
  .lookbook-stack {
    height: auto;
  }
  .lookbook-stack-stage {
    height: auto;
    margin: 0;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 1px;
  }
  .lookbook-stack-card,
  .lookbook-stack-card.is-prev,
  .lookbook-stack-card.is-active,
  .lookbook-stack-card.is-next,
  .lookbook-stack-card.is-idle,
  .lookbook-stack-card:not(.is-active) {
    position: relative;
    grid-area: auto;
    transform: none;
    opacity: 1;
    transition: none;
    aspect-ratio: 3 / 4;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
  }
  .lookbook-stack-pagination {
    display: none;
  }
  .mobile-variant-track {
    scroll-behavior: auto !important;
  }
  .swatch-tile,
  .mobile-variant-item {
    transition: none !important;
  }
}