/* ===========================================================
   Mobile nav tools: collapsing logo, advanced filter chips and
   a slidable (left/right) category rail revealed on scroll down.
   Used by all-products.html together with js/mobile-nav-tools.js
   =========================================================== */

.mobile-nav-tools,
.mobile-cat-rail {
    display: none;
}

/* Chips used inside the mobile filter sheet. The sheet also renders as a
   side panel on desktop, so these stay outside the mobile media query. */
.mfs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    line-height: 1.3;
}

.mfs-chip {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mfs-chip.active {
    background: rgba(244, 122, 32, 0.12);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.filter-section {
    margin-bottom: 14px;
}

.filter-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

@media (max-width: 768px) {

    /* Match the header/top-bar animation speed for a single smooth flow */
    body .top-bar,
    body .header {
        transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                    opacity 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    }

    /* ---------- Combined filter + category rail inside the header ---------- */
    .mobile-cat-rail {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 4px;
        padding: 0 clamp(8px, 3vw, 16px) 6px;
        background: #fff;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
        scrollbar-width: none;
    }

    .mobile-cat-rail::-webkit-scrollbar {
        display: none;
    }

    .mnt-chip {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        background: #fff;
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .mnt-chip i {
        font-size: 0.75rem;
    }

    .mnt-chip.active {
        background: #9ca3af;
        border-color: #9ca3af;
        color: #fff;
    }

    .mnt-chip-primary {
        background: #fff;
        border-color: var(--border-color);
        color: var(--text-secondary);
    }

    .mnt-chip-primary .mnt-count {
        background: #6b7280;
        color: #fff;
    }

    .mnt-count {
        background: #fff;
        color: var(--primary-dark);
        border-radius: var(--radius-full);
        font-size: 0.62rem;
        font-weight: 700;
        min-width: 16px;
        height: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
    }


    .mcr-item {
        flex: 0 0 auto;
        scroll-snap-align: center;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 9px 16px;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-full);
        background: #fff;
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .mcr-item i {
        font-size: 0.75rem;
    }

    .mcr-item.active {
        background: #9ca3af;
        border-color: #9ca3af;
        color: #fff;
    }
}