/* ═══════════════════════════════════════════════════════════════════════════
 * PATCH 11.4 — Таблица размеров (размерная сетка tablemer П111).
 *
 * Источник данных: мета _kp_size_table (чистый HTML, наполняет
 * import_woo.py --sizetable-only из сырого catalogue.xml). Рендер:
 * woocommerce/content-single-product.php — триггер ПОД блоком «Методы нанесения»,
 * над матрицей заказа + скрытый <template>. Механика модалки:
 * assets/js/kp-sizechart.js (клон template → .kp-sizechart-modal в бэкдропе).
 *
 * Специфичность модальных правил поднята префиксом .kp-sizechart-backdrop —
 * чтобы кнопочные/типографские сбросы Woodmart не перебивали позиционирование
 * (баг v1: кнопка закрытия уезжала влево серым квадратом на заголовок).
 * Futura PT — максимум 700.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ───────── Триггер (под «Методы нанесения», над матрицей) — фирменная кнопка ───────── */

.pv-sizechart-row { margin-top: 6px; }

/* Скоуп body.kp-body .pv-sizechart-row … — перебиваем дефолтный стиль кнопок
   Woodmart (он красил триггер серым). Специфичность 0,0,3,1 выигрывает. */
body.kp-body .pv-sizechart-row .kp-sizechart-trigger {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: var(--ink, #0a0a0a);
    background: #fff;
    border: 1.5px solid var(--ink, #0a0a0a);
    border-radius: 10px;
    box-shadow: none;
    transition: background .15s, color .15s, border-color .15s;
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger svg { flex: 0 0 auto; }

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:hover {
    background: var(--yellow, #FECE15);
    border-color: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
}

body.kp-body .pv-sizechart-row .kp-sizechart-trigger:focus-visible {
    outline: 2px solid var(--ink, #0a0a0a);
    outline-offset: 2px;
}


/* ───────── Бэкдроп ───────── */

.kp-sizechart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.58);
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 24px;
    animation: kp-sizechart-bd-in .15s ease-out;
}

@keyframes kp-sizechart-bd-in { from { opacity: 0; } to { opacity: 1; } }


/* ───────── Модал — крупнее ───────── */

.kp-sizechart-backdrop .kp-sizechart-modal {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 30px 36px 28px;
    max-width: 880px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
    animation: kp-sizechart-in .18s ease-out;
    box-sizing: border-box;
}

@keyframes kp-sizechart-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.kp-sizechart-backdrop .kp-sizechart-modal:focus { outline: none; }


/* ───────── Кнопка закрытия — справа, тёмный круг, белый × ───────── */

.kp-sizechart-backdrop .kp-sizechart-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 5;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    background: var(--ink, #0a0a0a);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: background .15s, color .15s, transform .12s;
}

.kp-sizechart-backdrop .kp-sizechart-close:hover {
    background: var(--yellow, #FECE15);
    color: var(--ink, #0a0a0a);
    transform: scale(1.06);
}

.kp-sizechart-backdrop .kp-sizechart-close:focus-visible {
    outline: 2px solid var(--yellow, #FECE15);
    outline-offset: 2px;
}

.kp-sizechart-backdrop .kp-sizechart-close svg { display: block; }


/* ───────── Шапка (заголовок не залезает под крестик) ───────── */

.kp-sizechart-backdrop .kp-sizechart-head { margin: 0 56px 20px 0; }

.kp-sizechart-backdrop .kp-sizechart-title {
    margin: 0;
    font-size: 23px;
    font-weight: 700;
    color: var(--ink, #0a0a0a);
    line-height: 1.2;
}

.kp-sizechart-backdrop .kp-sizechart-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.4;
}


/* ───────── Тело: чертёж + таблица ───────── */

.kp-sizechart-backdrop .kp-sizechart-body { overflow-x: auto; }

/* Чертёж (рехостнутый SVG) — над таблицей, слева, крупнее. */
.kp-sizechart-backdrop .kp-sizechart-body img {
    display: block;
    max-width: 150px;
    height: auto;
    margin: 0 0 18px;
}

/* Таблица мерок — бренд-стиль, читаемый размер. Шапка = первый <tr>. */
.kp-sizechart-backdrop .kp-sizechart-body table {
    border-collapse: collapse;
    width: 100%;
    min-width: 540px;
    font-size: 14px;
    color: var(--ink, #0a0a0a);
}

.kp-sizechart-backdrop .kp-sizechart-body th,
.kp-sizechart-backdrop .kp-sizechart-body td {
    border: 1px solid var(--line, #E5E5E5);
    padding: 10px 14px;
    text-align: center;
    line-height: 1.35;
    white-space: nowrap;
}

/* Первая строка (шапка размеров) — тёмный фон, белый текст. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th,
.kp-sizechart-backdrop .kp-sizechart-body thead td,
.kp-sizechart-backdrop .kp-sizechart-body thead th {
    background: var(--ink, #0a0a0a);
    color: #fff;
    font-weight: 700;
}

/* Первая колонка (метка замера A/B/…) — полужирная, левый край, светлый фон. */
.kp-sizechart-backdrop .kp-sizechart-body tr td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr th:first-child {
    font-weight: 700;
    text-align: left;
    background: var(--fog, #F7F7F7);
    color: var(--ink, #0a0a0a);
}

/* Угловая ячейка (шапка ∩ первая колонка) — тёмная, читаемая. */
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child td:first-child,
.kp-sizechart-backdrop .kp-sizechart-body tr:first-child th:first-child {
    background: var(--ink, #0a0a0a);
    color: #fff;
    text-align: left;
}

/* Зебра по строкам данных (кроме шапки). */
.kp-sizechart-backdrop .kp-sizechart-body tr:nth-child(even):not(:first-child) td { background: #FCFCFC; }

/* Приписка-сноска поставщика (<p> после таблицы). */
.kp-sizechart-backdrop .kp-sizechart-body p {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--ink-3, #8A8A8A);
    line-height: 1.5;
    white-space: normal;
}


/* ───────── Мобилка ───────── */

@media (max-width: 600px) {
    .kp-sizechart-backdrop { padding: 14px; }
    .kp-sizechart-backdrop .kp-sizechart-modal {
        padding: 24px 18px 18px;
        border-radius: 14px;
        max-height: calc(100vh - 28px);
    }
    .kp-sizechart-backdrop .kp-sizechart-title { font-size: 19px; }
    .kp-sizechart-backdrop .kp-sizechart-head { margin-right: 48px; }
    .kp-sizechart-backdrop .kp-sizechart-close { top: 14px; right: 14px; width: 36px; height: 36px; }
    .kp-sizechart-backdrop .kp-sizechart-body table { font-size: 13px; min-width: 480px; }
    .kp-sizechart-backdrop .kp-sizechart-body th,
    .kp-sizechart-backdrop .kp-sizechart-body td { padding: 8px 10px; }
}