:root {
            --gap-width: 3px;
            --gap-color: #f0f2f5;
            
            /* ЦВЕТА ОБЩИЕ */
            --bg-body: rgb(240, 246, 249); 
            --bg-white: #fff;             
            --bg-hover: #e8f4fd;          
            
            /* ЦВЕТА СПЕЦИАЛЬНО ДЛЯ MOBILE */
            --bg-mobile-header: rgb(233, 241, 246);
            --bg-mobile-row: rgb(240, 246, 249);
        }

        /* === DESKTOP STYLES === */
        .grid-container {
            width: fit-content; 
            max-width: 100%;
            overflow-x: auto;
            background: #fff;
            position: relative;
            scrollbar-width: thin;
        }

        .grid-row { display: flex; width: max-content; }

        .grid-cell {
            --a-clr: rgb(82, 182, 236);
            --_w-cell: var(--w-cell, 120px);
            flex: 0 0 var(--_w-cell);
            padding: 8px;
            font-size: 14px;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            text-align: center;
            line-height: 1.2;
        }
        
        .grid-cell.bg-white { background-color: #fff; }
        .grid-cell.span-2 { --w-cell: 240px; }

        /* Разделители */
        .grid-row.group-row .grid-cell.span-2:not(:last-child) { border-right: var(--gap-width) solid var(--gap-color); }
        .grid-row:not(.group-row) .grid-cell:nth-child(odd):not(:first-child):not(:last-child) { border-right: var(--gap-width) solid var(--gap-color); }

        /* Первая колонка */
        .grid-cell:first-child {
            --gap-width: 7px;
            flex: 0 0 250px; 
            position: sticky; left: 0; z-index: 20; 
            border-right: calc(var(--gap-width) + 4px) solid var(--gap-color);
            overflow: visible !important; 
            
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            
            padding-left: 15px;
            font-weight: 400;
            text-align: left;
        }
        
        .desktop-shadow {
            position: absolute;
            top: 0;
            bottom: 0;
            /* Сдвигаем вправо на ширину бордера (gap) */
            right: calc( (var(--gap-width) + 4px) * -1 );
            width: calc(var(--gap-width) + 4px); /* Ширина тени */
            
            background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
            
            pointer-events: none; /* Пропускаем клики */
            z-index: 100;
        }
        
        .product-sub {
            display: none; 
            
        }
        
        .mobile-label-span {
            display: none;
        }

        /* .grid-cell:first-child::after {
            content: ""; position: absolute; top: 0; bottom: 0; 
            right: calc(var(--gap-width) * -1); 
            width: var(--gap-width);
            background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%);
            pointer-events: none; z-index: 1;
        } */

        .grid-row.header { 
            position: sticky; 
            top: 0; 
            z-index: 50; 
            font-weight: 600; 
        }
        .grid-row.header .grid-cell { color: #666; }
        .grid-row.header .grid-cell:first-child { 
            z-index: 60; 
            flex-direction: row; 
            align-items: center; 
            justify-content: flex-start;
        }

        /* Зебра Desktop */
        .grid-row:not(.header):nth-child(odd) { background-color: var(--bg-body); }
        .grid-row:not(.header):nth-child(odd) .grid-cell:first-child { background-color: var(--bg-body); }
        .grid-row:not(.header):nth-child(even) { background-color: var(--bg-white); }
        .grid-row:not(.header):nth-child(even) .grid-cell:first-child { background-color: var(--bg-white); }
        .grid-row:not(.header):hover { background-color: var(--bg-hover); }
        .grid-row:not(.header):hover .grid-cell:first-child { background-color: var(--bg-hover); }
        .grid-row.header, .grid-row.header .grid-cell:first-child { background-color: var(--bg-body); }

        .mobile-header-sub { display: none; }


        /* ================================================================= */
        /* === MOBILE STYLES === */
        /* ================================================================= */
        @media (max-width: 767.98px) {
            
            
            
            .grid-container {
                width: 100%; 
                background: transparent;
                overflow: visible; 
                box-shadow: none;
            }

            .grid-row.header { display: none; }

            /* КАРТОЧКА */
            .grid-row {
                display: grid; 
                grid-template-columns: 90px 1fr 1fr; 
                width: 100%;
                margin-bottom: 20px;
                background: #fff !important; 
                overflow: hidden;
            }

            /* ЗАГОЛОВОК */
            .grid-cell:first-child {
                grid-column: 1 / -1; 
                position: static; 
                width: 100%;
                border-right: none;
                background: #fff !important;
                font-size: 18px;
                font-weight: 700;
                color: #2c3e50;
                padding: 15px 15px 0 15px;
                border-bottom: none;
                display: block; 
                text-align: center;
            }
            .grid-cell:first-child a { text-align: center; font-weight: 400; display: block; margin-bottom: 5px; }
            /* .grid-cell:first-child::after { display: none; } */
            
            /* === ИЗМЕНЕНИЕ: ПОКАЗЫВАЕМ ОПИСАНИЕ НА МОБИЛЬНОМ === */
            .product-sub {
                display: block; /* Показываем */
                font-size: 12px;
                color: #888;
                font-weight: normal;
            }
            
            .desktop-shadow{
                display: none;
            }

            /* ШАПКА MOBILE */
            .mobile-header-sub {
                display: grid; 
                grid-template-columns: 90px 1fr 1fr; 
                width: calc(100% + 30px); 
                margin-left: -15px; 
                margin-top: 15px;
                padding: 8px 0;
                border-bottom: none;
                font-size: 14px;
                letter-spacing: 0.5px;
                color: rgb(119, 119, 119);
                font-weight: 400;
                text-align: center;
                align-items: center; 
                background-color: var(--bg-mobile-header);
            }
            .mobile-header-sub span:first-child { 
                text-align: left; 
                line-height: 1.2; 
                padding-left: 15px;
            } 

            /* ЯЧЕЙКА ПВХ */
            .grid-cell:nth-child(even) {
                grid-column: 1 / 3; 
                width: auto;
                flex: none;
                display: grid !important; 
                grid-template-columns: 90px 1fr; 
                padding: 12px 0;
                border: none;
                text-align: center;
                align-items: center;
                font-size: 14px;
                font-weight: 700;
            }
            /* .grid-cell:nth-child(even)::before {
                content: attr(data-label-size); 
                font-weight: 400;
                color: #333;
                text-align: left;
                padding-left: 15px; 
                font-size: 14px;
            } */
            
            .mobile-label-span {
                display: block; /* Показываем на мобильном */
                font-weight: 400;
                color: #333;
                text-align: left;
                padding-left: 15px; 
                font-size: 13px;
            }

            /* ЯЧЕЙКА ПОЛИКАРБОНАТ */
            .grid-cell:nth-child(odd):not(:first-child) {
                grid-column: 3;
                width: auto;
                flex: none;
                border: none;
                padding: 12px 0;
                justify-content: center;
                color: #555;
                font-weight: 700;
                font-size: 14px;
            }
            
            /* ЛОГИКА ЗЕБРЫ MOBILE */
            .grid-cell:nth-child(4n),
            .grid-cell:nth-child(4n+1) {
                background-color: var(--bg-mobile-row) !important;
            }
            .grid-cell:nth-child(4n+2),
            .grid-cell:nth-child(4n+3) {
                background-color: var(--bg-white) !important;
            }

            .grid-cell:nth-last-child(1), .grid-cell:nth-last-child(2) { border-bottom: none; }
            .grid-cell { border-right: none !important; }
        }