/* For the low — a tactile archive rail, isolated from the main product grid. */
.for-the-low {
  --low-ink: #f3efe7; --low-muted: #b4b6b8; --low-accent: #c9b4ef;
  position: relative; isolation: isolate; overflow: hidden; color: var(--low-ink);
  padding: 78px 0 34px; background: #15171a;
  background-image: radial-gradient(ellipse at 50% 44%, #4c5055 0, #25292e 38%, #111316 76%);
  border-block: 1px solid #ffffff26; scroll-margin-top: 78px;
}
.low-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: 0 6%; position: relative; z-index: 2; }
.low-heading .eyebrow { color: var(--low-accent); margin-bottom: 16px; font-size: 11px; }
.low-heading h2 { font-size: clamp(72px, 9.3vw, 144px); line-height: .83; letter-spacing: -.035em; }
.low-heading h2 span { color: var(--low-accent); }
.low-intro { max-width: 250px; padding-bottom: 5px; }
.low-intro p { font-size: 16px; line-height: 1.55; }
.low-intro small { display: block; margin-top: 12px; font-size: 12px; color: var(--low-muted); }
.for-the-low--archive { margin-top: 54px; }
.for-the-low--archive .low-heading h2 { font-size: clamp(68px, 8vw, 120px); }
.for-the-low--outlet .low-heading h2 { font-size: clamp(66px, 8.8vw, 132px); }
.low-browse { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 36px 6% 0; border-top: 1px solid #ffffff26; padding-top: 20px; }
.low-browse label { font-size: 10px; letter-spacing: .12em; color: var(--low-muted); }
.low-browse select { max-width: min(420px, 65%); min-height: 44px; border: 1px solid #ffffff45; border-radius: 0; background: #202328; color: var(--low-ink); padding: 10px 32px 10px 12px; font: 12px Barlow, sans-serif; }
.low-browse select:focus-visible { outline: 2px solid var(--low-accent); outline-offset: 4px; }
.low-stage { position: relative; height: 500px; margin-top: 45px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.low-stage[data-dragging="true"] { cursor: grabbing; }
.low-rail { position: absolute; top: 0; left: 50%; width: max(100%, 1200px); height: 92px; transform: translateX(-50%); overflow: visible; pointer-events: none; filter: drop-shadow(0 7px 8px #0008); }
.low-floor { position: absolute; bottom: 12px; left: 14%; right: 14%; height: 27px; background: #0009; border-radius: 50%; filter: blur(20px); pointer-events: none; }
.low-pieces { height: 100%; position: relative; }
.low-piece { --piece-width: 310px; position: absolute; top: 44px; left: 50%; width: var(--piece-width); height: var(--piece-width); padding: 0; border: 0; background: none; color: inherit; transform-origin: 50% 0; text-align: center; -webkit-tap-highlight-color: transparent; cursor: pointer; pointer-events: none; }
.low-piece:focus-visible { outline: 2px solid var(--low-accent); outline-offset: 8px; border-radius: 6px; }
.low-piece[aria-pressed="false"] { filter: brightness(.82); }

.low-hanging { position: absolute; inset: 0; transform-origin: 50% 0; transform: rotate(var(--sway, 0deg)); pointer-events: none; }
.low-turn { position: absolute; inset: 0; pointer-events: none; }
.low-view { position: absolute; inset: 0; overflow: hidden; pointer-events: none; filter: drop-shadow(10px 15px 11px #0006); }
.low-atlas { position: absolute; top: 0; left: 0; width: 300%; height: 200%; max-width: none; pointer-events: none; user-select: none; }
.low-garment { display: none; }
.low-hit { position: absolute; inset: 5% 31% 8%; pointer-events: auto; }
.low-piece[data-front="true"] .low-hit { inset-inline: 9%; }
.low-piece[data-front="true"] { filter: brightness(1); }
.low-piece[data-image-error="true"] .low-atlas { display: none; }
.low-piece[data-image-error="true"] .low-garment { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.low-tag { position: absolute; z-index: 2; top: 35px; left: calc(50% + 14px); min-width: 58px; padding: 13px 7px 9px; background: #ece8df; color: #17181b; border: 1px solid #bdbbb4; box-shadow: 2px 5px 8px #0004; border-radius: 2px; transform: rotate(8deg); pointer-events: auto; transform-origin: 50% -23px; }
.low-tag:before { content: ''; position: absolute; height: 32px; width: 1px; background: #b3afa5; left: 50%; top: -27px; }
.low-tag:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #46464a; top: 5px; left: calc(50% - 2px); }
.low-tag-price { display: block; font: 700 18px/1.2 Barlow, sans-serif; }
.for-the-low--outlet .low-tag { min-width: 72px; }
.low-tag-price s { font-size: 11px; font-weight: 400; display: block; color: #5c535f; }
.low-tag-price .low-discount { display: block; font-size: 9px; letter-spacing: .025em; padding-block: 3px; color: #673090; }
.low-tag-price .low-price-slash { display: none; }
.low-tag-price strong { display: block; font-size: 19px; }
.low-tag-price .low-price-prefix { display: block; font-size: 9px; }
.low-price s, .low-preview-price s { color: var(--low-muted); }
.low-price strong, .low-preview-price strong { color: #e3caff; font-weight: 700; font-size: 1.3em; }
.low-discount { font-size: .75em; font-weight: 700; letter-spacing: .035em; }
.low-stock-note { display: block; margin-top: 7px; font-size: 12px; color: var(--low-muted); }
.low-tag small { font-size: 8px; letter-spacing: .08em; display: block; margin-top: 4px; }
.low-info { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; margin: 0 6%; padding: 24px 0; border-top: 1px solid #ffffff30; }
.low-selection { min-width: 0; }
.low-selection small { display: block; color: var(--low-muted); font-size: 11px; letter-spacing: .11em; margin-bottom: 9px; }
.low-selection h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1; }
.low-price { margin-top: 10px; font-size: 14px; color: var(--low-muted); min-height: 20px; }
.low-navigation { display: flex; gap: 14px; align-items: center; }
.low-navigation button { width: 46px; height: 46px; border: 1px solid #ffffff5c; border-radius: 50%; background: transparent; color: var(--low-ink); font-size: 21px; transition: background 150ms, transform 150ms; }
.low-navigation button:hover:not(:disabled) { background: #ffffff14; }
.low-navigation button:active:not(:disabled) { transform: scale(.95); }
.low-navigation button:disabled { opacity: .3; cursor: default; }
.low-count { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--low-muted); min-width: 45px; text-align: center; }
.low-shop { justify-self: end; border-bottom: 1px solid #d7c0ff; padding: 14px 0; min-height: 44px; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 600; }
.low-shop span { margin-left: 28px; font-size: 19px; }
.low-utility { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 5px 6% 0; }
.low-hint { font-size: 12px; color: var(--low-muted); }
.low-motion { min-height: 44px; padding: 10px 0 10px 18px; background: none; border: 0; color: var(--low-muted); font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.for-the-low button:focus-visible,.for-the-low a:focus-visible { outline: 2px solid var(--low-accent); outline-offset: 5px; }
.low-static { display: flex; overflow-x: auto; padding: 28px 6%; gap: 25px; }
.low-static a { flex: 0 0 220px; font-size: 14px; line-height: 1.5; }
.low-static img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.for-the-low:not([data-ready]) .low-stage,.for-the-low:not([data-ready]) .low-info,.for-the-low:not([data-ready]) .low-utility { display: none; }
.for-the-low[data-ready] .low-static { display: none; }
@media(max-width: 767px) {
  .for-the-low { padding: 52px 0 24px; }
  .low-heading { display: block; padding-inline: 6%; }
  .low-heading h2 { font-size: clamp(68px, 15vw, 108px); }
  .for-the-low--outlet .low-heading h2 { font-size: clamp(58px, 14.8vw, 100px); }
  .for-the-low--archive .low-heading h2 { font-size: clamp(62px, 14.8vw, 100px); }
  .low-browse { display: block; margin-top: 24px; }
  .low-browse select { display: block; width: 100%; max-width: none; margin-top: 10px; }
  .low-heading .eyebrow { margin-bottom: 15px; }
  .low-intro { max-width: none; margin-top: 22px; }
  .low-intro p { font-size: 14px; }
  .low-intro small { margin-top: 6px; font-size: 12px; }
  .low-stage { height: 370px; margin-top: 25px; }
  .low-piece { top: 44px; }
  .low-tag { min-width: 51px; top: 30px; }
  .low-tag-price { font-size: 16px; }
  .low-info { grid-template-columns: 1fr auto; gap: 18px 10px; padding-top: 22px; }
  .low-selection { grid-column: 1 / -1; }
  .low-selection h3 { font-size: 30px; }
  .low-navigation { gap: 10px; }
  .low-shop { font-size: 11px; }
  .low-shop span { margin-left: 12px; }
  .low-utility { align-items: start; margin-top: 2px; }
  .low-hint { max-width: 190px; line-height: 1.5; padding-top: 13px; }
  .low-motion { font-size: 11px; }
}
@media(prefers-reduced-motion: reduce) {
  .for-the-low *, .for-the-low *:before { transition: none !important; }
  .low-hanging { transform: none !important; }
  .low-motion { display: none; }
}

/* Product previews are top-layer dialogs: first tap always has a visible result. */
.low-preview { width: min(960px, calc(100vw - 32px)); max-width: 960px; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #76727c; background: #191c20; color: #f3efe7; overflow: auto; text-align: left; }
.low-preview::backdrop { background: #020408cc; backdrop-filter: blur(7px); }
.low-preview-layout { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
.low-preview-art { padding: 48px 10px 24px; background: radial-gradient(ellipse at center, #51555a, #24282d 70%); }
.low-preview-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(12px 22px 15px #0008); }
.low-preview-copy { padding: 70px 36px 40px; }
.low-preview .eyebrow { font-size: 10px; color: #c9b4ef; margin: 0 0 24px; }
[data-low-preview-title] { font-size: clamp(38px, 5vw, 66px); line-height: .95; margin: 0 0 20px; }
.low-preview-price { color: #f3efe7; font-size: 18px; line-height: 1.5; margin: 0 0 16px; }
.low-preview-note { font-size: 14px; line-height: 1.6; color: #b4b6b8; margin: 0 0 28px; }
.low-preview-close { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; padding: 8px 12px; min-height: 44px; background: #191c20; color: #f3efe7; font-size: 13px; }
.low-preview-close span { margin-left: 12px; font-size: 24px; vertical-align: -2px; }
.low-preview-shop { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px; min-height: 54px; background: #c9b4ef; color: #16131c; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.low-preview-back { display: block; background: none; border: 0; padding: 14px 0; min-height: 44px; color: #b4b6b8; text-decoration: underline; text-underline-offset: 4px; margin-top: 10px; font-size: 13px; }
.low-preview[data-instant="true"] { animation: none; }
@media(max-width: 767px) { .low-preview-layout { grid-template-columns: 1fr; } .low-preview-art { padding: 36px 10px 0; } .low-preview-art img { max-height: 36dvh; } .low-preview-copy { padding: 22px 24px 20px; } .low-preview .eyebrow { margin-bottom: 14px; } [data-low-preview-title] { font-size: 38px; margin-bottom: 12px; } .low-preview-note { margin-bottom: 18px; } }

body:has(.low-preview[open]) { overflow: hidden; }