.dwc-configurator {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	font-family: inherit;
}

.dwc-heading {
	font-size: 22px;
	margin-bottom: 8px;
}

.dwc-hint {
	color: var(--muted, #5D6862);
	margin-bottom: 20px;
}

.dwc-info-box {
	background-color: var(--bg, #F5F4F0);
	border-left: 3px solid var(--brand, #1F5A3D);
	padding: 12px 16px;
	font-size: 13px;
	color: var(--muted, #5D6862);
	line-height: 1.5;
	margin-bottom: 20px;
	border-radius: 0 4px 4px 0;
}

/* Krok 1: wybor ksztaltu */

.dwc-shapes-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.dwc-shape-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px;
	background-color: var(--surface, #FFFFFF);
	border: 2px solid var(--line, #DDDCD5);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.15s ease;
	flex: 1 1 200px;
	max-width: 240px;
}

.dwc-shape-choice:hover {
	border-color: var(--brand, #1F5A3D);
	transform: translateY(-2px);
}

.dwc-shape-thumb {
	width: 100%;
	height: 100px;
}

.dwc-shape-thumb polygon {
	fill: #F1E4D0;
	stroke: var(--oak, #A2692F);
	stroke-width: 2;
}

.dwc-shape-choice span {
	font-weight: 600;
	font-size: 14px;
	text-align: center;
}

/* Krok 2: edytor */

.dwc-editor-layout {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.dwc-svg-wrap {
	position: relative;
	flex: 2 1 560px;
	background-color: var(--bg, #F5F4F0);
	border: 1px solid var(--line, #DDDCD5);
	border-radius: 8px;
	padding: 10px;
}

.dwc-svg {
	width: 100%;
	height: auto;
	touch-action: none;
}

.dwc-svg.dwc-panning {
	cursor: grabbing;
}

.dwc-zoom-controls {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;
	display: flex;
	gap: 6px;
}

.dwc-zoom-btn {
	width: 32px;
	height: 32px;
	border: 1px solid var(--line, #DDDCD5);
	background-color: var(--surface, #FFFFFF);
	color: var(--brand, #1F5A3D);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dwc-zoom-btn:hover {
	border-color: var(--brand, #1F5A3D);
	background-color: var(--bg, #F5F4F0);
}

.dwc-polygon-shape {
	fill: none;
	stroke: var(--brand, #1F5A3D);
	stroke-width: 2;
}

.dwc-wood-fill {
	pointer-events: none;
}

.dwc-wood-base {
	fill: #E4C79A;
}

.dwc-wood-grain {
	stroke: var(--oak, #A2692F);
	stroke-width: 1;
	opacity: 0.55;
}

.dwc-nosek-shadow {
	fill: #C9B896;
	fill-opacity: 0.6;
	stroke: none;
	pointer-events: none;
}

.dwc-front-label {
	font-size: 13px;
	font-weight: 700;
	fill: var(--oak, #A2692F);
	letter-spacing: 0.5px;
	pointer-events: none;
}

.dwc-diagonal-line {
	stroke: var(--muted, #5D6862);
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
}

.dwc-handle {
	fill: var(--brand, #1F5A3D);
	stroke: var(--surface, #FFFFFF);
	stroke-width: 3;
	cursor: grab;
	/* "r" NIE jest w tej liscie celowo - CSS transition na "r" traktuje je
	   jako animowalna wlasciwosc CSS z wlasnym stanem, ktory przy czestych
	   programowych zmianach atrybutu (co kazdy zoom) potrafi "utknac" na
	   poczatkowej wartosci z pierwszego renderu (10), ignorujac kolejne
	   aktualizacje atrybutu przez JS - promien uchwytu wizualnie przestawal
	   sie zmniejszac mimo poprawnej wartosci atrybutu w DOM. Plynne hover
	   jest i tak obslugiwane osobno w JS (patrz bindHandleHoverScale). */
	transition: fill 0.15s ease;
	/* Bez tego stroke-width skaluje sie razem z viewBox (jak kazdy wymiar w
	   SVG) - przy duzym przyblizeniu (maly viewBox) obrys uchwytu staje sie
	   nieproporcjonalnie gruby, "pochlaniajac" caly widoczny obszar. */
	vector-effect: non-scaling-stroke;
}

/* Promien hover jest liczony w JS jako mnoznik biezacego (juz przeskalowanego
   zoomem) promienia - patrz HANDLE_HOVER_SCALE w configurator.js. Stala
   wartosc "r: 12" dawalaby przy duzym przyblizeniu (male bazowe r) ogromny
   WZGLEDNY skok rozmiaru na hover, zamiast proporcjonalnego powiekszenia. */
.dwc-handle:hover {
	fill: var(--brand, #1F5A3D);
}

.dwc-handle:active {
	cursor: grabbing;
	fill: var(--brand, #1F5A3D);
}

.dwc-drag-hint {
	fill: none;
	stroke: var(--brand, #1F5A3D);
	stroke-width: 2;
	opacity: 0;
	pointer-events: none;
	vector-effect: non-scaling-stroke;
}

.dwc-add-hotspot {
	fill: var(--surface, #FFFFFF);
	stroke: var(--brand, #1F5A3D);
	stroke-width: 1.5;
	stroke-dasharray: 3 2;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.15s ease, fill 0.15s ease;
	vector-effect: non-scaling-stroke;
}

.dwc-add-hotspot:hover {
	opacity: 1;
	fill: var(--brand-soft, #E3EDE6);
}

@media (max-width: 600px) {
	.dwc-add-hotspot {
		r: 12;
		opacity: 0.75;
	}
}

.dwc-drag-hint.dwc-drag-hint-visible {
	opacity: 0.9;
	animation: dwc-pulse 1.4s ease-in-out infinite;
}

@keyframes dwc-pulse {
	0% {
		r: 14;
		opacity: 0.9;
	}
	70% {
		r: 24;
		opacity: 0;
	}
	100% {
		r: 24;
		opacity: 0;
	}
}


.dwc-label-text {
	font-size: 14px;
	fill: var(--ink, #18201B);
	font-weight: 700;
	pointer-events: none;
	paint-order: stroke;
	stroke: var(--surface, #FFFFFF);
	stroke-width: 4px;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.dwc-angle-text {
	font-size: 10px;
	fill: var(--brand, #1F5A3D);
}

.dwc-diagonal-text {
	fill: var(--muted, #5D6862);
	font-style: italic;
}

.dwc-point-letter {
	font-size: 16px;
	fill: var(--brand, #1F5A3D);
}

/* Ksztalt dowolny uzywa TEJ SAMEJ czcionki co trojkat/czworokat (14px boki,
   10px katy, 16px litery) - wczesniejsze mniejsze rozmiary dla freeform byly
   niespojne z reszta konfiguratora. */

.dwc-guide-line {
	stroke: var(--brand, #1F5A3D);
	stroke-width: 1.5;
	stroke-dasharray: 4 3;
	opacity: 0;
	transition: opacity 0.1s ease;
}

.dwc-guide-line.dwc-guide-visible {
	opacity: 0.8;
}

.dwc-data-panel {
	flex: 1 1 280px;
}

.dwc-area-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--bg, #F5F4F0);
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 20px;
	font-size: 14px;
}

.dwc-area-label {
	color: var(--muted, #5D6862);
	font-weight: 600;
}

.dwc-area-value {
	font-weight: 700;
	font-size: 16px;
}

.dwc-sides-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin-bottom: 6px;
}

.dwc-sides-inputs label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted, #5D6862);
}

.dwc-sides-inputs label[hidden] {
	display: none;
}

.dwc-sides-inputs input[type="number"],
.dwc-sides-inputs input[type="text"] {
	padding: 7px 8px;
}

.dwc-angles-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 14px;
	margin-bottom: 6px;
}

.dwc-angles-inputs label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--muted, #5D6862);
}

.dwc-angles-inputs label[hidden] {
	display: none;
}

.dwc-angles-inputs input[type="text"] {
	padding: 7px 8px;
}

.dwc-angle-input-row {
	display: flex;
	gap: 6px;
	align-items: center;
}

.dwc-angle-input-row input {
	flex: 1 1 auto;
	min-width: 0;
}

.dwc-angle-lock-btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line, #DDDCD5);
	background-color: var(--surface, #FFFFFF);
	border-radius: 6px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dwc-angle-lock-btn:hover {
	border-color: var(--brand, #1F5A3D);
	background-color: var(--bg, #F5F4F0);
}

.dwc-angle-lock-btn[aria-pressed="true"] {
	background-color: var(--brand, #1F5A3D);
	border-color: var(--brand, #1F5A3D);
}

.dwc-sides-hint {
	font-size: 12px;
	color: var(--muted, #5D6862);
	margin: 0 0 20px;
}

.dwc-options-table {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 16px;
	background-color: var(--bg, #F5F4F0);
	border: 1px solid var(--line, #DDDCD5);
	border-left: 3px solid var(--brand, #1F5A3D);
	border-radius: 0 6px 6px 0;
	padding: 16px;
	margin-bottom: 20px;
}

.dwc-options-table label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
}

.dwc-options-table label[hidden] {
	display: none;
}

.dwc-options-table select {
	padding: 8px 10px;
}

.dwc-options {
	margin-bottom: 20px;
}

.dwc-options label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 14px;
}

.dwc-options label:last-child {
	margin-bottom: 0;
}

.dwc-options input[type="number"],
.dwc-options input[type="text"] {
	padding: 8px 10px;
}

.dwc-options select {
	padding: 8px 10px;
}

.dwc-price-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--brand, #1F5A3D);
	color: var(--surface, #FFFFFF);
	padding: 16px 20px;
	border-radius: 6px;
}

.dwc-price-label {
	font-weight: 600;
}

.dwc-price-value {
	font-size: 24px;
	font-weight: 700;
}

.dwc-price-disclaimer {
	font-size: 12px;
	color: var(--muted, #5D6862);
	margin-top: 6px;
}

.dwc-footer-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.dwc-reset-btn {
	background: none;
	border: 1px solid var(--line, #DDDCD5);
	color: var(--muted, #5D6862);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	padding: 8px 14px;
	border-radius: 4px;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.dwc-reset-btn:hover {
	border-color: var(--brand, #1F5A3D);
	color: var(--brand, #1F5A3D);
}

.dwc-back-btn {
	background: none;
	border: none;
	color: var(--brand, #1F5A3D);
	font-weight: 600;
	cursor: pointer;
	padding: 0;
}

.dwc-back-btn:hover {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.dwc-shapes-grid {
		flex-direction: column;
		align-items: stretch;
	}
	.dwc-shape-choice {
		max-width: none;
	}
	.dwc-sides-inputs,
	.dwc-angles-inputs {
		gap: 8px 10px;
	}
	.dwc-options-table {
		grid-template-columns: 1fr 1fr;
		gap: 10px 12px;
		padding: 12px;
	}
	.dwc-footer-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}
	.dwc-angle-lock-btn {
		width: 30px;
		height: 30px;
		font-size: 13px;
	}
}

.dwc-error {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--oak, #A2692F);
	background: var(--bg, #F5F4F0);
	color: var(--ink, #18201B);
	font-size: 14px;
}

.dwc-error[hidden] {
	display: none;
}

/* Kolumny panelu danych i szerokie okno (od 0.3.0).
   Układ liczony od szerokości samego konfiguratora: wąsko jedno pod drugim,
   od 760 px rysunek obok danych, od 1180 px rysunek | wymiary | drewno i cena. */
.dwc-configurator {
	container-type: inline-size;
}

.dwc-col,
.dwc-data-panel,
.dwc-svg-wrap {
	min-width: 0;
}

.dwc-sides-inputs label,
.dwc-angles-inputs label,
.dwc-sides-inputs input,
.dwc-angles-inputs input {
	min-width: 0;
}

.dwc-sides-inputs input,
.dwc-angle-input-row input {
	width: 100%;
}

.dwc-col-tyt {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted, #5D6862);
}

.dwc-col-zamowienie .dwc-col-tyt {
	margin-top: 8px;
}

@container (min-width: 760px) {
	.dwc-editor-layout {
		display: grid;
		grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}
	.dwc-svg-wrap {
		position: sticky;
		top: calc(env(safe-area-inset-top, 0px) + 160px);
	}
}

@container (min-width: 1180px) {
	.dwc-editor-layout {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.6fr);
		gap: 32px;
	}
	.dwc-data-panel {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}
	.dwc-col-zamowienie .dwc-col-tyt {
		margin-top: 0;
	}
	.dwc-options-table {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dwc-shape-choice {
		max-width: 300px;
	}
}

/* Pasek kroków, krok 1 z rzutem schodów i kartami kształtów (od 0.4.0, plik plan-schodow.js). */
.dwc-configurator {
	--dwc-k-rect: #E9D8BE;
	--dwc-k-quad: #D6B48A;
	--dwc-k-tri: #C38E55;
	--dwc-k-free: #9C6A3A;
	--dwc-sciana: #5D6862;
	--dwc-noty: #FFF1B8;
	--dwc-noty-ink: #5A4400;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .dwc-configurator {
		--dwc-k-rect: #5A4A35; --dwc-k-quad: #7A5C3C; --dwc-k-tri: #9A6E40; --dwc-k-free: #C08A52; --dwc-sciana: #9DA9A2; --dwc-noty: #3B3312; --dwc-noty-ink: #F3DE8A;
	}
}
:root[data-theme="dark"] .dwc-configurator {
	--dwc-k-rect: #5A4A35; --dwc-k-quad: #7A5C3C; --dwc-k-tri: #9A6E40; --dwc-k-free: #C08A52; --dwc-sciana: #9DA9A2; --dwc-noty: #3B3312; --dwc-noty-ink: #F3DE8A;
}
.dwc-k-rect { fill: var(--dwc-k-rect); background: var(--dwc-k-rect); }
.dwc-k-quad { fill: var(--dwc-k-quad); background: var(--dwc-k-quad); }
.dwc-k-tri { fill: var(--dwc-k-tri); background: var(--dwc-k-tri); }
.dwc-k-free { fill: var(--dwc-k-free); background: var(--dwc-k-free); }

.dwc-kroki {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + 72px);
	z-index: 4;
	background: var(--bg, #F5F4F0);
	padding: 10px 0;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line, #DDDCD5);
}
.dwc-kroki ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}
.dwc-kroki button {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--line, #DDDCD5);
	color: var(--ink, #18201C);
	font: inherit;
	text-align: left;
	cursor: pointer;
	min-width: 0;
}
.dwc-kroki i {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 600 13px var(--f-mono, monospace);
	font-style: normal;
	border: 2px solid var(--line, #DDDCD5);
	color: var(--muted, #5D6862);
}
.dwc-kroki span { display: grid; min-width: 0; }
.dwc-kroki b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwc-kroki small { font-size: 12px; color: var(--muted, #5D6862); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dwc-kroki .dwc-akt button { border-color: var(--brand, #1F5A3D); box-shadow: 0 0 0 1px var(--brand, #1F5A3D) inset; }
.dwc-kroki .dwc-akt i { background: var(--brand, #1F5A3D); border-color: var(--brand, #1F5A3D); color: var(--brand-ink, #FFFFFF); }
.dwc-kroki .dwc-ok i { background: var(--brand-soft, #E3EDE6); border-color: var(--brand, #1F5A3D); color: var(--brand, #1F5A3D); }
.dwc-kroki .dwc-wyl button { opacity: .6; cursor: default; }
.dwc-kroki button:focus-visible { outline: 3px solid var(--oak, #A2692F); outline-offset: 2px; }

.dwc-nr {
	font: 500 12px var(--f-mono, monospace);
	color: var(--oak, #A2692F);
}
.dwc-k1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
@container (min-width: 900px) {
	.dwc-k1 { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}
.dwc-plan {
	margin: 0;
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--line, #DDDCD5);
	border-radius: 14px;
	padding: 16px;
	display: grid;
	gap: 10px;
	min-width: 0;
}
.dwc-plan svg { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.dwc-plan figcaption { font-size: 13px; color: var(--muted, #5D6862); }
.dwc-wariant { display: flex; flex-wrap: wrap; gap: 6px; }
.dwc-wariant button {
	border: 1px solid var(--line, #DDDCD5);
	background: var(--surface, #FFFFFF);
	color: var(--ink, #18201C);
	border-radius: 999px;
	padding: 6px 12px;
	font: 500 13px var(--f-body, sans-serif);
	cursor: pointer;
}
.dwc-wariant button small { font: 400 11px var(--f-mono, monospace); opacity: .75; }
.dwc-wariant button[aria-pressed="true"] { background: var(--brand, #1F5A3D); border-color: var(--brand, #1F5A3D); color: var(--brand-ink, #FFFFFF); }
.dwc-inne {
	margin: 0;
	font-size: 13.5px;
	background: var(--dwc-noty);
	color: var(--dwc-noty-ink);
	border-radius: 8px;
	padding: 9px 12px;
}
.dwc-inne .dwc-nizej { display: none; }
@container (max-width: 899px) {
	.dwc-inne .dwc-obok { display: none; }
	.dwc-inne .dwc-nizej { display: inline; }
}
.dwc-st { stroke: var(--ink, #18201C); stroke-width: 1.4; cursor: pointer; transition: opacity .12s; }
.dwc-plan.dwc-hl .dwc-st { opacity: .22; }
.dwc-plan.dwc-hl .dwc-st.dwc-on { opacity: 1; }
.dwc-st-obrys { fill: var(--brand, #1F5A3D); fill-opacity: .16; stroke: var(--brand, #1F5A3D); stroke-width: 3.5; stroke-linejoin: round; pointer-events: none; }
.dwc-st:focus-visible { outline: none; stroke: var(--brand, #1F5A3D); stroke-width: 3; }
.dwc-st-front { stroke: var(--ink, #18201C); stroke-width: 2.4; pointer-events: none; }
.dwc-st-nr { font: 500 10px var(--f-mono, monospace); fill: var(--ink, #18201C); pointer-events: none; }
.dwc-bieg { stroke: var(--brand, #1F5A3D); stroke-width: 1.5; stroke-dasharray: 5 4; fill: none; pointer-events: none; }
.dwc-sciana { stroke: var(--dwc-sciana); stroke-width: 6; fill: none; stroke-linecap: square; pointer-events: none; }
.dwc-scianka { fill: var(--dwc-sciana); pointer-events: none; }
.dwc-slup { fill: var(--ink, #18201C); }
.dwc-strz { stroke: var(--brand, #1F5A3D); stroke-width: 2; fill: none; }
.dwc-strz-g { fill: var(--brand, #1F5A3D); }
.dwc-plan-op { font: 500 11px var(--f-mono, monospace); fill: var(--muted, #5D6862); }
.dwc-plan-tytul { font: 600 14px var(--f-body, sans-serif); fill: var(--ink, #18201C); }

.dwc-k1-karty { display: grid; gap: 12px; min-width: 0; }
.dwc-k1-karty .dwc-shapes-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
@container (max-width: 520px) {
	.dwc-k1-karty .dwc-shapes-grid { grid-template-columns: minmax(0, 1fr); }
}
.dwc-shape-choice.dwc-karta {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	text-align: left;
	max-width: none;
	padding: 14px;
	border-width: 1.5px;
	border-radius: 12px;
	color: var(--ink, #18201C);
	font: inherit;
}
.dwc-shape-choice.dwc-karta:hover, .dwc-shape-choice.dwc-karta.dwc-on { border-color: var(--brand, #1F5A3D); transform: none; }
.dwc-karta:focus-visible { outline: 3px solid var(--oak, #A2692F); outline-offset: 2px; }
.dwc-karta .dwc-shape-thumb { width: 96px; height: 72px; }
.dwc-karta .dwc-shape-thumb polygon { stroke: var(--oak, #A2692F); stroke-width: 2; }
.dwc-karta .dwc-shape-thumb polygon.dwc-k-rect { fill: var(--dwc-k-rect); }
.dwc-karta .dwc-shape-thumb polygon.dwc-k-quad { fill: var(--dwc-k-quad); }
.dwc-karta .dwc-shape-thumb polygon.dwc-k-tri { fill: var(--dwc-k-tri); }
.dwc-karta .dwc-shape-thumb polygon.dwc-k-free { fill: var(--dwc-k-free); }
.dwc-karta-nosek { stroke: var(--brand, #1F5A3D); stroke-width: 5; stroke-linecap: round; }
.dwc-karta .dwc-shape-thumb text { font: 600 10px var(--f-body, sans-serif); fill: var(--brand, #1F5A3D); }
.dwc-karta-tekst { display: grid; gap: 4px; min-width: 0; }
.dwc-karta-tekst b { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.dwc-karta-tekst b i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--ink, #18201C); flex: none; }
.dwc-karta-tekst small { font-size: 13px; color: var(--muted, #5D6862); font-weight: 400; }
.dwc-karta-tekst em { font: 500 11px var(--f-mono, monospace); font-style: normal; color: var(--oak, #A2692F); }
.dwc-pomoc {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	font-size: 14px;
	background: var(--bg, #F5F4F0);
	border: 1px solid var(--line, #DDDCD5);
	border-radius: 10px;
	padding: 12px 14px;
}
.dwc-pomoc a { color: var(--brand, #1F5A3D); font-weight: 600; }

/* Kroki 2–4 */
.dwc-wybrany { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 15px; margin-bottom: 6px; }
.dwc-link { background: none; border: 0; padding: 0; color: var(--brand, #1F5A3D); font: 600 14px var(--f-body, sans-serif); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dwc-col-nr {
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--brand, #1F5A3D);
	color: var(--brand-ink, #FFFFFF);
	font: 600 12px var(--f-mono, monospace);
	letter-spacing: 0;
}
.dwc-col-zamowienie .dwc-col-tyt.dwc-col-tyt-koszyk { margin-top: 22px; }
.dwc-shape-choice.dwc-karta span, .dwc-karta-tekst small, .dwc-karta-tekst em { text-align: left; }
.dwc-karta-tekst b { justify-content: flex-start; }
.dwc-co { background: var(--bg, #F5F4F0); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 13.5px; }
.dwc-co ol { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.dwc-katy { margin: 6px 0 14px; }
.dwc-katy summary { cursor: pointer; color: var(--brand, #1F5A3D); font: 600 14px var(--f-body, sans-serif); margin-bottom: 8px; }
@media (max-width: 760px) {
	.dwc-kroki ol { grid-template-columns: repeat(4, auto); overflow-x: auto; }
	.dwc-kroki small { display: none; }
	.dwc-kroki button { padding: 6px 10px; }
	.dwc-kroki li:not(.dwc-akt) b { display: none; }
}