/* ==========================================================================
   Carenzzo — Living Style Guide (/stileguide)
   Все дизайн-значения берутся из theme.json через CSS-переменные:
   --wp--preset--color--*  --wp--preset--font-*  --wp--preset--spacing--*
   --wp--custom--radius|shadow|duration|ease|container|breakpoint--*
   Здесь нет хардкода палитры/типографики/радиусов/теней — только токены.
   ========================================================================== */

/* --- Локальные алиасы на токены (читабельность, без новых значений) ------- */
.sg {
	--c-base: var(--wp--preset--color--base);
	--c-canvas: var(--wp--preset--color--canvas);
	--c-sunken: var(--wp--preset--color--surface-sunken);
	--c-ink: var(--wp--preset--color--ink);
	--c-ink-strong: var(--wp--preset--color--ink-strong);
	--c-muted: var(--wp--preset--color--muted);
	--c-border: var(--wp--preset--color--border);
	--c-border-strong: var(--wp--preset--color--border-strong);
	--c-primary: var(--wp--preset--color--primary);
	--c-primary-strong: var(--wp--preset--color--primary-strong);
	--c-primary-soft: var(--wp--preset--color--primary-soft);
	--c-on-primary: var(--wp--preset--color--on-primary);
	--c-accent: var(--wp--preset--color--accent);
	--c-accent-strong: var(--wp--preset--color--accent-strong);
	--c-accent-soft: var(--wp--preset--color--accent-soft);
	--c-success: var(--wp--preset--color--success);
	--c-success-strong: var(--wp--preset--color--success-strong);
	--c-success-soft: var(--wp--preset--color--success-soft);
	--c-warning: var(--wp--preset--color--warning);
	--c-warning-soft: var(--wp--preset--color--warning-soft);
	--c-error: var(--wp--preset--color--error);
	--c-error-soft: var(--wp--preset--color--error-soft);
	--c-on-dark: var(--wp--preset--color--on-dark);

	--r-sm: var(--wp--custom--radius--sm);
	--r-md: var(--wp--custom--radius--md);
	--r-lg: var(--wp--custom--radius--lg);
	--r-xl: var(--wp--custom--radius--xl);
	--r-pill: var(--wp--custom--radius--pill);

	--sh-xs: var(--wp--custom--shadow--xs);
	--sh-sm: var(--wp--custom--shadow--sm);
	--sh-md: var(--wp--custom--shadow--md);
	--sh-lg: var(--wp--custom--shadow--lg);
	--sh-ring: var(--wp--custom--shadow--ring);

	--d-fast: var(--wp--custom--duration--fast);
	--d-base: var(--wp--custom--duration--base);
	--ease: var(--wp--custom--ease--out);

	--page: var(--wp--custom--container--page);
	--c-prose: var(--wp--custom--container--prose);
	--c-wide: var(--wp--custom--container--wide);
	--c-ultra: var(--wp--custom--container--ultra);
	--gutter: var(--wp--custom--container--gutter);

	--sh-e1: var(--wp--custom--shadow--e-1);
	--sh-e2: var(--wp--custom--shadow--e-2);
	--sh-e3: var(--wp--custom--shadow--e-3);
	--sh-e4: var(--wp--custom--shadow--e-4);
	--sh-brand: var(--wp--custom--shadow--brand);
	--sh-inset-hi: var(--wp--custom--shadow--inset-hi);
	--r-xl2: var(--wp--custom--radius--xl-2);
	--r-xl3: var(--wp--custom--radius--xl-3);
	--ease-spring: var(--wp--custom--ease--spring);
	--ease-emph: var(--wp--custom--ease--emphasized);
	--d-reveal: var(--wp--custom--duration--reveal);
	--mesh: var(--wp--custom--gradient-mesh);
	--noise: var(--wp--custom--noise);
	--glass-bg: var(--wp--custom--glass--bg);
	--glass-blur: var(--wp--custom--glass--blur);
	--glass-border: var(--wp--custom--glass--border);

	font-family: var(--wp--preset--font-family--body);
	color: var(--c-ink);
	background:
		radial-gradient(120% 90% at 50% -10%, var(--c-primary-soft) 0%, rgba(231, 244, 240, 0) 55%),
		var(--c-canvas);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Базовый размер иконок (переопределяется явными правилами ниже) — защита от
   SVG без собственных размеров, которые иначе раздуваются до 300×150. */
.sg svg { inline-size: 1em; block-size: 1em; flex: none; }

/* Сброс «голой» WP-обёртки страницы */
.sg-root { margin: 0; overflow-x: clip; }
.sg-root :where(p) { margin: 0; }

/* --- Контейнеры и секции --------------------------------------------------- */
/* ЕДИНАЯ ЭТАЛОННАЯ ШИРИНА = ширина hero (--ultra, 1560).
   Все секции стайлгайда (header → footer, включая внутренний контент
   full-bleed-секций) идут одной колонкой: совпадают левый/правый края и
   gutter. Длинный читаемый текст внутри секций сужается собственными
   max-width на элементах (section__head/lead, prose-блоки), не сдвигая
   левый край относительно общей сетки. */
.sg-container {
	width: 100%;
	max-width: var(--c-ultra);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* --wide/--ultra приведены к эталону hero; --prose оставлен для узких
   читаемых колонок при необходимости (left-edge всё равно от .sg-container). */
.sg-container--wide,
.sg-container--ultra { max-width: var(--c-ultra); }
.sg-container--prose { max-width: var(--c-prose); }

/* Full-bleed: фон тянется на всю ширину окна, НО внутренний .sg-container
   выравнивается ровно в ту же контентную колонку, что и не-bleed секции
   (совпадение левого/правого края с hero на всех ширинах).
   padding-inline = половина ширины скроллбара (100vw - 100%): резервирует
   полосу прокрутки, чтобы 100vw-фон не сдвигал контент. Само-корректируется:
   при overlay/без скроллбара (100vw - 100%) = 0 → паддинг исчезает. */
.sg-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc((100vw - 100%) / 2);
}

.sg-section { padding-block: var(--wp--preset--spacing--xl); }
@media (min-width: 1024px) {
	.sg-section { padding-block: var(--wp--preset--spacing--xl-2); }
}
.sg-section + .sg-section { border-top: 1px solid var(--c-border); }
/* На главной убираем разделительные линии между секциями (и бледными, и белыми) —
   бесшовный вид по просьбе владельца. Другие страницы не затронуты. */
body.home .sg-section + .sg-section { border-top: none; }
.sg-section--alt { background: var(--c-base); }
/* Секция направлений (#countries) — на том же бледно-зелёном #f5f8f7, что hero/статы,
   чтобы блоки читались как единое целое (по просьбе владельца). id перекрывает --alt.
   Верхний отступ уменьшен — стать ближе к статам (визуально один блок). */
#countries.sg-section { background: #f5f8f7; padding-block-start: var(--wp--preset--spacing--sm); }
/* How-to сразу после направлений — на БЕЛОМ фоне темы (--c-base), контраст с бледным
   #countries (по просьбе владельца). */
#how.sg-section { background: var(--c-base); }

.sg-section__head { max-width: 60ch; margin-bottom: var(--wp--preset--spacing--lg); }
/* Асимметричный широкий хедер секции: эйбрау/заголовок слева, лид справа на ≥1024 */
.sg-section__head--wide { max-width: none; }
@media (min-width: 1024px) {
	.sg-section__head--wide {
		display: grid;
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--wp--preset--spacing--xl);
		align-items: end;
	}
	.sg-section__head--wide .sg-section__lead { margin-top: 0; max-width: 46ch; padding-bottom: 6px; }
	/* Растянутый стековый хедер: заголовок + лид на ~2/3 ширины контейнера */
	.sg-section__head--stretch { max-width: 66%; }
	.sg-section__head--stretch .sg-section__lead { max-width: none; }
}
.sg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-primary-strong);
	margin-bottom: var(--wp--preset--spacing--xs);
}
.sg-eyebrow::before {
	content: "";
	inline-size: 1.75rem;
	block-size: 2px;
	border-radius: var(--r-pill);
	background: var(--c-primary);
}
.sg-section__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	font-size: var(--wp--preset--font-size--xl-3);
	margin: 0;
}
.sg-section__lead {
	margin-top: var(--wp--preset--spacing--xs);
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	max-width: 56ch;
}

/* --- Универсальная карточка-обёртка демо ---------------------------------- */
.sg-card {
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
}
.sg-grid { display: grid; gap: var(--wp--preset--spacing--md); }
.sg-grid--2 { grid-template-columns: 1fr; }
.sg-grid--3 { grid-template-columns: 1fr; }
.sg-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 480px) {
	.sg-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.sg-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.sg-grid--3 { grid-template-columns: repeat(2, 1fr); }
	.sg-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.sg-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.sg-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   АТМОСФЕРА — mesh / noise / glass утилиты
   ========================================================================== */
.sg-atmo { position: relative; isolation: isolate; }
.sg-atmo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--mesh);
	background-repeat: no-repeat;
}
.sg-atmo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--noise);
	background-size: 140px 140px;
	opacity: 0.04;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.sg-glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border: 1px solid var(--glass-border);
}

/* ==========================================================================
   SCROLL-REVEAL — сдержанное появление секций (только при no-preference)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.sg-reveal {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity var(--d-reveal) var(--ease-emph), transform var(--d-reveal) var(--ease-emph);
		will-change: opacity, transform;
	}
	.sg-reveal.is-in { opacity: 1; transform: none; }
	/* Оркестрованный stagger в hero */
	.sg-stagger > * {
		opacity: 0;
		transform: translateY(16px);
		animation: sg-rise var(--d-reveal) var(--ease-spring) forwards;
	}
	.sg-stagger > *:nth-child(1) { animation-delay: 0.05s; }
	.sg-stagger > *:nth-child(2) { animation-delay: 0.13s; }
	.sg-stagger > *:nth-child(3) { animation-delay: 0.21s; }
	.sg-stagger > *:nth-child(4) { animation-delay: 0.29s; }
	.sg-stagger > *:nth-child(5) { animation-delay: 0.37s; }
	@keyframes sg-rise { to { opacity: 1; transform: none; } }
	/* Виджет-обёртку hero (страна) ИСКЛЮЧАЕМ из transform-анимации stagger.
	   Причина (подтверждено вживую): animation-fill-mode:forwards с финальным
	   кадром transform:none оставляет у элемента остаточный used-transform
	   (identity matrix), из-за чего .sg-hero__widget становится containing block.
	   Тогда position:fixed бэкдроп/панель модалки виджета localrent (внутри
	   #carenzzo) меряются от этой обёртки, а не от вьюпорта → на стране модалка
	   «не на весь экран» (на городе виджет вне stagger, потому ок). Оставляем
	   мягкое появление через opacity-only анимацию — containing block не создаётся. */
	.sg-stagger > .sg-hero__widget { transform: none; animation-name: sg-fade; }
	@keyframes sg-fade { to { opacity: 1; } }
}

/* ==========================================================================
   ХЕДЕР (макет) + переключатель языка
   ========================================================================== */
.sg-header {
	position: sticky;
	top: 0;
	/* Хедер постоянно липкий: всегда виден сверху, без авто-скрытия. Стабильный
	   плотный фон + мягкая тень-элевация (контент уезжает под него без просвета).
	   z-index выше контента виджета (включая инлайновые дропдауны дат/города, что
	   раскрываются вниз) и ниже off-canvas-меню (z-1001, поверх всего). Фуллскрин-
	   оверлеи виджета заперты в его стэкинг-контексте и пробить z-100 не могут —
	   поэтому на время их открытия хедер отклеивается (см. правило ниже). */
	z-index: 100;
	background: var(--c-base);
	border-bottom: 1px solid var(--c-border);
	box-shadow: var(--sh-e2);
}
/* Фуллскрин-оверлеи виджета localrent должны открываться ПОВЕРХ хедера. Они
   заперты в стэкинг-контексте нашей обёртки .carenzzo-localrent-widget (она
   позиционирована с z-index:1), а localrent внутри держит #carenzzo на z-index
   10000 (его data-zindex) — поэтому липкий хедер (z-index:100), будучи на уровне
   корня выше обёртки (z-1), перекрывал бы верх любого оверлея виджета.
   Обёртку выше хедера не поднимаем (иначе при скролле инлайновый контент виджета
   залезал бы на хедер) — вместо этого на время открытого фуллскрин-оверлея
   ОТКЛЕИВАЕМ хедер: position:static уводит его из позиционированного слоя в
   обычный поток (ниже позиционированной обёртки виджета), и модал спокойно
   перекрывает его; по закрытии хедер снова липкий. Признаки открытого оверлея
   (определены по живому DOM):
   • даты / город / фильтры → localrent вешает на <body> класс .mrc-lock-scroll;
   • карточка авто #spa__modal → переключается инлайн-стилем display:none → block
     (своего класса/атрибута состояния нет), ловим по отсутствию display:none.
   Инлайновые дропдауны без фуллскрин-оверлея (открываются вниз под хедером)
   этих признаков не ставят — хедер для них остаётся липким. */
body.mrc-lock-scroll .sg-header,
body:has( #spa__modal:not( [style*="display: none"] ) ) .sg-header {
	position: static;
}
.sg-header__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--md);
	min-height: 64px;
	padding-block: var(--wp--preset--spacing--xs-2);
}
.sg-header__nav {
	display: none;
	margin-inline-start: var(--wp--preset--spacing--sm);
	gap: var(--wp--preset--spacing--md);
}
.sg-header__nav a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--c-ink);
	text-decoration: none;
	padding-block: var(--wp--preset--spacing--xs-3);
	border-bottom: 2px solid transparent;
	transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sg-header__nav a:hover { color: var(--c-primary-strong); border-color: var(--c-primary); }
.sg-header__spacer { margin-inline-start: auto; }
.sg-header__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); }
@media (min-width: 1024px) { .sg-header__nav { display: flex; } }

/* --- Свитчер языка: компактный триггер + скроллируемое меню (масштабируется
   до 15+ языков). Один компонент для хедера и мобильной панели. ------------- */
.sg-langswitch { position: relative; }
.sg-langswitch__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-3);
	appearance: none;
	cursor: pointer;
	min-height: 38px;
	padding-inline: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs-3);
	background: var(--c-sunken);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sg-langswitch__btn:hover { background: var(--c-base); border-color: var(--c-border-strong); }
.sg-langswitch__globe { display: inline-flex; color: var(--c-primary); }
.sg-langswitch__globe svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sg-langswitch__code { text-transform: uppercase; }
.sg-langswitch__caret { display: inline-flex; color: var(--c-muted); transition: transform var(--d-base) var(--ease); }
.sg-langswitch__caret svg { inline-size: 0.85rem; block-size: 0.85rem; }
.sg-langswitch.is-open .sg-langswitch__caret { transform: rotate(180deg); }
.sg-langswitch.is-open .sg-langswitch__btn { background: var(--c-base); border-color: var(--c-primary); color: var(--c-primary-strong); }

.sg-langswitch__menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-end: 0;
	z-index: 60;
	min-inline-size: 220px;
	max-block-size: 320px;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0;
	padding: var(--wp--preset--spacing--xs-3);
	list-style: none;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility var(--d-base) var(--ease);
	scrollbar-width: thin;
	scrollbar-color: var(--c-border-strong) transparent;
}
/* На открытии transition без visibility → видимость включается мгновенно, и пункты
   сразу фокусопригодны (для клавиатуры/disclosure-фокуса). На закрытии работает
   базовый transition с visibility — меню остаётся видимым на время fade-out. */
.sg-langswitch.is-open .sg-langswitch__menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.sg-langswitch__menu::-webkit-scrollbar { width: 8px; }
.sg-langswitch__menu::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); border: 2px solid var(--c-base); }
.sg-langswitch__item {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	inline-size: 100%;
	appearance: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	text-align: start;
	padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs);
	border-radius: var(--r-md);
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--small);
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.sg-langswitch__item:hover { background: var(--c-sunken); }
.sg-langswitch__code2 {
	flex: none;
	min-inline-size: 2.1em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.04em;
	color: var(--c-muted);
}
.sg-langswitch__name { font-weight: 500; }
.sg-langswitch__check { margin-inline-start: auto; display: none; color: var(--c-primary); }
.sg-langswitch__check svg { inline-size: 1rem; block-size: 1rem; }
.sg-langswitch__item[aria-current="true"] { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-langswitch__item[aria-current="true"] .sg-langswitch__code2 { color: var(--c-primary-strong); }
.sg-langswitch__item[aria-current="true"] .sg-langswitch__check { display: inline-flex; }

/* CTA в хедере: прячем на телефонах (там он в off-canvas), показываем с 768px */
.sg-header .sg-header__cta { display: none; }
@media (min-width: 768px) { .sg-header .sg-header__cta { display: inline-flex; } }

/* --- Бургер-триггер (виден ≤1023, где скрыта основная навигация) ----------- */
.sg-burger {
	display: inline-grid;
	place-items: center;
	inline-size: 42px;
	block-size: 42px;
	appearance: none;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-base);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sg-burger:hover { background: var(--c-sunken); border-color: var(--c-border-strong); }
.sg-burger__box { position: relative; inline-size: 18px; block-size: 14px; }
.sg-burger__bar,
.sg-burger__box::before,
.sg-burger__box::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: 2px;
	border-radius: var(--r-pill);
	background: currentColor;
	transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.sg-burger__box::before { inset-block-start: 0; }
.sg-burger__bar { inset-block-start: 6px; }
.sg-burger__box::after { inset-block-end: 0; }
@media (min-width: 1024px) { .sg-burger { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */
.sg-hero {
	position: relative;
	padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--xl);
	background: var(--wp--preset--gradient--hero, var(--c-canvas));
	border-bottom: 1px solid var(--c-border);
}
@media (min-width: 1024px) {
	.sg-hero { padding-block: var(--wp--preset--spacing--xl-2) var(--wp--preset--spacing--xl-2); }
}
/* Асимметричный split: текст слева, форма справа (≥1024 ~1.05fr / 0.95fr) */
.sg-hero__inner { display: grid; gap: var(--wp--preset--spacing--xl); align-items: center; }
@media (min-width: 1024px) {
	.sg-hero__inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--wp--preset--spacing--xl-2); }
}
.sg-hero__grad {
	background: linear-gradient(110deg, var(--c-primary) 0%, var(--c-accent-strong) 90%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
/* Зелёно-оранжевый градиент для акцентной части H1 нового hero (по запросу).
   ЯРКИЙ и БЕЗ тени: text-shadow заголовка просвечивал сквозь прозрачную заливку
   (background-clip:text) и мутил цвет — гасим его тут (text-shadow:none). */
.cz-hero__grad {
	background: linear-gradient(100deg, #0e7a66 0%, #2c8b50 40%, #ff8a1e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
}
.sg-hero__trustrow { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); margin-top: var(--wp--preset--spacing--md); }
.sg-trust-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-e1);
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-ink);
}
.sg-trust-pill strong { font-weight: 800; }
.sg-trust-pill svg { color: var(--c-success); inline-size: 1rem; block-size: 1rem; }
.sg-trust-pill__stars { display: inline-flex; gap: 1px; color: var(--c-accent); }
.sg-trust-pill__stars svg { color: var(--c-accent); inline-size: 0.9rem; block-size: 0.9rem; }
.u-muted { color: var(--c-muted); }

/* Стеклянная карточка-превью формы поиска */
.sg-searchcard {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--r-xl2);
	box-shadow: var(--sh-e4), var(--sh-inset-hi);
}
@media (min-width: 768px) { .sg-searchcard { padding: var(--wp--preset--spacing--lg); } }
.sg-searchcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--xs); }
.sg-searchcard__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--lg); letter-spacing: -0.015em; }
.sg-searchcard__title svg { color: var(--c-primary); inline-size: 1.3rem; block-size: 1.3rem; }
.sg-searchcard__dates { display: grid; gap: var(--wp--preset--spacing--sm); grid-template-columns: 1fr; }
@media (min-width: 420px) { .sg-searchcard__dates { grid-template-columns: 1fr 1fr; } }
/* В превью-форме значения чуть компактнее, чтобы дата+время не обрезались в узких колонках */
.sg-searchcard .field__control { min-height: 46px; padding-inline: var(--wp--preset--spacing--xs); }
.sg-searchcard .field__control input { font-size: var(--wp--preset--font-size--small); }
.sg-searchcard .field__control svg { inline-size: 1.1rem; block-size: 1.1rem; }
.sg-searchcard__note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
.sg-searchcard__note svg { inline-size: 0.9rem; block-size: 0.9rem; color: var(--c-primary); }
.sg-searchcard .field__control { background: var(--c-base); }

/* Combobox-автокомплит городов в hero-форме (выпадающий listbox подсказок) */
.sg-ac { position: relative; }
.sg-ac__list {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + var(--wp--preset--spacing--xs-3));
	z-index: 20;
	margin: 0;
	padding: var(--wp--preset--spacing--xs-3);
	list-style: none;
	max-block-size: 17rem;
	overflow-y: auto;
	background: var(--c-base);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--sh-lg);
}
.sg-ac__opt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs);
	border-radius: var(--r-sm);
	cursor: pointer;
	color: var(--c-ink);
}
.sg-ac__opt.is-active,
.sg-ac__opt:hover { background: var(--c-primary-soft); }
.sg-ac__name { font-weight: 600; }
.sg-ac__country { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); white-space: nowrap; }
.sg-ac__hint {
	margin-block-start: var(--wp--preset--spacing--xs-3);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
}

.sg-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	padding: 6px 12px 6px 8px;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-xs);
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-muted);
	margin-bottom: var(--wp--preset--spacing--md);
}
.sg-hero__badge strong { color: var(--c-ink); font-weight: 600; }
.sg-hero__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.0;
	font-size: var(--wp--preset--font-size--display);
	margin: 0;
	max-width: 16ch;
	text-wrap: balance;
}
.sg-hero__title em {
	font-style: normal;
	color: var(--c-primary-strong);
}
.sg-hero__lead {
	margin-top: var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	color: var(--c-muted);
	max-width: 52ch;
}
.sg-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}
.sg-hero__stat { display: grid; gap: 2px; }
.sg-hero__stat dt {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xl-2);
	letter-spacing: -0.02em;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.sg-hero__stat dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-muted);
}
/* Мобилка: убираем лишний хром hero (бейдж, счётчики, трест-пиллы, бейдж формы),
   уменьшаем H1 — чтобы форма попадала в первый экран, а экран не был перегружен. */
@media (max-width: 639px) {
	.sg-hero--photobg .sg-hero__badge,
	.sg-hero--photobg .sg-hero__meta,
	.sg-hero--photobg .sg-hero__trustrow,
	.sg-searchcard__head .badge { display: none; }
	.sg-hero--photobg .sg-hero__title { font-size: clamp(2.5rem, 1.9rem + 4vw, 3rem); }
}

/* --------------------------------------------------------------------------
   HERO — фотоверсия ТОЛЬКО главной (.sg-hero--photobg), СВЕТЛАЯ вариация
   Фон: ЯРКОЕ фото пляжного кроссовера (assets/imgs/bg.png). Поверх — ЛЁГКАЯ
   светлая вуаль (canvas): плотнее слева, за текстовой колонкой (тёмный текст
   читается), почти прозрачная справа (кроссовер/пляж остаются яркими). Фото НЕ
   затемняем. Типографику hero НЕ трогаем — она остаётся штатной тёмной (ink/
   muted, акцент teal→gold), бейдж/пилюли/карточка поиска — штатные светлые.
   Отказ от override цвета текста = фолбэк без фото деградирует в обычный
   светлый hero без «застрявшего» тёмного текста. Scope строго к
   .sg-hero--photobg: .sg-hero и .sg-hero--solo (город/страна) не затронуты.
   -------------------------------------------------------------------------- */
.sg-hero--photobg {
	/* <1024px: баннер-фото СКРЫТ — только светлый фон (по просьбе владельца).
	   Фотоверсия включается с 1024px в медиазапросе ниже (десктоп). */
	background: #f5f8f7;
	border-bottom: none;
}
/* Гасим цветной mesh под фото (блобы клешат с фотографией). Зерно
   .sg-atmo::after оставляем — лёгкая плёнка прячет бэндинг вуали. */
.sg-hero--photobg::before { background-image: none; }

@media (min-width: 1024px) {
	/* Направленная светлая вуаль: плотная слева (тёмный текст) → почти прозрачная
	   справа (яркие авто/пальмы); фокус кадра к правому краю — за карточкой поиска. */
	.sg-hero--photobg {
		background:
			linear-gradient(100deg,
				rgba(245, 248, 247, 0.94) 0%,
				rgba(245, 248, 247, 0.82) 30%,
				rgba(245, 248, 247, 0.36) 58%,
				rgba(245, 248, 247, 0.06) 100%),
			image-set(
				url("../imgs/bg.webp") type("image/webp"),
				url("../imgs/bg.png") type("image/png")
			) center right / cover no-repeat;
	}
}

/* Карточка поиска — почти непрозрачная белая: крепкая читаемость полей над
   фото (сохраняем лёгкую фростед-полупрозрачность .sg-glass). */
.sg-hero--photobg .sg-searchcard {
	background: color-mix(in srgb, var(--c-base) 94%, transparent);
}

/* --------------------------------------------------------------------------
   HERO v2 — редизайн верхнего экрана главной (.sg-hero--v2)
   Одноколоночная композиция ПОВЕРХ фото: overlay-навигация → бейдж-счётчик →
   крупный H1 → подзаголовок → trust-чипы → карточка-поиск (одно поле) → лента
   «Популярные направления» (scroll-snap) → полоса статов 4→2×2. Палитра/шрифты/
   радиусы/тени — штатные токены. Фон — общий .sg-hero--photobg. Legacy-hero
   остаётся через фильтр carenzzo_hero_variant='legacy'.
   -------------------------------------------------------------------------- */

/* Overlay-навигация ТОЛЬКО на главной: хедер прозрачный, лежит над hero и
   уезжает вместе со скроллом (без JS). position:absolute убирает хедер из
   потока — main поднимается к верху страницы, а hero добавляет верхний отступ
   под бар (см. .sg-hero--v2 padding-block-start). Другие страницы не затронуты. */
body.home .sg-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
}
/* Легибельность overlay-навигации над ЧИСТЫМ фото-баннером (без фоновой плашки/
   градиента — по требованию владельца баннер чистый). Вместо скрима — лёгкий
   светлый ореол на тексте/иконках нава и бренда. Только на главной. Элементы со
   своим фоном-чипом (langswitch, CTA) ореол не требуют. */
body.home .sg-header__nav a,
body.home .sg-header .brand__word,
body.home .sg-header__mail {
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
/* E-mail поддержки скрыт в overlay-шапке ТОЛЬКО на главной (чистая навигация). */
body.home .sg-header__mail { display: none; }

/* Верхний отступ hero под overlay-навигацию (бар ~64px) + воздух. */
.sg-hero--v2 { padding-block-start: calc(64px + var(--wp--preset--spacing--lg)); }
@media (min-width: 1024px) {
	.sg-hero--v2 { padding-block-start: calc(72px + var(--wp--preset--spacing--xl)); }
}
/* Одна колонка (перекрываем grid двухколоночного .sg-hero__inner). */
.sg-hero--v2 .sg-hero__inner { display: block; }

/* Фото-баннер v2 = ОГРАНИЧЕННАЯ верхняя полоса (только ≥1024, где фото видно).
   Верхний вертикальный градиент гасит фото к светлому фону #f5f8f7 примерно на
   уровне ЦЕНТРА карточки-поиска: верхняя половина карточки лежит на фото, нижняя
   половина и всё ниже (лента направлений, полоса статов) — на светлой подложке.
   Легаси-hero (.sg-hero--photobg без --v2) не затронут — там фото на всю секцию. */
@media (min-width: 1024px) {
	/* Фото вынесено в фикс-высотный слой ::before → cover + позиция в ПРОЦЕНТАХ
	   кадрируют авто ОДИНАКОВО на всех ширинах (не зависят от px-высоты секции,
	   как это было у width-fit + фикс-сдвига в px). Сама секция — плоский светлый фон;
	   лента направлений и статы (ниже полосы) остаются на нём. Легаси-hero
	   (.sg-hero--photobg без --v2) не затронут — там фото на всю секцию. */
	.sg-hero--v2.sg-hero--photobg { background: #f5f8f7; }
	.sg-hero--v2.sg-hero--photobg::before {
		content: "";
		position: absolute;
		inset: 0 0 auto 0;
		height: 35rem;
		z-index: -2;
		/* Слои сверху вниз: (1) СВЕТЛАЯ вуаль СЛЕВА под текстом — осветляет фото за
		   тёмным H1/лидом для отделения от фона, к ~60% сходит на нет (над машиной
		   справа — чисто); (2) нижняя мягкая отсечка полосы в #f5f8f7 (≈ середина
		   карточки-поиска); (3) фото cover + center 60% (робастный кадр авто). */
		background:
			linear-gradient(90deg, rgba(245, 248, 247, 0.92) 0%, rgba(245, 248, 247, 0.7) 24%, rgba(245, 248, 247, 0.32) 44%, rgba(245, 248, 247, 0) 60%),
			linear-gradient(to bottom, rgba(245, 248, 247, 0) 0, rgba(245, 248, 247, 0) 76%, #f5f8f7 100%),
			image-set(
				url("../imgs/bg.webp") type("image/webp"),
				url("../imgs/bg.png") type("image/png")
			) center 78% / cover no-repeat;
	}
}

/* Кластер: текстовый блок слева ограничен; карточка-поиск, лента и статы —
   во всю ширину контейнера hero. */
.cz-hero { max-inline-size: none; }
.cz-hero__text { max-inline-size: 40rem; }

/* H1 — длинный SEO-заголовок: переносится в 2–3 строки в пределах текстовой
   колонки (.cz-hero__text ~40rem), сбалансированный перенос, размер по вьюпорту. */
.sg-hero--v2 .sg-hero__title {
	max-width: none;
	text-wrap: balance;
	font-size: clamp(1.9rem, 3.6vw, 3.25rem);
	line-height: 1.08;
}
.sg-hero--v2 .sg-hero__lead { margin-top: var(--wp--preset--spacing--sm); max-width: 44ch; }
.sg-hero--v2 .sg-hero__trustrow { margin-top: var(--wp--preset--spacing--md); }
/* Легибельность H1/лида над чистым фото — светлый ореол вместо фоновой вуали.
   На мобиле (светлый фон) практически незаметен. */
.sg-hero--v2 .sg-hero__title,
.sg-hero--v2 .sg-hero__lead { text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5); }

/* Карточка-поиск: ШИРОКИЙ бар в ОДНУ строку —
   [ эйбрау «Направление» / инпут ........ ][ кнопка «Найти авто» ]. */
.cz-search {
	margin-top: var(--wp--preset--spacing--lg);
	max-inline-size: none;
	padding: 8px;
	gap: 0;
	border-radius: var(--r-xl);
}
.cz-search:focus-within { box-shadow: var(--sh-e4), var(--sh-inset-hi), var(--sh-ring); }
/* Дропдаун автокомплита: бар и его выпадашка ПОВЕРХ ленты/статов (те создают
   стек-контексты через will-change у .sg-stagger). z-index на баре поднимает весь
   стек-контекст поиска над последующим контентом. Список якорим к БАРУ (.sg-ac
   static → containing block = .cz-search) → во всю ширину бара, строки крупнее. */
.cz-search { position: relative; z-index: 40; }
.cz-search .sg-ac { position: static; }
.cz-search .sg-ac__list { inset-inline: 0; z-index: 60; padding: var(--wp--preset--spacing--xs-2); }
.cz-search .sg-ac__opt { padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--sm); border-radius: var(--r-lg); }
/* Дропдаун поиска — скругление как у бара-поля (--r-xl); ховеры вариантов — --r-lg (в тон). */
.cz-search .sg-ac__list { border-radius: var(--r-xl); }
/* Подсказка/ошибка поиска («Ничего не найдено — …») — ПОД баром, а не внутри него.
   Позиционируется относительно .cz-search (position:relative), как выпадашка. */
.cz-search .sg-ac__hint {
	position: absolute;
	top: calc(100% + var(--wp--preset--spacing--xs-3));
	inset-inline: 0;
	margin: 0;
	padding-inline: var(--wp--preset--spacing--sm);
}
.cz-search .sg-ac__name { font-size: var(--wp--preset--font-size--base); }
.cz-search .sg-ac__country { font-size: var(--wp--preset--font-size--small); }
.cz-search__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--xs-2);
	align-items: stretch;
}
.cz-search__field { min-inline-size: 0; }
/* Внутреннее поле «плоское» — визуальный контейнер = сама карточка-бар. */
.cz-search .field__control {
	min-height: 64px;
	padding-inline: var(--wp--preset--spacing--sm);
	gap: var(--wp--preset--spacing--xs);
	background: transparent;
	border-color: transparent;
}
.cz-search .field__control:focus-within { box-shadow: none; border-color: transparent; }
.cz-search__inputwrap { display: grid; gap: 0; flex: 1 1 auto; min-inline-size: 0; }
.cz-search__eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-muted);
	line-height: 1;
}
/* Значение/плейсхолдер — ЖИРНЫМ ТЁМНЫМ (как в референсе). */
.cz-search .field__control input {
	min-height: auto;
	padding: 3px 0 0;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	color: var(--c-ink);
}
.cz-search .field__control input::placeholder { color: var(--c-ink); opacity: 0.72; }
/* Кнопка в баре — НЕ pill. Радиус КОНЦЕНТРИЧЕН бару: у бара --r-xl и отступ 8px,
   значит внутренний радиус кнопки = --r-xl − 8px — тогда скругление кнопки идёт
   параллельно краю поля с ровным зазором (визуально «как у поля»). ЗЕЛЁНАЯ. */
.cz-search__submit {
	align-self: stretch;
	min-height: 64px;
	white-space: nowrap;
	border-radius: calc(var(--r-xl) - 8px);
	--btn-bg: var(--c-success);
	--btn-fg: #fff;
}
.cz-search__submit:hover { --btn-bg: var(--c-success-strong); }
/* Базовый .btn (border-radius:--r-pill) объявлен ПОЗЖЕ в каскаде и при равной
   специфичности перебивал радиус кнопки (оставался pill). Поднимаем специфичность
   до (.cz-search .cz-search__submit), чтобы вписанное скругление реально победило. */
.cz-search .cz-search__submit { border-radius: calc(var(--r-xl) - 8px); }
@media (max-width: 479px) {
	.cz-search__submit span { display: none; }
	.cz-search__submit { inline-size: 56px; padding-inline: 0; }
}
/* Тонкая заметка ПОД баром (не внутри) — сам бар остаётся чистым. */
.cz-search__note {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
}
.cz-search__note svg { inline-size: 0.9rem; block-size: 0.9rem; color: var(--c-primary); flex: none; }

/* Лента «Популярные направления»: эйбрау слева + 4 таблетки + кнопка «Все N».
   На мобиле лента горизонтально прокручивается (scroll-snap); с 1024px — в ряд. */
.cz-rail {
	margin-top: var(--wp--preset--spacing--xl);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}
@media (min-width: 1024px) {
	.cz-rail { flex-direction: row; align-items: center; gap: var(--wp--preset--spacing--lg); }
}
/* Эйбрау ленты — приглушённо-серый uppercase БЕЗ декоративной линии (перекрываем
   акцент-дефис и teal-цвет базового .sg-eyebrow). */
.cz-rail__eyebrow { flex: none; margin-bottom: 0; align-items: flex-start; color: var(--c-muted); }
.cz-rail__eyebrow::before { content: none; }
/* На десктопе эйбрау слева от таблеток; узкая колонка → переносится в ~2 строки. */
@media (min-width: 1024px) { .cz-rail__eyebrow { max-inline-size: 8.5rem; } }
.cz-rail__track {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-block: var(--wp--preset--spacing--xs-3) var(--wp--preset--spacing--xs);
	margin-inline: calc(-1 * var(--wp--preset--spacing--xs-3));
	padding-inline: var(--wp--preset--spacing--xs-3);
	scrollbar-width: thin;
	scrollbar-color: var(--c-border-strong) transparent;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
@media (min-width: 1024px) {
	.cz-rail__track {
		flex: 1 1 auto;
		flex-wrap: nowrap;
		overflow: visible;
		margin-inline: 0;
		padding-inline: 0;
	}
	/* 4 таблетки РАВНОЙ ширины; кнопка «Все N» — по контенту (в сетку не входит). */
	.cz-rail__track .cz-dest { flex: 1 1 0; min-inline-size: 0; }
	.cz-rail__track .cz-dest--all { flex: 0 0 auto; }
}
.cz-rail__track::-webkit-scrollbar { height: 6px; }
.cz-rail__track::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-pill); }
.cz-dest {
	scroll-snap-align: start;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: 12px 24px 12px 12px;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-e2);
	color: var(--c-ink);
	text-decoration: none;
	transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.cz-dest:hover { transform: translateY(-2px); box-shadow: var(--sh-e3); border-color: var(--c-border-strong); }
.cz-dest:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.cz-dest__avatar {
	flex: none;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--r-pill);
	object-fit: cover;
	background: var(--c-primary-soft);
}
.cz-dest__avatar--ph {
	display: grid;
	place-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--c-primary-strong);
	text-transform: uppercase;
}
.cz-dest__body { display: grid; gap: 2px; min-inline-size: 0; }
.cz-dest__name { font-weight: 700; font-size: var(--wp--preset--font-size--lg); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Цена — мелкая ЗЕЛЁНАЯ (акцент темы). */
.cz-dest__price { font-size: var(--wp--preset--font-size--small); color: #0e7a66; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
/* «Wszystkie N →» — КОНТУРНАЯ pill-кнопка (не залитая). */
.cz-dest--all {
	padding-inline: var(--wp--preset--spacing--md);
	background: transparent;
	border-color: var(--c-border-strong);
	color: var(--c-primary-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--base);
	gap: 6px;
}
.cz-dest--all svg { inline-size: 1.05em; block-size: 1.05em; }
.cz-dest--all:hover { background: var(--c-primary-soft); border-color: var(--c-primary); }

/* Полоса статов: полноширинный ряд, КРУПНЫЕ цифры (зелёный акцент темы) +
   мелкий лейбл под каждой. 2×2 на мобиле → 4 в ряд с 768px. */
.cz-stats {
	margin-top: var(--wp--preset--spacing--xl);
	margin-bottom: 0;
	/* Линии сверху И снизу (симметрично) — разделитель под статами по просьбе владельца. */
	padding-block: var(--wp--preset--spacing--lg);
	border-block: 1px solid var(--c-border);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--md);
	max-inline-size: none;
}
.cz-stat { padding: 0; }
@media (min-width: 768px) {
	.cz-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
	/* Тонкие вертикальные разделители между колонками. */
	.cz-stat { padding-block: 0; padding-inline: var(--wp--preset--spacing--lg); }
	.cz-stat:first-child { padding-inline-start: 0; }
	.cz-stat + .cz-stat { border-inline-start: 1px solid var(--c-border); }
}
.cz-stat__val {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	/* Значения КОРОТКИЕ (число или одно слово) → крупный акцентный размер в одну
	   строку. Цвет #0e7a66 — как задал координатор (не менять). */
	font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #0e7a66;
}
.cz-stat__lbl { display: block; margin: var(--wp--preset--spacing--xs-3) 0 0; font-size: var(--wp--preset--font-size--small); line-height: 1.35; color: var(--c-muted); }

/* Мобилка: в v2 бейдж-счётчик и trust-чипы ОСТАЮТСЯ (перекрываем общее скрытие
   хрома photobg-hero на узких экранах — для v2 это ключевые элементы). */
@media (max-width: 639px) {
	.sg-hero--v2.sg-hero--photobg .sg-hero__badge { display: inline-flex; }
	.sg-hero--v2.sg-hero--photobg .sg-hero__trustrow { display: flex; }
}

/* --------------------------------------------------------------------------
   Sticky-панель поиска (появляется, когда карточка-поиск hero ушла вверх).
   Компактный бар: бренд + поле поиска + кнопка. Blur-фон на штатных glass-
   токенах; скрытие через transform+visibility (visibility убирает из tab-order
   и из SR, когда бар не виден). Анимация только при no-preference.
   -------------------------------------------------------------------------- */
.cz-sticky {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 95;
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur);
	backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid var(--c-border);
	box-shadow: var(--sh-e2);
	transform: translateY(-100%);
	visibility: hidden;
}
.cz-sticky.is-visible { transform: none; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
	.cz-sticky { transition: transform var(--d-base) var(--ease), visibility var(--d-base) var(--ease); }
}
.cz-sticky__inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	min-height: 60px;
	padding-block: var(--wp--preset--spacing--xs-2);
}
.cz-sticky__brand { flex: none; }
.cz-sticky__brand .brand__word { display: none; }
@media (min-width: 768px) { .cz-sticky__brand .brand__word { display: inline-flex; } }
.cz-sticky__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	margin-inline-start: auto;
	inline-size: 100%;
	max-inline-size: 40rem;
}
.cz-sticky__field { min-inline-size: 0; }
.cz-sticky .field__control { min-height: 44px; }
.cz-sticky .field__control input { font-size: var(--wp--preset--font-size--small); }
.cz-sticky__submit { white-space: nowrap; border-radius: var(--r-md); --btn-bg: var(--c-success); --btn-fg: #fff; }
.cz-sticky__submit:hover { --btn-bg: var(--c-success-strong); }
/* Базовый .btn (--r-pill) идёт позже в каскаде и перебивал радиус кнопки (пилюля).
   Поднимаем специфичность — радиус как у поля (.field__control = --r-md). */
.cz-sticky .cz-sticky__submit { border-radius: var(--r-md); }

/* Кнопка «наверх» — кружок со стрелкой, фикс. внизу справа, на всех страницах.
   Скрыта, пока не прокрутили (.is-visible показывает). Уважает reduced-motion. */
.cz-totop {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--lg);
	inset-inline-end: var(--wp--preset--spacing--lg);
	z-index: 60;
	inline-size: 48px;
	block-size: 48px;
	display: grid;
	place-items: center;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: #0e7a66;
	color: #fff;
	cursor: pointer;
	box-shadow: var(--sh-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), visibility var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.cz-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.cz-totop:hover { background: #0c6353; }
.cz-totop:focus-visible { outline: none; box-shadow: var(--sh-lg), var(--sh-ring); }
.cz-totop svg { inline-size: 22px; block-size: 22px; }
@media (prefers-reduced-motion: reduce) {
	.cz-totop { transition: opacity var(--d-fast) var(--ease), visibility var(--d-fast) var(--ease); transform: none; }
}
@media (max-width: 479px) {
	.cz-sticky__submit span { display: none; }
	.cz-sticky__submit { inline-size: 44px; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   HERO — solo-вариант (хаб страны): одна центрированная колонка,
   под заголовком/лидом/счётчиками — встроенный WL-виджет бронирования.
   Заскоупен модификатором .sg-hero--solo, чтобы НЕ трогать двухколоночный
   hero главной / каталога (там остаётся .sg-hero__form-col).
   -------------------------------------------------------------------------- */
.sg-hero--solo .sg-hero__inner { grid-template-columns: minmax(0, 1fr); }
/* Компактный solo-hero: без бейджа и счётчиков композиция «крошки → H1 → лид →
   виджет» плотная. Ужимаем вертикальные отступы секции на шаг относительно
   глобального hero (xl/xl-2 → lg/xl), чтобы не осталось «дыр» и виджет поднялся
   ближе к заголовку. Scope строго к .sg-hero--solo — front-page hero не затронут. */
.sg-hero.sg-hero--solo { padding-block: var(--wp--preset--spacing--lg); }
@media (min-width: 1024px) {
	.sg-hero.sg-hero--solo { padding-block: var(--wp--preset--spacing--xl); }
}
/* Одна центрированная колонка. НЕ используем flex+align-items:center на
   колонке — это даёт shrink-to-content ширину и распирает грид-элемент
   встроенным виджетом на мобиле. Центрируем текстом + margin-inline:auto,
   а min-inline-size:0 позволяет грид-элементу ужаться до трека. */
.sg-hero--solo .sg-hero__lead-col {
	min-inline-size: 0;
	inline-size: 100%;
	/* Колонка занимает всю ширину контейнера ultra (~1444), а не узкую полосу. */
	max-inline-size: none;
	margin-inline: auto;
	text-align: center;
}
.sg-hero--solo .sg-hero__title,
.sg-hero--solo .sg-hero__lead { margin-inline: auto; }
/* H1 хаба страны — примерно вдвое меньше глобального hero-display: токен xl-3
   (H2, clamp 2.1→3rem против display clamp 3→5.5rem). Scope строго к solo, чтобы
   размер front-page/каталога (глобальный .sg-hero__title = display) не поехал.
   Градиент .sg-hero__grad на названии страны сохраняется (правится только size). */
.sg-hero--solo .sg-hero__title {
	font-size: var(--wp--preset--font-size--xl-3);
	line-height: 1.08;
	max-width: 20ch;
}
/* Меру абзаца-лида держим читаемой, хотя блок широкий (иначе длинные строки). */
.sg-hero--solo .sg-hero__lead { max-inline-size: 64ch; }

/* Обёртка встроенного виджета бронирования localrent на хабе страны.
   Оформление зоны виджета вынесено 1:1 на уровень страницы города: панель-облик,
   skeleton-высоту (анти-CLS) и гашение фона после инжекта живой выдачи несёт
   вложенный .sg-widget (см. блок «ЗОНА ВИДЖЕТА БРОНИРОВАНИЯ» ниже). Здесь —
   только layout: ограниченная центрированная колонка + верхний отступ от счётчиков.
   Панель тут НЕ рисуем намеренно: иначе после инжекта localrent-выдачи её фон/рамка
   остались бы вторым слоем поверх снятого фона .sg-widget (двойная рамка). */
.sg-hero__widget {
	inline-size: 100%;
	/* Паритет по ширине с городом и с секцией «Города» под hero: родитель —
	   .sg-container--ultra, секция городов — .sg-container--wide, обе = --c-ultra
	   с одним gutter. Занимаем весь content-box родителя → левый/правый край
	   зоны виджета совпадает с карточками городов ниже и с левым краем H1/крошек.
	   Прежний min(72rem, 100%) = 1152px сужал зону на ~400px vs секция под ней. */
	max-inline-size: 100%;
	margin-inline: auto;
	/* Компактный solo-hero: виджет поднят ближе к H1/лиду (было xl=48 при наличии
	   счётчиков; после их удаления — lg=32, без «дыры» между лидом и формой). */
	margin-block-start: var(--wp--preset--spacing--lg);
	text-align: start;
}

/* ==========================================================================
   ЛОГО / ВОРДМАРК
   ========================================================================== */
.brand {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	text-decoration: none;
	color: var(--c-ink);
}
.brand__mark {
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: var(--r-md);
	background: #0B6353;
	box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255, 255, 255, 0.18);
	flex: none;
	overflow: hidden;
}
.brand__mark svg { inline-size: 60%; block-size: 60%; display: block; }
.brand__mark img { inline-size: 100%; block-size: 100%; display: block; }
.brand__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.03em;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	color: currentColor;
}
.brand__word b { color: var(--c-primary-strong); font-weight: 800; }
.brand--lg .brand__mark { inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--r-lg); }
.brand--lg .brand__word { font-size: var(--wp--preset--font-size--xl-3); }
.brand--on-dark { color: var(--c-on-dark); }
/* Марка-шрифт вариативная, макс вес 800 (fonts.css) — «zz» и белые буквы одного
   веса. На тёмном фоне тёмный #0e7a66 оптически «худеет» (низкий контраст), поэтому
   чуть утолщаем штрих ТЕМ ЖЕ цветом (text-stroke) — смотрятся вровень с белыми. */
.brand--on-dark .brand__word b { color: #0e7a66; -webkit-text-stroke: 0.4px #0e7a66; }
/* Логотип в тёмном футере — без «свечения»: убираем тень/подсветку у марки-иконки. */
.brand--on-dark .brand__mark { box-shadow: none; }

.sg-brand-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .sg-brand-grid { grid-template-columns: repeat(2, 1fr); } }
.sg-brand-tile {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--r-lg);
	border: 1px solid var(--c-border);
	background: var(--c-base);
	min-height: 160px;
	justify-content: center;
	align-items: flex-start;
}
.sg-brand-tile--dark { background: var(--c-ink-strong); border-color: var(--c-ink-strong); }
.sg-brand-tile--soft { background: var(--c-primary-soft); border-color: transparent; }
.sg-brand-tile__label {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.02em;
}
.sg-brand-tile--dark .sg-brand-tile__label { color: var(--c-on-dark); opacity: 0.7; }
/* Clear-space demo */
.brand--clearspace {
	position: relative;
	padding: var(--wp--preset--spacing--md);
	outline: 1px dashed var(--c-border-strong);
	border-radius: var(--r-md);
}

/* ==========================================================================
   ЦВЕТ — свотчи
   ========================================================================== */
.sg-swatch {
	overflow: clip;
	border-radius: var(--r-md);
	border: 1px solid var(--c-border);
	background: var(--c-base);
}
.sg-swatch__chip {
	block-size: 84px;
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--xs-2);
}
.sg-swatch__contrast {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	padding: 2px 8px;
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--c-base) 80%, transparent);
	color: var(--c-ink);
}
.sg-swatch__chip--on-light .sg-swatch__contrast { background: rgba(255, 255, 255, 0.85); color: var(--c-ink); }
.sg-swatch__chip--on-dark .sg-swatch__contrast { background: rgba(14, 23, 20, 0.5); color: #fff; }
.sg-swatch__body { padding: var(--wp--preset--spacing--xs); display: grid; gap: 2px; }
.sg-swatch__name { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.sg-swatch__token {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
}
.sg-swatch__hex {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-ink);
	text-transform: uppercase;
}

/* ==========================================================================
   ТИПОГРАФИКА
   ========================================================================== */
.sg-type { display: grid; gap: var(--wp--preset--spacing--md); }
.sg-type__row {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	padding-block: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--c-border);
	align-items: baseline;
}
@media (min-width: 768px) {
	.sg-type__row { grid-template-columns: 200px 1fr; gap: var(--wp--preset--spacing--lg); }
}
.sg-type__meta { display: grid; gap: 2px; align-content: start; }
.sg-type__label { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.sg-type__spec {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
}
.sg-type__sample { color: var(--c-ink); margin: 0; }
.sg-type__sample--display { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.025em; font-size: var(--wp--preset--font-size--display); line-height: 1.04; }
.sg-type__sample--h1 { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.02em; font-size: var(--wp--preset--font-size--xl-4); line-height: 1.08; }
.sg-type__sample--h2 { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.02em; font-size: var(--wp--preset--font-size--xl-3); line-height: 1.1; }
.sg-type__sample--h3 { font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -0.018em; font-size: var(--wp--preset--font-size--xl-2); line-height: 1.15; }
.sg-type__sample--h4 { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: var(--wp--preset--font-size--xl); line-height: 1.25; }
.sg-type__sample--lead { font-size: var(--wp--preset--font-size--lg); line-height: 1.55; color: var(--c-muted); }
.sg-type__sample--body { font-size: var(--wp--preset--font-size--base); line-height: 1.65; max-width: 65ch; }
.sg-type__sample--small { font-size: var(--wp--preset--font-size--small); line-height: 1.5; color: var(--c-muted); }
.sg-type__sample--caption { font-size: var(--wp--preset--font-size--caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); font-weight: 600; }

/* ==========================================================================
   СПЕЙСИНГ / РАДИУСЫ / ТЕНИ / БРЕЙКПОИНТЫ
   ========================================================================== */
.sg-scale { display: grid; gap: var(--wp--preset--spacing--xs); }
.sg-scale__row { display: grid; grid-template-columns: 110px 1fr; gap: var(--wp--preset--spacing--sm); align-items: center; }
.sg-scale__meta { display: grid; gap: 0; }
.sg-scale__token { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--c-ink); }
.sg-scale__val { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
.sg-scale__bar { block-size: 16px; border-radius: var(--r-sm); background: var(--c-primary); }

.sg-radii, .sg-shadows { display: grid; gap: var(--wp--preset--spacing--md); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .sg-radii, .sg-shadows { grid-template-columns: repeat(5, 1fr); } }
.sg-radius-box, .sg-shadow-box {
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: end center;
	padding: var(--wp--preset--spacing--xs);
	background: var(--c-base);
	border: 1px solid var(--c-border);
}
.sg-radius-box { background: var(--c-primary-soft); border-color: transparent; }
.sg-radius-box--sm { border-radius: var(--r-sm); }
.sg-radius-box--md { border-radius: var(--r-md); }
.sg-radius-box--lg { border-radius: var(--r-lg); }
.sg-radius-box--xl { border-radius: var(--r-xl); }
.sg-radius-box--pill { border-radius: var(--r-pill); }
.sg-shadows { padding-block: var(--wp--preset--spacing--xs); }
.sg-shadow-box { border-color: transparent; border-radius: var(--r-md); }
.sg-shadow-box--xs { box-shadow: var(--sh-xs); }
.sg-shadow-box--sm { box-shadow: var(--sh-sm); }
.sg-shadow-box--md { box-shadow: var(--sh-md); }
.sg-shadow-box--lg { box-shadow: var(--sh-lg); }
.sg-box-token { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--c-ink); background: color-mix(in srgb, var(--c-base) 70%, transparent); padding: 1px 6px; border-radius: var(--r-pill); }

.sg-bp { display: grid; gap: var(--wp--preset--spacing--xs-2); }
.sg-bp__row { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--wp--preset--spacing--sm); align-items: center; padding-block: var(--wp--preset--spacing--xs-2); border-top: 1px solid var(--c-border); }
.sg-bp__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; }
.sg-bp__track { block-size: 8px; border-radius: var(--r-pill); background: var(--c-sunken); position: relative; overflow: clip; }
.sg-bp__fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--c-primary); border-radius: var(--r-pill); }
.sg-bp__val { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }

/* ==========================================================================
   КНОПКИ
   ========================================================================== */
.btn {
	--btn-bg: var(--c-primary);
	--btn-fg: var(--c-on-primary);
	--btn-bd: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs-2);
	min-height: 44px;
	padding: 0 var(--wp--preset--spacing--md);
	border: 1px solid var(--btn-bd);
	border-radius: var(--r-pill);
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease),
		border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-ring); }

.btn--primary { --btn-bg: var(--c-primary); --btn-fg: var(--c-on-primary); box-shadow: var(--sh-sm); }
.btn--primary:hover { --btn-bg: var(--c-primary-strong); box-shadow: var(--sh-md); }

.btn--secondary { --btn-bg: var(--c-base); --btn-fg: var(--c-primary-strong); --btn-bd: var(--c-border-strong); }
.btn--secondary:hover { --btn-bd: var(--c-primary); --btn-bg: var(--c-primary-soft); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: transparent; }
.btn--ghost:hover { --btn-bg: var(--c-sunken); }

.btn--accent { --btn-bg: var(--c-accent-strong); --btn-fg: #fff; box-shadow: var(--sh-sm); }
.btn--accent:hover { --btn-bg: var(--c-accent); --btn-fg: #fff; box-shadow: var(--sh-md); }

.btn--lg { min-height: 52px; padding-inline: var(--wp--preset--spacing--lg); font-size: var(--wp--preset--font-size--base); }
.btn--sm { min-height: 38px; padding-inline: var(--wp--preset--spacing--sm); font-size: var(--wp--preset--font-size--caption); }
.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

.sg-btn-row { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); align-items: center; }
.sg-state-label { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); margin-bottom: var(--wp--preset--spacing--xs-2); display: block; }

/* ==========================================================================
   ФОРМЫ
   ========================================================================== */
.field { display: grid; gap: var(--wp--preset--spacing--xs-3); }
.field__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--c-ink);
	display: inline-flex;
	gap: 4px;
}
.field__label .req { color: var(--c-error); }
.field__hint { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
.field__error {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-error);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.field__control {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--sm);
	background: var(--c-base);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-md);
	transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field__control svg { inline-size: 1.25rem; block-size: 1.25rem; color: var(--c-muted); flex: none; }
.field__control input,
.field__control select {
	appearance: none;
	border: 0;
	outline: none;
	background: transparent;
	width: 100%;
	min-height: 44px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--c-ink);
}
.field__control input::placeholder { color: var(--c-muted); }
.field__control:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-ring); }
.field--error .field__control { border-color: var(--c-error); }
.field--error .field__control:focus-within { box-shadow: 0 0 0 3px rgba(192, 50, 43, 0.3); }
.field__control--select { position: relative; }
.field__control--select::after {
	content: "";
	inline-size: 0.6rem; block-size: 0.6rem;
	margin-inline-start: auto;
	border-inline-end: 2px solid var(--c-muted);
	border-block-end: 2px solid var(--c-muted);
	transform: rotate(45deg) translateY(-2px);
	pointer-events: none;
}
.field__control--disabled { background: var(--c-sunken); border-color: var(--c-border); opacity: 0.7; }
.field__control--disabled input { color: var(--c-muted); }

/* Чекбоксы / радио */
.choice { display: inline-flex; align-items: flex-start; gap: var(--wp--preset--spacing--xs-2); cursor: pointer; font-size: var(--wp--preset--font-size--small); color: var(--c-ink); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__box {
	flex: none;
	inline-size: 22px; block-size: 22px;
	display: grid; place-items: center;
	border: 1.5px solid var(--c-border-strong);
	background: var(--c-base);
	border-radius: var(--r-sm);
	transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
}
.choice__box--radio { border-radius: var(--r-pill); }
.choice__box svg { inline-size: 14px; block-size: 14px; color: #fff; opacity: 0; transform: scale(0.6); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.choice__box--radio::after { content: ""; inline-size: 9px; block-size: 9px; border-radius: var(--r-pill); background: #fff; opacity: 0; transform: scale(0.4); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.choice input:checked + .choice__box { background: var(--c-primary); border-color: var(--c-primary); }
.choice input:checked + .choice__box svg { opacity: 1; transform: scale(1); }
.choice input:checked + .choice__box--radio::after { opacity: 1; transform: scale(1); }
.choice input:focus-visible + .choice__box { box-shadow: var(--sh-ring); border-color: var(--c-primary); }
.choice input:disabled + .choice__box { background: var(--c-sunken); border-color: var(--c-border); }
.choice:has(input:disabled) { color: var(--c-muted); cursor: not-allowed; }

/* Дата-пикер (визуальный макет) */
.sg-datepicker {
	width: 100%;
	max-width: 320px;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-md);
	padding: var(--wp--preset--spacing--sm);
}
.sg-datepicker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--wp--preset--spacing--xs); }
.sg-datepicker__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.sg-datepicker__nav { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--r-pill); border: 1px solid var(--c-border); background: var(--c-base); cursor: pointer; color: var(--c-ink); }
.sg-datepicker__nav:hover { background: var(--c-sunken); }
.sg-datepicker__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sg-datepicker__dow { text-align: center; font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); padding-block: 4px; font-weight: 600; }
.sg-datepicker__day { aspect-ratio: 1; display: grid; place-items: center; font-size: var(--wp--preset--font-size--caption); border-radius: var(--r-sm); color: var(--c-ink); border: 0; background: transparent; cursor: pointer; font-variant-numeric: tabular-nums; }
.sg-datepicker__day:hover { background: var(--c-primary-soft); }
.sg-datepicker__day--muted { color: var(--c-border-strong); }
.sg-datepicker__day--range { background: var(--c-primary-soft); border-radius: 0; }
.sg-datepicker__day--start { background: var(--c-primary); color: #fff; border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.sg-datepicker__day--end { background: var(--c-primary); color: #fff; border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }

/* ==========================================================================
   БЕЙДЖИ
   ========================================================================== */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1.2;
	border: 1px solid transparent;
}
.badge svg { inline-size: 0.9em; block-size: 0.9em; }
.badge--neutral { background: var(--c-sunken); color: var(--c-ink); border-color: var(--c-border); }
.badge--brand { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.badge--success { background: var(--c-success-soft); color: var(--c-success-strong); }
.badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.badge--error { background: var(--c-error-soft); color: var(--c-error); }
.badge--accent { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.badge--solid { background: var(--c-primary); color: var(--c-on-primary); }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.sg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs-2); font-size: var(--wp--preset--font-size--small); }
.sg-crumbs a { color: var(--c-muted); text-decoration: none; transition: color var(--d-fast) var(--ease); }
.sg-crumbs a:hover { color: var(--c-primary-strong); }
.sg-crumbs__sep { color: var(--c-border-strong); display: inline-flex; }
.sg-crumbs [aria-current="page"] { color: var(--c-ink); font-weight: 600; }

/* ==========================================================================
   FAQ — аккордеон (details/summary)
   ========================================================================== */
.sg-faq { display: grid; gap: var(--wp--preset--spacing--xs); }
/* FAQ страны: карточки на всю ширину, а текст вопроса/ответа — на ~2/3, в тон
   растянутому хедеру (плюс-иконка остаётся у правого края карточки). */
@media (min-width: 1024px) {
	#faq .sg-acc__q > span:first-child { max-width: 66%; }
	#faq .sg-acc__a { max-width: 66%; }
}
/* FAQ на главной (.sg-faq-center) — весь блок на ~2/3 и по центру: хедер и
   аккордеон центрируются колонкой. Компаунд #faq.sg-faq-center (id+class) бьёт
   общий #faq-кап выше по специфичности → текст заполняет узкую карточку целиком. */
@media (min-width: 1024px) {
	#faq.sg-faq-center .sg-section__head,
	#faq.sg-faq-center .sg-faq { max-width: 66%; margin-inline: auto; }
	#faq.sg-faq-center .sg-acc__q > span:first-child,
	#faq.sg-faq-center .sg-acc__a { max-width: none; }
}
.sg-acc { background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-md); overflow: clip; transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.sg-acc[open] { border-color: var(--c-border-strong); box-shadow: var(--sh-sm); }
.sg-acc__q {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	color: var(--c-ink);
}
.sg-acc__q::-webkit-details-marker { display: none; }
.sg-acc__q:focus-visible { outline: none; box-shadow: var(--sh-ring); border-radius: var(--r-md); }
.sg-acc__icon { flex: none; inline-size: 24px; block-size: 24px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--c-primary-soft); color: var(--c-primary-strong); transition: transform var(--d-base) var(--ease), background var(--d-fast) var(--ease); }
.sg-acc[open] .sg-acc__icon { transform: rotate(45deg); background: var(--c-primary); color: #fff; }
.sg-acc__a { padding: 0 var(--wp--preset--spacing--md) var(--wp--preset--spacing--md); color: var(--c-muted); line-height: 1.6; font-size: var(--wp--preset--font-size--base); max-width: 70ch; }

/* ==========================================================================
   ТАБЫ (CSS-only, на radio — нативная стрелочная навигация)
   ========================================================================== */
.sg-tabs { background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: clip; }
.sg-tabs__list { display: flex; gap: var(--wp--preset--spacing--xs-3); padding: var(--wp--preset--spacing--xs-2); background: var(--c-sunken); border-bottom: 1px solid var(--c-border); overflow-x: auto; }
.sg-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.sg-tabs__tab {
	flex: 1;
	white-space: nowrap;
	text-align: center;
	padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--sm);
	min-height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--r-sm);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-muted);
	cursor: pointer;
	transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.sg-tabs__tab:hover { color: var(--c-ink); }
.sg-tabs__panel { display: none; padding: var(--wp--preset--spacing--md); line-height: 1.6; color: var(--c-muted); }
.sg-tabs__panel p { max-width: 65ch; }
#sg-tab-1:checked ~ .sg-tabs__list label[for="sg-tab-1"],
#sg-tab-2:checked ~ .sg-tabs__list label[for="sg-tab-2"],
#sg-tab-3:checked ~ .sg-tabs__list label[for="sg-tab-3"] { background: var(--c-base); color: var(--c-primary-strong); box-shadow: var(--sh-xs); }
#sg-tab-1:checked ~ .sg-tabs__panels #sg-panel-1,
#sg-tab-2:checked ~ .sg-tabs__panels #sg-panel-2,
#sg-tab-3:checked ~ .sg-tabs__panels #sg-panel-3 { display: block; }
.sg-tabs input:focus-visible ~ .sg-tabs__list label { }
#sg-tab-1:focus-visible ~ .sg-tabs__list label[for="sg-tab-1"],
#sg-tab-2:focus-visible ~ .sg-tabs__list label[for="sg-tab-2"],
#sg-tab-3:focus-visible ~ .sg-tabs__list label[for="sg-tab-3"] { box-shadow: var(--sh-ring); }

/* Вкладки условий страны (co-*): тот же механизм, что и sg-*, но свой namespace,
   чтобы не конфликтовать с другими группами вкладок на странице. Без этих правил
   панели остаются display:none и блок «Условия/Страховка/Документы» визуально пуст. */
#co-tab-1:checked ~ .sg-tabs__list label[for="co-tab-1"],
#co-tab-2:checked ~ .sg-tabs__list label[for="co-tab-2"],
#co-tab-3:checked ~ .sg-tabs__list label[for="co-tab-3"] { background: var(--c-base); color: var(--c-primary-strong); box-shadow: var(--sh-xs); }
#co-tab-1:checked ~ .sg-tabs__panels #co-panel-1,
#co-tab-2:checked ~ .sg-tabs__panels #co-panel-2,
#co-tab-3:checked ~ .sg-tabs__panels #co-panel-3 { display: block; }
#co-tab-1:focus-visible ~ .sg-tabs__list label[for="co-tab-1"],
#co-tab-2:focus-visible ~ .sg-tabs__list label[for="co-tab-2"],
#co-tab-3:focus-visible ~ .sg-tabs__list label[for="co-tab-3"] { box-shadow: var(--sh-ring); }

/* ==========================================================================
   КАРТОЧКА ЛОКАЦИИ (город)
   ========================================================================== */
.loc-card {
	display: flex;
	flex-direction: column;
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	overflow: clip;
	box-shadow: var(--sh-sm);
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.loc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--c-border-strong); }
.loc-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background:
		radial-gradient(110% 120% at 80% 0%, color-mix(in srgb, var(--c-primary) 35%, transparent), transparent 60%),
		linear-gradient(135deg, var(--c-primary-strong), var(--c-ink-strong));
	display: flex; align-items: flex-end; padding: var(--wp--preset--spacing--sm);
}
.loc-card__media::after {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.4px);
	background-size: 18px 18px;
	opacity: 0.5;
	mix-blend-mode: overlay;
}
.loc-card__pin { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: var(--wp--preset--font-size--caption); background: rgba(14,23,20,0.34); padding: 4px 10px; border-radius: var(--r-pill); backdrop-filter: blur(2px); }
.loc-card__fav { position: absolute; top: var(--wp--preset--spacing--xs); inset-inline-end: var(--wp--preset--spacing--xs); z-index: 1; inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(255,255,255,0.92); border: 0; cursor: pointer; color: var(--c-ink); box-shadow: var(--sh-xs); }
.loc-card__fav:hover { color: var(--c-error); }
.loc-card__body { display: grid; gap: var(--wp--preset--spacing--xs-2); padding: var(--wp--preset--spacing--sm); }
.loc-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--xs-2); }
.loc-card__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--lg); letter-spacing: -0.015em; margin: 0; }
.loc-card__rating { display: inline-flex; align-items: center; gap: 4px; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--c-ink); }
.loc-card__rating svg { color: var(--c-accent); inline-size: 1rem; block-size: 1rem; }
.loc-card__meta { font-size: var(--wp--preset--font-size--small); color: var(--c-muted); }
.loc-card__tags { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-3); margin-top: var(--wp--preset--spacing--xs-3); }
.loc-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--wp--preset--spacing--sm); margin-top: var(--wp--preset--spacing--xs); padding-top: var(--wp--preset--spacing--xs); border-top: 1px solid var(--c-border); }
.loc-card__price { display: grid; gap: 0; }
.loc-card__price b { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.loc-card__price span { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
/* Компактная карточка города-ссылки: имя + стрелка в строке, без цены/футера. */
a.loc-card { text-decoration: none; color: inherit; display: block; }
.loc-card__go {
	flex: none;
	inline-size: 36px; block-size: 36px;
	display: grid; place-items: center;
	border-radius: var(--r-pill);
	background: var(--c-primary); color: var(--c-on-primary);
	transition: background 0.15s ease, transform 0.15s ease;
}
.loc-card__go svg { inline-size: 1.05rem; block-size: 1.05rem; }
.loc-card:hover .loc-card__go { background: var(--c-primary-strong); transform: translateX(2px); }

/* ==========================================================================
   КАРТОЧКА-ХАБ СТРАНЫ
   ========================================================================== */
.hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	background:
		linear-gradient(180deg, var(--c-base), var(--c-base)) padding-box,
		linear-gradient(135deg, var(--c-primary), var(--c-accent)) border-box;
	border: 1.5px solid transparent;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.hub-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.hub-card__top { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); }
.hub-card__flag { inline-size: 44px; block-size: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary-strong); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--lg); flex: none; }
.hub-card__name { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.015em; margin: 0; }
.hub-card__count { font-size: var(--wp--preset--font-size--small); color: var(--c-muted); }
.hub-card__cities { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-3); }
.hub-card__city { font-size: var(--wp--preset--font-size--small); color: var(--c-primary-strong); text-decoration: none; padding: 4px 10px; border-radius: var(--r-pill); background: var(--c-primary-soft); transition: background var(--d-fast) var(--ease); }
.hub-card__city:hover { background: color-mix(in srgb, var(--c-primary-soft) 60%, var(--c-primary) 18%); }
.hub-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--c-primary-strong); text-decoration: none; }
.hub-card__link svg { transition: transform var(--d-fast) var(--ease); }
.hub-card:hover .hub-card__link svg { transform: translateX(3px); }

/* ==========================================================================
   БЛОК ДОВЕРИЯ / USP
   ========================================================================== */
.usp { display: grid; gap: var(--wp--preset--spacing--sm); }
.usp__item { display: flex; gap: var(--wp--preset--spacing--sm); padding: var(--wp--preset--spacing--md); background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.usp__icon { flex: none; inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.usp__icon svg { inline-size: 24px; block-size: 24px; }
.usp__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--lg); margin: 0 0 4px; letter-spacing: -0.01em; }
.usp__text { color: var(--c-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.55; margin: 0; }
/* Полноширинная сетка УТП (главная «Почему Carenzzo»): комфортная 1 колонка на
   мобиле и до 600px → 2×2, когда карточкам хватает ширины (заголовки не рвутся). */
.usp--cols { gap: var(--wp--preset--spacing--md); }
.usp--cols .usp__item { block-size: 100%; }
@media (min-width: 600px) { .usp--cols { grid-template-columns: repeat(2, 1fr); } }

.sg-reviews { display: grid; gap: var(--wp--preset--spacing--sm); }
.review { padding: var(--wp--preset--spacing--md); background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-xs); display: grid; gap: var(--wp--preset--spacing--xs); }
.review__stars { display: inline-flex; gap: 2px; color: var(--c-accent); }
.review__stars svg { inline-size: 1rem; block-size: 1rem; }
.review__text { color: var(--c-ink); line-height: 1.55; font-size: var(--wp--preset--font-size--base); margin: 0; }
.review__author { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs-2); }
.review__avatar { inline-size: 36px; block-size: 36px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--c-primary); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.review__name { font-weight: 600; font-size: var(--wp--preset--font-size--small); }
.review__loc { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }

/* ==========================================================================
   CTA-СЕКЦИЯ
   ========================================================================== */
.sg-cta {
	position: relative;
	overflow: clip;
	border-radius: var(--r-xl);
	padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md);
	background:
		radial-gradient(120% 140% at 88% -20%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 55%),
		linear-gradient(135deg, var(--c-primary-strong), var(--c-ink-strong));
	color: #fff;
	text-align: center;
	box-shadow: var(--sh-lg);
}
.sg-cta::before {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1.4px);
	background-size: 22px 22px;
	opacity: 0.4;
}
.sg-cta > * { position: relative; }
.sg-cta__title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.02em; font-size: var(--wp--preset--font-size--xl-3); margin: 0 auto; max-width: 20ch; line-height: 1.1; }
.sg-cta__lead { margin: var(--wp--preset--spacing--xs) auto 0; max-width: 50ch; color: var(--c-on-dark); font-size: var(--wp--preset--font-size--lg); line-height: 1.5; }
.sg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); justify-content: center; margin-top: var(--wp--preset--spacing--lg); }
.sg-cta .btn--secondary { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.4); }
.sg-cta .btn--secondary:hover { --btn-bg: rgba(255,255,255,0.12); --btn-bd: #fff; }

/* ==========================================================================
   ЗОНА ВИДЖЕТА БРОНИРОВАНИЯ — анти-CLS скелетон
   ========================================================================== */
.sg-widget {
	position: relative;
	min-height: clamp(420px, 64vh, 560px); /* зарезервированная высота → нулевой CLS */
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-sm);
	overflow: clip;
}
.sg-widget__skeleton { position: absolute; inset: 0; z-index: 0; padding: var(--wp--preset--spacing--md); display: grid; gap: var(--wp--preset--spacing--md); align-content: start; transition: opacity .35s var(--ease), visibility .35s var(--ease); }
.sg-widget__bar { display: flex; gap: var(--wp--preset--spacing--sm); flex-wrap: wrap; }
.sk { position: relative; overflow: clip; background: var(--c-sunken); border-radius: var(--r-md); }
.sk::after {
	content: "";
	position: absolute; inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-base) 70%, transparent), transparent);
	animation: sg-shimmer 1.6s var(--ease) infinite;
}
.sk--field { block-size: 56px; flex: 1 1 180px; border-radius: var(--r-md); }
.sk--btn { block-size: 56px; flex: 0 0 140px; border-radius: var(--r-pill); background: var(--c-primary-soft); }
.sk--row { block-size: 96px; border-radius: var(--r-lg); }
.sg-widget__note { position: absolute; z-index: 0; inset-block-end: var(--wp--preset--spacing--sm); inset-inline: var(--wp--preset--spacing--md); display: flex; align-items: center; justify-content: center; gap: var(--wp--preset--spacing--xs-2); font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); transition: opacity .35s var(--ease), visibility .35s var(--ease); }
.sg-widget__note svg { inline-size: 1rem; block-size: 1rem; color: var(--c-primary); }
@keyframes sg-shimmer { 100% { transform: translateX(100%); } }

/* Живой виджет localrent рендерится поверх skeleton-плейсхолдера.
   До инициализации обёртка пустая (нулевая высота) → видно skeleton в зарезервированной зоне;
   после инжекта #carenzzo обёртка занимает зону, а skeleton/нота гасятся (без двойного контента, без CLS). */
.sg-widget .carenzzo-localrent-widget { position: relative; z-index: 1; }
.sg-widget:has(.carenzzo-localrent-widget > [id="carenzzo"]) .sg-widget__skeleton,
.sg-widget:has(.carenzzo-localrent-widget > [id="carenzzo"]) .sg-widget__note { opacity: 0; visibility: hidden; }

/* После инжекта живой выдачи localrent наша подложка-контейнер УБИРАЕТСЯ: карточки
   авто localrent несут собственный фон/рамку/тень, и контейнерные фон+рамка+тень
   создавали бы вокруг них второй конкурирующий слой. Снимаем фон/границу/тень
   (граница → transparent, чтобы не было сдвига на 1px) и отпускаем overflow/min-height —
   живая выдача ложится на чистый фон страницы. До инжекта подложка и skeleton с
   зарезервированной высотой остаются (нулевой CLS). Специфичность :has() (0,3,0)
   перекрывает базовые .sg-widget-правила без !important. */
.sg-widget:has(.carenzzo-localrent-widget > [id="carenzzo"]) {
	min-height: 0;
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	overflow: visible;
}

/* Trust-строка ПОД формой виджета: не-числовые гарантии (search-first).
	Переиспользует визуал .sg-trust-pill (общий с hero-пиллами) — DRY. Тише H1/формы
	по весу: форма остаётся единственным primary-CTA экрана. */
.sg-widget__trust { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); margin: var(--wp--preset--spacing--md) 0 0; padding: 0; list-style: none; }
.sg-widget__trust .sg-trust-pill { flex: none; }

/* ==========================================================================
   ПОПУЛЯРНЫЕ ФИЛЬТРЫ ВИДЖЕТА localrent (injected-разметка) — оверрайд
   --------------------------------------------------------------------------
   Разметку виджета мы не контролируем. Переопределяем ТОЛЬКО через двойной
   id-якорь #carenzzo#carenzzo (контейнер выдачи — #carenzzo), без !important.
   Двойной id даёт специфичность (0,2,k) и стабильно перекрывает классовые
   правила localrent (.filter-card / .filter-card__*), не трогая остальной
   виджет (форму поиска и карточки авто).

   Фактическая структура одной карточки (label.filter-card в Swiper-слайде):
     · .filter-card__row (верх): span.filter-card__label + скрытый input
       + svg.filter-card__checkbox (галка при выборе) + .filter-card__background
       (абсолютный серый слой #F4F4F4, inset:0, z-index:-1);
     · .filter-card__row (низ): .filter-card__icon (48×48 webp-иллюстрация)
       + .filter-card__count (счётчик доступных авто).

   Контейнер карусели (.search-popular-filters__items) имеет overflow:hidden,
   поэтому глубину задаём БОРДЕРОМ + inset-подсветкой, без drop-shadow и без
   translate на hover: их обрезал бы свайпер и они давали бы джиттер/CLS.
   Размеры карточек задаёт Swiper — мы их не меняем (нулевой CLS).
   Все значения — из токенов theme.json.
   ========================================================================== */

/* Карточка-фильтр: чёткая интерактивная поверхность вместо «блёклого» серого */
#carenzzo#carenzzo .filter-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--inset-hi);
	padding: var(--wp--preset--spacing--xs-2);
	gap: var(--wp--preset--spacing--xs-2);
	transition:
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		box-shadow var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

/* Серый injected-фон карточки гасим — поверхность держит сама карточка */
#carenzzo#carenzzo .filter-card__background { background: transparent; }

/* Подпись фильтра: читаемая единая типографика (контраст ink/base ≈ 16:1) */
#carenzzo#carenzzo .filter-card__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

/* Нижний ряд (иконка + счётчик): счётчик центрируем по высоте плитки иконки */
#carenzzo#carenzzo .filter-card__row:last-child { align-items: center; }

/* Иконка: нормализуем разнокалиберные иллюстрации в единую плитку,
   иллюстрацию ужимаем пропорционально (object-fit:contain) — без растяжения */
#carenzzo#carenzzo .filter-card__icon {
	inline-size: 40px;
	block-size: 40px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-sunken);
	overflow: hidden;
}
#carenzzo#carenzzo .filter-card__icon > * {
	inline-size: 30px;
	block-size: 30px;
	object-fit: contain;
}

/* Счётчик доступных авто → заметный, но спокойный медовый бейдж-акцент
   (accent-strong на accent-soft ≈ 5.4:1, AA), tabular-цифры против скачков */
#carenzzo#carenzzo .filter-card__count {
	align-self: center;
	padding: var(--wp--preset--spacing--xs-3) var(--wp--preset--spacing--xs-2);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Hover: кликабельность без сдвига лейаута — бордер + лёгкий тон + inset-кольцо */
#carenzzo#carenzzo .filter-card:hover {
	border-color: var(--wp--preset--color--primary);
	background: color-mix(in srgb, var(--wp--preset--color--primary-soft) 55%, var(--wp--preset--color--base));
	box-shadow: var(--wp--custom--shadow--inset-hi), inset 0 0 0 1px var(--wp--preset--color--primary);
}

/* Фокус с клавиатуры: видимый inset-outline (не обрежется overflow свайпера) */
#carenzzo#carenzzo .filter-card:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

/* Выбранный фильтр (input:checked) — явный активный статус для тача */
#carenzzo#carenzzo .filter-card:has(input:checked) {
	border-color: var(--wp--preset--color--primary-strong);
	background: var(--wp--preset--color--primary-soft);
	box-shadow: var(--wp--custom--shadow--inset-hi), inset 0 0 0 1px var(--wp--preset--color--primary-strong);
}
#carenzzo#carenzzo .filter-card:has(input:checked) .filter-card__icon {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, var(--wp--preset--color--base));
}

/* Сдержанный motion */
@media (prefers-reduced-motion: reduce) {
	#carenzzo#carenzzo .filter-card { transition: none; }
}

/* ==========================================================================
   ПАНЕЛЬ РАСШИРЕННЫХ ФИЛЬТРОВ виджета localrent (injected) — модал-оверлей
   --------------------------------------------------------------------------
   Кнопка «Filters» (.search-filters) открывает поповер. Фактическая инъект-
   структура (заинспектирована вживую через agent-browser):
     · .lr-modal__backdrop — position:fixed; inset:0; rgba(0,0,0,.75) — бэкдроп
       уже на весь вьюпорт (НЕ трогаем);
     · .settings__popup-outer — на ДЕСКТОПЕ position:absolute, заякорен к кнопке
       (left:auto; right:0; width:1010px) → панель прижата вправо, слева «дыра»
       поверх затемнения. Контейнер поповера;
     · .settings__popup-inner.search-filters__inner — overflow-y:auto, СКРОЛЛ-
       контейнер (padding 24 24 0);
     · внутри .filters (grid 5 кол.) + .search-filters__footer (position:sticky;
       bottom:0) — Reset all filters / View N cars.

   Класс .settings__popup-outer/.settings__popup-inner — generic, его делят и
   другие поповеры виджета (сортировка/локация), поэтому скоупим строго через
   :has(.search-filters__inner) — чиним ТОЛЬКО панель фильтров.

   Правим ЧЕРЕЗ #carenzzo#carenzzo, без !important и без вмешательства в их JS:
   поповер → центрированный модал поверх полноэкранного бэкдропа (десктоп) и
   полноэкранный лист (мобайл). Тело скроллится (flex + min-block-size:0), футер
   остаётся липким и НЕпрозрачным (их фон полупрозрачный — контент просвечивал).
   Чекбоксы/слайдеры/селекты/кнопки и закрытие — в их потоке, не трогаем.
   Все значения — из токенов theme.json.
   ========================================================================== */

/* Общее (все ширины): контейнер поповера → flex-колонка, чтобы тело скроллилось,
   а футер оставался снизу. overflow:hidden обрезает контент по скруглению. */
#carenzzo#carenzzo .settings__popup-outer:has(.search-filters__inner) {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
}

/* Тело-скролл занимает всё доступное место колонки; их overflow-y:auto остаётся.
   min-block-size:0 обязателен, иначе flex-элемент не даёт прокрутку внутри. */
#carenzzo#carenzzo .search-filters__inner {
	flex: 1 1 auto;
	min-block-size: 0;
	block-size: auto;
	max-block-size: none;
}

/* Липкий футер: непрозрачная поверхность + верхняя граница, чтобы контент
   не просвечивал при прокрутке (родной фон футера — полупрозрачный серый). */
#carenzzo#carenzzo .search-filters__footer {
	background: var(--wp--preset--color--base);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

/* МОБАЙЛ (<768px): родной мобильный лист виджета уже полноэкранный (position:
   fixed, на всю ширину, с верхним баром «Filters» + крестик закрытия ВНЕ этого
   контейнера). Геометрию не трогаем — иначе перекроем бар с крестиком (escape-
   route). Общие правила выше (flex-колонка + скролл тела + непрозрачный футер)
   к мобайлу применяются и улучшают прокрутку/липкость футера. */

/* ДЕСКТОП (≥768px): центрированный модал поверх полноэкранного бэкдропа.
   Центрируем БЕЗ transform — через inset:0 + margin:auto (layout-центрирование).
   Причина: max-inline-size = calc(100vw − 2·gutter) даёт ДРОБНУЮ ширину (gutter
   на vw-clamp), а translate(-50%,-50%) сдвигал панель на половину этой дробной
   ширины → панель вставала на нецелый x (напр. 43.805px). transform поднимает
   элемент в собственный композитный слой, который растеризуется по дробной
   матрице → текст замыливается (sub-pixel). margin:auto центрирует средствами
   layout: бокс снапится к пиксельной сетке, слой не создаётся → текст чёткий.
   block-size:fit-content держит модал по высоте контента (margin-block:auto
   центрирует вертикально), max-block-size клампит к вьюпорту → тело скроллится. */
@media (min-width: 768px) {
	#carenzzo#carenzzo .settings__popup-outer:has(.search-filters__inner) {
		position: fixed;
		inset: 0;
		margin: auto;
		block-size: fit-content;
		max-inline-size: calc(100vw - 2 * var(--wp--custom--container--gutter));
		max-block-size: calc(100dvh - 2 * var(--wp--preset--spacing--xl));
		border-radius: var(--wp--custom--radius--lg);
		box-shadow: var(--wp--custom--shadow--e4);
	}
}

/* ==========================================================================
   АВТОКОМПЛИТ ЛОКАЦИИ виджета localrent (injected) — «Получение/Возврат»
   --------------------------------------------------------------------------
   Баг: при фокусе в поле «Получение» виджет открывает автокомплит поверх
   полноэкранного бэкдропа .lr-modal__backdrop (position:fixed; inset:0;
   rgba(0,0,0,.75); z-index:3, внутри .mrcwhitelabel). Белый список поверх
   бэкдропа читаем, НО САМА строка полей ввода уходит ПОД пелену — активное
   поле затемнено, текст плохо виден.

   Инъект-структура (заинспектирована вживую через agent-browser, /ru/crete/):
     · .search-cigarette (бар) → position:static (его z-index:99 не работает,
       static игнорирует z-index) → красится в нормальном потоке НИЖЕ бэкдропа;
     · .city-picker.search-cigarette__city — блок локации, position:relative,
       служит offset-родителем поповера (его НЕ трогаем — сдвинет якорь);
       · .city-picker__wrap — БЕЛАЯ подложка полей (bg #fff), держит строку
         .city-picker__row → .city-picker__pickup + .city-picker__return
         (сами поля прозрачны, белое — от wrap). НЕ предок поповера;
       · .settings__popup-outer.city-picker__popup-pickup — сам поповер
         автокомплита, position:absolute (z-index:2001), ПРЯМОЙ потомок
         .city-picker (сиблинг wrap, не внутри него).

   Причина: .city-picker__wrap статичен → ниже позиционированного бэкдропа
   (z:3). Поповер (z:2001) выше бэкдропа → список читаем, поля — нет.

   Фикс: пока внутри .city-picker открыт поповер (:has(.settings__popup-outer)),
   поднимаем БЕЛУЮ подложку полей .city-picker__wrap над бэкдропом (z:4 > 3).
   Она несёт собственный белый фон → активные поля «Получение/Возврат» остаются
   светлыми и читаемыми поверх пелены; список (z:2001) — по-прежнему выше подложки.
   wrap НЕ предок поповера → position:relative не меняет его якорь (поповер
   заанкерен к .city-picker). Скоуп строго через .city-picker → панель ФИЛЬТРОВ
   (:has(.search-filters__inner)) и сортировка живут ВНЕ .city-picker и не задеты.
   Один виджет на всех страницах → фикс глобальный (city/country/island).
   ========================================================================== */
#carenzzo#carenzzo .city-picker:has(.settings__popup-outer) .city-picker__wrap {
	position: relative;
	z-index: 4;
}

/* ==========================================================================
   КАЛЕНДАРЬ ДАТ виджета localrent (injected) — «Даты аренды / Rental dates»
   --------------------------------------------------------------------------
   Тот же баг, что у автокомплита локации: клик по полю «Даты аренды» открывает
   календарь-поповер поверх полноэкранного бэкдропа .lr-modal__backdrop (position:
   fixed; inset:0; rgba(0,0,0,.75); z-index:3, внутри .mrcwhitelabel). Сам поповер
   читаем, НО поле дат в баре виджета уходит ПОД пелену — выбранные даты затемнены.

   Инъект-структура (заинспектирована вживую через agent-browser, /en/crete/) —
   ОТЛИЧАЕТСЯ от локации: календарь использует НЕ .settings__popup-outer, а
   собственный dropdown-компонент:
     · .search-cigarette (бар) → z-index:99 static (static игнорирует z-index) →
       красится в нормальном потоке НИЖЕ бэкдропа (z:3);
     · .search-calendar.search-cigarette__calendar.dropdown — блок дат,
       position:relative (z-index:auto), служит offset-родителем поповера (его
       НЕ трогаем — сдвинет якорь). При открытии получает класс .dropdown--open;
       · .dropdown__trigger → .search-calendar__trigger — поле дат в баре,
         БЕЛЫЙ фон (bg #fff) несёт именно .search-calendar__trigger. static →
         ниже бэкдропа. НЕ предок поповера (trigger.contains(calendar)=false);
       · .dropdown__content → .dropdown__panel → .dropdown__body → .mrc-calendar
         — сам поповер календаря. .dropdown__panel — position:absolute, z-index:9
         (выше бэкдропа → календарь читаем). .mrc-calendar рендерится только при
         открытом дропдропе (при закрытом его в DOM нет → валидный индикатор
         открытия, как :has(.settings__popup-outer) у локации).

   Причина: .search-calendar__trigger статичен → ниже позиционированного бэкдропа
   (z:3). Поповер (z:9) выше бэкдропа → календарь читаем, поле дат — нет.

   Фикс (по аналогии с локацией): пока в .search-calendar открыт календарь
   (:has(.mrc-calendar)), поднимаем БЕЛОЕ поле дат .search-calendar__trigger над
   бэкдропом (z:4 > 3). Его собственный белый фон → активное поле «Даты аренды»
   остаётся светлым и читаемым поверх пелены. Поповер (z:9 > 4) — по-прежнему выше
   поля. trigger НЕ предок поповера → position:relative не меняет его якорь
   (поповер заанкерен к .search-calendar.dropdown). Скоуп строго через
   .search-calendar → локация (.city-picker), фильтры/сортировка (.settings__popup-
   outer) живут ВНЕ .search-calendar и не задеты. Один виджет на всех страницах →
   фикс глобальный (city/country/island). На мобайле у виджета свой полноэкранный
   лист — .mrc-calendar там в другом контексте, поле баром не перекрывается. */
#carenzzo#carenzzo .search-calendar:has(.mrc-calendar) .search-calendar__trigger {
	position: relative;
	z-index: 4;
}

/* ==========================================================================
   ФУТЕР (макет)
   ========================================================================== */
.sg-footer { background: var(--c-ink-strong); color: var(--c-on-dark); padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--md); }
.sg-footer__grid { display: grid; gap: var(--wp--preset--spacing--lg); grid-template-columns: 1fr; }
@media (min-width: 768px) { .sg-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.sg-footer__about { max-width: 40ch; color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); font-size: var(--wp--preset--font-size--small); line-height: 1.6; margin-top: var(--wp--preset--spacing--sm); }
.sg-footer__col h3 { color: #fff; font-size: var(--wp--preset--font-size--small); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 var(--wp--preset--spacing--xs); }
.sg-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--xs-2); }
.sg-footer__col a { color: color-mix(in srgb, var(--c-on-dark) 82%, transparent); text-decoration: none; font-size: var(--wp--preset--font-size--small); transition: color var(--d-fast) var(--ease); }
.sg-footer__col a:hover { color: #fff; }
.sg-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); align-items: center; justify-content: space-between; margin-top: var(--wp--preset--spacing--lg); padding-top: var(--wp--preset--spacing--md); border-top: 1px solid rgba(255,255,255,0.12); font-size: var(--wp--preset--font-size--caption); color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); }

/* ==========================================================================
   Прочее / утилиты витрины
   ========================================================================== */
.sg-demo { display: grid; gap: var(--wp--preset--spacing--md); }
.sg-demo__panel { padding: var(--wp--preset--spacing--md); background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.sg-stack { display: grid; gap: var(--wp--preset--spacing--sm); }
.sg-divider { block-size: 1px; background: var(--c-border); border: 0; margin: 0; }
.u-mt-sm { margin-top: var(--wp--preset--spacing--sm); }
.u-mt-md { margin-top: var(--wp--preset--spacing--md); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Скип-линк */
.sg-skip { position: absolute; inset-block-start: -100px; inset-inline-start: var(--wp--preset--spacing--sm); z-index: 1002; background: var(--c-base); color: var(--c-primary-strong); padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--sm); border-radius: var(--r-md); box-shadow: var(--sh-md); font-weight: 600; transition: inset-block-start var(--d-fast) var(--ease); }
.sg-skip:focus { inset-block-start: var(--wp--preset--spacing--xs-2); }

/* ==========================================================================
   ХЕДЕР v2 — дропдаун «Направления» + email
   ========================================================================== */
.sg-nav-drop { position: relative; }
.sg-nav-drop__btn {
	display: inline-flex; align-items: center; gap: 4px;
	appearance: none; border: 0; background: transparent; cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--c-ink);
	padding-block: var(--wp--preset--spacing--xs-3);
	border-bottom: 2px solid transparent;
	transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sg-nav-drop__btn svg { inline-size: 1.1em; block-size: 1.1em; transition: transform var(--d-base) var(--ease); }
.sg-nav-drop__btn:hover { color: var(--c-primary-strong); border-color: var(--c-primary); }
.sg-nav-drop.is-open .sg-nav-drop__btn { color: var(--c-primary-strong); }
.sg-nav-drop.is-open .sg-nav-drop__btn svg { transform: rotate(180deg); }
.sg-nav-drop__menu {
	position: absolute;
	inset-block-start: calc(100% + 12px);
	inset-inline-start: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: repeat(2, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--lg);
	min-inline-size: 360px;
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e3);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility var(--d-base) var(--ease);
}
.sg-nav-drop.is-open .sg-nav-drop__menu { opacity: 1; visibility: visible; transform: none; }
.sg-nav-drop__col { display: grid; gap: var(--wp--preset--spacing--xs-2); align-content: start; }
.sg-nav-drop__label { font-size: var(--wp--preset--font-size--caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.sg-nav-drop__col a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); color: var(--c-ink); text-decoration: none; transition: color var(--d-fast) var(--ease); }
.sg-nav-drop__col a:hover { color: var(--c-primary-strong); }
.sg-nav-drop__col a svg { inline-size: 1em; block-size: 1em; }

.sg-header__mail { display: none; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); color: var(--c-muted); text-decoration: none; transition: color var(--d-fast) var(--ease); }
.sg-header__mail svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sg-header__mail:hover { color: var(--c-primary-strong); }
@media (min-width: 1280px) { .sg-header__mail { display: inline-flex; } }

/* ==========================================================================
   МОБИЛЬНОЕ OFF-CANVAS МЕНЮ (бургер)
   ========================================================================== */
/* Блокировка прокрутки фона при открытой панели */
body.sg-noscroll { overflow: hidden; }

/* Off-canvas меню — модальный слой над всем, включая хедер (z 100) и оверлеи
   виджета localrent (портал z 1000): бургер-меню всегда доступно и не перекрыто. */
.sg-mobile { position: fixed; inset: 0; z-index: 1001; }
.sg-mobile[hidden] { display: none; }
.sg-mobile__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--c-ink-strong) 55%, transparent);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity var(--d-base) var(--ease);
}
.sg-mobile.is-open .sg-mobile__overlay { opacity: 1; }
.sg-mobile__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	inline-size: min(88vw, 360px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base);
	box-shadow: var(--sh-e4);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform var(--d-base) var(--ease-emph);
}
.sg-mobile.is-open .sg-mobile__panel { transform: none; }
.sg-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--c-border);
}
.sg-mobile__close {
	flex: none;
	inline-size: 40px;
	block-size: 40px;
	display: grid;
	place-items: center;
	appearance: none;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	background: var(--c-base);
	color: var(--c-ink);
	cursor: pointer;
	transition: background var(--d-fast) var(--ease);
}
.sg-mobile__close:hover { background: var(--c-sunken); }
.sg-mobile__close svg { inline-size: 1.25rem; block-size: 1.25rem; }
.sg-mobile__nav { display: grid; gap: var(--wp--preset--spacing--xs-3); }
.sg-mobile__link,
.sg-mobile__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
	min-height: 48px;
	padding-inline: var(--wp--preset--spacing--xs);
	border-radius: var(--r-md);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--base);
	color: var(--c-ink);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.sg-mobile__link:hover,
.sg-mobile__summary:hover { background: var(--c-sunken); color: var(--c-primary-strong); }
.sg-mobile__disc { border-radius: var(--r-md); }
.sg-mobile__summary { list-style: none; }
.sg-mobile__summary::-webkit-details-marker { display: none; }
.sg-mobile__chev { display: inline-flex; color: var(--c-muted); transition: transform var(--d-base) var(--ease); }
.sg-mobile__chev svg { inline-size: 1rem; block-size: 1rem; }
.sg-mobile__disc[open] .sg-mobile__chev { transform: rotate(180deg); }
.sg-mobile__sub { display: grid; gap: var(--wp--preset--spacing--xs-3); padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs); }
.sg-mobile__sublabel { font-size: var(--wp--preset--font-size--caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); margin-top: var(--wp--preset--spacing--xs-3); }
.sg-mobile__sub a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: var(--wp--preset--spacing--xs-2); border-radius: var(--r-sm); font-size: var(--wp--preset--font-size--small); color: var(--c-ink); text-decoration: none; transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.sg-mobile__sub a:hover { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-mobile__suball { font-weight: 700; color: var(--c-primary-strong); }
.sg-mobile__suball svg { inline-size: 1em; block-size: 1em; }
.sg-mobile__langrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
	margin-top: var(--wp--preset--spacing--xs-2);
	padding-top: var(--wp--preset--spacing--sm);
	border-top: 1px solid var(--c-border);
}
.sg-mobile__rowlabel { display: inline-flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--c-ink); }
.sg-mobile__rowlabel svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--c-primary); }
/* В панели меню свитчера открывается влево, чтобы не упираться в правый край */
.sg-mobile__langrow .sg-langswitch__menu { inset-inline-end: 0; min-inline-size: 200px; }
.sg-mobile__cta { margin-top: var(--wp--preset--spacing--xs-2); }
.sg-mobile__mail { display: inline-flex; align-items: center; gap: 8px; padding-inline: var(--wp--preset--spacing--xs); font-size: var(--wp--preset--font-size--small); color: var(--c-muted); text-decoration: none; }
.sg-mobile__mail svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sg-mobile__mail:hover { color: var(--c-primary-strong); }
/* Бургер на десктопе скрыт → панель тоже не показываем */
@media (min-width: 1024px) { .sg-mobile { display: none; } }
/* Сдержанный motion / reduced-motion: без слайда */
@media (prefers-reduced-motion: reduce) {
	.sg-mobile__panel, .sg-mobile__overlay { transition: none; }
	.sg-mobile__panel { transform: none; }
}

/* ==========================================================================
   TRUST-BAR (B3)
   ========================================================================== */
.sg-trustbar-wrap { background: var(--c-primary); }
.sg-trustbar {
	list-style: none; margin: 0; padding-block: var(--wp--preset--spacing--sm);
	display: grid; gap: var(--wp--preset--spacing--xs); grid-template-columns: 1fr 1fr;
}
@media (min-width: 768px) { .sg-trustbar { grid-template-columns: repeat(4, 1fr); } }
/* Вариант из 3 пунктов (главная, без блока рейтинга). Каждый пункт — иконка слева
   + двухстрочный текст (заголовок/подпись) на CSS-grid, чтобы пункты были
   единообразны при любой длине текста (иконка не отрывается от заголовка). Стек на
   мобиле → центрированный band из 3 колонок на десктопе (не растягиваем по --wide). */
.sg-trustbar--3 { grid-template-columns: 1fr; }
.sg-trustbar.sg-trustbar--3 li {
	display: grid; grid-template-columns: auto 1fr; align-items: center;
	column-gap: var(--wp--preset--spacing--xs); row-gap: 2px;
}
.sg-trustbar--3 .sg-trustbar__ic { grid-row: 1 / span 2; }
.sg-trustbar.sg-trustbar--3 span:last-child { width: auto; }
@media (min-width: 768px) {
	.sg-trustbar--3 {
		grid-template-columns: repeat(3, 1fr);
		max-inline-size: 60rem; margin-inline: auto;
		column-gap: var(--wp--preset--spacing--md);
	}
}
.sg-trustbar li {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs-2);
	color: var(--c-on-dark);
	flex-wrap: wrap;
}
.sg-trustbar b { color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); }
.sg-trustbar span:last-child { font-size: var(--wp--preset--font-size--caption); color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); width: 100%; }
@media (min-width: 768px) { .sg-trustbar span:last-child { width: auto; } }
.sg-trustbar__ic { flex: none; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--r-pill); background: rgba(255,255,255,0.18); color: #fff; }
.sg-trustbar__ic svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sg-trustbar__ic--accent { background: color-mix(in srgb, var(--c-accent) 55%, transparent); color: #fff; }
/* Мобилка: компактный низкий зелёный band — 3 пункта в один ряд, без подписей. */
@media (max-width: 639px) {
	.sg-trustbar-wrap { padding-block: var(--wp--preset--spacing--xs-2); }
	.sg-trustbar.sg-trustbar--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--xs-3);
		padding-block: var(--wp--preset--spacing--xs);
		/* Гасим дефолтный UA padding-inline-start у <ul> (40px): база задаёт только
		   padding-block, из-за чего на мобилке 3 пункта уезжали вправо (блок «не по
		   центру»). Обнуляем — колонки центрируются в full-bleed полосе. */
		padding-inline: 0;
	}
	.sg-trustbar.sg-trustbar--3 li {
		grid-template-columns: none;
		display: flex; flex-direction: column; align-items: center; text-align: center;
		gap: 4px; padding: var(--wp--preset--spacing--xs-2) 4px; flex-wrap: nowrap;
	}
	.sg-trustbar.sg-trustbar--3 .sg-trustbar__ic {
		grid-row: auto; inline-size: 26px; block-size: 26px;
	}
	.sg-trustbar.sg-trustbar--3 .sg-trustbar__ic svg { inline-size: 0.9rem; block-size: 0.9rem; }
	.sg-trustbar.sg-trustbar--3 b { font-size: var(--wp--preset--font-size--caption); line-height: 1.2; text-wrap: balance; }
	.sg-trustbar.sg-trustbar--3 span:last-child { display: none; }
}

/* ==========================================================================
   КАК ЭТО РАБОТАЕТ (B11) — шаги
   ========================================================================== */
.sg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--md); counter-reset: step; }
@media (min-width: 600px) { .sg-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-steps { grid-template-columns: repeat(4, 1fr); } }
.step {
	position: relative;
	display: grid; gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e1);
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--sh-e3); }
.step__num {
	position: absolute; inset-block-start: var(--wp--preset--spacing--md); inset-inline-end: var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--heading); font-weight: 800;
	font-size: var(--wp--preset--font-size--xl-2); line-height: 1;
	color: var(--c-primary-soft);
	-webkit-text-stroke: 1px var(--c-border-strong);
}
.step__ic { inline-size: 48px; block-size: 48px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.step__ic svg { inline-size: 24px; block-size: 24px; }
.step__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--lg); margin: 0; letter-spacing: -0.01em; }
.step__text { color: var(--c-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.55; margin: 0; }

/* ==========================================================================
   ГАРАНТИИ (B4) — ratecards
   ========================================================================== */
.sg-ratecards { display: grid; gap: var(--wp--preset--spacing--md); grid-template-columns: 1fr; }
@media (min-width: 600px) { .sg-ratecards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-ratecards { grid-template-columns: repeat(4, 1fr); } }
.ratecard {
	display: grid; gap: var(--wp--preset--spacing--xs); align-content: start;
	padding: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e1), var(--sh-inset-hi);
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.ratecard:hover { transform: translateY(-4px); box-shadow: var(--sh-e3); border-color: var(--c-border-strong); }
.ratecard__ic { inline-size: 52px; block-size: 52px; display: grid; place-items: center; border-radius: var(--r-md); background: linear-gradient(140deg, var(--c-primary-soft), color-mix(in srgb, var(--c-accent-soft) 70%, transparent)); color: var(--c-primary-strong); margin-bottom: var(--wp--preset--spacing--xs-2); }
.ratecard__ic svg { inline-size: 26px; block-size: 26px; }
.ratecard__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--lg); margin: 0; letter-spacing: -0.01em; }
.ratecard__text { color: var(--c-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.55; margin: 0; }
/* Мобилка: компактные карточки гарантий — иконка слева (в 2 колонки), а не сверху. */
@media (max-width: 639px) {
	.ratecard {
		grid-template-columns: auto 1fr;
		column-gap: var(--wp--preset--spacing--sm);
		row-gap: 2px;
		padding: var(--wp--preset--spacing--md);
	}
	.ratecard__ic {
		grid-row: 1 / span 2;      /* иконка слева, тянется на строки заголовка+текста */
		align-self: center;
		inline-size: 40px; block-size: 40px;
		margin-bottom: 0;
	}
	.ratecard__ic svg { inline-size: 20px; block-size: 20px; }
	.ratecard__title { font-size: var(--wp--preset--font-size--base); }
}

/* ==========================================================================
   ПОПУЛЯРНЫЕ СТРАНЫ — bento (B5)
   ========================================================================== */
.sg-bento { display: grid; gap: var(--wp--preset--spacing--md); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .sg-bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; } }
.bento-card {
	position: relative;
	display: flex; align-items: center; gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e1);
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.bento-card:hover { transform: translateY(-3px); box-shadow: var(--sh-e3); border-color: var(--c-border-strong); }
.bento-card__cover { position: absolute; inset: 0; border-radius: inherit; }
.bento-card__go { margin-inline-start: auto; color: var(--c-muted); transition: transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.bento-card:hover .bento-card__go { transform: translateX(3px); color: var(--c-primary-strong); }
.bento-card__flag--sm { inline-size: 40px; block-size: 40px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary-strong); font-family: var(--wp--preset--font-family--heading); font-weight: 800; flex: none; }
.bento-card__name--sm { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--base); margin: 0; letter-spacing: -0.01em; }
.bento-card__metasm { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }

/* Featured плитка — крупная (2×2 на ≥768) */
.bento-card--feature {
	grid-column: span 2;
	flex-direction: column; align-items: stretch; gap: 0;
	padding: 0; overflow: clip;
	box-shadow: var(--sh-e2);
}
@media (min-width: 768px) { .bento-card--feature { grid-row: span 2; } }
.bento-card--feature .bento-card__media {
	position: relative;
	min-block-size: 140px;
	display: flex; align-items: flex-start; padding: var(--wp--preset--spacing--md);
	background:
		radial-gradient(120% 130% at 85% 0%, color-mix(in srgb, var(--c-accent) 32%, transparent), transparent 58%),
		linear-gradient(140deg, var(--c-primary-strong), var(--c-ink-strong));
}
.bento-card--feature .bento-card__media::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.16) 1px, transparent 1.4px);
	background-size: 18px 18px; opacity: 0.5; mix-blend-mode: overlay;
}
.bento-card__flag { inline-size: 56px; block-size: 56px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255,255,255,0.16); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--lg); position: relative; z-index: 1; backdrop-filter: blur(2px); }
.bento-card--feature .bento-card__body { display: grid; gap: var(--wp--preset--spacing--xs-2); padding: var(--wp--preset--spacing--md); }
.bento-card__name { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--xl-2); margin: 0; letter-spacing: -0.02em; }
.bento-card__meta { font-size: var(--wp--preset--font-size--small); color: var(--c-muted); }
.bento-card__cities { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-3); margin-top: var(--wp--preset--spacing--xs-3); }
.bento-card__cities a { font-size: var(--wp--preset--font-size--small); color: var(--c-primary-strong); text-decoration: none; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-primary-soft); transition: background var(--d-fast) var(--ease); }
.bento-card__cities a:hover { background: color-mix(in srgb, var(--c-primary-soft) 55%, var(--c-primary) 22%); }
.bento-card__link { margin-top: var(--wp--preset--spacing--xs-2); display: inline-flex; align-items: center; gap: 6px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--c-primary-strong); text-decoration: none; }
.bento-card__link svg { transition: transform var(--d-fast) var(--ease); inline-size: 1.05em; block-size: 1.05em; }
.bento-card__link:hover svg { transform: translateX(3px); }

/* Списки популярных городов/аэропортов */
.sg-poplists { display: grid; gap: var(--wp--preset--spacing--md); margin-top: var(--wp--preset--spacing--lg); }
@media (min-width: 768px) { .sg-poplists { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--lg); } }
.sg-poplist__title { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--lg); margin: 0 0 var(--wp--preset--spacing--xs); }
.sg-poplist__title svg { color: var(--c-primary); inline-size: 1.2rem; block-size: 1.2rem; }
.sg-poplist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 480px) { .sg-poplist ul { grid-template-columns: 1fr 1fr; gap: 2px var(--wp--preset--spacing--md); } }
.sg-poplist li a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wp--preset--spacing--xs); padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs); border-bottom: 1px solid var(--c-border); color: var(--c-ink); text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 500; transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); border-radius: var(--r-sm); }
.sg-poplist li a span { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); font-weight: 400; }
.sg-poplist li a:hover { color: var(--c-primary-strong); background: var(--c-primary-soft); }

/* ==========================================================================
   BENTO НАПРАВЛЕНИЙ (#countries, редизайн v2) — .cz-bento / .cz-bcard / .cz-bento__cta
   5 ячеек: A(большая, спан 2 ряда) + B,C,D(фото) + E(CTA брендовая). Токены темы.
   ========================================================================== */
.cz-bento {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 640px) { .cz-bento { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
	.cz-bento {
		grid-template-columns: 1.6fr 1fr 1fr;
		grid-template-rows: repeat(2, minmax(215px, 1fr));
	}
	.cz-bento__a { grid-column: 1; grid-row: 1 / span 2; }
}

/* Фото-карточка направления (A большая + B,C,D). */
.cz-bcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-block-size: 215px;
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--r-xl2);
	overflow: clip;
	isolation: isolate;
	text-decoration: none;
	color: #fff;
	background: var(--c-ink-strong);
	box-shadow: var(--sh-e2);
	transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.cz-bcard:hover { transform: translateY(-3px); box-shadow: var(--sh-e3); }
.cz-bcard:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.cz-bcard--feature { min-block-size: 340px; }
@media (min-width: 1024px) { .cz-bcard--feature { min-block-size: 100%; } }
.cz-bcard__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.cz-bcard__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(11, 33, 28, 0.82) 0%, rgba(11, 33, 28, 0.34) 42%, rgba(11, 33, 28, 0) 72%);
}
.cz-bcard--grad { background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-strong) 100%); }
.cz-bcard--grad .cz-bcard__scrim { background: linear-gradient(to top, rgba(11, 33, 28, 0.4), transparent 70%); }
.cz-bcard__body { display: grid; gap: 4px; }
.cz-bcard__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.cz-bcard--feature .cz-bcard__name { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
.cz-bcard__meta {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}
/* Бейдж цены — белая пилюля (верх-право). */
.cz-bcard__price {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-end: var(--wp--preset--spacing--sm);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.95);
	color: var(--c-ink-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	font-variant-numeric: tabular-nums;
	box-shadow: var(--sh-e1);
}
/* Бейдж «Хит сезона» (верх-лево). */
.cz-bcard__hit {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--sm);
	inset-inline-start: var(--wp--preset--spacing--sm);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: var(--r-pill);
	background: var(--c-accent-strong);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
}
.cz-bcard__hit svg { inline-size: 0.95em; block-size: 0.95em; }

/* E — CTA-плитка «ещё N направлений» (брендовая, не фото). */
.cz-bento__cta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
	min-block-size: 215px;
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--r-xl2);
	background: linear-gradient(150deg, var(--c-primary) 0%, var(--c-primary-strong) 100%);
	color: #fff;
	text-decoration: none;
	box-shadow: var(--sh-e2);
	transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.cz-bento__cta:hover { transform: translateY(-3px); box-shadow: var(--sh-brand); }
.cz-bento__cta:focus-visible { outline: none; box-shadow: var(--sh-ring); }
.cz-bento__cta-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	/* Размер как у названий стран в карточках (.cz-bcard__name) — по просьбе владельца. */
	font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
}
.cz-bento__cta-list { font-size: var(--wp--preset--font-size--small); color: rgba(255, 255, 255, 0.82); }
.cz-bento__cta-btn {
	margin-block-start: var(--wp--preset--spacing--xs-2);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.16);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}
.cz-bento__cta:hover .cz-bento__cta-btn { background: rgba(255, 255, 255, 0.26); }
.cz-bento__cta-btn svg { inline-size: 1.05em; block-size: 1.05em; }

/* ==========================================================================
   ПОПУЛЯРНЫЕ СТРАНЫ — редизайн главной (B5). Scoped: .sg-popc / .popc-*
   Полностью независим от .sg-bento / .bento-card / .sg-poplist (общие с
   patterns/destinations.php) — те классы здесь НЕ используются и НЕ меняются.
   ========================================================================== */

/* Шапка: пилюля-эйбрау с точкой (переопределяет .sg-eyebrow только в этой секции) */
.sg-popc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--c-primary-soft);
	color: var(--c-primary-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--xs);
}
.sg-popc__eyebrow::before {
	content: "";
	inline-size: 7px;
	block-size: 7px;
	border-radius: 50%;
	background: var(--c-primary);
	flex: none;
}

/* Главная сетка: фичер слева, 2×2 справа. Mobile-first — одна колонка. */
.sg-popc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	align-items: stretch;
}
@media (min-width: 1200px) {
	.sg-popc__grid { grid-template-columns: 1fr 1fr; }
}

/* --- Фичер-карточка топ-страны --- */
/* Фичер = крупная full-photo плитка: фото на весь фон + оверлей (плотнее снизу),
   контент поверх (шапка сверху, инфо+CTA снизу). Приём тот же, что у маленьких
   .popc-card--photo, но крупно и с бейджем/чипсами/CTA. Фолбэк без фото
   (.popc-feature--grad) сохраняет брендовый градиент. */
.popc-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	border-radius: var(--r-xl2);
	box-shadow: var(--sh-e3);
	overflow: clip;
	isolation: isolate;
	min-block-size: 460px;
	padding: var(--wp--preset--spacing--lg);
	background: var(--c-ink-strong); /* база под фото; виден при сбое загрузки img */
}
@media (min-width: 1200px) {
	.popc-feature { min-block-size: 560px; }
}

/* Фолбэк без фото страны — брендовый градиент фичера (сохранён из прежней версии). */
.popc-feature--grad {
	background:
		radial-gradient(120% 130% at 85% 0%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 58%),
		linear-gradient(140deg, var(--c-primary-strong), var(--c-ink-strong));
}
.popc-feature--grad::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
	background-size: 18px 18px;
	opacity: 0.5;
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Фото — фон ВСЕЙ карточки */
.popc-feature__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
/* Оверлей: лёгкое затемнение сверху (флаг/бейдж), яркая середина (фото видно),
   плотный низ (название/мета/чипсы/CTA читаются). Для grad-фолбэка тоже держит низ. */
.popc-feature__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(7, 30, 24, 0.50) 0%,
		rgba(7, 30, 24, 0.12) 24%,
		rgba(7, 30, 24, 0.34) 56%,
		rgba(6, 24, 19, 0.90) 100%);
}

/* Растянутая ссылка: вся фичер-карточка кликабельна → хаб страны. Контейнеры
   контента прозрачны для кликов (pointer-events:none), а интерактив внутри
   (ссылки-чипсы, CTA) — поверх ссылки и кликается индивидуально. */
.popc-feature__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}
.popc-feature__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -5px;
}
.popc-feature__top,
.popc-feature__body { pointer-events: none; }
a.popc-feature__chip,
.popc-feature__cta {
	position: relative;
	z-index: 3;
	pointer-events: auto;
}

/* Шапка: флаг-плашка слева, «Хит сезона» справа */
.popc-feature__top {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
}
.popc-feature__flag {
	inline-size: 52px;
	block-size: 52px;
	flex: none;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: 0.02em;
}
.popc-feature__hit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	background: var(--c-accent-soft);
	color: var(--c-accent-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1;
	box-shadow: var(--sh-e1);
}
.popc-feature__hit svg { inline-size: 1em; block-size: 1em; }

/* Нижний блок: название + мета + чипсы + CTA — поверх фото, светлым */
.popc-feature__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
}
.popc-feature__name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: clamp(2rem, 1.6rem + 1.7vw, 2.5rem);
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 6px;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}
.popc-feature__meta {
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
	margin: 0;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}
.popc-feature__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs-2);
}
.popc-feature__chip {
	padding: 8px 15px;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.28);
	color: #fff;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	text-decoration: none;
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	backdrop-filter: saturate(140%) blur(8px);
	transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
a.popc-feature__chip:hover { background: rgba(255, 255, 255, 0.30); border-color: rgba(255, 255, 255, 0.45); }
.popc-feature__chip--more { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); color: rgba(255, 255, 255, 0.85); }
.popc-feature__cta {
	margin-top: var(--wp--preset--spacing--xs);
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: var(--r-md);
	background: #fff;
	color: var(--c-primary-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
	box-shadow: var(--sh-e2);
	transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.popc-feature__cta:hover { background: color-mix(in srgb, #fff 88%, var(--c-primary)); transform: translateY(-2px); box-shadow: var(--sh-e3); }
.popc-feature__cta svg { inline-size: 1.05em; block-size: 1.05em; transition: transform var(--d-fast) var(--ease); }
.popc-feature__cta:hover svg { transform: translateX(3px); }

/* --- Сетка 2×2 карточек стран --- */
.popc-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
}
@media (min-width: 560px) {
	.popc-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
	.popc-cards { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
}
.popc-card {
	position: relative;
	display: block;
	min-block-size: 200px;
	border-radius: var(--r-xl);
	overflow: clip;
	text-decoration: none;
	box-shadow: var(--sh-e2);
	container-type: inline-size;
	transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.popc-card:hover { transform: translateY(-4px); box-shadow: var(--sh-e3); }
.popc-card__img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.popc-card__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(9, 40, 32, 0.06) 0%, rgba(9, 40, 32, 0.30) 48%, rgba(9, 40, 32, 0.84) 100%);
}
.popc-card__foot {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs);
}
.popc-card__text { min-width: 0; }
.popc-card--plain { background: var(--c-base); border: 1px solid var(--c-border); }
.popc-card--plain:hover { border-color: var(--c-border-strong); }
.popc-card--plain .popc-card__inner {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
}
.popc-card__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0;
}
.popc-card__sub {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	margin-top: 3px;
}
.popc-card--photo .popc-card__name { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.7rem); }
.popc-card--photo .popc-card__sub { color: rgba(255, 255, 255, 0.85); }
.popc-card--plain .popc-card__name { color: var(--c-ink-strong); font-size: clamp(1.4rem, 8.5cqi, 1.7rem); }
.popc-card--plain .popc-card__sub { color: var(--c-muted); }
.popc-card__go {
	inline-size: 40px;
	block-size: 40px;
	flex: none;
	border-radius: var(--r-md);
	display: grid;
	place-items: center;
	transition: transform var(--d-fast) var(--ease);
}
.popc-card--photo .popc-card__go {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.30);
	backdrop-filter: blur(6px);
	color: #fff;
}
.popc-card--plain .popc-card__go { color: var(--c-muted); }
.popc-card:hover .popc-card__go { transform: translateX(3px); }
.popc-card--plain:hover .popc-card__go { color: var(--c-primary-strong); }
.popc-card__go svg { inline-size: 1.1em; block-size: 1.1em; }

/* --- Две карточки-списка --- */
.sg-popc__lists {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--md);
	margin-top: var(--wp--preset--spacing--lg);
}
@media (min-width: 768px) {
	.sg-popc__lists { grid-template-columns: 1fr 1fr; }
}
/* Кнопка «Все направления» под списками популярных городов/стран (B6/B7). */
.sg-popc__more {
	display: flex;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--lg);
}
.popc-list {
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-xl);
	padding: var(--wp--preset--spacing--md);
	box-shadow: var(--sh-e2);
}
.popc-list__title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--lg);
	margin: 0 0 var(--wp--preset--spacing--sm);
}
.popc-list__ic {
	inline-size: 30px;
	block-size: 30px;
	flex: none;
	border-radius: var(--r-sm);
	display: grid;
	place-items: center;
	background: var(--c-primary-soft);
	color: var(--c-primary-strong);
}
.popc-list__ic svg { inline-size: 1rem; block-size: 1rem; }
.popc-list ul { list-style: none; margin: 0; padding: 0; }
.popc-list li { border-bottom: 1px solid var(--c-border); }
.popc-list li:last-child { border-bottom: 0; }
.popc-list li a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	/* Горизонтальный padding + отрицательный margin: подсветка ховера получает
	   «воздух» по краям и скругление, но текст остаётся выровнен с заголовком
	   карточки (и с хайрлайн-разделителем на li). */
	padding: 14px 12px;
	margin-inline: -12px;
	border-radius: var(--r-md);
	text-decoration: none;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.popc-list li a > b {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--c-ink-strong);
}
.popc-list li a > span {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--c-muted);
	white-space: nowrap;
}
.popc-list li a:hover { background: var(--c-primary-soft); }
.popc-list li a:hover > b { color: var(--c-primary-strong); }

/* Фокус-кольца (клавиатура) для интерактива блока */
.sg-popc a:focus-visible,
.popc-feature__cta:focus-visible {
	outline: none;
	box-shadow: var(--sh-ring);
	border-radius: var(--r-md);
}
.popc-card:focus-visible { outline: none; box-shadow: var(--sh-ring), var(--sh-e3); }

@media (prefers-reduced-motion: reduce) {
	.popc-card:hover,
	.popc-feature__cta:hover { transform: none; }
	.popc-card:hover .popc-card__go,
	.popc-feature__cta:hover svg { transform: none; }
}

/* --- Каталог направлений: сетка плиток всех стран (страница /destinations) --- */
/* Переиспользует плитки .popc-card, но собственный грид: 4 колонки на десктопе,
   мобайл-фёрст брейкпоинты в стиле файла (min-width). НЕ трогает .popc-cards.
   Все правила ниже скоуплены `.dest-tiles …`, чтобы блок «Популярные страны»
   на главной (.popc-cards) остался нетронутым. */
.dest-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--sm);
}
@media (min-width: 480px) {
	.dest-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.dest-tiles { grid-template-columns: repeat(3, 1fr); }
}
/* 4 колонки со стандартной ширины ноутбука (≥1024) — гарантированно 4 в ряд
   на любом десктопе, а не только на очень широком. */
@media (min-width: 1024px) {
	.dest-tiles {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--wp--preset--spacing--md);
	}
}

/* Каталожная плотность: компактные плитки, тайтовый радиус и мягкая тень покоя —
   плоский «реестр», а не крупные карточки-хиты главной. */
.dest-tiles .popc-card {
	min-block-size: 160px;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e1);
}

/* --plain: не «пустая белая коробка». Лёгкая диагональная бренд-подложка в углу
   + всегда цветной чип-стрелка дают каждой плитке характер бренда без перегруза. */
.dest-tiles .popc-card--plain {
	background:
		radial-gradient(135% 135% at 100% 0%, color-mix(in srgb, var(--c-primary) 6%, transparent) 0%, transparent 52%),
		var(--c-base);
	border-color: var(--c-border);
}
.dest-tiles .popc-card--plain .popc-card__inner {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
}
.dest-tiles .popc-card--plain .popc-card__name {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.15;
}
.dest-tiles .popc-card--plain .popc-card__sub { margin-top: 2px; }

/* Чип-стрелка каталога — компактнее и всегда в бренд-заливке (цвет на каждой плитке). */
.dest-tiles .popc-card__go {
	inline-size: 38px;
	block-size: 38px;
}
.dest-tiles .popc-card--plain .popc-card__go {
	background: var(--c-primary-soft);
	color: var(--c-primary-strong);
}

/* Ховер: подъём (от базового .popc-card), бренд-бордер, усиление подложки,
   инверсия чипа в основной бренд-цвет. Мягкая тень e2 вместо крупной e3. */
.dest-tiles .popc-card--plain:hover {
	border-color: var(--c-primary);
	box-shadow: var(--sh-e2);
	background:
		radial-gradient(135% 135% at 100% 0%, color-mix(in srgb, var(--c-primary) 12%, transparent) 0%, transparent 60%),
		var(--c-base);
}
.dest-tiles .popc-card--plain:hover .popc-card__go {
	background: var(--c-primary);
	color: var(--c-on-primary);
}

/* photo-плитки каталога — крупное имя, но компактнее, чем на главной. */
.dest-tiles .popc-card--photo .popc-card__name {
	font-size: var(--wp--preset--font-size--xl);
}

/* Шапка секции каталога: eyebrow + H2 в ритме темы; иконка eyebrow как в B1. */
.sg-dest-grid__head .sg-eyebrow svg {
	color: var(--c-primary);
	inline-size: 1rem;
	block-size: 1rem;
}

/* Стык «hero-с-картой → каталог»: гасим бордер-разделитель (бесшовный переход
   от атмосферной секции к каталогу — граница читается по смене фона, без линии),
   а шапке каталога даём собственный воздух сверху, чтобы «All destinations» не
   прилипал к карте. Суммарный зазор держим как один приятный ритм. Оба селектора
   для совместимости: карта теперь вложена в hero (.sg-dest-intro), но правило
   .sg-dest-map + .sg-dest-grid оставляем как безопасный фолбэк. */
.sg-dest-intro + .sg-dest-grid,
.sg-dest-map + .sg-dest-grid { border-top: 0; }
/* Идёт позже базового `.sg-section` (в т.ч. его десктоп-медиа) → перебивает
   верхний паддинг; десктоп чуть щедрее под крупный H2. */
.sg-dest-grid { padding-block-start: var(--wp--preset--spacing--md); }
@media (min-width: 1024px) {
	.sg-dest-grid { padding-block-start: var(--wp--preset--spacing--lg); }
}

/* Подзаголовок группы каталога («Страны» / «Острова»). Выводится только когда есть
   обе группы; между сеткой стран и заголовком островов — увеличенный отступ. */
.sg-dest-grid__group {
	margin: 0 0 var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
	font-weight: 700;
	color: var(--c-ink, inherit);
}
.dest-tiles + .sg-dest-grid__group {
	margin-block-start: var(--wp--preset--spacing--lg);
}

/* Пустое состояние каталога (стран пока нет). */
.sg-dest-empty {
	margin: 0;
	padding: var(--wp--preset--spacing--xl) 0;
	text-align: center;
	color: var(--c-muted);
	font-size: var(--wp--preset--font-size--lg);
}

/* ==========================================================================
   ПРАВИЛА ВОЖДЕНИЯ (B7): карточка фактов + буллеты ПДД · ПЕРЕЛИНКОВКА (B6, legacy)
   ========================================================================== */
.sg-localgrid { display: grid; gap: var(--wp--preset--spacing--lg); }
@media (min-width: 1024px) { .sg-localgrid { grid-template-columns: 1.3fr 0.7fr; gap: var(--wp--preset--spacing--xl); align-items: start; } }
/* Правила вождения (B7): факты (ЛЕВО) чуть уже, буллеты ПДД (ПРАВО) шире под
   комфортную длину строки. Одна колонка (нет фактов ИЛИ нет ПДД) → капим ширину. */
@media (min-width: 1024px) {
	.sg-localgrid--drive { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--wp--preset--spacing--xl-2); }
	.sg-localgrid.sg-localgrid--single { grid-template-columns: minmax(0, 1fr); }
}
.sg-localgrid--single > * { max-width: 64ch; }
.sg-facts { background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-e1); overflow: clip; }
.sg-facts__table { width: 100%; border-collapse: collapse; }
.sg-facts__table th, .sg-facts__table td { text-align: start; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); vertical-align: middle; font-size: var(--wp--preset--font-size--small); }
.sg-facts__table tr { border-bottom: 1px solid var(--c-border); }
.sg-facts__table tr:last-child { border-bottom: 0; }
.sg-facts__table th { font-weight: 600; color: var(--c-ink); display: flex; align-items: center; gap: var(--wp--preset--spacing--xs-2); }
.sg-facts__table td { color: var(--c-muted); text-align: end; font-variant-numeric: tabular-nums; }
@media (min-width: 480px) { .sg-facts__table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; } }
.sg-facts__ic { flex: none; inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-facts__ic svg { inline-size: 1.05rem; block-size: 1.05rem; }
.sg-facts__disc { padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md) var(--wp--preset--spacing--sm); font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); border-top: 1px solid var(--c-border); }

/* Правая колонка блока «Правила вождения»: подзаголовок H3 + буллеты ПДД (HTML
   импорта carenzzo_pdd_rules). Маркеры — teal-чек в soft-плашке, в тон .sg-facts__ic
   и .sg-checklist, чтобы две колонки читались единым блоком. */
.sg-drive-rules { align-self: start; }
.sg-drive-rules__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.15;
	font-size: var(--wp--preset--font-size--xl);
	color: var(--c-ink-strong);
	margin: 0 0 var(--wp--preset--spacing--md);
}
.sg-drive-rules__list ul,
.sg-drive-rules__list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--sm); }
.sg-drive-rules__list li {
	position: relative;
	padding-inline-start: 2rem;
	color: var(--c-ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.7;
}
.sg-drive-rules__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2em;
	inline-size: 1.3rem;
	block-size: 1.3rem;
	border-radius: var(--r-sm);
	background: var(--c-primary-soft);
}
.sg-drive-rules__list li::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.2em;
	inline-size: 1.3rem;
	block-size: 1.3rem;
	background: var(--c-primary-strong);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
/* Абзацы, если импорт отдал прозу, а не только <ul> (мягкая деградация). */
.sg-drive-rules__list p { margin: 0 0 var(--wp--preset--spacing--sm); color: var(--c-ink); line-height: 1.7; }
.sg-drive-rules__list p:last-child { margin-bottom: 0; }
.sg-drive-rules__list a { color: var(--c-primary-strong); text-decoration: underline; text-underline-offset: 2px; }
.sg-drive-rules__list a:hover { color: var(--c-primary); }

.sg-interlink { display: grid; gap: var(--wp--preset--spacing--md); }
.sg-interlink__title { display: flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--base); margin: 0 0 var(--wp--preset--spacing--xs); }
.sg-interlink__title svg { color: var(--c-primary); inline-size: 1.1rem; block-size: 1.1rem; }
.sg-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-2); }
.sg-chip { font-size: var(--wp--preset--font-size--small); color: var(--c-ink); text-decoration: none; padding: 6px 14px; border-radius: var(--r-pill); background: var(--c-base); border: 1px solid var(--c-border-strong); transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.sg-chip:hover { color: var(--c-primary-strong); background: var(--c-primary-soft); border-color: var(--c-primary); }
.sg-interlink__hub { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); border-radius: var(--r-lg); background: var(--c-ink-strong); color: var(--c-on-dark); text-decoration: none; box-shadow: var(--sh-e2); transition: transform var(--d-base) var(--ease); }
.sg-interlink__hub:hover { transform: translateY(-2px); }
.sg-interlink__hub b { color: #fff; display: block; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--small); }
.sg-interlink__hub small { color: color-mix(in srgb, var(--c-on-dark) 72%, transparent); font-size: var(--wp--preset--font-size--caption); }
.sg-interlink__hub svg { margin-inline-start: auto; flex: none; }
.sg-interlink__hubflag { inline-size: 38px; block-size: 38px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(255,255,255,0.14); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 800; flex: none; }

/* ==========================================================================
   RATING BADGE (B10)
   ========================================================================== */
.rating-badge { display: flex; align-items: center; gap: var(--wp--preset--spacing--sm); padding: var(--wp--preset--spacing--md); background: var(--c-base); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-e2); }
.rating-badge__score { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--xl-3); line-height: 1; letter-spacing: -0.02em; color: var(--c-ink); padding-inline-end: var(--wp--preset--spacing--sm); border-inline-end: 1px solid var(--c-border); }
.rating-badge__body { display: grid; gap: 4px; }
.rating-badge__stars { display: inline-flex; gap: 2px; color: var(--c-accent); }
.rating-badge__stars svg { inline-size: 1.1rem; block-size: 1.1rem; }
.rating-badge__meta { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); line-height: 1.4; }
.rating-badge__meta b { color: var(--c-ink); }

/* ==========================================================================
   КОНТЕКСТ .on-dark + CTA-остров (A0/A5)
   ========================================================================== */
.on-dark { color: var(--c-on-dark); }
.on-dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.sg-eyebrow--ondark { color: color-mix(in srgb, var(--c-accent-soft) 90%, #fff); }
.sg-eyebrow--ondark::before { background: var(--c-accent); }
.sg-eyebrow--ondark svg { color: var(--c-accent-soft); }

.sg-cta-island {
	background:
		radial-gradient(120% 130% at 85% -10%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 55%),
		linear-gradient(140deg, var(--c-primary-strong) 0%, var(--c-ink-strong) 100%);
	box-shadow: var(--sh-e4);
}
.sg-cta-island::after { opacity: 0.05; } /* noise чуть заметнее на тёмном */
.sg-cta-island__inner { text-align: center; display: grid; justify-items: center; }
.sg-cta__title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.025em; font-size: var(--wp--preset--font-size--xl-4); margin: 0 auto; max-width: 18ch; line-height: 1.04; text-wrap: balance; }
.sg-cta__lead { margin: var(--wp--preset--spacing--sm) auto 0; max-width: 50ch; color: var(--c-on-dark); font-size: var(--wp--preset--font-size--lg); line-height: 1.5; }
.sg-cta__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--sm); justify-content: center; margin-top: var(--wp--preset--spacing--lg); }
.sg-cta-island .btn--secondary { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,0.45); }
.sg-cta-island .btn--secondary:hover { --btn-bg: rgba(255,255,255,0.14); --btn-bd: #fff; }
.sg-cta__trust { list-style: none; margin: var(--wp--preset--spacing--lg) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--md); justify-content: center; }
.sg-cta__trust li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); color: var(--c-on-dark); }
.sg-cta__trust svg { color: color-mix(in srgb, var(--c-accent-soft) 80%, #fff); inline-size: 1.1rem; block-size: 1.1rem; }

/* ==========================================================================
   ФУТЕР v2 — доп. (B2)
   ========================================================================== */
.sg-footer__brandcol { display: grid; gap: var(--wp--preset--spacing--sm); align-content: start; }
.sg-footer__trust { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--caption); color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); }
.sg-footer__trust svg { color: #6FD3BC; inline-size: 1rem; block-size: 1rem; }
.sg-footer__mail { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--small); color: color-mix(in srgb, var(--c-on-dark) 88%, transparent); text-decoration: none; }
.sg-footer__mail svg { inline-size: 1rem; block-size: 1rem; }
.sg-footer__mail:hover { color: #fff; }
.sg-footer__pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs); margin-top: var(--wp--preset--spacing--lg); padding-top: var(--wp--preset--spacing--md); border-top: 1px solid rgba(255,255,255,0.12); }
.sg-footer__paylabel { display: inline-flex; align-items: center; gap: 6px; font-size: var(--wp--preset--font-size--caption); color: color-mix(in srgb, var(--c-on-dark) 72%, transparent); margin-inline-end: var(--wp--preset--spacing--xs-2); }
.sg-footer__paylabel svg { inline-size: 0.95rem; block-size: 0.95rem; }
.sg-pay-badge { display: inline-grid; place-items: center; min-inline-size: 52px; block-size: 30px; padding-inline: var(--wp--preset--spacing--xs-2); border-radius: var(--r-sm); background: rgba(255,255,255,0.92); color: var(--c-ink-strong); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--caption); letter-spacing: -0.01em; }
.sg-footer__disclaimer { margin-top: var(--wp--preset--spacing--md); max-width: 95ch; font-size: var(--wp--preset--font-size--caption); line-height: 1.6; color: color-mix(in srgb, var(--c-on-dark) 66%, transparent); }
.sg-footer__legal { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md); }
.sg-footer__legal a { color: color-mix(in srgb, var(--c-on-dark) 78%, transparent); text-decoration: none; font-size: var(--wp--preset--font-size--caption); transition: color var(--d-fast) var(--ease); }
.sg-footer__legal a:hover { color: #fff; }

/* ==========================================================================
   COOKIE CONSENT (B9)
   ========================================================================== */
.sg-cookie {
	position: fixed;
	inset-block-end: var(--wp--preset--spacing--sm);
	inset-inline: var(--wp--preset--spacing--sm);
	z-index: 90;
	max-inline-size: 640px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	align-items: center;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e4);
	transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility var(--d-base) var(--ease);
}
.sg-cookie.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
.sg-cookie__ic { flex: none; inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-cookie__ic svg { inline-size: 1.2rem; block-size: 1.2rem; }
.sg-cookie__text { font-size: var(--wp--preset--font-size--small); color: var(--c-ink); line-height: 1.45; margin: 0; }
.sg-cookie__text a { color: var(--c-primary-strong); }
.sg-cookie__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs); justify-content: flex-end; }
.sg-cookie__close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: 30px; block-size: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--c-muted); cursor: pointer; border-radius: var(--r-pill); }
.sg-cookie__close:hover { background: var(--c-sunken); color: var(--c-ink); }
.sg-cookie__close svg { inline-size: 1.1rem; block-size: 1.1rem; }
@media (min-width: 600px) {
	.sg-cookie { grid-template-columns: auto 1fr auto; }
	.sg-cookie__actions { grid-column: auto; }
}

/* Многосхемные крошки (B8) */
.sg-crumbs-set { display: grid; gap: var(--wp--preset--spacing--xs); }
.sg-crumbs-set .sg-crumbs { padding: var(--wp--preset--spacing--xs-2) 0; border-bottom: 1px dashed var(--c-border); }
.sg-crumbs-set .sg-crumbs:last-child { border-bottom: 0; }

/* Доп. глубина зоны виджета */
.sg-widget { box-shadow: var(--sh-e2); }

/* Единый брендовый focus-ring для ссылок/контролов без собственного ring */
.sg a:focus-visible,
.sg-langswitch__btn:focus-visible,
.sg-langswitch__item:focus-visible,
.sg-burger:focus-visible,
.sg-mobile__close:focus-visible,
.sg-mobile__link:focus-visible,
.sg-mobile__summary:focus-visible,
.sg-mobile__sub a:focus-visible,
.sg-nav-drop__btn:focus-visible,
.sg-header__nav a:focus-visible,
.sg-crumbs a:focus-visible,
.sg-datepicker__day:focus-visible,
.sg-datepicker__nav:focus-visible,
.loc-card__fav:focus-visible,
.hub-card__city:focus-visible,
.sg-footer__col a:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}
.sg-footer__col a:focus-visible { outline-color: var(--c-on-dark); }

/* Доступность движения */
@media (prefers-reduced-motion: reduce) {
	.sg *, .sg *::before, .sg *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.loc-card:hover, .hub-card:hover, .btn:hover,
	.bento-card:hover, .step__num, .ratecard:hover, .xlink:hover { transform: none; }
	/* Reveal/stagger выключены: содержимое сразу видимо (opacity/transform не заданы вне no-preference) */
	.sg-reveal, .sg-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   БОЕВЫЕ ШАБЛОНЫ — раскатка дизайн-системы на front-page / single-location /
   taxonomy-country. Только токены theme.json, без !important и хардкода.
   Новые блоки: крошки-бар, hero города/страны, зона виджета, оглавление (TOC),
   таблица цен по классам, сезонность (колоночный мини-чарт), callout аэропорта,
   prose, чек-лист, компактная карточка локации.
   ========================================================================== */

/* --- Базовый main боевых шаблонов ---------------------------------------- */
.sg-main { display: block; }

/* Межсекционный ритм = эталон стайл-гайда: секции идут ВСТЫК, расстояние между
   ними задаёт ТОЛЬКО собственный padding-block секции (--spacing--xl / --xl-2).
   В эталоне header→main→footer и все секции — один сырой wp:html (margin 0).
   В боевых шаблонах обёртки .sg-root и .sg-main — FSE-группы (is-layout-flow),
   которые иначе добавляют --wp--style--block-gap (=spacing|md, 24px) как
   margin-block между детьми → двойной зазор поверх padding секции и «плавающий»
   trust-bar. Обнуляем этот внешний gap: ритм снова управляется одним токеном
   (padding-block .sg-section) и точно совпадает со стайл-гайдом. Специфичность
   (.sg.sg-root = 0,2,0) гарантированно выше FSE-правила :where(.is-layout-flow). */
.sg.sg-root > *,
.sg.sg-root .sg-main > * { margin-block: 0; }

/* Обёртки template-part (header/footer) в FSE рендерятся как <div class="wp-block-
   template-part"> — лишний бокс, которого нет в эталоне (там header/main/footer —
   один сырой wp:html). Этот бокс не только дублирует ритм, но и ОГРАНИЧИВАЕТ
   диапазон position:sticky хедера своей высотой → хедер не прилипает. Распускаем
   обёртку в display:contents: header/footer становятся прямыми flow-детьми .sg-root,
   ритм совпадает с эталоном, а .sg-header снова липнет (его sticky-контейнер —
   .sg-root, как у эталона). Правила отклейки под модалку (body.mrc-lock-scroll /
   :has(#spa__modal…) → .sg-header position:static) при этом не затрагиваются. */
.sg.sg-root > .wp-block-template-part { display: contents; }

/* --- Хлебные крошки-бар под хедером (страница) ---------------------------- */
.sg-crumbs--page { padding-block: var(--wp--preset--spacing--sm); background: var(--c-base); border-bottom: 1px solid var(--c-border); }
.sg-crumbs__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs-2); }

/* --- Компактный заголовок локации (H1 над WL-виджетом, без hero-баннера) ---
	Лёгкий статичный блок: крошки → H1 → живой виджет. Декоративный hero убран
	(решение продакт-оунера). Нулевой CLS — элемент не подгружается и не сдвигает
	зарезервированную зону виджета ниже. Левый край выровнен с .sg-container--wide
	виджета. */
.sg-loc-head { padding-block: var(--wp--preset--spacing--md) 0; }
@media (min-width: 768px)  { .sg-loc-head { padding-block: var(--wp--preset--spacing--lg) 0; } }
@media (min-width: 1024px) { .sg-loc-head { padding-block: var(--wp--preset--spacing--xl) 0; } }
.sg-loc-head__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	font-size: var(--wp--preset--font-size--xl-3);
	color: var(--c-ink);
	max-width: 22ch;
	text-wrap: balance;
}
/* Лид под H1: глагольная строка ДЕЙСТВИЯ (что сделать), мотивирует начать поиск.
	Гарантии/условия вынесены в trust-строку под формой → без дублирования смысла. */
.sg-loc-head__lead {
	margin: var(--wp--preset--spacing--sm) 0 0;
	max-width: 56ch;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.55;
	color: var(--c-muted);
	text-wrap: pretty;
}

/* --- Зона виджета: секция вокруг живого WL-виджета ------------------------ */
.sg-section--widget { padding-block: var(--wp--preset--spacing--lg); }
@media (min-width: 1024px) { .sg-section--widget { padding-block: var(--wp--preset--spacing--xl); } }

/* --- Оглавление (TOC) [NEW] ----------------------------------------------- */
.sg-toc {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-e1);
}
.sg-toc__label {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-muted);
}
.sg-toc__label svg { color: var(--c-primary); inline-size: 1.1rem; block-size: 1.1rem; }
.sg-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--xs-2); grid-template-columns: 1fr; counter-reset: none; }
@media (min-width: 600px) { .sg-toc__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .sg-toc__list { grid-template-columns: repeat(3, 1fr); } }
.sg-toc__list a {
	display: flex; align-items: center; gap: var(--wp--preset--spacing--xs);
	min-height: 44px; padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--c-border); border-radius: var(--r-md);
	background: var(--c-canvas); color: var(--c-ink); text-decoration: none;
	font-weight: 500; font-size: var(--wp--preset--font-size--small);
	transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sg-toc__list a:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-strong); transform: translateY(-1px); }
.sg-toc__list a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.sg-toc__n {
	flex: none; display: grid; place-items: center;
	inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--r-pill);
	background: var(--c-primary); color: var(--c-on-primary);
	font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: var(--wp--preset--font-size--caption); font-variant-numeric: tabular-nums;
}

/* --- Таблица цен по классам [NEW] ----------------------------------------- */
.sg-pricetable {
	background: var(--c-base); border: 1px solid var(--c-border);
	border-radius: var(--r-lg); box-shadow: var(--sh-e2); overflow: clip;
}
.sg-pricetable__table { width: 100%; border-collapse: collapse; }
.sg-pricetable__table caption { text-align: start; }
.sg-pricetable thead th {
	text-align: start; padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	background: var(--c-sunken); border-bottom: 1px solid var(--c-border);
	font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: var(--wp--preset--font-size--small); color: var(--c-muted);
	text-transform: uppercase; letter-spacing: 0.04em;
}
.sg-pricetable__pricecol { text-align: end; }
.sg-pricetable tbody tr { border-bottom: 1px solid var(--c-border); }
.sg-pricetable tbody tr:last-child { border-bottom: 0; }
.sg-pricetable tbody td,
.sg-pricetable tbody th { padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); vertical-align: middle; }
.sg-pricetable__class { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--base); color: var(--c-ink); text-align: start; }
.sg-pricetable__ic { flex: none; display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-md); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-pricetable__ic svg { inline-size: 1.25rem; block-size: 1.25rem; }
.sg-pricetable__models { color: var(--c-muted); font-size: var(--wp--preset--font-size--small); }
.sg-pricetable__price { text-align: end; white-space: nowrap; }
.sg-pricetable__price b { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: var(--wp--preset--font-size--xl); color: var(--c-primary-strong); font-variant-numeric: tabular-nums; }
.sg-pricetable__price span { display: block; font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
.sg-pricetable__note { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); font-size: var(--wp--preset--font-size--small); color: var(--c-muted); background: var(--c-canvas); border-top: 1px solid var(--c-border); }
.sg-pricetable__note svg { flex: none; color: var(--c-accent-strong); inline-size: 1.1rem; block-size: 1.1rem; }
/* Мобайл: таблица превращается в карточки-строки (без горизонтального скролла) */
@media (max-width: 639px) {
	.sg-pricetable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.sg-pricetable tbody tr { display: grid; gap: var(--wp--preset--spacing--xs-2); padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); grid-template-columns: 1fr auto; align-items: center; }
	.sg-pricetable tbody th,
	.sg-pricetable tbody td { padding: 0; }
	.sg-pricetable__class { grid-column: 1; }
	.sg-pricetable__price { grid-column: 2; grid-row: 1; text-align: end; }
	.sg-pricetable__models { grid-column: 1 / -1; }
}

/* --- Сезонность: колоночный мини-чарт [NEW] ------------------------------- */
.sg-season {
	padding: var(--wp--preset--spacing--md);
	background: var(--c-base); border: 1px solid var(--c-border);
	border-radius: var(--r-lg); box-shadow: var(--sh-e2);
}
@media (min-width: 768px) { .sg-season { padding: var(--wp--preset--spacing--lg); } }
.sg-season__legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md); margin-bottom: var(--wp--preset--spacing--md); font-size: var(--wp--preset--font-size--small); color: var(--c-muted); }
.sg-season__leg { display: inline-flex; align-items: center; gap: 8px; }
.sg-season__swatch { inline-size: 1rem; block-size: 1rem; border-radius: 4px; background: linear-gradient(180deg, var(--c-primary), var(--c-primary-strong)); }
.sg-season__chip { display: grid; place-items: center; inline-size: 1.2rem; block-size: 1.2rem; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-strong); font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 0.7rem; }
.sg-season__peak { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--c-accent-strong); font-weight: 600; }
.sg-season__peak svg { color: var(--c-accent); inline-size: 1.05rem; block-size: 1.05rem; }
.sg-season__chart {
	display: grid; grid-template-columns: repeat(12, 1fr);
	grid-template-rows: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--xs-3);
	block-size: clamp(200px, 34vw, 260px);
	padding-top: var(--wp--preset--spacing--lg);
	border-bottom: 1px solid var(--c-border);
}
.sg-season__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; block-size: 100%; min-block-size: 0; }
.sg-season__bar {
	inline-size: clamp(8px, 2.2vw, 22px); block-size: var(--h, 50%);
	max-block-size: calc(100% - 2.6rem);
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	background: linear-gradient(180deg, var(--c-primary), var(--c-primary-strong));
	transition: filter var(--d-base) var(--ease);
}
.sg-season__col.is-peak .sg-season__bar { background: linear-gradient(180deg, var(--c-accent), var(--c-accent-strong)); }
.sg-season__price { font-size: 0.62rem; font-weight: 700; color: var(--c-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.sg-season__col.is-peak .sg-season__price { color: var(--c-accent-strong); }
.sg-season__month { font-size: 0.62rem; color: var(--c-muted); white-space: nowrap; }
@media (min-width: 480px) { .sg-season__price, .sg-season__month { font-size: var(--wp--preset--font-size--caption); } }

/* --- Callout (аэропорт / акцентный инфо-блок) ----------------------------- */
.sg-callout {
	display: grid; gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	background: var(--c-primary-soft);
	border: 1px solid color-mix(in srgb, var(--c-primary) 28%, transparent);
	border-radius: var(--r-lg);
}
@media (min-width: 768px) { .sg-callout { padding: var(--wp--preset--spacing--lg); } }
.sg-callout__ic { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); background: var(--c-base); color: var(--c-primary-strong); box-shadow: var(--sh-e1); }
.sg-callout__ic svg { inline-size: 1.5rem; block-size: 1.5rem; }
.sg-callout__title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.015em; margin: var(--wp--preset--spacing--xs-2) 0 0; color: var(--c-ink); }
.sg-callout__text { color: var(--c-ink); margin: 0; }
.sg-callout__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--xs); margin: var(--wp--preset--spacing--xs-2) 0 0; }
.sg-callout__facts > div { background: var(--c-base); border-radius: var(--r-md); padding: var(--wp--preset--spacing--xs); border: 1px solid var(--c-border); }
.sg-callout__facts dt { font-size: var(--wp--preset--font-size--caption); color: var(--c-muted); }
.sg-callout__facts dd { margin: 2px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--c-ink); }
.sg-callout__link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--wp--preset--spacing--xs-2); font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--c-primary-strong); text-decoration: none; }
.sg-callout__link svg { inline-size: 1.1rem; block-size: 1.1rem; transition: transform var(--d-fast) var(--ease); }
.sg-callout__link:hover svg { transform: translateX(3px); }

/* --- Prose (SEO-текст / «зачем арендовать») ------------------------------- */
.sg-prose { max-width: 68ch; }
/* SEO-интро на главной (B10) — блок по центру: колонка центрируется в контейнере,
   а текст внутри выравнивается по левому краю. Scoped по .sg-seo-intro, чтобы не
   задеть .sg-prose в каталоге (2-колоночная сетка) и в теле статьи. */
.sg-seo-intro .sg-prose { margin-inline: auto; text-align: left; }
/* На десктопе колонку тянем на ~2/3 ширины контейнера (перекрывает базовые 68ch). */
@media (min-width: 1024px) {
	.sg-seo-intro .sg-prose { max-width: 66%; }
}
.sg-prose .sg-eyebrow { margin-bottom: var(--wp--preset--spacing--xs); }
.sg-prose .sg-section__title { margin-bottom: var(--wp--preset--spacing--sm); }
.sg-prose p { margin: 0 0 var(--wp--preset--spacing--sm); color: var(--c-ink); line-height: 1.7; }
.sg-prose p:last-child { margin-bottom: 0; }
.sg-prose a { color: var(--c-primary-strong); text-decoration: underline; text-underline-offset: 2px; }
.sg-prose a:hover { color: var(--c-primary); }

/* --- Чек-лист (в табах условий) ------------------------------------------- */
.sg-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--xs); }
.sg-checklist li { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--xs); color: var(--c-ink); }
.sg-checklist li svg { flex: none; margin-top: 2px; color: var(--c-success); inline-size: 1.15rem; block-size: 1.15rem; }

/* --- Табы: иконка в ярлыке ------------------------------------------------- */
.sg-tabs__tab svg { inline-size: 1.05rem; block-size: 1.05rem; margin-inline-end: 6px; }
@media (max-width: 479px) { .sg-tabs__tab svg { display: none; } }

/* --- Компактная карточка локации (без медиа-шапки) ------------------------ */
.loc-card--compact .loc-card__body { padding: var(--wp--preset--spacing--md); gap: var(--wp--preset--spacing--xs); }

/* --- «Показать все» под перелинковкой ------------------------------------- */
.sg-morelinks { display: flex; justify-content: center; margin-top: var(--wp--preset--spacing--lg); }

/* --- Сетка «зачем + аэропорт» (текст шире карточки на десктопе) ----------- */
@media (min-width: 1024px) { .sg-grid--why { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* --- Фокус-кольца новых интерактивных элементов --------------------------- */
.sg-callout__link:focus-visible,
.sg-morelinks a:focus-visible,
.sg-pricetable a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }

/* ==========================================================================
   СТРАНИЦА-ХАБ «ВСЕ НАПРАВЛЕНИЯ» (/destinations) — каталог стран A–Z
   Только токены theme.json. Два регистра: B4 крупный bento-«витрина»
   (переиспользует .sg-bento) и B3 тихий плотный многоколоночный индекс.
   --sg-stick: высота липкого хедера (min-height 64 + паддинг) → offset для
   sticky-навигатора и scroll-margin якорей, чтобы буква не уезжала под хедер.
   ========================================================================== */
.sg-dest-index,
.sg-dest-intro { --sg-stick: 76px; }
/* Плавный скролл к якорям букв (reduced-motion гасит его глобальным правилом). */
html:has(.sg-dest-index) { scroll-behavior: smooth; }

/* --- B1 интро каталога — компактная горизонтальная лента ------------------
   Каталог/индекс, не лендинг: минимальный вертикальный ритм. Лента —
   слева текстовая колонка (eyebrow+H1+лид, прижата к левому краю контейнера),
   справа счётчики-пилюли, выровненные по нижней базовой линии текста. На
   планшете/мобайле складывается в колонку: текст, под ним ряд счётчиков (тоже
   слева). Паддинги секции заметно меньше .sg-section — шапка не съедает экран. */
.sg-dest-intro { background: var(--c-base); padding-block: var(--wp--preset--spacing--lg); }
@media (min-width: 1024px) {
	.sg-dest-intro { padding-block: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--lg); }
}
/* Hero центрирован: заголовок → описание → счётчики по центру, карта под ними
   тоже по центру (карта — второй ребёнок __inner). Единый центрированный стек на
   всех ширинах. */
.sg-dest-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--md);
}
/* Текстовая колонка: ограничена по мере строки, центрирована. */
.sg-dest-intro__text {
	min-width: 0;
	max-width: 62ch;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.sg-dest-intro .sg-eyebrow svg { color: var(--c-primary); inline-size: 1rem; block-size: 1rem; }
.sg-dest-intro__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	font-size: var(--wp--preset--font-size--xl-3);
	color: var(--c-ink);
	text-wrap: balance;
}
.sg-dest-intro__grad {
	background: linear-gradient(120deg, var(--c-primary-strong) 0%, var(--c-accent-strong) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sg-dest-intro__lead {
	margin: var(--wp--preset--spacing--xs) auto 0;
	max-width: 58ch;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--c-muted);
	text-wrap: pretty;
}

/* B2 навигационный поиск — крупное автономное поле (НЕ форма бронирования) */
.sg-dest-search {
	margin-top: var(--wp--preset--spacing--lg);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	max-width: 640px;
}
@media (min-width: 600px) { .sg-dest-search { flex-direction: row; align-items: stretch; } }
.sg-dest-search__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	min-height: 56px;
	padding-inline: var(--wp--preset--spacing--md);
	background: var(--c-base);
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-md);
	box-shadow: var(--sh-e1);
	transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.sg-dest-search__field:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-ring); }
.sg-dest-search__field svg { flex: none; inline-size: 1.3rem; block-size: 1.3rem; color: var(--c-muted); }
.sg-dest-search__field:focus-within svg { color: var(--c-primary); }
.sg-dest-search__field input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	color: var(--c-ink);
	outline: none;
}
.sg-dest-search__field input::placeholder { color: var(--c-muted); }
.sg-dest-search__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sg-dest-search .btn { min-height: 56px; flex: none; justify-content: center; }
@media (max-width: 599px) { .sg-dest-search .btn { width: 100%; } }
.sg-dest-search__hint {
	margin: var(--wp--preset--spacing--xs) 0 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
}
.sg-dest-search__hint svg { flex: none; color: var(--c-accent-strong); inline-size: 1rem; block-size: 1rem; }

/* Счётчики интро — правый край ленты на десктопе; на мобайле ряд под текстом.
   Соседний элемент text-колонки: не растягиваем (flex:none), пилюли не переносим,
   пока хватает места. Стиль пилюль (радиус/фон) не меняем — только положение. */
.sg-dest-intro__stats {
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 0;
	flex: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--xs);
}
.sg-dest-intro__stat {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	background: var(--c-canvas);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
}
.sg-dest-intro__stat dt {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}
.sg-dest-intro__stat dd { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--c-muted); }
.sg-dest-intro__stat--wide dt { display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem; color: var(--c-primary-strong); }
.sg-dest-intro__stat--wide dt svg { inline-size: 1.3rem; block-size: 1.3rem; }
.sg-dest-intro__stat--wide dd { font-weight: 600; color: var(--c-ink); }

/* --- B3 sticky алфавит-навигатор ------------------------------------------ */
.sg-alpha {
	position: sticky;
	top: var(--sg-stick);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	margin-bottom: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--xs);
	background: color-mix(in srgb, var(--c-base) 88%, transparent);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-e2);
}
.sg-alpha__label {
	display: none;
	align-items: center;
	gap: 6px;
	flex: none;
	padding-inline: var(--wp--preset--spacing--xs) 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-muted);
}
.sg-alpha__label svg { color: var(--c-primary); inline-size: 1rem; block-size: 1rem; }
@media (min-width: 768px) { .sg-alpha__label { display: inline-flex; } }
.sg-alpha__track {
	display: flex;
	align-items: center;
	gap: 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-padding-inline: var(--wp--preset--spacing--xs);
	-webkit-overflow-scrolling: touch;
}
.sg-alpha__track::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .sg-alpha__track { flex-wrap: wrap; overflow: visible; } }
.sg-alpha__chip {
	flex: none;
	scroll-snap-align: center;
	display: inline-grid;
	place-items: center;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: var(--wp--preset--spacing--xs-2);
	border-radius: var(--r-pill);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--c-ink);
	text-decoration: none;
	transition: color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sg-alpha__chip:hover { color: var(--c-on-primary); background: var(--c-primary); }
.sg-alpha__chip:active { transform: scale(0.94); }
.sg-alpha__chip:target,
.sg-alpha__chip:focus-visible { color: var(--c-primary-strong); background: var(--c-primary-soft); }

/* --- B3 индекс стран: буквенные группы + многоколоночный поток ------------- */
.sg-dest-index__body { display: grid; gap: var(--wp--preset--spacing--xl); }
.sg-letter-group { scroll-margin-top: calc(var(--sg-stick) + 64px); }
.sg-letter-group__marker {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	margin: 0 0 var(--wp--preset--spacing--sm);
	padding-bottom: var(--wp--preset--spacing--xs);
	border-bottom: 1px solid var(--c-border);
}
.sg-letter-group__marker::after {
	content: "";
	flex: 1;
	block-size: 1px;
	background: linear-gradient(to right, var(--c-border), transparent);
}
.sg-letter-group__marker span {
	display: inline-grid;
	place-items: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--r-md);
	background: var(--c-primary-soft);
	color: var(--c-primary-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.01em;
}
.sg-letter-group__list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: var(--wp--preset--spacing--md);
}
@media (min-width: 600px)  { .sg-letter-group__list { column-count: 2; } }
@media (min-width: 900px)  { .sg-letter-group__list { column-count: 3; } }
@media (min-width: 1280px) { .sg-letter-group__list { column-count: 4; } }
.sg-country { break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; }
.sg-country__link {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs);
	border-radius: var(--r-md);
	color: var(--c-ink);
	text-decoration: none;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.sg-country__link:hover { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-country__flag {
	flex: none;
	display: inline-grid;
	place-items: center;
	inline-size: 30px;
	block-size: 22px;
	border-radius: var(--r-sm);
	background: var(--c-sunken);
	border: 1px solid var(--c-border);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
	letter-spacing: 0.02em;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.sg-country__link:hover .sg-country__flag { background: var(--c-base); color: var(--c-primary-strong); border-color: var(--c-primary); }
.sg-country__name {
	flex: 1;
	min-width: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sg-country__count {
	flex: none;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}
.sg-country__go {
	flex: none;
	display: grid;
	place-items: center;
	inline-size: 0;
	overflow: hidden;
	color: var(--c-primary-strong);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), inline-size var(--d-fast) var(--ease);
}
.sg-country__go svg { inline-size: 1rem; block-size: 1rem; }
.sg-country__link:hover .sg-country__go,
.sg-country__link:focus-visible .sg-country__go { inline-size: 1rem; opacity: 1; transform: none; }

/* --- B5 популярные города: одиночная колонка-список ----------------------- */
.sg-poplists--single { grid-template-columns: 1fr; }
@media (min-width: 768px) { .sg-poplists--single { grid-template-columns: 1fr; } }
.sg-poplists--single .sg-poplist ul { gap: 2px var(--wp--preset--spacing--xl); }
@media (min-width: 900px)  { .sg-poplists--single .sg-poplist ul { grid-template-columns: repeat(3, 1fr); } }

/* --- B7 SEO-абзац + FAQ: две колонки на десктопе -------------------------- */
.sg-dest-seo { display: grid; gap: var(--wp--preset--spacing--xl); }
@media (min-width: 1024px) {
	.sg-dest-seo { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--xl-2); align-items: start; }
}
.sg-dest-seo .sg-prose { max-width: 56ch; }
.sg-dest-seo .sg-prose .sg-eyebrow svg { color: var(--c-primary); inline-size: 1rem; block-size: 1rem; }
.sg-dest-faq { align-self: start; }
@media (min-width: 1024px) { .sg-dest-faq { position: sticky; top: var(--sg-stick); } }

/* Фокус-кольца алфавит-навигатора и ссылок индекса */
.sg-alpha__chip:focus-visible,
.sg-country__link:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.sg-alpha__chip:active { transform: none; }
	.sg-country__go { transition: none; }
}

/* ==========================================================================
   БЛОГ: СТАТЬЯ (single post) + РУБРИКА (category). Функциональный скелет —
   developer. Финальная визуальная доводка/quality-gate ≥9/10 — designer.
   Только токены theme.json (через .sg-алиасы), без хардкода палитры/радиусов.
   --sg-stick: высота липкого хедера → offset для sticky-aside и scroll-margin.
   ========================================================================== */
.sg-article {
	--sg-stick: 76px;
	--sg-read: 0;                 /* прогресс чтения 0–1, выставляет article.js (fallback 0) */
	--sg-cover-h: clamp(22rem, 16rem + 24vw, 34rem);
}

/* Тонкая верхняя полоса прогресса чтения (видна на full-layout, безопасна везде). */
.sg-article::before {
	content: "";
	position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
	block-size: 3px; transform-origin: 0 50%;
	transform: scaleX(var(--sg-read));
	background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
	transition: transform 90ms linear;
	pointer-events: none;
}

/* --- Хлебные крошки -------------------------------------------------------- */
.sg-article-breadcrumbs-wrap { padding-block: var(--wp--preset--spacing--md) 0; border-top: 0; }
.sg-article-breadcrumbs-wrap + .sg-article-cover { margin-top: var(--wp--preset--spacing--md); }
.sg-breadcrumbs__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs-3) var(--wp--preset--spacing--xs-2);
	font-size: var(--wp--preset--font-size--small); color: var(--c-muted);
}
.sg-breadcrumbs__item a {
	color: var(--c-muted); text-decoration: none; border-radius: var(--r-sm);
	transition: color var(--d-fast) var(--ease);
}
.sg-breadcrumbs__item a:hover { color: var(--c-primary-strong); text-decoration: underline; text-underline-offset: 3px; }
.sg-breadcrumbs__item a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.sg-breadcrumbs__item--current { color: var(--c-ink); font-weight: 600; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-breadcrumbs__sep { display: inline-flex; color: var(--c-border-strong); }
.sg-breadcrumbs__sep svg { inline-size: 0.9rem; block-size: 0.9rem; }

/* --- Обложка (cover) -------------------------------------------------------
   Два режима: .has-image (featured + скрим, текст белый) и .is-gradient
   (атмосферный teal-фолбэк: бренд-градиент + mesh + точечный паттерн + noise).
   min-block-size зарезервирован токеном --sg-cover-h → нулевой CLS. */
.sg-article-cover {
	position: relative; isolation: isolate; overflow: clip;
	padding-block: var(--wp--preset--spacing--xl-2) var(--wp--preset--spacing--xl);
	min-block-size: var(--sg-cover-h);
	display: flex; align-items: flex-end;
}
@media (min-width: 1024px) { .sg-article-cover { padding-block: var(--wp--preset--spacing--xl-3) var(--wp--preset--spacing--xl-2); } }

/* Градиентный фолбэк — фирменная атмосфера, как в hero/cta. */
.sg-article-cover.is-gradient {
	color: var(--c-on-primary);
	background:
		radial-gradient(120% 130% at 86% -10%, color-mix(in srgb, var(--c-accent) 30%, transparent), transparent 52%),
		linear-gradient(135deg, var(--c-primary-strong) 0%, var(--c-ink-strong) 100%);
}
.sg-article-cover.is-gradient::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1.4px);
	background-size: 22px 22px; opacity: 0.5; mix-blend-mode: overlay;
}
.sg-article-cover.is-gradient::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--noise); background-size: 180px; opacity: 0.04;
}

/* Режим с featured-картинкой. */
.sg-article-cover__media { position: absolute; inset: 0; z-index: -2; }
.sg-article-cover__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sg-article-cover.has-image::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(14,23,20,0.10) 0%, rgba(14,23,20,0.30) 42%, rgba(14,23,20,0.82) 100%),
		linear-gradient(90deg, rgba(14,23,20,0.42) 0%, transparent 60%);
}
.sg-article-cover.has-image,
.sg-article-cover.has-image .sg-article-cover__title,
.sg-article-cover.has-image .sg-article-meta { color: var(--c-on-primary); }

.sg-article-cover .sg-container { position: relative; z-index: 1; }
.sg-article-cover__inner { max-width: 56rem; display: grid; gap: var(--wp--preset--spacing--sm); }

.sg-article-cover__chip {
	justify-self: start; display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 15px; border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--c-on-primary) 16%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-on-primary) 30%, transparent);
	color: var(--c-on-primary); text-decoration: none; font-weight: 700;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small); letter-spacing: 0.01em;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transition: background var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sg-article-cover__chip:hover { background: color-mix(in srgb, var(--c-on-primary) 26%, transparent); transform: translateY(-1px); }
.sg-article-cover__chip:focus-visible { outline: 2px solid var(--c-on-primary); outline-offset: 2px; }
.sg-article-cover__chip svg { inline-size: 1rem; block-size: 1rem; }

.sg-article-cover__title {
	margin: 0; color: inherit; font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
	font-size: var(--wp--preset--font-size--xl-4); text-wrap: balance;
	text-shadow: 0 2px 24px rgba(14,23,20,0.28);
}
.sg-article-cover.is-gradient .sg-article-cover__title { color: var(--c-on-primary); text-shadow: 0 2px 30px rgba(14,23,20,0.34); }

.sg-article-meta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--xs-2);
}
.sg-article-meta__item { display: inline-flex; align-items: center; gap: 7px; }
.sg-article-meta__item svg { inline-size: 1.05rem; block-size: 1.05rem; opacity: 0.9; }
.sg-article-meta__avatar { border-radius: var(--r-pill); inline-size: 1.75rem; block-size: 1.75rem; border: 1.5px solid color-mix(in srgb, var(--c-on-primary) 55%, transparent); }
.sg-article-meta__author { font-weight: 700; }
/* Тонкий разделитель-точка между мета-пунктами. */
.sg-article-meta__item + .sg-article-meta__item::before {
	content: ""; inline-size: 3px; block-size: 3px; border-radius: var(--r-pill);
	background: currentColor; opacity: 0.5; margin-inline-end: var(--wp--preset--spacing--xs-2);
}

/* --- Композиция: сетка контент + (опц.) липкий сайдбар --------------------- */
.sg-article-main { padding-block: var(--wp--preset--spacing--xl); }
@media (min-width: 1024px) { .sg-article-main { padding-block: var(--wp--preset--spacing--xl-2); } }
.sg-article-grid { display: grid; gap: var(--wp--preset--spacing--xl); }
.sg-article-grid--full .sg-article-content { max-width: var(--c-prose); margin-inline: auto; }
@media (min-width: 1024px) {
	.sg-article-grid--sidebar {
		grid-template-columns: minmax(0, 1fr) 19rem; align-items: start;
		gap: var(--wp--preset--spacing--xl-2);
	}
	/* Колонка чтения в sidebar-режиме всё равно держит комфортную меру строки. */
	.sg-article-grid--sidebar .sg-article-prose { max-width: 70ch; }
}
@media (min-width: 1280px) {
	.sg-article-grid--sidebar { grid-template-columns: minmax(0, 1fr) 21rem; }
}
.sg-article-aside__sticky {
	position: sticky; top: calc(var(--sg-stick) + var(--wp--preset--spacing--md));
	display: grid; gap: var(--wp--preset--spacing--md);
	max-block-size: calc(100dvh - var(--sg-stick) - var(--wp--preset--spacing--lg));
	overflow: auto; overscroll-behavior: contain;
	scrollbar-width: thin;
}
/* Заголовок-капс над блоком сайдбара (визуальная подпись секции). */
.sg-article-aside .sg-share { margin-top: var(--wp--preset--spacing--xs); }

/* Sidebar-макет до брейкпоинта колонки (<1024): сайдбар не помещается сбоку,
   поэтому TOC показываем компактной карточкой НАД текстом (а не в подвале),
   снимаем липкость/скролл-ограничение, а дубль «Поделиться» прячем —
   в подвале статьи share уже есть. Единственный [data-toc] сохраняется. */
@media (max-width: 1023.98px) {
	.sg-article-grid--sidebar { gap: var(--wp--preset--spacing--lg); }
	.sg-article-grid--sidebar .sg-article-aside { order: -1; }
	.sg-article-grid--sidebar .sg-article-aside__sticky {
		position: static; max-block-size: none; overflow: visible;
		gap: 0;
	}
	.sg-article-grid--sidebar .sg-article-aside .sg-share { display: none; }
	/* Карточка TOC в потоке: вернуть рамку/тень/радиус (в липком сайдбаре они были сняты). */
	.sg-article-grid--sidebar .sg-article-aside .sg-toc {
		border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--sh-e1);
	}
}

/* --- Оглавление (collapsible над текстом при layout=full) ------------------ */
.sg-article-toc-wrap {
	margin-bottom: var(--wp--preset--spacing--xl); border: 1px solid var(--c-border);
	border-radius: var(--r-lg); background: var(--c-base); box-shadow: var(--sh-e1); overflow: clip;
}
.sg-article-toc-wrap__summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: var(--wp--preset--font-size--small); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink);
}
.sg-article-toc-wrap__summary::-webkit-details-marker { display: none; }
.sg-article-toc-wrap__summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.sg-article-toc-wrap__summary svg { color: var(--c-primary); inline-size: 1.1rem; block-size: 1.1rem; }
.sg-article-toc-wrap__chev { margin-inline-start: auto; color: var(--c-muted); transition: transform var(--d-fast) var(--ease); }
.sg-article-toc-wrap[open] .sg-article-toc-wrap__chev { transform: rotate(180deg); }
.sg-article-toc-wrap .sg-toc { border: 0; box-shadow: none; border-radius: 0; padding-block: 0 var(--wp--preset--spacing--md); }
/* Заголовок секции уже задан в <summary> — внутренний дубль-label скрываем. */
.sg-article-toc-wrap .sg-toc__label { display: none; }

/* TOC в сайдбаре: вертикальный список-«змейка» с акцентной направляющей и
   индикатором текущего раздела. Сетка общего .sg-toc сжата до одной колонки. */
.sg-article-aside .sg-toc { padding: var(--wp--preset--spacing--md); }
.sg-article-aside .sg-toc__list {
	grid-template-columns: 1fr; gap: 2px;
	position: relative; padding-inline-start: var(--wp--preset--spacing--sm);
}
/* Вертикальная направляющая слева от пунктов оглавления. */
.sg-article-aside .sg-toc__list::before {
	content: ""; position: absolute; inset-block: 6px; inset-inline-start: 3px;
	inline-size: 2px; border-radius: var(--r-pill); background: var(--c-border);
}
.sg-article-aside .sg-toc__list li { position: relative; }
.sg-article-aside .sg-toc__list a {
	min-height: 0; padding: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--xs);
	border: 0; background: transparent; border-radius: var(--r-sm);
	color: var(--c-muted); font-weight: 500; line-height: 1.4; align-items: flex-start;
}
.sg-article-aside .sg-toc__list a:hover { background: var(--c-primary-soft); color: var(--c-primary-strong); transform: none; }
.sg-article-aside .sg-toc__list a .sg-toc__n {
	inline-size: 1.35rem; block-size: 1.35rem; margin-top: 1px;
	background: var(--c-sunken); color: var(--c-muted);
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}

/* Активный пункт (scroll-spy: .is-active + aria-current от article.js). */
.sg-article-toc .sg-toc__list a.is-active {
	border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-strong); font-weight: 600;
}
.sg-article-aside .sg-toc__list a.is-active { background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-article-aside .sg-toc__list a.is-active .sg-toc__n { background: var(--c-primary); color: var(--c-on-primary); }
.sg-article-aside .sg-toc__list a.is-active::before {
	content: ""; position: absolute; inset-block: 4px; inset-inline-start: calc(-1 * var(--wp--preset--spacing--sm) + 2px);
	inline-size: 2px; border-radius: var(--r-pill); background: var(--c-primary);
}

/* Якоря H2: scroll-margin под sticky-хедер (чтобы заголовок не уезжал). */
.sg-article-prose :where(h2) { scroll-margin-top: calc(var(--sg-stick) + var(--wp--preset--spacing--md)); }

/* --- Тело статьи: editorial-проза под нативные Gutenberg-блоки --------------
   Колонка чтения держит меру строки (~68ch), увеличенный кегль и ритм.
   Заголовки выразительные, списки с кастомными маркерами, цитаты — фирменные. */
.sg-article-prose {
	/* Единый вертикальный ритм секций — значения только из спейсинг-токенов theme.json.
	   Поток построен на margin-top («сова»): зазором владеет элемент, ПЕРЕД которым он
	   стоит. Соседние margin не суммируются и не зависят от того, какой блок крупнее,
	   поэтому отступы перед H2 и вокруг медиа перестают «гулять». */
	--sg-flow:           var(--wp--preset--spacing--md);   /* текстовый поток (абзацы, списки) */
	--sg-flow-block:     var(--wp--preset--spacing--lg);   /* симметрично вокруг медиа/блоков   */
	--sg-flow-h2:        var(--wp--preset--spacing--xl-2); /* перед H2 — раздел                 */
	--sg-flow-h3:        var(--wp--preset--spacing--lg);   /* перед H3 — подраздел              */
	--sg-flow-h4:        var(--wp--preset--spacing--md);   /* перед H4                          */
	--sg-flow-h-after:   var(--wp--preset--spacing--sm);   /* H2 → первый контент               */
	--sg-flow-h-after2:  var(--wp--preset--spacing--xs);   /* H3/H4 → первый контент            */
	max-width: none; font-size: var(--wp--preset--font-size--lg); line-height: 1.78;
	color: var(--c-ink); font-feature-settings: "liga" 1, "kern" 1;
	hanging-punctuation: first;
}

/* Контейнер несёт ОБА класса (.sg-prose.sg-article-prose). Compound-селектор даёт
   специфичность (0,2,0) — выше глобальных `.sg-prose <el>` (0,1,1), поэтому именно
   эти правила полностью владеют вертикальным ритмом тела статьи (иначе margin
   прямых детей перебивались базовой prose-типографикой и отступы «гуляли»). */
/* 1. Обнуляем собственные вертикальные margin у всех блоков потока — ритм задаётся ниже. */
.sg-prose.sg-article-prose > * { margin-block: 0; }
/* 2. Базовый текстовый зазор между соседними блоками. */
.sg-prose.sg-article-prose > * + * { margin-block-start: var(--sg-flow); }
/* 3. Увеличенный СИММЕТРИЧНЫЙ воздух вокруг медиа и «тяжёлых» блоков (и до, и после). */
.sg-prose.sg-article-prose > * + :where(figure, .wp-block-gallery, .wp-block-video, .wp-block-embed, table, blockquote, .wp-block-pullquote, hr),
.sg-prose.sg-article-prose > :where(figure, .wp-block-gallery, .wp-block-video, .wp-block-embed, table, blockquote, .wp-block-pullquote, hr) + * {
	margin-block-start: var(--sg-flow-block);
}
/* 4. Заголовки разделов «владеют» одинаковым отступом сверху — секции ровные. */
.sg-prose.sg-article-prose > * + :where(h2) { margin-block-start: var(--sg-flow-h2); }
.sg-prose.sg-article-prose > * + :where(h3) { margin-block-start: var(--sg-flow-h3); }
.sg-prose.sg-article-prose > * + :where(h4) { margin-block-start: var(--sg-flow-h4); }
/* 5. После заголовка — единый компактный зазор до первого контента,
      независимо от того, что идёт следом (абзац, список, медиа, таблица). */
.sg-prose.sg-article-prose > :where(h2) + * { margin-block-start: var(--sg-flow-h-after); }
.sg-prose.sg-article-prose > :where(h3) + *,
.sg-prose.sg-article-prose > :where(h4) + * { margin-block-start: var(--sg-flow-h-after2); }

/* Lede — первый абзац статьи: крупнее, чуть глуше, задаёт тон. */
.sg-article-prose > p:first-of-type {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.6; color: var(--c-ink); font-weight: 400;
	letter-spacing: -0.01em;
}
/* Буквица на первом абзаце — фирменный honey-акцент. */
.sg-article-prose > p:first-of-type::first-letter {
	float: inline-start; font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; font-size: 3.6em; line-height: 0.78;
	margin-inline-end: 0.08em; margin-block-start: 0.04em;
	color: var(--c-primary-strong);
}

/* Заголовки разделов. H2 — с надстрочным акцентом-«засечкой». */
.sg-article-prose > :where(h2) {
	position: relative; font-size: var(--wp--preset--font-size--xl-2);
	letter-spacing: -0.02em; line-height: 1.14;
	padding-top: var(--wp--preset--spacing--sm);
}
.sg-article-prose > :where(h2)::before {
	content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
	inline-size: 2.5rem; block-size: 3px; border-radius: var(--r-pill);
	background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
}
.sg-article-prose > :where(h3) {
	font-size: var(--wp--preset--font-size--xl); letter-spacing: -0.015em;
}
.sg-article-prose > :where(h4) { color: var(--c-ink); }

/* Ссылки в тексте. */
.sg-article-prose :where(a) {
	color: var(--c-primary-strong); text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
	text-underline-offset: 3px; text-decoration-thickness: 1.5px;
	transition: text-decoration-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.sg-article-prose :where(a):hover { color: var(--c-primary); text-decoration-color: var(--c-primary); }

/* Списки с кастомными маркерами. */
.sg-article-prose :where(ul, ol) { padding-inline-start: 0; list-style: none; }
.sg-article-prose :where(li) { position: relative; padding-inline-start: 1.9em; margin-block: var(--wp--preset--spacing--xs); }
.sg-article-prose :where(ul) > li::before {
	content: ""; position: absolute; inset-inline-start: 0.15em; inset-block-start: 0.62em;
	inline-size: 0.5em; block-size: 0.5em; border-radius: var(--r-pill);
	background: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-soft);
}
.sg-article-prose :where(ol) { counter-reset: sg-li; }
.sg-article-prose :where(ol) > li { counter-increment: sg-li; }
.sg-article-prose :where(ol) > li::before {
	content: counter(sg-li); position: absolute; inset-inline-start: 0; inset-block-start: 0.12em;
	inline-size: 1.5em; block-size: 1.5em; display: grid; place-items: center;
	border-radius: var(--r-pill); background: var(--c-primary); color: var(--c-on-primary);
	font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: 0.62em; font-variant-numeric: tabular-nums;
}
/* Вложенные списки — без honey-нумерации, мягче. */
.sg-article-prose :where(li ul, li ol) { margin-block: var(--wp--preset--spacing--xs-2) 0; }

/* Изображения / подписи. */
.sg-article-prose :where(img) { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.sg-article-prose :where(figure) { margin-inline: 0; }
.sg-article-prose :where(figcaption) {
	margin-top: var(--wp--preset--spacing--xs); padding-inline: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small); color: var(--c-muted); text-align: center; line-height: 1.5;
}

/* Цитата — фирменный teal-блок с большой кавычкой. */
.sg-article-prose :where(blockquote:not(.wp-block-pullquote)) {
	position: relative; margin-inline: 0;
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md) var(--wp--preset--spacing--xl);
	border-inline-start: 3px solid var(--c-primary); background: var(--c-primary-soft);
	border-radius: 0 var(--r-lg) var(--r-lg) 0;
	font-size: var(--wp--preset--font-size--xl); line-height: 1.5; color: var(--c-ink);
	font-style: italic; letter-spacing: -0.01em;
}
.sg-article-prose :where(blockquote:not(.wp-block-pullquote))::before {
	content: "\201C"; position: absolute; inset-block-start: -0.18em; inset-inline-start: 0.34em;
	font-family: var(--wp--preset--font-family--heading); font-weight: 800;
	font-size: 3.2em; line-height: 1; color: color-mix(in srgb, var(--c-primary) 32%, transparent);
}
.sg-article-prose :where(blockquote) :where(p) { margin: 0; }
.sg-article-prose :where(blockquote) :where(p + p) { margin-top: var(--wp--preset--spacing--xs); }
.sg-article-prose :where(blockquote cite, blockquote .wp-block-quote__citation) {
	display: block; margin-top: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 700;
	color: var(--c-primary-strong); letter-spacing: 0;
}

/* Pullquote — крупная центрированная выноска (часто alignwide). */
.sg-article-prose :where(.wp-block-pullquote) {
	padding-block: var(--wp--preset--spacing--lg); padding-inline: var(--wp--preset--spacing--md);
	border-block: 2px solid var(--c-border-strong); border-inline: 0; text-align: center; background: transparent;
}
.sg-article-prose :where(.wp-block-pullquote) :where(p) {
	margin: 0; font-family: var(--wp--preset--font-family--heading);
	font-weight: 800; letter-spacing: -0.025em; line-height: 1.18;
	font-size: var(--wp--preset--font-size--xl-2); color: var(--c-ink); font-style: normal;
}
.sg-article-prose :where(.wp-block-pullquote) :where(cite) {
	display: block; margin-top: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--small); font-weight: 700; font-style: normal;
	text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-accent-strong);
}

/* Галерея — аккуратная сетка с равными плитками. */
.sg-article-prose :where(.wp-block-gallery .wp-block-image) { margin: 0; }
.sg-article-prose :where(.wp-block-gallery img) { border-radius: var(--r-md); aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%; }
.sg-article-prose :where(.wp-block-gallery figcaption) { padding-inline: var(--wp--preset--spacing--xs-2); }

/* Видео / embed — стабильный 16:9, скруглён, без CLS. Тёмная подложка —
   чтобы провайдерский iframe до загрузки читался как видеокадр, а не пустота. */
.sg-article-prose :where(.wp-block-embed__wrapper) {
	border-radius: var(--r-lg); overflow: clip; background: var(--c-ink-strong);
	box-shadow: var(--sh-e2);
}
.sg-article-prose :where(.wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper) { position: relative; }
.sg-article-prose :where(.wp-block-embed iframe),
.sg-article-prose :where(.wp-block-video video) {
	display: block; inline-size: 100%; border-radius: var(--r-lg);
}
.sg-article-prose :where(.wp-block-video video) { aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-ink-strong); }

/* Таблицы внутри статьи. */
.sg-article-prose :where(table) { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--base); }
.sg-article-prose :where(th, td) { padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); border: 1px solid var(--c-border); text-align: start; }
.sg-article-prose :where(thead th) { background: var(--c-sunken); font-family: var(--wp--preset--font-family--heading); }

/* Разделитель (core/separator). */
.sg-article-prose :where(hr) {
	border: 0; block-size: 1px; background: var(--c-border);
}
.sg-article-prose :where(hr.is-style-dots) {
	background: none; text-align: center; block-size: auto; color: var(--c-border-strong);
}

/* alignwide/alignfull: выход за колонку чтения для медиа.
   В full-режиме — шире prose; в sidebar-режиме — на ширину колонки контента. */
.sg-article-grid--full .sg-article-prose :where(.alignwide) {
	width: min(var(--c-wide), 92vw); margin-inline: calc(50% - min(var(--c-wide), 92vw) / 2);
}
.sg-article-grid--sidebar .sg-article-prose :where(.alignwide) { width: 100%; }
.sg-article-prose :where(.alignfull) { width: 100%; }
.sg-article-prose :where(.alignwide .wp-block-pullquote) { border-color: var(--c-primary-soft); }

/* --- Рейтинг-виджет читателей --------------------------------------------- */
.sg-rating {
	position: relative; overflow: clip;
	margin-top: var(--wp--preset--spacing--xl-2); padding: var(--wp--preset--spacing--lg);
	border: 1px solid var(--c-border); border-radius: var(--r-xl);
	background:
		radial-gradient(130% 120% at 50% -30%, var(--c-accent-soft) 0%, transparent 55%),
		var(--c-base);
	box-shadow: var(--sh-e2); display: grid; gap: var(--wp--preset--spacing--sm);
	justify-items: center; text-align: center;
}
@media (min-width: 768px) { .sg-rating { padding: var(--wp--preset--spacing--xl); } }
.sg-rating__title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 800; letter-spacing: -0.02em; font-size: var(--wp--preset--font-size--xl); }
.sg-rating__sub { margin: 0; color: var(--c-muted); font-size: var(--wp--preset--font-size--small); font-variant-numeric: tabular-nums; }
.sg-rating__stars { display: inline-flex; gap: var(--wp--preset--spacing--xs-2); margin-top: var(--wp--preset--spacing--xs-2); }
.sg-rating__star {
	background: 0; border: 0; padding: 4px; cursor: pointer; color: var(--c-border-strong);
	transition: color var(--d-fast) var(--ease), transform var(--d-base) var(--ease-spring);
}
.sg-rating__star svg { inline-size: 2.25rem; block-size: 2.25rem; }
.sg-rating__star.is-on { color: var(--c-accent); filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--c-accent) 45%, transparent)); }
.sg-rating__star:hover { transform: scale(1.18) rotate(-4deg); }
.sg-rating__star:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }
.sg-rating__star[disabled] { cursor: default; }
.sg-rating.is-voted .sg-rating__star { cursor: default; }
.sg-rating.is-voted .sg-rating__star:hover { transform: none; }
.sg-rating__msg { margin: 0; min-height: 1.2em; color: var(--c-success-strong); font-size: var(--wp--preset--font-size--small); font-weight: 700; }
/* JS-режим: статичный фолбэк прячется (data-rating-static hidden) — на случай без [hidden] поддержки. */
.sg-rating.is-interactive .sg-rating__static { display: none; }
.sg-rating:not(.is-interactive) .sg-rating__stars { display: none; }
.sg-rating:not(.is-interactive) .sg-rating__static { margin-top: var(--wp--preset--spacing--xs-2); }
.sg-rating:not(.is-interactive) .sg-stars svg { inline-size: 1.6rem; block-size: 1.6rem; }

/* --- Статичные звёзды (редакционный / средняя) ---------------------------- */
.sg-stars { position: relative; display: inline-flex; inline-size: max-content; vertical-align: middle; line-height: 0; }
.sg-stars__track, .sg-stars__fill { display: inline-flex; gap: 2px; }
.sg-stars__track { color: var(--c-border-strong); }
.sg-stars__fill { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; white-space: nowrap; color: var(--c-accent); }
.sg-stars svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.sg-article-meta__rating { gap: 8px; }
.sg-article-meta__ratingval { font-weight: 700; }

/* --- Поделиться ------------------------------------------------------------ */
.sg-share {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--lg); border-top: 1px solid var(--c-border);
}
/* В сайдбаре share компактнее и без верхней черты. */
.sg-article-aside .sg-share { margin-top: 0; padding-top: var(--wp--preset--spacing--md); }
.sg-share__label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: var(--wp--preset--font-size--small); color: var(--c-ink); }
.sg-share__label svg { inline-size: 1.1rem; block-size: 1.1rem; color: var(--c-primary); }
.sg-share__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-2); }
.sg-share__btn {
	inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center;
	border-radius: var(--r-pill); border: 1px solid var(--c-border); background: var(--c-base);
	color: var(--c-ink); cursor: pointer; text-decoration: none; box-shadow: var(--sh-xs);
	transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), transform var(--d-base) var(--ease-spring), box-shadow var(--d-fast) var(--ease);
}
.sg-share__btn svg { inline-size: 1.2rem; block-size: 1.2rem; }
.sg-share__btn:hover { transform: translateY(-3px); border-color: var(--c-primary); color: var(--c-primary-strong); background: var(--c-primary-soft); box-shadow: var(--sh-sm); }
.sg-share__btn:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
/* Фирменные ховеры по сетям — узнаваемость без хардкода: акцент-схемой. */
.sg-share__btn--copy:hover { border-color: var(--c-accent); color: var(--c-accent-strong); background: var(--c-accent-soft); }
.sg-share__toast {
	font-size: var(--wp--preset--font-size--small); color: var(--c-success-strong); font-weight: 700;
	opacity: 0; transform: translateY(2px); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.sg-share__toast.is-on { opacity: 1; transform: none; }

/* --- Похожие статьи / карточки рубрики (на базе .loc-card) ----------------- */
.sg-related__card, .sg-rubric-card { overflow: clip; }
.sg-related__card .loc-card__body,
.sg-rubric-card .loc-card__body { gap: var(--wp--preset--spacing--xs); padding: var(--wp--preset--spacing--md); }
.sg-related__media, .sg-rubric-card__media {
	display: block; aspect-ratio: 16 / 10; background: var(--c-sunken); overflow: clip; position: relative;
}
.sg-related__img, .sg-rubric-card__img {
	inline-size: 100%; block-size: 100%; object-fit: cover;
	transition: transform var(--d-reveal) var(--ease);
}
.sg-related__card:hover .sg-related__img,
.sg-rubric-card:hover .sg-rubric-card__img { transform: scale(1.05); }
/* Градиентный плейсхолдер с фирменной атмосферой (нет featured). */
.sg-related__media-ph, .sg-rubric-card__media-ph {
	display: block; block-size: 100%;
	background:
		radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 58%),
		linear-gradient(135deg, var(--c-primary-strong), var(--c-ink-strong));
}
.sg-related__media-ph::after, .sg-rubric-card__media-ph::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.4px);
	background-size: 18px 18px; opacity: 0.5; mix-blend-mode: overlay;
}
.sg-related__cat, .sg-rubric-card__cat {
	text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--caption);
	font-weight: 700; color: var(--c-primary-strong); margin: 0;
}
.sg-related__title, .sg-rubric-card__title { line-height: 1.25; }
.sg-related__title a, .sg-rubric-card__title a { color: var(--c-ink); text-decoration: none; transition: color var(--d-fast) var(--ease); }
.sg-related__title a:hover, .sg-rubric-card__title a:hover { color: var(--c-primary-strong); }
.sg-related__title a:focus-visible, .sg-rubric-card__title a:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }
/* Кламп заголовка/выдержки — ровная высота карточек в сетке. */
.sg-related__title, .sg-rubric-card__title,
.sg-related__excerpt, .sg-rubric-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.sg-related__title, .sg-rubric-card__title { -webkit-line-clamp: 2; }
.sg-related__excerpt, .sg-rubric-card__excerpt {
	-webkit-line-clamp: 2; color: var(--c-muted); font-size: var(--wp--preset--font-size--small); line-height: 1.55; margin: 0;
}
.sg-related__foot, .sg-rubric-card__foot {
	display: flex; align-items: center; gap: 8px; font-size: var(--wp--preset--font-size--caption);
	color: var(--c-muted); margin-top: auto; padding-top: var(--wp--preset--spacing--xs-2);
	font-variant-numeric: tabular-nums;
}
.sg-related__card, .sg-rubric-card { display: flex; flex-direction: column; }
.sg-related__card .loc-card__body,
.sg-rubric-card .loc-card__body { flex: 1; display: flex; flex-direction: column; }

/* ==========================================================================
   РУБРИКА (category archive)
   ========================================================================== */
/* Интро рубрики на атмосферном фоне (как hero, но компактнее). */
.sg-rubric-intro {
	position: relative; isolation: isolate;
	background: radial-gradient(120% 90% at 50% -20%, var(--c-primary-soft) 0%, transparent 60%);
}
.sg-rubric-intro__head { max-width: 64ch; margin-bottom: var(--wp--preset--spacing--lg); }
.sg-rubric-intro__title { margin-block: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm); font-size: var(--wp--preset--font-size--xl-4); }

/* --- Поиск по записям рубрики ---------------------------------------------- */
.sg-search { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-2); max-width: 42rem; }
.sg-search__field {
	flex: 1 1 16rem; display: flex; align-items: center; gap: 10px;
	padding: 0 var(--wp--preset--spacing--md); background: var(--c-base);
	border: 1px solid var(--c-border-strong); border-radius: var(--r-pill); box-shadow: var(--sh-xs);
	transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.sg-search__field:focus-within { border-color: var(--c-primary); box-shadow: var(--sh-ring); }
.sg-search__field svg { flex: none; color: var(--c-muted); inline-size: 1.25rem; block-size: 1.25rem; }
.sg-search__field:focus-within svg { color: var(--c-primary); }
.sg-search__field input { flex: 1; border: 0; background: 0; padding-block: 0.95rem; font: inherit; color: var(--c-ink); outline: none; }
.sg-search__field input::placeholder { color: var(--c-muted); }
.sg-search .btn { flex: none; }

/* --- Сетка карточек рубрики ------------------------------------------------ */
.sg-rubric-grid { margin-top: var(--wp--preset--spacing--lg); }
.sg-rubric-empty {
	display: grid; gap: var(--wp--preset--spacing--md); justify-items: start;
	padding: var(--wp--preset--spacing--xl); background: var(--c-base);
	border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg);
}

/* --- Пагинация ------------------------------------------------------------- */
.sg-pagination { margin-top: var(--wp--preset--spacing--xl); }
.sg-pagination .page-numbers {
	list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--xs-2); justify-content: center;
}
.sg-pagination .page-numbers li { display: inline-flex; }
.sg-pagination a.page-numbers,
.sg-pagination span.page-numbers {
	min-inline-size: 2.5rem; min-block-size: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 0.8rem; border: 1px solid var(--c-border); border-radius: var(--r-md);
	background: var(--c-base); color: var(--c-ink); text-decoration: none; font-weight: 600;
}
.sg-pagination a.page-numbers:hover { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-strong); }
.sg-pagination a.page-numbers:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.sg-pagination span.current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-sm); }
.sg-pagination .dots { border: 0; background: transparent; }

/* --- Reduced motion: гасим трансформы/прогресс/зум ------------------------- */
@media (prefers-reduced-motion: reduce) {
	.sg-article::before { transition: none; }
	.sg-rating__star:hover,
	.sg-share__btn:hover,
	.sg-related__card:hover .sg-related__img,
	.sg-rubric-card:hover .sg-rubric-card__img,
	.sg-article-cover__chip:hover { transform: none; }
	.sg-related__img, .sg-rubric-card__img { transition: none; }
}

/* ==========================================================================
   Интерактивная карта направлений (.sg-dest-map)
   Фирменная палитра (тёмно-зелёный бренд), три состояния путей, тултип-pill.
   Россия и Скандинавия (RU/NO/SE/FI) удалены из геометрии → viewBox опущен к
   суше (альбомный кроп, аспект ~1.49), маска диагонального среза больше не нужна.
   Всё на токенах theme.json. .dest-tiles ниже — не трогаем (полный fallback).
   ========================================================================== */
.sg-dest-map {
	/* Локальные токены палитры карты (производные от бренда). */
	--map-land:      color-mix(in srgb, var(--c-primary) 11%, var(--c-base));
	--map-land-sep:  color-mix(in srgb, var(--c-primary) 12%, var(--c-base));
	--map-avail:     color-mix(in srgb, var(--c-primary) 34%, var(--c-base));
	--map-avail-sep: var(--c-base);
	--map-hover:     var(--c-primary);
	--map-panel-1:   color-mix(in srgb, var(--c-primary) 8%, var(--c-base));
	--map-panel-2:   var(--c-base);
	/* Карта — визуальный низ hero: живёт ВНУТРИ секции .sg-dest-intro и
	   наследует её атмосферу (.sg-atmo). Своего фона НЕТ (иначе перекрыл бы
	   mesh hero) — атмосфера просвечивает под картой единым полотном.
	   Сверху зазор до лида hero минимальный (верх карты — пустой океан, наложения
	   нет), снизу отступ даёт паддинг секции hero. Карта альбомная (север опущен)
	   → по высоте низкая, ритм держим компактным. */
	/* Зазор до текста hero задаёт gap контейнера .sg-dest-intro__inner. */
	padding-block: 0 0;
	/* В центрированной flex-колонке hero карта должна занять всю ширину, чтобы её
	   внутренний .sg-container--wide/__stage центрировались как задумано. */
	inline-size: 100%;
}

/* Легенда состояний — расшифровка цвета (не полагаемся на цвет как единственный
   признак). */
.sg-dest-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	margin: var(--wp--preset--spacing--sm) 0 0;
	padding: 0;
	list-style: none;
}
.sg-dest-map__legend-item {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--c-muted);
}
.sg-dest-map__legend-dot {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	border-radius: 999px;
	flex: none;
}
.sg-dest-map__legend-dot--on {
	background: var(--map-avail);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-primary) 45%, transparent);
}
.sg-dest-map__legend-dot--off {
	background: var(--map-land);
	box-shadow: inset 0 0 0 1.5px var(--c-border-strong);
}

/* Своей градиент-плашки/поля у карты больше нет: карта лежит прямо на атмосфере
   hero (mesh секции .sg-dest-intro просвечивает под ней), без отдельной панели. */

/* Сцена карты: центрированный бокс с максимумом по ширине. viewBox подрезан
   плотно к суше (181 364 821 550, аспект ~1.49 — RU/NO/SE/FI удалены, север
   опущен, океан по флангам/сверху срезан) → суша заполняет бокс без пустых
   полей, карта широкая и низкая. Остаётся контекстом позиционирования тултипа
   (JS считает координаты от .sg-dest-map__stage — класс сохранён). Ширину держим
   с потолком, чтобы на ультравайд карта не разрасталась в гигантизм. */
.sg-dest-map__stage {
	position: relative;
	inline-size: 100%;
	max-inline-size: 66rem;
	margin-inline: auto;
}

/* SVG адаптивен: тянется по ширине сцены, высота — по соотношению.
   Специфичность поднята (двойной класс), чтобы перекрыть icon-reset .sg svg
   {inline-size:1em}, иначе карта схлопывается до ~1em. */
.sg-dest-map .sg-dest-map__svg {
	display: block;
	position: relative;
	z-index: 1;
	inline-size: 100%;
	block-size: auto;
	max-inline-size: 100%;
	margin-inline: auto;
	overflow: visible;
}

/* Базовая заливка/обводка всех стран (общий разделитель — тонкий stroke). */
.sg-dest-map__svg path[data-cc] {
	fill: var(--map-land);
	stroke: var(--map-land-sep);
	stroke-width: 0.6;
	stroke-linejoin: round;
	transition: fill var(--d-base) var(--ease), stroke var(--d-base) var(--ease), transform var(--d-base) var(--ease), filter var(--d-base) var(--ease);
}

/* Недоступные — тихий фон суши, читаются как «фон», некликабельны. Обводку
   убираем: муут-страны сливаются в единый мягкий силуэт-контекст, а прямой
   вертикальный край восточной обрезки окна карты не рисуется линией. */
.sg-dest-map__svg path.is-muted {
	fill: var(--map-land);
	stroke: transparent;
	pointer-events: none;
}

/* Доступные — живой брендовый оттенок, кликабельны. Разделитель светлее для
   «инкрустированного» вида на любом фоне. */
.sg-dest-map__svg path.is-available {
	fill: var(--map-avail);
	stroke: var(--map-avail-sep);
	stroke-width: 0.7;
	cursor: pointer;
	/* Зум — от собственного центра пути, а не от начала координат SVG. */
	transform-box: fill-box;
	transform-origin: center;
}

/* Ховер/фокус доступной страны — насыщенная подсветка + аккуратный stroke +
   лёгкий zoom. Соседи не смещаются (масштабируется только сам путь). */
.sg-dest-map__svg path.is-available.is-hover,
.sg-dest-map__svg path.is-available:focus-visible {
	fill: var(--map-hover);
	stroke: color-mix(in srgb, var(--c-on-primary) 70%, transparent);
	stroke-width: 1;
	transform: scale(1.035);
	filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--c-primary) 42%, transparent));
}
/* Клавиатурный фокус — видимый outline поверх подсветки. */
.sg-dest-map__svg path.is-available:focus-visible {
	outline: 3px solid var(--c-primary-strong);
	outline-offset: 2px;
}

/* Тултип: pill у курсора, поверх карты, событий не перехватывает. */
.sg-dest-map__tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--xs-2);
	max-width: 240px;
	padding: 0.45em 0.85em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.15;
	white-space: nowrap;
	color: var(--c-on-primary);
	background: var(--c-primary-strong);
	border-radius: var(--r-pill);
	box-shadow: var(--sh-e3);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 12px)) scale(0.94);
	transition: opacity var(--d-fast) var(--ease), transform var(--d-base) var(--ease-spring);
}
/* Хвостик pill, направленный на курсор/страну. */
.sg-dest-map__tip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--c-primary-strong);
}
.sg-dest-map__tip.is-visible { opacity: 1; transform: translate(-50%, calc(-100% - 12px)) scale(1); }
.sg-dest-map__tip-name { letter-spacing: -0.01em; }
/* Акцентная стрелка «→» — тёплый honey-оттенок, читаемый на тёмной pill. */
.sg-dest-map__tip-go {
	color: color-mix(in srgb, var(--c-accent) 55%, #fff);
	font-weight: 800;
}

/* Адаптив: на узких вьюпортах чуть ужимаем сцену/шапку. Карта остаётся —
   мелкие страны трудно тапнуть, но ниже полноценная сетка плиток (fallback). */
@media (max-width: 600px) {
	.sg-dest-map__legend { gap: var(--wp--preset--spacing--xs-2) var(--wp--preset--spacing--sm); }
}

@media (prefers-reduced-motion: reduce) {
	.sg-dest-map__svg path[data-cc] { transition: fill var(--d-fast) var(--ease), stroke var(--d-fast) var(--ease); }
	.sg-dest-map__svg path.is-available.is-hover,
	.sg-dest-map__svg path.is-available:focus-visible { transform: none; }
	.sg-dest-map__tip { transition: opacity var(--d-fast) var(--ease); }
}