/**
 * WERTEC Child — style motywu.
 * Kolory pochodzą wyłącznie z tokenów w style.css.
 */

.wtc-container { max-width: var(--wtc-maxw); margin: 0 auto; padding: 0 20px; }
.wtc-home h1, .wtc-home h2, .wtc-home h3,
.wtc-sechead h2, .wtc-band h2, .wtc-fit h3, .wtc-faq h2, .wtc-adv__head h2 {
	font-family: var(--wtc-font-display);
	text-transform: uppercase;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: .01em;
	color: var(--wtc-ink-strong);
	margin: 0;
}
.wtc-home h1 { font-size: clamp(32px, 5.2vw, 58px); }
.wtc-sechead h2, .wtc-band h2 { font-size: clamp(21px, 3vw, 30px); }

.wtc-eyebrow {
	font-family: var(--wtc-font-mono);
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wtc-soft); display: flex; align-items: center; gap: 8px; margin: 0;
}
.wtc-hex {
	width: 9px; height: 10px; background: var(--wtc-red); flex: none;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.wtc-btn {
	display: inline-block; background: var(--wtc-ink-strong); color: #fff;
	border: 1.5px solid var(--wtc-ink-strong); padding: 12px 20px;
	font-family: var(--wtc-font-display); text-transform: uppercase;
	font-weight: 600; font-size: 16px; letter-spacing: .03em; border-radius: 2px;
	text-decoration: none; cursor: pointer;
}
.wtc-btn:hover { color: #fff; }
/* 0.52.0: zamienione miejscami. Bialy tekst na --wtc-red dawal 4,48:1,
   czyli chybione o wlos wobec progu 4,5:1 — a dotyczylo to WSZYSTKICH
   glownych przyciskow w sklepie. --wtc-red-dark daje 6,16:1 i obok siebie
   roznicy odcienia nie widac. Jasniejsza czerwien zostaje na najechaniu,
   gdzie kontrast tekstu i tak nie decyduje o czytelnosci. */
.wtc-btn--red { background: var(--wtc-red-dark); border-color: var(--wtc-red-dark); }
.wtc-btn--red:hover { background: var(--wtc-red); border-color: var(--wtc-red); }
.wtc-btn--quiet { background: #fff; color: var(--wtc-ink-strong); border-color: var(--wtc-line); }
.wtc-btn--quiet:hover { border-color: var(--wtc-ink-strong); color: var(--wtc-ink-strong); }
.wtc-btn[disabled] { opacity: .4; cursor: not-allowed; }
.wtc-ico { color: inherit; }

/* hero */
.wtc-hero { background: var(--wtc-sand); border-bottom: 1px solid var(--wtc-line); padding: 38px 0; }
.wtc-hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 38px; align-items: end; }
.wtc-lead { color: var(--wtc-ink); max-width: 50ch; margin: 14px 0 0; font-size: 16.5px; }
.wtc-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.wtc-trust { display: flex; gap: 22px; flex-wrap: wrap; }
.wtc-trust__item b {
	display: block; font-family: var(--wtc-font-display); font-size: 19px;
	text-transform: uppercase; color: var(--wtc-ink-strong);
}
.wtc-trust__item span { font-size: 13px; color: var(--wtc-soft); }

/* sections */
.wtc-section { padding: 44px 0; }
.wtc-section--tight { padding-top: 0; }
.wtc-sechead { margin-bottom: 20px; }
.wtc-sechead h2 { margin-top: 8px; }

/* work areas */
/* Sześć obszarów w układzie 2 × 3: pięć w rzędzie robiło wąskie kolumny,
   w których lista pozycji łamała się po jednym słowie. */
.wtc-areas { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--wtc-line); }
.wtc-areas .wtc-area:nth-child(3n) { border-right: 0; }
.wtc-areas .wtc-area:nth-child(-n+3) { border-bottom: 1px solid var(--wtc-line); }
.wtc-area {
	padding: 18px 15px 20px; border-right: 1px solid var(--wtc-line);
	display: block; text-decoration: none; color: inherit;
}
.wtc-area:last-child { border-right: 0; }
.wtc-area:hover { background: var(--wtc-red-soft); }
.wtc-area:hover .wtc-ico { color: var(--wtc-red); }
.wtc-area__n { font-family: var(--wtc-font-mono); font-size: 10.5px; color: var(--wtc-soft); letter-spacing: .14em; display: block; margin-top: 8px; }
.wtc-area h3 { font-size: 19px; margin: 8px 0 8px; }
.wtc-area ul { list-style: none; margin: 0; padding: 0; font-size: 13.5px; color: var(--wtc-soft); }
.wtc-area li { margin-bottom: 3px; }

/* groups */
.wtc-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wtc-group {
	border: 1px solid var(--wtc-line); padding: 17px; display: flex; gap: 13px;
	align-items: flex-start; text-decoration: none; color: inherit;
}
.wtc-group:hover { border-color: var(--wtc-ink-strong); }
.wtc-group:hover .wtc-ico { color: var(--wtc-red); }
.wtc-group h3 { font-size: 17px; }
.wtc-group p { margin: 4px 0 0; font-size: 13px; color: var(--wtc-soft); line-height: 1.45; }
.wtc-group__t { flex: 1; }
.wtc-group__c { font-family: var(--wtc-font-mono); font-size: 11.5px; color: var(--wtc-soft); }

/* band */
.wtc-band { background: var(--wtc-ink-strong); color: #fff; padding: 34px 0; }
.wtc-band .wtc-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.wtc-band h2 { color: #fff; }
.wtc-band p { color: #b3bbbd; margin: 8px 0 0; max-width: 54ch; }

/* product page */
.wtc-specs { width: 100%; border-collapse: collapse; margin: 16px 0; border: 1px solid var(--wtc-line); }
.wtc-specs th, .wtc-specs td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--wtc-line); font-size: 13.5px; }
.wtc-specs th { color: var(--wtc-soft); font-weight: 400; width: 48%; }
.wtc-specs td { font-family: var(--wtc-font-mono); font-size: 13px; color: var(--wtc-ink-strong); }
.wtc-specs tr:last-child th, .wtc-specs tr:last-child td { border-bottom: 0; }

.wtc-fit { border: 1px solid var(--wtc-line); margin: 16px 0; }
.wtc-fit h3 { padding: 12px 14px; border-bottom: 1px solid var(--wtc-line); font-size: 15px; background: var(--wtc-sand); }
.wtc-fit ul { list-style: none; margin: 0; padding: 0; }
.wtc-fit__row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--wtc-line); font-size: 14px; }
.wtc-fit__row:last-child { border-bottom: 0; }
.wtc-fit__sub { padding: 8px 14px 4px; font-family: var(--wtc-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wtc-soft); }
.wtc-fit__sub.is-yes { color: var(--wtc-ok); }
.wtc-fit__row.is-yes { background: color-mix(in srgb, var(--wtc-ok) 9%, transparent); font-weight: 600; }
.wtc-fit__row.is-no { color: var(--wtc-soft); }
.wtc-fit__mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; flex: 0 0 22px; }
.wtc-fit__row.is-yes .wtc-fit__mark { background: var(--wtc-ok); color: #fff; }
.wtc-fit__row.is-no .wtc-fit__mark { background: color-mix(in srgb, var(--wtc-soft) 18%, transparent); color: var(--wtc-soft); text-decoration: none; }

.wtc-help {
	background: var(--wtc-sand); border: 1px solid var(--wtc-line); padding: 15px;
	margin: 16px 0; display: flex; justify-content: space-between; align-items: center;
	gap: 12px; flex-wrap: wrap;
}
.wtc-help span { display: block; color: var(--wtc-soft); font-size: 13.5px; }

/* catalogue tiles */
.wtc-spec {
	display: inline-block; font-family: var(--wtc-font-mono); font-size: 11.5px;
	color: var(--wtc-ink); border: 1px solid var(--wtc-line); padding: 2px 7px;
	background: var(--wtc-sand); margin: 4px 0;
}
.wtc-avail { display: block; font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); margin-top: 4px; }
.wtc-avail.is-in::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wtc-ok); margin-right: 6px; }
.wtc-avail.is-out::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--wtc-warn); margin-right: 6px; }

/* FAQ */
.wtc-faq { border-top: 1px solid var(--wtc-line); margin-top: 30px; padding-top: 24px; }
.wtc-qa { border-bottom: 1px solid var(--wtc-line); padding: 14px 0; }
.wtc-qa summary { cursor: pointer; font-weight: 600; color: var(--wtc-ink-strong); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.wtc-qa summary::-webkit-details-marker { display: none; }
.wtc-qa summary::after { content: '+'; color: var(--wtc-red); font-size: 20px; line-height: 1; }
.wtc-qa[open] summary::after { content: '\2013'; }
.wtc-qa p { margin: 10px 0 0; color: var(--wtc-soft); font-size: 14px; max-width: 74ch; }

/* advisor */
.wtc-advisor { border: 1px solid var(--wtc-line); margin: 0 0 24px; background: #fff; }
.wtc-advisor--empty { padding: 18px; color: var(--wtc-soft); }
.wtc-adv__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--wtc-line); }
.wtc-adv__count { font-family: var(--wtc-font-mono); font-size: 12.5px; color: var(--wtc-soft); }
.wtc-adv__chosen { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 18px 0; }
.wtc-adv__chip { background: var(--wtc-red-soft); border: 1px solid var(--wtc-red); color: var(--wtc-red-dark); padding: 5px 10px; font-size: 12.5px; border-radius: 2px; cursor: pointer; }
.wtc-adv__step { padding: 16px 18px 18px; }
.wtc-adv__n { font-family: var(--wtc-font-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--wtc-soft); margin: 0; }
.wtc-adv__step h3 { margin: 8px 0 6px; }
.wtc-adv__hint { color: var(--wtc-soft); font-size: 14px; margin: 0 0 12px; max-width: 62ch; }
.wtc-adv__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.wtc-adv__opt {
	border: 1px solid var(--wtc-line); background: #fff; padding: 14px;
	text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 62px;
}
.wtc-adv__opt:hover { background: var(--wtc-red-soft); border-color: var(--wtc-red); }
.wtc-adv__opt[disabled] { opacity: .35; cursor: not-allowed; }
.wtc-adv__opt .t { font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700; font-size: 17px; color: var(--wtc-ink-strong); }
.wtc-adv__opt .c { font-family: var(--wtc-font-mono); font-size: 11.5px; color: var(--wtc-soft); }
.wtc-adv__opt .d { font-size: 12.5px; color: var(--wtc-soft); }
.wtc-adv__opt.is-skip .t { color: var(--wtc-soft); }
.wtc-adv__actions { margin: 16px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.wtc-adv__results, .wtc-adv__dead { padding: 16px 18px 20px; }
.wtc-adv__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.wtc-adv__card { border: 1px solid var(--wtc-line); padding: 10px; text-decoration: none; color: inherit; display: block; }
.wtc-adv__card:hover { border-color: var(--wtc-ink-strong); }
.wtc-adv__img { display: block; aspect-ratio: 4/3; background: var(--wtc-sand); margin-bottom: 8px; }
.wtc-adv__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wtc-adv__nm { display: block; font-size: 13.5px; font-weight: 600; color: var(--wtc-ink-strong); line-height: 1.3; }
.wtc-adv__price { display: block; font-family: var(--wtc-font-display); font-size: 19px; font-weight: 700; margin-top: 6px; }
.wtc-adv__dead h3 { margin-bottom: 8px; }

@media (max-width: 900px) {
	.wtc-areas { grid-template-columns: repeat(2, 1fr); }
	.wtc-areas .wtc-area { border-bottom: 1px solid var(--wtc-line); border-right: 1px solid var(--wtc-line); }
	.wtc-areas .wtc-area:nth-child(2n) { border-right: 0; }
	.wtc-areas .wtc-area:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 980px) {
	.wtc-hero__inner { grid-template-columns: 1fr; gap: 22px; }
	.wtc-groups { grid-template-columns: repeat(2, 1fr); }
	.wtc-adv__opts { grid-template-columns: repeat(2, 1fr); }
	.wtc-adv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
	.wtc-areas { grid-template-columns: 1fr; }
	.wtc-areas .wtc-area { border-right: 0; }
	.wtc-areas .wtc-area:last-child { border-bottom: 0; }
	.wtc-groups { grid-template-columns: 1fr; }
	.wtc-adv__opts { grid-template-columns: 1fr; }
	.wtc-section { padding: 32px 0; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* ---------- 0.2.0: ceny katalogowe i funkcje producenckie ---------- */
.wtc-price-label {
	font-family: var(--wtc-font-mono); font-size: 11px; letter-spacing: .16em;
	text-transform: uppercase; color: var(--wtc-soft); margin: 0 0 2px;
}
.wtc-price-net { font-family: var(--wtc-font-mono); font-size: 13px; color: var(--wtc-soft); margin: 2px 0 0; }
.wtc-price-policy { font-size: 12.5px; color: var(--wtc-soft); margin: 10px 0 0; }
.wtc-availability {
	display: flex; align-items: center; gap: 8px; font-size: 14px;
	margin: 12px 0 0; color: var(--wtc-ink);
}
.wtc-availability .wtc-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wtc-availability.is-in .wtc-dot { background: var(--wtc-ok); }
.wtc-availability.is-out .wtc-dot { background: var(--wtc-warn); }

.wtc-docs { border: 1px solid var(--wtc-line); margin: 16px 0; }
.wtc-docs h3 { padding: 12px 14px; border-bottom: 1px solid var(--wtc-line); font-size: 15px; background: var(--wtc-sand); }
.wtc-docs ul { list-style: none; margin: 0; padding: 0; }
.wtc-docs li { border-bottom: 1px solid var(--wtc-line); }
.wtc-docs li:last-child { border-bottom: 0; }
.wtc-docs a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; font-size: 14px; }
.wtc-docs a:hover { background: var(--wtc-red-soft); }
.wtc-doc__ext { font-family: var(--wtc-font-mono); font-size: 10.5px; color: var(--wtc-soft); border: 1px solid var(--wtc-line); padding: 1px 6px; }

.wtc-parts { margin: 34px 0 0; }
.wtc-parts h2 {
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(20px, 2.6vw, 26px); color: var(--wtc-ink-strong); margin: 0 0 14px;
}
.wtc-parts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.wtc-part { border: 1px solid var(--wtc-line); padding: 12px; display: block; }
.wtc-part:hover { border-color: var(--wtc-ink-strong); }
.wtc-part__img { width: 100%; height: auto; display: block; margin-bottom: 8px; }
.wtc-part__n { display: block; font-size: 13.5px; font-weight: 600; color: var(--wtc-ink-strong); line-height: 1.3; }
.wtc-part__s { display: block; font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); margin-top: 3px; }
.wtc-part__p { display: block; font-family: var(--wtc-font-display); font-size: 18px; font-weight: 700; margin-top: 6px; }
.wtc-parts__note { font-family: var(--wtc-font-mono); font-size: 11.5px; color: var(--wtc-soft); margin-top: 10px; }

.wtc-dealer-hint { font-size: 13.5px; color: var(--wtc-soft); margin: 12px 0 0; }
.wtc-dealer-hint a { color: var(--wtc-red-dark); text-decoration: underline; }
.wtc-dealers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wtc-dealer { border: 1px solid var(--wtc-line); padding: 14px; }
.wtc-dealer b { display: block; color: var(--wtc-ink-strong); }
.wtc-dealer span { display: block; font-size: 13px; color: var(--wtc-soft); margin-top: 2px; }
.wtc-dealer__tel { display: inline-block; margin-top: 8px; font-family: var(--wtc-font-mono); font-size: 13px; }
.wtc-dealers__empty { color: var(--wtc-soft); }

@media (max-width: 980px) {
	.wtc-parts__grid { grid-template-columns: repeat(2, 1fr); }
	.wtc-dealers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.wtc-dealers { grid-template-columns: 1fr; }
}

/* ---------- 0.3.1: kafel produktu ---------- */
/* Reguła NIE może zaczynać się od .woocommerce — na stronie głównej nie ma
   tego wrappera, przez co siatka rozjeżdżała się do jednej kolumny. */
ul.products,
.wtc-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
ul.products::before,
ul.products::after { display: none !important; }
ul.products li.product,
.wtc-grid li.product {
	margin: 0 !important; width: auto !important; float: none !important;
	padding: 0 !important; clear: none !important; min-width: 0;
}
ul.products li.product::before,
ul.products li.product::after { display: none !important; }

.wtc-card { border: 1px solid var(--wtc-line); background: #fff; height: 100%; display: flex; flex-direction: column; min-width: 0; }
.wtc-card:hover { border-color: var(--wtc-ink-strong); }
.wtc-card__media {
	display: block; background: var(--wtc-sand); border-bottom: 1px solid var(--wtc-line);
	aspect-ratio: 4 / 3; overflow: hidden; padding: 12px;
}
.wtc-card__media img { width: 100%; height: 100%; object-fit: contain; display: block; margin: 0; }
.wtc-card__body { padding: 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.wtc-card__brand { margin: 0; font-family: var(--wtc-font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--wtc-soft); }
.wtc-card__brand a { color: var(--wtc-red-dark); }
.wtc-card__name {
	margin: 0; font-family: var(--wtc-font-body); font-size: 14.5px; font-weight: 600;
	line-height: 1.32; text-transform: none; letter-spacing: 0;
}
.wtc-card__name a { color: var(--wtc-ink-strong); }
.wtc-card__spec {
	margin: 0; align-self: flex-start; max-width: 100%;
	font-family: var(--wtc-font-mono); font-size: 11.5px; color: var(--wtc-ink);
	border: 1px solid var(--wtc-line); background: var(--wtc-sand); padding: 2px 7px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wtc-card__ids { margin: 0; display: flex; flex-wrap: wrap; gap: 2px 12px; font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); }
.wtc-card__ids b { color: var(--wtc-ink); font-weight: 500; }
.wtc-card__foot { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.wtc-card__price { display: block; font-family: var(--wtc-font-display); font-size: 22px; font-weight: 700; color: var(--wtc-ink-strong); line-height: 1.1; }
.wtc-card__price .amount, .wtc-card__price bdi { font-family: var(--wtc-font-display); }
.wtc-card__price del { display: none; }
.wtc-card__pricelabel { display: block; font-family: var(--wtc-font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--wtc-soft); font-weight: 400; }
.wtc-card__price--ask { font-size: 15px; font-family: var(--wtc-font-body); font-weight: 600; }
.wtc-card__stock { font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.wtc-card__stock .wtc-dot { width: 6px; height: 6px; border-radius: 50%; }
.wtc-card__stock.is-in .wtc-dot { background: var(--wtc-ok); }
.wtc-card__stock.is-out .wtc-dot { background: var(--wtc-warn); }
.wtc-card__cta { padding: 0 13px 13px; }
.wtc-card__cta .button {
	display: block; width: 100%; text-align: center; background: var(--wtc-ink-strong); color: #fff;
	border: 1.5px solid var(--wtc-ink-strong); border-radius: 2px; padding: 10px 14px;
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 600;
	font-size: 15px; letter-spacing: .03em; line-height: 1.2;
}
.wtc-card__cta .button:hover { background: var(--wtc-red); border-color: var(--wtc-red); color: #fff; }
.wtc-card__cta .added_to_cart { display: block; text-align: center; margin-top: 6px; font-size: 12.5px; color: var(--wtc-red-dark); }

/* ---------- 0.3.0: sekcje strony głównej ---------- */
.wtc-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wtc-line); border: 1px solid var(--wtc-line); }
.wtc-benefits li { background: #fff; padding: 20px 18px; }
.wtc-benefits h3 { font-size: 17px; margin: 0 0 6px; }
.wtc-benefits p { margin: 0; font-size: 13.5px; color: var(--wtc-soft); line-height: 1.5; }
.wtc-benefits--trust li { background: var(--wtc-sand); }

.wtc-group__photo { flex: none; width: 56px; height: 56px; display: block; }
.wtc-group__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.wtc-brands { display: flex; flex-wrap: wrap; gap: 8px; }
.wtc-brand {
	border: 1px solid var(--wtc-line); padding: 10px 16px; display: flex; align-items: center; gap: 9px;
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700; font-size: 17px; color: var(--wtc-ink-strong);
}
.wtc-brand:hover { border-color: var(--wtc-red); color: var(--wtc-red-dark); }
.wtc-brand span { font-family: var(--wtc-font-mono); font-size: 11px; font-weight: 400; color: var(--wtc-soft); }

.wtc-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wtc-post { border: 1px solid var(--wtc-line); display: block; }
.wtc-post:hover { border-color: var(--wtc-ink-strong); }
.wtc-post__img { width: 100%; height: auto; display: block; }
.wtc-post h3 { font-size: 17px; margin: 0; padding: 14px 16px 0; }
.wtc-post p { margin: 8px 0 0; padding: 0 16px 16px; font-size: 13.5px; color: var(--wtc-soft); }

.wtc-b2b { background: var(--wtc-sand); border-top: 1px solid var(--wtc-line); border-bottom: 1px solid var(--wtc-line); padding: 34px 0; }
.wtc-b2b .wtc-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.wtc-b2b p { margin: 8px 0 0; max-width: 56ch; color: var(--wtc-ink); }
.wtc-helpcta { padding: 34px 0; }
.wtc-helpcta .wtc-container { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.wtc-helpcta p { margin: 8px 0 0; max-width: 56ch; color: var(--wtc-soft); }

.wtc-topbar { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.wtc-topbar a { color: inherit; }
.wtc-topbar a:hover { color: var(--wtc-red); }
.wtc-footnote { font-family: var(--wtc-font-mono); font-size: 12px; margin: 0; }

@media (max-width: 1080px) {
	/* 0.32.2: decyzja z testów — siatka produktów ma dwa stany: 4 kolumny
	   na desktopie, 2 na wszystkim mniejszym. Trzeci, pośredni stan usunięty. */
	ul.products, .wtc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wtc-benefits { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
	ul.products, .wtc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wtc-posts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.wtc-benefits { grid-template-columns: 1fr; }
	.wtc-card__body { padding: 11px; }
	.wtc-card__cta { padding: 0 11px 11px; }
	.wtc-card__foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---------- 0.3.1: dopracowanie sekcji ---------- */
/* Sekcje potrzebują oddechu i linii, inaczej strona czyta się jak jeden ciąg. */
.wtc-section { padding: 52px 0; }
.wtc-section--tight { padding-top: 0; }
.wtc-sechead { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--wtc-line); }
.wtc-sechead h2 { margin-top: 10px; }
.wtc-eyebrow { margin: 0; }

/* Hero: prawa kolumna nie może zostawiać pustej połowy ekranu */
.wtc-hero { padding: 46px 0 44px; }
.wtc-hero__inner { align-items: center; }
.wtc-trust { gap: 28px; padding-left: 24px; border-left: 3px solid var(--wtc-red); }
.wtc-trust__item b { font-size: 21px; }

/* Kafle kategorii: zdjęcie nie może dominować nad nazwą */
.wtc-group { align-items: center; }
.wtc-group__photo { width: 64px; height: 64px; background: var(--wtc-sand); }
.wtc-group h3 { font-size: 18px; }

/* Pas doradcy i B2B: równa waga typograficzna */
.wtc-band h2, .wtc-b2b h2, .wtc-helpcta h2 { font-size: clamp(21px, 2.8vw, 30px); }
.wtc-helpcta { border-top: 1px solid var(--wtc-line); }

@media (max-width: 980px) {
	.wtc-trust { padding-left: 0; border-left: 0; border-top: 3px solid var(--wtc-red); padding-top: 18px; }
	.wtc-section { padding: 38px 0; }
}

/* ---------- 0.4.0: stopka motywu ---------- */
.wtc-footer { background: var(--wtc-ink-strong); color: #9aa2a4; padding: 48px 0 26px; margin-top: 0; font-size: 13.5px; }
.wtc-footer a { color: #c6cdce; }
.wtc-footer a:hover { color: #fff; }
.wtc-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 28px; }
.wtc-fbrand p { margin: 12px 0 0; max-width: 34ch; }
.wtc-fbrand img, .wtc-fbrand .custom-logo { max-width: 170px; height: auto; filter: brightness(0) invert(1); }
.wtc-flogo { font-family: var(--wtc-font-display); font-weight: 700; font-size: 26px; letter-spacing: .05em; color: #fff; text-transform: uppercase; }
.wtc-fcontact { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; font-family: var(--wtc-font-mono); font-size: 13px; }
.wtc-fphone { font-size: 17px; color: #fff !important; }
.wtc-fcol h4 { color: #fff; margin: 0 0 12px; font-family: var(--wtc-font-mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 400; }
.wtc-fcol ul { list-style: none; margin: 0; padding: 0; }
.wtc-fcol li { margin-bottom: 7px; }
.wtc-footer__bar {
	border-top: 1px solid #3a4245; margin-top: 32px; padding-top: 18px;
	display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	font-family: var(--wtc-font-mono); font-size: 12px;
}
/* 0.52.0: bylo #7e8688 — 3,91:1 na tle stopki, ponizej progu 4,5:1 dla
   tekstu 13,5 px. Korekta z 0.44.0 nie dotarla tutaj, bo barwa byla wpisana
   wprost, z pominieciem tokenu. Teraz ta sama, co reszta tekstu stopki. */
.wtc-footer__policy { color: #9aa2a4; }

@media (max-width: 980px) {
	.wtc-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.wtc-footer__grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- 0.6.0: trzy drzwi ---------- */
.wtc-start { background: var(--wtc-sand); border-bottom: 1px solid var(--wtc-line); padding: 44px 0; }
.wtc-start__lead { margin: 10px 0 0; color: var(--wtc-soft); max-width: 60ch; }
.wtc-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wtc-door { background: #fff; border: 1px solid var(--wtc-line); padding: 22px 20px 20px; display: block; position: relative; }
.wtc-door:hover { border-color: var(--wtc-red); }
.wtc-door:hover .wtc-ico { color: var(--wtc-red); }
.wtc-door .wtc-ico { color: var(--wtc-ink); margin-bottom: 12px; }
.wtc-door__n {
	position: absolute; right: 18px; top: 18px; font-family: var(--wtc-font-mono);
	font-size: 11px; color: var(--wtc-soft);
}
.wtc-door h3 { font-size: 19px; margin: 0 0 6px; }
.wtc-door p { margin: 0 0 14px; font-size: 13.5px; color: var(--wtc-soft); line-height: 1.5; }
.wtc-door__cta { font-family: var(--wtc-font-mono); font-size: 12px; letter-spacing: .06em; color: var(--wtc-red-dark); text-transform: uppercase; }

/* ---------- 0.6.0: wyszukiwarka parametryczna ---------- */
.wtc-filter { border: 1px solid var(--wtc-line); background: #fff; padding: 16px; margin: 0 0 20px; }
.wtc-filter__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wtc-filter__q {
	flex: 1; min-width: 220px; border: 1.5px solid var(--wtc-ink-strong); padding: 10px 13px;
	font: inherit; background: #fff;
}
.wtc-filter__q:focus { outline: 0; border-color: var(--wtc-red); }
.wtc-filter__count { font-family: var(--wtc-font-mono); font-size: 13px; color: var(--wtc-soft); white-space: nowrap; }
.wtc-filter__count b { color: var(--wtc-ink-strong); font-size: 15px; }
.wtc-filter__clear { background: none; border: 1px solid var(--wtc-line); padding: 8px 14px; cursor: pointer; font-size: 13px; }
.wtc-filter__clear:hover { border-color: var(--wtc-ink-strong); }
.wtc-filter__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--wtc-soft); }
.wtc-filter__empty { margin: 14px 0 0; padding: 14px; background: var(--wtc-sand); font-size: 14px; }
.wtc-fchips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.wtc-fchip {
	background: var(--wtc-red-soft); border: 1px solid var(--wtc-red); color: var(--wtc-red-dark);
	padding: 5px 10px; font-size: 12.5px; cursor: pointer; border-radius: 2px;
}
.wtc-fgroups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--wtc-line); }
.wtc-fgroup h4 {
	margin: 0 0 8px; font-family: var(--wtc-font-mono); font-size: 11px; letter-spacing: .12em;
	text-transform: uppercase; color: var(--wtc-soft); font-weight: 400;
}
.wtc-fopts { display: flex; flex-wrap: wrap; gap: 6px; }
.wtc-fopt {
	border: 1px solid var(--wtc-line); background: #fff; padding: 6px 10px; cursor: pointer;
	font-size: 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 2px;
}
.wtc-fopt span { font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); }
.wtc-fopt:hover:not([disabled]) { border-color: var(--wtc-ink-strong); }
.wtc-fopt.is-on { background: var(--wtc-red-soft); border-color: var(--wtc-red); color: var(--wtc-red-dark); font-weight: 600; }
.wtc-fopt[disabled] { opacity: .32; cursor: not-allowed; }

@media (max-width: 980px) {
	.wtc-doors { grid-template-columns: 1fr; }
	.wtc-fgroups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.wtc-fgroups { grid-template-columns: 1fr; }
}

/* ---------- 0.7.0: okruszki i zapytanie o cenę ---------- */
.wtc-crumbs { font-size: 12.5px; color: var(--wtc-soft); padding: 14px 0 0; }
.wtc-crumbs a { color: var(--wtc-soft); }
.wtc-crumbs a:hover { color: var(--wtc-ink-strong); }
.wtc-crumbs__sep { margin: 0 8px; color: var(--wtc-line); }
.wtc-crumbs [aria-current="page"] { color: var(--wtc-ink-strong); font-weight: 600; }

.wtc-inquiry {
	background: var(--wtc-red-soft); border: 1px solid var(--wtc-red); padding: 15px;
	margin: 16px 0; display: flex; justify-content: space-between; align-items: center;
	gap: 14px; flex-wrap: wrap;
}
.wtc-inquiry strong { display: block; color: var(--wtc-ink-strong); }
.wtc-inquiry span { display: block; font-size: 13.5px; color: var(--wtc-ink); margin-top: 2px; }

/* ---------- 0.8.0: grafiki ---------- */
.wtc-hero__side { display: flex; flex-direction: column; gap: 22px; }
.wtc-hero.has-image .wtc-hero__inner { grid-template-columns: 1fr 1fr; align-items: center; }
.wtc-hero__img { width: 100%; height: auto; display: block; }
.wtc-hero.has-image .wtc-trust { border-left: 0; padding-left: 0; gap: 24px; }

.wtc-card__badge {
	position: absolute; left: 10px; top: 10px; z-index: 2;
	background: var(--wtc-red); color: #fff; font-family: var(--wtc-font-mono);
	font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px;
}
.wtc-card { position: relative; }

.wtc-banners { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wtc-banner { position: relative; display: block; overflow: hidden; border: 1px solid var(--wtc-line); background: var(--wtc-sand); }
.wtc-banner img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 21 / 9; }
.wtc-banner__t {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 20px;
	background: linear-gradient( to top, rgba(37,42,43,.88), rgba(37,42,43,0) );
	color: #fff;
}
.wtc-banner__k { display: block; font-family: var(--wtc-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #c6cdce; }
.wtc-banner__t strong {
	display: block; margin-top: 4px; font-family: var(--wtc-font-display);
	text-transform: uppercase; font-size: clamp(19px, 2.4vw, 26px); font-weight: 700;
}
.wtc-banner:hover .wtc-banner__t { background: linear-gradient( to top, rgba(188,36,29,.9), rgba(37,42,43,0) ); }

@media (max-width: 980px) {
	.wtc-hero.has-image .wtc-hero__inner { grid-template-columns: 1fr; }
	.wtc-banners { grid-template-columns: 1fr; }
}

/* Kafle etapów: treść od góry, bez rozpychania.
   Wcześniej lista była dociskana do dołu (`margin-top: auto`), co przy kaflu
   z trzema pozycjami obok kafla z czterema robiło pustą dziurę wyglądającą
   jak brakująca treść. Kafle i tak mają równą wysokość, bo są komórkami
   siatki — dociskanie niczego nie poprawiało. */
.wtc-area { display: block; }

/* Grafiki poglądowe — widocznie odróżnialne od zdjęć produktowych. */
.wtc-placeholder { display: block; width: 100%; height: auto; }
.wtc-banner .wtc-placeholder { aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- 0.10.0: filtr serwerowy ---------- */
.wtc-filter__go {
	background: var(--wtc-ink-strong); color: #fff; border: 1.5px solid var(--wtc-ink-strong);
	padding: 9px 16px; cursor: pointer; font-family: var(--wtc-font-display);
	text-transform: uppercase; font-weight: 600; font-size: 15px; letter-spacing: .03em; border-radius: 2px;
}
.wtc-filter__go:hover { background: var(--wtc-red); border-color: var(--wtc-red); }
.wtc-filter__clear { font-size: 13px; color: var(--wtc-red-dark); text-decoration: underline; }
.wtc-fgroup { border: 0; margin: 0; padding: 0; }
.wtc-fgroup legend {
	padding: 0; margin: 0 0 8px; font-family: var(--wtc-font-mono); font-size: 11px;
	letter-spacing: .12em; text-transform: uppercase; color: var(--wtc-soft);
}
.wtc-fopt {
	border: 1px solid var(--wtc-line); background: #fff; padding: 6px 10px; cursor: pointer;
	font-size: 13px; display: inline-flex; align-items: center; gap: 7px; border-radius: 2px;
}
.wtc-fopt input { margin: 0; accent-color: var(--wtc-red); width: 15px; height: 15px; }
.wtc-fopt__c { font-family: var(--wtc-font-mono); font-size: 11px; color: var(--wtc-soft); }
.wtc-fopt:hover:not(.is-off) { border-color: var(--wtc-ink-strong); }
.wtc-fopt.is-on { background: var(--wtc-red-soft); border-color: var(--wtc-red); color: var(--wtc-red-dark); font-weight: 600; }
.wtc-fopt.is-off { opacity: .32; cursor: not-allowed; }
.wtc-filter[aria-busy="true"] { opacity: .6; }

/* Wprowadzenie pod nagłówkiem sekcji — jedyne miejsce na stronie głównej,
   gdzie dłuższy tekst ma sens: daje kontekst przed listą kategorii. */
.wtc-sechead__lead { margin: 10px 0 0; max-width: 72ch; color: var(--wtc-soft); font-size: 14.5px; }

/* ---------- 0.12.0: teksty ---------- */
.wtc-about { background: var(--wtc-sand); border-top: 1px solid var(--wtc-line); padding: 48px 0; }
.wtc-about__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 34px; align-items: start; }
.wtc-about h2 {
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(21px, 2.8vw, 30px); color: var(--wtc-ink-strong); margin: 0; line-height: 1.05;
}
.wtc-about__body { columns: 2; column-gap: 34px; }
.wtc-about__body p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--wtc-ink); break-inside: avoid; }
.wtc-about__body p:last-child { margin-bottom: 0; }

.wtc-cat-intro { max-width: 74ch; color: var(--wtc-ink); font-size: 15px; margin: 0 0 18px; }

@media (max-width: 980px) {
	.wtc-about__inner { grid-template-columns: 1fr; gap: 18px; }
	.wtc-about__body { columns: 1; }
}

/* ---------- 0.12.2: zdjęcia produktów nie mogą być przycinane ----------
   Kadence ustawia proporcje zdjęcia produktu i wymusza `object-fit: cover`
   z wyższą specyficznością niż nasz kafel. Przy okrągłej tarczy cover ucina
   górę i dół — czyli dokładnie segmenty, po których fachowiec ją rozpoznaje.
   Dlatego tutaj wyjątkowo `!important`: przegrywamy walkę o specyficzność
   z motywem rodzicem, a nie chodzi o kosmetykę, tylko o czytelność produktu. */
.wtc-card__media,
.wtc-card__media a,
.wtc-card .wtc-card__media {
	aspect-ratio: 4 / 3 !important;
	height: auto !important;
	padding: 12px !important;
	overflow: hidden;
	background: var(--wtc-sand);
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.wtc-card__media img,
.wtc-card__media a img,
.woocommerce ul.products li.product .wtc-card__media img {
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center !important;
	margin: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
}

/* Galeria na karcie produktu — ten sam problem, ta sama zasada. */
.woocommerce div.product div.images img {
	object-fit: contain !important;
}

/* ---------- 0.12.3: zabezpieczenie przed rozjechanymi ikonami SVG ----------
   Elementor renderuje ikony jako inline SVG bez atrybutów width/height —
   rozmiar nadaje im własny arkusz. Gdy ten arkusz nie dojedzie (cache, tryb
   drukowania stylów w treści strony, konflikt wtyczek), SVG rozciąga się do
   szerokości rodzica i ikona telefonu zajmuje pół ekranu.

   Motyw nie naprawi cudzego CSS-a, ale może nie pozwolić, żeby taka awaria
   niszczyła całą stronę. Ikony dostają rozmiar tekstu, w którym stoją. */
.elementor-icon svg,
.elementor-icon-list-icon svg,
.elementor-widget-icon svg,
.elementor-widget-icon-box svg,
.elementor-social-icon svg,
.e-font-icon-svg {
	width: 1em !important;
	height: 1em !important;
	max-width: 100%;
	display: inline-block;
	vertical-align: -0.125em;
}

/* Ikona w kafelku „icon box" bywa większa — dajemy jej sensowny sufit,
   zamiast pozwalać rosnąć bez ograniczeń. */
.elementor-widget-icon-box .elementor-icon svg,
.elementor-widget-icon .elementor-icon svg {
	width: 2.5em !important;
	height: 2.5em !important;
}

/* Ostatnia linia obrony: nieoznaczony rozmiarem SVG w treści strony nie może
   być wyższy niż akapit, w którym stoi. Nie dotyczy ikon motywu (.wtc-ico),
   grafik poglądowych ani logo — te mają własne wymiary. */
.entry-content svg:not([width]):not(.wtc-ico):not(.wtc-placeholder),
.wtc-prose svg:not([width]):not(.wtc-ico):not(.wtc-placeholder) {
	max-width: 100%;
	max-height: 3em;
}

/* ---------- 0.13.0: strona o firmie ---------- */
.wtc-ap { padding: 44px 0 8px; }
.wtc-ap__title {
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(26px, 4vw, 44px); line-height: 1.05; color: var(--wtc-ink-strong);
	margin: 12px 0 0; max-width: 22ch;
}
.wtc-ap__lead { margin: 18px 0 0; max-width: 68ch; font-size: 16.5px; line-height: 1.6; }

.wtc-ap-facts { padding: 28px 0; }
.wtc-ap-facts ul {
	list-style: none; margin: 0; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wtc-line);
	border: 1px solid var(--wtc-line);
}
.wtc-ap-facts li { background: #fff; padding: 22px 20px; }
.wtc-ap-facts b {
	display: block; font-family: var(--wtc-font-display); text-transform: uppercase;
	font-size: clamp(22px, 3vw, 30px); font-weight: 700; color: var(--wtc-ink-strong); line-height: 1.05;
}
.wtc-ap-facts span { display: block; margin-top: 6px; font-size: 13.5px; color: var(--wtc-soft); }

.wtc-ap-pillars { padding: 20px 0 40px; }
.wtc-ap-pillars ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wtc-ap-pillars li { border: 1px solid var(--wtc-line); padding: 22px 20px; }
.wtc-ap-pillars h3 { font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700; font-size: 19px; margin: 0 0 8px; color: var(--wtc-ink-strong); }
.wtc-ap-pillars p { margin: 0; font-size: 14px; color: var(--wtc-soft); line-height: 1.55; }

.wtc-ap-cta { padding: 34px 0 48px; }
.wtc-ap-cta .wtc-container { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
	.wtc-ap-facts ul, .wtc-ap-pillars ul { grid-template-columns: 1fr; }
}

/* ---------- 0.13.2: większy kadr zdjęcia w kaflu ----------
   Przy kadrze 4:3 okrągła tarcza wpisuje się w WYSOKOŚĆ, więc po bokach
   zostawał pusty pas, a samo koło było o jedną czwartą mniejsze, niż mogło
   być. Kwadrat wykorzystuje całą szerokość kafla. */
.wtc-card__media,
.wtc-card__media a,
.wtc-card .wtc-card__media {
	aspect-ratio: 1 / 1 !important;
	padding: 8px !important;
}
.wtc-card__media img,
.wtc-card__media a img,
.woocommerce ul.products li.product .wtc-card__media img {
	/* Lekki zapas, żeby krawędź segmentu nie dotykała ramki kafla. */
	max-width: 96% !important;
	max-height: 96% !important;
}

/* Na wąskich ekranach kwadrat zabiera zbyt dużo miejsca przy dwóch kolumnach,
   więc tam wracamy do proporcji 4:3. */
@media (max-width: 560px) {
	.wtc-card__media,
	.wtc-card__media a,
	.wtc-card .wtc-card__media {
		aspect-ratio: 4 / 3 !important;
		padding: 6px !important;
	}
}

/* ---------- 0.14.0: strona kontaktu ---------- */
.wtc-ct { padding: 44px 0 10px; }
.wtc-ct__title {
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(26px, 4vw, 42px); line-height: 1.05; color: var(--wtc-ink-strong);
	margin: 12px 0 0; max-width: 24ch;
}
.wtc-ct__lead { margin: 16px 0 0; max-width: 64ch; font-size: 16.5px; line-height: 1.6; }
.wtc-ct__grid {
	list-style: none; margin: 28px 0 0; padding: 0; display: grid;
	grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--wtc-line);
	border: 1px solid var(--wtc-line);
}
/* Kontakt ma zawsze cztery kafle, więc sztywne cztery kolumny są tam
   poprawne. Serwis i zapytanie mają ich tyle, ile jest wypełnionych danych —
   przy dwóch sztywna siatka zostawiłaby dwie puste komórki z obramowaniem,
   czyli dziurę wyglądającą na błąd. Auto-fit układa je na całą szerokość
   niezależnie od liczby. */
.wtc-ct__grid--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.wtc-ct__tile { background: #fff; padding: 20px 18px; }
.wtc-ct__tile .wtc-ico { color: var(--wtc-red); margin-bottom: 12px; }
.wtc-ct__label {
	display: block; font-family: var(--wtc-font-mono); font-size: 10.5px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--wtc-soft);
}
.wtc-ct__value {
	display: block; margin-top: 6px; font-family: var(--wtc-font-display);
	font-size: 21px; font-weight: 700; color: var(--wtc-ink-strong); line-height: 1.2;
	word-break: break-word;
}
.wtc-ct__value a { color: inherit; }
.wtc-ct__value a:hover { color: var(--wtc-red-dark); }

.wtc-ct-map { padding: 24px 0; }
/* Przycisk mapy taki sam jak reszta akcji w sklepie (0.49.16). Obrys
   z szarą ramką czytał się jak pole formularza, a to jest przycisk. */
.wtc-ct-map summary {
	cursor: pointer; font-family: var(--wtc-font-display); text-transform: uppercase;
	font-weight: 600; font-size: 16px; letter-spacing: .03em; color: #fff;
	border: 0; display: inline-block; padding: 12px 22px;
	border-radius: var(--wtc-radius-sm, 10px);
	background: var(--wtc-red);
	list-style: none;
}
.wtc-ct-map summary::-webkit-details-marker { display: none; }
.wtc-ct-map summary::marker { content: ''; }
.wtc-ct-map summary:hover { background: var(--wtc-red-dark); color: #fff; }
.wtc-ct-map summary:focus-visible {
	outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 2px;
}
.wtc-ct-map__frame { margin-top: 14px; border: 1px solid var(--wtc-line); }
.wtc-ct-map__frame iframe { display: block; width: 100%; height: 420px; border: 0; }

.wtc-ct-form { padding: 10px 0 40px; }
.wtc-ct-form h2 {
	font-family: var(--wtc-font-display); text-transform: uppercase; font-weight: 700;
	font-size: clamp(21px, 2.8vw, 30px); color: var(--wtc-ink-strong); margin: 0 0 10px;
}
.wtc-ct-form p { max-width: 64ch; color: var(--wtc-soft); margin: 0 0 20px; }
/* Podpowiedź pod formularzem. Nie schodzę poniżej 15px — klienci sklepu to
   w większości osoby po czterdziestce i drobny szary tekst jest dla nich
   nieczytelny, a to jest informacja użytkowa, nie ozdobnik. */
.wtc-ct-form__hint {
	max-width: 64ch; margin: 16px 0 0; font-size: 15px;
	color: var(--wtc-soft);
}

/* --------------------------------------------------------------
   FORMULARZ KONTAKTOWY (Fluent Forms)  (0.49.12)

   Wtyczka rysuje własny niebieski przycisk i własne pola. Motyw ma
   trzy inne miejsca, w których człowiek coś wpisuje — zamówienie,
   newsletter, wyszukiwarka — i wszystkie wyglądają tak samo. Czwarty
   styl na stronie kontaktu czytałby się jak wklejony z innego serwisu.

   Reguły są ZAWĘŻONE do `.wtc-ct-form`, żeby nie ruszyć formularzy
   wstawionych gdzie indziej.
   -------------------------------------------------------------- */
.wtc-ct-form .ff-el-group { margin-bottom: 1rem; }

.wtc-ct-form .ff-el-input--label label {
	font-weight: 600;
	color: var(--wtc-ink-strong);
}
.wtc-ct-form .ff-el-input--label.ff-el-is-required label:after {
	color: var(--wtc-red);
}

.wtc-ct-form .ff-el-form-control {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1.5px solid var(--wtc-line);
	border-radius: var(--wtc-radius-sm, 10px);
	background: var(--wtc-white, #fff);
	color: var(--wtc-ink-strong);
	font: 400 15px/1.4 var(--wtc-font-body);
	box-shadow: none;
}
.wtc-ct-form textarea.ff-el-form-control { min-height: 160px; }

.wtc-ct-form .ff-el-form-control:focus {
	border-color: var(--wtc-red);
	outline: 2px solid var(--wtc-focus, #1d6fb8);
	outline-offset: 1px;
}

/* Przycisk taki sam jak „Zapisz się" w newsletterze i „Dalej" w zamówieniu.
   **Kolory z `!important`**, bo Fluent Forms wpisuje tło i kolor tekstu
   w atrybut `style` samego przycisku — a styl w atrybucie wygrywa z każdą
   regułą arkusza, która o to nie prosi. Reszta właściwości nie potrzebuje
   wzmocnienia, więc go nie dostaje. */
.wtc-ct-form .ff-btn-submit,
.wtc-ct-form .ff_btn_style,
.wtc-ct-form button.ff-btn-submit {
	min-height: 48px;
	padding: 0 1.6rem;
	border: 0 !important;
	border-radius: var(--wtc-radius-sm, 10px) !important;
	background: var(--wtc-red) !important;
	background-color: var(--wtc-red) !important;
	background-image: none !important;
	color: #fff !important;
	font-family: var(--wtc-font-display);
	font-weight: 600;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
	box-shadow: none !important;
}
.wtc-ct-form .ff-btn-submit:hover,
.wtc-ct-form .ff_btn_style:hover,
.wtc-ct-form button.ff-btn-submit:hover {
	background: var(--wtc-red-dark) !important;
	background-color: var(--wtc-red-dark) !important;
	color: #fff !important;
}
.wtc-ct-form .ff-btn-submit:focus-visible {
	outline: 2px solid var(--wtc-focus, #1d6fb8);
	outline-offset: 2px;
}

/* Przycisk do lewej, pod polami — wyrzucony na prawą krawędź wygląda
   jak „dalej" w kreatorze, a to jest koniec formularza. */
.wtc-ct-form .ff-el-group.ff-text-right { text-align: left; }

.wtc-ct-form .ff-el-is-error .ff-el-form-control { border-color: var(--wtc-red); }
.wtc-ct-form .text-danger, .wtc-ct-form .error {
	color: var(--wtc-red-dark);
	font-size: .88rem;
}

.wtc-ct-form .ff-message-success {
	padding: 1rem 1.15rem;
	border: 1px solid var(--wtc-line);
	border-left: 4px solid var(--wtc-ok);
	border-radius: var(--wtc-radius-sm, 10px);
	background: var(--wtc-sand);
	color: var(--wtc-ink-strong);
}

.wtc-ct-legal { padding: 0 0 40px; }
.wtc-ct-legal p { font-family: var(--wtc-font-mono); font-size: 12.5px; color: var(--wtc-soft); margin: 0; }

@media (max-width: 900px) { .wtc-ct__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wtc-ct__grid { grid-template-columns: 1fr; } }


/* ---------- 0.14.2: kafle etapów, poprawka ----------
   Numer etapu dostał w 0.14.1 ramkę i tło, ale w kontenerze elastycznym
   rozciągnął się na całą szerokość kafla i zrobił z siebie szary pasek.
   Wracamy do skromnej etykiety — ma podpisywać kafel, a nie z nim konkurować. */
.wtc-area__n {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--wtc-font-mono);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wtc-soft);
}
/* Ikony w kolorze marki. Ciemniejszy odcień czerwieni, nie pełny:
   sześć ikon w pełnym nasyceniu konkurowałoby z czerwonym przyciskiem
   w hero. Pełna czerwień zostaje na hover, czyli na moment interakcji. */
.wtc-area .wtc-ico { color: var(--wtc-red-dark); margin-bottom: 16px; }
.wtc-area:hover .wtc-ico { color: var(--wtc-red); }
.wtc-area:hover .wtc-area__n { color: var(--wtc-red-dark); }
.wtc-area h3 { margin: 0 0 12px; }
.wtc-area ul { margin: 0; padding: 0; font-size: 14px; line-height: 1.75; }

/* ---------- 0.14.3: ikony w kolorze marki, spójnie ----------
   Do tej pory czerwień pojawiała się tylko na przyciskach, więc całe sekcje
   nawigacyjne były szare i nie wiązały się z identyfikacją. Ikony dostają
   ciemniejszy odcień, a pełna czerwień zostaje na hover — inaczej sześć
   nasyconych ikon konkurowałoby z głównym przyciskiem. */
.wtc-group .ico,
.wtc-group .wtc-ico,
.wtc-door .wtc-ico { color: var(--wtc-red-dark); }
.wtc-group:hover .ico,
.wtc-group:hover .wtc-ico,
.wtc-door:hover .wtc-ico { color: var(--wtc-red); }

/* ---------- 0.15.0: rekomendacja producenta ---------- */
.wtc-card__badge--reco { background: var(--wtc-ink-strong); }
.wtc-reco {
	border: 1px solid var(--wtc-ink-strong); border-left: 4px solid var(--wtc-red);
	padding: 15px; margin: 16px 0; background: #fff;
}
.wtc-reco__label {
	margin: 0; font-family: var(--wtc-font-mono); font-size: 10.5px;
	letter-spacing: .16em; text-transform: uppercase; color: var(--wtc-red-dark);
}
.wtc-reco__why { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--wtc-ink-strong); }

/* ---------- 0.15.1: kafle kategorii ze zdjęciem ----------
   Kategoria ze zdjęciem czyta się szybciej niż z nazwy: widać, czy w środku
   są klipsy, czy przecinarki. Kafel bez miniatury zostaje w wariancie
   z ikoną — brak jednego zdjęcia nie może rozbić całej siatki. */
.wtc-group.has-photo {
	display: block;
	padding: 0;
	overflow: hidden;
}
.wtc-group.has-photo .wtc-group__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	background: var(--wtc-sand);
	border-bottom: 1px solid var(--wtc-line);
	margin: 0;
}
.wtc-group.has-photo .wtc-group__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wtc-group.has-photo .wtc-group__t { display: block; padding: 16px 18px 0; }
.wtc-group.has-photo .wtc-group__c {
	display: block;
	padding: 8px 18px 16px;
	font-family: var(--wtc-font-mono);
	font-size: 11.5px;
	color: var(--wtc-soft);
}
.wtc-group.has-photo:hover .wtc-group__photo img { opacity: .92; }
.wtc-group.has-photo h3 { font-size: 19px; }
.wtc-group.has-photo p { margin-top: 6px; }

/* ============================================================
   0.16.0 — ODŚWIEŻENIE WIZUALNE
   Zmienia się warstwa wizualna, nie struktura ani logika.
   Kierunek: mniej surowo, więcej powietrza, zaokrąglenia zamiast
   ostrych ramek, nagłówki czytane jak zdanie, a nie jak tabliczka.
   ============================================================ */

/* --- Typografia: koniec z wersalikami wszędzie --------------
   Kondensowane wersaliki działają na krótkiej etykiecie, ale w nagłówku
   sekcji zmuszają do czytania litera po literze. Zwykła wielkość liter
   i szeroki krój czytają się szybciej i wyglądają nowocześniej. */
.wtc-home h1, .wtc-home h2, .wtc-home h3,
.wtc-sechead h2, .wtc-band h2, .wtc-fit h3, .wtc-faq h2, .wtc-adv__head h2,
.wtc-ap__title, .wtc-ct__title, .wtc-parts h2, .wtc-ct-form h2,
.wtc-about h2, .wtc-b2b h2, .wtc-helpcta h2, .wtc-prod h2, .wtc-ap-facts b,
.wtc-ap-pillars h3, .wtc-area h3, .wtc-group h3, .wtc-benefits h3,
.wtc-door h3, .wtc-post h3, .wtc-brand, .price, .wtc-card__price,
.wtc-ct__value, .wtc-trust__item b {
	font-family: var(--wtc-font-body) !important;
	text-transform: none !important;
	letter-spacing: -.02em !important;
	font-weight: 700 !important;
}
.wtc-home h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; }
.wtc-sechead h2 { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
.wtc-lead, .wtc-sechead__lead { font-size: 17px; line-height: 1.65; }

/* --- Przyciski: zaokrąglone, wyraźniejsze ------------------- */
.wtc-btn, .wtc-card__cta .button, .wtc-filter__go, .wtc-ct-map summary,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
	border-radius: var(--wtc-radius-pill) !important;
	text-transform: none !important;
	font-family: var(--wtc-font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	font-size: 15px !important;
	padding: 13px 26px !important;
}
.wtc-btn--red { box-shadow: 0 10px 22px -12px rgba(225, 50, 42, .8); }

/* --- Karty i kafle: zaokrąglenia zamiast ramek -------------- */
.wtc-card, .wtc-group, .wtc-area, .wtc-benefits li, .wtc-door,
.wtc-post, .wtc-ap-pillars li, .wtc-ap-facts li, .wtc-ct__tile,
.wtc-part, .wtc-banner, .wtc-filter, .wtc-advisor, .wtc-reco,
.wtc-docs, .wtc-fit, .wtc-help, .wtc-inquiry, .wtc-specs {
	border-radius: var(--wtc-radius) !important;
	border-color: transparent !important;
	box-shadow: var(--wtc-shadow);
	background: #fff;
	overflow: hidden;
}
.wtc-card:hover, .wtc-group:hover, .wtc-door:hover, .wtc-post:hover, .wtc-part:hover {
	box-shadow: var(--wtc-shadow-hover);
	transform: translateY(-2px);
}
.wtc-card, .wtc-group, .wtc-door, .wtc-post, .wtc-part { transition: transform .18s ease, box-shadow .18s ease; }

/* Siatki dostają odstęp zamiast wspólnych krawędzi */
.wtc-areas, .wtc-benefits, .wtc-ap-facts ul, .wtc-ct__grid {
	background: none !important;
	border: 0 !important;
	gap: 16px !important;
}
.wtc-area { border-right: 0 !important; border-bottom: 0 !important; padding: 26px 24px 28px !important; }
.wtc-benefits li, .wtc-ap-facts li, .wtc-ct__tile { padding: 24px 22px !important; }
.wtc-benefits--trust li { background: #fff !important; }
ul.products, .wtc-grid { gap: 18px !important; }
.wtc-groups { gap: 18px; }

/* --- Sekcje: więcej powietrza ------------------------------- */
.wtc-section { padding: 72px 0; }
.wtc-section--tight { padding-top: 0; }
.wtc-sechead { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; }
.wtc-hero { padding: 64px 0 60px; background: linear-gradient(180deg, #fff 0%, var(--wtc-sand) 100%); border-bottom: 0; }
.wtc-hero__img { border-radius: var(--wtc-radius) !important; box-shadow: var(--wtc-shadow-hover); }

/* --- Bloki wezwania: czerwony na pełną szerokość ------------ */
.wtc-band, .wtc-helpcta {
	background: var(--wtc-red) !important;
	color: #fff;
	border: 0 !important;
	padding: 56px 0;
}
.wtc-band h2, .wtc-helpcta h2 { color: #fff !important; font-size: clamp(28px, 3.6vw, 44px); }
.wtc-band p, .wtc-helpcta p { color: rgba(255, 255, 255, .92) !important; font-size: 17px; }
.wtc-band .wtc-btn, .wtc-helpcta .wtc-btn {
	background: #fff !important; color: var(--wtc-red-dark) !important; border-color: #fff !important;
}
.wtc-band .wtc-btn:hover, .wtc-helpcta .wtc-btn:hover { background: var(--wtc-ink-strong) !important; color: #fff !important; }

/* --- Nadtytuły: czerwone, bez heksagonu przy każdym --------- */
.wtc-eyebrow {
	color: var(--wtc-red-dark);
	font-family: var(--wtc-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
}
.wtc-hex { width: 8px; height: 9px; }

/* --- Stopka: zaokrąglone linki, luźniej -------------------- */
.wtc-footer { padding: 64px 0 32px; }

/* --- Pasek zaufania w hero -------------------------------- */
.wtc-trust { border-left: 0 !important; padding-left: 0 !important; gap: 32px; }
.wtc-trust__item b { font-size: 20px; }

@media (max-width: 980px) {
	.wtc-section { padding: 48px 0; }
	.wtc-band, .wtc-helpcta { padding: 40px 0; }
}

/* ============================================================
   0.17.0 — CHARAKTER: PRECYZJA ZAMIAST OZDOBNIKÓW
   „Industrialnie" w tej branży nie znaczy żółto-czarnych pasów ani
   tekstury betonu — fachowiec czyta to jako przebranie. Znaczy:
   dane w kroju maszynowym, ostry kadr tam, gdzie są liczby, rytm
   ciemnych i jasnych sekcji zamiast jednolitej bieli.
   ============================================================ */

/* --- Rytm sekcji ------------------------------------------
   Sześć sekcji na tym samym tle czyta się jak jedna długa. Naprzemienne
   tła dzielą stronę na rozdziały i dają oku punkty zaczepienia. */
.wtc-section:nth-of-type(even) { background: #fff; }
.wtc-section:nth-of-type(odd) { background: var(--wtc-sand); }
.wtc-home > .wtc-section { position: relative; }

/* --- Sekcja producencka na grafitowym tle ------------------
   Jeden ciemny blok w środku strony robi za kontrapunkt: po nim biel
   znów wygląda na biel, a nie na domyślne tło. */
.wtc-about {
	background: var(--wtc-ink-strong) !important;
	color: #fff;
	border: 0 !important;
}
.wtc-about h2 { color: #fff !important; }
.wtc-about__body p { color: rgba(255, 255, 255, .86) !important; }

/* --- Dane: krój maszynowy i ostry kadr ---------------------
   Parametr to jedyna rzecz, którą glazurnik czyta uważnie. Zaokrąglona,
   miękka tabelka mówi „opis"; ostra i monospace mówi „karta katalogowa". */
.wtc-specs {
	border-radius: 0 !important;
	box-shadow: none !important;
	border: 1px solid var(--wtc-line) !important;
	overflow: visible !important;
}
.wtc-specs td { font-family: var(--wtc-font-mono) !important; font-size: 13.5px; }
.wtc-specs th { font-size: 13px; }
.wtc-card__spec {
	border-radius: 3px !important;
	border-left: 3px solid var(--wtc-red) !important;
	background: var(--wtc-sand);
	font-family: var(--wtc-font-mono) !important;
}
.wtc-card__ids { font-family: var(--wtc-font-mono) !important; }
.wtc-card__price, .price, .wtc-ct__value {
	font-variant-numeric: tabular-nums;
}

/* --- Znacznik krawędzi na kaflu produktu -------------------
   Cienka czerwona krawędź pojawia się przy najechaniu: sygnał, że kafel
   jest interaktywny, bez dokładania kolejnego koloru na stałe. */
.wtc-card { border-top: 3px solid transparent !important; }
.wtc-card:hover { border-top-color: var(--wtc-red) !important; }

/* --- Przyciski w kaflach: lżejsze --------------------------
   Trzy czarne pigułki obok siebie ciążyły bardziej niż cena. Przycisk
   w kaflu jest teraz obrysowany, a wypełniony dopiero pod kursorem. */
.wtc-card__cta .button {
	background: #fff !important;
	color: var(--wtc-ink-strong) !important;
	border: 1.5px solid var(--wtc-ink-strong) !important;
	box-shadow: none !important;
}
.wtc-card__cta .button:hover {
	background: var(--wtc-ink-strong) !important;
	color: #fff !important;
	border-color: var(--wtc-ink-strong) !important;
}

/* --- Nadtytuł sekcji: znacznik zamiast kropki --------------
   Krótka czerwona kreska czyta się jak oznaczenie na rysunku technicznym
   i nie udaje ikony. */
.wtc-eyebrow::before {
	width: 22px !important;
	height: 3px !important;
	background: var(--wtc-red) !important;
	clip-path: none !important;
	border-radius: 2px;
}

/* --- Hero: subtelna siatka modułowa ------------------------
   Delikatna siatka w tle, w skali 40 px — nawiązanie do fugi i rysunku
   technicznego. Ma być zauważalna dopiero, gdy się jej poszuka. */
.wtc-hero {
	background-image:
		linear-gradient(180deg, #fff 0%, var(--wtc-sand) 100%),
		linear-gradient(to right, rgba(37, 42, 43, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(37, 42, 43, .045) 1px, transparent 1px);
	background-size: auto, 40px 40px, 40px 40px;
}

/* --- Ikony etapów: mocniejszy kontur ----------------------- */
.wtc-area .wtc-ico { stroke-width: 1.9; }

/* ---------- 0.18.0: czy ten produkt jest dla Ciebie ---------- */
.wtc-fitp { margin: 34px 0 0; }
.wtc-fitp__title { font-size: clamp(22px, 2.8vw, 30px); font-weight: 700; margin: 0 0 18px; color: var(--wtc-ink-strong); }
.wtc-fitp__specs {
	list-style: none; margin: 0 0 18px; padding: 0; display: grid;
	grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wtc-line);
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius); overflow: hidden;
}
.wtc-fitp__specs li { background: #fff; padding: 16px 18px; }
.wtc-fitp__k {
	display: block; font-family: var(--wtc-font-mono); font-size: 10.5px;
	letter-spacing: .14em; text-transform: uppercase; color: var(--wtc-soft);
}
.wtc-fitp__v { display: block; margin-top: 5px; font-weight: 600; color: var(--wtc-ink-strong); }

.wtc-fitp__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.wtc-fitp__col { border-radius: var(--wtc-radius); padding: 22px 24px; box-shadow: var(--wtc-shadow); background: #fff; }
.wtc-fitp__col h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.wtc-fitp__col ul { margin: 0; padding: 0; list-style: none; }
.wtc-fitp__col li { position: relative; padding-left: 26px; margin-bottom: 9px; line-height: 1.5; }
.wtc-fitp__col li::before {
	position: absolute; left: 0; top: 0; font-weight: 700; font-size: 15px;
}
.wtc-fitp__col.is-yes { border-top: 3px solid var(--wtc-ok); }
.wtc-fitp__col.is-yes h3 { color: var(--wtc-ok); }
.wtc-fitp__col.is-yes li::before { content: '\2713'; color: var(--wtc-ok); }
.wtc-fitp__col.is-no { border-top: 3px solid var(--wtc-red); }
.wtc-fitp__col.is-no h3 { color: var(--wtc-red-dark); }
.wtc-fitp__col.is-no li::before { content: '\2715'; color: var(--wtc-red); }

@media (max-width: 900px) {
	.wtc-fitp__specs { grid-template-columns: 1fr; }
	.wtc-fitp__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   0.19.0 — WŁASNY PODPIS: CIEMNE HERO
   Sklepy dystrybutorów w tej branży idą w biel z czerwonym akcentem.
   Producent może sobie pozwolić na przeciwną decyzję: grafitowy pierwszy
   ekran, na którym narzędzie i czerwień są jedynymi jasnymi punktami.
   Przełącznik: Dostosuj → WERTEC — strona główna → hero style.
   ============================================================ */
.wtc-hero.is-dark {
	background-image:
		linear-gradient(180deg, #1b1f20 0%, var(--wtc-ink-strong) 100%),
		linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: auto, 40px 40px, 40px 40px;
	color: #fff;
}
.wtc-hero.is-dark h1 { color: #fff; }
.wtc-hero.is-dark .wtc-lead { color: rgba(255, 255, 255, .82); }
/* Rozjaśniona czerwień na ciemnym tle robi się łososiowa — to kolor spoza
   identyfikacji. Nadtytuł idzie więc na jasny neutralny, a znacznik zostaje
   w pełnej czerwieni marki: kolor pojawia się w kresce, nie w literach. */
.wtc-hero.is-dark .wtc-eyebrow { color: #d7dcdd; }
.wtc-hero.is-dark .wtc-eyebrow::before { background: var(--wtc-red) !important; }
.wtc-hero.is-dark .wtc-trust__item b { color: #fff; }
.wtc-hero.is-dark .wtc-trust__item span { color: rgba(255, 255, 255, .62); }
.wtc-hero.is-dark .wtc-btn--quiet {
	background: transparent !important;
	color: #fff !important;
	border-color: rgba(255, 255, 255, .38) !important;
}
.wtc-hero.is-dark .wtc-btn--quiet:hover {
	background: #fff !important;
	color: var(--wtc-ink-strong) !important;
	border-color: #fff !important;
}
.wtc-hero.is-dark .wtc-hero__img {
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
	border: 1px solid rgba(255, 255, 255, .08);
}

/* Sekcja pod ciemnym hero nie może zaczynać się kolejnym ciemnym blokiem —
   kontrast działa tylko wtedy, gdy po nim przychodzi jasność. */
.wtc-hero.is-dark + .wtc-section { background: #fff; }

/* Zaokrąglenia odrobinę ciaśniejsze niż u dystrybutorów: 14 px czyta się
   miękko, 10 px nadal przyjaźnie, ale bliżej narzędzia niż aplikacji. */
:root { --wtc-radius: 10px; --wtc-radius-sm: 8px; }

/* Kafel wyniku doradcy: stan ładowania zamiast pustej ramki. */
.wtc-adv__img { position: relative; overflow: hidden; border-radius: var(--wtc-radius-sm); }
.wtc-adv__img.is-loading::after {
	content: ''; position: absolute; inset: 0;
	background: linear-gradient( 90deg, var(--wtc-sand) 0%, #eceeef 50%, var(--wtc-sand) 100% );
	background-size: 200% 100%;
	animation: wtcShimmer 1.1s linear infinite;
}
.wtc-adv__img.is-empty { background: var(--wtc-sand); }
@keyframes wtcShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
	.wtc-adv__img.is-loading::after { animation: none; }
}

/* ---------- 0.20.1: mniej zaokrąglone przyciski ----------
   Pigułka pasuje do aplikacji; przy narzędziach czyta się miękko i trochę
   nie na miejscu. Wyraźny, ale spokojny promień zostawia charakter
   sklepu technicznego, nie odbierając lekkości układowi. */
:root { --wtc-radius-pill: 6px; }

.wtc-btn, .wtc-card__cta .button, .wtc-filter__go, .wtc-ct-map summary,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wtc-adv__opt, .wtc-fchip, .wtc-fopt,
.wtc-filter__clear, .wtc-adv__chip, .wtc-chip, .wtc-applic a, .wtc-variants a {
	border-radius: 6px !important;
}

/* Pola formularzy w tym samym rytmie co przyciski. */
.wtc-filter__q, .wtc-search input, .wtc-nform input, .qty, .wtc-ct-form input,
.wtc-ct-form textarea, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select {
	border-radius: 6px !important;
}

/* ---------- 0.21.0: przycisk w kaflu na telefonie ----------
   Etykieta „Dodaj do koszyka" nie mieści się w jednej linii na wąskim
   ekranie. Motyw rodzic dokłada do niej strzałkę przez pseudoelement,
   a przy `white-space: nowrap` tekst wychodził poza obrys przycisku.
   Przycisk musi umieć być dwuliniowy. */
.wtc-card__cta .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	white-space: normal !important;
	line-height: 1.25 !important;
	min-height: 46px;
	padding: 11px 14px !important;
	font-size: 14.5px !important;
	box-sizing: border-box;
	width: 100%;
	/* Łamanie TYLKO między wyrazami. `overflow-wrap: anywhere` rozcinało
	   „koszyka" na „koszy / ka" — gorsze niż problem, który miało naprawić. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* Strzałka motywu rodzica bywa osobną ikoną w środku przycisku, nie
   pseudoelementem — samo `content: none` jej nie usuwa. */
.wtc-card__cta .button svg,
.wtc-card__cta .button img,
.wtc-card__cta .button .kadence-svg-iconset,
.wtc-card__cta .button .kt-button-icon {
	display: none !important;
}
/* Strzałka rodzica: nie na kaflu — przy dwóch liniach ląduje w losowym miejscu. */
.wtc-card__cta .button::after,
.wtc-card__cta .button::before { content: none !important; }

@media (max-width: 560px) {
	.wtc-card__name { font-size: 14px; }
	.wtc-card__cta .button { font-size: 14px !important; min-height: 44px; }
}

/* ---------- 0.21.2: przycisk zakupu na karcie produktu ----------
   Formularz koszyka na karcie produktu nie przechodził przez nasze reguły
   i dziedziczył kolor motywu rodzica (brązowy), przez co najważniejszy
   przycisk w całym sklepie był w kolorze spoza identyfikacji. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt {
	background: var(--wtc-red) !important;
	border: 1.5px solid var(--wtc-red) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	padding: 14px 28px !important;
	border-radius: 6px !important;
	box-shadow: 0 10px 22px -12px rgba(225, 50, 42, .8);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--wtc-red-dark) !important;
	border-color: var(--wtc-red-dark) !important;
}
.woocommerce div.product form.cart .button svg,
.woocommerce div.product .single_add_to_cart_button svg { display: none !important; }

/* Pole ilości w tym samym rytmie co przycisk. */
.woocommerce div.product form.cart .quantity .qty {
	height: 100%;
	min-height: 50px;
	border: 1.5px solid var(--wtc-line) !important;
	border-radius: 6px !important;
	font-family: var(--wtc-font-mono);
	font-size: 15px;
	text-align: center;
}
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .quantity { margin: 0 !important; }

@media (max-width: 560px) {
	.woocommerce div.product form.cart .button { flex: 1; min-width: 60%; }
	/* Dwie kolumny kafli na telefonie: krótsza nazwa i mniejszy kadr, żeby
	   na ekran wchodziły dwa produkty, a nie półtora. */
	.wtc-card__name { font-size: 13.5px; line-height: 1.3; }
	.wtc-card__body { padding: 11px; gap: 5px; }
	.wtc-card__cta { padding: 0 11px 11px; }
	.wtc-card__price { font-size: 19px; }
}

/* ---------- 0.21.3: widoczny przycisk menu na telefonie ----------
   Ikona „hamburgera" pochodzi z nagłówka motywu rodzica i na jasnym tle
   bywa prawie niewidoczna. Wymuszamy kontrast i powiększamy pole dotyku:
   44 × 44 px to minimum, w które da się trafić kciukiem bez celowania. */
.menu-toggle,
.mobile-toggle,
.drawer-toggle,
button.menu-toggle,
.kadence-menu-toggle,
.header-navigation-toggle {
	color: var(--wtc-ink-strong) !important;
	min-width: 46px;
	min-height: 46px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1.5px solid var(--wtc-line) !important;
	background: #fff !important;
}
.menu-toggle:hover,
.drawer-toggle:hover,
.header-navigation-toggle:hover { border-color: var(--wtc-ink-strong) !important; }

/* Kreski hamburgera: grubsze i w kolorze tekstu, niezależnie od tego,
   czy rodzic rysuje je tłem, obramowaniem czy pseudoelementem. */
.menu-toggle .menu-toggle-icon,
.menu-toggle .menu-toggle-icon::before,
.menu-toggle .menu-toggle-icon::after,
.drawer-toggle .toggle-bar,
.menu-toggle-icon > span,
.kadence-svg-icon .menu-toggle-icon {
	background-color: var(--wtc-ink-strong) !important;
	border-color: var(--wtc-ink-strong) !important;
	height: 2.5px !important;
	border-radius: 2px;
}
.menu-toggle svg,
.drawer-toggle svg,
.header-navigation-toggle svg {
	width: 26px !important;
	height: 26px !important;
	color: var(--wtc-ink-strong) !important;
	stroke: currentColor !important;
	fill: currentColor !important;
	opacity: 1 !important;
}

/* Koszyk i konto w nagłówku — ten sam problem, ta sama zasada. */
.header-account-button svg,
.header-cart-wrap svg,
.header-navigation .kadence-svg-iconset svg {
	color: var(--wtc-ink-strong) !important;
	opacity: 1 !important;
}

/* ---------- 0.21.4: nagłówek na telefonie ----------
   Logo obok nazwy strony zajmowało całą szerokość i wypychało przycisk menu
   poza krawędź ekranu — dlatego był przycięty, a nie za jasny. Powiększanie
   go nie miało szans zadziałać, dopóki nie ma dla niego miejsca. */
@media (max-width: 1024px) {
	/* Nazwa strony obok logo jest zbędna: logo już ją zawiera. */
	.site-branding .site-title,
	.site-header .site-title,
	.header-branding .site-title { display: none !important; }

	.site-branding img,
	.custom-logo-link img,
	.header-branding img {
		max-height: 42px !important;
		width: auto !important;
	}

	/* Nagłówek musi mieścić się w ekranie razem z marginesami. */
	.site-header,
	.site-header-wrap,
	.site-header-row,
	.site-header-main-section-left,
	.site-header-main-section-right {
		max-width: 100%;
		overflow: visible;
	}
	.site-header-row { padding-left: 14px !important; padding-right: 14px !important; gap: 10px; }
	.site-header-main-section-right { flex: none; margin-left: auto; }

	/* Nic w nagłówku nie może wystawać poza prawą krawędź. */
	.site-header * { max-width: 100%; }
}

/* Podwójne okruszki: gdyby motyw rodzic dorysował swoje mimo zdjęcia haka,
   zostaje nasza wersja — ta z danymi strukturalnymi. */
.woocommerce-breadcrumb:not(.wtc-crumbs),
nav.woocommerce-breadcrumb { display: none !important; }

/* ---------- 0.21.4: wyśrodkowanie napisu w przycisku zakupu ----------
   Przycisk jest rozciągany na szerokość formularza, więc samo `text-align`
   nie wystarcza — po ukryciu ikony rodzica zostaje po niej odstęp, który
   spycha napis w bok. Wyśrodkowanie w obu osiach plus wyzerowanie luk. */
.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button.button.alt {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	gap: 0 !important;
	line-height: 1.25 !important;
	white-space: normal !important;
	text-indent: 0 !important;
}
.woocommerce div.product form.cart .button::before,
.woocommerce div.product form.cart .button::after,
.woocommerce div.product .single_add_to_cart_button::before,
.woocommerce div.product .single_add_to_cart_button::after {
	content: none !important;
	margin: 0 !important;
}

@media (max-width: 560px) {
	/* Na telefonie ilość i przycisk w jednym rzędzie: pole wąskie, przycisk
	   zajmuje resztę szerokości. */
	.woocommerce div.product form.cart { flex-wrap: nowrap; }
	.woocommerce div.product form.cart .quantity { flex: 0 0 84px; }
	.woocommerce div.product form.cart .quantity .qty { width: 100%; }
	.woocommerce div.product form.cart .button { flex: 1 1 auto; min-width: 0; }
}

/* ---------- 0.22.0: pasek zaufania pod zdjęciem ----------
   Trzy elementy stały spakowane przy lewej krawędzi, mimo że zdjęcie nad
   nimi zajmuje całą kolumnę — wyglądało to jak niedokończone wyrównanie.
   Teraz rozkładają się równo na szerokości zdjęcia, każdy pod swoją częścią
   kadru, i mają cienką linię u góry, która wiąże je z obrazem. */
.wtc-hero__side { gap: 0; }
.wtc-hero.has-image .wtc-trust {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--wtc-line);
}
.wtc-hero.is-dark.has-image .wtc-trust { border-top-color: rgba(255, 255, 255, .16); }
.wtc-hero.has-image .wtc-trust__item { text-align: center; padding: 0 8px; }
.wtc-hero.has-image .wtc-trust__item + .wtc-trust__item { border-left: 1px solid var(--wtc-line); }
.wtc-hero.is-dark.has-image .wtc-trust__item + .wtc-trust__item { border-left-color: rgba(255, 255, 255, .16); }
.wtc-hero.has-image .wtc-trust__item b { display: block; font-size: 19px; }
.wtc-hero.has-image .wtc-trust__item span { display: block; margin-top: 4px; font-size: 13px; }

@media (max-width: 560px) {
	.wtc-hero.has-image .wtc-trust { grid-template-columns: 1fr; gap: 12px; }
	.wtc-hero.has-image .wtc-trust__item { text-align: left; padding: 0; }
	.wtc-hero.has-image .wtc-trust__item + .wtc-trust__item { border-left: 0; }
}

/* ---------- 0.23.0: nagłówek motywu ----------
   Układ: pasek USP → wiersz główny (logo · wyszukiwarka · telefon · akcje)
   → wiersz nawigacji. Wyszukiwarka dostaje całą wolną szerokość, bo przy
   800+ SKU jest pierwszym narzędziem nawigacji, nie dodatkiem.
   Zapas: gdyby zdjęcie callbacku Kadence się nie udało (zmiana nazwy
   funkcji w rodzicu), klasa body chowa #masthead — nagłówek nie może
   wystąpić podwójnie. */
.wtc-has-header #masthead,
.wtc-has-header .site-header { display: none; }

.wtc-header { background: var(--wtc-white); border-bottom: 1px solid var(--wtc-line); }

.wtc-uspbar { background: var(--wtc-ink-strong); color: #cfd6d7; font-size: 12.5px; }
.wtc-uspbar ul { display: flex; gap: 28px; justify-content: center; list-style: none; margin: 0; padding: 7px 0; }
.wtc-uspbar li { white-space: nowrap; }
.wtc-uspbar li::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
	background: var(--wtc-red); margin-right: 8px; vertical-align: 2px; }
.wtc-uspbar a { color: inherit; text-decoration: none; }
.wtc-uspbar a:hover { color: var(--wtc-white); text-decoration: underline; }

.wtc-header__row { display: flex; align-items: center; gap: 22px; padding: 14px 0; }
.wtc-header__logo { flex: 0 0 auto; display: flex; align-items: center; }
.wtc-header__logo img { max-height: 48px; width: auto; display: block; }
.wtc-header__wordmark { font: 700 24px/1 var(--wtc-font-body); color: var(--wtc-ink-strong);
	text-decoration: none; letter-spacing: -0.01em; }

/* Wyszukiwarka: środek nagłówka, cała wolna szerokość. */
.wtc-search { flex: 1 1 auto; display: flex; min-width: 0; position: relative; }
.wtc-search__input { flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 52px 0 16px;
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm);
	background: var(--wtc-sand); font: 500 15px/1 var(--wtc-font-body); color: var(--wtc-ink); }
.wtc-search__input:focus { outline: 2px solid var(--wtc-red); outline-offset: -1px; background: var(--wtc-white); }
.wtc-search__btn { position: absolute; right: 4px; top: 4px; width: 42px; height: 38px;
	display: grid; place-items: center; border: 0; border-radius: 7px;
	background: var(--wtc-red); color: var(--wtc-white); cursor: pointer; }
.wtc-search__btn:hover { background: var(--wtc-red-dark); }
.wtc-search__btn:focus-visible { outline: 2px solid var(--wtc-ink-strong); outline-offset: 2px; }

.wtc-header__phone { display: flex; align-items: center; gap: 10px; color: var(--wtc-ink);
	text-decoration: none; flex: 0 0 auto; }
.wtc-header__phone .wtc-uico { color: var(--wtc-red-dark); }
.wtc-header__phone-t { display: flex; flex-direction: column; line-height: 1.2; }
.wtc-header__phone-t b { font-size: 15px; }
.wtc-header__phone-t small { color: var(--wtc-soft); font-size: 12px; }

.wtc-header__actions { display: flex; gap: 6px; flex: 0 0 auto; }
.wtc-header__action { display: flex; flex-direction: column; align-items: center; gap: 3px;
	min-width: 56px; padding: 6px 8px; border-radius: var(--wtc-radius-sm);
	color: var(--wtc-ink); text-decoration: none; font-size: 11.5px; position: relative; }
.wtc-header__action:hover { background: var(--wtc-sand); color: var(--wtc-red-dark); }
.wtc-header__action:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: 1px; }

/* Przełącznik języka strefy dystrybutorów (PL / EN), wpięty w nagłówek
 * przez `wtc_header_extra`, więc obecny na KAŻDEJ stronie.
 *
 * Dlatego styl mieszka tu, a nie w assets/css/partner.css: tamten arkusz
 * wczytuje się tylko na stronach strefy, a do 0.38.0 te reguły leżały właśnie
 * tam — w sklepie PL przełącznik zostawał bez stylu i renderował się jako dwa
 * zlane, podkreślone linki „PLEN". Na /en/ wyglądał poprawnie, co utrudniało
 * zauważenie, bo błąd był widoczny wyłącznie po polskiej stronie.
 */
.wtc-partner__switch { display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.wtc-partner__switchlink {
	font-family: var(--wtc-font-mono); font-size: 12px; font-weight: 500;
	letter-spacing: .06em; color: var(--wtc-soft); text-decoration: none;
	padding: 7px 7px; border-radius: 4px; min-width: 30px; text-align: center;
}
.wtc-partner__switchlink:hover { color: var(--wtc-ink-strong); }
.wtc-partner__switchlink:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: 1px; }
.wtc-partner__switchlink.is-current { color: var(--wtc-ink-strong); background: var(--wtc-sand); }

.wtc-cart__meta { display: contents; }
.wtc-cart__count { position: absolute; top: 0; right: 6px; min-width: 18px; height: 18px;
	padding: 0 4px; border-radius: 9px; background: var(--wtc-line); color: var(--wtc-ink);
	font: 700 11px/18px var(--wtc-font-body); text-align: center; }
.wtc-cart__count.is-filled { background: var(--wtc-red); color: var(--wtc-white); }
.wtc-cart__total { display: none; } /* suma wraca w 0.24+ przy szerszym wariancie */

/* Przycisk menu — tylko telefon. Pole dotyku 46 px (lekcja z 0.21.3). */
.wtc-nav-toggle { display: none; width: 46px; height: 46px; flex: 0 0 46px;
	place-items: center; background: none; border: 1px solid var(--wtc-line);
	border-radius: var(--wtc-radius-sm); color: var(--wtc-ink-strong); cursor: pointer; }
.wtc-nav-toggle:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: 2px; }

/* Wiersz nawigacji — w 0.24.0 wchodzą tu panele mega menu. */
.wtc-nav { border-top: 1px solid var(--wtc-line); background: var(--wtc-white); }
.wtc-nav__list { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0;
	overflow-x: auto; scrollbar-width: none; }
.wtc-nav__list::-webkit-scrollbar { display: none; }
.wtc-nav__list > li > a { display: block; padding: 12px 14px; color: var(--wtc-ink);
	text-decoration: none; font: 600 14.5px/1 var(--wtc-font-body); white-space: nowrap;
	border-bottom: 2px solid transparent; }
.wtc-nav__list > li > a:hover { color: var(--wtc-red-dark); border-bottom-color: var(--wtc-red); }
.wtc-nav__list > li > a:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: -2px; }
.wtc-nav__extra a { color: var(--wtc-red-dark) !important; }

/* Panel mobilny. */
.wtc-mobile { border-top: 1px solid var(--wtc-line); background: var(--wtc-white);
	padding: 10px 16px 20px; }
.wtc-mobile__list { list-style: none; margin: 0 0 14px; padding: 0; }
.wtc-mobile__list a { display: block; padding: 13px 4px; border-bottom: 1px solid var(--wtc-line);
	color: var(--wtc-ink); text-decoration: none; font: 600 15.5px/1.2 var(--wtc-font-body); }
.wtc-mobile__phone { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm);
	color: var(--wtc-ink); text-decoration: none; }
.wtc-mobile__phone .wtc-uico { color: var(--wtc-red-dark); }
.wtc-mobile__phone span { display: flex; flex-direction: column; line-height: 1.25; }
.wtc-mobile__phone small { color: var(--wtc-soft); }

@media (max-width: 1180px) {
	.wtc-header__phone-t small { display: none; }
}
@media (max-width: 1024px) {
	/* Telefon: przycisk menu, logo, akcje w jednym wierszu; wyszukiwarka
	   pełną szerokością w drugim. Zawsze widoczna — to najczęstsza akcja,
	   nie chowamy jej w ikonę. */
	.wtc-header__row { flex-wrap: wrap; gap: 12px; padding: 10px 0; }
	.wtc-nav-toggle { display: grid; }
	.wtc-header__logo { margin-right: auto; }
	.wtc-header__logo img { max-height: 42px; }
	.wtc-header__phone { display: none; }
	.wtc-search { order: 5; flex-basis: 100%; }
	.wtc-nav { display: none; }
	.wtc-uspbar ul { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.wtc-uspbar ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 560px) {
	/* 0.44.2: było `.wtc-header__action span`, co ukrywało także licznik.
	   Poprawione TUTAJ, u źródła — wcześniejsza próba odkręcania tego niżej
	   przez `display: revert` odsłaniała przy okazji sumę koszyka, bo `revert`
	   cofa się poniżej wszystkich reguł autorskich, nie tylko tej jednej. */
	.wtc-header__action > span:not(.wtc-cart__meta):not(.wtc-cart__count) { display: none; }
	.wtc-header__action { min-width: 46px; }
	.wtc-cart__count { right: 2px; }
}

/* ---------- 0.24.0: mega menu ----------
   Panele na pełną szerokość paska nawigacji. Otwieranie steruje skrypt
   (aria-expanded + hidden) — CSS tylko rysuje. Pozycja z pustym panelem
   nie istnieje w markupie, więc nie ma tu stanów „pustego" panelu. */
.wtc-mm { position: relative; }
.wtc-mm__top { display: flex; align-items: center; gap: 6px; padding: 12px 14px;
	background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
	color: var(--wtc-ink); font: 600 14.5px/1 var(--wtc-font-body); white-space: nowrap; }
.wtc-mm__top:hover { color: var(--wtc-red-dark); border-bottom-color: var(--wtc-red); }
.wtc-mm__top:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: -2px; }
.wtc-mm__top[aria-expanded="true"] { color: var(--wtc-red-dark); border-bottom-color: var(--wtc-red); }
.wtc-mm__top[aria-expanded="true"] svg { transform: rotate(180deg); }
.wtc-mm__top svg { transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .wtc-mm__top svg { transition: none; } }

.wtc-mm__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
	background: var(--wtc-white); border-bottom: 1px solid var(--wtc-line);
	box-shadow: var(--wtc-shadow-hover); padding: 26px 0 8px; }

.wtc-mm__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); gap: 8px 40px; }
.wtc-mm__coltitle { margin: 0 0 8px; font: 600 11.5px/1.4 var(--wtc-font-mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--wtc-soft); }
.wtc-mm__col ul { list-style: none; margin: 0 0 16px; padding: 0; }
.wtc-mm__col a { display: flex; align-items: baseline; gap: 8px; padding: 7px 0;
	color: var(--wtc-ink); text-decoration: none; font-size: 14.5px; }
.wtc-mm__col a:hover { color: var(--wtc-red-dark); }
.wtc-mm__count { color: var(--wtc-soft); font: 500 12px/1 var(--wtc-font-mono); }

.wtc-mm__cta { margin: 4px 0 16px; padding-top: 14px; border-top: 1px solid var(--wtc-line); }
.wtc-mm__cta a { color: var(--wtc-red-dark); font-weight: 600; text-decoration: none; }
.wtc-mm__cta a:hover { text-decoration: underline; }

/* Panel etapów: 6 kafli 3 × 2, ta sama treść co sekcja na stronie głównej. */
.wtc-mm__stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.wtc-mm__stage { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm);
	color: var(--wtc-ink); text-decoration: none; }
.wtc-mm__stage:hover { border-color: var(--wtc-red); box-shadow: var(--wtc-shadow); }
.wtc-mm__stage .wtc-ico { color: var(--wtc-red-dark); flex: 0 0 auto; }
.wtc-mm__stage span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wtc-mm__stage b { font-size: 14.5px; }
.wtc-mm__stage small { color: var(--wtc-soft); font-size: 12.5px; line-height: 1.4; }

/* Akordeony w panelu mobilnym. */
.wtc-mmm { border-bottom: 1px solid var(--wtc-line); }
.wtc-mmm summary { display: flex; justify-content: space-between; align-items: center;
	padding: 13px 4px; cursor: pointer; list-style: none;
	font: 600 15.5px/1.2 var(--wtc-font-body); color: var(--wtc-ink); }
.wtc-mmm summary::-webkit-details-marker { display: none; }
.wtc-mmm summary::after { content: ""; width: 8px; height: 8px; flex: 0 0 8px;
	border-right: 2px solid var(--wtc-soft); border-bottom: 2px solid var(--wtc-soft);
	transform: rotate(45deg); transition: transform .15s; }
.wtc-mmm[open] summary::after { transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) { .wtc-mmm summary::after { transition: none; } }
.wtc-mmm ul { list-style: none; margin: 0; padding: 0 0 10px; }
.wtc-mmm ul a { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px;
	color: var(--wtc-ink); text-decoration: none; font-size: 15px; }
.wtc-mmm ul a:active { color: var(--wtc-red-dark); }
.wtc-mmm summary:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: -2px; }
.wtc-mmm__solo { display: block; padding: 13px 4px; border-bottom: 1px solid var(--wtc-line);
	color: var(--wtc-red-dark); text-decoration: none; font: 600 15.5px/1.2 var(--wtc-font-body); }

/* ---------- 0.25.0: autouzupełnianie wyszukiwarki ---------- */
.wtc-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70;
	background: var(--wtc-white); border: 1px solid var(--wtc-line);
	border-radius: var(--wtc-radius-sm); box-shadow: var(--wtc-shadow-hover);
	max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.wtc-suggest__head { margin: 8px 10px 4px; font: 600 11px/1.4 var(--wtc-font-mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--wtc-soft); }
.wtc-suggest__opt { display: block; padding: 9px 10px; border-radius: 7px;
	color: var(--wtc-ink); text-decoration: none; font-size: 14px; }
.wtc-suggest__opt:hover, .wtc-suggest__opt.is-active { background: var(--wtc-sand); }
.wtc-suggest__opt small { color: var(--wtc-soft); }
.wtc-suggest__prod { display: flex; align-items: center; gap: 12px; }
.wtc-suggest__prod img, .wtc-suggest__noimg { width: 44px; height: 44px; flex: 0 0 44px;
	object-fit: contain; border: 1px solid var(--wtc-line); border-radius: 6px;
	background: var(--wtc-white); }
.wtc-suggest__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wtc-suggest__t b { font-weight: 600; font-size: 14px; line-height: 1.3;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wtc-suggest__t small { font-family: var(--wtc-font-mono); font-size: 11.5px; }
.wtc-suggest__m { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wtc-suggest__m b { font-size: 14px; white-space: nowrap; }
.wtc-suggest__m small.is-in { color: var(--wtc-ok); }
.wtc-suggest__m small.is-out { color: var(--wtc-warn); }
.wtc-suggest__all { text-align: center; font-weight: 600; color: var(--wtc-red-dark);
	border-top: 1px solid var(--wtc-line); border-radius: 0; margin-top: 6px; padding-top: 12px; }
.wtc-suggest__empty { margin: 10px; color: var(--wtc-soft); font-size: 14px; }
.wtc-suggest__help { color: var(--wtc-red-dark); font-weight: 600; }

/* ---------- 0.26.0: listing dwukolumnowy, panel filtrów, chipy ----------
   Desktop: kolumna filtrów 260 px przyklejona przy przewijaniu, lista obok.
   Telefon: kolumna staje się panelem pełnoekranowym otwieranym przyciskiem
   „Filtry"; przycisk „Pokaż N produktów" przyklejony u dołu panelu. */
.wtc-plp.has-aside { display: grid; grid-template-columns: 260px minmax(0, 1fr);
	gap: 8px 36px; align-items: start; }
.wtc-plp__aside { position: sticky; top: 16px; max-height: calc(100vh - 32px);
	overflow-y: auto; grid-row: 1 / span 2; }
.wtc-plp__toolbar { display: none; }

/* Formularz filtra w układzie kolumnowym. */
.wtc-plp__aside .wtc-filter { display: block; background: var(--wtc-white);
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius);
	padding: 16px; }
.wtc-plp__aside .wtc-fgroups { display: block; }
.wtc-plp__aside .wtc-fgroup { margin: 0 0 18px; border: 0; padding: 0; }
.wtc-plp__aside .wtc-fgroup legend { font: 600 12px/1.4 var(--wtc-font-mono);
	letter-spacing: .07em; text-transform: uppercase; color: var(--wtc-soft);
	padding: 0 0 8px; }
.wtc-plp__aside .wtc-fopts { display: flex; flex-direction: column; gap: 2px; }
.wtc-plp__aside .wtc-fopt { display: flex; align-items: center; gap: 9px;
	padding: 7px 8px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.wtc-plp__aside .wtc-fopt:hover { background: var(--wtc-sand); }
.wtc-plp__aside .wtc-fopt.is-off { opacity: .45; cursor: default; }
.wtc-plp__aside .wtc-fopt input { width: 17px; height: 17px; accent-color: var(--wtc-red); flex: 0 0 17px; }
.wtc-plp__aside .wtc-fopt > span:first-of-type { flex: 1 1 auto; min-width: 0; }
.wtc-plp__aside .wtc-fopt__c { color: var(--wtc-soft); font: 500 12px/1 var(--wtc-font-mono); }

.wtc-filter__head { display: none; }
.wtc-filter__bar { display: flex; align-items: baseline; justify-content: space-between;
	gap: 10px; padding: 0 0 12px; margin: 0 0 14px; border-bottom: 1px solid var(--wtc-line); }
.wtc-filter__count { font-size: 13.5px; color: var(--wtc-soft); }
.wtc-filter__count b { color: var(--wtc-ink-strong); font-size: 15px; }
.wtc-filter__clear { color: var(--wtc-red-dark); font-size: 13px; text-decoration: none; }
.wtc-filter__clear:hover { text-decoration: underline; }
.wtc-filter__foot { display: none; }

/* Chipy aktywnych filtrów nad listą. */
.wtc-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.wtc-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
	background: var(--wtc-red-soft); border: 1px solid transparent; border-radius: 6px;
	color: var(--wtc-ink-strong); text-decoration: none; font-size: 13px; }
.wtc-chip small { color: var(--wtc-red-dark); font: 500 10.5px/1 var(--wtc-font-mono);
	text-transform: uppercase; letter-spacing: .05em; }
.wtc-chip span[aria-hidden] { color: var(--wtc-red-dark); font-size: 11px; }
.wtc-chip:hover { border-color: var(--wtc-red); }
.wtc-chips__clear { color: var(--wtc-soft); font-size: 13px; text-decoration: underline; }
.wtc-chips__clear:hover { color: var(--wtc-red-dark); }

@media (max-width: 1024px) {
	.wtc-plp.has-aside { display: block; }
	.wtc-plp__toolbar { display: flex; gap: 10px; position: sticky; top: 0; z-index: 40;
		background: var(--wtc-white); padding: 10px 0; margin: 0 0 12px;
		border-bottom: 1px solid var(--wtc-line); }
	.wtc-plp__filters-btn { display: inline-flex; align-items: center; gap: 8px;
		height: 44px; padding: 0 18px; border: 1px solid var(--wtc-ink-strong);
		border-radius: 6px; background: var(--wtc-white); color: var(--wtc-ink-strong);
		font: 600 14.5px/1 var(--wtc-font-body); cursor: pointer; }
	.wtc-plp__fcount { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
		background: var(--wtc-red); color: var(--wtc-white);
		font: 700 12px/20px var(--wtc-font-body); text-align: center; }

	/* Panel: ukryty, dopóki body nie dostanie klasy. */
	.wtc-plp__aside { display: none; }
	body.wtc-fpanel-open { overflow: hidden; }
	body.wtc-fpanel-open .wtc-plp__aside { display: block; position: fixed; inset: 0;
		z-index: 90; max-height: none; background: var(--wtc-white); overflow-y: auto; }
	body.wtc-fpanel-open .wtc-plp__aside .wtc-filter { border: 0; border-radius: 0;
		min-height: 100%; display: flex; flex-direction: column; padding: 0; }
	body.wtc-fpanel-open .wtc-filter__head { display: flex; align-items: center;
		justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--wtc-line);
		position: sticky; top: 0; background: var(--wtc-white); z-index: 2;
		font-size: 17px; }
	body.wtc-fpanel-open .wtc-filter__close { width: 44px; height: 44px; border: 1px solid var(--wtc-line);
		border-radius: 8px; background: none; font-size: 16px; cursor: pointer; color: var(--wtc-ink-strong); }
	body.wtc-fpanel-open .wtc-filter__bar { padding: 12px 18px; margin: 0; }
	body.wtc-fpanel-open .wtc-fgroups { padding: 0 18px; flex: 1 1 auto; }
	body.wtc-fpanel-open .wtc-plp__aside .wtc-fopt { padding: 11px 8px; font-size: 15px; }
	body.wtc-fpanel-open .wtc-filter__foot { display: block; position: sticky; bottom: 0;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		background: var(--wtc-white); border-top: 1px solid var(--wtc-line); }
	body.wtc-fpanel-open .wtc-filter__go { width: 100%; height: 50px; border: 0;
		border-radius: 8px; background: var(--wtc-red); color: var(--wtc-white);
		font: 700 16px/1 var(--wtc-font-body); cursor: pointer; }
	body.wtc-fpanel-open .wtc-filter__go:active { background: var(--wtc-red-dark); }
}

/* ---------- 0.26.1: kafel — netto, deklaracja wysyłki, narzędzia ---------- */
.wtc-card__net { display: block; color: var(--wtc-soft);
	font: 500 12px/1.3 var(--wtc-font-mono); margin-top: 2px; }
.wtc-card__tools { position: absolute; top: 10px; right: 10px; z-index: 3;
	display: flex; flex-direction: column; gap: 6px; }
.wtc-card { position: relative; }
.wtc-wish, .wtc-cmp { width: 38px; height: 38px; display: grid; place-items: center;
	background: var(--wtc-white); border: 1px solid var(--wtc-line); border-radius: 8px;
	color: var(--wtc-soft); cursor: pointer; }
.wtc-wish:hover, .wtc-cmp:hover { color: var(--wtc-red-dark); border-color: var(--wtc-red); }
.wtc-wish:focus-visible, .wtc-cmp:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: 1px; }
.wtc-wish.is-on { color: var(--wtc-red); border-color: var(--wtc-red); }
.wtc-wish.is-on svg { fill: var(--wtc-red-soft); }
.wtc-cmp.is-on { color: var(--wtc-red); border-color: var(--wtc-red); background: var(--wtc-red-soft); }
/* Na karcie produktu serce stoi w wierszu, nie w rogu zdjęcia. */
.single-product div.product .wtc-wish { width: 44px; height: 44px; }

/* ---------- 0.27.0: belka porównania, strona porównania, schowek ---------- */
.wtc-cmpbar { position: fixed; left: 50%; transform: translateX(-50%);
	bottom: 14px; z-index: 80; display: flex; align-items: center; gap: 14px;
	background: var(--wtc-ink-strong); color: var(--wtc-white);
	padding: 10px 12px 10px 18px; border-radius: 12px; box-shadow: var(--wtc-shadow-hover);
	max-width: calc(100vw - 24px); }
.wtc-cmpbar__items { font: 600 14px/1 var(--wtc-font-body); white-space: nowrap; }
.wtc-cmpbar .wtc-btn.is-disabled { opacity: .45; pointer-events: none; }
.wtc-cmpbar__clear { background: none; border: 0; color: #aeb6b7; cursor: pointer;
	font: 500 13px/1 var(--wtc-font-body); text-decoration: underline; }
.wtc-cmpbar__clear:hover { color: var(--wtc-white); }

.wtc-compare-scroll { overflow-x: auto; }
.wtc-compare { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14px; }
.wtc-compare th, .wtc-compare td { padding: 10px 14px; border-bottom: 1px solid var(--wtc-line);
	text-align: left; vertical-align: top; }
.wtc-compare tbody th { width: 180px; color: var(--wtc-soft);
	font: 600 12px/1.5 var(--wtc-font-mono); text-transform: uppercase; letter-spacing: .05em; }
.wtc-compare td { font-family: var(--wtc-font-mono); font-size: 13.5px; }
.wtc-compare__prod { position: relative; min-width: 180px; }
.wtc-compare__prod img { width: 110px; height: 110px; object-fit: contain; display: block; margin-bottom: 8px; }
.wtc-compare__prod a { color: var(--wtc-ink); text-decoration: none; }
.wtc-compare__prod a span { display: block; font: 600 14px/1.35 var(--wtc-font-body); }
.wtc-compare__x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px;
	display: grid; place-items: center; border: 1px solid var(--wtc-line); border-radius: 7px;
	color: var(--wtc-soft); text-decoration: none; font-size: 12px; }
.wtc-compare__x:hover { color: var(--wtc-red-dark); border-color: var(--wtc-red); }
/* Różnice są odpowiedzią — reszta jest tłem. */
.wtc-compare tr.is-diff td { background: var(--wtc-red-soft); font-weight: 600; }
.wtc-compare tr.is-diff th { color: var(--wtc-red-dark); }
.wtc-compare__none { color: var(--wtc-line); }
.wtc-compare__cta td { padding-top: 16px; }

.wtc-collection__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .wtc-collection__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .wtc-collection__grid { grid-template-columns: repeat(2, 1fr); } }
.wtc-collection__item { position: relative; background: var(--wtc-white);
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius);
	padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.wtc-collection__x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
	display: grid; place-items: center; background: var(--wtc-white);
	border: 1px solid var(--wtc-line); border-radius: 7px; color: var(--wtc-soft);
	cursor: pointer; font-size: 12px; z-index: 2; }
.wtc-collection__x:hover { color: var(--wtc-red-dark); border-color: var(--wtc-red); }
.wtc-collection__media img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.wtc-collection__name { color: var(--wtc-ink); text-decoration: none;
	font: 600 14.5px/1.35 var(--wtc-font-body); }
.wtc-collection__name:hover { color: var(--wtc-red-dark); }
.wtc-collection__sku { margin: 0; color: var(--wtc-soft); font: 500 12px/1 var(--wtc-font-mono); }
.wtc-collection__price { margin: auto 0 0; display: flex; flex-direction: column; }
.wtc-collection__price span { color: var(--wtc-soft); font-size: 11px; }
.wtc-collection__price b { font-size: 16px; }
.wtc-collection__stock { margin: 0; font-size: 12.5px; }
.wtc-collection__stock.is-in { color: var(--wtc-ok); }
.wtc-collection__stock.is-out { color: var(--wtc-warn); }
/* Licznik schowka w nagłówku dziedziczy styl licznika koszyka. */
.wtc-wish-link .wtc-cart__count { right: 2px; }

/* ---------- 0.28.0: „W zestawie" i wideo ---------- */
.wtc-included { margin: 34px 0; }
.wtc-included ul { list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; }
.wtc-included li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--wtc-line);
	position: relative; font-size: 14.5px; }
.wtc-included li::before { content: "\2713"; position: absolute; left: 2px; top: 8px;
	color: var(--wtc-ok); font-weight: 700; }

.wtc-video { margin: 34px 0; }
.wtc-video__poster { position: relative; display: block; width: 100%; max-width: 760px;
	aspect-ratio: 16 / 9; border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius);
	overflow: hidden; background: var(--wtc-ink-strong); cursor: pointer; padding: 0; }
.wtc-video__poster img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.wtc-video__poster:hover img { opacity: 1; }
.wtc-video__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
	border-radius: 50%; background: var(--wtc-red); box-shadow: var(--wtc-shadow-hover); }
.wtc-video__play::after { content: ""; position: absolute; inset: 0; margin: auto;
	width: 0; height: 0; border-style: solid; border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--wtc-white); transform: translateX(3px); }
.wtc-video__poster:hover .wtc-video__play { background: var(--wtc-red-dark); }
.wtc-video__poster:focus-visible { outline: 3px solid var(--wtc-red); outline-offset: 2px; }
.wtc-video__frame { width: 100%; max-width: 760px; aspect-ratio: 16 / 9; border: 0;
	border-radius: var(--wtc-radius); display: block; }

/* ---------- 0.28.1: przyklejony pasek zakupu ---------- */
.wtc-satc { position: fixed; left: 0; right: 0; z-index: 85;
	background: var(--wtc-white); box-shadow: var(--wtc-shadow-hover); }
.wtc-satc__inner { display: flex; align-items: center; gap: 14px; padding: 10px 20px; }
.wtc-satc__media img { width: 44px; height: 44px; object-fit: contain; display: block;
	border: 1px solid var(--wtc-line); border-radius: 7px; }
.wtc-satc__name { flex: 1 1 auto; min-width: 0; font: 600 14.5px/1.3 var(--wtc-font-body);
	color: var(--wtc-ink); display: -webkit-box; -webkit-line-clamp: 2;
	-webkit-box-orient: vertical; overflow: hidden; }
.wtc-satc__price { display: flex; flex-direction: column; align-items: flex-end;
	line-height: 1.2; white-space: nowrap; }
.wtc-satc__price small { color: var(--wtc-soft); font-size: 10.5px; }
.wtc-satc__price .amount, .wtc-satc__price bdi { font-weight: 700; font-size: 17px; }
.wtc-satc__btn { height: 46px; padding: 0 22px; border: 0; border-radius: 7px;
	background: var(--wtc-red); color: var(--wtc-white);
	font: 700 15px/1 var(--wtc-font-body); cursor: pointer; white-space: nowrap; }
.wtc-satc__btn:hover { background: var(--wtc-red-dark); }
.wtc-satc__btn--quiet { background: none; border: 1.5px solid var(--wtc-ink-strong);
	color: var(--wtc-ink-strong); }
.wtc-satc__btn--quiet:hover { background: var(--wtc-sand); }
.wtc-satc__btn:focus-visible { outline: 2px solid var(--wtc-ink-strong); outline-offset: 2px; }
/* Desktop: pasek u góry. Telefon: na dole, nad kciukiem. */
@media (min-width: 781px) { .wtc-satc { top: 0; border-bottom: 1px solid var(--wtc-line); } }
@media (max-width: 780px) {
	.wtc-satc { bottom: 0; border-top: 1px solid var(--wtc-line);
		padding-bottom: env(safe-area-inset-bottom); }
	.wtc-satc__media, .wtc-satc__name { display: none; }
	.wtc-satc__inner { justify-content: space-between; padding: 10px 16px; }
	.wtc-satc__price { align-items: flex-start; }
	.wtc-satc__btn { flex: 1 1 auto; margin-left: 14px; }
}

/* ---------- 0.29.0: termin dostawy i alert dostępności ---------- */
.wtc-eta { margin: 2px 0 10px; color: var(--wtc-ink); font-size: 14px; }
.wtc-eta::before { content: "\1F69A\00a0"; }
.wtc-alert { margin: 16px 0; padding: 16px; background: var(--wtc-sand);
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm); }
.wtc-alert__t { margin: 0 0 10px; display: flex; flex-direction: column; gap: 2px; }
.wtc-alert__t span { color: var(--wtc-soft); font-size: 13px; }
.wtc-alert__form { display: flex; gap: 8px; flex-wrap: wrap; }
.wtc-alert__form input[type="email"] { flex: 1 1 200px; height: 44px; padding: 0 12px;
	border: 1px solid var(--wtc-line); border-radius: 7px; font-size: 14.5px;
	background: var(--wtc-white); }
.wtc-alert__form input[type="email"]:focus { outline: 2px solid var(--wtc-red); outline-offset: -1px; }
.wtc-alert__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.wtc-alert__done { color: var(--wtc-ok); font-weight: 600; margin: 4px 0 0; }
.wtc-alert__note { margin: 8px 0 0; color: var(--wtc-soft); font-size: 12px; }

/* ---------- 0.29.1: podobne i ostatnio oglądane ---------- */
.wtc-similar, .wtc-recent { margin: 40px 0; }
.wtc-recent__grid .wtc-collection__item { padding: 10px; }

/* ---------- 0.30.0: koszyk ---------- */
.wtc-freebar { margin: 0 0 22px; padding: 14px 18px; background: var(--wtc-sand);
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm); }
.wtc-freebar__t { margin: 0 0 8px; font-size: 14.5px; }
.wtc-freebar__t b { color: var(--wtc-ink-strong); }
.wtc-freebar.is-done .wtc-freebar__t { color: var(--wtc-ok); font-weight: 600; }
.wtc-freebar__track { height: 8px; background: var(--wtc-line); border-radius: 4px; overflow: hidden; }
.wtc-freebar__track span { display: block; height: 100%; background: var(--wtc-red); border-radius: 4px; }
.wtc-freebar.is-done .wtc-freebar__track span { background: var(--wtc-ok); }
.wtc-freebar__note { margin: 7px 0 0; color: var(--wtc-soft); font-size: 12px; }

.wtc-cartadd { margin: 28px 0; }
.wtc-cartadd__row { display: flex; flex-direction: column; gap: 10px; }
.wtc-cadd { display: flex; align-items: center; gap: 14px; padding: 10px 14px;
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm);
	background: var(--wtc-white); }
.wtc-cadd__media img { width: 52px; height: 52px; object-fit: contain; display: block; }
.wtc-cadd__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wtc-cadd__t a { color: var(--wtc-ink); text-decoration: none; font: 600 14.5px/1.3 var(--wtc-font-body); }
.wtc-cadd__t a:hover { color: var(--wtc-red-dark); }
.wtc-cadd__t span { font-size: 14px; }
.wtc-cadd__btn { white-space: nowrap; }

.wtc-empty-cart { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 20px 0 40px; }

/* ---------- 0.30.1: NIP na checkoucie ---------- */
.wtc-nip-fetch { margin-top: 8px; padding: 9px 14px; border: 1px solid var(--wtc-ink-strong);
	border-radius: 6px; background: none; color: var(--wtc-ink-strong);
	font: 600 13.5px/1 var(--wtc-font-body); cursor: pointer; }
.wtc-nip-fetch:hover { background: var(--wtc-sand); }
.wtc-nip-fetch:disabled { opacity: .5; cursor: wait; }

/* ---------- 0.31.0: landingi etapów ---------- */
.wtc-stage__head { display: flex; gap: 22px; align-items: flex-start; margin: 0 0 30px; }
.wtc-stage__head .wtc-ico { color: var(--wtc-red-dark); flex: 0 0 auto; }
.wtc-stage__title { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 4px 0 10px; }
.wtc-stage__lead { font-size: 17.5px; line-height: 1.6; color: var(--wtc-ink); max-width: 70ch; margin: 6px 0 0; }
.wtc-stage h2 { margin: 40px 0 16px; }
.wtc-stage__cats .wtc-group { min-height: 0; }
.wtc-stage__nav { display: flex; justify-content: space-between; gap: 16px;
	margin: 44px 0 0; padding-top: 18px; border-top: 1px solid var(--wtc-line); }
.wtc-stage__nav a { color: var(--wtc-ink); text-decoration: none; font-weight: 600; }
.wtc-stage__nav a:hover { color: var(--wtc-red-dark); }
.wtc-stage__next { margin-left: auto; }
@media (max-width: 640px) {
	.wtc-stage__head { flex-direction: column; gap: 10px; }
}

/* ---------- 0.32.0: Strefa Fachowca ---------- */
.wtc-know__chips { margin: 0 0 22px; }
.wtc-know__chips .wtc-chip { background: var(--wtc-sand); color: var(--wtc-ink); }
.wtc-know__chips .wtc-chip.is-on { background: var(--wtc-red-soft); border-color: var(--wtc-red);
	color: var(--wtc-ink-strong); font-weight: 600; }
.wtc-know__empty { color: var(--wtc-soft); }
.wtc-post-products { margin: 36px 0; }
.wtc-band--article { margin: 36px 0 0; border-radius: var(--wtc-radius); }

/* ---------- 0.32.1: galeria na karcie — miniatury POD zdjęciem ----------
   Zgłoszenie z testów: dodatkowe zdjęcia nachodziły na zdjęcie główne.
   Zależnie od tego, czy slider Woo zdąży się zainicjować (flex-viewport)
   i co dołoży motyw rodzic, miniatury potrafią wylądować na warstwie
   absolutnej nad główną fotografią. Reguły niżej wymuszają jeden porządek
   w OBU scenariuszach: duże zdjęcie u góry, miniatury rzędem pod spodem. */
.woocommerce div.product div.images { position: relative; overflow: visible; }
.woocommerce div.product div.images .flex-viewport { margin-bottom: 12px; }

/* Slider aktywny: pasek miniatur flexslidera. */
.woocommerce div.product div.images .flex-control-thumbs {
	position: static !important; display: flex !important; flex-wrap: wrap;
	gap: 8px; margin: 12px 0 0 !important; padding: 0 !important; list-style: none;
	inset: auto !important; transform: none !important; }
.woocommerce div.product div.images .flex-control-thumbs li {
	float: none !important; width: 72px !important; margin: 0 !important; }
.woocommerce div.product div.images .flex-control-thumbs img {
	width: 72px; height: 72px; object-fit: contain !important; display: block;
	border: 1px solid var(--wtc-line); border-radius: 8px; background: var(--wtc-white);
	padding: 4px; opacity: .6; cursor: pointer; }
.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active { opacity: 1;
	border-color: var(--wtc-red); }

/* Slider NIEaktywny (albo zanim wstanie): pierwsze zdjęcie duże, kolejne
   jako miniatury pod nim. 0.32.2 — WYŁĄCZNIE selektor bezpośredniego
   dziecka div.images: gdy slider działa, wrapper siedzi w .flex-viewport
   i te reguły nie mogą go dotykać. Poprzednia wersja nadpisywała
   szerokości slajdów (style inline slidera) i wypychała zdjęcie główne
   z kadru — stąd pusta przestrzeń zamiast fotografii. */
.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper
	> .woocommerce-product-gallery__image:first-child { flex: 1 1 100%; width: 100%; }
.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper
	> .woocommerce-product-gallery__image:not(:first-child) {
	position: static !important; flex: 0 0 88px; width: 88px !important; margin: 0 !important; }
.woocommerce div.product div.images > .woocommerce-product-gallery__wrapper
	> .woocommerce-product-gallery__image:not(:first-child) img {
	width: 88px; height: 88px; object-fit: contain !important;
	border: 1px solid var(--wtc-line); border-radius: 8px; background: var(--wtc-white); padding: 4px; }

/* ---------- 0.32.1: ikony schowka/porównania — subtelniej ----------
   Zgłoszenie z testów: narzędzia na kaflu były zbyt nachalne. Na desktopie
   są wyciszone i dochodzą do pełnej widoczności przy najechaniu na kafel;
   na dotyku zostają widoczne (nie ma hovera). */
@media (hover: hover) and (pointer: fine) {
	.wtc-card__tools { opacity: 0; transition: opacity .15s; }
	.wtc-card:hover .wtc-card__tools,
	.wtc-card:focus-within .wtc-card__tools { opacity: 1; }
}
.wtc-wish, .wtc-cmp { width: 34px; height: 34px; }

/* ---------- 0.33.0: puste kategorie w widoku administratora ---------- */
.wtc-group.is-empty { border-style: dashed; opacity: .65; }
.wtc-group.is-empty:hover { opacity: 1; }
.wtc-group.is-empty .wtc-group__c { background: var(--wtc-warn); color: var(--wtc-white);
	border-radius: 6px; padding: 1px 7px; }

/* ---------- 0.34.0: grafiki kategorii + kategorie etapów na telefonie ---------- */
.wtc-group__photo--art img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Kafle kategorii na landingu etapu: zawsze widoczna siatka — 3 kolumny
   na desktopie, 2 na telefonie (ta sama zasada co siatka produktów). */
.wtc-stage__cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1080px) { .wtc-stage__cats { grid-template-columns: repeat(2, 1fr); } }
/* 0.36.2: na telefonie JEDNA kolumna, jak siatka kategorii na stronie
   głównej (próg 620 px, nie 400): przy dwóch kolumnach na ~400 px nazwa
   kategorii łamała się przy plakietce licznika i kafle „rozjeżdżały się"
   w nierówne wiersze. Reguła stoi PÓŹNIEJ w pliku niż .wtc-groups,
   więc bez tego wpisu wygrywała jej wersja dwukolumnowa. */
@media (max-width: 620px)  { .wtc-stage__cats { grid-template-columns: 1fr; } }

/* ---------- 0.34.1: pas zaufania w hero — hasła zamiast akapitów ----------
   Cztery kafle z opisami przygniatały zdjęcie i łamały się w nierówne
   kolumny. Teraz: jedna linia krótkich haseł z kropkami marki, wyśrodkowana
   pod kadrem. Opis (po |) jest drugorzędny i znika na telefonie. */
.wtc-hero .wtc-trust { display: flex !important; flex-wrap: wrap; gap: 8px 26px;
	justify-content: center; align-items: baseline;
	border-top: 1px solid rgba(255,255,255,.18); padding-top: 14px; margin-top: 16px; }
.wtc-hero:not(.is-dark) .wtc-trust { border-top-color: var(--wtc-line); }
.wtc-hero .wtc-trust__item { display: flex; gap: 7px; align-items: baseline;
	font-size: 13px; white-space: nowrap; }
.wtc-hero .wtc-trust__item::before { content: ""; width: 5px; height: 5px;
	border-radius: 50%; background: var(--wtc-red); align-self: center; flex: 0 0 5px; }
.wtc-hero .wtc-trust__item b { font-weight: 600; }
.wtc-hero .wtc-trust__item span { color: inherit; opacity: .65; font-size: 12px; }
@media (max-width: 780px) {
	.wtc-hero .wtc-trust { justify-content: flex-start; gap: 6px 18px; }
	.wtc-hero .wtc-trust__item span { display: none; }
}

/* ---------- 0.35.0: hero pełnoekranowe (zdjęcie tłem sekcji) ----------
   Zdjęcie czyste, tekst w HTML na gradiencie. Gradient mocniejszy po lewej
   (tam stoi tekst) i przy dole (tam pas haseł); prawa część kadru — produkt —
   zostaje czytelna. */
.wtc-hero.is-cover { position: relative; overflow: hidden; color: #fff;
	background: var(--wtc-ink-strong); }
.wtc-hero.is-cover .wtc-hero__bg { position: absolute; inset: 0; width: 100%;
	height: 100%; object-fit: cover; object-position: 68% center; }
.wtc-hero__shade { position: absolute; inset: 0; background:
	linear-gradient(90deg, rgba(18,21,22,.92) 0%, rgba(18,21,22,.72) 38%, rgba(18,21,22,.22) 68%, rgba(18,21,22,.38) 100%),
	linear-gradient(0deg, rgba(18,21,22,.62) 0%, rgba(18,21,22,0) 32%); }
.wtc-hero__cover { position: relative; z-index: 2; display: flex;
	flex-direction: column; justify-content: center;
	min-height: 580px; padding-top: 72px; padding-bottom: 46px; }
.wtc-hero__copy { max-width: 58ch; }
.wtc-hero.is-cover h1 { color: #fff; }
.wtc-hero.is-cover .wtc-lead { color: rgba(255,255,255,.85); }
.wtc-hero.is-cover .wtc-eyebrow { color: rgba(255,255,255,.75); }
.wtc-btn--ghost { border: 1.5px solid rgba(255,255,255,.65); color: #fff;
	background: none; }
.wtc-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

/* Plakietka produktu: kampanijna treść jako HTML — ostra i klikalna. */
.wtc-hero__badge { position: absolute; right: 20px; bottom: 92px; z-index: 3;
	display: flex; flex-direction: column; gap: 3px; max-width: 300px;
	padding: 16px 20px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px;
	background: rgba(18,21,22,.55); backdrop-filter: blur(6px);
	color: #fff; text-decoration: none; }
.wtc-hero__badge small { color: var(--wtc-red); font: 600 11px/1.4 var(--wtc-font-mono);
	letter-spacing: .12em; text-transform: uppercase; }
.wtc-hero__badge b { font: 700 20px/1.25 var(--wtc-font-body); }
.wtc-hero__badge span { color: rgba(255,255,255,.75); font-size: 13px; margin-top: 4px; }
.wtc-hero__badge:hover { border-color: var(--wtc-red); background: rgba(18,21,22,.72); }
.wtc-hero__badge:hover span { color: #fff; }

/* Pas haseł w wersji cover: dyskretna linia na dole, do lewej. */
.wtc-hero.is-cover .wtc-trust { justify-content: flex-start; margin-top: 42px;
	border-top-color: rgba(255,255,255,.2); }

@media (max-width: 1024px) {
	.wtc-hero__badge { position: static; margin-top: 26px; max-width: 340px; }
	.wtc-hero__cover { min-height: 480px; padding-top: 48px; }
	.wtc-hero.is-cover .wtc-hero__bg { object-position: 72% center; }
}
@media (max-width: 640px) {
	.wtc-hero__cover { min-height: 440px; }
	.wtc-hero__shade { background:
		linear-gradient(0deg, rgba(18,21,22,.9) 0%, rgba(18,21,22,.55) 55%, rgba(18,21,22,.35) 100%); }
	.wtc-hero.is-cover .wtc-trust { margin-top: 28px; }
}

/* ---------- 0.35.1: pas zaufania z piktogramami (hero cover) ----------
   Wzór z banera kampanijnego: rząd czterech pozycji ikona + hasło + dopisek,
   na półprzezroczystym panelu — czytelny także tam, gdzie pod spodem leży
   jasny fragment maszyny. */
.wtc-hero.is-cover .wtc-trust { display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 22px;
	margin-top: 44px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.16);
	border-top: 1px solid rgba(255,255,255,.16); border-radius: 12px;
	background: rgba(18,21,22,.52); backdrop-filter: blur(6px); }
.wtc-hero.is-cover .wtc-trust__item { display: flex; gap: 12px; align-items: center;
	white-space: normal; font-size: 13px; }
.wtc-hero.is-cover .wtc-trust__item::before { display: none; }
.wtc-hero .wtc-trust__item .wtc-uico { color: var(--wtc-red); flex: 0 0 24px; }
.wtc-trust__t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wtc-trust__t b { font-weight: 700; font-size: 13.5px; letter-spacing: .01em; }
.wtc-trust__t span { opacity: .68; font-size: 12px; line-height: 1.35; }
@media (max-width: 1024px) {
	.wtc-hero.is-cover .wtc-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.wtc-hero.is-cover .wtc-trust { padding: 12px 14px; gap: 10px 14px; }
	.wtc-hero.is-cover .wtc-trust__t span { display: none; }
}
/* Wariant dwukolumnowy: ikony też działają, układ jak dotąd. */
.wtc-hero:not(.is-cover) .wtc-trust__item { align-items: center; }
.wtc-hero:not(.is-cover) .wtc-trust__item .wtc-uico { width: 18px; height: 18px; flex: 0 0 18px; }

/* ---------- 0.35.2: pas w hero cover — czytelność i separatory ----------
   Hasła znikały: reguła z 0.17.0 nadawała im grafit (kolor jasnego hero),
   a białe nadpisanie istniało tylko dla .is-dark — wariant .is-cover go
   nie dostawał. Kolory jawnie, do tego pionowe separatory między
   pozycjami jak na banerze kampanijnym. */
.wtc-hero.is-cover .wtc-trust__t b { color: #fff;
	font: 600 14px/1.3 var(--wtc-font-body); letter-spacing: .01em; }
.wtc-hero.is-cover .wtc-trust__t span { color: rgba(255,255,255,.62); opacity: 1; }
.wtc-hero.is-cover .wtc-trust__item .wtc-uico { width: 26px; height: 26px; flex: 0 0 26px; }
.wtc-hero.is-cover .wtc-trust__item { padding-left: 22px;
	border-left: 1px solid rgba(255,255,255,.14); }
.wtc-hero.is-cover .wtc-trust__item:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 1024px) {
	.wtc-hero.is-cover .wtc-trust__item { padding-left: 0; border-left: 0; }
}

/* ---------- 0.35.3: hero cover na telefonie ----------
   Zamiast ściskać układ desktopowy: zdjęcie zostaje w górnej części kadru,
   tekst schodzi na dół, na najciemniejszą strefę gradientu; przyciski na
   pełną szerokość pod kciukiem; pas haseł bez pudła — prosta siatka 2×2.
   Plakietka produktu znika — kampanię na telefonie niosą banery niżej. */
@media (max-width: 640px) {
	.wtc-hero__cover { justify-content: flex-end; min-height: 78vh;
		max-height: 640px; padding-top: 32px; padding-bottom: 20px; }
	.wtc-hero.is-cover .wtc-hero__bg { object-position: 66% 28%; }
	.wtc-hero__shade { background:
		linear-gradient(0deg, rgba(18,21,22,.96) 0%, rgba(18,21,22,.82) 34%, rgba(18,21,22,.35) 62%, rgba(18,21,22,.25) 100%); }

	.wtc-hero__cover h1 { font-size: clamp(28px, 8.4vw, 34px); line-height: 1.12;
		letter-spacing: -.01em; }
	.wtc-hero.is-cover .wtc-eyebrow { font-size: 11.5px; }
	.wtc-hero.is-cover .wtc-lead { font-size: 15px; line-height: 1.55;
		margin-bottom: 4px; }

	.wtc-hero__cover .wtc-cta { display: flex; flex-direction: column; gap: 10px; }
	.wtc-hero__cover .wtc-cta .wtc-btn { width: 100%; text-align: center;
		justify-content: center; }

	.wtc-hero__badge { display: none; }

	/* Pas: bez pudła i rozmycia — cienka linia i siatka 2 × 2. */
	.wtc-hero.is-cover .wtc-trust { background: none; border: 0;
		border-top: 1px solid rgba(255,255,255,.18); border-radius: 0;
		backdrop-filter: none; padding: 14px 0 0; margin-top: 24px;
		gap: 12px 16px; }
	.wtc-hero.is-cover .wtc-trust__item .wtc-uico { width: 20px; height: 20px;
		flex: 0 0 20px; }
	.wtc-hero.is-cover .wtc-trust__t b { font-size: 12.5px; }
}
/* Bardzo wąskie ekrany: pas w jednej kolumnie czyta się gorzej niż 2×2,
   ale hasła nie mogą się łamać w środku wyrazu. */
@media (max-width: 360px) {
	.wtc-hero.is-cover .wtc-trust { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- 0.35.4: niższe hero, wysokość ze zmiennej ----------
   Sekcja trzyma wysokość z ustawienia (domyślnie 460 px zamiast 580);
   cover docina zdjęcie symetrycznie z góry i z dołu. Ciaśniejsze
   odstępy, żeby treść nie „pływała" w niższym kadrze. */
.wtc-hero__cover { min-height: var(--wtc-hero-h, 460px);
	padding-top: 44px; padding-bottom: 30px; }
.wtc-hero.is-cover .wtc-trust { margin-top: 30px; }
.wtc-hero__badge { bottom: 76px; }
@media (max-width: 640px) {
	.wtc-hero__cover { min-height: min(72vh, calc(var(--wtc-hero-h, 460px) + 120px));
		max-height: none; padding-bottom: 18px; }
}

/* ---------- 0.35.5: hasła pasa wróciły na telefon ----------
   Reguła z 0.34.1 (ukryj <span> w pozycji pasa na wąskich ekranach)
   powstała, gdy span był TYLKO dopiskiem. Od 0.35.1 w spanie-wrapperze
   .wtc-trust__t siedzi całe hasło — i znikało razem z nim. Wrapper jest
   jawnie widoczny na każdej szerokości; chowamy wyłącznie dopisek. */
.wtc-hero .wtc-trust__item .wtc-trust__t { display: flex !important; }
@media (max-width: 780px) {
	.wtc-hero .wtc-trust__t > span { display: none; }
}

/* Ciaśniejszy kadr na telefonie — bez martwej przestrzeni pod pasem. */
@media (max-width: 640px) {
	.wtc-hero__cover { min-height: min(64vh, calc(var(--wtc-hero-h, 460px) + 60px));
		padding-bottom: 14px; }
	.wtc-hero.is-cover .wtc-hero__bg { object-position: 68% 42%; }
	.wtc-hero.is-cover .wtc-trust { margin-top: 18px; padding-top: 12px; gap: 10px 14px; }
	.wtc-hero.is-cover .wtc-trust__item { gap: 9px; }
}

/* ---------- 0.35.7: „Dlaczego WERTEC" — trzy bloki w trzech kolumnach ----
   Sekcja zaufania („Zakupy w WERTEC") zachowuje cztery. */
.wtc-benefits { grid-template-columns: repeat(3, 1fr); }
.wtc-benefits--trust { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
	.wtc-benefits, .wtc-benefits--trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.wtc-benefits, .wtc-benefits--trust { grid-template-columns: 1fr; }
}

/* ---------- 0.36.0: listing na tablecie i telefonie — audyt RWD ----------
   Przegląd widoków 834 px i 390 px wykazał trzy realne braki: napis
   „Do koszyka" łamał się na dwie linie w wąskim kaflu, wiersz licznika
   wyników i sortowania Woo był surowy (domyślne style rodzica), a okruszki
   z długą ścieżką zawijały się na trzy linie. */

/* Licznik wyników i sortowanie: nasza typografia zamiast domyślnej Woo.
   Układ (float) zostaje po stronie Woo — działa i na desktopie, i po
   zawinięciu na telefonie. */
.woocommerce .woocommerce-result-count {
	color: var(--wtc-soft);
	font: 500 13.5px/40px var(--wtc-font-body);
	margin: 0 0 14px;
}
.woocommerce .woocommerce-ordering { margin: 0 0 14px; }
.woocommerce .woocommerce-ordering select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--wtc-line);
	border-radius: 8px;
	background: var(--wtc-white);
	color: var(--wtc-ink);
	font: 500 14px/1.2 var(--wtc-font-body);
}
.woocommerce .woocommerce-ordering select:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: -1px; }

/* Przycisk kafla: „Do / koszyka" w dwóch liniach czyta się jak usterka.
   Nowrap odpada — decyzja z 0.21.0 stoi (strzałka rodzica wychodziła poza
   obrys). Zamiast tego mniejsza czcionka i węższy padding na telefonie:
   kafel przy dwóch kolumnach na 390 px ma ~150 px światła i „Do koszyka"
   mieści się wtedy w jednej linii bez łamania. !important, bo bazowa reguła
   0.21.0 też używa !important. */
@media (max-width: 560px) {
	/* Trzy klasy w selektorze nie są ozdobą: reguła 0.16.0
	   `.woocommerce a.button` ma specyficzność 0-2-1 i wygrywałaby
	   z samym `.wtc-card__cta .button` mimo !important po obu stronach. */
	.wtc-card .wtc-card__cta .button { font-size: 13px !important; padding: 10px 6px !important; min-height: 42px; }
	.wtc-card__ids { font-size: 11px; }
}

/* Okruszki: jedna linia z przewijaniem zamiast zawijania — długa ścieżka
   kategorii nie może spychać tytułu strony. */
@media (max-width: 780px) {
	.wtc-crumbs { white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
	.wtc-crumbs::-webkit-scrollbar { display: none; }
}

/* Konfigurator na telefonie: ciaśniejsze pola, żeby sześć kroków tarcz nie
   robiło z ekranu tunelu. Opcje zostają w jednej kolumnie — etykiety typu
   „Perfekcyjna — bez wyszczerbień" w dwóch kolumnach by się łamały. */
@media (max-width: 560px) {
	.wtc-adv__head { padding: 13px 14px; }
	.wtc-adv__step, .wtc-adv__results, .wtc-adv__dead { padding: 12px 14px 16px; }
	.wtc-adv__opt { min-height: 54px; padding: 10px 12px; }
	.wtc-adv__opt .t { font-size: 16px; }
	.wtc-adv__grid { gap: 8px; }
}

/* Panel filtrów: przewijanie panelu nie może „przebijać" na stronę pod nim. */
body.wtc-fpanel-open .wtc-plp__aside { overscroll-behavior: contain; }

/* ---------- 0.36.1: nadtytuł sekcji nie może ginąć ----------
   „ETAPY ROBOTY" w 13 px z kreską gubiło się między hero a wielkim H2.
   Nadtytuł w nagłówkach sekcji (`.wtc-sechead`) zostaje plakietką: jasne
   czerwone tło, pastylka — ten sam język co plakietka „Nowość" na kaflu.
   Nadtytuły poza nagłówkami sekcji (hero, strona O nas) bez zmian. */
.wtc-sechead .wtc-eyebrow {
	display: inline-flex;
	background: var(--wtc-red-soft);
	color: var(--wtc-red-dark);
	padding: 7px 14px;
	border-radius: var(--wtc-radius-pill);
	font-size: 12.5px;
	letter-spacing: .12em;
	margin: 0 0 12px;
}
.wtc-sechead .wtc-eyebrow::before { width: 14px !important; }

/* Komunikat etapu bez produktów (widok klienta). */
.wtc-stage__soon { font-size: 16px; color: var(--wtc-ink); max-width: 62ch; margin: 8px 0 14px; }

/* ---------- 0.36.4: kafel musi wyglądać na klikalny ----------
   Kafel etapu miał ikonę, nazwę i listę — i żadnego wezwania. Jedyny
   sygnał klikalności (tło w hover, ikona zmieniająca kolor) nie istnieje
   na telefonie, bo tam nie ma ani kursora, ani stanu hover. A telefon to
   większość ruchu z Google. Efekt: kafel czytany jak akapit z listą.
   Jawne „Zobacz narzędzia →" działa na każdym urządzeniu i przy każdym
   sposobie obsługi. Kafle kategorii miały ten sam problem — dostają
   strzałkę przy liczniku. */
.wtc-area { display: flex; flex-direction: column; }

/* Wezwanie dociskane do dołu, nie lista.
   W 0.14.2 `margin-top: auto` na liście robiło dziurę wyglądającą jak
   brakująca treść. Tu jest odwrotnie: dziura wypada NAD wezwaniem,
   a wezwania wyrównane w jednej linii we wszystkich kaflach czytają się
   jak stopka kafla, nie jak brak. */
.wtc-area__cta {
	margin-top: auto;
	padding-top: 18px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wtc-red);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.2;
}

/* Strzałka: jedyny ruch w kaflu. Przesunięcie o 4 px wystarcza, żeby
   potwierdzić kierunek — większe wygląda jak animacja dla animacji.
   Reguła `prefers-reduced-motion` z góry pliku wyłącza to globalnie. */
.wtc-tile__arr { transition: transform .18s ease; }
.wtc-area:hover .wtc-tile__arr,
.wtc-area:focus-visible .wtc-tile__arr,
.wtc-group:hover .wtc-tile__arr,
.wtc-group:focus-visible .wtc-tile__arr { transform: translateX(4px); }

/* Kafel etapu unosi się jak kafle kategorii i produktów — do tej pory
   jako jedyny zostawał płaski, przez co wyglądał na element dekoracyjny. */
.wtc-area { transition: transform .18s ease, box-shadow .18s ease; }
.wtc-area:hover { box-shadow: var(--wtc-shadow-hover); transform: translateY(-2px); }

/* Kafle kategorii: strzałka w wierszu licznika. */
.wtc-group__c { display: inline-flex; align-items: center; gap: 10px; }
.wtc-group .wtc-tile__arr { color: var(--wtc-red); font-weight: 700; }
.wtc-group.has-photo .wtc-group__c { display: flex; justify-content: space-between; }
/* Kafel pustej kategorii (widok administratora) nie zaprasza do kliknięcia. */
.wtc-group.is-empty .wtc-tile__arr { color: var(--wtc-soft); }

/* Nawigacja klawiaturą: kafel jest linkiem, więc musi mieć widoczny stan.
   Obrys idzie na zewnątrz (`outline-offset`), bo kafle mają `overflow:
   hidden` i obrys wewnętrzny gubiłby się pod zdjęciem kategorii. */
.wtc-area:focus-visible,
.wtc-group:focus-visible {
	outline: 3px solid var(--wtc-focus);
	outline-offset: 3px;
}

/* ---------- 0.36.5: kafel ma być widać, zdjęcie ma nie dominować ----------
   Dwie rzeczy z podglądu na tylox.pro.

   1) Krawędzie. W 0.16.0 wszystkie kafle straciły ramkę na rzecz miękkiego
      cienia („zaokrąglenia zamiast ramek"). Na białym tle to działało, ale
      sekcje strony głównej mają tło piaskowe, a biała karta na jasnym tle
      z cieniem 6% czerni po prostu się rozpływa — cztery produkty czytały się
      jak jedna plama, nie jak cztery klikalne rzeczy. Wraca cienka ramka
      w kolorze `--wtc-line`: nadal delikatnie, ale kafel ma początek i koniec.

   2) Zdjęcie. Kwadratowy kadr z 0.13.2 dawał największą możliwą tarczę, tyle
      że zdjęcie zaczęło zjadać kafel: nazwa, symbol i cena zeszły poniżej
      pierwszego ekranu. Kadr 5:4 skraca zdjęcie o piątą część i przywraca
      proporcję między towarem a danymi, które go sprzedają, nie oddając
      jednocześnie tarczy z powrotem do 4:3. */
.wtc-card, .wtc-group, .wtc-area, .wtc-door, .wtc-post, .wtc-part {
	border: 1px solid var(--wtc-line) !important;
}
/* 0.44.1: kafel produktu wyjęty z tej reguły — jego obwódka po najechaniu jest
   czerwona (patrz koniec pliku). Reszta kafli (grupy, kategorie, wpisy) zostaje
   przy ciemnej, bo to nawigacja, nie towar.

   `!important` zostało tu z czasów, gdy reguła musiała pokonać motyw nadrzędny.
   Utrudnia nadpisywanie, ale usunięcie go bez sprawdzenia wszystkich kafli
   groziłoby cofnięciem tamtej poprawki — bezpieczniej zawęzić listę selektorów
   niż ruszać mechanizm, który działa. */
.wtc-group:hover, .wtc-area:hover,
.wtc-door:hover, .wtc-post:hover, .wtc-part:hover {
	border-color: var(--wtc-ink-strong) !important;
}
/* Kafel pustej kategorii zostaje przy przerywanej ramce (widok admina). */
.wtc-group.is-empty { border-style: dashed !important; }

.wtc-card__media,
.wtc-card__media a,
.wtc-card .wtc-card__media {
	aspect-ratio: 5 / 4 !important;
	padding: 10px !important;
}
.wtc-card__media img,
.wtc-card__media a img,
.woocommerce ul.products li.product .wtc-card__media img {
	max-width: 92% !important;
	max-height: 92% !important;
}
/* Dwie kolumny na telefonie: tam zdjęcie i tak jest małe, 4:3 zostaje. */
@media (max-width: 560px) {
	.wtc-card__media,
	.wtc-card__media a,
	.wtc-card .wtc-card__media {
		aspect-ratio: 4 / 3 !important;
		padding: 6px !important;
	}
}

/* ---------- 0.36.6: wezwanie na kaflu etapu — rozmiar i stopka ----------
   14,5 px było mniejsze od pozycji listy (16 px) i dużo mniejsze od nazwy
   etapu — jedyna akcja w kaflu okazała się najdrobniejszym tekstem w kaflu.
   Wezwanie idzie do 16,5 px i dostaje kreskę nad sobą: przy kaflach o różnej
   liczbie pozycji odstęp nad wezwaniem bywa różny, a kreska zamienia go
   w stopkę kafla zamiast w przypadkową dziurę. */
.wtc-area__cta {
	font-size: 16.5px;
	padding-top: 16px;
	border-top: 1px solid var(--wtc-line);
	width: 100%;
	justify-content: flex-start;
}
.wtc-area__cta .wtc-tile__arr { font-size: 1.08em; }
.wtc-area:hover .wtc-area__cta { border-top-color: var(--wtc-red); }

@media (max-width: 560px) {
	.wtc-area__cta { font-size: 16px; padding-top: 14px; }
}

/* ---------- 0.36.7: kafle etapów na telefonie ----------
   Na telefonie kafel etapu zajmuje całą szerokość i jest wysoki — czyta się
   jak sekcja treści, nie jak przycisk. Nie pomaga nic z desktopu: hover,
   unoszenie i zmiana ramki nie istnieją pod palcem. Zostają dwa środki:
   wygląd wezwania i reakcja na dotknięcie.

   Wezwanie przestaje być linkiem tekstowym i staje się pastylką na całą
   szerokość, ze strzałką dosuniętą do prawej krawędzi — to wzorzec, który
   każdy zna z aplikacji: wiersz ze strzałką po prawej jest do stuknięcia.
   Wysokość 48 px to jednocześnie cel dotykowy zgodny ze standardem motywu.

   `:active` jest na telefonie jedynym stanem interakcji, jaki w ogóle
   istnieje — bez niego stuknięcie nie daje żadnego potwierdzenia i wygląda
   jak zawieszenie strony. */
@media (max-width: 620px) {
	.wtc-area {
		padding: 20px 18px 18px !important;
		-webkit-tap-highlight-color: transparent;
	}
	/* Mniejsza ikona: przy sześciu kaflach w kolumnie 46 px robiło z ekranu
	   listę ikon, a nie listę etapów. */
	.wtc-area .wtc-ico { width: 34px; height: 34px; margin-bottom: 10px; }
	.wtc-area__n { margin-bottom: 4px; }
	.wtc-area h3 { margin-bottom: 10px; }
	.wtc-area ul { font-size: 15px; line-height: 1.7; }

	.wtc-area__cta {
		margin-top: 16px;
		padding: 0 14px;
		min-height: 48px;
		width: 100%;
		justify-content: space-between;
		border: 1.5px solid var(--wtc-red);
		border-radius: var(--wtc-radius-sm);
		background: var(--wtc-red-soft);
		font-size: 16px;
	}
	.wtc-area__cta .wtc-tile__arr { font-size: 1.15em; }

	/* Potwierdzenie stuknięcia — jedyny stan, jaki daje dotyk. */
	.wtc-area:active { transform: none; background: var(--wtc-red-soft); }
	.wtc-area:active .wtc-area__cta { background: var(--wtc-red); color: #fff; }

	/* Kafle kategorii mają ten sam problem: cały wiersz jest klikalny,
	   więc strzałka idzie na prawą krawędź, a nie tuż obok licznika.
	   0.36.10: przez `margin-left: auto`, nie przez `width: 100%` — patrz
	   komentarz na końcu pliku. */
	.wtc-group__c { margin-left: auto; }
	.wtc-group:active { background: var(--wtc-sand); }
}

/* ---------- 0.36.8: białe tło ramki zdjęcia ----------
   Ramka miała tło piaskowe, ale packshoty producenta to JPEG-i ze studyjnym
   białym tłem — bez kanału alfa. Zdjęcie wpisane w ramkę (`contain`, 92%)
   zostawiało dokoła piaskowy margines, a w środku pokazywało biały prostokąt
   pliku: efekt naklejki przyklejonej do kafla.

   Ramka robi się biała, więc krawędź pliku znika. Kreska pod ramką zostaje —
   to ona, a nie kolor tła, oddziela zdjęcie od danych produktu.

   Docelowo lepsze jest odwrotne rozwiązanie: zdjęcia z przezroczystością
   i piaskowa ramka jako tło. To jednak decyzja o sesji zdjęciowej, nie o CSS
   — do rozstrzygnięcia przy packshotach top 100 SKU.

   Kafel BEZ zdjęcia zostaje przy piaskowym tle: pusty biały prostokąt
   niczym nie różniłby się od kafla ze zdjęciem, które się nie wczytało. */
.wtc-card__media { background: var(--wtc-media-bg, var(--wtc-white)) !important; }
.wtc-card__media img.woocommerce-placeholder,
.wtc-card__media img[src*="woocommerce-placeholder"] {
	background: var(--wtc-sand);
	padding: 12%;
	box-sizing: border-box;
}

/* ---------- 0.36.9: ramka pod kolor zdjęcia ----------
   `--wtc-media-bg` wstawia szablon kafla z koloru wypróbkowanego przy
   krawędziach pliku (inc/media-bg.php). Kolor zapasowy zostaje biały:
   zdjęcia z Odoo mają tło wypalone w pliku, a biel trafia w większość z nich.
   Zdjęcia z przezroczystością nie dostają zmiennej wcale. */

/* ---------- 0.36.10: naprawa kafla kategorii na telefonie ----------
   W 0.36.7 licznik z strzałką dostał `width: 100%`, żeby strzałka usiadła
   przy prawej krawędzi. Kafel jest kontenerem elastycznym w rzędzie
   (zdjęcie · nazwa · licznik), więc element żądający całej szerokości
   ścisnął nazwę do zera i tytuł kategorii złamał się po jednej literze
   w pionie.

   Prawidłowo robi to `margin-left: auto`: element zostaje przy swojej
   szerokości, a wolne miejsce ląduje przed nim.

   Do tego dwa zabezpieczenia, żeby to się nie powtórzyło przy jakiejkolwiek
   przyszłej zmianie: kolumna z nazwą dostaje `min-width: 0` (bez tego
   element elastyczny nie zejdzie poniżej szerokości najdłuższego wyrazu
   i będzie rozpychał albo łamał sąsiadów), a licznik `flex: 0 0 auto`,
   czyli nie kurczy się i nie rozpycha. */
.wtc-group__t { min-width: 0; }
.wtc-group__c { flex: 0 0 auto; }
/* Nazwa kategorii łamie się po wyrazach, nigdy w środku wyrazu. */
.wtc-group h3 { overflow-wrap: break-word; word-break: normal; }

/* ----------------------------------------------------------------------
   0.37.6 — Producent + B2B jako jeden blok.
   Grafitowy kontrapunkt w ogonie strony: filary marki po lewej, karta
   współpracy po prawej. Czerwień zostaje przy pasie doradcy — dwa
   czerwone wezwania na jednym ekranie konkurują o to samo kliknięcie.
   ---------------------------------------------------------------------- */
.wtc-prod { background: var(--wtc-ink-strong); color: #fff; padding: 52px 0; }
.wtc-prod__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.wtc-prod .wtc-sechead { margin-bottom: 20px; }
.wtc-prod .wtc-sechead h2 { color: #fff; }
/* 0.37.7: nadtytuł na ciemnym tle. Reguła `.wtc-sechead .wtc-eyebrow`
   robi z nadtytułu jasnoczerwoną pastylkę — świetnie na bieli, na graficie
   wygląda jak wklejka z innej strony i ma kontrast poniżej normy.
   Na ciemnym tle pastylka jest półprzezroczystą bielą. */
.wtc-prod .wtc-eyebrow,
.wtc-prod .wtc-sechead .wtc-eyebrow {
	background: rgba(255, 255, 255, .10);
	color: #fff;
}
.wtc-prod .wtc-eyebrow::before { background: var(--wtc-red) !important; }
.wtc-prod__b2b .wtc-eyebrow { background: none; padding: 0; color: rgba(255, 255, 255, .66); }

/* filary na ciemnym tle: bez białych kafli, żeby blok czytał się
   jako jedna płaszczyzna, a nie jako siatka wyciętych prostokątów */
.wtc-benefits--dark {
	grid-template-columns: repeat(3, 1fr);
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .14);
}
.wtc-benefits--dark li { background: var(--wtc-ink-strong); }
.wtc-benefits--dark h3 { color: #fff; }
.wtc-benefits--dark p { color: rgba(255, 255, 255, .74); }

.wtc-prod__b2b {
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--wtc-radius);
	padding: 24px;
}
/* krój bez wersalików — zgodnie z językiem wizualnym od 0.16 */
.wtc-prod__b2b h3 {
	font-family: var(--wtc-font-body); font-weight: 700; letter-spacing: -.02em;
	font-size: 21px; line-height: 1.15; color: #fff; margin: 8px 0 10px;
}
.wtc-prod__b2b p { margin: 0 0 16px; font-size: 14.5px; color: rgba(255, 255, 255, .78); line-height: 1.5; }
.wtc-prod__phone a {
	display: block; font-family: var(--wtc-font-mono); font-size: 18px;
	color: #fff; text-decoration: none;
}
.wtc-prod__phone span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); margin-top: 2px; }

.wtc-btn--light { background: #fff; color: var(--wtc-ink-strong); border-color: #fff; }
.wtc-btn--light:hover { background: var(--wtc-sand); border-color: var(--wtc-sand); color: var(--wtc-ink-strong); }

@media (max-width: 900px) {
	.wtc-prod__grid { grid-template-columns: 1fr; gap: 28px; }
	.wtc-benefits--dark { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.wtc-prod { padding: 36px 0; }
	.wtc-prod__b2b { padding: 20px; }
	.wtc-prod .wtc-btn { width: 100%; text-align: center; }
}

/* zdanie dla wykonawcy pod kartą B2B (0.37.8) */
.wtc-prod__note { margin-top: 22px; }
.wtc-prod__note p {
	margin: 0; font-size: 14px; line-height: 1.6;
	color: rgba(255, 255, 255, .62); max-width: 92ch;
}
.wtc-prod__note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wtc-prod__note a:hover { color: var(--wtc-red-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIELOKROKOWY CHECKOUT

   Jeden spójny blok zamiast pięciu warstw poprawek doklejanych przy kolejnych
   wersjach. Tamte zaczęły się nadpisywać — pięć definicji karty wyboru, trzy
   nawigacji — i przestało być jasne, która reguła wygrywa. Tu obowiązuje
   kolejność: zmienne, układ, składowe, warianty kroków, ekrany wąskie.

   Język wizualny idzie za marką: **czerń, żółć, ostre krawędzie**. Promień 4px,
   nie 8px — reszta sklepu jest kanciasta i checkout nie ma wyglądać jak wtyczka
   z innego systemu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* **Zmienne na ``, nie na `.wtc-checkout-layout`.**

   Definicja na kontenerze układu wyglądała porządniej, ale pasek kroków,
   komunikat o kuponie i część elementów WooCommerce stoją **poza** tym
   kontenerem. Tam `var(--wtc-co-accent)` nie miało wartości, więc przeglądarka
   odrzucała całą deklarację i wracała do domyślnych barw motywu nadrzędnego —
   stąd niebieskie przyciski i niebieska ramka kuponu.

   Gorzej: w regule kroku wykonanego padało tylko tło (zmienna), a `color: #fff`
   zostawał — numery kroków były białe na białym. Deklaracja z nieznaną zmienną
   **nie cofa się do wartości domyślnej, tylko znika**, i to jest dokładnie ta
   klasa błędu, której nie widać w kodzie.

   0.53.1: selektor `:root` był tutaj ZGUBIONY — blok zaczynał się od samego
   `{`, czyli od czegoś, co nie jest poprawnym CSS-em. Przeglądarka odrzucała
   go w całości razem z dwunastoma definicjami poniżej, więc `--wtc-co-*` nie
   istniały, a 73 użycia bez wartości zapasowej stawały się deklaracjami
   nieprawidłowymi na etapie wyliczania: kolor wracał do dziedziczonego, tło do
   przezroczystego. Komentarz wyżej opisuje dokładnie tę awarię — i przez ten
   jeden brakujący selektor sam ją powodował. */
:root {
	/* **Kolory z palety motywu, nie własne.** Checkout przyszedł z innego
	   sklepu i miał jego barwy — różnicę widać było natychmiast, gdy przycisk
	   checkoutu stawał obok przycisku „Szukaj" w nagłówku.

	   0.53.1: to zdanie było wcześniej nieczytelne, bo automatyczna podmiana
	   barw na tokeny przeszła również po komentarzach i wstawiła po obu
	   stronach porównania tę samą wartość. Komentarz opisujący różnicę dwóch
	   barw przestał więc opisywać cokolwiek. Stąd zasada: podmiany wartości
	   omijają komentarze, bo tam barwa jest dokumentacją, a nie stylem. */
	/* **Przepisane na tokeny WERTEC.** Brukarz ma czerń i żółć oraz promień 4px;
	   ten motyw ma czerwień, grafit i zaokrąglenia 10/14px. Zostawienie
	   oryginalnych wartości dałoby checkout wyglądający jak z innego sklepu —
	   a to jest ostatni ekran przed zapłatą, czyli najgorsze miejsce na
	   niespójność. Wartości są ALIASAMI tokenów marki, nie kopiami: zmiana
	   czerwieni w style.css przechodzi też tutaj.
	
	   Zmienne wiszą na `:root`, nie na kontenerze układu. W brukarzu ten wybór
	   był źródłem realnej awarii: pasek kroków i komunikat o kuponie stoją POZA
	   kontenerem, więc deklaracja z nieznaną zmienną nie wracała do wartości
	   domyślnej, tylko znikała — numery kroków wychodziły białe na białym. */
	--wtc-co-radius: var(--wtc-radius-sm, 10px);
	--wtc-co-line: var(--wtc-line);
	--wtc-co-line-strong: var(--wtc-soft);
	--wtc-co-ink: var(--wtc-ink-strong);
	--wtc-co-accent: var(--wtc-red);
	--wtc-co-accent-dark: var(--wtc-red-dark);
	--wtc-co-muted: var(--wtc-soft);
	--wtc-co-surface: var(--wtc-sand);
	--wtc-co-ok: var(--wtc-ok);
	--wtc-co-warn: var(--wtc-warn);
	--wtc-co-error: var(--wtc-red-dark);
	/* **Kolor napisu na akcencie — nowa zmienna, której pierwowzór nie miał.**
	   Tam akcentem jest żółć, więc napis mógł być ciemny i reguły wpisywały
	   `color: var(--co-ink)` wprost. Tu akcentem jest czerwień: ciemny napis na
	   niej ma kontrast poniżej normy i nie wygląda jak przycisk tej marki. */
	--wtc-co-on-accent: var(--wtc-white, #ffffff);
}

.wtc-checkout-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
	align-items: start;
	gap: 1.5rem;
	padding: 1.5rem 0 2.5rem;
}

/* Ostatni krok nie ma kolumny bocznej — podsumowanie jest tam treścią strony. */
.wtc-checkout-step--podsumowanie {
	grid-template-columns: minmax(0, 1fr);
}

/* Kadence i WooCommerce stylują `form.checkout` jako własną siatkę dwukolumnową.
   Nasz układ jest poziom wyżej, więc cudza siatka wciskała cały checkout w jedną
   wąską kolumnę. Klasy muszą zostać — po nich WooCommerce rozpoznaje formularz. */
form.checkout.wtc-checkout-form {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	grid-template-columns: none;
	gap: 0;
}

form.checkout.wtc-checkout-form > * {
	float: none;
	width: auto;
	max-width: none;
}

/* Atrybut `hidden` musi wygrywać z `display: grid` na kontenerach pól — inaczej
   ukryte sekcje pozostają widoczne mimo poprawnego znacznika. */
[hidden] {
	display: none !important;
}

/* ── Pasek kroków ────────────────────────────────────────────────────────── */

.wtc-steps {
	margin: 0 0 2.5rem;
}

.wtc-steps ol {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wtc-step {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	color: var(--wtc-co-ink);
}

.wtc-step::before {
	content: '';
	position: absolute;
	top: 1.35rem;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--wtc-co-line);
}

.wtc-step:first-child::before {
	display: none;
}

.wtc-step.is-done::before,
.wtc-step.is-current::before {
	background: var(--wtc-co-ink);
}

.wtc-step a,
.wtc-step > span {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

.wtc-step__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.7rem;
	height: 2.7rem;
	margin: 0 auto 0.6rem;
	border: 2px solid var(--wtc-co-line);
	border-radius: 50%;
	background: #fff;
	color: var(--wtc-co-muted);
	font-weight: 700;
	line-height: 1;
}

.wtc-step__label {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.wtc-step.is-done .wtc-step__dot {
	border-color: var(--wtc-co-ink);
	background: var(--wtc-co-ink);
	color: #fff;
}

.wtc-step.is-current .wtc-step__dot {
	/* Obwódka w kolorze tła, nie grafitowa: czerwony krążek w ciemnej obręczy
	   czytał się jak przycisk w stanie błędu. */
	border-color: var(--wtc-co-accent);
	background: var(--wtc-co-accent);
	color: var(--wtc-co-on-accent, #fff);
}

.wtc-step:not(.is-current):not(.is-done) .wtc-step__label {
	color: var(--wtc-co-muted);
}

/* ── Karty sekcji ────────────────────────────────────────────────────────── */

.wtc-panel {
	/* **Zagęszczenie 1.5.8.** Panel miał 1,75 rem odstępu z każdej strony, pola
	   1,15 rem między sobą, a nagłówek 1,25 rem pod sobą — każda z tych wartości
	   z osobna była rozsądna, ale razem dawały formularz, w którym cztery pola
	   zajmowały cały ekran. Nowe wartości mieszczą sekcję „Dane kontaktowe" w
	   jednym rzucie oka, nie zbliżając pól na tyle, żeby trudno było trafić
	   palcem. */
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: #fff;
}

.wtc-panel + .wtc-panel {
	margin-top: 1rem;
}

.wtc-panel > h2 {
	margin: 0 0 1rem;
	font-size: 1.2rem;
	line-height: 1.2;
}

.wtc-panel__subtitle {
	margin: 1.35rem 0 0.7rem;
	font-size: 1rem;
	font-weight: 700;
}

/* ── Pola ────────────────────────────────────────────────────────────────── */

.wtc-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
}

.wtc-fields .form-row-wide {
	grid-column: 1 / -1;
}

/* Kod pocztowy i miasto w jednym wierszu (0.49.9). Kod ma sześć znaków, więc
   pole na pół szerokości byłoby pustą deklaracją miejsca; wąska kolumna sama
   mówi, jakiej długości wpisu się spodziewamy. */
.wtc-field-pair {
	display: grid;
	grid-column: 1 / -1;
	gap: 0 1rem;
	grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
	align-items: start;
}
.wtc-field-pair .form-row,
.wtc-field-pair .form-row-wide {
	grid-column: auto;
}

@media (max-width: 520px) {
	/* Na wąskim ekranie miasto obok kodu robi się nieczytelne — wracają dwa
	   wiersze, bo lepsze niż dwa ciasne pola. */
	.wtc-field-pair {
		grid-template-columns: minmax(0, 1fr);
	}
}


.wtc-checkout-form .form-row {
	margin: 0 0 0.85rem;
	padding: 0;
}

.wtc-checkout-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
}

.wtc-checkout-form input[type='text'],
.wtc-checkout-form input[type='email'],
.wtc-checkout-form input[type='tel'],
.wtc-checkout-form select,
.wtc-checkout-form textarea {
	width: 100%;
	min-height: 2.7rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: #fff;
}

.wtc-checkout-form input:focus,
.wtc-checkout-form select:focus,
.wtc-checkout-form textarea:focus {
	border-color: var(--wtc-co-ink);
	outline: 2px solid var(--wtc-co-accent);
	outline-offset: 1px;
}

.wtc-toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1rem;
	font-weight: 600;
	cursor: pointer;
}

/* ── Karty wyboru: rodzaj zakupu i metoda płatności ──────────────────────── */

.wtc-choice {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem;
	margin-bottom: 1.15rem;
}

.wtc-choice--stack {
	grid-template-columns: minmax(0, 1fr);
}

.wtc-choice__card {
	display: block;
	position: relative;
	padding: 0.85rem 1rem 0.85rem 2.6rem;
	border: 2px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: #fff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wtc-choice__card:hover {
	border-color: var(--wtc-co-ink);
}

.wtc-choice__card.is-selected {
	border-color: var(--wtc-co-accent);
	background: var(--wtc-red-soft);
}

.wtc-choice__card input[type='radio'] {
	position: absolute;
	top: 1.05rem;
	left: 0.9rem;
	margin: 0;
}

.wtc-choice__title {
	display: block;
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.25;
}

.wtc-choice__hint {
	display: block;
	margin-top: 0.3rem;
	color: var(--wtc-co-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* ── NIP z przyciskiem pobierania ────────────────────────────────────────── */

.wtc-nip-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
}

.wtc-nip-row .form-row {
	flex: 1 1 14rem;
	min-width: 11rem;
	margin-bottom: 0.85rem;
}

.wtc-nip-fetch {
	flex: 0 0 auto;
	margin-bottom: 0.85rem;
	white-space: nowrap;
}

.wtc-nip-notice {
	flex: 1 1 100%;
	margin: -0.4rem 0 1rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.wtc-nip-notice[data-kind='pending'] {
	color: var(--wtc-co-muted);
}

.wtc-nip-notice[data-kind='ok'] {
	color: var(--wtc-co-ok);
}

.wtc-nip-notice[data-kind='warning'] {
	color: var(--wtc-co-warn);
}

/* ── Przyciski ───────────────────────────────────────────────────────────── */

.wtc-nav {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: 1.25rem;
}

.wtc-nav__next {
	margin-left: auto;
}

.wtc-checkout-layout .button,
.wtc-checkout-layout #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0.75rem 1.75rem;
	border-radius: var(--wtc-co-radius);
	font-weight: 700;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Akcja główna żółta, drugorzędna obrysowana. Dwa pełne przyciski o tej samej
   wadze każą wybierać między nimi, a „Wstecz" nie jest tu równorzędne. */
.wtc-nav__next,
.wtc-nip-fetch,
.wtc-checkout-layout #place_order {
	border: 2px solid var(--wtc-co-ink);
	background: var(--wtc-co-accent);
	color: var(--wtc-co-ink);
}

.wtc-nav__next:hover,
.wtc-nip-fetch:hover,
.wtc-checkout-layout #place_order:hover {
	background: var(--wtc-co-ink);
	color: #fff;
}

.wtc-nav__back {
	border: 2px solid var(--wtc-co-line);
	background: #fff;
	color: var(--wtc-co-ink);
}

.wtc-nav__back:hover {
	border-color: var(--wtc-co-ink);
	background: #fff;
}

.wtc-nip-fetch[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* ── Kolumna z podsumowaniem koszyka ─────────────────────────────────────── */

.wtc-checkout-aside {
	position: sticky;
	top: 1.5rem;
}

.wtc-cart-lines {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.wtc-cart-line {
	display: flex;
	gap: 0.75rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wtc-co-line);
}

.wtc-cart-line:first-child {
	padding-top: 0;
}

.wtc-cart-line__thumb {
	position: relative;
	flex: 0 0 3.25rem;
}

.wtc-cart-line__thumb img {
	width: 3.25rem;
	height: auto;
	border: 1px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
}

.wtc-cart-line__qty {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--wtc-co-ink);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
}

.wtc-cart-line__body {
	flex: 1 1 auto;
	min-width: 0;
}

.wtc-cart-line__name {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.wtc-cart-line__meta {
	display: block;
	margin-top: 0.25rem;
	color: var(--wtc-co-muted);
	font-size: 0.8rem;
}

.wtc-cart-line__price {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

.wtc-cart-totals,
.wtc-review-totals {
	margin: 0;
}

.wtc-cart-totals > div,
.wtc-review-totals > div {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.35rem 0;
}

.wtc-cart-totals dt,
.wtc-cart-totals dd,
.wtc-review-totals dt,
.wtc-review-totals dd {
	margin: 0;
}

.wtc-cart-totals__grand,
.wtc-review-totals__grand {
	margin-top: 0.4rem;
	padding-top: 0.8rem;
	border-top: 2px solid var(--wtc-co-ink);
	font-size: 1.15rem;
	font-weight: 700;
}

/* ── Podsumowanie na ostatnim kroku ──────────────────────────────────────── */

.wtc-review-grid {
	display: grid;
	/* **`auto-fit`, nie `repeat(2, …)`.** Zapytanie o szerokość okna nie mówi
	   nic o szerokości kolumny, w której ta siatka stoi — po podziale
	   ostatniego kroku na dwie kolumny karty miały ~230 px i adres rozpadał
	   się na litery, mimo że okno było szerokie. Tu siatka mierzy sama
	   siebie: dwie karty pojawiają się dopiero wtedy, gdy każda ma 16rem. */
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.85rem;
	margin-bottom: 1.75rem;
}

.wtc-review-card {
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: var(--wtc-co-surface);
}

.wtc-review-card h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 0.65rem;
	color: var(--wtc-co-muted);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.wtc-review-card address {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-style: normal;
	line-height: 1.45;
	/* `anywhere` rozcinało adres w środku wyrazu, gdy karta była wąska.
	   Długi e-mail nadal musi się złamać, ale nazwisko już nie. */
	overflow-wrap: break-word;
	word-break: normal;
}

.wtc-review-card p {
	margin: 0;
	font-weight: 600;
}

.wtc-review-card__badge {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.15rem 0.55rem;
	border-radius: var(--wtc-co-radius);
	background: var(--wtc-co-ink);
	color: #fff;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.wtc-review-card__edit {
	flex: 0 0 auto;
	color: var(--wtc-co-ink);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
}

.wtc-review-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}

.wtc-review-table td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wtc-co-line);
	vertical-align: top;
}

.wtc-review-table__name {
	display: block;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.wtc-review-table__meta {
	display: block;
	margin-top: 0.2rem;
	color: var(--wtc-co-muted);
	font-size: 0.82rem;
}

.wtc-review-table__qty {
	width: 5.5rem;
	text-align: center;
	white-space: nowrap;
}

.wtc-review-table__price {
	width: 7.5rem;
	text-align: right;
	font-weight: 600;
	white-space: nowrap;
}

/* Blok płatności WooCommerce osadzony w naszej karcie. */
.wtc-panel #payment {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.wtc-panel #payment .place-order {
	margin: 1.25rem 0 0;
	padding: 0;
}

.wtc-panel #payment #place_order {
	width: 100%;
	font-size: 1.05rem;
}

.wtc-panel .woocommerce-terms-and-conditions-wrapper {
	margin-bottom: 1rem;
}

/* ── Ekrany wąskie ───────────────────────────────────────────────────────── */

@media (max-width: 960px) {
	.wtc-checkout-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}

	/* Podsumowanie nad formularzem: kwota ma być widoczna, zanim ktoś zacznie
	   wpisywać dane, a nie po przewinięciu strony. */
	.wtc-checkout-aside {
		position: static;
		order: -1;
	}
}

@media (max-width: 782px) {
	.wtc-panel {
		padding: 1.25rem;
	}

	.wtc-fields,
	.wtc-choice,
	.wtc-review-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Pasek kroków w wersji zwartej: kropki zostają, podpisy chowamy poza
	   krokiem bieżącym — cztery długie nazwy obok siebie nie mieszczą się w
	   szerokości telefonu i łamały się na trzy wiersze każda. */
	.wtc-steps {
		margin-bottom: 1.75rem;
	}

	.wtc-step__dot {
		width: 2.3rem;
		height: 2.3rem;
	}

	.wtc-step::before {
		top: 1.15rem;
	}

	.wtc-step:not(.is-current) .wtc-step__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wtc-step.is-current .wtc-step__label {
		font-size: 0.85rem;
	}

	.wtc-nav {
		gap: 0.6rem;
	}

	.wtc-nav__back {
		flex: 0 0 auto;
		padding: 0.75rem 1.1rem;
	}

	.wtc-nav__next {
		flex: 1 1 auto;
	}

	.wtc-review-table__qty,
	.wtc-review-table__price {
		width: auto;
	}
}

@media (max-width: 420px) {
	.wtc-nip-row .form-row,
	.wtc-nip-fetch {
		flex: 1 1 100%;
		min-width: 0;
	}

	.wtc-nip-fetch {
		width: 100%;
	}

	.wtc-cart-line__thumb {
		flex-basis: 2.75rem;
	}

	.wtc-cart-line__thumb img {
		width: 2.75rem;
	}
}

/* Podpowiedź pod polem — wyjaśnienie, które zdjęliśmy z karty wyboru, żeby
   element decyzyjny pozostał krótki. */
.wtc-field-hint {
	flex: 1 1 100%;
	margin: -0.35rem 0 1.15rem;
	color: var(--wtc-co-muted);
	font-size: 0.88rem;
	line-height: 1.45;
}

/* ── Spójność: tło, metody dostawy, komunikaty ───────────────────────────
   Elementy renderowane przez WooCommerce (wybór dostawy, zgody, komunikaty)
   przychodzą z własnym wyglądem i obok naszych kart wyglądały jak wklejone
   z innego sklepu. Sprowadzamy je do tego samego języka: białe karty na
   jasnym tle, czarny obrys przy zaznaczeniu, żółć wyłącznie dla akcji. */

/* Wybór dostawy w kształcie kart płatności — to ta sama decyzja, więc nie ma
   powodu, żeby wyglądała inaczej. */
.wtc-shipping-methods ul,
#shipping_method {
	margin: 0;
	padding: 0;
	list-style: none;
}

#shipping_method li {
	position: relative;
	margin: 0 0 0.85rem;
	padding: 1.05rem 1.25rem 1.05rem 2.9rem;
	border: 2px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: #fff;
	transition: border-color 0.15s ease, background 0.15s ease;
}

#shipping_method li:hover {
	border-color: var(--wtc-co-ink);
}

#shipping_method li:has(input:checked) {
	border-color: var(--wtc-co-ink);
	background: var(--wtc-red-soft);
}

#shipping_method li input[type='radio'] {
	position: absolute;
	top: 1.3rem;
	left: 1.05rem;
	margin: 0;
}

#shipping_method li label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

#shipping_method li label .amount {
	font-weight: 700;
	white-space: nowrap;
}

/* Blok płatności WooCommerce: te same karty co przy wyborze rodzaju zakupu. */
.wtc-panel .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wtc-panel .wc_payment_method {
	margin-bottom: 0.85rem;
	padding: 1.05rem 1.25rem;
	border: 2px solid var(--wtc-co-line);
	border-radius: var(--wtc-co-radius);
	background: #fff;
}

.wtc-panel .wc_payment_method label {
	margin: 0;
	font-weight: 700;
	cursor: pointer;
}

.wtc-panel .payment_box {
	margin: 0.75rem 0 0;
	padding: 0.85rem 1rem;
	border-radius: var(--wtc-co-radius);
	background: var(--wtc-co-surface);
	color: var(--wtc-co-muted);
	font-size: 0.92rem;
}

.wtc-panel .payment_box::before {
	display: none;
}

/* --------------------------------------------------------------
   OSTATNI KROK: DWIE KOLUMNY  (0.49.6)
   Lewa sprawdza, prawa płaci. Jeden formularz, dzielą się tylko
   `div`-y w środku — POST zostaje bez zmian.
   -------------------------------------------------------------- */
.wtc-summary-grid {
	display: grid;
	gap: 1.5rem;
}
.wtc-summary-side {
	display: grid;
	gap: 1.5rem;
	align-content: start;
}
.wtc-summary-main > .wtc-panel,
.wtc-summary-side > .wtc-panel {
	margin-bottom: 0;
}
.wtc-summary-totals__title {
	margin: 0 0 0.8rem;
	font-size: 1.05rem;
}
.wtc-summary-totals .wtc-review-totals {
	margin: 0;
}

@media (min-width: 1100px) {
	.wtc-summary-grid {
		/* Kolumna z płatnością nie może być wąska: mieści zgody, informację
		   przedumowną i przycisk, a zwężona łamałaby je co drugie słowo. */
		grid-template-columns: minmax(0, 1.35fr) minmax(23rem, 1fr);
		align-items: start;
		gap: 2rem;
	}
}

/* Nagłówek karty z odnośnikiem „Zmień" ma się zawijać, a nie ściskać tytuł. */
.wtc-review-card h3 {
	flex-wrap: wrap;
}

/* Informacja przedumowna: ma być czytana, więc normalny tekst, nie druk
   drobnym maczkiem pod przyciskiem. */
.wtc-legal {
	margin: 0 0 1.4rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--wtc-co-radius);
	background: var(--wtc-co-surface);
}
.wtc-legal__title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
}
.wtc-legal__list {
	margin: 0;
	padding-left: 1.15rem;
	font-size: 0.95rem;
	line-height: 1.6;
}
.wtc-legal__list li + li { margin-top: 0.45rem; }
.wtc-legal__list a { text-decoration: underline; }
.wtc-legal__admin {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px dashed var(--wtc-co-line);
	font-size: 0.88rem;
	color: var(--wtc-co-muted);
}

/* Zgody: pole wyboru w kolorze marki, treść czytelna. */
.wtc-checkout-layout input[type='checkbox'],
.wtc-checkout-layout input[type='radio'] {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--wtc-co-ink);
}

.woocommerce-terms-and-conditions-wrapper .form-row,
.wtc-panel .woocommerce-privacy-policy-text {
	margin: 0 0 0.85rem;
	color: var(--wtc-co-muted);
	font-size: 0.92rem;
	line-height: 1.5;
}

.woocommerce-terms-and-conditions-checkbox-text {
	font-weight: 600;
}

/* Komunikaty WooCommerce w tym samym języku co karty. */
.wtc-checkout-layout .woocommerce-error,
.wtc-checkout-layout .woocommerce-message,
.wtc-checkout-layout .woocommerce-info {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wtc-co-line-strong);
	border-left: 4px solid var(--wtc-co-ink);
	border-radius: var(--wtc-co-radius);
	background: var(--wtc-co-surface);
	color: var(--wtc-co-ink);
	list-style: none;
}

.wtc-checkout-layout .woocommerce-error {
	border-left-color: var(--wtc-co-error);
}

.wtc-checkout-layout .woocommerce-message,
.wtc-checkout-layout .woocommerce-info {
	border-left-color: var(--wtc-co-accent);
}

/* Odnośniki w checkoucie: podkreślenie zamiast koloru, bo kolorem mówimy
   wyłącznie o akcjach. */
.wtc-checkout-layout a:not(.button) {
	color: var(--wtc-co-ink);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.wtc-checkout-layout a:not(.button):hover {
	text-decoration-thickness: 2px;
}

/* Stan wciśnięcia i skupienia jednakowy dla wszystkich przycisków kroku. */
.wtc-checkout-layout .button:active,
.wtc-checkout-layout #place_order:active {
	transform: translateY(1px);
}

.wtc-checkout-layout .button:focus-visible,
.wtc-checkout-layout #place_order:focus-visible {
	outline: 3px solid var(--wtc-co-accent-dark);
	outline-offset: 2px;
}

/* ── Strona kasy: nagłówek, szerokość, elementy poza kontenerem ──────────
   Trzy rzeczy renderowane **poza** `.wtc-checkout-layout`, więc wcześniejsze
   reguły ich nie dosięgały: pas nagłówka Kadence z tytułem „Kasa", komunikat
   o kuponie (hak `woocommerce_before_checkout_form`) i kontener treści.
   Selektory są tu na poziomie `body`, bo tam kończy się nasza pewność co do
   struktury motywu nadrzędnego. */

/* Treść kasy wyśrodkowana i o stałej maksymalnej szerokości. Bez tego
   szeroki ekran zostawiał checkout przy lewej krawędzi, bo Kadence liczy
   szerokość kolumny z układu strony, a nasz układ ma własną siatkę. */
.woocommerce-checkout .content-container,
.woocommerce-cart .content-container,
.woocommerce-checkout .content-area,
.woocommerce-cart .content-area,
.woocommerce-checkout .entry-content-wrap,
.woocommerce-cart .entry-content-wrap {
	max-width: 1280px;
	margin-inline: auto;
	float: none;
	width: 100%;
}

.woocommerce-checkout .primary-sidebar,
.woocommerce-cart .primary-sidebar,
.woocommerce-checkout .secondary-sidebar,
.woocommerce-cart .secondary-sidebar {
	display: none;
}

/* Komunikat o kuponie stoi przed formularzem, czyli poza naszym kontenerem. */
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-error {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wtc-co-line-strong, var(--wtc-line));
	border-left: 4px solid var(--wtc-co-accent, var(--wtc-red));
	border-radius: var(--wtc-co-radius, 10px);
	background: var(--wtc-co-surface, var(--wtc-sand));
	color: var(--wtc-co-ink, var(--wtc-ink-strong));
	list-style: none;
}

.woocommerce-checkout .woocommerce-error {
	border-left-color: var(--wtc-co-error, #b3261e);
}

.woocommerce-checkout .woocommerce-info::before,
.woocommerce-checkout .woocommerce-message::before,
.woocommerce-checkout .woocommerce-error::before {
	display: none;
}

/* **Przyciski: `!important` i to nie jest lenistwo.**
   Kadence styluje `.wp-element-button` i `.button` własnymi zmiennymi
   wczytywanymi po naszym arkuszu, więc zwykła reguła o tej samej wadze
   przegrywa kolejnością. Granatowe „Dalej" brało się właśnie stąd. Zawężamy to
   do przycisków kroku, żeby nie ruszać przycisków w reszcie sklepu. */
.wtc-nav .button,
.wtc-nip-fetch,
.wtc-checkout-layout #place_order {
	border-radius: var(--wtc-co-radius, 10px) !important;
	box-shadow: none !important;
	text-transform: none !important;
}

.wtc-nav__next,
.wtc-nip-fetch,
.wtc-checkout-layout #place_order {
	border: 1.5px solid var(--wtc-co-accent, var(--wtc-red)) !important;
	background: var(--wtc-co-accent, var(--wtc-red)) !important;
	background-image: none !important;
	color: var(--wtc-co-on-accent, #fff) !important;
}

.wtc-nav__next:hover,
.wtc-nip-fetch:hover,
.wtc-checkout-layout #place_order:hover {
	background: var(--wtc-red-dark) !important;
	border-color: var(--wtc-red-dark) !important;
	color: var(--wtc-co-on-accent, #fff) !important;
}

.wtc-nav__back {
	border: 2px solid var(--wtc-co-line-strong, var(--wtc-line)) !important;
	background: #fff !important;
	background-image: none !important;
	color: var(--wtc-co-ink, var(--wtc-ink-strong)) !important;
}

.wtc-nav__back:hover {
	border-color: var(--wtc-co-ink, var(--wtc-ink-strong)) !important;
}

/* ── Pas nagłówka znika na stronach zakupowych ───────────────────────────
   Próba samego obniżenia nie zadziałała: Kadence składa wysokość tego pasa
   z kilku warstw (sekcja, kontener wewnętrzny, nagłówek wpisu, tło), a każda
   z nich ma własne odstępy ustawiane w Dostosowywaniu. Dopasowywanie się do
   nich po kolei skończyłoby się listą reguł, która i tak pęknie przy pierwszej
   zmianie ustawień motywu.

   Dlatego pas **znika w całości**, a nie jest zmniejszany. Na koszyku, kasie
   i koncie tytuł nie niesie informacji, której klient by nie miał — wie, gdzie
   jest, bo właśnie tam kliknął, a każda z tych stron ma własne nagłówki sekcji.
   Zysk to ponad 400 px pierwszego ekranu, czyli miejsce na pierwsze pola
   formularza zamiast na dekorację.

   Gdyby motyw kiedyś przestał używać tych nazw klas, to samo da się wyłączyć
   w Dostosowywaniu → Układ strony → Tytuł strony. */
.woocommerce-cart .entry-hero-container-inner,
.woocommerce-checkout .entry-hero-container-inner,
.woocommerce-account .entry-hero-container-inner,
.woocommerce-cart .entry-hero-section,
.woocommerce-checkout .entry-hero-section,
.woocommerce-account .entry-hero-section,
.woocommerce-cart .page-hero-section,
.woocommerce-checkout .page-hero-section,
.woocommerce-account .page-hero-section,
.woocommerce-cart .entry-hero,
.woocommerce-checkout .entry-hero,
.woocommerce-account .entry-hero,
.woocommerce-cart .wp-site-blocks .entry-hero,
.woocommerce-checkout .wp-site-blocks .entry-hero {
	display: none !important;
}

/* Bez pasa treść zaczyna się tuż pod nagłówkiem strony — dokładamy oddech,
   żeby nie kleiła się do menu. */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area {
	padding-top: 2rem;
}

/* --------------------------------------------------------------
   PAS Z TYTUŁEM NA STRONACH TREŚCI  (0.49.14)

   Ta sama zasada co przy koszyku, tylko powód inny. Strona kontaktu ma
   własny nagłówek w treści („Powiedz, co tniesz…”), więc pas Kadence
   dokładał nad nim drugi tytuł i prawie cały pierwszy ekran pustki.
   Dwa nagłówki jeden pod drugim to nie hierarchia, tylko powtórzenie.

   Pas znika **tylko** na stronach z krótkim kodem motywu (klasa dokładana
   w `wtc_own_header_body_class()`). Regulamin i polityka prywatności go
   zachowują, bo tam tytuł jest jedyną informacją, co to za dokument.
   -------------------------------------------------------------- */
.wtc-own-header .entry-hero-container-inner,
.wtc-own-header .entry-hero-section,
.wtc-own-header .page-hero-section,
.wtc-own-header .entry-hero,
.wtc-own-header .wp-site-blocks .entry-hero {
	display: none !important;
}

.wtc-own-header .content-area {
	padding-top: 1.5rem;
}

/* **Pas znika na WSZYSTKICH stronach (0.49.15).**

   Zmniejszanie wysokości okazało się walką z wiatrakami: Kadence liczy ten pas
   z ustawień motywu rodzica, więc nadpisanie paddingu w arkuszu potomnym łapie
   jedną wartość, a mija trzy inne. A i tak zostawał drugi tytuł nad tym, który
   stoi w treści strony — jak „Dostawa i płatności" napisane dwa razy pod sobą.

   Wpisy na blogu pas zachowują: tam tytuł wpisu jest w pasie i nigdzie indziej.

   **Czystsze rozwiązanie jest w panelu**: Dostosuj → Układ → Strony → Tytuł
   strony, wyłącznik po stronie Kadence usuwa znaczniki zamiast je ukrywać.
   Ta reguła jest zabezpieczeniem na wypadek, gdyby ustawienie zostało kiedyś
   przestawione. */
.page .entry-hero-container-inner,
.page .entry-hero-section,
.page .page-hero-section,
.page .entry-hero,
.page .wp-site-blocks .entry-hero {
	display: none !important;
}

/* Po usunięciu pasa zostaje jeszcze odstęp, który Kadence trzymał POD nim —
   liczony tak, jakby nad treścią coś stało. Zdejmujemy go z opakowań treści
   i zostawiamy jeden świadomy oddech na poziomie kolumny. */
.page .content-area {
	padding-top: 2rem !important;
}

.page .entry-content-wrap,
.page .site-main,
.page article.entry {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* --------------------------------------------------------------
   NAGŁÓWEK KATALOGU  (0.49.18)

   Na liście produktów pas Kadence robi to samo co na stronach: dokłada
   drugi tytuł nad tym, który wypisuje `archive-product.php`. Znika, a zostaje
   nagłówek z szablonu — ten, który zna kategorię i jej opis.
   -------------------------------------------------------------- */
.post-type-archive-product .entry-hero-container-inner,
.post-type-archive-product .entry-hero-section,
.post-type-archive-product .page-hero-section,
.post-type-archive-product .entry-hero,
.tax-product_cat .entry-hero-container-inner,
.tax-product_cat .entry-hero-section,
.tax-product_cat .page-hero-section,
.tax-product_cat .entry-hero,
.tax-product_tag .entry-hero-container-inner,
.tax-product_tag .entry-hero-section,
.tax-product_tag .page-hero-section,
.tax-product_tag .entry-hero {
	display: none !important;
}

.post-type-archive-product .content-area,
.tax-product_cat .content-area,
.tax-product_tag .content-area {
	padding-top: 1.5rem !important;
}

/* Nagłówek katalogu do lewej, w rytmie reszty strony — wyśrodkowany
   z opisem pod spodem czytał się jak strona powitalna, a to jest lista. */
.woocommerce-products-header {
	margin: 0 0 1.5rem;
	text-align: left;
}
.woocommerce-products-header__title {
	font-family: var(--wtc-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(24px, 3vw, 34px);
	color: var(--wtc-ink-strong);
	margin: 0 0 .5rem;
}
.woocommerce-products-header .term-description,
.woocommerce-products-header .page-description {
	max-width: 70ch;
	margin: 0;
	color: var(--wtc-soft);
}

/* Kafle podkategorii nad listą — ten sam element co na landingach etapów. */
.wtc-subcats { margin: 0 0 2rem; }
.wtc-subcats__title {
	font-family: var(--wtc-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.1rem;
	letter-spacing: .03em;
	color: var(--wtc-ink-strong);
	margin: 0 0 .9rem;
}

/* ── Koszyk ──────────────────────────────────────────────────────────────
   Ten sam język co checkout: białe karty, cienka linia, akcja na żółto. */

.woocommerce-cart .woocommerce {
	padding: 2rem 0 3rem;
}

.woocommerce-cart-form__cart-item .product-name {
	line-height: 1.4;
}

/* **Opis produktu wypada z koszyka.** Koszyk odpowiada na pytanie „co i za
   ile", a nie „dlaczego to kupić" — decyzja zapadła na karcie produktu.
   Kilkuzdaniowa charakterystyka przy każdej pozycji spycha sumę i przycisk
   poza ekran, czyli utrudnia dokładnie to, po co klient tu przyszedł. */
.woocommerce-cart-form__cart-item .product-name p,
.woocommerce-cart-form__cart-item .product-name h2,
.woocommerce-cart-form__cart-item .product-name h3,
.woocommerce-cart-form__cart-item .product-name h4,
.woocommerce-cart-form__cart-item .woocommerce-product-details__short-description {
	display: none;
}

/* Wariant i dane techniczne zostają — to jest odpowiedź na „co". */
.woocommerce-cart-form__cart-item .product-name .variation,
.woocommerce-cart-form__cart-item .product-name dl {
	display: block;
	margin: 0.35rem 0 0;
	color: var(--wtc-co-muted, var(--wtc-soft));
	font-size: 0.85rem;
}

.cart_totals {
	padding: 1.5rem;
	border: 1px solid var(--wtc-co-line, var(--wtc-line));
	border-radius: var(--wtc-co-radius, 10px);
	background: #fff;
}

.cart_totals h2 {
	margin: 0 0 1rem;
	font-size: 1.2rem;
}

.wc-proceed-to-checkout .checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.1rem;
	border: 2px solid var(--wtc-co-ink, var(--wtc-ink-strong)) !important;
	border-radius: var(--wtc-co-radius, 10px) !important;
	background: var(--wtc-co-accent, var(--wtc-red)) !important;
	background-image: none !important;
	color: var(--wtc-co-ink, var(--wtc-ink-strong)) !important;
	font-weight: 700;
	box-shadow: none !important;
}

.wc-proceed-to-checkout .checkout-button:hover {
	background: var(--wtc-red-dark) !important;
	border-color: var(--wtc-red-dark) !important;
	color: var(--wtc-co-on-accent, #fff) !important;
}

/* Para „Dostawa / Płatność" w jednej karcie: etykieta nad wartością, odnośnik
   „Zmień" przy wartości, bo prowadzi do innego kroku niż sąsiedni wiersz. */
.wtc-review-pairs {
	margin: 0;
}

.wtc-review-pairs > div + div {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--wtc-co-line, var(--wtc-line));
}

.wtc-review-pairs dt {
	margin: 0 0 0.15rem;
	color: var(--wtc-co-muted, var(--wtc-soft));
	font-size: 0.82rem;
	font-weight: 600;
}

.wtc-review-pairs dd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-weight: 600;
}

/* Wybór zamknięty decyzją wcześniejszą — pokazujemy skutek, nie listę. */
.wtc-locked-choice {
	padding: 1rem 1.15rem;
	border: 1.5px solid var(--wtc-co-ink, var(--wtc-ink-strong));
	border-radius: var(--wtc-co-radius, 10px);
	background: var(--wtc-red-soft);
}

.wtc-locked-choice__value {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 700;
}

.wtc-locked-choice__hint {
	margin: 0.35rem 0 0;
	color: var(--wtc-co-muted, var(--wtc-soft));
	font-size: 0.9rem;
	line-height: 1.45;
}

/* Wymuszony wybór adresu przesyłki (0.42.0).
   Wyróżnienie znika po wyborze — krzykliwy element nad czymś, co jest już
   załatwione, uczy klienta ignorować wyróżnienia w ogóle. */
.wtc-choice--shipping.is-pending {
	padding: 1rem 1.15rem;
	border: 2px solid var(--wtc-co-accent, var(--wtc-red));
	border-radius: var(--wtc-co-radius, 10px);
	background: var(--wtc-red-soft);
}

/* --------------------------------------------------------------
   POLA FORMULARZA ZAMÓWIENIA  (0.42.1)

   **Portowany blok kroków nie zawierał stylizacji pól.** Wziąłem z drugiego
   motywu sekcję „wielokrokowy checkout", a reguły dla `input.input-text`
   stały tam osobno, wcześniej w pliku. Skutek: etykiety widoczne, pola bez
   obramowania i bez tła — formularz, w którym nie widać, gdzie się pisze.

   Reguły celują w klasy WooCommerce, nie w nasze: `.wtc-fields input` objęłoby
   tylko pola, które sami renderujemy, a pola koszyka, kuponu i logowania
   zostałyby niewidoczne.
   -------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wtc-checkout-form input[type="text"],
.wtc-checkout-form input[type="email"],
.wtc-checkout-form input[type="tel"],
.wtc-checkout-form input[type="password"],
.wtc-checkout-form textarea,
.wtc-checkout-form select {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1.5px solid var(--wtc-co-line, var(--wtc-line));
	border-radius: var(--wtc-co-radius, 10px);
	background: var(--wtc-white, #fff);
	color: var(--wtc-ink-strong);
	font: 400 15px/1.4 var(--wtc-font-body);
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:hover,
.wtc-checkout-form input:hover,
.wtc-checkout-form textarea:hover,
.wtc-checkout-form select:hover { border-color: var(--wtc-soft); }

.woocommerce form .form-row input.input-text:focus,
.wtc-checkout-form input:focus,
.wtc-checkout-form textarea:focus,
.wtc-checkout-form select:focus {
	border-color: var(--wtc-co-accent, var(--wtc-red));
	outline: 2px solid var(--wtc-focus, #1d6fb8);
	outline-offset: 1px;
}

.woocommerce form .form-row textarea, .wtc-checkout-form textarea { min-height: 110px; }

/* Etykieta bliżej swojego pola niż następnego — inaczej czyta się ją jako
   podpis pola powyżej. */
.wtc-checkout-form .form-row { margin: 0 0 1rem; }
.wtc-checkout-form .form-row label {
	display: block; margin: 0 0 .35rem;
	font-weight: 600; font-size: .95rem; color: var(--wtc-ink-strong);
}
.wtc-checkout-form .form-row .optional { font-weight: 400; color: var(--wtc-soft); }
.wtc-checkout-form .required { color: var(--wtc-co-accent, var(--wtc-red)); text-decoration: none; }

/* Dwie kolumny na szerokim ekranie: imię obok nazwiska, kod obok miasta. */
.wtc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.wtc-fields .form-row-wide,
.wtc-fields > p:only-child { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.wtc-fields { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------
   PASEK KROKÓW — dopracowanie (0.42.2)

   Reguły dopisane po portowanym bloku, żeby go nadpisać, a nie przepisywać:
   port zostaje nietknięty i widać, co jest jego, a co naszą decyzją.
   -------------------------------------------------------------- */
.wtc-steps { margin: 0 0 2.2rem; }

.wtc-step__dot {
	width: 2.6rem; height: 2.6rem;
	display: grid; place-items: center;
	margin: 0 auto .55rem;
	border: 2px solid var(--wtc-co-line, var(--wtc-line));
	border-radius: 999px;
	background: var(--wtc-white, #fff);
	font: 700 1rem/1 var(--wtc-font-body);
	color: var(--wtc-soft);
	transition: background-color .15s, border-color .15s, color .15s;
}

/* Linia łącząca kończy się na krawędzi krążka, a nie pod nim — wcześniej
   przechodziła przez środek i wyglądała na przekreślenie numeru. */
.wtc-step::before { top: 1.3rem; left: calc(-50% + 1.6rem); width: calc(100% - 3.2rem); height: 2px; }

.wtc-step__label { font-size: .95rem; line-height: 1.25; color: var(--wtc-soft); }

.wtc-step.is-done .wtc-step__dot {
	border-color: var(--wtc-ink-strong);
	background: var(--wtc-ink-strong);
	color: var(--wtc-white, #fff);
}
.wtc-step.is-done .wtc-step__label { color: var(--wtc-ink); }

.wtc-step.is-current .wtc-step__dot {
	border-color: var(--wtc-co-accent, var(--wtc-red));
	background: var(--wtc-co-accent, var(--wtc-red));
	color: var(--wtc-co-on-accent, #fff);
	/* Delikatna obwódka zamiast powiększania — zmiana rozmiaru przesuwałaby
	   sąsiednie kroki przy każdym przejściu. */
	box-shadow: 0 0 0 4px var(--wtc-red-soft);
}
.wtc-step.is-current .wtc-step__label { color: var(--wtc-ink-strong); font-weight: 600; }

.wtc-step a:hover .wtc-step__dot { border-color: var(--wtc-ink-strong); }
.wtc-step a:focus-visible .wtc-step__dot { outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 2px; }

@media (max-width: 640px) {
	/* Na telefonie zostają same numery i podpis kroku bieżącego — cztery
	   podpisy obok siebie łamią się na trzy wiersze i pasek zajmuje pół ekranu. */
	.wtc-step__dot { width: 2.2rem; height: 2.2rem; font-size: .9rem; }
	.wtc-step::before { top: 1.1rem; left: calc(-50% + 1.4rem); width: calc(100% - 2.8rem); }
	.wtc-step__label { display: none; }
	.wtc-step.is-current .wtc-step__label { display: block; font-size: .85rem; }
}

/* --------------------------------------------------------------
   PODSUMOWANIE KOSZYKA — czytelność pozycji (0.42.3)

   Trzy przyczyny „porwanego" opisu, wszystkie w portowanym bloku:

   1. Nazwa, miniatura i cena stały w JEDNYM wierszu, więc na nazwę zostawało
      kilkanaście znaków. Cena schodzi teraz pod opis i ma własny wiersz.
   2. `overflow-wrap: anywhere` łamie słowo w dowolnym miejscu — stąd
      „łożyskowan / e" i EAN rozcięty w połowie liczby. Łamiemy tylko tam,
      gdzie inaczej tekst wyszedłby poza kontener.
   3. Kolumna była wąska (18–22 rem). Poszerzona, bo nazwy narzędzi zawierają
      wymiary i symbol, a to zwykle 60+ znaków.
   -------------------------------------------------------------- */
.wtc-checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(21rem, 27rem); gap: 2rem; }

/* **Ostatni krok znowu bez kolumny bocznej.** Reguła wyżej (2666) miała już
   wyjątek dla podsumowania, ale ten wiersz przedefiniowywał siatkę PO nim, z tą
   samą wagą — czyli wygrywał. Podsumowanie rezerwowało więc 21–27 rem na
   kolumnę, której na tym kroku nie ma, i cała treść siedziała w lewych dwóch
   trzecich okna. Wyjątek musi stać po każdej regule, która go cofa. */
.wtc-checkout-step--podsumowanie { grid-template-columns: minmax(0, 1fr); }

.wtc-cart-line {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr);
	grid-template-areas:
		"thumb body"
		"thumb price";
	column-gap: .75rem;
	row-gap: .2rem;
	align-items: start;
}
.wtc-cart-line__thumb { grid-area: thumb; }
.wtc-cart-line__body  { grid-area: body; }
.wtc-cart-line__price { grid-area: price; justify-self: start; font-size: .95rem; }

.wtc-cart-line__name { overflow-wrap: break-word; word-break: normal; hyphens: none; }

/* Symbol i EAN w jednym wierszu, a gdy nie mieszczą się — łamanie MIĘDZY nimi,
   nigdy w środku numeru. Rozcięty EAN nie jest EAN-em. */
.wtc-cart-line__meta { overflow-wrap: normal; word-break: keep-all; line-height: 1.5; }

@media (max-width: 900px) {
	.wtc-checkout-layout { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------
   KOSZYK — spójność z formularzem zamówienia  (0.42.4)

   **Koszyk i zamówienie wyglądały jak z dwóch różnych motywów**, bo nimi były:
   koszyk renderuje się blokami WooCommerce, zamówienie klasycznym szablonem.
   Dwa systemy, dwie typografie, dwa zestawy odstępów — i żadnego wspólnego
   stylu, bo z drugiego motywu wziąłem tylko sekcję kroków, a reguły koszyka
   stały w tym samym pliku wcześniej.

   Ten blok obejmuje OBIE ścieżki: `table.shop_table` klasycznego koszyka
   i `.wc-block-cart-*` koszyka blokowego. Dzięki temu wygląd jest ten sam
   niezależnie od tego, którą stronę koszyka masz ustawioną — a przy zmianie
   nie trzeba pamiętać o drugim komplecie reguł.
   -------------------------------------------------------------- */
/* Classic cart and checkout. */
.woocommerce table.shop_table {
	border: 1px solid var(--wtc-line);
	border-collapse: collapse;
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-bottom: 1px solid var(--wtc-line);
	padding: 16px;
}

/* **Usuwanie pozycji z koszyka.**

   Kadence rysuje `a.remove` jako małe kółko z ikoną — element stoi tuż obok
   stepera ilości (52 px, prostokątny, obrysowany), więc czytał się nie jako
   druga akcja tego samego wiersza, tylko jako coś doklejonego. Sama ikona była
   przy tym mniejsza od cyfry obok.

   Kontrolka ma teraz **wymiary i obrys stepera**: ten sam wzrost, ten sam
   kwadrat, ta sama szarość ramki. Kolor ikony idzie na czerwień dopiero po
   najechaniu — usunięcie pozycji ma być rozpoznawalne, ale nie ma krzyczeć z
   koszyka o dwóch produktach.

   Rozmiar ikony ustawiony **dwiema drogami** (`svg` i `font-size`), bo Kadence
   w zależności od wersji wstawia tam raz inline SVG, raz znak „×" jako tekst.
   Reguła, która trafia tylko w jedną z nich, wygląda w kodzie na kompletną. */
.woocommerce a.remove,
.woocommerce-page a.remove,
.woocommerce td.product-remove a.remove {
	align-items: center;
	background: transparent;
	border: 1px solid var(--wtc-line);
	border-radius: 0;
	color: var(--wtc-soft);
	display: inline-flex;
	font-size: 22px;
	height: 52px;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	width: 52px;
}

.woocommerce a.remove svg,
.woocommerce-page a.remove svg {
	height: 20px;
	width: 20px;
}

.woocommerce a.remove:hover,
.woocommerce a.remove:focus-visible,
.woocommerce-page a.remove:hover,
.woocommerce-page a.remove:focus-visible {
	background: transparent;
	border-color: var(--wtc-co-error, var(--wtc-red-dark));
	color: var(--wtc-co-error, var(--wtc-red-dark));
}

/* Steper i kosz jako jeden rząd — bez tego kosz spada pod ilość na wąskich
   ekranach, choć obie kontrolki mieszczą się obok siebie. */
.woocommerce td.product-quantity {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.woocommerce-cart-form,
.cart-collaterals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {
	min-width: 0;
}

.cart-collaterals .cart_totals {
	background: var(--wtc-white, #ffffff);
	padding: 28px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	border: 1px solid var(--wtc-line);
	border-radius: 0;
	min-height: 50px;
	padding: 10px 12px;
	width: 100%;
}

.wtc-company-field--hidden {
	display: none !important;
}

#billing_customer_type_field .description {
	color: var(--wtc-soft);
	display: block;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 8px;
}

.wtc-order-company-data {
	border-top: 1px solid var(--wtc-line);
	margin-top: 24px;
	padding-top: 20px;
}

.wtc-order-company-data h2 {
	font-size: 24px;
	margin: 0 0 10px;
}

#order_review_heading,
.woocommerce-checkout-review-order {
	background: var(--wtc-white, #ffffff);
}

.woocommerce-checkout-review-order {
	padding: clamp(18px, 3vw, 30px);
}

#payment {
	background: var(--wtc-sand);
	border-radius: 0;
}

/* Cart and Checkout Blocks. */
.wc-block-cart,
.wc-block-checkout {
	--wp--preset--color--contrast: var(--wtc-ink-strong);
	max-width: 1280px;
}

.wc-block-components-sidebar-layout {
	gap: clamp(22px, 4vw, 50px);
}

.wc-block-components-sidebar,
.wc-block-components-main {
	min-width: 0;
}

.wc-block-components-sidebar {
	background: var(--wtc-white, #ffffff);
	padding: 24px;
}

.wc-block-components-product-name,
.wc-block-components-totals-item__description,
.wc-block-components-address-card__address-section {
	overflow-wrap: anywhere;
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount,
.wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wc-block-components-quantity-selector {
	border-radius: 0;
	min-height: 42px;
}

.wc-block-components-button:not(.is-link) {
	background: var(--wtc-red);
	border-radius: 0;
	color: var(--wtc-ink-strong);
	font-weight: 850;
	min-height: 54px;
}

/* Account. */
.woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--wtc-line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation a {
	border-bottom: 1px solid var(--wtc-line);
	color: var(--wtc-ink-strong);
	display: block;
	font-weight: 700;
	padding: 12px 16px;
	text-decoration: none;
}

.wtc-order-identifiers {
	font-size: 12px;
	margin: 8px 0 0;
}

.wtc-order-identifiers > div {
	display: flex;
	gap: 6px;
}

.wtc-order-identifiers dd {
	margin: 0;
}

@media (max-width: 1024px) {
	.woocommerce ul.products,
	ul.products.wtc-product-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.single-product div.product div.images,
	.single-product div.product div.summary {
		width: 48%;
	}
}

@media (max-width: 800px) {
	.woocommerce ul.products,
	ul.products.wtc-product-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product div.product div.images,
	.single-product div.product div.summary {
		float: none;
		width: 100%;
	}

	.wtc-guidance-grid {
		grid-template-columns: 1fr;
	}

	.wc-block-components-sidebar-layout {
		display: block;
	}

	.wc-block-components-sidebar {
		margin-top: 24px;
		width: 100%;
	}
}

@media (max-width: 600px) {
	.woocommerce ul.products,
	ul.products.wtc-product-grid {
		grid-template-columns: 1fr;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 27px;
	}

	.single-product form.cart {
		align-items: stretch;
		flex-wrap: wrap;
	}

	.single-product form.cart .single_add_to_cart_button {
		flex: 1;
		min-width: 190px;
	}

	.woocommerce table.shop_table_responsive tr,
	.woocommerce-page table.shop_table_responsive tr {
		display: block;
		padding: 10px;
	}

	.woocommerce table.shop_table_responsive tr td,
	.woocommerce-page table.shop_table_responsive tr td {
		align-items: center;
		display: flex;
		gap: 14px;
		justify-content: space-between;
		min-width: 0;
		text-align: right !important;
	}

	.woocommerce table.shop_table_responsive tr td::before,
	.woocommerce-page table.shop_table_responsive tr td::before {
		flex: 0 0 auto;
		text-align: left;
	}

	.woocommerce table.cart td.product-name {
		overflow-wrap: anywhere;
	}

	.cart-collaterals .cart_totals,
	.woocommerce-checkout-review-order,
	.wc-block-components-sidebar {
		padding: 18px;
		width: 100%;
	}

	.wc-block-cart-items__row {
		column-gap: 10px;
		grid-template-columns: 70px minmax(0, 1fr) !important;
	}

	.wc-block-cart-item__image {
		width: 70px !important;
	}

	.wc-block-cart-item__total {
		grid-column: 2;
	}

	.wc-block-components-order-summary-item {
		grid-template-columns: 54px minmax(0, 1fr);
	}

	.wc-block-components-totals-item {
		gap: 14px;
	}

	.wtc-spec-table th,
	.wtc-spec-table td {
		padding: 13px 10px;
	}
}

/* --------------------------------------------------------------
   FORMULARZ LOGOWANIA W CHECKOUCIE  (0.42.5)
   Etykieta skrócona filtrem w PHP, więc mieści się w jednej linii i pola
   nie rozjeżdżają się w pionie. Reguły poniżej domykają układ na wypadek
   innego tłumaczenia albo dłuższego napisu — objaw ma nie wracać, nawet gdy
   przyczyna się zmieni.
   -------------------------------------------------------------- */
.woocommerce form.login .form-row { display: flex; flex-direction: column; }
.woocommerce form.login .form-row label { min-height: 1.5em; }

@media (max-width: 782px) {
	.woocommerce form.login .form-row,
	.woocommerce form.login .form-row-first,
	.woocommerce form.login .form-row-last {
		float: none; width: 100%; margin: 0 0 12px;
	}
}

/* Odnośnik logowania pod nagłówkiem sekcji — akcja obok tytułu, nie w nim. */
.wtc-panel__actions { margin: -.4rem 0 1rem; }
.wtc-panel__actions .wtc-panel__login { font-weight: 600; color: var(--wtc-co-accent, var(--wtc-red)); }

/* Dopisek pod kwotą, gdy dostawa jeszcze nie jest policzona. */
.wtc-total-note { display: block; margin-top: .25rem; font-size: .8rem; font-weight: 400; color: var(--wtc-soft); }

/* Formularz logowania stoi nad krokami (hak WooCommerce), więc odnośnik z kroku 1
   do niego przewija. Zwężony do szerokości kolumny formularza, żeby nie
   rozciągał się na całą stronę nad paskiem kroków. */
.woocommerce-form-login { max-width: 46rem; margin: 0 0 1.5rem; }

/* --------------------------------------------------------------
   PANEL PO DODANIU DO KOSZYKA  (0.43.0)

   Wysuwany z prawej na szerokim ekranie, z dołu na telefonie. Na telefonie
   panel przy górnej krawędzi wymagałby sięgnięcia kciukiem przez cały ekran —
   przyciski mają być tam, gdzie trzyma się telefon.
   -------------------------------------------------------------- */
.wtc-atc[hidden] { display: none; }
.wtc-atc { position: fixed; inset: 0; z-index: 9999; }
.wtc-atc__backdrop { position: absolute; inset: 0; background: rgba(37, 42, 43, .45); }

.wtc-atc__panel {
	position: absolute; top: 0; right: 0; height: 100%;
	width: min(24rem, 100%);
	display: flex; flex-direction: column; gap: .9rem;
	padding: 1.6rem 1.4rem;
	background: var(--wtc-white, #fff);
	box-shadow: var(--wtc-shadow-hover);
	overflow-y: auto;
}

/* **Krzyżyk chowany pod paskiem administracyjnym.**
 *
 * Pasek WordPressa ma `position: fixed` i `z-index: 99999`, czyli wyżej niż
 * panel. Przycisk zamknięcia stał w pierwszych 32 pikselach panelu, więc
 * fizycznie leżał POD paskiem: było go widać obok paska, ale kliknięcie
 * przechwytywał pasek. Dla zalogowanego administratora panelu nie dało się
 * zamknąć krzyżykiem — dla gościa działał, bo paska nie ma.
 *
 * Panel schodzi więc poniżej paska zamiast podnosić swój `z-index` nad niego:
 * zasłonięcie paska administracyjnego oknem sklepu byłoby gorsze niż problem,
 * który rozwiązuje. */
.wtc-atc { z-index: 99998; }

body.admin-bar .wtc-atc__panel { top: 32px; height: calc(100% - 32px); }
@media (max-width: 782px) {
	body.admin-bar .wtc-atc__panel { top: 46px; height: auto; }
}

.wtc-atc__x {
	position: absolute; top: .5rem; right: .6rem;
	/* Własne tło i obramowanie: bez tego reguły motywu dla `button` robiły
	   z krzyżyka czerwony prostokąt wielkości przycisku akcji. */
	width: 2.4rem; height: 2.4rem;
	display: grid; place-items: center;
	padding: 0; border: 0; border-radius: 999px;
	background: var(--wtc-sand);
	color: var(--wtc-ink);
	font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.wtc-atc__x:hover { background: var(--wtc-line); color: var(--wtc-ink-strong); }
.wtc-atc__x:focus-visible { outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 2px; }

/* Nagłówek panelu odsunięty od krzyżyka, żeby się nie stykały. */
.wtc-atc__lead { padding-right: 2.8rem; }

.wtc-atc__lead { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--wtc-ok); }

.wtc-atc__item { display: flex; gap: .8rem; align-items: flex-start; }
.wtc-atc__thumb img {
	width: 4rem; height: auto; display: block;
	border: 1px solid var(--wtc-line); border-radius: var(--wtc-radius-sm, 10px);
}
.wtc-atc__name { font-weight: 600; line-height: 1.3; overflow-wrap: break-word; }

.wtc-atc__summary {
	margin: 0; padding: .7rem 0; border-top: 1px solid var(--wtc-line);
	border-bottom: 1px solid var(--wtc-line); color: var(--wtc-ink);
}

.wtc-atc__actions { display: grid; gap: .6rem; margin-top: auto; }
.wtc-atc__actions .wtc-btn { text-align: center; }

/* Strona pod panelem nie przewija się razem z nim. */
body.wtc-atc-open { overflow: hidden; }

@media (max-width: 640px) {
	.wtc-atc__panel {
		top: auto; bottom: 0; right: 0; left: 0;
		width: 100%; height: auto; max-height: 85vh;
		border-radius: var(--wtc-radius, 14px) var(--wtc-radius, 14px) 0 0;
	}
}

/* --------------------------------------------------------------
   CHECKOUT NA TELEFONIE — domknięcie punktów łamania (0.43.0)

   Reguły mobilne powstawały przy każdej zmianie osobno, więc część rzeczy
   nie miała żadnej. Poniżej to, co na wąskim ekranie realnie przeszkadza:
   przyciski nawigacji, karty wyboru i przycisk pobrania danych z rejestru,
   który przy 320 px wychodził poza kontener.
   -------------------------------------------------------------- */
@media (max-width: 640px) {
	/* Nawigacja kroków: „Dalej" pod „Wstecz", pełna szerokość — przyciski obok
	   siebie schodziły do 40 % szerokości i trafienie w nie było loterią. */
	.wtc-nav { flex-direction: column-reverse; gap: .6rem; }
	.wtc-nav .button { width: 100%; }

	/* Karty wyboru jedna pod drugą; obok siebie łamią tytuł na trzy wiersze. */
	.wtc-choice { grid-template-columns: minmax(0, 1fr) !important; }

	/* Pole NIP i przycisk pobrania: przycisk pod polem, na pełną szerokość. */
	.wtc-nip-row { display: block; }
	.wtc-nip-row .wtc-nip-fetch { width: 100%; margin-top: .5rem; }

	/* Panele mają węższy margines wewnętrzny — 1,5 rem z każdej strony zabierało
	   przy 360 px jedną trzecią szerokości pola. */
	.wtc-panel { padding: 1.1rem 1rem; }
}

/* --------------------------------------------------------------
   TYPOGRAFIA CHECKOUTU — zgodność z marką  (0.43.1)

   Portowany blok kroków **nie deklarował żadnego kroju** i dziedziczył go po
   motywie nadrzędnym, podczas gdy reszta sklepu konsekwentnie używa
   `--wtc-font-display` (Barlow Condensed) na nagłówkach, nazwach i kwotach.
   Efekt: checkout czytał się jak wklejony z innego serwisu — najgorsze możliwe
   miejsce na taki rozjazd, bo to ostatni ekran przed zapłatą.

   **Nagłówki paneli bez wersalików**, choć reszta sklepu ich używa. Wersaliki
   działają na krótkich wezwaniach („PRZEGLĄDAJ KATALOG") i etykietach; w
   formularzu, gdzie sekcje czyta się po kolei i szybko, obniżają czytelność —
   litery tracą charakterystyczny kształt, po którym rozpoznaje się słowo. Krój
   marki zostaje, wersaliki wracają tam, gdzie już są: na przyciskach.
   -------------------------------------------------------------- */
.wtc-panel h2,
.wtc-panel__subtitle,
.wtc-cart-summary h2,
.wtc-review-card h3,
.wtc-steps .wtc-step__label {
	/* 0.62.5: Inter, jak nagłówki karty produktu i katalogu. Barlow Condensed
	   (0.43.1) był tu jedynym miejscem z tym krojem na nagłówkach — checkout
	   czytał się jak z innego serwisu, czyli dokładnie to, przed czym 0.43.1
	   miało chronić. Krój marki zostaje na przyciskach i kwotach. */
	font-family: var(--wtc-font-body);
	/* **Waga 600, nie 700.** Barlow Condensed jest krojem wąskim: przy 700
	   litery sklejają się w ciemny pas i nagłówek zaczyna krzyczeć, choć ma
	   tylko nazywać sekcję. W nagłówkach sekcji sklepu 700 działa, bo stoją
	   pojedynczo na jasnym tle — w formularzu jest ich sześć jeden pod drugim
	   i sumują się w hałas. */
	font-weight: 600;
	letter-spacing: .005em;
	text-transform: none;
	color: var(--wtc-ink-strong);
}

/* Rozmiar też o stopień w dół: nagłówek ma wprowadzać do pól, a nie
   konkurować z nimi o uwagę. */
.wtc-panel h2, .wtc-cart-summary h2 { font-size: 1.25rem; line-height: 1.25; }
.wtc-panel__subtitle, .wtc-review-card h3 { font-size: 1.05rem; font-weight: 600; }

/* Kwoty tym samym krojem co cena na karcie produktu — „276,02 zł" w koszyku
   i „68,15 zł" na produkcie to ta sama informacja i ma wyglądać tak samo. */
.wtc-cart-totals dd,
.wtc-cart-totals__grand dd,
.wtc-cart-line__price,
.wtc-review-totals dd,
.wtc-review-table__price,
.wtc-checkout-layout .amount,
.wtc-checkout-layout bdi {
	font-family: var(--wtc-font-body);
	font-weight: 700;
}
.wtc-cart-totals__grand dd { font-size: 1.35rem; }

/* Dopisek pod kwotą zostaje w kroju tekstowym — to zdanie, nie liczba. */
.wtc-total-note { font-family: var(--wtc-font-body); font-weight: 400; }

/* Przyciski kroków: wersaliki i krój marki, jak `.wtc-btn` w reszcie sklepu. */
.wtc-nav .button,
.wtc-checkout-layout #place_order {
	font-family: var(--wtc-font-display);
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 600;
}

/* Numery kroków — cyfry z kroju nagłówkowego są węższe i lepiej siedzą
   w krążku niż domyślne. */
.wtc-step__dot { font-family: var(--wtc-font-display); }

/* Sufiks „(zawiera … VAT)" przy kwocie końcowej łamał się w połowie — „(zawiera
   89,85 zł" w jednej linii, „VAT)" w drugiej. Trzyma się teraz w całości
   i schodzi pod kwotę jako osobny wiersz, bo to komentarz do liczby, nie liczba. */
.wtc-cart-totals__grand dd { display: block; }
.wtc-cart-totals__grand dd small,
.wtc-cart-totals__grand .includes_tax {
	display: block;
	margin-top: .15rem;
	font-family: var(--wtc-font-body);
	font-size: .8rem;
	font-weight: 400;
	color: var(--wtc-soft);
	white-space: normal;
}

/* Kwota przy pozycji koszyka: „272,62 zł (z VAT)" ma nie rozcinać dopisku. */
.wtc-cart-line__price .includes_tax,
.wtc-cart-line__price small { white-space: nowrap; }

/* --------------------------------------------------------------
   OBWÓDKA KAFLA PO NAJECHANIU  (0.43.8)

   Była czarna (`--wtc-ink-strong`), przez co najechanie wyglądało jak
   zaznaczenie, a nie jak wskazanie. Czerwień marki mówi „to jest aktywne"
   tym samym językiem co przyciski i ceny.

   **Lekka, nie pełna.** Czerwień w pełnej mocy na obwódce kafla konkuruje
   z przyciskiem „Dodaj do koszyka" wewnątrz tego samego kafla — a to przycisk
   ma być celem, nie ramka wokół niego. Stąd rozjaśniona odmiana i cienka
   linia, plus dopasowanie górnego paska, który już wcześniej robił się
   czerwony.

   Reguła stoi na końcu pliku, bo wcześniejsze `.wtc-card:hover` ustawia
   `border-color` na czerń — przy równej specyficzności wygrywa ta późniejsza.
   -------------------------------------------------------------- */
.wtc-card:hover,
.wtc-card:focus-within {
	border-color: var(--wtc-red-soft-line, #f2b8b4);
}

/* Zmienna pomocnicza: czerwień marki rozjaśniona do roli obwódki. Trzymana
   jako token, żeby zmiana koloru marki przeszła też tutaj. */
:root { --wtc-red-soft-line: #f0a9a4; }

.wtc-card:hover { border-top-color: var(--wtc-red) !important; }


/* --------------------------------------------------------------
   CZYTELNOŚĆ NA TELEFONIE  (0.44.0)

   Zmiany dobrane pod wzrok po czterdziestce, ale bez przebudowy wyglądu:
   nic nie zmienia układu ani kolorystyki, rosną tylko te wielkości, które
   realnie decydują o rozpoznaniu tekstu.

   Progi, nie wyczucie:
   • 16 px dla pól formularza — poniżej tej wartości Safari na iPhonie
     samo powiększa stronę przy kliknięciu w pole i klient traci kontekst;
   • 15 px dla treści i 13 px dla podpisów — poniżej tego drobny tekst
     przestaje być czytelny bez okularów do czytania;
   • 44 px dla celów dotykowych — poniżej rośnie liczba chybionych kliknięć,
     szczególnie przy dłuższych paznokciach, w rękawicach i w ruchu.
   -------------------------------------------------------------- */
@media (max-width: 782px) {
	/* 0.44.3: próg podniesiony z 640 na 782 px. Przy 640 telefon trzymany
	   poziomo i mniejszy tablet zostawały przy rozmiarach z komputera, choć
	   odległość od oczu jest tam taka sama jak przy telefonie pionowo. */

	/* Pola formularza: 16 px zapobiega automatycznemu powiększeniu strony. */
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.wtc-checkout-form input,
	.wtc-checkout-form textarea,
	.wtc-checkout-form select,
	.wtc-search input {
		font-size: 16px;
	}

	/* Treść: nieco większa i luźniejsza. Interlinia robi dla czytelności
	   więcej niż sam rozmiar — oko łatwiej trafia w początek następnego
	   wiersza, gdy wiersze nie stoją na sobie. */
	/* 0.44.3: 16,5 px zamiast 15,5. Punktem odniesienia jest 16 px — domyślny
	   rozmiar przeglądarki, dobrany tak, by tekst był czytelny na wyciągnięcie
	   ręki. Schodzenie poniżej niego na ekranie trzymanym BLIŻEJ oczu niż monitor
	   jest odwróceniem tej logiki. Pół piksela powyżej daje zapas dla wzroku,
	   który już nie ostrzy tak jak dawniej, a nie zmienia proporcji układu. */
	body { font-size: 16.5px; line-height: 1.62; }
	p, li { line-height: 1.62; }

	/* Podpisy, symbole i ceny netto: nigdy poniżej 13 px. */
	.wtc-card__sku,
	.wtc-card__net,
	.wtc-card__label,
	.wtc-field-hint,
	.wtc-cart-line__meta,
	.wtc-total-note,
	.wtc-account-hint { font-size: 13.5px; line-height: 1.55; }

	/* Nazwa produktu na kaflu — to po niej klient rozpoznaje, co ogląda. */
	.wtc-card__title { font-size: 16.5px; line-height: 1.35; }

	/* Cena: największa liczba na kaflu, bo o nią pyta wzrok w pierwszej
	   kolejności. */
	.wtc-card__price { font-size: 22px; }

	/* Cele dotykowe. `min-height` zamiast `padding`, żeby nie rozepchnąć
	   układu tam, gdzie element już jest dostatecznie duży. */
	.wtc-header__action,
	.wtc-nav-toggle,
	.wtc-mobile__list a,
	.wtc-card__atc .button,
	.wtc-btn,
	.wtc-nav .button { min-height: 44px; }

	.wtc-mobile__list a { padding-top: 14px; padding-bottom: 14px; }

	/* Wersaliki czyta się wolniej, bo litery tracą charakterystyczny kształt.
	   Na kaflu zostają (są krótkie), ale odstęp między literami pomaga je
	   rozdzielić. */
	.wtc-card__label { letter-spacing: .06em; }
}

/* --------------------------------------------------------------
   KOSZYK BLOKOWY NA TELEFONIE  (0.44.2)

   Na wąskim ekranie kwota pozycji nachodziła na nazwę produktu — „Kółko tnące
   łożyskowane 22x5x**340,77 zł**". WooCommerce układa wiersz koszyka w siatkę
   trzykolumnową (miniatura · opis · kwota) i przy 360 px trzecia kolumna nie ma
   gdzie się zmieścić, więc wchodzi na drugą.

   Kwota schodzi więc pod opis, w osobny wiersz siatki. To ten sam wybór, co
   w podsumowaniu zamówienia w 0.42.3: przy wąskiej kolumnie **cena nie stoi
   obok nazwy, tylko pod nią** — inaczej jedno z dwojga jest nieczytelne.
   -------------------------------------------------------------- */
@media (max-width: 640px) {
	.wc-block-cart-items__row {
		grid-template-columns: 64px minmax(0, 1fr) !important;
		grid-template-areas:
			"image product"
			"image total" !important;
		column-gap: 12px !important;
		row-gap: 4px !important;
		align-items: start !important;
	}

	.wc-block-cart-item__image { grid-area: image !important; width: 64px !important; }
	.wc-block-cart-item__product { grid-area: product !important; }

	.wc-block-cart-item__total {
		grid-area: total !important;
		text-align: left !important;
		margin: 0 !important;
	}

	/* Nazwa produktu i jej opis: łamanie bez rozcinania wyrazów. */
	.wc-block-cart-item__product { overflow-wrap: break-word; word-break: normal; }
}

/* --------------------------------------------------------------
   PASEK MENU NA TELEFONIE  (0.44.2)

   Pozycje wychodziły poza ekran i ostatnia była ucięta w połowie słowa
   („Tarcze i wierceni…"), bez żadnego znaku, że da się przewinąć. Ucięty tekst
   bez możliwości dotarcia do reszty czyta się jako usterka, nie jako skrót.
   -------------------------------------------------------------- */
@media (max-width: 900px) {
	.wtc-mm-bar, .wtc-nav__list {
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.wtc-mm-bar::-webkit-scrollbar, .wtc-nav__list::-webkit-scrollbar { display: none; }
}

/* --------------------------------------------------------------
   PRZYCISK KUPONU  (0.44.2)

   Nieaktywny „Zastosuj" miał napis niemal niewidoczny na jasnoczerwonym tle.
   Stan nieaktywny ma mówić „jeszcze nie teraz", a nie „to jest zepsute" —
   więc szarość zamiast wyblakłej czerwieni i czytelny napis.
   -------------------------------------------------------------- */
.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-button:disabled {
	background: var(--wtc-line) !important;
	color: var(--wtc-soft) !important;
	opacity: 1 !important;
}

/* Etykiety i podpisy pól w checkoucie — te same progi co dla treści.
   Formularz czyta się wolniej niż stronę, więc drobny tekst boli tu bardziej. */
@media (max-width: 782px) {
	.wtc-checkout-form .form-row label { font-size: 15.5px; }
	.wtc-choice__title { font-size: 16px; }
	.wtc-choice__hint { font-size: 13.5px; line-height: 1.5; }
	.wtc-cart-totals dt, .wtc-cart-totals dd { font-size: 15.5px; }
	.wtc-cart-line__name { font-size: 15.5px; }
}

/* --------------------------------------------------------------
   WĘŻSZE MARGINESY NA TELEFONIE  (0.44.4)

   Kontener trzyma 20 px z każdej strony, czyli **40 px z 360** — ponad jedną
   dziesiątą szerokości ekranu na sam odstęp. Na komputerze to nic; na telefonie
   to właśnie ta różnica, przez którą nazwa produktu łamie się o wyraz wcześniej.

   **12 px, nie zero.** Tekst dotykający krawędzi ekranu czyta się gorzej, nie
   lepiej: oko potrzebuje marginesu, żeby złapać początek wiersza, a kciuk
   trzymający telefon zasłania sam brzeg. Zero wygląda też jak brak stylu,
   a nie jak decyzja.

   Kartom koszyka i podsumowania zdejmujemy natomiast WŁASNE obramowanie
   i zaokrąglenie na telefonie — to one zabierały drugie tyle w środku.
   -------------------------------------------------------------- */
@media (max-width: 782px) {
	.wtc-container { padding: 0 12px; }

	/* Panele checkoutu i koszyka: mniej wyściółki wewnętrznej, bo przy wąskim
	   ekranie liczy się miejsce na treść, a nie na ramkę wokół niej. */
	.wtc-panel,
	.wtc-cart-summary,
	.wtc-checkout-layout .cart_totals,
	.wtc-review-card { padding-left: 14px; padding-right: 14px; }

	/* Tabela koszyka klasycznego: komórki ciaśniej. 16 px z każdej strony
	   w komórce to przy 360 px prawie jedna dziesiąta wiersza. */
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding-left: 10px; padding-right: 10px; }

	/* Koszyk blokowy — to samo po stronie WooCommerce. */
	.wc-block-cart, .wp-block-woocommerce-cart { padding-left: 0; padding-right: 0; }
	.wc-block-cart-items { margin-left: 0; margin-right: 0; }
}

/* Dopisek przy odnośniku logowania (0.44.5). Na szerokim ekranie w jednej
   linii z odnośnikiem, na telefonie pod nim — obok zjadałby całą szerokość
   i łamał się w przypadkowym miejscu. */
.wtc-panel__actions-alt {
	color: var(--wtc-soft);
	font-weight: 400;
	font-size: .95rem;
}
@media (max-width: 782px) {
	.wtc-panel__actions { display: flex; flex-direction: column; gap: .2rem; align-items: flex-start; }
	.wtc-panel__actions-alt { font-size: 14px; line-height: 1.5; }
}

/* --------------------------------------------------------------
   KOSZYK: PODSUMOWANIE PO PRAWEJ  (0.44.6)

   Koszyk blokowy przełącza się na dwie kolumny sam, ale dopiero gdy WooCommerce
   dopisze kontenerowi klasę `is-large` — robi to skrypt, mierząc szerokość
   bloku. Na tym sklepie klasa nie przychodzi, więc podsumowanie zostawało pod
   listą: trzeba było przewinąć całą zawartość koszyka, żeby zobaczyć kwotę
   i przycisk zapłaty.

   Zamiast czekać, aż skrypt zadziała, układ jest ustawiony **regułą** —
   przewidywalnie i bez zależności od tego, czy coś się dopisze do znacznika.

   Podsumowanie jest **przyklejone** przy przewijaniu: przy dziesięciu pozycjach
   kwota i przycisk znikają z ekranu w połowie listy, a to jedyne dwie rzeczy,
   których klient szuka na tej stronie.
   -------------------------------------------------------------- */
@media (min-width: 961px) {
	.wc-block-components-sidebar-layout {
		display: flex;
		align-items: flex-start;
		gap: clamp(22px, 3vw, 44px);
	}

	.wc-block-components-main { flex: 1 1 auto; min-width: 0; }

	.wc-block-components-sidebar {
		flex: 0 0 clamp(20rem, 28vw, 26rem);
		max-width: 26rem;
		position: sticky;
		top: 24px;
		border: 1px solid var(--wtc-line);
		border-radius: var(--wtc-radius, 14px);
	}

	/* Pasek administracyjny WordPressa też jest przyklejony — bez tego zapasu
	   nagłówek podsumowania chowałby się pod nim przy przewijaniu. */
	body.admin-bar .wc-block-components-sidebar { top: 56px; }
}

/* --------------------------------------------------------------
   KOSZYK: PODSUMOWANIE PO PRAWEJ — poprawka klasy  (0.44.7)

   Reguła z 0.44.6 celowała w `.wc-block-components-sidebar-layout`. To jest
   układ **checkoutu** blokowego. Koszyk ma własną strukturę i własne nazwy:
   pojemnikiem jest `.wp-block-woocommerce-filled-cart-block`, a kolumnami
   `…-cart-items-block` i `…-cart-totals-block`. Reguła trafiała więc w element,
   którego na tej stronie nie ma — stąd brak jakiejkolwiek zmiany.

   Poprzednie reguły zostają: dotyczą checkoutu blokowego i tam działają.
   -------------------------------------------------------------- */
@media (min-width: 961px) {
	.wp-block-woocommerce-filled-cart-block {
		display: flex;
		align-items: flex-start;
		gap: clamp(22px, 3vw, 44px);
	}

	.wp-block-woocommerce-cart-items-block {
		flex: 1 1 auto;
		min-width: 0;
	}

	.wp-block-woocommerce-cart-totals-block {
		flex: 0 0 clamp(20rem, 28vw, 26rem);
		max-width: 26rem;
		position: sticky;
		top: 24px;
		padding: 20px;
		border: 1px solid var(--wtc-line);
		border-radius: var(--wtc-radius, 14px);
		background: var(--wtc-white, #fff);
	}

	body.admin-bar .wp-block-woocommerce-cart-totals-block { top: 56px; }
}

/* --------------------------------------------------------------
   KOSZYK: DLACZEGO KOLUMNY SIĘ NIE USTAWIAŁY  (0.44.8)

   Panel narzędzi pokazał, że pojemnik **jest** ustawiony na `flex`, a moje
   reguły na kolumny działają. A mimo to podsumowanie stało pod listą.

   Przyczyną jest połączenie dwóch rzeczy, z których każda osobno jest
   nieszkodliwa. WooCommerce daje pojemnikowi `flex-wrap: wrap`, a ja ustawiłem
   liście `flex: 1 1 auto` — czyli „szerokość początkowa = szerokość treści".
   Treść listy (długie nazwy narzędzi) jest szersza niż połowa ekranu, więc dla
   obu kolumn brakowało miejsca w jednym wierszu i podsumowanie **zawijało się
   do następnego**. Wyglądało to identycznie jak brak układu dwukolumnowego,
   choć układ był — tylko rozwijał się w pionie.

   Naprawa to dwie deklaracje: zakaz zawijania oraz `flex-basis: 0`, czyli
   „nie zaczynaj od szerokości treści, tylko podziel miejsce, które zostało".
   -------------------------------------------------------------- */
@media (min-width: 961px) {
	.wc-block-components-sidebar-layout.wp-block-woocommerce-filled-cart-block {
		flex-wrap: nowrap !important;
	}

	.wp-block-woocommerce-cart-items-block,
	.wc-block-cart__main {
		flex: 1 1 0% !important;
		min-width: 0 !important;
		max-width: none !important;
	}

	.wp-block-woocommerce-cart-totals-block,
	.wc-block-cart__sidebar {
		flex: 0 0 clamp(20rem, 28vw, 26rem) !important;
		margin-top: 0 !important;
	}
}

/* --------------------------------------------------------------
   POZYCJA MENU: CZERWONY PROSTOKĄT BEZ NAPISU  (0.44.9)

   `.wtc-mm__top` deklaruje `background: none` **tylko w stanie spoczynku**.
   Motyw nadrzędny stylizuje `button:hover` / `button:focus` — a selektor
   z pseudoklasą elementu (`button:hover`, 0-1-1) bije samą klasę
   (`.wtc-mm__top`, 0-1-0). Nasza reguła `:hover` ustawiała wyłącznie kolor
   napisu, więc po najechaniu wchodziło cudze tło: czerwony prostokąt, a napis
   w kolorze, który się z nim zlewał.

   Trzeci raz ten sam wzorzec dzisiaj (przyciski wyboru faktury, krzyżyk panelu
   koszyka, teraz menu). Reguła ogólna warta zapamiętania: **jeśli deklarujesz
   tło elementu interaktywnego, zadeklaruj je dla wszystkich stanów** — inaczej
   pierwszy stan, o którym zapomnisz, przejmie styl z motywu nadrzędnego.
   -------------------------------------------------------------- */
.wtc-mm__top,
.wtc-mm__top:hover,
.wtc-mm__top:focus,
.wtc-mm__top:focus-visible,
.wtc-mm__top:active,
.wtc-mm__top[aria-expanded="true"] {
	background: none;
	box-shadow: none;
	text-decoration: none;
}

.wtc-mm__top:hover,
.wtc-mm__top:focus,
.wtc-mm__top[aria-expanded="true"] {
	color: var(--wtc-red-dark);
	border-bottom-color: var(--wtc-red);
}

/* To samo dla pozycji zwykłego menu, jeśli któraś jest przyciskiem — ten sam
   mechanizm zadziała tam identycznie, a objaw pojawiłby się dopiero u klienta. */
.wtc-nav__list > li > a:hover,
.wtc-nav__list > li > a:focus { background: none; }

/* --------------------------------------------------------------
   NAGŁÓWEK NA TELEFONIE — porządek  (0.45.0, przepisany 0.67.2)

   Było **trzy rzędy**: przycisk menu z logo, pod nim luźno rozrzucone ikony
   z przełącznikiem języka, pod tym wyszukiwarka. Ikony stały po lewej, czyli
   najdalej od kciuka.

   0.45.0 przestawiło to na **dwa rzędy**: logo z lewej, akcje i przycisk menu
   z prawej, wyszukiwarka pełną szerokością pod spodem. Argumentem za menu przy
   prawej krawędzi był zasięg kciuka.

   **I to się nie utrzymało.** `.wtc-header__logo` miało `flex: 0 0 auto`, więc
   logo nie mogło się skurczyć o ani jeden piksel. Na telefonie logo plus trzy
   ikony zajmowały cały rząd, a przycisk menu — ostatni w kolejności — zawijał
   się do **własnego wiersza pod spodem**, sam, przy lewej krawędzi. Wychodziły
   z tego trzy rzędy, czyli dokładnie to, co 0.45.0 miało usunąć, plus pusty
   pas przez pół szerokości ekranu.

   Od 0.67.2 przycisk menu stoi **przed logo**. Dwa powody:

   1. **Tam go ludzie szukają.** Menu z lewej, logo obok, akcje z prawej to
      układ z każdego innego sklepu. Zasięg kciuka jest prawdziwym argumentem
      przy elementach używanych w pętli — menu klika się raz, a szuka oczami.
   2. **Zawijanie ma teraz kogo poświęcić.** Logo dostało `flex: 0 1 auto`
      i `min-width: 0`, więc przy wąskim ekranie kurczy się ono, a nie układ.
      Rząd zostaje jednym rzędem także przy dłuższym napisie w logo.

   Kolejność nadal ustawiona przez `order`, więc **znaczniki się nie zmieniają**
   — kolejność czytania dla czytnika ekranu zostaje logiczna (menu jest
   pierwsze także w kodzie strony), przesuwa się tylko obraz.

   **Przełącznik języka schodzi do menu.** Na sklepie polskim wybiera go
   ułamek odwiedzających, a zajmował miejsce w rzędzie, w którym każdy piksel
   jest potrzebny ikonom używanym codziennie. Nie znika — jest w panelu menu.
   -------------------------------------------------------------- */
@media (max-width: 900px) {
	.wtc-header__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	.wtc-nav-toggle      { order: 1; margin: 0; flex: 0 0 46px; }
	.wtc-header__logo    { order: 2; }
	.wtc-header__actions { order: 3; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
	.wtc-search          { order: 4; flex-basis: 100%; margin: 0; }

	/* **Dlaczego mała baza, a nie samo `flex-shrink`.**
	   `flex-wrap` decyduje o zawijaniu PRZED kurczeniem: przeglądarka układa
	   w rzędzie kolejne elementy, dopóki mieszczą się w swoich naturalnych
	   rozmiarach, a pierwszy, który się nie mieści, spada do następnego wiersza.
	   Dopiero potem kurczy to, co w rzędzie zostało. Przy logo o naturalnej
	   szerokości 250 px suma przekraczała szerokość ekranu, więc ikony (albo,
	   przed 0.67.2, przycisk menu) wychodziły do drugiego rzędu, mimo że logo
	   miało `flex-shrink: 1` i chętnie by ustąpiło.

	   Baza 100 px sprawia, że rząd „na papierze" mieści się zawsze
	   (46 + 100 + ikony), a `flex-grow: 1` oddaje logo całą wolną resztę —
	   więc na zwykłym telefonie wygląda dokładnie tak jak dotąd, a zwęża się
	   dopiero wtedy, gdy naprawdę nie ma miejsca. `margin-right: auto` zniknął,
	   bo robi to samo co `flex-grow`, tylko blokuje kurczenie. */
	.wtc-header__logo {
		flex: 1 1 100px;
		min-width: 0;
		display: flex;
		align-items: center;
		/* Wcześniejszy blok `@media (max-width: 900px)` w tym pliku wciąż
		   ustawia `margin-right: auto`. Nie psuje układu, ale robi to samo co
		   `flex-grow` dwoma mechanizmami naraz — zerujemy, żeby następna osoba
		   nie zgadywała, który z nich odpowiada za szerokość logo. */
		margin-right: 0;
	}
	.wtc-header__logo a,
	.wtc-header__logo .custom-logo-link {
		min-width: 0;
		max-width: 100%;
	}
	.wtc-header__logo img,
	.wtc-header__logo svg {
		max-width: 100%;
		height: auto;
		object-fit: contain;
		object-position: left center;
	}

	/* Przełącznik języka poza rzędem ikon — jego kopia jest w panelu menu. */
	.wtc-header__actions .wtc-partner__switch { display: none; }
	.wtc-mobile .wtc-partner__switch { display: flex; margin: 4px 0 12px; }

	/* Ikony ciaśniej: bez podpisów mają własne pole dotyku 46 px, więc odstęp
	   między nimi może być mały bez ryzyka chybienia. */
	.wtc-header__action { min-width: 46px; padding: 6px 4px; }
}

@media (max-width: 560px) {
	/* Logo nie może spychać ikon do drugiego rzędu — przy trzech ikonach
	   i przycisku menu zostaje na nie około 190 px. Wysokość jest tu sufitem,
	   a nie rozmiarem: `flex-shrink` wyżej zejdzie niżej, gdy trzeba. */
	.wtc-header__logo img { max-height: 34px; }
}

/* Na szerokim ekranie kopia z panelu menu nie istnieje wizualnie — panel jest
   ukryty w całości, ale reguła jest jawna, żeby nie zależeć od tego. */
@media (min-width: 901px) {
	.wtc-mobile .wtc-partner__switch { display: none; }
}

/* --------------------------------------------------------------
   PASEK MENU: NAZWA KLIKALNA, STRZAŁKA OSOBNO  (0.45.1)
   -------------------------------------------------------------- */
.wtc-mm__item.has-panel { display: flex; align-items: stretch; }

.wtc-mm__top--link { text-decoration: none; }

.wtc-mm__toggle {
	display: flex; align-items: center;
	padding: 12px 10px 12px 2px;
	background: none; border: 0; border-bottom: 2px solid transparent;
	color: var(--wtc-ink); cursor: pointer;
}
.wtc-mm__toggle:hover,
.wtc-mm__toggle:focus,
.wtc-mm__toggle[aria-expanded="true"] {
	background: none;
	color: var(--wtc-red-dark);
	border-bottom-color: var(--wtc-red);
}
.wtc-mm__toggle:focus-visible { outline: 2px solid var(--wtc-red); outline-offset: -2px; }
.wtc-mm__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.wtc-mm__toggle svg { transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .wtc-mm__toggle svg { transition: none; } }

/* Podkreślenie obejmuje nazwę i strzałkę razem — dwa osobne elementy nie mogą
   wyglądać jak dwie pozycje menu. */
.wtc-mm__item.has-panel:hover .wtc-mm__top--link,
.wtc-mm__item.has-panel:hover .wtc-mm__toggle {
	color: var(--wtc-red-dark);
	border-bottom-color: var(--wtc-red);
}

.wtc-mm__top--link { padding-right: 4px; }

@media (max-width: 900px) {
	/* Na dotyku strzałka potrzebuje własnego pola 44 px, bo stoi tuż obok
	   odnośnika i pomyłka kosztuje niechciane przejście na inną stronę. */
	.wtc-mm__toggle { min-width: 44px; justify-content: center; padding-left: 4px; }
}

/* Odnośnik do samej kategorii na szczycie listy w menu mobilnym (0.45.2). */
.wtc-mmm__all a {
	font-weight: 700;
	color: var(--wtc-red-dark);
}
.wtc-mmm__all { border-bottom: 1px solid var(--wtc-line); }

/* --------------------------------------------------------------
   POLE OBRAZKA NA KAFLU — proporcja i odstęp  (0.45.3)

   Pole miało proporcję **4:3**, a zdjęcia asortymentu są kwadratowe: tarcze,
   ściernice, otwornice. Obraz wypełniał więc tylko środek, a po bokach
   zostawało szare tło — przy 278 px szerokości pola realna wysokość zdjęcia
   wynosiła około 208 px. Proporcja 1:1 daje ten sam obraz **o jedną trzecią
   większy**, bez ruszania plików i bez regeneracji.

   Odstęp wewnętrzny zmniejszony z 12 px do 6. Przy zdjęciach na białym tle
   margines wokół nie robi nic dla czytelności, a zabiera po 12 px z każdej
   osi — czyli tyle, ile daje jeden krok w górę w rozmiarze pliku.

   **Nie zmieniamy `object-fit: contain` na `cover`.** `cover` wypełniłby pole
   idealnie, ale przez przycięcie — a przy narzędziu, którego kształt jest
   informacją (segmenty tarczy, profil ściernicy), obcięty brzeg to utrata
   treści, nie kadrowanie.
   -------------------------------------------------------------- */
.wtc-card__media {
	aspect-ratio: 1 / 1;
	padding: 6px;
}

/* Karta w widoku listy zachowuje proporcję prostokątną — tam obraz stoi obok
   opisu i kwadrat rozpychałby wiersz w pionie. */
.wtc-grid--list .wtc-card__media { aspect-ratio: 4 / 3; }

@media (max-width: 640px) {
	/* Na telefonie kafle są w jednej lub dwóch kolumnach, więc pole jest
	   znacznie szersze — odstęp może wrócić, żeby zdjęcie nie dotykało
	   krawędzi karty. */
	.wtc-card__media { padding: 10px; }
}

/* --------------------------------------------------------------
   PROFILE SPOŁECZNOŚCIOWE NA STRONIE KONTAKTU  (0.48.0)
   Ikony rysowane w kodzie, więc przyjmują kolor z tokenów i nie zależą od
   niczyjego serwera obrazków.
   -------------------------------------------------------------- */
.wtc-social { margin: 2.5rem 0; }
.wtc-social__title {
	font-family: var(--wtc-font-display); font-weight: 600; font-size: 1.15rem;
	margin: 0 0 .9rem;
}
.wtc-social__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wtc-social__link {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border: 1.5px solid var(--wtc-line); border-radius: 999px;
	color: var(--wtc-ink); text-decoration: none;
	transition: border-color .15s, color .15s, background-color .15s;
}
.wtc-social__link:hover,
.wtc-social__link:focus {
	border-color: var(--wtc-red);
	color: var(--wtc-red-dark);
	background: var(--wtc-red-soft);
}
.wtc-social__link:focus-visible { outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 2px; }

/* Ikony w stopce: ta sama lista, ciemne tło (0.49.10). */
.wtc-fsocial { margin-top: .9rem; }
.wtc-fsocial .wtc-social__link {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .18);
}
.wtc-fsocial .wtc-social__link:hover,
.wtc-fsocial .wtc-social__link:focus {
	color: #fff;
	background: var(--wtc-red);
	border-color: var(--wtc-red);
}

/* --------------------------------------------------------------
   NEWSLETTER  (0.49.0)
   -------------------------------------------------------------- */
.wtc-nl {
	display: grid; gap: 1.5rem;
	padding: 1.8rem;
	border: 1px solid var(--wtc-line);
	border-radius: var(--wtc-radius, 14px);
	background: var(--wtc-sand);
	margin: 2.5rem 0;
}
.wtc-nl__title {
	font-family: var(--wtc-font-display); font-weight: 600; font-size: 1.35rem;
	margin: 0 0 .4rem;
}
.wtc-nl__lead { margin: 0; color: var(--wtc-ink); max-width: 60ch; }

.wtc-nl__form { display: grid; gap: .7rem; }
.wtc-nl__email, .wtc-nl__name {
	width: 100%; min-height: 48px; padding: 11px 13px;
	border: 1.5px solid var(--wtc-line);
	border-radius: var(--wtc-radius-sm, 10px);
	background: var(--wtc-white, #fff);
	font: 400 15px/1.4 var(--wtc-font-body);
}
.wtc-nl__email:focus, .wtc-nl__name:focus {
	border-color: var(--wtc-red);
	outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 1px;
}
.wtc-nl__submit {
	min-height: 48px; padding: 0 1.4rem;
	border: 0; border-radius: var(--wtc-radius-sm, 10px);
	background: var(--wtc-red); color: #fff;
	font-family: var(--wtc-font-display); font-weight: 600;
	text-transform: uppercase; letter-spacing: .03em;
	cursor: pointer; justify-self: start;
}
.wtc-nl__submit:hover { background: var(--wtc-red-dark); }
.wtc-nl__submit:focus-visible { outline: 2px solid var(--wtc-focus, #1d6fb8); outline-offset: 2px; }

/* Nota o zgodzie: mniejsza, ale nie szara na szarym — to jest informacja
   wymagana, a nie druk drobnym maczkiem. */
.wtc-nl__note { margin: .2rem 0 0; font-size: .85rem; line-height: 1.5; color: var(--wtc-ink); max-width: 62ch; }
.wtc-nl__note a { color: var(--wtc-red-dark); }

/* Zabezpieczenie przed botami (0.49.2). Widget ALTCHA jest elementem własnym
   z shadow DOM — z zewnątrz sterują nim wyłącznie te zmienne, więc bez nich
   zostaje domyślny niebieski, nieżyjący z resztą formularza. */
.wtc-nl__captcha { margin: .1rem 0; }
.wtc-nl__captcha altcha-widget {
	display: block;
	--altcha-max-width: 100%;
	--altcha-border-width: 1.5px;
	--altcha-border-radius: var(--wtc-radius-sm, 10px);
	--altcha-color-base: var(--wtc-white, #fff);
	--altcha-color-border: var(--wtc-line);
	--altcha-color-border-focus: var(--wtc-red);
	--altcha-color-text: var(--wtc-ink);
	--altcha-color-error-text: var(--wtc-red-dark);
	--altcha-color-footer-bg: var(--wtc-sand);
}

.wtc-nl--empty { background: none; border-style: dashed; }

@media (min-width: 861px) {
	.wtc-nl { grid-template-columns: 1fr 1fr; align-items: start; gap: 2.5rem; }
}

/* Newsletter nad stopką — oddzielony od niej, ale wizualnie z nią związany. */
.wtc-nl-footer { margin-bottom: 0; }
.wtc-nl-footer .wtc-nl { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* Zgoda przy zamówieniu — wygląda jak zgoda, nie jak pole formularza. */
.wtc-nl-optin { margin: .8rem 0 .2rem; }
.wtc-nl-optin__note {
	margin: 0 0 1rem; font-size: .85rem; line-height: 1.5;
	color: var(--wtc-soft); max-width: 62ch;
}


/* Uwaga dla administratora przy bloku doradcy (0.49.21). */
.wtc-help__admin {
	margin: .5rem 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--wtc-soft);
}


/* --- Kategoria: nagłówek, wstęp i blok tekstu pod listą (0.49.27) --- */
.wtc-cat-title { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
.wtc-cat-intro { font-size: 17px; line-height: 1.6; color: var(--wtc-ink); max-width: 72ch; margin: 0 0 22px; }
/* Blok pod listą jest tekstem do czytania, nie ozdobą: węższa kolumna, większy
   interlinia, wyraźne oddzielenie od siatki produktów. */
.wtc-cat-copy { margin: 42px 0 0; padding: 26px 0 0; border-top: 1px solid var(--wtc-line, #e6e6e6); max-width: 78ch; }
.wtc-cat-copy p { font-size: 16px; line-height: 1.7; color: var(--wtc-soft, #555); margin: 0 0 14px; }
.wtc-cat-copy p:last-child { margin-bottom: 0; }


/* --- Doradca: pytanie zerowe (0.49.28) --- */
.wtc-advisor__paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.wtc-advisor__path { display: block; padding: 18px 20px; border: 1px solid var(--wtc-line, #e6e6e6); border-radius: 10px; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.wtc-advisor__path:hover { border-color: var(--wtc-accent, #e0261e); transform: translateY(-1px); }
.wtc-advisor__path-l { display: block; font-weight: 700; font-size: 17px; color: var(--wtc-ink); margin-bottom: 4px; }
.wtc-advisor__path-d { display: block; font-size: 14px; line-height: 1.5; color: var(--wtc-soft, #666); }

/* Kategoria bez produktów: widoczna, ale nie do kliknięcia. Informuje, nie obiecuje. */
.wtc-mm__soon { color: var(--wtc-soft, #999); cursor: default; }
.wtc-mm__note { margin-left: 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }


/* --- O nas: obecność w branży (0.49.29) --- */
.wtc-ap-scene { padding: 44px 0; }
.wtc-ap-scene h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.15; margin: 0 0 24px; }
.wtc-ap-scene ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.wtc-ap-scene li { border: 1px solid var(--wtc-line, #e6e6e6); border-radius: 10px; overflow: hidden; }
.wtc-ap-scene li > h3, .wtc-ap-scene li > p { padding-left: 22px; padding-right: 22px; }
.wtc-ap-scene li > h3:first-child { padding-top: 22px; }
.wtc-ap-scene li > p:last-child { padding-bottom: 22px; }
/* Stały format kadru: zdjęcia z targów i szkoleń mają różne proporcje, a
   kafle obok siebie muszą być równe. */
.wtc-ap-scene__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--wtc-line, #eee); }
.wtc-ap-scene__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wtc-ap-scene li > .wtc-ap-scene__img + h3 { padding-top: 18px; }
.wtc-ap-scene h3 { font-size: 17px; margin: 0 0 8px; }
.wtc-ap-scene p { font-size: 15px; line-height: 1.6; color: var(--wtc-soft, #555); margin: 0; }


/* --- Strefa: katalog do przewijania (0.49.41) --- */
.wtc-partner__catalog { margin: 36px 0 0; }
.wtc-partner__catalog h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 14px; }
/* Proporcja bliska A4 w pionie; na waskich ekranach wyzsza, bo strona
   katalogu czytana na telefonie i tak wymaga powiekszenia. */
.wtc-partner__pdf { width: 100%; height: min(80vh, 900px); border: 1px solid var(--wtc-line, #e6e6e6); border-radius: 8px; background: #fff; display: block; }
.wtc-partner__catalog p { margin: 14px 0 0; }
@media (max-width: 640px) { .wtc-partner__pdf { height: 70vh; } }

/* --------------------------------------------------------------
   KATALOG — przycisk pobrania (inc/catalog.php)
   Waga pliku jest dopiskiem, nie drugim komunikatem: ma dać się
   przeczytać przy skanowaniu strony, ale nie konkurować z akcją.
   -------------------------------------------------------------- */
.wtc-catalog__cta { margin: 1.25rem 0; }
.wtc-catalog__size { font-weight: 400; font-size: .875em; opacity: .85; }
.wtc-catalog__link { text-decoration: underline; text-underline-offset: .18em; }

/* --------------------------------------------------------------
   OMNIBUS — informacja o najniższej cenie z 30 dni (inc/omnibus.php)
   Wymóg ustawowy, nie element sprzedażowy: ma być czytelna i stać
   przy cenie, ale nie konkurować z nią wielkością ani barwą.
   Kolor z --wtc-soft, czyli tego samego tokenu po korekcie kontrastu
   z 0.44.0 — 5,6:1 na bieli, powyżej progu dla drobnego tekstu.
   -------------------------------------------------------------- */
.wtc-omnibus {
	display: block;
	margin-top: .35rem;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--wtc-soft);
}
.wtc-omnibus strong { font-weight: 600; color: inherit; }

/* Przekreślona cena katalogowa obok promocyjnej. */
.price del { color: var(--wtc-soft); font-weight: 400; }
.price del .amount { text-decoration: line-through; }
.price ins { text-decoration: none; color: var(--wtc-red-dark); font-weight: 700; }

/* Podpis nad ceną zmienia się razem z nią. --wtc-red-dark, nie --wtc-red:
   6,16:1 zamiast 4,48:1, a różnicy odcienia obok siebie nie widać. */
.wtc-price-label--promo { color: var(--wtc-red-dark); font-weight: 600; }

/* --------------------------------------------------------------
   SERWIS, DOKUMENTACJA, ZAPYTANIE (0.52.0)
   Trzy strony, ktore wczesniej byly samym akapitem. Korzystaja
   z kafli kontaktu, zeby czytaly sie jak ta sama rodzina stron.
   -------------------------------------------------------------- */

/* Uwaga widoczna wylacznie dla administratora — ma sie roznic od tresci
   strony, zeby nikt jej nie wzial za komunikat dla klienta. */
.wtc-admin-note {
	margin: 1rem 0;
	padding: 12px 14px;
	border-left: 4px solid var(--wtc-warn);
	background: #fcf3e6;
	font-size: .9375rem;
	color: var(--wtc-ink-strong);
}

/* --- Serwis --- */
.wtc-sv__prep { margin: 2.5rem 0; }
.wtc-sv__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 14px; }
.wtc-sv__list li {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	border: 1px solid var(--wtc-line);
	border-radius: 6px;
	background: var(--wtc-white);
}
.wtc-sv__list strong { font-size: 1rem; }
.wtc-sv__list span { color: var(--wtc-soft); font-size: .9375rem; line-height: 1.5; }
.wtc-sv__warranty {
	margin: 2rem 0 0;
	padding: 14px 16px;
	background: var(--wtc-sand);
	border-radius: 6px;
	font-size: .9375rem;
	line-height: 1.55;
}
.wtc-sv__note { margin-top: 1rem; font-size: .9375rem; color: var(--wtc-soft); }

/* --- Dokumentacja --- */
.wtc-docs__search { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 1.5rem 0; }
.wtc-docs__search label { flex: 1 1 100%; font-size: .9375rem; font-weight: 600; }
.wtc-docs__search input {
	flex: 1 1 260px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--wtc-line);
	border-radius: 6px;
	font-size: 1rem;
}
.wtc-docs__search input:focus { outline: 2px solid var(--wtc-red-dark); outline-offset: 1px; border-color: var(--wtc-red-dark); }
.wtc-docs__count { color: var(--wtc-soft); font-size: .9375rem; }
.wtc-docs__empty { padding: 18px; background: var(--wtc-sand); border-radius: 6px; line-height: 1.6; }
.wtc-docs__list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 12px; }
.wtc-docs__item { padding: 16px; border: 1px solid var(--wtc-line); border-radius: 6px; background: var(--wtc-white); }
.wtc-docs__head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.wtc-docs__name { font-weight: 600; text-decoration: none; }
.wtc-docs__sku { font-family: var(--wtc-font-mono); font-size: .8125rem; color: var(--wtc-soft); }
.wtc-docs__files { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.wtc-docs__files a { font-size: .9375rem; }
.wtc-docs__pack {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding: 20px;
	background: var(--wtc-sand);
	border-radius: 8px;
}
.wtc-docs__pack strong { display: block; font-size: 1.0625rem; }
.wtc-docs__pack span { display: block; margin-top: 4px; color: var(--wtc-soft); font-size: .9375rem; max-width: 60ch; }

/* --- Zapytanie --- */
.wtc-iq__subject {
	margin: 1.5rem 0;
	padding: 16px 18px;
	border-left: 4px solid var(--wtc-red-dark);
	background: var(--wtc-red-soft);
	border-radius: 0 6px 6px 0;
}
.wtc-iq__label { display: block; font-size: .8125rem; color: var(--wtc-soft); }
.wtc-iq__name { display: block; font-size: 1.125rem; line-height: 1.35; margin-top: 2px; }
.wtc-iq__sku { display: block; margin-top: 6px; font-size: .875rem; color: var(--wtc-soft); }
.wtc-iq__sku code { font-family: var(--wtc-font-mono); font-size: .9375rem; color: var(--wtc-ink-strong); }

@media (max-width: 600px) {
	.wtc-docs__search button { width: 100%; }
	.wtc-docs__pack .wtc-btn { width: 100%; text-align: center; }
}

/* --------------------------------------------------------------
   STRONY MOTYWU (0.57.0)

   Szerokością zajmuje się `page-wertec.php`, który omija kontenery Kadence
   tak samo jak `front-page.php`. Tutaj zostaje wygląd.

   Pas nagłówka jest **grafitowy, nie czerwony**. Czerwień w tym motywie znaczy
   „tu kliknij" — wezwania, aktywne filtry, dostępność. Pas tytułowy niczego
   nie wzywa, więc czerwony na pełną szerokość rozmyłby ten sygnał na każdej
   podstronie. Grafit daje kontrast i powagę, a czerwień zostaje kreską przy
   nadpisie, czyli w tej samej roli co na stronie głównej.

   Siatka techniczna 40 px to ten sam motyw, co w hero — tam ciemna na jasnym,
   tu jasna na ciemnym. Ma się czytać jak rysunek techniczny, a nie jak
   gradient dekoracyjny.
   -------------------------------------------------------------- */
.wtc-page__head {
	position: relative;
	background-color: var(--wtc-ink-strong);
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 40px 40px;
	padding: 52px 0 46px;
	overflow: hidden;
}

/* Czerwona krawędź u dołu — cienka, jako domknięcie pasa, nie jako akcent. */
.wtc-page__head::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--wtc-red);
}

.wtc-page__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	font-family: var(--wtc-font-body);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
}

.wtc-page__eyebrow::before {
	content: '';
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--wtc-red);
	flex: none;
}

.wtc-page__title {
	margin: 0;
	font-family: var(--wtc-font-display);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.05;
	letter-spacing: .01em;
	color: #fff;
}

/* Treść oddycha od pasa, ale bez dziury — pas jest mocny, więc pierwsza
   sekcja może zacząć się bliżej niż na stronie bez nagłówka. */
.wtc-page > .wtc-section:first-of-type { padding-top: 40px; }
.wtc-page .wtc-lead { margin-top: 0; }

@media (max-width: 700px) {
	.wtc-page__head { padding: 34px 0 30px; }
	.wtc-page__eyebrow { font-size: 12px; }
}

/* --------------------------------------------------------------
   KAFLE KONTAKTOWE — WIDOCZNA KRAWĘDŹ (0.58.1)

   Globalna reguła kart (`.wtc-card, .wtc-group, …, .wtc-ct__tile`) ustawia
   `border-color: transparent !important` i miękki cień. Na jasnym tle sekcji
   biała karta z przezroczystą ramką i cieniem o niskim kontraście znika —
   cztery kafle czytają się jak jeden blok tekstu z odstępami.

   Ramka zamiast mocniejszego cienia, bo reszta motywu buduje strukturę
   liniami, nie głębią: tabele parametrów, siatka kategorii i pola formularzy
   mają krawędź `--wtc-line`.
   -------------------------------------------------------------- */
.wtc-ct__grid .wtc-ct__tile {
	border: 1px solid var(--wtc-line) !important;
}

/* Pas nagłówka niesie już nadpis, więc sekcja pod nim zaczyna się od treści.
   Bez tego zostaje odstęp po zdjętym tytule. */
.wtc-page .wtc-ct,
.wtc-page .wtc-ap { padding-top: 0; }

/* --------------------------------------------------------------
   ILUSTRACJE POGLĄDOWE (0.59.0)
   Pełna szerokość kolumny, bez cienia i zaokrągleń — ilustracja
   ma być materiałem, nie kartą. Podpis pod spodem, w tym samym
   stylu co etykiety kafli.
   -------------------------------------------------------------- */
.wtc-figure { margin: 2.5rem 0; }
.wtc-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wtc-line);
}
.wtc-figure figcaption {
	margin-top: 10px;
	font-family: var(--wtc-font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wtc-soft);
}

/* Zastępczy obrazek produktu: bez przycięcia, żeby heksagon został kołem,
   a nie owalem — kafle katalogu skalują obrazki wypełnieniem. */
.wtc-card img[src$="placeholder-produkt.svg"],
.woocommerce img[src$="placeholder-produkt.svg"] {
	object-fit: contain !important;
	background: #f7f8f8;
}

/* --------------------------------------------------------------
   DOKUMENTY SKLEPU — REGULAMIN, ZWROTY, POLITYKA (0.60.0)

   Regulaminu nikt nie czyta dla przyjemności. Czyta go ktoś, kto ma problem
   albo sprawdza, na co się pisze — i szuka konkretnego paragrafu. Typografia
   ma temu służyć: paragraf widoczny z odległości, punkty policzalne, miara
   wiersza taka, żeby dało się przejść przez akapit bez gubienia linii.

   Tekst wyjustowany, ale **z dzieleniem wyrazów**. Justowanie bez dzielenia
   rozrywa polskie słowa odstępami i tworzy w kolumnie białe rzeki — przy
   długich rzeczownikach odczasownikowych, których w tekście prawnym jest
   pełno, wygląda to gorzej niż zwykłe wyrównanie do lewej. `hyphens: auto`
   działa, bo dokument jest oznaczony jako polski.
   -------------------------------------------------------------- */
.wtc-legal .entry-content {
	max-width: 78ch;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--wtc-ink);
}

.wtc-legal .entry-content p,
.wtc-legal .entry-content li {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Paragraf — kotwica dla wzroku przy przewijaniu. Czerwona krawędź zamiast
   numeru w kółku: numer jest już w treści nagłówka („§ 5. Ceny i płatności”),
   więc kółko powtarzałoby tę samą informację drugi raz. */
.wtc-legal .entry-content h2 {
	margin: 3rem 0 1.25rem;
	padding-left: 16px;
	border-left: 4px solid var(--wtc-red);
	font-family: var(--wtc-font-display);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 27px);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--wtc-ink-strong);
	text-align: left;
	scroll-margin-top: 100px;
}

.wtc-legal .entry-content h2:first-child { margin-top: 0; }

.wtc-legal .entry-content h3 {
	margin: 2rem 0 .75rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wtc-ink-strong);
	text-align: left;
}

/* Punkty numerowane — numer wisi na marginesie, więc kolumna tekstu zostaje
   równa i akapity układają się jeden pod drugim. */
.wtc-legal .entry-content ol {
	counter-reset: wtc-pkt;
	list-style: none;
	margin: 1rem 0 1.5rem;
	padding: 0;
}

.wtc-legal .entry-content ol > li {
	counter-increment: wtc-pkt;
	position: relative;
	margin: 0 0 .85rem;
	padding-left: 2.6rem;
}

.wtc-legal .entry-content ol > li::before {
	content: counter(wtc-pkt) ".";
	position: absolute;
	left: 0;
	top: 0;
	width: 2rem;
	font-family: var(--wtc-font-mono);
	font-size: .875rem;
	line-height: 1.9;
	text-align: right;
	color: var(--wtc-red-dark);
	font-weight: 700;
}

/* Wyliczenia wewnątrz punktu — myślnik, nie kolejny numer, żeby nie mylił
   się z numeracją ustępów, do której odsyła reszta dokumentu. */
.wtc-legal .entry-content ul {
	list-style: none;
	margin: .6rem 0 .6rem 0;
	padding-left: 2.6rem;
}

.wtc-legal .entry-content ul > li { position: relative; padding-left: 1rem; }

.wtc-legal .entry-content ul > li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--wtc-soft);
}

.wtc-legal .entry-content strong { color: var(--wtc-ink-strong); }
.wtc-legal .entry-content a { color: var(--wtc-red-dark); }

/* Załącznik z formularzem: kropki do wypełnienia mają zostać kropkami,
   a nie rozjechać się przez justowanie. */
.wtc-legal .entry-content hr {
	margin: 3rem 0;
	border: 0;
	border-top: 1px solid var(--wtc-line);
}

/* --- Wydruk ---------------------------------------------------
   Regulamin bywa drukowany albo zapisywany do PDF — to jest jeden
   ze sposobów wydania go na trwałym nośniku. Bez tych reguł na
   papier idzie menu, stopka i ciemny pas nagłówka zjadający tusz.
   -------------------------------------------------------------- */
@media print {
	.wtc-legal .wtc-page__head { background: none !important; padding: 0 0 1rem; }
	.wtc-legal .wtc-page__head::after { display: none; }
	.wtc-legal .wtc-page__title { color: #000 !important; font-size: 22pt; }
	.wtc-legal .wtc-page__eyebrow { color: #000 !important; }
	.wtc-legal .wtc-header,
	.wtc-legal .wtc-footer,
	.wtc-legal .wtc-topbar,
	.wtc-legal .wtc-nl { display: none !important; }
	.wtc-legal .entry-content { max-width: none; font-size: 11pt; line-height: 1.5; }
	.wtc-legal .entry-content h2 { page-break-after: avoid; border-left: 0; padding-left: 0; }
	.wtc-legal .entry-content li { page-break-inside: avoid; }
}


/* --- Zgody przy przycisku zakupu (0.67.0, specyficzność 0.67.1) ---------
   Pole wyboru i jego treść to jeden wiersz, nie dwa.

   **Trzy klasy w selektorze, nie dwie.** Pierwsze podejście
   (`.wtc-checkout-layout .wtc-consent__label`) nie działało wcale:
   WooCommerce ma `.woocommerce form .form-row label`, czyli dwie klasy
   i element — więcej niż dwie klasy motywu. Etykieta zostawała blokiem
   z pogrubieniem, pole wyboru siedziało w środku tekstu, a drugi wiersz
   wskakiwał pod nie. Selektor musi wygrać liczbą klas, bo `!important`
   w arkuszu motywu psuje każdą późniejszą poprawkę.
   ------------------------------------------------------------------------ */
.wtc-checkout-layout .wtc-consent label.wtc-consent__label,
.wtc-checkout-layout .wtc-nl-optin label.checkbox,
.wtc-checkout-layout .wtc-nl-optin p.form-row label,
.wtc-checkout-layout .woocommerce-terms-and-conditions-wrapper p.form-row label.checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-weight: 400;
	font-size: 0.95rem;
	line-height: 1.5;
	cursor: pointer;
}
.wtc-checkout-layout .wtc-consent label.wtc-consent__label input[type='checkbox'],
.wtc-checkout-layout .wtc-nl-optin label input[type='checkbox'] {
	flex: none;
	/* Wyrównanie do pierwszego wiersza tekstu, nie do jego środka: przy
	   dwuwierszowej zgodzie pole zjeżdżało wtedy na wysokość drugiego. */
	margin: 0.15rem 0 0;
}

.wtc-consents {
	margin: 0 0 1rem;
}
.wtc-checkout-layout .wtc-consents p.wtc-consent {
	margin: 0 0 0.6rem;
	padding: 0;
}
.wtc-consent__text {
	color: var(--wtc-co-ink);
}
.wtc-consent__text a {
	text-decoration: underline;
}
.wtc-consent__text .required {
	border: 0;
	color: var(--wtc-red-dark);
	text-decoration: none;
}

/* Komunikat zajmuje miejsce dopiero, gdy ma co powiedzieć — pusty
   `<span>` z marginesem rozpychałby listę zgód o dwa puste wiersze. */
.wtc-consent__error:empty { display: none; }
.wtc-consent__error {
	display: block;
	margin: 0.3rem 0 0 1.75rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wtc-red-dark);
}
.wtc-consent.is-invalid .wtc-consent__text {
	color: var(--wtc-red-dark);
}
.wtc-consent.is-invalid input[type='checkbox'] {
	outline: 2px solid var(--wtc-red-dark);
	outline-offset: 2px;
}

/* Zgody klienta na ekranie zamówienia w panelu. */
.wtc-order-consents h3 { margin: 1.2em 0 0.4em; }
.wtc-order-consents p { margin: 0; line-height: 1.6; }


/* --------------------------------------------------------------
   PRZYKLEJONY NAGŁÓWEK  (0.67.4, przepisany 0.67.5)

   Pełny nagłówek na telefonie to pasek USP (~32 px), rząd z logo (~48),
   wyszukiwarka (~71) i rząd menu (~44) — około 195 px, jedna piąta ekranu.
   Przyklejony w całości zabierałby tę jedną piątą z każdego ekranu
   przewijania; na liście produktów to jeden kafelek mniej w kadrze, cały
   czas. Przyklejone jest więc to, po co ludzie wracają na górę: logo,
   wyszukiwarka i koszyk.

   ## Dlaczego przyklejony jest `__sticky`, a nie cały `<header>`

   0.67.4 przykleiło cały nagłówek i chowało pasek USP regułą `display:
   none`. **Na desktopie dawało to migoczący pasek i stronę, z którą nie
   dało się nic zrobić.** Pętla wyglądała tak:

     1. przewinięcie za próg dopisuje klasę `wtc-stuck`;
     2. CSS chowa pasek USP i zwęża rząd — nagłówek kurczy się o ~40 px;
     3. ten nagłówek jest NAD widocznym obszarem, więc **zakotwiczenie
        przewijania** w Chrome (`scroll anchoring`) cofa pozycję o te same
        ~40 px, żeby treść nie podskoczyła;
     4. cofnięta pozycja jest znów PONIŻEJ progu, więc klasa znika,
        nagłówek rośnie, zakotwiczenie oddaje 40 px z powrotem —
        i wracamy do punktu 1, kilkadziesiąt razy na sekundę.

   Histereza tego nie leczy, bo skok jest większy od niej i zawsze
   przerzuca stan na drugą stronę progu. Leczy to dopiero **zdjęcie
   z przyklejonego elementu tych zmian wysokości, które powstają nad
   widocznym obszarem**.

   Dlatego pasek USP **wyprowadziliśmy poza `<header>`** — jest teraz jego
   rodzeństwem, stojącym nad nim. Odjeżdża zwyczajnie, razem z treścią; nie
   trzeba go chować ani mierzyć, a to on odpowiadał za większość skoku.

   **Nie dało się tego zrobić, zostawiając go w środku.** Pierwsze podejście
   opakowało resztę nagłówka w `.wtc-header__sticky` i przykleiło ten
   kontener — a element `sticky` **nigdy nie wyjeżdża poza pudełko swojego
   rodzica**. Rodzicem był `<header>` wysoki dokładnie na swoją zawartość,
   więc pasek trzymał się góry ekranu tylko przez pierwsze ~30 px
   przewijania, po czym odjeżdżał razem z nagłówkiem. W teście widać to było
   jako `top: -10px` zamiast `0`.

   Reszta zwężania (telefon: wyszukiwarka i rząd menu) nadal zmienia
   wysokość, więc `overflow-anchor: none` na stronie wyłącza samo
   zakotwiczenie. Sklep nie ma nieskończonego przewijania ani treści
   doczytywanej nad widokiem, czyli jedynych rzeczy, do których ten
   mechanizm jest potrzebny.

   **Na `position: sticky`, nie `fixed`**: sticky nie wyjmuje nagłówka
   z układu strony, więc nie trzeba podkładać pod treść sztucznego
   marginesu o wysokości paska — marginesu, który przy każdej zmianie
   zawartości nagłówka rozjeżdża się o kilka pikseli i nikt nie wie
   dlaczego.
   -------------------------------------------------------------- */
.wtc-header {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--wtc-white);
}

/* Patrz komentarz wyżej, punkt 3: to jest ta korekta pozycji przewijania,
   która zamykała pętlę. Wyłączamy ją na poziomie dokumentu, bo działa na
   poziomie kontenera przewijania — ustawiona na samym nagłówku wyklucza go
   tylko z bycia kotwicą, a nie z wywoływania korekty. */
html { overflow-anchor: none; }

/* Pasek administratora WordPressa jest `fixed` u góry — bez tego nagłówek
   wjeżdżałby pod niego i zalogowany redaktor widziałby sklep inaczej niż
   klient. 46 px to wysokość paska na telefonie, 32 px od 783 px w górę. */
body.admin-bar .wtc-header { top: 46px; }
@media (min-width: 783px) {
	body.admin-bar .wtc-header { top: 32px; }
}

/* Panel menu mieszka WEWNĄTRZ nagłówka, więc po przyklejeniu jego dolna
   część mogłaby wyjść poza ekran bez możliwości doscrollowania. */
body.wtc-nav-open .wtc-header {
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Cień dopiero po oderwaniu od góry strony: na samej górze nagłówek styka
   się z treścią i cień nie ma co oddzielać. */
body.wtc-stuck .wtc-header {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Lupa istnieje wyłącznie w stanie przyklejonym. Poza nim wyszukiwarka
   stoi otwarta i przycisk do jej otwierania byłby kłamstwem. */
.wtc-search-toggle { display: none; }

/* Kotwice w treści nie mogą chować się pod paskiem. Wysokość wstawia
   `header.js`; wartość zapasowa działa, zanim skrypt się wykona. */
html { scroll-padding-top: calc(var(--wtc-header-h, 64px) + 8px); }

/* Przyklejony pasek zakupu na karcie produktu siada na desktopie u góry —
   czyli dokładnie tam, gdzie teraz stoi nagłówek. Bez tego nachodziłyby na
   siebie: nagłówek ma wyższy `z-index`, więc pasek zakupu chowałby się pod
   nim i klient nie zobaczyłby ceny ani przycisku. */
@media (min-width: 781px) {
	.wtc-satc { top: var(--wtc-header-h, 0px); }
}

/* ---- Telefon: jeden wąski rząd ---- */
@media (max-width: 1024px) {
	body.wtc-stuck .wtc-header__row { padding: 6px 0; }
	body.wtc-stuck .wtc-header__logo img { max-height: 32px; }

	/* Wyszukiwarka schodzi z ekranu i wraca pod lupą. `display: none`, a nie
	   `visibility` czy zerowa wysokość — wiersz ma przestać zajmować miejsce,
	   a nie zajmować je niewidocznie. */
	body.wtc-stuck .wtc-search { display: none; }
	body.wtc-stuck.wtc-search-open .wtc-search { display: flex; }

	body.wtc-stuck .wtc-search-toggle { display: flex; }

	/* Przycisk menu w przyklejonym pasku niższy o tyle samo co reszta. */
	body.wtc-stuck .wtc-nav-toggle { height: 40px; flex-basis: 40px; }

	/* Rząd menu też schodzi — i to on decyduje o tym, czy pasek jest wąski.
	   Bez tej reguły przyklejony nagłówek na telefonie miał 117 px zamiast
	   ~52: sam rząd z logo owszem zwężał się, ale pod nim nadal stały
	   „Etapy pracy / Katalog / Strefa Fachowca" i zjadały drugie tyle.
	   Nawigacja nie ginie — poniżej 1024 px jest przycisk ☰, który otwiera
	   ten sam zestaw pozycji w panelu.

	   **`.wtc-header` w selektorze jest konieczne, nie ozdobne.** Klasa
	   `.wtc-nav` opisuje w tym motywie dwie różne rzeczy: pasek menu
	   w nagłówku (`inc/header.php`, `inc/mega-menu.php`) **oraz** rząd
	   „Wstecz / Dalej" pod każdym krokiem zamówienia
	   (`woocommerce/checkout/form-checkout.php`). Reguła bez zawężenia
	   chowała jedno i drugie: w 0.67.4–0.67.6 klient na telefonie przewijał
	   pierwszy krok zamówienia, nagłówek się przyklejał i **przycisk „Dalej"
	   znikał** — checkout kończył się ślepą uliczką. Kolizja nazw jest
	   starsza od tej reguły; to reguła ją ujawniła. */
	body.wtc-stuck .wtc-header .wtc-nav { display: none; }
}

/* ---- Desktop: nic się nie zwęża ----

   Kusiło, żeby i tu zmniejszyć logo i ścisnąć rząd. Ale każda taka zmiana
   to zmiana wysokości przyklejonego elementu w trakcie przewijania, czyli
   dokładnie ten rodzaj ruchu, z którego wzięło się migotanie w 0.67.4.
   Na desktopie nic tego nie kupuje: pasek USP i tak odjeżdża sam, więc
   nagłówek jest już o te ~32 px niższy, a ekran jest wysoki. Rząd menu
   zostaje, bo przycisk ☰ pojawia się dopiero poniżej 1024 px — schowanie
   menu zabrałoby tam całą nawigację.

   Znika tylko telefon z godzinami: nie zmienia wysokości rzędu (ta stoi na
   logo), a zwalnia miejsce. */
@media (min-width: 1025px) {
	body.wtc-stuck .wtc-header__phone { display: none; }
}


/* --------------------------------------------------------------
   DOLNY PASEK KONTAKTU NA TELEFONIE  (0.67.6)

   Numer telefonu jest tu argumentem sprzedażowym, nie ozdobą: przy 800+
   pozycjach problemem klienta jest wybór, nie cena, a jedno pytanie do
   doradcy zamyka sprawę szybciej niż pół godziny czytania parametrów.
   Na telefonie numeru nie było praktycznie nigdzie — w nagłówku chowa się
   poniżej 1024 px, zostawała stopka na końcu strony.

   **Numer jako tekst, nie ikona słuchawki.** Część klientów przepisuje go
   do służbowego telefonu albo dzwoni z innego aparatu, więc sama akcja
   „zadzwoń teraz" nie wystarcza. Cała lewa strona jest odnośnikiem `tel:`,
   żeby pole dotyku obejmowało etykietę i numer, a nie sam ciąg cyfr.

   Widoczność stron rozstrzyga PHP (`wtc_call_bar_visible()`) — karty
   produktu, koszyka i zamówienia pasek nie dotyczy. Tutaj zostaje sam
   próg szerokości: powyżej 1024 px numer stoi w nagłówku i drugi na dole
   byłby powtórzeniem.
   -------------------------------------------------------------- */
.wtc-callbar { display: none; }

@media (max-width: 1024px) {
	.wtc-callbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 80;
		display: flex;
		align-items: stretch;
		background: var(--wtc-ink-strong);
		/* Pasek zakupu na karcie produktu ma 85 i wyższy być musi — ale tam
		   ten pasek i tak się nie renderuje. 80 stawia go nad treścią
		   i pod przyklejonym nagłówkiem (90), co jest właściwą kolejnością:
		   nagłówek ma zostać klikalny. */
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.wtc-callbar__phone {
		/* **Nie kurczy się w ogóle** (`flex-shrink: 0`). Przy `1 1 auto` przy
		   braku miejsca kurczyły się oba pola naraz i numer kończył się
		   wielokropkiem na 320 px mimo tego, że przycisk miał jeszcze zapas.
		   Teraz cały niedobór bierze na siebie przycisk — on ma zapas w postaci
		   drugiej linii, numer nie ma żadnego. */
		flex: 1 0 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 1px;
		padding: 9px 14px;
		color: var(--wtc-white);
		text-decoration: none;
		/* Pole dotyku 48 px także wtedy, gdy tekst jest krótki. */
		min-height: 48px;
	}
	.wtc-callbar__label {
		font-size: 11px;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: #aeb7b9;
		line-height: 1;
	}
	.wtc-callbar__number {
		font: 700 17px/1.15 var(--wtc-font-body);
		white-space: nowrap;
		/* Numer nie może się złamać na dwie linie, ale przy bardzo wąskim
		   ekranie ma ustąpić przyciskowi, a nie wypchnąć go poza pasek. */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wtc-callbar__cta {
		/* **Kurczy się przycisk, nie numer.** Przy `flex: 0 0 auto` przycisk
		   brał pełną szerokość swojego tekstu, a numer — jako jedyny element
		   z prawem do kurczenia — dostawał resztę i na 320 px kończył się
		   wielokropkiem. Numer jest tym, po co klient tu przyszedł; nazwa
		   akcji może się złamać na dwie linie. */
		flex: 0 1 auto;
		min-width: 0;
		display: flex;
		align-items: center;
		padding: 0 16px;
		background: var(--wtc-red);
		color: var(--wtc-white);
		font: 700 15px/1.2 var(--wtc-font-body);
		text-decoration: none;
		text-align: center;
		/* Dwie linie zamiast wypchnięcia numeru poza pasek. */
		white-space: normal;
		hyphens: auto;
	}
	.wtc-callbar__cta:hover,
	.wtc-callbar__cta:focus { background: var(--wtc-red-dark); color: var(--wtc-white); }
	.wtc-callbar__phone:focus-visible,
	.wtc-callbar__cta:focus-visible { outline: 2px solid var(--wtc-white); outline-offset: -4px; }

	/* Pasek jest `fixed`, czyli poza układem strony — bez tego zasłaniałby
	   ostatni wiersz stopki, a na stronie kontaktowej akurat tam stoją dane,
	   po które ktoś tam wszedł. */
	/* 68 px, bo tyle ma pasek: 48 px pola dotyku plus 2 × 9 px wewnętrznego
	   odstępu i obramowanie. Przy 60 px stopka wystawała pod pasek o sześć
	   pikseli — akurat tyle, żeby zjeść dolną krawędź ostatniego wiersza. */
	body.wtc-has-callbar { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width: 360px) {
	/* Na najwęższych telefonach numer i pełna nazwa akcji nie mieszczą się
	   obok siebie w jednej linii. Ustępuje przycisk, nie numer. */
	.wtc-callbar__cta { padding: 0 12px; font-size: 13.5px; }
	.wtc-callbar__number { font-size: 16px; }
}

/* Uwaga dla administratora, gdy numeru nie ustawiono — pasek nie istnieje,
   więc bez tego nie byłoby żadnego objawu. */
.wtc-callbar__admin {
	margin: 0;
	padding: 10px 16px;
	background: var(--wtc-sand);
	border-top: 1px dashed var(--wtc-line);
	color: var(--wtc-soft);
	font-size: 13px;
	line-height: 1.5;
}