/* =====================================================================
   piese-auto.ro — sistem de design
   ---------------------------------------------------------------------
   Galben auriu (#F1AD00, galbenul marcii scazut cu ~20% in luminozitate)
   + negru, pe fundal alb.
   Suprafete albe, linii fine si umbre moi — fara chenare groase.
   Negrul e structural (bara de sus, navigatie, subsol, text), galbenul e accent.
   Tipografie: Barlow (titluri) + IBM Plex Sans (text).
   Regula fixa: pe galben scrisul e NEGRU, niciodata alb.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Negru + griuri neutre, usor calde ca sa nu para sterse */
  --negru:      #0D0D0D;
  --negru-800:  #171717;
  --negru-700:  #262626;
  --negru-600:  #3F3F3F;
  --gri-500:    #6B6B6B;
  --gri-400:    #8F8F8F;
  --gri-300:    #BDBDBD;
  --linie:      #E6E6E6;
  --linie-tare: #CFCFCF;

  /* Fundal ALB — sectiunile alterneaza cu un gri foarte deschis */
  --fundal:     #FAFAF9;
  --fundal-alt: #F2F2F0;
  --card:       #FFFFFF;

  /* GALBENUL MARCII — accentul intregului site.
     Pe galben scrisul e INTOTDEAUNA negru, niciodata alb. */
  /* Galbenul marcii, scazut cu ~20% in luminozitate: hsl(43,100%,47%).
     La -35% pierdea crominanta si vira spre maro — galbenul isi are saturatia
     maxima la luminozitate mare, deci se inchide putin si cu saturatia la cap. */
  --galben:      #F1AD00;
  --galben-clar: #FFBB10;   /* hover — mai deschis decat baza */
  --galben-tare: #C99000;   /* stare apasata / accent inchis */
  --galben-slab: #FDF3DC;   /* nuanta foarte deschisa, pentru fundaluri subtile */
  --pe-galben:   #141414;   /* text pe galben: NEGRU (contrast 7.3:1) */

  /* PRETURILE au culoare proprie, ca sa nu se piarda printre textele negre.
     Galbenul marcii nu poate fi folosit ca text (1.96:1 pe alb, ilizibil);
     chihlimbarul ars pastreaza familia calda si are 5:1 pe alb. */
  --pret:        #B3540C;
  --pret-inchis: #8F420A;

  /* Semnal */
  --stoc:       #0F8A46;
  --stoc-slab:  #E8F6EE;
  --alarma:     #C62828;
  --alarma-100: #FDECEA;
  --atentie:    #A96910;
  --atentie-100:#FDF1E1;

  /* Text */
  --text:      var(--negru-800);
  --text-slab: var(--gri-500);
  --text-inv:  #FFFFFF;

  /* Forma */
  --r-mic:  4px;
  --r:      8px;
  --r-mare: 12px;

  --umbra-1: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
  --umbra-2: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --umbra-3: 0 8px 24px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.07);
  --umbra-galben: 0 4px 14px rgba(241,173,0,.38);

  /* TRATAMENT: linii fine si umbre moi. Negrul ramane pentru structura
     (bara de sus, navigatie, subsol) si pentru text — NU ca ramă pe fiecare
     element, ca ieseau chenare prea evidente. */
  --contur:         1px solid var(--linie);
  --contur-subtire: 1px solid var(--linie);
  --tus:            0 2px 4px rgba(13,13,13,.05), 0 10px 24px rgba(13,13,13,.07);
  --tus-mic:        0 1px 2px rgba(13,13,13,.05), 0 4px 12px rgba(13,13,13,.06);
  --tus-fin:        0 1px 2px rgba(13,13,13,.04), 0 2px 8px rgba(13,13,13,.05);

  /* Tipografie */
  --f-titlu: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --f-text:  'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Ritm */
  --lat: 1460px;
  --gut: 24px;
}

/* ---------- 2. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* sprite-ul de iconite: prezent in DOM, dar fara sa ocupe spatiu */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* blocul de campuri de firma dispare complet, nu doar vizual */
[data-campuri-firma][hidden] { display: none !important; }
.btn .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-text);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--fundal);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--galben); color: var(--pe-galben); }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--galben); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--f-titlu); font-weight: 700; line-height: 1.18; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--galben-clar); outline-offset: 2px; }

/* ---------- 3. LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--lat); margin: 0 auto; padding: 0 var(--gut); }
.sectiune { padding: 30px 0; }
.sectiune--stramta { max-width: 820px; margin: 0 auto; }
.rand { display: flex; gap: 20px; }
.grila { display: grid; gap: 16px; }
.doar-mobil { display: none; }

.t-h1 { font-size: clamp(26px, 3.4vw, 38px); }
.t-h2 { font-size: clamp(21px, 2.4vw, 27px); }
.t-sub { color: var(--text-slab); font-size: 16px; max-width: 70ch; }
.t-mic { font-size: 13px; color: var(--text-slab); }

.sectiune-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sectiune-cap h2 { margin: 0; }
.sectiune-cap a { font-size: 14px; font-weight: 600; }

/* ---------- 4. BUTOANE ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--r);
  font-family: var(--f-titlu); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primar    { background: var(--galben); color: var(--pe-galben); box-shadow: 0 6px 16px rgba(241,173,0,.34); }
.btn-primar:hover { background: var(--galben-clar); box-shadow: 0 10px 22px rgba(241,173,0,.42); }
.btn-secundar  { background: var(--negru); color: #fff; box-shadow: 0 6px 16px rgba(13,13,13,.22); }
.btn-secundar:hover { background: var(--negru-700); }
.btn-contur    { background: #fff; color: var(--negru); border-color: var(--linie-tare); }
.btn-contur:hover { background: var(--galben-slab); border-color: var(--galben); }
.btn-mic  { padding: 8px 14px; font-size: 13.5px; }
.btn-mare { padding: 13px 26px; font-size: 16.5px; }
.btn-plin { width: 100%; }
.btn[disabled], .btn.este-inactiv { opacity: .5; pointer-events: none; }

/* ---------- 5. ETICHETE ---------- */
.eticheta {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--r-mic);
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  font-family: var(--f-titlu);
}
.eticheta--stoc   { background: var(--negru); color: var(--galben); }
.eticheta--promo  { background: var(--alarma-100);  color: var(--alarma); }
.eticheta--info   { background: var(--fundal-alt); color: var(--negru-600); border: 1px solid var(--linie-tare); }
.eticheta--oe     { background: var(--atentie-100); color: var(--atentie); }

/* ---------- 6. HEADER ---------- */
.bara-sus { background: var(--negru); color: #B5B5B5; font-size: 12.5px; }
.bara-sus .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 34px; }
.bara-sus a { color: #B5B5B5; }
.bara-sus a:hover { color: var(--galben); text-decoration: none; }
.bara-sus-stanga, .bara-sus-dreapta { display: flex; align-items: center; gap: 18px; }
.bara-sus-dreapta a { display: inline-flex; align-items: center; gap: 6px; }

.antet { background: #fff; color: var(--text); border-bottom: 1px solid var(--linie); position: relative; }
.antet-principal {
  display: flex; align-items: center; gap: 26px; height: 76px;
}
.sigla { display: flex; align-items: center; flex-shrink: 0; }
.sigla:hover { text-decoration: none; }
.sigla-img { display: block; width: auto; height: 34px; }
.sigla-svg { display: block; height: 34px; width: auto; }

/* Cautare */
.cautare { flex: 1 1 auto; display: flex; min-width: 0; position: relative; }
.cautare { border-radius: var(--r); }
.cautare:focus-within { box-shadow: 0 0 0 3px var(--galben-slab); border-radius: var(--r); }
.cautare input {
  flex: 1; height: 44px; padding: 0 14px;
  border: 1px solid var(--linie-tare); border-right: 0;
  border-radius: var(--r) 0 0 var(--r);
  background: #fff; color: var(--text); font-size: 14.5px;
}
.cautare input::placeholder { color: var(--gri-400); }
.cautare input:focus { outline: none; }
.cautare button {
  height: 44px; padding: 0 22px; border: 0; border-radius: 0 var(--r) var(--r) 0;
  background: var(--galben); color: var(--pe-galben);
  font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px;
  display: inline-flex; align-items: center; gap: 7px;
}
.cautare button:hover { background: var(--galben-clar); }
.cautare button svg circle, .cautare button svg path { stroke: var(--pe-galben); }
.cautare button svg { width: 17px; height: 17px; }

/* Actiuni dreapta */
.antet-actiuni { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.actiune {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--r); color: var(--negru); position: relative;
}
.actiune:hover { background: var(--galben-slab); text-decoration: none; }
.actiune svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
.actiune-text { display: flex; flex-direction: column; line-height: 1.2; }
.actiune-text b { font-family: var(--f-titlu); font-size: 13.5px; font-weight: 600; }
.actiune-text span { font-size: 11px; color: var(--gri-500); }
.contor {
  position: absolute; top: 3px; left: 26px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--galben); color: var(--pe-galben);
  border: 1.5px solid var(--negru);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}

/* Navigatie categorii */
.nav-categorii { background: var(--negru); }
.nav-categorii .wrap { display: flex; align-items: stretch; gap: 2px; }
.nav-categorii a {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 46px;
  color: #EDEDED; font-family: var(--f-titlu); font-weight: 600; font-size: 14.5px;
}
.nav-categorii a:hover { color: var(--galben); text-decoration: none; }
.nav-categorii a.este-activ { color: var(--galben); box-shadow: inset 0 -3px 0 var(--galben); }
.nav-categorii .nav-impinge { margin-left: auto; }
/* Returul se distinge discret de restul barei: e o actiune, nu o categorie. */
.nav-categorii .nav-retur { color: var(--galben); }
.nav-categorii .nav-retur:hover { color: var(--pe-galben); }
.nav-categorii svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ---------- 7. BARA MASINA CURENTA ---------- */

/* ---------- 8. SELECTOR MASINA ---------- */
.selector {
  background: var(--card); border: 0; border-radius: var(--r-mare);
  box-shadow: 0 4px 10px rgba(13,13,13,.08), 0 18px 40px rgba(13,13,13,.14);
  overflow: hidden;
}
.selector-cap { padding: 16px 20px 0; }
.selector-cap h2 { font-size: 19px; margin-bottom: 3px; }
.selector-cap p { color: var(--text-slab); font-size: 13.5px; margin: 0; }
.selector-pasi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 16px 20px; }
.hero .selector-pasi { grid-template-columns: repeat(2, 1fr); }
.pas { display: flex; flex-direction: column; gap: 6px; }
.pas-eticheta {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-titlu); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-slab);
}
.pas-numar {
  width: 19px; height: 19px; border-radius: 50%; background: var(--negru);
  color: #fff; font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.pas.este-gata .pas-numar { background: var(--galben); color: var(--pe-galben); }
.pas select {
  height: 44px; padding: 0 34px 0 13px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6672' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center/12px;
  appearance: none; font-size: 14.5px; width: 100%;
}
.pas select:disabled { background-color: #F4F5F4; color: var(--gri-400); cursor: not-allowed; }
.pas select:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }
.selector-jos {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 20px 18px; flex-wrap: wrap;
}
.selector-jos .t-mic { margin: 0; }

/* ---------- 9. CARD PIESA ---------- */
.grila-piese { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.piesa {
  display: flex; flex-direction: column;
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
  overflow: hidden; transition: transform .1s, box-shadow .1s;
}
.piesa:hover { transform: translateY(-3px); box-shadow: var(--tus); border-color: var(--linie-tare); }
.piesa-poza {
  position: relative; aspect-ratio: 4 / 3; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 14px;
  border-bottom: 1px solid var(--linie);
}
.piesa-poza img { transition: transform .18s; }
.piesa:hover .piesa-poza img { transform: scale(1.04); }
.piesa-poza img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.piesa-poza .fara-poza { color: var(--gri-300); font-size: 12px; }
.piesa-etichete { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; }
.piesa-corp { padding: 12px 13px 14px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.piesa-brand { font-family: var(--f-titlu); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gri-500); }
.piesa-nume { font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--text); }
.piesa-nume a { color: inherit; }
.piesa-nume a:hover { color: var(--galben); text-decoration: none; }
.piesa-cod { font-size: 12px; color: var(--text-slab); font-variant-numeric: tabular-nums; }
.piesa-tech { font-size: 12px; color: var(--text-slab); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.piesa-jos { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 10px; }
.produs-adauga--card { margin: 0; flex-shrink: 0; }
.produs-adauga--card .btn { gap: 6px; padding: 8px 12px; }
.produs-adauga--card svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pret { display: flex; flex-direction: column; line-height: 1.1; }
.pret-vechi { font-size: 13.5px; color: var(--gri-400); text-decoration: line-through; }
.pret-curent { font-family: var(--f-titlu); font-size: 25px; font-weight: 800; color: var(--pret); letter-spacing: -.02em; }
.pret-curent small { font-size: 14px; font-weight: 700; color: var(--pret); margin-left: 2px; }
.pret-tva { font-size: 11.5px; color: var(--text-slab); }
/* valori de pret din tabele (comenzi, facturi) */
.pret-valoare { color: var(--pret); font-weight: 700; }

/* ---------- 10. CATEGORII (acordeon) ---------- */
.categorii-lista { display: grid; gap: 10px; }
.cat-grup {
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
  overflow: hidden;
}
.cat-grup > summary {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  cursor: pointer; list-style: none; font-family: var(--f-titlu); font-weight: 600; font-size: 16px;
}
.cat-grup > summary::-webkit-details-marker { display: none; }
.cat-grup > summary:hover { background: var(--galben-slab); }
.cat-grup[open] > summary { border-bottom: 1px solid var(--linie); background: var(--galben-slab); }
.cat-grup-contor { margin-left: auto; font-family: var(--f-text); font-size: 12.5px; font-weight: 400; color: var(--text-slab); }
.cat-sageata { width: 16px; height: 16px; stroke: var(--gri-500); fill: none; stroke-width: 2; transition: transform .18s; }
.cat-grup[open] .cat-sageata { transform: rotate(90deg); }
.cat-continut { padding: 14px 16px; columns: 240px; column-gap: 26px; }
.cat-ramura { break-inside: avoid; margin-bottom: 14px; }
.cat-ramura h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gri-500); margin-bottom: 6px; }
.cat-ramura ul { list-style: none; padding: 0; margin: 0; }
.cat-ramura li { margin-bottom: 3px; }
.cat-ramura a { font-size: 14px; color: var(--negru-700); }
.cat-ramura a:hover { color: var(--galben); }

/* ---------- 11. CASETE DE INCREDERE ---------- */
.incredere { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.incredere-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
  padding: 16px 17px;
}
.incredere-item svg { width: 26px; height: 26px; stroke: var(--negru); fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; margin-top: 2px; }
.incredere-item h3 { font-size: 15px; margin: 0 0 3px; }
.incredere-item p { font-size: 13px; color: var(--text-slab); margin: 0; line-height: 1.45; }

/* ---------- 12. FIRIMITURI ---------- */
.firimituri { font-size: 13px; color: var(--text-slab); padding: 14px 0 0; }
.firimituri ol { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0; }
.firimituri li::after { content: "/"; margin-left: 7px; color: var(--linie-tare); }
.firimituri li:last-child::after { content: ""; }
.firimituri a { color: var(--text-slab); }
.firimituri a:hover { color: var(--galben); }

/* ---------- 13. FORMULARE ---------- */
.camp { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.camp label { font-size: 13px; font-weight: 600; color: var(--negru-600); }
.camp-optional { font-weight: 400; color: var(--gri-500); }
.camp input, .camp select, .camp textarea {
  height: 42px; padding: 0 12px; border: var(--contur-subtire);
  border-radius: var(--r); background: #fff; font-size: 14.5px; width: 100%;
}
.camp textarea { height: auto; padding: 10px 12px; min-height: 110px; resize: vertical; }
.camp input:focus, .camp select:focus, .camp textarea:focus {
  outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab);
}
.camp-eroare input, .camp-eroare select { border-color: var(--alarma); }
.camp-mesaj { font-size: 12.5px; color: var(--alarma); }

.alerta { padding: 12px 15px; border-radius: var(--r); font-size: 14px; margin-bottom: 16px; border: 1px solid; }
.alerta-info  { background: var(--galben-slab); border-color: var(--galben); color: var(--negru-700); }
.alerta-bine  { background: var(--stoc-slab); border-color: var(--stoc); color: #0B6A36; }
.alerta-rau   { background: var(--alarma-100); border-color: #F0C9C7; color: var(--alarma); }

/* ---------- 14. FOOTER ---------- */
.subsol { background: var(--negru); color: #B5B5B5; margin-top: 46px; border-top: var(--contur); }
.subsol-principal { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; padding: 40px 0 32px; }
.subsol h4 { color: var(--galben); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 13px; }
.subsol ul { list-style: none; padding: 0; margin: 0; }
.subsol li { margin-bottom: 7px; }
.subsol a { color: #B5B5B5; font-size: 14px; }
.subsol a:hover { color: var(--galben); }
.subsol-despre p { font-size: 13.5px; line-height: 1.6; color: var(--gri-400); }
.subsol-contact { display: grid; gap: 8px; font-size: 14px; }
.subsol-contact b { color: #fff; }
.subsol-jos {
  border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--gri-500);
}
.subsol-orase { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.08); }
.subsol-orase-lista { columns: 190px; column-gap: 22px; }
.subsol-orase a { font-size: 12.5px; color: var(--gri-500); }
.subsol-orase a:hover { color: var(--gri-300); }

/* ---------- 15. TEXT SEO ---------- */
.text-seo { background: var(--fundal-alt); border: var(--contur); border-radius: var(--r-mare); padding: 26px 28px; box-shadow: var(--tus); }
.text-seo h2 { font-size: 20px; }
.text-seo h3 { font-size: 16px; margin-top: 20px; }
.text-seo p, .text-seo li { font-size: 14px; color: var(--negru-600); line-height: 1.65; }

/* ---------- 16. STARE GOALA ---------- */
.gol { text-align: center; padding: 54px 24px; background: var(--card); border: 1px dashed var(--linie-tare); border-radius: var(--r-mare); }
.gol h2 { font-size: 19px; }
.gol p { color: var(--text-slab); max-width: 48ch; margin: 0 auto 18px; }

/* ---------- 17. PAGINARE ---------- */
.paginare { display: flex; gap: 5px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.paginare a, .paginare span {
  min-width: 38px; height: 38px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--contur-subtire); border-radius: var(--r);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--negru);
}
.paginare a:hover { background: var(--galben-slab); text-decoration: none; }
.paginare .este-activ { background: var(--galben); color: var(--pe-galben); box-shadow: var(--tus-fin); }

/* ---------- 18. HERO (pagina principala) ----------
   Banda galbena cu contur, titlu COMPACT in stanga si selectorul in dreapta.
   Fara bloc urias de text si fara spatiu mort dedesubt. */
/* Banda galbena — semnul distinctiv al paginii. Diferentiere fata de zollex:
   acolo hero-ul e un card cu gradient albastru; aici e o banda plina, plata,
   care se termina cu o dunga neagra subtire. */
.hero { background: var(--galben); padding: 34px 0 38px; border-bottom: 3px solid var(--negru); }
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 30px; align-items: center;
}
.hero-text { max-width: 46ch; }
.hero-titlu {
  font-size: clamp(25px, 2.6vw, 36px); color: var(--pe-galben);
  margin-bottom: 10px; line-height: 1.12; letter-spacing: -.02em;
}
.hero-sub { color: rgba(0,0,0,.74); font-size: 15.5px; margin-bottom: 16px; max-width: 44ch; }
.hero-argumente { list-style: none; display: grid; gap: 6px; padding: 0; margin: 0; }
.hero-argumente { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.hero-argumente li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  background: rgba(255,255,255,.82);
  font-family: var(--f-titlu); font-size: 13.5px; font-weight: 600; color: var(--pe-galben);
}
.hero-argumente li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--negru); flex-shrink: 0;
}

/* ---------- 19. CAUTARE DUPA COD ---------- */
.cauta-cod {
  display: flex; align-items: center; justify-content: space-between; gap: 26px;
  background: var(--card); border: 1px solid var(--linie); border-left: 5px solid var(--galben);
  border-radius: var(--r-mare); padding: 26px 28px; flex-wrap: wrap; box-shadow: var(--tus-fin);
}
.cauta-cod-text { flex: 1 1 340px; }
.cauta-cod-text h2 { margin-bottom: 6px; }
.cauta-cod-text p { margin: 0; font-size: 14.5px; }
.cauta-cod-form { display: flex; gap: 9px; flex: 1 1 330px; min-width: 0; max-width: 460px; }
.cauta-cod-form input {
  flex: 1; height: 46px; padding: 0 14px; min-width: 0;
  border: var(--contur); border-radius: var(--r);
  font-size: 15px; font-variant-numeric: tabular-nums; background: #fff; color: var(--text);
}
.cauta-cod-form input:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }

/* ---------- 20. GRILA MARCI ---------- */
.grila-marci { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 9px; }
.marca-card {
  display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 10px 12px;
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
  font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px; color: var(--negru);
  text-align: center;
  transition: transform .1s, box-shadow .1s, background .12s;
}
.marca-card:hover {
  background: var(--galben); color: var(--pe-galben);
  text-decoration: none; transform: translateY(-2px); box-shadow: var(--tus-mic);
}

/* ---------- 21. PASI MARI ---------- */
.pasi-mari { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.pas-mare {
  background: var(--card); border: var(--contur); border-radius: var(--r-mare);
  padding: 22px 24px; position: relative; box-shadow: var(--tus);
}
.pas-mare-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--galben); color: var(--pe-galben); border: var(--contur);
  font-family: var(--f-titlu); font-weight: 800; font-size: 18px; margin-bottom: 12px;
}
.pas-mare h3 { font-size: 17px; margin-bottom: 6px; }
.pas-mare p { font-size: 14px; color: var(--text-slab); margin: 0; line-height: 1.55; }

/* ---------- 22. CAP DE PAGINA MASINA / LISTA ---------- */
.masina-cap {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 26px;
  flex-wrap: wrap;
}
.masina-cap h1 { margin-bottom: 6px; }
.masina-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie); border-radius: var(--r);
  margin: 0; overflow: hidden; min-width: 260px;
}
.masina-specs > div { background: var(--card); padding: 10px 13px; }
.masina-specs dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-slab); }
.masina-specs dd { margin: 2px 0 0; font-family: var(--f-titlu); font-weight: 600; font-size: 14.5px; }

.filtru-camp {
  height: 40px; min-width: 300px; padding: 0 13px;
  border: 1px solid var(--linie-tare); border-radius: var(--r); background: #fff; font-size: 14px;
}
.filtru-camp:focus { outline: none; border-color: var(--galben-clar); box-shadow: 0 0 0 3px var(--galben-slab); }

.lista-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lista-cap h1 { margin-bottom: 5px; }
.lista-cap-masina { font-weight: 500; color: var(--text-slab); font-size: .62em; display: inline-block; }

/* ---------- 23. PAGINA DE PRODUS ---------- */
.produs { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 34px; align-items: start; }
.produs-galerie { position: sticky; top: 16px; }
.produs-poza-mare {
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-mare);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 26px;
}
.produs-poza-mare img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.produs-miniaturi { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.miniatura {
  width: 68px; height: 54px; padding: 5px; background: #fff;
  border: 1px solid var(--linie); border-radius: var(--r-mic); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.miniatura img { max-height: 100%; object-fit: contain; }
.miniatura.este-activ { border-color: var(--galben); box-shadow: 0 0 0 2px var(--galben-slab); }

.produs-etichete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.produs-titlu { font-size: clamp(22px, 2.6vw, 30px); margin: 2px 0 8px; }
.produs-cod { font-size: 14px; color: var(--text-slab); margin-bottom: 16px; font-variant-numeric: tabular-nums; }

.potrivire { padding: 11px 14px; border-radius: var(--r); font-size: 14px; margin-bottom: 18px; border: 1px solid; }
.potrivire--da   { background: var(--galben-slab); border-color: #BFDFD1; color: var(--galben-tare); }
.potrivire--nu   { background: var(--alarma-100);  border-color: #F0C9C7; color: var(--alarma); }
.potrivire--info { background: #EEF1F0; border-color: var(--linie); color: var(--negru-600); }

.produs-cumparare {
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare);
  padding: 20px 22px; box-shadow: var(--umbra-1);
}
.pret-curent--mare { font-size: 38px; }
.produs-adauga { display: flex; gap: 10px; align-items: stretch; margin: 16px 0 14px; }
.cantitate { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-slab); }
.cantitate input {
  width: 74px; height: 48px; text-align: center;
  border: 1px solid var(--linie-tare); border-radius: var(--r); font-size: 16px;
}
.produs-adauga .btn { flex: 1; }
.produs-avantaje { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.produs-avantaje li {
  font-size: 13.5px; color: var(--negru-600); padding-left: 22px; position: relative;
}
.produs-avantaje li::before {
  content: ""; position: absolute; left: 3px; top: 7px; width: 9px; height: 5px;
  border-left: 2px solid var(--galben); border-bottom: 2px solid var(--galben);
  transform: rotate(-45deg);
}

.produs-jos { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.panou { background: var(--card); border: var(--contur); border-radius: var(--r-mare); padding: 22px 24px; box-shadow: var(--tus); }
.panou h2 { font-size: 18px; }
.tabel-tehnic th, .tabel-tehnic td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--linie); font-size: 13.5px; vertical-align: top; }
.tabel-tehnic th { font-weight: 500; color: var(--text-slab); width: 46%; }
.tabel-tehnic tr:last-child th, .tabel-tehnic tr:last-child td { border-bottom: 0; }
.tehnic-nota { color: var(--text-slab); font-style: italic; }
.descriere-produs { font-size: 14.5px; line-height: 1.7; color: var(--negru-600); }
.descriere-produs > *:first-child { margin-top: 0; }
.descriere-produs > *:last-child  { margin-bottom: 0; }
.descriere-produs p { margin: 0 0 14px; }
.descriere-produs ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.descriere-produs li { position: relative; padding-left: 20px; }
.descriere-produs li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--galben);
}

.oe-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.oe-cod {
  padding: 4px 9px; background: #F1F3F2; border: 1px solid var(--linie);
  border-radius: var(--r-mic); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--negru-600);
}

/* ---------- 24. PAGINI DE SELECTOR ---------- */
.alfabet { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 18px; }
.alfabet a {
  min-width: 34px; height: 34px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r);
  font-family: var(--f-titlu); font-weight: 600; font-size: 14px; color: var(--negru-700);
}
.alfabet a:hover { border-color: var(--galben-clar); color: var(--galben-tare); text-decoration: none; }
.alfabet-titlu {
  font-size: 17px; color: var(--gri-500); border-bottom: 1px solid var(--linie);
  padding-bottom: 7px; margin-bottom: 13px;
}

.grila-linkuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 9px; }
/* card mic de legatura interna (alte motorizari, categorii inrudite) */
.link-card-mini {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 10px 13px; background: var(--card);
  border: var(--contur-subtire); border-radius: var(--r); color: var(--negru);
  transition: border-color .12s, background .12s;
}
.link-card-mini:hover { border-color: var(--galben); background: var(--galben-slab); text-decoration: none; }
.link-card-mini strong { font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px; }
.link-card-mini span { font-size: 12.5px; color: var(--text-slab); white-space: nowrap; }
.link-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; background: var(--card);
  border: var(--contur-subtire); border-radius: var(--r);
  color: var(--negru); font-size: 14.5px;
  transition: transform .1s, box-shadow .1s, background .12s;
}
.link-card:hover { background: #fff; border-color: var(--galben); text-decoration: none; transform: translateY(-2px); box-shadow: var(--tus-mic); }
.link-card strong { font-family: var(--f-titlu); font-weight: 600; }
.link-card svg { width: 16px; height: 16px; stroke: var(--gri-400); fill: none; stroke-width: 2; flex-shrink: 0; }
.link-card:hover svg { stroke: var(--galben); }
.link-card-ani { display: block; font-style: normal; font-size: 12.5px; color: var(--text-slab); margin-top: 2px; }

.tabel-motorizari { background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare); overflow: hidden; }
.tabel-motorizari th, .tabel-motorizari td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linie); font-size: 14px; }
.tabel-motorizari thead th {
  background: #F3F5F4; font-family: var(--f-titlu); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-slab);
}
.tabel-motorizari tbody tr:last-child td { border-bottom: 0; }
.tabel-motorizari tbody tr:hover { background: #FAFBFA; }
.mot-nume { font-family: var(--f-titlu); font-weight: 600; font-size: 15px; color: var(--negru-800); }
.mot-nume:hover { color: var(--galben); }
.mot-actiune { text-align: right; white-space: nowrap; }

/* ---------- 25. COS ---------- */
.cos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.cos-linii { display: grid; gap: 10px; }
.cos-linie {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px 110px 34px;
  gap: 14px; align-items: center;
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
  padding: 12px 14px;
}
.cos-poza {
  width: 90px; height: 68px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-mic); padding: 5px;
}
.cos-poza img { max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cos-nume { font-size: 14.5px; font-weight: 500; margin: 0 0 3px; line-height: 1.35; }
.cos-nume a { color: var(--text); }
.cos-nume a:hover { color: var(--galben); text-decoration: none; }
.cos-cantitate input {
  width: 76px; height: 40px; text-align: center;
  border: 1px solid var(--linie-tare); border-radius: var(--r); font-size: 15px;
}
.cos-subtotal { font-family: var(--f-titlu); font-weight: 700; font-size: 19px; text-align: right; white-space: nowrap; color: var(--pret); }
.cos-sterge button {
  width: 32px; height: 32px; border: 1px solid var(--linie); border-radius: var(--r-mic);
  background: #fff; color: var(--gri-500); font-size: 20px; line-height: 1;
}
.cos-sterge button:hover { border-color: var(--alarma); color: var(--alarma); }

.cos-sumar {
  background: var(--card); border: var(--contur); border-radius: var(--r-mare);
  padding: 20px 22px; position: sticky; top: 16px; box-shadow: var(--tus);
}
.cos-sumar h2 { font-size: 18px; }
.sumar-rand { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 9px; font-size: 14.5px; }
.sumar-rand dt { color: var(--text-slab); }
.sumar-rand dd { margin: 0; font-weight: 600; white-space: nowrap; font-size: 15.5px; }
.sumar-total {
  border-top: 2px solid var(--negru-800); padding-top: 11px; margin-top: 13px;
  font-family: var(--f-titlu); font-size: 17px;
}
.sumar-total dt { color: var(--text); font-weight: 700; }
.sumar-total dd { font-size: 24px; font-weight: 700; color: var(--pret); }
.sumar-produse { list-style: none; padding: 0; margin: 0 0 14px; border-bottom: 1px solid var(--linie); }
.sumar-produse li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.sumar-produse b { white-space: nowrap; color: var(--text-slab); font-weight: 500; }

/* ---------- 26. CHECKOUT ---------- */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.checkout-form { display: grid; gap: 14px; }
.checkout fieldset { border: 0; margin: 0; padding: 22px 24px; }
.camp-rand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.optiuni-linie { display: flex; gap: 18px; flex-wrap: wrap; }
.optiune { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.optiune input { width: 17px; height: 17px; accent-color: var(--galben); }
.metoda-plata {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; margin-bottom: 9px;
  border: 1px solid var(--linie-tare); border-radius: var(--r); cursor: pointer; transition: border-color .15s;
}
.metoda-plata:hover { border-color: var(--gri-500); }
.metoda-plata input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--galben); }
.metoda-plata:has(input:checked) { border-color: var(--galben); background: var(--galben-slab); }
.metoda-corp { display: flex; flex-direction: column; gap: 2px; }
.metoda-corp strong { font-family: var(--f-titlu); font-size: 15px; }
.optiune--termeni {
  align-items: flex-start; gap: 10px; padding: 12px 14px;
  background: #F3F5F4; border: 1px solid var(--linie); border-radius: var(--r);
  line-height: 1.45;
}
.optiune--termeni input { margin-top: 2px; flex-shrink: 0; }
.camp-eroare .optiune--termeni { border-color: var(--alarma); background: var(--alarma-100); }

/* ---------- 27. CONFIRMARE COMANDA ---------- */
.confirmare { text-align: center; max-width: 620px; margin: 0 auto; padding: 40px 20px; }
.confirmare-bifa {
  width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--galben-slab); color: var(--galben);
  display: flex; align-items: center; justify-content: center;
}
.confirmare-bifa svg { width: 34px; height: 34px; }

/* ---------- 28. CONT ---------- */
.cont-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 20px; align-items: start; }
.cont-meniu {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare); padding: 8px;
}
.cont-meniu a { padding: 10px 13px; border-radius: var(--r); font-size: 14.5px; color: var(--negru-700); }
.cont-meniu a:hover { background: #F3F5F4; text-decoration: none; }
.cont-meniu a.este-activ { background: var(--galben); color: #fff; font-weight: 600; }
.cont-iesire { margin-top: 6px; border-top: 1px solid var(--linie); padding-top: 12px !important; color: var(--alarma) !important; }
.cont-continut { display: grid; gap: 12px; }
.cont-statistici { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 16px; }
.cont-statistici > div {
  background: #F3F5F4; border-radius: var(--r); padding: 14px; text-align: center;
}
.cont-statistici b { display: block; font-family: var(--f-titlu); font-size: 24px; color: var(--negru-800); }
.cont-statistici span { font-size: 12.5px; color: var(--text-slab); }

.tabel-date { width: 100%; }
.tabel-date th, .tabel-date td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--linie); font-size: 14px; }
.tabel-date thead th {
  background: #F3F5F4; font-family: var(--f-titlu); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-slab);
}
.tabel-date tbody tr:last-child td { border-bottom: 0; }
.nowrap { white-space: nowrap; }

/* ---------- 29. AUTENTIFICARE ---------- */
.auth-cutie {
  max-width: 480px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare);
  padding: 26px 28px; box-shadow: var(--umbra-1);
}
.taburi { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--linie); }
.taburi a {
  padding: 10px 14px; font-size: 14px; color: var(--text-slab);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.taburi a:hover { color: var(--negru-700); text-decoration: none; }
.taburi a.este-activ { color: var(--galben-tare); border-bottom-color: var(--galben); font-weight: 600; }

/* ---------- 30. CONTACT / CONTINUT ---------- */
.contact-layout { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 18px; align-items: start; }
.contact-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.contact-lista li { display: flex; flex-direction: column; font-size: 15px; }
.contact-lista span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-slab); }
.contact-linkuri { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.contact-linkuri li { font-size: 14px; }

/* Paginile de informatii ocupa toata latimea; randurile lungi se tin in frau
   prin coloane la textele juridice (vezi .text-legal), nu prin ingustarea paginii. */
.continut-pagina { max-width: none; }
.continut-ajutor {
  margin-top: 20px; background: var(--card); border: 1px solid var(--linie);
  border-left: 4px solid var(--galben); border-radius: var(--r-mare); padding: 22px 24px;
}
.continut-ajutor h2 { font-size: 18px; margin-bottom: 4px; }
.continut-ajutor p { margin-bottom: 14px; font-size: 14.5px; }

/* ---------- 31. GRILA DE CATEGORII (universale, nivel 1) ---------- */
.grila-categorii { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.cat-card {
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare);
  padding: 16px 18px; display: flex; flex-direction: column;
}
.cat-card h2 { font-size: 15.5px; margin: 0 0 9px; padding-bottom: 9px; border-bottom: 1px solid var(--linie); }
.cat-card h2 a { color: var(--negru-800); }
.cat-card h2 a:hover { color: var(--galben); text-decoration: none; }
.cat-card ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; }
.cat-card li a { font-size: 13.5px; color: var(--negru-600); }
.cat-card li a:hover { color: var(--galben); }
.cat-card-toate { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--galben); }

/* ---------- 33. MEGA-MENIU "Produse universale" ---------- */
/* panoul e ancorat pe HEADER (nu pe bara), ca sa se intinda pe toata latimea
   ferestrei si sa nu mosteneasca stilurile de link din bara de meniu */
.antet { position: relative; }

.mega-trigger {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 20px;
  border: 0; background: var(--galben); color: var(--pe-galben);
  font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px; letter-spacing: .01em;
}
.mega-trigger:hover, .mega-trigger[aria-expanded="true"] { background: var(--galben-clar); }
.mega-burger { width: 18px; height: 18px; stroke: var(--pe-galben); fill: none; stroke-width: 2.4; }
.mega-chev   { width: 15px; height: 15px; stroke: var(--pe-galben); fill: none; stroke-width: 2.4; transition: transform .18s; }
.mega-trigger[aria-expanded="true"] .mega-chev { transform: rotate(180deg); }

/* panoul: cat toata latimea site-ului, sub bara de meniu */
.megameniu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: var(--card); border-bottom: 3px solid var(--galben);
  box-shadow: 0 18px 40px rgba(13,13,13,.18);
  /* header-ul are color:#fff — fara reset, titlurile din panou ar fi albe pe alb */
  color: var(--text);
  font-family: var(--f-text);
}
.megameniu h3 { color: var(--negru-800); }
.megameniu[hidden] { display: none; }
.mega-interior {
  width: 100%; max-width: var(--lat); margin: 0 auto;
  padding: 22px var(--gut) 6px;
  max-height: min(78vh, 640px); overflow-y: auto; overscroll-behavior: contain;
}

/* Coloane ca la ziar. Alternativa ar fi fost grid, dar acolo fiecare celula isi
   tine randul si grupele scunde lasa goluri sub ele; asa continutul curge si
   umple coloanele uniform, oricat de diferite ar fi grupele ca marime
   (au intre 3 si 15 ramuri). */
.mega-coloane {
  /* Latime SI numar: browserul alege cate coloane incap, dar nu trece de 5.
     Cu numar fix, pe un ecran de 1100px coloanele ies inghesuite. */
  columns: 240px 5; column-gap: 30px;
}
.mega-grup {
  /* Fara asta, titlul unei grupe ar putea ramane in josul unei coloane cu
     ramurile ei in urmatoarea — cel mai enervant defect al layoutului pe coloane. */
  break-inside: avoid; page-break-inside: avoid;
  display: inline-block; width: 100%;
  margin: 0 0 22px;
  /* intrarea decalata: grupele apar una dupa alta, nu tot blocul deodata */
  animation: mega-intra .34s both cubic-bezier(.22, 1, .36, 1);
  animation-delay: calc(var(--i, 0) * 22ms);
}
@keyframes mega-intra {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.mega-grup-cap {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 7px; margin-bottom: 9px;
  border-bottom: 2px solid var(--linie);
  font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px;
  color: var(--negru); line-height: 1.25;
  position: relative;
}
/* Linia galbena creste de la stanga cand treci cu mausul peste grupa. */
.mega-grup-cap::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--galben); transition: right .28s cubic-bezier(.22, 1, .36, 1);
}
.mega-grup:hover .mega-grup-cap::after { right: 0; }
.mega-grup-cap:hover { text-decoration: none; color: var(--galben-tare); }
.mega-grup-cap svg {
  width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2;
  opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s;
}
.mega-grup:hover .mega-grup-cap svg { opacity: 1; transform: none; }

.mega-ramuri { list-style: none; margin: 0; padding: 0; }
.mega-ramuri li { margin: 0; }
.mega-ramuri a {
  display: block; padding: 4px 0 4px 11px; position: relative;
  font-size: 13.5px; color: var(--text-slab); line-height: 1.45;
  transition: color .12s, padding-left .16s;
}
/* Punctul din fata devine sageata la hover — miscare mica, dar se simte. */
.mega-ramuri a::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--linie-tare);
  transition: background .12s, transform .16s;
}
.mega-ramuri a:hover {
  color: var(--negru); text-decoration: none; padding-left: 15px;
}
.mega-ramuri a:hover::before { background: var(--galben); transform: scale(1.6); }

.mega-jos {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 4px; padding: 14px 0 18px;
  border-top: 1px solid var(--linie);
}

body.mega-deschis { overflow: hidden; }

/* ---------- 34. LISTARE CU FILTRE (produse universale) ---------- */
.drill-rand { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.drill-rand a {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  background: var(--card); border: var(--contur-subtire); border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--negru);
}
.drill-rand a:hover { background: var(--galben); color: var(--pe-galben); text-decoration: none; }
.drill-rand span { font-size: 12px; color: var(--text-slab); }

.listare-bara {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 15px; margin-bottom: 14px;
  background: var(--card); border: var(--contur-subtire); border-radius: var(--r);
}
.listare-numar { font-size: 14px; color: var(--text-slab); }
.listare-sortare { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-slab); }
.listare-sortare select {
  height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--linie-tare);
  border-radius: var(--r); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6672' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 10px center/11px;
  appearance: none; font-size: 13.5px; color: var(--text);
}
.filtre-buton { display: none; align-items: center; gap: 8px; padding: 8px 14px;
  background: var(--negru-800); color: #fff; border: 0; border-radius: var(--r);
  font-family: var(--f-titlu); font-weight: 600; font-size: 14px; }
.filtre-buton svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }

.listare-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.filtre-lateral {
  background: var(--card); border: var(--contur); border-radius: var(--r-mare);
  position: sticky; top: 16px; overflow: hidden; box-shadow: var(--tus);
}
.filtre-cap {
  display: flex; align-items: center; gap: 10px; padding: 13px 15px;
  border-bottom: 1px solid var(--linie); background: var(--galben);
}
.filtre-cap strong { font-family: var(--f-titlu); font-size: 15px; }
/* butonul de resetare: vizibil, pe toata latimea panoului */
.filtre-cap-nr {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: rgba(0,0,0,.14); color: var(--pe-galben);
  font-size: 11.5px; font-weight: 700;
}
.filtre-reset {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 10px 15px; padding: 9px 12px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  background: #fff; color: var(--negru);
  font-family: var(--f-titlu); font-weight: 700; font-size: 13.5px;
}
.filtre-reset:hover { background: var(--alarma-100); border-color: var(--alarma); color: var(--alarma); text-decoration: none; }
.filtre-reset svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.filtre-inchide { display: none; margin-left: auto; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--gri-500); }
.filtre-optiuni { display: grid; gap: 2px; max-height: 264px; overflow-y: auto; }
.filtre-optiuni label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.filtre-optiuni input { width: 16px; height: 16px; accent-color: var(--galben); flex-shrink: 0; }
.filtre-optiuni label:hover span { color: var(--negru); font-weight: 600; }
.filtre-optiuni span { flex: 1; }
.filtre-optiuni em { font-style: normal; font-size: 12px; color: var(--gri-400); }
.filtre-grup + .filtre-grup { border-top: var(--contur-subtire); }
.filtre-pret { display: flex; align-items: center; gap: 7px; }
.filtre-pret input {
  width: 100%; min-width: 0; height: 36px; padding: 0 8px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  font-size: 13.5px; text-align: center;
}
.filtre-pret input:focus { outline: none; border-color: var(--galben-clar); box-shadow: 0 0 0 3px var(--galben-slab); }
.filtre-pret span { color: var(--gri-400); }

.filtre-fundal { display: none; }

/* ---------- 35. FEREASTRA DE CONFIRMARE COS ---------- */
.modal-fundal { position: fixed; inset: 0; z-index: 200; background: rgba(13,13,13,.5); }
.modal-fundal[hidden], .modal-cos[hidden] { display: none; }
body.modal-deschis { overflow: hidden; }

.modal-cos {
  position: fixed; z-index: 210; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--card); border-radius: var(--r-mare); padding: 24px 26px 22px;
  box-shadow: 0 10px 24px rgba(13,13,13,.16), 0 30px 70px rgba(13,13,13,.28);
}
.modal-x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  border: 0; background: none; font-size: 26px; line-height: 1; color: var(--gri-500);
  border-radius: var(--r);
}
.modal-x:hover { background: var(--fundal-alt); color: var(--negru); }

.modal-bifa {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
  font-family: var(--f-titlu); font-weight: 700; font-size: 17px; color: var(--negru);
}
.modal-bifa svg {
  width: 26px; height: 26px; flex-shrink: 0; padding: 5px; border-radius: 50%;
  background: var(--galben); stroke: var(--pe-galben); fill: none; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.modal-produs { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-top: 1px solid var(--linie); }
.modal-produs:empty { display: none; }
.modal-poza {
  width: 62px; height: 62px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r); padding: 5px;
}
.modal-poza img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.modal-info { display: grid; gap: 3px; min-width: 0; }
.modal-info b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }

.modal-sumar { margin: 4px 0 18px; padding-top: 12px; border-top: 1px solid var(--linie); }
.modal-sumar > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.modal-sumar dt { color: var(--text-slab); margin: 0; }
.modal-sumar dd { margin: 0; font-weight: 600; white-space: nowrap; }
.modal-total { border-top: 1px solid var(--linie); margin-top: 6px; padding-top: 10px !important; }
.modal-total dt { color: var(--negru) !important; font-weight: 700; }
.modal-total dd { font-family: var(--f-titlu); font-size: 19px; font-weight: 800; color: var(--pret); }

.modal-butoane { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.modal-butoane .btn-secundar { grid-column: 1 / -1; }

/* ---------- 36. GRUPURI DE FILTRE ----------
   Fiecare criteriu e un bloc pliabil separat, cu propriul camp de cautare.
   Fara scroll pe toata bara: scroll doar in lista unui grup, cand e lunga. */
.filtre-grup { border-top: 1px solid var(--linie); }
.filtre-grup:first-of-type { border-top: 0; }

.filtre-grup > summary {
  display: flex; align-items: center; gap: 9px; padding: 12px 15px;
  cursor: pointer; list-style: none;
  font-family: var(--f-titlu); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--negru-700);
}
.filtre-grup > summary::-webkit-details-marker { display: none; }
.filtre-grup > summary:hover { background: var(--fundal-alt); }
.filtre-grup-nume { flex: 1; min-width: 0; }
.filtre-grup-bula {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--galben); color: var(--pe-galben);
  font-size: 11.5px; font-weight: 800; line-height: 20px; text-align: center;
  font-family: var(--f-text);
}
.filtre-grup-sageata {
  width: 15px; height: 15px; flex-shrink: 0; stroke: var(--gri-400);
  fill: none; stroke-width: 2.2; transition: transform .18s;
}
.filtre-grup[open] > summary .filtre-grup-sageata { transform: rotate(180deg); }
.filtre-grup-corp { padding: 0 15px 14px; }

.filtre-cauta {
  width: 100%; height: 34px; padding: 0 10px; margin-bottom: 9px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  font-size: 13px; background: #fff;
}
.filtre-cauta:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }

.filtre-optiuni label { padding: 4px 6px; border-radius: var(--r-mic); }
.filtre-optiuni label:hover { background: var(--galben-slab); }
.filtre-optiuni label[hidden] { display: none; }
.filtre-fara-rezultat { margin: 4px 0 0; font-size: 12.5px; color: var(--text-slab); }

/* ---------- 37. SLIDER DE PRET ---------- */
.pret-slider { position: relative; height: 30px; margin: 6px 2px 10px; }
.pret-pista {
  position: absolute; left: 0; right: 0; top: 13px; height: 4px;
  background: var(--linie); border-radius: 2px;
}
.pret-umplut { position: absolute; top: 0; bottom: 0; background: var(--galben); border-radius: 2px; }
.pret-valori {
  display: flex; justify-content: space-between; gap: 10px; margin: -4px 0 10px;
  font-family: var(--f-titlu); font-weight: 700; font-size: 13px; color: var(--negru);
  font-variant-numeric: tabular-nums;
}

/* doua range-uri suprapuse: pista lor e transparenta, se vede cea desenata mai sus */
.pret-maner {
  position: absolute; left: 0; width: 100%; top: 6px; height: 18px;
  margin: 0; background: none; appearance: none; -webkit-appearance: none;
  pointer-events: none;             /* doar manerele primesc click */
}
.pret-maner:focus { outline: none; }
.pret-maner::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--negru); cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pret-maner::-moz-range-thumb {
  pointer-events: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--negru); cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.pret-maner:focus-visible::-webkit-slider-thumb { border-color: var(--galben-tare); box-shadow: 0 0 0 3px var(--galben-slab); }
.pret-maner:focus-visible::-moz-range-thumb { border-color: var(--galben-tare); box-shadow: 0 0 0 3px var(--galben-slab); }
.pret-maner::-webkit-slider-runnable-track { background: none; }
.pret-maner::-moz-range-track { background: none; }

/* ---------- 38. FEREASTRA DE SCHIMBARE A MASINII ---------- */
.modal-masina[hidden] { display: none; }
.modal-masina {
  position: fixed; z-index: 210; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--card); border-radius: var(--r-mare); padding: 24px 26px 26px;
  box-shadow: 0 10px 24px rgba(13,13,13,.16), 0 30px 70px rgba(13,13,13,.28);
}
.modal-masina-titlu { font-size: 21px; margin-bottom: 4px; }
.modal-masina .t-mic { margin-bottom: 16px; }
/* selectorul din fereastra e deja intr-un card — nu-i mai punem inca o umbra */
.modal-masina .selector { box-shadow: none; border: 1px solid var(--linie); }
.modal-masina .selector-pasi { grid-template-columns: repeat(2, 1fr); }

/* ---------- 39. CERERE DE OFERTA ---------- */
.oferta-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.oferta-coloana { display: grid; gap: 14px; }
.oferta-lateral { position: sticky; top: 16px; }
.oferta-form fieldset { border: 0; margin: 0; }
.oferta-dotari { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.optiune--bloc {
  align-items: flex-start; gap: 10px; padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--linie-tare); border-radius: var(--r); cursor: pointer;
}
.optiune--bloc:hover { border-color: var(--galben); background: var(--galben-slab); }
.optiune--bloc:has(input:checked) { border-color: var(--galben); background: var(--galben-slab); }
.optiune--bloc input { margin-top: 2px; flex-shrink: 0; }
.optiune--bloc span { display: grid; gap: 2px; }
.optiune--bloc em { font-style: normal; font-size: 12.5px; color: var(--text-slab); line-height: 1.4; }

/* ---------- 40. TEXTE JURIDICE (garantie, termeni, politici) ---------- */
.text-legal { font-size: 14.5px; line-height: 1.7; color: var(--negru-600); }
.text-legal h1, .text-legal h2 { font-size: 20px; margin: 26px 0 10px; color: var(--negru); }
.text-legal h3 { font-size: 16.5px; margin: 20px 0 8px; color: var(--negru); }
.text-legal h4 { font-size: 15px; margin: 16px 0 6px; color: var(--negru); }
.text-legal > *:first-child { margin-top: 0; }
.text-legal p { margin: 0 0 12px; }
.text-legal ul, .text-legal ol { margin: 0 0 12px; padding-left: 22px; }
.text-legal li { margin-bottom: 5px; }
.text-legal a { color: var(--galben-tare); }
.text-legal table { margin: 0 0 16px; font-size: 13.5px; }
.text-legal th, .text-legal td { padding: 8px 10px; border: 1px solid var(--linie); text-align: left; vertical-align: top; }
.text-legal th { background: var(--fundal-alt); font-weight: 600; }
/* tabelele late nu au voie sa impinga pagina pe orizontala */
.text-legal { overflow-x: auto; }
.text-legal img { max-width: 100%; height: auto; }

/* ---------- 41. FEREASTRA DE CONFIRMARE ---------- */
.modal-confirm[hidden] { display: none; }
.modal-confirm {
  position: fixed; z-index: 210; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 32px)); text-align: center;
  background: var(--card); border-radius: var(--r-mare); padding: 28px 26px 22px;
  box-shadow: 0 10px 24px rgba(13,13,13,.16), 0 30px 70px rgba(13,13,13,.28);
}
.confirm-icoana {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--alarma-100); display: flex; align-items: center; justify-content: center;
}
.confirm-icoana svg {
  width: 26px; height: 26px; stroke: var(--alarma); fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.confirm-titlu { font-size: 19px; margin-bottom: 6px; }
.confirm-text { font-size: 14px; color: var(--text-slab); margin-bottom: 16px; }

.confirm-produs {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 13px; margin-bottom: 18px;
  background: var(--fundal-alt); border-radius: var(--r);
}
.confirm-produs:empty { display: none; }
.confirm-produs img {
  width: 46px; height: 46px; flex-shrink: 0; object-fit: contain;
  background: #fff; border: 1px solid var(--linie); border-radius: var(--r-mic); padding: 4px;
}
.confirm-produs span { font-size: 13.5px; line-height: 1.4; }

.confirm-butoane { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.btn-sterge { background: var(--alarma); color: #fff; box-shadow: 0 6px 16px rgba(198,40,40,.28); }
.panou--periculos { border-color: #F0C9C7; background: #FFFAFA; }
.panou--periculos .t-h2 { color: var(--alarma); }
.cont-meniu a[href$="sterge-cont/"] { color: var(--alarma); }
.cont-meniu a[href$="sterge-cont/"].este-activ { background: var(--alarma); color: #fff; }
.btn-sterge:hover { background: #A81F1F; }

/* ---------- 42. CARDUL MASINII SELECTATE ---------- */
.bara-masina { background: var(--fundal-alt); border-bottom: 1px solid var(--linie); padding: 10px 0; }
.masina-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--linie); border-left: 4px solid var(--galben);
  border-radius: var(--r-mare); padding: 11px 16px; box-shadow: var(--tus-fin);
}
.masina-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--r);
  background: var(--galben-slab); display: flex; align-items: center; justify-content: center;
}
.masina-icon svg {
  width: 24px; height: 24px; stroke: var(--galben-tare); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.masina-text { display: grid; gap: 1px; min-width: 0; }
.masina-eticheta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gri-500);
}
.masina-nume {
  font-family: var(--f-titlu); font-weight: 700; font-size: 16px; color: var(--negru);
  line-height: 1.25;
}
.masina-ani {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--text-slab);
}
.masina-ani svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.masina-actiuni { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }

/* ---------- 43. MENIUL MOBIL (sertar) ---------- */
.burger {
  display: none; width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--linie-tare); border-radius: var(--r); background: #fff;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px; background: var(--negru);
  transition: transform .25s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sertar-fundal[hidden], .sertar[hidden] { display: none; }
.sertar-fundal {
  position: fixed; inset: 0; z-index: 190; background: rgba(13,13,13,.5);
  animation: aparitie .2s ease-out;
}
@keyframes aparitie { from { opacity: 0 } to { opacity: 1 } }

.sertar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 200;
  width: min(330px, 88vw); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); box-shadow: 6px 0 32px rgba(13,13,13,.28);
  animation: sertar-intra .28s cubic-bezier(.22, 1, .36, 1);
}
@keyframes sertar-intra { from { transform: translateX(-100%) } to { transform: none } }

.sertar-cap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--negru); color: #fff; position: sticky; top: 0; z-index: 2;
}
.sertar-titlu {
  font-family: var(--f-titlu); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .07em;
}
.sertar-cap .modal-x { position: static; color: #fff; }
.sertar-cap .modal-x:hover { background: rgba(255,255,255,.12); color: #fff; }

/* fiecare rand intra decalat, ca sertarul sa nu apara dintr-o bucata */
.sertar-masina, .sertar-lista > li, .sertar-jos, .sertar-secundar {
  animation: rand-intra .32s both cubic-bezier(.22, 1, .36, 1);
  animation-delay: calc(60ms + var(--i, 0) * 28ms);
}
@keyframes rand-intra { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }

.sertar-masina {
  display: flex; align-items: center; gap: 11px; margin: 12px 14px;
  padding: 11px 13px; border-radius: var(--r); background: var(--galben-slab);
  border-left: 4px solid var(--galben); color: var(--negru);
}
.sertar-masina:hover { text-decoration: none; }
.sertar-masina svg { width: 24px; height: 24px; stroke: var(--galben-tare); fill: none; stroke-width: 1.7; flex-shrink: 0; }
.sertar-masina em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gri-500); }
.sertar-masina strong { font-family: var(--f-titlu); font-size: 14.5px; line-height: 1.25; }

.sertar-lista { list-style: none; margin: 0; padding: 6px 8px; }
.sertar-lista a, .sertar-buton {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 12px; border: 0; background: none; border-radius: var(--r);
  font-family: var(--f-titlu); font-weight: 600; font-size: 15px; color: var(--negru);
  text-align: left;
}
.sertar-lista a:hover, .sertar-buton:hover { background: var(--galben-slab); text-decoration: none; }
.sertar-lista svg { width: 20px; height: 20px; stroke: var(--gri-500); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sertar-buton .sertar-sageata { margin-left: auto; width: 16px; height: 16px; transition: transform .2s; }
.sertar-buton[aria-expanded="true"] .sertar-sageata { transform: rotate(180deg); }

.sertar-subnivel { list-style: none; margin: 0 0 6px; padding: 0 0 0 20px; border-left: 2px solid var(--linie); margin-left: 22px; }
.sertar-subnivel[hidden] { display: none; }
.sertar-subnivel a { padding: 9px 10px; font-family: var(--f-text); font-weight: 400; font-size: 14px; color: var(--negru-600); }
.sertar-toate { font-weight: 600 !important; color: var(--galben-tare) !important; }
.sertar-rand { display: flex; align-items: center; }
.sertar-rand > a { flex: 1; min-width: 0; }
.sertar-buton--mic {
  width: 36px; height: 36px; flex: 0 0 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.sertar-buton--mic .sertar-sageata { margin: 0; width: 15px; height: 15px; stroke: var(--gri-500); }
.sertar-subnivel--3 { margin-left: 10px; padding-left: 14px; border-left-style: dashed; }
.sertar-subnivel--3 a { font-size: 13.5px; padding: 8px 10px; color: var(--text-slab); }

.sertar-jos { display: grid; gap: 8px; padding: 10px 14px 6px; border-top: 1px solid var(--linie); }
.sertar-secundar { list-style: none; margin: 0; padding: 6px 14px 22px; display: grid; gap: 2px; }
.sertar-secundar a { display: block; padding: 7px 0; font-size: 13.5px; color: var(--text-slab); }

@media (prefers-reduced-motion: reduce) {
  .sertar, .sertar-fundal, .sertar-masina, .sertar-lista > li, .sertar-jos, .sertar-secundar { animation: none; }
  /* Banda ramane la fel de vizibila prin culoare; doar miscarea dispare. */
  .banda-pret::after { display: none; }
  .banda-pret-ico { animation: none; }
}

/* fisa tehnica din blocul de text SEO */
.spec-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin: 12px 0 0; }
.spec-lista > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 12px; border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--card); font-size: 14px;
}
.spec-lista dt { color: var(--text-slab); margin: 0; }
.spec-lista dd { margin: 0; font-weight: 600; text-align: right; }

.subsol-firma { opacity: .85; }
.subsol-anpc { display: inline-flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 44. BANDA DE PRET ----------
   O singura linie sub header, pe toate paginile. Regula de aur aici: sa se vada,
   dar sa nu ia locul continutului. De aceea are inaltime fixa mica, nu e sticky
   si nu are buton de inchidere — nu intrerupe pe nimeni, deci n-are ce inchide. */
.banda-pret {
  /* Fasie cap-la-cap, lipita sub antet. NU e distantata si nu e pastila:
     e cromatica de site, ca `.bara-sus`, si acolo distanta ar fi un defect,
     nu o calitate. Pastila plutea intr-un gol alb si de aceea parea lipita
     de ce urma; fasia nu are aceasta problema, fiindca nu are margini. */
  background: var(--negru);
  border-bottom: 3px solid var(--galben);
  position: relative;
  overflow: hidden;
}
.banda-pret .wrap { position: relative; z-index: 1; }

.banda-pret-text {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 0; min-height: 40px; padding: 8px 0;
  font-size: 14.5px; color: var(--gri-300); text-align: center;
}
.banda-pret-text strong {
  font-family: var(--f-titlu);
  font-weight: 800; font-size: 15px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--galben);
  white-space: nowrap;
}
/* Coada explicativa se retrage prima cand nu mai e loc — vezi si @media de jos. */
.banda-pret-lung { min-width: 0; }
.banda-pret-lung::before { content: "\2014\00a0"; }

/* Sclipirea: o dunga de lumina galbena traverseaza fasia la fiecare 5s.
   E `transform` pe un pseudo-element absolut, deci nu recalculeaza layoutul
   si nu misca nimic din loc. Fundalul negru face lumina vizibila fara sa
   tipe — pe verde deschis, aceeasi animatie parea reclama de sarbatori. */
.banda-pret::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 34%; pointer-events: none; z-index: 0;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(241,173,0,.00) 15%,
              rgba(241,173,0,.16) 50%,
              rgba(241,173,0,.00) 85%,
              transparent 100%);
  transform: translateX(-120%);
  animation: banda-sclipire 5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes banda-sclipire {
  0%       { transform: translateX(-120%); }
  55%, 100% { transform: translateX(400%); }
}

/* Iconita pulseaza discret, in acelasi ritm cu sclipirea. */
.banda-pret-ico {
  flex: none; width: 18px; height: 18px;
  fill: none; stroke: var(--galben); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  animation: banda-icon 5s ease-in-out infinite;
}
@keyframes banda-icon {
  0%, 45%, 100% { transform: rotate(0deg)  scale(1); }
  52%           { transform: rotate(-10deg) scale(1.14); }
}

/* ---------- 44b. SEMNALIZAREA PRETULUI MIC ---------- */
/* Trei locuri, trei informatii DIFERITE, ca sa nu se repete aceeasi cifra:
     - panglica de pe card ...... procentul  (grila, unde e loc doar de-o cifra)
     - eticheta de langa pret ... procentul + suma (pagina produsului, e loc)
     - randul din cos ........... totalul pe comanda (momentul deciziei)
   Toate se calculeaza cu `economie()` din exact preturile afisate alaturi. */

/* --- panglica din coltul cardului --- */
.panglica {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 9px;
  border-radius: 3px;
  background: var(--negru); color: var(--galben);
  font-family: var(--f-titlu);
  font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--umbra-1);
  pointer-events: none;
}

/* --- eticheta de langa pretul taiat (pagina de produs) --- */
.pret-rand-vechi { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.eticheta-economie {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 8px; border-radius: 3px;
  background: var(--galben-slab);
  border: 1px solid rgba(241,173,0,.5);
  font-size: 12.5px; color: var(--negru-700);
  line-height: 1.5;
}
.eticheta-economie strong {
  font-family: var(--f-titlu); font-weight: 800; font-size: 13.5px;
  color: var(--pret-inchis); font-variant-numeric: tabular-nums;
}

/* --- randul de total economisit din cos si din finalizare --- */
.sumar-economie {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 12px 0 0; padding: 11px 13px;
  border-radius: var(--r);
  background: var(--galben-slab);
  border: 1px solid rgba(241,173,0,.45);
  font-size: 13.5px; line-height: 1.45; color: var(--negru-700);
}
.sumar-economie .ic {
  flex: none; width: 17px; height: 17px; margin-top: 1px;
  fill: none; stroke: var(--galben-tare); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.sumar-economie strong { color: var(--pret-inchis); font-weight: 800; }

/* ---------- 44c. SERIA DE SASIU LA CHECKOUT ---------- */
.ck-masina { padding: 12px 0; border-top: 1px solid var(--linie); }
.ck-masina:first-of-type { border-top: 0; padding-top: 4px; }
.ck-masina-nume {
  display: flex; align-items: center; gap: 8px; margin-bottom: 9px;
  font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px; color: var(--text);
}
.ck-masina-nume .ic {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: var(--galben-tare); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ck-masina-nume em {
  font-style: normal; font-weight: 500; color: var(--text-slab);
  padding: 2px 7px; border-radius: 3px; background: var(--fundal-alt);
}

/* ---------- 44d. ALEGEREA DATELOR SALVATE (checkout) ---------- */
.alege-salvate { display: grid; gap: 8px; margin: 0 0 16px; }
.salvat {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--r);
  background: var(--card);
  transition: border-color .15s, background .15s;
}
.salvat:hover { border-color: var(--linie-tare); background: var(--fundal); }
.salvat:has(input:checked) { border-color: var(--galben); background: var(--galben-slab); }
.salvat:has(input:focus-visible) { outline: 2px solid var(--galben-tare); outline-offset: 2px; }
.salvat input { flex: none; margin-top: 3px; accent-color: var(--galben-tare); }
.salvat-corp { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.salvat-corp strong { font-size: 14.5px; font-weight: 600; color: var(--text); }
.salvat-corp .t-mic { color: var(--text-slab); }
.salvat-eticheta {
  flex: none; align-self: center; font-style: normal;
  padding: 2px 8px; border-radius: 3px;
  background: var(--negru); color: var(--galben);
  font-family: var(--f-titlu); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.salvat--noua .salvat-corp strong { color: var(--pret-inchis); }
/* Grupul de campuri noi, cand e vizibil: usor retras, ca sa se vada ca tine
   de optiunea bifata deasupra. */
.camp-grup-nou:not([hidden]) {
  padding-left: 13px; border-left: 3px solid var(--galben-slab);
}
@media (max-width: 640px) {
  .camp-grup-nou:not([hidden]) { padding-left: 0; border-left: 0; }
  .salvat-eticheta { align-self: flex-start; }
}

/* ---------- 45. RECENZII DE PRODUS ---------- */
.stele { display: inline-flex; gap: 1px; white-space: nowrap; }
.stea { color: var(--linie-tare); font-size: 15px; line-height: 1; }
.stea.este-plina { color: var(--galben); }

.rec-cap { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.rec-sumar { display: inline-flex; align-items: center; gap: 9px; }
.rec-nota { font-family: var(--f-titlu); font-weight: 800; font-size: 26px; line-height: 1; }

.rec-lista { display: grid; gap: 12px; margin: 4px 0 22px; }
.rec-item { border: 1px solid var(--linie); border-radius: var(--r); padding: 13px 15px; background: var(--fundal-alt); }
.rec-item-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-item-cap strong { font-family: var(--f-titlu); font-size: 14.5px; }
.rec-item-titlu { font-weight: 600; margin-top: 5px; }
.rec-item p { margin: 5px 0 0; font-size: 14px; color: var(--negru-600); line-height: 1.6; }
.rec-poze { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.rec-poze img { width: 68px; height: 68px; object-fit: cover; border-radius: var(--r-mic); border: 1px solid var(--linie); }

.rec-form-titlu { font-size: 17px; margin: 22px 0 6px; }
.rec-form { margin-top: 12px; }
.rec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Stelele de ales: radio-urile sunt in ordine inversa (5 -> 1) in HTML, ca `~`
   sa poata colora stelele DIN STANGA celei alese. Fara inversare, CSS n-are cum
   sa ajunga inapoi la fratii anteriori. */
.rec-alege-stele { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-bottom: 14px; }
.rec-alege-stele input { position: absolute; opacity: 0; width: 0; height: 0; }
.rec-alege-stele label { font-size: 27px; line-height: 1; color: var(--linie-tare); cursor: pointer; transition: color .12s; }
.rec-alege-stele input:checked ~ label,
.rec-alege-stele label:hover,
.rec-alege-stele label:hover ~ label { color: var(--galben); }
.rec-alege-stele input:focus-visible + label { outline: 2px solid var(--galben-tare); outline-offset: 2px; }

/* ---------- 46. CERERE DE RETUR ---------- */
.ret-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ret-aside { display: grid; gap: 14px; }
.ret-form h2 { font-size: 18px; margin: 22px 0 10px; }
.ret-form h2:first-of-type { margin-top: 0; }

/* campul-capcana: scos din flux, invizibil, dar nu prin display:none singur */
.ret-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ret-linii { display: grid; gap: 10px; }
.ret-linie {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 108px 34px;
  gap: 10px; align-items: end;
  padding: 12px; border: 1px solid var(--linie); border-radius: var(--r); background: var(--fundal-alt);
}
.ret-linie .camp { margin: 0; }
.ret-linie .camp-mesaj { grid-column: 1 / -1; }
.ret-x {
  width: 34px; height: 40px; border: 1px solid var(--linie-tare); border-radius: var(--r);
  background: #fff; color: var(--gri-500); font-size: 19px; line-height: 1;
}
.ret-x:hover { border-color: var(--alarma); color: var(--alarma); }

.ret-pasi { list-style: none; counter-reset: pas; margin: 0; padding: 0; display: grid; gap: 14px; }
.ret-pasi li { counter-increment: pas; position: relative; padding-left: 38px; font-size: 13.5px; color: var(--text-slab); }
.ret-pasi li::before {
  content: counter(pas); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--galben); color: var(--pe-galben);
  font-family: var(--f-titlu); font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.ret-pasi strong { display: block; color: var(--negru); font-family: var(--f-titlu); font-size: 14.5px; margin-bottom: 2px; }
.ret-box--lege { border-left: 4px solid var(--galben); }

.ret-succes { max-width: 620px; margin: 0 auto; text-align: center; padding: 12px 0 8px; }
.ret-succes-ico {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--stoc-slab); display: flex; align-items: center; justify-content: center;
}
.ret-succes-ico svg { width: 30px; height: 30px; fill: none; stroke: #0B6A36; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ret-nr {
  background: var(--galben-slab); border: 1px solid #EBD9A8; border-radius: var(--r-mare);
  padding: 14px 18px; margin: 16px 0;
}
.ret-nr span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gri-500); }
.ret-nr strong { font-family: var(--f-titlu); font-size: 19px; word-break: break-all; }
.ret-atentie { color: var(--alarma); }
.ret-actiuni { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- 45. BARA DE FILTRE PE LISTA DE PIESE ---------- */
.lista-bara {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px; padding: 13px 15px;
  background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-mare);
  box-shadow: var(--tus-fin);
}
.lista-filtre { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; min-width: 0; }
.lista-camp { display: grid; gap: 4px; min-width: 0; }
.lista-camp > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gri-500);
}
.lista-camp select {
  height: 40px; max-width: 100%; padding: 0 32px 0 11px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7480' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 15px;
  font-size: 14px; color: var(--negru); appearance: none; cursor: pointer;
}
.lista-camp select:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }

.lista-aplica[hidden] { display: none; }
.lista-rezumat { font-size: 13.5px; color: var(--text-slab); white-space: nowrap; }
.lista-rezumat strong { font-family: var(--f-titlu); font-size: 16px; color: var(--negru); }
.lista-reset {
  display: inline-block; margin-left: 10px; padding: 4px 11px; border-radius: 999px;
  background: var(--galben-slab); border: 1px solid #EBD9A8;
  font-size: 12.5px; font-weight: 600; color: var(--galben-tare);
}
.lista-reset:hover { background: var(--galben); color: var(--pe-galben); text-decoration: none; }

/* ---------- 45. PAGINA DE REZULTATE ---------- */
.cauta-mare { display: flex; gap: 10px; margin: 16px 0 6px; max-width: 620px; flex-wrap: wrap; min-width: 0; }
.cauta-mare input {
  flex: 1 1 260px; min-width: 0; height: 48px; padding: 0 15px;
  border: 1px solid var(--linie-tare); border-radius: var(--r);
  font-size: 15.5px; background: #fff; font-variant-numeric: tabular-nums;
}
.cauta-mare input:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }
.cauta-mare .btn { height: 48px; }

.cauta-nr { margin-top: 10px; }
.cauta-corectat {
  margin: 10px 0 0; padding: 10px 14px; border-radius: var(--r);
  background: var(--galben-slab); border: 1px solid #EBD9A8; font-size: 14px;
}
.cap-numar {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: var(--fundal-alt); border: 1px solid var(--linie-tare);
  font-family: var(--f-text); font-size: 13px; font-weight: 600; color: var(--text-slab);
}

/* ---------- 46. SUGESTII DE CAUTARE (dropdown header) ---------- */
.cautare { position: relative; }
.cautare-sug {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 120;
  background: var(--card); border: 1px solid var(--linie-tare); border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(13,13,13,.18);
  max-height: 62vh; overflow-y: auto; overscroll-behavior: contain;
}
.cautare-sug[hidden] { display: none; }

.sug {
  display: flex; align-items: center; gap: 11px; padding: 9px 13px;
  border-bottom: 1px solid var(--linie); color: var(--negru);
}
.sug:last-of-type { border-bottom: 0; }
.sug:hover, .sug.este-activ { background: var(--galben-slab); text-decoration: none; }
.sug-tip {
  flex: none; min-width: 62px; text-align: center;
  padding: 3px 7px; border-radius: var(--r-mic);
  background: var(--negru); color: var(--galben);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.sug-txt {
  flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sug-txt b { font-weight: 700; color: var(--galben-tare); }
.sug-pret {
  flex: none; font-family: var(--f-titlu); font-weight: 700; font-size: 13.5px;
  color: var(--pret); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.sug-toate {
  display: block; width: 100%; padding: 11px 13px; border: 0;
  border-top: 1px solid var(--linie-tare); background: var(--fundal-alt);
  font-family: var(--f-titlu); font-weight: 700; font-size: 13px; color: var(--negru);
  text-align: left;
}
.sug-toate:hover { background: var(--galben-slab); }

/* ---------- 47. DESCARCA FACTURA ---------- */
.fact-cutie { max-width: 720px; }
.doar-cititor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fact-cutie code { background: var(--fundal-alt); border: 1px solid var(--linie); border-radius: var(--r-mic);
  padding: 1px 6px; font-size: 13px; white-space: nowrap; }
.fact-form { display: flex; gap: 10px; margin: 20px 0 16px; flex-wrap: wrap; }
.fact-form input {
  flex: 1 1 260px; min-width: 0; height: 46px; padding: 0 14px;
  border: 1px solid var(--linie-tare); border-radius: var(--r); font-size: 15px; background: #fff;
}
.fact-form input:focus { outline: none; border-color: var(--galben); box-shadow: 0 0 0 3px var(--galben-slab); }
.fact-form .btn { height: 46px; }

.fact-gasit { border: 1px solid #EBD9A8; background: var(--galben-slab); border-radius: var(--r-mare); padding: 16px 18px; }
.fact-gasit-cap { display: flex; align-items: center; gap: 12px; }
.fact-gasit-cap svg { width: 26px; height: 26px; stroke: var(--galben-tare); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.fact-gasit-cap strong { display: block; font-family: var(--f-titlu); font-size: 16px; }
.fact-gasit-cap span { font-size: 13px; color: var(--text-slab); }
.fact-gasit-btn { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }

.fact-comenzi { margin-top: 26px; border-top: 1px solid var(--linie); padding-top: 20px; }
.fact-comenzi ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.fact-comenzi li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--linie); border-radius: var(--r); padding: 10px 13px; background: var(--card);
}
.fact-comenzi strong { display: block; font-size: 14px; }
.fact-comenzi em { font-style: normal; font-size: 12.5px; color: var(--text-slab); }
.fact-nota { margin-top: 22px; }

/* ---------- 48. STARILE COMENZII ----------
   Cele 5 grupe in care se aduna zecile de statusuri din ERP. Fiecare are alta
   culoare, ca sa se citeasca dintr-o privire in lista de comenzi. */
.stare {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--f-titlu); font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.stare::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.stare--noua         { background: var(--galben-slab); color: var(--galben-tare); border-color: #EBD9A8; }
.stare--lucru        { background: var(--fundal-alt);  color: var(--negru-600);   border-color: var(--linie-tare); }
.stare--procesata    { background: var(--negru);       color: var(--galben); }
.stare--expediata    { background: var(--stoc-slab);   color: #0B6A36; border-color: #BFE4CE; }
.stare--neconfirmata { background: var(--fundal-alt);  color: var(--gri-500);     border-color: var(--linie); }

/* ---------- 49. DETALIU COMANDA (in cont) ---------- */
.inapoi-link { display: inline-block; margin-bottom: 12px; font-size: 13.5px; color: var(--text-slab); }
.inapoi-link:hover { color: var(--negru); }

.cmd-cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

.cmd-factura {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 15px; border-radius: var(--r);
  background: var(--galben-slab); border: 1px solid #EBD9A8;
}
.cmd-factura > span:first-child { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.cmd-factura svg { width: 20px; height: 20px; stroke: var(--galben-tare); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.cmd-factura-btn { display: flex; gap: 8px; flex-wrap: wrap; }

.cmd-sumar { border-top: 1px solid var(--linie); padding: 12px 16px; display: grid; gap: 6px; background: var(--fundal-alt); }
.cmd-sumar > div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.cmd-sumar span { color: var(--text-slab); }
.cmd-sumar b { font-variant-numeric: tabular-nums; }
.cmd-sumar-total { border-top: 1px solid var(--linie); padding-top: 8px; margin-top: 2px; }
.cmd-sumar-total span { color: var(--negru); font-weight: 600; }
.cmd-sumar-total b { font-family: var(--f-titlu); font-size: 20px; color: var(--pret); }

.cmd-doua { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.cmd-adresa { margin: 0; font-size: 14px; line-height: 1.65; color: var(--negru-600); }
.cmd-link { font-weight: 700; color: var(--negru); }
.cmd-link:hover { color: var(--galben-tare); }
.tabel-clic tbody tr:hover { background: var(--galben-slab); }

/* ---------- 50. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .selector-pasi { grid-template-columns: repeat(2, 1fr); }
  .subsol-principal { grid-template-columns: 1fr 1fr; gap: 28px; }
}

@media (max-width: 860px) {
  :root { --gut: 15px; }
  .doar-mobil { display: block; }
  .doar-desktop { display: none !important; }

  .bara-sus { display: none; }
  .antet-principal { height: auto; padding: 10px 0; flex-wrap: wrap; gap: 10px; }
  .cautare { order: 3; flex-basis: 100%; max-width: none; }
  .antet-actiuni { margin-left: auto; }
  .actiune-text { display: none; }
  .actiune { padding: 8px; }
  .contor { left: 20px; top: 1px; }

  /* sigla se strange daca e nevoie, ca sa nu impinga actiunile pe alt rand */
  .sigla { flex-shrink: 1; min-width: 0; }
  .sigla-img, .sigla-svg { height: 26px; max-width: 100%; }
  .sigla-img { object-fit: contain; object-position: left center; }

  /* bara orizontala nu incape pe mobil — o inlocuim complet cu sertarul */
  .nav-categorii { display: none; }
  .burger { display: flex; }

  .lista-bara { flex-direction: column; align-items: stretch; }
  .lista-filtre { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  /* trei selectoare pe doua coloane: al treilea ar ramane singur pe jumatate
     de rand, deci il lasam pe toata latimea */
  .lista-filtre > .lista-camp:last-of-type:nth-child(odd) { grid-column: 1 / -1; }
  .lista-camp select { width: 100%; }
  .lista-rezumat { white-space: normal; }

  .cauta-mare .btn { width: 100%; }
  .cautare-sug { max-height: 56vh; }
  .sug-tip { display: none; }
  .sug-txt { white-space: normal; }

  /* TABELE DE DATE -> CARDURI.
     Un tabel cu sase coloane nu incape pe un ecran de telefon, iar ID-ul de comanda
     are singur 27 de caractere. Fiecare rand devine un card, iar fiecare valoare isi
     poarta eticheta din `data-eticheta`. */
  .tabel-date, .tabel-date tbody, .tabel-date tr, .tabel-date td { display: block; width: 100%; }
  .tabel-date thead { display: none; }
  .tabel-date tbody tr {
    border: 1px solid var(--linie); border-radius: var(--r); margin-bottom: 10px;
    padding: 12px 14px; background: var(--card);
  }
  .tabel-date tbody tr:last-child { margin-bottom: 0; }
  .tabel-date td {
    border: 0; padding: 5px 0; font-size: 14px;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  .tabel-date td[data-eticheta]::before {
    content: attr(data-eticheta);
    flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--gri-500);
  }
  /* prima celula e capul cardului: pe toata latimea, fara eticheta */
  .tabel-date td.celula-titlu {
    display: block; padding: 0 0 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--linie);
    font-family: var(--f-titlu); font-weight: 700; font-size: 14.5px;
    overflow-wrap: anywhere;
  }
  .tabel-date td.celula-actiune { display: block; padding-top: 10px; }
  .tabel-date td.celula-actiune .btn { width: 100%; }
  .tabel-clic tbody tr:hover { background: var(--card); }
  /* panoul care ingloba tabelul nu mai are nevoie de chenar propriu */
  .panou > .tabel-date { padding: 0; }

  /* Pe telefon nu incape o fraza intreaga pe un rand la 12,5px. Scurtam textul
     si lasam din link doar sageata — mesajul ramane, banda ramane de un rand. */
  /* Pe mobil ramane doar afirmatia, fara coada explicativa: pe 360px latime
     ar trece pe doua randuri si ar dubla inaltimea fasiei. */
  .banda-pret-text { min-height: 36px; padding: 7px 0; gap: 8px; font-size: 13px; }
  .banda-pret-text strong { font-size: 13.5px; letter-spacing: .05em; }
  .banda-pret-ico { width: 16px; height: 16px; }
  .banda-pret-lung { display: none; }

  .ret-layout { grid-template-columns: 1fr; }
  .ret-linie { grid-template-columns: 1fr 1fr; }
  .ret-linie .camp-cant { grid-column: 1; }
  .ret-x { grid-column: 2; justify-self: end; }

  .cmd-doua { grid-template-columns: 1fr; }
  .fact-form .btn { width: 100%; }
  .fact-gasit-btn .btn { flex: 1; }
  .cmd-factura { flex-direction: column; align-items: stretch; }
  .cmd-factura-btn .btn { flex: 1; }

  .masina-card { flex-wrap: wrap; gap: 10px 12px; padding: 11px 13px; }
  .masina-actiuni { margin-left: 0; width: 100%; }
  .masina-actiuni .btn { flex: 1; }

  .selector-pasi { grid-template-columns: 1fr; gap: 10px; padding: 15px; }
  .selector-cap { padding: 15px 15px 0; }
  .selector-jos { padding: 0 15px 16px; }

  .hero { padding: 18px 0 22px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 18px; }
  .hero-argumente li { font-size: 13px; }
  .cauta-cod { padding: 18px; gap: 16px; }
  .cauta-cod-form { max-width: none; flex-wrap: wrap; gap: 10px; }
  .cauta-cod-form input { flex: 1 1 100%; width: 100%; }
  .cauta-cod-form .btn { flex: 1 1 100%; }
  .grila-marci { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
  .marca-card { min-height: 50px; font-size: 13px; }

  .grila-piese { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .piesa-corp { padding: 10px 11px 12px; }
  .pret-curent { font-size: 20px; }
  /* Cardul are 158px, deci ~132px utili. Cu pretul marit, un pret de patru
     cifre plus butonul nu mai incap pe acelasi rand, iar butonul e
     `flex-shrink: 0` — fara asta textul ar iesi din card. Randul se rupe doar
     cand chiar nu incape; la preturile de doua-trei cifre nu se schimba nimic. */
  .piesa-jos { flex-wrap: wrap; }
  .produs-adauga--card { margin-left: auto; }

  .cat-continut { columns: 1; }
  .produs { grid-template-columns: 1fr; gap: 22px; }
  .produs-galerie { position: static; }

  .cos-layout, .checkout-layout, .cont-layout, .contact-layout,
  .oferta-layout { grid-template-columns: 1fr; }
  .oferta-lateral { position: static; }
  .cos-sumar { position: static; }
  .cos-linie { grid-template-columns: 66px minmax(0, 1fr) 34px; gap: 12px; row-gap: 11px; padding: 12px; }
  .cos-poza { grid-row: 1; grid-column: 1; width: 66px; height: 58px; align-self: start; }
  .cos-info { grid-row: 1; grid-column: 2; }
  .cos-sterge { grid-row: 1; grid-column: 3; align-self: start; }
  /* randul 2 e o bara proprie: cantitatea la stanga, totalul liniei la dreapta */
  .cos-cantitate { grid-row: 2; grid-column: 1; }
  .cos-cantitate input { width: 100%; height: 38px; }
  .cos-subtotal { grid-row: 2; grid-column: 2 / 4; text-align: right; align-self: center; font-size: 18.5px; }
  .camp-rand { grid-template-columns: 1fr; gap: 0; }
  .cont-meniu { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .cont-meniu::-webkit-scrollbar { display: none; }
  .cont-meniu a { white-space: nowrap; }
  .modal-cos { padding: 20px 18px 18px; }
  .modal-butoane { grid-template-columns: 1fr; }
  .modal-masina { padding: 20px 16px 22px; }
  .confirm-butoane { grid-template-columns: 1fr; }
  .modal-masina .selector-pasi { grid-template-columns: 1fr; }
  .checkout fieldset { padding: 16px 17px; }

  /* mega-meniu: panoul devine o singura coloana, derulabila */
  .mega-trigger { padding: 0 13px; font-size: 13.5px; }
  .mega-trigger span { display: inline; }
  .mega-interior { grid-template-columns: 1fr; max-height: 78vh; }

  /* filtrele devin panou glisant din stanga */
  .listare-layout { grid-template-columns: 1fr; }
  .filtre-buton { display: inline-flex; }
  .listare-sortare { margin-left: 0; width: 100%; }
  .filtre-lateral {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 88vw;
    z-index: 90; border-radius: 0; overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s;
  }
  body.filtre-deschise .filtre-lateral { transform: none; }
  body.filtre-deschise .filtre-fundal {
    display: block; position: fixed; inset: 0; z-index: 80; background: rgba(15,19,23,.5);
  }
  .filtre-inchide { display: block; }


  .pret-curent--mare { font-size: 31px; }
  .masina-specs { min-width: 0; width: 100%; }
  .filtru-camp { min-width: 0; width: 100%; }
  .subsol-principal { grid-template-columns: 1fr; gap: 24px; padding: 30px 0 24px; }
  .sectiune { padding: 24px 0; }
}

/* ---------- 51. TIPARIRE ---------- */
@media print {
  .antet, .bara-sus, .nav-categorii, .subsol, .selector,
  .sertar, .sertar-fundal, .burger { display: none; }
  body { background: #fff; }
}