/*============================================

   ThemeAdapt — product archive

   The filter sidebar, results bar and pagination. Loaded only on the product
   archive and category archives.

==============================================*/

.ta-archive {
    display: grid;
    grid-template-columns: minmax(0, 264px) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

@media (max-width: 991px) {
    .ta-archive {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
}

/* -------------------------------------------------------------------------
 * Filter sidebar
 * ---------------------------------------------------------------------- */

.ta-filter__toggle {
    display: none;
}

.ta-filter {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
}

.ta-filter__block {
    padding: 20px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    background: var(--ta-surface);
}

.ta-filter__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ta-filter__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: var(--ta-fw-bold);
}

.ta-filter__clear {
    padding: 0;
    border: 0;
    background: none;
    font-size: .8125rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-accent);
    cursor: pointer;
}

.ta-filter__clear[hidden] {
    display: none;
}

/* Sub-categories stay folded away until their branch is in play — with five
   platforms the open list runs well past the fold. Ticking the parent opens
   it, and so does arriving with a child already ticked, which keeps the
   selection visible on reload and on back/forward. */
.ta-filter__sublist {
    display: none;
    margin-left: 26px;
}

.ta-filter__branch:has(input:checked) .ta-filter__sublist {
    display: block;
}

.ta-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: .875rem;
    color: var(--ta-muted);
    cursor: pointer;
    transition: color .15s ease;
}

.ta-filter__option:hover {
    color: var(--ta-foreground);
}

/* The real control stays for keyboard and screen readers; the box is drawn beside it. */
.ta-filter__option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ta-filter__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--ta-border);
    border-radius: 5px;
    background: var(--ta-background);
    color: transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ta-filter__option--all .ta-filter__box {
    border-radius: 50%;
}

.ta-filter__option input:checked ~ .ta-filter__box {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: var(--ta-accent-fg);
}

.ta-filter__option--all input:checked ~ .ta-filter__box {
    box-shadow: inset 0 0 0 3px var(--ta-background);
}

.ta-filter__option input:focus-visible ~ .ta-filter__box {
    outline: 2px solid var(--ta-accent);
    outline-offset: 2px;
}

.ta-filter__option input:checked ~ .ta-filter__name {
    color: var(--ta-foreground);
    font-weight: var(--ta-fw-semibold);
}

.ta-filter__name {
    flex: 1 1 auto;
    min-width: 0;
}

.ta-filter__count {
    flex: none;
    font-size: .75rem;
    opacity: .9;
}

.ta-filter__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: var(--ta-radius-pill);
    background: var(--ta-accent);
    font-size: .6875rem;
    font-weight: var(--ta-fw-bold);
    color: var(--ta-accent-fg);
}

.ta-filter__badge[hidden] {
    display: none;
}

/* On narrow screens the sidebar collapses behind its own button. */
@media (max-width: 991px) {
    .ta-filter__toggle {
        display: inline-flex;
    }

    .ta-filter {
        display: none;
        position: static;
        margin-top: 16px;
    }

    .ta-filter.is-open {
        display: flex;
    }
}

/* -------------------------------------------------------------------------
 * Results bar
 * ---------------------------------------------------------------------- */

.ta-archive__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ta-border);
}

.ta-archive__count {
    margin: 0;
    font-size: .9375rem;
    color: var(--ta-muted);
}

.ta-archive__count strong {
    color: var(--ta-foreground);
}

.ta-sort {
    position: relative;
    display: flex;
    align-items: center;
}

.ta-sort__select {
    appearance: none;
    -webkit-appearance: none;
    padding: 9px 36px 9px 15px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-pill);
    background: var(--ta-surface);
    font-size: .875rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
    cursor: pointer;
}

.ta-sort__arrow {
    position: absolute;
    right: 15px;
    pointer-events: none;
    color: var(--ta-muted);
}

/* -------------------------------------------------------------------------
 * Results and pagination
 * ---------------------------------------------------------------------- */

.ta-archive__results {
    position: relative;
    min-height: 200px;
}

/* While it reloads, the grid shows skeleton cards (themeadapt-marketplace.css). */

.ta-pagination {
    margin-top: 40px;
}

.ta-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-sm);
    background: var(--ta-surface);
    font-size: .875rem;
    font-weight: var(--ta-fw-medium);
    color: var(--ta-foreground);
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.ta-pagination .page-numbers:hover {
    border-color: var(--ta-accent);
    color: var(--ta-accent);
}

.ta-pagination .page-numbers.current {
    background: var(--ta-accent);
    border-color: var(--ta-accent);
    color: var(--ta-accent-fg);
}

.ta-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

.ta-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}