/* ==========================================================================
   APEX INDUSTRIES — sistem de design „atelier"
   ---------------------------------------------------------------------------
   1. Tokens        2. Temă          3. Motive tehnice   4. Butoane
   5. Bara de sus   6. Căutare       7. Hero             8. USP
   9. Capuri        10. Categorii    11. Piese + cifre   12. Pași
   13. B2B          14. Carduri      15. Magazin         16. Pagina produs
   17. Formulare    18. Conținut     19. Subsol          20. Mișcare
   ---------------------------------------------------------------------------
   Ideea: site-ul arată ca documentația unei scule, nu ca o vitrină. Cerneală
   și oțel pe zonele de impact, hârtie în rest, un singur accent — chihlimbarul
   de pe utilajele de atelier. Colțurile sunt drepte (2–4px): raza mare citește
   a aplicație, nu a piesă prelucrată. Datele tehnice — coduri, cote, numere de
   index — sunt scrise cu literă de mașină, care e și fontul de sistem, deci nu
   costă nimic la încărcare. Titlurile folosesc singurul font propriu, Archivo
   800, preîncărcat din biblioteca media (vezi apex-magazin.php).
   ========================================================================== */

:root {
	/* cerneală și oțel */
	--apex-ink:    #0a0d12;
	--apex-ink2:   #10151d;
	--apex-ink3:   #171e28;
	--apex-ink4:   #212a37;
	--apex-otel:   #6d7889;
	--apex-otel2:  #a4aebd;

	/* hârtie */
	--apex-paper:  #ffffff;
	--apex-canvas: #f1f3f7;
	--apex-canvas2:#e6eaf0;
	--apex-line:   #dfe4ec;
	--apex-txt:    #0f131a;
	--apex-mut:    #59616f;

	/* accente */
	--apex-amb:    #ffb020;
	--apex-amb-h:  #ffc247;
	--apex-amb-d:  #9a6200;   /* chihlimbar citibil pe alb */
	--apex-a:      #3d8bff;
	--apex-a-dk:   #1263d2;
	--apex-a-dk2:  #0e4fa8;
	--apex-a-lt:   #69acff;
	--apex-stoc:   #17915c;
	--apex-comanda:#9a6200;

	--apex-lat: 1290px;
	--apex-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--apex-disp: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--apex-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
}

@keyframes apexPuls {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 176, 32, .5); }
	70%      { box-shadow: 0 0 0 8px rgba(255, 176, 32, 0); }
}
@keyframes apexPlutire {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -12px, 0); }
}
@keyframes apexIntra {
	from { opacity: 0; transform: translate3d(0, 16px, 0); }
	to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- 2. TEMĂ --- */
/* Kadence își ține culorile în `--global-palette*`; le rescriem ca să nu
   existe două palete concurente pe aceeași pagină. */
:root {
	--global-palette1: #1263d2;
	--global-palette2: #0e4fa8;
	--global-palette3: #0f131a;
	--global-palette4: #59616f;
	--global-palette5: #77808f;
	--global-palette6: #dfe4ec;
	--global-palette7: #eaeef4;
	--global-palette8: #f1f3f7;
	--global-palette9: #ffffff;
	--global-palette9rgb: 255, 255, 255;
}

html { scroll-behavior: smooth; }
/* Antetul lipit acoperea începutul secțiunii la sărituri pe ancoră. */
html { scroll-padding-top: 96px; }

.apex {
	font-family: var(--apex-font);
	color: var(--apex-txt);
	-webkit-font-smoothing: antialiased;
}
.apex h1, .apex h2, .apex h3, .apex h4 {
	font-family: var(--apex-disp);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.1;
	color: var(--apex-txt);
}
/* Legătura implicită rămâne albastrul de acțiune — e culoarea moștenită de
   componentele de pe fundal închis, unde cerneala ar fi invizibilă. Pe hârtie
   (conținut, 404) legăturile sunt rescrise cerneală cu subliniere chihlimbar;
   pe cerneală (hero, panouri) sunt rescrise chihlimbar. */
.apex a { color: var(--apex-a-dk); text-underline-offset: 3px; }
.apex a:hover { color: var(--apex-a-dk2); }
/* Ajutorul din hero și panourile închise: legătura e chihlimbar, nu albastru. */
.apex-hero a:not(.apex-buton):not(.apex-pastila),
.apex-sectiune--ink a:not(.apex-buton):not(.apex-pastila) {
	color: var(--apex-amb);
	text-decoration-color: rgba(255, 176, 32, .55);
}
.apex-hero a:not(.apex-buton):hover,
.apex-sectiune--ink a:not(.apex-buton):hover { color: var(--apex-amb-h); }
/* Pagina 404 stă pe hârtie: cerneală cu subliniere chihlimbar. */
.apex-404 a:not(.apex-buton):not(.apex-pastila) {
	color: var(--apex-txt);
	text-decoration-color: var(--apex-amb);
	text-decoration-thickness: 2px;
}
.apex-404 a:not(.apex-buton):hover { color: var(--apex-amb-d); }
.apex ::selection { background: var(--apex-amb); color: var(--apex-ink); }

/* ------------------------------------------------------------ ANTET ---
   Rândul de sus al temei e împărțit de Kadence în trei secțiuni care își
   iau lățimea egal, indiferent ce conțin: sigla lăsa 340px de gol la
   stânga, iar caseta de căutare rămânea cu 294px și își tăia textul.
   Aici rescriem împărțirea: sigla și blocul din dreapta ocupă exact cât
   le trebuie, iar căutarea ia mijlocul rămas. */
/* Antetul e întunecat, în același ton cu bara de sus și cu heroul: banda
   albă dintre două suprafețe de cerneală se citea ca o greșeală, nu ca o
   decizie. Pe paginile deschise rămâne un cap de ziar, intenționat. */
.apex .site-main-header-wrap.kadence-sticky-header,
.apex .site-main-header-wrap.kadence-sticky-header .site-header-row-container-inner {
	/* Kadence își scrie fundalul alb pentru starea „prins" cu un selector
	   pornit de la `#masthead`, deci cu identificator — bate orice selector
	   de clase. Fără `!important` antetul redevenea alb la derulare, cu
	   sigla albă și meniul alb invizibile pe el. */
	background: var(--apex-ink) !important;
}
/* Linia de chihlimbar e permanentă — e cotă, nu umbră. Umbra apare doar
   după ce pagina a plecat de sub antet. */
.apex .site-main-header-wrap.kadence-sticky-header.item-is-fixed {
	border-bottom: 2px solid var(--apex-amb);
	box-shadow: none;
}
.apex .site-main-header-wrap.kadence-sticky-header.item-is-fixed:not(.item-at-start) {
	box-shadow: 0 14px 34px -26px rgba(10, 13, 18, .55);
}
/* Antetul lipit e făcut acum din CSS, nu din JavaScript.
   Kadence scotea rândul din flux și îi scria `top` în atributul de stil, iar
   noi corectam acel `top` la fiecare cadru de derulare, ca antetul să coboare
   exact cât a mai rămas din bara de sus. Numai că un element fixat mutat din
   JavaScript rămâne mereu cu un cadru în urmă: pe primii 39px de derulare se
   deschidea și se închidea între bara de sus și antet o fâșie de câțiva pixeli
   prin care se vedea albul lui `#masthead`. La capturi nu se prindea (pagina
   era oprită), la filmare se vedea ca o pâlpâire albă, sacadată.
   Acum lucrează chiar mecanismul browserului: `#masthead` rămâne în flux și se
   lipește singur cu `position: sticky`. Bara de sus pleacă normal, antetul o
   urmează pixel cu pixel pe firul de compunere, fără întârziere. Rândul temei
   redevine un element obișnuit înăuntru. `#masthead` primește și fundalul de
   cerneală: e suprafața de sub antet, deci ea se vedea albă. */
#masthead.site-header { background: var(--apex-ink); }
@media (min-width: 1025px) {
	#masthead.site-header { position: sticky; top: 0; }
	.apex .site-main-header-wrap.kadence-sticky-header {
		position: static !important;
		top: auto !important;
	}
	/* Rândul păstrează aceeași înălțime tot timpul. Strângerea lui (80→60,
	   scrisă de Kadence în atributul de stil, deci are nevoie de `!important`)
	   ar lăsa acum un gol deasupra: antetul nu mai e scos din flux, iar
	   învelișul lui rămâne de 82. */
	.apex .site-main-header-wrap .site-main-header-inner-wrap {
		height: 80px !important;
		min-height: 80px !important;
		max-height: 80px !important;
	}
	.apex .site-header-upper-inner-wrap.child-is-fixed { height: 82px !important; }
	/* Kadence compensează cu umplutură o măsurătoare proprie greșită a siglei
	   (106px în loc de 82 pe paginile de produs). */
	.apex .site-main-header-wrap.kadence-sticky-header .site-header-row-container-inner,
	.apex .site-main-header-wrap.kadence-sticky-header .site-header-row-container-inner > .site-container {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}
.apex .site-main-header-wrap .site-header-row-container-inner {
	transition: padding .25s ease;
}

.apex .site-main-header-inner-wrap {
	display: flex;
	align-items: center;
	gap: 32px;
}
.apex .site-header-main-section-left  { flex: 0 0 auto; }
.apex .site-header-main-section-right { flex: 0 0 auto; gap: 20px; }
.apex .site-header-main-section-center {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

/* Titlul site-ului scris cu litere lângă siglă dublează sigla. */
.apex .site-branding .site-title-wrap { display: none; }
/* Kadence scrie `max-height` direct în atributul de stil al siglei (100% la
   început, 60px când antetul e prins), deci regula noastră trebuie să fie
   mai tare. Fără asta sigla avea 69px într-un rând de 80 și nu mai rămânea
   aer nici deasupra, nici dedesubt. */
.apex .site-branding img.custom-logo {
	max-height: 40px !important;
	width: auto;
	transition: max-height .25s ease;
}

/* Caseta de căutare din antet: un singur control, câmp și buton lipite,
   cu lupa desenată în fundal (nu putem adăuga markup în opțiunea temei). */
/* Blocul de HTML din antet nu se întinde singur: nici elementul temei,
   nici învelișul lui interior nu au lățime. Iar `wpautop` lasă două
   paragrafe goale în jurul formularului. */
.apex .site-header-main-section-center > .site-header-item { width: 100%; }
.apex .header-html,
.apex .header-html-inner { width: 100%; }
.apex .header-html-inner > p { display: none; }
.apex .header-html .apex-cauta {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	gap: 0;
}
.apex .header-html .apex-cauta input[type="search"] {
	height: 46px;
	border-width: 1px;
	border-right-width: 0;
	border-radius: 2px 0 0 2px;
	padding: 0 14px 0 42px;
	font-size: 14.5px;
	background-color: #161c26;
	border-color: #2b3542;
	color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d7889' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 13px center;
	background-size: 17px 17px;
}
.apex .header-html .apex-cauta input[type="search"]::placeholder { color: #8a94a4; }
.apex .header-html .apex-cauta input[type="search"]:focus {
	border-right-width: 0;
	box-shadow: none;
	border-color: var(--apex-amb);
	background-color: #1b222d;
}
.apex .header-html .apex-cauta button {
	height: 46px;
	padding: 0 20px;
	border-radius: 0 2px 2px 0;
	background: var(--apex-amb);
	color: var(--apex-ink);
	font-size: 14px;
	letter-spacing: .01em;
}
.apex .header-html .apex-cauta button:hover {
	background: var(--apex-ink);
	color: #fff;
}
.apex .header-html .apex-sugestii { max-width: none; }
/* Blocul de HTML din antet e marcat „link-uri normale", deci tema sublinia
   fiecare sugestie. */
.apex .header-html .apex-sugestie,
.apex .header-html .apex-sugestie:hover,
.apex .header-html .apex-sugestie * { text-decoration: none; }

/* Meniul — pe cerneală, deci alb. */
.apex .header-navigation .primary-menu-container > ul { flex-wrap: nowrap; }
.apex .header-navigation .primary-menu-container > ul > li > a { color: #fff; }
.apex .header-navigation .primary-menu-container > ul > li > a:hover,
.apex .header-navigation .primary-menu-container > ul > li.current-menu-item > a { color: var(--apex-amb); }
.apex .header-navigation .primary-menu-container > ul > li > a svg { color: currentColor; }
.apex .header-navigation .primary-menu-container > ul > li > a {
	white-space: nowrap;
	font-weight: 700;
	font-size: 15.5px;
	letter-spacing: -.01em;
	position: relative;
}
/* Linia de accent sub elementul de meniu: apare din centru, ca o cotă. */
.apex .header-navigation .primary-menu-container > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 6px;
	height: 2px;
	background: var(--apex-amb);
	transition: left .22s ease, right .22s ease;
}
.apex .header-navigation .primary-menu-container > ul > li > a:hover::after,
.apex .header-navigation .primary-menu-container > ul > li.current-menu-item > a::after {
	left: 8px;
	right: 8px;
}

/* „Cere ofertă" e acțiunea care aduce banii pe un site B2B — arată ca un
   buton, nu ca al treilea link din rând. Fără linia de accent dedesubt. */
.apex .header-navigation .primary-menu-container > ul > li > a[href*="cerere-oferta"] {
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: 2px;
	padding: 9px 16px;
	margin: 0 2px;
	line-height: 1;
	transition: background .18s ease, color .18s ease;
}
.apex .header-navigation .primary-menu-container > ul > li > a[href*="cerere-oferta"]:hover {
	background: #fff;
	color: var(--apex-ink);
	border-color: #fff;
}
.apex .header-navigation .primary-menu-container > ul > li > a[href*="cerere-oferta"]::after {
	display: none;
}

/* Submeniul „Catalog" — panou de catalog, nu listă de linkuri.
   Zece rânduri de 200px puse unul sub altul ocupau jumătate de ecran și nu
   spuneau nimic despre ce e înăuntru. Panoul de aici e o planșă: trei coloane,
   număr de index pe fiecare familie, numărul real de repere sub nume și un rând
   de închidere care duce în tot catalogul.
   Tema comută submeniul pe `display`, deci grila se scrie pe stările deschise —
   altfel `display:block` de la hover ar da peste `display:grid`. */
.apex .header-navigation .sub-menu {
	background: var(--apex-ink2) !important;
	border: 1px solid #232c38;
	border-top: 2px solid var(--apex-amb);
	border-radius: 0;
	box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .85);
	padding: 0;
	width: 720px;
	max-width: calc(100vw - 32px);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.apex .header-navigation.nav--toggle-sub:not(.click-to-open) li.menu-item-has-children:hover > .sub-menu,
.apex .header-navigation.nav--toggle-sub li.menu-item-has-children.menu-item--toggled-on > .sub-menu,
.apex .header-navigation.nav--toggle-sub li.menu-item-has-children:focus-within > .sub-menu {
	display: grid;
	animation: apex-mm-intra .16s ease-out both;
}
@keyframes apex-mm-intra {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.apex .header-navigation .sub-menu { animation: none !important; }
}

/* Capul de planșă: eticheta cu literă de mașină și banda de avertizare,
   aceleași motive ca pe secțiunile paginii. */
.apex .header-navigation .sub-menu::before {
	content: "Familii de produse";
	grid-column: 1 / -1;
	padding: 11px 18px 10px 32px;
	border-bottom: 1px solid #232c38;
	background:
		repeating-linear-gradient(-45deg, var(--apex-amb) 0 4px, var(--apex-ink2) 4px 8px) left / 8px 100% no-repeat,
		#131924;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-otel2);
}

.apex .header-navigation .sub-menu li { border-bottom: 0; }
.apex .header-navigation .sub-menu li a {
	display: grid !important;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 10px;
	align-items: center;
	width: auto !important;
	padding: 11px 16px !important;
	border-bottom: 1px solid rgba(255, 255, 255, .05);
	border-right: 1px solid rgba(255, 255, 255, .05);
	color: #fff !important;
	position: relative;
	transition: background .14s ease;
}
.apex .header-navigation .sub-menu li:nth-child(3n) a { border-right: 0; }
.apex .header-navigation .sub-menu li a:hover,
.apex .header-navigation .sub-menu li a:focus-visible {
	background: #1a222d !important;
	color: #fff !important;
}
/* Cota de accent din stânga rândului — aceeași muchie ca pe casetele de pe pagină. */
.apex .header-navigation .sub-menu li a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: var(--apex-amb);
	transform: scaleY(0);
	transition: transform .16s ease;
}
.apex .header-navigation .sub-menu li a:hover::before,
.apex .header-navigation .sub-menu li a:focus-visible::before { transform: scaleY(1); }

.apex .header-navigation .sub-menu .apex-mm__n {
	grid-row: 1 / span 2;
	align-self: start;
	margin-top: 2px;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .04em;
	color: #4d5666;
}
.apex .header-navigation .sub-menu .apex-mm__t {
	font-weight: 700;
	font-size: 14.5px;
	letter-spacing: -.01em;
	line-height: 1.25;
}
.apex .header-navigation .sub-menu .apex-mm__k {
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--apex-otel);
	margin-top: 2px;
}
.apex .header-navigation .sub-menu li a:hover .apex-mm__n,
.apex .header-navigation .sub-menu li a:hover .apex-mm__k { color: var(--apex-amb); }

/* Rândul de închidere: o acțiune pe toată lățimea, nu a zecea categorie. */
.apex .header-navigation .sub-menu .apex-meniu-tot { grid-column: 1 / -1; }
.apex .header-navigation .sub-menu .apex-meniu-tot a {
	grid-template-columns: 1fr auto auto;
	column-gap: 12px;
	background: #131924 !important;
	border-top: 1px solid #232c38;
	border-bottom: 0;
	border-right: 0;
	padding: 13px 18px !important;
}
.apex .header-navigation .sub-menu .apex-meniu-tot a:hover {
	background: var(--apex-amb) !important;
	color: var(--apex-ink) !important;
}
.apex .header-navigation .sub-menu .apex-meniu-tot .apex-mm__k { margin-top: 0; }
.apex .header-navigation .sub-menu .apex-meniu-tot .apex-mm__sageata {
	font-size: 15px;
	line-height: 1;
	transition: transform .16s ease;
}
.apex .header-navigation .sub-menu .apex-meniu-tot a:hover .apex-mm__k { color: rgba(10, 13, 18, .72); }
.apex .header-navigation .sub-menu .apex-meniu-tot a:hover .apex-mm__sageata { transform: translateX(4px); }
.apex .header-navigation .sub-menu .apex-meniu-tot a::before { display: none; }

/* Sub 1200px panoul de trei coloane ar depăși ecranul: două coloane. */
@media (max-width: 1240px) {
	.apex .header-navigation .sub-menu {
		width: 520px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.apex .header-navigation .sub-menu li:nth-child(3n) a { border-right: 1px solid rgba(255, 255, 255, .05); }
	.apex .header-navigation .sub-menu li:nth-child(2n) a { border-right: 0; }
	/* Nouă familii în două coloane lasă o celulă goală la coadă: ultima ține rândul. */
	.apex .header-navigation .sub-menu li.apex-meniu-cat:nth-child(9) { grid-column: 1 / -1; }
	.apex .header-navigation .sub-menu li.apex-meniu-cat:nth-child(9) a { border-right: 0; }
}

/* În sertarul de telefon rândurile rămân listă, dar păstrează cifrele. */
.apex .mobile-navigation .apex-mm__n {
	font-family: var(--apex-mono);
	font-size: 12px;
	color: var(--apex-otel);
	margin-right: 8px;
}
.apex .mobile-navigation .apex-mm__k {
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .05em;
	color: var(--apex-otel);
	margin-left: 8px;
}
.apex .mobile-navigation .apex-meniu-tot .apex-mm__sageata { margin-left: 8px; color: var(--apex-amb); }
/* Regula noastră `.apex a` colora în albastru linkurile din sertar — inclusiv
   „Catalog", singurul cu submeniu. În sertar culoarea vine de la listă. */
.apex .mobile-navigation a { color: inherit; }
/* Accentul din sertar era albastrul implicit al temei — pe antetul de cerneală
   accentul e chihlimbarul, peste tot. */
.apex .mobile-navigation ul li > a:hover,
.apex .mobile-navigation ul li > a:focus,
.apex .mobile-navigation ul li.current-menu-item > a,
.apex .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap:hover,
.apex .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
	color: var(--apex-amb);
}
.apex .mobile-navigation .apex-meniu-tot > a { background: rgba(255, 176, 32, .07); }

/* Coșul — pe telefon învelișul are alt nume, deci pastila rămânea gri. */
.apex .header-cart-wrap .header-cart-total,
.apex .header-mobile-cart-wrap .header-cart-total {
	background: var(--apex-amb);
	color: var(--apex-ink);
	font-weight: 800;
}

/* Antetul de telefon nu e cel lipit, deci nu prinde singur nici fundalul,
   nici linia de chihlimbar. */
.apex .site-mobile-header-wrap .site-main-header-wrap,
.apex .site-mobile-header-wrap .site-header-row-container-inner {
	background: var(--apex-ink) !important;
	border-bottom-color: var(--apex-amb);
}
.apex .site-mobile-header-wrap .site-main-header-wrap {
	border-bottom: 2px solid var(--apex-amb);
}
/* Pictogramele din antet — lupă, coș, meniu — sunt desenate cu
   `currentColor`, deci se albesc odată cu textul. */
.apex .site-header .header-cart-wrap a,
.apex .site-header .header-mobile-cart-wrap a,
.apex .site-header .search-toggle-open,
.apex .site-header .menu-toggle-open { color: #fff; }
.apex .site-header .header-cart-wrap a:hover,
.apex .site-header .header-mobile-cart-wrap a:hover,
.apex .site-header .search-toggle-open:hover,
.apex .site-header .menu-toggle-open:hover { color: var(--apex-amb); }
.apex .site-header .menu-toggle-open .menu-toggle-icon,
.apex .site-header .menu-toggle-open .kadence-svg-icon { color: inherit; }

/* Sub 1300px rândul se strânge: căutarea cedează prima, apoi meniul. */
@media (min-width: 1025px) and (max-width: 1400px) {
	.apex .site-main-header-inner-wrap { gap: 22px; }
	.apex .header-html .apex-cauta { max-width: 340px; }
	.apex .header-navigation .primary-menu-container > ul > li > a { font-size: 14.5px; }
}
@media (min-width: 1025px) and (max-width: 1150px) {
	.apex .header-html .apex-cauta { max-width: 250px; }
	.apex .header-html .apex-cauta button { padding: 0 14px; }
}
@media (max-width: 1024px) {
	.apex .header-html .apex-cauta { max-width: none; }
}

/* --------------------------------------------- 3. MOTIVE TEHNICE --- */
/* Colțurile de desen tehnic. Marchează panourile importante fără să adauge
   încă un chenar — două laturi, nu patru, ca la un cadru de decupaj. */
.apex-colturi {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
}
.apex-colturi::before,
.apex-colturi::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid var(--apex-amb);
	transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.apex-colturi::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.apex-colturi::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Grila de plan, pe fundalurile închise. Se stinge spre margini, ca să nu
   concureze cu textul. */
.apex-plan {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(115% 85% at 30% 0%, #000 30%, transparent 78%);
	mask-image: radial-gradient(115% 85% at 30% 0%, #000 30%, transparent 78%);
}

/* Litera de mașină pentru date tehnice: coduri, cote, numere de index. */
.apex-mono, .apex-cod-mare, .apex-card-cod, .apex-cap__idx, .apex-cap__eyebrow,
.apex-topbar, .apex-finder__eticheta, .apex-serii__lista a, .apex-cifra b,
.apex-pas__n, .apex-b2b__eticheta, .apex-cota b, .apex-spec-rapid b,
.apex-legate__cod, .apex-fisa__cod, .apex-card-serie {
	font-family: var(--apex-mono);
	font-variant-numeric: tabular-nums;
}

/* Bandă de avertizare — o folosim ca linie de secțiune, nu ca decor. */
.apex-sectiune--ink::before,
.apex-site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(
		-45deg, var(--apex-amb) 0 10px, var(--apex-ink) 10px 20px);
	opacity: .85;
	z-index: 3;
}

.apex-in {
	max-width: var(--apex-lat);
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	z-index: 2;
}
.apex-sectiune {
	position: relative;
	padding: 96px 0;
	overflow: hidden;
}
.apex-sectiune--canvas { background: var(--apex-canvas); }
.apex-sectiune--ink {
	background: var(--apex-ink);
	color: #fff;
}
.apex-sectiune--ink h1, .apex-sectiune--ink h2, .apex-sectiune--ink h3 { color: #fff; }
@media (max-width: 860px) { .apex-sectiune { padding: 64px 0; } }

/* ------------------------------------------------------- 4. BUTOANE --- */
.apex .apex-buton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 0;
	border-radius: 3px;
	padding: 14px 24px;
	font-family: var(--apex-font);
	font-weight: 800;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: -.01em;
	text-decoration: none;
	cursor: pointer;
	background: var(--apex-ink);
	color: #fff;
	box-shadow: 0 12px 24px -14px rgba(10, 13, 18, .8);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.apex .apex-buton svg { width: 18px; height: 18px; transition: transform .25s ease; }
.apex .apex-buton::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: var(--apex-amb);
	transition: width .28s ease;
}
.apex .apex-buton:hover {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -14px rgba(10, 13, 18, .9);
}
.apex .apex-buton:hover::after { width: 100%; }
.apex .apex-buton:hover svg { transform: translateX(4px); }

/* Chihlimbarul e rezervat angajamentelor mari: cere ofertă, adaugă în coș. */
.apex .apex-buton--accent {
	background: var(--apex-amb);
	color: var(--apex-ink);
	box-shadow: 0 14px 28px -14px rgba(255, 176, 32, .9);
}
.apex .apex-buton--accent:hover {
	background: var(--apex-amb-h);
	color: var(--apex-ink);
	box-shadow: 0 20px 34px -14px rgba(255, 176, 32, 1);
}
.apex .apex-buton--accent::after { background: var(--apex-ink); }

.apex .apex-buton--mare { padding: 17px 32px; font-size: 16px; }
.apex .apex-buton--linie,
.apex .apex-buton--fantoma,
.apex .apex-buton--oferta {
	background: transparent;
	color: var(--apex-txt);
	box-shadow: inset 0 0 0 2px var(--apex-line);
}
.apex .apex-buton--linie:hover,
.apex .apex-buton--fantoma:hover,
.apex .apex-buton--oferta:hover {
	background: transparent;
	color: var(--apex-txt);
	box-shadow: inset 0 0 0 2px var(--apex-ink);
	transform: translateY(-2px);
}
.apex-sectiune--ink .apex-buton--linie {
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25);
}

.apex-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--apex-amb);
	background: rgba(255, 176, 32, .1);
	border: 1px solid rgba(255, 176, 32, .3);
	padding: 7px 14px;
	border-radius: 2px;
}
.apex-eyebrow__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--apex-amb);
	animation: apexPuls 2.8s ease-out infinite;
}

/* -------------------------------------------------- 5. BARA DE SUS --- */
.apex-topbar {
	background: var(--apex-ink);
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.apex-topbar__in {
	max-width: var(--apex-lat);
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.apex-topbar__mesaj { display: inline-flex; align-items: center; gap: 9px; }
.apex-topbar__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--apex-stoc);
	box-shadow: 0 0 0 3px rgba(23, 145, 92, .22);
}
.apex-topbar__contact {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	white-space: nowrap;
}
.apex-topbar__sep,
.apex-topbar__contact em { color: rgba(255, 255, 255, .55); }
.apex-topbar a {
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: .04em;
}
.apex-topbar a:hover { color: var(--apex-amb); }
.apex-topbar em { font-style: normal; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) {
	.apex-topbar__mesaj, .apex-topbar__sep { display: none; }
	.apex-topbar__in { justify-content: center; }
}
@media (max-width: 540px) { .apex-topbar em { display: none; } }

/* ------------------------------------------------------ 6. CĂUTARE --- */
.apex-cauta { position: relative; display: flex; gap: 8px; }
.apex-cauta input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 48px;
	border: 2px solid var(--apex-line);
	border-radius: 3px;
	padding: 0 14px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--apex-txt);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.apex-cauta input[type="search"]::placeholder { color: #98a1b0; }
.apex-cauta input[type="search"]:focus {
	outline: none;
	border-color: var(--apex-amb);
	box-shadow: 0 0 0 4px rgba(255, 176, 32, .22);
}
.apex-cauta button {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 3px;
	background: var(--apex-ink);
	color: #fff;
	font: inherit;
	font-weight: 800;
	font-size: 14.5px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}
.apex-cauta button:hover { background: var(--apex-amb); color: var(--apex-ink); }

.apex-sugestii {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 60;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	box-shadow: 0 26px 50px -26px rgba(10, 13, 18, .55);
	overflow: hidden;
}
.apex .apex-sugestie {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 11px 14px;
	text-decoration: none;
	color: var(--apex-txt);
	font-size: 14px;
	border-bottom: 1px solid var(--apex-line);
}
.apex-sugestie:last-child { border-bottom: 0; }
.apex-sugestie:hover { background: var(--apex-canvas); color: var(--apex-txt); }
.apex-sugestie__cod {
	font-family: var(--apex-mono);
	font-weight: 600;
	font-size: 12.5px;
	flex: 0 0 auto;
	color: var(--apex-amb-d);
}
.apex-sugestie__nume {
	color: var(--apex-mut);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apex-sugestie__pret { margin-left: auto; font-weight: 800; flex: 0 0 auto; }

/* Sugestia de categorie: răspunsul la o căutare în română („cheie cu impact")
   e o categorie, nu un cod. Se citește altfel decât un produs, ca să nu pară
   un articol de catalog cu prețul lipsă. */
.apex .apex-sugestie--cat { background: var(--apex-canvas); }
.apex .apex-sugestie--cat .apex-sugestie__cod {
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--apex-mut);
}
.apex .apex-sugestie--cat .apex-sugestie__nume { color: var(--apex-txt); font-weight: 700; }
.apex .apex-sugestie--cat .apex-sugestie__pret { font-weight: 500; font-size: 12.5px; color: var(--apex-mut); }

/* --------------------------------------------------------- 7. HERO --- */
.apex-hero {
	position: relative;
	background: var(--apex-ink);
	color: #fff;
	padding: 76px 0 150px;
	overflow: hidden;
	isolation: isolate;
}
/* Fundalul: două lumini, hașura diagonală a unui desen tehnic și grila de
   plan — toate stinse spre margini, ca textul să rămână prima citire. */
.apex-hero__fundal {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(58% 70% at 78% 22%, rgba(255, 176, 32, .16), transparent 62%),
		radial-gradient(60% 80% at 12% 8%, rgba(18, 99, 210, .3), transparent 60%),
		var(--apex-ink);
}
.apex-hero__fundal::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 20%, transparent 80%);
	mask-image: radial-gradient(120% 90% at 20% 10%, #000 20%, transparent 80%);
}
.apex-hero__fundal::after {
	content: "";
	position: absolute;
	inset: -40%;
	background: repeating-linear-gradient(
		-45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 13px);
	-webkit-mask-image: radial-gradient(50% 50% at 76% 46%, #000 0%, transparent 72%);
	mask-image: radial-gradient(50% 50% at 76% 46%, #000 0%, transparent 72%);
}

.apex-hero__in {
	position: relative;
	z-index: 2;
	max-width: var(--apex-lat);
	margin: 0 auto;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	gap: 48px;
	align-items: center;
}
.apex-hero__copy { max-width: 640px; }
.apex .apex-hero__titlu {
	margin: 22px 0 18px;
	font-size: clamp(40px, 5.2vw, 66px);
	line-height: .98;
	letter-spacing: -.035em;
	color: #fff;
}
.apex .apex-hero__titlu em {
	font-style: normal;
	color: var(--apex-amb);
	position: relative;
}
.apex-hero__sub {
	margin: 0 0 30px;
	font-size: 17.5px;
	line-height: 1.62;
	color: var(--apex-otel2);
	max-width: 560px;
}

/* Panoul de căutare: piesa centrală. Sticlă peste cerneală, cu colțuri de
   desen tehnic — se citește ca un instrument, nu ca un câmp de formular. */
.apex-finder {
	position: relative;
	background: rgba(23, 30, 40, .72);
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 4px;
	padding: 18px 20px 16px;
	box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .9);
}
.apex-finder__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.apex-finder__titlu {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #fff;
}
.apex-finder__titlu svg { width: 15px; height: 15px; color: var(--apex-amb); }
.apex-finder__help {
	font-size: 13px;
	font-weight: 700;
	color: var(--apex-amb);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 176, 32, .45);
}
.apex-finder__help:hover { color: var(--apex-amb-h); }
.apex-finder .apex-cauta input[type="search"] {
	height: 52px;
	background: rgba(10, 13, 18, .72);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	font-size: 16px;
}
.apex-finder .apex-cauta input[type="search"]::placeholder { color: rgba(255, 255, 255, .42); }
.apex-finder .apex-cauta input[type="search"]:focus {
	background: rgba(10, 13, 18, .92);
	border-color: var(--apex-amb);
	box-shadow: 0 0 0 4px rgba(255, 176, 32, .18);
}
.apex-finder .apex-cauta button {
	height: 52px;
	background: var(--apex-amb);
	color: var(--apex-ink);
	padding: 0 26px;
}
.apex-finder .apex-cauta button:hover { background: var(--apex-amb-h); }
.apex-finder__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.apex-finder__eticheta {
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .4);
	margin-right: 2px;
}
/* Pastilele de sub casetă duc direct într-o familie de scule, dar la un
   chenar de 14% opacitate se citeau ca niște etichete, nu ca niște butoane.
   Acum au fond, chenar vizibil și lupa în față — se vede că se apasă. */
.apex-finder__foot a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 650;
	color: #fff;
	text-decoration: none;
	padding: 7px 13px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .26);
	border-radius: 2px;
	transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.apex-finder__foot a svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	color: var(--apex-amb);
	transition: color .18s ease;
}
.apex-finder__foot a:hover,
.apex-finder__foot a:focus-visible {
	color: var(--apex-ink);
	background: var(--apex-amb);
	border-color: var(--apex-amb);
	transform: translateY(-1px);
}
.apex-finder__foot a:hover svg,
.apex-finder__foot a:focus-visible svg { color: var(--apex-ink); }
@media (max-width: 600px) {
	/* Eticheta rămânea lipită de prima pastilă și rupea rândul aiurea. */
	.apex-finder__eticheta { flex: 0 0 100%; margin: 0 0 2px; }
}

.apex .apex-hero__ajutor {
	margin: 18px 0 0;
	font-size: 14.5px;
	color: var(--apex-otel);
}
.apex-hero__ajutor a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.apex-hero__ajutor a:hover { color: var(--apex-amb); }

/* Vizualul: unealta pe un banc de măsurare, cu cotele ei reale.
   Poza are aer în jur (silueta ocupă 5–95% din cadru) și masa ei stă în
   stânga-sus: centroidul alfa e la 39% / 36% din poză. Bancul se centrează
   pe centroid, nu pe coloană — centrat pe coloană, lumina caldă cădea în
   colțul gol din dreapta-jos și unealta părea așezată lângă propriul fundal. */
.apex-hero__vis {
	position: relative;
	margin: 0;
	min-height: 520px;
}
.apex-hero__banc {
	position: absolute;
	/* Centrul bancului = centrul de masă al siluetei uneltei afișate; se
	   schimbă odată cu unealta (variabile scrise de PHP și mutate din JS). */
	left: var(--apex-banc-x, 31%);
	top: var(--apex-banc-y, 33%);
	width: 400px;
	height: 400px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, rgba(255, 176, 32, .2), transparent 66%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.apex-hero__banc::before,
.apex-hero__banc::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, .1);
}
.apex-hero__banc::before { inset: 17%; }
.apex-hero__banc::after  { inset: 34%; border-style: solid; border-color: rgba(255, 255, 255, .055); }

/* Unealta stă într-un înveliș: învelișul face schimbarea (opacitate +
   alunecare, tranziție), poza de dedesubt își ține plutirea (animație).
   Pe același element, `animation` ar fi bătut `transition` pe transform. */
.apex-hero__unealta {
	position: absolute;
	left: -1%;
	top: 2%;
	z-index: 2;
	width: 82%;
	display: block;
	transition: opacity .42s cubic-bezier(.2, .7, .3, 1), transform .42s cubic-bezier(.2, .7, .3, 1);
}
.apex-hero__unealta.este-iese { opacity: 0; transform: translate3d(-28px, 0, 0) scale(.97); }
.apex-hero__unealta.este-vine { opacity: 0; transform: translate3d(28px, 0, 0) scale(.97); transition: none; }
.apex-hero__scula {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55));
	animation: apexPlutire 8s ease-in-out infinite;
	will-change: transform;
}
/* Bancul alunecă spre centrul noii unelte. */
.apex-hero__banc { transition: left .6s cubic-bezier(.2, .7, .3, 1), top .6s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1); }

/* Cotele — o coloană sprijinită pe o riglă de chihlimbar, așezată exact în
   colțul pe care silueta îl lasă liber: sub anvilă, la dreapta mânerului.
   Valorile vin din atributele produsului.
   ⚠️ Fără `backdrop-filter` aici. Împreună cu animația de opacitate de mai
   jos, Chrome compozita panourile și le lăsa la opacitate 0 — cotele existau
   în pagină, se puteau selecta și măsura, dar nu se desenau niciodată. */
.apex-cote {
	position: absolute;
	right: 0;
	bottom: 9%;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
	border-left: 2px solid var(--apex-amb);
}
.apex-cota {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 9px 13px;
	background: rgba(16, 21, 29, .92);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 2px;
	white-space: nowrap;
}
.apex-cota b {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -.01em;
	word-spacing: -.18em;
}
.apex-cota span {
	font-size: 12px;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--apex-otel);
}

.apex-hero__legenda {
	position: absolute;
	bottom: 0;
	left: 0;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--apex-otel);
}
.apex-hero__legenda a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	gap: 7px;
	color: var(--apex-otel);
	text-decoration: none;
}
.apex-hero__legenda a:hover { color: var(--apex-amb); }
.apex-hero__legenda svg { width: 14px; height: 14px; }
.apex-hero__legenda-link span { transition: opacity .3s ease; }
.apex .apex-hero__sub a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 176, 32, .55); text-underline-offset: 3px; }
.apex .apex-hero__sub a:hover { color: var(--apex-amb); }
.apex-subsol__marci { margin: 14px 0 0; font-size: 13px; color: var(--apex-otel); }
.apex-subsol__marci span { color: rgba(255, 255, 255, .45); margin-right: 4px; }
.apex .apex-subsol__marci a { color: #fff; text-decoration: none; }
.apex .apex-subsol__marci a:hover { color: var(--apex-amb); }
.apex-hero__legenda.este-iese .apex-hero__legenda-link span { opacity: 0; }
/* Punctele: câte o unealtă, cea curentă e o liniuță de chihlimbar. */
.apex-hero__puncte {
	display: flex;
	gap: 0;
	align-items: center;
	margin-top: 10px;
}
.apex .apex-hero__punct {
	position: relative;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: width .3s ease;
}
/* Liniuța se vede la 14px x 3px, dar butonul are 24px pe 24px: cât cere
   Google pentru o țintă de atingere. */
.apex .apex-hero__punct::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 5px;
	right: 5px;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .22);
	transition: background .3s ease;
}
.apex .apex-hero__punct:hover::before { background: rgba(255, 255, 255, .5); }
.apex .apex-hero__punct.este-activ { width: 44px; }
.apex .apex-hero__punct.este-activ::before { background: var(--apex-amb); }
.apex .apex-hero__punct:focus-visible { outline: 2px solid var(--apex-amb); outline-offset: 3px; }

@media (max-width: 1100px) {
	.apex-hero__in { grid-template-columns: 1fr; gap: 34px; }
	.apex-hero__copy { max-width: none; }
	/* Pe o coloană unealta intră în flux: absolută, ieșea din hero pe sus. */
	.apex-hero__vis { min-height: 0; order: -1; display: flex; justify-content: center; }
	.apex-hero__unealta { position: static; width: min(74%, 360px); }
	/* Poza e centrată, dar masa uneltei stă la 39,3% din ea — deci bancul se
	   mută cu 10,7% din lățimea pozei la stânga de centru. Scris ca `min()`,
	   ca să urmeze poza și când ea trece de la procente la pixeli. */
	.apex-hero__banc {
		left: calc(50% - min(7.92%, 38.5px));
		top: 36%; width: 330px; height: 330px;
	}
	.apex-cote, .apex-hero__legenda { display: none; }
}
@media (max-width: 640px) {
	.apex-hero { padding: 48px 0 120px; }
	.apex-hero__unealta { width: min(72%, 290px); }
	.apex-hero__banc { left: calc(50% - min(7.7%, 31px)); width: 260px; height: 260px; }
	.apex-finder { padding: 15px 15px 14px; }
	.apex-finder .apex-cauta { flex-direction: column; }
	.apex-finder .apex-cauta button { width: 100%; }
}

/* ---------------------------------------------------------- 8. USP --- */
.apex-usps-wrap {
	max-width: var(--apex-lat);
	margin: -64px auto 0;
	padding: 0 24px;
	position: relative;
	z-index: 5;
}
.apex-usps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-amb);
	border-radius: 3px;
	box-shadow: 0 34px 60px -38px rgba(10, 13, 18, .55);
	overflow: hidden;
}
.apex-usp {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px;
	border-right: 1px solid var(--apex-line);
}
.apex-usp:last-child { border-right: 0; }
.apex-usp__ic {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--apex-ink);
	color: var(--apex-amb);
	border-radius: 2px;
}
.apex-usp__ic svg { width: 21px; height: 21px; }
.apex-usp__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apex-usp__txt strong { font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
.apex-usp__txt span { font-size: 13px; color: var(--apex-mut); }
@media (max-width: 1000px) {
	.apex-usps { grid-template-columns: repeat(2, 1fr); }
	.apex-usp:nth-child(2n) { border-right: 0; }
	.apex-usp:nth-child(-n+2) { border-bottom: 1px solid var(--apex-line); }
}
@media (max-width: 560px) {
	.apex-usps-wrap { margin-top: -52px; }
	.apex-usp { padding: 16px; gap: 11px; }
	.apex-usp__ic { width: 36px; height: 36px; }
	.apex-usp__txt strong { font-size: 13.5px; }
	.apex-usp__txt span { font-size: 12px; }
}

/* ------------------------------------------------------ 9. CAPURI --- */
.apex-cap { margin-bottom: 44px; max-width: 760px; }
.apex-cap__linie {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.apex-cap__idx {
	font-size: 12px;
	font-weight: 600;
	color: var(--apex-amb-d);
	letter-spacing: .06em;
}
.apex-cap__rule {
	width: 46px;
	height: 2px;
	background: var(--apex-amb);
	flex: 0 0 auto;
}
.apex-cap__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--apex-mut);
}
.apex .apex-cap__titlu {
	margin: 0;
	font-size: clamp(29px, 3.6vw, 44px);
	letter-spacing: -.032em;
	line-height: 1.04;
}
.apex .apex-cap__titlu em { font-style: normal; color: var(--apex-amb-d); }
.apex .apex-cap__sub {
	margin: 15px 0 0;
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--apex-mut);
}
.apex-cap--ink .apex-cap__idx { color: var(--apex-amb); }
.apex-cap--ink .apex-cap__eyebrow { color: var(--apex-otel); }
.apex-cap--ink .apex-cap__sub { color: var(--apex-otel2); }
.apex .apex-cap--ink .apex-cap__titlu em { color: var(--apex-amb); }

/* --------------------------------------------------- 10. CATEGORII --- */
/* Cardul e o fișă de catalog: planșa cu piesa sus, datele jos. Structura e
   fixă — planșă de aceeași înălțime, titlu pe două rânduri rezervate, un rând
   pentru subcategorii — ca titlurile și linkurile să cadă pe aceeași linie în
   tot rândul, indiferent cât de lungi sunt numele. Înainte, cardurile își
   așezau textul de la baza lor în sus și nimic nu se alinia. */
.apex-cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 16px;
}
.apex-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	text-decoration: none;
	color: var(--apex-txt);
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease;
}
.apex-cat .apex-colturi::before,
.apex-cat .apex-colturi::after { width: 12px; height: 12px; opacity: 0; }
/* Cardul nu se ridică la hover: linkul de la bază s-ar muta sub cursor exact
   când omul întinde mouse-ul spre el. */
.apex-cat:hover {
	color: var(--apex-txt);
	border-color: var(--apex-ink);
	box-shadow: 0 26px 44px -30px rgba(10, 13, 18, .6);
}
.apex-cat:hover .apex-colturi::before,
.apex-cat:hover .apex-colturi::after { opacity: 1; width: 18px; height: 18px; }

/* Planșa: celulă albă cu caroiaj de desen tehnic. Albă pentru că pozele de la
   producător au fundal alb propriu, care s-ar vedea ca un dreptunghi peste
   orice altă nuanță; caroiajul trece prin el fiindcă poza se înmulțește. */
.apex-cat__plansa {
	position: relative;
	flex: 0 0 auto;
	height: 156px;
	padding: 30px 22px 20px;
	background-color: #fff;
	background-image:
		linear-gradient(rgba(15, 19, 26, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 19, 26, .045) 1px, transparent 1px);
	background-size: 22px 22px;
	border-bottom: 1px solid var(--apex-line);
}
/* Linia de accent crește din stânga la hover, peste chenar — nu mișcă nimic. */
.apex-cat__plansa::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--apex-amb);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.apex-cat:hover .apex-cat__plansa::after { transform: scaleX(1); }

/* Numărul de repere e eticheta planșei, nu un rând de text peste titlu. */
.apex-cat__nr {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px 3px 7px;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--apex-mut);
	background: rgba(255, 255, 255, .92);
	border: 1px solid var(--apex-line);
	border-radius: 2px;
}
.apex-cat__nr::before {
	content: "";
	width: 5px;
	height: 5px;
	background: var(--apex-amb);
}

/* Toate pozele umplu aceeași cutie: una lungă și subțire (o daltă) se întinde
   pe lățime, una compactă (o cheie) pe înălțime. Fără asta, cutia fixă de
   118px lăsa dalta la 46px înălțime, plutind în gol. */
.apex-cat__poza {
	position: absolute;
	inset: 30px 22px 20px;
	display: grid;
	place-items: center;
	pointer-events: none;
}
/* Poza se așază peste toată celula și se potrivește înăuntrul ei
   (`object-fit`). Trebuie ancorată absolut: într-o celulă de grilă înălțimea
   rândului se calculează din conținut, deci un `height: 100%` pe imagine e
   circular și browserul îl citește ca `auto` — poza pătrată ieșea atunci de
   două ori peste planșă. */
.apex-cat__poza img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	mix-blend-mode: multiply;
	transition: transform .35s cubic-bezier(.2, .7, .3, 1);
}
.apex-cat:hover .apex-cat__poza img { transform: scale(1.06); }
.apex-cat__poza svg { width: 52px; height: 52px; color: var(--apex-canvas2); }

.apex-cat__jos {
	position: relative;
	z-index: 2;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	padding: 15px 17px 14px;
}
.apex-cat__nume {
	color: var(--apex-txt);
	font-family: var(--apex-disp);
	font-weight: 800;
	font-size: 19.5px;
	letter-spacing: -.028em;
	line-height: 1.14;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Rândul de subcategorii se împinge la baza blocului („margin-top: auto"),
   deci titlul stă lipit de planșă, iar subcategoriile și linkul cad pe aceeași
   linie în tot rândul — și când titlul are un rând, și când are două. */
.apex-cat__copii {
	margin-top: auto;
	padding-top: 10px;
	font-size: 12.5px;
	color: var(--apex-mut);
	line-height: 1.45;
	min-height: 1.45em;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Linkul se lipește de baza cardului („margin-top: auto"), deci cade la
   aceeași înălțime în tot rândul. Linia de deasupra lui ține lățimea
   cardului: e talpa fișei, nu un buton pierdut în alb. */
.apex .apex-cat__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--apex-line);
	font-size: 13px;
	font-weight: 800;
	color: var(--apex-txt);
}
.apex-cat__link svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .25s ease; }
.apex-cat:hover .apex-cat__link { color: var(--apex-amb-d); }
.apex-cat:hover .apex-cat__link svg { transform: translateX(4px); }

/* Categoria fără fotografie proprie — „Piese de schimb", cea mai mare din
   catalog — arăta ca un card stricat: chenar alb cu o iconiță gri. Planșa ei
   e acum de cerneală hașurată, deci absența pozei citește ca decizie. */
.apex-cat--simbol .apex-cat__plansa {
	background-color: var(--apex-ink);
	background-image:
		radial-gradient(90% 80% at 50% 15%, rgba(255, 176, 32, .16), transparent 65%),
		repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 11px);
	background-size: auto, auto;
	border-bottom-color: var(--apex-ink);
}
.apex-cat--simbol .apex-cat__nr {
	color: var(--apex-otel2);
	background: rgba(255, 255, 255, .07);
	border-color: rgba(255, 255, 255, .16);
}
.apex-cat--simbol .apex-cat__poza svg { color: var(--apex-amb); }

/* Cardul mare rupe ritmul grilei: catalogul are un cap de listă evident. */
.apex-cat--mare {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--apex-ink);
	border-color: var(--apex-ink);
	color: #fff;
}
.apex-cat--mare .apex-cat__plansa { flex: 1 1 auto; height: auto; min-height: 260px; }
.apex-cat--mare .apex-cat__jos { padding: 22px 26px 22px; }
.apex-cat--mare:hover { border-color: var(--apex-amb); }
.apex-cat--mare .apex-cat__nume { font-size: 32px; color: #fff; }
.apex-cat--mare .apex-cat__copii { color: var(--apex-otel2); font-size: 14px; }
.apex .apex-cat--mare .apex-cat__link { color: #fff; border-top-color: rgba(255, 255, 255, .16); }
.apex-cat--mare:hover .apex-cat__link { color: var(--apex-amb); }

/* Tema pune `margin: 0` pe orice paragraf din conținut (`.single-content p`,
   doi selectori), deci o clasă singură nu ajungea: cele trei paragrafe de mai
   jos își pierdeau marja de sus și se lipeau de blocul dinaintea lor. */
.apex .apex-tot { margin: 34px 0 0; text-align: center; }

@media (max-width: 1000px) {
	.apex-cats { grid-template-columns: repeat(2, 1fr); }
	/* Pe două coloane cardul e mult mai lat: cu planșa tot de 156px, scula
	   plutea într-o bandă. Crește odată cu lățimea. */
	.apex-cat__plansa { height: 196px; }
	.apex-cat__poza { inset: 34px 26px 24px; }
	.apex-cat--mare { grid-column: span 2; grid-row: auto; }
	.apex-cat--mare .apex-cat__plansa { min-height: 220px; }
}
@media (max-width: 600px) {
	/* Două coloane și pe telefon: o singură coloană ar face patru ecrane de
	   derulat până la primul produs. */
	.apex-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.apex-cat--mare { grid-column: span 2; }
	.apex-cat__plansa { height: 116px; padding: 24px 14px 14px; background-size: 18px 18px; }
	.apex-cat__poza { inset: 24px 14px 14px; }
	.apex-cat__nr { top: 7px; left: 7px; font-size: 12px; padding: 2px 6px 2px 5px; }
	.apex-cat__jos { padding: 12px 12px 11px; }
	.apex-cat__nume { font-size: 16px; -webkit-line-clamp: 3; }
	.apex-cat__copii { font-size: 12px; }
	.apex .apex-cat__link { font-size: 12px; padding-top: 10px; }
	.apex-cat--mare .apex-cat__nume { font-size: 22px; }
}

/* ------------------------------------------- 11. PIESE + CIFRE --- */
.apex-piese__in {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 56px;
	align-items: center;
}
.apex-piese__p {
	margin: 0 0 24px;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--apex-otel2);
	max-width: 560px;
}
.apex-piese__lista { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 11px; }
.apex-piese__lista li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15.5px;
	color: #fff;
}
.apex-piese__lista svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	color: var(--apex-amb);
}
.apex-piese__panou {
	position: relative;
	background: rgba(23, 30, 40, .6);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 4px;
	padding: 30px;
}
.apex-cifre {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 3px;
	overflow: hidden;
}
.apex-cifra {
	background: var(--apex-ink2);
	padding: 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.apex-cifra b {
	font-size: 33px;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--apex-amb);
	line-height: 1;
}
.apex-cifra span {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--apex-otel);
}
.apex-serii { margin-top: 24px; }
.apex-serii__eticheta {
	display: block;
	margin-bottom: 11px;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-otel);
}
.apex-serii__lista { display: flex; flex-wrap: wrap; gap: 7px; }
.apex-serii__lista a {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	padding: 6px 11px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 2px;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.apex-serii__lista a:hover {
	background: var(--apex-amb);
	border-color: var(--apex-amb);
	color: var(--apex-ink);
}
@media (max-width: 980px) {
	.apex-piese__in { grid-template-columns: 1fr; gap: 36px; }
	.apex-piese__panou { padding: 22px; }
}
@media (max-width: 520px) {
	.apex-cifre { grid-template-columns: 1fr; }
	.apex-cifra b { font-size: 28px; }
}

/* -------------------------------------------------------- 12. PAȘI --- */
.apex-pasi {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	counter-reset: pas;
}
.apex-pas {
	position: relative;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	padding: 26px 24px 24px;
}
/* Linia punctată dintre pași: fișa de lucru se citește în ordine. */
.apex-pas::after {
	content: "";
	position: absolute;
	top: 42px;
	left: 100%;
	width: 20px;
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--apex-line) 0 4px, transparent 4px 8px);
}
.apex-pas:last-child::after { display: none; }
/* Bloc, nu inline: ca `inline-flex` insigna stătea pe linia de bază a unui rând
   de text și adăuga un gol de 20px sub ea. */
.apex-pas__n {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--apex-ink);
	background: var(--apex-amb);
	border-radius: 2px;
}
.apex .apex-pas h3 { margin: 0 0 9px; font-size: 19px; letter-spacing: -.026em; }
.apex-pas p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--apex-mut); }
.apex-pas p b { color: var(--apex-txt); font-weight: 800; }
@media (max-width: 900px) {
	.apex-pasi { grid-template-columns: 1fr; }
	.apex-pas::after { display: none; }
}

/* --------------------------------------------------------- 13. B2B --- */
.apex-b2b__in {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 56px;
	align-items: center;
}
.apex-b2b__p {
	margin: 0 0 22px;
	font-size: 16.5px;
	line-height: 1.68;
	color: var(--apex-otel2);
	max-width: 540px;
}
.apex-b2b__lista { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 11px; }
.apex-b2b__lista li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: #fff; }
.apex-b2b__lista svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--apex-amb); }
.apex-b2b__card {
	position: relative;
	background: var(--apex-ink2);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 4px;
	padding: 30px;
}
.apex-b2b__eticheta {
	display: block;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--apex-otel);
	margin-bottom: 10px;
}
.apex-b2b__tel { margin: 0 0 22px; }
.apex-b2b__tel a {
	font-family: var(--apex-disp);
	font-size: clamp(28px, 3.4vw, 38px);
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--apex-amb);
	text-decoration: none;
}
.apex-b2b__tel a:hover { color: var(--apex-amb-h); }
.apex-b2b__date { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 9px 14px; }
.apex-b2b__date dt {
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--apex-otel);
	padding-top: 2px;
}
.apex-b2b__date dd { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .88); line-height: 1.5; }
.apex-b2b__date dd a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.apex-b2b__date dd a:hover { color: var(--apex-amb); }
@media (max-width: 980px) {
	.apex-b2b__in { grid-template-columns: 1fr; gap: 34px; }
	.apex-b2b__card { padding: 22px; }
}

/* --------------------------------------------- 14. CARDURI PRODUS --- */
/* Cardul NU se ridică la hover: butonul de la baza lui s-ar muta sub cursor
   exact când omul întinde mouse-ul spre el. Hover = contur + umbră + zoom pe
   fotografie; nimic nu se deplasează. */
.apex ul.products {
	display: grid !important;
	gap: 18px;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}
/* Tema își numără coloanele cu clasele ei (`grid-lg-col-4`), nu cu
   `columns-N` al WooCommerce, și le impune cu `!important` — deci grila
   proprie trebuie scrisă pe ambele familii de clase. */
.apex ul.products,
.apex ul.products.grid-cols,
.apex ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.apex ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.apex ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* În catalog, coloana de filtre lasă mai puțin loc: trei carduri respiră mai
   bine decât patru înghesuite. */
.apex-magazin__grila ul.products,
.apex-magazin__grila ul.products.grid-cols {
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.apex ul.products li.product {
	position: relative;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .22s ease, box-shadow .22s ease;
}
.apex ul.products li.product:hover {
	border-color: var(--apex-ink);
	box-shadow: 0 24px 40px -28px rgba(10, 13, 18, .6);
}
/* Kadence ridică blocul de text cu 32px la hover ca să scoată butonul la
   iveală; noi îl arătăm oricum, deci mișcarea e doar deranj. */
.apex ul.products li.product .product-details,
.apex ul.products li.product:hover .product-details {
	transform: none !important;
	padding: 0 !important;
	background: none !important;
}
.apex ul.products li.product .product-action-wrap { position: static !important; opacity: 1 !important; }

.apex ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}
/* Celula de imagine e ALBĂ, nu gri: pozele de la producător au fundal alb
   propriu, care s-ar vedea ca un dreptunghi peste orice altă nuanță. */
.apex ul.products li.product img,
.apex ul.products li.product .product-image {
	background: #fff;
	margin: 0 !important;
	border-radius: 0 !important;
}
/* Aceeași planșă ca la cardurile de categorie: celulă albă (pozele de la
   producător au fundal alb propriu) cu caroiajul fin de desen tehnic, care se
   vede prin poză fiindcă imaginea se înmulțește peste fundal. */
.apex ul.products li.product > a.woocommerce-loop-image-link {
	position: relative;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
	padding: 18px;
	border-bottom: 1px solid var(--apex-line);
	overflow: hidden;
	background-color: #fff;
	background-image:
		linear-gradient(rgba(15, 19, 26, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 19, 26, .04) 1px, transparent 1px);
	background-size: 22px 22px;
}
.apex ul.products li.product > a.woocommerce-loop-image-link > img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform .4s cubic-bezier(.2, .7, .3, 1);
}
.apex ul.products li.product:hover > a.woocommerce-loop-image-link > img { transform: scale(1.06); }
/* Substituentul „fotografie în curs de pregătire" își are propriul caroiaj
   desenat; două caroiaje suprapuse la pași diferiți fac muar. */
.apex ul.products li.product > a.woocommerce-loop-image-link:has(.apex-fara-poza) { background-image: none; }

/* Blocul de text e coloană: marca urcă deasupra titlului prin ordine, iar
   butonul rămâne lipit de baza cardului, oricât de lung e titlul. */
.apex ul.products li.product .product-details {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.apex ul.products li.product .product-details .apex-card-marca { order: -1; }
.apex ul.products li.product .product-action-wrap { margin-top: 0 !important; }

/* Etichetele de stare stau peste fotografie. */
.apex-card-badges {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
.apex-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .02em;
	padding: 5px 9px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border: 1px solid var(--apex-line);
	color: var(--apex-txt);
}
.apex-badge i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex: 0 0 auto;
}
.apex-badge--stoc { color: var(--apex-stoc); border-color: rgba(23, 145, 92, .35); }
.apex-badge--comanda { color: var(--apex-comanda); border-color: rgba(154, 98, 0, .3); }
.apex-badge--fara { color: var(--apex-mut); }
.apex-badge--piesa {
	color: #fff;
	background: var(--apex-ink);
	border-color: var(--apex-ink);
}

/* Marca, deasupra titlului. */
.apex-card-marca {
	display: block;
	padding: 14px 16px 0;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--apex-mut);
}
.apex ul.products li.product h2.woocommerce-loop-product__title,
.apex ul.products li.product h2.apex-card-titlu {
	margin: 4px 0 0;
	padding: 0 16px;
	font-family: var(--apex-disp);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.028em;
	line-height: 1.2;
	color: var(--apex-txt);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.2em);
}
.apex ul.products li.product h2.woocommerce-loop-product__title a {
	color: inherit;
	text-decoration: none;
}
.apex-card-serie {
	display: block;
	padding: 4px 16px 0;
	font-size: 12px;
	color: var(--apex-mut);
	letter-spacing: .02em;
}
/* Datele de comandă: codul și specificația-cheie, fiecare pe rândul ei. Pe un
   rând comun s-ar rupe altfel pe fiecare lățime de card și listarea ar arăta
   zdrențuită. */
.apex-card-date {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 10px 16px 0;
}
.apex-card-cod {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--apex-txt);
	background: var(--apex-canvas);
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	padding: 4px 8px;
}
.apex-card-spec {
	font-size: 12px;
	font-weight: 700;
	color: var(--apex-txt);
	border: 1px solid var(--apex-line);
	border-left: 2px solid var(--apex-amb);
	border-radius: 2px;
	padding: 4px 8px;
}
.apex-card-spec i {
	font-style: normal;
	font-weight: 500;
	color: var(--apex-mut);
	margin-right: 5px;
}
/* Prețul se lipește de baza cardului: de la el în jos totul se aliniază între
   carduri, oricât de diferite sunt titlurile de deasupra. */
.apex ul.products li.product .price {
	display: block;
	margin: 0 !important;
	margin-top: auto !important;
	padding: 12px 16px 0;
	font-family: var(--apex-disp);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--apex-txt);
}
.apex ul.products li.product .price del { font-size: 15px; color: var(--apex-mut); font-weight: 600; }
.apex-card-tva {
	display: block;
	padding: 2px 16px 0;
	font-size: 12px;
	color: var(--apex-mut);
}
.apex ul.products li.product .product-action-wrap .button,
.apex ul.products li.product .apex-buton,
.apex ul.products li.product .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 14px 16px 16px !important;
	width: calc(100% - 32px);
	padding: 12px 16px !important;
	border: 0;
	border-radius: 3px;
	background: var(--apex-ink) !important;
	color: #fff !important;
	font-family: var(--apex-font);
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.apex ul.products li.product .product-action-wrap .button:hover,
.apex ul.products li.product .apex-buton:hover,
.apex ul.products li.product .button:hover {
	background: var(--apex-amb) !important;
	color: var(--apex-ink) !important;
}
.apex ul.products li.product .apex-buton--oferta {
	background: transparent !important;
	color: var(--apex-txt) !important;
	box-shadow: inset 0 0 0 2px var(--apex-line);
}
.apex ul.products li.product .added_to_cart { display: none; }

/* Semnul pentru produsele fără fotografie. */
.apex-fara-poza {
	display: grid;
	place-items: center;
	gap: 8px;
	width: 100%;
	aspect-ratio: 1 / 1;
	color: var(--apex-canvas2);
	background: #fff;
}
.apex-fara-poza svg { width: 54px; height: 54px; }
.apex-fara-poza em {
	font-style: normal;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--apex-mut);
}

@media (max-width: 1100px) {
	.apex ul.products,
	.apex ul.products.grid-cols,
	.apex ul.products.columns-4,
	.apex-magazin__grila ul.products,
	.apex-magazin__grila ul.products.grid-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}
/* Două coloane pe telefon, nu una: cardurile pe toată lățimea transformă
   catalogul într-un derulaj fără sfârșit. */
@media (max-width: 820px) {
	.apex ul.products,
	.apex ul.products.grid-cols,
	.apex ul.products.columns-4,
	.apex ul.products.columns-3,
	.apex-magazin__grila ul.products,
	.apex-magazin__grila ul.products.grid-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 560px) {
	.apex ul.products { gap: 10px; }
	.apex ul.products li.product .product-image { padding: 10px; }
	.apex ul.products li.product h2.apex-card-titlu {
		font-size: 14.5px;
		padding: 0 11px;
		-webkit-line-clamp: 3;
		min-height: calc(3 * 1.2em);
	}
	.apex-card-marca { padding: 11px 11px 0; }
	.apex-card-date, .apex-card-serie { padding-left: 11px; padding-right: 11px; }
	.apex ul.products li.product .price { font-size: 18px; padding: 12px 11px 0; }
	.apex-card-tva { padding: 2px 11px 0; }
	.apex ul.products li.product .apex-buton,
	.apex ul.products li.product .button {
		margin: 12px 11px 12px !important;
		margin-top: auto !important;
		width: calc(100% - 22px);
		font-size: 12.5px;
	}
}

/* ---------------------------------------------------- 15. MAGAZIN --- */
.apex-antet-catalog {
	padding: 34px 0 26px;
	border-bottom: 1px solid var(--apex-line);
	margin-bottom: 28px;
}
.apex-antet-catalog .woocommerce-breadcrumb,
.apex .woocommerce-breadcrumb {
	font-size: 12.5px;
	color: var(--apex-mut);
	margin: 0 0 14px !important;
	padding: 0;
}
.apex .woocommerce-breadcrumb a { color: var(--apex-mut); text-decoration: none; }
.apex .woocommerce-breadcrumb a:hover { color: var(--apex-txt); }
/* Pe pagina de produs firimiturile sunt desenate de temă, cu alt nume și cu
   linkuri albastre subliniate — singura pată de albastru rămasă deasupra
   liniei de plutire. */
.apex .kadence-breadcrumbs {
	font-size: 13px;
	color: var(--apex-mut);
	letter-spacing: .01em;
}
.apex .kadence-breadcrumbs a { color: var(--apex-mut); text-decoration: none; }
.apex .kadence-breadcrumbs a:hover { color: var(--apex-txt); text-decoration: none; }
.apex .kadence-breadcrumbs .kadence-bread-sep { color: var(--apex-otel2); }
.apex .kadence-breadcrumbs .bc-delimiter { font-size: 0; color: var(--apex-otel2); }
.apex .kadence-breadcrumbs .bc-delimiter::before { content: '›'; font-size: 13px; }
.apex .apex-antet-catalog h1 {
	margin: 0;
	font-size: clamp(28px, 3.4vw, 40px);
	letter-spacing: -.032em;
}
.apex-antet-catalog > p {
	margin: 12px 0 0;
	max-width: 720px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--apex-mut);
}
.apex-subcategorii {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
}
.apex-subcategorii a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--apex-txt);
	text-decoration: none;
	padding: 8px 13px;
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
.apex-subcategorii a span {
	font-family: var(--apex-mono);
	font-size: 12px;
	color: var(--apex-mut);
}
/* Aceeași problemă ca la pastilele din hero: casete albe cu chenar subțire,
   care se citeau ca etichete. Săgeata apare la trecerea peste, chenarul se
   face de chihlimbar — pastila arată acum că duce undeva. */
.apex-subcategorii a svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	margin-left: 1px;
	color: var(--apex-mut);
	opacity: .7;
	transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.apex-subcategorii a {
	box-shadow: 0 1px 0 rgba(16, 22, 31, .05);
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.apex-subcategorii a:hover,
.apex-subcategorii a:focus-visible {
	/* Fără culoare explicită, pastila prelua albastrul de legătură al site-ului
	   și numele sărea din cerneală în albastru la trecerea peste. */
	color: var(--apex-txt);
	border-color: var(--apex-amb);
	background: #fff;
	box-shadow: 0 4px 14px -8px rgba(16, 22, 31, .45);
	transform: translateY(-1px);
}
.apex-subcategorii a:hover svg,
.apex-subcategorii a:focus-visible svg {
	color: var(--apex-ink);
	opacity: 1;
	transform: translateX(2px);
}

.apex-magazin {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
	padding-bottom: 64px;
}
.apex-magazin__filtre { position: sticky; top: 116px; }

/* bara de deasupra grilei */
.apex .woocommerce-notices-wrapper:empty { display: none; }
.apex .woocommerce-result-count {
	margin: 0 !important;
	font-size: 13.5px;
	color: var(--apex-mut);
}
.apex .woocommerce-ordering { margin: 0 !important; }
.apex .woocommerce-ordering select {
	height: 42px;
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	padding: 0 34px 0 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 650;
	background-color: #fff;
	color: var(--apex-txt);
	cursor: pointer;
}
.apex .woocommerce-ordering select:focus {
	outline: none;
	border-color: var(--apex-amb);
	box-shadow: 0 0 0 3px rgba(255, 176, 32, .2);
}
.apex-bara-filtre {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}
.apex-pastile { display: flex; flex-wrap: wrap; gap: 7px; }
.apex .apex-pastila {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	padding: 6px 11px;
	border-radius: 2px;
	background: var(--apex-ink);
	color: #fff;
	text-decoration: none;
}
.apex .apex-pastila:hover { background: var(--apex-amb); color: var(--apex-ink); }
.apex .apex-sterge-filtre {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--apex-mut);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.apex-deschide-filtre {
	display: none;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 800;
	padding: 11px 16px;
	border: 2px solid var(--apex-ink);
	border-radius: 2px;
	background: #fff;
	color: var(--apex-txt);
	cursor: pointer;
}

/* panoul de filtre */
/* Panoul are mai multe filtre decât încap pe un ecran (categorii, mărci,
   preț). Era o cutie cu derulare proprie care pleca odată cu pagina: filtrele
   de jos nu se mai vedeau niciodată. Acum se lipește de ecran cât ține lista
   de produse, iar bara de derulare proprie e vizibilă, ca să se vadă că mai e. */
.apex-filtre {
	position: sticky;
	top: 116px;
	/* Umbra de jos apare doar cât mai e conținut sub margine: straturile
	   „local" se mișcă odată cu derularea și acoperă umbra la capăt. E singurul
	   semn că lista de filtre continuă, fiindcă bara de derulare se ascunde. */
	background:
		linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 26px no-repeat local,
		radial-gradient(farthest-side at 50% 100%, rgba(10, 13, 18, .16), rgba(10, 13, 18, 0)) bottom / 100% 13px no-repeat scroll,
		#fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-ink);
	border-radius: 3px;
	padding: 4px 18px 18px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--apex-canvas2) transparent;
}
.apex-filtre::-webkit-scrollbar { width: 8px; }
.apex-filtre::-webkit-scrollbar-thumb {
	background: var(--apex-canvas2);
	border: 2px solid #fff;
	border-radius: 4px;
}
.apex-filtre::-webkit-scrollbar-thumb:hover { background: var(--apex-otel); }
.apex-filtre__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0 10px;
}
.apex .apex-filtre__cap h2 {
	margin: 0;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: var(--apex-mono);
	font-weight: 600;
	color: var(--apex-mut);
}
.apex-filtre__inchide {
	display: none;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var(--apex-mut);
}
.apex-filtru { padding: 16px 0; border-top: 1px solid var(--apex-line); }
.apex .apex-filtru h3 {
	margin: 0 0 11px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.015em;
}
.apex-filtru ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.apex-lista-lunga li:nth-child(n+9) { display: none; }
.apex-filtru.este-desfacut .apex-lista-lunga li { display: block; }
.apex .apex-optiune {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 8px;
	margin: 0 -8px;
	border-radius: 2px;
	font-size: 14px;
	color: var(--apex-txt);
	text-decoration: none;
	transition: background .15s ease;
}
.apex .apex-optiune:hover { background: var(--apex-canvas); color: var(--apex-txt); }
.apex-optiune em {
	margin-left: auto;
	font-style: normal;
	font-family: var(--apex-mono);
	font-size: 12px;
	color: var(--apex-mut);
}
.apex-bifa {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 2px solid var(--apex-line);
	border-radius: 2px;
	position: relative;
	transition: border-color .15s ease, background .15s ease;
}
.apex-optiune:hover .apex-bifa { border-color: var(--apex-otel); }
.apex-optiune.este-activ .apex-bifa { background: var(--apex-amb); border-color: var(--apex-amb); }
.apex-optiune.este-activ .apex-bifa::after {
	content: "";
	position: absolute;
	left: 4px;
	top: 0;
	width: 4px;
	height: 9px;
	border: solid var(--apex-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.apex-optiune.este-activ { font-weight: 800; }
.apex-optiune--cat { font-weight: 650; }
.apex-optiune--cat.este-activ { color: var(--apex-amb-d); }
.apex-mai-mult {
	margin-top: 8px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--apex-a-dk);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.apex .apex-filtre__reset {
	display: block;
	margin-top: 16px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--apex-mut);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.apex-gol {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
}
.apex .apex-gol h2 { margin: 0 0 10px; font-size: 24px; }
.apex-gol p { margin: 0 auto 18px; max-width: 520px; color: var(--apex-mut); line-height: 1.6; }

@media (max-width: 980px) {
	.apex-magazin { grid-template-columns: 1fr; }
	.apex-magazin__filtre {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(340px, 88vw);
		z-index: 200;
		transform: translateX(-102%);
		transition: transform .28s ease;
	}
	.apex-filtre-deschise .apex-magazin__filtre { transform: none; }
	.apex-filtre-deschise::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(10, 13, 18, .55);
		z-index: 190;
	}
	.apex-filtre {
		position: static;
		height: 100%;
		max-height: none;
		border-radius: 0;
		border-top: 0;
		padding: 4px 18px 40px;
	}
	.apex-filtre__inchide { display: block; }
	.apex-deschide-filtre { display: inline-flex; }
}

/* ---------------------------------------------- 16. PAGINA PRODUS --- */
.apex.single-product .site-container { padding-top: 26px; }
/* Tema scoate cardul de conținut în afara coloanei cu margini negative pe
   telefon; pe pagina de produs asta împingea butonul de comandă în afara
   ecranului. */
.apex div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 48px;
	align-items: start;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100%;
}
.apex div.product > * { min-width: 0; max-width: 100%; }
/* Galeria a fost scrisă `position: sticky; top: 116px`, dar WooCommerce își
   ancorează galeria cu patru clase (`.woocommerce div.product
   div.images.woocommerce-product-gallery`), care băteau regula noastră de trei:
   `sticky` nu se aplica, iar `top: 116px` se aplica peste `relative` al lor și
   cobora galeria cu 116px — gol sub firul Ariadnei pe desktop, titlul acoperit
   de poză pe telefon. Nici sticky nu e o opțiune: Chrome limitează un element
   lipicios dintr-o grilă la tot containerul, nu la rândul lui, deci galeria
   pleca peste descriere. Rămâne așezată normal, aliniată cu coloana de date. */
.apex div.product div.images.woocommerce-product-gallery { top: auto; }
.apex div.product .woocommerce-product-gallery {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	padding: 24px;
}
.apex div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.apex div.product .woocommerce-product-gallery__image {
	background-color: #fff;
	background-image:
		linear-gradient(rgba(15, 19, 26, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 19, 26, .04) 1px, transparent 1px);
	background-size: 26px 26px;
}
.apex div.product .woocommerce-product-gallery__image img {
	mix-blend-mode: multiply;
	background: #fff;
}
/* Zoomul pune o copie mărită peste poză; cu multiply amândouă rămân vizibile și se văd două
   imagini suprapuse. Cât ține zoomul, poza de dedesubt dispare. */
.apex div.product .woocommerce-product-gallery__image > a > img { transition: opacity .15s ease; }
.apex div.product .woocommerce-product-gallery__image:has(.zoomImg):hover > a > img { opacity: 0; }
.apex div.product .woocommerce-product-gallery__image .zoomImg { cursor: zoom-in; }
/* Slide-urile au lățime fracționară (543,25px): marginea pozei următoare intra cu o linie în cadru. */
.apex div.product .woocommerce-product-gallery .flex-viewport { clip-path: inset(0 1px 0 0); }
.apex div.product .flex-control-thumbs {
	display: flex;
	gap: 8px;
	margin: 16px 0 0 !important;
	padding: 0;
	list-style: none;
}
.apex div.product .flex-control-thumbs li { width: 64px !important; margin: 0 !important; }
.apex div.product .flex-control-thumbs img {
	opacity: 1 !important;
	height: auto;
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	padding: 4px;
	background: #fff;
	mix-blend-mode: multiply;
	transition: border-color .2s ease;
}
.apex div.product .flex-control-thumbs img.flex-active,
.apex div.product .flex-control-thumbs img:hover { border-color: var(--apex-ink); }

.apex div.product .summary.entry-summary { width: auto !important; float: none !important; margin: 0 !important; }
.apex-produs-antet {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 12px;
}
.apex-marca {
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-ink);
	background: var(--apex-canvas);
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	padding: 6px 10px;
}
.apex-cod-mare {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--apex-txt);
	border-left: 2px solid var(--apex-amb);
	padding-left: 10px;
}
.apex-serie-produs {
	margin: -10px 0 16px !important;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--apex-mut);
}
.apex.single-product div.product .product_title {
	margin: 0 0 12px !important;
	font-size: clamp(27px, 3.2vw, 38px);
	letter-spacing: -.032em;
	line-height: 1.06;
}

/* Plăcuța de specificații: cifrele după care se alege scula, în față. */
.apex-spec-rapid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
	gap: 1px;
	margin: 0 0 22px;
	padding: 0;
	background: var(--apex-line);
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	overflow: hidden;
}
.apex-spec-rapid li {
	background: #fff;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 3px;
}
.apex-spec-rapid span { min-height: 2.6em; }
.apex-spec-rapid b {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -.02em;
	word-spacing: -.18em;
	color: var(--apex-txt);
}
.apex-spec-rapid span {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--apex-mut);
	line-height: 1.3;
}

/* Doar prețul din panoul de cumpărare: produsele similare stau tot în
   `div.product`, iar fără „> .summary" primeau și ele 34px. */
.apex.single-product div.product > .summary > p.price,
.apex.single-product div.product > .summary > span.price {
	font-family: var(--apex-disp);
	font-size: 34px !important;
	font-weight: 800;
	letter-spacing: -.035em;
	color: var(--apex-txt) !important;
	margin: 0 0 4px !important;
}
.apex-pret-fara-tva { margin: 0 0 18px !important; font-size: 13.5px; color: var(--apex-mut); }
/* Produsul fara pret: se vede ca e o stare, nu o lipsa. */
.apex-pret-cerere { font-size: 22px; font-weight: 700; color: var(--apex-mut); }
.apex-fara-pret { margin: 0 0 18px; }

.apex-disp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14.5px;
	font-weight: 700;
	padding: 11px 15px;
	border-radius: 2px;
	margin-bottom: 20px;
	border-left: 3px solid currentColor;
}
.apex-disp--stoc { color: var(--apex-stoc); background: rgba(23, 145, 92, .09); }
.apex-disp--comanda { color: var(--apex-comanda); background: rgba(255, 176, 32, .12); }
.apex-disp--fara { color: var(--apex-mut); background: var(--apex-canvas); }

.apex div.product form.cart { margin: 0 0 18px !important; display: flex; gap: 10px; align-items: stretch; }
.apex div.product form.cart .quantity input.qty {
	color: var(--apex-txt);
	height: 52px;
	width: 76px;
	border: 2px solid var(--apex-line);
	border-radius: 3px;
	text-align: center;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
}
.apex div.product form.cart button.single_add_to_cart_button {
	flex: 1;
	height: 52px;
	border: 0;
	border-radius: 3px;
	background: var(--apex-amb);
	color: var(--apex-ink);
	font-family: var(--apex-font);
	font-weight: 800;
	font-size: 15.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 14px 28px -14px rgba(255, 176, 32, .9);
}
.apex div.product form.cart button.single_add_to_cart_button:hover {
	background: var(--apex-amb-h);
	transform: translateY(-2px);
	box-shadow: 0 20px 34px -14px rgba(255, 176, 32, 1);
}
.apex .apex-legatura-oferta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	font-weight: 800;
	color: var(--apex-txt);
	text-decoration: none;
	border-bottom: 2px solid var(--apex-amb);
	padding-bottom: 2px;
}
.apex-legatura-oferta:hover { color: var(--apex-amb-d); }
.apex div.product .product_meta { display: none; }

.apex-increderi {
	list-style: none;
	margin: 24px 0 0;
	padding: 18px 20px;
	background: var(--apex-canvas);
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	display: grid;
	gap: 10px;
}
.apex-increderi li { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--apex-txt); }
.apex-increderi svg { width: 18px; height: 18px; color: var(--apex-amb-d); flex: 0 0 auto; }

/* filele */
.apex div.product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 56px; }
.apex div.product .woocommerce-tabs .panel { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.apex .woocommerce-tabs ul.tabs {
	display: flex;
	gap: 0;
	margin: 0 0 24px !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--apex-line);
	list-style: none;
}
.apex .woocommerce-tabs ul.tabs::before,
.apex .woocommerce-tabs ul.tabs li::before,
.apex .woocommerce-tabs ul.tabs li::after { display: none !important; }
.apex .woocommerce-tabs ul.tabs li {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.apex .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 13px 20px;
	font-family: var(--apex-font);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .02em;
	color: #454c58;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	transition: color .2s ease, border-color .2s ease;
}
.apex .woocommerce-tabs ul.tabs li.active a,
.apex .woocommerce-tabs ul.tabs li a:hover { color: var(--apex-txt); border-color: var(--apex-amb); }
.apex .woocommerce-tabs .panel > h2:first-child { display: none; }
/* Descrierile importate sunt blocuri de 20 de rânduri. O coloană de citit și
   un rând mai aerisit fac diferența între „text de bifat" și text citit. */
.apex .woocommerce-tabs .panel p { max-width: 78ch; line-height: 1.72; }
/* Avantajele despachetate din șirul cu punct și virgulă (vezi
   `Apex_Produs::desface_lista_lipita`). */
.apex-avantaje {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 9px 28px;
	max-width: 900px;
}
.apex-avantaje li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--apex-txt);
}
.apex-avantaje li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .52em;
	width: 8px;
	height: 8px;
	background: var(--apex-amb);
}

.apex-fisa {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--apex-line);
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	overflow: hidden;
	max-width: 900px;
}
.apex-fisa__rand {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	background: #fff;
	padding: 12px 16px;
}
.apex-fisa dt { font-size: 14px; color: var(--apex-mut); margin: 0; }
.apex-fisa dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--apex-txt); text-align: right; }
.apex-fisa__cod { font-size: 13px !important; letter-spacing: .04em; }
.apex-fisa__nota { margin: 14px 0 0; font-size: 13px; color: var(--apex-mut); max-width: 640px; line-height: 1.6; }
.apex-lista-livrare { margin: 0; padding-left: 20px; display: grid; gap: 9px; max-width: 720px; }
.apex-lista-livrare li { font-size: 15px; line-height: 1.6; color: var(--apex-mut); }
.apex-lista-livrare strong { color: var(--apex-txt); }

.apex-legate { grid-column: 1 / -1; margin-top: 48px; }
.apex .apex-legate h2 { font-size: 22px; margin: 0 0 16px; }
.apex-legate__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Numele pieselor sunt lungi („EXHAUST PLATE KIT-CP6135"); pe patru
	   coloane se tăiau toate cu trei puncte, adică exact informația după
	   care omul alege. */
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 8px;
}
.apex-legate__lista a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 14px;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	text-decoration: none;
	color: var(--apex-txt);
	font-size: 14px;
	transition: border-color .2s ease;
}
.apex-legate__lista a:hover { border-color: var(--apex-ink); }
.apex-legate__cod { font-size: 12px; font-weight: 600; color: var(--apex-amb-d); flex: 0 0 auto; }
.apex-legate__nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--apex-mut); }
.apex-legate__pret { margin-left: auto; font-weight: 800; flex: 0 0 auto; }

.apex .related.products, .apex .up-sells { grid-column: 1 / -1; margin-top: 56px; }
.apex .related.products > h2, .apex .up-sells > h2 { font-size: 24px; margin: 0 0 20px; }

@media (max-width: 980px) {
	.apex div.product { grid-template-columns: 1fr; gap: 28px; }
	.apex div.product form.cart { flex-wrap: wrap; }
	.apex div.product form.cart button.single_add_to_cart_button { min-width: 0; flex: 1 1 180px; }
	.apex div.product .woocommerce-product-gallery { padding: 16px; }
	.apex div.product .woocommerce-tabs { margin-top: 36px; }
	.apex-fisa { grid-template-columns: 1fr; }
	.apex .woocommerce-tabs { position: relative; }
	.apex .woocommerce-tabs ul.tabs { overflow-x: auto; scrollbar-width: none; padding-right: 40px; }
	.apex .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
	.apex .woocommerce-tabs ul.tabs li a { white-space: nowrap; }
	.apex .woocommerce-tabs::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 48px;
		pointer-events: none;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%);
	}
}

/* ------------------------------------------------- 17. FORMULARE --- */
.apex-formular {
	background: #fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-amb);
	border-radius: 3px;
	padding: 28px;
	max-width: 760px;
}
.apex .apex-formular .apex-buton,
.apex .apex-formular button[type="submit"] {
	background: var(--apex-amb);
	color: var(--apex-ink);
	box-shadow: 0 14px 28px -14px rgba(255, 176, 32, .9);
}
.apex .apex-formular .apex-buton:hover,
.apex .apex-formular button[type="submit"]:hover {
	background: var(--apex-amb-h);
	color: var(--apex-ink);
}
.apex .apex-formular .apex-buton::after { background: var(--apex-ink); }
.apex-formular__rand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.apex-camp { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.apex-camp label { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.apex-camp input, .apex-camp textarea, .apex-camp select {
	border: 2px solid var(--apex-line);
	border-radius: 3px;
	padding: 12px 13px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--apex-txt);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.apex-camp input:focus, .apex-camp textarea:focus, .apex-camp select:focus {
	outline: none;
	border-color: var(--apex-amb);
	box-shadow: 0 0 0 4px rgba(255, 176, 32, .2);
}
.apex-camp--acord { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--apex-mut); }
.apex-camp--ascuns { position: absolute; left: -9999px; }
.apex-mesaj {
	padding: 14px 16px;
	border-radius: 3px;
	border-left: 3px solid var(--apex-comanda);
	background: rgba(255, 176, 32, .12);
	font-size: 14.5px;
	margin-bottom: 18px;
}
.apex-mesaj--bun { border-left-color: var(--apex-stoc); background: rgba(23, 145, 92, .1); }
@media (max-width: 640px) {
	.apex-formular { padding: 20px; }
	.apex-formular__rand { grid-template-columns: 1fr; }
}

/* Coșul gol: blocul implicit arăta o figurină tristă și „Noutăți în magazin".
   Într-un magazin de repere, drumul înainte e căutarea, nu o vitrină. */
.apex-cos-gol {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 36px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-amb);
	border-radius: 3px;
}
.apex-cos-gol__eticheta {
	display: block;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--apex-mut);
	margin-bottom: 12px;
}
.apex .apex-cos-gol h2 { margin: 0 0 12px; font-size: 26px; }
.apex-cos-gol p { margin: 0 auto 22px; max-width: 460px; color: var(--apex-mut); line-height: 1.65; }
.apex-cos-gol__butoane {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 0 !important;
}
.apex .entry-content .apex-buton { margin-bottom: 10px; }

/* Coșul și finalizarea comenzii — aceleași forme ca restul site-ului. */
.apex .woocommerce table.shop_table {
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	border-collapse: separate;
}
.apex .woocommerce table.shop_table th { font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.apex .woocommerce .cart_totals h2, .apex .woocommerce-checkout h3 { font-size: 20px; }
.apex .woocommerce #payment #place_order,
.apex .woocommerce .checkout-button,
.apex .wc-block-cart__submit-button {
	background: var(--apex-amb) !important;
	color: var(--apex-ink) !important;
	border-radius: 3px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.apex .woocommerce form .form-row input.input-text,
.apex .woocommerce form .form-row textarea,
.apex .woocommerce form .form-row select {
	border: 2px solid var(--apex-line);
	border-radius: 3px;
	padding: 11px 12px;
}

/* --------------------------------------- 18. PAGINI DE CONȚINUT --- */
/* Aspectul „lățime plină" e ales pentru prima pagină și catalog; paginile de
   text au nevoie de o coloană citibilă. */
.apex:not(.home) .entry-content > *:not(.alignfull):not(.alignwide):not(section):not(.apex-doc):not(.apex-oferta):not(.apex-contact):not(.apex-centru-docs) {
	max-width: 760px;
}
.apex .entry-content h2 { margin-top: 2em; font-size: 27px; }
/* Titlul paginii capătă talpa pe care o are și capul catalogului. */
.apex:not(.home) .entry-header .entry-title {
	font-size: clamp(34px, 4vw, 46px);
	letter-spacing: -.034em;
	line-height: 1.04;
	margin: 0 0 18px;
}
.apex:not(.home):not(.single-product) .entry-header {
	padding-bottom: 22px;
	border-bottom: 1px solid var(--apex-line);
	margin-bottom: 30px;
}
/* Legăturile din text erau albastrul implicit al temei — singura culoare din
   site care nu e nici cerneală, nici chihlimbar. */
/* Numai paginile de text: prima pagină își ține hero-ul și secțiunile de
   cerneală tot în `.entry-content`, iar cerneala pe cerneală e invizibilă. */
/* Excepțiile stau în `:where()`, care nu adaugă specificitate: altfel regula
   asta ajunge la șase clase și bate orice rescriere locală (cuprins, panouri),
   iar fiecare componentă ar trebui să adauge încă un selector ca s-o întreacă. */
.apex:not(.home) .entry-content a:where(:not(.apex-buton):not(.wp-block-button__link):not(.apex-pastila)) {
	color: var(--apex-txt);
	text-decoration: underline;
	text-decoration-color: var(--apex-amb);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
.apex:not(.home) .entry-content a:where(:not(.apex-buton):not(.apex-pastila)):hover { color: var(--apex-amb-d); }
.apex .entry-content ul:not(.apex-avantaje):not(.apex-doc__cuprins ol) { list-style: none; padding-left: 0; }
/* Cotele din hero sunt tot un `ul` în conținut, dar nu o listă de citit:
   regula asta le punea bulină de chihlimbar și 20px de retragere în stânga
   în fiecare panou. De aici excepția `.apex-cote`. */
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote) > li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
}
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 7px;
	height: 7px;
	background: var(--apex-amb);
}

/* Documentul: coloană de citit plus cuprins lipit de ecran. */
.apex-doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 232px;
	gap: 56px;
	align-items: start;
}
.apex-doc__text > *:not(.alignfull):not(.alignwide) { max-width: 760px; }
.apex-doc__text > *:first-child { margin-top: 0; }
.apex-doc__cuprins {
	position: sticky;
	top: 116px;
	border-left: 2px solid var(--apex-line);
	padding-left: 18px;
}
.apex-doc__cuprins b {
	display: block;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-mut);
	margin-bottom: 12px;
}
.apex-doc__cuprins ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: cuprins;
}
.apex-doc__cuprins li { margin: 0 0 9px; counter-increment: cuprins; }
/* Regula de legături din conținut are patru clase și un element; ca s-o
   întrecem fără `!important`, cuprinsul are nevoie de tot atâtea clase și un
   element în plus. */
.apex:not(.home) .entry-content .apex-doc .apex-doc__cuprins li a,
.apex .apex-doc__cuprins a {
	display: flex;
	text-decoration: none;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--apex-mut);
	text-decoration: none;
}
.apex .apex-doc__cuprins a::before {
	content: counter(cuprins, decimal-leading-zero);
	font-family: var(--apex-mono);
	font-size: 12px;
	color: var(--apex-amb-d);
	flex: 0 0 auto;
	padding-top: 2px;
}
.apex:not(.home) .entry-content .apex-doc .apex-doc__cuprins li a:hover,
.apex .apex-doc__cuprins a:hover { color: var(--apex-txt); }
/* Titlul spre care sare cuprinsul nu trebuie să intre sub antetul lipit. */
.apex .entry-content h2[id] { scroll-margin-top: 130px; }

/* Pagina de contact: marcajul vechi (patru paragrafe scrise în pagină) a
   fost înlocuit de scurtcodul [apex_contact], care desenează panoul de
   cerneală și harta. Regulile lui sunt în secțiunea 24; cele de aici
   colorau numărul de telefon cu albastru pe fundal negru.
   ------------------------------------------------------------------ */

/* Cererea de ofertă: formularul plus o coloană care spune ce urmează. Pagina
   avea jumătate de ecran gol lângă un formular pe care omul trebuie convins
   să-l completeze. */
.apex-oferta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}
.apex-oferta__lateral { position: sticky; top: 116px; display: grid; gap: 16px; }
.apex-oferta__pasi {
	background: #fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-amb);
	border-radius: 3px;
	padding: 20px 22px 18px;
}
.apex-oferta__pasi b {
	display: block;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-mut);
	margin-bottom: 14px;
}
.apex .apex-oferta__pasi ol { margin: 0; padding: 0; list-style: none; counter-reset: pas; }
.apex .apex-oferta__pasi li {
	position: relative;
	counter-increment: pas;
	padding-left: 30px;
	margin-bottom: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--apex-mut);
}
.apex .apex-oferta__pasi li::before {
	content: counter(pas, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 1px;
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--apex-amb-d);
}
.apex-oferta__tel {
	background: var(--apex-ink);
	border-radius: 3px;
	padding: 18px 22px 20px;
	background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 12px);
}
.apex-oferta__et,
.apex-oferta__program {
	display: block;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--apex-otel);
}
.apex .entry-content .apex-oferta .apex-oferta__tel a {
	display: block;
	margin: 6px 0 8px;
	font-family: var(--apex-disp);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--apex-amb);
	text-decoration: none;
}

@media (max-width: 900px) {
	.apex-oferta { grid-template-columns: 1fr; gap: 24px; }
	.apex-oferta__lateral { position: static; }
}

/* Datele de identificare: fișă, nu paragraf. */
.apex .entry-content p.apex-doc__firma {
	background: #fff;
	border: 1px solid var(--apex-line);
	border-left: 3px solid var(--apex-ink);
	border-radius: 3px;
	padding: 16px 20px;
	font-size: 14.5px;
	line-height: 1.85;
	color: var(--apex-mut);
}
.apex .entry-content p.apex-doc__firma strong { color: var(--apex-txt); }

@media (max-width: 900px) {
	.apex-doc { grid-template-columns: 1fr; gap: 26px; }
	.apex-doc__cuprins {
		position: static;
		order: -1;
		background: #fff;
		border: 1px solid var(--apex-line);
		border-left: 3px solid var(--apex-ink);
		border-radius: 3px;
		padding: 14px 16px;
	}
	.apex-doc__cuprins ol { columns: 2; column-gap: 20px; }
}
.apex .entry-content h3 { margin-top: 1.6em; font-size: 20px; }
.apex .entry-content p, .apex .entry-content li { line-height: 1.72; }
/* Prima pagină își spune singură cine e, prin hero. */
.apex.home .content-container .entry-header { display: none; }
.apex.home .content-area { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Marginea de 32px a `.entry-content` nu se vedea pe niciun element: se
   scurgea în sus prin toți părinții fără chenar sau umplutură (colapsare de
   margini) și împingea hero-ul cu o bandă albă sub antet. Se taie de la
   sursă, nu prin compensare la `.content-area`. */
.apex.home .entry-content { margin-top: 0 !important; margin-bottom: 0 !important; }
.apex.home .entry-content-wrap { padding: 0 !important; }
.apex.home .entry.single-entry { box-shadow: none !important; background: none !important; }
/* Lățimea plină e pentru conținutul primei pagini, NU pentru rândurile de
   antet și subsol — altfel sigla ajunge lipită de marginea ecranului. */
.apex.home .content-container.site-container { max-width: none; padding: 0; }
/* Aspectul temei e „lățime plină" pe tot site-ul, ca prima pagină să poată
   folosi toată lățimea. Toate celelalte pagini își iau înapoi coloana,
   marginile laterale și aerul de sus și de jos. */
.apex:not(.home) .content-container.site-container {
	max-width: var(--apex-lat);
	padding-left: 24px;
	padding-right: 24px;
}
.apex:not(.home) .content-area {
	margin-top: 3rem !important;
	margin-bottom: 4.5rem !important;
}
@media (max-width: 767px) {
	.apex:not(.home) .content-container.site-container { padding-left: 18px; padding-right: 18px; }
	.apex div.product { padding-left: 16px !important; padding-right: 16px !important; }
	.apex:not(.home) .content-area { margin-top: 2rem !important; margin-bottom: 3rem !important; }
}

/* ------------------------------------------------------ 19. SUBSOL --- */
.apex .site-footer {
	position: relative;
	background: var(--apex-ink);
	color: var(--apex-otel2);
}
.apex .site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: repeating-linear-gradient(-45deg, var(--apex-amb) 0 10px, var(--apex-ink) 10px 20px);
	opacity: .85;
	z-index: 3;
}
.apex .site-footer .site-middle-footer-wrap { padding: 56px 0 44px; }
.apex .site-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.apex .site-footer a:hover { color: var(--apex-amb); }
.apex-subsol__sigla { max-width: 168px; height: auto; margin-bottom: 16px; }
.apex-subsol__despre { font-size: 14px; line-height: 1.65; color: var(--apex-otel2); max-width: 320px; }
.apex .apex-subsol__titlu {
	font-family: var(--apex-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--apex-amb);
	margin: 0 0 16px;
}
.apex-subsol__lista, .apex-subsol__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.apex-subsol__lista a, .apex-subsol__contact a, .apex-subsol__contact li {
	font-size: 14.5px;
	line-height: 1.5;
}
.apex-subsol__contact li { color: var(--apex-otel2); }
.apex-subsol__lista a {
	display: inline-block;
	position: relative;
	transition: transform .2s ease;
}
.apex-subsol__lista a:hover { transform: translateX(3px); }

/* Coloana „Catalog" ține toate familiile din catalog: una sub alta urca la
   680px și întindea tot subsolul după ea, cu trei coloane goale alături.
   Pe două coloane intră în 280px. Multi-coloana CSS umple de sus în jos, deci
   lista se citește pe verticală — grila ar fi așezat-o în zigzag. */
.apex .apex-subsol__lista--doua {
	display: block;
	column-count: 2;
	column-gap: 26px;
}
.apex .apex-subsol__lista--doua li {
	break-inside: avoid;
	margin-bottom: 10px;
}
.apex .apex-subsol__lista--doua li:last-child { margin-bottom: 0; }
@media (min-width: 1025px) {
	/* Cele patru coloane ale subsolului sunt egale la Kadence. Catalogul are
	   nevoie de mai mult (două coloane de nume), „Informații" de mai puțin. */
	.apex .site-middle-footer-inner-wrap.site-footer-row-columns-4 {
		grid-template-columns: 0.95fr 1.75fr 0.95fr 1.1fr !important;
	}
}
@media (max-width: 767px) {
	/* Pe telefon coloana e mai îngustă, dar 17 nume unul sub altul făceau
	   subsolul cât o pagină întreagă. Rămân două coloane, mai strânse. */
	.apex .apex-subsol__lista--doua { column-gap: 16px; }
	.apex .apex-subsol__lista--doua a { font-size: 13.5px; }
}
.apex .apex-subsol__tel {
	font-family: var(--apex-disp);
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.025em;
	color: #fff !important;
}
.apex .apex-subsol__tel:hover { color: var(--apex-amb) !important; }
.apex-subsol__anpc { margin: 16px 0 0; font-size: 12.5px; color: var(--apex-otel); }
.apex .site-bottom-footer-wrap {
	border-top: 1px solid rgba(255, 255, 255, .08);
	padding: 20px 0;
	font-size: 12.5px;
	color: var(--apex-otel);
}
.apex-firma { display: block; color: var(--apex-otel2); }

/* ----------------------------------------------------- 20. MIȘCARE --- */
/* Intrarea la derulare: 16px și puțină opacitate, decalate. Mai mult decât
   atât devine spectacol și încetinește citirea catalogului. */
/* Ascunderea inițială se face doar dacă JavaScript a pornit — altfel pagina
   ar rămâne goală pentru cine îl are oprit. */
.apex-anim [data-apex-reveal] {
	opacity: 0;
	transform: translate3d(0, 16px, 0);
}
.apex-anim [data-apex-reveal].este-vizibil {
	animation: apexIntra .55s cubic-bezier(.2, .7, .3, 1) both;
	animation-delay: calc(var(--i, 0) * 70ms);
}

/* Cotele din hero intră după unealtă, una câte una — pe tranziție, nu pe
   keyframe. 🔑 În cadrul ăsta Chrome nu desena deloc panourile animate cu
   `animation`: existau în pagină, se puteau selecta, `getComputedStyle` zicea
   `opacity: 1` și animația raporta `finished`, dar stratul rămânea nepictat.
   Se vedea doar rigla de dedesubt, care nu e animată. Aceeași intrare scrisă
   ca tranziție se pictează corect. Nu înlocui cu `animation`. */
.apex-anim .apex-cota {
	opacity: 0;
	transform: translate3d(0, 8px, 0);
	transition:
		opacity .5s cubic-bezier(.2, .7, .3, 1),
		transform .5s cubic-bezier(.2, .7, .3, 1);
}
.apex-anim .apex-cota.este-vizibil { opacity: 1; transform: none; }
.apex-anim .apex-cota--1.este-vizibil { transition-delay: .35s; }
.apex-anim .apex-cota--2.este-vizibil { transition-delay: .5s; }
.apex-anim .apex-cota--3.este-vizibil { transition-delay: .65s; }

/* Adâncimea din hero: bancul se mișcă puțin după cursor, scula rămâne pe loc. */
.apex-hero__banc { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.apex *, .apex *::before, .apex *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.apex-anim [data-apex-reveal],
	.apex-anim .apex-cota {
		opacity: 1 !important; transform: none !important;
		animation: none !important; transition: none !important;
	}
	.apex-hero__scula { animation: none !important; }
	.apex-hero__unealta { transition: none !important; }
}

/* ------------------------------------------- 21. PAGINA NEGĂSITĂ --- */
.apex-404 { max-width: 720px; padding: 20px 0 40px; }
.apex-404__cod {
	display: inline-block;
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--apex-amb-d);
	border-left: 2px solid var(--apex-amb);
	padding-left: 10px;
	margin-bottom: 14px;
}
.apex .apex-404 h1 { font-size: clamp(30px, 4vw, 44px); margin: 0 0 14px; letter-spacing: -.032em; }
.apex-404 > p { font-size: 16.5px; line-height: 1.65; color: var(--apex-mut); margin: 0 0 22px; }
.apex-404 .apex-cauta { max-width: 560px; }
.apex-404__cat {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 28px;
}
.apex-404__eticheta {
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--apex-mut);
	margin-right: 4px;
}
.apex .apex-404__cat a {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--apex-txt);
	text-decoration: none;
	padding: 7px 13px;
	border: 1px solid var(--apex-line);
	border-radius: 2px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease;
}
.apex .apex-404__cat a:hover { border-color: var(--apex-ink); background: var(--apex-canvas); }
.apex-404__ajutor { font-size: 15px; color: var(--apex-mut); }

/* ------------------------------------ 22. BARA DE ACȚIUNE PE TELEFON --- */
/* Coșul mediu istoric al magazinului e 1.813 lei și vânzarea se făcea la
   telefon. Pe ecran mic numărul stă permanent la un deget distanță. */
.apex-bara-mobil { display: none; }
@media (max-width: 768px) {
	.apex-bara-mobil {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 180;
		display: grid;
		grid-template-columns: 1.35fr 1fr;
		gap: 1px;
		background: rgba(255, 255, 255, .12);
		border-top: 2px solid var(--apex-amb);
		box-shadow: 0 -12px 30px -16px rgba(10, 13, 18, .6);
	}
	.apex-bara-mobil a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 9px;
		padding: 14px 10px;
		font-family: var(--apex-font);
		font-size: 14.5px;
		font-weight: 800;
		letter-spacing: -.01em;
		text-decoration: none;
	}
	.apex .apex-bara-mobil__tel { background: var(--apex-ink); color: #fff; }
	.apex .apex-bara-mobil__tel svg { width: 18px; height: 18px; color: var(--apex-amb); }
	.apex .apex-bara-mobil__oferta { background: var(--apex-amb); color: var(--apex-ink); }
	/* Bara nu trebuie să acopere ultimul rând de conținut. */
	.apex.woocommerce .site-footer,
	.apex.woocommerce-page .site-footer { padding-bottom: 56px; }
	.apex-filtre-deschise .apex-bara-mobil { display: none; }
}

/* --------------------------------- 23. COȘ ȘI FINALIZARE PE BLOCURI --- */
/* Butonul de plasare a comenzii venea albastru din stilul implicit al
   blocurilor — singura pată de albastru rămasă, exact pe cel mai important
   buton din site. */
.apex .wc-block-components-checkout-place-order-button,
.apex .wc-block-cart__submit-button,
.apex .wc-block-components-button.contained {
	background: var(--apex-amb) !important;
	color: var(--apex-ink) !important;
	border-radius: 3px !important;
	font-family: var(--apex-font) !important;
	font-weight: 800 !important;
	letter-spacing: .03em;
	text-transform: uppercase;
	box-shadow: 0 14px 28px -14px rgba(255, 176, 32, .9);
}
.apex .wc-block-components-checkout-place-order-button:hover,
.apex .wc-block-cart__submit-button:hover,
.apex .wc-block-components-button.contained:hover {
	background: var(--apex-amb-h) !important;
	color: var(--apex-ink) !important;
}
/* Panoul de totaluri arată ca restul panourilor din site. */
.apex .wp-block-woocommerce-cart-totals-block,
.apex .wc-block-components-sidebar {
	background: #fff;
	border: 1px solid var(--apex-line);
	border-top: 3px solid var(--apex-ink);
	border-radius: 3px;
	padding: 22px !important;
}
/* Blocul își aduce propriile margini de sus; cu ale panoului ieșea un gol
   de aproape o sută de pixeli deasupra titlului. */
.apex .wc-block-cart__totals-title { margin-top: 0 !important; padding-top: 0 !important; }
.apex .wp-block-woocommerce-cart-totals-block > :first-child,
.apex .wc-block-components-sidebar > :first-child { margin-top: 0 !important; }
.apex .wc-block-cart__totals-title,
.apex .wc-block-components-totals-wrapper .wc-block-components-totals-item__label {
	font-weight: 700;
}
.apex .wc-block-components-order-summary__content { border-radius: 3px; }
.apex .wc-block-components-text-input input,
.apex .wc-block-components-country-input select,
.apex .wc-block-components-state-input select {
	border-radius: 3px !important;
}
.apex .wc-block-components-text-input.is-active label,
.apex .wc-block-components-text-input input:focus {
	border-color: var(--apex-amb);
}
.apex .wc-block-components-radio-control-accordion-option,
.apex .wc-block-components-radio-control__option { border-radius: 3px; }
.apex .wc-block-components-notice-banner { border-radius: 3px; }
.apex-livrare-nota.este-gata {
	background: rgba(23, 145, 92, .1);
	border-left-color: var(--apex-stoc);
	color: var(--apex-stoc);
}
.apex-livrare-nota {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	padding: 12px 15px;
	background: rgba(255, 176, 32, .12);
	border-left: 3px solid var(--apex-amb);
	border-radius: 2px;
	font-size: 14.5px;
	font-weight: 650;
	color: var(--apex-txt);
}


/* ------------------------------------------------- TREPTE DE PREȚ B2B --- */
/* Prețul de cont nu e o reducere de campanie: e prețul de listă al clientului.
   Se scrie sub preț, discret, cu literă de mașină. */
.apex .apex-treapta {
	display: block;
	margin-top: 6px;
	font-family: var(--apex-mono);
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--apex-stoc);
}

/* ==========================================================================
   24. REPARAȚII ȘI COMPONENTE NOI (runda de audit, 06.09.2026)
   ========================================================================== */

/* --- notificările WooCommerce -------------------------------------------
   🔴 Butonul „Vezi coșul" din notificarea de adăugare avea culoarea textului
   egală cu fundalul: #1263D2 pe #1263D2, deci un dreptunghi albastru gol, fix
   la prima interacțiune de cumpărare. Albastrul e ultima rămășiță a paletei
   Kadence; îl scoatem de pe toate notificările, nu doar de pe butonul ăsta. */
.apex .woocommerce-message,
.apex .woocommerce-info,
.apex .woocommerce-error {
	border: 1px solid var(--apex-line);
	border-left: 3px solid var(--apex-amb);
	border-radius: 3px;
	background: var(--apex-canvas);
	color: var(--apex-txt);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
}
.apex .woocommerce-message { border-left-color: var(--apex-stoc); }
.apex .woocommerce-error   { border-left-color: #c0392b; }
.apex .woocommerce-message .button,
.apex .woocommerce-info .button,
.apex .woocommerce-error .button {
	background: var(--apex-amb) !important;
	color: var(--apex-ink) !important;
	border: 0 !important;
	border-radius: 3px;
	padding: 11px 20px;
	font-family: var(--apex-font);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
}
.apex .woocommerce-message .button:hover { background: var(--apex-amb-h) !important; }

/* --- panoul de filtre ----------------------------------------------------
   Ultima opțiune („peste 3.000 lei") rămânea pe jumătate sub marginea
   panoului, tăiată de gradientul care semnalează derularea. Rezerva de jos e
   acum mai mare decât banda de gradient, deci nimic nu mai stă ascuns. */
@media (min-width: 769px) {
	.apex-filtre { padding-bottom: 42px; }
	.apex-filtre__reset { margin-bottom: 8px; }
}

/* --- fișa tehnică --------------------------------------------------------
   Grila de două coloane lăsa o celulă goală colorată când numărul de rânduri
   era impar. Ultimul rând se întinde acum pe toată lățimea. */
.apex-fisa__rand:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --- finalizare fără distrageri -----------------------------------------
   Meniul, căutarea și „Cere ofertă" sunt patru ieșiri din pâlnie fix acolo
   unde omul are un singur lucru de făcut. Rămân sigla și telefonul. */
.apex-focus .header-navigation,
.apex-focus .apex-topbar__mesaj,
.apex-focus .site-header-item .header-html,
.apex-focus .header-search-bar,
.apex-focus .header-cart-wrap,
.apex-focus .header-mobile-cart-wrap,
.apex-focus .mobile-toggle-open-container,
.apex-focus .apex-bara-mobil { display: none !important; }
.apex-focus .site-header-main-section-center { flex: 0 0 auto !important; }

/* --- bara fixă de pe telefon, pe pagina de produs ------------------------ */
@media (max-width: 768px) {
	.apex-cu-bara .site-footer { padding-bottom: 68px; }
	.apex-bara-mobil--produs {
		grid-template-columns: auto auto 1fr auto;
		align-items: stretch;
		background: var(--apex-ink);
	}
	.apex .apex-bara-mobil__ic {
		padding: 12px 14px;
		background: var(--apex-ink);
		color: #fff;
	}
	.apex .apex-bara-mobil__ic svg { width: 20px; height: 20px; color: var(--apex-amb); }
	.apex .apex-bara-mobil__wa svg { color: #25d366; }
	.apex-bara-mobil__pret {
		display: flex;
		align-items: center;
		padding: 0 8px;
		color: #fff;
		font-family: var(--apex-disp);
		font-size: 15px;
		font-weight: 800;
		white-space: nowrap;
	}
	.apex-bara-mobil__pret .woocommerce-Price-amount { color: #fff; }
	.apex-bara-mobil__pret small,
	.apex-bara-mobil__pret .apex-pret-fara { display: none; }
	.apex .apex-bara-mobil__cos {
		border: 0;
		padding: 14px 18px;
		background: var(--apex-amb);
		color: var(--apex-ink);
		font-family: var(--apex-font);
		font-size: 14.5px;
		font-weight: 800;
		letter-spacing: -.01em;
	}
}

/* --- acordul pentru cookie-uri ------------------------------------------ */
.apex-acord-cookie {
	position: fixed;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 300;
	background: var(--apex-ink);
	border: 1px solid rgba(255, 255, 255, .14);
	border-top: 2px solid var(--apex-amb);
	border-radius: 3px;
	box-shadow: 0 24px 60px -24px rgba(10, 13, 18, .8);
}
/* Bara se scrie în pagină întotdeauna (pagina e în cache, deci trebuie să fie
   identică pentru toți) și apare odată cu pagina. Cine a ales deja are
   `apex-ales` pe <html>, pus din <head> înainte de prima desenare. */
.apex-ales .apex-acord-cookie,
.apex-acord-cookie[hidden] { display: none; }

/* Butonul de adăugare în coș, cât timp cererea e pe drum. Pe găzduirea asta
   poate ține câteva secunde, iar fără semn omul apasă a doua oară. */
.ajax_add_to_cart.apex-se-adauga { opacity: .72; pointer-events: none; }
.apex-acord-cookie__in {
	max-width: var(--apex-lat);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.apex-acord-cookie p {
	margin: 0;
	color: var(--apex-otel2);
	font-size: 13.5px;
	line-height: 1.55;
	max-width: 72ch;
}
.apex .apex-acord-cookie a { color: var(--apex-amb); }
.apex-acord-cookie__butoane { display: flex; gap: 10px; flex-shrink: 0; }
.apex .apex-acord-cookie .apex-buton--linie { color: #fff; border-color: rgba(255, 255, 255, .3); }
@media (max-width: 600px) {
	.apex-acord-cookie { bottom: 62px; left: 8px; right: 8px; }
	.apex-acord-cookie__in { padding: 12px 14px; gap: 10px; }
	.apex-acord-cookie p { font-size: 12.5px; line-height: 1.45; }
	.apex-acord-cookie__butoane { width: 100%; }
	.apex-acord-cookie__butoane .apex-buton { padding: 10px 14px; font-size: 14px; }
	.apex-acord-cookie__butoane .apex-buton { flex: 1; justify-content: center; }
}

/* --- încărcarea pozelor la cererea de ofertă ---------------------------- */
.apex-incarca {
	position: relative;
	border: 1.5px dashed var(--apex-line);
	border-radius: 3px;
	background: var(--apex-canvas);
	transition: border-color .2s ease, background .2s ease;
}
.apex-incarca.este-peste,
.apex-incarca:focus-within { border-color: var(--apex-amb-d); background: #fff; }
.apex-incarca input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.apex-incarca__fata {
	display: block;
	padding: 22px 20px;
	text-align: center;
	pointer-events: none;
}
.apex-incarca__fata svg { width: 26px; height: 26px; color: var(--apex-amb-d); }
.apex-incarca__fata b {
	display: block;
	margin: 6px 0 3px;
	font-family: var(--apex-disp);
	font-size: 15px;
}
.apex-incarca__fata span { color: var(--apex-mut); font-size: 12.5px; }
.apex-incarca__lista { margin: 0; padding: 0 20px 16px; list-style: none; }
.apex-incarca:not(.are-fisiere) .apex-incarca__lista { display: none; }
.apex-incarca__lista li {
	font-family: var(--apex-mono);
	font-size: 12.5px;
	color: var(--apex-txt);
	padding: 4px 0;
	border-top: 1px solid var(--apex-line);
}
.apex-incarca__lista li.este-prea-mare { color: #c0392b; }

/* --- bifa de acord ------------------------------------------------------
   Bifa nativă era singurul element de formular nestilizat din tot site-ul. */
.apex-acord {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: start;
	gap: 11px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.5;
}
.apex-acord input { position: absolute; opacity: 0; width: 0; height: 0; }
.apex-acord__bifa {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border: 1.5px solid var(--apex-otel);
	border-radius: 2px;
	background: #fff;
	position: relative;
}
.apex-acord input:checked + .apex-acord__bifa {
	background: var(--apex-amb);
	border-color: var(--apex-amb-d);
}
.apex-acord input:checked + .apex-acord__bifa::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--apex-ink);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}
.apex-acord input:focus-visible + .apex-acord__bifa { outline: 2px solid var(--apex-amb-d); outline-offset: 2px; }

/* --- cererea de termen -------------------------------------------------- */
.apex-termen { margin: 14px 0 0; }
.apex-termen__buton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--apex-amb-d);
	font-family: var(--apex-font);
	font-size: 14px;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.apex-termen__buton svg { width: 18px; height: 18px; }
.apex-termen__form {
	margin-top: 14px;
	padding: 18px;
	border: 1px solid var(--apex-line);
	border-top: 2px solid var(--apex-amb);
	border-radius: 3px;
	background: var(--apex-canvas);
}
.apex-termen__text { margin: 0 0 12px; font-size: 13.5px; color: var(--apex-mut); }
.apex-termen__randuri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.apex-termen__randuri .apex-camp { margin: 0; }
.apex-termen__randuri span {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--apex-mut);
}
.apex-termen__form .apex-acord { margin: 12px 0; }
@media (max-width: 700px) {
	.apex-termen__randuri { grid-template-columns: 1fr; }
}

/* --- harta -------------------------------------------------------------- */
.apex-harta {
	position: relative;
	min-height: 320px;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	background: var(--apex-ink2);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.apex-harta__grila {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 28px 28px;
}
.apex-harta__buton {
	position: relative;
	flex: 1;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 30px 24px;
	font-family: var(--apex-font);
	text-align: center;
}
.apex-harta__buton svg { width: 30px; height: 30px; color: var(--apex-amb); }
.apex-harta__buton b {
	display: block;
	margin: 10px 0 4px;
	font-family: var(--apex-disp);
	font-size: 17px;
}
.apex-harta__buton span { color: var(--apex-otel2); font-size: 13.5px; }
.apex-harta iframe { width: 100%; height: 360px; border: 0; display: block; }
.apex-harta__extern {
	position: relative;
	padding: 12px 16px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.apex .apex-harta__extern { color: var(--apex-amb); }

/* --- panoul de contact -------------------------------------------------- */
.apex-contact {
	display: grid;
	/* O singură coloană: harta din dreapta a fost scoasă la cererea clientului
	   (vinde doar online, nu vrea vizite la sediu). */
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: stretch;
}
.apex-contact__card {
	position: relative;
	background: var(--apex-ink);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 3px;
	padding: 28px;
}
.apex-contact__eticheta {
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--apex-otel);
}
.apex .apex-contact__tel {
	display: block;
	margin: 8px 0 18px;
	font-family: var(--apex-disp);
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--apex-amb);
	text-decoration: none;
}
.apex-contact__butoane { display: flex; gap: 10px; flex-wrap: wrap; }
.apex .apex-buton--wa { background: #25d366; color: #06301a; }
.apex .apex-buton--wa:hover { background: #3ae07a; }
.apex-buton--wa svg { width: 18px; height: 18px; }
.apex .apex-contact__card .apex-buton--linie { color: #fff; border-color: rgba(255, 255, 255, .28); }
.apex-contact__date {
	margin: 22px 0 0;
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 10px 14px;
	font-size: 14px;
}
.apex-contact__date dt {
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--apex-otel);
	padding-top: 2px;
}
.apex-contact__date dd { margin: 0; color: #fff; }
.apex .apex-contact__date a { color: var(--apex-amb); }
@media (max-width: 860px) {
	.apex-contact { grid-template-columns: 1fr; }
}

/* --- propunerile din coș ------------------------------------------------ */
.apex-cos-plus {
	margin: 34px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--apex-line);
}
.apex-cos-plus h2 { font-family: var(--apex-disp); font-size: 22px; margin: 0 0 4px; }
.apex-cos-plus__sub { margin: 0 0 18px; color: var(--apex-mut); font-size: 14px; }
.apex-cos-plus__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.apex-cos-plus__item {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 12px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	background: #fff;
}
.apex-cos-plus__poza img { width: 62px; height: 62px; object-fit: contain; mix-blend-mode: multiply; }
.apex-cos-plus__text { min-width: 0; }
.apex .apex-cos-plus__text a { color: var(--apex-txt); text-decoration: none; }
.apex-cos-plus__text b {
	display: block;
	font-family: var(--apex-disp);
	font-size: 14.5px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.apex-cos-plus__cod {
	display: block;
	font-family: var(--apex-mono);
	font-size: 12px;
	color: var(--apex-mut);
}
.apex-cos-plus__pret { font-family: var(--apex-disp); font-weight: 800; font-size: 15px; }
.apex-cos-plus__item .apex-buton { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 900px) {
	.apex-cos-plus__lista { grid-template-columns: 1fr; }
}

/* --- comparatorul ------------------------------------------------------- */
.apex-compara {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 8px 0 2px;
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--apex-mut);
	cursor: pointer;
	user-select: none;
}
.apex-compara svg { width: 15px; height: 15px; }
.apex-compara span { display: inline-flex; align-items: center; gap: 5px; }
.apex-compara input { accent-color: var(--apex-amb-d); width: 15px; height: 15px; }
.apex-compara:hover { color: var(--apex-amb-d); }

.apex-comp-bara {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translate(-50%, 130%);
	z-index: 200;
	display: none;
	align-items: center;
	gap: 16px;
	padding: 12px 16px;
	background: var(--apex-ink);
	border: 1px solid rgba(255, 255, 255, .14);
	border-top: 2px solid var(--apex-amb);
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	box-shadow: 0 20px 50px -22px rgba(10, 13, 18, .75);
	transition: transform .28s ease;
}
.apex-comp-bara.este-vizibil { display: flex; transform: translate(-50%, 0); }
.apex-comp-bara__sterge {
	background: none;
	border: 0;
	color: var(--apex-otel2);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}
.apex .apex-comp-bara .este-inactiv { opacity: .45; pointer-events: none; }
@media (max-width: 768px) {
	.apex-comp-bara { bottom: 66px; left: 12px; right: 12px; transform: translateY(130%); }
	.apex-comp-bara.este-vizibil { transform: none; }
}

.apex-comp__scroll { overflow-x: auto; }
.apex-comp__tabel { width: 100%; border-collapse: collapse; min-width: 640px; }
.apex-comp__tabel th,
.apex-comp__tabel td {
	border: 1px solid var(--apex-line);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	font-size: 14px;
}
.apex-comp__tabel thead th { background: var(--apex-canvas); }
.apex-comp__tabel tbody th {
	background: var(--apex-canvas);
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--apex-mut);
	white-space: nowrap;
}
.apex-comp__poza img { width: 100%; max-width: 130px; height: auto; mix-blend-mode: multiply; }
.apex-comp__tabel thead b { display: block; font-family: var(--apex-disp); font-size: 16px; margin-top: 6px; }
.apex-comp__pret { display: block; font-family: var(--apex-disp); font-weight: 800; margin: 6px 0 10px; }
.apex-comp__gol { max-width: 60ch; color: var(--apex-mut); }

/* --- ghiduri ------------------------------------------------------------ */
.apex-ghiduri {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin: 26px 0 34px;
}
.apex-ghid {
	position: relative;
	display: block;
	padding: 24px 24px 20px;
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.apex-ghid:hover {
	border-color: var(--apex-otel2);
	box-shadow: 0 18px 40px -26px rgba(10, 13, 18, .5);
}
.apex-ghid__idx {
	font-family: var(--apex-mono);
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--apex-amb-d);
}
.apex-ghid__titlu {
	display: block;
	margin: 8px 0 8px;
	font-family: var(--apex-disp);
	font-size: 19px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--apex-txt);
}
.apex-ghid__intro {
	display: block;
	color: var(--apex-mut);
	font-size: 14px;
	line-height: 1.6;
}
.apex-ghid__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--apex-amb-d);
}
.apex-ghid__link svg { width: 15px; height: 15px; }
.apex-ghid:hover .apex-ghid__link svg { transform: translateX(4px); }
@media (max-width: 760px) {
	.apex-ghiduri { grid-template-columns: 1fr; }
}

/* Tabelele din ghiduri: date tehnice, deci literă de mașină pe cifre. */
.apex-doc__text table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0 26px;
	font-size: 14.5px;
}
.apex-doc__text th,
.apex-doc__text td {
	border: 1px solid var(--apex-line);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.apex-doc__text thead th {
	background: var(--apex-canvas);
	font-family: var(--apex-mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--apex-mut);
}
.apex-doc__text tbody td:first-child { font-family: var(--apex-mono); }
.apex-doc__text h3 {
	font-family: var(--apex-disp);
	font-size: 18px;
	margin: 26px 0 8px;
}
.apex-doc__text ol { padding-left: 20px; }

/* Cardurile de ghid sunt legături întregi: fără regula asta, toată rețeta de
   text din ele apare subliniată, pentru că `.apex a` subliniază legăturile. */
.apex .apex-ghid,
.apex .apex-ghid:hover,
.apex .apex-ghid * { text-decoration: none; }
.apex .apex-ghid__titlu { color: var(--apex-txt); }
.apex .apex-ghid:hover .apex-ghid__titlu { color: var(--apex-amb-d); }

/* Aceeași problemă pe cardurile din coș și pe capul comparatorului: regula de
   legături a paginilor-document e (0,3,1), deci trebuie întrecută cu
   `.entry-content` în selector, nu doar cu clasa componentei. */
.apex .entry-content .apex-cos-plus__item a,
.apex .entry-content .apex-cos-plus__item a b,
.apex .apex-comp__tabel thead a { text-decoration: none; color: var(--apex-txt); }
/* Butonul mic de „Adaugă” are fundal de cerneală, deci textul e alb — nu
   moștenește culoarea legăturilor din card (ieșea negru pe negru). */
.apex .entry-content .apex-cos-plus__item a.apex-buton { color: #fff; }
.apex .entry-content .apex-cos-plus__item a.apex-buton:hover { color: var(--apex-ink); }
.apex .entry-content .apex-cos-plus__item a:hover b { color: var(--apex-amb-d); }

/* Subsolul: legătura de WhatsApp arăta ca text simplu. */
.apex-subsol__wa { margin: 14px 0 0; }
.apex .apex-subsol__wa a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #25d366;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
}
.apex .apex-subsol__wa a::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #25d366;
}
.apex .apex-subsol__wa a:hover { color: #3ae07a; }

/* Panourile de cerneală care ajung în conținutul unei pagini (contact, hartă)
   sunt scoase din regula de legături a paginilor-document: acolo legăturile
   sunt negre cu subliniere chihlimbar, ceea ce pe fundal negru înseamnă text
   invizibil. Regula generală stă în `:where()`, deci două clase o întrec. */
.apex .entry-content .apex-contact__card a,
.apex .entry-content .apex-harta a,
.apex .entry-content .apex-contact__date a,
.apex .entry-content a.apex-contact__tel { color: var(--apex-amb); text-decoration: none; }
.apex .entry-content .apex-contact__card a:hover,
.apex .entry-content .apex-harta a:hover { color: var(--apex-amb-h); }
.apex .entry-content .apex-contact__card a.apex-buton--wa { color: #06301a; }
.apex .entry-content .apex-contact__card a.apex-buton--linie { color: #fff; }

/* Comparatorul: butonul din capul de tabel primea culoarea textului de la
   celulă, deci ieșea negru pe negru. Și coloanele trebuie egale, altfel o
   fotografie mai lată împinge scula de lângă ea. */
.apex .apex-comp__tabel thead th { width: 22%; vertical-align: top; }
.apex .apex-comp__tabel thead th:first-child { width: 22%; }
.apex .apex-comp__tabel .apex-buton--mic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 14px;
	background: var(--apex-amb);
	color: var(--apex-ink) !important;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}
.apex .apex-comp__tabel .apex-buton--mic:hover { background: var(--apex-amb-h); }
.apex-comp__poza img { height: 92px; width: auto; object-fit: contain; }

/* Butonul cardului nu se rupe în două rânduri.
   Pe telefon, în grila de două coloane a primei pagini, „COMANDĂ" ieșea
   „COMA / NDĂ": cuvântul e mai lat decât cardul la 13px cu spațiere de literă.
   Se strânge litera și se interzice ruperea, nu se micșorează cardul. */
@media (max-width: 560px) {
	.apex ul.products li.product .product-action-wrap .button,
	.apex ul.products li.product .apex-buton {
		white-space: nowrap;
		font-size: 12.5px !important;
		letter-spacing: .02em !important;
		padding-left: 8px !important;
		padding-right: 8px !important;
	}
}

/* ==========================================================================
   RECENZII
   Stelele sunt chihlimbar pe fundal deschis — contrastul vine din conturul
   stelelor goale (oțel), nu din culoarea celor pline.
   ========================================================================== */
.apex .star-rating {
	float: none;
	display: inline-block;
	overflow: hidden;
	position: relative;
	width: 5.4em;
	height: 1.1em;
	line-height: 1.1;
	font-size: 14px;
	font-family: star;
	letter-spacing: .08em;
	color: var(--apex-amb);
	vertical-align: middle;
}
.apex .star-rating::before {
	content: "\73\73\73\73\73";
	color: var(--apex-canvas2);
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}
.apex .star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}
.apex .star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: var(--apex-amb);
}
.apex ul.products li.product .star-rating { display: block; margin: 6px 0 2px; font-size: 12px; }
.apex div.product .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 4px 0 14px;
	font-size: 14px;
}
.apex div.product .woocommerce-product-rating .woocommerce-review-link { color: var(--apex-mut); }

.apex #reviews { max-width: 860px; }
.apex #reviews .woocommerce-Reviews-title { display: none; }
.apex #reviews .woocommerce-noreviews {
	margin: 0 0 22px;
	padding: 16px 18px;
	background: var(--apex-canvas);
	border-left: 3px solid var(--apex-amb);
	color: var(--apex-mut);
}
.apex #reviews ol.commentlist { list-style: none; margin: 0 0 28px; padding: 0; }
.apex #reviews ol.commentlist li.review {
	margin: 0;
	padding: 18px 0;
	border-top: 1px solid var(--apex-line);
}
.apex #reviews ol.commentlist li .comment_container { display: block; }
.apex #reviews ol.commentlist li img.avatar { display: none; }
.apex #reviews ol.commentlist li .comment-text { margin: 0; padding: 0; border: 0; }
.apex #reviews ol.commentlist li .meta { margin: 6px 0 8px; color: var(--apex-mut); font-size: 13.5px; }
.apex #reviews ol.commentlist li .meta strong { color: var(--apex-txt); }
.apex #reviews ol.commentlist li .woocommerce-review__verified { color: var(--apex-stoc); font-style: normal; }
.apex #reviews .description p { margin: 0; }

.apex #review_form_wrapper {
	padding: 22px 24px 8px;
	background: var(--apex-canvas);
	border: 1px solid var(--apex-line);
	border-radius: 3px;
}
.apex #review_form .comment-reply-title {
	display: block;
	margin: 0 0 6px;
	font-family: var(--apex-disp);
	font-weight: 800;
	font-size: 20px;
	color: var(--apex-txt);
}
.apex #review_form .apex-recenzii__nota { margin: 0 0 14px; font-size: 13.5px; color: var(--apex-mut); }
.apex #review_form label { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.apex #review_form input[type="text"],
.apex #review_form input[type="email"],
.apex #review_form textarea {
	width: 100%;
	padding: 11px 12px;
	background: var(--apex-paper);
	border: 1px solid #c9d0db;
	border-radius: 3px;
	font: inherit;
	color: var(--apex-txt);
}
.apex #review_form textarea { min-height: 130px; }
.apex #review_form input:focus,
.apex #review_form textarea:focus { outline: 2px solid var(--apex-amb); outline-offset: 1px; border-color: var(--apex-ink); }
.apex #review_form .comment-form-author,
.apex #review_form .comment-form-email { display: inline-block; width: calc(50% - 8px); vertical-align: top; }
.apex #review_form .comment-form-author { margin-right: 12px; }
.apex #review_form p.stars { margin: 4px 0 16px; }
.apex #review_form p.stars a { color: var(--apex-amb); font-size: 22px; }
.apex #review_form .form-submit input[type="submit"] {
	padding: 13px 24px;
	background: var(--apex-amb);
	color: var(--apex-ink);
	border: 0;
	border-radius: 3px;
	font-weight: 800;
	cursor: pointer;
}
.apex #review_form .form-submit input[type="submit"]:hover { background: var(--apex-amb-h); }
.apex .apex-capcana { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px) {
	.apex #review_form .comment-form-author,
	.apex #review_form .comment-form-email { display: block; width: 100%; margin-right: 0; }
	.apex #review_form_wrapper { padding: 18px 16px 4px; }
}

/* Marca din fișa tehnică duce la pagina mărcii. */
.apex .apex-fisa dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--apex-amb); text-underline-offset: 3px; }

/* Tema pune lista și formularul pe două coloane de câte o jumătate: formularul
   ieșea îngust, cu numele și emailul strânse la 140px. O singură coloană. */
.apex #reviews #comments,
.apex #reviews #review_form_wrapper { float: none !important; width: 100% !important; max-width: 760px; padding-left: 0; padding-right: 0; }
.apex #reviews #review_form_wrapper { padding: 22px 24px 8px; margin-top: 8px; }
.apex #review_form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 14px; }
.apex #review_form .comment-form-cookies-consent input { margin-top: 4px; flex: none; }
.apex #review_form .comment-form-cookies-consent label { margin: 0; font-weight: 400; font-size: 13.5px; color: var(--apex-mut); }

/* ================================================================ documente (3.10.0)
   Planșa refolosește caroiajul de desen tehnic de la categorii: prima pagină a
   PDF-ului stă pe ea ca o foaie prinsă pe masă. */
.apex-docs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	max-width: 1100px;
}
.apex-pdf {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	background: #fff;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s;
}
.apex-pdf:hover { border-color: #c9d0db; box-shadow: 0 10px 26px -18px rgba(10, 13, 18, .45); }
.apex div.product .apex-pdf__plansa,
.apex .apex-pdf__plansa {
	position: relative;
	display: block;
	min-height: 160px;
	background-color: var(--apex-canvas);
	background-image:
		linear-gradient(rgba(15, 19, 26, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 19, 26, .05) 1px, transparent 1px);
	background-size: 14px 14px;
	border-right: 1px solid var(--apex-line);
	color: var(--apex-otel);
}
.apex-pdf__plansa img {
	position: absolute;
	inset: 12px 14px;
	width: calc(100% - 28px);
	height: calc(100% - 24px);
	object-fit: contain;
	object-position: center top;
	background: #fff;
	box-shadow: 0 1px 0 var(--apex-line), 0 6px 14px -8px rgba(10, 13, 18, .35);
	transition: transform .25s;
}
.apex-pdf:hover .apex-pdf__plansa img { transform: translateY(-2px); }
.apex-pdf__plansa svg { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; }
.apex-pdf--explodat .apex-pdf__plansa::after {
	content: "PIESE";
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 3px 7px;
	background: var(--apex-amb);
	color: var(--apex-ink);
	font: 800 10px/1.2 var(--apex-mono);
	letter-spacing: .08em;
}
.apex-pdf__corp { display: flex; flex-direction: column; padding: 16px 18px; min-width: 0; }
.apex .apex-pdf__titlu { margin: 0 0 6px; font-size: 16px; line-height: 1.3; font-weight: 800; color: var(--apex-txt); letter-spacing: -.01em; }
.apex .apex-pdf__desc { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--apex-mut); }
.apex .apex-pdf__meta { margin: 0 0 14px; font: 12px/1.5 var(--apex-mono); color: var(--apex-mut); }
.apex-pdf__ro { color: var(--apex-stoc); font-weight: 700; }
.apex-pdf__actiuni { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.apex div.product .apex-pdf__buton,
.apex .apex-pdf__buton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	border: 1px solid var(--apex-line);
	border-radius: 3px;
	background: #fff;
	color: var(--apex-txt);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: background .15s, border-color .15s, color .15s;
}
.apex .apex-pdf__buton svg { width: 16px; height: 16px; flex: 0 0 auto; }
.apex div.product .apex-pdf__buton:hover,
.apex .apex-pdf__buton:hover { border-color: var(--apex-ink); color: var(--apex-ink); }
.apex div.product .apex-pdf__buton--plin,
.apex .apex-pdf__buton--plin { background: var(--apex-amb); border-color: var(--apex-amb); color: var(--apex-ink); }
.apex div.product .apex-pdf__buton--plin:hover,
.apex .apex-pdf__buton--plin:hover { background: var(--apex-amb-h); border-color: var(--apex-amb-h); color: var(--apex-ink); }
.apex .apex-docs__nota { margin: 18px 0 0; max-width: 720px; font-size: 14px; line-height: 1.6; color: var(--apex-mut); }
.apex div.product .apex-docs__nota a,
.apex .apex-docs__nota a { color: var(--apex-txt); font-weight: 700; text-decoration: underline; text-decoration-color: var(--apex-amb); text-underline-offset: 3px; }

/* rezumatul din coloana de cumpărare */
.apex-docs-rezumat { margin: 14px 0 0; border: 1px solid var(--apex-line); border-radius: 3px; background: #fff; }
.apex .apex-docs-rezumat__cap {
	display: flex; align-items: center; gap: 9px; margin: 0; padding: 11px 16px;
	border-bottom: 1px solid var(--apex-line);
	font: 800 11.5px/1.2 var(--apex-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--apex-mut);
}
.apex-docs-rezumat__cap svg { width: 16px; height: 16px; color: var(--apex-amb-d); }
.apex-docs-rezumat ul { list-style: none; margin: 0; padding: 4px 0; }
.apex div.product .apex-docs-rezumat a,
.apex .apex-docs-rezumat a {
	display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px;
	padding: 8px 16px; color: var(--apex-txt); text-decoration: none; font-size: 14px; font-weight: 600;
}
.apex-docs-rezumat a svg { width: 16px; height: 16px; color: var(--apex-amb-d); }
.apex-docs-rezumat a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apex-docs-rezumat small { font: 11.5px/1 var(--apex-mono); color: var(--apex-mut); white-space: nowrap; }
.apex div.product .apex-docs-rezumat a:hover,
.apex .apex-docs-rezumat a:hover { background: var(--apex-canvas); }
.apex-docs-rezumat a:hover span { text-decoration: underline; text-decoration-color: var(--apex-amb); text-underline-offset: 3px; }

/* centrul de documentație */
.apex .apex-centru-docs__total { font: 13px/1.5 var(--apex-mono); color: var(--apex-mut); margin: 0 0 14px; }
.apex-centru-docs__cauta {
	display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 0 0 22px; padding: 0 14px;
	border: 1px solid var(--apex-line); border-radius: 3px; background: #fff;
}
.apex-centru-docs__cauta:focus-within { border-color: var(--apex-ink); box-shadow: 0 0 0 3px rgba(255, 176, 32, .35); }
.apex-centru-docs__cauta svg { width: 18px; height: 18px; color: var(--apex-mut); flex: 0 0 auto; }
.apex .apex-centru-docs__cauta input { flex: 1; border: 0; outline: 0; background: transparent; padding: 13px 0; font-size: 15px; box-shadow: none; }
.apex .entry-content ul.apex-centru-docs__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--apex-line); }
.apex .entry-content ul.apex-centru-docs__lista > li {
	display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 18px; align-items: center;
	margin: 0; padding: 14px 0; border-bottom: 1px solid var(--apex-line);
}
.apex .entry-content ul.apex-centru-docs__lista > li::before { display: none; }
.apex .entry-content ul.apex-centru-docs__lista > li[hidden] { display: none; }
.apex-centru-docs__produs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.apex-centru-docs__produs img { width: 52px; height: 52px; object-fit: contain; background: #fff; border: 1px solid var(--apex-line); border-radius: 2px; flex: 0 0 auto; }
.apex-centru-docs__produs div { display: flex; flex-direction: column; min-width: 0; }
.apex .entry-content .apex-centru-docs__produs a { color: var(--apex-txt); font-weight: 700; text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.apex .entry-content .apex-centru-docs__produs a:hover { text-decoration: underline; text-decoration-color: var(--apex-amb); }
.apex-centru-docs__produs span { font: 12px/1.4 var(--apex-mono); color: var(--apex-mut); }
.apex-centru-docs__fisiere { display: flex; flex-wrap: wrap; gap: 6px; }
.apex .entry-content .apex-centru-docs__fisiere a {
	display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px;
	border: 1px solid var(--apex-line); border-radius: 3px; background: #fff;
	color: var(--apex-txt); font-size: 13px; font-weight: 600; text-decoration: none; line-height: 1.1;
}
.apex .entry-content .apex-centru-docs__fisiere a:hover { border-color: var(--apex-ink); background: var(--apex-canvas); }
.apex-centru-docs__fisiere svg { width: 14px; height: 14px; color: var(--apex-amb-d); }

@media (max-width: 640px) {
	.apex-docs { grid-template-columns: 1fr; }
	.apex-pdf { grid-template-columns: 96px minmax(0, 1fr); }
	.apex .entry-content ul.apex-centru-docs__lista > li { grid-template-columns: 1fr; gap: 10px; }
}

/* lista de piese din vederea explodată */
.apex-piese-pdf { margin: 22px 0 0; max-width: 1100px; border: 1px solid var(--apex-line); border-radius: 3px; background: #fff; }
.apex-piese-pdf summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; cursor: pointer; list-style: none;
}
.apex-piese-pdf summary::-webkit-details-marker { display: none; }
.apex-piese-pdf summary::after {
	content: ""; width: 9px; height: 9px; margin-left: 4px; flex: 0 0 auto;
	border-right: 2px solid var(--apex-txt); border-bottom: 2px solid var(--apex-txt);
	transform: rotate(45deg) translateY(-3px); transition: transform .2s;
}
.apex-piese-pdf[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.apex-piese-pdf__titlu { font-weight: 800; font-size: 16px; color: var(--apex-txt); margin-right: auto; }
.apex-piese-pdf__nr { font: 12px/1 var(--apex-mono); color: var(--apex-mut); background: var(--apex-canvas); padding: 5px 8px; border-radius: 2px; }
.apex-piese-pdf__tabel { overflow-x: auto; border-top: 1px solid var(--apex-line); }
.apex .apex-piese-pdf table { width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; border: 0; }
.apex .apex-piese-pdf th {
	text-align: left; padding: 10px 14px; background: var(--apex-canvas); border: 0; border-bottom: 1px solid var(--apex-line);
	font: 800 11px/1.2 var(--apex-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--apex-mut);
}
.apex .apex-piese-pdf td { padding: 9px 14px; border: 0; border-bottom: 1px solid var(--apex-line); color: var(--apex-txt); vertical-align: middle; background: #fff; }
.apex .apex-piese-pdf tr:last-child td { border-bottom: 0; }
.apex .apex-piese-pdf tbody tr:hover td { background: #fbfaf6; }
.apex-piese-pdf__poz { font: 700 13px/1.2 var(--apex-mono); color: var(--apex-amb-d) !important; white-space: nowrap; }
.apex-piese-pdf__cod { font: 13px/1.2 var(--apex-mono); white-space: nowrap; letter-spacing: .02em; }
.apex-piese-pdf__buc { text-align: center; font-family: var(--apex-mono); }
.apex div.product .apex-piese-pdf__link,
.apex .apex-piese-pdf__link {
	white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--apex-txt);
	text-decoration: underline; text-decoration-color: var(--apex-amb); text-underline-offset: 3px;
}
.apex div.product .apex-piese-pdf__link:hover { color: var(--apex-amb-d); }
.apex div.product .apex-docs { max-width: 1180px; width: 100%; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.apex div.product .apex-pdf { gap: 0; column-gap: 0; }
.apex div.product .apex-piese-pdf { max-width: 1180px; }
@media (max-width: 640px) { .apex div.product .apex-docs { grid-template-columns: 1fr; } }

.apex div.product .apex-pdf { align-items: stretch; }
.apex div.product .apex-pdf__corp { justify-content: flex-start; }
.apex div.product .apex-pdf__titlu { font-size: 16.5px; line-height: 1.3; margin: 0 0 6px; }
@media (max-width: 640px) {
	.apex div.product .apex-pdf { grid-template-columns: 88px minmax(0, 1fr); }
	.apex div.product .apex-pdf__plansa { min-height: 128px; }
	.apex div.product .apex-pdf__corp { padding: 12px 14px; }
	.apex div.product .apex-pdf__titlu { font-size: 15px; }
	.apex div.product .apex-pdf__desc { display: none; }
	.apex div.product .apex-pdf__buton { padding: 8px 11px; }
}
.apex-piese-pdf__en { display: block; margin-top: 2px; font: 11.5px/1.3 var(--apex-mono); color: var(--apex-mut); letter-spacing: .02em; }

.apex .entry-content .apex-centru-docs { max-width: none; }
@media (min-width: 641px) {
	.apex .entry-content ul.apex-centru-docs__lista > li { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
}

/* Pe telefon, tabelul de piese pierde coloana de cantitate: fără ea încap codul,
   denumirea și acțiunea fără derulare pe orizontală. */
@media (max-width: 640px) {
	.apex .apex-piese-pdf th:nth-child(4),
	.apex .apex-piese-pdf td:nth-child(4) { display: none; }
	.apex .apex-piese-pdf th,
	.apex .apex-piese-pdf td { padding: 8px 8px; }
	.apex .apex-piese-pdf table { font-size: 13px; }
	.apex-piese-pdf__cod { font-size: 12px; }
	.apex-piese-pdf__en { font-size: 12px; }
	.apex div.product .apex-piese-pdf__link,
	.apex .apex-piese-pdf__link { font-size: 12px; }
	.apex-piese-pdf summary { padding: 12px 14px; }
	.apex-piese-pdf__titlu { font-size: 15px; }
}
@media (max-width: 640px) {
	.apex-piese-pdf__en { display: none; }
	.apex .apex-piese-pdf th,
	.apex .apex-piese-pdf td { padding: 8px 6px; }
	.apex .apex-piese-pdf td:last-child { padding-right: 10px; text-align: right; }
}


/* ======================================================================
   Revizie de design, 20 septembrie 2026
   ====================================================================== */

/* Tema pune `word-break: break-word` pe tot continutul. Regula aia nu taie doar
   adresele lungi: face ca latimea minima a oricarui text sa fie o litera, deci
   in orice coloana stramta cuvintele se rup la mijloc — „Garanți/e",
   „Utiliz/are" in fisa tehnica de pe telefon. `overflow-wrap: break-word` are
   acelasi efect de siguranta pentru un cod fara spatii, dar nu mai minte
   asezarea in pagina despre cat loc ii trebuie textului. */
.apex .entry-content,
.apex .apex-fisa,
.apex .apex-fisa dt,
.apex .apex-fisa dd {
	word-break: normal;
	overflow-wrap: break-word;
}

/* Bara de cookie-uri sta pe fundal inchis, iar butonul „Accept" folosea stilul
   de baza — care e tot fundalul inchis. Actiunea principala arata ca un text
   simplu, mai stearsa decat „Refuz", care macar avea contur. */
.apex .apex-acord-cookie [data-apex-cookie-da] {
	background: #fff;
	color: var(--apex-ink);
	box-shadow: none;
}
.apex .apex-acord-cookie [data-apex-cookie-da]:hover {
	background: var(--apex-amb);
	color: var(--apex-ink);
}

/* Bara de deasupra grilei din catalog. Pe ecran mare, numarul de rezultate si
   lista de sortare aveau inaltimi diferite si nu se centrau intre ele. */
.apex .kadence-shop-top-row { align-items: center; }
.apex .kadence-shop-top-item { display: flex; align-items: center; }

@media (max-width: 767px) {
	/* Pe telefon cele doua comenzi stateau una sub alta, cu latimi diferite:
	   un buton de 90px si o lista de 171px, aliniate la stanga, cu numarul de
	   rezultate strecurat intre ele. Aceeasi latime le face sa arate ca o
	   pereche, nu ca doua resturi. */
	.apex-bara-filtre { margin-bottom: 10px; }
	.apex .apex-deschide-filtre { width: 100%; justify-content: center; min-height: 42px; }
	.apex .kadence-shop-top-row { flex-direction: column; align-items: stretch; gap: 10px; }
	.apex .kadence-woo-results-count { order: -1; }
	.apex .woocommerce-ordering,
	.apex .woocommerce-ordering select { width: 100%; }
}

/* Subsol: catalogul e scris pe doua coloane, iar cel mai lung nume („Unelte
   electrice cu acumulator") ii trebuiau 203px din cei 199 disponibili. Se rupea
   pe doua randuri si, de acolo in jos, cele doua coloane nu mai erau la aceeasi
   inaltime. Coloana catalogului primeste latimea care ii lipsea. */
@media (min-width: 1025px) {
	.apex .site-middle-footer-inner-wrap.site-footer-row-columns-4 {
		grid-template-columns: 0.88fr 1.95fr 0.87fr 1.05fr !important;
	}
	.apex .apex-subsol__lista--doua { column-gap: 18px; }
}

/* Titlurile erau stranse la 1.04 — o valoare buna in engleza, gresita in
   romana: virgula lui „ț" de pe un rand ajungea peste literele randului
   urmator („Întreținerea uneltelor / pneumatice"), iar circumflexul lui „Î"
   se taia sus. Diacriticele romanesti au nevoie de aer si deasupra, si dedesubt. */
.apex:not(.home) .entry-header .entry-title { line-height: 1.14; }
.apex .apex-cap__titlu { line-height: 1.12; }
.apex.single-product div.product .product_title { line-height: 1.14; }

/* Listele din prima pagina isi aduc propria pictograma (bifa). Regula generala
   de lista din continut le mai punea un patrat de chihlimbar deasupra, deci
   fiecare rand avea doua semne: „■ ✓ Cauti dupa codul uneltei". Orice element
   de lista care incepe cu o pictograma renunta la patrat si la retragerea lui. */
/* Selectorul trebuie sa repete cele doua `:not()` ale regulii generale: fara
   ele are mai putina greutate si nu se aplica (`:not(.x)` cantareste cat o
   clasa). Cu ele, plus `:has(> svg)`, trece inaintea ei. */
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote) > li:has(> svg)::before { content: none; }
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote) > li:has(> svg) { padding-left: 0; }
/* Aceleasi liste, scrise pe nume, pentru browserele fara `:has()`. */
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-b2b__lista > li::before,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-piese__lista > li::before,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-cos-plus__lista > li::before,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-serii__lista > li::before,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-legate__lista > li::before { content: none; }
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-b2b__lista > li,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-piese__lista > li,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-cos-plus__lista > li,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-serii__lista > li,
.apex .entry-content ul:not(.apex-avantaje):not(.apex-cote).apex-legate__lista > li { padding-left: 0; }

/* Pe telefon, numarul de rezultate sta mai bine sub cele doua comenzi decat
   intre ele. */
@media (max-width: 767px) {
	.apex .kadence-woo-results-count { order: 1; }
}

/* Pe telefon cardurile stau doua pe rand, deci butonul are vreo 140px. Textul
   „ADAUGA IN COS", scris cu majuscule si 0.06em intre litere, cerea mai mult
   si iesea din buton pe ambele parti — pe ecran scria „DAUGA IN CO". Mai
   putina spatiere, mai putina margine interioara si, daca tot nu incape,
   textul trece pe al doilea rand in loc sa fie taiat. */
@media (max-width: 560px) {
	.apex ul.products li.product .apex-buton,
	.apex ul.products li.product .button {
		padding: 11px 8px !important;
		letter-spacing: .02em;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}


/* Butonul din card, continuare (20 sept, dupa ce s-a schimbat markup-ul).
   Cardul de pe telefon are 172px; `.product-action-wrap` ii mananca 16px de
   fiecare parte, iar butonul isi mai punea 16px de margine — ramaneau 89px
   pentru un text de 92px, deci pe ecran scria „DAUGA IN CO". Marginile
   laterale sunt deja acoperite de padding-ul invelisului, deci pic. Selectorul
   trece prin `.product-action-wrap` ca sa aiba mai multa greutate decat regula
   care pune `white-space: nowrap`, indiferent de ordinea din fisier. */
@media (max-width: 560px) {
	.apex ul.products li.product .product-action-wrap .apex-buton,
	.apex ul.products li.product .product-action-wrap .button {
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100%;
		padding: 11px 8px !important;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
		letter-spacing: .02em;
	}
}

/* -------------------------------------- 4.3.0: accesibilitate, Lighthouse --- */
/* Filele inactive de pe produs: Kadence le pune `opacity: .7`, ceea ce ducea
   contrastul sub 4,5:1. Culoarea noastră (#454c58) e deja estompată destul. */
.apex div.product .woocommerce-tabs ul.tabs li a { opacity: 1 !important; color: #454c58; }
.apex div.product .woocommerce-tabs ul.tabs li.active a,
.apex div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--apex-txt); }
/* „Site realizat de" din subsol și totalul coșului din antet. */
.apex .apex-credit,
.apex .apex-subsol__marci { color: rgba(255, 255, 255, .62); }
.apex .apex-subsol__marci span { color: rgba(255, 255, 255, .55); }
.apex .header-cart-total { font-size: 12px; }
/* Butonul ascuns de submeniu al temei: 16px lățime, sub cei 24 ceruți. */
.apex .header-navigation .dropdown-nav-special-toggle { width: 24px !important; min-height: 24px; }
/* Miniaturile galeriei erau întinse la 59 x 65 din poze pătrate. */
.apex .flex-control-thumbs img { aspect-ratio: 1 / 1; height: auto; object-fit: contain; }