/* Shared storefront navigation */
.admin-bar { background: #102817; color: #fff; font-size: .875rem; }
.admin-bar a { color: #fff; font-weight: 700; }
.site-header {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(18, 22, 20, .96);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    transition: background .2s ease, box-shadow .2s ease;
}
.site-header--scrolled { background: rgba(18, 22, 20, .99); box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
.site-nav { position: relative; }
.site-nav__inner {
    width: min(1440px, 100%); min-height: 76px; margin: 0 auto;
    padding: 10px clamp(16px, 3vw, 42px); display: flex; align-items: center;
    gap: clamp(18px, 3vw, 46px);
}
.site-nav__brand { display: inline-flex; flex: 0 0 auto; }
.site-nav__brand img { display: block; width: 142px; height: auto; }
.site-nav__desktop { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1vw, 16px); flex: 1 1 auto; }
.site-nav__menu { position: relative; }
.site-nav__menu summary {
    display: flex; align-items: center; gap: 7px; padding: 12px 10px; color: #fff;
    cursor: pointer; font-size: .82rem; font-weight: 800; letter-spacing: .08em;
    line-height: 1; text-transform: uppercase; list-style: none; transition: color .16s ease;
}
.site-nav__menu summary::-webkit-details-marker { display: none; }
.site-nav__menu summary::after {
    content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}
.site-nav__menu[open] summary, .site-nav__menu summary:hover { color: var(--pab-green-high); }
.site-nav__menu[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.site-nav__panel {
    position: absolute; top: calc(100% + 10px); left: 50%; width: 240px; padding: 8px;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: #fff;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .24); transform: translateX(-50%);
}
.site-nav__panel--wide { width: 290px; }
.site-nav__panel a { display: block; padding: 10px 12px; border-radius: 8px; color: #27302a; font-size: .9rem; font-weight: 600; line-height: 1.35; }
.site-nav__panel a:hover, .site-nav__panel a:focus { background: #edf5e8; color: #1f621f; text-decoration: none; }
.site-nav__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-nav__account, .site-nav__cart {
    display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 9px 11px;
    border-radius: 9px; color: #fff !important; font-size: .82rem; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase;
}
.site-nav__account:hover { color: var(--pab-green-high) !important; text-decoration: none; }
.site-nav__cart { background: var(--pab-green); }
.site-nav__cart:hover { background: var(--pab-green-low); color: #fff !important; text-decoration: none; }
.site-nav__cart-count {
    display: grid; min-width: 19px; min-height: 19px; place-items: center; padding: 1px 5px;
    border-radius: 999px; background: #fff; color: #275c1c; font-size: .72rem;
}
.site-nav__toggle, .site-nav__mobile { display: none; }
.site-nav a:focus-visible, .site-nav summary:focus-visible, .site-nav__toggle:focus-visible { outline: 3px solid #d8ff7f !important; outline-offset: 3px; }

@media (max-width: 991.98px) {
    .site-nav__inner { min-height: 68px; gap: 16px; }
    .site-nav__brand img { width: 128px; }
    .site-nav__desktop, .site-nav__account { display: none; }
    .site-nav__actions { gap: 8px; }
    .site-nav__cart { min-height: 38px; padding: 8px 10px; }
    #menuToggle.site-nav__toggle {
        position: relative; display: inline-flex; width: 42px; height: 42px; padding: 10px;
        flex-direction: column; justify-content: center; gap: 5px; border: 1px solid rgba(255, 255, 255, .25);
        border-radius: 9px; background: transparent; transform: none; cursor: pointer;
    }
    #menuToggle.site-nav__toggle > span:not(.sr-only) {
        display: block; position: static; left: auto; width: 100%; height: 2px; border-radius: 2px;
        background: #fff; transform: none; transition: transform .18s ease, opacity .18s ease;
    }
    #menuToggle.site-nav__toggle.on > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
    #menuToggle.site-nav__toggle.on > span:nth-of-type(3) { opacity: 0; }
    #menuToggle.site-nav__toggle.on > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
    .site-nav__mobile {
        position: absolute; inset: 100% 0 auto; display: block; max-height: calc(100vh - 68px);
        overflow-y: auto; padding: 14px clamp(16px, 4vw, 36px) 28px; border-top: 1px solid rgba(255, 255, 255, .12);
        background: #171c18; box-shadow: 0 18px 32px rgba(0, 0, 0, .25);
    }
    .site-nav__mobile[hidden] { display: none; }
    .site-nav__mobile-list, .site-nav__mobile-list ul { margin: 0; padding: 0; list-style: none; }
    .site-nav__mobile-list > li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .site-nav__mobile-list a, .site-nav__mobile-list summary {
        display: flex; align-items: center; justify-content: space-between; min-height: 48px;
        color: #fff !important; font-size: 1rem; font-weight: 750; text-decoration: none; list-style: none; cursor: pointer;
    }
    .site-nav__mobile-list summary::-webkit-details-marker { display: none; }
    .site-nav__mobile-list summary::after { content: '+'; color: var(--pab-green-high); font-size: 1.4rem; font-weight: 400; }
    .site-nav__mobile-list details[open] summary::after { content: '–'; }
    .site-nav__mobile-list ul { padding: 0 0 10px 16px; }
    .site-nav__mobile-list ul a { min-height: 40px; color: #d9e5da !important; font-size: .92rem; font-weight: 500; }
    body.mobile-menu-open { overflow: hidden; }
}
@media (max-width: 420px) {
    .site-nav__inner { padding: 9px 14px; }
    .site-nav__brand img { width: 112px; }
    .site-nav__cart-label { display: none; }
    .site-nav__cart { gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header, .site-nav__menu summary, .site-nav__menu summary::after,
    .site-nav__toggle > span:not(.sr-only) { transition: none; }
}
