/* UV-DTF Calculator — frontend styles */

/* ═══════════════════════════════════════════════════════════════════════
   ТЕМА КАЛЬКУЛЯТОРА (рішення власника 01.08): технологія = колір сторінки.
   UV-DTF — бузкова бренд-гама, DTF — тепла янтарна. Клієнт бачить, де він.

   Змінні заскоуплені на КОРІНЬ калькулятора (.uvdtf-calc), тому:
   • хедер/футер/решта сайту не зачеплені взагалі;
   • на сторінці кабінету, де ДВА калькулятори поруч, кожен лишається
     у своїй темі (змінні на body свідомо НЕ виносимо).
   Кожне звернення в правилах іде з фолбеком на початковий hex — елементи
   поза калькулятором (НП-пікер на «Адресах» кабінету) рендеряться як були.
   ═══════════════════════════════════════════════════════════════════════ */
.uvdtf-calc {
	/* Темні — текст на світлих тінтах */
	--uvc-ink-900: #4c1d95;
	--uvc-ink-800: #5b21b6;
	--uvc-ink-700: #6b21a8;
	/* Акценти — кнопки, цифри, активні стани */
	--uvc-acc:     #6d28d9;
	--uvc-acc-600: #7c3aed;
	--uvc-acc-500: #8b5cf6;
	--uvc-acc-400: #a78bfa;
	/* Межі */
	--uvc-bd-300: #c4b5fd;
	--uvc-bd-310: #c9bdf0;
	--uvc-bd-320: #ddcef7;
	--uvc-bd-330: #dcd5ec;
	--uvc-bd-340: #e2dcf0;
	--uvc-bd-200: #ddd6fe;
	--uvc-bd-210: #e9d5ff;
	--uvc-bd-220: #e6e1f2;
	--uvc-bd-230: #e9e4f5;
	/* Тінти — фони блоків */
	--uvc-tint-100: #ede9fe;
	--uvc-tint-60:  #f1eafc;
	--uvc-tint-55:  #f3efff;
	--uvc-tint-54:  #f3f0fa;
	--uvc-tint-50:  #f4eefe;
	--uvc-tint-45:  #f5f1fd;
	--uvc-tint-40:  #f5f3ff;
	--uvc-tint-35:  #f6f1fe;
	--uvc-tint-30:  #f8f5ff;
	--uvc-tint-25:  #f8f6fd;
	--uvc-tint-20:  #faf5ff;
	--uvc-tint-15:  #faf8ff;
	/* Для rgba()-тіней */
	--uvc-acc-rgb:     109,40,217;
	--uvc-acc-600-rgb: 124,58,237;
	--uvc-ink-800-rgb: 91,33,182;
	--uvc-ink-900-rgb: 76,29,149;

	/* Кольори ТЕХНОЛОГІЙ — НЕ залежать від теми сторінки: секція UV-DTF
	   завжди бузкова, секція DTF завжди янтарна на ОБОХ сторінках
	   (тема = де я, секція = що це). Ті самі квадратики, що й у заявці TG. */
	--uvtech-uvdtf-ac: #6d28d9;
	--uvtech-uvdtf-bg: #f4eefe;
	--uvtech-uvdtf-tx: #4c1d95;
	--uvtech-dtf-ac:   #d97706;
	--uvtech-dtf-bg:   #fff7e6;
	--uvtech-dtf-tx:   #78350f;
}

/* DTF-сторінка — янтарна тема. Акцент #b45309: білий текст на ньому дає
   контраст ~5:1 (AA і для дрібного), тому кнопки лишаються читабельними. */
.uvdtf-calc--dtf {
	--uvc-ink-900: #78350f;
	--uvc-ink-800: #92400e;
	--uvc-ink-700: #9a3412;
	--uvc-acc:     #b45309;
	--uvc-acc-600: #c2610a;
	--uvc-acc-500: #d97706;
	--uvc-acc-400: #f59e0b;
	--uvc-bd-300: #fbc866;
	--uvc-bd-310: #f5d6a0;
	--uvc-bd-320: #f3dfae;
	--uvc-bd-330: #ecdcc2;
	--uvc-bd-340: #eee0c6;
	--uvc-bd-200: #fde3a7;
	--uvc-bd-210: #fbdca0;
	--uvc-bd-220: #eee5d5;
	--uvc-bd-230: #f0e6d4;
	--uvc-tint-100: #fdefd0;
	--uvc-tint-60:  #fdf3de;
	--uvc-tint-55:  #fff6e4;
	--uvc-tint-54:  #f8f4ec;
	--uvc-tint-50:  #fff7e6;
	--uvc-tint-45:  #fff6e2;
	--uvc-tint-40:  #fff8ea;
	--uvc-tint-35:  #fff7e6;
	--uvc-tint-30:  #fffaf0;
	--uvc-tint-25:  #fffaf0;
	--uvc-tint-20:  #fffbeb;
	--uvc-tint-15:  #fffcf3;
	--uvc-acc-rgb:     180,83,9;
	--uvc-acc-600-rgb: 194,97,10;
	--uvc-ink-800-rgb: 146,64,14;
	--uvc-ink-900-rgb: 120,53,15;
}

/* 🟦 Прямий UV-друк — синя тема. Акцент #2563eb (blue-600): білий жирний
   текст на ньому читається (≈4.6:1), тому кнопки лишаються контрастними;
   для дрібного тексту всередині картки використовуємо --uvc-ink-800 (7:1+). */
.uvdtf-calc--uvprint {
	--uvc-ink-900: #1e3a8a;
	--uvc-ink-800: #1e40af;
	--uvc-ink-700: #1d4ed8;
	--uvc-acc:     #2563eb;
	--uvc-acc-600: #3b82f6;
	--uvc-acc-500: #60a5fa;
	--uvc-acc-400: #93c5fd;
	--uvc-bd-300: #93c5fd;
	--uvc-bd-310: #a8c8f0;
	--uvc-bd-320: #c2ddf7;
	--uvc-bd-330: #cfdcee;
	--uvc-bd-340: #d8e3f2;
	--uvc-bd-200: #bfdbfe;
	--uvc-bd-210: #dbeafe;
	--uvc-bd-220: #dde5f0;
	--uvc-bd-230: #e2eaf5;
	--uvc-tint-100: #dbeafe;
	--uvc-tint-60:  #e6f0fd;
	--uvc-tint-55:  #eaf3ff;
	--uvc-tint-54:  #eef3fa;
	--uvc-tint-50:  #eaf2fe;
	--uvc-tint-45:  #eff5fd;
	--uvc-tint-40:  #eff6ff;
	--uvc-tint-35:  #f0f6fe;
	--uvc-tint-30:  #f5f9ff;
	--uvc-tint-25:  #f6f9fd;
	--uvc-tint-20:  #f5faff;
	--uvc-tint-15:  #f8fbff;
	--uvc-acc-rgb:     37,99,235;
	--uvc-acc-600-rgb: 59,130,246;
	--uvc-ink-800-rgb: 30,64,175;
	--uvc-ink-900-rgb: 30,58,138;
	/* Колір ТЕХНОЛОГІЇ (не залежить від теми сторінки) — 🟦 як у заявці TG. */
	--uvtech-uvprint-ac: #2563eb;
	--uvtech-uvprint-bg: #eff6ff;
	--uvtech-uvprint-tx: #1e3a8a;
}

.uvdtf-calc__consent {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 20px 0 10px;
	padding: 14px 16px;
	background: var(--uvc-tint-20, #faf5ff);
	border: 1px solid var(--uvc-bd-210, #e9d5ff);
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #1f2937;
	cursor: pointer;
}
.uvdtf-calc__consent input[type="checkbox"] {
	margin: 2px 0 0;
	width: 18px;
	height: 18px;
	accent-color: var(--uvc-acc, #6d28d9);
	flex-shrink: 0;
	cursor: pointer;
}
.uvdtf-calc__consent a {
	color: var(--uvc-acc, #6d28d9);
	font-weight: 600;
	text-decoration: underline;
}
.uvdtf-calc__consent a:hover { color: var(--uvc-ink-800, #5b21b6); }
.uvdtf-calc__consent.is-invalid {
	border-color: #ef4444;
	background: #fef2f2;
}

/* Підсвітка невалідного поля при відправці заявки (фокус — задача calc.js).
   Червоний семантичний колір — один на обидві теми (бузкову UV і янтарну
   DTF): тут це «помилка», а не акцент технології, змішувати не варто. */
.uvdtf-calc__field input.is-invalid,
.uvdtf-calc__field select.is-invalid {
	border-color: #ef4444 !important;
	background: #fef2f2;
	box-shadow: 0 0 0 1px #ef4444;
}
.uvdtf-calc__field input.is-invalid:focus,
.uvdtf-calc__field select.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(239,68,68,.2);
}

.uvdtf-calc__msg-ico {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: -5px;
	margin-right: 4px;
	flex-shrink: 0;
}
.uvdtf-calc__del-ico {
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: -10px;
	margin-right: 6px;
	flex-shrink: 0;
	image-rendering: pixelated;
}

.uvdtf-calc {
	max-width: 780px;
	margin: 24px auto;
	padding: 28px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1f2937;
}

.uvdtf-calc * { box-sizing: border-box; }

.uvdtf-calc__title {
	margin: 0 0 6px;
	font-size: 1.5em;
	font-weight: 700;
	color: var(--uvc-acc, #6d28d9);
}

.uvdtf-calc__lead {
	margin: 0 0 22px;
	color: #6b7280;
	font-size: 0.95em;
}


/* --- Список наклеек --- */

.uvdtf-calc__designs {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 14px;
}

.uvdtf-calc__design {
	background: #fafafa;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 16px 18px 8px;
	animation: uvdtf-slide-in 0.25s ease;
}

@keyframes uvdtf-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.uvdtf-calc__design-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.uvdtf-calc__design-num {
	font-weight: 700;
	color: var(--uvc-acc, #6d28d9);
	font-size: 0.95em;
}

.uvdtf-calc__design-remove {
	background: transparent;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	padding: 0;
}

.uvdtf-calc__design-remove:hover:not([disabled]) {
	background: #fee2e2;
	border-color: #fca5a5;
	color: #991b1b;
}

.uvdtf-calc__design-remove[disabled] {
	opacity: 0.3;
	cursor: not-allowed;
}

/* --- Кнопка добавления --- */

.uvdtf-calc__add {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 14px 18px;
	background: #ffffff;
	border: 2px dashed var(--uvc-bd-300, #c4b5fd);
	border-radius: 10px;
	color: var(--uvc-acc, #6d28d9);
	font-size: 0.95em;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	margin-bottom: 18px;
	transition: background 0.15s, border-color 0.15s;
}

.uvdtf-calc__add:hover:not([disabled]) {
	background: var(--uvc-tint-40, #f5f3ff);
	border-color: var(--uvc-acc-500, #8b5cf6);
}

.uvdtf-calc__add[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.uvdtf-calc__add-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--uvc-acc, #6d28d9);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.95em;
}

.uvdtf-calc__add-counter {
	margin-left: auto;
	color: #6b7280;
	font-size: 0.85em;
	font-weight: 500;
}

/* --- Поля формы --- */

.uvdtf-calc__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}

.uvdtf-calc__field {
	display: block;
	margin-bottom: 12px;
}

.uvdtf-calc__field > span {
	display: block;
	font-size: 0.8em;
	color: #4b5563;
	margin-bottom: 5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.uvdtf-calc__field input[type="number"],
.uvdtf-calc__field input[type="text"],
.uvdtf-calc__field input[type="tel"],
.uvdtf-calc__field input[type="email"],
.uvdtf-calc__field input[type="file"],
.uvdtf-calc__field textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 1em;
	font-family: inherit;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
	color: #1f2937;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.uvdtf-calc__field input:focus,
.uvdtf-calc__field textarea:focus {
	outline: none;
	border-color: var(--uvc-acc, #6d28d9);
	box-shadow: 0 0 0 3px rgba(var(--uvc-acc-rgb, 109,40,217), 0.15);
}

.uvdtf-calc__field input[type="file"] {
	/* native input hidden — the visible affordance is .uvdtf-calc__file-btn;
	   the small .uvdtf-calc__file-pick <label> triggers the picker on click. */
	display: none;
}

/* ============================================================
   Mockup source: "upload file" OR "paste link" — two equal cards
   separated by a round «або» badge. Cards stack on mobile.
   ============================================================ */
.uvdtf-calc__row--mockup {
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 14px;
}

@media (max-width: 640px) {
	.uvdtf-calc__row--mockup {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

.uvdtf-calc__mockup-or {
	align-self: center;
	justify-self: center;
	width: 36px;
	height: 36px;
	line-height: 34px;
	text-align: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--uvc-bd-200, #ddd6fe);
	box-shadow: 0 1px 3px rgba(var(--uvc-acc-rgb, 109,40,217), 0.08);
	color: var(--uvc-acc-600, #7c3aed);
	font-size: 0.72em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.uvdtf-calc__row--mockup .uvdtf-calc__file-field,
.uvdtf-calc__row--mockup .uvdtf-calc__link-field {
	background: #fff;
	border: 1px solid var(--uvc-bd-200, #ddd6fe);
	border-radius: 10px;
	padding: 12px 14px 14px;
	margin: 0;
	display: flex;
	flex-direction: column;
	transition: border-color .15s, box-shadow .15s, background .15s;
}

.uvdtf-calc__row--mockup .uvdtf-calc__file-field:hover,
.uvdtf-calc__row--mockup .uvdtf-calc__link-field:hover,
.uvdtf-calc__row--mockup .uvdtf-calc__link-field:focus-within {
	border-color: var(--uvc-acc-600, #7c3aed);
	box-shadow: 0 2px 8px rgba(var(--uvc-acc-600-rgb, 124,58,237), 0.12);
}

/* a file is attached — the card confirms it in green */
.uvdtf-calc__row--mockup .uvdtf-calc__file-field.has-file {
	border-color: #34d399;
	background: #f6fef9;
}

/* controls sit on a shared bottom line in both cards */
.uvdtf-calc__row--mockup .uvdtf-calc__file-pick,
.uvdtf-calc__row--mockup .uvdtf-calc__link-field input {
	margin-top: auto;
}

.uvdtf-calc__file-pick {
	display: inline-block;
	align-self: flex-start;
	cursor: pointer;
}

.uvdtf-calc__file-btn {
	display: inline-block;
	padding: 9px 18px;
	background: var(--uvc-acc, #6d28d9);
	color: #fff;
	border: 1px solid var(--uvc-acc, #6d28d9);
	border-radius: 7px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, box-shadow .15s;
	user-select: none;
}
.uvdtf-calc__file-pick:hover .uvdtf-calc__file-btn {
	background: var(--uvc-ink-800, #5b21b6);
	box-shadow: 0 2px 6px rgba(var(--uvc-ink-800-rgb, 91,33,182), 0.3);
}
.uvdtf-calc__file-btn::before { content: '📎 '; }

/* chosen file name — green confirmation under the button */
.uvdtf-calc__file-name:not(:empty) {
	margin-top: 8px;
	color: #047857;
	font-weight: 600;
}
.uvdtf-calc__file-name:not(:empty)::before { content: '✓ '; }

.uvdtf-calc__field textarea {
	resize: vertical;
	min-height: 80px;
}

.uvdtf-calc__file-field {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* Месенджеры */
.uvdtf-calc__messengers {
	margin: 14px 0;
}

.uvdtf-calc__messengers-label {
	display: block;
	font-size: 0.85em;
	color: #4b5563;
	font-weight: 600;
	margin-bottom: 8px;
}

.uvdtf-calc__messengers-label small {
	font-weight: 400;
	color: #9ca3af;
}

.uvdtf-calc__messengers-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uvdtf-calc__messengers .uvdtf-calc__checkbox {
	margin-bottom: 0;
}

/* Radio-группы для доставки и оплаты */
.uvdtf-calc__delivery-type,
.uvdtf-calc__payment {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}

.uvdtf-calc__radio {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.95em;
	transition: background 0.15s, border-color 0.15s;
}

.uvdtf-calc__radio:hover {
	background: var(--uvc-tint-40, #f5f3ff);
	border-color: var(--uvc-bd-300, #c4b5fd);
}

.uvdtf-calc__radio input { margin: 0; flex-shrink: 0; }

.uvdtf-calc__radio:has(input:checked) {
	background: var(--uvc-tint-100, #ede9fe);
	border-color: var(--uvc-acc-500, #8b5cf6);
	box-shadow: 0 0 0 1px var(--uvc-acc-500, #8b5cf6);
}

.uvdtf-calc__radio small {
	display: block;
	color: #6b7280;
	font-weight: 400;
	margin-top: 2px;
}

/* «💰 Оплатити з балансу» — гаманець сайту (тільки залогінений з коштами) */
.uvdtf-calc__balance {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 4px;
	padding: 11px 14px;
	background: var(--uvc-tint-25, #f8f6fd);
	border: 1px solid var(--uvc-bd-200, #ddd6fe);
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.93em;
	line-height: 1.45;
	transition: background 0.15s, border-color 0.15s;
}

.uvdtf-calc__balance:hover { background: var(--uvc-tint-55, #f3efff); border-color: var(--uvc-bd-300, #c4b5fd); }

.uvdtf-calc__balance:has(input:checked) {
	background: var(--uvc-tint-100, #ede9fe);
	border-color: var(--uvc-acc-500, #8b5cf6);
	box-shadow: 0 0 0 1px var(--uvc-acc-500, #8b5cf6);
}

.uvdtf-calc__balance input {
	width: 17px;
	height: 17px;
	margin: 2px 0 0;
	accent-color: var(--uvc-acc, #6d28d9);
	flex-shrink: 0;
}

.uvdtf-calc__balance-text b { color: var(--uvc-ink-900, #4c1d95); }

.uvdtf-calc__balance-text small {
	display: block;
	margin-top: 2px;
	color: #6b7280;
	font-weight: 400;
}

/* Сводка раскладки в финальном блоке цены */
.uvdtf-calc__layout-summary {
	margin-top: 14px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--uvc-bd-300, #c4b5fd);
	border-radius: 8px;
	font-size: 0.9em;
	color: var(--uvc-ink-900, #4c1d95);
}

.uvdtf-calc__layout-summary-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	margin-bottom: 6px;
}

.uvdtf-calc__layout-summary-icon {
	font-size: 1em;
	flex-shrink: 0;
}

.uvdtf-calc__layout-list {
	margin: 0;
	padding: 0 0 0 26px;
	list-style: disc;
	color: var(--uvc-ink-900, #4c1d95);
	line-height: 1.5;
}

.uvdtf-calc__layout-list li {
	margin: 6px 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
}
.uvdtf-calc__layout-dims {
	display: inline-block;
	background: var(--uvc-tint-100, #ede9fe);
	color: var(--uvc-ink-900, #4c1d95);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.95em;
	font-weight: 700;
}
.uvdtf-calc__layout-detail {
	display: block;
	width: 100%;
	margin-left: 18px;
	color: #6b7280;
	font-size: 0.9em;
}

.uvdtf-calc__layout-color {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	flex-shrink: 0;
}

/* Контент: список + SVG превью бок-о-бок (на широких экранах) */
.uvdtf-calc__layout-content {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 16px;
	margin: 12px 0;
	align-items: flex-start;
}

.uvdtf-calc__layout-text { min-width: 0; }

/* Дві колонки-превʼю: аркуші + рулон (показується лише те, де є позиції) */
.uvdtf-calc__previews {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.uvdtf-calc__roll-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/* display:flex перебиває [hidden] — ховаємо явно (тема XStore теж це любить) */
.uvdtf-calc__roll-preview[hidden] { display: none; }

.uvdtf-calc__roll-ruler-top,
.uvdtf-calc__roll-ruler-bottom {
	font-size: 0.72em;
	color: #6b7280;
	font-weight: 600;
}

.uvdtf-calc__roll-svg-wrap {
	width: 140px;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #ffffff;
	border-radius: 4px;
	scrollbar-width: thin;
}

.uvdtf-calc__roll-svg-wrap svg {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 600px) {
	.uvdtf-calc__layout-content {
		grid-template-columns: 110px 1fr;
		gap: 12px;
	}
	.uvdtf-calc__roll-svg-wrap { width: 100px; }
}

.uvdtf-calc__layout-list li.is-oversize {
	color: #92400e;
	font-weight: 600;
}

/* Позиція, що не поміщається на аркуш А3 — явне червоне попередження в рядку */
.uvdtf-calc__layout-detail.uvdtf-calc__layout-warn {
	color: #b91c1c;
	font-weight: 600;
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	border-radius: 4px;
	padding: 6px 8px;
	margin-top: 4px;
}

small.uvdtf-calc__layout-warn {
	color: #b91c1c;
	font-weight: 600;
}

.uvdtf-calc__layout-alt {
	color: #9ca3af;
	font-weight: 400;
}

/* Универсальные «note» под списком раскладки */
.uvdtf-calc__note {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.88em;
	line-height: 1.5;
}

/* display:flex перебивав браузерний [hidden]{display:none} — попередження
   під розкладкою показувались завжди. Ховаємо явно. */
.uvdtf-calc__note[hidden] { display: none !important; }

.uvdtf-calc__note-icon {
	font-size: 1.1em;
	flex-shrink: 0;
	font-weight: 700;
}

.uvdtf-calc__note--info {
	background: #eff6ff;
	border: 1px solid #93c5fd;
	color: #1e3a8a;
}

.uvdtf-calc__note--warn {
	background: #fff7ed;
	border: 1px solid #fdba74;
	color: #9a3412;
}

.uvdtf-calc__file-name {
	display: block;
	font-size: 0.8em;
	color: #16a34a;
	margin-top: 4px;
	font-weight: 600;
	word-break: break-all;
}

.uvdtf-calc__link-status {
	display: block;
	font-size: 0.82em;
	margin-top: 4px;
	padding: 4px 8px;
	border-radius: 4px;
	font-weight: 600;
	word-break: break-word;
}

.uvdtf-calc__link-status.is-checking { background: #f3f4f6; color: #4b5563; }
.uvdtf-calc__link-status.is-ok       { background: #ecfdf5; color: #065f46; }
.uvdtf-calc__link-status.is-warn     { background: #fef3c7; color: #92400e; }
.uvdtf-calc__link-status.is-error    { background: #fee2e2; color: #991b1b; }
.uvdtf-calc__link-status.is-restricted { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

.uvdtf-calc__file-hint {
	display: block;
	font-size: 0.78em;
	color: #9ca3af;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	margin-top: 3px;
}

/* Підказка для картон-чекбокса */
.uvdtf-calc__cardboard-tip {
	margin: -4px 0 10px 38px;
	padding: 0;
}

.uvdtf-calc__cardboard-tip > summary {
	font-size: 0.82em;
	color: var(--uvc-acc, #6d28d9);
	cursor: pointer;
	user-select: none;
	list-style: none;
	display: inline-block;
	padding: 2px 0;
	font-weight: 600;
}

.uvdtf-calc__cardboard-tip > summary::-webkit-details-marker {
	display: none;
}

.uvdtf-calc__cardboard-tip > summary:hover {
	color: var(--uvc-ink-900, #4c1d95);
	text-decoration: underline;
}

.uvdtf-calc__cardboard-tip[open] > summary {
	margin-bottom: 8px;
}

.uvdtf-calc__cardboard-tip > div {
	padding: 12px 14px;
	background: var(--uvc-tint-40, #f5f3ff);
	border-left: 3px solid var(--uvc-acc-500, #8b5cf6);
	border-radius: 6px;
	font-size: 0.85em;
	color: #4b5563;
	line-height: 1.55;
}

.uvdtf-calc__cardboard-tip > div p {
	margin: 0 0 6px;
}

.uvdtf-calc__cardboard-tip > div p:last-child {
	margin-bottom: 0;
}

.uvdtf-calc__cardboard-tip > div ul {
	margin: 4px 0 8px;
	padding-left: 20px;
}

.uvdtf-calc__cardboard-tip > div li {
	margin: 2px 0;
}

.uvdtf-calc__cardboard-tip > div b {
	color: #1f2937;
}

/* --- Цена --- */

.uvdtf-calc__price {
	background: linear-gradient(135deg, var(--uvc-tint-40, #f5f3ff) 0%, var(--uvc-tint-100, #ede9fe) 100%);
	border: 1px solid var(--uvc-bd-300, #c4b5fd);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 20px 0 14px;
}

.uvdtf-calc__price-main {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
}

.uvdtf-calc__price-label {
	display: block;
	font-size: 0.78em;
	color: var(--uvc-ink-700, #6b21a8);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

.uvdtf-calc__price-value {
	font-size: 2.4em;
	font-weight: 800;
	color: var(--uvc-acc, #6d28d9);
	line-height: 1.1;
	display: block;
	margin-top: 4px;
	transition: opacity 0.2s;
}

.uvdtf-calc__price-value.is-calculating { opacity: 0.5; }

.uvdtf-calc__price-rates {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
/* Атрибут hidden програє авторському display:flex — прибиваємо явно,
   інакше при скиданні ціни тарифи лишаються на екрані зі старими цифрами. */
.uvdtf-calc__price-rates[hidden] { display: none !important; }

/* CTA в липкій панелі ціни — та сама дія, що «Замовити друк» */
.uvdtf-calc__stickybar .sb-cta {
	background: #fff;
	color: var(--uvc-acc, #6d28d9);
	font-weight: 800;
	border-radius: 999px;
	padding: 6px 14px;
	margin-left: 10px;
	white-space: nowrap;
}

/* Плейсхолдери — явно світлі й курсивом, щоб не читались як введені дані */
.uvdtf-calc input::placeholder,
.uvdtf-calc textarea::placeholder {
	color: #b3adc6 !important;
	opacity: 1;
	font-style: italic;
	font-weight: 400;
}

/* Рядок лояльності під ціною (знижка на товари / фікс-тариф опту) */
.uvdtf-calc__loyalty-note {
	flex-basis: 100%;
	margin-top: 8px;
	padding: 8px 12px;
	background: var(--uvc-tint-40, #f5f3ff);
	border: 1px solid var(--uvc-bd-200, #ddd6fe);
	border-radius: 10px;
	font-size: 13px;
	color: var(--uvc-ink-900, #4c1d95);
	line-height: 1.45;
}
.uvdtf-calc__loyalty-note b { color: var(--uvc-acc, #6d28d9); }
.uvdtf-calc__loyalty-note a { color: var(--uvc-acc, #6d28d9); font-weight: 700; text-decoration: underline; }
.uvdtf-calc__loyalty-note[hidden] { display: none !important; }

.uvdtf-calc__rate {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.uvdtf-calc__rate-label {
	font-size: 0.7em;
	color: var(--uvc-ink-700, #6b21a8);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: 600;
}

.uvdtf-calc__rate-value {
	font-size: 1em;
	color: var(--uvc-ink-900, #4c1d95);
	font-weight: 700;
	white-space: nowrap;
}

.uvdtf-calc__next-tier {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px dashed var(--uvc-acc-400, #a78bfa);
	border-radius: 8px;
	font-size: 0.9em;
	color: var(--uvc-ink-900, #4c1d95);
	line-height: 1.4;
}

.uvdtf-calc__next-tier-icon {
	font-size: 1.1em;
	flex-shrink: 0;
}

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

.uvdtf-calc__cut {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.uvdtf-calc__cut:hover {
	border-color: var(--uvc-acc-400, #a78bfa);
}
.uvdtf-calc__cut:has(input:checked) {
	border-color: var(--uvc-acc-600, #7c3aed);
	background: var(--uvc-tint-40, #f5f3ff);
	box-shadow: 0 2px 10px rgba(var(--uvc-acc-600-rgb, 124,58,237), 0.12);
}
.uvdtf-calc__cut input {
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--uvc-acc-600, #7c3aed);
	flex-shrink: 0;
	cursor: pointer;
}
.uvdtf-calc__cut-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}
.uvdtf-calc__cut-title {
	font-weight: 600;
	color: #1f2937;
}
.uvdtf-calc__cut-rate {
	font-weight: 600;
	color: var(--uvc-acc-600, #7c3aed);
	margin-left: 4px;
}
.uvdtf-calc__cut-hint {
	color: #64748b;
	font-size: 0.85em;
	line-height: 1.4;
}
.uvdtf-calc__cut-cost {
	font-weight: 700;
	color: var(--uvc-acc-600, #7c3aed);
	white-space: nowrap;
	align-self: center;
}

/* display:flex перебиває браузерний [hidden] — підказка про наступну сходинку
   інакше висить порожньою рамкою (перевірено headless-рендером). */
.uvdtf-calc__next-tier[hidden] { display: none !important; }

/* --- 🔥 Термоперенос на виріб (DTF): чекбокс + кількість + сходинка --- */

.uvdtf-calc__transfer {
	margin-top: 10px;
}
.uvdtf-calc__transfer .uvdtf-calc__cut {
	margin-top: 0;
}
.uvdtf-calc__transfer-head:has(input:checked) {
	border-color: #ea580c;
	background: #fff7ed;
	box-shadow: 0 2px 10px rgba(234, 88, 12, 0.14);
}
.uvdtf-calc__transfer-head:hover {
	border-color: #fdba74;
}
.uvdtf-calc__transfer-head input {
	accent-color: #ea580c;
}
.uvdtf-calc__transfer-head .uvdtf-calc__cut-rate,
.uvdtf-calc__transfer-head .uvdtf-calc__cut-cost {
	color: #c2410c;
}
.uvdtf-calc__transfer-panel[hidden],
.uvdtf-calc__totals[hidden],
.uvdtf-calc__totals-row[hidden] { display: none !important; }
.uvdtf-calc__transfer-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 18px;
	margin: -1px 0 0;
	padding: 14px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	border-top: 0;
	border-radius: 0 0 10px 10px;
}
/* 🔥 Рядки «наліпка → розмірний клас → кількість переносів». Класи прописані
   з префіксом uvdtf-calc__, бо тема XStore має власні .row/.grid з !important. */
.uvdtf-calc__transfer-rows {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.uvdtf-calc__transfer-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding: 6px 8px;
	background: #fff;
	border: 1px solid #fed7aa;
	border-radius: 8px;
	font-size: 0.88em;
}
.uvdtf-calc__transfer-row.is-off {
	background: #f8f5f2;
	color: #8a7f76;
}
/* Понад-пресовий макет: пресуємо частинами — рядок з полем «частин». */
.uvdtf-calc__transfer-row.is-split {
	border-color: #fdba74;
	background: #fffbf5;
}
.uvdtf-calc__transfer-row-parts {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 0.95em;
}
.uvdtf-calc__transfer-row-parts input {
	width: 62px;
	min-width: 62px;
	padding: 4px 6px;
	text-align: center;
}
.uvdtf-calc__transfer-row-name {
	flex: 1 1 150px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
}
.uvdtf-calc__transfer-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	background: #ffedd5;
	color: #c2410c;
	font-size: 0.85em;
	font-weight: 700;
	cursor: help;
}
.uvdtf-calc__transfer-row-qty {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
}
.uvdtf-calc__transfer-row-qty input {
	width: 74px;
	min-width: 74px;
	padding: 4px 6px;
	text-align: center;
}
.uvdtf-calc__transfer-row-note {
	flex: 1 1 100%;
	font-style: italic;
}
.uvdtf-calc__transfer-row-rate {
	flex: 0 0 auto;
	color: #c2410c;
	font-weight: 600;
	white-space: nowrap;
}
.uvdtf-calc__transfer-info {
	flex: 1 1 220px;
	min-width: 0;
}
.uvdtf-calc__transfer-tier {
	font-weight: 700;
	color: #c2410c;
	font-size: 0.95em;
	margin-bottom: 3px;
}
.uvdtf-calc__transfer-note {
	display: block;
	color: #7c5b45;
	font-size: 0.82em;
	line-height: 1.4;
}
.uvdtf-calc__transfer-next {
	flex: 1 1 100%;
	margin: 0;
}

/* --- Розшивка підсумку (друк + послуги) --- */

.uvdtf-calc__totals {
	margin-top: 10px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
}
.uvdtf-calc__totals-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 0.95em;
	color: #4b5563;
	padding: 3px 0;
}
.uvdtf-calc__totals-row b {
	color: #1f2937;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.uvdtf-calc__totals-row--sum {
	margin-top: 5px;
	padding-top: 8px;
	border-top: 1px solid #e5e7eb;
	font-weight: 600;
	color: #1f2937;
}
.uvdtf-calc__totals-row--sum b {
	color: var(--uvc-acc, #6d28d9);
	font-size: 1.1em;
}

/* --- Лестница тарифов --- */

.uvdtf-calc__tiers-details {
	margin-bottom: 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 12px 16px;
	background: #fafafa;
}

.uvdtf-calc__tiers-details > summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--uvc-acc, #6d28d9);
	font-size: 0.95em;
	user-select: none;
	list-style: none;
}

.uvdtf-calc__tiers-details > summary::before {
	content: '▸ ';
	transition: transform 0.15s;
	display: inline-block;
}

.uvdtf-calc__tiers-details[open] > summary::before {
	content: '▾ ';
}

.uvdtf-calc__tiers {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.uvdtf-calc__tier {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	padding: 8px 12px;
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 0.9em;
	align-items: center;
}

.uvdtf-calc__tier.is-current {
	background: linear-gradient(135deg, var(--uvc-tint-40, #f5f3ff) 0%, var(--uvc-tint-100, #ede9fe) 100%);
	border-color: var(--uvc-acc-500, #8b5cf6);
	box-shadow: 0 0 0 1px var(--uvc-acc-500, #8b5cf6);
}

.uvdtf-calc__tier-label {
	color: #4b5563;
	font-weight: 500;
}

.uvdtf-calc__tier.is-current .uvdtf-calc__tier-label {
	color: var(--uvc-ink-900, #4c1d95);
	font-weight: 700;
}

.uvdtf-calc__tier-rate {
	font-weight: 700;
	color: var(--uvc-acc, #6d28d9);
	white-space: nowrap;
}

.uvdtf-calc__tier-rate-alt {
	color: #9ca3af;
	font-size: 0.85em;
	white-space: nowrap;
}

/* --- Доставка --- */

.uvdtf-calc__shipping {
	margin-bottom: 14px;
	padding: 12px 16px;
	background: #fff7ed;
	border: 1px solid #fdba74;
	border-radius: 10px;
}

.uvdtf-calc__shipping.is-big {
	background: #ecfdf5;
	border-color: #6ee7b7;
}

.uvdtf-calc__shipping-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.uvdtf-calc__shipping-icon {
	font-size: 1.3em;
	flex-shrink: 0;
}

.uvdtf-calc__shipping-text {
	flex: 1;
}

.uvdtf-calc__shipping-date {
	font-weight: 700;
	color: #9a3412;
	font-size: 0.95em;
}

.uvdtf-calc__shipping.is-big .uvdtf-calc__shipping-date {
	color: #065f46;
}

.uvdtf-calc__shipping-detail {
	display: block;
	margin-top: 4px;
	color: #6b7280;
	font-size: 0.85em;
	line-height: 1.4;
}

/* --- Блок заказа --- */

.uvdtf-calc__order {
	margin-top: 18px;
	padding-top: 20px;
	border-top: 1px dashed #e5e7eb;
	animation: uvdtf-fade-in 0.3s ease;
}

.uvdtf-calc__order h4 {
	margin: 0 0 14px;
	font-size: 1.15em;
	color: #1f2937;
}

@keyframes uvdtf-fade-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Действия --- */

.uvdtf-calc__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 8px;
	flex-wrap: wrap;
}

/* !important — тема XStore перебиває hover кнопок (світлий фон + білий текст
   = «кнопка зникає при наведенні»). Наші стилі мають вигравати завжди. */
.uvdtf-calc__btn,
button.uvdtf-calc__btn {
	padding: 12px 26px;
	font-size: 1em;
	font-weight: 600;
	font-family: inherit;
	border: none !important;
	border-radius: 8px;
	cursor: pointer;
	background: var(--uvc-acc, #6d28d9) !important;
	color: #ffffff !important;
	transition: background 0.15s, transform 0.1s;
}

.uvdtf-calc__btn:hover,
button.uvdtf-calc__btn:hover {
	background: var(--uvc-ink-800, #5b21b6) !important;
	color: #ffffff !important;
}
.uvdtf-calc__btn:active { transform: translateY(1px); }
.uvdtf-calc__btn[disabled] { opacity: 0.5; cursor: not-allowed; }

.uvdtf-calc__btn--secondary,
button.uvdtf-calc__btn--secondary {
	background: #ffffff !important;
	color: var(--uvc-acc, #6d28d9) !important;
	border: 2px solid var(--uvc-acc, #6d28d9) !important;
}

.uvdtf-calc__btn--secondary:hover,
button.uvdtf-calc__btn--secondary:hover {
	background: var(--uvc-tint-40, #f5f3ff) !important;
	color: var(--uvc-ink-800, #5b21b6) !important;
}

/* --- Progress bar для загрузки --- */

.uvdtf-calc__progress {
	margin-top: 12px;
}

.uvdtf-calc__progress-bar {
	width: 100%;
	height: 8px;
	background: #e5e7eb;
	border-radius: 4px;
	overflow: hidden;
}

.uvdtf-calc__progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--uvc-acc, #6d28d9), var(--uvc-acc-500, #8b5cf6));
	width: 0%;
	transition: width 0.2s;
}

.uvdtf-calc__progress-text {
	display: block;
	margin-top: 6px;
	font-size: 0.85em;
	color: #6b7280;
}

/* --- Статус --- */

.uvdtf-calc__status {
	margin-top: 16px;
	padding: 0;
	font-size: 0.95em;
}

.uvdtf-calc__status.is-success {
	padding: 14px 16px;
	background: #ecfdf5;
	border: 1px solid #6ee7b7;
	color: #065f46;
	border-radius: 8px;
}

.uvdtf-calc__status.is-error {
	padding: 14px 16px;
	background: #fee2e2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	border-radius: 8px;
}

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

/* Receipt после успешной отправки */
.uvdtf-calc__receipt {
	background: #ffffff;
	border: 2px solid var(--uvc-acc, #6d28d9);
	border-radius: 14px;
	padding: 28px 24px;
	margin-top: 10px;
}

.uvdtf-calc__receipt-head {
	text-align: center;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px dashed #e5e7eb;
}

.uvdtf-calc__receipt-check {
	font-size: 3em;
	line-height: 1;
	margin-bottom: 8px;
}

.uvdtf-calc__receipt-head h3 {
	margin: 0 0 6px;
	color: #065f46;
	font-size: 1.4em;
}

.uvdtf-calc__receipt-id {
	display: inline-block;
	background: var(--uvc-tint-100, #ede9fe);
	color: var(--uvc-ink-900, #4c1d95);
	padding: 4px 14px;
	border-radius: 20px;
	font-weight: 700;
	margin: 6px 0;
	font-size: 1.1em;
}

.uvdtf-calc__receipt-head small {
	display: block;
	color: #9ca3af;
	margin-top: 4px;
}

.uvdtf-calc__receipt-block {
	margin-bottom: 18px;
}

.uvdtf-calc__receipt-block h4 {
	margin: 0 0 8px;
	color: var(--uvc-acc, #6d28d9);
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
}

.uvdtf-calc__receipt-block > div { font-size: 0.95em; line-height: 1.6; }

.uvdtf-calc__receipt-price-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 12px;
	padding: 14px 18px;
	background: linear-gradient(135deg, var(--uvc-tint-40, #f5f3ff), var(--uvc-tint-100, #ede9fe));
	border-radius: 10px;
}

.uvdtf-calc__receipt-price-label {
	display: block;
	font-size: 0.75em;
	text-transform: uppercase;
	color: var(--uvc-ink-700, #6b21a8);
	letter-spacing: 0.5px;
	font-weight: 600;
}

.uvdtf-calc__receipt-price {
	display: block;
	font-size: 2em;
	font-weight: 800;
	color: var(--uvc-acc, #6d28d9);
	line-height: 1.1;
	margin-top: 2px;
}

.uvdtf-calc__receipt-stat-label {
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: var(--uvc-ink-700, #6b21a8);
	font-weight: 600;
	display: inline-block;
	min-width: 60px;
}

.uvdtf-calc__receipt-designs {
	list-style: none;
	padding: 0;
	margin: 0;
}

.uvdtf-calc__receipt-designs li {
	padding: 6px 0;
	border-bottom: 1px solid #f3f4f6;
	font-size: 0.93em;
}

.uvdtf-calc__receipt-designs li small { color: #6b7280; }

.uvdtf-calc__receipt-actions {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.uvdtf-calc__receipt-actions .uvdtf-calc__btn { flex: 1; min-width: 180px; }

/* Print: остаётся только receipt, всё лишнее скрыто */
@media print {
	body * { visibility: hidden !important; }
	.uvdtf-calc, .uvdtf-calc * { visibility: visible !important; }
	.uvdtf-calc {
		position: absolute;
		left: 0; top: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
		box-shadow: none;
		border: none;
	}
	.uvdtf-calc__form,
	.uvdtf-calc__title,
	.uvdtf-calc__lead { display: none !important; }
	.uvdtf-calc__receipt-actions { display: none !important; }
	.uvdtf-calc__receipt {
		border: 2px solid #000;
		page-break-inside: avoid;
	}
}

@media (max-width: 600px) {
	.uvdtf-calc { padding: 18px; margin: 16px 8px; }
	.uvdtf-calc__price-value { font-size: 1.8em; }
	.uvdtf-calc__actions { flex-direction: column; }
	.uvdtf-calc__btn { width: 100%; }
	.uvdtf-calc__design { padding: 14px; }

	/* На мобільному: вартість + візуал розкладки нагорі (одразу видно результат),
	   а поля розмірів/кількості — нижче. Реалізовано через flex-order, без зміни HTML. */
	.uvdtf-calc__form {
		display: flex;
		flex-direction: column;
	}
	.uvdtf-calc__price { order: -1; margin-bottom: 16px; }
}

/* === Donate block (ZSU 10% + optional client donation) ================== */
.uvdtf-calc__donate {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 10px;
	background: linear-gradient(180deg, #f0f7ff 0%, #fffbe6 100%);
	border: 1px solid #93c5fd;
	border-left: 4px solid #ffd700;
}
.uvdtf-calc__donate-info {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.uvdtf-calc__donate-flag {
	font-size: 1.6em;
	line-height: 1;
	flex-shrink: 0;
}
.uvdtf-calc__donate-logo {
	width: 52px;
	height: auto;
	flex-shrink: 0;
	display: block;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.uvdtf-calc__donate-info strong {
	display: block;
	color: #1e3a8a;
	font-size: 1em;
	margin-bottom: 2px;
}
.uvdtf-calc__donate-info small {
	display: block;
	color: #1e3a8a;
	opacity: 0.85;
	font-size: 0.88em;
	line-height: 1.4;
}
.uvdtf-calc__donate-toggle {
	margin-top: 10px;
	padding: 8px 10px;
	background: rgba(255,255,255,0.6);
	border-radius: 6px;
	font-weight: 600;
}
.uvdtf-calc__donate-fields {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #93c5fd;
}
.uvdtf-calc__donate-type {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.uvdtf-calc__donate-type .uvdtf-calc__radio {
	flex: 1 1 200px;
	background: rgba(255,255,255,0.6);
}
.uvdtf-calc__donate-input {
	max-width: 240px;
}
.uvdtf-calc__donate-summary {
	margin-top: 10px;
	padding: 8px 10px;
	background: rgba(30,58,138,0.06);
	border-radius: 6px;
	font-size: 0.95em;
	color: #1e3a8a;
}
.uvdtf-calc__donate-summary b {
	font-size: 1.05em;
}
.uvdtf-calc__donate-summary small {
	display: block;
	margin-top: 2px;
	opacity: 0.8;
	font-size: 0.85em;
}
@media (max-width: 600px) {
	.uvdtf-calc__donate { padding: 12px; }
	.uvdtf-calc__donate-type .uvdtf-calc__radio { flex-basis: 100%; }
}

/* === НП-пікер «як на Prom»: чипи популярних міст + випадайки === */
.uvdtf-np-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}
.uvdtf-np-chip {
	border: 1.5px solid var(--uvc-bd-330, #dcd5ec);
	background: #fff;
	color: var(--uvc-ink-800, #5b21b6);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.uvdtf-np-chip:hover {
	background: var(--uvc-acc, #6d28d9);
	border-color: var(--uvc-acc, #6d28d9);
	color: #fff;
}
.uvdtf-np-drop {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 9999;
	background: #fff;
	border: 1px solid var(--uvc-bd-330, #dcd5ec);
	border-radius: 12px;
	box-shadow: 0 12px 32px -12px rgba(var(--uvc-ink-900-rgb, 76,29,149), .3);
	max-height: 280px;
	overflow-y: auto;
	/* НЕ flex: flex-колонка з max-height СТИСКАЛА 40 пунктів у ~7px кожен
	   (текст «наїжджав»). Звичайний блок-потік + скрол. */
	display: block;
}
/* ⚠️ display:block вище перебиває браузерний [hidden]{display:none} —
   без цього правила список «не закривався» після вибору. */
.uvdtf-np-drop[hidden] { display: none !important; }
/* Пункти — div (не button: тема XStore нав'язує кнопкам фіксовану висоту
   і перехоплює кліки). Резети лишаємо про запас. */
.uvdtf-np-opt,
.uvdtf-calc .uvdtf-np-opt {
	display: block;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	text-align: left;
	background: #fff !important;
	border: none !important;
	border-bottom: 1px solid var(--uvc-tint-54, #f3f0fa) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 11px 16px !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	white-space: normal !important;
	color: #1e1a2c !important;
	cursor: pointer;
	user-select: none;
	transition: background .12s;
}
.uvdtf-np-opt:last-child { border-bottom: none !important; }
.uvdtf-np-opt:hover, .uvdtf-np-opt:focus-visible { background: var(--uvc-tint-60, #f1eafc) !important; outline: none; }
.uvdtf-np-opt b {
	color: var(--uvc-ink-800, #5b21b6);
	font-weight: 700;
	font-size: 14px;
	display: block;
}
.uvdtf-np-opt small {
	color: #8a819c;
	display: block;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	margin-top: 2px;
	white-space: normal !important;
}
.uvdtf-np-chip,
.uvdtf-calc .uvdtf-np-chip {
	height: auto !important;
	min-height: 0 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

/* Підсвітка збігу в НП-дропдауні — червоним, як на сайті НП */
.uvdtf-np-opt mark {
	background: none;
	color: #e11d48;
	font-weight: 700;
	padding: 0;
}

/* Збережені адреси клієнта */
.uvdtf-np-saved { align-items: center; }
.uvdtf-np-saved-lbl {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--uvc-ink-800, #5b21b6);
}
.uvdtf-np-chip--saved {
	background: var(--uvc-tint-60, #f1eafc);
	border-color: var(--uvc-bd-300, #c4b5fd);
}
.uvdtf-np-chip--saved:hover {
	background: var(--uvc-acc, #6d28d9);
	border-color: var(--uvc-acc, #6d28d9);
	color: #fff;
}

/* Липка панель ціни (сума · метраж · тариф). transform задається нижче
   разом з fade-станом (.is-on) — тут не дублюємо. */
/* Планка живе в <body> (у корені калькулятора position:fixed ламався
   transform-ом Elementor-секції), тому змінні кореня її НЕ дістають —
   тему дублюємо класом, який ставить calc.js за типом свого калькулятора. */
.uvdtf-calc__stickybar.is-dtf {
	--uvc-acc:         #b45309;
	--uvc-acc-600:     #c2610a;
	--uvc-ink-800-rgb: 146,64,14;
}
.uvdtf-calc__stickybar {
	position: fixed;
	left: 50%;
	bottom: 16px;
	z-index: 2147483000;
	display: flex;
	align-items: baseline;
	gap: 12px;
	background: linear-gradient(135deg, var(--uvc-acc-600, #7c3aed), var(--uvc-acc, #6d28d9));
	color: #fff;
	border-radius: 999px;
	padding: 11px 22px;
	box-shadow: 0 10px 28px rgba(var(--uvc-ink-800-rgb, 91,33,182), .45);
	cursor: pointer;
	max-width: calc(100vw - 140px);
	white-space: nowrap;
	/* Показ через .is-on з fade — різке hidden-перемикання «блимало» при скролі. */
	opacity: 0;
	transform: translateX(-50%) translateY(16px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
.uvdtf-calc__stickybar.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.uvdtf-calc__stickybar { transition: none; }
}
.uvdtf-calc__stickybar .sb-total {
	font-size: 19px;
	font-weight: 800;
	letter-spacing: .01em;
}
.uvdtf-calc__stickybar .sb-meta {
	font-size: 13px;
	font-weight: 600;
	opacity: .9;
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (max-width: 640px) {
	/* Нижній «стек» плаваючих елементів (знизу вгору):
	   мобільний бар .uvmbar → липка планка ціни → чипи чату/контактів.
	   Висоту бару публікує contacts.js у --uvdtf-bottom-offset (вже з зазором
	   8 px), висоту планки — calc.js у --uvdtf-sticky-h (0, коли планки нема).
	   Хардкод bottom:150px тут раніше не знав ні про реальну висоту бару, ні
	   про свою власну висоту в режимі кошика — планка налазила на чип чату. */
	.uvdtf-calc__stickybar {
		bottom: calc(var(--uvdtf-bottom-offset, 99px) + 8px);
		max-width: calc(100vw - 24px);
		gap: 8px;
		padding: 10px 16px;
	}
	.uvdtf-calc__stickybar .sb-meta { display: none; }
	.uvdtf-calc__stickybar .sb-cta { margin-left: 4px; padding: 5px 12px; font-size: 13px; }
	/* 🧺 Кошик не порожній — на мобільному планка ОБОВʼЯЗКОВО пояснює, що
	   сума вже спільна: «Разом до заявки · 🟪UV-DTF + 🟨DTF» другим рядком. */
	.uvdtf-calc__stickybar.has-cart { border-radius: 20px; }
	.uvdtf-calc__stickybar.has-cart .sb-main { flex-wrap: wrap; }
	.uvdtf-calc__stickybar.has-cart .sb-meta {
		display: block; order: 5; flex: 1 0 100%;
		margin-top: 1px; font-size: 11.5px; line-height: 1.35;
		white-space: normal; overflow: visible; opacity: .95;
	}
}

/* Обраний чип міста лишається зафарбованим */
.uvdtf-np-chip.on {
	background: var(--uvc-acc, #6d28d9) !important;
	border-color: var(--uvc-acc, #6d28d9) !important;
	color: #fff !important;
}

/* Банер ЗСУ-донату тимчасово прихований (рішення власника 2026-07-18).
   Повернути: видалити це правило. */
.uvdtf-calc [data-donate] { display: none !important; }

/* ==========================================================================
   Тип плівки UV-DTF (звичайна / гліттер срібло / гліттер золото / слабкий клей А3).
   Ціна уніфікована — та сама формула, гліттер лише піднімає ставку (+550/пог.м).
   ========================================================================== */
.uvdtf-calc__films { margin: 14px 0 4px; }
.uvdtf-calc__films-title { font-size: 13px; font-weight: 700; color: #5f5875; margin: 0 0 8px; }
.uvdtf-calc__films-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 640px) { .uvdtf-calc__films-row { grid-template-columns: repeat(2, 1fr); } }
.uvdtf-film {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 10px 6px 9px; border: 1.5px solid var(--uvc-bd-340, #e2dcf0); border-radius: 12px;
	background: #fff; cursor: pointer; text-align: center; margin: 0;
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.uvdtf-film:hover { border-color: var(--uvc-bd-310, #c9bdf0); background: var(--uvc-tint-15, #faf8ff); }
.uvdtf-film.is-active { border-color: var(--uvc-acc, #6d28d9); background: var(--uvc-tint-35, #f6f1fe); box-shadow: 0 0 0 2px rgba(var(--uvc-acc-rgb, 109,40,217),.14); }
.uvdtf-film__swatch { width: 40px; height: 26px; border-radius: 7px; border: 1px solid rgba(0,0,0,.08); position: relative; overflow: hidden; }
.uvdtf-film__swatch--hard { background: linear-gradient(135deg,#f4f2fa 0%,var(--uvc-bd-220, #e6e1f2) 100%); }
.uvdtf-film__swatch--weak { background: repeating-linear-gradient(45deg,#f4f2fa 0 6px,var(--uvc-bd-230, #e9e4f5) 6px 12px); }
.uvdtf-film__swatch--silver { background: linear-gradient(120deg,#cfd3da 0%,#f5f7fa 25%,#aab2bd 50%,#eef1f5 75%,#c4c9d2 100%); }
.uvdtf-film__swatch--gold   { background: linear-gradient(120deg,#d9a521 0%,#ffe9a8 25%,#c98f12 50%,#ffdf87 75%,#d3a11f 100%); }
/* блискітки гліттеру */
.uvdtf-film__swatch--silver::after, .uvdtf-film__swatch--gold::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
		radial-gradient(circle at 62% 18%, rgba(255,255,255,.9) 0 .8px, transparent 1.4px),
		radial-gradient(circle at 80% 62%, rgba(255,255,255,.95) 0 1px, transparent 1.6px),
		radial-gradient(circle at 38% 74%, rgba(255,255,255,.9) 0 .8px, transparent 1.4px),
		radial-gradient(circle at 55% 48%, rgba(255,255,255,.85) 0 .7px, transparent 1.2px);
}
.uvdtf-film__name { font-size: 12.5px; font-weight: 700; color: #241e3c; line-height: 1.15; }
.uvdtf-film__note { font-size: 10.5px; color: #948da3; line-height: 1.2; }
.uvdtf-film.is-active .uvdtf-film__note { color: var(--uvc-acc, #6d28d9); font-weight: 700; }
.uvdtf-calc__films-hint { display: block; margin-top: 7px; font-size: 12px; color: #948da3; line-height: 1.45; }

/* Кроки калькулятора + формат друку (рулон / аркуш А3) */
.uvdtf-calc__step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; background: var(--uvc-acc, #6d28d9); color: #fff;
	font-size: 12.5px; font-weight: 800; margin-right: 7px; flex: 0 0 22px;
}
.uvdtf-calc__step-head { display: flex; align-items: center; font-size: 13px; font-weight: 700; color: #5f5875; margin: 18px 0 8px; }
.uvdtf-calc__films-title { display: flex; align-items: center; }
.uvdtf-calc__format { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.uvdtf-calc__format-label { font-size: 12.5px; font-weight: 700; color: #5f5875; }
.uvdtf-calc__format-opt {
	display: inline-flex; align-items: center; gap: 6px; margin: 0;
	padding: 7px 14px; border: 1.5px solid var(--uvc-bd-340, #e2dcf0); border-radius: 999px;
	background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: #241e3c;
	transition: border-color .15s, background .15s, opacity .15s;
}
.uvdtf-calc__format-opt small { font-weight: 500; color: #948da3; }
.uvdtf-calc__format-opt:hover { border-color: var(--uvc-bd-310, #c9bdf0); }
.uvdtf-calc__format-opt.is-active { border-color: var(--uvc-acc, #6d28d9); background: var(--uvc-tint-35, #f6f1fe); box-shadow: 0 0 0 2px rgba(var(--uvc-acc-rgb, 109,40,217),.12); }
.uvdtf-calc__format-opt.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.uvdtf-calc__format-note { flex-basis: 100%; font-size: 11.5px; color: #948da3; }
.uvdtf-calc__format-hint { flex-basis: 100%; font-size: 11.5px; color: #948da3; }

/* Формат друку в картці однієї наліпки (той самий вигляд, компактніше) */
.uvdtf-calc__dformat {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 4px 0 10px;
}
.uvdtf-calc__dformat-label { font-size: 12.5px; font-weight: 700; color: #5f5875; }
.uvdtf-calc__dformat-opt { padding: 5px 12px; font-size: 12.5px; }
.uvdtf-calc__dformat-note { flex-basis: 100%; font-size: 11.5px; color: #b45309; font-weight: 600; }
.uvdtf-film.is-disabled { opacity: .45; }

/* ═══════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН 2026-08 (v2): два кроки + права липка колонка «Ваше замовлення».
   Плівка, формат і порізка живуть у картці КОЖНОЇ наліпки.
   Класи навмисно префіксовані — тема XStore має свої .row/.grid/.btn/label.
   ═══════════════════════════════════════════════════════════════════════ */

.uvdtf-calc--v2 .uvdtf-calc__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.uvdtf-calc--v2 .uvdtf-calc__col-main { min-width: 0; }

@media (min-width: 1024px) {
	.uvdtf-calc--v2 .uvdtf-calc__layout { grid-template-columns: minmax(0, 1fr) 330px; }
	.uvdtf-calc--v2 .uvdtf-calc__rail { position: sticky; top: 16px; }
	/* На десктопі підсумок завжди на екрані — нижня планка не потрібна. */
	.uvdtf-calc__stickybar { display: none !important; }
}

/* --- Крок --- */
.uvdtf-calc__step {
	background: #fff;
	border: 1px solid #e7e7f2;
	border-radius: 14px;
	padding: 18px 20px 20px;
	margin: 0 0 16px;
	box-shadow: 0 1px 2px rgba(27,28,46,.05), 0 8px 24px -20px rgba(27,28,46,.3);
}
.uvdtf-calc__step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.uvdtf-calc__step-n {
	width: 30px; height: 30px; border-radius: 50%; background: var(--uvc-acc, #6d28d9); color: #fff;
	flex: 0 0 30px; display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 15px;
}
.uvdtf-calc__step-t { font-size: 18px; font-weight: 800; margin: 0; color: #1b1c2e; }
.uvdtf-calc__step-s { color: #5f6178; font-size: 13px; margin: 0 0 14px 42px; line-height: 1.5; }
@media (max-width: 640px) {
	.uvdtf-calc__step { padding: 14px; }
	.uvdtf-calc__step-s { margin-left: 0; }
}

/* --- Картка наліпки: шапка з бейджем макета --- */
.uvdtf-calc--v2 .uvdtf-calc__design { background: #fff; border-radius: 12px; }
.uvdtf-calc--v2 .uvdtf-calc__design-head { gap: 10px; flex-wrap: wrap; justify-content: flex-start; }
.uvdtf-calc__design-badge {
	font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.uvdtf-calc__design-badge--ok   { background: #e9f7ee; color: #15803d; }
.uvdtf-calc__design-badge--need { background: #fdeeee; color: #b91c1c; }
.uvdtf-calc--v2 .uvdtf-calc__design-head .uvdtf-calc__design-remove {
	margin-left: auto; width: 30px; height: 30px; font-size: 1.3em; font-weight: 700;
	background: #fff; border-color: #e7e7f2; color: #b91c1c;
}

/* --- Чіпи плівки в картці --- */
.uvdtf-calc__chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.uvdtf-calc__chip {
	display: inline-flex; align-items: center; margin: 0; width: auto; max-width: none;
	border: 1.5px solid var(--uvc-bd-340, #e2dcf0); background: #fff; color: #5f6178;
	font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
	padding: 6px 11px; border-radius: 999px; cursor: pointer;
	transition: border-color .15s, background .15s, color .15s;
}
.uvdtf-calc__chip small { font-weight: 700; opacity: .8; }
.uvdtf-calc__chip:hover { border-color: var(--uvc-bd-310, #c9bdf0); }
.uvdtf-calc__chip.is-active { border-color: var(--uvc-acc, #6d28d9); background: var(--uvc-tint-50, #f4eefe); color: var(--uvc-acc, #6d28d9); }
.uvdtf-calc__chips-note {
	flex-basis: 100%; font-size: 11.5px; color: #948da3; line-height: 1.45; margin-top: 2px;
}

/* --- Великий перемикач формату --- */
.uvdtf-calc__fmtseg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.uvdtf-calc__fmtseg-opt {
	display: block; margin: 0; width: auto; max-width: none; text-transform: none; letter-spacing: 0;
	border: 1.5px solid var(--uvc-bd-340, #e2dcf0); background: #fff; color: #5f6178;
	border-radius: 11px; padding: 10px 12px; cursor: pointer; font-size: 13px; line-height: 1.35;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.uvdtf-calc__fmtseg-opt b { display: block; font-size: 14.5px; color: inherit; font-weight: 800; }
.uvdtf-calc__fmtseg-opt small { color: #948da3; font-size: 12px; }
.uvdtf-calc__fmtseg-opt:hover { border-color: var(--uvc-bd-310, #c9bdf0); }
.uvdtf-calc__fmtseg-opt.is-active {
	border-color: var(--uvc-acc, #6d28d9); background: var(--uvc-tint-50, #f4eefe); color: #1b1c2e; box-shadow: 0 0 0 1px var(--uvc-acc, #6d28d9);
}
.uvdtf-calc__fmtseg-opt.is-active b { color: var(--uvc-acc, #6d28d9); }
.uvdtf-calc__fmtseg-opt.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.uvdtf-calc__fmtseg .uvdtf-calc__dformat-note { grid-column: 1 / -1; }
@media (max-width: 480px) { .uvdtf-calc__fmtseg { grid-template-columns: 1fr; } }

/* --- «Обрано: …» --- */
.uvdtf-calc__chosen {
	margin-top: 10px; border-radius: 10px; padding: 9px 12px; font-size: 13.5px;
	background: var(--uvc-tint-50, #f4eefe); border: 1px solid var(--uvc-bd-320, #ddcef7); color: var(--uvc-acc, #6d28d9); font-weight: 700;
}
.uvdtf-calc__chosen small { display: block; font-weight: 500; color: #5f6178; }

/* --- Міні-розкладка цієї наліпки --- */
.uvdtf-calc__minilay {
	display: flex; gap: 12px; align-items: center; margin-top: 10px;
	background: #f6f6fb; border: 1px solid #e7e7f2; border-radius: 10px; padding: 10px 12px;
}
.uvdtf-calc__minilay-vis { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.uvdtf-calc__minilay-cap { font-size: 12px; color: #5f6178; line-height: 1.5; }
.uvdtf-calc__minilay-cap b { color: #1b1c2e; font-size: 12.5px; }
.uvdtf-calc__minilay-alt { color: #948da3; }
.uvdtf-calc__minilay-roll {
	width: 52px; border: 1.5px solid var(--uvc-bd-320, #ddcef7); border-radius: 4px; background: #fff;
	padding: 3px; display: flex; flex-direction: column; gap: 2px;
}
.uvdtf-calc__minilay-roll i { display: block; height: 8px; border-radius: 2px; background: var(--uvc-acc, #6d28d9); opacity: .75; }
.uvdtf-calc__minilay-sheet {
	width: 46px; height: 62px; border: 1.5px solid var(--uvc-bd-320, #ddcef7); border-radius: 4px; background: #fff;
	padding: 3px; display: grid; grid-auto-rows: 1fr; gap: 2px;
}
.uvdtf-calc__minilay-sheet i { border-radius: 2px; background: var(--uvc-acc, #6d28d9); opacity: .75; }
.uvdtf-calc__minilay-x { font-size: 11px; color: #5f6178; font-weight: 700; }

/* --- Дроп-зона макета --- */
.uvdtf-calc__drop {
	display: flex; gap: 12px; align-items: center; margin: 12px 0 0; width: auto; max-width: none;
	border: 1.5px dashed var(--uvc-bd-320, #ddcef7); background: var(--uvc-tint-30, #f8f5ff); border-radius: 11px; padding: 14px;
	cursor: pointer; text-transform: none; letter-spacing: 0;
	transition: border-color .15s, background .15s;
}
/* ⚠️ Ті самі граблі з [hidden], що й у .uvdtf-calc__sec-head нижче: атрибут
   hidden на <input type="file"> тема XStore перебиває своїм display:block —
   нативний «Виберіть файл» (275 px) з'являвся в дроп-зоні, стискав сусідній
   .uvdtf-calc__drop-txt (min-width:0) до нуля, і текст намотував 1176 px
   висоти. Ховаємо ЯВНО: клік по <label> сам відкриває вибір файла. */
.uvdtf-calc__drop input[type="file"],
.uvdtf-calc input[type="file"][hidden] { display: none !important; }
.uvdtf-calc__drop:hover, .uvdtf-calc__drop.is-over { border-color: var(--uvc-acc, #6d28d9); background: var(--uvc-tint-50, #f4eefe); }
.uvdtf-calc__drop.has-file { border-style: solid; border-color: #15803d; background: #e9f7ee; }
.uvdtf-calc__drop-ic { font-size: 22px; flex: 0 0 auto; }
.uvdtf-calc__drop-txt { min-width: 0; }
.uvdtf-calc__drop-txt b { display: block; font-size: 14px; color: #1b1c2e; word-break: break-word; }
.uvdtf-calc__drop-txt small { display: block; color: #5f6178; font-size: 12.5px; line-height: 1.45; }

.uvdtf-calc__droprow { margin-top: 8px; font-size: 12.5px; color: #948da3; }
.uvdtf-calc__droprow small { display: block; margin-top: 2px; }
.uvdtf-calc__linkbtn {
	background: none; border: 0; padding: 0; font: inherit; color: var(--uvc-acc, #6d28d9);
	text-decoration: underline; cursor: pointer; font-weight: 600;
}
.uvdtf-calc__droprow .uvdtf-calc__link-field { margin-top: 8px; }
.uvdtf-calc__droprow .uvdtf-calc__studio-btn { margin-top: 8px; }

/* --- Порізка цієї наліпки --- */
.uvdtf-calc__cutrow {
	display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 4px; width: auto; max-width: none;
	font-size: 13.5px; cursor: pointer; text-transform: none; letter-spacing: 0;
	border-top: 1px dashed #e7e7f2; padding-top: 12px;
}
.uvdtf-calc__cutrow input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--uvc-acc, #6d28d9); flex: 0 0 16px; }
.uvdtf-calc__cutrow small { display: block; color: #948da3; font-size: 12px; }
.uvdtf-calc__cutrow-cost { margin-left: auto; font-weight: 800; color: var(--uvc-acc, #6d28d9); white-space: nowrap; }

/* --- Кнопка «додати наліпку» (акцентна) --- */
.uvdtf-calc--v2 .uvdtf-calc__add {
	justify-content: center; gap: 10px; border: 2px dashed var(--uvc-acc, #6d28d9); background: var(--uvc-tint-50, #f4eefe);
	font-size: 16px; font-weight: 800; padding: 16px; margin-bottom: 0;
}
.uvdtf-calc--v2 .uvdtf-calc__add:hover:not([disabled]) { background: var(--uvc-acc, #6d28d9); color: #fff; }
.uvdtf-calc--v2 .uvdtf-calc__add:hover:not([disabled]) .uvdtf-calc__add-plus { background: #fff; color: var(--uvc-acc, #6d28d9); }
.uvdtf-calc--v2 .uvdtf-calc__add:hover:not([disabled]) .uvdtf-calc__add-counter { color: var(--uvc-tint-50, #f4eefe); }
.uvdtf-calc--v2 .uvdtf-calc__add-plus { width: 26px; height: 26px; font-size: 18px; flex: 0 0 26px; }
.uvdtf-calc--v2 .uvdtf-calc__add-counter { margin-left: 0; }

/* --- Права колонка: підсумок --- */
.uvdtf-calc__summary {
	background: #fff; border: 1px solid #e7e7f2; border-radius: 14px; padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(27,28,46,.05), 0 8px 24px -18px rgba(27,28,46,.3);
}
.uvdtf-calc__summary-title { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: #1b1c2e; }
/* Багато позицій: середина картки скролиться всередині, а «Разом до
   заявки»/згода/кнопка завжди видимі (інакше при 6+ наліпках CTA їхала за
   екран). Лише десктоп, де колонка липка. */
@media (min-width: 1024px) {
	.uvdtf-calc--v2 .uvdtf-calc__summary {
		max-height: calc(100vh - 32px);
		display: flex; flex-direction: column;
	}
	/* ⚠️ Грабли (баг 2026-08): раніше «гнучким» (flex:1, min-height:0) був
	   ЛИШЕ [data-sum-rows] — коли в кошику зʼявився ДРУГИЙ блок (сек-хед
	   своєї технології + .uvdtf-calc__cart + sum-grand), їхня сукупна
	   висота почала перевищувати max-height картки, і flexbox стискав до
	   0 саме рядки позицій (єдиний елемент без «підлоги» min-content), а
	   сусіди-фікс лишались повного розміру.
	   Фікс: усе, що може розростатись (шапка секції + рядки + підсумок +
	   кошик другої технології), живе в ОДНІЙ обгортці .uvdtf-calc__sum-scroll
	   (data-sum-scroll, розмітка — views/form-*.php) — САМЕ вона гнучка й
	   скролиться. «Разом до заявки»/згода/кнопка/примітка йдуть ПІСЛЯ
	   обгортки, лишаються звичайними (не flex-елементами) — тому фізично
	   не можуть бути стиснуті, скільки б контенту не було вище. */
	.uvdtf-calc--v2 .uvdtf-calc__summary [data-sum-scroll] {
		flex: 1 1 auto; min-height: 132px; overflow-y: auto;
		scrollbar-width: thin;
		margin-right: -10px; padding-right: 10px;
	}
	/* Кошик іншої технології всередині обгортки: власний обмежений скрол,
	   щоб довгий список позицій не зʼїдав місце під рядки цієї сторінки
	   (обидва скролляться незалежно один в одному). */
	.uvdtf-calc--v2 .uvdtf-calc__cart-list {
		max-height: 108px; overflow-y: auto; scrollbar-width: thin;
	}
}
.uvdtf-calc__sum-row {
	display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px;
	padding: 8px 0; border-bottom: 1px dashed #e7e7f2;
}
.uvdtf-calc__sum-row > b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.uvdtf-calc__sum-name { color: #5f6178; line-height: 1.4; }
.uvdtf-calc__sum-fmt { display: block; color: var(--uvc-acc, #6d28d9); font-weight: 700; }
.uvdtf-calc__sum-row--disc > b { color: #15803d; }
.uvdtf-calc__sum-empty { font-size: 13px; color: #948da3; padding: 6px 0 10px; line-height: 1.5; }
.uvdtf-calc__sum-total {
	display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px;
	font-size: 15px; font-weight: 700; color: #1b1c2e;
}
.uvdtf-calc__sum-total-v {
	font-size: 27px; font-weight: 800; color: var(--uvc-acc, #6d28d9); font-variant-numeric: tabular-nums;
}
.uvdtf-calc__sum-meta { color: #948da3; font-size: 12.5px; margin: 0 0 12px; line-height: 1.45; }
.uvdtf-calc__summary .uvdtf-calc__consent { margin: 10px 0; padding: 10px 12px; font-size: 12.5px; }
.uvdtf-calc__summary .uvdtf-calc__actions { display: block; margin: 0; }
.uvdtf-calc__btn--cta {
	width: 100%; border: 0; border-radius: 12px; background: var(--uvc-acc, #6d28d9); color: #fff;
	font-size: 17px; font-weight: 800; padding: 15px; cursor: pointer;
}
.uvdtf-calc__btn--cta:hover { filter: brightness(.93); }
.uvdtf-calc__cta-note { text-align: center; color: #948da3; font-size: 12px; margin: 8px 0 0; line-height: 1.4; }

/* ─── 🧺 Кошик заявки: дві технології в одному рейлі ───────────────────
   Коли кошик НЕ порожній, рейл ділиться на дві іменовані секції, кожна
   у кольорі СВОЄЇ технології (не сторінки): бузкова UV-DTF, янтарна DTF.
   Головною сумою стає «Разом до заявки», підсумки секцій — дрібні.
   Порожній кошик → жодна з цих гілок не вмикається, рейл як був. */

/* Кольори секції беруться з --uvsec-*, які виставляє модифікатор технології. */
.uvdtf-calc__sec-head--uvdtf,
.uvdtf-calc__cart--uvdtf {
	--uvsec-ac: var(--uvtech-uvdtf-ac, #6d28d9);
	--uvsec-bg: var(--uvtech-uvdtf-bg, #f4eefe);
	--uvsec-tx: var(--uvtech-uvdtf-tx, #4c1d95);
}
.uvdtf-calc__sec-head--dtf,
.uvdtf-calc__cart--dtf {
	--uvsec-ac: var(--uvtech-dtf-ac, #d97706);
	--uvsec-bg: var(--uvtech-dtf-bg, #fff7e6);
	--uvsec-tx: var(--uvtech-dtf-tx, #78350f);
}

.uvdtf-calc__sec-head {
	display: flex; align-items: center; gap: 8px;
	margin: 0; padding: 9px 11px;
	background: var(--uvsec-bg, #f4eefe);
	border-left: 3px solid var(--uvsec-ac, #6d28d9);
	border-radius: 9px 9px 0 0;
}
/* ⚠️ Наш власний display:flex/inline-block перебиває браузерне
   [hidden]{display:none} — шапка секції «вилазила» на порожньому кошику.
   Ті самі граблі, що з [hidden] у кабінеті: ховати ЯВНО. */
.uvdtf-calc__sec-head[hidden],
.uvdtf-calc__cart[hidden],
.uvdtf-calc__cart-note[hidden],
.uvdtf-calc__cart-add[hidden],
.uvdtf-calc__sum-grand[hidden],
.uvdtf-calc__save-btn[hidden],
.uvdtf-calc__save-wrap[hidden],
.uvdtf-calc__save-note[hidden],
.uvdtf-calc__saved-list[hidden] { display: none !important; }
/* Обгортка «💾 Зберегти прорахунок» + «?»: JS перемикає hidden САМЕ на ній
   (data-save-wrap), не на кнопці — щоб підказка ховалась/зʼявлялась разом. */
.uvdtf-calc__save-wrap { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.uvdtf-calc__save-wrap .uvdtf-calc__save-btn { flex: 1 1 auto; margin: 0 !important; }
.uvdtf-calc__sec-sq {
	flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px;
	background: var(--uvsec-ac, #6d28d9);
}
.uvdtf-calc__sec-t {
	flex: 1 1 auto; min-width: 0;
	font-size: 12.5px; font-weight: 800; line-height: 1.35;
	color: var(--uvsec-tx, #4c1d95);
}
/* Секція «на цій сторінці»: список і підсумок продовжують плашку шапки.
   padding-right НЕ чіпаємо — на десктопі там живе трюк зі скролбаром
   (margin-right:-10px/padding-right:10px), інакше зламається прокрутка. */
.uvdtf-calc__summary.is-own-uvdtf {
	--uvsec-own-ac: var(--uvtech-uvdtf-ac, #6d28d9);
	--uvsec-own-bg: var(--uvtech-uvdtf-bg, #f4eefe);
	--uvsec-own-tx: var(--uvtech-uvdtf-tx, #4c1d95);
}
.uvdtf-calc__summary.is-own-dtf {
	--uvsec-own-ac: var(--uvtech-dtf-ac, #d97706);
	--uvsec-own-bg: var(--uvtech-dtf-bg, #fff7e6);
	--uvsec-own-tx: var(--uvtech-dtf-tx, #78350f);
}
.uvdtf-calc__summary.is-cart [data-sum-rows],
.uvdtf-calc__summary.is-cart [data-own-total-row] {
	background: var(--uvsec-own-bg, #f4eefe);
	border-left: 3px solid var(--uvsec-own-ac, #6d28d9);
	padding-left: 11px;
}
.uvdtf-calc__summary.is-cart [data-sum-rows] { padding-top: 2px; }
@media (min-width: 1024px) {
	/* Прокрутка обгортки лишається, але без вильоту тінту рядків за межі
	   плашки (трюк margin-right:-10px/padding-right:10px на [data-sum-scroll]
	   малював би фон [data-sum-rows] ширшим за шапку секції). */
	.uvdtf-calc--v2 .uvdtf-calc__summary.is-cart [data-sum-scroll] {
		margin-right: 0; padding-right: 11px;
	}
}
.uvdtf-calc__summary.is-cart [data-own-total-row] {
	padding-bottom: 9px; border-radius: 0 0 9px 9px; margin-bottom: 12px;
}
/* Підсумок СЕКЦІЇ — навмисно дрібний: головна сума тепер «Разом до заявки». */
.uvdtf-calc__sum-total--sub,
.uvdtf-calc__summary.is-cart [data-own-total-row] {
	font-size: 13px; padding-top: 9px;
}
.uvdtf-calc__sum-total--sub .uvdtf-calc__sum-total-v,
.uvdtf-calc__summary.is-cart [data-own-total-row] .uvdtf-calc__sum-total-v {
	font-size: 17px;
}
.uvdtf-calc__sum-total--sub { padding-bottom: 0; }
.uvdtf-calc__sum-total--sub .uvdtf-calc__sum-total-v { color: var(--uvsec-tx, #4c1d95); }
.uvdtf-calc__summary.is-cart [data-own-total-row] .uvdtf-calc__sum-total-v { color: var(--uvsec-own-tx, #4c1d95); }

.uvdtf-calc__cart {
	background: var(--uvsec-bg, #f4eefe);
	border-left: 3px solid var(--uvsec-ac, #6d28d9);
	border-radius: 0 9px 9px 0; padding: 0 11px 11px; margin: 0 0 12px;
}
.uvdtf-calc__cart .uvdtf-calc__sec-head {
	margin: 0 -11px 0; border-radius: 0; border-left: 0;
	padding-left: 11px; padding-right: 11px;
}
.uvdtf-calc__cart-del,
.uvdtf-calc__cart-del:hover,
.uvdtf-calc__cart-del:focus,
.uvdtf-calc__cart-del:active {
	flex: 0 0 auto; border: 0 !important; background: transparent !important; cursor: pointer;
	font-size: 14px !important; line-height: 1 !important; padding: 3px 5px !important;
	border-radius: 6px; opacity: .65; color: inherit !important;
	height: auto !important; min-height: 0 !important; box-shadow: none !important;
}
.uvdtf-calc__cart-del:hover,
.uvdtf-calc__cart-del:focus-visible {
	opacity: 1; background: rgba(255,255,255,.75) !important; outline: none;
}
.uvdtf-calc__cart-del:focus-visible { box-shadow: 0 0 0 2px var(--uvsec-ac, #6d28d9) !important; }
.uvdtf-calc__cart-del:active { opacity: 1; background: rgba(255,255,255,.5) !important; }
.uvdtf-calc__cart-list { margin: 7px 0 0; padding: 0; list-style: none; }
.uvdtf-calc__cart-list li {
	font-size: 12px; color: #5f6178; line-height: 1.5; padding: 2px 0;
	font-variant-numeric: tabular-nums;
}
.uvdtf-calc__cart-note { margin: 7px 0 0; font-size: 11.5px; color: #6b6577; line-height: 1.45; }
.uvdtf-calc__cart-link,
.uvdtf-calc__cart-link:hover,
.uvdtf-calc__cart-link:focus,
.uvdtf-calc__cart-link:active {
	display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700;
	color: var(--uvsec-tx, #4c1d95); text-decoration: underline;
}
.uvdtf-calc__cart-link:hover { color: var(--uvsec-ac, #6d28d9); }
.uvdtf-calc__cart-link:focus-visible { outline: 2px solid var(--uvsec-ac, #6d28d9); outline-offset: 2px; }
/* !important проти generic button-стилів XStore: тема на hover фарбує текст у
   білий (невидимка на світлому) і ставить фіксовану висоту/nowrap (текст
   вилазив за рамку) — перекриваємо всі стани явно. */
.uvdtf-calc__cart-add,
.uvdtf-calc__cart-add:hover,
.uvdtf-calc__cart-add:focus,
.uvdtf-calc__cart-add:active {
	width: 100%; margin-top: 9px; padding: 11px 12px; cursor: pointer;
	background: #fff !important; color: var(--uvc-ink-800, #5b21b6) !important;
	border: 1px dashed var(--uvc-bd-300, #c4b5fd) !important; border-radius: 11px;
	font-size: 13px !important; font-weight: 700; line-height: 1.35 !important;
	height: auto !important; min-height: 0 !important;
	white-space: normal !important; text-transform: none !important;
	letter-spacing: 0 !important; box-shadow: none !important;
}
.uvdtf-calc__cart-add:hover { background: var(--uvc-tint-45, #f5f1fd) !important; border-color: var(--uvc-acc, #6d28d9) !important; }
.uvdtf-calc__cart-add[disabled] { opacity: .6; cursor: default; }
/* ГОЛОВНА сума заявки. Стиль великого «Разом», плюс легкий тінт теми
   сторінки — щоб око чіплялося саме за неї, а не за підсумки секцій. */
.uvdtf-calc__sum-grand {
	margin: 0 0 10px; padding: 11px 13px 10px;
	background: var(--uvc-tint-50, #f4eefe);
	border: 1px solid var(--uvc-bd-320, #ddcef7);
	border-radius: 11px;
}
.uvdtf-calc__sum-grand-row {
	display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
	font-size: 15px; font-weight: 800; color: #1b1c2e; white-space: nowrap;
}
.uvdtf-calc__sum-grand-v {
	font-size: 27px; font-weight: 800; color: var(--uvc-acc, #6d28d9);
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
.uvdtf-calc__sum-grand-meta {
	margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: #6b6577;
}
.uvdtf-calc__summary .uvdtf-calc__loyalty-note { margin: 0 0 10px; }

/* ─── 💾 Зберегти прорахунок: тихий текст-стиль, щоб не конкурувати з
   головним CTA «Замовити друк →». Колір — акцент СТОРІНКИ (на DTF сам
   стане янтарним через --uvc-acc), той самий трюк, що й cart-add вище:
   тонка пунктирна рамка + !important проти generic button-стилів XStore. */
.uvdtf-calc__save-btn,
.uvdtf-calc__save-btn:hover,
.uvdtf-calc__save-btn:focus,
.uvdtf-calc__save-btn:active {
	display: block; width: 100%; margin: 0 0 8px !important; padding: 10px 12px !important; cursor: pointer;
	background: transparent !important; color: var(--uvc-acc, #6d28d9) !important;
	border: 1px solid var(--uvc-bd-300, #c4b5fd) !important; border-radius: 10px;
	font-size: 12.5px !important; font-weight: 700; line-height: 1.3 !important;
	height: auto !important; min-height: 0 !important;
	white-space: normal !important; text-transform: none !important;
	letter-spacing: 0 !important; box-shadow: none !important;
}
.uvdtf-calc__save-btn:hover { background: var(--uvc-tint-45, #f5f1fd) !important; }
.uvdtf-calc__save-btn[disabled] { opacity: .6; cursor: default; }
.uvdtf-calc__save-note {
	margin: -4px 0 8px; font-size: 12px; line-height: 1.4; color: #2f8f4e; text-align: center;
}
.uvdtf-calc__saved-list {
	margin: 0 0 10px; padding: 9px 11px; background: #f8f8fc;
	border: 1px solid #e7e7f2; border-radius: 10px;
}
.uvdtf-calc__saved-head { font-size: 11.5px; font-weight: 800; color: #948da3; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px; }
.uvdtf-calc__saved-items { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; }
/* Два ряди: [код …… кнопки] / [мета]. Розміри з !important — XStore задає
   li/b свої font-size/line-height/margin і «драбинив» список (баг власника). */
.uvdtf-calc__saved-item {
	display: flex; flex-wrap: wrap; align-items: center; gap: 1px 8px;
	font-size: 12px !important; line-height: 1.35 !important;
	margin: 0 !important; padding: 6px 0 !important; border-bottom: 1px dashed #e7e7f2;
}
.uvdtf-calc__saved-item:last-child { border-bottom: 0; padding-bottom: 0 !important; }
.uvdtf-calc__saved-item::before { display: none !important; content: none !important; }
.uvdtf-calc__saved-code { white-space: nowrap; color: #5f6178; font-size: 12px !important; line-height: 1.35 !important; }
.uvdtf-calc__saved-code b { color: #1b1c2e; font-variant-numeric: tabular-nums; font-size: 12px !important; letter-spacing: .02em; }
.uvdtf-calc__saved-act { margin-left: auto; }
.uvdtf-calc__saved-meta { flex: 1 1 100%; color: #948da3; font-size: 11.5px !important; line-height: 1.35 !important; }
.uvdtf-calc__saved-act { flex: 0 0 auto; display: flex; gap: 4px; }
/* !important — той самий XStore-перебій button/label, що й усюди в рейлі. */
.uvdtf-calc__saved-btn,
.uvdtf-calc__saved-btn:hover,
.uvdtf-calc__saved-btn:focus,
.uvdtf-calc__saved-btn:active {
	border: 0 !important; background: transparent !important; cursor: pointer;
	font-size: 11.5px !important; font-weight: 700; line-height: 1.2 !important;
	padding: 3px 6px !important; border-radius: 6px; color: var(--uvc-acc, #6d28d9) !important;
	height: auto !important; min-height: 0 !important; box-shadow: none !important;
	text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap !important;
}
.uvdtf-calc__saved-btn:hover { background: var(--uvc-tint-45, #f5f1fd) !important; }
.uvdtf-calc__saved-btn--del,
.uvdtf-calc__saved-btn--del:hover { color: #b91c1c !important; }

/* Гість: запрошення прив'язати localStorage-список до кабінету. */
.uvdtf-calc__save-guest-hint {
	margin: -2px 0 10px; padding: 8px 11px; background: var(--uvc-tint-45, #f5f1fd);
	border: 1px dashed var(--uvc-bd-300, #c4b5fd); border-radius: 9px;
	font-size: 12px; line-height: 1.4; color: #5f6178;
}
.uvdtf-calc__save-guest-hint a {
	color: var(--uvc-acc, #6d28d9) !important; font-weight: 700; text-decoration: none !important;
}
.uvdtf-calc__save-guest-hint a:hover { text-decoration: underline !important; }

/* --- «Що буде після заявки» --- */
.uvdtf-calc__next-steps {
	background: #fff; border: 1px solid #e7e7f2; border-radius: 14px; padding: 16px 20px; margin: 0 0 16px;
}
.uvdtf-calc__next-steps h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: #1b1c2e; }
.uvdtf-calc__next-steps ol {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: uvstep;
}
.uvdtf-calc__next-steps li {
	counter-increment: uvstep; font-size: 12.5px; color: #5f6178;
	background: #f6f6fb; border-radius: 10px; padding: 10px; line-height: 1.45;
}
.uvdtf-calc__next-steps li::before {
	content: counter(uvstep); display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
	background: var(--uvc-acc, #6d28d9); color: #fff; font-weight: 700; font-size: 11px;
	align-items: center; justify-content: center; margin-right: 6px;
}
.uvdtf-calc__next-steps li b { color: #1b1c2e; }
@media (max-width: 700px) { .uvdtf-calc__next-steps ol { grid-template-columns: 1fr 1fr; } }

/* --- Липка планка (мобільний): склад замовлення по тапу --- */
.uvdtf-calc__stickybar .sb-main { display: flex; align-items: center; gap: 10px; width: 100%; }
.uvdtf-calc__stickybar .sb-toggle {
	background: rgba(255,255,255,.15); border: 0; color: inherit; font: inherit;
	border-radius: 8px; padding: 4px 8px; cursor: pointer; line-height: 1;
}
.uvdtf-calc__stickybar .sb-details { display: none; }
.uvdtf-calc__stickybar.is-expanded { flex-wrap: wrap; }
.uvdtf-calc__stickybar.is-expanded .sb-details {
	display: block; width: 100%; max-height: 42vh; overflow-y: auto;
	margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.2);
}
.uvdtf-calc__stickybar .sb-details .uvdtf-calc__sum-row { border-bottom-color: rgba(255,255,255,.2); }
.uvdtf-calc__stickybar .sb-details .uvdtf-calc__sum-name,
.uvdtf-calc__stickybar .sb-details .uvdtf-calc__sum-fmt { color: inherit; }

/* v2: ширша сцена (дві колонки) + прозорий фон — картки самі мають рамки. */
.uvdtf-calc--v2 { max-width: 1140px; padding: 22px; background: transparent; border: 0; box-shadow: none; }
@media (max-width: 640px) { .uvdtf-calc--v2 { padding: 12px; } }
.uvdtf-calc--v2 .uvdtf-calc__link-field[hidden] { display: none !important; }
.uvdtf-calc--v2 .uvdtf-calc__price,
.uvdtf-calc--v2 .uvdtf-calc__shipping,
.uvdtf-calc--v2 .uvdtf-calc__tiers-details { background: #fff; border-radius: 14px; }
/* v2: головний підсумок — праворуч; у блоці розрахунку цифра менша (не дублює акцент). */
.uvdtf-calc--v2 .uvdtf-calc__price-value { font-size: 22px; }

/* Розгорнута планка — аркуш зі складом замовлення (пігулка стає карткою). */
.uvdtf-calc__stickybar.is-expanded {
	border-radius: 16px;
	white-space: normal;
	max-width: calc(100vw - 24px);
	width: 420px;
	flex-direction: column;
	align-items: stretch;
	padding: 12px 16px 14px;
}
.uvdtf-calc__stickybar.is-expanded .sb-main { flex-wrap: wrap; }
.uvdtf-calc__stickybar.is-expanded .sb-meta { display: inline; }

/* Сторінка калькулятора: своя сітка «форма + FAQ праворуч» живе в контенті
   сторінки. У v2 праву колонку займає підсумок замовлення → FAQ переїжджає
   ПІД форму (клас вішає calc.js; !important — інлайн-стилі сторінки нижче в DOM). */
.uvdtf-page-layout--stack { grid-template-columns: minmax(0, 1fr) !important; }
.uvdtf-page-layout--stack .uvdtf-faq {
	position: static !important;
	max-height: none !important;
	overflow: visible !important;
	margin-top: 24px !important;
}

/* На живій сторінці (тема XStore/Elementor) position:sticky у .uvdtf-calc__rail
   не працював: предок .template-container (обгортка Elementor-темплейта, є на
   КОЖНІЙ сторінці сайту) має overflow:hidden — а це за специфікацією CSS
   вимикає sticky для будь-якого нащадка (задокументована поведінка, MDN:
   «position:sticky has no effect if any ancestor has overflow set to hidden,
   scroll or auto» — контейнер повинен мати overflow:visible на всьому шляху
   до найближчого прокручуваного предка). Знімаємо overflow ТІЛЬКИ на десктопі
   (де взагалі є sticky-колонка, див. медіа-запит .uvdtf-calc__rail вище) і
   ТІЛЬКИ на сторінках з нашим калькулятором — клас вішає calc.js
   (templateContainer.classList.add), мобільне off-canvas меню теми (яке й
   покладається на цей overflow:hidden, щоб не показувати горизонтальний
   скрол) лишається недоторканим. */
@media (min-width: 1024px) {
	.uvdtf-tpl-unclip { overflow: visible !important; }
}

/* ==========================================================================
   📱 МОБІЛЬНИЙ ПАКЕТ (аудит 390×844). Усе нижче діє ЛИШЕ до 1023 px —
   десктоп (≥1024) лишається піксель-у-піксель таким, як був.
   ========================================================================== */

/* --- 1. Поля: 16 px, інакше iOS зумить сторінку при фокусі ----------------
   База теми — 15 px (.uvdtf-calc__field input{font-size:1em}), Safari/iOS
   автоматично збільшує масштаб сторінки на будь-якому полі <16px і назад
   уже не повертає. !important — бо правило теми специфічніше за наше. */
@media (max-width: 1023px) {
	.uvdtf-calc input[type="text"],
	.uvdtf-calc input[type="tel"],
	.uvdtf-calc input[type="email"],
	.uvdtf-calc input[type="url"],
	.uvdtf-calc input[type="number"],
	.uvdtf-calc input[type="search"],
	.uvdtf-calc input[type="password"],
	.uvdtf-calc input:not([type]),
	.uvdtf-calc select,
	.uvdtf-calc textarea { font-size: 16px !important; }
}

/* --- 2. Тач-мішені ≥44 px ------------------------------------------------
   Де можна — збільшуємо саму кнопку, де це роздуло б макет — невидимим
   ::before (hit-area), сам елемент лишається такого ж вигляду. */
@media (max-width: 1023px) {
	/* «×» видалення наліпки: 30 → 40 px + 2 px hit-area з кожного боку = 44. */
	.uvdtf-calc--v2 .uvdtf-calc__design-head .uvdtf-calc__design-remove {
		width: 40px !important; height: 40px !important; flex: 0 0 40px !important;
		position: relative;
	}
	.uvdtf-calc__design-remove::before {
		content: ''; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px;
	}
	/* 🗑 видалення з кошика: 20×20 — вигляд лишаємо, hit-area розширюємо. */
	.uvdtf-calc__cart-del { position: relative; }
	.uvdtf-calc__cart-del::before {
		content: ''; position: absolute; top: -12px; right: -12px; bottom: -12px; left: -12px;
	}
	/* Чипи плівок і міст Нової Пошти: 30–41 px заввишки. */
	.uvdtf-calc__chip { padding: 11px 12px; }
	/* !important — вище є .uvdtf-np-chip{min-height:0!important} проти висот XStore. */
	.uvdtf-np-chip,
	.uvdtf-calc .uvdtf-np-chip {
		min-height: 44px !important; padding: 8px 14px;
		display: inline-flex; align-items: center;
	}
	/* Ряди-чекбокси (месенджери, порізка, термоперенос) — уся смуга тапабельна. */
	.uvdtf-calc__checkbox { min-height: 44px; align-items: center; }
	.uvdtf-calc__checkbox input[type="checkbox"],
	.uvdtf-calc__cutrow input[type="checkbox"],
	.uvdtf-calc__consent input[type="checkbox"] {
		width: 20px !important; height: 20px !important; min-height: 20px !important;
		flex: 0 0 20px !important;
	}
	/* Кнопки: тема сплющує padding — задаємо мінімальну висоту явно. */
	.uvdtf-calc__btn,
	button.uvdtf-calc__btn { min-height: 48px !important; }
	.uvdtf-calc__save-btn,
	.uvdtf-calc__cart-add,
	.uvdtf-calc__add,
	button.uvdtf-calc__add { min-height: 44px !important; }
	/* text-transform — тема робить усі <button> ВЕЛИКИМИ ЛІТЕРАМИ, і посилання
	   «або вставте посилання на макет» займало два рядки капсом (решта наших
	   кнопок цей скид уже мають — тут його бракувало). */
	.uvdtf-calc__linkbtn {
		min-height: 44px; display: inline-flex; align-items: center; text-align: left;
		text-transform: none !important; letter-spacing: 0 !important;
	}
}

/* --- 3. Резерв під липку планку ------------------------------------------
   Планка position:fixed → місця собі не резервує, і нижній край калькулятора
   («Разом до заявки», згода, CTA) лишався під нею назавжди: на сторінці, де
   калькулятор останній, це 149 px непрокручуваного контенту.
   Розпірка ::after, а не padding — щоб не чіпати власні відступи блока.
   Висоту рахує calc.js (--uvdtf-calc-reserve): рівно стільки, скільки бракує.
   Є що гортати під калькулятором (футер сторінки) → 0, без «дірки». */
@media (max-width: 1023px) {
	.uvdtf-calc::after {
		content: '';
		display: block;
		height: var(--uvdtf-calc-reserve, 0px);
	}
	/* Автоскрол до поля (фокус на помилці, розкриття блоків) не має ховати
	   поле під планкою — той самий резерв у scroll-margin. */
	.uvdtf-calc input,
	.uvdtf-calc select,
	.uvdtf-calc textarea,
	.uvdtf-calc__consent,
	.uvdtf-calc__design,
	.uvdtf-calc__actions,
	.uvdtf-calc__summary {
		scroll-margin-bottom: calc(var(--uvdtf-sticky-h, 0px) + var(--uvdtf-bottom-offset, 0px) + 16px);
	}
}

/* --- 4. Планка в режимі кошика: смуга на всю ширину ----------------------
   Було: shrink-to-fit давав вузький стовпчик 195 px і 150 px висоти
   («Замовити» окремим рядком, мета в три рядки). Фіксована ширина смуги
   повертає нормальні два рядки: сума + CTA / пояснення — і вдвічі менше
   заважає контенту. */
@media (max-width: 640px) {
	.uvdtf-calc__stickybar.has-cart {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		padding: 9px 14px;
	}
	.uvdtf-calc__stickybar.has-cart .sb-cta { margin-left: auto; }
	.uvdtf-calc__stickybar.has-cart .sb-total { font-size: 18px; }
}