/**
 * Atelier — Header (C1). Source: design/store-theme/01-atelier-fashion/pages/Home.dc.html
 */
.atl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  border-bottom: 1px solid var(--atl-border);
}
.atl-nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; flex: 1; }
.atl-nav a { color: var(--atl-text); text-decoration: none; }
.atl-nav a[data-active] { color: var(--atl-accent); }
.atl-logo { font-family: 'Cormorant Garamond', serif; font-size: 30px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--atl-text); }
.atl-header-actions { display: flex; gap: 28px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; flex: 1; justify-content: flex-end; }
.atl-header-actions a { color: var(--atl-text); text-decoration: none; }

/* Mobile (375 design viewport). This is the minimum stack/wrap/shrink
   fallback used by pages that don't opt into the richer nav. The full
   mega-menu (desktop hover panels) + slide-in mobile drawer now exists as
   components/_mega-menu.css (C3) -- pages compose it by wrapping Women/Men
   in .atl-megamenu-item and adding the drawer toggle/markup; not retrofitted
   onto the ~48 already-shipped pages to avoid touching verified output for
   a nav upgrade with no reported issue in the plain stack/wrap fallback. */
@media (max-width: 767px) {
  .atl-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; }
  .atl-nav, .atl-header-actions { flex: none; width: 100%; flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
  .atl-logo { font-size: 22px; }
}