/* =========================================================================
   Pagina de favorite, ca grilă de carduri.

   Cardurile și grila sunt ale lui Inco Plus (`[inco_products]`). Aici se scrie
   DOAR ce e în jur — capul de pagină, starea goală — plus o singură ajustare a
   grilei lor: coborârea la o coloană pe telefon.
   ========================================================================= */

.inco-wl {
	box-sizing: border-box;
	max-width: 1344px;
	margin-inline: auto;
	padding-block: 32px 64px;
	padding-inline: 0;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #0A435C;
}

.inco-wl * {
	box-sizing: border-box;
}

/*
 * Lățimea plafonată de temă se eliberează la fel ca pe celelalte ecrane.
 * Hello Elementor pune `body:not([class*=elementor-page-]) .site-main
 * { max-width: 1140px }` la (0,2,1); `body .inco-wl` n-ar fi de ajuns, fiindcă
 * regula lor e pe un ANCESTOR — de aceea ținta e tot `main.site-main`.
 */
body.inco-wl-page main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

@media (max-width: 1024px) {
	.inco-wl {
		padding-inline: 20px;
	}
}

@media (max-width: 767px) {
	.inco-wl {
		padding-inline: 16px;
		padding-block: 24px 40px;
	}
}

/* ═══════════════════════════════════════════════════════ Capul paginii ══ */

.inco-wl__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.inco-wl__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-weight: 600;
	font-size: 32px;
	line-height: 1.1;
	color: #0A435C;
}

.inco-wl__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 10px;
	border-radius: 999px;
	background: #E8F8FF;
	color: #056E9B;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.inco-wl__clear.inco-wl__clear {
	flex: 0 0 auto;
}

.inco-wl__clear.is-busy {
	opacity: .6;
	pointer-events: none;
}

@media (max-width: 767px) {
	.inco-wl__title {
		font-size: 24px;
	}

	/* Butonul de golire trece pe toată lățimea, sub titlu. */
	.inco-wl__clear.inco-wl__clear {
		width: 100%;
	}
}

/* ═════════════════════════════════════════════ Grila: 1 coloană pe telefon

   🔴 Ladderul trebuie REPETAT, nu doar suprascris pe valoarea de bază.

   Inco Plus își construiește grila cu o variabilă și container queries:

     .inco-products__grid { --inco-c: 2 }                       (implicit)
     @container (min-width: 560px)  { --inco-c: 3 }
     @container (min-width: 840px)  { --inco-c: 4 }
     @container (min-width: 1120px) { --inco-c: 5 }

   Toate cu specificitate (0,1,0). Dacă am scrie doar
   `.inco-wl .inco-products__grid { --inco-c: 1 }`, acel (0,2,0) ar fi bătut TOATE
   pragurile lor — inclusiv pe cele din container queries, fiindcă un
   `@container` nu adaugă specificitate — și grila ar fi rămas pe o coloană la
   orice lățime.

   De aceea ladderul e rescris integral, cu prefixul nostru și cu valorile cerute:
   1 pe telefon, apoi 2 → 3 → 4. Plafonul `coloane="4"` din shortcode rămâne
   valabil oricum; aici doar coborâm capătul de jos.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-wl .inco-products__grid {
	--inco-c: 1;
}

@container (min-width: 560px) {
	.inco-wl .inco-products__grid {
		--inco-c: 2;
	}
}

@container (min-width: 840px) {
	.inco-wl .inco-products__grid {
		--inco-c: 3;
	}
}

@container (min-width: 1120px) {
	.inco-wl .inco-products__grid {
		--inco-c: 4;
	}
}

/*
 * Cardul care iese din listă se stinge înainte să fie scos din DOM.
 *
 * Fără asta, la scoaterea din favorite cardul dispărea instantaneu și restul
 * grilei sărea — greu de urmărit care card a plecat.
 */
.inco-wl .inco-product-card.is-leaving {
	opacity: 0;
	transform: scale(.97);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

/* ═══════════════════════════════════════════════════════ Stări goale ════ */

.inco-wl__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 24px;
	border: 1px solid #C4D2D7;
	border-radius: 16px;
	background: #FFFFFF;
	text-align: center;
}

.inco-wl__empty svg {
	color: #C4D2D7;
}

.inco-wl__empty h2 {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	color: #0A435C;
}

.inco-wl__empty p {
	max-width: 42ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: #53798A;
}

@media (max-width: 767px) {
	.inco-wl__empty {
		padding: 40px 16px;
	}

	.inco-wl__empty h2 {
		font-size: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inco-wl .inco-product-card.is-leaving {
		transition: none;
	}
}