/* ===== Таблицы размеров (новая разметка) — /info/setki-razmerov/ =====
   <div class="size-table">
     <h2 class="size-table__title">…</h2>
     <div class="size-table__scroll" tabindex="0"><table><thead>…</thead><tbody>…</tbody></table></div>
   </div>
   thead th — шапка; tbody th — первая колонка (размер), закреплена при прокрутке на телефоне. */
.size-table {
    --size-head-bg: #afcde7;
    --size-head-text: #1d3a56;
    --size-col-bg: #d8e6f3;
    --size-row-bg: #f3f8fc;
    --size-row-alt-bg: #fff;
    --size-row-hover-bg: #e6f0f9;
    --size-text: #222228;
    --size-line: #fff;

    margin: 0 0 32px;
}

body.theme-dark .size-table {
    --size-head-bg: #27425f;
    --size-head-text: #e8f0f8;
    --size-col-bg: #1f3044;
    --size-row-bg: #1b2532;
    --size-row-alt-bg: #202b39;
    --size-row-hover-bg: #26364a;
    --size-text: #e8f0f8;
    --size-line: #2b3a4d;
}

@media (prefers-color-scheme: dark) {
    body.theme-default .size-table {
        --size-head-bg: #27425f;
        --size-head-text: #e8f0f8;
        --size-col-bg: #1f3044;
        --size-row-bg: #1b2532;
        --size-row-alt-bg: #202b39;
        --size-row-hover-bg: #26364a;
        --size-text: #e8f0f8;
        --size-line: #2b3a4d;
    }
}

.size-table__title {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 26px;
}

.size-table__note {
    margin: -4px 0 12px;
    font-size: 13px;
    color: var(--secondary-color, #6b6b70);
}

/* Широкая таблица листается внутри блока, а не растягивает страницу */
.size-table__scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.size-table__scroll:focus-visible {
    outline: 2px solid var(--theme-base-color, #4584e3);
    outline-offset: 2px;
}

.size-table table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--size-text);
    font-variant-numeric: tabular-nums;
}

.size-table th,
.size-table td {
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid var(--size-line);
    border-bottom: 1px solid var(--size-line);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;      /* «155-166» не рвётся на две строки */
}

.size-table tr > :last-child {
    border-right: 0;
}

.size-table tbody tr:last-child > * {
    border-bottom: 0;
}

/* Шапка: названия колонок могут переноситься */
.size-table thead th {
    background: var(--size-head-bg);
    color: var(--size-head-text);
    font-weight: 500;
    white-space: normal;
    min-width: 72px;
}

.size-table tbody td {
    background: var(--size-row-bg);
}

.size-table tbody tr:nth-child(even) td {
    background: var(--size-row-alt-bg);
}

.size-table tbody tr:hover td {
    background: var(--size-row-hover-bg);
}

/* Первая колонка (размер) — закреплена слева при горизонтальной прокрутке */
.size-table tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
}

.size-table tbody th {
    background: var(--size-col-bg);
    color: var(--size-head-text);
    font-weight: 500;
    white-space: normal;      /* длинные названия параметров переносятся */
    min-width: 64px;
    max-width: 300px;
}

/* Мелкая подпись под названием колонки: <th>Размер<small>старый / новый код</small></th> */
.size-table th small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    opacity: .75;
}

/* Подзаголовок внутри таблицы: <tr class="size-table__group"><th colspan="N">Женские модели</th></tr> */
.size-table tbody tr.size-table__group th {
    position: static;
    background: var(--size-head-bg);
    text-align: left;
}

@media (max-width: 600px) {
    .size-table__title {
        font-size: 18px;
        line-height: 24px;
    }

    .size-table table {
        font-size: 13px;
    }

    .size-table th,
    .size-table td {
        padding: 8px 10px;
    }

    /* Закреплённая первая колонка не должна занимать пол-экрана */
    .size-table tr > th:first-child {
        min-width: 110px;
        max-width: 140px;
        white-space: normal;
    }
}