/* VITRINA SDG — stilul paginilor publice (refacut 22 oct 2026, design D2 dupa design_brief.md).
   Un singur accent: albastrul siglei (#007AFF; butoanele pline #0066D6 pentru contrast AA) + „ink” (negrul siglei) + alb.
   Verde DOAR la WhatsApp si la starea „In stoc”; rosu doar la „Vanduta” si erori. Ritm de 4 px, raze 8/12/16/24/999.
   Numele vechi de variabile (--navy, --albastru, --linie…) raman ca alias pentru catalog.css / cauta.css / stilurile inline. */
:root{
  --ink:#0B1220;--text:#1E2937;--muted:#5B6676;--subtle:#6B7686;       /* subtle: 4,6:1 pe alb (placeholder-ele sunt text, AA) */
  --bg:#fff;--bg-soft:#F5F7FA;--line:#E3E8EF;--line-strong:#CBD3DE;
  --blue-50:#EAF3FF;--blue-100:#D3E6FF;--blue-500:#007AFF;--blue-600:#0066D6;--blue-700:#0050B3;--blue-800:#003F8F;
  --spark:#FFB020;--wa:#25D366;--wa-hover:#1EBE5A;--wa-ink:#0B1220;
  --ok:#0B7A3E;--ok-bg:#E6F5EC;--warn:#9A5B00;--warn-bg:#FFF3D6;--err:#C62828;--err-bg:#FDECEC;--sale:#D92D20;
  --shadow-xs:0 1px 2px rgba(11,18,32,.06);--shadow-sm:0 2px 8px rgba(11,18,32,.07);--shadow-md:0 8px 24px rgba(11,18,32,.10);--shadow-lg:0 20px 48px rgba(11,18,32,.16);
  --ring:0 0 0 3px rgba(0,122,255,.30);
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;--r-pill:999px;
  --container:1240px;--gutter:24px;--cap-h:77px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --navy:var(--ink);--navy2:#1B2638;--albastru:var(--blue-600);--albastru2:var(--blue-700);--albastru3:var(--blue-500);--albastru-viu:var(--blue-500);
  --accent:var(--blue-600);--accent2:var(--blue-500);--accent-umbra:rgba(0,102,214,.25);--verde:var(--ok);--verde-text:var(--ok);
  --mut:var(--muted);--linie:var(--line);--fundal:var(--bg-soft);--alb:#fff;--bleu:var(--blue-50);--bleu2:var(--blue-100);
  --raza:16px;--umbra:var(--shadow-xs);--umbra2:var(--shadow-md);
}
@media (max-width:1023px){:root{--cap-h:108px}}                       /* antetul lipit pe telefon: 44 + 52 + 10 + 1 */
@media (max-width:767px){:root{--gutter:16px}}

/* ── baza ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--cap-h) + 12px)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
/* 4 nov (Lighthouse, accesibilitate): linkurile din TEXT se vad si fara culoare — subliniate. Prioritate minima (ca `a{}`): orice regula cu clasa
   castiga, deci butoanele, cardurile, cipurile, meniul, subsolul, firul si listele de categorii raman ca pana acum */
:where(p,li,.text,.continut) a:not(:where(.btn,.chip,.card,.tile,.pg)){text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.compat a,.meniu a,.mega a,.subsol a,.fir a,nav a,.cap a,.chips a,.incredere a,.garantii a,.cs-site a,.grup-cat a,.sug,.top a{text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--ink);margin:0;line-height:1.25;letter-spacing:-.01em}
h1{font-size:clamp(26px,2.8vw,36px);font-weight:800;line-height:1.2;letter-spacing:-.015em;margin-bottom:12px}
h2{font-size:clamp(20px,2vw,26px);font-weight:800;margin-bottom:8px}
h3{font-size:18px;font-weight:700}
p{margin:0 0 12px}
::selection{background:var(--blue-100)}
:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.c{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sari{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700}
.sari:focus{left:8px}
main:focus,#continut:focus{outline:none}                  /* 7 nov (D11-10): ancora „Sari la conținut” e focusabila (tabindex=-1), fara contur */
.nota{color:var(--muted);font-size:14px}
.nota.intro{margin:6px 0 0;max-width:680px;font-size:15px;line-height:1.55}
.ascuns{display:none}
.eticheta{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-600);margin:0 0 6px}
.sectiune{margin-top:48px}
.sectiune>h2{margin-bottom:4px}
.cap-sectiune{display:flex;justify-content:space-between;align-items:flex-end;gap:8px 24px;flex-wrap:wrap;margin-bottom:20px}
.cap-sectiune h2{margin:0}
.cap-sectiune>a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:15px}
.cap-sectiune>a .i{width:18px;height:18px}

/* ── bara de sus ── */
.top{background:var(--ink);color:#C3CCD9;font-size:13px}
.top .c{display:flex;align-items:center;gap:24px;min-height:36px}
.top a{color:#fff;font-weight:600}
.top .i{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:#7DB4FF}
.top-prog{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-width:0}
/* 2 nov: dupa 17:00 starea („Închis acum · deschidem mâine la 08:30”) e mai lunga; se taie ea cu „…”, telefonul ramane intreg (nu mai iese din ecran) */
.top-prog>[data-program]{min-width:0;overflow:hidden;text-overflow:ellipsis}
.punct{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--subtle);flex:none}
.deschis .punct,.punct.on{background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.22)}
.top-livr{margin-left:auto;white-space:nowrap}
.top-tel{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;flex:none}
.top-wa{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;border:1px solid rgba(37,211,102,.5);background:rgba(37,211,102,.12)}
.top-wa .i{color:var(--wa)}

/* ── antetul ── */
.cap{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}      /* 6 nov: opac si pe calculator (prin antet se citea textul de sub el) */
/* 2 nov: pe telefon / tableta antetul lipit e alb opac — semi-transparent, lasa sa se vada pete colorate si texte („Vândută Vândută”) de dedesubt */
@media (max-width:1023px){.cap{background:#fff;backdrop-filter:none}}
.cap .c{display:flex;align-items:center;gap:24px;min-height:76px}
.logo{flex:none;display:flex;align-items:center}
.logo img{height:32px;width:auto}
.burger,.meniu-inchide{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink);cursor:pointer;flex:none}
.burger:hover,.meniu-inchide:hover{background:var(--bg-soft)}
.burger .i,.meniu-inchide .i{width:24px;height:24px}
.cauta{position:relative;flex:1;display:flex;align-items:center;max-width:640px;height:52px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:4px 4px 4px 18px;transition:border-color .15s,box-shadow .15s;min-width:0}
.cauta:focus-within{border-color:var(--blue-600);box-shadow:var(--ring)}
.cauta>.i{color:var(--muted)}
.cauta input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;padding:0 12px;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.cauta input::placeholder{color:var(--subtle);font-size:15px}
.cauta button{flex:none;height:100%;border:0;border-radius:999px;background:var(--blue-600);color:#fff;font-weight:700;font-size:15px;padding:0 22px;cursor:pointer}
.cauta button:hover{background:var(--blue-700)}
.cap .cauta{transition:border-color .15s,box-shadow .15s,opacity .2s,visibility .2s}
body.acasa:not(.cauta-sus) .cap .cauta{visibility:hidden;opacity:0}      /* prima pagina: cat timp cautarea mare din erou e pe ecran (index.html pune body.cauta-sus la derulare) */
.unelte{display:flex;align-items:center;gap:2px;margin-left:auto}
.ut{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 12px;border-radius:12px;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap}
.ut:hover{background:var(--bg-soft);text-decoration:none}
.ut .i{width:22px;height:22px}
.ut-tel{display:none}
.fav-nr{position:absolute;top:5px;left:25px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--blue-600);color:#fff;font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border:2px solid #fff;line-height:1}
@media (max-width:1439px){.ut.fav-link .txt{display:none}}

/* ── meniul principal (desktop: un rand; telefon: sertar) ── */
.meniu{background:#fff;border-bottom:1px solid var(--line)}
.meniu .c{display:flex;align-items:center;gap:2px;min-height:52px}
.meniu .c>a,.meniu-cat{display:inline-flex;align-items:center;gap:8px;align-self:stretch}
.meniu .c>a{padding:0 14px;color:var(--ink);font-weight:600;font-size:15px;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.meniu .c>a:hover{color:var(--blue-600);text-decoration:none}
.meniu .c>a.on{color:var(--blue-600);border-bottom-color:var(--blue-600)}
.meniu .masini-link .i{color:var(--blue-600)}
.meniu-cat{position:relative;margin-right:10px}
.mega-btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 16px;border-radius:12px;background:var(--blue-600);color:#fff;font-weight:700;font-size:15px;white-space:nowrap}
.mega-btn:hover{background:var(--blue-700);text-decoration:none}
.mega-btn .i:last-child{width:16px;height:16px;opacity:.85}
.meniu .c>.mega-btn{align-self:center;margin-right:10px}
.mega{position:absolute;top:100%;left:0;width:min(900px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:12px 16px 16px;display:none;z-index:50}
.meniu-cat:hover .mega,.meniu-cat:focus-within .mega{display:block}
.mega-cap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 8px 12px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mega-cap b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mega-tot{font-weight:700;font-size:14px}
.mega-grila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px}
.mega a.mc{display:flex;gap:12px;align-items:center;padding:8px;border-radius:12px;color:var(--ink);font-weight:600;font-size:14px;line-height:1.3}
.mega a.mc img{width:48px;height:48px;object-fit:cover;border-radius:10px;background:var(--bg-soft);flex:none}
.mega a.mc small{display:block;color:var(--muted);font-weight:500;font-size:12.5px}
.mega a.mc:hover{background:var(--bg-soft);text-decoration:none}
.meniu-dreapta{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.meniu-dreapta .i{width:18px;height:18px;color:var(--ok)}
.meniu-extra{display:none}

/* ── firul (breadcrumb) ── */
.fir{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:18px 0 10px;font-size:13px;color:var(--muted)}
.fir a{color:var(--muted)}
.fir a:hover{color:var(--blue-600)}
.fir span,.fir b{color:var(--ink);font-weight:600}
.fir .sep{font-style:normal;color:var(--muted)}

/* ── butoane ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:15px;line-height:1.2;text-align:center;cursor:pointer;text-decoration:none!important;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn .i{width:20px;height:20px}
.btn.cumpara,.btn.alb,.btn.similare{background:var(--blue-600);color:#fff}
.btn.cumpara:hover,.btn.alb:hover,.btn.similare:hover{background:var(--blue-700)}
.btn.wa{background:var(--wa);color:var(--wa-ink)}
.btn.wa:hover{background:var(--wa-hover)}
.btn.suna{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn.suna:hover{border-color:var(--ink);background:var(--bg-soft)}
.btn.contur{background:#fff;color:var(--blue-600);border-color:var(--blue-600)}
.btn.contur:hover{background:var(--blue-50)}
.btn.lat{grid-column:1/-1;width:100%}
.btn.suna.on,#favBtn.on{color:#C0263D;border-color:#F1B6C0;background:#FFF5F7}
.btn.suna.on .i,#favBtn.on .i{fill:currentColor}
.butoane-rand{display:flex;flex-wrap:wrap;gap:10px}

/* ── campuri ── */
select,.filtru,.form input,.form textarea,.form select{width:100%;min-width:0;min-height:48px;border:1px solid var(--line-strong);border-radius:12px;background-color:#fff;color:var(--ink);font-size:16px;padding:0 14px;transition:border-color .15s,box-shadow .15s}
select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6676' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
select:disabled{background-color:var(--bg-soft);color:#5F6B7C;cursor:not-allowed;border-color:var(--line)}      /* 5:1 pe fundalul gri: pasul inca inactiv se citeste */
select:focus,.filtru:focus,.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--blue-600);box-shadow:var(--ring)}
input[type=search]{-webkit-appearance:none;appearance:none}
.filtru{margin-top:16px}
.filtru,.form input{text-overflow:ellipsis}                       /* placeholder-ul lung se incheie cu „…”, nu la mijlocul unui cuvant */

/* ── chips + coduri ── */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:13.5px;font-weight:600;line-height:1.3;transition:background-color .15s,border-color .15s,color .15s}
a.chip:hover,button.chip:hover{border-color:var(--blue-100);background:var(--blue-50);color:var(--blue-700);text-decoration:none}
span.chip{background:var(--bg-soft);border-color:transparent}
button.chip{cursor:pointer}
.chip small{color:var(--muted);font-weight:500;font-size:12px}
.chips-multe:not(.deschis) .chip:nth-child(n+13):not(#chipsTot){display:none}
.chips-multe.deschis #chipsTot{display:none}
/* 2 nov: „+ încă N” e un cip contur (negru plin parea cel ales); subcategoria curenta e prima, plina */
#chipsTot{background:#fff;color:var(--blue-700);border-color:var(--blue-100);border-style:dashed}
a.chip[aria-current]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
a.chip[aria-current] small{color:#fff}
.coduri{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.coduri:empty{display:none}
.cod{display:inline-flex;flex-direction:column;gap:2px;max-width:100%;padding:7px 12px;border-radius:10px;line-height:1.2}
.cod small{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.cod b{font-family:var(--mono);font-size:14px;letter-spacing:.02em;overflow-wrap:anywhere}
.cod.oem{background:var(--ink);color:#fff}
.cod.sdg{background:var(--blue-50);color:var(--blue-700)}

/* ── grila de carduri ── */
.grila{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:16px}
.card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--text);box-shadow:var(--shadow-xs);transition:border-color .16s,box-shadow .16s,transform .16s}
.card:hover{text-decoration:none;border-color:var(--blue-100);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card .img{position:relative;aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);overflow:hidden}
.card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:6px}
a.card[href^="/dezmembrari/"] .img img{object-fit:cover;padding:0}
.card .t{padding:12px 14px 0;font-size:14.5px;line-height:1.45;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:54px}
/* 2 nov: randul cu masina sub titlu — titlul se taie dupa 2 randuri, iar masina era la coada lui (la 54 % din carduri nu se vedea) */
.card .m{padding:4px 14px 0;font-size:13px;line-height:1.35;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .p{margin-top:auto;padding:10px 14px 14px;display:flex;align-items:center;justify-content:space-between;gap:6px 8px;flex-wrap:wrap}
.card .p span:empty{display:none}
.card .p b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.card .p span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);border-radius:6px;padding:2px 7px}
a.card[href^="/dezmembrari/"] .p b{font-size:16px;color:var(--blue-600)}
a.card[href^="/dezmembrari/"] .p span{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft)}
a.card[href^="/dezmembrari/"] .p span.in-curte{color:var(--ok);background:var(--ok-bg)}      /* 4 nov: verde = in curte (o poti vedea), gri = dezmembrata */
/* 4 nov: taburile „În curte acum” / „Dezmembrate” din lista masinilor si caseta „Mașina e acum la noi” din pagina masinii */
.taburi-masini{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.taburi-masini .tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;
  color:var(--ink);font-weight:700;font-size:15px;text-decoration:none}
.taburi-masini .tab small{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.taburi-masini .tab:hover{border-color:var(--blue-600);text-decoration:none}
.taburi-masini .tab[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.taburi-masini .tab[aria-current="page"] small{color:#C3CCD9}
.vizita{margin:14px 0 0;padding:12px 14px;border-radius:12px;background:var(--ok-bg);border:1px solid #BFE3CC;color:#0A4F2A;font-size:14.5px;line-height:1.5}
.vizita b{display:block;margin-bottom:2px;color:#0A4F2A}
.vizita a{color:#0A4F2A;font-weight:700}
.pret.cerere b{font-size:22px}                                 /* „Piese la cerere” (masina din curte fara piese pe site): nu e un pret */
.fav{position:absolute;top:8px;right:8px;z-index:2;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 1px 6px rgba(11,18,32,.18);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:color .15s,transform .15s}
.fav::after{content:"";position:absolute;inset:-4px}              /* zona de atingere 44 x 44 px */
.fav .i{width:19px;height:19px}
.fav:hover{color:#C0263D;transform:scale(1.06)}
.fav.on{color:#C0263D}
.fav.on .i{fill:currentColor}

/* ── pagina produsului ── */
.ingust{max-width:var(--container)}
.prod{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-areas:"gal fisa" "det fisa";gap:28px 40px;align-items:start;margin-top:4px}
.prod>.galerie{grid-area:gal}
/* 2 nov: masina fara nicio poza proprie — fara caseta gri „Fără poză” cat jumatate de ecran: fisa sta pe toata latimea, sus */
.prod.fara-galerie{grid-template-columns:minmax(0,1fr);grid-template-areas:"fisa"}
.prod.fara-galerie>.fisa{position:static;max-width:760px}
/* 2 nov: pe pagina masinii, cipurile de categorie filtreaza piesele (ui.js); cel ales e plin */
button.chip[aria-pressed="true"]{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
button.chip[aria-pressed="true"] small{color:#fff}      /* 6 nov: contrast 4,42:1 → alb */
.cat-masina{margin:20px 0 0}
a.card[href^="/dezmembrari/"] .t{min-height:0}                   /* cardul masinii: numele pe un rand, anul · motorul · #nr dedesubt (.m) */
.prod>.fisa{grid-area:fisa;position:sticky;top:calc(var(--cap-h) + 16px)}
.prod>.detalii{grid-area:det;min-width:0}
.galerie{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.mare{position:relative;aspect-ratio:4/3;background:#fff;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.mare img{width:100%;height:100%;object-fit:contain}
.mare-nr{position:absolute;left:12px;bottom:12px;padding:4px 10px;border-radius:999px;background:rgba(11,18,32,.72);color:#fff;font-size:12px;font-weight:700;pointer-events:none}
/* 2 nov: sagetile ‹ › pe poza mare (ui.js): pe calculator apar la trecerea mouse-ului, pe telefon stau mereu (si se poate glisa cu degetul) */
.mare-prev,.mare-next{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-top:-22px;padding:0 0 3px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-size:30px;line-height:1;box-shadow:0 2px 10px rgba(11,18,32,.18);cursor:pointer;opacity:0;transition:opacity .15s,background-color .15s}
.mare-prev{left:10px}
.mare-next{right:10px}
.mare:hover .mare-prev,.mare:hover .mare-next,.mare-prev:focus-visible,.mare-next:focus-visible{opacity:1}
.mare-prev:hover,.mare-next:hover{background:#fff;color:var(--blue-600)}
@media (hover:none){.mare-prev,.mare-next{opacity:.9}}   /* 5 nov: raman la 44 px si pe ecranele cu atingere (le micsoram tocmai acolo, la 40) */
/* 5 nov (analiza pe telefon): galeria pe o PISTA cu scroll-snap (ui.js §5, construita doar pe telefon) — poza urmareste degetul, cu inertie, si se
   opreste pe vecina. Regulile stau AICI, nu in @media: pista construita pe telefon tinut vertical ramane intreaga si cand il rotesti (peste 767 px) */
.mare.cu-pista{display:block}
.mare-pista{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mare-pista::-webkit-scrollbar{display:none}
.mare-pista>img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always}
.mare.cu-pista .mare-prev,.mare.cu-pista .mare-next{pointer-events:none}   /* glisarea porneste si de pe sageti; atingerea pe ele: ui.js */
.mici{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.mici::-webkit-scrollbar{display:none}                         /* 4 nov: bara de derulare gri sub miniaturi (se deruleaza cu degetul / sagetile) */
.mici button{flex:none;width:72px;height:72px;padding:0;border:2px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s}
.mici button:hover,.mici button.on{border-color:var(--blue-600)}
.mici img{width:100%;height:100%;object-fit:cover}
.fisa{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow-sm)}
.fisa h1{font-size:22px;line-height:1.36;margin:0 0 12px;overflow-wrap:anywhere;text-wrap:balance}      /* 2 nov: randuri egale, fara anul singur pe ultimul rand */
.nw,a[href^="tel:"]{white-space:nowrap}                         /* 2 nov: telefoanele, intervalele de ani si orele nu se mai rup pe doua randuri */
.pret{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 6px;padding-top:16px;border-top:1px solid var(--line)}
.pret b{font-size:34px;line-height:1.1;font-weight:800;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pret>span{font-size:13px;color:var(--muted)}
.pret b.vandut,.pret-vandut b{font-size:28px;color:var(--err)}
.pret-vandut .vanduta{display:none}
.stoc{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14px;font-weight:700;color:var(--ok)}
.stoc i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--ok-bg)}
.stoc.nu{color:var(--err)}
.stoc.nu i{box-shadow:0 0 0 3px var(--err-bg)}
/* 4 nov (recenzia vizuala): defectul declarat al piesei, la vedere langa stoc — pana acum doar in titlu si in descriere */
.defect-info{margin:-8px 0 18px;padding:10px 12px;border-radius:12px;background:#FFF7E6;border:1px solid #F2C774;color:#6B4200;font-size:14px;line-height:1.45}
.defect-info b{color:#6B4200;font-weight:700}
.butoane{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px}
.butoane .btn{padding:0 12px;min-width:0;white-space:normal;line-height:1.15}   /* revizia 2 nov: la 1024-1279 px textul WhatsApp iesea din caseta */
.butoane .btn.cumpara{grid-column:1/-1;min-height:56px;font-size:17px;box-shadow:0 8px 20px var(--accent-umbra)}
.butoane #share,.butoane #favBtn{min-height:42px;font-size:13.5px;font-weight:600;border-color:var(--line)}
.btn.similare{grid-column:1/-1}
.vanduta-box{grid-column:1/-1;background:var(--err-bg);border:1px solid #F5C2C2;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.7;color:var(--text)}
.vanduta-box a{display:inline-block;margin-right:12px;font-weight:700}
.incredere{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin:0 0 18px;padding-top:18px;border-top:1px solid var(--line)}
.incredere>div,.incredere>a{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.35}
.incredere>a{color:inherit}                                      /* 2 nov: garantia / livrarea / returul duc la conditii */
.incredere>a:hover{text-decoration:none}
.incredere>a:hover b{color:var(--blue-600)}
.incredere>a small::after{content:"\00a0›";color:var(--blue-600);font-weight:700}      /* lipita de ultimul cuvant (nu ramane singura pe rand) */
.incredere .i{width:36px;height:36px;padding:8px;border-radius:10px;background:var(--blue-50);color:var(--blue-600)}
.incredere b{display:block;font-size:13.5px;color:var(--ink)}
.incredere small{color:var(--muted);font-size:12.5px}
.vin{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:12px;padding:14px 16px}
.vin b{display:block;color:var(--ink);margin-bottom:2px}
.vin p{margin:0 0 10px;font-size:14px;color:#33465F}
.vin a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:10px;background:var(--wa);color:var(--wa-ink);font-weight:700;font-size:14px}
.vin a:hover{background:var(--wa-hover);text-decoration:none}
.detalii{display:flex;flex-direction:column;gap:20px}
.bloc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.bloc>h2{display:flex;align-items:center;gap:10px;font-size:19px;margin:0 0 14px}
.bloc>h2 .i{width:22px;height:22px;color:var(--blue-600)}
.bloc h3{font-size:15px;margin:16px 0 6px}
.bloc>p:last-child,.bloc .text>:last-child{margin-bottom:0}
.bloc ul{margin:0 0 8px;padding-left:20px}
.bloc li{margin:4px 0}
.bloc table{border-collapse:collapse;margin:0 0 10px;font-size:14px}
.bloc td,.bloc th{border:1px solid var(--line);padding:6px 10px;text-align:left}
.livrare ul{list-style:none;padding:0}
.livrare li{position:relative;padding-left:28px}
.livrare li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;border-radius:50%;background:var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B7A3E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") no-repeat center/12px}
ul.compat{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:440px;overflow:auto}
.compat li{margin:0;display:flex;align-items:center;min-height:44px;padding:8px 12px 8px 36px;border:1px solid var(--line);border-radius:10px;font-size:14px;line-height:1.35;position:relative;background:#fff}
.compat li::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230066D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center/contain}
.compat li:has(>b),.compat li[aria-current]{background:var(--blue-50);border-color:var(--blue-100)}
.compat li a{color:var(--ink);font-weight:600}
.compat li a:hover{color:var(--blue-600)}
/* 2 nov: randul cu link se apasa pe toata cutia (nu doar pe text) si are sageata, ca sa se vada ca duce undeva */
.compat li:has(>a){padding-right:30px}
.compat li a::after{content:"";position:absolute;inset:0;border-radius:10px}
.compat li:has(>a)::after{content:"›";position:absolute;right:12px;top:50%;margin-top:-12px;color:var(--blue-600);font-size:20px;font-weight:700;line-height:24px;pointer-events:none}
.compat li:has(>a):hover{border-color:var(--blue-100);background:var(--blue-50)}
.compat-tot{width:100%;margin:-4px 0 12px}
.compat li.nota{padding-left:12px;border-style:dashed}
.compat li.nota::before{display:none}
.spec{display:grid;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.spec>div{display:grid;grid-template-columns:minmax(110px,40%) 1fr;gap:12px;align-items:center;min-height:44px;padding:9px 16px}
.spec>div:nth-child(odd){background:var(--bg-soft)}
.spec small,.spec dt{font-size:14px;font-weight:500;color:var(--muted)}
.spec b,.spec dd{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
dl.spec{margin:0}                                   /* 7 nov (D11-07): „Detalii piesă” e <dl> cu <dt>/<dd> — acelasi aspect ca pe div/small/b */
.spec dd{margin:0}
.spec.pastile{display:flex;flex-wrap:wrap;gap:8px;border:0;border-radius:0;overflow:visible}
.spec.pastile>div{display:flex;flex-direction:column;gap:1px;min-height:0;padding:8px 12px;border-radius:10px;background:var(--bg-soft)}
.spec.pastile small{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}      /* 6 nov: etichetele mici ≥ 12 px peste tot */
.vanduta-info{margin:4px 0 16px;padding:12px 16px;border-radius:12px;background:var(--err-bg);border:1px solid #F5C2C2;color:#8E1D1D;font-size:14px}
/* masina donatoare */
.masina{display:grid;grid-template-columns:240px minmax(0,1fr) auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.masina .poza{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.masina .poza img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.masina h2{font-size:20px;margin:0}
.masina .date{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.masina .date div{background:var(--bg-soft);border-radius:10px;padding:7px 12px;min-width:100px}
.masina .date small{display:block;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.masina .date b{font-size:14px;color:var(--ink)}
.masina .act{display:flex;flex-direction:column;gap:8px}
/* 2 nov: masina fara poza in Harta = fara caseta gri goala; fisa ia locul pozei */
.masina.fara-poza{grid-template-columns:minmax(0,1fr) auto}
/* 2 nov: piesa fara poze → „Poze la cerere” cu buton de WhatsApp (nu un „Fără poză” gri cat jumatate de ecran) */
.galerie.cere-poze{display:flex;align-items:center;justify-content:center;min-height:260px;background:var(--bg-soft)}
.cere-poze .cp{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;max-width:340px;padding:24px 12px}
.cere-poze .cp>.i{width:40px;height:40px;color:var(--blue-600)}
.cere-poze .cp b{font-size:18px;color:var(--ink)}
.cere-poze .cp p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.cere-poze .cp .btn{margin-top:6px}
.sub-grila{font-size:17px;margin:24px 0 0}
/* bara lipita jos (telefon, produs in stoc) */
.bara-mobil{display:none}

/* ── descriere / liste (hub, pagini vechi) ── */
.desc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.desc h2,.desc h3{font-size:16px;margin:0 0 8px}
.desc ul{margin:0;padding-left:18px}
.desc li{margin:4px 0}
.desc.trei{grid-template-columns:repeat(3,1fr)}
.desc.trei ul{overflow-wrap:anywhere}

/* ── filtre (categorii, masini) ── */
.filtre,.cautare-masina{display:grid;grid-template-columns:repeat(3,minmax(0,240px));gap:10px;margin:18px 0 6px;padding:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:16px}
.cautare-masina{grid-template-columns:minmax(0,220px) minmax(0,220px) minmax(0,1fr)}
.cautare-masina .filtru{margin:0}
.masina-mea{margin:12px 0 0}
.chip-masina{background:var(--blue-50);border-color:var(--blue-100);color:var(--ink);padding-right:4px}
.chip-masina .x{min-width:34px;min-height:34px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:14px;line-height:1;cursor:pointer}
.chip-masina .x:hover{background:rgba(11,18,32,.08)}
.actiuni-masina{margin:10px 0 0}
.actiuni-masina .btn{min-height:44px;font-size:14px}
#fRez{margin:8px 0 0;min-height:22px}
#fRez:empty{min-height:0;margin:0}
/* paginare */
.pag{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:32px 0 4px}
.pg{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font-weight:600;font-size:14px}
a.pg:hover{border-color:var(--blue-600);color:var(--blue-600);text-decoration:none}
.pg.on{background:var(--blue-600);border-color:var(--blue-600);color:#fff}
.pg-gol,.pg.gol{align-self:center;border:0;background:transparent;color:var(--muted);min-width:20px;padding:0 2px}

/* ── paginile de informatii + formulare ── */
.pagina{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start;margin-top:4px}
.continut{background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px 36px;font-size:16px;line-height:1.7}
.continut.eroare{text-align:center;padding:48px 24px}            /* 2 nov: pagina 404 (padding-ul nu mai sta inline, ca sa-l poata micsora telefonul) */
.continut h1{margin-bottom:18px}
.continut h2{font-size:20px;margin:28px 0 8px}
.continut h3{font-size:17px;margin:20px 0 6px}
.continut ul,.continut ol{margin:0 0 14px;padding-left:22px}
.continut li{margin:4px 0}
.continut hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.continut table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:15px}   /* 7 nov (audit): tabelul cookie-urilor depasea ecranul pe telefon (623 px) */
.continut th,.continut td{border:1px solid var(--line);padding:6px 10px;vertical-align:top;text-align:left;overflow-wrap:anywhere}
.continut img{border-radius:12px;margin:8px 0}
.continut img.cert{max-width:300px;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.continut img.mare{width:100%;max-height:360px;object-fit:cover}
.continut video{width:100%;height:auto;border-radius:12px;background:#000}
.continut iframe{width:100%;height:340px;border:0;border-radius:12px}
.continut details{border:1px solid var(--line);border-radius:12px;padding:0 16px;margin:8px 0;background:#fff}
.continut summary{display:flex;justify-content:space-between;gap:12px;padding:14px 0;font-weight:700;color:var(--ink);cursor:pointer;list-style:none}
.continut summary::-webkit-details-marker{display:none}
.continut summary::after{content:"+";flex:none;color:var(--blue-600);font-size:20px;line-height:1}
.continut details[open] summary::after{content:"–"}
.continut details p{padding-bottom:14px;color:#3A4656}
.valori{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:12px 0 20px}
.valoare{display:flex;gap:12px;margin:0;padding:14px;border-radius:12px;background:var(--bg-soft)}
.valoare img{width:56px;height:56px;object-fit:contain;margin:0;flex:none}
.valoare>span{display:block;min-width:0}
.valoare h3{margin:0 0 4px}
.valoare p{margin:0;font-size:14px}
.lateral{display:flex;flex-direction:column;gap:16px;position:sticky;top:calc(var(--cap-h) + 16px)}
.card-info{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;font-size:14px}
.card-info h2,.card-info h3{font-size:16px;margin:0 0 12px}
.card-info p{margin:0 0 10px}
.card-info ul{margin:0;padding:0;list-style:none}
.card-info li{padding:9px 0;border-top:1px solid var(--line)}
.card-info li:first-child{border-top:0}
.card-info .i{width:18px;height:18px;color:var(--blue-600);margin-right:4px}
.card-info .btn{margin-top:6px;width:100%}
.form{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700;color:var(--ink)}
.form input,.form textarea,.form select{font-weight:500}
.form textarea{padding:12px 14px;min-height:120px;line-height:1.5}
.form .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form fieldset{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 16px;border:1px solid var(--line);border-radius:12px}
.form legend{padding:0 6px;font-size:14px;font-weight:700;color:var(--ink)}
.form .optiune,.form .bifa{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500;color:var(--text)}
.form .optiune input,.form .bifa input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--blue-600)}
.form .optiune input[type=file]{width:100%;height:auto;min-height:48px;padding:10px;background:var(--bg-soft)}
.form .btn{align-self:flex-start}
.contact-grila{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px}
.contact-date p{display:flex;gap:12px;margin:0 0 16px}
.contact-date p>.i{width:22px;height:22px;margin-top:2px;color:var(--blue-600)}
/* 2 nov: harta Google doar la cerere (ui.js) — pana atunci o caseta simpla, de aceeasi inaltime ca harta */
.harta-cerere{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;min-height:340px;padding:24px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--bg-soft);text-align:center}
.harta-cerere p{margin:0}
.harta-cerere .i{width:20px;height:20px;vertical-align:-4px;color:var(--blue-600)}
.harta-cerere.incarcata{display:block;padding:0;border:0;background:none}
.harta-cerere iframe{width:100%;height:340px;border:0;border-radius:12px}
@media (max-width:767px){.harta-cerere{min-height:180px}}

/* ── prima pagina ── */
.erou{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);border-bottom:1px solid var(--line);padding:40px 0 56px}
.erou::before{content:"";position:absolute;right:-180px;top:-200px;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,122,255,.10),rgba(0,122,255,0));pointer-events:none}
.erou>.c{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:56px;align-items:center}
.supra{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-600)}
.supra .punct{background:var(--blue-500);box-shadow:0 0 0 4px var(--blue-100)}
.erou h1{font-size:clamp(32px,4vw,52px);line-height:1.08;letter-spacing:-.025em;margin:0 0 16px}
.erou h1 span{color:var(--blue-600)}
.erou .sub{max-width:560px;margin:0 0 28px;font-size:18px;line-height:1.6;color:var(--muted)}
.cauta-mare{position:relative;display:flex;align-items:center;max-width:640px;height:64px;padding:6px 6px 6px 22px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;box-shadow:var(--shadow-md);transition:border-color .15s,box-shadow .15s}
.cauta-mare:focus-within{border-color:var(--blue-600);box-shadow:var(--ring),var(--shadow-md)}
.cauta-mare>.i{width:22px;height:22px;color:var(--muted)}
.cauta-mare input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:17px;padding:0 12px;text-overflow:ellipsis}
.cauta-mare input::placeholder{color:var(--subtle)}
.cauta-mare button{flex:none;height:100%;padding:0 30px;border:0;border-radius:999px;background:var(--blue-600);color:#fff;font-weight:700;font-size:16px;cursor:pointer}
.cauta-mare button:hover{background:var(--blue-700)}
.selector{max-width:640px;margin-top:16px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.selector-t{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:14px;font-weight:700;color:var(--ink)}
.selector-t .i{color:var(--blue-600)}
.selector-pasi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px}
.sel-pas{position:relative;display:block;min-width:0}
.nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--blue-600);color:#fff;font-size:12px;font-weight:800;font-style:normal;flex:none}
.sel-pas .nr{position:absolute;left:12px;top:50%;margin-top:-11px;pointer-events:none;z-index:1}
.sel-pas select{padding-left:42px;padding-right:30px;background-position:right 10px center;font-weight:600;text-overflow:ellipsis}
.selector .btn{padding:0 16px}
.sel-pas:has(select:disabled) .nr{background:var(--line);color:var(--muted)}
.selector .btn .nr{background:#fff;color:var(--blue-600)}
.selector-n{min-height:20px;margin:10px 0 0;font-size:13px;color:var(--muted)}
.selector-n:empty{min-height:0;margin:0}
/* 2 nov: 2 x 2 (inainte „589 mașini” cadea singur pe al doilea rand); pe ecrane late, toate 4 pe un rand */
.dovezi{display:grid;grid-template-columns:repeat(2,max-content);justify-content:start;gap:16px 40px;margin:26px 0 0;padding:0;list-style:none}
@media (min-width:1700px){.dovezi{grid-template-columns:repeat(4,max-content);gap:16px 32px}}
@media (max-width:1699px){.ascuns-mic{display:none}}
.dovezi li{display:flex;align-items:center;gap:10px;line-height:1.25}
.dovezi .i{width:40px;height:40px;padding:9px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--blue-600)}
.dovezi b{display:block;font-size:17px;font-weight:800;color:var(--ink)}
.dovezi span{font-size:13px;color:var(--muted)}
.erou-dr{position:relative;padding:0 0 0 8px}
.erou-foto{position:relative;margin:0}
.erou-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-lg)}
.erou-foto figcaption{display:flex;align-items:center;gap:8px;margin:12px 4px 0;font-size:13.5px;color:var(--muted)}
.erou-foto figcaption .i{width:18px;height:18px;color:var(--blue-600);flex:none}
.insigna{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;background:#fff;border-radius:14px;box-shadow:var(--shadow-md);line-height:1.25}
.insigna .i{width:38px;height:38px;padding:8px;border-radius:10px;background:var(--blue-50);color:var(--blue-600)}
.insigna b{display:block;font-size:18px;color:var(--ink)}
.insigna small{font-size:12.5px;color:var(--muted)}
.insigna.i1{left:-28px;bottom:32px}
.insigna.i2{right:-16px;top:28px}
.zona{padding:64px 0}
.zona-gri{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zona+.zona:not(.zona-gri){padding-top:64px}
.tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink);box-shadow:var(--shadow-xs);transition:border-color .16s,box-shadow .16s,transform .16s}
.tile:hover{text-decoration:none;border-color:var(--blue-100);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tile img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
.tile b{display:block;padding:12px 14px 14px;font-size:15px;line-height:1.3;font-weight:700}
.tile b small{display:block;margin-top:2px;font-size:13px;font-weight:500;color:var(--muted)}
.populare{display:flex;align-items:flex-start;gap:12px;margin-top:24px}
.populare>span{flex:none;padding-top:7px;font-size:14px;font-weight:700;color:var(--ink)}
.populare .chips{margin:0}
.masina-cauta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 20px;padding:12px 12px 12px 18px;background:#fff;border:1px solid var(--line);border-radius:16px}
.masina-cauta form{display:grid;grid-template-columns:minmax(0,240px) minmax(0,240px) max-content;justify-content:start;gap:10px;flex:1}
.masina-cauta>b{font-size:15px;color:var(--ink)}
.pasi{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:pas}
.pas{position:relative;padding:24px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pas i{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:14px;border-radius:12px;background:var(--blue-600);color:#fff;font-style:normal;font-weight:800;font-size:17px}
.pas b{display:block;margin-bottom:6px;font-size:17px;color:var(--ink)}
.pas p{margin:0;font-size:15px;color:var(--muted)}
.garantii{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.garantii>div,.garantii>a{display:flex;align-items:center;gap:12px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px;font-size:13.5px;line-height:1.35}
.garantii>a{color:inherit;transition:border-color .15s}
.garantii>a:hover{text-decoration:none;border-color:var(--blue-100)}
.garantii .i{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--blue-50);color:var(--blue-600)}
.garantii b{display:block;font-size:14.5px;color:var(--ink)}
.garantii small{color:var(--muted);font-size:12.5px;line-height:1.35}
.banda{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px 44px;border-radius:24px;background:var(--ink);color:#C9D3E0}
.banda h2{color:#fff;font-size:clamp(22px,2.4vw,30px);line-height:1.25;margin:0 0 12px}
.banda .eticheta{color:#7DB4FF}
.banda p{margin:0 0 20px}
.banda .btn.suna{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.banda .btn.suna:hover{background:rgba(255,255,255,.08);border-color:#fff}
.lista-contact{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.lista-contact li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14.5px}
.lista-contact li:last-child{border-bottom:0}
.lista-contact .i{color:#7DB4FF}
.lista-contact a{color:#fff;font-weight:600}
.rabla{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:20px;padding:18px 24px;border:1px dashed var(--line-strong);border-radius:16px;background:#fff}
.rabla h2{font-size:17px;margin:0 0 2px}
.rabla p{margin:0;font-size:14px;color:var(--muted)}

/* ── subsolul ── */
.subsol{margin-top:80px;background:var(--ink);color:#AEB9C8;font-size:14px}
.zona~.subsol,main:has(>.zona:last-child)+.subsol{margin-top:0}
.subsol .c{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-top:56px;padding-bottom:28px}
.subsol h2{margin:0 0 14px;color:#fff;font-size:13px;font-weight:700;line-height:1.25;letter-spacing:.08em;text-transform:uppercase}      /* titlurile coloanelor: h2 (fara salt de nivel dupa h1) */
.subsol a{display:block;width:fit-content;padding:5px 0;color:#D5DCE6}
.subsol a:hover{color:#fff}
.sub-brand a .i{width:16px;height:16px;margin-right:8px;vertical-align:-3px;color:#7DB4FF}      /* 2 nov: telefoanele, mailul si adresa se vad ca se pot apasa */
.sub-brand p{margin:0 0 12px;max-width:340px;line-height:1.6}
.subsol .jos{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:8px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;color:#8D9AAD}
.jos-retele{display:flex;gap:20px}
/* 2 nov: banda PNRR sus si caseta PNRR + pictograma ANPC SAL in subsol, ca pe site-ul viu (vizibilitatea proiectului PNRR si SAL); imaginile stau
   la noi (/active/sigle/), nu luate de pe Magento; linkul spre platforma UE SOL (inchisa din 20 iul 2025) nu mai e */
.pnrr{background:#fff;border-bottom:1px solid var(--line);text-align:center;padding:5px 12px;line-height:0}
.pnrr a{display:inline-block}
.pnrr img{height:34px;width:auto;max-width:100%}
.sub-oficial{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.pnrr-sub p{margin:0 0 4px;font-size:12.5px;line-height:1.5}
.pnrr-titlu{color:#fff;font-weight:700}
.pnrr-linkuri{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.subsol .pnrr-linkuri a{display:inline;padding:0;font-size:12.5px}
.pnrr-nota{color:#8D9AAD}
.subsol .anpc-sal{padding:0}
.anpc-sal img{display:block;width:201px;height:50px}
@media (max-width:767px){.pnrr img{height:auto;width:100%;max-width:380px}}

/* ── „viata” paginilor (ui.js): sugestii, WhatsApp, aparitie, lightbox, cookie ── */
.cauta,.cauta-mare{position:relative}
.sugestii{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:70;display:none;max-height:min(70vh,560px);overflow:hidden auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);text-align:left;color:var(--text)}
.sugestii.on{display:block}
.sug-grup{padding:12px 16px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sug-masina{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--blue-50);color:var(--ink);font-weight:700;font-size:14.5px}
.sug-masina .i{color:var(--blue-600)}
.sug-masina small{font-weight:600;color:var(--muted)}
.sug-masina em{margin-left:auto;font-style:normal;color:var(--blue-600);font-size:13px}
.sug-masina:hover,.sug-masina:focus{background:var(--blue-100);text-decoration:none;outline:2px solid var(--blue-600);outline-offset:-2px}   /* 6 nov: focusul de la tastatura se vede */
.sug-masina:hover:not(:focus-visible){outline:0}
.sug{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:60px;padding:8px 16px;color:var(--text)}
.sug:hover,.sug:focus{background:var(--bg-soft);text-decoration:none;outline:2px solid var(--blue-600);outline-offset:-2px}
.sug:hover:not(:focus-visible){outline:0}
.sug img,.sug-img{display:block;width:56px;height:42px;object-fit:contain;border:1px solid var(--line);border-radius:8px;background:#fff}
.sug b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;line-height:1.35;font-weight:600;color:var(--ink)}
.sug small{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.sug em{font-style:normal;font-weight:800;font-size:14px;color:var(--ink);white-space:nowrap}
.sug-tot{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;border-top:1px solid var(--line);font-weight:700}
.sug-gol{padding:16px;color:var(--muted);font-size:14px}
.wa-plutitor{position:fixed;right:20px;bottom:20px;z-index:44;width:56px;height:56px;border-radius:50%;background:var(--wa);color:var(--wa-ink);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(11,18,32,.25);transition:transform .15s}
.wa-plutitor:hover{transform:scale(1.06);text-decoration:none}
.wa-plutitor.ascuns{transform:translateY(90px);opacity:0;pointer-events:none}      /* 4 nov: pe telefon, cat derulezi in jos (ui.js) */
.wa-plutitor{transition:transform .2s,opacity .2s}
.wa-plutitor .i{width:28px;height:28px}
/* 7 nov 2026: butonul „Chat” (Chatwoot-ul call center-ului, active/chat.js), deasupra bulei de WhatsApp; se ascunde cand fereastra de chat e deschisa */
.chat-plutitor{position:fixed;right:20px;bottom:88px;z-index:44;display:flex;align-items:center;gap:8px;height:56px;padding:0 18px 0 14px;border:0;border-radius:28px;background:var(--blue-600);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 8px 24px rgba(11,18,32,.25);transition:transform .2s,opacity .2s,visibility 0s linear 0s}
.chat-plutitor:hover{transform:scale(1.04)}
.chat-plutitor:focus-visible{outline:3px solid var(--blue-800);outline-offset:2px}
.chat-plutitor .i{width:26px;height:26px;flex:none}
.chat-plutitor.ascuns{transform:translateY(90px);opacity:0;pointer-events:none;visibility:hidden;transition:transform .2s,opacity .2s,visibility 0s linear .2s}
.chat-plutitor.incarca .i{animation:chat-puls 1s ease-in-out infinite}
.chat-plutitor.esec{background:var(--wa);color:var(--wa-ink)}      /* chatul n-a venit: butonul devine „WhatsApp” (verde), deschis la urmatorul clic */
.chat-esec .wa-plutitor{display:none}                               /* …iar bula de WhatsApp de dedesubt se ascunde (nu doua butoane verzi) */
@keyframes chat-puls{0%,100%{opacity:1}50%{opacity:.35}}
/* fereastra de chat deschisa: bulele dispar si nu mai pot primi focus (visibility), nu doar opacitate */
.chat-deschis .chat-plutitor,.chat-deschis .wa-plutitor{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.vizibil{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;background:rgba(8,13,24,.95);touch-action:none}   /* 5 nov: gesturile le face ui.js (si pe tablete) */
.lightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:12px;background:#fff}
.lightbox button{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:26px;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lb-inchide{top:16px;right:16px}
.lb-prev{left:16px;top:50%;margin-top:-24px}
.lb-next{right:16px;top:50%;margin-top:-24px}
.lb-nr{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);color:#CFD8E6;font-size:13px;font-weight:600}
.cookie-banner{position:fixed;left:16px;bottom:16px;z-index:58;display:flex;align-items:center;gap:10px 14px;max-width:min(580px,calc(100vw - 32px));padding:10px 12px 10px 18px;border-radius:14px;background:var(--ink);color:#fff;box-shadow:var(--shadow-lg)}
.cookie-banner p{flex:1;margin:0;font-size:13px;line-height:1.4;color:#D5DCE6}
.cookie-banner a{color:#fff;text-decoration:underline}
@media (max-width:767px){.cookie-banner a{display:inline-block;padding:11px 6px;margin:-11px -6px}}      /* 7 nov (D11-06): „Detalii” are zona de atingere ≥ 44 px pe telefon, fara sa mareasca banner-ul */
.cookie-banner .btn{flex:none;min-height:38px;padding:0 14px;font-size:13.5px}
.cookie-banner .btn.alb{background:#fff;color:var(--ink)}
.cookie-banner .btn.contur{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}

/* 5 nov (analiza pe telefon, valul 3): linkul „Se potrivește pe N mașini ›” din fisa (doar pe telefon), butoanele mari de pe Contact (doar pe telefon),
   „Piese la cerere” gri pe cardurile de masini, „Arată pe hartă” in caseta de vizita */
.chip-compat,.contact-actiuni{display:none}
/* (verificarea 2) „Arată toate (N)” e doar pentru telefon: rotit / fereastra marita, toate cardurile se vad deja */
@media (min-width:768px){.btn.arata-tot,.btn.compat-tot{display:none}}
.btn.alte-masini{white-space:normal;text-align:center;line-height:1.25;height:auto;min-height:48px;padding:10px 14px}
.btn.alte-masini .i{flex:none}
a.card[href^="/dezmembrari/"] .p b.cerere{color:var(--muted);font-weight:600;font-size:14px}
.vizita-harta{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:4px;min-height:44px;font-weight:700}   /* pe randul lui (verificarea 2) */
.vizita-harta .i{width:18px;height:18px}
/* 5 nov (analiza pe telefon): „Nu am găsit …” pe pagina masinii (ui.js filtreazaCarduri), cu WhatsApp */
.fara-rez{margin:12px 0;padding:14px 16px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--line)}
.fara-rez p{margin:0 0 10px}
.fara-rez[hidden]{display:none}
/* 5 nov: codurile OEM / SDG se copiaza cu o atingere (ui.js 5d) */
.coduri .cod[role=button]{cursor:pointer}
.coduri .cod[role=button]:active{transform:scale(.97)}

/* ── puncte de rupere ── */
@media (max-width:1279px){
  .grila{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prod{grid-template-columns:minmax(0,1fr) 380px;gap:24px 28px}
  .top-livr{display:none}
  .meniu-dreapta{display:none}
  .garantii{grid-template-columns:1fr 1fr}
}
@media (max-width:1023px){
  .top .c{justify-content:space-between}
  .top-tel>a:nth-child(2){display:none}
  .cap .c{flex-wrap:wrap;gap:0 4px;min-height:56px;padding-bottom:10px}
  .burger,.ut-tel{display:inline-flex}
  .logo{flex:1;min-width:0;margin-left:4px}
  .logo img{height:26px;max-width:100%;object-fit:contain;object-position:left}
  .logo{min-height:44px}                     /* 5 nov (analiza pe telefon): linkul logo-ului avea 26 px inaltime */
  /* 5 nov: antetul se ascunde cand derulezi in jos si revine cand urci (ui.js 2b) — doar transform, fara saritura de pagina */
  .cap{transition:transform .22s ease}
  .cap.cap-ascuns{transform:translateY(-100%)}
  .cauta{order:10;flex:1 0 100%;max-width:none;height:52px;border-width:1px;border-color:var(--line-strong);padding:3px 3px 3px 16px}      /* butonul „Caută” are 44 px inaltime */
  .cauta button{padding:0 18px}
  body.acasa:not(.cauta-sus) .cap .cauta{display:none}                  /* pe telefon randul cautarii din antet dispare de tot cat e cea mare pe ecran */
  body.acasa:not(.cauta-sus) .cap .c{padding-bottom:0}
  .ut{height:44px;min-width:44px;justify-content:center;padding:0 10px}
  .ut span:not(.fav-nr):not(.cos-nr),.ut.cont,.ut.fav-link{display:none}      /* 6 nov: numarul de piese din cos (.cos-nr) ramane vizibil si pe telefon */
  .meniu{position:fixed;top:0;bottom:0;left:0;z-index:80;width:min(86vw,360px);overflow-y:auto;border:0;box-shadow:var(--shadow-lg);transform:translateX(-102%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
  .meniu-deschis .meniu{transform:none;visibility:visible;transition:transform .25s ease}
  .meniu-deschis{overflow:hidden}
  .meniu-deschis body::after{content:"";position:fixed;inset:0;z-index:79;background:rgba(11,18,32,.5)}
  .meniu .c{flex-direction:column;align-items:stretch;gap:2px;min-height:100%;padding:64px 12px 28px}
  .meniu-inchide{display:inline-flex;position:absolute;top:10px;right:10px}
  .meniu .c>a,.meniu-cat{align-self:stretch;margin:0}
  .meniu .c>a{min-height:48px;padding:0 12px;border:0;border-radius:12px;font-size:16px;gap:12px}
  .meniu .c>a:not(.masini-link){padding-left:44px}         /* 6 nov: toate linkurile pornesc de la aceeasi margine ca „Mașini dezmembrate” (cu iconita) */
  .meniu .c>a:hover,.meniu .c>a.on{background:var(--bg-soft)}
  .meniu-cat{flex-direction:column;align-items:stretch}
  .mega-btn{height:48px;font-size:16px}
  .mega-btn .i:last-child{display:none}
  .top-ore{display:none}
  .mega,.meniu-cat:hover .mega{display:flex;flex-direction:column;position:static;width:auto;padding:6px 0 10px;border:0;box-shadow:none;background:transparent}
  .mega-cap{order:2;border:0;padding:4px 12px;margin:0}
  .mega-cap b{display:none}
  .mega-grila{grid-template-columns:1fr;gap:0}
  .mega a.mc{padding:6px 12px;font-size:15px}
  .mega a.mc img{width:40px;height:40px}
  .meniu-extra{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .meniu-extra a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:12px;color:var(--ink);font-weight:600}
  .meniu-extra a:hover{background:var(--bg-soft);text-decoration:none}
  .meniu-extra .i{color:var(--blue-600)}
  .meniu-extra p{margin:12px 12px 0;font-size:13px;color:var(--muted)}
  /* 5 nov (analiza pe telefon): categoriile din sertar se deschid la cerere (ui.js: atingerea pe „Piese auto” comuta html.mega-deschis), ca
     telefoanele si WhatsApp-ul sa fie pe primul ecran al meniului; sageata arata ca se deschide. Cu sertarul deschis bula verde nu mai sta deasupra */
  html:not(.mega-deschis) .meniu .mega{display:none}
  .meniu .mega-btn .i:last-child:not(:first-child){display:inline-block;margin-left:auto;transition:transform .2s}
  .mega-deschis .meniu .mega-btn .i:last-child:not(:first-child){transform:rotate(180deg)}
  .meniu-deschis .wa-plutitor,.meniu-deschis .chat-plutitor{display:none}
  .prod{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "fisa" "det";gap:20px}
  .prod.fara-galerie{grid-template-areas:"fisa"}
  .prod>.fisa{position:static}
  .masina{grid-template-columns:200px minmax(0,1fr)}
  .masina.fara-poza{grid-template-columns:minmax(0,1fr)}
  .masina .act{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .bara-mobil{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(11,18,32,.08)}
  .bm-pret{display:flex;flex-direction:column;min-width:0;line-height:1.15}
  .bm-pret b{font-size:20px;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
  .bm-pret small{font-size:12px;font-weight:700;color:var(--ok)}
  .bm-pret small.cu-defect{color:var(--warn)}                 /* 5 nov: „În stoc · cu defect” (gen_catalog / gen_produs) */
  /* 5 nov (analiza pe telefon): bara de jos pe pagina masinii [Întreabă de o piesă · Sună] si pe piesa vanduta [Vezi piese similare · WhatsApp] */
  .bara-mobil .btn.wa.bm-intreaba{flex:1;width:auto;padding:0 16px;font-size:16px}
  .bara-mobil .btn.suna{flex:none;width:52px;min-height:52px;padding:0}
  .bara-mobil .btn.similare{flex:1;min-height:52px;font-size:16px}
  .bara-mobil .btn.cumpara{flex:1;min-height:52px;font-size:16px}
  .bara-mobil .btn.wa{flex:none;width:52px;min-height:52px;padding:0}
  .bara-mobil .btn.wa .i{width:24px;height:24px}
  body:has(.bara-mobil){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  body:has(.bara-mobil) .wa-plutitor{display:none}
  body:has(.bara-mobil) .chat-plutitor{bottom:calc(86px + env(safe-area-inset-bottom))}   /* 7 nov: chatul sta deasupra barei de jos a fisei (73 px + 13 px aer) */
  body:has(.bara-mobil) .cookie-banner{bottom:84px}
  /* 5 nov (analiza pe telefon): bara de jos se retrage cat butonul mare din fisa e pe ecran (ui.js 5b) si cat omul scrie in cautarea din antet
     (acoperea sugestiile de deasupra tastaturii). Nu cu clasa globala .ascuns (aia e display:none) */
  .bara-mobil{transition:transform .2s ease}
  /* (verificarea 2) reguli separate: un selector cu :has() intr-o lista face sa cada TOATA regula pe browserele fara :has */
  .bara-mobil.bm-ascunsa{transform:translateY(110%);pointer-events:none}
  body:has(.cap .cauta input:focus) .bara-mobil{transform:translateY(110%);pointer-events:none}
  /* (verificarea 5 nov) cu bara retrasa, bannerul de cookie-uri coboara la locul lui (altfel plutea la 84 px, cu gol dedesubt) */
  body:has(.bara-mobil.bm-ascunsa) .cookie-banner{bottom:8px}
  body:has(.cap .cauta input:focus) .cookie-banner{bottom:8px}
  /* (verificarea 2) antetul se ascunde la derulare: ancorele (#compat, #similare) nu mai lasa ~120 px de gol sus, iar sumarul cosului lipit urca */
  html{scroll-padding-top:12px}
  html:has(.cap-ascuns) .cos-sumar{top:16px}
  .cookie-banner{transition:bottom .2s}
  /* (verificarea 5 nov) pe tablete (900–1023 px) antetul e static pe comanda, deci sumarul lipit nu mai lasa loc pentru el */
  body:has(#cmdForm) .cmd-sumar{top:16px}
  /* 5 nov (analiza pe telefon): pe pagina de comanda antetul nu mai sta lipit (107 px; cu tastatura deschisa lua ~23% din ecran si impingea campul) */
  body:has(#cmdForm) .cap{position:static}
  /* 5 nov: pe 404 erau doua casete de cautare (antet + pagina) → ramane cea din pagina, ca pe prima pagina */
  body:has(.continut.eroare) .cap .cauta{display:none}
  body:has(.continut.eroare) .cap .c{padding-bottom:0}
  .erou{padding:36px 0 44px}
  .erou>.c{grid-template-columns:minmax(0,1fr)}
  .erou-dr{display:none}
  .pagina{grid-template-columns:minmax(0,1fr)}
  .lateral{position:static}
  .banda{grid-template-columns:minmax(0,1fr);gap:24px;padding:32px 28px}
  .subsol .c{grid-template-columns:1fr 1fr}
  .sub-brand{grid-column:1/-1}
}
@media (max-width:767px){
  .top{font-size:12.5px}
  .top-wa{display:none}
  h1{font-size:26px}
  .sectiune{margin-top:36px}
  .zona{padding:40px 0}
  .grila{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{border-radius:14px}
  .card .t{padding:10px 10px 0;font-size:13.5px;min-height:49px}
  .card .m{padding:3px 10px 0;font-size:12px}
  /* 5 nov (analiza pe telefon): randul masinii pe 2 randuri — se taia tocmai anul / motorizarea („Ford Kuga 2 4×4 · 2012–…”), care spun daca
     piesa se potriveste; cardurile din acelasi rand se egalizeaza singure (grila + .card .p{margin-top:auto}) */
  .card .m{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
  .card .p{padding:8px 10px 12px}
  .card .p b{font-size:16px}
  .card .p span{display:none}
  a.card[href^="/dezmembrari/"] .p span{display:inline-block}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tile b{padding:10px 12px 12px;font-size:14px}
  /* 2 nov: firul trece pe randuri (se derula lateral si se taia in mijlocul cuvantului), fara ultimul pas — numele paginii e deja in H1 */
  .fir{flex-wrap:wrap;overflow:visible;white-space:normal;padding:12px 0 6px}
  .fir>span:last-child,.fir>.sep:nth-last-child(2){display:none}
  .fir a{padding:10px 0}
  .galerie{padding:6px;border-radius:14px}
  .mici button{width:52px;height:52px}        /* 6 nov: miniaturi mai mici (si tot peste 44 px) → titlul si pretul urca mai sus pe primul ecran */
  .bm-pret small{white-space:nowrap}          /* 6 nov: „În stoc · cu defect” nu se mai rupe in bara de jos */
  /* 5 nov: poza deschisa pe tot ecranul, pe negru (prin fundalul de 95% se vedea bara „Cumpără”); marirea o face ui.js (touch-action:none e
     in regula de baza, si pentru tablete) */
  .lightbox{background:#000}
  .lightbox img{max-width:100vw;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);border-radius:0;transition:transform .15s ease,opacity .15s;will-change:transform}
  .lightbox img.lb-trage{transition:none}
  .lb-nr{bottom:calc(16px + env(safe-area-inset-bottom));padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.6)}
  .fisa{padding:18px;border-radius:14px}
  .fisa h1{font-size:19px;line-height:1.4}
  .pret b{font-size:30px}
  .butoane{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 2 nov: pe 390 px butoanele cu text lung („Salvează la favorite”, telefonul) nu incapeau in jumatatea lor si impingeau pagina
     cu 3-10 px in afara ecranului (pagina aluneca lateral, iar telefonul micsora tot si taia bara de jos) → textul trece pe 2 randuri */
  .butoane .btn{padding:0 10px;gap:6px;font-size:14px;white-space:normal;line-height:1.15}
  .butoane #share,.butoane #favBtn{font-size:13px}
  .incredere{grid-template-columns:1fr}
  .bloc{padding:18px}
  ul.compat{grid-template-columns:1fr;max-height:none}
  ul.compat.strans>li:nth-child(n+7){display:none}               /* 2 nov: primele 6 + „Arată toate (N)” (ui.js) */
  select{padding-right:32px;background-position:right 10px center}   /* 2 nov: „Toate modelele” se taia in selectele pe jumatate de ecran */
  .spec>div{grid-template-columns:minmax(100px,42%) 1fr;padding:9px 12px}
  .masina{grid-template-columns:1fr}
  .desc,.desc.trei{grid-template-columns:1fr 1fr;gap:16px;padding:18px}
  .filtre{grid-template-columns:1fr 1fr;padding:10px}
  .filtre select:last-child{grid-column:1/-1}
  /* 5 nov (analiza pe telefon): pe categorie / subcategorie primul rand de piese, cu pret, pe primul ecran (incepea la ~620 din 844 px).
     Fara eticheta „Categorie” (H1 ramane); cat nu e aleasa marca, Modelul (dezactivat, nu folosea la nimic) nu se arata → un singur rand
     [Toate mărcile | Cele mai noi]; dupa alegere Modelul apare pe randul 2, ca inainte. Indiciul „Alege marca…” dispare doar cat nu e ales nimic */
  .sectiune:has(>#filtre)>.eticheta{display:none}
  .filtre{padding:8px;gap:8px}
  .filtre #fModel:disabled{display:none}
  .filtre:has(#fModel:disabled) select:last-child{grid-column:auto}
  .filtre:has(#fMarca>option[value=""]:checked):has(#fSort>option[value=""]:checked)+#fRez{display:none}
  .cautare-masina{grid-template-columns:1fr 1fr;padding:10px}
  .cautare-masina .filtru{grid-column:1/-1}
  /* 5 nov (analiza pe telefon): pe listele de masini prima masina pe primul ecran — fara eticheta de sus, taburile pe un rand (pe 360 treceau
     pe 2), introducerea stransa la 2 randuri (intreaga ramane in pagina), filtrul pe un rand cat nu e aleasa marca (Modelul apare dupa) */
  .sectiune:has(>.taburi-masini)>.eticheta{display:none}
  .taburi-masini{flex-wrap:nowrap;gap:6px}
  .taburi-masini .tab{flex:1 1 0;min-width:0;justify-content:center;padding:0 10px;gap:6px;font-size:14px;white-space:nowrap}
  .taburi-masini+.nota.intro{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.45}
  .taburi-masini .tab small{font-size:12px}                    /* (verificarea 2) contorul ajunsese la 11,7 px */
  .cautare-masina{padding:8px;gap:8px}
  .cautare-masina #fModel:disabled{display:none}
  .cautare-masina:has(#fModel:disabled) .filtru{grid-column:auto}
  .cautare-masina .filtru{padding-left:10px;padding-right:10px}   /* (verificarea 3) exemplul scurt incape pe jumatate de rand */
  .chips-multe:not(.deschis) .chip:nth-child(n+9):not(#chipsTot){display:none}
  .continut{padding:20px 16px;font-size:15.5px}
  .continut.eroare{padding:28px 16px}
  /* 5 nov: pe 404 butoanele unul sub altul (stateau in trepte), WhatsApp primul — cine a nimerit o pagina stearsa cauta o piesa */
  .continut.eroare .butoane-rand{flex-direction:column;align-items:stretch}
  .continut.eroare .butoane-rand .btn.wa{order:-1}
  .contact-grila,.valori,.form .grid2{grid-template-columns:1fr}
  .erou h1{font-size:32px;line-height:1.12}
  .erou .sub{font-size:16px;margin-bottom:20px}
  .cauta-mare{height:56px;padding:4px 4px 4px 16px}              /* butonul „Caută” are 44+ px */
  .cauta-mare input{font-size:16px;padding:0 8px}
  .cauta-mare button{padding:0 18px}
  .selector{padding:14px}
  .selector-pasi{grid-template-columns:1fr}
  .sel-pas select,.selector .btn{min-height:52px}
  /* 5 nov (analiza pe telefon): pe prima pagina cautarea si TOT selectorul „Alege mașina” pe primul ecran (pe 360 se vedeau doar Marca si inceputul
     Modelului): titlul si textul mai scunde, pasii pe 2 coloane [1 Marcă | 2 Model] / [3 Categorie | 4 Caută] */
  .erou{padding:20px 0 28px}
  .supra{margin-bottom:10px}
  .erou h1{font-size:28px;margin-bottom:10px}
  .erou .sub{font-size:15px;line-height:1.5;margin-bottom:14px}
  .selector{margin-top:12px}
  .selector-t{margin-bottom:8px}
  .selector-pasi{grid-template-columns:1fr 1fr}
  .dovezi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}      /* 2 nov: 2 x 2 (a patra cadea singura) */
  .dovezi li{flex-direction:row;align-items:center;gap:10px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px}
  .dovezi .i{width:34px;height:34px;padding:7px;border:0;background:var(--blue-50)}
  .dovezi b{font-size:15px}
  .dovezi span{font-size:12px}
  .tiles.acasa>:nth-child(n+9){display:none}
  .top a{padding:10px 4px;margin:-10px -4px}
  .mega-tot{display:inline-flex;align-items:center;min-height:44px}
  .populare{flex-direction:column;align-items:stretch;gap:8px}        /* „stretch”: altfel rindul de chips are latimea continutului (652 px) si lungeste pagina */
  .populare>span{padding-top:0}
  .populare .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter)}
  .populare .chip{flex:none}
  /* 4 nov (recenzia vizuala): cipurile de subcategorii (pagina de categorie, #chips) si de categorii (pagina masinii, #catMasina) = UN rand care se
     deruleaza lateral — 9 cipuri pe 4 randuri (16 pe pagina masinii) impingeau piesele sub primul ecran. „Arată toate” le deschide pe randuri. */
  #chips,#catMasina{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;margin-left:calc(-1 * var(--gutter))!important;
    margin-right:calc(-1 * var(--gutter))!important;padding:0 var(--gutter) 2px}
  #chips::-webkit-scrollbar,#catMasina::-webkit-scrollbar{display:none}
  #chips .chip,#catMasina .chip{flex:none}
  #chips.chips-multe.deschis{flex-wrap:wrap;overflow:visible}
  /* 5 nov (valul 3): pe telefon — linkul spre compatibilitati langa etichete; pe Contact „Sună acum” / „Cum ajungi” mari, sus; pe pagina masinii
     randul gri cu masina (acelasi pe toate cardurile, deja in H1) nu se mai arata; formularele cu butonul pe toata latimea */
  .chip-compat{display:inline-flex;background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-700);font-weight:700}
  .contact-actiuni{display:grid;gap:10px;margin:0 0 18px}
  .contact-actiuni .btn{min-height:52px;font-size:16px;justify-content:center}
  .contact-date p a{display:inline-block;padding:8px 0}
  .form .btn{align-self:stretch;width:100%;min-height:52px}
  .grila.pe-masina .card .m{display:none}
  .alte-masini{margin-top:10px}
  /* 5 nov (analiza pe telefon): pe pagina masinii, categoriile stranse la 6 piese (ui.js 14); filtrul activ le arata pe toate cele gasite */
  body:not(.filtru-activ) .grila.strans>.card:nth-child(n+7){display:none}
  body.filtru-activ .arata-tot{display:none}
  .arata-tot{margin-top:12px}
  .masina-cauta{padding:14px}
  .masina-cauta form{flex:1 1 100%;grid-template-columns:1fr 1fr}
  .masina-cauta .btn{grid-column:1/-1}
  a.chip,button.chip{min-height:44px}
  .subsol a{padding:11px 0}
  .cookie-banner .btn{min-height:44px}
  .pasi,.garantii{grid-template-columns:1fr}
  .banda{padding:28px 20px;border-radius:20px}
  .banda .butoane-rand .btn{flex:1 1 100%}
  .rabla{padding:16px}
  .subsol{margin-top:56px}
  /* 2 nov: subsolul tinea cat 2 ecrane (27 de linkuri unul sub altul) → Comenzi | Informații pe doua coloane, linkurile Legal pe randuri */
  .subsol .c{grid-template-columns:1fr 1fr;gap:24px 16px;padding-top:40px}
  .sub-brand,.subsol .jos,.sub-oficial,.subsol .c>div:nth-child(4){grid-column:1/-1}
  .subsol .c>div:nth-child(4) a{display:inline-block;margin-right:18px}
  /* 2 nov: bula WhatsApp mai mica si ascunsa cat e deschis bannerul de cookie-uri (acoperea butonul „4 Caută” si preturile cardurilor din dreapta) */
  .wa-plutitor{right:12px;bottom:12px;width:48px;height:48px}
  .wa-plutitor .i{width:26px;height:26px}
  body:has(.cookie-banner) .wa-plutitor{display:none}
  /* 5 nov: pe cos si pe comanda bula statea peste „Finalizează comanda” / „Plasează comanda”; contactul ramane in antet (telefonul) */
  body:has(#cmdForm) .wa-plutitor,body:has(#cosPagina) .wa-plutitor{display:none}
  /* 7 nov: butonul „Chat” pe telefon: pastila mai mica, CU eticheta (auditul de noapte: doar pictograma nu spunea nimic), deasupra bulei de WhatsApp;
     ascuns in aceleasi situatii ca bula */
  .chat-plutitor{right:12px;bottom:70px;height:44px;padding:0 14px 0 12px;font-size:14px;border-radius:22px}
  .chat-plutitor .i{width:22px;height:22px}
  body:has(.cookie-banner) .chat-plutitor,body:has(#cmdForm) .chat-plutitor,body:has(#cosPagina) .chat-plutitor{display:none}
  main{padding-bottom:56px}
  .cookie-banner{left:8px;right:8px;bottom:8px;max-width:none;padding:10px 10px 10px 14px}
  .cookie-banner p{font-size:12.5px}
  .cookie-banner .btn{padding:0 12px}
  /* 5 nov (analiza pe telefon): bannerul mai scund (statea peste „Model / Categorie / 4 Caută”); „Detalii” cu zona de apasare de 44 px fara sa
     creasca randul. Textul NU se schimba fara acordul patronului (cookie.js) */
  .cookie-banner{padding:8px 8px 8px 12px;gap:8px}
  .cookie-banner p{line-height:1.3}
  .cookie-banner a{display:inline-block;padding:12px 4px;margin:-12px -4px}
  /* 5 nov: tintele sub 44 px de pe ecranele care decid (bara de sus, firul, linkurile PNRR din subsol) si textul de 11 px de pe datele care
     spun daca piesa se potriveste (codurile, pastilele masinii, „în curte”); numarul din cipul activ — contrast 4,42:1 → alb */
  .top a{padding:12px 4px;margin:-12px -4px}
  .fir a{padding:12px 0}
  .subsol .pnrr-linkuri a{display:inline-block;padding:10px 0}
  .cod small,.spec.pastile small,.masina .date small{font-size:12px}
  .coduri .cod{min-height:44px;justify-content:center}        /* 5 nov: se copiaza cu o atingere (ui.js 5d) → tinta de deget */
  /* (verificarea 2) ultimele tinte mici de pe pagina piesei: „Trimite unui prieten” / „Salvează la favorite” (42 px), garantiile-link (36 px),
     „Acasă” din fir (37 px latime) */
  .butoane .btn,.butoane #share,.butoane #favBtn{min-height:46px}   /* (verificarea 3) #share / #favBtn aveau o regula cu id (42 px) */
  .incredere>a,.incredere>div{min-height:44px;align-items:center}
  .fir a{padding:12px 6px;margin:0 -6px}
  a.card[href^="/dezmembrari/"] .p span{font-size:12px}
  a.chip[aria-current] small,button.chip[aria-pressed="true"] small{color:#fff}
}
@media (max-width:479px){
  .masina-cauta form{grid-template-columns:1fr}
}
/* (verificarea 5 nov) pe telefoanele inguste (360–389 px) selectorul pe 2 coloane taia „3 Categorie” in „Catego…”: mai putin loc pentru cifra si
   sageata, textul ramane la 16 px (sub 16 px iPhone-ul mareste pagina la atingere) */
@media (max-width:389px){
  .selector-pasi .sel-pas select{padding-left:36px;padding-right:22px;background-position:right 7px center}
  .selector-pasi .sel-pas .nr{left:8px}
}
@media (max-width:399px){
  .grila{gap:10px}
  .desc,.desc.trei{grid-template-columns:1fr}
}
/* ── 6 nov (runda 2: verificarea pe calculator, laptop si tableta) ── */
/* randul cu masina de sub titlul cardului („Marcă Model · ani”) se taia exact la ani pe calculator (nowrap): pe 2 randuri, ca pe telefon;
   cardurile din acelasi rand se egalizeaza singure (grila + .card .p{margin-top:auto}) */
@media (min-width:768px){
  .card .m{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
  .chips-multe:not(.deschis) .chip:nth-child(n+9):not(#chipsTot){display:none}       /* subcategoria: 8 cipuri + „Arată toate”, nu 12 (filtrele mancau primul ecran) */
  .fisa.titlu-lung h1{font-size:18px;line-height:1.3}                                  /* titlurile de peste 80 de caractere (6 randuri in fisa) */
}
a.card[href^="/dezmembrari/"] .img{background:var(--bg-soft)}                          /* cadru gri cat se incarca poza masinii (poza e pe cover, nu pe alb) */
/* tableta 768–1023: aranjarea de telefon, dar 4 coloane de ~165 px taiau titlul si masina → 3 coloane; tintele pentru deget ca pe telefon */
@media (min-width:768px) and (max-width:1023px){
  .grila{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grila.acasa>:nth-child(n+7){display:none}
  .grila.acasa.piese>:nth-child(n+7){display:flex}
  .grila.acasa.piese>:nth-child(n+10){display:none}
  .grila.sim>:nth-child(n+7){display:none}
  .top a{padding:12px 4px;margin:-12px -4px}
  .fir a{padding:12px 6px;margin:0 -6px}
  .coduri .cod{min-height:44px;justify-content:center}
  .butoane .btn,.butoane #share,.butoane #favBtn{min-height:46px}
  .incredere>a,.incredere>div{min-height:44px;align-items:center}
  .wa-plutitor{width:48px;height:48px;right:16px;bottom:16px}
  .chat-plutitor{right:16px;bottom:74px;height:48px;padding:0 14px 0 12px;font-size:14px}
  .wa-plutitor .i{width:26px;height:26px}
  .mare{max-height:min(44vh,460px)}             /* galeria piesei: cutia 4:3 (~540 px) + antetul lasau titlul si pretul sub ecran pe tableta in portret */
}
/* laptop 1024–1279: selectorul „Alege mașina” taia etichetele („Mar…”, „Mo…”, „Cat…”) → pe 2 coloane, butonul pe tot randul;
   bula WhatsApp statea peste butoanele din fisa piesei (care are deja „Trimite mesaj”) */
@media (min-width:1024px) and (max-width:1279px){
  .erou>.c{gap:32px}
  .selector-pasi{grid-template-columns:1fr 1fr}
  .selector-pasi .btn{grid-column:1/-1}
  body:has(.prod .fisa) .wa-plutitor{display:none}
}
/* calculator: galeria piesei pe 1366×768 / 1024×768 lasa miniaturile si contorul sub ecran → poza mare se plafoneaza pe ecranele scunde
   (pe 1920×1080 nu se aplica); sagetile se vad putin si fara hover; bula WhatsApp putin mai mica */
@media (min-width:1024px) and (max-height:860px){
  .mare{max-height:calc(100vh - 360px);min-height:300px}
}
@media (hover:hover) and (min-width:1024px){
  .mare-prev,.mare-next{opacity:.7}
  .mare:hover .mare-prev,.mare:hover .mare-next{opacity:1}
}
@media (min-width:1024px){
  .wa-plutitor{width:48px;height:48px;right:16px;bottom:16px}
  .chat-plutitor{right:16px;bottom:74px;height:48px;padding:0 14px 0 12px;font-size:14px}
  .wa-plutitor .i{width:26px;height:26px}
}
/* pagina masinii: pozele masinilor sunt late (16:9 / 3:2) si stateau in caseta 4:3 cu benzi albe; butonul „Întreabă de o piesă” pe tot randul */
.prod:has(.spec.pastile) .mare{aspect-ratio:3/2}
.fisa:has(.spec.pastile) .butoane .btn.wa{grid-column:1/-1;white-space:nowrap}
/* piesa vanduta: un singur „Vândută” in fisa (span-ul de stoc ramane in DOM pentru stoc.js), linkul din caseta rosie lizibil */
.fisa:has(.pret b.vandut) .stoc.nu{display:none}
.vanduta-info a{font-weight:700;text-decoration:underline}
/* telefon: sugestiile mai dense (3 piese deasupra tastaturii), subsolul mai aproape, X-ul lightbox-ului sub crestatura, insigna „în curte” nu se
   repeta pe lista unde toate sunt in curte */
@media (max-width:767px){
  .sug{min-height:0;padding:6px 16px;gap:10px}
  .sug-grup{padding:8px 16px 2px}
  .sug-masina{padding:8px 16px}
  .subsol{margin-top:32px}
  .lb-inchide{top:calc(12px + env(safe-area-inset-top))}
  .sectiune:has(>.taburi-masini) a.card[href^="/dezmembrari/"] .p span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cos-sertar,.cookie-banner{transition:none!important}
}
/* ecrane late: cosul si formularul de comanda nu se mai intind pe ~1500 px */
@media (min-width:1700px){
  .cos-pag,.cmd-pag{max-width:var(--container);margin-left:auto;margin-right:auto}
}

/* prima pagina: cate carduri se vad (randuri pline la fiecare numar de coloane) */
.grila.acasa>:nth-child(n+11){display:none}
.grila.acasa.piese>:nth-child(n+11){display:flex}
.grila.acasa.piese>:nth-child(n+16){display:none}
@media (max-width:1279px){.grila.acasa>:nth-child(n+9){display:none}.grila.acasa.piese>:nth-child(n+9){display:flex}.grila.acasa.piese>:nth-child(n+13){display:none}}
@media (max-width:767px){.grila.acasa>:nth-child(n+7){display:none}.grila.acasa.piese>:nth-child(n+7){display:flex}.grila.acasa.piese>:nth-child(n+9){display:none}}
/* „Piese similare” / „Alte piese de pe masina”: doar randuri pline (5 coloane: 10 carduri, 4: 8, 2 si 6: 6, 8: 8) */
.grila.sim>:nth-child(n+11){display:none}
@media (max-width:1279px){.grila.sim>:nth-child(n+9){display:none}}
@media (max-width:767px){.grila.sim>:nth-child(n+7){display:none}}
@media (min-width:1700px){.grila.sim>:nth-child(n+7){display:none}}
@media (min-width:2400px){.grila.sim>:nth-child(n+7){display:flex}.grila.sim>:nth-child(n+9){display:none}}
/* ecrane late (patronul: 3439 px, „sa se puna pe tot ecranul”): continut fluid, mai multe coloane */
@media (min-width:1700px){
  .c{max-width:none;padding:0 clamp(32px,3vw,80px)}
  .ingust,.pagina{max-width:1560px;margin-left:auto;margin-right:auto}
  .grila{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}
  .grila.acasa>:nth-child(n){display:flex}
  .grila.acasa.piese>:nth-child(n+13){display:none}
  .erou-foto img{max-height:560px}
}
@media (min-width:2400px){
  body{font-size:17px}
  .grila{grid-template-columns:repeat(8,minmax(0,1fr))}
  .grila.acasa>:nth-child(n+9),.grila.acasa.piese>:nth-child(n+17){display:none}
  .grila.acasa.piese>:nth-child(n+9){display:flex}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.tile,.btn,.fav,.meniu,.cauta,.cauta-mare{transition:none}
  .cap,.bara-mobil,.lightbox img{transition:none}          /* 5 nov: antetul / bara de jos / poza marita fara animatie */
  .mare-pista{scroll-behavior:auto}
}

/* 7 nov: comanda-mea — starea comenzii (treptele, cardul de rezultat) */
.cmd-rez{margin:18px 0}
.cmd-rez:focus{outline:0}
.cmd-stare-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff}
.cmd-eticheta{margin:0 0 6px;font-size:24px;font-weight:800;color:var(--ink)}
.cmd-eroare{margin:0;padding:12px 14px;border-radius:10px;font-weight:600;background:var(--err-bg);color:var(--err)}
.trepte{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:18px 0;padding:0;list-style:none}
.trepte li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:13px;color:var(--muted)}
.trepte li::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--line);z-index:0}
.trepte li:first-child::before{display:none}
.trepte .pct{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);background:#fff}
.trepte li.facut .pct{border-color:var(--blue-600);background:var(--blue-600)}
.trepte li.facut::before,.trepte li.curent::before{background:var(--blue-600)}
.trepte li.curent{color:var(--ink);font-weight:800}
.trepte li.curent .pct{border-color:var(--blue-600);background:var(--blue-600);box-shadow:0 0 0 4px var(--accent-umbra)}
.trepte.final li::before{background:var(--ok)}
.trepte.final li .pct{border-color:var(--ok);background:var(--ok)}
.trepte.final li.curent{color:var(--ok)}
.trepte.final li.curent .pct{box-shadow:0 0 0 4px var(--ok-bg)}
.cmd-date{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0 0 14px}
.cmd-date dt{font-size:13px;color:var(--muted)}
.cmd-date dd{margin:0;font-weight:700}
.cmd-stare-card h2{font-size:16px;margin:14px 0 6px}
@media (max-width:480px){
  .trepte{grid-template-columns:1fr;gap:10px}
  .trepte li{flex-direction:row;text-align:left;gap:10px}
  .trepte li::before{display:none}
  .cmd-date{grid-template-columns:1fr}
}