/* ========================================================================
   Страница цен: сводка по сортам, кнопка выгрузки, таблицы по разделам.

   Палитра НЕ своя — те же токены, что у листинга подкатегории
   (css/subcat-listing.css), с теми же обоснованиями: --muted взят #707070
   вместо header.css --muted (#7b7b7b), потому что им покрашены данные о
   товаре, а не декор, и он обязан проходить WCAG AA на белом и на --paper
   (4.95:1 и 4.58:1 против 4.23:1 и 4.06:1 у исходного).

   Зелёных два, роли разведены так же: --cta красит кнопку скачивания и
   совпадает с кнопками сайта, --accent — текст и активные состояния, где
   цвет обязан читаться на белом (5.30:1).
   ======================================================================== */
.pl,
.pl-section {
    --pl-sticky-top: 61px;
    --ink: #343434;
    --muted: #707070;
    --faint: #9e9999;
    --line: #e6e6e6;
    --line-soft: #efefef;
    --paper: #f6f6f6;
    --card: #ffffff;
    --cta: #6da640;
    --cta-hover: #418123;
    --accent: #3a791b;
    --wash: rgba(109, 166, 64, .07);
    --on-accent: #ffffff;
    --r: 12px;
    --r-sm: 9px;
}

/* Стык с первым экраном. Между hero и первым блоком набегало 136 px пустоты:
   30 px нижнего margin у #up плюс 60 px верхнего padding у `.article` плюс
   собственные отступы блока. Пустота такого размера читается как «здесь что-то
   не загрузилось», поэтому первый блок подтягивается вверх. Отрицательный
   margin, а не правка `.article`: тот класс общий для всех текстовых страниц
   сайта. */
/* ⚠️ Без `:first-child`: шорткод печатает перед блоком свой <link> со стилями,
   поэтому `.pl` — второй ребёнок, и правило с `:first-child` молча не
   применялось (замер боя: провал остался те же 130 px). Блок `.pl` на странице
   ровно один, так что селектор без уточнения безопасен. */
.article .pl {
    margin-top: -76px;
}

/* ── сводка по сортам ───────────────────────────────────────────────── */
/* ── условия покупки ────────────────────────────────────────────────── */
/* Двумя колонками на широком экране: пунктов немного, и в один столбец они
   растягивали бы страницу без нужды. Иконки те же, что в первом экране, —
   набор темы (inc/hero-content.php), своих сюда не заводим. */
.pl-terms {
    margin: 0 0 30px;
}

.pl-terms-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-term {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
}

/* ⚠️ Маркер темы гасим: у каждого пункта своя иконка, и зелёная точка `::before`
   от `.article li` вставала рядом с ней второй меткой. Селектор с тремя классами
   — чтобы перебить правило темы, как и в сводке по сортам. */
.pl-terms .pl-terms-list .pl-term::before,
.pl-terms .pl-terms-list .pl-term::marker {
    content: none;
    display: none;
}

.pl-term-ico {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--accent);
}

.pl-term-ico svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pl-term-tx {
    color: var(--ink);
}

/* ── сводка «раздел × сорт» (итог после таблиц) ─────────────────────── */
.pl-summary {
    margin: 0 0 30px;
}

.pl-summary-h {
    margin: 0 0 12px;
}

/* Матрица шире по первой колонке (там названия разделов) и не липнет шапкой:
   в ней пять-шесть строк, прилипание тут не нужно. */
.pl-matrix th:nth-child(1) {
    width: 26%;
}

/* Матрица не наследует сетку таблиц разделов: колонок у неё столько, сколько
   сортов, и проценты для шести колонок ей не подходят. */
.pl-matrix th:nth-child(n+2) {
    width: auto;
}

.pl-matrix thead th {
    position: static;
}

.pl-matrix caption {
    caption-side: top;
    text-align: left;
    padding: 12px 16px 0;
    font-size: 14px;
    color: var(--muted);
}

.pl-matrix .pl-price {
    font-weight: 600;
    white-space: nowrap;
}

.pl-dash {
    color: var(--faint);
}

/* Вторая цена в ячейке — с новой строки и приглушённо: она справочная, главной
   остаётся та, в которой считает остальной сайт. */
.pl-cell-sub {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: var(--muted);
}

/* Ячейки матрицы выше обычных — в них две строки. */
.pl-matrix tbody td,
.pl-matrix tbody th {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* ── подпись рядом с кнопкой первого экрана ─────────────────────────── */
/* Живёт здесь, а не в css/header.css: аргумент `cta_note` у hero-video пока
   использует только страница цен, а header.css виден на всех страницах сайта и
   тянет полный прогон тестов. Появится второй потребитель — переносить туда. */
.hero-note {
    align-self: center;
    font-size: 15px;
    color: rgba(255, 255, 255, .72);
}

.m-hv-note {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
}

/* ── оглавление по разделам ─────────────────────────────────────────── */
.pl-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 8px;
}

.pl-nav-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    background: var(--card);
}

.pl-nav-item:hover,
.pl-nav-item:focus {
    border-color: var(--cta);
    color: var(--accent);
}

.pl-nav-item i {
    font-style: normal;
    font-size: 12px;
    color: var(--muted);
}

/* ── секция раздела ─────────────────────────────────────────────────── */
.pl-section {
    /* Якорь из оглавления не должен уводить заголовок под липкую шапку сайта
       (61 px в сжатом состоянии, см. css/subcat-listing.css). */
    scroll-margin-top: 72px;
}

.pl-h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

/* Селектор усилен секцией НАМЕРЕННО: тема задаёт h2 свой `margin: 0 0 30px -3px`
   с большей специфичностью, и одиночный `.pl-h2` его не перебивал — между
   заголовком и таблицей висело 30 px пустоты при line-height 48 px. */
.pl-section .pl-h2 {
    margin-bottom: 12px;
}

/* Цвет НЕ задаём своим токеном: заголовки сайта чисто чёрные, а --ink это #343434,
   и заголовок-ссылка выглядел светлее соседних. inherit берёт цвет у самого h2,
   то есть у дизайн-системы темы. */
/* Подчёркивания в покое нет: заголовок и так читается как заголовок, а линия
   под ним выглядела вторым, лишним правилом рядом с рамкой таблицы. */
.pl-h2 a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color .12s ease, color .12s ease;
}

.pl-h2 a:hover,
.pl-h2 a:focus {
    color: var(--accent);
    border-bottom-color: var(--cta);
}

.pl-h2-count {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
}

/* ── таблица ────────────────────────────────────────────────────────── */
/* ⚠️ `overflow: clip`, а НЕ `auto`: `auto` создаёт скролл-контейнер, и липкая
   шапка внутри него прилипает к нему, а не к окну — то есть не работает вовсе.
   Тот же приём и по той же причине в листинге подкатегории (.sl-table).
   Горизонтальная прокрутка нужна только на узких экранах, там она включается
   в медиазапросе ниже. */
.pl-tw {
    overflow: clip;
    margin: 0 0 34px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--card);
}

/* `table-layout: fixed` — не оптимизация, а требование единообразия: при
   автоширине браузер считает колонки ПО СОДЕРЖИМОМУ каждой таблицы, и пять
   таблиц страницы получали разные ширины (замер 1440 px: 175/265/241 против
   176/267/243 — колонки «плавали» от раздела к разделу). Фиксированная сетка
   выстраивает их в одну вертикаль. */
.pl-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Размер — самая длинная строка, ему больше места; сорт — короткий ярлык;
   три ценовые колонки равны между собой, чтобы числа сравнивались взглядом. */
/* Порядок: размер, сорт, количество, затем три цены. Количеству нужно меньше
   места, чем ценам, — там короткие числа. */
.pl-table th:nth-child(1) { width: 22%; }
.pl-table th:nth-child(2) { width: 10%; }
.pl-table th:nth-child(3) { width: 16%; }
.pl-table th:nth-child(4) { width: 17%; }
.pl-table th:nth-child(5) { width: 17%; }
.pl-table th:nth-child(6) { width: 18%; }

.pl-table th,
.pl-table td {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
}

/* Подсветка строки под курсором: в таблице на две сотни строк, где соседние
   значения отличаются одной цифрой, взгляд теряет строку на полпути к правой
   колонке. */
.pl-table tbody tr:hover > * {
    background: var(--wash);
}

/* Граница между сортами. В прайсе бруска подряд идут 12 строк CD с одинаковой
   ценой, затем 12 строк AB — без разделителя это выглядит одной сплошной
   простынёй, и смена цены посреди неё читается как опечатка. Класс ставит PHP:
   в CSS «строка, где значение изменилось» не выражается. */
.pl-table tbody tr.pl-group > * {
    border-top: 1px solid var(--line);
}

.pl-table tbody tr.pl-group:first-child > * {
    border-top: 0;
}

/* Шапка — тот же вид, что у листинга подкатегории (css/subcat-listing.css:208):
   капитель с разрядкой на белом, а не серая плашка. Так две таблицы сайта
   выглядят одной таблицей, а не двумя разными.
   ⚠️ vertical-align: middle обязателен — тема сбрасывает его на tr, и без явного
   значения шапка съезжает вверх (та же грабля разобрана в subcat-listing.css). */
/* Липкая шапка: без неё на 72 строках раздела уже через экран непонятно, какая
   колонка какая. 61 px — высота шапки сайта в сжатом состоянии, она тоже
   sticky (то же значение и то же обоснование в css/subcat-listing.css). */
.pl-table thead th {
    position: sticky;
    top: var(--pl-sticky-top, 61px);
    z-index: 2;
    vertical-align: middle;
    background: var(--card);
    padding: 13px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
}

/* ── сортировка ─────────────────────────────────────────────────────── */
/* Заголовок-кнопка: сортировка работает и с клавиатуры. Кнопка растянута на всю
   ячейку, чтобы попадать по ней было так же легко, как по заголовку. */
/* ⚠️ `appearance: none` и сброс фона обязательны: тема красит ВСЕ кнопки зелёной
   заливкой, и заголовок «Размер, мм» при наведении превращался в зелёную плашку
   во всю ячейку. Ровно тот же сброс стоит у `.sl-sort` в листинге подкатегории —
   правила здесь повторяют его один в один, чтобы таблицы выглядели одинаково.
   Отступ держит ЯЧЕЙКА, а кнопка inline-flex с padding: 0: растянутая на всю
   ячейку кнопка и давала ту самую заливку. */
.pl-sort {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: inherit;
    cursor: pointer;
}

.pl-sort:hover,
.pl-sort:focus {
    background: none;
    color: var(--accent);
}

/* ⚠️ Тень тоже сбрасываем: у кнопок сайта есть зелёное свечение (--cta-glow), и
   оно оставалось вокруг заголовков колонок ореолом, хотя фон уже был снят. */
.pl-sort,
.pl-sort:hover,
.pl-sort:focus,
.pl-sort:active {
    box-shadow: none;
    filter: none;
}

.pl-sort:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Активная колонка подсвечена целиком — сигнал «сортировано по ней». */
.pl-table thead th:not([aria-sort="none"]) .pl-sort {
    color: var(--accent);
}

/* Стрелка — символ, как в листинге: рисованный уголок на границе ячейки
   выглядел бы иначе, чем у соседней таблицы сайта. */
.pl-arrow {
    font-size: 13px;
    line-height: 1;
    font-style: normal;
}

.pl-table thead th[aria-sort="none"] .pl-arrow {
    opacity: .35;
}

.pl-table thead th[aria-sort="none"] .pl-arrow::after {
    content: "↕";
}

.pl-table thead th[aria-sort="ascending"] .pl-arrow::after {
    content: "↑";
}

.pl-table thead th[aria-sort="descending"] .pl-arrow::after {
    content: "↓";
}

.pl-table tbody tr:last-child th,
.pl-table tbody tr:last-child td {
    border-bottom: none;
}

.pl-table .r {
    text-align: right;
}

/* Числа в колонках сравнивают взглядом сверху вниз — разряды обязаны
   стоять друг под другом. */
.pl-price,
.pl-sec {
    font-variant-numeric: tabular-nums;
}

.pl-price {
    font-weight: 700;
    color: var(--ink);
}

/* Вторичные цены (за штуку, за куб) — те же данные, но не главные:
   приглушаем, не пряча. */
.pl-sec {
    color: var(--muted);
}

.pl-size {
    font-weight: 400;
}

.pl-size a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px dashed var(--line);
}

.pl-size a:hover,
.pl-size a:focus {
    color: var(--accent);
    border-bottom-color: var(--cta);
}

.pl-gtag {
    display: inline-block;
    background: var(--wash);
    border-radius: 6px;
    padding: 2px 9px;
    font-size: 13px;
    color: var(--accent);
}

/* Подпись таблицы для скринридеров: видимого дубля заголовка не нужно,
   но озвучить, что именно в таблице, обязательно. Класс .vh в теме уже
   есть — дублируем правило локально на случай, если блок окажется на
   странице без общего style.css. */
.pl .vh,
.pl-section .vh,
.pl-summary .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 700px) {
    /* На узком экране пять колонок не помещаются — включаем горизонтальную
       прокрутку внутри обёртки (страница целиком вбок не едет). Липкая шапка при
       этом отключается: внутри скролл-контейнера она всё равно не работает. */
    .pl-tw {
        overflow-x: auto;
    }

    .pl-table thead th {
        position: static;
    }

    /* Автоширина: на 360 px фиксированные проценты сжимают «Размер» до
       переноса, а по содержимому колонки встают плотно и таблица просто
       прокручивается. */
    .pl-table {
        table-layout: auto;
    }

    .pl-table th,
    .pl-table td {
        padding: 9px 12px;
        font-size: 14px;
    }

    .pl-table thead th {
        padding: 11px 12px;
    }
}