/* ==========================================================================
   dds.css — foaia unica a variantei v2. Mobile-first.
   Ordinea: variabile, reset, elemente de baza, componente in ordinea in care
   apar in pagina, apoi punctele de rupere: 600, 900, 1200. Fara altele.
   Buget: sub 100 KB necomprimat (ridicat de la 40 pe 5 septembrie 2026).
   Serverul comprima, deci pe fir sunt vreo 12 KB.
   ========================================================================== */

/* 1. Variabile ----------------------------------------------------------- */

:root {
	/* Identitate de eticheta de depozit: alb, gri deschis, grafit, cu galben
	   industrial folosit STRICT pe badge-uri si pe logotip. Butonul primar e
	   grafit: galbenul la scara mare se citeste ieftin.
	   --accent se suprascrie din PHP, deci schimbarea schemei ramane o
	   singura linie de configurare. */
	--accent: #f5b301;
	--accent-dark: #d99a00;
	--accent-soft: #fff6da;

	/* Neutrele sunt calde, trase spre galbenul marcii, nu gri-albastre. Un gri
	   neutru langa un galben industrial arata ca doua palete lipite. */
	--ink: #4a4c40;
	--ink-strong: #22241c;
	--ink-soft: #6b6d5f;

	--bg: #ffffff;
	--bg-soft: #f2f1eb;
	--line: #e6e4d8;

	--ok: #1f8a4c;
	--warn: #b26a00;
	--bad: #c62828;

	/* Spatiere. Scara de 4. */
	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s5: 24px;
	--s6: 32px;
	--s7: 48px;

	/* Compact inseamna si colturi mai stranse: 8 puncte pe un card de 160
	   lati arata moale, 5 arata ca o eticheta. */
	--radius: 4px;
	--radius-lg: 6px;

	/* Fontul telefonului, nu un font web. Trebuchet MS, care era aici, exista
	   pe orice masina si tocmai de aceea se alegea: e fontul din 2005 si toata
	   pagina mirosea a 2005. Stiva de mai jos da SF Pro pe iPhone, Roboto pe
	   Android, Segoe pe Windows — zero cereri, zero KB, si scrisul arata ca
	   restul telefonului din mana omului. */
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--shadow: 0 1px 3px rgba(34, 36, 28, .12);
	--shadow-lg: 0 4px 16px rgba(34, 36, 28, .16);

	/* Latimea maxima a continutului */
	--wrap: 1200px;

	/* Tinta minima de atins, ceruta de verificarea fazei */
	--tap: 44px;

	/* Inaltimea barei fixe de jos: butonul de 44 plus doua padding-uri de 8 si
	   chenarul de sus. E declarata aici, nu masurata cu ochiul, fiindca subsolul
	   isi face loc dupa ea. */
	--bara-h: 61px;
}

/* 2. Reset scurt --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--bg);
}

img { max-width: 100%; height: auto; border: 0; }
svg { display: block; }

a { color: var(--ink-strong); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 var(--s3); line-height: 1.2; letter-spacing: -.015em; color: var(--ink-strong); text-wrap: balance; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 14px; }

@media (min-width: 600px) {
	h1 { font-size: 24px; }
	h2 { font-size: 19px; }
	h3 { font-size: 17px; }
}

p { margin: 0 0 var(--s3); }
ul, ol { margin: 0 0 var(--s3); padding-left: var(--s5); }

button, input, select, textarea { font: inherit; color: inherit; }

/* Focus vizibil, altfel navigarea de la tastatura e oarba */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--ink-strong);
	outline-offset: 2px;
}

/* Pe telefon marginea e de 12, nu de 16: opt puncte in plus pe latimea
   ecranului inseamna opt puncte in plus impartite intre doua carduri. */
.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--s3);
}

@media (min-width: 600px) {
	.wrap { padding: 0 var(--s4); }
}

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

/* Virgula zecimala din pret: se citeste si se copiaza, dar nu se vede.
   Ridicarea zecimalelor in <sup> tine loc de separator doar pentru ochi —
   pentru innerText, clipboard si cititoarele de ecran "70<sup>77</sup>" e
   "7077". Nu merge cu `.vh`: fiind scos din flux, innerText pune rand nou
   in jurul lui si iese "70\n,\n77". La `font-size: 0` litera ramane in
   rand, ocupa zero si nu schimba latimea pretului cu niciun pixel. */
.pret-sep { font-size: 0; }

/* 3. Componente, in ordinea in care apar in pagina ----------------------- */

/* 3.1 Banda de sus */

/* Banda scrie cu galben pe grafit: e singurul rand de pe pagina care are voie
   sa strige, si asa culoarea marcii apare in primul centimetru de ecran. */
.banda {
	background: var(--ink-strong);
	color: var(--accent);
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .03em;
	text-align: center;
	padding: 6px var(--s3);
}

.banda strong,
.banda b { color: #fff; font-weight: bold; }
.banda a { color: var(--accent); text-decoration: underline; }

/* 3.2 Header */

.header {
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	position: relative;
	z-index: 20;
}

.header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	min-height: 48px;
	padding: var(--s1) var(--s3) var(--s2);
	max-width: var(--wrap);
	margin: 0 auto;
}

.header__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: var(--tap);
	line-height: 0;
}

/* Logotipul se masoara pe latime, nu pe inaltime: eticheta il face mult mai
   lat decat inalt (raport ~7,7:1), iar la 32 de puncte inaltime ar iesi 246
   lati, adica doua treimi din ecranul unui telefon, langa meniu, cautare si
   cos. Macheta il arata la 156 pe bara mobila. */
.header__logo img,
.header__logo svg { width: 176px; height: auto; }

@media (min-width: 600px) {
	.header__logo img,
	.header__logo svg { width: 205px; }
}

@media (min-width: 900px) {
	.header__logo img,
	.header__logo svg { width: 230px; }
}

.header__spacer { flex: 1 1 auto; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	border-radius: var(--radius);
}

.icon-btn:hover { color: var(--ink-strong); }
/* 26, nu 22: tinta de atins ramane 44, dar semnul din ea era mai mic decat
   scrisul de langa el si randul parea gol. Nu creste bara, doar o umple. */
.icon-btn svg { width: 26px; height: 26px; fill: currentColor; }

.icon-btn__count {
	position: absolute;
	transform: translate(12px, -12px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ink-strong);
	color: #fff;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	font-weight: bold;
}

/* Antetul de checkout: doar semnul ca plata e securizata */
.header__secure {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	font-size: 13px;
	font-weight: bold;
	color: var(--ok);
}

.header__secure svg { fill: currentColor; }

/* 3.3 Cautare */

/* Pe telefon cautarea trece pe randul ei, sub logo si iconite. */
.search {
	display: flex;
	order: 9;
	flex: 1 1 100%;
	margin: 0 0 var(--s2);
}

/* Antetul de produs tine cautarea pliata: pe telefon deasupra produsului
   incap doar meniul, logotipul si cosul, dar iconita trebuie sa desfaca o
   casuta, nu sa duca in alta pagina. Comutatorul e bifa `#search_toggle`,
   deci merge si fara JavaScript. De la 900 in sus (mai jos) casuta sta
   permanent pe bara si eticheta dispare. */
.search--pliata { display: none; }
.search-bifa:checked ~ .search--pliata { display: flex; }

/* Focus vizibil pe eticheta: fara asta, bifa fiind ascunsa, navigarea de la
   tastatura n-ar arata unde e. */
.search-bifa:focus-visible ~ .search-eticheta { outline: 2px solid var(--ink-strong); outline-offset: 2px; }

/* Camp plin, fara chenar: pe un antet scund, un dreptunghi conturat langa alt
   dreptunghi conturat face doua linii paralele care nu spun nimic. */
.search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 var(--s3);
	border: 1px solid transparent;
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	background: var(--bg-soft);
	font-size: 14px;
}

.search__input:focus {
	background: var(--bg);
	border-color: var(--ink-strong);
	outline: none;
}

.search__btn {
	flex: 0 0 auto;
	width: 46px;
	height: 40px;
	border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--ink-strong);
	color: #fff;
	cursor: pointer;
}

.search__btn:hover { background: var(--ink); }
.search__btn svg { width: 18px; height: 18px; margin: 0 auto; fill: currentColor; }

/* Sugestii instant */

.search { position: relative; }

.sugestii {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 40;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow-lg);
}

.sugestie {
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-height: var(--tap);
	padding: var(--s2) var(--s3);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.sugestie:last-child { border-bottom: 0; }
.sugestie:hover, .sugestie.is-picked { background: var(--bg-soft); text-decoration: none; }

.sugestie img { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }

.sugestie__n {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sugestie__n mark { background: var(--accent); color: var(--ink-strong); }

.sugestie__p {
	flex: 0 0 auto;
	font-weight: bold;
	font-size: 14px;
	color: var(--ink-strong);
	font-variant-numeric: tabular-nums;
}

.sugestie__p sup { font-size: .6em; top: -.5em; position: relative; }
.sugestie__p del { font-weight: normal; font-size: 12px; color: var(--ink-soft); }

/* Ultimul rand: drumul catre toate rezultatele. Fara poza si fara pret, deci
   se citeste ca o actiune, nu ca inca un produs. */
.sugestie--toate {
	justify-content: center;
	gap: 0;
	background: var(--bg-soft);
	color: var(--ink-strong);
	font-size: 13px;
	font-weight: bold;
}

/* Randul e deja pe fundalul de trecere al celorlalte, deci trecerea peste el
   trebuie sa se vada altfel — altfel nu raspunde la nimic. */
.sugestie--toate:hover,
.sugestie--toate.is-picked { background: var(--ink-strong); color: #fff; }

/* 3.4 Butoane de intentie */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: 0 var(--s5);
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: var(--ink-strong);
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn:hover, .btn:focus { background: var(--ink); color: #fff; text-decoration: none; }

.btn--ghost {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}

.btn--ghost:hover { background: var(--bg-soft); border-color: var(--ink-soft); color: var(--ink); }

.btn--block { display: flex; width: 100%; }

.btn[disabled], .btn--off {
	background: var(--line);
	color: var(--ink-soft);
	cursor: not-allowed;
}

/* 3.5 Banda de avantaje */

.avantaje {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s1) var(--s2);
	padding: var(--s3);
	margin: 0 0 var(--s4);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	font-size: 11.5px;
	color: var(--ink-soft);
	list-style: none;
}

.avantaje li {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
}

.avantaje svg { flex: 0 0 auto; width: 13px; height: 13px; fill: var(--ok); }

/* Butoanele de intentie, ca pastile pe un rand care deruleaza.
   Erau patru dreptunghiuri conturate cat un deget inaltime fiecare: ocupau un
   sfert din primul ecran ca sa spuna patru cuvinte, si impingeau marfa sub
   pliu. Ca pastile intra tot patru, plus cate mai vrem, pe 32 de puncte. */
.intentii { margin: var(--s3) 0; }

.intentii .categorii {
	display: flex;
	gap: var(--s2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--s1);
	/* Marginile negative lasa pastilele sa curga pana la marginea ecranului, ca
	   sa se vada ca lista continua. Valoarea trebuie sa fie EXACT marginea lui
	   .wrap, altfel pagina iese in afara ecranului cu diferenta. */
	margin: 0 calc(var(--s3) * -1);
	padding-left: var(--s3);
	padding-right: var(--s3);
	scrollbar-width: none;
}

.intentii .categorii::-webkit-scrollbar { display: none; }

.intentii .categorii a {
	flex: 0 0 auto;
	justify-content: center;
	min-height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: 22px;
	background: var(--bg-soft);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.intentii .categorii a:hover { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

@media (min-width: 600px) {
	.intentii .categorii { margin: 0 calc(var(--s4) * -1); padding-left: var(--s4); padding-right: var(--s4); }
}

@media (min-width: 900px) {
	.intentii .categorii { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
}

/* Titlul primei pagini e pentru cautare, nu pentru client: "Sex Shop Online"
   nu spune nimic cuiva care e deja in magazin. Ramane in pagina si ramane h1,
   dar nu mai e cel mai mare lucru de pe primul ecran. Pe celelalte pagini
   titlul chiar spune unde esti, deci ramane mare. */
.title--seo {
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	margin-bottom: var(--s3);
}

@media (min-width: 600px) {
	.title--seo { font-size: 16px; }
}

/* 3.6 Titluri de sectiune */

.sect { padding: var(--s4) 0; }

.sect__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	margin-bottom: var(--s3);
}

.sect__title {
	margin: 0;
	font-size: 16px;
	letter-spacing: -.01em;
	position: relative;
	padding-left: var(--s3);
}

/* Carligul de langa titlu (deocamdata doar la pachete: "economisesti pana
   la X"). Capul de sectiune e flex cu space-between, deci pe ecran larg sta
   in dreapta titlului; sub 560px trece pe randul lui, ca sa nu striveasca
   titlul intre doua cuvinte. */
.sect__sub {
	margin: 0;
	font-size: .875rem;
	color: var(--ink-soft);
	text-align: right;
}

@media (max-width: 560px) {

	.sect__head { flex-wrap: wrap; }

	.sect__sub { flex-basis: 100%; text-align: left; }

}

.sect__title::before {
	content: "";
	position: absolute;
	left: 0; top: .15em; bottom: .15em;
	width: 4px;
	border-radius: 2px;
	background: var(--ink-strong);
}

/* Capul de raft e aliniat pe linia de baza, deci legatura creste in sus si in
   jos in jurul liniei ei si titlul nu se misca deloc. */
.sect__more {
	font-size: 14px;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--s1);
	margin-right: calc(var(--s1) * -1);
}

/* 3.7 Cardul de produs
   Regulile anti-deplasare: containerul pozei rezerva un patrat, numele are
   inaltime fixa pe doua randuri. Fara ele, cardul sare cand se incarca poza. */

.card {
	display: flex;
	flex-direction: column;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.card:hover { box-shadow: var(--shadow); }

.card__media {
	position: relative;
	display: block;
	width: 100%;
	/* rezerva patratul si in browserele fara aspect-ratio */
	padding-top: 100%;
	/* Pozele de produs au fundal alb; un patrat gri in jurul lor arata ca doua
	   cutii suprapuse. Cardul are deja chenar, deci nu e nevoie de fundal ca
	   sa se vada unde incepe poza. */
	background: var(--bg);
	overflow: hidden;
}

@supports (aspect-ratio: 1 / 1) {
	.card__media { padding-top: 0; aspect-ratio: 1 / 1; }
}

.card__media img {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--s2);
}

.card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--s2);
	gap: var(--s1);
}

.card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 12.5px;
	font-weight: normal;
	/* Inaltimea de linie si inaltimea totala sunt in puncte si se impart
	   exact: 2 x 17 = 34. Asa a treia linie e taiata complet de overflow, nu
	   pe jumatate, si nu depindem de -webkit-line-clamp, care nu se aplica
	   peste tot. Fiind fixa, nu apare nicio deplasare cand se schimba marimea
	   fontului la 600. Zona de atins ramane poza, care e cat cardul. */
	line-height: 17px;
	height: 34px;
	color: var(--ink-strong);
}

.card__name a { display: block; height: 100%; }

/* Numele are inaltime fixa de 34, ca sa nu sara grila, deci nu poate ajunge
   la 44 fara sa strice alinierea cardurilor. In loc sa creasca, isi intinde
   zona de atins peste tot cardul: orice apasare care nu cade pe buton duce la
   produs. Aspectul nu se schimba cu nimic, dar tinta trece de la 34 de puncte
   la cat e cardul. Cardul e deja `position: relative`.

   Orice alta legatura care ajunge vreodata in card (insigna, codul, ratingul)
   trebuie ridicata cu `position: relative; z-index: 2`, altfel o inghite zona
   asta. Azi mai e doar `.card__media`, care duce la acelasi produs. */
.card__name a::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }

.card__price {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	margin-top: auto;
}

/* Pretul, cu cifre de latime egala ca sa nu danseze coloana */
.card__price {
	flex-wrap: wrap;
	font-variant-numeric: tabular-nums;
}

.card__price b { font-size: 16px; color: var(--ink-strong); letter-spacing: -.01em; }
.card__price b sup { font-size: .6em; top: -.5em; position: relative; }
.card__price .card__cur { font-size: 11px; font-weight: normal; color: var(--ink-soft); }
.card__price del { font-size: 12px; color: var(--ink-soft); }

/* Procentul sta pe grafit, nu pe galben: doua galbenuri alaturate se anuleaza */
.card__off {
	padding: 1px var(--s2);
	border-radius: var(--radius);
	background: var(--ink-strong);
	color: #fff;
	font-size: 11px;
	font-weight: bold;
}

.card__rating {
	display: flex;
	align-items: center;
	gap: 3px;
	font-size: 11.5px;
	color: var(--ink-soft);
}

.card__rating b { color: var(--ink-strong); }

/* In card stelele sunt mai mici decat in pagina de produs, dar tot cinci:
   un singur caracter langa un numar nu se citeste ca un rating. */
.card__rating .stele { font-size: 11px; letter-spacing: 0; }
.card__rating .stele__nr { font-size: 11px; }

.card__stock { font-size: 11px; color: var(--ok); font-weight: bold; }
.card__stock--zero { color: var(--ink-soft); font-weight: normal; }

.card__code { font-size: 10px; color: var(--ink-soft); letter-spacing: .02em; }

/* `z-index: 2` il tine deasupra zonei intinse a numelui: fara el, apasarea
   pe "Adauga in cos" ar duce la pagina produsului. Inaltimea urca de la 40 la
   prag — patru puncte pe card, pe cel mai apasat buton din listare. */
.card .btn { position: relative; z-index: 2; min-height: var(--tap); padding: 0 var(--s2); font-size: 12.5px; }

.card__badge {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	z-index: 2;
	padding: 2px var(--s2);
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--ink-strong);
	font-size: 10px;
	font-weight: bold;
	line-height: 16px;
}

.card__badge--stoc { background: var(--ok); color: #fff; }
.card__badge--epuizat { background: var(--ink-soft); color: #fff; }

/* "Pentru începători" nu e o urgenta comerciala ca lichidarea, ci o
   lamurire — deci nu poarta galbenul care striga. */
.card__badge--bland { background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line); }

/* 3.7b Bara de listing: contorul de rezultate si sortarea, vizibila */

/* Numarul, filtrele si sortarea intra pe un singur rand. Pe trei randuri,
   cum erau, faceau 110 puncte de unelte inaintea primului produs — pe un ecran
   de 844, adica o optime din pagina, ca sa spuna cate produse sunt. */
.listing__bar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--s2);
	margin: 0 0 var(--s3);
}

.rezultate { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-soft); }

.listing__order {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font-size: 13px;
}

/* Eticheta e evidenta din optiunile selectului ("In stoc", "Cele mai
   vandute"), deci pe telefon ramane doar pentru cititoarele de ecran. */
.listing__order label {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.listing__order select {
	/* WebKit rescrie min-height pentru select-urile cu aspect nativ — calculat
	   iese 18px, nu 44 — dar respecta height. Fara randul de height, pe Safari
	   selectul ramane la 23 de puncte si iese vizibil mai scund decat butonul
	   de filtre de langa el. Pe Chromium ajung amandoua la 44 si fara el, deci
	   verificarea intr-un singur motor nu prinde asta. */
	min-height: var(--tap);
	height: var(--tap);
	max-width: 140px;
	padding: 0 var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink-strong);
	font-size: 16px; /* 16 ca sa nu declanseze marirea pe iOS */
}

@media (min-width: 600px) {
	.listing__bar { flex-wrap: wrap; gap: var(--s3); }
	.rezultate { font-size: 14px; }
	.listing__order select { max-width: none; }
	.listing__order label {
		position: static;
		width: auto; height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
		color: var(--ink-soft);
	}
}

/* Filtre de categorie */

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
	margin: 0 0 var(--s3);
	padding: 0;
}

/* Chipsul e butonul care scoate un filtru: daca il ratezi, ramai cu filtrul
   pus si crezi ca atatea produse sunt. Deci intra la prag, ca butoanele. */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--ink-strong);
	border-radius: 22px;
	background: var(--ink-strong);
	color: #fff;
	font-size: 13px;
}

.chip:hover { background: var(--ink); text-decoration: none; color: #fff; }
.chip--gol { background: none; border-color: var(--line); color: var(--ink-soft); }
.chip--gol:hover { background: var(--bg-soft); color: var(--ink); }

/* Butonul de filtre: pana acum aparea doar pe telefon, iar pe desktop nu
   exista deloc — panoul statea deschis. Acum e singura cale catre filtre pe
   ambele, deci poarta si un semn, nu doar un cuvant, si se vede cand e apasat. */
.listing__filtre {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: 0 var(--s3);
	font-size: 13px;
}

.listing__filtre svg { width: 15px; height: 15px; fill: currentColor; }

.listing__filtre[aria-expanded="true"] {
	background: var(--ink-strong);
	border-color: var(--ink-strong);
	color: #fff;
}

/* Panoul de filtre.

   Pe telefon acopera ecranul, ca sertarul de categorii: o lista de branduri
   are 40 de randuri, iar intr-o foaie de 80vh alegeai printr-o fereastra de
   trei randuri, cu pagina care se misca sub ea. Cap propriu cu iesire, corp
   care se deruleaza, talpa cu butonul care te duce inapoi la marfa.

   De la 900 in sus panoul cade in pagina, sub bara, dar tot inchis: filtrele
   deschise mereu impingeau primul produs sub pliu pe fiecare categorie. */

.filtre {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	transform: translateY(100%);
	visibility: hidden;
	transition: transform .22s ease-out, visibility .22s;
}

.filtre.is-open { transform: translateY(0); visibility: visible; }

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

.filtre__cap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 var(--s2) 0 var(--s4);
	border-bottom: 1px solid var(--line);
}

.filtre__cap strong { font-size: 19px; color: var(--ink-strong); }

.filtre__corp {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--s4);
}

/* Talpa sta lipita de marginea de jos, deci trece de bara gesturilor iPhone. */
.filtre__talpa {
	flex: 0 0 auto;
	padding: var(--s3) var(--s4);
	padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--line);
	background: var(--bg);
}

.filtru { margin-bottom: var(--s5); }
.filtru:last-child { margin-bottom: 0; }
.filtru__titlu { margin: 0 0 var(--s2); font-size: 14px; }

.filtru__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.filtru__lista a {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 38px;
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-size: 13px;
}

.filtru__lista a:hover { border-color: var(--ink-strong); text-decoration: none; }
.filtru__lista a.is-picked { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

.filtru__nr { color: var(--ink-soft); font-size: 12px; }
.filtru__lista a.is-picked .filtru__nr { color: rgba(255,255,255,.7); }

.filtru__lista .e-ascuns { display: none; }
.filtru.e-desfasurat .filtru__lista .e-ascuns { display: block; }

.filtru__mai {
	margin-top: var(--s2);
	padding: 0;
	background: none;
	border: 0;
	color: var(--ink-strong);
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
}

/* Descrierea categoriei, sub produse */
.categorie-desc {
	margin-top: var(--s6);
	padding-top: var(--s5);
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 14px;
}

.categorie-desc img { float: left; margin: 0 var(--s4) var(--s2) 0; }

/* 3.8 Grila */

.grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s2);
}

/* Raftul cu marfa pe stoc de pe prima pagina aduce opt produse: randuri pline
   si la doua coloane, si la patru. Doar la trei coloane (600-899) ultimele doua
   ar sta singure pe un rand, deci doar acolo se ascund. Pe telefon raman toate
   opt, desi ar incapea si sase: cardurile ascunse cu display:none isi descarca
   oricum poza (loading="lazy" amana dupa derulare, nu dupa vizibilitate), deci
   ascunderea lor ar costa trafic fara sa arate nimic. */
@media (min-width: 600px) and (max-width: 899px) {
	.grid--stoc > *:nth-child(n+7) { display: none; }
}

/* 3.9 Raft: aceleasi carduri, dar pe orizontala, cu derulare */

.raft {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 44%;
	gap: var(--s2);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--s2);
}

.raft > * { scroll-snap-align: start; }

/* 3.10 Categorii */

.categorii {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.categorii a {
	display: flex;
	align-items: center;
	gap: var(--s2);
	min-height: var(--tap);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-size: 14px;
}

.categorii a:hover {
	border-color: var(--ink-strong);
	color: var(--ink-strong);
	text-decoration: none;
}

/* Meniul off-canvas: sertarul de categorii.

   Randul are doua tinte separate — numele duce in categorie, sageata desface
   subcategoriile. Lipite intr-un singur link, degetul nimereste gresit una din
   doua; de aceea sageata e buton propriu, de 48 de puncte. */

.nav {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: 92%;
	max-width: 380px;
	z-index: 60;
	background: var(--bg);
	transform: translateX(-100%);
	transition: transform .22s ease-out;
	display: flex;
	flex-direction: column;
}

.nav.is-open { transform: translateX(0); }

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

.nav__cap {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	padding: 0 var(--s2) 0 var(--s4);
}

.nav__cap strong { font-size: 19px; color: var(--ink-strong); }

.nav__chips {
	flex: 0 0 auto;
	display: flex;
	gap: var(--s2);
	padding: 0 var(--s4) var(--s3);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.nav__chips a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	color: var(--ink);
	white-space: nowrap;
}

.nav__chips a:hover { text-decoration: none; border-color: var(--ink-soft); }
.nav__chips .is-rosu { color: var(--bad); border-color: rgba(198, 40, 40, .35); font-weight: bold; }

.nav__corp {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	border-top: 1px solid var(--line);
}

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

/* Linia despartitoare incepe sub text, nu de la marginea ecranului, si dispare
   de tot sub categoria deschisa: altfel lista arata ca un tabel. */
.rand { display: flex; align-items: stretch; position: relative; }

.rand::after {
	content: '';
	position: absolute;
	left: 77px; right: 0; bottom: 0;
	height: 1px;
	background: var(--line);
}

.cats > li:last-child .rand::after { display: none; }
.rand.is-desfacut { background: var(--bg-soft); }
.rand.is-desfacut::after { display: none; }
.rand.is-aici { box-shadow: inset 3px 0 0 var(--accent); }

.rand__link {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--s3);
	min-height: 68px;
	padding: 0 var(--s1) 0 var(--s4);
	min-width: 0;
	color: var(--ink);
}

.rand__link:hover { text-decoration: none; }

.rand__poza {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 7px;
	overflow: hidden;
	background: var(--bg-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rand__poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rand__poza span { font-size: 19px; font-weight: bold; color: var(--ink-soft); }

.rand__txt { min-width: 0; }
.rand__txt b { display: block; font-size: 15.5px; color: var(--ink-strong); line-height: 1.25; }
.rand__txt i { display: block; font-style: normal; font-size: 12px; color: var(--ink-soft); line-height: 1.3; margin-top: 1px; }

.rand__desfa {
	flex: 0 0 auto;
	width: 48px;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0;
	color: var(--ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rand__desfa svg { width: 13px; height: 13px; fill: currentColor; transition: transform .18s ease-out; }
.rand__desfa[aria-expanded="true"] svg { transform: rotate(180deg); }
.rand__desfa[aria-expanded="true"] { color: var(--ink-strong); }

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

/* Subcategoriile atarna de o linie verticala aliniata cu mijlocul pozei: asa
   se vede ca sunt copiii randului de deasupra, nu randuri noi. */
.subs {
	list-style: none;
	margin: 0;
	padding: var(--s1) 0 var(--s2);
	background: var(--bg-soft);
	border-bottom: 1px solid var(--line);
	position: relative;
}

.subs::before {
	content: '';
	position: absolute;
	top: 0; bottom: 20px; left: 40px;
	width: 1px;
	background: var(--line);
}

.subs a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--s4) 0 58px;
	font-size: 13.5px;
	color: var(--ink);
}

.subs a:hover { text-decoration: none; color: var(--ink-strong); }
.subs u { text-decoration: none; margin-left: auto; padding-left: var(--s2); font-size: 11.5px; color: var(--ink-soft); }
.subs__tot { color: var(--ink-strong); font-weight: bold; }

.nav__overlay {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 50;
	background: rgba(30, 42, 48, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease-out, visibility .2s;
}

.nav__overlay.is-open { opacity: 1; visibility: visible; }

/* Pe telefon nu exista nici butonul, nici panoul de categorii, nici linkurile
   de intentie din antet: acolo toate trei stau in sertar. */
.cat-btn, .mega, .header__intentii { display: none; }

body.is-locked { overflow: hidden; }

/* 3.11 Paginare */

.paginare {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--s1);
	list-style: none;
	margin: var(--s5) 0;
	padding: 0;
}

.paginare a,
.paginare span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-size: 14px;
}

.paginare a:hover { border-color: var(--ink-strong); text-decoration: none; }

.paginare .is-current {
	background: var(--ink-strong);
	border-color: var(--ink-strong);
	color: #fff;
	font-weight: bold;
}

.paginare .is-gap { border: 0; min-width: var(--s5); }

/* 3.12 Formular */

.form { display: grid; gap: var(--s4); }

.field { display: grid; gap: var(--s1); }

.field > label {
	font-size: 13px;
	font-weight: bold;
	color: var(--ink-strong);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
	width: 100%;
	min-height: var(--tap);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
}

.field textarea { min-height: 96px; padding-top: var(--s3); resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--ink-strong);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 42, 48, .12);
}

.field--bad input,
.field--bad select,
.field--bad textarea { border-color: var(--bad); }

.field__note { font-size: 12px; color: var(--ink-soft); }
.field__err { font-size: 12px; color: var(--bad); }

.choice {
	display: flex;
	align-items: flex-start;
	gap: var(--s3);
	min-height: var(--tap);
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	cursor: pointer;
}

.choice:hover { border-color: var(--ink-soft); }
.choice.is-picked { border-color: var(--ink-strong); background: var(--bg-soft); }
.choice input { margin-top: 3px; }

/* Pagina de produs */

/* `min-width: 0` nu e decor: fara el, coloana de grid se dimensioneaza dupa
   continutul maxim al galeriei, iar galeria e lata cat toate pozele la un loc.
   Asa iesea pagina cu 24 de puncte in afara ecranului pe telefon, si se putea
   trage lateral pe orice pagina de produs. */
.produs { display: grid; gap: var(--s4); }
.produs > * { min-width: 0; }

/* Poza mare sus, miniaturile pe un rand sub ea.
   Galeria era un carusel in care fiecare poza ocupa o coloana cat ecranul.
   Cand miniaturile au devenit miniaturi de 86 de puncte, au ramas tot coloane
   cat ecranul: o cutie gri uriasa cu o poza mica in mijloc, si celelalte sase
   in afara ecranului, gasibile doar daca stiai sa tragi lateral.

   Randul de miniaturi e acum un bloc al lui, nu frati intr-un flex care se
   infasoara. Cu `flex: 0 0 100%` plus `max-width: 476px`, poza mare cerea tot
   randul dar se oprea la 476: pe desktop ramanea loc si prima miniatura urca
   langa ea, restul cadeau dedesubt. Se vedeau doua randuri de miniaturi, unul
   in dreapta pozei si unul sub ea.

   De ce sub poza si nu intr-o coloana in stanga, ca la Amazon: coloana
   galeriei are 476 de puncte cu totul. O sina verticala de miniaturi ar lua
   din ele vreo 70, si poza mare — singurul lucru de pe pagina care chiar vinde
   — ar scadea la ~400. Miniaturile sub poza pastreaza poza la marimea maxima
   pe care o avem pe disc si tin acelasi asezaj ca pe telefon. */
.galerie { display: block; }

/* Banda: pe telefon se trage cu degetul si se opreste fix pe cate o poza; de
   la 900 in sus devine un teanc din care se vede doar cadrul ales. */
.galerie__banda {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* Bara de derulare n-are ce cauta sub poza: pozitia o spun bulinele. */
.galerie__banda::-webkit-scrollbar { display: none; }

.galerie__cadru {
	flex: 0 0 100%;
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: var(--s3);
	/* Pozele de produs au fundal alb, deci si rama e alba: gri in jurul unui
	   patrat alb arata ca doua cutii suprapuse, nu ca o poza. */
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
}

/* Harta pozitiei in galerie. Punctul vizibil are 8, dar butonul din jurul lui
   are 32 pe 44: pe un deget, o tinta de 8 puncte nu se nimereste.

   Pe inaltime ajunge la pragul de 44; pe latime nu poate, fiindca bulinele
   stau lipite una de alta — opt poze cu 44 fiecare ar cere 352 de puncte
   dintr-un ecran de 390, iar zonele vecine s-ar calca. 32 e cat incape fara
   sa se atinga. Marginea negativa de jos anuleaza cresterea butonului, ca
   pretul de sub galerie sa nu coboare cu 20 de puncte. */
.galerie__buline {
	display: flex;
	justify-content: center;
	gap: 2px;
	list-style: none;
	margin: -6px 0 -10px;
	padding: 0;
}

.galerie__bulina {
	position: relative;
	width: 32px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.galerie__bulina::after {
	content: '';
	position: absolute;
	top: 18px; right: 12px; bottom: 18px; left: 12px;
	border-radius: 50%;
	background: var(--line);
	transition: background .15s;
}

.galerie__bulina.is-picked::after { background: var(--ink-strong); }

/* Pe telefon harta e din buline, deci miniaturile ar spune acelasi lucru a
   doua oara si ar mai lua un rand din inaltimea de deasupra pretului. */
.galerie__mici { display: none; }

.galerie__mici .detail_imgIn2 { flex: 0 0 auto; }

.galerie__mica {
	display: block;
	width: 54px;
	height: 54px;
}

/* Poza mare umple rama.

   Pana acum era tinuta la 268 de puncte, marimea unui singur thumb, si rama
   ramanea patrata cat coloana: pe desktop, o poza de jumatate centrata pe alb
   intr-o cutie de vreo 540. Acum `srcset` da si varianta de 450, deci poza
   creste cu rama. Peste 450 nu urcam: atat exista pe disc, iar restul ar fi
   intindere. Rama se opreste si ea acolo, ca sa nu reapara aerul din jur. */
.galerie img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.galerie__cadru img { width: 100%; height: auto; }
.galerie__mica img { width: 100%; height: 100%; }

.produs__cod { font-size: 12px; color: var(--ink-soft); margin: 0 0 var(--s2); }

/* Miniaturile spun ca sunt de apasat: cursor, contur la trecere, contur
   permanent pe cea aleasa nu avem de unde sti, deci macar reactia. */
.galerie__cadru { cursor: zoom-in; }
.galerie__mica img { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 2px; }
.galerie__mica:hover img,
.galerie__mica:focus img { border-color: var(--accent-dark); }

/* Care poza se vede acum. Fara semnul asta, dupa doua click-uri nu mai stii
   la a cata esti si nu stii nici pe care sa te intorci. */
.galerie__mica.is-picked img { border-color: var(--ink-strong); border-width: 2px; padding: 1px; }

/* Lupa: poza mare, peste pagina, se inchide la click sau Esc. */
.lupa {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--s4);
	background: rgba(20, 20, 22, .88);
	cursor: zoom-out;
}

.lupa img { max-width: 100%; max-height: 100%; width: auto; height: auto; background: #fff; border-radius: var(--radius); }

.stele { color: var(--line); letter-spacing: 1px; }
.stea.e-plina { color: var(--accent-dark); }
.stele__nr { color: var(--ink-soft); font-size: 13px; }

.produs__pret {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--s2);
	margin: var(--s3) 0;
	font-variant-numeric: tabular-nums;
}

.produs__pret b { font-size: 28px; color: var(--ink-strong); }
.produs__pret .produs__vechi { font-size: 15px; color: var(--ink-soft); }

.produs__pret .red {
	padding: 2px var(--s2);
	border-radius: var(--radius);
	background: var(--ink-strong);
	color: #fff;
	font-size: 13px;
	font-weight: bold;
}

.produs__stoc { margin: 0 0 var(--s1); font-weight: bold; }
.produs__stoc .green { color: var(--ok); }
.produs__stoc .blue { color: var(--ink); }
.produs__stoc .red { color: var(--bad); }

.ultima {
	margin: 0 0 var(--s2);
	color: var(--bad);
	font-weight: bold;
	font-size: 14px;
}

.produs__livrare { font-size: 14px; color: var(--ink-soft); }

/* Variantele produsului — la lenjerie, marimile. Erau un tabel din 2011 pus
   sub pareri, cu butoane care chemau o functie inexistenta in v2. Aici sunt
   langa pret, ca tinte de 44 de puncte, si sunt legaturi adevarate. */
.variante { margin: var(--s4) 0 0; }

.variante__titlu {
	display: block;
	margin-bottom: var(--s2);
	font-size: 13px;
	color: var(--ink-soft);
}

.variante__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.varianta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink);
	font-size: 14px;
	white-space: nowrap;
}

.varianta:hover { border-color: var(--ink-strong); color: var(--ink-strong); text-decoration: none; }

/* Cea pe care esti: plina, ca sa se vada dintr-o privire care marime citesti. */
.varianta.e-aleasa {
	background: var(--ink-strong);
	border-color: var(--ink-strong);
	color: #fff;
	font-weight: bold;
}

/* „Ai deja N bucăți în coș": pagina arata la fel indiferent daca produsul e
   deja luat, deci omul il punea a doua oara. */
.deja-in-cos {
	margin: var(--s3) 0 0;
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ok);
	border-radius: var(--radius);
	background: var(--bg-soft);
	font-size: 14px;
}
.produs__add { margin-top: var(--s3); }

/* Promisiunea de livrare, langa pret. */
.delivery { display: inline-flex; align-items: center; gap: 6px; }
.delivery__icon { width: 20px; height: 20px; flex: none; fill: var(--ok); }

/* Cantitatea: doua tinte de 44px si un camp, nu o sageata de select. */
.cantitate { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0; }
.cantitate__eticheta { font-size: 14px; color: var(--ink-soft); margin-right: auto; }

.cantitate__btn {
	width: 44px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #fff;
	font-size: 20px;
	line-height: 1;
	color: var(--ink-strong);
	cursor: pointer;
}

.cantitate__btn:not(.e-stins):hover { border-color: var(--accent-dark); }

/* „Atat mai avem: 2 bucati". Sta sub cantitate, nu langa pret: e raspunsul la
   „de ce nu creste numarul", nu inca o eticheta de stoc. */
.cantitate__nota { margin: calc(-1 * var(--s2)) 0 var(--s4); font-size: 14px; color: var(--ink-soft); }
.cantitate__nota b { color: var(--bad); }
.cantitate__nota.e-ascunsa { display: none; }

.cantitate__camp {
	width: 52px;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
	font-size: 16px;
	color: var(--ink-strong);
	background: #fff;
}

/* Ce se intampla dupa ce apesi: raspunsurile care opresc oamenii inainte de cos. */
.asigurari { list-style: none; margin: var(--s4) 0 0; padding: 0; font-size: 13px; color: var(--ink-soft); }
.asigurari li { position: relative; padding: 3px 0 3px 20px; }
.asigurari li:before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: bold; }

/* "Adauga si": bateriile si lubrifiantul potrivit, langa buton. */
.adauga-si { margin: var(--s4) 0; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-soft); }
.adauga-si__titlu { margin: 0 0 var(--s2); font-size: 13px; color: var(--ink-soft); }
.adauga-si__lista { list-style: none; margin: 0; padding: 0; }
.adauga-si__rand label { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; cursor: pointer; font-size: 14px; }
.adauga-si__nume { flex: 1; }
.adauga-si__pret { font-weight: bold; color: var(--ink-strong); white-space: nowrap; }

.produs__jos { margin-top: var(--s6); }

/* Specificatiile: tabel, ca sa se alinieze si sa se poata compara.
   Randurile lungi (Material: ...) nu strica latimea paginii. */
.specs { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs th,
.specs td { padding: var(--s2) 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th { width: 42%; color: var(--ink-soft); font-weight: normal; padding-right: var(--s3); }
.specs td { color: var(--ink-strong); font-weight: bold; }

.specs__bife { list-style: none; margin: var(--s4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.specs__bife li {
	padding: 4px var(--s3);
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--accent-soft);
	font-size: 13px;
	color: var(--ink-strong);
}

/* Filmul: proportia sta in CSS, nu in style= pe fiecare produs. */
.videoWrapper { position: relative; padding-bottom: 56.25%; height: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #000; }
.videoWrapper video,
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Parerile: una sub alta, cu numele dedesubt, nu ca titlu de nivel cinci. */
.review { padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.review p { margin: 0 0 4px; }
.review__autor { font-size: 13px; color: var(--ink-soft); font-style: normal; }
.review--nota { border: 0; padding-top: var(--s4); font-size: 12px; color: var(--ink-soft); }

/* Formularul de parere. Nu exista deloc in v2: cu pareri se punea sir gol, iar
   fara pareri un link catre `showReviews()`, functie ramasa in scripturile
   vechi pe care v2 nu le incarca. Deci nimeni nu mai putea scrie una. */
/* Inchis, sub un link cu creion: formularul are cinci randuri si impingea in
   jos tot ce vine dupa pareri, desi majoritatea oamenilor doar citesc. */
.parere-box { margin-top: var(--s5); max-width: 520px; }

.parere-box__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	cursor: pointer;
	list-style: none;
	color: var(--ink-strong);
	font-weight: bold;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Safari vechi ignora list-style pe summary si tine triunghiul lui. */
.parere-box__link::-webkit-details-marker { display: none; }

.parere-box__link svg { width: 15px; height: 15px; fill: currentColor; }

.parere-box[open] .parere-box__link { margin-bottom: var(--s3); }

.parere { max-width: 520px; }

.parere__rand { margin-bottom: var(--s3); }

.parere__rand label {
	display: block;
	margin-bottom: 4px;
	font-size: 13px;
	color: var(--ink-soft);
}

.parere__rand input,
.parere__rand select,
.parere__rand textarea {
	width: 100%;
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
}

.parere__rand input,
.parere__rand select { min-height: var(--tap); }

.parere__rand input:focus,
.parere__rand select:focus,
.parere__rand textarea:focus { border-color: var(--ink-strong); outline: none; }

.parere__nota { margin: var(--s2) 0 0; font-size: 12px; color: var(--ink-soft); }

/* Descrierea tine toata latimea coloanei ei.

   Avea `max-width: 70ch`, adica vreo 700 de puncte dintr-o pagina de 1168:
   pe desktop textul se oprea la doua treimi si restul ramanea alb, langa un
   tabel de specificatii care merge pana la capat. Latimea de citit o da acum
   grila: langa poza de ambianta, coloana de text e oricum sub 70ch. */
.produs__desc { max-width: none; }
.produs__desc img { height: auto; }

/* Sectiune cu poza de context (ambianta langa descriere, cutie la
   specificatii). Nu e o poza de galerie, deci nu intra in galerie; dar nici nu
   pluteste in text, cum plutea: la `float: right` textul se strangea in randuri
   de trei cuvinte langa ea, iar pe telefon poza statea lipita la stanga, cu o
   dunga alba la dreapta.

   Acum e o coloana: text la stanga, poza la dreapta, capetele de sus aliniate
   la fix. Pe telefon coloana se desface si poza trece dedesubt, pe toata
   latimea — la 268px latime intr-un ecran de 390 nu se vedea nimic din ea.

   Legenda e un singur cuvant. Vezi `figura_poza()`: nu stim ce arata poza,
   doar cum e clasificata, deci o eticheta e tot ce se poate scrie onest. */
.sect__cu-poza { min-width: 0; }
.sect__text { min-width: 0; }

.poza-context {
	margin: var(--s5) 0 0;
}

.poza-context img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}

.poza-context figcaption {
	margin-top: var(--s2);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* Poza din mijlocul descrierii. Rupe peretele de text, deci sta pe latimea
   coloanei de text, nu intr-o margine — dar plafonata la 450, care e cea mai
   mare varianta existenta pe disc: peste atat s-ar intinde si ar arata moale.
   Centrata, pentru ca o poza de 450 lipita la stanga intr-o coloana de 830
   lasa o jumatate de rand alb langa ea, exact defectul de care scapam. */
.poza-text {
	margin: var(--s5) 0;
	max-width: 450px;
}

.poza-text img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}

@media (min-width: 768px) {

	.sect__cu-poza--activ {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: var(--s6);
		align-items: start;
	}

	.poza-context { margin: 0; }

	.poza-text { margin: var(--s6) auto; }

}

/* Bara de jos, doar pe telefon si doar dupa ce butonul din pagina a iesit */
.bara-jos {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s2) var(--s4);
	background: var(--bg);
	border-top: 1px solid var(--line);
	box-shadow: 0 -2px 8px rgba(30,42,48,.1);
	transform: translateY(110%);
	transition: transform .2s ease-out;
	min-height: var(--bara-h);
}

.bara-jos.is-open { transform: translateY(0); }

/* Butonul de adaugare are o respiratie deasupra lui cat sta in pagina, sub
   pret. In bara e singur pe rand, iar marginea aceea o inalta cu 12 puncte:
   bara crestea la 73, butonul ei iesea din centru, si locul lasat de subsol
   nu mai ajungea. */
.bara-jos .produs__add { margin-top: 0; }

/* Bara fixa sta peste ultimele randuri ale paginii, iar pagina nu-i lasa loc:
   cine deruleaza pana jos gaseste subsolul taiat sub ea — datele firmei si
   linia de copyright. Locul il face subsolul, nu `body`, ca fundalul lui sa
   ramana intins pana jos. Masura vine din `--bara-h`, nu dintr-un numar scris
   aici: asa nu mai poate ramane in urma barei. */
@media (max-width: 899px) {
	body:has(.bara-jos) .footer { padding-bottom: calc(var(--s6) + var(--bara-h)); }
}

.bara-jos__pret { font-weight: bold; font-size: 18px; font-variant-numeric: tabular-nums; }
.bara-jos .btn { padding: 0 var(--s5); }

/* Confirmarea adaugarii, fara reincarcarea paginii */
/* Butonul care tocmai a adaugat: confirmarea sta si pe buton, acolo unde se
   uita degetul, nu doar in modal. */
.btn.e-adaugat,
.btn.e-adaugat:hover {
	background: var(--ok);
	border-color: var(--ok);
	color: #fff;
}

/* Si refuzul sta pe buton, tot acolo. Un produs epuizat intre timp nu mai
   intra in cos, deci butonul nu are voie sa confirme. */
.btn.e-refuzat,
.btn.e-refuzat:hover {
	background: var(--bad);
	border-color: var(--bad);
	color: #fff;
	font-size: 13px;
}

.btn.e-ocupat { opacity: .65; pointer-events: none; }



/* Cos */

.cos { width: 100%; border-collapse: collapse; }

.cos th {
	padding: var(--s2);
	border-bottom: 1px solid var(--line);
	font-size: 12px;
	font-weight: normal;
	color: var(--ink-soft);
	text-align: left;
}

.cos td { padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: middle; }
.cos td.Code img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: var(--radius); }
.cos td.Name a { color: var(--ink-strong); }

/* Cantitatea in cos: doua tinte de 44px si campul intre ele, in loc de doua
   GIF-uri de 13 pixeli. Ambele sageti sunt linkuri reale catre ruta de
   actualizare, deci merg si cu JavaScript oprit. */
.cos__cantitate { display: inline-flex; align-items: center; gap: 4px; }
.cos__cantitate .cantitate__btn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.cos__cantitate .cantitate__camp { width: 48px; height: var(--tap); }
.cantitate__camp.e-peste-stoc { border-color: var(--bad); background: #fdecea; }

/* Butonul stins: ai ajuns la capatul stocului. Pana acum plusul mergea la
   nesfarsit, iar oprirea venea abia jos, ca mesaj rosu care blocheaza
   finalizarea. Regula nu mai e legata de cos: aceeasi haina o poarta si
   stepper-ul de pe pagina de produs. */
.cantitate__btn.e-stins {
	color: var(--ink-soft);
	background: var(--bg-soft);
	border-color: var(--line);
	cursor: not-allowed;
}

.cos__sterge { display: inline-block; margin-left: var(--s2); font-size: 13px; color: var(--ink-soft); }
.cos__sterge:hover { color: var(--ink-strong); }

/* Cand ajunge coletul, in cos. Verde discret, nu banda de reclama: e o
   informatie, si sta langa suma pe care omul o cantareste. */
.cos__livrare {
	margin: var(--s4) 0 var(--s3);
	padding: var(--s3);
	border: 1px solid var(--line);
	border-left: 3px solid var(--ok);
	border-radius: var(--radius);
	background: var(--bg-soft);
	font-size: 14px;
}

.cos__fix { color: var(--ink-soft); font-size: 14px; }
.cos__gol { color: var(--ink-soft); }

/* Cosul pe telefon: randuri, nu tabel.

   Cele cinci coloane cereau 425 de puncte pe un ecran de 366. Browserul le-a
   strans de unde a putut: coloana pozei a ramas la 16 puncte cu tot cu spatii,
   adica poza produsului iesea lata de zero — invizibila — iar coloana de
   subtotal cadea in afara ecranului, la capatul unei deplasari laterale pe care
   n-o vede nimeni. Omul isi verifica cosul fara sa vada nici produsul, nici cat
   plateste pe el.

   Toate randurile — produs, cadou, reducere — au aceleasi cinci celule, deci
   aceeasi grila le prinde pe toate:

       [ poza ] [ nume            ] [ pret bucata ]
       [ poza ] [ cantitate+sterge] [ subtotal    ] */
@media (max-width: 599px) {

	.tabel-scroll { overflow-x: visible; }

	.cos thead { display: none; }
	.cos, .cos tbody, .cos tr, .cos td { display: block; }

	.cos tr {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) auto;
		gap: 2px var(--s3);
		align-items: center;
		padding: var(--s3) 0;
		border-bottom: 1px solid var(--line);
	}

	.cos td { padding: 0; border: 0; }

	.cos td.Code { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
	.cos td.Name { grid-column: 2; grid-row: 1; }
	.cos td.Amount { grid-column: 2; grid-row: 2; }

	/* Pretul pe bucata e informativ; subtotalul e suma pe care o plateste,
	   deci el e cel scris apasat. */
	.cos td.Price { grid-column: 3; grid-row: 1; text-align: right; white-space: nowrap; font-size: 13px; color: var(--ink-soft); }
	.cos td.Price strong { font-weight: normal; }
	.cos td.Price.last { grid-row: 2; font-size: 16px; color: var(--ink-strong); }
	.cos td.Price.last strong { font-weight: bold; }

	.cos__sterge { margin-left: var(--s3); }

}

/* Placile de categorie de pe prima pagina. Marcajul vechi (.line > .lineIn >
   .Product) nu mai avea nicio regula de cand a iesit din punte: se vedea ca
   div-uri stivuite. */
/* Doua coloane si pe telefon. Pe o coloana, cele 40 de categorii faceau
   3.600 de puncte de lista gri — mai mult decat tot restul primei pagini la un
   loc. Descrierea se vede de la 600 in sus; sub, numele e de ajuns ca sa alegi
   un raft, si asa intra doua pe rand. */
.placi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }

@media (min-width: 900px) { .placi { grid-template-columns: repeat(3, 1fr); gap: var(--s3); } }

.placa__desc { display: none; }

@media (min-width: 600px) {
	.placa__desc { display: block; }
}

.placa__link {
	display: flex;
	gap: var(--s2);
	align-items: flex-start;
	padding: var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: inherit;
	text-decoration: none;
	height: 100%;
}

.placa__link:hover { border-color: var(--accent-dark); }

.placa__poza { width: 40px; height: 40px; flex: none; object-fit: contain; background: #fff; }

@media (min-width: 600px) {
	.placa__poza { width: 64px; height: 64px; }
}
.placa__text { display: block; min-width: 0; }
.placa__nume { display: block; font-size: 12.5px; font-weight: bold; color: var(--ink-strong); margin-bottom: 2px; }

@media (min-width: 600px) {
	.placa__nume { font-size: 15px; }
}
.placa__desc { display: block; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }

/* Cautarea din pagina de 404: aceeasi componenta, doar cu marginile ei. */
.search--404 { margin: var(--s4) 0 var(--s5); }
.search--404 .search__btn { width: auto; padding: 0 var(--s4); }

.cos__actiuni { display: grid; gap: var(--s3); margin-top: var(--s4); }

@media (min-width: 600px) {
	.cos__actiuni { grid-template-columns: 1fr 1fr; }
	.cos__actiuni .btn { width: auto; }
}

/* 3.13 Sumar */

.sumar {
	padding: var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
}

.sumar__row {
	display: flex;
	justify-content: space-between;
	gap: var(--s3);
	padding: var(--s2) 0;
	font-size: 14px;
}

.sumar__row--total {
	margin-top: var(--s2);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
	font-size: 17px;
	font-weight: bold;
	color: var(--ink-strong);
}

/* Zecimalele ridicate, la fel ca pe cardul de produs. Sumarul, butonul de
   comanda si bara de jos scriau pretul prin pret_html() cu <sup>-ul lasat pe
   stilul implicit al browserului, adica altfel decat in restul site-ului. */
.sumar__row sup,
.btn__total sup,
.bara-jos__pret sup { font-size: .6em; vertical-align: baseline; position: relative; top: -.5em; }

/* Checkout.
   Sablonul de checkout e 640 de linii de PHP inline, cu formularul care chiar
   creeaza comenzile. Nu-l rescriem: il imbracam, tintind clasele si id-urile
   existente. Niciun nume de camp si niciun flux nu se schimba. */

#OrderForm { display: block; }

#errors { margin: 0; padding: 0; list-style: none; }

/* Selectorul de id bate clasa, deci fara randul asta `#errors` de mai sus
   anula tocmai padding-ul si marginea pe care `.are-erori` le da cutiei, iar
   chenarul rosu statea lipit de text. */
#errors.are-erori { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); }

/* Doua coloane de la 900 in sus: pasii la stanga, comanda la dreapta, lipita
   de ecran. Pe telefon totul cade intr-o coloana, iar sumarul ajunge deasupra
   butonului — acolo unde omul verifica ultima data ce plateste. */
.checkout { display: grid; gap: var(--s6); }
.OrderFormContainer { margin-top: var(--s5); }

.checkout__pasi { display: grid; gap: var(--s5); align-content: start; }

/* Fieldset-ul isi pastreaza semantica dar pierde chenarul cu crestatura: pe 390
   de puncte mananca latime si aduce doua linii in plus in jurul fiecarui pas.
   Separarea o fac aerul si o singura linie, ca intr-un formular tiparit. */
.checkout__pasi > fieldset,
.checkout__pasi > .pas-sectiune {
	margin: 0;
	padding: 0 0 var(--s5);
	border: 0;
	border-bottom: 1px solid var(--line);
}

.checkout__pasi > fieldset:last-child,
.checkout__pasi > .pas-sectiune:last-child { padding-bottom: 0; border-bottom: 0; }

.checkout__lateral { display: grid; gap: var(--s4); align-content: start; }

/* Cutia comenzii: sumar, buton, termeni. Un chenar in jurul lor ii face un
   singur obiect, nu trei bucati de pagina. */
.sumar-cutie {
	padding: var(--s5);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	box-shadow: var(--shadow);
}

.sumar-cutie__titlu {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s3);
	margin: 0 0 var(--s3);
	font-size: 16px;
}

.sumar-cutie__titlu a { font-size: 13px; font-weight: normal; color: var(--ink-soft); text-decoration: underline; }

.sumar-cutie__termeni { margin: var(--s3) 0 0; font-size: 12.5px; color: var(--ink-soft); }

/* Produsul ramas fara stoc. Sumarul nu mai listeaza cosul — randurile se vad
   in cos, la un clic distanta — dar asta nu e o linie de lista, e un blocaj:
   fara el omul apasa "Plaseaza comanda" si primeste o eroare de server care nu
   spune nici care produs, nici cum se scoate. */
.lipsa {
	margin-bottom: var(--s4);
	padding: var(--s4);
	border-radius: var(--radius);
	background: #fdeaea;
}

.lipsa__titlu { margin: 0 0 var(--s3); font-size: 13px; font-weight: bold; color: var(--bad); }

.lipsa__rand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	flex-wrap: wrap;
	padding-top: var(--s2);
}

.lipsa__nume { font-size: 13px; color: var(--ink-strong); }

/* Cele cinci griji care opresc omul in ultimul pas. */
.garantii {
	list-style: none;
	margin: 0;
	padding: var(--s5);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	font-size: 12.5px;
	color: var(--ink-soft);
}

.garantii li { position: relative; padding: 0 0 var(--s3) 22px; }
.garantii li:last-child { padding-bottom: 0; }
.garantii li:before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: bold; }
.garantii strong { display: block; color: var(--ink-strong); font-size: 13px; }

/* Pasii numerotati. La checkout omul vrea sa stie cat mai are de completat,
   iar cinci legende fara numar nu spun asta. Sumarul cosului nu primeste
   numar: e ce cumperi, nu ce ai de completat. */
#OrderForm legend {
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: 100%;
	padding: 0;
	margin-bottom: var(--s4);
	font-size: 17px;
	font-weight: bold;
	color: var(--ink-strong);
}

#OrderForm legend small { font-weight: normal; color: var(--ink-soft); }

.pas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--ink-strong);
	font-size: 13px;
	font-weight: bold;
	flex: 0 0 auto;
}

#OrderForm .fm-req,
#OrderForm .fm-opt,
#OrderForm .fm-multi { display: grid; gap: var(--s2); margin-bottom: var(--s4); }

#OrderForm fieldset > .fm-req:last-child,
#OrderForm fieldset > .fm-opt:last-child,
#OrderForm fieldset > .fm-multi:last-child { margin-bottom: 0; }

#OrderForm label { font-size: 13px; font-weight: bold; color: var(--ink-strong); }

#OrderForm input[type="text"],
#OrderForm input[type="tel"],
#OrderForm input[type="email"],
#OrderForm select,
#OrderForm textarea {
	width: 100%;
	min-height: var(--tap);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	/* 16 ca sa nu declanseze marirea automata pe iOS */
	font-size: 16px;
}

#OrderForm textarea { min-height: 96px; padding-top: var(--s3); resize: vertical; }

#OrderForm input:focus,
#OrderForm select:focus,
#OrderForm textarea:focus {
	border-color: var(--ink-strong);
	outline: none;
	box-shadow: 0 0 0 3px rgba(30, 42, 48, .12);
}

/* :empty nu prinde spatiile, iar containerul de erori are indentare in
   sablon, deci s-ar fi vazut o cutie rosie goala pe orice checkout curat.
   Clasa o pune bundle-ul, cand containerul chiar are text. */
.are-erori {
	/* <ol> cu marcatori: numerotarea nu spune nimic despre erori, iar indentarea
	   implicita de 40 de puncte impinge textul in mijlocul cutiei. */
	list-style: none;
	margin: 0 0 var(--s5);
	padding: var(--s3) var(--s4);
	border-left: 3px solid var(--bad);
	border-radius: var(--radius);
	background: #fdeaea;
	color: var(--bad);
	font-size: 14px;
}

#fm-submit { display: grid; margin-top: var(--s5); }

/* Curierii si metodele de plata.
   Randul intreg e clicabil: numele curierului are acum <label for>, iar acolo
   unde tot nu exista (plata, easybox) bundle-ul marcheaza randul. */
#OrderForm input[type="radio"], #OrderForm input[type="checkbox"] {
	width: 20px;
	height: 20px;
	/* 2 puncte in jos: centrul radioului cade pe linia primului rand de text,
	   nu pe marginea lui de sus. */
	margin: 2px var(--s2) 0 0;
	flex: 0 0 auto;
	vertical-align: middle;
}

#carriers > div, #plata > div {
	display: flex;
	/* De cand fiecare rand are si o nota dedesubt, un radio centrat pe verticala
	   cade intre cele doua linii si nu mai pare sa apartina niciuneia. */
	align-items: flex-start;
	flex-wrap: wrap;
	min-height: 52px;
	padding: var(--s3) var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	margin-bottom: var(--s2);
}

#carriers > div img { max-height: 22px; width: auto; flex: 0 0 auto; }
#plata > div:last-child { margin-bottom: 0; }

/* Randul de curier e flex, deci detaliile lockerului ar sta pe acelasi rand
   cu radioul. Le trecem pe latimea intreaga, sub el. */
#detalii_easybox, #carrier_000 > .fm-eroare { flex-basis: 100%; }

#detalii_easybox {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid var(--line);
	font-size: 14px;
}

#detalii_easybox p { margin: 0 0 var(--s2); }

/* "Schimba punctul de ridicare" statea pe un chenar de aceeasi culoare cu
   despartitoarele si se citea ca text. Aici e singura cale de a corecta un
   punct gresit, deci primeste conturul si greutatea unui buton. */
#detalii_easybox .btn {
	margin-top: var(--s2);
	border: 2px solid var(--ink-strong);
	color: var(--ink-strong);
	font-weight: bold;
}

#detalii_easybox .btn:hover { background: var(--ink-strong); color: #fff; }

.fm-notita-rea, .fm-eroare { color: var(--bad); font-size: 13px; }
.fm-notita { margin: var(--s1) 0 0; color: var(--ink-soft); font-size: 12.5px; }
.fm-notita-buna { color: var(--ok); font-size: 13px; font-weight: bold; }

/* Curierul si plata: nume la stanga, pret la dreapta, ca pe o chitanta.
   Pretul aliniat la dreapta se compara dintr-o privire; inghesuit dupa nume,
   intre paranteze, cum era, nu se compara deloc. */
#carriers > div > label, #plata > div > label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--s2);
	flex: 1;
	font-weight: normal;
	cursor: pointer;
}

.curier__nume, .plata__nume { flex: 1; font-size: 14px; color: var(--ink-strong); }
.curier__nume a { margin-left: var(--s2); font-weight: normal; text-decoration: underline; }
.curier__pret { font-weight: bold; font-size: 14px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

/* Randul al doilea, la fel pe expeditie si pe plata: distinctia care conteaza
   nu e pretul, ci cine se deplaseaza si cand dai banii. */
.curier__nota, .plata__nota {
	display: flex;
	align-items: center;
	gap: var(--s2);
	flex-wrap: wrap;
	flex-basis: 100%;
	margin-top: 3px;
	font-size: 12px;
	color: var(--ink-soft);
}

.plata__icon { flex: 0 0 auto; color: var(--ink-soft); }

/* Marca portofelului, doar pe telefonul care chiar o poate folosi. */
.plata__portofel { height: 20px; width: auto; border-radius: 3px; }

/* Voucherul, pliat. Un camp deschis intreaba fiecare om despre un cod pe care
   nu-l are, si il trimite pe cel care il are sa-l caute prin mailuri. */
.voucher__link {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2) 0;
	border: 0;
	background: none;
	color: var(--ink-strong);
	font: inherit;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
}

/* Plusul spune ca randul se deschide. Fara el, un text subliniat singur pe o
   linie arata ca un link care duce in alta pagina — exact ce nu vrei in ultimul
   pas al unei comenzi. */
.voucher__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border: 1px solid var(--ink-strong);
	border-radius: 50%;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	text-decoration: none;
}

.voucher__camp { display: grid; gap: var(--s2); }
.voucher__rand { display: flex; gap: var(--s2); }
.voucher__rand .input_text { flex: 1; }
#checkBTN { margin-top: 0; white-space: nowrap; }

/* Ramburs stins pentru ca lockerul ales n-are terminal de plata. Ramane
   citibil, doar ca vizibil indisponibil. */
#OrderForm .plata-stinsa { color: var(--ink-soft); text-decoration: line-through; }

.rand-clicabil { cursor: pointer; }
.rand-clicabil:hover { border-color: var(--ink-soft); }
.rand-clicabil.is-picked { border-color: var(--ink-strong); background: var(--bg-soft); }

#checkBTN {
	display: inline-block;
	margin-top: var(--s2);
	padding: var(--s2) var(--s4);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--ink-strong);
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#checkBTN:hover { border-color: var(--ink-strong); background: var(--bg-soft); }

#fm-submit input[type="submit"], #OrderForm input[type="submit"] {
	display: block;
	width: 100%;
	min-height: 52px;
	padding: 0 var(--s5);
	border: 0;
	border-radius: var(--radius);
	background: var(--ink-strong);
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

#OrderForm input[type="submit"]:hover { background: var(--ink); }

#OrderForm table { width: 100%; border-collapse: collapse; }
#OrderForm td { padding: var(--s2) 0; vertical-align: middle; }

/* 3.13b Contact
   Cele doua cai de a ne vorbi stau primele si sunt tinte mari: pe telefon,
   numarul se apeleaza cu un deget, nu se copiaza. */

.contact { display: grid; gap: var(--s5); }

.contact__cai { display: grid; gap: var(--s2); }

.contact__cale {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	background: var(--bg);
	color: var(--ink);
	font-size: 13px;
}

.contact__cale:hover { border-color: var(--accent-dark); text-decoration: none; }
.contact__cale svg { flex: none; width: 22px; height: 22px; fill: var(--accent-dark); }
.contact__cale strong { display: block; font-size: 16px; color: var(--ink-strong); }

.contact__bloc h2 { margin: 0 0 var(--s3); }
.contact__bloc p { margin: 0 0 var(--s3); }
.contact__bloc p:last-child { margin-bottom: 0; }
.contact__nota { font-size: 13px; color: var(--ink-soft); }

@media (min-width: 600px) {
	.contact__cai { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
	.contact { grid-template-columns: 1fr 1fr; align-items: start; }
	.contact__cai { grid-column: 1 / -1; }
}

/* 3.14 Subsol */

.footer {
	margin-top: var(--s7);
	padding: var(--s5) 0 var(--s6);
	background: var(--ink-strong);
	color: #c3ccd1;
	font-size: 14px;
}

.footer a { color: #fff; }
.footer h4 { color: #fff; margin-bottom: var(--s3); font-size: 15px; }

.footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s5);
}

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

/* Tinta de atins: pe telefon linkurile din subsol sunt printre cele mai
   greu de nimerit, asa ca primesc inaltimea intreaga. */
.footer li a {
	display: flex;
	align-items: center;
	min-height: var(--tap);
}

.footer__legal a { display: inline; min-height: 0; }

.footer__program { margin: var(--s1) 0 0; font-size: 13px; color: #93a1a8; }

/* Semnele ANPC: latimea lor adevarata e 250, dar in coloana de subsol pe
   telefon nu incap, deci se micsoreaza pastrand proportia. */
.anpc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); justify-items: start; }
.anpc img { width: 100%; max-width: 250px; height: auto; border-radius: var(--radius); }

/* Identificarea firmei. Nu e o nota de subsol: e ce cere legea sa fie vizibil
   pe orice pagina a unui magazin, si e si ce cauta un om care vrea sa stie cu
   cine are de-a face inainte sa lase banii. */
.footer__firma {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: 13px;
	line-height: 1.6;
	color: #b3bcc2;
}

/* Randul de copyright vine imediat dupa, deci nu-si mai pune si el linie. */
.footer__firma + .footer__legal { margin-top: var(--s3); padding-top: 0; border-top: 0; }

/* Subsolul din checkout si din cos. Aceeasi banda inchisa, dar strans: fara
   coloane, fara program, fara linkul de tag. Cine plateste n-are nevoie de
   iesiri, are nevoie sa stie cu cine are de-a face si unde reclama. */
.footer--minim { padding: var(--s5) 0; }

.footer__legale {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--s5);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.footer__anpc { margin-top: var(--s3); }
.footer--minim .anpc { grid-template-columns: 1fr; }
.footer--minim .anpc img { max-width: 210px; }
.footer--minim .footer__firma { margin-top: var(--s4); }

.footer__legal {
	margin-top: var(--s5);
	padding-top: var(--s4);
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: 13px;
	color: #93a1a8;
}

/* Diverse mici */

.note {
	padding: var(--s3) var(--s4);
	border-left: 3px solid var(--ink-strong);
	border-radius: var(--radius);
	background: var(--bg-soft);
	font-size: 14px;
}

.note--ok { border-left-color: var(--ok); background: #eaf6ee; }
.note p { margin: 0 0 var(--s1); }
.note p:last-child { margin-bottom: 0; }
.note--bad { border-left-color: var(--bad); background: #fdeaea; }

/* Legaturile sunt de 13px, deci tinta era cat textul: 20 de puncte, pe un
   ecran unde se apasa cu degetul. Umplutura din legatura o duce la 44 fara sa
   schimbe cum arata randul; marginile listei scad cu cat creste legatura, deci
   pagina creste cu 10 puncte, nu cu 26. */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	list-style: none;
	margin: 0 0 var(--s1);
	padding: 0;
	font-size: 13px;
	color: var(--ink-soft);
}

.breadcrumb li { display: flex; align-items: center; }
.breadcrumb a { display: inline-block; padding: 13px 2px; }

.breadcrumb li::after { content: "›"; margin-left: var(--s1); color: var(--line); }
.breadcrumb li:last-child::after { content: ""; }

.tabel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 4. Puncte de rupere: 600, 900, 1200. Fara altele. --------------------- */

@media (min-width: 600px) {

	body { font-size: 16px; }

	h1 { font-size: 26px; }
	h2 { font-size: 21px; }

	.grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
	.raft { grid-auto-columns: 30%; }
	.categorii { grid-template-columns: repeat(3, 1fr); }
	.avantaje { grid-template-columns: repeat(4, 1fr); }
	.footer__cols { grid-template-columns: repeat(2, 1fr); }

	.card__name { font-size: 15px; }

}

@media (min-width: 900px) {

	.header__bar { min-height: 64px; gap: var(--s5); }
	.header__logo img, .header__logo svg { height: 38px; }

	/* De la 900 in sus cautarea urca pe randul header-ului, intre logo si
	   iconite, si nu mai ocupa un rand intreg. */
	.search {
		order: 0;
		flex: 1 1 auto;
		max-width: 460px;
		margin: 0;
	}

	/* Pe desktop pagina de produs n-avea deloc casuta de cautare, doar o
	   iconita. Aici e loc: casuta sta pe bara ca peste tot, si eticheta care
	   o desface pe telefon nu mai are rost. */
	.search--pliata { display: flex; }
	.search-eticheta { display: none; }

	.grid { grid-template-columns: repeat(4, 1fr); }
	.raft { grid-auto-columns: 23%; }
	.categorii { grid-template-columns: repeat(4, 1fr); }
	.footer__cols { grid-template-columns: repeat(4, 1fr); }
	.footer--minim .anpc { grid-template-columns: repeat(2, auto); justify-content: start; }

	/* Pe latimea asta sertarul dispare cu totul. Bara de categorii de pe trei
	   randuri, care manca 132 de puncte din capul fiecarei pagini, a fost
	   inlocuita de un buton in antet si de un panou care se deschide sub el. */
	.nav, .nav__overlay, #nav_open { display: none; }

	.cat-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--s2);
		background: var(--ink-strong);
		color: #fff;
		border: 0;
		font: inherit;
		font-size: 14.5px;
		font-weight: bold;
		padding: 10px var(--s4);
		border-radius: var(--radius);
		cursor: pointer;
		white-space: nowrap;
	}

	.cat-btn svg { width: 15px; height: 15px; fill: currentColor; }
	.cat-btn__v { width: 9px; height: 9px; opacity: .75; transition: transform .15s; }
	.cat-btn[aria-expanded="true"] .cat-btn__v { transform: rotate(180deg); }

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

	.header__intentii {
		display: inline-flex;
		align-items: center;
		gap: var(--s4);
		font-size: 13.5px;
		white-space: nowrap;
	}

	.header__intentii .is-rosu { color: var(--bad); font-weight: bold; }

	.mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		max-width: var(--wrap);
		z-index: 30;
		background: var(--bg);
		border: 1px solid var(--line);
		border-top: 0;
		box-shadow: var(--shadow-lg);
	}

	.mega[hidden] { display: none; }

	.mega__in { display: grid; grid-template-columns: 268px 1fr; }

	.mega__lista {
		list-style: none;
		margin: 0;
		padding: var(--s1) 0;
		background: var(--bg-soft);
		border-right: 1px solid var(--line);
	}

	.mega__lista a {
		display: flex;
		align-items: center;
		gap: var(--s2);
		padding: 6px var(--s3) 6px 15px;
		font-size: 13.5px;
		color: var(--ink);
		box-shadow: inset 3px 0 0 transparent;
	}

	.mega__lista a:hover { text-decoration: none; }
	.mega__lista u { text-decoration: none; margin-left: auto; font-size: 11.5px; color: var(--ink-soft); }
	.mega__v { flex: 0 0 auto; width: 8px; height: 8px; fill: var(--ink-soft); transform: rotate(-90deg); opacity: 0; }
	.mega__lista .is-pe a { background: var(--bg); color: var(--ink-strong); font-weight: bold; box-shadow: inset 3px 0 0 var(--accent); }
	.mega__lista .is-pe .mega__v { opacity: 1; }

	.mega__panou { display: flex; flex-direction: column; min-height: 400px; padding: var(--s4) var(--s5) var(--s5); }
	.mega__panou[hidden] { display: none; }

	.mega__titlu { display: flex; align-items: baseline; gap: var(--s3); }
	.mega__titlu h4 { margin: 0; font-size: 18px; color: var(--ink-strong); }
	.mega__titlu span { font-size: 12.5px; color: var(--ink-soft); }

	.mega__doua { display: grid; grid-template-columns: 1fr 300px; gap: var(--s5); margin-top: var(--s3); }

	.mega__subs { columns: 2; column-gap: var(--s5); }
	.mega__subs a { display: block; font-size: 13px; padding: 3.5px 0; color: var(--ink-soft); break-inside: avoid; }
	.mega__subs a:hover { color: var(--ink-strong); }
	.mega__gol { margin: 0; font-size: 13px; color: var(--ink-soft); }

	.mega__raft h5 { margin: 0 0 var(--s2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
	.mega__item { display: flex; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); color: var(--ink); }
	.mega__item:first-of-type { border-top: 0; padding-top: 0; }
	.mega__item:hover { text-decoration: none; }
	.mega__poza { flex: 0 0 46px; height: 46px; overflow: hidden; border-radius: var(--radius); background: var(--bg-soft); }
	.mega__poza img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.mega__n { display: block; font-size: 12px; line-height: 1.3; }
	.mega__p { display: block; font-size: 13px; font-weight: bold; color: var(--ink-strong); }

	.mega__jos { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line); }

	.mega__mergi {
		display: inline-block;
		background: var(--ink-strong);
		color: #fff;
		font-size: 13px;
		font-weight: bold;
		padding: 8px var(--s3);
		border-radius: var(--radius);
	}

	.mega__mergi:hover { text-decoration: none; background: var(--ink); }

	.checkout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: var(--s6); }
	.checkout__lateral { position: sticky; top: var(--s4); }

	/* De la 900 in sus galeria si buy-boxul stau alaturi, iar bara de jos nu
	   mai are rost: butonul din pagina e vizibil tot timpul. */
	.produs { grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }

	/* De la 900 in sus nu se mai trage cu degetul: banda devine un teanc din
	   care se vede doar cadrul ales, iar schimbarea o fac miniaturile. */
	.galerie__banda { display: block; overflow: visible; scroll-snap-type: none; }
	.galerie__cadru { display: none; width: 100%; max-width: 476px; } /* 450 poza + 2x12 padding + 2x1 chenar */
	.galerie__cadru.is-active { display: flex; }
	.galerie__buline { display: none; }

	.galerie__mici {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 6px;
		max-width: 476px;
	}
	.bara-jos { display: none; }

	/* De la 900 in sus panoul cade in pagina, sub bara — dar numai deschis.
	   Capul si talpa sunt unelte de ecran plin, aici nu au ce cauta: butonul
	   "Filtre" din bara e si deschiderea, si inchiderea. */
	.filtre {
		display: none;
		position: static;
		transform: none;
		visibility: visible;
		transition: none;
		padding: var(--s4) 0;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		margin-bottom: var(--s5);
	}

	.filtre.is-open { display: block; transform: none; }
	.filtre__cap, .filtre__talpa { display: none; }
	.filtre__corp { padding: 0; overflow: visible; }

	.filtre .filtru { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s3); }
	.filtre .filtru:last-child { margin-bottom: 0; }
	.filtre .filtru__titlu { flex: 0 0 90px; margin: 0; }

}

/* Grila se opreste la 4 coloane. Pagina are 24 de produse, iar 24 se imparte
   fix la 2, 3 si 4 — la 5 coloane ultimul rand ramanea cu o pozitie goala.
   In plus, la 1200 (cat tine .wrap) cardurile ies de ~273px in loc de ~215px,
   deci pozele arata mai bine. Raftul ramane si el pe 4, ca sa aiba aceeasi
   masura cu cardurile din grila. */

/* Cine a cerut mai putina miscare o primeste */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* Tipar */
@media print {
	.banda, .nav, .search, .footer, .icon-btn, .filtre, .listing__filtre { display: none !important; }
	body { font-size: 12pt; color: #000; }
}

/* 3.16 Modalul de adaugare in cos
   ---------------------------------------------------------------------------
   Se deschide dupa o adaugare reusita. Pe telefon urca de jos si se opreste la
   85% din inaltime; pe ecran lat sta centrat. Continutul lui — confirmarea,
   butoanele si raftul "Altii au cumparat si" — vine pe acelasi raspuns cu
   adaugarea, deci apare dintr-o data, fara sa sara. */

.modal {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 80;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(20, 20, 22, .55);
}

.modal__cutie {
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: var(--s4);
	padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--bg);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 600px) {
	.modal { align-items: center; }
	.modal__cutie { max-width: 520px; border-radius: var(--radius-lg); }
}

.modal__cap { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }

.modal__bifa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: 50%;
	background: var(--ok);
}

.modal__bifa svg { width: 18px; height: 18px; fill: #fff; }
.modal__titlu { font-size: 16px; color: var(--ink-strong); }
.modal__inchide { margin-left: auto; }

.modal__actiuni { display: grid; gap: var(--s2); grid-template-columns: 1fr 1fr; }
.modal__actiuni .btn { width: auto; }

.modal__impreuna { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }

.modal__impreuna-titlu {
	margin: 0 0 var(--s3);
	font-size: 13px;
	font-weight: bold;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: .4px;
}

/* Doua carduri incap intregi pe orice ecran, deci raftul din modal nu
   deruleaza: derularea orizontala intr-un panou care si el deruleaza vertical
   e o cursa pentru deget. */
.raft--modal { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; overflow: visible; }