/* Shared site navigation. Loaded by nav.php after page-specific styles. */
.site-header-nav {
  position: relative;
  inset: auto;
  z-index: 100;
  width: min(calc(100% - 64px), var(--wrap, 1440px));
  height: 132px;
  margin: auto;
  padding: 0;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}

.site-header-nav .nav-logo-link {
  display: flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  transition: transform .22s var(--ease, ease);
}

.site-header-nav .nav-logo-link:hover { transform: translateY(-2px); }
.site-header-nav .nav-logo { width: 160px; height: 160px; object-fit: contain; }

.site-header-nav .nav-primary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.2vw, 38px);
}

.site-header-nav .nav-primary .nav-link:not(.quote):not(.nav-bag) {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.site-header-nav .nav-primary .nav-link:not(.quote):not(.nav-bag)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 5px;
  height: 2px;
  background: var(--gold, #d51a12);
  transition: left .2s var(--ease, ease), right .2s var(--ease, ease);
}

.site-header-nav .nav-primary .nav-link:not(.quote):not(.nav-bag):hover::after,
.site-header-nav .nav-primary .nav-link.active:not(.quote):not(.nav-bag)::after {
  left: 0;
  right: 0;
}

/* The shopping bag is intentionally just a larger red icon—no button box. */
.site-header-nav .nav-primary .nav-bag {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  outline-offset: 3px;
  background: transparent;
  box-shadow: none;
  color: var(--gold, #d51a12);
  font-size: 22px;
  text-shadow: none;
  transition: color .2s var(--ease, ease), transform .2s var(--ease, ease);
}

.site-header-nav .nav-primary .nav-bag::after { display: none; }
.site-header-nav .nav-primary .nav-bag:hover {
  border: 0;
  background: transparent;
  color: #ff4438;
  transform: translateY(-2px) scale(1.06);
}

.site-header-nav .nav-cart-count {
  position: absolute;
  top: 0;
  right: -1px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 99px;
  background: #fff;
  color: #b9140e;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  text-shadow: none;
}

.site-header-nav .nav-link.quote {
  gap: 10px;
  min-width: 148px;
  box-shadow: 0 9px 24px rgba(213, 26, 18, .18);
}

.site-header-nav .nav-link.quote i {
  font-size: .72em;
  transition: transform .2s var(--ease, ease);
}

.site-header-nav .nav-link.quote:hover i { transform: translateX(4px); }

.site-header-nav .menu-button,
.mobile-nav,
.menu-backdrop { display: none; }

@media (min-width: 841px) and (max-width: 1080px) {
  .site-header-nav { grid-template-columns: 125px minmax(0, 1fr); gap: 16px; }
  .site-header-nav .nav-logo { width: 118px; height: 118px; }
  .site-header-nav .nav-primary { gap: 10px; }
  .site-header-nav .nav-primary .nav-link:not(.quote):not(.nav-bag) { font-size: 12px; }
  .site-header-nav .nav-link.quote { min-width: 126px; padding-inline: 14px; font-size: 13px; }
}

@media (max-width: 840px) {
  .site-header-nav {
    position: relative;
    width: min(calc(100% - 32px), var(--wrap, 1440px));
    height: 96px;
    padding: 0;
    display: flex;
    justify-content: space-between;
    gap: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header-nav .nav-logo-link { position: relative; z-index: 2; }
  .site-header-nav .nav-logo { width: 104px; height: 104px; }
  .site-header-nav .nav-primary { display: none; }

  .site-header-nav .menu-button {
    display: block;
    position: relative;
    z-index: 1002;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line, rgba(255,255,255,.14));
    background: #080808;
    color: #fff;
    cursor: pointer;
  }

  .site-header-nav .menu-button::before,
  .site-header-nav .menu-button::after,
  .site-header-nav .menu-button span {
    content: "";
    position: absolute;
    left: 12px;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: .22s var(--ease, ease);
  }

  .site-header-nav .menu-button::before { top: 14px; }
  .site-header-nav .menu-button span { top: 22px; }
  .site-header-nav .menu-button::after { top: 30px; }
  .site-header-nav .menu-button[aria-expanded="true"] span { opacity: 0; }
  .site-header-nav .menu-button[aria-expanded="true"]::before { top: 22px; transform: rotate(45deg); }
  .site-header-nav .menu-button[aria-expanded="true"]::after { top: 22px; transform: rotate(-45deg); }

  .mobile-nav {
    display: grid;
    position: fixed;
    z-index: 9001;
    inset: 0 0 0 auto;
    width: min(84vw, 360px);
    align-content: start;
    padding: 0 28px 32px;
    overflow-y: auto;
    background: #080808;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .28s var(--ease, ease), visibility .28s;
  }

  .mobile-nav.open { transform: none; visibility: visible; }
  .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; min-height: 96px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .mobile-nav-head img { width: 76px; height: 76px; object-fit: contain; }
  .mobile-nav-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); background: #111; color: #fff; font-size: 1rem; cursor: pointer; }
  .mobile-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line, rgba(255,255,255,.14)); font-family: var(--display); font-size: 29px; text-transform: uppercase; text-shadow: 0 3px 4px #000, 0 0 12px #000; }
  .mobile-nav a:last-child { margin-top: 20px; justify-content: center; gap: 12px; border: 0; background: var(--gold, #d51a12); color: #050505; text-shadow: none; }
  .mobile-nav .mobile-bag { font-family: var(--display); font-size: 29px; }

  .menu-backdrop { display: block; position: fixed; z-index: 9000; inset: 0; background: rgba(0,0,0,.68); opacity: 0; visibility: hidden; transition: .22s; }
  .menu-backdrop.open { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header-nav .nav-logo-link,
  .site-header-nav .nav-primary .nav-bag,
  .site-header-nav .nav-link.quote i { transition: none; }
}