/* Ported pixel-for-pixel from design-files/Nav.dc.html. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  font-family: var(--font-sans);
}

.utility-bar {
  background: var(--color-charcoal-primary);
  color: var(--color-text-grey-dim);
  font-size: 11.5px;
  letter-spacing: .05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 9px 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  overflow: hidden;
  white-space: nowrap;
}
.utility-bar__left { display: flex; gap: 26px; align-items: center; }
/* Real launch discount banner (2026-09-10, see nav.html) -- gold accent
   so the one genuinely time-limited offer in this bar reads as distinct
   from the plain, always-true trust badges around it (handcrafted,
   genuine leather, etc). */
.utility-bar__offer { color: var(--color-gold-accent); font-weight: 600; }
.utility-bar__offer strong { letter-spacing: .04em; }
.utility-bar__right { display: flex; align-items: center; gap: 8px; }
.utility-bar .hide-mobile { display: flex; }
.utility-bar .hide-tablet { display: inline; }
@media (max-width: 979px) { .utility-bar .hide-tablet { display: none; } }
@media (max-width: 639px) { .utility-bar .hide-mobile { display: none; } }
/* Ticker state driven by nav.js's own utility-bar rotation (see that
   file for the full rationale) -- !important is deliberate here: it
   must reliably override BOTH .hide-mobile and .hide-tablet above,
   which already say display:none on 3 of these 4 spans at this same
   639px breakpoint, regardless of which span JS activates next. */
@media (max-width: 639px) {
  .utility-bar__left span { display: none; }
  .utility-bar__left span.is-ticker-active { display: inline !important; animation: utility-ticker-fade .4s ease; }
}
@keyframes utility-ticker-fade { from { opacity: 0; } to { opacity: 1; } }

.navbar {
  background: var(--color-charcoal-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  transition: padding .35s ease, box-shadow .35s ease;
}
.navbar.is-scrolled {
  padding: 14px 48px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
/* Real mobile-specific header layout, not the desktop bar wrapped: three
   equal-width columns (grid, not flex) so the brand is genuinely
   centered between the hamburger and the action icons regardless of how
   many icons are on the right -- justify-content:space-between (the
   desktop approach) can't center a middle item whose neighbors have
   different widths. */
@media (max-width: 979px) {
  .navbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .navbar .nav-hamburger { justify-self: start; }
  .navbar .brand { justify-self: center; }
  .navbar .nav-actions { justify-self: end; }
}
@media (max-width: 639px) {
  /* 12px top/bottom + the hamburger's own 44px touch target = 68px total
     header height -- inside the brief's requested ~60-72px range without
     shrinking the touch target itself. */
  .navbar, .navbar.is-scrolled { padding: 12px 20px; }
  .utility-bar { padding: 9px 20px; }
}

.brand {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--color-beige-light);
  letter-spacing: .02em;
  line-height: 1;
  display: flex;
  flex-direction: column;
}
/* Real logo image (2026-09-02) -- replaces the old styled-text brand
   mark. Height-constrained to roughly the text version's own visual
   weight (26px font + 9px subtext stacked) rather than the image's
   native 800x800 square filling the whole header. */
.brand__logo { height: 48px; width: auto; display: block; border-radius: 6px; }
.brand .accent { color: var(--color-gold-accent); }
.brand small {
  font-size: 9px;
  letter-spacing: .35em;
  color: var(--color-brown-leather);
  font-family: var(--font-sans);
  font-weight: 600;
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
}
@media (max-width: 979px) { .nav-links, .nav-actions .desktop-only { display: none; } }
/* Real bug found in the 2026-08-22 responsive QA pass: adding WHOLESALE
   to the primary nav this session brought the desktop nav to 8 top-level
   items, and the full 48px navbar padding + 38px nav-link gap doesn't
   fit between the preserved 979px mobile/tablet breakpoint (untouched,
   per the spec's explicit "preserve it" instruction) and ~1200px --
   confirmed live as a real 58px horizontal page overflow at 1024px.
   Tightens spacing only in this narrow-desktop band. */
@media (min-width: 980px) and (max-width: 1199px) {
  .navbar, .navbar.is-scrolled { padding-left: 28px; padding-right: 28px; }
  .nav-links { gap: 20px; }
  .nav-link { font-size: 11.5px; }
  .nav-actions { gap: 14px; }
}

.nav-link {
  color: #E8E4DC;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: color .2s ease;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border-top: none; border-left: none; border-right: none;
  cursor: pointer;
}
.nav-link:hover, .nav-link.is-active { color: var(--color-gold-accent); }
.nav-link.is-active { border-bottom-color: var(--color-gold-accent); }

.nav-dropdown { position: relative; }
.nav-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 16px;
  z-index: 5;
  /* Real gap found and fixed (2026-08-22 QA pass): this used to be a
     plain [hidden] toggle -- an instant pop, not the "fade +
     translateY(5px), no huge movement" the spec explicitly asks for.
     nav.js now sequences hidden-removal before adding .is-open so this
     actually has a "before" frame to transition from. */
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--motion-fast) var(--ease-premium), transform var(--motion-fast) var(--ease-premium);
  pointer-events: none;
}
.nav-dropdown__panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-dropdown__menu {
  background: var(--color-charcoal-secondary);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  padding: 14px 0;
  min-width: 210px;
  box-shadow: var(--shadow-dropdown);
}
.nav-dropdown__menu a {
  display: block;
  padding: 10px 22px;
  color: var(--color-text-grey);
  font-size: 13px;
  letter-spacing: .02em;
}
.nav-dropdown__menu a:hover { color: var(--color-gold-accent); background: rgba(201, 162, 39, .06); }
/* Real category tree (nav_categories) instead of the old flat 4-link
   list -- grown taller with real subcategories, so this variant gets a
   scroll cap rather than growing the dropdown panel indefinitely if more
   categories/subcategories are added later. */
.nav-dropdown__menu--shop { min-width: 250px; max-height: 74vh; overflow-y: auto; }
.nav-dropdown__group { border-top: 1px solid rgba(255, 255, 255, .06); margin-top: 6px; padding-top: 6px; }
.nav-dropdown__group:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.nav-dropdown__menu a.nav-dropdown__group-title { font-weight: 700; color: var(--color-beige-light); }
.nav-dropdown__group a:not(.nav-dropdown__group-title) { padding-left: 34px; font-size: 12.5px; }

.nav-actions { display: flex; align-items: center; gap: 22px; }
/* Real finding from the mobile touch audit: the search/wishlist/cart icon
   links measured only 19x23px as actual tap targets (zero padding around
   a 19x19 <svg>) -- under WCAG 2.2's 24x24 minimum, let alone the 44x44
   comfortable-touch guideline. Padding + an equal negative margin expands
   the real hit area to ~43x43 without shifting the icon's visual position
   or the header's layout (the padding and margin cancel out). */
.nav-actions a {
  color: var(--color-beige-light);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin: -12px;
}
.nav-actions a:hover { color: var(--color-gold-accent); }
.nav-actions .count-badge {
  position: absolute; top: -8px; right: -9px;
  background: var(--color-gold-accent);
  color: var(--color-charcoal-primary);
  font-size: 10px; font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.nav-hamburger {
  display: none;
  background: none; border: none;
  color: var(--color-beige-light);
  cursor: pointer;
  /* Real touch-target fix: 22px icon + 4px padding measured ~30x30px,
     under the 44x44 comfortable-touch guideline. Negative margin cancels
     the extra padding visually (icon stays put, header layout unchanged),
     same technique already used for .nav-actions a. */
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  margin-left: -12px;
}
@media (max-width: 979px) { .nav-hamburger { display: flex; } }

/* Real fixed-position full-screen overlay -- previously this rendered
   in-flow (a normal flex block right after <nav> in the document), which
   just pushed the rest of the page down instead of covering it. Fixed +
   inset:0 actually covers the page like a real mobile nav should.
   Redesigned this pass into a genuine slide-from-left drawer: this outer
   element is now the dark, semi-transparent OVERLAY (tap anywhere on it
   to close -- see nav.js), and .mobile-drawer__panel below is the
   opaque, physically-sliding panel -- matching the brief's explicit
   "dark overlay, drawer slides from left" spec instead of a full-screen
   fade. nav.js's hidden/.is-open toggle, focus trap, Escape handling and
   scroll-lock all still target this same element unchanged. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(10, 9, 8, 0);
  transition: background 260ms ease;
}
.mobile-drawer.is-open { background: rgba(10, 9, 8, .55); }
.mobile-drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(85vw, 340px);
  background: var(--color-charcoal-primary);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: 24px 0 48px rgba(0, 0, 0, .35);
  padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-drawer.is-open .mobile-drawer__panel { transform: translateX(0); }
.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mobile-drawer__brand {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-beige-light);
  letter-spacing: .02em;
}
.mobile-drawer__brand .accent { color: var(--color-gold-accent); }
.mobile-drawer__brand small {
  font-size: 8px;
  letter-spacing: .3em;
  color: var(--color-brown-leather);
  font-family: var(--font-sans);
  font-weight: 600;
  margin-left: 4px;
}
.mobile-drawer__brand-logo { height: 34px; width: auto; display: block; border-radius: 5px; }
.mobile-drawer__close {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  background: none; border: none;
  color: var(--color-beige-light);
  cursor: pointer;
}
.mobile-drawer__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
}
.mobile-drawer a {
  padding: 13px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-beige-light);
  font-size: 15.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.mobile-drawer__links:last-of-type a:last-child,
.mobile-drawer__links a:last-child { border-bottom: none; }

/* Menu item stagger (mobile motion overhaul, 2026-08-21), Phase 11 --
   the drawer panel itself already had a real slide-in transition; this
   adds a light 40ms-per-item stagger on the first group's direct links
   only (top-level nav, the first thing a user actually looks at), not
   every nested sub-group link -- staggering all of those too would be
   the "too much motion" anti-pattern the reveal-group stagger elsewhere
   already avoids by capping at 6 items. */
.mobile-drawer__links:first-of-type > a {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--motion-normal) var(--ease-premium), transform var(--motion-normal) var(--ease-premium);
}
.mobile-drawer.is-open .mobile-drawer__links:first-of-type > a { opacity: 1; transform: translateX(0); }
.mobile-drawer__links:first-of-type > a:nth-child(1) { transition-delay: 60ms; }
.mobile-drawer__links:first-of-type > a:nth-child(2) { transition-delay: 100ms; }
.mobile-drawer__links:first-of-type > a:nth-child(3) { transition-delay: 140ms; }
.mobile-drawer__links:first-of-type > a:nth-child(4) { transition-delay: 180ms; }
.mobile-drawer__links:first-of-type > a:nth-child(5) { transition-delay: 220ms; }
.mobile-drawer__links:first-of-type > a:nth-child(6) { transition-delay: 260ms; }
/* Real nested-category navigation (nav_categories) -- same accessible,
   no-JS-required <details>/<summary> collapse pattern the footer columns
   already use, one level deeper (Shop > Men's Collection > Bifold
   Wallets). .mobile-drawer's own base `a { min-height:44px }` rule
   above already covers touch targets for every link at every depth. */
.mobile-drawer__group { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.mobile-drawer__group > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 4px; min-height: 44px;
  color: var(--color-beige-light); font-size: 15.5px; font-weight: 600;
}
.mobile-drawer__group > summary::-webkit-details-marker,
.mobile-drawer__group > summary::marker { display: none; content: ""; }
.mobile-drawer__group > summary::after { content: "+"; color: var(--color-text-grey-dim); font-size: 17px; font-weight: 400; }
.mobile-drawer__group[open] > summary::after { content: "\2212"; }
.mobile-drawer__sublinks { display: flex; flex-direction: column; padding-bottom: 6px; }
.mobile-drawer__sublinks > a { padding-left: 16px; font-size: 14px; border-bottom: none; }
.mobile-drawer__subgroup { border-top: 1px solid rgba(255, 255, 255, .04); }
.mobile-drawer__subgroup > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px 10px 16px; min-height: 40px;
  color: var(--color-text-grey); font-size: 14px;
}
.mobile-drawer__subgroup > summary::-webkit-details-marker,
.mobile-drawer__subgroup > summary::marker { display: none; content: ""; }
.mobile-drawer__subgroup > summary::after { content: "+"; color: var(--color-text-grey-dim); font-size: 15px; }
.mobile-drawer__subgroup[open] > summary::after { content: "\2212"; }
.mobile-drawer__subsublinks { display: flex; flex-direction: column; padding-bottom: 4px; }
.mobile-drawer__subsublinks > a { padding-left: 30px; font-size: 13.5px; color: var(--color-text-grey-dim); border-bottom: none; }
.mobile-drawer__section-label {
  padding: 20px 4px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-text-grey-dim);
  text-transform: uppercase;
}
.mobile-drawer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 18px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.mobile-drawer__contact a {
  padding: 9px 4px;
  min-height: 40px;
  display: flex; align-items: center; gap: 10px;
  color: var(--color-text-grey);
  font-size: 13.5px;
}
.mobile-drawer__contact a svg { color: var(--color-gold-accent); flex-shrink: 0; }
.mobile-drawer__social {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  margin-top: auto;
}
.mobile-drawer__social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .15);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-grey);
  font-size: 11px; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-drawer, .mobile-drawer__panel { transition: none; }
}
.nav-dropdown__panel[hidden] { display: none; }

/* Real instant-search overlay (mobile motion overhaul, 2026-08-21),
   Phase 23 -- a real gap: the search icon was a bare link straight to
   /search/, nothing to animate. Full-screen fade + slide-down from the
   top rather than a bottom sheet like the shop page's filter/sort --
   the input has to stay visible above the mobile keyboard, which a
   bottom sheet would push it under. Dark/charcoal theme matches the
   header + mobile drawer (both nav-triggered); the shop page's filter/
   sort sheets stay light, matching that page's own content. */
.search-overlay {
  position: fixed; inset: 0; z-index: 230;
  background: rgba(10, 9, 8, 0);
  transition: background var(--motion-normal) ease;
}
.search-overlay.is-open { background: rgba(10, 9, 8, .7); }
.search-panel {
  position: absolute; inset: 0 0 auto 0;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--color-charcoal-primary);
  padding: max(18px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  transform: translateY(-100%);
  transition: transform var(--motion-normal) var(--ease-premium);
}
.search-overlay.is-open .search-panel { transform: translateY(0); }
.search-panel__bar {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-bottom: 16px;
}
/* Real desktop regression found in the sweep (2026-08-22): the panel
   itself intentionally spans the full overlay width (matching the
   mobile drawer's own full-bleed treatment), but its actual bar/results
   content had no max-width at all -- on a real 1440px desktop the
   search input and result rows stretched edge-to-edge, unlike every
   other contained layout on the site (--content-max-width elsewhere is
   1320px, but that's a page-content width; a search dialog reads as a
   search dialog, not a page, so a narrower centered column matches how
   this pattern actually looks on comparable real sites). Only kicks in
   above 640px -- mobile keeps the existing full-width bar/results. */
@media (min-width: 640px) {
  .search-panel__bar, .search-panel__results { max-width: 640px; margin-left: auto; margin-right: auto; }
}
.search-panel__bar svg { color: var(--color-text-grey-dim); flex-shrink: 0; }
.search-panel__bar input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--color-beige-light);
  font-size: 17px; font-family: var(--font-sans);
}
.search-panel__bar input::placeholder { color: var(--color-text-grey-dim); }
.search-panel__close {
  width: 36px; height: 36px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-grey);
}
.search-panel__results { padding-top: 12px; }
.search-panel__empty { color: var(--color-text-grey-dim); font-size: 13.5px; padding: 20px 4px; text-align: center; }
.search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 4px; min-height: 44px;
  border-radius: 10px;
  color: inherit; text-decoration: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-normal) var(--ease-premium), transform var(--motion-normal) var(--ease-premium), background var(--motion-fast) ease;
}
.search-result.is-visible { opacity: 1; transform: translateY(0); }
.search-result:hover, .search-result:focus-visible { background: rgba(255, 255, 255, .05); }
.search-result__media {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 8px;
  background: var(--color-charcoal-surface);
  overflow: hidden;
}
.search-result__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.search-result__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.search-result__name { font-size: 14px; color: var(--color-beige-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result__price { font-size: 12.5px; color: var(--color-gold-accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .search-overlay, .search-panel, .search-result { transition: none; }
}