.page-products .container-bread-crumb { background-image: url('shop-banner-desktop-v2.webp'); }
.page-products .page-banner:not([style*="--page-banner"]) { background-image: none; }
.page-products .container-bread-crumb:not([style*="--page-banner"])::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; aspect-ratio: 2164 / 727; background: url('shop-banner-desktop-v2.webp') left center / 100% 100% no-repeat; mask-image: linear-gradient(to right, #000 60%, transparent); pointer-events: none; }
.page-products .container-products { padding-block: 36px 48px; }
.catalog-layout { row-gap: 24px; }
.page-products .container-products .col-right .filter-box.catalog-filter-panel { position: sticky; top: 20px; width: 100%; height: auto; padding: 22px; border: 1px solid #e5e7dd; border-radius: 18px; background: #fffdf9; }
.catalog-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: #244c38; font-size: 16px; list-style: none; cursor: pointer; }
.catalog-filter-heading::-webkit-details-marker, .catalog-category > summary::-webkit-details-marker { display: none; }
.catalog-filter-panel[open] > summary > span { transform: rotate(180deg); }
.catalog-filter-form { margin-top: 22px; }
.catalog-filter-section { border: 0; padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid #e9e9e1; min-width: 0; }
.catalog-filter-section > label, .catalog-filter-section h2, .catalog-filter-section legend { display: block; font-size: 13px; font-weight: 700; margin: 0 0 12px; float: none; }
.catalog-filter-section legend small { color: #748071; font-size: 11px; font-weight: 400; margin-inline-start: 6px; }
.catalog-filter-form input[type=search], .catalog-price-inputs input { width: 100%; height: 44px; background: white; border: 1px solid #dfe3d8; border-radius: 9px; padding: 10px 12px; font-size: 12px; color: #25392e; }
.catalog-filter-form input::placeholder { color: #7e877b; opacity: 1; }
.catalog-price-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catalog-price-inputs label { display: block; min-width: 0; font-size: 11px; color: #748071; }
.catalog-price-inputs input { margin-top: 7px; text-align: left; padding-inline: 9px; }
.catalog-category-tree, .catalog-category-tree ul { list-style: none; margin: 0; padding: 0; }
.catalog-category-tree ul { border-inline-start: 1px solid #e5e8de; padding-inline-start: 13px; margin-inline-start: 5px; }
.catalog-category-tree a, .catalog-all-categories { display: block; padding-block: 9px; color: #53624f; font-size: 13px; line-height: 1.8; }
.catalog-category-tree a:hover, .catalog-category-tree a[aria-current=page] { color: #244c38; font-weight: 700; }
.catalog-all-categories { color: #8a7245; padding-top: 0; }
.catalog-category > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; gap: 8px; }
.catalog-category > summary a { flex: 1; }
.catalog-category-arrow { color: #7d8979; padding: 4px; transition: transform .15s; }
.catalog-category[open] > summary > .catalog-category-arrow { transform: rotate(180deg); }
.catalog-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.catalog-checks > label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; cursor: pointer; white-space: nowrap; }
.catalog-checks input { width: 17px; height: 17px; flex-shrink: 0; margin: 0; accent-color: #244c38; }
.catalog-checks input:checked::after { color: #244c38; }
.catalog-checks .catalog-toggle-input { appearance: none; position: relative; display: inline-block; width: 36px; height: 20px; border: 1px solid #c6cfc1; border-radius: 20px; background: #dfe5da; cursor: pointer; transition: background-color .18s, border-color .18s; }
.catalog-checks .catalog-toggle-input::after { content: ''; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #25392e33; transition: inset-inline-start .18s; }
.catalog-checks .catalog-toggle-input:checked { border-color: #244c38; background: #244c38; }
.catalog-checks .catalog-toggle-input:checked::after { content: ''; inset-inline-start: calc(100% - 16px); }
.catalog-toggle-input:focus-visible + span { text-decoration: underline; text-underline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .catalog-checks .catalog-toggle-input, .catalog-checks .catalog-toggle-input::after { transition: none; } }
.catalog-apply { width: 100%; min-height: 44px; border: 0; border-radius: 10px; color: white; background: #244c38; font-size: 13px; font-weight: 700; }
.catalog-apply:hover { background: #193b2a; }
.catalog-reset { display: block; margin-top: 14px; text-align: center; color: #748071; font-size: 12px; }
.catalog-subcategories { padding: 20px 24px; background: #f3f2eb; border-radius: 16px; margin-bottom: 22px; }
.catalog-subcategories h2 { font-size: 14px; margin: 0 0 14px; font-weight: 700; }
.catalog-subcategories > div { display: flex; gap: 10px; flex-wrap: wrap; }
.catalog-subcategories a { display: inline-flex; align-items: center; gap: 24px; padding: 10px 14px; background: #fffdf9; border: 1px solid #e1e4d8; border-radius: 9px; color: #244c38; font-size: 12px; }
.catalog-subcategories a:hover { border-color: #8ba080; }
.catalog-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px; border: 1px solid #e4e7dd; padding: 16px; border-radius: 12px; margin-bottom: 22px; background: white; }
.catalog-toolbar label { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.catalog-toolbar select { border: 0; background: #f4f5ef; padding: 9px 12px; border-radius: 7px; color: #244c38; max-width: 160px; }
.catalog-toolbar .catalog-sort { margin-inline-start: auto; white-space: nowrap; }
.product-item.catalog-product { display: flex; flex-direction: column; background: white; border: 1px solid #e4e7dd; border-radius: 16px; padding: 14px; margin-bottom: 0; color: #25392e; height: auto; text-align: right; }
.page-products .products-items .product-item.catalog-product { margin-bottom: 22px; height: calc(100% - 22px); }
.product-item.catalog-product:hover { border-color: #a8b89e; box-shadow: 0 8px 24px #244c380d; }
.catalog-product-image { height: 260px; border-radius: 10px; padding: 4px; margin-bottom: 12px; }
.product-item.catalog-product img { display: block; height: 100%; width: 100%; object-fit: contain; }
.catalog-product-category { color: #7c8777; font-size: 11px; }
.product-item.catalog-product .title { font-size: 14px; line-height: 2; margin: 8px 0 12px; height: auto; min-height: 56px; font-weight: 700; }
.catalog-stock { display: inline-flex; color: #4b7350; font-size: 11px; margin-bottom: 14px; }
.catalog-stock.is-unavailable { color: #948674; }
.product-item.catalog-product .price-box { margin-top: auto; min-height: 28px; }
.product-item.catalog-product .price { color: #244c38; font-weight: 700; font-size: 16px; }
.catalog-product .price small, .catalog-product .price .price-unit { font-size: 11px; font-weight: 400; }
.catalog-original-price { display: block; margin-bottom: 5px; color: #6f776c; font-size: 12px; text-decoration-thickness: 1px; }
.catalog-original-price .price-unit { font-size: 10px; }
.catalog-no-price { color: #7b8577; font-size: 13px; }
.catalog-empty { margin: 0 12px; padding: 40px 20px; text-align: center; border: 1px dashed #d4ddcc; border-radius: 16px; background: #fafbf5; width: calc(100% - 24px); }
.catalog-empty h2 { font-size: 18px; }
.catalog-empty p, .catalog-empty a { font-size: 13px; line-height: 2; }
@media(max-width: 767px) {
    .page-products .container-bread-crumb:not([style*="--page-banner"])::before { width: 100%; aspect-ratio: auto; background-image: url('shop-banner-mobile-v2.webp'); background-size: cover; background-position: center; mask-image: none; }
    .page-products .container-products { padding-top: 22px; }
    .page-products .container-products .col-right .filter-box.catalog-filter-panel { position: static; padding: 18px; }
    .catalog-toolbar { flex-wrap: wrap; padding: 10px 12px; gap: 10px; }
    .catalog-checks { width: 100%; gap: 14px 18px; }
    .catalog-subcategories { padding: 18px; }
    .catalog-subcategories a { gap: 16px; }
    .catalog-product-image { height: 220px; }
}
@media(max-width: 575px) {
    .catalog-product-image { height: clamp(220px, 65vw, 300px); }
}
