/**
 * Cross-sell w koszyku, drawerze i na stronie zamówienia — styl bloku (moduł perfun-cart-xsell).
 *
 * Mobile-first 360 px. Makieta (plan §6.1): koszyk 328 × 191 (2 wiersze po 65 px, miniatura 44),
 * drawer 332 × 113 (1 wiersz 54 px, miniatura 48); przycisk ≥ 44 × 44.
 * Zero `!important`, kolory z tokenów `--perfun-*` z wartością zapasową.
 *
 * @package Perfun_Cart_Xsell
 * @version 1.1.0
 */

/* ── Kontenery obce: kasujemy chrome, zanim JS przeniesie blok ───────────────── */

/* Drawer: karta siedzi w <li> mini-koszyka, dopóki JS jej nie wyniesie — bez resetu „karta w karcie”. */
li.pfn-mc-xsell-li {
	padding: 0;
	border: 0;
	margin: 0;
	min-height: 0;
	list-style: none;
}

/* Koszyk: przeniesiony widget (`pfn-xsell-moved`) nie może robić drugiej karty wokół naszej.
   Dubluje `style.css` ~17074 (zniknie z widgetem „Dodaj dezodorant”); tamta ma `margin: 0 !important`,
   więc `margin-bottom` zadziała dopiero po jej usunięciu. */
.woocommerce-cart .cart-collaterals > .widget.pfn-xsell-widget.pfn-xsell-moved {
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
	margin-bottom: 16px;
	width: 100%;
}

/* ── Karta ───────────────────────────────────────────────────────────────────── */

.pfn-xsell,
.pfn-xsell * {
	box-sizing: border-box;
}

.pfn-xsell {
	max-width: 100%;
	/* Makieta maluje kartę #EEF3FD (`.xsell` w perfun-koszyk.html, `.mc-xsell` w perfun-minicart.html) —
	   bez tego blok jest trzecią z rzędu białą kartą. Tokenu nie ma w `:root` child theme, więc działa
	   wartość zapasowa; tak samo stoi stary widget deo (style.css:17115). */
	background: var(--perfun-blue-tint, #EEF3FD);
	border: 1px solid var(--perfun-border, #ecf2fb);
	border-radius: var(--perfun-radius, 12px);
	padding: 14px 16px;
	font-family: var(--perfun-font, 'DM Sans', -apple-system, sans-serif);
	color: var(--perfun-text, #0f1a2e);
	--perfun-muted: #5c6b8c; /* makiety; globalny token ma na bieli 4,31:1 */
}

/* Nadtytuł: złoto kanonu przyciemnione do AA (5,42:1). Podwójny selektor, bo Shoptimizer ma
   `.widget p { font-size: 14px }` o wyższej specyficzności (zmierzone @360 2026-09-09). */
.pfn-xsell .pfn-xsell__eyebrow {
	margin: 0 0 4px;
	font-size: var(--fs-xs, 11px);
	font-weight: var(--fw-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.3;
	color: color-mix(in oklab, var(--perfun-gold, #c9a96e) 70%, #000);
}

.pfn-xsell__h {
	margin: 0 0 10px;
	font-family: var(--perfun-font, 'DM Sans', -apple-system, sans-serif);
	font-size: 13px;
	font-weight: var(--fw-bold, 700);
	line-height: 1.3;
	letter-spacing: var(--ls-tight, -0.01em);
	color: var(--perfun-text, #0f1a2e);
}

/* Potwierdzenie po realnym dodaniu („GOTOWE” / „DODANO”). Białe, bo na karcie w odcieniu
   niebieskiego ramka z `color-mix` zlewała się z tłem. */
.pfn-xsell .pfn-xsell__done {
	margin: 0 0 10px;
	padding: 8px 10px;
	border-radius: var(--perfun-radius-sm, 8px);
	background: var(--perfun-bg, #ffffff);
	font-size: var(--fs-sm, 12px);
	line-height: 1.4;
	color: var(--perfun-text, #0f1a2e);
}

.pfn-xsell__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── Wiersz ──────────────────────────────────────────────────────────────────── */

.pfn-xsell__row {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	column-gap: 10px;
	row-gap: 4px;
	align-items: center;
	min-height: 65px;
	padding: 4px 0;
	list-style: none;
}

/* Shoptimizer .widget li { margin-bottom } ma (0,2,1). */
.pfn-xsell .pfn-xsell__list .pfn-xsell__row {
	margin: 0;
}

.pfn-xsell__row + .pfn-xsell__row {
	border-top: 1px solid var(--perfun-border, #ecf2fb);
}

.pfn-xsell__img {
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--perfun-radius-sm, 8px);
	overflow: hidden;
	border: 1px solid var(--perfun-border, #ecf2fb);
	background: var(--perfun-bg, #ffffff);
}

.pfn-xsell__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	color: transparent; /* alt nie prześwituje przed wczytaniem */
}

/* min-width: 0 — długa nazwa nie rozpycha kolumny (przewijanie w bok @360). */
.pfn-xsell__body {
	min-width: 0;
}

.pfn-xsell__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	font-size: var(--fs-sm, 12px);
	font-weight: var(--fw-semibold, 600);
	line-height: 1.3;
	color: var(--perfun-text, #0f1a2e);
	text-decoration: none;
}

.pfn-xsell__meta {
	display: block;
	font-size: var(--fs-sm, 12px);
	line-height: 1.4;
	color: var(--perfun-muted, #6b7a9a);
}

.pfn-xsell__price {
	font-weight: 800; /* makieta; skala tokenów kończy się na 700 */
	color: var(--perfun-text, #0f1a2e);
}

/* Shoptimizer `.widget ins span.amount` (0,2,2) dokłada 2 px przed kwotą i przed „zł”. */
.pfn-xsell .pfn-xsell__price ins .amount,
.pfn-xsell .pfn-xsell__price ins .amount span {
	margin-left: 0;
}

.pfn-xsell__omnibus {
	display: block;
	font-size: var(--fs-xs, 11px);
	line-height: 1.4;
	color: var(--perfun-muted, #6b7a9a);
}

.pfn-xsell__omnibus .wc-price-history.prior-price.lowest {
	margin-top: 0;
}

/* 1lh: równa wysokość kart także bez uzasadnienia; em dla przeglądarek bez lh. */
.pfn-xsell__why {
	display: block;
	min-height: 1.4em;
	min-height: 1lh;
	font-size: var(--fs-sm, 12px);
	line-height: 1.4;
	color: var(--perfun-muted, #6b7a9a);
}

/* Komunikat błędu wchodzi pod całą szerokość wiersza, nie obok przycisku. */
.pfn-xsell .pfn-xsell__err {
	grid-column: 1 / -1;
	margin: 2px 0 0;
	font-size: var(--fs-sm, 12px);
	line-height: 1.4;
	color: #b42318;
}

/* ── Przycisk ────────────────────────────────────────────────────────────────── */

.pfn-xsell__add {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--perfun-radius-btn, 8px);
	background: var(--perfun-blue, #2b6cd7);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--fs-xs, 11px);
	font-weight: var(--fw-bold, 700);
	line-height: 1;
	letter-spacing: var(--ls-wide, 0.04em);
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(43, 108, 215, 0.15);
	transition: background-color 0.15s ease;
}

.pfn-xsell__add:focus-visible {
	outline: 2px solid color-mix(in oklab, var(--perfun-gold, #c9a96e) 70%, #000);
	outline-offset: 3px;
}

.pfn-xsell .pfn-press:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	/* Zablokowany przycisk („Niedostępny”, przeliczanie koszyka) nie ma ciemnieć jak aktywny. */
	.pfn-xsell__add:not([aria-disabled="true"]):hover {
		background: var(--perfun-blue-dark, #1a4fa8);
	}
	.pfn-xsell__name:hover {
		text-decoration: underline;
	}
}

.pfn-xsell__add[aria-disabled="true"] {
	cursor: default;
}

/* Odmowa bez komunikatu („Niedostępny”): `data-busy` zostaje tylko na tej ścieżce — `busy()` bloku go nie ustawia.
   Biały napis na #5c6b8c ma ok. 5,3:1, więc AA przy 11 px bold. */
.pfn-xsell__add[data-busy]:not(.is-loading) {
	background: var(--perfun-muted, #5c6b8c);
}

/* Blok liczony dla nieaktualnego koszyka (trwa przeliczanie kuponu / ilości / dostawy). */
[aria-busy="true"] .pfn-xsell__add {
	opacity: 0.55;
	pointer-events: none;
}

/* Wysyłka trwa: tekst niewidoczny (trzyma szerokość przycisku), na wierzchu pierścień. */
.pfn-xsell__add.is-loading {
	color: transparent;
}

.pfn-xsell__add.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: pfn-cx-spin 0.7s linear infinite;
}

@keyframes pfn-cx-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Bez animacji: zamiast pierścienia zostaje sam tekst („Dodaję…” wstawia xsell.js). */
@media (prefers-reduced-motion: reduce) {
	.pfn-xsell__add {
		transition: none;
	}
	.pfn-xsell .pfn-press:active {
		transform: none;
	}
	.pfn-xsell__add.is-loading {
		color: #ffffff;
	}
	.pfn-xsell__add.is-loading::after {
		display: none;
	}
}

/* ── Drawer (mini-koszyk): niższy wiersz, większa miniatura ──────────────────── */

.pfn-xsell[data-loc="drawer"] {
	margin-top: 14px;
	padding: 10px 12px;
}

.pfn-xsell[data-loc="drawer"] .pfn-xsell__row {
	grid-template-columns: 48px 1fr auto;
	min-height: 54px;
	padding: 0;
}

.pfn-xsell[data-loc="drawer"] .pfn-xsell__img {
	width: 48px;
	height: 48px;
}

/* Obietnica stanu A wymienia metody dostawy — ścieśniona interlinia zamiast krótszego tekstu. */
.pfn-xsell[data-loc="drawer"] .pfn-xsell__h {
	margin-bottom: 6px;
	line-height: 1.25;
}

.pfn-xsell[data-loc="drawer"] .pfn-xsell__eyebrow {
	margin-bottom: 2px;
}

/* ── Drawer: suwak na scroll-snap (bez biblioteki, przesuwa się palcem także bez JS) ── */

.pfn-xsell[data-loc="drawer"] .pfn-xsell__list {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain; /* koniec suwaka nie ciągnie za sobą drawera */
	scrollbar-width: none;
}

.pfn-xsell[data-loc="drawer"] .pfn-xsell__list::-webkit-scrollbar {
	display: none;
}

.pfn-xsell[data-loc="drawer"] .pfn-xsell__list .pfn-xsell__row {
	flex: 0 0 100%;
	min-width: 0;
	border-top: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

@media (prefers-reduced-motion: no-preference) {
	.pfn-xsell[data-loc="drawer"] .pfn-xsell__list {
		scroll-behavior: smooth;
	}
}

.pfn-xsell__nav {
	display: flex;
	align-items: center;
	margin: 2px -10px -8px 0; /* strzałki 44 px nie dokładają wysokości ponad pasek */
}

.pfn-xsell__nav[hidden] {
	display: none;
}

.pfn-xsell__dots {
	display: flex;
	gap: 6px;
	margin-right: auto;
}

.pfn-xsell__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: color-mix(in oklab, var(--perfun-text, #0f1a2e) 22%, transparent);
}

.pfn-xsell__dots i.is-on {
	background: var(--perfun-text, #0f1a2e);
}

.pfn-xsell__arrow {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--perfun-text, #0f1a2e);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(43, 108, 215, 0.15);
}

.pfn-xsell__arrow[data-dir="-1"] svg {
	transform: scaleX(-1);
}

.pfn-xsell__arrow[aria-disabled="true"] {
	opacity: 0.3;
	cursor: default;
}

.pfn-xsell__arrow:focus-visible {
	outline: 2px solid var(--perfun-gold, #c9a96e);
	outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
	.pfn-xsell__arrow:not([aria-disabled="true"]):hover {
		color: var(--perfun-blue, #2b6cd7);
	}
}

/* ── Strona zamówienia: blok między zgodami a przyciskiem „Kupuję i płacę” ──── */

.pfn-xsell-widget[data-pfn-xsell="checkout"] {
	margin: 0 0 16px;
}

/* Na czas dodania z bloku reszta koszyka jest `inert` (xsell.js) — przygaszona jak blokada Woo. */
.pfn-cx-lock {
	opacity: 0.6;
}