/* ==========================================================================
   06-category.css  --  category header, faceted sidebar, toolbar, pagination

   Layout: sidebar facets + results, collapsing to a filter drawer on mobile.
   ========================================================================== */

.scs-cathead {
    padding-block: var(--scs-6) var(--scs-5);
    border-bottom: 1px solid var(--scs-line);
    margin-bottom: var(--scs-6);
}
.scs-cathead__title { font-size: var(--scs-fs-xl); margin: 0 0 var(--scs-2); }
.scs-cathead__count { font-size: var(--scs-fs-sm); color: var(--scs-ink-3); }
.scs-cathead__desc { max-width: 70ch; margin-top: var(--scs-3); color: var(--scs-ink-2); font-size: var(--scs-fs-sm); }

/* Breadcrumbs */
.scs-crumbs { display: flex; flex-wrap: wrap; gap: var(--scs-1); align-items: center; font-size: var(--scs-fs-xs); color: var(--scs-ink-3); margin-bottom: var(--scs-3); }
.scs-crumbs a { color: var(--scs-ink-3); }
.scs-crumbs a:hover { color: var(--scs-accent); }
.scs-crumbs__sep { opacity: .6; }
.woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: var(--scs-1);
    row-gap: 4px;
    font-size: var(--scs-fs-xs);
    color: var(--scs-ink-3);
    margin-bottom: var(--scs-3);
}
.woocommerce-breadcrumb > a { flex: 0 0 auto; width: auto; }
.woocommerce-breadcrumb .breadcrumb-separator { flex: 0 0 auto; margin: 0; padding: 0; }

/* Subcategory chips */
.scs-subcats { display: flex; flex-wrap: wrap; gap: var(--scs-2); margin-bottom: var(--scs-5); }
.scs-subcat {
    padding: var(--scs-2) var(--scs-4);
    border: 1px solid var(--scs-line-strong);
    border-radius: var(--scs-radius-pill);
    background: var(--scs-surface);
    font-size: var(--scs-fs-sm);
    white-space: nowrap;
}
.scs-subcat:hover { border-color: var(--scs-accent); color: var(--scs-accent); }

/* ---- shop layout -------------------------------------------------------- */
.scs-shop {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--scs-8);
    align-items: start;
}
@media (min-width: 1024px) {
    .scs-shop { grid-template-columns: 264px minmax(0, 1fr); }
}

/* ---- sidebar facets ----------------------------------------------------- */
.scs-facets {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 340px);
    z-index: var(--scs-z-drawer);
    background: var(--scs-surface);
    padding: var(--scs-4);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--scs-t);
}
.scs-facets.is-open { transform: translateX(0); }
@media (min-width: 1024px) {
    .scs-facets {
        position: sticky;
        top: calc(var(--scs-header-h) + var(--scs-4));
        inset: auto;
        width: auto;
        transform: none;
        padding: 0;
        max-height: calc(100vh - var(--scs-header-h) - var(--scs-8));
        background: transparent;
    }
    .scs-facets__close { display: none; }
}

.scs-facet { padding-block: var(--scs-4); border-bottom: 1px solid var(--scs-line); }
.scs-facet__title {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--scs-fs-sm);
    font-weight: var(--scs-fw-bold);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 0 0 var(--scs-3);
    cursor: pointer;
}
.scs-facet__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--scs-2); max-height: 260px; overflow-y: auto; }
.scs-facet__item { display: flex; align-items: center; gap: var(--scs-2); font-size: var(--scs-fs-sm); color: var(--scs-ink-2); }
.scs-facet__item input { width: 16px; height: 16px; accent-color: var(--scs-accent); flex: 0 0 auto; }
.scs-facet__count { margin-left: auto; color: var(--scs-ink-3); font-size: var(--scs-fs-xs); }

/* colour/size swatch facets */
.scs-facet__swatches { display: flex; flex-wrap: wrap; gap: var(--scs-2); }
.scs-swatch {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--scs-line-strong);
    cursor: pointer;
}
.scs-swatch.is-active { outline: 2px solid var(--scs-accent); outline-offset: 2px; }
.scs-swatch--size {
    width: auto; min-width: 40px; height: 32px;
    border-radius: var(--scs-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--scs-fs-sm);
    background: var(--scs-surface);
}

/* active filter pills */
.scs-active-filters { display: flex; flex-wrap: wrap; gap: var(--scs-2); margin-bottom: var(--scs-4); }
.scs-pill {
    display: inline-flex; align-items: center; gap: var(--scs-2);
    padding: var(--scs-1) var(--scs-3);
    border-radius: var(--scs-radius-pill);
    background: var(--scs-accent-soft);
    color: var(--scs-accent);
    font-size: var(--scs-fs-xs);
    font-weight: var(--scs-fw-medium);
}
.scs-pill button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }

/* ---- toolbar ------------------------------------------------------------ */
.scs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--scs-3);
    padding-bottom: var(--scs-4);
    margin-bottom: var(--scs-5);
    border-bottom: 1px solid var(--scs-line);
    flex-wrap: wrap;
}
.scs-toolbar__count { font-size: var(--scs-fs-sm); color: var(--scs-ink-3); }
.scs-toolbar__right { display: flex; align-items: center; gap: var(--scs-3); margin-left: auto; }

.scs-filter-toggle { display: inline-flex; }
@media (min-width: 1024px) { .scs-filter-toggle { display: none; } }

.woocommerce-ordering select, .scs-sort {
    min-height: var(--scs-control-h-sm);
    padding: 0 var(--scs-3);
    border: 1px solid var(--scs-line-strong);
    border-radius: var(--scs-radius);
    background: var(--scs-surface);
    font-size: var(--scs-fs-sm);
}
.woocommerce-result-count { font-size: var(--scs-fs-sm); color: var(--scs-ink-3); margin: 0; }

/* ---- pagination --------------------------------------------------------- */
.scs-pagination, .woocommerce-pagination {
    display: flex; justify-content: center; gap: var(--scs-2);
    margin-top: var(--scs-10);
}
.woocommerce-pagination ul { display: flex; gap: var(--scs-2); list-style: none; margin: 0; padding: 0; border: 0; }
.woocommerce-pagination li { border: 0; }
.woocommerce-pagination a.page-numbers, .woocommerce-pagination span.page-numbers,
.woocommerce-pagination .page-numbers li .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; vertical-align: middle; line-height: 1;
    min-width: 40px; height: 40px;
    padding: 0 var(--scs-2);
    border: 1px solid var(--scs-line-strong);
    border-radius: var(--scs-radius);
    background: var(--scs-surface);
    font-size: var(--scs-fs-sm);
    color: var(--scs-ink-2);
}
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
    /* Brand purple + white. Must match the specificity of the base rule above and of
       Storefront's .woocommerce-pagination .page-numbers li .page-numbers.current,
       otherwise the base text colour (dark) and Storefront's near-black background win. */
    background: var(--dv-purple, #9c2bb0);
    border-color: var(--dv-purple, #9c2bb0);
    color: #fff;
    font-weight: var(--scs-fw-bold);
}

/* ---- search results ----------------------------------------------------- */
.scs-searchhead { padding-block: var(--scs-6); }
.scs-searchhead__term { color: var(--scs-accent); }
.scs-noresults {
    padding: var(--scs-12) var(--scs-4);
    text-align: center;
    border: 1px dashed var(--scs-line-strong);
    border-radius: var(--scs-radius-lg);
    background: var(--scs-surface);
}