/* ==========================================================================
   Shopius — tema după rebrandingul 2026. Fișierul de bază (pe toate paginile): culori, butoane, câmpuri, antet,
   subsol, card de produs, rânduri, prima pagină. Restul, pe feluri de pagini: magazin.css (liste), produs.css,
   comanda.css (coș + finalizare + confirmare), cont.css (cont + favorite), pagini.css (Ajutor, Oferte, pagini).
   Culorile: albastrul și galbenul MĂSURATE pe logo (planșa scria #1DAEDB, greșit).
   Întâi telefonul (majoritatea comenzilor), apoi ≥ 560, ≥ 768, ≥ 1024, ≥ 1280.
   ========================================================================== */

:root {
	--sp-albastru: #004ace;
	--sp-albastru-2: #003ba6;
	--sp-albastru-3: #002c7d;
	--sp-galben: #fed002;
	--sp-galben-2: #f2c400;
	--sp-crem: #fff7d6;
	--sp-bleu: #e4eeff;
	--sp-bleu-2: #f2f7ff;
	--sp-fond: #f4f8ff;
	--sp-text: #0b1b4d;
	--sp-gri: #5a6684;
	--sp-gri-2: #8b94ab;
	--sp-linie: #e1e8f5;
	--sp-alb: #fff;
	--sp-rosu: #e0141e;
	--sp-verde: #14964a;
	--sp-raza: 16px;
	--sp-raza-mica: 10px;
	--sp-umbra: 0 1px 2px rgba(11, 27, 77, .05), 0 6px 18px rgba(11, 27, 77, .06);
	--sp-umbra-mare: 0 12px 32px rgba(11, 27, 77, .16);
	--sp-font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sp-lat: 1320px;
	--sp-gutter: 16px;
	--sp-bara-mobil: 64px;
}

/* --- baza ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body.sp {
	margin: 0;
	font-family: var(--sp-font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--sp-text);
	background: var(--sp-alb);
	-webkit-font-smoothing: antialiased;
}
body.sp.sp-fond-bleu { background: var(--sp-fond); }
/* ⛔ :where = specificitate de element. Cu „.sp img / .sp a / .sp button" (0,1,1), regula de bază bătea orice clasă
   simplă: logoul ieșea 154px în loc de 62, butoanele .sp-btn pierdeau grosimea și mărimea (29.10). */
:where(.sp) img { max-width: 100%; height: auto; }
:where(.sp) a { color: inherit; }
:where(.sp) :is(button, input, select, textarea) { font: inherit; color: inherit; }
.sp :focus-visible { outline: 3px solid var(--sp-albastru); outline-offset: 2px; border-radius: 6px; }
.sp [hidden] { display: none !important; }
.sp-cont { width: 100%; max-width: var(--sp-lat); margin-inline: auto; padding-inline: var(--sp-gutter); }
.sp-cont .sp-cont { padding-inline: 0; }
.sp-ascuns, .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sp-sari { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--sp-galben); color: var(--sp-albastru); font-weight: 800; padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.sp-sari:focus { top: 12px; }
.sp-i { flex: none; display: block; }
.sp-capcana { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sp h1, .sp h2, .sp h3 { text-wrap: balance; }
.sp-continut { min-height: 50vh; }

/* bucla galbenă de după titluri (din planșa de rebranding) */
.sp-accent::after, .sp-titlu::after {
	content: ""; display: inline-block; vertical-align: top; width: 30px; height: 22px; margin-left: 6px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='22' viewBox='0 0 30 22'%3E%3Cpath d='M4 15 10 6' stroke='%23FED002' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M13 18 26 11' stroke='%23FED002' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- butoane ------------------------------------------------------------------ */
.sp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: 12px; border: 2px solid transparent;
	font-weight: 800; font-size: 15px; line-height: 1.15; text-decoration: none; cursor: pointer; text-align: center;
	transition: background-color .15s, border-color .15s, transform .15s, opacity .15s;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:disabled, .sp-btn.is-incarca { opacity: .6; pointer-events: none; transform: none; }
.sp-btn--albastru { background: var(--sp-albastru); color: var(--sp-alb) !important; }
.sp-btn--albastru:hover { background: var(--sp-albastru-2); }
.sp-btn--galben { background: var(--sp-galben); color: var(--sp-albastru) !important; }
.sp-btn--galben:hover { background: var(--sp-galben-2); }
.sp-btn--contur { background: var(--sp-alb); border-color: var(--sp-albastru); color: var(--sp-albastru) !important; }
.sp-btn--contur:hover { background: var(--sp-bleu-2); }
.sp-btn--mic { padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.sp-btn--mare { padding: 15px 26px; font-size: 17px; border-radius: 14px; }
.sp-btn--plin { width: 100%; }
.sp-link-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; background: none; color: var(--sp-albastru); font-weight: 800; font-size: 14px; cursor: pointer; text-decoration: none; }
.sp-link-btn:hover { text-decoration: underline; }
.sp-ico-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: none; color: var(--sp-albastru); cursor: pointer; }
.sp-ico-btn:hover { background: var(--sp-bleu-2); }
.sp-vezi-toate { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 800; color: var(--sp-albastru) !important; text-decoration: none; cursor: pointer; }
.sp-vezi-toate:hover { text-decoration: underline; }
.sp-inapoi { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 0; border: 0; background: none; font-weight: 800; color: var(--sp-albastru); text-decoration: none; cursor: pointer; }
.sp-inapoi:hover { text-decoration: underline; }

/* --- câmpuri de formular (WooCommerce, recenzii, contact) ---------------------- */
.sp input[type="text"], .sp input[type="email"], .sp input[type="tel"], .sp input[type="password"], .sp input[type="number"],
.sp input[type="search"], .sp input[type="url"], .sp select, .sp textarea {
	width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid var(--sp-linie); border-radius: 12px;
	background: var(--sp-alb); color: var(--sp-text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.sp textarea { min-height: 96px; resize: vertical; }
.sp input:focus, .sp select:focus, .sp textarea:focus { border-color: var(--sp-albastru); box-shadow: 0 0 0 3px rgba(0, 74, 206, .12); }
/* completarea automată a browserului vopsea câmpul bleu; rămâne alb, ca restul */
.sp input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 1000px var(--sp-alb); -webkit-text-fill-color: var(--sp-text); caret-color: var(--sp-text); }
.sp input:-webkit-autofill:focus { -webkit-box-shadow: inset 0 0 0 1000px var(--sp-alb), 0 0 0 3px rgba(0, 74, 206, .12); }

/* parola: WooCommerce (woocommerce.js) învelește câmpul în span.password-input și pune butonul lui, gol, pentru
   „arată parola". Fără CSS-ul WooCommerce, span-ul era în linie și butonul cădea dedesubt ca o liniuță gri. */
.sp .password-input { position: relative; display: block; }
.sp .password-input input { padding-right: 52px; }
.sp .show-password-input {
	position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 0;
	border-radius: 10px; cursor: pointer;
	background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004ACE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.sp .show-password-input:hover { background-color: var(--sp-bleu-2); }
.sp .show-password-input.display-password {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004ACE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49'/%3E%3Cpath d='M14.084 14.158a3 3 0 0 1-4.242-4.242'/%3E%3Cpath d='M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143'/%3E%3Cpath d='m2 2 20 20'/%3E%3C/svg%3E");
}
/* puterea parolei (la creare și schimbare de parolă) */
.sp .woocommerce-password-strength { margin-top: 6px; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 800; background: #fdecec; color: #8f1117; }
.sp .woocommerce-password-strength.good { background: #fff3c4; color: #8a6500; }
.sp .woocommerce-password-strength.strong { background: #e3f6ea; color: var(--sp-verde); }
.sp .woocommerce-password-hint { display: block; margin-top: 4px; font-size: 13px; color: var(--sp-gri); }
/* sub 16px, iPhone mărește singur pagina la atingerea câmpului */
.sp input, .sp select, .sp textarea { font-size: max(16px, 1em); }
.sp input[type="checkbox"], .sp input[type="radio"] { accent-color: var(--sp-albastru); width: 18px; height: 18px; }
.sp label { font-weight: 700; }
.sp .required { color: var(--sp-rosu); text-decoration: none; border: 0; }
.sp .form-row { margin: 0 0 14px; }
.sp .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 800; }
.sp .form-row .optional { font-weight: 600; color: var(--sp-gri-2); }
.sp .woocommerce-invalid input, .sp .woocommerce-invalid select, .sp .woocommerce-invalid .select2-selection { border-color: var(--sp-rosu) !important; }
.sp .woocommerce-validated input:not([type="checkbox"]) { border-color: #b7dcc5; }
.sp-bifa-rand, .sp .woocommerce-form__label-for-checkbox { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.sp-bifa-rand input, .sp .woocommerce-form__label-for-checkbox input { margin-top: 2px; flex: none; }
.sp .select2-container .select2-selection--single { height: 48px; border: 1.5px solid var(--sp-linie); border-radius: 12px; }
.sp .select2-container .select2-selection--single .select2-selection__rendered { line-height: 45px; padding-left: 14px; color: var(--sp-text); }
.sp .select2-container .select2-selection--single .select2-selection__arrow { height: 46px; right: 8px; }
.sp .select2-dropdown { border-color: var(--sp-linie); border-radius: 12px; overflow: hidden; }

/* notificările WooCommerce */
.sp .woocommerce-message, .sp .woocommerce-info, .sp .woocommerce-error, .sp-notita {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; padding: 14px 18px; list-style: none;
	border-radius: 14px; background: var(--sp-bleu-2); border: 1px solid var(--sp-bleu); font-weight: 700;
}
.sp .woocommerce-message { background: #ebf8f0; border-color: #c9ead6; }
.sp .woocommerce-error { display: block; background: #fdecec; border-color: #f6c9cb; color: #8f1117; }
.sp .woocommerce-error li { margin: 2px 0; }
.sp .woocommerce-message a, .sp .woocommerce-info a, .sp-notita__link { font-weight: 900; color: var(--sp-albastru); }
.sp .woocommerce-message .button, .sp .woocommerce-info .button { order: 2; margin-left: auto; padding: 8px 14px; border-radius: 10px; background: var(--sp-albastru); color: var(--sp-alb); text-decoration: none; }
.sp .woocommerce-notices-wrapper:empty { display: none; }

/* cantitatea cu − / + (produs, coș, finalizare) */
.sp-pas { display: inline-flex; align-items: center; border: 1.5px solid var(--sp-linie); border-radius: 12px; background: var(--sp-alb); overflow: hidden; }
.sp-pas__btn { display: grid; place-items: center; width: 44px; height: 46px; border: 0; background: none; color: var(--sp-albastru); cursor: pointer; }
.sp-pas__btn:hover { background: var(--sp-bleu-2); }
.sp-pas__btn:disabled { opacity: .4; }
.sp .sp-pas input.qty { width: 60px; min-height: 46px; padding: 0; border: 0; border-inline: 1.5px solid var(--sp-linie); border-radius: 0; text-align: center; font-weight: 900; -moz-appearance: textfield; box-shadow: none; }
.sp-pas input.qty::-webkit-outer-spin-button, .sp-pas input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-pas--mic .sp-pas__btn { width: 34px; height: 36px; }
.sp-pas--mic > span { min-width: 32px; text-align: center; font-weight: 900; }

/* stele, pastile, etichete */
.sp-stele { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.sp-stele svg { fill: currentColor; }
.sp-stele__gol { display: inline-flex; color: #dfe4ee; }
.sp-stele__plin { position: absolute; inset: 0 auto 0 0; display: inline-flex; overflow: hidden; white-space: nowrap; color: #f5b301; }
.sp-pastila { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--sp-bleu); color: var(--sp-albastru); font-size: 13px; font-weight: 800; white-space: nowrap; vertical-align: middle; }
.sp-pastila::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sp-pastila--verde { background: #e3f6ea; color: var(--sp-verde); }
.sp-pastila--galben { background: #fff3c4; color: #8a6500; }
.sp-pastila--rosu { background: #fde4e5; color: var(--sp-rosu); }
.sp-pastila--gri { background: #eceff5; color: var(--sp-gri); }
.sp-pastila .sp-i + * { margin: 0; }
.sp-eticheta { display: inline-block; padding: 3px 9px; border-radius: 9px; background: var(--sp-galben); color: var(--sp-text); font-size: 13px; font-weight: 900; line-height: 1.3; }
.sp-eticheta--nou { background: var(--sp-galben); color: var(--sp-albastru); }
.sp-eticheta--mare { font-size: 16px; padding: 5px 12px; }
/* campania (Black Friday, 7–14.11): insigna neagră, numele mic și galben deasupra procentului (shopius_eticheta_reducere) */
.sp-eticheta--campanie { display: inline-grid; justify-items: center; background: #111; color: #fff; }
.sp-eticheta--campanie small { margin: 1px 0 0; font-size: 8.5px; font-weight: 900; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; color: var(--sp-galben); }
.sp-eticheta--campanie.sp-eticheta--mare small { font-size: 10.5px; }
.sp-bulina { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: auto; border-radius: 999px; background: var(--sp-galben); color: var(--sp-albastru); font-size: 12px; font-style: normal; font-weight: 900; }
.sp-stoc { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 13px; font-weight: 800; color: var(--sp-verde); }
.sp-stoc::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sp-stoc--nu { color: var(--sp-rosu); }
.sp-stoc--mare { font-size: 16px; }
.sp-caseta { background: var(--sp-alb); border: 1px solid var(--sp-linie); border-radius: var(--sp-raza); padding: 18px; }
.sp-caseta__titlu { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 20px; font-weight: 900; color: var(--sp-albastru); }
.sp-caseta__titlu small { font-size: 15px; font-weight: 700; color: var(--sp-gri); }
.sp-caseta__sub { margin: 0 0 14px; color: var(--sp-gri); }
.sp-caseta__cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sp-cerc-ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--sp-bleu-2); color: var(--sp-albastru); }

/* --- bara de sus ----------------------------------------------------------- */
.sp-bara-sus { display: none; background: var(--sp-bleu-2); border-bottom: 1px solid var(--sp-linie); font-size: 13px; color: var(--sp-text); }
.sp-bara-sus__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.sp-bara-sus__info { display: flex; align-items: center; gap: 22px; }
.sp-bara-sus__info .sp-i { color: var(--sp-albastru); }
.sp-judet { display: inline-flex; align-items: center; gap: 6px; }
.sp-judet__btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border: 0; background: none; cursor: pointer; color: var(--sp-text); font-size: 13px; }
.sp-judet__btn b { font-weight: 900; }
.sp-judet__panou {
	position: fixed; z-index: 300; width: min(320px, calc(100vw - 24px)); padding: 16px; border-radius: 14px;
	background: var(--sp-alb); border: 1px solid var(--sp-linie); box-shadow: var(--sp-umbra-mare); font-size: 14px;
}
.sp-judet__panou label { display: block; margin-bottom: 8px; font-weight: 900; color: var(--sp-albastru); }
.sp-judet__panou p { margin: 10px 0 0; color: var(--sp-gri); font-size: 13px; }
.sp-bara-sus__magazine { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; }
.sp-bara-sus__magazine:hover { color: var(--sp-albastru); }
/* magazinele fizice: unde sunt și traseul (03.11: ridicarea comenzilor din magazin NU există) */
.sp-mf { position: relative; }
.sp-mf__btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 700; list-style: none; }
.sp-mf__btn::-webkit-details-marker { display: none; }
.sp-mf__btn:hover, .sp-mf[open] .sp-mf__btn { color: var(--sp-albastru); }
.sp-mf__sag { color: var(--sp-gri); transition: transform .15s; }
.sp-mf[open] .sp-mf__sag { transform: rotate(180deg); }
.sp-mf__panou {
	position: absolute; left: 0; top: calc(100% + 10px); z-index: 60; width: 360px; padding: 16px;
	background: var(--sp-alb); border: 1px solid var(--sp-linie); border-radius: 14px; box-shadow: var(--sp-umbra-mare); font-size: 14px;
}
.sp-mf__titlu { margin: 0; font-size: 16px; font-weight: 900; color: var(--sp-albastru); }
.sp-mf__sub { margin: 2px 0 8px; font-size: 13px; color: var(--sp-gri); }
.sp-mf__lista { margin: 0 0 14px; padding: 0; list-style: none; max-height: min(52vh, 440px); overflow-y: auto; }
.sp-mf__lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sp-linie); }
.sp-mf__lista li:first-child { border-top: 0; }
.sp-mf__loc { min-width: 0; }
.sp-mf__loc b { color: var(--sp-text); }
.sp-mf__loc em { font-style: normal; font-size: 12px; color: var(--sp-gri); }
.sp-mf__loc > span { display: block; font-size: 13px; color: var(--sp-gri); }
.sp-mf__traseu { flex: none; font-size: 13px; font-weight: 800; color: var(--sp-albastru); text-decoration: none; }
.sp-mf__traseu:hover { text-decoration: underline; }
.sp-mf__panou .sp-btn { width: 100%; }
.sp-bara-sus__legaturi { display: flex; }
.sp-bara-sus__legaturi a { padding: 0 14px; text-decoration: none; font-weight: 700; border-left: 1px solid var(--sp-linie); }
.sp-bara-sus__legaturi a:first-child { border-left: 0; }
.sp-bara-sus__legaturi a:hover { color: var(--sp-albastru); }

/* --- „Accesibilitate": buton care arată ca legăturile din jur; deschide panoul OneTap (shopius.js) ------------
   ⛔ Butonul rotund al pluginului (în colțul ecranului) e ascuns: pe telefon stătea peste „Cont" din bara de jos și
   peste produse la derulare. Panoul rămâne al pluginului; „Ascunde bara" din panou nu mai are ce ascunde ⇒ scos. */
.onetap-container-toggle, .onetap-accessibility-plugin .onetap-toggle, nav.onetap-accessibility .onetap-hide-toolbar { display: none !important; }
.sp-acces { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.sp-acces .sp-i { flex: none; }
.sp-bara-sus__legaturi .sp-acces { padding: 0 14px; font-weight: 700; border-left: 1px solid var(--sp-linie); }
.sp-bara-sus__legaturi .sp-acces .sp-i { color: var(--sp-albastru); }
.sp-bara-sus__legaturi .sp-acces:hover { color: var(--sp-albastru); }

/* --- antetul --------------------------------------------------------------- */
.sp-antet { position: relative; z-index: 50; background: var(--sp-alb); }
.sp-antet__rand {
	display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "meniu logo actiuni" "cautare cautare cautare";
	align-items: center; gap: 10px 12px; padding-block: 10px 12px;
}
.sp-meniu-btn { grid-area: meniu; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--sp-albastru); cursor: pointer; }
.sp-logo { grid-area: logo; justify-self: center; display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.sp-logo img { width: auto; display: block; }
.sp-logo__mare { display: none !important; }
.sp-logo__mic { height: 38px; }
.sp-cautare { grid-area: cautare; min-width: 0; }
.sp-actiuni { grid-area: actiuni; display: flex; align-items: center; gap: 2px; }
.sp-actiune {
	position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px;
	color: var(--sp-albastru); text-decoration: none; line-height: 1.15; cursor: pointer; list-style: none;
}
.sp-actiune::-webkit-details-marker { display: none; }
.sp-actiune:hover { background: var(--sp-bleu-2); }
.sp-actiune__text { display: none; }
.sp-actiune__text b { display: block; font-size: 15px; font-weight: 900; color: var(--sp-albastru); }
.sp-actiune__text small { display: block; font-size: 13px; color: var(--sp-gri); white-space: nowrap; }
.sp-actiune--fav, .sp-cont-meniu { display: none; }
.sp-actiune__icon { position: relative; display: block; }
.sp-cos-nr, .sp-fav-nr {
	position: absolute; top: -8px; right: -10px; min-width: 20px; height: 20px; padding: 0 5px;
	border-radius: 999px; background: var(--sp-rosu); color: var(--sp-alb);
	font-size: 12px; font-weight: 900; line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--sp-alb);
}
.sp-fav-nr { background: var(--sp-galben); color: var(--sp-albastru); }
.sp-cos-nr--gol { display: none; }
.sp-cont-meniu { position: relative; }
.sp-cont-meniu__sag { color: var(--sp-gri); transition: transform .15s; }
.sp-cont-meniu[open] .sp-cont-meniu__sag { transform: rotate(180deg); }
.sp-cont-meniu__panou {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 250px; padding: 12px;
	background: var(--sp-alb); border: 1px solid var(--sp-linie); border-radius: 14px; box-shadow: var(--sp-umbra-mare);
	display: grid; gap: 2px;
}
.sp-cont-meniu__panou > a:not(.sp-btn) { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.sp-cont-meniu__panou > a:not(.sp-btn):hover { background: var(--sp-bleu-2); color: var(--sp-albastru); }
.sp-cont-meniu__panou .sp-i { color: var(--sp-albastru); }
.sp-cont-meniu__salut { margin: 2px 10px 8px; font-weight: 900; color: var(--sp-albastru); }
.sp-cont-meniu__nou { margin: 8px 10px; font-size: 14px; color: var(--sp-gri); }
.sp-cont-meniu__nou a { font-weight: 800; color: var(--sp-albastru); }
.sp-cont-meniu__iesire { border-top: 1px solid var(--sp-linie); margin-top: 4px; }

/* căutarea — formularul Advanced Woo Search, îmbrăcat ca pastilă */
.sp-cautare .aws-container .aws-search-form,
.sp-cautare__form {
	display: flex !important; align-items: center; height: 48px !important;
	background: var(--sp-bleu-2) !important; border: 1.5px solid var(--sp-bleu) !important; border-radius: 999px !important; overflow: hidden;
}
.sp-cautare .aws-container .aws-search-form:focus-within,
.sp-cautare__form:focus-within { border-color: var(--sp-albastru) !important; background: var(--sp-alb) !important; }
.sp-cautare .aws-container .aws-search-field,
.sp-cautare__form input[type="search"] {
	flex: 1; height: 100% !important; min-height: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
	padding: 0 20px !important; font: 600 16px/1 var(--sp-font) !important; color: var(--sp-text) !important; outline: none;
}
.sp-cautare .aws-container .aws-search-form .aws-form-btn,
.sp-cautare__form button {
	height: 100% !important; border: 0 !important; background: transparent !important; color: var(--sp-albastru);
	padding: 0 18px !important; cursor: pointer; display: grid; place-items: center;
}
.sp-cautare .aws-container .aws-search-form .aws-search-btn svg { fill: var(--sp-albastru); }

/* --- rândul de categorii ---------------------------------------------------- */
.sp-cat-nav { border-block: 1px solid var(--sp-linie); background: var(--sp-alb); }
.sp-cat-nav__in { display: flex; align-items: center; gap: 16px; }
.sp-cat-nav .sp-segment { display: none; }
.sp-cat-nav__meniu { min-width: 0; flex: 1; }
.sp-cat-nav__lista { display: flex; gap: 6px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sp-cat-nav__lista::-webkit-scrollbar { display: none; }
.sp-cat-nav__lista li { flex: none; scroll-snap-align: start; }
.sp-cat-nav__lista a {
	display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px;
	background: var(--sp-bleu-2); color: var(--sp-albastru); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.sp-cat-nav__lista a:hover, .sp-cat-nav__lista a[aria-current] { background: var(--sp-bleu); }
.sp-cat-nav__lista a[aria-current] { box-shadow: inset 0 -3px 0 var(--sp-galben); }
.sp-segment { display: inline-flex; padding: 4px; gap: 4px; background: var(--sp-bleu-2); border-radius: 14px; }
.sp-segment__opt {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 11px;
	font-size: 15px; font-weight: 800; color: var(--sp-albastru); text-decoration: none; white-space: nowrap;
}
.sp-segment__opt.is-activ { background: var(--sp-albastru); color: var(--sp-alb); }
.sp-segment__opt:not(.is-activ):hover { background: var(--sp-bleu); }

/* --- sertarul (meniul de pe telefon) ---------------------------------------- */
.sp-sertar { position: fixed; inset: 0; z-index: 200; background: rgba(11, 27, 77, .45); }
.sp-sertar__panou {
	position: absolute; inset: 0 auto 0 0; width: min(88vw, 380px); overflow-y: auto;
	background: var(--sp-alb); padding: 16px 16px max(24px, env(safe-area-inset-bottom));
	display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sp-umbra-mare);
}
.sp-sertar__cap { display: flex; align-items: center; justify-content: space-between; }
.sp-sertar__cap img { height: 34px; width: auto; }
.sp-sertar__inchide { border: 0; background: var(--sp-bleu-2); color: var(--sp-albastru); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; }
.sp-segment--sertar { display: flex; }
.sp-segment--sertar .sp-segment__opt { flex: 1; padding: 10px; font-size: 14px; }
.sp-sertar__categorii .sp-cat-nav__lista { flex-direction: column; overflow: visible; padding: 0; gap: 2px; }
.sp-sertar__categorii .sp-cat-nav__lista a { display: flex; background: none; padding: 12px 10px; font-size: 16px; color: var(--sp-text); }
.sp-sertar__categorii .sp-cat-nav__lista .sp-i { color: var(--sp-albastru); }
.sp-sertar__categorii .sp-cat-nav__lista a:hover { background: var(--sp-bleu-2); }
.sp-sertar__legaturi { display: flex; flex-direction: column; border-top: 1px solid var(--sp-linie); padding-top: 10px; }
.sp-sertar__legaturi a { display: flex; align-items: center; gap: 10px; padding: 10px; text-decoration: none; font-weight: 800; color: var(--sp-text); border-radius: 10px; }
.sp-sertar__legaturi a .sp-i { color: var(--sp-albastru); }
.sp-sertar__legaturi--mici a { font-weight: 700; color: var(--sp-gri); padding-block: 8px; }
.sp-sertar__legaturi .sp-acces { gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 700; color: var(--sp-gri); }
.sp-sertar__legaturi .sp-acces .sp-i { color: var(--sp-albastru); }
.sp-sertar__magazine small { display: block; font-size: 13px; font-weight: 700; color: var(--sp-gri); }
.sp-sertar__contact { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; margin: 0; padding: 12px; border-radius: 12px; background: var(--sp-bleu-2); color: var(--sp-albastru); }
.sp-sertar__contact a { font-weight: 900; text-decoration: none; font-size: 18px; }
.sp-sertar__contact small { grid-column: 2; color: var(--sp-gri); }
body.sp-blocat { overflow: hidden; }

/* --- bara de jos (telefon) ---------------------------------------------------- */
.sp-bara-mobil {
	position: fixed; inset: auto 0 0 0; z-index: 90; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
	height: calc(var(--sp-bara-mobil) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
	background: var(--sp-alb); border-top: 1px solid var(--sp-linie); box-shadow: 0 -4px 18px rgba(11, 27, 77, .08);
}
.sp-bara-mobil a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 2px 9px; color: var(--sp-albastru); text-decoration: none; font-size: 12px; font-weight: 800; }
.sp-bara-mobil a[aria-current] { color: var(--sp-albastru); }
.sp-bara-mobil a[aria-current] span:last-child { box-shadow: 0 3px 0 var(--sp-galben); }
.sp-bara-mobil__mijloc { position: relative; }
.sp-bara-mobil__cerc { display: grid; place-items: center; width: 60px; height: 60px; margin-top: -26px; border-radius: 50%; background: var(--sp-albastru); box-shadow: 0 6px 16px rgba(0, 74, 206, .35); border: 4px solid var(--sp-alb); }
.sp-bara-mobil__cerc img { width: 48px; height: 48px; border-radius: 50%; }
body.sp { padding-bottom: calc(var(--sp-bara-mobil) + env(safe-area-inset-bottom)); }
body.sp.single-product, body.sp.sp-finalizare-pagina { padding-bottom: 0; }

/* Chatul Tidio: bulina lui stă în colțul de jos și pe telefon acoperea „Cont" din bara de jos (03.11, userul); pe
   produs, în coș și la finalizare ar fi acoperit „Adaugă în coș", totalul, „Plasează comanda". Cât e închis, o urcăm
   deasupra barelor lipite jos (--sp-chat-jos, măsurat în shopius.js). Deschis (ia tot ecranul), rămâne cum îl pune el.
   Tidio are două desene (vezi shopius.js): iframe-ul vechi îl urcăm cu `bottom`; în cel nou bulina e în Shadow DOM,
   într-un strat fix cât ecranul ⇒ urcăm stratul întreg. `transform` îl face container și pentru ce e `position: fixed`
   înăuntru; `sp-chat-urcat` îl pune shopius.js doar cât bulina e închisă. */
@media (max-width: 1023.98px) {
	body:not(.sp-chat-deschis) #tidio-chat-iframe { bottom: var(--sp-chat-jos, calc(var(--sp-bara-mobil) + env(safe-area-inset-bottom))) !important; }
	body.sp-chat-urcat #tidio-chat { transform: translateY(calc(-1 * var(--sp-chat-jos, 0px))); }
}

/* notificarea „Adăugat în coș" */
.sp-toast {
	position: fixed; left: 50%; bottom: calc(var(--sp-bara-mobil) + 16px + env(safe-area-inset-bottom)); z-index: 400;
	display: flex; align-items: center; gap: 14px; max-width: min(92vw, 520px); padding: 14px 18px; border-radius: 14px;
	background: var(--sp-text); color: var(--sp-alb); box-shadow: var(--sp-umbra-mare); font-weight: 700; font-size: 15px;
	transform: translate(-50%, 20px); opacity: 0; transition: transform .25s, opacity .25s;
}
.sp-toast.is-vizibil { transform: translate(-50%, 0); opacity: 1; }
.sp-toast a { flex: none; padding: 7px 12px; border-radius: 10px; background: var(--sp-galben); color: var(--sp-albastru); font-weight: 900; text-decoration: none; }
.sp .added_to_cart { display: none !important; }

/* --- prima pagină: hero --------------------------------------------------------- */
.sp-hero { position: relative; overflow: hidden; background: var(--sp-galben); }
.sp-hero::before, .sp-hero::after { content: ""; position: absolute; border-radius: 50%; background: var(--sp-albastru); pointer-events: none; }
/* ⛔ pe telefon, cercul din dreapta-sus stătea sub titlu: „din ce" albastru pe albastru (măsurat cu fontul, 30.10: pe
   un ecran de 390, rândul 1 ajunge la 286px, cercul începea de la 181px) ⇒ doar de la 768 în sus, unde textul are
   coloana lui */
.sp-hero::before { display: none; }
.sp-hero::after { width: 140px; height: 140px; left: -60px; bottom: -70px; opacity: .95; }
.sp-hero__in { position: relative; z-index: 1; display: grid; gap: 8px; padding-block: 30px 18px; }
.sp-hero__titlu { margin: 0; font-size: clamp(38px, 9vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--sp-albastru); }
.sp-hero__sub { margin: 12px 0 20px; font-size: 18px; font-weight: 700; max-width: 30ch; }
/* produsele decupate (assets/img/erou), direct pe galben: procente din cutie, rotite în jurul centrului.
   Cutia are proporție fixă, nu înălțime: compoziția se micșorează întreagă (machetată la 680×380 și 343×230). */
.sp-hero__colaj { position: relative; aspect-ratio: 3 / 2; margin-top: 8px; }
.sp-hero__produs { position: absolute; width: auto; filter: drop-shadow(0 12px 14px rgba(11, 27, 77, .26)); }
.sp-hero__produs--cereale { left: 3%; top: 17%; height: 64%; transform: rotate(-9deg); z-index: 1; }
.sp-hero__produs--servus { left: 75%; top: 5%; height: 70%; transform: rotate(8deg); z-index: 1; }
.sp-hero__produs--chips { left: 31%; top: -2%; height: 84%; transform: rotate(-3deg); z-index: 2; }
.sp-hero__produs--megusta { left: 63%; top: 42%; height: 54%; transform: rotate(6deg); z-index: 3; }
.sp-hero__produs--grabgo { left: 2%; top: 75%; width: 46%; transform: rotate(-10deg); z-index: 4; }
.sp-hero__pata { position: absolute; z-index: 0; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.sp-hero__pata--1 { left: 55%; top: 54%; height: 100%; background: var(--sp-albastru); }
.sp-hero__pata--2 { left: 14%; top: 18%; height: 16%; background: var(--sp-alb); }
/* eticheta rotundă (Oferte): albă, ca să nu se piardă pe discul albastru */
.sp-hero__eticheta {
	position: absolute; right: -2%; bottom: -4%; z-index: 5; display: grid; place-items: center; width: 27%; aspect-ratio: 1;
	padding: 3%; border-radius: 50%; background: var(--sp-alb); color: var(--sp-albastru); box-shadow: var(--sp-umbra-mare);
	font-size: clamp(12px, 2.6vw, 17px); font-weight: 900; line-height: 1.1; text-align: center; transform: rotate(-8deg);
}
/* bannerele din admin (carusel) au CSS-ul lor: bannere.css; eroul ăsta e doar rezerva, când nu e niciun banner */


/* --- beneficii -------------------------------------------------------------- */
.sp-beneficii { border-block: 1px solid var(--sp-linie); background: var(--sp-bleu-2); }
.sp-beneficii__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-block: 0; padding-block: 16px; list-style: none; }
.sp-beneficii__lista li { display: flex; align-items: center; gap: 12px; color: var(--sp-albastru); }
.sp-beneficii__lista span { display: flex; flex-direction: column; font-size: 13px; color: var(--sp-gri); line-height: 1.25; }
.sp-beneficii__lista b { font-size: 15px; font-weight: 900; color: var(--sp-albastru); }

/* --- secțiuni & titluri ----------------------------------------------------- */
.sp-sectiune { margin-block: 32px; }
.sp-sectiune--coloana { margin-block: 28px; }
.sp-sectiune__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.sp-titlu { margin: 0; font-size: clamp(23px, 5.4vw, 32px); font-weight: 900; line-height: 1.15; color: var(--sp-albastru); letter-spacing: -.01em; }
.sp-titlu small { font-size: .6em; font-weight: 700; color: var(--sp-gri); }

/* --- rândul de produse (derulare orizontală) -------------------------------- */
.sp-rand { position: relative; }
.sp-rand__pista {
	display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 12px; margin: 0; padding: 4px 2px 10px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
/* ⛔ fără scroll-behavior: smooth aici: cu padding + snap „mandatory", alinierea de la încărcare (2px) devenea un scroll
   ANIMAT, pe care Chrome îl ia drept scroll al omului ⇒ LCP-ul paginii nu se mai înregistrează (pățit pe european,
   12.10). Săgețile derulează lin prin scrollBy({ behavior: "smooth" }) din shopius.js. */
.sp-rand__pista::-webkit-scrollbar { display: none; }
.sp-rand__el { scroll-snap-align: start; min-width: 0; }
.sp-rand__sageata {
	display: none; position: absolute; top: 40%; z-index: 5; width: 44px; height: 44px; border-radius: 50%;
	border: 1px solid var(--sp-linie); background: var(--sp-alb); color: var(--sp-albastru); box-shadow: var(--sp-umbra); place-items: center; cursor: pointer;
}
.sp-rand__sageata--st { left: -14px; }
.sp-rand__sageata--dr { right: -14px; }
.sp-rand__sageata:hover { background: var(--sp-albastru); color: var(--sp-alb); }

/* filele pe categorii: „Preferatele clienților" (prima pagină), pagina Oferte */
.sp-file { display: flex; gap: 8px; margin: 0 0 16px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.sp-file::-webkit-scrollbar { display: none; }
.sp-file a, .sp-file button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; border: 0; border-radius: 12px; background: var(--sp-bleu-2); color: var(--sp-albastru); font-weight: 800; cursor: pointer; text-decoration: none; }
.sp-file a small, .sp-file button small { font-size: 12px; opacity: .75; }
.sp-file a.is-activ, .sp-file button.is-activ { background: var(--sp-albastru); color: var(--sp-alb); }

/* grila de carduri (favorite, oferte) */
.sp-grila-carduri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }

/* --- cardul de produs --------------------------------------------------------- */
.sp-card {
	position: relative; display: flex; flex-direction: column; height: 100%;
	background: var(--sp-alb); border: 1px solid var(--sp-linie); border-radius: var(--sp-raza); padding: 10px;
	transition: box-shadow .2s, border-color .2s;
}
.sp-card:hover { box-shadow: var(--sp-umbra); border-color: #cfd9ec; }
.sp-card__poza { position: relative; display: block; aspect-ratio: 1; border-radius: var(--sp-raza-mica); overflow: hidden; background: var(--sp-alb); }
.sp-card__img { width: 100%; height: 100%; object-fit: contain; }
.sp-card__poza .sp-eticheta { position: absolute; top: 4px; left: 4px; z-index: 2; }
.sp-card__corp { display: flex; flex-direction: column; flex: 1; gap: 1px; padding-top: 8px; }
.sp-card__nume { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.3; min-height: 2.6em; color: var(--sp-albastru); }
.sp-card__nume a { text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-card__nume a:hover { text-decoration: underline; }
.sp-card__cant { margin: 0; font-size: 13px; color: var(--sp-gri); }
.sp-card__preturi { margin-top: auto; padding-top: 6px; }
.sp-card__pret { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.sp-card__acum, .sp-card__pret > .amount, .sp-card__pret ins { font-size: 19px; font-weight: 900; color: var(--sp-text); text-decoration: none; }
.sp-card__pret--redus .sp-card__acum { color: var(--sp-rosu); }
.sp-card__vechi { font-size: 13px; color: var(--sp-gri-2); }
.sp-card__unitar { margin: 0; font-size: 12px; color: var(--sp-gri); }
.sp-card .sp-stoc { font-size: 12px; }
.sp-card--epuizat .sp-card__img { opacity: .5; }
.sp-card__actiuni { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sp-card__adauga {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 10px; border-radius: 11px;
	background: var(--sp-galben); color: var(--sp-albastru) !important; text-decoration: none; font-weight: 900; font-size: 15px; transition: background-color .15s, transform .15s;
}
.sp-card__adauga:hover { background: var(--sp-galben-2); transform: translateY(-1px); }
.sp-card__adauga--vezi { background: var(--sp-bleu); }
.sp-card__adauga--epuizat { background: #eef1f6; color: var(--sp-gri-2) !important; pointer-events: none; }
.sp-card__adauga.loading { opacity: .55; pointer-events: none; }
.sp-card__adauga.added { background: var(--sp-albastru); color: var(--sp-alb) !important; }

/* inima de favorite (butonul temei; lista e cea din YITH) */
.sp-inima {
	display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .94); color: var(--sp-albastru); box-shadow: 0 1px 4px rgba(11, 27, 77, .14); cursor: pointer; transition: transform .15s;
}
.sp-inima:hover { transform: scale(1.08); }
.sp-inima[aria-pressed="true"] { color: var(--sp-rosu); }
.sp-inima[aria-pressed="true"] svg { fill: currentColor; }
.sp-inima.is-incarca { opacity: .6; }
.sp-card .sp-inima { position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; }
.sp-inima--text { display: inline-flex; gap: 8px; width: auto; height: auto; padding: 10px 14px; border: 2px solid var(--sp-albastru); border-radius: 10px; box-shadow: none; background: var(--sp-alb); font-size: 14px; font-weight: 800; }
.sp-inima--text:hover { transform: none; background: var(--sp-bleu-2); }

/* --- categorii (prima pagină) -------------------------------------------------- */
.sp-categorii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-categorie { display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; border: 1px solid var(--sp-linie); border-radius: var(--sp-raza); background: var(--sp-alb); transition: box-shadow .2s, transform .2s; }
.sp-categorie:hover { box-shadow: var(--sp-umbra); transform: translateY(-2px); }
.sp-categorie__poze { display: flex; justify-content: center; align-items: center; aspect-ratio: 4 / 3; padding: 10px; background: var(--sp-crem); }
/* ⭐ Produse ca decor pe fundal deschis (aici, la branduri, la subcategorii): pozele din magazin sunt pe ALB, iar
   `multiply` face albul să ia culoarea fundalului, fără să schimbe produsul ⇒ fără cardurile albe (cerut, 29.10).
   ⛔ Doar pe fundal deschis: pe galben ar îngălbeni produsul (acolo, decupate: template-parts/erou-produse.php). */
.sp-categorie__poze img { width: 46%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.sp-categorie__poze img + img { margin-left: -14%; }
.sp-categorie__poze img:nth-child(1) { transform: rotate(-6deg); }
.sp-categorie__poze img:nth-child(2) { position: relative; z-index: 2; transform: translateY(-6px); }
.sp-categorie__poze img:nth-child(3) { transform: rotate(6deg); }
/* poza făcută de user (Aspect → Categorii prima pagină): toată dala, cum a desenat-o — fără multiply (i-ar schimba
   culorile pe crem), fără rotire. Specificitatea egală cu :nth-child de mai sus ⇒ câștigă fiind după. */
.sp-categorie__poze.sp-categorie__poze--a-ta { padding: 0; overflow: hidden; }
.sp-categorie__poze.sp-categorie__poze--a-ta img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; mix-blend-mode: normal; transform: none; transition: transform .25s; }
.sp-categorie:hover .sp-categorie__poze--a-ta img { transform: scale(1.04); }
.sp-categorie__eticheta { display: flex; align-items: center; gap: 8px; padding: 12px; font-size: 14px; font-weight: 900; color: var(--sp-albastru); }
.sp-categorie__eticheta > span { flex: 1; min-width: 0; }

/* --- banda albastră: brandurile --------------------------------------------- */
.sp-banda-albastra { position: relative; overflow: hidden; margin-block: 40px; background: var(--sp-albastru); color: var(--sp-alb); }
.sp-banda-albastra::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 260px; height: 260px; border-radius: 50%; background: var(--sp-albastru-2); }
.sp-banda-albastra__in { position: relative; z-index: 1; display: grid; gap: 20px; padding-block: 32px; }
.sp-banda-albastra__titlu { margin: 0 0 10px; font-size: clamp(30px, 7vw, 48px); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; }
.sp-banda-albastra__titlu em { font-style: normal; color: var(--sp-galben); }
.sp-banda-albastra__text p { margin: 0 0 20px; font-size: 16px; font-weight: 600; opacity: .92; max-width: 36ch; }
.sp-banda-albastra__carduri { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sp-banda-albastra__carduri::-webkit-scrollbar { display: none; }
.sp-banda-albastra__carduri li { scroll-snap-align: start; }
.sp-brand-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px; border-radius: var(--sp-raza); background: var(--sp-alb); text-decoration: none; transition: transform .2s; }
.sp-brand-card:hover { transform: translateY(-3px); }
.sp-brand-card__logo { display: grid; place-items: center; height: 56px; }
.sp-brand-card__logo img { max-height: 56px; width: auto; object-fit: contain; }
.sp-brand-card__poze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 10px; background: var(--sp-crem); }
.sp-brand-card__poze img { aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; } /* vezi .sp-categorie__poze */
/* cardul făcut de user (Aspect → Branduri prima pagină): toată poza, 3 : 2, cu logo cu tot. min-height: cât cardurile
   de alături, dacă rândul e mai înalt (poza se întinde prin cover, nu rămâne gol dedesubt) */
.sp-brand-card--poza { position: relative; height: auto; min-height: 100%; aspect-ratio: 3 / 2; padding: 0; overflow: hidden; }
.sp-brand-card--poza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* peste poză (30.10): logoul brandului sus în stânga și săgeata galbenă, sus în dreapta. Logoul stă DIRECT pe poză
   (fișierele au fundal transparent), cu o umbră care urmează conturul literelor: eticheta albă de sub el „arată
   ciudat" (userul, 30.10). */
/* ⛔ înălțimea logoului în px, nu „height: 100%" într-o etichetă grid: rândul grid-ului crește după poză (120 px din
   atribut) și logoul ieșea mare, peste etichetă (captura userului, 30.10) */
.sp-brand-card__eticheta { position: absolute; top: 12px; left: 14px; z-index: 1; display: block; line-height: 0; }
.sp-brand-card--poza .sp-brand-card__eticheta img { position: static; inset: auto; display: block; width: auto; height: 44px; max-width: 120px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); }
.sp-brand-card__mergi { position: absolute; top: 10px; right: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-galben); color: var(--sp-albastru); box-shadow: 0 4px 14px rgba(11, 27, 77, .2); transition: transform .2s; }
.sp-brand-card--poza:hover .sp-brand-card__mergi { transform: translateX(3px); }

/* --- pentru firme ----------------------------------------------------------- */
.sp-firme { margin-block: 40px; }
.sp-firme__in { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 24px 20px; border-radius: 20px; background: var(--sp-bleu); }
.sp-firme__titlu { margin: 0 0 6px; font-size: clamp(25px, 6vw, 36px); font-weight: 900; line-height: 1.1; color: var(--sp-albastru); }
.sp-firme__text p { margin: 0; font-weight: 600; color: var(--sp-gri); }
.sp-firme__beneficii { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sp-firme__beneficii li { display: flex; align-items: flex-start; gap: 10px; color: var(--sp-albastru); }
.sp-firme__beneficii span { display: flex; flex-direction: column; font-size: 13px; color: var(--sp-gri); line-height: 1.3; }
.sp-firme__beneficii b { font-size: 14px; font-weight: 900; color: var(--sp-albastru); }
.sp-firme__btn { justify-self: start; position: relative; z-index: 1; }
.sp-firme__semn { position: absolute; right: -36px; bottom: -40px; width: 150px; height: auto; transform: rotate(-10deg); opacity: .18; pointer-events: none; }

/* --- branduri (logouri) ----------------------------------------------------- */
.sp-rand--branduri .sp-rand__pista { grid-auto-columns: 38%; }
.sp-logo-brand { display: grid; place-items: center; height: 92px; padding: 14px; border: 1px solid var(--sp-linie); border-radius: 12px; background: var(--sp-alb); transition: box-shadow .2s; }
.sp-logo-brand:hover { box-shadow: var(--sp-umbra); }
.sp-logo-brand img { max-height: 60px; width: auto; object-fit: contain; }

/* --- idei (articole) -------------------------------------------------------- */
.sp-idei { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-idee { display: grid; grid-template-columns: minmax(0, 1fr) 40%; height: 100%; min-height: 140px; overflow: hidden; border-radius: var(--sp-raza); background: var(--sp-bleu-2); text-decoration: none; transition: box-shadow .2s; }
.sp-idee:hover { box-shadow: var(--sp-umbra); }
.sp-idee__text { display: flex; flex-direction: column; gap: 4px; padding: 16px; font-size: 14px; color: var(--sp-gri); }
.sp-idee__text b, .sp-idee__titlu { margin: 0; font-size: 16px; font-weight: 900; line-height: 1.25; color: var(--sp-albastru); }
.sp-idee__mai { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-weight: 800; color: var(--sp-albastru); }
/* textul de căutare al primei pagini (din tema veche): discret, deasupra newsletterului */
.sp-seo-acasa { margin-block: 28px; padding-top: 20px; border-top: 1px solid var(--sp-linie); color: var(--sp-gri); font-size: 14px; }
.sp-seo-acasa__titlu { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--sp-text); }
.sp-seo-acasa p { margin: 0; }
.sp-idee__poza { width: 100%; height: 100%; object-fit: cover; order: 2; }

/* --- newsletter ------------------------------------------------------------- */
.sp-newsletter { margin-top: 40px; background: var(--sp-galben); }
.sp-newsletter__in { display: grid; gap: 16px; padding-block: 26px; }
.sp-newsletter__text { display: flex; align-items: center; gap: 16px; }
.sp-newsletter__icon { color: var(--sp-albastru); }
.sp-newsletter__titlu { margin: 0; font-size: clamp(22px, 5vw, 30px); font-weight: 900; color: var(--sp-albastru); line-height: 1.15; }
.sp-newsletter__text p { margin: 4px 0 0; font-weight: 700; }
.sp-newsletter__form { position: relative; display: grid; gap: 10px; }
.sp-newsletter__rand { display: flex; padding: 5px; border-radius: 14px; background: var(--sp-alb); }
.sp-newsletter__rand input[type="email"] { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 0 14px; font-weight: 600; box-shadow: none !important; }
.sp-newsletter__rand .sp-btn { flex: none; padding: 11px 22px; border-radius: 10px; }
.sp-newsletter__acord { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; font-weight: 600 !important; line-height: 1.4; cursor: pointer; }
.sp-newsletter__acord input { margin-top: 1px; width: 16px !important; height: 16px !important; flex: none; }
.sp-newsletter__mesaj { margin: 0; min-height: 1.2em; font-size: 14px; font-weight: 800; color: var(--sp-albastru); }
.sp-newsletter__mesaj.is-eroare { color: var(--sp-rosu); }
.sp-newsletter__form--mic .sp-newsletter__rand { border: 1.5px solid var(--sp-linie); }

/* --- videoclipurile de sub newsletter (prima pagină, template-parts/videoclipuri.php) -------- */
.sp-video { padding-block: 32px 36px; background: var(--sp-fond); }
.sp-rand--video .sp-rand__pista { grid-auto-columns: 82%; }
.sp-clip { display: flex; flex-direction: column; gap: 10px; height: 100%; margin: 0; }
.sp-clip__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sp-raza); background: var(--sp-albastru-3); box-shadow: var(--sp-umbra); }
.sp-clip__porneste, .sp-clip__player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
/* poza de pe YouTube e 4 : 3 cu dungi negre sus și jos; cover pe 16 : 9 le taie exact */
.sp-clip__porneste img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
/* umbrire jos, ca butonul galben să se vadă și pe o poză deschisă */
.sp-clip__porneste::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 44, 125, .4), rgba(0, 44, 125, 0) 60%); }
.sp-clip__buton { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--sp-galben); color: var(--sp-albastru); box-shadow: 0 6px 20px rgba(11, 27, 77, .3); transform: translate(-50%, -50%); transition: transform .2s; }
.sp-clip__buton svg { margin-left: 3px; fill: currentColor; } /* triunghiul pare centrat abia împins puțin la dreapta */
.sp-clip__porneste:hover img { transform: scale(1.04); }
.sp-clip__porneste:hover .sp-clip__buton { transform: translate(-50%, -50%) scale(1.08); }
.sp-clip__porneste:focus-visible { outline-color: var(--sp-galben); outline-offset: -5px; } /* înăuntru: cutia taie ce iese */
.sp-clip__titlu { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--sp-albastru); }
@media (prefers-reduced-motion: reduce) {
	.sp-clip__porneste img, .sp-clip__buton { transition: none; }
}

/* --- subsol ----------------------------------------------------------------- */
.sp-subsol { background: var(--sp-albastru); color: rgba(255, 255, 255, .9); font-size: 14px; }
.sp-subsol a { text-decoration: none; }
.sp-subsol__sus { display: grid; gap: 28px; padding-block: 36px 28px; }
.sp-subsol__logo img { width: 200px; height: auto; }
.sp-social { display: flex; gap: 10px; margin-top: 18px; }
.sp-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--sp-alb); transition: background-color .15s; }
.sp-social a:hover { background: var(--sp-galben); color: var(--sp-albastru); }
.sp-subsol__coloane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.sp-subsol__titlu { margin: 0 0 10px; font-size: 15px; font-weight: 900; color: var(--sp-alb); }
.sp-subsol__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.sp-subsol__col a:hover { color: var(--sp-galben); }
.sp-subsol__contact { display: grid; gap: 10px; align-content: start; }
.sp-subsol__tel { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 22px; font-weight: 900; color: var(--sp-alb) !important; line-height: 1.15; }
.sp-subsol__tel small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; opacity: .85; }
.sp-subsol__mail { display: inline-flex; align-items: center; gap: 8px; }
.sp-subsol__mail:hover { color: var(--sp-galben); }
.sp-plati { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; padding: 0; list-style: none; }
.sp-plati > li, .sp-plati > span { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 52px; padding: 0 10px; border-radius: 7px; background: var(--sp-alb); border: 1px solid var(--sp-linie); color: var(--sp-albastru); font-size: 12px; font-weight: 900; }
.sp-plati__visa span { font-style: italic; font-size: 15px; letter-spacing: .02em; color: #1a1f71; }
.sp-plati--mic > li, .sp-plati--mic > span { height: 26px; min-width: 44px; padding: 0 7px; }
.sp-plati--mic .sp-plati__visa span { font-size: 13px; }
.sp-plati--mic svg { width: 28px; }
.sp-anpc { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-anpc img { width: 170px; height: auto; border-radius: 6px; }
.sp-subsol__jos { background: var(--sp-albastru-3); font-size: 13px; }
.sp-subsol__jos-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 14px; }
.sp-subsol__jos p { margin: 0; }
.sp-subsol__jos nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sp-subsol__jos a:hover, .sp-subsol .sp-acces:hover { color: var(--sp-galben); }

/* --- pagini obișnuite ------------------------------------------------------- */
.sp-pagina { padding-block: 20px 48px; }
.sp-pagina-wc { padding-block: 18px 48px; }
.sp-pagina__titlu { margin: 0 0 18px; font-size: clamp(30px, 6vw, 44px); font-weight: 900; line-height: 1.1; color: var(--sp-albastru); }
.sp-text { max-width: 78ch; line-height: 1.7; }
.sp-text h2, .sp-text h3 { color: var(--sp-albastru); line-height: 1.25; }
.sp-text a { color: var(--sp-albastru); font-weight: 700; }
.sp-text img { border-radius: 12px; }
.sp-articol__data { margin: 0 0 6px; font-size: 14px; color: var(--sp-gri); }
.sp-articol__poza { width: 100%; max-width: 900px; border-radius: var(--sp-raza); margin-bottom: 22px; }
.sp-404 { text-align: center; padding-block: 60px; }
.sp-404 img { border-radius: 26px; margin-bottom: 12px; }
.sp-404 p { color: var(--sp-gri); margin: 0 0 22px; }
.sp-firimituri { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0 0 12px; font-size: 13px; color: var(--sp-gri); }
.sp-firimituri a { text-decoration: none; color: var(--sp-albastru); font-weight: 700; }
.sp-firimituri a:hover { text-decoration: underline; }
.sp-firimituri__sep { display: inline-flex; margin-inline: 4px; color: var(--sp-gri-2); }

/* starea goală (coș gol, fără rezultate, fără favorite) */
.sp-gol { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.sp-gol img { border-radius: 24px; }
.sp-gol h1, .sp-gol h2 { margin: 6px 0 0; font-size: clamp(22px, 5vw, 30px); font-weight: 900; color: var(--sp-albastru); }
.sp-gol p { margin: 0 0 8px; color: var(--sp-gri); max-width: 46ch; }
.sp-gol__butoane { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sp-gol__inima { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: #ffe6ea; color: var(--sp-rosu); }

/* ========================================================================== */
@media (min-width: 560px) {
	.sp-rand__pista { grid-auto-columns: calc((100% - 2 * 12px) / 3); }
	.sp-grila-carduri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-categorii { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sp-subsol__coloane { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sp-banda-albastra__carduri { grid-auto-columns: 46%; }
	.sp-rand--branduri .sp-rand__pista { grid-auto-columns: calc((100% - 3 * 12px) / 4); }
	.sp-rand--video .sp-rand__pista { grid-auto-columns: calc((100% - 12px) / 2); }
	.sp-card .sp-inima { position: relative; top: auto; right: auto; width: 42px; height: 42px; box-shadow: none; }
	.sp-card__adauga { flex: none; width: 46px; height: 46px; padding: 0; }
	.sp-card__adauga-text { display: none; }
	.sp-card__actiuni { position: absolute; right: 10px; bottom: 10px; margin: 0; }
	.sp-card__preturi { padding-right: 98px; }
}

@media (min-width: 768px) {
	:root { --sp-gutter: 24px; }
	.sp-bara-sus { display: block; }
	.sp-beneficii__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sp-beneficii__lista li { justify-content: center; padding-inline: 12px; }
	.sp-beneficii__lista li + li { border-left: 1px solid var(--sp-linie); }
	.sp-rand__pista { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; }
	.sp-grila-carduri { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.sp-hero__in { grid-template-columns: 1fr 1fr; align-items: center; padding-block: 48px; }
	.sp-hero__colaj { aspect-ratio: 680 / 380; margin: 0; }
	.sp-hero::before { display: block; width: 520px; height: 520px; right: -200px; top: -260px; }
	.sp-idei { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.sp-newsletter__in { grid-template-columns: 1fr 1fr; align-items: center; }
	.sp-video { padding-block: 40px 44px; }
	.sp-rand--video .sp-rand__pista { grid-auto-columns: calc((100% - (min(var(--sp-n, 3), 3) - 1) * 16px) / min(var(--sp-n, 3), 3)); }
	.sp-firme__in { padding: 32px; }
	.sp-firme__beneficii { gap: 18px 24px; }
	.sp-firme__semn { width: 220px; opacity: .22; }
	.sp-caseta { padding: 22px; }
}

@media (min-width: 1024px) {
	:root { --sp-bara-mobil: 0px; }
	.sp-bara-mobil { display: none; }
	body.sp { padding-bottom: 0; }
	.sp-toast { bottom: 24px; }
	.sp-antet__rand { grid-template-columns: auto minmax(280px, 1fr) auto; grid-template-areas: "logo cautare actiuni"; gap: 32px; padding-block: 14px; }
	.sp-meniu-btn { display: none; }
	.sp-logo { justify-self: start; }
	.sp-logo__mic { display: none !important; }
	.sp-logo__mare { display: block !important; height: 62px; }
	.sp-cautare { max-width: 560px; justify-self: center; width: 100%; }
	.sp-cautare .aws-container .aws-search-form, .sp-cautare__form { height: 52px !important; }
	.sp-actiuni { gap: 4px; }
	.sp-actiune__text, .sp-actiune--fav, .sp-cont-meniu { display: inline-flex; }
	.sp-actiune__text { flex-direction: column; }
	.sp-actiuni > * + * { border-left: 1px solid var(--sp-linie); padding-left: 6px; }
	.sp-cat-nav { border-top: 0; }
	.sp-cat-nav .sp-segment { display: inline-flex; flex: none; }
	.sp-cat-nav__lista { gap: 0; padding: 10px 0; justify-content: space-between; }
	.sp-cat-nav__lista li + li { border-left: 1px solid var(--sp-linie); }
	.sp-cat-nav__lista a { background: none; padding: 8px 14px; font-size: 15px; }
	.sp-cat-nav__lista a:hover { background: var(--sp-bleu-2); }
	.sp-cat-nav__toate { margin-left: auto; }
	.sp-rand__pista { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
	.sp-rand__sageata { display: grid; }
	.sp-sectiune--coloana .sp-rand__pista { grid-auto-columns: calc((100% - 4 * 16px) / 5); }
	.sp-rand--branduri .sp-rand__pista { grid-auto-columns: calc((100% - 6 * 16px) / 7); }
	.sp-rand--video .sp-rand__pista { grid-auto-columns: calc((100% - (var(--sp-n, 4) - 1) * 16px) / var(--sp-n, 4)); }
	.sp-grila-carduri--6 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.sp-sectiune { margin-block: 44px; }
	.sp-hero__in { grid-template-columns: 5fr 6fr; padding-block: 56px 48px; }
	.sp-hero__sub { font-size: 20px; }
	.sp-categorii { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
	.sp-banda-albastra__in { grid-template-columns: 4fr 8fr; align-items: center; gap: 32px; padding-block: 44px; }
	.sp-banda-albastra__carduri { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 16px; }
	.sp-firme__in { grid-template-columns: 3fr 5fr; grid-template-areas: "text beneficii" "text buton"; align-items: center; gap: 18px 40px; padding: 36px 260px 36px 40px; }
	.sp-firme__text { grid-area: text; }
	.sp-firme__beneficii { grid-area: beneficii; }
	.sp-firme__btn { grid-area: buton; }
	.sp-firme__semn { right: 30px; bottom: 50%; transform: translateY(50%) rotate(-8deg); width: 190px; opacity: 1; }
	.sp-subsol__sus { grid-template-columns: 220px 1fr 280px; gap: 40px; padding-block: 48px 36px; }
}

@media (min-width: 1280px) {
	.sp-grila-carduri--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.sp *, .sp *::before, .sp *::after { transition: none !important; scroll-behavior: auto !important; }
}