/*
Theme Name: Piesecazane
Theme URI: https://piesecazane.ro
Description: Tema magazinului piesecazane.ro - piese de schimb pentru sobe si cazane pe peleti
Author: piesecazane.ro
Version: 1.43.0
Template: twentytwentyfive
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: piesecazane
*/

/* ==========================================================================
   Bandă de contact (parts/header.html) — deasupra antetului, doar desktop
   ========================================================================== */

/* Banda de sus era ascunsa pe telefon, ca sa nu fure din primul ecran spatiu
   pentru un text de serviciu. Acum poarta oferta de transport gratuit — si
   peste 70% din oameni intra de pe telefon, deci exact acolo trebuie citita.

   Pe telefon ramane doar oferta: adresa de mail si programul sunt in subsol,
   iar pe 360px nu incap oricum doua texte pe un rand.

   Fara animatie, fara numaratoare inversa, fara fundal tipator — regula din
   brief. E o banda antracit de 36px cu o propozitie adevarata in ea. Se vede
   pentru ca e sus si scrie clar, nu pentru ca se misca. */
/* Inaltime minima, nu fixa. Cu `height` fix, textul care nu incapea pe un rand
   iesea din banda si se suprapunea peste antet — exact ce s-a intamplat la
   390px inainte de a scurta textul. Asa, daca vreo oferta viitoare e mai
   lunga, banda creste in loc sa se rupa. */
.announcement-bar {
	min-height: 34px;
}

.announcement-bar__inner {
	min-height: 34px;
	max-width: 1240px;
	margin-inline: auto;
	padding-block: 0.35rem;
	padding-inline: var(--wp--preset--spacing--20);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--alb);
}

/* Textul de serviciu ramane discret; oferta, nu. */
.announcement-bar__contact {
	display: none;
	opacity: 0.85;
}

.announcement-bar__oferta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
	line-height: 1.2;
}

.announcement-bar__oferta svg {
	flex-shrink: 0;
	opacity: 0.9;
}

/* „Transport gratuit" ingrosat, restul normal: se citeste dintr-o privire
   fara sa fie nevoie de alta culoare. Portocaliul ramane al butoanelor —
   pe antracit ar fi si greu de citit la marimea asta. */
.announcement-bar__oferta strong {
	font-weight: 600;
}

@media (min-width: 768px) {
	.announcement-bar {
		min-height: 36px;
	}

	.announcement-bar__inner {
		min-height: 36px;
		padding-block: 0;
		padding-inline: var(--wp--preset--spacing--30);
		justify-content: space-between;
	}

	.announcement-bar__contact {
		display: inline;
	}
}

/* ==========================================================================
   ANTET — Varianta A: "Zona de apel"
   Compozitie in doua ancore: logo-ul (identitate) in stanga, zona de telefon
   (contact) izolata printr-o linie despartitoare in dreapta. Meniul sta lipit
   de logo (un singur bloc "identitate + orientare"), iconitele de cont/cos
   sunt deliberat tacute ca sa nu concureze cu telefonul. Un singur accent de
   culoare: portocaliul butonului de telefon si un subliniere fina la hover
   pe meniu — nimic altceva colorat in antet.
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* ==========================================================================
   Anularea spatierii automate WordPress (block-gap)
   --------------------------------------------------------------------------
   WordPress adauga automat un margin-top (~19px) fiecarui bloc, mai putin
   primului dintr-un grup. In containerele noastre spatierea o face `gap`,
   deci margin-ul doar dezaliniaza: impinge al doilea si al treilea element
   mai jos decat primul. Il anulam o singura data, peste tot unde folosim
   grid sau flex propriu.

   Cazul cel mai vizibil: sectiunile paginii sunt copii directi ai lui
   <main>, iar marginul de 19px dintre ele lasa o dunga alba intre o
   sectiune bej si una antracit. Acolo nu e spatiere, e o crapatura.
   ========================================================================== */

.wp-site-blocks > main,
.wp-site-blocks > main > *,
.wp-site-blocks > footer,
.wp-block-template-part > .site-footer,
.site-header__inner > *,
.hero__inner > *,
.trust-section__inner > *,
.site-footer__inner > *,
.products-grid .wp-block-post-template > *,
.products-grid .wp-block-woocommerce-product-template > *,
.breadcrumbs-bar__inner > *,
.product-single__layout > *,
.product-buy > *,
.product-buy__price-row > *,
.safety-band > * {
	margin-block-start: 0;
}

.site-header__inner {
	display: grid;
	/* Prima coloana ia tot spatiul ramas, ca logo-ul sa stea lipit stanga si
	   cosul cu meniul sa se stranga impreuna in dreapta.
	   Inainte erau trei coloane `auto` cu `space-between`, si atunci cosul
	   ramanea **fix la mijloc**, singur intre logo si meniu. De-acolo venea
	   senzatia ca e pus aiurea: nu era langa nimic. */
	grid-template-columns: 1fr auto auto;
	grid-template-areas: "brand actions nav";
	align-items: center;
	column-gap: 0.5rem;
	min-height: 68px;
	padding-block: 0;
	padding-inline: var(--wp--preset--spacing--20);
	width: 100%;
}

/* Logo */
.site-header__brand {
	display: block;
	line-height: 0;
	grid-area: brand;
}

.site-header__brand img {
	display: block;
	height: 28px;
	width: auto;
}

/* Meniu — Inter, tacut, cu o singura subliniere portocalie la hover */
.site-header__nav {
	grid-area: nav;
}

.site-header__nav .wp-block-navigation__container {
	flex-wrap: nowrap;
	column-gap: 2rem;
}

/* Sublinierea la hover foloseste box-shadow, nu border — un border-bottom ar
   adauga inaltime doar jos si ar strica simetria casetei fata de text.
   text-decoration e anulat explicit in toate starile: WordPress adauga
   automat "text-decoration: underline" la hover pe linkurile din blocul de
   navigare (regula proprie, in afara controlului nostru) — fara asta,
   sublinierea portocalie (box-shadow) s-ar suprapune cu una din browser. */
.site-header__nav .wp-block-navigation-item__content,
.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus,
.site-header__nav .wp-block-navigation-item__content:active,
.site-header__nav .wp-block-navigation-item__content:visited {
	text-decoration: none;
}

.site-header__nav .wp-block-navigation-item__content {
	display: inline-block;
	padding-block: 4px;
	color: var(--wp--preset--color--antracit);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1;
	white-space: nowrap;
	box-shadow: inset 0 -2px 0 0 transparent;
	transition: box-shadow 150ms ease;
}

.site-header__nav .wp-block-navigation-item__content:hover,
.site-header__nav .wp-block-navigation-item__content:focus {
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
}

/* Butonul de deschidere a meniului pliant (livrat de WordPress, fara JS propriu) */
.site-header__nav .wp-block-navigation__responsive-container-open,
.site-header__nav .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
}

/* Cont si cos — un singur cluster in dreapta */
.site-header__actions {
	grid-area: actions;
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* Contul ramane o iconita tacuta: aproape nimeni nu-si face cont ca sa
   cumpere o piesa urgent. */
.site-header__account .wc-block-customer-account__link {
	min-height: 44px;
	min-width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--text-secundar);
}

.site-header__account .wc-block-customer-account__link:hover {
	color: var(--wp--preset--color--antracit);
}

.site-header__account .wc-block-customer-account__link svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* Cosul e acum singurul element portocaliu din antet.
   Inainte era o iconita cenusie de 20px lipita de un buton portocaliu mare de
   telefon — si disparea langa el, mai ales pe telefon. Butonul de telefon a
   plecat (ramane WhatsApp, jos), deci locul de accent s-a eliberat si il ia
   lucrul pentru care oamenii au venit: cumparatura.

   Regula jarului din brief spune „doar pentru actiune". Cosul chiar e
   actiunea. */
.site-header__cart-link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.site-header__cart-link:hover,
.site-header__cart-link:focus-visible {
	background: var(--wp--preset--color--jar-inchis);
	color: var(--wp--preset--color--alb);
}

.site-header__cart-link svg {
	flex-shrink: 0;
}

/* Numarul de piese: pastila alba pe portocaliu. Apare doar cand chiar e ceva
   in cos — un „0" permanent nu spune nimic si face butonul mai incarcat. */
.site-header__cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding-inline: 0.35rem;
	border-radius: 11px;
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--jar);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
}

/* Sub ~480px: logo complet + cont + cos + telefon + hamburger nu incap toate — strangem la strictul necesar */
@media (max-width: 479px) {
	.site-header__inner {
		column-gap: 0.5rem;
		padding-inline: 0.75rem;
	}

	/* Logo-ul complet, la 32px, ca sa se citeasca "PIESECAZANE.RO" si pe
	   ecranele de 360px. Ii facem loc ascunzand iconita de cont: aproape
	   nimeni nu isi face cont ca sa cumpere o piesa urgent, iar cosul si
	   telefonul sunt de zece ori mai importante. Contul ramane accesibil
	   din subsol. */
	.site-header__brand img {
		height: 32px;
	}

	.site-header__account {
		display: none;
	}

	.site-header__actions {
		gap: 0.375rem;
	}

	/* Sub 480px cuvantul „Coș" pleaca si ramane iconita cu numarul. Butonul
	   sta tot portocaliu si tot de 44px, deci nu se pierde — doar se
	   ingusteaza cat sa incapa logo-ul intreg langa el. */
	.site-header__cart-link {
		padding-inline: 0.7rem;
		gap: 0.35rem;
	}

	.site-header__cart-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* Desktop: logo si meniu lipite (un singur bloc de identitate), spatiu liber, apoi
   cont/cos tacute, despartitor, zona de telefon — a doua ancora a compozitiei */
@media (min-width: 768px) {
	.site-header__inner {
		display: flex;
		align-items: center;
		min-height: 80px;
		padding-inline: var(--wp--preset--spacing--30);
	}

	.site-header__brand img {
		height: 40px;
	}

	.site-header__nav {
		margin-left: 44px;
	}

	.site-header__actions {
		margin-left: auto;
		gap: 1rem;
	}

	.site-header__cart-link {
		padding-inline: 1.25rem;
		font-size: 1rem;
	}
}

/* ==========================================================================
   Subsol (parts/footer.html) — mobil-first
   ========================================================================== */

.site-footer {
	margin-top: var(--wp--preset--spacing--50);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
}

.site-footer__logo {
	display: block;
	height: 28px;
	width: auto;
}

.site-footer__tagline {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--alb);
	opacity: 0.75;
}

.site-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--alb);
	font-size: var(--wp--preset--font-size--mediu);
}

.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.site-footer__list a {
	color: var(--wp--preset--color--alb);
	text-decoration: none;
}

.site-footer__list a:hover {
	color: var(--wp--preset--color--jar);
	text-decoration: underline;
}

/* Pictograma SAL e fisierul oficial al ANPC, luat de la
   anpc.ro/download/sal/SAL-PICTOGRAMA.png si pus aici neatins — 201x50, cu
   fundal alb. Nu se recoloreaza si nu se reincadreaza: e insemn oficial, nu
   element de design, iar pe subsolul antracit fundalul ei alb chiar ajuta,
   fiindca o desprinde de restul si arata ca o placheta.

   `max-width: 100%` fiindca la 320 px coloana e mai ingusta de 201 px. */
.site-footer__anpc {
	display: inline-block;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 4px;
	line-height: 0;
}

.site-footer__anpc img {
	display: block;
	width: 201px;
	max-width: 100%;
	height: auto;
}

.site-footer__anpc:focus-visible {
	outline: 2px solid var(--wp--preset--color--jar);
	outline-offset: 3px;
}

.site-footer__text {
	color: var(--wp--preset--color--alb);
	opacity: 0.75;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: var(--wp--preset--spacing--20);
}

.site-footer__copyright {
	margin: 0;
	text-align: center;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--alb);
	opacity: 0.75;
}

/* Desktop: cele 4 coloane pe un singur rand */
@media (min-width: 768px) {
	.site-footer__inner {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	}

	.site-footer__logo {
		height: 32px;
	}
}

/* ==========================================================================
   Prima pagina (templates/front-page.html) — mobil-first
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Zona de deschidere --- */

/* Fotografia de deschidere e cel mai greu element al paginii si, pe telefon,
   si primul lucru desenat (LCP) — adica exact ce masoara Google. De aceea
   exista in patru variante: 900px si 1920px, fiecare in WebP si JPEG.
   `url()` simplu ramane pentru browserele fara `image-set()`; ele primesc
   JPEG-ul. Precarcarea se face din functions.php. */
/* `overflow: hidden` e aici pentru simbolul decorativ: el iese dinadins pe
   dreapta (`right: -8%`) si e mai inalt decat zona. Fara taiere, ar aduce
   derulare orizontala pe toata pagina. De asta lista de rezultate a barei de
   cautare nu sta in interiorul zonei, ci in <body> — vezi cautare-vie.js. */
.hero {
	position: relative;
	overflow: hidden;
	padding-block: 2.8rem 1.75rem;
	background-image: url("assets/img/hero-soba-peleti-mobil.jpg");
	background-image: image-set(
		url("assets/img/hero-soba-peleti-mobil.webp") type("image/webp"),
		url("assets/img/hero-soba-peleti-mobil.jpg") type("image/jpeg")
	);
	background-size: cover;
	background-position: center;
}

@media (min-width: 768px) {
	.hero {
		background-image: url("assets/img/hero-soba-peleti.jpg");
		background-image: image-set(
			url("assets/img/hero-soba-peleti.webp") type("image/webp"),
			url("assets/img/hero-soba-peleti.jpg") type("image/jpeg")
		);
	}
}

/* Strat antracit peste fotografie, ca textul sa ramana lizibil */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(31, 35, 40, 0.85);
	pointer-events: none;
	z-index: 0;
}

@media (min-width: 768px) {
	.hero::before {
		background: linear-gradient(to right, rgba(31, 35, 40, 0.92), rgba(31, 35, 40, 0.55));
	}
}

.hero__symbol {
	display: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--wp--preset--spacing--20);
}

.hero__title {
	margin: 0;
	line-height: 1.15;
	font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
	color: var(--wp--preset--color--alb);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.hero__subtitle {
	margin: 0;
	max-width: 44ch;
	font-size: var(--wp--preset--font-size--mediu);
	opacity: 0.85;
}

.hero__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--alb);
	opacity: 0.6;
}

/* Nu are `overflow: hidden`, desi el ar fi cel mai scurt drum spre colturi
   rotunde: lista de rezultate iese pe sub bara si ar fi fost taiata de el.
   Colturile sunt deci ale campului si ale butonului, fiecare al lui. */
.hero__search {
	position: relative;
	display: flex;
	width: 100%;
	max-width: 560px;
	background: var(--wp--preset--color--alb);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.hero__search-input {
	flex: 1;
	min-width: 0;
	min-height: 44px;
	border: 0;
	border-radius: 8px 0 0 8px;
	padding: 0 1.1rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--normal);
	color: var(--wp--preset--color--antracit);
	background: transparent;
}

.hero__search-input:focus {
	outline: 2px solid var(--wp--preset--color--jar);
	outline-offset: -2px;
}

.hero__search-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	min-height: 44px;
	border: 0;
	border-radius: 0 8px 8px 0;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	cursor: pointer;
}

.hero__search-button:hover {
	background: var(--wp--preset--color--jar-inchis);
}

.hero__trust {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
}

.hero__trust-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--alb);
	opacity: 0.9;
	white-space: nowrap;
}

.hero__trust-item svg {
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.hero {
		padding-block: 4.2rem 3.5rem;
	}

	.hero__inner {
		align-items: flex-start;
		text-align: left;
		margin-inline: 0;
	}

	.hero__subtitle {
		max-width: 50ch;
	}

	.hero__trust {
		justify-content: flex-start;
	}

	.hero__symbol {
		display: block;
		position: absolute;
		top: 50%;
		right: -8%;
		transform: translateY(-50%);
		width: 46vw;
		max-width: 640px;
		min-width: 380px;
		height: auto;
		opacity: 0.12;
		z-index: 0;
		pointer-events: none;
	}
}

/* --- Sectiune categorii --- */

.categories-section {
	padding-block: var(--wp--preset--spacing--50);
}

.categories-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.categories-section__title {
	margin: 0 0 0.5rem;
	text-align: center;
}

.categories-section__subtitle {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: center;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 600px) {
	.category-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Pe ecran mare, cardurile nu mai stau in coloane, ci curg si se aseaza la
   mijloc.

   Povestea rubricii asteia e o lectie: intai scria „5 coloane", cat erau atunci
   categoriile — la a sasea, cinci intrau pe rand si una ramanea singura, lipita
   de stanga. Am inlocuit cifra cu `auto-fit`, ca sa iasa din latimea ecranului,
   si a mers... pana la a saptea, cand au incaput tot sase pe rand si a ramas
   iar una singura. Orice numar fix de coloane pierde intr-o zi.

   Cu randuri care curg si se centreaza, ultimul rand e mereu la mijloc, oricate
   categorii ar fi. Nu mai trebuie potrivit nimic cand se adauga una noua. */
@media (min-width: 1024px) {
	.category-grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.category-grid > .category-card {
		/* Cardul are padding si bordura, iar tema nu pune `border-box` peste
		   tot: fara randul asta, `max-width` masoara doar miezul si cardul iese
		   cu 35 px mai lat decat i-am cerut. */
		box-sizing: border-box;
		flex: 1 1 240px;
		max-width: 300px;
	}
}

/* Pe 2 coloane, un card fara pereche ar sta lipit de stanga. Il lasam sa ia
   randul intreg — dar numai cand chiar e fara pereche: `:last-child:nth-child(odd)`
   e adevarat exact cand numarul de categorii e impar.

   Intai a fost centrat la latimea unei coloane. Pe hartie era corect: exact cat
   vecinii lui. Pe telefon arata insa a greseala — un card ingust plutind la
   mijlocul unui rand gol, ca si cum s-ar fi pierdut ceva langa el. Latimea
   intreaga umple randul si, pe deasupra, da o tinta de atingere mai mare, ceea
   ce brieful cere oricum. */
@media (max-width: 599px) {
	.category-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}

.category-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 200ms ease, box-shadow 200ms ease;
}

.category-card:hover,
.category-card:focus-visible {
	border-color: var(--wp--preset--color--jar);
	box-shadow: 0 8px 20px rgba(31, 35, 40, 0.08);
}

.category-card__icon {
	color: var(--wp--preset--color--antracit);
	flex-shrink: 0;
}

.category-card__name {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

.category-card__count {
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

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

.products-section {
	padding-block: var(--wp--preset--spacing--50);
}

.products-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.products-section__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	text-align: center;
}

/* Doua tipuri de grila ajung aici: `wp:query` (prima pagina, categorie,
   cautare) si `product-collection` (piese asemanatoare, cos). A doua e un
   <ul> cu un <li> in plus in jurul fiecarui card si vine cu propriile
   reguli de latime, de aceea selectorul repeta si `.is-flex-container`
   la fiecare prag — altfel regula de baza ar castiga in fata celor din
   media queries si ar ramane doua coloane pe desktop. */
.products-grid .wp-block-post-template,
.products-grid .wp-block-woocommerce-product-template,
.products-grid .wp-block-woocommerce-product-template.is-flex-container {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.products-grid .wp-block-post-template,
	.products-grid .wp-block-woocommerce-product-template,
	.products-grid .wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--30);
	}
}

@media (min-width: 1024px) {
	.products-grid .wp-block-post-template,
	.products-grid .wp-block-woocommerce-product-template,
	.products-grid .wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* <li>-ul suplimentar al lui product-collection: il facem transparent, ca
   sa se intinda cardul din el pe toata celula. WooCommerce ii fixeaza o
   latime in procente pentru propriul layout flex (`width: calc(25% - ...)`),
   cu un selector dublat ca sa castige — de aceea il repetam si noi. */
.products-grid .wc-block-product,
.products-grid .wc-block-product-template.is-flex-container > li,
.products-grid .wc-block-product-template.is-flex-container.is-flex-container > li {
	display: flex;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.products-grid .wc-block-product > .product-card {
	flex: 1;
}

/* Cardul e o coloana flex: imaginea si textul curg normal, butonul
   se lipeste mereu de baza (margin-top:auto), indiferent cat de lung
   e numele produsului de deasupra lui. Grila (display:grid) intinde
   deja fiecare card la inaltimea celui mai inalt de pe rand. */
.product-card {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--20);
	height: 100%;
}

.product-card__image {
	position: relative;
	margin: 0 0 var(--wp--preset--spacing--10);
}

/* Eticheta cu felul prinderii, in coltul pozei (inc/specificatii.php).
   Cinci rezistente arata la fel in miniatura; asta spune care-i diferenta,
   fara sa ceara nimanui sa apese pe vreun filtru. */
/* --- Paginarea listelor de produse ---
   Numerele sunt tinte de atins cu degetul, nu linkuri de 12px: 44px patrat,
   cu chenar, ca la butoanele din restul site-ului. */

.paginare {
	gap: 0.4rem;
	margin-top: var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--inter);
}

.paginare .page-numbers,
.paginare .wp-block-query-pagination-previous,
.paginare .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--antracit);
	font-weight: 500;
	text-decoration: none;
}

.paginare .page-numbers:hover,
.paginare .wp-block-query-pagination-previous:hover,
.paginare .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--jar-inchis);
}

/* Pagina pe care esti: nu e link, si se vede ca nu e */
.paginare .page-numbers.current {
	background: var(--wp--preset--color--antracit);
	border-color: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-weight: 600;
}

.paginare .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: auto;
	padding: 0 0.2rem;
}

/* --- Alege-ti modelul (inc/specificatii.php) ---
   Un control compact, langa pret: un rand inchis care spune pentru ce model e
   placa, si care se deschide in lista intreaga. `<details>` e nativ — merge
   fara JavaScript si se deschide si de la tastatura. */

.alege-modelul {
	margin-top: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 8px;
	background: var(--wp--preset--color--alb);
}

.alege-modelul__rand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	min-height: 56px;
	padding: 0.6rem 0.9rem;
	cursor: pointer;
	list-style: none;          /* Safari */
}

.alege-modelul__rand::-webkit-details-marker {
	display: none;             /* sageata proprie, aliniata cu textul */
}

.alege-modelul__acum {
	font-size: 1rem;
	color: var(--wp--preset--color--text-secundar);
}

.alege-modelul__acum strong {
	color: var(--wp--preset--color--antracit);
}

.alege-modelul__buton {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--jar);
	font-weight: 600;
	font-size: 1rem;
	white-space: nowrap;
}

.alege-modelul__buton svg {
	transition: transform 150ms ease;
}

.alege-modelul[open] .alege-modelul__buton svg {
	transform: rotate(180deg);
}

.alege-modelul__rand:hover .alege-modelul__buton,
.alege-modelul:focus-within .alege-modelul__buton {
	color: var(--wp--preset--color--jar-inchis);
}

.alege-modelul__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 0.9rem 0.9rem;
	border-top: 1px solid var(--wp--preset--color--bordura);
	padding-top: 0.9rem;
}

.alege-modelul__link,
.alege-modelul__acesta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.85rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.alege-modelul__link {
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--antracit);
	transition: border-color 150ms ease, color 150ms ease;
}

.alege-modelul__link:hover,
.alege-modelul__link:focus-visible {
	border-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--jar-inchis);
}

/* Modelul pe care esti deja: nu e link, si se vede ca nu e */
.alege-modelul__acesta {
	background: var(--wp--preset--color--antracit);
	border-color: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-weight: 600;
	cursor: default;
}

/* Pe telefon randul de deschidere se aseaza pe doua linii, iar lista se poate
   derula pe verticala fara sa impinga butonul de cumparare peste doua ecrane. */
@media (max-width: 600px) {
	.alege-modelul__rand {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
	}

	.alege-modelul__lista {
		max-height: 45vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* --- De unde vine piesa: originala sau compatibila (inc/specificatii.php) ---
   Chipul sta SUS-stanga, ca sa nu se bata cu eticheta de forma sau de turatie,
   care sta jos. Pe antracit, nu pe jar: e o dovada, nu un indemn — portocaliul
   ramane al butoanelor. */

.eticheta-origine {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.55rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--antracit);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--alb);
	pointer-events: none;
}

.eticheta-origine svg {
	flex: none;
	color: #7BD3A7;   /* verdele de "in stoc", limpezit ca sa se vada pe antracit */
}

/* Randul de langa pret, pe pagina de produs */
.origine-piesa {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin: var(--wp--preset--spacing--20) 0 0;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 8px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secundar);
}

.origine-piesa svg {
	flex: none;
	margin-top: 0.12rem;
	color: var(--wp--preset--color--text-secundar);
}

.origine-piesa strong {
	color: var(--wp--preset--color--antracit);
}

/* Piesa originala isi merita accentul: e argumentul cel mai greu de pe pagina */
.origine-piesa--originala {
	border-color: rgba(29, 138, 95, 0.35);
	background: rgba(29, 138, 95, 0.06);
}

.origine-piesa--originala svg,
.origine-piesa--originala strong {
	color: var(--wp--preset--color--stoc);
}

.eticheta-piesa {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.94);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--antracit);
	pointer-events: none;
}

.eticheta-piesa svg {
	flex: none;
	color: var(--wp--preset--color--text-secundar);
}

/* Imagine mereu patrata, indiferent de proportia originala */
.product-card__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
}

/* Zona numelui: inaltime fixa de exact 2 randuri; sub 2 randuri ramane
   spatiu gol (aliniere), peste 2 randuri se trunchiaza cu "...".
   Selectorul e dublat ca sa treaca si peste regulile WooCommerce din
   grila de piese asemanatoare, care pun `display: flow-root` pe titlu. */
.product-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	min-height: calc(1.3em * 2);
	max-height: calc(1.3em * 2);
	overflow: hidden;
}

/* Trunchierea sta pe link, nu pe titlu. Titlul e copil direct al cardului,
   care e flex — iar un element flex isi pierde `display: -webkit-box`
   (browserul il transforma in bloc), asa ca acolo `-webkit-line-clamp`
   nu are niciun efect si numele de trei randuri impingea pretul mai jos
   decat pe cardul de alaturi. Link-ul dinauntru nu e element flex. */
.product-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
}

.product-card__title a:hover {
	color: var(--wp--preset--color--jar);
}

.product-card__price {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

/* Bulina de stoc — aceeasi in grila si pe pagina de produs (functions.php).
   Punctul colorat da starea dintr-o privire, fara sa fie nevoie sa citesti. */
.stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-size: var(--wp--preset--font-size--mic);
	font-weight: 500;
	line-height: 1;
}

.stock-badge::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.stock-badge--stoc {
	color: var(--wp--preset--color--stoc);
}

.stock-badge--stoc-redus {
	color: var(--wp--preset--color--stoc-redus);
}

.stock-badge--epuizat {
	color: var(--wp--preset--color--epuizat);
}

.product-card__stock {
	margin: 0 0 var(--wp--preset--spacing--10);
}

/* Butonul se lipeste de baza cardului, pe toate cardurile din rand */
.product-card__button {
	margin-top: auto;
}

/* In grila `wp:query` butonul e un <a>, in product-collection e un <button>
   cu adaugare prin AJAX. Le prindem pe amandoua, cu specificitate suficienta
   cat sa treaca peste latimea automata pusa de WooCommerce. */
.product-card .product-card__button .wp-block-button__link,
.product-card .product-card__button > a,
.product-card .product-card__button > button {
	width: 100%;
	justify-content: center;
	min-height: 44px;
	display: flex;
	align-items: center;
	text-align: center;
}

/* Card compact pe mobil: 2 pe rand, fara scroll de un ecran per produs */
@media (max-width: 767px) {
	.product-card {
		padding: 0.75rem;
	}

	.product-card__title {
		font-family: var(--wp--preset--font-family--inter);
		font-weight: 500;
		font-size: 0.8125rem;
	}

	.product-card__price {
		font-size: 1.1875rem;
		font-weight: 700;
	}

	.product-card__stock {
		margin-bottom: 0.5rem;
	}

	.product-card .product-card__button .wp-block-button__link,
	.product-card .product-card__button > a,
	.product-card .product-card__button > button {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		font-size: 0.875rem;
	}
}

.search-empty {
	max-width: 480px;
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--40);
	text-align: center;
}

.search-empty__text {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
}

/* --- Banda de ajutor (patterns/banda-ajutor.php) ---
   Pe antracit, ca sa rupa sirul de sectiuni albe si sa opreasca ochiul
   exact acolo unde omul care nu a gasit piesa are nevoie de un telefon. */

.help-band {
	padding-block: var(--wp--preset--spacing--50);
}

.help-band__inner {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	text-align: center;
}

.help-band__inner > * {
	margin-block-start: 0;
}

.help-band__icon {
	display: block;
	margin: 0 auto var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--jar);
}

.help-band__title {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--alb);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
}

.help-band__text {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--mediu);
}

.help-band__cta {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.help-band__button .wp-block-button__link {
	font-size: var(--wp--preset--font-size--mediu);
	padding: 1rem 2rem;
	min-height: 44px;
}

/* Al doilea buton — telefonul. La fel de mare si de lizibil, dar fara
   portocaliu: e o alternativa pentru cine nu are WhatsApp, nu indemnul
   principal al benzii. */
.help-band__button--tacut .wp-block-button__link {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: var(--wp--preset--color--alb);
}

.help-band__button--tacut .wp-block-button__link:hover,
.help-band__button--tacut .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--alb);
}

.help-band__hours {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--mic);
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Pagina de categorie (templates/taxonomy-product_cat.html) — mobil-first
   ========================================================================== */

.category-header {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}

.category-header__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.category-header__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	color: var(--wp--preset--color--antracit);
}

.category-header__description {
	max-width: 70ch;
}

.category-header__description p {
	margin: 0;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
	line-height: 1.65;
}

/* Descrierile au acum mai multe paragrafe; fara asta se lipesc unul de altul. */
.category-header__description p + p {
	margin-top: 0.9rem;
}

/* --- Cotele tuturor pieselor din categorie (inc/specificatii.php) ---------
   Piesele dintr-o categorie arata aproape la fel in grila si nimeni nu
   deschide cinci pagini ca sa le compare. Pe telefon fiecare piesa e un card
   cu etichete langa cifre; pe ecran lat, un tabel adevarat.
   ========================================================================== */

.tabel-section {
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--bordura);
}

.tabel-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.tabel-piese__titlu {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--mare);
	color: var(--wp--preset--color--antracit);
}

.tabel-piese__intro {
	max-width: 60ch;
	margin: 0;
	font-size: var(--wp--preset--font-size--mediu);
	line-height: 1.65;
	color: var(--wp--preset--color--text-secundar);
}

.tabel-piese {
	margin-top: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	background-color: var(--wp--preset--color--alb);
	overflow: hidden;
}

.tabel-piese__cap {
	display: none;
}

.tabel-piese__rand {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.7rem 1rem;
	padding: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--bordura);
	text-decoration: none;
}

.tabel-piese__rand:first-of-type {
	border-top: 0;
}

.tabel-piese__rand:hover,
.tabel-piese__rand:focus-visible {
	background-color: var(--wp--preset--color--fundal);
}

.tabel-piese__nume {
	grid-column: 1 / -1;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--wp--preset--color--jar);
}

.tabel-piese__rand:hover .tabel-piese__nume {
	color: var(--wp--preset--color--jar-inchis);
}

.tabel-piese__sku {
	display: block;
	margin-top: 0.15rem;
	font-style: normal;
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-secundar);
}

.tabel-piese__rand > span {
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--wp--preset--color--antracit);
}

/* Eticheta cotei. Pe telefon sta deasupra cifrei, pe ecran lat o ia capul de tabel.
   Codul piesei e tot un <i>, dar sub nume, si nu se poarta ca o eticheta de coloana. */
.tabel-piese__rand > span:not(.tabel-piese__nume) i {
	display: block;
	margin-bottom: 0.1rem;
	font-style: normal;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secundar);
}

@media (min-width: 768px) {
	/* Prima coloana e numele, restul se impart egal — oricate ar fi */
	.tabel-piese__cap,
	.tabel-piese__rand {
		display: grid;
		grid-template-columns: minmax(0, 2.2fr);
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		gap: 1rem;
		align-items: baseline;
	}

	.tabel-piese__cap {
		padding: 0.7rem var(--wp--preset--spacing--20);
		background-color: var(--wp--preset--color--fundal);
		border-bottom: 1px solid var(--wp--preset--color--bordura);
		font-size: 0.75rem;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--wp--preset--color--text-secundar);
	}

	.tabel-piese__nume {
		grid-column: auto;
	}

	.tabel-piese__rand > span:not(.tabel-piese__nume) i {
		display: none;
	}
}

.category-nav-section {
	padding-block: 0 var(--wp--preset--spacing--30);
}

.category-nav-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.category-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
	transition: border-color 200ms ease, color 200ms ease;
}

.category-nav__link:hover {
	border-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--jar);
}

/* --- Sectiune incredere --- */

.trust-section {
	padding-block: var(--wp--preset--spacing--50);
}

.trust-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {
	.trust-section__inner {
		grid-template-columns: repeat(3, 1fr);
	}
}

.trust-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--fundal);
	color: var(--wp--preset--color--jar);
}

.trust-card__title {
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	line-height: 1.25;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

.trust-card__text {
	margin: 0;
	color: var(--wp--preset--color--text-secundar);
}

/* ==========================================================================
   Fir de navigare (pagina de produs, categorie, magazin)
   ========================================================================== */

.breadcrumbs-bar {
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	background: var(--wp--preset--color--fundal);
}

.breadcrumbs-bar__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 0.75rem var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.breadcrumbs-bar__inner::-webkit-scrollbar {
	display: none;
}

.breadcrumbs-bar a {
	color: var(--wp--preset--color--text-secundar);
	text-decoration: none;
}

.breadcrumbs-bar a:hover {
	color: var(--wp--preset--color--jar);
	text-decoration: underline;
}

/* ==========================================================================
   PAGINA DE PRODUS (templates/single-product.html)
   --------------------------------------------------------------------------
   Doua coloane pe desktop: fotografia ramane lipita (sticky) cat timp
   citesti panoul de cumparare din dreapta. Pe telefon totul curge pe o
   coloana, iar butonul de comanda revine intr-o bara fixa jos (produs.js).
   ========================================================================== */

.product-single {
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.product-single__layout {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 900px) {
	.product-single__layout {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}

	.product-single__media {
		position: sticky;
		top: 96px;
	}
}

/* --- Galeria --- */

.product-single__media .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

.product-single__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

.product-single__media .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.product-single__media .woocommerce-product-gallery__image {
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--alb);
}

.product-single__media .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.product-single__media .flex-control-thumbs li {
	flex: 0 0 calc(25% - 0.375rem);
}

.product-single__media .flex-control-thumbs img {
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 150ms ease, border-color 150ms ease;
}

.product-single__media .flex-control-thumbs img:hover,
.product-single__media .flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--wp--preset--color--jar);
}

/* --- Panoul de cumparare --- */

.product-buy__eyebrow {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secundar);
}

.product-buy__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.product-buy__eyebrow a:hover {
	color: var(--wp--preset--color--jar);
}

.product-buy__title {
	margin: 0.5rem 0 0.4rem;
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.25rem);
	line-height: 1.2;
	color: var(--wp--preset--color--antracit);
}

.product-buy__sku {
	margin: 0;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

.product-buy__price-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: var(--wp--preset--spacing--30);
}

.product-buy__price {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem);
	line-height: 1;
	color: var(--wp--preset--color--antracit);
}

.product-buy__vat {
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

.product-buy__stock {
	margin-top: 0.75rem;
	font-size: 1rem;
}

.product-buy__summary {
	margin-top: var(--wp--preset--spacing--30);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--wp--preset--color--antracit);
}

/* --- Cotele, langa buton (inc/specificatii.php) ---------------------------
   Cifrele dupa care se alege piesa stateau in fila "Detalii tehnice", la doua
   ecrane sub buton. Omul cu soba rece nu deruleaza pana acolo: ori vede acum
   ca i se potriveste, ori pleaca.
   ========================================================================== */

.product-specs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 1px;
	background-color: var(--wp--preset--color--bordura);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 8px;
	overflow: hidden;
}

/* Un numar impar de specificatii lasa ultima celula goala, si o caseta gri
   fara nimic in ea arata a greseala. Ultima se intinde pe toata latimea. */
.product-specs__item:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.product-specs__item {
	padding: 0.7rem 0.9rem;
	background-color: var(--wp--preset--color--alb);
}

.product-specs dt {
	margin: 0 0 0.15rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secundar);
}

.product-specs dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--wp--preset--color--antracit);
}

/* --- Formularul de comanda (WooCommerce) --- */

.product-buy form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--bordura);
}

.product-buy .quantity {
	display: flex;
}

.product-buy .quantity .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.product-buy .quantity input.qty {
	width: 88px;
	min-height: 56px;
	padding: 0 0.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
}

.product-buy .single_add_to_cart_button {
	flex: 1 1 240px;
	min-height: 56px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 150ms ease;
}

.product-buy .single_add_to_cart_button:hover {
	background: var(--wp--preset--color--jar-inchis);
}

.product-buy .single_add_to_cart_button.disabled,
.product-buy .single_add_to_cart_button:disabled {
	background: var(--wp--preset--color--text-secundar);
	cursor: not-allowed;
}

.product-buy .stock.out-of-stock {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--bordura);
	color: var(--wp--preset--color--epuizat);
	font-weight: 600;
}

/* --- Cele trei garantii de sub buton --- */

.product-buy__assurances {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}

.product-buy__assurances li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--text-secundar);
}

.product-buy__assurances svg {
	flex: none;
	margin-top: 1px;
	color: var(--wp--preset--color--jar);
}

.product-buy__assurances strong {
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
}

/* --- Cutia de ajutor: raspunsul la singura intrebare care blocheaza comanda --- */

.product-help {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	background: var(--wp--preset--color--fundal);
}

.product-help__title {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--antracit);
}

.product-help__text {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-secundar);
}

/* Trimite in jos, la cote si la lista de aparate — nu la telefon. Omul care
   are cifrele in fata isi raspunde singur, si asta e si mai rapid pentru el. */
.product-help__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	color: var(--wp--preset--color--jar);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.product-help__link:hover,
.product-help__link:focus-visible {
	color: var(--wp--preset--color--jar-inchis);
	border-bottom-color: currentColor;
}

/* --- Descrierea completa --- */

.product-details-section {
	/* Antetul e lipit sus; fara asta, saritura la #detalii ar ascunde titlul
	   sectiunii sub el. */
	scroll-margin-top: 90px;
	padding-block: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--bordura);
}

.product-details-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.product-details-section .wp-block-woocommerce-product-details {
	max-width: 76ch;
}

.product-details-section .wc-tabs {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
}

.product-details-section .wc-tabs li a {
	display: inline-block;
	padding-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--text-secundar);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 transparent;
}

.product-details-section .wc-tabs li.active a,
.product-details-section .wc-tabs li a:hover {
	color: var(--wp--preset--color--antracit);
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
}

.product-details-section h2,
.product-details-section h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--mare);
	color: var(--wp--preset--color--antracit);
}

.product-details-section p {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

.product-details-section p:last-child {
	margin-bottom: 0;
}

.product-details-section .shop_attributes th {
	text-align: left;
	padding: 0.6rem 1.5rem 0.6rem 0;
	color: var(--wp--preset--color--text-secundar);
	font-weight: 500;
}

.product-details-section .shop_attributes td {
	padding: 0.6rem 0;
	color: var(--wp--preset--color--antracit);
}

/* WooCommerce scrie valorile atributelor in cursiv. Nicaieri altundeva pe site
   nu apare cursivul, iar aici cad tocmai cotele — cifrele care conteaza. */
.product-details-section .shop_attributes td p {
	margin: 0;
	font-style: normal;
}

/* Listele din descriere mosteneau stilul browserului: alt corp de litera si
   alt gri decat paragrafele de langa ele. */
.product-details-section ul,
.product-details-section ol {
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-left: 1.35rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

.product-details-section li {
	margin-bottom: 0.4rem;
}

/* Lista aparatelor pe care se monteaza piesa. E cel mai convingator lucru de
   pe pagina — omul isi cauta marca sobei in ea — deci se citeste ca un tabel,
   nu ca un morman de buline. Pe telefon o coloana, pe ecran lat doua. */
.product-details-section .lista-compatibile {
	list-style: none;
	padding-left: 0;
	columns: 1;
	column-gap: var(--wp--preset--spacing--30);
}

.product-details-section .lista-compatibile li {
	break-inside: avoid;
	margin-bottom: 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
}

.product-details-section .lista-compatibile strong {
	font-weight: 600;
}

/* Modelele, sub numele marcii: multe si marunte, nu trebuie sa concureze cu ea */
.product-details-section .lista-compatibile span {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secundar);
}

/* Codurile pieselor originale. Omul are piesa veche in mana, cu un cod
   stantat pe ea; daca il cauta, trebuie sa dea de pagina asta. */
.product-details-section .coduri-oem {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	padding-left: 0;
}

.product-details-section .coduri-oem li {
	margin-bottom: 0;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 4px;
	background-color: var(--wp--preset--color--alb);
	font-size: 0.9375rem;
	letter-spacing: 0.02em;
}

/* --- Rezultatele care apar sub bara, in timp ce omul scrie ---
   (assets/js/cautare-vie.js, inc/cautare-vie.php)

   Panoul se aseaza PESTE pagina, nu in ea: nimic din ce e dedesubt nu se
   misca in timp ce omul scrie. La un om care tocmai a intins degetul spre un
   buton, o pagina care sare sub deget e mai rea decat una care nu raspunde.

   Randurile sunt mari dinadins — poza, nume, pret, stoc — cat un card de
   produs mic. Un meniu cu randuri subtiri de text ar fi fost mai elegant si
   inutilizabil pentru cine tine telefonul la o palma de ochi. */

/* Sta in <body>, nu in formular: zona de deschidere isi taie ce iese din ea
   (are un simbol decorativ care depaseste marginile dinadins), si ar fi taiat
   si lista. Locul si latimea vin din JS, socotite fata de bara de cautare —
   in coordonate de pagina, deci raman bune si dupa derulare, fara sa fie
   nevoie sa le calculam iar la fiecare miscare a degetului. */
.cautare-vie__panou {
	position: absolute;
	z-index: 60;
	/* Latimea vine din JS si e cea a barei; bordura trebuie sa intre in ea,
	   altfel panoul iese cu doi pixeli in dreapta. */
	box-sizing: border-box;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	background: var(--wp--preset--color--alb);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(31, 35, 40, 0.18);
	overscroll-behavior: contain;
	text-align: left;
}

.cautare-vie__rezultat {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	text-decoration: none;
	color: inherit;
}

.cautare-vie__rezultat:last-of-type {
	border-bottom: 0;
}

/* Aceeasi evidentiere si la deget, si la mouse, si la sagetile de pe
   tastatura — ca sa nu existe doua feluri de „randul asta e ales" */
.cautare-vie__rezultat:hover,
.cautare-vie__rezultat.este-ales,
.cautare-vie__toate:hover,
.cautare-vie__toate.este-ales {
	background: var(--wp--preset--color--fundal);
}

.cautare-vie__poza {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	object-fit: contain;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	background: var(--wp--preset--color--alb);
}

.cautare-vie__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

/* Doua randuri, cat titlul de pe card. Al treilea ar impinge pretul afara. */
.cautare-vie__nume {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--wp--preset--color--antracit);
}

/* Partea potrivita cu ce a scris omul. Ingrosata, nu colorata: portocaliul e
   pentru actiune, iar aici nu se apasa nimic. */
.cautare-vie__nume strong {
	font-weight: 600;
	background: rgba(224, 85, 19, 0.12);
	border-radius: 2px;
}

.cautare-vie__jos {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.2rem 0.6rem;
}

.cautare-vie__pret {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

.cautare-vie__stoc {
	font-size: 0.8125rem;
}

.cautare-vie__stoc--stoc {
	color: var(--wp--preset--color--stoc);
}

.cautare-vie__stoc--stoc-redus {
	color: var(--wp--preset--color--stoc-redus);
}

.cautare-vie__stoc--epuizat {
	color: var(--wp--preset--color--epuizat);
}

/* Ultimul rand: cate sunt in total. Fara el, cine vede sase piese nu stie daca
   alea sunt toate sau doar inceputul. */
.cautare-vie__toate {
	display: block;
	min-height: 44px;
	padding: 0.85rem var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--bordura);
	background: var(--wp--preset--color--fundal);
	font-weight: 600;
	color: var(--wp--preset--color--jar);
	text-decoration: none;
}

.cautare-vie__mesaj {
	margin: 0;
	padding: 0.9rem var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--text-secundar);
}

.cautare-vie__gol {
	padding: var(--wp--preset--spacing--20);
}

.cautare-vie__gol-titlu {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

.cautare-vie__gol-text {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secundar);
}

.cautare-vie__gol-actiuni {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
}

.cautare-vie__gol-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.9rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
}

.cautare-vie__gol-link:hover {
	border-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--jar);
}

/* Mentiunea ca piesa nu e originala: corecta si obligatorie, dar nu striga */
.product-details-section p.nota-marci {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secundar);
}

/* --- Lista lunga de compatibilitate, stransa intr-un <details> ---

   Display-urile si cablul intra pe cateva sute de modele, de la vreo douazeci
   de marci. E cea mai buna informatie din magazin si trebuie sa fie in pagina —
   si pentru cautarea de pe site, si pentru Google — dar desfasurata ar ingropa
   restul descrierii sub un perete de nume.

   <details> nativ, ca la intrebarile frecvente: merge fara JavaScript, se
   deschide cu tastatura si ramane in pagina si inchis. Rezumatul spune de la
   inceput cat e de lunga, ca omul sa stie ce deschide. */

.product-details-section .compatibilitate {
	margin-bottom: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	background-color: var(--wp--preset--color--alb);
}

.product-details-section .compatibilitate > summary {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.75rem var(--wp--preset--spacing--20);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--antracit);
	cursor: pointer;
	list-style: none;
}

.product-details-section .compatibilitate > summary::-webkit-details-marker {
	display: none;
}

/* Sageata desenata din chenar: se roteste cand se deschide, fara nicio poza */
.product-details-section .compatibilitate > summary::before {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.2rem;
	border-right: 2px solid var(--wp--preset--color--jar);
	border-bottom: 2px solid var(--wp--preset--color--jar);
	transform: rotate(-45deg);
	transition: transform 0.15s ease;
}

.product-details-section .compatibilitate[open] > summary::before {
	transform: rotate(45deg);
}

.product-details-section .compatibilitate > summary:hover {
	background-color: var(--wp--preset--color--fundal);
}

.product-details-section .compatibilitate__continut {
	padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--bordura);
}

.product-details-section .compatibilitate ul {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-left: 0;
	list-style: none;
}

/* O marca pe rand, despartita de o linie: se citeste ca o lista de nume,
   nu ca un paragraf lung */
.product-details-section .compatibilitate li {
	margin: 0;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secundar);
}

.product-details-section .compatibilitate li:last-of-type {
	border-bottom: 0;
}

.product-details-section .compatibilitate li strong {
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

/* Codul de fabrica, langa numele marcii: se cauta dupa el, deci se vede */
.product-details-section .compatibilitate li i {
	font-style: normal;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-secundar);
}

@media (min-width: 600px) {
	.product-details-section .lista-compatibile {
		columns: 2;
	}
}

/* --- Bara de comanda lipita jos, pe telefon (assets/js/produs.js) --- */

.buy-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	display: none;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem var(--wp--preset--spacing--20);
	padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px));
	background: var(--wp--preset--color--alb);
	border-top: 1px solid var(--wp--preset--color--bordura);
	box-shadow: 0 -6px 20px rgba(31, 35, 40, 0.08);
}

.buy-bar.is-visible {
	display: flex;
}

@media (min-width: 768px) {
	.buy-bar {
		display: none !important;
	}
}

.buy-bar__price {
	flex: none;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--wp--preset--color--antracit);
	white-space: nowrap;
}

.buy-bar__button {
	flex: 1;
	min-height: 48px;
	padding: 0 1rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
}

.buy-bar__button:hover {
	background: var(--wp--preset--color--jar-inchis);
}

/* ==========================================================================
   Bulina WhatsApp (parts/footer.html)
   Verdele e cel al aplicatiei, se recunoaste instant. Cand bara de comanda
   e pe ecran, bulina urca deasupra ei, ca sa nu acopere niciodata butonul
   de adaugare in cos.
   ========================================================================== */

.whatsapp-bubble {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 95;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 16px rgba(31, 35, 40, 0.25);
	transition: transform 200ms ease, box-shadow 200ms ease, bottom 200ms ease;
}

.whatsapp-bubble:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(31, 35, 40, 0.3);
}

body.has-buy-bar .whatsapp-bubble {
	bottom: calc(16px + 72px);
}

/* Din cos incolo bulina dispare — vezi body_class in functions.php.
   `display: none`, nu transparenta: acolo nu vrem nici sa fie apasabila din
   greseala. */
body.fara-whatsapp .whatsapp-bubble {
	display: none;
}

@media (min-width: 768px) {
	.whatsapp-bubble {
		right: 24px;
		bottom: 24px;
		width: 56px;
		height: 56px;
	}
}

/* ==========================================================================
   Banda de siguranta (cos, finalizare comanda)
   ========================================================================== */

.safety-band {
	margin-top: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--bordura);
	background: var(--wp--preset--color--fundal);
}

.safety-band__inner {
	list-style: none;
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: var(--wp--preset--spacing--20);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem 1.25rem;
}

@media (min-width: 768px) {
	.safety-band__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

.safety-band__inner li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--wp--preset--color--text-secundar);
}

.safety-band__inner svg {
	flex: none;
	color: var(--wp--preset--color--antracit);
	opacity: 0.7;
}

/* ==========================================================================
   Pagini de magazin: cos, finalizare comanda, contul meu, pagini simple, 404
   ========================================================================== */

.shop-page {
	padding-block: var(--wp--preset--spacing--40) 0;
}

.shop-page__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--50);
}

.shop-page__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	color: var(--wp--preset--color--antracit);
}

.shop-page__inner .alignwide,
.shop-page__inner .alignfull {
	max-width: 100%;
	margin-inline: 0;
}

/* Butoanele blocurilor WooCommerce (cos, finalizare, cont): aceeasi culoare
   si aceeasi inaltime de atingere ca in restul site-ului. */
.shop-page .wc-block-components-button:not(.is-link),
.shop-page .woocommerce-button,
.shop-page .button {
	min-height: 48px;
	border-radius: 6px;
	background-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	border: 0;
	cursor: pointer;
}

.shop-page .wc-block-components-button:not(.is-link):hover,
.shop-page .woocommerce-button:hover,
.shop-page .button:hover {
	background-color: var(--wp--preset--color--jar-inchis);
	color: var(--wp--preset--color--alb);
}

.shop-page .wc-block-components-text-input input,
.shop-page .wc-block-components-textarea,
.shop-page input[type="text"],
.shop-page input[type="email"],
.shop-page input[type="tel"],
.shop-page input[type="password"],
.shop-page select {
	min-height: 48px;
	border-radius: 6px;
	border-color: var(--wp--preset--color--bordura);
	font-size: 1rem;
}

.shop-page .wc-block-components-title,
.shop-page .wc-block-components-checkout-step__title,
.shop-page .wc-block-cart__empty-cart__title {
	font-family: var(--wp--preset--font-family--barlow);
	color: var(--wp--preset--color--antracit);
}

/* Contul meu (shortcode) */
.shop-page .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.shop-page .woocommerce-MyAccount-navigation ul li a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 999px;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--mic);
}

.shop-page .woocommerce-MyAccount-navigation ul li.is-active a,
.shop-page .woocommerce-MyAccount-navigation ul li a:hover {
	border-color: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--jar);
}

@media (min-width: 900px) {
	.shop-page .woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
		align-items: start;
	}

	.shop-page .woocommerce-MyAccount-navigation ul {
		flex-direction: column;
		margin-bottom: 0;
	}
}

/* --- Pagina 404 --- */

.error-page {
	max-width: 640px;
	text-align: center;
	padding-block: var(--wp--preset--spacing--40);
}

.error-page__text {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--text-secundar);
}

.error-page .search-again {
	margin-inline: auto;
}

/* ==========================================================================
   Cautarea din pagina de rezultate si din 404
   ========================================================================== */

.search-again {
	position: relative;
	display: flex;
	gap: 0.5rem;
	max-width: 520px;
	margin-top: var(--wp--preset--spacing--30);
}

.search-again__input {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	padding: 0 1rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	color: var(--wp--preset--color--antracit);
	background: var(--wp--preset--color--alb);
}

.search-again__input:focus {
	outline: none;
	border-color: var(--wp--preset--color--jar);
	box-shadow: 0 0 0 3px rgba(224, 85, 19, 0.18);
}

.search-again__button {
	flex: none;
	min-height: 48px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.search-again__button:hover {
	background: var(--wp--preset--color--jar);
}

/* ==========================================================================
   Detalii de finisaj
   ========================================================================== */

/* Cautari frecvente sub bara de cautare din zona de deschidere. Ascunse pe
   ecranele foarte mici, ca zona de deschidere sa ramana scurta. */
.hero__suggestions {
	display: none;
}

@media (min-width: 600px) {
	.hero__suggestions {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.4rem 0.85rem;
		margin: var(--wp--preset--spacing--20) 0 0;
		font-size: var(--wp--preset--font-size--mic);
	}

	.hero__suggestions-label {
		color: rgba(255, 255, 255, 0.6);
	}

	.hero__suggestions a {
		color: var(--wp--preset--color--alb);
		text-decoration: none;
		box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.35);
		transition: box-shadow 150ms ease;
	}

	.hero__suggestions a:hover {
		box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
	}
}

/* Cardul se ridica usor sub cursor: semnal ca e apasabil, fara zgomot. */
.product-card,
.category-card {
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

@media (hover: hover) {
	.product-card:hover {
		border-color: #d5d2cc;
		box-shadow: 0 10px 26px rgba(31, 35, 40, 0.09);
		transform: translateY(-2px);
	}

	.category-card:hover {
		transform: translateY(-2px);
	}
}

/* Un contur vizibil la navigarea din tastatura. O buna parte din public are
   peste 70 de ani; conturul implicit al browserului e prea discret. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--jar);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* Banda de jos a subsolului */
.site-footer__bottom-inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	text-align: center;
}

@media (min-width: 768px) {
	.site-footer__bottom-inner {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}
}

.site-footer__legal {
	margin: 0;
	font-size: var(--wp--preset--font-size--mic);
	color: rgba(255, 255, 255, 0.55);
}

/* Textul introductiv de pe pagina "Toate piesele" */
.category-header__lead {
	max-width: 70ch;
	margin: 0;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
}

/* ==========================================================================
   Pagini de continut: Contact, Despre noi
   ========================================================================== */

.shop-page__inner .entry-content > .pagina-lead {
	max-width: 60ch;
	margin-top: 0;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 500;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
	line-height: 1.4;
	color: var(--wp--preset--color--antracit);
}

/* Doar textul scris in editor, nu si paragrafele din componentele proprii. */
.shop-page__inner .entry-content > p {
	max-width: 68ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

.shop-page__inner .entry-content > h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--mare);
	color: var(--wp--preset--color--antracit);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
	margin-block: var(--wp--preset--spacing--40);
}

@media (min-width: 700px) {
	.contact-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.contact-card {
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 12px;
	background: var(--wp--preset--color--alb);
}

.contact-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--fundal);
	color: var(--wp--preset--color--jar);
}

.contact-card__title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

.contact-card__value {
	display: inline-block;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.25;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
}

.contact-card__value:hover {
	color: var(--wp--preset--color--jar);
}

.contact-card__note {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

.contact-note {
	max-width: 68ch;
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--jar);
	background: var(--wp--preset--color--fundal);
	border-radius: 0 10px 10px 0;
}

.contact-note__title {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

.contact-note p {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--antracit);
}

.contact-note p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Cosul gol
   ========================================================================== */

.shop-page .cart-empty__text {
	max-width: 46ch;
	margin-inline: auto;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
}

.shop-page .cart-empty__cta {
	margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.shop-page .cart-empty__cta .wp-block-button__link {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

.shop-page .cart-empty__cta .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--antracit);
}

.shop-page .cart-empty__cta .is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
}

.shop-page .cart-empty__heading {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--mare);
	color: var(--wp--preset--color--antracit);
}

/* Titlul implicit al cosului gol vine cu o iconita mare de fundal — o scoatem,
   ca sa ramana doar mesajul, la fel ca in restul site-ului. */
.shop-page .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	display: none;
}

/* Disponibilitatea scrisa de WooCommerce sub descriere ("12 in stoc") spune
   acelasi lucru ca bulina colorata de deasupra. Pastram doar bulina; mesajul
   de "epuizat" ramane vizibil, pentru ca acolo conteaza. */
.product-buy p.stock.in-stock {
	display: none;
}

/* Grila ingusta: recomandarile din cos stau intr-o coloana, nu pe toata
   latimea paginii, deci se opresc la trei carduri pe rand. */
@media (min-width: 1024px) {
	.products-grid--ingusta .wp-block-woocommerce-product-template,
	.products-grid--ingusta .wp-block-woocommerce-product-template.is-flex-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

.cart-crosssell__title {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

/* Bulina statea ascunsa cat timp omul derula in jos, ca sa nu acopere
   butoanele „Adauga in cos". Utilizatorul a cerut sa ramana tot timpul la
   vedere, si are dreptate: o cale de contact care dispare exact cand omul
   cauta ceva nu e o cale de contact.

   Suprapunerea ramane o problema reala pe telefon — bulina sta in coltul din
   dreapta-jos, iar butoanele cardurilor trec pe sub ea. E imblanzita in doua
   feluri: bulina e mai mica pe telefon, si grila are loc liber sub ultimul
   rand. Cine nimereste totusi bulina in loc de buton deschide WhatsApp, nu
   cumpara gresit — deci greseala e reversibila, spre deosebire de invers. */
@media (max-width: 767px) {

	/* Cat timp lista de rezultate e deschisa, bulina se retrage — la fel ca la
	   derulare, si din acelasi motiv. Pe telefon, coltul din dreapta-jos cade
	   fix peste al patrulea rand din lista: omul ar apasa pe piesa si ar
	   deschide WhatsApp. Nu doar culoarea o ascunde, ci si `pointer-events`,
	   fiindca degetul e mai lat decat pixelii.
	   Pe ecran mare nu se intampla: lista are latimea barei si ramane departe
	   de coltul in care sta bulina. */
	body.cauta-acum .whatsapp-bubble {
		transform: translateY(160%);
		opacity: 0;
		pointer-events: none;
	}
}

/* ==========================================================================
   CE S-A STRICAT — diagnostic dupa simptom (patterns/diagnostic.php)
   --------------------------------------------------------------------------
   Cardul intreg e link, nu doar textul de la baza: pe telefon, o tinta de
   atingere de doua randuri e mult mai usor de nimerit decat un cuvant.
   ========================================================================== */

.diagnostic-section {
	padding-block: var(--wp--preset--spacing--50);
}

.diagnostic-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.diagnostic-section__inner > * {
	margin-block-start: 0;
}

.diagnostic-section__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	color: var(--wp--preset--color--antracit);
	text-align: center;
}

.diagnostic-section__subtitle {
	margin: 0 auto var(--wp--preset--spacing--40);
	max-width: 52ch;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
	text-align: center;
}

.diagnostic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--20);
}

@media (min-width: 700px) {
	.diagnostic-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.diagnostic-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.diagnostic-card {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 12px;
	background: var(--wp--preset--color--alb);
	text-decoration: none;
	transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

@media (hover: hover) {
	.diagnostic-card:hover {
		border-color: var(--wp--preset--color--jar);
		box-shadow: 0 10px 26px rgba(31, 35, 40, 0.09);
		transform: translateY(-2px);
	}
}

.diagnostic-card__symptom {
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--wp--preset--color--antracit);
}

.diagnostic-card__text {
	flex: 1;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secundar);
}

/* Sageata e pusa din CSS ca sa nu ajunga in textul citit cu voce tare */
.diagnostic-card__link {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--jar);
}

.diagnostic-card__link::after {
	content: "\2192";
	display: inline-block;
	margin-left: 0.35em;
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.diagnostic-card:hover .diagnostic-card__link::after {
		transform: translateX(3px);
	}
}

.diagnostic-section__note {
	margin: var(--wp--preset--spacing--40) 0 0;
	text-align: center;
	color: var(--wp--preset--color--text-secundar);
	font-size: var(--wp--preset--font-size--mediu);
}

.diagnostic-section__note a {
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
}

.diagnostic-section__note a:hover {
	color: var(--wp--preset--color--jar);
}

/* ==========================================================================
   CUM COMANZI — trei pasi (patterns/cum-comanzi.php)
   ========================================================================== */

.steps-section {
	padding-block: var(--wp--preset--spacing--50);
}

.steps-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.steps-section__inner > * {
	margin-block-start: 0;
}

.steps-section__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	color: var(--wp--preset--color--antracit);
	text-align: center;
}

.steps-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 768px) {
	.steps-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--wp--preset--spacing--40);
	}
}

.step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--20);
	border-radius: 50%;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1;
}

.step__title {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mediu);
	line-height: 1.25;
	color: var(--wp--preset--color--antracit);
}

.step__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--wp--preset--color--text-secundar);
}

.step__text a {
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--jar);
}

.step__text a:hover {
	color: var(--wp--preset--color--jar);
}

/* ==========================================================================
   INTREBARI FRECVENTE (patterns/intrebari-frecvente.php)
   Deschidere nativa, cu <details> — fara JavaScript.
   ========================================================================== */

.faq-section {
	padding-block: var(--wp--preset--spacing--50);
}

.faq-section__inner {
	max-width: 820px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.faq-section__inner > * {
	margin-block-start: 0;
}

.faq-section__title {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
	color: var(--wp--preset--color--antracit);
	text-align: center;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-item {
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	background: var(--wp--preset--color--alb);
	overflow: hidden;
}

.faq-item[open] {
	border-color: #d5d2cc;
}

.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 0.875rem var(--wp--preset--spacing--20);
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--wp--preset--color--antracit);
}

/* Triunghiul implicit al browserului, inlocuit cu un plus care devine minus */
.faq-item__q::-webkit-details-marker {
	display: none;
}

.faq-item__q::after {
	content: "";
	flex: none;
	width: 14px;
	height: 14px;
	background:
		linear-gradient(var(--wp--preset--color--jar), var(--wp--preset--color--jar)) center / 14px 2px no-repeat,
		linear-gradient(var(--wp--preset--color--jar), var(--wp--preset--color--jar)) center / 2px 14px no-repeat;
}

/* Deschis: ramane doar bara orizontala, adica un minus */
.faq-item[open] .faq-item__q::after {
	background:
		linear-gradient(var(--wp--preset--color--jar), var(--wp--preset--color--jar)) center / 14px 2px no-repeat;
}

.faq-item__q:hover {
	color: var(--wp--preset--color--jar);
}

.faq-item__a {
	padding: 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
}

.faq-item__a p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-secundar);
}

/* ==========================================================================
   Pagini legale (termeni, retur, confidentialitate, cookie-uri)
   ========================================================================== */

.shop-page__inner .entry-content > h3 {
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: 0.5rem;
	font-size: var(--wp--preset--font-size--mediu);
	color: var(--wp--preset--color--antracit);
}

.shop-page__inner .entry-content > ul,
.shop-page__inner .entry-content > ol {
	max-width: 68ch;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding-left: 1.35rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

.shop-page__inner .entry-content > ul > li,
.shop-page__inner .entry-content > ol > li {
	margin-bottom: 0.4rem;
}

.shop-page__inner .entry-content > ul > li::marker,
.shop-page__inner .entry-content > ol > li::marker {
	color: var(--wp--preset--color--jar);
}

.shop-page__inner code {
	padding: 0.1em 0.35em;
	border-radius: 3px;
	background: var(--wp--preset--color--fundal);
	font-size: 0.9em;
	word-break: break-word;
}

.shop-page__inner .entry-content > p a,
.shop-page__inner .entry-content > ul a,
.shop-page__inner .entry-content > ol a {
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 var(--wp--preset--color--jar);
}

.shop-page__inner .entry-content > p a:hover,
.shop-page__inner .entry-content > ul a:hover,
.shop-page__inner .entry-content > ol a:hover {
	color: var(--wp--preset--color--jar);
}

/* Locurile din textele legale unde mai trebuie completat ceva. Deliberat
   tipatoare: daca pagina ajunge publica cu ele inauntru, se vede imediat. */
.de-completat {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px dashed var(--wp--preset--color--epuizat);
	border-radius: 4px;
	background: #fdf3f2;
	color: var(--wp--preset--color--epuizat);
	font-size: 0.9375rem;
	font-weight: 500;
}

/* Modelul de formular de retragere, din Politica de retur */
.formular-retragere {
	max-width: 68ch;
	margin-block: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 10px;
	background: var(--wp--preset--color--fundal);
}

.formular-retragere p {
	margin: 0 0 0.85rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

.formular-retragere p:last-child {
	margin-bottom: 0;
}

/* Identificarea firmei in subsol — ceruta de Legea 365/2002 privind
   comertul electronic. Discreta, dar prezenta pe fiecare pagina. */
.site-footer__firma {
	max-width: 1240px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) 0;
}

.site-footer__firma p {
	margin: 0;
	font-size: var(--wp--preset--font-size--mic);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
	.site-footer__firma {
		padding-inline: var(--wp--preset--spacing--30);
	}
}

/* Link-ul "Sari la continut" e livrat de WordPress pentru temele de blocuri
   si tinteste `<main id="continut">`. Noi ii dam doar infatisarea: ascuns pana
   la prima apasare de Tab, apoi vizibil in coltul din stanga sus. Fara el,
   cine navigheaza din tastatura trece prin tot antetul, pe fiecare pagina. */
body .skip-link,
body .skip-link.screen-reader-text {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 200;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border-radius: 0 0 6px 6px;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: top 150ms ease;
}

/* `screen-reader-text` decupeaza elementul la 1x1 px; la focus il aducem inapoi.
   Prefixul `body` nu e cosmetic: WordPress trimite propriul stil pentru acest
   link, cu aceeasi specificitate si mai tarziu in pagina. Fara el, castiga
   varianta implicita si link-ul apare ca o casuta alba, nu ca a noastra. */
body .skip-link:focus,
body .skip-link.screen-reader-text:focus {
	top: 0;
	left: 12px;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	/* Infatisarea se repeta aici, nu doar in regula de baza: stilul implicit al
	   WordPress-ului se aplica tot pe `:focus`, deci ar castiga la fundal si la
	   culoare si am ramane cu o casuta alba peste antetul nostru. */
	padding: 0 1.25rem;
	border-radius: 0 0 6px 6px;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 1rem;
	font-weight: 600;
	line-height: 44px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(31, 35, 40, 0.25);
}

/* ==========================================================================
   DUPA COMANDA (templates/order-confirmation.html)
   --------------------------------------------------------------------------
   E momentul cu cea mai multa nesiguranta din tot magazinul: omul tocmai a
   dat bani unui site pe care il vede prima oara. De aceea pagina raspunde,
   in ordine, la singurele trei intrebari care conteaza acum: a mers?, ce
   urmeaza?, pe cine sun daca m-am razgandit?
   ========================================================================== */

.order-done {
	max-width: 780px;
}

.order-done > * {
	margin-block-start: 0;
}

.order-done__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--wp--preset--spacing--30);
	border-radius: 50%;
	background: rgba(29, 138, 95, 0.1);
	color: var(--wp--preset--color--stoc);
}

/* Blocul WooCommerce scoate un <h1> cu starea comenzii si un paragraf sub el;
   le dam ierarhie, ca sa nu para doua titluri unul sub altul. */
.order-done__status {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.order-done__status h1 {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.25rem);
	line-height: 1.2;
	color: var(--wp--preset--color--antracit);
}

.order-done__status p {
	margin: 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--mediu);
	line-height: 1.6;
	color: var(--wp--preset--color--text-secundar);
}

.order-done__status strong {
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
}

/* --- Cei trei pasi care urmeaza --- */

.order-next {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 12px;
	background: var(--wp--preset--color--alb);
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.order-next__step {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
}

.order-next__number {
	flex: none;
	margin-top: 1px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--wp--preset--color--fundal);
	color: var(--wp--preset--color--antracit);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
}

.order-next__title {
	margin: 0 0 0.25rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--wp--preset--color--antracit);
}

.order-next__text {
	margin: 0;
	max-width: 60ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secundar);
}

/* --- Cutia cu telefonul --- */

.order-done__help {
	margin-bottom: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--jar);
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--fundal);
}

.order-done__help-text {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--wp--preset--color--antracit);
}

.order-done__help-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--antracit);
	border-radius: 6px;
	background: var(--wp--preset--color--alb);
	color: var(--wp--preset--color--antracit);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	box-shadow: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.order-done__help-button:hover {
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
}

.order-done__help-hours {
	margin: 0.6rem 0 0;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

/* --- Detaliile comenzii, sub confirmare --- */

.order-done__heading {
	margin: var(--wp--preset--spacing--40) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--mare);
	color: var(--wp--preset--color--antracit);
}

.order-done .wc-block-order-confirmation-summary {
	margin-bottom: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 12px;
	background: var(--wp--preset--color--alb);
}

.order-done table {
	width: 100%;
	border-collapse: collapse;
}

/* Randurile respira.
   Aveau `padding: 0.75rem 0` — zero pe orizontala — asa ca numele piesei si
   pretul se atingeau, si un nume lung se lipea de cifre. Acum au un rand de
   spatiu intre ele, si fiecare rand e mai inalt. */
.order-done table th,
.order-done table td {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	text-align: left;
	font-size: 1rem;
	line-height: 1.5;
	vertical-align: top;
}

/* Marginile raman lipite de marginea cartonasului, ca randurile sa se
   alinieze cu restul paginii. Spatiul se adauga doar intre coloane. */
.order-done table th:first-child,
.order-done table td:first-child {
	padding-left: 0;
}

/* Coloana cu bani: lipita dreapta, si niciodata rupta in doua randuri.
   „1.100,00 lei" taiat dupa virgula e exact felul de detaliu care face omul
   sa se uite a doua oara la o pagina unde tocmai a dat bani. */
.order-done table th:last-child,
.order-done table td:last-child {
	padding-right: 0;
	text-align: right;
	white-space: nowrap;
}

.order-done table th {
	color: var(--wp--preset--color--text-secundar);
	font-weight: 500;
}

/* Numele piesei, cand se intinde pe doua randuri, nu trebuie sa para alt rand
   din tabel. */
.order-done table td:first-child {
	color: var(--wp--preset--color--antracit);
	font-weight: 500;
}

/* Cantitatea sta sub nume, nu lipita de el. */
.order-done table .wc-block-components-product-metadata,
.order-done table .product-quantity {
	display: block;
	margin-top: 0.3rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--mic);
	color: var(--wp--preset--color--text-secundar);
}

/* Pe telefon latimea e putina: strangem spatiul dintre coloane, dar nu-l
   scoatem de tot. */
@media (max-width: 600px) {
	.order-done table th,
	.order-done table td {
		padding: 0.875rem 0.75rem;
		font-size: 0.9375rem;
	}
}

.order-done table tfoot tr:last-child th,
.order-done table tfoot tr:last-child td {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--antracit);
}

.order-done__addresses {
	margin-top: var(--wp--preset--spacing--30);
	gap: var(--wp--preset--spacing--40);
}

.order-done address {
	font-style: normal;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--antracit);
}

/* ==========================================================================
   Respiratia paginii pe telefon
   --------------------------------------------------------------------------
   Spatierea intre sectiuni e gandita pentru desktop: 4rem sus si 4rem jos,
   adica 8rem intre doua sectiuni. Pe un ecran de 390px inseamna ca aproape
   un sfert de ecran e gol la fiecare trecere, si omul deruleaza degeaba.
   Le stramtam pe telefon, pastrand aceeasi ierarhie.
   ========================================================================== */

@media (max-width: 767px) {
	.categories-section,
	.diagnostic-section,
	.products-section,
	.steps-section,
	.faq-section,
	.help-band,
	.trust-section,
	.product-details-section,
	.tabel-section {
		padding-block: var(--wp--preset--spacing--40);
	}

	.category-header {
		padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20);
	}

	.category-nav-section {
		padding-block: 0 var(--wp--preset--spacing--20);
	}

	/* Grila de produse vine imediat dupa navigarea pe categorii; nu are nevoie
	   inca de un rand gol deasupra ei. */
	.category-nav-section + .products-section,
	.categories-section + .diagnostic-section {
		padding-top: var(--wp--preset--spacing--30);
	}

	.product-single {
		padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.shop-page {
		padding-block: var(--wp--preset--spacing--30) 0;
	}

	.shop-page__inner {
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.safety-band {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* ==========================================================================
   Fotografia din zona de deschidere, pe telefon
   --------------------------------------------------------------------------
   Stratul plat de 85% acoperea fotografia aproape complet: ramanea un
   dreptunghi inchis, in care nu se distingea nici soba, nici flacara. Or,
   fotografia e singurul lucru care spune, fara cuvinte, despre ce e magazinul.
   Il facem gradient: intunecat sus, unde sta titlul, mai transparent jos,
   unde arde focul. Umbra de sub text tine literele lizibile si acolo unde
   fotografia se lumineaza.
   ========================================================================== */

@media (max-width: 767px) {
	.hero::before {
		background: linear-gradient(
			to bottom,
			rgba(31, 35, 40, 0.90) 0%,
			rgba(31, 35, 40, 0.78) 38%,
			rgba(31, 35, 40, 0.62) 72%,
			rgba(31, 35, 40, 0.74) 100%
		);
	}

	.hero__title,
	.hero__subtitle,
	.hero__note,
	.hero__trust-item {
		text-shadow: 0 1px 12px rgba(31, 35, 40, 0.55);
	}

	.hero__note {
		color: rgba(255, 255, 255, 0.82);
	}

	.hero__trust-item {
		border-color: rgba(255, 255, 255, 0.35);
		background: rgba(31, 35, 40, 0.35);
		opacity: 1;
	}
}

/* --- Produs epuizat: in locul formularului, un motiv sa sune --- */

.product-outofstock {
	margin-top: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--bordura);
	border-left: 3px solid var(--wp--preset--color--epuizat);
	border-radius: 0 10px 10px 0;
	background: var(--wp--preset--color--fundal);
}

.product-outofstock__title {
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--antracit);
}

.product-outofstock__text {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secundar);
}

.product-outofstock__button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	transition: background-color 150ms ease;
}

.product-outofstock__button:hover {
	background: var(--wp--preset--color--jar-inchis);
	color: var(--wp--preset--color--alb);
}

/* "Expediere rapida din stoc" nu are ce cauta pe o piesa care nu e in stoc. */
.produs-epuizat .product-buy__assurances li:first-child {
	display: none;
}

/* Descrierea de categorie, scurtata la primul paragraf — vezi
   assets/js/interfata.js.
   Textele sunt lungi cu un scop: explica piesa si aduc cautari din Google.
   Dar omul a venit sa vada piese, nu sa citeasca. Ramane primul paragraf,
   restul la un buton. Pe telefon si primul paragraf e taiat la patru randuri,
   ca produsele sa inceapa in primul ecran. */
.category-header__description.is-scurtata > :nth-child(n + 2) {
	display: none;
}

.category-header__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--jar);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--mic);
	cursor: pointer;
}

.category-header__toggle:hover,
.category-header__toggle:focus-visible {
	color: var(--wp--preset--color--jar-inchis);
}

@media (max-width: 767px) {
	.category-header__description.is-scurtata > :first-child {
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ==========================================================================
   CE SE INTAMPLA CAND INTRA O PIESA IN COS
   --------------------------------------------------------------------------
   Inainte: pagina se reincarca, omul ajungea sus de tot, si intre antet si
   fotografie aparea un chenar verde lat cat ecranul — un verde care nu exista
   nicaieri altundeva in identitatea magazinului.

   Acum nu se mai misca nimic. Butonul confirma scurt, un mesaj mic aluneca
   langa cos, bulina cu numarul sare o data. Trei semne mici in locul unei
   mutari mari. Vezi assets/js/cos.js.
   ========================================================================== */

/* --- Butonul, in cele trei stari --- */

.product-card__button a,
.single_add_to_cart_button {
	position: relative;
	transition: background-color 160ms ease, transform 120ms ease;
}

.product-card__button a:active,
.single_add_to_cart_button:active {
	transform: scale(0.97);
}

/* Cat timp se lucreaza: textul se stinge si se invarte un cerc in locul lui.
   Pastram latimea butonului (textul ramane, doar transparent), ca sa nu
   tresara grila cand apesi. */
.product-card__button a.se-adauga,
.single_add_to_cart_button.se-adauga {
	color: transparent !important;
	pointer-events: none;
}

.product-card__button a.se-adauga::after,
.single_add_to_cart_button.se-adauga::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: piesecazane-roata 620ms linear infinite;
}

@keyframes piesecazane-roata {
	to { transform: rotate(360deg); }
}

/* Reusit: o bifa, scurt. */
.product-card__button a.tocmai-adaugat,
.single_add_to_cart_button.tocmai-adaugat {
	color: transparent !important;
	background: var(--wp--preset--color--stoc) !important;
}

.product-card__button a.tocmai-adaugat::after,
.single_add_to_cart_button.tocmai-adaugat::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 9px;
	margin: -7px 0 0 -8px;
	border-left: 2.5px solid #fff;
	border-bottom: 2.5px solid #fff;
	transform: rotate(-45deg) scale(0);
	animation: piesecazane-bifa 320ms 60ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards;
}

@keyframes piesecazane-bifa {
	to { transform: rotate(-45deg) scale(1); }
}

/* --- Mesajul de langa cos --- */

.cos-mesaj {
	position: fixed;
	/* Jos-dreapta, nu sus: antetul e acum lipit, iar un mesaj care apare sub el
	   arata ca o scapare.

	   `right: 96px`, nu 16: in coltul din dreapta-jos sta deja bulina de
	   WhatsApp (56px plus 24px margine). Am incercat intai sa dau bulina la o
	   parte cand apare mesajul; mergea pe hartie si nu mergea in pagina. Asa e
	   mai simplu si nu depinde de nimic — mesajul se aseaza pur si simplu
	   langa ea. */
	bottom: 16px;
	right: 96px;
	z-index: 120;
	max-width: calc(100vw - 32px);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	box-shadow: 0 12px 32px rgba(31, 35, 40, 0.28);

	/* Ascuns pana e nevoie: nu doar transparent, ci si neatingibil. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1), visibility 220ms;
}

.cos-mesaj.se-vede {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cos-mesaj__bifa {
	flex-shrink: 0;
	color: #4ade80;
}

.cos-mesaj__text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	min-width: 0;
}

.cos-mesaj__text strong {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 0.9375rem;
	/* Numele lung de piesa nu are voie sa intinda mesajul peste ecran. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 15em;
}

.cos-mesaj__text span {
	font-size: 0.8125rem;
	opacity: 0.75;
}

.cos-mesaj__link {
	flex-shrink: 0;
	margin-left: 0.25rem;
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease;
}

.cos-mesaj__link:hover,
.cos-mesaj__link:focus-visible {
	background: var(--wp--preset--color--jar-inchis);
	color: var(--wp--preset--color--alb);
}

/* Pe telefon mesajul sta jos, lat cat ecranul minus marginile: sus ar acoperi
   antetul, iar degetul ajunge oricum mai usor jos. */
@media (max-width: 599px) {
	/* Pe telefon mesajul ia latimea ecranului, deci nu mai are pe langa ce sa
	   stea: atunci urca bulina. */
	.cos-mesaj {
		left: 16px;
		right: 16px;
		max-width: none;
	}

	body.cu-mesaj .whatsapp-bubble {
		transform: translateY(-82px);
	}

	.cos-mesaj__text strong {
		max-width: 11em;
	}

}

/* Bulina cu numarul, cand creste */
.site-header__cart-count.tocmai-crescut {
	animation: piesecazane-salt 420ms cubic-bezier(0.2, 0.9, 0.3, 1.5);
}

@keyframes piesecazane-salt {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* --- Chenarul verde al WooCommerce, imblanzit ---
   Ramane pentru cazul fara JavaScript, dar imbracat ca restul site-ului:
   fara verde, cu bordura noastra si coltul rotunjit la fel ca al cardurilor. */
.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	border: 1px solid var(--wp--preset--color--bordura) !important;
	border-left: 3px solid var(--wp--preset--color--stoc) !important;
	border-radius: 10px !important;
	background: var(--wp--preset--color--alb) !important;
	color: var(--wp--preset--color--antracit) !important;
}

/* ==========================================================================
   BANDA DE OFERTA RAMANE LA VEDERE
   --------------------------------------------------------------------------
   Cerere directa: oferta sa se stie tot timpul, nu doar in primul ecran.
   Se lipeste sus si coboara odata cu omul.

   Nu lipim si antetul: pe telefon, banda (45px) plus antetul (68px) ar manca
   113px din 844 — a saptea parte din ecran, permanent. Banda singura costa 5%
   si spune lucrul pentru care a fost pusa.
   ========================================================================== */

/* `position: sticky` pe banda singura NU merge, si merita stiut de ce: un
   element lipicios se lipeste doar in interiorul parintelui sau. Banda sta in
   <header>, care are vreo 113px — deci ar fi urmat omul exact 113px si ar fi
   plecat odata cu antetul. Lipim tot antetul. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 220ms ease;
}

header.wp-block-template-part.e-lipita {
	box-shadow: 0 2px 14px rgba(31, 35, 40, 0.14);
}

/* Cand omul a coborat, antetul se strange: logo mai mic, mai putin aer, banda
   mai subtire. Pe telefon banda (45px) plus antetul (68px) ar manca 113px din
   844 permanent — a saptea parte din ecran. Strans, ajung la ~86px.

   Se strange, nu dispare: cosul si oferta trebuie sa ramana la indemana. */
/* Cand omul a coborat, antetul se strange: banda mai subtire, logo mai mic,
   mai putin aer. Pe telefon banda (45px) plus antetul (68px) ar manca 113px
   din 844 permanent — a saptea parte din ecran. Strans, ajung pe la 86px.

   Se strange, nu dispare: cosul si oferta trebuie sa ramana la indemana.

   Inaltimea e data si de invelis (`.announcement-bar`), si de cel dinauntru
   (`.announcement-bar__inner`). Daca il strangi doar pe al doilea, primul il
   tine la loc si nu se intampla nimic — exact asa am pierdut o jumatate de ora.
   Se strang amandoua, si o data in afara media query-ului, o data inauntru,
   ca sa nu depinda de ordinea regulilor. */
header.wp-block-template-part.e-lipita .announcement-bar,
header.wp-block-template-part.e-lipita .announcement-bar__inner {
	min-height: 30px;
}

header.wp-block-template-part.e-lipita .announcement-bar__inner {
	padding-block: 0.1rem;
	font-size: 0.8125rem;
}

header.wp-block-template-part.e-lipita .site-header__brand img {
	height: 28px;
}

.site-header__brand img,
.announcement-bar,
.announcement-bar__inner,
.site-header__inner {
	transition: min-height 200ms ease, height 200ms ease, padding 200ms ease, font-size 200ms ease;
}

@media (min-width: 768px) {
	header.wp-block-template-part.e-lipita .announcement-bar,
	header.wp-block-template-part.e-lipita .announcement-bar__inner {
		min-height: 30px;
	}

	header.wp-block-template-part.e-lipita .site-header__inner {
		min-height: 58px;
	}

	header.wp-block-template-part.e-lipita .site-header__brand img {
		height: 32px;
	}
}

@media (max-width: 767px) {
	header.wp-block-template-part.e-lipita .site-header__inner {
		padding-block: 0.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cos-mesaj,
	.site-header__cart-count.tocmai-crescut,
	.product-card__button a,
	.single_add_to_cart_button {
		transition: none !important;
		animation: none !important;
	}

	.product-card__button a.se-adauga::after,
	.single_add_to_cart_button.se-adauga::after {
		animation: none !important;
	}
}

/* ==========================================================================
   SECTIUNILE APAR CAND AJUNGI LA ELE
   --------------------------------------------------------------------------
   Totul atarna de clasa `are-animatii`, pusa de JavaScript pe <html>. Fara ea
   nu se ascunde nimic — adica daca scriptul nu porneste, pagina e intreaga.
   Niciodata invers: un magazin alb fiindca a cazut un script nu e o optiune.

   Miscarea e mica dinadins (14px si putina transparenta). Brieful cere
   „premium prin executie, nu prin minimalism" — nu carusel, nu zburat.
   ========================================================================== */

html.are-animatii .va-aparea {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 520ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

html.are-animatii .va-aparea.se-arata {
	opacity: 1;
	transform: none;
}

/* --- Cardurile, la trecerea cursorului ---
   Se ridica un pic si poza respira. Pe telefon nu exista hover, deci nu se
   intampla nimic si nici nu ocupa procesor degeaba. */
@media (hover: hover) {
	.product-card {
		transition: transform 220ms ease, box-shadow 220ms ease, border-color 200ms ease;
	}

	.product-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 26px rgba(31, 35, 40, 0.09);
	}

	.product-card__image img {
		transition: transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1);
	}

	.product-card:hover .product-card__image img {
		transform: scale(1.035);
	}

	.category-card {
		transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
	}

	.category-card:hover {
		transform: translateY(-2px);
	}

	.diagnostic-card {
		transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
	}

	.diagnostic-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(31, 35, 40, 0.08);
	}
}

/* Poza nu are voie sa iasa din card cand creste. */
.product-card__image {
	overflow: hidden;
	border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
	html.are-animatii .va-aparea {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.product-card,
	.product-card__image img,
	.category-card,
	.diagnostic-card {
		transition: none !important;
	}
}

/* ==========================================================================
   ANTETUL PE TELEFON — asezare, hamburger, panoul care se deschide
   --------------------------------------------------------------------------
   Peste 70% din oameni intra de pe telefon, deci antetul asta e primul lucru
   pe care il vad. Trebuie sa arate asezat, nu improvizat.
   ========================================================================== */

@media (max-width: 767px) {

	/* --- Butonul de meniu: trei linii, nu doua ---
	   Doua linii nu se citesc ca „meniu" — par o bifa neterminata. Trei e
	   semnul pe care toata lumea il stie, inclusiv cineva de 70 de ani care
	   intra a doua oara in viata lui pe un magazin online.

	   Iconita vine din blocul WordPress si n-o putem schimba din sablon, deci
	   o ascundem si desenam noi. Linia din mijloc e fundalul butonului, cele
	   de sus si de jos sunt `::before` si `::after`. */
	.site-header__nav .wp-block-navigation__responsive-container-open {
		position: relative;
		display: inline-flex;
		min-width: 44px;
		min-height: 44px;
		border-radius: 6px;
		color: var(--wp--preset--color--antracit);
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 20px 2px;
		background-repeat: no-repeat;
		background-position: center;
		transition: background-color 150ms ease;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open::before,
	.site-header__nav .wp-block-navigation__responsive-container-open::after {
		content: "";
		position: absolute;
		left: 50%;
		width: 20px;
		height: 2px;
		margin-left: -10px;
		border-radius: 1px;
		background: currentColor;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open::before {
		top: 15px;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open::after {
		bottom: 15px;
	}

	.site-header__nav .wp-block-navigation__responsive-container-open:hover,
	.site-header__nav .wp-block-navigation__responsive-container-open:focus-visible {
		background-color: var(--wp--preset--color--fundal);
	}

	/* --- Panoul deschis --- */

	.site-header__nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 0;
	}

	.site-header__nav .is-menu-open .wp-block-navigation__responsive-container-content {
		display: block;
		padding: 5.5rem var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	/* Butonul de inchidere, destul de mare cat sa-l nimeresti din prima. */
	.site-header__nav .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 14px;
		right: 12px;
		width: 48px;
		height: 48px;
		border-radius: 8px;
		color: var(--wp--preset--color--alb);
	}

	.site-header__nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
		width: 26px;
		height: 26px;
	}

	.site-header__nav .is-menu-open .wp-block-navigation__container {
		display: block;
		width: 100%;
	}

	/* Fiecare intrare ocupa tot randul si are o linie sub ea: asa se vede ca
	   sunt trei lucruri separate, nu un bloc de text. */
	.site-header__nav .is-menu-open .wp-block-navigation-item {
		display: block;
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 64px;
		padding: 0;
		font-family: var(--wp--preset--font-family--barlow);
		font-size: 1.5rem;
		font-weight: 500;
		line-height: 1.2;
		color: var(--wp--preset--color--alb);
		box-shadow: none;
	}

	/* La atingere, o bara portocalie intra din stanga. Singurul jar din panou:
	   brieful cere accentul doar pentru actiune. */
	.site-header__nav .is-menu-open .wp-block-navigation-item__content::before {
		content: "";
		width: 0;
		height: 2px;
		margin-right: 0;
		background: var(--wp--preset--color--jar);
		transition: width 180ms ease, margin-right 180ms ease;
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item__content:hover::before,
	.site-header__nav .is-menu-open .wp-block-navigation-item__content:focus::before {
		width: 22px;
		margin-right: 14px;
	}

	/* Intrarile vin una dupa alta, foarte scurt. Destul cat panoul sa para
	   deschis, nu aparut dintr-odata. */
	.site-header__nav .is-menu-open .wp-block-navigation-item {
		opacity: 0;
		transform: translateY(8px);
		animation: piesecazane-meniu-intra 320ms cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 60ms;
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 120ms;
	}

	@keyframes piesecazane-meniu-intra {
		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* Cine a cerut mai putina miscare vede panoul intreg, pe loc. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.site-header__nav .is-menu-open .wp-block-navigation-item {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.site-header__nav .is-menu-open .wp-block-navigation-item__content::before {
		transition: none;
	}
}

/* =========================================================================
   GHIDURI DE DEPANARE
   Pagini din cod (inc/ghiduri.php), nu postari. Coloana de citit e mai
   ingusta decat containerul: un text tehnic citit pe 1240px obliga ochiul sa
   caute inceputul randului urmator.
   ========================================================================= */

.ghid-pagina {
	padding-bottom: var(--wp--preset--spacing--50);
}

.ghid-pagina__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

.ghid {
	max-width: 46rem;
}

.ghid--lista {
	max-width: 56rem;
}

/* ------------------------------------------------------------------ antet */

.ghid__antet {
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20);
}

.ghid__titlu {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: clamp(1.75rem, 1.35rem + 2vw, 2.5rem);
	line-height: 1.15;
	color: var(--wp--preset--color--antracit);
	margin: 0;
}

.ghid__intro {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--text-secundar);
	margin: 0.75rem 0 0;
}

/* Etichetele cu scrierile codului. Antracit, nu jar: nu sunt actiuni, sunt
   felul in care omul isi recunoaste alarma de pe display. */
.ghid__coduri {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ghid__cod {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--alb);
	background: var(--wp--preset--color--antracit);
	border-radius: 4px;
	padding: 0.3rem 0.6rem;
}

/* ------------------------------------------------------- raspunsul scurt */

.ghid__scurt {
	margin: var(--wp--preset--spacing--30) 0;
	padding: 1.25rem 1.25rem 1.25rem 1.5rem;
	background: var(--wp--preset--color--fundal);
	border-left: 4px solid var(--wp--preset--color--antracit);
	border-radius: 0 6px 6px 0;
}

.ghid__scurt-eticheta {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secundar);
	margin: 0 0 0.4rem;
}

.ghid__scurt-text {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--wp--preset--color--antracit);
	margin: 0;
}

/* ---------------------------------------------------------------- secvente */

.ghid__secventa {
	margin-block: var(--wp--preset--spacing--40);
}

.ghid__secventa h2,
.ghid__ajutor h2,
.ghid__legate h2,
.ghid-piese__titlu {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--wp--preset--color--antracit);
	margin: 0 0 0.85rem;
}

.ghid__secventa p {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 1rem;
}

/* ------------------------------------------------------------------- pasi */

.ghid-pasi {
	list-style: none;
	counter-reset: pas;
	margin: 0;
	padding: 0;
}

.ghid-pasi__pas {
	counter-increment: pas;
	position: relative;
	padding: 0 0 1.25rem 3rem;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	margin-bottom: 1.25rem;
}

.ghid-pasi__pas:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.ghid-pasi__pas::before {
	content: counter(pas);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.125rem;
	height: 2.125rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1rem;
}

.ghid-pasi__titlu {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.3;
	color: var(--wp--preset--color--antracit);
	margin: 0.2rem 0 0.4rem;
}

.ghid-pasi__text {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0;
}

/* Singurul jar din pas: duce la cumparare, deci e actiune. */
.ghid-pasi__piesa {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 0.5rem;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--jar);
	text-decoration: none;
}

.ghid-pasi__piesa:hover,
.ghid-pasi__piesa:focus-visible {
	color: var(--wp--preset--color--jar-inchis);
	text-decoration: underline;
}

/* ---------------------------------------------------------------- atentie */

.ghid__atentie {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--wp--preset--color--epuizat);
	border-radius: 6px;
	background: #fdf6f5;
}

.ghid__atentie-eticheta {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--epuizat);
	margin: 0 0 0.35rem;
}

.ghid__atentie p:last-child {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0;
	color: var(--wp--preset--color--antracit);
}

/* -------------------------------------------------- piese care rezolva asta */

.ghid-piese {
	margin-block: var(--wp--preset--spacing--40);
}

.ghid-piese__grila {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.ghid-piese__card {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-height: 44px;
	padding: 1rem 1.15rem;
	border: 1px solid var(--wp--preset--color--bordura);
	border-radius: 8px;
	background: var(--wp--preset--color--alb);
	text-decoration: none;
	transition: border-color 160ms ease, transform 160ms ease;
}

.ghid-piese__nume {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--antracit);
}

.ghid-piese__cat {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--text-secundar);
}

/* ------------------------------------------------------------------ ajutor */

.ghid__ajutor {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.5rem 1.35rem;
	background: var(--wp--preset--color--fundal);
	border-radius: 8px;
}

.ghid__ajutor p {
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0 0 1rem;
}

.ghid__ajutor-butoane {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	margin: 0;
}

.ghid__buton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.35rem;
	border-radius: 6px;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.0625rem;
	text-decoration: none;
	transition: background-color 160ms ease, color 160ms ease;
}

.ghid__buton--jar {
	background: var(--wp--preset--color--jar);
	color: var(--wp--preset--color--alb);
}

.ghid__buton--jar:hover,
.ghid__buton--jar:focus-visible {
	background: var(--wp--preset--color--jar-inchis);
	color: var(--wp--preset--color--alb);
}

.ghid__buton--contur {
	border: 2px solid var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--antracit);
}

.ghid__buton--contur:hover,
.ghid__buton--contur:focus-visible {
	background: var(--wp--preset--color--antracit);
	color: var(--wp--preset--color--alb);
}

/* ------------------------------------------------------------------ legate */

.ghid__legate {
	margin-block: var(--wp--preset--spacing--40) 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--bordura);
}

.ghid__legate ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ghid__legate li + li {
	margin-top: 0.4rem;
}

.ghid__legate a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--antracit);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--bordura);
	text-underline-offset: 3px;
}

.ghid__legate a:hover,
.ghid__legate a:focus-visible {
	text-decoration-color: var(--wp--preset--color--antracit);
}

/* ------------------------------------------------------- cuprinsul (tabel) */

.ghid-tabel {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1rem;
}

.ghid-tabel th,
.ghid-tabel td {
	padding: 0.9rem 0.75rem;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
	font-size: 1rem;
	line-height: 1.5;
}

.ghid-tabel thead th {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-secundar);
	padding-block: 0.5rem;
}

.ghid-tabel th:first-child,
.ghid-tabel td:first-child {
	padding-left: 0;
}

.ghid-tabel__cod {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	color: var(--wp--preset--color--antracit);
}

.ghid-tabel td a {
	color: var(--wp--preset--color--antracit);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ghid-lista-simptome {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ghid-lista-simptome li {
	padding-block: 0.9rem;
	border-bottom: 1px solid var(--wp--preset--color--bordura);
}

.ghid-lista-simptome a {
	display: block;
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
}

.ghid-lista-simptome a:hover,
.ghid-lista-simptome a:focus-visible {
	text-decoration: underline;
}

.ghid-lista-simptome span {
	display: block;
	margin-top: 0.25rem;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secundar);
}

/* ------------------------------- ghidurile legate, pe produs si categorie */

.ghiduri-legate {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.35rem;
	background: var(--wp--preset--color--fundal);
	border-radius: 8px;
}

.ghiduri-legate__titlu {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--wp--preset--color--antracit);
	margin: 0 0 0.35rem;
}

.ghiduri-legate__intro {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--text-secundar);
	margin: 0 0 0.75rem;
}

.ghiduri-legate__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ghiduri-legate__element {
	border-top: 1px solid var(--wp--preset--color--bordura);
	padding-block: 0.15rem;
}

.ghiduri-legate__element a {
	display: block;
	min-height: 44px;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--wp--preset--color--antracit);
	text-decoration: none;
	padding-top: 0.7rem;
}

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

.ghiduri-legate__coduri {
	display: block;
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-secundar);
	padding-bottom: 0.6rem;
}

/* ------------------------------------------------------------------ desktop */

@media (min-width: 768px) {
	.ghid-piese__grila {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}

	.ghid-tabel th,
	.ghid-tabel td {
		padding-block: 1rem;
	}
}

@media (hover: hover) {
	.ghid-piese__card:hover {
		border-color: var(--wp--preset--color--antracit);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ghid-piese__card {
		transition: none;
	}

	.ghid-piese__card:hover {
		transform: none;
	}
}

/* Invelisul scurtaturii [ghiduri-legate], pe pagina piesei si pe categorie.
   Aceeasi coloana ca restul paginii de magazin; fundalul il pune caseta
   dinauntru, nu sectiunea, ca sa nu iasa gri pe gri. */
.ghiduri-section__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--20);
}

/* Tabelul de coduri pe telefon.
   Doua coloane cu text lung intr-un ecran de 390px dau doua coloane inguste in
   care fiecare rand se rupe in cinci — se citeste mai greu decat o lista. Sub
   600px randurile devin blocuri: codul deasupra, ce inseamna dedesubt.
   `display: block` pe elementele de tabel scoate si ultima urma de aliniere pe
   coloane, deci nu mai e nimic de strans. */
@media (max-width: 599px) {
	.ghid-tabel thead {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}

	.ghid-tabel,
	.ghid-tabel tbody,
	.ghid-tabel tr,
	.ghid-tabel th,
	.ghid-tabel td {
		display: block;
		width: auto;
	}

	.ghid-tabel tr {
		padding-block: 0.9rem;
		border-bottom: 1px solid var(--wp--preset--color--bordura);
	}

	.ghid-tabel th,
	.ghid-tabel td {
		border-bottom: 0;
		padding: 0;
	}

	.ghid-tabel__cod {
		font-size: 0.9375rem;
		letter-spacing: 0.02em;
		color: var(--wp--preset--color--text-secundar);
		margin-bottom: 0.3rem;
	}

	.ghid-tabel td a {
		display: block;
		min-height: 44px;
		font-family: var(--wp--preset--font-family--barlow);
		font-weight: 600;
		font-size: 1.0625rem;
		line-height: 1.35;
		text-decoration: none;
	}

	/* Caseta „Pe scurt" si cea de atentie: pe ecran ingust marginile mari fura
	   din latimea textului, care e singurul lucru pentru care a venit omul. */
	.ghid__scurt {
		padding: 1rem 1rem 1rem 1.15rem;
	}

	.ghid__ajutor {
		padding: 1.25rem 1.1rem;
	}

	.ghid__buton {
		flex: 1 1 100%;
	}
}