/* ==========================================================================
   AnticoMestiere — pagina de produs

   Pielea e a noastră: tokenurile din `style.css`, fontul Commissioner,
   chenarele și verdele Gartenmen. Nu e împrumutată nici tipografia lor, nici
   cromatica lor.

   O SINGURĂ NOTĂ STREINĂ, ȘI DE UNDE VINE. Cifrele romane ale celor patru faze
   sunt de culoarea lutului — `--am-lut`. Nu e culoarea din identitatea lor
   vizuală (nici nu i-am deschis paleta): e nuanța citită din pozele de studio
   ale produselor noastre, aceleași poze care stau la doi centimetri deasupra.
   Verde peste o poză de teracotă ar fi arătat ca o greșeală de tipar.

   Foaia se încarcă numai pe paginile mărcii, prin `gm_am_stiluri()`.
   ========================================================================== */

:root {
	--am-lut:       #b4795f;
	--am-lut-stins: #d9b6a5;
}

/* --------------------------------------------------------------------------
   Așezarea de sub galerie: acordeonul la stânga, cutia perechii la dreapta.

   DE CE E SCRISĂ ȘI AICI. Regulile astea trăiesc în `assets/elho.css`, care se
   încarcă doar pe paginile Elho. Fără ele, acordeonul se întinde pe toată
   lățimea paginii (până la 1560 px), iar cutia din dreapta cade sub el. Sunt
   reguli de așezare a șablonului, nu de marcă — ar fi locul lor în `style.css`,
   dar acela nu e fișierul nostru. Valorile sunt aceleași, deci ordinea de
   încărcare nu schimbă nimic dacă se nimeresc amândouă pe o pagină.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Mărimile din grup
   -------------------------------------------------------------------------- */

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

.am-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-secundar);
}

/* Mărimea de acum, lângă numele gamei: fără majuscule, ca să se citească ea
   întâi și eticheta abia după. */
.am-alegere__acum {
	margin-left: .4em;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--text);
}

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

.am-marime {
	display: inline-block;
	padding: .5em .95em;
	border: 1px solid var(--chenar);
	border-radius: 999px;
	background: var(--fundal);
	font-size: var(--t-mic);
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
	color: var(--text);
	text-decoration: none;
	transition: border-color .15s, background-color .15s;
}

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

.am-marime--aleasa {
	border-color: var(--verde-text);
	background: var(--verde-text);
	color: #fff;
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Cele patru însemne — ca în capul fișei lor de produs
   -------------------------------------------------------------------------- */

.am-semne {
	display: grid;
	gap: var(--sp-2);
	margin-block: var(--sp-4);
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--chenar-neutru);
	border-bottom: 1px solid var(--chenar-neutru);
	padding-block: var(--sp-3);
}

@media (min-width: 30em) {
	.am-semne { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-4); }
}

.am-semne li {
	display: flex;
	flex-direction: column;
	gap: .1em;
	font-size: var(--t-mic);
	line-height: 1.35;
}

.am-semne strong {
	font-weight: 600;
	color: var(--text);
}

.am-semne span {
	color: var(--text-stins);
}

/* --------------------------------------------------------------------------
   Capătul de stoc

   Nu e o casetă de alarmă. Toate cele 23 de produse ale mărcii sunt capete de
   stoc, deci o bandă roșie ar țipa pe fiecare pagină și n-ar mai fi citită de
   nimeni. O linie caldă, cu un fir de lut la stânga: se vede, dar nu sperie.
   -------------------------------------------------------------------------- */

.am-capat {
	margin-block: var(--sp-3);
	padding: var(--sp-2) var(--sp-3);
	border-left: 3px solid var(--am-lut);
	border-radius: 0 var(--rotunjire-mica) var(--rotunjire-mica) 0;
	background: color-mix(in srgb, var(--am-lut) 8%, transparent);
	font-size: var(--t-mic);
	line-height: 1.45;
	color: var(--text-secundar);
}

.am-capat strong {
	color: var(--text);
}

/* --------------------------------------------------------------------------
   Cutia perechii
   -------------------------------------------------------------------------- */

.am-pereche {
	margin: 0;
}

.am-pereche__titlu {
	margin: 0 0 var(--sp-2);
	font-size: var(--t-h3);
	line-height: 1.25;
	color: var(--text);
}

.am-pereche__de-ce {
	margin: 0 0 var(--sp-3);
	font-size: var(--t-mic);
	line-height: 1.5;
	color: var(--text-secundar);
}

.am-pereche__card {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	padding: var(--sp-2);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire);
	background: var(--fundal);
	text-decoration: none;
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
}

.am-pereche__card:hover,
.am-pereche__card:focus-visible {
	border-color: var(--verde);
	box-shadow: var(--umbra-mica);
}

.am-pereche__poza {
	flex: 0 0 clamp(5rem, 22%, 7.5rem);
}

/* Poza vine prin `gm_imagine()`, care tipărește `.produs__imagine` cu un `img`
   pătrat. Aici o strângem în locul ei, fără să atingem regula din temă. */
.am-pereche__poza .produs__imagine {
	margin: 0;
	border-radius: var(--rotunjire-mica);
	overflow: hidden;
	background: var(--fundal-blanda);
}

.am-pereche__poza img {
	display: block;
	width: 100%;
	height: auto;
}

.am-pereche__date {
	display: flex;
	flex-direction: column;
	gap: .2em;
	min-width: 0;
}

.am-pereche__nume {
	font-weight: 600;
	line-height: 1.3;
	color: var(--text);
}

.am-pereche__marime {
	font-size: var(--t-mic);
	font-variant-numeric: tabular-nums;
	color: var(--text-stins);
}

.am-pereche__pret {
	font-size: var(--t-mic);
	color: var(--verde-text);
}

.am-pereche__pret .amount { font-weight: 600; }

.am-pereche__nota {
	margin: var(--sp-3) 0 0;
	font-size: var(--t-mic);
	line-height: 1.5;
	color: var(--text-stins);
}

.am-pereche__usa {
	margin: var(--sp-2) 0 0;
	font-size: var(--t-mic);
}

/* --------------------------------------------------------------------------
   Îngrijirea, în acordeon
   -------------------------------------------------------------------------- */

.am-ingrijire__lista {
	margin: 0;
	max-width: var(--lat-text);
}

.am-ingrijire__lista dt {
	margin-top: var(--sp-3);
	font-weight: 600;
	color: var(--text);
}

.am-ingrijire__lista dt:first-child { margin-top: 0; }

.am-ingrijire__lista dd {
	margin: .25em 0 0;
	line-height: 1.6;
	color: var(--text-secundar);
}

/* --------------------------------------------------------------------------
   Banda de jos: cele patru faze
   -------------------------------------------------------------------------- */

/*
	Rămâne în înveliș, ca banda eco de pe pagina Elho.

	Am încercat întâi să iasă din margini (`margin-inline: calc(50% - 50vw)`).
	Nu merită: `100vw` numără și bara de derulare, deci pagina capătă o
	derulare pe orizontală de vreo 15 px pe Windows — pentru un fundal care
	oricum e verde deschis, adică aproape alb.
*/
.am-banda {
	margin-top: var(--sp-7);
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--rotunjire-mare);
	background: var(--fundal-verde);
}

.am-banda__cap {
	max-width: var(--lat-text);
	margin-bottom: var(--sp-5);
}

.am-banda__marca {
	margin: 0;
	font-size: var(--t-mic);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--am-lut);
}

.am-banda__titlu {
	margin: .15em 0 0;
	font-size: var(--t-h2);
	line-height: 1.15;
	color: var(--text);
}

.am-banda__deviza {
	margin: var(--sp-2) 0 0;
	font-size: var(--t-mediu);
	line-height: 1.45;
	color: var(--text-secundar);
}

.am-banda__faze {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 44em) { .am-banda__faze { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68em) { .am-banda__faze { grid-template-columns: repeat(4, 1fr); } }

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

/* Cifra romană nu e podoabă: fără ea, patru cartonașe cu text de aceeași
   lungime arată ca patru argumente puse alături, nu ca patru pași. */
.am-faza__nr {
	display: block;
	font-size: var(--t-h2);
	font-weight: 300;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--am-lut-stins);
}

.am-faza__nume {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5em;
	margin: var(--sp-2) 0 var(--sp-2);
	font-size: var(--t-h3);
	line-height: 1.2;
	color: var(--text);
}

.am-faza__it {
	font-size: var(--t-mic);
	font-weight: 400;
	font-style: italic;
	color: var(--am-lut);
}

.am-faza__text {
	margin: 0;
	font-size: var(--t-mic);
	line-height: 1.6;
	color: var(--text-secundar);
}

.am-banda__sursa {
	max-width: var(--lat-text);
	margin: var(--sp-5) 0 0;
	font-size: var(--t-mic);
	line-height: 1.55;
	color: var(--text-stins);
}