/*
 * Konfigurator cut-to-size - styl karty produktu.
 *
 * Wszystko jest w przestrzeni nazw `.mdf-konf`, bez zadnego `!important`
 * i bez dotykania selektorow motywu. Motyw tego sklepu (online-store na bazie
 * MaxStore, Bootstrap 3) czysci floaty pseudoelementami `.row::before/::after` -
 * napisanie wlasnego `::after` na elemencie ukladu zwinelo by wiersz do zera.
 * Dlatego uklad stoi na gridzie w wlasnym kontenerze, a nie na siatce motywu.
 */

.mdf-konf {
	margin: 0 0 24px;
	padding: 0;
	font-size: 15px;
	line-height: 1.45;
}

.mdf-konf__krok {
	position: relative;
	padding: 14px 0 14px 38px;
	border-top: 1px solid #e6e6e6;
}

.mdf-konf__krok:first-of-type {
	border-top: 0;
}

.mdf-konf__numer {
	position: absolute;
	left: 0;
	top: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #1f2933;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.mdf-konf__krok h4 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.mdf-konf__pola {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	max-width: 420px;
}

.mdf-konf__pola label {
	display: block;
	margin: 0;
}

.mdf-konf__pola span {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: #52606d;
}

.mdf-konf input[type="number"] {
	width: 100%;
	max-width: 100%;
	padding: 9px 10px;
	border: 1px solid #cbd2d9;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
}

.mdf-konf input[type="number"]:focus {
	border-color: #1f2933;
	outline: 0;
}

.mdf-konf__sztuk {
	max-width: 120px;
}

.mdf-konf__podpowiedz {
	margin: 8px 0 0;
	font-size: 13px;
	color: #7b8794;
}

/* Podpowiedz pod polami wymiaru w chwili, gdy sama przyciela wpisana liczbe.
   Ciche skrocenie wartosci byloby gorsze od bledu - klient ma zobaczyc, ze
   cos sie stalo, i dlaczego. Po czterech sekundach wraca zwykla podpowiedz. */
.mdf-konf__podpowiedz--uwaga {
	color: #9b1c1c;
	font-weight: 600;
}

.mdf-konf__wybor {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mdf-konf__opcja {
	position: relative;
	margin: 0;
	cursor: pointer;
}

.mdf-konf__opcja input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mdf-konf__etykieta {
	display: block;
	min-width: 84px;
	padding: 8px 12px;
	border: 1px solid #cbd2d9;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
}

.mdf-konf__etykieta small {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: #7b8794;
}

.mdf-konf__opcja input:checked + .mdf-konf__etykieta {
	border-color: #1f2933;
	box-shadow: inset 0 0 0 1px #1f2933;
}

.mdf-konf__opcja input:focus-visible + .mdf-konf__etykieta {
	outline: 2px solid #1f2933;
	outline-offset: 2px;
}

.mdf-konf__opcja--niedostepna .mdf-konf__etykieta {
	opacity: 0.4;
	cursor: not-allowed;
	text-decoration: line-through;
}

/*
 * Dekory chodza po SIATCE, nie po flexie.
 *
 * Przy `flex-wrap` szerokosc kafelka brala sie z dlugosci nazwy, wiec kazdy rzad
 * konczyl sie w innym miejscu, a kolumny nie staly jedna pod druga. Grid daje
 * kolumny rownej szerokosci; `height: 100%` na etykiecie wyrownuje kafelek z nazwa
 * lamiaca sie do dwoch linii z sasiadem, ktory ma jedna.
 */
.mdf-konf__wybor--dekory {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 170px, 1fr ) );
	gap: 8px;
	align-items: stretch;
}

.mdf-konf__wybor--dekory .mdf-konf__opcja {
	display: block;
}

.mdf-konf__wybor--dekory .mdf-konf__etykieta {
	min-width: 0;
	height: 100%;
	text-align: left;
}

/* Trzy kierunki slojow to trzy rowne kafelki, nie trzy o roznej dlugosci nazwy. */
.mdf-konf__wybor--sloje {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 8px;
	max-width: 460px;
}

.mdf-konf__wybor--sloje .mdf-konf__opcja {
	display: block;
}

.mdf-konf__wybor--sloje .mdf-konf__etykieta {
	min-width: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mdf-konf__krawedzie {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.mdf-konf__krawedz {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 14px;
	cursor: pointer;
}

.mdf-konf__wynik {
	margin-top: 16px;
	padding: 14px 16px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: #f7f8f9;
}

.mdf-konf__stan {
	margin: 0;
	font-size: 14px;
	color: #52606d;
}

.mdf-konf__stan--brak {
	color: #9b1c1c;
	font-weight: 600;
}

.mdf-konf__rozbicie {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background: transparent;
}

.mdf-konf__rozbicie th,
.mdf-konf__rozbicie td {
	padding: 5px 0;
	border: 0;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	background: transparent;
}

.mdf-konf__rozbicie td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.mdf-konf__razem th,
.mdf-konf__razem td {
	padding-top: 9px;
	border-top: 1px solid #cbd2d9;
	font-size: 17px;
	font-weight: 700;
}

.mdf-konf__dodatki {
	margin: 10px 0 0;
	font-size: 13px;
	color: #7b8794;
}

.mdf-konf__dodatki span:not( :empty ) + span:not( :empty )::before {
	content: " \00b7 ";
}

.mdf-konf__ostrzezenia {
	margin: 10px 0 0;
	font-size: 13px;
	color: #8a5a00;
}

.mdf-konf--niegotowy p {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: #f7f8f9;
	font-size: 14px;
}

.single_add_to_cart_button.mdf-konf-zablokowany {
	opacity: 0.45;
	cursor: not-allowed;
}

@media ( max-width: 480px ) {
	.mdf-konf__pola {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* Stan przeliczania: poprzednia kwota zostaje na ekranie, przygaszona.
   Puste miejsce po cenie, ktora przed chwila byla, czyta sie jak awaria. */
.mdf-konf__rozbicie--przeliczam {
	opacity: 0.45;
	transition: opacity 0.15s;
}

.mdf-konf__znacznik {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: #7b8794;
}

/* ---------------------------------------------------------------------------
 * OBSZAR ROBOCZY - w lewej kolumnie karty, w miejscu galerii
 *
 * Zamysl: to nie jest podglad obok formularza, tylko PLYTA, na ktorej klient
 * zaznacza swoja formatke. Powierzchnia plyty to zdjecie produktu, zaznaczenie
 * to jasny prostokat na przyciemnionej reszcie arkusza - ten sam gest, co przy
 * kadrowaniu zdjecia, wiec nikomu nie trzeba go tlumaczyc.
 *
 * Blat wokol arkusza jest po to, zeby bylo widac, ze arkusz ma krawedzie i gdzie
 * sie konczy. Plyta dotykajaca krawedzi kontenera czyta sie jak tlo, nie jak plyta.
 *
 * Zero pseudoelementow na elementach ukladu motywu - MaxStore stoi na Bootstrapie 3,
 * gdzie `.row::after` jest clearfixem (pulapki.md paragraf 10).
 * ------------------------------------------------------------------------- */

.mdf-scena {
	/*
	 * OBSZAR ROBOCZY PRZEJMUJE KOLUMNE PO GALERII - i to nie jest kosmetyka.
	 *
	 * WooCommerce uklada karte produktu na dwoch floatach: galeria
	 * (`div.product div.images`) plywa w lewo na 48 %, `.summary` w prawo na 48 %.
	 * Zdjecie zdjelismy hookiem, wiec jesli to, co wchodzi na jego miejsce, nie ma
	 * floata i szerokosci, zajmuje cala szerokosc wiersza, a `.summary` laduje pod
	 * spodem. Dokladnie tak sie stalo w 0.1.3.
	 *
	 * Powtarzamy wiec pudelko, ktore mialo zdjecie. Klasy motywu zostaja nietkniete,
	 * `div.product` nie dostaje od nas zadnego `::after` - w tym motywie wiersz
	 * czyszcza dopiero zakladki (`.woocommerce-tabs { clear: both }`) i tak ma zostac
	 * (pulapki.md paragraf 10: nadpisanie clearfixa na elemencie ukladu zwija go do zera).
	 */
	float: left;
	width: 48%;
	margin: 0 0 2em;
}

@media ( max-width: 767px ) {
	.mdf-scena {
		float: none;
		width: 100%;
	}
}

/*
 * PLYTA ZOSTAJE NA EKRANIE, dopoki trwa formularz.
 *
 * Formularz jest dluzszy niz jeden ekran; przy wyborze dekoru albo krawedzi klient
 * nie widzial juz plyty, na ktora patrzy - a to jest ta polowa karty, ktora mowi mu,
 * co kupuje.
 *
 * Przypiete jest opakowanie WEWNETRZNE, nie `.mdf-scena`. `position: sticky` konczy
 * sie na dolnej krawedzi bloku, w ktorym element siedzi; blokiem `.mdf-scena` jest
 * `div.product`, a ono obejmuje takze zakladki z opisem - przypieta bezposrednio plyta
 * jechala przez cala sekcje opisu i na nia nachodzila (sprawdzone na zywej karcie).
 * `.mdf-scena` dostaje ze skryptu wysokosc rowna kolumnie z formularzem, wiec granica
 * wychodzi dokladnie tam, gdzie ma.
 *
 * Klasa `--przypinana` przychodzi ze skryptu, bo to on wie, czy plyta miesci sie
 * w oknie i czy formularz jest od niej dluzszy. Bez klasy uklad jest taki jak byl.
 */
.mdf-scena--przypinana .mdf-scena__przypiete {
	position: sticky;
	top: 16px;
}

.mdf-scena__blat {
	position: relative;
	padding: 26px;
	background: linear-gradient( 180deg, #fafbfc 0%, #eef1f4 100% );
	border: 1px solid #e2e6ea;
	border-radius: 6px;
}

.mdf-scena__arkusz {
	position: relative;
	width: 100%;
	background-color: #d9dee3;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 2px;
	overflow: hidden;

	/*
	 * Dwa cienie: pierwszy udaje grubosc plyty (jasna krawedz od dolu), drugi
	 * kladzie ja na blacie. Bez tego prostokat ze zdjeciem wyglada jak baner.
	 */
	box-shadow:
		0 3px 0 0 #c9ccd1,
		0 16px 28px -12px rgba( 16, 24, 40, 0.45 );
	transition: height 0.15s ease;
}

/* Zaznaczenie formatki. Przyciemnienie reszty arkusza robi jeden cien
   rozlany na caly kontener - `overflow: hidden` na arkuszu go przycina. */
.mdf-scena__formatka {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	box-shadow: 0 0 0 9999px rgba( 15, 23, 42, 0.22 );
	transition: width 0.15s ease, height 0.15s ease;
}

/*
 * LINIA CIECIA zamiast ciaglej obwodki, i lekkie przyciemnienie zamiast plamy.
 *
 * Poprzednia wersja klada na arkusz zaslone o kryciu 0,58. Na ciemnych dekorach
 * (U999 Black, U961 Graphite) z plyty zostawala czarna plama - klient nie widzial
 * koloru, ktory kupuje, a o to w tym podgladzie chodzi. Krycie schodzi do 0,22:
 * tyle wystarczy, zeby bylo widac, ktory kawalek jest jego, i za malo, zeby zabrac
 * kolor materialu.
 *
 * Granica formatki jest teraz kreska PRZERYWANA - tak znaczy sie ciecie na plycie
 * i nie trzeba tego nikomu tlumaczyc. Kreska jest biala z ciemna poswiata, bo musi
 * byc czytelna i na W1100 Alpine White, i na U999 Black; sam bialy ginie na bieli,
 * sam ciemny na czerni.
 *
 * Pseudoelement siedzi na NASZYM elemencie, nie na elemencie ukladu motywu
 * (pulapki.md paragraf 10: `.row::after` w Bootstrapie 3 jest clearfixem
 * i nadpisanie go zwija wiersz do zera).
 */
.mdf-scena__formatka::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 2px dashed #fff;
	filter: drop-shadow( 0 0 1px rgba( 0, 0, 0, 0.9 ) );
	pointer-events: none;
}

.mdf-scena__formatka--pusta {
	box-shadow: none;
}

.mdf-scena__formatka--pusta::before {
	display: none;
}

.mdf-scena__krawedz {
	position: absolute;
	background: #f0b429;
	opacity: 0;
	transition: opacity 0.15s;
	cursor: pointer;
}

.mdf-scena__krawedz--wlaczona {
	opacity: 1;
}

.mdf-scena__krawedz[data-krawedz="dluga_1"]  { top: 0; left: 0; right: 0; height: 5px; }
.mdf-scena__krawedz[data-krawedz="dluga_2"]  { bottom: 0; left: 0; right: 0; height: 5px; }
.mdf-scena__krawedz[data-krawedz="krotka_1"] { left: 0; top: 0; bottom: 0; width: 5px; }
.mdf-scena__krawedz[data-krawedz="krotka_2"] { right: 0; top: 0; bottom: 0; width: 5px; }

/*
 * Formatka narysowana w obrocie o 90 stopni w prawo (nie miesci sie na arkuszu
 * w ulozeniu wpisanym przez klienta). Paski ida za obrotem: gora -> prawo,
 * dol -> lewo, lewo -> gora, prawo -> dol. Zolty pasek ma pokazywac bok, ktory
 * naprawde zostanie oklejony, a nie ten, ktory akurat jest na gorze rysunku.
 */
.mdf-scena__formatka--obrocona .mdf-scena__krawedz[data-krawedz="dluga_1"]  { top: 0; bottom: 0; left: auto; right: 0; width: 5px; height: auto; }
.mdf-scena__formatka--obrocona .mdf-scena__krawedz[data-krawedz="dluga_2"]  { top: 0; bottom: 0; left: 0; right: auto; width: 5px; height: auto; }
.mdf-scena__formatka--obrocona .mdf-scena__krawedz[data-krawedz="krotka_1"] { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 5px; }
.mdf-scena__formatka--obrocona .mdf-scena__krawedz[data-krawedz="krotka_2"] { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 5px; }

/* ---------------------------------------------------------------------------
 * KIERUNEK SLOJOW
 *
 * Kreski udaja usloienie, strzalka mowi, w ktora strone ma biec. Jedno i drugie
 * rysuje sie WEWNATRZ formatki, bo wymaganie dotyczy kawalka klienta, a nie arkusza -
 * jak sloj biegnie na arkuszu, zalezy od dostawcy i tego w cenniku nie mamy.
 *
 * Kazda kreska jest para linii: jasna i ciemna, jedna nad druga. Sama jasna ginie
 * na W1100 Alpine White, sama ciemna na U999 Black - para widoczna jest na obu.
 * `overflow: hidden` trzyma rysunek w obrysie formatki, takze przy malych kawalkach.
 * ------------------------------------------------------------------------- */

.mdf-scena__sloje {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
	overflow: hidden;
	pointer-events: none;
}

.mdf-scena__formatka--sloje-x .mdf-scena__sloje,
.mdf-scena__formatka--sloje-y .mdf-scena__sloje {
	display: block;
}

.mdf-scena__formatka--sloje-x .mdf-scena__sloje {
	background-image: repeating-linear-gradient(
		to bottom,
		rgba( 255, 255, 255, 0.30 ) 0, rgba( 255, 255, 255, 0.30 ) 1px,
		rgba( 15, 23, 42, 0.16 ) 1px, rgba( 15, 23, 42, 0.16 ) 2px,
		transparent 2px, transparent 9px
	);
}

.mdf-scena__formatka--sloje-y .mdf-scena__sloje {
	background-image: repeating-linear-gradient(
		to right,
		rgba( 255, 255, 255, 0.30 ) 0, rgba( 255, 255, 255, 0.30 ) 1px,
		rgba( 15, 23, 42, 0.16 ) 1px, rgba( 15, 23, 42, 0.16 ) 2px,
		transparent 2px, transparent 9px
	);
}

/* Strzalka. Ta sama poswiata co przy linii ciecia, z tego samego powodu. */
.mdf-scena__strzalka {
	position: absolute;
	display: block;
	background: rgba( 255, 255, 255, 0.95 );
	filter: drop-shadow( 0 0 1px rgba( 0, 0, 0, 0.9 ) );
}

.mdf-scena__strzalka::before,
.mdf-scena__strzalka::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
}

/* Strzalka stoi POZA srodkiem celowo: w srodku formatki siedzi juz plakietka
   z wymiarem i strzalka przechodzaca przez nia czyta sie jak linia wymiarowa,
   a nie jak kierunek sloja. Sprawdzone na zywej karcie, oba ulozenia. */
.mdf-scena__formatka--sloje-x .mdf-scena__strzalka {
	left: 16%;
	right: 16%;
	top: 74%;
	height: 2px;
	margin-top: -1px;
}

.mdf-scena__formatka--sloje-x .mdf-scena__strzalka::before,
.mdf-scena__formatka--sloje-x .mdf-scena__strzalka::after {
	top: -4px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.mdf-scena__formatka--sloje-x .mdf-scena__strzalka::before {
	left: -7px;
	border-right: 7px solid rgba( 255, 255, 255, 0.95 );
}

.mdf-scena__formatka--sloje-x .mdf-scena__strzalka::after {
	right: -7px;
	border-left: 7px solid rgba( 255, 255, 255, 0.95 );
}

.mdf-scena__formatka--sloje-y .mdf-scena__strzalka {
	top: 16%;
	bottom: 16%;
	left: 74%;
	width: 2px;
	margin-left: -1px;
}

.mdf-scena__formatka--sloje-y .mdf-scena__strzalka::before,
.mdf-scena__formatka--sloje-y .mdf-scena__strzalka::after {
	left: -4px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
}

.mdf-scena__formatka--sloje-y .mdf-scena__strzalka::before {
	top: -7px;
	border-bottom: 7px solid rgba( 255, 255, 255, 0.95 );
}

.mdf-scena__formatka--sloje-y .mdf-scena__strzalka::after {
	bottom: -7px;
	border-top: 7px solid rgba( 255, 255, 255, 0.95 );
}

.mdf-scena__opis {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1f2933;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
}

.mdf-scena__opis--widoczny {
	opacity: 1;
}

.mdf-scena__format {
	position: absolute;
	right: 30px;
	bottom: 8px;
	font-size: 11px;
	color: #9aa5b1;
	pointer-events: none;
}

.mdf-scena__stopka {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	margin: 10px 0 0;
	font-size: 13px;
	color: #7b8794;
}

.mdf-scena__udzial {
	font-weight: 700;
	color: #1f2933;
}

.mdf-scena__podpowiedz {
	flex: 1 1 220px;
}

.mdf-scena__miniatury {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.mdf-scena__mini {
	width: 68px;
	height: 68px;
	padding: 0;
	border: 1px solid #cbd2d9;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

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

.mdf-scena__mini {
	display: block;
}

.mdf-scena__mini:hover {
	border-color: #1f2933;
}

/* ---------------------------------------------------------------------------
 * POWIERZCHNIA PLYTY BEZ PROBKI DEKORU (0.8.0)
 *
 * Plyta bez dekorow (Medite, Trade, MR, sklejka, OSB, forniry, biala melamina)
 * nie ma plaskiej probki, a zdjecie produktu to stos plyt pod katem - jako tlo
 * arkusza dawalo "plyte w plycie" (06.09). Zamiast zdjecia: SCHEMAT w kolorze
 * rodzaju materialu. Ma mowic "surowy MDF" / "OSB" / "sklejka", nie udawac
 * fotografii. Rodzaj przychodzi z PHP (`rodzaj_powierzchni()`) jako klasa.
 *
 * Probka dekoru (background-image w atrybucie style) przykrywa te gradienty,
 * bo `style` bije klase - na Perfect Sense i melaminach nic sie nie zmienia.
 * ------------------------------------------------------------------------- */

/* Surowy MDF: jednolity plowy braz z delikatnym ziarnem. */
.mdf-scena__arkusz--mdf {
	background-color: #c9a678;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 255, 255, 255, 0.06 ) 0 1px, transparent 1px 3px ),
		repeating-linear-gradient( 90deg, rgba( 0, 0, 0, 0.05 ) 0 1px, transparent 1px 4px ),
		linear-gradient( 135deg, #d2b084 0%, #c4a072 55%, #b8946a 100% );
}

/* Karta z kolorami bez probek: neutralna, zeby nie sugerowac koloru, ktorego nie znamy. */
.mdf-scena__arkusz--neutralny {
	background-color: #d9dee3;
	background-image: linear-gradient( 135deg, #e3e7eb 0%, #d4d9de 100% );
}

/* MR (wilgocioodporny) - zielonkawy, tak jak barwiona plyta. */
.mdf-scena__arkusz--mr {
	background-color: #a7b58f;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 255, 255, 255, 0.06 ) 0 1px, transparent 1px 3px ),
		linear-gradient( 135deg, #b3c09b 0%, #a3b18b 55%, #97a680 100% );
}

/* MDF barwiony w masie / Black Dyed. */
.mdf-scena__arkusz--czarny {
	background-color: #2f2f30;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 255, 255, 255, 0.05 ) 0 1px, transparent 1px 3px ),
		linear-gradient( 135deg, #3a3a3b 0%, #2c2c2d 60%, #232324 100% );
}

/* Biala melamina / panele gruntowane. */
.mdf-scena__arkusz--bialy,
.mdf-scena__arkusz--panel {
	background-color: #f1f1ee;
	background-image: linear-gradient( 135deg, #f7f7f4 0%, #ecece8 100% );
}

/* V-Groove: pionowe rowki co kawalek. */
.mdf-scena__arkusz--panel {
	background-image:
		repeating-linear-gradient( 90deg, rgba( 0, 0, 0, 0.14 ) 0 2px, transparent 2px 64px ),
		linear-gradient( 135deg, #f7f7f4 0%, #ecece8 100% );
}

/* Sklejka brzozowa: jasna, z rzadkimi sojami wzdluz dluzszego boku. */
.mdf-scena__arkusz--sklejka {
	background-color: #e5cfa4;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 120, 80, 30, 0.10 ) 0 2px, transparent 2px 9px, rgba( 120, 80, 30, 0.05 ) 9px 11px, transparent 11px 23px ),
		linear-gradient( 135deg, #ecd8b0 0%, #e2caa0 60%, #d9be92 100% );
}

/* OSB: platki - kilka nalozonych, skosnych, przezroczystych pasm. */
.mdf-scena__arkusz--osb {
	background-color: #d3b27e;
	background-image:
		repeating-linear-gradient( 37deg, rgba( 105, 70, 30, 0.18 ) 0 6px, transparent 6px 21px ),
		repeating-linear-gradient( -29deg, rgba( 255, 236, 200, 0.22 ) 0 4px, transparent 4px 17px ),
		repeating-linear-gradient( 71deg, rgba( 90, 60, 25, 0.12 ) 0 3px, transparent 3px 13px ),
		linear-gradient( 135deg, #dcbb88 0%, #cfae7a 60%, #c5a26e 100% );
}

/* Forniry: sloje wzdluz dluzszego boku (w podgladzie to os X). */
.mdf-scena__arkusz--fornir-dab {
	background-color: #d8bb8c;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 110, 75, 35, 0.16 ) 0 1px, transparent 1px 7px, rgba( 110, 75, 35, 0.08 ) 7px 9px, transparent 9px 19px ),
		linear-gradient( 135deg, #e0c497 0%, #d4b585 60%, #c9a877 100% );
}

.mdf-scena__arkusz--fornir-orzech {
	background-color: #7d5a3e;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 40, 22, 8, 0.22 ) 0 1px, transparent 1px 6px, rgba( 40, 22, 8, 0.10 ) 6px 8px, transparent 8px 17px ),
		linear-gradient( 135deg, #8a6647 0%, #7a5839 60%, #6b4b30 100% );
}

.mdf-scena__arkusz--fornir-ciemny {
	background-color: #3b3330;
	background-image:
		repeating-linear-gradient( 0deg, rgba( 255, 255, 255, 0.07 ) 0 1px, transparent 1px 6px, rgba( 255, 255, 255, 0.03 ) 6px 8px, transparent 8px 17px ),
		linear-gradient( 135deg, #453b37 0%, #37302c 60%, #2d2724 100% );
}

@media ( max-width: 767px ) {
	.mdf-scena__blat {
		padding: 16px;
	}

	.mdf-scena__format {
		right: 20px;
	}
}

/* Kafelek dekoru z probka. Probka jest kwadratem materialu, wiec ma byc widoczna,
   a nie zredukowana do ikonki - to po niej klient wybiera, nie po kodzie. */
.mdf-konf__opcja--z-probka .mdf-konf__etykieta {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	height: 100%;
	padding: 6px 10px 6px 6px;
	text-align: left;
}

.mdf-konf__probka {
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	border-radius: 3px;
	object-fit: cover;
	display: block;
	border: 1px solid rgba( 16, 24, 40, 0.12 );
}

.mdf-konf__nazwa-dekoru {
	display: block;
	line-height: 1.25;
}

/* -------------------------------------------------------------------------
 * ROWKI V-GROOVE (0.14.0)
 *
 * Dwa pola w jednym kroku: kierunek rowkow jako wybor (jak sloje) i rozstaw
 * jako lista. Rozstaw jest jedynym polem select na tej karcie - stad wlasna
 * regula zamiast dziedziczenia po motywie, ktory w MaxStore rozciaga selecty
 * na cala szerokosc i obok etykiety wyglada to jak pomylka.
 * ------------------------------------------------------------------------- */

.mdf-konf__wybor--rowek {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 130px, 1fr ) );
	gap: 8px;
	max-width: 460px;
}

.mdf-konf__wybor--rowek .mdf-konf__opcja {
	display: block;
}

.mdf-konf__wybor--rowek .mdf-konf__etykieta {
	min-width: 0;
}

.mdf-konf__rozstaw {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 10px 0 0;
	flex-wrap: wrap;
}

.mdf-konf__rozstaw-etykieta {
	font-size: 0.9em;
	color: #475467;
}

.mdf-konf__rozstaw select {
	width: auto;
	max-width: 220px;
	margin: 0;
	padding: 6px 10px;
	font-size: 0.95em;
	border: 1px solid #d0d5dd;
	border-radius: 4px;
	background: #fff;
}