/*
 * Сторінка Black Friday 2026 («Бананова п'ятниця»), information/black_friday.
 * Макет: десктоп 1397px, мобільний 390px. --u = 1px макету. Числа в --x/--y/--w — з Figma.
 * Десктоп масштабується так, щоб краї панелей (у макеті 38.6…1358.5, тобто 1319.9 з 1397) стояли
 * на рівні контенту хедера — сайтового .container: max 1680px, падінги 40/25/15px (stylesheet.css).
 * На 1397px це ~1-в-1, ширше — композиція росте разом із хедером до 1680px.
 *
 * Уся сторінка — один stacking context (.bf-page). Неонові «%» змішуються через
 * mix-blend-mode: lighten з чорним фоном і світінням, тому секціям НЕ можна давати
 * z-index/transform/filter/clip-path — інакше бленд ізолюється і вилізуть чорні квадрати.
 */

.bf-page {
	--pad: 40px;
	--u: calc((min(100cqw, 1680px) - 2 * var(--pad)) / 1319.9);
	--acid: #e4ff15;
	--lemon: #e7ea18;
	container-type: inline-size;
	position: relative;
	z-index: 0;
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
}

.bf-sec {
	position: relative;
}

.bf-art {
	position: relative;
	width: calc(1397 * var(--u));
	/* Не margin: auto — артборд буває трохи ширший за сторінку, і тоді auto притискає його вліво */
	margin-left: calc(50cqw - 698.5 * var(--u));
}

.bf-page h1,
.bf-page h2 {
	margin: 0;
	padding: 0;
}

.bf-only-m {
	display: none;
}

/* Системне виділення на Windows робить текст білим — на заголовках з білою обводкою він зникає */
.bf-page ::selection {
	background: var(--acid);
	color: #000;
}

/* ── Декор ───────────────────────────────────────────────────── */

.bf-d {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	max-width: none;
	height: auto;
	z-index: var(--z);
	pointer-events: none;
	user-select: none;
}

.bf-d--l {
	mix-blend-mode: lighten;
}

.bf-crop {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	overflow: hidden;
	transform: rotate(calc(var(--r) * 1deg));
	transform-origin: 0 0;
	z-index: var(--z);
	pointer-events: none;
}

.bf-crop img {
	position: absolute;
	max-width: none;
}

.bf-r {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	max-width: none;
	transform: rotate(calc(var(--r) * 1deg));
	transform-origin: 0 0;
	z-index: var(--z);
	pointer-events: none;
}

.bf-glow {
	position: absolute;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	border-radius: 50%;
	background: var(--c);
	/* --b — половина радіуса blur з Figma (як у її SVG-експорті), але канва Figma
	   рендерить щільніше: по пікселях макету найточніше σ ≈ 0.8 від цього значення */
	filter: blur(calc(var(--b) * .8 * var(--u)));
	transform: rotate(calc(var(--r) * 1deg));
	transform-origin: 0 0;
	z-index: var(--z);
	pointer-events: none;
}

/* Експорти з Figma обрізані рамкою макету. Поки артборд на всю ширину, зріз збігається
   з краєм екрана; коли збоку з'являється вільне місце — ховаємо зріз градієнтом.
   Артборд росте до 1397 × 1600 / 1319.9 ≈ 1694px (хедер 1680 мінус падінги), вільне місце — ширше */
@container (min-width: 1740px) {
	.bf-d--el {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 calc(80 * var(--u)));
		mask-image: linear-gradient(to right, transparent, #000 calc(80 * var(--u)));
	}

	.bf-d--er {
		-webkit-mask-image: linear-gradient(to left, transparent, #000 calc(80 * var(--u)));
		mask-image: linear-gradient(to left, transparent, #000 calc(80 * var(--u)));
	}
}

/* ── Текст з обводкою (Unbounded Black) ──────────────────────── */

.bf-t,
.bf-plain {
	position: absolute;
	display: block;
	margin: 0;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	transform: rotate(calc(var(--r, 0) * 1deg));
	transform-origin: 0 0;
	font-size: calc(var(--fs) * var(--u));
	line-height: var(--lh, .88);
	text-align: center;
	white-space: nowrap;
	z-index: var(--z, 3);
}

.bf-t {
	--sw: 4.35;
	--fs: 26;
	--h: 23;
	font-family: 'Unbounded', sans-serif;
	font-weight: 900;
	letter-spacing: calc(var(--ls, 0) * var(--fs) * var(--u));
	text-transform: uppercase;
	white-space: pre;
	color: #000;
	/* Figma: обводка OUTSIDE — у CSS штрих ділиться навпіл, тому ×2 і під заливкою */
	-webkit-text-stroke: calc(var(--sw) * 2 * var(--u)) var(--sc);
	paint-order: stroke fill;
}

/* Обводку поверх малює script/black_friday.js через SVG (кути як у Figma — -webkit-text-stroke ними
   не керує, і гострі кути гліфів витягуються шпичаками). HTML-текст під SVG лишається прозорим */
.bf-t--svg {
	color: transparent;
	-webkit-text-stroke-color: transparent;
}

.bf-t__svg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.bf-t--w {
	--sc: #fff;
}

.bf-t--y {
	--sc: var(--lemon);
}

.bf-plain {
	font-weight: 500;
	color: var(--c, #fff);
}

/* ── Перший екран ────────────────────────────────────────────── */

.bf-hero .bf-art {
	height: calc(525.5 * var(--u));
}

.bf-page .bf-breadcrumb {
	position: absolute;
	left: calc(31.9 * var(--u));
	top: calc(14.4 * var(--u));
	z-index: 40;
	margin: 0;
	padding: 0;
	background: transparent;
}

.bf-breadcrumb a,
.bf-breadcrumb li {
	color: #9e9e9e;
}

.bf-hero__title {
	font-size: inherit;
}

/* Поки заголовок був h1, тема (h1 span у stylesheet.css) давала рядкам padding-left: 5px —
   сторінку звірено з Figma саме так, тож після заміни h1 на div відступ лишаємо явно */
.bf-hero__title .bf-t {
	padding-left: 5px;
}

.bf-hero__date {
	--x: 235.84; --y: 93.45; --w: 154; --h: 19; --r: -.74; --fs: 22;
	--c: var(--lemon);
}

.bf-hero__date--pre {
	--c: #fff;
}

.bf-hero__live1 {
	--x: 57.1; --y: 161.22; --w: 693; --h: 160; --r: -4.04; --fs: 90.66; --ls: -.02; --sw: 14.84;
	/* у макеті « бананова» з пробілом попереду — при центруванні рядок зсунутий на півпробілу */
	text-indent: .143em;
}

.bf-hero__live2 {
	--x: 87.92; --y: 326.17; --w: 637.06; --h: 80; --r: -2.29; --fs: 90.66; --ls: -.02; --sw: 14.84;
}

.bf-hero__pre1 {
	--x: 87.92; --y: 148.18; --w: 637.06; --h: 80; --r: -2.29; --fs: 90.66; --ls: -.02; --sw: 14.84;
}

.bf-hero__pre2 {
	--x: 51.11; --y: 256.43; --w: 704; --h: 160; --r: -4.04; --fs: 90.66; --ls: -.02; --sw: 14.84;
}

.bf-hero__sub {
	--x: 178.38; --y: 426.4; --w: 435.08; --h: 52; --r: -.43; --fs: 22; --lh: 1.2; --z: 5;
}

.bf-hero__sub--pre {
	--x: 195.73; --y: 439.16; --w: 364.2; --r: -4.07;
}

.bf-hero__sub span {
	color: var(--lemon);
}

/* ── Панелі: опис акції та бренди ────────────────────────────── */

.bf-panel {
	position: relative;
}

.bf-panel__bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}

.bf-panel .bf-t {
	--z: 2;
}

.bf-about {
	z-index: 10;
	margin-left: calc(38.6 * var(--u));
	width: calc(1319.9 * var(--u));
	min-height: calc(336.1 * var(--u));
}

.bf-about__t1 {
	--x: 37.74; --y: 42.44; --w: 146; --h: 32; --r: -1.37; --lh: 1.23;
}

.bf-about__t2 {
	--x: 189.88; --y: 37.96; --w: 356; --h: 32; --r: -.4; --lh: 1.23;
}

.bf-about__date {
	--x: 1008.85; --y: 41.61; --w: 277; --r: 1.33;
}

.bf-about__cols {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 680.6fr 528.4fr;
	column-gap: calc(29.7 * var(--u));
	padding: calc(102.5 * var(--u)) calc(43.4 * var(--u)) calc(41.6 * var(--u)) calc(37.7 * var(--u));
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
}

.bf-about__col p {
	margin: 0 0 1.5em;
}

.bf-about__col p:last-child {
	margin-bottom: 0;
}

.bf-about__cta1 {
	--x: 752.73; --w: 252; --r: -2.29;
	top: calc(100% - 16.66 * var(--u));
}

.bf-about__cta2 {
	--x: 1014.25; --w: 118; --r: -3.66;
	top: calc(100% - 28.1 * var(--u));
}

.bf-anchor {
	position: relative;
	height: 0;
}

.bf-brands {
	z-index: 12;
	margin: calc(29.4 * var(--u)) 0 0 calc(31.7 * var(--u));
	width: calc(1327.6 * var(--u));
	height: calc(156.9 * var(--u));
}

.bf-brands__t1 {
	--x: 46.49; --y: -5.84; --w: 199; --r: 1.83;
}

.bf-brands__t2 {
	--x: 253.76; --y: .52; --w: 102; --r: 1.83;
}

.bf-logo {
	position: absolute;
	z-index: 1;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	max-width: none;
	height: auto;
}

.bf-logo--hardvandal { --x: 36.6;   --y: 43.2; --w: 172.8; }
.bf-logo--punch      { --x: 264.1;  --y: 70.6; --w: 136.2; }
.bf-logo--chaserlab  { --x: 454.9;  --y: 71.6; --w: 193.7; }
.bf-logo--octolab    { --x: 703.2;  --y: 82.5; --w: 162.9; }
.bf-logo--vaporesso  { --x: 920.7;  --y: 77.9; --w: 182.9; }
.bf-logo--oxva       { --x: 1158.4; --y: 71.7; --w: 132.8; }

/* Пари слів в одному рядку: внутрішні краї пари — точно як у макеті, а довший текст
   (RU) росте назовні, не налазячи на сусіда. Центрування тут не годиться: текст, що не
   влазить у бокс, браузер притискає до початку рядка. .17em — пробіл Unbounded, у Figma
   слова пари мають пробіл на стику */
.bf-about__t1,
.bf-about__cta1,
.bf-brands__t1,
.bf-products__t1 {
	left: auto;
	right: calc(100% - (var(--x) + var(--w)) * var(--u));
	width: max-content;
	min-width: calc(var(--w) * var(--u));
	text-align: right;
}

.bf-about__t2,
.bf-about__cta2,
.bf-brands__t2,
.bf-products__t2 {
	width: max-content;
	min-width: calc(var(--w) * var(--u));
	text-align: left;
}

.bf-about__cta1,
.bf-brands__t1 {
	padding-right: .17em;
}

.bf-about__t2,
.bf-brands__t2,
.bf-products__t2 {
	padding-left: .17em;
}

/* ── «Вигода вже скоро» (стан до старту) ─────────────────────── */

.bf-soon .bf-art {
	height: calc(485.2 * var(--u));
}

.bf-soon__t1 {
	--x: 471.58; --y: 162.03; --w: 450; --h: 70; --r: -2.29; --fs: 80; --sw: 14.84; --z: 5;
}

.bf-soon__t2 {
	--x: 370.35; --y: 272.18; --w: 653; --h: 70; --r: -4.04; --fs: 80; --sw: 14.84;
}

.bf-soon__label {
	--h: 14; --r: -3.74; --fs: 16; --z: 6;
	font-weight: 400;
}

.bf-soon__label--1 {
	--x: 488.82; --y: 383.02; --w: 121;
}

.bf-soon__label--2 {
	--x: 797.51; --y: 434.51; --w: 110;
}

.bf-soon__bar {
	--x: 490.36; --y: 408.97; --w: 415.56; --h: 28.16; --rad: 55; --sw: 4;
	position: absolute;
	z-index: 6;
	left: calc(var(--x) * var(--u));
	top: calc(var(--y) * var(--u));
	width: calc(var(--w) * var(--u));
	height: calc(var(--h) * var(--u));
	border-radius: calc(var(--rad) * var(--u));
	box-shadow: inset 0 0 0 calc(var(--sw) * var(--u)) var(--acid);
	overflow: hidden;
	transform: rotate(-3deg);
	transform-origin: 0 0;
}

.bf-soon__bar i {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	background: var(--acid);
}

/* ── Товари ──────────────────────────────────────────────────── */

.bf-products__head {
	position: relative;
	height: calc(130.6 * var(--u));
}

.bf-products__t1 {
	--x: 43.49; --y: 69.23; --w: 143; --r: -1.25;
}

.bf-products__t2 {
	--x: 194.36; --y: 66.12; --w: 392; --r: .48;
}

.bf-sort {
	position: absolute;
	z-index: 20;
	right: calc(38.23 * var(--u));
	top: calc(62.6 * var(--u));
	margin: 0;
}

.bf-sort select {
	-webkit-appearance: none;
	appearance: none;
	/* ширина за вибраною опцією, а не за найдовшою (Chrome 123+; інші — як звичайний select) */
	field-sizing: content;
	height: 33px;
	min-width: 156px;
	padding: 0 34px 0 12px;
	border: 1px solid #efefef;
	border-radius: 50px;
	background: transparent;
	color: var(--lemon);
	font: 400 14px 'Montserrat', sans-serif;
	cursor: pointer;
}

.bf-sort select option {
	color: #000;
	background: #fff;
}

.bf-sort::after {
	content: '';
	position: absolute;
	right: 14px;
	top: 50%;
	width: 5px;
	height: 9px;
	margin-top: -4.5px;
	background: url('/assets/black_friday_2026/sort-chevron.svg') no-repeat center / contain;
	transform: rotate(-90deg);
	pointer-events: none;
}

.bf-products__list {
	position: relative;
	z-index: 20;
	padding: 0 calc(38 * var(--u));
}

.bf-page .bf-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 4px;
}

.bf-page .product-thumb .sticker .bf-sale {
	height: 15px;
	padding: 0 6px;
	border-radius: 10px;
	background: var(--acid);
	color: #000;
	font-size: 10px;
	font-weight: 500;
	line-height: 15px;
}

.bf-more {
	display: block;
	margin: 24px auto 0;
	padding: 10px 28px;
	border: 1px solid var(--acid);
	border-radius: 50px;
	background: transparent;
	color: var(--acid);
	font: 500 14px 'Montserrat', sans-serif;
	cursor: pointer;
	transition: background .2s, color .2s;
}

.bf-more:hover {
	background: var(--acid);
	color: #000;
}

.bf-more:disabled {
	opacity: .5;
	cursor: wait;
}

/* ── Біжучий рядок ───────────────────────────────────────────── */

.bf-ticker .bf-art {
	height: calc(137 * var(--u));
}

.bf-page--live .bf-ticker {
	margin-top: 24px;
}

.bf-ticker__band {
	position: absolute;
	z-index: 5;
	left: calc(-143.82 * var(--u));
	top: 0;
	width: calc(1578 * var(--u));
	height: calc(39 * var(--u));
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--acid);
	transform: rotate(3.56deg);
	transform-origin: 0 0;
}

.bf-ticker__track {
	display: flex;
	flex-shrink: 0;
	white-space: nowrap;
	font-size: calc(16 * var(--u));
	font-weight: 500;
	line-height: 1.16;
	text-transform: uppercase;
	color: #000;
	/* 10 — внутрішній відступ смуги в макеті; анімація зсуває від нього ж, тож петля безшовна */
	transform: translateX(calc(10 * var(--u)));
	animation: bf-ticker 60s linear infinite;
}

/* margin замість gap — тоді -50% рівно на половину повторів і петля без стрибка */
.bf-ticker__track span {
	margin-right: calc(12 * var(--u));
}

.bf-ticker__b {
	font-weight: 800;
}

.bf-ticker__s {
	color: #fff;
}

@keyframes bf-ticker {
	to {
		transform: translateX(calc(-50% + 10 * var(--u)));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bf-ticker__track {
		animation: none;
	}
}

/* ── SEO-текст ───────────────────────────────────────────────── */

.bf-seo .bf-art {
	padding: calc(3.3 * var(--u)) calc(38.5 * var(--u)) 46px calc(40.3 * var(--u));
}

.bf-page--pre .bf-seo .bf-art {
	padding-top: calc(48.3 * var(--u));
}

/* 140% від 14px, округлені до цілого, як малює Figma (заголовок і вступ — 3 рядки = 60px) */
.bf-seo__text,
.bf-seo__text p {
	margin: 0;
	color: #9e9e9e;
	font-size: 14px;
	line-height: 20px;
}

/* У Figma цей блок — один текстовий вузол зі змішаними шрифтами, рядки сидять на 2px нижче */
.bf-seo__text {
	position: relative;
	z-index: 2;
	top: 2px;
}

.bf-seo__text h1 {
	color: #9e9e9e;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
}

/* Згорнуто — рівно заголовок і вступ (як у макеті, на будь-якій ширині); .open ставить кнопка */
.bf-seo__more {
	display: none;
}

.bf-seo__text.open .bf-seo__more {
	display: block;
}

/* Ієрархія як у SEO-тексті: розділи — h2 капсом (як заголовок блоку), підрозділи — h3 звичайним регістром */
.bf-seo__more h2,
.bf-seo__more h3 {
	margin: 16px 0 0;
	color: #9e9e9e;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
}

.bf-seo__more h3 {
	text-transform: none;
}

.bf-seo__more p,
.bf-seo__more ul {
	margin: 8px 0 0;
	color: #9e9e9e;
	font-size: 14px;
	line-height: 1.4;
}

.bf-seo__more ul {
	padding-left: 20px;
}

.bf-seo__more b {
	color: #ebebeb;
}

.bf-seo__more a {
	color: var(--acid);
	text-decoration: underline;
}

.bf-seo__toggle {
	display: flex;
	width: fit-content;
	margin-top: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--acid);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

/* ── Футер сайту на цій сторінці — темний, як у макеті ────────── */

/* Лише фон: color на body успадковують іконки хедера (бургер через currentColor) */
body.information-black_friday {
	background: #000;
}

.information-black_friday .finfo-wrap,
.information-black_friday .footer-block {
	background: #000;
	color: #fff;
}

.information-black_friday .finfo .promo {
	border-radius: 5px;
	background: #1b1918;
	color: #9e9e9e;
}

.information-black_friday .finfo .promo .promo-text h4 {
	color: #ebebeb;
}

.information-black_friday .finfo .promo img,
.information-black_friday footer .flogo img,
.information-black_friday footer .soc svg {
	filter: invert(1);
}

.information-black_friday footer a,
.information-black_friday footer .fh2,
.information-black_friday footer .contact {
	color: #fff;
}

.information-black_friday footer .powered {
	border-top-color: rgba(239, 239, 239, .2);
}

/* ── Проміжні ширини ─────────────────────────────────────────── */

/* Падінги сайтового .container (stylesheet.css) — щоб краї панелей лишались на рівні хедера */
@media (max-width: 1101px) {
	.bf-page {
		--pad: 25px;
	}
}

@media (max-width: 768px) {
	.bf-page {
		--pad: 15px;
	}
}

@media (max-width: 1199px) {
	.bf-page .bf-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.bf-page .bf-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bf-about__cols {
		font-size: 14px;
	}
}

/* ── Мобільний макет (390px) ─────────────────────────────────── */

@media (max-width: 767px) {
	.bf-page {
		--u: calc(100cqw / 390);
		/* сайтовий .null на мобілці має margin-bottom: -5px — контент заходить під fixed-хедер */
		margin-top: 5px;
	}

	.bf-art {
		width: calc(390 * var(--u));
		margin-left: 0;
	}

	.bf-only-d {
		display: none;
	}

	.bf-only-m {
		display: block;
	}

	.bf-hero .bf-art {
		height: calc(511.7 * var(--u));
	}

	.bf-page .bf-breadcrumb {
		left: calc(12.5 * var(--u));
		top: calc(15.8 * var(--u));
	}

	.bf-hero .bf-t,
	.bf-hero .bf-plain {
		--z: 5;
	}

	.bf-hero__date {
		--x: 153.77; --y: 68.71; --w: 84; --h: 11; --r: 0; --fs: 12;
	}

	.bf-hero__date--pre {
		--x: 115.87; --y: 58.3;
	}

	.bf-hero__live1 {
		--x: 45.42; --y: 92.17; --w: 300; --h: 68; --r: .7; --fs: 38.6; --sw: 6.54;
		text-indent: 0;
	}

	.bf-hero__live2 {
		--x: 54.13; --y: 176.48; --w: 280.76; --h: 34; --r: -1.93; --fs: 38.6; --sw: 6.54;
	}

	.bf-hero__pre1 {
		--x: 59.3; --y: 85.95; --w: 271.21; --h: 34; --r: -2.29; --fs: 38.6; --sw: 6.32;
	}

	.bf-hero__pre2 {
		--x: 45.9; --y: 116.7; --w: 300; --h: 68; --r: .7; --fs: 38.6; --sw: 6.32;
	}

	.bf-hero__sub {
		--x: 81.2; --y: 222.97; --w: 230.84; --h: 28; --r: .7; --fs: 12;
	}

	.bf-hero .bf-hero__sub--pre {
		--x: 106.48; --y: 199.43; --w: 178.36; --z: 3;
	}

	.bf-about {
		margin-left: calc(11 * var(--u));
		width: calc(367.9 * var(--u));
		min-height: 0;
	}

	.bf-panel .bf-t,
	.bf-products .bf-t {
		--fs: 18;
	}

	.bf-about__t1 {
		--x: 22.22; --y: 21.14; --w: 101; --h: 22; --lh: 1.22;
		left: calc(var(--x) * var(--u));
		right: auto;
		text-align: left;
	}

	.bf-about__t2 {
		--x: 18.14; --y: 42.13; --w: 246; --h: 22; --lh: 1.22;
	}

	.bf-about__date {
		display: none;
	}

	.bf-about__cols {
		grid-template-columns: 1fr;
		/* Відступи як у макеті: між колонками 15.5, від тексту до низу 38 (до «Твоя вигода» — 15).
		   Висоти колонок з макету (280/180 — це автовисота тексту) не тримаємо: на ширших телефонах текст
		   коротший і під ним лишалась порожнеча. Якщо довгий останній рядок ляже на скошений низ панелі
		   чи на «чекає», script/black_friday.js додасть знизу рівно стільки, скільки бракує */
		row-gap: calc(15.5 * var(--u));
		padding: calc(78.5 * var(--u)) calc(17.8 * var(--u)) calc(38 * var(--u)) calc(19.1 * var(--u));
		font-size: 14px;
		/* У Figma 140% від 14px, але Figma округлює рядок до цілих — 20px (колонки 280 = 14 × 20, 180 = 9 × 20);
		   з 19.6 на 23 рядках набігало 9px */
		line-height: 20px;
	}

	/* Між абзацами в макеті — порожній рядок */
	.bf-about__col p {
		margin-bottom: 20px;
	}

	.bf-about__cta1 {
		--x: 19.14; --w: 174; --h: 16; --r: 2.78;
		top: calc(100% - 22.78 * var(--u));
	}

	.bf-about__cta2 {
		--x: 213.48; --w: 82; --h: 16; --r: -14.02;
		top: calc(100% - 18.18 * var(--u));
	}

	.bf-brands {
		margin: calc(35 * var(--u)) 0 0 calc(14.3 * var(--u));
		width: calc(364.7 * var(--u));
		height: calc(153.3 * var(--u));
	}

	.bf-brands__t1 {
		--x: 15.58; --y: .55; --w: 138; --h: 16;
	}

	.bf-brands__t2 {
		--x: 159.64; --y: 4.96; --w: 71; --h: 16;
	}

	.bf-logo--hardvandal { --x: 10.5;  --y: 47.8;  --w: 101.6; }
	.bf-logo--punch      { --x: 139.3; --y: 55.8;  --w: 74.3; }
	.bf-logo--vaporesso  { --x: 232;   --y: 49.7;  --w: 116.8; }
	.bf-logo--chaserlab  { --x: 14.6;  --y: 102.4; --w: 114.2; }
	.bf-logo--octolab    { --x: 148.2; --y: 101.5; --w: 104; }
	.bf-logo--oxva       { --x: 271.7; --y: 102.4; --w: 71.1; }

	.bf-soon .bf-art {
		height: calc(273.2 * var(--u));
	}

	.bf-soon__t1 {
		--x: 87.91; --y: 89.85; --w: 214; --h: 33; --fs: 38; --sw: 6.32;
	}

	.bf-soon__t2 {
		--x: 39.7; --y: 141.6; --w: 310; --h: 33; --fs: 38; --sw: 6.32;
	}

	.bf-soon__label {
		--h: 9; --fs: 10.24;
	}

	.bf-soon__label--1 {
		--x: 61.02; --y: 215.75; --w: 77;
	}

	.bf-soon__label--2 {
		--x: 258.5; --y: 248.69; --w: 71;
	}

	.bf-soon__bar {
		--x: 62.01; --y: 232.36; --w: 265.85; --h: 18.01; --rad: 35.19; --sw: 2.56;
	}

	.bf-products__head {
		height: calc(109.84 * var(--u));
	}

	.bf-products__t1 {
		--x: 20.15; --y: 35.56; --w: 99; --h: 16;
		left: calc(var(--x) * var(--u));
		right: auto;
		text-align: left;
	}

	.bf-products__t2 {
		--x: 20.15; --y: 54.58; --w: 188.96; --h: 32;
		width: calc(var(--w) * var(--u));
		padding-left: 0;
		white-space: pre-wrap;
	}

	.bf-sort {
		right: calc(11.53 * var(--u));
		top: calc(61.2 * var(--u));
	}

	.bf-products__list {
		padding: 0 calc(13.5 * var(--u));
	}

	.bf-page .bf-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bf-ticker .bf-art {
		height: calc(133 * var(--u));
	}

	.bf-ticker__band {
		left: calc(-588.39 * var(--u));
		height: calc(35 * var(--u));
	}

	.bf-ticker__track {
		font-size: calc(13 * var(--u));
	}

	.bf-ticker__track span {
		margin-right: calc(4 * var(--u));
	}

	.bf-seo .bf-art,
	.bf-page--pre .bf-seo .bf-art {
		margin-top: calc(-14.6 * var(--u));
		padding: 0 calc(6 * var(--u)) 56px calc(12 * var(--u));
	}
}