/* ==========================================================================
   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 40 KB necomprimat.
   ========================================================================== */

/* 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;

	--ink: #43525a;
	--ink-strong: #1e2a30;
	--ink-soft: #6b7a83;

	--bg: #ffffff;
	--bg-soft: #f4f5f6;
	--line: #e2e6e9;

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

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

	--radius: 4px;
	--radius-lg: 8px;

	--font: "Trebuchet MS", "Segoe UI", Tahoma, Arial, sans-serif;

	--shadow: 0 1px 3px rgba(30, 42, 48, .12);
	--shadow-lg: 0 4px 16px rgba(30, 42, 48, .16);

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

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

/* 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.25; color: var(--ink-strong); }
h1 { font-size: 22px; }
h2 { font-size: 19px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

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;
}

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	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;
}

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

/* 3.1 Banda de sus */

.banda {
	background: var(--ink-strong);
	color: #fff;
	font-size: 13px;
	text-align: center;
	padding: var(--s2) var(--s4);
}

.banda strong { color: #fff; }
.banda b { color: #fff; font-weight: bold; }
.banda a { color: #fff; 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(--s3);
	min-height: 56px;
	padding: var(--s2) var(--s4);
	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: 156px; height: auto; }

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

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

.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); }
.icon-btn svg { width: 22px; height: 22px; 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);
}

.search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-right: 0;
	border-radius: var(--radius) 0 0 var(--radius);
	background: var(--bg-soft);
}

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

.search__btn {
	flex: 0 0 auto;
	width: 52px;
	height: var(--tap);
	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); }

/* 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(--s2);
	padding: var(--s3) var(--s4);
	margin: 0 0 var(--s4);
	border-radius: var(--radius-lg);
	background: var(--bg-soft);
	font-size: 13px;
	list-style: none;
}

.avantaje li {
	display: flex;
	align-items: center;
	gap: var(--s2);
	list-style: none;
}

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

/* Butoanele de intentie: aceeasi componenta ca lista de categorii, dar mai
   apasat, pentru ca sunt primul lucru sub cautare. */
.intentii { margin: var(--s3) 0; }

/* Patru pe un rand si pe telefon: sunt cuvinte scurte, iar doua randuri de
   butoane impingeau primul produs cu inca 60 de puncte in jos. */
.intentii .categorii { grid-template-columns: repeat(4, 1fr); }

.intentii .categorii a {
	justify-content: center;
	text-align: center;
	min-height: var(--tap);
	padding: var(--s2) var(--s1);
	border-color: var(--ink-strong);
	font-size: 13px;
	font-weight: bold;
	line-height: 1.2;
}

@media (min-width: 600px) {
	.intentii .categorii a { min-height: 52px; font-size: 15px; }
}

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

/* 3.6 Titluri de sectiune */

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

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

.sect__title {
	margin: 0;
	font-size: 19px;
	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);
}

.sect__more { font-size: 14px; white-space: nowrap; }

/* 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%;
	background: var(--bg-soft);
	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(--s3);
	gap: var(--s2);
}

.card__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	/* Inaltimea de linie si inaltimea totala sunt in puncte si se impart
	   exact: 2 x 22 = 44. 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. 44 tine si tinta de atins. Fiind fixa, nu apare nicio
	   deplasare cand se schimba marimea fontului la 600. */
	line-height: 22px;
	height: 44px;
	color: var(--ink-strong);
}

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

.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: 18px; color: var(--ink-strong); }
.card__price b sup { font-size: .6em; top: -.5em; position: relative; }
.card__price .card__cur { font-size: 12px; font-weight: normal; color: var(--ink-soft); }
.card__price del { font-size: 13px; 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: 12px;
	font-weight: bold;
}

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

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

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

.card__code { font-size: 11px; color: var(--ink-soft); }

.card .btn { min-height: var(--tap); font-size: 14px; }

.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: 11px;
	font-weight: bold;
	line-height: 18px;
}

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

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

.listing__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	margin: 0 0 var(--s4);
}

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

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

.listing__order label { color: var(--ink-soft); white-space: nowrap; }

.listing__order select {
	min-height: var(--tap);
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	font-size: 16px; /* 16 ca sa nu declanseze marirea pe iOS */
}

/* Filtre de categorie */

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

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	min-height: 34px;
	padding: 0 var(--s3);
	border: 1px solid var(--ink-strong);
	border-radius: 17px;
	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); }

.listing__filtre { min-height: var(--tap); padding: 0 var(--s4); }

/* Pe telefon panoul urca de jos, ca o foaie; de la 900 in sus sta in pagina */
.filtre {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	max-height: 80vh;
	overflow-y: auto;
	padding: var(--s4);
	background: var(--bg);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	box-shadow: var(--shadow-lg);
	transform: translateY(100%);
	transition: transform .2s ease-out;
}

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

.filtru { margin-bottom: var(--s5); }
.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(--s3);
}

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

.raft {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 46%;
	gap: var(--s3);
	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 */

.nav {
	position: fixed;
	top: 0; bottom: 0; left: 0;
	width: 86%;
	max-width: 320px;
	z-index: 60;
	background: var(--bg);
	transform: translateX(-100%);
	transition: transform .2s ease-out;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

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

.nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--line);
}

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

.nav a {
	display: block;
	min-height: var(--tap);
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

.nav a:hover { background: var(--bg-soft); text-decoration: none; }
.nav a.is-marked { 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; }

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 */

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

/* Galerie cu derulare pe orizontala si oprire pe fiecare poza */
.galerie {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: var(--s2);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	background: var(--bg-soft);
	border-radius: var(--radius-lg);
}

.galerie > *, .galerie a {
	scroll-snap-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: var(--s3);
}

.galerie img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

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

.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 strike, .produs__pret .DI_marketPrice { 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); }
.produs__add { margin-top: var(--s3); }

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

.produs__desc { max-width: 70ch; }
.produs__desc img { height: auto; }

/* Poza de context (ambianta langa descriere, cutie la specificatii).
   Nu e o poza de galerie: sta la dreapta textului pe ecran larg si trece
   dedesubt pe telefon, unde 268px langa text n-ar mai lasa loc de citit. */
.poza-context {
	margin: var(--s4) 0 0;
	max-width: 268px;
}

.poza-context img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	background: var(--bg-soft);
}

.poza-context figcaption {
	margin-top: var(--s1);
	font-size: .8125rem;
	color: var(--ink-soft);
}

@media (min-width: 768px) {

	.poza-context {
		float: right;
		margin: 0 0 var(--s3) var(--s4);
	}

	/* Fara asta sectiunea urmatoare urca langa poza. */
	.produs__desc::after { content: ""; display: block; clear: both; }

}

/* 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;
}

.bara-jos.is-open { transform: translateY(0); }
.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 */
.adaugat {
	position: fixed;
	left: 50%;
	bottom: 84px;
	transform: translateX(-50%);
	z-index: 70;
	padding: var(--s3) var(--s5);
	border-radius: var(--radius-lg);
	background: var(--ink-strong);
	color: #fff;
	font-size: 14px;
	box-shadow: var(--shadow-lg);
}

/* 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, .cos td img { width: 48px; height: auto; }
.cos td.Name a { color: var(--ink-strong); }
.cos .TabSpace { display: none; }

.cos input[type="text"] {
	width: 52px;
	min-height: var(--tap);
	padding: 0 var(--s2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	text-align: center;
	font-size: 16px;
}

.cos a img { width: auto; height: 22px; }

.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);
}

/* 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: grid; gap: var(--s4); max-width: 640px; }

#fm-intro { font-size: 14px; color: var(--ink-soft); }

/* 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(--s2);
	font-size: 16px;
	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(--s1); }

#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 {
	padding: var(--s3) var(--s4);
	border-left: 3px solid var(--bad);
	border-radius: var(--radius);
	background: #fdeaea;
	color: var(--bad);
	font-size: 14px;
}

/* Curierii si metodele de plata.
   Radiourile din sablon n-au <label>, deci textul de langa ele nu e clicabil
   si tinta reala e cerculetul de 13 puncte. Nu putem adauga label-uri fara sa
   umblam in PHP-ul care creeaza comenzi, deci: marim cerculetul si facem
   randul clicabil din bundle (doar unde randul contine un singur radio). */
#OrderForm input[type="radio"], #OrderForm input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0 var(--s2) 0 0;
	vertical-align: middle;
}

#carriers > div, #divcarrier > div, #plata > div {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	min-height: var(--tap);
	padding: var(--s2) var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: var(--s2);
}

#carriers > div img, #divcarrier > div img { margin-right: var(--s2); }
#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); }

#detalii_easybox .btn { margin-top: var(--s1); }

.fm-notita-rea, .fm-eroare { color: var(--bad); font-size: 13px; }

/* Ramburs stins pentru ca lockerul ales n-are terminal de plata. Ramane
   citibil, doar ca vizibil indisponibil. */
#OrderForm label.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.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__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--bad { border-left-color: var(--bad); background: #fdeaea; }

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s1);
	list-style: none;
	margin: var(--s3) 0;
	padding: 0;
	font-size: 13px;
	color: var(--ink-soft);
}

.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;
	}

	.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); }

	/* Pe latimea asta meniul sta pe orizontala, nu mai e off-canvas */
	.nav {
		position: static;
		width: auto;
		max-width: none;
		transform: none;
		overflow: visible;
		background: none;
		border-top: 1px solid var(--line);
	}

	.nav__head, .nav__overlay { display: none; }

	.nav > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		max-width: var(--wrap);
		margin: 0 auto;
		padding: 0 var(--s4);
	}

	.nav a {
		min-height: 0;
		padding: var(--s3) var(--s4);
		border-bottom: 2px solid transparent;
		font-size: 14px;
	}

	.nav a:hover { background: none; border-bottom-color: var(--ink-strong); }

	.sumar { 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; }
	.bara-jos { display: none; }
	.sumar { max-width: 420px; margin-left: auto; }

	/* De la 900 in sus filtrele stau in pagina, deasupra grilei */
	.filtre {
		position: static;
		max-height: none;
		overflow: visible;
		padding: var(--s4) 0;
		border-top: 1px solid var(--line);
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		box-shadow: none;
		transform: none;
		margin-bottom: var(--s5);
	}

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

}

@media (min-width: 1200px) {

	.grid { grid-template-columns: repeat(5, 1fr); }
	.raft { grid-auto-columns: 19%; }

}

/* 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 { display: none !important; }
	body { font-size: 12pt; color: #000; }
}