/*
 * Supleo v20 (nakładka newsupleo.aibh.pl, paczka A -- "produkt wszędzie tak
 * samo"): zdjęcie produktu w kwadracie 1:1 i blok tożsamości "Marka ·
 * Pochodzenie / Forma · Porcje", współdzielone przez produkty.js, produkt.js,
 * porownanie.js, substancja.js, producent.js i ulubione.js w TEJ nakładce.
 * Wzorzec: makieta/supleo-v20/46-DS-Produkt-wszedzie-v20.dc.html (rozmiary
 * zdjęcia per ekran) i 44-DS-Sloty-v20.dc.html (stała wysokość slotu, brak
 * danej = puste miejsce, nie zwinięcie).
 *
 * Plik istnieje WYŁĄCZNIE w tym katalogu: serwer/rdzen_api.py::plik_supleo
 * i NakladkaStatycznych serwują go tylko pod hostem NOWY, supleo.aibh.pl go
 * nie zna i nie ładuje.
 */

/* Reset na <button>/<a> owijających .spt-foto: komponent sam niesie
   rozmiar, tło i obramowanie, wrapper ma być niewidoczny. */
.spt-foto-btn{display:inline-flex;padding:0;border:0;background:none;cursor:pointer;color:inherit;text-decoration:none}

.spt-foto{
  --spt-s:64px;
  position:relative;display:flex;align-items:center;justify-content:center;flex:none;
  width:var(--spt-s);height:var(--spt-s);border-radius:10px;overflow:hidden;
  background:var(--pod,var(--sf2));border:1px solid var(--bd);color:var(--t3);
}
.spt-foto img{width:100%;height:100%;object-fit:contain;padding:15%;box-sizing:border-box;display:block}
.spt-foto-brak{display:flex;align-items:center;justify-content:center;width:52%;height:52%}
.spt-foto-brak svg{width:100%;height:100%}

/* Rozmiary z 46-DS-Produkt-wszedzie-v20: xl kafelek (~240px), lg karta
   produktu (104px mobile, 200px desktop), md wiersz listy/karta mobilna/
   kolumna porównania (~64px), sm kreator/ulubione/karta substancji (56px),
   xs wiersz zwarty/pasek porównania (≤48px). */
.spt-foto--xs{--spt-s:44px;border-radius:8px}
.spt-foto--sm{--spt-s:56px;border-radius:9px}
.spt-foto--md{--spt-s:64px;border-radius:10px}
.spt-foto--lg{--spt-s:104px;border-radius:14px}
.spt-foto--xl{--spt-s:240px;border-radius:16px}
@media (min-width:921px){
  .spt-foto--lg{--spt-s:200px}
}

/* Tożsamość (46-DS, reguła 2-3): "Marka · Pochodzenie" (marka pogrubiona,
   pochodzenie szare), pod spodem "Forma · Porcje". Oba wiersze ZAWSZE
   obecne w DOM, puste gdy brak danej -- slot ma stałą wysokość niezależnie
   od tego, czego brakuje (44-DS-Sloty, reguła 2: "brak danej = puste
   miejsce, nie zwinięcie"). */
.spt-tozsamosc{display:flex;flex-direction:column;gap:2px;min-width:0}
.spt-marka,.spt-forma{min-height:1.3em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spt-marka{font-size:12.5px;color:var(--t2)}
.spt-marka b{color:var(--ink);font-weight:700}
.spt-marka a,.spt-forma a{color:inherit;text-decoration:none}
.spt-marka a:hover,.spt-forma a:hover{text-decoration:underline}
.spt-forma{font-size:11.5px;color:var(--t3)}

/* Wariant wyśrodkowany (kafelek, karta ulubionych): nazwa i tożsamość na
   środku, wiersze mogą się zawijać zamiast obcinać. */
.spt-tozsamosc--center{align-items:center;text-align:center}
.spt-tozsamosc--center .spt-marka,.spt-tozsamosc--center .spt-forma{white-space:normal}