/*
 * Стилі акції «Разом до вершини».
 *
 * Типова тема сайту — темна; світла вмикається перемикачем, який ставить
 * html[data-syro-theme="light"] (syrocarpaty-svitla-tema). Тому базова палітра
 * тут темна, а світла йде окремим блоком — інакше на світлій темі блоки акції
 * стають чорними плямами.
 *
 * Класи навмисно довгі й з власним префіксом: стилі накладаються ПОВЕРХ теми
 * foodmix, і коротка назва рано чи пізно зіткнеться з темою.
 */

.syro-vershyna,
.syro-vershyna-cart,
.syro-vershyna-success,
.syro-vershyna-smuzhka {
	--sv-akcent: #f1a416;
	--sv-akcent-tin: #df950d;
	--sv-tlo: rgba(255, 255, 255, .06);
	--sv-ramka: rgba(255, 255, 255, .14);
	--sv-tekst: #fff;
	--sv-tekst-tyhyj: rgba(255, 255, 255, .7);
	--sv-zelen: #174241;
}

html[data-syro-theme="light"] .syro-vershyna,
html[data-syro-theme="light"] .syro-vershyna-cart,
html[data-syro-theme="light"] .syro-vershyna-success,
html[data-syro-theme="light"] .syro-vershyna-smuzhka {
	--sv-tlo: rgba(37, 37, 52, .05);
	--sv-ramka: rgba(37, 37, 52, .14);
	--sv-tekst: #252534;
	--sv-tekst-tyhyj: rgba(37, 37, 52, .66);
}

/* ---------- смужка під шапкою ---------- */

/*
 * Шапка теми — position:fixed; top:0; z-index:10, а контент має .wrapper із
 * padding-top:120px під неї. Смужка в потоці опинялась ПІД шапкою й була
 * перекрита меню (знімок 24.09). Тому смужка теж фіксована й вище за шапку,
 * а шапку й контент зсуваємо на її виміряну висоту (--sv-smuzhka-h із JS).
 */
.syro-vershyna-smuzhka {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 11;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 9px 20px;
	/* Те саме «дерево», що в табличках на горі: смужка читається як частина
	   акції, а не як системне повідомлення (до 02.10 була темно-зелена). */
	background: linear-gradient(180deg, #7d4b24, #5b3416);
	border-bottom: 2px solid var(--sv-akcent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	color: #ffeecb !important;
	text-decoration: none !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
}

/* Показуємо лише коли число справді приїхало: порожня смужка гірша за жодну. */
.syro-vershyna-gotovo .syro-vershyna-smuzhka {
	display: flex;
}

body.syro-vershyna-smuzhka-on .header {
	top: var(--sv-smuzhka-h, 0px);
}

body.syro-vershyna-smuzhka-on .wrapper {
	padding-top: calc(120px + var(--sv-smuzhka-h, 0px));
}

/* На головній .wrapper і так без відступу — там шапка лежить поверх банера. */
body.syro-vershyna-smuzhka-on.home .wrapper {
	padding-top: 0;
}

.syro-vershyna-smuzhka__tekst { white-space: nowrap; }
.syro-vershyna-smuzhka__tekst strong {
	display: inline-block;
	margin-left: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sv-akcent);
	color: #2b1808;
	font-weight: 800;
}

.syro-vershyna-smuzhka__bar {
	position: relative;
	flex: 1 1 auto;
	max-width: 460px;
	height: 12px;
	/* Місце зліва під Бриндзьо на 0% і справа під вершину. */
	margin: 0 18px 0 22px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
}

.syro-vershyna-smuzhka__bar i {
	position: relative;
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, var(--sv-akcent) 60%, var(--sv-akcent-tin));
	transition: width .9s ease;
}

.syro-vershyna-smuzhka__bryndzo {
	position: absolute;
	right: -24px;
	top: 50%;
	width: 48px;
	height: 34px;
	max-width: none;
	margin: -19px 0 0 !important;
	object-fit: contain;
	filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}

/* Вершина на кінці шкали — трикутник із «снігом». */
.syro-vershyna-smuzhka__vershyna {
	position: absolute;
	right: -16px;
	bottom: -1px;
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 18px solid #ffeecb;
	opacity: .9;
}

.syro-vershyna-smuzhka__link {
	padding: 5px 14px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 238, 203, .7);
	color: #ffeecb;
	font-size: 14px;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.syro-vershyna-smuzhka:hover .syro-vershyna-smuzhka__link { background: var(--sv-akcent); border-color: var(--sv-akcent); color: #2b1808; }

@media (max-width: 767px) {
	.syro-vershyna-smuzhka { font-size: 13px; padding: 8px 12px; gap: 10px; justify-content: flex-start; }
	.syro-vershyna-smuzhka__link { display: none; }
	.syro-vershyna-smuzhka__bar { height: 10px; margin: 0 16px 0 18px; }
	.syro-vershyna-smuzhka__bryndzo { width: 40px; height: 28px; right: -20px; margin-top: -17px !important; }
	.syro-vershyna-smuzhka__vershyna { border-left-width: 8px; border-right-width: 8px; border-bottom-width: 14px; right: -14px; }
}

/* ---------- сторінка акції ---------- */

/*
 * page.php теми виводить <h1 class="article__title"> з назвою сторінки, а
 * шорткод далі малює власний заголовок — на знімку 24.09 «Разом до вершини»
 * стояло двічі. Ховаємо тему, а не свій: наш заголовок стоїть на сцені.
 */
.syro-vershyna-storinka .article__title { display: none; }

/*
 * Montserrat — свій файл у плагіні, а не Google Fonts: сторінка не має чекати
 * чужий домен. Два файли, бо кирилиця й латиниця (цифри, «%», «!») лежать у
 * різних піднаборах. До 02.10 тут був рукописний Caveat — замінено за правкою
 * «текст — монсерат без курсиву».
 */
@font-face {
	font-family: "Syro Montserrat";
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/montserrat-800-cyr.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Syro Montserrat";
	font-weight: 800;
	font-display: swap;
	src: url(../fonts/montserrat-800-lat.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+2000-206F;
}

.syro-vershyna {
	color: var(--sv-tekst);
	--sv-derevo: #6b3f1d;
	--sv-derevo-tin: #4a2a12;
	--sv-papir: #f3ddb0;
	--sv-papir-tin: #e2c389;
	--sv-zaholovky: "Syro Montserrat", "Open Sans", Arial, sans-serif;
}

/* ---------- перший екран: гора ---------- */

/*
 * Сцена — фото 1280×802. .kadr тримає саме цю пропорцію, і все, що стоїть на
 * горі, задане у відсотках кадру: так точки стежки збігаються зі схилом на
 * будь-якій ширині. Розміри всередині — в одиницях cqw (ширина кадру), щоб
 * Бриндзьо й таблички масштабувались разом із фото, а не з вікном.
 */
.syro-vershyna__hero {
	position: relative;
	margin: 0 0 48px;
	border-radius: 18px;
	overflow: hidden;
}

.syro-vershyna__scena { overflow: hidden; }

.syro-vershyna__kadr {
	position: relative;
	aspect-ratio: 1280 / 802;
	container-type: inline-size;
}

.syro-vershyna__foto {
	/* Тема дає кожній картинці в статті margin-top: 55px — фото зʼїжджало
	   з-під стежки на 55 px униз (знімок 01.10). */
	margin: 0 !important;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	max-width: none;
}

.syro-vershyna__stezhky {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.syro-vershyna__stezhka,
.syro-vershyna__projdeno,
.syro-vershyna__pidkladka {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
/* Темна підкладка: без неї білий штрих губиться на світлій траві й небі. */
.syro-vershyna__pidkladka {
	stroke: rgba(43, 24, 8, .62);
	stroke-width: 13;
}
.syro-vershyna__projdeno {
	stroke: var(--sv-akcent);
	stroke-width: 9;
	transition: stroke-dashoffset .9s ease;
}
/* Штрихпунктир: довгий штрих, крапка. */
.syro-vershyna__stezhka {
	stroke: #fff;
	stroke-width: 4;
	stroke-dasharray: 18 11 1 11;
}

/* Діє одна стежка: «d» на широкому екрані, «m» на телефоні (див. PHP). */
.syro-vershyna__stezhka[data-vershyna-stezhka="m"] { display: none; }

.syro-vershyna__zaholovok {
	position: absolute;
	z-index: 3;
	top: 5%;
	left: 4%;
	/* Вужче за половину сцени: на 65–80% шляху Бриндзьо проходить під правим
	   краєм заголовка й затуляв би його кінець. */
	width: 46%;
	color: var(--sv-derevo-tin);
}

.syro-vershyna__title {
	font-family: var(--sv-zaholovky);
	font-weight: 800;
	font-size: clamp(24px, 2.75vw, 38px);
	line-height: 1.08;
	text-transform: uppercase;
	margin: 0 0 14px;
	color: var(--sv-derevo-tin);
	text-shadow: 0 2px 0 rgba(255, 255, 255, .35);
}

.syro-vershyna__lead {
	max-width: 330px;
	margin: 0;
	font-size: clamp(14px, 1.35vw, 18px);
	line-height: 1.35;
	font-weight: 600;
	color: var(--sv-derevo-tin);
}

/* позначки відсотків на стежці */
.syro-vershyna__mitka {
	position: absolute;
	z-index: 2;
	transform: translate(-50%, -50%);
	padding: .35cqw 1.1cqw;
	border-radius: 999px;
	background: #fff6dc;
	color: var(--sv-derevo-tin);
	font-weight: 800;
	font-size: max(11px, 1.7cqw);
	line-height: 1.3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	transition: background .4s, color .4s;
}
.syro-vershyna__mitka.is-done { background: var(--sv-akcent); color: #2b1808; }

/* дерев'яні таблички */
.syro-vershyna__tablychka {
	position: absolute;
	z-index: 2;
	width: 15.5cqw;
	padding: 1cqw 1cqw 1.1cqw;
	border-radius: .8cqw;
	background: linear-gradient(180deg, #7d4b24, var(--sv-derevo) 55%, #5b3416);
	box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .4), inset 0 0 0 .15cqw rgba(255, 255, 255, .12);
	color: #ffeecb;
	font-family: var(--sv-zaholovky);
	font-weight: 800;
	font-size: max(10px, 1.45cqw);
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	transform: translate(-50%, -100%);
	opacity: .78;
	transition: opacity .5s;
}
/* ніжка таблички */
.syro-vershyna__tablychka::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 1.1cqw;
	height: 3cqw;
	margin-left: -.55cqw;
	background: #5b3416;
	border-radius: 0 0 .3cqw .3cqw;
}
.syro-vershyna__tablychka.is-done { opacity: 1; }

/* ---------- Бриндзьо ---------- */

.syro-vershyna__bryndzo {
	position: absolute;
	z-index: 4;
	left: 0;
	top: 0;
	/* Ширина — від картинки: з 05.10 Бриндзьо — справжній баранчик у три
	   ракурси, вищий за ширину; розмір задає висота картинки нижче. */
	width: auto;
	/* Точка стежки — під копитами, а не в центрі фігури. */
	transform: translate(-50%, -97%);
	opacity: 0;
	transition: opacity .3s;
	pointer-events: none;
}
.syro-vershyna__bryndzo.is-vydno { opacity: 1; }

.syro-vershyna__bryndzo-tilo {
	display: block;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 .6cqw .5cqw rgba(0, 0, 0, .35));
}
.syro-vershyna__bryndzo-tilo img {
	margin: 0 !important;
	display: none;
	/* 15cqw — стеля: вершина стежки на 24% висоти кадру, вищий баранчик
	   на 100% упирався б головою в край сцени (знімок 05.10). */
	height: 15cqw;
	width: auto;
	max-width: none;
}
.syro-vershyna__bryndzo[data-poza="pryvit"] img[data-poza="pryvit"],
.syro-vershyna__bryndzo[data-poza="ide"] img[data-poza="ide"],
.syro-vershyna__bryndzo[data-poza="vershyna"] img[data-poza="vershyna"] { display: block; }

/*
 * ТРИ ПОЗИ (матеріали від 05.10, вечір): привітання на задніх ногах, хода
 * вгору схилом, вершина з ногою на камені. У кожної свій розмір і своя точка
 * опори — кадри різної пропорції, а під копитами в «ході» й «вершині» є шматок
 * скелі, який має лягти на схил, а не висіти над стежкою.
 */
.syro-vershyna__bryndzo-tilo img[data-poza="pryvit"] { height: 17cqw; }
.syro-vershyna__bryndzo-tilo img[data-poza="ide"] { height: 17cqw; }
.syro-vershyna__bryndzo-tilo img[data-poza="vershyna"] { height: 18cqw; }
.syro-vershyna__bryndzo[data-poza="ide"] { transform: translate(-50%, -87.3%); }
/* Доворот під кут стежки (рахує JS, див. nahyl). Вісь — точка під копитами
   посередині кадру (87.3% висоти): саме вона стоїть на стежці, тож при довороті
   баранчик не з'їжджає з неї. З 07.10 картинка «хода» без землі під копитами
   (правка «прибрати оцю землю») — новий малюнок, де баранчик уже біжить під
   нахилом 17.5°; лінія опори — задні копита. Крутимо картинку, а не .tilo: на .tilo живе
   анімація ходи, вона перебила б цей transform. */
.syro-vershyna__bryndzo-tilo img[data-poza="ide"] {
	transform: rotate(var(--sv-nahyl, 0deg));
	transform-origin: 50% 87.3%;
}
.syro-vershyna__bryndzo[data-poza="vershyna"] { transform: translate(-50%, -80%); }

/* Хода під час підйому і ледь помітне «дихання» на місці. */
.syro-vershyna__bryndzo.ide .syro-vershyna__bryndzo-tilo { animation: sv-hoda .38s ease-in-out infinite; }
.syro-vershyna__bryndzo.is-gotovyj .syro-vershyna__bryndzo-tilo { animation: sv-dyhannya 3.2s ease-in-out infinite; }
/* КРОК: хтось щойно купив. Окремий клас, бо зсув від одного замовлення —
   частка пікселя, і без стрибка його не видно. */
.syro-vershyna__bryndzo.krok .syro-vershyna__bryndzo-tilo { animation: sv-krok .9s cubic-bezier(.3, 1.6, .5, 1) 1; }

@keyframes sv-hoda {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-7%) rotate(4deg); }
}
@keyframes sv-dyhannya {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.025, .985); }
}
@keyframes sv-krok {
	0% { transform: translateY(0) scale(1); }
	25% { transform: translateY(-28%) scale(.96, 1.05) rotate(-6deg); }
	55% { transform: translateY(0) scale(1.06, .93); }
	75% { transform: translateY(-9%) scale(1); }
	100% { transform: translateY(0) scale(1); }
}

/* «+1» над Бриндзьо в момент кроку */
.syro-vershyna__plyus {
	position: absolute;
	left: 50%;
	bottom: 108%;
	transform: translateX(-50%);
	font-family: var(--sv-zaholovky);
	font-weight: 800;
	font-size: max(16px, 2.6cqw);
	color: #fff;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .6);
	white-space: nowrap;
	animation: sv-plyus 1.6s ease-out forwards;
}
@keyframes sv-plyus {
	0% { opacity: 0; transform: translate(-50%, 20%); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -160%); }
}

/* ---------- панель прогресу ---------- */

/* Правка 02.10 «прогрес треба виділити»: панель більша, з товстою золотою
   рамкою, шкала й число — найкрупніше на сцені після заголовка. */
.syro-vershyna__panel {
	position: absolute;
	z-index: 3;
	right: 2.2%;
	top: 47%;
	width: 31%;
	text-align: center;
}

.syro-vershyna__panel-doshka {
	padding: 18px 20px 14px;
	border-radius: 18px;
	border: 4px solid var(--sv-akcent);
	background: linear-gradient(180deg, #fffaf0, var(--sv-papir));
	box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .55);
	color: var(--sv-derevo-tin);
}

.syro-vershyna__panel-nazva {
	font-family: var(--sv-zaholovky);
	font-weight: 800;
	font-size: clamp(16px, 1.75vw, 25px);
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin-bottom: 12px;
}

.syro-vershyna__panel-ryadok { display: flex; align-items: center; gap: 12px; }
.syro-vershyna__panel-ryadok strong {
	font-family: var(--sv-zaholovky);
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 800;
	line-height: 1;
	min-width: 3.2ch;
	text-align: right;
}

.syro-vershyna__panel-bar {
	flex: 1;
	height: 28px;
	border-radius: 999px;
	background: #fff;
	border: 3px solid var(--sv-derevo);
	overflow: hidden;
}
.syro-vershyna__panel-bar i {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffc94d, var(--sv-akcent) 55%, var(--sv-akcent-tin));
	transition: width .9s ease;
}

.syro-vershyna__panel-shkala { margin-top: 8px; font-weight: 800; font-size: 15px; }
.syro-vershyna__panel-pidpys { margin-top: 8px; font-weight: 600; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.3; }

.syro-vershyna__nazhyvo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .45);
	color: #fff !important;
	font-size: 12px;
}
.syro-vershyna__nazhyvo[hidden] { display: none; }
.syro-vershyna__nazhyvo i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ade80;
	animation: sv-nazhyvo 1.6s ease-in-out infinite;
}
@keyframes sv-nazhyvo { 50% { opacity: .25; } }

/*
 * ТЕЛЕФОН. Якщо фото просто стиснути до 390 px, сцена стає 245 px заввишки і
 * Бриндзьо — з ніготь. Тому кадр робиться ШИРШИМ за екран (140%) і зсувається
 * вліво так, щоб у вікні лишилась сама гора; лівий край фото з далекими
 * хребтами обрізається. Заголовок і панель із сцени виходять у потік: над
 * горою і під нею.
 */
@media (max-width: 760px) {
	.syro-vershyna__hero {
		border-radius: 14px;
		background: #1d2a1c;
		margin-left: -8px;
		margin-right: -8px;
	}
	.syro-vershyna__kadr { width: 140%; margin-left: -36%; }

	.syro-vershyna__stezhka[data-vershyna-stezhka="d"] { display: none; }
	.syro-vershyna__stezhka[data-vershyna-stezhka="m"] { display: inline; }

	.syro-vershyna__zaholovok {
		position: static;
		width: auto;
		padding: 22px 16px 12px;
		background: linear-gradient(180deg, #cfe3f5, #f6e3c4);
	}
	.syro-vershyna__title { font-size: clamp(18px, 5.6vw, 27px); margin-bottom: 12px; }
	.syro-vershyna__lead { max-width: none; font-size: 15px; }

	/* Правка 02.10 «на мобілі меншим та акуратнішим»: панель удвічі нижча —
	   вузька рамка, шкала 14 px, число в один рядок зі шкалою. */
	.syro-vershyna__panel { position: static; width: auto; padding: 12px 14px 14px; }
	.syro-vershyna__panel-doshka { padding: 10px 14px 10px; border-width: 2px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
	.syro-vershyna__panel-nazva { font-size: 13px; margin-bottom: 6px; letter-spacing: .04em; }
	.syro-vershyna__panel-ryadok { gap: 10px; }
	.syro-vershyna__panel-ryadok strong { font-size: 20px; min-width: 0; }
	.syro-vershyna__panel-bar { height: 14px; border-width: 2px; }
	.syro-vershyna__panel-shkala { display: none; }
	.syro-vershyna__panel-pidpys { margin-top: 6px; font-size: 12.5px; }
	.syro-vershyna__nazhyvo { margin-top: 6px; font-size: 11px; }

	.syro-vershyna__bryndzo-tilo img[data-poza="pryvit"] { height: 19cqw; }
	.syro-vershyna__bryndzo-tilo img[data-poza="ide"] { height: 19cqw; }
	.syro-vershyna__bryndzo-tilo img[data-poza="vershyna"] { height: 17cqw; }
	.syro-vershyna__tablychka { width: 18cqw; font-size: max(9px, 1.75cqw); }
}

@media (prefers-reduced-motion: reduce) {
	.syro-vershyna__bryndzo-tilo,
	.syro-vershyna__nazhyvo i { animation: none !important; }
	.syro-vershyna__plyus { display: none; }
}

/* ---------- гора на першому екрані головної (тимчасово) ---------- */

/*
 * Шапка теми на головній лежить ПОВЕРХ банера (fixed, .wrapper без відступу),
 * тому сцені потрібен власний відступ згори на висоту шапки. Ширина — як у
 * контейнера теми: на всю ширину 1440 сцена була б вища за екран.
 */
.syro-vershyna--holovna {
	max-width: 1202px;
	margin: 0 auto;
	padding: 104px 16px 0;
}
.syro-vershyna--holovna .syro-vershyna__hero { margin-bottom: 0; }

.syro-vershyna__detalnishe {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--sv-akcent);
	color: #2b1808 !important;
	font-weight: 800;
	font-size: 14px;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

/*
 * Банер теми під горою: фон і висоту на екран знімаємо, лишаємо ряд карток.
 * h1 магазину не display:none, а схований від ока — пошуку він потрібен.
 */
body.syro-vershyna-hero section.first.bg {
	background-image: none !important;
	min-height: 0 !important;
	padding-top: 22px !important;
	padding-bottom: 26px !important;
}
body.syro-vershyna-hero section.first.bg::before,
body.syro-vershyna-hero section.first.bg::after { display: none !important; }
body.syro-vershyna-hero section.first.bg > .container { row-gap: 0 !important; }
body.syro-vershyna-hero section.first.bg .first__title,
body.syro-vershyna-hero section.first.bg .first__description {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (max-width: 760px) {
	.syro-vershyna--holovna { padding: 84px 8px 0; }
	.syro-vershyna--holovna .syro-vershyna__hero { margin-left: 0; margin-right: 0; }
	/* На головній заголовок компактніший: до карток вибору має лишатись один свайп. */
	.syro-vershyna--holovna .syro-vershyna__zaholovok { padding: 14px 14px 10px; }
	.syro-vershyna--holovna .syro-vershyna__lead { display: none; }
	.syro-vershyna--holovna .syro-vershyna__title { margin-bottom: 0; }
}

/* лист від Бриндзьо */
.syro-vershyna__lyst {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	padding: 30px 34px;
	border-radius: 20px;
	border: 1px solid var(--sv-ramka);
	background: var(--sv-tlo);
}
.syro-vershyna__lyst-foto { width: 150px; height: auto; flex: none; margin: 0 !important; position: sticky; top: 140px; }
.syro-vershyna__lyst-tekst p { margin: 0 0 14px; font-size: 17px; line-height: 1.55; }
.syro-vershyna__lyst-tekst .syro-vershyna__lyst-pryvit { font-family: var(--sv-zaholovky); font-weight: 800; font-size: 26px; }
.syro-vershyna__lyst-tekst .syro-vershyna__lyst-pidpys { margin: 22px 0 0; font-weight: 700; }
@media (max-width: 700px) {
	.syro-vershyna__lyst { flex-direction: column; align-items: center; gap: 12px; padding: 20px 18px; }
	.syro-vershyna__lyst-foto { width: 100px; position: static; }
	.syro-vershyna__lyst-tekst p { font-size: 16px; }
}

.syro-vershyna__diya { margin: 0 0 28px; text-align: center; }

/* листівка */
.syro-vershyna__block--lystivka { display: flex; align-items: center; gap: 28px; }
.syro-vershyna__lystivka-foto { width: 180px; height: auto; flex: none; margin: 0 !important; }
@media (max-width: 600px) {
	.syro-vershyna__block--lystivka { flex-direction: column; text-align: center; }
	.syro-vershyna__lystivka-foto { width: 140px; }
}

/* ---------- рівні подарунків ---------- */

.syro-vershyna__block { margin: 0 0 48px; }
.syro-vershyna__block h2 { font-size: clamp(24px, 4vw, 38px); margin: 0 0 8px; }
.syro-vershyna__block-lead { color: var(--sv-tekst-tyhyj); margin: 0 0 20px; }

.syro-vershyna__rivni {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.syro-vershyna__riven {
	background: var(--sv-tlo);
	border: 1px solid var(--sv-ramka);
	border-radius: 14px;
	padding: 18px;
}

.syro-vershyna__riven--2 { border-color: var(--sv-akcent); }
.syro-vershyna__riven-suma { color: var(--sv-akcent); font-weight: 800; }
.syro-vershyna__riven-nazva { margin: 6px 0 10px; font-size: 20px; }
.syro-vershyna__riven-spysok { margin: 0; color: var(--sv-tekst-tyhyj); }

.syro-vershyna__cta {
	display: inline-block;
	text-decoration: none;
	margin-top: 20px;
	padding: 13px 26px;
	border-radius: 999px;
	background: var(--sv-akcent);
	color: #252534;
	font-weight: 800;
	text-decoration: none;
}

/* Тема збиває маркери у списках — повертаємо нумерацію явно. */
.syro-vershyna__kroky {
	margin: 0 0 16px;
	padding-left: 22px;
	line-height: 1.9;
	list-style: decimal outside;
}

.syro-vershyna__kroky li { list-style: decimal outside; }
.syro-vershyna__vazhlyvo { font-weight: 800; color: var(--sv-akcent); }
.syro-vershyna__dribne { color: var(--sv-tekst-tyhyj); font-size: 14px; }

/* ---------- форма квитка ---------- */

.syro-vershyna-forma {
	max-width: 620px;
	margin-top: 20px;
	display: grid;
	gap: 14px;
}

.syro-vershyna-forma__ryad { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 600px) {
	.syro-vershyna-forma__ryad { grid-template-columns: 1fr; }
}

.syro-vershyna-forma label { display: grid; gap: 6px; font-size: 14px; }

.syro-vershyna-forma input[type="text"],
.syro-vershyna-forma input[type="tel"],
.syro-vershyna-forma input[type="url"] {
	width: 100%;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--sv-ramka);
	background: var(--sv-tlo);
	color: var(--sv-tekst);
	font-size: 16px; /* менше 16px — iOS зумить сторінку на фокусі */
}

.syro-vershyna-forma__zgoda { grid-auto-flow: column; justify-content: start; align-items: center; gap: 10px; }

/* Пастка для ботів: поле є в DOM, але людина його не бачить і не сфокусує. */
.syro-vershyna-forma__pastka {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.syro-vershyna-forma__knopka {
	justify-self: start;
	padding: 13px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--sv-akcent);
	color: #252534;
	font-weight: 800;
	cursor: pointer;
}

.syro-vershyna-forma__knopka[disabled] { opacity: .6; cursor: default; }
.syro-vershyna-forma__vidpovid { margin: 0; min-height: 20px; color: var(--sv-akcent); }

/* ---------- блок у кошику ---------- */

.syro-vershyna-cart {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--sv-ramka);
	border-radius: 14px;
	background: var(--sv-tlo);
	color: var(--sv-tekst);
}

.syro-vershyna-cart__badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sv-akcent);
	color: #252534;
	font-size: 12px;
	font-weight: 800;
}

.syro-vershyna-cart__head { margin-bottom: 16px; }

.syro-vershyna-cart__scale {
	position: relative;
	height: 10px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .25);
	margin: 0 0 34px;
}

.syro-vershyna-cart__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--sv-akcent-tin), var(--sv-akcent));
	transition: width .5s ease;
}

.syro-vershyna-cart__mark { position: absolute; top: -4px; transform: translateX(-50%); }

.syro-vershyna-cart__mark i {
	display: block;
	width: 6px;
	height: 18px;
	border-radius: 3px;
	background: var(--sv-tekst-tyhyj);
	margin: 0 auto;
}

.syro-vershyna-cart__mark em {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 11px;
	font-style: normal;
	color: var(--sv-tekst-tyhyj);
}

.syro-vershyna-cart__mark.is-done i { background: var(--sv-akcent); }
.syro-vershyna-cart__mark--dostavka i { background: var(--sv-zelen); }

.syro-vershyna-cart__hint { font-size: 14px; color: var(--sv-tekst-tyhyj); }
.syro-vershyna-cart__link { display: inline-block; margin-top: 8px; color: var(--sv-akcent); }

/* На телефоні підписи віх налазять одна на одну — лишаємо тільки засічки. */
@media (max-width: 600px) {
	.syro-vershyna-cart__mark em { display: none; }
	.syro-vershyna-cart__scale { margin-bottom: 18px; }
}

/* ---------- блок на сторінці подяки ---------- */

.syro-vershyna-success {
	display: none;
	gap: 16px;
	margin: 28px 0 0;
	padding: 18px;
	border: 1px solid var(--sv-ramka);
	border-radius: 14px;
	background: var(--sv-tlo);
	text-align: left;
}

.syro-vershyna-gotovo .syro-vershyna-success { display: flex; }

.syro-vershyna-success__baran {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 50%;
	background: #fff;
	box-shadow: inset -8px -6px 0 rgba(0, 0, 0, .12);
}

.syro-vershyna-success__bar {
	display: block;
	height: 8px;
	border-radius: 999px;
	background: rgba(127, 127, 127, .25);
	margin: 10px 0;
	overflow: hidden;
}

.syro-vershyna-success__bar i {
	display: block;
	height: 100%;
	background: var(--sv-akcent);
	transition: width .8s ease;
}

.syro-vershyna-success p { margin: 0 0 8px; color: var(--sv-tekst-tyhyj); font-size: 14px; }
.syro-vershyna-success a { color: var(--sv-akcent); }

/* ---------- правила ---------- */

.syro-vershyna-pravyla__zasterezhennya {
	padding: 12px 14px;
	border-left: 3px solid var(--sv-akcent, #f1a416);
	background: rgba(241, 164, 22, .12);
	font-size: 14px;
}

/* ---------- плашка під першим екраном головної (0.4.0, 14.10) ---------- */

/*
 * Компактна заміна гори: та сама «деревʼяна» гама, що в смужці й табличках
 * на горі, — читається як частина акції. Висота тримається сталою (78 / 100
 * px): на неї hero-knopky вкорочує банер, щоб банер і плашка разом влазили
 * в перший екран.
 */
.syro-vershyna-plashka {
	display: block;
	position: relative;
	z-index: 2;
	background: linear-gradient(180deg, #7d4b24, #5b3416);
	border-top: 2px solid #f1a416;
	border-bottom: 2px solid #f1a416;
	color: #ffeecb !important;
	text-decoration: none !important;
}

.syro-vershyna-plashka__in {
	display: flex;
	align-items: center;
	gap: 22px;
	box-sizing: border-box;
	max-width: 1170px;
	min-height: 74px;
	margin: 0 auto;
	padding: 8px 20px;
}

.syro-vershyna-plashka__bryndzo {
	flex: 0 0 auto;
	width: 86px;
	height: 60px;
	max-width: none;
	margin: 0 !important;
	object-fit: contain;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .45));
}

.syro-vershyna-plashka__tekst {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 7px;
	min-width: 0;
}

.syro-vershyna-plashka__tekst strong {
	color: #fff4dc;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.syro-vershyna-plashka__shkala {
	display: flex;
	align-items: center;
	gap: 14px;
	color: rgba(255, 238, 203, .85);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
}

.syro-vershyna-plashka__shkala b {
	color: #f1a416;
	font-weight: 800;
}

.syro-vershyna-plashka__bar {
	flex: 0 1 320px;
	height: 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .32);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4);
	overflow: hidden;
}

.syro-vershyna-plashka__bar i {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd56b, #f1a416 60%, #df950d);
	transition: width .9s ease;
}

.syro-vershyna-plashka__link {
	flex: 0 0 auto;
	padding: 9px 20px;
	border-radius: 999px;
	background: #f1a416;
	color: #2b1808;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: background .2s;
}

.syro-vershyna-plashka:hover .syro-vershyna-plashka__link { background: #f7b83f; }

@media (max-width: 767px) {
	/* Телефон: вигода (до трьох рядків) + шкала. Кнопки «Умови» немає — уся
	   плашка й так посилання; справа 76 px вільні під віджет «Кнопка
	   звʼязку», який стоїть у правому нижньому куті якраз на рівні плашки. */
	.syro-vershyna-plashka__in { gap: 10px; min-height: 100px; padding: 8px 76px 8px 12px; }
	.syro-vershyna-plashka__bryndzo { width: 54px; height: 40px; }
	.syro-vershyna-plashka__tekst { gap: 6px; }
	.syro-vershyna-plashka__tekst strong { font-size: 13.5px; line-height: 1.3; }
	.syro-vershyna-plashka__shkala { gap: 8px; font-size: 12px; }
	.syro-vershyna-plashka__shkala .syro-vershyna-plashka__slova { display: none; }
	.syro-vershyna-plashka__bar { flex: 1 1 auto; max-width: 180px; height: 8px; }
	.syro-vershyna-plashka__link { display: none; }
}