/**
 * Модуль 11 — «Шапка каталогу».
 *
 * Файл статичний: усі значення (розміри, кольори, пропорції, тривалості) приходять
 * інлайн-змінними на самій секції, тож CSS кешується браузером і кеш-плагіном.
 * Змінні мають запасні значення — навіть якщо інлайн-блок з якоїсь причини не
 * доїхав, блок виглядає осмислено.
 */

.cfsux-chero {
	margin-block: 0;
	padding-block: var(--cfch-top, 40px) var(--cfch-bottom, 40px);
}

/*
 * Тема додає вмісту сторінки СВІЙ верхній відступ (`--theme-content-vertical-spacing`,
 * на цьому сайті 60px), тож проміжок під шапкою виходив удвічі більший за проміжок
 * над нею. Прибираємо його рівно там, де стоїть наш блок, — тоді обидва проміжки
 * задаються нашими полями «Відступ згори/знизу» й однакові на ПК і на телефоні.
 * Пишемо ФІЗИЧНУ властивість: логічну тема перебиває своєю `padding-top`.
 */
.cfsux-chero--flush + .ct-container[data-vertical-spacing],
.cfsux-chero--flush + .ct-container-narrow[data-vertical-spacing],
.cfsux-chero--flush + .ct-container-full[data-vertical-spacing] {
	padding-top: 0;
}

/*
 * До того ж WooCommerce лишає на архіві ПОРОЖНІЙ заголовок каталогу
 * (`<header class="woocommerce-products-header">` нульової висоти) з відступом
 * 20px — ще одна невидима «сходинка» під нашим блоком. Прибираємо лише тоді,
 * коли він справді порожній: якщо тема колись покладе туди заголовок чи опис,
 * його відступ лишиться на місці.
 */
.cfsux-chero--flush + [data-vertical-spacing] .woocommerce-products-header:empty {
	margin-bottom: 0;
}

/*
 * Ширину й бічні поля бере клас контейнера теми (.ct-container) — так шапка
 * стоїть рівно по сітці товарів під нею. А ось РОЗКЛАДКУ всередині задаємо самі:
 * тема оголошує контейнер флексом (а в інших шаблонах може й ґрідом), і тоді
 * банер із текстом могли б стати поруч, а не один під одним. Селектор із двох
 * класів — щоб перебити правило теми, яке підключається пізніше за наше.
 */
.cfsux-chero .cfsux-chero__inner {
	display: block;
	margin-inline: auto;
}

/* На всю ширину екрана — тоді поля тримає сама секція. */
.cfsux-chero--full {
	padding-inline: 0;
}

.cfsux-chero--center {
	text-align: center;
}

.cfsux-chero--left {
	text-align: start;
}

/* ------------------------------------------------------------------ */
/*  Стрічка банера                                                     */
/* ------------------------------------------------------------------ */

.cfsux-chero__banner {
	position: relative;
	border-radius: var(--cfch-radius, 18px);
	padding: var(--cfch-pad, 0px);
	overflow: hidden;
}

.cfsux-chero__banner.is-framed {
	/* Тонка приглушена рамка: колір із налаштувань, насиченість окремо —
	   суцільна лінія повного кольору поруч із фото завжди виглядає різко. */
	border: 1px solid rgba(94, 162, 174, var(--cfch-frame-op, 0.35));
	border-color: color-mix(in srgb, var(--cfch-frame, #5EA2AE) var(--cfch-frame-a, 35%), transparent);
}

.cfsux-chero__banner.is-shadow {
	box-shadow: 0 14px 34px rgba(6, 7, 14, 0.06);
}

.cfsux-chero__banner-in {
	position: relative;
	border-radius: calc(var(--cfch-radius, 18px) - var(--cfch-pad, 0px));
	overflow: hidden;
	line-height: 0;
}

.cfsux-chero__banner-in > * {
	max-width: 100%;
}

/*
 * ⚠️ Тільки ВЛАСНЕ зображення (прямий нащадок). Правило на всі `img` усередині
 * лізло б у чужу розмітку банера-шорткоду й ламало його підгонку (слайд, який
 * має бути «cover» на всю висоту, розтягувався на власну висоту й обрізався).
 */
.cfsux-chero__banner-in > a {
	display: block; /* інакше висота посилання-обгортки не рахується */
}

.cfsux-chero__banner-in > img,
.cfsux-chero__banner-in > a > img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Задані пропорції — банер стає стрічкою фіксованої висоти. */
.cfsux-chero__banner.is-ratio > .cfsux-chero__banner-in {
	aspect-ratio: var(--cfch-ratio, 6/1);
}

.cfsux-chero__banner.is-ratio > .cfsux-chero__banner-in > *,
.cfsux-chero__banner.is-ratio > .cfsux-chero__banner-in > a > img {
	block-size: 100%;
	inline-size: 100%;
}

.cfsux-chero__banner.is-ratio > .cfsux-chero__banner-in > img,
.cfsux-chero__banner.is-ratio > .cfsux-chero__banner-in > a > img {
	object-fit: cover;
}

/* ------------------------------------------------------------------ */
/*  Текст                                                              */
/* ------------------------------------------------------------------ */

.cfsux-chero__text {
	position: relative; /* точка відліку для розтягнутого посилання */
	display: flex;
	flex-direction: column;
	gap: var(--cfch-gap, 12px);
}

.cfsux-chero__banner + .cfsux-chero__text {
	margin-block-start: clamp(18px, 3vw, 30px);
}

.cfsux-chero__text + .cfsux-chero__banner {
	margin-block-start: clamp(18px, 3vw, 30px);
}

/*
 * Стек шарів: усі тексти лежать в одній клітинці ґрід-сітки, тож висота блоку
 * дорівнює найвищому з них — під час зміни текстів сторінка не «стрибає».
 */
.cfsux-chero__stack {
	display: grid;
	align-items: start;
}

/*
 * Заголовки притиснуті до НИЗУ свого стека, описи — до ВЕРХУ. Навіщо: висота
 * стека дорівнює найвищому шару, тож короткий заголовок (один рядок) поруч із
 * довгим (два рядки) лишав під собою дірку, і відстань до опису стрибала —
 * на телефоні це було особливо помітно. Тепер відстань між заголовком і описом
 * СТАЛА (рівно «Відстань до заголовка»), а запас висоти йде до країв блоку,
 * де й так є поле. Сторінка при зміні текстів так само не сіпається.
 */
.cfsux-chero__stack--title {
	align-items: end;
}

.cfsux-chero--center .cfsux-chero__stack {
	justify-items: center;
}

.cfsux-chero--left .cfsux-chero__stack {
	justify-items: start;
}

.cfsux-chero__stack > * {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	pointer-events: none;
	transition:
		opacity var(--cfch-fade, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--cfch-fade, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear var(--cfch-fade, 700ms);
}

.cfsux-chero__stack > .is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}

.cfsux-chero__title {
	display: block;
	font-family: var(--cfch-font, inherit);
	font-size: var(--cfch-title, 34px);
	font-weight: var(--cfch-weight, 500);
	font-style: var(--cfch-title-style, normal);
	letter-spacing: var(--cfch-ls, 0em);
	line-height: 1.2;
	color: var(--cfch-title-color, inherit);
	text-wrap: balance;
}

.cfsux-chero__title.is-caps {
	text-transform: uppercase;
}

.cfsux-chero__stack--desc {
	max-inline-size: var(--cfch-desc-w, 720px);
	inline-size: 100%;
}

.cfsux-chero--center .cfsux-chero__stack--desc {
	margin-inline: auto;
}

.cfsux-chero__desc {
	font-family: var(--cfch-font-desc, var(--cfch-font, inherit));
	font-size: var(--cfch-desc, 15px);
	font-weight: var(--cfch-desc-weight, 400);
	font-style: var(--cfch-desc-style, normal);
	letter-spacing: var(--cfch-desc-ls, 0em);
	line-height: var(--cfch-desc-lh, 1.65);
	/* Без свого кольору опис — приглушений колір тексту сторінки: працює і на
	   світлому, і на темному тлі (на відміну від жорстко заданого сірого). */
	color: var(--cfch-desc-color, color-mix(in srgb, currentColor 74%, transparent));
}

.cfsux-chero__link,
.cfsux-chero__cta {
	color: var(--cfch-link, #3996AD);
	text-decoration: none;
	border-block-end: 1px solid transparent;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}

.cfsux-chero__cta {
	white-space: nowrap;
	font-weight: 500;
}

.cfsux-chero__link:hover,
.cfsux-chero__link:focus-visible,
.cfsux-chero__cta:hover,
.cfsux-chero__cta:focus-visible {
	border-block-end-color: currentColor;
}

/*
 * Клікабельний увесь блок («розтягнуте посилання»). Посилання лишається
 * справжнім посиланням із текстом — просто його псевдоелемент накриває весь
 * текстовий блок. Тому:
 *   • курсор скрізь стає пальцем (це рідна поведінка <a>, нічого не задаємо);
 *   • у розмітці й для читалок нічого не змінилось — жодних порожніх обгорток;
 *   • прихований шар має visibility:hidden, тож клікає завжди адреса ТОГО
 *     тексту, який зараз видно, і жодне «привидне» посилання не перехоплює клік.
 */
.cfsux-chero__link.is-stretch::after,
.cfsux-chero__cta.is-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * У режимі «увесь блок» рядок опису НЕ вдає із себе окреме посилання: клікає ж
 * увесь блок. Тому він звичайного кольору й без підкреслення — а кольором
 * посилання заголовок і опис стають РАЗОМ, коли курсор десь на блоці.
 */
.cfsux-chero__desc .cfsux-chero__link.is-stretch,
.cfsux-chero__desc .cfsux-chero__link.is-stretch:hover,
.cfsux-chero__desc .cfsux-chero__link.is-stretch:focus-visible {
	color: inherit;
	border-block-end-color: transparent;
}

.cfsux-chero__title,
.cfsux-chero__desc {
	transition: color 0.22s ease;
}

/* Курсор на будь-якій частині блоку — фарбуються ЛИШЕ написи: заголовок і опис.
   Ні фон, ні рамка, ні банер не змінюються. `:has()` не підтримується — просто
   не буде підсвітки, а клік працюватиме. */
.cfsux-chero__text:has(.is-stretch:hover) .cfsux-chero__title,
.cfsux-chero__text:has(.is-stretch:hover) .cfsux-chero__desc,
.cfsux-chero__text:has(.is-stretch:focus-visible) .cfsux-chero__title,
.cfsux-chero__text:has(.is-stretch:focus-visible) .cfsux-chero__desc {
	color: var(--cfch-link, #3996AD);
}

/* Порожнє посилання (у шарі сама лише адреса) не повинно займати місце. */
.cfsux-chero__link:empty {
	display: block;
	block-size: 0;
}

/*
 * Позначка «відкриється в новій вкладці» — тільки для читалок. Не `display:none`
 * (тоді її не прочитають) і не `visibility:hidden`: класичний кліп-прийом.
 */
.cfsux-chero__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ */
/*  Рамки блоку — п'ять характерів, усі на чистому CSS                 */
/* ------------------------------------------------------------------ */

/*
 * Спільне для всіх видів. Лінія — не суцільний колір, а приглушений: тонкий
 * контур повного кольору поруч із текстом завжди читається як «дріт».
 * Рамка малюється псевдоелементами поверх, у потік не втручається, тож
 * висота блоку лишається висотою тексту — і при зміні текстів не стрибає.
 */
.cfsux-frame {
	position: relative;
	padding: var(--cfch-fr-pad, 30px);
}

.cfsux-frame__deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cfsux-frame::before,
.cfsux-frame::after,
.cfsux-frame__deco::before,
.cfsux-frame__deco::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* 1. ПАСПАРТУ — дві волосяні лінії, як у музейному паспарту. */
.cfsux-frame--hairline::before {
	inset: 0;
	border: var(--cfch-fr-w, 1px) solid rgba(94, 162, 174, 0.45);
	border-color: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	border-radius: var(--cfch-fr-r, 14px);
}

.cfsux-frame--hairline::after {
	inset: 7px;
	border: 1px solid rgba(94, 162, 174, 0.2);
	border-color: color-mix(in srgb, var(--cfch-fr, #5EA2AE) calc(var(--cfch-fr-a, 45%) * 0.45), transparent);
	border-radius: max(0px, calc(var(--cfch-fr-r, 14px) - 6px));
}

/* 2. КУТИКИ — чотири засічки, решта повітря. Розмір фіксований, тож на вузькому
      екрані вони не сходяться й не перетворюються на рамку. */
.cfsux-frame--corners::before,
.cfsux-frame--corners::after,
.cfsux-frame--corners .cfsux-frame__deco::before,
.cfsux-frame--corners .cfsux-frame__deco::after {
	inline-size: clamp(16px, 4vw, 30px);
	block-size: clamp(16px, 4vw, 30px);
	border: 0 solid rgba(94, 162, 174, 0.45);
	border-color: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	border-width: 0;
}

.cfsux-frame--corners::before {
	inset-block-start: 0;
	inset-inline-start: 0;
	border-block-start-width: var(--cfch-fr-w, 1px);
	border-inline-start-width: var(--cfch-fr-w, 1px);
	border-start-start-radius: var(--cfch-fr-r, 14px);
}

.cfsux-frame--corners::after {
	inset-block-start: 0;
	inset-inline-end: 0;
	border-block-start-width: var(--cfch-fr-w, 1px);
	border-inline-end-width: var(--cfch-fr-w, 1px);
	border-start-end-radius: var(--cfch-fr-r, 14px);
}

.cfsux-frame--corners .cfsux-frame__deco::before {
	inset-block-end: 0;
	inset-inline-start: 0;
	border-block-end-width: var(--cfch-fr-w, 1px);
	border-inline-start-width: var(--cfch-fr-w, 1px);
	border-end-start-radius: var(--cfch-fr-r, 14px);
}

.cfsux-frame--corners .cfsux-frame__deco::after {
	inset-block-end: 0;
	inset-inline-end: 0;
	border-block-end-width: var(--cfch-fr-w, 1px);
	border-inline-end-width: var(--cfch-fr-w, 1px);
	border-end-end-radius: var(--cfch-fr-r, 14px);
}

/* 3. ТАБЛИЧКА — суцільний прямокутник із розривом угорі по центру: заголовок
      ніби вкладено у гравіювальну пластину. Лінії намальовані градієнтами, а не
      бордером, — саме тому розрив можливий без масок і без зайвих елементів. */
.cfsux-frame--plate::before {
	inset: 0;
	--cfch-fr-line: rgba(94, 162, 174, 0.45);
	--cfch-fr-line: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	--cfch-fr-gap: clamp(60px, 34%, 340px);
	background-image:
		linear-gradient(
			90deg,
			var(--cfch-fr-line) 0 calc(50% - var(--cfch-fr-gap) / 2),
			transparent calc(50% - var(--cfch-fr-gap) / 2) calc(50% + var(--cfch-fr-gap) / 2),
			var(--cfch-fr-line) calc(50% + var(--cfch-fr-gap) / 2) 100%
		),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line)),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line)),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line));
	background-size:
		100% var(--cfch-fr-w, 1px),
		100% var(--cfch-fr-w, 1px),
		var(--cfch-fr-w, 1px) 100%,
		var(--cfch-fr-w, 1px) 100%;
	background-position: top, bottom, left, right;
	background-repeat: no-repeat;
}

/* 4. ЕСКІЗ — два розмашисті штрихи, згори й знизу: заголовок і опис читаються як
      рядок між двома проведеними від руки лініями. Бічних немає навмисно — так
      блок лишається відкритим і легким. Штрих тягнеться лише по своїй осі, а
      товщина не залежить від розтягу (non-scaling-stroke), тому й на вузькій
      колонці телефона, і на широкому екрані почерк однаковий. */
.cfsux-frame--sketch .cfsux-frame__ln {
	position: absolute;
	overflow: visible;
	fill: none;
	stroke: rgba(94, 162, 174, 0.45);
	stroke: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	stroke-width: var(--cfch-fr-w, 1px);
	stroke-linecap: round;
}

/*
 * ⚠️ SVG — ЗАМІЩУВАНИЙ елемент: задати йому ширину двома `inset`-ами не можна,
 * браузер бере власний розмір із viewBox (300px) і другий відступ ігнорує.
 * Тому довжину штриха рахуємо явно: відступ від кута + ширина «решта мінус два
 * відступи». Ті самі значення — в обох властивостях, звідси змінні.
 */
.cfsux-frame--sketch .cfsux-frame__deco {
	--cfch-fr-gh: clamp(14px, 5%, 46px);
}

.cfsux-frame--sketch .cfsux-frame__ln--t,
.cfsux-frame--sketch .cfsux-frame__ln--b {
	inset-inline-start: var(--cfch-fr-gh, 24px);
	inline-size: calc(100% - 2 * var(--cfch-fr-gh, 24px));
	block-size: 12px;
}

.cfsux-frame--sketch .cfsux-frame__ln--t {
	inset-block-start: -5px;
}

.cfsux-frame--sketch .cfsux-frame__ln--b {
	inset-block-end: -5px;
	transform: scaleY(-1);
}

/* Бічних штрихів у «Ескізі» немає: блок тримають лише дві лінії згори й знизу,
   тож бічне поле можна лишити меншим — рядок дихає вільніше. */
.cfsux-frame--sketch {
	padding-inline: min(var(--cfch-fr-pad, 30px), 18px);
}

/* 5. РОМБ — розриви вгорі й унизу, у них ромб. Перегук із роздільником сайту
      ([cfsux_divider]), щоб шапка й секції головної говорили однією мовою. */
.cfsux-frame--jewel::before {
	inset: 0;
	--cfch-fr-line: rgba(94, 162, 174, 0.45);
	--cfch-fr-line: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	background-image:
		linear-gradient(
			90deg,
			var(--cfch-fr-line) 0 calc(50% - 15px),
			transparent calc(50% - 15px) calc(50% + 15px),
			var(--cfch-fr-line) calc(50% + 15px) 100%
		),
		linear-gradient(
			90deg,
			var(--cfch-fr-line) 0 calc(50% - 15px),
			transparent calc(50% - 15px) calc(50% + 15px),
			var(--cfch-fr-line) calc(50% + 15px) 100%
		),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line)),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line));
	background-size:
		100% var(--cfch-fr-w, 1px),
		100% var(--cfch-fr-w, 1px),
		var(--cfch-fr-w, 1px) 100%,
		var(--cfch-fr-w, 1px) 100%;
	background-position: top, bottom, left, right;
	background-repeat: no-repeat;
}

.cfsux-frame--jewel .cfsux-frame__deco::before,
.cfsux-frame--jewel .cfsux-frame__deco::after {
	inline-size: 8px;
	block-size: 8px;
	inset-inline-start: calc(50% - 4px);
	border: var(--cfch-fr-w, 1px) solid rgba(94, 162, 174, 0.45);
	border-color: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	transform: rotate(45deg);
}

.cfsux-frame--jewel .cfsux-frame__deco::before {
	inset-block-start: -4px;
}

.cfsux-frame--jewel .cfsux-frame__deco::after {
	inset-block-end: -4px;
}

/*
 * 6. АРКА — той самий роздільник, що в блоці «Історія» ([cfsux_divider]), але
 *    розгорнутий у рамку: угорі дах із ромбом на коньку, унизу — його дзеркало
 *    (кіль). Боковин немає навмисно: блок лишається відкритим, як сторінка книги.
 *
 *    Нитка описана ОДИН раз: права половина дзеркалиться по горизонталі, нижня
 *    арка — по вертикалі. Розкладка ґрідом (як у роздільника) — це заразом
 *    вирішує проблему заміщуваних елементів: ширину SVG задає доріжка ґріда,
 *    а не власний розмір картинки (пастка №26).
 */
.cfsux-frame--arch {
	/* Аркам потрібне своє повітря: беремо більше з поля користувача й висоти арки. */
	padding-block: max(var(--cfch-fr-pad, 30px), 42px);
}

.cfsux-frame--arch .cfsux-frame__arc {
	/* Висота смуги — ОДНА величина на контейнер і на самі нитки. Відсоток тут не
	   годиться: у ґрід-рядку висота вважається невизначеною, і SVG (заміщуваний
	   елемент) повертався до власних пропорцій — нитка ставала вищою за смугу,
	   а ромб з'їжджав із коньку на кілька пікселів. */
	--cfch-arc-h: clamp(22px, 2.4vw, 30px);

	position: absolute;
	inset-inline: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: var(--cfch-arc-h);
	gap: clamp(9px, 1.25vw, 15px);
	block-size: var(--cfch-arc-h);
	pointer-events: none;
}

.cfsux-frame--arch .cfsux-frame__arc--t {
	inset-block-start: 0;
}

.cfsux-frame--arch .cfsux-frame__arc--b {
	inset-block-end: 0;
	transform: scaleY(-1);
}

/* Фізичні width/height — логічні тема може перебити своїм правилом для svg. */
.cfsux-frame__arcln {
	width: 100%;
	height: var(--cfch-arc-h, 30px);
	overflow: visible;
}

.cfsux-frame__arcln path {
	fill: none;
	stroke: rgba(94, 162, 174, 0.45);
	stroke: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	stroke-width: var(--cfch-fr-w, 1px);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.cfsux-frame__arcln--r {
	transform: scaleX(-1);
}

/*
 * Ромб сидить рівно на коньку: 16% висоти смуги — це та сама точка, де в
 * координатах нитки її верхній кінець (6.4 з 40). Тому ромб не «з'їжджає»,
 * хоч би якою була висота смуги на цьому екрані.
 */
.cfsux-frame__arcgl {
	position: absolute;
	inset-inline-start: 50%;
	inset-block-start: 16%;
	translate: -50% -50%;
	inline-size: clamp(11px, 1.2vw, 15px);
	block-size: auto;
	overflow: visible;
}

.cfsux-frame__arcgl path {
	fill: none;
	stroke: rgba(94, 162, 174, 0.45);
	stroke: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	stroke-width: 1.3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/*
 * 7—8. ПІДВІС і ЛАНКА — спільний задум.
 *
 * Усі звичні рамки живуть на горизонталі: лінія або щось робить із собою
 * (згасає, двоїться, вигинається), або на неї САДЯТЬ орнамент. Тут навпаки:
 * нитка лишається чистою й нічого з собою не робить, а весь характер дає
 * ВЕРТИКАЛЬНИЙ жест — підвіска звисає до тексту, ланка стоїть у розриві нитки.
 * Прикраса взагалі так і влаштована: вона висить, а не лежить.
 *
 * Обидві намальовані з ЗБЕРЕЖЕНИМИ пропорціями (без preserveAspectRatio="none"),
 * тож крапля лишається краплею на будь-якій ширині блоку.
 */
.cfsux-frame--pendant,
.cfsux-frame--link {
	/* Підвіска звисає всередину блоку — їй потрібне своє повітря. */
	padding-block: max(var(--cfch-fr-pad, 30px), 46px);
}

/* Нитка згори й знизу. У «Ланки» вона з розривом — рівно під ланку. */
.cfsux-frame--pendant::before,
.cfsux-frame--link::before {
	inset: 0;
	--cfch-fr-line: rgba(94, 162, 174, 0.45);
	--cfch-fr-line: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	background-image:
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line)),
		linear-gradient(var(--cfch-fr-line), var(--cfch-fr-line));
	background-size: 100% var(--cfch-fr-w, 1px);
	background-position: top, bottom;
	background-repeat: no-repeat;
}

.cfsux-frame--link::before {
	--cfch-fr-gap: 26px;
	background-image:
		linear-gradient(
			90deg,
			var(--cfch-fr-line) 0 calc(50% - var(--cfch-fr-gap) / 2),
			transparent calc(50% - var(--cfch-fr-gap) / 2) calc(50% + var(--cfch-fr-gap) / 2),
			var(--cfch-fr-line) calc(50% + var(--cfch-fr-gap) / 2) 100%
		),
		linear-gradient(
			90deg,
			var(--cfch-fr-line) 0 calc(50% - var(--cfch-fr-gap) / 2),
			transparent calc(50% - var(--cfch-fr-gap) / 2) calc(50% + var(--cfch-fr-gap) / 2),
			var(--cfch-fr-line) calc(50% + var(--cfch-fr-gap) / 2) 100%
		);
}

.cfsux-frame--link.is-chain::before {
	--cfch-fr-gap: 62px;
}

/* Сама прикраса. Верхня звисає вниз, нижня — дзеркальна (дивиться в блок). */
.cfsux-frame__jw {
	position: absolute;
	inset-inline-start: 50%;
	translate: -50% 0;
	line-height: 0;
	pointer-events: none;
}

.cfsux-frame__jw--t {
	inset-block-start: 0;
}

.cfsux-frame__jw--b {
	inset-block-end: 0;
	transform: scaleY(-1);
}

/* Зсув: верхня підвіска ліворуч, нижня праворуч — спокійна діагональ. */
.cfsux-frame--pendant.is-offset .cfsux-frame__jw--t {
	inset-inline-start: 32%;
}

.cfsux-frame--pendant.is-offset .cfsux-frame__jw--b {
	inset-inline-start: 68%;
}

.cfsux-frame__art {
	display: block;
	inline-size: clamp(13px, 1.3vw, 16px);
	block-size: auto;
	overflow: visible;
	fill: none;
	stroke: rgba(94, 162, 174, 0.45);
	stroke: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	stroke-width: var(--cfch-fr-w, 1px);
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Ланка стоїть НА нитці, тож піднімаємо її на півкорпуса вгору. */
.cfsux-frame--link .cfsux-frame__art {
	inline-size: clamp(16px, 1.5vw, 19px);
	translate: 0 -50%;
}

.cfsux-frame--link.is-chain .cfsux-frame__art {
	inline-size: clamp(44px, 4.2vw, 54px);
}

/* Перлина — єдине, що залито кольором. */
.cfsux-frame__fill {
	fill: rgba(94, 162, 174, 0.45);
	fill: color-mix(in srgb, var(--cfch-fr, #5EA2AE) var(--cfch-fr-a, 45%), transparent);
	stroke: none;
}

/* ------------------------------------------------------------------ */
/*  Міні-банер у сайдбарі                                              */
/* ------------------------------------------------------------------ */

.cfsux-chero-mini {
	margin-block-start: var(--cfch-mini-top, 24px);
	border-radius: var(--cfch-mini-radius, 12px);
	overflow: hidden;
	line-height: 0;
}

.cfsux-chero-mini.is-framed {
	border: 1px solid rgba(94, 162, 174, 0.35);
	border-color: color-mix(in srgb, var(--cfch-frame, #5EA2AE) 35%, transparent);
}

.cfsux-chero-mini > img,
.cfsux-chero-mini > a > img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/*
 * Сайдбар стає колонкою рівно з 1025px (виміряно: на 1024 він ще на всю ширину
 * контейнера, на 1025 — вузька колонка 249px). Нижче цієї межі міні-банер
 * розтягувався б на всю сторінку, тому там його немає.
 */
@media (max-width: 1024.98px) {
	.cfsux-chero-mini {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/*  Адаптив                                                            */
/* ------------------------------------------------------------------ */

@media (max-width: 782px) {
	.cfsux-chero {
		padding-block: calc(var(--cfch-top, 40px) * 0.7) calc(var(--cfch-bottom, 40px) * 0.7);
	}

	.cfsux-chero__title {
		font-size: var(--cfch-title-m, 24px);
	}

	/* Рамка на телефоні притискається ближче до тексту — інакше на колонці
	   в 330px від рядка лишається смужка в кілька слів. */
	.cfsux-frame {
		padding: clamp(14px, calc(var(--cfch-fr-pad, 30px) * 0.62), 34px);
	}

	/* Арці цього замало: під смугу в 22px треба лишити місце, інакше заголовок
	   налазить на дах. Правило йде ПІСЛЯ загального — воно й перемагає. */
	.cfsux-frame--arch {
		padding-block: max(calc(var(--cfch-fr-pad, 30px) * 0.62), 32px);
	}

	/* Те саме для підвіски й ланки: вони звисають усередину блоку. */
	.cfsux-frame--pendant,
	.cfsux-frame--link {
		padding-block: max(calc(var(--cfch-fr-pad, 30px) * 0.62), 38px);
	}

	.cfsux-frame--hairline::after {
		inset: 5px;
	}
}

@media (max-width: 600px) {
	/* Банер сховано (нашим налаштуванням або власним налаштуванням банера) —
	   ховаємо й обгортку, інакше від неї лишається порожня смужка рамки. */
	.cfsux-chero__banner.is-desktop,
	.cfsux-chero__banner.is-no-mobile,
	.cfsux-chero-mini.is-no-mobile {
		display: none;
	}

	.cfsux-chero__banner.is-ratio-m > .cfsux-chero__banner-in {
		aspect-ratio: var(--cfch-ratio-m, 3/1);
	}

	.cfsux-chero__banner.is-ratio-m > .cfsux-chero__banner-in > *,
	.cfsux-chero__banner.is-ratio-m > .cfsux-chero__banner-in > a > img {
		block-size: 100%;
		inline-size: 100%;
	}

	.cfsux-chero__banner.is-ratio-m > .cfsux-chero__banner-in > img,
	.cfsux-chero__banner.is-ratio-m > .cfsux-chero__banner-in > a > img {
		object-fit: cover;
	}
}

@media (min-width: 601px) and (max-width: 1024px) {
	.cfsux-chero__banner.is-no-tablet,
	.cfsux-chero-mini.is-no-tablet {
		display: none;
	}
}

@media (min-width: 1025px) {
	.cfsux-chero__banner.is-no-desktop,
	.cfsux-chero-mini.is-no-desktop {
		display: none;
	}
}

/* Відвідувач попросив менше руху — тексти не змінюються (JS теж вимикається),
   тому перший шар має лишитись видимим без переходів. */
@media (prefers-reduced-motion: reduce) {
	.cfsux-chero__stack > * {
		transition: none;
	}
}