/* Tema Fișa: ce adaugă portul peste CSS-ul machetei (fisa-base = style.min.css, fisa-search = hero-search.css,
   fisa-r6 = upgrade.css din runda 6). Aici: HTML-ul randat pe server (ambele moduri Listă/Fișe, teancul fără JS,
   <picture>, specificațiile ca <dl>), subsolul legal comun, câmpurile comune ale formularelor și bara de jos. */

:root { --cac-bottom: 0px; }
@media (max-width: 768px) { :root { --cac-bottom: calc(72px + env(safe-area-inset-bottom)); } }

/* <picture> din macro-ul comun: transparent pentru layout, ca regulile `.x img` ale machetei să rămână valabile */
picture { display: contents; }

/* ---------- antetul: limba e un link spre pagina în cealaltă limbă ---------- */
.lang a { display: inline-block; min-width: 36px; padding: 6px 9px; border-radius: 3px; text-align: center; text-decoration: none;
  font: 600 12.5px/1 var(--font-b); color: var(--label); }
.lang a[aria-current="true"] { background: var(--ink); color: #fff; }
.lang a:hover:not([aria-current]) { color: var(--ink); }
@media (max-width: 400px) { .lh .lang a { min-width: 30px; padding: 6px 7px; } }

/* ---------- teancul de fișe: pozițiile stau în CSS (data-d), JS-ul doar le mută ---------- */
.os-wrap[data-d="0"] { transform: none; opacity: 1; z-index: 5; }
.os-wrap[data-d="1"] { transform: translate(-7.5%, 2.4%) rotate(-5.2deg); opacity: 1; z-index: 4; }
.os-wrap[data-d="2"] { transform: translate(6.5%, 3.8%) rotate(3.8deg); opacity: 1; z-index: 3; }
.os-wrap[data-d="3"] { transform: translate(6.5%, 3.8%) rotate(3.8deg); opacity: 0; z-index: 1; visibility: hidden; transition: transform .5s var(--ease), opacity .4s var(--ease), visibility 0s .4s; }
.os-wrap[data-d="out"] { transform: translate(-62%, 4%) rotate(-9deg); opacity: 0; z-index: 6; }
@media (prefers-reduced-motion: no-preference) {
  .stack:not(.moved) .os-wrap[data-d="1"] { animation: fan1 .5s var(--ease) .15s both; }
  .stack:not(.moved) .os-wrap[data-d="2"] { animation: fan2 .5s var(--ease) .15s both; }
}
@keyframes fan1 { from { transform: none; } }
@keyframes fan2 { from { transform: none; } }
.os-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Listă / Fișe: ambele în HTML, se vede una (sub 700 px mereu fișele, ca în machetă) ---------- */
.list-slot[data-view="grid"] .v-list, .list-slot[data-view="list"] .v-grid { display: none; }
@media (max-width: 699px) {
  .list-slot[data-view] .v-list { display: none; }
  .list-slot[data-view] .v-grid { display: block; }
  .results + .band-red { display: none; }
  .view-toggle { display: none; }
}
.list-slot .v-list[hidden], .list-slot .v-grid[hidden] { display: none !important; }
.rin { animation: rowIn .34s var(--ease) both; }
.ms-p s, .pl-p s { font-weight: 400; color: var(--label); font-size: .7em; margin-right: 4px; }
.ms-sold { color: var(--ink); }
.pl-th img, .ms-ph img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- fișa mașinii ---------- */
.cover a { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.cover a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.contact-sheet a { display: block; cursor: zoom-in; border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--field-h, #EEF0F0); position: relative; width: 100%; }
.contact-sheet a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.contact-sheet a:hover img { transform: scale(1.03); }
.doc-title h1 .year { color: var(--label); font-weight: 600; }
.price .prev-p { display: block; color: var(--label); font-size: 15px; }
.doc-sec-0 { margin-top: 0; }
/* specificațiile vin ca <dl class="ca-specs"> (contractul); arată ca tabelul .kv al fișei */
.ca-specs { margin: 0; font-size: 15px; }
.ca-specs > div { display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.ca-specs > div:last-child { border-bottom: 0; }
.ca-specs dt { color: var(--label); }
.ca-specs dd { margin: 0; color: var(--ink); }
@media (max-width: 640px) { .ca-specs > div { grid-template-columns: 50% minmax(0, 1fr); } .ca-specs { font-size: 14.5px; } }
.eq-h { font: 600 14px/1.3 var(--font-t); color: var(--label); margin: 16px 0 8px; }
.doc-eq .eq-h:first-of-type { margin-top: 2px; }
.doc-desc p { margin: 0 0 12px; max-width: 68ch; }
.aside .like { margin-top: 12px; }

/* ---------- paginile fixe (Despre noi, legal) și notele (404, mulțumim) ---------- */
.prose { max-width: 900px; margin: clamp(24px, 4vw, 48px) auto 0; }   /* centrat în ramă, ca .note-sheet; stătea lipit de stânga (Arthur, 20 oct) */
.prose h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.025em; margin: 28px 0 8px; }
.prose .updated { color: var(--label); font-size: 14px; }
.prose h2 { font-size: 22px; margin: 34px 0 12px; display: inline-block; padding-bottom: 7px; border-bottom: 2px solid var(--red); }
.prose h3 { font-size: 17px; margin: 22px 0 6px; }
.prose p, .prose li, .prose dd { max-width: 70ch; }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 4px; }
.prose a { color: var(--ink); text-decoration-color: var(--red); text-underline-offset: 3px; }
.prose .lead { font-size: 18px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 18px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hair); }
/* Cele trei tabele de cookie-uri au aceleași 5 coloane: pe ecran lat, aceleași lățimi, ca să stea aliniate unul sub altul.
   Pe telefon rămân pe lățimea conținutului, cu derulare laterală (regula generală de mai sus). */
@media (min-width: 701px) {
  .page-cookies table { display: table; table-layout: fixed; }
  .page-cookies th:nth-child(1) { width: 20%; } .page-cookies th:nth-child(2) { width: 12%; }
  .page-cookies th:nth-child(3) { width: 19%; } .page-cookies th:nth-child(4) { width: 14%; }
  /* cu coloane fixe, un cuvânt lung (clarsite_admin 122px, „verification”) ieșea peste coloana vecină sub ~820px; se rupe în loc să iasă */
  .page-cookies th, .page-cookies td { overflow-wrap: anywhere; }
}
/* Butonul „Setări cookie” din text: era <button> nestilizat (chenar gri de browser). Desen: 44px, chenar ink. */
.btn-cookie-settings { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 4px; border: 1.5px solid var(--ink);
  background: transparent; color: var(--ink); font: 600 15px/1 var(--font-t); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), transform .14s var(--ease); }
.btn-cookie-settings:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .btn-cookie-settings:hover { background: var(--ink); color: #fff; } }
@media (prefers-reduced-motion: reduce) { .btn-cookie-settings { transition: background-color .16s ease, color .16s ease; } .btn-cookie-settings:active { transform: none; } }
.prose dt { font-weight: 600; margin-top: 10px; }
.prose dd { margin: 2px 0 0; }
.prose .facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
/* Despre noi: cifrele mari, cu explicația dedesubt; prima frază din intro ca subtitlu. */
.page-despre .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 24px; margin: 6px 0 18px; }
.page-despre .facts li { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--label-desk); font-size: 15px; line-height: 1.35; }
.page-despre .facts strong { font: 700 clamp(26px, 3vw, 34px)/1.05 var(--font-t); letter-spacing: -.02em; color: var(--red); white-space: nowrap; }
.page-despre .page-intro .lead strong { display: block; font: 700 clamp(20px, 2.2vw, 24px)/1.3 var(--font-t); letter-spacing: -.01em; color: var(--ink); }
@media (max-width: 720px) { .page-despre .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .page-despre .facts strong { font-size: 23px; } }
.prose .plain { list-style: none; padding: 0; }
.prose details { border-bottom: 1px solid var(--hair); padding: 12px 0; }
.prose summary { font: 600 16px/1.35 var(--font-t); cursor: pointer; }
.prose section img { height: auto; }
.note-sheet { max-width: 760px; margin: clamp(28px, 5vw, 64px) auto 0; }
.note-sheet h1 { font-size: clamp(30px, 4.4vw, 48px); letter-spacing: -.025em; margin-top: 10px; }
.note-sheet .lead { margin-top: 10px; }
.note-code { font: 700 clamp(64px, 12vw, 120px)/1 var(--font-t); color: var(--red); letter-spacing: -.04em; margin: 28px 0 0; }
.note-sheet .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.note-sheet .doc-foot { margin-top: 40px; }
.note-sheet .done-top { margin-top: 24px; }
.note-sheet .next-h { font-size: 18px; margin-top: 26px; }

/* ---------- formularele: câmpurile comune (form_plumbing) ---------- */
.ca-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ca-form-privacy { font-size: 13px; line-height: 1.5; color: var(--label); margin: 14px 0 4px; }
.ca-form-privacy a { color: var(--ink); text-underline-offset: 3px; }
.ca-turnstile:not(:empty) { margin: 12px 0 4px; }
.hs .ca-form-privacy { margin-top: 10px; }
.rq-foot { margin-top: 18px; }
.cs-form .ca-form-privacy { margin-bottom: 0; }

/* ---------- leasing: logo-urile, la înălțimea lor optică (în macheta erau stiluri pe element) ---------- */
.logos2 .lg-unicredit { --h: 31.8; } .logos2 .lg-raiffeisen { --h: 30.8; } .logos2 .lg-bcr { --h: 40.5; }
.logos2 .lg-bt { --h: 27.4; } .logos2 .lg-moov { --h: 28.3; } .logos2 .lg-impuls { --h: 30.4; }
.logos2 .lg-garanti { --h: 28.8; } .logos2 .lg-autonom { --h: 33; } .logos2 .lg-brd { --h: 35.6; }
.lease-ex { font-size: 12.5px; color: var(--label-desk); margin: 10px 0 0; }
.ct-card .mini-lh img, .incl .mini-lh img, .doc .mini-lh img { aspect-ratio: 783 / 348; }
.foot-logo img { aspect-ratio: 900 / 389; }

/* ---------- subsolul: blocul legal comun (_shared/footer_legal.html) pe fondul închis ---------- */
.foot { padding-bottom: calc(40px + var(--cac-bottom)); }
@media (max-width: 768px) { .foot { padding-bottom: 40px; } }
.foot-in { align-items: start; }
.ca-legal { display: grid; gap: 12px; font-size: 13px; line-height: 1.6; color: #ABA39F; }
.ca-legal ul { list-style: none; margin: 0; padding: 0; }
.ca-legal-identity { display: flex; flex-wrap: wrap; gap: 0 14px; }
.ca-legal-identity li:first-child { flex-basis: 100%; color: #fff; font-weight: 600; }
.ca-legal-contact { margin: 0; }
.ca-legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ca-legal-links a, .ca-legal-contact a { color: #CCC6C2; }
.ca-legal-cookies { background: none; border: 0; padding: 0; font: inherit; color: #CCC6C2; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ca-legal-cookies:hover { color: #fff; }
.ca-legal-cookies:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ca-legal-anpc { margin: 4px 0 0; }
.ca-legal-anpc img { width: 250px; height: 50px; max-width: 100%; background: #fff; border-radius: 4px; }

/* ---------- pozele mașinilor se văd ÎNTREGI: ramă neutră, object-fit: contain ---------- */
.os-ph img, .ms-ph img, .pl-th img, .cover img, .contact-sheet img { object-fit: contain; }
.os-ph, .ms-ph, .pl-th, .cover, .contact-sheet a { background: var(--field-h, #EEF0F0); }
.cover { aspect-ratio: 4 / 3; }
.os-ph { aspect-ratio: 16 / 10; }
.mgrid.feat > li:first-child .ms-ph { aspect-ratio: 4 / 3; }
/* „cu TVA” lângă prețul în euro */
.ms-p .vat, .pl-p .vat, .price b .vat { font: 600 12.5px/1 var(--font-b); color: var(--label); letter-spacing: 0; white-space: nowrap; }
.price b .vat { font-size: 14px; }
.rq-foot .ca-form-privacy { flex: 1 1 240px; margin: 0; }
.rq-after { margin-top: 10px; }

/* ---------- un singur nume și o singură culoare pentru cerere: „Cere ofertă”, roșu, pe butoanele paginii și pe cele care
   trimit formularul. Scurtătura din antet și din bara de jos e conturată, ca telefonul și WhatsApp ---------- */
.lh-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.lh-cta:hover { background: var(--ink); color: #fff; }
.mbar .mbar-cta { border-color: var(--ink); font-weight: 700; }

/* ---------- bannerul de cookie-uri nu acoperă pictograma ANPC SAL ---------- */
/* cât e deschis bannerul, bara de jos se ascunde (bannerul stă jos, fără ea) */
html.cac-open { --cac-bottom: 0px; }
html.cac-open .mbar { display: none; }
/* pe un telefon întors (înălțime mică) antetul nu mai e lipit sus: altfel antet + banner acoperă tot ecranul */
@media (max-height: 520px) { .lh { position: relative; } }
/* pictograma e ultima în subsol, deci la capătul paginii stă imediat deasupra bannerului */
@media (max-width: 760px) { .foot-in .foot-links { order: -1; } }

/* ---------- șlefuirea din 19.10.2026 (auditul de design) ---------- */
:root {
  --ok: #1E7A45;      /* oklch(.53 .12 152): în stoc, la noi */
  --ext: #A9630C;     /* oklch(.58 .13 65): stoc extern, la un partener */
}
/* starea mașinii: plin verde = în stoc la noi; inel chihlimbar = stoc extern; inel gri = rezervată sau vândută */
.pl-tag.st-own::before, .status.st-own::before { background: var(--ok); border: 0; }
.pl-tag.st-ext::before, .status.st-ext::before { background: transparent; border: 2px solid var(--ext); }

/* lista: puterea are forma din Date tehnice („330 CP / 245 kW”), deci coloana ei crește, iar anul (4 cifre) se strânge.
   Kilometrajul (aliniat la dreapta) are 30 px până la putere, ca cele două să nu se citească drept un singur șir. */
@media (min-width: 861px) {
  .pl-head .pl-pow, .pl-row .pl-pow { padding-left: 12px; }
  .pl-row .pl-c.r, .pl-row .pl-pow { white-space: nowrap; }   /* nu .pl-p (tot .r): „Prețul anterior reducerii: …” se rupe */
}
@media (min-width: 1181px) { .pl-head, .pl-row { grid-template-columns: 120px minmax(0, 1fr) 104px 104px 150px 120px 176px; } }
/* 861–1180: coloana înmatriculării are 104px (antetul „Prima înmatriculare”), deci Puterea iese din listă, ca și Combustibilul;
   altfel numele mașinii rămâne cu ~1px la 861px. Puterea e pe card și pe pagina mașinii (21 oct 2026). */
@media (min-width: 861px) and (max-width: 1180px) { .pl-head, .pl-row { grid-template-columns: 112px minmax(0, 1fr) 104px 104px 176px; } .pl-head .pl-pow, .pl-row .pl-pow { display: none; } }

/* teancul: rândul de comenzi e anterior · titlu · următor (butonul de pauză e scos, 20 oct 2026); fisa-base îl așază flex */

/* bara de filtre: strânsă într-un rând cât stă lipită sus (fisa.js, compactTools) */
.tools-mini { display: none; }
.tools.is-stuck { box-shadow: var(--sh-1); }
/* între antet (99 px) și bara lipită (top 108 px) rămânea o fâșie prin care treceau rândurile listei */
.tools.is-stuck::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 12px; background: var(--paper); }
.tools.is-compact { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.tools.is-compact > div:not(.tools-x):not(.tools-mini) { display: none; }
.tools.is-compact .tools-mini { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.tools.is-compact .tools-x { flex: none; }
/* desfăcută cât e lipită: „Filtre” rămâne primul rând, ca bara să se poată strânge la loc și fără Escape */
.tools.is-stuck:not(.is-compact) .tools-mini { display: flex; align-items: center; gap: 14px; grid-column: 1 / -1; order: -1; min-width: 0; }
.tools-open { min-height: 40px; padding: 0 16px; flex: none; }
.tools-sum { font-size: 14px; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }


/* ---------- a doua trecere (19.10.2026, a doua parte a auditului) ---------- */
/* textarea nu era în regula `button, input, select { font: inherit }` a machetei: placeholder-ele „Dotări dorite” și
   „Preferințe” ieșeau cu fontul monospațiat al browserului */
textarea { font: inherit; color: inherit; }

/* 1081–1240 px: „Resetează filtrele” + comutatorul Listă/Fișe nu încăpeau în coloana lor și acopereau săgeata
   selectului „Ordine”; comutatorul rămâne doar cu iconițe (textul rămâne pentru cititoarele de ecran) */
@media (min-width: 1081px) and (max-width: 1240px) {
  .tools-x .view-toggle button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* telefonul: filtrele stau sub „Filtre (n)” + ce e ales (fisa.js, compactTools → mobile) */
@media (max-width: 760px) {
  .tools.m-closed > div:not(.tools-x):not(.tools-mini) { display: none; }
  .tools .tools-mini { display: flex; align-items: center; gap: 12px; grid-column: 1 / -1; min-width: 0; }
}
/* sub 700 px se vede oricum doar Fișe, deci comutatorul pleacă odată cu filtrele; la 701–760 px rămâne */
@media (max-width: 700px) { .tools.m-closed .tools-x { display: none; } }
/* Lansarea, 07.11.2026 (Lighthouse pe telefon, CLS 0,139 pe /masini-in-stoc/): fisa.js strângea filtrele DUPĂ prima
   randare, iar lista urca ~350 px. Cu JS pornit, filtrele stau strânse încă din CSS, până când scriptul pune m-open
   (filtre în adresă sau „Filtre” apăsat). Fără JS (scripting: none) sau într-un browser care nu știe `scripting`
   rămân deschise, ca înainte. */
@media (max-width: 760px) and (scripting: enabled) {
  .tools:not(.m-open) > div:not(.tools-x):not(.tools-mini) { display: none; }
}
@media (max-width: 700px) and (scripting: enabled) { .tools:not(.m-open) .tools-x { display: none; } }

/* fișa mașinii pe telefon: poza întâi (mașina e eroul), apoi titlul și prețul */
@media (max-width: 760px) {
  #doc { display: flex; flex-direction: column; }
  #doc > .mini-lh, #doc > .rule { order: -2; }
  #doc > .cover { order: -1; margin-top: 0; margin-bottom: 20px; }
  /* în flex, marginile nu se mai contopesc: ultimul paragraf al unei secțiuni nu mai adaugă spațiu în plus */
  #doc .doc-sec p:last-child { margin-bottom: 0; }
}

/* teancul pe telefon (foaia sub ~360 px): textul în cqi ieșea la 6–8 px. Tabelul, versiunea și antetul au un minim
   lizibil; rândurile firmei din subsolul foii (6 px) nu încap lizibil și sunt oricum în subsolul paginii, deci pleacă. */
@container (max-width: 360px) {
  .os-tb { font-size: max(2.85cqi, 11px); }
  .os-tb div { padding: max(1.05cqi, 2px) 0; }
  .os-v { font-size: max(2.75cqi, 10.5px); }
  .os-h span, .os-p small { font-size: max(2.55cqi, 9.5px); }
  .os-f > span { display: none; }
}

/* Antetul lipicios nu desenează nimic în afara cutiei lui. Umbra de la derulare (`.lh::after` din fisa-base: 10 px sub
   antet, top: 100%) lăsa uneori, în Chrome, o fâșie de 10 px nedesenată sub antet, prin care se vedeau cardurile peste
   care derulaseși (raportat de Arthur, 19.10.2026). Linia roșie de jos separă oricum antetul de pagină. */
.lh::after { content: none; }

/* ---------- diplomele: fiecare casetă deschide diploma; cu mouse-ul, previzualizarea apare deasupra casetei ---------- */
.dip { position: relative; padding: 0; }
.dip-a { display: block; padding: 18px 6px 14px; color: inherit; text-decoration: none; border-radius: 2px; }
.dip-a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dip span.dip-pop { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  .dip { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
  .dip:hover, .dip:focus-within { transform: translateY(-2px); box-shadow: var(--sh-1); z-index: 5; }
  .dip span.dip-pop {
    display: block; position: absolute; bottom: calc(100% + 14px); left: 50%; width: 380px; margin: 0; padding: 8px;
    background: var(--paper); border-radius: 4px; box-shadow: var(--sh-2); pointer-events: none;
    opacity: 0; visibility: hidden; transform: translate(-50%, 8px) scale(.97); transform-origin: 50% 100%;
    transition: opacity .2s var(--ease), transform .26s var(--ease), visibility 0s linear .26s;
  }
  .dip span.dip-pop img { display: block; width: 100%; height: auto; border-radius: 2px; }
  .dip:hover span.dip-pop, .dip:focus-within span.dip-pop {
    opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition-delay: 0s;
  }
  /* la margini, previzualizarea se aliniază cu caseta, ca să nu iasă din pagină */
  .dip:nth-child(-n+2) span.dip-pop { left: 0; transform: translate(0, 8px) scale(.97); transform-origin: 20% 100%; }
  .dip:nth-child(-n+2):hover span.dip-pop, .dip:nth-child(-n+2):focus-within span.dip-pop { transform: translate(0, 0) scale(1); }
  .dip:nth-last-child(-n+2) span.dip-pop { left: auto; right: 0; transform: translate(0, 8px) scale(.97); transform-origin: 80% 100%; }
  .dip:nth-last-child(-n+2):hover span.dip-pop, .dip:nth-last-child(-n+2):focus-within span.dip-pop { transform: translate(0, 0) scale(1); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 641px) and (max-width: 1100px) {
  /* 5 pe rând: marginile sunt coloana 1 și coloana 5 */
  .dip:nth-child(5n+1) span.dip-pop { left: 0; transform: translate(0, 8px) scale(.97); }
  .dip:nth-child(5n+1):hover span.dip-pop, .dip:nth-child(5n+1):focus-within span.dip-pop { transform: translate(0, 0) scale(1); }
  .dip:nth-child(5n) span.dip-pop { left: auto; right: 0; transform: translate(0, 8px) scale(.97); }
  .dip:nth-child(5n):hover span.dip-pop, .dip:nth-child(5n):focus-within span.dip-pop { transform: translate(0, 0) scale(1); }
  /* caseta 8 e aici în coloana 3, nu la margine: înapoi la centru (aliniată la dreapta ieșea din ecran la 641–649 px) */
  .dip:nth-child(8) span.dip-pop { left: 50%; right: auto; transform: translate(-50%, 8px) scale(.97); transform-origin: 50% 100%; }
  .dip:nth-child(8):hover span.dip-pop, .dip:nth-child(8):focus-within span.dip-pop { transform: translate(-50%, 0) scale(1); }
}
@media (hover: hover) and (pointer: fine) and (min-width: 641px) {
  /* fără loc deasupra (fisa.js, dipInit): previzualizarea coboară sub casetă */
  .dip.pop-down span.dip-pop { bottom: auto; top: calc(100% + 14px); transform-origin: 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dip, .dip span.dip-pop { transition: opacity .01s, visibility 0s; }
  .dip:hover, .dip:focus-within { transform: none; }
}

/* insigna din prima vedere: categoria clasamentului (de pe diplomă), mai discretă decât locul */
.award small { font-size: inherit; font-weight: 400; color: var(--label); }
@media (max-width: 1240px) {   /* sub 1240 px nu mai încape pe un rând: categoria trece dedesubt */
  .hero .award { border-radius: 16px; align-items: flex-start; }
  .award small { display: block; margin-top: 1px; }
  .award small .dot { display: none; }
}

/* ---------- Paginile pe marcă și pe model (brand.html, 20.10.2026) + legăturile spre ele din stoc și din fișă ---------- */
.car-top { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.grp-top { padding-bottom: 0; }
.grp-h { padding-top: clamp(18px, 2.4vw, 32px); }
.grp-h h1 span { color: var(--label-desk); }
.grp-h p { max-width: 64ch; }
.grp-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin: 0 0 clamp(18px, 2.2vw, 28px); }
.grp-nav-h { font: 600 13px/1.2 var(--font-t); color: var(--label-desk); }
.grp-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.grp-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--hair-2);
  border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font: 600 14px/1 var(--font-t);
  transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .14s var(--ease); }
.grp-nav a span { font: 600 12px/1 var(--font-b); color: var(--label-desk); font-variant-numeric: tabular-nums; }
.grp-nav a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .grp-nav a:hover { border-color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .grp-nav a { transition: border-color .16s ease, background-color .16s ease; } .grp-nav a:active { transform: none; } }
#grpList { margin-bottom: clamp(28px, 3.4vw, 48px); }
.grp-order { margin-bottom: clamp(28px, 3.4vw, 48px); }
.grp-others { margin-bottom: 0; }
@media (max-width: 699px) {
  .grp-nav { gap: 8px 12px; } .grp-nav a { min-height: 44px; }
  /* firul de navigare de deasupra fișei și a paginilor de marcă: ținte de 44px pe telefon (aveau 22) */
  .car-top { padding-top: 10px; padding-bottom: 6px; gap: 0 18px; } .car-top a { display: inline-flex; align-items: center; min-height: 44px; }
}