/* =========================================
   Store — mobile category flow
   Desktop keeps the hover sub-dropdowns. On phones those are unusable
   (no hover), so we hide the dropdown panels and instead show a second
   horizontal chip row (#store-subcat-row) populated by store.js with the
   active category's subcategories. This is the standard mobile-store
   pattern: tap a category, then refine with sub-filter chips.
   ========================================= */

/* The subcategory chip row only exists for mobile — hidden on desktop. */
.store-subcat-row {
    display: none;
}

@media (max-width: 768px) {
    /* Kill the hover sub-dropdown chevron + panels on touch screens so the
       category buttons behave like simple tabs. */
    .cat-sub-chevron {
        display: none !important;
    }

    .cat-sub-panel {
        display: none !important;
    }

    /* Subcategory chip row */
    .store-subcat-row {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px 2px 10px;
        margin: -10px 0 16px;
    }

    .store-subcat-row[hidden] {
        display: none;
    }

    .store-subcat-row::-webkit-scrollbar {
        display: none;
    }

    .store-subcat-chip {
        flex: 0 0 auto;
        appearance: none;
        border: 1px solid var(--border-light);
        background: #fff;
        color: var(--text-body);
        padding: 8px 16px;
        border-radius: var(--radius-pill);
        font-family: var(--font-main);
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
    }

    .store-subcat-chip.is-active {
        background: var(--primary-blue);
        border-color: var(--primary-blue);
        color: #fff;
    }
}