/*
Theme Name: Stylove Ażury
Description: Custom motyw WooCommerce dla sklepu z ażurowymi dekoracjami okiennymi Stylove Ażury.
Author: Stylove Ażury
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 8.0
Text Domain: stylove-azury
*/

:root {
	--bg: #FFFFFF;
	--bg-alt: #EFEAE0;
	--ink: #232A20;
	--ink-soft: #5A5F51;
	--line: rgba(35, 42, 32, 0.14);
	/* Osobny token na obramowania elementów interaktywnych formularzy
	   (WCAG 1.4.11 Non-text Contrast, ≥3:1) — --line (0.14 alfa, ~1.3:1 na
	   białym) starcza na delikatne separatory sekcji, ale nie na granice
	   pól, które muszą być wykrywalne bez polegania na kolorze. ~4,3:1 na
	   #FFFFFF, ~3,6:1 na --bg-alt. */
	--line-input: rgba(35, 42, 32, 0.6);
	--sage: #7C8F6E;
	--sage-deep: #4C5F40;
	--sage-pale: #E6EBDF;
	--brass: #B69A6C;

	--font-display: 'Fraunces', serif;
	--font-body: 'Work Sans', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;

	--header-h: 84px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--bg);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	padding-top: var(--header-h);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	margin: 0 0 0.5em;
}

a {
	color: var(--sage-deep);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 32px;
}

/* ==========================================================================
   Header (sticky/fixed)
   ========================================================================== */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
	box-shadow: 0 2px 16px rgba(35, 42, 32, 0.1);
}

/* Nie chowaj headera pod adminbarem WP, gdy zalogowany użytkownik go widzi. */
body.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

.nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 32px;
	min-height: var(--header-h);
}

.site-logo {
	display: flex;
	align-items: center;
}

.site-logo .custom-logo {
	height: 40px;
	width: auto;
}

.logo {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	letter-spacing: 0.03em;
	color: var(--ink);
}

.logo span {
	color: var(--sage-deep);
	font-style: italic;
	font-weight: 400;
}

.main-nav-list {
	display: flex;
	gap: 34px;
	font-size: 14px;
	font-weight: 500;
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav-list a {
	color: var(--ink-soft);
	transition: color 0.15s;
}

.main-nav-list a:hover,
.main-nav-list li.current-menu-item > a {
	color: var(--sage-deep);
}

.nav-icons {
	display: flex;
	align-items: center;
	gap: 22px;
}

.nav-icon-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: inherit;
	font-size: 13px;
	color: var(--ink-soft);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: color 0.15s;
}

.nav-icon-btn:hover {
	color: var(--sage-deep);
}

.nav-icon-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}

.cart-dot {
	position: relative;
}

.cart-dot .cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	background: var(--sage-deep);
	color: #fff;
	font-size: 10px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono);
}

/* Przełącznik menu mobilnego (hamburger) — ukryty na desktopie. */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.nav-toggle-bar {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--ink);
	border-radius: 1px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

.nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(35, 42, 32, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 900;
}

.nav-backdrop.is-visible {
	opacity: 1;
	visibility: visible;
}

body.nav-open {
	overflow: hidden;
}

@media (max-width: 980px) {
	.nav-row {
		padding: 16px 24px;
	}

	.nav-toggle {
		display: flex;
	}

	.main-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg);
		border-top: 1px solid var(--line);
		box-shadow: 0 16px 28px rgba(35, 42, 32, 0.1);
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
		z-index: 950;
	}

	.main-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}

	.main-nav-list {
		flex-direction: column;
		gap: 0;
		font-size: 15px;
	}

	.main-nav-list li {
		border-bottom: 1px solid var(--line);
	}

	.main-nav-list li:last-child {
		border-bottom: none;
	}

	.main-nav-list a {
		display: block;
		padding: 16px 24px;
	}

	.nav-icon-label {
		display: none;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--ink);
	color: #D9DBCF;
	padding: 64px 0 28px;
	margin-top: 20px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.footer-logo {
	font-family: var(--font-display);
	font-size: 22px;
	color: #fff;
	margin-bottom: 14px;
}

.footer-logo-image .custom-logo {
	height: 34px;
	width: auto;
	filter: brightness(0) invert(1);
	margin-bottom: 14px;
}

.footer-about p {
	font-size: 13px;
	color: #9DA290;
	max-width: 260px;
}

.footer-col h5 {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8B9080;
	margin-bottom: 16px;
}

.footer-col a {
	display: block;
	font-size: 13.5px;
	color: #D9DBCF;
	margin-bottom: 10px;
}

.footer-col a:hover {
	color: var(--sage);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 22px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px;
	color: #7C8172;
}

/* Baner metod płatności — patrz komentarz w footer.php przy .footer-payments */
.footer-payments {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 22px;
	margin-bottom: 22px;
}

.footer-payments-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8B9080;
	margin-bottom: 14px;
}

.footer-payments picture {
	display: block;
}

.footer-payments-banner {
	display: block;
	width: 100%;
	height: auto;
}

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

/* ==========================================================================
   Strona główna
   ========================================================================== */

.eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sage-deep);
}

.lace-divider {
	height: 22px;
	width: 100%;
	background-image:
		linear-gradient(45deg, transparent 45%, var(--line) 45%, var(--line) 55%, transparent 55%),
		linear-gradient(-45deg, transparent 45%, var(--line) 45%, var(--line) 55%, transparent 55%);
	background-size: 22px 22px;
	background-position: center;
	opacity: 0.9;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: all 0.15s;
	border: 1px solid transparent;
	/* .btn dotąd był używany tylko na <a> (bez domyślnego "chrome"
	   przeglądarki) — na prawdziwym <button> (np. koszyk: "Aktualizuj
	   koszyk", "Zastosuj kupon") bez tego resetu przebijało domyślne,
	   systemowe tło/czcionka przycisku. */
	appearance: none;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

.btn-primary {
	background: var(--sage-deep);
	color: #fff;
}

.btn-primary:hover {
	background: var(--ink);
}

.btn-ghost {
	border-color: var(--line);
	color: var(--ink);
}

.btn-ghost:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

/* hero */
.hero {
	padding: 64px 32px 56px;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 64px;
	align-items: center;
}

.hero h1 {
	font-family: var(--font-display);
	font-size: 52px;
	line-height: 1.08;
	font-weight: 500;
	margin: 18px 0 22px;
	max-width: 520px;
}

.hero h1 em {
	font-style: italic;
	color: var(--sage-deep);
	font-weight: 400;
}

.hero p.lead {
	font-size: 16px;
	color: var(--ink-soft);
	max-width: 440px;
	margin-bottom: 32px;
}

.btn-row {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.hero-art {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 4 / 3.4;
	background: linear-gradient(160deg, var(--sage-pale), var(--bg-alt));
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hero-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* value strip */
.value-strip {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--sage-pale);
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 22px 0;
}

.value-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 28px;
	border-left: 1px solid var(--line);
}

.value-item:first-child {
	border-left: none;
}

.value-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
}

.value-item h4 {
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.value-item p {
	font-size: 12px;
	color: var(--ink-soft);
	margin: 0;
}

/* section shell */
section.block {
	padding: 76px 0;
}

.block-head {
	text-align: center;
	max-width: 600px;
	margin: 0 auto 48px;
}

.block-head h2 {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	margin: 14px 0 12px;
}

.block-head p {
	color: var(--ink-soft);
	font-size: 15px;
	margin: 0;
}

/* explain cards */
.explain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.explain-card {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	padding: 28px 24px;
	border-radius: 3px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.explain-card:hover {
	border-color: var(--sage-deep);
	box-shadow: 0 12px 26px rgba(35, 42, 32, 0.09);
	transform: translateY(-3px);
}

.explain-card .tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--sage-deep);
	background: var(--sage-pale);
	padding: 3px 9px;
	border-radius: 2px;
	margin-bottom: 14px;
}

.explain-card h3 {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	margin-bottom: 8px;
}

.explain-card p {
	font-size: 13.5px;
	color: var(--ink-soft);
	margin: 0;
}

/* categories — karuzela w jednym wierszu */
.cat-carousel {
	position: relative;
}

.cat-grid {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 6px 4px 18px;
	margin: -6px -4px 0;
	scrollbar-width: none;
}

.cat-grid::-webkit-scrollbar {
	display: none;
}

.cat-fade {
	position: absolute;
	top: 0;
	bottom: 18px;
	width: 64px;
	pointer-events: none;
	z-index: 1;
}

.cat-fade--left {
	left: 0;
	background: linear-gradient(90deg, var(--bg), transparent);
}

.cat-fade--right {
	right: 0;
	background: linear-gradient(270deg, var(--bg), transparent);
}

.cat-arrow {
	position: absolute;
	top: calc(50% - 9px);
	z-index: 2;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(35, 42, 32, 0.08);
	transition: border-color 0.15s, opacity 0.15s, transform 0.15s;
}

.cat-arrow svg {
	width: 16px;
	height: 16px;
	stroke: var(--ink);
	fill: none;
	stroke-width: 1.6;
}

.cat-arrow:hover {
	border-color: var(--sage-deep);
	transform: translateY(-50%) scale(1.06);
}

.cat-arrow:hover svg {
	stroke: var(--sage-deep);
}

.cat-arrow--prev {
	left: 0;
	transform: translate(-50%, -50%);
}

.cat-arrow--prev:hover {
	transform: translate(-50%, -50%) scale(1.06);
}

.cat-arrow--next {
	right: 0;
	transform: translate(50%, -50%);
}

.cat-arrow--next:hover {
	transform: translate(50%, -50%) scale(1.06);
}

.cat-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.cat-item {
	display: block;
	flex: 0 0 202px;
	scroll-snap-align: start;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 28px 16px 22px;
	text-align: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	cursor: pointer;
}

.cat-item:hover {
	border-color: var(--sage-deep);
	box-shadow: 0 12px 26px rgba(35, 42, 32, 0.09);
	transform: translateY(-3px);
}

.cat-icon {
	width: 62px;
	height: 62px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sage-pale);
	background-image:
		linear-gradient(45deg, transparent 46%, rgba(76, 95, 64, 0.16) 46%, rgba(76, 95, 64, 0.16) 54%, transparent 54%),
		linear-gradient(-45deg, transparent 46%, rgba(76, 95, 64, 0.16) 46%, rgba(76, 95, 64, 0.16) 54%, transparent 54%);
	background-size: 9px 9px;
	background-position: center;
	transition: background-color 0.2s ease;
}

.cat-item:hover .cat-icon {
	background-color: var(--sage);
}

.cat-icon img {
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.cat-item .name {
	display: block;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 4px;
}

.cat-item .desc {
	display: block;
	font-size: 11.5px;
	color: var(--ink-soft);
	line-height: 1.4;
}

.season-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: var(--bg-alt);
	border-radius: 4px;
	overflow: hidden;
}

.season-img {
	aspect-ratio: 4 / 3.4;
	overflow: hidden;
	background: var(--sage-pale);
}

.season-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.season-copy {
	padding: 32px 40px 32px 0;
}

.season-copy h2 {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 500;
	margin: 14px 0 12px;
}

.season-copy p {
	color: var(--ink-soft);
	font-size: 14.5px;
	margin-bottom: 22px;
	max-width: 400px;
}

.season-links {
	display: flex;
	gap: 20px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.season-links a {
	font-size: 13px;
	color: var(--ink-soft);
	border-bottom: 1px solid transparent;
}

.season-links a:hover {
	color: var(--sage-deep);
	border-color: var(--sage-deep);
}

/* wykończenia górnej krawędzi */
.edge-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.edge-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 22px;
	position: relative;
	/* flex + ".icon{margin-top:auto}" niżej: karty w gridzie mają tę samą
	   wysokość (dopasowaną do najdłuższego opisu), a ikona ma się
	   wyrównać do dołu każdej z nich niezależnie od długości tekstu nad
	   nią, zamiast siadać zaraz po tekście. */
	display: flex;
	flex-direction: column;
}

.edge-card h4 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.edge-card p {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin-bottom: 10px;
}

.edge-card .fit {
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--sage-deep);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Ikona animowana pod tekstem kafelka (te same SVG i ta sama animacja
   rysowania na hover co na karcie produktu — patrz
   stylove_azury_edge_finish_animated_svg() i blok "Animacja ikon
   wykończenia" niżej w tym pliku; ".edge-card:hover" tam nie jest
   ograniczone do ".option-group--edge", więc łapie też te kafelki). */
.edge-card .icon {
	display: block;
	width: 100%;
	height: 40px;
	margin-top: auto;
	padding-top: 14px;
	color: var(--ink);
}

.edge-card .icon svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Wjazd kafelków od dołu, pojedynczo — patrz assets/js/main.js (blok
   IntersectionObserver dla "#wykonczenia .edge-card"), który dokłada
   klasę ".in-view" gdy kafelek wjedzie w viewport. Opóźnienie per
   nth-child daje efekt "jeden po drugim" zamiast wszystkich naraz. */
#wykonczenia .edge-card {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

#wykonczenia .edge-card.in-view {
	opacity: 1;
	transform: translateY(0);
}

#wykonczenia .edge-card:nth-child(1) { transition-delay: 0s; }
#wykonczenia .edge-card:nth-child(2) { transition-delay: 0.12s; }
#wykonczenia .edge-card:nth-child(3) { transition-delay: 0.24s; }
#wykonczenia .edge-card:nth-child(4) { transition-delay: 0.36s; }

.edge-help {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.edge-help a {
	font-size: 13px;
	font-weight: 600;
	color: var(--sage-deep);
	border-bottom: 1px solid var(--sage-deep);
	padding-bottom: 2px;
}

/* produkty (bestsellery) */
.prod-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.prod-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	transition: box-shadow 0.15s;
}

.prod-media {
	position: relative;
	aspect-ratio: 1 / 1.05;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
	overflow: hidden;
}

.prod-media img {
	width: 100%;
	height: 100%;
	/* "contain", nie "cover": to zdjęcia wzoru (grafika/wycinanka), nie
	   zdjęcia lifestyle'owe — przycinanie obetnie fragment wzoru, patrz
	   ta sama decyzja dla ul.products li.product > img wyżej. Tło
	   .prod-media (gradient) prześwituje w miejscach domalowanych przez
	   "contain". */
	object-fit: contain;
}

.prod-info {
	padding: 16px 16px 18px;
}

.prod-info h4 {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	margin-bottom: 4px;
}

.prod-info h4 a {
	color: var(--ink);
}

.prod-info .price {
	font-size: 13px;
	color: var(--ink-soft);
	margin-bottom: 12px;
}

.prod-info .price ins {
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
}

.btn-small {
	display: block;
	text-align: center;
	width: 100%;
	padding: 9px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}

.btn-small:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

/* pracownia (trust) */
.trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.trust-copy .eyebrow {
	margin-bottom: 14px;
	display: block;
}

.trust-copy h2 {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 16px;
}

.trust-copy p {
	color: var(--ink-soft);
	font-size: 14.5px;
	margin-bottom: 14px;
	max-width: 460px;
}

.trust-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.trust-list li {
	font-size: 13.5px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.trust-list svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin-top: 2px;
	stroke: var(--sage-deep);
}

.trust-art {
	background: var(--sage-pale);
	border-radius: 4px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.trust-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* opinie */
@media (max-width: 980px) {
	.hero-grid,
	.trust-grid {
		grid-template-columns: 1fr;
	}

	.explain-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.prod-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cat-item {
		flex-basis: 158px;
	}

	.cat-arrow {
		display: none;
	}

	.cat-fade {
		width: 28px;
	}

	.season-section {
		grid-template-columns: 1fr;
	}

	.season-copy {
		padding: 28px 28px 32px;
	}

	.value-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.edge-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* .explain-grid (3 kolumny) spada na 980px do 2 kolumn, ale zostawał na
   2 aż do najmniejszych telefonów — karty robiły się węższe niż tekst w
   nich, więc każde słowo łamało się osobno (np. "Zawieszka" → "Zawie-
   szka" w kolejnych liniach). .explain-grid--4 ma już taką regułę niżej
   (patrz jej @media 620px) — tu dokładamy analogiczną dla wariantu
   3-kolumnowego, używanego na stronie głównej ("Zanim zaczniesz
   wybierać") i w sekcji "Pomoc w wyborze" kategorii sezonowych. */
@media (max-width: 620px) {
	.explain-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   WooCommerce — archiwum produktów (archive-product.php,
   taxonomy-product_cat.php)
   ========================================================================== */

.shop-header {
	padding: 18px 0 36px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 36px;
}

.shop-header h1 {
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 500;
	margin: 10px 0 14px;
}

.woocommerce-breadcrumb {
	font-size: 11px;
	color: var(--ink-soft);
}

.woocommerce-breadcrumb a {
	color: var(--ink-soft);
}

.woocommerce-breadcrumb a:hover {
	color: var(--sage-deep);
}

/* Krótki/długi opis kategorii — wypisywane przez wtyczkę
   magiaokna-site-specific, tu tylko stylujemy pod design tokens
   (zastępuje prowizoryczne zielone tło z Dodatkowego CSS). */
.term-description {
	font-size: 14.5px;
	color: var(--ink-soft);
	line-height: 1.65;
}

.term-description p {
	margin: 0 0 1em;
}

.term-description p:last-child {
	margin-bottom: 0;
}

.term-description a {
	color: var(--sage-deep);
	border-bottom: 1px solid var(--line);
}

.term-description a:hover {
	border-color: var(--sage-deep);
}

.term-description.short-description {
	max-width: 640px;
	font-size: 15px;
}

.term-description.long-description {
	background: var(--sage-pale);
	border-radius: 4px;
	padding: 32px 36px;
	margin: 40px 0 0;
}

.term-description.long-description p {
	max-width: 760px;
}

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 32px;
}

.woocommerce-result-count {
	font-size: 13px;
	color: var(--ink-soft);
	margin: 0;
}

.woocommerce-ordering {
	margin: 0;
}

.woocommerce-ordering select {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 8px 12px;
	cursor: pointer;
}

/* Siatka produktów w stylu kart z mockupu (Wariant A: wzór główny,
   hover pokazuje aranżację). Mechanizm hover-swap jest już gotowy
   we wtyczce (drugi <img class="magiaokna-hover-image"> obok
   głównego zdjęcia produktu) — tu tylko dopasowujemy CSS pod
   realny markup pętli WooCommerce. Główne zdjęcie produktu nie ma
   własnej charakterystycznej klasy (WooCommerce nadaje "wp-post-image"
   tylko placeholderowi), więc łapiemy je przez :not(). */
ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0 0 56px;
	padding: 0;
}

/* woocommerce.css robi clearfix przez "ul.products::before/::after{
   content:' '; display:table}" — przy display:grid te pseudoelementy
   stają się prawdziwymi elementami siatki (::before zajmuje pierwszą
   kolumnę), więc pierwszy produkt ląduje w drugiej kolumnie. Usuwamy
   ich content, żeby nie uczestniczyły w layoucie. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
}

/* WooCommerce dolącza własny woocommerce-layout.css z regułą
   ".woocommerce ul.products li.product{width:22.05%;float:left;margin:...}"
   o wyższym specificity niż zwykłe "ul.products li.product" — trzeba ją
   jawnie zneutralizować (float/margin/width), żeby zadziałała nasza siatka. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

ul.products li.product {
	position: relative;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	list-style: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

ul.products li.product:hover {
	border-color: var(--sage-deep);
	box-shadow: 0 12px 26px rgba(35, 42, 32, 0.09);
	transform: translateY(-3px);
}

/* Główne zdjęcie (wzór) i zdjęcie hover (aranżacja) to dwa kolejne
   rodzeństwa <img> wewnątrz linku, bez wspólnego wrappera (tak
   generuje je WooCommerce + wtyczka) — więc "ramkę" o stałym
   aspect-ratio i tle nadajemy głównemu zdjęciu (ono jest w normalnym
   przepływie i rezerwuje miejsce), a zdjęcie hover nakładamy na nią
   position:absolute dokładnie w tych samych wymiarach. Dzięki temu
   h2/cena pod spodem nie są przycinane przez overflow:hidden linku. */
ul.products li.product a.woocommerce-loop-product__link {
	position: relative;
	display: block;
	overflow: hidden;
	color: inherit;
}

ul.products li.product a.woocommerce-loop-product__link > img:not(.magiaokna-hover-image) {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1.05;
	object-fit: contain;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
	transition: opacity 0.3s ease;
}

ul.products li.product a.woocommerce-loop-product__link img.magiaokna-hover-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1.05;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s ease;
}

/* :has() zamiast bezwarunkowego selektora — wtyczka magiaokna-site-specific
   świadomie NIE renderuje .magiaokna-hover-image dla zdjęć "struktury
   materiału" (nie każdy wzór ma zdjęcie aranżacyjne); bez tego warunku
   hover i tak chował główne zdjęcie, odsłaniając puste tło kafelka. */
ul.products li.product:hover a.woocommerce-loop-product__link:has(img.magiaokna-hover-image) > img:not(.magiaokna-hover-image) {
	opacity: 0;
}

ul.products li.product:hover a.woocommerce-loop-product__link img.magiaokna-hover-image {
	opacity: 1;
}

.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
	top: 12px;
	right: auto;
	left: 12px;
	margin: 0;
}

ul.products li.product .onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--sage-deep);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
}

/* woocommerce.css ma ".woocommerce ul.products li.product .woocommerce-loop-product__title"
   i "...li.product .price" (specificity 0,4,2) — wyższe niż nasze
   proste "ul.products li.product ..." (0,3,2), więc margines (padding
   poziomy bloku tekstowego) się nie stosował. Dopasowujemy prefiksem
   ".woocommerce"/".woocommerce-page", tak jak wcześniej przy karcie i paginacji. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
	margin: 16px 16px 4px;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
}

.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	margin: 0 16px 16px;
}

/* woocommerce.css nadaje ".woocommerce ul.products li.product .price"
   kolor #958e09 (wyższe specificity niż samo "ul.products li.product
   .price") i, osobno, ustawia "strong" wewnątrz karty na display:block
   (myślą o swoim układzie "od" nad ceną) — u nas łamie to "od X zł" na
   dwie linie. Oba trzeba nadpisać z tym samym prefiksem. */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: var(--ink-soft);
}

ul.products li.product .price {
	display: block;
	font-size: 13px;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
}

ul.products li.product .price del {
	opacity: 0.6;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price .price-from strong,
.woocommerce-page ul.products li.product .price .price-from strong {
	display: inline;
}

ul.products li.product .price .price-from strong {
	color: var(--ink);
	font-weight: 600;
}

/* woocommerce.css ma ".woocommerce ul.products li.product .button{...
   margin-top:1em}" — to samo specificity co nasza reguła niżej, więc
   o wygranej decydowałaby wyłącznie kolejność w kaskadzie; dopasowujemy
   prefiksem, żeby nie polegać na tej kruchej zależności. */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-page ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart {
	margin: 0 16px 18px;
}

ul.products li.product .button.add_to_cart_button,
ul.products li.product .added_to_cart {
	display: block;
	text-align: center;
	padding: 9px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
	background: none;
}

ul.products li.product .button.add_to_cart_button:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

.woocommerce-pagination {
	margin-top: 8px;
}

/* woocommerce.css ma ".woocommerce nav.woocommerce-pagination ul{display:
   inline-block}" o wyższym specificity niż zwykłe ".page-numbers" —
   trzeba je dopasować, żeby nasz flex-row faktycznie zadziałał. */
.woocommerce .woocommerce-pagination ul.page-numbers,
.woocommerce-page .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Neutralizuje clearfix (::before/::after{content:" "}) z
   woocommerce-layout.css — inaczej te pseudoelementy stają się
   dodatkowymi, pustymi elementami flex w rzędzie numerów stron. */
.woocommerce-pagination .page-numbers::before,
.woocommerce-pagination .page-numbers::after {
	content: none;
}

.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink);
}

.woocommerce-pagination .page-numbers a:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

.woocommerce-pagination .page-numbers .current {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: #fff;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-products-found {
	font-size: 14px;
	color: var(--ink);
	background: var(--sage-pale);
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 16px 20px;
	margin: 0 0 32px;
	list-style: none;
}

/* .woocommerce-info/.woocommerce-message dostają ikonkę z czcionki
   WooCommerce przez rdzeniowe woocommerce.css (::before, position:
   absolute; left:1.5em) — ten rdzeniowy rule zakłada rdzeniowy padding
   (1em 2em 1em 3.5em), który dawał miejsce na tę ikonkę. Nasz padding
   wyżej (16px 20px, bez dodatkowego miejsca z lewej) był tego nieświadomy,
   więc ikonka nachodziła na tekst ("Powracający klient?" itp.) —
   przywracamy miejsce i position:relative (wymagane przez position:
   absolute ikonki), a sam kolor dopasowujemy do palety zamiast
   domyślnego niebieskiego WooCommerce. */
.woocommerce-info,
.woocommerce-message {
	position: relative;
	padding-left: 48px;
}

.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--sage-deep);
}

.woocommerce-info a,
.woocommerce-message a {
	color: var(--sage-deep);
	font-weight: 600;
}

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

@media (max-width: 620px) {
	ul.products {
		grid-template-columns: 1fr;
	}

	.shop-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ==========================================================================
   Pojedynczy produkt (single-product.php, woocommerce/content-single-product.php)
   ========================================================================== */

/* Breadcrumb — zwykły (nie-sticky) blok, bo sticky ma teraz jego rodzic
   ".product-gallery-sticky" (patrz niżej) — razem z galerią, jedna
   bryła. Bez klasy ".wrap" (ta dodawała 32px poziomego paddingu i
   wyśrodkowanie do 1180px, przez co tekst zaczynał się 32px bardziej na
   lewo niż galeria — teraz nie ma paddingu, więc lewa krawędź tekstu
   pokrywa się z lewą krawędzią zdjęcia). */
.product-breadcrumb {
	padding-bottom: 14px;
}

.product-single {
	padding: 8px 0 0;
}

.product-single-grid {
	display: grid;
	grid-template-columns: 0.95fr 1fr;
	gap: 56px;
	align-items: start;
	padding-bottom: 56px;
}

/* woocommerce-layout.css ma stare, ogólne reguły dla motywów bez
   integracji WooCommerce: ".woocommerce div.product div.images"
   i "...div.summary" dostają "float + width:48%". Nasze klasy
   (.product-single-grid.product, .summary) mają wyższe specificity
   niż te reguły, więc nadpisujemy je na pełną szerokość komórki
   siatki grid. */
.product-single-grid.product .woocommerce-product-gallery.images,
.product-single-grid.product .summary.entry-summary {
	float: none;
	width: 100%;
}

/* --- Galeria ---
   Własny markup (woocommerce/single-product/product-image.php) zamiast
   domyślnego flexslidera WooCommerce — patrz komentarz w tym szablonie. */

.product-gallery-sticky {
	position: sticky;
	/* --gallery-sticky-top jest liczony w JS (main.js) na podstawie
	   faktycznej pozycji tej bryły (breadcrumb + galeria) przy wejściu na
	   stronę, żeby "złapała" się od razu, bez potrzeby przewijania — patrz
	   komentarz w JS. Wartość niżej to bezpieczny fallback (np. JS
	   wyłączony). */
	top: var( --gallery-sticky-top, calc(var(--header-h) + 24px) );
}

/* Zwykły blok — position:relative tylko jako punkt odniesienia dla
   ".onsale" (position:absolute), patrz komentarz w
   content-single-product.php. */
.product-gallery-col {
	position: relative;
}

.gallery-main {
	position: relative;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1.05;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
	box-shadow: 0 1px 2px rgba(35, 42, 32, 0.06);
}

.gallery-main img {
	width: 100%;
	height: 100%;
	/* "contain" — zdjęcia wzoru nie mogą tracić fragmentu przez
	   przycięcie, patrz .prod-media img wyżej. */
	object-fit: contain;
}

.gallery-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-top: 12px;
}

.gallery-thumb {
	aspect-ratio: 1 / 1;
	border-radius: 3px;
	overflow: hidden;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: border-color 0.15s;
	background: var(--bg-alt);
	padding: 0;
}

.gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.gallery-thumb.active {
	border-color: var(--sage-deep);
}

.gallery-thumb:hover {
	border-color: var(--sage);
}

.product-gallery-col .onsale {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
	background: var(--sage-deep);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 11px;
	border-radius: 2px;
	z-index: 1;
}

/* --- Podsumowanie (tytuł, cena, warianty, dodaj do koszyka) --- */

.product-summary-col .product_title {
	font-family: var(--font-display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1.15;
	margin: 0 0 10px;
}

.woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ink-soft);
	margin-bottom: 18px;
}

.woocommerce-product-rating .star-rating {
	color: var(--brass);
	letter-spacing: 1px;
}

.woocommerce-product-rating .woocommerce-review-link {
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.price-block {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 22px;
}

/* ".price" trafia tu z rdzenia WooCommerce (woocommerce_template_single_price) —
   "display:contents" sprawia, że jej dzieci (del/ins albo price-from) stają się
   bezpośrednimi elementami flexa .price-block, bez własnego pudełka.
   woocommerce.css ma ".woocommerce div.product p.price{font-size:1.25em}"
   z wyższą specyficznością (3 klasy) niż nasze ".price-block > .price"
   (2 klasy) — stąd !important przy rozmiarach czcionki niżej. */
.price-block > .price {
	display: contents;
	font-family: var(--font-display);
	font-size: 26px !important;
	font-weight: 500;
	color: var(--ink);
}

.price-block > .price del {
	font-family: var(--font-body);
	font-size: 15px !important;
	font-weight: 400;
	color: var(--ink-soft);
	opacity: 1;
	text-decoration: line-through;
	order: 2;
}

.price-block > .price ins {
	text-decoration: none;
	order: 1;
}

.price-block .price-from {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	color: var(--ink-soft);
}

.price-block .price-from strong {
	font-family: var(--font-display);
	font-size: 34px !important;
	color: var(--ink);
}

.price-block .price-per {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink-soft);
	order: 3;
}

.price-tax-note {
	margin: -4px 0 20px;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink-soft);
}

.woocommerce-product-details__short-description {
	font-size: 14.5px;
	color: var(--ink-soft);
	max-width: 480px;
	margin-bottom: 28px;
}

.woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* --- Warianty: prawdziwe <select> WooCommerce, schowane wizualnie ---
   Silnik wariantów (cena, dostępność kombinacji, stock, variation_id)
   nadal działa na tych <select> — patrz woocommerce/single-product/
   add-to-cart/variable.php i assets/js/main.js. Wizualnie zastępują je
   .option-group poniżej. */
.variations {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.reset-variations-row {
	text-align: right;
	margin-top: -10px;
	margin-bottom: 18px;
}

.reset-variations-row .reset_variations {
	font-size: 12px;
	color: var(--ink-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.reset-variations-row .reset_variations:hover {
	color: var(--sage-deep);
}

/* --- Grupy opcji (szerokość / kolor / wykończenie / atrybut ogólny) --- */

.option-group {
	margin-bottom: 26px;
}

.option-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}

.option-label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.option-value {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--sage-deep);
}

/* Reset dla przycisków użytych jako swatch'e/pigułki/kafelki. */
.width-pill,
.color-swatch,
.option-group--edge .edge-card,
.generic-pill {
	font-family: inherit;
	background: none;
	text-align: center;
	cursor: pointer;
}

.width-pill:disabled,
.color-swatch:disabled,
.option-group--edge .edge-card:disabled,
.generic-pill:disabled {
	cursor: not-allowed;
}

/* --- Szerokość --- */

.width-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 8px;
}

.width-pill {
	position: relative;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 10px 4px;
	background: #fff;
	transition: all 0.15s;
}

.width-pill .num {
	display: block;
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}

.width-pill .unit {
	display: block;
	font-size: 10px;
	color: var(--ink-soft);
	margin-top: 1px;
}

.width-pill:hover:not(:disabled) {
	border-color: var(--sage-deep);
}

.width-pill.is-selected {
	border-color: var(--sage-deep);
	background: var(--sage-pale);
	box-shadow: inset 0 0 0 1px var(--sage-deep);
}

.width-pill.is-selected .num {
	color: var(--sage-deep);
}

.width-pill.is-unavailable,
.width-pill.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Kolor --- */

.color-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.color-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: none;
	padding: 0;
}

.color-swatch .dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid transparent;
	box-shadow: 0 0 0 1px var(--line);
	transition: all 0.15s;
}

.color-swatch.is-selected .dot {
	border-color: var(--sage-deep);
	box-shadow: 0 0 0 1px var(--sage-deep);
}

.color-swatch .name {
	font-size: 11.5px;
	color: var(--ink-soft);
}

.color-swatch.is-selected .name {
	color: var(--ink);
	font-weight: 600;
}

.color-swatch.is-unavailable,
.color-swatch.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Wykończenie górnej krawędzi: kafelki (osobna skala od .edge-card
   informacyjnego na front-page.php — stąd zakres ".option-group--edge"). --- */

.option-group--edge .edge-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.option-group--edge .edge-card {
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 3px;
	padding: 14px 10px 12px;
	position: relative;
	transition: all 0.15s;
}

.option-group--edge .edge-card:hover:not(:disabled) {
	border-color: var(--sage);
}

.option-group--edge .edge-card.is-selected {
	border-color: var(--sage-deep);
	background: var(--sage-pale);
}

.option-group--edge .edge-card .icon {
	display: block;
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
	color: var(--ink);
}

.option-group--edge .edge-card .icon svg {
	width: 100%;
	height: 100%;
}

.option-group--edge .edge-card .icon--anim svg {
	overflow: visible;
}

/* --- Animacja ikon wykończenia (szelki/nacięcia: patyczek rysujący się
   od lewej; gładkie: przeszycie-zygzak rysujące się od lewej) — patrz
   stylove_azury_edge_finish_animated_svg() w functions.php. ".rod" i
   ".zigzag" mają tu ustawiony stroke-dasharray/-dashoffset na realną
   długość linii (czyli domyślnie: niewidoczne) — MUSI być w tym pliku,
   nie jako inline style na elemencie, bo inline style ma wyższą
   specyficzność niż selektor `:hover`/`.is-selected` poniżej i
   nadpisania by nie było widać. Najechanie na kartę lub jej wybranie
   animuje dashoffset do 0. Białe kształty ".mask" leżą w SVG nad tymi
   liniami, więc same przesłaniają patyczek tam, gdzie "chowa się" za
   tkaniną — bez dodatkowej logiki JS. */

/* Oryginalne pliki SVG (CorelDRAW) mają grubości linii dobrane pod duży
   format wydruku (np. 0.38 dla zygzaka na tle viewBox ~1022 szerokości) —
   w kafelku 36px wysokości byłoby to ułamek piksela i praktycznie
   niewidoczne. "vector-effect: non-scaling-stroke" sprawia, że
   stroke-width poniżej liczy się w realnych pikselach ekranu, niezależnie
   od skalowania viewBox → jedna spójna grubość dla wszystkich ikon.
   ".rod" (szelki/nacięcia) nie jest już liniowany — to wypełniony
   prostokąt, więc nie potrzebuje stroke. */
.edge-anim .zigzag,
.edge-anim .static,
.edge-anim .outline {
	vector-effect: non-scaling-stroke;
	stroke-width: 1.3;
}

/* ".rod" (szelki/nacięcia) to patyczek jako wypełniony prostokąt — szary
   kolor z pliku klienta, niezależny od koloru ikony (".static"/".outline"
   nadal używają currentColor). Rysowanie od lewej = "transform: scaleX()"
   zakotwiczony w lewej krawędzi prostokąta (fill nie ma stroke-dasharray,
   więc inna technika niż dla ".zigzag" w gładkiej krawędzi; CSS "width"
   na <rect> okazał się niewspierany w praktyce — nie reagował nawet na
   inline style, stąd scaleX zamiast tego). "transform-box: fill-box" +
   "transform-origin: 0% 50%" sprawia, że scaleX(0) ściska prostokąt do
   jego WŁASNEJ lewej krawędzi, a nie do x=0 całego viewBoksa. */
.edge-anim .rod {
	fill: #898989;
	transform-box: fill-box;
	transform-origin: 0% 50%;
	transform: scaleX(0);
}

.edge-anim--gladkie .zigzag {
	/* Długość polyline z gladkie3.svg: (1633.09-23.33) + (384.23-54.26) +
	   (1633.09-23.33) = 3549.49 (same segmenty co punkty polyline w
	   stylove_azury_edge_finish_animated_svg('gladkie') w functions.php). */
	stroke-dasharray: 3549.49;
	stroke-dashoffset: 3549.49;
	/* Cieńsza niż wspólne 1.3 (reguła ".edge-anim .zigzag..." wyżej) —
	   tylko ta linia, na życzenie. Ta sama specyficzność co reguła bazowa
	   (2 klasy), więc wygrywa dzięki kolejności w pliku (jest NIŻEJ) — bez
	   potrzeby dokładania dodatkowej klasy w selektorze. */
	stroke-width: 0.8;
}

.edge-anim--rzep .zigzag {
	stroke-dasharray: 1354.42;
	stroke-dashoffset: 1354.42;
}

/* "linear" naumyślnie — dowolny cubic-bezier easing daje RÓŻNY kształt
   krzywej przy rysowaniu i przy chowaniu, bo w drugą stronę jest to
   zwykle "lustrzane odbicie w czasie" tej samej krzywej, a nie ta sama
   krzywa. "linear" wygląda identycznie w obie strony niezależnie od
   czasu trwania.

   Rysowanie (hover/is-selected) i chowanie (powrót do stanu bazowego) mają
   to samo "transition" zadeklarowane w OBU regułach (nie tylko w
   bazowej), żeby dało się je w razie potrzeby rozdzielić — przeglądarka
   do animacji używa transition-duration ze STYLU DOCELOWEGO zmiany, więc
   każdy kierunek liczy się osobno. Patyczek/zygzak rysują i chowają się
   jednocześnie, bez przesunięcia. */
.edge-anim .rod,
.edge-anim .zigzag {
	transition: transform 0.5s linear, stroke-dashoffset 0.4s linear;
}

.edge-card:hover .edge-anim .rod,
.edge-card.is-selected .edge-anim .rod {
	transform: scaleX(1);
	transition: transform 0.5s linear, stroke-dashoffset 0.2s linear;
}

.edge-card:hover .edge-anim .zigzag,
.edge-card.is-selected .edge-anim .zigzag {
	stroke-dashoffset: 0;
	transition: width 1.5s linear, stroke-dashoffset 2s linear;
}

/* Rysowanie przerywanej linii "gładkiego" wykończenia 4x wolniej niż
   pozostałe ikony (8s zamiast 2s) — na życzenie, sama linia jest dłuższa
   (3629.03 vs 1354.42 dla rzepu) i szybciej "znika" pod maskami niż inne
   wzory, wolniejsze tempo lepiej pokazuje sam rysunek. Selektor z
   ".edge-anim.edge-anim--gladkie" (nie tylko ".edge-anim--gladkie") ma
   o jedną klasę więcej niż reguła bazowa wyżej, więc wygrywa niezależnie
   od kolejności w pliku. */
.edge-card:hover .edge-anim.edge-anim--gladkie .zigzag,
.edge-card.is-selected .edge-anim.edge-anim--gladkie .zigzag {
	transition: width 1.5s linear, stroke-dashoffset 8s linear;
}


/* Białe kształty ".mask" mają chować patyczek pod tkaniną, a nie tworzyć
   widoczną białą łatę — muszą więc mieć kolor tła KAFELKA, nie na sztywno
   biały. Domyślnie kafelek jest biały, ale po wybraniu (.is-selected)
   tło zmienia się na --sage-pale (patrz .option-group--edge .edge-card.is-selected
   wyżej), więc maska musi to podążać. */
.edge-anim .mask {
	fill: #fff;
	transition: fill 0.15s;
}

.edge-card.is-selected .edge-anim .mask {
	fill: var(--sage-pale);
}

.option-group--edge .edge-card .icon--photo {
	border-radius: 2px;
	overflow: hidden;
}

.option-group--edge .edge-card .icon--photo img {
	width: 100%;
	height: 100%;
	/* "contain" — zdjęcia referencyjne wykończeń bywają kwadratowe,
	   a pudełko ikony jest szerokie i niskie; "cover" obcinał większość
	   zdjęcia. */
	object-fit: contain;
}

.option-group--edge .edge-card .name {
	font-size: 12.5px;
	font-weight: 600;
	display: block;
	color: var(--ink);
}

.option-group--edge .edge-card .desc {
	font-size: 10.5px;
	color: var(--ink-soft);
	display: block;
	margin-top: 4px;
	line-height: 1.2;
	font-weight: normal;
}

.option-group--edge .edge-card .check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--sage-deep);
	display: none;
	align-items: center;
	justify-content: center;
}

.option-group--edge .edge-card.is-selected .check {
	display: flex;
}

.option-group--edge .edge-card .check svg {
	width: 9px;
	height: 9px;
	margin: 0;
	stroke: #fff;
	stroke-width: 3;
}

.option-group--edge .edge-card.is-unavailable,
.option-group--edge .edge-card.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Link "Nie wiesz, jakie wykończenie wybrać?" pod kafelkami --- */

.width-note {
	margin-top: 10px;
	font-size: 12px;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	gap: 6px;
}

.width-note svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	stroke: var(--ink-soft);
}

.width-note a {
	color: var(--sage-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.width-note a:hover {
	color: var(--ink);
}

/* --- Atrybut wariacyjny bez dedykowanego UI (poza szerokością/kolorem/
   wykończeniem) — proste pigułki tekstowe, ta sama logika dostępności. --- */

.generic-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.generic-pill {
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 8px 16px;
	font-size: 13px;
	color: var(--ink);
	transition: all 0.15s;
}

.generic-pill:hover:not(:disabled) {
	border-color: var(--sage-deep);
}

.generic-pill.is-selected {
	border-color: var(--sage-deep);
	background: var(--sage-pale);
	color: var(--sage-deep);
}

.generic-pill.is-unavailable,
.generic-pill.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* --- Komunikat o niedostępnej kombinacji (zamiast domyślnego bloku
   .woocommerce-variation-availability pod wariantami). --- */

.stylove-stock-note {
	font-size: 13px;
	color: var(--danger, #A5544A);
	margin-bottom: 16px;
}

/* Domyślny blok WooCommerce z ceną/opisem/dostępnością wariantu zostaje
   w DOM (potrzebny JS-owi rdzenia — core wywołuje na nim .slideDown()/
   .show(), co ustawia inline "display:block" i nadpisałoby zwykłe
   "display:none"), ale nie pokazujemy go — stąd !important. Cenę
   czytamy z eventu "found_variation" i podmieniamy w .price-block, a
   komunikat o braku dostępności pokazuje .stylove-stock-note wyżej. */
.woocommerce-variation {
	display: none !important;
}

/* --- Ilość + dodaj do koszyka --- */

.single_variation_wrap {
	margin-top: 8px;
}

form.cart {
	margin-bottom: 20px;
}

.quantity {
	display: flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 2px;
	overflow: hidden;
	width: fit-content;
}

.quantity .qty-step {
	width: 40px;
	height: 44px;
	background: #fff;
	border: none;
	font-size: 16px;
	color: var(--ink-soft);
	transition: background 0.15s, color 0.15s;
}

.quantity .qty-step:hover {
	background: var(--sage-pale);
	color: var(--sage-deep);
}

.quantity input.qty {
	width: 44px;
	height: 44px;
	text-align: center;
	border: none;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
	font-family: var(--font-mono);
	font-size: 14px;
	-moz-appearance: textfield;
}

.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce-variation-add-to-cart,
.buy-row {
	display: flex;
	gap: 14px;
	align-items: stretch;
	margin: 30px 0 18px;
}

/* WooCommerce ma ".button.alt{background:#7f54b3}" i wtyczka Modern
   Cart Starter dokłada "form.cart .single_add_to_cart_button{text-
   transform:capitalize;...}" — obie z wyższym specificity niż samo
   ".single_add_to_cart_button", stąd fioletowy, "Kapitalizowany"
   przycisk zamiast marki. Dopasowujemy pełną, realną listą klas. */
.product-summary-col form.cart .single_add_to_cart_button.button.alt {
	flex: 1;
	background: var(--sage-deep);
	color: #fff;
	border: none;
	border-radius: 2px;
	font-size: 14.5px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0.02em;
	padding: 0 24px;
	min-height: 44px;
	transition: background 0.15s;
}

.product-summary-col form.cart .single_add_to_cart_button.button.alt:hover {
	background: var(--ink);
}

.product-summary-col form.cart .single_add_to_cart_button.button.alt.disabled {
	background: var(--line);
	color: var(--ink-soft);
	cursor: not-allowed;
}

.woocommerce-variation-add-to-cart.woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button.button.alt {
	background: var(--line);
	color: var(--ink-soft);
}

/* --- Pasek zaufania pod formularzem zakupu --- */

.trust-mini {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid var(--line);
	padding-top: 20px;
}

.trust-mini .row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--ink-soft);
}

.trust-mini svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	stroke: var(--sage-deep);
}

/* --- Zakładki jako akordeon --- */

.woocommerce-tabs.accordion-tabs {
	max-width: 820px;
}

.woocommerce-tabs.accordion-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs.accordion-tabs .accordion-item {
	border-bottom: 1px solid var(--line);
}

.woocommerce-tabs.accordion-tabs .accordion-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	color: var(--ink);
}

.woocommerce-tabs.accordion-tabs .accordion-head h3 {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
}

.woocommerce-tabs.accordion-tabs .plus {
	position: relative;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.woocommerce-tabs.accordion-tabs .plus::before,
.woocommerce-tabs.accordion-tabs .plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ink);
	transform: translate(-50%, -50%);
}

.woocommerce-tabs.accordion-tabs .plus::before {
	width: 14px;
	height: 1.5px;
}

.woocommerce-tabs.accordion-tabs .plus::after {
	width: 1.5px;
	height: 14px;
	transition: opacity 0.15s;
}

.woocommerce-tabs.accordion-tabs .accordion-item.active .plus::after {
	opacity: 0;
}

/* scroll-margin-top — bez tego "Zobacz porównanie" (assets/js/main.js,
   .stylove-open-finish-tab) i każdy inny scrollIntoView()/#hash do panelu
   zakładki chowały górę panelu POD stałym headerem (.site-header,
   position: fixed, wysokość --header-h) — wizualnie wyglądało to jak
   przewinięcie o cały panel (albo więcej) za daleko, aż do kolejnej
   sekcji strony ("Podobne produkty"), bo to co realnie było widoczne pod
   headerem to już NASTĘPNY element. Ta sama wartość co próg innych
   elementów sticky w tym pliku (--header-h + 24px) i ten sam wzorzec
   przesunięcia o adminbar WP co .site-header (patrz "body.admin-bar
   .site-header" wyżej). */
.woocommerce-tabs.accordion-tabs .accordion-body {
	padding: 0 0 22px;
	font-size: 14px;
	color: var(--ink-soft);
	max-width: 640px;
	scroll-margin-top: calc(var(--header-h) + 24px);
}

body.admin-bar .woocommerce-tabs.accordion-tabs .accordion-body {
	scroll-margin-top: calc(var(--header-h) + 24px + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .woocommerce-tabs.accordion-tabs .accordion-body {
		scroll-margin-top: calc(var(--header-h) + 24px + 46px);
	}
}

.woocommerce-tabs.accordion-tabs .accordion-body p {
	margin-bottom: 12px;
}

.woocommerce-tabs.accordion-tabs .accordion-body ul,
.woocommerce-tabs.accordion-tabs .accordion-body ol {
	padding-left: 18px;
	margin: 8px 0;
}

.woocommerce-tabs.accordion-tabs .accordion-body li {
	margin-bottom: 6px;
}

.woocommerce-tabs.accordion-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.woocommerce-tabs.accordion-tabs table.shop_attributes th,
.woocommerce-tabs.accordion-tabs table.shop_attributes td {
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
}

.woocommerce-tabs.accordion-tabs table.shop_attributes th {
	width: 220px;
	font-weight: 600;
	color: var(--ink);
}

/* --- Produkty powiązane --- */

.related.products .block-head {
	margin-bottom: 40px;
}

@media (max-width: 980px) {
	.product-single-grid {
		grid-template-columns: 1fr;
	}

	.product-gallery-sticky {
		position: relative;
		top: 0;
	}

	.gallery-thumbs {
		grid-template-columns: repeat(4, 1fr);
	}

	.width-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.option-group--edge .edge-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.prod-grid {
		grid-template-columns: 1fr;
	}

	.width-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.color-grid {
		gap: 18px;
	}

	.buy-row {
		margin: 24px 0 16px;
	}

	.product-summary-col form.cart .single_add_to_cart_button.button.alt {
		min-height: 48px;
	}
}

@media (max-width: 420px) {
	.option-group--edge .edge-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Dostępność — widoczny focus przy nawigacji klawiaturą.
   Sitewide, bo :focus-visible na .btn/linkach nigdzie wcześniej nie było
   zdefiniowane (żadna reguła go nie nadpisuje) — czysto addytywne,
   bez wpływu na wygląd dla myszki/dotyku.

   UWAGA: był tu też sitewide blok "@media (prefers-reduced-motion: reduce)"
   zerujący transition-duration na "*" — wycofany, bo gasił też transition
   na .edge-anim .rod/.zigzag (rysowanie patyczka/zygzaka na kafelkach
   wykończenia, patrz niżej ok. linii 2004), czyli realnie POPSUŁ tę
   animację u każdego, kto ma "ogranicz ruch" włączone w systemie —
   za duży promień rażenia jak na potrzeby jednej strony Kontakt.
   Redukcja ruchu dla nowych elementów Kontaktu (jeśli w ogóle potrzebna)
   powinna być punktowa na konkretnych klasach, nie globalna na "*".
   ========================================================================== */

:focus-visible {
	outline: 2px solid var(--sage-deep);
	outline-offset: 2px;
}

/* ==========================================================================
   Strona Kontakt (page-contact.php)
   ========================================================================== */

/* --- Otwarcie strony: lekkie (nie pełny .hero z homepage'a), ale z
   własnym charakterem zamiast 1:1 kopii .shop-header z archiwum sklepu.
   Motyw po prawej to większa, panelowa wersja sygnaturowego wzoru
   koronki (.lace-divider) marki — krzyżujące się po skosie linie, jak
   ażurowa krata okienna. Maska radialna rozmywa wzór przy krawędziach
   panelu, żeby nie wyglądał jak wycięty kawałek tekstury. Czysto
   dekoracyjne (aria-hidden), zero nowych plików graficznych. --- */

.kontakt-hero {
	padding: 48px 0 40px;
	border-bottom: 1px solid var(--line);
}

.kontakt-hero-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
	align-items: center;
}

.kontakt-hero-copy h1 {
	font-size: 40px;
	margin: 12px 0 14px;
}

.kontakt-lead {
	max-width: 560px;
	color: var(--ink-soft);
	font-size: 15.5px;
	margin: 4px 0 0;
}

.kontakt-hero-motif {
	position: relative;
	height: 200px;
	border-radius: 4px;
	background: linear-gradient(160deg, var(--sage-pale), var(--bg-alt));
	overflow: hidden;
}

.kontakt-hero-motif::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(45deg, transparent 47%, var(--sage) 47%, var(--sage) 53%, transparent 53%),
		linear-gradient(-45deg, transparent 47%, var(--sage) 47%, var(--sage) 53%, transparent 53%);
	background-size: 48px 48px;
	opacity: 0.45;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 42%, transparent 82%);
	mask-image: radial-gradient(ellipse at center, #000 42%, transparent 82%);
}

/* "Zanim napiszesz" reużywa .block/.block-head/.explain-grid ze strony
   głównej bez zmian — tylko odstęp od nagłówka strony, bo tu nie ma
   wartości pośredniej (value-strip), która normalnie go daje. */
.kontakt-intro {
	padding-top: 56px;
}

/* --- Dane kontaktowe + formularz, układ dwukolumnowy --- */

.kontakt-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 64px;
	align-items: start;
}

.kontakt-info h2 {
	font-size: 26px;
	margin: 10px 0 20px;
}

.kontakt-quick-actions {
	display: none;
	gap: 12px;
	margin: 0 0 28px;
}

.kontakt-details {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kontakt-details li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}

.kontakt-details li:first-child {
	padding-top: 0;
}

.kontakt-details-label {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.kontakt-details a {
	font-size: 15px;
	font-weight: 600;
}

.kontakt-details a:hover {
	color: var(--ink);
}

.kontakt-nip {
	font-size: 13px;
	color: var(--ink-soft);
	font-weight: 400;
}

.kontakt-placeholder {
	display: inline-block;
	font-size: 12.5px;
	font-style: italic;
	color: var(--ink-soft);
	border: 1px dashed var(--line);
	border-radius: 2px;
	padding: 3px 8px;
}

.kontakt-social {
	display: flex;
	gap: 18px;
	margin-top: 22px;
}

.kontakt-social a {
	font-size: 13.5px;
	font-weight: 600;
}

.kontakt-social a:hover {
	color: var(--ink);
}

/* --- Formularz --- */

.form-notice {
	border-radius: 3px;
	padding: 14px 18px;
	font-size: 14px;
	margin-bottom: 24px;
}

.form-notice--success {
	background: var(--sage-pale);
	color: var(--sage-deep);
	border: 1px solid var(--sage);
}

.form-notice--error {
	background: #FBEDEA;
	color: #9A3B2C;
	border: 1px solid #E3B5AA;
}

.form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-row {
	margin-bottom: 20px;
}

.form-row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 8px;
}

.form-hint {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 0 0 20px;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.form-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

.req {
	color: var(--sage-deep);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
	font-family: var(--font-body);
	font-size: 14.5px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 12px 14px;
	width: 100%;
	transition: border-color 0.15s;
}

.form-field input[type="text"]:hover,
.form-field input[type="email"]:hover,
.form-field input[type="tel"]:hover,
.form-field select:hover,
.form-field textarea:hover {
	border-color: var(--sage);
}

.form-field textarea {
	resize: vertical;
	min-height: 120px;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
	border-color: #C0503C;
}

.field-error {
	font-size: 12.5px;
	color: #9A3B2C;
}

.form-field--checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink-soft);
	line-height: 1.5;
}

.form-field--checkbox input[type="checkbox"] {
	margin-top: 3px;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--sage-deep);
}

.form-field--checkbox a {
	color: var(--sage-deep);
	border-bottom: 1px solid var(--line);
}

.form-field--checkbox a:hover {
	border-color: var(--sage-deep);
}

.kontakt-form .btn {
	margin-top: 4px;
	width: 100%;
	justify-content: center;
	border: 0;
	cursor: pointer;
	font-family: inherit;
}

/* --- FAQ, akordeon natywny na <details>/<summary> — działa bez JS i
   bez zależności od skryptu zakładek WooCommerce (ten na karcie
   produktu jest spięty z single-product.js, niedostępnym na Stronach). --- */

.faq-list {
	max-width: 760px;
	margin: 0 auto;
}

.faq-item {
	border-bottom: 1px solid var(--line);
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 500;
	color: var(--ink);
	list-style: none;
}

/* Chowamy domyślny trójkąt <summary> w obu silnikach renderowania. */
.faq-question::-webkit-details-marker {
	display: none;
}

.faq-question::marker {
	content: '';
}

.faq-plus {
	position: relative;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.faq-plus::before,
.faq-plus::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ink);
	transform: translate(-50%, -50%);
}

.faq-plus::before {
	width: 13px;
	height: 1.5px;
}

.faq-plus::after {
	width: 1.5px;
	height: 13px;
	transition: opacity 0.15s;
}

.faq-item[open] .faq-plus::after {
	opacity: 0;
}

.faq-answer {
	padding: 0 0 22px;
	max-width: 640px;
}

.faq-answer p {
	font-size: 14.5px;
	color: var(--ink-soft);
	margin: 0;
}

.faq-answer a {
	color: var(--sage-deep);
	text-decoration: underline;
}

@media (max-width: 980px) {
	.kontakt-hero-grid {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.kontakt-hero-motif {
		order: -1;
		height: 120px;
	}

	.kontakt-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (max-width: 620px) {
	.kontakt-hero-motif {
		display: none;
	}

	.kontakt-quick-actions {
		display: flex;
	}

	.kontakt-quick-actions .btn {
		flex: 1 1 auto;
		justify-content: center;
		min-height: 48px;
	}

	.form-row--split {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ==========================================================================
   Komunikaty błędów WooCommerce (.woocommerce-error) — brakowało tej
   reguły; .woocommerce-message/.woocommerce-info były już stylowane
   (patrz wyżej, ok. linii 1522), błędy (np. brak towaru, zły kupon)
   spadały na domyślny, niestylowany wygląd wtyczki.
   ========================================================================== */

.woocommerce-error {
	font-size: 14px;
	color: #7A2E20;
	background: #FBEAE6;
	border: 1px solid rgba(192, 80, 60, 0.3);
	border-radius: 3px;
	padding: 16px 20px;
	margin: 0 0 32px;
	list-style: none;
}

.woocommerce-error a {
	color: #C0503C;
	font-weight: 600;
}

/* ==========================================================================
   WooCommerce — Koszyk (page-cart.php, woocommerce/cart/*.php)
   ========================================================================== */

.cart-page-head {
	padding: 28px 0 4px;
}

.cart-page-title {
	font-size: 32px;
	margin: 8px 0 0;
}

.cart-page-grid {
	/* position: relative jest tu konieczne, nie tylko kosmetyczne:
	   #stylove-cart-form ma "display: contents" (patrz niżej) i przez to
	   nie generuje żadnego pudełka. Rdzeniowy blockUI (loading overlay
	   przy AJAX-owej aktualizacji koszyka) dokleja swoją nakładkę
	   position:absolute BEZPOŚREDNIO do blokowanego elementu — czyli do
	   formularza. Bez position:relative na najbliższym przodku, który
	   faktycznie generuje pudełko, ta nakładka "position:absolute" traci
	   właściwy punkt odniesienia i rozmiar liczy względem całego
	   dokumentu/viewportu zamiast realnej wysokości koszyka — stąd biała
	   maska nie zakrywała treści po przewinięciu niżej.
	*/
	position: relative;
	display: grid;
	grid-template-columns: 1fr 380px;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"items summary-actions"
		"items summary-panel";
	column-gap: 56px;
	row-gap: 0;
	align-items: start;
	padding: 32px 0 76px;
}

/* <form id="stylove-cart-form"> nie ma własnego pudełka — jego
   bezpośrednie dzieci (lista produktów, blok kuponu) są samodzielnymi
   elementami .cart-page-grid, rozstawionymi przez grid-area, mimo że
   nadal są prawdziwymi potomkami formularza (patrz komentarz w
   cart.php: to warunek poprawnego działania wc-cart.js). */
#stylove-cart-form {
	display: contents;
}

/* --- Lista pozycji --- */

.cart-items-list {
	grid-area: items;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 0 28px;
	list-style: none;
	padding: 0;
}

.cart-item-card {
	display: grid;
	grid-template-columns: 200px 1fr auto;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}

.cart-item-card:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cart-item-media {
	position: relative;
	aspect-ratio: 1 / 1.05;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
	border-radius: 3px;
	overflow: hidden;
}

.cart-item-media img {
	width: 100%;
	height: 100%;
	/* "contain" — te same wzory co w .prod-media/ul.products, nie mogą
	   tracić fragmentu przez przycięcie "cover". */
	object-fit: contain;
}

.cart-item-body {
	min-width: 0;
}

.cart-item-name a {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 500;
	color: var(--ink);
	line-height: 1.3;
}

.cart-item-name a:hover {
	color: var(--sage-deep);
}

/* dl.variation — znacznik z rdzeniowego wc_get_formatted_cart_item_data(),
   te same dane co za "View details" — u nas zawsze widoczne, nie zwinięte.
   Zawijanie wiersza dzieje się na .cart-attr-pair (nadpisanie
   woocommerce/cart/cart-item-data.php owija każdą parę dt+dd w jeden
   <div>) — dzięki temu etykieta i wartość zawsze łamią się razem,
   nigdy w połowie pary. */
.cart-item-attrs dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 16px;
	margin: 8px 0 0;
	font-size: 12.5px;
}

.cart-item-attrs dl.variation .cart-attr-pair {
	display: inline-flex;
	gap: 4px;
}

.cart-item-attrs dl.variation dt,
.cart-item-attrs dl.variation dd {
	margin: 0;
	display: inline;
}

.cart-item-attrs dl.variation dt {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--ink-soft);
}

.cart-item-attrs dl.variation dd p {
	display: inline;
	margin: 0;
	color: var(--ink);
	font-weight: 600;
}

.backorder_notification {
	font-size: 12.5px;
	color: var(--brass);
	margin: 8px 0 0;
}

.cart-item-row {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 16px;
}

.cart-item-label {
	display: block;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 6px;
}

.cart-item-price,
.cart-item-subtotal {
	font-family: var(--font-display);
	font-size: 15px;
	color: var(--ink);
	white-space: nowrap;
}

.cart-item-subtotal {
	margin-left: auto;
	font-weight: 600;
}

.cart-item-remove {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.cart-item-remove .remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 18px;
	line-height: 1;
	transition: all 0.15s;
}

.cart-item-remove .remove:hover,
.cart-item-remove .remove:focus-visible {
	border-color: #C0503C;
	color: #C0503C;
	background: rgba(192, 80, 60, 0.08);
}

/* --- Kupon + aktualizacja koszyka — wizualnie "wtopione" w podsumowanie
   zamówienia (na życzenie klienta), choć to osobny element gridu (patrz
   komentarz przy #stylove-cart-form) niż samo pudełko .cart_totals pod
   spodem. Ten sam kolor tła i promień zaokrąglenia u góry + brak
   odstępu w wierszu (row-gap: 0 na .cart-page-grid) dają złudzenie
   jednej, spójnej karty. */
#stylove-cart-summary-actions {
	grid-area: summary-actions;
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	padding: 30px 30px 22px;
}

.cart-coupon-toggle summary {
	cursor: pointer;
	font-size: 13.5px;
	color: var(--ink-soft);
	list-style: none;
}

.cart-coupon-toggle summary::-webkit-details-marker {
	display: none;
}

.cart-coupon-toggle summary:hover {
	color: var(--sage-deep);
}

.cart-coupon-toggle[open] summary {
	color: var(--sage-deep);
	margin-bottom: 14px;
}

.cart-coupon-fields {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.cart-coupon-fields input#coupon_code {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 11px 14px;
	width: 100%;
	transition: border-color 0.15s;
}

.cart-coupon-fields input#coupon_code:hover {
	border-color: var(--sage);
}

.cart-coupon-fields input#coupon_code.has-error {
	border-color: #C0503C;
}

.cart-coupon-fields .coupon-error-notice {
	font-size: 12.5px;
	color: #C0503C;
	margin: 0;
}

.cart-coupon-fields .btn-small {
	width: 100%;
}

.cart-update-btn {
	width: 100%;
	justify-content: center;
	margin-top: 16px;
}

/* Klasę dodaje wyłącznie JS (assets/js/main.js), po skutecznym
   uruchomieniu automatycznej aktualizacji ilości przy zmianie +/-. Bez
   JavaScriptu ten przycisk zostaje normalnie widoczny i klikalny —
   pełny, działający fallback. */
.cart-update-btn.is-auto-updating {
	display: none;
}

/* --- Podsumowanie (sticky na desktopie) --- */

.cart-page-summary {
	grid-area: summary-panel;
	align-self: start;
}

/* Górna połowa "karty" jest #stylove-cart-summary-actions (kupon,
   nagłówek) wyżej — brak górnego obramowania/promienia i row-gap:0 na
   .cart-page-grid dają razem wrażenie jednej, spójnej karty złożonej z
   dwóch elementów gridu. */
.cart_totals.cart-summary-panel {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	background: var(--bg-alt);
	border: 1px solid var(--line);
	border-top: none;
	border-radius: 0 0 4px 4px;
	padding: 24px 30px 30px;
}

.cart-summary-title {
	font-size: 18px;
	margin: 0 0 20px;
}

.cart-free-shipping-notice {
	font-size: 12.5px;
	margin-bottom: 20px;
}

.cart-free-shipping-notice p {
	margin: 0 0 8px;
}

.cart-free-shipping-notice.is-progress {
	color: var(--ink-soft);
}

.cart-free-shipping-notice.is-met {
	color: var(--sage-deep);
	font-weight: 600;
}

.cart-free-shipping-bar {
	height: 4px;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
}

.cart-free-shipping-bar span {
	display: block;
	height: 100%;
	background: var(--sage-deep);
	transition: width 0.3s ease;
}

.cart-summary-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 22px;
}

.cart-summary-table tr {
	border-bottom: 1px solid var(--line);
}

.cart-summary-table tr:last-child {
	border-bottom: none;
}

.cart-summary-table th,
.cart-summary-table td {
	text-align: left;
	padding: 11px 0;
	font-weight: 400;
	font-size: 13.5px;
	color: var(--ink-soft);
}

.cart-summary-table td {
	text-align: right;
	color: var(--ink);
}

.cart-summary-table tr.order-total th,
.cart-summary-table tr.order-total td {
	font-family: var(--font-display);
	font-size: 21px;
	font-weight: 500;
	color: var(--ink);
	border-top: 1px solid var(--line);
	padding-top: 18px;
}

.cart-checkout-btn {
	width: 100%;
	justify-content: center;
	min-height: 50px;
	font-size: 15px;
}

/* --- Cross-sell w podsumowaniu (woocommerce_cart_collaterals) --- */

.cart-page-summary .cross-sells {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
}

.cart-page-summary .cross-sells h2 {
	font-size: 15px;
	margin: 0 0 14px;
}

.cart-page-summary .cross-sells ul.products {
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0;
}

/* --- Koszyk pusty --- */

.cart-empty-state {
	max-width: 440px;
	margin: 0 auto;
	padding: 56px 20px 76px;
	text-align: center;
}

.cart-empty-icon {
	width: 46px;
	height: 46px;
	margin: 0 auto 20px;
	stroke: var(--sage-deep);
	fill: none;
	stroke-width: 1.4;
}

.cart-empty-state .wc-empty-cart-message {
	margin: 0 0 24px;
}

.cart-empty-actions {
	margin: 0;
}

@media (max-width: 980px) {
	.cart-page-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"items"
			"summary-actions"
			"summary-panel";
		row-gap: 0;
		padding-top: 20px;
	}

	.cart-items-list {
		margin-bottom: 40px;
	}

	.cart_totals.cart-summary-panel {
		position: relative;
		top: 0;
	}
}

@media (max-width: 620px) {
	.cart-page-title {
		font-size: 26px;
	}

	.cart-item-card {
		grid-template-columns: 1fr;
		position: relative;
	}

	.cart-item-media {
		aspect-ratio: 1 / 0.9;
	}

	.cart-item-remove {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	.cart-item-remove .remove {
		background: rgba(255, 255, 255, 0.92);
		box-shadow: 0 1px 5px rgba(35, 42, 32, 0.15);
	}

	.cart-item-row {
		justify-content: space-between;
	}

	.cart-item-subtotal {
		margin-left: 0;
	}

	.cart-update-btn {
		min-height: 48px;
	}
}

/* ==========================================================================
   Mini-koszyk (wtyczka Modern Cart Starter, plugins/modern-cart) —
   przestylowanie pod design system marki. Wtyczka udostępnia własne
   zmienne CSS na :root (kolory/rozmiary z jej ustawień w adminie);
   nadpisujemy je bliżej — na #moderncart-slide-out-modal i
   #moderncart-floating-cart — żeby zawsze wygrywały z tym, co wtyczka
   dopisuje inline w <head> (niezależnie od kolejności enqueue). Reszta
   (borders, tła powiadomień) nie ma zmiennych w ogóle, więc nadpisujemy
   konkretne selektory.
   ========================================================================== */

#moderncart-slide-out-modal,
#moderncart-floating-cart {
	--moderncart-primary-color: var(--sage-deep);
	--moderncart-heading-color: var(--ink);
	--moderncart-body-color: var(--ink-soft);
	--moderncart-header-font-color: var(--ink);
	--moderncart-header-background-color: var(--bg);
	--moderncart-background-color: var(--bg);
	--moderncart-button-font-color: #fff;
	--moderncart-quantity-font-color: var(--ink);
	--moderncart-quantity-background-color: var(--sage-pale);
	--moderncart-highlight-color: var(--sage-deep);
	--moderncart-floating-icon-bg-color: var(--sage-deep);
	--moderncart-floating-icon-color: #fff;
	--moderncart-floating-count-bg-color: var(--sage-deep);
	--moderncart-floating-count-text-color: #fff;
}

/* Koszyk jest już w pełni widoczny na stronie /koszyk — pływający
   przycisk Modern Cart byłby tam zbędny/dublujący. */
.woocommerce-cart #moderncart-floating-cart {
	display: none;
}

#moderncart-slide-out .moderncart-slide-out-header,
#moderncart-slide-out .moderncart-slide-out-recommendations,
#moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total,
#moderncart-slide-out .moderncart-cart-item-container {
	border-color: var(--line);
}

#moderncart-slide-out .moderncart-slide-out-footer {
	box-shadow: 0 -4px 18px rgba(35, 42, 32, 0.1);
}

#moderncart-slide-out .moderncart-slide-out-header-title span {
	font-family: var(--font-display);
	font-weight: 500;
}

/* Duże, czytelne zdjęcie wzoru zamiast domyślnych 75-90px — rozmiar
   samego pliku obrazka podbija już nadpisanie szablonu
   modern-cart/cart/cart-item-style1.php ('woocommerce_single' zamiast
   'thumbnail'), tu tylko powiększamy pudełko miniatury w drawerze. */
.moderncart-cart-item-image,
.moderncart-image-size-small .moderncart-cart-item-image,
.moderncart-image-size-medium .moderncart-cart-item-image,
.moderncart-image-size-large .moderncart-cart-item-image {
	width: 112px;
	min-width: 112px;
	border-radius: 3px;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
}

.moderncart-cart-item-image img {
	background-color: transparent;
}

.moderncart-cart-item-product-link,
.moderncart-cart-item-product-link a {
	font-family: var(--font-display);
	color: var(--ink);
}

/* Atrybuty wariantu (szerokość, wykończenie...) — te same znaczniki
   dl.variation (wc_get_formatted_cart_item_data()) co na stronie
   koszyka, wypisywane bezpośrednio w nadpisaniu szablonu
   modern-cart/cart/cart-item-style1.php. W wąskim mini-koszyku jeden
   pod drugim czyta się lepiej niż w rządku — dt/dd zostają "inline"
   (żeby dt+dd trzymały się jednej linii), a dd::after wymusza złamanie
   linii PO każdej parze, bez zmiany stałego markupu z rdzenia.  */
.moderncart-cart-item-attrs dl.variation {
	margin: 6px 0 0;
	font-size: 12px;
}

.moderncart-cart-item-attrs dl.variation dt,
.moderncart-cart-item-attrs dl.variation dd {
	margin: 0;
	display: inline;
}

.moderncart-cart-item-attrs dl.variation dt {
	font-family: var(--font-mono);
	font-weight: 500;
	color: var(--ink-soft);
}

.moderncart-cart-item-attrs dl.variation dd p {
	display: inline;
	margin: 0 0 0 4px;
	color: var(--ink);
}

.moderncart-cart-item-attrs dl.variation dd::after {
	content: "";
	display: block;
	margin-bottom: 3px;
}

.moderncart-cart-item-actions-remove svg {
	fill: var(--ink-soft);
}

.moderncart-cart-item-actions-remove:hover svg {
	fill: #C0503C;
}

.moderncart-notification.moderncart-is-success.moderncart-is-light {
	background: var(--sage-pale);
	color: var(--sage-deep);
}

.moderncart-notification.moderncart-is-error.moderncart-is-light {
	background: #FBEAE6;
	color: #7A2E20;
}

#moderncart-slide-out .moderncart-slide-out-footer .moderncart-cart-total a.checkout-button {
	border-radius: 2px;
	font-family: var(--font-body);
	font-weight: 600;
}

#moderncart-slide-out .moderncart-have-coupon-code-area .moderncart-have-coupon-code {
	font-family: var(--font-body);
	color: var(--ink-soft);
}

#moderncart-slide-out .moderncart-slide-out-coupon-input input {
	border-radius: 2px;
	font-family: var(--font-body);
}

#moderncart-slide-out .moderncart-slide-out-coupon-input button {
	border-radius: 2px;
}

/* ==========================================================================
   Strony dokumentów prawnych — Regulamin, Polityka prywatności
   (page-regulamin-sklepu-internetowego.php, page-polityka-prywatnosci.php)
   ========================================================================== */

.legal-header {
	padding: 18px 0 30px;
	border-bottom: 1px solid var(--line);
}

.legal-header .eyebrow {
	display: block;
	margin: 10px 0 6px;
}

.legal-header h1 {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 500;
	margin: 0;
}

.legal-page {
	padding: 56px 0 88px;
}

.legal-content {
	max-width: 760px;
	margin: 0 auto;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--ink);
}

.legal-content h2,
.legal-content h3,
.legal-content h4 {
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 20px;
	margin: 2.2em 0 0.75em;
	padding-top: 0.6em;
	border-top: 1px solid var(--line);
}

.legal-content > h2:first-of-type,
.legal-content > h3:first-of-type,
.legal-content > h4:first-of-type {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}

.legal-content p {
	margin: 0 0 1.1em;
}

.legal-content ol,
.legal-content ul {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.legal-content li {
	margin-bottom: 0.65em;
}

.legal-content li:last-child {
	margin-bottom: 0;
}

.legal-content a {
	color: var(--sage-deep);
	border-bottom: 1px solid var(--line);
}

.legal-content a:hover {
	border-color: var(--sage-deep);
}

.legal-content strong {
	color: var(--ink);
}

@media (max-width: 620px) {
	.legal-header h1 {
		font-size: 27px;
	}

	.legal-content {
		font-size: 14.5px;
	}
}

/* ==========================================================================
   Strona „O nas” (page-about.php)
   ========================================================================== */

/* Hero — sygnaturowy motyw strony zamiast zdjęcia: ta sama technika
   skrzyżowanych linii co .lace-divider, tylko w większej skali i
   zamknięta w okręgu, żeby czytać się jak wycięta laserem rozeta.
   Osadzona w istniejącym .hero-art (ten sam kształt/cień co na stronie
   głównej), więc struktura hero zostaje w 100% reużyta. */
.onas-hero-motif {
	position: relative;
}

.onas-hero-motif::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	background-image:
		repeating-linear-gradient(45deg, transparent 0 9px, var(--line) 9px 10px),
		repeating-linear-gradient(-45deg, transparent 0 9px, var(--line) 9px 10px);
	border: 1px solid var(--brass);
	box-shadow: 0 20px 40px rgba(35, 42, 32, 0.12);
}

.onas-hero-motif::after {
	content: "";
	position: absolute;
	inset: 27%;
	border-radius: 50%;
	border: 1px solid var(--brass);
	opacity: 0.55;
}

/* Historia — wąski słupek tekstu, spokojne akapity */
.onas-historia {
	max-width: 680px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink);
}

.onas-historia p {
	margin: 0 0 1.2em;
}

.onas-historia p:last-child {
	margin-bottom: 0;
}

/* "Co nas wyróżnia" — explain-grid ze strony głównej, tylko w 4
   kolumnach i bez linkowania (karty informacyjne, nie nawigacyjne).
   Grid domyślnie rozciąga elementy do wysokości najwyższego w wierszu —
   flex w środku karty dba tylko o równe odstępy między tag/h3/p. */
.explain-grid--4 {
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
}

.explain-grid--4 .explain-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 32px 26px;
}

.explain-grid--4 .explain-card .tag {
	margin-bottom: 0;
}

.explain-grid--4 .explain-card h3 {
	margin-bottom: 0;
}

/* Karty informacyjne, nie linki — bez uniesienia (to sugerowałoby
   klikalność, której nie ma). Delikatne wybarwienie obramowania i
   cienia tylko na urządzeniach z realnym hoverem (mysz), żeby na
   dotyku nic nie zostawało "przyklejone" po tapnięciu. */
.explain-grid--4 .explain-card:hover {
	transform: none;
}

@media (hover: hover) and (pointer: fine) {
	.explain-grid--4 .explain-card:hover {
		border-color: var(--sage-deep);
		box-shadow: 0 6px 16px rgba(35, 42, 32, 0.06);
	}
}

/* Proces powstawania — numerowane kroki wewnątrz .trust-copy (ten sam
   dwukolumnowy układ kopia+zdjęcie co w sekcji "O naszej pracowni" na
   stronie głównej). Numeracja uzasadniona: to realna, następująca po
   sobie kolejność (projekt → cięcie → wysyłka), nie ozdobnik. */
.onas-steps {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.onas-steps li {
	display: flex;
	gap: 14px;
	align-items: baseline;
}

.onas-steps-num {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--brass);
	flex-shrink: 0;
	min-width: 22px;
}

.onas-steps li strong {
	display: block;
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 2px;
}

.onas-steps li span:last-child {
	font-size: 13.5px;
	color: var(--ink-soft);
}

/* Pomoc w wyborze — wyśrodkowany blok tekstu, ten sam rytm co .block-head */
.onas-help {
	text-align: center;
	max-width: 620px;
	margin: 0 auto;
}

.onas-help h2 {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	margin: 14px 0 14px;
}

.onas-help p {
	color: var(--ink-soft);
	font-size: 15px;
	margin: 0 0 28px;
}

/* Fakty — realne, sprawdzalne liczby (nie deklarowane statystyki);
   ten sam pasek co .value-strip, ale z liczbami zamiast ikon */
.fact-strip {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--sage-pale);
}

.fact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 28px 0;
}

.fact-item {
	text-align: center;
	padding: 0 20px;
	border-left: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fact-item:first-child {
	border-left: none;
}

.fact-value {
	font-family: var(--font-mono);
	font-size: 26px;
	font-weight: 500;
	color: var(--sage-deep);
}

.fact-label {
	font-size: 12px;
	color: var(--ink-soft);
}

/* CTA końcowe */
.onas-cta {
	text-align: center;
}

.onas-cta h2 {
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 500;
	margin: 0 0 24px;
}

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

	.fact-grid {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 24px;
	}

	.fact-item:nth-child(3) {
		border-left: none;
	}
}

@media (max-width: 620px) {
	.onas-historia {
		font-size: 14.5px;
	}

	.explain-grid--4 {
		grid-template-columns: 1fr;
	}

	.fact-grid {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	.fact-item {
		border-left: none;
		border-top: 1px solid var(--line);
		padding: 16px 0 0;
	}

	.fact-item:first-child {
		border-top: none;
		padding-top: 0;
	}

	.onas-cta h2 {
		font-size: 25px;
	}
}

/* ==========================================================================
   Checkout (page-platnosc.php, header-checkout.php, footer-checkout.php,
   woocommerce/checkout/*.php) + pasek postępu współdzielony z koszykiem
   ========================================================================== */

/* --- Pasek postępu (koszyk + checkout) --- */

.checkout-flow {
	margin-bottom: 20px;
}

.checkout-flow-list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.checkout-flow li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	white-space: nowrap;
}

.checkout-flow li:not(:last-child)::after {
	content: "";
	width: 16px;
	height: 1px;
	background: var(--line);
	margin-left: 8px;
}

.checkout-flow-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--line);
	font-size: 10px;
}

.checkout-flow li.is-current {
	color: var(--sage-deep);
}

.checkout-flow li.is-current .checkout-flow-num {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: #fff;
}

.checkout-flow li.is-done .checkout-flow-num {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

/* Skondensowana wersja paska postępu — patrz functions.php
   (stylove_azury_checkout_progress): pełna lista kroków obok siebie
   (.checkout-flow-list) nie mieści się już na wąskim ekranie
   ("Dostawa i płatność" jest zbyt długie), więc zamiast pozwolić jej
   zawinąć się na drugą linię (wyglądało to na rozjechane — patrz zgłoszenie),
   poniżej 620px przełączamy się na jednoliniowe "Krok X z Y" + cienki
   pasek postępu. Dokładnie ta sama informacja, zero ryzyka złego zawinięcia. */
.checkout-flow-compact {
	display: none;
}

@media (max-width: 620px) {
	.checkout-flow-list {
		display: none;
	}

	.checkout-flow-compact {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0;
	}

	.checkout-flow-compact-text {
		display: flex;
		align-items: baseline;
		gap: 8px;
		font-size: 12.5px;
	}

	.checkout-flow-compact-step {
		font-family: var(--font-mono);
		font-size: 11px;
		letter-spacing: 0.04em;
		color: var(--ink-soft);
		white-space: nowrap;
	}

	.checkout-flow-compact-label {
		font-weight: 600;
		color: var(--ink);
	}

	.checkout-flow-bar {
		display: block;
		height: 3px;
		border-radius: 2px;
		background: var(--line);
		overflow: hidden;
	}

	.checkout-flow-bar span {
		display: block;
		height: 100%;
		background: var(--sage-deep);
		transition: width 0.3s ease;
	}
}

/* --- Minimalny header/footer checkoutu --- */

.checkout-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
}

.checkout-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink);
}

.checkout-back-link:hover {
	color: var(--sage-deep);
}

body.checkout-minimal {
	background: var(--bg-alt);
}

.checkout-footer {
	background: var(--ink);
	color: rgba(255, 255, 255, 0.7);
	margin-top: 64px;
}

.checkout-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 22px 0;
	font-size: 12.5px;
}

.checkout-footer-legal {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.checkout-footer-links {
	display: flex;
	gap: 18px;
}

.checkout-footer-links a {
	color: rgba(255, 255, 255, 0.7);
}

.checkout-footer-links a:hover {
	color: #fff;
}

/* --- Nagłówek strony checkoutu --- */

.checkout-page-head {
	padding: 24px 0 4px;
}

.checkout-page-title {
	font-size: 30px;
	margin: 8px 0 0;
}

/* --- Układ dwóch kolumn --- */

.checkout-grid {
	/* position: relative — checkout.js WooCommerce blokuje (blockUI)
	   dokładnie ten element podczas AJAX-owej aktualizacji sumy; bez
	   tego nakładka ładowania liczy się względem całego dokumentu
	   zamiast realnej wysokości formularza (ten sam mechanizm co
	   .cart-page-grid opisany wyżej przy koszyku). */
	position: relative;
	display: grid;
	grid-template-columns: 1fr 480px;
	column-gap: 56px;
	align-items: start;
	padding: 8px 0 76px;
}

/* checkout.js (rdzeń WC) przy błędzie walidacji dokleja zbiorczy komunikat
   jako PIERWSZE dziecko .checkout-grid (.woocommerce-NoticeGroup-checkout
   przy pełnym submicie, .woocommerce-NoticeGroup-updateOrderReview przy
   AJAX-owej aktualizacji sumy) — na siatce 2-kolumnowej ten dodatkowy
   element wchodzi w normalny grid-auto-flow i przesuwa .checkout-main/
   .checkout-sidebar do innych komórek, rozjeżdżając cały układ. Komunikat
   przy polu (patrz 1.5 — aria-describedby, czerwony tekst pod każdym
   polem) już wystarcza, więc ten zbiorczy box na górze po prostu chowamy
   zamiast go poprawnie pozycjonować. */
.checkout-grid .woocommerce-NoticeGroup-checkout,
.checkout-grid .woocommerce-NoticeGroup-updateOrderReview {
	display: none;
}

.checkout-main {
	min-width: 0;
}

.checkout-sidebar {
	min-width: 0;
	/* Na .checkout-sidebar, nie na -inner — dzięki temu karta podsumowania
	   i osobna karta zaufaniowa pod nią (patrz .checkout-trust-card niżej)
	   przewijają się razem jako jedna przyklejona jednostka, zamiast tylko
	   pierwsza z nich. */
	position: sticky;
	top: calc(var(--header-h) + 24px);
}

.checkout-sidebar-inner {
	/* Bez max-height/overflow-y — przy dużych koszykach dawało widoczny
	   pasek przewijania wewnątrz sidebaru, co wyglądało nieestetycznie.
	   Zamiast tego lista pozycji sama się ogranicza (patrz
	   .checkout-review-extra-item niżej) — sidebar rzadko robi się na
	   tyle wysoki, żeby potrzebować własnego scrolla. */
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 28px;
}

.checkout-review-extra-item {
	display: none;
}

.checkout-review-table.is-expanded .checkout-review-extra-item {
	display: table-row;
}

.checkout-review-table .checkout-review-toggle-row td {
	padding-top: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
}

.checkout-review-toggle {
	appearance: none;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sage-deep);
	cursor: pointer;
}

.checkout-review-toggle:hover {
	color: var(--ink);
}

/* Zamiast domyślnej, szarej maski blockUI WooCommerce (jQuery .block(),
   wywoływane przez checkout.js na .checkout-grid przy każdej
   aktualizacji sumy i przy finalnym submicie) — neutralizujemy jej
   wygląd (funkcja blokowania kliknięć zostaje bez zmian, tylko wizualnie
   nic nie nakładamy) i pokazujemy własny, subtelny stan:
   ".is-updating" na sidebarze (main.js, na zdarzeniach
   update_checkout/updated_checkout, które WooCommerce i tak już
   wyzwala) i ".processing" na #place_order (klasę dokłada/zdejmuje sam
   rdzeń w checkout.js, nic nowego nie trzeba tu spinać). Żadna z tych
   reguł nie zmienia wymiarów elementów — zero skoków layoutu. */
.checkout-grid .blockUI.blockOverlay {
	background: transparent !important;
	opacity: 0 !important;
}

.checkout-sidebar-inner.is-updating {
	opacity: 0.6;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.woocommerce-checkout.processing #place_order {
	opacity: 0.7;
	pointer-events: none;
	cursor: default;
}

.checkout-summary-toggle {
	display: none;
}

/* Link "Wróć do sklepu" pod paskiem darmowej wysyłki w sidebarze
   checkoutu (patrz functions.php: stylove_azury_checkout_sidebar_extras)
   — na checkoucie nie ma pełnej nawigacji w headerze (header-checkout.php),
   więc to jedyna droga powrotu do dokupienia czegoś. */
.checkout-sidebar-shop-link {
	margin: 0 0 20px;
	font-size: 12.5px;
}

.checkout-sidebar-shop-link a {
	color: var(--ink-soft);
}

.checkout-sidebar-shop-link a:hover {
	color: var(--sage-deep);
}

/* Jedyny ślad kuponu na checkoucie (patrz functions.php:
   stylove_azury_checkout_sidebar_extras) — formularz kuponu zostaje
   tylko na koszyku, to tylko wskazówka + link. */
.checkout-sidebar-coupon-hint {
	margin: 0 0 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-soft);
}

.checkout-sidebar-coupon-hint a {
	color: var(--sage-deep);
	font-weight: 600;
}

/* Osobna karta pod kartą podsumowania (hook
   stylove_azury_checkout_sidebar_after, poza .checkout-sidebar-inner —
   patrz form-checkout.php i functions.php:
   stylove_azury_checkout_sidebar_trust_list) — ikona + pogrubiony tytuł +
   opis na wiersz, zamiast poprzedniej płaskiej listy z checkmarkami
   upchniętej pod tabelą sum w tej samej karcie. */
.checkout-trust-card {
	margin-top: 18px;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 4px 18px;
}

.checkout-trust-item {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.4;
}

.checkout-trust-item:last-child {
	border-bottom: 0;
}

.checkout-trust-item b {
	display: block;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
}

.checkout-trust-item svg {
	flex: none;
	margin-top: 2px;
	color: var(--sage);
}

/* Osobny, w całości JS-owy pasek "kwota + CTA" na dole ekranu (≤620px,
   patrz assets/js/main.js) — pokazuje się dopiero, gdy prawdziwy
   #place_order (teraz w głównym torze formularza, patrz 0.1 w
   functions.php) zjedzie poza widok, żeby nie dublować przycisku na
   ekranie. Bez JS ten element nigdy nie powstaje w DOM. */
.checkout-mobile-cta {
	display: none;
}

/* Billing/shipping jedna pod drugą, nie obok siebie — .col2-set to
   natywna klasa WooCommerce (dwie kolumny w oryginale), tu tylko
   zmieniamy jej grid na jedną kolumnę, żeby uzyskać spokojny,
   pojedynczy tor formularza w .checkout-main. */
.checkout-grid .col2-set {
	display: block;
}

.checkout-grid .col2-set .col-1,
.checkout-grid .col2-set .col-2 {
	width: auto;
	float: none;
}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3,
.checkout-section-heading {
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 500;
	margin: 36px 0 18px;
}

.woocommerce-billing-fields h3 {
	margin-top: 0;
}

/* Ponumerowane nagłówki sekcji checkoutu (1. Kontakt / 2. Adres… / 3.
   Płatność / 4. Podsumowanie i zgody — patrz functions.php i
   woocommerce/checkout/form-billing.php) — to samo kółko-z-numerem co w
   .checkout-flow (ok. linii 4047), tylko trochę większe, bo tu numeruje
   nagłówki h3, nie kroki paska postępu. */
.checkout-section-heading {
	display: flex;
	align-items: center;
	gap: 10px;
}

.checkout-section-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 1px solid var(--line-input);
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink-soft);
}

/* --- Pola formularza (natywne .form-row WooCommerce) ---
   Scoped pod .woocommerce-checkout celowo: strona Kontakt ma już
   niezwiązaną klasę ".form-row" (page-contact.php, ok. linii 2762) —
   bez tego zawężenia reguły by się mieszały. */

.woocommerce-checkout .form-row {
	margin: 0 0 18px;
}

.woocommerce-checkout .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

.woocommerce-checkout .form-row label .required {
	color: #C0503C;
	text-decoration: none;
	border: 0;
	margin-left: 2px;
}

.woocommerce-checkout .form-row label .optional {
	font-weight: 400;
	color: var(--ink-soft);
}

/* Bez obramowania — pola odróżniają się od tła kontrastem wypełnienia,
   nie kreską. WAŻNE: tło całej strony checkoutu to var(--bg-alt)
   (body.checkout-minimal, patrz niżej) — pole NIE MOŻE mieć tego samego
   tła, bo staje się wtedy niewidoczne (dokładnie to się stało: pola
   "znikały" na tle strony, widoczne tylko po najechaniu/fokusie, kiedy
   :focus przełączał je na biało). Białe pole na kremowym tle strony daje
   kontrast bez potrzeby obramowania. box-shadow (nie border) na :focus,
   żeby podświetlenie nie zmieniało wymiarów pola (border zmieniłby box
   o dodatkowy 1px i przesunąłby sąsiednie elementy).

   UWAGA na specyficzność: rdzeniowe woocommerce.css ma regułę
   ".woocommerce form .form-row .input-text" — 1 element + 3 klasy,
   WYŻSZA specyficzność niż samo ".woocommerce-checkout .input-text"
   (2 klasy), więc rdzeń wygrywał niezależnie od kolejności plików —
   to jest źródło dziwnego, ceglastego koloru obramowania
   (--wc-form-border-color: rgba(32,7,7,.8) domyślnie w rdzeniu), który
   przebijał wszystkie nasze reguły na inputach od Priorytetu 1 (nie
   błąd przeglądarki/narzędzia, jak wcześniej podejrzewałem).
   "form.checkout.woocommerce-checkout.checkout-grid" — 1 element + 3
   klasy, wszystkie realnie obecne na tym <form> (patrz
   form-checkout.php) — bezpiecznie przebija rdzeń, niezależnie od
   kolejności wczytywania arkuszy. */
form.checkout.woocommerce-checkout.checkout-grid .input-text,
form.checkout.woocommerce-checkout.checkout-grid select,
form.checkout.woocommerce-checkout.checkout-grid textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ink);
	background: #fff;
}

form.checkout.woocommerce-checkout.checkout-grid textarea {
	min-height: 90px;
	resize: vertical;
}

form.checkout.woocommerce-checkout.checkout-grid .input-text:focus,
form.checkout.woocommerce-checkout.checkout-grid select:focus,
form.checkout.woocommerce-checkout.checkout-grid textarea:focus {
	/* outline: none TYLKO tutaj (nie zmienia sitewide :focus-visible, ok.
	   linii 2618) — pierwotne założenie ("bez outline:none, box-shadow to
	   tylko dodatek przy myszy/dotyku, :focus-visible i tak nie pokazuje
	   się przy kliknięciu") okazało się błędne konkretnie dla pól
	   tekstowych: zweryfikowane na żywo (getComputedStyle po
	   input.focus()) — Chrome pokazuje :focus-visible na <input
	   type="text"> również po kliknięciu myszą, nie tylko przy nawigacji
	   klawiaturą (inaczej niż na przyciskach/linkach, gdzie założenie
	   nadal jest prawdziwe — dlatego zmiana jest tu, punktowo, a nie w
	   sitewide regule). Efekt: sitewide outline (2px, sage-deep, 2px
	   offset) i ten box-shadow (1.5px inset, ten sam kolor) rysowały się
	   jednocześnie, dając wizualnie podwójną ramkę wokół pola — zgłoszone
	   na zrzucie z żywego checkoutu. box-shadow sam w sobie jest już w
	   pełni widocznym, dostępnym wskaźnikiem fokusu (wysoki kontrast,
	   1.5px), więc usunięcie zdublowanego outline nie jest regresją
	   dostępności — po prostu jeden pierścień zamiast dwóch. */
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--sage-deep);
}

/* Pary pól (imię/nazwisko, kod pocztowy/miasto) jako CSS Grid zamiast
   inline-block+calc() — odporne na białe znaki w HTML. Siatka na 6
   kolumnach daje zarówno równy podział 1/2+1/2 (imię/nazwisko), jak i
   1/3+2/3 (kod pocztowy/miasto, patrz .form-row-postcode/.form-row-city
   — własne klasy z functions.php i magiaokna-site-specific.php, nie
   natywne WC) bez osobnej, zagnieżdżonej siatki. */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 20px;
}

.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-shipping-fields__field-wrapper .form-row-first,
.woocommerce-shipping-fields__field-wrapper .form-row-last {
	grid-column: span 3;
}

.woocommerce-billing-fields__field-wrapper .form-row-postcode,
.woocommerce-shipping-fields__field-wrapper .form-row-postcode {
	grid-column: span 2;
}

.woocommerce-billing-fields__field-wrapper .form-row-city,
.woocommerce-shipping-fields__field-wrapper .form-row-city {
	grid-column: span 4;
}

@media (max-width: 620px) {
	.woocommerce-billing-fields__field-wrapper,
	.woocommerce-shipping-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	.woocommerce-billing-fields__field-wrapper .form-row-first,
	.woocommerce-billing-fields__field-wrapper .form-row-last,
	.woocommerce-billing-fields__field-wrapper .form-row-postcode,
	.woocommerce-billing-fields__field-wrapper .form-row-city,
	.woocommerce-shipping-fields__field-wrapper .form-row-first,
	.woocommerce-shipping-fields__field-wrapper .form-row-last,
	.woocommerce-shipping-fields__field-wrapper .form-row-postcode,
	.woocommerce-shipping-fields__field-wrapper .form-row-city {
		grid-column: 1 / -1;
	}
}

/* Kraj z jedną dozwoloną opcją (patrz functions.php: tabindex="-1" na
   billing_country/shipping_country) — nadal prawdziwy <select> (poprawne
   działanie formularza), ale bez wyglądu/zachowania klikalnego pola,
   żeby nie sugerować decyzji, której i tak nie da się podjąć. */
.woocommerce-checkout select.country_to_state--single {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	padding: 0;
	min-height: auto;
	width: auto;
	background: none;
	cursor: default;
	font-weight: 500;
}

/* Checkboxy (zgoda na regulamin, wysyłka na inny adres, faktura...) —
   ta sama technika co .form-field--checkbox na stronie Kontakt
   (accent-color zamiast custom grafiki), tylko pod natywną klasą
   WooCommerce. min-height:44px + padding dają cel dotykowy zgodny z WCAG
   2.5.8 (44×44px) bez powiększania samego, widocznego kwadracika
   checkboxa (dalej 18×18, patrz reguła niżej) — rośnie tylko obszar
   klikalny/dotykowy wokół niego. align-items zostaje "flex-start" (nie
   "center"), bo część z tych etykiet zawija się do 2-3 linii na wąskim
   ekranie (np. zgoda na regulamin) i checkbox ma się trzymać pierwszej
   linii tekstu, nie środka bloku. */
/* .checkbox (nie .woocommerce-form__label-for-checkbox) — WooCommerce
   dokleja klasy "woocommerce-form__label woocommerce-form__label-for-checkbox"
   tylko w kilku zaszytych na sztywno szablonach rdzenia (np. "Wysłać na
   inny adres?", "Stworzyć konto?"). Pole "Chcę otrzymać fakturę" (dodane
   przez woocommerce_checkout_fields w pluginie, renderowane przez
   woocommerce_form_field()) dostaje tylko bazową klasę "checkbox" — bez
   tej reguły jego <label> zostawał bez display:flex/gap/paddingu, a sam
   checkbox bez stylu niżej, więc wyglądał inaczej niż pozostałe dwa
   (mniejszy, domyślna szara ramka przeglądarki zamiast koloru marki). */
.woocommerce-checkout .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 400;
	color: var(--ink);
	cursor: pointer;
	min-height: 44px;
	padding: 13px 0;
}

/* .input-checkbox (nie .woocommerce-form__input-checkbox) — z tego
   samego powodu co reguła .checkbox wyżej: to jedyna klasa, którą
   WooCommerce naprawdę dokleja do KAŻDEGO checkboxa (łącznie z "Chcę
   otrzymać fakturę" z pluginu), nie tylko do checkboxów z zaszytych na
   sztywno szablonów rdzenia. */
.woocommerce-checkout .input-checkbox {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--sage-deep);
	cursor: pointer;
}

/* Wyraźne oddzielenie tej grupy checkboxów od wymaganych pól adresu nad
   nią (dziś stały w jednym, nieprzerwanym ciągu). Bez strzałki/chevronu —
   próba dodania go przez :has() (usunięta) okazała się niepoprawna:
   pole "Chcę otrzymać fakturę" nigdy jej nie dostawało (WooCommerce nie
   dokleja klasy .woocommerce-form__label-for-checkbox do checkboxów
   dodanych przez woocommerce_checkout_fields — ta klasa jest zaszyta na
   sztywno tylko w kilku natywnych szablonach rdzenia), a "Stworzyć
   konto?" renderowało się z display:inline zamiast flex, więc strzałka
   psuła się wizualnie zamiast znikać razem z resztą — stąd z powrotem
   prosty, spójny odstęp między wierszami, bez ozdobnika. */
.invoice-toggle {
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

/* Natywny nagłówek WooCommerce "Wysłać na inny adres?" (core:
   templates/checkout/form-shipping.php, bez własnej klasy) dziedziczy
   skądinąd margin-top: 36px, przez co robił się rażący pusty odstęp nad
   nim. Zerowane całkowicie — .checkbox (patrz reguła wyżej) ma już
   własny padding: 13px 0, dokładnie ten sam mechanizm, który daje
   "Chcę otrzymać fakturę"/"Stworzyć konto?" naturalny, spójny rytm bez
   dodatkowego marginesu; ten wiersz ma teraz wyglądać tak samo. */
#customer_details #ship-to-different-address {
	margin-top: 0;
}

.woocommerce-checkout .is-hidden {
	display: none;
}

/* --- Błędy walidacji przy polu (WooCommerce dokleja te klasy same) --- */

form.checkout.woocommerce-checkout.checkout-grid .woocommerce-invalid .input-text,
form.checkout.woocommerce-checkout.checkout-grid .woocommerce-invalid select {
	box-shadow: inset 0 0 0 1.5px #C0503C;
	background: #FBEAE6;
}

.woocommerce-checkout .woocommerce-invalid-required-field label {
	color: #7A2E20;
}

/* --- Metody wysyłki i płatności jako całe, klikalne wiersze — ten sam
   wzorzec dla obu list, bo to ta sama natywna struktura
   <ul><li><input radio><label>. Wysyłkę wybiera się dziś na checkoucie
   (koszyk tylko informuje, patrz cart-totals.php), płatność też tylko
   na checkoucie. --- */

#shipping_method,
.wc_payment_methods {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#shipping_method li,
.wc_payment_methods .wc_payment_method {
	border: 1px solid var(--line-input);
	border-radius: 4px;
	transition: border-color 0.15s ease;
}

#shipping_method li:has(input:checked),
.wc_payment_methods .wc_payment_method:has(input:checked) {
	border-color: var(--sage-deep);
	background: var(--sage-pale);
}

/* #shipping_method li jest flex-rzędem (input + label + logo InPost
   jako jego dzieci — logo to <span class="inpost_pl-shipping-method-
   meta-wrap"> doklejany przez wtyczkę na hooku
   woocommerce_after_shipping_rate, siostrzany wobec <label>, nie w
   jego środku), żeby logo dało się dosunąć do prawej krawędzi karty.
   Padding karty przeniesiony tu z <label> (linia niżej), żeby objął
   całą szerokość rzędu, nie tylko tekst. BEZ flex-wrap celowo — <label>
   sam w sobie jest teraz dwuwierszowym stosem (nazwa metody + data,
   patrz niżej), więc na poziomie <li> są zawsze tylko 2-3 proste
   elementy na JEDNYM wierszu (radio, label-stos, logo) i align-items:
   center poprawnie wyśrodkowuje logo względem CAŁEJ wysokości stosu.
   Wcześniejsza wersja próbowała wymusić złamanie wiersza przez
   flex-basis:100% na osobnym .shipping-method-estimate (siostrze
   <label>, nie dziecku) — to faktycznie tworzyło DODATKOWY, OSOBNY
   wiersz flex-wrap dla samej daty (i dla logo po niej), więc logo
   lądowało jako trzeci wiersz pod tekstem zamiast być wyśrodkowane
   obok niego, i karta była przez to dużo wyższa niż zamierzone —
   błąd znaleziony dopiero przy realnym pomiarze getBoundingClientRect,
   nie widoczny na pierwszy rzut oka na screenshocie. */
#shipping_method li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
}

#shipping_method li label,
.wc_payment_methods .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	cursor: pointer;
	font-size: 14px;
	color: var(--ink);
	min-height: 24px;
}

.wc_payment_methods .wc_payment_method > label {
	padding: 16px 18px;
}

/* Bardziej zwarta karta metody wysyłki niż domyślna .wc_payment_method
   (odstęp od kart płatności — patrz reguła wyżej), i <label> jako
   PIONOWY stos dwóch wierszy (nazwa metody, potem data — oba teraz
   DZIECI <label>, patrz stylove_azury_checkout_shipping_section()
   w functions.php) zamiast poziomego rzędu — nadpisuje tylko
   #shipping_method li, nie dotyka współdzielonej reguły z
   .wc_payment_methods powyżej (karty płatności zostają poziome/bez
   zmian, tam nie ma drugiego wiersza tekstu). */
#shipping_method li label {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: auto;
}

.shipping-method-name {
	/* Owija samą nazwę+cenę metody (wc_cart_totals_shipping_method_label())
	   w osobny element, żeby <label> mógł ją traktować jako pierwszy
	   z dwóch stackowanych wierszy — bez tego pomijalny mieszany tekst+
	   inline-HTML (cena w <span>) i tak złożyłby się w jeden anonimowy
	   flex-item, ale jawny wrapper jest czytelniejszy i stabilniejszy. */
	display: block;
}

/* Logo dosunięte do prawej krawędzi karty, wyśrodkowane w poziomie w
   swoim pasku (ma już display:flex ze stylu wtyczki) — flex-shrink:0,
   żeby nie kurczyło się przy długiej nazwie metody obok. Węższe niż
   domyślne 84px, dopasowane do bardziej zwartej karty. Pionowe
   wyśrodkowanie względem dwuwierszowego <label> obok załatwia samo
   align-items:center na #shipping_method li (patrz komentarz wyżej)
   — logo NIE potrzebuje własnego przesunięcia w pionie. */
#shipping_method li .inpost_pl-shipping-method-meta-wrap {
	flex: none;
	width: 60px;
	justify-content: center;
	margin-left: auto;
}

#shipping_method li input[type="radio"],
.wc_payment_methods .wc_payment_method input[type="radio"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--sage-deep);
	cursor: pointer;
}

/* Gdy jest tylko JEDNA metoda wysyłki, core (cart-shipping.php) renderuje
   input[type="hidden"] zamiast radio — nie ma czego wybierać, więc
   "karta do kliknięcia" (obramowanie, padding, kursor) jest tu myląca.
   Zostaje goły tekst "Nazwa: koszt", bez ramki. Płatności
   (.wc_payment_methods) i wybór spośród kilku metod wysyłki (prawdziwe
   radio) zostają bez zmian. */
#shipping_method li:has(input[type="hidden"]) {
	border: none;
	border-radius: 0;
}

#shipping_method li:has(input[type="hidden"]) label {
	padding: 0;
	cursor: default;
	min-height: auto;
}

/* Wyliczona data dostawy/odbioru, drugi wiersz stosu w <label> (patrz
   komentarz przy #shipping_method li label wyżej) — sam się wyrównuje
   pod nazwą metody dzięki temu, że jest zwykłym drugim dzieckiem
   pionowego flex-stosu, bez żadnych ręcznych przesunięć w poziomie. */
.shipping-method-estimate {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
}

/* Mobile (≤620px): radio ukryte WYŁĄCZNIE wizualnie (display:none —
   zostaje w DOM, WooCommerce nadal je odczytuje/zaznacza po kliknięciu
   etykiety, :has(input:checked) na #shipping_method li dalej działa
   niezależnie od widoczności), żeby odzyskać jego szerokość dla nazwy
   metody. Cały kafelek zostaje klikalny bez żadnego JS: label::before
   rozciągnięty na całe <li> (position:relative na li + inset:0 na
   ::before) — klik gdziekolwiek w obrębie kafelka aktywuje input przez
   natywne <label for>. z-index:1 jest konieczny — flex-item są malowane
   w kolejności DOM niezależnie od position, więc bez z-index nakładka
   znalazłaby się POD logo InPost (jedyny pozostały siostrzany element
   <label> po przeniesieniu daty do środka niego) i klik by go nie
   przechwytywał. */
@media (max-width: 620px) {
	#shipping_method li {
		position: relative;
	}

	#shipping_method li input[type="radio"] {
		display: none;
	}

	#shipping_method li label::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}
}

/* #payment .wc_payment_methods .wc_payment_method .payment_box — nie
   .wc_payment_methods .payment_box (2 klasy). Sprawdzone przez realną
   kaskadę w przeglądarce (CSSOM, nie tylko lektura źródła): rdzeń
   WooCommerce (woocommerce.css, skompilowany z woocommerce.scss) nie
   celuje w div.payment_box samo w sobie, tylko w cały złożony selektor
   ".woocommerce-checkout #payment div.payment_box" — z ID #payment w
   środku, więc CAŁA poprzednia reguła (padding/font-size/color/background)
   przegrywała mimo pozornie wyższej specyficzności "2 klas" liczonej bez
   uwzględnienia tego ID. #payment (realny, unikalny ID na tej stronie —
   patrz templates/checkout/payment.php rdzenia) + 3 klasy bije rdzeniowe
   1 ID + 2 klasy + 1 element niezależnie od elementu, bez !important. */
#payment .wc_payment_methods .wc_payment_method .payment_box {
	padding: 0 18px 18px 48px;
	font-size: 13.5px;
	color: var(--ink-soft);
	/* Przezroczyste, żeby opis wtapiał się w tło zaznaczonej metody
	   (--sage-pale, patrz reguła .wc_payment_method:has(input:checked)
	   wyżej) jednolitą plamą, zamiast domyślnego szaro-fioletowego tła
	   rdzenia. */
	background: transparent;
}

#payment .wc_payment_methods .wc_payment_method .payment_box p {
	margin: 0;
}

img.woocommerce-checkout-payment-icons,
.wc_payment_method img {
	max-height: 22px;
	vertical-align: middle;
	margin-left: auto;
}

/* --- Wiersz wyboru wysyłki na checkoucie (etykieta w <th>) --- */

tr.woocommerce-shipping-totals.shipping th {
	font-weight: 600;
}

/* --- Tabela "Twoje zamówienie" z miniaturą produktu --- */

.checkout-review-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.checkout-review-table td,
.checkout-review-table th {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 13.5px;
	vertical-align: top;
}

/* Wiersz pozycji to teraz jeden <td colspan="3"> (patrz review-order.php)
   — cała spacja/obramowanie idzie z .checkout-review-item w środku, żeby
   nie dublować się z domyślnym paddingiem/borderem komórki wyżej. */
.checkout-review-table tbody td {
	padding: 0;
	border-bottom: none;
}

/* Siatka jednej pozycji zamówienia: miniatura z plakietką ilości / nazwa
   + cena na wysokości nazwy / atrybuty warianta + link "Zmień" w jednym,
   zwartym wierszu poniżej — zamiast poprzedniego stosu osobnych linii
   (nazwa, każdy atrybut osobno, cena oderwana u góry). Plakietka ilości
   reużywa język kółek z numeracji sekcji checkoutu (.checkout-flow-num/
   .checkout-section-num), więc nie dokłada nowego motywu wizualnego. */
.checkout-review-item {
	display: grid;
	grid-template-columns: 68px 1fr auto;
	grid-template-areas:
		"media name  price"
		"media meta meta";
	column-gap: 14px;
	row-gap: 6px;
	align-items: start;
	padding: 18px 0;
	border-bottom: 1px solid var(--line);
	/* Bez tego grid nie jest zmuszony zmieścić się w szerokości <td> —
	   przy dłuższych nazwach wzorów całą siatkę (i tabelę wokół niej,
	   bo table-layout jest "auto") wypychało poza kartę podsumowania. */
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.checkout-review-item-media {
	grid-area: media;
	position: relative;
}

.checkout-review-item-media img {
	display: block;
	width: 68px;
	height: 68px;
	/* Ten sam wzorzec co .cart-item-media na koszyku (gradientowe tło +
	   "contain") — wzory na tych dekoracjach nie mogą tracić fragmentu
	   przez przycięcie "cover". Koszyk (inny plik, inne CSS) zostaje bez
	   zmian. */
	object-fit: contain;
	border-radius: 4px;
	background: linear-gradient(180deg, #F4F0E6, #ECE5D5);
}

.checkout-review-item-qty {
	position: absolute;
	right: -6px;
	bottom: -6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: var(--sage-deep);
	color: #fff;
	font-family: var(--font-mono);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
}

.checkout-review-item-name {
	grid-area: name;
	margin: 0;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
	/* Kolumna "1fr" domyślnie nie kurczy się poniżej min-content nazwy
	   (domyślne min-width: auto na elemencie siatki) — stąd rozjazd przy
	   dłuższych nazwach wzorów. */
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.checkout-review-item-price {
	grid-area: price;
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--ink);
	white-space: nowrap;
}

.checkout-review-item-meta {
	grid-area: meta;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
}

.checkout-review-item-meta dl.variation {
	margin: 0;
}

.checkout-review-item-meta .product-change-link {
	font-size: 12px;
	color: var(--ink-soft);
}

.checkout-review-item-meta .product-change-link:hover {
	color: var(--sage-deep);
}

.checkout-review-table tfoot td {
	text-align: right;
	font-family: var(--font-body);
	font-weight: 600;
	white-space: nowrap;
}

/* Wyjątek dla wiersza wysyłki: ta komórka trzyma dziś tylko tekstową
   etykietę wybranej metody (np. "InPost Kurier C2C: 20,00 zł" — wybór
   #shipping_method przeniósł się do sekcji "2. Dostawa" w głównej
   kolumnie, patrz woocommerce/checkout/review-order.php), a etykieta
   bywa dłuższa niż krótka kwota jak reszta wierszy tfoot — bez tego
   "nowrap" wyżej wypychał ją poza kartę. */
.checkout-review-table tfoot tr.woocommerce-shipping-totals td {
	white-space: normal;
}

.checkout-review-table tfoot .order-total th,
.checkout-review-table tfoot .order-total td {
	border-bottom: none;
	border-top: 1px solid var(--line);
	padding-top: 16px;
	font-size: 16px;
	font-weight: 600;
}

/* --- Regulamin + przycisk płatności --- */

.woocommerce-terms-and-conditions-wrapper {
	margin: 20px 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.woocommerce-privacy-policy-text {
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: 0 0 14px;
}

.woocommerce-privacy-policy-text a {
	color: var(--sage-deep);
}

#place_order {
	width: 100%;
	justify-content: center;
	min-height: 54px;
	padding: 14px 26px;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--sage-deep);
	color: #fff;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

#place_order:hover {
	background: var(--ink);
}

/* --- Mobile: jedna kolumna, podsumowanie jako rozwijany pasek u góry --- */

@media (max-width: 980px) {
	.checkout-grid {
		display: block;
	}

	.checkout-sidebar {
		position: static;
		margin-bottom: 28px;
	}

	.checkout-summary-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 14px 18px;
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 4px;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}

	.checkout-summary-toggle-label {
		flex: 1 1 auto;
		font-size: 13.5px;
		font-weight: 600;
		color: var(--ink);
	}

	.checkout-summary-toggle-total {
		font-family: var(--font-body);
		font-size: 15px;
		font-weight: 600;
		color: var(--sage-deep);
	}

	.checkout-summary-toggle-arrow {
		flex-shrink: 0;
		transition: transform 0.2s ease;
	}

	.checkout-summary-toggle[aria-expanded="true"] .checkout-summary-toggle-arrow {
		transform: rotate(180deg);
	}

	.checkout-sidebar-inner {
		border-top: none;
		border-radius: 0 0 4px 4px;
		margin-top: -1px;
		display: none;
	}

	.checkout-sidebar-inner.is-open {
		display: block;
	}

	.checkout-trust-card {
		margin-top: 12px;
	}
}

@media (max-width: 620px) {
	.checkout-header-row {
		min-height: 64px;
	}

	.checkout-page-title {
		font-size: 24px;
	}

	.checkout-sidebar-inner {
		padding: 20px;
	}

	.checkout-footer-row {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Przycisk zamówienia zawsze pod ręką, bez przewijania do końca
	   długiego formularza — patrz .checkout-mobile-cta (JS: main.js) i
	   uzasadnienie w 0.2/0.3 dotyczące usunięcia tej reguły na #payment. */
	.checkout-mobile-cta {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--line);
		box-shadow: 0 -8px 20px rgba(35, 42, 32, 0.08);
		transform: translateY(100%);
		transition: transform 0.2s ease;
	}

	.checkout-mobile-cta.is-visible {
		transform: translateY(0);
	}

	.checkout-mobile-cta-button {
		width: 100%;
		min-height: 50px;
		justify-content: center;
	}
}

/* ==========================================================================
   Strona „Kolekcje” (page-kolekcje.php) — hub prowadzący do sezonowych
   kategorii. Bazuje na wizualnym języku sekcji „Kolekcja sezonowa” ze
   strony głównej (.season-section/.season-img/.season-copy), z dodanym
   wariantem naprzemiennym (obraz z prawej), którego nigdzie indziej w
   motywie nie ma.
   ========================================================================== */

/* WSPÓLNE z page-kategorie.php — zmiana .collections-intro tutaj dotyczy obu hubów (Kolekcje i Kategorie). */

.collections-intro {
	padding: 18px 0 30px;
	border-bottom: 1px solid var(--line);
	text-align: center;
}

.collections-intro .eyebrow {
	display: block;
	margin: 10px 0 6px;
}

.collections-intro h1 {
	font-family: var(--font-display);
	font-size: 34px;
	font-weight: 500;
	margin: 0 auto 14px;
	max-width: 640px;
}

.collections-intro p {
	color: var(--ink-soft);
	font-size: 15px;
	max-width: 520px;
	margin: 0 auto;
}

.collections-list {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.collection-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: var(--bg-alt);
	border-radius: 4px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.collection-row:hover,
.collection-row:focus-visible {
	box-shadow: 0 12px 30px rgba(35, 42, 32, 0.1);
}

.collection-row.is-reversed .collection-img {
	order: 2;
}

.collection-img {
	aspect-ratio: 4 / 3.4;
	overflow: hidden;
	background: var(--sage-pale);
}

.collection-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.collection-copy {
	padding: 32px 40px;
}

.collection-badge {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sage-deep);
	border: 1px solid var(--line);
	padding: 4px 10px;
	border-radius: 2px;
	margin-bottom: 10px;
}

.collection-copy h2 {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 500;
	margin: 0 0 12px;
}

.collection-copy p {
	color: var(--ink-soft);
	font-size: 14.5px;
	margin-bottom: 22px;
	max-width: 420px;
}

@media (max-width: 980px) {
	.collection-row,
	.collection-row.is-reversed {
		grid-template-columns: 1fr;
	}

	.collection-row.is-reversed .collection-img {
		order: 0;
	}

	.collection-copy {
		padding: 24px 24px 32px;
	}

	.collections-intro h1 {
		font-size: 27px;
	}
}

/* ==========================================================================
   Strona „Kategorie" (page-kategorie.php) — hub prowadzący do głównych
   kategorii produktowych. Siatka kart (nie naprzemienne rzędy jak w
   Kolekcjach) — dwukrotnie więcej pozycji niż na hubie sezonowym, więc
   gęstszy, bardziej kompaktowy układ. Nowe, osobne nazwy klas, żeby nie
   kolidować z .cat-item/.cat-grid (karuzela kategorii na stronie głównej).
   ========================================================================== */


/* Intro tej strony (breadcrumb/eyebrow/H1) korzysta z .collections-intro zdefiniowanego w sekcji "Kolekcje" powyżej — nie jest tu redefiniowany. */
.category-hub-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

@media (min-width: 620px) {
	.category-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.category-hub-card {
	display: block;
	background: var(--bg-alt);
	border-radius: 4px;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.2s ease;
}

.category-hub-card:hover,
.category-hub-card:focus-visible {
	box-shadow: 0 12px 30px rgba(35, 42, 32, 0.1);
}

.category-hub-img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--sage-pale);
}

.category-hub-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.category-hub-copy {
	padding: 24px 28px 28px;
}

.category-hub-copy h2 {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 500;
	margin: 0 0 10px;
}

.category-hub-copy p {
	color: var(--ink-soft);
	font-size: 14px;
	margin-bottom: 18px;
}

/* ==========================================================================
   WooCommerce — Moje konto (page-my-account.php, woocommerce/myaccount/*.php)

   Wszystko poniżej scoped pod "body.woocommerce-account" (klasa dokładana
   przez sam rdzeń WooCommerce na każdym endpoincie konta) — to jednocześnie
   ogranicza reguły do tej jednej podstrony I podnosi specyficzność ponad
   rdzeniowe woocommerce.css (patrz notatka o ".woocommerce form .form-row
   .input-text" w sekcji Checkoutu, ten sam mechanizm: 1 dodatkowy element
   "body" w selektorze wygrywa bez potrzeby !important ani kopiowania
   kolejnych szablonów).
   ========================================================================== */

/* --- Nagłówek strony (page-my-account.php) --- */

.myaccount-page-head {
	padding: 18px 0 32px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 40px;
}

.myaccount-page-title {
	font-size: 30px;
	margin: 10px 0 0;
}

/* --- Układ: nawigacja + treść ---
   [woocommerce_my_account] (my-account.php) renderuje nav i content jako
   rodzeństwo wewnątrz jednego ".woocommerce" — gdy oba są obecne (klient
   zalogowany), robimy z tego siatkę 2 kolumn. Gdy nawigacji nie ma
   (logowanie/rejestracja/reset hasła dla gościa), ".woocommerce" zostaje
   zwykłym blokiem — stąd :has() zamiast sztywnej siatki na samym
   ".woocommerce". */
body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: start;
	gap: 56px;
}

/* --- Nawigacja konta ---
   Rdzeniowe woocommerce-layout.css dokłada ".woocommerce-account
   .woocommerce-MyAccount-navigation{float:left;width:30%}" i
   ".woocommerce-account .woocommerce-MyAccount-content{float:right;
   width:68%}" (stary, float'owy layout konta). Float jest w kontekście
   grid ignorowany, ale samo dokładnie 2-elementowe auto-placement w
   Chrome zdaje się na to reagować (nav ląduje w 2. kolumnie, content w
   1.) — naprawia to jawne grid-column/grid-row. Procentowa szerokość
   NIE jest ignorowana (liczy się względem obszaru siatki, czyli np.
   30% z 220px = 66px) — bez jawnego "width:100%" o wyższej
   specyficzności (nasz selektor ma już przewagę dzięki elementowi
   "body", patrz komentarz przy ".col2-set" niżej) nawigacja i treść
   byłyby węższe niż ich własna kolumna. */
body.woocommerce-account .woocommerce-MyAccount-navigation {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: 11px 16px;
	border-radius: 3px;
	font-size: 14px;
	color: var(--ink-soft);
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
	background: var(--bg-alt);
	color: var(--ink);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background: var(--sage-pale);
	color: var(--sage-deep);
	font-weight: 600;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}

/* --- Treść: typografia bazowa --- */

body.woocommerce-account .woocommerce-MyAccount-content h2 {
	font-size: 19px;
	margin: 0 0 18px;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
	margin-top: 0;
}

/* --- Pulpit (woocommerce/myaccount/dashboard.php) --- */

.myaccount-greeting {
	font-family: var(--font-display);
	font-size: 22px;
	margin: 0 0 32px;
}

.myaccount-section-heading {
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	margin: 0 0 14px;
}

.myaccount-quicklinks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-bottom: 40px;
}

.myaccount-quicklink {
	display: block;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 3px;
	padding: 22px 20px;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.myaccount-quicklink:hover {
	transform: translateY(-2px);
	border-color: var(--sage-deep);
	box-shadow: 0 6px 18px rgba(35, 42, 32, 0.08);
}

.myaccount-quicklink-label {
	display: block;
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--ink);
	margin-bottom: 6px;
}

.myaccount-quicklink-desc {
	display: block;
	font-size: 12.5px;
	color: var(--ink-soft);
}

.myaccount-last-order-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 20px 24px;
	margin-bottom: 32px;
}

.myaccount-last-order-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.myaccount-last-order-number {
	font-family: var(--font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.myaccount-last-order-date {
	font-size: 13px;
	color: var(--ink-soft);
}

.myaccount-last-order-status,
.myaccount-status-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--bg-alt);
	color: var(--ink-soft);
}

.myaccount-status-completed,
.myaccount-status-processing {
	background: var(--sage-pale);
	color: var(--sage-deep);
}

.myaccount-status-on-hold,
.myaccount-status-pending {
	background: var(--bg-alt);
	color: var(--ink-soft);
}

.myaccount-status-cancelled,
.myaccount-status-failed {
	background: #FBEAE6;
	color: #7A2E20;
}

.myaccount-status-refunded {
	background: rgba(182, 154, 108, 0.18);
	color: var(--brass);
}

.myaccount-empty-state {
	border: 1px dashed var(--line);
	border-radius: 4px;
	padding: 32px 28px;
	text-align: center;
	margin-bottom: 32px;
}

.myaccount-empty-state p {
	color: var(--ink-soft);
	margin: 0 0 18px;
}

.myaccount-contact-hint {
	font-size: 13.5px;
	color: var(--ink-soft);
}

.myaccount-contact-hint a {
	color: var(--sage-deep);
	font-weight: 600;
	margin-left: 4px;
}

/* --- Przyciski WooCommerce w obrębie konta —
   domyślnie jak .btn.btn-primary (to zwykle główne CTA ekranu: zapisz
   zmiany, zaloguj się, zarejestruj, zresetuj hasło, zapisz adres). Akcje
   w wierszach tabel (zamówienia/metody płatności) dostają osobny,
   lżejszy wygląd niżej. --- */

body.woocommerce-account .button,
body.woocommerce-account .woocommerce-Button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 24px;
	border-radius: 2px;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	background: var(--sage-deep);
	color: #fff;
	transition: background-color 0.15s ease;
}

body.woocommerce-account .button:hover,
body.woocommerce-account .woocommerce-Button:hover {
	background: var(--ink);
	color: #fff;
}

/* --- Tabele: zamówienia i metody płatności (ten sam rdzeniowy wzorzec
   shop_table/shop_table_responsive) --- */

body.woocommerce-account table.shop_table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
}

body.woocommerce-account table.shop_table th,
body.woocommerce-account table.shop_table td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font-size: 13.5px;
	vertical-align: middle;
}

body.woocommerce-account table.shop_table th {
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ink-soft);
	font-weight: 600;
}

body.woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-number a {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--ink);
}

/* Plakietka statusu na liście zamówień — kolor czytany z klasy statusu,
   którą rdzeń i tak dokłada do <tr> (woocommerce-orders-table__row--
   status-{status}), bez potrzeby osobnej logiki PHP. */
body.woocommerce-account table.my_account_orders .woocommerce-orders-table__cell-order-status {
	font-size: 11.5px;
	font-weight: 600;
}

body.woocommerce-account tr.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account tr.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
	color: var(--sage-deep);
}

body.woocommerce-account tr.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account tr.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status {
	color: #C0503C;
}

body.woocommerce-account tr.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
	color: var(--brass);
}

/* Akcje w wierszu (Podgląd/Zapłać/Anuluj, Ustaw jako domyślną/Usuń) —
   mniejsze i "ghost", żeby nie konkurowały wizualnie z głównym CTA
   formularza wyżej. */
body.woocommerce-account table.shop_table .button {
	padding: 8px 14px;
	font-size: 12.5px;
	background: none;
	border-color: var(--line);
	color: var(--ink);
	margin: 2px 4px 2px 0;
}

body.woocommerce-account table.shop_table .button:hover {
	border-color: var(--sage-deep);
	background: none;
	color: var(--sage-deep);
}

body.woocommerce-account table.shop_table .button.pay {
	background: var(--sage-deep);
	border-color: var(--sage-deep);
	color: #fff;
}

body.woocommerce-account table.shop_table .button.pay:hover {
	background: var(--ink);
	border-color: var(--ink);
}

body.woocommerce-account table.shop_table .button.cancel:hover {
	border-color: #C0503C;
	color: #C0503C;
}

body.woocommerce-account .woocommerce-MyAccount-paymentMethods .default-payment-method .payment-method-method::after {
	content: "· domyślna";
	color: var(--ink-soft);
	font-weight: 400;
	margin-left: 6px;
}

/* --- Adresy (woocommerce/myaccount/my-address.php) --- */

body.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 22px 24px;
}

body.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

body.woocommerce-account .woocommerce-Address-title h2 {
	font-size: 16px;
	margin: 0;
}

body.woocommerce-account .woocommerce-Address-title .edit {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink);
}

body.woocommerce-account .woocommerce-Address-title .edit:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

body.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ink-soft);
}

/* --- Dwie kolumny współdzielone przez: logowanie/rejestracja
   (#customer_login), adresy (.woocommerce-Addresses) i adresy na
   szczegółach zamówienia (.woocommerce-columns--addresses) — wszystkie
   trzy mają natywną klasę WooCommerce ".col2-set". --- */
/* Ten sam problem placementu co przy nawigacji konta wyżej (rdzeń
   dokłada float+width na dzieci ".col2-set" — .col-1/.col-2 albo
   .u-column1/.u-column2, zależnie od szablonu) — jawne
   grid-column/grid-row na 1. i 2. dziecku, zamiast polegać na
   auto-placement. Rdzeń dokłada też "width:48%" na tych samych
   dzieciach (".woocommerce .col2-set .col-1/.col-2" — 3 klasy), więc
   bez jawnego "width:100%" o wyższej specyficzności każda kolumna
   zajmuje tylko połowę swojego już-i-tak-połówkowego toru siatki.
   Selektor niżej dokłada realnie obecny ".woocommerce" (rodzic
   ".col2-set") + element "body", żeby bezpiecznie przebić rdzeń,
   zamiast polegać na kolejności wczytywania arkuszy. */
body.woocommerce-account .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

body.woocommerce-account .woocommerce .col2-set > *:first-child {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
}

body.woocommerce-account .woocommerce .col2-set > *:last-child {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
}

/* --- Formularze: logowanie, rejestracja, dane konta, adres, reset hasła —
   wspólny wzorzec .form-row/.input-text (ten sam co na checkoucie). --- */

body.woocommerce-account form .form-row {
	margin: 0 0 18px;
}

body.woocommerce-account form .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 6px;
}

body.woocommerce-account form .form-row label .required {
	color: #C0503C;
	text-decoration: none;
	border: 0;
	margin-left: 2px;
}

body.woocommerce-account form.woocommerce-form-login,
body.woocommerce-account form.woocommerce-form-register,
body.woocommerce-account form.woocommerce-EditAccountForm,
body.woocommerce-account form.woocommerce-ResetPassword,
body.woocommerce-account .woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	column-gap: 20px;
}

/* Domyślnie KAŻDE bezpośrednie dziecko formularza (submit, fieldset,
   "<div class='clear'>" po starych polach, komunikaty wtyczek przez
   woocommerce_edit_account_form_fields itp.) zajmuje pełną szerokość
   — bez tego auto-placement wsadza je w pojedynczą, 1/6 szeroką
   kolumnę (patrz przycisk "Zapisz zmiany"). form-row-first/last niżej
   ma wyższą specyficzność (prawdziwa klasa vs uniwersalny selektor),
   więc bezpiecznie zawęża tylko te dwa, konkretne pola. */
body.woocommerce-account form.woocommerce-form-login > *,
body.woocommerce-account form.woocommerce-form-register > *,
body.woocommerce-account form.woocommerce-EditAccountForm > *,
body.woocommerce-account form.woocommerce-ResetPassword > *,
body.woocommerce-account .woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

body.woocommerce-account form.woocommerce-form-login .form-row-wide,
body.woocommerce-account form.woocommerce-form-register .form-row-wide,
body.woocommerce-account form.woocommerce-EditAccountForm .form-row-wide,
body.woocommerce-account form.woocommerce-ResetPassword .form-row-wide,
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-wide {
	grid-column: 1 / -1;
}

body.woocommerce-account form.woocommerce-form-login .form-row-first,
body.woocommerce-account form.woocommerce-form-login .form-row-last,
body.woocommerce-account form.woocommerce-form-register .form-row-first,
body.woocommerce-account form.woocommerce-form-register .form-row-last,
body.woocommerce-account form.woocommerce-EditAccountForm .form-row-first,
body.woocommerce-account form.woocommerce-EditAccountForm .form-row-last,
body.woocommerce-account form.woocommerce-ResetPassword .form-row-first,
body.woocommerce-account form.woocommerce-ResetPassword .form-row-last,
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first,
body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last {
	grid-column: span 3;
}

/* fieldset (zmiana hasła na "Danych konta") ma się zachowywać jak każdy
   inny form-row-wide, nie jak domyślny, obramowany <fieldset>. */
body.woocommerce-account form.woocommerce-EditAccountForm fieldset {
	grid-column: 1 / -1;
	border: 0;
	padding: 12px 0 0;
	margin: 12px 0 0;
	border-top: 1px solid var(--line);
}

body.woocommerce-account form.woocommerce-EditAccountForm legend {
	padding: 0 0 16px;
	font-family: var(--font-display);
	font-size: 16px;
}

body.woocommerce-account .input-text,
body.woocommerce-account select {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: none;
	border-radius: 3px;
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ink);
	background: var(--bg-alt);
}

body.woocommerce-account .input-text:focus,
body.woocommerce-account select:focus {
	/* outline: none — ten sam powód co ok. linii 4556 (checkout): sitewide
	   :focus-visible dubluje się z tym box-shadow na polach tekstowych,
	   dając podwójną ramkę. */
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--sage-deep);
}

body.woocommerce-account .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13.5px;
	color: var(--ink);
	cursor: pointer;
	min-height: 44px;
	padding: 13px 0;
}

body.woocommerce-account .woocommerce-form__input-checkbox {
	margin-top: 2px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--sage-deep);
	cursor: pointer;
}

/* Logowanie/Rejestracja: nagłówki "Zaloguj się"/"Zarejestruj się" nad
   każdą kolumną, oraz pionowy separator między kolumnami na desktopie. */
body.woocommerce-account #customer_login h2 {
	grid-column: 1 / -1;
	font-size: 19px;
	margin: 0 0 18px;
}

body.woocommerce-account #customer_login .u-column1 {
	padding-right: 40px;
	border-right: 1px solid var(--line);
}

body.woocommerce-account #customer_login .u-column2 {
	padding-left: 0;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	cursor: pointer;
}

body.woocommerce-account .woocommerce-LostPassword {
	font-size: 13px;
	margin-top: 14px;
}

/* --- Szczegóły zamówienia (woocommerce/myaccount/view-order.php,
   woocommerce/order/order-details.php) --- */

body.woocommerce-account mark.order-number,
body.woocommerce-account mark.order-date,
body.woocommerce-account mark.order-status {
	background: var(--sage-pale);
	color: var(--sage-deep);
	padding: 2px 8px;
	border-radius: 2px;
	font-weight: 600;
}

body.woocommerce-account .woocommerce-order-details__title {
	font-size: 19px;
	margin: 32px 0 18px;
}

body.woocommerce-account table.woocommerce-table--order-details tfoot th,
body.woocommerce-account table.woocommerce-table--order-details tfoot td {
	text-align: right;
	font-family: var(--font-body);
}

body.woocommerce-account table.woocommerce-table--order-details tfoot td {
	font-weight: 600;
}

body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child th,
body.woocommerce-account table.woocommerce-table--order-details tfoot tr:last-child td {
	border-top: 1px solid var(--line);
	border-bottom: none;
	padding-top: 16px;
	font-size: 16px;
	font-weight: 600;
}

body.woocommerce-account .woocommerce-table__product-name .variation {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--ink-soft);
}

body.woocommerce-account .order-actions-button {
	padding: 10px 18px;
	font-size: 12.5px;
	background: none;
	border: 1px solid var(--line);
	color: var(--ink);
}

body.woocommerce-account .order-actions-button:hover {
	border-color: var(--sage-deep);
	color: var(--sage-deep);
}

/* Notatki do zamówienia widoczne dla klienta (statusy/aktualizacje) */
body.woocommerce-account .woocommerce-OrderUpdates {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body.woocommerce-account .woocommerce-OrderUpdate-inner {
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 16px 20px;
	background: var(--bg-alt);
}

body.woocommerce-account .woocommerce-OrderUpdate-meta {
	font-size: 11.5px;
	color: var(--ink-soft);
	margin: 0 0 6px;
}

body.woocommerce-account .woocommerce-OrderUpdate-description p {
	margin: 0;
	font-size: 13.5px;
}

body.woocommerce-account .woocommerce-column__title {
	font-size: 15px;
	margin: 0 0 10px;
}

/* ==========================================================================
   Moje konto — mobile (≤980 / ≤620)
   ========================================================================== */

@media (max-width: 980px) {
	body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation {
		position: static;
		grid-column: 1;
		grid-row: 1;
	}

	body.woocommerce-account .woocommerce-MyAccount-content {
		grid-column: 1;
		grid-row: 2;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		padding-bottom: 4px;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
		display: none;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link {
		flex-shrink: 0;
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link a {
		white-space: nowrap;
		border: 1px solid var(--line);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
		border-color: var(--sage-deep);
	}

	body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.myaccount-quicklinks {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 620px) {
	.myaccount-page-title {
		font-size: 24px;
	}

	.myaccount-quicklinks {
		grid-template-columns: 1fr;
	}

	.myaccount-last-order-card {
		flex-direction: column;
		align-items: flex-start;
	}

	body.woocommerce-account .col2-set,
	body.woocommerce-account form.woocommerce-form-login,
	body.woocommerce-account form.woocommerce-form-register,
	body.woocommerce-account form.woocommerce-EditAccountForm,
	body.woocommerce-account form.woocommerce-ResetPassword,
	body.woocommerce-account .woocommerce-address-fields__field-wrapper {
		grid-template-columns: 1fr;
	}

	body.woocommerce-account .woocommerce .col2-set > *:first-child {
		grid-column: 1;
		grid-row: 1;
		width: 100%;
	}

	body.woocommerce-account .woocommerce .col2-set > *:last-child {
		grid-column: 1;
		grid-row: 2;
		width: 100%;
	}

	body.woocommerce-account form.woocommerce-form-login .form-row-first,
	body.woocommerce-account form.woocommerce-form-login .form-row-last,
	body.woocommerce-account form.woocommerce-form-register .form-row-first,
	body.woocommerce-account form.woocommerce-form-register .form-row-last,
	body.woocommerce-account form.woocommerce-EditAccountForm .form-row-first,
	body.woocommerce-account form.woocommerce-EditAccountForm .form-row-last,
	body.woocommerce-account form.woocommerce-ResetPassword .form-row-first,
	body.woocommerce-account form.woocommerce-ResetPassword .form-row-last,
	body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-first,
	body.woocommerce-account .woocommerce-address-fields__field-wrapper .form-row-last {
		grid-column: 1 / -1;
	}

	body.woocommerce-account #customer_login .u-column1 {
		padding-right: 0;
		border-right: none;
		padding-bottom: 28px;
		margin-bottom: 28px;
		border-bottom: 1px solid var(--line);
	}

	/* Tabele zamówień/metod płatności jako karty — ten sam próg
	   (620px) co rdzeniowe .shop_table_responsive, patrz filtr
	   woocommerce_style_smallscreen_breakpoint w functions.php, więc
	   nie ma strefy pośredniej, w której rdzeń "łamie" tabelę, zanim
	   nasze karty przejmą układ. */
	body.woocommerce-account table.shop_table_responsive,
	body.woocommerce-account table.shop_table_responsive tbody,
	body.woocommerce-account table.shop_table_responsive tr,
	body.woocommerce-account table.shop_table_responsive td {
		display: block;
		width: 100%;
	}

	body.woocommerce-account table.shop_table_responsive {
		border: none;
	}

	body.woocommerce-account table.shop_table_responsive tr {
		margin-bottom: 14px;
		border: 1px solid var(--line);
		border-radius: 4px;
		padding: 4px 18px;
		background: #fff;
	}

	body.woocommerce-account table.shop_table_responsive tr:nth-child(2n) td {
		background: none;
	}

	body.woocommerce-account table.shop_table_responsive td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 12px 0;
		border-bottom: 1px solid var(--line);
		text-align: right;
	}

	body.woocommerce-account table.shop_table_responsive td:last-child {
		border-bottom: none;
	}

	body.woocommerce-account table.shop_table_responsive td::before {
		content: attr(data-title);
		float: none;
		text-align: left;
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-soft);
	}

	body.woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions,
	body.woocommerce-account table.shop_table_responsive td.payment-method-actions {
		display: block;
		text-align: left;
	}

	body.woocommerce-account table.shop_table_responsive td.woocommerce-orders-table__cell-order-actions::before,
	body.woocommerce-account table.shop_table_responsive td.payment-method-actions::before {
		display: none;
	}

	body.woocommerce-account table.shop_table_responsive .button {
		margin: 4px 8px 4px 0;
	}
}

/* ==========================================================================
   Dział „Poradniki” — artykuły (single.php), hub korzysta z istniejących
   .category-hub-grid/.category-hub-card, nagłówek i treść z .legal-header/
   .legal-content (page-polityka-prywatnosci.php) — tu tylko dwa nowe
   elementy specyficzne dla artykułu.
   ========================================================================== */

.article-thumbnail {
	margin: 0 auto 40px;
}

.article-thumbnail img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.article-cta {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--line);
	text-align: center;
}

.article-cta p {
	margin: 0 0 16px;
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--ink);
}

/* ==========================================================================
   Checkout — widget wyboru Paczkomatu (wtyczka inpost-for-woocommerce,
   szablon checkout/easypack-review-order-after-shipping.php wołany przez
   hook woocommerce_review_order_after_shipping, dziś wywoływany z sekcji
   "2. Dostawa" w głównej kolumnie checkoutu, patrz
   stylove_azury_checkout_shipping_hooks_table() w functions.php — nie z
   sidebaru). Nie edytujemy plików wtyczki — tylko nadpisujemy jej sztywne
   szerokości/min-width, żeby przycisk i wybrany punkt mieściły się w
   kolumnie formularza zamiast wypychać ją szerzej niż karta checkoutu.
   ========================================================================== */

.woocommerce-checkout-review-order-table {
	/* table-layout: auto potrafi wypchnąć całą tabelę poza kartę
	   podsumowania, gdy jakakolwiek komórka (nazwa produktu, widget
	   InPost) preferuje więcej miejsca niż jest dostępne — "fixed" +
	   jawny <colgroup> (review-order.php) trzyma tabelę dokładnie w
	   szerokości kontenera niezależnie od długości treści. */
	table-layout: fixed;
	width: 100%;
	max-width: 100%;
}

.easypack-parcel-machine-select {
	max-width: 100%;
	box-sizing: border-box;
}

.easypack-parcel-machine-select .easypack_show_geowidget,
.easypack-parcel-machine-select #easypack_js_type_geowidget {
	max-width: 100%;
	box-sizing: border-box;
	/* Wyjątek od zasady "podnieść specyficzność, nie dodawać !important"
	   (patrz CLAUDE.md) — tu nie ma czego podnosić: front.css wtyczki ma
	   "box-shadow: ... !important" na tym samym selektorze co kolor tła
	   przycisku, ale w przeciwieństwie do koloru (opcja
	   easypack_custom_button_css w panelu wtyczki) cień nie jest niczym
	   sterowany z panelu — sprawdzone w kodzie wtyczki (brak "shadow" w
	   plikach PHP). Żadna specyficzność nie przebije !important, więc to
	   jedyny działający sposób. */
	box-shadow: none !important;
}

#selected-parcel-machine {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

#easypack_selected_point_data,
.easypack-visible-point-description,
.easypack-visible-point-header {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	box-sizing: border-box;
}

/* Nazwy/ceny metod wysyłki (mogą być długie w kolumnie formularza) */
#shipping_method li label {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Kolorystyka widgetu dopasowana do palety motywu zamiast surowego
   żółtego brandingu wtyczki (ten sam wzorzec co .btn-primary) — samo
   logo InPost przy każdej metodzie (.easypack-shipping-method-logo)
   zostaje bez zmian, to oficjalny branding przewoźnika, nie element UI
   do przestylowania.
   Kolor tła przycisku NIE jest tu nadpisywany w CSS — wtyczka sama
   dokłada w wp_head (priorytet 100) inline <style> z !important,
   czytając ustawienie "Color of map button" (opcja
   easypack_custom_button_css, domyślnie żółty #FCC905). Ustawiliśmy tę
   opcję na --sage-deep (#4C5F40) tym samym mechanizmem, jakiego użyłby
   admin w ustawieniach wtyczki — żadna reguła CSS by tego nie
   przebiła bez !important, więc to właściwe miejsce na tę zmianę. */
.easypack-parcel-machine-select .easypack_show_geowidget:hover,
.easypack-parcel-machine-select #easypack_js_type_geowidget:hover {
	background-color: var(--ink) !important;
}

/* Widget InPost renderuje się teraz w .checkout-main (sekcja "Dostawa"),
   nie w .checkout-sidebar jak wcześniej — te dwie reguły przeniesione z
   .checkout-sidebar na .checkout-main, żeby kolorystyka pod marką nie
   zniknęła po przeniesieniu (patrz commit Task 1). #selected-parcel-machine
   to unikalny ID nadawany przez wtyczkę raz na stronę, więc bez ryzyka
   nadpisania czegoś innego. */
.checkout-main #selected-parcel-machine {
	border-color: var(--sage-deep);
}

.checkout-main .easypack-visible-point-header {
	background: var(--sage-pale);
	color: var(--ink);
}

/* Opakowanie <table> wokół <tr> wtyczki InPost (patrz
   #stylove-checkout-shipping-hooks w functions.php,
   stylove_azury_checkout_shipping_section()/-_fragment()) — potrzebne
   wyłącznie, żeby przeglądarka/jQuery poprawnie sparsowały ten <tr>
   (poza <table> parser HTML5 po prostu go ignoruje), nie po to, żeby
   coś tu wizualnie wyglądało jak tabela — zerujemy więc domyślny wygląd
   tabeli/komórek, żeby zachowywała się jak zwykły blok. */
.stylove-shipping-hooks-table {
	width: 100%;
	border-collapse: collapse;
}

.stylove-shipping-hooks-table th,
.stylove-shipping-hooks-table td {
	padding: 0;
	border: 0;
}

@media (max-width: 620px) {
	.easypack-parcel-machine-select .easypack_show_geowidget,
	.easypack-parcel-machine-select #easypack_js_type_geowidget {
		width: 100%;
	}
}

/* --- Metody płatności Autopay — wspólna sekcja stylizacji na checkoucie ---
   Sekcja ukończona, pięć zagadnień w kolejności występowania niżej:
   1. .co-hint — dopisek zaufania/brandingu jako element <p> renderowany
      PRZED #payment (hook: woocommerce_review_order_before_payment), nie
      wewnątrz sekcji płatności. Bez !important.
   2. Karty kanałów płatności (BLIK/przelew/karta/PayPo) renderowane przez
      wtyczkę platnosci-online-blue-media wewnątrz #payment
      .wc_payment_methods .wc_payment_method.payment_method_bluemedia
      .payment_box — poziomy wiersz (radio/nazwa/logo) zamiast domyślnego
      pionowego stosu wtyczki, plus poprawki dla kolizji id opisanej niżej.
   3. Etykieta bramki "Autopay" (duże logo w <label> bramki, siostrzane
      wobec .payment_box, poza kartami kanałów z punktu 2) — miała tu
      regułę zmniejszającą logo do rozmiaru plakietki; nieaktualne od
      punktu 5 (etykieta całkiem ukryta), więc usunięte jako martwy kod —
      patrz komentarz w miejscu, gdzie stała.
   4. Rozwinięta siatka banków pod kanałem grupowym "Przelew internetowy" —
      responsywne kafelki zamiast sztywnego flex-wrap wtyczki, plus jedna
      poprawka dla tej samej kolizji id (opis pod kafelkiem banku).
   5. Autopay jako jedyna bramka w sklepie nie potrzebuje własnej "karty
      wyboru" (.wc_payment_methods .wc_payment_method) ani etykiety nad
      kartami kanałów — oba neutralizowane tylko dla tej bramki, razem z
      dekoracyjnymi trójkątami wtyczki, które bez etykiety nie mają już
      sensu. Naprawia efekt "karta w karcie" widoczny wcześniej na żywo.
   Tam gdzie konieczne, !important jest stosowany wyłącznie na właściwościach
   także nadpisywanych !important przez plugins/platnosci-online-blue-media/
   assets/css/frontend.css (w przeciwnym razie nasza reguła przegrywałaby ze
   względu na kolejność).

   GOTCHA WSPÓLNA DLA CAŁEJ SEKCJI: wtyczka renderuje swoją listę kanałów
   płatności jako <ul id="shipping_method" ...> — DOKŁADNIE ten sam id,
   którego motyw używa dla prawdziwej listy metod WYSYŁKI (patrz reguły
   "#shipping_method ..." wcześniej w tym pliku, sekcja "Metody wysyłki i
   płatności jako całe, klikalne wiersze"). Efekt: KAŻDA reguła
   "#shipping_method ..." napisana z myślą wyłącznie o metodach wysyłki po
   cichu trafia też w całe poddrzewo kanałów/banków Autopay tutaj, mimo że
   nic w tej sekcji jej nie wywołuje. Ta kolizja jest źródłem co najmniej
   trzech osobnych błędów na tej gałęzi: przeciek align-items/gap z
   "#shipping_method li" do kart kanałów (punkt 2, poprawiony jawnym
   align-items:stretch/gap:0 — patrz komentarz przy tej regule), na mobile
   (≤620px) nakładka "cała karta klikalna" z
   "#shipping_method li label::before" przykrywająca pole kodu BLIK bez
   działającego elementu pod spodem (poprawka niżej, w bloku @media na
   końcu sekcji), oraz bezklasowy <li>-wrapper każdej grupy kanałów łapiący
   pełny styl karty z "#shipping_method li" — obramowanie/promień/padding/
   zaznaczenie — rysując drugą kartę wokół karty kanału, plus 40px
   wciętego zagnieżdżonego <ul> (poprawka niżej, zaraz po regułach kart
   kanałów z punktu 2). Przy każdej kolejnej zmianie w tej sekcji sprawdzać,
   czy nowa/zmieniana reguła "#shipping_method ..." nie dotyka też tego
   poddrzewa. */

.co-hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 20px;
	padding-left: 36px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

.co-hint img {
	height: 16px;
	width: auto;
	flex-shrink: 0;
}

/* Karty kanałów (BLIK/przelew/karta/PayPo) — nadpisuje domyślny pionowy
   stos wtyczki (duże logo nad nazwą) na poziomy wiersz zgodny z resztą
   list checkoutu (.wc_payment_methods .wc_payment_method). Pełny
   łańcuch selektora skopiowany z frontend.css wtyczki (linie ok. 34–60),
   żeby zagwarantować specyficzność ≥ oryginałowi. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item {
	/* frontend.css ma tu "border: 1px solid transparent !important" —
	   trzeba dorównać !important, żeby wygrać. Jawne białe tło (--bg) —
	   bez tego karta była przezroczysta i pokazywała kremowe tło strony
	   (--bg-alt) przez siebie, co na żywo dawało wrażenie "brudnego",
	   szaro-różowego kafelka zamiast czystej, białej karty. */
	border: 1px solid var(--line-input) !important;
	border-radius: 4px;
	padding: 0;
	margin-bottom: 10px;
	background: var(--bg);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item.selected,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item.bm-selected-group,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item.selected,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item.bm-selected-group {
	/* frontend.css: "border: 1px solid #87ca8d !important" na tym samym selektorze. */
	border: 1px solid var(--sage-deep) !important;
	background: var(--sage-pale);
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item {
	/* Poprawka po weryfikacji na żywym DOM (Task 2, druga iteracja):
	   span.bm-payment-channel-method-desc jest RODZEŃSTWEM <label>, nie
	   jego dzieckiem (oba są bezpośrednimi dziećmi tego <li> — patrz
	   frontend.css linia 84: "li... > span.bm-payment-channel-method-desc",
	   nie "label span..."). Grid na <label> obejmuje więc tylko
	   radio/nazwę/logo (jeden wiersz); <li> jako flex column układa
	   label (wiersz 1) i opis (wiersz 2) pionowo pod sobą.

	   align-items: stretch jawnie — bez tego to <li> (jak każdy <li> w tej
	   samej gałęzi DOM) dziedziczy "align-items: center" z NASZEJ WŁASNEJ,
	   niepowiązanej reguły "#shipping_method li" (styl kart dostawy
	   InPost). Wtyczka Autopay nadaje swojemu wewnętrznemu
	   <ul class="woocommerce-shipping-methods"> DOKŁADNIE ten sam
	   id="shipping_method" co prawdziwa lista metod dostawy WooCommerce
	   (potwierdzone w DOM: kanały płatności siedzą pod
	   ul#shipping_method.woocommerce-shipping-methods.bm-*) — to
	   kolizja ID między wtyczką a naszym własnym CSS, nie coś z
	   frontend.css wtyczki. Bez jawnego stretch przy flex-direction:
	   column oznaczałoby to center = etykieta kurczy się do szerokości
	   treści i centruje zamiast rozciągać się na całą szerokość karty
	   (radio przy lewej, logo przy prawej krawędzi). gap: 0 z tego
	   samego powodu — zeruje odziedziczony "gap: 10px" z tej samej
	   reguły dostawy, żeby odstęp label/opis kontrolował wyłącznie
	   padding opisu. */
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > label,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > label {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	column-gap: 10px;
	/* min-height jawnie (zamiast "auto") — dopiero razem z poprawką
	   max-height/!important na logo niżej (wcześniej przegrywała z
	   frontend.css, więc kwadratowe logo BLIK/PayPo renderowało się na
	   64px zamiast 22px) daje to naprawdę równą wysokość każdej karty,
	   niezależnie od proporcji logo kanału.

	   Pionowy padding zmniejszony 14px→10px, żeby zrobić miejsce na
	   większe logo BLIK/PayPo (36px→44px, patrz reguła logo niżej) BEZ
	   podnoszenia wysokości karty — 10+10+44 = 14+14+36 = 64px, ten sam
	   wynik co wcześniej. Karta Przelewu (min-height:56 wciąż wiążący,
	   logo naturalnie płaskie ~20px, daleko od nowego progu 56-20=36)
	   zostaje bez zmian wysokości. */
	min-height: 56px;
	padding: 10px 16px;
	font-size: 14px;
	text-indent: initial;
	cursor: pointer;
	color: var(--ink);
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > label > input[type=radio],
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > label > input[type=radio] {
	grid-column: 1;
	width: 18px;
	height: 18px;
	max-width: none;
	margin-left: 0;
	accent-color: var(--sage-deep);
	cursor: pointer;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > label .bm-payment-channel-method-name,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > label .bm-payment-channel-group-method-name {
	grid-row: 1;
	grid-column: 2;
	font-weight: 600;
	color: var(--ink);
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > span.bm-payment-channel-method-desc,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > span.bm-payment-channel-method-desc {
	/* display:none/initial (pokazuje się tylko po zaznaczeniu) zostaje
	   niedotknięty — to zachowanie z frontend.css, tylko pozycja/kolor.
	   Opis jest rodzeństwem <label>, nie jego dzieckiem grida — zamiast
	   grid-row/grid-column (nie miałoby efektu poza gridem <label>),
	   wcięcie przez padding-left dopasowane do szerokości radio+odstęp+
	   padding labela (18px + 10px + 14px = 42px), żeby wizualnie
	   wyrównać się pod kolumną nazwy. */
	padding: 0 14px 12px calc(18px + 10px + 14px);
	color: var(--ink-soft);
	font-size: 12.5px;
}

/* Nie każdy kanał ma opis — Blue_Media_Gateway.php echo'uje albo
   $item->getInlineHtml() (BLIK/Google Pay/karta — własny widget, patrz
   .bm-blik-code-wrapper niżej), albo esc_html($item->getDescription())
   wprost z odpowiedzi API Autopay. Dla kanałów bez własnego widgetu I
   bez opisu z API (potwierdzone na żywo: PayPo w tym sklepie) wychodzi
   dosłownie pusty <span class="bm-payment-channel-method-desc"></span>
   — bez tej reguły, po zaznaczeniu takiego kanału, sam padding z reguły
   wyżej pokazywał się jako pusta, niczym niewypełniona przestrzeń pod
   nazwą metody. :empty (dosłownie zero dzieci/tekstu — sprawdzone: PHP
   nie dokłada tu żadnego białego znaku) zeruje to tylko wtedy, gdy
   naprawdę nie ma treści; jeśli Autopay kiedyś zacznie zwracać opis dla
   tego kanału, przestanie być pusty i automatycznie wróci normalny
   padding z reguły wyżej — nic tu nie trzeba będzie ręcznie poprawiać. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > span.bm-payment-channel-method-desc:empty,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > span.bm-payment-channel-method-desc:empty {
	padding: 0;
}

/* Pole na kod BLIK (templates/blik_0.php wtyczki: <label>Podaj kod BLIK.
   </label><input id="bluemedia_blik_code">, oba wewnątrz
   .bm-blik-code-wrapper, wewnątrz span.bm-payment-channel-method-desc
   wyżej — stąd dziedziczy wcięcie/kolor już ustawione tam). Pole samo w
   sobie nie miało ŻADNEJ klasy do zaczepienia (id wystarcza, bije
   wszystko inne specyficznością) — bez tych reguł renderowało się jako
   gołe, przeglądarkowe pole tekstowe (padding 1px 2px, obramowanie
   "inset" systemowe). Duże cyfry + odstęp między nimi (letter-spacing)
   sugerują format kodu bez twardego podziału "000 000" w samej wartości
   pola (utrudniłby wpisywanie/walidację) — placeholder z tym formatem
   dopisuje assets/js/main.js (wtyczka go nie ustawia), czysto
   prezentacyjnie, bez zmiany zachowania pola (maxlength/inputmode
   zostają, ustawia je wtyczka). */
.bm-blik-code-wrapper label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
}

/* Rozmiar zmniejszony po feedbacku na żywym checkoucie (pierwsza wersja:
   padding 14px 16px, font-size 22px, letter-spacing .35em, max-width
   220px — "ciut za duże"). */
#bluemedia_blik_code {
	display: block;
	width: 100%;
	max-width: 200px;
	padding: 12px 14px;
	font-family: var(--font-mono);
	font-size: 19px;
	letter-spacing: 0.3em;
	text-align: center;
	color: var(--ink);
	background: var(--bg);
	border: 1px solid var(--line-input);
	border-radius: 4px;
}

/* Ten sam wzorzec co reszta pól checkoutu (ok. linii 4556) — box-shadow,
   nie zmiana obramowania, i bez outline:none (sitewide :focus-visible
   zostaje przy nawigacji klawiaturą). */
#bluemedia_blik_code:focus {
	/* outline: none — ten sam powód co ok. linii 4556 (checkout): sitewide
	   :focus-visible dubluje się z tym box-shadow na polach tekstowych,
	   dając podwójną ramkę. */
	outline: none;
	box-shadow: inset 0 0 0 1.5px var(--sage-deep);
}

.bm-blik-code-wrapper > span {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: var(--ink-soft);
}

/* max-height MUSI mieć !important — odkryte dopiero przy dopracowywaniu
   wyglądu na żywo (nie na etapie Task 2/3): frontend.css linia 7–11 ma
   "#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_
   bluemedia img { max-height: unset !important; ... }" — selektor łapie
   KAŻDY <img> w całym poddrzewie bramki, więc dotyczy też logo kanałów,
   nie tylko logo etykiety bramki (to drugie naprawione już w punkcie 3
   wyżej, ten sam mechanizm kolizji). Bez !important tutaj max-height się
   nie liczyło (potwierdzone getComputedStyle: max-height "none"), więc
   kwadratowe logo BLIK/PayPo (naturalnie 123×123px) renderowało się na
   pełne 64px (ograniczone tylko przez max-width), zamiast na limit
   wysokości jak logo Przelewu (naturalnie płaskie 130×36px, które i tak
   mieściło się w limicie) — stąd zauważalnie różna wysokość kart mimo
   wspólnego min-height na <label> i logo "dominujące" nad nazwą.

   44px (podniesione z 22px, potem z 28px, potem z 36px, po trzech
   rundach feedbacku na żywym checkoucie — pierwsza wersja była za
   mała/nieczytelna): logo PayPo to gotowy, dostarczony przez Autopay
   baner z DWOMA liniami drobnego tekstu wypalonymi w obrazku ("PayPo",
   "Kup teraz, zapłać za 30 dni"). max-width zostaje przy 72px (bez
   zmian) — logo Przelewu (naturalnie płaskie 130×36px) jest ograniczane
   głównie przez max-width, nie max-height, więc podniesienie tylko
   wysokości powiększa realnie same kwadratowe loga (BLIK/PayPo,
   naturalnie 123×123px), nie rozciąga już wystarczająco czytelnego logo
   Przelewu. Wysokość karty przy tym bez zmian (patrz zmniejszony padding
   na <label> wyżej — 44px logo + 10px padding z każdej strony = te same
   64px co wcześniej 36px logo + 14px padding). */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-item > label .bm-payment-channel-method-logo,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul li.bm-payment-channel-group-item > label .bm-payment-channel-group-method-logo {
	grid-column: 3;
	height: auto;
	max-height: 44px !important;
	width: auto;
	max-width: 72px;
	object-fit: contain;
	margin-left: auto;
}

/* Neutralizuje regułę "Make classic card channel row match Checkout
   Block payment row look" z frontend.css (osobny, bardziej specyficzny
   selektor tylko dla grupy karty) — bez tego karta płatnicza wygląda
   inaczej niż pozostałe kanały mimo reguł wyżej. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item {
	border: 1px solid var(--line-input) !important;
	margin-top: 0;
	padding: 0 !important;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item.selected,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item.selected {
	border-color: var(--sage-deep) !important;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item > label,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item > label {
	/* 56px (nie "auto") — ta sama wysokość co pozostałe kanały (punkt 2
	   wyżej), na wypadek gdyby sklep kiedyś włączył kanał karty. */
	min-height: 56px !important;
	column-gap: 10px;
	font-size: 14px;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item > label > input[type=radio],
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item > label > input[type=radio] {
	display: block !important;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item > label .bm-payment-channel-method-logo,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item > label .bm-payment-channel-method-logo {
	/* max-height !important z tego samego powodu co punkt 2 wyżej
	   (frontend.css linia 7-11, kolizja na każdym <img> w poddrzewie
	   bramki). 44px/72px — te same wymiary co pozostałe kanały (spójność),
	   patrz uzasadnienie przy punkcie 2. */
	width: auto !important;
	max-width: 72px !important;
	max-height: 44px !important;
	padding-right: 0;
	background-color: transparent !important;
	margin-left: auto;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-karta-platnicza li.bm-payment-channel-item.selected > span.bm-payment-channel-method-desc,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-platnosc-karta li.bm-payment-channel-item.selected > span.bm-payment-channel-method-desc {
	margin-top: 0 !important;
	font-size: 12.5px;
}

/* Ten sam mechanizm kolizji id="shipping_method" co przy <li> kanału:
   bezklasowy <li>-wrapper grupy łapie pełny styl karty z
   "#shipping_method li" — obramowanie, promień, padding i zaznaczenie —
   rysując drugą, większą kartę wokół karty kanału. Wewnętrzny <ul> trzyma
   domyślne 40px wcięcia listy (nasze "#shipping_method { padding: 0 }"
   dotyczy tylko <ul> z tym id, nie tego zagnieżdżonego). Zweryfikowane na
   żywym DOM: przed poprawką ten wrapper <li> miał
   border: 1px solid var(--sage-deep) (po zaznaczeniu kanału w środku,
   przez ":has(input:checked)") + border-radius: 4px + padding: 12px 14px +
   background: var(--sage-pale), a jego <ul> padding-left: 40px — po
   poprawce wszystko zerowane, jak niżej. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: transparent;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div > li > ul {
	padding-left: 0;
}

/* Etykieta bramki "Autopay" (<li... .payment_method_bluemedia > label > img>)
   miała tu wcześniej regułę zmniejszającą duże (100×80px) logo do rozmiaru
   plakietki. Punkt 5 niżej w tej sekcji ukrywa całą etykietę bramki
   (display: none — .co-hint z punktu 1 już pokrywa branding, a przy
   jedynej bramce nie ma realnego wyboru do zakomunikowania), więc logo w
   jej środku się w ogóle nie renderuje — reguła sizingu byłaby martwym
   kodem, usunięta stąd zamiast zostawiona bez efektu. Szczegóły kolizji z
   frontend.css (dwa selektory na tym samym <img>, jeden z max-height:
   unset !important), gdyby etykieta kiedyś wróciła: patrz historia gita
   tego pliku, commit wprowadzający punkt 3. */

/* Rozwinięta siatka banków pod kanałem grupowym "Przelew internetowy"
   (Task 3) — frontend.css ma tu flex-wrap na kontenerze (linie 174–181
   frontend.css) i sztywne 65×65px logo na kafelku (linia 208–216);
   zamieniamy na responsywną siatkę i kafelki w języku reszty checkoutu
   (Task 2 wyżej w tej sekcji). Mechanizm pokazywania/ukrywania listy
   (.bm-group-expandable-wrapper / .active, JS wtyczki) zostaje
   nietknięty — stylujemy tylko układ i wygląd stanu .active. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper.active {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	padding-top: 4px;
}

@media (max-width: 420px) {
	#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper.active {
		grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	}
}

/* Kafelek banku — DOM (Blue_Media_Gateway.php) nadaje temu <li> dokładnie
   tę samą klasę "bm-payment-channel-item" co kartom kanałów najwyższego
   poziomu z Task 2 (border: 1px solid transparent !important — patrz
   reguła i komentarz przy Task 2 wyżej w tej sekcji, frontend.css linia
   42–47, selektor "> div > li > ul li.bm-payment-channel-item" —
   descendant, więc dosięga też <li> zagnieżdżone w .bm-group-expandable-
   -wrapper). Trzeba dorównać !important na border, inaczej przegrywa
   niezależnie od specyficzności.

   margin-bottom: 0 jest tu celowe i zweryfikowane na żywym DOM: WŁASNA
   reguła Task 2 (wyżej w tej sekcji, ten sam selektor
   "> div > li > ul li.bm-payment-channel-item") ustawia
   "margin-bottom: 10px" (bez !important, myślane dla pionowego stosu
   samodzielnych kart kanałów) — dotyka też tych kafelków z tego samego
   powodu (współdzielona klasa + descendant selector) i bez zerowania
   dokładałoby się do "gap: 8px" z Step 1, dając 18px odstępu między
   wierszami siatki kontra 8px między kolumnami. Nasz selektor ma więcej
   klas (2: bm-group-expandable + bm-group-expandable-wrapper, kontra ich
   1: bm-payment-channel-item), więc wygrywa specyficznością bez
   !important. */
/* aspect-ratio: 1 — loga banków są kwadratowe (potwierdzone na żywych
   zrzutach: ING/mBank/PKO/Erste itd., wszystkie w proporcji 1:1), więc
   kafelek też jest kwadratem niezależnie od tego, ile kolumn zmieści
   siatka na danej szerokości — bez tego (dawniej: szeroki, płaski
   kafelek dopasowany do 48px logo) proporcje kafelka i logo się gryzły. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper > li {
	display: block;
	position: relative;
	width: auto;
	aspect-ratio: 1;
	border: 1px solid var(--line-input) !important;
	border-radius: 4px;
	background: var(--bg);
	margin-bottom: 0;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* front.js (addCurrentClass) przełącza klasę ".selected" na tym samym
   <li class="bm-payment-channel-item"> niezależnie, czy to kafelek banku
   czy kanał najwyższego poziomu — trafia więc w niego też frontend.css
   linia 48–50 "li.bm-payment-channel-item.selected {
   border: 1px solid #87ca8d !important }". Nasz selektor ma tu wyższą
   specyficzność (3 klasy: bm-group-expandable + bm-group-expandable-
   -wrapper + pseudoklasa :checked wewnątrz :has, kontra ich 2: bm-payment-
   -channel-item + selected), ale przy starciu !important kontra
   nie-!important zawsze wygrywa !important bez względu na specyficzność —
   border-color też musi mieć !important, żeby w starciu !important
   kontra !important zadziałała wyższa specyficzność na naszą korzyść. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper > li:has(input:checked) {
	border-color: var(--sage-deep) !important;
	background: var(--sage-pale);
}

/* Frontend.css ma tu ogólniejszą regułę (linia 51–60) "> div > li > ul
   li.bm-payment-channel-item > label" z display:flex/min-height:100px
   bez !important — nasz selektor (2 klasy: bm-group-expandable +
   bm-group-expandable-wrapper) ma więcej klas niż ich 1 (bm-payment-
   -channel-item), więc wygrywa samą specyficznością, bez !important. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper > li > label {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	min-height: unset;
	padding: 10px;
	cursor: pointer;
}

/* width/max-width/height/object-fit bez !important: selektor identyczny
   z frontend.css linia 208–216 (ta sama reguła, którą nadpisujemy),
   wygrywamy kolejnością (style.css ładuje się po frontend.css). Logo
   wypełnia kwadratowy kafelek (aspect-ratio: 1 na <li> wyżej) — loga
   banków są same w sobie kwadratowe (1:1), więc po prostu skalują się
   razem z kafelkiem, bez osobnego przeliczania na każdą szerokość ekranu.

   max-height MUSI mieć !important z tego samego powodu co logo kanałów
   najwyższego poziomu (punkt 2 wyżej): frontend.css linia 7–11 to GOŁY
   descendant-selektor "...payment_method_bluemedia img" (bez klasy
   logo), więc łapie KAŻDY <img> w całym poddrzewie bramki, w tym ten
   tutaj, mimo że nie jest to ten sam selektor co linia 208–216. Bez
   !important max-height:100% przegrywałoby z max-height:unset i logo
   próbowałoby renderować się w naturalnym rozmiarze, wystając poza
   kwadratowy kafelek zamiast się do niego dopasować. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper > li > label .bm-payment-channel-method-logo {
	max-width: 100%;
	max-height: 100% !important;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* span.bm-payment-channel-method-desc jest rodzeństwem <label> zarówno w
   kartach kanałów (punkt 2 wyżej) jak i w kafelkach banku tutaj — reguła
   "padding: 0 14px 12px calc(...)" z punktu 2 (myślana dla opisu pod nazwą
   kanału) trafia więc też w ten (zawsze pusty — wtyczka nie renderuje tu
   treści) opis kafelka banku. Zerujemy padding, bo semantycznie nic go tu
   nie potrzebuje — potwierdzone przez getComputedStyle() na żywym DOM:
   przed poprawką padding tego <span> to "0px 14px 12px 42px" (przeciek z
   punktu 2), po poprawce "0px".
   Test wysokości kafelka (getBoundingClientRect(), czysty przeładowany
   checkout, wybór banku przez realne kliknięcie) NIE pokazał różnicy
   wysokości między starym (przeciekniętym) a nowym paddingiem — w obu
   przypadkach 70.2px, bez skoku. Chrome nie generuje linebox dla
   całkowicie pustego (bez węzłów potomnych) elementu inline, więc pionowy
   padding pustego <span> nie wpływa tu na layout niezależnie od jego
   wartości. Innymi słowy: przeciek paddingu jest realny i słusznie go tu
   nie chcemy (higiena/poprawność reguły), ale w tej wersji DOM/CSS sam w
   sobie nie powodował widocznego wzrostu kafelka — jeśli w przyszłości
   opis kafelka przestanie być pusty (np. wtyczka zacznie renderować tu
   tekst), ten sam padding zacznie mieć realny efekt wizualny i ta poprawka
   będzie już go poprawnie neutralizować. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia .payment_box.payment_method_bacs > .bm-payment-channels-wrapper ul.woocommerce-shipping-methods > div.bm-group-expandable .bm-group-expandable-wrapper > li > span.bm-payment-channel-method-desc {
	padding: 0;
}

@media (max-width: 620px) {
	/* Kolizja ID (patrz komentarz przy regule <li> wyżej): mobilny wzorzec
	   "cała karta klikalna" (#shipping_method li label::before) generuje
	   nakładkę na KAŻDYM <label> w drzewie kanałów — w tym na
	   <label for="bm-blik-code"> pola kodu BLIK, którego `for` wskazuje
	   nieistniejący element (input ma id="bluemedia_blik_code"), więc
	   nakładka przykrywa pole i nic nie aktywuje. Zweryfikowane hit-testem
	   (document.elementFromPoint na środku pola BLIK): przed poprawką
	   trafiał w <label for="bm-blik-code"> (martwa nakładka), po poprawce
	   w <input id="bluemedia_blik_code"> — pole staje się dotykalne. */
	#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia label::before {
		content: none;
	}
	/* Radio z powrotem widoczne — etykieta kanału i tak jest klikalna
	   natywnie (<label for>), więc nakładka nie jest tu potrzebna. */
	#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia .bm-payment-channels-wrapper input[type="radio"] {
		display: block;
	}
}

/* 5. Autopay to dziś jedyna bramka płatności w sklepie — WooCommerce mimo
   to renderuje ją jako pozycję na "liście bramek do wyboru"
   (.wc_payment_methods .wc_payment_method, z kartą/obramowaniem/tłem po
   zaznaczeniu — reguła myślana dla RZECZYWISTEGO wyboru między kilkoma
   bramkami). Przy jednej bramce ta karta staje się zbędną, dodatkową
   ramką WOKÓŁ już ostylowanych kart kanałów z punktu 2 — dokładnie ten
   efekt "karta w karcie" widoczny na żywo (zrzuty użytkownika) i
   niezgodny z referencyjnym wzorem (płaska lista kart, bez otaczającego
   boxa). Neutralizujemy kartę TYLKO dla tej konkretnej bramki
   (.payment_method_bluemedia w selektorze) — inne ewentualne bramki w
   przyszłości zachowują normalny wygląd karty wyboru.
   Etykieta bramki (duże, potem zmniejszone w punkcie 3 logo Autopay)
   znika też całkowicie — branding jest już pokryty przez .co-hint
   (punkt 1) nad nagłówkiem sekcji, a przy jedynej bramce nie ma
   realnego wyboru do zakomunikowania.
   Wszystkie cztery reguły niżej zaczynają się od "#payment " (jak reszta
   tej sekcji) celowo, nie kosmetycznie: bez ID specyficzność samych klas
   (np. "li.wc_payment_method.payment_method_bluemedia", 2 klasy + 1
   element) przegrywała z ".wc_payment_methods .wc_payment_method:has
   (input:checked)" (3 "klasy" licząc wkład :has(), 1 element) dla
   background/border-color, oraz z ".wc_payment_methods .wc_payment_method
   > label" dla display etykiety — potwierdzone na żywo (getComputedStyle:
   tło zostawało sage-pale, etykieta zostawała inline-flex, mimo tych
   reguł). ID podnosi specyficzność ponad KAŻDĄ kombinację samych klas,
   więc rozwiązuje to bez !important (to nasze własne, wcześniejsze reguły
   motywu, nie !important z frontend.css wtyczki — tu obowiązuje zwykła
   zasada z CLAUDE.md: podnieść specyficzność, nie sięgać po !important). */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia {
	border: 0;
	border-radius: 0;
	background: transparent;
}

#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > label {
	display: none;
}

/* Padding "0 18px 18px 48px" na tym elemencie (rdzeniowa reguła
   "#payment .wc_payment_methods .wc_payment_method .payment_box"
   wcześniej w tym pliku) odsuwał treść w prawo, żeby zrobić miejsce na
   etykietę/radio bramki nad nią — skoro etykieta wyżej zniknęła, ten
   wcięcie nie ma już czego rezerwować i tylko niepotrzebnie zwęża karty
   kanałów. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia > .payment_box.payment_method_bluemedia {
	padding: 0;
}

/* Dwa małe trójkąty ("ogonki dymka") nad kartami kanałów na zrzutach
   użytkownika — CSS trójkąty (przezroczyste obramowania na ::before/
   ::after .payment_box, technika bez obrazka), wskazujące wizualnie z
   powrotem na usuniętą wyżej etykietę bramki. Bez sensu bez tej etykiety,
   więc czyścimy — źródłowa reguła ma wystarczającą specyficzność (klasa
   .woocommerce-checkout + #payment + .payment_box), żeby potrzebować tego
   samego traktowania ID co reguły wyżej. */
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia .payment_box::before,
#payment ul.wc_payment_methods > li.wc_payment_method.payment_method_bluemedia .payment_box::after {
	content: none;
}

/* ==========================================================================
   Sekcja "Opinie kupujących" na stronie głównej (front-page.php) —
   zbiorcza ocena z Allegro zamiast cytowanych opinii. Nagłówek i opis
   reużywają .block-head bez zmian; tu tylko mała podpisana data pod
   nagłówkiem i wyśrodkowanie przycisku CTA.
   ========================================================================== */
.block-head .opinie-allegro-source {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--ink-soft);
	margin: -6px 0 14px;
}

.opinie-allegro-cta {
	justify-content: center;
}

/* ==========================================================================
   Sekcja "jak wybrać" na kategoriach sezonowych Boże Narodzenie/Jesień
   (taxonomy-product_cat.php, hook stylove_azury_seasonal_category_section
   w functions.php) — .block/.block-head/.explain-grid/.btn-ghost reużyte
   bez zmian, tu tylko rząd linków do poradników pod siatką kart.
   ========================================================================== */
.seasonal-guide-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
}