/*
	Pagina de produs Artevasi.

	Blocurile sunt ale lor — firul material › gamă, mărimea înaintea culorii,
	grila de însemne, amprenta de carbon, banda celor trei materiale. Pielea e a
	noastră: tokenurile temei, Commissioner, chenarele noastre.

	Singurele culori scrise de mână aici sunt cele trei semne de material din
	firul Ariadnei. Restul culorilor de pe pagină vin din date (pastilele de
	produs poartă codurile Artevasi), nu din foaia asta.

	Foaia se încarcă numai pe produsele Artevasi. Clasele împrumutate din
	`elho.css` (`.alegere`, `.pastila`, `.chips`, `.tehnice`) sunt scrise și
	aici, cu aceleași valori: cele două foi nu se întâlnesc niciodată pe aceeași
	pagină, iar magazinul trebuie să arate la fel de la o marcă la alta.
*/

/* --- 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);
}

.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;
}

.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;
}

.pastila {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	border: 1px solid var(--chenar);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #fff;
	background-size: cover;
	flex: none;
}

.pastila--aleasa {
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--verde-text);
}

/*
	Pastila cu numele lângă ea.

	La Artevasi bulina e goală, iar numele culorii stă doar în tooltip. Aici nu:
	gama Havana își cheamă culorile „limestone", „volcano", „granite", „mud" —
	patru pietre cenușii care într-o bulină de un centimetru și jumătate arată
	la fel. Numele e argumentul, deci se scrie.
*/
.arte-culori {
	gap: var(--sp-2) var(--sp-3);
}

.arte-culoare {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	padding: .3em .7em .3em .35em;
	border: 1px solid var(--chenar-neutru);
	border-radius: 999px;
	font-size: var(--t-mic);
	color: var(--text);
	text-decoration: none;
	transition: border-color .12s ease, background .12s ease;
}

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

.arte-culoare--aleasa {
	border-color: var(--verde-text);
	background: var(--fundal-verde-2);
	font-weight: 600;
}

.arte-culoare__nume { white-space: nowrap; }

/* --- Firul: material › gamă ---------------------------------------------- */

/*
	Prima treaptă din firul lor („Acasă › Produse › Plastic reciclat › venezia").
	Cele trei fundaluri sunt singurele culori scrise de mână din foaia asta și
	sunt aproximări ale materialului, nu culori de marcă: cenușiu-verde pentru
	plastic reciclat, alb-cald pentru ceramică, cărămiziu stins pentru teracotă.
	Textul stă pe ele la peste 7:1.
*/
.arte-fir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em;
	margin: 0 0 var(--sp-2);
	font-size: var(--t-mic);
}

.arte-fir__material {
	padding: .25em .7em;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .02em;
}

.arte-fir__material--plastic  { background: #e4ece2; color: #24422b; }
.arte-fir__material--ceramica { background: #f0ece2; color: #4a3d24; }
.arte-fir__material--teracota { background: #f3e2d8; color: #5c3323; }

.arte-fir__gama {
	color: var(--text-stins);
}

/* --- Însemnele ----------------------------------------------------------- */

/*
	Grila lor de atribute: două coloane pe telefon, trei pe desktop. La ei sunt
	pictograme peste text; aici pictograma stă lângă text, fiindcă româna e mai
	lungă decât engleza și „Sistem de auto-udare" nu încape sub o iconiță de 40
	de pixeli fără să se rupă în trei rânduri.
*/
.arte-insemne {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-2) var(--sp-3);
	margin: var(--sp-4) 0;
	padding: var(--sp-3) 0 0;
	border-top: 1px solid var(--chenar-neutru);
	list-style: none;
}

@media (min-width: 48em) {
	.arte-insemne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.arte-insemn {
	display: flex;
	align-items: flex-start;
	gap: .5em;
	font-size: var(--t-mic);
	line-height: 1.35;
	color: var(--text-secundar);
}

.arte-desen {
	flex: none;
	color: var(--verde-text);
}

/* --- Amprenta de carbon --------------------------------------------------- */

/*
	Cifra lor, singură. Fără bare de comparație: elho își publică termenii de
	comparație, Artevasi nu publică niciunul, iar unii împrumutați ar fi trecut
	drept ai lor.
*/
.arte-amprenta {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .2em var(--sp-2);
	align-items: center;
	margin-block: var(--sp-4);
	padding: var(--sp-3);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire);
	background: var(--fundal-verde);
}

.arte-amprenta .arte-desen {
	grid-row: 1 / 3;
	width: 2rem;
	height: 2rem;
	align-self: start;
}

.arte-amprenta__cifra {
	margin: 0;
	font-size: var(--t-mediu);
	line-height: 1.2;
}

.arte-amprenta__cifra strong {
	font-size: 1.35em;
	font-weight: 650;
	color: var(--verde-text);
	font-variant-numeric: tabular-nums;
}

.arte-amprenta__cifra span { color: var(--text-secundar); }

.arte-amprenta__spune {
	margin: 0;
	font-size: var(--t-mic);
	line-height: 1.45;
	color: var(--text-secundar);
}

.arte-amprenta__ean {
	display: block;
	margin-top: .3em;
	color: var(--text-stins);
}

/* --- 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: 55%;
	font-weight: 400;
	color: var(--text-stins);
}

.tehnice td {
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

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

.arte-farfurie {
	display: flex;
	align-items: center;
	gap: .5em;
	max-width: 46rem;
	margin: var(--sp-3) 0 0;
	padding: var(--sp-2) var(--sp-3);
	border: 1px dashed var(--chenar);
	border-radius: var(--rotunjire-mica);
	font-size: var(--t-mic);
	color: var(--text-secundar);
}

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

/*
	Aceeași hotărâre ca la Elho, din același motiv: pozele de scenă ale lui
	Artevasi sunt pătrate, nu panoramice. Tăiate la o bandă lată, rămâne un colț
	de masă. Așa că poza se pune întreagă, pe înălțimea benzii, iar restul benzii
	îl umple ea însăși, mărită și încețoșată.
*/
.arte-hero {
	position: relative;
	overflow: hidden;
	height: 22rem;
	background: var(--fundal-verde);
	isolation: isolate;
}

.arte-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;
}

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

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

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

/*
	Aceeași grilă ca la Elho — acordeonul la stânga, plantele potrivite la
	dreapta. Regula stă și în `elho.css`, dar foaia aceea nu se încarcă pe o
	pagină Artevasi, iar fără ea acordeonul se întinde cât ecranul.
*/
.produs-pagina__mijloc {
	display: grid;
	gap: var(--sp-5);
	align-items: start;
}

@media (min-width: 62em) {
	.produs-pagina__mijloc { grid-template-columns: 1fr 1fr; }
	.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);
}

.produs-pagina__alaturi .plante { margin: 0; }

/* --- Containerele 5 și 6: cele trei materiale ----------------------------- */

.arte-banda {
	margin-block-start: var(--sp-7);
	padding-block: var(--sp-6);
	border-top: 1px solid var(--chenar-neutru);
}

.arte-banda__titlu {
	margin: 0 0 var(--sp-2);
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
	font-weight: 500;
	text-align: center;
	color: var(--text);
}

.arte-banda__intro {
	max-width: 52ch;
	margin: 0 auto var(--sp-5);
	text-align: center;
	color: var(--text-secundar);
}

.arte-banda__grila {
	display: grid;
	gap: var(--sp-4);
	align-items: stretch;
}

@media (min-width: 56em) {
	.arte-banda__grila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
	Cele două materiale care nu sunt ale produsului rămân în pagină, dar stinse.
	Nu le scoatem: afirmația lui Artevasi e tocmai că le face pe toate trei, iar
	o singură cutie n-ar spune-o. Stinse înseamnă contrast mai mic, nu
	`opacity` — un text la 40% nu se mai poate citi de nimeni.
*/
.arte-material {
	display: flex;
	flex-direction: column;
	gap: .6em;
	padding: var(--sp-4);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	background: var(--fundal-blanda);
	color: var(--text-stins);
}

.arte-material--al-meu {
	border-color: var(--verde);
	background: var(--fundal-verde);
	color: var(--text-secundar);
	box-shadow: var(--umbra-mica);
}

.arte-material__semn {
	margin: 0;
	font-size: var(--t-mic);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--verde-text);
}

.arte-material__nume {
	margin: 0;
	font-size: var(--t-h3);
	font-weight: 550;
	color: var(--text);
}

.arte-material__scurt {
	margin: 0;
	font-weight: 550;
}

.arte-material__lung {
	margin: 0;
	font-size: var(--t-mic);
	line-height: 1.55;
}

.arte-material__semne {
	display: flex;
	flex-wrap: wrap;
	gap: .4em .9em;
	margin: auto 0 0;
	padding-top: var(--sp-3);
	list-style: none;
	border-top: 1px solid var(--chenar-neutru);
}

.arte-material__semne li {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-size: var(--t-mic);
}

.arte-material__semne .arte-desen { width: 18px; height: 18px; }

/* Stinse: pictograma nu mai e verde, ca să nu tragă ochiul din cutia aprinsă. */
.arte-material:not(.arte-material--al-meu) .arte-desen { color: var(--text-stins); }

.arte-banda__sursa {
	margin: var(--sp-4) 0 0;
	font-size: var(--t-mic);
	text-align: center;
	color: var(--text-stins);
}