/*
Theme Name: PostreArt
Theme URI: https://postreart.ru/
Description: Дочерняя тема GeneratePress для авторской кондитерской PostreArt.
Author: —
Template: generatepress
Version: 1.33.0
Text Domain: postreart
*/

/* ─────────────────────────────────────────────
   Как устроен этот файл

   Оформлением сайта управляет GeneratePress: цвета, шрифты, кнопки,
   отступы, ширина контента — всё в его настройщике. Здесь нет ни
   палитры, ни шрифтов, ни стилей кнопок. Раньше были, и они спорили
   с родительской темой: одна и та же кнопка описывалась дважды,
   и результат зависел от того, чей селектор длиннее.

   Здесь только то, чего у GeneratePress нет: наши собственные
   элементы — свотчи начинок, паспарту, фильтр каталога, поля заявки.
   Цвета они берут из глобальных переменных GeneratePress, поэтому
   меняются вместе со всем остальным из его же настройщика.
   ───────────────────────────────────────────── */

/* Светлая схема объявлена явно.

   Браузеры с ночным режимом — Samsung Internet, Chrome с включённым
   принудительным затемнением — сами перекрашивают страницы, которые
   не сообщили, в какой схеме они нарисованы. Наш сайт держится
   на фотографиях еды и на бордовом с бежевым; после инверсии
   от него не остаётся ничего.

   only light вместо light: это не «умею и то и другое, покажите
   светлую», а «другой у меня нет». Именно такая формулировка
   отключает принудительное затемнение.

   Когда-нибудь понадобится тёмная — её надо будет нарисовать,
   а не доверять автоматике. */
:root {
	color-scheme: only light;

	/* Переменные GeneratePress с запасными значениями на случай,
	   если родительская тема сменится. */
	--pa-accent: var(--accent, #8c2f4a);
	--pa-surface: var(--base-2, #f4f3f1);
	--pa-muted: var(--contrast-2, #6e6d6a);

	/* Цвет линий задан сам по себе, а не через палитру.

	   Раньше здесь стояла var(--base-3) — та же переменная, что
	   и у заливки строкой выше. То есть границы рисовались цветом
	   фона и на белом были почти не видны: пропадали рамки меток,
	   полоса перед допродажами, разделители между колонками.
	   Каждый раз это лечилось точечно, подстановкой другого цвета.

	   Полупрозрачный чёрный работает на любом фоне: и на белом,
	   и на светло-сером, и на снимке. */
	--pa-line: rgb(0 0 0 / 14%);

	/* Линия внутри блока.
	
	   Слабее обычной вдвое. Внешняя граница отделяет блок от страницы,
	   внутренняя — строки друг от друга, и связь между строками
	   сильнее. Если обе одинаковы по весу, сводка из пяти строк
	   читается как пять отдельных блоков. */
	--pa-line-soft: rgb(0 0 0 / 7%);

	/* Текст поверх акцента.

	   Белый здесь встречается семь раз: выбранные метки, кнопки,
	   кружок с числом заказа. Если акцент когда-нибудь сменят
	   на светлый, все семь мест перестанут читаться одновременно,
	   и искать их придётся по файлу. Через переменную это одна
	   правка. */
	--pa-on-accent: #fff;

	/* Боковой отступ внутри метки.

	   Вынесен сюда, потому что на него равняется заголовок раздела
	   в блоке разделов: его надпись должна стоять ровно над надписью
	   первой подкатегории, а не над краем её метки. Пока число было
	   вписано в одно правило, выровнять второе можно было только
	   на глаз — и разъехалось бы при первой же правке.

	   В rem, а не в em: у заголовка и у метки размеры шрифта разные,
	   и em дал бы им разный отступ. */
	--pa-chip-pad-x: 1.1rem;

	/* Линия органов управления: поле количества и выключенная кнопка
	   рядом с ним.

	   Отдельная переменная, потому что эти два элемента стоят впритык
	   и обязаны быть обведены одинаково. Раньше поле брало рамку
	   у GeneratePress, кнопка — у нас, и совпадение зависело от того,
	   что выставлено в настройщике. Теперь источник один: поменяете
	   значение здесь — изменятся оба, и разъехаться они не смогут.

	   Взят мягкий тон: рамка вокруг поля ввода не должна спорить
	   с содержимым карточки.

	   Поправка 07.10.2026: само поле количества теперь обведено
	   --pa-field-line (ниже), мягкая линия осталась у выключенной
	   кнопки и у кнопок веса. */
	--pa-control-line: var(--pa-line-soft);

	/* Граница поля ввода — контраст не ниже 3:1 к белому.

	   Мягкая линия (7% чёрного, около #ededed) давала 1,16:1:
	   на ярком экране телефона рамка поля количества пропадала,
	   и цифра «1» висела в воздухе — непонятно, что её можно
	   исправить. Для границы элемента управления нужно 3:1;
	   45% чёрного на белом — #8c8c8c, около 3,4:1. Темнее не берём:
	   рамка поля не должна спорить с кнопкой «Добавить к заказу». */
	--pa-field-line: rgb(0 0 0 / 45%);

	/* Отступы. Единственная шкала, на которой держатся наши блоки. */
	--pa-1: 0.25rem;
	--pa-2: 0.5rem;
	--pa-3: 1rem;
	--pa-4: 1.5rem;
	--pa-5: 2.5rem;
	--pa-6: 4rem;

	--pa-gutter: clamp(1rem, 0.5rem + 2vw, 3rem);

	/* Толщина паспарту и отступы содержимого. У бесплатного
	   GeneratePress этих настроек нет, поэтому они наши. */
	--pa-mount-pad: clamp(10px, 1.5vw, 16px);
	--pa-pad-y: 40px;
	--pa-pad-x: 40px;
	--pa-pad-y-mobile: 24px;
	--pa-pad-x-mobile: 16px;
}

/* ─────────────────────────────────────────────
   1. Общее
   ───────────────────────────────────────────── */

/* Подпись поля или блока. Шрифт наследуется от темы. */
.pa-meta {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--pa-muted);
}

/* Артикул. Разрядка и табличные цифры делают из A029
   инвентарный номер без отдельной моноширинной гарнитуры. */
.pa-sku {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.1em;
	color: var(--pa-muted);
}

.pa-empty {
	color: var(--pa-muted);
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--pa-accent);
	outline-offset: 3px;
}

/* Горизонтальную прокрутку глушим через clip: hidden превращает
   страницу в контейнер прокрутки и ломает докрутку на телефоне. */
html,
body {
	overflow-x: clip;
}

/* Внутренние отступы содержимого.
   Настраиваются в разделе «Оформление PostreArt». */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
	padding: var(--pa-pad-y) var(--pa-pad-x);
}

@media (max-width: 768px) {
	.separate-containers .inside-article,
	.separate-containers .comments-area,
	.separate-containers .page-header,
	.separate-containers .paging-navigation,
	.one-container .site-content {
		padding: var(--pa-pad-y-mobile) var(--pa-pad-x-mobile);
	}
}

/* ─────────────────────────────────────────────
   2. Паспарту
   Сводит вместе снимки на белом, чёрном и сером фоне —
   у кондитерской съёмка велась в разное время и по-разному.
   ───────────────────────────────────────────── */

.pa-mount {
	display: block;
	background: var(--pa-surface);
	padding: var(--pa-mount-pad);
	padding-bottom: calc(var(--pa-mount-pad) * 0.6);
	overflow: hidden;
}

.pa-mount img {
	display: block;
	width: 100%;
	aspect-ratio: var(--pa-ratio, 3 / 4);
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pa-mount .pa-sku {
	display: block;
	margin-top: calc(var(--pa-mount-pad) * 0.7);
	text-align: center;
	line-height: 1;
}

/* ─────────────────────────────────────────────
   3. Каталог
   Число товаров в ряду задаётся в настройщике:
   WooCommerce → Каталог товаров.
   ───────────────────────────────────────────── */

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: var(--pa-3);
	padding: 0;
}

.woocommerce ul.products li.product:hover .pa-mount img {
	transform: scale(1.02);
}

.woocommerce ul.products li.product .price {
	font-variant-numeric: tabular-nums;
}

/* Полоса разделов */
/* На главной линии под полосой нет намеренно.

   Раньше граница стояла на самой обёртке и появлялась в обоих местах.
   Но на странице разделители расставляются содержимым — заголовками
   и блоками, — и полоса, которая рисует черту сама за себя, лишает
   этого выбора: убрать её из редактора было нельзя. Нужен разделитель
   — ставится обычным блоком «Разделитель».

   В каталоге наоборот: там полоса не часть содержимого, а часть
   устройства страницы, и редактора у неё нет. Линия отделяет разделы
   от фильтра под ними, и ставить её некому, кроме нас. */
.pa-cats {
	margin: 0 0 var(--pa-5);
}

.pa-cats--shop {
	margin-bottom: var(--pa-4);
	padding-bottom: var(--pa-3);
	border-bottom: 1px solid var(--pa-line);
}

.pa-cats__list {
	display: flex;
	flex-wrap: wrap;
	/* Промежуток одинаковый по обеим осям: у меток с заливкой
	   широкий горизонтальный зазор не нужен, форма сама отделяет
	   одну от другой. */
	gap: var(--pa-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Разделы каталога — такие же метки, как поводы и начинки.

   Были текстовыми ссылками с подчёркиванием у текущей. В строку
   из пяти-шести коротких названий это сливалось в сплошной текст:
   «Торты Бенто Пирожные Муссовые» без заливки не разбирается
   на отдельные пункты.

   Сама форма метки описана ниже, вместе с .pa-tag: это один и тот
   же элемент под двумя именами, и держать два одинаковых набора
   правил в разных концах файла значит однажды поправить только
   один из них. Здесь остаётся то, что есть только у разделов, —
   число товаров рядом с названием. */
.pa-cats__count {
	font-size: 0.75rem;
	color: var(--pa-muted);
	font-variant-numeric: tabular-nums;
}

/* Разделы группами: заголовок раздела, под ним его подразделы.

   Плоская строка верхнего уровня давала на главной два слова —
   «Торты» и «Пирожные», — хотя печётся заметно больше. Плоский
   список всех разделов давал «Муссовые» рядом с «Тортами», и слово
   повисало без хозяина. Группы показывают оба уровня сразу, и каждое
   название читается вместе с тем, к чему относится.

   Число колонок задано по ступеням, а не подбирается через auto-fit.
   Так было сначала, и с разделителями это перестало работать:
   при автоподборе неизвестно, какая группа начинает строку, а значит
   негде убрать у неё левую черту — она повисала на пустом месте.
   Явные ступени делают положение считаемым: :nth-child знает,
   где начало строки, потому что длина строки известна.

   Ступени взяты те же, что и у остальной раскладки: 781 —
   контрольная точка колонок ядра, 1100 — наша, та же, на которой
   меню сворачивается в бургер. */
.pa-cats__groups {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pa-4) var(--pa-5);
}

/* Разделители — как в блоке «Доверие: цифры».

   Каждая черта живёт в своём диапазоне ширин и в чужой не заходит.
   Горизонтальная — только там, где колонка одна; вертикальная —
   только там, где их несколько.

   Сначала горизонтальная стояла без медиазапроса, а в широком
   диапазоне отменялась. Отменить не получалось: у правила с «+»
   три класса в селекторе, а у отменяющего два, и вес решал спор
   в пользу первого. На десктопе у второй группы оставалась черта
   сверху, вместе с отступом под неё, — получался угол, и вторая
   группа стояла ниже первой. Разведённые диапазоны спорить не могут
   в принципе. */
@media (max-width: 781px) {
	.pa-cats__groups > .pa-cats__group + .pa-cats__group {
		border-top: 1px solid var(--pa-line);
		padding-top: var(--pa-4);
	}
}

@media (min-width: 782px) {
	.pa-cats__groups {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Две колонки: черта разворачивается в вертикальную и достаётся
	   каждой группе, кроме тех, что начинают строку. */
	.pa-cats__groups > .pa-cats__group {
		border-left: 1px solid var(--pa-line);
		padding-left: var(--pa-5);
	}

	.pa-cats__groups > .pa-cats__group:nth-child(2n + 1) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Третьей колонки нет намеренно, и это стоит объяснить.

   Она была: с 1100px группы раскладывались в три. Разделов верхнего
   уровня у кондитерской два, и третья колонка оставалась пустой —
   ряд прижимался к левым двум третям экрана и выглядел обрезанным.
   Появись когда-нибудь четыре раздела, три колонки дали бы «три
   и один» вместо ровных двух на два.

   Две колонки — то же решение, что принято для блоков контента
   с тремя и более колонками (раздел 6h руководства): при коротком
   содержимом ровная пара читается лучше неровной тройки. */

/* Заголовок раздела — ссылка на сам раздел: «Торты» кликабельны
   так же, как «Свадебные» под ними. Размер меньше заголовков
   страницы: это подпись к ряду, а не новая секция.

   Отступ под заголовком заметно больше, чем промежуток между
   чипами (--pa-3 против --pa-2): так глаз видит «заголовок и его
   ряд», а не три равноудалённые строки. Одно число на все группы —
   менять его здесь. */
.pa-cats__group-title {
	margin: 0 0 var(--pa-3);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Заголовок по левому краю — но по краю надписи, а не колонки.

   Сначала и заголовок, и метки центровались: ряд из разных по длине
   меток давал рваные края с обеих сторон, колонка выглядела
   осыпавшейся. Потом по центру остался один заголовок — он повисал
   над рядом, ни на что не опираясь.

   Теперь оба слева, но заголовок сдвинут на ту же величину, на какую
   надпись внутри метки отстоит от её края. Иначе «Торты» начинались
   бы левее, чем «Свадебные» под ними: метка круглая, и её левый край
   на глаз не является началом строки. Величина одна на оба элемента
   и живёт в --pa-chip-pad-x. */
.pa-cats--grouped .pa-cats__group-title {
	text-align: left;
	padding-left: var(--pa-chip-pad-x);
}

.pa-cats__group-title a {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--pa-line);
	padding-bottom: 0.1em;
}

.pa-cats__group-title a:hover {
	color: var(--pa-accent);
	border-bottom-color: currentColor;
}

/* Разделы без подразделов собраны в последний ряд без заголовка:
   подписывать единственную ссылку её же названием незачем. Ряд
   растянут на всю ширину — иначе одинокие чипы прижимались бы
   к краю колонки и выглядели обрывком соседней группы. */
.pa-cats__group--plain {
	grid-column: 1 / -1;
}

/* Ряд без заголовка занимает всю ширину, поэтому вертикальная черта
   ему не нужна ни на какой ступени: слева от него ничего нет.
   Отделяется он сверху, как отделялись бы строки. Правило стоит
   после медиазапросов намеренно — вес у селекторов одинаковый,
   и решает порядок. */
.pa-cats__groups > .pa-cats__group.pa-cats__group--plain {
	border-left: 0;
	padding-left: 0;
	border-top: 1px solid var(--pa-line);
	padding-top: var(--pa-4);
}

/* Если ряд без заголовка оказался единственной группой — черта
   над ним висела бы ни над чем. */
.pa-cats__groups > .pa-cats__group--plain:first-child {
	border-top: 0;
	padding-top: 0;
}

/* Строка над сеткой: сколько работ и в каком порядке. */
.pa-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pa-2) var(--pa-3);
	margin-bottom: var(--pa-4);
}

.pa-toolbar .woocommerce-result-count,
.pa-toolbar .woocommerce-ordering {
	margin: 0;
	float: none;
}

.pa-toolbar .woocommerce-result-count {
	font-size: 0.875rem;
	color: var(--pa-muted);
}

.pa-toolbar .woocommerce-ordering select {
	max-width: 100%;
}

/* Кнопка «Подобрать». На широком экране фильтр виден целиком,
   прятать его незачем — кнопки там нет. */
.pa-filters__toggle {
	display: none;
}

/* Фильтр по начинкам */
.pa-filter {
	margin: 0 0 var(--pa-5);
	padding-bottom: var(--pa-4);
	border-bottom: 1px solid var(--pa-line);
}

.pa-filter__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pa-3);
	margin-bottom: var(--pa-3);
}

.pa-filter__reset {
	font-size: 0.8125rem;
	color: var(--pa-accent);
}

.pa-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.35em 0.85em 0.35em 0.35em;
	border: 1px solid var(--pa-line);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.3;
	text-decoration: none;
	color: var(--pa-muted);

	/* Переноса раньше не было, и длинное значение вроде «Пьяная вишня
	   со смородиной» вылезало за край экрана. Заметить это было нельзя:
	   горизонтальная прокрутка у нас заглушена, и хвост просто обрезался.
	   max-width держит чип внутри колонки, когда он остаётся в одну строку. */
	max-width: 100%;
}

.pa-chip__dot {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--pa-swatch, none) center / cover no-repeat var(--pa-surface);
	box-shadow: inset 0 0 0 1px var(--pa-line);
	font-size: 0.75rem;
	text-transform: uppercase;

	/* Свой цвет, а не наследованный. У выбранного чипа текст белый,
	   а фон кружка остаётся светлым — буква или цифра внутри пропадала
	   совсем. Видно это было только на значениях без фотографии:
	   с фотографией внутри кружка ничего не пишется. */
	color: var(--pa-muted);
}

/* Чип без кружка: слева был узкий отступ под кружок, без него
   текст прилипал к рамке. Делаем отступы симметричными. */
.pa-chip--plain {
	padding-left: 0.85em;
}

.pa-chip:hover {
	color: inherit;
	border-color: var(--pa-muted);
}

/* Метка «выбора нет»: это не значение, а их отсутствие, поэтому
   кружок пустой, а подпись приглушена. */
.pa-chip--none .pa-chip__dot {
	background: none;
	color: var(--pa-muted);
}

.pa-chip--none:not(.is-active) {
	color: var(--pa-muted);
}

/* Когда «выбора нет» выбрано, метка заливается бордовым, а кружок
   внутри оставался приглушённо-серым по правилу выше — тире внутри
   него на бордовом переставало читаться совсем. Наследуем цвет
   у самой метки, как это уже сделано для числа у раздела. */
.pa-chip--none.is-active .pa-chip__dot {
	color: inherit;
	box-shadow: inset 0 0 0 1px currentColor;
	opacity: 0.75;
}

.pa-chip.is-active {
	color: var(--pa-on-accent);
	background: var(--pa-accent);
	border-color: var(--pa-accent);
}

/* ─────────────────────────────────────────────
   3a. Кнопки WooCommerce
   ───────────────────────────────────────────── */

/* WooCommerce везёт свои стили кнопок с длинными селекторами
   вроде «.woocommerce a.button», и они перебивают настройки
   GeneratePress: кнопка «В корзину» получалась серой, а кнопка
   на главной — цветной.

   Источник цвета всё равно один — глобальный акцент из настроек
   GeneratePress. Здесь только доводим специфичность до нужной. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .checkout-button {
	background-color: var(--pa-accent);
	color: var(--pa-on-accent);
	/* Рамка прозрачная, а не нулевая.

	   У выключенной кнопки рамка есть — под поле количества рядом.
	   Если у включённой поставить border: 0, кнопка в момент выбора
	   размера теряет 2px и заметно прыгает. Прозрачная рамка держит
	   размер постоянным, а видно её всё равно не будет. */
	border: 1px solid transparent;
	font: inherit;
	font-weight: 500;
	line-height: 1.4;
	padding: 0.75em 1.75em;
	transition: background-color 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover {
	background-color: color-mix(in srgb, var(--pa-accent) 85%, #000);
	color: var(--pa-on-accent);
}

/* Выключенная кнопка.

   Была бордовой под прозрачностью 45%, и на белом фоне это давало
   розово-сиреневый — цвет, которого в палитре нет, и который читается
   как ошибка вёрстки, а не как «пока нельзя».

   Теперь она просто серая: видно, что кнопка на месте, но ещё
   не работает. Текст остаётся контрастным — он объясняет, что будет
   после нажатия, и выцветать ему незачем.

   Такой вид карточка принимает, пока не выбран размер: WooCommerce
   держит кнопку выключенной до выбора вариации. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt.disabled,
/* Наведение на выключенную кнопку не меняет ничего.

   Правило наведения перекрашивало её, и на полпути между бордовым
   и серым получался фиолетовый — цвет, которого в палитре нет.
   Но дело не в оттенке: кнопка, которая отзывается на курсор,
   обещает, что по ней можно нажать. Пока размер не выбран — нельзя,
   и выглядеть она должна ровно так же, как до наведения. */
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button[disabled]:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt.disabled:hover {
	background-color: var(--pa-surface);
	/* Рамка та же, что была у поля количества: один и тот же токен.

	   Сначала здесь стояла --pa-line — она выходила темнее соседнего
	   поля, и выключенная кнопка притягивала взгляд сильнее, чем
	   рабочий элемент. Потом рамку убрали совсем — и кнопка стала
	   отличаться от поля уже отсутствием линии. Разница в обоих
	   случаях бралась из того, что цвета назначались порознь.
	   Теперь он общий, и вопрос закрыт.

	   С 07.10.2026 поле обведено темнее (--pa-field-line, ради
	   контраста), а здесь мягкая линия осталась намеренно:
	   выключенная кнопка и должна быть тише рабочего поля рядом. */
	border: 1px solid var(--pa-control-line);
	color: var(--pa-muted);
	opacity: 1;
	cursor: not-allowed;
}

/* Форма кнопок задана в одном месте и явно.

   Кнопки на сайте приходят из трёх источников: WooCommerce, блоки
   WordPress и наши собственные. Скругление каждому из них назначает
   кто-то свой, и на странице они оказывались разной формы —
   прямоугольная кнопка каталога рядом со скруглённой кнопкой
   в заготовке. Проще задать форму всем сразу, чем догадываться,
   кто и где её поставил.

   Метки фильтра под это правило не попадают намеренно: они не кнопки,
   а значения, и форма таблетки отличает их от действий. */
.wp-block-button__link,
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	border-radius: 0;
}

/* Стиль «Контур» — вторичная кнопка: рамка и текст цветом акцента,
   при наведении заливается, как основная.

   История. Раньше стиль был отключён: ядро рисовало рамку цветом
   текста, а текст у нас белый, и выходила еле видная белая обводка
   поверх заливки. Мы залили такие кнопки акцентом и оставили без
   состояния наведения — в итоге рядом стояли две почти одинаковые
   кнопки, из которых одна реагирует на курсор, а другая нет
   («О нас», 24.09.2026). Теперь у кнопки оба состояния нарисованы,
   и она честно вторичная: «Выбрать торт» главное действие,
   «Как заказать» — дополнительное.

   Ядро задаёт стиль контура через :where(), то есть с нулевым весом,
   поэтому наше правило его перебивает без !important. Цвета — из
   переменной акцента, которая берётся у GeneratePress. */
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-buttons > .wp-block-button > .wp-block-button__link.is-style-outline {
	border: 1px solid var(--pa-accent);
	background-color: transparent;
	color: var(--pa-accent);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.wp-block-buttons > .wp-block-button > .wp-block-button__link.is-style-outline:hover,
.wp-block-buttons > .wp-block-button > .wp-block-button__link.is-style-outline:focus-visible {
	background-color: var(--pa-accent);
	color: var(--pa-on-accent);
}

/* Число товаров рядом с «Заказом». Кружком, а не скобками:
   в строке меню скобки читаются как часть названия пункта. */
.pa-cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	margin-left: 0.4em;
	padding: 0 0.35em;
	border-radius: 999px;
	background: var(--pa-accent);
	color: var(--pa-on-accent);
	font-size: 0.75rem;
	line-height: 1;
	vertical-align: middle;
}

/* ─────────────────────────────────────────────
   4. Карточка товара
   ───────────────────────────────────────────── */

.single-product div.product .pa-sku {
	display: block;
	margin-bottom: var(--pa-2);
}

/* Разделы внутри правой колонки отбиваются одинаково: полтора
   ритма до линии и один после. Было два с половиной и полтора —
   на общих условиях, набранных мелко и приглушённо, это давало
   четыре ритма пустоты перед тремя строчками текста. */
.pa-terms {
	margin-top: var(--pa-4);
	padding-top: var(--pa-3);
	border-top: 1px solid var(--pa-line);
	font-size: 0.875rem;
	color: var(--pa-muted);
	max-width: 62ch;
}

.pa-terms p:last-child {
	margin-bottom: 0;
}

/* Карточка обязана охватывать свои колонки.

   Галерея и правая колонка у WooCommerce плавающие, высоту родителю
   они не задают. Без этого белая плашка статьи заканчивалась сразу
   после хлебных крошек, а под ней просвечивал фон страницы — карточка
   выглядела серой.

   Держалось это на случайности: у товаров с допродажами поток
   размыкал их собственный clear, и там всё было белым. Стоило
   открыть товар без допродаж — и фон уезжал. Поэтому размыкаем
   поток здесь, а не надеемся на то, что под карточкой что-то будет. */
.woocommerce div.product::after {
	content: "";
	display: table;
	clear: both;
}

/* Галерея. Паспарту задано отступом на самой картинке: контейнеры
   слайдера трогать нельзя, он считает по ним ширину кадра. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
	box-sizing: border-box;
	padding: var(--pa-mount-pad);
	background: var(--pa-surface);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pa-2);
	margin: var(--pa-2) 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs::after {
	content: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	padding: calc(var(--pa-mount-pad) * 0.4);
	background: var(--pa-surface);
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
	opacity: 1;
}

@media (min-width: 900px) {
	.single-product div.product .woocommerce-product-gallery {
		position: sticky;
		top: var(--pa-4);
	}
}

/* ─────────────────────────────────────────────
   4a. Сводка по товару
   Короткая таблица «вес, гости, сроки» вверху карточки.
   ───────────────────────────────────────────── */

.pa-summary {
	margin: var(--pa-4) 0;
	padding: var(--pa-3) 0;
	border-top: 1px solid var(--pa-line);
	border-bottom: 1px solid var(--pa-line);
	font-size: 0.9375rem;
}

/* Подпись фиксированной колонкой, значение — остальным местом.
   Так значения выстраиваются по одной вертикали и таблица читается
   взглядом сверху вниз, а не построчно. */
.pa-summary__row {
	display: grid;
	grid-template-columns: minmax(0, 8rem) 1fr;
	gap: var(--pa-2) var(--pa-3);
	padding: var(--pa-2) 0;

	/* Слабая ступень: рамка самой сводки остаётся главной,
	   а строки внутри разделены, но не спорят с ней. */
	border-bottom: 1px solid var(--pa-line-soft);
}

/* У последней строки линия совпала бы с нижней границей сводки. */
.pa-summary__row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pa-summary__row:first-child {
	padding-top: 0;
}

.pa-summary dt {
	color: var(--pa-muted);
	font-weight: 400;
}

.pa-summary dd {
	margin: 0;
}

/* ─────────────────────────────────────────────
   4b. Ход заказа
   ───────────────────────────────────────────── */

.pa-steps {
	margin: var(--pa-5) 0;
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-line);
}

.pa-steps__title {
	font-size: 1.125rem;
	margin-bottom: var(--pa-3);
}

.pa-steps__list {
	margin: 0;
	padding-left: 1.2em;
	max-width: 60ch;
}

.pa-steps__list li {
	margin-bottom: var(--pa-2);
}

/* Гарантии под кнопкой заказа. Маркер рисуем сами: штатная точка
   в этом месте читается как перечисление товара, а не как обещание. */
.pa-trust {
	margin: var(--pa-4) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--pa-muted);
}

.pa-trust li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: var(--pa-1);
}

.pa-trust li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--pa-accent);
}

.pa-empty-reset {
	margin-top: var(--pa-3);
}

/* ─────────────────────────────────────────────
   5. Начинки на карточке
   ───────────────────────────────────────────── */

.pa-fillings {
	margin: var(--pa-4) 0;
	padding-top: var(--pa-3);
	border-top: 1px solid var(--pa-line);
}

.pa-fillings__label {
	margin-bottom: var(--pa-3);
}

/* Перенос, а не прокрутка: контейнер с прокруткой обрезает кольцо
   вокруг выбранного свотча. */
.pa-fillings__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pa-swatch {
	flex: 0 0 auto;
	width: 54px;
	height: 72px;
	padding: 0;
	border: 1px solid var(--pa-line);
	border-radius: 0;
	background: var(--pa-surface) center / cover no-repeat;
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pa-swatch:hover {
	transform: translateY(-2px);
}

/* Подложка плитки при наведении и в фокусе — своя, а не тёмная
   из «button:hover, button:focus» GeneratePress. Под снимком её
   не видно, но пока снимок грузится (или не загрузился), плитка
   под курсором становилась тёмно-серой (07.10.2026). */
.pa-swatch:hover,
.pa-swatch:focus {
	background-color: var(--pa-surface);
}

.pa-swatch[aria-pressed="true"] {
	box-shadow: 0 0 0 2px var(--base, #fff), 0 0 0 4px var(--pa-accent);
}

/* Значение без фотографии — словом, как кнопки размеров.
   Высота своя, по тексту: тянуть слово до высоты фото-плитки
   значило бы снова нарисовать пустой прямоугольник. */
.pa-swatch.pa-swatch--text {
	width: auto;
	height: auto;
	min-height: 2.5rem;
	padding: 0.5em 1em;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	color: inherit;
	background: transparent;
}

.pa-swatch.pa-swatch--text:hover {
	transform: none;
	border-color: var(--pa-muted);
}

.pa-swatch.pa-swatch--text[aria-pressed="true"] {
	box-shadow: none;
	color: var(--pa-on-accent);
	background: var(--pa-accent);
	border-color: var(--pa-accent);
}

.pa-swatch__extra {
	opacity: 0.75;
	white-space: nowrap;
}

/* Плитки с фото и слова в одном ряду — по центру по высоте. */
.pa-fillings__list {
	align-items: center;
}

/* Перенос строки перед словами (shop.php): фото — рядом, метки —
   своей строкой под ними. Сам элемент пустой и нулевой высоты. */
.pa-fillings__list .pa-fillings__break {
	flex-basis: 100%;
	height: 0;
	margin: 0;
	padding: 0;
}

.pa-fillings__composition--solo {
	margin-top: var(--pa-3);
}

.pa-fillings__preview {
	display: grid;
	grid-template-columns: minmax(0, 200px) 1fr;
	gap: var(--pa-4);
	align-items: start;
	margin-top: var(--pa-4);
}

/* Селектор нарочно длиннее нужного: ширину картинок внутри карточки
   товара задаёт и WooCommerce, и родительская тема, и короткого
   правила не хватало — на телефоне разрез разъезжался во весь экран. */
.woocommerce div.product form.cart .pa-fillings__cut,
.pa-fillings__cut {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	border: 1px solid var(--pa-line);
	background: var(--pa-surface);
	transition: opacity 0.2s ease;
}

/* У картинки выше задан display: block, и он перебивал атрибут
   hidden: у значения без снимка на месте фото оставалась пустая
   рамка — та самая черта под плитками. */
.woocommerce div.product form.cart .pa-fillings__cut[hidden],
.pa-fillings__cut[hidden] {
	display: none;
}

/* Снимка у выбранного значения нет — описание на всю ширину. */
.pa-fillings__preview:has(.pa-fillings__cut[hidden]) {
	grid-template-columns: 1fr;
}

.pa-fillings__cut.is-fading {
	opacity: 0;
}

.pa-fillings__name {
	margin: 0 0 var(--pa-2);
	line-height: 1.2;
}

.pa-fillings__composition {
	font-size: 0.9375rem;
	color: var(--pa-muted);
	margin: 0;
	max-width: 40ch;
}

/* ─────────────────────────────────────────────
   6. Размер и пожелания
   ───────────────────────────────────────────── */

/* Select нужен вариационной механике WooCommerce — прячем,
   но не удаляем: кнопки только переключают его. */
.pa-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	display: block;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart .variations label {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--pa-muted);
	margin-bottom: var(--pa-2);
	display: block;
}

.pa-segments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin-bottom: var(--pa-3);
}

.pa-segment {
	padding: 0.5em 1em;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	color: inherit;
	background: transparent;
	border: 1px solid var(--pa-line);
	border-radius: 0;
	cursor: pointer;
}

/* Наведение и фокус GeneratePress не отдаём.

   Он печатает в странице «button:hover, button:focus» с тёмной
   заливкой, и это правило сильнее нашего одноклассового
   (07.10.2026). Наведённый размер выглядел выбранным, а после
   повторного касания — выбор снят, кнопка в фокусе — оставался
   тёмным, хотя итог уже просил «Выберите размер». На телефоне
   фокус получает каждая нажатая кнопка, так что видел это любой.
   Наведение у нас — только рамка, фокус с клавиатуры — обводка
   из общего правила :focus-visible. */
.pa-segment:hover,
.pa-segment:focus {
	color: inherit;
	background: transparent;
}

.pa-segment:hover:not(:disabled):not(.is-active) {
	border-color: var(--pa-muted);
}

/* Выбранный стоит ниже правил наведения и фокуса и потому
   сильнее их: под курсором и в фокусе он остаётся выбранным. */
.pa-segment.is-active {
	color: var(--pa-on-accent);
	background: var(--pa-accent);
	border-color: var(--pa-accent);
}

.pa-segment.is-unavailable {
	color: var(--pa-muted);
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

.pa-wishes {
	margin: var(--pa-4) 0;
}

.pa-wishes label {
	display: block;
	margin-bottom: var(--pa-2);
}

.pa-wishes textarea {
	width: 100%;
	resize: vertical;
}

.pa-wishes--cart {
	margin: var(--pa-2) 0 0;
	max-width: 22rem;
}

/* Количество и кнопка — одной строкой. */
.woocommerce div.product form.cart,
.woocommerce div.product .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--pa-2);
}

.woocommerce div.product form.cart .pa-fillings,
.woocommerce div.product form.cart .pa-wishes,
.woocommerce div.product form.cart .pa-total,
.woocommerce div.product form.cart .pa-weigh,
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation,
.woocommerce div.product form.cart .reset_variations {
	flex: 1 0 100%;
}

.woocommerce div.product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0;
}

/* Количество не спрашиваем (торт на вес): WooCommerce всё равно
   выводит обёртку со скрытым полем. Пустая, она занимала место
   в строке, и кнопка сдвигалась вправо на один промежуток.
   Скрытое поле при этом отправляется: display: none его не отключает. */
.woocommerce div.product form.cart .quantity:has(input[type="hidden"]) {
	display: none;
}

/* Рамку полю количества рисуем сами. Раньше её рисовал
   GeneratePress из настройки цвета границ форм, и совпадение
   с соседней кнопкой было делом случая.

   Цвет — --pa-field-line, а не мягкая --pa-control-line, как было
   до 07.10.2026: при 1,16:1 граница поля на белом почти не видна.

   Плата за это: если вы поменяете цвет границ полей в настройщике
   GeneratePress, поле количества останется прежним — оно теперь
   слушает --pa-field-line, а не настройщик. Остальные поля форм
   (имя, телефон, пожелания) мы не трогаем: они подчиняются
   настройщику, как и раньше. */
.woocommerce div.product form.cart .quantity .qty {
	border: 1px solid var(--pa-field-line);
	/* Высота поля тянется за строкой.

	   Обёртку .quantity строка растягивает сама (align-items: stretch
	   выше), а вот поле внутри неё — нет: у input своя высота
	   из шрифта и отступов. Обёртка получалась вровень с кнопкой,
	   а рамка внутри неё — короче, и два соседних элемента стояли
	   на разной высоте. */
	height: 100%;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	width: auto;
	margin: 0;
}

/* ─────────────────────────────────────────────
   7. Оформление заявки
   ───────────────────────────────────────────── */

.pa-event {
	margin: var(--pa-5) 0;
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-line);
}

/* Способ получения — списком: в строку пары «кнопка + подпись»
   разрывались при переносе. */
.woocommerce form .form-row.pa-fulfilment .woocommerce-input-wrapper {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.5em;
	row-gap: var(--pa-2);
	justify-content: start;
	margin-top: var(--pa-2);
}

.woocommerce form .form-row.pa-fulfilment input[type="radio"] {
	width: auto;
	margin: 0;
}

.woocommerce form .form-row.pa-fulfilment label.radio {
	margin: 0;
	cursor: pointer;
}

/* Звёздочек здесь нет: один из вариантов выбран заранее. */
.woocommerce form .form-row.pa-fulfilment .required {
	display: none;
}

.woocommerce form .form-row.pa-address {
	margin-top: var(--pa-3);
}

/* Адрес при самовывозе спрятан с первой отрисовки, а не после запуска
   скрипта: раньше строка мелькала и форма прыгала вверх (07.10.2026).
   Переключили на доставку — правило перестаёт совпадать, дальше
   строкой управляет checkout.js. С тарифами переключателя нет,
   и правило не срабатывает вовсе. */
.pa-event:has(input[name="pa_fulfilment"][value="pickup"]:checked) .form-row.pa-address {
	display: none;
}

/* Подсказки под полями. Штатная плашка WooCommerce — синий
   прямоугольник с белым текстом, явно из другой эпохи. */
.woocommerce form .form-row .woocommerce-input-wrapper .description,
.woocommerce form .form-row .description {
	position: static;
	display: block;
	padding: 0;
	margin: var(--pa-2) 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pa-muted);
	background: transparent;
	border: 0;
	box-shadow: none;
}

.woocommerce form .form-row .description::before,
.woocommerce form .form-row .description::after {
	content: none;
}

.pa-order-summary h3 {
	font-size: 1rem;
}

/* ─────────────────────────────────────────────
   8. Шапка
   Раскладка, которой нет у GeneratePress: название, логотип, меню
   с равными промежутками. Цвета и шрифты — его.
   ───────────────────────────────────────────── */

/* Без display:contents логотип и название остаются одним элементом,
   и распределить зоны невозможно. */
.site-header .site-branding-container {
	display: contents;
}

/* Название сайта скрыто на всех ширинах.

   Те же слова набраны в самом логотипе, то есть в шапке они стояли
   дважды. Пока пунктов меню было четыре, это сходило с рук.
   С шестью места на три зоны не хватает даже на широком экране:
   меню сжималось до трети строки и рассыпалось в сетку.

   Для поиска и озвучивания название не потеряно — оно в alt
   у логотипа. */
.site-header .site-branding {
	display: none;
}

/* Отступ снимаем на всех ширинах. Он приходит от родительской темы
   и на телефоне не давал логотипу встать по центру: сам он стоял
   посередине, а отступ справа сдвигал его влево. */
.site-header .site-logo {
	margin: 0;
}

.site-header .site-logo img,
.site-header .header-image {
	display: block;
	width: clamp(170px, 20vw, 300px);
	height: auto;
	max-width: 100%;
}

/* ── Средний экран: от 769 до 1099 ──

   Здесь название и логотип стоят в строку, а меню свёрнуто в кнопку
   справа. Пунктов сейчас четыре, и они бы поместились, но их станет
   восемь — и тогда строка снова начнёт обрезаться. Кнопка от числа
   пунктов не зависит.

   Порог 1100 задан в двух местах: здесь и константой PA_MENU_BREAKPOINT
   в functions.php, откуда он уходит в GeneratePress. Менять надо оба. */
@media (min-width: 769px) and (max-width: 1099px) {
	.site-header .inside-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pa-3);

		/* Точка отсчёта для раскрытого списка. */
		position: relative;
	}

	.site-header .site-logo {
		order: 2;
		flex: 0 0 auto;
	}

	.site-header .main-navigation {
		order: 3;
		flex: 0 0 auto;
		width: auto;
		float: none;
		margin: 0;
		background: transparent;
	}

	.site-header .main-navigation .inside-navigation {
		padding: 0;
		width: auto;
	}

	/* Раскрытый список кладём под шапку во всю ширину. Без этого он
	   получил бы ширину самой кнопки — столбец в три буквы. */
	.site-header .main-navigation.toggled .main-nav {
		position: absolute;
		z-index: 10;
		top: 100%;
		right: 0;
		left: 0;
		background: var(--pa-surface);
	}
}

/* ── Широкий экран: от 1100 ──
   Три зоны с равными промежутками. Ниже за показ и скрытие списка
   отвечает GeneratePress. */

@media (min-width: 1100px) {
	.site-header .inside-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pa-5);
	}

	.site-header .site-logo {
		order: 2;
		flex: 0 0 auto;
		margin: 0;
	}

	/* Сжиматься меню разрешено намеренно: при восьми пунктах оно
	   не влезает в строку, и выбор стоит между переносом и обрезкой.
	   min-width: 0 нужен, иначе флекс-элемент отказывается становиться
	   уже своего содержимого и перенос не срабатывает. */
	.site-header .main-navigation {
		order: 3;
		flex: 0 1 auto;
		min-width: 0;
		width: auto;
		float: none;
		background: transparent;
	}

	/* GeneratePress прижимает меню вправо через margin-left: auto.
	   Оно съедает весь остаток, и промежутки перестают быть равными. */
	.site-header .main-navigation#site-navigation {
		margin-left: 0;
		margin-right: 0;
	}

	.site-header .main-navigation .inside-navigation {
		display: flex;
		justify-content: flex-end;
		flex: 0 1 auto;
		min-width: 0;
		padding: 0;
		width: auto;
	}

	/* Здесь меню видно целиком, кнопка не нужна.

	   Восклицательные знаки оставлены намеренно. Порог мобильного меню
	   мы задаём GeneratePress сами, но если константа и этот блок
	   когда-нибудь разойдутся, без них получится полоса ширин, где
	   список уже спрятан им, а кнопка ещё спрятана нами — то есть меню
	   нет вообще. С ними в худшем случае видно меню, а не пустоту. */
	.site-header .mobile-menu-control-wrapper,
	.site-header .menu-toggle {
		display: none !important;
	}

	.site-header .main-navigation .main-nav > ul {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-end;

		/* Расстояние между пунктами задаём промежутком, а не отступами
		   внутри ссылок.

		   У GeneratePress на каждую ссылку по двадцать пикселей с каждой
		   стороны. При семи пунктах это лишних двести восемьдесят —
		   строка перестала помещаться, и «Заказ» уехал на вторую.

		   Промежуток ставится только между пунктами, по краям его нет,
		   поэтому места хватает, а расстояние на глаз то же. */
		gap: 0 var(--pa-4);
	}

	/* Небольшой отступ всё же оставлен: при нуле пункты почти
	   слипались с промежутком, а попадать по ссылке надо не только
	   по буквам. Значение подобрано на глаз и живёт здесь, чтобы
	   не потеряться при следующем обновлении темы. */
	.site-header .main-navigation .main-nav > ul > li > a {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
}

/* ─────────────────────────────────────────────
   9. Блоки темы
   ───────────────────────────────────────────── */

.pa-grid {
	display: grid;
	grid-template-columns: repeat(
		var(--pa-cols, auto-fill),
		minmax(min(260px, 100%), 1fr)
	);
	gap: var(--pa-5) var(--pa-gutter);
	margin: 0 0 var(--pa-5);
	padding: 0;
	list-style: none;
}

/* Колонки заданы в блоке руками — делим ширину поровну.

   Обычная сетка держит карточку не уже 260px и сама решает, сколько
   их встанет в ряд. При явных «4 колонках» это правило ломалось:
   четыре карточки по 260px не помещались в колонку контента,
   и сетка вылезала за край. Здесь минимума нет. На телефоне обе
   сетки всё равно переходят в две колонки (правило ниже, в разделе
   про узкие экраны, стоит позже и поэтому главнее). */
.pa-grid--cols {
	grid-template-columns: repeat(var(--pa-cols), minmax(0, 1fr));
}

/* Поиск над каталогом: поле и кнопка в одну строку.
   Ширина ограничена — растянутое на весь экран поле выглядит
   главным элементом страницы, а главное здесь — торты. */
.pa-search {
	display: flex;
	gap: var(--pa-2);
	max-width: 32rem;
	margin: 0 0 var(--pa-4);
}

.pa-search__field {
	flex: 1 1 auto;
	min-width: 0;
}

/* ─────────────────────────────────────────────
   Витрина каталога (inc/showcase.php)
   ───────────────────────────────────────────── */

.pa-showcase h2 a,
.pa-shelf__title a {
	color: inherit;
	text-decoration: none;
}

.pa-showcase__occasions {
	margin: 0 0 var(--pa-6);
}

.pa-nearby {
	margin: var(--pa-5) 0 0;
}

.pa-quiz__found {
	margin: 0 0 var(--pa-3);
	color: var(--pa-muted);
}

.pa-showcase__all {
	margin: var(--pa-6) 0 0;
	text-align: center;
}

/* Вес под ценой в каталоге: «800 г». Тише цены — это справка,
   а не ещё одна цена. */
.pa-card__weight,
.woocommerce ul.products li.product .pa-card__weight {
	display: block;
	margin-top: var(--pa-1);
	font-size: 0.875rem;
	color: var(--pa-muted);
	font-variant-numeric: tabular-nums;
}

/* Доплата рядом с названием выбранного значения: «корона +600 ₽». */
.pa-fillings__extra {
	color: var(--pa-muted);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Выбор веса у торта на вес: − 2,5 кг +.
   Кнопки контурные, а не залитые: залитая кнопка на карточке одна —
   «Добавить к заказу», и две тёмные плашки рядом спорили бы с ней. */
.pa-weigh__label {
	margin-bottom: var(--pa-2);
}

.pa-weigh__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pa-2) var(--pa-3);
}

.pa-weigh .pa-weigh__btn,
.pa-weigh .pa-weigh__btn:hover,
.pa-weigh .pa-weigh__btn:focus {
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--pa-control-line);
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
}

.pa-weigh .pa-weigh__btn:hover:not(:disabled) {
	border-color: currentColor;
}

.pa-weigh .pa-weigh__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.pa-weigh__value {
	min-width: 4.5em;
	text-align: center;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.pa-weigh__guests {
	color: var(--pa-muted);
	font-size: 0.9375rem;
}

/* «Итого — 4 200 ₽» над кнопкой, у каждого товара (surcharge.php). */
.pa-total {
	margin: 0;
	font-size: 1.0625rem;
	font-variant-numeric: tabular-nums;
}

.pa-total strong {
	font-size: 1.25rem;
}

/* Пока размер не выбран — подсказка, а не сумма. */
.pa-total.is-pending,
.pa-total__note {
	color: var(--pa-muted);
	font-size: 0.9375rem;
}

/* Цену выбранного размера WooCommerce печатает сам, между размерами
   и пожеланиями. Итог теперь один — строкой над кнопкой; вторая цена
   в другом месте карточки спорила бы с ним. Наличие и описание
   вариации (если они есть) остаются. */
.woocommerce div.product .single_variation .woocommerce-variation-price {
	display: none;
}

.pa-total[hidden] {
	display: none;
}

/* Описание под ценой: обычный текст, последний абзац без отступа
   снизу — ниже сразу сводка со своей линией. */
.pa-description {
	margin: var(--pa-3) 0 0;
}

.pa-description > :last-child {
	margin-bottom: 0;
}

/* Состав: свёрнутая строка под сводкой. Без рамки и фона —
   маркер раскрытия сам показывает, что строка нажимается. */
.pa-composition {
	margin: calc(var(--pa-4) * -0.5) 0 var(--pa-4);
	font-size: 0.9375rem;
}

.pa-composition summary {
	cursor: pointer;
	color: var(--pa-muted);
}

.pa-composition p {
	margin: var(--pa-2) 0 0;
	max-width: 60ch;
}

/* «550 ₽ за штуку»: подпись тише самой цены. */
.pa-price-unit {
	font-size: 0.85em;
	color: var(--pa-muted);
	white-space: nowrap;
}

.pa-showcase__cat {
	margin: var(--pa-6) 0 0;
}

/* Ряд: название подраздела, под ним работы и плитка «смотреть все».
   Отступ между рядами меньше, чем между разделами: «Бенто»
   и «Свадебные» — соседи внутри «Тортов». */
.pa-shelf {
	margin: var(--pa-5) 0 0;
}

.pa-shelf__title {
	margin: 0 0 var(--pa-3);
}

/* Плитка «смотреть все» — того же размера, что снимок в карточке,
   на той же подложке. Число крупно: его видно раньше, чем прочитаешь
   подпись. */
.pa-more-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pa-1);
	aspect-ratio: 3 / 4;
	padding: var(--pa-3);
	background: var(--pa-surface);
	color: var(--pa-accent);
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pa-more-tile:hover,
.pa-more-tile:focus-visible {
	background: var(--pa-accent);
	color: var(--pa-on-accent);
}

.pa-more-tile__num {
	font-size: 2.5rem;
	line-height: 1;
}

.pa-more-tile__label {
	font-size: 0.9375rem;
}

.pa-more-tile__go {
	margin-top: var(--pa-2);
	font-size: 0.875rem;
}

/* Сколько тортов стоит рядом с плиткой: ряд всегда полный.
   Широкий экран — 4 колонки: три торта и плитка. */
@media (min-width: 901px) {
	.pa-shelf__list--more > li:nth-child(4) {
		display: none;
	}
}

.pa-shelf__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pa-4) var(--pa-gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Планшет: четыре карточки в ряд уже мелкие — три, четвёртую прячем.
   Она всё равно за ссылкой «Все». */
@media (min-width: 681px) and (max-width: 900px) {
	.pa-shelf__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pa-shelf__list > li:nth-child(4),
	.pa-shelf__list--more > li:nth-child(3) {
		display: none;
	}
}

/* Телефон: ряд — лента, листается пальцем вбок.

   Столбиком витрина из шести рядов по четыре работы превратилась бы
   в двадцать четыре экрана подряд — ровно та длинная простыня, от
   которой витрина и должна спасать. Лента заходит за правый край
   экрана: видно, что дальше есть ещё, и хочется листнуть. То же
   для плиток поводов с включённой «лентой на телефоне».

   У ленты поводов двойной класс не для красоты: ниже по файлу стоит
   общее правило «начинки на телефоне в две колонки» с тем же весом,
   и с одинарным классом оно побеждало бы как стоящее позже. */
@media (max-width: 680px) {
	.pa-shelf__list,
	.pa-fillings-grid.pa-fillings-grid--row {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 44%;
		gap: var(--pa-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		overscroll-behavior-x: contain;
		margin-right: calc(-1 * var(--pa-pad-x-mobile));
		padding-right: var(--pa-pad-x-mobile);
		padding-bottom: var(--pa-2);
		scrollbar-width: none;
	}

	.pa-shelf__list::-webkit-scrollbar,
	.pa-fillings-grid.pa-fillings-grid--row::-webkit-scrollbar {
		display: none;
	}

	.pa-shelf__list > li,
	.pa-fillings-grid--row > li {
		scroll-snap-align: start;
	}
}

/* Рассказ о выбранной начинке над выдачей: разрез слева, текст справа;
   на телефоне — одно под другим. */
.pa-intro {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: var(--pa-4) var(--pa-5);
	align-items: center;
	margin: 0 0 var(--pa-5);
}

.pa-intro__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.pa-intro__title {
	margin: var(--pa-1) 0 var(--pa-2);
}

@media (max-width: 680px) {
	.pa-intro {
		grid-template-columns: minmax(0, 1fr);
	}

	.pa-intro__media {
		max-width: 14rem;
	}
}

/* Начинки без фотографии — строкой меток под сеткой разрезов. */
.pa-fillings-rest {
	margin-top: var(--pa-4);
}

/* Ряд «Ближайшие праздники» над остальными поводами
   (inc/holidays.php): три праздника и плитка «все праздники» —
   как ряды разделов на витрине. Заголовки рядов — того же вида,
   что у разделов («Бенто», «Свадебные»). */
.pa-holidays {
	margin: 0 0 var(--pa-5);
}

.pa-holidays .pa-fillings-grid {
	margin-bottom: 0;
}

.pa-card {
	display: block;
	text-decoration: none;
	color: inherit;
}

.pa-card img {
	display: block;
	width: 100%;
	aspect-ratio: var(--pa-ratio, 3 / 4);
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pa-card:hover img {
	transform: scale(1.02);
}

.pa-card__title {
	display: block;
	margin-top: var(--pa-3);
	line-height: 1.25;
}

.pa-card__price {
	display: block;
	margin-top: var(--pa-1);
	font-variant-numeric: tabular-nums;
}

.pa-fillings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
	gap: var(--pa-5) var(--pa-gutter);
	margin: 0 0 var(--pa-5);
	padding: 0;
	list-style: none;
}

/* Описание под названием — не больше трёх строк.

   Описания у начинок разной длины: у одной строка состава, у другой
   абзац. Без ограничения ряд карточек разъезжался по высоте, и сетка
   превращалась в лесенку. Целиком описание видно на карточке
   торта, когда выбираешь эту начинку. */
.pa-fillings-grid--cols4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pa-fillings-grid__comp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	margin-top: var(--pa-1);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--pa-muted);
}

/* Значения свойства списком — когда фотографий нет.
   Повод словом понятнее картинки: «Свадьба» ничем не проиллюстрируешь
   так, чтобы это читалось быстрее самого слова. */
.pa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2) var(--pa-3);
	margin: 0 0 var(--pa-5);
	padding: 0;
	list-style: none;
}

/* Метка-значение: повод, раздел, вариант ответа в подборе.

   Заливка нужна, потому что одной рамки мало. Рамка у нас
   в четырнадцать процентов чёрного — на белом фоне ряд меток
   читался сплошной строкой текста, и где кончается одна
   и начинается другая, было не разобрать. Особенно там, где
   значения короткие и без снимков: поводы, разделы каталога.

   .pa-cats__item — та же метка под другим именем: ею размечены
   разделы на главной. Имена разные по историческим причинам,
   а вид обязан быть один, поэтому и описаны они здесь вместе. */
.pa-tag,
.pa-cats__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5em var(--pa-chip-pad-x);
	background: var(--pa-surface);
	border: 1px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Единственное отличие: рядом с названием раздела стоит число,
   и выравнивать их надо по строке, а не по середине метки —
   иначе мелкая цифра съезжает вниз относительно названия. */
.pa-cats__item {
	align-items: baseline;
	gap: 0.4em;
}

.pa-tag:hover,
.pa-cats__item:hover {
	color: var(--pa-accent);
	border-color: currentColor;
}

/* Выбранный — как выбранный чип фильтра. Механика у них одна
   и та же: и то и другое отбирает товары. */
.pa-tag.is-active {
	color: var(--pa-on-accent);
	background: var(--pa-accent);
	border-color: var(--pa-accent);
}


/* Соцсети в столбик: в этом блоке всё остальное — адрес, метро,
   телефон — тоже идёт строками одна под другой. */
.pa-socials {
	display: flex;
	flex-direction: column;
	gap: var(--pa-2);
	margin: var(--pa-2) 0 0;
	padding: 0;
	list-style: none;
}

/* Ссылка занимает ширину текста, а не всей колонки: иначе попадание
   мимо буквы всё равно считается нажатием. */
.pa-socials a {
	align-self: flex-start;
}

.pa-contacts-block p {
	margin: 0 0 var(--pa-2);
}

.pa-contacts__address {
	font-size: 1.125rem;
}

.pa-contacts__phone {
	margin: var(--pa-3) 0;
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
}

.pa-contacts__phone a {
	text-decoration: none;
}

/* Подпись под телефоном: «Звоните или пишите в удобный вам
   мессенджер». Прижата к номеру — это пояснение к нему, а не новый
   пункт контактов. */
.pa-contacts__phone:has(+ .pa-contacts__note) {
	margin-bottom: var(--pa-1);
}

.pa-contacts__note {
	margin: 0 0 var(--pa-3);
}

/* Ссылка-строка: подчёркивание волосяное, цвет появляется
   при наведении. */
.pa-link {
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--pa-line);
}

.pa-link:hover {
	color: var(--pa-accent);
	border-bottom-color: currentColor;
}

.pa-map {
	background: var(--pa-surface);
	overflow: hidden;
	line-height: 0;
}

/* Высоту задаёт панель блока, она приезжает переменной в атрибуте style.
   Раньше высота стояла атрибутом тега, а на телефоне перебивалась жёсткими
   280px: владелец менял её в редакторе, на телефоне ничего не менялось. */
.pa-map iframe {
	display: block;
	border: 0;
	height: var(--pa-map-h, 360px);
}

.pa-map__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pa-2) var(--pa-3);
	margin: var(--pa-2) 0 var(--pa-5);
	font-size: 0.9375rem;
	color: var(--pa-muted);
}

/* Ритм на страницах из блоков: наши блоки отдают разметку
   без обёртки, поэтому отступы задаются им напрямую.

   Отступ у второго и третьего уровня разный. Раньше правило
   доставало любой заголовок, и подзаголовок отбивался от текста
   так же сильно, как раздел от раздела — на странице вроде FAQ
   становилось непонятно, где кончается один раздел и начинается
   другой. */
.entry-content > h2 {
	margin-top: var(--pa-5);
}

.entry-content > h3 {
	margin-top: var(--pa-4);
}

/* Третий уровень набран основным шрифтом, а не заголовочным.

   Шкала здесь тесная: 26, 20 и 16 пикселей. Когда все три набраны
   одним и тем же Prata, разница в четыре пункта читается как
   случайность, а не как уровень — отсюда ощущение скачущих
   размеров. Смена начертания разделяет роли надёжнее, чем
   ещё пара пунктов кегля: раздел набран заголовочным шрифтом,
   подзаголовок — текстовым. */
.entry-content h3 {
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
}

.entry-content > .wp-block-columns {
	margin-top: var(--pa-5);
}

/* Линия — граница главы, интервал — граница раздела.

   Раньше интервал был один на всё: между «Кто создаёт ваши десерты»
   и «Что мы печём» стояло столько же воздуха, сколько между «Сезоном»
   и «Нашими работами». Смена темы читалась как продолжение, страница
   сливалась в один блок. Теперь у линии отступ ступенью крупнее
   (--pa-6 против --pa-5): глава отделена и линией, и воздухом.

   Отступы у линии и следующего заголовка схлопываются, а не
   складываются, так что больше --pa-6 не набегает. На телефоне
   --pa-6 сама уменьшается (раздел 6h). */
/* Галерея без обрезки — снимки по центру ряда, а не по верху.

   В ряду дипломов книжные листы выше альбомных. Ядро ставит
   необрезанные снимки к верхнему краю ряда, и под альбомным
   оставалась пустота, будто снимок недогрузился. По центру
   ряд читается ровно. Селектор повторяет ядерный (с :not(#…),
   у которого вес идентификатора) и начинается с .entry-content,
   иначе ядро его перебивает. */
.entry-content .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image:not(#individual-image) {
	margin-top: auto;
	margin-bottom: auto;
}

.entry-content > .wp-block-separator {
	margin-top: var(--pa-6);
	margin-bottom: var(--pa-6);
}

/* Крайние блоки страницы без внешних отступов.

   Раньше правило касалось только заголовков, и на главной, где
   первым блоком идут колонки, их собственный отступ складывался
   с отступом контейнера — сверху и снизу получалась двойная пустота.
   Лечить это уменьшением отступа контейнера нельзя: он же отвечает
   за воздух на текстовых страницах, где первым идёт заголовок.

   Теперь расстояние до края задаёт только контейнер, и оно
   одинаково на любой странице, чем бы она ни начиналась.

   Стоит ниже правил выше намеренно: у них специфичность больше,
   и выше по файлу обнуление бы не сработало. */
.entry-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child {
	margin-bottom: 0;
}

/* Допродажи и похожие работы после карточки.

   clear обязателен. Галерея и правая колонка у WooCommerce — плавающие
   блоки, а поток под ними раньше размыкала панель вкладок. Вкладки мы
   убрали, и первый же блок после карточки заехал на галерею: заголовок
   получал ширину просвета и разваливался на буквы по вертикали.

   Линия здесь заметнее прочих не цветом, а отступом: между товаром
   и тем, что к нему предлагают, нужен воздух, иначе чужие торты
   читаются как часть карточки. */
.woocommerce div.product .up-sells,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
	clear: both;
	margin-top: var(--pa-6);
	padding-top: var(--pa-5);
	border-top: 1px solid var(--pa-line);
}

/* ─────────────────────────────────────────────
   9a. Подбор торта
   ───────────────────────────────────────────── */

.pa-quiz {
	margin: var(--pa-5) 0;
	padding: var(--pa-5) var(--pa-4);
	background: var(--pa-surface);
}

.pa-quiz__count {
	margin: 0 0 var(--pa-2);
}

.pa-quiz__question {
	margin: 0 0 var(--pa-4);
	font-size: 1.25rem;
	line-height: 1.3;
}

.pa-quiz__options {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pa-2);
	margin: 0 0 var(--pa-4);
	padding: 0;
	list-style: none;
}

/* Кнопки подбора — те же метки, что и у свойства списком: человек
   уже видел их в каталоге, и узнавание здесь важнее оригинальности. */
/* Варианты ответа — те же метки, но на белом: в подборе они стоят
   внутри блока с заливкой, и серая метка на сером не читается.

   :not(.is-active) обязателен. Вес у «.pa-quiz .pa-tag» такой же,
   как у «.pa-tag.is-active», а стоит правило ниже — значит, выбранный
   вариант получил бы белую заливку вместо бордовой, и подсветка
   ответа просто не работала бы. */
.pa-quiz .pa-tag:not(.is-active) {
	background: var(--base, #fff);
}

.pa-quiz .pa-tag {
	font: inherit;
	cursor: pointer;
}

.pa-quiz__skip {
	color: var(--pa-muted);
}

/* Метка подбора в фокусе.

   «button:focus» у GeneratePress красит текст белым, а наша метка
   цвет только наследует — и вес у наследования ниже (07.10.2026).
   Метка в фокусе с клавиатуры становилась белой надписью на белом:
   вариант ответа пропадал ровно тогда, когда человек на него
   смотрит. Под курсором и у выбранной цвет задают свои правила. */
.pa-quiz .pa-tag:focus:not(:hover):not(.is-active) {
	color: inherit;
}

.pa-quiz .pa-quiz__skip:focus:not(:hover):not(.is-active) {
	color: var(--pa-muted);
}

.pa-quiz__back,
.pa-quiz__restart {
	display: inline-block;
	margin-top: var(--pa-2);
	padding: 0;
	font: inherit;
	font-size: 0.875rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--pa-line);
	cursor: pointer;
}

/* «Назад» и «Начать сначала» — ссылки по виду, кнопки по сути.

   Тёмная заливка GeneratePress на наведении и фокусе перебивала
   наш фон (07.10.2026): под курсором получался бордовый текст
   на тёмно-сером, нечитаемый, а в фокусе — белый на тёмном.
   Возвращаем вид ссылки: без заливки, цвет текста, при наведении
   бордовый — как у .pa-link. */
.pa-quiz__back:hover,
.pa-quiz__back:focus,
.pa-quiz__restart:hover,
.pa-quiz__restart:focus {
	color: inherit;
	background: none;
}

.pa-quiz__back:hover,
.pa-quiz__restart:hover {
	color: var(--pa-accent);
}

/* Кнопки на итоге разводим по вертикали. Рядом «Начать сначала»
   читается как второе действие того же веса, и по ней легко попасть
   вместо основной — особенно пальцем. */
.pa-quiz__result {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Скрытие через hidden браузер задаёт своим правилом, а оно слабее
   любого нашего display. Без этой строки итог виден с самого начала.

   Правило намеренно общее, а не только для итога: у шагов своего
   display сейчас нет, но стоит его добавить — и они полезут наружу
   ровно так же. */
.pa-quiz [hidden] {
	display: none;
}

.pa-quiz__result .button {
	display: inline-block;
}

.pa-quiz__result .pa-quiz__restart {
	margin-top: var(--pa-4);
}

/* Подпись и правовые ссылки в подвале — одним кеглем.

   Раньше мелкими были только ссылки, а подпись шла кеглем
   GeneratePress. Пока подпись была короткой («© 2026 PostreArt»),
   разница не бросалась в глаза. Когда в неё встало предложение
   про авторские права, подвал стал читаться как две разные полосы:
   крупный текст и под ним мелкие ссылки. Теперь размер один на всю
   полосу, и задан он здесь, в одной переменной. */
.site-footer .copyright-bar {
	--pa-footer-size: 0.8125rem;
	font-size: var(--pa-footer-size);
}

/* Абзац в подвале без нижнего отступа: он раздвигал полосу
   и сдвигал подпись выше середины.

   text-wrap: balance выравнивает длину строк. Подпись стоит
   по центру, и на телефоне без этого она рассыпалась лесенкой:
   длинная строка, короткая, снова длинная. Браузеры без поддержки
   просто переносят как раньше. */
.site-footer .copyright-bar p {
	margin: 0;
	text-wrap: balance;
}

.site-footer .copyright-bar .pa-sentence {
	display: inline-block;
}

.site-footer .copyright-bar p + p {
	margin-top: var(--pa-1);
}

/* Правовые ссылки под подписью. */
.pa-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pa-2) var(--pa-4);
	margin: var(--pa-2) 0 0;
	padding: 0;
	list-style: none;
}

.pa-footer-nav__list a {
	color: var(--pa-muted);
	text-decoration: none;
}

.pa-footer-nav__list a:hover {
	text-decoration: underline;
}

/* «Настройки cookie» — кнопка, одетая в ссылку.

   По смыслу это действие (снова показать полосу о cookie), а не
   переход, поэтому в разметке <button>. В подвале она стоит в ряду
   правовых ссылок последним пунктом и обязана ничем от них
   не отличаться: тот же кегль подвала, тот же цвет, подчёркивание
   только под курсором.

   :hover и :focus перечислены в том же правиле намеренно:
   GeneratePress красит любую кнопку на наведении и в фокусе тёмной
   заливкой с белым текстом, и его правило сильнее одноклассового.
   Рамка фокуса с клавиатуры — из общего правила :focus-visible. */
/* Селектор с .site-footer и button — не для красоты. У GeneratePress
   есть правило шрифта кнопок «button:not(.menu-toggle)», и оно сильнее
   одного класса: на стенде кнопка выходила крупнее соседних ссылок,
   а под курсором (где наше правило с :hover уже сильнее) сжималась
   до их размера — «прыгала» (07.10.2026). Кегль — та же переменная,
   что у всей полосы подвала. */
.site-footer button.pa-cookie-reset,
.site-footer button.pa-cookie-reset:hover,
.site-footer button.pa-cookie-reset:focus {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: var(--pa-footer-size, inherit);
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: var(--pa-muted);
	text-align: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.site-footer button.pa-cookie-reset:hover {
	text-decoration: underline;
}

/* Согласие перед кнопкой отправки. Галочка и текст выровнены
   по первой строке, а не по центру: текст в две строки иначе
   уводит квадратик вниз. */
/* Сильнее правила WooCommerce «.woocommerce form .form-row label»:
   оно делало подпись блоком, и на телефоне вторая строка «персональных
   данных» уходила под квадратик, а строка про политику под ней стояла
   с отступом — в разнобой (07.10.2026). */
.woocommerce form .form-row.pa-consent label,
.pa-consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--pa-2);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--pa-muted);
	cursor: pointer;
}

.pa-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0.1em 0 0;
}

/* Строка про политику под галочкой — с отступом под текст галочки,
   а не под сам квадратик: так видно, что она относится к согласию. */
.pa-consent__note {
	display: block;
	margin: var(--pa-1) 0 0 calc(20px + var(--pa-2));
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pa-muted);
}

/* ─────────────────────────────────────────────
   9b. Уведомление о cookie
   ───────────────────────────────────────────── */

.pa-cookie {
	position: fixed;
	z-index: 100;
	right: var(--pa-3);
	bottom: var(--pa-3);
	left: var(--pa-3);
	display: flex;
	align-items: center;
	gap: var(--pa-4);
	max-width: 48rem;
	margin: 0 auto;
	padding: var(--pa-3) var(--pa-4);
	background: var(--base, #fff);
	border: 1px solid var(--pa-line);
	box-shadow: 0 4px 24px rgb(0 0 0 / 12%);
}

.pa-cookie__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--pa-muted);
}

.pa-cookie__buttons {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: stretch;
	gap: var(--pa-2);
}

/* «Только необходимые» — тише «Разрешить», но это полноценная
   кнопка, а не мелкая ссылка: отказаться должно быть так же легко,
   как согласиться. */
.pa-cookie__no {
	padding: 0.45em 0.9em;
	font: inherit;
	font-size: 0.875rem;
	color: inherit;
	background: transparent;
	border: 1px solid var(--pa-line);
	cursor: pointer;
}

/* Заливку на наведении и фокусе GeneratePress делает тёмной
   («button:hover, button:focus»), и тихая кнопка превращалась
   в тёмную плашку — громче «Разрешить» (07.10.2026). Отказ
   должен оставаться тише согласия и при наведении: меняется
   только рамка. */
.pa-cookie__no:hover,
.pa-cookie__no:focus {
	color: inherit;
	background: transparent;
}

.pa-cookie__no:hover,
.pa-cookie__no:focus-visible {
	border-color: currentColor;
}

/* Полоса может прийти скрытой атрибутом hidden (её показывает
   «Настройки cookie» в подвале). Правило браузера для hidden
   слабее нашего display: flex, без этой строки полоса была бы
   видна всегда. */
.pa-cookie[hidden] {
	display: none;
}

/* Открытое меню на телефоне — полосу прячем.

   Полоса закреплена внизу экрана и стоит выше меню по слоям:
   на 390×760 она закрывала нижние пункты раскрытого меню
   (07.10.2026), и до них нельзя было дотянуться. Класс
   mobile-menu-open GeneratePress ставит на <html>, пока меню
   открыто; закроют меню — полоса вернётся сама. */
.mobile-menu-open .pa-cookie {
	display: none;
}

/* На бумаге полоса не нужна: при печати страницы с ценами
   или условиями доставки она ложилась поверх текста. */
@media print {
	.pa-cookie {
		display: none;
	}
}

/* ─────────────────────────────────────────────
   10. Узкие экраны
   ───────────────────────────────────────────── */

/* Шапка на телефоне.

   Раньше здесь меню разворачивалось в строку без кнопки: пунктов было
   четыре, и они помещались. По плану их станет семь-восемь — это четыре
   строки, то есть половина первого экрана. Условие изменилось, поэтому
   кнопка вернулась.

   Своей раскладки тут нет намеренно: показом и скрытием списка
   заведует GeneratePress, и чем меньше мы ему мешаем, тем меньше
   шансов, что его же скрипт перестанет попадать в наши правила. */
/* Шкала отступов на телефоне.

   Крупные ступени задавались под широкий экран, где рядом стоят
   две-три колонки и воздух работает на композицию. На телефоне
   всё выстраивается в одну ленту, и те же четыре сантиметра между
   блоками превращают страницу в череду пустых экранов.

   Ужимаем саму шкалу, а не каждое правило по отдельности: на ней
   держатся все наши блоки, поэтому пропорции сохраняются, а лента
   становится короче примерно на треть. Мелкие ступени не трогаем —
   они отвечают за внутренние зазоры, и там менять нечего. */
@media (max-width: 768px) {
	:root {
		--pa-5: 1.75rem;
		--pa-6: 2.5rem;
	}
}

/* Колонки из трёх и более — с разделителями.

   Такие блоки у нас перечисляют однородные вещи: четыре факта
   о кондитерской, три отзыва. Без разделителя они читаются как один
   поток, а сетка два на два, которую я пробовал до этого, давала
   рваные строки — колонки разной высоты не выстраивались в ряд.

   Разделитель решает это честнее: на широком экране вертикальный,
   на узком горизонтальный, а сами колонки идут одна за другой.

   Условие читается как «есть третья колонка»: у блока из двух —
   текст и снимок на первом экране — её нет, и правило его не трогает. */
.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--pa-line);
	padding-left: var(--pa-4);
}

@media (min-width: 782px) {
	/* Разделители одной высоты. Колонка «по центру» у ядра высотой
	   со своё содержимое, и у высокой колонки («натуральные продукты»
	   с тремя строками текста) линия была длиннее соседних. Теперь
	   колонки тянутся на всю высоту ряда, а содержимое центрируется
	   внутри — линии ровные, текст стоит там же, где стоял. */
	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column.is-vertically-aligned-center {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

@media (min-width: 782px) {
	/* Четыре колонки. В ряд они встают с 782px, и при обычных
	   зазорах колонке на планшете оставалось 120px: «соответствия»
	   и «натуральные» переносились посреди слова. Сужаем зазор
	   и отступ у разделителя — слова помещаются целиком. На широком
	   экране не отключаем: если у страницы есть боковая колонка,
	   содержимое и там узкое. */
	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) {
		gap: var(--pa-3);
	}

	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) > .wp-block-column + .wp-block-column {
		padding-left: var(--pa-3);
	}

	/* Если места всё же мало (боковая колонка на планшете), пусть
	   слово переносится по слогам, с дефисом, а не где попало. */
	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(4)) :is(h2, h3, h4) {
		hyphens: auto;
	}
}

@media (max-width: 781px) {
	/* Ядро ставит колонки в столбик само, нам остаётся развернуть
	   разделитель и убрать боковой отступ. */
	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)) {
		gap: 0;
	}

	.entry-content .wp-block-columns:has(> .wp-block-column:nth-child(3)) > .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--pa-line);
		padding-top: var(--pa-4);
		margin-top: var(--pa-4);
	}

	/* Между колонками, вставшими в столбик, зазора у ядра нет:
	   снимок прилипал к кнопке над ним. */
	.entry-content .wp-block-columns:not(:has(> .wp-block-column:nth-child(3))) {
		gap: var(--pa-5);
	}
}

@media (max-width: 768px) {
	/* Логотип по центру, кнопка меню под ним.

	   Раскладку задаём явно, а не полагаемся на умолчание родительской
	   темы: у неё стоит выравнивание шапки по левому краю, и логотип
	   в прошлой сборке уехал влево. */
	.site-header .inside-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--pa-2);
	}

	/* Кнопка лежит внутри навигации, поэтому строку под логотипом
	   навигация занимает целиком. */
	.site-header .main-navigation {
		width: 100%;
		float: none;
	}

	/* Центровку кнопки задаём сами, а не наследуем.

	   Логотип стоит по центру потому, что это мы прописали: шапка —
	   колонка с align-items: center. А кнопка меню лежит этажом ниже,
	   внутри навигации, и её положение до сих пор определяла
	   родительская тема. Две центровки из разных источников совпадают
	   ровно до тех пор, пока GeneratePress не поменяет свою, —
	   и заметить расхождение можно только глазом, на глаз же его
	   и выправляя.

	   Кнопка во всю ширину строки с надписью по центру: её середина
	   совпадает с серединой шапки по построению, а не по совпадению.
	   Попутно вырос размер области нажатия, что на телефоне только
	   к лучшему. */
	.site-header .menu-toggle {
		float: none;
		display: block;
		width: 100%;
		margin: 0;
		text-align: center;
	}

	.site-header .site-logo img,
	.site-header .header-image {
		width: clamp(150px, 46vw, 220px);
	}
}

@media (max-width: 680px) {
	/* Одна карточка на весь экран при пропорции 3:4 даёт снимок
	   высотой в полтора экрана. Две колонки — привычный вид витрины. */
	.woocommerce ul.products,
	.pa-grid {
		--pa-cols: 2;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pa-4) var(--pa-3);
	}

	.pa-mount {
		padding: calc(var(--pa-mount-pad) * 0.55);
		padding-bottom: calc(var(--pa-mount-pad) * 0.4);
	}

	.pa-sku {
		font-size: 0.625rem;
	}

	/* Начинки на телефоне — две колонки, как торты в каталоге:
	   в три колонки разрез становился размером с ноготь. */
	.pa-fillings-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pa-4) var(--pa-3);
	}
}

@media (max-width: 768px) {
	/* Таблица корзины: шесть колонок за экран не помещаются.
	   Разворачиваем строки в карточки, подписи берём из data-title —
	   их выводит сам WooCommerce. */
	.woocommerce table.shop_table_responsive thead {
		display: none;
	}

	/* Без внешней рамки. Строки превращаются в карточки с отступом 0
	   по бокам, и рамка таблицы ложилась вплотную к тексту: подписи
	   и цены прижимались к линии (28.09.2026). Теперь позиции
	   разделены линией между ними, а текст стоит по краю страницы —
	   как всё остальное содержимое. */
	.woocommerce table.shop_table_responsive {
		border: 0;
		border-radius: 0;
	}

	.woocommerce table.shop_table_responsive tr {
		display: block;
		margin: 0;
		padding: var(--pa-4) 0;
		border-bottom: 1px solid var(--pa-line);
	}

	.woocommerce table.shop_table_responsive tr:first-child {
		padding-top: 0;
	}

	.woocommerce table.shop_table_responsive tr td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--pa-3);
		width: auto;
		padding: var(--pa-1) 0;
		border: 0;
		text-align: right;
		/* WooCommerce красит каждую вторую строку серым — в карточках
		   это выглядело как случайная подложка у одной позиции. */
		background: transparent !important;
	}

	.woocommerce table.shop_table_responsive tr td::before {
		content: attr(data-title);
		flex: 0 0 auto;
		font-size: 0.8125rem;
		font-weight: 400;
		color: var(--pa-muted);
		text-align: left;
	}

	/* Итоги корзины: две короткие строки, без воздуха карточки. */
	.woocommerce .cart_totals table.shop_table_responsive tr {
		padding: var(--pa-2) 0;
	}

	.woocommerce .cart_totals table.shop_table_responsive tr:last-child {
		border-bottom: 0;
	}

	/* WooCommerce рисует над «Итого» свою линию — вместе с нашей
	   между строками получалась двойная. */
	.woocommerce-cart .cart-collaterals .cart_totals table.shop_table_responsive tr td {
		border-top: 0;
	}

	/* Строка кнопок под позициями — последняя, линия под ней лишняя. */
	.woocommerce table.shop_table_responsive tr:has(> td.actions) {
		border-bottom: 0;
		padding-bottom: 0;
	}

	/* WooCommerce объявляет выравнивание ячеек с !important. */
	.woocommerce table.shop_table_responsive tr td.product-name,
	.woocommerce table.shop_table_responsive tr td.product-thumbnail,
	.woocommerce table.shop_table_responsive tr td.actions {
		display: block;
		text-align: left !important;
	}

	.woocommerce table.shop_table_responsive tr td.product-name::before,
	.woocommerce table.shop_table_responsive tr td.product-thumbnail::before,
	.woocommerce table.shop_table_responsive tr td.actions::before {
		content: none;
	}

	/* Миниатюру WooCommerce на телефоне прячет, а торт узнают
	   именно по фотографии. */
	.woocommerce table.shop_table_responsive tr td.product-thumbnail {
		display: block !important;
	}

	.woocommerce table.shop_table_responsive tr td.product-thumbnail img {
		width: 120px;
		height: auto;
		box-sizing: border-box;
		padding: calc(var(--pa-mount-pad) * 0.4);
		background: var(--pa-surface);
	}

	.woocommerce .cart-collaterals,
	.woocommerce .cart-collaterals .cart_totals {
		width: 100%;
		float: none;
	}

	/* Половинные поля в одну колонку. */
	.woocommerce form .form-row-first,
	.woocommerce form .form-row-last,
	.woocommerce .col2-set .col-1,
	.woocommerce .col2-set .col-2 {
		width: 100%;
		float: none;
		margin-right: 0;
	}

	/* Кнопка в сообщении «товар добавлен» — под текстом, во всю ширину.

	   WooCommerce прижимает её вправо (float: right). На широком
	   экране это уместно: текст и кнопка встают одной строкой.
	   На телефоне текст занимает всю строку, кнопка переносится
	   на следующую и остаётся прижатой к правому краю — висит
	   в углу, не выровненная ни по чему.

	   Сообщение здесь становится колонкой: сначала текст, потом
	   кнопка во всю ширину колонки. order: 1 нужен потому, что
	   в разметке WooCommerce кнопка стоит перед текстом, — без него
	   она оказалась бы сверху, и человек читал бы «Просмотр корзины»
	   раньше, чем узнал, что товар добавлен.

	   Колонка начинается после значка слева: он выведен отдельно
	   и в поток не входит, поэтому кнопка выравнивается по тексту,
	   а не по краю плашки. Это и нужно — выровненное по тексту
	   читается как часть сообщения. */
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-message .button,
	.woocommerce-info .button,
	.woocommerce-error .button {
		float: none;
		order: 1;
		width: 100%;
		margin-top: var(--pa-3);
		text-align: center;
	}

	/* Липкая галерея на телефоне только мешает прокрутке.

	   Отменять position здесь не нужно: липкой она становится
	   с 900px и выше, то есть в этот диапазон никогда не попадает.
	   Строка position: static стояла тут раньше и не делала ничего,
	   зато создавала впечатление, что точки 768 и 900 — пара. */
	.single-product div.product .woocommerce-product-gallery {
		max-width: 420px;
		margin: 0 auto var(--pa-4);
	}

	/* Фильтр свёрнут под кнопку.

	   Развёрнутый он занимает целый экран: двенадцать начинок
	   и десять размеров. Человек, пришедший смотреть торты, сначала
	   пролистывает то, чем ещё не собирался пользоваться.

	   Если фильтр уже применён, PHP отдаёт блок открытым: прятать
	   от человека то, что он сам включил, нельзя. */
	.pa-filters__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--pa-2);
		min-height: 44px;
		margin-bottom: var(--pa-3);
		padding: 0.5em 1.2em;
		background: var(--pa-surface);
		border: 1px solid transparent;
		font: inherit;
		color: inherit;
		cursor: pointer;
	}

	/* Наведение и фокус — без тёмной заливки GeneratePress
	   («button:hover, button:focus»). После касания кнопка остаётся
	   в фокусе, и «Подобрать» висела тёмной плашкой, пока человек
	   не нажмёт куда-нибудь ещё (07.10.2026). Под курсором —
	   только рамка. */
	.pa-filters__toggle:hover,
	.pa-filters__toggle:focus {
		color: inherit;
		background: var(--pa-surface);
	}

	.pa-filters__toggle:hover {
		border-color: currentColor;
	}

	/* Сколько значений выбрано. Без этого свёрнутый фильтр молча
	   сокращает выдачу, и непонятно, почему тортов десять, а не все. */
	.pa-filters__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 1.5em;
		height: 1.5em;
		padding: 0 0.4em;
		border-radius: 999px;
		background: var(--pa-accent);
		color: var(--pa-on-accent);
		font-size: 0.8125rem;
	}

	.pa-filters:not(.is-open) .pa-filters__body {
		display: none;
	}

	/* Панель каталога в столбик: счётчик и сортировка в одну строку
	   на 375 пикселях не помещаются, а сжатый выпадающий список
	   обрезает названия вариантов. */
	.pa-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.pa-toolbar .woocommerce-ordering select {
		width: 100%;
	}

	/* Подбор на телефоне.

	   Размеры подбирались на широком экране, где блок занимает
	   половину полосы и крупный вопрос уместен. На телефоне он
	   занимает её целиком и начинает выглядеть больше всего
	   остального текста на странице. */
	.pa-quiz {
		padding: var(--pa-4) var(--pa-3);
	}

	.pa-quiz__question {
		font-size: 1.0625rem;
		margin-bottom: var(--pa-3);
	}

	/* Варианты набраны мельче, и в строку их помещается два вместо
	   одного — список ответов перестаёт быть длиннее самого вопроса. */
	.pa-quiz .pa-tag {
		padding: 0.45em 0.9em;
		font-size: 0.9375rem;
	}

	/* В строку не влезает: текст в три-четыре строки и кнопка рядом
	   оставляют кнопке сантиметр ширины. */
	.pa-cookie {
		flex-direction: column;
		align-items: stretch;
		gap: var(--pa-3);
		right: var(--pa-2);
		bottom: var(--pa-2);
		left: var(--pa-2);
		padding: var(--pa-3);
	}

	/* На телефоне кнопки рядом, поровну: две кнопки друг под другом
	   заняли бы полэкрана. */
	.pa-cookie__buttons {
		flex-direction: row;
	}

	.pa-cookie__buttons > * {
		flex: 1 1 0;
	}

	/* Подпись и значение друг под другом: восьми сантиметрам
	   на подпись рядом со значением места уже нет. */
	.pa-summary__row {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.pa-fillings__preview {
		grid-template-columns: 1fr;
	}

	.woocommerce div.product form.cart .pa-fillings__cut,
	.pa-fillings__cut {
		max-width: 160px;
	}

	/* Пальцем, а не курсором: минимум 44 пикселя по высоте. */
	.pa-segment,
	.pa-chip {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	.pa-swatch:not(.pa-swatch--text) {
		width: 60px;
		height: 80px;
	}

	.pa-swatch.pa-swatch--text {
		min-height: 44px;
	}

	/* Выбранная высота соблюдается, но карта не занимает весь экран:
	   что меньше, то и берём. */
	.pa-map iframe {
		height: min(var(--pa-map-h, 360px), 60vh);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ─────────────────────────────────────────────
   Способы доставки в корзине и заявке (delivery.php)
   Штатно WooCommerce выравнивает их по правому краю ячейки,
   и на телефоне «Обычная, интервал 3–4 часа: 890 ₽» рассыпалась
   столбиком по два слова. Список читается слева направо.
   ───────────────────────────────────────────── */

.woocommerce ul#shipping_method {
	margin: 0;
	text-align: left;
}

.woocommerce ul#shipping_method li {
	margin: 0 0 var(--pa-2);
	line-height: 1.35;
}

.woocommerce ul#shipping_method li:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	/* Подпись «Доставка» — над списком, а не слева от него.

	   Ячейка в карточке корзины — flex-строка (правило выше,
	   в «Узких экранах»), и display: block у подписи внутри неё
	   ничего не давал (07.10.2026): на 360px «Доставка» стояла
	   слева, а список сжимался до 245px и снова рвался на короткие
	   строки. Ячейку доставки складываем в столбик. */
	.woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		text-align: left;
	}

	/* Выравнивание — у содержимого, а не у ячейки: WooCommerce
	   прижимает ячейки вправо через !important, и text-align выше
	   до них не доходит. Без этого строка «Доставка по Москве»
	   под списком стояла по правому краю. */
	.woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td > * {
		text-align: left;
	}

	.woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals td::before {
		display: block;
		float: none;
		margin-bottom: var(--pa-2);
	}
}

/* ─────────────────────────────────────────────
   Цвет цены — один на весь сайт
   Раньше цену красил WooCommerce своим оливковым (#958e09),
   и только на карточке и в сетке раздела; ряды витрины и блоки
   главной оставались чёрными. Цвет выбирается в настройщике:
   «Оформление PostreArt» → «Цвет цены» (переменная --pa-price).
   ───────────────────────────────────────────── */

.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price,
.pa-card__price {
	color: var(--pa-price, var(--pa-accent));
}

/* «за штуку», «за 1 кг» — тише самой цены, как и было. */
.woocommerce div.product p.price .pa-price-unit,
.woocommerce ul.products li.product .price .pa-price-unit,
.pa-card__price .pa-price-unit {
	color: var(--pa-muted);
}

/* «Нет в наличии» WooCommerce красит тем же оливковым. */
.woocommerce div.product .stock {
	color: var(--pa-muted);
}

/* ─────────────────────────────────────────────
   Текст раздела под товарами (inc/seo-pages.php, 1.32.0)
   Под сеткой, отделён линией: сначала торты, потом слова.
   Части с подзаголовками — равными блоками в сетке на всю ширину
   (1.32.2–1.32.3): четыре — два ряда по две, три — в ряд, на телефоне
   одна лента. Заголовки — на ступень мельче обычных H2: это пояснение
   к каталогу.
   ───────────────────────────────────────────── */

.pa-cat-text {
	margin-top: var(--pa-5);
	padding-top: var(--pa-4);
	border-top: 1px solid var(--pa-line);
}

.pa-cat-text > p {
	max-width: 70ch;
}

.pa-cat-text__parts {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pa-4) var(--pa-5);
}

/* Вступление без подзаголовка (если есть) — над сеткой. */
.pa-cat-text > p + .pa-cat-text__parts {
	margin-top: var(--pa-4);
}

/* Число колонок задаёт тема по числу частей (pa_seo_parts_cols):
   четыре — два ряда по две, три — в ряд. */
@media (min-width: 900px) {
	.pa-cat-text__parts {
		grid-template-columns: repeat(var(--pa-cat-cols, 2), minmax(0, 1fr));
	}
}

.pa-cat-text h2 {
	font-size: 1.25em;
	margin: 0 0 var(--pa-2);
}

.pa-cat-text p:last-child {
	margin-bottom: 0;
}

/* ─────────────────────────────────────────────
   Корзина меньше минимальной суммы (inc/minimum.php, 1.33.0)
   На месте кнопки оформления: подсказка и кнопка «В каталог» во всю
   ширину колонки итогов — там же и такой же величины, как кнопка,
   которую она заменяет. Не красная ошибка: человек ещё не добрал,
   а не ошибся.
   ───────────────────────────────────────────── */

.pa-min-order__text {
	margin: 0 0 var(--pa-3);
}

.woocommerce a.button.pa-min-order__link {
	display: block;
	text-align: center;
}