/*
	Blocurile împrumutate de la elho.com — selectoarele de culoare și mărime,
	punctele forte, tabelul tehnic, amprenta de carbon.

	Tokenurile sunt ale temei. Nicio culoare scrisă de mână aici în afară de
	pastilele de produs, care sunt date, nu design.
*/

/* --- Culoarea și mărimea ------------------------------------------------- */

.alegere {
	margin-block: var(--sp-3);
}

.alegere__eticheta {
	margin: 0 0 var(--sp-2);
	font-size: var(--t-mic);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-stins);
}

/* Ce e ales acum se scrie lângă etichetă, cu litere normale: „Culoare verde".
   Fără el, pastila aleasă e singurul indiciu — iar o pastilă nu poate fi citită
   cu voce tare. */
.alegere__acum {
	margin-left: .5em;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}

.alegere__pastile,
.alegere__chipsuri {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pastila {
	display: block;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--chenar);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
	transition: transform .12s ease, box-shadow .12s ease;
}

.pastila:hover,
.pastila:focus-visible {
	transform: scale(1.08);
}

/* Aleasă: inel verde în jurul pastilei, nu bifă peste culoare — pe un fundal
   închis o bifă albă dispare, pe unul deschis o bifă închisă dispare. */
.pastila--aleasa {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--verde-text);
}

.chips {
	display: inline-block;
	padding: .4em .8em;
	border: 1px solid var(--chenar);
	border-radius: 999px;
	font-size: var(--t-mic);
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .12s ease, background .12s ease;
}

.chips:hover,
.chips:focus-visible {
	border-color: var(--verde);
	background: var(--fundal-verde);
}

.chips--ales {
	border-color: var(--verde-text);
	background: var(--fundal-verde-2);
	font-weight: 600;
}

/* --- Punctele forte ------------------------------------------------------ */

.puncte-forte {
	margin: var(--sp-3) 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .45em;
}

.puncte-forte li {
	position: relative;
	padding-left: 1.5em;
	font-size: var(--t-baza);
	color: var(--text-secundar);
	line-height: 1.5;
}

/* Bifa e decor; ce contează e textul, deci n-o citește nimeni cu voce tare. */
.puncte-forte li::before {
	content: "";
	position: absolute;
	left: .1em;
	top: .45em;
	width: .75em;
	height: .4em;
	border-left: 2px solid var(--verde);
	border-bottom: 2px solid var(--verde);
	transform: rotate(-45deg);
}

/* --- Tabelul tehnic ----------------------------------------------------- */

.tehnice {
	width: 100%;
	max-width: 46rem;
	border-collapse: collapse;
	font-size: var(--t-baza);
}

.tehnice tr + tr {
	border-top: 1px solid var(--chenar-neutru);
}

.tehnice th,
.tehnice td {
	padding: .55em .8em;
	text-align: left;
	vertical-align: top;
}

.tehnice th {
	width: 45%;
	font-weight: 400;
	color: var(--text-stins);
}

.tehnice td {
	color: var(--text);
}

.tehnice tr:nth-child(odd) {
	background: var(--fundal-blanda);
}

/* --- Amprenta ----------------------------------------------------------- */

.eco__cifra {
	margin: var(--sp-3) 0 var(--sp-2);
	font-size: var(--t-mediu);
}

.eco__cifra strong { color: var(--verde-text); }

.eco__comparatii {
	display: grid;
	gap: .5em;
	max-width: 34rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eco__comparatii li {
	display: grid;
	grid-template-columns: 11rem 1fr 5.5rem;
	gap: var(--sp-2);
	align-items: center;
	font-size: var(--t-mic);
}

.eco__bara {
	display: block;
	height: .7rem;
	border-radius: 999px;
	background: var(--fundal-verde-2);
	overflow: hidden;
}

.eco__bara > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--verde);
}

/* Rândul produsului nostru se vede altfel: e reperul, restul e context. */
.eco__comparatii li:first-child { font-weight: 600; }
.eco__comparatii li:first-child .eco__bara > span { background: var(--verde-text); }

.eco__val {
	text-align: right;
	color: var(--text-stins);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 34rem) {
	.eco__comparatii li {
		grid-template-columns: 1fr 4.5rem;
	}

	.eco__bara { grid-column: 1 / -1; }
}

/* --- Container 1: banda de ambianță -------------------------------------- */

/*
	Poza pe care o avem de la ei e pătrată — un produs pus în scenă, nu o
	panoramă. Tăiată la o bandă lată, iese o frunză mărită de trei ori și
	filigranul lor în mijloc. Așa că nu o tăiem: o punem întreagă, pe înălțimea
	benzii, iar restul benzii îl umple aceeași poză mărită și încețoșată.
	Trucul e vechi și cinstit — se vede toată fotografia, iar banda are totuși
	lățimea ecranului.

	Când o să avem panoramele de colecție de la ei (le au pe paginile de
	colecție), banda le primește fără altă schimbare: același container, altă
	poză, `--intreaga` scos.
*/
.elho-hero {
	position: relative;
	overflow: hidden;
	height: 22rem;
	background: var(--fundal-verde);
	isolation: isolate;
}

.elho-hero::before {
	content: "";
	position: absolute;
	inset: -2rem;
	z-index: -1;
	background-image: var(--poza);
	background-size: cover;
	background-position: center;
	filter: blur(1.6rem) saturate(1.1);
	opacity: .55;
}

.elho-hero img {
	display: block;
	width: auto;
	height: 100%;
	margin-inline: auto;
	object-fit: contain;
}

@media (max-width: 40rem) {
	.elho-hero { height: 13rem; }
}

/* --- Container 4: două jumătăți ------------------------------------------ */

.produs-pagina__mijloc {
	display: grid;
	gap: var(--sp-5);
	align-items: start;
}

@media (min-width: 62em) {
	.produs-pagina__mijloc { grid-template-columns: 1fr 1fr; }
	/* Fără vecin, acordeonul nu se întinde peste tot: un tabel de patru rânduri
	   lat de 1500 px are eticheta într-o margine și valoarea în cealaltă. */
	.produs-pagina__mijloc--singur { grid-template-columns: minmax(0, 46rem); }
}

.produs-pagina__fise-col,
.produs-pagina__alaturi { min-width: 0; }

.produs-pagina__alaturi {
	padding: var(--sp-4);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire);
	background: var(--fundal-blanda);
}

/* Acolo blocul de plante e cuprinsul cutiei, nu un bloc între altele. */
.produs-pagina__alaturi .plante { margin: 0; }

/* --- Comparația de CO₂ din card ------------------------------------------ */

.co2 {
	margin-block: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--chenar-neutru);
}

.co2__titlu {
	margin: 0 0 var(--sp-2);
	font-size: var(--t-mic);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-stins);
}

/* --- elho eco-Pass, reprodus întocmai ------------------------------------ */

/*
	Cartonașele sunt fișierele lor: fundal SVG, pictogramă în colț, culorile
	textului luate din foaia lor de stil (#343a40 pe deschis, #495057 pentru
	corp, alb pe verde). Măsurile sunt măsurate pe pagina lor, nu ghicite:
	portretul 409×170 tăiat, siglele de certificare 80×117 albe direct pe verde,
	cartonașele din mijloc de 224 px, amprenta cât ele două plus spațiul dintre.

	Ce am schimbat dinadins: la ei coloanele ies de înălțimi diferite (275 / 464 /
	465 px pe pagina măsurată). Aici stau toate trei la aceeași înălțime, fiindcă
	dezlânarea aceea se vedea urât la noi, unde textele au altă lungime.
*/
.ecopass {
	margin-block-start: var(--sp-7);
	padding-block-end: var(--sp-6);
}

.ecopass__titlu {
	margin: 0 0 40px;
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
	font-weight: 450;
	text-align: center;
	color: #495057;
}

.ecopass__grila {
	display: grid;
	gap: 17px;
}

@media (min-width: 62em) {
	.ecopass__grila {
		grid-template-columns: repeat(3, 1fr);
		/* stretch, nu start: cele trei coloane au aceeași înălțime */
		align-items: stretch;
	}
}

/* Mijlocul: reciclarea sus, perechea dedesubt, împreună cât toată coloana. */
.ecopass__centru {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 16px;
}

.ecopass__pereche {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 17px;
}

/* Cartonașul: fundalul lor, întins peste toată suprafața. */
.ecopass-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 4px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Pictograma din colțul de sus-dreapta, ca la ei. */
.ecopass-card::before {
	content: "";
	position: absolute;
	top: 24px;
	right: 24px;
	width: 28px;
	height: 28px;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: 1;
}

.ecopass-card--designer { background-image: url("elho/ecopass-card-designer.svg"); }
.ecopass-card--designer::before { background-image: url("elho/ecopass-pensula.svg"); }

.ecopass-card--reciclare { background-image: url("elho/ecopass-card-reciclare.svg"); padding: 24px; }
.ecopass-card--reciclare::before { background-image: url("elho/ecopass-reciclare-semn.svg"); }

.ecopass-card--certificate { background-image: url("elho/ecopass-card-certificate.svg"); padding: 24px; }
.ecopass-card--garantie    { background-image: url("elho/ecopass-card-garantie.svg"); padding: 24px; }
.ecopass-card--certificate::before,
.ecopass-card--garantie::before { content: none; }

.ecopass-card--amprenta { background-image: url("elho/ecopass-card-amprenta.svg"); padding: 24px; }
.ecopass-card--amprenta::before { background-image: url("elho/ecopass-talpa.svg"); }

/* Portretul: bandă tăiată, lipită de marginile cartonașului, ca la ei. */
.ecopass__portret {
	display: block;
	/* `flex: 0 0 auto` — altfel coloana o strânge ca să încapă textul. */
	flex: 0 0 auto;
	width: 100%;
	/*
	   `!important` aici nu e lene. Tema resetează global `img { height: auto }`,
	   iar foaia ei se încarcă dinadins ultima (prioritate 999, ca să bată
	   WooCommerce și B2BKing). Fără el, portretul rămâne întreg — 560 px de om
	   în picioare într-un cartonaș făcut pentru o bandă de 170.
	*/
	height: 170px !important;
	object-fit: cover;
	object-position: center 28%;
	border-radius: 4px 4px 0 0;
}

.ecopass__cuprins {
	display: flex;
	flex-direction: column;
	padding: 24px;
}

.ecopass__cap {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 450;
	line-height: 1.1;
	color: #343a40;
}

.ecopass__cap--alb { color: #fff; text-align: center; }

.ecopass__subtitlu {
	margin: 14px 0 0;
	font-size: 1rem;
	font-weight: 450;
	color: #495057;
}

.ecopass__descriere {
	margin: 8px 0 0;
	font-size: .875rem;
	line-height: 1.43;
	color: #495057;
}

/* Reciclarea: sigiliul la stânga, textul la dreapta. */
.ecopass__reciclare {
	display: flex;
	gap: 20px;
	align-items: center;
	margin-top: 26px;
}

.ecopass__sigiliu {
	flex: 0 0 auto;
	width: 7.5rem;
	height: auto;
}

.ecopass__reciclare .ecopass__descriere { margin: 0; }

/*
	Certificatele: siglele lor sunt desenate în alb, ca să stea direct pe verde —
	așa le pune și elho. Le-am avut o vreme înnegrite pe o plăcuță albă și arătau
	exact ca ce sunt: o sigla scoasă din locul ei.
*/
.ecopass__logo {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: center;
	margin-top: 20px;
}

/* La ei siglele sunt de 117 px înălțime. Le ținem aproape: mai mici, textul
   fin dinăuntru („TÜV NORD", „Certified B Corporation") nu se mai citește. */
.ecopass__logo img {
	width: auto;
	height: 6.5rem;
}

/* Garanția: cifra mare, rezistențele dedesubt, totul pe mijloc. */
.ecopass__ani {
	display: flex;
	gap: .35em;
	align-items: baseline;
	justify-content: center;
	margin: auto 0 16px;
	color: #fff;
}

.ecopass__ani strong {
	font-size: 3.5rem;
	font-weight: 450;
	line-height: 1;
}

.ecopass__ani span { font-size: 1.5rem; font-weight: 420; }

.ecopass__rezistente {
	margin: 0 0 auto;
	padding: 0;
	list-style: none;
	text-align: center;
	font-size: .875rem;
	line-height: 1.43;
	color: #fff;
}

/* Amprenta: două plăcuțe albe pe verde închis. */
.ecopass__cifra {
	display: grid;
	grid-template-columns: 3rem 4.5rem 1fr;
	gap: 8px;
	align-items: center;
	margin-top: 8px;
	padding: 16px;
	border-radius: 4px;
	background: #fff;
}

.ecopass__cifra:first-of-type { margin-top: 26px; }

.ecopass__cifra img { width: 3rem; height: 3rem; }

.ecopass__valoare {
	font-size: 1rem;
	font-weight: 450;
	line-height: 1.125;
	text-align: center;
	color: #495057;
}

.ecopass__cifra .ecopass__descriere { margin: 0; }

.ecopass__explicatie,
.ecopass__sursa {
	font-size: .875rem;
	line-height: 1.43;
	color: #fff;
}

.ecopass__explicatie { margin: 24px 0 0; }
.ecopass__sursa { margin: 16px 0 auto; }

@media (max-width: 40rem) {
	.ecopass__pereche { grid-template-columns: 1fr; }
	.ecopass__cifra { grid-template-columns: 2.5rem 4rem 1fr; }
	.ecopass__portret { height: 12rem; }
}

/* ==========================================================================
   Pagina de familie
   ==========================================================================
   Sora paginii de produs: aceeași bandă lată sus, aceleași pastile de culoare,
   aceleași cartonașe. Ce e nou aici e doar strângerea pe mărimi.
   ========================================================================== */

/*
 * Capul: text la stânga, combinația plantă–ghiveci la dreapta.
 *
 * Coloana din dreapta are lățime fixă, nu o fracțiune: cartonașele de plantă
 * au poza pătrată, iar la o coloană care crește cu ecranul ele s-ar fi umflat
 * până ar fi cântărit mai mult decât titlul gamei. 32rem ține trei cartonașe
 * pe un singur rând, fără să strângă textul din stânga.
 */
.familie__sus {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32rem;
	gap: var(--sp-6);
	align-items: start;
	margin-bottom: var(--sp-5);
}

.familie__sus--singur { grid-template-columns: minmax(0, 1fr); }

.familie__cap { margin-bottom: var(--sp-4); }

.familie__combinatie {
	background: var(--fundal-verde);
	border-radius: var(--rotunjire);
	padding: var(--sp-4);
}

.familie__combinatie-titlu {
	font-size: var(--t-h3);
	margin: 0 0 var(--sp-1);
}

.familie__combinatie-nota {
	margin: 0 0 var(--sp-3);
	font-size: var(--t-mic);
	color: var(--text-secundar);
}

/* Fără carusel aici: trei plante încap pe un rând, iar săgețile ar fi cerut
   scriptul temei pentru o cutie care oricum nu se derulează. */
.familie__combinatie-lista {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.familie__fir {
	font-size: var(--t-mic);
	color: var(--text-stins);
	display: flex;
	flex-wrap: wrap;
	gap: .4em;
}

.familie__fir a { color: inherit; }
.familie__fir a:hover { color: var(--verde-text); }

.familie__titlu {
	font-size: var(--t-h1, var(--t-h2));
	margin: 0;
}

.familie__socoteala {
	margin: 0;
	color: var(--text-secundar);
	font-size: var(--t-baza);
}

/* Pastilele stau pe un rând care se rupe: o familie poate avea 12 culori. */
.familie__culori .alegere__pastile { flex-wrap: wrap; }

.familie__poveste {
	max-width: 46rem;
	margin-bottom: var(--sp-6);
}

/*
 * Titlul de mărime e o bandă, nu un rând de text: la 14 grupe una după alta,
 * ochiul are nevoie de un reper ca să știe unde s-a terminat mărimea de dinainte.
 */
.familie__marime { margin-bottom: var(--sp-6); }

.familie__marime-titlu {
	font-size: var(--t-h3);
	margin: 0 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--chenar);
	color: var(--text);
}

.familie__marime--fara .familie__marime-titlu {
	color: var(--text-stins);
	font-size: var(--t-mediu);
}

/*
 * Grila familiei: 8 cartonașe pe rând la calculator, 2 la telefon.
 *
 * ATENȚIE LA SELECTOR. Trebuie scris `ul.products.familie__grila`, nu doar
 * `.familie__grila`: regula de listare din style.css e `ul.products` — element
 * plus clasă — și bate o singură clasă la specificitate. Scrisă simplu, regula
 * de aici ar fi cod mort care pare că face ceva, iar grila ar rămâne cea a
 * magazinului (auto-fill, coloane de 15rem).
 *
 * Numărul de coloane e fix, nu `auto-fill`: pe familie contează ca o mărime să
 * intre pe cât mai puține rânduri, ca ochiul să compare culorile dintr-o
 * privire. `minmax(0, 1fr)` — nu `1fr` — fiindcă altfel titlurile lungi de
 * produs ar lăți coloana peste partea ei.
 */
ul.products.familie__grila {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-3);
}

@media (min-width: 48rem) {
	ul.products.familie__grila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 75rem) {
	ul.products.familie__grila { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.familie__designer {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
	margin-top: var(--sp-6);
	padding: var(--sp-4);
	background: var(--fundal-verde);
	border-radius: var(--rotunjire);
}

.familie__designer-portret {
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.familie__designer-nume {
	margin: 0 0 var(--sp-2);
	font-weight: 600;
}

.familie__designer-citat {
	margin: 0 0 var(--sp-2);
	font-style: italic;
	color: var(--text-secundar);
}

.familie__designer p:last-child { margin-bottom: 0; }

/* Ușa dinspre pagina de produs. */
.familie-usa { margin: var(--sp-2) 0 0; }

.familie-usa a {
	font-size: var(--t-mic);
	color: var(--verde-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Sub 72rem coloana de 32rem ar strânge textul la un cuvânt pe rând. */
@media (max-width: 72rem) {
	.familie__sus { grid-template-columns: minmax(0, 1fr); }
	.familie__combinatie { max-width: 32rem; }
}

@media (max-width: 40rem) {
	.familie__designer { flex-direction: column; }
}