/*
Theme Name: Sedna Design Shop
Theme URI: https://example.com/sedna
Author: Sedna
Description: Магазин серії Schneider Electric Sedna Design & Elements. Каталог з фільтрами, конфігуратор комплекту на справжніх фото, калькулятор квартири, кошик з оформленням, гуртові заявки та юридичні сторінки. Темна тема, Unbounded + Manrope.
Version: 4.0.1
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sedna
Tags: one-column, custom-colors, e-commerce, landing-page
*/

/* =========================================================================
   1. Токени
   ====================================================================== */

:root {
	--green: #3DCD58;
	--green-h: #5ada72;
	--green-l: #9be8a9;
	--green-d: #1d9e3f;
	/*
	 * Зелений для тексту на кремовому. Основний (#3DCD58) там дає контраст
	 * 1.7:1 — його просто не видно; навіть --green-d лише 2.5:1 на темному
	 * краю градієнта сцени. Цей тримає 4.7:1 на обох краях.
	 */
	--green-ink: #166b28;
	--green-d-h: #27b44e;

	--ink: #0e1112;
	--ink-2: #101314;
	--ink-3: #0b0d0e;
	--panel: #14181a;
	--panel-2: #171b1d;
	--panel-3: #1b1f22;

	--head: #f3f2ec;
	--text: #e9e8e2;
	--soft: #c8c7c0;
	--mut: #a9aaa2;
	--mut-2: #8a8b84;
	--mut-3: #6f716a;
	--mut-4: #5c5f58;

	--cream: #f3f1ea;
	--dark: #16191a;
	--cream-1: #3c3f38;
	--cream-2: #5a5d55;
	--cream-3: #4a4d46;

	--red: #e0483f;
	--red-soft: #f0918b;
	--amber: #c58c14;

	--hair: rgba(255, 255, 255, .07);
	--hair-2: rgba(255, 255, 255, .1);
	--hair-3: rgba(255, 255, 255, .18);
	--hair-l: rgba(0, 0, 0, .08);

	--header-h: 66px;
	--pad: clamp(16px, 4vw, 24px);
	--wrap: 1240px;

	--display: 'Unbounded', 'Manrope', sans-serif;
	--body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

/*
 * Атрибут hidden — головний перемикач видимості в JS. Власні display:flex
 * у правилах нижче перебили б його, тому фіксуємо приоритет один раз тут.
 */
[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
	/* Анкорні переходи не мають ховатись під sticky-шапкою. */
	scroll-padding-top: calc(var(--header-h) + 16px);
	/* Полотно під час повернення на місце — щоб не блимало білим. */
	background: var(--ink);
}

/*
 * Повертаємось на те місце, де були: вміст не показуємо, поки прокрутка
 * не стане на місце. Клас вішає вбудований скрипт у шапці, знімає його
 * sedna.js — і власний запобіжник, якщо скрипт не дійшов.
 */
.sd-resume body {
	visibility: hidden;
}

/*
 * Захист від горизонтального скролу — але саме clip, а не hidden.
 *
 * overflow-x: hidden змушує браузер порахувати overflow-y як auto,
 * тобто html/body стають окремим скрол-контейнером — і position: sticky
 * у шапки перестає працювати: вона їде вгору разом зі сторінкою.
 * overflow-x: clip обрізає так само, але скрол-контейнера не створює.
 */
body {
	margin: 0;
	background: var(--ink);
	color: var(--text);
	font-family: var(--body);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

body.sd-locked {
	overflow: hidden;
}

a {
	color: var(--green);
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}

a:hover {
	color: #6fe287;
}

img {
	max-width: 100%;
}

::selection {
	background: var(--green);
	color: var(--ink);
}

input,
textarea,
select,
button {
	font-family: var(--body);
}

button,
a,
label,
summary,
[role="button"] {
	cursor: pointer;
}

button,
a {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

button:active,
a:active {
	transform: scale(.975);
}

input[type="range"] {
	cursor: grab;
	accent-color: var(--green);
}

input[type="checkbox"],
input[type="radio"],
select {
	cursor: pointer;
}

input[type="checkbox"] {
	accent-color: var(--green);
}

input::placeholder,
textarea::placeholder {
	color: var(--mut-4);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.sd-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Прихована службова смуга скролу (таби каталогу). */
.sd-noscroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.sd-noscroll::-webkit-scrollbar {
	display: none;
}

/* =========================================================================
   2. Анімації
   ====================================================================== */

@keyframes sd-fade-up {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes sd-reveal {
	from { opacity: 0; transform: translateY(38px) scale(.975); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes sd-reveal-side {
	from { opacity: 0; transform: translateX(-34px); }
	to { opacity: 1; transform: none; }
}

@keyframes sd-zoom-in {
	from { opacity: 0; transform: scale(1.08); }
	to { opacity: 1; transform: scale(1); }
}

/* Розмах польоту — змінною: на телефоні картки стоять усередині фото,
   і рух на всі 16 px виносив би їх за край. */
@keyframes sd-floaty {
	0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
	50% { transform: translateY(var(--fly, -16px)) rotate(var(--r, 0deg)); }
}

@keyframes sd-marq {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes sd-glow {
	0%, 100% { opacity: .55; }
	50% { opacity: .95; }
}

@keyframes sd-pop-in {
	from { opacity: 0; transform: scale(.94) translateY(14px); }
	to { opacity: 1; transform: none; }
}

@keyframes sd-shine {
	from { background-position: 0% 50%; }
	to { background-position: 200% 50%; }
}

@keyframes sd-spin {
	to { transform: rotate(360deg); }
}

/*
 * Поява при скролі через animation-timeline. Де не підтримується
 * (Safari, Firefox) — елементи просто видимі, без анімації.
 */
@supports (animation-timeline: view()) {
	[data-reveal] {
		animation: sd-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 55%;
	}

	[data-reveal="side"] {
		animation-name: sd-reveal-side;
	}

	[data-reveal="zoom"] {
		animation-name: sd-zoom-in;
		animation-range: entry 0% entry 42%;
	}

	[data-reveal="up"] {
		animation-name: sd-fade-up;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* =========================================================================
   3. Спільні блоки
   ====================================================================== */

.sd-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--pad);
}

.sd-wrap--md {
	max-width: 1080px;
}

.sd-wrap--sm {
	max-width: 940px;
}

.sd-wrap--text {
	max-width: 860px;
}

.sd-wrap--faq {
	max-width: 840px;
}

.sd-sec {
	padding: clamp(52px, 8vw, 90px) 0;
}

.sd-sec--pad {
	padding: clamp(52px, 8vw, 90px) var(--pad);
	max-width: var(--wrap);
	margin: 0 auto;
}

.sd-sec--cream {
	background: var(--cream);
	color: var(--dark);
}

.sd-sec--deep {
	background: var(--ink-2);
	border-top: 1px solid var(--hair);
}

.sd-sec--bordered {
	background: var(--ink-2);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.sd-eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--green);
	font-weight: 800;
	margin-bottom: 14px;
}

.sd-sec--cream .sd-eyebrow {
	color: var(--green-d);
}

.sd-h2 {
	font-family: var(--display);
	font-size: clamp(24px, 5vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 12px;
	color: var(--head);
	text-wrap: balance;
}

.sd-h2--sm {
	font-size: clamp(23px, 4.6vw, 32px);
}

.sd-sec--cream .sd-h2 {
	color: var(--dark);
}

.sd-lead {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mut-2);
	margin: 0 0 34px;
	max-width: 600px;
}

.sd-sec--cream .sd-lead {
	color: var(--cream-2);
}

/* Кнопки */
.sd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px;
	font-weight: 800;
	border: 1px solid transparent;
	white-space: nowrap;
}

.sd-btn--fill {
	background: var(--green);
	color: var(--ink);
	padding: 16px 32px;
	font-size: 15px;
}

.sd-btn--fill:hover {
	background: var(--green-h);
	color: var(--ink);
	transform: translateY(-2px);
}

.sd-btn--hero {
	box-shadow: 0 8px 32px rgba(61, 205, 88, .35);
}

.sd-btn--line {
	background: none;
	border: 1.5px solid rgba(255, 255, 255, .25);
	color: var(--head);
	padding: 16px 32px;
	font-size: 15px;
}

.sd-btn--line:hover {
	border-color: var(--green);
	color: var(--green);
}

.sd-btn--green-line {
	background: none;
	border: 1.5px solid rgba(61, 205, 88, .5);
	color: var(--green);
	padding: 14px 30px;
	font-size: 14px;
}

.sd-btn--green-line:hover {
	background: var(--green);
	color: var(--ink);
}

.sd-btn--ghost {
	background: none;
	border: 1px solid var(--hair-3);
	color: var(--soft);
	padding: 13px 24px;
	font-size: 13.5px;
}

.sd-btn--ghost:hover {
	border-color: var(--green);
	color: var(--green);
}

.sd-btn--sm {
	padding: 12px 22px;
	font-size: 13px;
}

.sd-btn--block {
	width: 100%;
}

.sd-btn--cream {
	background: var(--green-d);
	color: #fff;
	padding: 11px 22px;
	font-size: 12.5px;
}

.sd-btn--cream:hover {
	background: var(--green-d-h);
	color: #fff;
}

.sd-btn[disabled] {
	opacity: .6;
	cursor: progress;
	transform: none;
}

/* Кнопка натиснута, відповідь ще в дорозі. */
.sd-btn.is-busy {
	opacity: .7;
	cursor: progress;
	pointer-events: none;
}

/* Посилання «← назад» */
.sd-back {
	font-size: 13px;
	display: inline-block;
}

.sd-back:hover {
	transform: translateX(-4px);
}

.sd-sec--cream .sd-back,
.sd-info .sd-back {
	color: var(--green-d);
}

/* Підкреслене інлайн-посилання */
.sd-ul {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(61, 205, 88, .35);
	text-underline-offset: 3px;
}

.sd-ul:hover {
	color: var(--green-l);
	text-decoration-color: var(--green-l);
}

/* Порожній стан */
.sd-empty {
	background: var(--panel);
	border: 1px dashed rgba(255, 255, 255, .15);
	border-radius: 20px;
	padding: 60px 30px;
	text-align: center;
}

.sd-empty__icon {
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	color: var(--green);
}

.sd-empty__h {
	font-size: 15px;
	font-weight: 800;
	color: #edece7;
	margin-bottom: 6px;
}

.sd-empty__p {
	font-size: 13.5px;
	color: var(--mut-2);
	margin-bottom: 22px;
}

.sd-empty__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   Порожній кошик і порожній список бажань

   Не «нічого немає», а розвилка: куди йти далі. Тому це повноцінний екран
   із заголовком, двома діями, карткою збоку й смугою допомоги внизу —
   а не сіра плашка посеред порожнечі.
   ---------------------------------------------------------------------- */

.sd-blank {
	/* Той самий відступ від посилання «назад», що дає .sd-page h1. */
	margin-top: 18px;
	animation: sd-fade-up .5s both;
}

.sd-blank__top {
	display: flex;
	gap: clamp(18px, 3.5vw, 34px);
	flex-wrap: wrap;
	align-items: flex-start;
}

.sd-blank__main {
	flex: 1 1 420px;
	min-width: 0;
}

.sd-blank__eyebrow {
	font-size: 11.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--green);
	font-weight: 800;
	margin-bottom: 14px;
}

.sd-blank__h {
	font-family: var(--display);
	font-size: clamp(25px, 5.4vw, 37px);
	line-height: 1.12;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--head);
	text-wrap: balance;
}

.sd-blank__p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--mut);
	margin: 0 0 26px;
	max-width: 520px;
	text-wrap: pretty;
}

.sd-blank__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.sd-blank__note {
	flex: 1 1 260px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 20px;
	padding: 22px 24px;
}

.sd-blank__note--green {
	background: rgba(61, 205, 88, .07);
	border-color: rgba(61, 205, 88, .3);
}

.sd-blank__note-e {
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-4);
	font-weight: 800;
	margin-bottom: 11px;
}

.sd-blank__note--green .sd-blank__note-e {
	color: var(--green);
}

.sd-blank__note-t {
	font-size: 15px;
	font-weight: 800;
	color: var(--head);
	line-height: 1.45;
	margin-bottom: 9px;
}

.sd-blank__note-p {
	font-size: 13.5px;
	color: var(--mut-2);
	line-height: 1.65;
}

.sd-blank__help {
	margin-top: clamp(34px, 6vw, 56px);
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 22px;
	padding: clamp(20px, 4vw, 30px);
	display: flex;
	gap: clamp(18px, 3vw, 30px);
	flex-wrap: wrap;
	align-items: center;
}

.sd-blank__help-txt {
	flex: 1 1 320px;
	min-width: 0;
}

.sd-blank__help-t {
	font-family: var(--display);
	font-size: clamp(17px, 3.4vw, 22px);
	font-weight: 700;
	color: var(--head);
	line-height: 1.3;
	margin-bottom: 9px;
}

.sd-blank__help-p {
	font-size: 13.5px;
	color: var(--mut-2);
	line-height: 1.65;
	max-width: 440px;
}

.sd-blank__help-do {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
}

/* Той самий стан, але у вікні кошика: коротший, бо людина вже щось робила. */
.sd-void {
	border: 1px dashed rgba(255, 255, 255, .14);
	border-radius: 20px;
	padding: clamp(28px, 5vw, 52px);
	display: flex;
	justify-content: center;
	text-align: center;
}

.sd-void__in {
	max-width: 520px;
}

.sd-void__h {
	font-size: clamp(17px, 2.4vw, 21px);
	font-weight: 800;
	color: var(--head);
	margin-bottom: 9px;
}

.sd-void__p {
	font-size: 14px;
	color: var(--mut-2);
	line-height: 1.65;
	margin: 0 auto 22px;
	max-width: 44ch;
}

.sd-void__actions {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	justify-content: center;
}

.sd-void__note {
	margin-top: 20px;
	font-size: 12.5px;
	color: var(--mut-3);
	line-height: 1.55;
}

/*
 * Повідомлення про помилку у формі.
 *
 * Відступ знизу — частина самого повідомлення, а не сусіда: за ним усюди
 * йде кнопка, і поки відступу не було, рамка помилки лежала впритул до
 * неї, а на двох рядках тексту й зовсім налазила зверху.
 */
.sd-err {
	background: rgba(224, 72, 63, .1);
	border: 1px solid rgba(224, 72, 63, .4);
	color: var(--red-soft);
	font-size: 12.5px;
	border-radius: 12px;
	padding: 11px 14px;
	line-height: 1.5;
	margin-bottom: 12px;
}

/* Поля */
.sd-input {
	width: 100%;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14px;
	color: var(--text);
	outline: none;
}

.sd-input:focus {
	border-color: var(--green);
}

.sd-input.is-bad {
	border-color: rgba(224, 72, 63, .6);
}

textarea.sd-input {
	resize: vertical;
}

.sd-field-label {
	font-size: 12px;
	color: var(--mut-2);
	font-weight: 800;
	margin-bottom: 8px;
}

/* Чіп-перемикач (типи об'єкта, канали, пости) */
.sd-chip {
	background: none;
	color: var(--soft);
	border: 1px solid var(--hair-3);
	border-radius: 999px;
	padding: 9px 15px;
	font-size: 12.5px;
	font-weight: 800;
	/*
	 * Чип — одне слово-відповідь, а не абзац. Довга назва підкатегорії
	 * ламала його на два рядки, і овал ставав на голову вищим за сусідні:
	 * ряд чипів переставав читатись як ряд. Довгі назви коротшають у
	 * дереві категорій, а тут — запобіжник на майбутнє.
	 */
	white-space: nowrap;
}

.sd-chip:hover {
	border-color: var(--green);
}

.sd-chip.is-on {
	background: var(--green);
	color: var(--ink);
	border-color: var(--green);
}

.sd-chips {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.sd-chip__n {
	background: rgba(255, 255, 255, .14);
	color: var(--soft);
}

.sd-chip__n {
	min-width: 18px;
	margin-left: 7px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: var(--mut-2);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.sd-chip.is-on .sd-chip__n {
	background: rgba(14, 17, 18, .18);
	color: rgba(14, 17, 18, .75);
}

.sd-post {
	background: none;
	color: var(--soft);
	border: 1px solid var(--hair-3);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 800;
	flex: none;
}

.sd-post:hover {
	border-color: var(--green);
}

.sd-post.is-on {
	background: var(--green);
	color: var(--ink);
	border-color: var(--green);
}

/* Кружечок-свотч фінішу */
.sd-sw {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .2);
	padding: 0;
	flex: none;
	transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .18s ease;
}

.sd-sw:hover {
	transform: scale(1.12);
}

.sd-sw.is-on {
	border-color: var(--green);
}

.sd-sw--lg {
	width: 36px;
	height: 36px;
}

/* Лічильник кількості */
.sd-qty {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: 5px 8px;
	flex: none;
}

.sd-qty button {
	background: none;
	border: none;
	color: var(--soft);
	font-size: 16px;
	width: 26px;
	line-height: 1;
	padding: 0;
}

.sd-qty button:hover {
	color: var(--green);
}

.sd-qty__n {
	font-size: 14px;
	font-weight: 800;
	min-width: 22px;
	text-align: center;
}

/* Хрестик «видалити» */
.sd-x {
	background: none;
	border: none;
	color: var(--mut-4);
	font-size: 17px;
	line-height: 1;
	padding: 2px 4px;
	flex: none;
}

.sd-x:hover {
	color: var(--red);
}

/* =========================================================================
   4. Прев'ю товару (рамка + механізм, малюється CSS)
   ====================================================================== */

.sd-pv {
	width: clamp(92px, 26vw, 118px);
	height: clamp(92px, 26vw, 118px);
	border-radius: 11px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
	display: grid;
	place-items: center;
	transition: background .3s;
}

.sd-pv__mech {
	width: 73%;
	height: 73%;
	border-radius: 7px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
	display: grid;
	place-items: center;
	position: relative;
	transition: background .3s;
}

.sd-pv__sw {
	width: 74%;
	height: 74%;
	border-radius: 4px;
	background: linear-gradient(175deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .2));
	display: flex;
}

.sd-pv__split {
	width: 1px;
	height: 100%;
	margin: 0 auto;
	background: rgba(0, 0, 0, .3);
}

.sd-pv__led {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: #57b8ff;
	box-shadow: 0 0 8px #57b8ff;
	animation: sd-glow 2.4s infinite;
}

.sd-pv__sock {
	width: 72%;
	height: 72%;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .24), rgba(0, 0, 0, .16));
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 19px;
}

.sd-pv__sock i {
	width: 7px;
	height: 11px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .55);
}

.sd-pv__frame {
	width: 72%;
	height: 72%;
	border-radius: 5px;
	background: linear-gradient(160deg, #3a4145, #272c2f);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4);
}

/* Велике прев'ю в модалці */
.sd-pv--lg {
	width: clamp(150px, 38vw, 200px);
	height: clamp(150px, 38vw, 200px);
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.sd-pv--lg .sd-pv__mech {
	border-radius: 12px;
}

.sd-pv--lg .sd-pv__sw {
	width: 75%;
	height: 75%;
	border-radius: 7px;
}

.sd-pv--lg .sd-pv__split {
	width: 2px;
}

.sd-pv--lg .sd-pv__led {
	bottom: 14px;
	width: 22px;
	height: 5px;
	border-radius: 3px;
	box-shadow: 0 0 12px #57b8ff;
}

.sd-pv--lg .sd-pv__sock {
	box-shadow: inset 0 3px 10px rgba(0, 0, 0, .28);
	gap: 32px;
}

.sd-pv--lg .sd-pv__sock i {
	width: 12px;
	height: 19px;
	border-radius: 5px;
}

.sd-pv--lg .sd-pv__frame {
	border-radius: 9px;
	background: linear-gradient(160deg, #3a4145, #23282b);
	box-shadow: inset 0 3px 12px rgba(0, 0, 0, .4);
}

/* =========================================================================
   5. Промо-смуга
   ====================================================================== */

.sd-promo {
	position: relative;
	background: linear-gradient(90deg, #1d9e3f, #3DCD58 45%, #1d9e3f);
	color: #08210f;
	overflow: hidden;
}

.sd-promo__wide {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 10px 44px 10px 18px;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	font-size: 13.5px;
	font-weight: 800;
	text-align: center;
	line-height: 1.4;
}

.sd-promo__narrow {
	display: none;
	width: 100%;
	background: none;
	border: none;
	padding: 8px 38px 8px 14px;
	gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	font-weight: 800;
	color: #08210f;
	line-height: 1.25;
}

.sd-promo__sep {
	opacity: .55;
}

.sd-promo__soft {
	font-weight: 600;
}

.sd-promo__code {
	background: rgba(8, 33, 15, .14);
	border: 1px dashed rgba(8, 33, 15, .4);
	border-radius: 7px;
	padding: 3px 10px;
	font-weight: 800;
	letter-spacing: .08em;
	flex: none;
}

.sd-promo__copy {
	background: #08210f;
	color: #eaf7ee;
	border: none;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
	flex: none;
}

.sd-promo__copy:hover {
	background: #0f3a1c;
}

.sd-promo__close {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: rgba(8, 33, 15, .6);
	font-size: 15px;
	line-height: 1;
	padding: 6px;
}

.sd-promo__close:hover {
	color: #08210f;
	transform: translateY(-50%) scale(1.1);
}

/* =========================================================================
   6. Шапка
   ====================================================================== */

.sd-head {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(14, 17, 18, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hair);
}

/*
 * Шапка тягнеться на всю ширину екрана — на відміну від контенту,
 * який тримається в --wrap. Так у макеті: логотип притиснутий до
 * лівого краю, телефон і кнопки — до правого.
 */
.sd-head__bar {
	width: 100%;
	padding: 0 clamp(14px, 3vw, 34px);
	height: var(--header-h);
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.5vw, 26px);
}

.sd-logo {
	display: flex;
	align-items: baseline;
	gap: 9px;
	flex: none;
}

.sd-logo b {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(16px, 4vw, 19px);
	color: var(--head);
	letter-spacing: .02em;
}

.sd-logo span {
	font-size: 10.5px;
	color: var(--green);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
}

/*
 * Логотип-картинка з медіатеки. Висота задається інлайном з налаштувань,
 * ширина — auto, тому будь-які пропорції лягають без обрізання.
 */
.sd-logo--img {
	align-items: center;
	gap: 0;
}

.sd-logo__img {
	display: block;
	width: auto;
	max-width: min(220px, 42vw);
	object-fit: contain;
}

.sd-logo__img--mob {
	display: none;
}

.sd-nav {
	display: flex;
	gap: clamp(14px, 1.7vw, 20px);
	margin-left: auto;
	align-items: center;
	white-space: nowrap;
}

.sd-nav a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mut);
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
}

.sd-nav a:hover,
.sd-nav a[aria-current="page"] {
	color: var(--head);
	border-color: var(--green);
}

/*
 * Каталог — пігулкою.
 *
 * Це те, заради чого приходять на сайт, а в ряду однакових посилань він
 * читався нарівні з «Запитаннями». Крапка перед назвою тримає акцент
 * навіть тоді, коли рамку не видно на світлому тлі шапки при скролі.
 */
.sd-nav a.sd-nav__accent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--green);
	font-weight: 800;
	background: rgba(61, 205, 88, .1);
	border: 1px solid rgba(61, 205, 88, .45);
	border-radius: 999px;
	padding: 7px 16px;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sd-nav a.sd-nav__accent i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.sd-nav a.sd-nav__accent:hover,
.sd-nav a.sd-nav__accent[aria-current="page"] {
	background: rgba(61, 205, 88, .18);
	border-color: var(--green);
	color: var(--green-l);
}

.sd-head__actions {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-left: auto;
}

/*
 * Найвужчі телефони (320 px). Логотип 119 px плюс чотири кнопки по 40 не
 * вміщались у 292 px між полями — сторінка їхала вбік на всі дев'ять
 * пікселів, і то на кожному екрані сайту.
 *
 * Забираємо з полів і проміжків, а не з кнопок: 40 px — це вже мінімум
 * для пальця, менше робити не можна.
 */
@media (max-width: 359px) {
	.sd-head__bar {
		padding-left: 10px;
		padding-right: 10px;
	}

	.sd-head__actions {
		gap: 5px;
	}
}

.sd-head__phone {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--head);
	margin-right: 6px;
	flex: none;
	white-space: nowrap;
}

.sd-head__phone:hover {
	color: var(--green);
}

/* Підпис під телефоном — необов'язковий, тому й розкладка гнучка. */
.sd-head__phone:has(small) {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.15;
}

.sd-head__phone small {
	font-size: 10px;
	font-weight: 600;
	color: var(--mut);
	letter-spacing: .01em;
}

.sd-iconbtn {
	position: relative;
	background: var(--panel-2);
	border: 1px solid var(--hair-2);
	color: var(--text);
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 12px;
	display: grid;
	place-items: center;
	padding: 0;
}

.sd-iconbtn:hover {
	border-color: var(--green);
}

.sd-iconbtn--phone {
	color: var(--green);
	display: none;
}

.sd-badge {
	position: absolute;
	top: -7px;
	right: -8px;
	background: var(--green);
	color: var(--ink);
	font-size: 10.5px;
	font-weight: 800;
	border-radius: 999px;
	min-width: 19px;
	height: 19px;
	display: grid;
	place-items: center;
	padding: 0 5px;
	border: 2px solid var(--ink);
}

.sd-badge--grey {
	background: #6b6f6c;
	color: #fff;
}

.sd-burger {
	display: none;
	font-size: 16px;
}

.sd-menu {
	border-top: 1px solid rgba(255, 255, 255, .08);
	background: var(--ink-2);
	padding: 10px 16px 16px;
	animation: sd-fade-up .25s both;
}

.sd-menu a.sd-menu__link {
	display: block;
	padding: 14px 12px;
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	border-radius: 10px;
	transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.sd-menu a.sd-menu__link:hover {
	background: rgba(61, 205, 88, .1);
	color: var(--green);
	padding-left: 18px;
}

/*
 * Каталог і в бургері виділений — але рядком, а не пігулкою: у списку на
 * всю ширину пігулка з'їхала б до лівого краю й читалась як кнопка, що
 * загубилась.
 */
.sd-menu a.sd-menu__link--accent {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--green);
	font-weight: 800;
	background: rgba(61, 205, 88, .08);
	border-bottom-color: rgba(61, 205, 88, .25);
}

.sd-menu a.sd-menu__link--accent i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.sd-menu__actions {
	display: flex;
	gap: 9px;
	margin-top: 14px;
}

.sd-menu__actions > * {
	flex: 1;
	text-align: center;
	padding: 13px;
	font-size: 13.5px;
	font-weight: 800;
	border-radius: 999px;
}

.sd-progress {
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 2.5px;
	width: 0;
	background: linear-gradient(90deg, #1d9e3f, var(--green), var(--green-l));
	border-radius: 0 99px 99px 0;
	box-shadow: 0 0 10px rgba(61, 205, 88, .6);
	transition: width .1s linear;
}

/* =========================================================================
   7. Hero
   ====================================================================== */

.sd-hero {
	position: relative;
	padding: clamp(48px, 8vw, 90px) var(--pad) clamp(46px, 7vw, 70px);
	overflow: clip;
}

.sd-hero__glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(900px 500px at 75% 20%, rgba(61, 205, 88, .14), transparent 65%),
		radial-gradient(700px 500px at 15% 85%, rgba(61, 205, 88, .07), transparent 60%);
}

.sd-hero__ring {
	position: absolute;
	top: -120px;
	right: -120px;
	width: 520px;
	height: 520px;
	border: 1px dashed rgba(61, 205, 88, .25);
	border-radius: 50%;
	animation: sd-spin 60s linear infinite;
	pointer-events: none;
}

.sd-hero__grid {
	max-width: var(--wrap);
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: clamp(30px, 5vw, 48px);
	align-items: center;
}

.sd-hero__copy {
	flex: 1 1 460px;
	min-width: 0;
	animation: sd-fade-up .9s both;
}

.sd-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(61, 205, 88, .12);
	border: 1px solid rgba(61, 205, 88, .35);
	color: var(--green);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 8px 16px;
	margin-bottom: 26px;
}

.sd-pill i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	animation: sd-glow 2s infinite;
}

.sd-hero h1 {
	font-family: var(--display);
	font-size: clamp(30px, 6.4vw, 52px);
	line-height: 1.08;
	font-weight: 800;
	margin: 0 0 22px;
	color: var(--head);
	text-wrap: balance;
}

.sd-hero h1 em {
	font-style: normal;
	background: linear-gradient(90deg, var(--green), var(--green-l), var(--green));
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: sd-shine 5s linear infinite;
}

.sd-hero__lead {
	font-size: clamp(14.5px, 2.6vw, 17px);
	line-height: 1.65;
	color: var(--mut);
	max-width: 520px;
	margin: 0 0 32px;
}

.sd-hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.sd-hero__stats {
	display: flex;
	gap: 26px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.sd-hero__stats b {
	display: block;
	font-family: var(--display);
	font-size: 24px;
	font-weight: 700;
	color: var(--head);
}

.sd-hero__stats span {
	display: block;
	font-size: 12.5px;
	color: var(--mut-2);
	margin-top: 3px;
}

.sd-hero__shot {
	flex: 1 1 340px;
	min-width: 0;
	position: relative;
	height: clamp(320px, 52vw, 520px);
	animation: sd-fade-up 1s .15s both;
}

.sd-hero__shot > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 28px;
	border: 1px solid var(--hair-2);
}

.sd-float {
	position: absolute;
	background: var(--panel-2);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 18px;
	padding: 12px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
	animation: sd-floaty 5s ease-in-out infinite;
}

.sd-float img {
	width: 104px;
	height: 104px;
	object-fit: contain;
	display: block;
}

.sd-float--1 {
	left: -46px;
	top: 44px;
	--r: -4deg;
}

.sd-float--2 {
	left: -30px;
	bottom: 60px;
	--r: 3deg;
	animation-duration: 6s;
	animation-delay: .8s;
}

.sd-float--3 {
	right: -26px;
	bottom: -26px;
	--r: -2deg;
	animation-duration: 5.5s;
	animation-delay: .4s;
	border-color: rgba(61, 205, 88, .4);
	padding: 14px 18px;
	display: flex;
	gap: 12px;
	align-items: center;
}

.sd-float--3 img {
	width: 64px;
	height: 64px;
}

.sd-float__label {
	font-size: 12px;
	color: var(--mut-2);
}

.sd-float__price {
	font-family: var(--display);
	font-size: 16px;
	color: var(--green);
	font-weight: 700;
	white-space: nowrap;
}

/* =========================================================================
   8. Стрічка кольорів
   ====================================================================== */

.sd-marquee {
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
	overflow: hidden;
	padding: 16px 0;
	background: var(--ink-2);
}

.sd-marquee__track {
	display: flex;
	gap: 44px;
	white-space: nowrap;
	animation: sd-marq 32s linear infinite;
	width: max-content;
}

.sd-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 700;
}

.sd-marquee__item i {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, .2);
	flex: none;
}

/* =========================================================================
   9. Колекції та палітра (на кремовому)
   ====================================================================== */

.sd-lines {
	background: var(--cream);
	color: var(--dark);
	padding: clamp(52px, 8vw, 90px) 0 clamp(34px, 5vw, 50px);
}

.sd-lines__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: 22px;
}

.sd-linecard {
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.sd-linecard:hover {
	border-color: rgba(29, 158, 63, .5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .09);
}

.sd-linecard img {
	width: 100%;
	height: clamp(200px, 32vw, 280px);
	object-fit: cover;
	display: block;
	background: #e4e1d8;
}

.sd-linecard__body {
	padding: 26px 28px 30px;
}

.sd-linecard__h {
	font-family: var(--display);
	font-size: 20px;
	font-weight: 700;
	color: var(--dark);
	margin-bottom: 10px;
}

.sd-linecard p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cream-2);
	margin: 0 0 18px;
}

.sd-tagchips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.sd-tagchip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--cream);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 12.5px;
	color: var(--cream-3);
	font-weight: 600;
}

.sd-tagchip i {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .25);
	flex: none;
}

.sd-palette {
	background: var(--cream);
	color: var(--dark);
	padding: 0 0 clamp(52px, 8vw, 90px);
}

.sd-palette__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 34px;
}

.sd-palette__note {
	font-size: 13.5px;
	color: var(--mut-3);
	max-width: 340px;
}

/*
 * 132px, а не 140: фінішів стало вісім, і при 140 у ряд ставало сім, а
 * восьмий звисав окремим рядком під порожнім місцем. Менший мінімум
 * лишає всі вісім в одному ряду на десктопі й так само згортається на
 * вужчих екранах.
 */
.sd-palette__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(132px, 45vw), 1fr));
	gap: clamp(9px, 2vw, 14px);
}

.sd-swatchcard {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.sd-swatchcard:hover {
	transform: translateY(-4px);
	border-color: rgba(29, 158, 63, .55);
}

.sd-swatchcard__fill {
	height: clamp(72px, 14vw, 96px);
}

.sd-swatchcard__body {
	background: #fff;
	padding: 12px 14px;
}

/*
 * Місце під два рядки резервуємо завжди. «Матовий алюміній» у колонку
 * 132px не влазить в один рядок, і без цього рядок карток ставав на
 * висоту найдовшої назви — у сусідів під підписом зависала порожнеча.
 * Тепер плитка кольору однакова в усіх, а переніс з'їдає зарезервоване.
 */
.sd-swatchcard__name {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.3;
	min-height: 2.6em;
	color: var(--dark);
}

.sd-swatchcard__meta {
	font-size: 11px;
	color: var(--mut-3);
	margin-top: 3px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/*
 * На телефоні картка стає нижчою на третину, і плитка кольору при цьому
 * не зменшується — заради неї сюди й приходять.
 *
 * Економія в підписі. Колонок на телефоні дві, вони вдвічі ширші за
 * десктопні, і найдовша назва — «Матовий алюміній» — вміщається в один
 * рядок. Тобто зарезервовані під переніс два рядки там просто порожні.
 * А «Sedna» перед назвою лінійки повторюється у восьми картках поспіль,
 * і без нього назва з лінійкою стають поруч замість двох рядків.
 */
@media (max-width: 559px) {
	.sd-swatchcard__body {
		padding: 9px 12px;
		display: flex;
		align-items: baseline;
		gap: 8px;
	}

	.sd-swatchcard__name {
		min-height: 0;
		flex: 1;
		min-width: 0;
	}

	.sd-swatchcard__meta {
		margin-top: 0;
		flex: none;
		font-size: 10.5px;
	}

	.sd-swatchcard__meta span {
		display: none;
	}
}

/* =========================================================================
   10. Конфігуратор
   ====================================================================== */

.sd-try__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 24px);
	align-items: start;
}

.sd-try__stage {
	flex: 1 1 420px;
	min-width: 0;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--hair-2);
	position: relative;
}

/*
 * Поки колонки стоять поруч, сцена лишається на екрані.
 *
 * Панель праворуч вища за сцену — палітра, пости, кошторис, кількість,
 * кнопки, — і на невисокому екрані комплект їхав угору саме тоді, коли
 * покупець перебирав кольори й мав його бачити. Нижче 860px колонки
 * складаються одна під одну, і закріплювати нема чого: там сцена й так
 * стоїть першою.
 *
 * Працює це лише тому, що в body стоїть overflow-x: clip, а не hidden
 * (див. коментар угорі) — hidden зробив би зі сторінки скрол-контейнер і
 * вимкнув sticky. І тому, що .sd-try__grid вирівняний по start: при
 * stretch колонка розтягнулась би на всю висоту й липнути було б нічому.
 */
@media (min-width: 860px) {
	.sd-try__stage {
		position: sticky;
		top: calc(var(--header-h) + 16px);
	}
}

/*
 * Сцена, на якій показуємо зібраний комплект. Раніше тут була стіна з
 * вибором кольору — приміряти інтер'єр. Від цього відмовились: колір стіни
 * підбирає дизайнер, а від магазину потрібно інше — зібрати потрібний
 * комплект і покласти в кошик. Лишилось нейтральне предметне тло.
 */
.sd-stage {
	--stage-h: clamp(300px, 44vw, 400px);
	height: var(--stage-h);
	/*
	 * Це <figure>, а браузер дає їй власні поля — 1em згори й знизу, 40px
	 * з боків. Через них кремове тло не діставало до країв картки, і
	 * навколо нього лишалась темна рамка, якої в макеті немає.
	 */
	margin: 0;
	/*
	 * Два рядки: комплект по центру вільного місця, підпис під ним. Раніше
	 * підпис лежав плашкою поверх сцени й на п'яти постах заходив на рамку.
	 * У сітці вони не можуть перетнутись у принципі.
	 */
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	padding: 18px 16px 16px;
	position: relative;
	/*
	 * Кремове тло, а не темне й не біле. На темному зникали чорні фініші —
	 * чорне скло, венге, матове скло, камінь: шість рамок із шістнадцяти
	 * зливались із тлом. На білому так само зникала біла рамка. Світлий
	 * нейтральний тон тримає обидва кінці палітри, і він уже є на сайті —
	 * такий самий у секції калькулятора.
	 */
	background: radial-gradient(120% 90% at 50% 34%, #f2efe6, #ddd9cd 74%);
}

.sd-kit {
	position: relative;
	padding: 13px;
	border-radius: 14px;
	box-shadow: 0 18px 46px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .3);
	display: flex;
	gap: 7px;
	transition: background .3s;
}

/*
 * Комплект справжнім фото: рамку й механізм малює вже сама картинка, тому
 * від блока лишається тільки тінь на стіні — те, чого у знімка на білому
 * фоні немає, і без чого він виглядав би наклейкою.
 */
.sd-kit.is-photo {
	padding: 0;
	box-shadow: none;
	border-radius: 0;
	background: transparent;
}

.sd-kit__photo {
	display: block;
	width: clamp(144px, 36vw, 198px);
	height: auto;
	filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .45));
}

/*
 * Комплект із двох шарів: фото рамки, а поверх отворів — накладки механізму.
 * Так збирається будь-яка комбінація кольорів і постів, бо знімати всі 1280
 * неможливо. Готує картинки kit-build.py, координати отворів — у kit.json.
 */
.sd-kit.is-layer {
	--kit-h: clamp(150px, 26vw, 250px);
	display: block;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	/*
	 * Ширина рахується з висоти, а не навпаки: у серії рамка завжди однакової
	 * висоти, різниться тільки ширина. Тому п'ятипостовий комплект на стіні
	 * справді вп'ятеро ширший за однопостовий, а не підігнаний під одну мірку.
	 * min(94%) — щоб він не виліз за межі стіни на вузькому екрані.
	 */
	aspect-ratio: var(--kit-ar);
	width: min(86%, calc(var(--kit-ar) * var(--kit-h)));
	height: auto;
	/*
	 * Дві тіні, не одна. Дальня дає обʼєм, ближня — контактна, шириною в
	 * піксель — обводить край. Без неї біла рамка на світлому тлі втрачала
	 * контур: видно було клавіші, а де закінчується сама рамка — ні.
	 */
	filter:
		drop-shadow(0 1px 1px rgba(0, 0, 0, .38))
		drop-shadow(0 12px 24px rgba(0, 0, 0, .22));
}

.sd-kit.is-layer .sd-kit__fr {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.sd-kit.is-layer .sd-kit__mc {
	position: absolute;
}

/*
 * Однопостовий намальований комплект підтягуємо до розміру фото: інакше,
 * перемикаючи колір рамки, покупець бачив би, як вимикач стрибає вдвічі.
 * Дво- і більшепостові лишаються як були — інакше п'ять постів не влізли б
 * у стіну.
 */
.sd-kit:not(.is-photo):has(.sd-kit__slot:only-child) .sd-kit__slot {
	width: clamp(126px, 31vw, 172px);
	height: clamp(126px, 31vw, 172px);
}

.sd-kit__slot {
	width: clamp(58px, 15vw, 82px);
	height: clamp(58px, 15vw, 82px);
	border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
	display: grid;
	place-items: center;
	transition: background .3s;
	flex: none;
}

.sd-kit__sw {
	width: 72%;
	height: 72%;
	border-radius: 4px;
	background: linear-gradient(175deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .12) 55%, rgba(0, 0, 0, .2));
}

.sd-kit__sock {
	width: 70%;
	height: 70%;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .24), rgba(0, 0, 0, .16));
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
}

.sd-kit__sock i {
	width: 7px;
	height: 11px;
	border-radius: 3px;
	background: rgba(0, 0, 0, .55);
}

.sd-try__panel {
	flex: 1 1 320px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 24px;
	padding: clamp(18px, 3.5vw, 26px);
}

.sd-try__label {
	font-size: 12px;
	color: var(--mut-2);
	font-weight: 800;
	margin-bottom: 9px;
}

.sd-try__label b {
	color: #edece7;
	font-weight: 800;
}

.sd-try__row {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.sd-try__devs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.sd-try__devs .sd-chip {
	flex: 1;
	border-radius: 12px;
	padding: 11px;
	font-size: 13px;
}

.sd-try__posts {
	display: flex;
	gap: 7px;
	margin-bottom: 22px;
}

.sd-sum {
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	padding: 15px 17px;
	margin-bottom: 18px;
}

.sd-sum__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: var(--mut);
	padding: 3px 0;
}

.sd-sum__row b {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sd-sum__row--last {
	border-bottom: 1px dashed rgba(255, 255, 255, .12);
	padding-bottom: 10px;
}

.sd-sum__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding-top: 10px;
}

.sd-sum__total span {
	font-size: 11.5px;
	color: var(--mut-2);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sd-sum__total b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 21px;
	color: var(--head);
	white-space: nowrap;
}

.sd-sum__sku {
	font-size: 11px;
	color: var(--mut-4);
	margin-top: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.sd-try__actions {
	display: flex;
	gap: 9px;
}

.sd-try__actions .sd-btn--fill {
	flex: 1;
	padding: 14px;
	font-size: 13.5px;
}

.sd-heart {
	background: none;
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--soft);
	border-radius: 999px;
	width: 48px;
	flex: none;
	display: grid;
	place-items: center;
}

.sd-heart:hover,
.sd-heart.is-on {
	border-color: var(--red);
	color: var(--red);
}

/* =========================================================================
   11. Каталог
   ====================================================================== */

/*
 * Фільтри стовпчиком збоку, товари поруч.
 *
 * Рядок фільтрів згори тримав до дюжини значень; на повному асортименті
 * Sedna їх виходить під сорок — тип, колір, клавіші, пости, захист.
 * Стовпчик показує всі одразу й росте вниз, а не витісняє товари з
 * першого екрана.
 */
.sd-catalog {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.sd-side {
	display: flex;
	flex-direction: column;
	gap: 18px;
	position: sticky;
	top: calc(var(--header-h) + 14px);
	/*
	 * Обидві осі задані явно: сам по собі overflow-y вмикає й
	 * overflow-x: auto, і під вузьким сайдбаром з'являлася б смуга
	 * горизонтального скролу на порожньому місці.
	 */
	max-height: calc(100vh - var(--header-h) - 28px);
	overflow: hidden auto;
	scrollbar-width: thin;
}

.sd-side__body {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

/* Ручка, шапка й «Показати N» потрібні лише шиту на телефоні. */
.sd-side__grip,
.sd-side__head,
.sd-side__done {
	display: none;
}

/* --- Плитки розділів --- */

.sd-cats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

/*
 * min-height, а не висота за вмістом: у розділу без зображення категорії
 * плитка виходила вдвічі нижчою за сусідню, і сітка 2×2 стояла сходинками.
 */
.sd-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 10px;
	min-height: 96px;
	background: rgba(20, 24, 26, .55);
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 14px;
	color: var(--mut);
	text-align: left;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.sd-cat:hover {
	border-color: var(--green);
}

.sd-cat.is-on {
	background: rgba(61, 205, 88, .12);
	border-color: rgba(61, 205, 88, .55);
	color: var(--head);
}

.sd-cat__n {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 11px;
	font-weight: 700;
	color: var(--mut-4);
}

.sd-cat.is-on .sd-cat__n {
	color: var(--green);
}

.sd-cat__img {
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}

.sd-cat__name {
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
}

/* --- Блоки фільтрів --- */

.sd-fblocks {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sd-fb {
	background: rgba(20, 24, 26, .55);
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 14px;
}

.sd-fb__h {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 800;
	margin-bottom: 10px;
}

.sd-fb__opts {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.sd-fb .sd-chip {
	padding: 8px 13px;
	font-size: 12px;
	border-color: rgba(255, 255, 255, .14);
}

/*
 * Колір — сітка у два стовпчики з підписами. Сам по собі свотч не
 * називає відтінок: «алюміній» і «матовий алюміній» на 22 пікселях
 * розрізняються гірше, ніж на словах.
 */
.sd-fb__opts--colors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}

.sd-copt {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid var(--hair);
	border-radius: 12px;
	padding: 8px 9px;
	color: var(--mut);
	text-align: left;
	min-width: 0;
}

.sd-copt:hover {
	border-color: var(--green);
}

.sd-copt.is-on {
	background: rgba(61, 205, 88, .12);
	border-color: rgba(61, 205, 88, .55);
	color: #eafaee;
}

.sd-copt__sw {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, .25);
	flex: none;
}

/*
 * Назва переноситься, а не обрізається. «Чорно-сірий» у 280-піксельному
 * стовпчику ставав «Чорно-сір…», а попереду ще «Матовий алюміній» і
 * «Матове скло» — саме ті назви, де обрізаний хвіст і є відмінністю.
 */
.sd-copt__t {
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1.2;
	min-width: 0;
}

.sd-side__reset {
	background: none;
	border: 1px solid var(--hair-3);
	color: var(--soft);
	border-radius: 999px;
	padding: 10px 14px;
	font-size: 12.5px;
	font-weight: 800;
	flex: none;
}

.sd-side__reset:hover {
	border-color: var(--red);
	color: var(--red);
}

/* --- Права колонка --- */

.sd-main {
	min-width: 0;
}

.sd-main__top {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-bottom: 12px;
}

.sd-main__count {
	flex: none;
	font-size: 12.5px;
	color: var(--mut-2);
	white-space: nowrap;
}

.sd-main__count b {
	color: var(--head);
}

.sd-main__path {
	color: var(--mut-3);
}

/* Кнопка «Фільтри» й пігулки розділів існують лише на телефоні. */
.sd-sheetbtn,
.sd-catpills {
	display: none;
}

/*
 * Телефон: той самий стовпчик стає нижнім шитом.
 *
 * 280px збоку там немає, а ховати фільтри назад у дропдауни означало б
 * повернутися до того, від чого пішли. Шит показує всі блоки одразу й
 * закривається кнопкою з кількістю знайденого — покупець бачить
 * результат ще до того, як закриє фільтри.
 */
@media (max-width: 900px) {
	.sd-catalog {
		display: block;
	}

	/*
	 * Три рядки замість одного: у 390 пікселів пошук, кнопка фільтрів,
	 * розділи й лічильник не стають поруч. Порядок задано order, бо всі
	 * четверо лежать в одному flex-контейнері.
	 */
	.sd-main__top {
		flex-wrap: wrap;
	}

	.sd-catpills {
		order: 3;
		flex-basis: 100%;
		margin-bottom: 0;
	}

	.sd-main__count {
		order: 4;
		flex-basis: 100%;
		white-space: normal;
	}

	.sd-sheetbtn {
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		background: none;
		border: 1px solid var(--hair-3);
		border-radius: 999px;
		padding: 11px 15px;
		font-size: 12.5px;
		font-weight: 800;
		color: var(--soft);
	}

	.sd-sheetbtn.is-on {
		background: var(--green);
		border-color: var(--green);
		color: var(--ink);
	}

	.sd-sheetbtn__n {
		background: var(--ink);
		color: var(--green);
		border-radius: 999px;
		min-width: 18px;
		height: 18px;
		display: inline-grid;
		place-items: center;
		font-size: 10.5px;
		padding: 0 4px;
	}

	.sd-catpills {
		display: flex;
		gap: 6px;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		margin-bottom: 10px;
		padding-bottom: 2px;
	}

	.sd-catpills::-webkit-scrollbar {
		display: none;
	}

	.sd-catpill {
		flex: none;
		background: none;
		border: 1px solid rgba(255, 255, 255, .16);
		border-radius: 999px;
		padding: 8px 14px;
		font-size: 12px;
		font-weight: 800;
		color: var(--soft);
		white-space: nowrap;
	}

	.sd-catpill.is-on {
		background: var(--green);
		border-color: var(--green);
		color: var(--ink);
	}

	.sd-sheetbg {
		position: fixed;
		inset: 0;
		z-index: 119;
		background: rgba(8, 10, 11, .72);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		animation: sd-fade-up .2s both;
	}

	.sd-side {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: auto;
		z-index: 120;
		max-height: 82vh;
		gap: 12px;
		background: var(--panel);
		border-top: 1px solid rgba(61, 205, 88, .3);
		border-radius: 24px 24px 0 0;
		padding: 14px 16px calc(16px + env(safe-area-inset-bottom));
		overflow: hidden;
		/*
		 * visibility, а не сам лише transform: зсунутий за екран шит
		 * лишається у фокусній послідовності, і Tab із поля пошуку йшов
		 * у невидимі фільтри.
		 */
		visibility: hidden;
		transform: translateY(101%);
		transition: transform .24s ease, visibility .24s ease;
	}

	.sd-catalog.is-sheet .sd-side {
		visibility: visible;
		transform: none;
	}

	.sd-side__grip {
		display: block;
		width: 42px;
		height: 4px;
		border-radius: 99px;
		background: rgba(255, 255, 255, .18);
		margin: 0 auto;
		flex: none;
	}

	.sd-side__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: none;
	}

	.sd-side__title {
		font-family: var(--display);
		font-size: 14px;
		font-weight: 700;
		color: var(--head);
	}

	.sd-side__clear {
		background: none;
		border: none;
		color: var(--mut-2);
		font-size: 12px;
		font-weight: 800;
		text-decoration: underline;
		padding: 0;
	}

	.sd-side__clear:hover {
		color: var(--red);
	}

	.sd-side__body {
		flex: 1;
		min-height: 0;
		overflow: hidden auto;
		gap: 16px;
		padding-bottom: 4px;
	}

	.sd-side__reset {
		display: none;
	}

	.sd-side__done {
		display: block;
		flex: none;
		background: var(--green);
		color: var(--ink);
		border: none;
		border-radius: 999px;
		padding: 15px;
		font-size: 14px;
		font-weight: 800;
	}

	/* У шиті плитка лежить рядком: вертикальна з'їдала б висоту, якої там і так обмаль. */
	.sd-cat {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 9px;
		border-radius: 12px;
		padding: 8px 10px;
		min-height: 0;
	}

	/*
	 * order, а не margin-left: у розмітці лічильник стоїть першим — на
	 * десктопі він абсолютний і місце в потоці не має значення. У шиті
	 * потік звичайний, і без цього число вилазило перед фото.
	 */
	.sd-cat__n {
		position: static;
		order: 3;
	}

	.sd-cat__img {
		width: 30px;
		height: 30px;
	}

	.sd-cat__name {
		flex: 1;
		min-width: 0;
		font-size: 12.5px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.sd-nores {
	background: var(--panel);
	border: 1px dashed rgba(255, 255, 255, .15);
	border-radius: 18px;
	padding: 44px 24px;
	text-align: center;
}

.sd-nores__h {
	font-size: 14.5px;
	font-weight: 800;
	color: #edece7;
	margin-bottom: 6px;
}

.sd-nores__p {
	font-size: 13px;
	color: var(--mut-2);
	margin-bottom: 18px;
}

.sd-cards {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(240px, calc(50% - 6px)), 1fr));
	gap: clamp(10px, 2.5vw, 18px);
}

.sd-card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* Уся картка відкриває товар — тому й курсор, і підйом на наведенні. */
.sd-card {
	cursor: pointer;
}

.sd-card:hover {
	border-color: rgba(61, 205, 88, .45);
	transform: translateY(-4px);
}

.sd-card__media {
	position: relative;
	height: clamp(160px, 42vw, 190px);
	background: linear-gradient(160deg, #3a4145, #272c2f);
	display: grid;
	place-items: center;
	border: none;
	width: 100%;
	padding: 0;
	transition: background .3s ease;
}

.sd-card__media:hover {
	background: linear-gradient(160deg, #454d52, #2c3235);
}

.sd-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	/*
	 * Без z-index позначку накривало фото товару: воно теж absolute і стоїть
	 * у розмітці нижче. З-під нього визирав лише темний ріжок — і читався як
	 * дефект картинки. Те саме число, що й у кнопки «в бажане» поруч.
	 */
	z-index: 2;
	background: rgba(14, 17, 18, .85);
	border: 1px solid rgba(61, 205, 88, .4);
	color: var(--green);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	border-radius: 999px;
	padding: 5px 11px;
}

.sd-card__body {
	padding: clamp(12px, 3vw, 16px) clamp(12px, 3vw, 18px) clamp(14px, 3vw, 18px);
	display: flex;
	flex-direction: column;
	flex: 1;
}

/*
 * Назва плюс код — блок сталої висоти. Назви бувають в один рядок і в
 * три, і без цього свотчі з цінами в сусідніх картках стояли на різній
 * висоті: ряд читався як нерівний, хоча картки однакові.
 */
.sd-card__head {
	min-height: clamp(46px, 12vw, 52px);
}

.sd-card__name {
	font-size: clamp(13px, 3.4vw, 14.5px);
	font-weight: 800;
	color: #edece7;
	line-height: 1.3;
}

.sd-card__art {
	font-size: clamp(12px, 3vw, 12.5px);
	font-weight: 400;
	color: var(--mut-2);
	line-height: 1.3;
	margin-top: 3px;
}

/* Так само, як у картці товару: підпис приглушений, сам код видно. */
.sd-card__art code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: inherit;
	color: var(--soft);
}

.sd-card__sub {
	font-size: clamp(11px, 2.9vw, 12px);
	color: var(--mut-2);
	margin: 4px 0 10px;
	line-height: 1.35;
}

/*
 * Переносимо: у рамках відтінків до десяти, і в один рядок вони не
 * стають. Відступ згори — щоб свотчі не злипались із кодом товару:
 * назва, код і кольори читались одним суцільним стовпчиком тексту.
 */
.sd-card__dots {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 12px 0 14px;
	flex-wrap: wrap;
}

.sd-card__dots i,
.sd-card__dot {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1.5px solid rgba(255, 255, 255, .25);
	flex: none;
}

/* Підпис обраного відтінку: свотч показує колір, але не називає його. */
.sd-card__cname {
	margin-left: 3px;
	font-size: 11px;
	color: var(--mut-2);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Кружечок — кнопка вибору кольору, тому має явний стан і зону натискання. */
.sd-card__dot {
	padding: 0;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.sd-card__dot:hover {
	transform: scale(1.18);
	border-color: rgba(255, 255, 255, .55);
}

.sd-card__dot.is-on {
	border-color: var(--green);
	box-shadow: 0 0 0 2px rgba(61, 205, 88, .28);
}

.sd-card__dot:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.sd-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
}

.sd-card__price {
	font-family: var(--display);
	font-size: clamp(14px, 3.6vw, 17px);
	color: var(--head);
	white-space: nowrap;
}

.sd-card__actions {
	display: flex;
	gap: 7px;
}

.sd-card__wish {
	background: none;
	border: 1px solid var(--hair-3);
	color: var(--mut-2);
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
}

.sd-card__wish:hover,
.sd-card__wish.is-on {
	border-color: var(--red);
	color: var(--red);
}

.sd-card__wish.is-on svg {
	fill: currentColor;
}

.sd-card__more {
	background: none;
	border: 1px solid var(--green);
	color: var(--green);
	border-radius: 10px;
	padding: 0 15px;
	height: 36px;
	font-size: 12.5px;
	font-weight: 800;
}

.sd-card__more:hover {
	background: var(--green);
	color: var(--ink);
}

.sd-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
}

.sd-more__track {
	width: min(220px, 60%);
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .09);
	overflow: hidden;
}

.sd-more__fill {
	height: 100%;
	width: 0;
	background: var(--green);
	border-radius: 99px;
	transition: width .35s ease;
}

.sd-more__info {
	font-size: 12.5px;
	color: var(--mut-3);
	text-align: center;
}

.sd-alldone {
	display: flex;
	justify-content: center;
	gap: 14px;
	align-items: center;
	margin-top: 26px;
	flex-wrap: wrap;
}

.sd-alldone span {
	font-size: 12.5px;
	color: var(--mut-3);
}

.sd-collapse {
	background: none;
	color: var(--mut-2);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 12.5px;
	font-weight: 800;
}

.sd-collapse:hover {
	border-color: var(--green);
	color: var(--green);
}

/* Банер «не знаєте скільки точок» */
.sd-cta {
	margin-top: 34px;
	display: flex;
	gap: 16px;
	align-items: center;
	background: var(--panel);
	border: 1px solid rgba(61, 205, 88, .25);
	border-radius: 18px;
	padding: 20px 24px;
	flex-wrap: wrap;
}

.sd-cta__icon {
	flex: none;
	color: var(--green);
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(61, 205, 88, .1);
	display: grid;
	place-items: center;
}

.sd-cta__body {
	flex: 1;
	min-width: 240px;
}

.sd-cta__h {
	font-size: 14.5px;
	font-weight: 800;
	color: #edece7;
}

.sd-cta__p {
	font-size: 13px;
	color: var(--mut-2);
	margin-top: 3px;
	line-height: 1.5;
}

/*
 * На телефоні кнопка все одно переноситься під текст, і там вона стояла
 * притиснутою до лівого краю з великою порожнечею праворуч.
 *
 * Власний рядок задаємо явно (flex-basis 100%), а не покладаємось на те,
 * що вона перенесеться сама: напис у кнопці редагується в адмінці, і від
 * його довжини залежить, на якій ширині стається переніс. Ширину при
 * цьому лишаємо по вмісту — просили по центру, а не на всю ширину.
 */
@media (max-width: 619px) {
	.sd-cta .sd-btn {
		flex: 1 0 100%;
		max-width: max-content;
		margin: 2px auto 0;
	}
}

/* =========================================================================
   12. Калькулятор
   ====================================================================== */

.sd-calc__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 24px);
	align-items: start;
}

.sd-calc__rooms {
	flex: 1 1 430px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sd-room {
	display: flex;
	gap: 16px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 16px;
	padding: 15px 20px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

/* Назва тягнеться, лічильники лишаються компактними праворуч. */
.sd-room__name {
	flex: 1 1 60px;
	min-width: 0;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--dark);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sd-room__step {
	flex: none;
	display: flex;
	align-items: center;
	gap: 9px;
}

.sd-room__step > span:first-child {
	font-size: 12px;
	font-weight: 800;
	color: var(--mut-2);
	flex: none;
}

.sd-room__step button {
	background: var(--cream);
	border: 1px solid rgba(0, 0, 0, .14);
	color: var(--cream-3);
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 14px;
	flex: none;
	line-height: 1;
	padding: 0;
}

.sd-room__step button:hover:not(:disabled) {
	border-color: var(--green-d);
	color: var(--green-d);
}

/* «−» на нулі: кнопка лишається на місці, щоб ряд не стрибав, але видно, що вона не діє. */
.sd-room__step button:disabled {
	opacity: .38;
	cursor: default;
}

.sd-room__n {
	font-size: 15px;
	font-weight: 800;
	min-width: 18px;
	text-align: center;
	color: var(--dark);
}

/* З'являється лише коли є що чистити — див. renderCalculator(). */
.sd-calc__reset {
	align-self: flex-end;
	background: none;
	border: 0;
	padding: 4px 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--mut-3);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sd-calc__reset:hover {
	color: var(--green-d);
}

.sd-calc__hint {
	font-size: 12px;
	color: var(--mut-3);
	line-height: 1.55;
	margin-top: 4px;
}

.sd-calc__sum {
	flex: 1 1 300px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 22px;
	padding: clamp(18px, 3.5vw, 26px);
	position: sticky;
	top: calc(var(--header-h) + 18px);
}

.sd-calc__h {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-2);
	font-weight: 800;
	margin-bottom: 16px;
}

.sd-calc__fin {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 12px;
	padding: 10px 14px;
	margin-bottom: 14px;
}

.sd-calc__fin i {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .2);
	flex: none;
}

.sd-calc__fin span {
	font-size: 12px;
	color: var(--mut);
	flex: 1;
	line-height: 1.4;
}

.sd-calc__fin a {
	font-size: 11.5px;
	font-weight: 800;
	flex: none;
}

/*
 * Скільки точок вийшло. Саме цим числом міряють роботу електрики й ним
 * оперує гуртова заявка, тому воно стоїть окремо, а не тільки всередині
 * ціни рамок.
 */
.sd-calc__pts {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px 0 12px;
	border-top: 1px solid var(--hair-2);
	margin-top: 16px;
}

.sd-calc__pts b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 24px;
	color: var(--head);
	font-variant-numeric: tabular-nums;
}

.sd-calc__pts span {
	font-size: 13.5px;
	color: var(--soft);
}

.sd-calc__pts i {
	font-style: normal;
	font-size: 12.5px;
	color: var(--mut-3);
	margin-left: auto;
}

.sd-calc__empty {
	font-size: 13px;
	color: var(--mut-3);
	line-height: 1.55;
	padding: 6px 0 14px;
}

/*
 * Три колонки: назва, «скільки × почім», сума рядка. Третя й потрібна
 * найбільше — без неї підсумок доводилось множити в голові.
 */
.sd-calc__line {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: baseline;
	gap: 6px 12px;
	font-size: 13.5px;
	color: var(--mut);
	padding: 5px 0;
}

.sd-calc__line i {
	font-style: normal;
	font-size: 12.5px;
	color: var(--mut-3);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sd-calc__line b {
	font-weight: 400;
	color: var(--soft);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-width: 88px;
	text-align: right;
}

.sd-calc__why {
	font-size: 11.5px;
	color: var(--mut-4);
	line-height: 1.5;
	padding: 2px 0 12px;
	border-bottom: 1px dashed rgba(255, 255, 255, .14);
	margin-bottom: 6px;
}

.sd-calc__line--sub {
	padding-top: 8px;
}

.sd-calc__line--disc {
	color: var(--green);
}

.sd-calc__line--disc i,
.sd-calc__line--disc b {
	color: var(--green);
}

.sd-calc__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 14px 0 6px;
}

.sd-calc__total span {
	font-size: 13px;
	color: var(--mut-2);
}

.sd-calc__total b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 26px;
	color: var(--head);
	white-space: nowrap;
}

.sd-calc__note {
	font-size: 11.5px;
	color: var(--mut-3);
	line-height: 1.55;
	margin-bottom: 18px;
}

.sd-calc__sum .sd-btn {
	padding: 15px;
	font-size: 14px;
}

.sd-calc__sum .sd-btn--ghost {
	padding: 12px;
	font-size: 12.5px;
	margin-top: 9px;
}

/*
 * Порожній калькулятор — тепер звичайний перший екран, і кнопка заявки на
 * ньому неактивна. Загальний стиль .sd-btn[disabled] для цього не годиться:
 * там opacity .6 і cursor progress — на темній панелі зелена кнопка все одно
 * читається як робоча, а курсор «зачекайте» обіцяє відповідь, якої не буде.
 * Тут причина інша: спершу треба ввести точки.
 */
.sd-calc__sum .sd-btn[disabled] {
	opacity: 1;
	background: transparent;
	border-color: var(--hair-2);
	color: var(--mut-3);
	cursor: not-allowed;
}

/* =========================================================================
   13. Три способи, trust-стрічка, bento
   ====================================================================== */

.sd-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: clamp(14px, 2.5vw, 20px);
}

.sd-way {
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 22px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.sd-way--hl {
	border-color: rgba(61, 205, 88, .45);
}

/*
 * Картку не піднімаємо: у макеті реагує лише кнопка всередині.
 * Підйом усієї картки обіцяв би клік, якого тут немає.
 */

.sd-way__tag {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 800;
	margin-bottom: 16px;
}

.sd-way__h {
	font-family: var(--display);
	font-size: 19px;
	font-weight: 700;
	color: var(--head);
	margin-bottom: 12px;
}

.sd-way p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--mut);
	margin: 0 0 20px;
	flex: 1;
}

.sd-way .sd-btn {
	width: fit-content;
	padding: 13px 22px;
	font-size: 13.5px;
}

.sd-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 14px;
}

.sd-trust__card {
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 18px;
	padding: 22px 24px;
	transition: border-color .25s ease, transform .25s ease;
}

.sd-trust__card--hl {
	border-color: rgba(61, 205, 88, .3);
}

.sd-trust__card:hover {
	border-color: rgba(61, 205, 88, .4);
	transform: translateY(-3px);
}

.sd-trust__icon {
	color: var(--green);
	margin-bottom: 12px;
}

.sd-trust__h {
	font-size: 15px;
	font-weight: 800;
	color: #edece7;
}

.sd-trust__p {
	font-size: 12.5px;
	color: var(--mut-2);
	line-height: 1.5;
	margin-top: 5px;
}

/*
 * Галерея — два ряди, знімки тієї самої ширини, що й раніше.
 *
 * Раніше задавалась ширина колонки, а кількість рядів виходила як
 * вийде: девʼять знімків, три з них високі, — це дванадцять клітинок,
 * тобто три ряди по чотири.
 *
 * Спроба втиснути всі девʼять у два ряди дала шість вузьких колонок по
 * 196 пікселів — на такому знімку інтер'єру вже не видно ні вимикача,
 * ні кімнати. Тому ряди фіксовані, ширина клітинки лишилась колишньою,
 * а зайві знімки не показуються: скільки влізло, стільки й видно (див.
 * template-parts/sections/gallery.php). На телефоні карусель гортає всі.
 */
.sd-bento {
	display: grid;
	grid-template-rows: repeat(2, clamp(160px, 26vw, 220px));
	grid-auto-flow: column dense;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
}

.sd-bento__cell {
	border-radius: 20px;
	overflow: hidden;
	background: var(--panel);
}

.sd-bento__cell--tall {
	grid-row: span 2;
}

/* Знімки, що не влізли у два ряди. На телефоні карусель показує всі. */
.sd-bento__cell--over {
	display: none;
}

.sd-bento__cell img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.sd-bento__cell:hover img {
	transform: scale(1.06);
}

/* =========================================================================
   14. Монтаж
   ====================================================================== */

.sd-install {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 50px);
	align-items: center;
}

.sd-install__col {
	flex: 1 1 380px;
	min-width: 0;
}

.sd-install__pt {
	display: flex;
	gap: 16px;
	margin-bottom: 20px;
}

.sd-install__n {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(61, 205, 88, .12);
	border: 1px solid rgba(61, 205, 88, .3);
	display: grid;
	place-items: center;
	color: var(--green);
	font-weight: 800;
	font-size: 14px;
}

.sd-install__t {
	font-size: 15px;
	font-weight: 800;
	color: #edece7;
}

.sd-install__d {
	font-size: 13.5px;
	color: var(--mut-2);
	line-height: 1.55;
	margin-top: 4px;
}

.sd-asm {
	flex: 1 1 380px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 24px;
	overflow: hidden;
}

.sd-asm__media {
	position: relative;
	height: clamp(220px, 44vw, 340px);
}

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

.sd-asm__media img.is-on {
	animation: sd-fade-up .45s both;
}

.sd-asm__step {
	position: absolute;
	top: 14px;
	left: 14px;
	background: rgba(14, 17, 18, .8);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(61, 205, 88, .4);
	color: var(--green);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .1em;
	border-radius: 999px;
	padding: 6px 13px;
}

.sd-asm__body {
	padding: 20px 24px 24px;
}

.sd-asm__t {
	font-size: 15px;
	font-weight: 800;
	color: #edece7;
}

.sd-asm__d {
	font-size: 13px;
	color: var(--mut-2);
	line-height: 1.55;
	margin-top: 5px;
	min-height: 60px;
}

.sd-asm__nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

.sd-asm__prev,
.sd-asm__next {
	width: 38px;
	height: 38px;
	border-radius: 12px;
	font-size: 15px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
}

.sd-asm__prev {
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .14);
	color: var(--soft);
}

.sd-asm__prev:hover {
	border-color: var(--green);
	color: var(--green);
}

.sd-asm__next {
	background: var(--green);
	border: none;
	color: var(--ink);
	font-weight: 800;
}

.sd-asm__next:hover {
	background: var(--green-h);
}

.sd-asm__dots {
	flex: 1;
	display: flex;
	gap: 6px;
}

.sd-asm__dots button {
	flex: 1;
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .15);
	border: none;
	padding: 0;
}

.sd-asm__dots button.is-on {
	background: var(--green);
}

/* =========================================================================
   15. FAQ та SEO-текст
   ====================================================================== */

.sd-faq {
	background: var(--cream);
	color: var(--dark);
	padding: clamp(52px, 8vw, 90px) 0;
}

.sd-faq h2 {
	text-align: center;
	margin-bottom: 34px;
}

.sd-acc {
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 16px;
	margin-bottom: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
	transition: border-color .22s ease, box-shadow .22s ease;
}

.sd-acc:hover {
	border-color: rgba(29, 158, 63, .45);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}

.sd-acc__q {
	width: 100%;
	background: none;
	border: none;
	color: var(--dark);
	font-size: 15px;
	font-weight: 800;
	text-align: left;
	padding: 19px 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}

.sd-acc__q i {
	color: var(--green-d);
	font-size: 18px;
	flex: none;
	font-style: normal;
	line-height: 1;
}

.sd-acc__a {
	padding: 0 22px 20px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--cream-2);
}

.sd-seo {
	color: var(--mut-2);
	font-size: 13.5px;
	line-height: 1.7;
}

.sd-seo h2 {
	font-family: var(--display);
	font-size: 20px;
	color: var(--soft);
	font-weight: 700;
	margin: 0 0 16px;
}

.sd-seo h3 {
	font-size: 15px;
	color: var(--soft);
	font-weight: 800;
	margin: 22px 0 10px;
}

.sd-seo p {
	margin: 0 0 14px;
}

/* =========================================================================
   16. Футер
   ====================================================================== */

.sd-foot {
	border-top: 1px solid rgba(255, 255, 255, .08);
	background: var(--ink-3);
	padding: clamp(40px, 7vw, 60px) 0 34px;
}

.sd-foot__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 30px;
	margin-bottom: 44px;
}

.sd-foot__logo {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 14px;
}

.sd-foot__logo b {
	font-family: var(--display);
	font-weight: 800;
	font-size: 18px;
	color: var(--head);
}

.sd-foot__logo span {
	font-size: 10px;
	color: var(--green);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
}

.sd-foot p {
	font-size: 13px;
	color: var(--mut-2);
	line-height: 1.6;
	margin: 0 0 16px;
	max-width: 280px;
}

.sd-foot__phone {
	font-family: var(--display);
	font-size: 17px;
	font-weight: 700;
	color: var(--head);
}

.sd-foot__hours {
	font-size: 12px;
	color: var(--mut-3);
	margin-top: 4px;
}

/* Соцмережі — список із налаштувань, тому блока може й не бути взагалі. */
.sd-foot__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.sd-foot__socials a {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mut);
	padding: 6px 12px;
	border: 1px solid var(--hair);
	border-radius: 20px;
}

.sd-foot__socials a:hover {
	color: var(--green);
	border-color: var(--green);
}

.sd-foot__h {
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 800;
	margin-bottom: 14px;
}

.sd-foot__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sd-foot__links a {
	font-size: 13.5px;
	color: var(--mut);
	width: fit-content;
}

.sd-foot__links a:hover {
	color: var(--green);
	transform: translateX(4px);
}

.sd-ship {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sd-ship__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--mut);
}

.sd-ship__logo {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: inline-grid;
	place-items: center;
	flex: none;
	font-size: 11px;
	font-weight: 800;
}

/*
 * Завантажений логотип — без плашки й заокруглення: у брендових файлів
 * свій фон і своя форма, а квадрат під ними читався як чужа рамка.
 */
.sd-ship__logo--img {
	background: none;
	border-radius: 0;
	display: block;
}

.sd-ship__logo--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.sd-foot__note {
	font-size: 12px;
	color: var(--mut-3);
	line-height: 1.55;
	margin-top: 14px;
}

.sd-foot__bar {
	border-top: 1px solid var(--hair);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 11.5px;
	color: var(--mut-4);
}

/* Платіжні бейджі */
.sd-paybadges {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	align-items: center;
}

.sd-paybadge {
	border-radius: 8px;
	height: 28px;
	padding: 0 11px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
}

.sd-paybadge--light {
	background: #fff;
	color: var(--dark);
}

.sd-paybadge--dark {
	background: #000;
	border: 1px solid rgba(255, 255, 255, .25);
	color: #fff;
}

.sd-visa {
	font-style: italic;
	font-weight: 900;
	color: #1434CB;
	font-size: 13px;
	letter-spacing: .03em;
}

.sd-mc {
	font-size: 11px;
	color: var(--dark);
}

.sd-gpay {
	color: #5f6368;
}

/* =========================================================================
   17. Модалка товару
   ====================================================================== */

.sd-modal {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(8, 10, 11, .72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(10px, 3vw, 24px);
	overflow: auto;
}

.sd-modal__box {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(18px, 3vw, 26px);
	max-width: 880px;
	width: 100%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	animation: sd-pop-in .35s both;
	position: relative;
}

.sd-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: rgba(14, 17, 18, .8);
	border: 1px solid rgba(255, 255, 255, .15);
	color: var(--soft);
	width: 36px;
	height: 36px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1;
	padding: 0;
}

.sd-modal__close:hover {
	color: var(--red);
	border-color: var(--red);
}

.sd-modal__stage {
	/* Контейнер для стрілок і мініатюр галереї — інакше вони рахують
	   координати від усієї модалки й лягають поверх правої колонки. */
	position: relative;
	flex: 1 1 300px;
	min-width: 0;
	background: linear-gradient(160deg, #3a4145, #23282b);
	display: grid;
	place-items: center;
	padding: clamp(26px, 6vw, 44px);
	min-height: clamp(240px, 50vw, 380px);
}

.sd-modal__side {
	flex: 1 1 340px;
	min-width: 0;
	padding: clamp(22px, 4.5vw, 34px) clamp(18px, 4vw, 34px) clamp(24px, 4vw, 30px);
}

.sd-modal__line {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
	font-weight: 800;
	margin-bottom: 8px;
}

.sd-modal__name {
	font-family: var(--display);
	font-size: 22px;
	font-weight: 700;
	color: var(--head);
	margin-bottom: 6px;
}

.sd-modal__sku {
	font-size: 12.5px;
	color: var(--mut-2);
	margin-bottom: 18px;
}

.sd-modal__sku code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--soft);
}

/*
 * Панель характеристик спливає поверх картки, тому блок у потоці — це
 * лише кнопка. Її висота й лишається в розмітці: розкриття не рухає ні
 * ціну, ні кнопку «Купити».
 */
.sd-modal__specs {
	position: relative;
	margin-bottom: 20px;
}

.sd-modal__specs-sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 14px 18px;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--soft);
	text-align: left;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.sd-modal__specs-sum:hover,
.sd-modal__specs.is-on .sd-modal__specs-sum {
	color: #fff;
	border-color: var(--hair-3);
}

.sd-modal__specs-sum:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.sd-modal__specs-chev {
	flex: none;
	color: var(--mut-2);
	transition: transform .2s;
}

.sd-modal__specs.is-on .sd-modal__specs-chev {
	transform: rotate(180deg);
}

.sd-modal__specs-pop {
	position: absolute;
	z-index: 5;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	/* Робоче значення ставить JS: воно залежить від місця всередині картки. */
	max-height: min(56vh, 420px);
	overflow: hidden auto;
	overscroll-behavior: contain;
	padding: 14px 18px;
	background: var(--panel-2);
	border: 1px solid var(--hair-3);
	border-radius: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
	animation: sd-specs-in .16s ease-out;
}

/* Знизу не влазить — розкриваємо вгору (клас ставить JS за реальною висотою). */
.sd-modal__specs.is-up .sd-modal__specs-pop {
	top: auto;
	bottom: calc(100% + 8px);
}

.sd-modal__specs-list {
	margin: 0;
}

@keyframes sd-specs-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-modal__specs-chev {
		transition: none;
	}

	.sd-modal__specs-pop {
		animation: none;
	}
}

.sd-modal__spec {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 12.5px;
	padding: 4px 0;
}

.sd-modal__spec dt {
	color: var(--mut-2);
	margin: 0;
}

.sd-modal__spec dd {
	color: var(--soft);
	font-weight: 700;
	text-align: right;
	margin: 0;
}

.sd-modal__buy {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.sd-modal__price {
	font-family: var(--display);
	font-size: 24px;
	color: var(--head);
	white-space: nowrap;
}

.sd-modal__actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.sd-modal__actions .sd-btn--fill {
	flex: 1;
	min-width: 170px;
	padding: 15px 24px;
	font-size: 14px;
}

.sd-modal__wish {
	background: none;
	border: 1px solid rgba(255, 255, 255, .2);
	color: var(--soft);
	border-radius: 999px;
	flex: none;
	width: 52px;
	height: 52px;
	padding: 0;
	display: grid;
	place-items: center;
}

.sd-modal__wish:hover,
.sd-modal__wish.is-on {
	border-color: var(--red);
	color: var(--red);
}

.sd-modal__wish.is-on svg {
	fill: currentColor;
}

.sd-modal__bulk {
	font-size: 12px;
	color: var(--mut-3);
	margin-top: 14px;
	line-height: 1.5;
}

/* =========================================================================
   18. Нагору та тост
   ====================================================================== */

.sd-top {
	position: fixed;
	bottom: 26px;
	right: 26px;
	z-index: 80;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--green);
	border: none;
	color: var(--ink);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 30px rgba(61, 205, 88, .4);
	animation: sd-pop-in .3s both;
	padding: 0;
}

.sd-top:hover {
	background: var(--green-h);
	transform: translateY(-3px);
}

.sd-toast {
	position: fixed;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	background: var(--panel-3);
	border: 1px solid rgba(61, 205, 88, .5);
	color: #edece7;
	font-size: 13.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 13px 24px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
	animation: sd-pop-in .3s both;
	max-width: calc(100vw - 32px);
	text-align: center;
}

/* =========================================================================
   19. Екрани: список бажань, кошик, оформлення, подяка, опт
   ====================================================================== */

.sd-page {
	padding: clamp(28px, 6vw, 56px) var(--pad) clamp(56px, 9vw, 90px);
	animation: sd-fade-up .5s both;
}

.sd-page h1 {
	font-family: var(--display);
	font-size: clamp(23px, 4.6vw, 32px);
	font-weight: 700;
	margin: 18px 0 8px;
	color: var(--head);
	line-height: 1.15;
}

.sd-page__lead {
	font-size: 14px;
	color: var(--mut-2);
	margin: 0 0 30px;
}

.sd-cols {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(18px, 3vw, 26px);
	align-items: start;
}

.sd-cols__main {
	flex: 1 1 440px;
	min-width: 0;
}

.sd-cols__side {
	flex: 1 1 290px;
	min-width: 0;
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 20px;
	padding: clamp(18px, 3.5vw, 26px);
	position: sticky;
	top: calc(var(--header-h) + 18px);
}

.sd-cols__h {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-2);
	font-weight: 800;
	margin-bottom: 18px;
}

/* Рядок позиції (кошик, бажане) */
.sd-line {
	display: flex;
	gap: 16px;
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 16px 18px;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	transition: border-color .22s ease, background .22s ease;
}

.sd-line:hover {
	border-color: rgba(61, 205, 88, .3);
	background: #171c1e;
}

.sd-line__thumb {
	width: 54px;
	height: 54px;
	border-radius: 12px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .15);
}

/*
 * Комплект у плитці — та сама рамка з накладками, що й на сцені, тільки
 * маленька. Рамка на п'ять постів удвічі ширша за квадрат плитки, тому
 * вписуємо її по ширині й центруємо.
 *
 * Тла немає: шари вирізані, і комплект лежить просто на темному — так він
 * виглядає предметом, а не наклейкою на світлому квадраті. Ні рамки, ні
 * внутрішнього обідка теж не лишаємо: вони обводили б порожнечу навколо
 * вирізаного силуету.
 */
.sd-line__thumb.has-kit,
.sd-addpop__thumb.has-kit,
.sd-cosum__pic.has-kit {
	display: grid;
	place-items: center;
	padding: 3px;
	background: none;
	border-color: transparent;
	box-shadow: none;
}

.sd-kitmini {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: var(--kit-ar);
	/*
	 * Підсвітка по контуру, а не тінь. Шість фінішів із шістнадцяти темні —
	 * чорне скло, венге, матове скло, камінь, бетон, чорно-сірий, — і без
	 * неї від них лишались тільки світлі клавіші, що висять у порожнечі.
	 * Пробував ще м'яку пляму позаду: на темному вона читається як засвітка,
	 * ніби картинка підтікає, а не як підсвічений предмет.
	 */
	filter:
		drop-shadow(0 0 1px rgba(255, 255, 255, .45))
		drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}

.sd-kitmini img:first-child {
	width: 100%;
	height: 100%;
	display: block;
}

.sd-kitmini img + img {
	position: absolute;
}

.sd-line__body {
	flex: 1;
	min-width: 180px;
}

.sd-line__title {
	font-size: 14.5px;
	font-weight: 800;
	color: #edece7;
}

.sd-line__sub {
	font-size: 12px;
	color: var(--mut-2);
	margin-top: 3px;
}

/*
 * Артикули позиції — найтихіший рівень рядка. Моноширинним, бо це коди:
 * їх не читають, а звіряють із накладною, і однакова ширина цифр робить
 * це швидше. У комплекті їх два — стільки ж посилок доїде до покупця.
 */
.sd-line__codes {
	margin-top: 5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	letter-spacing: .01em;
	color: var(--mut-3, var(--mut-2));
	opacity: .85;
}

.sd-line__price {
	font-family: var(--display);
	font-size: 16px;
	color: var(--head);
	min-width: 88px;
	text-align: right;
	white-space: nowrap;
}

.sd-note {
	background: rgba(61, 205, 88, .06);
	border: 1px solid rgba(61, 205, 88, .2);
	border-radius: 14px;
	padding: 15px 18px;
	font-size: 13px;
	color: var(--mut);
	line-height: 1.55;
}

.sd-note svg {
	vertical-align: -2px;
	margin-right: 6px;
	color: var(--green);
}

.sd-srow {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
	color: var(--mut);
	padding: 5px 0;
}

.sd-srow--last {
	border-bottom: 1px dashed rgba(255, 255, 255, .14);
	padding-bottom: 14px;
}

.sd-stotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 16px 0 8px;
}

.sd-stotal span {
	font-size: 13px;
	color: var(--mut-2);
}

.sd-stotal b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 26px;
	color: var(--head);
	white-space: nowrap;
}

.sd-freebar {
	margin: 8px 0 4px;
}

.sd-freebar__track {
	height: 6px;
	border-radius: 99px;
	background: var(--ink);
	overflow: hidden;
}

.sd-freebar__fill {
	height: 100%;
	width: 0;
	background: var(--green);
	border-radius: 99px;
	transition: width .4s;
}

.sd-freebar__note {
	font-size: 11.5px;
	color: var(--mut-2);
	margin-top: 6px;
}

.sd-cols__side .sd-btn {
	padding: 16px;
	font-size: 15px;
	margin-top: 16px;
}

.sd-cols__side .sd-btn--ghost {
	padding: 13px;
	font-size: 13px;
	margin-top: 10px;
}

/* Кроки оформлення */
.sd-steps {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.sd-step {
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 20px;
	padding: clamp(18px, 3.5vw, 26px);
}

.sd-step__head {
	display: flex;
	gap: 13px;
	align-items: center;
	margin-bottom: 20px;
}

.sd-step__n {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: rgba(61, 205, 88, .14);
	border: 1px solid rgba(61, 205, 88, .35);
	color: var(--green);
	font-weight: 800;
	font-size: 13px;
	display: grid;
	place-items: center;
	flex: none;
}

.sd-step__t {
	font-size: 16px;
	font-weight: 800;
	color: #edece7;
}

.sd-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
	gap: 12px;
}

.sd-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
	gap: 12px;
}

.sd-span2 {
	grid-column: 1 / -1;
}

/* Опція доставки / оплати */
.sd-opt {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--ink);
	border: 1px solid var(--hair-2);
	border-radius: 14px;
	padding: 14px 16px;
	text-align: left;
	width: 100%;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.sd-opt:hover {
	border-color: rgba(61, 205, 88, .5);
	transform: translateX(3px);
}

.sd-opt.is-on {
	background: rgba(61, 205, 88, .08);
	border-color: rgba(61, 205, 88, .55);
}

.sd-opts {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sd-opt__logo {
	flex: none;
	width: 44px;
	height: 28px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	text-align: center;
	line-height: 1.1;
}

.sd-opt__icon {
	flex: none;
	color: var(--green);
	width: 36px;
	height: 36px;
	border-radius: 11px;
	background: rgba(61, 205, 88, .1);
	display: grid;
	place-items: center;
}

.sd-opt__body {
	flex: 1;
}

.sd-opt__name {
	display: block;
	font-size: 14px;
	font-weight: 800;
	color: #edece7;
}

.sd-opt__desc {
	display: block;
	font-size: 12px;
	color: var(--mut-2);
	margin-top: 2px;
}

.sd-opt__price {
	font-size: 13px;
	font-weight: 800;
	color: var(--soft);
	flex: none;
	white-space: nowrap;
}

.sd-opt__price.is-free {
	color: var(--green);
}

.sd-step__hint {
	font-size: 12px;
	color: var(--mut-3);
	margin-top: 12px;
	line-height: 1.5;
}

/* Промокод */
.sd-promobox {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
	background: rgba(61, 205, 88, .07);
	border: 1px dashed rgba(61, 205, 88, .35);
	border-radius: 12px;
	padding: 12px 15px;
	flex-wrap: wrap;
}

.sd-promobox input {
	flex: 1;
	min-width: 150px;
	border-radius: 10px;
	padding: 11px 14px;
	font-size: 13.5px;
	text-transform: uppercase;
}

.sd-promobox__msg {
	font-size: 12.5px;
	font-weight: 800;
	color: var(--mut-3);
	max-width: 210px;
	line-height: 1.4;
}

.sd-promobox__msg.is-ok {
	color: var(--green);
}

.sd-promobox__msg.is-bad {
	color: var(--red-soft);
}

/* Підсумок оформлення */
.sd-cosum__row {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 7px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, .08);
}

/*
 * Класом, а не за тегом. Селектор .sd-cosum__row i чіпляв і плитку, і
 * будь-який <i> усередині рядка — коли фініші поїхали окремим рядком у
 * тому ж тезі, текст отримав рамку 26×26 і поліз за її межі.
 */
.sd-cosum__pic {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .15);
}

/*
 * Позиція у зведенні: назва, під нею фініші, збоку кількість. Раніше все
 * це йшло одним рядком через крапки, і комплект читався як мішанина.
 */
.sd-cosum__txt {
	flex: 1;
	min-width: 0;
	display: grid;
	/* minmax(0), інакше колонка росте під найдовшу назву й виїжджає з рядка. */
	grid-template-columns: minmax(0, 1fr);
	gap: 1px;
	line-height: 1.35;
}

.sd-cosum__txt b {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--soft);
}

.sd-cosum__txt i {
	font-style: normal;
	font-size: 11.5px;
	color: var(--mut-2);
}

.sd-cosum__qty {
	flex: none;
	font-size: 12px;
	color: var(--mut-2);
	font-variant-numeric: tabular-nums;
}

/*
 * Класом, а не за тегом — з тієї ж причини, що й плитка вище. Правило
 * .sd-cosum__row b діставало й назву позиції, а разом із ним і
 * white-space: nowrap: довга назва не переносилась і налазила на «× 1».
 */
.sd-cosum__price {
	font-size: 12.5px;
	font-weight: 800;
	color: #edece7;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sd-cosum__disc {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--green);
	padding: 12px 0 0;
	font-weight: 800;
	gap: 12px;
}

.sd-cosum__ship {
	display: flex;
	justify-content: space-between;
	font-size: 13.5px;
	color: var(--mut);
	padding: 12px 0 4px;
	gap: 12px;
}

.sd-cosum__ship b {
	font-weight: 800;
	color: var(--soft);
}

.sd-cosum__ship b.is-free {
	color: var(--green);
}

.sd-cosum__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 10px 0 16px;
	gap: 12px;
}

.sd-cosum__total span {
	font-size: 13px;
	color: var(--mut-2);
}

.sd-cosum__total b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 26px;
	color: var(--head);
	white-space: nowrap;
}

.sd-legalnote {
	font-size: 11.5px;
	color: var(--mut-3);
	line-height: 1.55;
	margin-top: 12px;
}

.sd-legalnote a {
	text-decoration: underline;
	text-decoration-color: rgba(61, 205, 88, .35);
	text-underline-offset: 3px;
}

/* Подяка */
.sd-done {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(52px, 10vw, 90px) var(--pad);
	text-align: center;
	animation: sd-fade-up .5s both;
}

.sd-done__tick {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(61, 205, 88, .14);
	border: 1px solid rgba(61, 205, 88, .4);
	display: grid;
	place-items: center;
	font-size: 36px;
	margin: 0 auto 26px;
	color: var(--green);
}

.sd-done h1 {
	font-family: var(--display);
	font-size: clamp(22px, 4.4vw, 30px);
	font-weight: 700;
	margin: 0 0 12px;
	color: var(--head);
}

.sd-done p {
	font-size: 15px;
	color: var(--mut);
	line-height: 1.65;
	margin: 0 0 10px;
}

.sd-done__ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	color: var(--green);
	margin-bottom: 34px;
}

/* Гуртова заявка */
/*
 * Сітка, а не flex-wrap: блоки треба розкладати по місцях, а не просто
 * ставити в рядок. У розмітці вони йдуть у порядку, потрібному телефону —
 * заголовок із телефоном, форма, «чому ми» — і в один стовпчик складаються
 * саме так. На широкому екрані сітка забирає «чому ми» назад під заголовок,
 * у ліву колонку, а форма стає праворуч на всю висоту.
 */
.sd-bulk {
	display: grid;
	gap: clamp(24px, 4vw, 44px);
	margin-top: 22px;
	align-items: start;
}

/*
 * 780px — там, де двом колонкам (340 + 360 + проміжок) уперше вистачає
 * місця в обгортці sd-wrap--md. Саме на цій ширині макет ламався й до
 * переходу на сітку, тому на широких екранах нічого не змінилось.
 */
@media (min-width: 780px) {
	.sd-bulk {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.sd-bulk__col {
		grid-area: 1 / 1;
	}

	.sd-bulk__why {
		grid-area: 2 / 1;
	}

	.sd-bulk__form {
		grid-area: 1 / 2 / span 2 / 3;
	}
}

.sd-bulk__col {
	min-width: 0;
}

/* Останній пункт не додає відступу — його дає проміжок сітки. */
.sd-bulk__why > .sd-bulk__pt:last-child {
	margin-bottom: 0;
}

.sd-bulk__lead {
	font-size: 15px;
	color: var(--mut);
	line-height: 1.65;
	margin: 0 0 30px;
}

.sd-bulk__pt {
	display: flex;
	gap: 14px;
	margin-bottom: 18px;
}

.sd-bulk__pt > span {
	flex: none;
	color: var(--green);
	font-size: 17px;
	line-height: 1.4;
}

.sd-bulk__t {
	font-size: 14.5px;
	font-weight: 800;
	color: #edece7;
}

.sd-bulk__d {
	font-size: 13px;
	color: var(--mut-2);
	margin-top: 3px;
	line-height: 1.55;
}

.sd-bulk__phone {
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 16px;
	padding: 18px 20px;
	margin-top: 26px;
	display: flex;
	gap: 14px;
	align-items: center;
}

.sd-bulk__phone > span {
	flex: none;
	color: var(--green);
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(61, 205, 88, .1);
	display: grid;
	place-items: center;
}

.sd-bulk__form {
	min-width: 0;
	background: var(--panel);
	border: 1px solid rgba(61, 205, 88, .25);
	border-radius: 24px;
	padding: clamp(20px, 4vw, 32px);
}

.sd-bulk__form h2 {
	font-size: 17px;
	font-weight: 800;
	color: #edece7;
	margin: 0 0 4px;
}

.sd-bulk__form > p {
	font-size: 12.5px;
	color: var(--mut-2);
	margin: 0 0 22px;
}

.sd-bulk__fields {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sd-range__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	color: var(--mut-2);
	font-weight: 800;
	margin-bottom: 8px;
}

.sd-range__head b {
	color: var(--green);
}

.sd-check {
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 12.5px;
	color: var(--mut);
}

.sd-check input {
	width: 16px;
	height: 16px;
	flex: none;
}

/* -------------------------------------------------------------------------
   Перевірка замовлення

   Два стани на одній адресі: форма (з поясненням, де взяти номер) і
   знайдене замовлення. Обидва живуть у звичайному потоці сторінки —
   ніякого перемикання вкладок, бо між ними йде перезавантаження.
   ---------------------------------------------------------------------- */

.sd-track__lead {
	max-width: 600px;
}

.sd-track__top {
	display: grid;
	gap: clamp(16px, 3vw, 24px);
	align-items: start;
}

@media (min-width: 860px) {
	.sd-track__top {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	}
}

.sd-track__form {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 22px;
	padding: clamp(20px, 4vw, 30px);
}

.sd-track__label {
	display: block;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--soft);
	margin-bottom: 8px;
}

.sd-track__label + .sd-input {
	margin-bottom: 0;
}

.sd-track__hint {
	font-size: 12px;
	color: var(--mut-3);
	line-height: 1.5;
	margin: 7px 0 20px;
}

.sd-track__go {
	margin-top: 4px;
	padding: 16px;
	font-size: 15px;
}

.sd-track__go[disabled] {
	background: var(--panel-3);
	color: var(--mut-4);
	cursor: not-allowed;
}

.sd-track__form .sd-input[disabled] {
	opacity: .5;
}

/* Помилка пошуку. Текст один на всі випадки — див. sedna_track_lookup(). */
.sd-track__alert {
	display: flex;
	gap: 12px;
	background: rgba(224, 72, 63, .09);
	border: 1px solid rgba(224, 72, 63, .38);
	border-radius: 14px;
	padding: 14px 16px;
	margin-bottom: 22px;
}

.sd-track__alert > span {
	color: var(--red);
	flex: none;
	line-height: 1;
	margin-top: 2px;
}

.sd-track__alert-h {
	font-size: 14px;
	font-weight: 800;
	color: #f0dedc;
	line-height: 1.45;
}

.sd-track__alert-p {
	font-size: 13px;
	color: var(--mut);
	line-height: 1.55;
	margin-top: 5px;
}

.sd-track__lock {
	margin-top: 18px;
	background: rgba(197, 140, 20, .08);
	border: 1px solid rgba(197, 140, 20, .35);
	border-radius: 14px;
	padding: 14px 16px;
}

.sd-track__lock-h {
	font-size: 13.5px;
	font-weight: 800;
	color: #e8c46a;
	margin-bottom: 5px;
}

.sd-track__lock-p {
	font-size: 13px;
	color: var(--mut);
	line-height: 1.6;
}

.sd-track__lock-p b {
	color: var(--soft);
}

.sd-track__aside {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sd-track__side {
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 18px;
	padding: 20px 22px;
}

.sd-track__side--call {
	border-color: rgba(61, 205, 88, .28);
}

.sd-track__side-h {
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-4);
	font-weight: 800;
	margin-bottom: 12px;
}

.sd-track__side-t {
	font-size: 13.5px;
	font-weight: 800;
	color: var(--head);
	margin-bottom: 6px;
}

.sd-track__side-p {
	font-size: 13px;
	color: var(--mut-2);
	line-height: 1.6;
	margin-bottom: 14px;
}

.sd-track__steps-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sd-track__where {
	display: flex;
	gap: 11px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mut);
}

.sd-track__where > span:first-child {
	color: var(--green);
	font-weight: 800;
	flex: none;
}

.sd-track__side-note {
	font-size: 12.5px;
	color: var(--mut-3);
	line-height: 1.55;
	margin-top: 14px;
}

.sd-track__side > .sd-track__steps-list + .sd-track__side-note {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding-top: 14px;
	margin-top: 16px;
}

.sd-track__side-note b {
	color: var(--soft);
}

/* Знайдене замовлення */

.sd-track__again {
	margin-bottom: 18px;
}

.sd-track__card {
	background: var(--panel);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 22px;
	overflow: hidden;
}

.sd-track__card.is-stopped {
	border-color: rgba(224, 72, 63, .3);
}

.sd-track__head {
	padding: clamp(20px, 4vw, 30px);
	border-bottom: 1px solid var(--hair);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	flex-wrap: wrap;
}

.sd-track__num {
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-4);
	font-weight: 800;
	margin-bottom: 9px;
}

.sd-track__status {
	font-family: var(--display);
	font-size: clamp(22px, 5vw, 32px);
	font-weight: 700;
	line-height: 1.15;
}

.sd-track__note {
	font-size: 13.5px;
	color: var(--mut-2);
	line-height: 1.55;
	margin-top: 9px;
	max-width: 420px;
}

/* Кнопка «Оплатити» біля заголовка — поки замовлення чекає на гроші. */
.sd-track__paynow {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 20px;
}

.sd-track__paynow > span {
	font-size: 12.5px;
	color: var(--mut-3);
	line-height: 1.5;
	max-width: 240px;
}

.sd-track__pay {
	flex: none;
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.sd-track__pay--green {
	background: rgba(61, 205, 88, .12);
	border: 1px solid rgba(61, 205, 88, .4);
	color: var(--green);
}

.sd-track__pay--amber {
	background: rgba(197, 140, 20, .1);
	border: 1px solid rgba(197, 140, 20, .35);
	color: #e8c46a;
}

.sd-track__pay--red {
	background: rgba(224, 72, 63, .1);
	border: 1px solid rgba(224, 72, 63, .35);
	color: var(--red);
}

/* Смужка кроків */

.sd-track__bar {
	padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 30px);
	background: var(--ink-2);
	border-bottom: 1px solid var(--hair);
}

.sd-track__steps {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-track__step {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sd-track__dotline {
	display: flex;
	align-items: center;
}

.sd-track__dot {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--hair-3);
	display: grid;
	place-items: center;
	font-size: 11px;
	font-weight: 800;
	color: var(--mut-4);
	flex: none;
}

.sd-track__line {
	flex: 1;
	height: 2px;
	background: var(--hair-3);
	border-radius: 2px;
}

.sd-track__step:last-child .sd-track__line {
	display: none;
}

.sd-track__step-l {
	font-size: 12.5px;
	color: var(--mut-4);
	line-height: 1.35;
	padding-right: 12px;
}

.sd-track__step.is-done .sd-track__dot {
	background: var(--green);
	border-color: var(--green);
	color: var(--ink);
}

.sd-track__step.is-done .sd-track__line {
	background: var(--green);
}

.sd-track__step.is-done .sd-track__step-l {
	color: var(--mut);
}

.sd-track__step.is-now .sd-track__dot {
	border-color: var(--green);
	background: rgba(61, 205, 88, .14);
	color: var(--green);
}

.sd-track__step.is-now .sd-track__step-l {
	color: var(--head);
	font-weight: 800;
}

.sd-track__step.is-stopped .sd-track__dot {
	border-color: rgba(255, 255, 255, .28);
	color: var(--soft);
}

.sd-track__step.is-stopped .sd-track__step-l {
	color: var(--soft);
	font-weight: 800;
}

/*
 * На вузькому смужка стає стовпчиком: п'ять підписів у ряд на 390px
 * перетворюються на стовпчики по одній літері.
 */
@media (max-width: 699px) {
	.sd-track__steps {
		flex-direction: column;
	}

	.sd-track__step {
		flex-direction: row;
		align-items: flex-start;
		gap: 13px;
	}

	.sd-track__dotline {
		flex-direction: column;
		align-self: stretch;
	}

	.sd-track__dot {
		width: 20px;
		height: 20px;
		font-size: 10px;
	}

	.sd-track__line {
		width: 2px;
		height: auto;
		min-height: 14px;
	}

	.sd-track__step-l {
		font-size: 13.5px;
		padding: 0 0 14px;
	}
}

/* Накладна */

.sd-track__ttn {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: clamp(18px, 3.5vw, 24px) clamp(20px, 4vw, 30px);
	background: rgba(61, 205, 88, .07);
	border-bottom: 1px solid var(--hair);
}

.sd-track__ttn:hover {
	background: rgba(61, 205, 88, .12);
}

.sd-track__ttn > span:first-child {
	flex: 1;
	min-width: 200px;
}

.sd-track__ttn-h {
	display: block;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green);
	font-weight: 800;
	margin-bottom: 7px;
}

.sd-track__ttn-n {
	display: block;
	font-family: var(--display);
	font-size: clamp(18px, 4.4vw, 25px);
	color: var(--head);
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.sd-track__nottn {
	padding: clamp(16px, 3vw, 20px) clamp(20px, 4vw, 30px);
	background: var(--ink-2);
	border-bottom: 1px solid var(--hair);
	font-size: 13.5px;
	color: var(--mut-2);
	line-height: 1.6;
}

/* Пари «ключ — значення»: гуртова заявка */

.sd-track__rows {
	padding: clamp(20px, 4vw, 30px);
	display: grid;
	gap: clamp(14px, 3vw, 22px);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.sd-track__row {
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 14px;
	padding: 16px 18px;
}

.sd-track__row-k {
	font-size: 11.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--mut-4);
	font-weight: 800;
	margin-bottom: 8px;
}

.sd-track__row-v {
	font-size: 15px;
	color: var(--head);
	font-weight: 700;
	line-height: 1.5;
}

/* Склад замовлення */

.sd-track__body {
	padding: clamp(20px, 4vw, 30px);
}

.sd-track__body-h {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-4);
	font-weight: 800;
}

.sd-track__body-h > span:last-child {
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500;
	font-size: 12.5px;
	color: var(--mut-3);
}

.sd-track__items {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sd-track__items.is-folded .is-extra {
	display: none;
}

.sd-track__item {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	background: var(--ink-2);
	border: 1px solid var(--hair);
	border-radius: 14px;
	padding: 12px 14px;
}

.sd-track__pic {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	object-fit: cover;
	background: var(--panel-3);
	flex: none;
}

.sd-track__item-t {
	flex: 1 1 220px;
	min-width: 0;
}

.sd-track__item-n {
	font-size: 14px;
	font-weight: 700;
	color: #edece7;
	line-height: 1.4;
	text-wrap: pretty;
}

.sd-track__item-s {
	font-size: 11.5px;
	color: var(--mut-3);
	margin-top: 4px;
}

.sd-track__item-s code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: inherit;
}

.sd-track__item-q {
	font-size: 13px;
	color: var(--mut-2);
	white-space: nowrap;
	flex: none;
	font-variant-numeric: tabular-nums;
}

.sd-track__item-p {
	font-family: var(--display);
	font-size: 14.5px;
	color: var(--head);
	white-space: nowrap;
	flex: none;
	min-width: 90px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sd-track__more {
	width: 100%;
	margin-top: 12px;
	background: none;
	border: 1px dashed var(--hair-3);
	color: var(--soft);
	border-radius: 14px;
	padding: 14px;
	font: inherit;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
}

.sd-track__more:hover {
	border-color: var(--green);
	color: var(--green);
}

.sd-track__sums {
	display: grid;
	gap: clamp(14px, 3vw, 22px);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin-top: 26px;
}

.sd-track__totals {
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 18px 20px;
	align-self: start;
}

.sd-track__total {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--mut);
}

.sd-track__total > span:last-child {
	font-variant-numeric: tabular-nums;
}

.sd-track__total--green {
	color: var(--green);
	font-weight: 700;
}

.sd-track__total--sum {
	border-top: 1px solid var(--hair-2);
	margin-top: 6px;
	padding-top: 12px;
	color: var(--head);
	font-weight: 800;
}

.sd-track__total--sum > span:last-child {
	font-family: var(--display);
}

.sd-track__cards {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sd-track__mcard {
	background: var(--ink-2);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 16px;
	padding: 16px 20px;
}

.sd-track__mcard-v {
	font-size: 14px;
	color: #edece7;
	font-weight: 700;
	line-height: 1.5;
}

.sd-track__mcard-s {
	font-size: 12.5px;
	color: var(--mut-2);
	line-height: 1.55;
	margin-top: 4px;
}

.sd-track__comment {
	margin-top: 14px;
}

.sd-track__foot {
	padding: clamp(18px, 3.5vw, 24px) clamp(20px, 4vw, 30px);
	border-top: 1px solid var(--hair);
	background: var(--ink-2);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}

.sd-track__foot-note {
	font-size: 12.5px;
	color: var(--mut-4);
	line-height: 1.5;
	max-width: 280px;
	margin-left: auto;
}

/*
 * На вузькому рядок позиції переноситься, і кількість із сумою опиняються
 * під фото окремим рядком. Притискаємо суму до правого краю — тоді ціни
 * вишикуються стовпчиком і їх можна порівняти поглядом, а не читанням.
 */
@media (max-width: 559px) {
	.sd-track__item-p {
		margin-left: auto;
	}

	.sd-track__foot-note {
		margin-left: 0;
		max-width: none;
	}
}

/* =========================================================================
   20. Інформаційні сторінки (кремові)
   ====================================================================== */

.sd-info {
	background: var(--cream);
	color: var(--dark);
	min-height: 70vh;
	padding: clamp(28px, 6vw, 56px) 0 clamp(56px, 9vw, 90px);
	animation: sd-fade-up .5s both;
}

.sd-info h1 {
	font-family: var(--display);
	font-size: clamp(22px, 4.4vw, 30px);
	font-weight: 700;
	margin: 18px 0 16px;
	color: var(--dark);
}

.sd-info__banner {
	background: rgba(29, 158, 63, .09);
	border: 1px solid rgba(29, 158, 63, .3);
	border-radius: 14px;
	padding: 15px 20px;
	font-size: 14px;
	color: #245c35;
	line-height: 1.55;
	margin-bottom: 26px;
}

.sd-info__blocks {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sd-block {
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 18px;
	padding: 24px 26px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
	transition: box-shadow .25s ease, border-color .25s ease;
}

.sd-block:hover {
	box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
	border-color: rgba(29, 158, 63, .3);
}

.sd-block__h {
	font-size: 16px;
	font-weight: 800;
	color: var(--dark);
	margin-bottom: 12px;
}

.sd-block__row {
	display: flex;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--hair-l);
	align-items: baseline;
}

.sd-block__row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.sd-block__k {
	flex: none;
	font-size: 13px;
	font-weight: 800;
	min-width: 120px;
}

.sd-block__v {
	font-size: 14px;
	color: var(--cream-1);
	line-height: 1.55;
}

.sd-block__n {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: rgba(29, 158, 63, .12);
	color: var(--green-d);
	font-size: 12px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

/* =========================================================================
   15b. Сторінка 404 — «сторінку знеструмлено»

   Повноекранна сцена з макета: лампа на шнурі, велике 404 і робочий
   вимикач Sedna праворуч. Клас is-off на .sd-nf гасить світло — уся
   зміна станів тут, JS лише перемикає клас.
   ====================================================================== */

.sd-nf {
	--nf-drop: clamp(76px, 14vh, 130px);

	position: relative;
	/* Шапка сайту вже займає свою висоту — сцена бере рівно решту екрана. */
	min-height: calc(100vh - var(--header-h));
	background: #050607;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 0 clamp(16px, 4vw, 24px) 70px;
	animation: sd-fade-up .5s both;
}

/* ---- Лампа ---------------------------------------------------------- */

/*
 * Точка розміру 0×0 під стелею: усі частини лампи позиціонуються від
 * неї, тому гойдання — це поворот одного елемента навколо верхнього краю.
 */
.sd-nf__lamp {
	position: absolute;
	top: -8px;
	left: 50%;
	width: 0;
	height: 0;
	z-index: 3;
	transform-origin: top center;
	animation: sd-nf-swing 3.4s ease-in-out infinite alternate;
}

.sd-nf.is-off .sd-nf__lamp {
	animation-play-state: paused;
}

.sd-nf__lamp i {
	position: absolute;
	display: block;
}

.sd-nf__cord {
	top: 0;
	left: -1px;
	width: 2px;
	height: var(--nf-drop);
	background: linear-gradient(#101314, #1b1f21);
}

.sd-nf__socket {
	top: var(--nf-drop);
	left: -8px;
	width: 16px;
	height: 26px;
	background: linear-gradient(180deg, #1a1f21, #111415);
	border-radius: 5px 5px 3px 3px;
	z-index: 4;
}

.sd-nf__bulb {
	top: calc(var(--nf-drop) + 22px);
	left: -44px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 42%, #f7fff2 0%, #d9f5d8 34%, #a8e6ae 62%, rgba(120, 200, 140, .25) 88%, transparent 100%);
	box-shadow: 0 10px 44px 14px rgba(200, 255, 210, .42), 0 22px 110px 48px rgba(61, 205, 88, .24);
	transition: background .3s ease, box-shadow .3s ease;
	z-index: 1;
}

.sd-nf.is-off .sd-nf__bulb {
	background: radial-gradient(circle at 50% 42%, #191e20, #101314 70%);
	box-shadow: none;
}

.sd-nf__rim {
	top: calc(var(--nf-drop) + 66px);
	left: -42px;
	width: 84px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(ellipse at 50% 50%, #ffffff, #e6ffe6 55%, rgba(190, 240, 195, .4) 85%, transparent);
	transition: background .3s ease;
	z-index: 2;
}

.sd-nf.is-off .sd-nf__rim {
	background: rgba(255, 255, 255, .03);
}

.sd-nf__shade {
	top: calc(var(--nf-drop) + 20px);
	left: -46px;
	width: 92px;
	height: 56px;
	background: radial-gradient(circle at 36% 30%, #272d30, #0b0e0f 72%);
	border-radius: 46px 46px 10px 10px / 46px 46px 12px 12px;
	z-index: 3;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .07), 0 10px 24px rgba(0, 0, 0, .5);
}

/* Конус світла: миготить, як стара лампа розжарення. */
.sd-nf__cone {
	top: calc(var(--nf-drop) + 96px);
	left: -330px;
	width: 660px;
	height: 78%;
	background: linear-gradient(180deg, rgba(214, 255, 222, .30), rgba(191, 255, 205, .10) 45%, transparent 78%);
	clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
	opacity: 1;
	transition: opacity .35s ease;
	pointer-events: none;
	animation: sd-nf-flick 7s linear infinite;
	filter: blur(8px);
}

.sd-nf.is-off .sd-nf__cone {
	opacity: 0;
	animation: none;
}

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

.sd-nf__body {
	position: relative;
	z-index: 2;
	text-align: center;
	max-width: 620px;
	margin-top: calc(var(--nf-drop) + 130px);
}

.sd-nf__eyebrow {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--green);
	margin-bottom: 14px;
	transition: color .35s ease;
}

.sd-nf.is-off .sd-nf__eyebrow {
	color: #1c2122;
}

.sd-nf__num {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(88px, 22vw, 190px);
	line-height: .95;
	color: #f3f2ec;
	text-shadow: 0 0 60px rgba(61, 205, 88, .25);
	margin: 0;
	transition: color .35s ease, text-shadow .35s ease;
}

.sd-nf.is-off .sd-nf__num {
	color: #131617;
	text-shadow: none;
}

.sd-nf__copy {
	font-size: clamp(14px, 3vw, 16px);
	line-height: 1.65;
	color: var(--mut);
	margin: 20px auto 0;
	max-width: 440px;
	transition: color .35s ease;
}

.sd-nf.is-off .sd-nf__copy {
	color: #1c2122;
}

/* Видимий лише той текст, що відповідає стану світла. */
.sd-nf__copy--off,
.sd-nf.is-off .sd-nf__copy--on {
	display: none;
}

.sd-nf.is-off .sd-nf__copy--off {
	display: block;
}

.sd-nf__cta {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
	opacity: 1;
	transition: opacity .35s ease;
}

/* У темряві кнопок не видно — тому вони й не мають ловити кліки. */
.sd-nf.is-off .sd-nf__cta {
	opacity: 0;
	pointer-events: none;
}

.sd-nf__btn {
	border-radius: 999px;
	padding: 15px 30px;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	border: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.sd-nf__btn:active {
	transform: scale(.975);
}

.sd-nf__btn--fill {
	background: var(--green);
	color: #0e1112;
}

.sd-nf__btn--fill:hover {
	background: #5ada72;
	color: #0e1112;
}

.sd-nf__btn--line {
	background: none;
	color: var(--soft);
	border: 1.5px solid var(--hair-3);
}

.sd-nf__btn--line:hover {
	border-color: var(--green);
	color: var(--green);
}

/* ---- Вимикач на стіні ------------------------------------------------ */

.sd-nf__switch {
	position: absolute;
	right: clamp(18px, 7vw, 90px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.sd-nf__key {
	background: #e9e6df;
	border: none;
	padding: 13px;
	border-radius: 16px;
	cursor: pointer;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .3);
	transition: background .35s ease, transform .2s ease;
}

.sd-nf__key:active {
	transform: scale(.975);
}

.sd-nf.is-off .sd-nf__key {
	background: #15191b;
}

.sd-nf__mech {
	display: block;
	width: 62px;
	height: 62px;
	border-radius: 10px;
	background: #f2efe8;
	box-shadow: inset 0 2px 3px rgba(255, 255, 255, .35), inset 0 -2px 5px rgba(0, 0, 0, .2);
	position: relative;
	transition: background .35s ease;
}

.sd-nf.is-off .sd-nf__mech {
	background: #1a1f21;
}

.sd-nf__rocker {
	position: absolute;
	inset: 13% 13%;
	border-radius: 6px;
	background: #f6f4ee;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
	transform: perspective(240px) rotateX(-7deg);
	transition: transform .25s ease, background .35s ease;
}

.sd-nf.is-off .sd-nf__rocker {
	background: #202628;
	transform: perspective(240px) rotateX(7deg);
}

/* Зелений вогник індикації світиться завжди — як у справжніх Sedna. */
.sd-nf__led {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 8px 2px rgba(61, 205, 88, .8);
	animation: sd-nf-glow 2s ease-in-out infinite;
}

.sd-nf__swlabel {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--mut-3);
	transition: color .35s ease;
	text-align: center;
}

.sd-nf.is-off .sd-nf__swlabel {
	color: var(--green);
}

.sd-nf__swlabel--off,
.sd-nf.is-off .sd-nf__swlabel--on {
	display: none;
}

.sd-nf.is-off .sd-nf__swlabel--off {
	display: inline;
}

@keyframes sd-nf-swing {
	from { transform: rotate(10deg); }
	to   { transform: rotate(-10deg); }
}

@keyframes sd-nf-flick {
	0%, 100% { opacity: 1; }
	89% { opacity: 1; }
	90% { opacity: .55; }
	92% { opacity: 1; }
	95% { opacity: .7; }
	97% { opacity: 1; }
}

@keyframes sd-nf-glow {
	0%, 100% { opacity: .55; }
	50%      { opacity: .95; }
}

/*
 * На вузьких екранах вимикач не має накривати текст: опускаємо його під
 * кнопки й вирівнюємо по центру.
 */
@media (max-width: 720px) {
	.sd-nf__switch {
		position: static;
		transform: none;
		margin-top: 40px;
	}

	.sd-nf__body {
		margin-top: calc(var(--nf-drop) + 90px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sd-nf,
	.sd-nf__lamp,
	.sd-nf__cone,
	.sd-nf__led {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   Текст із редактора сторінки

   Коли документ перенесено в «Сторінки», він приходить звичайними блоками
   WordPress. Стилі повторюють картки вище, щоб редактор лишався простим:
   заголовок і список — а вигляд бере на себе тема.
   ---------------------------------------------------------------------- */

.sd-info .sd-screen-content {
	font-size: 14px;
	color: var(--cream-1);
}

.sd-info .sd-screen-content h2 {
	font-family: var(--display);
	font-size: clamp(17px, 2.6vw, 20px);
	font-weight: 700;
	color: var(--dark);
	margin: 30px 0 14px;
}

.sd-info .sd-screen-content h2:first-child {
	margin-top: 0;
}

.sd-info .sd-screen-content h3 {
	font-size: 15px;
	font-weight: 800;
	color: var(--dark);
	margin: 22px 0 10px;
}

.sd-info .sd-screen-content ul,
.sd-info .sd-screen-content ol {
	list-style: none;
	margin: 0 0 16px;
	padding: 6px 26px;
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 18px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
}

.sd-info .sd-screen-content li {
	padding: 10px 0;
	border-bottom: 1px dashed var(--hair-l);
	font-size: 14px;
	line-height: 1.55;
	color: var(--cream-1);
}

.sd-info .sd-screen-content li:last-child {
	border-bottom: none;
}

.sd-info .sd-screen-content li strong {
	color: var(--dark);
	font-weight: 800;
}

/* Нумерація кроків — та сама зелена плашка, що й у картках теми. */
.sd-info .sd-screen-content ol {
	counter-reset: sd-step;
}

.sd-info .sd-screen-content ol li {
	display: flex;
	gap: 12px;
	align-items: baseline;
}

.sd-info .sd-screen-content ol li::before {
	counter-increment: sd-step;
	content: counter(sd-step);
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	background: rgba(29, 158, 63, .12);
	color: var(--green-d);
	font-size: 12px;
	font-weight: 800;
	display: grid;
	place-items: center;
}

.sd-info .sd-screen-content p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.6;
}

.sd-info .sd-screen-content em {
	display: block;
	background: rgba(214, 158, 46, .1);
	border: 1px solid rgba(214, 158, 46, .32);
	border-radius: 14px;
	padding: 13px 18px;
	font-style: normal;
	color: #6b4c12;
}

.sd-block__mark {
	flex: none;
	margin-top: 2px;
}

.sd-block__note {
	background: #fbf3df;
	border: 1px solid rgba(197, 140, 20, .4);
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 13px;
	color: #7a5a12;
	line-height: 1.55;
	margin-top: 14px;
}

.sd-info__foot {
	display: flex;
	gap: 12px;
	margin-top: 26px;
	flex-wrap: wrap;
	align-items: center;
}

.sd-info__foot span {
	font-size: 13.5px;
	color: var(--cream-2);
}

.sd-info__foot a {
	font-weight: 800;
	font-size: 13.5px;
	color: var(--green-d);
}

/* Юридичні таби та акордеон */









/* -------------------------------------------------------------------------
   Юридичний документ: оферта та політика

   Це просто текст, і оформлення йому не потрібне. Потрібна навігація:
   документ на 5 200 px у десктопі й 8 100 px у телефоні, а приходять
   сюди з конкретним питанням («скільки днів на повернення»), а не
   читати з початку.
   ---------------------------------------------------------------------- */

.sd-doc__lede {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--cream-2);
	margin: 0 0 16px;
	max-width: 62ch;
	text-wrap: pretty;
}

/* Пігулки: коли документ востаннє правили і скільки його читати. */
.sd-doc__meta {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.sd-doc__meta > span {
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--cream-2);
}

.sd-doc__meta > span:first-child {
	color: var(--dark);
	font-weight: 700;
}

.sd-doc {
	display: flex;
	gap: clamp(20px, 3.5vw, 40px);
	align-items: flex-start;
}

.sd-doc__body {
	flex: 1;
	min-width: 0;
}

/*
 * Якорі. Шапка сайту липка, тому без відступу заголовок розділу після
 * переходу опинявся б рівно під нею.
 */
.sd-doc__anchor {
	scroll-margin-top: calc(var(--header-h) + 20px);
}

/* Зміст */

.sd-toc {
	flex: 0 0 258px;
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 18px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
	margin-bottom: 20px;
	overflow: hidden;
}

.sd-toc__sum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	font-size: 14px;
	font-weight: 800;
	color: var(--dark);
	cursor: pointer;
	list-style: none;
}

.sd-toc__sum::-webkit-details-marker {
	display: none;
}

/* Стрілка сама повертається, коли <details> відкритий, — без жодного скрипта. */
.sd-toc__sum > i {
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--green-d);
	border-bottom: 2px solid var(--green-d);
	transform: rotate(45deg);
	transition: transform .2s ease;
	flex: none;
	margin-bottom: 3px;
}

.sd-toc[open] .sd-toc__sum > i {
	transform: rotate(-135deg);
	margin: 3px 0 0;
}

.sd-toc__nav {
	flex-direction: column;
	border-top: 1px solid var(--hair-l);
	padding: 8px;
}

/*
 * display ставимо лише відкритому <details>: інакше він скасовує власне
 * правило браузера «згорнутий — не показувати», і на телефоні зміст
 * стояв би розгорнутим завжди.
 */
.sd-toc[open] > .sd-toc__nav {
	display: flex;
}

.sd-toc__i {
	display: flex;
	gap: 10px;
	padding: 9px 11px;
	border-radius: 9px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--cream-2);
}

.sd-toc__i:hover,
.sd-toc__i:focus-visible {
	background: rgba(29, 158, 63, .08);
	color: var(--green-d);
}

.sd-toc__n {
	flex: none;
	color: var(--green-d);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Назва документа в чужому тексті: рівнем вище за розділ. */
.sd-toc__i--top {
	font-weight: 800;
	color: var(--dark);
	margin-top: 6px;
}

.sd-toc__i--top:first-child {
	margin-top: 0;
}

/*
 * На широкому екрані зміст стоїть збоку й лишається на місці при
 * прокрутці. Згортати його там немає сенсу — місце вільне, — тому
 * заголовок <details> ховаємо, а список розкриваємо примусово.
 */
@media (min-width: 900px) {
	.sd-toc {
		position: sticky;
		top: calc(var(--header-h) + 16px);
		max-height: calc(100vh - var(--header-h) - 40px);
		overflow-y: auto;
		margin-bottom: 0;
	}

	.sd-toc__sum {
		display: none;
	}

	.sd-toc__nav {
		display: flex;
		border-top: none;
	}

	.sd-doc__ask {
		flex-wrap: nowrap;
	}
}

@media (max-width: 899px) {
	.sd-doc {
		flex-direction: column;
	}

	.sd-toc {
		width: 100%;
		flex: none;
	}
}

/*
 * Заголовок розділу — заголовковим шрифтом і помітно більший за текст.
 * Правило потрібне саме тут: спільні стилі .sd-screen-content малюють h3
 * як підзаголовок усередині статті, а в документі це верхній рівень —
 * інших заголовків у ньому немає.
 */
.sd-info .sd-doc__body h3 {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-family: var(--display);
	font-size: clamp(16px, 3.2vw, 21px);
	font-weight: 700;
	line-height: 1.3;
	margin: 30px 0 12px;
	text-wrap: balance;
}

/*
 * Номер окремо від назви — у зеленому. У самому тексті він частина рядка
 * («9. Повернення та строк дії»), бо на нього посилаються пункти
 * документа; тут ми його лише показуємо інакше.
 */
.sd-doc__n {
	flex: none;
	font-family: var(--display);
	font-weight: 400;
	font-size: 13px;
	color: var(--green-d);
	font-variant-numeric: tabular-nums;
}

/*
 * «Головне» — одне речення переказу розділу. Це підказка для навігації,
 * а не частина договору: тому воно поза списком пунктів і без власного
 * номера, на який можна було б послатися.
 */
.sd-doc__key {
	background: rgba(29, 158, 63, .07);
	border: 1px solid rgba(29, 158, 63, .26);
	border-radius: 14px;
	padding: 13px 17px;
	margin: -6px 0 18px;
}

.sd-doc__key-e {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green-d);
	font-weight: 800;
	margin-bottom: 6px;
}

.sd-doc__key-p {
	font-size: 13.5px;
	color: #245c35;
	line-height: 1.6;
}

/* Куди йти, якщо потрібного пункту не знайшли */
.sd-doc__ask {
	margin-top: 30px;
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 18px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .04);
	padding: 20px 24px;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.sd-doc__ask-t {
	font-size: 14.5px;
	font-weight: 800;
	color: var(--dark);
	margin-bottom: 6px;
}

.sd-doc__ask-p {
	font-size: 13.5px;
	color: var(--cream-2);
	line-height: 1.6;
	max-width: 46ch;
}

.sd-info__tail {
	font-size: 12px;
	color: var(--mut-2);
	margin-top: 22px;
	line-height: 1.6;
}

.sd-info__tail a {
	color: var(--green-d);
	font-weight: 700;
}

/* =========================================================================
   21. Адаптив. Дизайн зроблено на clamp() — нижче лише те,
   що не виражається текучими одиницями.
   ====================================================================== */

@media (max-width: 1079px) {
	.sd-nav,
	.sd-head__phone {
		display: none;
	}

	.sd-iconbtn--phone,
	.sd-burger {
		display: grid;
	}

	/*
	 * Картки перебираються всередину фото.
	 *
	 * У макеті вони навмисно звисають за край знімка — на широкому екрані
	 * для цього є вільне поле обабіч. На вужчому такого поля немає, і
	 * від'ємні відступи вилазили б за вікно. Тому не ховаємо їх, як було
	 * раніше, а ставимо по кутах самого фото: композиція та сама, а
	 * покупець на телефоні бачить те саме, що й на комп'ютері, — реальні
	 * фініші та ціну.
	 */
	/*
	 * Знімок вужчий і зсунутий праворуч — ліворуч звільняється смужка, за
	 * яку звисають картки. Це той самий прийом, що в макеті: там поле обабіч
	 * дає сама ширина екрана, тут його доводиться відрізати від фото.
	 */
	.sd-hero__shot {
		margin-left: 56px;
		/*
		 * Вище, ніж у макеті: коли знімок лягає на всю ширину колонки, при
		 * висоті з десктопа він перетворюється на вузьку смужку, і три
		 * картки закривають від нього більше, ніж лишають.
		 */
		height: clamp(380px, 48vw, 500px);
	}

	.sd-float {
		--fly: -12px;
		border-radius: 16px;
	}

	.sd-float img {
		width: 84px;
		height: 84px;
	}

	.sd-float--1 {
		left: -56px;
		top: 24px;
	}

	.sd-float--2 {
		left: -56px;
		bottom: 66px;
	}

	.sd-float--3 {
		right: -8px;
		bottom: -16px;
		padding: 12px 15px;
	}

	.sd-float--3 img {
		width: 54px;
		height: 54px;
	}

	.sd-promo__wide {
		display: none;
	}

	.sd-promo__narrow {
		display: flex;
	}

	.sd-logo span {
		display: none;
	}

	.sd-cols__side,
	.sd-calc__sum {
		position: static;
	}
}

@media (max-width: 700px) {
	/* Мобільний логотип, якщо він завантажений окремо. */
	.sd-logo__img--mob {
		display: block;
	}

	.sd-logo__img--mob ~ .sd-logo__img--desk,
	.sd-logo--img:has(.sd-logo__img--mob) .sd-logo__img--desk {
		display: none;
	}

	.sd-block__row {
		flex-direction: column;
		gap: 4px;
	}

	.sd-block__k {
		min-width: 0;
	}

	/* Номер кроку та галочка мають лишатись у рядку з текстом. */
	.sd-block__row--marked {
		flex-direction: row;
		gap: 12px;
	}

}

@media (max-width: 559px) {
	/* Місця обмаль — кнопка фільтрів лишається самою іконкою з бейджем. */
	.sd-sheetbtn {
		padding: 11px 13px;
	}

	.sd-sheetbtn span:not(.sd-sheetbtn__n) {
		display: none;
	}

	.sd-hero__ring {
		display: none;
	}

	/*
	 * Знімок трохи вищий: три картки на 320 px висоти закрили б саме фото,
	 * заради якого вони й стоять.
	 */
	.sd-hero__shot {
		height: clamp(380px, 92vw, 460px);
	}

	.sd-hero__shot {
		margin-left: 48px;
	}

	.sd-float--1,
	.sd-float--2 {
		left: -48px;
	}

	.sd-float {
		--fly: -10px;
		padding: 10px;
	}

	.sd-float img {
		width: 72px;
		height: 72px;
	}

	.sd-float--2 {
		bottom: 56px;
	}

	.sd-float--3 {
		padding: 10px 13px;
		gap: 9px;
	}

	.sd-float--3 img {
		width: 46px;
		height: 46px;
	}

	.sd-float__label {
		font-size: 11px;
	}

	.sd-float__price {
		font-size: 14px;
	}

	.sd-top {
		bottom: 18px;
		right: 18px;
	}

	.sd-line__price {
		min-width: 0;
		text-align: left;
	}
}

@media (max-width: 400px) {
	/*
	 * Найвужчі екрани: картка з ціною та квадратна картка стоять в одному
	 * нижньому ряду, і на 320 px їм треба ще трохи місця, щоб не зійтись.
	 */
	.sd-hero__shot {
		margin-left: 42px;
	}

	.sd-float--1,
	.sd-float--2 {
		left: -42px;
	}

	.sd-float img {
		width: 62px;
		height: 62px;
	}

	.sd-float--3 img {
		width: 40px;
		height: 40px;
	}

	.sd-float__label {
		font-size: 10px;
	}

	.sd-float__price {
		font-size: 13px;
	}
}

/* Друк: лишаємо читабельний вміст. */
@media print {
	.sd-promo,
	.sd-head,
	.sd-modal,
	.sd-toast,
	.sd-top,
	.sd-marquee,
	.sd-side {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* =========================================================================
   22. v4 — нові блоки
   ====================================================================== */

/* --- Trust: на телефоні пігулки замість карток --- */
.sd-trustwrap {
	padding: clamp(30px, 5vw, 46px) var(--pad);
}

.sd-pills {
	display: none;
	flex-wrap: wrap;
	gap: 7px;
}

.sd-pill-sm {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--panel);
	border: 1px solid var(--hair-2);
	border-radius: 999px;
	padding: 8px 13px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
}

.sd-pill-sm:first-child {
	border-color: rgba(61, 205, 88, .3);
}

.sd-pill-sm i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green);
	flex: none;
}

/* --- Палітра: блок рамок --- */
.sd-frames {
	margin: clamp(26px, 4vw, 38px) 0 0;
	background: #fff;
	border: 1px solid var(--hair-l);
	border-radius: 20px;
	padding: clamp(18px, 3vw, 24px);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(16px, 3vw, 28px);
	align-items: center;
}

.sd-frames__col {
	flex: 1 1 220px;
	min-width: 0;
}

.sd-frames__h {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 800;
	margin-bottom: 8px;
}

.sd-frames__p {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--cream-2);
}

.sd-frames__list {
	flex: 2 1 380px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sd-frames__line {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mut-3);
	font-weight: 800;
	margin-bottom: 7px;
}

.sd-frames__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sd-framechip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #f6f5f0;
	border: 1px solid var(--hair-l);
	border-radius: 999px;
	padding: 7px 14px 7px 9px;
	font-size: 12.5px;
	font-weight: 600;
	color: #2c2f2a;
}

.sd-framechip i {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
	flex: none;
}

/* --- Конфігуратор: підпис, плінтус, панель стін, кількість --- */
.sd-try__stage {
	display: flex;
	flex-direction: column;
}

.sd-stage {
	flex: 1;
	min-height: var(--stage-h);
	height: auto;
}

/*
 * Підпис комплекту.
 *
 * Був плашкою поверх сцени: напівпрозорий білий на кремовому — контрасту
 * майже нема, а виглядало як спливна підказка, що зачепилась за кут. Тепер
 * це підпис під фото, як у каталозі: що зібрано — рядком помітніше, з чого
 * зібрано — тихіше під ним.
 */
.sd-stage__cap {
	display: grid;
	gap: 2px;
	text-align: center;
	max-width: 100%;
	/* Підпис нічого не робить — кліки мають доходити до комплекту. */
	pointer-events: none;
}

.sd-stage__cap b {
	font-family: var(--display);
	font-size: 13px;
	font-weight: 800;
	color: var(--cream-1);
	letter-spacing: -.01em;
}

.sd-stage__cap span {
	font-size: 12px;
	color: var(--cream-2);
}

/*
 * Механізм і рамка — дві половинки, які переносяться цілими. Поки вони
 * були суцільним рядком, на телефоні мітка серії відривалась від свого
 * фініша й лишалась самотнім словом на третьому рядку.
 */
.sd-stage__fins {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 7px;
}

.sd-stage__sep {
	opacity: .5;
}

/*
 * Серія фінішу. Верхній регістр і розрядка, щоб мітка читалась як мітка,
 * а не як частина речення: інакше «рамка «Матове золото» Elements» звучить
 * так, ніби Elements — теж слово в назві.
 */
.sd-stage__line {
	font-style: normal;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--green-ink);
	white-space: nowrap;
}

/* Квадратний свотч фінішу — так у v4 краще видно текстуру. */
.sd-sw--tile {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.sd-sw--tile:hover {
	transform: scale(1.1);
}

/* Обʼємне прев'ю комплекту */
.sd-kit {
	padding: clamp(13px, 3vw, 17px);
	border-radius: clamp(14px, 3.4vw, 19px);
	gap: clamp(5px, 1.2vw, 8px);
	box-shadow: 0 22px 50px rgba(0, 0, 0, .42), inset 0 1px 1px rgba(255, 255, 255, .42);
	z-index: 1;
}

/* У комплекту з фото рамка своя — плашка й тінь під ним зайві. */
.sd-kit.is-layer {
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

.sd-kit__slot {
	width: clamp(58px, 15vw, 84px);
	height: clamp(58px, 15vw, 84px);
	border-radius: 11px;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .28), inset 0 2px 3px rgba(255, 255, 255, .4), inset 0 -2px 5px rgba(0, 0, 0, .14);
	position: relative;
}

.sd-kit__sw {
	width: 74%;
	height: 74%;
	border-radius: 6px;
	background: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .26), inset 0 2px 3px rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(0, 0, 0, .16);
	transform: perspective(300px) rotateX(-4deg);
}

.sd-kit__sock {
	width: 74%;
	height: 74%;
	background: inherit;
	box-shadow: inset 0 3px 9px rgba(0, 0, 0, .26), 0 1px 2px rgba(255, 255, 255, .45);
	position: relative;
	gap: 22%;
}

.sd-kit__sock i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #3a3c3e;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, .8);
}

/* Заземлювальні пласки зверху та знизу розетки. */
.sd-kit__sock::before,
.sd-kit__sock::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 5px;
	height: 10px;
	border-radius: 2px;
	background: #9a9d9f;
}

.sd-kit__sock::before { top: 9%; }
.sd-kit__sock::after { bottom: 9%; }

.sd-try__qty {
	display: flex;
	gap: 9px;
	align-items: center;
	margin-bottom: 9px;
}

.sd-try__qty > span {
	font-size: 12px;
	color: var(--mut-2);
	flex: 1;
}

/* --- Калькулятор: рівні оздоблення --- */
.sd-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 11px;
}

.sd-tier {
	flex: 1 1 84px;
	min-width: 0;
	background: none;
	color: var(--soft);
	border: 1px solid var(--hair-3);
	border-radius: 10px;
	padding: 10px 8px;
	font-size: 12.5px;
	font-weight: 800;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sd-tier:hover {
	border-color: var(--green);
}

.sd-tier.is-on {
	background: var(--green);
	color: var(--ink);
	border-color: var(--green);
}

/* Другий заголовок у кошторисі — з відступом від підказки попереднього. */
.sd-calc__label2 {
	margin-top: 16px;
}

.sd-calc__tierhint {
	font-size: 11px;
	color: var(--mut-4);
	line-height: 1.5;
	margin-bottom: 14px;
}

.sd-calc__foot {
	font-size: 11.5px;
	color: var(--mut-3);
	text-align: center;
	margin-top: 10px;
}

/* --- Обʼємні знижки --- */
/* Відступи симетричні — так у макеті: clamp(30px,5vw,46px) зверху й знизу. */
.sd-disc-wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: clamp(30px, 5vw, 46px) var(--pad);
}

.sd-disc {
	border: 1px solid rgba(61, 205, 88, .28);
	border-radius: 24px;
	background: var(--panel);
	padding: clamp(20px, 4vw, 34px);
}

.sd-disc__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.sd-disc__h {
	font-family: var(--display);
	font-size: clamp(19px, 4vw, 28px);
	font-weight: 700;
	margin: 0;
	color: var(--head);
}

.sd-disc__note {
	font-size: 12.5px;
	color: var(--mut-2);
	max-width: 330px;
}

.sd-disc__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.sd-disc__tier {
	background: var(--ink);
	border: 1px solid var(--hair-2);
	border-radius: 14px;
	padding: clamp(11px, 2.6vw, 18px);
	display: flex;
	flex-direction: column;
	gap: 3px;
	transition: border-color .25s ease;
}

.sd-disc__tier.is-on {
	border-color: rgba(61, 205, 88, .55);
}

.sd-disc__from {
	font-size: clamp(10px, 2.4vw, 12px);
	color: var(--mut-2);
	white-space: nowrap;
}

.sd-disc__pct {
	font-family: var(--display);
	font-size: clamp(19px, 5vw, 30px);
	color: var(--soft);
	line-height: 1.1;
	transition: color .25s ease;
}

.sd-disc__tier.is-on .sd-disc__pct {
	color: var(--green);
}

.sd-disc__badge {
	font-size: 10px;
	color: var(--green);
	font-weight: 800;
	line-height: 1.3;
	min-height: 13px;
}

.sd-disc__legal {
	font-size: 10.5px;
	color: var(--mut-4);
	line-height: 1.5;
	margin-top: 12px;
}

/* --- Пошук у каталозі --- */
.sd-search {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 9px;
	align-items: center;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	padding: 0 14px;
	transition: border-color .2s ease;
}

.sd-search:focus-within {
	border-color: rgba(61, 205, 88, .45);
}

.sd-search svg {
	flex: none;
}

.sd-search input {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	outline: none;
	color: #edece7;
	font-size: 13.5px;
	padding: 11px 0;
}

.sd-search input::-webkit-search-cancel-button {
	display: none;
}

.sd-search button {
	flex: none;
	background: none;
	border: none;
	color: var(--mut-3);
	font-size: 15px;
	padding: 4px;
	line-height: 1;
}

.sd-search button:hover {
	color: var(--red);
}

@keyframes sd-slide-in {
	from { opacity: 0; transform: translateX(60px); }
	to { opacity: 1; transform: none; }
}

/* --- Картка каталогу: ♡ на фото + іконка кошика --- */
.sd-card__media {
	display: block;
	cursor: default;
}

.sd-card__hit {
	width: 100%;
	height: 100%;
	background: none;
	border: none;
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
}

/*
 * Своє фото товару замість намальованого прев'ю. Прев'ю перемальовується
 * під обраний колір, фото — ні, тому фото беруться окремо для кожного
 * кольору: у каталозі Schneider це різні артикули.
 */
.sd-card__photo,
.sd-modal__photo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/*
 * Фото в картці позиціюємо абсолютно, і це не примха.
 *
 * Батько — грід із place-items: center. У такому гріді елемент не
 * розтягується, тому height: 100% не має від чого рахуватись і браузер
 * бере висоту за пропорцією картинки: фото 600×600 виходило 283 px у
 * плитці 190 px і виштовхувало назву товару за межі картки.
 * align-self: stretch тут не рятує — розтягування діє лише при height: auto.
 *
 * Абсолютне позиціювання дає відсоткам від чого рахуватись: контейнером
 * стає сама плитка. Розміри лишаємо у відсотках, а не auto: для картинки
 * auto означає власний розмір файлу, і поки lazy-loading її не завантажив,
 * цей розмір нульовий.
 */
.sd-card__hit {
	position: relative;
}

.sd-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 6%;
	box-sizing: border-box;
}

/*
 * Плитка під фото — квадратна й біла.
 *
 * Знімки товарів приходять від виробника на білому тлі. На темній плитці
 * вони читались як світлий прямокутник, наліплений на картку; біле тло
 * робить межу знімка невидимою, і на картці лишається сам виріб.
 * Квадрат замість смуги 190 px дає фото приблизно вдвічі більше місця.
 */
.sd-card__media.is-photo,
.sd-card__media.is-photo:hover {
	height: auto;
	aspect-ratio: 1 / 1;
	background: #fff;
}

/*
 * Те саме біле тло, що й у картці: знімок на білому лягає на нього без
 * видимої межі, а знімок із прозорістю не провалюється в темряву.
 * Білішає вся сцена, а не сама картинка — інакше на темному тлі лишався б
 * світлий прямокутник із чіткими краями.
 */
.sd-modal__photo {
	max-height: 100%;
	border-radius: 14px;
}

.sd-modal__stage.is-photo {
	background: #fff;
}

/* На білій сцені світла рамка мініатюри зникає — беремо темну. */
.sd-modal__stage.is-photo .sd-modal__thumb {
	border-color: rgba(14, 17, 18, .14);
}

.sd-modal__stage.is-photo .sd-modal__thumb.is-on {
	border-color: var(--green);
}

.sd-modal__stage.is-photo .sd-modal__nav {
	border-color: rgba(14, 17, 18, .1);
}

/* -------------------------------------------------------------------------
 * Галерея товару в модалці
 * ---------------------------------------------------------------------- */

/*
 * Стрілки галереї.
 *
 * Позиціювання через top/translate, а не margin: кружечок лишається по
 * центру сцени за будь-якої висоти фото. Іконка — SVG у гріді, тому
 * стоїть рівно посередині; текстовий гліф ‹ висів вище центру через
 * базову лінію й зіскакував при натисканні.
 */
.sd-modal__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .18);
	background: rgba(14, 17, 18, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	color: #edece7;
	cursor: pointer;
	display: grid;
	place-items: center;
	transform: translateY(-50%);
	transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.sd-modal__nav:hover {
	background: rgba(14, 17, 18, .8);
	border-color: rgba(61, 205, 88, .55);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	transform: translateY(-50%) scale(1.07);
}

/* Натискання дає віддачу самим кружечком, а не зсувом іконки всередині. */
.sd-modal__nav:active {
	transform: translateY(-50%) scale(.93);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	transition-duration: .08s;
}

.sd-modal__nav:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

.sd-modal__chev {
	display: block;
	/* Шеврон намальований вниз — довертаємо в потрібний бік. */
	transform: rotate(90deg);
}

.sd-modal__chev--r {
	transform: rotate(-90deg);
}

.sd-modal__nav--prev {
	left: 16px;
}

.sd-modal__nav--next {
	right: 16px;
}

/*
 * Вертикальні відступи тут обов'язкові. overflow-x: auto перетворює
 * overflow-y на auto теж, і рядок починає обрізати все, що виходить за
 * його межі: підйом мініатюри при наведенні зрізало навпіл.
 */
/*
 * Стрічка мініатюр.
 *
 * justify-content: center разом із прокруткою — стара пастка flexbox:
 * коли мініатюр більше, ніж влазить, зайве вилазить за обидва краї, і
 * початок стрічки стає недосяжним — до нього не домотати навіть колесом.
 * У товарів із вісьмома-дев'ятьма знімками перший і останній кадри так і
 * лишались підрізаними.
 *
 * `safe center` центрує, поки все влазить, і сам перемикається на
 * вирівнювання по початку, щойно з'являється прокрутка. Для старих
 * браузерів перед ним стоїть простий flex-start: там стрічка почнеться
 * зліва — не так гарно, але нічого не зникає.
 *
 * Краї розмиваємо маскою: обрізана мініатюра тоді читається як «далі є
 * ще», а не як зламана верстка. Поки прокрутки немає, мініатюри стоять
 * посередині й маски не торкаються.
 */
.sd-modal__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	z-index: 2;
	display: flex;
	justify-content: flex-start;
	justify-content: safe center;
	gap: 8px;
	padding: 6px 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 14px;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

.sd-modal__thumbs::-webkit-scrollbar {
	display: none;
}

.sd-modal__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, .14);
	background-color: #fff;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	padding: 0;
	transition: border-color .2s ease, transform .2s ease;
}

.sd-modal__thumb:hover {
	transform: translateY(-2px);
}

.sd-modal__thumb.is-on {
	border-color: var(--green);
}

@media (max-width: 700px) {
	.sd-modal__nav {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.sd-modal__thumb {
		width: 42px;
		height: 42px;
	}
}

/* Опис товару з редактора — під характеристиками, лише коли заповнений. */
.sd-modal__desc {
	font-size: 13.5px;
	line-height: 1.62;
	color: var(--mut);
	margin: 2px 0 4px;
	white-space: pre-line;
}

.sd-card__media .sd-card__wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: rgba(14, 17, 18, .7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .16);
}

.sd-card__cart {
	flex: none;
	background: none;
	border: 1px solid rgba(61, 205, 88, .45);
	color: var(--green);
	border-radius: 10px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	padding: 0;
}

.sd-card__cart:hover {
	background: var(--green);
	color: var(--ink);
}

.sd-card__more {
	margin-left: auto;
}

/* --- Галерея: заголовок і підказка --- */
.sd-gal__head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}

.sd-gal__note {
	font-size: 13.5px;
	color: var(--mut-2);
	max-width: 330px;
}

.sd-gal__hint {
	display: none;
	font-size: 11.5px;
	color: var(--mut-4);
	margin-top: 10px;
	letter-spacing: .06em;
}

/* --- Швидке замовлення: окреме вікно поверх картки товару --- */

/*
 * z-index вищий за картку (90) і за шапку: вікно відкривається з картки
 * і має накрити її цілком, разом із кнопкою, яка його викликала.
 */
.sd-qo {
	position: fixed;
	inset: 0;
	z-index: 95;
	background: rgba(8, 10, 11, .78);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 4vw, 24px);
	overflow: auto;
}

.sd-qo__box {
	position: relative;
	width: 100%;
	max-width: 430px;
	margin: auto;
	background: var(--panel);
	border: 1px solid rgba(61, 205, 88, .34);
	border-radius: 22px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	padding: clamp(22px, 5vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	animation: sd-pop-in .3s both;
}

.sd-qo__close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: rgba(14, 17, 18, .8);
	border: 1px solid rgba(255, 255, 255, .15);
	color: var(--soft);
	width: 32px;
	height: 32px;
	border-radius: 11px;
	font-size: 13px;
	line-height: 1;
	padding: 0;
}

.sd-qo__close:hover {
	color: var(--red);
	border-color: var(--red);
}

.sd-qo__h {
	/* Праворуч лишаємо місце під хрестик, щоб довгий заголовок не заповз під нього. */
	padding-right: 40px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--head);
}

.sd-qo__hint {
	font-size: 12.5px;
	color: var(--mut-2);
	line-height: 1.55;
	margin-bottom: 4px;
}

/* Рядок товару: що саме замовляють і за скільки. */
.sd-qo__item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--ink);
	border: 1px solid var(--hair);
	border-radius: 16px;
	padding: 10px 14px 10px 10px;
	margin-bottom: 4px;
}

/*
 * Знімки товарів приходять від виробника на білому тлі — плитка під
 * фото теж біла, інакше механізм світився б прямокутником на темному.
 */
.sd-qo__thumb {
	flex: none;
	width: 56px;
	height: 56px;
	object-fit: contain;
	background: #fff;
	border-radius: 12px;
	padding: 4px;
}

.sd-qo__body {
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Назви від постачальника довгі — «Одноклавішний вимикач 10А-250В,
 * Білий, Sedna Design SDD111101». У чотири рядки вони розсовували
 * рядок товару вище за поля, заради яких вікно й відкрили. Два рядки:
 * що це за товар — зрозуміло, а решта є в картці позаду.
 */
.sd-qo__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--head);
}

.sd-qo__sub {
	font-size: 11.5px;
	color: var(--mut-2);
	margin-top: 3px;
}

.sd-qo__price {
	flex: none;
	font-size: 15px;
	font-weight: 800;
	color: var(--green);
	white-space: nowrap;
}

.sd-qo .sd-input {
	background: var(--ink);
	border-radius: 12px;
	padding: 13px 15px;
}

.sd-qo__legal {
	font-size: 11px;
	color: var(--mut-4);
	line-height: 1.5;
	text-align: center;
}

@media (max-width: 420px) {
	/* На вузькому екрані фото з'їдає пів рядка — підтискаємо його. */
	.sd-qo__thumb {
		width: 44px;
		height: 44px;
	}
}

/* --- Кошик вікном поверх сторінки --- */

/*
 * Вище за попап «додано в кошик» (99): вікно відкривається саме з нього,
 * і лишати той висіти поверх нема сенсу.
 */
.sd-cartpop {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(8, 10, 11, .74);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(10px, 3vw, 28px);
	overflow: auto;
}

.sd-cartpop__box {
	position: relative;
	width: 100%;
	/*
	 * Вміст такої самої ширини, як на сторінці кошика (sd-wrap--md,
	 * 1080px), — плюс власні поля вікна. Тоді обидва кошики верстаються
	 * однаково: та сама сітка, ті самі переноси в рядках.
	 */
	max-width: calc(1080px - 2 * var(--pad) + 2 * clamp(22px, 4vw, 34px));
	margin: auto;
	background: var(--ink);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: clamp(18px, 3vw, 26px);
	box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
	padding: clamp(22px, 4vw, 34px);
	animation: sd-pop-in .3s both;
}

.sd-cartpop__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	background: rgba(14, 17, 18, .8);
	border: 1px solid rgba(255, 255, 255, .15);
	color: var(--soft);
	width: 36px;
	height: 36px;
	border-radius: 12px;
	font-size: 15px;
	line-height: 1;
	padding: 0;
}

.sd-cartpop__close:hover {
	color: var(--red);
	border-color: var(--red);
}

.sd-cartpop__h {
	/* Місце під хрестик, щоб заголовок не заповз під нього. */
	margin: 0 44px 26px 0;
	font-size: clamp(24px, 4vw, 32px);
}

/*
 * На сторінці підсумок липне до шапки під час прокрутки. У вікні
 * прокручується список, а підсумок і так стоїть на місці.
 */
.sd-cartpop .sd-cols__side {
	position: static;
}

@media (min-width: 900px) {
	/*
	 * Десяток позицій не має розтягувати вікно на три екрани.
	 * Гортається список ліворуч; вікно, заголовок і підсумок із кнопкою
	 * «Оформити замовлення» лишаються там, де були.
	 *
	 * Лише на широкому екрані: коли колонки стають одна під одною,
	 * підсумок опиняється під списком, і власна прокрутка списку сховала
	 * б його від покупця. Там гортається все вікно, як і раніше.
	 */
	.sd-cartpop__box {
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 2 * clamp(10px, 3vw, 28px));
		overflow: hidden;
	}

	.sd-cartpop__h {
		flex: none;
	}

	.sd-cartpop .sd-cols {
		flex: 1 1 auto;
		min-height: 0;
		/*
		 * Розтягуємо колонки на всю висоту рядка — інакше списку нема з
		 * чого брати висоту, і він просто виріс би за межі вікна.
		 * nowrap обов'язковий: у рядку, який може переноситись, висоту
		 * задає найвищий елемент, а не контейнер, — і стискатись список
		 * знову не став би.
		 */
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.sd-cartpop .sd-cols__main {
		min-height: 0;
		max-height: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* Щоб рядки не тиснулись до смуги прокрутки. */
		padding-right: 8px;
	}

	/* Підсумок висоти списку не успадковує — він рівно такий, як його вміст. */
	.sd-cartpop .sd-cols__side {
		align-self: flex-start;
	}
}

/* --- Попап «додано в кошик» --- */
.sd-addpop {
	position: fixed;
	top: 74px;
	right: clamp(10px, 3vw, 20px);
	z-index: 99;
	width: min(330px, calc(100vw - 20px));
	background: var(--panel);
	border: 1px solid rgba(61, 205, 88, .45);
	border-radius: 20px;
	box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
	padding: 16px 16px 14px;
	animation: sd-slide-in .32s cubic-bezier(.2, .8, .3, 1) both;
}

.sd-addpop__head {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 13px;
}

.sd-addpop__tick {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--green);
	color: var(--ink);
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	flex: none;
}

.sd-addpop__title {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green);
	font-weight: 800;
	flex: 1;
}

.sd-addpop__close {
	background: none;
	border: none;
	color: var(--mut-4);
	font-size: 15px;
	padding: 2px 4px;
	flex: none;
	line-height: 1;
}

.sd-addpop__close:hover {
	color: var(--red);
}

.sd-addpop__item {
	display: flex;
	gap: 12px;
	align-items: center;
}

.sd-addpop__thumb {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	flex: none;
}

.sd-addpop__body {
	flex: 1;
	min-width: 0;
}

.sd-addpop__name {
	font-size: 13.5px;
	font-weight: 800;
	color: #edece7;
	line-height: 1.3;
}

.sd-addpop__sub {
	font-size: 11.5px;
	color: var(--mut-2);
	margin-top: 3px;
}

.sd-addpop__price {
	font-family: var(--display);
	font-size: 15px;
	color: var(--head);
	white-space: nowrap;
}

.sd-addpop__foot {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	border-top: 1px dashed rgba(255, 255, 255, .14);
	margin-top: 13px;
	padding-top: 12px;
	font-size: 12px;
	color: var(--mut-2);
}

.sd-addpop__foot b {
	font-family: var(--display);
	font-weight: 400;
	font-size: 17px;
	color: var(--head);
	white-space: nowrap;
}

.sd-addpop__actions {
	display: flex;
	gap: 8px;
	margin-top: 13px;
}

.sd-addpop__actions .sd-btn--fill {
	flex: 1;
	padding: 12px;
	font-size: 13px;
}

.sd-addpop__actions .sd-btn--ghost {
	flex: none;
	padding: 12px 16px;
	font-size: 13px;
}

/* --- Кошик: знижка від суми --- */
.sd-vol {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	color: var(--green);
	font-weight: 800;
	padding: 9px 0 0;
}

.sd-vol__next {
	font-size: 11.5px;
	color: var(--mut-2);
	line-height: 1.5;
	margin-bottom: 4px;
}

/* =========================================================================
   23. v4 — адаптив
   ====================================================================== */

@media (max-width: 559px) {
	/* Чотири trust-картки з'їдають екран — замінюємо на рядок пігулок. */
	.sd-pills {
		display: flex;
	}

	.sd-trustwrap .sd-trust {
		display: none;
	}

	/* Ціна займає весь рядок, кнопки — під нею. */
	.sd-card__price {
		flex: 1 1 100%;
	}

	/* Галерея стає горизонтальною каруселлю зі snap. */
	.sd-bento {
		display: flex;
		grid-auto-rows: auto;
		grid-template-rows: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding: 2px var(--pad) 6px;
		margin: 0 calc(-1 * var(--pad));
	}

	.sd-bento__cell {
		flex: 0 0 78vw;
		height: clamp(220px, 52vw, 300px);
		scroll-snap-align: center;
	}

	.sd-bento__cell--tall {
		grid-row: auto;
	}

	.sd-bento__cell--over {
		display: block;
	}

	.sd-gal__hint {
		display: block;
	}

	/* Компактні кімнати калькулятора — щоб рядок лишався одним. */
	.sd-calc__rooms {
		gap: 7px;
	}

	.sd-room {
		gap: 8px;
		padding: 9px 12px;
		border-radius: 14px;
		flex-wrap: nowrap;
	}

	.sd-room__name {
		flex: 1 1 60px;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.sd-room__step {
		flex: none;
		gap: 5px;
	}

	.sd-room__step > span:first-child {
		flex: none;
		font-size: 10.5px;
		font-weight: 800;
	}

	.sd-room__step button {
		width: 26px;
		height: 26px;
	}

	.sd-room__n {
		font-size: 13.5px;
		min-width: 18px;
	}

	/* Підпис на телефоні тихіший — місце віддаємо самому комплекту. */
	.sd-stage__cap b {
		font-size: 12px;
	}

	.sd-stage__cap span {
		font-size: 11px;
	}

	/*
	 * В один рядок половинки тут не стають ніколи, тож ставимо їх одна під
	 * одну свідомо — і крапку-роздільник прибираємо: між рядками вона вже
	 * нічого не розділяє.
	 */
	.sd-stage__fins {
		flex-direction: column;
		gap: 2px;
	}

	.sd-stage__sep {
		display: none;
	}

	.sd-addpop {
		top: auto;
		bottom: 16px;
		right: 10px;
		left: 10px;
		width: auto;
	}
}

/* =========================================================================
   Підказки Нової Пошти

   Список міст і відділень над полем. Позиціонується від .sd-ac, тому
   обгортка обов'язково relative — інакше список тікає на початок форми.
   ====================================================================== */

.sd-ac {
	position: relative;
}

.sd-ac__list {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 280px;
	overflow-y: auto;
	background: var(--ink-3);
	border: 1px solid var(--hair-2);
	border-radius: 14px;
	box-shadow: 0 22px 50px rgba(0, 0, 0, .55);
	padding: 6px;
}

.sd-ac__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 11px;
	border: none;
	border-radius: 10px;
	background: none;
	color: var(--soft);
	font-family: var(--body);
	font-size: 13.5px;
	text-align: left;
	cursor: pointer;
}

.sd-ac__item:hover,
.sd-ac__item.is-on {
	background: rgba(61, 205, 88, .12);
	color: var(--text);
}

.sd-ac__main {
	min-width: 0;
	flex: 1;
}

.sd-ac__note {
	flex: none;
	font-size: 11.5px;
	color: var(--mut-3);
}

.sd-ac__empty {
	padding: 11px;
	font-size: 13px;
	color: var(--mut-2);
}

/*
 * Логотип перевізника замість текстової плашки.
 *
 * Без фону й радіуса: офіційні файли приходять із власним щитом і
 * заокругленням, а зайва підкладка робила б із них наліпку на наліпці.
 *
 * display: block обов'язковий — він перебиває grid із базового класу.
 * У сітці з place-items: center висота доріжки вважається невизначеною,
 * тому height: 100% на картинці ставало auto: логотип лишався квадратним
 * і його зрізало знизу. У звичайному блоці відсотки рахуються від
 * заданих 44×28, а object-fit вписує будь-яку пропорцію без спотворень.
 */
.sd-opt__logo--img {
	display: block;
	background: none;
	border-radius: 0;
	width: 44px;
	height: 28px;
	padding: 0;
}

.sd-opt__logo--img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

/* Пояснення замість кнопки, поки комплект нема з чого зібрати. */
.sd-try__soon {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed rgba(255, 255, 255, .18);
	border-radius: 12px;
	color: var(--mut);
	font-size: 13px;
	line-height: 1.55;
}