/* Shared navigation only: storefront, generated pages and documents. */
.site-header {
  position: sticky; top: 0; z-index: 30; display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  min-height: 68px; padding: 8px clamp(20px, 4vw, 64px);
  background: #3d1345; color: #fffdfb; font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35;
}
.site-header .brand { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.site-header .brand-logo { display: block; width: auto; height: 48px; object-fit: contain; }
.site-header .header-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding: 0; }
.site-header .header-nav a {
  display: flex; align-items: center; justify-content: flex-start;
  min-height: 44px; padding: 8px 0; border: 0; border-radius: 0;
  background: transparent; color: #fffdfb; font-size: 16px; font-weight: 400;
  line-height: 1.4; text-align: left; text-decoration: none; white-space: nowrap;
}
.site-header .header-nav a:hover { color: #d1aa67; }
.site-header .header-nav a[aria-current] {
  background: transparent; color: #d1aa67;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
}
.site-header .cart-button {
  justify-self: end; display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 7px 8px 7px 18px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px; background: transparent; color: inherit;
  font: inherit; text-decoration: none; cursor: pointer;
}
.site-header .cart-button b {
  display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border-radius: 50%; background: #d1aa67;
}
.site-header .header-menu-toggle { display: none; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid #fffdfb; outline-offset: 4px; }
@media (max-width: 980px) {
  .site-header { grid-template-columns: minmax(0,1fr) auto; gap: 0 12px; padding: 8px 18px; }
  .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-header .brand-logo { height: 40px; max-width: 100%; }
  .site-header .cart-button { grid-column: 2; grid-row: 1; font-size: 14px; gap: 6px; padding: 5px 6px 5px 12px; }
  .site-header.nav-ready .header-menu-toggle {
    display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; grid-row: 2;
    justify-self: start; min-height: 44px; padding: 6px 0; border: 0;
    background: transparent; color: inherit; font: inherit; font-size: 16px; cursor: pointer;
  }
  .header-menu-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
  .site-header .header-nav {
    display: flex; flex-direction: column; align-items: stretch;
    grid-column: 1 / -1; grid-row: 3; gap: 0; padding: 4px 0;
  }
  .site-header.nav-ready .header-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    grid-column: auto; grid-row: auto;
    padding: 6px 18px 14px; background: #3d1345;
    border-top: 1px solid rgba(255,255,255,.18); box-shadow: 0 12px 20px rgba(37,29,38,.15);
    max-height: calc(100dvh - 104px); overflow-y: auto;
  }
  .site-header.nav-ready .header-menu-toggle[aria-expanded="true"] + .header-nav { display: flex; }
  .site-header .header-nav a { min-height: 44px; padding: 10px 0; white-space: normal; font-size: 16px; }
  #how, #delivery { scroll-margin-top: 120px; }
}