:root {
    --listing-bg: #f7f7f8;
    --listing-surface: #ffffff;
    --listing-border: #e6e7ea;
    --listing-border-strong: #d7d9de;
    --listing-text: #1d1f24;
    --listing-muted: #717680;
    --listing-soft: #f3f4f6;
    --listing-primary: #111827;
    --listing-primary-hover: #000000;
    --listing-radius: 14px;
    --listing-radius-sm: 9px;
    --listing-shadow: 0 8px 28px rgba(15, 23, 42, .06);
}

/* =========================================================
   SAYFA
   ========================================================= */

.product-listing-page {
    width: 100%;
    min-width: 0;
    background: var(--listing-bg);
    color: var(--listing-text);
}

    .product-listing-page > .container {
        max-width: 1440px;
    }

    .product-listing-page main {
        min-width: 0;
    }

/* =========================================================
   BREADCRUMB
   ========================================================= */

.product-listing-breadcrumb {
    margin-bottom: 18px;
    padding: 0 2px;
}

    .product-listing-breadcrumb .breadcrumb {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow: hidden;
        font-size: 13px;
    }

    .product-listing-breadcrumb .breadcrumb-item {
        min-width: 0;
        color: var(--listing-muted);
        white-space: nowrap;
    }

        .product-listing-breadcrumb .breadcrumb-item a {
            color: var(--listing-muted);
            text-decoration: none;
            transition: color .18s ease;
        }

            .product-listing-breadcrumb .breadcrumb-item a:hover {
                color: var(--listing-primary);
            }

        .product-listing-breadcrumb .breadcrumb-item.active {
            overflow: hidden;
            color: var(--listing-text);
            text-overflow: ellipsis;
        }

        .product-listing-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
            color: #a5a9b1;
        }

/* =========================================================
   SIDEBAR
   ========================================================= */

.product-listing-sidebar {
    position: sticky;
    top: 92px;
    width: 100%;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9ccd2 transparent;
}

    .product-listing-sidebar::-webkit-scrollbar {
        width: 5px;
    }

    .product-listing-sidebar::-webkit-scrollbar-track {
        background: transparent;
    }

    .product-listing-sidebar::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background: #c9ccd2;
    }

/* =========================================================
   TOOLBAR
   ========================================================= */

.product-listing-toolbar {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-radius);
    background: var(--listing-surface);
    box-shadow: var(--listing-shadow);
}

.product-listing-toolbar__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.product-listing-toolbar__heading {
    min-width: 0;
}

.product-listing-title {
    margin: 0;
    color: var(--listing-text);
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
}

.product-listing-result-count {
    margin-top: 6px;
    color: var(--listing-muted);
    font-size: 14px;
}

.product-listing-toolbar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
}

.product-listing-filter-button {
    min-height: 42px;
    border-color: var(--listing-border-strong);
    border-radius: var(--listing-radius-sm);
    background: #fff;
    color: var(--listing-text);
    font-size: 14px;
    font-weight: 600;
}

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

.product-listing-sort__label {
    margin: 0;
    color: var(--listing-muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.product-listing-sort__select {
    width: 210px;
    min-height: 42px;
    border-color: var(--listing-border-strong);
    border-radius: var(--listing-radius-sm);
    background-color: #fff;
    color: var(--listing-text);
    font-size: 14px;
    box-shadow: none;
}

    .product-listing-sort__select:focus {
        border-color: #9ca3af;
        box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
    }

/* =========================================================
   AKTİF FİLTRELER
   ========================================================= */

.product-listing-active-filters {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--listing-border);
}

.product-listing-active-filters__label {
    flex: 0 0 auto;
    padding-top: 6px;
    color: var(--listing-muted);
    font-size: 13px;
    font-weight: 600;
}

.product-listing-active-filters__items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.product-listing-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid #d8dbe1;
    border-radius: 999px;
    background: var(--listing-soft);
    color: var(--listing-text);
    font-size: 12px;
    line-height: 1.2;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

    .product-listing-filter-chip:hover {
        border-color: #b6bac2;
        background: #e9eaed;
        transform: translateY(-1px);
    }

    .product-listing-filter-chip i {
        font-size: 11px;
    }

.product-listing-clear-filters {
    min-height: 32px;
    padding: 4px 6px;
    border: 0;
    background: transparent;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================================================
   FİLTRE PANELİ
   ========================================================= */

.product-listing-filters {
    overflow: hidden;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-radius);
    background: var(--listing-surface);
    box-shadow: var(--listing-shadow);
}

.product-listing-filters__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--listing-border);
}

.product-listing-filters__title {
    margin: 0;
    color: var(--listing-text);
    font-size: 18px;
    font-weight: 700;
}

.product-listing-filters__count {
    display: block;
    margin-top: 3px;
    color: var(--listing-muted);
    font-size: 12px;
}

.product-listing-filters__clear {
    padding: 0;
    border: 0;
    background: transparent;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}

.product-filter-group {
    border-bottom: 1px solid var(--listing-border);
}

    .product-filter-group:last-child {
        border-bottom: 0;
    }

.product-filter-group__toggle {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border: 0;
    background: #fff;
    color: var(--listing-text);
    font-size: 14px;
    font-weight: 700;
    text-align: left;
}

    .product-filter-group__toggle:hover {
        background: #fafafa;
    }

    .product-filter-group__toggle i {
        flex: 0 0 auto;
        color: var(--listing-muted);
        font-size: 11px;
        transition: transform .18s ease;
    }

.product-filter-group__body {
    max-height: 310px;
    overflow-y: auto;
    padding: 0 12px 14px;
    scrollbar-width: thin;
    scrollbar-color: #cfd2d8 transparent;
}

    .product-filter-group__body::-webkit-scrollbar {
        width: 4px;
    }

    .product-filter-group__body::-webkit-scrollbar-thumb {
        border-radius: 20px;
        background: #cfd2d8;
    }

    .product-filter-group__body.is-collapsed {
        display: none;
    }

/* =========================================================
   CHECKBOX FİLTRELERİ
   ========================================================= */

.product-filter-option {
    display: flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 7px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--listing-text);
    cursor: pointer;
    font-size: 13px;
    text-align: left;
    transition: color .15s ease, background-color .15s ease;
}

    .product-filter-option:hover {
        background: var(--listing-soft);
    }

    .product-filter-option.is-selected {
        background: #eef0f3;
        color: #111827;
        font-weight: 600;
    }

.product-filter-option__main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
}

.product-filter-option__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-filter-option__count,
.product-filter-category__count {
    display: inline-flex;
    min-width: 28px;
    height: 22px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: #f0f1f3;
    color: var(--listing-muted);
    font-size: 11px;
    font-weight: 600;
}

.product-filter-checkbox {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 0;
    border-color: #b8bcc4;
    cursor: pointer;
    box-shadow: none;
}

    .product-filter-checkbox:checked {
        border-color: var(--listing-primary);
        background-color: var(--listing-primary);
    }

    .product-filter-checkbox:focus {
        border-color: #8c919b;
        box-shadow: 0 0 0 3px rgba(17, 24, 39, .08);
    }

/* =========================================================
   MARKA SAYFASI KATEGORİ AĞACI
   ========================================================= */

.product-filter-category {
    padding: 2px 0;
}

.product-filter-category__item,
.product-filter-category__child {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--listing-text);
    text-align: left;
    transition: color .15s ease, background-color .15s ease;
}

.product-filter-category__item {
    min-height: 38px;
    padding: 7px 6px;
    font-size: 13px;
    font-weight: 650;
}

.product-filter-category__child {
    min-height: 34px;
    padding: 6px 6px 6px 20px;
    color: #555b65;
    font-size: 12px;
}

    .product-filter-category__item:hover,
    .product-filter-category__child:hover {
        background: var(--listing-soft);
    }

    .product-filter-category__item.is-selected,
    .product-filter-category__child.is-selected {
        background: #eef0f3;
        color: #111827;
        font-weight: 700;
    }

.product-filter-category__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-filter-category__children {
    position: relative;
    margin-left: 7px;
    padding-left: 8px;
}

    .product-filter-category__children::before {
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 0;
        width: 1px;
        background: var(--listing-border);
        content: "";
    }

/* =========================================================
   ÜRÜN GRID
   ========================================================= */

.product-listing-grid {
    align-items: stretch;
}

    .product-listing-grid > [class*="col-"] {
        display: flex;
        min-width: 0;
    }

        .product-listing-grid > [class*="col-"] > * {
            width: 100%;
        }

.product-listing-empty {
    padding: 70px 24px !important;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-radius);
    background: var(--listing-surface);
    box-shadow: var(--listing-shadow);
}

    .product-listing-empty i {
        color: #b2b6be;
    }

    .product-listing-empty h2 {
        margin-bottom: 8px;
        font-size: 21px;
        font-weight: 700;
    }

/* =========================================================
   PAGINATION
   ========================================================= */

.product-listing-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    padding: 17px 18px;
    border: 1px solid var(--listing-border);
    border-radius: var(--listing-radius);
    background: var(--listing-surface);
    box-shadow: var(--listing-shadow);
}

.product-listing-pagination__summary {
    flex: 0 0 auto;
    color: var(--listing-muted);
    font-size: 13px;
}

    .product-listing-pagination__summary strong {
        color: var(--listing-text);
    }

.product-listing-pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    margin: 0;
}

.product-listing-pagination .page-item {
    margin: 0;
}

.product-listing-pagination .page-link {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--listing-border);
    border-radius: 8px !important;
    background: #fff;
    color: var(--listing-text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.product-listing-pagination button.page-link:hover {
    border-color: #bcc0c7;
    background: var(--listing-soft);
    color: #000;
}

.product-listing-pagination .page-item.active .page-link {
    border-color: var(--listing-primary);
    background: var(--listing-primary);
    color: #fff;
}

.product-listing-pagination .page-item.disabled .page-link {
    border-color: #eceef1;
    background: #f7f7f8;
    color: #b2b6be;
    opacity: 1;
}

/* =========================================================
   MOBİL OFFCANVAS
   ========================================================= */

#productFilterOffcanvas {
    width: min(90vw, 390px);
    background: var(--listing-bg);
}

    #productFilterOffcanvas .offcanvas-header {
        min-height: 64px;
        border-bottom: 1px solid var(--listing-border);
        background: #fff;
    }

    #productFilterOffcanvas .offcanvas-title {
        font-size: 18px;
        font-weight: 700;
    }

    #productFilterOffcanvas .offcanvas-body {
        padding: 14px;
    }

    #productFilterOffcanvas .product-listing-filters {
        box-shadow: none;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199.98px) {
    .product-listing-sort__select {
        width: 185px;
    }

    .product-listing-toolbar {
        padding: 18px;
    }
}

@media (max-width: 991.98px) {
    .product-listing-page > .container {
        max-width: 100%;
    }

    .product-listing-toolbar {
        margin-bottom: 16px;
    }

    .product-listing-toolbar__main {
        align-items: flex-end;
    }

    .product-listing-active-filters {
        flex-direction: column;
        gap: 7px;
    }

    .product-listing-active-filters__label {
        padding-top: 0;
    }
}

@media (max-width: 767.98px) {
    .product-listing-page > .container {
        padding-right: 12px;
        padding-left: 12px;
    }

    .product-listing-breadcrumb {
        margin-bottom: 12px;
    }

    .product-listing-toolbar {
        padding: 15px;
        border-radius: 12px;
    }

    .product-listing-toolbar__main {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .product-listing-toolbar__actions {
        width: 100%;
    }

    .product-listing-filter-button {
        flex: 1 1 auto;
    }

    .product-listing-sort {
        flex: 1 1 auto;
    }

    .product-listing-sort__label {
        display: none;
    }

    .product-listing-sort__select {
        width: 100%;
    }

    .product-listing-pagination {
        align-items: stretch;
        flex-direction: column;
        margin-top: 20px;
        padding: 14px;
    }

    .product-listing-pagination__summary {
        text-align: center;
    }

    .product-listing-pagination__list {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .product-listing-title {
        font-size: 21px;
    }

    .product-listing-result-count {
        font-size: 13px;
    }

    .product-listing-toolbar__actions {
        gap: 8px;
    }

    .product-listing-filter-button,
    .product-listing-sort__select {
        min-height: 40px;
        font-size: 13px;
    }

    .product-listing-active-filters__items {
        width: 100%;
    }

    .product-listing-filter-chip {
        max-width: 100%;
    }

        .product-listing-filter-chip span {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .product-listing-pagination .page-link {
        min-width: 34px;
        height: 34px;
        padding: 5px 8px;
        font-size: 12px;
    }

    .product-listing-pagination__list {
        gap: 3px;
    }
}