/*
Theme Name: Bicopyx
Theme URI: https://bicopyx.ro/
Author: Emblematic.ro
Author URI: https://emblematic.ro/
Description: Tema realizata pentru Bicopyx, papetarie si servicii de print cu doua magazine in Floresti, judetul Cluj, si peste sase mii de produse pentru scoala, birou si creatie, livrate in toata tara. Design si dezvoltare: Emblematic.ro.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bicopyx
Tags: block-theme, full-site-editing, e-commerce, accessibility-ready, translation-ready
*/

/* -------------------------------------------------------------
   O regula despre ordinea paletei din theme.json

   Slugul "text" produce clasa .has-text-color, adica exact numele
   pe care WordPress il pune pe ORICE bloc cu o culoare de text
   aleasa de om. Cele doua reguli ies amandoua cu !important si cu
   aceeasi specificitate, deci decide ordinea din foaie.

   De aceea "text" sta PRIMUL in paleta: asa orice alta culoare,
   scrisa dupa el, il bate. Mutat inapoi mai jos, orice bloc cu
   textColor dinaintea lui in lista se randeaza cu culoarea de
   text obisnuita. Masurat pe 20 octombrie 2026 pe banda neagra
   din prima pagina: textul alb ieseea #1a211e pe #000, adica
   1,3:1, practic invizibil.

   Reparatia adevarata ar fi redenumirea slugului, dar el e
   folosit in theme.json, in doua foi de stil si in markupul
   sabloanelor, deci se face separat, nu intr-o trecere de design.
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   Baza
   ------------------------------------------------------------- */

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

/* Imaginile de produs au raport fix, altfel grila sare cat timp se incarca. */
.bx-produs__media img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input, select, textarea):focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--text);
	outline-offset: 2px;
	border-radius: var(--wp--custom--raza--buton);
}

/* Sari la continut: vizibil doar cand primeste focus de la tastatura. */
.bx-sari {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--alb);
	border-radius: 0 0 var(--wp--custom--raza--mica) 0;
}

.bx-sari:focus {
	left: 0;
}

/* -------------------------------------------------------------
   Butoane
   Perechea cu care lucreaza magazinul: albastru pentru actiunea
   obisnuita, rosu pentru cea care incheie cumparatura. Gradientul
   e pus cu background-image, nu cu background: forma scurta
   reseteaza si celelalte proprietati de fundal.
   ------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link,
.bx-buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: var(--wp--custom--raza--buton);
	padding: 0.75rem 1.75rem;
	transition: background-color var(--wp--custom--tranzitie), color var(--wp--custom--tranzitie), box-shadow var(--wp--custom--tranzitie);
	background-image: none;
	background-color: var(--wp--preset--color--text);
	color: #fff;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.bx-buton:hover {
	background-color: var(--wp--preset--color--negru);
	color: #fff;
}

.wp-element-button:active,
.bx-buton:active {
	background-color: var(--wp--preset--color--negru);
}

/* Actiunea care incheie cumparatura. */
.bx-buton--rosu,
.woocommerce .checkout-button,
.woocommerce #place_order,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background-image: linear-gradient(90deg, #cf3f50 0%, #d42d2d 100%) !important;
	background-color: #d42d2d !important;
	color: #fff !important;
	border: 0 !important;
}

/* Actiunea secundara: aceleasi dimensiuni, fara greutate vizuala. */
.bx-buton--linie,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-image: none;
	background-color: transparent;
	color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--linie-tare);
}

.bx-buton--linie:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--text);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--text);
	background-color: transparent;
}

.bx-buton[disabled],
.wp-element-button[disabled] {
	/*
	 * Starea inactiva nu se stinge prin opacity: scade si contrastul textului
	 * sub pragul WCAG. Se schimba culorile, nu transparenta.
	 */
	background-image: none;
	background-color: var(--wp--preset--color--linie);
	color: #4e4e4e;
	cursor: not-allowed;
	filter: none;
}

/* -------------------------------------------------------------
   Preturi
   ------------------------------------------------------------- */

.bx-pret,
.woocommerce .price {
	font-weight: 700;
	color: var(--wp--preset--color--text);
	font-variant-numeric: tabular-nums;
}

.bx-pret del,
.woocommerce .price del {
	font-weight: 400;
	color: var(--wp--preset--color--text-stins);
	margin-inline-end: 0.4em;
}

.bx-pret ins,
.woocommerce .price ins {
	text-decoration: none;
	color: var(--wp--preset--color--rosu-apasat);
}

/* Pretul si moneda nu se despart la capat de rand. */
.bx-pret .woocommerce-Price-amount {
	white-space: nowrap;
}

/* -------------------------------------------------------------
   Grila de produse
   ------------------------------------------------------------- */

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

.bx-produs {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--normala);
	overflow: hidden;
	transition: border-color var(--wp--custom--tranzitie);
}

.bx-produs:hover {
	border-color: var(--wp--preset--color--text);
}

.bx-produs__media {
	display: block;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--alb);
}

.bx-produs__corp {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--20);
	padding-top: 0;
	flex: 1;
}

.bx-produs__titlu {
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 500;
	line-height: 1.35;
	margin: 0;
}

.bx-produs__titlu a {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bx-produs__titlu a:hover {
	color: var(--wp--preset--color--albastru-apasat);
	text-decoration: underline;
}

.bx-produs__jos {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.bx-eticheta {
	position: absolute;
	inset-block-start: 0.5rem;
	inset-inline-start: 0.5rem;
	z-index: 1;
	padding: 0.2rem 0.5rem;
	border-radius: var(--wp--custom--raza--mica);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--wp--preset--color--rosu-apasat);
	color: #fff;
}

.bx-stoc {
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 600;
}

.bx-stoc--da {
	color: var(--wp--preset--color--verde);
}

.bx-stoc--nu {
	color: var(--wp--preset--color--text-stins);
}

/* -------------------------------------------------------------
   Antet si subsol
   ------------------------------------------------------------- */

.bx-antet {
	background: var(--wp--preset--color--alb);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.bx-subsol {
	background: var(--wp--preset--color--alb);
	border-top: 1px solid var(--wp--preset--color--linie);
}

/* -------------------------------------------------------------
   Tabele late pe telefon
   De la trei coloane in sus, tabelul devine lista de cartonase.
   ------------------------------------------------------------- */

.bx-tabel-invelis {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
	.bx-tabel--cartonase thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

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

	.bx-tabel--cartonase td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border: 0;
		padding: 0.35rem 0;
	}

	.bx-tabel--cartonase td::before {
		content: attr(data-eticheta);
		font-weight: 600;
		color: var(--wp--preset--color--text-secundar);
	}
}

/* -------------------------------------------------------------
   Miscare
   ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------
   Semnatura Emblematic
   Format fix (decizie Radu, 26.09.2026). Se schimba doar culorile.
   Al doilea segment de text are gradientul pus cu background-image:
   forma scurta ar reseta background-clip si textul ar iesi bara plina.
   ------------------------------------------------------------- */

.facut{--mw-accent:#d42d2d;--mw-mijloc:#a8545e;--mw-neutru:#606562;--mw-neutru-2:#6f6a6d}
.facut{position:relative;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:14px;letter-spacing:-.01em;text-decoration:none}
.facut-text{background:linear-gradient(90deg,var(--mw-neutru),var(--mw-mijloc) 70%,var(--mw-accent));-webkit-background-clip:text;background-clip:text;color:transparent;transition:filter .3s}
.facut-text+svg+.facut-text{background-image:linear-gradient(90deg,var(--mw-accent),var(--mw-mijloc) 30%,var(--mw-neutru-2) 60%,var(--mw-neutru))}
/*
 * La hover textul se intuneca, nu se lumineaza: capatul rosu al degradeului
 * luminat ajungea la 3,3:1 pe alb, iar o stare de hover trebuie sa treaca
 * pragul la fel ca starea obisnuita. Semnalul de hover ramane inima, care
 * bate mai repede.
 */
.facut:hover .facut-text{filter:brightness(0.9)}
.inima{margin:0 2px;filter:drop-shadow(0 0 6px rgba(254,45,52,.50)) drop-shadow(0 0 16px rgba(207,63,80,.32));animation:bataie 2.4s ease-in-out infinite}
.facut:hover .inima{animation-duration:.9s}
@keyframes bataie{0%,40%,100%{transform:scale(1)}10%{transform:scale(1.12)}20%{transform:scale(.98)}28%{transform:scale(1.07)}}
@media (prefers-reduced-motion: reduce){.inima{animation:none}}

/* -------------------------------------------------------------
   Legatura catre setarile de cookie-uri, in subsol
   Retragerea acordului trebuie sa fie la fel de la indemana ca
   acordul insusi, deci sta pe fiecare pagina, langa drepturi.
   ------------------------------------------------------------- */

.bx-ck-subsol {
	margin-left: 0.75rem;
}

.bx-ck-subsol .bx-ck__legatura {
	color: inherit;
}

/* -------------------------------------------------------------
   Printshop
   Pagina a fost scoasa din Elementor pe 19 octombrie 2026 si
   rescrisa in blocuri. Cele doua grile de mai jos tin locul
   randurilor de casete pe care le desena pluginul.
   ------------------------------------------------------------- */

.bx-pasi,
.bx-servicii {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

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

.bx-pas > *,
.bx-serviciu > * {
	margin: 0;
}

.bx-pas__imagine img,
.bx-serviciu__imagine img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.bx-ps-lista {
	max-width: 36rem;
	margin: var(--wp--preset--spacing--30) auto;
	padding-left: 1.2rem;
}

.bx-ps-lista li {
	margin-bottom: 0.4rem;
}

@media (min-width: 600px) {
	.bx-pasi {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bx-servicii {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.bx-pasi {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.bx-servicii {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* =============================================================
   Gramatica vizuala Peak Design
   Adaugata pe 20 octombrie 2026, dupa macheta aprobata.

   Trei lucruri pe care le tine tot ce urmeaza:
   - singura culoare saturata din pagina e butonul de cumparare,
     deci aici nu apare niciun rosu si niciun albastru;
   - cardurile nu au umbra si nu au contur propriu, se despart
     prin spatiu alb;
   - intre doua sectiuni sunt 80 de pixeli, adica spatierea 60.
   ============================================================= */

/* -------------------------------------------------------------
   Bara lipicioasa de 64 de pixeli
   ------------------------------------------------------------- */

.bx-antet {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--wp--preset--color--alb);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.bx-antet__bara > .bx-antet__rand {
	min-height: var(--wp--custom--bara--inaltime);
	gap: var(--wp--preset--spacing--40);
	flex-wrap: nowrap;
}

.bx-antet__josul {
	border-top: 1px solid var(--wp--preset--color--linie);
}

.bx-antet__josul > .bx-antet__rand {
	min-height: 56px;
	gap: var(--wp--preset--spacing--40);
}

.bx-antet__marca {
	gap: 0.6rem;
	flex: 0 0 auto;
}

/*
 * Sigla e un logotip culcat, 1920 x 242, adica raportul 7,9:1. Latimea de 36 de
 * pixeli pe care o avea inainte ii dadea 4 pixeli inaltime: pe ecran se vedea o
 * dunga. Latimea de 148 o aduce la 19 pixeli, inaltimea potrivita intr-o bara de
 * 64. Pe telefon scade, ca sa ramana loc casutei de cautare.
 *
 * Numele site-ului nu se mai scrie langa ea: sigla **este** numele scris, iar
 * doua exemplare ale aceluiasi cuvant unul langa altul arata a greseala. Pentru
 * cititorul de ecran numele vine din textul alternativ al siglei.
 */
.bx-antet__logo .custom-logo {
	display: block;
	width: 220px;
	height: auto;
}

@media (max-width: 782px) {
	.bx-antet__logo .custom-logo {
		width: 164px;
	}
}

.bx-antet__livrare {
	margin: 0;
}

/* Cautarea: pastila pe suprafata deschisa, fara contur. */
.bx-caut {
	max-width: 520px;
}

.bx-caut .wp-block-search__inside-wrapper {
	height: 40px;
	padding: 0 4px 0 16px;
	gap: 0.5rem;
	background: var(--wp--preset--color--fundal-bland);
	border: 0;
	border-radius: var(--wp--custom--raza--rotund);
}

.bx-caut .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text);
}

/*
 * Textul din casuta goala trebuie sa treaca pragul de contrast la
 * fel ca orice alt text: gri stins pe suprafata deschisa da 5,2:1.
 */
.bx-caut .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-stins);
	opacity: 1;
}

.bx-caut .wp-block-search__button {
	width: 32px;
	height: 32px;
	min-width: 32px;
	padding: 0;
	background: transparent;
	background-image: none;
	color: var(--wp--preset--color--text-secundar);
	border-radius: var(--wp--custom--raza--rotund);
}

.bx-caut .wp-block-search__button:hover {
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--text);
}

.bx-caut .wp-block-search__button svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Uneltele din dreapta: tinte de 44 de pixeli, cum cere WCAG. */
.bx-antet__unelte {
	gap: 0.25rem;
	flex: 0 0 auto;
}

.bx-unealta,
.bx-antet__unelte .wc-block-customer-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--text-secundar);
	text-decoration: none;
	border-radius: var(--wp--custom--raza--buton);
}

.bx-unealta:hover,
.bx-antet__unelte .wc-block-customer-account:hover {
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bx-antet__unelte .wc-block-customer-account__account-icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.bx-antet__unelte .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--rotund);
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.bx-antet__unelte .wc-block-mini-cart__button:hover {
	border-color: var(--wp--preset--color--text);
}

.bx-antet__unelte .wc-block-mini-cart__icon {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* Navigatia: etichete, nu titluri. Majusculele vin din theme.json. */
.bx-antet__josul .wp-block-navigation {
	gap: 1.75rem;
}

.bx-antet__josul .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text-secundar);
	text-decoration: none;
}

.bx-antet__josul .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--text);
}

/*
 * Pagina in care te afli se marcheaza cu o linie sub eticheta si cu
 * text mai apasat, nu numai cu alta culoare: diferenta de culoare
 * singura nu se vede la cine nu distinge nuantele.
 */
.bx-antet__josul .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.bx-antet__josul .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--text);
}

@media (max-width: 900px) {
	.bx-antet {
		position: static;
	}

	.bx-antet__bara > .bx-antet__rand {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}

	.bx-caut {
		max-width: none;
		order: 3;
		flex-basis: 100%;
	}
}

/* -------------------------------------------------------------
   Eroul
   ------------------------------------------------------------- */

.bx-erou__titlu {
	max-width: 42rem;
	margin: 0;
}

.bx-erou__text {
	max-width: 36rem;
	margin-bottom: 0;
}

.bx-erou__actiuni {
	gap: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------
   Pastilele de filtrare
   ------------------------------------------------------------- */

.bx-pastile {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--40);
}

.bx-pastila {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--linie-tare);
	border-radius: var(--wp--custom--raza--rotund);
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	transition: border-color var(--wp--custom--tranzitie), background-color var(--wp--custom--tranzitie);
}

.bx-pastila:hover {
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text);
	text-decoration: none;
}

.bx-pastila.is-activa {
	background: var(--wp--preset--color--text);
	border-color: var(--wp--preset--color--text);
	color: var(--wp--preset--color--alb);
	font-weight: 600;
}

/* -------------------------------------------------------------
   Dalele de categorie
   Tin locul listei de 111 categorii de pe prima pagina.
   ------------------------------------------------------------- */

.bx-dale {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.bx-dala {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.bx-dala__semn {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--fundal-bland);
	border-radius: var(--wp--custom--raza--normala);
	color: var(--wp--preset--color--text-secundar);
	transition: background-color var(--wp--custom--tranzitie);
}

.bx-dala:hover .bx-dala__semn {
	background: var(--wp--preset--color--linie);
}

.bx-dala__nume {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--mediu);
	font-weight: 600;
	line-height: 1.3;
}

.bx-dala:hover .bx-dala__nume {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bx-dala__numar {
	display: block;
	margin-top: 0.25rem;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-stins);
}

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

/* -------------------------------------------------------------
   Capul de sectiune: titlu la stanga, legatura la dreapta
   ------------------------------------------------------------- */

.bx-cap-sectiune {
	gap: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}

.bx-cap-sectiune > * {
	margin: 0;
}

.bx-cap-sectiune__legatura a {
	font-weight: 600;
	text-underline-offset: 4px;
}

/* -------------------------------------------------------------
   Banda neagra cu faptele comerciale
   ------------------------------------------------------------- */

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

.bx-banda__eticheta {
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #c9cdcb;
}

.bx-banda__fapt {
	margin: 0;
	font-weight: 600;
	line-height: 1.25;
}

/* -------------------------------------------------------------
   Marcile: siglele pe un rand care curge continuu

   Pista se tipareste de doua ori si se muta cu exact 50%. Cand
   animatia revine la zero, a doua copie a ajuns unde era prima,
   deci saritura nu se vede. A doua copie poarta aria-hidden in
   markup: pentru cititorul de ecran marcile sunt o singura data.
   ------------------------------------------------------------- */

.bx-marci {
	display: flex;
	width: 100%;
	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);
	overflow: hidden;
	/* Siglele se sting la cele doua capete, ca sa nu pare taiate de nicaieri. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.bx-marci__pista {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
	margin: 0;
	padding: 0 clamp(1rem, 2.5vw, 2.25rem) 0 0;
	list-style: none;
	animation: bx-marci-curge 46s linear infinite;
}

.bx-marci:hover .bx-marci__pista,
.bx-marci:focus-within .bx-marci__pista {
	animation-play-state: paused;
}

@keyframes bx-marci-curge {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.bx-marca {
	flex: 0 0 auto;
	margin: 0;
	list-style: none;
}

.bx-marca a {
	display: block;
	border-radius: var(--wp--custom--raza--mica);
}

/*
 * Siglele vin de la producatori diferiti, in culori si contraste diferite.
 * Stinse in gri si readuse la culoare la hover, randul arata ca o singura
 * familie, nu ca un colaj.
 */
.bx-marca__sigla {
	display: block;
	width: auto;
	height: 30px;
	max-width: 132px;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.62;
	transition: filter var(--wp--custom--tranzitie), opacity var(--wp--custom--tranzitie);
}

.bx-marca a:hover .bx-marca__sigla,
.bx-marca a:focus-visible .bx-marca__sigla {
	filter: grayscale(0);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * Fara animatie randul ar arata numai primele sigle si restul ar fi de
	 * neajuns. Devine un rand care se trage cu degetul, cu agatare.
	 */
	.bx-marci {
		overflow-x: auto;
		scroll-snap-type: x proximity;
	}

	.bx-marci__pista {
		animation: none;
	}

	.bx-marci__pista[aria-hidden="true"] {
		display: none;
	}

	.bx-marca {
		scroll-snap-align: start;
	}
}

/* -------------------------------------------------------------
   Firimituri si capul de arhiva
   ------------------------------------------------------------- */

.bx-firimituri {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text-stins);
}

.bx-firimituri a {
	color: var(--wp--preset--color--text-stins);
	text-decoration: none;
}

.bx-firimituri a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
}

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

.bx-cap-arhiva > h1 {
	margin: 0;
}

.bx-cap-arhiva .bx-numar,
.bx-cap-arhiva .woocommerce-result-count {
	margin: 0.6rem 0 0;
	color: var(--wp--preset--color--text-stins);
}

.bx-descriere-termen {
	max-width: 56rem;
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* -------------------------------------------------------------
   Subsolul
   Coloanele sunt scrise, nu generate din lista de pagini: lista
   scotea in subsol si "Contul meu", "Cos cumparaturi" si
   "Finalizare comanda", adica trei adrese care nu au ce sa caute
   intr-un subsol.
   ------------------------------------------------------------- */

.bx-subsol {
	background: var(--wp--preset--color--alb);
	border-top: 1px solid var(--wp--preset--color--linie);
}

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

.bx-subsol__eticheta {
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bx-subsol__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.bx-subsol__lista a {
	text-decoration: none;
}

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

.bx-subsol__adresa {
	margin: 0 0 var(--wp--preset--spacing--30);
	line-height: 1.5;
}

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

/*
   Adresa de e-mail din subsol vine prin [bicopyx_email], deci e o legatura,
   nu un paragraf cu legatura in el. Spatierea NU se pune aici: wpautop o
   inveleste oricum intr-un paragraf, care isi are marginea de sus de la
   blockGap. O margine de jos pusa pe legatura ar lasa 24 px atarnand sub ea,
   masurat pe pagina vie, si ar inalta coloana degeaba.
*/
.bx-subsol__email {
	line-height: 1.5;
}

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

.bx-subsol__jos > p {
	margin: 0;
}

/* -------------------------------------------------------------
   Paginarea
   ------------------------------------------------------------- */

.bx-paginare {
	gap: 0.25rem;
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--mic);
	font-variant-numeric: tabular-nums;
}

.bx-paginare .page-numbers,
.bx-paginare .wp-block-query-pagination-numbers a,
.bx-paginare .wp-block-query-pagination-previous,
.bx-paginare .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 0.75rem;
	border-radius: var(--wp--custom--raza--buton);
	text-decoration: none;
	color: var(--wp--preset--color--text);
}

.bx-paginare .page-numbers.current {
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--alb);
	font-weight: 700;
}

.bx-paginare .page-numbers:not(.current):hover {
	background: var(--wp--preset--color--fundal-bland);
	text-decoration: none;
}

.bx-paginare .wp-block-query-pagination-previous,
.bx-paginare .wp-block-query-pagination-next {
	border: 1px solid var(--wp--preset--color--linie-tare);
	font-weight: 600;
}

/* -------------------------------------------------------------
   Randul cu autoritatile, in subsol

   Nu sunt o decoratie: legatura catre entitatea de solutionare
   alternativa a litigiilor e ceruta de art. 10 din Ordonanta
   Guvernului nr. 38/2015. Se scriu ca text, nu ca bannere-imagine:
   un banner nu se poate citi de un cititor de ecran si nici nu
   se mareste odata cu textul paginii.

   Legatura catre platforma europeana SOL lipseste dinadins:
   platforma a fost inchisa pe 20 iulie 2025 prin Regulamentul
   (UE) 2024/3228, iar o legatura catre ea ar duce intr-o pagina
   moarta.
   ------------------------------------------------------------- */

.bx-subsol__autoritati {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem var(--wp--preset--spacing--40);
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--linie);
}

.bx-autoritate {
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-stins);
	text-decoration: none;
}

.bx-autoritate:hover,
.bx-autoritate:focus-visible {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =============================================================
   Bara de meniu si subsolul, pe albastrul butoanelor
   Cerute de Radu pe 20 octombrie 2026: aceeasi culoare cu
   butonul care adauga in cos, adica `albastru`, #1f6fd0.

   Ce NU se face, si de ce: bara de sus, cea cu sigla si cu
   casuta de cautare, ramane alba. Sigla e un logotip culcat
   desenat pentru fundal deschis, iar casuta de cautare e o
   pastila pe suprafata deschisa; amandoua ar fi cerut desenate
   din nou. "Meniul" e banda cu etichetele de categorii, si ea
   e cea care se coloreaza.

   Contrastul, masurat: alb pe #1f6fd0 da 4,95:1, deci trece
   pragul de 4,5:1 al textului obisnuit (WCAG 2.2, 1.4.3). De
   aceea TOT textul din cele doua zone e alb, nu intr-o nuanta
   stinsa: pe albastru, orice tenta mai inchisa decit #f2f7fe
   cade sub prag. Ierarhia se face din marime, din grosime si
   din majuscule, nu din culoare.
   ============================================================= */

.bx-antet__josul {
	background: var(--wp--preset--color--albastru);
	border-top: 0;
	color: var(--wp--preset--color--alb);
}

/*
 * Randul de livrare si legaturile din meniu stau pe albastrul marcii, deci
 * sunt albe: alb pe #1F6FD0 da 4,95 la 1, peste cele 4,5 cerute de WCAG 2.2
 * AA pentru text obisnuit. Masurat pe pagina vie pe 21 octombrie 2026.
 *
 * Nota pentru cine vine sa "repare" contrastul aici: pe 21 octombrie regula
 * asta a primit pentru scurt timp un `!important`, dupa o masuratoare care
 * arata textul gri #606562 pe albastru, adica 1,20 la 1. Masuratoarea era
 * facuta pe o copie de pagina veche de 26 de ore, servita din cache-ul
 * gazduirii: in ea paragraful purta clasa `has-text-stins-color`, care intre
 * timp nu mai e in marcaj. Pe pagina proaspata regula de mai jos se aplica
 * singura, fara `!important`. Cand masori culori pe situl asta, cere pagina
 * cu o interogare de spargere a cache-ului.
 */
.bx-antet__josul .bx-antet__livrare,
.bx-antet__josul .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--alb);
}

.bx-antet__josul .wp-block-navigation .wp-block-navigation-item__content:hover,
.bx-antet__josul .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--alb);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Pagina in care te afli: linie sub eticheta si text mai apasat.
 * Culoarea nu mai poate purta diferenta, fiindca tot rindul e alb,
 * deci semnul ramane cel care se vedea si inainte la cine nu
 * distinge nuantele.
 */
.bx-antet__josul .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.bx-antet__josul .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--alb);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--alb);
}

/* Butonul de deschidere al meniului pe telefon sta tot pe albastru. */
.bx-antet__josul .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--alb);
}

/* -------------------------------------------------------------
   Subsolul
   ------------------------------------------------------------- */

.bx-subsol {
	background: var(--wp--preset--color--albastru);
	border-top: 0;
	color: var(--wp--preset--color--alb);
}

.bx-subsol :where(p, li, strong, a, button) {
	color: var(--wp--preset--color--alb);
}

.bx-subsol__eticheta {
	font-weight: 700;
	opacity: 1;
}

.bx-subsol__lista a:hover,
.bx-subsol__lista a:focus-visible,
.bx-autoritate:hover,
.bx-autoritate:focus-visible {
	color: var(--wp--preset--color--alb);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bx-autoritate {
	color: var(--wp--preset--color--alb);
}

/*
 * Separatoarele: linii albe transparente. Sint decor, nu text,
 * deci nu intra sub pragul de contrast al textului.
 */
.bx-subsol__jos,
.bx-subsol__autoritati {
	border-top-color: rgba(255, 255, 255, 0.28);
}

/*
 * Semnatura Emblematic: pe alb, textul are un degrade de la gri la
 * rosu. Pe albastru, fiecare oprire a degradeului ar trebui sa fie
 * mai deschisa decit #f2f7fe ca sa treaca pragul de 4,5:1 la 14 px,
 * iar atunci degradeul nu se mai vede. Deci cele patru variabile
 * `--mw-*` trec pe alb si textul ramane plin, exact asa cum permite
 * snippetul. Inima pixelata nu se schimba: fiecare celula are contur
 * #090A0C, care da 4:1 pe albastru, peste pragul de 3:1 al
 * componentelor fara text.
 */
.bx-subsol .facut {
	--mw-accent: #ffffff;
	--mw-mijloc: #ffffff;
	--mw-neutru: #ffffff;
	--mw-neutru-2: #ffffff;
}

/* Legatura de redeschidere a setarilor de cookie-uri. */
.bx-subsol .bx-ck__legatura {
	color: var(--wp--preset--color--alb);
	border-color: rgba(255, 255, 255, 0.5);
}

/* =============================================================
   Albastrul capata adancime, 20 octombrie 2026
   Cerut de Radu: albastrul plat nu arata bine, vrea umbre sau
   textura mai inchisa prin el.

   Regula care tine tot blocul: se intuneca, niciodata nu se
   lumineaza. Alb pe #1f6fd0 da 4,95:1, adica 0,45 peste pragul
   de 4,5:1, iar o spalare de alb de numai 14% coboara raportul
   la 3,86:1, sub prag. Orice strat care inchide culoarea, in
   schimb, mareste contrastul. Deci adancimea vine din umbre,
   nu din lumini, ceea ce e si ce s-a cerut.

   Nuanta de umbra e #0a244a, albastrul propriu dus spre negru,
   nu negru curat: negrul peste albastru da o pata cenusie.
   ============================================================= */

.bx-subsol {
	background-color: var(--wp--preset--color--albastru);
	background-image:
		/* Firul de textura: hasura fina, la 5%, cit sa se simta pe o
		   suprafata mare fara sa se vada ca dungi. */
		repeating-linear-gradient(
			135deg,
			rgba(10, 36, 74, 0.05) 0,
			rgba(10, 36, 74, 0.05) 2px,
			rgba(10, 36, 74, 0) 2px,
			rgba(10, 36, 74, 0) 7px
		),
		/* Doua adincituri, una sus-dreapta si una jos-stinga, ca
		   lumina sa para ca vine dintr-o parte. */
		radial-gradient(1100px 520px at 88% -12%, rgba(10, 36, 74, 0.30), rgba(10, 36, 74, 0) 62%),
		radial-gradient(820px 460px at 6% 112%, rgba(10, 36, 74, 0.34), rgba(10, 36, 74, 0) 64%),
		/* Coborirea treptata spre talpa paginii. */
		linear-gradient(180deg, rgba(10, 36, 74, 0) 0%, rgba(10, 36, 74, 0.28) 100%);
	box-shadow: inset 0 14px 34px rgba(6, 24, 52, 0.22);
}

/*
 * Numele celor doua magazine erau singurul text ramas inchis:
 * `.bx-subsol__adresa strong` isi cerea culoarea textului de
 * corp, cu specificitate 0,2,0, iar regula de albire a subsolului
 * era scrisa cu `:where()`, care are specificitate zero. Deci nu
 * era o scapare de culoare, ci una de greutate a selectorului.
 */
.bx-subsol .bx-subsol__adresa strong {
	color: var(--wp--preset--color--alb);
}

/* Banda de meniu primeste acelasi material, mai subtire. */
.bx-antet__josul {
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(10, 36, 74, 0.05) 0,
			rgba(10, 36, 74, 0.05) 2px,
			rgba(10, 36, 74, 0) 2px,
			rgba(10, 36, 74, 0) 7px
		),
		linear-gradient(180deg, rgba(10, 36, 74, 0) 55%, rgba(10, 36, 74, 0.22) 100%);
	box-shadow: inset 0 -6px 14px rgba(6, 24, 52, 0.14);
}

/* =============================================================
   Butoanele din erou: albastru si rosu
   Cerut de Radu pe 20 octombrie 2026, pe toate eroul paginilor.
   Inlocuieste butonul negru si pe cel gol de dinainte.

   Rosul NU e #fe2d34, rosul marcii, desi acela a fost cerut la
   pastila de cos. Motivul e masurat: alb pe #fe2d34 da 3,72:1,
   sub pragul de 4,5:1 al textului. Pastila trece fiindca poarta
   numai pictograma, deci intra sub pragul de 3:1 al
   componentelor fara text; un buton cu eticheta nu. Deci aici
   merge `rosu-apasat`, #d42d2d, care da 4,99:1, adica aceeasi
   greutate vizuala si contrast conform.

   Albastrul e cel al butonului de cumparare, #1f6fd0, 4,95:1.
   ============================================================= */

.bx-erou__actiuni .wp-block-button:first-child .wp-block-button__link,
.bx-ps-erou .wp-block-buttons .wp-block-button:first-child .wp-block-button__link {
	background-color: var(--wp--preset--color--albastru);
	background-image: none;
	color: var(--wp--preset--color--alb);
}

.bx-erou__actiuni .wp-block-button:first-child .wp-block-button__link:hover,
.bx-ps-erou .wp-block-buttons .wp-block-button:first-child .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--albastru-apasat);
	color: var(--wp--preset--color--alb);
}

.bx-erou__actiuni .wp-block-button:nth-child(2) .wp-block-button__link,
.bx-ps-erou .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
	background-color: var(--wp--preset--color--rosu-apasat);
	background-image: none;
	color: var(--wp--preset--color--alb);
	border: 0;
}

.bx-erou__actiuni .wp-block-button:nth-child(2) .wp-block-button__link:hover,
.bx-ps-erou .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--rosu-inchis);
	color: var(--wp--preset--color--alb);
}

/* Ridicarea la cursor, aceeasi pentru amandoua. */
.bx-ps-erou .wp-block-buttons .wp-block-button__link {
	transition:
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		background-color var(--wp--custom--tranzitie);
}

.bx-ps-erou .wp-block-buttons .wp-block-button__link:hover {
	transform: translate3d(0, -2px, 0);
	box-shadow: 0 10px 22px rgba(31, 111, 208, 0.26);
}

@media (prefers-reduced-motion: reduce) {
	.bx-ps-erou .wp-block-buttons .wp-block-button__link:hover {
		transform: none;
	}
}

/* =============================================================
   Printshop: eroul si caseta de final, pe doua coloane
   Adaugate pe 21 octombrie 2026, odata cu cele doua imagini.

   Pana acum amandoua erau text centrat peste toata latimea.
   Acum au aceeasi gramatica ca eroul primei pagini: cuvintele
   intr-o coloana, imaginea in cealalta.

   Grupul de afara e pe `layout: default`, nu `constrained`,
   fiindca `constrained` pune `margin: auto` si o latime maxima
   pe fiecare copil, deci ar strange cele doua coloane spre
   mijloc, una peste alta.

   Fundalul imaginilor e exact #eef1f0, adica `fundal-bland`,
   cartonul pe care stau. De aceea imaginea nu are nici cadru,
   nici umbra: marginea ei se topeste in carton, iar un contur
   ar desena o caseta in jurul unui lucru care nu are margine.
   ============================================================= */

.bx-ps-erou,
.bx-ps-final {
	display: grid;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.bx-ps-erou {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

/*
 * La caseta de final imaginea sta in stanga si e coloana mai mica: textul
 * de acolo e o lista de cinci rinduri plus un buton, deci are nevoie de
 * mai multa latime decat titlul scurt al eroului.
 */
.bx-ps-final {
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
}

/*
 * Blocurile dinauntru sunt scrise de editor si nu stiu nimic despre grila.
 * `margin: 0` scoate marginea pe care WordPress o pune intre fratii unui
 * grup in curgere: intr-o grila, ea ar cobori coloana a doua fata de prima.
 */
.bx-ps-erou__cuvinte,
.bx-ps-erou__media,
.bx-ps-final__cuvinte,
.bx-ps-final__media {
	min-width: 0;
	margin: 0;
}

.bx-ps-erou__poza,
.bx-ps-final__poza {
	margin: 0;
}

.bx-ps-erou__poza img,
.bx-ps-final__poza img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--raza--normala);
}

/*
 * Lista nu se mai centreaza. Regula generala `.bx-ps-lista` o tine la 36rem
 * cu `margin: auto`, fiindca pana azi statea singura pe toata latimea casetei;
 * in coloana ei, acel `auto` o impinge spre mijloc si rupe linia din stanga
 * pe care o fac titlul, paragraful si butonul.
 */
.bx-ps-final__cuvinte .bx-ps-lista {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (max-width: 900px) {
	.bx-ps-erou,
	.bx-ps-final {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Imaginea trece sub text in amandoua, nu invers: titlul si primul
	 * paragraf sunt ce citeste omul intai pe telefon, iar o imagine de
	 * inceput i-ar impinge sub marginea ecranului.
	 */
	.bx-ps-erou__media,
	.bx-ps-final__media {
		order: 2;
	}
}

/* -------------------------------------------------------------
   Tintele de apasat, 21 octombrie 2026
   Verificare pe telefon la 360, 390 si 768 de pixeli, cu
   Playwright. Radu a cerut 44 de pixeli pe tintele de apasat.

   WCAG 2.2 AA cere la criteriul 2.5.8 doar 24 pe 24, iar toate
   comenzile de mai jos il treceau; 44 e masura ceruta de Radu,
   adica nivelul AAA (2.5.5), si tot acolo duc regulile astea.
   Unde latimea desenata nu poate creste fara sa strice asezarea,
   creste numai suprafata de apasat, cu un pseudo-element.
   ------------------------------------------------------------- */

/*
 * Butonul care deschide meniul pe telefon: 24 pe 24 masurati. E comanda
 * principala de navigare a site-ului pe telefon, deci e si cea care are cel
 * mai putin voie sa fie mica. Pictograma rimine de 24, suprafata creste.
 */
.wp-block-navigation__responsive-container-open {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/* Si butonul care il inchide, din panoul deschis. */
.wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/*
 * Legaturile din meniul deschis pe telefon: 22 de pixeli inaltime, adica
 * randul de text. In panou, unde se apasa cu degetul, randul devine tinta.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
}

/*
 * Lupa din antet: 32 pe 32. Casuta de caut are inaltimea ei, deci butonul
 * creste pana la 44 fara sa mute nimic.
 */
.bx-antet .wp-block-search__button {
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/*
 * Pictograma de cont din antet: 36 pe 36. Cosul de langa ea e deja 51 pe 44,
 * iar inima 44 pe 44, deci contul rimanea singurul sub masura.
 */
.bx-antet__unelte .wp-block-woocommerce-customer-account a,
.bx-antet__unelte .wc-block-customer-account {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
}

/*
 * Jetoanele de filtrare din magazin: 40 de pixeli desenati, 42 cu conturul.
 * Aici latimea nu e in joc, doar inaltimea, deci creste chiar jetonul.
 */
.bx-pastila {
	min-height: 2.75rem;
}


/* =============================================================
   Centrarea pe telefon, 21 octombrie 2026
   Cerut de Radu: secțiunile „Ce spun clienții" și „Mărci din
   catalog", plus subsolul, se centrează pe mobil.

   Pe ecran lat titlul la stânga și legătura la dreapta se citesc
   ca un rând; pe o coloană îngustă, textul lipit de muchia din
   stânga arată ca o listă neterminată, nu ca o secțiune.

   Capul de secțiune se recunoaște după structură, nu după o
   clasă nouă: „Ce spun clienții" e singurul dintre cele trei
   care nu are legătură lângă titlu, deci singurul al cărui titlu
   e și primul și ultimul copil. Celelalte două rămân cum sunt,
   fiindcă acolo centrarea ar despărți titlul de legătura lui.
   Alegerea asta ține marcajul neatins, deci nu cere regenerarea
   șablonului din panoul „Conținut site".
   ------------------------------------------------------------- */

@media (max-width: 600px) {
	.bx-cap-sectiune > h2:first-child:last-child {
		flex: 1 1 100%;
		text-align: center;
	}

	/*
	 * Eticheta „Mărci din catalog". `main` o deosebește de etichetele cu
	 * același nume de clasă din subsol, care se centrează mai jos, pe
	 * coloana lor.
	 */
	main .bx-subsol__eticheta {
		text-align: center;
	}

	/* ---------- subsolul ---------- */

	.bx-subsol .wp-block-column {
		text-align: center;
	}

	/*
	 * Listele sunt cutii flexibile pe coloană, deci `text-align` moștenit nu
	 * le mută: rândurile rămân late cât coloana și textul lor pornește tot
	 * din stânga. Se centrează pe axa transversală.
	 */
	.bx-subsol .bx-subsol__lista {
		align-items: center;
	}

	.bx-subsol__autoritati {
		justify-content: center;
		text-align: center;
	}

	/*
	 * Rândul de jos are `space-between` pe ecran lat: drepturile de autor la
	 * stânga, semnătura la dreapta. Pe telefon cele trei elemente se așază
	 * una sub alta, iar `space-between` le lasă aliniate la stânga.
	 */
	.bx-subsol__jos {
		justify-content: center;
		text-align: center;
	}
}