/**
 * Arhiva de produse.
 *
 * Valorile vin din machetă, măsurate nod cu nod → `26-template-arhiva.md` §6.
 * Ancorele sunt 1440 și 360, ca peste tot în proiect.
 *
 * Convenție de clase: `.inco-arh*`. Cardul și grila rămân ale lor
 * (`.inco-product-card`, `[inco_products]`) — aici doar li se dă locul.
 */

/* ============================================== butoanele noastre, toate ====*/
/*
 * 🔴 Hello nu stilizează doar repausul butoanelor, ci și hover-ul și focusul:
 *     [type="button"]:hover, …, button:hover { background-color: #c36; color: #fff }
 * Aia e (0,2,0) — atribut + pseudo-clasă — deci **bate o regulă de repaus scrisă
 * cu două clase**, oricât de corectă. Pe 7 august antetele de filtru se făceau
 * roz sub mouse, deși repausul era deja reparat.
 *
 * → 🔑 Regula, ca extensie la §4g: când tema intră peste noi, se declară TOATE
 *   STĂRILE, nu doar cea din captură. Aici, o dată pentru toate butoanele
 *   arhivei; fiecare își pune mai jos doar accentul lui.
 *
 * ⚠️ Cardul de produs NU e în listă: el își declară deja stările, din 31 iulie.
 */
.inco-arh .inco-filtru__antet:hover,
.inco-arh .inco-filtru__antet:focus,
.inco-arh .inco-filtru__inchide:hover,
.inco-arh .inco-filtru__inchide:focus,
.inco-arh .inco-arh-bara__filtre:hover,
.inco-arh .inco-arh-bara__filtre:focus,
.inco-arh .inco-arh-bara__aplica:hover,
.inco-arh .inco-arh-bara__aplica:focus {
	background: var(--pure-white, #fff);
	color: var(--dark-blue, #0A435C);
	text-decoration: none;
}
/* Antetele și ×-ul n-au fundal nici în repaus, deci nici sub mouse. */
.inco-arh .inco-filtru__antet:hover,
.inco-arh .inco-filtru__antet:focus,
.inco-arh .inco-filtru__inchide:hover,
.inco-arh .inco-filtru__inchide:focus {
	background: none;
	color: var(--blue, #056E9B);
}
.inco-arh .inco-arh-bara__filtre:hover,
.inco-arh .inco-arh-bara__filtre:focus,
.inco-arh .inco-arh-bara__aplica:hover,
.inco-arh .inco-arh-bara__aplica:focus {
	border-color: var(--blue, #056E9B);
	color: var(--blue, #056E9B);
}
/* Ăsta chiar are fundal plin: se închide la culoare, nu se face roz. */
.inco-arh .inco-filtru__aplica:hover,
.inco-arh .inco-filtru__aplica:focus {
	background: #045C82;
	color: var(--pure-white, #fff);
	text-decoration: none;
}

/* ================================================== lățimea zonei de conținut =*/
/*
 * 🔴 Găsit la verificarea P8, 9 august: pe `/magazin/` containerul ieșea **1108**
 * în loc de 1344, deci cardurile ajungeau la **179px** — adică sub pragul de
 * 200 al container query-ului, iar cardul trecea în varianta de MOBIL: buton
 * doar cu iconiță, pe desktop, la 1440.
 *
 * Cauza: `main.site-main { max-width: 1140px }` din Hello. Pe pagina de produs
 * o neutralizasem încă din v1.9.1; pe arhivă n-am făcut-o niciodată, fiindcă pe
 * rutele de categorie și brand nu se vedea — acolo tema nu aplică aceeași regulă.
 *
 * Hello o scrie ca `body:not([class*=elementor-page-]) .site-main`, iar `:not()`
 * ia specificitatea argumentului → (0,2,1). Cu `html body … main.site-main`
 * suntem peste, fără `!important`.
 *
 * `:has()` ca să prindă exact paginile care ne aparțin: nu atingem alte arhive.
 * → 🔑 Un bug care apare pe O SINGURĂ rută nu e mai mic, e doar mai bine ascuns.
 */
html body:has(.inco-arh) main.site-main {
	max-width: none;
	width: 100%;
	padding-inline: 0;
}

.inco-arh {
	/* --- din machetă, desktop 1440 / mobil 360 --- */
	/*
	 * 1344 la desktop, 328 la mobil. Nu e nevoie de `clamp()`: `min(100% - 32px, …)`
	 * dă exact 328 la 360 (16px margine de fiecare parte) și se oprește la 1344.
	 * O funcție mai puțin de verificat.
	 */
	--arh-container:  84rem;
	--arh-filtre:     264px;
	--arh-gap-col:    32px;

	--arh-gap-xs:     clamp(0.5rem,  0.4167rem + 0.3704vw, 0.75rem); /*  8 → 12 */
	--arh-gap-sm:     16px;                                          /* 16 peste tot */
	--arh-gap-8-16:   clamp(0.5rem,  0.3333rem + 0.7407vw, 1rem);    /*  8 → 16 */
	--arh-gap-md:     clamp(1.5rem,  1.3333rem + 0.7407vw, 2rem);    /* 24 → 32 */
	--arh-gap-lg:     clamp(1.5rem,  1rem + 2.2222vw, 3rem);         /* 24 → 48 */

	--arh-ink:        var(--dark-blue, #0A435C);
	--arh-muted:      var(--dark-gray, #648696);
	--arh-line:       var(--light-gray, #C4D2D7);
	--arh-accent:     var(--blue, #056E9B);
	/* Verdele plin al site-ului. Local, nu global: tokenul `--green` are două
	   valori diferite prin proiect și n-a fost încă decis care e cea bună. */
	--arh-verde:      #0B8669;
	--arh-radius:     16px;

	box-sizing: border-box;
	inline-size: min(100% - 32px, var(--arh-container));
	margin-inline: auto;
	color: var(--arh-ink);
}
.inco-arh *, .inco-arh ::before, .inco-arh ::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ antet ---*/
.inco-arh__head { display: flex; flex-direction: column; gap: var(--arh-gap-md); }

/*
 * Firimiturile sunt IDENTICE cu cele de pe pagina de produs — aceleași valori,
 * copiate din `single-product.css`. Sunt aceeași componentă în două locuri, deci
 * n-au de ce să arate diferit.
 *
 * gap 8 · 14 → 16 · linkurile Regular #53798A · pagina curentă Medium #056E9B
 * Pagina curentă e singura bucată care NU e link, iar WooCommerce o scrie ca
 * text simplu — de aceea culoarea ei stă pe container, iar linkurile o suprascriu.
 *
 * 🔴 `.inco-arh nav…` nu e decor. Elementul poartă și `woocommerce-breadcrumb`,
 * iar WooCommerce are:
 *     .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb
 * `:where()` valorează ZERO, deci regula aia e (0,2,0) — bătea `.inco-arh-crumbs`
 * (0,1,0) și firimiturile ieșeau gri, 0.92em. Aici suntem la (0,2,1).
 * → perechea lecției din §4g: `:not()` ia specificitatea argumentului, `:where()` o aruncă.
 * Pe pagina de produs aceeași regulă e bătută la fel, cu `body.single-product`.
 */
.inco-arh nav.inco-arh-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	/*
	 * 12px deasupra, ca pe pagina de produs — acolo iese din
	 * `margin: var(--pdp-gap-sm, 12px)`, iar variabila NU e definită unde stau
	 * firimiturile *(sunt în afara lui `.inco-pdp`)*, deci valoarea care se aplică
	 * e chiar rezerva de 12px, la orice lățime. Măsurat, nu presupus.
	 * Dedesubt distanța o dă `gap`-ul din `.inco-arh__head`.
	 */
	margin: 12px 0 0;
	font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);   /* 14 → 16 */
	font-weight: 500; line-height: 1;
	color: var(--cyan, #056E9B);
}
.inco-arh .inco-arh-crumbs a,
.inco-arh .inco-arh-crumbs a:visited { color: #53798A; font-weight: 400; text-decoration: none; }
.inco-arh .inco-arh-crumbs a:hover,
.inco-arh .inco-arh-crumbs a:focus-visible { color: var(--cyan, #056E9B); text-decoration: none; }
.inco-arh-crumbs__sep { display: inline-flex; align-items: center; color: #53798A; }
.inco-arh-crumbs__sep svg { display: block; }

/*
 * Titlul e CENTRAT în ambele machete, nu aliniat la stânga ca pe pagina de
 * produs. Cu numărul de produse dedesubt, tot centrat.
 */
.inco-arh__titlu { text-align: center; }
.inco-arh__h1 {
	margin: 0;
	font-size: clamp(1.5rem, 1.1667rem + 1.4815vw, 2.5rem);   /* 24 → 40 */
	line-height: 1.2; font-weight: 600;
}
.inco-arh__numar {
	margin: var(--arh-gap-xs) 0 0;
	font-size: 14px; line-height: 20px; color: var(--arh-muted);
}

/* ------------------------------------------------------------------- corp ---*/
.inco-arh__corp {
	display: grid;
	grid-template-columns: var(--arh-filtre) minmax(0, 1fr);
	gap: var(--arh-gap-col);
	margin-block-start: var(--arh-gap-lg);
}
.inco-arh__continut { display: flex; flex-direction: column; gap: var(--arh-gap-md); min-inline-size: 0; }

/* Fără filtre, conținutul ia toată lățimea — nu rămâne o coloană goală. */
.inco-arh__corp--fara-filtre { grid-template-columns: minmax(0, 1fr); }

/* ----------------------------------------------------------------- banner ---*/
/*
 * Raport din machetă: 1048×232 la desktop, 328×176 la mobil. Nu e același
 * raport (4,52 vs 1,86), deci nu se poate ține cu un singur `aspect-ratio` —
 * se schimbă la breakpoint.
 */
.inco-arh-banner {
	position: relative; overflow: hidden;
	border-radius: var(--arh-radius);
	aspect-ratio: 1048 / 232;
	display: flex; align-items: center;
}
/*
 * 🔴 PREFIXAT CU CONTAINERUL — altfel WooCommerce câștigă, 18 august.
 *
 * `.woocommerce-page img { height: auto }` din `woocommerce-layout.css` e
 * **(0,1,1)**, iar `.inco-arh-banner__img` e **(0,1,0)**. Pe orice arhivă, body
 * poartă `woocommerce-page` — deci regula lui bătea `block-size: 100%` și
 * imaginea își lua înălțimea din proporția ei. Măsurat pe telefon: **89,5px
 * într-o casetă de 192**, adică `object-fit: cover` era scris și nu avea ce
 * acoperi; sub imagine rămânea voalul gol.
 *
 * 🔑 `block-size` și `height` sunt ACEEAȘI proprietate — deci o regulă scrisă în
 * proprietăți logice se judecă la specificitate cu una scrisă în proprietăți
 * fizice, și poate pierde. Un nume de clasă lung nu cântărește mai mult.
 *
 * ⚠️ Pe desktop nu se vedea: acolo caseta e 1048/232 *(4,52)*, imaginea 4,00 —
 * deci înălțimea automată IESE din casetă și `overflow: hidden` o taie, ceea ce
 * arată exact ca o încadrare corectă. **Un bug care se ascunde într-o tăiere.**
 * → §4g, aceeași familie cu `[type="button"]` din tema Hello.
 */
.inco-arh .inco-arh-banner__img {
	position: absolute; inset: 0;
	inline-size: 100%; block-size: 100%; object-fit: cover;
}
/* Voalul: fără el, textul alb dispare pe o poză deschisă la culoare. */
.inco-arh-banner::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(10,67,92,.85) 0%, rgba(10,67,92,.45) 100%);
}
.inco-arh-banner__text {
	position: relative; z-index: 1;
	padding-inline: clamp(1rem, 0.3333rem + 2.963vw, 3rem);   /* 16 → 48 */
	color: var(--pure-white, #fff);
	max-inline-size: 62%;
}
.inco-arh-banner__titlu {
	margin: 0;
	font-size: clamp(1.125rem, 0.9167rem + 0.9259vw, 1.75rem);   /* 18 → 28 */
	font-weight: 600; line-height: 1.1;
}
.inco-arh-banner__desc {
	/* Distanța titlu → text: 8 la 360, 16 la 1440. */
	margin: var(--arh-gap-8-16) 0 0;
	font-size: clamp(0.875rem, 0.75rem + 0.5556vw, 1.25rem);     /* 14 → 20 */
	font-weight: 500; line-height: 1.45; opacity: .9;
}

/* ---------------------------------------------------------- subcategorii ----*/
/*
 * Pe desktop: pastile, toate la vedere. Pe telefon: un comutator care le pliază,
 * fiindcă zece pastile ocupau jumătate de ecran înainte de primul produs.
 * Comutatorul e ascuns aici *(și `.inco-arh` din față, ca de obicei — e buton)*.
 */
.inco-arh .inco-arh__subcat-comuta { display: none; }

/*
 * Titlul de deasupra pastilelor. Aceeași clasă pe ambele rute — se schimbă doar
 * cuvântul: „Categorii" pe magazin, „Subcategorii" pe o categorie.
 *
 * ⚠️ `.inco-arh` în față și mărimile scrise explicit: e un `<h2>`, iar tema are
 * regulile ei pentru titluri. Fără asta ar veni cu mărimea de titlu de secțiune.
 */
.inco-arh .inco-arh__subcat-titlu {
	margin: 0 0 var(--arh-gap-xs);
	font-size: 16px; line-height: 1.2; font-weight: 600;
	color: var(--arh-ink);
}

.inco-arh__subcat { display: flex; flex-wrap: wrap; gap: var(--arh-gap-xs); margin: 0; padding: 0; list-style: none; }
.inco-arh__subcat-item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border: 1px solid var(--arh-line); border-radius: 999px;
	background: var(--pure-white, #fff);
	font-size: 14px; font-weight: 500; color: var(--arh-ink); text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.inco-arh__subcat-item:hover { border-color: var(--arh-accent); color: var(--arh-accent); }
.inco-arh__subcat-nr { color: var(--arh-muted); font-weight: 400; }

/*
 * Pastila bifată — doar pe /promotii/, unde categoriile SUNT un filtru, nu
 * linkuri către altă pagină. Verdele plin, ca rândul activ din „Contul meu";
 * numărul din ea își pierde griul, altfel ar rămâne ilizibil pe verde.
 */
.inco-arh__subcat-item.is-activ {
	background: var(--arh-verde);
	border-color: var(--arh-verde);
	color: var(--pure-white, #fff);
}
.inco-arh__subcat-item.is-activ:hover { color: var(--pure-white, #fff); }
.inco-arh__subcat-item.is-activ .inco-arh__subcat-nr { color: inherit; opacity: .75; }

/* --------------------------------------------------------- filtrele active ---*/
/*
 * Pastilele cu ×, între subcategorii și bara de sortare. Stau lângă rezultate,
 * nu în coloana din stânga: pe o listă lungă de filtre, bifele ajung sub linia
 * de vizibilitate, deci derulezi la produse fără să mai vezi de ce sunt puține.
 */
.inco-arh__active {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--arh-gap-xs);
}
.inco-arh__active-eticheta {
	font-size: 14px; line-height: 20px; color: var(--arh-muted); white-space: nowrap;
}
.inco-arh__chips {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--arh-gap-xs);
	margin: 0; padding: 0; list-style: none;
}
/*
 * 🔑 Deliberat NU arată a buton *(cerut de Seba, 8 aug)*. Conturul și forma de
 * pastilă le poartă subcategoriile, care sunt navigație — te duc altundeva.
 * Astea sunt o stare: îți spun ce e pus acum. Deci fundal moale, fără contur,
 * colț mic. Aceeași cerneală ca bulinele cu numere de la filtre, ca să se
 * citească drept „etichetă", nu drept „apasă-mă".
 */
.inco-arh__chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	border: 0; border-radius: 6px;
	background: var(--light-cyan, #EAF9FF);
	font-size: 14px; line-height: 20px; font-weight: 400;
	color: var(--arh-ink); text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.inco-arh__chip:hover,
.inco-arh__chip:focus-visible { background: #DCF1FA; color: var(--arh-accent); }

/* ×-ul e decor: pastila întreagă e ținta, ca să se poată apăsa cu degetul. */
.inco-arh__chip-x { font-size: 16px; line-height: 1; color: var(--arh-muted); }
.inco-arh__chip:hover .inco-arh__chip-x,
.inco-arh__chip:focus-visible .inco-arh__chip-x { color: var(--arh-accent); }

/* „Șterge tot" nu e o etichetă, e o comandă — deci arată a link, nu a pastilă. */
.inco-arh__chip--tot {
	padding-inline: 4px; background: none;
	color: var(--arh-accent); text-decoration: underline;
}
.inco-arh__chip--tot:hover,
.inco-arh__chip--tot:focus-visible { background: none; }

/* ------------------------------------------------------------------- bară ---*/
.inco-arh-bara {
	display: flex; align-items: center; gap: var(--arh-gap-sm);
	min-block-size: 32px;
}
/* Între etichetă și selector: 8 la 360, 16 la 1440. La fel la „Sortează" și „Arată". */
.inco-arh-bara__grup { display: inline-flex; align-items: center; gap: var(--arh-gap-8-16); }
.inco-arh-bara__eticheta { font-size: 14px; line-height: 16px; color: var(--arh-ink); white-space: nowrap; }

/* „Arată" stă la capătul din dreapta; sortarea rămâne stânga. */
.inco-arh-bara__grup--arata { margin-inline-start: auto; }

/*
 * Săgeata selectorului e desenată de noi. Cea nativă are alt desen în fiecare
 * browser, deci nu se poate alinia — rezolvat la fel la recenzii, 4 august.
 */
.inco-arh-select { position: relative; display: inline-flex; align-items: center; }
.inco-arh-select select {
	appearance: none; -webkit-appearance: none;
	/* 32px în total, ca în machetă: 16 line-height + 2×7 padding + 2×1 bordură. */
	margin: 0; padding: 7px 34px 7px 8px;
	border: 1px solid var(--arh-line); border-radius: 8px;
	background: var(--pure-white, #fff);
	font: inherit; font-size: 14px; line-height: 16px; color: var(--arh-ink);
	cursor: pointer;
}
.inco-arh-select select:focus-visible { outline: 2px solid var(--arh-accent); outline-offset: 2px; }
.inco-arh-select svg {
	position: absolute; inset-inline-end: 8px; inset-block-start: 50%;
	transform: translateY(-50%);
	pointer-events: none; color: var(--arh-muted);
}

/* Butonul de filtre e doar pe mobil; „Aplică" doar fără JS.
 *
 * 🔴 `.inco-arh` din față NU e decor. `reset.css` din Hello are
 * `[type="button"], [type="submit"], button { display: inline-block }` — iar
 * `[type="button"]` valorează exact cât o clasă *(0,1,0)*. Egalitate cu
 * `.inco-arh-bara__filtre`, deci câștiga cel scris mai jos, adică al temei:
 * butonul „Filtru" apărea pe desktop. Cu prefixul suntem la (0,2,0).
 * → aceeași capcană ca pe 31 iulie și 4 august; §4g din instrucțiuni.
 */
.inco-arh .inco-arh-bara__filtre { display: none; }
html.inco-js .inco-arh .inco-arh-bara__aplica { display: none; }
.inco-arh .inco-arh-bara__aplica {
	padding: 8px 14px; border: 1px solid var(--arh-line); border-radius: 8px;
	background: var(--pure-white, #fff); color: var(--arh-ink);
	font: inherit; font-size: 14px; cursor: pointer;
}

/* --------------------------------------------------- cât se schimbă lista ---*/
/*
 * Filtrele se aplică prin `fetch`, deci pagina nu mai clipește — dar nici nu
 * mai dă vreun semn că s-a întâmplat ceva. Fără asta, la o conexiune înceată
 * pare că bifa n-a mers și omul o apasă din nou.
 *
 * Se stinge DOAR grila, nu și filtrele: coloana trebuie să rămână apăsabilă,
 * altfel nu poți schimba a doua bifă până nu se termină prima.
 */
.inco-arh__grila,
.inco-arh__gol { transition: opacity .15s ease; }

.inco-arh.is-incarca .inco-arh__grila,
.inco-arh.is-incarca .inco-arh__gol {
	opacity: .45;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.inco-arh__grila, .inco-arh__gol { transition: none; }
}

/* ------------------------------------------------------------------ grilă ---*/
/*
 * 4 coloane / card 238 / gap 32 la desktop; 2 / 156 / 16 la mobil.
 * `auto-fill` cu o lățime minimă ar da 5 coloane pe ecrane late și 3 pe
 * tablete — machetele cer fix 4 și fix 2, deci se numără explicit.
 */
.inco-arh__grila {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

/* --------------------------------------------------------------- paginare ---*/
.inco-arh-pag {
	display: flex; justify-content: center; align-items: center; gap: 16px;
	/*
	 * Macheta cere 48 între grilă și paginare. Containerul are deja `gap: 32`
	 * între blocuri, deci aici mai trebuie doar diferența — altfel ies 80.
	 */
	margin-block-start: calc(var(--arh-gap-lg) - var(--arh-gap-md));
}
.inco-arh-pag__arrows { display: inline-flex; align-items: center; gap: 8px; }
.inco-arh-pag__nums   { display: inline-flex; align-items: center; gap: 16px; }
.inco-arh-pag__item {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 500; line-height: 1;
	color: var(--arh-muted); text-decoration: none;
}
.inco-arh-pag__item:hover { color: var(--arh-accent); }
.inco-arh-pag__item.is-current { color: var(--arh-accent); }
.inco-arh-pag__item.is-disabled { opacity: .4; }
.inco-arh-pag__item svg { display: block; }
.inco-arh-pag__gap { color: var(--arh-muted); font-size: 20px; line-height: 1; }

/* ------------------------------------------------------------- fără nimic ---*/
.inco-arh__gol {
	display: flex; flex-direction: column; align-items: center; gap: var(--arh-gap-xs);
	padding: var(--arh-gap-lg); text-align: center;
	border: 1px solid var(--arh-line); border-radius: var(--arh-radius);
	background: var(--pure-white, #fff);
}
.inco-arh__gol-titlu { margin: 0; font-size: 18px; font-weight: 600; }
.inco-arh__gol-text  { margin: 0 0 var(--arh-gap-sm); color: var(--arh-muted); }

/* =============================================================== sub 900 ====*/
@media (max-width: 899.98px) {
	/*
	 * Coloana de filtre devine sertar. Rămâne în ACELAȘI loc în markup — două
	 * copii ale aceluiași conținut ar însemna două stări de sincronizat, iar
	 * cititoarele de ecran ar auzi filtrele de două ori.
	 */
	.inco-arh__corp { grid-template-columns: minmax(0, 1fr); }

	.inco-arh__filtre {
		position: fixed; inset: 0; z-index: 100040;
		/*
		 * 🔴 `100dvh`, nu înălțimea dată de `inset: 0` — 18 august, Safari iOS.
		 *
		 * Pe iOS, un element `fixed` cu `inset: 0` se măsoară pe fereastra
		 * **MARE**, adică pe cea de dinaintea barelor. Bara de adrese a lui
		 * Safari stă **jos** din iOS 15 și acoperă ultimii ~90px — deci ultima
		 * parte a sertarului cade sub ea. Măsurat pe un ecran de iPhone 15:
		 * lista lungă de bife stă la **631…831 într-o fereastră de 852**, iar
		 * pâcla e chiar în ultimii 56px ai ei. Nu lipsea: era **sub bara
		 * browserului**, împreună cu bucata de listă pe care trebuia s-o atingi
		 * ca s-o derulezi.
		 *
		 * 🔑 „Nu se vede" și „nu se poate atinge" au fost aici același bug: pe
		 * telefon, ce iese din fereastra vizibilă nu e doar nevăzut, e și
		 * neatins. → §4dc
		 *
		 * `dvh` urmărește bara pe măsură ce apare și dispare. Unde nu e
		 * suportat, declarația cade și rămâne exact purtarea de până acum.
		 */
		block-size: 100dvh;
		overflow-y: auto;
		/* Ajuns la capătul sertarului, nu se mai trage pagina de dedesubt. */
		overscroll-behavior: contain;
		/* Sus nu punem nimic: capul e lipicios și își poartă singur aerul. */
		padding: 0 var(--arh-gap-md);
		/* Jos, aerul ocolește indicatorul de acasă. */
		padding-block-end: calc(var(--arh-gap-md) + env(safe-area-inset-bottom, 0px));
		background: var(--pure-white, #fff);
		/* Sertarul e alb curat, nu ca pagina — deci pâcla se stinge în alb. */
		--arh-suprafata: var(--pure-white, #fff);
		transform: translateX(-100%);
		transition: transform .2s ease;
	}
	.inco-arh__filtre.is-open { transform: none; }

	/*
	 * 🔑 Capul sertarului rămâne sus — cerut de Seba, 18 august.
	 *
	 * Sertarul are 2447px de derulat pe un ecran de 852: cu capul plecat în sus,
	 * titlul, „Resetează" și ×-ul deveneau de negăsit tocmai când erai adânc în
	 * filtre. Lipicios, închiderea e mereu la un deget distanță.
	 *
	 * ⚠️ Fundal **alb curat**, nu transparent: sub el trec bifele. Și iese peste
	 * paddingul sertarului cu margini negative, ca albul să meargă margine la
	 * margine — altfel se vede lista pe lângă el.
	 *
	 * ⚠️ `z-index` peste pâcla de derulare, care e `absolute` în grupuri.
	 * ⚠️ Numai cu JS: fără el panoul stă în pagină, iar un cap lipicios s-ar
	 * agăța de derularea paginii și ar călări peste antet.
	 */
	html.inco-js .inco-arh .inco-arh__filtre .inco-filtru__cap {
		position: sticky; inset-block-start: 0; z-index: 2;
		margin-inline: calc(var(--arh-gap-md) * -1);
		padding: var(--arh-gap-md) var(--arh-gap-md) var(--arh-gap-sm);
		background: var(--pure-white, #fff);
	}

	/* Fără JS sertarul n-are cum să se deschidă, deci rămâne în pagină. */
	html:not(.inco-js) .inco-arh .inco-arh__filtre { position: static; transform: none; padding: 0; overflow: visible; }

	html.inco-js .inco-arh .inco-arh-bara__filtre {
		display: inline-flex; align-items: center; gap: 8px;
		padding: 8px 12px; border: 1px solid var(--arh-line); border-radius: 8px;
		background: var(--pure-white, #fff);
		font: inherit; font-size: 12px; line-height: 12px; color: var(--arh-ink); cursor: pointer;
	}
	.inco-arh-bara__filtre svg { display: block; }

	/* „Arată" dispare pe mobil — macheta lasă doar sortarea. */
	.inco-arh-bara__grup--arata { display: none; }
	.inco-arh-bara__grup--sort  { margin-inline-start: auto; }

	/*
	 * Subcategoriile se pliază. Doar cu JS: fără el comutatorul n-ar avea cine
	 * să-l apese, iar lista ar rămâne ascunsă pentru totdeauna.
	 * → aceeași regulă ca la recenzii, 5 aug: un conținut ascuns în spatele unei
	 *   comenzi care nu funcționează e conținut inexistent.
	 */
	/*
	 * Pe telefon comutatorul poartă deja textul, deci titlul ar fi al doilea.
	 * Se ascunde DOAR când comutatorul chiar apare — adică doar cu JS.
	 */
	html.inco-js .inco-arh .inco-arh__subcat-titlu { display: none; }

	html.inco-js .inco-arh .inco-arh__subcat-comuta {
		display: flex; align-items: center; gap: 8px;
		inline-size: 100%; min-block-size: 40px;
		padding: 8px 12px; margin: 0;
		border: 1px solid var(--arh-line); border-radius: 8px;
		background: var(--pure-white, #fff);
		font: inherit; font-size: 14px; line-height: 16px; font-weight: 500;
		color: var(--arh-ink); text-align: start; white-space: normal;
		cursor: pointer;
	}
	/* Chevronul stă în dreapta și se întoarce când lista e deschisă. */
	html.inco-js .inco-arh .inco-arh__subcat-comuta svg {
		flex: 0 0 auto; margin-inline-start: auto;
		color: var(--arh-muted); transition: transform .15s ease;
	}
	html.inco-js .inco-arh .inco-arh__subcat-wrap.is-open .inco-arh__subcat-comuta svg { transform: rotate(180deg); }

	html.inco-js .inco-arh .inco-arh__subcat-wrap:not(.is-open) .inco-arh__subcat { display: none; }
	html.inco-js .inco-arh .inco-arh__subcat-wrap.is-open .inco-arh__subcat { margin-block-start: var(--arh-gap-xs); }

	.inco-arh__grila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

	.inco-arh-banner { aspect-ratio: 328 / 176; }
	.inco-arh-banner__text { max-inline-size: 100%; }
}

/* ================================================================ filtre ====*/
/*
 * Coloana din stânga, 264px la desktop. Pe mobil e același markup, mutat într-un
 * sertar de CSS — o a doua copie ar însemna două stări de sincronizat, iar
 * cititoarele de ecran ar auzi filtrele de două ori.
 */
.inco-filtru { display: flex; flex-direction: column; }

.inco-filtru__cap {
	display: flex; align-items: center; gap: var(--arh-gap-sm);
	padding-block-end: var(--arh-gap-sm);
	border-block-end: 1px solid var(--arh-line);
}
.inco-filtru__titlu { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; }
.inco-filtru__reset {
	margin-inline-start: auto;
	font-size: 13px; color: var(--arh-accent); text-decoration: none;
}
.inco-filtru__reset:hover { text-decoration: underline; }
/* Închiderea sertarului există doar pe mobil.
   Același `.inco-arh` din față, din același motiv: `[type="button"]` din Hello. */
.inco-arh .inco-filtru__inchide { display: none; }

/* --- un grup --- */
/* `relative`: indiciul de derulare se agață de marginea de jos a grupului. */
.inco-filtru__grup { position: relative; border-block-end: 1px solid var(--arh-line); }
/*
 * 🔴 Prefixul `.inco-arh` e obligatoriu, din același motiv ca la butonul de
 * filtre: `[type="button"]` din `reset.css` valorează cât o clasă și e scris mai
 * jos. Fără prefix, antetele de grup purtau rama roz a temei, 16px și
 * `white-space: nowrap` — se vedea în captura de pe 7 august.
 */
.inco-arh .inco-filtru__antet {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	inline-size: 100%; padding: 14px 0; margin: 0;
	border: 0; border-radius: 0; background: none; cursor: pointer;
	font: inherit; font-size: 15px; font-weight: 600; color: var(--arh-ink);
	/* Etichete ca „Greutate maximă suportată" trebuie să se poată rupe. */
	text-align: start; white-space: normal;
}
.inco-filtru__antet svg { flex: 0 0 auto; color: var(--arh-muted); transition: transform .15s ease; }
/* Închis = chevron în jos; deschis = în sus. */
.inco-filtru__grup:not(.is-closed) .inco-filtru__antet svg { transform: rotate(180deg); }

.inco-filtru__corp { display: flex; flex-direction: column; gap: 10px; padding-block-end: 14px; }
.inco-filtru__grup.is-closed .inco-filtru__corp { display: none; }

/*
 * Listele lungi se derulează în ele, ca să nu întindă toată coloana. Pe
 * `Tehnica Medicala` coloana avea **1933px** față de **1179** cât are grila —
 * cu 754 mai înaltă decât rezultatele pe care le filtrează.
 *
 * 🔑 `:has(.inco-filtru__optiune)` — deci NUMAI grupurile care sunt liste de
 * bife. „Preț" și „Talie" au câmpuri, iar `overflow` le-ar tăia conturul de
 * focus. `:has()` preia specificitatea argumentului, deci regula e (0,2,0).
 *
 * 200px arată ~6 bife și jumătate: jumătatea de rând e semnul că mai e ceva
 * dedesubt. Grupurile scurte nu se ating — o cutie care n-are ce derula nu
 * capătă bară de derulare.
 *
 * `overscroll-behavior: contain` oprește lanțul de derulare: ajuns la capătul
 * listei, nu începe să se miște pagina *(sau sertarul, pe telefon)*.
 */
.inco-filtru__corp:has(.inco-filtru__optiune) {
	max-block-size: 200px;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Bara de derulare să nu stea peste numere. */
	padding-inline-end: 4px;
	scrollbar-width: thin;
}

/*
 * Indiciul de derulare: o pâclă peste ultimele bife, cu un text scurt.
 *
 * 🔑 Ca la descrierea de pe pagina de produs, dar FĂRĂ click — aici nu se
 * desface nimic, doar se derulează. De aceea `pointer-events: none`: pâcla stă
 * exact peste ultimele bife, iar fără asta ar înghiți clicurile pe ele.
 *
 * ⚠️ `--arh-suprafata` nu e un moft: coloana stă pe fundalul paginii *(#FAFCFF)*,
 * dar în sertarul de pe telefon stă pe alb curat. Un gradient care se stinge în
 * culoarea greșită se vede ca o dungă.
 */
.inco-arh { --arh-suprafata: var(--white-bg, #FAFCFF); }

.inco-filtru__indiciu {
	position: absolute; inset-inline: 0; inset-block-end: 0;
	display: none; align-items: flex-end; justify-content: center;
	block-size: 56px; padding-block-end: 8px;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0) 0%,
		var(--arh-suprafata) 65%);
	font-size: 12px; line-height: 1; font-weight: 500; color: var(--arh-muted);
	opacity: 1; transition: opacity .25s ease;
}
/* Se aprinde doar când lista chiar e mai lungă decât cutia — clasa vine din JS. */
.inco-filtru__grup.is-derulabil .inco-filtru__indiciu { display: flex; }
/* Ajuns jos, pâcla se stinge, ca să se vadă și ultima bifă. La urcare revine. */
.inco-filtru__grup.is-la-capat .inco-filtru__indiciu { opacity: 0; }

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

/* --- o opțiune --- */
.inco-filtru__optiune {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; line-height: 20px; cursor: pointer;
}
/*
 * Bifele, desenate de noi.
 *
 * 🔑 Erau native, cu `accent-color` — comod, dar atât se poate cere de la ele:
 * culoarea umplerii. Colțul, conturul și fundalul din machetă *(4px, 1px
 * `grey-border-fill`, `#FAFCFF`)* nu se pot da unei bife native, fiindcă le
 * desenează sistemul de operare. Deci `appearance: none` și le desenăm noi.
 *
 * ⚠️ Odată ce iei desenul sistemului, iei și bifa din mijloc, și inelul de
 * focus. Amândouă sunt mai jos — o bifă care nu arată că e bifată e mai rea
 * decât una urâtă.
 */
.inco-filtru__optiune input[type="checkbox"],
.inco-filtru__optiune input[type="radio"] {
	appearance: none; -webkit-appearance: none;
	flex: 0 0 auto;
	inline-size: 18px; block-size: 18px; margin: 0; padding: 0;
	border: 1px solid var(--grey-border-fill, #C4D2D7);
	border-radius: 4px;
	background: var(--white-bg, #FAFCFF);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
/* Butonul radio rămâne rotund — forma lui spune „alegi una singură". */
.inco-filtru__optiune input[type="radio"] { border-radius: 999px; }

.inco-filtru__optiune input[type="checkbox"]:hover,
.inco-filtru__optiune input[type="radio"]:hover { border-color: var(--arh-accent); }

.inco-filtru__optiune input[type="checkbox"]:checked,
.inco-filtru__optiune input[type="radio"]:checked {
	border-color: var(--arh-accent);
	background-color: var(--arh-accent);
	background-repeat: no-repeat;
	background-position: center;
}
/* Bifa: SVG inline, ca să nu mai fie un fișier de încărcat pentru 12px de desen. */
.inco-filtru__optiune input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 12px 12px;
}
.inco-filtru__optiune input[type="radio"]:checked {
	background-image: radial-gradient(circle at center, #fff 0 3px, transparent 3px);
}

.inco-filtru__optiune input[type="checkbox"]:focus-visible,
.inco-filtru__optiune input[type="radio"]:focus-visible {
	outline: 2px solid var(--arh-accent); outline-offset: 2px;
}
.inco-filtru__eticheta { flex: 1 1 auto; min-inline-size: 0; }
/*
 * Numărul e calculat pe REZULTATELE CURENTE, nu pe tot catalogul — altfel
 * bifezi „20" și primești 3.
 */
/*
 * Bulina cu numărul, din machetă: colț 99, fundal `#D5F2FF`, text Semi Bold
 * `#056E9B`, padding 4/6/3/6 — asimetric pe verticală, ca cifra să stea optic
 * la mijloc. Înălțimea iese din conținut *(19px)*, nu se fixează.
 *
 * ⚠️ Fontul: în mesajul despre bulină scria „Roboto Semi Bold", dar regula de
 * după — „în rest tot din arhivă e Inter" — o acoperă, fiindcă bulina asta
 * apare DOAR pe arhivă. Am mers pe Inter. Dacă totuși e Roboto, e o linie.
 */
.inco-filtru__nr {
	flex: 0 0 auto;
	padding: 4px 6px 3px; border-radius: 99px;
	background: #D5F2FF;
	font-size: 12px; line-height: 1; font-weight: 600; color: var(--blue, #056E9B);
}

/* --- sliderul de preț --- */
/*
 * Două `input[type=range]` suprapuse. Nu există range cu două mânere, iar ăsta
 * e tiparul care rămâne o comandă ADEVĂRATĂ: merge cu degetul, cu rotița și cu
 * săgețile de la tastatură, fără să scriem noi tragerea.
 *
 * 🔑 Se vede doar cu JS. Fără el, două range-uri care nu fac nimic ar fi o
 * promisiune goală — iar câmpurile de dedesubt fac deja treaba.
 */
.inco-filtru__slider { display: none; }
html.inco-js .inco-arh .inco-filtru__slider {
	display: block; position: relative;
	block-size: 20px; margin-block-end: 12px;
}

/* Șina și umplutura sunt trase cu 10px de la margini, cât raza unui mâner —
   altfel umplutura ar începe lângă centrul mânerului, nu sub el. */
.inco-filtru__slider-sina {
	position: absolute; inset-block-start: 50%; inset-inline: 10px;
	block-size: 4px; transform: translateY(-50%);
	background: var(--arh-line); border-radius: 99px;
}
.inco-filtru__slider-umplut {
	position: absolute; block-size: 100%;
	background: var(--arh-accent); border-radius: 99px;
}

/*
 * ⚠️ `pointer-events: none` pe tot range-ul și `auto` doar pe mâner. Fără asta,
 * range-ul de deasupra ar prinde toate clicurile, iar mânerul de dedesubt n-ar
 * mai putea fi apucat niciodată.
 */
.inco-filtru__slider-maner {
	position: absolute; inset-block-start: 0; inset-inline: 0;
	inline-size: 100%; block-size: 20px; margin: 0; padding: 0;
	appearance: none; -webkit-appearance: none;
	background: none; border: 0; pointer-events: none;
}
.inco-filtru__slider-maner::-webkit-slider-thumb {
	-webkit-appearance: none; pointer-events: auto;
	inline-size: 20px; block-size: 20px; border: 0; border-radius: 50%;
	background: var(--arh-accent); cursor: grab;
}
.inco-filtru__slider-maner::-moz-range-thumb {
	pointer-events: auto;
	inline-size: 20px; block-size: 20px; border: 0; border-radius: 50%;
	background: var(--arh-accent); cursor: grab;
}
.inco-filtru__slider-maner:active::-webkit-slider-thumb { cursor: grabbing; }
.inco-filtru__slider-maner:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--arh-accent); outline-offset: 2px;
}
.inco-filtru__slider-maner:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--arh-accent); outline-offset: 2px;
}

/* --- preț și talie --- */
.inco-filtru__pret { display: flex; gap: 8px; }
.inco-filtru__pret label { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--arh-muted); }
/*
 * Din machetă: colț **8**, contur 1px `grey-border-fill`, fundal `#FAFCFF`.
 * ⚠️ 8, nu 4: „border radius 4" era pentru BIFE. Câmpurile sunt mai rotunde.
 *
 * 🔴 `.inco-arh` din față e obligatoriu. `reset.css` din Hello are
 *     input[type="date"], …, input[type="number"], … { border: 1px solid #666; border-radius: 3px }
 * adică (0,1,1) — exact cât `.inco-filtru__pret input`. Egalitate, tema e mai
 * jos, deci câștiga ea: măsurat, câmpurile ieșeau la **3px și `#666`**, nu 4 și
 * `#C4D2D7`. Cu prefixul suntem la (0,2,1).
 * → a patra oară în două zile că tema intră peste noi la egalitate; §4g.
 */
.inco-arh .inco-filtru__pret input,
.inco-arh .inco-filtru__talie-camp input {
	inline-size: 100%; padding: 7px 8px;
	border: 1px solid var(--grey-border-fill, #C4D2D7); border-radius: 8px;
	background: var(--white-bg, #FAFCFF);
	font: inherit; font-size: 14px; color: var(--arh-ink);
}
.inco-arh .inco-filtru__pret input:hover,
.inco-arh .inco-filtru__talie-camp input:hover { border-color: var(--arh-accent); }
.inco-arh .inco-filtru__pret input:focus,
.inco-arh .inco-filtru__pret input:focus-visible,
.inco-arh .inco-filtru__talie-camp input:focus,
.inco-arh .inco-filtru__talie-camp input:focus-visible {
	border-color: var(--arh-accent);
	outline: 2px solid var(--arh-accent); outline-offset: -1px;
}
.inco-filtru__talie { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.inco-filtru__talie-camp { display: flex; align-items: center; gap: 6px; }
.inco-filtru__talie-camp input { inline-size: 90px; }
.inco-filtru__talie-camp span { color: var(--arh-muted); font-size: 14px; }
.inco-filtru__ajutor { margin: 0; font-size: 12px; line-height: 1.4; color: var(--arh-muted); }

/* Butonul de aplicare există pentru cazul fără JS; pe mobil închide sertarul. */
.inco-arh .inco-filtru__aplica {
	margin-block-start: var(--arh-gap-sm);
	align-items: center; justify-content: center;
	padding: 10px 16px; border: 0; border-radius: 8px;
	background: var(--arh-accent); color: var(--pure-white, #fff);
	font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
html.inco-js .inco-arh .inco-filtru__aplica { display: none; }

@media (max-width: 899.98px) {
	html.inco-js .inco-arh .inco-filtru__inchide {
		display: inline-flex; align-items: center; justify-content: center;
		inline-size: 32px; block-size: 32px; margin-inline-start: auto;
		/* `padding` și `border-radius` sunt tot de la `[type="button"]` din Hello. */
		padding: 0; border: 0; border-radius: 0; background: none;
		font-size: 24px; line-height: 1;
		color: var(--arh-ink); cursor: pointer;
	}
	html.inco-js .inco-arh .inco-filtru__reset { margin-inline-start: 0; }
	/* În sertar, butonul de aplicare are sens și cu JS: închide și aplică. */
	html.inco-js .inco-arh .inco-filtru__aplica { display: inline-flex; }
}