/* ─────────────────────────────────────────────────────────────
   ColorShop nav — Direction A "Refined"
   Sourced from docs/design/nav-menu/nav.css (Direction A portions only).
   The design's variables live alongside the theme's design-tokens.css to
   avoid clobbering the global token system.
   ───────────────────────────────────────────────────────────── */

/* Design-local variable set (only :root-scoped overrides used by .cs-* classes). */
.cs-direction {
  --cs-ink: #1a1a1a;
  --cs-ink-2: #3a3733;
  --cs-ink-3: #6b6660;
  --cs-ink-4: #98928a;
  --cs-paper: #faf7f1;
  --cs-paper-2: #f5f1e8;
  --cs-paper-card: #ffffff;
  --cs-line: #e8e1d3;
  --cs-line-2: #f0ebde;
  --cs-warm: #b5784a;
  --cs-warm-soft: #faf3ea;
  --cs-serif: var(--serif, 'Instrument Serif', Georgia, 'Times New Roman', serif);
  --cs-sans: var(--sans, 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

  font-family: var(--cs-sans);
  color: var(--cs-ink);
  background: var(--cs-paper);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  position: relative;
}

.cs-direction *,
.cs-direction *::before,
.cs-direction *::after { box-sizing: border-box; }

.cs-direction a { color: inherit; text-decoration: none; }
.cs-direction button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

/* ── Site header outer wrapper ─────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cs-paper-card);
}

/* ── Promo bar ─────────────────────────────────────────────── */
.cs-promo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 36px;
  background: var(--promo-bg, #f5f1e8);
  color: var(--cs-ink);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  transition: background 0.3s;
}
.cs-promo-flag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #fff;
  padding: 3px 8px;
  background: #e58c6a;
  border-radius: 3px;
}
.cs-promo-dot { opacity: 0.4; }
.cs-promo-link {
  color: var(--cs-warm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(181, 120, 74, 0.45);
}
.cs-promo-link:hover {
  color: #8a5a35;
  text-decoration-color: var(--cs-warm);
}

/* ── Nav row ───────────────────────────────────────────────── */
.cs-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 40px;
  height: 76px;
  background: var(--cs-paper-card);
  border-bottom: 1px solid var(--cs-line);
  position: relative;
  z-index: 80;
}

.cs-nav-left  { display: flex; align-items: center; justify-self: start; gap: 4px; }
.cs-nav-center { justify-self: center; }
.cs-nav-right { display: flex; align-items: center; justify-self: end; gap: 4px; }

.cs-logo {
  font-family: var(--cs-serif);
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.cs-logo-dot { color: var(--cs-warm); }

/* primary nav links */
.cs-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cs-nav-item {
  /* position: static so the absolutely-positioned mega menu spans the
     entire .cs-direction--A wrapper, not just this nav item. */
  position: static;
  display: inline-flex;
  align-items: center;
}
.cs-nav-link {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cs-ink);
  letter-spacing: 0.005em;
  position: relative;
  cursor: pointer;
  transition: color 0.15s;
}
.cs-nav-link:hover { color: var(--cs-warm); }
.cs-nav-link[data-active="true"]::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: -2px;
  height: 2px;
  background: var(--cs-ink);
}

/* ── Search ────────────────────────────────────────────────── */
.cs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cs-paper);
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  color: var(--cs-ink-3);
  height: 36px;
  width: 220px;
  transition: border-color 0.15s, width 0.2s, background 0.15s;
}
.cs-search:hover { border-color: var(--cs-ink-4); }
.cs-search:focus-within { border-color: var(--cs-ink-2); background: #fff; width: 260px; }
.cs-search input {
  border: 0;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--cs-ink);
  width: 100%;
}
.cs-search input::placeholder { color: var(--cs-ink-4); }
.cs-search svg { color: var(--cs-ink-4); flex-shrink: 0; }

/* ── Icon buttons / picks ──────────────────────────────────── */
.cs-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  color: var(--cs-ink);
  transition: background 0.15s;
}
.cs-icon-btn:hover { background: var(--cs-paper-2); }

.cs-picks {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  color: var(--cs-ink);
  transition: background 0.15s;
}
.cs-picks:hover { background: var(--cs-paper-2); }
.cs-picks svg { color: var(--cs-warm); }
.cs-picks-count {
  font-size: 11.5px;
  background: var(--cs-ink);
  color: #fff;
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Season indicator (pill default) ───────────────────────── */
.cs-ind-wrap { position: relative; }

.cs-ind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-ink);
  border: 1px solid var(--cs-line);
  background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  position: relative;
  user-select: none;
}
.cs-ind:hover { border-color: var(--cs-ink-4); }
.cs-ind.is-open { border-color: var(--cs-ink-2); background: var(--cs-paper); }

.cs-ind.is-empty {
  border: 1px dashed var(--cs-warm);
  background: var(--cs-warm-soft);
  color: var(--cs-warm);
}
.cs-ind.is-empty:hover { background: #fff; }

.cs-ind-dot {
  width: 9px; height: 9px;
  border-radius: 999px;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.6) inset;
}
.cs-ind-label { white-space: nowrap; }
.cs-ind-chev { color: var(--cs-ink-4); transition: transform 0.2s; }
.cs-ind.is-open .cs-ind-chev { transform: rotate(180deg); }

/* ── Season dropdown popover ───────────────────────────────── */
.cs-sd {
  position: absolute;
  top: calc(100% + 10px);
  min-width: 760px;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  box-shadow: 0 28px 60px -20px rgba(40, 30, 15, 0.18), 0 6px 18px -8px rgba(0,0,0,0.08);
  padding: 20px;
  z-index: 200;
}
.cs-sd[hidden] { display: none !important; }
.cs-sd--right { right: 0; }
.cs-sd--center { left: 50%; transform: translateX(-50%); }
.cs-sd--left { left: 0; }

.cs-sd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 4px 14px;
  border-bottom: 1px solid var(--cs-line-2);
  margin-bottom: 14px;
}
.cs-sd-title {
  font-family: var(--cs-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
  flex-shrink: 0;
}
.cs-sd-hint {
  font-size: 12.5px;
  color: var(--cs-ink-3);
  text-align: right;
}
.cs-sd-hint strong { color: var(--cs-ink); font-weight: 600; }

.cs-sd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cs-sd-col { padding: 4px; display: flex; flex-direction: column; }
.cs-sd-col .cs-sd-parent { flex: 1; }

.cs-sd-parent {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  text-align: left;
  padding: 14px 14px 14px;
  border-radius: 10px;
  border: 1px solid var(--cs-line);
  background: #fff;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  margin-bottom: 10px;
  cursor: pointer;
}
.cs-sd-parent:hover {
  background: var(--cs-paper);
  border-color: var(--cs-ink-3);
  box-shadow: 0 6px 18px -10px rgba(40, 30, 15, 0.18);
}
.cs-sd-parent.is-active {
  background: var(--cs-paper);
  border-color: var(--cs-ink-2);
  box-shadow: inset 0 0 0 1px var(--cs-ink-2);
}
.cs-sd-parent:hover .cs-sd-parent-cta { color: var(--cs-ink); }
.cs-sd-parent:hover .cs-sd-parent-cta svg { transform: translateX(2px); }

.cs-sd-paletterow {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
}
.cs-sd-sw {
  flex: 1;
  height: 26px;
  display: block;
}
.cs-sd-sw:first-child { border-radius: 3px 0 0 3px; }
.cs-sd-sw:last-child { border-radius: 0 3px 3px 0; }

.cs-sd-parentname {
  display: block;
  font-family: var(--cs-serif);
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
  line-height: 1.1;
}

.cs-sd-blurb {
  display: block;
  font-size: 11px;
  color: var(--cs-ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 6px;
  margin-bottom: 12px;
}

.cs-sd-parent-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--cs-line-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
  white-space: nowrap;
  transition: color 0.15s;
}
.cs-sd-parent-cta svg { transition: transform 0.2s; }

.cs-sd-subs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 0 4px;
}
.cs-sd-subs-label {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-4);
  padding: 4px 8px 6px;
}
.cs-sd-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--cs-ink-2);
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
.cs-sd-sub:hover { background: var(--cs-paper-2); color: var(--cs-ink); }
.cs-sd-sub.is-active { background: var(--cs-paper-2); color: var(--cs-ink); font-weight: 500; }
.cs-sd-subdot {
  width: 7px; height: 7px;
  border-radius: 999px;
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Mega menu ─────────────────────────────────────────────── */
.cs-mm {
  position: absolute;
  top: 100%;          /* sits flush below the .cs-nav row */
  left: 0;
  right: 0;
  background: #fff;
  border-top: 3px solid transparent;
  border-bottom: 1px solid var(--cs-line);
  box-shadow: 0 24px 48px -28px rgba(40, 30, 15, 0.18);
  z-index: 70;
  display: none;
}
/* JS toggles .is-open on the trigger when hovered/focused — uses an exit
   grace period so the cursor can traverse the gap between trigger and
   flyout without flicker. See navigation.js mega-menu hover block. */
.cs-nav-item--has-mega.is-open > .cs-mm {
  display: block;
}
.cs-mm-bar {
  height: 3px;
  width: 100%;
  margin-top: -3px; /* sits flush with the border-top color band */
}
.cs-mm-inner {
  padding: 26px 40px 32px;
  max-width: 1480px;
  margin: 0 auto;
}

.cs-mm-head {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cs-line-2);
}
.cs-mm-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
}
.cs-mm-section {
  font-family: var(--cs-serif);
  font-size: 22px;
  color: var(--cs-ink);
  letter-spacing: -0.01em;
}
.cs-mm-sep { color: var(--cs-ink-4); }
.cs-mm-season {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--cs-ink-3);
  letter-spacing: 0.01em;
  position: relative;
  top: -2px;
}
.cs-mm-seasondot {
  width: 8px; height: 8px;
  border-radius: 999px;
}
.cs-mm-shopall-hero {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cs-ink);
  border-bottom: 1px solid var(--cs-ink);
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.cs-mm-shopall-hero:hover { color: var(--cs-warm); border-color: var(--cs-warm); }

.cs-mm-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px 28px;
}
/* Men's mega has fewer columns; let them fill the row. */
.cs-mm--men-cols .cs-mm-cols {
  grid-template-columns: repeat(3, 1fr);
  max-width: 760px;
}

.cs-mm-col { padding-bottom: 4px; }

.cs-mm-coltitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cs-ink);
  margin-bottom: 12px;
}
.cs-mm-coltitle a { color: inherit; }
.cs-mm-coltitle a:hover { color: var(--cs-warm); }

.cs-mm-links { display: flex; flex-direction: column; gap: 0; }
.cs-mm-link {
  display: block;
  font-size: 13px;
  color: var(--cs-ink-2);
  padding: 4px 0;
  letter-spacing: 0;
  transition: color 0.1s, transform 0.1s;
}
.cs-mm-link:hover { color: var(--cs-warm); transform: translateX(2px); }
.cs-mm-link--sm { font-size: 12.5px; color: var(--cs-ink-3); padding: 3px 0; }

/* Nested grouped column (women's Bottoms/Dresses, men's Suits, etc.) */
.cs-mm-group {
  margin-bottom: 14px;
}
.cs-mm-group:last-of-type {
  margin-bottom: 0;
}
.cs-mm-grouptitle {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cs-ink);
  margin-bottom: 4px;
}
.cs-mm-grouptitle a { color: inherit; }
.cs-mm-grouptitle a:hover { color: var(--cs-warm); }

.cs-mm-shopall {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cs-warm);
  letter-spacing: 0.02em;
}
.cs-mm-shopall:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Hamburger toggle (hidden on desktop) ──────────────────── */
.mobile-menu-toggle {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  cursor: pointer; padding: 0; background: none; border: 0;
}
.mobile-menu-toggle span {
  display: block; width: 20px; height: 1.5px;
  background: var(--cs-ink); border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease;
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile drawer (unchanged) ─────────────────────────────── */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; visibility: hidden;
}
.mobile-drawer[aria-hidden="false"] {
  pointer-events: auto; visibility: visible;
}
.mobile-drawer__backdrop {
  position: absolute; inset: 0;
  background: oklch(0.15 0.01 60 / 0);
  transition: background 280ms ease;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__backdrop {
  background: oklch(0.15 0.01 60 / 0.45);
}
.mobile-drawer__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--paper);
  padding: 24px 28px;
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer[aria-hidden="false"] .mobile-drawer__panel {
  transform: translateX(0);
}
.mobile-drawer__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px;
  font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.mobile-drawer__nav,
.mobile-drawer__secondary,
.mobile-drawer__tertiary {
  display: flex; flex-direction: column; gap: 0;
}
.mobile-drawer__nav a,
.mobile-drawer__secondary a,
.mobile-drawer__tertiary a {
  display: block; padding: 14px 0;
  font-size: 17px; font-weight: 500;
  color: var(--ink);
  transition: color 140ms ease;
}
.mobile-drawer__secondary a,
.mobile-drawer__tertiary a {
  font-size: 15px; font-weight: 400; color: var(--ink-2);
}
.mobile-drawer__sep {
  height: 1px; background: var(--hairline);
  margin: 8px 0;
}

@media (max-width: 720px) {
  .mobile-menu-toggle { display: flex; }
  .cs-nav-left { display: none; }
  .cs-nav { grid-template-columns: auto 1fr auto; padding: 0 16px; height: 60px; }
  .cs-nav-center { justify-self: start; padding-left: 8px; }
  .cs-search { display: none; }
  .cs-picks span { display: none; }
  .cs-ind-label { display: none; }
  .cs-mm { display: none !important; }   /* mobile uses drawer */
}

/* ── Session-override banner (Phase 4.4) ───────────────────── */
.cs-override-banner {
  background: var(--paper-2);
  border-bottom: 1px solid var(--hairline);
  padding: 8px 24px;
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink-2);
}
.cs-override-banner[hidden] { display: none; }
.cs-override-text { color: var(--ink-2); }
.cs-override-text [data-cs-override-season],
.cs-override-text [data-cs-override-gender] {
  color: var(--ink);
  font-weight: 500;
}
.cs-override-reset {
  background: none;
  border: 0;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
}
.cs-override-reset:hover { text-decoration: none; }

@media (max-width: 720px) {
  .cs-override-banner {
    padding: 8px 16px;
    font-size: 13px;
    flex-wrap: wrap;
  }
}

/* ── Gate (forced-choice) empty state for Direction A ────────────────────
   Shown on / when the visitor has no season signal (no URL season, no
   cs_season cookie, no logged-in profile season). Replaces the full nav
   with a centered logo + the season-picker hero from the design.
   Adapted from docs/design/nav-menu/nav.css (.cs-nav--gate, .cs-seasonbar,
   .cs-season-card, .cs-gate-account). All rules scoped under .cs-direction
   so they only apply inside the Direction A wrapper.
   ──────────────────────────────────────────────────────────────────────── */

.cs-direction .cs-nav--gate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  height: 84px;
  background: var(--cs-paper-card);
  border-bottom: 1px solid var(--cs-line-2);
}
.cs-direction .cs-nav--gate .cs-logo {
  font-size: 34px;
}

/* Base seasonbar (carried over from design — used by gate variant only). */
.cs-direction .cs-seasonbar {
  background: var(--cs-paper-2);
  border-bottom: 1px solid var(--cs-line);
  padding: 22px 40px;
  position: relative;
  transition: background 0.3s;
}
.cs-direction .cs-seasonbar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
  flex-shrink: 0;
}

/* Empty state — centered + warm gradient */
.cs-direction .cs-seasonbar--empty {
  padding: 38px 40px 36px;
  text-align: center;
  background: linear-gradient(180deg, var(--cs-paper-2) 0%, var(--cs-paper) 100%);
}
.cs-direction .cs-seasonbar--empty .cs-seasonbar-eyebrow {
  justify-content: center;
  margin-bottom: 10px;
}
.cs-direction .cs-seasonbar-title {
  font-family: var(--cs-serif);
  font-size: 38px;
  letter-spacing: -0.015em;
  color: var(--cs-ink);
  margin-bottom: 22px;
  line-height: 1;
}
.cs-direction .cs-seasonbar-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto 16px;
}
.cs-direction .cs-season-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cs-ink-3);
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04), 0 4px 12px -6px rgba(40, 30, 15, 0.12);
  transition: transform 0.18s ease-out, box-shadow 0.18s, border-color 0.15s, background 0.15s;
}
.cs-direction .cs-season-card:hover {
  transform: translateY(-3px);
  border-color: var(--cs-ink);
  box-shadow: 0 2px 0 rgba(26, 26, 26, 0.06), 0 20px 32px -12px rgba(40, 30, 15, 0.25);
}
.cs-direction .cs-season-card-main {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  flex: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.cs-direction .cs-season-card-main:hover { background: #fffdf8; }
.cs-direction .cs-season-card-swatches {
  display: flex;
  height: 56px;
}
.cs-direction .cs-season-card-swatches > span {
  flex: 1;
  display: block;
}
.cs-direction .cs-season-card-body {
  padding: 14px 16px 8px;
}
.cs-direction .cs-season-card-name {
  font-family: var(--cs-serif);
  font-size: 24px;
  color: var(--cs-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.cs-direction .cs-season-card-blurb {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
  margin-top: 6px;
}
/* CTA footer — "Shop this season →" auto-appended via ::after */
.cs-direction .cs-season-card-main::after {
  content: 'Shop this season \2192';
  display: block;
  margin: 6px 16px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--cs-line-2);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
  transition: color 0.15s, transform 0.15s;
}
.cs-direction .cs-season-card-main:hover::after {
  color: var(--cs-ink);
  transform: translateX(3px);
}

/* Sub-season chip row */
.cs-direction .cs-season-card-subs {
  padding: 10px 14px 12px;
  background: #faf7f1;
  border-top: 1px solid var(--cs-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-direction .cs-season-card-subs-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-ink-4);
}
.cs-direction .cs-season-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cs-direction .cs-season-card-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #cac4b7;
  background: #fff;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--cs-ink);
  text-decoration: none;
  letter-spacing: 0;
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.cs-direction .cs-season-card-chip:hover {
  border-color: var(--cs-ink);
  background: #fff;
  box-shadow: 0 2px 6px -2px rgba(40, 30, 15, 0.22);
}

/* Gate variant overrides — larger title, warm radial gradient */
.cs-direction .cs-seasonbar--gate {
  padding: 56px 40px 52px;
  background:
    radial-gradient(900px 220px at 50% -20%, rgba(181, 120, 74, 0.06), transparent 70%),
    linear-gradient(180deg, var(--cs-paper-2) 0%, var(--cs-paper) 100%);
}
.cs-direction .cs-seasonbar-lede {
  font-size: 15px;
  color: var(--cs-ink-3);
  max-width: 56ch;
  margin: 0 auto 26px;
  line-height: 1.5;
}
.cs-direction .cs-seasonbar--gate .cs-seasonbar-title {
  font-size: 48px;
  margin-bottom: 14px;
}
.cs-direction .cs-seasonbar--gate .cs-seasonbar-cards {
  margin-bottom: 22px;
}

/* Free-account upsell block */
.cs-direction .cs-gate-account {
  max-width: 760px;
  margin: 6px auto 0;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head cta"
    "list cta";
  column-gap: 28px;
  row-gap: 14px;
  align-items: stretch;
}
.cs-direction .cs-gate-account-head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0;
  border: none;
  margin: 0;
}
.cs-direction .cs-gate-account-eyebrow {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--cs-warm);
  font-style: italic;
  font-family: var(--cs-serif);
}
.cs-direction .cs-gate-account-title {
  font-family: var(--cs-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
  line-height: 1.1;
}
.cs-direction .cs-gate-account-list {
  grid-area: list;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.cs-direction .cs-gate-account-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--cs-ink-2);
  line-height: 1.4;
}
.cs-direction .cs-gate-account-list li svg {
  color: var(--cs-warm);
  margin-top: 3px;
  flex-shrink: 0;
}
.cs-direction .cs-gate-account-cta {
  grid-area: cta;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding-left: 28px;
  border-left: 1px solid var(--cs-line-2);
}
.cs-direction .cs-gate-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  background: #e58c6a;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: 999px;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  box-shadow: 0 1px 0 rgba(160, 80, 50, 0.18), 0 4px 12px -4px rgba(229, 140, 106, 0.4);
  white-space: nowrap;
  text-decoration: none;
}
.cs-direction .cs-gate-account-btn:hover {
  background: #d6764f;
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(160, 80, 50, 0.22), 0 8px 18px -4px rgba(229, 140, 106, 0.5);
}
.cs-direction .cs-gate-account-btn svg { transition: transform 0.15s; }
.cs-direction .cs-gate-account-btn:hover svg { transform: translateX(2px); }
.cs-direction .cs-gate-account-sep {
  display: none;
}
.cs-direction .cs-gate-account-signin {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-ink-3);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cs-line);
}
.cs-direction .cs-gate-account-signin:hover {
  color: var(--cs-warm);
  text-decoration-color: var(--cs-warm);
}

/* Responsive: stack cards on smaller viewports */
@media (max-width: 960px) {
  .cs-direction .cs-seasonbar-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cs-direction .cs-gate-account {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "list"
      "cta";
  }
  .cs-direction .cs-gate-account-cta {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--cs-line-2);
    padding-top: 14px;
  }
  .cs-direction .cs-gate-account-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cs-direction .cs-seasonbar-cards {
    grid-template-columns: 1fr;
  }
  .cs-direction .cs-seasonbar--gate {
    padding: 36px 18px 32px;
  }
  .cs-direction .cs-seasonbar--gate .cs-seasonbar-title {
    font-size: 34px;
  }
  .cs-direction .cs-nav--gate {
    padding: 0 18px;
    height: 64px;
  }
  .cs-direction .cs-nav--gate .cs-logo {
    font-size: 26px;
  }
}

/* ── Brands mega menu ─────────────────────────────────────── */
.cs-mm--brands .cs-mm-inner {
  /* Brand A-Z list is dense — allow content to spread wider. */
  max-width: 1480px;
}

.cs-mm-season--muted {
  color: var(--cs-ink-3);
}

.cs-brands-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
.cs-brands-layout--featured {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px;
}

.cs-brands-sectionhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cs-line-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cs-ink);
}
.cs-brands-sectionhead-meta {
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cs-ink-3);
}

.cs-brands-azlist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 12px;
}
@media (max-width: 1200px) {
  .cs-brands-azlist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cs-brand-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 4px;
  font-size: 13.5px;
  color: var(--cs-ink-2);
  border-radius: 4px;
  transition: background 0.1s, color 0.1s, transform 0.1s;
}
.cs-brand-row:hover {
  color: var(--cs-warm);
  background: var(--cs-paper-2);
  transform: translateX(2px);
}
.cs-brand-row-name {
  flex: 1;
  line-height: 1.3;
}
.cs-brand-row-new {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--cs-warm);
  color: #fff;
  flex-shrink: 0;
}

.cs-brands-empty {
  color: var(--cs-ink-3);
  font-size: 13px;
  padding: 14px 0;
  margin: 0;
}

.cs-brands-aside {
  padding-left: 24px;
  border-left: 1px solid var(--cs-line-2);
}

.cs-brand-callout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cs-brand-callout-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-warm);
}
.cs-brand-callout-title {
  font-family: var(--cs-serif);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cs-ink);
  margin-bottom: 4px;
}
.cs-brand-callout-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-brand-callout-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 6px;
  transition: background 0.12s;
}
.cs-brand-callout-row:hover {
  background: var(--cs-paper-2);
}
.cs-brand-mono {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cs-ink);
  color: #fff;
  border-radius: 6px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.cs-brand-mono-text { line-height: 1; }
.cs-brand-callout-name {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cs-ink);
  line-height: 1.3;
}
.cs-brand-callout-tag {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
  padding: 2px 6px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
}
.cs-brand-callout-cta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cs-warm);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(181, 120, 74, 0.4);
  margin-top: 4px;
}
.cs-brand-callout-cta:hover {
  text-decoration-color: var(--cs-warm);
}

@media (max-width: 960px) {
  .cs-brands-layout--featured {
    grid-template-columns: 1fr;
  }
  .cs-brands-aside {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--cs-line-2);
    padding-top: 18px;
  }
}

/* ── Gender pill (nav badge + dropdown buttons) ──────────────── */
.cs-gender-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--cs-serif, serif);
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  line-height: 1;
  transition: transform 140ms ease, box-shadow 140ms ease;
  flex-shrink: 0;
}
.cs-gender-pill__letter,
.cs-sd-gender__letter {
  line-height: 1;
  font-family: var(--cs-serif, serif);
  font-weight: 600;
}
.cs-gender-pill.cs-gender-pill--women { background: oklch(0.55 0.17 0); color: #fff; }
.cs-gender-pill.cs-gender-pill--men   { background: oklch(0.42 0.14 260); color: #fff; }
.cs-gender-pill:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.18);
}
.cs-gender-pill:focus-visible {
  outline: 2px solid var(--cs-ink-2, #1a1a1a);
  outline-offset: 2px;
}
.cs-nav-right .cs-gender-pill { margin: 0 4px; }

/* ── Expanded season dropdown — 2-column layout ──────────────── */
.cs-sd.cs-sd--two-col {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 0;
  min-width: 1000px;
  padding: 0;
  overflow: hidden;
}
.cs-sd--two-col .cs-sd-genders {
  background: var(--cs-paper, #faf7f1);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-right: 1px solid var(--cs-line, #e6e1d6);
}
.cs-sd-genders__title {
  font-family: var(--mono, ui-monospace, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs-ink-3);
}
.cs-sd-genders__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-sd-gender {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  color: var(--cs-ink, #1a1a1a);
  transition: border-color 140ms ease, box-shadow 140ms ease;
  text-align: left;
  width: 100%;
}
.cs-sd-gender:hover {
  border-color: var(--cs-line, #e6e1d6);
}
.cs-sd-gender.is-selected {
  border-color: var(--cs-ink, #1a1a1a);
  box-shadow: inset 0 0 0 1px var(--cs-ink, #1a1a1a);
}
.cs-sd-gender__badge {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.cs-sd-gender__label {
  flex: 1;
  font-weight: 500;
}
.cs-sd-gender__check {
  color: var(--cs-ink, #1a1a1a);
  opacity: 0;
  transition: opacity 140ms ease;
  flex-shrink: 0;
}
.cs-sd-gender.is-selected .cs-sd-gender__check { opacity: 1; }
.cs-sd-gender:focus-visible {
  outline: 2px solid var(--cs-ink-2, #1a1a1a);
  outline-offset: 2px;
}
.cs-sd-genders__note {
  margin: auto 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--cs-ink-3, #6b6b6b);
}
.cs-sd-genders__note strong {
  color: var(--cs-ink, #1a1a1a);
  font-weight: 600;
}

/* Right side — keep existing .cs-sd-grid styling, just adjust outer padding. */
.cs-sd--two-col .cs-sd-seasons {
  padding: 20px;
}
.cs-sd--two-col .cs-sd-head {
  padding-top: 0;
}

@media (max-width: 900px) {
  .cs-sd.cs-sd--two-col {
    grid-template-columns: 1fr;
    min-width: 0;
    width: min(90vw, 720px);
  }
  .cs-sd--two-col .cs-sd-genders {
    border-right: 0;
    border-bottom: 1px solid var(--cs-line, #e6e1d6);
  }
}