.app {
            max-width: 1300px;
            width: 100%;
        }
        .unified-block {
            background: transparent;
            padding: 1rem;
        }
        .filter-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 0.8rem;
        }
        .filter-row.three-groups {
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: nowrap;
            overflow-x: auto;
            padding-bottom: 4px;
        }
        .filter-group {
            display: flex;
            align-items: stretch;
            background: #f8fafc;
            border: 1px solid #cde8e8;
            border-radius: 8px;
            padding: 0;
            white-space: nowrap;
            flex-shrink: 0;
            overflow: hidden;
        }
        .filter-label {
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: #ffffff;
            background: #6ac9c6;
            border-right: 1px solid #5ab5b2;
            padding: 0 0.8rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            user-select: none;
            line-height: 2.2;
        }
        .filter-buttons-row {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            gap: 1px;
            background: #cde8e8;
            border-radius: 6px;
        }
        .btn-filter {
            background: #f8fafc;
            border: none;
            padding: 0 0.8rem;
            font-size: 0.78rem;
            font-weight: 500;
            color: #475569;
            cursor: pointer;
            transition: background 0.2s;
            white-space: nowrap;
            line-height: 2.2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0;
        }
        .btn-filter:hover {
            background: #e0f0f0;
        }
        .btn-filter.active {
            background: #6ac9c6;
            color: #ffffff;
            font-weight: 600;
        }
        .btn-action {
            padding: 0.4rem 1.4rem;
            font-weight: 600;
            font-size: 0.8rem;
            border: 1px solid #cde8e8;
            background: #f1f5f9;
            border-radius: 40px;
            cursor: pointer;
            transition: background 0.2s, color 0.2s, border-color 0.2s;
            line-height: 1.4;
            color: #1e293b;
            flex-shrink: 0;
            white-space: nowrap;
        }
        .btn-action.primary {
            background: #6ac9c6;
            border-color: #6ac9c6;
            color: #ffffff;
        }
        #resetBtn {
            color: #1e293b;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        #resetBtn:hover {
            background: #f87516;
            border-color: #f87516;
            color: #ffffff;
        }
        #resetBtn:active {
            background: #f87516;
            border-color: #f87516;
            color: #ffffff;
        }
        .toggle-container {
            display: flex;
            align-items: center;
            background: #f1f5f9;
            border-radius: 30px;
            border: 1px solid #cde8e8;
            padding: 0;
            width: fit-content;
            flex-shrink: 0;
        }
        .toggle-option {
            padding: 0.4rem 1.1rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            color: #475569;
            white-space: nowrap;
            border: none;
            background: transparent;
            line-height: 1.4;
            transition: background 0.2s, color 0.2s;
        }
        .toggle-option.active {
            background: #6ac9c6;
            color: #ffffff;
            font-weight: 600;
        }
        .vat-toggle.without-vat .toggle-option.active {
            background: #f87516;
        }

        .sale-toggle-container {
            display: flex;
            align-items: center;
            background: #f1f5f9;
            border-radius: 30px;
            border: 1px solid #cde8e8;
            padding: 0;
            width: fit-content;
            cursor: pointer;
            user-select: none;
            flex-shrink: 0;
            line-height: 1.4;
        }
        .sale-toggle-option {
            padding: 0.4rem 1.1rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #475569;
            white-space: nowrap;
            background: transparent;
            line-height: 1.4;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: background 0.2s, color 0.2s;
        }
        .sale-toggle-option.active {
            background: #f87516;
            color: #ffffff;
            font-weight: 600;
        }
        .sale-symbol-small {
            font-size: 1.1rem;
            font-weight: 900;
            line-height: 1;
        }

        .filter-msg {
            font-size: 0.75rem;
            color: #64748b;
            text-align: center;
            flex: 1 1 auto;
            margin: 0 10px;
            white-space: nowrap;
        }
        .action-buttons {
            display: flex;
            gap: 8px;
            flex-shrink: 0;
            align-items: center;
            margin-left: auto;
        }
        .mobile-vat-sale-line {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }
        .second-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.6rem;
        }
        .second-row > * {
            flex-shrink: 0;
        }
        .second-row .filter-msg {
            flex: 1 1 auto;
            min-width: 120px;
            text-align: center;
        }
        .tables-container {
            margin-top: 1.2rem;
            display: flex;
            flex-direction: column;
            gap: 0.08rem;
        }
        .product-table-desktop {
            width: 100%;
            border-collapse: collapse;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
            font-size: 0.8rem;
            min-width: 700px;
            display: table;
        }
        .product-table-desktop th,
        .product-table-desktop td {
            padding: 0.45rem 0.5rem;
            text-align: center;
            border: 1px solid #e9eef2;
            white-space: nowrap;
            vertical-align: middle;
        }
        .product-table-desktop thead th {
            background: #f8fafc;
            font-weight: 600;
            color: #334155;
            font-size: 0.72rem;
        }
        .close-card-desktop {
            background: none;
            border: none;
            color: #f87171;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            padding: 0.2rem 0.4rem;
            line-height: 1;
        }
        .size-cell {
            font-weight: 700;
        }
        .price-qty {
            font-weight: 700;
            display: block;
        }
        .price-roll {
            font-weight: 400;
            display: block;
        }
        .price-m2 {
            color: #64748b;
            font-size: 0.7rem;
            display: block;
        }
        .product-mobile {
            display: none;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
            padding: 0.8rem;
            position: relative;
        }
        .mobile-top-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.5rem;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        .mobile-size {
            font-weight: 700;
            font-size: 1rem;
            flex-shrink: 0;
        }
        .custom-select-wrapper {
            position: relative;
            min-width: 100px;
            flex-shrink: 1;
        }
        .custom-select {
            display: flex;
            justify-content: space-between;
            padding: 0.3rem 0.5rem;
            border-radius: 8px;
            border: 1px solid #cde8e8;
            background: #f8fafc;
            font-size: 0.8rem;
            cursor: pointer;
            gap: 4px;
            align-items: center;
        }
        .custom-select .arrow {
            font-size: 0.6rem;
            flex-shrink: 0;
        }
        .custom-options {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #cde8e8;
            border-radius: 8px;
            z-index: 100;
            max-height: 200px;
            overflow-y: auto;
            margin-top: 4px;
            min-width: 110px;
        }
        .custom-options.open {
            display: block;
        }
        .custom-option {
            padding: 0.4rem 0.5rem;
            font-size: 0.8rem;
            cursor: pointer;
            border-bottom: 1px solid #f1f5f9;
            white-space: nowrap;
        }
        .sale-card-icon {
            font-size: 1.3rem;
            font-weight: 900;
            color: #F97316;
            line-height: 1;
            flex-shrink: 0;
        }
        .close-card {
            background: none;
            border: none;
            color: #f87171;
            font-size: 1.8rem;
            cursor: pointer;
            line-height: 1;
            flex-shrink: 0;
            padding: 0;
            margin-left: auto;
        }
        .mobile-bottom-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
        }
        .mobile-chars {
            display: flex;
            gap: 0.5rem;
            font-size: 0.7rem;
            color: #64748b;
            flex-shrink: 0;
        }
        .mobile-prices {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            flex-shrink: 0;
        }
        .mobile-price-roll {
            font-weight: 700;
            font-size: 0.9rem;
        }
        .mobile-price-m2 {
            color: #64748b;
            font-size: 0.7rem;
        }
        .no-results {
            text-align: center;
            padding: 2rem;
            color: #64748b;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .unified-block {
                padding: 0.4rem;
            }
            .filter-row.three-groups {
                flex-direction: column;
                gap: 0.4rem;
                overflow-x: visible;
            }
            #layerGroup,
            #densityGroup,
            #widthGroup {
                width: 100%;
            }
            .filter-group {
                flex-direction: column;
                border-radius: 8px;
                border: 1px solid #cde8e8;
                background: #f8fafc;
            }
            .filter-label {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid #5ab5b2;
                padding: 0.35rem 0.5rem;
                font-size: 0.7rem;
                text-align: center;
                background: #6ac9c6;
                color: #ffffff;
            }
            .filter-buttons-row {
                flex-wrap: wrap;
            }
            .btn-filter {
                flex: 1 0 auto;
                font-size: 0.85rem;
                font-weight: 700;
                padding: 0.4rem 0.6rem;
            }
            .second-row {
                flex-direction: column;
                gap: 0.4rem;
                align-items: stretch;
            }
            .mobile-vat-sale-line {
                justify-content: space-between;
                width: 100%;
            }
            .action-buttons {
                justify-content: center;
                width: 100%;
                margin-left: 0;
            }
            .filter-msg {
                order: 3;
                width: 100%;
                margin: 0.3rem 0 0 0;
                text-align: center;
                font-size: 0.7rem;
                white-space: normal;
            }
            .product-table-desktop {
                display: none;
            }
            .product-mobile {
                display: block;
            }
            .mobile-size {
                font-size: 0.9rem;
            }
            .custom-select-wrapper {
                min-width: 85px;
            }
            .custom-select {
                font-size: 0.72rem;
                padding: 0.25rem 0.4rem;
            }
            .sale-card-icon {
                font-size: 1.1rem;
            }
            .close-card {
                font-size: 1.5rem;
            }
        }
        @media (min-width: 769px) {
            .product-mobile {
                display: none;
            }
            .product-table-desktop {
                display: table;
            }
            .second-row {
                flex-wrap: nowrap;
            }
        }
    
/* ===== VPP: верхняя панель ===== */
.vpp-row{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:.6rem;margin-bottom:.8rem;width:100%}
.vpp-row>*{flex:1 1 0;min-width:0;box-sizing:border-box}
.vpp-field{display:flex;flex-direction:column;gap:4px}
.vpp-label{font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;text-align:center}
.vpp-dd{position:relative;width:100%}
.vpp-dd-btn{display:flex!important;align-items:center;justify-content:center;position:relative;width:100%;height:40px!important;margin:0;padding:0 1.6rem!important;border:1px solid #cde8e8!important;border-radius:8px!important;background:#f8fafc!important;color:#1e293b!important;font-size:.85rem!important;font-weight:400;line-height:1.5!important;cursor:pointer;box-sizing:border-box;box-shadow:none!important;text-transform:none!important;letter-spacing:0!important}
.vpp-dd-btn:hover,.vpp-dd.open .vpp-dd-btn{border-color:#6ac9c6!important}
.vpp-dd-text{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.vpp-dd-arrow{position:absolute;right:.6rem;top:50%;width:0;height:0;margin-top:-2px;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #64748b;pointer-events:none}
.vpp-dd.has-value .vpp-dd-btn{border-color:#6ac9c6!important;background:#eefaf9!important;font-weight:700}
.vpp-dd-panel{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:100%;max-height:260px;overflow-y:auto;background:#fff;border:1px solid #cde8e8;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.1);z-index:1000}
.vpp-dd.open .vpp-dd-panel{display:block}
.vpp-dd-opt{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.5rem .6rem;text-align:center;font-size:.85rem;font-weight:700;color:#1e293b;cursor:pointer;border-bottom:1px solid #f1f5f9;user-select:none;line-height:1.4;background:#fff}
.vpp-dd-opt:last-child{border-bottom:none}
.vpp-dd-opt:hover{background:#f8fafc}
.vpp-dd-opt.vpp-na{font-weight:400;color:#b8c0cc}
.vpp-dd-val{display:block;text-align:center}
.vpp-cb{position:relative;flex:0 0 16px;width:16px;height:16px;margin:0;border:1.5px solid #94a3b8;border-radius:4px;background:#fff;box-sizing:border-box}
.vpp-dd-opt.vpp-na .vpp-cb{border-color:#d5dbe3}
.vpp-dd-opt.selected .vpp-cb{background:#6ac9c6;border-color:#6ac9c6}
.vpp-dd-opt.selected .vpp-cb::after{content:"";position:absolute;left:50%;top:50%;box-sizing:content-box;width:3px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-62%) rotate(45deg)}
.vpp-row .toggle-container,.vpp-row .sale-toggle-container,.vpp-row .btn-action{height:40px;width:auto;box-sizing:border-box;margin:0}
.vpp-row .toggle-container,.vpp-row .sale-toggle-container{display:flex;align-items:stretch;border:1px solid #cde8e8;border-radius:30px;background:#f1f5f9;overflow:hidden;padding:0}
.vpp-row .toggle-option,.vpp-row .sale-toggle-option{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:100%;padding:0 .5rem;margin:0;border-radius:0;line-height:1;white-space:nowrap;box-sizing:border-box}
.vpp-row .sale-toggle-container.active{background:#f87516;border-color:#f87516}
.vpp-row .sale-toggle-option.active{background:transparent;color:#fff}
.vpp-row .vat-toggle.without-vat .toggle-option.active{background:#f87516}
.vpp-row .btn-action{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:0 .8rem;border-radius:40px}
.vpp-row .btn-action svg{width:16px;height:16px;flex-shrink:0;transition:transform .4s;stroke:currentColor!important;color:inherit!important}
.vpp-row #resetBtn{-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,border-color .15s}
.vpp-row #resetBtn:hover,.vpp-row #resetBtn:active,.vpp-row #resetBtn:focus-visible{background:#6ac9c6!important;background-color:#6ac9c6!important;background-image:none!important;border-color:#6ac9c6!important;color:#fff!important;box-shadow:none!important;outline:none!important;opacity:1!important}
.vpp-row #resetBtn:hover span,.vpp-row #resetBtn:active span{color:#fff!important}
.vpp-row #resetBtn:hover svg,.vpp-row #resetBtn:active svg{stroke:#fff!important;color:#fff!important}
.vpp-row #resetBtn:hover svg{transform:rotate(180deg)}
.vpp-row #resetBtn:active svg{transform:rotate(360deg);transition-duration:.25s}
.vpp-msg{font-size:.75rem;color:#64748b;margin:0 0 .4rem}
.close-card-desktop,.close-card,
.close-card-desktop:hover,.close-card:hover,
.close-card-desktop:focus,.close-card:focus,
.close-card-desktop:active,.close-card:active{background:none!important;background-color:transparent!important;border:none!important;box-shadow:none!important;outline:none!important;border-radius:0!important;color:#f87171!important;opacity:1!important;text-decoration:none!important}
.close-card-desktop,.close-card{display:inline-flex;align-items:center;justify-content:center;padding:4px!important;margin:0;line-height:1;cursor:pointer}
.close-card{margin-left:auto}
.close-card-desktop svg,.close-card svg,
.close-card-desktop:hover svg,.close-card:hover svg{display:block;width:14px;height:14px;pointer-events:none;stroke:#f87171!important;color:#f87171!important;opacity:1!important}
.close-card-desktop svg path,.close-card svg path{stroke:#f87171!important}
@media (max-width:768px){
 .vpp-row{flex-wrap:wrap;gap:.5rem}
 .vpp-row>.vpp-field{flex:1 1 28%}
 .vpp-row>.toggle-container,.vpp-row>.sale-toggle-container{flex:1 1 40%}
 .vpp-row>.btn-action{flex:1 1 100%}
 .vpp-dd-btn{font-size:.8rem!important;padding:0 1.3rem!important}
}