.site-header {
  position: relative;
  z-index: 50;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 1.35rem;
}

.desktop-nav > a,
.shop-menu > summary {
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
}

.shop-menu {
  position: relative;
}

.shop-menu > summary {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  list-style: none;
}

.shop-menu > summary::-webkit-details-marker { display: none; }
.shop-menu > summary::after { content: "⌄"; color: var(--season-rust, #8e4933); font-size: .9em; }
.shop-menu[open] > summary,
.shop-menu > summary:hover { color: var(--season-rust, #8e4933); }

.shop-menu-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% - .15rem);
  left: -.8rem;
  width: min(390px, calc(100vw - 2rem));
  padding: .55rem;
  background: #fcfaf5;
  border: 1px solid var(--line, #d9d3c7);
  box-shadow: 0 16px 34px rgba(23, 55, 44, .16);
}

.shop-menu-panel a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: .55rem .7rem;
  color: var(--forest-dark, #17372c);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.shop-menu-panel a + a { border-top: 1px solid rgba(142, 73, 51, .12); }
.shop-menu-panel a:hover { background: #f3e7d3; color: var(--season-rust, #8e4933); }

.mobile-primary-nav > a { display: block; }

@media (max-width: 920px) {
  .desktop-nav { display: none; }
  .mobile-shop > summary {
    width: 100%;
    padding: .65rem;
    justify-content: space-between;
  }
  .mobile-shop .shop-menu-panel {
    position: static;
    width: 100%;
    padding: 0 0 .45rem .55rem;
    border: 0;
    border-left: 2px solid rgba(142, 73, 51, .22);
    box-shadow: none;
  }
  .mobile-shop .shop-menu-panel a {
    padding: .55rem .7rem;
    font-size: .95rem;
  }
}