/**
 * 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); }
/* The wordmark is a link to home (header.phtml) — kill the anchor underline
   so the styling is identical to the previous static div. */
.atl-logo { font-family: 'Cormorant Garamond', serif; font-size: 30px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 500; color: var(--atl-text); text-decoration: none; }
.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; }

/* Responsive. The shared header.phtml now composes the C3 nav components
   (components/_mega-menu.css): Women/Men are wrapped in .atl-megamenu-item
   (desktop hover panels) and the hamburger toggle + slide-in drawer markup is
   always emitted (toggle/drawer are mobile-only via CSS). */
/* 1024px so the compact/stacked header also covers TABLET (768-1024): the
   horizontal desktop header needs ~906px of content and overflows below that,
   so tablet uses the stacked treatment (the theme has no bespoke tablet nav). */
@media (max-width: 1024px) {
  .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; }
}
/* MOBILE (<=767px, 375 design viewport): the inline nav is replaced by the
   slide-in drawer (hamburger toggle becomes visible per _mega-menu.css), and
   the Account/Wishlist text links hide — both are reachable inside the
   drawer — so the single header row (toggle · logo · Search · Bag) fits
   375px without wrapping. */
@media (max-width: 767px) {
  .atl-header { flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
  .atl-nav { display: none; }
  .atl-header-actions { flex: 1; width: auto; flex-wrap: nowrap; gap: 16px; justify-content: flex-end; }
  .atl-header-action--account,
  .atl-header-action--wishlist { display: none; }
  .atl-logo { font-size: 20px; }
}