.site-header {
  background: var(--color-ivory);
  border-bottom: var(--border-default);
  position: sticky;
  top: 0;
  z-index: 40;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 10px;
  gap: var(--space-3);
}

.site-header__logo {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A more deliberate treatment of the same heading serif in the navbar only
   (the footer reuses this class at the plain default) — lighter weight and
   wider tracking read as a considered wordmark rather than a plain heading
   reused as a logo. */
.site-header .site-header__logo {
  font-weight: 500;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .site-header__bar {
    padding: var(--space-3) 10px;
    gap: var(--space-2);
  }

  .site-header .site-header__logo {
    font-size: var(--text-body-lg);
    letter-spacing: 0.03em;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.site-nav__item {
  display: flex;
  align-items: center;
}

/* "Shop Rugs" hover mega-menu — Room/Material/Collection/Lifestyle/Size/
   Color columns, each built from live Facet data (see injectNavFacets() in
   server.js), never hardcoded, so adding/removing a value on the admin
   Facets page is reflected here with no template change.

   Deliberately plain/classic rather than a floating card: a full-width
   flyout (edge-to-edge under the sticky header, not boxed/anchored under
   the trigger) with plain text columns, no icons, no per-column fill, no
   dividers — separation comes purely from grid gap/whitespace. `.site-nav`
   has no `position`, so `.site-header` (position: sticky, which still
   establishes a containing block) is this element's nearest positioned
   ancestor — that's what lets `left/right: 0` span the full header width
   instead of just the width of the "Shop Rugs" trigger. */
.site-nav__megamenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: var(--border-default);
  box-shadow: var(--shadow-md);
  z-index: 50;
}

/* Opened/closed by main.js, not plain CSS :hover — this flyout is
   positioned relative to .site-header (see above) so it can span full
   width, which means it renders below the ENTIRE header bar, not flush
   under the small "Shop Rugs" trigger. That leaves a real gap (the
   header's own vertical padding) between the trigger's hoverable box and
   the menu's — a fast or slightly diagonal mouse path through that gap
   drops :hover and would close the menu before the cursor ever reaches
   it. JS adds a short close-delay (cancelled on re-entering the trigger
   or the menu) so crossing that gap doesn't matter. */
.site-nav__item--shop.site-nav__item--menu-open .site-nav__megamenu {
  display: block;
}

/* Keyboard/no-JS fallback: still works via plain :focus-within, and
   degrades to instant show/hide via :hover if JS fails to load. */
.site-nav__item--shop:focus-within .site-nav__megamenu {
  display: block;
}

.site-nav__megamenu-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
}

.site-nav__megamenu-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.site-nav__megamenu-heading {
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink);
}

.site-nav__megamenu-link {
  display: block;
  font-size: var(--text-small);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink-muted);
  transition: color 150ms ease;
}

.site-nav__megamenu-link:hover {
  color: var(--color-rust);
}

.site-nav__link {
  position: relative;
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-2) 0;
}

.site-nav__link::after {
  content: '';
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -1px;
  height: 1px;
  background: var(--color-rust);
  transition: left 250ms ease, right 250ms ease;
}

.site-nav__link:hover::after {
  left: 0;
  right: 0;
}

/* Highlights whichever nav link matches the page currently being viewed
   (see currentPath in server.js's injectLocals + header.ejs) — not a
   permanent style on any one link. */
.site-nav__link--active {
  color: var(--color-rust);
}

/* Dropdown affordance for "Shop Rugs" — a small chevron so the mega-menu
   reads as a dropdown at a glance, not just a plain link. Rotates to point
   up while the menu is open (hover or keyboard focus-within). */
.site-nav__link--has-menu {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: background 150ms ease;
}

/* The pill hover background is this trigger's own affordance — the
   underline every other .site-nav__link gets would double up with it. */
.site-nav__link--has-menu::after {
  display: none;
}

.site-nav__item:hover .site-nav__link--has-menu,
.site-nav__item:focus-within .site-nav__link--has-menu {
  background: rgba(42, 37, 33, 0.05);
}

.site-nav__chevron {
  transition: transform 150ms ease;
}

.site-nav__item:hover .site-nav__chevron,
.site-nav__item:focus-within .site-nav__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__icon-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.site-header__icon-link--active {
  color: var(--color-rust);
}

/* Hidden on desktop — the text label above is the full, unchanged desktop
   treatment. Below 900px (icon-only mode) this swaps in as a compact icon,
   see the media query below. */
.site-header__icon {
  display: none;
}

.site-header__icon-badge {
  display: none;
}

.site-nav__toggle {
  display: none;
  font-size: var(--text-h3);
}

.site-nav__close,
.site-nav-backdrop,
.site-nav__megamenu-allrugs {
  display: none;
}

@media (max-width: 900px) {
  .site-nav__toggle {
    display: block;
  }

  /* Compact icon-only header actions — four full text labels plus a
     hamburger no longer fit next to the logo on a phone-width screen.
     The label stays in the DOM (for screen readers) but is visually
     hidden; the count that used to read "Cart (3)" moves to a small
     badge on the icon instead. */
  .site-header__actions {
    gap: var(--space-3);
  }

  .site-header__icon {
    display: block;
  }

  .site-header__icon-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .site-header__icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--color-rust);
    color: var(--color-ivory);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  /* Side drawer, not a full-width dropdown — always in the DOM at a fixed
     position and translated off-screen; --open just slides it in. Sits
     over the page (not the old "push down from the header" panel), so its
     own width is genuinely half the screen instead of stretching edge to
     edge. Opened/closed by main.js (backdrop click, Escape, the close
     button, or following a link all close it — see site-nav-backdrop). */
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(200px, 50vw, 380px);
    background: var(--color-ivory);
    box-shadow: var(--shadow-lg);
    padding: var(--space-12) var(--space-6) var(--space-6);
    gap: var(--space-1);
    z-index: 70;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 250ms ease;
  }

  .site-nav.site-nav--open {
    transform: translateX(0);
  }

  .site-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(42, 37, 33, 0.5);
    z-index: 65;
  }

  .site-nav-backdrop[hidden] {
    display: none;
  }

  .site-nav__close {
    display: block;
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    font-size: var(--text-h2);
    line-height: 1;
    color: var(--color-ink-muted);
    padding: var(--space-1) var(--space-2);
  }

  /* The "Shop Rugs" trigger is redundant on mobile — the drawer already
     shows its content directly below, always expanded, with its own
     "All Rugs" link doing the job this trigger did on desktop. */
  .site-nav__link--shop-trigger {
    display: none;
  }

  .site-nav--open .site-nav__item {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* The desktop version is a hover/focus popover, absolutely positioned to
     flyout full-width under the header; on mobile it's just the drawer's
     own content, laid out in normal flow. */
  .site-nav--open .site-nav__megamenu {
    display: block;
    position: static;
    background: transparent;
    box-shadow: none;
    border-bottom: none;
  }

  .site-nav--open .site-nav__megamenu-inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .site-nav__megamenu-allrugs {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-4);
  }

  .site-nav--open .site-nav__megamenu-heading {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-small);
    color: var(--color-brass);
    font-weight: 700;
  }

  /* Every section (the 6 facet columns, and effectively "All Rugs" above
     via its own margin-bottom) gets the identical space-4 top+bottom —
     that's what keeps the gap above every heading and below every last
     link the same everywhere, instead of drifting per-section. */
  .site-nav--open .site-nav__megamenu-col {
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-top: var(--border-default);
  }

  .site-nav--open .site-nav__megamenu-link {
    font-size: var(--text-body);
    color: var(--color-ink);
  }

  /* "Our Story" is dropped from the mobile drawer entirely (redundant
     with "All Rugs" + the categories right above it) — stays a normal nav
     link on desktop, where this class has no effect. */
  .site-nav__link--mobile-hide {
    display: none;
  }

  /* "Custom Rug Order" is the only thing left below the catalog — styled
     as its own standout button instead of another plain list row, so it
     reads as a distinct feature rather than one more category link. */
  .site-nav__link--secondary {
    margin-top: var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3) var(--space-4);
    border: var(--border-strong);
    border-radius: var(--radius-sm);
  }
}

.site-footer {
  background: var(--color-forest);
  color: var(--color-ivory);
  padding: var(--space-24) 0 var(--space-8);
  margin-top: var(--space-24);
}

@media (max-width: 640px) {
  .site-footer {
    /* Both the 96px top padding and the 96px margin above it were tuned
       for desktop's much taller page sections — on a phone that's a huge
       empty green gap before any footer content appears. */
    padding: var(--space-8) 0 var(--space-6);
    margin-top: var(--space-12);
  }
}

.site-footer a {
  color: var(--color-ivory);
  opacity: 0.85;
}

.site-footer a:hover {
  opacity: 1;
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-bottom: var(--space-12);
}

@media (max-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* The brand block (name + tagline) is the first of the 4 columns in the
     markup — give it its own full-width row instead of squeezing it into
     one of two columns alongside "Shop", which read as unbalanced (a long
     tagline competing with a short link list) on a phone. */
  .site-footer__grid > div:first-child {
    grid-column: 1 / -1;
    margin-bottom: var(--space-6);
  }
}

.site-footer__heading {
  font-size: var(--text-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brass);
  margin-bottom: var(--space-4);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-small);
}

.site-footer__bottom {
  border-top: 1px solid rgba(250, 246, 240, 0.15);
  padding-top: var(--space-6);
  font-size: var(--text-small);
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}