/* ═══════════════════════════════════════════════════════════
   DON MTM — Szycie na miarę (v4.0.0)
   Konfigurator PDP (dodatki + kalendarz) + /wymiary/ (sylwetki)
   ═══════════════════════════════════════════════════════════ */

/* ── Wspólne ── */
.don-mtm { margin: 20px 0 8px; }

.don-mtm__steps {
	display: flex; gap: 6px; margin: 0 0 18px; flex-wrap: wrap;
}
.don-mtm__steps span {
	font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
	padding: 6px 12px; border: 1px solid #E6DAC8; color: #6f6a5e; background: #FBF8F4; /* v4.2.2 — #8A877F 3.4:1 fail AA */
}
.don-mtm__steps span.is-current { border-color: #B8912F; color: #6F5641; font-weight: 600; background: #F5F0E6; }
.don-mtm__steps span.is-done { color: #1E7B34; border-color: #BBD9C2; background: #F1F7F2; }

.don-mtm__label {
	display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em;
	text-transform: uppercase; color: #0F0E0C; margin: 0 0 8px;
}
.don-mtm__label small { text-transform: none; letter-spacing: 0; color: #6f6a5e; font-weight: 400; }

/* ── Dodatki ── */
.don-mtm__extras { border: 0; padding: 0; margin: 0 0 22px; }
.don-mtm__extras legend { padding: 0; }
.don-mtm__extra {
	display: flex; align-items: center; gap: 10px; padding: 11px 14px;
	border: 1px solid #E6DAC8; margin: 0 0 8px; cursor: pointer;
	transition: border-color 150ms ease, background 150ms ease;
}
.don-mtm__extra:hover { border-color: #B8912F; }
/* v4.1.2 — inputy checkboxów ukryte wzorcem clip (bez dryfowania absolute
   poza label — wcześniej input zgody lądował 130px niżej nad błędem). */
.don-mtm__extra input,
.don-mtm-wymiary__consent input {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	pointer-events: none;
}
.don-mtm__extra-box {
	width: 18px; height: 18px; border: 1.5px solid #A98E6B; flex: 0 0 18px;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background 150ms ease; position: relative;
}
.don-mtm__extra input:checked + .don-mtm__extra-box { background: #6F5641; border-color: #6F5641; }
.don-mtm__extra input:checked + .don-mtm__extra-box::after {
	content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.don-mtm__extra input:focus-visible + .don-mtm__extra-box { outline: 2px solid #B8912F; outline-offset: 2px; }
.don-mtm__extra input:checked ~ .don-mtm__extra-name { font-weight: 600; }
.don-mtm__extra-name { flex: 1; font-size: 14.5px; color: #2A2723; }
.don-mtm__extra-price { font-size: 14px; font-weight: 600; color: #6F5641; white-space: nowrap; }

/* ── Kalendarz ── */
.don-mtm__calendar-wrap { margin: 0 0 20px; }
.don-mtm__cal-hint { font-size: 13.5px; color: #6C6A64; margin: 0 0 12px; line-height: 1.55; }
/* v4.1.5 — z-index 95 > floating phone (90): na mobile słuchawka (bottom-right, fixed)
   zasłaniała strzałkę „następny miesiąc" i daty w prawej kolumnie → klientka nie mogła
   wybrać terminu. position:relative tworzy kontekst i podnosi cały kalendarz nad słuchawkę. */
.don-mtm__calendar { border: 1px solid rgba(111, 86, 65, 0.55); background: #FFFDFA; padding: 14px; position: relative; z-index: 95; }
.don-mtm-cal__head {
	display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px;
	font-size: 15px; color: #0F0E0C;
}
.don-mtm-cal__nav {
	width: 40px; height: 40px; border: 1px solid rgba(111, 86, 65, 0.6); background: #fff;
	font-size: 20px; line-height: 1; cursor: pointer; color: #6F5641;
	transition: border-color 150ms ease;
}
.don-mtm-cal__nav:hover:not(:disabled) { border-color: #B8912F; }
.don-mtm-cal__nav:disabled { opacity: .35; cursor: default; }
.don-mtm-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.don-mtm-cal__dow {
	text-align: center; font-size: 11px; letter-spacing: .08em; color: #6f6a5e;
	text-transform: uppercase; padding: 4px 0 6px;
}
.don-mtm-cal__day {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 1px; min-height: 48px; padding: 4px 2px; border: 1px solid transparent;
	background: transparent; cursor: pointer; font: inherit;
	transition: border-color 120ms ease, background 120ms ease;
}
/* v4.19.4 — dzien i kwota doplaty stykaly sie w 0,8 px (`odstepy.py`:
   „SKLEJONE”). Dwie linie o roznej wielkosci bez szpary czytaja sie
   jak jeden postrzepiony napis, a w kalendarzu chodzi o kwote. */
.don-mtm-cal__day b { font-size: 14px; font-weight: 500; color: #2A2723; margin-bottom: 4px; }
.don-mtm-cal__day small { font-size: 10px; color: #6F5641; line-height: 1.1; white-space: nowrap; } /* v4.2.2 — #A98E6B 3.1:1 fail (kwoty dopłat muszą być czytelne) */
.don-mtm-cal__day.is-free small { color: #1E7B34; }
.don-mtm-cal__day:hover { border-color: #B8912F; background: #FBF6EC; }
.don-mtm-cal__day.is-selected { background: #6F5641; border-color: #6F5641; }
.don-mtm-cal__day.is-selected b,
.don-mtm-cal__day.is-selected small { color: #fff; }
.don-mtm-cal__day.is-off { cursor: default; opacity: .32; }
.don-mtm-cal__day.is-off b { text-decoration: line-through; }
.don-mtm-cal__legend {
	display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 2px 0;
	font-size: 12px; color: #6C6A64;
}
.don-mtm-cal__legend i {
	display: inline-block; width: 10px; height: 10px; margin-right: 5px;
	border: 1px solid #C7B393; vertical-align: -1px;
}
.don-mtm-cal__legend i.is-free { background: #E7F3EA; border-color: #1E7B34; }
.don-mtm-cal__legend i.is-paid { background: #F5F0E6; border-color: #B8912F; }
.don-mtm-cal__legend i.is-off { background: #EEE; opacity: .6; }
.don-mtm__cal-error { color: #A4262C; font-size: 13.5px; margin: 10px 0 0; font-weight: 600; }

/* ── Podsumowanie ── */
.don-mtm__summary { border: 1px solid rgba(111, 86, 65, 0.55); background: #FBF8F4; padding: 14px 16px; margin: 0 0 18px; }
.don-mtm__summary-row {
	display: flex; justify-content: space-between; font-size: 14px; color: #3D3B37;
	padding: 3px 0;
}
.don-mtm__summary-row--total {
	border-top: 1px solid #E6DAC8; margin-top: 8px; padding-top: 10px;
	font-size: 16px; color: #0F0E0C;
}
.don-mtm__summary-date { margin: 8px 0 0; font-size: 13px; color: #6F5641; }

/* ── Nota prawna ── */
.don-mtm__legal {
	display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.6;
	color: #6C6A64; padding: 12px 14px; background: #F5F2EE; border-left: 3px solid #A98E6B;
	margin: 0 0 18px;
}
.don-mtm__legal svg { flex: 0 0 16px; margin-top: 2px; color: #6F5641; }
.don-mtm__legal a { color: #6F5641; font-weight: 600; }

/* ── CTA "Szycie na miarę" na PDP bez listy rozmiarów ── */
.don-mtm-cta {
	display: flex; align-items: center; gap: 14px; margin: 14px 0 4px;
	padding: 14px 16px; border: 1px solid #C7B393; background: #FBF8F4;
	text-decoration: none; color: inherit;
	transition: border-color 150ms ease, background 150ms ease;
}
.don-mtm-cta:hover { border-color: #B8912F; background: #F5F0E6; }
.don-mtm-cta__icon { color: #6F5641; flex: 0 0 20px; }
.don-mtm-cta__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.don-mtm-cta__text strong { font-size: 14px; letter-spacing: .04em; color: #0F0E0C; }
.don-mtm-cta__text span { font-size: 12.5px; color: #6C6A64; }
.don-mtm-cta__arrow { color: #B8912F; transition: transform 150ms ease; }
.don-mtm-cta:hover .don-mtm-cta__arrow { transform: translateX(3px); }

/* ── Opcja "Szycie na miarę" na liście rozmiarów ── */
.don-pdp-info__size-option--mtm {
	border-top: 1px dashed #C7B393; background: #FBF8F4;
}
.don-pdp-info__size-option--mtm .don-pdp-info__size-value { color: #6F5641; font-weight: 600; }
.don-pdp-info__size-option--mtm .don-pdp-info__size-stock { color: #B8912F; }

/* ═══════════════ /wymiary/ ═══════════════ */
.don-mtm-wymiary { padding-block: clamp(2.5rem, 5vw, 4rem); }
.don-mtm-wymiary__empty { text-align: left; padding: 40px 0 60px; }
.don-mtm-wymiary__empty h1 { margin: 0 0 12px; }
.don-mtm-wymiary__empty p { margin: 0 0 20px; color: #6C6A64; }

.don-mtm-wymiary__head { margin: 0 0 28px; }
.don-mtm-wymiary__head h1 { margin: 6px 0 8px; }
.don-mtm-wymiary__sub { font-size: 15px; color: #3D3B37; margin: 0 0 10px; }
.don-mtm-wymiary__hint { font-size: 14px; color: #6C6A64; line-height: 1.65; margin: 0; }

.don-mtm-wymiary__section {
	display: grid; grid-template-columns: minmax(220px, 320px) 1fr;
	gap: clamp(1.25rem, 4vw, 3rem); align-items: start;
	padding: clamp(1.25rem, 3vw, 2rem) 0; border-top: 1px solid #EDE6DA;
}
.don-mtm-wymiary__section--rest { grid-template-columns: 1fr; }

.don-mtm-wymiary__figure {
	margin: 0; position: sticky; top: 90px;
	background: linear-gradient(180deg, #FFFDF9, #F6F0E7);
	border: 1px solid #EDE6DA; border-radius: 14px; padding: 16px 14px 10px;
	box-shadow: 0 14px 34px -20px rgba(111, 86, 65, .42);
}
.don-mtm-wymiary__figure figcaption {
	text-align: center; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
	color: #6C6A64; margin-top: 6px;
}
.don-mtm-svg { width: 100%; height: auto; max-height: 74vh; display: block; }
/* v4.1.7 — figura = licencjonowany szablon mody (recolor pod markę); linie wymiarów
   jako nakładka SVG, UKRYTE domyślnie, złoty glow dopiero na focus pola. */
.don-mtm-figbox { position: relative; display: flex; justify-content: center; }
/* v4.26.0 — `object-fit: contain` to nie ozdoba, tylko naprawa.
   Zmierzone na żywej stronie: obrazek sylwetki miał 311×1300 px, a wyświetlał się
   jako 274×532, czyli proporcję 0,515 zamiast 0,239 — modelka była rozciągnięta
   wszerz ponad DWUKROTNIE. Przyczyna: obrazek jest elementem siatki
   elastycznej, więc jego rozmiar bazowy to szerokość WŁASNA pliku (311),
   a nie ta wyliczona z podanej wysokości; kolumna ma 274 px, więc `flex-shrink`
   ścisnął pudełko do 274 i domyślny `object-fit: fill` rozciągnął w nim rysunek.
   `contain` trzyma proporcję i ustawia rysunek w środku pudełka — dokładnie tam,
   gdzie leży nakładka z liniami wymiarów. */
.don-mtm-figimg { display: block; height: min(56vh, 540px); width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; transition: opacity 240ms ease; }
/* v4.26.0 — nakładka linii kryje się z obrazem CO DO PIKSELA, bo siedzi w tym
   samym pudełku i ma `inset: 0`. Poprzednia wersja powtarzała regułę wysokości
   obrazu (`min(56vh, 540px)`), więc przy każdym zapytaniu medialnym, które
   zmieniało rozmiar figury, linie rozjeżdżały się z rysunkiem: zmierzone przy
   390 px — rysunek 69×287 px, nakładka 113×473 px. `xMidYMid meet` daje w SVG
   dokładnie to samo dopasowanie, co `object-fit: contain` w obrazie. */
.don-mtm-figlines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.don-mtm-figbox.has-active .don-mtm-figimg { opacity: .4; }
.don-mtm-svg .don-mtm-body { transition: opacity 240ms ease; }
.don-mtm-svg.has-active .don-mtm-body { opacity: .38; }
.don-mtm-line { color: #B8912F; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity 240ms ease; }
.don-mtm-line ellipse { fill: none; stroke: currentColor; stroke-width: 2.2; }
.don-mtm-line circle { fill: currentColor; stroke: none; }
.don-mtm-line.is-active { opacity: 1; filter: drop-shadow(0 0 5px rgba(184, 145, 47, .5)); }

/* v4.26.0 — pas obwodu to prostokąt z wypełnieniem: ma się czytać jak taśma
   miernicza owinięta wokół ciała, a nie jak kreska. Sama kreska ginęła na
   rysunku, który i tak składa się z kresek. */
.don-mtm-line rect { fill: rgba(184, 145, 47, .30); stroke: currentColor; stroke-width: 2; }
.don-mtm-line polyline { fill: none; stroke: currentColor; stroke-width: 4; stroke-linejoin: round; }
.don-mtm-line line { stroke: currentColor; stroke-width: 2; }
.don-mtm-line--dl circle { fill: currentColor; }

/* Nakladka nie moze przechwytywac klikniec ani byc czytana jako tresc. */
.don-mtm-figlines { pointer-events: none; }

.don-mtm-wymiary__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; align-content: start; }
.don-mtm-wymiary__fields--wide { grid-template-columns: repeat(3, 1fr); }
.don-mtm-wymiary__field { margin: 0; }
.don-mtm-wymiary__field label {
	display: block; font-size: 13.5px; color: #3D3B37; margin: 0 0 5px; line-height: 1.4;
}
.don-mtm-wymiary__field .req { color: #A4262C; }
.don-mtm-wymiary__opt { color: #6C6A64; font-size: 11.5px; font-weight: 400; }
.don-mtm-wymiary__hint { display: block; font-size: 11.5px; color: #6C6A64; font-style: italic; line-height: 1.4; margin-top: 2px; }
.don-mtm-wymiary__field.is-optional label { color: #6C6A64; }
.don-mtm-wymiary__input-wrap { position: relative; display: block; }
.don-mtm-wymiary__input-wrap input {
	width: 100%; padding: 11px 44px 11px 13px; border: 1px solid #D8CCB9; background: #fff;
	font: inherit; font-size: 15px; color: #0F0E0C;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.don-mtm-wymiary__input-wrap input:focus {
	outline: none; border-color: #B8912F; box-shadow: 0 0 0 3px rgba(184, 145, 47, .14);
}
.don-mtm-wymiary__input-wrap > span {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	font-size: 12.5px; color: #6C6A64; pointer-events: none;
}
.don-mtm-wymiary__field--textarea { grid-column: 1 / -1; }
.don-mtm-wymiary__field--textarea textarea {
	width: 100%; padding: 11px 13px; border: 1px solid #D8CCB9; background: #fff;
	font: inherit; font-size: 14.5px; resize: vertical;
}
.don-mtm-wymiary__field--textarea textarea:focus {
	outline: none; border-color: #B8912F; box-shadow: 0 0 0 3px rgba(184, 145, 47, .14);
}

.don-mtm-wymiary__consent {
	margin: 24px 0 0; padding: 16px; background: #F5F2EE; border-left: 3px solid #A98E6B;
}
.don-mtm-wymiary__consent label {
	display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
	font-size: 13.5px; line-height: 1.6; color: #3D3B37;
}
.don-mtm-wymiary__consent .don-mtm__extra-box { margin-top: 2px; background: #fff; flex: 0 0 18px; }
/* stan zaznaczenia (selektor .don-mtm__extra z dodatków tu nie łapie — consent ma inną strukturę) */
.don-mtm-wymiary__consent input:checked + .don-mtm__extra-box { background: #6F5641; border-color: #6F5641; }
.don-mtm-wymiary__consent input:checked + .don-mtm__extra-box::after {
	content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}
.don-mtm-wymiary__consent input:focus-visible + .don-mtm__extra-box { outline: 2px solid #B8912F; outline-offset: 2px; }
.don-mtm-wymiary__consent a { color: #6F5641; font-weight: 600; }

.don-mtm-wymiary__error {
	margin: 16px 0 0; padding: 12px 16px; background: #FBEAEA; border-left: 3px solid #A4262C;
	color: #7C1D22; font-size: 13.5px; line-height: 1.6;
}
.don-mtm-wymiary__actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 22px 0 0; }
.don-mtm-wymiary__later { font-size: 13.5px; color: #6C6A64; text-decoration: underline; }
.don-mtm-wymiary__later:hover { color: #6F5641; }

@media (max-width: 860px) {
	.don-mtm-wymiary__section { grid-template-columns: 1fr; }
	.don-mtm-wymiary__figure { position: static; max-width: 260px; margin: 0 auto; }
	.don-mtm-svg { max-height: 46vh; }
	.don-mtm-wymiary__fields,
	.don-mtm-wymiary__fields--wide { grid-template-columns: 1fr; }
	.don-mtm-cal__day { min-height: 44px; }
	.don-mtm-cal__day small { font-size: 9px; }
}
/* ═══════════════ MODAL-KREATOR WYMIARÓW (v4.1.0) ═══════════════ */
body.don-mtm-modal-open { overflow: hidden; }

/* v4.1.2 — KRYTYCZNE: gdy modal zamknięty (hidden), MUSI być display:none.
   Inaczej `.don-mtm-modal{display:flex}` przebija atrybut [hidden] i niewidzialna
   nakładka fixed/z-10000 przechwytuje WSZYSTKIE kliknięcia na karcie produktu
   (kalendarz, przyciski, checkboxy — „wiele przycisków nie działa"). */
.don-mtm-modal[hidden] { display: none !important; }

.don-mtm-modal {
	position: fixed; inset: 0; z-index: 10000;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(0px, 3vw, 32px);
}
.don-mtm-modal__backdrop {
	position: absolute; inset: 0; background: rgba(15, 14, 12, .55);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	opacity: 0; transition: opacity 180ms ease;
}
.don-mtm-modal.is-open .don-mtm-modal__backdrop { opacity: 1; }
.don-mtm-modal__panel {
	position: relative; width: min(1060px, 100%); max-height: 92vh;
	background: #FFFDFA; display: flex; flex-direction: column;
	border-top: 3px solid #B8912F;
	box-shadow: 0 30px 80px -20px rgba(15, 14, 12, .45);
	transform: translateY(14px); opacity: 0;
	transition: transform 220ms cubic-bezier(.25, 1, .5, 1), opacity 180ms ease;
}
.don-mtm-modal.is-open .don-mtm-modal__panel { transform: translateY(0); opacity: 1; }

.don-mtm-modal__head {
	padding: 20px 60px 14px 28px; border-bottom: 1px solid #EDE6DA; position: relative;
}
/* v4.27.2 - #B8912F na bieli = 2,95:1 przy pismie 11 px. */
.don-mtm-modal__brand {
	margin: 0 0 2px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
	color: #7A5F1F; font-weight: 600;
}
.don-mtm-modal__title {
	margin: 0 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.75rem); color: #0F0E0C;
}
.don-mtm-modal__steps {
	display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap;
	counter-reset: mtmstep;
}
.don-mtm-modal__steps li {
	counter-increment: mtmstep;
	font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
	padding: 5px 12px 5px 8px; color: #6C6A64; border-bottom: 2px solid transparent;
	display: inline-flex; align-items: center; gap: 6px;
}
.don-mtm-modal__steps li::before {
	content: counter(mtmstep);
	width: 18px; height: 18px; border: 1px solid #C7B393; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 10px; color: #6C6A64;
}
.don-mtm-modal__steps li.is-current { color: #6F5641; font-weight: 600; border-bottom-color: #B8912F; }
.don-mtm-modal__steps li.is-current::before { background: #6F5641; border-color: #6F5641; color: #fff; }
.don-mtm-modal__steps li.is-done { color: #1E7B34; }
.don-mtm-modal__steps li.is-done::before { content: '✓'; background: #F1F7F2; border-color: #BBD9C2; color: #1E7B34; }
.don-mtm-modal__x {
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
	border: 1px solid #E6DAC8; background: #fff; cursor: pointer;
	font-size: 16px; color: #6C6A64; transition: border-color 150ms ease, color 150ms ease;
}
.don-mtm-modal__x:hover { border-color: #B8912F; color: #0F0E0C; }

/* scrollbar-gutter: miejsce na pasek przewijania rezerwujemy zawsze. Bez tego krótkie
   kroki (miska, podsumowanie) są o 15 px szersze od długich i treść skacze przy „Dalej”. */
.don-mtm-modal__body { flex: 1; overflow-y: auto; scrollbar-gutter: stable; padding: 20px 28px; }
.don-mtm-modal__step { display: none; }
.don-mtm-modal__step.is-active {
	display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
	gap: clamp(1.25rem, 4vw, 3rem); align-items: start;
}
/* Kroki bez rysunku sylwetki idą na pełną szerokość. Materiał MUSI tu być:
   w wąskiej kolumnie 300 px kwadraciki kolorów łamały się po dwa (12 kolorów Organzy
   = 6 rzędów przewijania), a obok stała pusta kolumna 640 px. */
.don-mtm-modal__step--summary.is-active,
.don-mtm-modal__step--miska.is-active,
.don-mtm-modal__step--material.is-active,
.don-mtm-modal__step--mod.is-active { grid-template-columns: 1fr; }

/* ── Krok: dodatki i modyfikacje (v4.6.0 — 4 sekcje wg Anny) ── */
/* ── JEDNA SZEROKOŚĆ I JEDNA SKALA NAGŁÓWKÓW WE WSZYSTKICH KROKACH ──
   Wcześniej każdy krok miał własną: dodatki 820 px, miska 760 px, podsumowanie 720 px,
   materiał pełną. Klikając „Dalej” klientka widziała, jak treść skacze na boki.
   Kroki z rysunkiem sylwetki (wymiary) zostają dwukolumnowe — tam wąska kolumna jest celowa. */
.don-mtm-mod,
.don-mtm-miska,
.don-mtm-mat,
.don-mtm-modal__summary { max-width: none; }

.don-mtm-mod__title,
.don-mtm-miska__title,
.don-mtm-mat__title,
.don-mtm-modal__summary h3 {
	font-family: var(--don-serif, 'Cormorant Garamond', Georgia, serif);
	margin: 0 0 6px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: #0F0E0C; line-height: 1.25;
}
.don-mtm-mod__lead,
.don-mtm-miska__lead,
.don-mtm-mat__lead { margin: 0 0 18px; font-size: 13px; color: #6C6A64; line-height: 1.6; }

/* v4.26.0 — stała informacja o poglądowych zdjęciach tkanin (Anna, 15.09.2026).
   Nie jest to ozdobnik, tylko zastrzeżenie prawne do kolorów, więc ma własne
   tło i pełny kontrast tekstu, nie szarość podpisu. Zmierzone: 7,68:1. */
.don-mtm-mat__uwaga {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 0 0 18px; padding: 10px 13px;
	background: #FBF6EE; border: 1px solid #E6DAC8; border-radius: 3px;
	font-size: 13px; line-height: 1.55; color: #4A4640;
}
.don-mtm-mat__uwaga svg { flex: none; margin-top: 2px; color: #8A6A3E; }
.don-mtm-mod__sec { border: 1px solid #E6DAC8; background: #fff; margin-bottom: 10px; }
.don-mtm-mod__sec[open] { border-color: #C7B393; }
.don-mtm-mod__sum {
	display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none;
	padding: 14px 16px; user-select: none;
}
.don-mtm-mod__sum::-webkit-details-marker { display: none; }
.don-mtm-mod__sum:hover { background: #FBF7F0; }
.don-mtm-mod__sec-title {
	font-family: var(--don-serif, 'Cormorant Garamond', Georgia, serif);
	font-size: 19px; color: #6F5641;
}
.don-mtm-mod__sec-sub { font-size: 12px; color: #6C6A64; letter-spacing: .03em; }
.don-mtm-mod__chev {
	margin-left: auto; width: 9px; height: 9px; flex: 0 0 9px;
	border-right: 1.5px solid #8A6D4F; border-bottom: 1.5px solid #8A6D4F;
	transform: rotate(45deg); transition: transform 180ms ease;
}
.don-mtm-mod__sec[open] .don-mtm-mod__chev { transform: rotate(-135deg); }
/* twardy fallback: <details> potrafi togglować open, a treść zostaje widoczna */
.don-mtm-mod__sec:not([open]) .don-mtm-mod__body { display: none; }
.don-mtm-mod__body { padding: 2px 16px 16px; border-top: 1px solid #F0E8DC; }
.don-mtm-mod__grp { border: 0; margin: 14px 0 0; padding: 0; }
.don-mtm-mod__grp-name {
	padding: 0; margin: 0 0 8px; font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; color: #8A6D4F; font-weight: 600;
}
/* Opcje układamy w kolumny, gdy jest na to miejsce. Wcześniej każda szła przez całe
   989 px: przy 8 typach gorsetu lista ciągnęła się na kilka ekranów, a obok nazwy
   zostawało pół metra pustki. Dwie kolumny skracają krok o połowę. */
.don-mtm-mod__opts { display: grid; gap: 6px 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: stretch; }
.don-mtm-mod__opt {
	position: relative; display: flex; align-items: center; gap: 11px;
	padding: 10px 12px; border: 1px solid #E6DAC8; background: #fff; cursor: pointer;
	font-size: 14px; color: #3D3B37; line-height: 1.4;
	transition: border-color 150ms ease, background 150ms ease;
}
.don-mtm-mod__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.don-mtm-mod__box {
	flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid #C7B393; background: #fff;
	border-radius: 50%; position: relative; transition: inherit;
}
.don-mtm-mod__opt:has(input[type="checkbox"]) .don-mtm-mod__box { border-radius: 3px; }
.don-mtm-mod__opt:hover { border-color: #B8912F; background: #FEFCF8; }
.don-mtm-mod__opt:has(input:checked) { border-color: #6F5641; background: #FBF7F0; }
.don-mtm-mod__opt:has(input:checked) .don-mtm-mod__box { background: #6F5641; border-color: #6F5641; }
.don-mtm-mod__opt:has(input:checked) .don-mtm-mod__box::after {
	content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.don-mtm-mod__opt:has(input:focus-visible) { outline: 2px solid #B8912F; outline-offset: 2px; }
/* v4.9.0 — Anna 28.07 pkt 7: „czy jeśli opcja będzie miała zdjęcie, to czy jest
   możliwość żeby było ono bardziej widoczne?". Kwadrat 46×46 kadrował sukienkę
   w pasek. Portret 3:4 (jak zdjęcia sukni) i ~2,6× większa powierzchnia. */
.don-mtm-mod__img {
	flex: 0 0 64px; width: 64px; height: 85px; object-fit: cover;
	border: 1px solid #EDE6DA; border-radius: 3px; background: #FAF7F2;
}
.don-mtm-mod__opt:has(input:checked) .don-mtm-mod__img { border-color: #6F5641; }
/* opcja bez zdjęcia w grupie, która zdjęcia ma — delikatne pasy, jak przy kolorach tkanin */
.don-mtm-mod__img--empty {
	display: block;
	background: repeating-linear-gradient(45deg, #F7F3ED, #F7F3ED 5px, #EFE7DB 5px, #EFE7DB 10px);
}
.don-mtm-mod__name { flex: 1; min-width: 0; }
.don-mtm-mod__price { margin-left: auto; font-size: 13px; font-weight: 600; color: #8A6D4F; white-space: nowrap; }
.don-mtm-mod__opt.is-disabled { opacity: .42; cursor: not-allowed; }
.don-mtm-mod__opt.is-disabled:hover { border-color: #E6DAC8; background: #fff; }
.don-mtm-mod__opt.is-disabled .don-mtm-mod__name::after {
	content: ' — niedostępne przy tym wyborze'; font-size: 11px; font-style: italic; color: #A4262C;
}
@media (max-width: 620px) {
	/* grid zamiast flexa — deterministyczny układ: [tytuł][strzałka] / [podtytuł] */
	.don-mtm-mod__sum {
		display: grid; grid-template-columns: 1fr auto; align-items: center;
		gap: 2px 10px; padding: 12px 13px;
	}
	.don-mtm-mod__sec-title { grid-column: 1; grid-row: 1; }
	.don-mtm-mod__chev { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
	.don-mtm-mod__sec-sub { grid-column: 1 / -1; grid-row: 2; }
	.don-mtm-mod__body { padding: 2px 13px 14px; }
	.don-mtm-mod__opt { font-size: 13.5px; padding: 10px; }
}

/* ── Krok: miska w gorsecie (v4.5.0) ── */
/* szerokość, nagłówek i lead — wspólne reguły kroków (patrz wyżej) */
.don-mtm-miska__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.don-mtm-miska__card {
	position: relative; display: flex; flex-direction: column; align-items: center;
	gap: 3px; padding: 16px 10px 13px; border: 1px solid #E0D4C1; background: #fff;
	cursor: pointer; text-align: center; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.don-mtm-miska__card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.don-mtm-miska__box {
	position: absolute; top: 8px; right: 8px; width: 16px; height: 16px;
	border: 1px solid #C7B393; border-radius: 50%; background: #fff; transition: inherit;
}
.don-mtm-miska__size { font-size: 22px; font-weight: 600; color: #6F5641; line-height: 1; }
.don-mtm-miska__dims { font-size: 11.5px; color: #6C6A64; line-height: 1.45; }
.don-mtm-miska__card:hover { border-color: #B8912F; box-shadow: 0 8px 20px -14px rgba(111, 86, 65, .5); }
.don-mtm-miska__card input:checked ~ .don-mtm-miska__size { color: #0F0E0C; }
.don-mtm-miska__card:has(input:checked) { border-color: #6F5641; background: #FBF7F0; box-shadow: 0 0 0 1px #6F5641 inset; }
.don-mtm-miska__card:has(input:checked) .don-mtm-miska__box { background: #6F5641; border-color: #6F5641; }
.don-mtm-miska__card:has(input:checked) .don-mtm-miska__box::after {
	content: ''; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.don-mtm-miska__card input:focus-visible ~ .don-mtm-miska__box { outline: 2px solid #B8912F; outline-offset: 2px; }
/* v4.26.0 — opcji „nie wiem" już nie ma (punkt 4 Anny z 15.09.2026).
   Reguły zostają na wypadek starej kopii szablonu w buforze przeglądarki. */
.don-mtm-miska__card--none { grid-column: span 2; flex-direction: row; justify-content: center; gap: 10px; }
.don-mtm-miska__card--none .don-mtm-miska__size { font-size: 18px; color: #6C6A64; }

/* Rysunek miseczki z wymiarami w środku. Zastępuje dwie liczby ze skrótami
   „szer." i „dł.", z których nie było widać, który wymiar biegnie którędy. */
.don-mtm-miska__rys { display: block; width: 100%; max-width: 116px; height: auto; margin: 4px auto 0; }
.don-mtm-miska__rys-ksztalt { fill: #F6EFE4; stroke: #C7B393; stroke-width: 2; }
.don-mtm-miska__rys-wym line { stroke: #6F5641; stroke-width: 1.4; }
.don-mtm-miska__rys-wym path { fill: #6F5641; }
.don-mtm-miska__rys-wym text {
	fill: #4A3D30; font-size: 15px; font-weight: 600;
	font-family: var(--font-body, system-ui, sans-serif);
}
.don-mtm-miska__card:has(input:checked) .don-mtm-miska__rys-ksztalt { fill: #EFE2CE; stroke: #6F5641; }
@media (max-width: 620px) {
	.don-mtm-miska__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.don-mtm-miska__card--none { grid-column: 1 / -1; }
}
@media (max-width: 400px) {
	.don-mtm-miska__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.don-mtm-modal__figure {
	margin: 0; position: sticky; top: 0;
	background: linear-gradient(180deg, #FFFDF9, #F6F0E7);
	border: 1px solid #EDE6DA; border-radius: 14px; padding: 14px 12px 10px;
	box-shadow: 0 14px 34px -20px rgba(111, 86, 65, .42);
}
.don-mtm-modal__figure .don-mtm-svg { max-height: 56vh; }
.don-mtm-modal__figure figcaption {
	text-align: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
	color: #6C6A64; margin-top: 4px;
}
.don-mtm-modal__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-content: start; }
.don-mtm-modal__lead {
	grid-column: 1 / -1; margin: 0 0 4px; font-size: 13px; color: #6C6A64; line-height: 1.6;
}
.don-mtm-modal__fields .don-mtm-wymiary__field { margin: 0; }
.don-mtm-wymiary__input-wrap input.is-error { border-color: #A4262C; box-shadow: 0 0 0 3px rgba(164, 38, 44, .12); }

/* nagłówek podsumowania — wspólna skala kroków (patrz wyżej); tu tylko odstęp pod nim */
.don-mtm-modal__summary h3 { margin-bottom: 14px; }
.don-mtm-modal__recap { margin: 0 0 20px; border: 1px solid #E6DAC8; background: #FBF8F4; padding: 6px 16px; }
.don-mtm-modal__recap-row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 8px 0; border-bottom: 1px solid #EDE6DA; font-size: 14px;
}
.don-mtm-modal__recap-row:last-child { border-bottom: 0; font-size: 15.5px; font-weight: 600; color: #0F0E0C; }
.don-mtm-modal__recap-row dt { color: #6C6A64; font-weight: 500; }
.don-mtm-modal__recap-row dd { margin: 0; text-align: right; color: #2A2723; }

.don-mtm-modal__foot {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 28px; border-top: 1px solid #EDE6DA; background: #FBF8F4;
}
.don-mtm-modal__foot-hint { flex: 1; font-size: 12px; color: #6C6A64; text-align: center; }
.don-mtm-modal__foot .don-btn { min-width: 120px; }
/* Przycisk finalny nosi klasę WooCommerce `single_add_to_cart_button`, która rozciąga go
   na całą wolną szerokość (560 px obok 120 px „Wstecz” i łamiąca się podpowiedź).
   W stopce modala trzymamy go w proporcji — nadal jest dominującą akcją. */
.don-mtm-modal__foot .don-btn[data-mtm-finish] {
	flex: 0 0 auto; width: auto; max-width: 340px;
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
/* atrybut hidden musi wygrać z display .don-btn z main.css */
.don-mtm-modal [hidden] { display: none !important; }
.don-btn--ghost {
	background: transparent; border: 1px solid #C7B393; color: #6F5641;
}
.don-btn--ghost:disabled { opacity: .4; cursor: default; }

@media (max-width: 860px) {
	.don-mtm-modal { padding: 0; }
	.don-mtm-modal__panel { width: 100%; height: 100dvh; max-height: none; }
	.don-mtm-modal__head { padding: 16px 56px 10px 18px; }
	.don-mtm-modal__body { padding: 16px 18px; }
	.don-mtm-modal__step.is-active { grid-template-columns: 1fr; }
	/* v4.34.0 — sylwetka w oknie NIE jest przyklejona na telefonie. Reguła sticky
	   z komputera (dwie kolumny) działała tu w jednej kolumnie: przy przewijaniu
	   karta z sylwetką stała na środku ekranu, pola przejeżdżały PO niej, a podpisy
	   pól chowały się POD nią (zmierzone 22.09.2026 na 390 px: „Obwód talii”
	   ucięte do dwóch słów). Strona /wymiary/ ma tę samą regułę od v4.1.6. */
	.don-mtm-modal__figure { max-width: 190px; margin: 0 auto; position: static; }
	.don-mtm-modal__figure .don-mtm-svg { max-height: 34vh; }
	.don-mtm-modal__fields { grid-template-columns: 1fr; }
	.don-mtm-modal__foot { padding: 12px 16px; flex-wrap: wrap; }
	.don-mtm-modal__foot-hint { order: -1; flex-basis: 100%; }
}

/* ═══════════════ KOSZYK, KASA, ZAMÓWIENIE — meta pozycji czytelnie ═══════════════
   v4.1.0: siatka etykieta → wartość zamiast słupka słów.
   v4.27.16 (Anna, 19.09.2026, zrzut IMG_6739): siatka z kolumną `max-content`
   i etykietą bez łamania oddawała wartościom resztkę szerokości. Najdłuższa
   etykieta („Opadające ramiączka (off-shoulder):", 223 px) ustawiała kolumnę
   dla CAŁEJ listy i „16 października 2026" szło na trzy linie przy 107 px.
   Teraz para etykieta: wartość płynie w jednej linii i łamie się tylko wtedy,
   gdy naprawdę nie mieści się w komórce. Skrypt: `_zrzuty/_kasa_wartosci_w_linii.py`. */
.woocommerce-cart .cart_item dl.variation,
.woocommerce-checkout .cart_item dl.variation,
table.shop_table dl.variation {
	display: block !important;
	margin: 8px 0 0 !important;
	font-size: 12px;
	line-height: 1.45;
}
table.shop_table dl.variation dt {
	display: inline; margin: 0 4px 0 0 !important; padding: 0 !important; float: none !important;
	/* v4.3.4 — uppercase 10px robił z „DOPŁATA ZA TERMIN:" szeroki słup. Normalny case = węziej. */
	font-size: 12px; letter-spacing: 0; text-transform: none;
	color: #6f6a5e; font-weight: 600; white-space: normal;
}
table.shop_table dl.variation dd {
	display: inline; margin: 0 !important; padding: 0 !important; float: none !important;
	color: #3D3B37; font-weight: 400;
}
table.shop_table dl.variation dd::after { content: "\A"; white-space: pre; }
table.shop_table dl.variation dd p { margin: 0; display: inline; }
table.shop_table td.product-name { min-width: 200px; }
/* kolumna miniatury nie może zostać zgnieciona do 0 */
table.shop_table td.product-thumbnail { width: 92px; min-width: 92px; }
table.shop_table td.product-thumbnail img { width: 76px !important; min-width: 76px; height: auto; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
	.don-mtm *, .don-mtm-modal * { transition: none !important; }
}

/* ── v4.3.2 — pasek „Zmierzymy Cię w salonie" w modalu (Paweł: jasny escape
   dla klientki przytłoczonej liczbą wymiarów)

   v4.19.6 — pasek wyszedł z przewijanej treści i stoi na stałe nad stopką.
   `flex: 0 0 auto` jest tu istotne: bez tego pasek jako rodzeństwo body
   (flex: 1) ściskałby się przy niskim oknie i tekst schodziłby na 4 linie. ── */
.don-mtm-modal__salon {
	flex: 0 0 auto;
	display: flex; align-items: center; gap: 12px;
	margin: 0; padding: 11px 28px;
	background: #F5F0E6; border: 0; border-top: 1px solid #E6DAC8;
	border-radius: 0;
}
.don-mtm-modal__salon > svg { flex: 0 0 20px; color: #6F5641; }
.don-mtm-modal__salon-text { flex: 1; font-size: 13px; line-height: 1.45; color: #3D3B37; }
.don-mtm-modal__salon-text strong { display: block; font-weight: 600; color: #0F0E0C; }
.don-mtm-modal__salon-tel {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
	white-space: nowrap; padding: 9px 14px; min-height: 40px;
	font-size: 14px; font-weight: 600; letter-spacing: .01em;
	color: #0F0E0C; text-decoration: none;
	background: #FFFDFA; border: 1px solid #C7B393; border-radius: 3px;
	transition: background 180ms ease, border-color 180ms ease;
}
.don-mtm-modal__salon-tel svg { color: #6F5641; }
.don-mtm-modal__salon-tel:hover,
.don-mtm-modal__salon-tel:focus-visible { background: #F0E7D8; border-color: #6F5641; }
.don-mtm-modal__salon-cta { flex: 0 0 auto; white-space: nowrap; padding: 10px 16px; font-size: 12px;
	display: inline-flex; align-items: center; gap: 6px; }

/* Telefon jest na tym pasku ważniejszy od formularza rezerwacji, więc na
   wąskim ekranie zostaje pełnowymiarowy, a „Umów wizytę" schodzi obok. */
@media (max-width: 700px) {
	.don-mtm-modal__salon { flex-wrap: wrap; gap: 9px 10px; padding: 10px 18px; }
	.don-mtm-modal__salon-text { flex: 1 1 100%; font-size: 12.5px; }
	.don-mtm-modal__salon-text strong { display: inline; }
	.don-mtm-modal__salon-tel { flex: 1 1 auto; justify-content: center; min-height: 44px; }
	.don-mtm-modal__salon-cta { flex: 1 1 auto; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
/* Najniższe telefony: sama zachęta w jednej linii, żeby pasek nie zjadł
   ekranu, na którym klientka wpisuje wymiary. */
@media (max-width: 400px) {
	.don-mtm-modal__salon > svg { display: none; }
	.don-mtm-modal__salon-text { font-size: 12px; line-height: 1.35; }
}

/* ── v4.3.3 — OSTATNI KROK MODALA dopracowany (Paweł): summary miał
   max-width 720px i prawa połowa panelu świeciła pustką. Teraz pełna
   szerokość, 2 kolumny: recap | życzenia + zgoda. ── */
.don-mtm-modal__summary {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	/* Wiersz „życzenia” trzymamy na min-content. Bez tego grid rozdzielał wysokość
	   długiego podsumowania (span 2 wiersze) po połowie i pod polem tekstowym
	   robiła się ~200 px dziura, a zgoda odjeżdżała na dół. */
	grid-template-rows: auto min-content 1fr;
	gap: 4px 36px;
	align-items: start;
}
.don-mtm-modal__summary h3 { grid-column: 1 / -1; }
.don-mtm-modal__recap { grid-column: 1; grid-row: 2 / span 2; margin: 0; }
.don-mtm-modal__summary .don-mtm-wymiary__field--textarea { grid-column: 2; grid-row: 2; margin: 0 0 14px; }
.don-mtm-modal__summary .don-mtm-wymiary__consent { grid-column: 2; grid-row: 3; }
.don-mtm-modal__summary textarea { min-height: 132px; resize: vertical; }
@media (max-width: 760px) {
	.don-mtm-modal__summary { display: block; }
	.don-mtm-modal__recap { margin: 0 0 18px; }
}
/* wiersz Razem — mocny, kwota gold; komplet wymiarów — zielone potwierdzenie */
.don-mtm-modal__recap-row.is-total {
	border-top: 1px solid #C7B393; margin-top: 4px; padding-top: 12px;
	font-size: 16px; font-weight: 600; color: #0F0E0C;
}
.don-mtm-modal__recap-row.is-total dd { color: #6F5641; font-size: 18px; }
.don-mtm-modal__recap-row.is-complete dd { color: #1E7B34; font-weight: 600; }

/* v4.3.5 — salon CTA = cichy link, nie przycisk (Paweł: „żeby zamiast Dalej
   ktoś nie kliknął Umów"). Jedyny mocny przycisk w kroku = Dalej; link nadal
   widoczny (brąz, podkreślony), ale drugorzędny i nie „button-like". */
.don-mtm-modal__salon-cta,
.don-mtm-modal__salon-cta.don-btn {
	background: none !important; border: 0 !important; box-shadow: none !important;
	padding: 6px 2px !important; min-width: 0 !important;
	color: #6F5641 !important; font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 0 !important; text-transform: none !important;
	text-decoration: underline !important; text-underline-offset: 3px;
	text-decoration-color: rgba(111, 86, 65, .4);
	transition: color 150ms ease, text-decoration-color 150ms ease;
}
.don-mtm-modal__salon-cta:hover { color: #5E4A38 !important; text-decoration-color: #6F5641; }

/* v4.19.6 — pasek ma być widoczny OD RAZU (Paweł, 09.09.2026). Poprzednia
   wersja dawała mu tło #FBF8F4 przy panelu #FFFDFA, czyli kontrast 1,02:1:
   pasa po prostu nie było widać, a stał na końcu przewijanej treści.
   Teraz: własne tło, kreska u góry i telefon jako pełny przycisk. Zachęta
   „Umów wizytę" zostaje cichym linkiem, więc mocnym elementem pozostaje
   jeden — DALEJ w stopce nadal dominuje w swoim rzędzie. */
.don-mtm-modal__salon { background: #F5EFE3; border-top: 2px solid #C7B393; }
.don-mtm-modal__salon-tel {
	background: #6F5641; border-color: #6F5641; color: #FFFDFA;
}
.don-mtm-modal__salon-tel svg { color: #E6DAC8; }
.don-mtm-modal__salon-tel:hover,
.don-mtm-modal__salon-tel:focus-visible { background: #5E4A38; border-color: #5E4A38; color: #fff; }

/* ═══════════════════════════════════════════════
   v4.10.0 — KROK 2: MATERIAŁ I KOLORYSTYKA (spec Anny 30.07)
   Tkanina = akordeon; w środku KWADRATOWE próbniki kolorów ze zdjęciami
   (Anna: „nie prostokąty jak w dodatkach, tylko kwadraciki").
   ═══════════════════════════════════════════════ */
/* tytuł i lead — wspólne reguły kroków (patrz sekcja „JEDNA SZEROKOŚĆ I JEDNA SKALA…”) */

.don-mtm-mat__sec {
	border: 1px solid #E6DAC8; border-radius: 6px; background: #fff;
	margin-bottom: 10px; overflow: hidden;
}
.don-mtm-mat__sec[open] { border-color: #C7B393; }
.don-mtm-mat__sum {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
	padding: 13px 15px; cursor: pointer; list-style: none; user-select: none;
}
.don-mtm-mat__sum::-webkit-details-marker { display: none; }
.don-mtm-mat__name { font-weight: 600; font-size: 14.5px; color: #2E2A24; grid-column: 1; }
.don-mtm-mat__sub { grid-column: 1; font-size: 12px; color: #8A8378; }
.don-mtm-mat__chev {
	grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px;
	border-right: 1.6px solid #6F5641; border-bottom: 1.6px solid #6F5641;
	transform: rotate(45deg); transition: transform .18s ease;
}
.don-mtm-mat__sec[open] .don-mtm-mat__chev { transform: rotate(-135deg); }
/* wybrana tkanina — złota kropka przy nazwie */
.don-mtm-mat__sec.has-choice .don-mtm-mat__name::after {
	content: '●'; margin-left: 7px; font-size: 9px; color: #B8912F; vertical-align: 2px;
}
.don-mtm-mat__body { padding: 4px 15px 15px; border-top: 1px solid #F1EAE0; }

/* KWADRACIKI kolorów */
/* 104 px = kwadracik czytelny na pełnej szerokości kroku (przy ~990 px wychodzi 8 w rzędzie).
   Zdjęcie źródłowe ma 150 px, więc obraz zostaje ostry. */
.don-mtm-mat__swatches {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 10px; padding-top: 10px;
}
@media (max-width: 600px) {
	/* na telefonie 3 w rzędzie — szerszy kafelek zjadałby ekran */
	.don-mtm-mat__swatches { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
.don-mtm-mat__swatch { position: relative; cursor: pointer; text-align: center; }
.don-mtm-mat__swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.don-mtm-mat__swatch-img {
	display: block; width: 100%; aspect-ratio: 1 / 1; height: auto;
	object-fit: cover; border: 2px solid #EDE6DA; border-radius: 6px; background: #FAF7F2;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.don-mtm-mat__swatch-img--empty { background: repeating-linear-gradient(45deg, #F5F0E8, #F5F0E8 6px, #EDE6DA 6px, #EDE6DA 12px); }
.don-mtm-mat__swatch:hover .don-mtm-mat__swatch-img { border-color: #C7B393; }
.don-mtm-mat__swatch input:checked + .don-mtm-mat__swatch-img,
.don-mtm-mat__swatch input:checked ~ .don-mtm-mat__swatch-img {
	border-color: #6F5641; box-shadow: 0 0 0 2px rgba(111, 86, 65, .25);
}
.don-mtm-mat__swatch input:focus-visible ~ .don-mtm-mat__swatch-img { outline: 2px solid #B8912F; outline-offset: 2px; }
.don-mtm-mat__swatch input:checked ~ .don-mtm-mat__swatch-name { font-weight: 600; color: #2E2A24; }
/* Nazwy kolorów Anny bywają długie („Blue Forget-Me-Nots – błękitne niezapominajki”).
   Bez stałej wysokości podpisu jednolinijkowe i dwulinijkowe nazwy dają różne wysokości
   kafelków i siatka kwadratów rozjeżdża się w pionie. Zawsze rezerwujemy dwie linie
   i przycinamy dłuższe (pełna nazwa zostaje w DOM dla czytników ekranu i w tooltipie). */
.don-mtm-mat__swatch-name {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 5px; font-size: 11.5px; line-height: 1.3; color: #5C574F;
	min-height: 2.6em;
}
.don-mtm-mat__swatches { align-items: start; }

/* tkanina bez kolorów — wybór samą nazwą (do czasu wgrania zdjęć) */
.don-mtm-mat__pick {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	padding: 11px 12px; margin-top: 10px; border: 1px solid #E6DAC8; border-radius: 5px; cursor: pointer;
	font-size: 13.5px; color: #2E2A24; transition: border-color .15s ease, background .15s ease;
}
.don-mtm-mat__pick:hover { border-color: #B8912F; background: #FEFCF8; }
.don-mtm-mat__pick:has(input:checked) { border-color: #6F5641; background: #FBF7F0; }
.don-mtm-mat__pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.don-mtm-mat__pick-box {
	flex: 0 0 17px; width: 17px; height: 17px; border: 1px solid #C7B393; background: #fff;
	border-radius: 50%; position: relative;
}
.don-mtm-mat__pick:has(input:checked) .don-mtm-mat__pick-box,
.don-mtm-mat__tiul-wybor label:has(input:checked) .don-mtm-mat__pick-box { background: #6F5641; border-color: #6F5641; box-shadow: inset 0 0 0 3px #fff; }
.don-mtm-mat__pick-hint { flex-basis: 100%; font-size: 11.5px; color: #8A8378; padding-left: 26px; }
.don-mtm-mat__pick input:focus-visible ~ .don-mtm-mat__pick-box { outline: 2px solid #B8912F; outline-offset: 2px; }
/* obramowanie całego wiersza przy nawigacji klawiaturą — sam pierścień na kropce 17px
   ginie na tle listy tkanin */
.don-mtm-mat__pick:has(input:focus-visible) { outline: 2px solid #B8912F; outline-offset: 2px; border-color: #B8912F; }

/* pytanie o dodatkową warstwę tiulu (Brokat Diamond) */
.don-mtm-mat__tiul {
	margin-top: 14px; padding: 13px 15px;
	background: #FAF7F2; border: 1px solid #E6DAC8; border-left: 3px solid #B8912F; border-radius: 5px;
}
.don-mtm-mat__tiul-label { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: #2E2A24; }
.don-mtm-mat__tiul-opis { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: #6E675C; }
.don-mtm-mat__tiul-wybor { display: flex; gap: 18px; }
.don-mtm-mat__tiul-wybor label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; color: #2E2A24; }
.don-mtm-mat__tiul-wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.don-mtm-mat__tiul.is-error { border-color: #A4262C; border-left-color: #A4262C; }

/* 7 kropek — na wąskich ekranach ciaśniej, żeby pasek się nie łamał brzydko */
@media (max-width: 480px) {
	.don-mtm-modal__steps { gap: 6px; }
	.don-mtm-modal__steps li { font-size: 9.5px; letter-spacing: .02em; }
}

/* ═══════════════════════════════════════════════════════════════
   v4.12.0 — DOPŁATA ZA TKANINĘ I KOLOR (prośba Anny z 27.08, punkt 2)
   Kwota ma być widoczna, ale nie krzyczeć: ta sama waga co dopisek
   pod nazwą tkaniny, kolor akcentu jak przy dodatkach.
   ══════════════════════════════════════════════════════════════ */
.don-mtm-mat__cena {
  margin-left: auto;
  padding-right: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #6F5641;
  white-space: nowrap;
}

.don-mtm-mat__swatch-cena {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6F5641;
  white-space: nowrap;
}

/* v4.34.0 — rysunek welonu (drugi konfigurator, dodatki szyte na miarę).
   Kształt welonu jest widoczny zawsze, bo bez niego linia szerokości leżałaby
   w powietrzu obok nóg figury. Barwa ta sama co linie wymiarów, żeby welon
   czytał się jako część rysunku pomiaru, a nie jako zdjęcie produktu. */
.don-mtm-veil { pointer-events: none; }
.don-mtm-veil__tiul { fill: rgba(184, 145, 47, .09); stroke: rgba(184, 145, 47, .55); stroke-width: 1.6; stroke-linejoin: round; }
.don-mtm-veil__fald { fill: none; stroke: rgba(184, 145, 47, .28); stroke-width: 1.2; stroke-linecap: round; }
.don-mtm-veil__grzebien { fill: rgba(184, 145, 47, .55); stroke: none; }