/* Shop category nav. Sits directly under the hero band as a row of pills on a
   white rail, so it reads as navigation rather than a stray list of links. */

.shop-nav-rail {
    background: #fff;
    border: 1px solid #e6eae8;
    border-radius: 0.85rem;
    padding: 0.4rem 0.6rem;
    margin-bottom: 1.5rem;
    /* No overflow here on desktop: any non-visible overflow would clip the hover
       dropdowns, and setting overflow-x alone also forces overflow-y to auto,
       which showed both a horizontal and a vertical scrollbar. */
}

.mega-nav {
    display: flex;
    flex-wrap: wrap;          /* wrap instead of scrolling on desktop */
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.mega-item { position: relative; flex: 0 0 auto; }

.mega-link {
    display: block;
    padding: 0.5rem 0.85rem;
    border-radius: 0.5rem;
    color: #12211a;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mega-link:hover,
.mega-item:hover > .mega-link {
    background: rgba(12, 174, 19, 0.1);
    color: #007105;
}
.mega-item.is-current > .mega-link {
    background: linear-gradient(135deg, #007105 0%, #0cae13 100%);
    color: #fff;
}

.mega-dropdown {
    position: absolute; top: 100%; left: 0;
    background: #fff;
    border: 1px solid #e6eae8;
    border-radius: 0.6rem;
    box-shadow: 0 12px 28px rgba(0, 90, 4, 0.14);
    display: none; min-width: 232px; padding: 0.4rem; z-index: 1000;
}
.mega-item:hover .mega-dropdown,
.mega-item:focus-within .mega-dropdown { display: block; }
.mega-dropdown ul { list-style: none; margin: 0; padding: 0; }
.mega-dropdown a {
    display: block; padding: 0.5rem 0.7rem;
    color: #12211a; text-decoration: none;
    border-radius: 0.4rem; font-size: 0.88rem;
}
.mega-dropdown a:hover { background: rgba(12, 174, 19, 0.1); color: #007105; }

@media (max-width: 768px) {
    .shop-nav-rail {
        padding: 0.35rem 0.4rem;
        margin-bottom: 1.1rem;
        /* Swipe the rail on a phone rather than stacking it into a tall accordion.
           Dropdowns are hidden here, so clipping is not a concern. The scrollbar
           itself is suppressed - the row is visibly cut off, which is the cue. */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* legacy Edge */
    }
    .shop-nav-rail::-webkit-scrollbar { display: none; }
    .mega-nav { flex-wrap: nowrap; }
    .mega-link { font-size: 0.85rem; padding: 0.45rem 0.7rem; }
    .mega-dropdown { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mega-link { transition: none; }
}