.catalog-shell {
    --catalog-side: 216px;
    width: min(1600px,96vw);
    margin: 18px auto 58px;
    display: grid;
    grid-template-columns: var(--catalog-side) minmax(0,1fr);
    gap: 20px;
    transition: grid-template-columns .2s
}

.catalog-sidebar {
    position: sticky;
    top: 84px;
    align-self: start;
    height: calc(100vh - 105px);
    min-height: 520px;
    padding: 14px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--cs-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(65,45,43,.05)
}

.catalog-sidebar-header {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 5px 14px;
    border-bottom: 1px solid #f0e7e4
}

.catalog-sidebar-toggle {
    width: 38px;
    height: 38px;
    flex: none;
    border: 0;
    border-radius: 11px;
    background: #f6e9e5;
    color: #866259;
    font-size: 20px;
    cursor: pointer
}

.catalog-sidebar-title {
    font: 700 16px 'Manrope',sans-serif;
    letter-spacing: .1em;
    color: #6f5651
}

.catalog-mobile-close {
    display: none;
    margin-left: auto;
    border: 0;
    background: none;
    color: #866259;
    font-size: 25px
}

.catalog-sidebar-label {
    margin: 15px 10px 7px;
    color: #9a8580;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em
}

.catalog-category-nav {
    display: grid;
    gap: 4px
}

.catalog-category-link {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 11px;
    border-radius: 11px;
    color: var(--cs-muted);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap
}

    .catalog-category-link:hover, .catalog-category-link.active {
        background: #f5e7e3;
        color: #8d645a
    }

    .catalog-category-link i {
        width: 22px;
        flex: none;
        text-align: center;
        font-style: normal;
        font-size: 16px
    }

    .catalog-category-link.child {
        padding-left: 22px
    }

.catalog-main-panel {
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cs-line);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(65,45,43,.05)
}

.catalog-panel-heading {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    background: linear-gradient(110deg,#f8efec,#f6f2f0);
    border-bottom: 1px solid var(--cs-line)
}

    .catalog-panel-heading span {
        color: #987066;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .16em
    }

    .catalog-panel-heading h1 {
        margin: 4px 0 2px;
        font: 700 27px/1.05 'Manrope',sans-serif
    }

    .catalog-panel-heading p {
        max-width: 760px;
        margin: 0;
        overflow: hidden;
        color: var(--cs-muted);
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .catalog-panel-heading b {
        padding: 8px 11px;
        border: 1px solid var(--cs-line);
        border-radius: 999px;
        background: #fff;
        color: var(--cs-muted);
        font-size: 12px;
        font-weight: 500
    }

.catalog-panel-body {
    padding: 16px
}

.catalog-toolbar {
    display: grid;
    grid-template-columns: minmax(300px,1fr) 220px;
    gap: 14px;
    align-items: end
}

.catalog-field label {
    display: block;
    margin-bottom: 5px;
    color: var(--cs-muted);
    font-size: 11px
}

.catalog-search-box {
    display: flex;
    height: 49px;
    padding: 5px;
    border: 1px solid var(--cs-line);
    border-radius: 14px
}

    .catalog-search-box input {
        flex: 1;
        min-width: 0;
        padding: 0 11px;
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit
    }

    .catalog-search-box button {
        padding: 0 19px;
        border: 0;
        border-radius: 10px;
        background: var(--cs-terracotta);
        color: #fff;
        font-weight: 700
    }

.catalog-field select {
    width: 100%;
    height: 49px;
    padding: 0 12px;
    border: 1px solid var(--cs-line);
    border-radius: 14px;
    background: #fff;
    font: inherit
}

.catalog-summary {
    display: flex;
    justify-content: space-between;
    margin: 14px 1px;
    color: var(--cs-muted);
    font-size: 13px
}

    .catalog-summary a {
        color: #8d645a
    }

.product-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 15px
}

.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cs-line);
    border-radius: 17px;
    box-shadow: 0 8px 23px rgba(65,45,43,.04)
}

.product-image-wrap {
    position: relative;
    display: block;
    aspect-ratio: 1.13;
    overflow: hidden;
    background: #f5efed
}

    .product-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.product-image-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    color: #a68177;
    font: 700 17px 'Manrope',sans-serif
}

.product-badges {
    position: absolute;
    left: 10px;
    top: 10px;
    display: flex;
    gap: 5px
}

.product-badge {
    padding: 5px 8px;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 700
}

    .product-badge.offer {
        background: #bd776d
    }

    .product-badge.featured {
        background: #7a6b79
    }

.product-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 13px
}

.product-category {
    color: #987066;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase
}

.product-card h2 {
    min-height: 38px;
    margin: 6px 0 4px;
    font: 700 14px/1.3 'Manrope',sans-serif
}

    .product-card h2 a {
        text-decoration: none
    }

.product-brand {
    color: var(--cs-muted);
    font-size: 11px
}

.product-description {
    overflow: hidden;
    margin: 7px 0;
    color: var(--cs-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: auto;
    padding-top: 9px
}

    .product-price-row strong {
        font: 700 18px 'Manrope',sans-serif
    }

    .product-price-row span {
        color: #9e9795;
        font-size: 10px;
        text-decoration: line-through
    }

.product-card-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0e8e5
}

.availability, .product-detail-link {
    font-size: 10px;
    font-weight: 700
}

    .availability.available {
        color: var(--cs-sage-dark)
    }

    .availability.low {
        color: #9a6b2f
    }

    .availability.out {
        color: #ae4c4c
    }

.product-detail-link {
    color: #8d645a;
    text-decoration: none
}

.catalog-pagination {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 28px
}

    .catalog-pagination a {
        color: #8d645a;
        font-weight: 700
    }

.catalog-backdrop {
    display: none
}

.catalog-shell.is-collapsed {
    --catalog-side: 70px;
    gap: 16px
}

    .catalog-shell.is-collapsed .catalog-sidebar {
        padding: 14px 9px
    }

    .catalog-shell.is-collapsed .catalog-sidebar-title, .catalog-shell.is-collapsed .catalog-sidebar-label, .catalog-shell.is-collapsed .catalog-category-link span {
        display: none
    }

    .catalog-shell.is-collapsed .catalog-sidebar-header {
        justify-content: center;
        padding-bottom: 13px
    }

    .catalog-shell.is-collapsed .catalog-sidebar-toggle {
        background: var(--cs-ink);
        color: #fff
    }

    .catalog-shell.is-collapsed .catalog-category-link {
        width: 44px;
        height: 44px;
        margin: 7px auto;
        justify-content: center;
        padding: 0
    }

        .catalog-shell.is-collapsed .catalog-category-link i {
            width: auto
        }

        .catalog-shell.is-collapsed .catalog-category-link.child {
            padding: 0
        }

.catalog-mobile-open {
    display: none
}

.catalog-drawer-open {
    overflow: hidden
}

@media(max-width:1250px) {
    .product-grid {
        grid-template-columns: repeat(3,1fr)
    }
}

@media(max-width:900px) and (min-width:641px) {
    .catalog-shell {
        --catalog-side: 70px;
        grid-template-columns: 70px 1fr
    }

    .catalog-sidebar-title, .catalog-sidebar-label, .catalog-category-link span {
        display: none
    }

    .catalog-sidebar-header, .catalog-category-link {
        justify-content: center
    }

    .catalog-category-link {
        padding: 0
    }

    .product-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:640px) {
    .catalog-shell.is-collapsed
    .catalog-category-link .sa-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }
    .catalog-mobile-open {
        display: grid
    }

    .catalog-shell {
        display: block;
        width: calc(100% - 24px);
        margin-top: 12px
    }

    .catalog-sidebar {
        position: fixed;
        z-index: 1060;
        left: 0;
        top: 0;
        bottom: 0;
        width: min(248px,78vw);
        height: 100vh;
        min-height: 0;
        border-radius: 0 18px 18px 0;
        transform: translateX(-105%);
        transition: transform .22s
    }

        .catalog-sidebar.is-open {
            transform: translateX(0)
        }

        .catalog-sidebar .catalog-sidebar-title, .catalog-sidebar .catalog-sidebar-label, .catalog-sidebar .catalog-category-link span {
            display: block
        }

        .catalog-sidebar .catalog-sidebar-header {
            justify-content: flex-start
        }

        .catalog-sidebar .catalog-category-link {
            justify-content: flex-start;
            padding: 0 11px
        }

        .catalog-sidebar .catalog-sidebar-toggle {
            display: none
        }

    .catalog-mobile-close {
        display: block
    }

    .catalog-backdrop {
        position: fixed;
        z-index: 1050;
        inset: 0;
        background: rgba(35,29,30,.38)
    }

        .catalog-backdrop.is-open {
            display: block
        }

    .catalog-toolbar {
        grid-template-columns: 1fr
    }

    .product-grid {
        grid-template-columns: 1fr
    }

    .catalog-panel-heading {
        grid-template-columns: 1fr
    }

        .catalog-panel-heading b {
            display: none
        }

    .catalog-shell.is-collapsed {
        --catalog-side: 216px;
    }

        .catalog-shell.is-collapsed .catalog-sidebar {
            padding: 14px;
        }

        .catalog-shell.is-collapsed .catalog-sidebar-title,
        .catalog-shell.is-collapsed .catalog-sidebar-label,
        .catalog-shell.is-collapsed .catalog-category-link span {
            display: block;
        }

        .catalog-shell.is-collapsed .catalog-sidebar-header {
            justify-content: flex-start;
            padding-bottom: 14px;
        }

        .catalog-shell.is-collapsed .catalog-category-link,
        .catalog-shell.is-collapsed .catalog-category-link.child {
            width: auto;
            height: 40px;
            margin: 4px 0;
            justify-content: flex-start;
            padding: 0 11px;
        }

            .catalog-shell.is-collapsed .catalog-category-link.child {
                padding-left: 22px;
            }

            .catalog-shell.is-collapsed .catalog-category-link i {
                width: 22px;
            }
}

.catalog-category-link .sa-icon {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: block;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    pointer-events: none;
}

.catalog-shell.is-collapsed
.catalog-category-link .sa-icon {
    width: 19px;
    height: 19px;
    min-width: 19px;
}