/* ═══════════════════════════════════════════════════════════════════════
   ImpactAuto — sistem vizual
   Culorile sunt extrase din logo: bleumarinul #0B232D si verdele #7ED957.
   Verdele de brand e prea deschis pentru text pe alb (1.8:1), asa ca pentru
   text folosim varianta inchisa #37801F (5.0:1). Verdele viu ramane fundal
   de buton, cu text bleumarin peste el — 9.4:1, adica AAA.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonturi gazduite local (fara CDN Google: viteza + GDPR) ──────────────
   Patru fisiere, nu zece.

   Erau zece declaratii care trimiteau, de fapt, catre patru fisiere: cele
   trei „IBMPlexSans-*-latin" au aceeasi suma de control, sunt acelasi fisier.
   Sunt fonturi variabile, cu axa de greutate inauntru, deci unul singur da si
   400, si 500, si 600 — dar sub adrese diferite browserul n-avea de unde sti
   ca sunt aceiasi octeti si le cerea de trei ori.

   Peste asta, bucatile veneau taiate „latin" si „latin-ext". Romana are a-uri
   cu caciula in prima si s/t cu virgula in a doua, deci le trage pe amandoua:
   563 de glife pentru o limba careia ii trebuie vreo 120. In total, 356 KB
   ceruti pe primul ecran, in zece cereri, pe legatura unui telefon.

   Acum: cate un fisier de familie, taiat la caracterele romanesti, cu axa
   intacta — greutatea o alege CSS-ul din „font-weight: 100 900". Bucata de
   diacritice ramane separata, fiindca are 3-6 KB si nu are rost sa ingroase
   fisierul mare. 72 KB in patru cereri.

   Se refac cu: python bin/subset-fonturi.py */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonturi/Archivo-ro.woff2') format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonturi/Archivo-ro-ext.woff2') format('woff2-variations');
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/assets/fonturi/IBMPlexSans-ro.woff2') format('woff2-variations');
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193;
}
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url('/assets/fonturi/IBMPlexSans-ro-ext.woff2') format('woff2-variations');
  unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}

/* ── rezervele, croite pe masura fonturilor ──────────────────────────────
   Pagina se deseneaza acum in 0,3 s, cu fontul de sistem, iar cand sosesc
   Archivo si IBM Plex textul se reaseaza. Inainte nu se vedea, fiindca
   primul desen venea oricum tarziu; dupa ce l-am grabit, saltul a iesit la
   iveala — 0,028 la masuratoare, tot din titlul „Ce fel de anvelope cauti?".

   Rezerva nu se poate schimba, dar se poate face sa ocupe exact cat va
   ocupa fontul adevarat. Cifrele de mai jos sunt raportul dintre latimile
   lor, masurat pe o propozitie romaneasca, plus inaltimile de deasupra si
   dedesubtul liniei. Se refac cu bin/subset-fonturi.py, care le si tipareste.

   Cate doua pe familie, si asta e partea care nu se vede din calcul: la
   greutati aldine browserul nu ingroasa Arial, ci ia Arial Bold — care e cu
   7% mai lat. Cu o singura potrivire, titlurile de 700 incapeau pe doua
   randuri in rezerva si pe trei in fontul adevarat, adica exact saltul pe
   care voiam sa-l scoatem. Masurat in browser, nu dedus. */
@font-face {
  font-family: 'Archivo rezervă'; font-weight: 100 650;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto');
  size-adjust: 92.46%; ascent-override: 94.96%; descent-override: 22.71%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo rezervă'; font-weight: 651 900;
  src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Liberation Sans Bold'), local('Roboto Bold'), local('Arial');
  size-adjust: 89.16%; ascent-override: 98.47%; descent-override: 23.55%; line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex rezervă'; font-weight: 100 550;
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto');
  size-adjust: 91.91%; ascent-override: 111.52%; descent-override: 29.92%; line-gap-override: 0%;
}
@font-face {
  font-family: 'IBM Plex rezervă'; font-weight: 551 900;
  src: local('Arial Bold'), local('Helvetica Neue Bold'), local('Liberation Sans Bold'), local('Roboto Bold'), local('Arial');
  size-adjust: 88.85%; ascent-override: 115.37%; descent-override: 30.95%; line-gap-override: 0%;
}

/* ── simboluri ────────────────────────────────────────────────────────── */
:root {
  --bleumarin:      #0B232D;
  --bleumarin-2:    #16333F;
  --verde:          #7ED957;
  --verde-viu:      #6FCE45;
  --verde-text:     #37801F;
  --verde-inchis:   #2C6618;
  --verde-lumina:   #F1FBEC;
  --verde-contur:   #C8EDB4;

  --alb:            #FFFFFF;
  --fundal:         #F6F8F8;
  --contur:         #DFE6E8;
  --contur-tare:    #C3CFD3;
  --text:           #0B232D;
  --text-slab:      #56666D;
  /* 4,75:1 pe alb. Valoarea de dinainte, #7C8A90, avea 3,56:1 — sub pragul
     pentru text mic, iar culoarea asta e folosita in vreo sapte locuri:
     marca de pe card, pretul unitar, notele de sub campuri, etichetele mici.
     O corectam o data, la sursa, nu in fiecare loc. */
  --text-mai-slab:  #667580;

  --rosu:           #C4322B;
  --galben:         #C77E00;

  --r-mic:   6px;
  --r:      10px;
  --r-mare: 16px;

  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px; --s6: 32px;  --s7: 48px;  --s8: 64px;

  --umbra-1: 0 1px 2px rgba(11, 35, 45, .06);
  --umbra-2: 0 2px 4px rgba(11, 35, 45, .06), 0 8px 20px rgba(11, 35, 45, .07);
  --umbra-3: 0 4px 8px rgba(11, 35, 45, .07), 0 16px 40px rgba(11, 35, 45, .10);

  --tranzitie: 160ms cubic-bezier(.2, .6, .3, 1);
}

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

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

body {
  margin: 0;
  font-family: 'IBM Plex Sans', 'IBM Plex rezervă', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--alb);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Archivo', 'Archivo rezervă', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* textarea trebuie sa fie in lista. Fara ea cade pe fontul implicit al
   browserului, 13.3px, iar Safari pe iPhone mareste automat pagina cand
   atingi un camp sub 16px — pagina sare, si omul crede ca a stricat ceva. */
button, input, select, textarea { font: inherit; color: inherit; }

/* cifrele se aliniaza in coloana: preturi, dimensiuni, indici */
.card__pret, .masura, .indici, .produs__pret, .specificatii td,
.camp__input, .paginare, .bara__numar strong { font-variant-numeric: tabular-nums; }

/* Marginea laterala creste cu ecranul. Pe telefon 16px ajung — mai mult si
   raman prea putini pixeli pentru continut; pe desktop 12px lipeau textul de
   marginea ferestrei, ceea ce obliga ochiul sa sara pana la muchie. */
:root { --marja: var(--s6); }
@media (max-width: 1000px) { :root { --marja: var(--s5); } }
@media (max-width:  640px) { :root { --marja: var(--s4); } }

.container { width: min(1320px, 100% - var(--marja) * 2); margin-inline: auto; }

.vizual-ascuns {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--verde-text);
  outline-offset: 2px;
  border-radius: var(--r-mic);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* iconite in linie */
svg[viewBox] { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── butoane ──────────────────────────────────────────────────────────── */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 44px; padding: var(--s3) var(--s5);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-size: .95rem;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  transition: background var(--tranzitie), border-color var(--tranzitie), transform var(--tranzitie);
}
.buton:active { transform: translateY(1px); }

/* Iconitele din butoane au nevoie de o dimensiune, altfel un SVG fara width se
   intinde cat ii permite cutia — sageata de pe "Continua spre plata" ajunsese
   de 178px intr-un buton de 48. "flex: none" o opreste sa se si intinda. */
.buton svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.buton--primar { background: var(--verde); color: var(--bleumarin); }
.buton--primar:hover { background: var(--verde-viu); }
.buton--fantoma { background: var(--alb); border-color: var(--contur-tare); color: var(--text); }
.buton--fantoma:hover { border-color: var(--verde-text); color: var(--verde-text); }
.buton[disabled] { background: var(--fundal); color: var(--text-mai-slab); cursor: not-allowed; }

/* Butonul care sterge ceva ce nu se mai poate aduce inapoi. Contur, nu fundal
   plin: nu vrem sa atraga privirea ca o actiune principala. */
.buton--pericol { background: var(--alb); border-color: var(--rosu); color: var(--rosu); }
.buton--pericol:hover { background: var(--rosu); color: var(--alb); border-color: var(--rosu); }

/* ── stergerea contului ───────────────────────────────────────────────── */
.sterge-cont {
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid var(--contur);
}
.sterge-cont h2 { margin: 0 0 var(--s2); font-size: 1.05rem; color: var(--rosu); }
.sterge-cont p { margin: 0 0 var(--s3); font-size: .9rem; color: var(--text-slab); max-width: 56ch; }
.sterge-cont__nota { font-size: .84rem; }
.sterge-cont__form { display: grid; gap: var(--s3); max-width: 300px; }

/* ── banda de finantare UE ────────────────────────────────────────────── */
.banda-ue { background: var(--fundal); border-bottom: 1px solid var(--contur); }
.banda-ue--subsol { border-bottom: 0; border-top: 1px solid var(--contur); }
.banda-ue__continut {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s2) 0;
}
.banda-ue__text { margin: 0; font-size: .78rem; line-height: 1.4; color: var(--text-slab); }

/* ── antet ────────────────────────────────────────────────────────────── */
.antet { position: sticky; top: 0; z-index: 40; background: var(--alb); border-bottom: 1px solid var(--contur); }
.antet__rand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4);
  padding: var(--s3) 0;
}
.logo { display: block; flex-shrink: 0; }
.logo img { width: auto; height: 40px; }

.cautare { display: flex; position: relative; }
.cautare__camp {
  flex: 1; min-width: 0; height: 46px; padding: 0 var(--s4) 0 44px;
  background: var(--fundal); border: 1px solid var(--contur);
  border-radius: var(--r) 0 0 var(--r); outline-offset: -2px;
}
/* Acelasi motiv ca la campul din hero: exemplul din placeholder e instructiune,
   nu decor, iar la 3,34:1 se citea greu. */
.cautare__camp::placeholder { color: var(--text-slab); opacity: 1; }
.cautare__camp:focus { background: var(--alb); border-color: var(--verde-text); }
.cautare__lupa {
  position: absolute; left: 14px; top: 50%; translate: 0 -50%;
  width: 20px; height: 20px; color: var(--text-mai-slab); pointer-events: none;
}
.cautare__buton { display: inline-flex; align-items: center; gap: 7px;
  height: 46px; padding: 0 var(--s5); border-radius: 0 var(--r) var(--r) 0;
  background: var(--verde); color: var(--bleumarin);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
  border: 1px solid var(--verde); cursor: pointer; white-space: nowrap;
}
.cautare__buton:hover { background: var(--verde-viu); border-color: var(--verde-viu); }
.cautare__buton svg { width: 18px; height: 18px; display: none; }

.cos {
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; flex-shrink: 0;
  border: 1px solid var(--contur); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.cos:hover { border-color: var(--verde-text); background: var(--verde-lumina); }
.cos svg { width: 22px; height: 22px; }
.cos__numar {
  position: absolute; top: -7px; right: -7px;
  min-width: 21px; padding: 0 5px; text-align: center;
  font-size: .74rem; font-weight: 700; line-height: 21px;
  color: var(--bleumarin); background: var(--verde);
  border: 2px solid var(--alb); border-radius: 999px;
}

/* ── firimituri ───────────────────────────────────────────────────────── */
.firimituri {
  display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap;
  padding: var(--s4) 0; font-size: .85rem; color: var(--text-slab);
}
.firimituri a { padding: 2px 4px; border-radius: var(--r-mic); }
.firimituri a:hover { color: var(--verde-text); text-decoration: underline; }
.firimituri__sageata { width: 14px; height: 14px; color: var(--contur-tare); }
.firimituri [aria-current] { color: var(--text); font-weight: 500; }

/* ── aranjament listare ───────────────────────────────────────────────── */
.listare { display: grid; grid-template-columns: 286px minmax(0, 1fr); gap: var(--s6); align-items: start; padding-bottom: var(--s8); }

/* ── panoul de filtre ─────────────────────────────────────────────────── */
.coloana-filtre { position: sticky; top: 88px; }
.panou {
  border: 1px solid var(--contur); border-radius: var(--r-mare);
  background: var(--alb); overflow: hidden;
}
.panou__antet {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4); border-bottom: 1px solid var(--contur); background: var(--fundal);
}
.panou__titlu { font-size: 1rem; }
.panou__reset { font-size: .82rem; font-weight: 500; color: var(--verde-text); }
.panou__reset:hover { text-decoration: underline; }

.panou__grup { margin: 0; padding: var(--s4); border: 0; border-bottom: 1px solid var(--contur); }
.panou__grup legend {
  padding: 0 0 var(--s3); font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-mai-slab);
}

.camp + .camp { margin-top: var(--s3); }
.camp__eticheta { display: block; margin-bottom: 5px; font-size: .82rem; font-weight: 500; color: var(--text-slab); }
.camp__select, .camp__input {
  width: 100%; min-height: 44px; padding: 0 var(--s3);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mic);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.camp__select {
  padding-right: 34px; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356666D' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px;
}
.camp__select:hover, .camp__input:hover { border-color: var(--contur-tare); }
.camp__select:focus, .camp__input:focus { border-color: var(--verde-text); box-shadow: 0 0 0 3px var(--verde-lumina); outline: none; }
.camp--interval { display: flex; align-items: center; gap: var(--s2); }
.camp__separator { color: var(--text-mai-slab); }
.panou__aplica { width: calc(100% - var(--s4) * 2); margin: var(--s4); }

.filtre-mobil { display: none; }

/* ── bara de deasupra rezultatelor ────────────────────────────────────── */
.bara {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4);
}
.bara__numar { margin: 0; color: var(--text-slab); font-size: .92rem; }
.bara__numar strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.3rem; color: var(--text); margin-right: 3px; }
.bara__sortare { display: flex; align-items: center; gap: var(--s2); font-size: .88rem; color: var(--text-slab); }
.bara__sortare select {
  min-height: 40px; padding: 0 var(--s3); cursor: pointer;
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mic);
}

/* ── filtre active ────────────────────────────────────────────────────── */
.active { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s4); padding: 0; }
.active__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px var(--s3); font-size: .84rem;
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  border-radius: 999px; color: var(--verde-inchis);
  transition: background var(--tranzitie);
}
.active__chip:hover { background: #E4F7D9; }
.active__nume { color: var(--text-slab); }
.active__chip svg { width: 14px; height: 14px; }

/* ── grila de produse ─────────────────────────────────────────────────── */
.grila {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.card {
  border: 1px solid var(--contur); border-radius: var(--r-mare);
  background: var(--alb); overflow: hidden;
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie), transform var(--tranzitie);
}
.card:hover { border-color: var(--verde-contur); box-shadow: var(--umbra-2); transform: translateY(-2px); }
.card__link { display: flex; flex-direction: column; height: 100%; }

.card__media { position: relative; padding: var(--s3); background: var(--alb); }
.card__media img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.card__sezon {
  position: absolute; top: var(--s3); right: var(--s3);
  display: grid; place-items: center; width: 30px; height: 30px;
  font-size: .95rem; border-radius: 50%; background: var(--fundal); border: 1px solid var(--contur);
}
.card__sezon--vara { background: #FFF6E0; border-color: #F2DFA8; }
.card__sezon--iarna { background: #E9F3FB; border-color: #BFDCF0; }
.card__sezon--all_season { background: var(--verde-lumina); border-color: var(--verde-contur); }

.card__corp { flex: 1; padding: 0 var(--s4) var(--s3); }
.card__marca {
  margin: 0 0 2px; font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mai-slab);
}
.card__model { font-size: 1rem; margin-bottom: var(--s2); }
.card__masura { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--s3); font-size: .86rem; }
.masura { font-weight: 600; }
.indici { color: var(--text-slab); }
.insigna {
  padding: 1px 6px; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--bleumarin); background: var(--verde); border-radius: var(--r-mic);
}

.ue-mini { display: flex; gap: var(--s2); margin: 0; }
.ue-mini > div { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.ue-mini dt { font-size: .62rem; letter-spacing: .02em; color: var(--text-mai-slab); }
.ue-mini dd { margin: 0; }

.nota {
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 26px; height: 22px; padding: 0 5px;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .8rem; font-weight: 700;
  color: #fff; background: var(--text-mai-slab); border-radius: var(--r-mic);
}
/* Fara "opacity": pe o insigna, transparenta amesteca albul cu fundalul si
   scade contrastul cu ~0,8 — destul cat "71 dB" sa pice sub prag. Diferenta
   dintre numar si unitate o face marimea, care nu costa nimic. */
.nota small { font-size: .58rem; font-weight: 500; }
.nota--a { background: #128A3E; }
.nota--b { background: #56A82A; }
.nota--c { background: #B39400; }
.nota--d { background: #D07A00; }
.nota--e { background: #D65A12; }
.nota--f, .nota--g { background: #C4322B; }
.nota--gri, .nota--x { background: #8A979C; }

.card__subsol {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4) var(--s4); border-top: 1px solid var(--fundal);
}
.card__pret { margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.3rem; font-weight: 700; }
.card__disponibil { display: flex; align-items: center; gap: 5px; margin: 0; font-size: .76rem; color: var(--text-slab); width: 100%; }
.punct { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.punct--verde { background: #2E9E4F; }
.punct--galben { background: var(--galben); }
.card__termen { color: var(--text-mai-slab); }

/* ── stare goala ──────────────────────────────────────────────────────── */
.gol {
  padding: var(--s8) var(--s5); text-align: center;
  background: var(--fundal); border-radius: var(--r-mare);
}
.gol svg { width: 44px; height: 44px; margin: 0 auto var(--s4); color: var(--contur-tare); }
.gol h2 { font-size: 1.25rem; margin-bottom: var(--s2); }
.gol p { margin: 0 0 var(--s2); color: var(--text-slab); }

/* ── paginare ─────────────────────────────────────────────────────────── */
.paginare { display: flex; gap: var(--s1); flex-wrap: wrap; justify-content: center; align-items: center; margin: var(--s7) 0 0; }
.paginare a, .paginare > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 42px; min-height: 42px; padding: 0 var(--s3); font-size: .9rem;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
  transition: border-color var(--tranzitie), color var(--tranzitie);
}
.paginare a:hover { border-color: var(--verde-text); color: var(--verde-text); }
.paginare .activ { background: var(--bleumarin); border-color: var(--bleumarin); color: #fff; font-weight: 600; }
.paginare__puncte { border: 0 !important; min-width: auto; color: var(--text-mai-slab); }
.paginare svg { width: 16px; height: 16px; }

/* ── pagina de produs ─────────────────────────────────────────────────── */
.produs { display: grid; grid-template-columns: minmax(300px, 480px) minmax(0, 1fr); gap: var(--s7); align-items: start; }
.tabel__nota { font-size: .82em; color: var(--text-slab); }
.produs__poza {
  padding: var(--s6); background: var(--alb);
  border: 1px solid var(--contur); border-radius: var(--r-mare);
}
.produs__poza img { margin-inline: auto; }
/* Marca, modelul si masura sunt span-uri intr-un singur <h1>, ca titlul paginii
   sa citeasca "KORMORAN SnowPro 185/65 R14 86T". Ca sa arate ca inainte, cand
   erau <p> si <h1> separate, li se cere sa se poarte ca blocuri. */
.produs__cap { margin: 0 0 var(--s5); font-weight: 400; }
.produs__cap .produs__marca,
.produs__cap .produs__titlu { display: block; }
.produs__cap .produs__titlu {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; line-height: 1.15;
}

.produs__marca {
  margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: .8rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--verde-text);
}
.produs__titlu { margin: var(--s1) 0 var(--s2); font-size: clamp(1.6rem, 3vw, 2.1rem); }
.produs__masura { display: flex; margin-bottom: 0 !important; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s5); font-size: 1.05rem; color: var(--text-slab); }
.produs__masura strong { color: var(--text); }
.insigna--sezon { background: var(--fundal); color: var(--text-slab); border: 1px solid var(--contur); }

.eticheta-ue {
  display: flex; gap: var(--s5); flex-wrap: wrap; margin: 0 0 var(--s5);
  padding: var(--s4); background: var(--fundal); border-radius: var(--r);
}
.eticheta-ue > div { display: flex; flex-direction: column; gap: 6px; }
.eticheta-ue dt { font-size: .76rem; color: var(--text-slab); }
.eticheta-ue dd { margin: 0; }
.eticheta-ue .nota { min-width: 40px; height: 32px; font-size: 1rem; }

.cumpara { padding: var(--s5); border: 1px solid var(--contur); border-radius: var(--r-mare); background: var(--alb); box-shadow: var(--umbra-1); }
.produs__pret { margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.produs__pret span { margin-left: var(--s2); font-family: 'IBM Plex Sans', 'IBM Plex rezervă', sans-serif; font-size: .88rem; font-weight: 400; color: var(--text-slab); }
.cumpara__stoc { display: flex; align-items: center; gap: 6px; margin: var(--s3) 0 var(--s4); font-size: .92rem; font-weight: 500; }
.cumpara__stoc .punct { width: 8px; height: 8px; }
.cumpara__termen { font-weight: 400; color: var(--text-slab); }
.cumpara__form { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.cumpara__form label { font-size: .86rem; color: var(--text-slab); }
.cumpara__form input {
  width: 76px; min-height: 46px; padding: 0 var(--s2); text-align: center; font-weight: 600;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
}
.cumpara__form .buton { flex: 1; min-width: 190px; min-height: 46px; }
.cumpara__transport { display: flex; gap: 6px; margin: var(--s4) 0 0; font-size: .82rem; color: var(--text-slab); }
.cumpara__transport svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--text-mai-slab); }

.produs__jos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); margin: var(--s8) 0; }
.specificatii h2, .descriere h2, .variante h2 { font-size: 1.2rem; margin-bottom: var(--s4); }
.specificatii table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.specificatii th, .specificatii td { padding: var(--s3) var(--s1); text-align: left; border-bottom: 1px solid var(--contur); }
.specificatii th { font-weight: 400; color: var(--text-slab); width: 46%; }
.specificatii td { font-weight: 500; }
.specificatii a { color: var(--verde-text); text-decoration: underline; }
.descriere p { margin: 0 0 var(--s3); color: #23343C; }

.variante { margin-bottom: var(--s8); }
/* Aici le arătăm pe TOATE, chiar dacă ultimul rând rămâne cu goluri: sunt
   variante ale aceluiași produs, iar una ascunsă e o vânzare pierdută. */
.variante ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Coloane FIXE în interiorul fiecărui chenar, nu „împinge preţul la dreapta":
   cu flex, poziţia indicelui se muta după cât de lungă era dimensiunea, iar
   textul ieşea în trepte de la un chenar la altul. Aşa, măsura, indicele şi
   preţul cad pe aceleaşi trei linii verticale în toate chenarele. */
/* Trei coloane egale: masura la stanga, indicele exact la mijloc, pretul la
   dreapta. Cu latimi diferite, indicele cadea intre ele, dar nu la jumatate. */
.variante a {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s4); min-height: 62px; font-size: .95rem;
  border: 1px solid var(--contur); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.variante a:hover { border-color: var(--verde-contur); background: var(--verde-lumina); }
.variante a strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-variant-numeric: tabular-nums; }
/* Centrat in coloana lui, deci exact la mijlocul distantei dintre masura si
   pret. Coloanele fiind egale in toate chenarele, indicii cad pe aceeasi
   verticala oricat de lung ar fi textul din stanga sau din dreapta. */
.variante a > span:not(.variante__pret) {
  font-size: .84rem; color: var(--text-slab); text-align: center;
  font-variant-numeric: tabular-nums;
}
.variante__pret {
  text-align: right; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 520px) {
  .variante ul { grid-template-columns: 1fr; }
}

/* ── acasa ────────────────────────────────────────────────────────────── */

.sectiune { margin: var(--s8) 0; }
.sectiune > h2 { font-size: 1.4rem; margin-bottom: var(--s5); }
.categorii { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.categorie {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s5); border: 1px solid var(--contur); border-radius: var(--r-mare);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie), transform var(--tranzitie);
}
.categorie:hover { border-color: var(--verde-contur); box-shadow: var(--umbra-2); transform: translateY(-2px); }
.categorie strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.15rem; }
.categorie small { color: var(--text-slab); font-size: .88rem; }
.categorie__nr { margin-top: var(--s2); font-size: .8rem; font-weight: 600; color: var(--verde-text); }

.chipsuri { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  /* 44px, minimul de atingere de la Apple si Material. Erau 42. */
  min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--contur); border-radius: var(--r);
  font-weight: 500; transition: border-color var(--tranzitie), background var(--tranzitie);
}
.chip:hover { border-color: var(--verde-contur); background: var(--verde-lumina); }
.chip small { color: var(--text-mai-slab); font-weight: 400; }

/* ── subsol ───────────────────────────────────────────────────────────── */
.subsol { margin-top: var(--s8); background: var(--bleumarin); color: rgba(255, 255, 255, .76); }
.subsol__coloane { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding: var(--s7) 0; }
.subsol h2 { font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: #fff; margin-bottom: var(--s3); }
.subsol ul { list-style: none; margin: 0; padding: 0; }
.subsol li { margin-bottom: 6px; }
.subsol a { font-size: .88rem; }
.subsol a:hover { color: var(--verde); text-decoration: underline; }
.subsol p { font-size: .88rem; margin: 0 0 var(--s2); }
.subsol .banda-ue { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.subsol .banda-ue__text { color: rgba(255, 255, 255, .68); }
.subsol__jos { padding: var(--s4) 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.subsol__jos p { margin: 0; font-size: .8rem; }

.eroare { padding: var(--s8) 0; text-align: center; }
.eroare h1 { font-size: 1.9rem; margin-bottom: var(--s3); }
.eroare p { color: var(--text-slab); margin-bottom: var(--s5); }

/* ═══ ecrane medii ════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .listare { grid-template-columns: 1fr; gap: var(--s4); }
  .coloana-filtre { position: static; }
  .produs { grid-template-columns: 1fr; gap: var(--s5); }
  .produs__jos { grid-template-columns: 1fr; gap: var(--s6); }

  /* filtrele se strang intr-un panou deschis la cerere */
  .filtre-mobil {
    display: inline-flex; align-items: center; gap: var(--s2);
    min-height: 46px; padding: 0 var(--s4); width: 100%; justify-content: center;
    background: var(--alb); border: 1px solid var(--contur-tare); border-radius: var(--r);
    font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; cursor: pointer;
  }
  .filtre-mobil svg { width: 20px; height: 20px; }
  .filtre-mobil__nr {
    min-width: 22px; padding: 0 6px; font-size: .78rem; line-height: 22px;
    color: var(--bleumarin); background: var(--verde); border-radius: 999px;
  }
  .coloana-filtre { display: none; }
  .coloana-filtre.deschis { display: block; }
}

/* ═══ telefoane ═══════════════════════════════════════════════════════ */
@media (max-width: 720px) {

  /* antetul se aseaza pe doua randuri: logo + cos sus, cautarea dedesubt */
  .antet__rand { grid-template-columns: auto auto; justify-content: space-between; gap: var(--s3); }
  .cautare { grid-column: 1 / -1; grid-row: 2; }
  .logo img { height: 34px; }
  .cos span:not(.cos__numar) { display: none; }

  .navigare .container { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .navigare .container::-webkit-scrollbar { display: none; }
  .navigare a { white-space: nowrap; }
  .navigare__sep { display: none; }

  .grila { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--s3); }
  .card__corp { padding: 0 var(--s3) var(--s2); }
  .card__subsol { padding: var(--s2) var(--s3) var(--s3); }
  .card__pret { font-size: 1.15rem; }
  .ue-mini dt { font-size: .58rem; }

  
  .cumpara__form .buton { min-width: 100%; }

  /* linkurile din subsol au nevoie de tinta mai mare la atingere */
  .subsol li { margin-bottom: 0; }
  .subsol li a { display: inline-block; padding: 9px 0; }
}

/* ═══ titlu de pagina ═════════════════════════════════════════════════ */
.titlu-pagina { font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin-bottom: var(--s5); }

/* ═══ alerte ══════════════════════════════════════════════════════════ */
.alerta {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); margin-bottom: var(--s5);
  border: 1px solid var(--contur); border-radius: var(--r); background: var(--fundal);
}
.alerta svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.alerta strong { display: block; font-family: 'Archivo', 'Archivo rezervă', sans-serif; }
.alerta p { margin: 2px 0 0; font-size: .9rem; color: var(--text-slab); }
.alerta--atentie { background: #FFF8E8; border-color: #F0DCA8; }
.alerta--atentie svg { color: var(--galben); }
.alerta--eroare { background: #FDF0EF; border-color: #F2C9C6; }
.alerta--eroare svg { color: var(--rosu); }
.alerta--bine { background: var(--verde-lumina); border-color: var(--verde-contur); }
.alerta--bine svg { color: var(--verde-text); }

/* ═══ cos ═════════════════════════════════════════════════════════════ */
/* Nota: formularul din pagina cosului avea si el clasa ".cos", aceeasi cu
   iconita din antet — deci mostenea "48x48 cu chenar" si toata pagina arata
   rupta. Acum se cheama ".cos-lista", iar ".cos" a ramas doar al antetului. */

/* Produsele si sumarul, pe doua coloane. Sumarul se lipeste la scroll: intr-un
   cos lung, totalul si butonul de plata trebuie sa ramana la vedere. */
.cos-pagina {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s6);
  align-items: start;
}
.cos-lista { min-width: 0; }
.cos__linii { display: grid; gap: var(--s3); }

.linie {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
  gap: var(--s4); align-items: center;
  padding: var(--s3); border: 1px solid var(--contur); border-radius: var(--r-mare);
}
.linie--ajustata { border-color: #F0DCA8; background: #FFFCF5; }
.linie__poza img { width: 96px; height: 96px; object-fit: contain; }
.linie__marca {
  margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mai-slab);
}
.linie__model { font-size: 1.05rem; margin: 2px 0 4px; }
.linie__model a:hover { color: var(--verde-text); }
.linie__masura { margin: 0; font-size: .88rem; color: var(--text-slab); font-variant-numeric: tabular-nums; }
.linie__nota { margin: 6px 0 0; font-size: .82rem; color: #8A6100; }

.linie__cantitate { display: flex; align-items: center; gap: var(--s2); }
.linie__nr {
  width: 72px; min-height: 44px; padding: 0 var(--s2); text-align: center; font-weight: 600;
  border: 1px solid var(--contur); border-radius: var(--r-mic); font-variant-numeric: tabular-nums;
}
.linie__scoate {
  /* flex-ul il stramta sub 44px cand numele produsului e lung. E buton care
     sterge ceva: il scoatem din negociere, nu se micsoreaza niciodata. */
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; min-width: 44px;
  background: none; border: 1px solid transparent; border-radius: var(--r-mic);
  color: var(--text-mai-slab); cursor: pointer; transition: color var(--tranzitie), border-color var(--tranzitie);
}
.linie__scoate:hover { color: var(--rosu); border-color: #F2C9C6; }
.linie__scoate svg { width: 20px; height: 20px; }

.linie__pret { text-align: right; min-width: 116px; }
.linie__total { margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.linie__unitar { margin: 2px 0 0; font-size: .78rem; color: var(--text-mai-slab); font-variant-numeric: tabular-nums; }

.cos__actiuni {
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--contur);
}
/* "Continua cumparaturile" era un link discret. E in interesul magazinului sa
   fie usor de gasit — cine se intoarce in catalog mai adauga produse — deci
   arata ca un buton, cu sageata inapoi si conturul in verde. */
.cos__inapoi {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5);
  font-size: .92rem; font-weight: 600; color: var(--verde-text);
  border: 1px solid var(--verde-contur); border-radius: var(--r);
  background: var(--verde-lumina);
  transition: background var(--tranzitie), border-color var(--tranzitie);
}
.cos__inapoi:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.cos__inapoi::before {
  content: ''; width: 16px; height: 16px; flex: none;
  background: currentColor;
  -webkit-mask: var(--sageata-inapoi) center / contain no-repeat;
  mask: var(--sageata-inapoi) center / contain no-repeat;
}
.cos__actiuni .buton--fantoma { min-height: 44px; font-size: .9rem; margin-left: auto; }

.sumar {
  position: sticky; top: var(--s5);
  padding: var(--s5); border: 1px solid var(--contur); border-radius: var(--r-mare);
  background: var(--alb); box-shadow: var(--umbra-1);
}
.sumar h2 { font-size: 1.1rem; margin-bottom: var(--s4); }
.sumar__linii { margin: 0 0 var(--s4); }
.sumar__linii > div { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; }
.sumar__linii dt { color: var(--text-slab); font-size: .92rem; }
.sumar__linii dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.sumar__total { border-top: 1px solid var(--contur); margin-top: var(--s2); padding-top: var(--s3) !important; }
.sumar__total dt { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; color: var(--text) !important; font-size: 1rem !important; }
.sumar__total dd { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.5rem; font-weight: 700; }
.sumar__tva { margin: 0 0 var(--s4); font-size: .8rem; color: var(--text-mai-slab); }
/* Butonul ajunsese de 243px inaltime fiindca se intindea pe toata coloana.
   Inaltime fixa, confortabila la deget (48px > minimul de 44). */
.sumar__continua {
  width: 100%; min-height: 48px; height: 48px; padding: 0 var(--s5);
  font-size: .95rem;
}
/* Sageata, ceva mai mica decat textul: e un indiciu de directie, nu o eticheta */
.sumar__continua svg { width: 16px; height: 16px; }
.sumar__increderi { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s2); }
.sumar__increderi li { display: flex; align-items: center; gap: var(--s2); font-size: .84rem; color: var(--text-slab); }
.sumar__increderi svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--verde-text); }

@media (max-width: 900px) {
  .cos-pagina { grid-template-columns: minmax(0, 1fr); }
  .sumar { position: static; }
}
@media (max-width: 720px) {
  .linie {
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-areas: "poza info" "cant pret";
    row-gap: var(--s3);
  }
  .linie__poza { grid-area: poza; }
  .linie__poza img { width: 76px; height: 76px; }
  .linie__info { grid-area: info; }
  .linie__cantitate { grid-area: cant; }
  .linie__pret { grid-area: pret; }
  .sumar { max-width: none; }
}

/* ── informarea despre dreptul de retur ───────────────────────────────── */
.cumpara__retur {
  display: flex; gap: 8px; align-items: flex-start;
  margin: var(--s4) 0 0; padding: var(--s3);
  font-size: .84rem; line-height: 1.45;
  background: #FFF8E8; border: 1px solid #F0DCA8; border-radius: var(--r-mic);
}
.cumpara__retur svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--galben); }
.cumpara__retur strong { font-weight: 600; }
.cumpara__retur--bine { background: var(--verde-lumina); border-color: var(--verde-contur); color: var(--verde-inchis); }
.cumpara__retur--bine svg { color: var(--verde-text); }

.linie__retur {
  display: inline-block; margin: 6px 0 0; padding: 2px 8px;
  font-size: .76rem; color: #8A6100;
  background: #FFF8E8; border: 1px solid #F0DCA8; border-radius: 999px;
}
.sumar__avertisment { color: #8A6100 !important; }
.sumar__avertisment svg { color: var(--galben) !important; }

/* ═══ checkout ════════════════════════════════════════════════════════ */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s6); align-items: start; padding-bottom: var(--s8); }
.checkout__coloana { display: grid; gap: var(--s5); }

.bloc { margin: 0; padding: var(--s5); border: 1px solid var(--contur); border-radius: var(--r-mare); }
.bloc__titlu {
  padding: 0 0 var(--s4); font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: 1.05rem; font-weight: 700;
}
.camp-pereche { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }

/* Regula generala ".camp + .camp { margin-top }" e scrisa pentru campuri
   stivuite unul sub altul. Intr-o pereche asezata pe orizontala se aplica tot,
   asa ca al doilea camp cobora cu exact 12px fata de primul si perechea iesea
   stramba. Aici spatierea o face deja "gap"-ul grilei. */
/* regula generala e mai jos in fisier, ca sa acopere si formularele din
   afara blocurilor de checkout (crearea contului, datele mele) */
.bloc .camp + .camp, .bloc .camp-pereche + .camp, .bloc .camp + .camp-pereche,
.bloc .camp-pereche + .camp-pereche { margin-top: var(--s3); }
.obligatoriu { color: var(--rosu); }
.camp__ajutor { margin: 4px 0 0; font-size: .78rem; color: var(--text-mai-slab); }
.camp__eroare {
  display: flex; align-items: center; gap: 5px;
  margin: 5px 0 0; font-size: .8rem; font-weight: 500; color: var(--rosu);
}
.camp__eroare::before { content: '!'; display: grid; place-items: center; width: 15px; height: 15px; font-size: .7rem; color: #fff; background: var(--rosu); border-radius: 50%; flex-shrink: 0; }
.camp__input--eroare { border-color: var(--rosu) !important; }
.camp__input--eroare:focus { box-shadow: 0 0 0 3px #FDF0EF !important; }

.comutator { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
.comutator__optiune { flex: 1; }
.comutator__optiune input { position: absolute; opacity: 0; width: 0; height: 0; }
.comutator__optiune span {
  display: block; padding: var(--s3); text-align: center; font-weight: 500; cursor: pointer;
  border: 1px solid var(--contur); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.comutator__optiune input:checked + span { border-color: var(--verde-text); background: var(--verde-lumina); color: var(--verde-inchis); font-weight: 600; }
.comutator__optiune input:focus-visible + span { outline: 3px solid var(--verde-text); outline-offset: 2px; }

.checkout__sumar {
  position: sticky; top: 88px;
  padding: var(--s5); border: 1px solid var(--contur); border-radius: var(--r-mare);
  background: var(--alb); box-shadow: var(--umbra-1);
}
.checkout__sumar h2 { font-size: 1.05rem; margin-bottom: var(--s4); }

.mini-linii { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.mini-linii li { display: flex; align-items: center; gap: var(--s3); }
.mini-linii img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.mini-linii > li > div { min-width: 0; flex: 1; }
.mini-linii__nume { margin: 0; font-size: .88rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-linii__det { margin: 1px 0 0; font-size: .78rem; color: var(--text-slab); font-variant-numeric: tabular-nums; }
.mini-linii__pret { font-weight: 600; font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.acord { margin: var(--s4) 0 0; padding: var(--s3); border-radius: var(--r-mic); background: var(--fundal); }
.acord label { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; font-size: .85rem; line-height: 1.45; }
.acord input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--verde-text); cursor: pointer; }
.acord a { color: var(--verde-text); text-decoration: underline; }
.acord--atentie { background: #FFF8E8; border: 1px solid #F0DCA8; }
.acord .camp__eroare { margin-left: 28px; }

.checkout__plata { width: 100%; margin-top: var(--s5); }
.checkout__plata svg { width: 20px; height: 20px; }
.checkout__nota { margin: var(--s3) 0 0; font-size: .78rem; text-align: center; color: var(--text-mai-slab); }

/* ═══ confirmare ══════════════════════════════════════════════════════ */
.confirmare { max-width: 620px; margin: var(--s7) auto var(--s8); text-align: center; }
.confirmare__bifa {
  width: 68px; height: 68px; margin: 0 auto var(--s5);
  display: grid; place-items: center;
  background: var(--verde); border-radius: 50%; color: var(--bleumarin);
}
.confirmare__bifa svg { width: 34px; height: 34px; stroke-width: 3; }
.confirmare h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.confirmare__numar { margin: var(--s3) 0 0; font-size: 1.05rem; }
.confirmare__numar strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; letter-spacing: .02em; }
.confirmare__text { margin: var(--s3) 0 var(--s6); color: var(--text-slab); }
.confirmare__cutie {
  margin-bottom: var(--s4); padding: var(--s5); text-align: left;
  border: 1px solid var(--contur); border-radius: var(--r-mare);
}
.confirmare__cutie h2 { font-size: 1rem; margin-bottom: var(--s4); }
.confirmare__adresa { margin: 0; line-height: 1.7; }
.confirmare__nota { margin: var(--s4) 0 0; font-size: .84rem; color: var(--text-slab); }

@media (max-width: 1000px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout__sumar { position: static; }
}
@media (max-width: 560px) {
  .camp-pereche { grid-template-columns: 1fr; }
}

/* ═══ erou cu fotografie ══════════════════════════════════════════════ */
.erou { position: relative; isolation: isolate; padding: var(--s8) 0; color: #fff; overflow: hidden; }
.erou__fundal { position: absolute; inset: 0; z-index: -2; }
.erou__fundal img { width: 100%; height: 100%; object-fit: cover; }
/* stratul întunecat ține textul lizibil peste orice zonă a fotografiei */
.erou::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(11,35,45,.94) 0%, rgba(11,35,45,.86) 45%, rgba(11,35,45,.55) 100%);
}
.erou__continut { position: relative; }
.erou h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 15ch; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.erou__subtitlu { margin: var(--s3) 0 var(--s6); font-size: 1.05rem; color: rgba(255,255,255,.86); max-width: 46ch; }
.erou__subtitlu strong { color: var(--verde); }
.erou__cautare { display: flex; max-width: 620px; box-shadow: 0 8px 32px rgba(0,0,0,.25); border-radius: var(--r); }
/* Câmpul avea fundal alb scris fix, dar nicio culoare de text — așa că
   moștenea albul din hero și scriai alb pe alb. Acum ia suprafața și cerneala
   temei, ca toate celelalte câmpuri din site. */
.erou__cautare input {
  flex: 1; min-width: 0; min-height: 56px; padding: 0 var(--s4); font-size: 1.02rem;
  color: var(--text); background: var(--alb);
  border: 0; border-radius: var(--r) 0 0 var(--r);
}
/* Placeholder-ul de aici nu e decor: poarta exemplul dupa care omul intelege
   ce sa scrie. La 3,56:1 era prea palid, asa ca ia culoarea de text estompat
   „tare" — 5,97:1 pe alb, si tot se distinge de o valoare completata. */
.erou__cautare input::placeholder { color: var(--text-slab); opacity: 1; }
.erou__cautare .buton { min-height: 56px; border-radius: 0 var(--r) var(--r) 0; }
.erou__cautare .buton svg { width: 18px; height: 18px; }
.erou__increderi { display: flex; gap: var(--s5); flex-wrap: wrap; list-style: none; margin: var(--s6) 0 0; padding: 0; }
.erou__increderi li { display: flex; align-items: center; gap: 7px; font-size: .88rem; color: rgba(255,255,255,.82); }
.erou__increderi svg { width: 18px; height: 18px; color: var(--verde); }

/* ═══ selector de categorii ═══════════════════════════════════════════ */
.categorii-bara { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-bottom: var(--s5); }
.cat-buton {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie), background var(--tranzitie);
}
.cat-buton:hover { border-color: var(--verde-contur); box-shadow: var(--umbra-2); }
.cat-buton--activ { border-color: var(--verde-text); background: var(--verde-lumina); }
.cat-buton__icon {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  background: var(--fundal); border-radius: 50%; color: var(--text-slab);
  transition: background var(--tranzitie), color var(--tranzitie);
}
.cat-buton__icon svg { width: 26px; height: 26px; }
.cat-buton:hover .cat-buton__icon { color: var(--verde-text); }
.cat-buton--activ .cat-buton__icon { background: var(--verde); color: var(--bleumarin); }
.cat-buton__text { display: flex; flex-direction: column; min-width: 0; }
.cat-buton__text strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1rem; }
.cat-buton__text small { font-size: .8rem; color: var(--text-slab); }
.cat-buton--activ .cat-buton__text strong { color: var(--verde-inchis); }

/* ═══ buton de coș în grilă ═══════════════════════════════════════════ */
.card { display: flex; flex-direction: column; }
.card__link { flex: 1; }
.card__adauga { display: flex; gap: 6px; padding: 0 var(--s4) var(--s4); }
.card__buc {
  width: 56px; min-height: 42px; padding: 0 4px; text-align: center; font-weight: 600;
  color: var(--text); background: var(--alb);
  border: 1px solid var(--contur); border-radius: var(--r-mic);
  font-variant-numeric: tabular-nums;
}
.card__buc:focus { border-color: var(--verde-text); outline: none; box-shadow: 0 0 0 3px var(--verde-lumina); }
.card__adauga button {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 var(--s3);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .86rem; font-weight: 700;
  color: var(--bleumarin); background: var(--verde); border: 0; border-radius: var(--r-mic);
  cursor: pointer; transition: background var(--tranzitie), color var(--tranzitie);
}
.card__adauga button:hover { background: var(--verde-viu); }
.card__adauga button svg { width: 17px; height: 17px; }
.card__adauga button[disabled] { background: var(--fundal-3); color: var(--text-mai-slab); cursor: not-allowed; }
.card__adauga button.e-ocupat { opacity: .65; }
.card__adauga button.e-adaugat { background: var(--verde-inchis); color: #fff; }

/* ═══ iconițe în panoul de filtre ═════════════════════════════════════ */
.panou__grup legend { display: flex; align-items: center; gap: 7px; }
.panou__grup legend svg { width: 15px; height: 15px; color: var(--verde-text); }
.camp__eticheta { display: flex; align-items: center; gap: 6px; }
.camp__icon { width: 14px; height: 14px; color: var(--text-mai-slab); flex-shrink: 0; }

/* ═══ secțiuni pe prima pagină ════════════════════════════════════════ */
.sectiune__cap { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.sectiune__cap h2 { margin: 0; }
.sectiune__link { display: inline-flex; align-items: center; gap: 5px; font-size: .9rem; font-weight: 600; color: var(--verde-text); }
.sectiune__link:hover { text-decoration: underline; }
.sectiune__link svg { width: 16px; height: 16px; }

.marci {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
/* Chenarele au toate acelasi raport, iar fisierele au fost refacute pe o panza
   comuna cu acelasi spatiu in jurul semnului — asa scrisul din logo-uri se vede
   la aceeasi marime, indiferent cat de lat sau de inalt e semnul fiecarei marci. */
.marca {
  display: grid; place-items: center; padding: var(--s3);
  /* Latimea trebuie sa fie fixata explicit. Fara ea, inaltimea vine din randul
     grilei, iar "aspect-ratio" o inmulteste inapoi in latime — chenarele ieseau
     de 192px in coloane de 174px si impingeau pagina in afara ecranului. */
  width: 100%; aspect-ratio: 2 / 1;
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie), transform var(--tranzitie);
}
.marca:hover { border-color: var(--verde-contur); box-shadow: var(--umbra-2); transform: translateY(-2px); }
.marca img { width: 100%; max-width: 150px; height: auto; }

/* ═══ Drive and Care ══════════════════════════════════════════════════ */
.drive-care { margin-top: var(--s8); padding: var(--s8) 0; background: var(--bleumarin); color: #fff; }
.drive-care__grila { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--s7); align-items: center; }
.drive-care__eticheta {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 var(--s3);
  padding: 5px 12px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--verde); background: rgba(126,217,87,.14); border-radius: 999px;
}
.drive-care__eticheta svg { width: 15px; height: 15px; }
.drive-care h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin-bottom: var(--s4); }
.drive-care p { margin: 0 0 var(--s3); color: rgba(255,255,255,.8); line-height: 1.7; max-width: 62ch; }
.drive-care strong { color: #fff; }
.drive-care__final {
  margin-top: var(--s4) !important; padding-left: var(--s4);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.1rem; font-weight: 700;
  color: var(--verde) !important; border-left: 3px solid var(--verde);
}
.drive-care__puncte { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.drive-care__puncte li {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s4); background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--r);
}
.drive-care__puncte svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--verde); }
.drive-care__puncte strong { display: block; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .96rem; }
.drive-care__puncte span { font-size: .85rem; color: rgba(255,255,255,.7); }

/* ═══ subsol: logo și insigne ANPC ════════════════════════════════════ */
.subsol__logo { height: 30px; width: auto; margin-bottom: var(--s3); }
.subsol__anpc { display: flex; flex-direction: column; gap: var(--s2); }
.subsol__anpc img { max-width: 150px; height: auto; border-radius: 4px; }

.sari-la-continut {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: var(--s3) var(--s4); background: var(--verde); color: var(--bleumarin);
  font-weight: 700; border-radius: 0 0 var(--r) var(--r);
  transition: top 160ms;
}
.sari-la-continut:focus { top: 0; }

@media (max-width: 900px) {
  .drive-care__grila { grid-template-columns: 1fr; gap: var(--s5); }
  .cat-buton { padding: var(--s3); }

  /* Cele trei categorii se vad deodata, fara derulare.
     Trei pe un rand cat incap; sub 780px una sub alta, nu doua, ca sa nu ramana
     un card singur pe al doilea rand. Cardul se strange — icoana mai mica,
     padding mai mic — altfel trei stivuite impingeau primul produs la 1611px pe
     un ecran de 812, cat aproape doua ecrane de derulat. */
  .categorii-bara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
}

@media (max-width: 768px) {
  /*
   * Nicio reordonare pe telefon: ramane ordinea din marcaj, adica poza intai,
   * apoi numele, eticheta UE si la final pretul cu butonul.
   *
   * A existat aici o vreme o regula care urca pretul si butonul deasupra pozei,
   * ca sa incapa in primul ecran. E o alegere legitima pentru un magazin unde
   * pretul decide, dar la anvelope omul vrea sa vada intai ce cumpara: desenul,
   * si notele de consum, aderenta si zgomot de pe eticheta.
   *
   * .produs devine o singura coloana mai sus, la 900px, deci elementele se
   * aseaza singure in ordinea din pagina. N-are nevoie de nimic aici.
   */

  .produs__poza img { max-height: 34vh; width: auto; }

  /*
   * Banda de finantare e obligatorie pe fiecare pagina si nu poate disparea.
   * Dar cele doua steme, textul si comutatorul de tema se asezau unul sub
   * altul si luau 143px — 18% din ecran, inainte de orice. Pe un rand stemele
   * si comutatorul, textul dedesubt, ajunge la vreo 75.
   */
  .banda-ue__continut { gap: var(--s2); padding: 4px 0; }
  .banda-ue__continut img { height: 26px; width: auto; }
  .banda-ue__text { font-size: .72rem; line-height: 1.35; flex: 1 1 100%; order: 3; }
  .banda-ue .tema { order: 2; margin-left: auto; }

  /* Tinte de atins: 42x42 cu 6px intre ele erau prea inghesuite pe deget.
     WCAG cere 24px, confortul cere 44. */
  .antet__actiuni { gap: 10px; }
  .antet__actiuni .cos { min-width: 44px; min-height: 44px; }

  /* Butoanele de favorite si comparare de pe fiecare card erau 34x34, stivuite
     la 5px distanta — cel mai prost caz din tot site-ul, fiindca o atingere
     gresita schimba actiunea, iar cardurile se repeta de zeci de ori pe pagina.
     Zona de atins creste fara ca butonul sa arate mai mare. */
  .card__unelte { gap: 10px; }
  .card__unelte .unealta { position: relative; }
  .card__unelte .unealta::after { content: ''; position: absolute; inset: -6px; }
}
@media (max-width: 720px) {
  /* Textul iese din ochi, dar RAMANE in arborele de accesibilitate.
     Cu "display: none" disparea de tot, iar butonul ramanea doar cu o
     iconita marcata aria-hidden — adica un buton fara nume, pe care un
     cititor de ecran il anunta „buton", atat. Lighthouse il si prindea:
     „Buttons do not have an accessible name". */
  .cautare__buton span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .cautare__buton svg { display: block !important; }
  .cautare__buton { padding: 0 var(--s4); }
  .erou__increderi { gap: var(--s3); }
  .erou__increderi li { font-size: .8rem; }
  /* Doua logo-uri pe rand, nu trei: pe 375px trei chenare le fac ilizibile.
     "minmax(0, 1fr)", nu "1fr": altfel coloana nu poate cobori sub latimea
     minima a continutului, iar grila iesea din ecran la 576px. */
  .marci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marca { padding: var(--s3); }
  .card__adauga { padding: 0 var(--s3) var(--s3); }
  /* Aceeasi poveste la butoanele de adaugat in cos din grila: pe telefon
     raman doar cu coșulețul, deci textul trebuie sa ramana citibil de
     cititoarele de ecran, nu sa dispara. */
  .card__adauga button span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .card__buc { width: 50px; }
}

/* ── Drive and Care: fotografie lângă text, puncte pe un rând dedesubt ── */
.drive-care__grila { align-items: center; }
.drive-care__poza { margin: 0; }
.drive-care__poza img {
  width: 100%; height: auto; border-radius: var(--r-mare);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.drive-care__puncte {
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--s7) !important;
}
@media (max-width: 900px) {
  .drive-care__puncte { grid-template-columns: 1fr; margin-top: var(--s5) !important; }
  .drive-care__poza { order: -1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Panoul de filtre — structura de la anvelope.ro:
   bază la vedere, restul sub „Căutare avansată”.
   ═══════════════════════════════════════════════════════════════════════ */

/* Coloana rămâne lipită de ecran cât timp derulezi lista de produse, iar
   filtrele își au propria derulare. Fără înălțime fixă pe grilă, altfel
   sticky n-ar avea loc în care să alunece. */
.listare { align-items: stretch; }
.coloana-filtre {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 108px);
  display: flex; flex-direction: column;
}
.panou { display: flex; flex-direction: column; min-height: 0; max-height: 100%; padding: 0; }
.panou__antet, .panou__aplica { flex-shrink: 0; }
.panou__grupuri {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--s4) var(--s2);
  scrollbar-width: thin; scrollbar-color: var(--contur-tare) transparent;
}
.panou__grupuri::-webkit-scrollbar { width: 8px; }
.panou__grupuri::-webkit-scrollbar-thumb { background: var(--contur-tare); border-radius: 4px; }
.panou__grupuri::-webkit-scrollbar-track { background: transparent; }

/* titlurile de secțiune */
.panou__sectiune {
  margin: var(--s4) 0 var(--s2);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-mai-slab);
}
.panou__sectiune:first-child { margin-top: var(--s3); }
.panou__grupuri .camp + .camp { margin-top: var(--s2); }

/* ── sezonul: butoane cu iconiță ─────────────────────────────────────── */
/* Un rând per sezon: uniform și lasă loc textului întreg, inclusiv
   „All Season", care pe două coloane se rupea urât. */
.sezoane { display: grid; grid-template-columns: 1fr; gap: 4px; }
.sezon {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
  font-size: .85rem;
  transition: border-color var(--tranzitie), background var(--tranzitie), color var(--tranzitie);
}
.sezon input { position: absolute; opacity: 0; width: 0; height: 0; }
.sezon svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-mai-slab); }
.sezon span { flex: 1; min-width: 0; white-space: nowrap; }
.sezon small { font-size: .74rem; color: var(--text-mai-slab); }
.sezon:hover { border-color: var(--contur-tare); background: var(--fundal); }
.sezon--activ {
  border-color: var(--verde-text); background: var(--verde-lumina);
  color: var(--verde-inchis); font-weight: 600;
}
.sezon--activ svg, .sezon--activ small { color: var(--verde-text); }
.sezon input:focus-visible + svg { outline: 3px solid var(--verde-text); outline-offset: 3px; border-radius: 3px; }

/* ── opțiuni pe un rând (stoc minim) ─────────────────────────────────── */
.optiuni-rand { display: flex; gap: 6px; }
/* Textul „min. 2 buc." se rupe pe două linii în butonul îngust. Cu spațierea
   implicită butonul ajungea la 59px; strânsă la 1.15 scade sub 44. */
.optiune {
  flex: 1; text-align: center; padding: 7px 5px; cursor: pointer;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
  font-size: .8rem; line-height: 1.15;
  transition: border-color var(--tranzitie), background var(--tranzitie), color var(--tranzitie);
}
.optiune input { position: absolute; opacity: 0; width: 0; height: 0; }
.optiune:hover { border-color: var(--contur-tare); background: var(--fundal); }
.optiune--activa {
  border-color: var(--verde-text); background: var(--verde-lumina);
  color: var(--verde-inchis); font-weight: 600;
}

/* ── glisorul de preț ────────────────────────────────────────────────── */
.glisor { padding-top: 2px; }
.glisor__valori {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin: 0 0 var(--s3);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.glisor__valori small { font-family: 'IBM Plex Sans', 'IBM Plex rezervă', sans-serif; font-size: .8rem; font-weight: 400; color: var(--text-slab); }
.glisor__valori span { color: var(--text-mai-slab); font-weight: 400; }

.glisor__pista { position: relative; height: 26px; }
/* linia de fundal */
.glisor__pista::before {
  content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 4px;
  background: var(--fundal-3); border-radius: 2px;
}
/* porțiunea aleasă */
.glisor__umplut {
  position: absolute; top: 11px; height: 4px;
  background: var(--verde-text); border-radius: 2px;
}

/* Cele două manere sunt input-uri range suprapuse. Pista lor e transparentă
   și nu prinde clicuri; doar butonul rotund răspunde, ca să poți apuca
   oricare dintre ele chiar și când sunt aproape. */
.glisor__maner {
  position: absolute; left: 0; top: 0; width: 100%; height: 26px;
  margin: 0; padding: 0; background: none; appearance: none;
  pointer-events: none;
}
.glisor__maner:focus { outline: none; }
.glisor__maner::-webkit-slider-thumb {
  appearance: none; pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--alb); border: 3px solid var(--verde-text);
  box-shadow: 0 1px 4px rgba(11, 35, 45, .25); cursor: grab;
}
.glisor__maner::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.glisor__maner::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--alb); border: 3px solid var(--verde-text);
  box-shadow: 0 1px 4px rgba(11, 35, 45, .25); cursor: grab;
}
.glisor__maner:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--verde-text); outline-offset: 2px; }
.glisor__maner:focus-visible::-moz-range-thumb { outline: 3px solid var(--verde-text); outline-offset: 2px; }

.glisor__campuri { display: flex; align-items: center; gap: 6px; margin-top: var(--s3); }
.glisor__campuri .camp__input { min-height: 38px; font-size: .88rem; text-align: center; }

/* ── secțiunea de căutare avansată ───────────────────────────────────── */
.avansat { margin: var(--s4) calc(var(--s4) * -1) 0; border-top: 1px solid var(--contur); }
.avansat > summary {
  display: flex; align-items: center; gap: 8px;
  padding: var(--s4);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .88rem; font-weight: 700;
  color: var(--verde-text); cursor: pointer; list-style: none; user-select: none;
  transition: background var(--tranzitie);
}
.avansat > summary::-webkit-details-marker { display: none; }
.avansat > summary:hover { background: var(--verde-lumina); }
.avansat__icon { width: 17px; height: 17px; flex-shrink: 0; }
.avansat .panou__sageata {
  width: 16px; height: 16px; margin-left: auto; flex-shrink: 0;
  transition: transform var(--tranzitie);
}
.avansat[open] .panou__sageata { transform: rotate(180deg); }
.avansat__continut { padding: 0 var(--s4) var(--s3); }

.panou__activ {
  padding: 1px 7px; font-size: .7rem; font-weight: 700;
  color: var(--bleumarin); background: var(--verde); border-radius: 999px;
}

@media (max-width: 1000px) {
  .listare { align-items: start; }
  .panou { max-height: none; }
  .panou__grupuri { overflow: visible; }

  /*
   * Sertarul de filtre se inchide la loc pe mobil.
   *
   * Exista de la inceput, la regula de sus din acelasi media query, dar mai
   * jos in fisier ".coloana-filtre { display: flex }" era scris IN AFARA
   * oricarui media query, pentru coloana lipicioasa de pe desktop. Aceeasi
   * specificitate, scrisa mai tarziu — deci castiga si pe telefon, iar panoul
   * ramanea desfasurat, 798px inaintea primului produs.
   *
   * Blocul asta vine dupa el, deci il intoarce. Butonul "Filtre" il redeschide
   * prin clasa .deschis, ca si pana acum.
   */
  .coloana-filtre { position: static; max-height: none; display: none; }
  .coloana-filtre.deschis { display: flex; }
}


/* ── buton de întoarcere la filtre ────────────────────────────────────── */
.inapoi-la-filtre {
  position: fixed; left: var(--s4); bottom: var(--s4); z-index: 35;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 var(--s4);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .9rem; font-weight: 700;
  color: var(--bleumarin); background: var(--verde);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(11, 35, 45, .25);
  animation: apareDeJos 180ms ease-out;
}
.inapoi-la-filtre:hover { background: var(--verde-viu); }
.inapoi-la-filtre svg { width: 19px; height: 19px; }
.inapoi-la-filtre[hidden] { display: none; }
@keyframes apareDeJos { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .inapoi-la-filtre { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Favorite, comparare și unelte pe card
   ═══════════════════════════════════════════════════════════════════════ */

/* selectorul de cantitate, mai îngust — lasă loc butonului */
.card__buc { width: 46px; padding: 0 2px; font-size: .9rem; }

/* ── uneltele de pe card: inimă și comparare ─────────────────────────── */
.card__media { position: relative; }
/* Mereu la vedere: dacă apar doar la hover, jumătate dintre vizitatori nu
   află niciodată că există, iar pe ecranele cu atingere n-ar apărea deloc. */
.card__unelte {
  position: absolute; top: var(--s3); left: var(--s3); z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}

.unealta {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  color: var(--text-slab); background: rgba(255, 255, 255, .94);
  border: 1px solid var(--contur); border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: color var(--tranzitie), border-color var(--tranzitie),
              background var(--tranzitie), transform var(--tranzitie);
}
.unealta svg { width: 18px; height: 18px; }
.unealta:hover { transform: scale(1.08); border-color: var(--contur-tare); }
.unealta--inima:hover { color: #D64550; border-color: #F0C4C8; }
.unealta--inima.e-activ { color: #fff; background: #D64550; border-color: #D64550; }
.unealta--inima.e-activ svg { fill: currentColor; }
.unealta--compara:hover { color: var(--verde-text); border-color: var(--verde-contur); }
.unealta--compara.e-activ { color: var(--bleumarin); background: var(--verde); border-color: var(--verde); }
.lista-form { display: contents; }

/* ── antet: favorite lângă coș ───────────────────────────────────────── */
.antet__actiuni { display: flex; align-items: center; gap: var(--s2); }
.cos--favorite:hover { border-color: #F0C4C8; background: #FDF3F4; color: #D64550; }
/* Rosul insignelor din antet. Scris o singura data, ca insigna de favorite si
   cea de notificari sa nu se poata desparti la o schimbare de tema. Fix, nu
   var(--rosu): acela devine coral deschis pe intuneric, iar textul alb de pe el
   nu se mai citeste. */
:root { --insigna-rosu: #D64550; }
.cos--favorite .cos__numar { background: var(--insigna-rosu); color: #fff; }

/* ── bara plutitoare de comparare ────────────────────────────────────── */
.bara-comparare {
  position: fixed; left: 50%; bottom: var(--s4); translate: -50% 0; z-index: 36;
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  background: var(--bleumarin); color: #fff;
  border-radius: 999px; box-shadow: 0 8px 32px rgba(11, 35, 45, .35);
  animation: apareDeJos 200ms ease-out;
}
.bara-comparare[hidden] { display: none; }
.bara-comparare__text { font-size: .9rem; }
.bara-comparare__text strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; color: var(--verde); }
.bara-comparare__actiuni { display: flex; align-items: center; gap: var(--s2); }
.bara-comparare .buton { min-height: 38px; padding: 0 var(--s4); font-size: .86rem; }
.bara-comparare__goleste {
  padding: 6px 10px; font-size: .82rem; color: rgba(255, 255, 255, .7);
  background: none; border: 0; cursor: pointer; border-radius: var(--r-mic);
}
.bara-comparare__goleste:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ── pagina de comparare ─────────────────────────────────────────────── */
.ad-cap-simplu { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.ad-cap-simplu .titlu-pagina { margin-bottom: 0; }

/* Fara chenar pe containerul de scroll: el ar inconjura si coltul gol din
   stanga sus, adica ar desena o casuta in jurul unui spatiu care trebuie sa
   ramana liber. Conturul il desenam pe celule, mai jos, ca sa poata incepe
   exact de la linia de deasupra primului criteriu. */
.comparare { margin: var(--s5) 0; overflow-x: auto; }
/* "separate" (cu spatiere zero) in loc de "collapse": doar asa se pot rotunji
   colturile pe celule. Fiecare celula isi pune doar bordura de sus si de
   stanga, deci nu se dubleaza nimic la imbinari. */
.tabel-comparare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: calc(200px + var(--coloane, 2) * 200px); }

.tabel-comparare thead th { padding: var(--s4); vertical-align: top; background: var(--fundal); }
.tc-colt { width: 200px; background: var(--fundal); position: sticky; left: 0; z-index: 2; }
.tc-produs { position: relative; text-align: center; min-width: 200px; }
.tc-produs img { margin: 0 auto var(--s2); width: 120px; height: 120px; object-fit: contain; }
.tc-marca { display: block; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mai-slab); }
.tc-model { display: block; font-size: .95rem; font-weight: 600; margin-bottom: var(--s3); }
.tc-produs a:hover .tc-model { color: var(--verde-text); }
.tc-scoate { position: absolute; top: 6px; right: 6px; }
.tc-scoate button {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--text-mai-slab); background: var(--alb);
  border: 1px solid var(--contur); border-radius: 50%; cursor: pointer;
  transition: color var(--tranzitie), border-color var(--tranzitie);
}
.tc-scoate button:hover { color: var(--rosu); border-color: #F2C9C6; }
.tc-scoate svg { width: 15px; height: 15px; }
.tc-cumpara { padding: 0 !important; }

.tabel-comparare tbody th {
  position: sticky; left: 0; z-index: 1;
  padding: var(--s3) var(--s4); text-align: left; font-weight: 500; font-size: .88rem;
  color: var(--text-slab); background: var(--alb); border-bottom: 1px solid var(--fundal-3);
  white-space: nowrap;
}
.tabel-comparare tbody td {
  padding: var(--s3) var(--s4); text-align: center; font-size: .92rem;
  border-bottom: 1px solid var(--fundal-3);
  font-variant-numeric: tabular-nums;
}
/* ultimul rand isi pastreaza bordura de jos: acolo e chiar baza conturului,
   pusa mai jos in fisier cu culoarea de contur */

/* rândurile în care produsele diferă — singurele care contează la comparare */
.tc-difera th, .tc-difera td { background: var(--verde-lumina); }
.tc-difera th { background: var(--verde-lumina); font-weight: 600; color: var(--text); }
.tc-semn {
  display: inline-block; width: 7px; height: 7px; margin-left: 6px;
  background: var(--verde-text); border-radius: 50%; vertical-align: middle;
}
.tc-pret { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.15rem; }

.comparare__legenda { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--s8); font-size: .84rem; color: var(--text-slab); }

@media (max-width: 720px) {
  .antet__actiuni { gap: 6px; }
  .cos { width: 42px; height: 42px; }
  .card__unelte { top: 8px; left: 8px; gap: 5px; }
  .unealta { width: 34px; height: 34px; }
  .bara-comparare { left: var(--s3); right: var(--s3); translate: none; border-radius: var(--r-mare); flex-wrap: wrap; justify-content: center; }
}

/* ── corecturi de accesibilitate din auditul de design ────────────────── */

/* Pagina de listare n-avea H1 — nici pentru SEO, nici pentru cititoarele de
   ecran, care se orientează după titluri. */
.titlu-listare { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: var(--s3); }

/* Etichetele de secțiune aveau 3,56:1 pe alb — sub pragul de 4,5:1 pentru
   text mic. Trecute pe culoarea mai închisă, care dă 5,97:1. */
.panou__sectiune { color: var(--text-slab); }

/* Butoanele mici rămân 36px la vedere, dar primesc zonă de atingere de 44px.
   Ghidul cere minimum 44×44 și permite explicit extinderea dincolo de
   marginile vizibile. */
.unealta { position: relative; }
.unealta::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%;
}
.linie__scoate, .tc-scoate button { position: relative; }
.linie__scoate::after, .tc-scoate button::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  translate: -50% -50%; width: 44px; height: 44px;
}
/* câmpurile de preț: 38px era sub prag */
.glisor__campuri .camp__input { min-height: 44px; }

/* ── categoriile de pe prima pagină: cărți mari, evident clicabile ────── */
.sectiune__intro { margin: calc(var(--s5) * -1 + 4px) 0 var(--s5); color: var(--text-slab); max-width: 60ch; }

.categorii-bara--mari { gap: var(--s4); }
.categorii-bara--mari .cat-buton {
  flex-direction: column; align-items: flex-start; gap: var(--s3);
  padding: var(--s6) var(--s5);
  position: relative; overflow: hidden;
}
/* dâră discretă de profil de anvelopă în colț, ca să nu fie doar un chenar gol */
.categorii-bara--mari .cat-buton::after {
  content: ''; position: absolute; right: -30px; top: -30px;
  width: 130px; height: 130px; border-radius: 50%;
  background: repeating-linear-gradient(120deg, var(--fundal) 0 6px, transparent 6px 14px);
  opacity: .8; pointer-events: none;
  /* Dâra stă SUB conținut, nu peste el: e decor, iar săgeata de „Vezi produsele"
     e chiar îndemnul — nu are voie să fie acoperită de un ornament care, la
     hover, se și mărește peste ea. */
  z-index: 0;
  transition: opacity var(--tranzitie), transform var(--tranzitie);
}
.categorii-bara--mari .cat-buton:hover::after { transform: scale(1.15) rotate(12deg); }

/* Conținutul, deasupra dârei. Iconița și textul aveau deja poziție proprie;
   săgeții îi lipsea stratul, iar cercul crescând la hover trecea peste ea. */
.categorii-bara--mari .cat-buton__icon,
.categorii-bara--mari .cat-buton__text,
.categorii-bara--mari .cat-buton__actiune { position: relative; z-index: 1; }
.categorii-bara--mari .cat-buton--activ::after,
.categorii-bara--mari .cat-buton:hover::after {
  background: repeating-linear-gradient(120deg, var(--verde-lumina) 0 6px, transparent 6px 14px);
}

.categorii-bara--mari .cat-buton__icon {
  width: 68px; height: 68px;
  background: var(--verde-lumina); color: var(--verde-text);
}
.categorii-bara--mari .cat-buton__icon svg { width: 38px; height: 38px; }
.categorii-bara--mari .cat-buton:hover .cat-buton__icon { background: var(--verde); color: var(--bleumarin); }

.categorii-bara--mari .cat-buton__text { gap: 3px; position: relative; }
.categorii-bara--mari .cat-buton__text strong { font-size: 1.45rem; letter-spacing: -.02em; }
.categorii-bara--mari .cat-buton__text small { font-size: .92rem; }
.cat-buton__nr {
  margin-top: var(--s2); font-size: .82rem; font-weight: 700;
  color: var(--verde-text); font-variant-numeric: tabular-nums;
}
.cat-buton__actiune {
  display: inline-flex; align-items: center; gap: 7px; position: relative;
  margin-top: auto; padding-top: var(--s3);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .92rem; font-weight: 700;
  color: var(--verde-text);
}
.cat-buton__actiune svg { width: 17px; height: 17px; transition: transform var(--tranzitie); }
.categorii-bara--mari .cat-buton:hover .cat-buton__actiune svg { transform: translateX(4px); }

@media (max-width: 900px) {
  .categorii-bara--mari .cat-buton { padding: var(--s5) var(--s4); flex-direction: row; align-items: center; }
  .categorii-bara--mari .cat-buton__icon { width: 56px; height: 56px; }
  .categorii-bara--mari .cat-buton__icon svg { width: 30px; height: 30px; }
  .categorii-bara--mari .cat-buton__text strong { font-size: 1.2rem; }
  .cat-buton__actiune { margin-top: 0; padding-top: 0; margin-left: auto; }
  .cat-buton__actiune { font-size: 0; }
  .cat-buton__actiune svg { width: 22px; height: 22px; }
}

/* ── secțiunea de categorii, ca îndemn clar ───────────────────────────── */
.sectiune--indemn { margin-top: var(--s8); text-align: center; }
.sectiune--indemn > h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -.02em;
  margin-bottom: var(--s3);
}
.sectiune--indemn .sectiune__intro {
  margin: 0 auto var(--s6);
  font-size: 1.05rem; max-width: 54ch;
}
/* cărțile rămân aliniate la stânga, doar titlul e centrat */
.sectiune--indemn .categorii-bara { text-align: left; }

/* ═══════════════════════════════════════════════════════════════════════
   Tabelul de comparare pe telefon
   Compararea are sens doar dacă vezi două produse deodată. La 375px,
   coloana de etichete de 200px lăsa o fâșie de 157px din primul produs.
   Coborâm etichetele la 96px și coloanele la 130px: 96 + 2×130 = 356px,
   deci intră două produse pe ecran, iar al treilea se aduce prin glisare.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .comparare {
    /* containerul lasa var(--s4) in total, adica jumatate pe fiecare parte */
    margin-inline: calc(var(--s4) / -2);
    position: relative;
  }
  /* tabelul curge de la o margine la alta, deci laturile si colturile ies */
  .tabel-comparare tbody th { border-left-width: 0; }
  .tabel-comparare thead .tc-produs:last-child,
  .tabel-comparare tbody tr > *:last-child { border-right-width: 0; }
  .tabel-comparare thead .tc-colt + .tc-produs,
  .tabel-comparare thead .tc-produs:last-child,
  .tabel-comparare tbody tr:first-child th,
  .tabel-comparare tbody tr:last-child th,
  .tabel-comparare tbody tr:last-child > *:last-child { border-radius: 0; }
  .tabel-comparare { min-width: calc(96px + var(--coloane, 2) * 130px); }

  .tc-colt { width: 96px; min-width: 96px; }
  .tc-produs { min-width: 130px; padding: var(--s3) 8px !important; }
  .tc-produs img { width: 64px; height: 64px; margin-bottom: 6px; }
  .tc-marca { font-size: .6rem; letter-spacing: .06em; }
  .tc-model { font-size: .8rem; line-height: 1.25; margin-bottom: var(--s2); }
  .tc-scoate { top: 2px; right: 2px; }
  .tc-scoate button { width: 26px; height: 26px; }
  .tc-scoate svg { width: 13px; height: 13px; }

  /* pe telefon nu are rost câmpul de cantitate în antetul coloanei:
     mănâncă lățime din puținul disponibil. Rămâne butonul, cu 4 bucăți. */
  .tc-cumpara .card__buc { display: none; }
  .tc-cumpara button { width: 100%; min-height: 38px; font-size: .78rem; padding: 0 6px; }
  .tc-cumpara button span { display: inline; }

  .tabel-comparare tbody th {
    width: 96px; min-width: 96px;
    padding: 10px 8px; font-size: .72rem; line-height: 1.3;
    white-space: normal;          /* etichetele lungi se rup pe două rânduri */
    hyphens: auto;
  }
  .tabel-comparare tbody td {
    padding: 10px 6px; font-size: .8rem; line-height: 1.35;
  }
  .tc-pret { font-size: .95rem; }
  .tc-semn { width: 6px; height: 6px; margin-left: 4px; }

  /* umbră la marginea dreaptă cât timp mai e conținut de glisat */
  .comparare::after {
    content: ''; position: sticky; top: 0; right: 0; float: right;
    width: 24px; height: 100%; margin-left: -24px;
    background: linear-gradient(90deg, transparent, rgba(11, 35, 45, .07));
    pointer-events: none;
  }

  .comparare__indiciu {
    display: flex !important; align-items: center; justify-content: center; gap: 6px;
    margin: var(--s2) 0 0; font-size: .78rem; color: var(--text-mai-slab);
  }
  .comparare__indiciu svg { width: 15px; height: 15px; }

  .ad-cap-simplu { gap: var(--s3); }
  .ad-cap-simplu .buton { min-height: 40px; padding: 0 var(--s4); font-size: .85rem; }
}

/* indiciul de glisare apare doar pe ecrane mici */
.comparare__indiciu { display: none; }

/* Drive & Care se termină pe fundal închis, la fel începe și subsolul.
   Marginea de sus a subsolului lăsa între ele o fâșie albă.
   Atenție: bara plutitoare de comparare stă între main și subsol, deci
   „fratele imediat" (+) nu mai potrivește — trebuie fratele general (~). */
main:has(.drive-care) ~ .subsol { margin-top: 0; }

/* ── corecturi de adaptare și lizibilitate ────────────────────────────── */

/* Logo-urile de brand aveau lățime fixă de 130px; în celula de ~110px de pe
   telefon ieșeau din ecran și dădeau derulare orizontală pe prima pagină. */
.marca img { max-width: 100%; }

/* Opțiunile de stoc și câmpurile de preț: text centrat */
.optiune { display: grid; place-items: center; }
.optiune span { text-align: center; }
.glisor__campuri .camp__input { text-align: center; }
.glisor__campuri .camp__input::placeholder { text-align: center; }

/* Iconițele filtrelor, colorate pe categorii — se disting dintr-o privire */
.camp__icon { color: var(--verde-text); }
.camp:has(#f-latime) .camp__icon,
.camp:has(#f-inaltime) .camp__icon,
.camp:has(#f-diametru) .camp__icon { color: #2E7BB8; }
.camp:has(#f-marca) .camp__icon { color: #9A5BC4; }
.camp:has(#f-runflat) .camp__icon { color: #C77E00; }
.camp:has(#f-viteza_min) .camp__icon,
.camp:has(#f-sarcina_min) .camp__icon { color: #C4322B; }
.camp:has(#f-rulare) .camp__icon { color: #1E8E4A; }
.camp:has(#f-aderenta) .camp__icon { color: #2E9BC4; }
.camp:has(#f-zgomot) .camp__icon { color: #8A6FBF; }
.camp:has(#f-categorie) .camp__icon { color: #6B7A82; }

.sezon svg { color: var(--text-mai-slab); }
.sezon:nth-of-type(2) svg { color: #E0A526; }   /* vara */
.sezon:nth-of-type(3) svg { color: #4A9FD4; }   /* iarna */
.sezon:nth-of-type(4) svg { color: #4FA36B; }   /* all season */
.sezon--activ svg { color: var(--verde-text); }

.panou__sectiune { display: flex; align-items: center; gap: 7px; }

/* Selectorul de categorii stă în coloana de produse, nu deasupra grilei:
   așa panoul de filtre începe imediat sub firimituri și distanța până la
   poziția în care se agață e mică, deci nu mai sare vizibil la derulare. */
.rezultate .categorii-bara { margin-bottom: var(--s4); }

/* Logo-urile de brand au proporții diferite (Hankook e mai înalt decât
   restul). Fără o zonă de aceeași înălțime, chenarul lui ieșea mai mare
   decât celelalte. Acum toate au aceeași casetă, iar logo-ul stă centrat. */
.marca { min-height: 96px; }
.marca img { max-height: 56px; width: auto; max-width: 100%; object-fit: contain; }

/* ═══ bara de comparare și tabelul ════════════════════════════════════ */

/* Bara plutitoare, mai lată: numele produselor alese încap alături de buton. */
.bara-comparare {
  min-width: min(560px, calc(100% - var(--s5) * 2));
  padding: var(--s3) var(--s3) var(--s3) var(--s5);
  gap: var(--s5);
}
.bara-comparare__text { flex: 1; }

/* Antetul tabelului, tot alb: pozele produselor se desprind mai bine decât
   pe gri, iar linia groasă de sub antet face separarea de caracteristici. */
.tabel-comparare thead th { background: var(--alb); }

/* Separare verticală între produse — la comparare ochiul urmărește coloane,
   nu rânduri, iar fără linii coloanele se amestecă la scanare rapidă. */
.tabel-comparare th.tc-produs + .tc-produs,
.tabel-comparare tbody td + td { border-left: 1px solid var(--contur); }
.tabel-comparare tbody th + td { border-left: 1px solid var(--contur-tare); }
.tabel-comparare thead .tc-produs + .tc-produs { border-left: 1px solid var(--contur); }
.tabel-comparare thead .tc-colt + .tc-produs { border-left: 1px solid var(--contur-tare); }

/* ── conturul tabelului, desenat pe celule ───────────────────────────────
   Coltul din stanga sus e gol. Inconjurat de linii ar arata ca o celula in
   care ar trebui sa scrie ceva, asa ca il lasam complet in afara conturului:
   nicio bordura, doar fundal alb (nu transparent — coltul e lipit la scroll
   orizontal si prin el s-ar vedea coloanele trecand pe dedesubt).
   Conturul incepe deci de la linia groasa de deasupra primului criteriu. */
.tabel-comparare thead .tc-colt { background: var(--alb); border: 0; }

/* linia groasa sta pe primul rand din corp, nu sub antet: asa aceeasi celula
   detine si linia de sus si pe cea din stanga, iar coltul lor se poate rotunji */
.tabel-comparare tbody tr:first-child > * { border-top: 2px solid var(--contur-tare); }

/* deasupra produselor, conturul porneste de sus */
.tabel-comparare thead .tc-produs { border-top: 1px solid var(--contur); }
.tabel-comparare thead .tc-produs:last-child { border-right: 1px solid var(--contur); }

/* laturile si baza corpului */
.tabel-comparare tbody th { border-left: 1px solid var(--contur); }
.tabel-comparare tbody tr > *:last-child { border-right: 1px solid var(--contur); }
.tabel-comparare tbody tr:last-child > * { border-bottom: 1px solid var(--contur); }

/* colturile rotunjite ale conturului */
.tabel-comparare thead .tc-colt + .tc-produs { border-top-left-radius: var(--r-mare); }
.tabel-comparare thead .tc-produs:last-child { border-top-right-radius: var(--r-mare); }
.tabel-comparare tbody tr:first-child th { border-top-left-radius: var(--r-mare); }
.tabel-comparare tbody tr:last-child th { border-bottom-left-radius: var(--r-mare); }
.tabel-comparare tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--r-mare); }

/* ═══ sugestiile din bara de căutare ══════════════════════════════════ */

/* Lista stă lipită sub câmp și acoperă tot ce e dedesubt. Umbra o desprinde
   de conținut, iar z-index-ul o ține peste bara de filtre lipită la scroll. */
.sugestii {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  max-height: min(420px, 70vh); overflow-y: auto;
  background: var(--alb); border: 1px solid var(--contur);
  border-radius: var(--r-mare); box-shadow: 0 12px 32px rgba(11, 35, 45, .14);
  padding: 6px;
}
.sugestii[hidden] { display: none; }

.sug {
  display: flex; align-items: center; gap: var(--s3);
  padding: 8px 10px; border-radius: var(--r); color: inherit; text-decoration: none;
}
/* Aceeași evidențiere la mouse și la săgeți: cine navighează de la tastatură
   trebuie să vadă exact ce ar vedea cu mausul. */
.sug:hover, .sug--ales { background: var(--verde-lumina); }
.sug img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sug__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.sug__nume { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug__nume strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; }
.sug__masura { font-size: .76rem; color: var(--text-slab); }
.sug__pret {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .9rem; font-weight: 700;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.sug__toate {
  justify-content: center; margin-top: 4px; padding: 10px;
  border-top: 1px solid var(--contur); border-radius: 0 0 var(--r) var(--r);
  font-size: .84rem; font-weight: 600; color: var(--verde-text);
}
.sug__eticheta { font-weight: 400; color: var(--text-slab); }

.sug__corectat {
  margin: 0; padding: 8px 10px 10px; font-size: .8rem; color: var(--text-slab);
  border-bottom: 1px solid var(--contur);
}
.sug__corectat strong { color: var(--verde-text); }
.sug__gol { margin: 0; padding: 14px 10px; font-size: .86rem; color: var(--text-slab); text-align: center; }

@media (max-width: 720px) {
  /* Pe telefon lista acoperă lățimea ecranului, nu doar câmpul, altfel
     rândurile se înghesuie și prețul ajunge peste denumire. */
  .sugestii { max-height: 60vh; }
  .sug img { width: 34px; height: 34px; }
  .sug__nume { font-size: .82rem; }
}

/* Anunțul că am corectat ce s-a tastat. Ton discret — e o informație, nu o
   eroare — dar cu ieșire clară pentru cine chiar a scris ce voia. */
.anunt-corectat {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: 0 0 var(--s5); padding: 10px var(--s4);
  background: var(--fundal); border: 1px solid var(--contur);
  border-radius: var(--r); font-size: .88rem; color: var(--text-slab);
}
.anunt-corectat svg {
  width: 17px; height: 17px; flex: none; color: var(--text-mai-slab);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.anunt-corectat q { font-style: italic; color: var(--text); }
.anunt-corectat a { margin-left: auto; color: var(--verde-text); font-weight: 600; }

/* Săgeata de pe „Continuă cumpărăturile", ca imagine de mască — așa preia
   culoarea butonului la hover fără să dublăm SVG-ul în două variante. */
:root {
  --sageata-inapoi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* ── titlurile de secțiune din checkout ──────────────────────────────────
   <legend> se desenează CĂLARE pe linia chenarului, deci „Cine face comanda"
   și „Unde livrăm" apăreau tăiate de contur. Trucul cu float îl scotea de
   acolo, dar rupea copiii care sunt grid sau flex — comutatorul de tip client
   ajungea lipit de marginea din dreapta, cu lățime zero.
   Acum legenda e ascunsă vizual (rămâne pentru cititoarele de ecran, ca să
   numească grupul), iar titlul vizibil e un paragraf obișnuit. */
.bloc__titlu {
  margin: 0 0 var(--s4); padding: 0;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--text);
}

/* Rândul de filtru din sugestii: se desprinde de produse, e o acțiune de alt
   fel — duce la tot setul filtrat, nu la un produs anume. */
.sug--filtru {
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  margin-bottom: 6px;
}
.sug--filtru:hover, .sug--filtru.sug--ales { background: var(--verde-contur); }
.sug--filtru .sug__nume { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; }
.sug--filtru .sug__masura { color: var(--verde-text); }
.sug__semn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r); background: var(--alb); color: var(--verde-text);
}
.sug__semn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sug__nr {
  padding: 3px 9px; border-radius: 999px; background: var(--verde); color: #fff;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .78rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════
   MODUL ÎNTUNECAT

   Paleta se rescrie pe aceleași variabile, deci nicio componentă nu are
   nevoie de reguli separate. Trei stări, în ordinea în care câștigă:
     1. :root                     — tema deschisă, definiția de bază
     2. prefers-color-scheme      — setarea sistemului, când omul n-a ales
     3. [data-tema]               — alegerea explicită, bate sistemul

   Verdele de marcă (#7ED957) rămâne același, dar pe fundal întunecat textul
   verde trebuie deschis, nu închis: #37801F pe #0F1E25 are 2,4:1, sub prag.
   ═══════════════════════════════════════════════════════════════════════ */

/* "color-scheme" spune browserului cum sa deseneze ce randeaza el singur:
   fundalul campurilor, sagetile de la <select>, bara de derulare. Fara el,
   meta-eticheta "light dark" din <head> le lasa pe seama SISTEMULUI — iar pe
   un calculator cu tema intunecata, campul de cantitate ramanea gri inchis
   chiar si cand pagina era pe modul luminos. */
:root { color-scheme: light; }
:root[data-tema="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) { color-scheme: dark; }
}

:root[data-tema="dark"] {
  --alb:            #131F26;   /* suprafețele care erau albe */
  --fundal:         #0D171D;   /* fundalul paginii */
  --contur:         #253742;
  --contur-tare:    #35505E;
  --text:           #E8F0F3;
  --text-slab:      #A3B4BC;
  --text-mai-slab:  #7D8F98;

  --bleumarin:      #0A141A;
  --bleumarin-2:    #16333F;

  --verde-text:     #8FE06B;   /* 8,9:1 pe fundalul întunecat */
  --verde-inchis:   #A5E88A;
  --verde-lumina:   #172C1E;   /* fundalul discret verzui */
  --verde-contur:   #2E5C3A;

  --rosu:           #FF8A82;
  --galben:         #F0B64A;

  --umbra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --umbra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .45);
  --umbra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .55);
}

@media (prefers-color-scheme: dark) {
  /* ":not([data-tema='light'])" e esențial: fără el, cine alege explicit tema
     deschisă pe un sistem întunecat n-ar putea ieși din dark. */
  :root:not([data-tema="light"]) {
    --alb:            #131F26;
    --fundal:         #0D171D;
    --contur:         #253742;
    --contur-tare:    #35505E;
    --text:           #E8F0F3;
    --text-slab:      #A3B4BC;
    --text-mai-slab:  #7D8F98;

    --bleumarin:      #0A141A;
    --bleumarin-2:    #16333F;

    --verde-text:     #8FE06B;
    --verde-inchis:   #A5E88A;
    --verde-lumina:   #172C1E;
    --verde-contur:   #2E5C3A;

    --rosu:           #FF8A82;
    --galben:         #F0B64A;

    --umbra-1: 0 1px 2px rgba(0, 0, 0, .4);
    --umbra-2: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .45);
    --umbra-3: 0 4px 8px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .55);
  }
}

/* Ajustări care nu se rezolvă doar din variabile ─────────────────────── */

/* Logo-urile de marcă sunt semne închise la culoare pe fond transparent.
   Pe întuneric dispar, deci chenarul lor rămâne deschis — la fel ca un
   panou de prezentare, cum fac și magazinele mari. */
:root[data-tema="dark"] .marca,
:root[data-tema="dark"] .antet__ue img,
:root[data-tema="dark"] .subsol__ue img { background: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .marca,
  :root:not([data-tema="light"]) .antet__ue img,
  :root:not([data-tema="light"]) .subsol__ue img { background: #FFFFFF; }
}

/* Pozele de produs vin pe fond alb de la furnizor; le domolim puțin ca să nu
   ardă ochii pe fundal întunecat, fără să le spălăm culorile. */
:root[data-tema="dark"] .card img,
:root[data-tema="dark"] .sug img { filter: brightness(.94); }

/* ── comutatorul de temă, în stil iOS ─────────────────────────────────── */

/* Stă în banda de finanțare, împins la capătul din dreapta al ei. */
.banda-ue__continut { align-items: center; }
.tema { margin-left: auto; }

.tema {
  padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0; border-radius: 999px;
}
.tema:focus-visible { outline: 2px solid var(--verde-text); outline-offset: 3px; }

/* Pista: fundal cald de zi, rece de noapte. Culoarea singură spune în ce mod
   ești, chiar înainte să te uiți unde stă bila. */
.tema__pista {
  position: relative; display: block; width: 62px; height: 32px;
  border-radius: 999px; background: linear-gradient(160deg, #7FC7F0, #4FA3DC);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
  transition: background var(--tranzitie);
}

/* Bila: soarele ziua, luna noaptea. Se mișcă lin, dar respectă preferința
   de mișcare redusă (mai jos). */
.tema__soare, .tema__luna {
  position: absolute; top: 3px; left: 3px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  transition: transform var(--tranzitie), opacity 120ms;
}
.tema__soare { background: #FFD75E; color: #7A5200; }
.tema__luna  { background: #E9EEF4; color: #2A3B52; opacity: 0; }
.tema__soare svg, .tema__luna svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.tema__luna svg { fill: currentColor; stroke: none; }

/* Stelele din fundal, invizibile ziua. */
.tema__buline {
  position: absolute; inset: 0; border-radius: 999px; opacity: 0;
  transition: opacity var(--tranzitie);
  background:
    radial-gradient(1.5px 1.5px at 42px 10px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 50px 20px, #fff, transparent),
    radial-gradient(1px 1px at 36px 22px, #fff, transparent);
}

/* Desenul butonului urmeaza EXACT aceeasi conditie ca tema paginii: alegerea
   explicita din data-tema. Inainte se lua dupa aria-checked, pe care il pune
   JavaScript-ul — iar daca el rata schimbarea, pagina era alba si butonul
   arata luna. aria-checked ramane, dar doar pentru cititoarele de ecran. */
:root[data-tema="dark"] .tema__pista { background: linear-gradient(160deg, #26374A, #131F2C); }
:root[data-tema="dark"] .tema__soare { transform: translateX(30px); opacity: 0; }
:root[data-tema="dark"] .tema__luna  { transform: translateX(30px); opacity: 1; }
:root[data-tema="dark"] .tema__buline { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .tema__soare, .tema__luna, .tema__pista, .tema__buline { transition: none; }
}

@media (max-width: 720px) {
  /* Pe telefon banda e strâmtă: comutatorul rămâne la dreapta, dar mai mic. */
  .tema__pista { width: 52px; height: 28px; }
  .tema__soare, .tema__luna { width: 22px; height: 22px; }
  :root[data-tema="dark"] .tema__soare,
  :root[data-tema="dark"] .tema__luna { transform: translateX(24px); }
}

/* ── insignele de clasă, citibile ────────────────────────────────────────
   Toate șapte aveau text alb, iar pe verde, galben și portocaliu albul dă
   sub 3,3:1 — la 12,8px asta e ilizibil pentru mulți oameni, și Lighthouse
   îl prinde. Raportul arăta doar zece elemente, toate gri, fiindcă acolo se
   oprește lista; măsurate una câte una, cinci din șapte cădeau.

   Fundalurile rămân cum sunt: ele poartă înțelesul, verde-spre-roșu ca pe
   eticheta europeană. Se schimbă doar culoarea cifrelor de deasupra —
   bleumarin pe insignele deschise, alb pe cele închise. Două fundaluri se
   închid puțin, fiindcă la ele nici albul, nici bleumarinul nu ajungeau. */
.nota--a { background: #0F7A36; }              /* alb 5,44:1 (era 4,44) */
.nota--e { background: #BF4E0F; }              /* alb 4,87:1 (era 3,94) */
.nota--gri, .nota--x { background: #626D71; }  /* alb 5,32:1 (era 3,01) */

.nota--b,                                      /* bleumarin 5,44:1 */
.nota--c,                                      /* bleumarin 5,53:1 */
.nota--d { color: #0B232D; }                   /* bleumarin 5,00:1 */

/* ── contul clientului ────────────────────────────────────────────────── */


/* Iconita de cont pastreaza conturul neutru al celorlalte doua. Verdele o
   scotea in evidenta fara motiv: cele trei sunt de acelasi rang, iar faptul ca
   esti autentificat il spune deja bulina verde din colt. */

/* Cutia de autentificare: îngustă și centrată, ca atenția să stea pe formular. */
.cont-cutie {
  max-width: 440px; margin: var(--s7) auto var(--s8);
  padding: var(--s6); background: var(--alb);
  border: 1px solid var(--contur); border-radius: var(--r-mare); box-shadow: var(--umbra-1);
}
.cont-cutie__titlu { margin: 0 0 var(--s2); font-size: 1.5rem; }
.cont-cutie__sub { margin: 0 0 var(--s5); color: var(--text-slab); font-size: .92rem; }
.cont-cutie__jos { margin: var(--s5) 0 0; text-align: center; font-size: .92rem; }
.cont-cutie__jos a { color: var(--verde-text); font-weight: 600; }
.cont-cutie__nota { margin: var(--s2) 0 0; text-align: center; font-size: .82rem; color: var(--text-mai-slab); }

.cont-form { display: grid; gap: var(--s4); }
.cont-form__trimite { width: 100%; min-height: 48px; }

.bifa { display: flex; align-items: flex-start; gap: var(--s2); font-size: .88rem; cursor: pointer; }
.bifa input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--verde); flex: none; }

/* Antetul contului lipea de bara de sus. Spatiul de aici il desprinde, la fel
   ca pe celelalte pagini care incep cu firimituri. */
.cont-cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; padding-top: var(--s6);
}
.cont-cap .titlu-pagina { margin-bottom: var(--s2); }
.cont-cap__sub { margin: 0 0 var(--s5); color: var(--text-slab); font-size: .92rem; }

.cont-scurtaturi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3); margin-bottom: var(--s7);
}
.cont-card {
  display: grid; gap: 2px; padding: var(--s4);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  color: inherit; transition: border-color var(--tranzitie), box-shadow var(--tranzitie);
}
.cont-card:hover { border-color: var(--verde-contur); box-shadow: var(--umbra-2); }
.cont-card svg {
  width: 22px; height: 22px; margin-bottom: var(--s2); color: var(--verde-text);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.cont-card strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.05rem; }
.cont-card span { font-size: .82rem; color: var(--text-slab); }

.comenzi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
/* Coloanele, pe rand: numar | data | eticheta | spatiu | pret | sageata.
   Spatiul flexibil sta pe data, nu pe pret — cu 1fr pe pret, cifrele se
   aliniau doar la dreapta, iar marginea lor din stanga sarea de la un rand la
   altul. Pretul are acum latime FIXA, deci preturile cad unul sub altul.
   Eticheta ramane "auto", ca fundalul colorat sa imbrace doar cuvantul. */
.comanda-rand {
  display: grid; grid-template-columns: auto 1fr auto 120px auto;
  align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s4); color: inherit;
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.comanda-rand:hover { border-color: var(--verde-contur); background: var(--verde-lumina); }
.comanda-rand__nr { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; }
.comanda-rand__data { font-size: .86rem; color: var(--text-slab); }
.comanda-rand__total { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }
.comanda-rand__sageata { width: 18px; height: 18px; color: var(--text-mai-slab); fill: none; stroke: currentColor; stroke-width: 2; }

.cont-date { display: grid; gap: var(--s5); max-width: 720px; }

.tabel-invelis { overflow-x: auto; }
.tabel-comanda { width: 100%; border-collapse: collapse; }
.tabel-comanda th, .tabel-comanda td { padding: var(--s3) var(--s4); text-align: left; border-bottom: 1px solid var(--contur); }
.tabel-comanda .nr { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-comanda thead th { font-size: .82rem; color: var(--text-slab); font-weight: 600; }
.tabel-comanda__masura { display: block; font-size: .82rem; color: var(--text-slab); }
.tabel-comanda tfoot th { text-align: right; font-weight: 500; color: var(--text-slab); }
.tabel-comanda__total th, .tabel-comanda__total td { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; color: var(--text); font-size: 1.05rem; }

@media (max-width: 620px) {
  /* Rândul de comandă nu încape pe o linie: numărul și totalul rămân sus,
     restul coboară dedesubt. */
  .comanda-rand { grid-template-columns: 1fr auto; row-gap: 4px; }
  .comanda-rand__sageata { display: none; }
  .cont-cutie { padding: var(--s5); margin-top: var(--s5); }
}

/* Invitația la cont din checkout: informativă, nu o barieră. Verde discret,
   ca să se citească drept ajutor, nu drept avertisment. */
.checkout__invitatie {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4);
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  border-radius: var(--r); font-size: .88rem;
}
.checkout__invitatie svg {
  width: 20px; height: 20px; flex: none; color: var(--verde-text);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.checkout__invitatie a { color: var(--verde-text); font-weight: 600; text-decoration: underline; }
.checkout__newsletter { margin-top: var(--s2); }


/* ── alinierea perechilor de câmpuri, peste tot ───────────────────────────
   Regula ".camp + .camp { margin-top }" e scrisă pentru câmpuri stivuite unul
   sub altul. Într-o pereche așezată pe orizontală se aplică la fel, așa că al
   doilea câmp cobora cu 12px față de primul — se vedea la „Nume / Prenume".
   Aici spațierea o face „gap"-ul grilei, deci marginea trebuie anulată.
   Stă la finalul fișierului fiindcă are aceeași specificitate cu regula pe
   care o corectează, iar ordinea e cea care decide. */
.camp-pereche .camp + .camp { margin-top: 0; }

/* ── pagina de confirmare a adresei ───────────────────────────────────── */
.cont-cutie--verifica { text-align: center; }
.cont-cutie--verifica .cont-form,
.cont-cutie--verifica .cont-verifica__ajutor { text-align: left; }

.cont-semn {
  display: grid; place-items: center; width: 56px; height: 56px;
  margin: 0 auto var(--s4); border-radius: 50%;
  background: var(--verde-lumina); color: var(--verde-text);
}
.cont-semn--rau { background: #FDF0EF; color: var(--rosu); }
.cont-semn svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.cont-verifica__ajutor {
  margin: var(--s5) 0; padding: var(--s4);
  background: var(--fundal); border-radius: var(--r); font-size: .86rem; color: var(--text-slab);
}
.cont-verifica__ajutor p { margin: 0 0 var(--s2); color: var(--text); }
.cont-verifica__ajutor ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 4px; }

/* ── bara de măsuri de pe prima pagină ────────────────────────────────────
   Cu „flex-wrap" ieșeau 7 / 7 / 2: ultimul rând rămânea aproape gol, iar
   chipsurile aveau lățimi diferite după cât text aveau. Aici trecem pe grilă
   cu număr FIX de coloane, alese dintre divizorii lui 16 — 8, 4 și 2 — deci
   rândurile ies mereu pline, la orice lățime de ecran. */
.chipsuri--masuri {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--s2);
}
/* Textul se centrează: la lățimi egale, aliniat la stânga ar lăsa spații
   inegale la dreapta și rândul ar părea strâmb. */
.chipsuri--masuri .chip { justify-content: center; padding: 0 var(--s2); text-align: center; }

@media (max-width: 1080px) {
  .chipsuri--masuri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  /* Două coloane, iar din cele 16 arătăm 8: restul ar însemna opt rânduri de
     chipsuri pe un telefon, adică un perete în care nu mai caută nimeni. */
  .chipsuri--masuri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chipsuri--masuri > :nth-child(n + 9) { display: none; }
}

/* Eticheta și „Am uitat parola" pe același rând, la capete opuse — locul
   obișnuit pentru el, lângă câmpul la care se referă. */
.camp__rand { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.camp__link { font-size: .8rem; color: var(--verde-text); font-weight: 600; }
.camp__link:hover { text-decoration: underline; }

/* ═══ parcursul comenzii ══════════════════════════════════════════════════
   Trei stări vizuale, nu două: bifat, ACUM și încă neajuns. Fără pasul „acum"
   marcat distinct, omul vede doar ce s-a terminat — nu și unde e coletul lui,
   care e singura întrebare pentru care a deschis pagina. */
/* Cinci coloane EGALE, cu punctele centrate in ele.
   Variantele incercate inainte cadeau fiecare intr-o parte: cu ultima coloana
   „cat ii trebuie", punctul ajungea la margine dar spatiile ieseau inegale;
   cu punctele lipite la stanga, ultimul ramanea la patru cincimi si linia se
   oprea inainte de el. Centrate, distantele sunt identice si linia leaga
   fiecare pereche, cu aceeasi respiratie la ambele capete. */
.parcurs {
  list-style: none; margin: 0 0 var(--s6); padding: var(--s5) var(--s4);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
}

.parcurs__pas {
  position: relative; display: grid; gap: var(--s2);
  justify-items: center; text-align: center; padding: 0 var(--s2);
}

/* Bulina: goală în viitor, verde plină la ce s-a făcut, inelată la pasul curent. */
.parcurs__semn {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--fundal); border: 2px solid var(--contur); color: transparent;
  transition: background var(--tranzitie), border-color var(--tranzitie);
}
.parcurs__semn svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}

.e-facut .parcurs__semn { background: var(--verde); border-color: var(--verde); color: var(--bleumarin); }
.e-acum .parcurs__semn {
  background: var(--alb); border-color: var(--verde);
  box-shadow: 0 0 0 4px var(--verde-lumina);
}

/* Linia dintre pași: verde până unde s-a ajuns, gri mai departe. */
/* Linia merge din centrul acestui punct pana in centrul celui urmator, deci
   trece peste marginea coloanei. */
.parcurs__linie {
  position: absolute; top: 12px; height: 2px;
  left: calc(50% + 17px); right: calc(-50% + 17px);
  background: var(--contur);
}
.e-facut .parcurs__linie { background: var(--verde); }
.parcurs__pas:last-child .parcurs__linie { display: none; }

.parcurs__eticheta {
  margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .92rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap;
}
.e-viitor .parcurs__eticheta { color: var(--text-mai-slab); font-weight: 500; }

.parcurs__acum {
  padding: 2px 8px; border-radius: 999px; background: var(--verde-lumina);
  color: var(--verde-text); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.parcurs__explicatie { margin: 0; font-size: .82rem; color: var(--text-slab); line-height: 1.45; }
.parcurs__moment { margin: 0; font-size: .78rem; color: var(--text-mai-slab); font-variant-numeric: tabular-nums; }
.parcurs__awb {
  margin: 2px 0 0; font-size: .78rem; color: var(--text-slab);
  font-variant-numeric: tabular-nums;
}
.parcurs__awb strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; color: var(--text); }

/* Abaterile de la parcurs: eșec, anulare, rambursare. */
.parcurs-abatere {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  border: 1px solid; border-radius: var(--r); font-size: .88rem;
}
.parcurs-abatere svg {
  width: 20px; height: 20px; flex: none; margin-top: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round;
}
.parcurs-abatere--esec_furnizor { color: #8A6100; background: #FFFCF5; border-color: #F0DCA8; }
.parcurs-abatere--anulata,
.parcurs-abatere--rambursata { color: var(--text-slab); background: var(--fundal); border-color: var(--contur); }

@media (max-width: 760px) {
  /* Pe telefon parcursul curge pe verticală: cinci pași unul lângă altul ar
     lăsa etichetele pe câte două litere. */
  .parcurs { grid-template-columns: 1fr; gap: 0; padding: var(--s5); }
  .parcurs__pas { justify-items: start; text-align: left; padding: 0; }
  .parcurs__eticheta { justify-content: flex-start; }
  .parcurs__pas {
    grid-template-columns: 26px 1fr; align-items: start;
    gap: var(--s2) var(--s3); padding: 0 0 var(--s4);
  }
  .parcurs__text { grid-column: 2; }
  /* Semnul are exact 26px, iar pasul are 16px de spatiu sub el. Linia
     porneste de la marginea de jos a punctului si merge pana la baza
     pasului, adica fix acolo unde incepe punctul urmator. Cu 30px sus si
     4px jos ramaneau doua goluri de cate 4px, iar drumul parea intrerupt. */
  .parcurs__linie {
    top: 26px; bottom: 0; left: 12px; right: auto; width: 2px; height: auto;
  }
  .parcurs__pas:last-child { padding-bottom: 0; }
}

/* ── bara de stare de pe pagina comenzii ──────────────────────────────── */
.stare-cap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin: var(--s5) 0 var(--s4); padding: var(--s5);
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  border-radius: var(--r-mare);
}
/* La abatere fondul devine neutru: verdele ar spune „totul e bine" tocmai
   când nu e. */
.stare-cap--abatere { background: var(--fundal); border-color: var(--contur); }

.stare-cap__eticheta {
  margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-slab);
}
.stare-cap__stare {
  margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 700; line-height: 1.15;
}
.stare-cap__explicatie { margin: 4px 0 0; font-size: .9rem; color: var(--text-slab); max-width: 46ch; }

.stare-cap__date {
  display: grid; grid-auto-flow: column; gap: var(--s5); margin: 0; text-align: right;
}
.stare-cap__date dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mai-slab);
}
.stare-cap__date dd {
  margin: 2px 0 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

@media (max-width: 760px) {
  .stare-cap { gap: var(--s4); }
  .stare-cap__date {
    grid-auto-flow: row; grid-template-columns: repeat(2, 1fr);
    gap: var(--s3) var(--s4); text-align: left; width: 100%;
    padding-top: var(--s4); border-top: 1px solid var(--verde-contur);
  }
  .stare-cap--abatere .stare-cap__date { border-top-color: var(--contur); }
}

/* Butonul de întoarcere de pe pagina comenzii, pe toate ecranele: drumul
   înapoi la lista de comenzi e cel mai folosit de aici, iar firimiturile de
   deasupra sunt text mic. */
.inapoi-comenzi {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4); margin: 0 0 var(--s4);
  font-size: .9rem; font-weight: 600; color: var(--verde-text);
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  border-radius: var(--r);
  transition: background var(--tranzitie), border-color var(--tranzitie);
}
.inapoi-comenzi:hover { background: var(--verde-contur); }
.inapoi-comenzi svg {
  width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.tabel-comanda__gratis {
  margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--verde-lumina); color: var(--verde-text);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 760px) {
  /* pe telefon firimiturile devin de prisos lângă buton */
  .container > .firimituri:has(+ .inapoi-comenzi) { display: none; }
}

/* ═══ pastile de stare (site) ═════════════════════════════════════════════
   Existau doar în admin.css, deci în contul clientului stările se vedeau ca
   text simplu, fără culoare. Aici sunt scrise pe paleta publică, cu variante
   proprii pentru modul întunecat — fundalurile pale de pe alb devin ilizibile
   pe fundal închis, iar textul închis, invizibil. */
.pastila {
  display: inline-block; padding: 3px 10px; font-size: .74rem; font-weight: 700;
  border-radius: 999px; white-space: nowrap; letter-spacing: .01em;
}
.pastila--mare { padding: 6px 14px; font-size: .85rem; }

.pastila--verde    { color: #1E6B2E; background: #E4F6E2; }
.pastila--albastru { color: #1B5C86; background: #E1F0FA; }
.pastila--galben   { color: #7A5200; background: #FDF3DC; }
.pastila--rosu     { color: #96261F; background: #FCE9E7; }
.pastila--gri      { color: var(--text-slab); background: var(--fundal); }

:root[data-tema="dark"] {
  --p-verde-t: #9FE68A; --p-verde-f: #17301C;
  --p-albastru-t: #8ECBF2; --p-albastru-f: #14293A;
  --p-galben-t: #F2C464; --p-galben-f: #33290F;
  --p-rosu-t: #FF9C94; --p-rosu-f: #371B19;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --p-verde-t: #9FE68A; --p-verde-f: #17301C;
    --p-albastru-t: #8ECBF2; --p-albastru-f: #14293A;
    --p-galben-t: #F2C464; --p-galben-f: #33290F;
    --p-rosu-t: #FF9C94; --p-rosu-f: #371B19;
  }
}
/* Variabilele lipsesc pe tema deschisă, iar var() cade pe valoarea de rezervă —
   deci aceleași reguli servesc ambele moduri, fără să le dublăm. */
.pastila--verde    { color: var(--p-verde-t, #1E6B2E);    background: var(--p-verde-f, #E4F6E2); }
.pastila--albastru { color: var(--p-albastru-t, #1B5C86); background: var(--p-albastru-f, #E1F0FA); }
.pastila--galben   { color: var(--p-galben-t, #7A5200);   background: var(--p-galben-f, #FDF3DC); }
.pastila--rosu     { color: var(--p-rosu-t, #96261F);     background: var(--p-rosu-f, #FCE9E7); }

/* ── ținte de atins pe telefon ────────────────────────────────────────────
   Câteva comenzi arată mic pentru că așa trebuie să arate — comutatorul de
   temă, „Șterge tot", X-ul de pe cardul de comparare. Mărim SUPRAFAȚA DE
   ATINS, nu desenul: un pseudo-element întins peste, care nu mișcă nimic din
   așezare. Minimul e 44px, cât recomandă și Apple, și Material. */
@media (max-width: 900px) {
  .tema, .panou__reset, .tc-scoate button, .banda-ue__text a, .cos__inapoi,
  .cont-cutie__jos a, .camp__link { position: relative; }

  .tema::after, .panou__reset::after, .tc-scoate button::after,
  .banda-ue__text a::after, .cont-cutie__jos a::after, .camp__link::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    translate: -50% -50%;
    min-width: 44px; min-height: 44px;
    width: 100%; height: 100%;
  }

  /* Bifele și butoanele radio: cresc și vizual, nu doar la atins — o bifă de
     18px se ratează des, iar aici greșeala costă (newsletter, tip de client). */
  .bifa input, .comutator__optiune input { width: 22px; height: 22px; }
  .bifa { padding: var(--s2) 0; }
}

/* ═══ factura ═════════════════════════════════════════════════════════════
   Pagină făcută pentru hârtie: fundal alb, contraste tari, fără culorile de
   marcă. Nu generăm PDF cu bibliotecă — „Salvează ca PDF" din browser dă
   același rezultat pe orice sistem, fără mii de fișiere pe găzduire. */
.factura { max-width: 820px; margin: var(--s5) auto var(--s8); }

.factura__avertisment {
  margin: 0 0 var(--s4); padding: var(--s3) var(--s4);
  background: #FFFCF5; border: 1px solid #F0DCA8; border-radius: var(--r);
  font-size: .86rem; color: #8A6100;
}
.factura__avertisment code { font-size: .82rem; }

.factura__actiuni { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.factura__actiuni .buton { min-height: 44px; }

.factura__foaie {
  padding: var(--s6); background: var(--alb);
  border: 1px solid var(--contur); border-radius: var(--r-mare);
  font-size: .88rem; line-height: 1.5;
}
.factura__foaie p { margin: 0 0 2px; }

.factura__cap { display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.factura__marca { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.3rem; font-weight: 700; margin-bottom: var(--s2) !important; }
.factura__firma { font-weight: 700; }

.factura__numar { text-align: right; }
.factura__tip { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-slab); }
.factura__serie { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.15rem; font-weight: 700; }
.factura__numar dl { margin: var(--s2) 0 0; display: grid; gap: 2px; }
.factura__numar dl > div { display: flex; justify-content: flex-end; gap: var(--s2); }
.factura__numar dt { color: var(--text-slab); }
.factura__numar dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.factura__parti {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  margin: var(--s6) 0; padding: var(--s4) 0;
  border-top: 1px solid var(--contur); border-bottom: 1px solid var(--contur);
}
.factura__eticheta {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-slab); margin-bottom: var(--s2) !important;
}
.factura__nume { font-weight: 700; font-size: 1rem; }

.factura__tabel { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); }
.factura__tabel th, .factura__tabel td { padding: var(--s2) var(--s3); text-align: left; }
.factura__tabel thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-slab); border-bottom: 2px solid var(--contur-tare);
}
.factura__tabel tbody td { border-bottom: 1px solid var(--contur); vertical-align: top; }
.factura__tabel .nr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.factura__det { display: block; font-size: .8rem; color: var(--text-slab); }

.factura__totaluri { display: flex; justify-content: flex-end; }
.factura__totaluri dl { margin: 0; min-width: 280px; display: grid; gap: 4px; }
.factura__totaluri dl > div { display: flex; justify-content: space-between; gap: var(--s4); }
.factura__totaluri dt { color: var(--text-slab); }
.factura__totaluri dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.factura__total {
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--contur-tare);
}
.factura__total dt, .factura__total dd {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--text) !important;
}

.factura__subsol { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--contur); }
.factura__mic { font-size: .78rem; color: var(--text-mai-slab); }

.comanda__factura {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; margin-bottom: var(--s6);
}
.comanda__factura svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 620px) {
  .factura__parti { grid-template-columns: 1fr; gap: var(--s4); }
  .factura__cap { gap: var(--s4); }
  .factura__numar { text-align: left; }
  .factura__numar dl > div { justify-content: flex-start; }
  .factura__foaie { padding: var(--s4); }
  .factura__totaluri dl { min-width: 0; width: 100%; }

  /* Tabelul facturii iesea 18px in afara ecranului pe un telefon de 375px,
     iar pagina incepea sa deruleze lateral. Pe latime mica strangem
     spatierea si scriem mai mic; coloana de numere ramane netaiata, ca sunt
     sume. Daca tot nu incape — nume lung de produs — invelisul de mai jos
     deruleaza tabelul, nu pagina. */
  .factura__tabel { font-size: .84rem; }
  .factura__tabel th, .factura__tabel td { padding: var(--s2) 6px; }
  .factura__tabel thead th { font-size: .68rem; letter-spacing: .02em; }
  .factura__det { font-size: .74rem; }
}

/* Ultima plasa de siguranta: ce nu incape se deruleaza in cutia lui.
   Pagina, niciodata. */
.factura__tabel-invelis { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── la tipărire ─────────────────────────────────────────────────────────
   Rămâne doar foaia: fără antet, fără subsol, fără butoane. Culorile se
   forțează pe alb-negru, ca documentul să iasă la fel și dacă browserul e
   pe modul întunecat. */
@media print {
  .banda-ue, .antet, .subsol, .bara-comparare,
  .factura__actiuni, .factura__avertisment, .sari-la-continut { display: none !important; }

  html, body { background: #fff !important; color: #000 !important; }
  .factura { max-width: none; margin: 0; }
  .factura__foaie {
    border: 0; border-radius: 0; padding: 0;
    background: #fff !important; color: #000 !important;
  }
  .factura__foaie * { color: #000 !important; }
  .factura__tabel thead { display: table-header-group; }   /* antet repetat pe fiecare pagină */
  .factura__tabel tr { break-inside: avoid; }
  @page { margin: 16mm; }
}

/* ═══ culori fixe, refăcute pe modul întunecat ════════════════════════════
   Câteva zone au fost scrise cu hex direct, nu prin variabile: fundaluri pale
   de avertisment, textul descrierii, insignele de sezon. Pe temă închisă ele
   rămâneau deschise, iar textul — moștenit din temă — devenea alb pe crem.
   Le declarăm o singură dată, prin variabile, ca ambele moduri să le ia de
   aici și să nu mai fie nevoie de reguli duble. */
:root {
  --avertisment-t: #8A6100; --avertisment-f: #FFF8E8; --avertisment-c: #F0DCA8;
  --eroare-f: #FDF0EF; --eroare-c: #F2C9C6;
  --iarna-f: #E9F3FB;    --iarna-c: #BFDCF0;
  --descriere-t: #23343C;
  --inima-t: #D64550;    --inima-f: #FDF3F4; --inima-c: #F0C4C8;
}
:root[data-tema="dark"] {
  --avertisment-t: #F2C464; --avertisment-f: #33290F; --avertisment-c: #5C4A1C;
  --eroare-f: #371B19;      --eroare-c: #5E2C28;
  --iarna-f: #14293A;       --iarna-c: #2A4A63;
  --descriere-t: #CBD8DE;
  --inima-t: #FF9C94;       --inima-f: #33191B; --inima-c: #5C2C30;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --avertisment-t: #F2C464; --avertisment-f: #33290F; --avertisment-c: #5C4A1C;
    --eroare-f: #371B19;      --eroare-c: #5E2C28;
    --iarna-f: #14293A;       --iarna-c: #2A4A63;
    --descriere-t: #CBD8DE;
    --inima-t: #FF9C94;       --inima-f: #33191B; --inima-c: #5C2C30;
  }
}

/* Avertismentul de retur: îi dăm și CULOARE DE TEXT, nu doar fundal. Fără ea
   moștenea textul temei — alb pe crem, adică nimic. */
.cumpara__retur {
  color: var(--avertisment-t);
  background: var(--avertisment-f);
  border-color: var(--avertisment-c);
}
.cumpara__retur svg { color: var(--avertisment-t); }
.cumpara__retur--bine {
  color: var(--verde-inchis); background: var(--verde-lumina); border-color: var(--verde-contur);
}

.linie__retur, .linie__nota {
  color: var(--avertisment-t); background: var(--avertisment-f); border-color: var(--avertisment-c);
}
.sumar__avertisment { color: var(--avertisment-t) !important; }
.linie--ajustata { border-color: var(--avertisment-c); background: var(--avertisment-f); }

.descriere p { color: var(--descriere-t); }

.alerta--eroare { background: var(--eroare-f); border-color: var(--eroare-c); }
.card__sezon--iarna { background: var(--iarna-f); border-color: var(--iarna-c); }

.unealta--inima:hover { color: var(--inima-t); border-color: var(--inima-c); }
.cos--favorite:hover { color: var(--inima-t); background: var(--inima-f); border-color: var(--inima-c); }
.linie__scoate:hover, .tc-scoate button:hover { border-color: var(--eroare-c); }

/* ── butoanele de pe card (inimă, comparare) ──────────────────────────────
   Aveau fundal alb scris fix. Pe temă închisă rămâneau albe, dar iconița lua
   culoarea temei — gri deschis pe alb, adică se pierdea. Suprafața devine
   acum una a temei, iar iconițele arată la fel în ambele moduri. */
:root { --unealta-f: rgba(255, 255, 255, .94); }
:root[data-tema="dark"] { --unealta-f: rgba(19, 31, 38, .92); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) { --unealta-f: rgba(19, 31, 38, .92); }
}

.unealta { background: var(--unealta-f); }

/* Starea activă rămâne identică în ambele moduri: verdele de marcă cu semn
   închis pe el, adică exact aceeași iconiță, nu alta. */
.unealta--compara.e-activ {
  color: var(--bleumarin); background: var(--verde); border-color: var(--verde);
}
:root[data-tema="dark"] .unealta--compara.e-activ { color: #0B232D; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) .unealta--compara.e-activ { color: #0B232D; }
}

/* Acordul de renunțare la retur: fundal crem scris fix, iar textul moștenea
   culoarea temei — alb pe crem în modul întunecat. Trece pe aceleași variabile
   ca restul avertismentelor. */
.acord--atentie {
  color: var(--avertisment-t);
  background: var(--avertisment-f);
  border-color: var(--avertisment-c);
}
.acord--atentie strong { color: var(--avertisment-t); }
.acord--atentie input[type=checkbox] { accent-color: var(--avertisment-t); }

/* Alerta de atenționare din coș („Am ajustat cantitățile"): fundal crem scris
   fix, text moștenit din temă. Aceeași familie de problemă ca la celelalte
   avertismente — trece pe variabilele lor. */
.alerta--atentie {
  color: var(--avertisment-t);
  background: var(--avertisment-f);
  border-color: var(--avertisment-c);
}
.alerta--atentie strong,
.alerta--atentie p,
.alerta--atentie svg { color: var(--avertisment-t); }

/* Pe linia cu cantitate ajustată fundalul e cald, nu neutru: textele estompate
   (marca, prețul unitar) rămâneau pe gri și scădeau la 4,27:1. Iau culoarea
   avertismentului, ca tot ce e pe fundalul ăla să fie citibil. */
.linie--ajustata .linie__marca,
.linie--ajustata .linie__unitar,
.linie--ajustata .linie__masura { color: var(--avertisment-t); }

/* ── butonul de golire a căutării ─────────────────────────────────────────
   Cel pus de browser rămânea cu cursorul de text, deși e un buton, iar în
   Firefox nu există deloc. Îl ascundem și punem unul al nostru — același în
   toate browserele, cu cursorul potrivit și cu nume pentru cititoarele de ecran. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.cauta-cu-x { position: relative; display: flex; flex: 1; min-width: 0; }
.cauta-cu-x input { flex: 1; min-width: 0; padding-right: 44px !important; }

.cauta-x {
  position: absolute; top: 50%; right: 8px; translate: 0 -50%;
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  color: var(--text-mai-slab); background: none; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: color var(--tranzitie), background var(--tranzitie);
}
.cauta-x:hover { color: var(--text); background: var(--fundal); }
.cauta-x[hidden] { display: none; }
.cauta-x svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
}

/* În antet câmpul e lipit de butonul „Caută", deci x-ul stă înaintea lui. */
.cauta-x--antet { right: auto; left: auto; margin-left: -42px; position: static; translate: none; align-self: center; }
.cautare:has(.cauta-x:not([hidden])) .cautare__camp { padding-right: 40px; }

/* ── comutatorul urmează sistemul și vizual ───────────────────────────────
   Poziția bilei venea doar din aria-checked, pus de JavaScript la un eveniment
   „s-a schimbat setarea sistemului" care nu se declanșează peste tot. Dacă îl
   rata, pagina era întunecată dar butonul arăta soarele.
   Aici spunem același lucru din CSS: cât timp omul n-a ales explicit
   (:root fără data-tema), butonul arată ce zice sistemul. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .tema__pista { background: linear-gradient(160deg, #26374A, #131F2C); }
  :root:not([data-tema]) .tema__soare { transform: translateX(30px); opacity: 0; }
  :root:not([data-tema]) .tema__luna  { transform: translateX(30px); opacity: 1; }
  :root:not([data-tema]) .tema__buline { opacity: .85; }
}
@media (prefers-color-scheme: dark) and (max-width: 720px) {
  :root:not([data-tema]) .tema__soare,
  :root:not([data-tema]) .tema__luna { transform: translateX(24px); }
}


/* Pastila din lista de comenzi se aseaza la stanga in celula ei, ca sa nu se
   intinda si sa nu pluteasca centrata intr-un gol. */
.comanda-rand .pastila { justify-self: start; }

/* ── paginarea din contul clientului ─────────────────────────────────── */
.paginare-cont {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--s4);
}
.paginare-cont a, .paginare-cont span {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  padding: 0 var(--s2); border: 1px solid var(--contur); border-radius: var(--r);
  font-size: .9rem; font-weight: 600; color: inherit;
  font-variant-numeric: tabular-nums;
}
.paginare-cont a:hover { border-color: var(--verde-contur); background: var(--verde-lumina); }
.paginare-cont .activ { color: var(--bleumarin); background: var(--verde); border-color: var(--verde); }


/* Prețul: lățime fixă și cifre de aceeași lățime, ca sumele să se citească
   una sub alta fără să sară virgula. */
.comanda-rand__total { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 620px) {
  /* Pe ecran mic rândul se rupe pe două linii. Zonele sunt numite explicit, ca
     data și prețul să cadă tot pe aceleași coloane: numărul sus-stânga,
     eticheta sus-dreapta, data jos-stânga, prețul jos-dreapta. */
  .comanda-rand {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nr eticheta" "data pret";
    row-gap: 6px; column-gap: var(--s3);
  }
  .comanda-rand__nr    { grid-area: nr; }
  .comanda-rand__data  { grid-area: data; }
  .comanda-rand .pastila { grid-area: eticheta; justify-self: end; }
  /* Latime fixa si aici: cu "justify-self: end" singur, elementul se strange
     pe cat text are, iar cifrele porneau din locuri diferite. */
  .comanda-rand__total { grid-area: pret; justify-self: end; width: 118px; }
  .comanda-rand__sageata { display: none; }
}

/* ═══ contact ═════════════════════════════════════════════════════════════
   Ordinea de pe pagină e intenționată: întâi CUM ne găsești, abia apoi
   formularul. Cine are o urgență vrea un număr de telefon, nu o casetă de
   text — iar cine preferă să scrie ajunge oricum la formular, e dedesubt. */
.contact-cap { max-width: 62ch; margin: var(--s6) 0 var(--s6); }
.contact-cap .titlu-pagina { margin-bottom: var(--s2); }
.contact-cap__sub { margin: 0; font-size: 1.05rem; color: var(--text-slab); line-height: 1.6; }

.contact-carduri {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s3); margin-bottom: var(--s7);
}
.contact-card {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s5); color: inherit;
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  transition: border-color var(--tranzitie), box-shadow var(--tranzitie), transform var(--tranzitie);
}
/* Doar cardurile pe care se poate apăsa reacționează — adresa nu duce nicăieri,
   deci n-are voie să se comporte ca un buton. */
a.contact-card:hover {
  border-color: var(--verde-contur); box-shadow: var(--umbra-2); transform: translateY(-2px);
}
.contact-card--static { background: var(--fundal); }

.contact-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: 50%; background: var(--verde-lumina); color: var(--verde-text);
}
.contact-card__icon svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.contact-card__text { display: grid; gap: 2px; min-width: 0; }
/* Pe cardul static fundalul e gri, nu alb, iar culoarea estompata scade acolo
   la 4,46:1. La 0,72rem cu majuscule nu ne permitem sub prag, deci folosim
   varianta mai inchisa. */
.contact-card__eticheta {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-slab);
}
.contact-card__text strong {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.02rem; line-height: 1.3;
  overflow-wrap: anywhere;
}
.contact-card__mic { font-size: .82rem; color: var(--text-slab); }

.contact-jos {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s6); align-items: start; margin-bottom: var(--s8);
}
.contact-formular h2, .contact-bloc h2 { font-size: 1.15rem; margin: 0 0 var(--s4); }
.camp__textarea { min-height: 150px; padding: var(--s3); line-height: 1.55; resize: vertical; }

.contact-reusit {
  padding: var(--s6); text-align: center;
  background: var(--verde-lumina); border: 1px solid var(--verde-contur); border-radius: var(--r-mare);
}
.contact-reusit h3 { margin: 0 0 var(--s2); font-size: 1.2rem; }
.contact-reusit p { margin: 0; color: var(--text-slab); }

.contact-bloc {
  padding: var(--s5); background: var(--alb);
  border: 1px solid var(--contur); border-radius: var(--r-mare);
}
.contact-bloc + .contact-bloc { margin-top: var(--s3); }
.contact-bloc--firma { background: var(--fundal); }

.contact-legaturi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.contact-legaturi a { display: block; padding: var(--s2) 0; font-size: .92rem; color: var(--verde-text); font-weight: 600; }
.contact-legaturi a:hover { text-decoration: underline; }

.contact-firma { margin: 0; display: grid; gap: var(--s2); font-size: .88rem; }
.contact-firma > div { display: grid; gap: 1px; }
.contact-firma dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-slab); }
.contact-firma dd { margin: 0; }

@media (max-width: 900px) {
  .contact-carduri { grid-template-columns: 1fr; }
  .contact-jos { grid-template-columns: minmax(0, 1fr); }
}

/* ── contactul din subsol ─────────────────────────────────────────────── */
.subsol__contact { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.subsol__contact li { display: flex; align-items: flex-start; gap: var(--s2); font-size: .88rem; }
.subsol__contact svg {
  width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--verde);
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.subsol__contact a { overflow-wrap: anywhere; }

.subsol__contact-buton {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4);
  font-size: .88rem; font-weight: 600; color: var(--verde);
  border: 1px solid rgba(126, 217, 87, .4); border-radius: var(--r);
  transition: background var(--tranzitie), color var(--tranzitie);
}
/* La hover se umplea cu verde si textul devenea bleumarin — dar pe fundalul
   inchis al subsolului asta arata ca un bloc verde plin, prea tare pentru un
   link secundar. Ramane conturat, doar se aprinde. */
.subsol__contact-buton:hover {
  color: var(--verde); border-color: var(--verde); background: rgba(126, 217, 87, .12);
}

/* Butonul de contact din contul clientului, lângă ieșirea din cont. */
.cont-cap__actiuni { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.cont-cap__actiuni .buton svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
  /* Numele produsului din coș e drumul principal înapoi la pagina lui, dar are
     doar înălțimea textului — 19px, sub jumătate din cât cere un deget.
     Creștem zona de atins pe verticală, fără să mișcăm așezarea. */
  .linie__model a { display: inline-block; padding: 6px 0; }
  .linie__model { margin-top: -6px; margin-bottom: -2px; }
}

@media (max-width: 900px) {
  /* Ținte prea mici, măsurate pe telefon: bifele din checkout și X-ul de pe
     cardul de comparare. Creștem suprafața de atins, nu desenul. */
  .acord input[type=checkbox] { width: 22px; height: 22px; }
  .tc-scoate button { width: 32px; height: 32px; }
  .checkout__invitatie a { display: inline-block; padding: 4px 0; }
}

@media (max-width: 900px) {
  /* Legăturile din textul de acord („termenii și condițiile", „politica de
     confidențialitate") au doar înălțimea textului. Cresc zona de atins fără
     să rupă rândul: padding pe verticală, cu margine negativă compensatorie. */
  .acord a { display: inline-block; padding: 5px 0; margin: -5px 0; }
}

/* ── chenarele din Drive & Care ───────────────────────────────────────────
   Intră pe rând, la derulare, nu la încărcarea paginii: secțiunea e jos, iar
   o animație care s-a consumat înainte să ajungi acolo n-a fost văzută de
   nimeni. Decalajul mic între ele conduce privirea de sus în jos. */
/* Ascunse DOAR daca JavaScript-ul a apucat sa marcheze pagina. Scrise invers —
   ascunse din start — un browser fara observator sau cu scriptul blocat le-ar
   lasa invizibile pentru totdeauna, iar continutul dispare de tot. Asa, cel mai
   rau caz e ca apar fara animatie. */
.drive-care__puncte li {
  transition: opacity 520ms cubic-bezier(.2, .7, .3, 1),
              translate 520ms cubic-bezier(.2, .7, .3, 1),
              background var(--tranzitie), border-color var(--tranzitie);
}
.js-anim .drive-care__puncte li { opacity: 0; translate: 0 14px; }
.js-anim .drive-care__puncte li:nth-child(2) { transition-delay: 90ms; }
.js-anim .drive-care__puncte li:nth-child(3) { transition-delay: 180ms; }

.js-anim .drive-care__puncte li.e-vizibil { opacity: 1; translate: 0 0; }

/* La trecerea cu mausul se aprind ușor și iconița capătă un halou verde —
   destul cât să se simtă vii, fără să distragă de la text. */
.drive-care__puncte li:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(126, 217, 87, .35);
}
.drive-care__puncte svg { transition: transform var(--tranzitie), filter var(--tranzitie); }
.drive-care__puncte li:hover svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 6px rgba(126, 217, 87, .45));
}

/* Cine a cerut mai puțină mișcare le vede direct la locul lor. */
@media (prefers-reduced-motion: reduce) {
  .drive-care__puncte li {
    opacity: 1; translate: none; transition: background var(--tranzitie), border-color var(--tranzitie);
  }
  .drive-care__puncte li:hover svg { transform: none; }
}




/* ═══ drumul coletului ════════════════════════════════════════════════════
   Bloc de sine stătător, sub banda de progres. Pus înăuntrul unui pas, umfla
   coloana lui la 400px și lăsa celelalte patru cu un gol de 180px fiecare —
   banda de progres trebuie să rămână scurtă și scanabilă. */
.colet {
  margin: 0 0 var(--s6); padding: var(--s5);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
}

.colet__cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--contur);
}
.colet__titlu { margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1rem; font-weight: 700; }
.colet__awb { margin: 2px 0 0; font-size: .86rem; color: var(--text-slab); font-variant-numeric: tabular-nums; }
.colet__awb strong { color: var(--text); }

.colet__estimare { margin: 0; text-align: right; }
.colet__estimare span {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mai-slab);
}
.colet__estimare strong {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}

/* Lista, cu o linie verticală care leagă punctele — se citește ca un drum,
   nu ca un tabel de evenimente. */
.colet__pasi { list-style: none; margin: 0; padding: 0; position: relative; }
.colet__pasi li {
  position: relative;
  display: grid; grid-template-columns: 22px 78px 1fr auto;
  align-items: baseline; gap: var(--s2);
  padding: 7px 0; font-size: .84rem; color: var(--text-slab);
}
/* linia dintre puncte */
.colet__pasi li::before {
  content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px;
  background: var(--contur);
}
.colet__pasi li:first-child::before { top: 50%; }
.colet__pasi li:last-child::before  { bottom: 50%; }

.colet__punct {
  width: 9px; height: 9px; margin-top: 5px; border-radius: 50%;
  background: var(--contur-tare); position: relative; z-index: 1;
}
.colet__cand { font-variant-numeric: tabular-nums; color: var(--text-mai-slab); white-space: nowrap; }
.colet__unde { color: var(--text-mai-slab); white-space: nowrap; }

/* Cel mai recent pas: întrebarea clientului e „unde e ACUM", deci ăsta e
   evidențiat, nu primul din cronologie. */
.colet__pas--ultim { color: var(--text); font-weight: 600; }
.colet__pas--ultim .colet__punct {
  background: var(--verde); box-shadow: 0 0 0 3px var(--verde-lumina);
}
.colet__pas--ultim .colet__cand { color: var(--verde-text); }

.colet__gol { margin: 0; font-size: .86rem; color: var(--text-slab); }
.colet__primit {
  margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--contur);
  font-size: .86rem; color: var(--text-slab);
}
.colet__primit strong { color: var(--text); }

.parcurs-abatere__motiv { font-size: .84rem; opacity: .9; }

@media (max-width: 620px) {
  /* Pe telefon locația coboară sub descriere, ca rândul să nu se strivească. */
  .colet__pasi li { grid-template-columns: 22px 78px 1fr; row-gap: 2px; }
  .colet__unde { grid-column: 3; font-size: .78rem; }
  .colet__estimare { text-align: left; }
}

/* ── semnul de sezon de pe card ───────────────────────────────────────────
   Era emoji: desenat altfel de fiecare sistem și imposibil de colorat din CSS,
   deci ilizibil pe modul întunecat. Acum e un semn desenat, care ia culoarea
   sezonului și se vede la fel peste tot. */
:root {
  --vara-t: #8A5A00;  --vara-f: #FFF4DE;  --vara-c: #F0D79B;
  --iarna-t: #1B5C86; --iarna-f2: #E4F1FA; --iarna-c2: #BBD9EF;
  --mixt-t: #1E6B2E;  --mixt-f: #E4F6E2;  --mixt-c: #BEE5B8;
}
:root[data-tema="dark"] {
  --vara-t: #F2C464;  --vara-f: #33290F;  --vara-c: #5C4A1C;
  --iarna-t: #8ECBF2; --iarna-f2: #14293A; --iarna-c2: #2A4A63;
  --mixt-t: #9FE68A;  --mixt-f: #17301C;  --mixt-c: #2E5C3A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --vara-t: #F2C464;  --vara-f: #33290F;  --vara-c: #5C4A1C;
    --iarna-t: #8ECBF2; --iarna-f2: #14293A; --iarna-c2: #2A4A63;
    --mixt-t: #9FE68A;  --mixt-f: #17301C;  --mixt-c: #2E5C3A;
  }
}

.card__sezon {
  width: 32px; height: 32px;
  background: var(--alb); border: 1px solid var(--contur);
  box-shadow: 0 1px 3px rgba(11, 35, 45, .1);
}
.sezon-semn {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.card__sezon--vara       { color: var(--vara-t);  background: var(--vara-f);   border-color: var(--vara-c); }
.card__sezon--iarna      { color: var(--iarna-t); background: var(--iarna-f2); border-color: var(--iarna-c2); }
.card__sezon--all_season { color: var(--mixt-t);  background: var(--mixt-f);   border-color: var(--mixt-c); }

/* Pe pagina de produs semnul stă lângă text, deci se aliniază cu el. */
.produs .sezon-semn { vertical-align: -3px; margin-right: 4px; }

/* ─────────────────────── pagini de informare ───────────────────────
   Text lung, de citit pe indelete: coloana ingusta (masura de ~68 de
   semne), titluri care se vad ca titluri fara sa tipe, si destul aer
   intre sectiuni cat sa poti sari cu ochiul de la una la alta. */
.proza {
  max-width: 68ch;
  /* Fara marginea de sus, h1 pornea exact de unde se termina antetul — zero
     spatiu, titlul parea lipit de bara. */
  margin: var(--s7) auto var(--s8);
  color: var(--text);
  line-height: 1.7;
}

/* ── text asezat ca restul paginii ────────────────────────────────────────
   Pe pagina "Despre" textul statea intr-o coloana ingusta centrata (incepea
   la 306px) iar sectiunea Drive & Care incepea la 32px — doua axe diferite pe
   aceeasi pagina. Aici textul primeste latimea containerului si porneste din
   aceeasi margine, exact ca Drive & Care: titlurile tin toata latimea,
   paragrafele raman la o masura la care se citeste. */
.proza--lat { max-width: none; margin-inline: 0; }
.proza--lat > p,
.proza--lat > ul,
.proza--lat > ol,
.proza--lat > blockquote { max-width: 68ch; }

.proza h1 { margin-bottom: var(--s2); }

.proza__data {
  color: var(--text-mai-slab);
  font-size: .875rem;
  margin-bottom: var(--s6);
}

.proza__intro {
  font-size: 1.0625rem;
  color: var(--text-slab);
  background: var(--verde-lumina);
  border-left: 3px solid var(--verde);
  border-radius: 0 var(--r) var(--r) 0;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s7);
}

.proza h2 {
  font-size: 1.25rem;
  margin: var(--s7) 0 var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--contur);
}

.proza h2:first-of-type { border-top: 0; padding-top: 0; }

.proza h3 {
  font-size: 1.0625rem;
  margin: var(--s5) 0 var(--s3);
}

.proza p { margin-bottom: var(--s4); }

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

.proza li { margin-bottom: var(--s2); }

.proza a {
  color: var(--verde-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.proza a:hover { color: var(--verde-inchis); }

/* Datele de identificare: perechi eticheta/valoare, aliniate pe doua
   coloane pe ecran larg si stivuite pe telefon. */
.proza__date {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  margin: 0 0 var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--fundal);
  border: 1px solid var(--contur);
  border-radius: var(--r);
}

.proza__date dt { color: var(--text-slab); }
.proza__date dd { margin: 0; font-weight: 600; }

/* Ce n-a fost completat inca in .env. Se vede ca lipseste, dinadins:
   intr-un document legal un camp gol e mai onest decat o valoare pusa
   ca sa arate plin. */
.proza__lipsa {
  color: var(--rosu);
  font-style: normal;
  font-weight: 400;
  font-size: .875rem;
}

.proza__tabel {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s5);
  font-size: .9375rem;
}

.proza__tabel th,
.proza__tabel td {
  text-align: left;
  padding: var(--s3);
  border-bottom: 1px solid var(--contur);
  vertical-align: top;
}

.proza__tabel th {
  color: var(--text-slab);
  font-weight: 600;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.proza__tabel tbody tr:last-child td { border-bottom: 0; }

.proza__nota {
  color: var(--text-slab);
  font-size: .9375rem;
  margin-top: calc(var(--s4) * -1 + var(--s2));
}

@media (max-width: 640px) {
  .proza__date {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .proza__date dt { margin-top: var(--s3); }
  .proza__date dt:first-child { margin-top: 0; }

  /* Tabelele au trei coloane la confidentialitate; pe telefon nu incap,
     deci le lasam sa se deruleze in propriul chenar, nu sa impinga
     pagina in lateral. */
  .proza__tabel-cadru { overflow-x: auto; }
}

/* ── insigna de sezon de pe fisa de produs ────────────────────────────────
   Statea pe doua randuri: semnul si textul erau doua elemente separate
   intr-un chenar ingust, iar semnul le rupea. Aici e un singur rand care nu
   se mai poate rupe, la aceeasi inaltime cu insignele vecine (XL, RunFlat).

   Culorile sunt exact cele din grila de listare — aceleasi variabile, deci
   daca se schimba acolo se schimba si aici. Inainte era gri pe gri, adica
   singurul loc din site unde vara si iarna aratau la fel. */
.insigna--sezon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Aceeasi inaltime si aceeasi rotunjire ca insigna XL de langa ea. Bordura
     mananca 2px, deci padding-ul vertical e cu 1px mai mic decat al ei. */
  padding: 0 7px;
  min-height: 19px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid var(--contur);
  border-radius: var(--r-mic);
}

/* Semnul se aliniaza singur, prin flex; scoatem potriveala pe verticala
   care era nevoie doar cat timp statea in text curgator. */
.produs .insigna--sezon .sezon-semn {
  width: 12px;
  height: 12px;
  margin: 0;
  vertical-align: 0;
  flex: none;
}

.insigna--sezon-vara {
  color: var(--vara-t);
  background: var(--vara-f);
  border-color: var(--vara-c);
}
.insigna--sezon-iarna {
  color: var(--iarna-t);
  background: var(--iarna-f2);
  border-color: var(--iarna-c2);
}
.insigna--sezon-all_season {
  color: var(--mixt-t);
  background: var(--mixt-f);
  border-color: var(--mixt-c);
}

/* ── parcursul unei cereri de retur ───────────────────────────────────────
   Aceeasi structura ca parcursul comenzii, alta culoare. Verdele inseamna
   "merge bine, coletul vine spre tine"; un retur e alt fel de drum, iar daca
   ar arata identic omul n-ar sesiza dintr-o privire la care dintre cele doua
   benzi se uita. Chihlimbariu: nici succes, nici eroare — in lucru. */
:root {
  --retur-t:  #8A5200;
  --retur-f:  #FFF3E0;
  --retur-c:  #F0CE9B;
  --retur-p:  #C77E00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --retur-t: #F2B95E;
    --retur-f: #33260F;
    --retur-c: #5C441C;
    --retur-p: #E0A03C;
  }
}

:root[data-tema="dark"] {
  --retur-t: #F2B95E;
  --retur-f: #33260F;
  --retur-c: #5C441C;
  --retur-p: #E0A03C;
}

.retur {
  margin: 0 0 var(--s6);
  padding: var(--s5);
  background: var(--alb);
  border: 1px solid var(--retur-c);
  border-radius: var(--r-mare);
  box-shadow: var(--umbra-1);
}

.retur__cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--contur);
}

.retur__titlu {
  margin: 0 0 2px;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--retur-t);
}
.retur__numar { margin: 0; font-size: .92rem; color: var(--text-slab); }

.retur__suma { margin: 0; text-align: right; }
.retur__suma span { display: block; font-size: .72rem; color: var(--text-mai-slab); }
.retur__suma strong { font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.1rem; }

/* Punctele si liniile parcursului, in chihlimbariu in loc de verde. */
.parcurs--retur .e-facut .parcurs__semn {
  background: var(--retur-p); border-color: var(--retur-p); color: var(--alb);
}
.parcurs--retur .e-acum .parcurs__semn {
  background: var(--alb); border-color: var(--retur-p);
  box-shadow: 0 0 0 4px var(--retur-f);
}
.parcurs--retur .e-facut .parcurs__linie { background: var(--retur-p); }
.parcurs--retur .parcurs__acum {
  background: var(--retur-f); color: var(--retur-t);
}

/* Cererea respinsa foloseste aceleasi variabile de eroare ca restul site-ului,
   deci se schimba singura la tema intunecata. Textul e --rosu, ca peste tot. */
.parcurs-abatere--respinsa {
  color: var(--rosu);
  background: var(--eroare-f);
  border-color: var(--eroare-c);
}

.retur__awb {
  margin: var(--s4) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--contur);
  font-size: .92rem; color: var(--text-slab);
}

.retur__produse {
  margin: var(--s4) 0 0; padding: 0; list-style: none;
  border-top: 1px solid var(--contur);
}
.retur__produse li {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--contur);
  font-size: .92rem;
}
.retur__produse li:last-child { border-bottom: 0; }
.retur__buc {
  min-width: 2.2em;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
  color: var(--retur-t);
}
.retur__dim { margin-left: auto; color: var(--text-mai-slab); font-size: .85rem; }

/* Livrarea, redusa la un rand: s-a terminat, dar nu vrem s-o stergem. */
.retur__livrare {
  display: flex; align-items: center; gap: var(--s2);
  margin: calc(var(--s6) * -1 + var(--s4)) 0 var(--s6);
  font-size: .92rem; color: var(--text-slab);
}
.retur__livrare svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: var(--verde-text); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── pozele trimise, in parcursul returului ───────────────────────────── */
.retur__poze { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--contur); }
.retur__poze-titlu {
  margin: 0 0 var(--s3);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mai-slab);
}
.retur__poze ul { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.retur__poze img {
  width: 88px; height: 88px; object-fit: cover;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
  transition: border-color var(--tranzitie);
}
.retur__poze a:hover img { border-color: var(--retur-p); }

/* Butonul de cerere retur, pe pagina comenzii. */
.comanda__retur { gap: var(--s2); }
.comanda__retur svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.comanda__retur-pana { color: var(--text-mai-slab); font-weight: 400; font-size: .82rem; }

@media (max-width: 560px) {
  .retur-alege li { flex-direction: column; align-items: stretch; gap: var(--s2); }
  .retur-alege__cant select { width: 100%; }
  .form-retur__final .buton { width: 100%; }
}

/* ── ce trebuie sa faca clientul, cand cererea e acceptata ────────────────
   Blocul asta e singurul din parcurs care cere o actiune, deci se desprinde
   de restul: fundal propriu si o linie chihlimbarie in stanga. Fara el,
   "Poti trimite coletul. Adresa e mai jos." trimitea catre o adresa care nu
   exista nicaieri pe pagina. */
.retur__pasul-tau {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--retur-f);
  border-left: 3px solid var(--retur-p);
  border-radius: 0 var(--r) var(--r) 0;
}

.retur__pasul-tau-titlu {
  margin: 0 0 var(--s3);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--retur-t);
}

.retur__adresa { margin: 0 0 var(--s3); }
.retur__adresa span { display: block; font-size: .78rem; color: var(--text-slab); }
.retur__adresa strong { font-size: 1.02rem; line-height: 1.5; }
.retur__adresa--lipsa { color: var(--text-slab); font-size: .92rem; }

.retur__indrumare { margin: 0 0 var(--s4); font-size: .88rem; color: var(--text-slab); }

.retur__awb-form {
  display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap;
}
.retur__awb-form .camp { flex: 1; min-width: 14rem; margin: 0; }

@media (max-width: 560px) {
  .retur__awb-form { align-items: stretch; }
  .retur__awb-form .buton { width: 100%; }
}

/* ── butonul de retur din lista de comenzi ────────────────────────────────
   Sta sub randul comenzii, nu in el: randul e deja un link catre comanda, iar
   un link in alt link nu e valid si nici nu se poate atinge cu degetul fara
   ambiguitate. Aliniat la dreapta pe ecran mare, pe toata latimea pe telefon. */
.comenzi-lista li { display: flex; flex-direction: column; align-items: stretch; }

.comanda-rand__retur {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  align-self: flex-end;
  min-height: 44px; margin-top: calc(var(--s2) * -1); padding: var(--s2) var(--s4);
  font-size: .88rem; font-weight: 600;
  color: var(--retur-t); background: none;
  border: 1px solid transparent; border-radius: var(--r-mic);
  transition: background var(--tranzitie), border-color var(--tranzitie);
}
.comanda-rand__retur svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.comanda-rand__retur:hover {
  background: var(--retur-f); border-color: var(--retur-c);
}

@media (max-width: 640px) {
  .comanda-rand__retur { align-self: stretch; margin-top: var(--s2); }
}

/* ═══ retur: culoare proprie, bara de sus, comanda incheiata ═════════════ */

/* Portocaliul de returnare. Galbenul era deja luat de "asteapta plata" si de
   "in verificare", iar doua lucruri foarte diferite cu aceeasi culoare se
   citesc gresit dintr-o privire. */
:root { --p-portocaliu-t: #9A4E00; --p-portocaliu-f: #FFF0E0; }
:root[data-tema="dark"] { --p-portocaliu-t: #FFB067; --p-portocaliu-f: #3A2410; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) { --p-portocaliu-t: #FFB067; --p-portocaliu-f: #3A2410; }
}
.pastila--portocaliu { color: var(--p-portocaliu-t); background: var(--p-portocaliu-f); }

/* Bara de sus de pe pagina comenzii: intoarcerea la stanga, actiunea la
   dreapta. La capete opuse nu se pot apasa una in locul alteia. */
.comanda-bara {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}
.comanda-bara .inapoi-comenzi { margin: 0; }

/* Comanda rambursata: doua date, nu un parcurs. */
.incheiat {
  margin: 0 0 var(--s6); padding: var(--s5);
  background: var(--fundal); border: 1px solid var(--contur);
  border-radius: var(--r-mare);
}
.incheiat__titlu {
  margin: 0 0 var(--s4);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mai-slab);
}
.incheiat__date { display: flex; gap: var(--s7); flex-wrap: wrap; margin: 0; }
.incheiat__date dt { margin-bottom: 2px; font-size: .78rem; color: var(--text-slab); }
.incheiat__date dd {
  margin: 0; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.05rem; font-weight: 700;
}
.incheiat__suma { display: block; font-family: 'IBM Plex Sans', 'IBM Plex rezervă', sans-serif; font-size: .85rem; font-weight: 400; color: var(--text-slab); }

/* Linia din comanda de pe care s-a returnat ceva. */
.tabel-comanda tr.are-retur td { background: var(--retur-f); }
.tabel-comanda__retur {
  display: block; margin-top: 2px;
  font-size: .76rem; font-weight: 600; color: var(--retur-t);
}
.tabel-comanda__initial {
  display: block; font-size: .74rem; font-weight: 400;
  color: var(--text-mai-slab); text-decoration: line-through;
}

@media (max-width: 560px) {
  .comanda-bara { flex-direction: column; align-items: stretch; }
  .comanda-bara .comanda__retur { justify-content: center; }
  .incheiat__date { gap: var(--s5); }
}

/* ═══ formularul de cerere retur ═════════════════════════════════════════
   Trei pasi numerotati, in ordinea in care omul se gandeste. Numerele reiau
   punctele din parcursul returului — cine a vazut banda chihlimbarie
   recunoaste formularul ca parte din acelasi drum. */

.retur-cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin: 0 0 var(--s6); padding-bottom: var(--s5);
  border-bottom: 1px solid var(--contur);
}
.retur-cap h1 { margin: 0 0 var(--s1); }
.retur-cap__sub { margin: 0; color: var(--text-slab); font-size: .94rem; }
.retur-cap__ajutor { max-width: 46rem; color: var(--text-slab); }

/* Termenul, ca cifra: e singura informatie din cap pentru care omul vine cu o
   intrebare in minte. */
.retur-cap__termen {
  margin: 0; padding: var(--s3) var(--s4);
  background: var(--retur-f); border: 1px solid var(--retur-c);
  border-radius: var(--r); text-align: right;
}
.retur-cap__termen span { display: block; font-size: .74rem; color: var(--retur-t); }
.retur-cap__termen strong {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: 1.15rem; color: var(--retur-t);
}
.retur-cap--stop { border-bottom: 0; padding-bottom: 0; }

.rf { max-width: 52rem; }

/* ── pasii ───────────────────────────────────────────────────────────── */
.rf-pas {
  padding: var(--s5) 0 var(--s6);
  border-bottom: 1px solid var(--contur);
}
.rf-pas:last-of-type { border-bottom: 0; }

.rf-pas__cap { display: flex; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s4); }
.rf-pas__cap h2 { margin: 0 0 2px; font-size: 1.12rem; }
.rf-pas__cap p { margin: 0; font-size: .9rem; color: var(--text-slab); }

.rf-pas__nr {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--retur-p); color: var(--alb);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .92rem; font-weight: 700;
}

.rf-pas__optional {
  font-family: 'IBM Plex Sans', 'IBM Plex rezervă', sans-serif; font-size: .74rem; font-weight: 400;
  color: var(--text-mai-slab); letter-spacing: .02em;
}

/* ── produsele ───────────────────────────────────────────────────────── */
.rf-produse { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }

.rf-produs {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4);
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
/* Randul ales se aprinde: la patru produse in lista, cifra din dreapta nu e de
   ajuns ca sa vezi dintr-o privire ce ai bifat. */
.rf-produs.e-ales { border-color: var(--retur-c); background: var(--retur-f); }

.rf-produs__text { flex: 1; min-width: 0; }
.rf-produs__nume { margin: 0 0 2px; font-weight: 600; }
.rf-produs__detaliu { margin: 0; font-size: .85rem; color: var(--text-slab); }
.rf-produs__detaliu span { color: var(--contur-tare); }

/* ── cantitatea, cu plus si minus ────────────────────────────────────── */
.rf-cant {
  display: flex; align-items: center; flex: none;
  border: 1px solid var(--contur-tare); border-radius: var(--r-mic);
  background: var(--alb); overflow: hidden;
}
.rf-cant__buton {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--text-slab); cursor: pointer;
  transition: background var(--tranzitie), color var(--tranzitie);
}
.rf-cant__buton svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round;
}
.rf-cant__buton:hover { background: var(--retur-f); color: var(--retur-t); }

.rf-cant__nr {
  width: 46px; height: 44px; padding: 0; text-align: center;
  border: 0; border-left: 1px solid var(--contur); border-right: 1px solid var(--contur);
  background: none; font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
  -moz-appearance: textfield;
}
.rf-cant__nr::-webkit-outer-spin-button,
.rf-cant__nr::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── produsele blocate ───────────────────────────────────────────────── */
.rf-blocate {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--fundal); border-radius: var(--r);
}
.rf-blocate__titlu {
  margin: 0 0 var(--s2);
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-mai-slab);
}
.rf-blocate ul { margin: 0; padding: 0; list-style: none; }
.rf-blocate li {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) 0; font-size: .9rem; color: var(--text-slab);
}
.rf-blocate__motiv { font-size: .82rem; color: var(--text-mai-slab); }

/* ── motivele, ca butoane ────────────────────────────────────────────── */
.rf-motive {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: 0 0 var(--s4); padding: 0; border: 0;
}
.rf-motiv { position: relative; }
.rf-motiv input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.rf-motiv span {
  display: flex; align-items: center;
  min-height: 44px; padding: var(--s3) var(--s4);
  font-size: .92rem; font-weight: 500;
  background: var(--alb); border: 1px solid var(--contur-tare);
  border-radius: 999px;
  transition: border-color var(--tranzitie), background var(--tranzitie), color var(--tranzitie);
}
.rf-motiv input:hover + span { border-color: var(--retur-c); }
.rf-motiv input:checked + span {
  color: var(--retur-t); background: var(--retur-f);
  border-color: var(--retur-p); font-weight: 600;
}
/* Conturul de focalizare trebuie sa ramana: input-ul e invizibil, deci fara el
   nimeni care navigheaza cu tastatura nu stie unde a ajuns. */
.rf-motiv input:focus-visible + span { outline: 2px solid var(--retur-p); outline-offset: 2px; }

.rf-camp { max-width: 34rem; }

/* ── pozele ──────────────────────────────────────────────────────────── */
.rf-poze {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s5); cursor: pointer;
  background: var(--fundal);
  border: 2px dashed var(--contur-tare); border-radius: var(--r);
  transition: border-color var(--tranzitie), background var(--tranzitie);
}
.rf-poze:hover { border-color: var(--retur-p); background: var(--retur-f); }
.rf-poze:focus-within { outline: 2px solid var(--retur-p); outline-offset: 2px; }
.rf-poze svg {
  width: 28px; height: 28px; flex: none; color: var(--text-mai-slab);
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.rf-poze__text strong { display: block; font-size: .96rem; }
.rf-poze__text span { font-size: .82rem; color: var(--text-slab); }

.rf-previzualizare {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  margin: var(--s4) 0 0; padding: 0; list-style: none;
}
.rf-previzualizare li { width: 84px; }
.rf-previzualizare img {
  width: 84px; height: 84px; object-fit: cover;
  border: 1px solid var(--contur); border-radius: var(--r-mic);
}
.rf-previzualizare span {
  display: block; margin-top: 4px;
  font-size: .68rem; color: var(--text-mai-slab);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── incheiere ───────────────────────────────────────────────────────── */
.rf-final {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap;
  margin-top: var(--s5); padding: var(--s5);
  background: var(--alb); border: 1px solid var(--retur-c);
  border-radius: var(--r-mare); box-shadow: var(--umbra-1);
}
.rf-total__eticheta { display: block; font-size: .78rem; color: var(--text-slab); }
.rf-total__suma {
  display: block; font-family: 'Archivo', 'Archivo rezervă', sans-serif;
  font-size: 1.9rem; line-height: 1.1; color: var(--retur-t);
  font-variant-numeric: tabular-nums;
}
.rf-total__nota { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-mai-slab); }

.rf-marunt { margin-top: var(--s4); font-size: .82rem; color: var(--text-mai-slab); }

.camp__eroare--mare {
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--eroare-f); border: 1px solid var(--eroare-c);
  border-radius: var(--r);
}
.camp__optional { font-weight: 400; color: var(--text-mai-slab); }

@media (max-width: 620px) {
  .retur-cap__termen { text-align: left; }
  .rf-produs { flex-direction: column; align-items: stretch; gap: var(--s3); }
  .rf-cant { align-self: flex-start; }
  .rf-motiv, .rf-motiv span { width: 100%; }
  .rf-final { flex-direction: column; align-items: stretch; text-align: center; }
  .rf-final .buton { width: 100%; }
}

/* ── starea comenzii, cand e in retur ────────────────────────────────────
   Fondul verde de la "Livrata" spune "totul e bine, s-a incheiat cu bine".
   Cand marfa se intoarce, nu mai e adevarat. Portocaliul de aici e acelasi
   cu al pastilei din lista de comenzi, deci aceeasi comanda arata la fel in
   amandoua locurile. */
.stare-cap--retur {
  background: var(--retur-f);
  border-color: var(--retur-c);
}
.stare-cap--retur .stare-cap__eticheta { color: var(--retur-t); }
.stare-cap--retur .stare-cap__stare { color: var(--retur-t); }

@media (max-width: 700px) {
  .stare-cap--retur .stare-cap__date { border-top-color: var(--retur-c); }
}

/* Butonul are 50px, campul 44. Lipite pe baza, butonul iesea cu 6px mai sus si
   randul parea strambe. Ii dam exact inaltimea campului, ca cele doua
   dreptunghiuri sa inceapa si sa se termine pe aceleasi linii. */
.retur__awb-form .buton {
  height: 44px;
  min-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
}

/* Cifra din chenarul de favorite. Creste doar ea, nu si "Datele mele" sau
   "Parola" din chenarele vecine, care sunt tot <strong> dar sunt text — o
   cifra la 1.05rem se pierdea intre iconita si eticheta de sub ea.
   Iconitele raman 22px, iar cardurile isi pastreaza alinierea: grila le
   intinde oricum pe toate la inaltimea celui mai inalt. */
/* Selectorul e .cont-card strong.cont-card__nr, nu doar .cont-card__nr:
   regula de deasupra, .cont-card strong, are specificitate mai mare si o batea
   pe cea scurta. */
.cont-card strong.cont-card__nr {
  font-size: 2rem;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

/* Eticheta rosie de notificare, in lista de comenzi. Aceeasi marime cu pastila
   de stare de langa ea, ca cele doua sa se citeasca drept doua etichete, nu ca
   una principala si una de subsol. */
.comanda-rand__notif { margin-left: var(--s2); vertical-align: 1px; }

/* Cand asteptam ceva de la client, eticheta pulseaza discret o data la doua
   secunde. E singura din pagina care cere o fapta, nu doar o citire. */
.comanda-rand__notif.e-actiune { animation: notifPuls 2.4s ease-in-out infinite; }

@keyframes notifPuls {
  0%, 92%, 100% { transform: scale(1); }
  96%           { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .comanda-rand__notif.e-actiune { animation: none; }
}

/* Cifra de pe iconita de cont: acelasi cerc si acelasi rosu ca la favorite —
   e o alerta, nu o numaratoare de produse. */
.cos__numar--alerta { background: var(--insigna-rosu); color: #fff; }


/* ── textul de sub lista de produse ───────────────────────────────────── */
/* Sta dupa grila, deci nu concureaza cu produsele, dar Google citeste pagina
   intreaga. Latimea e limitata la ~68 de caractere pe rand: peste atat ochiul
   pierde randul cand se intoarce la stanga. */
.text-categorie {
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid var(--contur);
  max-width: 68ch;
}
.text-categorie h2 { font-size: 1.35rem; margin: 0 0 var(--s4); }
.text-categorie h3 { font-size: 1.02rem; margin: var(--s5) 0 var(--s2); }
.text-categorie p  { margin: 0 0 var(--s3); line-height: 1.75; color: var(--text-slab); }
.text-categorie strong { color: var(--text); }
.text-categorie .proza__nota {
  margin-top: var(--s4); padding: var(--s3) var(--s4);
  font-size: .85rem; background: var(--fundal); border-radius: var(--r);
}


/* ── ghidurile de masuri si indici ────────────────────────────────────── */

/* Masura, aratata ca pe flancul anvelopei: mare, cu cifra care conteaza
   evidentiata fata de indici. */
.masura-mare {
  margin: var(--s4) 0 var(--s5); padding: var(--s5);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: clamp(1.5rem, 5vw, 2.2rem);
  text-align: center; letter-spacing: .02em;
  background: var(--fundal); border: 1px solid var(--contur); border-radius: var(--r-mare);
  color: var(--text-slab);
}
.masura-mare strong { color: var(--text); }

/* Fiecare parte a masurii, cu numarul in stanga si explicatia in dreapta.
   Pe telefon numarul urca deasupra, ca sa nu ramana o coloana de 3 caractere
   care mananca jumatate din latime. */
.ghid-parti { margin: var(--s5) 0; display: grid; gap: 1px; background: var(--contur); border: 1px solid var(--contur); border-radius: var(--r); overflow: hidden; }
.ghid-parti > div { display: grid; grid-template-columns: 92px 1fr; gap: var(--s4); background: var(--alb); padding: var(--s4); }
.ghid-parti dt {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-size: 1.35rem;
  color: var(--verde-text); text-align: center;
}
.ghid-parti dd { margin: 0; line-height: 1.65; color: var(--text-slab); }
.ghid-parti dd strong { color: var(--text); }

/* Tabelele de indici: multe randuri scurte, deci pe coloane, nu pe verticala.
   Se strang singure dupa cat loc e. */
.tabel-indici { margin: var(--s5) 0; }
.tabel-indici table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel-indici caption {
  text-align: left; padding-bottom: var(--s3); font-weight: 600; color: var(--text);
}
.tabel-indici th, .tabel-indici td {
  padding: 7px var(--s3); text-align: left; border-bottom: 1px solid var(--contur);
  font-variant-numeric: tabular-nums;
}
.tabel-indici thead th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-slab); border-bottom-color: var(--contur-tare);
}
.tabel-indici tbody th { font-weight: 700; color: var(--verde-text); width: 5.5rem; }
.tabel-indici tbody tr:hover { background: var(--fundal); }
/* Se deruleaza doar tabelul lung, cel cu 87 de randuri de sarcina. Cel de
   viteze are 17 si incape intreg — un tabel scurt intr-o cutie care se
   deruleaza arata a greseala. */
.tabel-indici--lung tbody { display: block; max-height: 460px; overflow-y: auto; }
.tabel-indici table, .tabel-indici thead, .tabel-indici tbody tr { width: 100%; }
.tabel-indici thead, .tabel-indici tbody tr { display: table; table-layout: fixed; }

.proza__lista { margin: var(--s4) 0; padding-left: var(--s5); line-height: 1.75; color: var(--text-slab); }
.proza__lista li { margin-bottom: var(--s3); }
.proza__lista strong { color: var(--text); }

@media (max-width: 620px) {
  .ghid-parti > div { grid-template-columns: 1fr; gap: var(--s2); }
  .ghid-parti dt { text-align: left; }
}


/* ══ blog ═══════════════════════════════════════════════════════════════ */

.blog-cap { max-width: 62ch; margin: var(--s5) 0 var(--s7); }
.blog-cap h1 { margin: 0 0 var(--s3); }
.blog-cap > p { margin: 0 0 var(--s5); color: var(--text-slab); line-height: 1.7; }
.blog-cap__rezultat { margin: var(--s4) 0 0; font-size: .93rem; color: var(--text-slab); }
.blog-cap__rezultat strong { color: var(--text); }

.blog-cautare { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; position: relative; }
.blog-cautare > svg {
  position: absolute; left: 12px; width: 18px; height: 18px; pointer-events: none;
  fill: none; stroke: var(--text-slab); stroke-width: 2; stroke-linecap: round;
}
.blog-cautare__camp {
  /* 50px, cat butonul de langa: la 46 se vedea decalajul de 4px */
  flex: 1 1 220px; min-width: 0; height: 50px; padding: 0 var(--s4) 0 38px;
  font: inherit; color: var(--text); background: var(--alb);
  border: 1px solid var(--contur-tare); border-radius: var(--r);
}
.blog-cautare__camp:focus { outline: 2px solid var(--verde); outline-offset: 1px; }
.blog-cautare__reset { font-size: .88rem; color: var(--text-slab); }

/* Trei coloane pe desktop, deci noua articole umplu exact trei randuri. */
.blog-grila {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5);
  margin-bottom: var(--s7);
}
.blog-grila--mica { gap: var(--s4); }

.art-card { display: flex; }
.art-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--alb); border: 1px solid var(--contur); border-radius: var(--r-mare);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.art-card__link:hover { border-color: var(--contur-tare); transform: translateY(-2px); }
.art-card__link:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.art-card__poza { width: 100%; aspect-ratio: 600 / 380; object-fit: cover; display: block; background: var(--fundal); }
.art-card__poza--goala { display: grid; place-items: center; }
.art-card__poza--goala svg { width: 46px; height: 46px; fill: none; stroke: var(--contur-tare); stroke-width: 1.5; }

.art-card__corp { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4) var(--s4) var(--s5); flex: 1; }
.art-card__data { font-size: .78rem; color: var(--text-mai-slab); }
.art-card__titlu {
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700; font-size: 1.06rem;
  line-height: 1.3; color: var(--text);
}
.art-card__rezumat { font-size: .9rem; line-height: 1.6; color: var(--text-slab); flex: 1; }
.art-card__citeste {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s2);
  font-size: .88rem; font-weight: 600; color: var(--verde-text);
}
.art-card__citeste svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-card__link:hover .art-card__citeste svg { transform: translateX(2px); }

/* ── articolul ───────────────────────────────────────────────────────── */
.articol { max-width: 68ch; margin: 0 auto; }
.articol__cap { margin-bottom: var(--s6); }
.articol__cap h1 { margin: 0 0 var(--s3); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.2; }
.articol__meta { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s4); font-size: .85rem; color: var(--text-mai-slab); }
.articol__rezumat { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--text-slab); }

.articol__poza { margin: 0 0 var(--s6); }
.articol__poza img { width: 100%; height: auto; border-radius: var(--r-mare); display: block; }
.articol__poza figcaption { margin-top: var(--s2); font-size: .8rem; color: var(--text-mai-slab); }

.articol__continut { line-height: 1.8; color: var(--text-slab); }
.articol__continut h2 { margin: var(--s7) 0 var(--s3); font-size: 1.4rem; color: var(--text); }
.articol__continut h3 { margin: var(--s5) 0 var(--s2); font-size: 1.08rem; color: var(--text); }
.articol__continut p  { margin: 0 0 var(--s4); }
.articol__continut ul, .articol__continut ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.articol__continut li { margin-bottom: var(--s2); }
.articol__continut strong { color: var(--text); }
.articol__continut a { color: var(--verde-text); }
.articol__continut img { max-width: 100%; height: auto; border-radius: var(--r); }
.articol__continut blockquote {
  margin: var(--s5) 0; padding: var(--s3) var(--s5);
  border-left: 3px solid var(--verde); background: var(--fundal);
  border-radius: 0 var(--r) var(--r) 0;
}
.articol__continut table {
  /* display:block ii da voie sa curga singur; min-width pastreaza latimea
     plina cand incape. Fara asta, un tabel lat ar derapa toata pagina. */
  display: block; overflow-x: auto; width: auto; min-width: 100%; max-width: 100%;
  border-collapse: collapse; margin: var(--s4) 0; font-size: .93rem;
}
.articol__continut table tbody, .articol__continut table thead { min-width: 100%; }
.articol__continut th, .articol__continut td { padding: 8px var(--s3); text-align: left; border-bottom: 1px solid var(--contur); }
.articol__continut th { color: var(--text); font-weight: 600; }

.articole-inrudite { margin-top: var(--s8); }
.articole-inrudite h2 { margin: 0 0 var(--s5); font-size: 1.3rem; }

/* ── banda spre catalog ──────────────────────────────────────────────── */
.banda-cta {
  margin: var(--s8) 0 var(--s7); padding: var(--s7) var(--s6);
  background: var(--bleumarin); color: #fff; border-radius: var(--r-mare);
  /* Muchie verde discreta. Pe fundal deschis e doar un accent de marca; pe
     tema intunecata e singurul lucru care mai desparte banda de pagina. */
  border: 1px solid rgba(126, 217, 87, .26);
}

/* Pe pagina de articol banda vine dupa o coloana de 68 de caractere. La
   latimea intreaga a containerului iese o cutie de 1200px cu 720px de text la
   mijloc si gol in rest — arata a greseala de asezare. O tinem aproape de
   masura textului: destul cat sa fie o pauza, nu un salt. */
.articol + .banda-cta { max-width: 860px; margin-inline: auto; }
.banda-cta__continut { max-width: 720px; margin: 0 auto; text-align: center; }
.banda-cta__eticheta {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 var(--s3);
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-size: .74rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--verde);
}
.banda-cta__eticheta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.banda-cta h2 { margin: 0 0 var(--s3); font-size: clamp(1.5rem, 3.5vw, 2rem); color: #fff; }
.banda-cta__text p { margin: 0 0 var(--s5); color: rgba(255,255,255,.82); line-height: 1.7; }
.banda-cta__text strong { color: #fff; }

.banda-cta__cautare { display: flex; gap: var(--s2); max-width: 440px; margin: 0 auto var(--s5); }
.banda-cta__camp {
  flex: 1; min-width: 0; height: 48px; padding: 0 var(--s4);
  font: inherit; color: var(--text); background: #fff;
  border: 0; border-radius: var(--r);
}
.banda-cta__cautare .buton { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.banda-cta__cautare .buton svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.banda-cta__scurtaturi {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2);
  margin: 0; padding: 0; list-style: none;
}
.banda-cta__scurtaturi a {
  display: inline-block; padding: 7px var(--s4); font-size: .88rem;
  color: rgba(255,255,255,.9); text-decoration: none;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px;
}
.banda-cta__scurtaturi a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

@media (max-width: 1000px) { .blog-grila { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .blog-grila { grid-template-columns: 1fr; gap: var(--s4); }
  .banda-cta { padding: var(--s6) var(--s4); }
  .banda-cta__cautare { flex-direction: column; }
  .banda-cta__cautare .buton { justify-content: center; }
}

/* ── cele mai populare: randuri pline, fara produs orfan ──────────────────
   Prima pagina cere 10 produse. Cate incap pe un rand depinde de latime, si un
   singur produs ramas pe ultimul rand arata a greseala de incarcare, nu a
   selectie. Fixam coloanele — cu auto-fill nu poti sti cate sunt — si taiem
   coada care n-ar umple randul. Regula e "randuri pline", nu "mereu 9":
   la 4 coloane si 9 produse al noualea ar ramane tot singur, deci acolo sunt 8.
   Intervalele nu se suprapun, ca sa nu fie nevoie de anulari intre ele. */
.grila--populare { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (min-width: 1040px) and (max-width: 1287.98px) {
  .grila--populare { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grila--populare > li:nth-child(n + 9) { display: none; }   /* 8 = 2 x 4 */
}
@media (min-width: 776px) and (max-width: 1039.98px) {
  .grila--populare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grila--populare > li:nth-child(10) { display: none; }      /* 9 = 3 x 3 */
}
@media (max-width: 775.98px) {
  .grila--populare { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
}                                                             /* 10 = 5 x 2 */

/* ── banda CTA pe tema intunecata ─────────────────────────────────────────
   --bleumarin devine #0A141A, mai inchis decat fundalul paginii: banda iesea
   1.11 contrast fata de pagina, deci nu se mai vedea deloc ca element separat.
   Pe intuneric un element scos in fata sta mai SUS, nu mai jos. */
:root[data-tema="dark"] .banda-cta { background: var(--bleumarin-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) .banda-cta { background: var(--bleumarin-2); }
}

/* ── cautarea din blog pe telefon ─────────────────────────────────────────
   Campul si butonul incapeau pe acelasi rand, deci campul ramanea pe la 245px
   — pe o pagina al carei rost e cautarea, arata a detaliu. Fiecare pe randul
   lui, pe toata latimea, la 50px inaltime. */
@media (max-width: 640px) {
  .blog-cautare__camp { flex: 1 1 100%; height: 50px; }
  .blog-cautare .buton { flex: 1 1 100%; justify-content: center; min-height: 50px; }
  /* lupa se centreaza pe campul de 50px, nu pe vechea inaltime */
  .blog-cautare > svg { top: 16px; }
  .blog-cautare__reset { flex: 1 1 100%; text-align: center; padding: var(--s2) 0; }
}

/* Campul din banda CTA: acelasi rationament, e chemarea la actiune a paginii. */
@media (max-width: 640px) {
  /* Campul are flex:1, scris cand banda statea pe un rand — acolo creste in
     latime. Aici banda trece pe coloana, iar flex-basis:0 ajunge sa fie
     INALTIMEA si anuleaza height: campul se turtea la 20px, cat textul din el.
     Il scoatem din flex ca sa conteze inaltimea scrisa. */
  .banda-cta__camp { flex: 0 0 auto; height: 52px; }
  .banda-cta__cautare .buton { flex: 0 0 auto; min-height: 52px; }
}

/* ── masurile sezonului, la finalul listei ────────────────────────────────
   Sta in coloana de rezultate, care e mai ingusta decat containerul din cauza
   panoului de filtre — deci grila nu poate fi de 8 coloane ca pe prima pagina.
   auto-fit se aseaza singura dupa cat loc are, la orice latime de ecran. */
.masuri-sezon {
  margin-top: var(--s8); padding-top: var(--s6);
  border-top: 1px solid var(--contur);
}
.masuri-sezon__titlu { margin: 0 0 var(--s2); font-size: 1.2rem; }
.masuri-sezon__intro { margin: 0 0 var(--s4); color: var(--text-slab); font-size: .93rem; }
.masuri-sezon__lista { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }

/* ── categoriile pe ecran ingust ───────────────────────────────────────────
   Sub 780px trei carduri nu mai incap pe un rand fara sa se stranga textul
   ilizibil. Se aseaza una sub alta — nu doua, care ar lasa al treilea singur.

   Raman la marimea lor obisnuita, nu strange nimic: nu e nevoie sa incapa toate
   trei in primul ecran, omul deruleaza. Am incercat o data sa le fac sa incapa
   si a insemnat sa ascund subtitlul eroului, semnele de incredere si jumatate
   din card — mult pret pentru un castig pe care nimeni nu-l cerea. */
@media (max-width: 780px) {
  .categorii-bara,
  .categorii-bara--mari { grid-template-columns: 1fr; }
}

/* ── cele doua butoane din cos, pe acelasi rand ───────────────────────────
   La 375px cereau 457px impreuna, iar containerul are 343 — deci al doilea
   trecea pe randul urmator si parea rupt de primul.

   Se micsoreaza, nu se rup: textul ramane pe un singur rand, iar marimea lui
   scade cu latimea ecranului. clamp() tine litera intre .68rem si marimea
   normala, deci pe telefoanele mici incap amandoua, iar pe cele late arata ca
   inainte. Pe doua randuri intr-un buton textul arata a greseala. */
@media (max-width: 560px) {
  .cos__actiuni { flex-wrap: nowrap; gap: var(--s2); }

  .cos__inapoi,
  .cos__actiuni .buton--fantoma {
    flex: 0 1 auto; min-width: 0;
    /* Litera nu coboara sub 12px. Spatiul castigat vine din padding, nu din
       marimea textului: butonul avea 24px de fiecare parte, ceea ce e mult
       cand textul abia incape. */
    font-size: clamp(.66rem, 3.1vw, .92rem);
    padding-inline: 8px;
    white-space: nowrap;
  }

  /* Sageata statea la 8px de text si la 24px de marginea butonului. */
  .cos__inapoi { gap: 4px; }

  /* margin-left:auto impinge al doilea buton la dreapta si lasa un gol la
     mijloc. Cu doua butoane care abia incap, golul nu-si mai are rostul. */
  .cos__actiuni .buton--fantoma { margin-left: auto; }

  .cos__inapoi::before { width: 13px; height: 13px; }
}

/* Avertisment in panou, inaintea unei actiuni care costa bani si nu se poate
   da inapoi. Se citeste, nu se sare peste el. */
.ad-ajutor--atentie {
  margin-top: var(--s3); padding: var(--s3);
  background: rgba(214, 69, 80, .07);
  border: 1px solid rgba(214, 69, 80, .28);
  border-radius: var(--r);
}

/* ── oferta de cont, de sub comanda deschisă cu jetonul din e-mail ────────
   Vine după tabelul comenzii, nu înaintea lui: omul a deschis pagina ca să
   vadă unde e coletul, iar propunerea de cont are sens abia după ce a găsit
   ce căuta. Verde discret, ca invitația din checkout — e un ajutor, nu o
   condiție; comanda se vede întreagă și fără cont. */
.deschide-cont {
  margin: var(--s7) 0 var(--s8); padding: var(--s5) var(--s6);
  background: var(--verde-lumina); border: 1px solid var(--verde-contur);
  border-radius: var(--r-mare);
}
.deschide-cont__titlu {
  margin: 0 0 var(--s2); font-size: 1.15rem;
  font-family: 'Archivo', 'Archivo rezervă', sans-serif; font-weight: 700;
}
.deschide-cont__text p { margin: 0; max-width: 62ch; font-size: .92rem; line-height: 1.6; }
.deschide-cont__text { margin-bottom: var(--s5); }
.deschide-cont__form { display: grid; gap: var(--s4); }
/* Butonul rămâne cât scrisul lui: un buton pe toată lățimea ar striga mai
   tare decât ce a venit omul să vadă. */
.deschide-cont__form .buton { justify-self: start; min-height: 46px; }
.deschide-cont .alerta { margin-bottom: var(--s4); }

@media (max-width: 620px) {
  .deschide-cont { padding: var(--s4); margin-top: var(--s6); }
  /* Pe telefon perechea de parole stă una sub alta, iar butonul plin pe
     lățime e singurul lucru de apăsat: acolo nu mai concurează cu nimic. */
  .deschide-cont__form .buton { justify-self: stretch; width: 100%; }
}

/* ── adresa de livrare, pe pagina comenzii ────────────────────────────────
   Stă după parcurs și înaintea produselor: întâi „unde e coletul", apoi
   „unde vine", apoi „ce conține". Chenar simplu, fără culoare: e o
   informație de verificat, nu una de scos în față. */
.comanda-livrare {
  margin: 0 0 var(--s6); padding: var(--s4) var(--s5);
  border: 1px solid var(--contur); border-radius: var(--r);
  background: var(--alb);
}
.comanda-livrare__titlu {
  margin: 0 0 var(--s2); font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-slab);
}
.comanda-livrare__adresa { margin: 0; font-size: .96rem; line-height: 1.55; }
.comanda-livrare__tel,
.comanda-livrare__mentiuni {
  margin: var(--s2) 0 0; font-size: .88rem; color: var(--text-slab);
}

/* Cele două ieșiri din pagina de confirmare, pe același rând: una duce la
   comandă, cealaltă înapoi în magazin. Pe telefon se stivuiesc. */
.confirmare__actiuni { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (max-width: 480px) {
  .confirmare__actiuni { flex-direction: column; }
  .confirmare__actiuni .buton { width: 100%; }
}

/* ── formularele nu mai împing pagina în lateral pe ecrane înguste ────────
   Un element de grilă are, implicit, min-width:auto — adică nu se poate
   strânge sub lățimea propriului conținut. Pe un telefon de 320px asta
   făcea ca perechea de câmpuri să iasă 23px în afara paginii, iar pagina
   începea să deruleze lateral. „min-width: 0" îi dă voie să se strângă;
   câmpurile sunt oricum pe 100% din ce le rămâne. */
.cont-form > *,
.camp-pereche,
.camp-pereche > *,
.deschide-cont__form > * { min-width: 0; }
.camp__input, .camp__select, .camp textarea { max-width: 100%; }

/* Aceeași poveste, în alte două locuri, văzută la 320px:
   - coloana de checkout ieșea 51px în afara ecranului, fiindcă ține o
     invitație pe flex care nu se strângea;
   - câmpul de fișiere de la contact are o lățime proprie mare (butonul
     „Alege fișierul" plus numele), și trăgea pagina după el 23px. */
.checkout > *,
.checkout__coloana, .checkout__coloana > *,
.checkout__sumar, .checkout__sumar > *,
.checkout__invitatie > *,
.mini-linii, .mini-linii > li { min-width: 0; }
/* Prețul rămâne întreg, numele se scurtează cu trei puncte — există deja
   „text-overflow: ellipsis" pe el, dar nu se aplica până nu i-am dat voie
   rândului să se strângă. */
.mini-linii__pret { flex-shrink: 0; }
.camp__fisier { width: 100%; max-width: 100%; }

/* Adresele de e-mail lungi n-au unde să se rupă: pe un ecran de 320px,
   una singură împingea pagina de confirmare 17px în lateral. Aici le dăm
   voie să treacă pe rândul următor oriunde — mai bine o adresă tăiată în
   două decât o pagină care se mișcă orizontal. */
.confirmare__text, .confirmare__numar,
.deschide-cont__text { overflow-wrap: anywhere; }