/**
 * Guxen — основные стили темы.
 *
 * Единственный файл со стилями. Медиазапросы — в responsive.css.
 * Ни препроцессоров, ни сборки: правится напрямую.
 *
 * Тема построена по принципу Mobile First: здесь описан узкий экран,
 * responsive.css только расширяет его на больших.
 *
 * Содержание:
 *    1. Переменные
 *    2. Сброс и основы
 *    3. Типографика
 *    4. Контейнер и секции
 *    5. Кнопки
 *    6. Формы
 *    7. Шапка и меню
 *    8. Хлебные крошки
 *    9. Первый экран
 *   10. Преимущества, цифры, шаги
 *   11. Плитки категорий
 *   12. Карточки товаров и сетка
 *   13. Каталог: раскладка и фильтр
 *   14. Карточка товара
 *   15. Страницы и содержимое
 *   16. Контакты, карта, форма на странице
 *   17. Нижний блок
 *   18. Модальные окна
 *   19. Пагинация, поиск, пустые состояния
 *   20. Подвал
 *   21. Проявление при прокрутке
 *   22. Блоки редактора и любой контент
 */

/* ==========================================================================
   1. Переменные
   Меняете оформление — начинайте отсюда. Ни один цвет, отступ или кегль
   не должен быть записан числом дальше по файлу.
   ========================================================================== */

:root {
	/*
	 * Цвета. Холодные почти-белые основания, холодные сине-серые чернила
	 * и одно тёплое пятно — бронза. В этом контрасте весь характер палитры:
	 * не утепляйте фоны и не добавляйте второй акцент.
	 */
	--paper: #fbfbfc;
	--paper-raised: #ffffff;
	--paper-sunken: #f1f2f5;
	--ink: #182436;
	--ink-muted: #4a5364;
	--ink-quiet: #59616f;
	--rule: #e2e4ea;

	/*
	 * Акцент разведён на два тона не для разнообразия, а ради контраста:
	 * accent идёт только на крупный текст (от 24px) и декор, accent-deep —
	 * туда, где текст мелкий или где по акценту лежит белым.
	 */
	--accent: #a17e64;
	--accent-deep: #8a6449;
	--accent-light: #cda98b;

	--on-dark: #ffffff;
	--on-dark-muted: rgba(255, 255, 255, 0.86);
	--on-dark-rule: rgba(255, 255, 255, 0.28);
	--scrim: rgba(10, 14, 22, 0.94);
	--veil-paper: rgba(251, 251, 252, 0.9);
	--veil-ink: rgba(24, 36, 54, 0.82);
	--shadow: rgba(0, 0, 0, 0.45);

	--color-error: #c0463d;
	--color-success: #2e7d55;

	/* Полупрозрачные подложки под кольцо фокуса поля. Обычные --accent
	   и --color-error для этого не годятся: кольцо рисуется поверх рамки
	   и без прозрачности читается второй рамкой. */
	--veil-accent: rgba(161, 126, 100, 0.18);
	--veil-error: rgba(192, 70, 61, 0.16);

	/* Гарнитуры. Обе лежат в assets/fonts/, внешних CDN нет. */
	--font-display: "Onest", "Helvetica Neue", system-ui, sans-serif;
	--font-body: "Golos Text", "Helvetica Neue", system-ui, sans-serif;

	/*
	 * Шкала кеглей. Ниже 11px не опускаться: на экране такой текст
	 * не читается. Новых ступеней не вводить — если нужного размера нет,
	 * берётся ближайший.
	 */
	--t-micro: 0.6875rem;
	--t-label: 0.75rem;
	--t-sm: 0.875rem;
	--t-base: 0.9375rem;
	--t-md: 1rem;
	--t-lead: clamp(0.95rem, 1.08vw, 1.09rem);
	--t-subhead: clamp(1.1rem, 1.55vw, 1.4rem);
	--t-h3: clamp(1.05rem, 1.4vw, 1.2rem);
	--t-h2: clamp(1.7rem, 3vw, 2.75rem);
	--t-h1: clamp(1.8rem, 3.35vw, 2.85rem);
	--t-stat: clamp(1.7rem, 2.8vw, 2.5rem);

	/*
	 * Раскладка. 12 колонок, поля и вертикальный ритм секций.
	 *
	 * --maxw — ширина самого контента, без боковых полей. Поля добавляются
	 * к ней в .container: у всех элементов box-sizing: border-box, и если
	 * отдать это значение прямо в max-width, поля съедят его изнутри —
	 * на широком экране контент окажется уже заявленного на два поля.
	 */
	--maxw: 1380px;
	--gutter: 14px;
	--edge: clamp(20px, 4.6vw, 64px);
	--sp-sec: clamp(58px, 6.2vw, 92px);
	/* Поле шапки страницы. Одно значение сверху и снизу: заголовок должен
	   стоять на одинаковом расстоянии от крошек и от линейки под собой. */
	--sp-head: clamp(34px, 3.6vw, 56px);

	/* Формы. Радиусы минимальные: 2px у кнопок, 3px у карточек. */
	--radius-sm: 2px;
	--radius-md: 3px;

	/* Кривая всех переходов — одна на тему. */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--speed: 0.45s;

	/*
	 * Отдельная кривая для колоды в первом экране. Общая --ease — резкий
	 * ease-out: за первую пятую времени она проходит три четверти пути.
	 * Для наведения это правильно, движение кажется отзывчивым, а на
	 * секундной смене кадров читается как рывок с последующим подползанием:
	 * фотография будто моргает и только потом медленно доезжает.
	 * Здесь нужна кривая с плавным началом и концом.
	 */
	--deck-ease: cubic-bezier(0.45, 0, 0.15, 1);

	/* Сколько показывается один кадр в первом экране. Это же время
	   заполняется чёрточка на шкале — они связаны намеренно. */
	--hero-duration: 5s;

	/* Раскладка колоды в первом экране: шаг уступа влево и уменьшение
	   на каждый кадр вглубь. Здесь значения для телефона — дальше
	   в медиазапросах они растут вместе с шириной экрана. */
	--deck-shift: 18px;
	--deck-scale: 0.06;
	--deck-shadow: rgba(10, 14, 22, 0.14);

	--header-height: 68px;
}

/* ==========================================================================
   2. Сброс и основы
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * При выключенной анимации переходы гасятся сменой самой переменной —
 * ею пользуются все правила файла, поэтому обнулять их поштучно
 * и тем более перебивать !important не нужно.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--speed: 0.001s;
	}

	html {
		scroll-behavior: auto;
	}

	.mosaic__item img,
	.tile__media img,
	.card__media img,
	.reveal {
		transition: none;
	}
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-muted);
	font-family: var(--font-body);
	font-size: var(--t-base);
	line-height: 1.62;
	letter-spacing: 0.002em;
	overflow-x: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}

button {
	font: inherit;
	color: inherit;
}

ul,
ol,
dl,
dd {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

figure {
	margin: 0;
}

fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

legend {
	padding: 0;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	z-index: 100;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	clip-path: none;
	background: var(--ink);
	color: var(--on-dark);
}

:focus-visible {
	outline: 2px solid var(--accent-deep);
	outline-offset: 3px;
}

.icon {
	width: 20px;
	height: 20px;
	flex: none;
}

/* Заглушка на месте отсутствующего снимка. Карточка без фото не должна
   схлопываться: иначе ряд в сетке разъезжается. */
.thumb-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--paper-sunken);
	color: var(--rule);
}

.thumb-empty .icon {
	width: 40px;
	height: 40px;
}

/* ==========================================================================
   3. Типографика
   ========================================================================== */

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 350;
	line-height: 1.1;
	letter-spacing: 0.008em;
}

p {
	margin: 0 0 1em;
	max-width: 46ch;
}

p:last-child {
	margin-bottom: 0;
}

/* Мелкая подпись над заголовком секции. Прописными, бронзой,
   с крупным трекингом — узнаваемый лейбл всей темы. */
.section-head__label,
.hero__label,
.modal__label,
.footer__col-title,
.contacts__label,
.cta__card-label {
	margin: 0 0 12px;
	color: var(--accent-deep);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ==========================================================================
   4. Контейнер и секции
   ========================================================================== */

.container {
	width: 100%;
	max-width: calc(var(--maxw) + var(--edge) * 2);
	margin: 0 auto;
	padding: 0 var(--edge);
}

.site-main {
	display: block;
}

/* Секции разделяются линейкой в 1px и сменой фона, а не карточкой
   с тенью: страница должна читаться печатным каталогом. */
.section {
	padding: var(--sp-sec) 0;
	border-top: 1px solid var(--rule);
}

.section--first {
	border-top: 0;
}

.section--raised {
	background: var(--paper-raised);
}

.section--sunken {
	background: var(--paper-sunken);
}

.section--flush {
	padding: 0;
}

.section__more {
	margin-top: 32px;
}

/* Шапка секции: лейбл, под ним заголовок, под ним пояснение — всё
   от левого края контента. Верхней линейки нет: секции и так разделены
   сменой фона и собственной границей .section. */
.section-head {
	margin-bottom: 40px;
}

.section-head__title {
	font-size: var(--t-h2);
	text-transform: uppercase;
}

.section-head__text {
	margin: 16px 0 0;
	max-width: 46ch;
	font-size: var(--t-lead);
}

/* Шапка подсписка внутри страницы — «Похожие модели» под карточкой товара.
   Кегль тот же, что у «Все модели» в каталоге: это не новый раздел сайта,
   а подпись к сетке, и заголовком в две трети экрана она спорила с
   названием самой модели. */
.section-head--sm {
	margin-bottom: 28px;
}

.section-head--sm .section-head__title {
	font-size: var(--t-subhead);
}

/* ==========================================================================
   5. Кнопки
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height: 52px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--accent-deep);
	color: var(--paper-raised);
	font-family: var(--font-body);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
		border-color var(--speed) var(--ease);
}

.btn--line {
	border-color: var(--rule);
	background: var(--paper-raised);
	color: var(--ink);
}

.btn--sm {
	height: 44px;
	padding: 0 20px;
}

/* Чёрточка справа удлиняется трансформом, а не изменением ширины:
   анимировать width — значит пересчитывать раскладку на каждом кадре. */
.btn__dash {
	display: block;
	width: 22px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0.6);
	transform-origin: left center;
	transition: transform var(--speed) var(--ease);
}

/* Наведение — только там, где есть курсор: на телефоне подсветка
   залипает на последнем задетом элементе до следующего касания. */
@media (hover: hover) {
	.btn:hover {
		background: var(--ink);
		border-color: var(--ink);
		color: var(--on-dark);
	}

	.btn:hover .btn__dash {
		transform: scaleX(1);
	}

	a:hover {
		color: var(--accent-deep);
	}
}

.btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

/* ==========================================================================
   6. Формы
   ========================================================================== */

.field {
	margin-bottom: 20px;
}

.field__label {
	display: block;
	margin-bottom: 8px;
	color: var(--ink-muted);
	font-size: var(--t-sm);
}

.field__input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--t-md);
	line-height: 1.4;
	transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}

/* Подсказка формата не должна спорить с введённым текстом: она светлее
   даже самой тихой подписи на странице. */
.field__input::placeholder {
	color: var(--ink-quiet);
	opacity: 0.5;
}

/* Номер набирается моноширинными цифрами: у пропорциональных «1» уже «8»,
   и маска дёргалась бы на каждой цифре. */
.field__input--phone {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}

@media (hover: hover) {
	.field__input:hover:not(:focus) {
		border-color: var(--ink-quiet);
	}
}

/* Фокус — бронзовая рамка и мягкое кольцо вокруг неё. Кольцо рисуется
   тенью, а не outline: outline у полей уже занят общим правилом
   :focus-visible, и два обвода наложились бы друг на друга. */
.field__input:focus {
	border-color: var(--accent-deep);
	box-shadow: 0 0 0 3px var(--veil-accent);
	outline: none;
}

/*
 * Ошибка показывается только после того, как посетитель ушёл из поля:
 * :user-invalid, в отличие от :invalid, молчит, пока поле ещё заполняют.
 * С :invalid пустое обязательное поле краснело бы сразу при загрузке.
 */
.field__input:user-invalid {
	border-color: var(--color-error);
}

.field__input:user-invalid:focus {
	box-shadow: 0 0 0 3px var(--veil-error);
}

/*
 * Автозаполнение Chrome заливает поле собственным жёлтым фоном, и никакой
 * background его не перебивает — только внутренняя тень во всю высоту.
 * При фокусе к ней добавляется обычное кольцо: box-shadow один, и без
 * второго слоя фокус на автозаполненном поле пропадал бы.
 */
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover {
	-webkit-text-fill-color: var(--ink);
	box-shadow: 0 0 0 100px var(--paper-raised) inset;
}

.field__input:-webkit-autofill:focus {
	box-shadow: 0 0 0 100px var(--paper-raised) inset, 0 0 0 3px var(--veil-accent);
}

textarea.field__input {
	display: block;
	resize: vertical;
	min-height: 104px;
}

/*
 * Флажки рисуются темой, а не системой. Системный флажок в каждом браузере
 * свой: в Safari он голубой и скруглённый, в Firefox серый и квадратный,
 * и никакой accent-color не приводит их к одной форме — меняется только
 * заливка, но не рамка, не размер и не скругление. На странице, где все
 * рамки ровно 1px цветом линеек, чужая форма видна сразу.
 */
input[type="checkbox"] {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	cursor: pointer;
	transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

/*
 * Галочка — уголок из двух границ, повёрнутый на 45°. Рисовать её фоновым
 * SVG нельзя: цвет в data-URI не наследуется от переменной, и при смене
 * палитры галочка осталась бы прежней.
 */
input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 5px;
	height: 9px;
	border: solid var(--paper-raised);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

input[type="checkbox"]:checked {
	border-color: var(--accent-deep);
	background: var(--accent-deep);
}

input[type="checkbox"]:checked::after {
	opacity: 1;
}

input[type="checkbox"]:disabled {
	background: var(--paper-sunken);
	cursor: default;
}

@media (hover: hover) {
	input[type="checkbox"]:hover:not(:disabled) {
		border-color: var(--accent);
	}
}

.field-check {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
	line-height: 1.5;
	cursor: pointer;
}

/* Флажок выравнивается по первой строке подписи, а не по её середине:
   подпись согласия занимает две строки, и по центру флажок повисал бы
   между ними. */
.field-check input[type="checkbox"] {
	margin-top: 2px;
}

.field-check a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/*
 * Ловушка для ботов. Уводится за край экрана, а не прячется display:none
 * и не type="hidden": скрытое поле бот пропускает, а видимое, но
 * выведенное из потока, — заполняет. Для человека и для скринридера
 * поля нет: у контейнера стоит aria-hidden.
 */
.field-trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   7. Шапка и меню
   ========================================================================== */

.header {
	position: sticky;
	z-index: 40;
	top: 0;
	background: var(--veil-paper);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: box-shadow var(--speed) var(--ease);
}

.header.is-stuck {
	box-shadow: 0 1px 0 var(--rule);
}

/*
 * Пока панель меню раскрыта, размытие с шапки снимается. Это не про
 * красоту: backdrop-filter делает шапку системой координат для всего,
 * что внутри неё позиционировано fixed, — а меню лежит внутри шапки.
 * С размытием панель отсчитывала right и bottom от коробки шапки
 * и схлопывалась в полоску в 50 пикселей. Под раскрытым меню страницу
 * всё равно закрывает затемнение, размывать нечего.
 */
.is-menu-open .header {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	min-height: var(--header-height);
}

.branding {
	margin-right: auto;
}

.branding__wordmark {
	display: block;
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1;
}

.branding__name {
	display: block;
	color: var(--ink);
	font-size: 1.4rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/*
 * Подпись под вордмарком центрируется паддингом слева: у последней буквы
 * прописных остаётся пустое место шириной в трекинг, и без компенсации
 * строка визуально уезжает влево.
 */
.branding__tagline {
	display: block;
	margin-top: 6px;
	padding-left: 0.14em;
	color: var(--ink-quiet);
	font-family: var(--font-body);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.custom-logo-link img {
	max-height: 44px;
	width: auto;
}

.burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.burger__line {
	display: block;
	height: 1px;
	background: var(--ink);
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

.is-menu-open .burger__line:first-child {
	transform: translateY(3.5px) rotate(45deg);
}

.is-menu-open .burger__line:last-child {
	transform: translateY(-3.5px) rotate(-45deg);
}

/*
 * Меню на узком экране выезжает справа панелью. Оно то же самое, что
 * и на широком: второе меню со своим составом разъезжается с первым
 * при первой же правке.
 *
 * Панель начинается под шапкой, а не от верха экрана: так крестик
 * бургера остаётся на месте и на виду — закрывать меню тем же касанием,
 * которым его открыли, привычнее, чем искать вторую кнопку внутри.
 */
.nav {
	position: fixed;
	z-index: 39;
	top: var(--header-height);
	right: 0;
	bottom: 0;
	left: auto;
	display: flex;
	flex-direction: column;
	width: min(82vw, 340px);
	padding: 22px var(--edge) 28px;
	border-left: 1px solid var(--rule);
	background: var(--paper-raised);
	overflow-y: auto;
	overscroll-behavior: contain;
	visibility: hidden;
	transform: translateX(100%);
	transition: transform var(--speed) var(--ease), visibility var(--speed) var(--ease);
}

.is-menu-open .nav {
	visibility: visible;
	transform: none;
}

/* Затемнение под панелью — псевдоэлементом, а не узлом в разметке:
   пустой div висел бы на каждой странице ради одного состояния. */
.is-menu-open::before {
	content: "";
	position: fixed;
	z-index: 38;
	inset: 0;
	background: var(--veil-ink);
	animation: guxen-scrim var(--speed) var(--ease);
}

@keyframes guxen-scrim {
	from {
		opacity: 0;
	}
}

/* Страница под раскрытой панелью не прокручивается: иначе палец,
   промахнувшийся мимо панели, увозит содержимое, и, закрыв меню,
   посетитель обнаруживает себя в другом месте страницы. */
.is-menu-open {
	overflow: hidden;
}

.nav__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/*
 * Кегль пунктов — обычный текстовый, а не заголовочный: панель узкая,
 * и длинные названия вроде «Оптовым покупателям» на крупном кегле
 * ломались на три строки. Высоту касания держит вертикальный отступ,
 * а не размер букв.
 */
.nav__list a {
	display: block;
	padding: 12px 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.008em;
}

.nav__list .current-menu-item > a {
	color: var(--accent-deep);
}

/*
 * Пункт с подменю: ссылка ведёт на раздел, стрелка раскрывает список.
 * Одной ссылкой это не сделать — тап по названию должен уводить
 * на страницу раздела, а не разворачивать вложенные пункты.
 */
.nav__list .menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.nav__list .menu-item-has-children > a {
	flex: 1;
}

.nav__expand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink-quiet);
	cursor: pointer;
	transition: transform var(--speed) var(--ease), color var(--speed) var(--ease);
}

.nav__expand[aria-expanded="true"] {
	transform: rotate(180deg);
	color: var(--ink);
}

.nav__list .sub-menu {
	flex: 0 0 100%;
	padding-left: 14px;
}

/* Свёрнуто только при работающем скрипте: без него стрелки нет,
   и раскрыть список было бы нечем. */
.js .nav__list .menu-item-has-children:not(.is-open) > .sub-menu {
	display: none;
}

.nav__list .sub-menu a {
	padding: 8px 0;
	font-size: var(--t-sm);
	font-weight: 400;
	color: var(--ink-muted);
}

/* Телефон и кнопка прижаты к низу панели. Отступ сверху автоматический:
   при коротком меню он разводит их с пунктами, при длинном схлопывается
   в ноль, и границу от последнего пункта держит padding. */
.nav__contacts {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: auto;
	padding-top: 22px;
	border-top: 1px solid var(--rule);
}

.nav__phone {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-md);
}

.nav__cta {
	justify-content: center;
}

/* На узком экране правая часть шапки не помещается: телефон и кнопка
   переезжают внутрь раскрытого меню. */
.header__actions {
	display: none;
}

/* ==========================================================================
   8. Хлебные крошки
   ========================================================================== */

.crumbs {
	padding: 20px 0 0;
}

.crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.crumbs__item + .crumbs__item::before {
	content: "·";
	margin-right: 8px;
	color: var(--rule);
}

.crumbs__item--current {
	color: var(--ink);
}

/* ==========================================================================
   9. Первый экран
   ========================================================================== */

.hero {
	padding: 40px 0 var(--sp-sec);
}

.hero__body {
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.hero__title {
	margin: 0 0 20px;
	font-size: var(--t-h1);
	text-transform: uppercase;
}

/* Акцентная строка заголовка — единственное тёплое пятно первого экрана. */
.hero__accent {
	display: block;
	color: var(--accent);
}

.hero__text {
	max-width: 42ch;
	font-size: var(--t-lead);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.hero__media {
	margin-top: 36px;
}

/*
 * Колода: передний кадр целиком, остальные выглядывают из-за него слева
 * уступом. Глубину каждого кадра задаёт скрипт переменной --depth
 * (0 — передний), а смещение, уменьшение и приглушение считаются из неё
 * формулой — так порядок кадров живёт в одном месте, а не в четырёх
 * классах, которые придётся править при добавлении пятого кадра.
 *
 * Контейнер задаёт пропорцию сам: держать высоту снимком нельзя — пока
 * он не загружен, высоты нет, и колода схлопывается в ноль.
 */
.hero__slides {
	position: relative;
	/*
	 * Сколько места слева отдано уступу. Считается из числа кадров,
	 * которое проставляет шаблон: с жёстким множителем пятый кадр
	 * молча уехал бы за край колонки.
	 */
	--deck-back: calc(var(--deck-shift, 0px) * (var(--deck-count, 1) - 1));
	/* Кадры приподняты — верхний край выходит за контейнер. */
	overflow: visible;
}

.hero__slides-space {
	display: block;
	width: calc(100% - var(--deck-back));
	margin-left: auto;
	aspect-ratio: 4 / 5;
}

.hero__slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: calc(100% - var(--deck-back));
	z-index: calc(10 - var(--depth, 0));
	/*
	 * Колода уходит строго назад, а не по диагонали: карточки остаются
	 * на одной горизонтальной оси и только уменьшаются — верхний край
	 * опускается, нижний поднимается ровно настолько же. Никакого подъёма
	 * вверх нет, вертикаль держит сам масштаб.
	 *
	 * Точка отсчёта — левый край по центру высоты. Это не вкусовщина,
	 * а расчёт: от левого края уменьшение съедает высоту симметрично
	 * (вертикальный центр сохраняется), а по горизонтали левая граница
	 * стоит на месте — значит, видимый уступ равен --deck-shift ровно,
	 * без поправки на масштаб. От центра или от правого края уменьшение
	 * утягивало бы карточку обратно вправо и съедало половину уступа,
	 * а то и весь: при масштабе 10% и правом крае от 62px оставалось 12.
	 */
	transform-origin: left center;
	transform:
		translateX(calc(var(--depth, 0) * var(--deck-shift, 0px) * -1))
		scale(calc(1 - var(--depth, 0) * var(--deck-scale, 0)));
	/*
	 * Задние кадры непрозрачные. Глубину показывают размер, уступ и тень —
	 * приглушать их не нужно: полупрозрачные фотографии просвечивают друг
	 * сквозь друга и читаются как брак, а не как глубина.
	 */
	opacity: 1;
	/*
	 * Тень — единственная в теме, кроме залипшего хедера и модалки.
	 * Здесь она несёт смысл, а не украшает: без неё четыре фотографии
	 * с похожей гаммой сливаются в одно пятно, и уступ читается как
	 * дефект вёрстки, а не как глубина.
	 */
	box-shadow: 0 24px 60px var(--deck-shadow, transparent);
	transition: transform 1.05s var(--deck-ease), opacity 1.05s var(--deck-ease);
}

/*
 * Скругление и обрезка — на самом снимке, а не на карточке. На карточке
 * пришлось бы ставить overflow с clip-path, а clip-path режет и тень:
 * она просто не появилась бы.
 */
.hero__slide img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-md);
	object-fit: cover;
}

/*
 * Уход переднего кадра — два состояния подряд, и разделить их обязательно.
 *
 * is-leaving: кадр остаётся сверху, уезжает вправо и растворяется.
 * is-returning: он уже невидим, поэтому мгновенно, без перехода, встаёт
 * в конец колоды и оттуда плавно проявляется. Одним состоянием это
 * не сделать: кадр поехал бы вправо, а потом на глазах у всех вернулся
 * через весь экран на своё место в глубине.
 */
.hero__slide.is-leaving {
	z-index: 20;
	/* От собственного положения вправо, без уменьшения: карточка
	   не уходит в глубину, а именно уезжает с переднего плана. */
	transform: translateX(22%);
	opacity: 0;
	/*
	 * У прозрачности кривая линейная, а не общая. С любой ускоряющейся
	 * кривой фотография теряет непрозрачность в первые полтораста
	 * миллисекунд и дальше едет вправо уже невидимой — растворения
	 * не видно совсем, виден рывок. Линейная гасит её равномерно,
	 * ровно за то же время, что длится отъезд.
	 */
	transition: transform 0.9s var(--deck-ease), opacity 0.9s linear;
}

.hero__slide.is-returning {
	/* Перехода у смещения нет намеренно: кадр перескакивает в конец
	   колоды, пока его не видно, и только потом проявляется. */
	transition: opacity 0.9s linear;
}

/*
 * Шкала под текстом. Активная чёрточка заполняется слева направо ровно
 * за то время, что показывается её кадр, — заполнение и есть отсчёт
 * (см. main.js).
 */
.hero__ticks {
	display: flex;
	gap: var(--gutter);
	margin-top: 44px;
	max-width: 420px;
}

.hero__tick {
	flex: 1;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
}

.hero__tick-line {
	display: block;
	height: 2px;
	background: var(--rule);
	overflow: hidden;
}

.hero__tick-fill {
	display: block;
	height: 100%;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: left center;
}

/* Пройденные шаги остаются закрашенными — по шкале видно, где ты
   находишься, а не только что сейчас идёт. */
.hero__tick.is-done .hero__tick-fill {
	transform: scaleX(1);
}

.hero__tick.is-current .hero__tick-fill {
	animation: guxen-tick var(--hero-duration, 5s) linear forwards;
}

@keyframes guxen-tick {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

.hero__tick-num {
	display: block;
	margin-top: 12px;
	color: var(--ink-quiet);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	transition: color var(--speed) var(--ease);
}

.hero__tick.is-current .hero__tick-num {
	color: var(--ink);
}

/*
 * При выключенной анимации кадры не сменяются сами (скрипт не запускает
 * отсчёт), поэтому шкала должна показывать положение статично.
 */
@media (prefers-reduced-motion: reduce) {
	.hero__slide {
		transition: opacity 0.001s;
		transform: none;
	}

	.hero__tick.is-current .hero__tick-fill {
		animation: none;
		transform: scaleX(1);
	}
}

/* ==========================================================================
   10. Преимущества, цифры, шаги
   ========================================================================== */

.benefits {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 28px;
}

.benefits__item {
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.benefits__icon {
	display: block;
	margin-bottom: 14px;
	color: var(--accent);
}

.benefits__title {
	margin-bottom: 8px;
	font-family: var(--font-body);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.benefits__text {
	margin: 0;
	font-size: var(--t-sm);
}

.stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 20px;
	margin-top: 48px;
	padding-top: 26px;
	border-top: 1px solid var(--rule);
}

.stats__value {
	display: block;
	color: var(--accent);
	font-family: var(--font-display);
	font-size: var(--t-stat);
	font-weight: 500;
	line-height: 1;
}

.stats__label {
	display: block;
	margin-top: 8px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

/* Колонки секции выравниваются по верху: центрирование опускает короткую
   колонку, и отступ сверху перестаёт совпадать с остальными секциями. */
.split {
	display: grid;
	align-items: start;
	gap: 36px;
}

.split__text {
	margin-bottom: 26px;
}

.mosaic {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
}

.mosaic__item {
	border-radius: var(--radius-md);
	overflow: hidden;
	/* Safari не обрезает по скруглению потомка, вынесенного в свой слой
	   трансформом: углы становятся прямыми. clip-path чинит это. */
	clip-path: inset(0 round var(--radius-md));
}

.mosaic__item--1 {
	grid-column: span 2;
}

.mosaic__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

@media (hover: hover) {
	.mosaic__item:hover img {
		transform: scale(1.045);
	}
}

.steps {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 26px;
}

.steps__item {
	padding-top: 16px;
	border-top: 1px solid var(--rule);
}

.steps__num {
	display: block;
	margin-bottom: 12px;
	color: var(--accent-deep);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
}

.steps__title {
	margin-bottom: 8px;
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 500;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.steps__text {
	margin: 0;
	font-size: var(--t-sm);
}

/* ==========================================================================
   11. Плитки категорий
   ========================================================================== */

.tiles {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--gutter);
}

.tile {
	position: relative;
	display: block;
	border-radius: var(--radius-md);
	overflow: hidden;
	clip-path: inset(0 round var(--radius-md));
	color: var(--on-dark);
}

.tile__media {
	display: block;
}

/* Кадр категории квадратный на всех ширинах: плитки стоят рядом
   в один ряд, и разная пропорция на разных экранах ломала бы ряд. */
.tile__media img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

/* Текст лежит на затемнённой части кадра, а не поверх светлой:
   контраст проверяется по худшему пикселю, а не на глаз. */
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 18%, var(--scrim) 100%);
	pointer-events: none;
}

.tile__body {
	position: absolute;
	z-index: 1;
	inset: auto 0 0;
	display: block;
	padding: clamp(18px, 3vw, 28px);
}

.tile__title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--t-subhead);
	font-weight: 400;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.tile__text {
	display: block;
	margin-top: 6px;
	color: var(--on-dark-muted);
	font-size: var(--t-sm);
}

.tile__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--on-dark-rule);
}

.tile__count {
	color: var(--on-dark-muted);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.tile__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--on-dark-rule);
	border-radius: 50%;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

@media (hover: hover) {
	.tile:hover .tile__media img {
		transform: scale(1.045);
	}

	.tile:hover .tile__arrow {
		background: var(--on-dark);
		color: var(--ink);
	}

	.tile:hover {
		color: var(--on-dark);
	}
}

.tile .thumb-empty {
	aspect-ratio: 1;
}

/* ==========================================================================
   12. Карточки товаров и сетка
   ========================================================================== */

/* Пока список подгружается, он гаснет и перестаёт принимать клики.
   Спиннера нет намеренно: ответ приходит за десятки миллисекунд,
   и вертушка успевала бы только мигнуть. */
.catalog-layout__results.is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity var(--speed) var(--ease);
}

.grid-cards {
	display: grid;
	/* Равные колонки объявляются minmax(0,1fr): обычный 1fr не сжимается
	   ниже своего содержимого и разносит сетку за пределы экрана. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px var(--gutter);
}

.card__link {
	display: block;
}

.card__media {
	display: block;
	margin-bottom: 14px;
	border-radius: var(--radius-md);
	background: var(--paper-sunken);
	overflow: hidden;
	clip-path: inset(0 round var(--radius-md));
}

.card__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.card__media .thumb-empty {
	aspect-ratio: 3 / 4;
}

.card__cat {
	display: block;
	margin-bottom: 6px;
	color: var(--accent-deep);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.card__title {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 400;
	line-height: 1.25;
}

.card__article {
	display: block;
	margin-top: 6px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

@media (hover: hover) {
	.card__link:hover .card__media img {
		transform: scale(1.045);
	}

	.card__link:hover .card__title {
		color: var(--accent-deep);
	}
}

/* ==========================================================================
   13. Каталог: раскладка и фильтр
   ========================================================================== */

.catalog-layout {
	display: grid;
	align-items: start;
	gap: 32px;
}

.catalog-layout__title {
	margin-bottom: 24px;
	font-size: var(--t-subhead);
	text-transform: uppercase;
}


.filter {
	border-top: 1px solid var(--rule);
	padding-top: 16px;
}

.filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.filter__title {
	margin: 0;
	color: var(--accent-deep);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-size: var(--t-sm);
	cursor: pointer;
}

.filter__toggle .icon {
	transition: transform var(--speed) var(--ease);
}

.filter__toggle[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

/* Содержимое показано по умолчанию и прячется только при работающем
   скрипте: без JS фильтр обязан остаться рабочим. */
.js .filter__body {
	display: none;
}

.js .filter.is-open .filter__body {
	display: block;
}

.filter__group {
	margin-top: 22px;
}

.filter__legend {
	margin-bottom: 10px;
	color: var(--ink);
	font-size: var(--t-sm);
	font-weight: 600;
}

.filter__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.filter__check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px 0;
	color: var(--ink-muted);
	font-size: var(--t-sm);
	cursor: pointer;
}

@media (hover: hover) {
	.filter__check:not(.filter__check--off):hover {
		color: var(--ink);
	}
}

/* Значение, с которым при текущем отборе ничего не найдётся. Не прячем
   его: пропавшая строка читается как сбой вёрстки, а погасшая — как
   ответ «здесь этого нет». */
.filter__check--off {
	color: var(--ink-quiet);
	opacity: 0.45;
	cursor: default;
}

.filter__count {
	margin-left: auto;
	color: var(--ink-quiet);
	font-size: var(--t-micro);
	font-variant-numeric: tabular-nums;
}

/* При работающем отборе кнопка не нужна: список обновляется от галочки.
   В разметке она остаётся — без скрипта фильтр отправляется ею. */
.filter--live .filter__submit {
	display: none;
}

.filter__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 26px;
}

.filter__reset {
	color: var(--ink-quiet);
	font-size: var(--t-sm);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   14. Карточка товара
   ========================================================================== */

.product__grid {
	display: grid;
	align-items: start;
	gap: 36px;
}

.gallery__main {
	border-radius: var(--radius-md);
	background: var(--paper-sunken);
	overflow: hidden;
	clip-path: inset(0 round var(--radius-md));
}

.gallery__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.gallery__image {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.gallery--empty .thumb-empty {
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-md);
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 10px;
}

.gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: none;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--speed) var(--ease);
}

.gallery__thumb.is-current {
	border-color: var(--accent);
}

.gallery__thumb img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.product__cat {
	margin-bottom: 10px;
	color: var(--accent-deep);
	font-size: var(--t-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.product__title {
	margin-bottom: 14px;
	font-size: var(--t-h2);
	text-transform: uppercase;
}

.product__article {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 28px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--rule);
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.product__article b {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 500;
	letter-spacing: 0.03em;
}

.specs {
	margin-bottom: 30px;
}

.specs__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--rule);
}

.specs__row:first-child {
	border-top: 1px solid var(--rule);
}

.specs__label {
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.specs__value {
	margin: 0;
	color: var(--ink);
	font-size: var(--t-sm);
}

.specs--wide .specs__row {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.product__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 30px;
}

.product__text {
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.lightbox {
	max-width: min(96vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--paper-raised);
	box-shadow: 0 30px 80px var(--shadow);
}

.lightbox::backdrop {
	background: var(--veil-ink);
}

.lightbox__image {
	width: 100%;
	max-height: 92vh;
	object-fit: contain;
}

.lightbox__close {
	position: absolute;
	z-index: 1;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	background: var(--paper-raised);
	cursor: pointer;
}

/* ==========================================================================
   15. Страницы и содержимое
   ========================================================================== */

/* Шапка страницы одна на все шаблоны: страницу, каталог, категорию,
   рубрику, запись, поиск. Внутри только заголовок — никаких надзаголовков
   и описаний: раньше каталог набирал своё название кеглем h2 под мелкой
   строкой «Каталог», и одно и то же слово выглядело на двух страницах
   по-разному. Роль разделителя играет линейка следующей секции. */
.page-head {
	position: relative;
	padding: var(--sp-head) 0;
}

.page-head__inner {
	position: relative;
	z-index: 1;
}

.page-head__title {
	font-size: var(--t-h1);
	text-transform: uppercase;
}

.page-head__meta {
	margin: 14px 0 0;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.page-head__lead {
	margin: 18px 0 0;
	max-width: 46ch;
	font-size: var(--t-lead);
}

.page-head--image {
	padding: clamp(96px, 12vw, 180px) 0;
	color: var(--on-dark);
}

.page-head--image .page-head__title,
.page-head--image .page-head__meta {
	color: var(--on-dark);
}

.page-head--image .page-head__lead {
	color: var(--on-dark-muted);
}

.page-head__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.page-head__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-head__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(10, 14, 22, 0.35), var(--scrim));
}

.entry-content > * {
	margin-bottom: 1.1em;
}

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

/*
 * Заголовки в контенте берут три соседние ступени шкалы. Раньше h2 и h3
 * набирались одним кеглем — иерархии не получалось, и подзаголовок
 * не отличался от заголовка раздела.
 */
.entry-content h2 {
	margin-top: 1.8em;
	/* Нижний отступ нужен здесь, а не в общем правиле: у h1–h4 в сбросе
	   margin: 0, и внутри колонок заголовок прилипал к списку под ним. */
	margin-bottom: 0.7em;
	font-size: var(--t-subhead);
	text-transform: uppercase;
}

.entry-content h3 {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	font-size: var(--t-h3);
	text-transform: uppercase;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin-top: 1.5em;
	margin-bottom: 0.6em;
	font-family: var(--font-body);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Текст страницы идёт во всю ширину контейнера. Ограничений здесь два,
   и снимать надо оба: колонка была обрезана до 72ch модификатором
   entry-content--narrow (убран из шаблонов), а абзац внутри неё — общим
   пределом в 46ch из базовой типографики. Тот предел оставлен для
   подписей, вступлений и карточек, но в тексте страницы он не нужен. */
.entry-content p {
	max-width: none;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: 0.4em;
}

.entry-content a {
	color: var(--accent-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content blockquote {
	margin: 0;
	padding-left: 20px;
	border-left: 1px solid var(--accent);
	font-size: var(--t-lead);
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--gutter);
}

.photo-grid__item {
	border-radius: var(--radius-md);
	overflow: hidden;
	clip-path: inset(0 round var(--radius-md));
}

.photo-grid__item img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* ==========================================================================
   16. Контакты, карта, форма на странице
   ========================================================================== */

.contacts {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 28px;
	margin-top: 40px;
}

/* Иконка и подпись стоят одной строкой, значения — под ними во всю
   ширину колонки. Иконка над подписью занимала третью строку на пустом
   месте и растягивала блок вдвое. */
.contacts__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Строки прижаты к верху: колонки в сетке одной высоты по самой
	   длинной, и без этого лишнее место распределялось между строками —
	   у «Почты» подпись стояла на семь пикселей ниже, чем у «Телефона». */
	align-content: flex-start;
	column-gap: 10px;
	row-gap: 2px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.contacts__icon {
	display: block;
	margin-bottom: 0;
	color: var(--accent);
}

.contacts__label {
	margin-bottom: 0;
}

.contacts__value {
	display: block;
	flex: 0 0 100%;
	margin: 0;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 400;
}

/* Отбивка от строки с подписью — та же, что была у подписи снизу. */
.contacts__label + .contacts__value {
	margin-top: 10px;
}

.map {
	position: relative;
	height: clamp(280px, 42vw, 460px);
	background: var(--paper-sunken);
}

.map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.form-block {
	display: grid;
	align-items: start;
	gap: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--rule);
}

.form-block__title {
	margin-bottom: 14px;
	font-size: var(--t-h2);
	text-transform: uppercase;
}

.form-block__message,
.modal__message {
	margin: 14px 0 0;
	font-size: var(--t-sm);
}

.form-block__message.is-error,
.modal__message.is-error {
	color: var(--color-error);
}

.form-block__message.is-success,
.modal__message.is-success {
	color: var(--color-success);
}

/* ==========================================================================
   17. Нижний блок
   ========================================================================== */

.cta {
	position: relative;
	padding: var(--sp-sec) 0;
	background: var(--ink);
	color: var(--on-dark);
	overflow: hidden;
}

.cta__media {
	position: absolute;
	inset: 0;
}

.cta__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.cta__inner {
	position: relative;
	z-index: 1;
	display: grid;
	align-items: start;
	gap: 32px;
}

.cta__title {
	margin-bottom: 16px;
	color: var(--on-dark);
	font-size: var(--t-h2);
	text-transform: uppercase;
}

.cta__text {
	max-width: 42ch;
	color: var(--on-dark-muted);
}

.cta__body .btn {
	margin-top: 26px;
}

.cta__card {
	padding: clamp(22px, 2.4vw, 32px);
	border-radius: var(--radius-md);
	background: var(--scrim);
}

/*
 * Подписи на тёмной карточке — светлая бронза, а не тёмная. accent-deep
 * задуман для мелкого текста по светлому фону; на почти чёрном он давал
 * контраст 3.8:1 при норме 4.5 для такого кегля. На глаз это выглядело
 * благородно и читалось плохо.
 */
.cta__card-label {
	margin-bottom: 8px;
	color: var(--accent-light);
}

.cta__card-label:not(:first-child) {
	margin-top: 22px;
}

.cta__card-link,
.cta__card-text {
	display: block;
	margin: 0;
	color: var(--on-dark);
	font-size: var(--t-md);
}

/* ==========================================================================
   18. Модальные окна
   ========================================================================== */

.modal {
	width: min(94vw, 520px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--paper-raised);
	box-shadow: 0 30px 80px var(--shadow);
}

.modal::backdrop {
	background: var(--veil-ink);
}

.modal__box {
	position: relative;
	padding: clamp(24px, 4vw, 40px);
}

.modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ink-quiet);
	cursor: pointer;
}

.modal__title {
	margin-bottom: 18px;
	font-size: var(--t-subhead);
	text-transform: uppercase;
}

.modal__product {
	margin-bottom: 14px;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	background: var(--paper-sunken);
	color: var(--ink);
	font-size: var(--t-sm);
}

.modal__note {
	margin-bottom: 20px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.modal__submit {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   19. Пагинация, поиск, пустые состояния
   ========================================================================== */

/* Постраничная навигация. Номера — голый текст на общей линии, рамка
   только у «Назад» и «Вперёд»: страница и так разлинована, и ряд из
   восьми одинаковых коробок читался бы вторым фильтром, а не навигацией.
   Текущая страница отмечена бронзовой чертой под цифрой — тем же приёмом,
   что и активный пункт меню. */
.pagination {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.pagination__item a,
.pagination__item span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 6px;
	border-bottom: 1px solid transparent;
	color: var(--ink-muted);
	font-size: var(--t-sm);
	/* Моноширинные цифры: иначе «1» уже «8», и ряд номеров дрожит
	   при переходе со страницы на страницу. */
	font-variant-numeric: tabular-nums;
	transition: color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}

.pagination__item--current span {
	border-bottom-color: var(--accent-deep);
	color: var(--ink);
	font-weight: 600;
}

.pagination__item--dots span {
	min-width: 20px;
	padding: 0;
	color: var(--ink-quiet);
}

/* «Назад» и «Вперёд» стоят вплотную к номерам, а не разведены по краям
   строки: на первой странице «Назад» нет, на последней нет «Вперёд», и от
   разведённой раскладки номера прыгали бы от края к краю через страницу. */
.pagination__item--prev {
	margin-right: 12px;
}

.pagination__item--next {
	margin-left: 12px;
}

.pagination__item--prev a,
.pagination__item--next a {
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	color: var(--ink);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (hover: hover) {
	.pagination__item a:hover {
		color: var(--accent-deep);
		border-bottom-color: var(--accent-deep);
	}

	.pagination__item--prev a:hover,
	.pagination__item--next a:hover {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--on-dark);
	}
}

.search-form {
	display: flex;
	gap: 10px;
	max-width: 460px;
}

.search-form__input {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	font-family: var(--font-body);
	font-size: var(--t-md);
}

.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	color: var(--ink);
	cursor: pointer;
}

.search-page__form {
	margin-bottom: 40px;
}

.empty {
	padding: 40px 0;
}

.empty--page {
	text-align: center;
}

.empty--page p,
.empty--page .search-form {
	margin-left: auto;
	margin-right: auto;
}

.empty__code {
	color: var(--accent);
	font-family: var(--font-display);
	font-size: var(--t-stat);
	font-weight: 500;
	letter-spacing: 0.1em;
}

.empty__title {
	margin-bottom: 10px;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-subhead);
	text-transform: uppercase;
}

.empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.empty--page .empty__actions {
	justify-content: center;
}

.empty__search {
	margin-top: 32px;
}

/* ==========================================================================
   20. Подвал
   ========================================================================== */

.footer {
	background: var(--paper-raised);
	border-top: 1px solid var(--rule);
}

.footer__inner {
	display: grid;
	gap: 36px;
	padding-top: var(--sp-sec);
	padding-bottom: 44px;
}

.footer__wordmark {
	display: block;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.socials {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}

.socials__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--rule);
	border-radius: 50%;
	color: var(--ink);
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease);
}

@media (hover: hover) {
	.socials__link:hover {
		background: var(--ink);
		color: var(--on-dark);
	}
}

.footer__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: var(--t-sm);
}

.footer__quiet {
	color: var(--ink-quiet);
}

.footer__bottom {
	border-top: 1px solid var(--rule);
}

.footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	padding-top: 22px;
	padding-bottom: 22px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
}

.footer__copy {
	margin: 0;
}

/* ==========================================================================
   21. Проявление при прокрутке
   Тихий сдвиг вверх с проявлением. Класс вешает скрипт, поэтому без JS
   содержимое просто видно сразу.
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   22. Блоки редактора и любой контент

   Всё, что клиент может собрать в редакторе. Правила намеренно привязаны
   к .entry-content: стили блоков ядра подключаются после темы (в <head>
   они идут ниже guxen-style), и без лишнего класса ядро перебивало бы
   оформление — кнопка оставалась бы чёрной таблеткой, а таблица получала
   бы рамку вокруг каждой ячейки.
   ========================================================================== */

/* --- Кнопки блоков ------------------------------------------------------
   Кнопка, кнопка-файл и кнопка поиска — один и тот же элемент интерфейса,
   и выглядеть они обязаны как кнопки темы. Ядро по умолчанию рисует их
   тёмной таблеткой со скруглением 9999px, а это чужая форма: у темы все
   радиусы 2–3px. */

.entry-content .wp-element-button,
.entry-content .wp-block-button__link,
.entry-content .wp-block-file__button,
.entry-content .wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--accent-deep);
	color: var(--paper-raised);
	font-family: var(--font-body);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--speed) var(--ease), color var(--speed) var(--ease),
		border-color var(--speed) var(--ease);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--rule);
	background: var(--paper-raised);
	color: var(--ink);
}

@media (hover: hover) {
	.entry-content .wp-element-button:hover,
	.entry-content .wp-block-button__link:hover,
	.entry-content .wp-block-file__button:hover,
	.entry-content .wp-block-search__button:hover {
		border-color: var(--ink);
		background: var(--ink);
		color: var(--on-dark);
	}
}

.entry-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* --- Файл ---------------------------------------------------------------
   Имя файла и кнопка стоят в одной строке и переносятся вместе. Ядро
   уменьшает кегль имени до 0.8em — на длинном имени документа это уже
   нечитаемо, поэтому кегль задаём сами. */

.entry-content .wp-block-file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 1.2em;
	padding: 16px 0;
	border-top: 1px solid var(--rule);
	font-size: var(--t-base);
}

/*
 * Имя файла переносится по буквам. Имена документов приходят одним
 * длинным словом вроде 1pgdt_rnet_manual_SK77981-14-2: без переноса
 * строка не сжимается, кнопка уезжает за край экрана и на телефоне
 * появляется горизонтальная прокрутка всей страницы.
 */
.entry-content .wp-block-file a:not(.wp-block-file__button) {
	min-width: 0;
	margin-right: auto;
	overflow-wrap: anywhere;
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--rule);
}

.entry-content .wp-block-file *+ .wp-block-file__button {
	margin-left: 0;
}

.entry-content .wp-block-file__embed {
	width: 100%;
	margin-bottom: 1em;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
}

/* --- Аккордеон и <details> ---------------------------------------------
   Раскрывающийся блок разделяется волосяной линейкой, как и всё остальное
   на странице. Значок «+» рисует ядро, оно же поворачивает его на 45°
   в раскрытом состоянии — нам остаётся цвет и размер. */

.entry-content .wp-block-accordion-item,
.entry-content .wp-block-details {
	border-top: 1px solid var(--rule);
}

.entry-content .wp-block-accordion-item:last-child,
.entry-content .wp-block-details:last-child {
	border-bottom: 1px solid var(--rule);
}

.entry-content .wp-block-accordion-heading {
	margin: 0;
}

.entry-content .wp-block-accordion-heading__toggle,
.entry-content .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 0;
	border: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: var(--t-subhead);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--speed) var(--ease);
}

.entry-content .wp-block-details > summary {
	list-style: none;
}

.entry-content .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Свой значок для <details>: у него, в отличие от аккордеона, ядро
   ничего не рисует, а стандартный треугольник выпадает из набора. */
.entry-content .wp-block-details > summary::after {
	content: "+";
	color: var(--accent);
	font-size: var(--t-subhead);
	line-height: 1;
	transition: transform var(--speed) var(--ease);
}

.entry-content .wp-block-details[open] > summary::after {
	transform: rotate(45deg);
}

.entry-content .wp-block-accordion-heading__toggle-icon {
	flex: none;
	color: var(--accent);
	font-size: var(--t-subhead);
	line-height: 1;
}

@media (hover: hover) {
	.entry-content .wp-block-accordion-heading__toggle:hover,
	.entry-content .wp-block-details > summary:hover {
		color: var(--accent-deep);
	}
}

.entry-content .wp-block-accordion-panel,
.entry-content .wp-block-details > *:not(summary) {
	padding-bottom: 4px;
}

.entry-content .wp-block-accordion-item.is-open > .wp-block-accordion-panel {
	padding-bottom: 24px;
}

/* --- Разделитель --------------------------------------------------------
   Всегда одна волосяная линия цветом линеек. Ядро по умолчанию рисует
   короткую толстую полосу по центру — она читается как элемент декора,
   которого в этой системе нет. */

.entry-content hr,
.entry-content .wp-block-separator {
	height: 0;
	margin: 2.6em 0;
	border: 0;
	border-top: 1px solid var(--rule);
	opacity: 1;
}

.entry-content .wp-block-separator:not(.is-style-wide):not(.alignwide):not(.alignfull) {
	max-width: 100%;
}

.entry-content .wp-block-separator.is-style-dots {
	border-top: 0;
	color: var(--rule);
}

/* --- Таблицы ------------------------------------------------------------
   Только горизонтальные линейки: сетка из рамок вокруг каждой ячейки
   спорит с остальной страницей, где границ почти нет. Широкая таблица
   прокручивается внутри своей обёртки, а не растягивает страницу. */

.entry-content .wp-block-table,
.entry-content .table-scroll {
	overflow-x: auto;
	margin-bottom: 1.6em;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--t-sm);
}

/*
 * Селектор с .wp-block-table обязателен. У ядра правило
 * «.wp-block-table td { border: 1px solid }» ровно той же силы, что
 * и «.entry-content td», а подключается оно после темы — при равном
 * весе побеждает последний, и вокруг каждой ячейки оставалась рамка.
 */
.entry-content th,
.entry-content td,
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
	padding: 13px 16px;
	border: 0;
	border-bottom: 1px solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.entry-content th,
.entry-content .wp-block-table th {
	background: var(--paper-sunken);
	color: var(--ink);
	font-size: var(--t-label);
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	white-space: nowrap;
}

.entry-content thead th {
	border-bottom: 1px solid var(--rule);
}

.entry-content tbody tr:last-child td,
.entry-content .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Разделитель сразу после блока с собственной нижней линейкой рисует
 * вторую такую же в двадцати пикселях от первой — читается как брак
 * вёрстки. Отступ он при этом держит, ради него его обычно и ставят.
 */
.entry-content .wp-block-accordion + hr,
.entry-content .wp-block-accordion + .wp-block-separator,
.entry-content .wp-block-file + hr,
.entry-content .wp-block-file + .wp-block-separator,
.entry-content .wp-block-details + hr,
.entry-content .wp-block-details + .wp-block-separator {
	border-top: 0;
}

.entry-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--paper-sunken);
}

.entry-content .wp-block-table figcaption,
.entry-content table caption {
	margin-top: 10px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
	text-align: left;
}

/* --- Списки -------------------------------------------------------------
   Маркер бронзовый: это единственное место, где акцент помогает читать
   структуру, а не украшает. */

.entry-content ul li::marker {
	color: var(--accent);
}

.entry-content ol li::marker {
	color: var(--accent-deep);
	font-size: var(--t-sm);
}

.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
	margin-top: 0.4em;
}

/* --- Цитаты -------------------------------------------------------------- */

.entry-content .wp-block-quote,
.entry-content blockquote {
	margin: 1.6em 0;
	padding-left: 22px;
	border-left: 1px solid var(--accent);
	font-size: var(--t-lead);
}

.entry-content .wp-block-quote cite,
.entry-content blockquote cite {
	display: block;
	margin-top: 12px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
	font-style: normal;
}

.entry-content .wp-block-pullquote {
	padding: 32px 0;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	text-align: left;
}

.entry-content .wp-block-pullquote blockquote {
	padding: 0;
	border: 0;
}

.entry-content .wp-block-pullquote p {
	max-width: 34ch;
	font-family: var(--font-display);
	font-size: var(--t-subhead);
	font-weight: 400;
}

/* --- Изображения, галереи, обложка -------------------------------------- */

.entry-content .wp-block-image img,
.entry-content .wp-block-gallery img,
.entry-content .wp-block-cover,
.entry-content .wp-block-video video,
.entry-content .wp-block-embed iframe {
	border-radius: var(--radius-md);
}

.entry-content figcaption,
.entry-content .wp-element-caption {
	margin-top: 10px;
	color: var(--ink-quiet);
	font-size: var(--t-sm);
	text-align: left;
}

.entry-content .wp-block-gallery {
	gap: var(--gutter);
}

.entry-content .wp-block-media-text {
	gap: var(--gutter);
}

/* --- Колонки и группы ---------------------------------------------------- */

.entry-content .wp-block-columns {
	gap: var(--gutter);
	margin-bottom: 1.6em;
}

.entry-content .wp-block-group {
	margin-bottom: 1.6em;
}

/* --- Код ----------------------------------------------------------------- */

.entry-content code,
.entry-content kbd,
.entry-content samp {
	padding: 2px 6px;
	border-radius: var(--radius-sm);
	background: var(--paper-sunken);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.entry-content pre,
.entry-content .wp-block-code,
.entry-content .wp-block-preformatted {
	padding: 18px 20px;
	overflow-x: auto;
	border: 1px solid var(--rule);
	border-radius: var(--radius-md);
	background: var(--paper-sunken);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--t-sm);
	line-height: 1.6;
}

.entry-content pre code {
	padding: 0;
	background: none;
}

/* --- Мелкая разметка ------------------------------------------------------ */

.entry-content mark,
.entry-content .has-inline-color {
	padding: 0 3px;
	background: var(--accent-light);
	color: var(--ink);
}

.entry-content abbr[title] {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: help;
}

.entry-content del {
	color: var(--ink-quiet);
}

.entry-content sub,
.entry-content sup {
	font-size: 0.7em;
}

/* Постраничная разбивка длинной записи. */
.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--rule);
	font-size: var(--t-sm);
}

.page-links a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	color: var(--ink);
}

/* --- Поля ввода вне форм темы ---------------------------------------------
   Плагины и блоки ядра приносят свои поля. Приводим их к одной коробке:
   рамка 1px цветом линеек, радиус 2px, тот же кегль. Стрелку у select
   оставляем системную — своя рисуется только картинкой, а картинка
   не наследует цвет и при смене палитры останется прежней. */

.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="tel"],
.entry-content input[type="url"],
.entry-content input[type="search"],
.entry-content input[type="number"],
.entry-content input[type="date"],
.entry-content input[type="password"],
.entry-content textarea,
.entry-content select {
	max-width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--rule);
	border-radius: var(--radius-sm);
	background: var(--paper-raised);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--t-md);
	transition: border-color var(--speed) var(--ease);
}

.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus {
	border-color: var(--accent);
	outline: none;
}

/* Переключатели рисуем сами — по тем же причинам, что и флажки выше:
   системный вид у каждого браузера свой. Отличие одно — форма круга
   и точка вместо галочки. */
input[type="radio"] {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid var(--rule);
	border-radius: 50%;
	background: var(--paper-raised);
	cursor: pointer;
	transition: border-color var(--speed) var(--ease);
}

input[type="radio"]::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--accent-deep);
	opacity: 0;
	transition: opacity var(--speed) var(--ease);
}

input[type="radio"]:checked {
	border-color: var(--accent-deep);
}

input[type="radio"]:checked::after {
	opacity: 1;
}

@media (hover: hover) {
	input[type="radio"]:hover:not(:disabled) {
		border-color: var(--accent);
	}
}