:root {
  --fashion-bg: #0d0f16;
  --fashion-surface: #151924;
  --fashion-surface-soft: #1a1f2c;
  --fashion-surface-elevated: #202636;
  --fashion-border: rgba(255, 255, 255, 0.08);
  --fashion-border-strong: rgba(255, 255, 255, 0.14);
  --fashion-text: #f6f7fa;
  --fashion-text-soft: #adb2bf;
  --fashion-accent: #ffffff;
  --fashion-accent-soft: rgba(255, 255, 255, 0.1);
  --fashion-warm: #d38f68;
  --fashion-warm-soft: rgba(211, 143, 104, 0.14);
  --fashion-kids: #7d73ff;
  --fashion-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
}

html[data-theme="light"] {
  --fashion-bg: #f4f5f8;
  --fashion-surface: #ffffff;
  --fashion-surface-soft: #fafafd;
  --fashion-surface-elevated: #ffffff;
  --fashion-border: rgba(16, 18, 24, 0.08);
  --fashion-border-strong: rgba(16, 18, 24, 0.12);
  --fashion-text: #12141a;
  --fashion-text-soft: #6b7282;
  --fashion-accent: #12141a;
  --fashion-accent-soft: rgba(18, 20, 26, 0.06);
  --fashion-warm: #b8734d;
  --fashion-warm-soft: rgba(184, 115, 77, 0.12);
  --fashion-kids: #695cff;
  --fashion-shadow: 0 18px 40px rgba(17, 20, 28, 0.08);
}

body[data-category="fashion"] {
  background: var(--fashion-bg);
  color: var(--fashion-text);
}

.fashionPage {
  width: min(1500px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 24px 0 42px;
}

.fashionCard {
  background: var(--fashion-surface);
  border: 1px solid var(--fashion-border);
  border-radius: 26px;
  box-shadow: var(--fashion-shadow);
}

.fashionEyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fashion-text-soft);
  margin-bottom: 14px;
}

.fashionButton,
.fashionQuickChip,
.fashionPill,
.fashionSizePill,
.fashionCheck,
.fashionColorDotWrap,
.fashionBrandBox,
.fashionFilters__close {
  border: 1px solid var(--fashion-border);
  background: var(--fashion-surface-soft);
  color: var(--fashion-text);
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.fashionButton:hover,
.fashionQuickChip:hover,
.fashionBrandBox:hover {
  transform: translateY(-1px);
  border-color: var(--fashion-border-strong);
}

.fashionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border-radius: 999px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.fashionButton--primary {
  background: var(--fashion-accent);
  color: var(--fashion-bg);
  border-color: transparent;
}

html[data-theme="light"] .fashionButton--primary {
  color: #fff;
}

.fashionButton--soft {
  background: var(--fashion-warm-soft);
  border-color: transparent;
  color: var(--fashion-warm);
}

.fashionButton--mobile {
  display: none;
}

.fashionHero {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 18px;
  margin-bottom: 28px;
}

.fashionHero__copy,
.fashionHero__visual {
  padding: 32px;
  min-height: 440px;
}

.fashionHero__copy {
  background:
    radial-gradient(circle at top right, rgba(211, 143, 104, 0.12), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--fashion-surface) 86%, transparent), color-mix(in srgb, var(--fashion-surface-soft) 94%, transparent));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fashionHero__copy h1,
.fashionListingHead h1,
.fashionModeHero h1,
.fashionCreateHero h1,
.fashionEmptyState h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.fashionHero__copy p,
.fashionListingHead p,
.fashionModeHero p,
.fashionCreateHero p,
.fashionEmptyState p,
.fashionLookScene__copy p,
.fashionDetailNarrative p,
.fashionSellerCard p {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fashion-text-soft);
}

.fashionHero__actions,
.fashionFilterActions,
.fashionModeTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fashionHero__actions {
  margin-top: 24px;
}

.fashionMetricRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.fashionMetricCard {
  background: var(--fashion-surface-soft);
  border: 1px solid var(--fashion-border);
  border-radius: 18px;
  padding: 14px;
}

.fashionMetricCard strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}

.fashionMetricCard span {
  color: var(--fashion-text-soft);
  font-size: 12px;
}

.fashionHero__visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.08), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--fashion-surface-elevated) 95%, transparent), color-mix(in srgb, var(--fashion-surface-soft) 90%, transparent));
}

.fashionVisualTile {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,.08)),
    var(--fashion-hero-image, url('/assets/img/category-photos/fashion.jpg')) center/cover no-repeat;
  min-height: 176px;
  border: 1px solid var(--fashion-border);
}

.fashionVisualTile--tall {
  min-height: 100%;
  grid-row: span 2;
}

.fashionVisualTile--kids {
  background:
    linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,.08)),
    linear-gradient(135deg, rgba(125,115,255,0.58), rgba(211,143,104,0.28)),
    var(--fashion-hero-image, url('/assets/img/category-photos/fashion.jpg')) center/cover no-repeat;
}

.fashionVisualTile__label {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.26);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  backdrop-filter: blur(8px);
}

.fashionSection {
  margin-bottom: 26px;
}

.fashionSection--split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fashionSection__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  margin-bottom: 14px;
}

.fashionSection__head h2,
.fashionDetailNarrative h2,
.fashionSellerCard h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.fashionSection__head p {
  margin: 6px 0 0;
  color: var(--fashion-text-soft);
  font-size: 14px;
}

.fashionQuickGrid,
.fashionBrandGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.fashionQuickChip,
.fashionBrandBox {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 18px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 700;
}

.fashionPromoGrid,
.fashionProductGrid--four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fashionPromoCard {
  min-height: 220px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--fashion-border);
  background: linear-gradient(135deg, var(--fashion-surface), var(--fashion-surface-soft));
  box-shadow: var(--fashion-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fashionPromoCard__kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fashion-text-soft);
}

.fashionPromoCard strong {
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.fashionPromoCard span {
  color: var(--fashion-text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.fashionLookGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.fashionLookGrid--empty {
  grid-template-columns: minmax(0, 1fr);
}

.fashionLookScene {
  position: relative;
  isolation: isolate;
  min-height: 380px;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(to top, rgba(3,5,10,.88), rgba(3,5,10,.12) 72%),
    var(--fashion-hero-image, url('/assets/img/category-photos/fashion.jpg')) center/cover no-repeat;
  display: flex;
  align-items: flex-end;
}

.fashionLookScene__copy {
  position: relative;
  z-index: 4;
  width: min(100%, 520px);
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(4,7,13,.78);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fashionLookScene__copy strong {
  display: block;
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.05em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

.fashionLookScene__copy p {
  max-width: 420px;
  margin: 9px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

.fashionLookScene__hotspot {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(17,17,17,.2);
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.34);
  color: #111;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transform: translate(-50%, -50%);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.fashionLookScene__hotspot::before {
  content: '+';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-size: 25px;
  line-height: 1;
  font-weight: 850;
}

.fashionLookScene__hotspot:hover,
.fashionLookScene__hotspot:focus-visible {
  transform: translate(-50%, -50%) scale(1.09);
  box-shadow: 0 13px 34px rgba(0,0,0,.42), 0 0 0 5px rgba(255,255,255,.26);
}

.fashionLookScene__hotspot:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fashion-warm) 78%, #fff);
  outline-offset: 3px;
}

.fashionLookScene__hotspot--one { top: 18%; left: 24%; }
.fashionLookScene__hotspot--two { top: 35%; left: 52%; }
.fashionLookScene__hotspot--three { top: 42%; right: 8%; left: auto; }

.fashionLookList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fashionLookItem {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 12px;
  align-items: center;
  color: var(--fashion-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease;
}

.fashionLookItem:hover,
.fashionLookItem:focus-visible {
  transform: translateY(-2px);
  border-color: var(--fashion-border-strong);
}

.fashionLookItem:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--fashion-warm) 78%, #fff);
  outline-offset: 3px;
}

.fashionLookItem__thumb {
  height: 80px;
  border-radius: 16px;
  background: url('/assets/img/category-photos/fashion.jpg') center/cover no-repeat;
}

.fashionLookItem__copy small {
  display: block;
  color: var(--fashion-text-soft);
  margin-bottom: 5px;
}

.fashionLookItem__copy strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.fashionLookItem__copy span {
  color: var(--fashion-text-soft);
  font-size: 13px;
}

.fashionTextLink {
  color: var(--fashion-text-soft);
  text-decoration: none;
  font-weight: 700;
}

.fashionProductGrid--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.fashionProductGrid--listing {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fashionProductCard {
  background: var(--fashion-surface);
  border: 1px solid var(--fashion-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--fashion-shadow);
}

.fashionProductCard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  display: block;
  overflow: hidden;
  background: var(--fashion-surface-soft);
}

.fashionProductCard__media img,
.fashionDetailGallery__cover img,
.fashionDetailGallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fashionProductCard__top {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.fashionBadgeRow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fashionBadge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.fashionWish {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.26);
  color: #fff;
  border: 1px solid rgba(255,255,255,.24);
}

.fashionQuickSizes {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fashionQuickSizes span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111;
  font-size: 10px;
  font-weight: 800;
}

.fashionProductCard__body {
  padding: 14px;
}

.fashionProductCard__brand {
  color: var(--fashion-text-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.fashionProductCard__title {
  color: var(--fashion-text);
  font-size: 14px;
  text-decoration: none;
  line-height: 1.4;
  min-height: 40px;
  display: inline-block;
}

.fashionProductCard__price {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 800;
}

.fashionProductCard__meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--fashion-text-soft);
  font-size: 12px;
}

.fashionListingWrap {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
}

.fashionFilters {
  position: sticky;
  top: 82px;
  align-self: start;
  padding: 18px;
  background: var(--fashion-surface);
  border: 1px solid var(--fashion-border);
  border-radius: 24px;
  box-shadow: var(--fashion-shadow);
}

.fashionFilters__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.fashionFilters__head strong {
  font-size: 17px;
}

.fashionFilters__close {
  display: none;
  min-height: 38px;
  border-radius: 999px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.fashionFilterBlock + .fashionFilterBlock {
  border-top: 1px solid var(--fashion-border);
  padding-top: 14px;
  margin-top: 14px;
}

.fashionFilterBlock h3,
.fashionCreateSubhead {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.fashionPillGrid,
.fashionToggleGrid,
.fashionCheckList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fashionPill,
.fashionCheck,
.fashionColorDotWrap {
  position: relative;
  border-radius: 999px;
  cursor: pointer;
}

.fashionPill input,
.fashionSizePill input,
.fashionCheck input,
.fashionColorDotWrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fashionPill {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.fashionPill.is-active,
.fashionSizePill.is-active,
.fashionCheck.is-active,
.fashionCheck input:checked + span,
.fashionPill input:checked + span {
  background: var(--fashion-accent);
  color: var(--fashion-bg);
  border-color: transparent;
}

html[data-theme="light"] .fashionPill.is-active,
html[data-theme="light"] .fashionSizePill.is-active,
html[data-theme="light"] .fashionCheck.is-active {
  color: #fff;
}

.fashionField {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.fashionField span {
  font-size: 12px;
  color: var(--fashion-text-soft);
}

.fashionInput {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid var(--fashion-border);
  background: var(--fashion-surface-soft);
  color: var(--fashion-text);
  padding: 0 14px;
  font-size: 14px;
}

.fashionInput--textarea {
  min-height: 116px;
  padding: 12px 14px;
  resize: vertical;
}

.fashionFieldRow {
  display: grid;
  gap: 12px;
}

.fashionFieldRow--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fashionFieldRow--double { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.fashionSizeGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.fashionSizePill {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.fashionColorRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fashionColorDotWrap {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fashionColorDotWrap.is-active {
  box-shadow: 0 0 0 2px var(--fashion-warm);
}

.fashionColorDot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 0 0 1px var(--fashion-border-strong);
}

.fashionColorDot--black { background: #111; }
.fashionColorDot--white { background: #f3f1e8; }
.fashionColorDot--beige { background: #d9bf9e; }
.fashionColorDot--blue { background: #90aac8; }
.fashionColorDot--pink { background: #dfb4c2; }
.fashionColorDot--green { background: #819a6a; }
.fashionColorDot--red { background: #bc6b6b; }
.fashionColorDot--grey { background: #9a9da8; }

.fashionCheck {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}

.fashionCheck--tile {
  border-radius: 16px;
  padding: 10px 12px;
}

.fashionToggleGrid--compact .fashionCheck--tile {
  min-height: 44px;
}

.fashionListingMain {
  min-width: 0;
}

.fashionListingHead {
  padding: 18px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-bottom: 14px;
}

.fashionBreadcrumbs {
  color: var(--fashion-text-soft);
  font-size: 12px;
  margin-bottom: 8px;
}

.fashionListingHead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fashionDetailHero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  margin-bottom: 22px;
}

.fashionDetailGallery,
.fashionDetailInfo,
.fashionDetailNarrative,
.fashionSellerCard,
.fashionAsideCard {
  padding: 20px;
}

.fashionDetailGallery__cover {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 22px;
  background: var(--fashion-surface-soft);
}

.fashionDetailGallery__thumbs {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.fashionDetailGallery__thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--fashion-surface-soft);
}

.fashionDetailInfo__brand {
  margin-top: 10px;
  color: var(--fashion-text-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.fashionDetailInfo__price {
  margin-top: 14px;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}

.fashionBadgeRow--detail {
  margin-top: 16px;
}

.fashionDetailBlock {
  margin-top: 18px;
}

.fashionDetailBlock strong {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
}

.fashionDetailActions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fashionDetailMetaList,
.fashionSummaryList {
  margin-top: 22px;
  display: grid;
  gap: 10px;
}

.fashionDetailMetaList div,
.fashionSummaryList div,
.fashionDetailSpecGrid div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--fashion-surface-soft);
  border: 1px solid var(--fashion-border);
}

.fashionDetailMetaList span,
.fashionSummaryList span,
.fashionDetailSpecGrid span {
  color: var(--fashion-text-soft);
  font-size: 12px;
}

.fashionDetailMetaList strong,
.fashionSummaryList strong,
.fashionDetailSpecGrid strong {
  text-align: right;
  font-size: 13px;
}

.fashionDetailGrid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-bottom: 26px;
}

.fashionDetailSpecGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.fashionDetailTags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fashionDetailTags span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--fashion-border);
  background: var(--fashion-surface-soft);
  font-size: 12px;
}

.fashionModeHero,
.fashionCreateHero {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.fashionModePill {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fashion-warm-soft);
  color: var(--fashion-warm);
  font-weight: 800;
}

.fashionModeGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.fashionModeCard {
  padding: 22px;
}

.fashionModeCard h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.05em;
}

.fashionModeCard p {
  margin: 14px 0 0;
  color: var(--fashion-text-soft);
  line-height: 1.6;
}

.fashionModeCard--recommended {
  border-color: color-mix(in srgb, var(--fashion-warm) 44%, var(--fashion-border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fashion-warm) 35%, transparent), var(--fashion-shadow);
}

.fashionModeTags {
  margin-top: 18px;
}

.fashionModeTags span,
.fashionModeFacts li,
.fashionAlert {
  border-radius: 16px;
}

.fashionModeTags span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 12px;
  background: var(--fashion-surface-soft);
  border: 1px solid var(--fashion-border);
  font-size: 12px;
  font-weight: 700;
}

.fashionModeFacts {
  margin: 18px 0 20px;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: var(--fashion-text-soft);
  line-height: 1.55;
}

.fashionModeFacts--aside {
  margin-top: 16px;
}

.fashionCreateLayout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
}

.fashionCreateMain {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.fashionCreateSection {
  padding: 20px;
}

.fashionCreateAside {
  position: sticky;
  top: 82px;
  align-self: start;
}

.fashionAsideCard {
  padding: 20px;
}

.fashionAlert {
  padding: 14px 18px;
  background: var(--fashion-surface);
  border: 1px solid var(--fashion-border);
  color: var(--fashion-text);
}

.fashionAlert--error {
  border-color: rgba(220, 90, 90, 0.28);
  color: #ffb0b0;
}

html[data-theme="light"] .fashionAlert--error {
  color: #a22d2d;
}

.fashionEmptyState {
  padding: 28px;
  text-align: center;
}

.fashionEmptyState p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.fashionInput,
.fashionButton,
.fashionQuickChip,
.fashionBrandBox,
.fashionPill,
.fashionSizePill,
.fashionCheck,
.fashionColorDotWrap,
.fashionProductCard,
.fashionPromoCard,
.fashionLookItem,
.fashionFilters,
.fashionModeCard,
.fashionCreateSection,
.fashionAsideCard,
.fashionModeHero,
.fashionCreateHero,
.fashionListingHead,
.fashionDetailGallery,
.fashionDetailInfo,
.fashionDetailNarrative,
.fashionSellerCard,
.fashionEmptyState {
  backdrop-filter: blur(0);
}

@media (max-width: 1180px) {
  .fashionHero,
  .fashionLookGrid,
  .fashionDetailHero,
  .fashionDetailGrid,
  .fashionCreateLayout {
    grid-template-columns: 1fr;
  }

  .fashionModeGrid,
  .fashionPromoGrid,
  .fashionProductGrid--listing,
  .fashionProductGrid--four,
  .fashionQuickGrid,
  .fashionBrandGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fashionCreateAside {
    position: static;
  }
}

@media (max-width: 920px) {
  .fashionPage {
    width: min(100vw - 16px, 1500px);
    padding-top: 18px;
  }

  .fashionMetricRow,
  .fashionFieldRow--triple,
  .fashionFieldRow--double,
  .fashionSection--split,
  .fashionDetailSpecGrid,
  .fashionProductGrid--listing,
  .fashionProductGrid--four,
  .fashionQuickGrid,
  .fashionBrandGrid,
  .fashionPromoGrid,
  .fashionModeGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fashionListingWrap {
    grid-template-columns: 1fr;
  }

  .fashionFilters {
    position: fixed;
    z-index: 80;
    inset: 12px;
    top: 74px;
    overflow: auto;
    transform: translateY(12px);
    opacity: 0;
    pointer-events: none;
  }

  .fashionFilters.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .fashionFilters__close,
  .fashionButton--mobile {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .fashionHero__copy,
  .fashionHero__visual,
  .fashionCard,
  .fashionFilters,
  .fashionModeHero,
  .fashionCreateHero {
    padding: 18px;
  }

  .fashionHero__copy,
  .fashionHero__visual {
    min-height: auto;
  }

  .fashionMetricRow,
  .fashionQuickGrid,
  .fashionBrandGrid,
  .fashionPromoGrid,
  .fashionProductGrid--listing,
  .fashionProductGrid--four,
  .fashionProductGrid--two,
  .fashionModeGrid,
  .fashionFieldRow--triple,
  .fashionFieldRow--double,
  .fashionDetailGallery__thumbs,
  .fashionSizeGrid,
  .fashionDetailSpecGrid {
    grid-template-columns: 1fr;
  }

  .fashionHero__copy h1,
  .fashionListingHead h1,
  .fashionModeHero h1,
  .fashionCreateHero h1,
  .fashionEmptyState h1 {
    font-size: 32px;
  }

  .fashionLookItem {
    grid-template-columns: 72px 1fr;
  }

  .fashionModeHero,
  .fashionCreateHero,
  .fashionListingHead {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Fashion store, direct commerce, import, Live and Shorts extension. */
.fashionStoreHero,
.fashionManageHead,
.fashionLiveShop,
.fashionPayoutCard,
.fashionOrderHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px;
}

.fashionStoreHero {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  background-image: linear-gradient(90deg, rgba(10, 12, 18, .94), rgba(10, 12, 18, .55)), var(--fashion-store-banner, linear-gradient(135deg, #24293a, #12151e));
  background-size: cover;
  background-position: center;
}

.fashionStoreHero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .2));
  pointer-events: none;
}

.fashionStoreIdentity,
.fashionStoreHero__actions {
  position: relative;
  z-index: 1;
}

.fashionStoreIdentity {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 760px;
}

.fashionStoreIdentity h1,
.fashionManageHead h1,
.fashionOrderHead h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1;
}

.fashionStoreIdentity p,
.fashionManageHead p,
.fashionLiveShop p {
  margin: 0;
  color: var(--fashion-text-soft);
}

.fashionStoreLogo,
.fashionStoreTile__logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: #11131a;
  border: 1px solid rgba(255, 255, 255, .35);
}

.fashionStoreLogo {
  width: 118px;
  height: 118px;
  border-radius: 30px;
  font-size: 48px;
  font-weight: 900;
}

.fashionStoreLogo img,
.fashionStoreTile__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fashionStoreHero__actions,
.fashionManageActions,
.fashionFilterActions,
.fashionSellerActions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.fashionStoreHero__actions form,
.fashionSellerActions form,
.fashionProductCard__manage form {
  margin: 0;
}

.fashionStoreNav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 28px;
  padding: 10px;
}

.fashionStoreNav a {
  color: var(--fashion-text);
  text-decoration: none;
  font-weight: 750;
  padding: 12px 16px;
  border-radius: 999px;
}

.fashionStoreNav a:hover {
  background: var(--fashion-accent-soft);
}

.fashionStoreGrid,
.fashionLiveGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fashionStoreTile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  color: var(--fashion-text);
  text-decoration: none;
}

.fashionStoreTile__logo {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 900;
}

.fashionStoreTile strong,
.fashionStoreTile span,
.fashionSourceRow span,
.fashionSourceRow small {
  display: block;
}

.fashionStoreTile span,
.fashionSourceRow span,
.fashionSourceRow small {
  color: var(--fashion-text-soft);
}

.fashionLiveCard {
  overflow: hidden;
  padding: 10px;
  color: var(--fashion-text);
  text-decoration: none;
}

.fashionLiveCard__media {
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  padding: 12px;
}

.fashionLiveCard__media span,
.fashionLiveShop__badge {
  display: inline-flex;
  padding: 6px 9px;
  border-radius: 999px;
  background: #ed304f;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.fashionLiveCard strong,
.fashionLiveCard small {
  display: block;
  padding: 8px 6px 0;
}

.fashionLiveCard small {
  color: var(--fashion-text-soft);
  padding-top: 2px;
}

.fashionButton--live {
  background: #ed304f;
  border-color: #ed304f;
  color: #fff;
}

.fashionLiveShop {
  margin-bottom: 28px;
  background: linear-gradient(135deg, rgba(237, 48, 79, .13), var(--fashion-surface));
}

.fashionShortGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.fashionShortCard {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid var(--fashion-border);
  border-radius: 24px;
  background: #090b10;
  color: #fff;
  text-decoration: none;
}

.fashionShortCard video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fashionShortCard > div {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 52px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
}

.fashionShortCard strong,
.fashionShortCard span { display: block; }
.fashionShortCard span { margin-top: 4px; color: rgba(255, 255, 255, .72); font-size: 12px; }

.fashionStoreInfoGrid,
.fashionImportGrid,
.fashionOrderGrid,
.fashionCheckoutGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fashionStoreInfoGrid {
  margin-top: 30px;
}

.fashionStoreInfo,
.fashionStoreSettingsForm,
.fashionImportCard,
.fashionCheckoutForm,
.fashionCheckoutSummary,
.fashionDeliveryCard,
.fashionOrderGrid > .fashionCard,
.fashionOrderActions,
.fashionWalletPay {
  padding: 26px;
}

.fashionStoreInfo h2,
.fashionImportCard h2,
.fashionCheckoutForm h2,
.fashionCheckoutSummary h2,
.fashionOrderGrid h2,
.fashionOrderActions h2 {
  margin-top: 0;
}

.fashionStoreInfo p,
.fashionFieldHelp,
.fashionPaymentNote {
  color: var(--fashion-text-soft);
  line-height: 1.65;
}

.fashionManageHead,
.fashionCreateHero {
  margin-bottom: 20px;
}

.fashionManageMetrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fashionProductCard__media {
  isolation: isolate;
}

.fashionProductCard__short {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .2s ease;
}

.fashionProductCard__media.has-short:hover .fashionProductCard__short,
.fashionProductCard__media.has-short:focus .fashionProductCard__short {
  opacity: 1;
}

.fashionProductCard__top,
.fashionQuickSizes,
.fashionShortBadge {
  z-index: 2;
}

.fashionShortBadge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(8, 10, 16, .78);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.fashionProductCard__store {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 5px;
  color: var(--fashion-text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}

.fashionProductCard__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.fashionProductCard__price del {
  color: var(--fashion-text-soft);
  font-size: 12px;
  font-weight: 500;
}

.fashionProductCard__manage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--fashion-border);
}

.fashionProductCard__manage form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  width: 100%;
}

.fashionProductCard__manage .fashionProductStatusForm {
  display: inline-flex;
  width: auto;
}

.fashionProductStatusForm .fashionTextLink {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.fashionStatusPill,
.fashionVerified {
  color: var(--fashion-warm);
}

.fashionStatusPill {
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--fashion-warm-soft);
  font-size: 11px;
  font-weight: 800;
}

.fashionVariantRows,
.fashionCartItems,
.fashionOrderList,
.fashionPaymentChoice {
  display: grid;
  gap: 12px;
}

.fashionVariantRow {
  display: grid;
  grid-template-columns: 1.1fr .75fr .75fr .75fr .65fr auto;
  align-items: center;
  gap: 8px;
}

.fashionVariantRemove {
  width: 42px;
  height: 42px;
  border: 1px solid var(--fashion-border);
  border-radius: 50%;
  background: var(--fashion-surface-soft);
  color: var(--fashion-text);
  cursor: pointer;
}

.fashionShortUpload,
.fashionBuyBox,
.fashionPaymentMethods,
.fashionBoostInline {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--fashion-border);
  border-radius: 20px;
  background: var(--fashion-surface-soft);
}

.fashionBuyBox,
.fashionBoostInline,
.fashionPaymentMethods {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 10px;
}

.fashionBuyBox .fashionField {
  flex: 1 1 200px;
}

.fashionBuyBox .fashionQuantityField {
  flex: 0 0 105px;
}

.fashionPaymentMethods {
  align-items: center;
  margin-top: 10px;
  padding: 10px 14px;
}

.fashionPaymentMethods span {
  font-size: 11px;
  font-weight: 800;
}

.fashionGalleryMain {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.fashionGalleryMain img {
  display: block;
  width: 100%;
  height: min(70vh, 720px);
  object-fit: contain;
}

.fashionGalleryMain span {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(8, 10, 16, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.fashionGalleryModal[hidden] {
  display: none !important;
}

.fashionGalleryModal {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 30px 72px;
  background: rgba(5, 6, 10, .94);
}

.fashionGalleryModal img {
  max-width: 100%;
  max-height: calc(100vh - 60px);
  object-fit: contain;
}

.fashionGalleryModal__close,
.fashionGalleryModal__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  background: rgba(10, 12, 18, .72);
  color: #fff;
  cursor: pointer;
}

.fashionGalleryModal__close {
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  font-size: 28px;
}

.fashionGalleryModal__nav {
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
  font-size: 34px;
}

.fashionGalleryModal__nav--prev { left: 14px; }
.fashionGalleryModal__nav--next { right: 14px; }
.fashionModalOpen { overflow: hidden; }

.fashionCartStore,
.fashionOrderActions {
  margin-top: 20px;
  padding: 24px;
}

.fashionCartItem,
.fashionOrderItem,
.fashionCheckoutItem,
.fashionOrderRow,
.fashionSourceRow {
  display: grid;
  align-items: center;
  gap: 14px;
}

.fashionCartItem {
  grid-template-columns: 84px minmax(0, 1fr) 110px auto auto;
  padding: 14px 0;
  border-bottom: 1px solid var(--fashion-border);
}

.fashionCartItem img,
.fashionCheckoutItem img {
  width: 84px;
  height: 94px;
  border-radius: 14px;
  object-fit: cover;
}

.fashionCartItem a,
.fashionOrderItem a {
  color: var(--fashion-text);
  text-decoration: none;
}

.fashionCartItem span,
.fashionCartItem small,
.fashionCheckoutItem span {
  display: block;
  color: var(--fashion-text-soft);
}

.fashionCartRemove {
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--fashion-text-soft);
  font-size: 12px;
}

.fashionCartFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
}

.fashionCartFooter > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fashionCheckoutGrid {
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  align-items: start;
}

.fashionCheckoutSummary {
  position: sticky;
  top: 92px;
}

.fashionCheckoutItem {
  grid-template-columns: 68px 1fr;
  margin-bottom: 12px;
}

.fashionCheckoutItem img {
  width: 68px;
  height: 74px;
}

.fashionPaymentOption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--fashion-border);
  border-radius: 18px;
  background: var(--fashion-surface-soft);
  cursor: pointer;
}

.fashionPaymentOption strong,
.fashionPaymentOption small {
  display: block;
}

.fashionPaymentOption small {
  margin-top: 3px;
  color: var(--fashion-text-soft);
}

.fashionCheckoutSubmit {
  width: 100%;
  margin-top: 16px;
}

.fashionOrderRow {
  grid-template-columns: minmax(0, 1fr) auto auto;
  color: var(--fashion-text);
  text-decoration: none;
  padding: 18px 22px;
}

.fashionOrderRow span,
.fashionOrderRow small {
  display: block;
  color: var(--fashion-text-soft);
}

.fashionOrderItem {
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 12px 0;
  border-bottom: 1px solid var(--fashion-border);
}

.fashionOrderTotal {
  font-size: clamp(24px, 4vw, 42px);
}

.fashionWalletPay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.fashionPayoutCard,
.fashionImportGrid {
  margin-top: 20px;
}

.fashionPayoutCard strong {
  display: block;
  margin-top: 8px;
}

.fashionImportCard {
  display: grid;
  align-content: start;
  gap: 14px;
}

.fashionSourceRow {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 18px 22px;
}

.fashionSourceRow form {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fashionTableWrap {
  overflow: auto;
  border: 1px solid var(--fashion-border);
  border-radius: 20px;
}

.fashionTable {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--fashion-surface);
}

.fashionTable th,
.fashionTable td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--fashion-border);
}

.fashionTable th {
  color: var(--fashion-text-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.fashionButton.is-copied {
  border-color: var(--fashion-warm);
  color: var(--fashion-warm);
}

@media (max-width: 980px) {
  .fashionStoreGrid,
  .fashionLiveGrid,
  .fashionShortGrid,
  .fashionManageMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fashionStoreHero,
  .fashionManageHead,
  .fashionLiveShop,
  .fashionPayoutCard,
  .fashionOrderHead {
    align-items: flex-start;
    flex-direction: column;
  }

  .fashionVariantRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fashionVariantRemove { justify-self: start; }

  .fashionCheckoutGrid,
  .fashionOrderGrid {
    grid-template-columns: 1fr;
  }

  .fashionCheckoutSummary { position: static; }
}

@media (max-width: 680px) {
  .fashionStoreHero { min-height: 420px; padding: 22px; }
  .fashionStoreIdentity { align-items: flex-start; flex-direction: column; }
  .fashionStoreLogo { width: 86px; height: 86px; border-radius: 22px; }
  .fashionStoreGrid,
  .fashionLiveGrid,
  .fashionShortGrid,
  .fashionManageMetrics,
  .fashionStoreInfoGrid,
  .fashionImportGrid { grid-template-columns: 1fr; }
  .fashionVariantRow { grid-template-columns: 1fr; padding-bottom: 14px; border-bottom: 1px solid var(--fashion-border); }
  .fashionCartItem { grid-template-columns: 68px minmax(0, 1fr); }
  .fashionCartItem img { width: 68px; height: 78px; }
  .fashionCartQuantity,
  .fashionCartRemove,
  .fashionCartItem > strong { grid-column: 2; }
  .fashionCartFooter,
  .fashionCartFooter > div,
  .fashionWalletPay { align-items: stretch; flex-direction: column; }
  .fashionOrderRow,
  .fashionOrderItem,
  .fashionSourceRow { grid-template-columns: 1fr; }
  .fashionSourceRow form { align-items: stretch; flex-direction: column; }
  .fashionGalleryModal { padding: 74px 12px 34px; }
  .fashionGalleryModal__nav { top: auto; bottom: 14px; transform: none; }
  .fashionGalleryMain img { height: 62vh; }
  .fashionProductCard__short { display: none; }
}

/* Fashion mobile superlative R1 — category-specific UI, shared core untouched. */
.fashionMobileDiscovery,
.fashionMobileActionBar,
.fashionCreateStepper,
.fashionCreateMobileNav,
.fashionMobileHeroSearch,
.fashionFilterBackdrop {
  display: none;
}

.fashionGalleryCount {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8, 10, 14, .78);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.fashionSrOnly {
  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;
}

@media (max-width: 920px) {
  body.fashionFiltersOpen { overflow: hidden; }

  .fashionFilterBackdrop {
    position: fixed;
    inset: 0;
    z-index: 88;
    background: rgba(6, 8, 12, .58);
    backdrop-filter: blur(3px);
  }
  .fashionFilterBackdrop:not([hidden]) { display: block; }

  .fashionFilters {
    inset: auto 0 0 0;
    top: auto;
    z-index: 89;
    max-height: min(88svh, 820px);
    border-radius: 24px 24px 0 0;
    padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
    overflow: auto;
    overscroll-behavior: contain;
    transform: translateY(105%);
    opacity: 1;
    pointer-events: none;
    transition: transform .22s ease;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .26);
  }
  .fashionFilters.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .fashionFilters__head {
    position: sticky;
    top: -18px;
    z-index: 4;
    margin: -18px -18px 8px;
    padding: 18px;
    background: var(--fashion-surface);
    border-bottom: 1px solid var(--fashion-border);
  }
  .fashionFilterActions--mobileSticky {
    position: sticky;
    bottom: calc(-18px - env(safe-area-inset-bottom));
    z-index: 4;
    margin: 18px -18px calc(-18px - env(safe-area-inset-bottom));
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--fashion-surface);
    border-top: 1px solid var(--fashion-border);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, .09);
  }

  .fashionMobileDiscovery {
    display: grid;
    gap: 10px;
    position: sticky;
    top: 64px;
    z-index: 28;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--fashion-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fashion-surface) 94%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .07);
  }
  .fashionMobileDiscovery__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .fashionMobileDiscovery__top .fashionButton { min-height: 44px; }
  .fashionFilterCount {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: 5px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--fashion-ink);
    color: var(--fashion-surface);
    font-size: 11px;
    font-weight: 900;
  }
  .fashionMobileRail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 1px;
  }
  .fashionMobileRail::-webkit-scrollbar { display: none; }
  .fashionMobileChip {
    flex: 0 0 auto;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid var(--fashion-border);
    border-radius: 999px;
    background: var(--fashion-surface-soft);
    color: var(--fashion-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    scroll-snap-align: start;
  }
  .fashionMobileChip.is-active {
    background: var(--fashion-ink);
    border-color: var(--fashion-ink);
    color: var(--fashion-surface);
  }
  .fashionListingHead .fashionButton--mobile { display: none; }

  .fashionCreateStepper {
    display: flex;
    position: sticky;
    top: 64px;
    z-index: 31;
    gap: 8px;
    width: min(100%, 1500px);
    margin: 0 auto 12px;
    padding: 9px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    border: 1px solid var(--fashion-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fashion-surface) 95%, transparent);
    backdrop-filter: blur(16px);
  }
  .fashionCreateStepper::-webkit-scrollbar { display: none; }
  .fashionCreateStepper button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid var(--fashion-border);
    border-radius: 999px;
    background: var(--fashion-surface-soft);
    color: var(--fashion-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    scroll-snap-align: center;
  }
  .fashionCreateStepper button span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--fashion-surface);
    color: var(--fashion-ink);
  }
  .fashionCreateStepper button.is-active {
    background: var(--fashion-ink);
    border-color: var(--fashion-ink);
    color: var(--fashion-surface);
  }
  .fashionCreateStepper button.is-active span {
    background: var(--fashion-surface);
    color: var(--fashion-ink);
  }
  .fashionCreateStepper button[disabled] { display: none; }

  .fashionCreateMobileNav {
    display: grid;
    grid-template-columns: minmax(86px, auto) 1fr minmax(96px, auto);
    align-items: center;
    gap: 8px;
    position: sticky;
    bottom: 8px;
    z-index: 32;
    margin-top: 14px;
    padding: 9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    border: 1px solid var(--fashion-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fashion-surface) 96%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
  }
  .fashionCreateMobileNav > span {
    text-align: center;
    color: var(--fashion-muted);
    font-size: 12px;
    font-weight: 800;
  }
  .fashionCreateMobileNav [hidden] { display: none !important; }

  .fashionStoreNav {
    position: sticky;
    top: 64px;
    z-index: 25;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 10px;
    scroll-snap-type: x proximity;
  }
  .fashionStoreNav::-webkit-scrollbar { display: none; }
  .fashionStoreNav a {
    flex: 0 0 auto;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    scroll-snap-align: start;
  }
}

@media (max-width: 680px) {
  .fashionPage {
    width: min(100vw - 12px, 1500px);
    padding-top: 10px;
  }
  .fashionSection { margin-top: 18px; }
  .fashionSection__head { gap: 10px; }
  .fashionSection__head h2 { font-size: clamp(20px, 6vw, 27px); }

  .fashionHero { gap: 10px; }
  .fashionHero__copy,
  .fashionHero__visual,
  .fashionCard,
  .fashionModeHero,
  .fashionCreateHero { padding: 14px; border-radius: 18px; }
  .fashionHero__copy h1,
  .fashionListingHead h1,
  .fashionModeHero h1,
  .fashionCreateHero h1,
  .fashionEmptyState h1 { font-size: clamp(27px, 8.2vw, 36px); line-height: 1.04; }
  .fashionHero__copy p { margin-bottom: 14px; }
  .fashionHero__actions,
  .fashionStoreHero__actions,
  .fashionManageActions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 2px;
  }
  .fashionHero__actions::-webkit-scrollbar,
  .fashionStoreHero__actions::-webkit-scrollbar,
  .fashionManageActions::-webkit-scrollbar { display: none; }
  .fashionHero__actions > *,
  .fashionStoreHero__actions > *,
  .fashionManageActions > * { flex: 0 0 auto; scroll-snap-align: start; }

  .fashionMobileHeroSearch {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 12px;
  }
  .fashionMobileHeroSearch label { min-width: 0; }
  .fashionMobileHeroSearch .fashionInput,
  .fashionMobileHeroSearch .fashionButton { min-height: 48px; }

  .fashionMetricRow,
  .fashionQuickGrid,
  .fashionPromoGrid,
  .fashionBrandGrid,
  .fashionLiveGrid,
  .fashionShortGrid,
  .fashionStoreGrid,
  .fashionModeGrid {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    padding: 2px 2px 7px;
  }
  .fashionMetricRow::-webkit-scrollbar,
  .fashionQuickGrid::-webkit-scrollbar,
  .fashionPromoGrid::-webkit-scrollbar,
  .fashionBrandGrid::-webkit-scrollbar,
  .fashionLiveGrid::-webkit-scrollbar,
  .fashionShortGrid::-webkit-scrollbar,
  .fashionStoreGrid::-webkit-scrollbar,
  .fashionModeGrid::-webkit-scrollbar { display: none; }
  .fashionMetricRow > *, .fashionQuickGrid > *, .fashionPromoGrid > *, .fashionBrandGrid > *,
  .fashionLiveGrid > *, .fashionShortGrid > *, .fashionStoreGrid > *, .fashionModeGrid > * {
    flex: 0 0 min(82vw, 310px);
    scroll-snap-align: start;
  }
  .fashionMetricRow > * { flex-basis: min(44vw, 180px); }
  .fashionQuickGrid > * { flex-basis: auto; min-width: 150px; }

  .fashionHero__visual {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 260px;
  }
  .fashionVisualTile--tall { grid-row: 1 / span 2; }

  .fashionProductGrid--listing,
  .fashionProductGrid--four,
  .fashionProductGrid--two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .fashionProductCard { min-width: 0; border-radius: 16px; }
  .fashionProductCard__media { aspect-ratio: 4 / 5; border-radius: 16px 16px 0 0; }
  .fashionProductCard__body { padding: 10px; }
  .fashionProductCard__brand,
  .fashionProductCard__store,
  .fashionProductCard__meta { font-size: 11px; }
  .fashionProductCard__title {
    font-size: 13px;
    line-height: 1.28;
    display: block;
    overflow: visible;
    min-height: 0;
  }
  .fashionProductCard__price { font-size: 14px; flex-wrap: wrap; }
  .fashionProductCard__top { inset: 8px 8px auto; }
  .fashionBadgeRow { gap: 4px; }
  .fashionBadge { padding: 4px 6px; font-size: 9px; }
  .fashionWish { display: none; }
  .fashionQuickSizes { gap: 4px; padding: 6px; }
  .fashionQuickSizes span { min-width: 24px; height: 24px; font-size: 10px; }

  .fashionManagePage .fashionProductGrid--listing { grid-template-columns: 1fr; }
  .fashionManagePage .fashionProductCard { display: grid; grid-template-columns: 110px 1fr; }
  .fashionManagePage .fashionProductCard__media { aspect-ratio: auto; height: 100%; min-height: 150px; border-radius: 16px 0 0 16px; }
  .fashionManagePage .fashionProductCard__manage { gap: 8px; }

  .fashionListingHead { padding: 12px; }
  .fashionListingHead__actions { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fashionListingHead__actions::-webkit-scrollbar { display: none; }
  .fashionBreadcrumbs { white-space: normal; overflow: visible; text-overflow: clip; }
  .fashionMobileDiscovery { top: 58px; margin-inline: -1px; }
  .fashionMobileRail { margin-inline: -1px; }

  .fashionFilters {
    max-height: 90svh;
    border-radius: 22px 22px 0 0;
  }
  .fashionFilterForm .fashionFieldRow,
  .fashionFieldRow--triple,
  .fashionFieldRow--double { grid-template-columns: 1fr; gap: 10px; }
  .fashionPillGrid { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; }
  .fashionPillGrid::-webkit-scrollbar { display: none; }
  .fashionPill { flex: 0 0 auto; }
  .fashionSizeGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .fashionInput,
  .fashionButton,
  .fashionPill,
  .fashionSizePill,
  .fashionCheck { min-height: 48px; }
  .fashionInput,
  select.fashionInput,
  textarea.fashionInput { font-size: 16px; }
  textarea.fashionInput { min-height: 112px; }

  .fashionDetailHero,
  .fashionDetailGrid { gap: 10px; }
  .fashionDetailGallery { padding: 8px; }
  .fashionGalleryMain img { height: min(62svh, 560px); border-radius: 14px; }
  .fashionGalleryMain span:not(.fashionGalleryCount) { display: none; }
  .fashionDetailGallery__thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 8px;
  }
  .fashionDetailGallery__thumbs::-webkit-scrollbar { display: none; }
  .fashionDetailGallery__thumb { flex: 0 0 62px; width: 62px; height: 74px; }
  .fashionDetailInfo { padding: 16px; }
  .fashionDetailInfo h1 { font-size: clamp(24px, 7vw, 33px); }
  .fashionDetailInfo__price { font-size: 24px; }
  .fashionBadgeRow--detail,
  .fashionDetailActions,
  .fashionPaymentMethods,
  .fashionDetailTags,
  .fashionSellerActions {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
  }
  .fashionBadgeRow--detail::-webkit-scrollbar,
  .fashionDetailActions::-webkit-scrollbar,
  .fashionPaymentMethods::-webkit-scrollbar,
  .fashionDetailTags::-webkit-scrollbar,
  .fashionSellerActions::-webkit-scrollbar { display: none; }
  .fashionDetailActions > *, .fashionSellerActions > * { flex: 0 0 auto; }
  .fashionDetailMetaList,
  .fashionDetailSpecGrid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fashionDetailMetaList::-webkit-scrollbar,
  .fashionDetailSpecGrid::-webkit-scrollbar { display: none; }
  .fashionDetailMetaList > div,
  .fashionDetailSpecGrid > div { flex: 0 0 min(58vw, 210px); }
  .fashionPage--detail { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .fashionMobileActionBar {
    display: grid;
    grid-template-columns: minmax(86px, .75fr) minmax(0, 1.7fr);
    gap: 8px;
    align-items: center;
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: 6px;
    z-index: 74;
    padding: 9px;
    padding-bottom: calc(9px + env(safe-area-inset-bottom));
    border: 1px solid var(--fashion-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--fashion-surface) 96%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, .18);
  }
  .fashionMobileActionBar__price { min-width: 0; }
  .fashionMobileActionBar__price small { display: block; color: var(--fashion-muted); font-size: 10px; }
  .fashionMobileActionBar__price strong { display: block; white-space: normal; overflow: visible; text-overflow: clip; font-size: 15px; }
  .fashionMobileActionBar__actions { display: flex; justify-content: flex-end; gap: 6px; min-width: 0; }
  .fashionMobileActionBar .fashionButton { min-height: 46px; padding-inline: 12px; font-size: 12px; }
  .fashionMobileActionBar__actions .fashionButton:not(.fashionButton--primary):last-child { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; }

  .fashionCreateHero { gap: 10px; }
  .fashionCreateStepper { top: 58px; margin-bottom: 10px; }
  .fashionPage--create [data-fashion-step] { display: none; }
  .fashionPage--create [data-fashion-step].is-mobile-current { display: block; }
  .fashionPage--create [data-fashion-step][hidden] { display: none !important; }
  .fashionCreateLayout { gap: 10px; }
  .fashionCreateMain { display: contents; }
  .fashionCreateAside { position: static; }
  .fashionCreateSection, .fashionAsideCard { padding: 14px; }
  .fashionToggleGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .fashionToggleGrid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fashionCreateSection .fashionSizeGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fashionVariantRow { grid-template-columns: 1fr; }
  .fashionCreateMobileNav { bottom: 6px; }
  .fashionCreateMobileNav .fashionButton { min-height: 46px; padding-inline: 12px; }
  .fashionPage--create-mode .fashionModeGrid { margin-inline: -2px; }
  .fashionPage--create-mode .fashionModeCard { flex-basis: min(86vw, 340px); }

  .fashionStoreHero { min-height: auto; padding: 16px; }
  .fashionStoreIdentity { gap: 12px; }
  .fashionStoreLogo { width: 70px; height: 70px; border-radius: 18px; }
  .fashionStoreHero h1 { font-size: clamp(27px, 8vw, 38px); }
  .fashionStoreNav { top: 58px; border-radius: 16px; }
  .fashionStoreInfoGrid { grid-template-columns: 1fr; gap: 10px; }
  .fashionManageHead { padding: 16px; gap: 12px; }
  .fashionManageMetrics {
    display: flex;
    overflow-x: auto;
    grid-template-columns: none;
    scrollbar-width: none;
  }
  .fashionManageMetrics::-webkit-scrollbar { display: none; }
  .fashionManageMetrics > * { flex: 0 0 min(44vw, 180px); }

  .fashionTableWrap { overflow: visible; }
  .fashionTable { min-width: 0; width: 100%; }
  .fashionTable thead { display: none; }
  .fashionTable tbody, .fashionTable tr, .fashionTable td { display: block; width: 100%; }
  .fashionTable tr {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--fashion-border);
    border-radius: 16px;
    background: var(--fashion-surface-soft);
  }
  .fashionTable td {
    display: grid;
    grid-template-columns: minmax(96px, 42%) 1fr;
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }
  .fashionTable td::before {
    content: attr(data-label);
    color: var(--fashion-muted);
    font-size: 11px;
    font-weight: 800;
    text-align: left;
  }

  .fashionCartFooter {
    position: sticky;
    bottom: 6px;
    z-index: 24;
    padding: 10px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 18px;
    background: color-mix(in srgb, var(--fashion-surface) 96%, transparent);
    backdrop-filter: blur(16px);
  }
  .fashionCheckoutGrid { display: flex; flex-direction: column; gap: 10px; }
  .fashionCheckoutSummary { order: 1; }
  .fashionCheckoutForm { order: 2; }
  .fashionCheckoutSubmit {
    position: sticky;
    bottom: 6px;
    z-index: 20;
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
  }
}

@media (max-width: 390px) {
  .fashionPage { width: min(100vw - 8px, 1500px); }
  .fashionProductGrid--listing,
  .fashionProductGrid--four,
  .fashionProductGrid--two { gap: 6px; }
  .fashionProductCard__body { padding: 8px; }
  .fashionProductCard__meta { display: none; }
  .fashionMobileActionBar { left: 4px; right: 4px; bottom: 4px; }
  .fashionMobileActionBar__actions .fashionButton:not(.fashionButton--primary) { display: none; }
  .fashionCreateMobileNav { grid-template-columns: auto 1fr auto; }
}

/* STEP35 mobile, overflow and accessibility hardening. */
:root {
  --fashion-ink: var(--fashion-text);
  --fashion-muted: var(--fashion-text-soft);
  --fashion-mobile-header-offset: calc(58px + env(safe-area-inset-top));
}

.fashionPage {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  overflow-wrap: anywhere;
  word-break: normal;
}

body[data-category="fashion"] :where(main, section, article, aside, header, footer, nav, form, fieldset, div, p, a, span, strong, small, label, legend, li) {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.fashionPage *,
.fashionGalleryModal * {
  box-sizing: border-box;
  min-width: 0;
}

.fashionPage img,
.fashionPage video,
.fashionPage svg,
.fashionGalleryModal img {
  max-width: 100%;
}

.fashionButton {
  max-width: 100%;
  height: auto;
  padding-block: 10px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fashionPage :where(h1, h2, h3, p, a, strong, span, small, label, legend, li),
.fashionSellerStoreLink,
.fashionProductCard__brand,
.fashionProductCard__store,
.fashionProductCard__title,
.fashionProductCard__price,
.fashionOrderItem,
.fashionOrderRow,
.fashionCartItem,
.fashionCheckoutItem,
.fashionSummaryList strong,
.fashionDetailMetaList strong,
.fashionDetailSpecGrid strong {
  overflow-wrap: anywhere;
}

.fashionButton:focus-visible,
.fashionInput:focus-visible,
.fashionTextLink:focus-visible,
.fashionStoreNav a:focus-visible,
.fashionMobileChip:focus-visible,
.fashionGalleryMain:focus-visible,
.fashionDetailGallery__thumb:focus-visible,
.fashionGalleryModal__close:focus-visible,
.fashionGalleryModal__nav:focus-visible,
.fashionCreateStepper button:focus-visible,
.fashionPill:focus-within,
.fashionSizePill:focus-within,
.fashionCheck:focus-within,
.fashionColorDotWrap:focus-within,
.fashionExistingMedia__item:focus-within {
  outline: 3px solid color-mix(in srgb, var(--fashion-warm) 78%, #fff);
  outline-offset: 3px;
}

input[type="search"].fashionInput {
  -webkit-appearance: none;
  appearance: none;
  background-clip: padding-box;
}

input[type="search"].fashionInput::-webkit-search-decoration,
input[type="search"].fashionInput::-webkit-search-cancel-button,
input[type="search"].fashionInput::-webkit-search-results-button,
input[type="search"].fashionInput::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

input[type="file"].fashionInput {
  height: auto;
  padding: 8px 10px;
  line-height: 1.35;
}

input[type="file"].fashionInput::file-selector-button {
  max-width: 100%;
  margin: 0 10px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--fashion-border);
  border-radius: 10px;
  background: var(--fashion-surface);
  color: var(--fashion-text);
  white-space: normal;
}

.fashionToggleGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.fashionCheckoutForm,
.fashionStoreSettingsForm,
.fashionOrderActions form {
  display: grid;
  gap: 14px;
}

.fashionSellerStoreLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  color: var(--fashion-text);
  text-decoration: none;
}

.fashionDetailGallery__thumb {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  color: inherit;
  cursor: pointer;
}

.fashionDetailGallery__thumb.is-active,
.fashionDetailGallery__thumb[aria-current="true"] {
  border-color: var(--fashion-warm);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fashion-warm) 24%, transparent);
}

.fashionGalleryCount {
  right: auto;
  left: 14px;
}

.fashionGalleryModal {
  z-index: 10050;
  min-height: 100dvh;
  padding: max(68px, calc(18px + env(safe-area-inset-top))) max(72px, calc(18px + env(safe-area-inset-right))) max(30px, calc(18px + env(safe-area-inset-bottom))) max(72px, calc(18px + env(safe-area-inset-left)));
}

.fashionGalleryModal img {
  max-height: calc(100dvh - 60px);
}

.fashionGalleryModal__close {
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
}

.fashionGalleryModal__nav--prev { left: max(12px, env(safe-area-inset-left)); }
.fashionGalleryModal__nav--next { right: max(12px, env(safe-area-inset-right)); }

.fashionStoreHero,
.fashionStoreHero h1,
.fashionStoreHero .fashionEyebrow,
.fashionStoreHero .fashionStoreIdentity p {
  color: #fff;
}

.fashionStoreHero .fashionEyebrow,
.fashionStoreHero .fashionStoreIdentity p {
  color: rgba(255, 255, 255, .86);
}

.fashionStoreIdentity > div:last-child,
.fashionStoreHero__actions,
.fashionOrderHead > div,
.fashionWalletPay > div,
.fashionCartItem > div,
.fashionCheckoutItem > div,
.fashionOrderItem > div {
  min-width: 0;
}

#products,
#about,
#policies,
#fashion-commerce,
.fashionPage--create [data-fashion-step] {
  scroll-margin-top: calc(132px + env(safe-area-inset-top));
}

.fashionExistingMedia {
  min-inline-size: 0;
  margin: 0 0 16px;
  padding: 14px;
  border: 1px solid var(--fashion-border);
  border-radius: 18px;
}

.fashionExistingMedia legend {
  padding: 0 6px;
  font-weight: 800;
}

.fashionExistingMedia .fashionFieldHelp {
  margin: 2px 0 12px;
}

.fashionExistingMedia__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 10px;
}

.fashionExistingMedia__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--fashion-border);
  border-radius: 16px;
  background: var(--fashion-surface-soft);
  cursor: pointer;
}

.fashionExistingMedia__item:has(input:checked),
.fashionExistingMedia__item.is-cover {
  border-color: var(--fashion-warm);
}

.fashionExistingMedia__item input {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 20px;
  height: 20px;
  accent-color: var(--fashion-warm);
}

.fashionExistingMedia__item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 11px;
  object-fit: cover;
}

.fashionExistingMedia__item span {
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 920px) {
  .fashionFilterBackdrop { z-index: 10000; }

  .fashionFilters {
    z-index: 10010;
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
    max-height: calc(100dvh - env(safe-area-inset-top));
  }

  .fashionMobileDiscovery,
  .fashionCreateStepper,
  .fashionStoreNav {
    top: var(--fashion-mobile-header-offset);
  }

  .fashionPage--create [data-fashion-step] { display: none; }
  .fashionPage--create [data-fashion-step].is-mobile-current { display: block; }
  .fashionPage--create [data-fashion-step][hidden] { display: none !important; }
  .fashionPage--create .fashionCreateMain { display: contents; }
  .fashionPage--create .fashionCreateAside { position: static; }
  .fashionPage--create .fashionCreateLayout { gap: 10px; }

  .fashionCreateMobileNav {
    bottom: max(6px, env(safe-area-inset-bottom));
  }

  .fashionStoreNav a {
    max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    white-space: normal;
  }
}

@media (max-width: 680px) {
  .fashionProductCard__title {
    display: block;
    min-height: 0;
    overflow: visible;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
  }

  .fashionBreadcrumbs {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .fashionGalleryModal {
    padding: max(68px, calc(14px + env(safe-area-inset-top))) max(12px, env(safe-area-inset-right)) max(76px, calc(14px + env(safe-area-inset-bottom))) max(12px, env(safe-area-inset-left));
  }

  .fashionGalleryModal img {
    max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  .fashionGalleryModal__nav {
    bottom: max(14px, env(safe-area-inset-bottom));
  }

  .fashionPage--detail {
    padding-bottom: calc(152px + env(safe-area-inset-bottom));
  }

  .fashionMobileActionBar {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    grid-template-columns: minmax(72px, .65fr) minmax(0, 2fr);
  }

  .fashionMobileActionBar__price strong {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .fashionMobileActionBar__actions {
    flex-wrap: wrap;
  }

  .fashionMobileActionBar__actions .fashionButton {
    flex: 1 1 108px;
  }

  .fashionMobileActionBar__actions .fashionButton:not(.fashionButton--primary):last-child {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  body[data-mobile-keyboard="open"] .fashionMobileActionBar {
    display: none;
  }

  .fashionCartFooter {
    position: static;
    padding: 16px 0 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .fashionCheckoutSubmit {
    bottom: max(6px, env(safe-area-inset-bottom));
  }

  body[data-mobile-keyboard="open"] .fashionCheckoutSubmit,
  body[data-mobile-keyboard="open"] .fashionCreateMobileNav {
    position: static;
  }

  .fashionOrderActions form,
  .fashionWalletPay,
  .fashionCartFooter,
  .fashionCartFooter > div {
    width: 100%;
  }
}

/* STEP35 R1: only the two homepage view-all buttons must never collapse or wrap. */
.fashionPage--home .fashionSectionCta {
  flex: 0 0 auto;
  align-self: flex-start;
  min-width: max-content;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* STEP36 R1: functional Shop-the-Look links and collision-safe mobile copy. */
@media (max-width: 680px) {
  .fashionLookScene {
    min-height: 400px;
    padding: 14px;
  }

  .fashionLookScene__copy {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
  }

  .fashionLookScene__copy strong {
    font-size: clamp(26px, 8vw, 32px);
    line-height: 1.1;
  }

  .fashionLookScene__copy p {
    font-size: 16px;
    line-height: 1.5;
  }

  .fashionLookScene__hotspot--one { top: 16%; left: 24%; }
  .fashionLookScene__hotspot--two { top: 31%; left: 54%; }
  .fashionLookScene__hotspot--three { top: 40%; right: 7%; left: auto; }
}

/* R36: bounded detail gallery; retain existing category and fullscreen flows. */
.fashionPage--detail .fashionDetailHero,
.fashionPage--detail .fashionDetailGrid {
  align-items: start;
}

.fashionPage--detail .fashionDetailGallery {
  width: 100%;
  min-width: 0;
  padding: 12px;
}

.fashionPage--detail .fashionDetailGallery__cover {
  position: relative;
  aspect-ratio: auto;
  border-radius: 18px;
  touch-action: pan-y pinch-zoom;
}

.fashionPage--detail .fashionGalleryMain {
  height: clamp(260px, 58svh, 620px);
  border-radius: inherit;
  color: var(--fashion-text);
}

.fashionPage--detail .fashionGalleryMain img {
  width: 100%;
  height: 100%;
  padding: 16px 20px 54px;
  object-fit: contain;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
}

.fashionPage--detail .fashionGalleryMain span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 96px);
  min-height: 32px;
  bottom: 12px;
  right: 12px;
  padding: 6px 12px;
  border: 1px solid var(--fashion-border-strong);
  background: var(--fashion-surface-elevated);
  color: var(--fashion-text);
  line-height: 1.2;
}

.fashionPage--detail .fashionGalleryMain .fashionGalleryCount {
  left: 12px;
  right: auto;
  max-width: 80px;
  font-variant-numeric: tabular-nums;
}

.fashionPage--detail .fashionGalleryNav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid var(--fashion-border-strong);
  border-radius: 50%;
  background: var(--fashion-surface-elevated);
  color: var(--fashion-text);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .16);
  cursor: pointer;
  transform: translateY(-50%);
}

.fashionPage--detail .fashionGalleryNav--prev { left: 10px; }
.fashionPage--detail .fashionGalleryNav--next { right: 10px; }
.fashionPage--detail .fashionGalleryNav:hover { border-color: var(--fashion-warm); }
.fashionPage--detail .fashionGalleryNav:focus-visible,
.fashionPage--detail .fashionGalleryMain:focus-visible {
  outline: 3px solid var(--fashion-warm);
  outline-offset: -4px;
}

.fashionPage--detail .fashionGalleryNav[hidden],
.fashionGalleryModal .fashionGalleryModal__nav[hidden] {
  display: none !important;
}

.fashionPage--detail .fashionDetailGallery__thumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 4px 3px 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--fashion-warm) transparent;
}

.fashionPage--detail .fashionDetailGallery__thumbs::-webkit-scrollbar {
  display: block;
  height: 5px;
}
.fashionPage--detail .fashionDetailGallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--fashion-warm);
  border-radius: 999px;
}

.fashionPage--detail .fashionDetailGallery__thumb {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  aspect-ratio: 1;
  scroll-snap-align: start;
}

.fashionPage--detail .fashionDetailGallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
  object-fit: contain;
}

@media (min-width: 1181px) {
  .fashionPage--detail .fashionDetailHero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .fashionPage--detail .fashionDetailGrid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

@media (max-width: 760px) {
  .fashionPage--detail .fashionDetailGallery { padding: 8px; border-radius: 20px; }
  .fashionPage--detail .fashionDetailGallery__cover { border-radius: 14px; }
  .fashionPage--detail .fashionGalleryMain { height: clamp(240px, 105vw, min(62svh, 520px)); }
  .fashionPage--detail .fashionGalleryMain img { padding: 10px 12px 52px; }
  .fashionPage--detail .fashionDetailGallery__thumb { flex-basis: 64px; width: 64px; height: 64px; border-radius: 12px; }
}

/* The hidden menu backdrop must exclude the desktop scrollbar width. */
body[data-category="fashion"] .categoryMegaBackdrop {
  width: 100%;
}

/* R39: static, wrapping catalog row navigation; no sticky overlay. */
.fashionCatalogPagination { margin: 1rem 0; min-width: 0; scroll-margin-top: 6rem; }
.fashionCatalogPagination p { overflow-wrap: anywhere; }
.fashionCatalogPaginationActions { display: flex; flex-wrap: wrap; align-items: end; gap: .65rem; min-width: 0; }
.fashionCatalogPaginationActions form { margin: 0; }
.fashionCatalogPaginationActions .fashionField { width: 7rem; max-width: 100%; margin: 0; }
.fashionCatalogPaginationActions .fashionInput { min-width: 0; width: 100%; box-sizing: border-box; }
@media (max-width: 520px) {
  .fashionCatalogPaginationActions > form { flex-basis: 100%; }
  .fashionCatalogPaginationActions .fashionButton { white-space: normal; overflow-wrap: anywhere; }
}

/* Keep unavailable cart rows removable at every viewport width. */
.fashionCartItem.fashionCartItem--unavailable {
  grid-template-columns: minmax(0, 1fr) auto;
}
.fashionCartItem--unavailable p {
  margin: 6px 0 0;
  overflow-wrap: anywhere;
}
.fashionCartFooter button:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}