/* Шапка розділу */
.catalog-header {
    position:   relative;
    padding:    32px 0 40px;
    overflow:   hidden;
    color:      var(--text-inverse);
    background:
        url('../../img/catalog-ribbon.svg') center top / cover no-repeat,
        radial-gradient(900px 420px at -5% -20%, rgba(255, 255, 255, .22), transparent 70%),
        radial-gradient(700px 360px at 85% -15%, rgba(80, 160, 230, .45), transparent 70%),
        radial-gradient(800px 340px at 50% 110%, rgba(255, 255, 255, .14), transparent 70%),
        linear-gradient(178deg, var(--blue-500) 0%, #1f63ad 100%);
}

.catalog-header .container {
    position:       relative;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
}

.catalog-header__title {
    font-size:   40px;
    line-height: 1.4;
    font-weight: 700;
    color:       var(--text-inverse);
    text-align:  center;
}

.catalog-header__tabs {
    display:               grid;
    grid-auto-flow:        column;
    grid-auto-columns:     minmax(220px, 1fr);
    gap:                   16px;
    width:                 100%;
    margin:                -12px 0 -18px;
    padding:               12px 0 18px;
    overflow-x:            auto;
    scrollbar-width:       none;
}

.catalog-tab {
    display:         flex;
    align-items:     center;
    gap:             12px;
    min-height:      66px;
    padding:         10px 16px 10px 10px;
    border:          1px solid rgba(255, 255, 255, .55);
    border-radius:   18px;
    font-size:       16px;
    line-height:     1.25;
    font-weight:     600;
    color:           var(--text-inverse);
    text-decoration: none;
    background:      linear-gradient(166deg, rgba(255, 255, 255, .2) 14%, rgba(255, 255, 255, .06) 86%);
    box-shadow:      0 6px 10px rgba(0, 28, 64, .12), inset 0 1px 0 rgba(255, 255, 255, .25);
    backdrop-filter: blur(9px);
    transition:      background var(--transition), transform var(--transition);
}

.catalog-tab:hover {
    transform: translateY(-2px);
}

.catalog-tab__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           44px;
    height:          44px;
    border-radius:   12px;
    background:      rgba(255, 255, 255, .92);
}

.catalog-tab.is-active {
    border-color: rgba(255, 255, 255, .9);
    color:        var(--blue-500);
    background:   rgba(255, 255, 255, .94);
    box-shadow:   0 8px 12px rgba(0, 28, 64, .18);
}

.catalog-tab.is-active .catalog-tab__icon {
    background: var(--blue-100);
}

/* Тіло каталогу */
.catalog {
    padding: 40px 0 120px;
}

.catalog__body {
    display:               grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap:                   32px;
    align-items:           start;
}

.catalog__filters-toggle,
.catalog-overlay,
.catalog-filters__mobile-head,
.catalog-filters__apply {
    display: none;
}

.catalog-filters {
    position:        sticky;
    top:             80px;
    max-height:      calc(100vh - 104px);
    padding:         24px;
    overflow-y:      auto;
    border-radius:   24px;
    background:      var(--neutral-50);
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
}

.catalog-subcats {
    padding-bottom: 20px;
    border-bottom:  1px solid var(--neutral-200);
}

.catalog-subcats__title,
.catalog-filters__title {
    font-size:   20px;
    line-height: 1.4;
    font-weight: 700;
    color:       var(--neutral-900);
}

.catalog-subcats__list {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    margin-top:     12px;
}

.catalog-subcat {
    display:         flex;
    align-items:     center;
    gap:             12px;
    min-height:      48px;
    padding:         6px 12px 6px 6px;
    border-radius:   12px;
    font-size:       15px;
    font-weight:     500;
    color:           var(--neutral-700);
    text-decoration: none;
    transition:      background var(--transition);
}

.catalog-subcat:hover {
    background: var(--neutral-0);
}

.catalog-subcat__thumb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           36px;
    height:          36px;
    border-radius:   10px;
    background:      var(--neutral-0);
}

.catalog-subcat.is-active {
    font-weight: 600;
    color:       var(--blue-500);
    background:  var(--neutral-0);
}

.catalog-subcat.is-active .catalog-subcat__thumb {
    background: var(--blue-100);
}

.catalog-filters__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     20px;
}

.catalog-filters__reset {
    font-size:       14px;
    line-height:     1.4;
    font-weight:     600;
    color:           var(--blue-500);
    text-decoration: none;
}

/* Секція фільтра */
.filter {
    border-bottom: 1px solid var(--neutral-200);
}

.filter:last-of-type {
    border-bottom: 0;
}

.filter__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         20px 0 0;
    cursor:          pointer;
    list-style:      none;
}

.filter__head::-webkit-details-marker {
    display: none;
}

.filter__head .icon {
    transition: transform var(--transition);
}

.filter[open] .filter__head .icon {
    transform: rotate(180deg);
}

.filter__title {
    display:     inline-flex;
    align-items: center;
    gap:         8px;
    font-size:   16px;
    font-weight: 600;
    color:       var(--neutral-900);
}

.filter__selected {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    border-radius:   10px;
    font-size:       12px;
    color:           var(--text-inverse);
    background:      var(--blue-500);
}

.filter__body {
    padding: 12px 0 20px;
}

.filter:not([open]) .filter__head {
    padding-bottom: 20px;
}

.filter-options {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.filter-option {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       5px 6px;
    border-radius: 8px;
    cursor:        pointer;
    transition:    background var(--transition);
}

.filter-option:hover {
    background: var(--neutral-0);
}

.filter-option__input,
.filter-chip__input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.filter-option__box {
    position:      relative;
    flex-shrink:   0;
    width:         20px;
    height:        20px;
    border:        1.5px solid var(--neutral-300);
    border-radius: 6px;
    background:    var(--neutral-0);
    transition:    background var(--transition), border-color var(--transition);
}

.filter-option__box::after {
    content:      '';
    position:     absolute;
    top:          3px;
    left:         6px;
    width:        5px;
    height:       9px;
    border:       solid var(--neutral-0);
    border-width: 0 2px 2px 0;
    opacity:      0;
    transform:    rotate(45deg);
}

.filter-option__input:checked + .filter-option__box {
    border-color: var(--blue-500);
    background:   var(--blue-500);
}

.filter-option__input:checked + .filter-option__box::after {
    opacity: 1;
}

.filter-option__input:focus-visible + .filter-option__box,
.filter-chip__input:focus-visible + .filter-chip__label {
    outline:        2px solid var(--border-focus);
    outline-offset: 2px;
}

.filter-option__label {
    flex:        1 1 0;
    font-size:   15px;
    line-height: 20px;
    color:       var(--neutral-700);
}

.filter-option__input:checked ~ .filter-option__label {
    font-weight: 600;
    color:       var(--neutral-900);
}

.filter-option__count {
    font-size:   13px;
    line-height: 20px;
    font-weight: 500;
    color:       var(--neutral-400);
}

.filter__more {
    margin-top:  12px;
    font-size:   14px;
    font-weight: 600;
    color:       var(--blue-500);
    cursor:      pointer;
}

.filter-chips {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.filter-chip__label {
    display:       inline-flex;
    padding:       7px 12px;
    border:        1px solid var(--neutral-200);
    border-radius: var(--radius-pill);
    font-size:     13px;
    font-weight:   500;
    color:         var(--neutral-700);
    background:    var(--neutral-0);
    cursor:        pointer;
    transition:    background var(--transition), color var(--transition), border-color var(--transition);
}

.filter-chip__label:hover {
    border-color: var(--blue-500);
}

.filter-chip__input:checked + .filter-chip__label {
    border-color: var(--blue-500);
    color:        var(--text-inverse);
    background:   var(--blue-500);
}

/* Ціна */
.filter-price {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.filter-price__input {
    flex:          1 1 0;
    min-width:     0;
    padding:       10px 14px;
    border:        1px solid var(--neutral-200);
    border-radius: 12px;
    font-family:   var(--font-body);
    font-size:     14px;
    font-weight:   500;
    color:         var(--neutral-900);
    background:    var(--neutral-0);
    -moz-appearance: textfield;
}

.filter-price__input::-webkit-outer-spin-button,
.filter-price__input::-webkit-inner-spin-button {
    margin:             0;
    -webkit-appearance: none;
}

.filter-price__dash {
    color: var(--neutral-400);
}

.filter-range {
    position:   relative;
    height:     20px;
    margin-top: 14px;
    --from:     0%;
    --to:       100%;
}

.filter-range__track {
    position:      absolute;
    top:           8px;
    right:         0;
    left:          0;
    height:        4px;
    border-radius: 2px;
    background:    var(--neutral-200);
}

.filter-range__fill {
    position:   absolute;
    top:        0;
    bottom:     0;
    left:       var(--from);
    right:      calc(100% - var(--to));
    background: var(--blue-500);
}

.filter-range__handle {
    position:           absolute;
    top:                0;
    left:               0;
    width:              100%;
    height:             20px;
    margin:             0;
    background:         none;
    pointer-events:     none;
    -webkit-appearance: none;
    appearance:         none;
}

.filter-range__handle::-webkit-slider-thumb {
    width:              20px;
    height:             20px;
    border:             2px solid var(--blue-500);
    border-radius:      50%;
    background:         var(--neutral-0);
    box-shadow:         0 1px 4px rgba(0, 28, 64, .25);
    cursor:             pointer;
    pointer-events:     auto;
    -webkit-appearance: none;
}

.filter-range__handle::-moz-range-thumb {
    width:          18px;
    height:         18px;
    border:         2px solid var(--blue-500);
    border-radius:  50%;
    background:     var(--neutral-0);
    cursor:         pointer;
    pointer-events: auto;
}

.filter-range__handle::-webkit-slider-runnable-track { background: transparent; }
.filter-range__handle::-moz-range-track { background: transparent; }

/* Результати */
.catalog-results {
    min-width:  0;
    transition: opacity .2s ease;
}

.catalog__body.is-loading .catalog-results {
    opacity:        .45;
    pointer-events: none;
}

.catalog-toolbar {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             12px 24px;
    min-height:      42px;
}

.catalog-toolbar__active {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         8px;
}

.catalog-toolbar__found {
    padding-right:  8px;
    font-size:      15px;
    font-weight:    500;
    color:          var(--neutral-500);
}

.catalog-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       6px 5px 6px 12px;
    border-radius: var(--radius-pill);
    font-size:     13px;
    font-weight:   600;
    color:         var(--blue-500);
    background:    var(--blue-50);
    cursor:        pointer;
    transition:    background var(--transition);
}

.catalog-chip:hover {
    background: var(--blue-100);
}

.catalog-chip__x {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    border-radius:   10px;
    background:      var(--blue-100);
}

.catalog-toolbar__clear {
    font-size:   13px;
    font-weight: 600;
    color:       var(--neutral-500);
    cursor:      pointer;
}

.catalog-toolbar__clear:hover {
    color: var(--blue-500);
}

.catalog-sort {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.catalog-sort__label {
    font-size:   14px;
    font-weight: 500;
    color:       var(--neutral-500);
}

.catalog-sort__select {
    position: relative;
    display:  block;
}

.catalog-sort__select select {
    padding:            10px 38px 10px 16px;
    border:             1px solid var(--neutral-200);
    border-radius:      12px;
    font-family:        var(--font-body);
    font-size:          14px;
    font-weight:        600;
    color:              var(--neutral-900);
    background:         var(--neutral-0);
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;
}

.catalog-sort__select .icon {
    position:       absolute;
    top:            50%;
    right:          12px;
    transform:      translateY(-50%);
    pointer-events: none;
}

.catalog .products.catalog-grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:                   24px;
    margin:                24px 0 0;
}

.catalog .products.catalog-grid > li.product {
    float:     none;
    width:     auto;
    min-width: 0;
    margin:    0;
    padding:   0;
}

.catalog .products.catalog-grid::before,
.catalog .products.catalog-grid::after {
    display: none;
}

.catalog-grid .product-card {
    height: 100%;
}

.catalog-empty {
    padding: 64px 0;
    font-size: 17px;
    text-align: center;
    color: var(--text-secondary);
}

.catalog__pagination {
    margin-top: 24px;
}

.catalog__pagination .pagination__list {
    gap: 8px;
}

.catalog__pagination .page-numbers {
    border:     1px solid var(--neutral-200);
    background: var(--neutral-0);
    font-weight: 600;
    color:      var(--neutral-900);
}

.catalog__pagination .page-numbers.current {
    border-color: var(--blue-500);
    color:        var(--text-inverse);
    background:   var(--blue-500);
}

.catalog__show-all {
    cursor:          pointer;
    background:      transparent;
    font-family:     var(--font-body);
    display:         inline-flex;
    align-items:     center;
    height:          46px;
    padding:         0 20px;
    border:          1.5px solid var(--blue-500);
    border-radius:   var(--radius-pill);
    font-size:       15px;
    font-weight:     600;
    color:           var(--blue-500);
    text-decoration: none;
    transition:      background var(--transition);
}

.catalog__show-all:hover {
    background: var(--blue-50);
}

/* Адаптив */
@media (max-width: 1279px) {
    .catalog__body { grid-template-columns: 280px minmax(0, 1fr); gap: 24px; }
    .catalog .products.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 1023px) {
    .catalog-header__tabs {
        grid-auto-flow:    column;
        grid-auto-columns: minmax(220px, 1fr);
    }

    .catalog { padding: 24px 0 80px; }
    .catalog__body { display: block; }

    .catalog__filters-toggle {
        display:       inline-flex;
        position:      relative;
        margin-bottom: 16px;
    }

    .catalog__filters-count {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        min-width:       20px;
        height:          20px;
        border-radius:   10px;
        font-size:       12px;
        color:           var(--text-inverse);
        background:      var(--blue-500);
    }

    .catalog-overlay {
        position:   fixed;
        inset:      0;
        z-index:    calc(var(--z-sticky) + 10);
        background: rgba(20, 24, 29, .5);
    }

    .catalog-overlay:not([hidden]) { display: block; }

    .catalog-filters {
        position:       fixed;
        max-height:     none;
        top:            0;
        bottom:         0;
        left:           0;
        z-index:        calc(var(--z-sticky) + 20);
        width:          min(380px, 92vw);
        padding:        0 20px 0;
        overflow-y:     auto;
        border-radius:  0 24px 24px 0;
        background:     var(--neutral-50);
        transform:      translateX(-105%);
        transition:     transform .3s ease;
    }

    .catalog-filters.is-open { transform: none; }

    .catalog-filters__mobile-head {
        position:        sticky;
        top:             0;
        z-index:         2;
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        padding:         12px 0;
        background:      var(--neutral-50);
    }

    .catalog-filters__mobile-title { font-size: 20px; font-weight: 700; }

    .catalog-filters__apply {
        position:   sticky;
        bottom:     0;
        display:    block;
        margin:     0 -20px;
        padding:    16px 20px;
        background: var(--neutral-50);
        box-shadow: 0 -8px 16px rgba(0, 28, 64, .08);
    }

    .catalog-filters__apply .btn { width: 100%; }

    .catalog .products.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .catalog-header { padding: 24px 0 28px; }
    .catalog-header__title { font-size: 30px; }
    .catalog-header__tabs { grid-auto-columns: minmax(200px, 1fr); }
    .catalog .products.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .catalog-toolbar { gap: 12px; }
    .catalog-sort { width: 100%; justify-content: space-between; }
    .catalog__pagination .pagination__list { gap: 6px; }
}

@media (max-width: 479px) {
    .catalog .products.catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.catalog__more {
    display:         flex;
    justify-content: center;
    margin-top:      32px;
}

.catalog__more + .catalog__pagination {
    margin-top: 24px;
}

.catalog__show-all.is-loading {
    opacity: .6;
}

.catalog-search__count {
    margin:    0 0 24px;
    font-size: 15px;
    color:     var(--neutral-500);
}

.catalog-empty + .btn { margin-top: 16px; }