/*
Theme Name: The PET
Theme URI: https://thepet.kyiv.ua
Author: Flesherovska
Author URI: https://www.instagram.com/flesherovska.dsgn/
Description: Блочна тема для сайту грумінг-салону The PET.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thepet
*/

/* ==========================================================================
   Токены. Макет — 1920×1080; --u = 1px макета, масштабируется с шириной
   контейнера страницы (до 1920 — пропорционально, шире — 1:1).
   cqw считается от .wp-site-blocks (фронт) / .is-root-container (редактор) —
   без полосы прокрутки и по реальной ширине канваса.
   ========================================================================== */
.wp-site-blocks,
.is-root-container {
	container-type: inline-size;
}

:root {
	--u: min(calc(100cqw / 1920), 1px);

	/* Hero */
	--hero-pad: calc(40 * var(--u));
	--hero-min-h: calc(1080 * var(--u));
	--hero-content-top: calc(110 * var(--u));
	/* от низа хедера до H1 (236 - 126) */
	--hero-content-w: calc(877 * var(--u));
	--hero-title-w: calc(987 * var(--u));
	--hero-subtitle-w: calc(672 * var(--u));
	--hero-title-gap: calc(15 * var(--u));
	--hero-buttons-top: calc(40 * var(--u));
	--hero-photo-w: calc(1010 * var(--u));
	--hero-ellipse-w: calc(1035 * var(--u));
	--hero-ellipse-top: calc(228 * var(--u));
	--hero-ellipse-right: calc(-70 * var(--u));

	--fs-nav: max(calc(18 * var(--u)), 14px);
	--fs-title: max(calc(84 * var(--u)), 40px);
	--fs-subtitle: max(calc(24 * var(--u)), 16px);
	--fs-btn: max(calc(20 * var(--u)), 15px);
	--fs-stat-num: max(calc(64 * var(--u)), 36px);
	--fs-stat-label: max(calc(20 * var(--u)), 14px);
	--tracking: -0.04em;

	/* Header */
	--header-h: max(calc(86 * var(--u)), 64px);
	--header-px: calc(30 * var(--u));
	--nav-gap: calc(25 * var(--u));
	--actions-gap: calc(20 * var(--u));
	--social-gap: calc(10 * var(--u));
	--logo-w: max(calc(192 * var(--u)), 130px);
	--icon-btn: max(calc(47 * var(--u)), 40px);
	/* 14 + 20 + 13, обводка внутри */
	--call-w: max(calc(210 * var(--u)), 140px);
	--call-h: max(calc(52 * var(--u)), 42px);

	/* Buttons */
	--btn-w: max(calc(216 * var(--u)), 150px);
	--btn-h: max(calc(60 * var(--u)), 46px);
	--btn-gap: calc(15 * var(--u));

	/* Stats */
	--stats-gap: calc(15 * var(--u));
	--stat-w: max(calc(273 * var(--u)), 160px);
	--stat-h: max(calc(175 * var(--u)), 120px);
	--stat-pad: max(calc(20 * var(--u)), 14px);
}

/* Телефон: макет iPhone шириной 402. --mu = 1px этого макета
   (на широких телефонах не больше 1.25px, дальше блок просто центрируется). */
@media (max-width: 781px) {
	:root {
		--mu: min(calc(100cqw / 402), 1.25px);
		--m-hero-pad-top: calc(20 * var(--mu));
		--m-hero-pad-x: calc(10 * var(--mu));
		--m-header-h: max(calc(50 * var(--mu)), 46px);
		--m-header-px: calc(20 * var(--mu));
	}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: var(--hero-min-h);
	padding: var(--hero-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

/* Сброс flow-отступов WP (в редакторе хедер получает margin-block-start как «второй» ребёнок) */
.hero.hero>*,
.hero figure,
.hero p,
.hero h1 {
	margin: 0;
}

.hero .hero__ellipse {
	position: absolute;
	top: var(--hero-ellipse-top);
	right: var(--hero-ellipse-right);
	width: var(--hero-ellipse-w);
	z-index: 0;
	pointer-events: none;
}

.hero .hero__ellipse img {
	display: block;
	width: 100%;
	height: auto;
}

/* Header ------------------------------------------------------------------ */
:is(.hero, .site-top) .site-header {
	position: relative;
	z-index: 1;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--actions-gap);
	height: var(--header-h);
	padding: 0 var(--header-px);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
}

:is(.hero, .site-top) .site-header__logo {
	flex-shrink: 0;
}

:is(.hero, .site-top) .site-header__logo img {
	display: block;
	width: var(--logo-w);
	height: auto;
}

:is(.hero, .site-top) .site-header__nav {
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--nav-gap);
	font-size: var(--fs-nav);
	line-height: normal;
	white-space: nowrap;
}

:is(.hero, .site-top) .site-header__nav a {
	position: relative;
	color: inherit;
	text-decoration: none;
}

/* Подчёркивание: появляется слева направо и уходит тоже вправо */
:is(.hero, .site-top) .site-header__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

:is(.hero, .site-top) .site-header__nav a:hover::after,
:is(.hero, .site-top) .site-header__nav a:focus-visible::after {
	transform: scaleX(1);
	transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
	:is(.hero, .site-top) .site-header__nav a::after {
		transition: none;
	}
}

:is(.hero, .site-top) .site-header__actions {
	flex-wrap: nowrap;
	gap: var(--actions-gap);
	flex-shrink: 0;
}

:is(.hero, .site-top) .social-icons {
	flex-wrap: nowrap;
	gap: var(--social-gap);
}

:is(.hero, .site-top) .icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-btn);
	height: var(--icon-btn);
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--navy);
	border-radius: 26px;
	overflow: hidden;
	transition: background-color .2s;
}

:is(.hero, .site-top) .icon-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

:is(.hero, .site-top) .icon-btn img {
	display: block;
	transition: filter .2s;
}

:is(.hero, .site-top) .icon-btn:hover {
	background: var(--wp--preset--color--navy);
}

:is(.hero, .site-top) .icon-btn:hover img {
	filter: brightness(0) invert(1);
}

/* Бургер (добавляет mobile-menu.js) — виден только на телефоне */
.site-header__burger {
	display: none;
}

/* Buttons ----------------------------------------------------------------- */
:is(.hero, .site-top) .wp-block-buttons {
	gap: var(--btn-gap);
}

:is(.hero, .site-top) .btn .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-w);
	height: var(--btn-h);
	padding: 0 calc(26 * var(--u));
	box-sizing: border-box;
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--card);
	font-family: inherit;
	font-size: var(--fs-btn);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	white-space: nowrap !important;
	/* RichText в редакторе ставит inline pre-wrap */
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

:is(.hero, .site-top) .btn--solid .wp-block-button__link {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

:is(.hero, .site-top) .btn--solid .wp-block-button__link:hover {
	background: #1a2944;
	border-color: #1a2944;
}

:is(.hero, .site-top) .btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	letter-spacing: var(--tracking);
}

:is(.hero, .site-top) .btn--outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

:is(.hero, .site-top) .btn--pill .wp-block-button__link {
	width: var(--call-w);
	height: var(--call-h);
	border-radius: var(--wp--custom--radius--pill);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: normal;
}

/* Content ----------------------------------------------------------------- */
.hero .hero__content {
	position: relative;
	z-index: 3;
	width: var(--hero-content-w);
	max-width: 100%;
	margin-top: var(--hero-content-top);
	margin-bottom: max(calc(40 * var(--u)), 24px);
	/* зазор до карточек, если контент выше min-height */
}

.hero .hero__title {
	width: var(--hero-title-w);
	/* в макете H1 шире контейнера (987 > 877) */
	max-width: calc(100vw - 2 * var(--hero-pad));
	font-size: var(--fs-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: .95;
	letter-spacing: var(--tracking);
}

.hero .hero__subtitle {
	max-width: var(--hero-subtitle-w);
	margin-top: var(--hero-title-gap);
	font-size: var(--fs-subtitle);
	line-height: 1;
	letter-spacing: var(--tracking);
}

.hero .hero__buttons {
	margin-top: var(--hero-buttons-top);
}

/* Photo ------------------------------------------------------------------- */
.hero .hero__photo {
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--hero-photo-w);
	z-index: 2;
	pointer-events: none;
	/* фото перекрывает низ хедера — клики проходят сквозь */
}

.hero .hero__photo picture {
	display: block;
}

.hero .hero__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Stats ------------------------------------------------------------------- */
.hero .hero__stats {
	position: relative;
	z-index: 3;
	flex-wrap: nowrap;
	gap: var(--stats-gap);
	margin-top: auto;
}

.hero .stat-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: var(--stat-w);
	height: var(--stat-h);
	padding: var(--stat-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
}

.hero .stat-card__number {
	font-size: var(--fs-stat-num);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: var(--tracking);
}

.hero .stat-card__unit {
	font-size: .75em;
}

/* 48 / 64 */

.hero .stat-card__label {
	font-size: var(--fs-stat-label);
	line-height: .9;
	letter-spacing: var(--tracking);
}

/* Планшет: навигация уходит второй строкой -------------------------------- */
@media (max-width: 1100px) {
	:is(.hero, .site-top) .site-header {
		z-index: 3;
		/* хедер стал выше — фото больше не должно на него заходить */
		flex-wrap: wrap;
		height: auto;
		padding: 12px 20px;
		row-gap: 10px;
	}

	:is(.hero, .site-top) .site-header__nav {
		order: 3;
		flex-basis: 100%;
		flex-wrap: wrap;
		row-gap: 6px;
	}
}

/* Мобилка (макет Figma «iPhone 16 & 17 Pro», 402px) ------------------------
   Всё ниже — только ≤781px, ПК и планшет не затрагиваются.
   Порядок: шапка-плашка с бургером → заголовок и кнопки по центру →
   эллипс + фото → три карточки в ряд поверх низа фото. */
@media (max-width: 781px) {
	.hero {
		min-height: 0;
		padding: var(--m-hero-pad-top) var(--m-hero-pad-x) calc(10 * var(--mu));
	}

	/* Шапка ---------------------------------------------------------------- */
	/* без JS: логотип, под ним меню и кнопки (как на планшете) */
	:is(.hero, .site-top) .site-header {
		min-height: var(--m-header-h);
		padding: 10px var(--m-header-px);
		column-gap: 14px;
		border-radius: max(calc(20 * var(--mu)), 16px);
	}

	:is(.hero, .site-top) .site-header__logo img {
		width: max(calc(114 * var(--mu)), 100px);
	}

	:is(.hero, .site-top) .site-header__nav {
		gap: 8px 18px;
	}

	:is(.hero, .site-top) .site-header__actions {
		gap: 8px;
	}

	:is(.hero, .site-top) .social-icons {
		gap: 8px;
	}

	:is(.hero, .site-top) .icon-btn {
		width: 44px;
		height: 44px;
	}

	:is(.hero, .site-top) .btn--pill .wp-block-button__link {
		width: auto;
		height: 44px;
		padding: 0 22px;
		font-size: 15px;
	}

	/* с JS: белая плашка 50px поверх блока, меню прячется в бургер */
	:is(.hero, .site-top).has-mobile-menu {
		padding-top: calc(var(--m-hero-pad-top) + var(--m-header-h));
	}

	:is(.hero, .site-top) .site-header.is-menu-ready {
		position: absolute;
		top: var(--m-hero-pad-top);
		left: var(--m-hero-pad-x);
		right: var(--m-hero-pad-x);
		z-index: 20;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: var(--m-header-h);
		align-items: center;
		gap: 0 12px;
		height: auto;
		min-height: 0;
		padding: 0 var(--m-header-px);
		transition: box-shadow .3s;
	}

	.site-header.is-menu-ready .site-header__logo {
		grid-row: 1;
		grid-column: 1;
	}

	.site-header.is-menu-ready .site-header__burger {
		grid-row: 1;
		grid-column: 2;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		/* линии бургера — в 20px от края плашки, как в макете */
		margin-right: -10px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: none;
		color: var(--wp--preset--color--navy);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__burger:focus-visible {
		outline: 2px solid var(--wp--preset--color--navy);
		outline-offset: 2px;
	}

	/* три линии 25px, шаг 6px (макет); при открытии — крестик */
	.site-header__burger-lines,
	.site-header__burger-lines::before,
	.site-header__burger-lines::after {
		display: block;
		width: 25px;
		height: 2px;
		background: currentColor;
		transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .2s;
	}

	.site-header__burger-lines {
		position: relative;
	}

	.site-header__burger-lines::before,
	.site-header__burger-lines::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.site-header__burger-lines::before {
		top: -6px;
	}

	.site-header__burger-lines::after {
		top: 6px;
	}

	.site-header.is-open .site-header__burger-lines {
		background-color: transparent;
	}

	.site-header.is-open .site-header__burger-lines::before {
		transform: translateY(6px) rotate(45deg);
	}

	.site-header.is-open .site-header__burger-lines::after {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* выпадающая часть: пункты меню столбиком, ниже соцсети и «Подзвонити» */
	.site-header.is-menu-ready .site-header__nav,
	.site-header.is-menu-ready .site-header__actions {
		display: none;
		grid-column: 1 / -1;
	}

	.site-header.is-menu-ready .site-header__nav {
		grid-row: 2;
	}

	.site-header.is-menu-ready .site-header__actions {
		grid-row: 3;
	}

	.site-header.is-menu-ready.is-open {
		box-shadow: 0 16px 40px rgba(36, 56, 91, .18);
	}

	.site-header.is-menu-ready.is-open .site-header__nav {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 20px 0 22px;
		border-top: 1px solid rgba(36, 56, 91, .12);
		font-size: 18px;
		white-space: normal;
		animation: menu-in .35s cubic-bezier(.22, 1, .36, 1) both;
	}

	.site-header.is-menu-ready.is-open .site-header__actions {
		display: flex;
		align-items: center;
		gap: 8px;
		padding-bottom: 20px;
		animation: menu-in .35s cubic-bezier(.22, 1, .36, 1) .05s both;
	}

	.site-header.is-menu-ready.is-open .site-header__actions .wp-block-buttons {
		flex: 1;
	}

	.site-header.is-menu-ready.is-open .site-header__actions .wp-block-button {
		width: 100%;
	}

	.site-header.is-menu-ready.is-open .btn--pill .wp-block-button__link {
		width: 100%;
	}

	@keyframes menu-in {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}

	/* Текст и кнопки ------------------------------------------------------- */
	.hero .hero__content {
		width: 100%;
		margin: calc(40 * var(--mu)) 0 0;
		text-align: center;
	}

	/* заголовку разрешено занять всю ширину экрана (в макете он почти во всю ширину) */
	.hero .hero__title {
		width: auto;
		max-width: none;
		margin-inline: calc(-1 * var(--m-hero-pad-x));
		font-size: max(calc(34.435 * var(--mu)), 26px);
		line-height: .95;
		text-wrap: balance;
	}

	.hero .hero__subtitle {
		max-width: calc(334 * var(--mu));
		margin: calc(21 * var(--mu)) auto 0;
		font-size: max(calc(14 * var(--mu)), 13px);
		line-height: 1;
	}

	.hero .hero__buttons {
		flex-wrap: nowrap;
		justify-content: center;
		gap: calc(10.6 * var(--mu));
		margin-top: calc(15 * var(--mu));
	}

	.hero .hero__buttons .btn .wp-block-button__link {
		width: calc(147.6 * var(--mu));
		min-width: max-content;
		height: max(calc(41 * var(--mu)), 40px);
		padding: 0 12px;
		border-width: 1px;
		border-radius: var(--wp--custom--radius--pill);
		font-size: max(calc(13.667 * var(--mu)), 13px);
	}

	/* Эллипс и фото: привязаны к низу блока, поэтому всегда стоят за карточками */
	.hero .hero__ellipse {
		top: auto;
		right: auto;
		bottom: calc(-52 * var(--mu));
		left: 50%;
		width: calc(493 * var(--mu));
		height: calc(524 * var(--mu));
		margin-left: calc(-247 * var(--mu));
		border-radius: 50%;
		background: var(--wp--preset--color--navy);
		filter: blur(1px);
	}

	.hero .hero__ellipse img {
		display: none;
	}

	.hero .hero__photo {
		right: auto;
		bottom: calc(-82 * var(--mu));
		left: 50%;
		width: calc(487 * var(--mu));
		margin-left: calc(-247 * var(--mu));
	}

	/* Карточки: три в ряд, зазор 2px, чуть шире полей блока (394 из 402) */
	.hero .hero__stats {
		flex-wrap: nowrap;
		align-self: center;
		gap: 2px;
		width: calc(394 * var(--mu));
		margin-top: calc(420 * var(--mu));
	}

	.hero .stat-card {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
		height: auto;
		min-height: calc(81.6 * var(--mu));
		gap: 8px;
		padding: max(calc(9.33 * var(--mu)), 8px);
		border-radius: calc(14 * var(--mu));
	}

	.hero .stat-card__number {
		font-size: max(calc(29.85 * var(--mu)), 25px);
	}

	.hero .stat-card__label {
		font-size: max(calc(9.33 * var(--mu)), 9px);
	}
}

@media (max-width: 781px) and (prefers-reduced-motion: reduce) {

	.site-header.is-menu-ready.is-open .site-header__nav,
	.site-header.is-menu-ready.is-open .site-header__actions {
		animation: none;
	}

	.site-header__burger-lines,
	.site-header__burger-lines::before,
	.site-header__burger-lines::after {
		transition: none;
	}
}

/* ==========================================================================
   Блок «Про нас» (Figma 148:2, макет 1920×1395).
   Вводный текст справа, слева фото, справа четыре карточки в две колонки
   (правая колонка сдвинута вниз). Размеры — в --u (1px макета), как в hero.
   ========================================================================== */
:root {
	--about-pad-top: calc(110 * var(--u));
	--about-pad-x: calc(40 * var(--u));
	--about-pad-bottom: calc(42 * var(--u));
	--about-lead-gap: calc(200 * var(--u));
	/* от текста до фото */

	--about-photo-w: calc(823 * var(--u));
	--about-photo-radius: calc(40 * var(--u));
	--about-grid-gap: calc(107 * var(--u));
	/* между фото и карточками */

	--about-card-w: calc(440 * var(--u));
	--about-card-h: calc(325 * var(--u));
	--about-card-gap: calc(30 * var(--u));
	--about-card-pad: calc(30 * var(--u));
	--about-card-text-gap: calc(20 * var(--u));
	/* заголовок → описание */
	--about-cards-top: calc(24 * var(--u));
	/* левая колонка от верха фото */
	--about-col-shift: calc(95 * var(--u));
	/* правая колонка ниже левой */
	--about-icon: calc(50 * var(--u));

	--fs-about-lead: max(calc(62 * var(--u)), 28px);
	--fs-card-title: max(calc(32 * var(--u)), 20px);
	--fs-card-text: max(calc(20 * var(--u)), 14px);
}

.about {
	box-sizing: border-box;
	padding: var(--about-pad-top) var(--about-pad-x) var(--about-pad-bottom);
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

/* Сброс flow-отступов WP внутри блока (в редакторе они вылезают у «вторых» детей) */
.about.about>*,
.about .about__grid>*,
.about .about__cards>*,
.about .about__col>*,
.about .about-card>*,
.about .about-card__text>*,
.about figure,
.about p,
.about h3 {
	margin-block: 0;
}

/* Вводный текст ----------------------------------------------------------- */
.about .about__lead {
	margin-bottom: var(--about-lead-gap);
	font-size: var(--fs-about-lead);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.065;
	letter-spacing: var(--tracking);
	text-align: right;
	padding-right: .04em;
	/* браузер добавляет отрицательный letter-spacing и после последней буквы строки — компенсируем */
}

/* Фото + карточки ---------------------------------------------------------- */
.about .about__grid {
	display: flex;
	align-items: flex-start;
	gap: var(--about-grid-gap);
}

.about .about__photo {
	flex: 0 0 var(--about-photo-w);
	width: var(--about-photo-w);
}

.about .about__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	/* место под фото резервируется до загрузки — без «прыжков» */
	object-fit: cover;
	border-radius: var(--about-photo-radius);
}

.about .about__cards {
	display: flex;
	align-items: flex-start;
	gap: var(--about-card-gap);
	margin-top: var(--about-cards-top);
}

.about .about__col {
	display: flex;
	flex-direction: column;
	gap: var(--about-card-gap);
}

.about .about__cards>.about__col+.about__col {
	margin-top: var(--about-col-shift);
}

/* Карточка: иконка сверху, текст прижат к низу ----------------------------- */
.about .about-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-sizing: border-box;
	width: var(--about-card-w);
	min-height: var(--about-card-h);
	padding: var(--about-card-pad);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
}

.about .about-card__icon {
	flex-shrink: 0;
	width: var(--about-icon);
	height: var(--about-icon);
}

.about .about-card__icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.about .about-card__text {
	display: flex;
	flex-direction: column;
	gap: var(--about-card-text-gap);
}

.about .about-card__title {
	max-width: 10.6em;
	/* даёт те же переносы, что в макете («Без седації та / жорсткої фіксації») */
	font-size: var(--fs-card-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: var(--tracking);
}

.about .about-card__desc {
	font-size: var(--fs-card-text);
	line-height: .9;
	letter-spacing: var(--tracking);
}

/* Планшет: фото сверху, карточки двумя колонками под ним ------------------- */
@media (max-width: 1100px) {
	.about .about__grid {
		flex-direction: column;
		gap: 24px;
	}

	.about .about__photo {
		flex-basis: auto;
		width: 100%;
	}

	.about .about__cards {
		width: 100%;
		margin-top: 0;
		gap: 16px;
	}

	.about .about__col {
		flex: 1 1 0;
		min-width: 0;
		gap: 16px;
	}

	.about .about__cards>.about__col+.about__col {
		margin-top: 0;
	}

	.about .about-card {
		width: auto;
		min-height: 0;
		gap: 32px;
		padding: 24px;
	}

	.about .about-card__icon {
		width: 44px;
		height: 44px;
	}

	.about .about-card__text {
		gap: 12px;
	}
}

/* Мобилка: одна колонка ---------------------------------------------------- */
@media (max-width: 781px) {
	.about {
		padding: 56px 16px 32px;
	}

	.about .about__lead {
		margin-bottom: 32px;
		text-align: left;
	}

	.about .about__cards {
		flex-direction: column;
	}

	.about .about__col {
		width: 100%;
	}

	.about .about__photo img {
		border-radius: 24px;
	}
}

.hero+.about {
	margin-block-start: 0;
}

/* Лёгкий подъём карточек «Про нас» при наведении */
:root {
	--about-card-lift: max(calc(6 * var(--u)), 4px);
}

.about .about-card {
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
	.about .about-card:hover {
		transform: translateY(calc(-1 * var(--about-card-lift)));
		box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(36, 56, 91, .12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.about .about-card {
		transition: none;
	}
}

/* ==========================================================================
   Блок «Популярні послуги» (Figma 109:27, макет 1920 шириной).
   Сетка 3 колонки: слева и по центру по две карточки (565 + 513),
   справа высокая карточка PREMIUM на две строки (1108).
   Фото — вырезанные PNG → WebP, обрезанные по рамке слоя в макете;
   позиция/ширина задаются в % от ширины карточки (590 = 100%),
   поэтому пропорции сохраняются на любой ширине.
   ========================================================================== */
:root {
	--srv-pad-top: calc(120 * var(--u));
	--srv-pad-x: calc(40 * var(--u));
	--srv-pad-bottom: calc(96 * var(--u));
	--srv-head-gap: calc(100 * var(--u));
	/* низ заголовка → карточки */
	--srv-subtitle-top: calc(31 * var(--u));
	/* 74 - 43 */
	--srv-subtitle-w: calc(379 * var(--u));
	--srv-gap: calc(30 * var(--u));
	--srv-row-1: calc(565 * var(--u));
	--srv-row-2: calc(513 * var(--u));
	--srv-card-pad: max(calc(35 * var(--u)), 20px);

	--fs-srv-title: max(calc(96 * var(--u)), 40px);
	--fs-srv-subtitle: max(calc(18 * var(--u)), 14px);
	--fs-srv-card-title: max(calc(24 * var(--u)), 19px);
	--fs-srv-card-text: max(calc(18 * var(--u)), 14px);

	--chip-w: max(calc(176 * var(--u)), 136px);
	--chip-h: max(calc(46 * var(--u)), 40px);
	--chip-px: max(calc(20 * var(--u)), 16px);
	--chip-arrow: max(calc(16 * var(--u)), 14px);
}

.services {
	box-sizing: border-box;
	padding: var(--srv-pad-top) var(--srv-pad-x) var(--srv-pad-bottom);
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.about+.services {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.services.services>*,
.services .services__head>*,
.services .services__grid>*,
.services .service-card>*,
.services figure,
.services p,
.services h2,
.services h3 {
	margin-block: 0;
}

/* Заголовок ---------------------------------------------------------------- */
.services .services__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--srv-gap);
	margin-bottom: var(--srv-head-gap);
}

.services .services__title {
	font-size: var(--fs-srv-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.services .services__subtitle {
	flex: 0 1 var(--srv-subtitle-w);
	margin-top: var(--srv-subtitle-top);
	font-size: var(--fs-srv-subtitle);
	line-height: 1;
	letter-spacing: -0.02em;
	text-align: right;
}

/* Сетка -------------------------------------------------------------------- */
.services .services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: var(--srv-row-1) var(--srv-row-2);
	grid-template-areas:
		"shedding spa  premium"
		"teeth    all  premium";
	gap: var(--srv-gap);
}

.services .service-card--shedding {
	grid-area: shedding;
}

.services .service-card--spa {
	grid-area: spa;
}

.services .service-card--teeth {
	grid-area: teeth;
}

.services .service-card--all {
	grid-area: all;
}

.services .service-card--premium {
	grid-area: premium;
}

/* Карточка ----------------------------------------------------------------- */
.services .service-card {
	/* Фото: ширина и сдвиг вправо в % от ширины карточки, пропорции файла */
	--img-w: 73.05%;
	--img-right: 0%;
	--img-ratio: 431 / 577;
	--img-k: 1;
	/* коэффициент уменьшения фото на планшете/мобилке */
	--desc-w: 12.45em;
	/* ширина описания из макета, в em — растёт вместе с шрифтом */

	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: var(--srv-card-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--pink);
	border-radius: var(--wp--custom--radius--card);
	isolation: isolate;
}

.services .service-card--spa {
	--img-w: 70.51%;
	--img-ratio: 416 / 537;
	--desc-w: 14.1em;
}

.services .service-card--teeth {
	--img-w: 68.64%;
	--img-right: -3.22%;
	--img-ratio: 405 / 543;
	--desc-w: 10.1em;
}

.services .service-card--all {
	--img-w: 91.19%;
	--img-right: -5.08%;
	--img-ratio: 538 / 571;
}

.services .service-card--premium {
	--img-w: 108.47%;
	--img-right: -8.47%;
	--img-ratio: 640 / 951;
	--desc-w: 16.45em;
}

/* фото обрезано по краю макета: 640 из 664 */

.services .service-card__img {
	position: absolute;
	right: calc(var(--img-right) * var(--img-k));
	bottom: 0;
	z-index: -1;
	width: calc(var(--img-w) * var(--img-k));
	pointer-events: none;
}

.services .service-card__img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--img-ratio);
	/* место резервируется до загрузки */
	object-fit: cover;
}

.services .service-card__title {
	font-size: var(--fs-srv-card-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.services .service-card--all .service-card__title {
	max-width: 8.3em;
}

/* 199px макета */

.services .service-card__desc {
	max-width: var(--desc-w);
	margin-top: calc(10 * var(--u));
	font-size: var(--fs-srv-card-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

.services .service-card__price {
	margin-top: max(calc(13 * var(--u)), 10px);
	font-size: var(--fs-srv-card-text);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.02em;
}

.services .service-card .service-card__buttons {
	margin-top: max(calc(25 * var(--u)), 16px);
}

/* Кнопка-«чип»: белая пилюля, текст + лапка ---------------------------- */
.services .btn-chip .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: var(--chip-w);
	height: var(--chip-h);
	padding: 0 var(--chip-px);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	font-family: inherit;
	font-size: var(--fs-srv-card-text);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	white-space: nowrap !important;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.services .btn-chip .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: var(--chip-arrow);
	height: var(--chip-arrow);
	background: currentColor;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.services .btn-chip .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.services .btn-chip .wp-block-button__link:hover::after {
	transform: rotate(-15deg) scale(1.1);
}

/* Лёгкий подъём карточки, как в «Про нас» */
.services .service-card {
	transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
	.services .service-card:hover {
		transform: translateY(calc(-1 * max(calc(6 * var(--u)), 4px)));
		box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(36, 56, 91, .12);
	}
}

@media (prefers-reduced-motion: reduce) {

	.services .service-card,
	.services .btn-chip .wp-block-button__link::after {
		transition: none;
	}
}

/* Планшет: 2 колонки, PREMIUM справа на две строки, «Всі послуги» внизу ---- */
@media (max-width: 1100px) {
	.services {
		padding: 72px 24px 56px;
	}

	.services .services__head {
		flex-direction: column;
		gap: 12px;
		margin-bottom: 32px;
	}

	.services .services__subtitle {
		flex-basis: auto;
		max-width: 420px;
		margin-top: 0;
		text-align: left;
	}

	.services .services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		grid-auto-rows: auto;
		grid-template-areas:
			"shedding spa"
			"teeth    premium"
			"all      premium";
		gap: 16px;
	}

	.services .service-card {
		aspect-ratio: 590 / 565;
		--img-k: .8;
	}

	/* шрифты тут крупнее макетных — фото меньше, чтобы не наезжало на текст */
	.services .service-card--premium {
		aspect-ratio: auto;
		--img-k: 1;
	}
}

/* Мобилка: одна колонка ---------------------------------------------------- */
@media (max-width: 781px) {

	/* отступ сверху −15% (было 64): вместе с низом «Про нас» 82 вместо 96 */
	.services {
		padding: 50px 16px 48px;
	}

	/* строки заголовка ближе друг к другу — читается как одна фраза */
	.services .services__title {
		line-height: 1.05;
	}

	.services .services__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: none;
		gap: 12px;
	}

	.services .service-card {
		grid-area: auto;
		aspect-ratio: 590 / 600;
		--img-k: .82;
	}

	.services .service-card--premium {
		aspect-ratio: 590 / 1080;
		--img-k: .85;
	}

	/* у фото чау-чау левый край обрезан — прижимаем его к левому краю карточки,
	   срез совпадает с краем, низ аккуратно уходит в скругление */
	.services .service-card--premium .service-card__img {
		right: auto;
		left: 0;
	}

	.services .service-card__desc {
		max-width: min(var(--desc-w), 55%);
	}
}

/* ==========================================================================
   Блок «Галерея робіт» (Figma 168:46, макет 1920 шириной).
   Десктоп: сетка 4×2, карточки 450×580, зазор 13.
   ≤1100px: одна строка с горизонтальным скроллом (scroll-snap, без JS).
   Пока фото нет — розовые плейсхолдеры; фото ложится внутрь через object-fit.
   ========================================================================== */
:root {
	--gal-pad-top: calc(96 * var(--u));
	--gal-pad-x: calc(40 * var(--u));
	--gal-pad-bottom: calc(96 * var(--u));
	--gal-head-gap: calc(100 * var(--u));
	/* низ заголовка → карточки */
	--gal-gap: max(calc(13 * var(--u)), 8px);
	--gal-radius: max(calc(46 * var(--u)), 24px);

	--fs-gal-title: max(calc(96 * var(--u)), 40px);
}

.gallery {
	position: relative;
	isolation: isolate;
	/* z-index оверлея и карточек не выходит за секцию */
	box-sizing: border-box;
	padding: var(--gal-pad-top) var(--gal-pad-x) var(--gal-pad-bottom);
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.services+.gallery {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.gallery.gallery>*,
.gallery .gallery__grid>*,
.gallery figure,
.gallery h2 {
	margin-block: 0;
}

/* Заголовок ---------------------------------------------------------------- */
.gallery .gallery__title {
	margin-bottom: var(--gal-head-gap);
	font-size: var(--fs-gal-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

/* Сетка -------------------------------------------------------------------- */
.gallery .gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gal-gap);
}

/* Карточка: розовая подложка видна, пока фото грузится */
.gallery .gallery__item {
	position: relative;
	z-index: 0;
	overflow: hidden;
	aspect-ratio: 450 / 580;
	margin: 0;
	background: var(--wp--preset--color--pink);
	border-radius: var(--gal-radius);
}

.gallery .gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hover (десктоп-сетка, мышь): карточка увеличивается, фон за сеткой темнеет */
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
	.gallery .gallery__grid {
		position: relative;
		/* опора для затемнения */
	}

	/* Затемнение: по высоте — ровно сетка карточек, по ширине — вся секция */
	.gallery .gallery__grid::before {
		content: "";
		position: absolute;
		inset: 0 calc(-1 * var(--gal-pad-x));
		z-index: 1;
		background: rgb(0 0 0 / .15);
		opacity: 0;
		pointer-events: none;
		/* задержка на затухание — нет мигания при переходе между карточками */
		transition: opacity .35s ease .1s;
	}

	.gallery .gallery__grid:has(.gallery__item:hover)::before {
		opacity: 1;
		transition-delay: 0s;
	}

	.gallery .gallery__item {
		transition:
			transform .5s cubic-bezier(.22, 1, .36, 1),
			box-shadow .5s cubic-bezier(.22, 1, .36, 1),
			z-index 0s linear .5s;
		/* уходит под затемнение только после уменьшения */
	}

	.gallery .gallery__item:hover {
		z-index: 2;
		transform: scale(1.08);
		box-shadow: 0 max(calc(12 * var(--u)), 6px) max(calc(40 * var(--u)), 20px) rgb(36 56 91 / .12);
		transition-delay: 0s;
	}
}

@media (min-width: 1101px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {

	.gallery .gallery__grid::before,
	.gallery .gallery__item {
		transition: none;
	}

	.gallery .gallery__item:hover {
		transform: none;
		/* без увеличения — остаётся только затемнение фона */
	}
}

/* Планшет: одна строка, листается пальцем, видно ~2.5 карточки ------------- */
@media (max-width: 1100px) {
	.gallery {
		padding: 48px 0 56px;
	}

	.gallery .gallery__title {
		margin-bottom: 32px;
		padding-inline: 24px;
	}

	.gallery .gallery__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: 38%;
		gap: 12px;
		padding: 0 24px 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 24px;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--navy) transparent;
	}

	.gallery .gallery__item {
		scroll-snap-align: start;
	}
}

/* Мобилка: видно одну карточку и край следующей --------------------------- */
@media (max-width: 781px) {
	.gallery {
		padding: 40px 0 48px;
	}

	.gallery .gallery__title {
		padding-inline: 16px;
	}

	.gallery .gallery__grid {
		grid-auto-columns: 78%;
		gap: 10px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}
}

/* ==========================================================================
   Блок-призыв «Давайте створимо красу» (Figma 169:50, макет 1920×804).
   Розовая карточка 1840×540; хаски выступает над карточкой на 131
   (ровно на верхний отступ секции), мальтипу перед ним.
   Фото позиционируются в % от ширины карточки (1840 = 100%).
   ========================================================================== */
:root {
	--cta-pad-top: calc(131 * var(--u));
	--cta-pad-x: calc(40 * var(--u));
	--cta-pad-bottom: calc(133 * var(--u));
	--cta-card-h: calc(540 * var(--u));
	--cta-card-pad: max(calc(50 * var(--u)), 24px);
	--cta-text-top: max(calc(30 * var(--u)), 14px);
	/* 365 - 335 */
	--cta-btn-top: max(calc(80 * var(--u)), 28px);
	/* 541 - 461 */

	--fs-cta-title: max(calc(96 * var(--u)), 40px);
	--fs-cta-text: max(calc(32 * var(--u)), 16px);

	--chip-lg-w: max(calc(381 * var(--u)), 230px);
	--chip-lg-h: max(calc(80 * var(--u)), 52px);
	--chip-lg-gap: max(calc(30 * var(--u)), 14px);
	--fs-chip-lg: max(calc(24 * var(--u)), 16px);
	--chip-lg-arrow: max(calc(26 * var(--u)), 16px);
}

.cta {
	box-sizing: border-box;
	padding: var(--cta-pad-top) var(--cta-pad-x) var(--cta-pad-bottom);
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.gallery+.cta {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.cta.cta>*,
.cta .cta__card>*,
.cta .cta__content>*,
.cta figure,
.cta p,
.cta h2 {
	margin-block: 0;
}

/* Карточка ----------------------------------------------------------------- */
.cta .cta__card {
	position: relative;
	display: flex;
	min-height: var(--cta-card-h);
	padding: var(--cta-card-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--pink);
	border-radius: var(--wp--custom--radius--card);
	isolation: isolate;
}

.cta .cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.cta .cta__title {
	max-width: 8.21em;
	/* 788px макета */
	font-size: var(--fs-cta-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: .8;
	letter-spacing: -0.02em;
}

.cta .cta__text {
	max-width: 24.6em;
	/* 788px макета */
	margin-top: var(--cta-text-top);
	font-size: var(--fs-cta-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

.cta .cta__buttons {
	margin-top: auto;
	padding-top: var(--cta-btn-top);
}

/* Фото --------------------------------------------------------------------- */
.cta .cta__img {
	position: absolute;
	bottom: 0;
	margin: 0;
	/* у figure по умолчанию margin-inline 40px */
	pointer-events: none;
}

.cta .cta__img img {
	display: block;
	width: 100%;
	height: auto;
}

.cta .cta__img--husky {
	right: 0;
	z-index: 0;
	width: 30.92%;
	/* 569 / 1840 */
}

.cta .cta__img--husky img {
	aspect-ratio: 569 / 673;
}

.cta .cta__img--maltipoo {
	right: 18.8%;
	/* (1880 - 1534) / 1840 */
	z-index: 1;
	width: 18.48%;
	/* 340 / 1840 */
}

.cta .cta__img--maltipoo img {
	aspect-ratio: 340 / 422;
}

/* Большая кнопка-«чип» ----------------------------------------------------- */
.cta .btn-chip--lg .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--chip-lg-gap);
	width: var(--chip-lg-w);
	height: var(--chip-lg-h);
	padding: 0 20px;
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	font-family: inherit;
	font-size: var(--fs-chip-lg);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	white-space: nowrap !important;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.cta .btn-chip--lg .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: var(--chip-lg-arrow);
	height: var(--chip-lg-arrow);
	background: currentColor;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.cta .btn-chip--lg .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.cta .btn-chip--lg .wp-block-button__link:hover::after {
	transform: rotate(-15deg) scale(1.1);
}

@media (prefers-reduced-motion: reduce) {
	.cta .btn-chip--lg .wp-block-button__link::after {
		transition: none;
	}
}

/* Планшет: раскладка как на десктопе (всё в --u и %, пропорции держатся),
   только ограничиваем ширину текста — шрифты тут крупнее макетных */
@media (max-width: 1100px) {
	.cta .cta__content {
		max-width: 58%;
	}
}

/* Мобилка: текст сверху, собаки снизу внутри карточки ---------------------- */
@media (max-width: 781px) {
	.cta {
		padding: 40px 16px 48px;
	}

	.cta .cta__card {
		min-height: 0;
		/* место под фото: высота хаски (70% ширины × 673/569) + зазор */
		padding: 28px 20px calc(82.8% + 16px);
		overflow: hidden;
	}

	.cta .cta__content {
		max-width: none;
	}

	.cta .cta__title {
		line-height: .9;
	}

	/* хаски прижат к правому краю (там руки) */
	.cta .cta__img--husky {
		right: 0;
		width: 70%;
	}

	.cta .cta__img--maltipoo {
		right: 42.57%;
		/* 346 / 569 × 70% */
		width: 41.83%;
		/* 340 / 569 × 70% */
	}
}

/* ==========================================================================
   Блок «Відгуки» (Figma 173:223, макет 1920×908).
   Десктоп/планшет (≥782px): секция «прилипает» к экрану, а вертикальный
   скролл двигает ленту карточек влево (assets/js/reviews-scroll.js).
   Заголовок «Відгуки» и сноска стоят на месте. Последняя карточка
   останавливается в 40 (px макета) от правого края.
   Карточки — два ряда «ёлочкой»: отступы рядов и зазоры из макета
   (верх: 500 от края, зазор 460; низ: 43 от края, зазор 471),
   новые карточки просто добавляются в конец ряда.
   Без JS (и в редакторе) лента листается обычным горизонтальным скроллом.
   Мобилка: большой заголовок, под ним лента в один ряд со свайпом.
   ========================================================================== */
.reviews {
	/* Единица сцены: как --u, но не меньше 0.7px (карточки остаются читаемыми,
	   лента просто длиннее) и так, чтобы сцена 908 влезала в высоту экрана. */
	--ru: min(max(var(--u), .7px), calc((100svh - 40px) / 908));
	--rv-stage-h: calc(908 * var(--ru));

	position: relative;
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.cta+.reviews {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.reviews.reviews>*,
.reviews .reviews__pin>*,
.reviews .reviews__track>*,
.reviews .reviews__lane>*,
.reviews .review-card>*,
.reviews .review-card__author>*,
.reviews .review-card__meta>*,
.reviews figure,
.reviews p,
.reviews h2 {
	margin-block: 0;
}

.reviews figure {
	margin: 0;
}

/* Сцена: фиксированная высота 908, всё лишнее по ширине обрезается ---------- */
.reviews .reviews__pin {
	position: relative;
	height: var(--rv-stage-h);
	overflow: hidden;
}

/* Неподвижные тексты -------------------------------------------------------- */
.reviews .reviews__title {
	position: absolute;
	top: calc(50% - 292 * var(--u));
	left: calc(-58 * var(--u));
	z-index: 0;
	font-size: calc(508 * var(--u));
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.01em;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.reviews .reviews__note {
	position: absolute;
	top: calc(50% - 202 * var(--u));
	left: calc(40 * var(--u));
	z-index: 1;
	font-size: max(calc(16 * var(--u)), 12px);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Лента --------------------------------------------------------------------- */
/* Окно ленты: без JS — обычный горизонтальный скролл */
.reviews .reviews__track {
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}

.reviews .reviews__track::-webkit-scrollbar {
	display: none;
}

/* Сама лента (её двигает JS): два ряда, стык рядов на 380 (40 + 340), зазор 18 */
.reviews .reviews__lane {
	display: grid;
	grid-template-rows: calc(380 * var(--ru)) auto;
	row-gap: calc(18 * var(--ru));
	width: max-content;
	height: 100%;
}

.reviews .reviews__row {
	display: flex;
	flex-wrap: nowrap;
	padding-right: calc(40 * var(--ru));
	/* отступ последней карточки от края */
}

.reviews .reviews__row--top {
	align-self: end;
	align-items: flex-end;
	/* карточки «стоят» на линии стыка */
	gap: calc(460 * var(--ru));
	padding-left: calc(500 * var(--ru));
}

.reviews .reviews__row--bottom {
	align-self: start;
	align-items: flex-start;
	/* карточки «висят» от линии стыка */
	gap: calc(471 * var(--ru));
	padding-left: calc(43 * var(--ru));
}

/* Карточка ------------------------------------------------------------------ */
.reviews .review-card {
	--fs-rv-text: max(calc(18 * var(--ru)), 13px);

	display: flex;
	flex: none;
	flex-direction: column;
	width: calc(460 * var(--ru));
	padding: calc(30 * var(--ru));
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: max(calc(30 * var(--ru)), 20px);
}

.reviews .review-card__stars {
	width: calc(130 * var(--ru));
	height: calc(22 * var(--ru));
	background: url("assets/images/rating-5.svg") left center / contain no-repeat;
	font-size: 0;
	/* текст «Оцінка: 5 з 5» — для скринридеров */
	line-height: 0;
}

.reviews .review-card__text {
	margin-top: calc(10 * var(--ru));
	font-size: var(--fs-rv-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

.reviews .review-card__photos {
	display: flex;
	gap: calc(5 * var(--ru));
	margin-top: calc(15 * var(--ru));
}

.reviews .review-card__photo {
	flex: none;
	width: calc(86 * var(--ru));
	height: calc(76 * var(--ru));
	overflow: hidden;
	border-radius: calc(10 * var(--ru));
}

.reviews .review-card__photo--narrow {
	width: calc(65 * var(--ru));
}

.reviews .review-card__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.reviews .review-card__author {
	display: flex;
	align-items: flex-start;
	gap: calc(10 * var(--ru));
	margin-top: calc(15 * var(--ru));
	padding-top: calc(10 * var(--ru));
	border-top: 1px solid var(--wp--preset--color--navy);
}

.reviews .review-card__avatar {
	flex: none;
	width: calc(60 * var(--ru));
}

.reviews .review-card__avatar img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	border-radius: 50%;
}

.reviews .review-card__meta {
	padding-top: calc(3 * var(--ru));
	min-width: 0;
}

.reviews .review-card__name {
	font-size: max(calc(24 * var(--ru)), 16px);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.reviews .review-card__role {
	margin-top: calc(5 * var(--ru));
	font-size: var(--fs-rv-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Режим «прилипания» (класс ставит JS, только ≥782px) ---------------------- */
.reviews.is-pinned {
	/* высота = сцена + путь ленты: 1px вертикального скролла = 1px сдвига */
	height: calc(var(--rv-stage-h) + var(--rv-distance, 0px));
}

.reviews.is-pinned .reviews__pin {
	position: sticky;
	top: max(0px, calc((100svh - var(--rv-stage-h)) / 2));
}

.reviews.is-pinned .reviews__track {
	overflow: hidden;
}

.reviews.is-pinned .reviews__lane {
	will-change: transform;
}

/* Мобилка: заголовок сверху, лента в один ряд со свайпом ------------------- */
@media (max-width: 781px) {
	.reviews {
		--ru: 1px;
		padding: 40px 0 48px;
	}

	/* сноска сверху, под ней заголовок, ниже лента */
	.reviews .reviews__pin {
		display: flex;
		flex-direction: column;
		height: auto;
		overflow: visible;
	}

	.reviews .reviews__title {
		position: static;
		padding-inline: 12px;
		font-size: 18vw;
		line-height: 1;
		letter-spacing: -0.02em;
	}

	.reviews .reviews__note {
		position: static;
		order: -1;
		margin-bottom: 6px;
		padding-inline: 16px;
		font-size: 13px;
	}

	.reviews .reviews__track {
		position: static;
		margin-top: 24px;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 16px;
	}

	.reviews .reviews__lane {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		height: auto;
		padding: 0 16px 4px;
	}

	/* ряды «растворяются», карточки идут по очереди низ/верх — как в макете слева направо */
	.reviews .reviews__row {
		display: contents;
	}

	.reviews .review-card {
		--fs-rv-text: 15px;

		width: min(84vw, 360px);
		padding: 20px;
		scroll-snap-align: start;
	}

	.reviews .review-card__stars {
		width: 110px;
		height: 19px;
	}

	.reviews .review-card__text {
		margin-top: 12px;
	}

	.reviews .review-card__photos {
		gap: 6px;
		margin-top: 14px;
	}

	.reviews .review-card__photo {
		width: 76px;
		height: 67px;
		border-radius: 10px;
	}

	.reviews .review-card__photo--narrow {
		width: 57px;
	}

	.reviews .review-card__author {
		gap: 10px;
		margin-top: 14px;
		padding-top: 12px;
	}

	.reviews .review-card__avatar {
		width: 48px;
	}

	.reviews .review-card__name {
		font-size: 18px;
	}

	.reviews .review-card__role {
		margin-top: 4px;
		font-size: 14px;
	}

	/* С JS — как на ПК: блок останавливается на экране, вертикальный скролл
	   двигает ленту влево, пока не покажутся все отзывы.
	   --rv-pin-h (высоту блока) меряет reviews-scroll.js */
	.reviews.is-pinned {
		height: calc(var(--rv-pin-h, 0px) + var(--rv-distance, 0px));
		padding: 0;
	}

	.reviews.is-pinned .reviews__pin {
		top: max(0px, calc((100svh - var(--rv-pin-h, 0px)) / 2));
		padding: 32px 0;
		box-sizing: border-box;
	}

	.reviews.is-pinned .reviews__track {
		scroll-snap-type: none;
	}

	/* Порядок: низ-1, верх-1, низ-2, верх-2… (добавишь карточки — допиши пару строк) */
	.reviews .reviews__row--bottom .review-card:nth-child(1) {
		order: 1;
	}

	.reviews .reviews__row--top .review-card:nth-child(1) {
		order: 2;
	}

	.reviews .reviews__row--bottom .review-card:nth-child(2) {
		order: 3;
	}

	.reviews .reviews__row--top .review-card:nth-child(2) {
		order: 4;
	}

	.reviews .reviews__row--bottom .review-card:nth-child(3) {
		order: 5;
	}

	.reviews .reviews__row--top .review-card:nth-child(3) {
		order: 6;
	}

	.reviews .reviews__row--bottom .review-card:nth-child(4) {
		order: 7;
	}

	.reviews .reviews__row--top .review-card:nth-child(4) {
		order: 8;
	}
}

/* ==========================================================================
   Блок «FAQ» (Figma 175:320, макет 1920×975).
   Слева большой заголовок, справа аккордеон шириной 910 (от x = 970).
   Пункт: 50 сверху / 50 снизу, линия снизу; вопрос 40/1, ответ 24/1
   через 20 после вопроса. Разметка — core/details (<details>/<summary>):
   без JS работает как обычный раскрывающийся список, JS добавляет
   плавность и «открыт только один» (assets/js/faq-accordion.js).
   ========================================================================== */
:root {
	--faq-pad-top: calc(38 * var(--u));
	--faq-pad-x: calc(40 * var(--u));
	--faq-pad-bottom: calc(96 * var(--u));
	--faq-list-w: calc(910 * var(--u));
	--faq-item-py: max(calc(50 * var(--u)), 24px);
	--faq-answer-top: max(calc(20 * var(--u)), 12px);
	--faq-q-pr: calc(260 * var(--u));
	/* 910 - 650: ширина вопроса 650 */
	--faq-arrow: max(calc(24 * var(--u)), 16px);
	--faq-arrow-top: calc(18 * var(--u));

	--fs-faq-title: max(calc(157 * var(--u)), 64px);
	--fs-faq-q: max(calc(40 * var(--u)), 22px);
	--fs-faq-a: max(calc(24 * var(--u)), 16px);
}

.faq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--faq-list-w);
	align-items: start;
	padding: var(--faq-pad-top) var(--faq-pad-x) var(--faq-pad-bottom);
	box-sizing: border-box;
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.reviews+.faq {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.faq.faq>*,
.faq .faq__list>*,
.faq .faq__item>*,
.faq p,
.faq h2 {
	margin-block: 0;
}

/* Заголовок: в макете x = 29, y = 11 при отступах секции 40 / 38 */
.faq .faq__title {
	margin: calc(-27 * var(--u)) 0 0 calc(-11 * var(--u));
	font-size: var(--fs-faq-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* Пункт --------------------------------------------------------------------- */
.faq .faq__item {
	padding: var(--faq-item-py) 0;
	border-bottom: 1px solid var(--wp--preset--color--navy);
	box-sizing: border-box;
}

.faq .faq__item:first-child {
	padding-top: 0;
}

.faq .faq__item summary {
	position: relative;
	display: block;
	padding-right: var(--faq-q-pr);
	font-size: var(--fs-faq-q);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.01em;
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.faq .faq__item summary::-webkit-details-marker {
	display: none;
}

.faq .faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 6px;
	border-radius: 4px;
}

/* Лапка; у открытого пункта наклоняется и чуть увеличивается */
.faq .faq__item summary::after {
	content: "";
	position: absolute;
	top: var(--faq-arrow-top);
	right: 0;
	width: var(--faq-arrow);
	height: var(--faq-arrow);
	background: currentColor;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.faq .faq__item[open]:not(.is-closing) summary::after {
	transform: rotate(-30deg) scale(1.15);
}

@media (hover: hover) {
	.faq .faq__item:not([open]) summary:hover::after {
		transform: rotate(-15deg);
	}
}

.faq .faq__answer {
	max-width: 29.75em;
	/* 714px макета */
	margin-top: var(--faq-answer-top);
	font-size: var(--fs-faq-a);
	line-height: 1;
	letter-spacing: -0.02em;
}

/* Ответ: при закрытии сразу плавно гаснет (не ждёт, пока его «срежет» высота),
      при открытии — плавно проявляется */
.faq .faq__answer {
	transition: opacity .18s ease;
}

.faq .faq__item.is-closing .faq__answer {
	opacity: 0;
}

.faq .faq__item[open]:not(.is-closing) .faq__answer {
	animation: faq-answer-in .4s ease .05s both;
}

@keyframes faq-answer-in {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.faq .faq__item summary::after,
	.faq .faq__answer {
		transition: none;
		animation: none !important;
	}
}

/* Планшет: заголовок сверху, список на всю ширину -------------------------- */
@media (max-width: 1100px) {
	.faq {
		grid-template-columns: minmax(0, 1fr);
		padding: 48px 24px 72px;
	}

	.faq .faq__title {
		margin: 0 0 32px;
		line-height: 1;
	}

	.faq .faq__item summary {
		padding-right: 56px;
	}

	.faq .faq__item summary::after {
		top: .1em;
	}

	.faq .faq__answer {
		line-height: 1.2;
	}
}

/* Мобилка ------------------------------------------------------------------- */
@media (max-width: 781px) {
	.faq {
		padding: 40px 16px 64px;
	}

	.faq .faq__title {
		margin-bottom: 24px;
		font-size: 64px;
	}

	.faq .faq__item {
		padding: 22px 0;
	}

	.faq .faq__item summary {
		padding-right: 40px;
		font-size: 20px;
		line-height: 1.15;
	}

	.faq .faq__answer {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.3;
	}
}

/* ==========================================================================
   Блок записи «Ми тут для вас і вашого улюбленця» (Figma 178:347, 1920×806).
   Тёмно-синий фон. Слева заголовок, контакты и линейный рисунок (собака + рука),
   справа белая карточка с формой 698×767. Форма — блок «Свій HTML» (core/html).
   Выпадающий список локаций: нативный <select> (хранит значение и участвует
   в отправке/валидации), JS заменяет его внешний вид на свой список
   (assets/js/booking-form.js). Без JS остаётся стилизованный <select>.
   ========================================================================== */
:root {
	--bk-pad-top: calc(96 * var(--u));
	--bk-pad-left: calc(40 * var(--u));
	--bk-pad-right: calc(102 * var(--u));
	/* 1920 - 1818 */
	--bk-card-w: calc(698 * var(--u));
	--bk-card-pad: max(calc(49.5 * var(--u)), 24px);
	--bk-card-radius: max(calc(33 * var(--u)), 24px);
	--bk-field-gap: max(calc(36 * var(--u)), 20px);
	--bk-label-gap: max(calc(14 * var(--u)), 10px);
	--bk-input-h: max(calc(68 * var(--u)), 52px);
	--bk-input-px: max(calc(25 * var(--u)), 18px);
	--bk-submit-top: max(calc(44 * var(--u)), 26px);
	--bk-submit-h: max(calc(75 * var(--u)), 54px);

	--bk-icon: max(calc(82.75 * var(--u)), 56px);
	--bk-contacts-gap: max(calc(20 * var(--u)), 14px);
	--bk-contact-gap: max(calc(15 * var(--u)), 12px);

	--fs-bk-title: max(calc(88 * var(--u)), 36px);
	--fs-bk-label: max(calc(28 * var(--u)), 18px);
	--fs-bk-input: max(calc(17.6 * var(--u)), 16px);
	/* 16px — чтобы iOS не зумил поле */
	--fs-bk-submit: max(calc(22 * var(--u)), 17px);
	--fs-bk-contact-title: max(calc(24 * var(--u)), 18px);
	--fs-bk-contact-text: max(calc(17.6 * var(--u)), 15px);

	--bk-placeholder: rgba(0, 0, 0, .2);
	--bk-error: #d9486e;
}

.booking {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--bk-card-w);
	column-gap: calc(40 * var(--u));
	padding: var(--bk-pad-top) var(--bk-pad-right) 0 var(--bk-pad-left);
	box-sizing: border-box;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.faq+.booking {
	margin-block-start: 0;
}

/* Линейный рисунок на фоне (x = -10, y = 254, 980×480) */
.booking::before {
	content: "";
	position: absolute;
	top: calc(254 * var(--u) + var(--bk-pad-top) - 40 * var(--u));
	/* 254 в макете при отступе 40 */
	left: calc(-10 * var(--u));
	z-index: -1;
	width: calc(980 * var(--u));
	aspect-ratio: 980 / 480.13;
	background: url("assets/images/booking-lineart.svg") center / 100% 100% no-repeat;
	pointer-events: none;
}

/* Сброс flow-отступов WP */
.booking.booking>*,
.booking .booking__info>*,
.booking .booking__contacts>*,
.booking .contact-item>*,
.booking .contact-item__body>*,
.booking figure,
.booking p,
.booking h2 {
	margin-block: 0;
}

.booking figure {
	margin: 0;
}

/* Левая колонка ------------------------------------------------------------- */
.booking .booking__info {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-width: 0;
}

/* в макете x = 33, y = 28 при отступах 40 / 40 */
.booking .booking__title {
	max-width: 11.7em;
	/* 1031px макета */
	margin: calc(-12 * var(--u)) 0 0 calc(-7 * var(--u));
	font-size: var(--fs-bk-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.01em;
}

.booking .booking__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--bk-contacts-gap);
}

.booking .contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--bk-contact-gap);
}

.booking .contact-item__icon {
	flex: none;
	width: var(--bk-icon);
}

.booking .contact-item__icon img {
	display: block;
	width: 100%;
	height: auto;
}

.booking .contact-item__body {
	padding-top: calc(4 * var(--u));
}

.booking .contact-item__title {
	font-size: var(--fs-bk-contact-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.01em;
}

.booking .contact-item__text {
	margin-top: calc(7 * var(--u));
	font-size: var(--fs-bk-contact-text);
	line-height: 1.3;
	letter-spacing: -0.02em;
}

.booking .contact-item__text a {
	color: inherit;
	text-decoration: none;
}

/* Карточка с формой -------------------------------------------------------- */
.booking-form {
	display: flex;
	flex-direction: column;
	gap: var(--bk-field-gap);
	padding: var(--bk-card-pad);
	box-sizing: border-box;
	background: var(--wp--preset--color--white);
	border-radius: var(--bk-card-radius);
	color: var(--wp--preset--color--navy);
}

.booking-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--bk-label-gap);
}

.booking-form__label {
	font-size: var(--fs-bk-label);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.01em;
	cursor: pointer;
}

.booking-form__input {
	width: 100%;
	height: var(--bk-input-h);
	padding: 0 var(--bk-input-px);
	box-sizing: border-box;
	background: var(--wp--preset--color--pink);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	outline: none;
	box-shadow: inset 0 0 0 2px transparent;
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: var(--fs-bk-input);
	line-height: 1;
	letter-spacing: -0.02em;
	transition: box-shadow .2s;
}

.booking-form__input::placeholder {
	color: var(--bk-placeholder);
	opacity: 1;
}

.booking-form__input:hover {
	box-shadow: inset 0 0 0 2px rgba(36, 56, 91, .15);
}

.booking-form__input:focus-visible {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy);
}

/* ошибка — только после того, как пользователь потрогал поле */
.booking-form__input:user-invalid {
	box-shadow: inset 0 0 0 2px var(--bk-error);
}

.booking-form__submit {
	height: var(--bk-submit-h);
	margin-top: calc(var(--bk-submit-top) - var(--bk-field-gap));
	padding: 0 22px;
	background: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--fs-bk-submit);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.booking-form__submit:hover {
	background: #33507f;
}

.booking-form__submit:active {
	transform: scale(.99);
}

.booking-form__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Выпадающий список -------------------------------------------------------- */
.booking-select {
	position: relative;
}

/* нативный select (без JS): розовая пилюля со стрелкой из макета */
.booking-select__native {
	appearance: none;
	-webkit-appearance: none;
	padding-right: calc(var(--bk-input-px) * 2 + 22px);
	background: var(--wp--preset--color--pink) url("assets/images/icon-chevron-down.svg") right var(--bk-input-px) center / max(calc(22 * var(--u)), 16px) auto no-repeat;
	cursor: pointer;
}

.booking-select__native:invalid {
	color: var(--bk-placeholder);
}

/* с JS: select прячется, но остаётся полем формы */
.booking-select.is-enhanced .booking-select__native {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.booking-select__trigger {
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	cursor: pointer;
}

.booking-select__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	color: var(--bk-placeholder);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.booking-select.is-filled .booking-select__value {
	color: var(--wp--preset--color--navy);
}

.booking-select__trigger::after {
	content: "";
	flex: none;
	width: max(calc(22 * var(--u)), 16px);
	aspect-ratio: 24.2 / 16;
	background: currentColor;
	-webkit-mask: url("assets/images/icon-chevron-down.svg") center / contain no-repeat;
	mask: url("assets/images/icon-chevron-down.svg") center / contain no-repeat;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.booking-select.is-open .booking-select__trigger::after {
	transform: rotate(180deg);
}

.booking-select.is-open .booking-select__trigger {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy);
}

.booking-select.is-invalid .booking-select__trigger {
	box-shadow: inset 0 0 0 2px var(--bk-error);
}

/* панель со списком */
.booking-select__list {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--wp--preset--color--white);
	border-radius: max(calc(30 * var(--u)), 24px);
	box-shadow: 0 18px 44px rgba(36, 56, 91, .22), 0 0 0 1px rgba(36, 56, 91, .06);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1), visibility 0s .25s;
}

.booking-select.is-open .booking-select__list {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.booking-select__option {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: max(calc(56 * var(--u)), 48px);
	padding: 10px var(--bk-input-px);
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--navy);
	font-size: var(--fs-bk-input);
	line-height: 1.2;
	letter-spacing: -0.02em;
	cursor: pointer;
	outline: none;
	transition: background-color .15s, color .15s;
}

/* значок-метка перед адресом */
.booking-select__option::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("assets/images/icon-pin-small.svg") center / contain no-repeat;
	mask: url("assets/images/icon-pin-small.svg") center / contain no-repeat;
}

.booking-select__option:hover,
.booking-select__option:focus-visible {
	background: var(--wp--preset--color--pink);
}

.booking-select__option[aria-selected="true"] {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {

	.booking-select__list,
	.booking-select__trigger::after {
		transition: none;
	}
}

/* Планшет: заголовок → форма → контакты, в одну колонку -------------------- */
@media (max-width: 1100px) {
	.booking {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		padding: 72px 24px 56px;
	}

	.booking::before {
		display: none;
	}

	.booking .booking__info {
		display: contents;
	}

	.booking .booking__title {
		order: 1;
		margin: 0;
	}

	.booking .booking-form {
		order: 2;
		width: 100%;
		max-width: 640px;
	}

	.booking .booking__contacts {
		order: 3;
	}

	.booking .contact-item__body {
		padding-top: 8px;
	}

	.booking .contact-item__text {
		margin-top: 6px;
	}
}

/* Мобилка ------------------------------------------------------------------- */
@media (max-width: 781px) {
	.booking {
		row-gap: 24px;
		padding: 64px 16px 48px;
	}

	.booking-form {
		gap: 18px;
		padding: 22px 18px;
	}

	.booking-form__submit {
		margin-top: 8px;
	}

	/* форма → контакты: 24 + 10 = 34 (на 40% больше) */
	.booking .booking__contacts {
		gap: 12px;
		margin-top: 10px;
	}

	.booking .contact-item__icon {
		width: 48px;
	}

	.booking .contact-item__body {
		padding-top: 4px;
	}
}

/* ==========================================================================
   Футер (Figma 179:438, макет 1920×498). Шаблонная часть parts/footer.html.
   Сверху: логотип | «Меню» (x = 1075) | «Контакти» (x = 1478);
   линия #C0CEE9 на y = 367; снизу подпись, копирайт и соцсети.
   ========================================================================== */
:root {
	--ft-pad-top: calc(130 * var(--u));
	--ft-pad-x: calc(40 * var(--u));
	--ft-pad-bottom: var(--ft-bottom-top);
	/* низ = отступ от линии: ряд ровно посередине */
	--ft-col-menu: calc(403 * var(--u));
	/* 1478 - 1075 */
	--ft-col-contacts: calc(402 * var(--u));
	/* 1880 - 1478 */
	--ft-top-gap: max(calc(47.5 * var(--u)), 32px);
	/* низ колонок → линия (50 минус «хвост» межстрочного) */
	--ft-bottom-top: max(calc(40 * var(--u)), 24px);
	/* линия → нижний ряд */
	--ft-logo-w: max(calc(350 * var(--u)), 180px);

	--fs-ft-heading: max(calc(32 * var(--u)), 22px);
	--fs-ft-text: max(calc(20 * var(--u)), 16px);
	--fs-ft-label: 12px;
	--fs-ft-bottom: max(calc(20 * var(--u)), 14px);
}

.site-footer {
	padding: var(--ft-pad-top) var(--ft-pad-x) var(--ft-pad-bottom);
	box-sizing: border-box;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* между последним блоком страницы и футером — без зазора */
.wp-site-blocks>footer,
.wp-site-blocks>.wp-block-template-part {
	margin-block-start: 0;
}

/* Сброс flow-отступов WP */
.site-footer.site-footer>*,
.site-footer .site-footer__top>*,
.site-footer .site-footer__col>*,
.site-footer .site-footer__menu>*,
.site-footer .site-footer__contacts>*,
.site-footer .footer-contact>*,
.site-footer .site-footer__bottom>*,
.site-footer .site-footer__legal>*,
.site-footer figure,
.site-footer p {
	margin-block: 0;
}

.site-footer figure {
	margin: 0;
}

.site-footer a {
	color: inherit;
	text-decoration: none;
}

/* Верх --------------------------------------------------------------------- */
.site-footer .site-footer__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--ft-col-menu) var(--ft-col-contacts);
	align-items: start;
	padding-bottom: var(--ft-top-gap);
}

.site-footer .site-footer__logo {
	width: var(--ft-logo-w);
}

.site-footer .site-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 350 / 94;
}

.site-footer .site-footer__heading {
	font-size: var(--fs-ft-heading);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.01em;
}

.site-footer .site-footer__menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(calc(10 * var(--u)), 8px);
	margin-top: max(calc(20 * var(--u)), 16px);
	font-size: var(--fs-ft-text);
	line-height: 1;
	letter-spacing: -0.02em;
}

.site-footer .site-footer__contacts {
	display: flex;
	flex-direction: column;
	gap: max(calc(12.5 * var(--u)), 10px);
	/* 15 в макете, минус полстроки межстрочного */
	margin-top: max(calc(20 * var(--u)), 16px);
}

.site-footer .footer-contact__label {
	color: rgba(255, 255, 255, .2);
	font-size: var(--fs-ft-label);
	line-height: 1;
	letter-spacing: -0.02em;
}

.site-footer .footer-contact__value {
	margin-top: max(calc(7.5 * var(--u)), 5px);
	/* 10 в макете, минус полстроки межстрочного */
	font-size: var(--fs-ft-text);
	line-height: 1.25;
	/* шаг строк 25 при 20px */
	letter-spacing: -0.02em;
}

/* Низ ---------------------------------------------------------------------- */
.site-footer .site-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	padding-top: var(--ft-bottom-top);
	border-top: 1px solid var(--wp--preset--color--blue-bg);
}

.site-footer .site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: max(calc(10 * var(--u)), 8px);
	font-size: var(--fs-ft-bottom);
	line-height: 1;
	letter-spacing: -0.02em;
}

.site-footer .site-footer__credit {
	color: rgba(255, 255, 255, .3);
}

.site-footer .site-footer__credit a {
	transition: color .2s;
}

.site-footer .site-footer__credit a:hover,
.site-footer .site-footer__credit a:focus-visible {
	color: var(--wp--preset--color--white);
}

.site-footer .site-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 2.5px;
}

/* Круглые кнопки соцсетей: белая обводка, белая иконка; hover — белая заливка */
.site-footer .icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--icon-btn);
	height: var(--icon-btn);
	box-sizing: border-box;
	border: 1.5px solid var(--wp--preset--color--white);
	border-radius: 26px;
	overflow: hidden;
	transition: background-color .2s;
}

.site-footer .icon-btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.site-footer .icon-btn img {
	display: block;
	filter: brightness(0) invert(1);
	transition: filter .2s;
}

.site-footer .icon-btn:hover {
	background: var(--wp--preset--color--white);
}

.site-footer .icon-btn:hover img {
	filter: none;
}

/* Планшет: логотип сверху, под ним «Меню» и «Контакти» в две колонки ------- */
@media (max-width: 1100px) {
	.site-footer {
		padding: 72px 24px var(--ft-bottom-top);
	}

	.site-footer .site-footer__top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
		row-gap: 36px;
		column-gap: 32px;
	}

	.site-footer .site-footer__logo {
		grid-column: 1 / -1;
	}
}

/* Мобилка: всё в одну колонку --------------------------------------------- */
@media (max-width: 781px) {
	.site-footer {
		padding: 64px 16px var(--ft-bottom-top);
	}

	.site-footer .site-footer__top {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.site-footer .site-footer__bottom {
		flex-direction: column-reverse;
		gap: 20px;
	}
}

/* ==========================================================================
   Плавная прокрутка к якорям
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   Модальное окно записи (.booking-modal) — parts/footer.html, JS: booking-modal.js
   ========================================================================== */
html.is-modal-open {
	overflow: hidden;
	/* страница под окном не прокручивается */
}

.booking-modal {
	--bm-pad: clamp(24px, 2.6vw, 48px);
	--bm-input-h: clamp(52px, 3.4vw, 64px);
	--bm-error: #d9486e;

	box-sizing: border-box;
	width: min(560px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--montserrat);
}

.booking-modal::backdrop {
	background: rgb(16 25 42 / .85);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Появление / исчезновение */
.booking-modal[open] {
	animation: booking-modal-in .4s cubic-bezier(.22, 1, .36, 1);
}

.booking-modal[open]::backdrop {
	animation: booking-modal-fade .3s ease;
}

.booking-modal.is-closing {
	animation: booking-modal-out .2s ease-in forwards;
}

.booking-modal.is-closing::backdrop {
	animation: booking-modal-fade .2s ease-in reverse forwards;
}

@keyframes booking-modal-in {
	from {
		opacity: 0;
		transform: translateY(24px) scale(.97);
	}
}

@keyframes booking-modal-out {
	to {
		opacity: 0;
		transform: translateY(12px) scale(.98);
	}
}

@keyframes booking-modal-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.booking-modal[open],
	.booking-modal[open]::backdrop {
		animation: none;
	}
}

/* Карточка -------------------------------------------------------------------- */
.booking-modal__card {
	position: relative;
	box-sizing: border-box;
	max-height: calc(100dvh - 32px);
	padding: var(--bm-pad);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: 0 30px 80px rgb(0 0 0 / .25);
}

.booking-modal__card * {
	margin-block: 0;
}

/* Крестик */
.booking-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--wp--preset--color--pink);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: background-color .2s, color .2s, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.booking-modal__close svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.booking-modal__close:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	transform: rotate(90deg);
}

.booking-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Текст ------------------------------------------------------------------------- */
.booking-modal__title {
	padding-right: 48px;
	/* не заезжает под крестик */
	font-size: clamp(28px, 2.3vw, 40px);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.booking-modal__text {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: -0.02em;
	opacity: .8;
}

/* Форма ------------------------------------------------------------------------- */
.booking-modal__form {
	display: grid;
	gap: 16px;
	margin-top: 28px;
}

.booking-modal__service {
	justify-self: start;
	padding: 10px 18px;
	background: var(--wp--preset--color--blue-bg);
	border-radius: var(--wp--custom--radius--pill);
	font-size: 15px;
	line-height: 1.2;
}

.booking-modal__service-name {
	font-weight: var(--wp--custom--font-weight--medium);
}

.booking-modal__service[hidden] {
	display: none;
}

.booking-modal__field {
	display: grid;
	gap: 8px;
}

.booking-modal__label {
	padding-left: 4px;
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
}

.booking-modal__input {
	width: 100%;
	height: var(--bm-input-h);
	padding: 0 22px;
	box-sizing: border-box;
	background: var(--wp--preset--color--pink);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	outline: none;
	box-shadow: inset 0 0 0 2px transparent;
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 16px;
	/* не меньше 16px — iOS не зумит страницу при фокусе */
	line-height: 1;
	letter-spacing: -0.02em;
	transition: box-shadow .2s;
}

.booking-modal__input::placeholder {
	color: rgb(36 56 91 / .45);
	opacity: 1;
}

.booking-modal__input:hover {
	box-shadow: inset 0 0 0 2px rgb(36 56 91 / .15);
}

.booking-modal__input:focus-visible {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy);
}

.booking-modal__error {
	display: none;
	padding-left: 4px;
	color: var(--bm-error);
	font-size: 13px;
	line-height: 1.2;
}

.booking-modal__field.is-invalid .booking-modal__input {
	box-shadow: inset 0 0 0 2px var(--bm-error);
}

.booking-modal__field.is-invalid .booking-modal__error {
	display: block;
}

/* Кнопка: navy-пилюля + белая лапка */
.booking-modal__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: var(--bm-input-h);
	margin-top: 8px;
	padding: 0 24px;
	background: var(--wp--preset--color--navy);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}

.booking-modal__submit::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.booking-modal__submit:hover {
	background: #33507f;
}

.booking-modal__submit:hover::after {
	transform: rotate(-15deg) scale(1.1);
}

.booking-modal__submit:active {
	transform: scale(.99);
}

.booking-modal__submit:disabled {
	opacity: .6;
	cursor: wait;
}

.booking-modal__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

.booking-modal__alt {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.3;
	text-align: center;
}

.booking-modal__alt a {
	color: inherit;
	font-weight: var(--wp--custom--font-weight--medium);
	white-space: nowrap;
}

/* Успешная заявка ------------------------------------------------------------------ */
.booking-modal__success {
	display: grid;
	justify-items: center;
	padding-block: 12px;
	text-align: center;
}

.booking-modal__success[hidden],
.booking-modal__body[hidden] {
	display: none;
}

.booking-modal__success .booking-modal__title {
	padding-right: 0;
}

.booking-modal__success-icon {
	display: block;
	width: 72px;
	height: 72px;
	margin-bottom: 20px;
	background: var(--wp--preset--color--pink);
	border-radius: 50%;
	position: relative;
}

.booking-modal__success-icon::after {
	content: "";
	position: absolute;
	inset: 20px;
	background: var(--wp--preset--color--navy);
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
}

.booking-modal__success .booking-modal__submit {
	margin-top: 28px;
}

/* Мобилка: окно шире, отступы меньше ---------------------------------------------- */
@media (max-width: 781px) {
	.booking-modal {
		width: calc(100% - 24px);
		max-height: calc(100dvh - 24px);
	}

	.booking-modal__card {
		max-height: calc(100dvh - 24px);
	}

	.booking-modal__close {
		top: 12px;
		right: 12px;
	}
}

/* ==========================================================================
   Плавное подчёркивание ссылок (футер, блок записи, модальное окно).
   Линия — фон-градиент: работает и для ссылок в несколько строк.
   Появляется слева направо и уходит тоже вправо (как в меню шапки).
   ========================================================================== */
.site-footer .site-footer__menu a,
.site-footer .footer-contact__value a,
.site-footer .site-footer__credit a,
.booking .contact-item__text a,
.booking-modal__alt a {
	padding-bottom: 3px;
	/* отступ линии от текста; строку не раздвигает */
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
	transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .2s;
}

.site-footer .site-footer__menu a:hover,
.site-footer .site-footer__menu a:focus-visible,
.site-footer .footer-contact__value a:hover,
.site-footer .footer-contact__value a:focus-visible,
.site-footer .site-footer__credit a:hover,
.site-footer .site-footer__credit a:focus-visible,
.booking .contact-item__text a:hover,
.booking .contact-item__text a:focus-visible {
	background-position: 0 100%;
	background-size: 100% 1px;
}

/* Ссылка с телефоном в модальном окне подчёркнута всегда (видно, что это ссылка);
   при наведении линия плавно уходит вправо, при уходе курсора — возвращается слева */
.booking-modal__alt a {
	background-position: 0 100%;
	background-size: 100% 1px;
}

.booking-modal__alt a:hover,
.booking-modal__alt a:focus-visible {
	background-position: 100% 100%;
	background-size: 0 1px;
}

@media (prefers-reduced-motion: reduce) {

	.site-footer .site-footer__menu a,
	.site-footer .footer-contact__value a,
	.site-footer .site-footer__credit a,
	.booking .contact-item__text a,
	.booking-modal__alt a {
		transition: none;
	}
}

/* ==========================================================================
   Шапка внутренних страниц (parts/header.html, .site-top)
   Та же шапка, что в hero главной, на голубом фоне.
   ========================================================================== */
.site-top {
	box-sizing: border-box;
	padding: var(--hero-pad) var(--hero-pad) 0;
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

.site-top.site-top>*,
.site-top figure,
.site-top p {
	margin: 0;
}

/* шапка → контент страницы: без белого зазора WP */
.wp-site-blocks>main,
.wp-site-blocks>.wp-block-template-part+main {
	margin-block-start: 0;
}

@media (max-width: 781px) {
	.site-top {
		padding: var(--m-hero-pad-top) var(--m-hero-pad-x) 0;
	}

	/* шапка с открытым меню — поверх содержимого страницы (и липких вкладок цен) */
	.site-top.has-mobile-menu {
		position: relative;
		z-index: 30;
	}
}

/* ==========================================================================
   Страница «Послуги та ціни» (templates/page-prices.html, .prices)
   Вкладки + поиск породы: assets/js/prices.js. Без JS все разделы
   показаны друг под другом (вкладки и поиск скрыты).
   ========================================================================== */
:root {
	--pr-pad-top: max(calc(80 * var(--u)), 40px);
	--pr-pad-x: calc(40 * var(--u));
	--pr-pad-bottom: max(calc(120 * var(--u)), 56px);
	--pr-gap: max(calc(20 * var(--u)), 12px);
	--pr-card-pad: max(calc(40 * var(--u)), 20px);
	--pr-radius: var(--wp--custom--radius--card);

	--fs-pr-title: max(calc(96 * var(--u)), 40px);
	--fs-pr-lead: max(calc(20 * var(--u)), 15px);
	--fs-pr-h2: max(calc(40 * var(--u)), 24px);
	--fs-pr-h3: max(calc(24 * var(--u)), 18px);
	--fs-pr-text: max(calc(20 * var(--u)), 15px);
	--fs-pr-small: max(calc(16 * var(--u)), 13px);
	--fs-pr-tab: max(calc(20 * var(--u)), 15px);

	--pr-line: rgb(36 56 91 / .12);
	--pr-muted: rgb(36 56 91 / .65);
	--pr-sticky-top: var(--wp-admin--admin-bar--height, 0px);

	/* видимые расстояния: заголовок → вкладки и вкладки → блок */
	--pr-head-gap: 100px;
	--pr-panels-gap: 40px;
	--pr-bar-py: 12px;
	/* вертикальный отступ липкой панели вкладок */
}

.prices {
	box-sizing: border-box;
	padding: var(--pr-pad-top) var(--pr-pad-x) var(--pr-pad-bottom);
	background: var(--wp--preset--color--blue-bg);
	color: var(--wp--preset--color--navy);
}

/* Сброс flow-отступов WP: расстояния задаются gap'ами контейнеров */
.prices.prices :is(p, h1, h2, h3, ul, figure, .wp-block-group, .wp-block-buttons, .wp-block-table) {
	margin-block: 0;
}

.prices.prices figure {
	margin: 0;
}

.prices a:not(.wp-block-button__link) {
	color: inherit;
}

/* Шапка страницы ---------------------------------------------------------- */
.prices .prices__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 40px;
}

.prices .prices__title {
	font-size: var(--fs-pr-title);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	letter-spacing: -0.02em;
}

.prices .prices__lead {
	max-width: 30em;
	padding-bottom: .4em;
	font-size: var(--fs-pr-lead);
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-align: right;
}

/* Вкладки: прилипают к верху экрана при прокрутке ------------------------- */
.prices .prices__bar {
	position: sticky;
	top: var(--pr-sticky-top);
	z-index: 5;
	display: none;
	/* без JS вкладки не нужны */
	/* !important — перебивает общий сброс отступов WP внутри .prices */
	margin: calc(var(--pr-head-gap) - var(--pr-bar-py)) calc(-1 * var(--pr-pad-x)) 0 !important;
	padding: var(--pr-bar-py) var(--pr-pad-x);
	background: var(--wp--preset--color--blue-bg);
}

.prices.is-ready .prices__bar {
	display: block;
}

.prices-tabs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.prices-tabs::-webkit-scrollbar {
	display: none;
}

.prices-tabs__btn {
	flex-shrink: 0;
	height: max(calc(56 * var(--u)), 44px);
	padding: 0 max(calc(28 * var(--u)), 18px);
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: var(--fs-pr-tab);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}

.prices-tabs__btn:hover,
.prices-tabs__btn[aria-selected="true"] {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.prices-tabs__btn[aria-selected="true"] {
	font-weight: var(--wp--custom--font-weight--medium);
	cursor: default;
}

.prices-tabs__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

/* Разделы ----------------------------------------------------------------- */
.prices .prices__panels {
	display: flex;
	flex-direction: column;
	gap: max(calc(64 * var(--u)), 40px);
	margin-top: var(--pr-panels-gap) !important;
	/* без JS вкладок нет — отступ от заголовка */
}

.prices.is-ready .prices__panels {
	gap: 0;
	margin-top: calc(var(--pr-panels-gap) - var(--pr-bar-py)) !important;
}

.prices .prices-panel {
	display: flex;
	flex-direction: column;
	gap: var(--pr-gap);
	scroll-margin-top: calc(var(--pr-sticky-top) + var(--prices-bar-h, 0px) + 12px);
}

.prices .prices-panel[hidden] {
	display: none;
}

.prices.is-ready .prices-panel:not([hidden]) {
	animation: prices-panel-in .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes prices-panel-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}

/* заголовок раздела нужен только без JS (с JS его роль играет вкладка) */
.prices .prices-panel__title {
	font-size: var(--fs-pr-h2);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.prices.is-ready .prices-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.prices .prices-subtitle {
	margin-top: 40px !important;
	margin-bottom: 12px !important;
	font-size: var(--fs-pr-h2);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

/* Сетки карточек */
.prices .prices-grid {
	display: grid;
	gap: var(--pr-gap);
	align-items: start;
}

.prices .prices-grid--main {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.prices .prices-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

.prices .prices-stack {
	display: flex;
	flex-direction: column;
	gap: var(--pr-gap);
}

/* Карточка ------------------------------------------------------------------ */
.prices .price-card {
	display: flex;
	flex-direction: column;
	gap: max(calc(24 * var(--u)), 16px);
	box-sizing: border-box;
	padding: var(--pr-card-pad);
	background: var(--wp--preset--color--white);
	border-radius: var(--pr-radius);
}

.prices .price-card--pink {
	background: var(--wp--preset--color--pink);
}

.prices .price-card--navy {
	--pr-line: rgb(255 255 255 / .18);
	--pr-muted: rgb(255 255 255 / .7);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.prices .price-card__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 32px;
}

.prices .price-card__head-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.prices .price-card__title {
	font-size: var(--fs-pr-h2);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.prices .price-card__note,
.prices .price-card__text,
.prices .price-card__footnote {
	max-width: 44em;
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.prices .price-card__text {
	color: inherit;
	font-size: var(--fs-pr-text);
	line-height: 1.35;
}

/* Поиск породы -------------------------------------------------------------- */
.prices .prices-search {
	display: none;
	flex-shrink: 0;
	width: min(100%, max(calc(420 * var(--u)), 280px));
}

.prices.is-ready .prices-search {
	display: block;
}

.prices-search__input {
	width: 100%;
	height: max(calc(56 * var(--u)), 46px);
	padding: 0 20px 0 52px;
	box-sizing: border-box;
	background: var(--wp--preset--color--pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324385B' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 20px center / 20px no-repeat;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	outline: none;
	box-shadow: inset 0 0 0 2px transparent;
	color: var(--wp--preset--color--navy);
	font-family: inherit;
	font-size: 16px;
	/* iOS не зумит */
	letter-spacing: -0.02em;
	transition: box-shadow .2s;
	-webkit-appearance: none;
	appearance: none;
}

.prices-search__input::placeholder {
	color: rgb(36 56 91 / .5);
	opacity: 1;
}

.prices-search__input:hover {
	box-shadow: inset 0 0 0 2px rgb(36 56 91 / .15);
}

.prices-search__input:focus-visible {
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--navy);
}

.prices .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Таблица пород -------------------------------------------------------------- */
.prices .price-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.prices .price-section[hidden] {
	display: none;
}

.prices .price-section__title {
	margin-top: max(calc(16 * var(--u)), 8px) !important;
	font-size: var(--fs-pr-h3);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
}

/* у core-таблицы WP есть overflow-x: auto — он ломает липкую шапку */
.prices .price-table {
	overflow: visible;
}

.prices .price-table thead {
	border: 0;
}

.prices .price-table table {
	width: 100%;
	border-collapse: collapse;
	border: 0;
	font-size: var(--fs-pr-text);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.prices .price-table :is(th, td) {
	padding: max(calc(16 * var(--u)), 11px) max(calc(20 * var(--u)), 12px);
	border: 0;
	border-bottom: 1px solid var(--pr-line);
	text-align: center;
	white-space: nowrap;
}

.prices .price-table :is(th, td):first-child {
	padding-left: 0;
	text-align: left;
	white-space: normal;
}

.prices .price-table :is(th, td):last-child {
	padding-right: 0;
}

.prices .price-table :is(th, td):not(:first-child) {
	width: 17%;
}

/* шапка таблицы прилипает под вкладками */
.prices .price-table thead th {
	position: sticky;
	top: calc(var(--pr-sticky-top) + var(--prices-bar-h, 0px));
	z-index: 1;
	padding-block: 14px;
	background: var(--wp--preset--color--white);
	border-bottom: 0;
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--navy);
	/* линия «прилипает» вместе с шапкой */
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.prices .price-table thead th:last-child {
	color: var(--wp--preset--color--navy);
}

.prices .price-table tbody td:last-child {
	font-weight: var(--wp--custom--font-weight--medium);
}

.prices .price-table td[colspan] {
	text-align: center;
	font-weight: var(--wp--custom--font-weight--regular) !important;
}

.prices .price-table tbody tr {
	transition: background-color .2s;
}

.prices .price-table tbody tr[hidden] {
	display: none;
}

@media (hover: hover) {
	.prices .price-table tbody tr:hover {
		background: var(--wp--preset--color--pink);
	}
}

/* «нет такой породы» — показывает JS */
.prices .prices-empty {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 16px;
	text-align: center;
}

.prices .is-empty .prices-empty {
	display: flex;
}

.prices .prices-empty__title {
	font-size: var(--fs-pr-h3);
	font-weight: var(--wp--custom--font-weight--medium);
}

.prices .prices-empty__text {
	color: var(--pr-muted);
	font-size: var(--fs-pr-text);
}

.prices .prices-empty__text a {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--font-weight--medium);
	white-space: nowrap;
}

.prices .price-notes {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
}

.prices .price-notes__item {
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	line-height: 1.4;
}

/* Список услуг (название + цена) -------------------------------------------- */
.prices .price-list {
	display: flex;
	flex-direction: column;
}

.prices .price-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-block: max(calc(18 * var(--u)), 14px);
	border-bottom: 1px solid var(--pr-line);
}

.prices .price-item:first-child {
	padding-top: 0;
}

.prices .price-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.prices .price-item__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.prices .price-item__name {
	font-size: var(--fs-pr-text);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.25;
	letter-spacing: -0.02em;
}

.prices .price-item__meta,
.prices .price-item__desc {
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	line-height: 1.4;
}

.prices .price-item__price {
	flex-shrink: 0;
	font-size: var(--fs-pr-text);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.25;
	white-space: nowrap;
	text-align: right;
}

.prices .price-item__unit {
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	font-weight: var(--wp--custom--font-weight--regular);
}

/* Карточки комплексов ------------------------------------------------------- */
.prices .plan-card {
	gap: 16px;
}

.prices .plan-card--complex {
	background: var(--wp--preset--color--pink);
}

.prices .plan-card--premium {
	--pr-line: rgb(255 255 255 / .18);
	--pr-muted: rgb(255 255 255 / .7);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.prices .plan-card__tag {
	align-self: flex-start;
	padding: 8px 16px;
	background: var(--wp--preset--color--blue-bg);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--navy);
	font-size: var(--fs-pr-small);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
}

.prices .plan-card--complex .plan-card__tag {
	background: var(--wp--preset--color--white);
}

.prices .plan-card__lead {
	font-size: var(--fs-pr-text);
	line-height: 1.35;
}

.prices .plan-card__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	list-style: none;
	font-size: var(--fs-pr-text);
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.prices .plan-card__list li {
	position: relative;
	margin: 0;
	padding-left: 30px;
}

/* буллет — лапка сайта */
.prices .plan-card__list li::before {
	content: "";
	position: absolute;
	top: .2em;
	left: 0;
	width: 18px;
	height: 18px;
	background: currentColor;
	opacity: .85;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
}

.prices .plan-card__footnote {
	margin-top: auto !important;
	/* прижимает сноску и кнопку к низу карточки */
	padding-top: 8px;
	color: var(--pr-muted);
	font-size: var(--fs-pr-small);
	line-height: 1.4;
}

/* Кнопки страницы ------------------------------------------------------------ */
.prices .prices-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: max(calc(60 * var(--u)), 48px);
	padding: 0 max(calc(32 * var(--u)), 24px);
	box-sizing: border-box;
	background: var(--wp--preset--color--navy);
	border: 2px solid var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: var(--fs-pr-text);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1;
	white-space: nowrap !important;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

.prices .prices-btn .wp-block-button__link::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	mask: url("assets/images/icon-paw.svg") center / contain no-repeat;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.prices .prices-btn .wp-block-button__link:hover {
	background: #33507f;
	border-color: #33507f;
}

.prices .prices-btn .wp-block-button__link:hover::after {
	transform: rotate(-15deg) scale(1.1);
}

.prices .prices-btn--outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
}

.prices .prices-btn--outline .wp-block-button__link::after {
	display: none;
}

.prices .prices-btn--outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* на navy-карточке PREMIUM кнопка белая */
.prices .plan-card--premium .prices-btn .wp-block-button__link {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
}

.prices .plan-card--premium .prices-btn .wp-block-button__link:hover {
	background: var(--wp--preset--color--pink);
	border-color: var(--wp--preset--color--pink);
}

.prices .prices-btn .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 3px;
}

.prices .plan-card--premium .prices-btn .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.prices .plan-card__buttons,
.prices .prices-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* CTA внизу страницы ----------------------------------------------------------- */
.prices .prices-cta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px 48px;
	margin-top: max(calc(64 * var(--u)), 40px) !important;
	padding: max(calc(56 * var(--u)), 28px) var(--pr-card-pad);
	background: var(--wp--preset--color--pink);
	border-radius: var(--pr-radius);
}

.prices .prices-cta__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 44em;
}

.prices .prices-cta__title {
	font-size: max(calc(56 * var(--u)), 28px);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.prices .prices-cta__desc {
	font-size: var(--fs-pr-text);
	line-height: 1.35;
}

@media (prefers-reduced-motion: reduce) {
	.prices.is-ready .prices-panel:not([hidden]) {
		animation: none;
	}

	.prices-tabs__btn,
	.prices .price-table tbody tr,
	.prices .prices-btn .wp-block-button__link,
	.prices .prices-btn .wp-block-button__link::after {
		transition: none;
	}
}

/* Планшет ---------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.prices {
		padding: 40px 24px 64px;
	}

	.prices .prices__bar {
		margin-inline: -24px !important;
		padding-inline: 24px;
	}

	.prices .prices__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.prices .prices__lead {
		padding-bottom: 0;
		text-align: left;
	}

	.prices .prices-grid--main,
	.prices .prices-grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.prices .prices-cta {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Мобилка: строки таблицы — карточки с подписями цен ---------------------------- */
@media (max-width: 781px) {
	.prices {
		padding: 32px 16px 56px;
	}

	.prices {
		--pr-bar-py: 10px;
		--pr-head-gap: 24px;
	}

	.prices .prices__bar {
		margin-inline: -16px !important;
		padding: var(--pr-bar-py) 16px;
	}

	/* 4 вкладки — два ряда по две, ничего не обрезается */
	.prices-tabs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
	}

	.prices-tabs__btn {
		height: auto;
		min-height: 44px;
		padding: 6px 12px;
		font-size: 15px;
		line-height: 1.1;
		white-space: normal;
		text-align: center;
	}

	.prices .price-card {
		padding: 24px 16px;
		border-radius: 24px;
	}

	.prices .price-card__head {
		flex-direction: column;
		align-items: stretch;
	}

	.prices .prices-search {
		width: 100%;
	}

	.prices .price-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.prices .price-table :is(table, tbody, tr, td) {
		display: block;
	}

	.prices .price-table tbody tr {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		padding-block: 14px;
		border-bottom: 1px solid var(--pr-line);
	}

	.prices .price-table tbody tr:first-child {
		padding-top: 4px;
	}

	.prices .price-table tbody td {
		width: auto !important;
		padding: 8px 4px;
		border: 0;
		background: var(--wp--preset--color--blue-bg);
		border-radius: 14px;
		font-size: 15px;
		text-align: center;
		white-space: nowrap;
	}

	.prices .price-table tbody td:first-child {
		grid-column: 1 / -1;
		padding: 0 0 4px;
		background: none;
		border-radius: 0;
		font-size: 16px;
		font-weight: var(--wp--custom--font-weight--medium);
		text-align: left;
		white-space: normal;
	}

	.prices .price-table tbody td:not(:first-child)::before {
		display: block;
		margin-bottom: 2px;
		color: var(--pr-muted);
		font-size: 11px;
		font-weight: var(--wp--custom--font-weight--regular);
		letter-spacing: .02em;
		text-transform: uppercase;
	}

	.prices .price-table tbody td:nth-child(2)::before {
		content: "Гігієна";
	}

	.prices .price-table tbody td:nth-child(3)::before {
		content: "Комплекс";
	}

	.prices .price-table tbody td:nth-child(4)::before {
		content: "Premium";
	}

	.prices .price-table tbody td[colspan]::before {
		content: "Вартість";
	}

	.prices .price-table tbody td[colspan] {
		grid-column: 1 / -1;
	}

	.prices .price-item {
		gap: 16px;
	}

	.prices .plan-card__list li {
		padding-left: 26px;
	}

	.prices .plan-card__list li::before {
		width: 16px;
		height: 16px;
	}

	.prices .prices-cta {
		padding: 28px 20px;
		border-radius: 24px;
	}

	.prices .prices-cta__buttons,
	.prices .prices-cta__buttons .wp-block-button,
	.prices .plan-card__buttons,
	.prices .plan-card__buttons .wp-block-button {
		width: 100%;
	}

	.prices .prices-btn .wp-block-button__link {
		width: 100%;
	}
}

/* ==========================================================================
   Выбор приложения карт на iPhone (.map-sheet) — создаёт assets/js/map-links.js
   только на iOS; на ПК и Android этого окна нет.
   ========================================================================== */
.map-sheet {
	box-sizing: border-box;
	width: min(480px, calc(100% - 20px));
	max-width: none;
	margin: auto auto max(10px, env(safe-area-inset-bottom, 0px));
	padding: 0;
	overflow: visible;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--montserrat);
}

.map-sheet::backdrop {
	background: rgb(16 25 42 / .6);
}

.map-sheet[open] {
	animation: map-sheet-in .35s cubic-bezier(.22, 1, .36, 1);
}

@keyframes map-sheet-in {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
}

.map-sheet__panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 16px 16px;
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--card);
}

.map-sheet .map-sheet__title {
	margin: 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	text-align: center;
}

.map-sheet .map-sheet__address {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.3;
	text-align: center;
	opacity: .7;
}

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

.map-sheet__btn,
.map-sheet__cancel {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	border-radius: var(--wp--custom--radius--pill);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.map-sheet__btn {
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--navy);
}

.map-sheet__cancel {
	margin-top: 4px;
	background: var(--wp--preset--color--navy);
	border: 0;
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.map-sheet[open] {
		animation: none;
	}
}

/* ==========================================================================
   Ошибка отправки заявки (создаёт booking-form.js / booking-modal.js
   только если заявка не ушла). Существующую вёрстку не меняет.
   ========================================================================== */
.booking-form__fail,
.booking-modal__fail {
	margin: 0;
	color: #d9486e;
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
}

.booking-modal__fail {
	margin-top: 4px;
}

.booking-form__fail[hidden],
.booking-modal__fail[hidden] {
	display: none;
}

.booking-form__fail a,
.booking-modal__fail a {
	color: inherit;
	font-weight: var(--wp--custom--font-weight--medium);
	white-space: nowrap;
}

.booking-form__submit:disabled {
	opacity: .6;
	cursor: wait;
}

/* ==========================================================================
   Обычные страницы (templates/page.html, .page-plain): политика
   конфиденциальности и другие служебные тексты. Только новые классы —
   главную и страницу цен не затрагивает.
   ========================================================================== */
.page-plain {
	box-sizing: border-box;
	max-width: 880px;
	margin-inline: auto;
	padding: max(calc(80 * var(--u)), 40px) 24px max(calc(120 * var(--u)), 64px);
	color: var(--wp--preset--color--navy);
}

.page-plain .page-plain__title {
	margin: 0 0 max(calc(40 * var(--u)), 24px);
	font-size: max(calc(64 * var(--u)), 32px);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.page-plain .page-plain__content {
	font-size: 17px;
	line-height: 1.6;
}

.page-plain .page-plain__content> :first-child {
	margin-top: 0;
}

.page-plain .page-plain__content :is(h2, h3) {
	margin: 1.6em 0 .5em;
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.page-plain .page-plain__content a {
	color: inherit;
}

@media (max-width: 781px) {
	.page-plain {
		padding: 32px 16px 56px;
	}

	.page-plain .page-plain__content {
		font-size: 16px;
	}
}

/* ==========================================================================
   Персональные данные: строка согласия под кнопкой обеих форм,
   ссылка «Політика конфіденційності» в футере, страница политики
   (templates/page-privacy.html). Только новые классы — существующую
   вёрстку не меняет.
   ========================================================================== */

/* Блок записи на главной: в форме flex-gap, поэтому строку подтягиваем к кнопке
   (зазор кнопка → строка ≈ 12px на любой ширине) */
.booking-form__consent {
	margin: calc(12px - var(--bk-field-gap)) 0 0;
	color: rgba(36, 56, 91, .7);
	font-size: max(calc(14 * var(--u)), 13px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
}

/* Модальное окно: в форме grid-gap 16px → зазор 12px */
.booking-modal__consent {
	margin: -4px 0 0;
	color: rgba(36, 56, 91, .7);
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: -0.01em;
	text-align: center;
}

.booking-form__consent a,
.booking-modal__consent a {
	color: var(--wp--preset--color--navy);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: text-decoration-color .2s;
}

@media (hover: hover) {

	.booking-form__consent a:hover,
	.booking-modal__consent a:hover {
		text-decoration-color: transparent;
	}
}

.booking-form__consent a:focus-visible,
.booking-modal__consent a:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Футер: ссылка на политику — как строка «Created by» */
.site-footer .site-footer__privacy {
	color: rgba(255, 255, 255, .3);
}

.site-footer .site-footer__privacy a {
	padding-bottom: 3px;
	background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
	transition: background-size .35s cubic-bezier(.22, 1, .36, 1), color .2s;
}

.site-footer .site-footer__privacy a:hover,
.site-footer .site-footer__privacy a:focus-visible {
	color: var(--wp--preset--color--white);
	background-position: 0 100%;
	background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.site-footer .site-footer__privacy a {
		transition: none;
	}
}

/* Страница политики: дата редакции, списки, код */
.privacy .privacy__date {
	margin: 0 0 1.4em;
	color: rgba(36, 56, 91, .6);
	font-size: 15px;
}

.privacy .page-plain__content p {
	margin: 0 0 .8em;
}

.privacy .page-plain__content ul {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.privacy .page-plain__content li {
	margin-bottom: .35em;
}

.privacy .page-plain__content li::marker {
	color: rgba(36, 56, 91, .5);
}

.privacy .page-plain__content strong {
	font-weight: var(--wp--custom--font-weight--medium);
}

.privacy .page-plain__content code {
	padding: 1px 6px;
	background: var(--wp--preset--color--pink);
	border-radius: 6px;
	font-size: .9em;
}

.privacy .page-plain__content h2 {
	font-size: max(calc(28 * var(--u)), 22px);
}

@media (max-width: 781px) {
	.privacy .page-plain__content h2 {
		font-size: 20px;
	}
}

/* ==========================================================================
   Страница цен: запись по клику на цену (кнопки создаёт prices.js).
   Без JS цены остаются обычным текстом, эти стили не срабатывают.
   ========================================================================== */
.prices .prices__hint {
	display: block;
	margin-top: .35em;
	font-size: .8em;
	opacity: .7;
}

/* ячейка / строка цены — точка отсчёта, чтобы вся она была кликабельной */
.prices .has-price-book {
	position: relative;
}

.prices .price-book {
	display: inline-block;
	margin: -4px -12px;
	padding: 4px 12px;
	background: none;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	white-space: inherit;
	cursor: pointer;
	transition: background-color .2s, color .2s;
	-webkit-tap-highlight-color: transparent;
}

/* кликабельна вся ячейка, а не только цифры */
.prices .price-book::after {
	content: "";
	position: absolute;
	inset: 0;
}

.prices .price-book:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (hover: hover) {
	.prices .has-price-book:hover .price-book {
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
	}

	.prices .has-price-book:hover .price-item__unit {
		color: inherit;
		opacity: .75;
	}

	/* на тёмной карточке — наоборот, белая «пилюля» */
	.prices .price-card--navy .has-price-book:hover .price-book {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--navy);
	}
}

/* Телефон: ячейки цен и так «плашки» — кнопка занимает их целиком,
   при нажатии плашка на мгновение темнеет */
@media (max-width: 781px) {
	.prices .price-book {
		margin: 0;
		padding: 0;
		border-radius: 0;
	}

	.prices .price-table tbody td.has-price-book:active {
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
	}

	.prices .price-table tbody td.has-price-book:active::before {
		color: inherit;
		opacity: .75;
	}
}

/* Окно записи: длинное название услуги переносится аккуратно */
.booking-modal__service {
	max-width: 100%;
	box-sizing: border-box;
	border-radius: 18px;
}