/*
 * Budziki - Zestawy: blok "Kup w zestawie" na karcie produktu (i shortcode).
 * Ładowany tylko na stronach z blokiem. Poprawki sklepu - w Dodatkowym CSS (klasy asb-upsell*).
 *
 * Obraz wybierany w zestawie ("Obraz w bloku Kup w zestawie"): miniatury składników (domyślnie, karta
 * --no-photo - lista z miniaturami) albo zdjęcie zestawu (karta --photo - zdjęcie + lista samych nazw);
 * zestaw bez zdjęcia zawsze --no-photo.
 * Układ zależy od szerokości miejsca bloku (container query), nie ekranu:
 * - poniżej 700 px (pod koszykiem, pod kategoriami, telefon, wąski shortcode) - karta pionowa:
 *   etykieta / [zdjęcie 72 px | nazwa] / hasło / lista (5 + "i N więcej") / cena, plakietka, przycisk,
 * - od 700 px (przed / pod zakładkami, szeroki shortcode) - pasek: [zdjęcie 160 px] | nagłówek i lista
 *   (od 4 składników w 2 kolumnach, do 8 + "i N więcej") | cena, plakietka, przycisk (do prawej, do dołu).
 * Zdjęcie zestawu zawsze w oprawie: białe tło, ramka, zaokrąglone rogi, mały wewnętrzny odstęp.
 */
.asb-upsell {
	container: asb-upsell / inline-size;
	clear: both;
	box-sizing: border-box;
	/* Pełna szerokość także w rodzicu typu flex (kontener inline-size nie bierze szerokości z treści). */
	width: 100%;
	max-width: 100%;
	/* Odstęp od góry jako padding: przy clear (pod zdjęciem i opisem) margines znika w "clearance". */
	margin: 0;
	padding: 1.25em 0 0;
}

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

/* Nagłówek bloku: mała złota etykieta wersalikami (znacznik dalej h2). */
.asb-upsell .asb-upsell__title {
	margin: 0 0 0.9em;
	color: #d1ab4d;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.asb-upsell__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 12px;
}

/* Wąska karta (domyślnie): pionowo - nagłówek, lista, cena i przycisk. */
.asb-upsell__bundle {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"head"
		"list"
		"aside";
	align-items: start;
	gap: 14px 16px;
	min-width: 0;
	padding: 16px;
	border: 1px solid #f4edea;
	border-radius: 12px;
	background: #fcf8f7;
}

/* Wąska karta ze zdjęciem zestawu: etykieta na górze, pod nią wiersz [zdjęcie 72 px | nazwa], hasło,
   lista i cena na całą szerokość. Nagłówek "rozpuszczony" (display: contents) - jego części są w siatce karty. */
.asb-upsell__bundle--photo {
	grid-template-columns: 72px minmax(0, 1fr);
	grid-template-areas:
		"label label"
		"media name"
		"tagline tagline"
		"list list"
		"aside aside";
	gap: 10px 14px;
}

.asb-upsell__bundle--photo .asb-upsell__head {
	display: contents;
}

.asb-upsell__bundle--photo .asb-upsell__label {
	grid-area: label;
}

.asb-upsell__bundle--photo .asb-upsell__name {
	grid-area: name;
	align-self: center;
}

.asb-upsell__bundle--photo .asb-upsell__tagline {
	grid-area: tagline;
}

/* Odstęp przed listą jak w karcie bez zdjęcia (14 px). */
.asb-upsell__bundle--photo .asb-upsell__list {
	margin-top: 4px;
}

.asb-upsell__media {
	grid-area: media;
	min-width: 0;
}

.asb-upsell__head {
	display: flex;
	grid-area: head;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.asb-upsell__list {
	grid-area: list;
	min-width: 0;
}

.asb-upsell__aside {
	display: flex;
	grid-area: aside;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

/* Zdjęcie zestawu: kwadrat w oprawie (białe tło, ramka, zaokrąglone rogi, mały odstęp), całe widoczne. */
.asb-upsell .asb-upsell__photo {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: 4px;
	border: 1px solid #f4edea;
	border-radius: 10px;
	background: #ffffff;
}

.asb-upsell .asb-upsell__photo img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 6px;
	object-fit: contain;
}

/* Nagłówek karty. */
.asb-upsell .asb-upsell__label {
	color: #d1ab4d;
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.asb-upsell .asb-upsell__name {
	color: inherit;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.asb-upsell .asb-upsell__name:hover,
.asb-upsell .asb-upsell__name:focus {
	color: #d1ab4d;
}

.asb-upsell .asb-upsell__tagline {
	margin: 0;
	color: #d1ab4d;
	font-size: 0.95em;
	line-height: 1.4;
}

/* Lista "W zestawie": miniatura 40 px + nazwa w osobnym wierszu. */
.asb-upsell .asb-upsell__list-title {
	display: block;
	margin: 0 0 6px;
	color: #777777;
	font-size: 0.85em;
}

.asb-upsell .asb-upsell__components {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.asb-upsell .asb-upsell__component {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.35;
	list-style: none;
}

/* Miniatura składnika - ta sama oprawa co zdjęcie zestawu (białe tło, ramka, zaokrąglone rogi, odstęp). */
.asb-upsell .asb-upsell__component-image {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	overflow: hidden;
	padding: 3px;
	border: 1px solid #f4edea;
	border-radius: 8px;
	background: #ffffff;
}

.asb-upsell .asb-upsell__component-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 4px;
	object-fit: contain;
}

.asb-upsell .asb-upsell__component--current .asb-upsell__component-image {
	border: 2px solid #d1ab4d;
}

.asb-upsell a.asb-upsell__component-name {
	color: inherit;
	text-decoration: none;
}

.asb-upsell a.asb-upsell__component-name:hover,
.asb-upsell a.asb-upsell__component-name:focus {
	color: #d1ab4d;
	text-decoration: underline;
}

.asb-upsell .asb-upsell__component--current .asb-upsell__component-name {
	font-weight: 600;
}

.asb-upsell .asb-upsell__bundle--no-photo .asb-upsell__component--more {
	padding-left: 50px;
}

/* Zestaw ze zdjęciem: lista samych nazw - wiersze jak punkty listy. */
.asb-upsell .asb-upsell__bundle--photo .asb-upsell__components {
	gap: 3px;
}

.asb-upsell .asb-upsell__bundle--photo .asb-upsell__component:not(.asb-upsell__component--more)::before {
	content: "";
	flex: 0 0 5px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #d1ab4d;
}

/* Wąska karta: 5 pozycji i swoje "i N więcej"; pozycje 6-8 i "więcej" paska ukryte. */
.asb-upsell .asb-upsell__component--wide,
.asb-upsell .asb-upsell__component--more-wide {
	display: none;
}

.asb-upsell .asb-upsell__component--more a {
	color: #d1ab4d;
	font-weight: 600;
	text-decoration: none;
}

/* Cena zestawu i przekreślona suma w jednym wierszu, pod nimi plakietka. Bez klasy "price" -
   reguły sklepu dla .price (np. inline-flex kwot, który gubi przekreślenie) nie dotyczą bloku. */
.asb-upsell__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	line-height: 1.3;
}

.asb-upsell__price ins {
	background: none;
	font-size: 1.2em;
	font-weight: 700;
	text-decoration: none;
}

.asb-upsell__price del,
.asb-upsell__price del .woocommerce-Price-amount,
.asb-upsell__price del bdi {
	color: #999999;
	font-weight: 400;
	text-decoration: line-through;
	opacity: 1;
}

.asb-upsell__price del {
	font-size: 0.95em;
}

.asb-upsell .asb-upsell__savings {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: #f4edea;
	color: #a8873a;
	font-size: 0.8em;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
}

.asb-upsell .asb-upsell__savings .woocommerce-Price-amount {
	color: inherit;
	font-weight: inherit;
}

/* Przycisk: złote tło, biały tekst, pigułka, tekst w jednej linii; najechanie - czarne tło. */
.asb-upsell a.asb-upsell__button,
.asb-upsell a.asb-upsell__button:visited {
	display: block;
	width: 100%;
	margin: 4px 0 0;
	padding: 11px 24px;
	border: 0;
	border-radius: 999px;
	background: #d1ab4d;
	color: #ffffff;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.asb-upsell a.asb-upsell__button:hover,
.asb-upsell a.asb-upsell__button:focus {
	background: #000000;
	color: #ffffff;
}

.asb-upsell a.asb-upsell__button.loading {
	opacity: 0.7;
}

/* Link "Zobacz koszyk" dodawany przez WooCommerce po dodaniu. */
.asb-upsell a.added_to_cart {
	align-self: center;
	font-size: 0.9em;
}

/* "Pokaż więcej zestawów" - rozwija się na miejscu (bez JS). */
.asb-upsell__more {
	margin: 8px 0 0;
}

.asb-upsell__more > summary {
	display: inline-block;
	color: #d1ab4d;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.asb-upsell__more > summary::-webkit-details-marker {
	display: none;
}

.asb-upsell__more > summary::after {
	content: " \25BE";
}

.asb-upsell__more[open] > summary::after {
	content: " \25B4";
}

.asb-upsell__more .asb-upsell__more-close,
.asb-upsell__more[open] .asb-upsell__more-open {
	display: none;
}

.asb-upsell__more[open] .asb-upsell__more-close {
	display: inline;
}

.asb-upsell__more > .asb-upsell__grid {
	margin-top: 10px;
}

/* Szeroko: pasek w poprzek - [zdjęcie 160 px] | nagłówek i lista | cena i przycisk (do prawej, do dołu). */
@container asb-upsell (min-width: 700px) {
	.asb-upsell__bundle {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"head aside"
			"list aside";
		grid-template-rows: auto 1fr;
		gap: 10px 28px;
		padding: 20px;
	}

	.asb-upsell__bundle--photo {
		grid-template-columns: 160px minmax(0, 1fr) auto;
		grid-template-areas:
			"media head aside"
			"media list aside";
	}

	/* W pasku nagłówek znowu jednym blokiem (etykieta, nazwa, hasło jedno pod drugim). */
	.asb-upsell__bundle--photo .asb-upsell__head {
		display: flex;
	}

	/* Nazwa do lewej jak w pasku bez zdjęcia (w wąskiej karcie wyśrodkowana w pionie obok zdjęcia). */
	.asb-upsell__bundle--photo .asb-upsell__name {
		align-self: auto;
	}

	.asb-upsell__bundle--photo .asb-upsell__list {
		margin-top: 0;
	}

	.asb-upsell .asb-upsell__photo {
		padding: 8px;
	}

	/* Od 4 składników lista w 2 kolumnach, do 8 pozycji. */
	.asb-upsell .asb-upsell__components--cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 20px;
	}

	.asb-upsell .asb-upsell__components--cols .asb-upsell__component--more {
		grid-column: 1 / -1;
	}

	.asb-upsell .asb-upsell__component--wide {
		display: flex;
	}

	.asb-upsell .asb-upsell__component--more-wide {
		display: flex;
	}

	.asb-upsell .asb-upsell__component--more-narrow {
		display: none;
	}

	.asb-upsell__aside {
		align-self: end;
		align-items: flex-end;
		min-width: 220px;
		text-align: right;
	}

	.asb-upsell__price {
		justify-content: flex-end;
	}

	.asb-upsell a.asb-upsell__button {
		display: inline-block;
		width: auto;
	}
}