/* EVA Master - sklep. Kierunek: EVA Master Warsztat. */

:root {
	--bg: #0B0B0C;
	--surface: #141415;
	--surface-alt: #1C1C1D;
	--ink: #F4F3F1;
	--ink-soft: #D7D5D1;
	--muted: #9B9995;
	--line: #2A2A2B;
	--accent: #FF6B00;
	--accent-hover: #FF7D1F;
	--accent-deep: #C24E00;
	--error: #FF8A5C;
	--font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Barlow', system-ui, sans-serif;
	--s-sm: 12px; --s-md: 20px; --s-lg: 36px; --s-xl: 64px; --s-xxl: 104px;
	--r-sm: 6px; --r-md: 14px; --r-lg: 24px; --r-pill: 999px;
	--wrap: 1200px; --gutter: 20px;
}

:where(body) *, :where(body) *::before, :where(body) *::after { box-sizing: border-box; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

body ::selection { background: var(--accent); color: #0B0B0C; }
body :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }
body img, body video { max-width: 100%; height: auto; display: block; }
body a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: -0.005em;
	margin: 0 0 var(--s-md);
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }


/* Przyciski */
.btn, body .button, body button.button, body a.button,
body .woocommerce-button, body input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 14px 28px;
	min-height: 48px;
	border-radius: var(--r-pill);
	border: 1px solid transparent;
	background: var(--accent);
	color: #0B0B0C;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease, border-color .18s ease;
}
.btn:hover, body .button:hover, body a.button:hover, body input[type="submit"]:hover { background: var(--accent-hover); color: #0B0B0C; }
.btn:active, body .button:active { transform: translateY(1px); background: var(--accent-deep); }
.btn[disabled], body .button[disabled] { opacity: .4; cursor: not-allowed; }

.btn--ghost, body .button.wc-backward {
	background: transparent;
	color: var(--ink);
	border-color: var(--line);
}
.btn--ghost:hover, body .button.wc-backward:hover { background: rgba(244,243,241,.05); color: var(--ink); border-color: var(--muted); }

/* Kontener tresci */
.swrap { padding-block: var(--s-xl) var(--s-xxl); min-height: 50vh; }

body .woocommerce-breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: var(--s-lg); }
body .woocommerce-breadcrumb a:hover { color: var(--accent); }

/* Komunikaty */
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
	color: var(--ink);
	padding: var(--s-md);
	margin-bottom: var(--s-lg);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-sm);
}
body .woocommerce-error { border-left-color: var(--error); }
body .woocommerce-message::before, body .woocommerce-info::before, body .woocommerce-error::before { display: none; }
body .woocommerce-message .button { margin-inline-start: auto; }

@media (max-width: 900px) {
	.swrap { padding-block: var(--s-lg) var(--s-xl); }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Strona produktu (wlasny szablon) ----------
   Sticky dziala w obrebie .pdp__top i tam sie zatrzymuje.
   Wczesniej zdjecie "jezdzilo" az pod sekcje z filmami,
   bo jego obszar w siatce obejmowal cala strone produktu. */
.pdp { padding-block: var(--s-lg) var(--s-xxl); }

.pdp__crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: var(--s-md); }
.pdp__crumbs a { color: var(--muted); }
.pdp__crumbs a:hover { color: var(--accent); }
.pdp__notices:empty { display: none; }

.pdp__top {
	display: grid;
	/* Podglad 40%, konfigurator 60%. Proporcje zamiast sztywnych pikseli,
	   zeby obie kolumny rosly razem z szerokoscia strony. */
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--s-xl);
	align-items: start;
}

.pdp__media {
	position: sticky;
	top: calc(var(--head-h) + 16px);
	align-self: start;
}

.pdp__intro { margin-top: var(--s-md); }
.pdp__title { font-size: 27px; margin-bottom: 8px; }
.pdp__lead { color: var(--ink-soft); font-size: 15px; margin: 0 0 var(--s-md); }
.pdp__usp { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pdp__usp li {
	position: relative;
	padding-left: 22px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.4;
}
.pdp__usp li::before {
	content: '';
	position: absolute;
	left: 0; top: 6px;
	width: 6px; height: 10px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
}

@media (max-width: 1100px) {
	.pdp__top { grid-template-columns: 1fr; gap: var(--s-lg); }
	.pdp__media { position: static; max-width: 420px; }
}
/* ---------- Koszyk ---------- */
body .woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	margin-bottom: var(--s-lg);
}
body .woocommerce table.shop_table th {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
	text-align: left;
	padding: 14px var(--s-md);
	border-bottom: 1px solid var(--line);
}
body .woocommerce table.shop_table td {
	padding: var(--s-md);
	border-top: 1px solid var(--line);
	vertical-align: top;
}
body .woocommerce table.shop_table img { width: 72px; border-radius: var(--r-sm); }
body .woocommerce table.shop_table .product-name a { font-family: var(--font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; }
body .woocommerce table.shop_table .product-name a:hover { color: var(--accent); }
body .woocommerce .variation, body .wc-item-meta {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 3px;
	font-size: 14px;
	color: var(--muted);
}
body .woocommerce .variation dt, body .wc-item-meta strong {
	font-weight: 600;
	color: var(--ink-soft);
	float: none;
	margin: 0;
}
body .woocommerce .variation dd, body .wc-item-meta li > p { margin: 0 0 4px; }
body .woocommerce .variation dt, body .woocommerce .variation dd { display: inline; }
body .woocommerce .variation dd::after { content: ''; display: block; }
body .woocommerce .quantity input.qty {
	width: 74px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	padding: 10px;
	font: inherit;
	text-align: center;
}
body .woocommerce a.remove {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: var(--line);
	color: var(--ink) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}
body .woocommerce a.remove:hover { background: var(--error); color: #0B0B0C !important; }
body .woocommerce .cart-collaterals, body .cart_totals { margin-top: var(--s-lg); }
body .cart_totals h2, body .woocommerce-checkout h3, body #order_review_heading { font-size: 26px; }
body .woocommerce .actions .coupon { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--s-sm); }
body .woocommerce .actions .coupon input {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	padding: 12px 14px;
	font: inherit;
	min-height: 48px;
}
body .woocommerce-cart-form__contents { display: block; }

/* ---------- Zamowienie ---------- */
body .woocommerce form .form-row { display: grid; gap: 6px; margin-bottom: var(--s-sm); padding: 0; }
body .woocommerce form .form-row label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
body .woocommerce form .form-row .required { color: var(--accent); border: 0; }
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .select2-container--default .select2-selection--single {
	width: 100%;
	background: var(--surface-alt) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-sm) !important;
	color: var(--ink) !important;
	font: inherit;
	padding: 12px 14px;
	min-height: 48px;
}
body .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 24px; padding: 0; }
body .select2-dropdown { background: var(--surface); border-color: var(--line); color: var(--ink); }
body .select2-container--default .select2-results__option--highlighted { background: var(--accent); color: #0B0B0C; }
body .woocommerce form .form-row input:focus,
body .woocommerce form .form-row textarea:focus,
body .woocommerce form .form-row select:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(255,107,0,.2);
	outline: none;
}
body .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-lg); }
body .woocommerce-checkout .col2-set .col-1,
body .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
body #customer_details { margin-bottom: var(--s-lg); }
body .woocommerce-checkout-review-order,
body .woocommerce-order-details,
body .woocommerce-customer-details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-md);
}
body .woocommerce-checkout-review-order table.shop_table { border: 0; background: none; margin: 0; }
body #payment { background: none; border-radius: 0; }
body #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 var(--s-md); border: 0; display: grid; gap: 8px; }
body #payment ul.payment_methods li {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	padding: 14px var(--s-md);
}
body #payment div.payment_box { background: transparent; color: var(--muted); font-size: 14px; padding: 10px 0 0; margin: 0; }
body #payment div.payment_box::before { display: none; }
body .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--s-sm); font-size: 14px; color: var(--muted); }
body #place_order { width: 100%; }
body .woocommerce-thankyou-order-received { font-family: var(--font-display); font-weight: 800; font-size: 30px; text-transform: uppercase; color: var(--accent); }
body ul.order_details { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-lg); margin: var(--s-lg) 0; }
body ul.order_details li { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
body ul.order_details li strong { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: 0; color: var(--ink); margin-top: 4px; }

/* ---------- Moje konto ---------- */
body .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 var(--s-lg); display: flex; flex-wrap: wrap; gap: 6px; }
body .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 15px;
	color: var(--muted);
}
body .woocommerce-MyAccount-navigation li.is-active a { background: var(--accent); border-color: var(--accent); color: #0B0B0C; }
body .woocommerce-MyAccount-navigation, body .woocommerce-MyAccount-content { width: auto; float: none; }

/* ---------- Sklep / katalog ---------- */
body ul.products { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-md); }
body ul.products li.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-md); margin: 0; width: auto; float: none; }
body ul.products li.product img { border-radius: var(--r-sm); margin-bottom: var(--s-sm); }
body ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; margin-bottom: 6px; }
body ul.products li.product .price { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 20px; display: block; margin-bottom: var(--s-sm); }
body .woocommerce-result-count, body .woocommerce-ordering { color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
	body .woocommerce-checkout .col2-set { grid-template-columns: 1fr; }
	body .woocommerce table.shop_table thead { display: none; }
	body .woocommerce table.shop_table tr { display: grid; gap: 6px; padding: var(--s-md); border-top: 1px solid var(--line); }
	body .woocommerce table.shop_table td { display: flex; justify-content: space-between; gap: var(--s-sm); border: 0; padding: 4px 0; }
	body .woocommerce table.shop_table td::before { content: attr(data-title); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; color: var(--muted); }
	body .woocommerce table.shop_table td.product-remove::before { display: none; }
}
/* Motyw dokłada własny pusty nagłówek i stopkę - na sklepie są zbędne. */
body.woocommerce-page #masthead,
body.woocommerce-page #colophon,
body.woocommerce-page .skip-link { display: none !important; }
body.woocommerce-page #wrapper > #inner-wrap { padding: 0; }

/* ---------- Konfigurator ----------
   Gestszy niz reszta serwisu: to narzedzie do klikania, nie tresc do czytania. */
.cfgx-wrap { scroll-margin-top: var(--head-h); }
.cfgx-wrap__title { font-size: 30px; margin-bottom: 4px; }
.cfgx-wrap__title em { font-style: normal; color: var(--accent); }
.cfgx-wrap__lead { color: var(--muted); font-size: 15px; margin: 0 0 var(--s-md); }

.cfgx { display: block; font-size: 15px; }

/* Kroki */
.cfgx__steps { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 10px; padding: 0; counter-reset: cfg; }
.cfgx__steps li {
	counter-increment: cfg;
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--muted); cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}
.cfgx__steps li::before { content: counter(cfg); display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--line); color: var(--bg); font-size: 11px; }
.cfgx__steps li:hover { color: var(--ink); }
.cfgx__steps li.is-active { color: var(--ink); border-color: var(--accent); }
.cfgx__steps li.is-active::before { background: var(--accent); }
.cfgx__steps li.is-done::before { background: var(--accent-deep); color: var(--ink); }

/* Panele */
.cfgx__panel { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-md); margin-bottom: 10px; }
.cfgx__panel.is-active { display: block; }
.cfgx__h { font-size: 20px; margin-bottom: 2px; }
.cfgx__free { color: var(--accent); font-size: .6em; letter-spacing: .1em; }
.cfgx__lead { color: var(--muted); font-size: 14px; margin: 0 0 var(--s-sm); max-width: 70ch; }
.cfgx__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: var(--s-sm) 0 5px; }
.cfgx__input { width: 100%; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); font: inherit; padding: 9px 12px; min-height: 40px; }
.cfgx__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,0,.2); outline: none; }
.cfgx__hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* Krok 1 */


.cfgx__picked[hidden] { display: none; }
.cfgx__picked { display: flex; align-items: center; gap: var(--s-sm); margin-top: 10px; padding: 10px 14px; background: var(--surface-alt); border: 1px solid var(--accent); border-radius: var(--r-sm); }
.cfgx__picked-name { flex: 1; font-weight: 600; }
.cfgx__change { background: none; border: 0; color: var(--accent); cursor: pointer; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }

.cfgx__nocar { margin-top: var(--s-md); padding-top: var(--s-sm); border-top: 1px solid var(--line); }
.cfgx__nocar-q { font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; color: var(--ink); margin: 0 0 2px; }
.cfgx__nocar-a { color: var(--muted); font-size: 14px; margin: 0 0 10px; max-width: 62ch; }
.cfgx__nocar-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.cfgx__nocar-cta .btn { font-size: 14px; padding: 9px 16px; min-height: 38px; }

/* Krok 2 */
.cfgx__sets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.setc { position: relative; display: block; cursor: pointer; }
.setc input { position: absolute; opacity: 0; pointer-events: none; }
.setc__body { display: grid; gap: 2px; align-content: start; height: 100%; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm); transition: border-color .15s ease; }
.setc:hover .setc__body { border-color: var(--muted); }
.setc input:checked + .setc__body { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.setc__tag { justify-self: start; font-family: var(--font-display); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.setc__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; line-height: 1.1; }
.setc__desc { color: var(--muted); font-size: 13px; line-height: 1.35; }
.setc__price { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--accent); margin-top: auto; padding-top: 4px; }
.setc__off { display: none; font-size: 12px; color: var(--muted); margin-top: auto; padding-top: 4px; }
.setc.is-off { opacity: .4; cursor: not-allowed; }
.setc.is-off .setc__price { display: none; }
.setc.is-off .setc__off { display: block; }

/* Krok 3 */
.cfgx__look { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-md); align-items: start; }
.cfgx__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: block; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #0B0B0C; }

.cfgx__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.sw { cursor: pointer; text-align: center; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw__dot { display: block; aspect-ratio: 1; border-radius: var(--r-sm); border: 2px solid var(--line); transition: border-color .15s ease, transform .15s ease; }
.sw:hover .sw__dot { transform: translateY(-2px); }
.sw input:checked + .sw__dot { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255,107,0,.25); }
.sw__name { display: block; margin-top: 4px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.sw input:checked ~ .sw__name { color: var(--ink); }

/* Krok 4 */
.cfgx__addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.addon { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; font-size: 14px; }
.addon:has(input:checked) { border-color: var(--accent); }
.addon input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.addon__name { flex: 1; line-height: 1.3; }
.addon__price { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--accent); white-space: nowrap; }
.addon__qty { width: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); padding: 5px; font: inherit; font-size: 14px; }
.cfgx__panel textarea.cfgx__input { max-width: 100%; }

/* Pasek ceny */
.cfgx__sum {
	position: sticky; bottom: 0; z-index: 20;
	background: rgba(20,20,21,.96);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid var(--line); border-radius: var(--r-md);
	padding: 10px var(--s-md);
}
.cfgx__sum-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-md); }
.cfgx__sum-rows { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 8px; min-width: 200px; }
.cfgx__empty { color: var(--muted); font-size: 13px; margin: 0; }
.cfgx__row { display: inline-flex; gap: 6px; color: var(--ink-soft); font-size: 13px; padding: 3px 10px; background: var(--surface-alt); border-radius: var(--r-pill); }
.cfgx__row span:last-child { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cfgx__sum-buy { display: flex; align-items: center; gap: var(--s-sm); flex: 0 0 auto; }
.cfgx__total { display: flex; align-items: baseline; gap: 8px; }
.cfgx__total span { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cfgx__total strong { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--accent); line-height: 1; }
.cfgx__submit { white-space: nowrap; font-size: 15px; padding: 11px 22px; min-height: 42px; }
.cfgx__sum-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.cfgx__ship, .cfgx__note { font-size: 12px; color: var(--muted); margin: 0; }
.cfgx__ship.is-free { color: var(--accent); font-weight: 600; }
.cfgx__err { color: var(--error); font-size: 14px; margin: 0; }

@media (max-width: 1100px) {
	.cfgx__sets { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.cfgx__sets, .cfgx__addons { grid-template-columns: 1fr; }
	.cfgx__sum { margin-inline: calc(var(--gutter) * -1); border-radius: var(--r-md) var(--r-md) 0 0; border-inline: 0; border-bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
	.cfgx__sum-buy { width: 100%; justify-content: space-between; }
	.cfgx__submit { flex: 1; }
	.cfgx__sum-rows { display: none; }
}
.cfgx__look > div > .cfgx__label:first-child { margin-top: 0; }
.cfgx__panel > .cfgx__label:first-of-type { margin-top: var(--s-sm); }

/* Nawigacja miedzy krokami */
.cfgx__nav {
	display: flex;
	align-items: center;
	gap: var(--s-sm);
	margin-top: var(--s-md);
	padding-top: var(--s-sm);
	border-top: 1px solid var(--line);
}
.cfgx__nav > span:first-child { flex: 0 0 auto; }
.cfgx__navhint {
	flex: 1;
	text-align: right;
	font-size: 13px;
	color: var(--muted);
	opacity: 0;
	transition: opacity .15s ease;
}
.cfgx__navhint.is-on { opacity: 1; }
.cfgx__back, .cfgx__next {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 9px 20px;
	min-height: 38px;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.cfgx__back { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.cfgx__back:hover { border-color: var(--muted); background: rgba(244,243,241,.05); }
.cfgx__next { background: var(--accent); border: 1px solid transparent; color: #0B0B0C; margin-inline-start: auto; }
.cfgx__next:hover:not(:disabled) { background: var(--accent-hover); }
.cfgx__next:disabled { opacity: .35; cursor: not-allowed; }
.cfgx__nav:has(.cfgx__navhint) .cfgx__next { margin-inline-start: 0; }

/* Krok niedostepny, dopoki poprzedni nie jest uzupelniony */
.cfgx__steps li.is-locked { opacity: .4; cursor: not-allowed; }
.cfgx__steps li.is-locked:hover { color: var(--muted); }

@media (max-width: 520px) {
	.cfgx__navhint { display: none; }
	.cfgx__nav .cfgx__next { margin-inline-start: auto; }
	.cfgx__back, .cfgx__next { flex: 1; justify-content: center; }
}
/* Galeria produktu */
/* Zanim suwak sie uruchomi, pokazujemy tylko pierwsze zdjecie -
   inaczej przez moment widac wszystkie szesc jedno pod drugim. */
/* Rozwijany wybor auta: marka -> model, z wyszukiwarka w srodku */
.cbx { position: relative; }
.cbx[hidden] { display: none; }

.cbx__toggle {
	display: flex;
	align-items: center;
	gap: var(--s-sm);
	width: 100%;
	padding: 11px 14px;
	min-height: 46px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease;
}
.cbx__toggle:hover { border-color: var(--muted); }
.cbx__toggle[aria-expanded="true"] { border-color: var(--accent); }
.cbx__toggle-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbx__caret {
	flex: 0 0 auto;
	width: 8px; height: 8px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .18s ease;
}
.cbx__toggle[aria-expanded="true"] .cbx__caret { transform: rotate(-135deg) translate(-3px, -3px); border-color: var(--accent); }

.cbx__panel {
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0; right: 0;
	background: var(--surface);
	border: 1px solid var(--accent);
	border-radius: var(--r-md);
	box-shadow: 0 18px 40px rgba(11,11,12,.6);
	overflow: hidden;
	animation: cbxIn .16s ease;
}
.cbx__panel[hidden] { display: none; }
@keyframes cbxIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cbx__head { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-bottom: 1px solid var(--line); }
.cbx__back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 2px 0;
	color: var(--accent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
}
.cbx__back[hidden] { display: none; }
.cbx__back::before { content: ''; width: 7px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.cbx__search {
	width: 100%;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	padding: 9px 12px;
	min-height: 40px;
}
.cbx__search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,0,.2); outline: none; }

.cbx__list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.cbx__list:empty { display: none; }
.cbx__row {
	display: flex;
	align-items: baseline;
	gap: var(--s-sm);
	width: 100%;
	padding: 9px 14px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color .12s ease;
}
.cbx__row:last-child { border-bottom: 0; }
.cbx__row:hover, .cbx__row:focus-visible { background: var(--surface-alt); }
.cbx__row.is-off { opacity: .4; cursor: not-allowed; }
.cbx__name { flex: 1; font-size: 14px; line-height: 1.35; }
.cbx__meta { flex: 0 0 auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cbx__row--brand .cbx__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; }
.cbx__row--brand::after { content: ''; width: 6px; height: 6px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); align-self: center; }

.cbx__msg { margin: 0; padding: 14px; font-size: 14px; color: var(--muted); }
.cbx__msg[hidden] { display: none; }
/* Dopoki nie ma ceny, nie pokazujemy pustego "Razem". */
.cfgx__total.is-empty { display: none; }
/* Gdy lista aut jest otwarta, pasek ceny schodzi z drogi. */
.cfgx.is-picking .cfgx__sum { opacity: .25; pointer-events: none; }
.cbx__brandhead { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.cbx__brandhead[hidden] { display: none; }
.cbx__brandhead b { font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.cbx__brandhead span { font-size: 13px; color: var(--muted); }

.cbx__headtop { display: none; align-items: center; gap: var(--s-sm); }
.cbx__title { flex: 1; font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase; letter-spacing: .05em; }
.cbx__close { display: none; }
/* ==========================================================
   TELEFON. Zalozenia:
   1. Konfigurator ma byc od razu pod zdjeciem, a nie pod opisem.
   2. Wybor auta to pelnoekranowy arkusz - lista 2000 pozycji
      nie miesci sie w rozwijanym okienku nad klawiatura.
   3. Kazdy element dotykowy ma min. 44px.
   4. Nic nie moze zaslaniac paska z cena i przyciskiem zakupu.
   ========================================================== */

@media (max-width: 860px) {

	/* Blokada przewijania tla przy otwartym arkuszu */
	body.eva-lock { overflow: hidden; }

	/* Kolejnosc: zdjecie, konfigurator, dopiero potem opis */

	/* Zdjecie nie moze zjadac calego ekranu */

	/* Naglowek: nizszy, pasek korzysci przewijany w poziomie */
	.shead__inner { min-height: 58px; }
	.shead__strip {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		gap: var(--s-md);
		padding-block: 6px;
	}
	.shead__strip::-webkit-scrollbar { display: none; }
	.shead__strip span { white-space: nowrap; }
	.shead__burger, .shead__cart, .shead__cta { min-height: 44px; }
	.shead__nav a { min-height: 48px; display: flex; align-items: center; }

	/* Kroki: jeden rzad z przewijaniem zamiast lamania na dwa */
	.cfgx__steps {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--s-md) * -1);
		padding-inline: var(--s-md);
	}
	.cfgx__steps::-webkit-scrollbar { display: none; }
	.cfgx__steps li { flex: 0 0 auto; min-height: 40px; }

	.cfgx-wrap__title { font-size: 26px; }
	.cfgx__panel { padding: var(--s-md) 14px; }

	/* Cele dotykowe */
	.cbx__toggle { min-height: 52px; font-size: 16px; }
	.cbx__row { padding: 13px 16px; min-height: 48px; }
	.cbx__name { font-size: 15px; }
	.chip span { padding: 12px 18px; min-height: 44px; display: flex; align-items: center; }
	.addon { padding: 12px 14px; min-height: 52px; }
	.addon input[type="checkbox"] { width: 22px; height: 22px; }
	.setc__body { padding: 14px; }
	.cfgx__back, .cfgx__next { min-height: 46px; }
	.cfgx__change { min-height: 44px; padding-inline: 4px; }

	/* Pola formularza: 16px, inaczej iOS przybliza strone przy focusie */
	.cfgx__input, .cbx__search, .addon__qty { font-size: 16px; }

	/* --- Pelnoekranowy wybor auta --- */
	.cbx__panel {
		position: fixed;
		inset: 0;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: var(--bg);
		animation: cbxSheet .2s ease;
	}
	@keyframes cbxSheet { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

	.cbx__head {
		flex: 0 0 auto;
		gap: 10px;
		padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 10px;
		background: var(--surface);
	}
	.cbx__headtop { display: flex; }
	.cbx__close {
		display: grid;
		place-items: center;
		width: 44px; height: 44px;
		flex: 0 0 auto;
		border: 1px solid var(--line);
		border-radius: 50%;
		background: transparent;
		color: var(--ink);
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}
	.cbx__back { min-height: 44px; }
	.cbx__back:not([hidden]) ~ .cbx__title { display: none; }
	.cbx__search { min-height: 48px; }

	.cbx__list {
		flex: 1;
		max-height: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: calc(var(--s-lg) + env(safe-area-inset-bottom));
	}
	.cbx__brandhead { flex: 0 0 auto; padding: 10px var(--gutter); }
	.cbx__msg { flex: 0 0 auto; }

	/* Pasek ceny nie przygasa, bo arkusz i tak zakrywa caly ekran */
	.cfgx.is-picking .cfgx__sum { opacity: 1; pointer-events: auto; }

	/* Pasek ceny: cena i przycisk w jednym rzedzie, przycisk szeroki */
	.cfgx__sum { padding: 10px var(--gutter); }
	.cfgx__sum-main { flex-wrap: nowrap; align-items: center; gap: var(--s-sm); }
	.cfgx__sum-buy { width: 100%; gap: var(--s-sm); }
	.cfgx__total { flex: 0 0 auto; flex-direction: column; align-items: flex-start; gap: 0; }
	.cfgx__total span { font-size: 11px; }
	.cfgx__total strong { font-size: 26px; }
	.cfgx__submit { flex: 1; min-height: 50px; font-size: 16px; }
	.cfgx__sum-foot { gap: 2px; }
	.cfgx__sum-foot .cfgx__note { display: none; }

	/* Kotwice pod przyklejonym naglowkiem */
	.cfgx-wrap, .cfgx__panel { scroll-margin-top: 120px; }
	.pdp { padding-block: var(--s-md) var(--s-xl); }
	.pdp__title { font-size: 23px; }
}

@media (max-width: 420px) {
	.shead__cta { display: none; }
	.cbx__title { font-size: 16px; }
	.cfgx__total strong { font-size: 23px; }
	.cfgx__submit { font-size: 15px; padding-inline: 14px; }
}

/* Podswietlenie dotkniecia zamiast szarego prostokata systemowego */
@media (hover: none) {
	body { -webkit-tap-highlight-color: rgba(255,107,0,.18); }
	.cbx__row:active, .setc:active .setc__body, .addon:active { background: var(--surface); }
}
/* ---------- Konfiguracja przy pozycji koszyka ---------- */
.evaspec {
	list-style: none;
	margin: 10px 0 0;
	padding: 10px 14px;
	display: grid;
	gap: 5px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
}
.evaspec__row { display: flex; gap: var(--s-sm); align-items: baseline; font-size: 14px; }
.evaspec__k {
	flex: 0 0 118px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.evaspec__v { flex: 1; display: flex; align-items: center; gap: 8px; color: var(--ink); line-height: 1.4; }
.evaspec__dot {
	flex: 0 0 auto;
	width: 15px; height: 15px;
	border-radius: 4px;
	border: 1px solid var(--line);
}
.evaspec__note { font-style: normal; font-size: 12px; color: var(--muted); }
.evaspec__edit {
	display: inline-block;
	margin-top: 8px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	border-bottom: 1px solid transparent;
}
.evaspec__edit:hover { border-bottom-color: var(--accent); }

/* ---------- Pasek do darmowej dostawy ---------- */
.shipbar {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px var(--s-md);
	margin-bottom: var(--s-md);
}
.shipbar.is-done { border-color: var(--accent); }
.shipbar__txt { margin: 0 0 8px; font-size: 15px; color: var(--muted); }
.shipbar__txt strong { color: var(--accent); font-family: var(--font-display); font-size: 19px; }
.shipbar.is-done .shipbar__txt { color: var(--ink); }
.shipbar__track { height: 6px; background: var(--surface-alt); border-radius: var(--r-pill); overflow: hidden; }
.shipbar__track span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .3s ease; }

/* ---------- Pusty koszyk ---------- */
.emptycart { text-align: center; padding: var(--s-xl) var(--s-md); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.emptycart h2 { font-size: 30px; margin-bottom: 8px; }
.emptycart p { color: var(--muted); margin: 0 0 var(--s-md); }

/* ---------- Kroki zamowienia ---------- */

/* ---------- Podziekowanie ---------- */
.thanksbox {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
	padding: var(--s-md);
	margin: var(--s-lg) 0;
}
.thanksbox h2 { font-size: 22px; margin-bottom: 10px; }
.thanksbox__list { margin: 0 0 var(--s-sm); padding-left: 20px; color: var(--ink-soft); display: grid; gap: 6px; }
.thanksbox__contact { margin: 0; color: var(--muted); font-size: 15px; }
.thanksbox__contact a { color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 18px; }

/* Metody platnosci: wybrana ma byc widoczna */
body #payment ul.payment_methods li:has(input:checked) { border-color: var(--accent); }
body #payment ul.payment_methods label { cursor: pointer; font-weight: 600; }
body #payment ul.payment_methods input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; margin-right: 8px; }

/* Metody wysylki w podsumowaniu */
body #shipping_method { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
body #shipping_method li { margin: 0; padding: 10px 12px; background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--r-sm); }
body #shipping_method li:has(input:checked) { border-color: var(--accent); }
body #shipping_method input[type="radio"] { accent-color: var(--accent); width: 17px; height: 17px; margin-right: 6px; }
body #shipping_method label { cursor: pointer; }
body .woocommerce-shipping-destination { font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
	.evaspec { padding: 10px 12px; }
	.evaspec__row { flex-direction: column; gap: 2px; }
	.evaspec__k { flex: none; }
	.emptycart h2 { font-size: 24px; }
}
/* ---------- Galeria produktu ---------- */
.evagal { display: grid; gap: 8px; }
.evagal__stage {
	position: relative;
	aspect-ratio: 1;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
}
.evagal__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity .2s ease;
}
.evagal.is-swapping .evagal__img { opacity: .35; }

.evagal__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}
.evagal__thumbs li { margin: 0; }
.evagal__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid var(--line);
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
	cursor: pointer;
	line-height: 0;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .6;
}
.evagal__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.evagal__thumb:hover { opacity: .9; }
.evagal__thumb.is-active { border-color: var(--accent); opacity: 1; }

/* ---------- Sekcja z filmami ---------- */
.evawhy { margin-top: var(--s-xl); padding-top: var(--s-xl); border-top: 1px solid var(--line); }
.evawhy__title { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 4px; }
.evawhy__title em { font-style: normal; color: var(--accent); }
.evawhy__lead { color: var(--muted); margin: 0 0 var(--s-lg); }

.evawhy__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
.evafilm__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-alt);
	margin-bottom: var(--s-sm);
}
.evafilm__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.evafilm__title { font-size: 22px; margin-bottom: 4px; }
.evafilm__text { color: var(--muted); font-size: 15px; margin: 0; }

/* Panel temperatury: kontrast skali zamiast kolejnej karty */
.evatemp {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--s-xl);
	align-items: center;
	margin-top: var(--s-xl);
	padding-top: var(--s-lg);
	border-top: 1px solid var(--line);
}
.evatemp__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(48px, 7vw, 92px);
	line-height: .9;
	color: var(--accent);
	letter-spacing: -0.02em;
	margin: 0;
	white-space: nowrap;
}
.evatemp__value span { font-size: .42em; color: var(--ink); }
.evatemp__title { font-size: 24px; margin-bottom: 6px; max-width: 24ch; }
.evatemp p { color: var(--muted); margin: 0; max-width: 62ch; }

.evafacts {
	list-style: none;
	margin: var(--s-lg) 0 0;
	padding: var(--s-lg) 0 0;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--s-md);
}
.evafacts li { display: flex; flex-direction: column; gap: 3px; }
.evafacts b { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--accent); }
.evafacts span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

@media (max-width: 1100px) {
	.evawhy { margin-top: var(--s-lg); padding-top: var(--s-lg); }
}

@media (max-width: 860px) {
	.evagal__thumbs { grid-template-columns: repeat(6, 1fr); gap: 5px; }
	.evawhy__grid { grid-template-columns: 1fr; gap: var(--s-lg); }
	.evafilm { display: grid; grid-template-columns: 130px 1fr; gap: var(--s-md); align-items: center; }
	.evafilm__media { margin-bottom: 0; }
	.evafilm__title { font-size: 19px; }
	.evafilm__text { font-size: 14px; }
	.evatemp { grid-template-columns: 1fr; gap: var(--s-sm); margin-top: var(--s-lg); }
	.evafacts { grid-template-columns: repeat(2, 1fr); }
	.evafacts b { font-size: 25px; }
}
/* ---------- Koszyk / zamówienie / konto: wspólny dokument ---------- */
.sdoc { padding-block: var(--s-lg) var(--s-xxl); }
.sdoc__head { margin-bottom: var(--s-lg); }
.sdoc__title { font-size: clamp(30px, 4vw, 46px); margin-bottom: 4px; }
.sdoc__sub { color: var(--muted); margin: 0; }

/* Pozycja koszyka: zdjęcie, nazwa, konfiguracja, cena */
body .woocommerce table.shop_table td.product-price,
body .woocommerce table.shop_table td.product-subtotal {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	color: var(--accent);
	white-space: nowrap;
}
body .woocommerce table.shop_table td.product-subtotal { font-size: 22px; }

/* Podsumowanie koszyka obok listy pozycji */
body .cart_totals {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-md);
	width: 100%;
	float: none;
}
body .cart_totals h2 { font-size: 22px; margin-bottom: var(--s-sm); }
body .cart_totals table { width: 100%; border: 0; background: none; margin: 0; }
body .cart_totals th, body .cart_totals td { padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 0; }
body .cart_totals tr:first-child th, body .cart_totals tr:first-child td { border-top: 0; }
body .cart_totals .order-total th, body .cart_totals .order-total td { font-size: 20px; }
body .cart_totals .order-total .woocommerce-Price-amount { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--accent); }
body .wc-proceed-to-checkout { padding: var(--s-sm) 0 0; }
body .wc-proceed-to-checkout a.checkout-button { width: 100%; font-size: 18px; min-height: 54px; }

/* Akcje pod tabelą */

/* Zamówienie: formularz obok podsumowania */
body form.checkout .woocommerce-checkout-review-order,
body .woocommerce-checkout .col2-set { grid-template-columns: 1fr; gap: 0; }

@media (max-width: 1000px) {
	body form.checkout #customer_details,
	body form.checkout .woocommerce-checkout-review-order,
}

@media (max-width: 860px) {
	.sdoc { padding-block: var(--s-md) var(--s-xl); }
	.sdoc__title { font-size: 26px; }
	body .woocommerce table.shop_table.cart img { width: 64px; }
	body .woocommerce .cart .actions { flex-direction: column; }
	body .woocommerce .cart .actions .coupon input { flex: 1; }
	body .wc-proceed-to-checkout a.checkout-button { min-height: 52px; }
}
/* Motyw dostarczal styl dla tekstu ukrytego dla czytnikow ekranu.
   Bez niego naglowki typu "Podsumowanie koszyka" staly sie widoczne. */
.screen-reader-text, .sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Koszyk: tabela po lewej, podsumowanie po prawej. Bez floatow. */

/* Konfiguracja pozycji nie moze sie lamac po dwa slowa */
.evaspec { max-width: none; }
.evaspec__k { flex: 0 0 128px; }
.evaspec__v { min-width: 0; }

@media (max-width: 1100px) {
	body .woocommerce table.shop_table.cart td.product-name { width: auto; }
}
/* ---------- Koszyk: lista kart zamiast tabeli ---------- */
.ecart {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 350px);
	gap: var(--s-lg);
	align-items: start;
}
.ecart__form { margin: 0; }
.ecart__items { display: grid; gap: 10px; }

.ecitem {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	gap: var(--s-md);
	align-items: start;
	padding: var(--s-md);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
}
.ecitem__thumb img { width: 104px; height: 104px; object-fit: cover; border-radius: var(--r-sm); display: block; }
.ecitem__name { font-size: 20px; margin: 0 0 10px; }
.ecitem__body { min-width: 0; }

.ecitem__side { display: grid; gap: 10px; justify-items: end; text-align: right; }
.ecitem__price {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--accent);
	white-space: nowrap;
	line-height: 1;
}
.ecitem__qty { display: flex; align-items: center; gap: 8px; }
.ecitem__qty span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.ecitem__qty .quantity { display: flex; }
.ecitem__qty .quantity input[type="number"] {
	width: 68px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink);
	padding: 8px;
	font: inherit;
	text-align: center;
}
.ecitem__remove {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	border-bottom: 1px solid transparent;
}
.ecitem__remove:hover { color: var(--error); border-bottom-color: var(--error); }

/* Konfiguracja w karcie: dwie kolumny, bez lamania po jednym slowie */
.ecitem .evaspec { margin: 0; }
.ecitem .evaspec__row { align-items: baseline; }
.ecitem .evaspec__k { flex: 0 0 132px; }
.ecitem .evaspec__v { flex: 1; min-width: 0; }

.ecart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-sm);
	margin-top: var(--s-md);
}
.ecart__more {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	border-bottom: 1px solid transparent;
}
.ecart__more:hover { border-bottom-color: var(--accent); }
.ecart__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ecart__coupon { display: flex; gap: 8px; }
.ecart__coupon input {
	width: 150px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	color: var(--ink);
	padding: 10px 16px;
	font: inherit;
	font-size: 15px;
	min-height: 42px;
}
.ecart__tools .btn { font-size: 14px; padding: 10px 18px; min-height: 42px; }

/* Podsumowanie */
.ecart__side { position: sticky; top: calc(var(--head-h) + 16px); }
.ecart__side .cart_totals {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-md);
	width: auto;
	float: none;
}
.ecart__side .cart_totals h2 { font-size: 20px; margin-bottom: var(--s-sm); }
.ecart__side .cart_totals table { width: 100%; border: 0; background: none; margin: 0; border-collapse: collapse; }
.ecart__side .cart_totals th,
.ecart__side .cart_totals td {
	padding: 11px 0;
	border: 0;
	border-top: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
	font-size: 15px;
}
.ecart__side .cart_totals tr:first-child th,
.ecart__side .cart_totals tr:first-child td { border-top: 0; }
.ecart__side .cart_totals th {
	width: 40%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.ecart__side .cart_totals td { text-align: right; }
.ecart__side .order-total td .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 30px;
	color: var(--accent);
}
.ecart__side ul#shipping_method { text-align: left; }
.ecart__side .woocommerce-shipping-destination,
.ecart__side .shipping-calculator-button { font-size: 13px; color: var(--muted); }
.ecart__side .wc-proceed-to-checkout { padding: var(--s-sm) 0 0; }
.ecart__side .wc-proceed-to-checkout a.checkout-button { width: 100%; font-size: 17px; min-height: 54px; }

@media (max-width: 1100px) {
	.ecart { grid-template-columns: 1fr; }
	.ecart__side { position: static; }
}

@media (max-width: 860px) {
	.ecitem { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-sm); }
	.ecitem__thumb img { width: 72px; height: 72px; }
	.ecitem__name { font-size: 17px; }
	.ecitem__side {
		grid-column: 1 / -1;
		grid-template-columns: auto 1fr auto;
		display: grid;
		align-items: center;
		justify-items: start;
		text-align: left;
		padding-top: var(--s-sm);
		border-top: 1px solid var(--line);
	}
	.ecitem__price { font-size: 22px; }
	.ecitem__remove { justify-self: end; }
	.ecart__actions { flex-direction: column; align-items: stretch; }
	.ecart__tools { flex-direction: column; }
	.ecart__coupon input { width: auto; flex: 1; }
}
/* Strzalki liczbowe w polu ilosci tylko rozpraszaja przy jednej sztuce. */
.ecitem__qty input[type="number"] { -moz-appearance: textfield; }
.ecitem__qty input[type="number"]::-webkit-outer-spin-button,
.ecitem__qty input[type="number"]::-webkit-inner-spin-button { opacity: 1; height: 26px; }
.ecitem__qty input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,0,.2); outline: none; }

/* ---------- Zamówienie ----------
   WooCommerce wstawia <wc-order-attribution-inputs> z ukrytymi polami.
   Jako dziecko grida zajmowal komorke i spychal podsumowanie o wiersz nizej,
   przez co zaczynalo sie dopiero pod calym formularzem.
   Ukryte pola dzialaja tak samo przy display:none. */


body .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; }
body .woocommerce-checkout .col2-set .col-1,
body .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
body .woocommerce-billing-fields h3,
body .woocommerce-additional-fields h3 { font-size: 20px; margin: var(--s-lg) 0 var(--s-sm); }
body .woocommerce-billing-fields:first-child h3 { margin-top: 0; }

/* Pola w dwoch kolumnach tam, gdzie to ma sens */
body .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-md); }
body .woocommerce-billing-fields__field-wrapper > .form-row-wide,
body .woocommerce-billing-fields__field-wrapper > #billing_address_1_field,
body .woocommerce-billing-fields__field-wrapper > #billing_address_2_field,
body .woocommerce-billing-fields__field-wrapper > #billing_company_field,
body .woocommerce-billing-fields__field-wrapper > #billing_country_field { grid-column: 1 / -1; }

/* Podsumowanie zamówienia: zwarte, czytelne */
body #order_review table.shop_table th,

body #place_order { width: 100%; font-size: 18px; min-height: 56px; margin-top: var(--s-sm); }

/* Kupon i logowanie u gory */
body .woocommerce-form-coupon-toggle .woocommerce-info,
body .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: var(--s-md); }

@media (max-width: 1000px) {
	body form.checkout #customer_details,
	body form.checkout h3#order_review_heading,
}

@media (max-width: 620px) {
	body .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
}
/* ---------- Nawigacja etapów zakupu ---------- */
.costeps {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 var(--s-lg);
	padding: 0;
}
.costeps li,
.costeps li > a {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
}
.costeps li {
	padding: 10px 18px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	transition: border-color .15s ease, color .15s ease;
}
.costeps li > a { padding: 0; margin: -10px -18px; padding: 10px 18px; }
.costeps li b {
	display: grid;
	place-items: center;
	width: 21px; height: 21px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--line);
	color: var(--bg);
	font-size: 12px;
}
.costeps li.is-active { color: var(--ink); border-color: var(--accent); }
.costeps li.is-active b { background: var(--accent); }
.costeps li.is-done { color: var(--ink-soft); }
.costeps li.is-done b { background: var(--accent-deep); color: var(--ink); }
.costeps li:has(a):hover { border-color: var(--accent); }
.costeps li:has(a):hover > a { color: var(--ink); }

/* ---------- Zamówienie: jedna kolumna, podsumowanie pod formularzem ---------- */
body form.checkout wc-order-attribution-inputs { display: none; }
body form.checkout h3#order_review_heading { display: none; }

/* Kompaktowe podsumowanie kwot */
.cosum { margin-bottom: var(--s-md); }
.cosum__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.cosum__head h3 { font-size: 20px; margin: 0; }
.cosum__edit {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	border-bottom: 1px solid transparent;
}
.cosum__edit:hover { border-bottom-color: var(--accent); }
.cosum__rows { list-style: none; margin: 0; padding: 0; display: grid; }
.cosum__rows li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-md);
	padding: 11px 0;
	border-top: 1px solid var(--line);
	font-size: 15px;
	color: var(--ink-soft);
}
.cosum__rows li:first-child { border-top: 0; }
.cosum__rows li > span:first-child { color: var(--muted); }
.cosum__shipping { align-items: flex-start; }
.cosum__shipping #shipping_method { margin: 0; text-align: right; }
.cosum__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-md);
	padding-top: var(--s-sm);
	margin-top: 4px;
	border-top: 1px solid var(--line);
}
.cosum__total > span {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.cosum__total strong .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 32px;
	color: var(--accent);
}

body #place_order { width: 100%; font-size: 18px; min-height: 56px; margin-top: var(--s-sm); }

@media (max-width: 860px) {
	.costeps { gap: 6px; }
	.costeps li { flex: 1; justify-content: center; min-height: 46px; padding-inline: 8px; font-size: 12px; }
	.costeps li > a { margin: -10px -8px; padding: 10px 8px; justify-content: center; }
	.cosum__total strong .woocommerce-Price-amount { font-size: 26px; }
}
/* Uklad zamowienia: kontrolowana siatka zamiast pywajacych kolumn WooCommerce.
   Floaty dawaly waskie, sciesnione kolumny bez odstepu. */
body form.checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	column-gap: var(--s-xl);
	row-gap: var(--s-lg);
	align-items: start;
}
body form.checkout #customer_details {
	grid-column: 1;
	float: none;
	width: auto;
	margin: 0;
}
body form.checkout #order_review {
	grid-column: 2;
	float: none;
	width: auto;
	position: sticky;
	top: calc(var(--head-h) + 20px);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-lg) var(--s-md) var(--s-md);
}

/* Wiecej powietrza w formularzu */
body .woocommerce-billing-fields__field-wrapper { gap: var(--s-sm) var(--s-md); }
body .woocommerce form .form-row { margin-bottom: var(--s-md); }
body .woocommerce-billing-fields h3,
body .woocommerce-additional-fields h3 {
	font-size: 19px;
	margin: var(--s-xl) 0 var(--s-md);
	padding-bottom: var(--s-sm);
	border-bottom: 1px solid var(--line);
}
body .woocommerce-billing-fields h3 { margin-top: 0; }
body .woocommerce-additional-fields { margin-top: var(--s-lg); }

/* Odstepy w podsumowaniu */
.cosum { margin-bottom: var(--s-lg); }
.cosum__head { margin-bottom: var(--s-md); }
.cosum__rows li { padding: 13px 0; }
.cosum__total { padding-top: var(--s-md); margin-top: var(--s-sm); }
.cosum__shipping #shipping_method li { margin-bottom: 6px; }
.cosum__shipping #shipping_method li:last-child { margin-bottom: 0; }

body #payment ul.payment_methods { margin-bottom: var(--s-md); gap: 10px; }
body #payment ul.payment_methods li { padding: 15px var(--s-md); }
body .woocommerce-privacy-policy-text { margin-bottom: var(--s-md); }
body .woocommerce-privacy-policy-text p { font-size: 13px; color: var(--muted); margin: 0; }
body .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--s-md); }
body .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 0; }
body #place_order { margin-top: 0; }

/* Pasek kuponu nad formularzem */
body .woocommerce-form-coupon-toggle { margin-bottom: var(--s-lg); }

/* Wiecej powietrza wokol calej tresci */
.sdoc__head { margin-bottom: var(--s-xl); }
.costeps { margin-bottom: var(--s-xl); }

@media (max-width: 1000px) {
	body form.checkout.woocommerce-checkout { grid-template-columns: 1fr; }
	body form.checkout #customer_details,
	body form.checkout #order_review { grid-column: 1; }
	body form.checkout #order_review { position: static; }
}

@media (max-width: 860px) {
	.sdoc__head, .costeps { margin-bottom: var(--s-lg); }
	body .woocommerce-billing-fields h3,
	body .woocommerce-additional-fields h3 { margin-top: var(--s-lg); }
}
/* ==========================================================
   GESTOSC SKLEPU
   Sklep to interfejs do klikania, nie tresc do czytania.
   Skracamy skale odstepow i stopnie pisma, zeby wiecej
   miescilo sie na ekranie i dalo sie skanowac wzrokiem.
   Cele dotykowe na telefonie zostaja duze - na koncu pliku.
   ========================================================== */

body.eva-pdp, body.eva-shopdoc {
	--s-sm: 10px;
	--s-md: 16px;
	--s-lg: 24px;
	--s-xl: 36px;
	--s-xxl: 56px;
	font-size: 15px;
}

/* Naglowki stron */
.sdoc { padding-block: var(--s-md) var(--s-xl); }
.sdoc__head { margin-bottom: var(--s-md); }
.sdoc__title { font-size: 28px; margin-bottom: 2px; }
.sdoc__sub { font-size: 14px; }
.pdp { padding-block: var(--s-md) var(--s-xl); }
.pdp__crumbs, .pdp__notices { font-size: 13px; margin-bottom: 10px; }
.pdp__title { font-size: 22px; margin-bottom: 5px; }
.pdp__lead { font-size: 14px; margin-bottom: 10px; }
.pdp__usp li { font-size: 13px; padding-left: 19px; }
.pdp__intro { margin-top: 12px; }

/* Kroki zakupu */
.costeps { margin-bottom: var(--s-md); gap: 5px; }
.costeps li { padding: 7px 13px; font-size: 12px; }
.costeps li > a { margin: -7px -13px; padding: 7px 13px; }
.costeps li b { width: 18px; height: 18px; font-size: 11px; }

/* Przyciski */
.btn, body .button, body button.button, body a.button, body input[type="submit"] {
	font-size: 15px;
	padding: 11px 22px;
	min-height: 42px;
}

/* Koszyk */
.ecart { gap: var(--s-md); grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.ecart__items { gap: 8px; }
.ecitem { padding: 14px; gap: 14px; grid-template-columns: 82px minmax(0, 1fr) auto; }
.ecitem__thumb img { width: 82px; height: 82px; }
.ecitem__name { font-size: 17px; margin-bottom: 7px; }
.ecitem__price { font-size: 22px; }
.ecitem__side { gap: 7px; }
.ecitem__qty span { font-size: 11px; }
.ecitem__qty .quantity input[type="number"] { width: 60px; padding: 6px; }
.ecitem__remove { font-size: 12px; }
.evaspec { padding: 9px 11px; gap: 3px; }
.evaspec__row { font-size: 13px; }
.evaspec__k { flex: 0 0 116px; font-size: 11px; }
.ecitem .evaspec__k { flex: 0 0 116px; }
.evaspec__dot { width: 13px; height: 13px; }
.ecart__actions { margin-top: 12px; }
.ecart__coupon input { min-height: 38px; padding: 8px 14px; font-size: 14px; }
.ecart__tools .btn { font-size: 13px; padding: 9px 15px; min-height: 38px; }

/* Pasek darmowej dostawy */
.shipbar { padding: 11px 14px; margin-bottom: 12px; }
.shipbar__txt { font-size: 14px; margin-bottom: 7px; }
.shipbar__txt strong { font-size: 17px; }

/* Podsumowanie koszyka */
.ecart__side .cart_totals { padding: 14px; }
.ecart__side .cart_totals h2 { font-size: 17px; }
.ecart__side .cart_totals th, .ecart__side .cart_totals td { padding: 9px 0; font-size: 14px; }
.ecart__side .order-total td .woocommerce-Price-amount { font-size: 25px; }
.ecart__side .wc-proceed-to-checkout a.checkout-button { font-size: 15px; min-height: 46px; }

/* Zamowienie */
body form.checkout.woocommerce-checkout { column-gap: var(--s-lg); row-gap: var(--s-md); grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
body form.checkout #order_review { padding: 16px; top: calc(var(--head-h) + 12px); }
body .woocommerce form .form-row { margin-bottom: 12px; }
body .woocommerce form .form-row label { font-size: 11px; }
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .select2-container--default .select2-selection--single {
	min-height: 40px;
	padding: 9px 12px;
	font-size: 15px;
}
body .woocommerce-billing-fields__field-wrapper { gap: 0 14px; }
body .woocommerce-billing-fields h3,
body .woocommerce-additional-fields h3 { font-size: 16px; margin: var(--s-lg) 0 12px; padding-bottom: 8px; }
body .woocommerce-billing-fields h3 { margin-top: 0; }
body .woocommerce-additional-fields { margin-top: var(--s-md); }
body .woocommerce-form-coupon-toggle { margin-bottom: var(--s-md); }
body .woocommerce-message, body .woocommerce-info, body .woocommerce-error { padding: 12px 14px; font-size: 14px; margin-bottom: var(--s-md); }

.cosum { margin-bottom: var(--s-md); }
.cosum__head { margin-bottom: 10px; }
.cosum__head h3 { font-size: 17px; }
.cosum__edit { font-size: 12px; }
.cosum__rows li { padding: 9px 0; font-size: 14px; }
.cosum__total { padding-top: 10px; }
.cosum__total > span { font-size: 11px; }
.cosum__total strong .woocommerce-Price-amount { font-size: 26px; }
body #payment ul.payment_methods { gap: 6px; margin-bottom: 12px; }
body #payment ul.payment_methods li { padding: 11px 14px; font-size: 14px; }
body #payment div.payment_box { font-size: 13px; padding-top: 7px; }
body #shipping_method li { padding: 8px 11px; font-size: 14px; }
body #place_order { font-size: 16px; min-height: 48px; }
body .woocommerce-privacy-policy-text p { font-size: 12px; }
body .woocommerce-terms-and-conditions-wrapper { font-size: 13px; margin-bottom: 12px; }

/* Sekcja z filmami na stronie produktu */
.evawhy { margin-top: var(--s-lg); padding-top: var(--s-lg); }
.evawhy__title { font-size: 26px; }
.evawhy__lead { font-size: 14px; margin-bottom: var(--s-md); }
.evawhy__grid { gap: var(--s-md); }
.evafilm__title { font-size: 18px; }
.evafilm__text { font-size: 14px; }
.evatemp { margin-top: var(--s-lg); padding-top: var(--s-md); gap: var(--s-lg); }
.evatemp__value { font-size: clamp(40px, 5vw, 68px); }
.evatemp__title { font-size: 19px; }
.evatemp p { font-size: 14px; }
.evafacts { margin-top: var(--s-md); padding-top: var(--s-md); gap: 12px; }
.evafacts b { font-size: 24px; }
.evafacts span { font-size: 11px; }

/* Naglowek serwisu */
.shead__strip { padding-block: 5px; font-size: 11px; gap: var(--s-lg); }
.shead__inner { min-height: 56px; gap: var(--s-md); }
.shead__brand { font-size: 17px; }
.shead__brand img { width: 32px; height: 32px; }
.shead__nav a { font-size: 15px; padding: 7px 11px; }
.shead__phone { font-size: 15px; }
.shead__cart, .shead__cta { font-size: 13px; padding: 8px 14px; }
.sfoot { padding-block: var(--s-lg) 12px; }
.sfoot p, .sfoot__links { font-size: 14px; }

/* Cele dotykowe na telefonie zostaja duze mimo zageszczenia */
@media (max-width: 860px) {
	.btn, body .button, body a.button, body input[type="submit"] { min-height: 46px; }
	.costeps li { min-height: 44px; font-size: 12px; }
	.ecitem__qty .quantity input[type="number"] { min-height: 44px; }
	.ecart__coupon input, .ecart__tools .btn { min-height: 44px; }
	body .woocommerce form .form-row input.input-text,
	body .woocommerce form .form-row textarea,
	body .woocommerce form .form-row select { min-height: 46px; font-size: 16px; }
	body #place_order { min-height: 52px; }
	body #payment ul.payment_methods li, body #shipping_method li { padding: 13px 14px; }
	.ecitem__remove { min-height: 44px; display: inline-flex; align-items: center; }
}
/* ==========================================================
   PODGLAD WARSTWOWY DYWANIKA
   Kazda czesc (srodek, obszycie) to dwie nalozone warstwy:
   1. .mpv__tint - plaski kolor przycienty maska z kanalu alfa PNG
   2. .mpv__tex  - ten sam PNG w skali szarosci, tryb multiply
   Dzieki temu zmiana koloru nie kasuje tekstury ani cieni.
   ========================================================== */
.mpv {
	position: relative;
	margin: 0 0 10px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.mpv__stage {
	position: relative;
	aspect-ratio: var(--art-aspect, 1024 / 720);
	/* Jasne tlo sceny: przy ciemnym ciemnoniebieski miat kontrast 1.35
	   i praktycznie znikal. Na bialym najgorszy przypadek to 2.03,
	   a mediana rosnie z 3.0 do 7.0. Gradient udaje studyjne tlo. */
	background:
		radial-gradient(115% 85% at 50% 6%, #FFFFFF 0%, #F3F2EF 52%, #E2E0DA 100%);
}

.mpv__part {
	position: absolute;
	inset: 4%;
	isolation: isolate;
	transition: opacity .18s ease;
}
.mpv__part > span {
	position: absolute;
	inset: 0;
	display: block;
	-webkit-mask-image: var(--part-img);
	mask-image: var(--part-img);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--art-size, contain);
	mask-size: var(--art-size, contain);
	-webkit-mask-position: var(--art-pos, center);
	mask-position: var(--art-pos, center);
}

/* Wzor siedzi w kanale alfa pliku, wiec w miejscach rowkow przebijalo
   ciemne tlo strony i kolory traciy nasycenie. Trzy nalozone warstwy
   w ciemniejszym odcieniu daja lite dno: 1-(1-a)^3, czyli przy alfie 0.6
   juz 0.94 krycia. Rowki sa ciemniejsze, ale wlasnym kolorem, nie czernia. */
.mpv__base {
	background-color: var(--part-shade-color, var(--part-color));
	transition: background-color .25s ease;
}

/* Grzbiety wzoru: dokladnie wybrany kolor, bez domieszek. */

/* Faktura z pikseli - tylko dla plikow kryjacych, gdzie wzoru nie ma w masce. */

/* Delikatne swiatlo od gory i cien przy dolnej krawedzi. */

.mpv__part--mat {
	--part-color: var(--mat-color);
	--part-img: var(--mat-img);
	--part-shade-color: var(--mat-shade-color, var(--mat-color));
	--part-bright: var(--mat-bright, 1);
	--part-contrast: var(--mat-contrast, 1);
	--part-tex: var(--mat-tex, 0);
	z-index: 1;
}
.mpv__part--trim {
	--part-color: var(--trim-color);
	--part-img: var(--trim-img);
	--part-shade-color: var(--trim-shade-color, var(--trim-color));
	--part-bright: var(--trim-bright, 1);
	--part-contrast: var(--trim-contrast, 1);
	--part-tex: var(--trim-tex, 0);
	z-index: 2;
}

.mpv.is-loading .mpv__part { opacity: .35; }
.mpv__cap {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 9px 12px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	color: var(--muted);
}
.mpv__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--accent);
}
.mpv__badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.mpv__desc { flex: 1; min-width: 0; }

@media (prefers-reduced-motion: reduce) {
	.mpv__tint, .mpv__part { transition: none; }
}
/* Galeria realizacji w sekcji opisowej: szeroka, pod nia pasek miniatur. */
.evagal--wide { max-width: none; margin-bottom: var(--s-xl); }
.evagal--wide .evagal__stage { aspect-ratio: 16 / 10; }
.evagal--wide .evagal__thumbs { grid-template-columns: repeat(6, 1fr); gap: 8px; }
.evagal--wide .evagal__img { cursor: zoom-in; }

/* Drugi naglowek w sekcji opisowej potrzebuje odstepu od galerii. */
.evawhy__title--sep {
	margin-top: var(--s-xl);
	padding-top: var(--s-lg);
	border-top: 1px solid var(--line);
}

/* Lewa kolumna zawiera juz tylko podglad, wiec moze byc wezsza i wyzej przyklejona. */
.mpv { margin-bottom: 0; }

@media (max-width: 1100px) {
	.pdp__top { grid-template-columns: 1fr; }
	.pdp__media { max-width: 420px; }
}

@media (max-width: 860px) {
	.evagal--wide .evagal__stage { aspect-ratio: 4 / 3; }
	.evagal--wide .evagal__thumbs { grid-template-columns: repeat(6, 1fr); gap: 5px; }
	.pdp__media { max-width: none; }
}
/* Zastrzezenie pod podgladem: to wizualizacja konfiguracji, nie zdjecie produktu. */
.mpv__cap { flex-wrap: wrap; row-gap: 5px; }
.mpv__desc { flex: 1 1 auto; min-width: 0; }
.mpv__note {
	flex: 1 0 100%;
	padding-top: 6px;
	border-top: 1px solid var(--line);
	font-size: 11px;
	line-height: 1.4;
	color: var(--muted);
}

/* Emblematy: wybor dywanikow pojawia sie dopiero po zaznaczeniu dodatku */
.embl { margin-top: 8px; }
.embl__spots[hidden] { display: none; }
.embl__spots {
	margin-top: 8px;
	padding: 12px;
	background: var(--surface-alt);
	border: 1px solid var(--accent);
	border-radius: var(--r-sm);
}
.embl__spots .cfgx__label { margin-top: 0; }
.embl__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.embl__spot[hidden] { display: none; }
.embl__spot {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 11px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	cursor: pointer;
	font-size: 14px;
}
.embl__spot:has(input:checked) { border-color: var(--accent); }
.embl__spot input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.embl__hint { margin-top: 8px; }
.embl__hint[hidden] { display: none; }

/* Cena przy opcji podstopnicy */
.chip span b { color: var(--accent); font-weight: 700; margin-left: 4px; }
.chip input:checked + span b { color: #0B0B0C; }

@media (max-width: 860px) {
	.embl__spot { min-height: 46px; }
	.embl__grid { grid-template-columns: 1fr; }
}
/* Podstopnica: wybor z grafika zamiast samego tekstu */
.pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pods__opt { position: relative; display: block; cursor: pointer; }
.pods__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pods__body {
	display: grid;
	gap: 4px;
	justify-items: center;
	text-align: center;
	height: 100%;
	padding: 10px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color .15s ease;
}
.pods__opt:hover .pods__body { border-color: var(--muted); }
.pods__opt input:checked + .pods__body { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.pods__img {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface);
}
.pods__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pods__none {
	width: 26px; height: 26px;
	border: 2px solid var(--line);
	border-radius: 50%;
	position: relative;
}
.pods__none::after {
	content: '';
	position: absolute;
	inset: 50% -4px auto -4px;
	height: 2px;
	background: var(--line);
	transform: rotate(-45deg);
}
.pods__name { font-size: 13px; line-height: 1.3; color: var(--ink); }
.pods__price { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--accent); }
.pods__opt input:checked + .pods__body .pods__price { color: var(--accent); }

@media (max-width: 860px) {
	.pods__body { min-height: 44px; padding: 8px; }
	.pods__name { font-size: 12px; }
}
/* ---------- Opis produktu: czytelna typografia ---------- */
.evadesc { margin-top: var(--s-lg); }
.evadesc__cols {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--s-xl);
	align-items: start;
}

.evadesc__text p {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 14px;
	max-width: 62ch;
}
.evadesc__text p:last-child { margin-bottom: 0; }

/* Pierwszy akapit jako wprowadzenie: wiekszy, jasniejszy. */
.evadesc__intro {
	font-size: 18px !important;
	line-height: 1.55 !important;
	color: var(--ink) !important;
}

.evadesc__text strong { color: var(--ink); font-weight: 600; }

/* Lista cech: pogrubiona teza, pod nia wyjasnienie */
.evadesc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.evadesc__list li {
	display: grid;
	gap: 2px;
	padding: 12px 0;
	border-top: 1px solid var(--line);
}
.evadesc__list li:first-child { border-top: 0; padding-top: 0; }
.evadesc__list strong {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--ink);
}
.evadesc__list span { font-size: 14px; line-height: 1.45; color: var(--muted); }

/* Kafle z filmami: opis w osobnym bloku, rowna wysokosc */
.evawhy__grid { align-items: stretch; }
.evafilm { display: flex; flex-direction: column; }
.evafilm__body { padding-top: 2px; }
.evafilm__title { font-size: 19px; margin-bottom: 5px; }
.evafilm__text { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Panel temperatury */
.evatemp p strong { color: var(--ink-soft); font-weight: 600; }
.evatemp__title { letter-spacing: .01em; }

/* Podpis pod podgladem: zostaje samo zastrzezenie */
.mpv__cap {
	display: block;
	padding: 9px 12px;
	border-top: 1px solid var(--line);
	font-size: 11px;
	line-height: 1.45;
	color: var(--muted);
}

@media (max-width: 1100px) {
	.evadesc__cols { grid-template-columns: 1fr; gap: var(--s-lg); }
}

/* ---------- Telefon ---------- */
@media (max-width: 860px) {
	.evadesc { margin-top: var(--s-md); }
	.evadesc__cols { gap: var(--s-md); }
	.evadesc__intro { font-size: 17px !important; }
	.evadesc__text p { font-size: 15px; line-height: 1.6; margin-bottom: 12px; }
	.evadesc__list li { padding: 10px 0; }
	.evadesc__list strong { font-size: 15px; }
	.evadesc__list span { font-size: 13px; }

	/* Film obok opisu, zeby nie robic trzech wysokich pionów jeden pod drugim */
	.evawhy__grid { gap: var(--s-md); }
	.evafilm {
		display: grid;
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
	}
	.evafilm__media { margin-bottom: 0; }
	.evafilm__title { font-size: 17px; }
	.evafilm__text { font-size: 13px; }

	.evatemp { gap: 10px; }
	.evatemp__value { font-size: 42px; }
	.evatemp__title { font-size: 17px; }
	.evatemp p { font-size: 14px; }

	.evafacts { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.evafacts b { font-size: 22px; }
	.evafacts span { font-size: 11px; }

	.evawhy__title { font-size: 23px; }
	.evawhy__title--sep { margin-top: var(--s-lg); padding-top: var(--s-md); }
	.evawhy__lead { font-size: 14px; }
}

@media (max-width: 420px) {
	.evafilm { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; }
	.evafacts { grid-template-columns: 1fr 1fr; }
}
/* Probki: prawdziwe zdjecia materialu zamiast plaskich kolek */
.sw__dot {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.cfgx__swatches { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
.matcol[hidden] { display: none; }
.sw__name { font-size: 11px; line-height: 1.25; }

@media (max-width: 860px) {
	.cfgx__swatches { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
}
/* Cien pod mata: na jasnym tle bez niego dywanik wygladal jak naklejka. */
.mpv__part--trim { filter: drop-shadow(0 9px 16px rgba(11,11,12,.24)); }
/* Ramka i podpis zostaja ciemne, zeby panel nie swiecil na cala strone. */
.mpv { background: var(--surface); }

/* ==========================================================
   OPIS: korekta stopni pisma
   .evatemp p (0,1,1) wygrywalo z .evatemp__value (0,1,0), przez co
   wielka liczba temperatury renderowala sie jak drobny tekst.
   Selektory ponizej maja wyzsza specyficznosc i wlasciwe rozmiary.
   ========================================================== */

.evatemp p.evatemp__value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(46px, 6vw, 78px);
	line-height: .9;
	letter-spacing: -0.02em;
	color: var(--accent);
	margin: 0;
	white-space: nowrap;
}
.evatemp p.evatemp__value span { font-size: .4em; color: var(--ink); }

/* Tresc opisu byla za drobna. Podnosimy o jeden stopien w calej sekcji. */
.evawhy .evadesc__text p { font-size: 17px; line-height: 1.7; margin-bottom: 16px; }
.evawhy .evadesc__text p.evadesc__intro { font-size: 20px !important; line-height: 1.55 !important; }
.evawhy .evadesc__list strong { font-size: 18px; }
.evawhy .evadesc__list span { font-size: 15px; line-height: 1.5; }
.evawhy .evadesc__list li { padding: 14px 0; }

.evawhy .evafilm__title { font-size: 21px; margin-bottom: 7px; }
.evawhy .evafilm__text { font-size: 15px; line-height: 1.6; }

.evatemp .evatemp__title { font-size: 22px; margin-bottom: 8px; }
.evatemp > div > p { font-size: 16px; line-height: 1.65; }

.evawhy .evafacts b { font-size: 27px; }
.evawhy .evafacts span { font-size: 12px; }
.evawhy .evawhy__lead { font-size: 16px; }

/* Panel temperatury: liczba i tekst na jednej linii bazowej */
.evatemp { align-items: center; gap: var(--s-xl); }

@media (max-width: 860px) {
	.evatemp p.evatemp__value { font-size: 46px; }
	.evawhy .evadesc__text p { font-size: 16px; line-height: 1.65; margin-bottom: 14px; }
	.evawhy .evadesc__text p.evadesc__intro { font-size: 18px !important; }
	.evawhy .evadesc__list strong { font-size: 16px; }
	.evawhy .evadesc__list span { font-size: 14px; }
	.evawhy .evafilm__title { font-size: 18px; }
	.evawhy .evafilm__text { font-size: 14px; line-height: 1.55; }
	.evatemp .evatemp__title { font-size: 19px; }
	.evatemp > div > p { font-size: 15px; }
	.evatemp { gap: 12px; }
	.evawhy .evafacts b { font-size: 23px; }
	.evawhy .evafacts span { font-size: 11px; }
}

/* ==========================================================
   PODGLAD W KROKU "WYGLAD"
   Na telefonie duzy podglad jest nad konfiguratorem i przy wyborze
   kolorow wypada poza ekran. Staly kafel w kroku 3 pokazuje efekt
   na miejscu, a dotkniecie przenosi do duzego podgladu.
   Na desktopie podglad stoi obok i jest widoczny, wiec kafel znika.
   ========================================================== */
.mpvmini { display: none; }

@media (max-width: 1100px) {
	.mpvmini {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		margin: 0 0 var(--s-md);
		padding: 10px;
		background: var(--surface-alt);
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		cursor: pointer;
		text-align: left;
		font: inherit;
		color: var(--ink);
		transition: border-color .15s ease;
	}
	.mpvmini:hover, .mpvmini:focus-visible { border-color: var(--accent); }

	.mpvmini__stage {
		position: relative;
		flex: 0 0 auto;
		width: 62px;
		aspect-ratio: var(--art-aspect, 1024 / 720);
		border-radius: 6px;
		overflow: hidden;
		background: linear-gradient(170deg, #FFFFFF, #E2E0DA);
	}
	.mpvmini .mpv__part { inset: 4%; }

	.mpvmini__txt { flex: 1; display: grid; gap: 2px; min-width: 0; }
	.mpvmini__txt b {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 15px;
		text-transform: uppercase;
		letter-spacing: .06em;
	}
	.mpvmini__txt span { font-size: 12px; color: var(--muted); }

	.mpvmini__go {
		flex: 0 0 auto;
		width: 9px; height: 9px;
		margin-right: 6px;
		border-top: 2px solid var(--accent);
		border-right: 2px solid var(--accent);
		transform: rotate(-45deg);
	}

	/* Impuls po zmianie koloru albo tekstury */
	.mpvmini.is-updated { border-color: var(--accent); }
	.mpvmini.is-updated .mpvmini__stage { animation: mpvPulse .7s ease; }
	@keyframes mpvPulse {
		0% { box-shadow: 0 0 0 0 rgba(255,107,0,.5); }
		70% { box-shadow: 0 0 0 8px rgba(255,107,0,0); }
		100% { box-shadow: 0 0 0 0 rgba(255,107,0,0); }
	}
}

@media (prefers-reduced-motion: reduce) {
	.mpvmini.is-updated .mpvmini__stage { animation: none; }
}
/* Notka w pasku ceny zmienia sie w podpowiedz, gdy zakup jest jeszcze zablokowany */
.cfgx__note.is-hint {
	color: var(--accent);
	font-weight: 600;
}
/* Przycisk zakupu pojawia sie dopiero w ostatnim kroku konfiguratora. */
.cfgx__submit.is-hidden { display: none; }

/* ---------- Strona kontaktu ---------- */
.kont__list { list-style: none; margin: 0 0 var(--s-lg); padding: 0; display: grid; }
.kont__list li { display: grid; gap: 3px; padding: var(--s-md) 0; border-top: 1px solid var(--line); }
.kont__list li:first-child { border-top: 0; padding-top: 0; }
.kont__k {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
}
.kont__big {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.1;
	color: var(--accent);
}
.kont__big:hover { color: var(--accent-hover); }
.kont__big--sm { font-size: 22px; word-break: break-word; }
.kont__val { font-size: 17px; color: var(--ink); }
.kont__note { font-size: 14px; color: var(--muted); line-height: 1.45; }
.kont__cta { display: flex; flex-wrap: wrap; gap: 8px; }
.eva-contact .sdoc__title em { font-style: normal; color: var(--accent); display: block; }

@media (max-width: 1000px) {
	.kont { grid-template-columns: 1fr; gap: var(--s-lg); }
}
@media (max-width: 860px) {
	.kont__big { font-size: 27px; }
	.kont__big--sm { font-size: 17px; }
	.kont__cta .btn { flex: 1 1 100%; }
}

/* Link kontaktu w stopce landingu */
.foot__links a { color: var(--muted); font-size: 14px; }
.foot__links a:hover { color: var(--accent); }
/* ---------- Mapa (kontakt) ----------
   Klasy byly zdefiniowane wylacznie w CSS landingu, ktory tu sie nie laduje,
   wiec blok mapy renderowal sie bez stylow. */
.map {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-md);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--surface);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__load {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--surface);
	border: 0;
	cursor: pointer;
	padding: var(--s-lg);
	text-align: center;
	font: inherit;
	color: var(--ink);
	transition: background-color .15s ease;
}
.map__load:hover { background: var(--surface-alt); }
.map__pin {
	width: 16px;
	height: 16px;
	border-radius: 50% 50% 50% 0;
	background: var(--accent);
	transform: rotate(-45deg);
}
.map__addr { font-size: 16px; color: var(--ink); }
.map__cta {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--accent);
}

@media (max-width: 1000px) {
	.kont .map { aspect-ratio: 16 / 10; }
}
/* Lewa kolumna kontaktu w siatce nie moze rozpychac ukladu dlugim mailem. */
.kont__main { min-width: 0; }
.kont__big--sm { overflow-wrap: anywhere; }

/* ---------- Formularz kontaktowy ---------- */
.kont__side { min-width: 0; }
.kform {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-lg);
}
.kform__title { font-size: 24px; margin-bottom: 4px; }
.kform__lead { color: var(--muted); font-size: 14px; margin: 0 0 var(--s-md); }

.kform__ok,
.kform__ok { background: rgba(255,107,0,.12); border-left: 3px solid var(--accent); color: var(--ink); }

.kform__form { display: grid; gap: 12px; }

.kform__field input,
.kform__field input:focus,


/* Pulapka na roboty musi byc niewidoczna, ale nie display:none -
   czesc botow pomija pola calkowicie ukryte. */

/* ---------- Mapa nad stopka, pelna szerokosc ---------- */
.kmap { margin-top: var(--s-xl); }
.kmap .map {
	aspect-ratio: 21 / 6;
	border-radius: 0;
	border-inline: 0;
	border-bottom: 0;
}

@media (max-width: 1000px) {
	.kform { padding: var(--s-md); }
	.kmap .map { aspect-ratio: 16 / 10; }
}

@media (max-width: 620px) {
	.kform__row { grid-template-columns: 1fr; }
	.kform__field input, .kform__field textarea { min-height: 46px; font-size: 16px; }
	.kmap .map { aspect-ratio: 4 / 3; }
}
/* ---------- Kontakt: 50/50 ---------- */
.kont__side { min-width: 0; }

/* Mapa nad stopka, widoczna od razu */
.kmap { margin-top: var(--s-xl); }
.kmap .map {
	aspect-ratio: 21 / 6;
	border-radius: 0;
	border-inline: 0;
	border-bottom: 0;
	background: var(--surface-alt);
}
.kmap .map iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

/* ---------- Formularz Forminatora na ciemnym tle ---------- */
.kform {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-lg);
}
.kform__title { font-size: 24px; margin-bottom: 4px; }
.kform__lead { color: var(--muted); font-size: 14px; margin: 0 0 var(--s-md); }

.kform .forminator-ui,
.kform .forminator-ui * { font-family: var(--font-body) !important; }

.kform .forminator-label,
.kform .forminator-ui .forminator-label {
	color: var(--muted) !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	margin-bottom: 5px !important;
}
.kform .forminator-required { color: var(--accent) !important; }

.kform .forminator-input,
.kform .forminator-textarea,
.kform .forminator-ui input[type="text"],
.kform .forminator-ui input[type="email"],
.kform .forminator-ui input[type="tel"],
.kform .forminator-ui textarea {
	background-color: var(--surface-alt) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-sm) !important;
	color: var(--ink) !important;
	font-size: 15px !important;
	min-height: 42px !important;
	padding: 10px 12px !important;
}
.kform .forminator-ui textarea { min-height: 120px !important; line-height: 1.5 !important; }
.kform .forminator-ui input::placeholder,
.kform .forminator-ui textarea::placeholder { color: #8A8885 !important; }
.kform .forminator-ui input:focus,
.kform .forminator-ui textarea:focus {
	border-color: var(--accent) !important;
	box-shadow: 0 0 0 3px rgba(255,107,0,.2) !important;
	outline: none !important;
}

.kform .forminator-button,
.kform .forminator-button-submit {
	background: var(--accent) !important;
	border: 1px solid transparent !important;
	color: #0B0B0C !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	border-radius: var(--r-pill) !important;
	padding: 13px 28px !important;
	min-height: 48px !important;
	width: 100% !important;
}
.kform .forminator-button:hover { background: var(--accent-hover) !important; }

.kform .forminator-error-message { color: var(--error) !important; font-size: 12px !important; }
.kform .forminator-response-message {
	background: rgba(255,107,0,.12) !important;
	border-left: 3px solid var(--accent) !important;
	color: var(--ink) !important;
	padding: 11px 14px !important;
	border-radius: var(--r-sm) !important;
	font-size: 14px !important;
}
.kform .forminator-response-message.forminator-error { border-left-color: var(--error) !important; }
.kform .forminator-row { margin-bottom: 12px !important; }

@media (max-width: 1000px) {
	.kont { grid-template-columns: 1fr; gap: var(--s-lg); }
	.kform { padding: var(--s-md); }
	.kmap .map { aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
	.kform .forminator-ui input,
	.kform .forminator-ui textarea { font-size: 16px !important; min-height: 46px !important; }
	.kmap .map { aspect-ratio: 4 / 3; }
}
/* ---------- Kontakt: rowne kolumny 50/50 ---------- */
.kont {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-xl);
	align-items: start;
}

/* ---------- Formularz Forminatora ----------
   Styl "none" zostawia sam markup, wiec uklad budujemy sami:
   etykieta nad polem, pole na pelna szerokosc. */
.kform .forminator-row,
.kform .forminator-col,
.kform .forminator-field {
	display: block !important;
	width: 100% !important;
	float: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.kform .forminator-row { margin-bottom: 14px !important; }
.kform .forminator-row:last-of-type { margin-bottom: 0 !important; }

.kform .forminator-label,
.kform .forminator-ui .forminator-label {
	display: block !important;
	width: 100% !important;
	color: var(--muted) !important;
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: .1em !important;
	margin: 0 0 6px !important;
}

.kform .forminator-input,
.kform .forminator-textarea,
.kform .forminator-ui input[type="text"],
.kform .forminator-ui input[type="email"],
.kform .forminator-ui input[type="tel"],
.kform .forminator-ui textarea {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	background-color: var(--surface-alt) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-sm) !important;
	color: var(--ink) !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	min-height: 44px !important;
	padding: 11px 13px !important;
}
.kform .forminator-ui textarea { min-height: 130px !important; resize: vertical !important; }

/* Pusty kontener komunikatu rysowal pomaranczowy pasek nad formularzem. */
.kform .forminator-response-message:empty,
.kform .forminator-response-message[aria-hidden="true"] { display: none !important; }
.kform .forminator-response-message:not(:empty) {
	background: rgba(255,107,0,.12) !important;
	border-left: 3px solid var(--accent) !important;
	color: var(--ink) !important;
	padding: 11px 14px !important;
	border-radius: var(--r-sm) !important;
	font-size: 14px !important;
	margin-bottom: 14px !important;
}
.kform .forminator-response-message.forminator-error:not(:empty) { border-left-color: var(--error) !important; }

/* Link edycji widoczny tylko dla administratora - nie w tresci strony. */
.kform .forminator-edit-module-link,
.kform a[href*="forminator"] { display: none !important; }

@media (max-width: 1000px) {
	.kont { grid-template-columns: 1fr; gap: var(--s-lg); }
}
/* ---------- Kontakt: naglowek w lewej kolumnie ----------
   Okruszki i tytul siedza teraz w kolumnie z danymi, wiec obie kolumny
   zaczynaja sie na tej samej wysokosci i uklad jest rowny. */
.eva-contact .sdoc { padding-top: var(--s-md); }
.kont__main .pdp__crumbs { margin-bottom: var(--s-md); }
.kont__main .sdoc__head { margin-bottom: var(--s-lg); }
.kont__main .sdoc__title { font-size: clamp(28px, 3.4vw, 40px); }
.kont__main .sdoc__sub { font-size: 15px; max-width: 52ch; }

/* Formularz: wiecej powietrza miedzy polami */
.kform .forminator-row { margin-bottom: 20px !important; }
.kform .forminator-row.forminator-row-last { margin-top: 4px !important; margin-bottom: 0 !important; }
.kform .forminator-label,
.kform .forminator-ui .forminator-label { margin: 0 0 8px !important; }
.kform .forminator-ui textarea { min-height: 140px !important; }
.kform__lead { margin-bottom: var(--s-lg); }

@media (max-width: 1000px) {
	.kont__main .sdoc__head { margin-bottom: var(--s-md); }
	.kform .forminator-row { margin-bottom: 16px !important; }
}
/* Formularz jest nizszy od kolumny z danymi, wiec wyrownujemy go do srodka.
   Przy dolnej krawedzi zostawala pusta przestrzen i uklad wygladal na przesuniety. */
.kont__side { align-self: center; }

@media (max-width: 1000px) {
	.kont__side { align-self: stretch; }
}

/* ---------- Mini koszyk w panelu ---------- */

/* Konfiguracja pozycji w panelu */



/* ---------- Strona podziękowania ---------- */
.woocommerce-thankyou-order-received {
	background: rgba(255,107,0,.12);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-sm);
	padding: 14px 16px;
	margin: 0 0 var(--s-lg);
	font-size: 16px;
	color: var(--ink);
}

/* Podsumowanie zamówienia jako kafle, nie lista */
ul.woocommerce-order-overview {
	list-style: none;
	margin: 0 0 var(--s-lg);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px;
}
ul.woocommerce-order-overview li {
	margin: 0;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 3px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
ul.woocommerce-order-overview li strong {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}
ul.woocommerce-order-overview li.total strong { color: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 22px; }

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-downloads__title {
	font-size: 20px;
	margin: var(--s-lg) 0 var(--s-md);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}

.woocommerce-order table.order_details {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.woocommerce-order table.order_details th,
.woocommerce-order table.order_details td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 15px;
	vertical-align: top;
}
.woocommerce-order table.order_details thead th {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	background: var(--surface-alt);
}
.woocommerce-order table.order_details td.woocommerce-table__product-total,
.woocommerce-order table.order_details tfoot td { text-align: right; white-space: nowrap; }
.woocommerce-order table.order_details tfoot th { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.woocommerce-order table.order_details tfoot tr:last-child td .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--accent);
}
.woocommerce-order table.order_details .wc-item-meta {
	list-style: none;
	margin: 8px 0 0;
	padding: 10px 12px;
	background: var(--surface-alt);
	border-radius: var(--r-sm);
	display: grid;
	gap: 3px;
	font-size: 13px;
}
.woocommerce-order table.order_details .wc-item-meta li { display: flex; gap: 8px; }
.woocommerce-order table.order_details .wc-item-meta strong { flex: 0 0 118px; color: var(--muted); font-weight: 600; }
.woocommerce-order table.order_details .wc-item-meta p { margin: 0; color: var(--ink-soft); }

.woocommerce-customer-details address {
	font-style: normal;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: var(--s-md);
	line-height: 1.65;
	color: var(--ink-soft);
}
.woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-customer-details .woocommerce-customer-details--email { display: block; margin-top: 6px; color: var(--accent); }

/* Instrukcja przelewu z WooCommerce */
.woocommerce-bacs-bank-details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
	padding: var(--s-md);
	margin-bottom: var(--s-lg);
}
.woocommerce-bacs-bank-details h2, .wc-bacs-bank-details-heading { font-size: 18px; margin-bottom: 8px; }
.wc-bacs-bank-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; }

@media (max-width: 860px) {
	ul.woocommerce-order-overview { grid-template-columns: 1fr 1fr; }
	ul.woocommerce-order-overview li { padding: 11px 12px; }
	ul.woocommerce-order-overview li strong { font-size: 14px; }
	ul.woocommerce-order-overview li.total strong { font-size: 19px; }
	.woocommerce-order table.order_details th,
	.woocommerce-order table.order_details td { padding: 10px 12px; font-size: 14px; }
	.woocommerce-order table.order_details .wc-item-meta li { flex-direction: column; gap: 0; }
	.woocommerce-order table.order_details .wc-item-meta strong { flex: none; }
}
/* ==========================================================
   MOJE KONTO
   ========================================================== */
.woocommerce-account.woocommerce-page:not(.logged-in) .woocommerce { display: block; }

/* Nawigacja konta */

.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content p { color: var(--ink-soft); line-height: 1.6; }
.woocommerce-MyAccount-content mark { background: none; color: var(--accent); font-weight: 600; }

/* Tabela zamowien i pobran */
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.woocommerce-table--order-downloads,
.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 15px;
	vertical-align: middle;
}
.woocommerce-account table.shop_table thead th {
	background: var(--surface-alt);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
}
.woocommerce-account table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce-orders-table__cell-order-status { color: var(--accent); font-weight: 600; }
.woocommerce-orders-table__cell-order-total .woocommerce-Price-amount { font-family: var(--font-display); font-weight: 700; color: var(--accent); }
.woocommerce-orders-table__cell-order-actions a,
.woocommerce-account .woocommerce-button {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--ink);
}
.woocommerce-orders-table__cell-order-actions a:hover { border-color: var(--accent); color: var(--accent); }

/* Pusta lista zamowien */
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-md);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
	padding: var(--s-md);
	font-size: 15px;
	color: var(--ink-soft);
}
.woocommerce-account .woocommerce-info a.button { margin-left: auto; }

/* Adresy */
.woocommerce-Addresses { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-md); }
.woocommerce-Address { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-md); }
.woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-sm); margin-bottom: 10px; }
.woocommerce-Address-title h2, .woocommerce-Address-title h3 { font-size: 18px; margin: 0; }
.woocommerce-Address-title .edit { font-family: var(--font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.woocommerce-Address address { font-style: normal; color: var(--ink-soft); line-height: 1.65; font-size: 15px; }

/* Formularze konta */
.woocommerce-account form.woocommerce-EditAccountForm,
.woocommerce-account form.woocommerce-address-fields,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.woocommerce-ResetPassword {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--s-lg);
	max-width: 560px;
}
.woocommerce-account fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-md); margin-top: var(--s-md); }
.woocommerce-account fieldset legend { font-family: var(--font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding-inline: 8px; }
.woocommerce-account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.woocommerce-account .woocommerce-LostPassword { margin-top: var(--s-sm); font-size: 14px; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--accent); }

/* Logowanie i rejestracja obok siebie */
.woocommerce-account:not(.logged-in) .u-columns.col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--s-lg);
}
.woocommerce-account:not(.logged-in) .u-column1,
.woocommerce-account:not(.logged-in) .u-column2 { width: auto; float: none; }
.woocommerce-account:not(.logged-in) h2 { font-size: 22px; margin-bottom: var(--s-sm); }
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register { max-width: none; }

@media (max-width: 900px) {
	.woocommerce-account table.shop_table thead { display: none; }
	.woocommerce-account table.shop_table tr { display: grid; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.woocommerce-account table.shop_table td { display: flex; justify-content: space-between; gap: var(--s-sm); padding: 4px 0; border: 0; }
	.woocommerce-account table.shop_table td::before { content: attr(data-title); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
}
/* ---------- Strony tresciowe i 404 ---------- */
.doc404 { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-md); }
.prose { max-width: 72ch; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.prose h2, .prose h3 { margin: var(--s-lg) 0 var(--s-sm); color: var(--ink); }
.prose h2 { font-size: 24px; }
.prose h3 { font-size: 19px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(255,107,0,.35); }
.prose a:hover { border-color: var(--accent); }
.prose strong { color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose blockquote { margin: 0 0 14px; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
.prose th, .prose td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--surface-alt); }

@media (max-width: 860px) {
	.doc404 .btn { flex: 1 1 100%; }
	.prose { font-size: 15px; }
}
/* ==========================================================
   MOJE KONTO - poprawka struktury
   Motyw opakowuje nawigacje w .account-navigation-wrap razem z awatarem,
   wiec siatka musi celowac w ten wrapper, a nie w sama nawigacje.
   ========================================================== */
.woocommerce-account:not(.logged-in) .sdoc .woocommerce { display: block; }

.account-navigation-wrap { min-width: 0; }


.woocommerce-MyAccount-content { min-width: 0; }
.woocommerce-MyAccount-content p { max-width: 68ch; }

/* ==========================================================
   POLA FORMULARZY WOOCOMMERCE
   Arkusz ukladu wtyczki byl zdjety, a to on nadawal polom szerokosc.
   Bez tego pola mialy szerokosc tresci - kilkadziesiat pikseli.
   ========================================================== */
body .woocommerce form .form-row { display: block; }
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea,
body .woocommerce form .form-row select,
body .woocommerce form .form-row .select2-container,
body .woocommerce-account form input.input-text,
body .woocommerce-account form select {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
body .woocommerce form .form-row label { display: block; }
body .woocommerce form .form-row-first,
body .woocommerce form .form-row-last,
body .woocommerce form .form-row-wide { width: 100%; float: none; margin-right: 0; }
body .woocommerce .col2-set .col-1,
body .woocommerce .col2-set .col-2 { width: 100%; float: none; }
body .woocommerce form .clear { clear: both; }

/* Zgody i checkboxy */
body .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-soft);
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--font-body);
	font-weight: 400;
}
body .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	margin: 1px 0 0;
	accent-color: var(--accent);
}
body .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.5; }

/* ==========================================================
   PRZYCISK PRZEJSCIA DO PLATNOSCI
   Mial tylko szerokosc, a tlo dziedziczyl z reguly, ktora przegrywala.
   ========================================================== */
body .wc-proceed-to-checkout a.checkout-button,
.ecart__side .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	color: #0B0B0C;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .08em;
	min-height: 50px;
	padding: 13px 22px;
	text-decoration: none;
}
body .wc-proceed-to-checkout a.checkout-button:hover { background: var(--accent-hover); color: #0B0B0C; }

/* ==========================================================
   KOSZYK NA TELEFONIE
   Konfiguracja lamala sie w waskiej kolumnie, bo karta trzymala
   uklad trzykolumnowy. Na telefonie idzie wszystko w pion.
   ========================================================== */
@media (max-width: 860px) {
	.ecitem {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}
	.ecitem__thumb img { width: 64px; height: 64px; }
	.ecitem__body { grid-column: 2; min-width: 0; }
	.ecitem__side {
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		justify-content: flex-start;
		margin-top: 4px;
		padding-top: 12px;
		border-top: 1px solid var(--line);
	}
	.ecitem__price { font-size: 21px; margin-right: auto; }
	.evaspec { padding: 10px; }
	.evaspec__row { display: grid; grid-template-columns: 1fr; gap: 1px; }
	.evaspec__k { font-size: 10px; letter-spacing: .08em; }
	.evaspec__v { font-size: 14px; line-height: 1.4; }

}

/* ---------- Ikony zestawow ----------
   Pliki 500x300 z przezroczystym tlem, wiec karta dostaje stala ramke
   o tych samych proporcjach. Ikona jest wpisana w nia w calosci (contain),
   dzieki czemu wszystkie cztery karty maja rowna wysokosc niezaleznie
   od dlugosci opisu. */
.setc__ico {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	margin-bottom: 8px;
	border-radius: var(--r-sm);
	background: var(--surface);
	overflow: hidden;
}
.setc__ico img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	opacity: .82;
	transition: opacity .15s ease, transform .15s ease;
}
.setc:hover .setc__ico img { opacity: 1; }
.setc input:checked + .setc__body .setc__ico img { opacity: 1; }
.setc input:checked + .setc__body .setc__ico { background: var(--bg); }

/* Wyszarzony zestaw ma tez wyciszona ikone */
.setc.is-off .setc__ico img { opacity: .35; filter: grayscale(1); }

/* Znacznik "najczesciej wybierany" nad ikona, nie obok niej */
.setc__body { align-content: start; }
.setc__tag { margin-bottom: 2px; }

@media (max-width: 860px) {
	/* Na telefonie karty ida w jednej kolumnie, wiec ikona obok tekstu
	   zamiast nad nim - inaczej karta robi sie bardzo wysoka. */
	.setc__body {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-areas:
			"ico tag"
			"ico name"
			"ico desc"
			"ico price";
		column-gap: 12px;
		align-content: center;
	}
	.setc__ico { grid-area: ico; align-self: center; margin-bottom: 0; }
	.setc__tag { grid-area: tag; }
	.setc__name { grid-area: name; }
	.setc__desc { grid-area: desc; }
	.setc__price { grid-area: price; padding-top: 2px; }
	.setc__off { grid-area: price; }
}

@media (max-width: 420px) {
	.setc__body { grid-template-columns: 78px minmax(0, 1fr); column-gap: 10px; }
}

/* ---------- Probki kolorow: mniej rzedow ----------
   Podpisy pod kazda probka zajmowaly wiecej miejsca niz same probki
   i rozbijaly palete na 5 rzedow. Nazwa wybranego koloru pokazuje sie
   teraz przy naglowku grupy, a podpisy zostaja dla czytnikow ekranu. */
/* Stala liczba kolumn zamiast auto-fill: probki sa wieksze, latwiej w nie
   trafic i paleta nie rozjezdza sie na kilkanascie waskich kolumn. */
.cfgx__swatches {
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 10px;
}

.sw__name {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sw { position: relative; }
.sw__dot { border-width: 2px; }
.sw input:checked + .sw__dot { box-shadow: 0 0 0 3px rgba(255,107,0,.3); }

/* Nazwa aktualnego wyboru przy naglowku grupy */
.cfgx__pick {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
	margin-left: 6px;
}
.cfgx__pick:empty { display: none; }
.cfgx__pick::before { content: '\2022'; color: var(--muted); margin-right: 6px; }

@media (max-width: 860px) {
	.cfgx__swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
	.cfgx__pick { font-size: 12px; }
}

/* ---------- Wybor tekstury ----------
   Zamiast samych etykiet: probka wzoru i rozmiar komorki. Przy plastrze
   malym i duzym to jedyna rzecz, ktora je rozni, wiec musi byc widoczna
   w momencie wyboru, a nie dopiero w opisie produktu. */
/* Cztery tekstury w jednym rzedzie. Kafle sa waskie, wiec probka wzoru
   jest mniejsza, a nazwa i rozmiar komorki ida pod nia. */
.cfgx__tex {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
}
.tex { position: relative; display: block; cursor: pointer; }
.tex input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.tex__body {
	display: grid;
	gap: 7px;
	padding: 8px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color .15s ease, background-color .15s ease;
	height: 100%;
	align-content: start;
}
.tex:hover .tex__body { border-color: var(--muted); }
.tex input:checked + .tex__body {
	border-color: var(--accent);
	background: var(--surface-alt);
}
.tex input:focus-visible + .tex__body { outline: 2px solid var(--accent); outline-offset: 2px; }

.tex__img {
	display: block;
	aspect-ratio: 1;
	border-radius: 5px;
	overflow: hidden;
	background: var(--bg);
}
.tex__img img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.tex input:checked + .tex__body .tex__img img { opacity: 1; }

.tex__text { display: grid; gap: 1px; min-width: 0; }
.tex__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.15;
	color: var(--ink);
	overflow-wrap: anywhere;
}
.tex input:checked + .tex__body .tex__name { color: var(--accent); }
.tex__size { font-size: 11px; color: var(--muted); line-height: 1.3; }

@media (max-width: 900px) {
	.cfgx__tex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tex__name { font-size: 15px; }
	.tex__size { font-size: 12px; }
}

@media (max-width: 420px) {
	/* Ponizej tej szerokosci dwie kolumny daja probke ~120px,
	   wiec przechodzimy na liste z miniatura obok tekstu. */
	.cfgx__tex { grid-template-columns: 1fr; gap: 6px; }
	.tex__body {
		grid-template-columns: 52px minmax(0, 1fr);
		align-items: center;
		column-gap: 12px;
	}
	.tex__img { width: 52px; }
	.tex__name { font-size: 16px; }
}

/* ==========================================================
   UKLAD MOBILNY - BLOK KONCOWY

   Ten blok musi zostac na koncu pliku. Wczesniej reguly ukladu
   koszyka i zamowienia byly dopisywane PO swoich wersjach mobilnych,
   wiec na telefonie zostawaly dwie kolumny: podsumowanie nachodzilo
   na pozycje, a formularz wychodzil poza ekran.
   Nowe reguly ukladu dopisuj PRZED tym blokiem.
   ========================================================== */

@media (max-width: 1100px) {

	.ecart {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-md);
	}
	.ecart__form { grid-column: 1; min-width: 0; }
	.ecart__side {
		grid-column: 1;
		position: static;
		align-self: stretch;
		min-width: 0;
	}

	body form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
		row-gap: var(--s-md);
	}
	body form.checkout #customer_details,
	body form.checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		min-width: 0;
	}
	body form.checkout #order_review { position: static; }

	.pdp__top,
	.kont { grid-template-columns: minmax(0, 1fr); }
	.kont__side { align-self: stretch; }

}

@media (max-width: 860px) {

	/* Kazdy element siatki dostaje min-width: 0, inaczej dluga tresc
	   rozciaga kolumne i strona przewija sie w poziomie. */
	.ecart__items,
	.ecitem,
	.ecitem__body,
	.evaspec,
	.evaspec__v,
	.woocommerce-MyAccount-content,
	.account-navigation-wrap,
	body form.checkout #customer_details,
	body form.checkout #order_review { min-width: 0; }

	body .woocommerce table.shop_table { width: 100%; table-layout: auto; }

	/* Podsumowanie zamowienia: etykieta nad wartoscia */
	body #order_review .cosum__rows li { flex-wrap: wrap; gap: 4px; }
	body #order_review .cosum__shipping { display: block; }
	body #order_review .cosum__shipping > span:first-child { display: block; margin-bottom: 6px; }
	body #order_review .cosum__shipping #shipping_method { text-align: left; }
	body #order_review .woocommerce-shipping-destination { margin-top: 8px; font-size: 12px; }

	/* Metody platnosci na pelna szerokosc */
	body #payment ul.payment_methods { display: grid; gap: 8px; }
	body #payment ul.payment_methods li { width: 100%; }
	body #payment div.payment_box { width: 100%; }

	.ecart__actions { gap: 10px; }
	.ecart__coupon { width: 100%; }
	.ecart__coupon input { flex: 1; min-width: 0; }
}

/* Paleta: mniej kolumn na waskich ekranach, zeby probka pozostala duza. */
@media (max-width: 1100px) {
	.cfgx__swatches { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.cfgx__swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
}

/* ==========================================================
   POPRAWKI SCIEZKI ZAKUPOWEJ
   Blok celowo na samym koncu pliku - wczesniejsze reguly ukladu
   byly dopisywane po swoich wersjach mobilnych i je nadpisywaly.
   ========================================================== */

/* ---------- Przycisk "Kupuje i place" ----------
   Renderowal sie jako ciemny, bo dziedziczyl tlo z reguly, ktora
   przegrywala specyficznoscia z motywem. Ustawiamy je wprost. */
body #place_order,
body .woocommerce #place_order,
body button#place_order.button.alt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	background: var(--accent);
	background-color: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	color: #0B0B0C;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .08em;
	min-height: 54px;
	padding: 14px 24px;
	cursor: pointer;
}
body #place_order:hover { background: var(--accent-hover); color: #0B0B0C; }
body #place_order:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Koszyk: wiersz dostawy ----------
   Adres wysylki staval obok listy metod i lamal sie po jednym slowie.
   Rozdzielamy: najpierw metody, pod nimi adres. */
.ecart__side .cart_totals tr.shipping th,
.ecart__side .cart_totals tr.shipping td { display: block; width: 100%; }
.ecart__side .cart_totals tr.shipping th { padding-bottom: 6px; border-bottom: 0; }
.ecart__side .cart_totals tr.shipping td { padding-top: 0; }
.ecart__side #shipping_method { display: grid; gap: 6px; margin: 0; text-align: left; }
.ecart__side #shipping_method li { margin: 0; }
.ecart__side .woocommerce-shipping-destination {
	display: block;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}
.ecart__side .shipping-calculator-button { display: inline-block; margin-top: 4px; color: var(--accent); font-size: 12px; }

/* ---------- Strona podziekowania ---------- */
.woocommerce-thankyou-order-received {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink);
}
ul.woocommerce-order-overview li strong { word-break: break-word; }

/* Dopisek o podatku nie moze krzyczec kolorem */
.woocommerce-Price-taxLabel,
small.includes_tax,
.tax_label { color: var(--muted) !important; font-size: 12px; font-weight: 400; }

/* Tabela zamowienia: etykieta po lewej, kwota po prawej */
.woocommerce-order table.order_details tfoot th { text-align: left; }
.woocommerce-order table.order_details tfoot td { text-align: right; }

@media (max-width: 860px) {
	body #place_order { min-height: 52px; font-size: 16px; }

	.woocommerce-thankyou-order-received { font-size: 15px; padding: 12px 14px; }
	ul.woocommerce-order-overview { grid-template-columns: 1fr 1fr; gap: 8px; }
	ul.woocommerce-order-overview li { padding: 10px 12px; }
	ul.woocommerce-order-overview li strong { font-size: 14px; }
	ul.woocommerce-order-overview li.total strong { font-size: 18px; }

	/* Tabela zamowienia w pionie: etykieta i wartosc w jednym wierszu */
	.woocommerce-order table.order_details { display: block; }
	.woocommerce-order table.order_details thead { display: none; }
	.woocommerce-order table.order_details tbody,
	.woocommerce-order table.order_details tfoot,
	.woocommerce-order table.order_details tr { display: block; width: 100%; }
	.woocommerce-order table.order_details tbody tr {
		padding: 12px 14px;
		border-bottom: 1px solid var(--line);
	}
	.woocommerce-order table.order_details tbody td { display: block; padding: 0; border: 0; }
	.woocommerce-order table.order_details tbody td.woocommerce-table__product-total {
		text-align: left;
		margin-top: 8px;
		font-family: var(--font-display);
		font-weight: 800;
		font-size: 19px;
		color: var(--accent);
	}
	.woocommerce-order table.order_details tfoot tr {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		padding: 11px 14px;
		border-bottom: 1px solid var(--line);
	}
	.woocommerce-order table.order_details tfoot th,
	.woocommerce-order table.order_details tfoot td {
		display: block;
		padding: 0;
		border: 0;
		white-space: normal;
	}
	.woocommerce-order table.order_details tfoot td { text-align: right; }
	.woocommerce-order table.order_details tfoot tr:last-child td .woocommerce-Price-amount { font-size: 20px; }

	.woocommerce-customer-details address { padding: 14px; font-size: 14px; }
}

/* ==========================================================
   MENU KONTA NA TELEFONIE
   Menu bylo kotwiczone do ikony (position:absolute), wiec przy szerokosci
   232px wychodzilo poza lewa krawedz ekranu i urywalo sie.
   Na telefonie kotwiczymy je do okna, nie do ikony.
   ========================================================== */
@media (max-width: 720px) {
	.acc { position: static; }
	.acc__menu {
		position: fixed;
		top: auto;
		left: var(--gutter);
		right: var(--gutter);
		min-width: 0;
		max-height: calc(100dvh - 140px);
		overflow-y: auto;
		margin-top: 8px;
	}
	.acc__list a { padding: 12px 12px; font-size: 15px; min-height: 46px; display: flex; align-items: center; }
}

/* ==========================================================
   KOKPIT KONTA
   ========================================================== */
.dash__h {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--muted);
	margin: 0 0 10px;
}
.dash__last { margin-bottom: var(--s-lg); }

.dash__nr {
	margin: 0 0 2px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	text-transform: uppercase;
	color: var(--ink);
}
.dash__btn { flex: 0 0 auto; }

.dash__empty {
	padding: var(--s-lg);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	margin-bottom: var(--s-lg);
}
.dash__empty p { margin: 0 0 var(--s-md); color: var(--muted); }

.dash__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 8px;
}
.dash__tile {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	transition: border-color .15s ease;
}
.dash__tile:hover { border-color: var(--accent); }
.dash__tile b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ink);
}
.dash__tile span { font-size: 13px; color: var(--muted); line-height: 1.4; }
.dash__tile--cta { border-color: var(--accent); }
.dash__tile--cta b { color: var(--accent); }

.dash__help {
	margin: var(--s-lg) 0 0;
	padding-top: var(--s-md);
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
}
.dash__help a { color: var(--accent); }

/* Nawigacja konta: czytelna lista, nie rozsypane pigulki */

@media (max-width: 900px) {
	/* Na telefonie dwie kolumny zamiast poziomego przewijania -
	   przy siedmiu pozycjach pasek i tak nie miescil sie na ekranie. */
	.dash__order { gap: 10px; }
	.dash__btn { width: 100%; justify-content: center; }
	.dash__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   MOJE KONTO - uklad wlasny

   Motyw wnosil osobny arkusz (kadence-account-woocommerce), ktory
   ustawial awatar na position:absolute i doklejal wlasne obramowania
   pozycji menu. Arkusz jest zdjety, wiec caly uklad budujemy tutaj.

   Nawigacja to lista z pomaranczowym znacznikiem aktywnej pozycji,
   a nie pigulki - przy siedmiu pozycjach pigulki rozsypywaly sie
   w nieregularne rzedy i nie dawaly sie odczytac jako menu boczne.
   ========================================================== */

.woocommerce-account:not(.logged-in) .sdoc .woocommerce { display: block; }
.woocommerce-account .sdoc .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* --- Kolumna boczna --- */
.account-navigation-wrap {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 14px;
	margin: 0;
}
.kadence-account-avatar {
	display: flex;
	align-items: center;
	gap: 11px;
	position: static;
	min-height: 0;
	padding: 0 0 12px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--line);
}
.kadence-customer-image { position: static; }
.kadence-customer-image img {
	position: static;
	width: 40px;
	height: 40px;
	max-width: none;
	border-radius: 50%;
	display: block;
}
.kadence-customer-name {
	padding-left: 0;
	min-width: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.15;
	color: var(--ink);
	overflow-wrap: anywhere;
}

.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 12px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--muted);
	white-space: normal;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--surface-alt);
	border-left-color: var(--line);
	color: var(--ink);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a:hover {
	background: var(--surface-alt);
	border-left-color: var(--accent);
	color: var(--ink);
	font-weight: 600;
}
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--error); border-left-color: var(--error); }

/* --- Tresc --- */
.woocommerce-MyAccount-content { min-width: 0; }

/* Ostatnie zamowienie: siatka, zeby kwota nie wchodzila na date */
.dash__order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"main total"
		"btn  btn";
	align-items: center;
	gap: 12px var(--s-md);
}
.dash__order-main { grid-area: main; }
.dash__total { grid-area: total; }
.dash__btn { grid-area: btn; justify-self: start; }
.dash__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.dash__status { margin-left: 0; }

@media (min-width: 700px) {
	.dash__order {
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "main total btn";
	}
	.dash__btn { justify-self: end; }
}

/* --- Telefon --- */
@media (max-width: 900px) {
	.account-navigation-wrap { padding: 12px; }

	/* Menu jako dwie kolumny: siedem pozycji nie miesci sie w pasku,
	   a pionowa lista zajmowalaby caly pierwszy ekran. */
	.woocommerce-MyAccount-navigation li a {
		border: 1px solid var(--line);
		border-left-width: 3px;
		border-radius: var(--r-sm);
		min-height: 46px;
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	.woocommerce-MyAccount-navigation li.is-active a { border-color: var(--line); border-left-color: var(--accent); }
}

/* ==========================================================
   MOJE KONTO - uklad ostateczny

   Wczesniej kolumny rozmieszczal automat siatki i tresc ladowala
   w waskiej kolumnie nawigacji. Przypisujemy je wprost, wiec kolejnosc
   w kodzie przestaje mieć znaczenie.
   ========================================================== */

body.woocommerce-account .sdoc .woocommerce {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	column-gap: var(--s-xl);
	row-gap: var(--s-lg);
	align-items: start;
}
body.woocommerce-account .sdoc .account-navigation-wrap,
body.woocommerce-account .sdoc .woocommerce-MyAccount-navigation {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}
body.woocommerce-account .sdoc .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
}
/* Logowanie i rejestracja to jedna kolumna na calej szerokosci. */
body.woocommerce-account:not(.logged-in) .sdoc .woocommerce { display: block; }

/* Wizytowka klienta nad nawigacja */
body.woocommerce-account .kadence-account-avatar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: var(--s-md);
	margin-bottom: var(--s-md);
	border-bottom: 1px solid var(--line);
}
body.woocommerce-account .kadence-customer-image img { width: 40px; height: 40px; border-radius: 50%; display: block; }
body.woocommerce-account .kadence-customer-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.15;
	color: var(--ink);
	text-transform: none;
	letter-spacing: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Nawigacja: pionowa lista, nie rozsypane pigulki */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 1px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: visible;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; width: 100%; }
body.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .03em;
	text-transform: none;
	white-space: normal;
	color: var(--muted);
}
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: var(--surface); color: var(--ink); }
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--surface);
	border-color: var(--line);
	color: var(--accent);
	box-shadow: inset 3px 0 0 var(--accent);
}
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: #6F6D6A; }
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover { color: var(--error); }

/* ---------- Ostatnie zamowienie ---------- */
.dash__order {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--s-md);
	row-gap: 12px;
	padding: var(--s-md);
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-md);
}
.dash__order-main { grid-column: 1; min-width: 0; }
.dash__total { grid-column: 2; justify-self: end; white-space: nowrap; }
.dash__btn { grid-column: 1 / -1; justify-self: start; }
.dash__nr { font-size: 19px; white-space: nowrap; }
.dash__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dash__status { margin-left: 0; white-space: nowrap; }

/* ==========================================================
   TELEFON
   Siedem pozycji nie zmiesci sie ani w kolumnie, ani w dwoch.
   Robimy z nich pasek zakladek przewijany w poziomie, z aktywna
   pozycja przewinieta na widok przy wejsciu na strone.
   ========================================================== */
@media (max-width: 900px) {
	body.woocommerce-account .sdoc .woocommerce { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-md); }
	body.woocommerce-account .sdoc .account-navigation-wrap,
	body.woocommerce-account .sdoc .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 1; }
	body.woocommerce-account .sdoc .woocommerce-MyAccount-content { grid-column: 1; grid-row: 2; }

	body.woocommerce-account .kadence-account-avatar { padding-bottom: 12px; margin-bottom: 12px; }

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: relative;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		padding-bottom: 2px;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	body.woocommerce-account .woocommerce-MyAccount-navigation li { width: auto; flex: 0 0 auto; scroll-snap-align: start; }
	body.woocommerce-account .woocommerce-MyAccount-navigation a {
		white-space: nowrap;
		border-color: var(--line);
		border-radius: var(--r-pill);
		padding: 10px 16px;
		min-height: 44px;
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
		background: var(--accent);
		border-color: transparent;
		color: #0B0B0C;
		box-shadow: none;
	}

	.dash__order { grid-template-columns: minmax(0, 1fr); }
	.dash__total { grid-column: 1; justify-self: start; font-size: 22px; }
	.dash__btn { width: 100%; justify-content: center; }
	.dash__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   PODSUMOWANIE KOSZYKA - POPRAWKA DUBLI

   WooCommerce wypisuje etykiete dwa razy: raz jako <th>, raz w atrybucie
   data-title komorki. Reszta arkusza dokladala ja jeszcze przez ::before,
   wiec na telefonie bylo "Kwota / Kwota" i "Przesylka / Przesylka".
   W podsumowaniu koszyka zostawiamy wylacznie <th>.
   ========================================================== */
.ecart__side .cart_totals table.shop_table td::before,
.ecart__side .cart_totals table.shop_table th::before { content: none !important; }

.ecart__side .cart_totals table.shop_table {
	width: 100%;
	border-collapse: collapse;
	display: table;
}
.ecart__side .cart_totals table.shop_table tbody { display: table-row-group; }
.ecart__side .cart_totals table.shop_table tr { display: table-row; }
.ecart__side .cart_totals table.shop_table th,
.ecart__side .cart_totals table.shop_table td {
	display: table-cell;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	text-align: left;
}
.ecart__side .cart_totals table.shop_table th {
	width: 40%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	white-space: nowrap;
}
.ecart__side .cart_totals table.shop_table td { text-align: right; }
.ecart__side .cart_totals table.shop_table tr.order-total th,
.ecart__side .cart_totals table.shop_table tr.order-total td { border-bottom: 0; }
.ecart__side .cart_totals table.shop_table tr.order-total td .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	color: var(--accent);
}

/* Wiersz dostawy: metody potrzebuja calej szerokosci, wiec lamiemy go na dwa */
.ecart__side .cart_totals table.shop_table tr.shipping th,
.ecart__side .cart_totals table.shop_table tr.shipping td {
	display: block;
	width: 100%;
	text-align: left;
}
.ecart__side .cart_totals table.shop_table tr.shipping th { padding-bottom: 8px; border-bottom: 0; }
.ecart__side .cart_totals table.shop_table tr.shipping td { padding-top: 0; }

.ecart__side #shipping_method { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ecart__side #shipping_method li { margin: 0; }
.ecart__side #shipping_method label { text-align: left; }
.ecart__side .woocommerce-shipping-destination,
.ecart__side .shipping-calculator-button { text-align: left; }

/* ==========================================================
   METODY DOSTAWY NA PELNA SZEROKOSC

   Wiersz dostawy siedzi w tabeli, wiec mimo display:block na komorce
   szerokosc nadal wyznaczal algorytm kolumn (th mial 40%). Caly wiersz
   musi wyjsc z ukladu tabeli, zeby opcje zajely pelna szerokosc.
   ========================================================== */
.ecart__side .cart_totals table.shop_table tr.shipping {
	display: block;
	width: 100%;
}
.ecart__side .cart_totals table.shop_table tr.shipping th,
.ecart__side .cart_totals table.shop_table tr.shipping td {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.ecart__side #shipping_method,
body #order_review #shipping_method {
	display: grid;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ecart__side #shipping_method li,
body #order_review #shipping_method li { width: 100%; margin: 0; }

.ecart__side #shipping_method label,
body #order_review #shipping_method label {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 14px;
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 15px;
	line-height: 1.3;
	color: var(--ink);
	cursor: pointer;
	text-align: left;
	transition: border-color .15s ease;
}
.ecart__side #shipping_method label:hover,
body #order_review #shipping_method label:hover { border-color: var(--muted); }

/* Kropka wyboru wewnatrz etykiety, zeby caly kafel byl klikalny */
.ecart__side #shipping_method input[type="radio"],
body #order_review #shipping_method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.ecart__side #shipping_method label::before,
body #order_review #shipping_method label::before {
	content: '';
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--muted);
	background: transparent;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ecart__side #shipping_method li:has(input:checked) label,
body #order_review #shipping_method li:has(input:checked) label {
	border-color: var(--accent);
	background: var(--surface);
}
.ecart__side #shipping_method li:has(input:checked) label::before,
body #order_review #shipping_method li:has(input:checked) label::before {
	border-color: var(--accent);
	background: var(--accent);
	box-shadow: inset 0 0 0 4px var(--surface);
}
.ecart__side #shipping_method li:has(input:focus-visible) label,
body #order_review #shipping_method li:has(input:focus-visible) label {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Cena w etykiecie po prawej */
.ecart__side #shipping_method label .woocommerce-Price-amount,
body #order_review #shipping_method label .woocommerce-Price-amount {
	margin-left: auto;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--accent);
	white-space: nowrap;
}

/* ==========================================================
   ZGODA NA REGULAMIN
   Odnosnik ma byc widoczny jako odnosnik - klient musi wiedziec,
   ze moze przeczytac dokument przed zaznaczeniem zgody.
   ========================================================== */
body .woocommerce-terms-and-conditions-wrapper a,
body .woocommerce-terms-and-conditions-checkbox-text a,
body .woocommerce-privacy-policy-text a {
	color: var(--accent);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
body .woocommerce-terms-and-conditions-wrapper a:hover,
body .woocommerce-privacy-policy-text a:hover { color: var(--accent-hover); }

/* ==========================================================
   PODGLAD: NOWY STOS TRYBOW MIESZANIA

   Problem: soft-light i overlay licza wzgledem szarosci 50%. Na czerni
   (#141414) obie funkcje daja niemal zero, wiec komorki znikaly i mata
   stawala sie plaska plama.

   Fizyka: na czarnej powierzchni nadal widac ODBLASKI - swiatlo dodane,
   nie odjete. Dlatego swiatla ida w screen (dodaje), a cienie w multiply
   (mnozy). Oba dzialaja poprawnie na kazdym kolorze, takze skrajnym.

   Kolejnosc warstw w kazdej czesci:
     base x3   lite dno w przyciemnionym odcieniu koloru
     tint      wybrany kolor w masce
     shade     rowki wzoru        -> multiply
     light     grzbiety i odblaski -> screen
     tex       faktura pliku kryjacego (tryb rgb)
     depth     swiatlo od gory     -> screen
     gloss     cien przy dolnej krawedzi -> multiply
   ========================================================== */

/* ---------- Rowki wzoru ----------
   Plik w skali szarosci: grzbiety podciagniete do bieli (multiply ich nie
   rusza), rowki zostaja ciemne i przygaszaja kolor pod spodem. */
.mpv__shade {
	-webkit-mask-image: var(--part-img);
	mask-image: var(--part-img);
	background-image: var(--part-relief-img, var(--part-img));
	background-repeat: no-repeat;
	background-position: var(--art-pos, center);
	background-size: var(--art-size, contain);
	filter: grayscale(1) brightness(var(--part-shadow, 1));
	mix-blend-mode: multiply;
	opacity: calc(var(--part-relief, 0) * 0.55);
	pointer-events: none;
}

/* ---------- Grzbiety i odblaski ----------
   To ta warstwa ratuje ciemne kolory. screen dodaje swiatlo, wiec dziala
   tak samo na czerni jak na bieli. Sila rosnie, gdy kolor jest ciemny
   (--part-lift liczone w JS z luminancji), zeby biala mata sie nie przepalila. */
.mpv__light {
	-webkit-mask-image: var(--part-img);
	mask-image: var(--part-img);
	background-image: var(--part-relief-img, var(--part-img));
	background-repeat: no-repeat;
	background-position: var(--art-pos, center);
	background-size: var(--art-size, contain);
	filter: grayscale(1) brightness(var(--part-bright, 1)) contrast(var(--part-contrast, 1));
	mix-blend-mode: screen;
	opacity: calc(var(--part-relief, 0) * var(--part-lift, 0.5) * 0.72);
	pointer-events: none;
}

/* ---------- Faska z krawedzi maski ----------
   Plaster miodu ma same biale piksele - relief jest wylacznie w kanale alfa.
   Nie ma czego oswietlic, wiec glebie rysujemy cieniem rzucanym przez sama
   maske: jasny rabek od gory, ciemny od dolu, wokol kazdej komorki. */
.mpv__tint {
	background-color: var(--part-color);
	filter: var(--part-bevel-filter, none);
	transition: background-color .25s ease;
}
.mpv__part[data-bevel="1"] {
	--part-bevel-filter:
		drop-shadow(-1px -1px 0 rgba(255, 255, 255, calc(0.30 + 0.35 * var(--part-lift, 0.5))))
		drop-shadow(1px 1.5px 1px rgba(0, 0, 0, 0.55));
}

/* ---------- Faktura plikow kryjacych ----------
   Tryb rgb: wzoru nie ma w masce, wiec caly relief niesie ta warstwa.
   Zamiast soft-light uzywamy overlay z domieszka screen przez opacity. */
.mpv__tex {
	-webkit-mask-image: none;
	mask-image: none;
	background-image: var(--part-img);
	background-repeat: no-repeat;
	background-position: var(--art-pos, center);
	background-size: var(--art-size, contain);
	filter: grayscale(1) brightness(var(--part-bright, 1)) contrast(var(--part-contrast, 1));
	mix-blend-mode: screen;
	opacity: calc(var(--part-tex, 0) * var(--part-lift, 0.5) * 0.6);
	pointer-events: none;
}

/* ---------- Swiatlo sceny ----------
   Rozdzielone na dwie warstwy: gorne swiatlo dodaje (screen), dolny cien
   mnozy (multiply). Wczesniej jeden gradient w soft-light nie robil nic
   na ciemnych kolorach. */
.mpv__depth {
	background-image: linear-gradient(170deg,
		rgba(255, 255, 255, .30) 0%,
		rgba(255, 255, 255, .10) 28%,
		rgba(255, 255, 255, 0) 55%);
	mix-blend-mode: screen;
	opacity: calc(0.45 + 0.55 * var(--part-lift, 0.5));
	pointer-events: none;
}
.mpv__gloss {
	background-image: linear-gradient(170deg,
		rgba(255, 255, 255, 0) 45%,
		rgba(0, 0, 0, .10) 72%,
		rgba(0, 0, 0, .30) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Zmienne czesci: dochodza relief, shadow i bevel. */
.mpv__part--mat {
	--part-relief: var(--mat-relief, 0);
	--part-relief-img: var(--mat-relief-img, var(--mat-img));
	--part-shadow: var(--mat-shadow, 1);
	--part-lift: var(--mat-lift, 0.5);
}
.mpv__part--trim {
	--part-relief: var(--trim-relief, 0);
	--part-relief-img: var(--trim-relief-img, var(--trim-img));
	--part-shadow: var(--trim-shadow, 1);
	--part-lift: var(--trim-lift, 0.5);
}

/* Blend nie moze wyjsc poza czesc - isolation jest juz na .mpv__part. */
.mpv__stage { isolation: isolate; }

@media (prefers-reduced-motion: reduce) {
	.mpv__shade, .mpv__light, .mpv__depth, .mpv__gloss { transition: none; }
}

/* ==========================================================
   PODGLAD: NASYCENIE I DOPASOWANIE WARSTW

   Dwa problemy widoczne na welurze:

   1. Obszycie wygladalo wyblakle. Warstwa swiatel dziala w trybie screen,
      wiec dodaje bialy - przy relief 0.62 i mnozniku jasnosci 2.35 rozjasniala
      caly pasek obszycia, ktory jest waski i nie ma gdzie ukryc przejasnien.
      Lekarstwem jest warstwa w trybie color: zachowuje jasnosc zbudowana
      przez swiatla i cienie, a przywraca barwe i nasycenie wybranego koloru.

   2. Przy krawedzi maty przebijal jasny obrys obszycia, bo sylwetka obszycia
      jest odrobine wieksza niz srodek. Srodek dostaje 1.5% powiekszenia,
      czyli tyle, zeby zakryc szew, nie ruszajac proporcji.
   ========================================================== */

/* ---------- Przywrocenie barwy ----------
   Tryb color bierze odcien i nasycenie z tej warstwy, a jasnosc zostawia
   z tego, co jest pod spodem. Relief zostaje, kolor wraca. */
.mpv__sat {
	background-color: var(--part-color);
	mix-blend-mode: color;
	opacity: var(--part-sat, 0.55);
	pointer-events: none;
	transition: background-color .25s ease;
}

/* Obszycie to waski pasek - potrzebuje mocniejszego przywrocenia barwy
   niz duza powierzchnia srodka. */
.mpv__part--mat { --part-sat: 0.5; }
.mpv__part--trim { --part-sat: 0.8; }

/* Swiatla na obszyciu slabsze: na cienkim pasku ten sam poziom co na macie
   czyta sie jako przepalenie, nie jako polysk. */
.mpv__part--trim .mpv__light {
	opacity: calc(var(--part-relief, 0) * var(--part-lift, 0.5) * 0.38);
}
.mpv__part--trim .mpv__depth {
	opacity: calc(0.3 + 0.35 * var(--part-lift, 0.5));
}

/* ---------- Wyrownanie warstw ----------
   Srodek i obszycie sa eksportowane z tego samego plotna 1024x1024
   i dziela wspolna ramke, wiec musza lezec dokladnie na sobie.
   Proba powiekszenia srodka o 1.5%, zeby zakryc szew, rozjechala obie
   sylwetki: obszycie robilo sie nierowne, szersze u gory niz z boku.
   Zadnych przeksztalcen na czesciach. */
.mpv__part--mat {
	transform: none;
}