/* ═══════════════════════════════════════════════════════════════════
   TERMINA — application shell (CGP v7 "Espresso")

   Application pages only (najdi, moj, skupnost, ponudnik, rezervacija);
   loads after podoba.css. A bottom tab bar, one featured photographic
   card above quiet rows in the list, the selected day in cream and the
   selected hour in caramel, a booking progress bar, and a pinned cream
   action card.
   ═══════════════════════════════════════════════════════════════════ */

/* ── spodnja vrstica zavihkov ─────────────────────────────────────── */
main{padding-bottom:132px}
.zavihki{
  /* top:auto premaga nav{top:0} iz lupine — sicer se raztegne čez ves zaslon */
  position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
  border-bottom:none;padding-top:6px;
  background:var(--nav-bg);backdrop-filter:blur(10px);
  border-top:1px solid var(--gravura-2);
  display:flex;justify-content:space-around;align-items:stretch;
  padding:6px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom,0));
}
.zavihki a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:52px;min-width:64px;padding:4px 10px;
  font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--telo-2);border-radius:14px;
}
.zavihki a svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.zavihki a.on{color:var(--slonovina)}
.zavihki a.on svg{stroke:var(--medenina)}

/* Noga in vrstica zavihkov: noga stoji ZUNAJ main, zato ji odmik
   main{padding-bottom:132px} nič ne pomaga — zadnja vrstica noge
   (avtorstvo) je ležala pod pripeto vrstico in je lastnica ni videla
   (fotografija, 29. 8.). Noga na straneh z vrstico zato nosi še njeno
   višino; :has, ker vse strani s to datoteko vrstice nimajo. */
body:has(.zavihki) footer{
  padding-bottom:calc(48px + 78px + env(safe-area-inset-bottom,0));
}

/* ── seznam ponudnikov: izpostavljena kartica + tihe vrstice ──────── */
#grid .pcard{
  background-color:var(--plosca);
  background-image:none;
  border:1px solid var(--gravura-2);
  border-radius:var(--r-drobno);
  min-height:0;padding:12px 14px;
  display:flex;flex-direction:row;align-items:center;gap:12px;
  flex-wrap:wrap;
}
#grid .pcard .phead{display:flex;align-items:center;gap:12px;background:transparent;padding:0;flex:1 1 auto;min-width:0}
/* začetnica na gradientu ne prenese nobene ene barve (izmerjeno 3,66
   in 1,2) — začetnice so polna karamela s črnilom (7,28), gradient
   ostane fotografskim avatarjem */
#grid .pcard .pav{
  position:static;width:44px;height:44px;border-radius:50%;flex:none;
  background:var(--karamela);color:#1C130D;
  border:none;box-shadow:none;display:grid;place-items:center;font-size:17px;
}
#grid .pcard .pav:has(img){background:var(--karamela)}
#grid .pcard .pav img{width:100%;height:100%;object-fit:cover;border-radius:50%;
  filter:var(--foto-filter)}
#grid .pcard .name{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:var(--slonovina)}
#grid .pcard .meta{margin-top:2px}
#grid .pcard .ure{background:transparent;padding:0;flex-basis:100%;order:3}
#grid .pcard .ure span{background:var(--kat-tih);border:1px solid transparent;color:var(--kat-na-tihem)}
#grid .pcard .rate{background:transparent;padding:0;margin-left:auto;white-space:nowrap;color:var(--telo-2)}

/* prva kartica je izpostavljena: fotografija čez ploskev, ime na zastoru */
#grid .pcard.izpostavljen{
  min-height:230px;padding:0;border-radius:var(--r-kartica);
  background-size:cover;background-position:center;
  /* nowrap: podedovani wrap bi v stolpcu otroke zlomil v vzporedne stolpce */
  flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-end;
  overflow:hidden;position:relative;
}
#grid .pcard.izpostavljen[data-slika]{background-color:var(--foto-blend);background-blend-mode:luminosity}
#grid .pcard.izpostavljen:not([data-slika]){
  background-image:none;background-color:var(--oder-1)}
#grid .pcard.izpostavljen::before{
  content:"";position:absolute;inset:0;
  background:var(--foto-zastor);
}
#grid .pcard.izpostavljen>*{position:relative}
#grid .pcard.izpostavljen .phead{padding:0 18px 6px}
#grid .pcard.izpostavljen .pav{display:none}
#grid .pcard.izpostavljen .name{
  font-weight:200;letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-xl);
  color:var(--foto-napis);
}
#grid .pcard.izpostavljen .meta{color:var(--foto-napis);opacity:.82}
/* flex:0 0 auto: podedovani flex-basis:100% je v stolpcu VIŠINA */
#grid .pcard.izpostavljen .ure{padding:4px 18px 0;order:0;flex:0 0 auto;align-items:center}
#grid .pcard.izpostavljen .ure span{background:rgba(23,15,10,.62);backdrop-filter:blur(8px);
  border-color:transparent;color:var(--foto-napis)}
#grid .pcard.izpostavljen .rate,#grid .pcard.izpostavljen .rate *{color:var(--foto-napis)}
#grid .pcard.izpostavljen .rate{margin:0;padding:2px 18px 16px;opacity:.9}

/* ── rezervacija: trak napredka in izbire ─────────────────────────── */
.napredek{display:flex;gap:8px;margin:4px 0 22px}
.napredek span{flex:1;height:4px;border-radius:999px;background:var(--noc)}
.napredek span.on{background:var(--medenina)}

/* izbrani dan je KREM (prototip: dan krem, ura karamela) */
.dnevi .dan{background:var(--noc);border-color:var(--gravura-2);color:var(--slonovina)}
.dnevi .dan b{color:var(--slonovina)}
.dnevi .dan span{color:var(--telo-2)}
.dnevi .dan.sel{background:var(--i-bg);border-color:var(--i-bg)}
.dnevi .dan.sel b{color:var(--i-naslov)}
.dnevi .dan.sel span{color:var(--i-telo-2)}

/* izbrana kartica ponudnika v koraku 1 */
.card.sel{background:var(--noc);border-color:var(--medenina)}

/* povzetek in zaključni prizor: KREM — edina svetla ploskev */
/* (razred .krem dodan v HTML; tu samo drobnosti) */
.summary b{color:var(--slonovina)}
.done{background:var(--i-bg);border-radius:var(--r-velika);
  --slonovina:var(--i-naslov);--telo:var(--i-telo);--medenina:var(--i-akcent)}
.done h2{color:var(--i-naslov)}
.done p{color:var(--i-telo)}
.done .big{color:var(--i-akcent);font-family:var(--num)}
.done .btn-s{border-color:var(--i-rob-k);color:var(--i-naslov)}
.t-signal .ring{stroke:var(--i-cip) !important}
.t-signal .dot{fill:var(--i-akcent) !important}
.t-signal .rip{stroke:var(--i-akcent) !important}

/* fotografske celice skupnosti/profila ostajajo temne; napisi na zastoru
   (podoba.css) — tu samo mehkejši radij */
.obj-grid .celica,#foto-grid>div{border-radius:var(--r-foto)}

/* prijavna kartica je krem (razred v HTML); avatar disk pod znakom */
.auth-sig{background:transparent;border:none}

/* profil: pripeta krem kartica dejanja */
.pripeto{
  position:sticky;bottom:96px;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;margin-top:22px;
}
.pripeto .naslov{font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.2em;font-size:10.5px;color:var(--i-telo-2)}
.pripeto .kaj{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:var(--i-naslov)}

/* ── inspiracija ob rezervaciji: reference za stilistko ────────────
   Predaja »add visual inspiration for the stylist«. Izbira se iz
   fotografij, ki so pri salonu ŽE objavljene; filter je vir, ne
   barva ali slog — takih oznak v Termini ni. */
.insp{border:1px solid var(--meja);border-radius:var(--r-kartica);padding:16px 18px;margin-bottom:18px}
.insp-glava{display:flex;align-items:center;justify-content:space-between;gap:14px}
.insp-nasl{font-family:var(--display);font-weight:400;font-size:var(--t-base);color:var(--slonovina)}
.insp-pod{font-size:var(--t-sm);color:var(--telo-2);margin-top:2px}
.insp-kup{display:flex;margin-top:14px}
.insp-kup[hidden]{display:none}
.insp-kup img,.insp-kup .vec{width:34px;height:34px;border-radius:999px;object-fit:cover;
  border:2px solid var(--ohisje);margin-left:-10px;display:block;filter:var(--foto-filter)}
.insp-kup :first-child{margin-left:0}
.insp-kup .vec{display:grid;place-items:center;background:var(--i-bg);color:var(--i-naslov);
  font-family:var(--num);font-size:var(--t-micro);filter:none}

/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
.insp-list{position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;padding:18px 16px 0}
.insp-list[hidden]{display:none}
.insp-list header{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.insp-list h2{font-family:var(--display);font-weight:300;font-size:var(--t-xl);color:var(--slonovina)}
.insp-list header p{font-size:var(--t-sm);color:var(--telo-2);margin-top:2px}
.insp-list header [tabindex="-1"]:focus-visible{outline:none}
.insp-nazaj{min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--meja);
  background:var(--noc);color:var(--slonovina);cursor:pointer;display:grid;place-items:center;flex:0 0 auto}
.insp-nazaj svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.insp-filtri{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.insp-filtri button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--meja);
  background:none;color:var(--telo);font-family:var(--body);font-size:var(--t-sm);cursor:pointer}
.insp-filtri button.on{background:var(--i-bg);border-color:var(--i-bg);color:var(--i-naslov)}
.insp-mreza{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow-y:auto;
  flex:1;min-height:0;padding-bottom:104px;align-content:start}
.insp-celica{position:relative;aspect-ratio:4/5;border-radius:var(--r-kartica);overflow:hidden;
  border:none;padding:0;background:var(--i-bg);cursor:pointer;display:block}
.insp-celica img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.insp-celica .avtor{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;text-align:left;
  font-family:var(--num);font-size:var(--t-micro);letter-spacing:.04em;color:var(--foto-napis);
  background:var(--foto-zastor);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.insp-celica .znak{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:999px;
  background:var(--foto-zastor);color:var(--foto-napis);display:grid;place-items:center}
.insp-celica .znak svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.insp-celica .znak .kljuka{display:none}
.insp-celica[aria-pressed="true"]{box-shadow:0 0 0 3px var(--medenina)}
/* fokusni obroč ohrani radij celice — splošno pravilo ga zbije na 6 px */
.insp-celica:focus-visible,.insp-filtri button:focus-visible{border-radius:var(--r-kartica)}
.insp-filtri button:focus-visible,.insp-nazaj:focus-visible{border-radius:var(--r-oval)}
.insp-celica[aria-pressed="true"] .znak{background:var(--i-gumb);color:var(--i-gumb-tekst)}
.insp-celica[aria-pressed="true"] .znak .plus{display:none}
.insp-celica[aria-pressed="true"] .znak .kljuka{display:block}
.insp-pilula{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 10px 10px 20px;border-radius:999px;background:var(--steklo);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--meja);box-shadow:var(--senca-pilula)}
.insp-pilula .n{font-family:var(--num);font-size:var(--t-sm);color:var(--slonovina)}
.insp-prazno{padding:28px 4px;color:var(--telo-2);font-size:var(--t-sm)}
@media(prefers-reduced-motion:reduce){.insp-celica{transition:none}}


/* ── ikona sporočil v glavi (potez.js) ──────────────────────────────────
 * Sporočila imajo svojo stran; do nje vodita ikona in poteg v levo.
 * Tarča je 44 px tudi takrat, ko je risba 22 px — palec ne meri ikone,
 * ampak polje okoli nje.
 */
.ikona-sporocila{
  position:relative;display:inline-grid;place-items:center;flex:none;
  width:44px;height:44px;margin:-10px -8px -10px 0;
  border-radius:var(--r-oval);color:var(--telo);
}
.ikona-sporocila svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ikona-sporocila:hover{color:var(--sij);background:var(--tan-sled)}
.ikona-sporocila:focus-visible{outline:2px solid var(--mrak);outline-offset:2px}
/* Značka gori SAMO ob neprebranem; značka, ki gori vedno, ne pomeni nič. */
.ikona-sporocila .znacka{
  position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;
  font-family:var(--num);font-size:11px;line-height:1;
  color:var(--na-tanu);background:var(--mrak);
  border:2px solid var(--ohisje);border-radius:var(--r-oval);
}

/* ── opozorilo ob odprtju (opozorilo.js) ─────────────────────────────
   Zahteva za doplačilo je zahtevek za denar z rokom in mora biti vidna
   takoj, ne dva klika globoko. Kartica in ne modal: plačilo, ki prekrije
   aplikacijo, je izsiljevanje.

   Ploskev je tonirana karamela (--tan-mehki), ne obrnjena — na pogledu
   je ENA obrnjena ploskev in ta je rezervirana za glavno dejanje strani. */
.opozorilo{
  border:1px solid var(--medenina);
  border-radius:var(--r-kartica);
  background:var(--tan-mehki);
  padding:16px 18px 18px;
  margin:0 0 20px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.opozorilo.vidno{opacity:1;transform:none}
.opz-vrh{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.opz-nadnapis{
  flex:1;font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.16em;text-transform:uppercase;
  /* Akcent na TONIRANI ploskvi: v svetli temi temneje, v temni svetleje.
     --medenina-d je tu meril 4,42 na espressu (izmerjeno) in je padel. */
  color:var(--akcent-ton);
}
/* Tarča 44 px tudi pri risbi 18 px — palec ne meri ikone. */
.opz-zapri{
  flex:none;width:44px;height:44px;margin:-12px -12px -12px 0;
  display:grid;place-items:center;border:none;background:none;cursor:pointer;
  color:var(--telo-2);border-radius:var(--r-oval);
}
.opz-zapri svg{width:18px;height:18px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round}
.opz-zapri:hover{color:var(--slonovina)}
.opz-zapri:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.opz-znesek{font-family:var(--num);font-weight:200;font-size:var(--t-xl);
  line-height:1.1;color:var(--slonovina)}
.opz-kaj{font-size:var(--t-sm);color:var(--telo);margin-top:3px}
.opz-vec{font-size:var(--t-sm);color:var(--telo-2);margin-top:6px}
.opz-gumb{margin-top:14px;min-height:44px}

@media(prefers-reduced-motion:reduce){
  .opozorilo{opacity:1;transform:none;transition:none}
}

/* ── zaznamek na kartici ponudnika ─────────────────────────────────
   Predloga, ki jo je naročnica prinesla, ima na vsaki kartici zaznamek.
   Pri nas to ni nova zmožnost, ampak druga pot do iste: »Sledim«. Ena
   stvar, dve mesti — s seznama in s profila.

   Gumb je BRAT povezave in ne njen otrok: <button> znotraj <a> je
   neveljaven HTML, bralnik zaslona pa ga najavi kot del povezave in
   kartice ni več mogoče odpreti s tipkovnico brez tega, da bi se prej
   sprožil zaznamek. */
.pkarta{position:relative}
.shrani{
  position:absolute;top:10px;right:10px;z-index:2;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  /* Rob je edini obris krmilnega elementa, zato --rob-k in ne --gravura:
     lasast rob je pri gumbu okras, tu pa nosi mejo (3,48:1 na belem). */
  background:var(--steklo);border:1px solid var(--rob-k);
  color:var(--telo-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:color .18s,border-color .18s,background .18s;
}
.shrani svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.shrani:hover{color:var(--medenina);border-color:var(--karamela-rob)}
/* Shranjeno ni samo druga barva: znak se ZAPOLNI. Barva sama ni nosilec
   pomena (WCAG 1.4.1), in pri zaznamku je polnilo naravni znak za »noter«. */
.shrani.on{color:var(--medenina);border-color:var(--karamela-rob)}
.shrani.on svg{fill:currentColor}
/* Na izpostavljeni fotografski kartici je podlaga temna. Svetlo steklo bi
   pod belo ikono postalo svetlo siv krožec s komaj vidnim znakom (izmerjeno
   1,5:1); napis na fotografiji pri nas vedno leži na zastoru, in tu velja
   isto — temen zastor, svetla ikona. */
#grid .pkarta:first-child .shrani{
  background:var(--foto-zastor);border-color:var(--gravura-2);
  color:var(--foto-napis);
}
#grid .pkarta:first-child .shrani:hover,
#grid .pkarta:first-child .shrani.on{color:var(--karamela);border-color:var(--karamela-rob)}

/* Število zadetkov. Brez njega seznam ne pove, ali je kratek zaradi filtra
   ali zato, ker toliko ponudnikov pač je. */
.stevec{
  font-family:var(--num);font-size:var(--t-sm);letter-spacing:.06em;
  color:var(--telo-2);margin:0 0 12px;
}
.stevec[hidden]{display:none}

/* ── glava računa (moj.html) ───────────────────────────────────────
   POZOR: ta glava se NE sme imenovati .pglava — tako se imenuje naslovni
   prizor na strani ponudnika (postavitev.css, toplina.css) in ta datoteka
   se naloži ZA njim. Trčenje je bilo najdeno, ko je mreža računa legla
   čez prizor s fotografijo.
   Predloga postavi nad zavihke obraz, ime in dve števki. Števki nista
   okras: sta edini mesti, kjer stranka na prvi pogled vidi, koliko ji
   Termina pravzaprav hrani — in obe sta gumb, ki pelje na svoj zavihek.
   Zato sta <button> in ne <div> s poslušalcem: tipkovnica ju najde,
   bralnik zaslona ju najavi kot gumba, palec ima 44 px. */
.mglava{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;
  align-items:center;margin:0 0 22px;
}
.pobraz{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  /* Polna karamela s črnilom je izmerjena (7,28); gradient pod začetnico
     ne prenese nobene ene barve. */
  background:var(--karamela);color:#1C130D;
  font-family:var(--display);font-weight:400;font-size:23px;line-height:1;
}
.pime{min-width:0}
/* Pozdrav je nadnapis in ne del imena: ime je tisto, kar mora biti veliko,
   pozdrav pa se ne sme dvakrat prelomiti čez pol zaslona. */
.pzdrav{
  margin:0 0 2px;font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--telo-2);
}
.mglava h1{margin:0;font-size:var(--t-2xl);line-height:1.1;
  overflow-wrap:anywhere}
.pkraj{margin:3px 0 0;font-size:var(--t-sm);color:var(--telo-2);
  overflow-wrap:anywhere}
.pstevci{
  grid-column:1 / -1;display:flex;gap:10px;margin-top:16px;
}
.pst{
  flex:1 1 0;min-height:44px;padding:11px 14px;
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  background:var(--plosca);border:1px solid var(--gravura);
  border-radius:var(--r-drobno);cursor:pointer;text-align:left;
  transition:border-color .18s;
}
.pst:hover{border-color:var(--karamela-rob)}
.pst .n{font-family:var(--num);font-weight:200;font-size:var(--t-xl);
  line-height:1;color:var(--slonovina)}
.pst .l{font-family:var(--display);font-weight:400;font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--telo-2)}

@media(min-width:620px){
  .mglava{grid-template-columns:auto minmax(0,1fr) auto}
  .pstevci{grid-column:3;grid-row:1;margin-top:0;justify-content:flex-end}
  .pst{flex:0 0 auto;min-width:112px}
}
@media(prefers-reduced-motion:reduce){ .pst{transition:none} }

/* ── naslovna galerija na profilu ─────────────────────────────────
   Kadar ima ponudnik v novicah še fotografije, naslovni prizor lista.
   Pike so kazalnik, ne gumbi: gumb premera 8 px nima tarče 44 px,
   poteg in tipkovnica (fokusabilna regija) pa listata že sama. */
.pkartica.galerija{background-image:none}
.pkartica .gal{
  position:absolute;inset:0;display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.pkartica .gal::-webkit-scrollbar{display:none}
.pkartica .gal:focus-visible{outline:2px solid var(--medenina);outline-offset:-2px}
.pkartica .gal .sl{position:relative;flex:0 0 100%;scroll-snap-align:start}
.pkartica .gal img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:var(--foto-filter);
}
/* Zastor na VSAKI sliki: skupni bi ob potegu obstal, ta potuje s sliko
   in je prehod neviden, ker sta zastora enaka. Isti recept kot
   .pkartica[data-slika]::before. */
.pkartica .gal .sl::after{
  content:"";position:absolute;inset:0;
  background:var(--foto-zastor);
  pointer-events:none;
}
.pkartica.galerija::before{display:none}
.gal-pike{
  position:relative;display:flex;gap:6px;justify-content:center;
  padding:0 0 10px;pointer-events:none;
}
.gal-pike span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(242,232,216,.45);transition:background .18s;
}
.gal-pike span.on{background:var(--karamela)}
@media(prefers-reduced-motion:reduce){
  .pkartica .gal{scroll-behavior:auto}
  .gal-pike span{transition:none}
}

/* ── opis: pet vrstic, potem »Preberi več« ────────────────────────── */
.about.strnjen{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}
.o-vec{margin:-14px 0 22px;min-height:44px;padding:0 2px;
  background:none;border:none;cursor:pointer;
  font-family:var(--body);font-size:var(--t-sm)}
.o-vec[hidden]{display:none}

/* ── podobni ponudniki ────────────────────────────────────────────── */
.podobni{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.pod-k{
  display:flex;align-items:center;gap:12px;min-height:64px;
  padding:10px 14px;background:var(--plosca);
  border:1px solid var(--gravura-2);border-radius:var(--r-drobno);
}
.pod-k:hover{border-color:var(--karamela-rob)}
.pod-k .pav{
  flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;
  background:var(--karamela);color:#1C130D;display:grid;place-items:center;
  font-family:var(--display);font-size:17px;
}
.pod-k .pav img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.pod-k .kdo{min-width:0;display:grid;gap:2px}
.pod-k .nm{font-family:var(--display);font-weight:300;font-size:var(--t-base);color:var(--slonovina);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pod-k .mt{font-family:var(--num);font-size:var(--t-micro);letter-spacing:.05em;
  text-transform:uppercase;color:var(--telo-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── srce na fotografiji skupnosti ─────────────────────────────────
   Isti krožec kot zaznamek, na fotografiji, torej na zastoru (svetlo
   steklo je pod belo risbo že enkrat padlo na 1,5:1). S številom src
   se krožec raztegne v pilulo. Polno srce, ne samo barva (WCAG 1.4.1). */
.shrani.srce{
  width:auto;min-width:44px;padding:0 12px;gap:5px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--foto-zastor);border-color:var(--gravura-2);
  color:var(--foto-napis);
}
.shrani.srce:hover,.shrani.srce.on{color:var(--karamela);border-color:var(--karamela-rob)}
.shrani.srce .n{font-family:var(--num);font-size:var(--t-xs);letter-spacing:.03em;line-height:1}