/* =========================================================================
   Pagina de comparator: capul paginii + tabelul.

   Sursa: Figma „Comparator produse - 1440px" #18024:1067 și componenta
   „Compare table" #18261:13381 (desktop #18261:13062, mobil #18261:13380).

   Depinde de `pill.css` (butoane, toast, `.inco-cmp-sr`) — dependența e
   declarată în `Assets::enqueue()`, deci ordinea e garantată.
   ========================================================================= */

.inco-cmp {
	--inco-cmp-ink: #0A435C;
	--inco-cmp-primary: #056E9B;
	--inco-cmp-muted: #53798A;
	--inco-cmp-border: #C4D2D7;
	--inco-cmp-border-soft: #D5F2FF;
	--inco-cmp-bg: #FAFCFF;
	--inco-cmp-tint: #E8F8FF;
	--inco-cmp-white: #FFFFFF;
	--inco-cmp-star: #F5A623;
	--inco-cmp-ok: #3A720D;
	--inco-cmp-warn: #B07312;
	--inco-cmp-sale: #D73B3B;
	--inco-cmp-dash: #939EC3;
	--inco-cmp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Lățimea coloanei de etichete, din machetă: 232px. */
	--inco-cmp-label-w: 232px;

	box-sizing: border-box;
	max-width: 1344px;
	margin-inline: auto;
	padding-block: 24px 64px;
	font-family: var(--inco-cmp-font);
	color: var(--inco-cmp-ink);
}

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

/* ═══════════════════════════════════════════════ Lățimea containerului ══

   🔴 Tema plafonează conținutul la 1140px, tabelul are 1344px.

   Hello Elementor scrie în `theme.css`:

     body:not([class*=elementor-page-]) .site-main { max-width: 1140px; … }

   la specificitatea (0,2,1). `body.inco-cmp-page main.site-main` ajunge la
   (0,2,2) și câștigă fără `!important`. Aceeași soluție e deja folosită pentru
   coș, finalizare, cont și favorite.

   ⚠️ Clasa `inco-cmp-page` se pune din PHP DOAR pe pagina noastră — vezi
   `Assets::body_class()`. Legată de altceva, ar fi lățit pagini care n-au cerut.
   ═════════════════════════════════════════════════════════════════════════ */

body.inco-cmp-page main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

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

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

/* ═══════════════════════════════════════════════════════════ Firimituri ══ */

.inco-cmp__crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 16px;
	line-height: 1;
	color: var(--inco-cmp-muted);
}

/*
 * Clasa părintelui în selector: `.page-content a` al temei (0,1,1) pune
 * subliniere pe orice link din conținut. `.inco-cmp .inco-cmp__crumbs a`
 * ajunge la (0,3,1).
 */
.inco-cmp .inco-cmp__crumbs a {
	color: var(--inco-cmp-muted);
	text-decoration: none;
}

.inco-cmp .inco-cmp__crumbs a:hover,
.inco-cmp .inco-cmp__crumbs a:focus-visible {
	color: var(--inco-cmp-primary);
	text-decoration: underline;
}

.inco-cmp__crumbs [aria-current="page"] {
	font-weight: 500;
	color: var(--inco-cmp-primary);
}

.inco-cmp__crumb-sep {
	display: inline-flex;
	color: var(--inco-cmp-border);
}

@media (max-width: 767px) {
	.inco-cmp__crumbs {
		margin-bottom: 16px;
		font-size: 14px;
		letter-spacing: .01em;
	}
}

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

.inco-cmp__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

.inco-cmp__intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
	/*
	 * 466px din machetă. Titlul e centrat în cadrul lui, subtitlul aliniat la
	 * stânga — exact așa e în Figma (#18180:8904 CENTER, #18180:8914 LEFT).
	 * Nu „corectăm" designul: titlul centrat pe o coloană îngustă e o alegere
	 * vizibilă, nu o scăpare.
	 */
	max-width: 466px;
}

.inco-cmp__title {
	margin: 0;
	font-weight: 600;
	font-size: 48px;
	line-height: 1;
	letter-spacing: -0.02em;
	/*
	 * 🔴 `left`, nu `center` — corectat 11 aug.
	 *
	 * Titlul era centrat într-o casetă de 466px, iar paragraful de sub el
	 * aliniat la stânga: **desenul literei începea cu 16px mai la dreapta
	 * decât textul de dedesubt.** Măsurat: cutia la 48, textul la 64.
	 *
	 * ⚠️ Cele două lățimi se contraziceau — sub 900px regula de mai jos punea
	 * deja `left`. A treia oară în proiect când machetele nu sunt de acord
	 * între ele și **varianta de telefon are dreptate**.
	 */
	text-align: left;
	color: var(--inco-cmp-ink);
}

.inco-cmp__lede {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.4;
	color: var(--inco-cmp-muted);
}

.inco-cmp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

@media (max-width: 767px) {
	.inco-cmp__head {
		margin-bottom: 24px;
	}

	.inco-cmp__title {
		font-size: 24px;
		text-align: left;
	}

	.inco-cmp__lede {
		font-size: 14px;
		letter-spacing: .01em;
	}

	/* Cele două butoane împart rândul, ca în varianta de 360px. */
	.inco-cmp__actions {
		gap: 16px;
	}

	.inco-cmp__actions .inco-cmp__cta {
		flex: 1 1 auto;
	}
}

/* ═══════════════════════════════════════════ Îndemnul de glisare (mobil) ══

   Din varianta de 360px a machetei (#18191:8558). Ascuns pe ecrane late: acolo
   tabelul încape și un îndemn de glisare ar fi o instrucțiune falsă.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-cmp__swipe {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 16px;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .01em;
	color: var(--inco-cmp-muted);
}

.inco-cmp__swipe svg {
	flex: 0 0 auto;
	color: var(--inco-cmp-border);
}

@media (max-width: 1024px) {
	.inco-cmp__swipe {
		display: flex;
	}
}

/*
 * 🔴 …dar nu când n-are ce glisa.
 *
 * Comentariul din `Page.php` promitea deja că îndemnul apare „doar când tabelul
 * chiar depășește ecranul" — și nu era adevărat: se lua după lățimea ferestrei,
 * care nu spune nimic despre cât de lat e tabelul. Cu un singur produs, pe
 * telefon tabelul intră acum întreg pe ecran, deci „Glisează pentru a vedea
 * toate produsele" ar fi rămas un îndemn către nicăieri. → §4o
 *
 * ⚠️ Clasa se pune din JS și **ascunde**, nu arată: dacă scriptul nu rulează,
 * comportamentul rămâne exact cel de dinainte. Un îndemn în plus e o supărare;
 * unul lipsă, când tabelul chiar se derulează, e conținut pierdut.
 */
.inco-cmp.inco-cmp--fara-derulare .inco-cmp__swipe {
	display: none;
}

/* ═══════════════════════════════════════════════════════════ Tabelul ════ */

.inco-cmp__table {
	border: 1px solid var(--inco-cmp-border);
	border-radius: 20px;
	background: var(--inco-cmp-white);
	/* Colțurile rotunjite taie și zona derulabilă, altfel prima celulă iese din rază. */
	overflow: hidden;
	/*
	 * 🔴 `position: relative` NU e cosmetică — ea oprea derularea laterală a
	 * ÎNTREGII pagini pe telefon. Semnalat de Seba: „comparatorul face overflow
	 * pe mobil când e deschis cu produse înăuntru".
	 *
	 * Măsurat la 360px, cu 4 produse în listă: pagina se putea trage lateral
	 * **319px** *(`document.scrollWidth` **679** în loc de 360)*.
	 *
	 * 🔑 Vinovatul nu era tabelul, care e cuminte: `.inco-cmp__scroll` are
	 * `overflow-x: auto`, deci cei 820px ai lui se derulează ÎN el *(măsurat:
	 * client 326, scroll 820)*. Vinovate erau **elementele de 1px pentru
	 * cititoarele de ecran** — `.inco-cmp-sr` din celulele tabelului, plus
	 * `.screen-reader-text` ale WooCommerce. Sunt `position: absolute`, iar
	 * `.inco-cmp__table` era `position: static`.
	 *
	 * 🔑 **`overflow: hidden` nu taie un descendent absolut dacă blocul lui
	 * conținător e mai sus decât cel care taie.** Fiind static, tabelul nu era
	 * bloc conținător pentru nimeni: elementele își luau poziția de la
	 * `main.site-main`, scăpau de sub foarfece și se așezau la x=678 — adică
	 * fix lățimea la care se întindea documentul. Un element de **1×1px,
	 * invizibil**, lățea pagina cu 319px.
	 *
	 * ⚠️ De aceea nu se vedea nimic ieșind din ecran: partea trasă lateral e
	 * goală. Se simte doar ca pagină care „fuge" la deget.
	 *
	 * Cu `relative`, tabelul devine blocul lor conținător și `overflow: hidden`
	 * îi taie. Probat pe ecran: `scrollWidth` **679 → 360**, derulare laterală
	 * **319 → 0**, iar tabelul se derulează în continuare pe orizontală în
	 * interiorul lui *(820px, neschimbat)*.
	 */
	position: relative;
}

/*
 * Zona derulabilă.
 *
 * `tabindex="0"` + `role="region"` sunt în HTML, nu aici: o zonă care se derulează
 * orizontal trebuie să poată fi derulată și de la tastatură. Fără `tabindex`,
 * cine navighează cu Tab ajunge direct la primul buton din tabel și nu poate
 * ajunge la coloanele din dreapta.
 */
.inco-cmp__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.inco-cmp__scroll:focus-visible {
	outline: 2px solid var(--inco-cmp-primary);
	outline-offset: -2px;
}

/*
 * `table-layout: fixed` + `<colgroup>` din HTML.
 *
 * 🔑 Aici e cheia coloanelor: prima coloană primește lățime fixă, iar coloanele
 * de produs împart restul în mod EGAL, oricâte sunt (1–4). Nimic în CSS nu
 * trebuie să știe numărul lor — de asta e tabel și nu grilă. Vezi comentariul
 * lung din `src/Table.php`.
 *
 * `min-width` ține coloanele citibile: sub asta se derulează, nu se strivește.
 * 232 + 4×212 = 1080, adică lățimea la care tabelul din machetă începe să
 * gliseze.
 */
.inco-cmp__grid {
	width: 100%;
	min-width: 1080px;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 16px;
	color: var(--inco-cmp-ink);
}

.inco-cmp__col--label {
	width: var(--inco-cmp-label-w);
}

/*
 * Tema pune `table th, table td { border: 1px solid #ccc; padding: .5em }` în
 * `theme.css`, la (0,0,1) — deci pierde în fața oricărei clase. Dar
 * `woocommerce.css` are `table.shop_table` cu reguli mai grele; noi nu folosim
 * clasele lor, deci nu ne ating. Bordurile de mai jos sunt cele din machetă:
 * doar linia de jos pe rânduri, plus verticala după coloana de etichete.
 */
.inco-cmp__grid th,
.inco-cmp__grid td {
	border: 0;
	border-bottom: 1px solid var(--inco-cmp-border);
	padding: 18px 16px;
	height: 64px;
	text-align: left;
	vertical-align: middle;
	background: var(--inco-cmp-white);
}

/* Ultimul rând nu are linie: bordura cardului o face deja. */
.inco-cmp__grid tbody:last-child tr:last-child th,
.inco-cmp__grid tbody:last-child tr:last-child td {
	border-bottom: 0;
}

/* ------------------------------------------------ coloana de etichete */

/*
 * 🔴 Coloana de etichete NU e lipită. Decis de Seba, 10 august.
 *
 * Era `position: sticky; left: 0`, ca să vezi pe ce rând ești cât derulezi.
 * Pe telefon însă fundalul ei nu era desenat în timpul derulării — `<table>`
 * cu `border-collapse: collapse` pune fundalurile celulelor în stratul
 * tabelului, unde `z-index`-ul celulei nu mai contează — deci eticheta și
 * valoarea se vedeau una peste alta.
 *
 * Am încercat remediul *(`separate` + straturi + umbră)*. Seba: „eu zic să nu
 * mai fie sticky". Are dreptate și dintr-un motiv în plus: **pe desktop tabelul
 * încape, deci `sticky` nu făcea nimic acolo** — plătea un risc care se vedea
 * doar pe telefon, fără să aducă ceva unde e loc.
 */
.inco-cmp__corner,
.inco-cmp__rowlabel {
	border-right: 1px solid var(--inco-cmp-border);
	background: var(--inco-cmp-white);
}

.inco-cmp__rowlabel {
	padding: 18px 20px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	color: var(--inco-cmp-muted);
}

/* Colțul din stânga sus: „Comparator" + „N din 4 produse". */
.inco-cmp__corner {
	padding: 24px 20px;
	vertical-align: middle;
	text-align: center;
}

.inco-cmp__corner-kicker {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inco-cmp-muted);
}

.inco-cmp__corner-count {
	display: block;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.3;
	color: var(--inco-cmp-ink);
}

/* ------------------------------------------------------- banda de secțiune */

.inco-cmp__band th {
	padding: 10px 20px;
	height: auto;
	border-top: 1px solid var(--inco-cmp-border);
	background: var(--inco-cmp-tint);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--inco-cmp-primary);
}

/* Prima bandă n-are linie deasupra: capul de tabel o are deja dedesubt. */
.inco-cmp__section:first-of-type .inco-cmp__band th {
	border-top: 0;
}

/* ------------------------------------------------------------ valorile */

.inco-cmp__v {
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	color: var(--inco-cmp-ink);
}

.inco-cmp__v--muted {
	color: var(--inco-cmp-muted);
}

/*
 * Prețul vine din `get_price_html()`, deci împachetat în `.woocommerce-Price-amount`,
 * `<bdi>`, `<del>`, `<ins>`. Fără resetare, tema îl stiliza separat și cele două
 * jumătăți (preț tăiat / preț curent) ieșeau cu mărimi diferite.
 */
.inco-cmp__v--price {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-weight: 600;
	color: var(--inco-cmp-primary);
}

.inco-cmp__v--price .woocommerce-Price-amount,
.inco-cmp__v--price bdi,
.inco-cmp__v--price ins {
	font: inherit;
	color: inherit;
	text-decoration: none;
	background: none;
}

.inco-cmp__v--price del {
	font-weight: 500;
	font-size: 14px;
	color: var(--inco-cmp-muted);
	text-decoration: line-through;
}

.inco-cmp__v--price del .woocommerce-Price-amount,
.inco-cmp__v--price del bdi {
	font: inherit;
	color: inherit;
}

/*
 * „3,80 lei / bucată" — sub preț, în CELULA prețului. Fără rând propriu,
 * hotărât de Seba pe 15 august.
 *
 * `display: block` sub un preț `inline-flex`: prețul își păstrează așezarea pe
 * linia de bază *(preț vechi tăiat + preț nou)*, iar linia asta trece dedesubt
 * fără să intre în acel flex.
 *
 * Mărimea și culoarea sunt cele ale prețului tăiat de deasupra — e tot un text
 * care explică prețul, nu unul care concurează cu el.
 */
.inco-cmp__unit {
	display: block;
	margin-block-start: 4px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--inco-cmp-muted);
}

.inco-cmp__unit .woocommerce-Price-amount,
.inco-cmp__unit bdi {
	font: inherit;
	color: inherit;
}

/* Liniuța pentru „nu se aplică": dreptunghi 24×2, din machetă. */
.inco-cmp__dash {
	display: block;
	width: 24px;
	height: 2px;
	border-radius: 2px;
	background: var(--inco-cmp-dash);
}

/* Bulina cu bifă, pentru atributele de tip „Da". */
.inco-cmp__yes {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: #E8EFFF;
	color: var(--inco-cmp-primary);
}

/* --------------------------------------------------------------- stele */

.inco-cmp__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.inco-cmp__stars {
	display: inline-flex;
	font-size: 15px;
	line-height: 1;
	letter-spacing: .5px;
}

.inco-cmp__star {
	color: var(--inco-cmp-border-soft);
}

.inco-cmp__star.is-on {
	color: var(--inco-cmp-star);
}

/*
 * Jumătatea de stea: un gradient tăiat exact la mijloc, aplicat pe text.
 * Fără al doilea element suprapus și fără `clip-path` calculat.
 */
.inco-cmp__star.is-half {
	background: linear-gradient(90deg, var(--inco-cmp-star) 50%, var(--inco-cmp-border-soft) 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.inco-cmp__rating-num {
	font-weight: 500;
	font-size: 14px;
	line-height: 1;
	color: var(--inco-cmp-muted);
}

/* ------------------------------------------------------------- pastila de stoc */

.inco-cmp__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
}

.inco-cmp__stock-dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: currentColor;
}

.inco-cmp__stock.is-in {
	background: rgba(58, 114, 13, .1);
	color: var(--inco-cmp-ok);
}

.inco-cmp__stock.is-low {
	background: rgba(245, 166, 35, .12);
	color: var(--inco-cmp-warn);
}

.inco-cmp__stock.is-out {
	background: rgba(215, 59, 59, .1);
	color: var(--inco-cmp-sale);
}

/* ═════════════════════════════════════════════════ Coloana unui produs ══ */

.inco-cmp__product {
	padding: 16px;
	vertical-align: top;
	background: var(--inco-cmp-white);
}

.inco-cmp__card {
	position: relative;
}

/*
 * „×"-ul de scoatere: 28×28, pastilă `#E8F8FF`, colțul din dreapta sus al
 * imaginii (x:207 y:8 într-un cadru de 235 în machetă). Uneltele lor (inimă,
 * comparare) stau în colțul din STÂNGA sus, deci nu se suprapun.
 *
 * Clasa dublată: `[type=button]` din tema Hello cântărește (0,1,0).
 */
.inco-cmp__remove.inco-cmp__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--inco-cmp-tint);
	color: var(--inco-cmp-muted);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.inco-cmp__remove.inco-cmp__remove:hover,
.inco-cmp__remove.inco-cmp__remove:focus-visible {
	background: var(--inco-cmp-sale);
	color: #FFFFFF;
}

.inco-cmp__remove.is-busy {
	opacity: .5;
	pointer-events: none;
}

/*
 * „✕ Elimină" — butonul de sub card, PE TELEFON. Cerut de Seba, 15 aug.
 *
 * 🔴 A treia încercare — abia asta e din MACHETĂ, nu dedusă.
 *
 * Prima l-a făcut cât cardul, 42 înălțime: forma lui „Golește lista". A doua,
 * după o captură, l-a strâns la 36. Cifrele adevărate au venit din panoul de
 * proprietăți al Figmei *(`Compare table → Card → Button`)*:
 *
 *   Hug 84 × 22 · rază 8 · chenar 1px `grey-border-fill` (#C4D2D7)
 *   fundal `white-bg` (#FAFCFF) · padding 4/8/4/8 · gap 8
 *
 * 🔑 **„Golește lista" golește TOT, deci are dreptul să fie mare; ăsta scoate
 * un produs.** Forma se ia după CE FACE controlul, nu după ce e lângă el.
 * → §4cm
 *
 * ⚠️ Fundalul e `#FAFCFF`, nu transparent — pe rândul cu bandă gri al
 * tabelului diferența se vede.
 * ⚠️ 22px e sub ținta de apăsare de pe telefon; vezi `::after` mai jos.
 *
 * Roșul e păstrat pentru APĂSARE, nu pentru repaus: butonul șterge ceva, dar
 * stă sub fiecare card, iar trei pastile roșii într-o coloană ar fi strigat
 * mai tare decât „Adaugă în coș". Aceeași gramatică cu „×"-ul rotund de mai
 * sus, care abia la hover trece pe `--inco-cmp-sale`.
 *
 * Clasa dublată: `[type=button]` din tema Hello cântărește (0,1,0).
 */
.inco-cmp__remove-wide.inco-cmp__remove-wide {
	display: none;                 /* apare doar sub 768px, mai jos */
	position: relative;
	align-items: center;
	justify-content: center;
	gap: 8px;
	inline-size: auto;             /* „Hug" — strâns pe conținut, iese 84px */
	block-size: auto;
	margin: 12px auto 0;           /* centrat sub card */
	padding: 4px 8px;
	border: 0;
	border-radius: 8px;
	background: var(--inco-cmp-bg, #FAFCFF);
	color: var(--inco-cmp-ink, #0A435C);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;             /* 4 + 14 + 4 = 22, înălțimea din machetă */
	white-space: nowrap;
	cursor: pointer;

	/*
	 * ⚠️ Chenarul e `box-shadow`, nu `border`.
	 *
	 * În Figma linia e desenată ÎNĂUNTRU: cadrul rămâne 22 cu tot cu ea. Un
	 * `border` în CSS se adaugă pe DINAFARĂ, deci butonul ieșea **24**, cu
	 * aceleași valori scrise. Umbra internă desenează exact aceeași linie fără
	 * să atingă cutia.
	 */
	box-shadow: inset 0 0 0 1px var(--inco-cmp-border, #C4D2D7);
	transition: box-shadow .18s ease, color .18s ease, background-color .18s ease;
}

/*
 * ⚠️ Ținta de apăsare, nu forma.
 *
 * Macheta cere 22px înălțime — pe telefon asta e sub jumătate din cei ~44px pe
 * care îi cere un deget. Butonul rămâne 22 la vedere, dar zona apăsabilă se
 * întinde invizibil cu 11px sus și jos.
 *
 * 👉 Nu se face din `padding`: ăla ar fi împins chenarul și ar fi schimbat
 * chiar forma din machetă.
 */
.inco-cmp__remove-wide.inco-cmp__remove-wide::after {
	content: "";
	position: absolute;
	inset: -11px -8px;
}

/* ⚠️ `@media (hover: hover)`: pe ecran tactil `:hover` rămâne lipit după
   atingere, deci butonul ar fi rămas roșu până atingi altceva — iar ăsta e
   exact butonul care trăiește pe telefon. *(§4bf)* */
@media (hover: hover) {
	.inco-cmp__remove-wide.inco-cmp__remove-wide:hover {
		box-shadow: inset 0 0 0 1px var(--inco-cmp-sale, #D73B3B);
		color: var(--inco-cmp-sale, #D73B3B);
	}
}

.inco-cmp__remove-wide.inco-cmp__remove-wide:focus-visible {
	box-shadow: inset 0 0 0 1px var(--inco-cmp-sale, #D73B3B);
	color: var(--inco-cmp-sale, #D73B3B);
}

.inco-cmp__remove-wide.is-busy {
	opacity: .5;
	pointer-events: none;
}

/* Marcajul trimite 16, ca la „×"-ul rotund — aici desenul e lângă un text de
   14, deci se strânge la 14 ca să stea pe aceeași greutate optică cu el. */
.inco-cmp__remove-wide svg {
	flex: 0 0 auto;
	inline-size: 14px;
	block-size: 14px;
}

/*
 * 🔴 Butonul „Compară" RĂMÂNE și în tabel — cerut de Seba, 11 aug.
 *
 * Aici era o regulă care îl ascundea, cu un motiv bun scris lângă ea: ar fi al
 * doilea control pentru aceeași acțiune, lângă „×"-ul de mai sus.
 *
 * ⚠️ Motivul se ține doar dacă „×"-ul se VEDE. El stă la `top: 8px; right: 8px`
 * din `.inco-cmp__card` — adică în colțul din dreapta al unei casete late cât
 * pagina, la un ecran distanță de imaginea produsului. Seba s-a uitat la card
 * și n-a găsit nimic cu care să scoată produsul.
 *
 * 🔑 Un al doilea control nu e o dublură dacă primul e într-un loc în care
 * nimeni nu se uită. Comutatorul stă acum lângă inima de favorite, unde stă pe
 * tot restul site-ului — deci se recunoaște fără să fie căutat.
 *
 * 👉 Dacă hotărâm că „×"-ul e de ajuns, se șterge el, nu ăsta: al nostru e
 * consecvent cu restul site-ului, al lui e o excepție a paginii.
 */

/* Cardul umple coloana; grila lor nu se aplică, e un singur card. */
.inco-cmp__card .inco-product-card {
	width: 100%;
}

/* Cardul care iese din tabel se stinge înainte de reîncărcare. */
.inco-cmp__card.is-leaving {
	opacity: 0;
	transform: scale(.97);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

/* Plasă de siguranță, când Inco Plus lipsește. */
.inco-cmp .inco-cmp__plain {
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-decoration: none;
	color: var(--inco-cmp-ink);
}

.inco-cmp__plain img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.inco-cmp__plain-title {
	font-weight: 600;
	font-size: 16px;
	line-height: 1.2;
}

.inco-cmp__plain-price {
	font-weight: 600;
	color: var(--inco-cmp-primary);
}

/* ═════════════════════════════════════════════════════════ Listă goală ══ */

.inco-cmp__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 64px 24px;
	border: 1px solid var(--inco-cmp-border);
	border-radius: 16px;
	background: var(--inco-cmp-white);
	text-align: center;
}

.inco-cmp__empty svg {
	color: var(--inco-cmp-border);
}

.inco-cmp__empty h2 {
	margin: 0;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.1;
	color: var(--inco-cmp-ink);
}

.inco-cmp__empty p {
	max-width: 42ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--inco-cmp-muted);
}

@media (max-width: 767px) {
	.inco-cmp {
		--inco-cmp-label-w: 140px;
	}

	/*
	 * 🔴 Pe telefon tabelul se face cât produsele care sunt, nu cât patru.
	 *
	 * Era `min-width: 820px` fix — adică 140 *(eticheta)* + 4 × 170, indiferent
	 * dacă aveai un produs sau patru. Cu un singur produs se derulau **510px
	 * de gol** în dreapta. Semnalat de Seba.
	 *
	 * 🔑 **Motivul celor patru sloturi nu se aplică aici.** Ele există fiindcă
	 * pe desktop tabelul umple containerul, deci cu un produs coloana lui ar fi
	 * ajuns 680px în loc de 340 — cardul își schimba mărimea după câte lucruri
	 * comparai *(cerința lui Seba din 10 august)*. Pe telefon tabelul e deja mai
	 * lat decât ecranul, deci `width: 100%` nu întinde nimic: **lățimea o dă
	 * chiar `min-width`.** Coloana rămâne 170 și cu unul, și cu patru — deci
	 * cardul NU se schimbă, iar derularea în gol dispare.
	 *
	 * `140 + n × 170`: un produs **310** *(intră pe ecran, zero derulare)* · două
	 * 480 · trei 650 · patru **820, exact cât era**.
	 *
	 * ⚠️ Rezerva `4` e pentru cazul în care variabila n-ar ajunge din PHP: atunci
	 * se comportă exact ca înainte, nu se strică nimic.
	 */
	.inco-cmp__grid {
		min-width: calc(var(--inco-cmp-label-w) + var(--inco-cmp-produse, 4) * 170px);
		font-size: 14px;
	}

	/*
	 * Sloturile libere nu ocupă nimic pe telefon.
	 *
	 * Rămân în tabel *(nu se scot din marcaj)*: pe desktop sunt chiar ele cele
	 * care țin coloana la mărime fixă. Aici doar se strâng la zero, iar
	 * `border-inline: 0` scoate și liniile lor verticale — altfel s-ar fi
	 * strâns într-un fir vizibil la capătul rândului.
	 */
	.inco-cmp__grid .inco-cmp__product--liber,
	.inco-cmp__grid .inco-cmp__cell--liber {
		width: 0;
		padding: 0;
		border-inline: 0;
	}

	.inco-cmp__grid th,
	.inco-cmp__grid td {
		padding: 12px;
		height: 56px;
	}

	.inco-cmp__rowlabel {
		padding: 12px;
		font-size: 13px;
	}

	.inco-cmp__corner {
		padding: 16px 12px;
	}

	.inco-cmp__corner-kicker {
		font-size: 11px;
	}

	.inco-cmp__corner-count {
		font-size: 15px;
	}

	.inco-cmp__v {
		font-size: 14px;
	}

	.inco-cmp__empty {
		padding: 40px 16px;
	}

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

/*
 * Sub 768px se schimbă butonul, nu se adaugă unul.
 *
 * 🔑 Cele două nu se văd niciodată împreună. Pe telefon cardul are 146px, iar
 * colțul din stânga sus e deja ocupat de inima de favorite și de comutatorul de
 * comparare; „×"-ul din dreapta ar fi a treia pastilă peste aceeași imagine,
 * fără nicio etichetă care să spună ce face.
 *
 * 👉 Pe desktop rămâne „×"-ul: acolo cardul e o coloană de tabel, iar un buton
 * lat sub fiecare coloană ar fi însemnat patru butoane pe un rând.
 */
@media (max-width: 767px) {
	.inco-cmp__remove.inco-cmp__remove {
		display: none;
	}

	.inco-cmp__remove-wide.inco-cmp__remove-wide {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.inco-cmp__remove.inco-cmp__remove,
	.inco-cmp__remove-wide.inco-cmp__remove-wide,
	.inco-cmp__card.is-leaving {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTONUL PRINCIPAL, IMAGINEA ȘI COLOANA LIPITĂ — 10 august 2026
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Wrapperul componentei noastre. `.inco-cta` aduce variabilele; clasa asta
 * doar îi dă lățimea, fiindcă butonul e `flex: 1 1 auto` în interiorul ei.
 */
.inco-cmp__cta {
	display: flex;
	min-width: 0;
}

/* `is-busy` e steagul pus de `compare.js`; componenta noastră știe `is-loading`. */
.inco-cmp__cta .inco-add-to-cart.is-busy {
	opacity: .55;
	pointer-events: none;
}

/*
 * 🔴 Cardul din tabel nu se mai întinde cât coloana.
 *
 * Tabelul e `table-layout: fixed` cu `min-width: 820px` și eticheta de 140px,
 * deci coloana produsului e 680px când e un singur produs și 340 când sunt
 * două. Cardul lua toată lățimea, iar caseta imaginii ajungea 521×214: poza
 * nu se deforma (`object-fit: contain`), dar plutea într-un dreptunghi alb
 * de trei ori mai lat decât trebuie.
 *
 * 243px e lățimea maximă a cardului din machetă — ancora de sus a container
 * query-ului. Așa cardul arată identic cu cel din grilă, indiferent câte
 * produse sunt în comparator.
 */
.inco-cmp__card .inco-product-card {
	width: 100%;
	max-width: 243px;
	margin-inline: auto;
}

/*
 * Sloturile libere.
 *
 * Grila are mereu patru coloane de produs, deci cardul are aceeași mărime cu
 * un produs în listă ca și cu patru, iar primul rămâne la stânga în loc să
 * migreze spre mijloc. Celulele libere nu desenează nimic — există ca să țină
 * lățimea coloanei și liniile tabelului.
 */
.inco-cmp__product--liber,
.inco-cmp__cell--liber {
	padding: 0;
}

/*
 * 🔴 Aerul din jurul etichetei butonului.
 *
 * În card butonul e mai lat decât textul, deci centrarea pe `flex: 1` lasă aer
 * de la sine. Aici butonul se strânge după conținut, iar `flex: 1` pe un text
 * cât cutia înseamnă zero — „Adaugă toate în coș" atingea și marginea din
 * stânga, și pastila coșului.
 *
 * Paddingul e simetric, spre deosebire de cei 16px puși doar la început în
 * varianta veche: acolo eticheta ieșea împinsă spre dreapta.
 */
.inco-cmp__cta .inco-add-to-cart__label {
	padding-inline: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Tabelul se schimbă fără reîncărcare
   ---------------------------------------------------------------------------
   🔑 Marcajul vine gata randat de la server — regula despre ce rânduri rămân
   e tot în PHP, într-un singur loc. Aici e doar trecerea de la vechi la nou.

   🔴 Prima variantă stingea și aprindea TOT tabelul, iar Seba a văzut o
   clipire: se golea ecranul pentru o clipă, cu tot cu coloanele care n-aveau
   nicio treabă cu produsul scos. **Ce se schimbă nu e ce se vede că pleacă.**
   Acum tabelul se schimbă instant, pe sub coloana deja stinsă.
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Coloana care pleacă — aceleași valori ca la cardul din wishlist *(.2s ease)*,
 * fiindcă e același gest și trebuie să se simtă la fel.
 *
 * ⚠️ Se stinge doar `opacity`, fără `transform`: celulele unei coloane sunt în
 * rânduri diferite, iar o mutare le-ar fi desprins una de alta.
 */
.inco-cmp__grid .is-leaving {
	opacity: 0;
	transition: opacity .2s ease;
}

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