/* Baza mobile-first. Layout-ul porneste de la ecranul mic si creste, nu invers. */

:root {
	--verde: #6ab023;
	--verde-inchis: #4e8a17;
	/* culorile preluate din tema vitamix de pe comenzi.vitamix.ro */
	--antet: #09282e;
	--antet-sus: #061c22;
	--subsol: #0b282e;
	--verde-clar: #a7c740;
	--text: #1f2328;
	--muted: #6b7280;
	--linie: #e5e7eb;
	--fundal: #f7f8f7;
	--radius: 10px;
	--wrap: 1200px;
	/* modificat de Claude in 02.08.2026 18:55 -- culorile si marimea controalelor de formular */
	--rosu: #b42318;
	--chenar: #ccd2d9;        /* chenarul casetelor: mai vizibil decat --linie, care desparte randuri */
	--chenar-sus: #aab3bd;    /* la trecerea mausului */
	--inel: rgba(106, 176, 35, .18);   /* inelul verde de la focalizare */
	--inel-rau: rgba(180, 35, 24, .16);
	--stins: #f2f4f6;         /* fondul unei casete blocate */
	/* 16px pe telefon, nu mai putin: sub atat iOS apropie pagina la focalizare si
	   utilizatorul ramane cu un ecran marit din care nu iese singur. */
	--camp-font: 16px;
	/* modificat de Claude in 03.08.2026 10:52 */
	/* Culorile de mai sus sunt ale magazinului Vitamix. Fiecare magazin isi scrie
	   peste ele, dintr-un `<style>` pus in antet de App\Core\Tema, cu ce s-a ales in
	   admin > Setari > Aspect. De aceea tot ce tine de marca trebuie sa fie o
	   variabila: un `#fff` scris de-a dreptul intr-o regula nu se mai poate schimba
	   pe un magazin cu antetul alb, cum e naturking.ro.
	     --antet-text  textul si pictogramele din antet (alb pe antet inchis)
	     --banda-text  textul benzii de deasupra antetului
	     --pe-accent   textul asezat peste culoarea de accent (lupa, bulina cosului)
	     --nav         bara de categorii de sub antet, si textul ei
	     --font        familia de litere a magazinului */
	--antet-text: #fff;
	--banda-text: #fff;
	--pe-accent: #09282e;
	--nav: var(--verde-clar);
	--nav-text: #fff;
	--nav-linie: transparent;
	--nav-umbra: 0 1px 1px rgba(0, 0, 0, .18);
	/* modificat de Claude in 08.08.2026 -- adamssupplements.com vrea in bara de
	   categorii literele mari, ca pe magazinul lui vechi (Gomag). Implicit `none`
	   (nimic nu se schimba pe celelalte magazine). */
	--nav-transform: none;
	--cautare-chenar: transparent;
	/* modificat de Claude in 03.08.2026 16:35 -- fundalul lupii avea aceeasi valoare ca
	   accentul (--verde-clar) peste tot, deci pe un magazin unde antetul a ajuns tot in
	   accent (Zanna, dupa ce antetul a trecut in menta) butonul se pierdea in antet.
	   Variabila ei separata, implicit tot accentul (nimic nu se schimba in rest), dar
	   temele o pot muta oriunde e nevoie de contrast. */
	--cautare-fundal: var(--verde-clar);
	/* modificat de Claude in 08.08.2026 -- adamssupplements.com vrea banda de abonare
	   gri, nu verdele implicit; separata de --antet (folosit implicit ca text), ca sa
	   nu schimbe nimic pe magazinele care n-o completeaza */
	--newsletter-fundal: linear-gradient(135deg, var(--verde-clar), var(--verde));
	--newsletter-text: var(--antet);
	/* modificat de Claude in 08.08.2026 -- bulina cu numarul din cos, separata de
	   --verde, ca adamssupplements.com sa o poata muta pe bleumarinul lupii fara sa
	   schimbe accentul verde de peste tot */
	--cos-nr: var(--verde);
	/* modificat de Claude in 16.08.2026 07:55 -- notele de promotie de pe poza
	   produsului („Termen scurt”, „Ambalaj usor deteriorat”). Implicit culorile de
	   pana acum; magazinele care vor altceva (pe vitamix.ro, galben la termen) le
	   schimba din Setari > Aspect. Textul nu e o setare: il calculeaza App\Core\Tema,
	   alb sau negru, dupa fundalul ales -- eticheta are 10px si un alb ramas din
	   greseala peste un fundal deschis nu s-ar citi. */
	--eticheta-termen: #175cd3;
	--eticheta-termen-text: #fff;
	--eticheta-ambalaj: #b54708;
	--eticheta-ambalaj-text: #fff;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* modificat de Claude in 03.08.2026 12:40 -- a doua litera a magazinului, pentru
	   titluri. Multe marci au o pereche: una pentru text, alta pentru capete de
	   sectiune (la Zanna, un sans geometric si un serif cursiv, ca pe ambalaje).
	   Implicit e aceeasi cu a textului, deci magazinele care n-o pun nu se schimba. */
	--font-titluri: var(--font);
}

/* modificat de Claude in 03.08.2026 12:40 */
h1, h2, .sectiune-cap h2 { font-family: var(--font-titluri); }
@media (min-width: 720px) {
	:root { --camp-font: 15px; }
}

* { box-sizing: border-box; }

/* modificat de Claude in 02.08.2026 14:10 */
/* overflow-x: clip -- antetul si subsolul se intind pe toata latimea ecranului pe
   orice dispozitiv, iar continutul sta centrat in .wrap. Benzile colorate sunt late
   cat ecranul, deci un singur element mai lat decat el (o bara, un tabel, o poza)
   face documentul mai lat si le lasa terminate inainte de marginea din dreapta.
   `clip`, nu `hidden`: nu creeaza un container de derulare, deci antetul lipicios
   (position: sticky) ramane lipicios. */
body {
	margin: 0;
	overflow-x: clip;
	/* modificat de Claude in 03.08.2026 10:53 -- familia vine din tema magazinului */
	font: 16px/1.5 var(--font);
	color: var(--text);
	background: var(--fundal);
}

a { color: var(--verde-inchis); text-decoration: none; }
a:hover { text-decoration: underline; }
code { background: #eef1ee; padding: 1px 5px; border-radius: 4px; font-size: .9em; }
.muted { color: var(--muted); }

/* modificat de Claude in 02.08.2026 18:55 */
/* ---- casete, liste de alegere si zone de text ----
   O singura forma pentru tot magazinul: acelasi chenar, aceeasi rotunjire, aceeasi
   marime de litera si acelasi inel verde la focalizare, oriunde apare un control --
   in cos, la finalizare, in cont, in formularele de contact, retur si recenzie, in
   filtrele de pe pagina magazinelor. Pana acum fiecare bucata isi scria singura
   chenarul si padding-ul, asa ca aceeasi caseta arata altfel de la o pagina la alta
   (casuta codului de reducere din cos era chiar caseta implicita a browserului).

   E aceeasi asezare ca in admin (vezi admin.css), doar cu paleta magazinului.

   Selectorii sunt inveliti in :where(), deci au specificitate ZERO: orice regula de
   clasa de mai jos (campul-pastila din antet, caseta de cantitate din cos, casetele
   de pret din fereastra de cautare) ajusteaza numai ce difera, fara !important si
   fara sa repete fondul, chenarul si rotunjirea. */
:where(input:not([type=checkbox], [type=radio], [type=file], [type=range], [type=color], [type=hidden], [type=submit], [type=button], [type=reset], [type=image]), select, textarea) {
	font: inherit; font-size: var(--camp-font); color: var(--text);
	width: 100%; max-width: 100%;
	padding: 10px 12px;
	background-color: #fff;
	border: 1px solid var(--chenar); border-radius: var(--radius);
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}

/* Trecerea mausului doar sugereaza ca se poate scrie; focalizarea o spune clar.
   Bifele, butoanele radio si cursoarele de pret sunt scoase: n-au chenar de colorat,
   iar inelul le-ar desena un dreptunghi verde in jurul unei linii subtiri. Ele isi au
   conturul lor, mai jos. `:where()` tine specificitatea la nivel de element, ca
   regulile de clasa care vin dupa (campul din antet, cel din fereastra de cautare)
   sa le poata rescrie fara sa fie nevoie de !important. */
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file])):hover:not(:disabled, [readonly]),
select:hover:not(:disabled), textarea:hover:not(:disabled) {
	border-color: var(--chenar-sus);
}
input:where(:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file])):focus,
select:focus, textarea:focus {
	outline: 0;
	border-color: var(--verde);
	box-shadow: 0 0 0 3px var(--inel);
}
::placeholder { color: var(--muted); opacity: 1; }

/* blocat sau numai de citit: se vede din fond ca nu se scrie in el */
input:disabled, select:disabled, textarea:disabled,
input[readonly], textarea[readonly] {
	background-color: var(--stins); color: var(--muted); cursor: not-allowed;
}
input[readonly], textarea[readonly] { cursor: default; }

/* ce a scris omul si nu e valid (email, numar): chenar rosu, nu doar bulina browserului.
   :user-invalid, nu :invalid -- altfel campurile obligatorii sunt rosii de la incarcare,
   inainte sa fi apucat cineva sa scrie in ele */
input:user-invalid, textarea:user-invalid {
	border-color: var(--rosu);
	box-shadow: 0 0 0 3px var(--inel-rau);
}

/* lista de alegere: sageata desenata de noi, ca sa arate la fel in toate browserele.
   Ii lasam loc in dreapta; unde o clasa de mai jos rescrie padding-ul, pune si ea
   loc pentru sageata. */
select {
	appearance: none; -webkit-appearance: none;
	padding-right: 34px; cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25l5-4.5' fill='none' stroke='%231f2328' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 7px;
}
/* listele deschise (mai multe randuri) n-au sageata */
select[multiple], select[size]:not([size="1"]) { background-image: none; padding-right: 12px; cursor: default; }

/* aceeasi inaltime minima ca in admin: sub trei randuri o zona de text arata a caseta
   obisnuita si nu se vede ca se poate scrie mai mult in ea */
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }

/* Casetele de numar isi pierd sagetile peste tot: la cantitatea din cos sunt deja
   butoanele +/-, iar la punctele de fidelitate maximul scrie alaturi. Regula era
   scrisa de doua ori, o data pentru fiecare dintre ele. */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

input[type=search]::-webkit-search-cancel-button { cursor: pointer; }

/* Bifele si butoanele radio iau verdele magazinului si sunt mai mari decat implicit:
   pe telefon tinta implicita de 13px se rateaza cu degetul. Marginile lor vin de la
   spatierea din grila care le contine (.termeni, .optiune), nu de la browser. */
:where(input[type=checkbox], input[type=radio]) {
	width: 18px; height: 18px; margin: 0; accent-color: var(--verde); cursor: pointer;
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
	outline: 2px solid var(--verde); outline-offset: 2px;
}

/* modificat de Claude in 02.08.2026 09:45 */
/* Numai padding-inline: cu scurtatura `padding: 0 14px` clasa .wrap (specificitate
   de clasa) anula padding-block-ul pus pe `main` (specificitate de element), asa ca
   spatiul de sub meniu nu aparea niciodata. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 14px; }

/* ---- banda de sus (HelloBar) ---- */
/* modificat de Claude in 03.08.2026 10:54 -- culorile din tema, nu scrise in regula */
/* modificat de Claude in 05.08.2026 01:01 -- continutul poate fi automat sau scris din
   admin (App\Models\Hellobar); vezi si app.js pentru rotatia mesajelor si inchiderea */
.banda-sus { background: var(--antet-sus); color: var(--banda-text); font-size: 12.5px; }
.banda-sus .wrap { display: flex; gap: 16px; align-items: center; justify-content: center; height: 32px; }
.banda-sus a { color: var(--banda-text); font-weight: 600; }
.ascuns-mic { display: none; }
@media (min-width: 620px) {
	.ascuns-mic { display: inline; }
	.banda-sus .wrap { justify-content: space-between; }
}

/* Ramane deasupra antetului si la derulare, cand e pornita optiunea din admin.
   Inaltimea reala se citeste in app.js si trece mai departe in --hellobar-h, ca
   antetul (tot sticky, mai jos in cod) sa stea lipit sub ea, nu peste. */
.banda-sus--fixa { position: sticky; top: 0; z-index: 31; }

/* Mesajele automate/manuale, unul peste altul in aceeasi celula de grid -- doar cel
   `.activ` se vede, restul asteapta randul cu opacitatea pe 0. Asa inaltimea benzii
   ramane cea a celui mai lung mesaj, fara sarituri de layout la schimbare. */
.hellobar-mesaje { display: grid; overflow: hidden; flex: 1 1 auto; min-width: 0; }
.hellobar-mesaje .hellobar-mesaj {
	grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hellobar-mesaje .hellobar-mesaj.activ { opacity: 1; visibility: visible; }
.hellobar-icon { margin-right: 3px; }

.hellobar-inchide {
	background: none; border: 0; color: inherit; opacity: .7; cursor: pointer;
	font-size: 18px; line-height: 1; padding: 2px 4px;
}
.hellobar-inchide:hover { opacity: 1; }

/* ---- antet ---- */
/* modificat de Claude in 05.08.2026 01:01 -- daca banda de sus e fixa (.banda-sus--fixa),
   app.js scrie inaltimea ei in --hellobar-h si antetul se lipeste sub ea, nu peste;
   fara banda fixa variabila lipseste si antetul ramane la 0, ca pana acum */
.site-head { background: var(--antet); color: var(--antet-text); position: sticky; top: var(--hellobar-h, 0px); z-index: 30; }

/* Doua randuri la orice latime: sus logoul cu contul si cosul in dreapta,
   dedesubt cautarea pe toata latimea. Pe telefon nu incape altfel, iar pe
   ecran mare o cautare lata e oricum de dorit intr-un magazin cu 3600 de produse. */
.head-rand {
	display: grid; grid-template-columns: auto 1fr auto; gap: 10px 12px;
	align-items: center; padding-block: 11px;
}
/* Pozitiile sunt date explicit. Lasata pe plasare automata, grila trecea contul
   si cosul pe un al treilea rand: cautarea ocupa toata latimea randului doi, iar
   cursorul de plasare sare dupa ea, nu inapoi in golul din dreapta logoului. */
.hamburger    { grid-area: 1 / 1; }
.logo         { grid-area: 1 / 2; }
.head-actiuni { grid-area: 1 / 3; }
.cautare      { grid-area: 2 / 1 / 3 / 4; }

.logo { display: block; justify-self: start; }
/* modificat de Claude in 03.08.2026 12:45 */
/* Inaltimea siglei vine din tema (Setari > Aspect > Inaltimea siglei), fiindca depinde
   de forma ei: un semn patrat umple 42px, un cuvant lat ca al naturking are nevoie de
   mai mult ca sa se citeasca. Se regleaza o singura valoare, cea de desktop; pe telefon
   se ia din ea acelasi raport pe care il aveau valorile fixe de dinainte (34 din 42). */
.logo img { display: block; height: calc(var(--logo-h, 42px) * .81); width: auto; }
.logo:hover { text-decoration: none; }

/* modificat de Claude in 07.08.2026 00:34 -- tinta de apasare 88x44px, mai lata decat
   inaltimea minima recomandata (44px), ca sertarul sa se deschida din prima, nu doar
   cand nimeresti exact cele trei linii */
.hamburger { display: grid; gap: 5px; padding: 13px 32px; margin: -13px -32px; cursor: pointer; }
/* modificat de Claude in 06.08.2026 12:57 -- eticheta are si un text ascuns vizual, care
   ii da numele pentru cititoarele de ecran; el nu e una din cele trei linii. */
.hamburger span:not(.sr-only) { display: block; width: 24px; height: 2.5px; background: var(--antet-text); border-radius: 2px; }

.cautare { display: flex; position: relative; }
/* modificat de Claude in 02.08.2026 18:55 -- forma de baza vine de sus; aici ramane
   numai ce e al pastilei din antet: chenar invizibil pe banda inchisa la culoare,
   lipita de butonul cu lupa. Inelul de focalizare e verdele deschis al butonului,
   nu verdele obisnuit: pe fondul inchis se vede mult mai bine. */
/* modificat de Claude in 03.08.2026 10:57 -- chenarul pastilei vine din tema: pe un
   antet inchis la culoare nu se vede si nici nu trebuie (--cautare-chenar e
   transparent), pe unul alb, ca la naturking, casuta ar disparea fara el */
.cautare input {
	flex: 1; min-width: 0; padding: 11px 16px;
	border-color: var(--cautare-chenar); border-right: 0;
	border-radius: 999px 0 0 999px;
}
.cautare input:hover:not(:disabled) { border-color: var(--cautare-chenar); }
.cautare input:focus { border-color: var(--cautare-chenar); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde-clar) 55%, transparent); }
/* modificat de Claude in 01.08.2026 20:48 */
/* Placeholderul putin mai mic decat textul scris de utilizator (culoarea vine de sus). */
.cautare input::placeholder { font-size: 14.5px; }
.cautare button {
	display: grid; place-items: center; width: 52px; border: 0; cursor: pointer;
	background: var(--cautare-fundal); color: var(--pe-accent); border-radius: 0 999px 999px 0;
}
.cautare button:hover { background: color-mix(in srgb, var(--cautare-fundal) 88%, #fff); }

.head-actiuni { display: flex; gap: 4px; }
.actiune {
	position: relative; display: grid; justify-items: center; gap: 1px;
	padding: 4px 8px; color: var(--antet-text); font-size: 11px; border-radius: var(--radius);
}
.actiune:hover { background: color-mix(in srgb, var(--antet-text) 12%, transparent); text-decoration: none; color: var(--antet-text); }
.actiune span { display: none; }
/* Doar familia, nu si marimea: `font: inherit` ar fi mai specific decat regula
   .actiune de deasupra si i-ar sterge font-size-ul, iar eticheta butonului ar
   ramane la 16px, de doua ori cat vecinii ei. */
button.actiune { border: 0; margin: 0; background: none; font-family: inherit; cursor: pointer; }

/* Antetul strans, dupa ce pagina a fost derulata: campul de cautare pleaca si in
   locul lui ramane lupa, langa cont si cos. Castigam un rand intreg de inaltime
   exact cand utilizatorul citeste, nu cand cauta. */
.actiune--lupa { display: none; }
.site-head--strans .cautare { display: none; }
.site-head--strans .actiune--lupa { display: grid; }
.cos-nr {
	position: absolute; top: -1px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
	background: var(--cos-nr); color: var(--pe-accent); border-radius: 999px;
	font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
/* modificat de Claude in 02.08.2026 23:50 -- `display` pus pe clasa bate [hidden]-ul
   din foaia browserului, asa ca bulina ramanea vizibila (goala) cu cosul gol */
.cos-nr[hidden] { display: none; }

/* modificat de Claude in 09.08.2026 -- selectorul de limba, langa Favorite.
   Codul limbii curente sta mereu vizibil (ca .cos-nr), chiar si pe telefon unde
   eticheta textuala a butonului e ascunsa; restul limbilor vin abia in popup. */
.limbi-selector { position: relative; }
.limba-cod {
	position: absolute; top: -1px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
	background: color-mix(in srgb, var(--antet-text) 20%, transparent); color: inherit;
	border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
	display: grid; place-items: center;
}

.limbi-panou {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 215px;
	background: #fff; color: #1a1a1a; border-radius: var(--radius);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .2); padding: 6px; display: grid; gap: 2px;
	/* modificat de Claude in 10.08.2026 12:40 -- de cand sub limbi stau si tarile de
	   livrare, meniul poate trece de inaltimea ecranului pe telefon */
	max-height: min(72vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.limbi-panou[hidden] { display: none; }
.limba-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 8px 10px; border-radius: 6px; color: inherit;
}
.limba-opt:hover { background: #f2f2f2; text-decoration: none; }
.limba-opt--activa { font-weight: 700; background: #f5f5f5; }
.limba-opt b { opacity: .55; font-size: 12px; font-weight: 700; }

/* creat de Claude in 10.08.2026 12:40 -- tara de livrare, sub limbi */
.limbi-titlu {
	margin: 0; padding: 6px 10px 4px; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em; opacity: .45;
}
.limbi-titlu--tari { margin-top: 4px; padding-top: 10px; border-top: 1px solid #ececec; }

/* modificat de Claude in 10.08.2026 13:25 -- tarile sunt un select, nu o lista:
   drapelul si pragul stau langa el, fiindca un <option> nu poate arata decat text */
.tara-alege { display: flex; align-items: center; gap: 8px; padding: 2px 10px 0; }
.tara-alege .drapel {
	flex: 0 0 auto; width: 22px; height: 16px; border-radius: 2px; object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.tara-alege select { min-width: 0; flex: 1 1 auto; padding: 7px 30px 7px 10px; font-size: 13.5px; }
.tara-prag { margin: 4px 0 2px; padding: 0 10px; font-size: 11.5px; line-height: 1.3; opacity: .6; }
.tara-prag:empty { display: none; }

/* 720px e pragul unic la care site-ul trece in aspect de desktop: bara de jos
   pleaca, meniul de categorii apare, iar contul si cosul urca inapoi in antet. */
@media (min-width: 720px) {
	.hamburger { display: none; }
	/* modificat de Claude in 03.08.2026 12:45 */
	.logo img { height: var(--logo-h, 42px); }
	.actiune span { display: block; }
	.actiune { padding: 4px 10px; }

	/* modificat de Claude in 01.08.2026 20:48 */
	/* Pe desktop antetul are un singur rand: cautarea incape lejer intre logo si
	   actiuni, deci nu mai merita un rand intreg doar pentru ea. Ramane cea mai
	   lata coloana din antet, dar stransa la inaltimea logoului. */
	.head-rand { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 22px; }
	.logo         { grid-area: 1 / 1; }
	.cautare      { grid-area: 1 / 2; width: 100%; max-width: 560px; justify-self: center; }
	.head-actiuni { grid-area: 1 / 3; }

	.cautare input { padding: 8px 16px; }
	.cautare input::placeholder { font-size: 14px; }
	.cautare button { width: 46px; }

	/* Antetul strans nu mai are ce castiga ascunzand cautarea -- ea sta deja pe
	   randul logoului -- asa ca pe desktop ramane la vedere, fara lupa. */
	.site-head--strans .cautare { display: flex; }
	.site-head--strans .actiune--lupa { display: none; }
}

/* ---- bara flotanta de jos (telefon) ----
   z-index 35: sub fundalul sertarului (40), ca sertarul sa o acopere odata cu
   restul paginii. Padding-ul de jos tine cont de bara de gesturi de pe iPhone. */
.bara-jos {
	display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
	background: #fff; border-top: 1px solid var(--linie);
	box-shadow: 0 -2px 14px rgba(0,0,0,.07);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bj {
	position: relative; display: grid; justify-items: center; gap: 3px;
	padding: 8px 2px 7px; font: inherit; font-size: 10.5px; line-height: 1.2;
	color: var(--muted); background: none; border: 0; cursor: pointer;
}
.bj:hover, .bj--activ { color: var(--verde-inchis); text-decoration: none; }
.bj svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bj-nr {
	position: absolute; top: 3px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px;
	background: var(--cos-nr); color: #fff; border-radius: 999px;
	font-size: 10.5px; font-weight: 700; display: grid; place-items: center;
}
/* modificat de Claude in 02.08.2026 23:50 -- la fel ca la .cos-nr: fara asta bulina
   din bara de jos ramane pe ecran cand nu e nimic in cos */
.bj-nr[hidden] { display: none; }

@media (max-width: 719.98px) {
	/* modificat de Claude in 06.08.2026 -- bara se poate stinge din Admin > Module,
	   deci se afiseaza doar cand body are clasa ei */
	body.are-bara-jos .bara-jos { display: grid; grid-template-columns: repeat(5, 1fr); }
	/* continutul nu are voie sa se ascunda sub bara */
	body.are-bara-jos { padding-bottom: 62px; }
}

/* ---- navigare pe categorii ---- */
/* bara verde de sub antet, ca pe comenzi.vitamix.ro */
/* modificat de Claude in 03.08.2026 10:59 -- bara are culoarea ei in tema (--nav):
   la Vitamix e verdele deschis, la un magazin cu antet alb e tot alb, cu o linie
   sub ea ca sa se desparta de continut */
.nav { display: none; background: var(--nav); border-bottom: 1px solid var(--nav-linie); position: relative; z-index: 25; }

/* modificat de Claude in 02.08.2026 14:35 */
/* Bara sta pe un rand si se deruleaza lateral cand nu incap toate categoriile
   (pe tableta intra fix la limita). Inainte iesea din ecran: documentul devenea
   mai lat decat fereastra, iar benzile de antet si de subsol -- late cat ecranul,
   nu cat documentul -- se opreau inainte de marginea din dreapta.

   Meniul mare nu e taiat de derulare: `.nav-item` e `position: static`, deci
   blocul care il contine e `.nav` (din afara containerului care se deruleaza),
   iar un element pozitionat absolut e taiat doar de containerele dintre el si
   blocul lui. Verificat in Chrome. */
/* modificat de Claude in 05.08.2026 00:35 -- eliminata umbra ("mai e ceva in
   lateral") de pe marginile randului: umbra e negru transparent peste --nav,
   iar pe un magazin cu --nav aproape alb (Zanna) ramanea vizibila ca o dunga
   gri pe ambele margini in loc sa dispara la capete. Ramane doar derularea. */
.nav-rand {
	display: flex; flex-wrap: nowrap; gap: 2px;
	overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
}
.nav-rand::-webkit-scrollbar { height: 0; }

/* elementele isi pastreaza latimea: strivite, textul lor s-ar rupe oricum */
.nav-item { flex: 0 0 auto; }
/* modificat de Claude in 02.08.2026 09:20 */
/* Textele din bara de categorii sunt albe; pe verdele deschis o umbra fina le
   tine lizibile. */
/* white-space: un element ramane pe o linie; daca nu mai incape, trece tot pe
   randul urmator -- "Suplimente alimentare" rupt in doua arata ca o eroare */
.nav-item > a, .nav-item--aparte, .nav-item--simplu { display: block; padding: 12px 14px; color: var(--nav-text); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-shadow: var(--nav-umbra); text-transform: var(--nav-transform); }
.nav-item { position: static; }
.nav-item > a:hover, .nav-item--aparte:hover, .nav-item--simplu:hover { background: rgba(0,0,0,.12); text-decoration: none; }
/* "Promotii" ramane deosebit, dar in aceeasi culoare: il scoate in evidenta grosimea literei */
.nav-item--aparte { color: var(--nav-text) !important; font-weight: 700; }

/* modificat de Claude in 01.08.2026 20:55 */
/* ---- meniul mare de desktop ----
   Trei nivele ca pe comenzi.vitamix.ro (subcategoria e titlu de coloana, sub ea
   stau categoriile ei) plus un raft de logouri in dreapta, ca la iherb.

   Panoul e lipit de bara, nu de item: `.nav-item { position: static }` il face sa
   se pozitioneze fata de `.nav`, deci se intinde pe toata latimea. Elementul care
   il deschide ramane luminat cat timp e deschis, ca sa se vada de unde a iesit. */
.nav-sub {
	display: none; position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
	box-shadow: 0 10px 24px rgba(0,0,0,.06); padding: 20px 0 22px;
}
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { display: block; }
.nav-item:hover > a, .nav-item:focus-within > a { background: rgba(9,40,46,.1); }

.nav-mega { display: flex; align-items: flex-start; gap: 26px; }
.nav-mega-linkuri { flex: 1 1 auto; min-width: 0; columns: 4; column-gap: 26px; }

/* grupul nu are voie sa fie taiat intre doua coloane: un titlu ramas singur la
   baza coloanei, cu linkurile lui in coloana urmatoare, se citeste gresit */
.nav-grup { break-inside: avoid; -webkit-column-break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 18px; }
.nav-grup-titlu {
	display: block; font-size: 14.5px; font-weight: 700; color: var(--verde-inchis);
	padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--linie);
}
.nav-grup-linkuri { display: grid; }
.nav-grup-linkuri a { padding: 4px 0; font-size: 13.5px; line-height: 1.35; color: var(--text); }
.nav-grup-linkuri a:hover { color: var(--verde-inchis); }
.nav-grup-mai { font-size: 13px !important; color: var(--muted) !important; font-style: italic; }

/* raftul de branduri: latime fixa, ca sa nu se stranga coloanele de linkuri.
   Inaltimea o da continutul lui, nu coloanele: intins pe toata inaltimea meniului
   ar lasa un dreptunghi gol sub logouri. */
.nav-mega-branduri {
	flex: 0 0 268px; align-self: flex-start; background: var(--fundal);
	border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px;
}
.nav-mega-titlu {
	display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.nav-branduri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* modificat de Claude in 02.08.2026 23:56 */
/* centrare pe flex, nu pe grid: intr-un grid cu randul auto, `max-height: 100%` de pe
   logo se raporta la un rand a carui inaltime o dadea chiar logoul, deci nu limita
   nimic si imaginea iesea din cutie. Pe flex inaltimea cutiei e definita si limita tine. */
/* modificat de Claude in 03.08.2026 00:24 */
/* fara padding: chenarul se strange pe logo, nu mai ramane banda alba in jurul lui.
   Inaltimea cutiei devine chiar inaltimea la care vrem logourile. In raftul mic
   coloanele au ~65px, deci logourile sunt oricum limitate de latime, nu de inaltime. */
.nav-brand {
	display: flex; align-items: center; justify-content: center;
	height: 48px; padding: 0; overflow: hidden;
	background: #fff; border: 1px solid var(--linie); border-radius: 8px;
	transition: border-color .15s, box-shadow .15s;
}
/* modificat de Claude in 02.08.2026 22:33 */
/* raftul lat din panoul "Branduri": pe 9 coloane lipite logourile se citeau greu si
   randurile pareau un zid de cutii. Sase pe rand, cutii mai inalte si spatii mai mari:
   acelasi raft, dar respira. */
.nav-branduri--larg { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px; }
/* modificat de Claude in 03.08.2026 00:24 */
/* logourile de doua ori mai inalte; ca sa incapa tot sase pe rand, cutia se stramteaza
   la 150px si sta centrata in coloana ei -- coloanele raman aceleasi, doar chenarul
   e mai ingust, deci logourile inalte cresc si cele late nu dau pe dinafara. */
.nav-branduri--larg .nav-brand { height: 64px; padding: 0; max-width: 150px; margin-inline: auto; }
.nav-brand:hover { border-color: var(--verde); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* modificat de Claude in 03.08.2026 00:12 */
/* logourile vin in formate diferite; le incadram fara sa le deformam. Umplu cutia pana
   la chenar; limita e inaltimea cutiei, care e definita, deci procentul chiar tine. */
.nav-brand img { max-width: 100%; max-height: 100%; object-fit: contain; }

.nav-mega-toate {
	display: flex; align-items: center; gap: 4px; margin-top: 12px;
	font-size: 13.5px; font-weight: 600; color: var(--verde-inchis);
}
.nav-mega-toate .sag { width: 14px; height: 14px; }

/* panoul de branduri n-are coloane de linkuri, doar alfabet + logouri late */
.nav-mega--branduri .nav-mega-linkuri { columns: initial; }
.nav-mega--branduri .nav-grup-titlu { display: inline-block; border: 0; margin-bottom: 8px; font-size: 15px; }

/* modificat de Claude in 02.08.2026 22:33 */
/* cele trei bucati ale panoului (alfabet, titlu, raft) stateau lipite una de alta;
   le distantam si punem o linie subtire inainte de raft, ca ochiul sa le separe */
.nav-mega--branduri .nav-mega-titlu {
	padding-top: 16px; margin-bottom: 14px; border-top: 1px solid var(--linie);
}
.nav-mega--branduri .nav-mega-toate { margin-top: 18px; }
.nav-alfabet { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.nav-alfabet a {
	display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
	background: var(--fundal); border: 1px solid var(--linie); border-radius: 8px;
	font-size: 13.5px; font-weight: 700; color: var(--text);
}
.nav-alfabet a:hover { background: var(--verde-clar); border-color: var(--verde); text-decoration: none; }

@media (min-width: 720px) { .nav { display: block; } }

/* sub 1100px coloanele de linkuri devin prea inguste langa raftul de branduri */
@media (max-width: 1099.98px) {
	/* modificat de Claude in 02.08.2026 14:10 */
	/* pe tableta stramtam elementele barei, ca sa incapa cat mai mult timp pe un rand */
	.nav-item > a, .nav-item--aparte, .nav-item--simplu { padding: 11px 9px; font-size: 13.5px; }

	.nav-mega-linkuri { columns: 3; }
	.nav-mega-branduri { flex-basis: 200px; }
	.nav-branduri { grid-template-columns: repeat(2, 1fr); }
	/* modificat de Claude in 02.08.2026 22:33 */
	/* pe tableta raftul e mai ingust, deci si mai putine logouri pe rand */
	.nav-branduri--larg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* modificat de Claude in 03.08.2026 00:24 */
	.nav-branduri--larg .nav-brand { height: 60px; }
}

/* ---- sertarul de pe telefon ---- */
.sertar-comutator { position: absolute; opacity: 0; pointer-events: none; }
.sertar-fundal {
	position: fixed; inset: 0; background: rgba(15,23,20,.45); z-index: 40;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sertar {
	position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); background: #fff; z-index: 50;
	transform: translateX(-100%); transition: transform .22s ease;
	display: flex; flex-direction: column;
}
.sertar-comutator:checked ~ .sertar-fundal { opacity: 1; pointer-events: auto; }
.sertar-comutator:checked ~ .sertar { transform: none; }

.sertar-cap {
	display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto;
	padding: 14px 16px; border-bottom: 1px solid var(--linie); font-size: 16px; background: #fff;
}
.sertar-inchide { font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 4px; }

/* Navigare in adancime, ca la iherb: apesi pe o categorie si intra un panou nou
   din dreapta, cu "Inapoi" sus, in loc sa se lungeasca lista sub deget.

   Fara JavaScript: fiecare panou are in fata lui un radio din aceeasi grupa, deci
   regula e statica -- `radio bifat + panoul de dupa el`. Radio-urile se grupeaza
   dupa atributul name, nu dupa pozitia in pagina, asa ca pot sta oriunde. */
.sertar-nivele { position: relative; flex: 1 1 auto; overflow: hidden; }
.nivel {
	position: absolute; inset: 0; overflow-y: auto; background: #fff; padding-bottom: 24px;
	transform: translateX(100%); visibility: hidden;
	/* ascunderea se amana pana se termina alunecarea, altfel panoul care pleaca dispare brusc */
	transition: transform .24s ease, visibility 0s linear .24s;
}
.nivel--radacina { transform: translateX(-100%); }
.nv:checked + .nivel {
	transform: none; visibility: visible;
	transition: transform .24s ease, visibility 0s;
}

/* modificat de Claude in 02.08.2026 12:10 -- alineatul din stanga vine de la
   nivelul randului (--ind); fara el randul sta la 16px, ca pana acum */
.rand {
	display: flex; align-items: center; gap: 10px; width: 100%;
	padding: 13px 16px 13px var(--ind, 16px); color: var(--text); font-size: 15px; text-align: left;
	border-bottom: 1px solid var(--linie); background: none; cursor: pointer;
}
.rand:hover { background: var(--fundal); text-decoration: none; }
.rand .sag { margin-left: auto; width: 16px; height: 16px; color: var(--muted); }
.sag { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sag--stanga { margin-left: 0; width: 18px; height: 18px; }

.ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rand--accent .ico { color: inherit; }

.rand--accent { color: #b42318; font-weight: 600; }
.rand--inapoi { font-weight: 700; background: var(--fundal); }
.rand--toate { color: var(--verde-inchis); font-weight: 600; }

/* modificat de Claude in 02.08.2026 12:10 */
/* Nivelele 2-4 din panoul unei categorii. Randul duce in categorie, iar sageata
   din dreapta lui desface subcategoriile dedesubt -- deci se poate coborai pana
   la nivelul 4 fara sa pleci din panou.

   Fara JavaScript: checkbox inaintea randului si regula `bifat ~ lista`. */
.rand--n3 { --ind: 34px; font-size: 14.5px; }
.rand--n4 { --ind: 52px; font-size: 14px; color: var(--muted); }

/* modificat de Claude in 02.08.2026 12:35 -- randul nu-si mai pune padding propriu:
   il pun linkul si butonul, altfel se aduna si iese un rand de doua ori mai inalt
   decat cele de nivelul 1 */
.rand--ram { padding: 0; }
.ram-nume { flex: 1 1 auto; padding: 13px 6px 13px var(--ind, 16px); color: inherit; }
.ram-nume:hover { text-decoration: none; }

.ram-buton {
	flex: 0 0 auto; align-self: stretch; display: flex; align-items: center;
	padding: 0 16px; cursor: pointer; border-left: 1px solid var(--linie);
}
.ram-buton:hover { background: var(--fundal); }
.ram-buton .sag { width: 16px; height: 16px; color: var(--muted); transition: transform .18s ease; }

.ram-copii { display: none; background: var(--fundal); }
.ex:checked ~ .ram-copii { display: block; }
.ex:checked ~ .rand--ram .ram-buton .sag { transform: rotate(90deg); }

/* modificat de Claude in 02.08.2026 01:08 -- sertarul se termina la Articole,
   asa ca grupul de linkuri marunte si banda cu telefonul au disparut din meniu
   (stilurile lor au plecat odata cu ele) */
.sertar-grup { border-top: 1px solid var(--linie); }

.sertar-cont {
	display: flex; align-items: center; gap: 12px; padding: 16px;
	background: var(--fundal); color: var(--text);
}
.sertar-cont:hover { text-decoration: none; }
.sertar-cont > svg { width: 26px; height: 26px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; }
.sertar-cont span { display: grid; line-height: 1.3; }
.sertar-cont em { font-style: normal; font-size: 12.5px; color: var(--muted); }

@media (min-width: 720px) { .hamburger, .sertar, .sertar-fundal { display: none; } }

/* ---- continut ---- */
main { padding-block: 18px 40px; }
/* modificat de Claude in 02.08.2026 10:05 */
/* Pe desktop bara verde de categorii si primul banner stateau lipite; un respiro
   scurt le desparte. */
@media (min-width: 720px) { main { padding-block: 18px 48px; } }

.card {
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 18px; margin-bottom: 16px;
}
.card h1 { margin: 0 0 8px; font-size: 22px; }
.card h2 { margin: 0 0 12px; font-size: 18px; }

.stats { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.stats li { background: var(--fundal); border-radius: var(--radius); padding: 12px; text-align: center; }
.stats b { display: block; font-size: 22px; }
.stats span { font-size: 13px; color: var(--muted); }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.cat {
	display: block; padding: 16px 12px; text-align: center; font-weight: 600;
	background: var(--fundal); border: 1px solid var(--linie); border-radius: var(--radius);
	color: var(--text);
}
.cat:hover { border-color: var(--verde); text-decoration: none; }
@media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }

.btn {
	display: inline-block; padding: 11px 20px; background: var(--verde); color: #fff;
	border-radius: var(--radius); font-weight: 600;
}
.btn:hover { background: var(--verde-inchis); text-decoration: none; }

/* ---- navigare / titluri ---- */
.breadcrumb { font-size: 13px; color: var(--muted); margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb .curent { color: var(--text); }
.titlu-pagina { font-size: 22px; margin: 0 0 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.small { font-size: 13px; }

.subcat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.subcat a {
	background: #fff; border: 1px solid var(--linie); border-radius: 999px;
	padding: 7px 14px; font-size: 14px; color: var(--text);
}
.subcat a:hover { border-color: var(--verde); text-decoration: none; }

.bara-listare { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
/* modificat de Claude in 02.08.2026 18:55 -- forma o da regula de sus; lista de
   ordonare se strange doar cat ii trebuie, nu pe toata latimea randului */
.sortare select { width: auto; padding-block: 8px; }

/* ---- grila de produse: 2 pe telefon, creste cu ecranul ---- */
.grila { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px)  { .grila { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .grila { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1150px) { .grila { grid-template-columns: repeat(5, 1fr); } }

.prod {
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	display: flex; flex-direction: column; overflow: hidden;
}
.prod--epuizat { opacity: .65; }
.prod-img { position: relative; display: block; padding: 10px; text-align: center; }
.prod-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.prod-info { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.prod-brand { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.prod-nume { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
.prod-nume a { color: var(--text); }
.prod-pret { margin: auto 0 0; }
.prod-pret b { font-size: 17px; }
.prod-pret s { color: var(--muted); font-size: 13px; margin-left: 6px; }
.fara-stoc { font-size: 13px; color: var(--muted); }

.eticheta {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	background: #d92d20; color: #fff; font-size: 12px; font-weight: 700;
	padding: 3px 8px; border-radius: 999px;
}
.eticheta--mare { font-size: 14px; padding: 5px 11px; }

/* Etichetele peste poza stau una sub alta: reducerea sus, notele promotiei
   (ambalaj lovit, termen scurt) sub ea. Coloana poarta pozitionarea, etichetele
   din ea revin la asezarea normala -- altfel s-ar suprapune toate in acelasi colt. */
.etichete {
	position: absolute; top: 8px; left: 8px; z-index: 1;
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	/* lasa loc inimii din coltul din dreapta (34px + margini), ca textul lung sa
	   nu treaca pe sub ea */
	max-width: calc(100% - 56px);
}
.etichete .eticheta { position: static; max-width: 100%; }

/* Nota nu e un procent: are alta culoare, ca sa nu para tot reducere, si text
   care poate trece pe randul urmator pe cardul ingust de pe telefon. */
.eticheta--nota {
	font-size: 10px; font-weight: 700; line-height: 1.25; padding: 3px 7px;
	border-radius: 6px; text-transform: uppercase; letter-spacing: .02em;
	white-space: normal; text-align: left;
}
.eticheta--mare.eticheta--nota { font-size: 11px; padding: 4px 9px; }
/* modificat de Claude in 16.08.2026 07:55 -- culorile vin din tema magazinului
   (Setari > Aspect); implicit sunt cele de pana acum. Vezi :root. */
.eticheta--ambalaj { background: var(--eticheta-ambalaj); color: var(--eticheta-ambalaj-text); }
.eticheta--termen  { background: var(--eticheta-termen);  color: var(--eticheta-termen-text); }

.btn-cos { width: 100%; padding: 9px; font-size: 14px; border: 0; cursor: pointer; }

/* modificat de Claude in 02.08.2026 09:55 -- stilurile butonului de comparare au fost scoase */

/* ---- pagina de produs ---- */
/* modificat de Claude in 02.08.2026 10:10 */
/* Blocul de sus al produsului statea lipit de cardul "Descriere"; ii dam
   acelasi respiro ca intre carduri. */
.produs { display: grid; gap: 18px; margin-bottom: 16px; }
@media (min-width: 860px) { .produs { grid-template-columns: 1fr 1fr; align-items: start; } }

.produs-galerie {
	position: relative; background: #fff; border: 1px solid var(--linie);
	border-radius: var(--radius); padding: 16px; text-align: center;
}
.produs-galerie img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }

/* modificat de Claude in 05.08.2026 -- poza mare e si buton, deschide popup-ul cu lupa */
.produs-galerie-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }

/* modificat de Claude in 05.08.2026 -- miniaturile pozelor incarcate din admin */
.produs-galerie-miniaturi { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.produs-galerie-miniatura {
	width: 56px; height: 56px; padding: 3px; background: #fff; cursor: pointer;
	border: 1px solid var(--linie); border-radius: 6px;
}
.produs-galerie-miniatura.activa { border-color: var(--verde); box-shadow: 0 0 0 2px var(--inel); }
.produs-galerie-miniatura img { width: 100%; height: 100%; object-fit: contain; }

.produs-cumpara {
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px;
}
.produs-cumpara h1 { font-size: 21px; margin: 4px 0 8px; }

/* modificat de Claude in 02.08.2026 20:16 */
/* Pretul si brandul impart acelasi rand: pretul la stanga, unde il cauta ochiul,
   brandul impins in dreapta, in spatiul care altfel ramanea gol. Pe ecrane inguste
   randul se rupe si brandul coboara sub pret. Sigla vine incadrata pe alb din
   Core\Logo, deci nu are nevoie de fundal aici -- doar de o inaltime fixa, ca randul
   sa nu sara de la un produs la altul, si de o latime maxima. */
.produs-pret-rand {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 8px 16px; margin: 14px 0;
}
.produs-brand { margin: 0; }
.produs-brand a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.produs-brand a:hover .prod-brand { color: var(--text); }
.produs-brand img { height: 34px; max-width: 120px; object-fit: contain; }

.cod { font-size: 13px; }
.pret-mare { margin: 0; }
.pret-mare b { font-size: 30px; }
.pret-mare s { color: var(--muted); font-size: 17px; margin-left: 8px; }
.stoc { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.stoc--da { color: var(--verde-inchis); }
.stoc--nu { color: #b42318; }
.btn-mare { width: 100%; padding: 14px; font-size: 16px; border: 0; cursor: pointer; }
.btn-mare[disabled] { background: #cbd5cb; cursor: not-allowed; }
/* creat de Claude in 16.08.2026 */
/* De ce e ieftin lotul (termen scurt de expirare, ambalaj lovit): galbenul notei
   de transport, ca sa se citeasca a "atentie", nu a reclama, si lipit de buton --
   e parte din pretul pe care tocmai l-a vazut. */
.nota-lot { list-style: none; margin: 10px 0 0; padding: 9px 12px; font-size: 14px; background: #fff8e6; border: 1px solid #f2dfae; border-radius: var(--radius); }
.nota-lot li { padding-left: 22px; position: relative; }
.nota-lot li + li { margin-top: 5px; }
.nota-lot li::before { content: "!"; position: absolute; left: 0; top: 0; width: 15px; height: 15px; margin-top: 2px; border-radius: 50%; background: #d99b0b; color: #fff; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }

.avantaje { list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; color: var(--muted); }
.avantaje li { padding: 5px 0 5px 20px; position: relative; }
.avantaje li::before { content: "✓"; position: absolute; left: 0; color: var(--verde); font-weight: 700; }

.text-produs, .text-seo { line-height: 1.7; }
.text-produs img, .text-seo img { max-width: 100%; height: auto; }
/* modificat de Claude in 02.08.2026 11:20 */
/* descrierea SEO sta imediat sub grila de produse (paginarea lipseste cand e o
   singura pagina) - un mic respiro intre lista si text */
.text-seo { margin-top: 10px; }

/* modificat de Claude in 02.08.2026 21:40 */
/* Textul SEO strans („Citeste mai mult”), cand categoria are shrink = 1. Comutatorul
   e un checkbox ascuns asezat inaintea cartonasului, deci merge si fara JavaScript.
   Taierea sta pe .text-seo-corp, nu pe cartonas: butonul e in interiorul cartonasului,
   sub text, si trebuie sa ramana in afara zonei taiate ca sa se vada. */
.text-seo-corp--strans { max-height: 220px; overflow: hidden; position: relative; }
.text-seo-corp--strans::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none;
}
.plie-buton {
	display: inline-block; margin: 8px 0 0; cursor: pointer;
	color: var(--verde-inchis); font-weight: 600; font-size: 14px;
}
.plie-buton:hover { text-decoration: underline; }
.plie-mai-putin { display: none; }
.plie-comutator:checked ~ .text-seo .text-seo-corp--strans { max-height: none; }
.plie-comutator:checked ~ .text-seo .text-seo-corp--strans::after { display: none; }
.plie-comutator:checked ~ .text-seo .plie-buton .plie-mai-mult { display: none; }
.plie-comutator:checked ~ .text-seo .plie-buton .plie-mai-putin { display: inline; }

.tabel-ingrediente { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel-ingrediente th, .tabel-ingrediente td { padding: 8px 10px; border-bottom: 1px solid var(--linie); text-align: left; }
.tabel-ingrediente th { background: #f4f6f4; font-weight: 600; }
.tabel-ingrediente td:nth-child(n+2), .tabel-ingrediente th:nth-child(n+2) { text-align: right; white-space: nowrap; }

.brand-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.brand-head img { object-fit: contain; }
/* modificat de Claude in 02.08.2026 20:23 -- numele brandului si numarul de produse
   stau pe acelasi rand, aliniate pe linia de baza; pe ecran mic numarul trece dedesubt */
.brand-head > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.brand-head .titlu-pagina { margin: 0; }
.brand-head > div > p { margin: 0; }

/* ---- paginare ---- */
/* align-items: center — fara el, elementele se intind pe toata inaltimea randului
   si, cand "…" trece pe randul urmator pe ecran mic, butoanele devin dreptunghiuri lungi */
.paginare { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: center; margin: 24px 0; }
.pg {
	min-width: 42px; height: 42px; padding: 0 12px;
	display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text);
}
.pg.gol { min-width: 20px; padding: 0 2px; }
.pg.activ { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
.pg.gol { border: 0; background: none; }
.pg:hover:not(.activ):not(.gol) { border-color: var(--verde); text-decoration: none; }

/* ---- prima pagina ---- */
/* Bannerul, ca pe comenzi.vitamix.ro: pe telefon iese din marginile continutului,
   dintr-o margine a ecranului in cealalta, fara colturi rotunjite. Marginea negativa
   anuleaza exact padding-ul lui .wrap. Sagetile si bulinele le pune app.js -- fara
   JS ramane un rand pe care il tragi cu degetul, cu snap. */
.carusel { position: relative; margin-bottom: 16px; }
/* modificat de Claude in 02.08.2026 10:18 */
/* Pe telefon caruselul se lipeste de antet: respiro-ul de sus al lui <main> are
   rost doar pe desktop, unde desparte bara verde de categorii de primul banner.
   Marginea negativa anuleaza exact `main { padding-block: 18px ... }`. */
@media (max-width: 719.98px) {
	main > .carusel:first-child { margin-top: -18px; }
}
.carusel-pista {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; margin-inline: -14px;
}
.carusel-pista::-webkit-scrollbar { display: none; }
.carusel-item { flex: 0 0 100%; scroll-snap-align: center; }
.carusel-item picture { display: block; }

/* Raportul e fixat, ca sa nu sara pagina cat se incarca imaginea. Pe telefon
   <picture> serveste varianta patrata desenata pentru telefon, deci si cadrul
   trebuie sa fie patrat -- nu se decupeaza nimic, imaginea vine deja asa.
   Pragul trebuie sa ramana acelasi si aici, si in atributul media din pagina. */
.carusel-item img { width: 100%; height: auto; display: block; aspect-ratio: 1920 / 600; object-fit: cover; }
/* modificat de Claude in 02.08.2026 22:19 */
/* Imaginea de telefon are titlul desenat in ea, pe toata inaltimea patratului:
   plafonul de inaltime de dinainte o taia cu `cover` fix peste titlu. Deci pe
   telefon cadrul ramane patrat, netaiat, iar ecranele mai late de 520px (tablete
   mici, telefon rotit) primesc direct banner-ul lat -- acolo patratul ar fi
   ocupat tot ecranul. */
@media (max-width: 519.98px) { .carusel-item img { aspect-ratio: 1 / 1; } }

/* creat de Claude in 04.08.2026 11:55 */
/* modificat de Claude in 04.08.2026 18:35 -- asezarea aleasa de Claude */
/* ---- textele suprapuse peste banner ----
   Titlul, subtitlul si butonul se scriu in admin si NU sunt desenate in imagine:
   raman text adevarat, limpede la orice marime de ecran si de schimbat fara sa
   redesenam bannerul.

   Unde stau si cum arata vine de la Claude, care se uita la imaginea desenata si
   alege zona cea mai libera, litera si culorile (vezi Banner::asezaTexte()). Zona,
   voalul, umbra si alinierea sosesc ca clase, culorile si latimea ca variabile:
     --bt-latime      cat din latimea bannerului ocupa blocul
     --bt-text        culoarea titlului si a subtitlului (contrast verificat pe server)
     --bt-buton       fundalul butonului CTA, si --bt-buton-text litera lui
     --bt-font        familia de litere aleasa (una din Banner::FONTURI)
     --bt-scara       cu cat se maresc literele fata de marimile de mai jos (1 = deloc)

   Fara asezare -- bannerele de dinainte -- valorile implicite de mai jos dau exact
   ce era pana acum: bloc in jumatatea din stanga, la mijloc, cu umbra alba sub
   litere, pe desenele care lasa stanga goala dinadins (vezi Banner::prompt()).

   Voalul e o pojghita alba sau neagra doar sub bloc, pentru desenele agitate. Cele
   doua transparente de aici trebuie sa ramana aceleasi ca in Banner::VOALURI: pe ele
   se calculeaza contrastul care hotaraste culoarea textului.

   Butonul e un <span class="btn">, nu un <a>: tot bannerul e deja o legatura, iar
   o legatura in alta nu ar fi HTML valid. Fara o culoare aleasa de Claude ramane
   butonul obisnuit al magazinului, deci se schimba o data cu tema.

   La caruselul de sus, pe telefon se arata numai bannerele cu asezare: acolo
   <picture> serveste imaginea patrata, care de obicei are textul desenat in ea
   (vezi pragul de 520px de mai jos).

   modificat de Claude in 04.08.2026 19:10 -- casutele de mozaic nu au doua imagini,
   ci una singura, aceeasi pe orice ecran: la ele textul se arata mereu si nu are
   nevoie de a doua asezare (vezi .mozaic-cadru .banner-texte, mai jos). */
.carusel-item, .mozaic-cadru { position: relative; }

/* invelisul acopera tot bannerul; el aseaza blocul in zona aleasa */
.banner-texte {
	position: absolute; inset: 0;
	display: none; align-items: center; justify-content: flex-start;
}

.banner-texte--x-centru  { justify-content: center; }
.banner-texte--x-dreapta { justify-content: flex-end; }
.banner-texte--y-sus     { align-items: flex-start; }
.banner-texte--y-jos     { align-items: flex-end; }

.banner-texte-bloc {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	inline-size: var(--bt-latime, 50%);
	padding: clamp(12px, 2.4vw, 28px);
	border-radius: var(--radius);
	color: var(--bt-text, var(--text)); text-align: start;
	font-family: var(--bt-font, inherit);
	/* imaginea e deschisa la culoare acolo, dar nu la fel de deschisa la fiecare
	   desen: umbra alba tine textul lizibil oricum ar iesi fundalul */
	text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
}

.banner-texte--aliniere-centru .banner-texte-bloc { align-items: center; text-align: center; }
/* modificat de Claude in 04.08.2026 21:40 -- randurile se pot stringe si la dreapta */
.banner-texte--aliniere-dreapta .banner-texte-bloc { align-items: flex-end; text-align: right; }

/* creat de Claude in 04.08.2026 21:40 */
/* ---- asezarea reglata din admin ----
   Cu asezare, blocul nu mai e impins de flexbox intr-un colt, ci pus la doua
   procente pe care le vede si le trage omul in fereastra de texte:
     --bt-sus       cat de jos de marginea de sus sta coltul blocului (% din inaltime)
     --bt-lateral   cat de departe de marginea din stanga (% din latime)
   iar pe telefon perechea lor, --bt-sus-m / --bt-lateral-m, fiindca acolo imaginea
   e patrata si acelasi procent ar cadea cu totul in alta parte.

   Procentele merg direct: `top` in procente se socoteste din inaltimea cadrului,
   `left` din latimea lui -- exact ce scrie in admin, fara alta socoteala. */
.banner-texte--asezat .banner-texte-bloc {
	position: absolute;
	top: var(--bt-sus, 30%);
	left: var(--bt-lateral, 4%);
}

/* voalul: transparentele sunt cele din Banner::VOALURI (0.72 alb, 0.52 negru) */
/* modificat de Claude in 15.08.2026 13:05 -- astea sunt ale imaginii late; sub 520px le
   ia locul perechea --voalm-, voalul ales anume pentru patratul de telefon (mai jos) */
.banner-texte--voal-deschis .banner-texte-bloc {
	background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px);
}
.banner-texte--voal-inchis .banner-texte-bloc {
	background: rgba(0, 0, 0, .52); backdrop-filter: blur(2px);
}

.banner-texte--umbra-niciuna  .banner-texte-bloc { text-shadow: none; }
.banner-texte--umbra-deschisa .banner-texte-bloc { text-shadow: 0 1px 2px rgba(255, 255, 255, .6); }
.banner-texte--umbra-inchisa  .banner-texte-bloc { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }

/* creat de Claude in 04.08.2026 20:40 */
/* ---- marirea literelor ----
   Reglajul „Mareste textele cu (%)” din admin ajunge aici ca --bt-scara: un numar (1 =
   marimile obisnuite, 1.4 = cu 40% mai mari). Se inmulteste cu fiecare clamp(), nu il
   inlocuieste, tocmai ca textul marit sa ramana legat de latimea ecranului -- adica sa
   creasca si sa scada mai departe cu el, doar de la alt punct de plecare.

   Fara reglaj (bannerele de dinainte, si toate cele fara asezare) var() cade pe 1 si
   nu se schimba nimic. Butonul isi mareste si marginile interioare o data cu litera,
   altfel textul lui ar creste intr-o cutie ramasa mica. */
.banner-titlu {
	font-size: calc(clamp(18px, 2.4vw, 34px) * var(--bt-scara, 1));
	font-weight: 700; line-height: 1.15;
}
/* modificat de Claude in 04.08.2026 21:40 -- subtitlul poate avea culoarea lui */
/* modificat de Claude in 04.08.2026 20:40 -- marimea se inmulteste cu --bt-scara */
.banner-subtitlu {
	font-size: calc(clamp(13px, 1.2vw, 17px) * var(--bt-scara, 1));
	line-height: 1.35; max-width: 34ch;
	color: var(--bt-subtitlu, inherit);
}

/* culoarea butonului, cand a ales-o Claude: altfel ramane cea din .btn */
/* modificat de Claude in 04.08.2026 20:40 -- si el creste cu --bt-scara: litera prin
   1em (adica marimea mostenita de la bloc), marginile prin cele doua valori din .btn,
   ca la scara 1 sa iasa exact butonul de pana acum */
.banner-texte .banner-cta {
	background: var(--bt-buton, var(--verde)); color: var(--bt-buton-text, #fff);
	font-size: calc(1em * var(--bt-scara, 1));
	padding: calc(11px * var(--bt-scara, 1)) calc(20px * var(--bt-scara, 1));
}
/* butonul nu e un buton adevarat, deci nu are :hover al lui: se aprinde cand
   trece mausul peste banner, ca sa se vada ca tot blocul duce undeva. Prin
   luminozitate, nu cu o culoare fixa: merge si pe culoarea aleasa de Claude. */
.carusel-item:hover .banner-cta,
.mozaic-cadru:hover .banner-cta { filter: brightness(.92); }

/* peste 520px imaginea lata are loc pentru text: sub atat se arata patratul, care
   are textul desenat in el

   modificat de Claude in 04.08.2026 19:10 -- „> .banner-texte”, adica numai bannerul
   mare de sus. Casutele de mozaic isi au regulile mai jos: la ele imaginea e una
   singura, deci pragurile de aici (si perechea de procente pentru telefon) n-au ce
   cauta.
   modificat de Claude in 04.08.2026 20:15 -- mozaicul nu mai e un carusel, deci nici
   n-are cum sa prinda regulile astea; „>” ramane, ca sa se vada limpede ca sunt ale
   bannerului de sus. */
@media (min-width: 520px) { .carusel-item > .banner-texte { display: flex; } }

/* creat de Claude in 04.08.2026 21:40 */
/* Pe telefon textul se arata numai la bannerele cu asezare, si numai in carusel:
   acolo omul a spus limpede unde sta blocul peste patrat (are reglajele lui, --bt-*-m)
   si vede in admin cum iese. Bannerele fara asezare raman ca pana acum -- pe telefon
   se serveste patratul, care are de obicei textul desenat in el, si peste el n-are
   ce sa mai scrie nimeni. Blocul se intinde intre cele doua margini: pe 390 px o
   coloana de 45% n-ar mai fi text, ci o cuvinte pe rand. */
/* modificat de Claude in 04.08.2026 19:10 -- toate regulile de aici sunt scrise pe
   „.carusel-item > .banner-texte”: perechea --bt-*-m e a bannerului mare de sus,
   singurul cu doua imagini. Fara „>”, ele cadeau si peste casutele de mozaic, care
   au o singura imagine -- si atunci, sub 520px, o casuta isi muta textul dupa
   procentele desenate pentru patratul altui banner. */
@media (max-width: 519.98px) {
	.carusel-item > .banner-texte--asezat { display: flex; }

	.carusel-item > .banner-texte--asezat .banner-texte-bloc {
		top: var(--bt-sus-m, 58%);
		left: var(--bt-lateral-m, 6%);
		inline-size: calc(100% - 2 * var(--bt-lateral-m, 6%));
		gap: 6px; padding: 4vw;
	}

	/* creat de Claude in 15.08.2026 13:05 */
	/* Voalul de pe telefon. Sub 520px se serveste patratul -- alta imagine, cu subiectul
	   in mijloc -- si blocul cade acolo peste alta zona, deci poate cere pojghita chiar
	   cand banda lata nu are nevoie de ea (sau invers). De aceea reglajul e in doua, si
	   aici clasa --voalm- o bate pe --voal-: e cu un nivel mai specifica (are si
	   .carusel-item inainte) si vine mai tarziu in fisier. Transparentele raman aceleasi
	   ca in Banner::VOALURI, ca peste tot.

	   Numai la caruselul de sus („>”): casutele de mozaic au o singura imagine, deci la
	   ele voalul e unul singur, cel de mai sus. */
	.carusel-item > .banner-texte--voalm-niciunul .banner-texte-bloc {
		background: none; backdrop-filter: none;
	}
	.carusel-item > .banner-texte--voalm-deschis .banner-texte-bloc {
		background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px);
	}
	.carusel-item > .banner-texte--voalm-inchis .banner-texte-bloc {
		background: rgba(0, 0, 0, .52); backdrop-filter: blur(2px);
	}

	/* aceleasi proportii ca pe desktop, dar raportate la latimea telefonului: asa
	   arata previzualizarea din admin, care e o macheta la scara (vezi admin.css) */
	/* modificat de Claude in 04.08.2026 20:40 -- marirea din admin merge si aici: e acelasi
	   banner, doar peste cealalta imagine, deci n-ar avea sens sa creasca doar pe calculator */
	.carusel-item > .banner-texte--asezat .banner-titlu    { font-size: calc(clamp(15px, 5.6vw, 28px) * var(--bt-scara, 1)); }
	.carusel-item > .banner-texte--asezat .banner-subtitlu { font-size: calc(clamp(12px, 3.4vw, 17px) * var(--bt-scara, 1)); max-width: none; }
	.carusel-item > .banner-texte--asezat .banner-cta      {
		padding: calc(1.8vw * var(--bt-scara, 1)) calc(3.6vw * var(--bt-scara, 1));
		font-size: calc(clamp(12px, 3.2vw, 16px) * var(--bt-scara, 1));
	}
}

/* modificat de Claude in 04.08.2026 19:10 */
/* ---- textele de pe casutele de mozaic ----
   O casuta are o singura imagine, aceeasi pe calculator si pe telefon: nu exista o
   „varianta de telefon” peste care textul sa stea altfel, deci se arata pe orice
   ecran, cu aceleasi procente (--bt-sus / --bt-lateral). Ce se schimba e marimea
   casutei -- 600 sau 300 px in grila, ~320 sau ~160 pe banda de pe telefon -- si o
   data cu ea marimea literelor: de aici unitatile cqw, adica procente din latimea
   casutei, ca in machetele din admin (vezi .banner-prev-cadru in admin.css). Pragul
   de jos din fiecare clamp() tine textul citibil si pe cea mai mica dintre ele. */
.mozaic-cadru { container-type: inline-size; }

/* modificat de Claude in 04.08.2026 20:40 -- si casutele asculta de --bt-scara. Aici
   marirea trebuie tinuta in frau din admin: pe 160 px lati un titlu marit cu 50% umple
   casuta, si macheta patrata din fereastra de texte o arata exact asa. */
.mozaic-cadru .banner-texte { display: flex; }
.mozaic-cadru .banner-texte-bloc { gap: 1cqw; padding: clamp(8px, 2.7cqw, 16px); }
.mozaic-cadru .banner-titlu      { font-size: calc(clamp(13px, 3.7cqw, 22px) * var(--bt-scara, 1)); }
.mozaic-cadru .banner-subtitlu   { font-size: calc(clamp(11px, 2.2cqw, 13px) * var(--bt-scara, 1)); max-width: 24ch; }
.mozaic-cadru .banner-cta        {
	padding: calc(1.2cqw * var(--bt-scara, 1)) calc(2.4cqw * var(--bt-scara, 1));
	font-size: calc(clamp(11px, 2.3cqw, 14px) * var(--bt-scara, 1));
}

/* Casuta patrata e un singur subiect mare pe 300 px: un bloc de 50% n-ar mai fi text,
   ci un cuvant pe rand. Aici blocul se intinde intre margini, ca pe telefon la
   caruselul de sus, iar „latime” nu-l mai strange (in admin reglajul nici nu apare
   la o casuta patrata -- vezi arataForma() in admin.js). Fara asezare blocul e
   impins de flexbox in stanga, deci ia toata latimea; cu asezare pleaca de la
   --bt-lateral, si atunci lasa acelasi respiro si in dreapta. */
.mozaic-cadru--patrat .banner-texte-bloc { inline-size: 100%; }
.mozaic-cadru--patrat .banner-texte--asezat .banner-texte-bloc {
	inline-size: calc(100% - 2 * var(--bt-lateral, 4%));
}

.carusel-sageata {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.88); color: #09282e;
	box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.carusel-sageata:hover { background: #fff; }
.carusel-sageata svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carusel-sageata--stanga { left: 8px; }
.carusel-sageata--dreapta { right: 8px; }

.carusel-puncte {
	position: absolute; left: 0; right: 0; bottom: 2px; z-index: 2;
	display: flex; justify-content: center; gap: 2px;
}
/* modificat de Claude in 06.08.2026 12:57 -- bulina ramane de 8px, dar butonul din jurul
   ei creste la 24x24 cu padding transparent: degetul nimereste, ochiul vede acelasi
   punct mic. Buline de 8px lipite una de alta erau sub pragul de atingere. */
.carusel-punct {
	width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: none;
}
.carusel-punct::before {
	content: ""; display: block;
	width: 8px; height: 8px; border-radius: 999px;
	background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: width .2s ease, background .2s ease;
}
.carusel-punct[aria-current="true"]::before { width: 20px; background: #fff; }

/* modificat de Claude in 02.08.2026 09:59 */
/* app.js ascunde sagetile si bulinele cand banda n-are ce derula (se schimba
   la redimensionare). Regula e necesara: display din regulile de mai sus bate
   [hidden]-ul din foaia browserului. */
.carusel-sageata[hidden], .carusel-puncte[hidden] { display: none; }

@media (min-width: 900px) {
	.carusel-pista { margin-inline: 0; border-radius: var(--radius); }
	.carusel-item img { border-radius: var(--radius); }
}

/* Pe telefon raman doar transportul si returul: patru casute pe doua randuri
   impingeau produsele sub linia de plutire pentru un text pe care oricum il
   stie toata lumea. Celelalte doua reapar de la 620px in sus. */
.avantaje-bara {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
	background: var(--linie); border: 1px solid var(--linie);
	border-radius: var(--radius); overflow: hidden; margin-bottom: 20px;
}
.avantaj { display: flex; align-items: center; gap: 10px; background: #fff; padding: 12px 14px; }
.avantaj--optional { display: none; }
.avantaj svg {
	flex: 0 0 auto; width: 26px; height: 26px; color: var(--verde);
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.avantaj > span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.avantaj b { display: block; font-size: 14px; color: var(--text); }

/* Cele patru casute apar impreuna doar cand incap toate pe un rand. Sub 720px
   se vad numai doua, pe un singur rand -- niciodata una sub alta. */
@media (min-width: 720px) {
	.avantaje-bara { grid-template-columns: repeat(4, 1fr); }
	.avantaj--optional { display: flex; }
}

.cautare-termeni { margin: -6px 0 14px; font-style: italic; }

.sectiune { margin-bottom: 26px; }
.sectiune-cap { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.sectiune-cap h2 { font-size: 19px; margin: 0; flex: 1; }
.sectiune-cap a { font-size: 14px; white-space: nowrap; }

/* modificat de Claude in 01.08.2026 21:14 */
/* Randurile de produse se deruleaza lateral pe orice ecran: mereu un singur rand,
   niciodata o grila care se rupe pe mai multe randuri. Latimea unui card se
   calculeaza din numarul de carduri vizibile (--vizibile), cu zecimale ca sa se
   vada ca urmeaza inca unul si sa fie clar ca se poate derula. */
/* modificat de Claude in 08.08.2026 18:09 */
.grila--derulare {
	--vizibile: 2.2;
	display: grid; grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--vizibile) - 1) * 12px) / var(--vizibile));
	overflow-x: auto; scroll-snap-type: x proximity;
	padding-bottom: 6px; scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* obligatoriu: fara asta raman cele doua coloane explicite mostenite de la .grila,
	   iar 1fr se striveste la zero intr-un container care se deruleaza -- primele doua
	   carduri devin niste dungi verticale (doar bordurile lor) */
	grid-template-columns: none;
}
.grila--derulare > * { scroll-snap-align: start; }
.grila--derulare::-webkit-scrollbar { display: none; }
@media (min-width: 620px)  { .grila--derulare { --vizibile: 3.3; } }
@media (min-width: 900px)  { .grila--derulare { --vizibile: 4.4; } }
@media (min-width: 1150px) { .grila--derulare { --vizibile: 5.4; } }

/* modificat de Claude in 02.08.2026 13:05 */
/* Sagetile benzilor derulabile (randuri de produse, scurtaturi de categorii).
   Le pune app.js, deci fara JS nu se vede nimic
   in plus -- banda se trage cu degetul, ca pana acum. Apar doar cand chiar exista
   ce derula: clasa .rand--derulabil o pune JS-ul dupa ce masoara banda.
   Pragul e pe latime, nu pe (hover: hover) / (pointer: fine): pe laptopurile cu
   ecran tactil browserul raporteaza pointerul principal ca fiind "coarse", iar
   sagetile nu s-ar vedea tocmai pe ecranele mari, unde sunt utile. */
.rand-derulare { position: relative; }
.rand-sageata { display: none; }

@media (min-width: 620px) {
	.rand--derulabil .rand-sageata {
		position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
		display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
		border: 1px solid var(--linie); border-radius: 50%; cursor: pointer;
		background: rgba(255,255,255,.94); color: #09282e;
		box-shadow: 0 2px 10px rgba(0,0,0,.16);
		transition: opacity .15s ease, background .15s ease, border-color .15s ease;
	}
	.rand-sageata:hover { background: #fff; border-color: var(--verde); }
	/* la capat sageata dispare, dar nu se scoate din pagina: altfel cardurile
	   ar juca lateral la fiecare derulare */
	.rand-sageata[disabled] { opacity: 0; pointer-events: none; }
	.rand-sageata svg {
		width: 17px; height: 17px; fill: none; stroke: currentColor;
		stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
	}
	.rand-sageata--stanga { left: -10px; }
	.rand-sageata--dreapta { right: -10px; }
}

/* Banda de scurtaturi: mereu pe un singur rand, indiferent de ecran.
   Daca nu incap, se deruleaza lateral -- nu se rup pe mai multe randuri. */
.scurtaturi {
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
	padding-bottom: 6px; -webkit-overflow-scrolling: touch;
	/* modificat de Claude in 09.08.2026 13:40 -- scroll-ul se tine minte, dar nu se mai vede */
	scrollbar-width: none;
}
.scurtaturi::-webkit-scrollbar { display: none; }

/* modificat de Claude in 09.08.2026 13:05 -- latimea e procent din banda (spatiul
   disponibil), nu pixeli ficsi.
   modificat de Claude in 09.08.2026 13:40 -- cutia iese patrata (aspect-ratio), iar
   poza sta intreaga in ea, necropita si nedeformata (object-fit: contain) -- nu mai
   presupunem ca orice poza a fost taiata rotund din admin, cum sunt cele preluate
   direct de pe procash.ro. */
/* modificat de Claude in 09.08.2026 14:05 -- container-type, ca eticheta de dedesubt
   sa-si ia marimea din latimea reala a cutiei (cqw), nu dintr-un font fix; cand cutia
   creste sau scade dupa procent, textul creste si scade cu ea, nu ramane la fel. */
.scurtatura {
	flex: 0 0 auto; width: var(--scurtatura-latime-mobil, 28%); aspect-ratio: 1 / 1;
	scroll-snap-align: start; container-type: inline-size;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 12px 8px; text-align: center; color: var(--text);
	display: grid; grid-template-rows: 1fr auto; gap: 8px; justify-items: center;
	font-weight: 600; line-height: 1.25;
}
.scurtatura:hover { border-color: var(--verde); text-decoration: none; }
.scurtatura img {
	width: 100%; height: 100%; min-height: 0; object-fit: contain;
}
.scurtatura-initiala {
	width: 70%; aspect-ratio: 1 / 1; border-radius: 50%; background: #eef4e8; color: var(--verde-inchis);
	display: grid; place-items: center; font-size: 26px; font-weight: 700; align-self: center;
}
.scurtatura-text { display: block; font-size: clamp(10px, 11cqw, 16px); }

@media (min-width: 620px) { .scurtatura { width: var(--scurtatura-latime-desktop, 10%); } }

/* modificat de Claude in 02.08.2026 02:26 */
/* modificat de Claude in 02.08.2026 22:20 */
/* modificat de Claude in 04.08.2026 20:15 -- o banda continua, nu un carusel cu pagini */
/* modificat de Claude in 04.08.2026 20:35 -- spatiu intre bannere */
/* Mozaicul de bannere din mijlocul primei pagini: o singura banda, aceeasi pe orice
   ecran. Bannerele curg unul dupa altul, la aceeasi inaltime, despartite de acelasi
   spatiu ca in restul paginii (--mozaic-gap); cel care nu mai incape se vede pe cat
   loc mai ramane, iar restul se aduce la vedere prin derulare -- cu degetul, cu
   rotita sau cu sagetile puse de app.js (invelisul are .rand-derulare +
   data-derulare, ca randurile de produse).

   Toata geometria iese dintr-o singura marime, --mozaic-u (latura patratului):
   casuta patrata (300x300) e u x u, cea lata (600x300) doua unitati plus spatiul
   dintre ele -- adica exact cat doua patrate vecine, ca sa se pastreze ritmul
   coloanelor. Deci doua bannere alaturate au mereu aceeasi inaltime, indiferent de
   proportia fisierului incarcat: inainte casuta lata se intindea pe cat ii cerea
   imaginea ei si ieseau randuri de inaltimi diferite.

   u se scrie in cqw, adica procente din latimea benzii (invelisul e container), ca
   sa nu depinda de latimea ecranului: 4 unitati vizibile pe calculator, 3 pe
   tableta, ~2,3 pe telefon -- spatiile se scad, ca sa incapa atatea cu tot cu ele.
   Plafonul de 300px e marimea la care sunt taiate imaginile in admin: peste atat
   s-ar intinde o poza mai mica decat cadrul.
   Fara scroll-snap: un banner taiat de marginea ecranului trebuie sa ramana taiat
   pana cand omul deruleaza, nu sa fie tras singur la vedere. */
.mozaic-zona {
	container-type: inline-size;
	position: relative; margin-bottom: 26px;
	--mozaic-gap: 10px;
	--mozaic-u: min(300px, calc(44cqw - 12px));
}

@media (min-width: 620px) {
	.mozaic-zona { --mozaic-u: min(300px, calc((100cqw - 2 * var(--mozaic-gap)) / 3)); }
}

@media (min-width: 900px) {
	.mozaic-zona { --mozaic-u: min(300px, calc((100cqw - 3 * var(--mozaic-gap)) / 4)); }
}

.mozaic {
	display: flex; gap: var(--mozaic-gap);
	overflow-x: auto; overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.mozaic::-webkit-scrollbar { display: none; }

/* grid, nu block: asa imaginea se intinde singura pe toata casuta */
.mozaic-cadru {
	flex: 0 0 auto; display: grid; overflow: hidden;
	width: var(--mozaic-u); height: var(--mozaic-u);
	border-radius: var(--radius);
}
.mozaic-cadru--lat { width: calc(var(--mozaic-u) * 2 + var(--mozaic-gap)); }
.mozaic-cadru img {
	width: 100%; height: 100%; display: block;
	object-fit: cover; border-radius: 0;
}

/* Banda de branduri: un singur rand, care se deruleaza singur la nesfarsit.
   Pista contine lista de doua ori si se muta cu exact -50%, adica o lista
   intreaga -- la finalul animatiei imaginea e identica cu cea de la inceput,
   asa ca reluarea nu se vede. Durata vine din PHP, proportionala cu numarul
   de branduri, ca sa mearga la fel de repede indiferent cate sunt. */
.branduri {
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 12px 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
}
.branduri-pista { display: flex; width: max-content; animation: banda-branduri var(--durata, 60s) linear infinite; }
.branduri:hover .branduri-pista, .branduri:focus-within .branduri-pista { animation-play-state: paused; }
@keyframes banda-branduri { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.branduri a { flex: 0 0 auto; display: grid; place-items: center; width: 124px; padding: 8px; min-height: 54px; }
.branduri img { max-width: 100%; max-height: 40px; object-fit: contain; filter: grayscale(1); opacity: .75; }
.branduri a:hover img { filter: none; opacity: 1; }
.branduri span { font-size: 12px; text-align: center; color: var(--muted); }

/* cui i se face rau de la miscare, ramane cu un rand derulabil cu degetul */
@media (prefers-reduced-motion: reduce) {
	.branduri { overflow-x: auto; scrollbar-width: thin; }
	.branduri-pista { animation: none; }
}

/* creat de Claude in 02.08.2026 23:55 */
/* modificat de Claude in 03.08.2026 01:20 */
/* ---- banda de abonare la newsletter ----
   O fasie verde deasupra subsolului, pe toate paginile. Se randeaza in afara lui
   <main class="wrap">, imediat inaintea subsolului (vezi layouts/main.php), ca
   benzile late care exista deja: asa se intinde pe toata latimea fara margini
   negative si fara 100vw -- care, cu bara de derulare pe ecran, ar muta continutul
   cu cativa pixeli intr-o parte.

   Asezare ca la Vegis si eMAG: pe un rand, cu poza (sau plicul) la stanga,
   motivele in mijloc si formularul la dreapta. Un rand, nu trei suprapuse, ca sa
   ramana o fasie ingusta -- ea insoteste pagina, nu o intrerupe. Sub 900px cele
   trei coloane se aseaza una sub alta si totul se centreaza.

   Verde deschis, nu inchis ca antetul si subsolul: banda are de castigat o adresa
   de email intre doua zone inchise la culoare si trebuie sa se vada ca e altceva.
   Scrisul ramane inchis, ca sa se citeasca pe verde, iar butonul e chihlimbariu:
   pe verde, un buton verde ar disparea, iar unul inchis s-ar pierde in scris.
   Acelasi formular apare si pe /abonare-newsletter, acolo pe fond alb -- de asta
   toate culorile astea stau pe .banda-newsletter, nu pe .form-newsletter. */
.banda-newsletter {
	padding: 18px 0;
	background: var(--newsletter-fundal);
	color: var(--newsletter-text); text-align: center;
}
/* modificat de Claude in 03.08.2026 10:10 -- lipita de subsol: cei 32px de margine ai
   subsolului lasau o dunga alba intre banda verde si zona inchisa, iar treapta se rupea
   in doua; spatiul de respiro il face oricum padding-ul benzii */
.banda-newsletter + .site-foot { margin-top: 0; }
.banda-newsletter-rand { display: grid; gap: 14px; justify-items: center; align-items: center; }
.banda-newsletter h2 { margin: 0 0 8px; font-size: 19px; color: var(--newsletter-text); }

/* pictograma desenata, aleasa in admin (plic implicit) */
.banda-newsletter-icon {
	display: grid; place-items: center; width: 62px; height: 62px; flex: 0 0 auto;
	border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--newsletter-text);
}

.banda-newsletter-plusuri { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; text-align: left; }
.banda-newsletter-plusuri li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 14.5px; font-weight: 600; }
.banda-newsletter-plusuri svg {
	width: 17px; height: 17px; margin-top: 3px; fill: none;
	stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}

/* modificat de Claude in 06.08.2026 12:57 -- scrisul butonului nu mai ia culoarea
   antetului: pe magazinele cu antet deschis (zanna, verde-menta) iesea galben pe
   portocaliu, sub pragul de contrast. Portocaliul e fix aici, deci si scrisul. */
.banda-newsletter .btn { background: #f6a609; color: #14140f; }
.banda-newsletter .btn:hover { background: #e09405; }
.banda-newsletter .termeni { font-size: 12.5px; color: rgba(9, 40, 46, .78); text-align: left; margin-bottom: 0; }
.banda-newsletter .termeni a { color: var(--newsletter-text); text-decoration: underline; }
/* eticheta casetei ramane pentru cititoarele de ecran: langa titlu si cu text-substitut
   in caseta, la vedere ar fi doar un rand in plus intr-o banda care se vrea ingusta */
.banda-newsletter .camp label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.banda-newsletter .form-info-raspuns { margin: 8px 0 0; }

.form-newsletter { margin: 0; }
.form-newsletter .camp { margin-bottom: 0; }
.form-newsletter-rand { display: grid; gap: 10px; margin-bottom: 8px; }
/* caseta se strange cat trebuie: fara asta, latimea ei implicita tine coloana
   formularului mai lata decat locul primit si banda da pe afara */
.form-newsletter-rand .camp { min-width: 0; }
.form-newsletter button[type="submit"] {
	border: 0; cursor: pointer; font-size: 15px; padding: 12px 20px;
}

@media (min-width: 560px) {
	.form-newsletter-rand { grid-template-columns: 1fr auto; align-items: end; }
}
/* modificat de Claude in 03.08.2026 02:05 -- randul se face de la 720px, nu de la 900:
   pe tableta banda avea deja loc, dar motivele stateau deasupra formularului si o faceau
   de doua ori mai inalta decat trebuie.
   modificat de Claude in 03.08.2026 02:25 -- pictograma ramane si aici, doar mai mica: din
   cele 692px ale coloanei, un cerc de 48px si spatii de 16 lasa destul si motivelor, si
   casetei de email. De la 900px toate trei respira din nou. */
@media (min-width: 720px) {
	.banda-newsletter { padding: 16px 0; text-align: left; }
	.banda-newsletter-rand { grid-template-columns: auto 1fr minmax(290px, 40%); gap: 16px; justify-items: stretch; }
	.banda-newsletter-icon { width: 48px; height: 48px; }
	.banda-newsletter-icon svg { width: 26px; height: 26px; }
	.banda-newsletter-form { justify-self: end; width: 100%; }
	.banda-newsletter-plusuri li { font-size: 14px; }
	.banda-newsletter h2 { font-size: 19px; }
	/* butonul cedeaza cei cativa pixeli: mai bine se vede toata adresa scrisa in caseta
	   decat aerul din jurul unui text de buton care oricum incape */
	.banda-newsletter .btn { padding-inline: 15px; }
}
@media (min-width: 900px) {
	/* pictograma | motive | formular. Formularul nu se strange sub 340px: sub atat caseta
	   si butonul nu mai incap pe acelasi rand. */
	.banda-newsletter { padding: 20px 0; }
	.banda-newsletter-rand { grid-template-columns: auto 1fr minmax(340px, 38%); gap: 28px; }
	.banda-newsletter-icon { width: 62px; height: 62px; }
	.banda-newsletter-icon svg { width: 34px; height: 34px; }
	.banda-newsletter-plusuri li { font-size: 14.5px; }
	.banda-newsletter h2 { font-size: 20px; }
	.banda-newsletter .btn { padding-inline: 20px; }
}

/* ---- stiri ----
   Asezare ca la iherb: banda vine spre finalul primei pagini, dupa produse si
   inainte de branduri. Un rand de patru carduri pe desktop, care se strang la
   doua si apoi la unul; imaginea sus in raport 3:2, deasupra rubricii si a
   titlului. Cardul intreg e link, de aceea interiorul e din span-uri. */
.stiri { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .stiri { gap: 16px; grid-template-columns: repeat(4, 1fr); } }

.stire {
	display: flex; flex-direction: column; color: var(--text);
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
	transition: box-shadow .15s, border-color .15s;
}
.stire:hover { text-decoration: none; border-color: #d8dfd4; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.stire-img { display: block; background: var(--fundal); aspect-ratio: 3 / 2; }
.stire-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stire-text { display: block; padding: 12px 14px 16px; }
.stire-rubrica {
	display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: var(--verde-inchis); margin-bottom: 5px;
}
.stire-titlu {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: 15px; font-weight: 600; line-height: 1.35;
}
.stire:hover .stire-titlu { color: var(--verde-inchis); }
.stire-rezumat {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--muted);
}
.stire-data { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

/* ---- pagina de branduri ---- */
.alfabet { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 22px; }
.alfabet a {
	display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
	background: #fff; border: 1px solid var(--linie); border-radius: 8px;
	font-size: 14px; font-weight: 700; color: var(--text);
}
.alfabet a:hover { border-color: var(--verde); text-decoration: none; }

.brand-grup { margin-bottom: 26px; scroll-margin-top: 120px; }
.brand-grup h2 {
	font-size: 17px; margin: 0 0 10px; padding-bottom: 6px;
	border-bottom: 2px solid var(--verde-clar); display: inline-block; min-width: 34px;
}
.brand-lista { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .brand-lista { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .brand-lista { grid-template-columns: repeat(5, 1fr); } }

.brand-card {
	display: grid; justify-items: center; gap: 6px; padding: 14px 10px; text-align: center;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text);
}
.brand-card:hover { border-color: var(--verde); text-decoration: none; }
.brand-logo { display: grid; place-items: center; height: 46px; }
.brand-logo img { max-width: 100%; max-height: 46px; object-fit: contain; }
.brand-logo b { font-size: 19px; color: var(--muted); }
.brand-nume { font-size: 13.5px; font-weight: 600; line-height: 1.25; }
.brand-cnt { font-size: 12px; color: var(--muted); }

/* rubricile, ca un rand de pastile */
.rubrici { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rubrica {
	padding: 7px 14px; border: 1px solid var(--linie); border-radius: 999px;
	background: #fff; color: var(--text); font-size: 13.5px; font-weight: 600;
}
.rubrica:hover { border-color: var(--verde); text-decoration: none; }
.rubrica--activa { background: var(--verde-inchis); border-color: var(--verde-inchis); color: #fff; }

/* pagina de articol */
.articol { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; }
.articol h1 { font-size: 24px; margin: 0 0 6px; line-height: 1.25; }
.articol-data { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.articol-imagine { width: 100%; height: auto; border-radius: var(--radius); display: block; margin-bottom: 18px; }
/* modificat de Claude in 02.08.2026 23:30 */
/* ---- corpul unui articol sau al unei pagini, adica ce se scrie in editor ----
   Regulile de aici sunt perechea celor din editor.css: aceleasi marimi si aceleasi
   distante, ca omul sa vada in admin pagina care va iesi. Cand se schimba una, se
   schimba amandoua.

   Pana acum textul se sprijinea pe ce da browserul din oficiu (paragrafe la 16px,
   liste retrase la 40px) si nimic nu stia de ce scoate CKEditor: pozele vin in
   <figure class="image">, tabelele in <figure class="table">, filmele in
   <figure class="media">. Fara regulile astea, o poza aliniata la stanga in editor
   ajungea pe site un bloc centrat cu 40px de margine. */
.articol-corp { font-size: 16px; line-height: 1.65; }
.articol-corp p { margin: 0 0 14px; }
.articol-corp h2 { font-size: 19px; margin: 26px 0 8px; }
.articol-corp h3 { font-size: 17px; margin: 22px 0 6px; }
.articol-corp h4 { font-size: 16px; margin: 18px 0 6px; }
.articol-corp h2:first-child,
.articol-corp h3:first-child,
.articol-corp h4:first-child { margin-top: 0; }
.articol-corp ul,
.articol-corp ol { margin: 0 0 14px; padding-left: 22px; }
.articol-corp li { margin-bottom: 7px; }
.articol-corp > :last-child { margin-bottom: 0; }

.articol-corp blockquote {
	margin: 18px 0; padding: 4px 0 4px 16px;
	border-left: 3px solid var(--verde); color: var(--muted); font-style: normal;
}
.articol-corp hr { border: 0; border-top: 1px solid var(--linie); margin: 24px 0; height: 0; }

.articol-corp img { max-width: 100%; height: auto; border-radius: var(--radius); }
.articol-corp iframe { max-width: 100%; }

/* pozele puse din editor: bloc, aliniate sau curgand pe langa text, cu legenda dedesubt */
.articol-corp figure { margin: 18px 0; }
.articol-corp figure.image { display: table; max-width: 100%; text-align: center; }
.articol-corp figure.image img { display: block; max-width: 100%; height: auto; }
.articol-corp figure.image > figcaption { display: table-caption; caption-side: bottom; }
.articol-corp figcaption { font-size: 13px; color: var(--muted); padding-top: 6px; }
.articol-corp figure.image.image-style-block { margin-left: auto; margin-right: auto; }
.articol-corp figure.image.image-style-align-left { float: left; margin: 6px 20px 10px 0; max-width: 50%; }
.articol-corp figure.image.image-style-align-right { float: right; margin: 6px 0 10px 20px; max-width: 50%; }
.articol-corp .image_resized { max-width: 100%; }
.articol-corp .image_resized img { width: 100%; }
.articol-corp .image-inline { display: inline-flex; max-width: 100%; align-items: flex-start; }
/* pozele curgatoare nu trebuie sa iasa din articol */
.articol-corp::after { content: ''; display: block; clear: both; }

/* tabelele: cele vechi vin goale, cele din editor invelite in <figure class="table"> */
.articol-corp figure.table { max-width: 100%; overflow-x: auto; }
.articol-corp table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.articol-corp figure.table table { display: table; width: 100%; }
.articol-corp th,
.articol-corp td { border: 1px solid var(--linie); padding: 6px 10px; }
.articol-corp th { background: #eef1f4; text-align: left; }
.articol-corp figure.table > figcaption { text-align: center; }

/* filmele puse din editor (MediaEmbed cu previzualizare in continut) */
.articol-corp figure.media { margin: 20px 0; }
.articol-corp figure.media div[data-oembed-url] { position: relative; padding-top: 56.25%; }
.articol-corp figure.media div[data-oembed-url] iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius);
}

.firimituri { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
@media (min-width: 760px) { .articol { padding: 26px 30px; } .articol h1 { font-size: 30px; } }

/* modificat de Claude in 02.08.2026 02:00 */
/* pe ecrane late poza mare a articolului sta in dreapta, mai mica, cu textul curgand pe langa ea */
@media (min-width: 721px) {
	.articol-imagine { float: right; width: 340px; max-width: 42%; margin: 0 0 16px 24px; }
	.articol::after { content: ''; display: block; clear: both; }
}

/* ---- cos ---- */
.cos-nr {
	display: inline-block; min-width: 19px; padding: 1px 5px; margin-left: 4px;
	background: var(--cos-nr); color: #fff; border-radius: 999px;
	font-size: 12px; font-weight: 700; text-align: center;
}

.cos { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .cos { grid-template-columns: 1fr 320px; } }

.cos-linii { display: grid; gap: 10px; }
.linie {
	display: grid; gap: 10px; align-items: center;
	grid-template-columns: 72px 1fr auto;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px;
}
.linie-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.linie-desc a { color: var(--text); font-weight: 500; }
.linie-desc p { margin: 2px 0 0; }
.avert { color: #b54708; }
.linie-cnt { display: flex; align-items: center; gap: 0; grid-column: 2; }
.linie-pret { text-align: right; grid-column: 3; grid-row: 2; }
.linie-pret b { display: block; }
.linie-sterge {
	grid-column: 3; grid-row: 1; justify-self: end;
	background: none; border: 0; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer;
}
.linie-sterge:hover { color: #b42318; }

@media (min-width: 620px) {
	.linie { grid-template-columns: 72px 1fr 130px 110px 32px; }
	.linie-cnt { grid-column: 3; }
	.linie-pret { grid-column: 4; grid-row: 1; }
	.linie-sterge { grid-column: 5; grid-row: 1; }
}

/* modificat de Claude in 02.08.2026 18:55 -- butoanele si caseta au acum acelasi
   chenar ca restul controalelor, ca grupul sa arate dintr-o bucata. Caseta isi ia
   forma de sus si rescrie doar ce difera intr-un grup lipit: fara padding, fara
   colturi rotunde si fara chenar in laterale, unde vin butoanele.
   Sagetile casetei de numar sunt scoase o singura data, sus. */
.pas {
	width: 34px; height: 36px; border: 1px solid var(--chenar); background: #fff;
	font-size: 18px; line-height: 1; cursor: pointer;
}
.pas:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.pas:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.pas:hover { border-color: var(--chenar-sus); }
.cnt {
	width: 46px; height: 36px; padding: 0; text-align: center; font-size: 15px;
	border-radius: 0; border-left: 0; border-right: 0;
}
/* focalizata, sta deasupra butoanelor: altfel inelul verde trece pe sub ele */
.cnt:focus { position: relative; z-index: 1; }

.cos-sumar, .checkout-sumar .card {
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px;
}
.cos-sumar h2, .checkout-sumar h2 { margin: 0 0 12px; font-size: 17px; }

.nota-transport { background: #fff8e6; border: 1px solid #f2dfae; border-radius: var(--radius); padding: 9px 12px; font-size: 14px; margin: 0 0 12px; }
.nota-transport--ok { background: #eaf7e2; border-color: #bfe3a8; }
/* modificat de Claude in 02.08.2026 22:10 -- bara de progres pana la transport gratuit */
.nota-transport p { margin: 7px 0 0; }
.nota-transport--ok p { color: var(--verde-inchis); font-weight: 600; }
/* bara alba pe fundalul galben al notei: gri-ul din fereastra nu s-ar vedea */
.nota-transport .bara { background: #fff; border: 1px solid #ecdcb6; }
.nota-transport--ok .bara { background: #fff; border-color: #bfe3a8; }

.totaluri { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 0 0 14px; font-size: 15px; }
.totaluri dt { color: var(--muted); }
.totaluri dd { margin: 0; text-align: right; }
.totaluri .mare { font-size: 19px; font-weight: 700; color: var(--text); padding-top: 7px; border-top: 1px solid var(--linie); }

/* modificat de Claude in 02.08.2026 18:26 -- cod de reducere si puncte de fidelitate */
.totaluri .reducere-rand-dt, .totaluri .reducere-rand-dd { color: var(--verde-inchis); font-weight: 600; }

.reduceri { border-top: 1px solid var(--linie); margin: 0 0 14px; padding-top: 12px; display: grid; gap: 12px; }
.reduceri--asteapta { opacity: .6; pointer-events: none; }
.reducere-bloc { display: grid; gap: 6px; }
.reducere-form > label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.reducere-rand { display: flex; gap: 6px; }
/* modificat de Claude in 02.08.2026 18:55 -- caseta arata acum ca oricare alta din
   site (regula de sus); aici ramane doar cat loc ocupa langa buton */
.reducere-rand input { flex: 1 1 auto; min-width: 0; }
.btn-mic { padding: 9px 14px; font-size: 14px; border: 0; cursor: pointer; flex: 0 0 auto; }
/* modificat de Claude in 02.08.2026 23:40 -- butonul de eliminare a codului sta langa
   Aplica, dar nu-i fura ochii: alb cu scris rosu, nu inca un buton plin */
.btn-sterge {
	background: #fff; color: #b42318; border: 1px solid #f3b9b4;
	border-radius: var(--radius); font-weight: 600;
}
.btn-sterge:hover { background: #fdeceb; }

.reducere-aplicat {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin: 0; padding: 8px 10px; font-size: 14px;
	background: #eaf7e2; border: 1px solid #bfe3a8; border-radius: var(--radius);
}
/* modificat de Claude in 02.08.2026 23:58 -- `display` pus pe clasa bate [hidden]-ul
   din foaia browserului, asa ca fara codul aplicat ramanea o bara verde goala */
.reducere-aplicat[hidden] { display: none; }
.reducere-aplicat em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.reducere-nota { margin: 0; font-size: 12px; color: var(--muted); }
.reducere-mesaj { margin: 0; font-size: 13px; color: var(--verde-inchis); }
/* modificat de Claude in 02.08.2026 18:50 -- mesajul de eroare la cod/puncte arata ca o alerta, nu ca text simplu */
.reducere-mesaj--rea {
	color: #b42318; padding: 8px 10px;
	background: #fdeceb; border: 1px solid #f3b9b4; border-radius: var(--radius);
}
/* creat de Claude in 05.08.2026 -- One-Time Offer, in sumarul checkout-ului (partials/oto.php) */
.oto {
	position: relative; border: 1px solid #f2dfae; background: #fff8e6; border-radius: var(--radius);
	padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 8px;
}
.oto--acceptata { background: #eaf7e2; border-color: #bfe3a8; }
.oto--asteapta { opacity: .6; pointer-events: none; }
.oto-titlu { margin: 0; font-weight: 700; font-size: 14px; padding-right: 22px; }
.oto-corp { display: flex; gap: 10px; align-items: flex-start; }
.oto-poza { flex: 0 0 auto; }
.oto-poza img { display: block; border-radius: var(--radius); border: 1px solid var(--linie); }
.oto-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.oto-produs { display: block; font-size: 13.5px; }
.oto-descriere { margin: 0; font-size: 13px; color: var(--muted); }
.oto-preturi { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.oto-pret-special { font-size: 17px; font-weight: 700; color: var(--verde-inchis); }
.oto-pret-vechi { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.oto-transport-gratuit { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--verde-inchis); }
.oto-confirmare { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--verde-inchis); }
.oto-buton { width: 100%; border-radius: var(--radius); }
.oto-inchide {
	position: absolute; top: 8px; right: 10px; background: none; border: 0; cursor: pointer;
	font-size: 18px; line-height: 1; color: var(--muted); padding: 2px 4px;
}
.oto-inchide:hover { color: var(--text); }
.oto-mesaj { margin: 0; font-size: 13px; color: #b42318; }
.oto-mesaj[hidden] { display: none; }

/* creat de Claude in 06.08.2026 -- cadourile, in cos si checkout (partials/cadou.php) */
/* modificat de Claude in 06.08.2026 21:52 -- cadoul se alege dintr-o lista de cel mult
   trei produse: cat timp nu s-a ales, cadrul e galben ca al ofertei (e ceva de facut),
   iar dupa alegere trece pe verde, ca inainte (e ceva primit) */
.cadou {
	border: 1px solid #f2dfae; background: #fff8e6; border-radius: var(--radius);
	padding: 12px 14px; margin: 0 0 14px; display: grid; gap: 8px;
}
.cadou--ales { border-color: #bfe3a8; background: #eaf7e2; }
.cadou--asteapta { opacity: .6; pointer-events: none; }
.cadou-titlu { margin: 0; font-weight: 700; font-size: 14px; }
.cadou-nota { margin: 0; }
.cadou-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cadou-optiune {
	display: flex; gap: 10px; align-items: center;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 8px;
}
.cadou-optiune--ales { border-color: #bfe3a8; box-shadow: inset 0 0 0 1px #bfe3a8; }
.cadou-poza { flex: 0 0 auto; }
.cadou-poza img { display: block; border-radius: var(--radius); border: 1px solid var(--linie); }
.cadou-info { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.cadou-produs { display: block; font-size: 13.5px; }
.cadou-cantitate { margin: 0; font-weight: 600; color: var(--verde-inchis); }
.cadou-buton { flex: 0 0 auto; border-radius: var(--radius); }
.cadou-semn { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--verde-inchis); }
.cadou-mesaj { margin: 0; font-size: 13px; color: #b42318; }
.cadou-mesaj[hidden] { display: none; }

/* pe telefon butonul trece sub produs, pe toata latimea: langa un nume lung de produs
   n-ar mai ramane loc de apasat */
@media (max-width: 480px) {
	.cadou-optiune { flex-wrap: wrap; }
	.cadou-buton { width: 100%; }
}

.link-sters {
	background: none; border: 0; padding: 0; cursor: pointer; flex: 0 0 auto;
	font-size: 13px; color: var(--muted); text-decoration: underline;
}
.link-sters:hover { color: #b42318; }

.link-inapoi { display: block; text-align: center; margin-top: 10px; font-size: 14px; }
.gol { text-align: center; padding: 40px 20px; }

.semn-ai {
	display: inline-block; margin-left: 8px; padding: 2px 9px;
	background: #eef2ff; color: #3538cd; border-radius: 999px; font-size: 12px;
}

/* ---- checkout ---- */
.checkout { display: grid; gap: 16px; align-items: start; }
/* modificat de Claude in 03.08.2026 17:20 -- grila are acum trei bucati: campurile,
   sumarul si cardul de trimitere. Pe desktop campurile si trimiterea stau una sub
   alta in coloana din stanga, iar sumarul tine coloana din dreapta pe amandoua
   randurile -- asa are pe ce sa alunece pana la capatul paginii, nu doar cat tine
   randul campurilor. Pe mobil ramane o singura coloana, in ordinea din cod. */
@media (min-width: 960px) {
	.checkout { grid-template-columns: 1fr 350px; }
	.checkout-form    { grid-column: 1; grid-row: 1; }
	.checkout-sumar   { grid-column: 2; grid-row: 1 / span 2; }
	.checkout-trimite { grid-column: 1; grid-row: 2; }
}
.checkout-form { display: grid; gap: 16px; }
.checkout .card h2 { margin: 0 0 14px; font-size: 17px; }
/* modificat de Claude in 02.08.2026 11:57 -- sumarul urmareste derularea pe desktop.
   `sticky` statea pe cardul din <aside>, iar aside-ul are exact inaltimea cardului:
   nu ramanea nimic pe care sa alunece, deci nu se lipea niciodata. Il mutam pe
   coloana (item de grila, inalta cat tot randul).
   modificat de Claude in 03.08.2026 17:20 -- sumarul ramane in ecran la orice numar
   de produse. Pragurile de dinainte (intai cinci linii, apoi inaltimea masurata din
   assets/js/app.js) desprindeau cardul si-l lasau sa curga cu pagina, fiindca altfel
   coada lui -- totalurile si butonul -- ramanea sub marginea de jos. Acum cardul nu
   mai poate depasi fereastra: e o coloana cu inaltime marginita, in care numai lista
   de produse se strange si isi deruleaza propriile linii. Reducerile si totalurile
   raman intregi la vedere, iar butonul de trimitere s-a mutat oricum la capatul
   formularului (vezi checkout/index.php).
   Distanta fata de antet sta intr-o variabila, ca sa fie scrisa o singura data. */
.checkout-sumar { --sumar-sus: 90px; }
@media (min-width: 960px) {
	.checkout-sumar { position: sticky; top: var(--sumar-sus); }
	/* + 20px de aer sub card, ca sa nu atinga marginea de jos a ecranului */
	.checkout-sumar .card {
		display: flex; flex-direction: column;
		max-height: calc(100vh - var(--sumar-sus) - 20px);
		overflow: hidden;
	}
	/* singura bucata care se strange; `min-height: 0` fiindca altfel un copil de
	   flex nu scade sub inaltimea continutului si derularea n-ar porni niciodata */
	.checkout-sumar .mini-linii {
		flex: 0 1 auto; min-height: 0; overflow-y: auto;
		/* loc pentru bara de derulare, ca sa nu treaca peste preturile din dreapta */
		padding-right: 6px;
	}
	/* restul cardului nu se strange: reducerile si totalurile se vad intregi */
	.checkout-sumar .reduceri, .checkout-sumar .totaluri { flex: 0 0 auto; }
}
/* modificat de Claude in 03.08.2026 17:20 -- totalurile au ramas ultimele in card,
   dupa mutarea butonului in formular: fara marginea lor de jos */
.checkout-sumar .totaluri { margin-bottom: 0; }

/* creat de Claude in 03.08.2026 17:20 -- cardul de la capatul formularului: bifa de
   termeni, butonul de trimitere si intoarcerea la cos */
.checkout-trimite .termeni { margin-bottom: 14px; }

/* modificat de Claude in 02.08.2026 18:55 -- .camp e doar asezarea (eticheta deasupra
   casetei); forma casetei vine din regula comuna de sus, ca sa fie una singura in tot
   site-ul. Inainte campurile de formular aveau alt chenar si alt inel de focalizare
   decat casetele din cos sau din filtre. */
.camp { display: grid; gap: 5px; margin-bottom: 12px; }
.camp label { font-size: 13px; font-weight: 600; }
/* creat de Claude in 03.08.2026 14:40 -- randul de sub o caseta care spune ce se
   intampla cu ce se scrie in ea (acum: adresa noua intra in cont dupa comanda) */
.camp-ajutor { font-size: 12px; line-height: 1.4; margin: 0; }
.camp-ajutor[hidden] { display: none; }
.camp--scurt { max-width: 200px; }
.doua { display: grid; gap: 0 12px; }
@media (min-width: 560px) { .doua { grid-template-columns: 1fr 1fr; } }
/* modificat de Claude in 02.08.2026 20:45 -- adresa de livrare din checkout e o singura
   grila (tara / judet / localitate / cod postal / adresa, in ordinea asta in cod), fiindca
   gruparea se schimba de la o latime la alta si doua grile separate nu-si pot muta
   casetele intre ele. A inlocuit perechile .trei si .doua--adresa.
   Pe mobil: fiecare caseta pe randul ei, doar localitatea si codul postal impart un rand
   (codul postal e scurt, ar lasa jumatate de ecran gol daca ar sta singur). */
.grila-livrare { display: grid; gap: 0 12px; grid-template-columns: 1fr auto; }
.grila-livrare .camp--tara,
.grila-livrare .camp--judet,
.grila-livrare .camp--adresa { grid-column: 1 / -1; }
/* eticheta nu se rupe in doua randuri: altfel caseta codului postal ar cobori mai jos
   decat cea a localitatii si randul ar arata strambat. */
.grila-livrare .camp--scurt label { white-space: nowrap; }
/* pe mobil coloana e dictata de eticheta, deci caseta e cat scrisul din ea (size=6). */
.grila-livrare .camp--scurt input { width: auto; justify-self: start; }
/* Tableta: tara si judetul merg impreuna pe primul rand; localitatea deschide rand nou,
   ca sa ramana cu codul postal langa ea. Trei casete pe un rand abia ar incapea. */
@media (min-width: 560px) {
	.grila-livrare { grid-template-columns: 1fr 1fr; }
	.grila-livrare .camp--tara,
	.grila-livrare .camp--judet { grid-column: auto; }
	.grila-livrare .camp--oras { grid-column: 1; }
	/* modificat de Claude in 03.08.2026 11:20 -- de aici in sus coloanele sunt egale, nu
	   dictate de continut: caseta codului postal se intinde pana in marginea din dreapta
	   a coloanei, ca sa se alinieze cu celelalte casete si sa nu ramana gol la dreapta. */
	.grila-livrare .camp--scurt { max-width: none; }
	.grila-livrare .camp--scurt input { width: 100%; justify-self: stretch; }
}
/* Desktop: tara / judet / localitate pe primul rand, iar codul postal trece pe al doilea,
   la dreapta strazii - strada are nevoie de tot spatiul, codul postal de o caseta scurta. */
@media (min-width: 860px) {
	.grila-livrare { grid-template-columns: 1fr 1fr 1fr; }
	.grila-livrare .camp--oras { grid-column: auto; }
	.grila-livrare .camp--adresa { grid-column: 1 / 3; grid-row: 2; }
	.grila-livrare .camp--scurt { grid-column: 3; grid-row: 2; max-width: none; }
}
/* creat de Claude in 11.08.2026
   Lista de sugestii a localitatii (vezi assets/js/app.js si partials/oras.php):
   inlocuieste <datalist>, care nu se deschide la fel pe orice telefon -- pe Safari
   nici nu apare. Desenata sub caseta, in acelasi loc pe orice browser. */
.camp--oras span[data-oras] { position: relative; display: block; }
.oras-lista {
	position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
	margin: 0; padding: 4px; list-style: none;
	background: #fff; border: 1px solid var(--chenar); border-radius: var(--radius);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
	max-height: 260px; overflow-y: auto;
}
.oras-lista[hidden] { display: none; }
.oras-opt { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.oras-opt:hover, .oras-opt--activa { background: var(--fundal); }
.oras-nimic, .oras-mai { padding: 8px 10px; font-size: 13px; color: var(--muted); }
/* creat de Claude in 02.08.2026 21:50
   Adresa din cont, stransa intr-un rand: cine comanda unde comanda de obicei citeste
   o linie in loc sa treaca prin sase casete completate. Clicul pe rand desface
   formularul (si caseta cu celelalte adrese salvate), din <details>, deci fara
   JavaScript. Randul intreg e tinta clicului, nu doar cuvantul „Schimba” -- pe
   telefon e singurul lucru destul de mare ca sa se nimereasca din prima. */
.adresa-cont { border: 1px solid var(--linie); border-radius: var(--radius); margin-bottom: 14px; }
.adresa-cont > summary {
	display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
	padding: 11px 13px; cursor: pointer; list-style: none;
}
/* sageata implicita a browserului ar sta lipita de eticheta si ar strica randul */
.adresa-cont > summary::-webkit-details-marker { display: none; }
.adresa-cont > summary:hover { background: #fafafa; }
.adresa-cont-eticheta { font-size: 12px; font-weight: 600; color: var(--muted); }
.adresa-cont-text { font-size: 14px; line-height: 1.4; }
/* linkul sta pe amandoua randurile, la dreapta, ca sa ramana la mijlocul lor */
.adresa-cont-link {
	grid-column: 2; grid-row: 1 / 3; align-self: center;
	font-size: 13px; font-weight: 600; color: var(--verde-inchis); text-decoration: underline;
}
.adresa-cont .doar-deschis,
.adresa-cont[open] .doar-inchis { display: none; }
.adresa-cont[open] .doar-deschis { display: inline; }
.adresa-cont-corp { padding: 13px 13px 2px; border-top: 1px solid var(--linie); }
/* strans, randul e tot cardul; desfacut, campurile din el n-au nevoie de spatiu dublu */
.adresa-cont-corp .grila-livrare .camp:last-child { margin-bottom: 10px; }

/* modificat de Claude in 02.08.2026 23:20 -- mesajul de eroare era un rand de text
   rosu de 13px sub caseta: intr-un formular lung, cu etichete si randuri de ajutor
   de aceeasi marime, trecea neobservat si parea ca trimiterea n-a facut nimic. Acum
   e o fasie rosie cu semn de exclamare, iar caseta gresita se coloreaza ea insasi,
   ca sa se vada de departe care e, fara sa citesti mesajul.
   `:has` in loc de o clasa pe .camp: mesajul se scrie in ~40 de locuri (checkout,
   cont, contact, recenzii), n-are rost sa se schimbe fiecare. Unde `:has` lipseste,
   ramane doar fasia -- mesajul se vede oricum. */
/* modificat de Claude in 02.08.2026 -- fasia se lipea de ce urma dupa ea (la termeni,
   fix de butonul verde de trimitere): are nevoie de aer si dedesubt, nu doar deasupra. */
.eroare {
	display: flex; align-items: flex-start; gap: 7px;
	margin: 6px 0; padding: 7px 10px;
	background: #fdeceb; border-left: 3px solid #d92d20;
	border-radius: 0 var(--radius) var(--radius) 0;
	color: #912018; font-size: 13px; font-weight: 600; line-height: 1.35;
}
.eroare::before {
	content: "!"; flex: 0 0 auto;
	display: grid; place-items: center; width: 16px; height: 16px; margin-top: 1px;
	background: #d92d20; color: #fff; border-radius: 50%;
	font-size: 11px; font-weight: 700; line-height: 1;
}
.camp:has(> .eroare) label { color: #912018; }
.camp:has(> .eroare) input,
.camp:has(> .eroare) select,
.camp:has(> .eroare) textarea { border-color: #d92d20; background-color: #fffbfa; }
.camp:has(> .eroare) input:focus,
.camp:has(> .eroare) select:focus,
.camp:has(> .eroare) textarea:focus { border-color: #d92d20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .22); }

.alerta-form {
	display: flex; align-items: flex-start; gap: 10px;
	background: #fdeceb; border: 1px solid #f5c2c0; border-left: 5px solid #d92d20;
	border-radius: var(--radius); padding: 13px 16px; margin-bottom: 14px;
	color: #912018; font-weight: 600;
}
.alerta-form::before {
	content: "!"; flex: 0 0 auto;
	display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
	background: #d92d20; color: #fff; border-radius: 50%;
	font-size: 13px; font-weight: 700; line-height: 1;
}

/* creat de Claude in 02.08.2026 23:20 -- prima eroare, cea la care sare pagina, mai
   pulseaza de doua ori dupa ce ajunge in dreptul ochilor: cine tocmai a apasat butonul
   se uita in alta parte a ecranului. Doar un inel care creste si dispare, fara sarituri,
   si deloc pentru cine si-a cerut mai putina miscare. */
@keyframes puls-eroare {
	0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
	20%      { box-shadow: 0 0 0 7px rgba(217, 45, 32, .3); }
}
.eroare--atentie, .alerta-form.eroare--atentie { animation: puls-eroare 1.1s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
	.eroare--atentie, .alerta-form.eroare--atentie { animation: none; }
}

/* modificat de Claude in 02.08.2026 23:05 -- cand o casuta obligatorie e goala,
   browserul sare singur la ea si isi scrie balonul deasupra; fara marginea de aici
   ar duce-o fix sub antetul lipit de marginea de sus, adica nevazuta. Erorile de la
   server sunt aduse de JS in mijlocul ecranului (vezi assets/js/app.js). */
.checkout input, .checkout select, .checkout textarea { scroll-margin-top: 100px; scroll-margin-bottom: 30px; }
.checkout .eroare, .alerta-form { scroll-margin-top: 100px; }

.optiuni { display: grid; gap: 8px; margin-bottom: 14px; }
.optiuni--inline { grid-template-columns: 1fr 1fr; }
.optiune {
	display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
	border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px; cursor: pointer;
}
/* modificat de Claude in 03.08.2026 13:00 -- `display` pus pe clasa bate regula de
   browser pentru [hidden], deci o repetam: altfel plata ascunsa de checkout (rambursul,
   la un automat easybox fara terminal) ar ramane pe ecran */
.optiune[hidden] { display: none; }
.optiune:has(input:checked) { border-color: var(--verde); background: #f6fbf1; }
.optiune b { display: block; font-size: 15px; font-weight: 600; }
.optiune em { font-style: normal; font-size: 13px; color: var(--muted); }
/* creat de Claude in 07.08.2026 -- ramburs sub pragul de card obligatoriu ramane vizibil
   in lista (vezi App\Core\Plata::pentruCheckout), dar nu se poate bifa */
.optiune--dezactivata { cursor: not-allowed; background: #f7f7f7; }
.optiune--dezactivata b, .optiune--dezactivata i { opacity: .5; }
.optiune-motiv { display: block; color: var(--rosu, #c0392b); }
/* modificat de Claude in 02.08.2026 23:35 -- coloana din dreapta poate duce acum si
   siglele cardurilor pe langa taxa, deci e un rand, nu un simplu text */
.optiune i { display: flex; align-items: center; gap: 8px; font-style: normal; font-weight: 600; white-space: nowrap; }
.optiune--mica { grid-template-columns: auto 1fr; }

/* creat de Claude in 02.08.2026 23:35
   Siglele cardurilor de la plata online (vezi partials/logo-carduri.php). Pe telefon
   se micsoreaza, ca sa nu fure latimea numelui metodei. */
.logo-carduri { display: flex; align-items: center; gap: 4px; }
.logo-card { display: block; height: 22px; width: auto; }
@media (max-width: 419.98px) { .logo-card { height: 18px; } }

/* creat de Claude in 03.08.2026 14:10
   Ce mai cere metoda de livrare sta lipit sub ea, nu in alt card: adresa sub curier,
   automatul sub easybox. Panoul continua chenarul verde al metodei bifate, fara linie
   dubla intre ele, ca sa se citeasca drept o singura bucata -- alegerea si urmarea ei.
   Locul gol de sub metodele nebifate nu ocupa nimic (nici randul grilei). */
/* marginea negativa anuleaza spatiul grilei: panoul se lipeste de metoda de deasupra */
.optiune-slot { margin-top: -8px; }
/* gol, sau doar cu un panou ascuns in el, locul nu ocupa nimic */
.optiune-slot:not(:has(> :not([hidden]))) { display: none; }
.panou-livrare[hidden] { display: none; }
.panou-livrare {
	border: 1px solid var(--verde); border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
	/* 1px jos: spatiul de acolo il da marginea ultimei casete (.camp), nu panoul */
	padding: 13px 13px 1px;
}
/* metoda bifata isi pierde colturile de jos cand are un panou sub ea */
.optiune:has(+ .optiune-slot > :not([hidden])) {
	border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* adresa din cont e un rand, nu un formular: atunci panoul e chiar randul, fara
   chenar in chenar si fara spatiu in jurul lui */
.panou-livrare:has(> .adresa-cont) { padding: 0; }
.panou-livrare > .adresa-cont { border: 0; margin: 0; }
/* panoul punctelor de ridicare se termina cu un buton, nu cu o caseta care isi aduce
   marginea, deci spatiul de jos il da panoul */
/* modificat de Claude in 03.08.2026 10:26 -- clasa e `.lockere` de la redenumirea
   panoului (partials/lockere.php); `.easybox` nu mai prindea nimic, asa ca butonul
   ramanea lipit de chenarul de jos */
.panou-livrare.lockere { padding-bottom: 13px; }

/* panourile care asteapta sa fie cerute de o metoda: sunt in pagina (ca sa nu se
   piarda ce e scris in ele), dar nu se vad si nu lasa loc gol (vezi app.js) */
.livrare-parcare:not(:has(> :not([hidden]))) { display: none; }

.mini-linii { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.mini-linii li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.mini-linii li > span em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.mini-linii img { border: 1px solid var(--linie); border-radius: 6px; object-fit: contain; }

/* modificat de Claude in 02.08.2026 18:55 -- bifa e aliniata la prima linie de text,
   nu la marginea de sus a blocului: la 18px si fara marginile browserului statea cu
   un pic mai sus decat randul de langa ea */
.termeni { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 14px; margin-bottom: 12px; }
.termeni input { margin-top: 2px; }

/* modificat de Claude in 02.08.2026 21:30 -- bifa din formular („Doresc date de
   facturare diferite”): aceeasi asezare ca la termeni, dar cu tot randul de apasat
   si cu un pic mai mult aer dedesubt, fiindca sub ea se deschid casete. */
.bifa { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; font-size: 14px; margin-bottom: 14px; cursor: pointer; }
.bifa input { margin-top: 2px; }

.multumim { text-align: center; padding: 32px 20px; }
.multumim h1 { margin: 0 0 8px; }
.multumim .mare { font-size: 17px; }

/* modificat de Claude in 01.08.2026 21:45 */
/* ---- favorite ----
   Inima sta in coltul cardului, peste imagine, si e o tinta de minim 34px: pe
   telefon un buton mai mic decat degetul se apasa gresit. Conturul alb din
   filtru o tine vizibila si peste ambalajele deschise la culoare. */
.inima {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	display: grid; place-items: center; width: 34px; height: 34px;
	padding: 0; border: 0; border-radius: 999px; cursor: pointer;
	background: rgba(255,255,255,.86); color: var(--muted);
	transition: color .15s, transform .15s;
}
.inima svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.inima:hover { color: #d92d20; }
.inima--plina { color: #d92d20; }
.inima--plina svg { fill: currentColor; }
.inima--bate { transform: scale(1.18); }

/* varianta din pagina de produs: buton cu text, sub "Adauga in cos" */
.produs-favorite { margin-top: 10px; }
.inima--mare {
	position: static; width: 100%; height: auto; gap: 8px;
	grid-auto-flow: column; justify-content: center;
	padding: 11px 14px; font: inherit; font-size: 14px;
	background: #fff; border: 1px solid var(--linie);
}
.inima--mare:hover { border-color: #f0b8b4; }
.inima--mare.inima--plina { border-color: #f0b8b4; background: #fef3f2; }

/* creat de Claude in 16.08.2026 -- scurtatura catre fisa din procash, vizibila doar
   cand e cineva logat in admin (vezi views/product/show.php). Conturul intrerupt si
   litera mai mica o tin deoparte de butoanele cumparatorului: e o unealta de lucru
   asezata langa ele, nu inca o actiune din magazin. */
.produs-admin { margin-top: 10px; }
.produs-admin a {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	padding: 9px 14px; font-size: 13px; color: var(--muted); text-decoration: none;
	background: #fff; border: 1px dashed var(--chenar); border-radius: var(--radius);
}
.produs-admin a:hover { color: var(--text); border-color: var(--chenar-sus); }
.produs-admin svg {
	width: 16px; height: 16px; fill: none; stroke: currentColor;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.prod { position: relative; }
.link-intreaba { font-size: 13px; }

.grila--favorite .prod-info { gap: 8px; }
.favorite-nr { margin: -6px 0 14px; }
.favorite-jos { margin-top: 18px; }

/* ---- solicitare informatii ---- */
.solicitare {
	margin-top: 14px; background: #fff;
	border: 1px solid var(--linie); border-radius: var(--radius);
}
.solicitare > summary {
	display: flex; align-items: center; gap: 9px; padding: 13px 14px;
	font-size: 14px; font-weight: 600; cursor: pointer; list-style: none;
}
.solicitare > summary::-webkit-details-marker { display: none; }
.solicitare > summary::after {
	content: ''; margin-left: auto; width: 8px; height: 8px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease;
}
.solicitare[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.solicitare > summary svg {
	width: 19px; height: 19px; flex: 0 0 auto; color: var(--verde-inchis);
	fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round;
}
.solicitare > summary:hover { color: var(--verde-inchis); }

.form-info { padding: 0 14px 14px; }
.form-info .btn-mare { margin-top: 4px; }
.form-info-produs { font-size: 13px; margin: 0 0 12px; }
.form-info-nota { margin: 8px 0 0; text-align: center; }

/* campul-capcana: ascuns pentru oameni, la vedere pentru roboti.
   `display:none` e prea evident, asa ca il scoatem din ecran. */
.capcana { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-info-raspuns {
	margin: 10px 0 0; padding: 11px 14px; border-radius: var(--radius);
	background: #eaf7e2; border: 1px solid #bfe3a8; font-size: 14px;
}
.form-info-raspuns--rea { background: #fdeceb; border-color: #f5c2c0; }

/* pagina proprie de solicitare */
.info-pagina { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) { .info-pagina { grid-template-columns: 1fr 300px; } }
.info-pagina .form-info { padding: 0; }
.info-produs-rand { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; color: var(--text); }
.info-produs-rand img { width: 72px; height: 72px; object-fit: contain; }
.info-produs-rand em { display: block; font-style: normal; color: var(--verde-inchis); font-weight: 700; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
	.inima, .solicitare > summary::after { transition: none; }
}

/* ---- anunt scurt ---- */
/* Fiind fixat cu left:50%, spatiul in care se poate lati e doar jumatatea din
   dreapta a ecranului -- pe telefon vreo 180px, adica textul se rupe pe doua
   randuri. `width: max-content` il tine pe un singur rand, iar max-width il
   opreste inainte sa iasa din ecran la mesajele lungi. */
.anunt {
	position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px);
	width: max-content; min-width: min(90vw, 380px); max-width: min(94vw, 520px);
	background: #1f2328; color: #fff; padding: 13px 22px; border-radius: 999px;
	font-size: 14px; line-height: 1.35; text-align: center;
	/* modificat de Claude in 02.08.2026 10:51 -- peste fereastra de cos (70),
	   ca refuzul unei adaugari facute din ea sa fie totusi vizibil */
	opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 80;
}
.anunt.vizibil { opacity: 1; transform: translate(-50%, 0); }

/* deasupra barei de jos, nu peste ea */
@media (max-width: 719.98px) {
	.anunt { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- fereastra "adaugat in cos" ---- */
/* modificat de Claude in 02.08.2026 11:38 */
/* Casuta sta centrata pe ecran la orice latime; pe telefon lasa doar 5px de-o
   parte si de alta, cat sa se vada ca e o fereastra peste pagina, nu pagina
   insasi. Panoul isi duce singur derularea (max-height + overflow), altfel pe
   ecran mic recomandarile ar cadea sub marginea de jos. */
body.cu-fereastra { overflow: hidden; }

.cos-pop {
	position: fixed; inset: 0; z-index: 70;
	display: flex; align-items: center; justify-content: center; padding: 5px;
}
.cos-pop[hidden] { display: none; }

.cos-pop-fundal {
	position: absolute; inset: 0; background: rgba(15, 23, 20, .5);
	opacity: 0; transition: opacity .22s;
}
.cos-pop.vizibil .cos-pop-fundal { opacity: 1; }

.cos-pop-panou {
	position: relative; width: 100%; max-height: calc(100vh - 10px); overflow-y: auto;
	background: #fff; border-radius: 14px; padding: 18px 14px 20px;
	transform: translateY(24px); opacity: 0; transition: transform .22s, opacity .22s;
}
.cos-pop.vizibil .cos-pop-panou { transform: none; opacity: 1; }

.cos-pop-x {
	position: absolute; top: 8px; right: 8px; width: 36px; height: 36px;
	border: 0; background: none; color: var(--muted); font-size: 26px; line-height: 1;
	cursor: pointer; border-radius: 50%;
}
.cos-pop-x:hover { background: #f1f3f1; color: var(--text); }

.cos-pop-titlu { margin: 0 30px 14px 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.cos-pop-bifa {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
	background: var(--verde); color: #fff; font-size: 14px; font-weight: 700;
}

.cos-pop-linie { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; }
/* `display` pus pe clasa bate regula de browser pentru [hidden], deci o repetam */
.cos-pop-linie[hidden], .cos-pop-transport[hidden], .cos-pop-reco[hidden] { display: none; }
.cos-pop-poza { width: 64px; height: 64px; object-fit: contain; }
.cos-pop-nume { color: var(--text); font-size: 14px; line-height: 1.35; font-weight: 500; }
.cos-pop-cant { margin: 4px 0 0; font-size: 14px; color: var(--muted); }

/* bara de transport gratuit: acelasi mesaj ca in cos, ca sa nu para alt calcul */
.cos-pop-transport { margin: 14px 0 0; }
.cos-pop-transport p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.cos-pop-transport--ok p { color: var(--verde-inchis); font-weight: 600; }
/* modificat de Claude in 02.08.2026 22:10 -- aceeasi bara si in sumarul cosului */
.cos-pop-bara, .nota-transport .bara { display: block; height: 8px; box-sizing: border-box; border-radius: 999px; background: #eceeec; overflow: hidden; }
.cos-pop-bara i, .nota-transport .bara i { display: block; height: 100%; width: 0; background: var(--verde); transition: width .3s; }

.cos-pop-sumar { margin: 12px 0 14px; font-size: 14px; color: var(--muted); }
.cos-pop-sumar b { color: var(--text); }

/* modificat de Claude in 02.08.2026 11:24 */
/* Trei butoane unul sub altul mancau jumatate de ecran de telefon si impingeau
   recomandarile afara. Cele doua secundare stau alaturi pe un rand -- cu eticheta
   scurta, ca sa nu se rupa pe doua randuri -- iar butonul de comanda ramane lat
   dedesubt: e singurul pe care vrem sa-l vada primul. */
.cos-pop-actiuni { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
/* padding scris intreg: altfel butonul alb ramane cu 1px mai scund decat cel verde */
.cos-pop-actiuni .btn { text-align: center; padding: 11px 8px; white-space: nowrap; }
.cos-pop-checkout { grid-column: 1 / -1; }

.txt-scurt { display: none; }
@media (max-width: 719.98px) {
	.txt-lung  { display: none; }
	.txt-scurt { display: inline; }
}
.btn-alb {
	background: #fff; color: var(--text); border: 1px solid var(--linie); cursor: pointer;
	font: inherit; font-weight: 600; padding: 10px 20px;
}
.btn-alb:hover { background: #f4f6f4; color: var(--text); }

/* modificat de Claude in 05.08.2026 00:18 */
/* ---- popup poza produs: galerie cu sageti + zoom pe toata poza ---- */
/* Fundal aproape opac -- aici scopul e sa se vada poza, nu pagina din spate --
   si acelasi tipar ca la .cos-pop: fundal + panou, fiecare cu tranzitia lui. */
.foto-pop {
	position: fixed; inset: 0; z-index: 75;
	display: flex; align-items: center; justify-content: center; padding: 20px;
}
.foto-pop[hidden] { display: none; }

.foto-pop-fundal { position: absolute; inset: 0; background: rgba(10, 14, 12, .9); opacity: 0; transition: opacity .22s; }
.foto-pop.vizibil .foto-pop-fundal { opacity: 1; }

.foto-pop-panou {
	position: relative; transform: scale(.96); opacity: 0; transition: transform .22s, opacity .22s;
}
.foto-pop.vizibil .foto-pop-panou { transform: none; opacity: 1; }

.foto-pop-img-cont { position: relative; overflow: hidden; line-height: 0; }
.foto-pop-img {
	display: block; max-width: 92vw; max-height: 88vh; width: auto; height: auto;
	user-select: none; cursor: zoom-in; transition: transform .18s ease;
}
/* marit: clic pe poza -- centrul marimii (transform-origin) e mutat din JS dupa
   cursor/deget, ca sa se poata vedea orice colt al pozei, nu doar mijlocul */
.foto-pop-img-cont.marit .foto-pop-img { transform: scale(2.4); cursor: zoom-out; }

.foto-pop-x {
	position: absolute; top: -42px; right: 0; width: 36px; height: 36px;
	border: 0; background: none; color: #fff; font-size: 28px; line-height: 1;
	cursor: pointer; border-radius: 50%;
}
.foto-pop-x:hover { background: rgba(255, 255, 255, .15); }

/* sageti stanga/dreapta: aceleasi ca la galeria de pe /magazine -- ancorate de
   marginile ferestrei (nu langa poza), ca sa nu impinga popup-ul in lateral pe
   ecrane inguste; ascunse din JS cand produsul are o singura poza */
.foto-pop-sageata {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
	width: 44px; height: 44px; font-size: 30px; line-height: 1; cursor: pointer;
	background: rgba(255, 255, 255, .14); color: #fff; border: 0; border-radius: 50%;
}
.foto-pop-sageata--stanga { left: 16px; }
.foto-pop-sageata--dreapta { right: 16px; }
.foto-pop-sageata:hover { background: rgba(255, 255, 255, .28); }
.foto-pop-sageata[hidden] { display: none; }

/* Recomandarile stau pe o banda care se trage cu degetul: pe telefon incap doua
   carduri si jumatate, iar al treilea taiat spune ca lista continua. */
.cos-pop-reco { margin: 18px 0 0; border-top: 1px solid var(--linie); padding-top: 14px; }
.cos-pop-reco h3 { margin: 0 0 10px; font-size: 15px; }
.cos-pop-lista {
	display: grid; grid-auto-flow: column; grid-auto-columns: 43%; gap: 10px;
	overflow-x: auto; scroll-snap-type: x mandatory;
	margin-inline: -14px; padding-inline: 14px; padding-bottom: 4px;
	scrollbar-width: thin;
}
.cos-pop-card {
	scroll-snap-align: start;
	background: #fff; border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.cos-pop-card-img { display: block; text-align: center; }
.cos-pop-card-img img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.cos-pop-card-nume {
	color: var(--text); font-size: 12.5px; line-height: 1.3; flex: 1;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cos-pop-card-pret { margin: 0; font-size: 14px; }
.cos-pop-card-pret b { font-size: 15px; }
.cos-pop-card-pret s { color: var(--muted); font-size: 12px; margin-left: 5px; }

@media (min-width: 720px) {
	.cos-pop { align-items: center; padding: 20px; }
	.cos-pop-panou {
		max-width: 760px; border-radius: var(--radius); padding: 22px 22px 24px;
		transform: translateY(10px) scale(.985);
	}
	.cos-pop-titlu { font-size: 18px; }
	/* modificat de Claude in 02.08.2026 11:24 -- pe ecran lat incap toate trei pe un rand */
	.cos-pop-actiuni { grid-template-columns: repeat(3, 1fr); }
	.cos-pop-checkout { grid-column: auto; }
	.cos-pop-lista {
		grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto;
		overflow: visible; margin-inline: 0; padding-inline: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cos-pop-fundal, .cos-pop-panou, .cos-pop-bara i, .nota-transport .bara i { transition: none; }
}

/* ---- subsol ---- */
.site-foot { background: var(--subsol); color: #fff; margin-top: 32px; font-size: 14px; }
.foot-grila { display: grid; gap: 0; padding-block: 22px; }
.foot-grila h3 { font-size: 14px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .04em; }
.foot-grila p { margin: 0 0 10px; line-height: 1.6; }
.foot-grila ul { list-style: none; margin: 0; padding: 0; }
.foot-grila li { padding: 4px 0; }
.foot-grila a { color: #fff; }
.foot-grila a:hover { color: var(--verde-clar); }
.site-foot .muted { color: rgba(255,255,255,.62); }

/* Grupurile se pliaza pe telefon. Comutatorul e un checkbox ascuns langa titlu:
   fara JS, si ramane deschis daca utilizatorul da inapoi in pagina. */
.foot-marca { padding-bottom: 18px; }
.foot-logo img { display: block; height: 38px; width: auto; margin-bottom: 12px; }

/* modificat de Claude in 01.08.2026 20:48 */
/* Social media: ce retele se vad se decide din Setari > Social media, deci numarul
   de pictograme variaza -- randul se rupe singur cand nu mai incap. */
.foot-social { margin: 16px 0 4px; }
.foot-social h4 {
	font-size: 13px; font-weight: 600; margin: 0 0 8px;
	text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.72);
}
.foot-social ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.foot-social li { padding: 0; }
.foot-social a {
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,.22);
	transition: background .18s ease, border-color .18s ease;
}
.foot-social a:hover { background: rgba(255,255,255,.12); border-color: var(--verde-clar); }
.ico-social { display: block; width: 20px; height: 20px; }

/* modificat de Claude in 02.08.2026 04:15 */
/* "Date comerciale": text, nu linkuri, deci se stinge ca restul textului marunt. */
.foot-firma { color: rgba(255,255,255,.62); }
.foot-firma b { color: #fff; font-weight: 600; }

.foot-comuta { position: absolute; opacity: 0; pointer-events: none; }
.foot-grup { border-top: 1px solid rgba(255,255,255,.13); }
.foot-grup h3 { margin: 0; }
.foot-grup h3 label {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 0; cursor: pointer;
}
.foot-grup h3 label::after {
	content: ''; width: 9px; height: 9px; margin-right: 4px;
	border-right: 2px solid rgba(255,255,255,.6); border-bottom: 2px solid rgba(255,255,255,.6);
	transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.foot-comuta:checked ~ h3 label::after { transform: rotate(-135deg) translateY(-2px); }
.foot-continut { display: none; padding-bottom: 14px; }
.foot-comuta:checked ~ .foot-continut { display: block; }

@media (min-width: 700px) {
	.foot-grila { grid-template-columns: repeat(2, 1fr); gap: 24px; padding-block: 28px; }
	/* pe ecran mare nu mai are rost plierea: totul e desfasurat si titlul redevine titlu */
	.foot-grup { border-top: 0; }
	.foot-grup h3 label { padding: 0; cursor: default; pointer-events: none; }
	.foot-grup h3 label::after { display: none; }
	.foot-continut { display: block; padding-bottom: 0; }
}
@media (min-width: 1000px) { .foot-grila { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.foot-jos { border-top: 1px solid rgba(255,255,255,.13); font-size: 13px; }
.foot-jos .wrap { display: flex; justify-content: space-between; gap: 10px; padding-block: 14px; flex-wrap: wrap; }

/* modificat de Claude in 01.08.2026 21:15 */
/* Linkurile catre subpaginile unei pagini de continut, la finalul textului. */
.pagina-copii { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linie); }
.pagina-copii b { display: block; font-size: 14px; margin-bottom: 8px; }
.pagina-copii ul { margin: 0; padding-left: 18px; }
.pagina-copii li { margin-bottom: 4px; }

/* modificat de Claude in 01.08.2026 21:19 */
/* ---- blocuri pentru paginile de continut ----
   Se folosesc in HTML-ul scris in Continut > Pagini (prima pagina care le foloseste:
   Franciza). Nu sunt scopate pe .articol-corp: aceleasi blocuri trebuie sa arate la
   fel oriunde ar fi lipit textul, si in pagina de articol. Tipografia de baza (h2, p,
   img) vine din .articol-corp, aici stau doar blocurile. */
.cms-lead { font-size: 18px; line-height: 1.55; }
.cms-nota { font-size: 14px; color: var(--muted); }
.cms-foto-cap { margin: 0 0 18px; }
.cms-foto-cap img { display: block; width: 100%; }

.cms-lista { margin: 0 0 14px; padding-left: 20px; }
.cms-lista li { margin-bottom: 7px; }

/* Cifrele care conteaza pentru cineva care cantareste o investitie: mari, deodata,
   fara sa le caute in text. Doua pe rand pe telefon, patru pe ecran mare. */
.cms-cifre { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin: 20px 0; }
.cms-cifre div {
	background: var(--fundal); border: 1px solid var(--linie); border-radius: var(--radius);
	padding: 14px 10px; text-align: center;
}
.cms-cifre b { display: block; font-size: 23px; line-height: 1.2; color: var(--verde-inchis); }
.cms-cifre span { font-size: 13px; color: var(--muted); }

/* Film 16:9 care se strange cu pagina. Raportul e tinut de ::before, nu de o
   inaltime fixa, ca sa nu sara textul de sub el la incarcare. */
.cms-video { position: relative; margin: 20px 0; border-radius: var(--radius); overflow: hidden; background: #000; }
.cms-video::before { content: ''; display: block; padding-top: 56.25%; }
.cms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cms-carduri { display: grid; gap: 12px; margin: 16px 0; }
.cms-card { background: var(--fundal); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px; }
.cms-card h3 { margin: 0 0 6px; font-size: 16px; }
.cms-card p { margin: 0; font-size: 14.5px; }

.cms-galerie { display: grid; gap: 12px; margin: 20px 0; }
.cms-galerie figure { margin: 0; }
.cms-galerie img { display: block; width: 100%; }
.cms-galerie figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }

.cms-caseta {
	background: var(--fundal); border: 1px solid var(--linie); border-left: 3px solid var(--verde);
	border-radius: var(--radius); padding: 14px 16px; margin: 18px 0;
}
.cms-caseta p:last-child { margin-bottom: 0; }

.cms-cta { background: var(--antet); color: #fff; border-radius: var(--radius); padding: 20px 18px; margin: 26px 0 6px; }
.cms-cta h2 { margin: 0 0 8px; color: #fff; font-size: 20px; }
.cms-cta p { color: rgba(255,255,255,.85); }
.cms-butoane { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.btn--gol { background: transparent; border: 1px solid rgba(255,255,255,.5); }
.btn--gol:hover { background: rgba(255,255,255,.14); }

@media (min-width: 700px) {
	.cms-cifre { grid-template-columns: repeat(4, 1fr); }
	.cms-carduri { grid-template-columns: repeat(2, 1fr); }
	.cms-galerie { grid-template-columns: repeat(2, 1fr); }
	.cms-cta { display: flex; align-items: center; gap: 26px; padding: 24px 26px; }
	.cms-cta > div { flex: 1; }
	.cms-cta p:last-child { margin-bottom: 0; }
}

/* creat de Claude in 05.08.2026 */
/* ---- intrebari frecvente (acordeon) ----
   Un <details> per intrebare, fara JS -- acelasi mecanism ca .solicitare si .rec-scrie
   (app.css, langa formularul de intrebari si recenzii). Fiecare .cms-faq isi numeroteaza
   singur intrebarile de la 1 (counter-reset), asa ca o categorie noua nu cere renumerotare
   manuala cand se adauga sau se sterge o intrebare. */
.cms-faq { counter-reset: cms-faq-item; margin: 4px 0 20px; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.cms-faq-item { counter-increment: cms-faq-item; border-bottom: 1px solid var(--linie); }
.cms-faq-item:last-child { border-bottom: 0; }
.cms-faq-item > summary {
	display: flex; align-items: baseline; gap: 8px; padding: 13px 34px 13px 16px;
	font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; position: relative;
}
.cms-faq-item > summary::-webkit-details-marker { display: none; }
.cms-faq-item > summary::before { content: counter(cms-faq-item) '.'; color: var(--verde-inchis); flex: 0 0 auto; }
.cms-faq-item > summary:hover { color: var(--verde-inchis); }
.cms-faq-item > summary::after {
	content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: translateY(-65%) rotate(45deg); transition: transform .18s ease;
}
.cms-faq-item[open] > summary::after { transform: translateY(-35%) rotate(-135deg); }
.cms-faq-raspuns { padding: 0 16px 16px 34px; }
.cms-faq-raspuns p { margin: 0 0 10px; }
.cms-faq-raspuns p:last-child { margin-bottom: 0; }
.cms-faq-raspuns ul { margin: 0; padding-left: 20px; }
.cms-faq-raspuns li { margin-bottom: 7px; }

@media (prefers-reduced-motion: reduce) {
	.cms-faq-item > summary::after { transition: none; }
}


/* modificat de Claude in 02.08.2026 12:20 */
/* ---- stele si recenzii ----
   Stelele sunt SVG desenat in partials/stele.php: doua straturi identice, cel
   galben taiat la procentul notei. Asa iese si 4,3 stele, fara pictograme de
   jumatati si fara nicio cerere in plus catre server. */
.stele { position: relative; display: inline-block; vertical-align: middle; line-height: 1; white-space: nowrap; letter-spacing: 1px; }
.stele-gol { color: #d8dbdf; }
.stele-plin { position: absolute; left: 0; top: 0; overflow: hidden; color: #f6a609; }

/* nota de sub titlul produsului si cea din cardul din grila */
.produs-nota { margin: 0 0 8px; font-size: 14px; }
.produs-nota a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.produs-nota a:hover { text-decoration: none; }
.produs-nota b { font-weight: 700; }
.prod-nota { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; margin-bottom: 4px; color: var(--text); }

/* Antetul e lipit sus, deci o ancora simpla ar duce sectiunea sub el. */
.recenzii { scroll-margin-top: 90px; }

.rec-sumar { display: grid; gap: 14px; }
.rec-nota { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-nota b { font-size: 30px; line-height: 1; }
.rec-bare { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-width: 420px; }
.rec-bare li { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 8px; font-size: 13px; }
.rec-steluta { color: #f6a609; margin-left: 2px; }
.rec-bara { background: var(--fundal); border: 1px solid var(--linie); border-radius: 999px; height: 9px; overflow: hidden; }
.rec-bara span { display: block; height: 100%; background: #f6a609; }
.rec-bara-cat { text-align: right; color: var(--muted); }
@media (min-width: 700px) { .rec-sumar { grid-template-columns: auto 1fr; align-items: center; gap: 30px; } }

.rec-multumim { background: #eef7e6; border: 1px solid #cfe6b8; border-radius: var(--radius); padding: 11px 14px; margin: 14px 0 0; }

/* formularul sta pliat: cine citeste recenzii nu scrie una, si invers */
.rec-scrie { border: 1px solid var(--linie); border-radius: var(--radius); margin: 16px 0 18px; }
.rec-scrie > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; font-weight: 600; cursor: pointer; list-style: none; }
.rec-scrie > summary::-webkit-details-marker { display: none; }
.rec-scrie > summary::after {
	content: ''; width: 9px; height: 9px; flex: none;
	border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
.rec-scrie[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.form-recenzie { padding: 0 14px 14px; }
.form-recenzie .btn-mare { margin-top: 4px; }
.camp-eticheta { font-size: 13px; font-weight: 600; }

/* Notele sunt cinci butoane radio scrise invers in HTML, ca `:checked ~ label`
   sa poata colora stelele din stanga celei alese. Ordinea vizuala o pune la loc
   row-reverse -- altfel ar trebui JavaScript pentru o treaba de CSS. */
.note { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.note input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.note label { cursor: pointer; padding: 0 2px; font-size: 30px; line-height: 1.1; color: #d8dbdf; transition: color .12s ease; }
.note label:hover, .note label:hover ~ label, .note input:checked ~ label { color: #f6a609; }
.note input:focus-visible + label { outline: 2px solid var(--verde); outline-offset: 2px; }

.rec-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rec { border-top: 1px solid var(--linie); padding-top: 14px; }
.rec-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.rec-rand { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.rec-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.55; }
.rec-verificat { color: var(--verde-inchis); background: #eef7e6; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 600; }
.rec-raspunsuri { list-style: none; margin: 10px 0 0; padding: 10px 0 0 14px; border-left: 3px solid var(--linie); display: grid; gap: 10px; }

/* "vezi toate": starea o tine o casuta ascunsa, deci merge si fara JavaScript.
   Ascunsa cu opacity, nu cu display:none -- asa ramane accesibila de la tastatura. */
.rec-comuta { position: absolute; opacity: 0; pointer-events: none; }
.rec--ascunsa { display: none; }
.rec-comuta:checked ~ .rec-lista .rec--ascunsa { display: block; }
.rec-comuta:checked ~ .rec-mai-multe { display: none; }
.rec-mai-multe { margin: 14px 0 0; text-align: center; }
.btn-gol {
	display: inline-block; padding: 10px 18px; cursor: pointer; font-weight: 600;
	background: #fff; color: var(--verde-inchis);
	border: 1px solid var(--verde); border-radius: var(--radius);
}
.btn-gol:hover { background: #f2f8ea; }

@media (prefers-reduced-motion: reduce) {
	.rec-scrie > summary::after, .note label { transition: none; }
}

/* creat de Claude in 05.08.2026 */
/* ---- popup peste pagina (admin > Continut > PopUps) ----
   Acelasi tipar ca .cos-pop / .foto-pop: fundal + panou, fiecare cu tranzitia lui.
   JS-ul (assets/js/popup.js) decide daca si cand se arata, dupa conditiile din
   data-conditii; CSS-ul de aici doar arata/ascunde si anima ce a decis JS-ul.

   z-index intre .foto-pop (75, galeria de poze) si .anunt (80, mesajul scurt
   "adaugat in cos"): un popup nu trebuie sa acopere confirmarea unei actiuni pe
   care omul tocmai a facut-o. */
.site-popup {
	position: fixed; inset: 0; z-index: 78;
	display: flex; align-items: center; justify-content: center; padding: 16px;
}
.site-popup[hidden] { display: none; }

.site-popup-fundal { position: absolute; inset: 0; background: rgba(15, 23, 20, .6); opacity: 0; transition: opacity .22s; }
.site-popup.vizibil .site-popup-fundal { opacity: 1; }

.site-popup-panou {
	position: relative; width: 100%; max-width: 420px;
	transform: scale(.96) translateY(10px); opacity: 0; transition: transform .22s, opacity .22s;
}
.site-popup.vizibil .site-popup-panou { transform: none; opacity: 1; }

.site-popup-x {
	position: absolute; top: -14px; right: -14px; z-index: 1;
	width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: #fff; color: var(--text); font-size: 24px; line-height: 1;
	cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.site-popup-x:hover { background: #f1f3f1; }

/* invelisul imaginii: aceeasi asezare de text ca la banner (.banner-texte), doar
   ca aici e context nou -- .popup-imagine e cine primeste "position: relative" si
   cine porneste .banner-texte din display:none in display:flex (vezi app.css,
   sectiunea "textele suprapuse peste banner"). */
.popup-imagine {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--radius); line-height: 0;
}
.popup-imagine img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.popup-imagine .banner-texte { display: flex; }

@media (prefers-reduced-motion: reduce) {
	.site-popup-fundal, .site-popup-panou { transition: none; }
}

/* ---- conditiile de aparitie, in admin ----
   Casete obisnuite de formular, una sub alta intr-o coloana ingusta: nu au nevoie
   de fereastra separata, ca la textele de banner -- sunt putine si simplu de citit
   dintr-o privire. */
.popup-conditii { display: grid; gap: 6px; font-size: 12.5px; }
.popup-conditie { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.popup-conditie span { color: var(--muted); white-space: nowrap; }
.popup-conditie select { max-width: 100%; font-size: 12.5px; }
.popup-conditie input[type="number"] { width: 52px; text-align: right; }
.popup-conditie input[type="text"] { width: 100%; font-size: 12.5px; }
.popup-conditie--bifa { gap: 6px; }
.popup-conditie--pagini { flex-direction: column; align-items: stretch; gap: 2px; }

/* modificat de Claude in 06.08.2026 14:21 */
/* ---- bannerul de cookie-uri si panoul de preferinte (App\Core\Cookies) ----
   z-index 90/91: peste orice altceva de pe pagina (bara-jos 35, sertar 40,
   cos-pop/foto-pop 70-75, popup-urile de marketing 78, anuntul scurt 80):
   acordul cerut de lege nu are voie sa fie acoperit de nimic. */
.cookie-banda {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	background: #fff; border-top: 1px solid var(--linie);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .1);
	padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.cookie-banda-text { flex: 1 1 260px; font-size: 13.5px; color: var(--text); }
.cookie-banda-actiuni { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-banda-actiuni button, .cookie-panou-actiuni button { padding: 9px 14px; font-size: 13.5px; }
/* modificat de Claude in 06.08.2026 -- .btn n-are nevoie de chenar cand sta pe un
   <a>, dar pe un <button> browserul ii pune singur unul (border-ul implicit),
   daca nimeni nu-l scoate; .btn-gol si .btn-alb au deja chenarul lor, vrut. */
.cookie-banda-actiuni .btn, .cookie-panou-actiuni .btn { border: 0; cursor: pointer; }

/* modificat de Claude in 06.08.2026 16:06 -- pe mobil butoanele stateau unul sub
   altul (column + flex: 1 1 auto), banda ocupand jumatate de ecran; le tinem pe
   un rand care se ingusteaza langa text, fara sa mai forteze latimea completa. */
@media (max-width: 719.98px) {
	.cookie-banda { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
	.cookie-banda-text { flex: 1 1 100%; font-size: 13px; }
	.cookie-banda-actiuni { flex: 1 1 auto; }
	.cookie-banda-actiuni button { flex: 1 1 auto; padding: 8px 10px; font-size: 12.5px; }
	/* peste bara flotanta de jos, nu sub ea (vezi .bara-jos, inalta de 62px) */
	body.are-bara-jos .cookie-banda { bottom: 62px; }
}

.site-popup.cookie-popup { z-index: 91; }
.cookie-panou { max-width: 460px; background: #fff; border-radius: var(--radius); padding: 22px; }
.cookie-panou h3 { margin: 0 0 12px; font-size: 18px; }
.cookie-categorie {
	display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
	border-bottom: 1px solid var(--linie); font-size: 13.5px; cursor: pointer;
}
.cookie-categorie:last-of-type { border-bottom: 0; }
.cookie-categorie input { margin-top: 3px; flex: 0 0 auto; }
.cookie-categorie b { display: block; margin-bottom: 2px; }
.cookie-panou-actiuni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cookie-panou-actiuni button { flex: 1 1 auto; }

/* creat de Claude in 15.08.2026 */
/* ---- fereastra de la prima vizita: limba + tara de livrare ----
   (vezi partials/prima-vizita.php) Acelasi tipar ca celelalte ferestre -- .site-popup
   da fundalul, panoul si animatia -- doar ca asta nu asteapta niciun declansator: se
   deschide odata cu pagina, pentru ca raspunsul ei schimba tot ce urmeaza.

   z-index 88: peste ferestrele de marketing (78) si peste anuntul scurt (80), dar sub
   bannerul de cookie-uri (90/91), care e cerut de lege si nu are voie sa fie acoperit
   de nimic -- pe prima vizita se vad amandoua. */
.prima-vizita { z-index: 88; }
.prima-vizita-panou {
	max-width: 400px; background: #fff; border-radius: var(--radius); padding: 24px;
	box-shadow: 0 14px 44px rgba(0, 0, 0, .22);
}
/* fereastra primeste focalizarea la deschidere (vezi app.js), dar ea nu e o caseta:
   inelul de focalizare ar desena un chenar in jurul intregii ferestre */
.prima-vizita-panou:focus { outline: 0; }
.prima-vizita-panou h3 { margin: 0 0 18px; font-size: 19px; text-align: center; }
.prima-vizita-form .camp { margin-bottom: 14px; }
.prima-vizita-form select { width: 100%; }
/* drapelul langa lista, ca in selectorul din antet: un <option> nu deseneaza decat text */
.prima-vizita-tara { display: flex; align-items: center; gap: 8px; }
.prima-vizita-tara .drapel {
	flex: 0 0 auto; width: 22px; height: 16px; border-radius: 2px; object-fit: cover;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.prima-vizita-tara .drapel[hidden] { display: none; }
.prima-vizita-tara select { flex: 1 1 auto; min-width: 0; }
.prima-vizita-form .btn-mare { margin-top: 4px; }

.cookie-setari-link {
	background: none; border: 0; padding: 0; font: inherit; color: inherit;
	text-decoration: underline; cursor: pointer;
}