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

   Палитра НЕ своя — те же токены, что у листинга подкатегории
   (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;
}

/* ── сводка по сортам ───────────────────────────────────────────────── */
/* Сводка компактная: это ориентир «от скольки начинается сорт», а не карточки
   товара. Прежние отступы (14/16 px внутри, 12 px между) раздували четыре
   коротких факта на треть экрана и отодвигали кнопку с таблицами. */
/* Селектор усилен блоком по той же причине, что и у `.pl-note` ниже: тема
   задаёт спискам в `.article` свои отступы, и одиночный `.pl-grades` их не
   перебивал — под карточками оставалось 70 px пустоты. */
.pl .pl-grades {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.pl-grade {
    flex: 1 1 170px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 9px 13px;
}

.pl-grade-name {
    font-size: 14px;
    color: var(--muted);
}

.pl-grade-price {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ink);
    /* Цена — одна смысловая единица: без запрета переноса на узком экране
       получалось «от 27 000 ₽/» и «м³» на следующей строке. */
    white-space: nowrap;
    /* Цифры в карточках стоят столбиком друг под другом — моноширинные
       цифры не дают им «плясать» при разной ширине знаков. */
    font-variant-numeric: tabular-nums;
}

.pl-grade-count {
    flex-basis: 100%;
    font-size: 12px;
    color: var(--muted);
}

/* Селектор усилен блоком: тема задаёт абзацам в `.article` свои отступы с
   большей специфичностью, и одиночный `.pl-note` их не перебивал — между
   карточками сортов и этой строкой висело около 100 px пустоты. */
.pl .pl-note {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--muted);
    max-width: 68ch;
}

/* ── подпись рядом с кнопкой первого экрана ─────────────────────────── */
/* Живёт здесь, а не в 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: 26%; }
.pl-table th:nth-child(2) { width: 12%; }
.pl-table th:nth-child(3) { width: 22%; }
.pl-table th:nth-child(4) { width: 20%; }
.pl-table th:nth-child(5) { width: 20%; }

.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 {
    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;
    }

    /* Две колонки, а не одна: четыре карточки в столбик занимали 520 px — весь
       экран телефона уходил на сводку, и до кнопки с таблицами человек
       доскроллить не успевал. */
    .pl-grade {
        flex-basis: calc(50% - 4px);
        padding: 8px 11px;
    }

    .pl-grade-price {
        font-size: 16px;
    }

    .pl-grade-name,
    .pl-grade-count {
        font-size: 12px;
    }

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

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