.table-wrapper {
            width: 100%;
            max-width: 100%;
            background: #1a2332; /* фон таблицы */
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
            padding: 6px 0 6px 0;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            position: relative;
            border: 1px solid #2d3b4e;
        }
                .product__link {
            display: none!important;
        }
            .page-one td:not(.element td) {
            background-color: #1a2332;      /* тёмно-синий фон */
            border-color: #2f3d52;          /* цвет границ (чуть светлее) */
            color: #e8edf5;                 /* светлый текст для контраста */
        }
            .page-one th:not(.element th) {
            background-color: #1a2332;      /* тёмно-синий фон */
            border-color: #2f3d52;          /* цвет границ (чуть светлее) */
            color: #e8edf5;                 /* светлый текст для контраста */
        }        
        .scroll-hint {
            display: none;
            font-size: 11px;
            color: #9aabbf;
            text-align: right;
            padding: 6px 14px 4px 0;
            letter-spacing: 0.3px;
            user-select: none;
        }
        @media (max-width: 860px) {
            .scroll-hint {
                display: block;
            }
        }

        table {
            border-collapse: collapse;
            width: 100%;
            min-width: 1100px;
            font-size: 13px;
            background-color: #1a2332; /* фон таблицы */
            table-layout: auto;
            color: #e8edf5;
        }

        th, td {
            border: 1px solid #2f3d52;
            padding: 9px 12px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }

        /* === ЗАГОЛОВОК (очень тёмный) === */
        thead th {
            background-color: #0f1620;
            color: #f0f4fc;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            font-size: 12px;
            border-bottom: 2px solid #3c4d64;
        }

        /* === ПЕРВЫЙ СТОЛБЕЦ (закреплён, тёмный с акцентом) === */
        thead th:first-child,
        tbody td:first-child {
            position: sticky;
            left: 0;
            z-index: 5;
            background-color: #0f1620; /* основа */
            color: #ffffff;
            font-weight: 600;
            text-align: left;
            padding-left: 16px;
            min-width: 140px;
            max-width: 200px;
            white-space: normal;
            word-break: break-word;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        }

        tbody td:first-child {
            background-color: #1a2537;
            z-index: 3;
            font-weight: 500;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.5);
        }

        thead th:first-child {
            z-index: 6;
            background-color: #0f1620;
        }

        /* === ЧЕРЕДОВАНИЕ СТРОК (тёмные оттенки) === */
        tbody tr:nth-child(even) {
            background-color: #242f40;
        }
        tbody tr:nth-child(odd) {
            background-color: #1c2635;
        }

        /* === ХОВЕР (более светлый для контраста) === */
        tbody tr:hover {
            background-color: #2d3b50;
        }
        tbody tr:hover td:first-child {
            background-color: #121d2b;
        }

        /* === АДАПТИВ === */
        @media (max-width: 860px) {
            table {
                font-size: 12px;
                min-width: 950px;
            }
            th, td {
                padding: 6px 8px;
            }
            thead th:first-child,
            tbody td:first-child {
                min-width: 120px;
                padding-left: 10px;
                font-size: 11px;
            }
        }

        @media (max-width: 520px) {
            table {
                font-size: 10px;
                min-width: 800px;
            }
            th, td {
                padding: 4px 5px;
            }
            thead th:first-child,
            tbody td:first-child {
                min-width: 100px;
                padding-left: 6px;
                font-size: 10px;
            }
            thead th {
                font-size: 9px;
                letter-spacing: 0.2px;
            }
            .scroll-hint {
                font-size: 10px;
                padding: 4px 10px 2px 0;
            }
        }