/* ======================================================================
   Category — Cohort 10 (Kiddies Bazar — warm orange baby/kids)
   Reference-matched: babymomschoice.com
   Layout: breadcrumb → sub-category chips → sort bar → 4-col grid
   No left sidebar, no heavy filter toolbar — clean, product-first.
   ====================================================================== */

.category-10-page { background: #fff; min-height: 60vh; }

/* ---------- Breadcrumb ---------- */
.category-10-breadcrumb-wrap {
    background: #fff;
    border-bottom: 1px solid #F0ECE8;
}
.category-10-breadcrumb-wrap .breadcrumb {
    font-size: 0.78rem;
    color: #888;
    margin: 0;
}
.category-10-breadcrumb-wrap .breadcrumb-item + .breadcrumb-item::before { color: #ccc; }
.category-10-breadcrumb-wrap .breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
}
.category-10-breadcrumb-wrap .breadcrumb-item a:hover { color: #D95A1A; }
.category-10-breadcrumb-wrap .breadcrumb-item.active { color: #555; }

/* ---------- Sub-category chip strip ---------- */
.category-10-sub-strip {
    background: #fff;
    border-bottom: 2px solid var(--bs-primary, #F26522);
}
.category-10-sub-chips { scrollbar-width: none; -ms-overflow-style: none; }
.category-10-sub-chips::-webkit-scrollbar { display: none; }
.category-10-sub-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    color: #444;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.category-10-sub-chip:hover {
    background: var(--bs-primary, #F26522);
    color: #fff;
    border-color: var(--bs-primary, #F26522);
}

/* ---------- Sort bar (minimal) ---------- */
.category-10-sort-bar {
    background: #FAFAFA;
    border-bottom: 1px solid #EBEBEB;
}
.category-10-count {
    font-size: 0.82rem;
    color: #777;
}
.category-10-count strong { color: #222; }
.category-10-sort {
    border: 1px solid #E5E7EB;
    border-radius: 0.3rem;
    padding: 0.28rem 0.55rem;
    font-size: 0.82rem;
    color: var(--bs-body-color);
    background: #fff;
    cursor: pointer;
}
.category-10-sort:focus { outline: none; border-color: var(--bs-primary); }

/* ---------- Product grid area ---------- */
.category-10-grid-wrap { background: #fff; }

/* ---------- Empty state ---------- */
.category-10-empty-icon { color: #D1D5DB; }
.category-10-empty-title { font-size: 1.1rem; font-weight: 700; color: #1A1A1A; }
.category-10-empty-text  { font-size: 0.9rem; color: #6B7280; }
.category-10-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.4rem;
    background: var(--bs-primary, #F26522);
    color: #fff;
    border-radius: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.12s ease;
}
.category-10-btn-primary:hover { background: #D95A1A; color: #fff; }

/* ---------- Pagination ---------- */
.category-10-pagination .page-link {
    color: var(--bs-primary);
    border-color: #E5E7EB;
}
.category-10-pagination .page-item.active .page-link {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.category-10-pagination .page-link:hover {
    background: #FFF3EB;
    color: #D95A1A;
    border-color: #F0E8E0;
}

/* ---------- Infinite scroll spinner ---------- */
.category-10-infinite-spinner {
    width: 28px; height: 28px;
    border: 3px solid #F0E8E0;
    border-top-color: var(--bs-primary);
    border-radius: 50%;
    animation: cat10spin 0.6s linear infinite;
    display: inline-block;
    margin-bottom: 0.5rem;
}
@keyframes cat10spin { to { transform: rotate(360deg); } }