/**
 * MVMSK – objednávka porezu.
 *
 * Štýly vychádzajú z dizajnových tokenov témy (--wp--preset--*), takže formulár
 * vyzerá ako súčasť webu a funguje aj v tmavom režime. Fallback hodnoty držia
 * vzhľad aj v téme, ktorá tieto presety nedefinuje.
 */

/* Formulár je pracovný nástroj, nie článok – potrebuje šírku na náhľad
 * vedľa polí. Vysúvame ho preto zo šírky obsahu témy až na 1400 px a
 * centrujeme voči rodičovi (posun cez `left`, aby to fungovalo aj v
 * úzkom kontejneri stránky).
 */
.mvmsk-porez {
	position: relative;
	left: 50%;
	width: min(1400px, max(100%, calc(100vw - 3rem)));
	max-width: none;
	transform: translateX(-50%);
	/* Linky sú na pieskovom pozadí formulára o tón tmavšie (clay), inak by
	 * rámčeky polí a kariet zanikli.
	 */
	--mvmsk-linka: var(--wp--preset--color--clay, #c7bfb2);
	--mvmsk-text: var(--wp--preset--color--ink, #1b1a17);
	--mvmsk-tlmene: var(--wp--preset--color--graphite, #6b6862);
	--mvmsk-pozadie: var(--wp--preset--color--base, #fff);
	--mvmsk-papier: var(--wp--preset--color--paper, #f7f6f4);
	--mvmsk-plocha: var(--wp--preset--color--sand, #e7e3dc);
	/* Pozadie 3D scény: 10 % sivej (text primiešaný do pozadia). Svetlý
	 * dielec (Unifarba) by na papierovej farbe zanikol; v tmavom režime sa
	 * zmes sama otočí na o tón svetlejšiu tmavú.
	 */
	--mvmsk-scena: color-mix(in srgb, var(--mvmsk-text) 10%, var(--mvmsk-pozadie));
	--mvmsk-akcent: var(--wp--preset--color--accent, #b4522b);
	--mvmsk-medzera: var(--wp--preset--spacing--30, 1.5rem);
	/* Čiara spoja dupla na hranách 3D dielca. Leží na materiáli, nie na
	 * ploche témy – farba dosky sa s tmavým režimom nemení, preto ani tieň
	 * spoja nie.
	 */
	--mvmsk-spoj: rgba(0, 0, 0, 0.45);

	color: var(--mvmsk-text);
}

/* Konfigurátor je pracovná plocha v tmavšom piesku – biele polia na nej
 * vystúpia a formulár sa oddelí od textu stránky.
 */
.mvmsk-porez__form {
	padding: clamp(1rem, 4vw, 3.5rem);
	background: var(--mvmsk-plocha);
}

.mvmsk-porez__form section {
	margin-bottom: var(--wp--preset--spacing--50, 3rem);
	padding-top: var(--wp--preset--spacing--40, 2.5rem);
	border-top: 1px solid var(--mvmsk-linka);
}

.mvmsk-porez__form section:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.mvmsk-porez__form h2 {
	margin: 0 0 var(--mvmsk-medzera);
	font-size: var(--wp--preset--font-size--large, 1.35rem);
}

.mvmsk-porez__form h3 {
	margin: 0 0 var(--mvmsk-medzera);
	font-size: var(--wp--preset--font-size--medium, 1.1rem);
}

.mvmsk-porez__form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.9375rem;
	color: var(--mvmsk-tlmene);
}

.mvmsk-porez__form input[type="text"],
.mvmsk-porez__form input[type="email"],
.mvmsk-porez__form input[type="tel"],
.mvmsk-porez__form input[type="number"],
.mvmsk-porez__form input[type="file"],
.mvmsk-porez__form select,
.mvmsk-porez__form textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-bottom: var(--mvmsk-medzera);
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--mvmsk-text);
	background: var(--mvmsk-pozadie);
	border: 1px solid var(--mvmsk-linka);
	/* Téma stavia na ostrých hranách – žiadne zaoblenia. */
	border-radius: 0;
}

.mvmsk-porez__form input:focus-visible,
.mvmsk-porez__form select:focus-visible,
.mvmsk-porez__form textarea:focus-visible {
	outline: 2px solid var(--mvmsk-akcent);
	outline-offset: 1px;
}

.mvmsk-porez__form .form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--wp--preset--spacing--20, 1rem);
}

/* Honeypot – mimo obrazovky, nie `display: none` (také polia roboty
 * preskakujú). Pred čítačkami je skrytý cez `aria-hidden`.
 */
.mvmsk-porez__hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mvmsk-porez .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pole zabalené v popise – `<label><span>Popis</span><select>`. Bez `id`
 * sa dá zákazka skopírovať bez prečíslovania atribútov `for`.
 */
.mvmsk-porez__form .mvmsk-pole {
	margin: 0;
}

.mvmsk-pole > span {
	display: block;
	margin-bottom: 0.35rem;
}

/* Popis má podľa témy pološiroký rez – pole v ňom ho nemá zdediť. */
.mvmsk-porez__form .mvmsk-pole input,
.mvmsk-porez__form .mvmsk-pole select {
	margin-bottom: 0;
	font-weight: 400;
}

/* --- Zákazky --- */

.mvmsk-porez__uvod {
	max-width: 62rem;
	margin: calc(-0.5 * var(--mvmsk-medzera)) 0 var(--mvmsk-medzera);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--mvmsk-tlmene);
}

/* Obnovená rozpracovaná objednávka – nenápadne, ale s cestou späť. */
.mvmsk-porez__koncept {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 var(--mvmsk-medzera);
	padding: 0.6rem 0.85rem;
	font-size: 0.875rem;
	background: var(--mvmsk-pozadie);
	border-left: 3px solid var(--mvmsk-akcent);
}

.mvmsk-porez__koncept[hidden] {
	display: none;
}

.mvmsk-porez__form .mvmsk-porez__odznova {
	padding: 0.3rem 0.7rem;
	font-size: 0.8125rem;
	color: var(--mvmsk-text);
	background: transparent;
	border: 1px solid var(--mvmsk-linka);
}

.mvmsk-porez__form .mvmsk-porez__odznova:hover {
	color: var(--mvmsk-akcent);
	border-color: var(--mvmsk-akcent);
}

.mvmsk-zakazky {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 1.5rem);
	margin-bottom: var(--mvmsk-medzera);
}

/* Zákazka je jeden typ dosky. Rozloženie vnútri riadia container queries –
 * podľa šírky zákazky, nie okna, lebo téma formulár zužuje po svojom.
 */
.mvmsk-zakazka {
	container-type: inline-size;
	padding: clamp(0.75rem, 2vw, 1.5rem);
	border: 1px solid var(--mvmsk-linka);
	border-top: 3px solid var(--mvmsk-text);
}

.mvmsk-zakazka__hlava {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

.mvmsk-porez__form .mvmsk-zakazka__nadpis {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.75rem;
	margin: 0;
}

.mvmsk-zakazka__popis {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--mvmsk-tlmene);
}

.mvmsk-zakazka__akcie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Jedinú zákazku nemá zmysel odstraňovať. */
.mvmsk-zakazky.is-jedna .mvmsk-zakazka__odstranit {
	display: none;
}

.mvmsk-porez__form .mvmsk-zakazka__odstranit.is-potvrdit {
	color: var(--mvmsk-akcent);
	border-color: var(--mvmsk-akcent);
}

/* Hlavička zákazky: v prvom riadku doska – materiál a hrúbka úzke, dekor
 * dostane zvyšok (býva to dlhší text); v druhom riadku dve farby hrán, každá
 * zhruba na polovicu šírky. Stredné dva stĺpce sú preto dva, nie jeden.
 */
.mvmsk-zakazka__material {
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) minmax(0, 1fr) minmax(7rem, 9rem);
	grid-template-areas:
		"material dekor dekor hrubka"
		"farba-a farba-a farba-b farba-b";
	gap: 0.75rem 1rem;
	margin-bottom: 1.25rem;
}

.mvmsk-pole--material {
	grid-area: material;
}

.mvmsk-pole--dekor {
	grid-area: dekor;
}

.mvmsk-pole--hrubka {
	grid-area: hrubka;
}

.mvmsk-pole--farba-a {
	grid-area: farba-a;
}

.mvmsk-pole--farba-b {
	grid-area: farba-b;
}

.mvmsk-zakazka__zhoda {
	margin: -0.25rem 0 1.25rem;
	padding: 0.6rem 0.85rem;
	font-size: 0.875rem;
	background: var(--mvmsk-pozadie);
	border-left: 3px solid var(--mvmsk-akcent);
}

.mvmsk-zakazka__telo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30, 1.5rem);
}

/* Na širokej zákazke stojí náhľad vedľa tabuľky a pri dlhom zozname
 * dielcov ide s ním – stále ukazuje riadok, ktorý sa práve píše.
 *
 * Hranica 66rem: pevné stĺpce tabuľky (s duplou a širšími hranami) majú
 * 36rem, náhľad 20rem – pri užšej zákazke by na názov dielca nezostalo
 * miesto. Rovnakú hranicu majú pravidlá náhľadu nižšie.
 */
@container (min-width: 66rem) {
	.mvmsk-zakazka__telo {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem);
		align-items: start;
	}

	.mvmsk-zakazka .mvmsk-nahlad {
		position: sticky;
		/* Pod lepiacou hlavičkou témy. */
		top: 6rem;
	}
}

/* --- Tabuľka dielcov ---
 * Riadok = dielec. Zadáva sa z klávesnice – Tab po poliach, Enter na ďalší
 * riadok. Čísla sú zarovnané doprava, aby sa dali porovnávať pod sebou.
 */
.mvmsk-dielce {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.mvmsk-dielce__k-cislo {
	width: 1.75rem;
}

/* Rozmer s rezervou na štyri číslice (5000 mm), Ks na tri – užšie stĺpce
 * dávajú miesto duple a hranám.
 */
.mvmsk-dielce__k-rozmer {
	width: 4.5rem;
}

.mvmsk-dielce__k-ks {
	width: 3rem;
}

.mvmsk-dielce__k-dupla {
	width: 2.75rem;
}

/* Hrana musí pojať „0,5 B“ aj so šípkou výberu a značkou olepenej hrany. */
.mvmsk-dielce__k-hrana {
	width: 3.75rem;
}

.mvmsk-dielce__k-akcie {
	width: 4.5rem;
}

.mvmsk-dielce thead th {
	padding: 0 0.2rem 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	vertical-align: bottom;
	white-space: nowrap;
	color: var(--mvmsk-tlmene);
}

/* Skupiny hrán – „Hrana dĺžka“ nad hornou a dolnou, ako v CSV pre výrobu. */
.mvmsk-dielce thead th[colspan] {
	text-align: center;
	border-bottom: 1px solid var(--mvmsk-linka);
}

.mvmsk-dielce thead tr + tr th {
	padding-top: 0.3rem;
	text-align: center;
}

.mvmsk-dielce td {
	padding: 0.15rem;
}

.mvmsk-dielce .mvmsk-dielec__cislo {
	padding: 0 0.35rem 0 0;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--mvmsk-tlmene);
}

/* Riadok, ktorý ukazuje náhľad. */
.mvmsk-dielec.is-aktivny .mvmsk-dielec__cislo {
	font-weight: 600;
	color: var(--mvmsk-akcent);
	box-shadow: inset 3px 0 0 var(--mvmsk-akcent);
}

.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce input,
.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce select {
	min-width: 0;
	margin: 0;
	padding: 0.45rem 0.5rem;
	font-size: 0.875rem;
}

.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce select {
	padding-right: 0.1rem;
	padding-left: 0.35rem;
}

/* Šípky pri číslach by v úzkom stĺpci zjedli polovicu miesta. */
.mvmsk-dielce input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.mvmsk-dielce input[type="number"]::-webkit-inner-spin-button,
.mvmsk-dielce input[type="number"]::-webkit-outer-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

/* Olepená strana je vidieť už v tabuľke – bez toho by zákazník musel
 * porovnávať stĺpce hrán hodnotu po hodnote.
 */
.mvmsk-porez__form .mvmsk-dielce .edge-select.is-olepena {
	font-weight: 600;
	border-left: 3px solid var(--mvmsk-akcent);
}

/* Hrana v druhej farbe (B) má značku vo farbe textu – na prvý pohľad iná
 * než akcent hrán A, rovnako ako je iná na 3D náhľade.
 */
.mvmsk-porez__form .mvmsk-dielce .edge-select.is-farba-b {
	border-left-color: var(--mvmsk-text);
}

/* Dupla – celá bunka je popis políčka, aby sa dalo trafiť aj prstom. */
.mvmsk-porez__form .mvmsk-dielec__dupla {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.1rem;
	margin: 0;
	cursor: pointer;
}

.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	padding: 0;
	accent-color: var(--mvmsk-akcent);
	cursor: pointer;
}

/* Pri doske, z ktorej sa dupla nerobí (10 mm), je políčko zakázané. */
.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce input[type="checkbox"]:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.mvmsk-porez__form .mvmsk-dielec__dupla:has(input:disabled) {
	cursor: not-allowed;
}

.mvmsk-dielec__akcie {
	white-space: nowrap;
	text-align: right;
}

.mvmsk-porez__form .mvmsk-dielec__akcie button {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin: 0 0 0 0.15rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
	vertical-align: middle;
}

.mvmsk-zakazka__pridat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-top: 0.75rem;
}

.mvmsk-porez .mvmsk-zakazka__napoveda {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.75rem;
}

.mvmsk-porez__form .mvmsk-pridat--dielec {
	padding: 0.45rem 0.9rem 0.45rem 0.6rem;
	font-size: 0.875rem;
}

.mvmsk-pridat--dielec .mvmsk-pridat__plus {
	width: 1.3rem;
	height: 1.3rem;
	font-size: 1rem;
}

.mvmsk-zakazka__suhrn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.25rem;
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	font-size: 0.875rem;
	border-top: 1px solid var(--mvmsk-linka);
}

/* Úzka zákazka (telefón): z riadku tabuľky je karta – polia s vlastnými
 * popismi namiesto hlavičky stĺpcov. Hranica 45rem: pod ňou by pevné
 * stĺpce tabuľky (36rem) nechali názvu dielca len pár znakov.
 */
@container (max-width: 44.98rem) {
	/* Materiál a hrúbka vedľa seba, dekor a farby hrán pod nimi cez celú šírku. */
	.mvmsk-zakazka__material {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"material hrubka"
			"dekor dekor"
			"farba-a farba-a"
			"farba-b farba-b";
	}

	.mvmsk-dielce,
	.mvmsk-dielce tbody {
		display: block;
	}

	.mvmsk-dielce colgroup,
	.mvmsk-dielce thead {
		display: none;
	}

	.mvmsk-dielce .mvmsk-dielec {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 0.5rem;
		margin-bottom: 0.5rem;
		padding: 0.6rem;
		background: var(--mvmsk-pozadie);
		border: 1px solid var(--mvmsk-linka);
	}

	.mvmsk-dielce .mvmsk-dielec.is-aktivny {
		border-color: var(--mvmsk-akcent);
	}

	.mvmsk-dielce .mvmsk-dielec > * {
		display: block;
		padding: 0;
		grid-column: span 4;
	}

	.mvmsk-dielce .mvmsk-dielec__cislo {
		grid-column: span 8;
		align-self: center;
		font-size: 0.9375rem;
		text-align: left;
		color: var(--mvmsk-text);
	}

	.mvmsk-dielce .mvmsk-dielec__cislo::before {
		content: "#";
	}

	.mvmsk-dielec.is-aktivny .mvmsk-dielec__cislo {
		box-shadow: none;
	}

	/* Názov cez celú šírku; dĺžka, šírka, ks a dupla v jednom riadku, pod
	 * nimi štyri hrany – po troch stĺpcoch z dvanástich.
	 */
	.mvmsk-dielce .mvmsk-dielec > td:nth-child(2) {
		grid-column: 1 / -1;
	}

	.mvmsk-dielce .mvmsk-dielec > td:nth-child(n+3):nth-child(-n+10) {
		grid-column: span 3;
	}

	/* Políčko dupla na výšku susedných polí, nie len malý štvorček. */
	.mvmsk-porez__form .mvmsk-dielec__dupla {
		justify-content: flex-start;
		min-height: 2.4rem;
	}

	.mvmsk-dielce .mvmsk-dielec > .mvmsk-dielec__akcie {
		grid-row: 1;
		grid-column: 9 / -1;
	}

	.mvmsk-dielce td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.2rem;
		overflow: hidden;
		font-size: 0.75rem;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--mvmsk-tlmene);
	}
}

/* --- Náhľad dielca --- */

/* V úzkom stĺpci vedľa tabuľky je scéna nad panelom; keď je náhľad pod
 * tabuľkou cez celú šírku, panel ide vedľa scény.
 */
.mvmsk-nahlad {
	--mvmsk-odsadenie-nahladu: var(--wp--preset--spacing--20, 1rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: stretch;
	padding: var(--mvmsk-odsadenie-nahladu);
	background: var(--mvmsk-pozadie);
	border: 1px solid var(--mvmsk-linka);
}

.mvmsk-nahlad__panel {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.75rem;
}

/* Scéna má vlastný stĺpec – prekresľuje sa len ona, panel vedľa nej
 * zostáva v DOM aj s rozpísanou voľbou. Siaha až po okraje karty – šírka
 * ide dielcu, nie odsadeniu.
 */
.mvmsk-nahlad__scena {
	display: grid;
	min-width: 0;
	margin: calc(-1 * var(--mvmsk-odsadenie-nahladu));
	margin-bottom: 0;
}

@container (min-width: 40rem) and (max-width: 65.98rem) {
	.mvmsk-nahlad {
		grid-template-columns: minmax(0, 1fr) minmax(15rem, 17rem);
		gap: var(--wp--preset--spacing--30, 1.5rem);
	}

	.mvmsk-nahlad__scena {
		margin: calc(-1 * var(--mvmsk-odsadenie-nahladu));
		margin-right: 0;
	}
}

.mvmsk-nahlad__aktivny {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.mvmsk-nahlad__suhrn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: 0.875rem;
}

/* Rozpis bežných metrov po hrúbkach pásky – každá má inú cenu. */
.mvmsk-nahlad__hrubky {
	color: var(--mvmsk-tlmene);
	font-size: 0.8125rem;
}

.mvmsk-nahlad__hromadne {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--mvmsk-linka);
}

.mvmsk-nahlad__hromadne .mvmsk-pole {
	flex: 1 1 auto;
	min-width: 0;
}

.mvmsk-porez__form .mvmsk-nahlad__hromadne .mvmsk-pole > span {
	font-size: 0.8125rem;
}

.mvmsk-porez__form .mvmsk-nahlad__hromadne select {
	padding: 0.45rem 0.5rem;
	font-size: 0.875rem;
}

.mvmsk-porez__form .mvmsk-nahlad__hromadne .edge-all-btn {
	flex: 0 0 auto;
	padding: 0.5rem 0.7rem;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.mvmsk-nahlad__tip {
	margin: 0;
	color: var(--mvmsk-tlmene);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* --- 3D scéna ---
 * Dielec je box zo šiestich CSS stien. Priestorový dojem robí `perspective`
 * na scéne a `preserve-3d` na boxe – žiadna 3D knižnica ani WebGL, takže
 * náhľad nič nepridá do veľkosti stránky.
 */
.mvmsk-scena {
	position: relative;
	display: grid;
	place-items: center;
	/* Základná výška; skript ju podľa dielca zdvihne, aby bol po pootočení
	 * celý vidieť. Vedľa panela sa scéna aj tak natiahne na jeho výšku.
	 */
	box-sizing: border-box;
	min-height: 240px;
	padding: 2.4rem 1rem 2.8rem;
	/* Zvislý ťah prstom posúva stránku, štipnutie patrí priblíženiu dielca. */
	touch-action: pan-y;
	overflow: hidden;
}

/* Pozadie so špecificitou formulára – téma WOODCNC mala pre scénu vlastné
 * pieskové pozadie, na pieskovom formulári by v ňom dielec zanikol.
 */
.mvmsk-porez .mvmsk-scena {
	background:
		radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, 0.08), transparent 60%),
		var(--mvmsk-scena);
}

.mvmsk-scena__stage {
	position: relative;
	perspective: 900px;
	perspective-origin: 50% 45%;
	cursor: grab;
	/* Zvislý pohyb prstom posúva stránku, vodorovný otáča dielcom – inak by
	 * na mobile náhľad cez celú šírku displeja zablokoval posúvanie.
	 */
	touch-action: pan-y;
	/* Tieň patrí sem, nie na box – na boxe by zrušil 3D kontext. */
	filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.2));
}

.mvmsk-scena__stage.is-taham {
	cursor: grabbing;
}

.mvmsk-box {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.25s ease;
	/* Pozor: `filter`, `opacity` ani `overflow` sem nepatria – rušia
	 * `preserve-3d` a box by sa zobrazil plochý. Tieň je preto na scéne.
	 */
}

.mvmsk-scena__stage.is-taham .mvmsk-box {
	transition: none;
}

/* Steny sú vycentrované na strede boxu – transform ich potom otočí a odsune. */
.mvmsk-box__plocha,
.mvmsk-box__hrana {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	border: 0;
	background-repeat: repeat;
	backface-visibility: visible;
}

.mvmsk-box__plocha {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
	/* Otočená dekorová vrstva nesmie vytiecť mimo plochu dielca. */
	overflow: hidden;
}

/* Kresba dreva je v textúre zvislá. Keď má vlákno bežať po dĺžke dielca,
 * treba textúru otočiť – a `background-image` sa v CSS otočiť nedá. Dekor je
 * preto vo vlastnej vrstve, ktorú už otočiť vieme.
 */
.mvmsk-box__dekor {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background-repeat: repeat;
	pointer-events: none;
}

/* ABS páska na ploche dielca – pás pri olepenej hrane, široký podľa hrúbky
 * pásky (skript ju kreslí zväčšene, `--mvmsk-paska`). Tmavá linka oddeľuje
 * pásku od dekoru – biela páska na bielej doske by inak zanikla. Farba
 * linky je tieň na materiáli, nie farba rozhrania, preto v oboch režimoch
 * rovnaká.
 */
.mvmsk-box__paska,
.mvmsk-box__koniec {
	position: absolute;
	display: block;
	/* Jemný lesk ABS – páska vo farbe dekoru sa od plochy odlíši aj tónom. */
	background-image: linear-gradient(rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.1));
	pointer-events: none;
}

/* Koniec susednej pásky na boku dielca (viď konce() v skripte) – páska je
 * teleso, na rohu vidno jej hrúbku aj zboku.
 */
.mvmsk-box__koniec--vlavo,
.mvmsk-box__koniec--vpravo {
	top: 0;
	bottom: 0;
	width: var(--mvmsk-paska, 2px);
}

.mvmsk-box__koniec--hore,
.mvmsk-box__koniec--dole {
	right: 0;
	left: 0;
	height: var(--mvmsk-paska, 2px);
}

.mvmsk-box__koniec--vlavo {
	left: 0;
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__koniec--vpravo {
	right: 0;
	box-shadow: -1px 0 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__koniec--hore {
	top: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__koniec--dole {
	bottom: 0;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__paska--h1,
.mvmsk-box__paska--h2 {
	right: 0;
	left: 0;
	height: var(--mvmsk-paska, 2px);
}

.mvmsk-box__paska--w1,
.mvmsk-box__paska--w2 {
	top: 0;
	bottom: 0;
	width: var(--mvmsk-paska, 2px);
}

.mvmsk-box__paska--h1 {
	top: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__paska--h2 {
	bottom: 0;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__paska--w1 {
	left: 0;
	box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
}

.mvmsk-box__paska--w2 {
	right: 0;
	box-shadow: -1px 0 0 rgba(0, 0, 0, 0.55);
}

/* Spodná plocha je vždy v tieni – bez toho box vyzerá ako papier. */
.mvmsk-box__plocha--bottom {
	filter: brightness(0.82);
}

.mvmsk-box__hrana {
	display: block;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.22);
	transition: box-shadow 0.15s ease, filter 0.15s ease;
}

.mvmsk-box__hrana:hover {
	box-shadow: inset 0 0 0 2px var(--mvmsk-akcent);
}

.mvmsk-box__hrana:focus-visible {
	outline: 2px solid var(--mvmsk-akcent);
	outline-offset: 2px;
}

/* Olepená hrana má dekor materiálu a jemný lesk ABS pásky. */
.mvmsk-box__hrana.is-olepena {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.mvmsk-box__hrana-popis {
	display: none;
}

/* Dupla: čiara spoja v polovici hrúbky – dielec je zlepený z dvoch dosiek.
 * Horná a dolná hrana majú hrúbku dielca na výšku, ľavá a pravá na šírku.
 */
.mvmsk-box.is-dupla .mvmsk-box__hrana::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	border-top: 1px solid var(--mvmsk-spoj);
	pointer-events: none;
}

.mvmsk-box.is-dupla .mvmsk-box__hrana--svisla::after {
	top: 0;
	right: auto;
	bottom: 0;
	left: 50%;
	border-top: 0;
	border-left: 1px solid var(--mvmsk-spoj);
}

/* Olepenú hranu dupla kryje jedna široká páska cez obe dosky – spoj pod ňou
 * nevidno. Okraje pásky sú zvýraznené, aby bolo vidieť, že ide o jeden pás.
 */
.mvmsk-box.is-dupla .mvmsk-box__hrana.is-olepena::after {
	content: none;
}

.mvmsk-box.is-dupla .mvmsk-box__hrana.is-olepena {
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.45),
		inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* Šírka pásky dupla priamo na hrane – „42 mm“. Písmo je tieň na materiáli,
 * nie text rozhrania; svetlá páska dostane tmavé, tmavá (B) svetlé.
 */
.mvmsk-box__paska-sirka {
	position: absolute;
	top: 50%;
	left: 50%;
	font-family: var(--wp--preset--font-family--mono, monospace);
	line-height: 1;
	white-space: nowrap;
	color: rgba(0, 0, 0, 0.6);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.mvmsk-box__hrana--svisla .mvmsk-box__paska-sirka {
	transform: translate(-50%, -50%) rotate(-90deg);
}

.mvmsk-box__hrana.is-farba-b .mvmsk-box__paska-sirka {
	color: rgba(255, 255, 255, 0.8);
}

.mvmsk-scena__kota {
	position: absolute;
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 0.75rem;
	color: var(--mvmsk-tlmene);
	pointer-events: none;
}

.mvmsk-scena__kota--dlzka {
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.mvmsk-scena__kota--sirka {
	top: 0.6rem;
	left: 0.8rem;
}

.mvmsk-scena__kota--hrubka {
	top: 0.6rem;
	right: 0.8rem;
}

@media (prefers-reduced-motion: reduce) {
	.mvmsk-box {
		transition: none;
	}
}

/* Údaj o mierke – bez neho by zákazník nevedel, prečo je malý dielec
 * v náhľade malý.
 */
.mvmsk-scena__mierka {
	position: absolute;
	bottom: 0.6rem;
	left: 0.8rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mvmsk-tlmene);
}

/* Priblíženie: tlačidlá v pravom dolnom rohu scény. */
.mvmsk-scena__zoom {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	display: flex;
	gap: 0.25rem;
}

.mvmsk-porez__form .mvmsk-scena__zoom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--mvmsk-text);
	background: var(--mvmsk-pozadie);
	border: 1px solid var(--mvmsk-linka);
	cursor: pointer;
}

.mvmsk-porez__form .mvmsk-scena__zoom-btn:hover {
	border-color: var(--mvmsk-akcent);
	color: var(--mvmsk-akcent);
}

.mvmsk-porez__form .mvmsk-scena__zoom-btn:focus-visible {
	outline: 2px solid var(--mvmsk-akcent);
	outline-offset: 1px;
}

/* Nápoveda pri holom koliesku – stránka sa posúva ďalej, len zákazník
 * zistí, ako dielec priblížiť.
 */
.mvmsk-scena__napoveda {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 0.5rem 0.85rem;
	font-size: 0.8125rem;
	white-space: nowrap;
	color: var(--mvmsk-pozadie);
	background: var(--mvmsk-text);
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.mvmsk-scena.is-napoveda .mvmsk-scena__napoveda {
	opacity: 0.9;
}

/* Na dotykových zariadeniach sa približuje dvoma prstami – tlačidlá by
 * len zakrývali dielec.
 */
@media (hover: none) and (pointer: coarse) {
	.mvmsk-scena__zoom,
	.mvmsk-scena__napoveda {
		display: none;
	}
}

/* Kým zákazník nezadá rozmery, kreslíme ukážkový dielec – prázdna scéna
 * nenapovie, čo sa v nej bude diať. Je tlmený, aby si ho nikto nepomýlil
 * so zadanými hodnotami.
 */
.mvmsk-scena.is-ukazka .mvmsk-box__plocha,
.mvmsk-scena.is-ukazka .mvmsk-box__hrana {
	opacity: 0.45;
}

.mvmsk-scena__ukazka {
	position: absolute;
	top: 0.6rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--mvmsk-tlmene);
	pointer-events: none;
}

/* Úzka scéna vedľa tabuľky (a telefón): kóty šírky a hrúbky sú v horných
 * rohoch, nápis o ukážke a mierka idú pod ne, aby sa neprekrývali.
 */
@container (min-width: 66rem) {
	.mvmsk-scena__ukazka {
		top: 2rem;
	}
}

/* Počas otáčania sa nesmie označovať text stránky. */
body.mvmsk-tahame {
	user-select: none;
	-webkit-user-select: none;
}

/* --- Súhrn objednávky a stav --- */

/* Súhrn a odoslanie sú pod poslednou zákazkou – tam ich zákazník čaká.
 * Prilepené k spodnej hrane obrazovky prekrývali náhľad dielca.
 */
.mvmsk-porez__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 1rem);
	align-items: center;
	justify-content: space-between;
	margin: var(--wp--preset--spacing--40, 2.5rem) 0 0;
	padding: var(--wp--preset--spacing--20, 1rem) var(--wp--preset--spacing--30, 1.5rem);
	background: var(--mvmsk-pozadie);
	border: 1px solid var(--mvmsk-linka);
	border-top: 3px solid var(--mvmsk-akcent);
}

.mvmsk-porez__spolu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem var(--wp--preset--spacing--30, 1.5rem);
	margin: 0;
	font-size: 0.9375rem;
}

/* Rozpis hrán po páskach (hrúbka × šírka × farba) pod súčtami zákazky aj
 * objednávky – vlastný riadok, každá páska na svojom mieste, aby sa dupla
 * (42 mm) nezliala s bežnou páskou.
 */
.mvmsk-suhrn__pasky {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 0.2rem 1.25rem;
	padding-top: 0.35rem;
	font-size: 0.875rem;
	border-top: 1px dotted var(--mvmsk-linka);
}

.mvmsk-suhrn__nadpis {
	flex-basis: 100%;
	color: var(--mvmsk-tlmene);
}

/* Každá páska na vlastnom riadku – s nadmierou je položka dlhá a dve vedľa
 * seba sa čítali ako jedna.
 */
.mvmsk-suhrn__paska {
	flex-basis: 100%;
}

/* Veľké plusko – primárna akcia pri skladaní objednávky. */
.mvmsk-pridat {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 1.2rem 0.7rem 0.9rem;
	color: var(--mvmsk-text);
	background: transparent;
	border: 1px dashed var(--mvmsk-tlmene);
}

.mvmsk-pridat:hover {
	color: var(--mvmsk-akcent);
	border-color: var(--mvmsk-akcent);
	border-style: solid;
}

.mvmsk-pridat__plus {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	font-size: 1.2rem;
	line-height: 1;
	color: var(--mvmsk-pozadie);
	background: var(--mvmsk-text);
}

.mvmsk-pridat:hover .mvmsk-pridat__plus {
	background: var(--mvmsk-akcent);
}

/* Selektor s formulárom – inak `font: inherit` nižšie prebije veľkosť písma
 * a tlačidlo by bolo väčšie než susedné „Odstrániť“.
 */
.mvmsk-porez__form .duplicate-item-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	font-size: 0.8125rem;
	color: var(--mvmsk-text);
	background: transparent;
	border: 1px solid var(--mvmsk-linka);
}

.mvmsk-porez__form .duplicate-item-btn:hover {
	border-color: var(--mvmsk-akcent);
	color: var(--mvmsk-akcent);
}

.mvmsk-porez__status {
	margin: 0 0 var(--mvmsk-medzera);
	font-size: 0.9375rem;
	min-height: 1.4em;
}

.mvmsk-porez__status.is-prebieha {
	color: var(--mvmsk-tlmene);
}

.mvmsk-porez__status.is-uspech {
	padding: var(--wp--preset--spacing--20, 1rem);
	background: var(--mvmsk-papier);
	border-left: 3px solid var(--mvmsk-akcent);
}

.mvmsk-porez__status.is-chyba {
	padding: var(--wp--preset--spacing--20, 1rem);
	color: var(--mvmsk-akcent);
	border-left: 3px solid var(--mvmsk-akcent);
}

/* --- Tlačidlá --- */

.mvmsk-porez__form button {
	font: inherit;
	cursor: pointer;
	border-radius: 0;
}

.mvmsk-porez__form .remove-item-btn {
	padding: 0.35rem 0.7rem;
	font-size: 0.8125rem;
	color: var(--mvmsk-tlmene);
	background: transparent;
	border: 1px solid var(--mvmsk-linka);
}

.mvmsk-porez__form .remove-item-btn:hover {
	color: var(--mvmsk-akcent);
	border-color: var(--mvmsk-akcent);
}

.edge-all-btn {
	padding: 0.3rem 0.7rem;
	font-size: 0.8125rem;
	color: var(--mvmsk-text);
	background: transparent;
	border: 1px solid var(--mvmsk-linka);
}

.edge-all-btn:hover {
	border-color: var(--mvmsk-akcent);
	color: var(--mvmsk-akcent);
}

.mvmsk-porez__form .submit-btn {
	padding: 0.9rem 1.8rem;
	color: var(--mvmsk-pozadie);
	background: var(--mvmsk-text);
	border: 1px solid var(--mvmsk-text);
	font-weight: 500;
}

.mvmsk-porez__form .submit-btn:hover:not(:disabled) {
	background: var(--mvmsk-akcent);
	border-color: var(--mvmsk-akcent);
}

.mvmsk-porez__form .submit-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.mvmsk-porez small {
	display: block;
	margin-top: 0.5rem;
	color: var(--mvmsk-tlmene);
	font-size: 0.8125rem;
	line-height: 1.5;
}

@media (max-width: 900px) {
	/* Na úzkych displejoch nemá zmysel vysúvať formulár zo šírky obsahu. */
	.mvmsk-porez {
		left: auto;
		width: 100%;
		transform: none;
	}
}

/* --- Mobil ---
 * Na telefóne sa šetrí každý pixel šírky: menej vnorených okrajov, väčšie
 * ciele pre prst a popisy scény, ktoré sa neprekrývajú.
 */
@media (max-width: 600px) {
	.mvmsk-porez__form {
		padding: 0.75rem;
	}

	.mvmsk-zakazka {
		padding: 0.6rem;
	}

	.mvmsk-porez__form label {
		font-size: 0.875rem;
	}

	.mvmsk-nahlad {
		--mvmsk-odsadenie-nahladu: 0.75rem;
	}

	.mvmsk-scena {
		min-height: 220px;
		padding: 3.4rem 0.5rem 3.6rem;
	}

	.mvmsk-nahlad__tip {
		font-size: 0.8125rem;
	}

	/* Myš na úzkom okne: tlačidlá priblíženia hore vpravo pod hrúbkou,
	 * dole sú kóta dĺžky a mierka.
	 */
	.mvmsk-scena__zoom {
		top: 2rem;
		bottom: auto;
	}

	/* Šírka a hrúbka sú v rohoch, nápis o ukážke ide pod ne. */
	.mvmsk-scena__ukazka {
		top: 2rem;
	}

	/* Mierka by sa na úzkej scéne prekryla s kótou dĺžky – ide pod ňu. */
	.mvmsk-scena__kota--dlzka {
		bottom: 1.7rem;
	}

	.mvmsk-scena__mierka {
		left: 50%;
		transform: translateX(-50%);
		white-space: nowrap;
	}

	/* Hrany dielca sú tiež tlačidlá, ale ich rozmer je rozmer steny 3D boxu –
	 * minimálna výška by z tenkej hrany urobila 44 px hlbokú dosku.
	 */
	.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce input:not([type="checkbox"]),
	.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce select,
	.mvmsk-porez__form .mvmsk-nahlad__hromadne select,
	.mvmsk-porez__form .mvmsk-zakazka button:not(.mvmsk-box__hrana):not(.mvmsk-scena__zoom-btn) {
		min-height: 2.75rem;
	}

	/* Checkbox dupla len o kúsok väčší – cieľom pre prst je celá bunka okolo. */
	.mvmsk-porez__form .mvmsk-dielec__dupla {
		min-height: 2.75rem;
	}

	.mvmsk-porez__form .mvmsk-zakazka .mvmsk-dielce input[type="checkbox"] {
		width: 1.4rem;
		height: 1.4rem;
	}

	.mvmsk-porez__form .mvmsk-dielec__akcie button {
		width: 2.75rem;
	}
}