/**
 * Lista de sub câmpul de căutare.
 *
 * ⚠️ Nu există machetă pentru ea *(confirmat cu Seba, 11 aug)*, deci e
 * construită din limbajul care există deja pe site: fundal alb, ramă
 * `#C4D2D7`, rază 8, albastrul `#056E9B` pentru accente, griul `#53798A`
 * pentru rândul al doilea. Aceleași valori ca pe carduri și pe filtre.
 *
 * 🔑 Selectoarele sunt prefixate cu `.inco-antet` acolo unde se ating de
 * elemente pe care le stilizează și tema — `[type="search"]` din `reset.css`
 * cântărește cât o clasă, iar tema se încarcă după noi. → §4g
 */

.inco-sug-gazda { position: relative; }

.inco-sug {
	position: absolute;
	inset-inline: 0;
	top: calc(100% + 6px);
	z-index: 60;

	max-block-size: min(70vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;

	padding: 6px;
	background: var(--pure-white, #fff);
	border: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(10, 67, 92, .12);
}

.inco-sug[hidden] { display: none; }

/* ─────────────────────────────────────────────────────────── rândurile ── */

/*
 * 🔴 AȘEZAREA se declară o dată. Doar CULOAREA se repetă pe stări.
 *
 * Prima variantă punea tot — inclusiv `padding` — și pe `:hover`, ca să bată
 * tema. Cu asta regula a ajuns la (0,3,0), adică mai tare decât propria mea
 * regulă de separator, care e (0,2,0). Măsurat pe site: paddingul primului
 * produs sărea de la `14px 8px 8px` la `8px` sub mouse, deci **rândul scădea
 * cu 6px și toată lista se mișca.**
 *
 * 🔑 Am declarat starea de hover ca să apăr culoarea *(§4n)* și am șters cu
 * ea propriul meu spațiu. **Ce aperi pe o stare se limitează la ce chiar poate
 * fi furat pe starea aia.** Tema atinge `color` și `text-decoration`, nu
 * `padding`.
 */
.inco-sug__rand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 6px;
}

.inco-antet .inco-sug__rand,
.inco-antet .inco-sug__rand:hover,
.inco-antet .inco-sug__rand:focus {
	text-decoration: none;
	color: var(--darker-cyan, #0A435C);
}

/*
 * 🔑 Mouse-ul și tastatura arată LA FEL.
 *
 * Două înfățișări diferite pentru aceeași stare l-ar fi făcut pe cel care
 * navighează cu săgețile să creadă că e altundeva decât e.
 */
.inco-antet .inco-sug__rand:hover,
.inco-antet .inco-sug__rand:focus,
.inco-antet .inco-sug__rand.is-ales {
	background: var(--white-bg, #FAFCFF);
}

/* ──────────────────────────────────────────────────────── scurtăturile ── */

/* Așezarea pe clasa simplă; culoarea, prefixată, fiindcă pe ea trage tema. */
.inco-sug__scurt { justify-content: space-between; font-weight: 600; font-size: 14px; }

.inco-antet .inco-sug__scurt,
.inco-antet .inco-sug__scurt:hover,
.inco-antet .inco-sug__scurt:focus { color: var(--cyan, #056E9B); }

.inco-sug__scurt-nr {
	flex: 0 0 auto;
	padding: 1px 8px;
	border-radius: 999px;
	background: #E8F8FF;
	font-size: 12px;
	font-weight: 600;
	color: var(--cyan, #056E9B);
}

/* Linie de despărțire înaintea primului produs, dacă sunt și scurtături. */
.inco-sug__scurt + .inco-sug__produs {
	margin-block-start: 6px;
	padding-block-start: 14px;
	border-block-start: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 0 0 6px 6px;
}

/* ───────────────────────────────────────────────────────────── produse ── */

.inco-sug__poza {
	flex: 0 0 40px;
	inline-size: 40px;
	block-size: 40px;
	object-fit: cover;
	border: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 6px;
	background: var(--white-bg, #FAFCFF);
}

.inco-sug__text { min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }

/*
 * Numele se taie la două rânduri. Titlurile din catalog au și 90 de caractere
 * *(„ABENA Aleza Abri-Soft Superdry, cu banda adezvia, 1800 ml, 90x75 cm…")*,
 * iar un rând care crește cât vrea ar face lista să sară sub deget.
 */
.inco-sug__nume {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
}

/* ─────────────────────────────────────────────────────────── prețurile ──
 *
 * 🔑 Aceeași citire ca pe cardul de produs: **suma pe care o plătești e cea
 * scoasă în evidență**, iar cea tăiată stă lângă ea, ștearsă. Doar așezarea
 * diferă — pe card una sub alta, aici pe un rând, fiindcă sugestia are o
 * singură linie sub nume.
 */
.inco-sug__preturi {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
}

.inco-sug__pret {
	font-size: 13px;
	font-weight: 600;
	color: var(--cyan, #056E9B);
}

/* La reducere, prețul curent trece pe verdele nostru. */
.inco-sug__pret--redus {
	color: var(--green, #0B8669);
}

/*
 * Prețul dinainte: gri și tăiat, cu exact culoarea de pe card
 * *(`.inco-product-price__regular`)*, ca cele două să se citească la fel.
 */
.inco-sug__pret-vechi {
	font-size: 12px;
	font-weight: 500;
	color: #9CA3AF;
	text-decoration: line-through;
}

.inco-sug__epuizat {
	font-size: 12px;
	font-weight: 500;
	color: var(--inputs-palceholder, #648696);
}

/* ──────────────────────────────────────────────────── coada și golul ──── */

.inco-sug__toate {
	justify-content: center;
	margin-block-start: 6px;
	padding-block: 10px;
	border-block-start: 1px solid var(--light-gray, #C4D2D7);
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
}

.inco-antet .inco-sug__toate,
.inco-antet .inco-sug__toate:hover,
.inco-antet .inco-sug__toate:focus { color: var(--cyan, #056E9B); }

.inco-sug__gol {
	margin: 0;
	padding: 14px 10px;
	font-size: 14px;
	line-height: 1.4;
	color: #53798A;
	text-align: center;
}

/* Pe telefon lista se deschide în sertarul de căutare, deci ține de lățimea lui. */
@media (max-width: 899.98px) {
	.inco-sug { max-block-size: min(60vh, 380px); }
	.inco-sug__nume { font-size: 13px; }
}