/* ============================================
   HEADER / NAV
   ============================================ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: var(--space-sm) 0;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.is-solid {
  position: sticky;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.site-header.nav-open {
  position: fixed;
  background: transparent;
  border-color: transparent;
}

/* Header grid: [menu toggle] [centered logo] [icons] */
.header-grid {
  position: relative;
  z-index: 160;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
}

/* Logo — centered, stacked two-line style */
.site-logo {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.site-logo img { max-height: 40px; }
.site-logo-main {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-logo-sub {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.site-header:not(.is-solid) .site-logo,
.site-header:not(.is-solid) .site-logo-sub { color: var(--color-text); }

/* Menu toggle button */
.menu-toggle {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: inherit;
  padding: 6px 0;
}
.menu-toggle-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 20px;
}
.menu-toggle-icon span {
  display: block;
  height: 1px;
  width: 100%;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-open .menu-toggle-icon span:first-child { transform: translateY(3px) rotate(45deg); }
.nav-open .menu-toggle-icon span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Header icons (account / cart) */
.header-icons {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.icon-link { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; letter-spacing: 0.04em; }
.cart-link span { font-size: 0.78rem; }

/* Keep header on one line on phones / small tablets */
@media (max-width: 600px) {
  .site-header .container.header-grid {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  .header-grid { gap: var(--space-xs); }
  .menu-toggle { gap: 0; }
  .menu-toggle-label { display: none; }
  .site-logo {
    max-width: 100%;
  }
  .site-logo-main {
    font-size: clamp(0.68rem, 3.6vw, 0.95rem);
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .site-logo-sub { display: none; }
  .header-icons { gap: var(--space-xs); }
  .cart-link span { font-size: 0.7rem; }
}

/* Full-screen blurred overlay nav */
.primary-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 242, 0.55);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
.primary-nav.is-open { opacity: 1; visibility: visible; }

.primary-nav-inner { text-align: center; }

.primary-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0; padding: 0;
}
.primary-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--color-text);
  transition: opacity 0.25s ease;
}
.primary-nav a:hover { opacity: 0.55; }

body.nav-is-open { overflow: hidden; }