/*
Theme Name: Gartenmen
Description: Temă proprie pentru magazinul B2B Gartenmen. Scrisă de mână, fără cadru și fără pas de compilare. O singură foaie de stil, clase numite după ce sunt.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: gartenmen
*/

/* ==========================================================================
   1. Fontul — variabil, local, fără nicio cerere externă
   ========================================================================== */

@font-face {
	font-family: "Commissioner";
	src: url("assets/fonts/commissioner-latin.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Commissioner";
	src: url("assets/fonts/commissioner-latin-ext.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	/* ă â î ș ț și restul diacriticelor din estul Europei */
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Tokenuri — culese din designul existent
   ========================================================================== */

:root {
	/* Verde: identitatea. Cel deschis pentru suprafețe, cel închis pentru text.
	   #6bb42f pe alb dă 2,56:1 — sub pragul de citibilitate, deci nu-l punem
	   niciodată sub text mic. */
	--verde:           #6bb42f;
	--verde-apasat:    #5a9a28;
	--verde-text:      #146a21;
	--verde-confirmare:#2f7d32;

	--text:            #1f3d1f;
	--text-secundar:   #4f6f4f;
	--text-stins:      #6a7f6a;

	--fundal:          #ffffff;
	--fundal-blanda:   #fafcf9;
	--fundal-verde:    #f4faef;
	--fundal-verde-2:  #edf6e8;

	--chenar:          #cfe3cf;
	--chenar-neutru:   #e3e8de;

	--umbra-mica:      0 2px 8px rgba(25, 61, 31, .08);
	--umbra-mare:      0 10px 28px rgba(25, 61, 31, .10);

	--rotunjire-mica:  8px;
	--rotunjire:       12px;
	--rotunjire-mare:  16px;

	/* Spații fluide: cresc cu ecranul, fără salturi la praguri */
	--sp-1: clamp(.4rem,  .3rem + .4vw,  .5rem);
	--sp-2: clamp(.6rem,  .45rem + .6vw, .75rem);
	--sp-3: clamp(.85rem, .6rem + .9vw,  1rem);
	--sp-4: clamp(1.2rem, .8rem + 1.5vw, 1.5rem);
	--sp-5: clamp(1.6rem, 1rem + 2.4vw,  2rem);
	--sp-6: clamp(2.2rem, 1.2rem + 4vw,  3.5rem);
	--sp-7: clamp(3rem,   1.5rem + 6vw,  5rem);

	/* Tipografie fluidă */
	--t-mic:    clamp(.78rem, .75rem + .12vw, .84rem);
	--t-baza:   clamp(.94rem, .9rem + .2vw,   1.03rem);
	--t-mediu:  clamp(1.05rem, .98rem + .35vw, 1.2rem);
	--t-h3:     clamp(1.15rem, 1rem + .7vw,   1.4rem);
	--t-h2:     clamp(1.4rem, 1.15rem + 1.2vw, 2rem);
	--t-h1:     clamp(1.75rem, 1.35rem + 2vw,  2.8rem);

	--font: "Commissioner", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Lățimea zonei de conținut.
	   1140 fix lăsa peste 400 px goi de fiecare parte pe un ecran de 1985, chiar
	   sub banda cu scoarța, care merge din margine în margine — de unde sarea în
	   ochi. Acum crește odată cu ecranul și se oprește la 1560: mai lat de atât,
	   rândurile de text devin greu de urmărit cu ochiul.
	   Grila de produse își adaugă singură coloane, deci nu e nimic de potrivit
	   pe lângă: 4 coloane la 1140, 5 la 1354, 6 la 1560. */
	--lat-continut: min(94vw, 1560px);
	--lat-text:     68ch;
	--margine:      clamp(1rem, 4vw, 2.5rem);
}

/* ==========================================================================
   3. Bază
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--fundal);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--t-baza);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--sp-3);
	line-height: 1.22;
	font-weight: 700;
	color: var(--text);
	text-wrap: balance;
}

h1 { font-size: var(--t-h1); letter-spacing: -.02em; }
h2 { font-size: var(--t-h2); letter-spacing: -.015em; }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-mediu); font-weight: 600; }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--verde-text);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
	transition: color .18s ease;
}

a:hover { color: var(--verde-apasat); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--verde-text);
	outline-offset: 2px;
	border-radius: 3px;
}

img, picture, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

ul, ol { padding-left: 1.15rem; margin: 0 0 var(--sp-3); }
li { margin-bottom: .3rem; }

table { border-collapse: collapse; width: 100%; }

/* Numerele se aliniază în coloane */
.pret, .cantitate, td.numeric, .numeric {
	font-variant-numeric: tabular-nums;
}

/* Doar pentru cititoarele de ecran */
.doar-citit {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sări la conținut — apare doar la navigarea cu tastatura */
.sari-la-continut {
	position: absolute;
	left: var(--sp-3);
	top: -4rem;
	z-index: 100;
	background: var(--verde-text);
	color: #fff;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--rotunjire-mica);
	text-decoration: none;
	transition: top .18s ease;
}
.sari-la-continut:focus { top: var(--sp-3); color: #fff; }

/* ==========================================================================
   4. Așezare
   ========================================================================== */

.invelis {
	width: 100%;
	max-width: var(--lat-continut);
	margin-inline: auto;
	padding-inline: var(--margine);
}

.invelis--ingust { max-width: 46rem; }

.sectiune { padding-block: var(--sp-6); }
.sectiune--blanda { background: var(--fundal-verde); }

/* Grilă care se rearanjează singură, la orice lățime, fără niciun prag */
.grila {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
}

.grila--stramta {
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
	gap: var(--sp-3);
}

.stiva { display: flex; flex-direction: column; gap: var(--sp-3); }
.rand  { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* Conținut redactat: măsură confortabilă la citit */
/* Măsura de citit stă pe bloc, nu pe fiecare copil.
   Pusă pe copii, ieșeau două stricăciuni care se vedeau abia pe ecran lat:
   liniile despărțitoare se așezau singure la mijloc, fiindcă `hr` are margini
   automate, iar titlurile ieșeau mai late decât paragrafele de sub ele — la
   font mai mare, 68 de caractere înseamnă mai mulți pixeli. Așa, tot blocul
   are o singură margine din dreapta și toate rândurile pornesc din același loc. */
.text-lung { max-width: var(--lat-text); }
.text-lung > * {
	max-width: 100%;
	margin-inline: 0;
}

/* ==========================================================================
   5. Butoane și câmpuri
   ========================================================================== */

.buton,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: var(--sp-2) var(--sp-4);
	min-height: 2.75rem;
	border: 1px solid var(--verde-apasat);
	border-radius: var(--rotunjire-mica);
	background: var(--verde);
	color: #6C3F1F;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

.buton:hover,
button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--verde-apasat);
	color: #fff;
}

.buton--secundar {
	background: transparent;
	color: var(--verde-text);
	border-color: var(--chenar);
}
.buton--secundar:hover {
	background: var(--fundal-verde);
	color: var(--verde-text);
	border-color: var(--verde);
}

input[type="text"], input[type="search"], input[type="email"],
input[type="tel"], input[type="password"], input[type="number"],
select, textarea {
	font: inherit;
	width: 100%;
	padding: var(--sp-2) var(--sp-3);
	min-height: 2.75rem;
	background: var(--fundal);
	color: var(--text);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
}

input:focus, select:focus, textarea:focus {
	border-color: var(--verde);
	outline-offset: 0;
}

/* ==========================================================================
   6. Antet
   ========================================================================== */

.antet {
	background: var(--fundal);
	border-bottom: 1px solid var(--chenar-neutru);
	position: sticky;
	top: 0;
	z-index: 50;
}

/* Antetul nu stă în chenarul de 1140px: se întinde pe toată lățimea, ca banda
   promo. Cu 45 de intrări în meniu, chenarul îl rupea în două rânduri. */
.antet .invelis {
	max-width: none;
	padding-inline: var(--margine);
}

/* --- Banda 1: slogan, căutare, conturi ---------------------------------- */
.antet__sus { border-bottom: 1px solid var(--chenar-neutru); }

.antet__sus-interior {
	display: grid;
	gap: var(--sp-2) var(--sp-4);
	align-items: center;
	padding-block: var(--sp-2);
	grid-template-columns: 1fr;
}

.antet__slogan {
	margin: 0;
	font-size: var(--t-mic);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-secundar);
}

.antet__conturi { display: flex; gap: var(--sp-4); justify-content: end; }
.antet__conturi a {
	text-decoration: none;
	font-size: var(--t-mic);
	font-weight: 600;
	color: var(--text);
}
.antet__conturi a:hover { color: var(--verde-text); }

/* --- Banda 2: contact, siglă mare la mijloc, coș ------------------------- */
.antet__mijloc-interior {
	display: grid;
	gap: var(--sp-2) var(--sp-4);
	align-items: center;
	padding-block: var(--sp-3);
	/* Telefon: sigla și acțiunile pe un rând, contactul dedesubt. */
	grid-template-areas:
		"sigla actiuni"
		"contact contact";
	grid-template-columns: 1fr auto;
}

.antet__contact { grid-area: contact; }
.antet__sigla   { grid-area: sigla; }
.antet__actiuni { grid-area: actiuni; justify-self: end; }

.antet__contact {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	text-decoration: none;
	color: var(--text);
	justify-self: start;
}
.antet__contact-icon { color: var(--verde); flex: none; }
.antet__contact-text { display: grid; line-height: 1.25; }
.antet__contact-text strong { color: var(--verde-text); }
.antet__contact-text span   { font-weight: 600; }

/* Pe telefon sigla se potolește, ca să încapă lângă meniu și coș. */
.antet__sigla img { width: auto; height: auto; max-width: 100%; max-height: 2.8rem; }
.antet__sigla a { text-decoration: none; font-weight: 700; font-size: var(--t-mediu); display: inline-block; }

.antet__actiuni { display: flex; gap: var(--sp-3); align-items: center; }

/* --- Banda 3: meniul ---------------------------------------------------- */
.antet__jos { border-top: 1px solid var(--chenar-neutru); }

/* De la ~52rem încolo fiecare bandă intră pe un singur rând, cu sigla și
   meniul centrate între cele două margini. */
@media (min-width: 52em) {
	.antet__sus-interior {
		grid-template-columns: 1fr minmax(16rem, 34rem) 1fr;
	}
	.antet__mijloc-interior {
		grid-template-areas: "contact sigla actiuni";
		grid-template-columns: 1fr auto 1fr;
	}
	.antet__sigla { justify-self: center; }
	.antet__sigla img { max-height: none; }

	/* Marginile antetului, trase spre mijloc: stânga 100px, dreapta 200px.
	   Numai pe ecran mare — pe telefon n-ar mai încăpea nimic. */
	.antet__slogan,
	.antet__contact { margin-inline-start: 100px; }
	.antet__conturi,
	.antet__mijloc-interior .antet__actiuni { margin-inline-end: 200px; }
}

.cos-legatura {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	text-decoration: none;
	font-weight: 600;
	color: var(--text);
}
.cos-legatura__numar {
	background: var(--verde);
	color: #fff;
	border-radius: 999px;
	min-width: 1.5rem;
	height: 1.5rem;
	display: inline-grid;
	place-items: center;
	font-size: var(--t-mic);
	padding-inline: .35rem;
}

/* Meniu: pe telefon o listă în teanc, deschisă din buton; pe ecran mare un
   singur rând, cu submeniurile căzând sub intrarea lor. */
.meniu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.meniu li { position: relative; }
.meniu a {
	text-decoration: none;
	color: var(--text);
	font-weight: 500;
	padding-block: var(--sp-1);
	display: inline-block;
}
.meniu a:hover,
.meniu .current-menu-item > a { color: var(--verde-text); }

/* Intrările cu submeniu își poartă semnul. */
.meniu .menu-item-has-children > a::after {
	content: "▾";
	margin-inline-start: .3em;
	font-size: .75em;
	vertical-align: .1em;
}

/* Telefon: submeniurile stau retrase, nu plutesc. */
.meniu .sub-menu { padding-inline-start: var(--sp-4); }

/* Butonul de meniu — există doar cât timp meniul e ascuns. */
.meniu-buton {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	background: none;
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	padding: .45rem .75rem;
	font: inherit;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
}
.meniu-buton__liniute,
.meniu-buton__liniute::before,
.meniu-buton__liniute::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}
.meniu-buton__liniute { position: relative; }
.meniu-buton__liniute::before,
.meniu-buton__liniute::after { content: ""; position: absolute; inset-inline-start: 0; }
.meniu-buton__liniute::before { top: -6px; }
.meniu-buton__liniute::after  { top:  6px; }

.antet__meniu { display: none; padding-block: var(--sp-2); }
.antet__meniu.este-deschis { display: block; }

@media (min-width: 52em) {
	.meniu-buton  { display: none; }
	.antet__meniu { display: block; }

	.meniu > ul {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--sp-2) var(--sp-4);
	}

	.meniu .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		inset-inline-start: 0;
		min-width: 15rem;
		padding: var(--sp-2);
		background: var(--fundal);
		border: 1px solid var(--chenar-neutru);
		border-radius: var(--rotunjire);
		box-shadow: var(--umbra-mica);
		z-index: 60;
	}
	/* Se deschide și la tastatură, nu doar la mouse. */
	.meniu li:hover > .sub-menu,
	.meniu li:focus-within > .sub-menu { display: flex; }

	/* Al treilea nivel iese lateral, nu mai jos. */
	.meniu .sub-menu .sub-menu { top: calc(var(--sp-2) * -1); inset-inline-start: 100%; }
	.meniu .sub-menu .menu-item-has-children > a::after { content: "›"; float: inline-end; }

	.meniu .sub-menu a { display: block; padding: var(--sp-1) var(--sp-2); }
}

/* ==========================================================================
   7. Produs — cardul din listări
   ========================================================================== */

.produs {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	background: var(--fundal);
	border: 0;
	border-radius: var(--rotunjire);
	padding: var(--sp-3);
	text-align: center;
	transition: box-shadow .18s ease;
	container-type: inline-size;
}

.produs:hover { box-shadow: var(--umbra-mica); }

.produs__imagine {
	aspect-ratio: 1;
	background: var(--fundal-blanda);
	border-radius: var(--rotunjire-mica);
	overflow: hidden;
}
.produs__imagine img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.produs__titlu {
	font-size: var(--t-baza);
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
}
.produs__titlu a { color: var(--text); text-decoration: none; }
.produs__titlu a:hover { color: var(--verde-text); }

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

.produs__pret {
	margin-top: auto;
	font-weight: 700;
	color: var(--verde-text);
	font-size: var(--t-mediu);
}

.produs__pret--ascuns {
	font-weight: 500;
	font-size: var(--t-mic);
	color: var(--text-secundar);
}

.produs__stoc { font-size: var(--t-mic); }
.produs__stoc--pe-stoc { color: var(--verde-confirmare); }
.produs__stoc--epuizat { color: var(--text-secundar); }

/* Stocul limitat nu e nici veste bună, nici proastă — e o precizare. Chihlimbar,
   nu roșu: roșul ar opri omul din cumpărat pentru ceva ce oricum poate comanda. */
.produs__stoc--limitat { color: #8a5a00; }

.produs__stoc-nota {
	display: block;
	color: var(--text-stins);
	font-weight: 400;
}

/* Când cardul are loc, titlul poate respira mai mult */
@container (min-width: 18rem) {
	.produs__titlu { font-size: var(--t-mediu); }
}

/* ==========================================================================
   8. Subsol
   ========================================================================== */

/* Trei coloane: însemnele la stânga, cele două liste la dreapta. Pe live
   coloana însemnelor e mai lată decât listele, iar listele sunt egale între
   ele. `auto-fit` ar fi împărțit în părți egale, deci scriem raportul. */
.subsol {
	margin-top: var(--sp-7);
	padding-block: var(--sp-6) var(--sp-4);
}

.subsol__coloane {
	display: grid;
	gap: var(--sp-5) var(--sp-6);
	grid-template-columns: minmax(12rem, 1.2fr) 1fr 1fr;
	align-items: start;
}

/* Însemnele: marca de plată, iar sub ea cele două butoane ANPC, unul lângă
   altul. Sub 640 px trec unul sub altul odată cu restul coloanelor. */
.subsol__insemne {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
}

.subsol__plata {
	width: 150px;
	height: auto;
	border-radius: var(--rotunjire-mica);
}

.subsol__anpc {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.subsol__anpc img {
	width: 160px;
	height: auto;
	display: block;
}

.subsol__anpc a:focus-visible {
	outline: 2px solid var(--verde-text);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Titlurile de coloană sunt scrise cu majuscule chiar în text, ca pe live —
   nu din CSS, ca cititoarele de ecran să le pronunțe la fel cum se văd. */
.subsol__lista h2 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 var(--sp-4);
}

.subsol__lista ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

/* Verdele e cel de pe live, măsurat: #309640. Pe alb dă 3,3:1 — sub pragul de
   4,5:1 pentru text mic. L-am păstrat fiindcă subsolul trebuie să arate la fel
   ca live; dacă vrem contrast bun, --verde-text (#146a21) dă 7,1:1. */
.subsol__lista a {
	color: #309640;
	text-decoration: none;
	font-size: var(--t-baza);
}

.subsol__lista a:hover,
.subsol__lista a:focus-visible {
	text-decoration: underline;
}

.subsol__jos {
	margin: var(--sp-5) 0 0;
	padding-top: var(--sp-4);
	border-top: 1px solid var(--chenar-neutru);
	text-align: center;
	font-size: var(--t-mic);
	font-weight: 600;
	color: var(--text);
}

@media (max-width: 40rem) {
	.subsol__coloane { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.subsol__lista ul { justify-items: center; }
}

/* ==========================================================================
   10. Listările WooCommerce
   ========================================================================== */

/* WooCommerce își desenează lista cu clasele lui; o punem pe aceeași grilă. */
ul.products {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Grila are nevoie și de dezlegarea așezării vechi a WooCommerce, care e cu
   float și lățimi în procente: `width: 13.5%` pe cartonaș, plus un clearfix
   din `::before` și `::after`.
   Peste grilă, procentele nu se mai socotesc din rând, ci din coloană — așa că
   fiecare cartonaș se strângea la o șeptime de coloană, cu titlul spart câte un
   cuvânt pe rând, iar cele două pseudo-elemente, devenite și ele căsuțe,
   împingeau primul produs din capul rândului.
   Se vedea doar pe magazin și pe căutare: acolo sunt singurele grile care stau
   într-o pagină cu clasa `woocommerce` pe body. Pe pagina de start clasa
   lipsește, iar categoriile au tabelul de comandă, nu cartonașe. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

/* Tot de acolo: poza din cartonaș primea `height: auto` și o margine de jos,
   care îi strica pătratul. */
.woocommerce ul.products li.product a img {
	height: 100%;
	margin: 0;
}

.produs--categorie a {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	text-decoration: none;
	color: inherit;
}

/* Logourile de marcă au fundal alb și proporții diferite: le lăsăm să respire. */
.produs--categorie .produs__imagine {
	background: var(--fundal);
	display: grid;
	place-items: center;
	padding: var(--sp-3);
}
.produs--categorie .produs__imagine img {
	object-fit: contain;
	width: auto;
	max-width: 100%;
	max-height: 100%;
}

.produs__imagine--goala {
	aspect-ratio: 1;
	background: var(--fundal-verde-2);
	border-radius: var(--rotunjire-mica);
}

.listare__unelte { justify-content: space-between; }
.listare__antet  { margin-block-end: var(--sp-5); }

/* Derularea continuă: butonul care se apasă singur */
.derulare {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	padding-block: var(--sp-5);
}
.derulare__stare {
	margin: 0;
	font-size: var(--t-mic);
	color: var(--text-stins);
}
.derulare__buton[disabled] { opacity: .6; cursor: progress; }

/* Căutare fără rezultate. Chenarul punctat e cel de la tabelul de comandă gol —
   aceeași înțelegere: aici ar fi trebuit să fie ceva și nu e. */
.cautare-goala {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-6) var(--sp-4);
	text-align: center;
	border: 1px dashed var(--chenar-neutru);
	border-radius: var(--rotunjire);
	background: var(--fundal-blanda);
}

.cautare-goala__titlu {
	margin: 0;
	font-size: var(--t-h3);
	font-weight: 600;
	color: var(--text);
}

.cautare-goala__sfat,
.cautare-goala__eticheta {
	margin: 0;
	font-size: var(--t-mic);
	color: var(--text-secundar);
}

/* Formularul e cel din antet; aici are loc, deci îl lăsăm mai lat. */
.cautare-goala__camp { width: min(28rem, 100%); }

.cautare-goala__categorii {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-2);
	margin-block-start: var(--sp-2);
}

.cautare-goala__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cautare-goala__lista .buton {
	background: var(--fundal);
	min-height: 2.25rem;
	padding: var(--sp-1) var(--sp-3);
	font-size: var(--t-mic);
}

/* ==========================================================================
   11. Pagina de start
   ========================================================================== */

.slider { position: relative; margin-block-end: var(--sp-6); }

.slider__pista {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.slider__pista::-webkit-scrollbar { display: none; }

.slider__cadru {
	flex: 0 0 100%;
	scroll-snap-align: start;
}
.slider__cadru img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1998 / 384;
	object-fit: cover;
}

.slider__sageata,
/*
   Semnul din butonul rotund e desenat, nu scris.

   Cu „‹" și „›" nu se poate centra: fiecare glifă are spațiul ei lateral, altul
   la stânga decât la dreapta, așa că textul stătea centrat în cutie, dar semnul
   se vedea împins într-o parte. Îl desenăm din două laturi rotite, și îl mutăm
   cu o zecime de latură dinspre vârf spre deschizătură — acolo cade centrul
   optic al unui „>", nu la mijlocul cutiei lui.
*/
.carusel__sageata {
	position: relative;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--chenar);
	border-radius: 50%;
	background: color-mix(in srgb, var(--fundal) 88%, transparent);
	color: var(--text);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

/* Culoarea semnului e scrisă, nu moștenită: `currentColor` lua albul pe care
   WooCommerce îl pune pe `button`, iar semnul ieșea alb pe alb — se vedea doar
   până la primul clic, când butonul primea starea de focus. */
.carusel__sageata::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .5rem;
	height: .5rem;
	border-top: 2px solid var(--text);
	border-right: 2px solid var(--text);
}

.carusel__sageata:hover:not([disabled])::before {
	border-color: var(--verde-text);
}

.carusel__sageata[data-carusel-inainte]::before {
	transform: translate(calc(-50% - .09rem), -50%) rotate(45deg);
}

.carusel__sageata[data-carusel-inapoi]::before {
	transform: translate(calc(-50% + .09rem), -50%) rotate(-135deg);
}
.slider__sageata:hover,
.carusel__sageata:hover:not([disabled]) {
	background: var(--fundal);
	border-color: var(--verde);
}
.carusel__sageata[disabled] { opacity: .35; cursor: default; }

.slider__sageata {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.slider__sageata--stanga  { inset-inline-start: var(--sp-3); }
.slider__sageata--dreapta { inset-inline-end: var(--sp-3); }

/* Benzile de produse */
.banda { padding-block: var(--sp-6); }

.banda__antet {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--sp-4);
}
.banda__titlu {
	margin: 0;
	font-size: var(--t-h2);
	line-height: 1.2;
	text-wrap: balance;
}
.banda__sageti { display: flex; gap: var(--sp-2); }

/* Carusel: aceleași cartonașe, așezate pe un rând care se derulează */
ul.products.carusel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	gap: var(--sp-4);
	padding-block-end: var(--sp-2);
	scrollbar-width: thin;
}
ul.products.carusel > li {
	flex: 0 0 min(15rem, 72%);
	scroll-snap-align: start;
}

/* Mărcile */
.marci {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
}
.marci__element img {
	width: auto;
	height: clamp(2.5rem, 5vw, 3.5rem);
	object-fit: contain;
	opacity: .75;
	transition: opacity .18s ease;
}
.marci__element a:hover img,
.marci__element a:focus-visible img { opacity: 1; }


/* Cartonașul de produs, ca pe site-ul vechi:
   imaginea pe alb, titlul dedesubt, prețul verde, apoi butonul. */
.produs__legatura {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	text-decoration: none;
	color: inherit;
}
.produs__legatura:hover .produs__titlu { color: var(--verde-text); }

.produs .produs__imagine { background: var(--fundal); }

.produs__titlu {
	font-size: var(--t-baza);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
}

.produs__pret {
	margin-block-start: auto;
	color: var(--verde);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
/* Mențiunea „ex. TVA" scrisă de B2BKing sub preț. */
.produs__pret .b2bking_price_taxes_text,
.produs__pret small {
	display: block;
	color: var(--text-stins);
	font-size: var(--t-mic);
	font-weight: 400;
}

.produs .button,
.produs .added_to_cart {
	display: inline-block;
	text-align: center;
	background: var(--verde);
	color: #fff;
	border: 0;
	border-radius: var(--rotunjire-mica);
	padding: var(--sp-2) var(--sp-3);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.produs .button:hover { background: var(--verde-apasat); }

/* Banda cu imaginea promo lângă produse, ca pe site-ul vechi:
   imaginea la stânga, produsele în grilă la dreapta. */
.banda--promo .banda__continut {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}
/* Banda asta nu stă în chenarul de 1140px al celorlalte: se întinde pe toată
   lățimea, ca pe site-ul vechi. O margine mică o ține departe de muchii. */
.banda--promo .invelis {
	max-width: none;
	padding-inline: var(--sp-3);
}
@media (min-width: 60em) {
	.banda--promo .banda__continut { grid-template-columns: 1fr 1fr; align-items: stretch; }
	.banda--promo ul.products { grid-template-columns: repeat(2, 1fr); }
}
/* Cartonașele de aici sunt de două ori mai late decât în listări, iar caseta
   pătrată a imaginii le umfla la aproape 600px fiecare. Le ținem scunde, ca
   cele două rânduri să se termine acolo unde se termină și imaginea de alături. */
.banda--promo .produs__imagine { aspect-ratio: auto; height: 14rem; }

/* Cine dă înălțimea benzii: produsele, nu imaginea.
 *
 * Aici era `min-height: 100%` pe coloana imaginii, într-o grilă cu
 * `align-items: stretch`. Procentul acela se măsoară față de înălțimea
 * rândului, care la rândul ei se calculează din ce e în el — o buclă pe care
 * fiecare motor o rupe cum știe. Chrome o rezolva strâns; Safari umfla rândul
 * cu vreo 350 px, iar cartonașele se întindeau după el, cu prețul împins la
 * fund și o gaură albă la mijloc. De-aia se vedea pe un ecran și pe altul nu.
 *
 * Scoasă din curgere, imaginea nu mai are ce înălțime să ceară: rândul e cât le
 * trebuie produselor, iar ea se încadrează în el. `contain`, fiindcă poartă
 * titlul scris în ea și nu se poate decupa. `min-height` ține locul pe ecrane
 * înguste, unde banda trece pe o singură coloană.
 */
.banda--promo__imagine {
	position: relative;
	min-height: 22rem;
}

/* Pe o singură coloană, imaginea n-are lângă ce să se potrivească: îi dăm
   proporția ei, ca să se vadă întreagă și fără dungi. */
@media (max-width: 59.99em) {
	.banda--promo__imagine {
		aspect-ratio: 2048 / 1883;
		min-height: 0;
	}
}
.banda--promo__imagine img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--rotunjire);
}

/* Fundalul acelei benzi: aceeași suprapunere caldă ca pe site-ul vechi
   (#B66F4D la 34% peste alb). */
.banda--promo {
	background: color-mix(in srgb, #B66F4D 34%, #ffffff);
}


/* Cartonașul, ca pe site-ul vechi: alb, fără chenar, totul centrat. */
.produs { align-items: stretch; }
.produs__titlu { text-align: center; }
.produs__pret  { text-align: center; }
.produs .button,
.produs .added_to_cart { align-self: center; }


/* ==========================================================================
   9. Pagina produsului
   ========================================================================== */

/* Două coloane egale, ca pe site-ul vechi: poza la stânga, datele la dreapta.
   Pe telefon se așază una sub alta, fără prag suplimentar. */
.produs-pagina__sus {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 52em) {
	.produs-pagina__sus { grid-template-columns: 1fr 1fr; }
}

/* Miniaturile de sub poza mare, așezate pe mijlocul ei.
   Erau într-o grilă cu `auto-fill`, care taie lățimea pozei în tot atâtea
   coloane câte încap — opt — chiar dacă miniaturi sunt cinci. Cele cinci
   umpleau primele sloturi, iar la dreapta rămâneau trei goale: blocul lor
   ieșea mutat cu 138 px la stânga față de mijlocul pozei.
   Aici nu e nevoie de coloane, ci de un rând care se strânge la mijloc. */
.produs-pagina__galerie {
	list-style: none;
	margin: var(--sp-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.produs-pagina__galerie > * {
	flex: 0 0 4.5rem;
	margin: 0;
}

.produs-pagina__galerie img {
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--fundal-blanda);
	border-radius: var(--rotunjire-mica);
}

.produs-pagina .woocommerce-breadcrumb {
	margin: 0;
	font-size: var(--t-mic);
	color: var(--text-secundar);
}
.produs-pagina .woocommerce-breadcrumb a { color: inherit; }

.produs-pagina__titlu {
	margin: 0;
	font-size: var(--t-h2);
	line-height: 1.25;
}

/* În pagina produsului prețul și butonul stau la stânga, nu centrate ca pe
   cartonașe — regulile de acolo se aplicau și aici. */
.produs-pagina__date .produs__pret {
	margin-block-start: 0;
	text-align: start;
	font-size: var(--t-h3);
}
.produs-pagina__date .produs__cod { text-align: start; }

/* Jos: descrierea, apoi fișa. O singură coloană, lată.
   Două coloane păreau o idee bună — ambalarea alături de text, spațiul umplut.
   Nu ține: descrierile au mii de cuvinte, fișa are patru rânduri. Coloana din
   dreapta se golea după un ecran și rămânea albă până jos.
   Rândul rămâne totuși mărginit: peste vreo sută de semne, ochiul pierde
   începutul rândului următor. 88ch e mai lat decât măsura clasică de 68, dar
   încă se citește. */
.produs-pagina__jos {
	margin-block-start: var(--sp-6);
	max-width: 1140px;
	margin-inline: auto;
}

/* Textul descrierii.

   Fontul e al nostru, scris explicit: unele descrieri venite din BaseLinker
   aveau `font-family: BrandonGrotesque` și mărimi în pixeli scrise în ele —
   fontul lui elho, care în pagina noastră ieșea ca un petic. Le-am curățat în
   conținut (vezi tools/descrieri-formateaza.php), iar linia de aici e plasa:
   dacă mai vine vreodată una cu haina ei, tot Commissioner se vede.

   Lățimea e legată de citit, nu de ecran: peste ~46rem, ochiul pierde rândul
   când se întoarce la capăt. */
.produs-pagina__descriere {
	max-width: 46rem;
	font-family: var(--font);
	font-size: var(--t-baza);
	line-height: 1.7;
	color: var(--text-secundar);
}

.produs-pagina__descriere p {
	margin: 0 0 var(--sp-3);
}

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

/* Îngroșatul e pentru numele gamei, o dată pe descriere — deci merită culoarea
   textului plin, nu verdele, ca să nu pară legătură. */
.produs-pagina__descriere strong {
	font-weight: 600;
	color: var(--text);
}

.produs-pagina__descriere em { font-style: italic; }

.produs-pagina__descriere ul,
.produs-pagina__descriere ol {
	margin: 0 0 var(--sp-3);
	padding-left: 1.2em;
}

.produs-pagina__descriere li { margin-block: .25em; }

.produs-pagina__descriere > * { max-width: 100%; margin-inline: 0; }

/* Tabelele scrise în descrierea produsului.
   Veneau nestilizate din editor — o celulă avea un pixel de spațiu și nicio
   linie, așa că „Pas / Acțiune" se citea ca un bloc de text lipit, nu ca tabel.
   Textul din celule e lung, deci se aliniază sus, nu la mijloc. */
.produs-pagina__descriere table {
	margin-block: var(--sp-4);
	font-size: var(--t-baza);
}

.produs-pagina__descriere th,
.produs-pagina__descriere td {
	padding: var(--sp-3);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--chenar-neutru);
}

.produs-pagina__descriere thead th {
	font-size: var(--t-mic);
	font-weight: 600;
	color: var(--text-secundar);
	text-transform: uppercase;
	letter-spacing: .03em;
	border-bottom-color: var(--chenar);
	background: var(--fundal-blanda);
}

/* Prima coloană poartă pasul: îngustă, ca textul de alături să aibă loc. */
.produs-pagina__descriere tbody td:first-child { width: 12rem; }

.produs-pagina__descriere tbody tr:last-child th,
.produs-pagina__descriere tbody tr:last-child td { border-bottom: 0; }

/* Ambalarea și documentele, una lângă alta, într-un chenar al lor. Sunt
   amândouă scurte, deci pe două coloane se termină aproape la aceeași
   înălțime. Sub 52rem trec una sub alta. */
.produs-pagina__fise {
	display: grid;
	gap: var(--sp-5) var(--sp-6);
	margin-block-start: 30px;
	padding: var(--sp-5);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire);
}

@media (min-width: 52em) {
	.produs-pagina__fise { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* --- Acordeonul fișelor -------------------------------------------------- */

/*
   Rânduri, nu cutii. Șapte blocuri puse toate deschise lungeau pagina cu trei
   ecrane; strânse, se vede din prima ce se poate afla despre produs. Primul rând
   (descrierea) rămâne deschis, ca nimeni să nu apese ca să citească ce cumpără.

   `details` face deschisul singur. Marcatorul lui implicit — triunghiul negru —
   se scoate, fiindcă punem chevronul nostru la capătul rândului, unde e la ei.
*/
.acordeon {
	margin-block-start: 30px;
	border-top: 1px solid var(--chenar);
}

.acordeon__rand {
	border-bottom: 1px solid var(--chenar);
}

.acordeon__titlu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-2);
	font-size: var(--t-h3);
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	list-style: none;
}

.acordeon__titlu::-webkit-details-marker { display: none; }

.acordeon__titlu:hover { color: var(--verde-text); }

/* Chevronul: două laturi de pătrat întoarse pe diagonală. Roteşte la deschidere,
   deci nu avem nevoie de două semne diferite. */
.acordeon__titlu::after {
	content: "";
	flex: 0 0 auto;
	width: .55em;
	height: .55em;
	margin-right: .3em;
	border-right: 2px solid var(--verde);
	border-bottom: 2px solid var(--verde);
	transform: rotate(45deg) translateY(-.1em);
	transition: transform .18s ease;
}

.acordeon__rand[open] > .acordeon__titlu::after {
	transform: rotate(225deg) translateY(-.1em);
}

.acordeon__cuprins {
	padding: 0 var(--sp-2) var(--sp-5);
}

/* Blocurile dinăuntru și-au pierdut rostul chenarului propriu: rândul e chenarul.
   Titlul lor a devenit rândul, deci nici el nu se mai repetă. */
.acordeon__cuprins .fisa,
.acordeon__cuprins .colectie,
.acordeon__cuprins .designer,
.acordeon__cuprins .plante,
.acordeon__cuprins .produs-pagina__descriere {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Excepție: blocul designerului își ține placa verde — e un citat, nu o listă,
   și fără fundal se pierde între tabele. */
.acordeon__cuprins .designer {
	padding: var(--sp-4);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire);
	background: var(--fundal-verde);
}

/*
   Două coloane merg pentru fișele scurte și numerice — tabelul tehnic lângă
   amprentă, ambalarea lângă documente. Nu merg pentru text: povestea colecției,
   citatul designerului și plantele potrivite iau rândul întreg, altfel se rup în
   coloane de câte patru cuvinte.
*/
.produs-pagina__fise .colectie,
.produs-pagina__fise .designer,
.produs-pagina__fise .plante {
	grid-column: 1 / -1;
}

/* Au chenarul lor acum; linia de sus a fiecărei fișe ar fi fost a doua ramă. */
.produs-pagina__fise .fisa {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Măsura de mai devreme era pentru o coloană lată; aici coloana e deja îngustă. */
.produs-pagina__fise .fisa__trepte,
.produs-pagina__fise .fisa__documente,
.produs-pagina__fise .fisa__perechi { max-width: none; }
.produs-pagina__descriere h2 { font-size: var(--t-h3); }

/* WooCommerce își colorează singur butonul principal prin clasa `.alt` — mov,
   din foaia lui de stil. Îl aducem înapoi la verdele temei. */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button {
	background: var(--verde);
	border-color: var(--verde-apasat);
	color: #fff;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover {
	background: var(--verde-apasat);
}

/* Câmpul de cantitate, lângă buton și de aceeași înălțime. */
.produs-pagina__date form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
}
.produs-pagina__date .quantity input.qty {
	min-height: 2.75rem;
	padding: var(--sp-2);
	text-align: center;
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	font: inherit;
	width: 5rem;
}


/* ==========================================================================
   10. Pagina de categorie — tabelul de comandă în bloc
   ========================================================================== */

.grup {
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	margin-block-end: var(--sp-2);
	overflow: hidden;
	background: var(--fundal);
}

.grup__antet {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	width: 100%;
	padding: var(--sp-3) var(--sp-4);
	background: var(--fundal);
	border: 0;
	border-radius: 0;
	min-height: 0;
	color: var(--text);
	font-weight: 600;
	font-size: var(--t-mediu);
	text-align: start;
	cursor: pointer;
}
.grup__antet:hover { background: var(--fundal-blanda); }
.grup__antet[aria-expanded="true"] {
	background: var(--fundal-verde);
	border-block-end: 1px solid var(--chenar-neutru);
}

.grup__semn {
	flex: none;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 400;
	color: var(--verde);
	transition: transform .2s ease;
}
.grup__antet[aria-expanded="true"] .grup__semn { transform: rotate(45deg); }

/* Plierea se face din CSS, după starea pe care o poartă antetul. */
.grup__antet[aria-expanded="false"] + .grup__corp { display: none; }
.grup__corp { padding-block-end: var(--sp-2); }

/* --- Rândul --------------------------------------------------------------- */
.grup__rand {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-2) var(--sp-4);
	border-block-end: 1px solid var(--chenar-neutru);
}
.grup__rand:last-of-type { border-block-end: 0; }
.grup__rand:nth-child(even) { background: var(--fundal-blanda); }

/* Bucăți pe cutie: cifra după care omul își alege cantitatea. Stă mărunt,
   lângă contor, ca să se vadă fără să fure atenția de la preț. */
.grup__cutie {
	flex: 0 0 5.5rem;
	text-align: right;
	line-height: 1.2;
}
.grup__cutie-nr {
	display: block;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.grup__cutie-um {
	display: block;
	font-size: var(--t-mic);
	color: var(--text-stins);
}

.grup__poza { flex: 0 0 56px; }
.grup__poza img,
.grup__poza--goala {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: var(--rotunjire-mica);
	background: var(--fundal-blanda);
	display: block;
}

.grup__cod {
	flex: 0 0 7rem;
	font-size: var(--t-mic);
	color: var(--text-stins);
	font-variant-numeric: tabular-nums;
}

/* Denumirea cere un minim: cu filtrul alături, tabelul se îngustează, iar fără
   el coloana ajungea la o literă pe rând. Când nu mai încape, rândul se rupe. */
.grup__nume { flex: 1 1 12rem; min-width: 9rem; }
.grup__nume a {
	color: var(--text);
	text-decoration: none;
	overflow-wrap: anywhere;
	display: block;
}
.grup__nume a:hover { color: var(--verde-text); }

.grup__pret {
	flex: 0 0 9rem;
	font-weight: 700;
	color: var(--verde-text);
	font-variant-numeric: tabular-nums;
}
/* Când prețul e ascuns pentru vizitatori, textul e lung — îl lăsăm să curgă. */
.grup__pret a { font-weight: 600; }

.grup__contor {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}
.grup__pas {
	width: 1.75rem;
	height: 1.75rem;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	background: var(--fundal);
	color: var(--text);
	font-size: var(--t-baza);
	line-height: 1;
	cursor: pointer;
}
.grup__pas:hover { background: var(--fundal-verde); }

.grup__cantitate {
	width: 4rem;
	padding: var(--sp-1);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	background: var(--fundal-blanda);
	font: inherit;
	font-size: var(--t-mic);
	text-align: center;
}
.grup__cantitate:focus { background: var(--fundal); border-color: var(--verde); }

.grup__adauga { flex: 0 0 auto; }
.grup__buton {
	padding: var(--sp-2) var(--sp-3);
	min-height: 0;
	font-size: var(--t-mic);
	white-space: nowrap;
}
.grup__buton:disabled { background: var(--text-stins); border-color: var(--text-stins); cursor: not-allowed; }

.grup__mai-mult {
	display: flex;
	justify-content: center;
	padding: var(--sp-3) var(--sp-4) var(--sp-1);
}

/* Pe telefon codul dispare, rândul se rupe pe două linii. */
@media (max-width: 40em) {
	.grup__rand { flex-wrap: wrap; gap: var(--sp-2); }
	.grup__cod { display: none; }
	.grup__poza { flex: 0 0 44px; }
	.grup__poza img,
	.grup__poza--goala { width: 44px; height: 44px; }
	.grup__nume { flex: 1 1 60%; }
	.grup__pret { flex: 0 0 auto; }
}

/* Rândul unui vizitator care nu poate cumpăra: fără contor, fără buton. */
.grup__inchis {
	flex: 0 0 auto;
	font-size: var(--t-mic);
	font-weight: 600;
}

/* --- Filtrul din stânga tabelului ---------------------------------------- */
.categorie {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 60em) {
	.categorie { grid-template-columns: 16rem 1fr; }
	/* Rămâne la vedere cât timp derulezi lista lungă de rânduri. */
	.categorie__filtru { position: sticky; top: var(--sp-4); }
}

/* Coloana rezultatelor pe pagina de căutare.
   `min-width: 0` nu e de prisos: o căsuță de grilă are lățimea minimă a
   conținutului, iar grila de cartonașe dinăuntru ar împinge coloana peste
   marginea ecranului în loc să se strângă. */
.categorie__rezultate {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	min-width: 0;
}

.filtru {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	background: var(--fundal);
}

.filtru__antet {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
}
.filtru__titlu { margin: 0; font-size: var(--t-mediu); }
.filtru__sterge { font-size: var(--t-mic); }

.filtru__grup {
	margin: 0;
	padding: 0;
	border: 0;
	border-block-start: 1px solid var(--chenar-neutru);
	padding-block-start: var(--sp-2);
}
.filtru__grup legend,
.filtru__legenda {
	padding: 0;
	font-weight: 700;
	font-size: var(--t-mic);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-secundar);
}

.filtru__optiune {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding-block: .18rem;
	cursor: pointer;
	font-size: var(--t-mic);
}
.filtru__optiune:hover .filtru__nume { color: var(--verde-text); }
.filtru__nume { flex: 1 1 auto; }
.filtru__cate {
	flex: none;
	color: var(--text-stins);
	font-variant-numeric: tabular-nums;
}

.filtru__pret input {
	width: 100%;
	min-width: 0;
	padding: var(--sp-1) var(--sp-2);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	font: inherit;
	font-size: var(--t-mic);
}
.filtru__pret .rand { flex-wrap: nowrap; gap: var(--sp-2); }

.filtru__aplica { width: 100%; }

.grupuri__gol {
	padding: var(--sp-5);
	text-align: center;
	color: var(--text-secundar);
	border: 1px dashed var(--chenar-neutru);
	border-radius: var(--rotunjire);
}

/* Listarea stă în același chenar ca restul site-ului.
   A ținut o vreme toată lățimea, fiindcă tabelul cu filtrul alături avea nevoie
   de loc și denumirile se spărgeau în coloane de o literă. De când chenarul a
   crescut la 1560, locul ajunge — iar o pagină care se întinde altfel decât
   celelalte se vede. */
.invelis--lat { padding-inline: var(--margine); }

/* Fără filtru, tabelul ia toată lățimea — fără coloană goală la stânga. */
.categorie--fara-filtru { grid-template-columns: 1fr; }
@media (min-width: 60em) {
	.categorie--fara-filtru { grid-template-columns: 1fr; }
}

/* ==========================================================================
   11. Contul meu
   Structura luată de la drsoil-shop: antet, pastile, cap de filă, foaie dublă.
   Înfățișarea e a noastră — acolo e o paletă de pergament, aici verdele temei.
   ========================================================================== */

.cont { display: flex; flex-direction: column; gap: var(--sp-4); }

/* --- Antetul: cine ești ---------------------------------------------------- */
.cont__antet {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	background: var(--fundal-verde);
}
.cont__medalion {
	flex: none;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: var(--verde);
	color: #fff;
	font-weight: 700;
	letter-spacing: .02em;
}
.cont__cine { flex: 1 1 auto; min-width: 0; }
.cont__nume { margin: 0; font-weight: 700; font-size: var(--t-mediu); }
.cont__mail { margin: 0; font-size: var(--t-mic); color: var(--text-secundar); overflow-wrap: anywhere; }
.cont__iesire { flex: none; }

/* --- Meniul: pastile, nu bară laterală ------------------------------------ */
.cont__meniu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}
.cont__meniu li { margin: 0; }

.cont__pastila {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--chenar-neutru);
	border-radius: 999px;
	background: var(--fundal);
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--t-mic);
	white-space: nowrap;
}
.cont__pastila:hover { background: var(--fundal-verde); color: var(--verde-text); }

/* Fila de acum: plină, nu doar altfel colorată — se vede și fără culoare. */
.cont__pastila--acum,
.cont__pastila--acum:hover {
	background: var(--verde);
	border-color: var(--verde-apasat);
	color: #fff;
}

/* --- Capul filei ----------------------------------------------------------- */
.cont__cap {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding-block-start: var(--sp-2);
}
.cont__cap-semn {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--rotunjire);
	background: var(--fundal-verde-2);
	color: var(--verde-text);
}
.cont__cap-titlu { margin: 0; font-size: var(--t-h2); }
.cont__cap-sub { margin: .15rem 0 0; color: var(--text-secundar); }

/* --- Foaia dublă: fila la stânga, contextul la dreapta --------------------- */
.cont__foaie {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 60em) {
	.cont__foaie { grid-template-columns: minmax(0, 1fr) 20rem; }
	/* Fără coloană de context, fila nu se întinde cât ține pagina: textul ar
	   deveni prea lung ca să fie citit confortabil. */
	.cont__foaie--singura { grid-template-columns: minmax(0, 58rem); }
}

.cont__continut > :first-child { margin-block-start: 0; }

/* --- Coloana de context ---------------------------------------------------- */
.context {
	padding: var(--sp-3);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	background: var(--fundal-blanda);
	font-size: var(--t-mic);
}
.context + .context { margin-block-start: var(--sp-3); }
.context__titlu {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-2);
	font-size: var(--t-mic);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-secundar);
}
.context p { margin-block-end: var(--sp-2); }
.context__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.context__lista a { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; font-weight: 600; }
.context__lista a:hover { text-decoration: underline; }
.context__telefon a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.context__stari { margin: 0; }
.context__stari dt { font-weight: 700; color: var(--verde-text); }
.context__stari dd { margin: 0 0 var(--sp-2); }

.gm-icoana { flex: none; display: block; }

/* --- Ce mai rămâne din foaia WooCommerce ----------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation { display: none; }

.woocommerce-account .shop_table {
	width: 100%;
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce-account .shop_table th,
.woocommerce-account .shop_table td {
	padding: var(--sp-2) var(--sp-3);
	text-align: start;
	border-block-end: 1px solid var(--chenar-neutru);
}
.woocommerce-account .shop_table th {
	background: var(--fundal-verde);
	font-size: var(--t-mic);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--text-secundar);
}
.woocommerce-account .shop_table tr:last-child td { border-block-end: 0; }

.woocommerce-account .woocommerce-Addresses {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}
/* `.col2-set` își curăță flotările cu ::before și ::after; într-o grilă acelea
   devin celule ocupate și împing adresele pe diagonală. */
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after { display: none; }
.woocommerce-account .woocommerce-Addresses > div { float: none; width: auto; margin: 0; }
.woocommerce-account .woocommerce-Address {
	padding: var(--sp-3);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
}
.woocommerce-account .woocommerce-Address-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 { margin: 0; font-size: var(--t-mediu); }

.woocommerce-account .form-row { margin-block-end: var(--sp-3); display: block; }
.woocommerce-account .form-row label { display: block; font-weight: 600; margin-block-end: var(--sp-1); }
.woocommerce-account .form-row .input-text,
.woocommerce-account .form-row select {
	width: 100%;
	padding: var(--sp-2);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire-mica);
	font: inherit;
}

/* Fără cont, formularul de autentificare stă singur, ca un card centrat. */
.woocommerce-account:not(.logged-in) .woocommerce-form-login {
	max-width: 26rem;
	margin-inline: auto;
	padding: var(--sp-4);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
}

/* --- Panoul clientului ------------------------------------------------------
   Ordinea blocurilor e ordinea nevoilor: ce e în lucru, ce pot recomanda,
   cine sunt. */
.panou-bloc {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	margin-block-end: var(--sp-4);
}
.panou-bloc--repeta { background: var(--fundal-verde); border-color: var(--chenar); }

.panou-titlu { margin: 0 0 var(--sp-2); font-size: var(--t-mediu); }
.panou-nota { color: var(--text-secundar); font-size: var(--t-mic); }

.panou-comenzi { list-style: none; margin: 0; padding: 0; }
.panou-comenzi li { margin: 0; border-block-start: 1px solid var(--chenar-neutru); }
.panou-comenzi li:first-child { border-block-start: 0; }

.panou-comanda {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2) var(--sp-3);
	padding-block: var(--sp-2);
	text-decoration: none;
	color: var(--text);
}
.panou-comanda:hover .panou-comanda__nr { color: var(--verde-text); }
.panou-comanda__nr    { font-weight: 700; font-variant-numeric: tabular-nums; }
.panou-comanda__data  { color: var(--text-secundar); font-size: var(--t-mic); }
.panou-comanda__total { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Starea se vede și fără culoare: fiecare are eticheta ei scrisă. */
.panou-stare {
	padding: .1rem var(--sp-2);
	border-radius: 999px;
	font-size: var(--t-mic);
	font-weight: 600;
	background: var(--fundal-verde-2);
	color: var(--verde-text);
}
.panou-stare--on-hold,
.panou-stare--pending { background: #fdf3e3; color: #8a5a12; }

.panou-produse { list-style: none; margin: var(--sp-2) 0; padding: 0; font-size: var(--t-mic); }
.panou-produse li { display: flex; gap: var(--sp-2); margin: 0; padding-block: .18rem; }
.panou-produs__cant { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--verde-text); }
.panou-produs__nume a { color: var(--text); text-decoration: none; }
.panou-produs__nume a:hover { color: var(--verde-text); text-decoration: underline; }
.panou-produs__rest { color: var(--text-secundar); font-style: italic; }

.panou-cifre {
	display: grid;
	gap: var(--sp-3);
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
.panou-cifra {
	padding: var(--sp-3);
	border: 1px solid var(--chenar-neutru);
	border-radius: var(--rotunjire);
	text-align: center;
}
.panou-cifra__valoare { display: block; font-size: var(--t-h3); font-weight: 700; color: var(--verde-text); }
.panou-cifra__eticheta { display: block; font-size: var(--t-mic); color: var(--text-secundar); }

/* Agentul alocat, în coloana de context. */
.context__agent { margin: 0 0 var(--sp-1); font-weight: 700; font-size: var(--t-baza); color: var(--text); }
.context__mail { margin-block-end: var(--sp-2); overflow-wrap: anywhere; }

/* ==========================================================================
   13. Fișa produsului: ambalare și documente
   ========================================================================== */

/* Treisprezece numere înșirate nu spun nimic. Piramida de ambalare — bucată,
   cutie, layer, palet — e forma în care gândește oricine lucrează cu marfa,
   și răspunde dintr-o privire la „ce comand ca să umplu un palet". */
.fisa {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--chenar-neutru);
}

.fisa__titlu {
	font-size: var(--t-baza);
	margin: 0 0 var(--sp-4);
}

/* Strânse la o măsură de citit. Lăsate să se întindă pe tot chenarul de 1560,
   coloanele se depărtau atât de mult încât ochiul pierdea rândul între
   „Cuprinde" și „Bucăți". */
.fisa__trepte,
.fisa__documente,
.fisa__perechi { max-width: 44rem; }

.fisa__trepte {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-baza);
}

.fisa__trepte th,
.fisa__trepte td {
	padding: var(--sp-2) var(--sp-3);
	text-align: left;
	border-bottom: 1px solid var(--chenar-neutru);
}

.fisa__trepte thead th {
	font-size: var(--t-mic);
	font-weight: 600;
	color: var(--text-secundar);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Fiecare treaptă e mai grea decât cea de dinaintea ei; o umbră care crește
   ușor pe rânduri lasă ochiul să simtă asta fără să citească cifrele. */
.fisa__trepte tbody tr:nth-child(2) { background: color-mix(in srgb, var(--fundal-verde) 40%, transparent); }
.fisa__trepte tbody tr:nth-child(3) { background: color-mix(in srgb, var(--fundal-verde) 70%, transparent); }
.fisa__trepte tbody tr:nth-child(4) { background: var(--fundal-verde); }

.fisa__trepte tbody th { font-weight: 600; }
.fisa__trepte .cifra  { text-align: right; font-variant-numeric: tabular-nums; }

.fisa__nota {
	margin: var(--sp-2) 0 0;
	font-size: var(--t-mic);
	color: var(--text-stins);
}

/* Perechile de dedesubt: lucruri de care e nevoie pe factură, nu la comandă. */
.fisa__perechi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	margin: var(--sp-4) 0 0;
}

.fisa__perechi dt {
	font-size: var(--t-mic);
	color: var(--text-stins);
	margin: 0;
}

.fisa__perechi dd {
	margin: 0;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Documentele: legături care se văd că sunt fișiere, nu text albastru. */
.fisa__documente {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.fisa__documente a {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire-mica);
	text-decoration: none;
	color: var(--text);
	background: var(--fundal);
}

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

.fisa__semn {
	flex: none;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .25rem .4rem;
	border-radius: 4px;
	background: var(--verde-text);
	color: #fff;
}

.fisa__nume   { flex: 1; }
.fisa__marime { font-size: var(--t-mic); color: var(--text-stins); }

@media (max-width: 40em) {
	.fisa__trepte thead { display: none; }
	.fisa__trepte tr    { display: grid; grid-template-columns: 1fr auto; padding-block: var(--sp-2); }
	.fisa__trepte td, .fisa__trepte th { border: 0; padding: .1rem var(--sp-2); }
}

/* Greutatea estimată, în totalurile coșului. */
.gm-greutate__nota {
	display: block;
	font-size: var(--t-mic);
	color: var(--text-stins);
	font-weight: 400;
}

/* ==========================================================================
   14. Alte produse din categorie
   ========================================================================== */

/* Iese din coloana îngustă a descrierii: o listă de produse are nevoie de
   lățime, altfel intră două pe rând și pagina se lungește degeaba. */
.inrudite {
	margin-block-start: var(--sp-7);
	padding-block-start: var(--sp-5);
	border-top: 1px solid var(--chenar-neutru);
}

.inrudite__titlu {
	font-size: var(--t-h3);
	margin-bottom: var(--sp-4);
}

/* Șase pe rând pe ecran lat, iar mai jos se rărește singură după lățime.
   `auto-fill` ar fi lăsat sloturi goale la capăt când produsele nu se împart
   exact; `auto-fit` le strânge. */
ul.products.inrudite__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

@media (min-width: 75em) {
	ul.products.inrudite__lista { grid-template-columns: repeat(6, 1fr); }
}

/* WooCommerce își pune cartonașele pe `float: left` cu lățime de 22% — o
   așezare de dinaintea grilelor. Într-o grilă, floatul e ignorat, dar lățimea
   nu: cartonașul ieșea de 50 px într-un loc de 226, cu titlurile rupte câte un
   cuvânt pe rând. Îl lăsăm să umple ce i s-a dat. */
/* Selectorul lui e `.woocommerce ul.products li.product` — trei clase și două
   elemente. Al nostru trebuie să treacă peste, de aceea e scris atât de lung. */
.inrudite ul.products.inrudite__lista > li.product {
	width: auto;
	float: none;
	clear: none;
	margin: 0;
}

.inrudite__stare {
	margin: var(--sp-4) 0 0;
	text-align: center;
	font-size: var(--t-mic);
	color: var(--text-stins);
	min-height: 1.5em;
}

.inrudite__semn { height: 1px; }

/* Filtrul care se aplică singur: butonul dispare, iar în timpul cererii
   coloana se stinge puțin, ca omul să vadă că i s-a auzit apăsarea. */
.filtru--lucreaza { opacity: .55; pointer-events: none; transition: opacity .12s ease; }

/* Grupul de filtru strâns după alegere.
   Rândul închis poartă ce s-a ales, ca omul să nu piardă firul; săgeata îl
   deschide la loc. Tot lucrul îl face `details`, fără JavaScript. */
.filtru__legenda {
	display: flex;
	align-items: baseline;
	gap: var(--sp-2);
	cursor: pointer;
	list-style: none;
	padding-block: var(--sp-1);
}

.filtru__legenda::-webkit-details-marker { display: none; }

.filtru__legenda::after {
	content: "";
	margin-inline-start: auto;
	width: .45rem;
	height: .45rem;
	border-right: 1.5px solid var(--text-stins);
	border-bottom: 1.5px solid var(--text-stins);
	transform: rotate(45deg) translateY(-.1rem);
	transition: transform .15s ease;
}

.filtru__grup[open] > .filtru__legenda::after {
	transform: rotate(-135deg) translateY(-.05rem);
}

/* Ce s-a ales, scris pe rândul închis — cu litere obișnuite, ca să se
   deosebească de numele grupului. */
.filtru__ales {
	font-weight: 500;
	font-size: var(--t-mic);
	text-transform: none;
	letter-spacing: 0;
	color: var(--verde-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 9rem;
}

/* Lista lungă nu împinge restul filtrului afară din ecran. */
.filtru__optiuni {
	max-height: 17rem;
	overflow-y: auto;
	padding-block-start: var(--sp-1);
	scrollbar-width: thin;
}

/* Poza de rezervă: se pune singură când adresa din CDN nu răspunde — vezi
   `gm_la_poza_lipsa()`. Nu umple cadrul ca o fotografie, ci stă la mijloc,
   așezată pe fundalul blând, ca să se citească drept „lipsește", nu drept
   „acesta e produsul". */
.produs__imagine--rezerva {
	object-fit: contain;
	padding: 8%;
	background: var(--fundal-blanda);
}