/* ======================================================================
   Category — Cohort 4 (Professional Charcoal)
   Bootstrap-first: breadcrumb / form-control / btn / row+col / form-check
   come from Bootstrap. This file only carries premium polish + the
   mobile-drawer mechanics Bootstrap doesn't ship for sticky filters.
   ====================================================================== */

/* Toolbar — cohort cream (not the yellow `--bs-light-secondary`) */
.category-4-toolbar {
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color) !important;
}
.category-4-toolbar .form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.12) !important;
}

/* Breadcrumb — boutique gold separators + current emphasis */
.category-4-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "·";
    color: var(--bs-secondary, var(--bs-secondary-color));
    padding: 0 8px;
    font-weight: 700;
}
.category-4-breadcrumb .breadcrumb-item a {
    transition: color 0.2s ease;
}
.category-4-breadcrumb .breadcrumb-item a:hover {
    color: var(--bs-primary) !important;
}
.category-4-breadcrumb .breadcrumb-item.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

/* Hero — image background needs cover/center + overlay for legibility */
.category-4-hero { background-color: var(--bs-secondary-bg); }
.category-4-hero-image {
    background-size: cover;
    background-position: center;
    position: relative;
}
.category-4-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.4) 0%, rgba(17, 24, 39, 0.7) 100%);
    z-index: 0;
}
.category-4-hero-image .container { position: relative; z-index: 1; }

/* Filter sidebar — sticky on desktop */
@media (min-width: 992px) {
    .category-4-filters {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
}

/* Filter drawer (mobile) */
@media (max-width: 991.98px) {
    .category-4-filters {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(86vw, 360px);
        z-index: 1080;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        border-radius: 0 !important;
        margin: 0;
    }

    body.is-cat-filters-open .category-4-filters { transform: translateX(0); }

    .category-4-filters-overlay {
        position: fixed;
        inset: 0;
        background: rgba(17, 24, 39, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
        z-index: 1070;
    }
    body.is-cat-filters-open .category-4-filters-overlay { opacity: 1; pointer-events: auto; }
}

@media (min-width: 992px) {
    .category-4-filters-overlay { display: none !important; }
}

.category-4-filter-link {
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.category-4-filter-link:hover {
    color: var(--bs-primary, #111827) !important;
    padding-left: 4px;
}