/*
 * Stilul magazinului.
 *
 * Se incarca numai pe paginile WooCommerce, prin inc/assets.php. Pe un articol
 * de blog sau pe pagina de contact nu are ce cauta.
 */

/*
 * Pictogramele cardului, desenate ca masca, nu ca imagine de fundal: asa iau
 * culoarea textului si se schimba odata cu starea butonului.
 */
:root {
	--bx-bifa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--bx-cos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2.2l2.2 10.4h9.8l2-7.4H6.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.5' cy='19' r='1.7' fill='%23000'/%3E%3Ccircle cx='17' cy='19' r='1.7' fill='%23000'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------
   Cardul de produs din grila

   Refacut pe 19 octombrie 2026 dupa captura din
   referinte/card-produs-referinta.png: imagine patrata incadrata, titlu pe
   trei randuri, pret mare rosu cu zecimalele ridicate, evaluarea, starea
   stocului, iar pe ultimul rand butonul de favorite si cel de adaugare in
   cos, cu degrade de la rosu la albastru.

   Culorile vin din paleta temei. Capetele degradeului sunt nuantele apasate,
   nu cele obisnuite: rosul viu si albastrul deschis dau sub 4,5:1 cu text
   alb, deci nu au ce cauta sub un text.
   ------------------------------------------------------------- */

/*
 * Numarul de coloane se hotaraste dupa latimea coloanei de produse, nu dupa
 * cea a ferestrei: pe arhiva, bara de categorii ia 230 de pixeli, deci o
 * fereastra de 1024 lasa produselor 719 si patru coloane devin prea inguste.
 * Interogarea de container masoara exact ce trebuie.
 *
 * WooCommerce randeaza grila ca flex, cu latimi procentuale pe fiecare card.
 * Trecerea pe grid cere si anularea acelor latimi, altfel cardurile raman
 * stranse in sfertul lor de rand.
 */
.wp-block-woocommerce-product-collection {
	container-type: inline-size;
}

/*
 * Selectoarele poarta si clasa `is-flex-container`, plus containerul in fata:
 * WooCommerce isi scrie propriul `display:flex` pe doua clase, iar o regula cu
 * o singura clasa pierde in fata lui si grila nu se aplica deloc. S-a
 * intamplat exact asa pe 19 octombrie: cardurile pareau asezate corect pe
 * ecran lat, dar era tot flexul lui WooCommerce cu `columns-4` fix.
 */
.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

/*
 * Tema nu are `border-box` nicaieri, deci padingul si conturul cardului se
 * adunau peste latimea celulei si cardul iesea din ea. Se repara aici, pe
 * subarborele grilei, nu global: o schimbare de `box-sizing` pe tot site-ul
 * ar atinge si paginile ramase in Elementor, pe un site viu.
 */
.wp-block-woocommerce-product-collection,
.wp-block-woocommerce-product-collection *,
.wp-block-woocommerce-product-collection *::before,
.wp-block-woocommerce-product-collection *::after {
	box-sizing: border-box;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container > li,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container > .wc-block-product {
	/*
	 * `!important` aici nu e lene, e singura cale. WooCommerce isi scrie
	 * latimile pe un selector cu patru clase, repetand una ca sa urce
	 * specificitatea:
	 *
	 *   @media (min-width: 600px) {
	 *     .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li
	 *       { width: calc(25% - 0.9375em) }
	 *   }
	 *
	 * Pe grila, acel 25% se socoteste din celula, nu din rand, deci cardul
	 * iesea la 48 de pixeli, cu titlul pe cate o litera pe rand. Numarul de
	 * clase al lui se schimba cu `columns-N`, deci nu are rost sa fie urmarit
	 * cu un selector si mai lung.
	 *
	 * Cu `border-box` de mai sus, 100% inseamna exact celula.
	 */
	width: 100% !important;
	min-width: 0;
	max-width: none !important;
	flex: none !important;
	margin: 0;
}

@container (min-width: 560px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container,
	.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 900px) {
	.wp-block-woocommerce-product-collection .wc-block-product-template.is-flex-container,
	.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Pe telefon coloanele se aseaza una sub alta, iar bara de categorii ajunge
 * prima: peste trei mii de pixeli de derulat pana la primul produs, fiindca
 * magazinul are in jur de o suta de categorii. Produsele trec inaintea ei.
 */
.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}

/*
 * La trecerea cu cursorul se intuneca numai conturul imaginii. Cardul nu
 * se ridica si nu primeste umbra: pe gramatica Peak Design cardurile se
 * despart prin spatiu alb, iar o umbra la hover ar fi singura din pagina.
 */
.wp-block-woocommerce-product-template .wc-block-product:hover .wc-block-components-product-image img {
	border-color: var(--wp--preset--color--text-secundar);
}

/* ---------- imaginea ---------- */

.wp-block-woocommerce-product-template .wc-block-components-product-image {
	margin: 0;
	position: relative;
}

.wp-block-woocommerce-product-template .wc-block-components-product-image img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--mica);
	transition: border-color var(--wp--custom--tranzitie);
}

.wp-block-woocommerce-product-template .wc-block-components-product-sale-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 1;
}

/*
 * Titlul ocupa trei randuri fixe, ca in referinta. Denumirile din feed au
 * lungimi foarte diferite, iar fara inaltime fixa preturile si butoanele de
 * pe acelasi rand nu se mai aliniaza intre ele.
 */
.wp-block-woocommerce-product-template .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.05em;
	line-height: 1.35;
	font-weight: 700;
	margin: 0;
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
	color: var(--wp--preset--color--negru);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- pretul ---------- */

/*
 * Pretul sta lipit de randul de butoane, nu de titlu: cardurile de pe acelasi
 * rand au inaltimi diferite, iar marginea automata le aliniaza la baza.
 */
.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price {
	margin-top: auto;
	margin-bottom: 0;
	line-height: 1.1;
}

/*
 * Rosul pretului e cel apasat, nu cel viu. Intregul e text mare si ar trece si
 * cu rosul viu, dar zecimalele ridicate ajung la 16 pixeli, deci sunt text
 * obisnuit: alb... mai exact #fe2d34 pe alb da 3,72:1, sub pragul de 4,5:1.
 * #d42d2d da 4,99:1 si tine toata suma pe aceeasi culoare.
 */
.wp-block-woocommerce-product-template .wc-block-components-product-price,
.wp-block-woocommerce-product-template .woocommerce-Price-amount {
	color: var(--wp--preset--color--rosu-apasat);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/*
 * Zecimalele se ridica si se micsoreaza, moneda ramane putin sub dimensiunea
 * intregului. Markupul vine din inc/woocommerce.php; in cos si la finalizare
 * regula de mai jos nu se aplica, deci pretul se scrie acolo obisnuit.
 */
.wp-block-woocommerce-product-template .bx-pret__zecimale {
	font-size: 0.62em;
	vertical-align: 0.5em;
	letter-spacing: -0.01em;
}

.wp-block-woocommerce-product-template .woocommerce-Price-currencySymbol {
	font-size: 0.78em;
	font-weight: 700;
}

/*
 * "(TVA inclus)" nu apare in card: scris langa un pret de 2 rem, rupe randul
 * si trage ochiul de la suma. Ramane pe pagina de produs, unde cumparatorul
 * citeste conditiile, si in cos.
 */
.wp-block-woocommerce-product-template .woocommerce-price-suffix {
	display: none;
}

/* Pretul taiat al unei reduceri ramane sters, ca sa nu concureze cu cel viu. */
.wp-block-woocommerce-product-template del .woocommerce-Price-amount {
	color: var(--wp--preset--color--text-stins);
	font-weight: 600;
	font-size: 0.62em;
}

/* ---------- evaluarea ---------- */

/*
 * Blocul nu randeaza nimic la un produs fara recenzii, iar catalogul adus din
 * feed nu are niciuna. Randul apare singur la prima recenzie reala; stele
 * desenate fara recenzii in spate ar fi o afirmatie falsa.
 */
.wp-block-woocommerce-product-template .wc-block-components-product-rating {
	margin: 0;
	line-height: 1;
}

.wp-block-woocommerce-product-template .wc-block-components-product-rating__stars::before,
.wp-block-woocommerce-product-template .wc-block-components-product-rating__stars span::before {
	color: var(--wp--preset--color--galben);
}

/* ---------- starea stocului ---------- */

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-stock-indicator {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--text-stins);
}

.wp-block-woocommerce-product-template .wc-block-components-product-stock-indicator--in-stock {
	color: var(--wp--preset--color--verde);
}

.wp-block-woocommerce-product-template .wc-block-components-product-stock-indicator--in-stock::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--bx-bifa) center / contain no-repeat;
	mask: var(--bx-bifa) center / contain no-repeat;
}

.wp-block-woocommerce-product-template .wc-block-components-product-stock-indicator--out-of-stock,
.wp-block-woocommerce-product-template .wc-block-components-product-stock-indicator--low-stock {
	color: var(--wp--preset--color--rosu-apasat);
}

/* ---------- ultimul rand: favorite si adaugare in cos ---------- */

.bx-card__actiuni {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	margin-top: 0.15rem;
}

.bx-card__actiuni .wp-block-woocommerce-product-button {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

/*
 * Corpul butonului: numai albastrul, fiindca el poarta eticheta. Rosul nu mai
 * trece prin el, deci nu mai exista banda violeta de la mijlocul amestecului.
 * Umplutura din stanga face loc pastilei; pe butonul fara pastila (favorite)
 * se pune la loc mai jos.
 */
.bx-card__actiuni .wp-block-button__link,
.bx-card__actiuni .wc-block-components-product-button__button {
	position: relative;
	width: 100%;
	gap: 0.45rem;
	padding: 0.6rem 0.75rem;
	font-size: var(--wp--preset--font-size--normal);
	font-weight: 700;
	background-image: var(--wp--preset--gradient--buton-cumpara);
	background-color: var(--wp--preset--color--albastru);
	color: var(--wp--preset--color--alb);
	line-height: 1.25;
	text-align: center;
	overflow: hidden; /* taie coltul curbat al pastilei la raza butonului */
}

/*
 * Pastila de cos: suprafata rosie din stanga, cu coltul din dreapta curbat.
 * Structura e luata din referinta atelierulfamiliei.ro, masurata pe CSS-ul ei
 * randat: acolo butonul nu e un degrade rosu-albastru sub eticheta, ci doua
 * suprafete cu roluri diferite.
 *
 * De ce conteaza, dincolo de estetica: pastila poarta NUMAI pictograma, deci e
 * componenta non-text, cu prag 3:1 (WCAG 2.2, criteriul 1.4.11). Asa rosul
 * cerut de client, #fe2d34 la 3,72:1, e conform exact asa cum a fost cerut.
 * Sub eticheta ar fi fost sub prag.
 *
 * Numai pe butonul care chiar adauga in cos: pe pagina de favorite butonul
 * duce la produs, iar un cos desenat acolo ar promite altceva decat face.
 */
.bx-card__actiuni .wc-block-components-product-button__button {
	padding-left: 3.5rem; /* pastila, plus respiratia dintre ea si eticheta */
}

.bx-card__actiuni .wc-block-components-product-button__button::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2.9rem;
	background-image: var(--wp--preset--gradient--pastila-cos);
	background-color: var(--wp--preset--color--rosu-inchis);
	border-start-end-radius: 37% 100%;
	border-end-end-radius: 37% 100%;
	pointer-events: none;
}

/*
 * Pictograma, centrata peste pastila. Ramane masca, nu imagine de fundal, ca sa
 * fie alba: SVG-ul din --bx-cos are traseul negru si ar aparea negru pe rosu.
 */
.bx-card__actiuni .wc-block-components-product-button__button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.45rem; /* jumatatea pastilei */
	width: 1.15rem;
	height: 1.15rem;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--alb);
	-webkit-mask: var(--bx-cos) center / contain no-repeat;
	mask: var(--bx-cos) center / contain no-repeat;
	pointer-events: none;
}

/*
 * Pe card ingust pastila se strange, dar NU dispare: e elementul care face
 * butonul recognoscibil. Eticheta ramane lizibila fiindca umplutura scade cu ea.
 */
@container (max-width: 420px) {
	.bx-card__actiuni .wc-block-components-product-button__button {
		padding-left: 2.5rem;
	}

	.bx-card__actiuni .wc-block-components-product-button__button::before {
		width: 2rem;
	}

	.bx-card__actiuni .wc-block-components-product-button__button::after {
		left: 1rem;
		width: 0.9rem;
		height: 0.9rem;
	}
}

/*
 * Butonul de favorite. Patrat, alb, cu contur. Conturul subtire e decorativ:
 * ce identifica butonul e inima, desenata in culoarea textului, deci peste
 * pragul de 3:1 cerut de WCAG pentru componente.
 */
.bx-favorit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	cursor: pointer;
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--text-secundar);
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--mica);
	transition: color var(--wp--custom--tranzitie), border-color var(--wp--custom--tranzitie), background-color var(--wp--custom--tranzitie);
}

.bx-favorit:hover {
	border-color: var(--wp--preset--color--rosu-apasat);
	color: var(--wp--preset--color--rosu-apasat);
}

.bx-favorit:focus-visible {
	outline: 2px solid var(--wp--preset--color--albastru-apasat);
	outline-offset: 2px;
}

/* Starea salvata: inima plina, nu doar alta culoare. */
.bx-favorit[aria-pressed="true"] {
	color: var(--wp--preset--color--rosu-apasat);
	border-color: var(--wp--preset--color--rosu-apasat);
	background: #fdf2f2;
}

.bx-favorit[aria-pressed="true"] svg path {
	fill: currentColor;
}

/*
 * Pe telefon grila trece pe doua coloane, iar butonul lat ramane lat: textul
 * "Adauga in cos" se taie cu puncte de suspensie inainte sa rupa randul.
 */
@media (max-width: 480px) {
	.wp-block-woocommerce-product-template .wc-block-product {
		padding: 0.6rem;
	}

	/*
	 * Umplutura se scrie pe laturi, nu dintr-o bucata: forma scurta
	 * stergea si locul pastilei, de 2,1 rem, iar pictograma ajungea peste
	 * primele litere ale etichetei. Masurat pe 20 octombrie 2026, la 375
	 * de pixeli: umplutura din stanga ieseea 8 pixeli, pastila 33,6.
	 */
	.bx-card__actiuni .wp-block-button__link {
		padding: 0.5rem 0.4rem;
		font-size: var(--wp--preset--font-size--mic);
	}

	.bx-card__actiuni .wc-block-components-product-button__button {
		padding-top: 0.5rem;
		padding-right: 0.4rem;
		padding-bottom: 0.5rem;
		/*
		 * 2,15 rem, nu 2,5: cei 6 pixeli s-au dus la inima de favorite, ca sa
		 * ajunga la masura de 44 ceruta de Radu. Pictograma e lata de 2,1 rem,
		 * deci eticheta incepe imediat dupa ea. Verificat pe randare pe 21
		 * octombrie 2026: pictograma nu atinge primele litere.
		 */
		padding-left: 2.15rem;
		font-size: var(--wp--preset--font-size--mic);
		line-height: 1.15;
	}

	/*
	 * Inima rimane de 44 pe 44 si pe grila de doua coloane. Pana pe 21
	 * octombrie 2026 era strinsa la 2,4 rem (38,4 px).
	 *
	 * De ce nu s-a rezolvat cu un pseudo-element care doar intinde suprafata
	 * de apasat, fara sa atinga desenul: cardul de produs are peste el
	 * legatura care ii acopera toata suprafata, iar ea sta deasupra, deci
	 * apasarea in afara casetei butonului ajunge la legatura cardului.
	 * Masurat pe pagina vie: la 2 pixeli in afara, `aria-pressed` nu se
	 * schimba. Suprafata trebuie sa fie chiar a butonului.
	 */
	.bx-favorit {
		width: 2.75rem;
		min-height: 2.75rem;
	}
}

/* -------------------------------------------------------------
   Pagina de produs
   ------------------------------------------------------------- */

.wp-block-woocommerce-product-image-gallery img {
	border-radius: var(--wp--custom--raza--normala);
	border: 1px solid var(--wp--preset--color--linie);
	background: var(--wp--preset--color--alb);
}

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0;
}

/*
 * Randul cu cantitatea minima de comanda, scris de pluginul de sincronizare
 * prin carligul "woocommerce_before_add_to_cart_quantity". Formularul e o
 * cutie flexibila, deci randul cere o linie intreaga a lui: fara asta s-ar
 * aseza alaturi de casuta de cantitate si ar impinge butonul.
 *
 * Nu e avertisment, deci nu e rosu: e o conditie de vanzare, la fel ca pretul.
 */
.woocommerce div.product form.cart .bpc-cant-minima {
	flex: 1 1 100%;
	margin: 0;
	padding: 0.6rem 0.8rem;
	background: var(--wp--preset--color--fundal-bland);
	border-left: 3px solid var(--wp--preset--color--text);
	border-radius: var(--wp--custom--raza--mica);
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

.woocommerce div.product form.cart .bpc-cant-minima .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.woocommerce div.product form.cart .quantity input[type="number"] {
	width: 5.5rem;
	padding: 0.7rem 0.5rem;
	text-align: center;
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--mica);
	font-variant-numeric: tabular-nums;
}

/*
 * Butonul de pe pagina produsului primeste acelasi tratament ca cel din card:
 * pastila rosie cu pictograma, corp albastru cu eticheta. Inainte era albastru
 * simplu, cu motivul ca rosul e rezervat pasului de finalizare; motivul a cazut
 * cand butonul din card a devenit rosu-albastru, fiindca doua forme pentru
 * aceeasi actiune pe doua ecrane invecinate se citesc ca doua actiuni.
 *
 * Aceeasi impartire a contrastului: pastila poarta numai pictograma, deci intra
 * sub pragul de 3:1 al componentelor non-text, iar eticheta alba sta pe corpul
 * albastru, peste 4,5:1.
 */
.woocommerce div.product form.cart .single_add_to_cart_button {
	position: relative;
	flex: 1 1 14rem;
	padding-left: 3.5rem;
	background-image: var(--wp--preset--gradient--buton-cumpara);
	background-color: var(--wp--preset--color--albastru);
	color: var(--wp--preset--color--alb);
	overflow: hidden;
}

.woocommerce div.product form.cart .single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2.9rem;
	background-image: var(--wp--preset--gradient--pastila-cos);
	background-color: var(--wp--preset--color--rosu-inchis);
	border-start-end-radius: 37% 100%;
	border-end-end-radius: 37% 100%;
	pointer-events: none;
}

.woocommerce div.product form.cart .single_add_to_cart_button::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.45rem;
	width: 1.15rem;
	height: 1.15rem;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--alb);
	-webkit-mask: var(--bx-cos) center / contain no-repeat;
	mask: var(--bx-cos) center / contain no-repeat;
	pointer-events: none;
}

.woocommerce .product_meta {
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-stins);
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.wp-block-woocommerce-product-stock-indicator {
	font-weight: 600;
}

/* -------------------------------------------------------------
   Filtre
   ------------------------------------------------------------- */

.wp-block-woocommerce-filter-wrapper {
	padding-top: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.wc-block-product-categories-list {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--mic);
}

.wc-block-product-categories-list li {
	margin: 0 0 0.3rem;
}

.wc-block-product-categories-list a {
	text-decoration: none;
	color: var(--wp--preset--color--text-secundar);
}

.wc-block-product-categories-list a:hover {
	color: var(--wp--preset--color--negru);
	text-decoration: underline;
}

.wc-block-product-categories-list-item-count {
	color: var(--wp--preset--color--text-stins);
}

/* -------------------------------------------------------------
   Cos si finalizare
   ------------------------------------------------------------- */

.wc-block-cart,
.wc-block-checkout {
	--wp--preset--color--background: var(--wp--preset--color--alb);
}

.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount {
	font-variant-numeric: tabular-nums;
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	width: 100%;
	padding: 0.9rem 1.5rem;
	font-size: var(--wp--preset--font-size--mediu);
	border-radius: var(--wp--custom--raza--mica);
}

/*
 * Tabelul cosului pe telefon. De la trei coloane in sus un tabel nu incape pe
 * un ecran de 360 de pixeli, iar derularea orizontala ascunde tocmai coloana
 * cu pretul.
 */
@media (max-width: 600px) {
	.woocommerce table.shop_table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.woocommerce table.shop_table tr {
		display: block;
		border: 1px solid var(--wp--preset--color--linie);
		border-radius: var(--wp--custom--raza--normala);
		padding: var(--wp--preset--spacing--20);
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: 0.35rem 0;
	}

	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--wp--preset--color--text-secundar);
	}
}

/* -------------------------------------------------------------
   Mesajele magazinului
   ------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: var(--wp--custom--raza--normala);
	border-left-width: 4px;
	border-left-style: solid;
}

.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-left-color: var(--wp--preset--color--verde);
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--rosu-apasat);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-left-color: var(--wp--preset--color--albastru);
}

/* -------------------------------------------------------------
   Pagina de favorite

   Aceleasi carduri ca in grila, fara butonul de adaugare in cos:
   de acolo se merge la produs, unde se alege cantitatea.
   ------------------------------------------------------------- */

.bx-favorite__grila {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: var(--wp--custom--grila--produse);
	gap: var(--wp--preset--spacing--30);
}

.bx-favorite__produs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--raza--normala);
}

.bx-favorite__imagine img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--raza--mica);
}

.bx-favorite__produs .wp-block-post-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.05em;
	margin: 0;
	font-size: var(--wp--preset--font-size--mic);
	line-height: 1.35;
	font-weight: 700;
}

.bx-favorite__produs .wp-block-post-title a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bx-favorite__produs .wc-block-components-product-price {
	margin: auto 0 0;
	color: var(--wp--preset--color--rosu-apasat);
	font-size: var(--wp--preset--font-size--mare);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.bx-favorite__produs .bx-pret__zecimale {
	font-size: 0.62em;
	vertical-align: 0.5em;
}

.bx-favorite__produs .woocommerce-Price-currencySymbol {
	font-size: 0.78em;
	font-weight: 700;
}

.bx-favorite__produs .wp-block-button__link {
	flex: 1 1 auto;
	padding: 0.6rem 0.75rem;
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 700;
	text-align: center;
}

.bx-favorite__gol {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--fundal-bland);
	border-radius: var(--wp--custom--raza--normala);
	color: var(--wp--preset--color--text-secundar);
}

/* =============================================================
   Executia machetei Peak Design, 20 octombrie 2026
   Numai partea de magazin. Bara, navigatia, pastilele, dalele si
   subsolul sunt in style.css, fiindca se vad pe tot site-ul.
   ============================================================= */

/* -------------------------------------------------------------
   Butonul de cumparare: raza si inelul de focalizare

   Raza lui e 8 pixeli, nu 4 ca la butoanele de pagina: el si
   imaginea de deasupra sunt o pereche, iar imaginea are 8.
   ------------------------------------------------------------- */

.bx-card__actiuni .wp-block-button__link,
.bx-card__actiuni .wc-block-components-product-button__button,
.woocommerce div.product form.cart .single_add_to_cart_button {
	border-radius: var(--wp--custom--raza--mica);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	min-height: 56px;
	padding-left: 4rem;
	font-size: var(--wp--preset--font-size--normal);
}

.woocommerce div.product form.cart .single_add_to_cart_button::before {
	width: 3.4rem;
}

.woocommerce div.product form.cart .single_add_to_cart_button::after {
	left: 1.7rem;
	width: 1.3rem;
	height: 1.3rem;
}

/*
 * Inelul de focalizare al butonului de cumparare e alb si desenat in
 * interiorul lui. Cel implicit al temei e aproape negru, iar pe corpul
 * albastru nu se distingea. Alb pe albastrul apasat trece pragul de 3:1
 * cerut componentelor non-text.
 */
.bx-card__actiuni .wc-block-components-product-button__button:focus-visible,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--wp--preset--color--alb);
	outline-offset: -4px;
}

/* -------------------------------------------------------------
   Capul magazinului si panoul de filtrare
   Pastilele de sub navigatie din macheta sunt filtrele active, iar
   panoul deschis de sub ele e randul de facete.
   ------------------------------------------------------------- */

.bx-filtre__rand {
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--20);
}

.bx-filtre__rand > * {
	margin: 0;
}

.bx-sortare select,
.woocommerce .woocommerce-ordering select {
	height: 40px;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--buton);
	background: var(--wp--preset--color--alb);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text);
}

/* Filtrele active, desenate ca pastile care se pot scoate. */
.bx-filtre__active .wc-block-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bx-filtre__active .wc-block-active-filters__list-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 40px;
	margin: 0;
	padding: 0 1rem 0 1.125rem;
	background: var(--wp--preset--color--text);
	border-radius: var(--wp--custom--raza--rotund);
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 600;
	color: var(--wp--preset--color--alb);
}

.bx-filtre__active .wc-block-active-filters__list-item-name,
.bx-filtre__active .wc-block-active-filters__list-item-type {
	color: inherit;
}

.bx-filtre__active .wc-block-active-filters__list-item-remove {
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.bx-filtre__active .wc-block-active-filters__clear-all {
	color: var(--wp--preset--color--text-secundar);
	font-weight: 600;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------------
   Panoul de filtrare, varianta inalta
   Pina pe 21 octombrie 2026 era un dreptunghi gri cu trei liste
   de legaturi albastre, fara stare, fara ierarhie si fara nimic
   care sa arate ca se poate apasa. Radu l-a cerut premium.

   Ce s-a schimbat, si de ce:
   - suprafata trece de pe gri plat pe alb cu fir de hasura si
     doua adincituri radiale, acelasi material ca subsolul si ca
     banda paginilor redactionale, deci magazinul si paginile
     vorbesc aceeasi limba;
   - fiecare coloana isi poarta semnul si culoarea ei, deci cele
     trei liste nu mai arata ca una taiata in trei;
   - randurile de categorie devin pastile cu numarul de produse
     intr-o insigna proprie: tinta de apasat e tot randul, nu
     doar textul legaturii;
   - marcile si pragurile de pret devin jetoane, fiindca sint
     valori scurte si se citesc mai bine una linga alta decit
     una sub alta.
   ------------------------------------------------------------- */

.bx-filtre__panou {
	position: relative;
	gap: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--linie, #e0e0e0);
	border-radius: 16px;
	background-color: #fff;
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(31, 111, 208, 0.035) 0,
			rgba(31, 111, 208, 0.035) 2px,
			rgba(31, 111, 208, 0) 2px,
			rgba(31, 111, 208, 0) 7px
		),
		radial-gradient(760px 360px at 97% -40%, rgba(31, 111, 208, 0.13), rgba(31, 111, 208, 0) 62%),
		radial-gradient(520px 300px at -4% 130%, rgba(254, 45, 52, 0.07), rgba(254, 45, 52, 0) 60%);
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 58, 112, 0.07);
	/*
	 * Coloanele nu mai sint egale. Categoriile sint pina la douasprezece rinduri,
	 * marcile zece jetoane si preturile cinci, deci la latimi egale panoul se
	 * inalta dupa prima coloana si celelalte doua ramin cu doua treimi de suprafata
	 * goala, hasurata. Masurat pe „Articole de birou" pe 21 octombrie 2026.
	 * Categoriile primesc mai multa latime si curg pe doua coloane inauntru, deci
	 * se injumatatesc ca inaltime; preturile, care sint cele mai scurte, primesc
	 * cel mai putin.
	 */
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
	overflow: hidden;
}

/* Firul de accent de pe muchia de sus, ca la banda redactionala. */
.bx-filtre__panou::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--albastru, #1f6fd0) 0%, #4a60c1 55%, var(--wp--preset--color--rosu, #fe2d34) 100%);
}

/* Coloanele: despartite de un fir, nu de gol. */
.bx-filtre__panou > .wp-block-group {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--linie, #e0e0e0);
}

.bx-filtre__panou > .wp-block-group:first-child {
	border-left: 0;
}

/*
 * Regula generala de pe filtre pune o linie deasupra fiecaruia,
 * fiindca stateau unul sub altul in coloana din stinga. In panou
 * stau unul linga altul, deci linia ar taia pe verticala.
 */
.bx-filtre__panou .wp-block-woocommerce-filter-wrapper {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Capul coloanei: eticheta mica, cu semnul ei colorat inainte. */
.bx-filtru__titlu {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 700;
	color: var(--wp--preset--color--text-stins, #606562);
}

.bx-filtru__titlu::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--wp--preset--color--albastru, #1f6fd0);
	transform: rotate(45deg);
	flex: none;
}

.bx-filtre__panou > .wp-block-group:nth-child(2) .bx-filtru__titlu::before {
	background: #4a60c1;
}

.bx-filtre__panou > .wp-block-group:nth-child(3) .bx-filtru__titlu::before {
	background: var(--wp--preset--color--rosu-inchis, #cf3f50);
}

.bx-filtru__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--mic);
}

.bx-filtru__lista a {
	text-decoration: none;
	color: var(--wp--preset--color--text, #1a211e);
}

/* ---- Categoriile: rinduri-pastila, cu insigna de numar ---- */

.bx-filtru__lista--categorii {
	display: block;
	columns: 2;
	column-gap: var(--wp--preset--spacing--30);
}

.bx-filtru__lista--categorii > li {
	break-inside: avoid;
}

.bx-filtru__lista--categorii > li {
	margin: 0 0 2px;
}

.bx-filtru__lista--categorii a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0.6rem;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1.35;
	transition:
		background-color var(--wp--custom--tranzitie, 160ms ease),
		color var(--wp--custom--tranzitie, 160ms ease),
		transform var(--wp--custom--tranzitie, 160ms ease);
}

.bx-filtru__lista--categorii a:hover {
	background: rgba(31, 111, 208, 0.08);
	color: var(--wp--preset--color--albastru-apasat, #1a5cad);
	transform: translateX(2px);
	text-decoration: none;
}

.bx-filtru__lista--categorii .bx-filtru__text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bx-filtru__numar {
	flex: none;
	min-width: 2.25rem;
	padding: 0.1rem 0.45rem;
	border-radius: var(--wp--custom--raza--rotund, 999px);
	background: var(--wp--preset--color--fundal-bland, #eef1f0);
	font-size: 0.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--wp--preset--color--text-stins, #606562);
	transition:
		background-color var(--wp--custom--tranzitie, 160ms ease),
		color var(--wp--custom--tranzitie, 160ms ease);
}

.bx-filtru__lista--categorii a:hover .bx-filtru__numar {
	background: var(--wp--preset--color--albastru, #1f6fd0);
	color: #fff;
}

/* ---- Marcile si pragurile de pret: jetoane ---- */

.bx-filtru__lista--marci,
.bx-filtru__lista--pret {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.bx-filtru__lista--marci > li,
.bx-filtru__lista--pret > li {
	margin: 0;
}

.bx-filtru__lista--marci a,
.bx-filtru__lista--pret a {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--linie-tare, #cccfcd);
	border-radius: var(--wp--custom--raza--rotund, 999px);
	background: #fff;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	transition:
		border-color var(--wp--custom--tranzitie, 160ms ease),
		background-color var(--wp--custom--tranzitie, 160ms ease),
		color var(--wp--custom--tranzitie, 160ms ease),
		box-shadow var(--wp--custom--tranzitie, 160ms ease);
}

.bx-filtru__lista--marci a:hover,
.bx-filtru__lista--pret a:hover {
	border-color: var(--wp--preset--color--albastru, #1f6fd0);
	background: rgba(31, 111, 208, 0.07);
	color: var(--wp--preset--color--albastru-apasat, #1a5cad);
	box-shadow: 0 2px 8px rgba(31, 111, 208, 0.14);
	text-decoration: none;
}

.bx-filtru__lista a:focus-visible {
	outline: 2px solid var(--wp--preset--color--albastru, #1f6fd0);
	outline-offset: 2px;
}

.bx-filtre__panou .wc-block-checkbox-list {
	font-size: var(--wp--preset--font-size--mic);
}

.bx-filtre__panou .wc-block-components-price-slider__range-input-progress,
.bx-filtre__panou .wc-block-components-price-slider__range-input::-webkit-slider-thumb {
	--range-color: var(--wp--preset--color--albastru, #1f6fd0);
}

@media (max-width: 1100px) {
	.bx-filtru__lista--categorii {
		columns: 1;
	}
}

@media (max-width: 900px) {
	.bx-filtre__panou {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bx-filtru__lista--categorii {
		columns: 2;
	}

	/* La doua coloane, a treia trece pe rindul doi, deci firul se muta. */
	.bx-filtre__panou > .wp-block-group:nth-child(3) {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--linie, #e0e0e0);
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.bx-filtre__panou {
		grid-template-columns: 1fr;
	}

	.bx-filtru__lista--categorii {
		columns: 1;
	}

	.bx-filtre__panou > .wp-block-group {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--linie, #e0e0e0);
	}

	.bx-filtre__panou > .wp-block-group:first-child {
		border-top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bx-filtru__lista a {
		transition: none;
	}

	.bx-filtru__lista--categorii a:hover {
		transform: none;
	}
}

/* -------------------------------------------------------------
   Pagina de produs: marca, banii, faptele
   ------------------------------------------------------------- */

.bx-produs-cap {
	gap: var(--wp--preset--spacing--50);
}

.bx-marca {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--text-stins);
}

.bx-marca a {
	color: inherit;
	text-decoration: none;
}

.bx-marca a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bx-produs-cap .wp-block-post-title {
	margin: 0;
}

.bx-produs__bani {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30) 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.bx-produs__bani > * {
	margin: 0;
}

/*
 * Pretul de pe pagina produsului poarta acelasi tratament ca pe card:
 * rosul apasat, zecimalele ridicate, cifrele pe aceeasi latime. Markupul
 * cu zecimalele separate vine din inc/woocommerce.php, deci exista si
 * aici, nu numai in grila.
 */
.bx-produs__bani .wc-block-components-product-price,
.bx-produs__bani .woocommerce-Price-amount {
	color: var(--wp--preset--color--rosu-apasat);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.bx-produs__bani .bx-pret__zecimale {
	font-size: 0.62em;
	vertical-align: 0.5em;
	letter-spacing: -0.01em;
}

.bx-produs__bani .woocommerce-Price-currencySymbol {
	font-size: 0.78em;
	font-weight: 700;
}

.bx-produs__bani .woocommerce-price-suffix {
	display: block;
	margin-top: 0.6rem;
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 400;
	color: var(--wp--preset--color--text-stins);
}

.bx-produs__bani .wp-block-woocommerce-product-stock-indicator {
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--normal);
}

/* -------------------------------------------------------------
   Faptele comerciale de sub produs

   Clasa e `bx-fapte-produs`, nu `bx-fapte`: aceeasi clasa era deja
   folosita pe prima pagina, cu alta macheta, iar pe prima pagina se
   incarca amindoua foile. Doua definitii ale aceleiasi clase in doua
   fisiere au dat exact ce dau de obicei: una a stricat-o pe cealalta,
   si s-a vazut intii pe pagina pe care nu o schimbasem.

   Pina pe 21 octombrie 2026 erau trei rinduri cu text intreg, fiecare
   despartit de o linie fir de par: trei fraze sub butonul de cumparare,
   care luau mai mult loc decit pretul. Radu le-a cerut discrete, pe un
   singur rind. Au ramas cifrele care conteaza, iar fraza intreaga sta pe
   pagina ei, la un clic: livrarea, returul si garantia au fiecare pagina
   proprie, deci textul nu se pierde, doar nu mai sta in drum.
   ------------------------------------------------------------- */

.bx-fapte-produs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 1.25rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--wp--preset--color--linie);
	list-style: none;
	font-size: var(--wp--preset--font-size--mic);
}

.bx-fapte-produs li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0.25rem 0;
}

/* Firul dintre fapte, pus pe element, nu pe lista: la trecerea pe doua
   rinduri un separator desenat cu `gap` ar ramine atirnat la capat. */
.bx-fapte-produs li + li {
	position: relative;
	padding-left: 1.25rem;
}

.bx-fapte-produs li + li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0.95rem;
	transform: translateY(-50%);
	background: var(--wp--preset--color--linie-tare);
}

.bx-fapte-produs a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--wp--preset--color--text-secundar);
	text-decoration: none;
	line-height: 1.3;
	transition: color var(--wp--custom--tranzitie);
}

.bx-fapte-produs a:hover {
	color: var(--wp--preset--color--albastru-apasat);
}

.bx-fapte-produs a:focus-visible {
	outline: 2px solid var(--wp--preset--color--albastru);
	outline-offset: 3px;
	border-radius: 4px;
}

.bx-fapte-produs svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--text-stins);
}

.bx-fapte-produs a:hover svg {
	color: inherit;
}

.bx-fapte-produs strong {
	color: var(--wp--preset--color--text);
	font-weight: 600;
}

@media (max-width: 480px) {
	/* Pe telefon cele trei nu incap pe un rind; raman una sub alta, dar
	   tot scurte, fara firul vertical care ar atirna in gol. */
	.bx-fapte-produs {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.1rem;
	}

	.bx-fapte-produs li + li {
		padding-left: 0;
	}

	.bx-fapte-produs li + li::before {
		display: none;
	}
}

/* -------------------------------------------------------------
   Grila „Din aceeasi categorie"
   Aceleasi carduri ca in restul magazinului, patru pe rind.
   ------------------------------------------------------------- */

.bx-grila--inrudite {
	margin-top: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------
   Specificatiile
   Tin locul descrierii: feedul trimite "-" pe aproape tot catalogul.
   ------------------------------------------------------------- */

.bx-spec {
	margin-top: var(--wp--preset--spacing--60);
}

.bx-spec__titlu {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--titlu);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.bx-spec__corp {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

.bx-spec__tabel {
	flex: 999 1 32rem;
	min-width: 0;
	margin: 0;
}

.bx-spec__rand {
	display: grid;
	grid-template-columns: 12.5rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--20) 0;
	border-top: 1px solid var(--wp--preset--color--linie);
}

.bx-spec__rand--ultim {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.bx-spec__rand dt {
	margin: 0;
	color: var(--wp--preset--color--text-stins);
}

.bx-spec__rand dd {
	margin: 0;
	font-weight: 600;
}

.bx-spec__rand dd a {
	text-decoration: none;
}

.bx-spec__rand dd a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bx-spec__rand .bx-cod {
	font-family: var(--wp--preset--font-family--cifre);
	font-weight: 500;
}

.bx-spec__caseta {
	flex: 1 1 20rem;
	min-width: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--fundal-bland);
	border-radius: var(--wp--custom--raza--normala);
}

.bx-spec__caseta p {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-secundar);
}

.bx-spec__caseta-eticheta {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-stins);
}

.bx-spec__descriere {
	max-width: 52rem;
	margin-top: var(--wp--preset--spacing--50);
}

@media (max-width: 600px) {
	.bx-spec__rand {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* -------------------------------------------------------------
   Galeria produsului: acelasi fir de par ca imaginea din card
   ------------------------------------------------------------- */

.wp-block-woocommerce-product-image-gallery img {
	border-color: var(--wp--preset--color--linie-tare);
}

/* -------------------------------------------------------------
   Filtrul ales si pastilele de filtre active
   ------------------------------------------------------------- */

.bx-filtru__lista .bx-filtru__ales {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * De cind marcile si pragurile sint jetoane, filtrul ales se vede
 * ca jeton plin, nu ca text subliniat: pe un rind de zece jetoane
 * sublinierea se pierde, iar culoarea nu.
 */
.bx-filtru__lista--marci .bx-filtru__ales,
.bx-filtru__lista--pret .bx-filtru__ales {
	border-color: var(--wp--preset--color--albastru, #1f6fd0);
	background: var(--wp--preset--color--albastru, #1f6fd0);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(31, 111, 208, 0.26);
}

.bx-filtru__lista--marci .bx-filtru__ales:hover,
.bx-filtru__lista--pret .bx-filtru__ales:hover {
	background: var(--wp--preset--color--albastru-apasat, #1a5cad);
	border-color: var(--wp--preset--color--albastru-apasat, #1a5cad);
	color: #fff;
}

/*
 * Filtrul ales se arata si cu o bifa, nu numai cu text apasat: o
 * diferenta numai de greutate a literei e greu de prins cu ochiul
 * intr-o lista de zece rAnduri.
 */
.bx-filtru__lista .bx-filtru__ales::before {
	content: "";
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	margin-right: 0.4rem;
	vertical-align: -0.1rem;
	background: currentColor;
	-webkit-mask: var(--bx-bifa) center / contain no-repeat;
	mask: var(--bx-bifa) center / contain no-repeat;
}

.bx-filtru__sterge {
	align-self: center;
	margin-left: 0.25rem;
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 600;
	color: var(--wp--preset--color--text-secundar);
	text-underline-offset: 3px;
}

.bx-pastile--filtre {
	margin-top: 0;
}

/* Pastila de filtru activ poarta un "x", deci are nevoie de spatiu. */
.bx-pastile--filtre .bx-pastila {
	gap: 0.5rem;
	padding-right: 1rem;
}

/* -------------------------------------------------------------
   Reparatii de pe verificarea pe telefon, 21 octombrie 2026
   Masurat cu Playwright la 360, 390 si 768 de pixeli.
   ------------------------------------------------------------- */

/*
 * Cosul la 360 de pixeli: singurul loc din tot site-ul care avea derulare pe
 * orizontala. Masurat: `documentElement.scrollWidth` 364 fata de 360.
 *
 * Cauza nu era o latime scrisa de noi, ci latimea minima a tabelului
 * WooCommerce: celula cu poza cerea 80 de pixeli, cea cu numele 159 si cea cu
 * pretul 69, adica 308 plus umplutura, in timp ce coloana are 320. Tabelul
 * ieseea 24 de pixeli, din care 4 treceau dincolo de marginea ferestrei.
 *
 * Se strange poza, nu se taie numele produsului: la 56 de pixeli miniatura e
 * in continuare recunoscuta, iar numele si pretul ramin intregi. Pretul
 * primeste si voie sa rupa randul, ca o moneda mai lunga ("1.299,90 RON") sa
 * nu aduca problema inapoi.
 */
/*
 * Cosul la 360 de pixeli: singurul loc din tot site-ul care avea derulare pe
 * orizontala. `documentElement.scrollWidth` 364 fata de 360.
 *
 * Doua incercari greasite, lasate scrise ca sa nu se repete:
 *
 * 1. Strangerea celulei cu poza la 56 de pixeli nu a schimbat nimic.
 * 2. `table-layout: fixed` cu latimi pe celule a stricat mai rau, 377 in loc
 *    de 364.
 *
 * Amandoua plecau de la presupunerea ca randul e un rand de tabel. Nu e:
 * `tr.wc-block-cart-items__row` are de la WooCommerce `display: grid`, cu
 * piste scrise in pixeli, `80px 132px 11px 84px`, plus trei spatii de 16.
 * Adica 355 de pixeli ceruti intr-un rand de 316. Latimea celulelor si
 * `table-layout` nu au niciun cuvant acolo: pistele decid, iar ele erau
 * fixe. De aici si cele 39 de pixeli cu care celula pretului trecea dincolo
 * de tabel, in timp ce tabelul insusi arata cuminte 320.
 *
 * A treia incercare a rescris pistele si a mutat si pretul si numele pe
 * coloana 2. A ieșit mai rau: text peste text. WooCommerce da numelui
 * `grid-column: 2 / 4`, deci numele tine pistele 2 si 3 pe randul 1; pretul,
 * trimis tot in coloana 2 fara rand, a aterizat pe randul 1 peste nume.
 * Iar `grid-template-columns` scris de noi nici nu se aplica: regula
 * WooCommerce e `.is-mobile table.wc-block-cart-items .wc-block-cart-items__row`,
 * cu trei clase si un element, deci bate doua clase.
 *
 * Reparatia adevarata e cea mica. WooCommerce aseaza deja bine pe telefon:
 * miniatura pe pista 1, numele pe 2 si 3. Singurul lucru nelamurit era
 * pretul, lasat la plasare automata, care isi deschidea o a patra pista si
 * cu ea impingea randul peste fereastra. Deci pretul primeste exact
 * intinderea numelui, `2 / 4`, si coboara singur pe randul urmator, fiindcă
 * randul 1 e ocupat. Nicio pista noua, nicio suprapunere.
 */
@media (max-width: 480px) {
	.wp-block-woocommerce-cart table.wc-block-cart-items {
		width: 100%;
		max-width: 100%;
	}

	/*
	 * Pretul sub nume, aliniat la stanga cu el, nu pe o coloana a lui.
	 *
	 * Randul se scrie explicit, `grid-row: 2`. Numai cu coloana data, pretul
	 * ramanea tot pe randul 1, peste nume: cand un element are poziția de
	 * coloana hotarita, plasarea automata nu mai ocoleste ce e deja acolo,
	 * iar numele tine chiar pistele 2 si 3. Masurat pe pagina vie: aceeasi
	 * caseta, 118..338, acelasi y. Deci randul nu se lasa ghicit.
	 *
	 * Si selectorul trebuie sa fie lung. Cu doua clase, `grid-row` calculat
	 * ramanea 1: WooCommerce il scrie pe
	 * `.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total`,
	 * adica trei clase si un element, care bate doua clase. De aici forma de
	 * mai jos, cu invelisul blocului si cu tabelul in cale.
	 */
	.wp-block-woocommerce-cart table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total {
		grid-column: 2 / 4;
		grid-row: 2;
		justify-content: flex-start;
		padding-left: 0;
		text-align: left;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__total .wc-block-cart-item__total-price-and-sale-badge-wrapper {
		align-items: flex-start;
		text-align: left;
	}

	.wp-block-woocommerce-cart .wc-block-cart-item__product,
	.wp-block-woocommerce-cart .wc-block-components-product-price {
		overflow-wrap: anywhere;
	}
}


/* -------------------------------------------------------------
   Eticheta butonului de coș nu se mai rupe, 21 octombrie 2026
   Cerut de Radu: pe telefon, pe prima pagină, textul din
   butoanele de adăugare în coș „nu încape".

   Măsurat pe pagina vie, la 360 de pixeli: cardul are 144, rândul
   de acțiuni 110, iar inima ia 44 plus 6,4 de spațiu, deci
   butonului îi rămân 59,6. Eticheta de atunci cerea 137,4. Ce se
   vedea nu era text tăiat, ci text rupt: șapte rânduri de câteva
   litere, într-un buton înalt de 129 de pixeli.

   Două schimbări, fiecare pe cauza ei:

   1. Eticheta s-a scurtat la „În coș", în `inc/woocommerce.php`,
      unde e explicată aritmetica. Acolo e singurul loc care o
      hotărăște, pentru ambele feluri de card.
   2. Inima de favorite trece în colțul imaginii pe card îngust,
      iar butonul ia tot rândul. Fără asta, la 360 de pixeli
      butonul ar avea 59,6 pixeli pentru o etichetă de 81,4 cu
      pastilă, deci s-ar rupe din nou.

   `nowrap` e plasa de siguranță: dacă eticheta se lungește
   vreodată, butonul iese din card și se vede imediat, în loc să
   se umfle în înălțime și să pară o alegere de design.
   ------------------------------------------------------------- */

.bx-card__actiuni .wp-block-button__link,
.bx-card__actiuni .wc-block-components-product-button__button {
	white-space: nowrap;
	/*
	 * Inaltimea era tinuta pana acum de eticheta care se rupea in doua
	 * rinduri: 48 de pixeli la 430, 59 la 520. Cu eticheta pe un rand butonul
	 * a coborit la 32, adica sub masura de 44 cerută de Radu pe 21 octombrie
	 * 2026. Masura se scrie, deci, in loc sa fie un efect secundar al unui
	 * defect de asezare.
	 */
	min-height: 2.75rem;
}

@media (max-width: 600px) {
	/*
	 * Cardul devine reperul inimii. Eticheta de reducere nu se mută: ea se
	 * așază față de imagine, care e un reper mai apropiat, și stă în stânga.
	 */
	.bx-produs,
	.wp-block-woocommerce-product-template .wc-block-product {
		position: relative;
	}

	.bx-favorit {
		position: absolute;
		inset-block-start: 0.85rem;
		inset-inline-end: 0.85rem;
		z-index: 2;
		/*
		 * Fundalul rămâne opac: inima stă peste fotografia produsului, iar
		 * conturul subțire singur nu o desprinde de un fundal aglomerat.
		 */
		background: var(--wp--preset--color--alb);
	}

	/* Rândul rămâne cu un singur copil în flux, deci butonul ia tot. */
	.bx-card__actiuni .wp-block-woocommerce-product-button,
	.bx-card__actiuni .wp-block-button {
		flex: 1 1 100%;
		/*
		 * Învelișul e cutie flexibilă pe coloană, cu articolele centrate pe axa
		 * transversală, adică pe lățime. Atât `width: 100%` cât și
		 * `flex: 1 1 100%` puse pe buton mergeau, deci, pe înălțime, iar
		 * lățimea rămânea cea a textului. Se întinde de aici.
		 */
		align-items: stretch;
	}

	/*
	 * Pe raftul magazinului învelișul blocului e el însuși o cutie flexibilă
	 * centrată (`align-center`), iar butonul din el e articol flexibil cu
	 * `flex: 0 1 auto`, deci se strângea la lățimea textului: 81,4 pixeli
	 * într-un rând de 139,8, măsurat pe pagina vie. Eticheta încăpea în el cu
	 * 2,6 pixeli de rezervă, adică la limita la care o literă mai mult o
	 * rupe. Butonul cere lățimea rândului, ca pe cardul scris de temă.
	 */
	.bx-card__actiuni .wp-block-button__link,
	.bx-card__actiuni .wc-block-components-product-button__button {
		flex: 1 1 100%;
	}
}