/* ===== Popup tabeli rozmiarow: skora nasza, dane i markup z mu-plugins/mw-tabele-rozmiarow ===== */
/* Chrom okna (panel, naglowek, X) w tokeny.css. Arkusz modulu wylaczony w single-product.php, */
/* zeby nie nadpisywac go regula po regule (23.09; wczesniej 50 nadpisan w pdp.css). */
/* UWAGA: w module klasa mw-tr-tab nazywa i etykiete zakladki (label), i tabele (table). */

/* ---------- okno ---------- */
/* wymiary okna w rem: na 4K (pismo 150%) okno rosnie z tabela, w px tabela sie nie miescila */
.mw-pdp .mw-modal--tr .mw-modal__panel {
	max-inline-size: 42.5rem;
	block-size: auto;
	max-block-size: min(88svh, 47.5rem);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.mw-pdp .mw-modal--tr .mw-modal__head {
	align-items: center;
	padding: var(--mw-s3);
	margin-block-end: 0;
	border-block-end: 1px solid var(--mw-line);
}
.mw-pdp .mw-modal--tr .mw-modal__head .mw-h2 {
	font-weight: 500;
	line-height: var(--mw-lh-tight);
	margin-block-end: 0;
}
/* podpis modelu z modulu zbedny: nazwa stoi nad oknem na karcie (Tomek 23.09) */
.mw-pdp .mw-modal--tr .mw-modal__head small {
	display: none;
}
.mw-pdp .mw-modal--tr .mw-modal__x {
	block-size: auto;
	margin-block: calc(-1 * var(--mw-s2));
}
.mw-pdp .mw-modal--tr .mw-tr-body {
	flex: 1 1 auto;
	min-block-size: 0;
	padding-block: 0 var(--mw-s4);
	overflow-y: auto;
}
.mw-pdp .mw-modal--tr .mw-tr-radio {
	position: absolute;
	inline-size: 0;
	block-size: 0;
	opacity: 0;
	pointer-events: none;
}
/* bez zakladek (dobieracz wylaczony) radio nic nie przelacza: bez niewidocznego przystanku Tab */
.mw-pdp .mw-modal--tr .mw-modal__panel:not(:has(.mw-tr-tabs)) .mw-tr-radio {
	display: none;
}

/* ---------- uklad tresci: tabela pelna szerokosc, pod nia rysunek i teksty ---------- */
.mw-pdp .mw-modal--tr .mw-tr-pane {
	display: none;
}
.mw-pdp .mw-modal--tr .mw-tr-radio:nth-of-type(1):checked ~ .mw-tr-body .mw-tr-pane1,
.mw-pdp .mw-modal--tr .mw-tr-radio:nth-of-type(2):checked ~ .mw-tr-body .mw-tr-pane2,
.mw-pdp .mw-modal--tr .mw-tr-body > .mw-tr-pane1:only-of-type {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: min-content;
	align-items: start;
	align-content: start;
	column-gap: var(--mw-s3);
}
.mw-pdp .mw-modal--tr .mw-tr-table-wrap {
	grid-column: 1 / -1;
	grid-row: 1;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior: none;
}
/* cien z prawej: tabela ma dalszy ciag (pdp.js has-more), znika na koncu */
.mw-pdp .mw-modal--tr .mw-tr-pane1::after {
	content: "";
	grid-row: 1;
	grid-column: 1 / -1;
	justify-self: end;
	align-self: stretch;
	inline-size: var(--mw-s3);
	pointer-events: none;
	background: linear-gradient(to left, color-mix(in srgb, var(--mw-ink) 7%, transparent), transparent);
	opacity: 0;
	transition: opacity .2s var(--mw-ease);
}
.mw-pdp .mw-modal--tr .mw-tr-pane1.has-more::after {
	opacity: 1;
}
.mw-pdp .mw-modal--tr .mw-tr-figure {
	grid-column: 1;
	grid-row: 2 / span 2;
	align-self: stretch;
	margin: var(--mw-s5) 0 0;
}
.mw-pdp .mw-modal--tr .mw-tr-figure img {
	inline-size: 100%;
}
.mw-pdp .mw-modal--tr .mw-tr-notes,
.mw-pdp .mw-modal--tr .mw-pdp__fit-note {
	grid-column: 2;
	padding-inline: 0 var(--mw-s3);
	font-size: var(--mw-fs-base);
}
.mw-pdp .mw-modal--tr .mw-tr-notes {
	margin-block-start: var(--mw-s5);
	color: var(--mw-ink-3);
}
.mw-pdp .mw-modal--tr .mw-tr-notes span {
	display: block;
}
/* porady do modelu z modulu: schowane do ostylowania (zadanie 183) */
.mw-pdp .mw-modal--tr :is(.mw-tr-instructions, .mw-tr-example) {
	display: none;
}
/* bez dolnego marginesu: tresc konczy sie na tekscie, pod nim tylko padding okna */
.mw-pdp .mw-modal--tr .mw-pdp__fit-note {
	margin-block: var(--mw-s3) 0;
}

/* ---------- tabela ---------- */
/* separate: przy collapse ramki naleza do tabeli i przyklejona kolumna traci swoja kreske */
.mw-pdp table.mw-tr-tab {
	inline-size: 100%;
	min-inline-size: 0;
	padding: 0;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--mw-fs-sm);
}
.mw-pdp table.mw-tr-tab :is(th, td) {
	padding: var(--mw-s2);
	text-align: center;
	border-block-end: 1px solid var(--mw-line);
}
.mw-pdp table.mw-tr-tab thead th {
	background: var(--mw-black);
	color: var(--mw-ecru);
	font-weight: 500;
	border-block-end: 0;
}
.mw-pdp table.mw-tr-tab tbody th {
	font-weight: 500;
	color: var(--mw-ink);
	text-align: start;
	white-space: nowrap;
}
.mw-pdp table.mw-tr-tab tbody tr:nth-child(even) :is(th, td) {
	background: var(--mw-surface-2);
}
/* kolumna etykiet stoi przy krawedzi, przewijaja sie tylko rozmiary */
.mw-pdp table.mw-tr-tab :is(th, td):first-child {
	position: sticky;
	inset-inline-start: 0;
	z-index: 1;
	background: var(--mw-paper);
	border-inline-end: 1px solid var(--mw-line);
}
.mw-pdp table.mw-tr-tab thead th:first-child {
	background: var(--mw-black);
	text-align: start;
}
/* litera przed etykieta (Tomek 23.09) */
.mw-pdp .mw-tr-letter {
	margin-inline-end: var(--mw-s1);
	font-weight: 700; /* wyroznienie litery zostaje (Tomek 15.10); 600 i tak renderowal 700 */
	color: var(--mw-ink);
}

/* ---------- zakladka 2 (size-finder, domyslnie wylaczona) ---------- */
.mw-pdp .mw-modal--tr .mw-tr-tabs {
	display: flex;
	padding-inline: var(--mw-s3);
	border-block-end: 1px solid var(--mw-line);
}
.mw-pdp label.mw-tr-tab {
	font-family: var(--mw-serif);
	font-weight: 300;
	font-size: var(--mw-fs-md);
	line-height: var(--mw-lh-snug);
	min-block-size: var(--mw-control-h);
	padding-block: var(--mw-s2);
	margin-inline-end: var(--mw-s4);
	color: var(--mw-ink-3);
	border-block-end: 1px solid transparent;
	cursor: pointer;
}
.mw-pdp .mw-tr-radio:nth-of-type(1):checked ~ .mw-tr-tabs label.mw-tr-tab:nth-child(1),
.mw-pdp .mw-tr-radio:nth-of-type(2):checked ~ .mw-tr-tabs label.mw-tr-tab:nth-child(2) {
	color: var(--mw-ink);
	border-block-end-color: var(--mw-ink);
}
.mw-pdp .mw-tr-radio:focus-visible ~ .mw-tr-tabs label.mw-tr-tab {
	outline: 2px solid var(--mw-ink);
	outline-offset: var(--mw-s1);
}
/* jak mierzyc, kroki, pusto, notka szukajki: utility notka 16 (tokeny.css) */
.mw-pdp .mw-modal--tr .mw-tr-steps {
	display: grid;
	gap: var(--mw-s2);
	margin-block: var(--mw-s3);
}
.mw-pdp .mw-modal--tr .mw-tr-steps li {
	display: flex;
	gap: var(--mw-s2);
}
.mw-pdp .mw-modal--tr .mw-tr-n {
	flex: 0 0 auto;
	inline-size: var(--mw-s4);
	block-size: var(--mw-s4);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--mw-black);
	color: var(--mw-ecru);
	font-size: var(--mw-fs-xs);
}
.mw-pdp .mw-modal--tr .mw-tr-finder-note {
	margin-block-start: var(--mw-s3);
	padding: var(--mw-s2) var(--mw-s3);
	border-inline-start: 2px solid var(--mw-taupe);
	background: var(--mw-surface-2);
}

/* ---------- telefon: tresc od krawedzi ---------- */
@media (width < 900px) { /* bp:desktop */
	.mw-pdp .mw-modal--tr .mw-modal__panel {
		max-block-size: calc(100svh - 2 * var(--mw-s3));
	}
	.mw-pdp .mw-modal--tr .mw-tr-body {
		scrollbar-width: none;
	}
	.mw-pdp .mw-modal--tr .mw-tr-body::-webkit-scrollbar {
		inline-size: 0;
	}
	/* rysunek w wysokosci pliku, nic nie dokladamy (Tomek 23.09) */
	.mw-pdp .mw-modal--tr .mw-tr-figure {
		align-self: start;
	}
}

/* ---------- desktop: rysunek 4:5 w prawej kolumnie na cala jej szerokosc (Tomek 24.09) ---------- */
@media (width >= 900px) { /* bp:desktop */
	/* 24 od lewej ramki; z prawej tylko naglowek (X), rysunek do krawedzi (Tomek 23.09) */
	/* 840: tabela ok. 30% wezsza niz przy 1040 (Tomek 23.09) */
	.mw-pdp .mw-modal--tr .mw-modal__panel {
		max-inline-size: 52.5rem;
		padding-inline: var(--mw-s4) 0;
	}
	.mw-pdp .mw-modal--tr .mw-modal__head {
		padding-inline: 0 var(--mw-s4);
		padding-block-start: var(--mw-s4);
		border-block-end: 0;
	}
	/* stale proporcje kolumn: szerokosc rysunku z wysokosci tekstow zapetlala uklad (rysunek wystawal) */
	/* 5 wierszy tekstu modulu + 1fr: nadmiar wysokosci rysunku idzie tam, nie w odstepy miedzy tekstami */
	.mw-pdp .mw-modal--tr .mw-tr-radio:nth-of-type(1):checked ~ .mw-tr-body .mw-tr-pane1,
	.mw-pdp .mw-modal--tr .mw-tr-body > .mw-tr-pane1:only-of-type {
		grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
		grid-template-rows: repeat(5, min-content) 1fr;
		column-gap: 0;
	}
	.mw-pdp table.mw-tr-tab {
		border-inline: 1px solid var(--mw-line);
	}
	/* 1% + nowrap: kolumna etykiet na szerokosc najdluzszej + 16 z bokow, reszta idzie do rozmiarow */
	.mw-pdp table.mw-tr-tab :is(th, td):first-child {
		inline-size: 1%;
		white-space: nowrap;
		padding-inline: var(--mw-s3);
	}
	.mw-pdp .mw-modal--tr .mw-tr-table-wrap,
	.mw-pdp .mw-modal--tr .mw-tr-pane1::after {
		grid-column: 1;
	}
	/* bez dolnego marginesu rysunek konczy sie z uwaga */
	.mw-pdp .mw-modal--tr .mw-tr-notes,
	.mw-pdp .mw-modal--tr .mw-pdp__fit-note {
		grid-column: 1;
		padding-inline: 0;
		margin-block-end: 0;
	}
	.mw-pdp .mw-modal--tr .mw-tr-notes {
		margin-block-start: var(--mw-s3);
	}
	/* rysunek na cala wysokosc kolumny, min. 4:5; wyzsza tresc: skala w gore, boki plotna uciete */
	.mw-pdp .mw-modal--tr .mw-tr-figure {
		grid-column: 2;
		grid-row: 1 / -1;
		margin: 0;
	}
	.mw-pdp .mw-modal--tr .mw-tr-figure img {
		aspect-ratio: 4 / 5;
		min-block-size: 100%;
		object-fit: cover;
	}
}

/* ---------- szerokie ekrany: wiecej miejsca na tabele ---------- */
@media (width >= 1800px) { /* bp:wide */
	.mw-pdp .mw-modal--tr .mw-modal__panel {
		max-inline-size: 60rem;
	}
}