/*
 * SolidHat — стили, которые нельзя выразить через theme.json.
 * Токены (цвета, шрифты, отступы) — в theme.json, здесь используются их CSS-переменные.
 */

/* region Каркас страницы */

:root {
	color-scheme: dark;
	--solidhat--header-offset: var(--wp-admin--admin-bar--height, 0px);

	/*
	 * Ширина контента — ступенями, как у контейнера Bootstrap старой темы
	 * (max-width контейнера минус поля 2 × 15px). Используется как contentSize в theme.json.
	 */
	--solidhat--container: 100%;
	/* Колонка col-lg-9 в ряду с отступом 20px (страницы продуктов, бывший .wrap) */
	--solidhat--narrow: var(--solidhat--container);
	/* Баннер: 11 из 12 колонок (иконка + текст), низ баннера — 9 из 12 */
	--solidhat--banner: var(--solidhat--container);
	--solidhat--banner-footer: var(--solidhat--container);
	/*
	 * Размеры заголовков (h1–h6 и «Дисплей») — как у Bootstrap старой темы при корневом шрифте 20px:
	 * от 1200px фиксированные, ниже — формула RFS Bootstrap calc(rem + vw) (без clamp).
	 */
	--solidhat--fs-display: 4.375rem;
	--solidhat--fs-1: 3.125rem;
	--solidhat--fs-2: 2.5rem;
	--solidhat--fs-3: 2.1875rem;
	--solidhat--fs-4: 1.875rem;
	--solidhat--fs-5: 1.5625rem;
	--solidhat--fs-6: 1.25rem;

	@media (max-width: 1199px) {
		--solidhat--fs-display: calc(1.84375rem + 2.7vw);
		--solidhat--fs-1: calc(1.71875rem + 1.5vw);
		--solidhat--fs-2: calc(1.65625rem + 0.9vw);
		--solidhat--fs-3: calc(1.625rem + 0.6vw);
		--solidhat--fs-4: calc(1.59375rem + 0.3vw);
	}

	/* Вертикальный отступ секций (--gap старой темы: 5rem при корневом шрифте 20px) */
	--solidhat--gap: 3.125rem;

	@media (min-width: 576px) {
		--solidhat--container: 510px;
	}

	@media (min-width: 768px) {
		--solidhat--container: 690px;
		--solidhat--gap: 6.25rem;
		/* 11 колонок по ширине сетки ряда (контейнер + отрицательные поля ряда 2 × 10px) */
		--solidhat--banner: calc((var(--solidhat--container) + 20px) * 11 / 12);
		--solidhat--banner-footer: calc((var(--solidhat--container) + 20px) * 0.75 - 20px);
	}

	@media (min-width: 992px) {
		--solidhat--container: 930px;
		--solidhat--narrow: calc((var(--solidhat--container) + 20px) * 0.75 - 20px);
	}

	@media (min-width: 1200px) {
		--solidhat--container: 1110px;
	}

	@media (min-width: 1400px) {
		--solidhat--container: 1290px;
	}
}

html {
	/* Место под полосу прокрутки всегда зарезервировано: контент не сдвигается, когда полосы нет или открыто окно */
	scrollbar-gutter: stable;
	scroll-padding-top: calc(var(--solidhat--header-offset) + var(--wp--custom--header-height));
}

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > .site-main,
.wp-site-blocks > main {
	flex-grow: 1;
}

/* Глобальный blockGap не нужен между шапкой, контентом и подвалом */
.wp-site-blocks > * {
	margin-block: 0;
}

a {
	transition: opacity var(--wp--custom--transition), color var(--wp--custom--transition), background-color var(--wp--custom--transition);

	/* Кнопки при наведении светлеют (theme.json), прозрачность у них не меняется */
	&:hover:not(.wp-element-button) {
		opacity: 0.75;
	}
}

/* Как в старой теме (theme.scss): последний абзац в контейнере оставляет небольшой отступ снизу */
.wp-block-post-content p:last-child {
	margin-block-end: 0.5rem;
}

img {
	max-width: 100%;
	height: auto;
}

/* У рядов Bootstrap не было нижнего отступа; у core/columns он есть (1.75em) и не обнуляется во flex-раскладке */
.wp-block-columns {
	margin-block-end: 0;
}

/* Картинки не сжимаются во flex-раскладках (строки «иконка + заголовок», баннер) */
.wp-block-image {
	flex-shrink: 0;
}

.text-shadow {
	--shift: 2px;
	--blur: 2px;
	--color: rgb(0 0 0 / 0.75);
	text-shadow:
		calc(-1 * var(--shift)) calc(-1 * var(--shift)) var(--blur) var(--color),
		0 calc(-1 * var(--shift)) var(--blur) var(--color),
		var(--shift) calc(-1 * var(--shift)) var(--blur) var(--color),
		var(--shift) 0 var(--blur) var(--color),
		var(--shift) var(--shift) var(--blur) var(--color),
		0 var(--shift) var(--blur) var(--color),
		calc(-1 * var(--shift)) var(--shift) var(--blur) var(--color),
		calc(-1 * var(--shift)) 0 var(--blur) var(--color);
}

/* endregion */

/* region Шапка */

.site-header-wrapper {
	position: sticky;
	top: var(--solidhat--header-offset);
	z-index: 100;

	@media (max-width: 600px) {
		top: 0;
	}
}

.site-header {
	.wp-block-site-logo img {
		height: 40px;
		width: auto;
		margin-block: 0.875rem;
	}
}

/* Специфичность выше, чем у ядра (.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content) */
.site-header .site-header__nav.wp-block-navigation {
	/* Пункты верхнего уровня — как .navbar-dark .nav-link */
	.wp-block-navigation-item__content {
		color: rgb(255 255 255 / 0.55);
		white-space: nowrap;

		/* Раскрытый пункт — как при наведении, а не как активный */
		&:hover,
		&:focus-visible,
		&[aria-expanded="true"] {
			color: rgb(255 255 255 / 0.75);
			opacity: 1;
		}
	}

	/* Активный пункт и пункт с активным вложенным */
	.current-menu-item > .wp-block-navigation-item__content,
	.current-menu-ancestor > .wp-block-navigation-item__content,
	.wp-block-navigation-item__content[aria-current="page"] {
		color: var(--wp--preset--color--white);
	}

	/* Родитель подменю — кнопка без ссылки (openSubmenusOnClick) */
	.wp-block-navigation-submenu__toggle {
		cursor: pointer;
	}

	/* Стрелка подменю — отдельный span после кнопки: красим по состоянию кнопки, а не цветом пункта */
	.wp-block-navigation__submenu-icon {
		color: rgb(255 255 255 / 0.55);
	}

	.wp-block-navigation-submenu__toggle:is(:hover, :focus-visible, [aria-expanded="true"]) + .wp-block-navigation__submenu-icon {
		color: rgb(255 255 255 / 0.75);
	}

	.current-menu-ancestor > .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--white);
	}

	/* Выпадающие подменю — как dropdown-menu-dark */
	.wp-block-navigation__submenu-container {
		background-color: #343a40 !important;
		border: 1px solid rgb(0 0 0 / 0.175) !important;
		border-radius: var(--wp--custom--radius);
		padding-block: 0.5rem;
		min-width: 12rem !important;
		margin-top: 0.125rem;

		.wp-block-navigation-item__content {
			color: #dee2e6;
			padding: 0.25rem 1rem;
			width: 100%;

			&:hover,
			&:focus-visible {
				color: var(--wp--preset--color--white);
				/* Наведение — акцент, смешанный с белым, текущая страница — чистый акцент */
				background-color: color-mix(in srgb, var(--wp--preset--color--accent) 75%, #fff);
			}
		}

		.current-menu-item > .wp-block-navigation-item__content,
		.wp-block-navigation-item__content[aria-current="page"] {
			color: var(--wp--preset--color--white);
			background-color: var(--wp--preset--color--accent);
		}
	}

	/* Мобильное меню — на весь экран: список слева, разделы с подменю — подписи групп,
	   пункты — строки с разделителями, текущая страница — полоса акцентного цвета слева */
	.wp-block-navigation__responsive-container.is-menu-open {
		--menu-gutter: var(--wp--style--root--padding-left, 0.9375rem);
		--menu-divider: rgb(255 255 255 / 0.1);
		padding: 0;

		/* Админбар на телефонах (до 600px) не закреплён и уезжает при прокрутке, а ядро всё равно
		   сдвигает меню на его полную высоту — после прокрутки оставалась пустая полоса.
		   Сдвигаем на видимую часть админбара: её измеряет view.js при открытии меню */
		@media (max-width: 600px) {
			.wp-block-navigation__responsive-dialog {
				margin-top: var(--solidhat--admin-bar-visible, 0px);
			}
		}

		/* Крестик — на месте «гамбургера» в шапке */
		.wp-block-navigation__responsive-container-close {
			top: 2rem;
			right: var(--menu-gutter);
		}

		.wp-block-navigation__responsive-container-content {
			align-items: stretch;
			padding: 5.5rem var(--menu-gutter) 2rem;
		}

		.wp-block-navigation__container {
			align-items: stretch;
			gap: 0;
			width: 100%;
		}

		.wp-block-navigation-item {
			align-items: stretch;
			width: 100%;
		}

		.wp-block-navigation-item__content {
			display: block;
			padding: 0.75rem 0;
			border-bottom: 1px solid var(--menu-divider);
			color: rgb(255 255 255 / 0.75);
			font-size: 1.125rem;
			text-align: start;
		}

		/* Раздел с подменю — подпись группы, а не кнопка: подменю в мобильном меню всегда раскрыты */
		.wp-block-navigation-submenu__toggle {
			padding: 1.5rem 0 0.375rem;
			border-bottom: 0;
			color: var(--wp--preset--color--muted);
			font-size: 0.8125rem;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			pointer-events: none;
		}

		.wp-block-navigation__submenu-icon {
			display: none;
		}

		.wp-block-navigation__submenu-container {
			gap: 0;
			width: auto;
			min-width: 0 !important;
			margin: 0;
			padding: 0 !important;
			border: 0 !important;
			border-radius: 0;
			background-color: transparent !important;

			.wp-block-navigation-item__content {
				box-sizing: border-box;
				padding: 0.75rem 0 0.75rem 1rem;
				border-bottom: 1px solid var(--menu-divider);
				color: rgb(255 255 255 / 0.75);

				&:hover,
				&:focus-visible {
					background-color: transparent;
				}
			}
		}

		/* Текущая страница (и пункт верхнего уровня, и вложенный). Подпись группы не отмечаем,
		   даже если сам раздел ссылается на текущую страницу */
		.current-menu-item > .wp-block-navigation-item__content:not(.wp-block-navigation-submenu__toggle),
		.wp-block-navigation-item__content[aria-current="page"],
		.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
			color: var(--wp--preset--color--white);
			background-color: transparent;
			box-shadow: inset 2px 0 0 var(--wp--preset--color--accent);
			padding-inline-start: 1rem;
		}

		.wp-block-navigation-item__content:hover,
		.wp-block-navigation-item__content:focus-visible {
			color: var(--wp--preset--color--white);
		}
	}
}

/* endregion */

/* region Подвал */

.site-footer__social {
	.wp-block-social-link-label {
		color: var(--wp--preset--color--white);
		font-family: var(--wp--preset--font-family--montserrat);
		font-weight: 700;
		line-height: 0.9;
	}
}

.site-footer__copyright {
	margin: 0;
}

/* endregion */

/* region Кнопки */

.wp-block-button.is-style-inverted .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-outline-ring .wp-block-button__link {
	background: transparent;
	color: inherit;
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent);
	padding-inline: 1rem;
}

/* endregion */

/* region Группы с фоном */

/*
 * Внутренний отступ группы с фоном — как в стилях блоков WordPress (wp-block-library-theme), которые
 * подключала старая тема. :where — нулевая специфичность: явные отступы блока (секции, шапка, подвал) важнее.
 */
:where(.wp-block-group.has-background) {
	padding: 1.25em 2.375em;
}

/* endregion */

/* region Таблицы */

.wp-block-table {
	td,
	th {
		border: 1px solid;
	}

	tr:nth-child(odd) td {
		background: unset;
	}
}

/* endregion */

/* region Баннер страницы (группа .solidhat-banner, паттерн solidhat/page-banner) */

.solidhat-banner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	/* #bnn1 старой темы: margin-bottom 1.5rem при корневом шрифте 20px */
	margin-block-end: 1.875rem;

	@media (max-width: 781px) {
		min-height: 0 !important;
	}

	/*
	 * В flex-колонке auto-отступы constrained-раскладки мешают растяжению, а её blockGap (margin-top детей)
	 * добавился бы к промежутку flex — в старой вёрстке между заголовком и низом баннера был только mt-5.
	 */
	& > * {
		width: 100%;
		margin-block: 0 !important;
	}
}

/* Голова баннера: справа пустая колонка, как col-md-1 в старой вёрстке */
.solidhat-banner__head {
	padding-inline-end: calc((var(--solidhat--container) + 20px) / 12);

	/* Ниже md (768px) колонки старой сетки складывались в столбец */
	@media (max-width: 767px) {
		padding-inline-end: 0;
		flex-wrap: wrap !important;
	}

	/* Иконка — в колонке шириной 1/12 сетки, текст через 10px (col-md-1 p-0 + col-md-9) */
	gap: 10px !important;

	& > .wp-block-image {
		width: calc((var(--solidhat--container) + 20px) / 12);
		text-align: center;

		/* В столбец: колонка иконки на всю строку, иконка своего размера по центру */
		@media (max-width: 767px) {
			width: 100%;
		}

		/* Своя ширина картинки (90px), но не шире колонки — как img с max-width: 100% */
		img {
			max-width: 100%;
			height: auto !important;
		}
	}

	h1 {
		margin-block-end: 0;

		/* Подзаголовок в старой вёрстке был частью h1 (отступ снизу — margin-bottom h1: 1rem при шрифте 20px) */
		.solidhat-banner & + p {
			margin-block: 0 1.25rem;
			font-family: var(--wp--preset--font-family--montserrat);
		}
	}
}

.solidhat-banner > .solidhat-banner__footer {
	max-width: var(--solidhat--banner-footer);
}

/* Плашки контактов: колонка col-lg-9, две плашки в ряд только от 1200px (col-xl-6) */
.solidhat-banner > .solidhat-banner__contacts {
	max-width: var(--solidhat--narrow);

	@media (max-width: 1199px) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* Баннер с плашками контактов: плашки сразу под заголовком (mt-5), а не прижаты к низу */
.solidhat-banner:has(> .solidhat-banner__contacts) {
	justify-content: flex-start;
}

.solidhat-contact-button .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	padding-block: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	text-transform: uppercase;

	@media (max-width: 781px) {
		height: 45px;
	}
}

.solidhat-banner__footer .wp-block-button__link,
.solidhat-banner-button .wp-block-button__link {
	text-transform: uppercase;
}

.solidhat-banner-button .wp-block-button__link {
	font-size: 2rem;
	font-weight: 700;
	/* .btn старой темы: 0.375rem при корневом шрифте 20px */
	padding-block: 0.46875rem;
}

/* endregion */

/* region Утилиты мигрированного контента */

@media (max-width: 781px) {
	.is-hidden-mobile {
		display: none !important;
	}

	.wp-block-button.wp-block-button__width-50 {
		width: 100% !important;
	}
}

@media (min-width: 782px) {
	.is-hidden-desktop {
		display: none !important;
	}
}

.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

.clear {
	clear: both;
}

/* Строка «иконка + заголовок»: текст следом идёт плотно, как в старой вёрстке */
.solidhat-icon-row + * {
	margin-block-start: 0.5rem;
}

/* Блоки с фоном без своих отступов (SUMMARY, TERMS OF PURCHASE): у ядра поля 1.25em 2.375em,
   на телефоне по бокам это почти треть ширины — уменьшаем. :where — отступы, заданные в блоке, важнее */
@media (max-width: 600px) {
	:where(.wp-block-group.has-background) {
		padding-inline: 1em;
	}
}

/* Иконка в строке «иконка + заголовок» вписывается в заданный квадрат без искажения пропорций */
.solidhat-icon-row img {
	object-fit: contain;
}

/* На телефоне иконки — одного размера и меньше (на десктопе 48–84px).
   !important — у части картинок размер задан в атрибутах блока (inline style) */
@media (max-width: 600px) {
	.solidhat-icon-row img {
		width: 3rem !important;
		height: 3rem !important;
	}
}

/* Колонка, у которой последний блок прижат к низу */
.wp-block-column.solidhat-stack {
	display: flex;
	flex-direction: column;

	& > :last-child {
		margin-block-start: auto;
	}
}

.has-inline-icon {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.outline {
	display: inline-block;

	/* Несколько рамок подряд (через <br>) — с промежутком */
	&:not(:last-child) {
		margin-block-end: 1.25rem;
	}

	padding: 0 1rem;
	border-radius: var(--wp--custom--radius);
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--accent);
	background: transparent;
	color: inherit;
	padding: 0.375em 0.75em;
}

/* endregion */

/* region Модальные окна (core/group.is-style-dialog → <dialog>) */

/*
 * Пока окно открыто, страница «заморожена» (view.js): её содержимое зафиксировано в текущем положении,
 * в документе остаётся только окно — основная полоса прокрутки прокручивает окно, а не страницу.
 * scrollbar-gutter на html держит ширину постоянной, поэтому при заморозке ничего не сдвигается.
 */
html.solidhat-page-frozen .wp-site-blocks {
	position: fixed;
	inset-inline: 0;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--solidhat--frozen-offset, 0px));
}

/*
 * Размеры и отступы — как у .modal Bootstrap старой темы (корневой шрифт был 20px):
 * окно шириной 960px прижато к верху с отступом 1.75rem (35px), на узких экранах — 10px.
 */
dialog.is-style-dialog {
	--dialog-color: var(--wp--preset--color--accent);
	--dialog-text: #34495e;
	--dialog-margin: 0.625rem;
	--dialog-inset: 2.8125rem;
	/*
	 * Сам <dialog> — прозрачный слой во всю ширину без собственной прокрутки: он стоит в документе
	 * (position: absolute, top задаёт view.js), а страница под ним заморожена — поэтому длинное окно
	 * прокручивается основной полосой. Видимое окно — .solidhat-dialog__box.
	 */
	position: absolute;
	inset: var(--solidhat--dialog-top, 0px) auto auto 0;
	width: 100%;
	height: auto;
	min-height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--wp--preset--color--white);
	overflow: visible;
	transition: opacity 0.3s ease, translate 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;

	@media (min-width: 576px) {
		--dialog-margin: 2.1875rem;
	}

	@media (min-width: 768px) {
		/* Отступ заголовка и формы слева: padding 133px шапки и тела аккордеона старой разметки */
		--dialog-inset: 8.3125rem;
	}

	/* Раскладку (колонка) задаёт .solidhat-dialog__box постоянно — при анимации закрытия она не меняется */
	&[open] {
		display: block;
	}

	/*
	 * Окно — как .modal-dialog Bootstrap: 960px вместе с внутренними отступами; сверху и снизу --dialog-margin,
	 * по бокам от 576px поля auto (на экранах уже 960px окно во всю ширину), ниже 576px — поля 10px.
	 */
	.solidhat-dialog__box {
		--dialog-side-margin: 0px;
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: min(960px, calc(100% - 2 * var(--dialog-side-margin)));
		margin: var(--dialog-margin) auto;

		@media (max-width: 575px) {
			--dialog-side-margin: 0.625rem;
		}
		padding: 0.75rem;
		border-radius: var(--wp--preset--border-radius--lg);
		background: var(--dialog-color);
	}

	/* Закрытие: окно гаснет и уходит вверх — зеркально появлению (@starting-style ниже) */
	&:not([open]) {
		opacity: 0;
		translate: 0 -3rem;
	}

	&::backdrop {
		background: rgb(0 0 0 / 0);
		transition: background-color 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
	}

	&[open]::backdrop {
		background: rgb(0 0 0 / 0.5);
	}

	@starting-style {
		&[open] {
			opacity: 0;
			translate: 0 -3rem;
		}

		&[open]::backdrop {
			background: rgb(0 0 0 / 0);
		}
	}

	.solidhat-dialog__title {
		margin: 0;
		padding: 0.1875rem 3rem 2.9375rem var(--dialog-inset);
		font-size: 1.875rem;
		font-weight: 700;
		line-height: 1;

		@media (min-width: 768px) {
			padding-block: 0.5rem 3.1875rem;
			font-size: 3rem;
		}

		/*
		 * С подзаголовком нижний отступ шапки даёт сам подзаголовок (.comment старой разметки:
		 * margin-top 15px, снизу padding 12px шапки). :has пересчитывается, когда view.js подставляет текст.
		 * Условие на диалоге двумя отдельными :has — вложенный :has() недопустим, и браузер отбросил бы правило.
		 */
		dialog:has(.solidhat-dialog__subtitle:not(:empty)):not(:has(.product-subtitle-placeholder:only-child:empty)) & {
			padding-block-end: 0;
		}
	}

	.solidhat-dialog__subtitle {
		margin: 0.9375rem 0 0.75rem;
		padding-inline-start: var(--dialog-inset);
		line-height: 1;

		@media (min-width: 768px) {
			font-size: 1.5rem;
		}

		/* Пустой подзаголовок (в том числе пустой плейсхолдер) не занимает места */
		&:empty,
		&:has(> .product-subtitle-placeholder:only-child:empty) {
			display: none;
		}
	}

	.solidhat-dialog__body {
		/* Отступ раскладки группы (blockGap) не нужен: шапку отмеряют заголовок и подзаголовок */
		margin-block-start: 0 !important;
		/* Светлая карточка: нативные элементы формы (чекбокс) — в светлой схеме */
		color-scheme: light;
		padding: 1.25rem 1.5625rem;
		border-radius: var(--wp--preset--border-radius--lg);
		background: var(--wp--preset--color--white);
		color: var(--dialog-text);

		@media (min-width: 768px) {
			padding: 1.875rem var(--dialog-inset);
		}
	}
}

.solidhat-dialog__close-form {
	position: absolute;
	inset-inline-end: 0.75rem;
	inset-block-start: 0.75rem;
	z-index: 1;
	margin: 0;
}

.solidhat-dialog__close {
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--lg);
	background: transparent;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	font-size: 0;

	/* Как .btn-close Bootstrap: крупный полупрозрачный крестик */
	opacity: 0.6;

	&::before {
		content: "✕";
		font-size: 1.75rem;
	}

	&:hover {
		opacity: 1;
	}
}

/* endregion */

/* region Формы Contact Form 7 */

.wpcf7 {
	--field-border: #545454;
	--field-text: #34495e;

	label {
		display: block;
		width: 100%;
		margin-block-end: 0.1875rem;
		font-size: 1rem;
		font-weight: 400;

		/* Поле количества с кнопками «+» / «−» — по ширине содержимого */
		&:has(.numeric-input) {
			width: fit-content;
		}
	}

	:is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=number], input[type=url], select, textarea) {
		box-sizing: border-box;
		width: 100%;
		min-height: 2.125rem;
		margin-block: 0.35rem;
		padding: 0.25rem 1.25rem;
		border: 1px solid var(--field-border);
		border-radius: 15px;
		background: transparent;
		color: var(--field-text);
		font: inherit;
		font-size: 1rem;
		outline: none;

		&:focus {
			border-color: var(--wp--preset--color--accent);
			box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
		}

		&:user-invalid {
			border-color: var(--wp--preset--color--accent);
		}
	}

	/* Кнопка по ширине текста, как в старой вёрстке (font-size 1rem при корневом шрифте 20px) */
	[type=submit] {
		max-width: 337px;
		height: 54px;
		padding-inline: 2.5rem;
		border: 0;
		border-radius: 3px;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		font: inherit;
		font-size: 1.25rem;
		font-weight: 700;
		cursor: pointer;

		/* Наведение — акцент, смешанный с белым, как у кнопок (theme.json) */
		&:hover:not(:disabled) {
			background: color-mix(in srgb, var(--wp--preset--color--accent) 85%, #fff);
		}

		/* Кнопка заблокирована, пока не отмечено согласие (CF7) или идёт отправка (view.js), — как .btn:disabled Bootstrap */
		&:disabled {
			opacity: 0.65;
			cursor: default;
		}
	}

	/* mt-3 pt-1 mb-2 старой разметки при корневом шрифте 20px */
	.submit-container {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		margin-block: 1.5625rem 0.625rem;
	}

	.wpcf7-list-item {
		margin: 0;
	}

	input[type=checkbox] {
		accent-color: var(--wp--preset--color--accent);
		width: 1em;
		height: 1em;
		vertical-align: -0.125em;
		margin-inline-end: 0.25em;
	}

	form .wpcf7-response-output {
		margin: 1em 0 0;
		padding: 0.75rem 1rem;
		/* Цвет рамки по статусу (ошибка, успех и т. п.) — из стилей Contact Form 7 */
		border-width: 1px;
		border-radius: var(--wp--custom--radius);
	}
}

/* Поле количества с кнопками «+» / «−» */
.numeric-input {
	position: relative;
	display: flex;
	align-items: center;
	width: 147px;

	input[type=number] {
		padding-inline: 2.25rem;
		text-align: center;
		appearance: textfield;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			appearance: none;
			margin: 0;
		}
	}

	.add,
	.subtract {
		position: absolute;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		margin: 2px;
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		color: var(--wp--preset--color--white);
		cursor: pointer;
		user-select: none;
	}

	.add {
		inset-inline-end: 0;
	}

	.subtract {
		inset-inline-start: 0;
	}
}

/* endregion */

/* region Карусель (core/group.is-style-carousel) */

.is-style-carousel {
	--slides: 1;
	--carousel-gap: 1.25rem;
	position: relative;

	/* Дорожка слайдов создаётся скриптом (view.js) */
	.solidhat-carousel__track {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--carousel-gap);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		& > * {
			flex: 0 0 calc((100% - (var(--slides) - 1) * var(--carousel-gap)) / var(--slides));
			margin: 0 !important;
			scroll-snap-align: start;
		}
	}

	&.is-gallery {
		@media (min-width: 600px) {
			--slides: 2.5;
		}

		img {
			width: 100%;
			height: auto;
		}
	}
}

.solidhat-carousel__nav {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 50%;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	translate: 0 -50%;

	button {
		display: grid;
		place-items: center;
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 50%;
		background: color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
		color: var(--wp--preset--color--white);
		cursor: pointer;
		pointer-events: auto;
		transition: background-color 0.3s ease;

		&:hover {
			background: var(--wp--preset--color--accent);
		}

		&::before {
			content: "";
			width: 0.6rem;
			height: 0.6rem;
			border-block-start: 2px solid;
			border-inline-end: 2px solid;
		}
	}

	.solidhat-carousel__prev::before {
		rotate: -135deg;
		margin-inline-start: 0.25rem;
	}

	.solidhat-carousel__next::before {
		rotate: 45deg;
		margin-inline-end: 0.25rem;
	}
}

.solidhat-carousel__dots {
	display: flex !important;
	justify-content: center;
	gap: 0.5rem;
	margin-block-start: 1rem;

	button {
		width: 8px;
		height: 8px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--wp--preset--color--accent);
		opacity: 0.2;
		cursor: pointer;

		&[aria-current] {
			opacity: 1;
		}
	}
}

/* endregion */

/* region Частицы (core/group.is-style-particles) */

.is-style-particles {
	position: relative;
	isolation: isolate;

	.solidhat-particles {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;

		canvas {
			pointer-events: auto;
		}
	}
}

/* endregion */

/* region Контакты: иконки и копирование */

:root {
	--solidhat--icon-scale: 1;

	@media (max-width: 781px) {
		--solidhat--icon-scale: 0.5;
	}
}

.icon {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 70px;
	/* .rounded Bootstrap */
	border-radius: var(--wp--custom--radius);
	padding: 0 26px;
	background-color: rgb(33 37 41 / 0.8);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	text-decoration: none;
	user-select: none;

	@media (max-width: 781px) {
		height: 45px;
		padding: 0 13px;
	}
}

.icon_copy,
.icon_email,
.icon_phone,
.icon_telegram {
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
}

.icon_copy {
	width: calc(37px * var(--solidhat--icon-scale));
	height: calc(37px * var(--solidhat--icon-scale));
	background-image: url(../images/icon-copy.svg);
	cursor: pointer;
}

.icon_email {
	width: calc(42px * var(--solidhat--icon-scale));
	height: calc(33px * var(--solidhat--icon-scale));
	background-image: url(../images/icon-email.svg);
}

.icon_phone {
	width: calc(39px * var(--solidhat--icon-scale));
	height: calc(50px * var(--solidhat--icon-scale));
	background-image: url(../images/icon-phone.svg);
}

.icon_telegram {
	width: calc(49px * var(--solidhat--icon-scale));

	/* Невидимая копия иконки справа — для центрирования текста плашки */
	&.is-spacer {
		visibility: hidden;
	}

	height: calc(44px * var(--solidhat--icon-scale));
	background-image: url(../images/icon-telegram.svg);
}

/* endregion */

/* region Кнопка редактирования для авторизованных (get_post_edit_button) */

.edit-holder {
	position: relative;
}

a.edit::before {
	content: "\f464";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	z-index: 4;
	display: block;
	width: 26px;
	height: 26px;
	margin: 5px;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.6);
	color: #ccc;
	font: 400 20px/26px dashicons;
	text-align: center;
	transition: background 0.15s ease;
}

a.edit:hover::before {
	background: rgb(0 0 0 / 0.3);
	color: var(--wp--preset--color--white);
}

/* endregion */