/* Block 5.3 — JetSmartFilters sidebar / off-canvas drawer.
 * Tokens from design-system.css only. No !important — specificity via
 * .w-archive wrappers (0,2,0+) over JSF's single-class selectors (0,1,0).
 */

/* ---------- Layout ---------- */

.w-archive {
    display: flex;
    align-items: flex-start;
    gap: var(--w-gutter);
}

.w-archive__filters {
    flex: 0 0 264px;
    max-width: 264px;
}

.w-archive__content {
    flex: 1 1 auto;
    min-width: 0; /* grid blowout guard */
}

/* ---------- Toolbar (chips + mobile toggle) ---------- */

.w-archive__toolbar {
    display: flex;
    align-items: center;
    gap: var(--w-space-3);
    margin-bottom: var(--w-space-3);
    min-height: 1px;
}

.w-archive__chips:empty {
    margin: 0;
}

/* ---------- Ďalšie filtre button (v1.7.1) ----------
 * Sits under the category tree, expands the facet sections in-flow.
 * Same visual family as the catpanel header: navy block button. */
.w-filters-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: var(--w-space-2) var(--w-space-4);
    margin-bottom: var(--w-space-4);
    font: 600 var(--w-small-size) var(--w-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--w-navy);
    border: 1px solid var(--w-navy);
    border-radius: var(--w-radius);
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.w-filters-more:hover,
.w-filters-more:focus-visible {
    background: var(--w-aqua-dark);
    border-color: var(--w-aqua-dark);
}

.w-filters-more__chev {
    font-size: 16px;
    line-height: 1;
    transition: transform 180ms ease;
}

.w-filters-more[aria-expanded="true"] .w-filters-more__chev {
    transform: rotate(90deg);
}

/* ---------- Facet collapse (v1.7.1) ---------- */

/* The [hidden] attribute keeps facets collapsed until Ďalšie filtre
 * expands them in-flow — identical behavior on every breakpoint. */
.w-archive__facets[hidden] {
    display: none;
}

/* ---------- Sidebar chrome ---------- */

.w-archive__filters-head {
    display: none; /* drawer-only, shown < 1024px */
}

.w-filter {
    padding: var(--w-space-4);
    margin-bottom: var(--w-space-4);
    background: #fff;
    border: 1px solid var(--w-line-light);
    border-radius: var(--w-radius-card);
}

.w-filter__heading {
    margin: 0 0 var(--w-space-3);
    font: 700 var(--w-small-size) var(--w-font);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--w-navy);
}

/* ---------- JSF element refinement (out-specify single-class selectors) ---------- */

.w-archive__filters .jet-checkboxes-list__row {
    margin: 0;
}

.w-archive__filters .jet-checkboxes-list__item {
    display: flex;
    align-items: center;
    gap: var(--w-space-2);
    padding: 6px 0;
    font-size: var(--w-small-size);
    color: var(--w-slate);
    cursor: pointer;
}

.w-archive__filters .jet-checkboxes-list__item:hover {
    color: var(--w-navy);
}

.w-archive__filters .jet-checkboxes-list__decorator {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--w-line);
    border-radius: var(--w-radius-sm);
}

.w-archive__filters .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator,
.w-archive__filters .jet-checkboxes-list__item.jet-filter-row-checked .jet-checkboxes-list__decorator {
    background: var(--w-cta);
    border-color: var(--w-cta);
}

/* Search-within-filter (Priemer) */
.w-archive__filters .jet-filter-items-search {
    margin-bottom: var(--w-space-2);
}

.w-archive__filters .jet-filter-items-search__input {
    width: 100%;
    padding: 8px 10px;
    font-size: var(--w-small-size);
    border: 1px solid var(--w-line);
    border-radius: var(--w-radius);
}

.w-archive__filters .jet-filter-items-search__input:focus {
    outline: none;
    border-color: var(--w-aqua-dark);
    box-shadow: 0 0 0 2px var(--w-aqua-pale);
}

/* Scroll container (enabled via scroll_height arg) */
.w-archive__filters .jet-checkboxes-list-wrapper.jet-filter-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--w-line) transparent;
}

/* Range filter */
.w-archive__filters .jet-range__inputs {
    font-size: var(--w-small-size);
    color: var(--w-slate);
}

/* ---------- Chips ---------- */

.w-archive__chips .jet-active-filters__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 0 6px 6px 0;
    font-size: var(--w-small-size);
    color: var(--w-navy);
    background: var(--w-aqua-pale);
    border: 1px solid var(--w-aqua);
    border-radius: 999px;
}

/* ---------- Mobile: no filter sidebar at all (v1.7.3) ----------
 * Category navigation lives in the header mobile menu; George 2026-09-15:
 * the Ďalšie filtre button is "not needed" on mobile either. So below
 * 1024px the entire archive sidebar (tree + button + facets) is hidden
 * and the products render full-width. Desktop sidebar unchanged. */

@media (max-width: 1023.98px) {

    .w-archive {
        display: block;
    }

    .w-archive__filters {
        display: none;
    }

    /* Drawer chrome (head + close button) is retired; keep the selectors
     * harmless if any stale markup ever renders. */
    .w-archive__filters-head,
    .w-filters-close,
    .w-filters-overlay {
        display: none !important;
    }

}

/* Active-filter chips (rendered by filters.js) */
.w-archive__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.w-archive__chips--empty { display: none; }
.w-archive__chips .w-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--w-line);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--w-navy);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.w-archive__chips .w-chip:hover {
    border-color: var(--w-cta);
    color: var(--w-cta);
}
.w-archive__chips .w-chip__x {
    font-size: 14px;
    line-height: 1;
    color: var(--w-muted);
}
.w-archive__chips .w-chip:hover .w-chip__x { color: var(--w-cta); }
.w-archive__chips .w-chip__filter { color: var(--w-muted); font-weight: 400; }

/* Grid density with the sidebar (George, 2026-08-09: buy row must stay one
   line). The card buy row (104px qty + 8px gap + ~100px CTA) needs ≥ ~212px
   inner width. Full-width archives keep the standard 4-cap from
   product-card.css; the sidebar layout drops density instead of squeezing
   cards: 3 tracks ≥1280px (inner ≈244px), 2 tracks 1024–1279px (inner
   ≈330px), with a slightly narrower sidebar in the lower band.
   Specificity (0,4,1)+element beats product-card.css's (0,3,1)+element. */
@media (min-width: 1280px) {
    .w-archive .w-archive__content ul.products[class*="columns-"] { --w-cols: 3; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .w-archive__filters { flex-basis: 240px; max-width: 240px; }
    .w-archive .w-archive__content ul.products[class*="columns-"] { --w-cols: 2; }
}

/* ---------- Load more (Phase D) ----------
   The jet-smart-filters-pagination marker renders its button client-side
   from templates/for-js/pagination/load-more.php:
   <div class="jet-filters-pagination">
     <div class="jet-filters-pagination__load-more">
       <div class="jet-filters-pagination__link">Zobraziť ďalšie</div>
   Styling: our primary CTA style (matches the card ATC button), centered
   under the grid. No !important — out-specify via .w-archive chain. */

.w-archive .jet-filters-pagination {
    display: flex;
    justify-content: center;
    margin-top: var(--w-space-6);
}

.w-archive .jet-filters-pagination__load-more {
    display: contents;
}

.w-archive .jet-filters-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 200px;
    padding: 0 var(--w-space-6);
    font: 600 var(--w-base-size) var(--w-font);
    color: #fff;
    background: var(--w-cta);
    border: 0;
    border-radius: var(--w-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--w-transition);
}

.w-archive .jet-filters-pagination__link:hover,
.w-archive .jet-filters-pagination__link:focus {
    background: var(--w-cta-hover);
    color: #fff;
}

.w-archive .jet-filters-pagination__link.jet-filters-pagination__disabled,
.w-archive .jet-filters-pagination__link[disabled] {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- D19: Category tree panel (Shoptet-style) ----------
   Always-visible category tree at the top of the sidebar, above the
   filters. Navy header card + flat white rows, chevrons, right-aligned
   product counts. George, 2026-09-02, ref: bazenoveprislusenstvo.sk. */

.w-catpanel {
    margin-bottom: var(--w-space-4);
    background: #fff;
    border: 1px solid var(--w-line-light);
    border-radius: var(--w-radius-card);
    overflow: hidden;
}

.w-catpanel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--w-space-4);
    background: var(--w-navy);
    color: #fff;
}

.w-catpanel__icon {
    display: inline-flex;
    color: var(--w-aqua); /* decorative aqua on navy — token-approved use */
}

.w-catpanel__title {
    font: 700 var(--w-small-size) var(--w-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.w-catpanel__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Rows: chevron + label + count. */
.w-catpanel__item {
    margin: 0;
}

.w-catpanel__row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px var(--w-space-4);
    font-size: var(--w-small-size);
    line-height: 1.35;
    color: var(--w-slate);
    text-decoration: none;
    border-top: 1px solid var(--w-line-light);
    transition: background 150ms ease, color 150ms ease;
}

.w-catpanel__row::before {
    content: "›";
    flex: 0 0 auto;
    font-size: 13px;
    line-height: inherit;
    color: var(--w-line); /* placeholder, tinted per level below */
    transition: color 150ms ease;
}

.w-catpanel__row:hover {
    background: var(--w-bg-soft);
    color: var(--w-navy);
}

.w-catpanel__row:hover::before {
    color: var(--w-aqua-dark);
}

.w-catpanel__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}

.w-catpanel__count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--w-muted);
    font-variant-numeric: tabular-nums;
}

/* Level shaping. L2 = the nine sections: navy, semibold. Deeper levels
   indent and lighten. */

/* L2 sections */
.w-catpanel__item > .w-catpanel__row {
    font-weight: 600;
    color: var(--w-navy);
}
.w-catpanel__item > .w-catpanel__row::before {
    color: var(--w-aqua-dark);
}

/* L3+ */
.w-catpanel__list--sub .w-catpanel__row {
    padding-left: 30px;
    font-size: 13px;
}
.w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__row {
    padding-left: 44px;
    font-size: 12.5px;
}
.w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__row {
    padding-left: 58px;
    font-size: 12px;
    color: var(--w-muted);
}
.w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__row::before {
    color: var(--w-line);
}

/* Wayfinding: the path you came through, then where you are. */
.w-catpanel__item.is-in > .w-catpanel__row {
    color: var(--w-aqua-dark);
}
.w-catpanel__item.is-current > .w-catpanel__row {
    background: var(--w-aqua-pale);
    color: var(--w-navy);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--w-aqua-dark);
}
.w-catpanel__item.is-current > .w-catpanel__row::before {
    color: var(--w-aqua-dark);
}

/* ---------- D19.1: accordion (George, 2026-09-02) ----------
   Branches start COLLAPSED; the chevron toggle opens their sublevels
   in flow. The branch being browsed renders server-side with .is-open
   (wayfinding survives the collapse). Mobile uses the same accordion —
   collapsed sections keep the drawer compact by default. */

.w-catpanel__item {
    position: relative;
}

.w-catpanel__list--sub {
    display: none; /* collapsed until .is-open on the item */
}

.w-catpanel__item.is-open > .w-catpanel__list--sub {
    display: block;
}

.w-catpanel__toggle,
.w-catpanel .w-catpanel__toggle {
    position: absolute;
    top: 6px;
    left: 2px;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: none;
    background-color: transparent;
    background-image: none;
    border: 0;
    box-shadow: none;
    line-height: 1;
    font-size: 13px;
    color: var(--w-aqua-dark);
    cursor: pointer;
    border-radius: var(--w-radius-sm);
    text-decoration: none;
}

.w-catpanel__list--sub .w-catpanel__toggle {
    top: 5px;
    left: 16px;
}

.w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__toggle {
    left: 30px;
}

.w-catpanel__toggle > span {
    display: block;
    font-size: 13px;
    line-height: 1;
    transition: transform 180ms ease;
}

.w-catpanel__item.is-open > .w-catpanel__toggle > span {
    transform: rotate(90deg);
}

.w-catpanel__toggle:hover,
.w-catpanel__toggle:focus-visible {
    color: var(--w-navy);
}

.w-catpanel__toggle:focus-visible {
    outline: 2px solid var(--w-aqua-dark);
    outline-offset: 1px;
}

/* Branch rows: the button replaces the decorative chevron bullet, and
   the label clears the button's column. */
.w-catpanel__item.has-children > .w-catpanel__row::before {
    content: none;
}

.w-catpanel__item.has-children > .w-catpanel__row {
    padding-left: 26px;
}

.w-catpanel__list--sub .w-catpanel__item.has-children > .w-catpanel__row {
    padding-left: 38px; /* clears the toggle ending at 36px */
}

.w-catpanel__list--sub .w-catpanel__list--sub .w-catpanel__item.has-children > .w-catpanel__row {
    padding-left: 52px;
}