/* Placa de produs - UN SINGUR fel de a arata un produs pe tot situl.
   (Radu, 16.09.2026 21:56: "aceeasi tema, tinem situl intr-o singura nuanta", despre design.)
   Pana acum aceleasi produse aratau in doua feluri: placi patrate pe /sortiment si randuri
   late cu poza mica pe /produkte, cu alt buton si alt fel de a scrie pretul ("39,99 EUR"
   fata de "39,99 EUR" cu simbol). Fisierul asta e sursa unica; ambele pagini il folosesc.
   Regulile de simetrie (poza patrata, numele la doua randuri, randul de pret de inaltime
   fixa) sunt comentate la locul lor - ele tin liniile de baza aliniate pe tot randul. */

/* 2243 de placi intr-o pagina inseamna 21.443 de noduri; recomandarea pentru un DOM
   sanatos e sub 1500. `content-visibility:auto` lasa browserul sa NU deseneze grilele care
   nu sunt pe ecran, iar `contain-intrinsic-size` ii da o inaltime presupusa, ca bara de
   scroll sa nu sara. Nu schimba nimic din ce vede omul; schimba doar cat munceste telefonul. */
.best-grid{content-visibility:auto;contain-intrinsic-size:auto 600px;
  list-style:none;margin:0 0 22px;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
/* Cartela are acum doua parti: zona de deschidere a fisei si butonul de adaugare.
   Coloana, ca butonul sa cada mereu jos, la aceeasi inaltime in tot randul. */
.best-card{min-width:0;display:flex;flex-direction:column}
.best-card>.best-open{flex:1}
/* Placa intreaga e buton. `all:unset` sterge stilul de buton al browserului; restul il punem
   noi, ca sa arate exact ca inainte, dar sa se poata deschide si cu tastatura. */
.best-open{all:unset;box-sizing:border-box;display:flex;flex-direction:column;width:100%;
  cursor:pointer;border-radius:var(--radius);padding:4px;margin:-4px;transition:background .15s}
/* Numai pe mouse. Pe iPhone :hover se lipeste dupa atingere si placa ramane colorata cand
   te intorci din fisa, ca si cum ar fi selectata - vazut pe telefonul lui Radu, 16.09. */
@media (hover:hover){.best-open:hover{background:var(--wash)}}
.best-open:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.best-shot{aspect-ratio:1;background:#fff;border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.best-shot img{width:100%;height:100%;object-fit:contain}
/* Pe /produkte placa e o legatura spre pagina produsului, deci copiii sunt <span>-uri:
   fara `display:block` ar curge pe acelasi rand. Aceleasi reguli, aceeasi forma. */
.best-name,.best-meta,.best-verf,.best-shot,.best-reason{display:block}
/* Varianta de placa folosita pe paginile de scop: sub nume incape motivul pentru care
   produsul e acolo. Taiat la trei randuri, ca placile sa ramana egale intr-un rand. */
.best-reason{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  min-height:52px}
.best-name{margin:10px 0 0;font-size:14px;line-height:1.35;
  min-height:calc(2 * 1.35em);              /* doua randuri, mereu */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Radu, 16.09.2026: "numerele de produse nu au simetrie", despre lista de produse.
   Cauza masurata: doar 95 din 1777 produse au pret. In acelasi rand, unele placi se terminau
   dupa nume si altele dupa pret, deci marginea de jos iesea zimtata.
   Prima solutie incercata aici a fost sa NU se rezerve linia - dar asta muta problema, nu o
   rezolva. Acum linia exista intotdeauna si, unde nu e pret, spune ceva util: exact ce
   promite deja textul din capul paginii, ca pretul se afla la cerere. Plus `margin-top:auto`,
   ca sa stea lipita de baza placii indiferent daca numele are un rand sau doua. */
.best-meta{margin:5px 0 0;padding-top:2px;display:flex;align-items:baseline;gap:0 10px;
  margin-top:auto;flex-wrap:wrap;
  /* Inaltime de linie FIXA: pretul e 16px bold, "auf Anfrage" 13px. Fara ea, cutia liniei
     avea inaltimi diferite si randul iesea decalat cu 4-5 px - masurat, nu presupus. */
  /* Doua linii rezervate la TOATE placile (22px x 2): una pentru pret, una pentru stare.
     Masurat inainte de fix: placile cu 'nicht verfuegbar' impingeau eticheta de dedesubt
     cu 19px, deci intr-un rand de cinci, doua stateau mai sus decat celelalte trei. */
  line-height:22px;height:48px;align-content:flex-start}
/* Starea trece pe linia ei, mereu. Pe acelasi rand cu pretul, "nicht verfuegbar" rupea suma
   in doua ("15,99" pe un rand, "EUR" pe urmatorul) si placile dintr-un rand nu mai aveau
   aceeasi linie de baza - vazut in captura de la 21:55, la Gummies & Sticks.
   Linia goala se rezerva la TOATE placile, nu doar la cele indisponibile: altfel cele cu
   eticheta ar fi mai inalte si randul ar iesi iar zimtat. */
/* Pe o placa de 135px, 'nicht verfuegbar' se rupea in doua si crestea randul de meta de la
   44 la 56px. Pe o singura linie, la 11px, incape peste tot. */
.best-aus{flex-basis:100%;white-space:nowrap;font-size:11px;color:var(--warn)}
/* Doua randuri rezervate: 'Gleich mitnehmen' se aseaza pe doua, 'Bestellbar' pe unul.
   Fara rezerva, placile de raft dintr-un rand stateau cu 19px mai sus decat celelalte. */

.best-anfrage{font-size:13px;color:var(--muted)}
/* Eticheta de disponibilitate. Verdele marcii spune "e aici"; comandabilul ramane neutru,
   ca sa nu para o a doua promisiune la fel de tare. */
.best-verf{display:block;margin:4px 0 0;height:32px;font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.best-verf.v-lager{color:var(--green);font-weight:600}
.best-verf.v-best{color:var(--muted)}
.best-add{margin-top:8px;width:100%;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius);padding:8px 10px;font:inherit;font-size:13px;cursor:pointer;
  color:var(--ink);transition:background .15s,border-color .15s}
@media (hover:hover){.best-add:hover{border-color:var(--green);background:var(--wash)}}
.best-add:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.best-add.gata{border-color:var(--green);color:var(--green)}
.sort-filter{display:flex;align-items:center}
.sort-filter label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.sort-filter input{width:18px;height:18px;accent-color:var(--green)}
/* Sortarea (07.10.2026). `.controls` din storefront.css are doua coloane (1fr 210px) si e
   folosita si de bestellbar.html/produkte.html, care sunt moarte (301 spre /sortiment) dar
   stau pe disc - deci grila se schimba DOAR pentru pagina asta, prin id, nu in regula comuna.
   MASURAT inainte de a alege forma (capturi la 320/390/820/1024/1440, 07.10 12:3x): bara
   asta NU sta pe latimea paginii, ci in coloana stanga a hero-ului (`.hero` e 1fr 1fr), deci
   are ~548px la 1440, ~460px la 1024 si ~358px la 820. Cu trei coloane pe un rand, `1fr` al
   cautarii se strangea la 65px ("Zui" in loc de "Zum Beispiel...") si eticheta ei se rupea pe
   patru randuri. Incercat apoi doua coloane (cautarea sus, sortarea si bifa dedesubt): la 820px
   raman 171px de selector, adica 119px utili dupa sageata si padding, iar "Preis aufsteigend"
   masoara 125px - se taia. De aceea UN SINGUR rand pe control, la orice latime: nicio banda
   speciala de corectat mai tarziu si nicio eticheta taiata. Cautarea castiga latime fata de
   inainte (era `1fr` langa o coloana de 210px). */
#bestellbar-controls{grid-template-columns:1fr}
.sort-wahl select{cursor:pointer}
.best-shot-leer{background:var(--wash);color:var(--muted);font-size:12px}
.best-preis{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}


@media(min-width:620px){.best-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:900px){.best-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}}
@media(min-width:1200px){.best-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}