/* SP Conversie — etichete produs (NOU / RULAT), linia „pentru cine”, bara fixă de mobil.
 * Selectorii sunt legați de element + container ca să câștige în fața stilurilor globale
 * ale temei / kitului Elementor (ex. `.elementor-kit-N a`, `.elementor-kit-N a:hover`). */

/* Etichete NOU / RULAT ---------------------------------------------------- */
span.sp-eticheta {
	display: inline-block;
	margin: 0;
	padding: 3px 8px;
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

span.sp-eticheta.sp-eticheta--nou {
	background: #1e5631;
}

span.sp-eticheta.sp-eticheta--rulat {
	background: #3d3d3d;
}

/* În listă: colțul stânga-jos al imaginii (etichetele temei stau stânga-sus). */
span.sp-eticheta.sp-eticheta--imagine {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 3;
	pointer-events: none;
}

/* WoodMart poziționează deja containerul; regula e no-op acolo și acoperă alte șabloane. */
.product-element-top:has(.sp-eticheta--imagine) {
	position: relative;
}

/* Pe pagina produsului: badge deasupra titlului. */
span.sp-eticheta.sp-eticheta--inline {
	margin-bottom: 8px;
}

/* Linia „pentru cine” (în listă în .product, pe produs în .summary) ---------- */
p.sp-pentru-cine,
.product p.sp-pentru-cine,
.summary p.sp-pentru-cine {
	margin: 4px 0 8px;
	color: #6b6b6b;
	font-size: 13px;
	line-height: 1.4;
}

/* Video pe pagina produsului ------------------------------------------------- */
/* MediaElement.js (playerul `[video]`) rescrie inline înălțimea containerului după aspectul nativ al
   clipului (un clip vertical 480×848 ajunge la 640×1131 px). `max-height` bate înălțimea inline fără
   !important; poster-ul și overlay-ul de play (100% din container) rămân centrate, iar controalele
   (absolute jos în container) rămân vizibile. */
.single-product .wp-video .mejs-container,
.single-product .wp-video .mejs-mediaelement,
.single-product .wp-video .mejs-poster,
.single-product .wp-video .mejs-overlay,
.single-product .wp-video video {
	max-height: 480px;
}

.single-product .wp-video video {
	object-fit: contain;
	background: #000;
}

/* Bara fixă de mobil ---------------------------------------------------------- */
nav.sp-bara-mobil {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* Sub off-canvas-ul / popup-urile WoodMart (meniu mobil, coș lateral, filtre), care trebuie să rămână deasupra barei. */
	z-index: 400;
	display: flex;
	height: calc(56px + env(safe-area-inset-bottom, 0px));
	margin: 0;
	padding: 0 0 env(safe-area-inset-bottom, 0px);
	background: #1a1a1a;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
	box-sizing: border-box;
}

.sp-bara-mobil a.sp-bara-mobil__btn {
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0 8px;
	border: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.sp-bara-mobil a.sp-bara-mobil__btn--tel,
.sp-bara-mobil a.sp-bara-mobil__btn--tel:visited,
.sp-bara-mobil a.sp-bara-mobil__btn--tel:hover,
.sp-bara-mobil a.sp-bara-mobil__btn--tel:focus,
.sp-bara-mobil a.sp-bara-mobil__btn--tel:active {
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
}

.sp-bara-mobil a.sp-bara-mobil__btn--oferta,
.sp-bara-mobil a.sp-bara-mobil__btn--oferta:visited,
.sp-bara-mobil a.sp-bara-mobil__btn--oferta:hover,
.sp-bara-mobil a.sp-bara-mobil__btn--oferta:focus,
.sp-bara-mobil a.sp-bara-mobil__btn--oferta:active {
	background: #e30613;
	color: #fff;
	text-decoration: none;
}

.sp-bara-mobil a.sp-bara-mobil__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

@media (max-width: 767px) {
	body.sp-are-bara {
		padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	/* Butonul WhatsApp (Click to Chat) deasupra barei; pluginul pune `bottom` inline, deci !important e necesar.
	   Reguli separate și :not simplu, ca un browser vechi să nu invalideze și regula pentru .ht-ctc. */
	body.sp-are-bara .ht-ctc {
		bottom: 72px !important;
	}

	/* .ht_ctc_style doar când nu e copilul unui .ht-ctc (acela se mută deja cu părintele). */
	body.sp-are-bara :not(.ht-ctc) > .ht_ctc_style {
		bottom: 72px !important;
	}

	/* Butonul CookieYes „revisit consent” (cerc fix stânga-jos, z-index 999999) stătea peste „Sună”.
	   CookieYes îi pune `bottom` din propriul CSS / inline, deci !important e necesar. */
	body.sp-are-bara .cky-btn-revisit-wrapper {
		bottom: 72px !important;
	}

	/* Bara fixă WoodMart cu „Adaugă în coș” (lipită de jos, z-index 340) era acoperită complet de bara
	   noastră (z-index 400) → ridicată deasupra ei. Tema o poziționează doar din CSS (`inset: auto 0 0 0`,
	   un singur selector de clasă, fără `bottom` inline), deci selectorul de mai jos câștigă fără !important. */
	body.sp-are-bara .wd-sticky-btn {
		bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	}

	/* Cât e afișată bara WoodMart (42 px, lipită deasupra barei noastre), WhatsApp și CookieYes urcă
	   deasupra ei. !important din același motiv ca mai sus (`bottom` inline / din CSS-ul pluginurilor).
	   Reguli separate, ca un selector nesuportat să nu invalideze restul; fără :has() (browsere vechi)
	   rămân la 72px, peste bara temei — acceptabil. */
	body.sp-are-bara:has(.wd-sticky-btn-shown) .ht-ctc {
		bottom: calc(56px + 42px + 16px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.sp-are-bara:has(.wd-sticky-btn-shown) :not(.ht-ctc) > .ht_ctc_style {
		bottom: calc(56px + 42px + 16px + env(safe-area-inset-bottom, 0px)) !important;
	}

	body.sp-are-bara:has(.wd-sticky-btn-shown) .cky-btn-revisit-wrapper {
		bottom: calc(56px + 42px + 16px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Tema rezervă înălțimea barei ei cu `padding-bottom` pe body, pe care regula noastră de mai sus o
	   înlocuia; aici se adună ambele, ca finalul paginii să nu rămână sub cele două bare. */
	body.sp-are-bara.wd-sticky-btn-on-mb {
		padding-bottom: calc(56px + var(--wd-sticky-btn-height, 0px) + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 768px) {
	nav.sp-bara-mobil {
		display: none;
	}
}

/* Bara de categorii din antet (desktop) ----------------------------------------- */
/* „Meniu Categorii” (11 elemente) încape pe un rând doar de la ~1730 px; mai jos se rupea pe 2–3 rânduri
   în rândul fix de 50 px al temei (urca peste logo, iar în antetul sticky plutea peste conținut).
   Trepte de la 1025 px (sub, tema arată antetul de mobil): text și spațiere mai mici, apoi fără iconițe.
   Tema pune spațiul dintre elemente prin `--nav-gap` pe `.wd-nav` (gap: var(--nav-gap-v) var(--nav-gap)),
   deci se setează variabila; ID-ul bate `.wd-nav > li > a` fără !important. Iconițele au lățimea și
   marginea în atributul `style` (pluginul de iconițe de meniu), deci acolo !important e necesar. */
@media (min-width: 1025px) {
	.whb-header-bottom #menu-meniu-categorii > li > a {
		white-space: nowrap;
	}
}

@media (min-width: 1025px) and (max-width: 1799px) {
	.whb-header-bottom #menu-meniu-categorii.wd-nav {
		--nav-gap: 12px;
	}

	.whb-header-bottom #menu-meniu-categorii > li > a {
		font-size: 11px;
	}

	.whb-header-bottom #menu-meniu-categorii > li > a img {
		width: 20px !important;
		height: 20px !important;
		margin: 0 4px 0 0 !important;
	}
}

@media (min-width: 1025px) and (max-width: 1499px) {
	.whb-header-bottom #menu-meniu-categorii.wd-nav {
		--nav-gap: 14px;
	}

	.whb-header-bottom #menu-meniu-categorii > li > a img {
		display: none;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	.whb-header-bottom #menu-meniu-categorii.wd-nav {
		--nav-gap: 10px;
	}

	.whb-header-bottom #menu-meniu-categorii > li > a {
		font-size: 10px;
	}
}

/* La 10px + 10px textul are ~1000 px și nu mai încape sub ~1080 px (container fluid, 15 px padding pe
   fiecare parte, plus bara de derulare). Măsurat în browser (15.10): la 9.5px elementele au 920 px (text
   ~88 px / px de font + ~84 px săgeți de dropdown) + 80 px spații > 995 px disponibili la 1025 → 9px
   (~876 px + 80 px = ~956 px). */
@media (min-width: 1025px) and (max-width: 1149px) {
	.whb-header-bottom #menu-meniu-categorii.wd-nav {
		--nav-gap: 8px;
	}

	.whb-header-bottom #menu-meniu-categorii > li > a {
		font-size: 9px;
	}
}