/* Extracted from gunslinger-theme v1.8.5 assets/css/gunslinger.css.
   Header/nav/consign-banner/theme-toggle sections only. Kept in sync by hand
   until this becomes a proper child theme (see task: BidSpirit Retheme). */

:root {
  --black:        #0b0c10;
  --near-black:   #111318;
  --panel:        #16181f;
  --crimson:      #620000;
  --crimson-mid:  #8b0000;
  --crimson-lit:  #d4635a;
  --gold:          #c9a84c;
  --white:        #f4f1ec;
  --muted:        #d0ccc7;
  --border:       rgba(255,255,255,0.12);
  --border-red:   rgba(139,0,0,0.35);
  --radius-sm:    6px;
  --radius-md:    14px;
  --radius-lg:    24px;
  --font-display:   'Playfair Display', Georgia, serif;
  --font-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:      'Barlow', system-ui, sans-serif;
  --ease:   cubic-bezier(0.25, 0, 0.15, 1);
  --t-fast: 0.15s;
  --t-base: 0.22s;
  --t-slow: 0.35s;
}

/* ── SITE HEADER ── */
.gs-site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #0b0c10;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid #620000;
}
.gs-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-inline: clamp(0.75rem, 3vw, 1.5rem);
  padding-block: 0.75rem;
  transition: padding-block 0.3s ease;
}
.gs-site-header__logo { text-decoration: none; flex-shrink: 0; }
.gs-site-header__logo img { height: 48px; width: auto; display: block; transition: height 0.3s ease; }
.gs-site-header__logo-text {
  font-family: var(--font-condensed);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f4f1ec;
}
.gs-nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.gs-nav li { margin: 0; padding: 0; position: relative; }
.gs-nav a {
  font-family: var(--font-condensed);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d0ccc7;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  display: inline-block;
  transition: color 0.18s, background 0.18s, letter-spacing 0.18s, transform 0.18s var(--ease);
  white-space: nowrap;
}
.gs-nav a:hover {
  color: #f4f1ec;
  background: rgba(255,255,255,0.1);
  letter-spacing: 0.16em;
  transform: translateY(-1px);
}
.gs-nav a.gs-nav--active,
.gs-nav a.gs-nav--active:hover {
  color: #f4f1ec;
  background: rgba(98,0,0,0.28);
}
/* ── Nav sub-menu (desktop hover dropdown) ── */
.gs-nav__sub {
  display: none;
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.3rem 0;
  background: #111318;
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 2px solid #620000;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.55);
  z-index: 300;
}
.gs-nav li:hover > .gs-nav__sub,
.gs-nav li:focus-within > .gs-nav__sub { display: block; }
.gs-nav__sub a {
  display: block;
  padding: 0.45rem 1rem;
  font-family: var(--font-condensed);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d0ccc7;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 0;
  background: transparent;
  transition: color 0.15s, background 0.15s;
}
.gs-nav__sub a:hover { color: #f4f1ec; background: rgba(255,255,255,0.05); }
.gs-nav__sub-arrow { font-size: 0.65em; vertical-align: middle; opacity: 0.5; margin-left: 2px; }
/* ── Mobile drawer sub-menu (JS toggled) ── */
.gs-nav-drawer .gs-nav__sub {
  display: none;
  position: static;
  min-width: 0;
  border: none;
  border-left: 2px solid #620000;
  border-radius: 0;
  box-shadow: none;
  background: rgba(0,0,0,0.18);
  padding: 0;
}
.gs-nav-drawer .gs-nav__sub.is-open { display: block; }
.gs-nav-drawer .gs-nav__sub a {
  padding-left: 1.75rem;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  border-radius: 0;
}
.gs-nav-drawer .gs-nav__sub a:last-child { border-bottom: none; }
.gs-nav .gs-nav__cta > a {
  background: #620000;
  color: #f4f1ec !important;
  transform: scale(1);
  transition: background 0.18s, transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  will-change: transform;
}
.gs-nav .gs-nav__cta > a:hover {
  background: #8b0000 !important;
  transform: scale(1.06) !important;
  box-shadow: 0 4px 14px rgba(98,0,0,0.5);
}
.gs-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-shrink: 0;
}
.gs-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #f4f1ec;
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}
.gs-nav-drawer {
  display: none;
  flex-direction: column;
  background: #0b0c10;
  border-top: 1px solid rgba(255,255,255,0.08);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gs-nav-drawer li { margin: 0; }
.gs-nav-drawer a {
  font-family: var(--font-condensed);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d0ccc7;
  text-decoration: none;
  display: block;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.18s, background 0.18s;
}
.gs-nav-drawer a:hover { color: #f4f1ec; background: rgba(255,255,255,0.04); }
.gs-nav-drawer li:last-child a { border-bottom: none; }
.gs-site-header.is-open .gs-nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gs-site-header.is-open .gs-nav-toggle span:nth-child(2) { opacity: 0; }
.gs-site-header.is-open .gs-nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.gs-site-header.is-open .gs-nav-drawer { display: flex; }
@media (max-width: 768px) {
  .gs-nav { display: none; }
  .gs-nav-toggle { display: flex; }
}
.gs-site-header.nav-collapsed .gs-nav { display: none; }
.gs-site-header.nav-collapsed .gs-nav-toggle { display: flex; }

/* ── Theme toggle button ── */
.gs-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  /* var(--muted) at full opacity, not var(--border) -- --border's light-theme
     value is only 13% black, nearly invisible against the tan page. --muted
     is already the icon's own color and independently AA-verified in both
     themes, so reusing it as the border guarantees real contrast, not just
     a faint hint of one. */
  border: 1.5px solid var(--muted);
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color var(--t-fast) ease, background var(--t-fast) ease, border-color var(--t-fast) ease;
}
.gs-theme-toggle:hover {
  color: var(--white);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.22);
}
.gs-theme-toggle__icon { display: block; flex-shrink: 0; }
.gs-theme-toggle__moon { display: none; }
.gs-theme-toggle__bulb { display: block; }
[data-theme="light"] .gs-theme-toggle__moon { display: block; }
[data-theme="light"] .gs-theme-toggle__bulb { display: none; }
/* var(--muted)/var(--white) never flip in this file (no [data-theme="light"]
   redefinition of those tokens exists here, unlike the main site's
   gunslinger.css) -- they're fixed at their dark-mode values always, so the
   toggle/account buttons need their own explicit light-mode colors rather
   than relying on the tokens to flip on their own. #1a1814 matches every
   other light-mode text color already used in this file. */
[data-theme="light"] .gs-theme-toggle { border-color: #1a1814; color: #1a1814; }
[data-theme="light"] .gs-theme-toggle:hover { color: #1a1814; background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.22); }
.gs-account-btn { text-decoration: none; }
.gs-account-btn svg { display: block; flex-shrink: 0; }

/* ── Consignment banner ── */
.gs-consign-banner {
  background: var(--crimson);
  border-top: 1px solid #8b0000;
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding: 1.17rem 0;
  transition: padding 0.3s ease;
}
.gs-consign-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.gs-consign-banner__text {
  font-family: var(--font-condensed);
  font-size: clamp(1.1rem, 2.42vw, 1.43rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  margin: 0;
  transition: font-size 0.3s ease;
}
.gs-consign-banner__btn {
  display: inline-block;
  font-family: var(--font-condensed);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--near-black);
  padding: 0.55rem 1.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: padding 0.3s ease, font-size 0.3s ease, background 0.2s, color 0.2s;
}
.gs-consign-banner__btn:hover { background: var(--crimson-lit); color: var(--white); }
.gs-site-header.is-scrolled .gs-site-header__inner { padding-block: 0.45rem; min-height: 44px; }
.gs-site-header.is-scrolled .gs-site-header__logo img { height: 32px; }
.gs-site-header.is-scrolled .gs-consign-banner { padding: 0.25rem 0; }
.gs-site-header.is-scrolled .gs-consign-banner__text { font-size: 0.78rem; }
.gs-site-header.is-scrolled .gs-consign-banner__btn { padding: 0.2rem 0.85rem; font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) {
  .gs-site-header__inner,
  .gs-site-header__logo img,
  .gs-consign-banner,
  .gs-consign-banner__text,
  .gs-consign-banner__btn {
    transition: none !important;
  }
}

/* ── LIGHT THEME OVERRIDES ── */
[data-theme="light"] .gs-site-header { background: #f5f1eb; border-bottom: 1px solid rgba(0,0,0,0.10); }
[data-theme="light"] .gs-nav a:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-nav a.gs-nav--active,
[data-theme="light"] .gs-nav a.gs-nav--active:hover { background: rgba(98,0,0,0.12); }
[data-theme="light"] .gs-nav__sub { background: #ede8df; border-color: rgba(0,0,0,0.12); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
[data-theme="light"] .gs-nav__sub a:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-nav-toggle span { background: #1a1814; }
[data-theme="light"] .gs-nav-drawer { background: #f5f1eb; border-top: 1px solid rgba(0,0,0,0.10); }
[data-theme="light"] .gs-nav-drawer li a { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .gs-nav-drawer .gs-nav__sub { background: rgba(0,0,0,0.04); }
[data-theme="light"] .gs-nav-drawer .gs-nav__sub li a { border-bottom-color: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-consign-banner { background: #ede8df; border-top: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .gs-consign-banner__text { color: #1a1814; }
[data-theme="light"] .gs-consign-banner__btn,
[data-theme="light"] .gs-consign-banner__btn:link,
[data-theme="light"] .gs-consign-banner__btn:visited { background: #620000 !important; color: #f4f1ec !important; }
[data-theme="light"] .gs-consign-banner__btn:hover,
[data-theme="light"] .gs-consign-banner__btn:focus { background: #8b0000 !important; color: #f4f1ec !important; }

/* ── NAV WCAG 2.2 AA CONTRAST — LIGHT MODE ──
   Dark-mode default: #d0ccc7 on #0b0c10 ~ 11.4:1 (passes).
   Light-mode without fix: #d0ccc7 on #f5f1eb ~ 1.4:1 (fails badly).
   Fix: #1a1814 on #f5f1eb ~ 15.9:1 (passes with margin). */
[data-theme="light"] .gs-nav a { color: #1a1814; }
[data-theme="light"] .gs-nav a:hover { color: #1a1814; background: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-nav a.gs-nav--active,
[data-theme="light"] .gs-nav a.gs-nav--active:hover { color: #1a1814; background: rgba(98,0,0,0.12); }
[data-theme="light"] .gs-nav__sub a { color: #1a1814; }
[data-theme="light"] .gs-nav__sub a:hover { color: #1a1814; background: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-nav-drawer a { color: #1a1814; border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .gs-nav-drawer a:hover { color: #1a1814; background: rgba(0,0,0,0.05); }
[data-theme="light"] .gs-nav-drawer .gs-nav__sub a { color: #1a1814; border-bottom-color: rgba(0,0,0,0.05); }