@charset "UTF-8";
/* ==========================================================================
 *  #6c  BOX NOW — BLAGAJNA IN JAVNA STRAN
 * --------------------------------------------------------------------------
 *  ┌ BARVE SO PREVOZNIKOVE ────────────────────────────────────────────────┐
 *  │ #44D62C zelena · #2F006C vijolična · #ECECE2 peščena.                  │
 *  │                                                                        │
 *  │ Zelena je močna in na velikih ploskvah utruja, zato nosi samo poudarke │
 *  │ (rob izbrane kartice, značka velikosti, gumb). Podlaga je peščena,     │
 *  │ besedilo vijolično — tako je kartica prepoznavna že iz kota očesa,     │
 *  │ hkrati pa berljiva.                                                    │
 *  └────────────────────────────────────────────────────────────────────────┘
 *
 *  Datoteka se naloži SAMO, kadar je modul vklopljen.
 * ========================================================================== */

/* ┌ #6n ZAKAJ JE NA TEM SEZNAMU TUDI KARTICA NAČINA DOSTAVE ──────────────┐
   │ Barve so bile na `.pb-bn` — to pa je OTROK kartice. Prilagojene         │
   │ lastnosti se dedujejo navzdol in ne navzgor, zato `var(--bn-glow)` v    │
   │ pravilu `.pb-method-card--boxnow` ni imel kje najti vrednosti in je     │
   │ padel na `currentColor`: obroba kartice je bila ČRNA in ne zelena.       │
   │                                                                          │
   │ Tega se ni videlo, ker je zeleni sij okoli nje delal vtis zelene obrobe.│
   │ Ko je sij pri neizbrani kartici odpadel, je ostala črna črta.            │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow,
.pb-bn,
.pb-bn-off,
.pb-bn-modal,
.pb-bnp {
  --bn-green: #44D62C;
  --bn-purple: #2F006C;
  --bn-sand: #ECECE2;
  /* #6h Sij kartice na blagajni. Ločen od znaka prevoznika (#44D62C), ker
     mora biti nekoliko temnejši, da se vidi tudi na belem. */
  --bn-glow: #33CC33;
  --bn-ink: #1F2937;
  --bn-mute: #6B7280;
}

/* ══ 1. KARTICA NAČINA DOSTAVE ═══════════════════════════════════════════ */

/* Barvni rob in podlaga ločita paketomat od ostalih načinov, ne da bi
   spremenila postavitev kartice — ta je skupna vsem načinom. */
/* ┌ #6h KARTICA MORA »SVETITI« ZELENO ──────────────────────────────────┐
   │ Med petimi enakimi belimi karticami je paketomat najcenejša in         │
   │ najhitrejša izbira — a je bil videti kot vse ostalo. Zelena obroba in  │
   │ rahel sij ga ločita, ne da bi kričala.                                  │
   │                                                                          │
   │ #33CC33 je barva, ki jo je izbral naročnik; #44D62C ostane za znak      │
   │ prevoznika. Sij je zunanja senca in ne obroba — obroba bi kartico       │
   │ razširila in porušila poravnavo s sosednjimi.                            │
   └──────────────────────────────────────────────────────────────────────────┘ */
/* ┌ #6n NEIZBRANA KARTICA IMA SAMO OBROBO ────────────────────────────────┐
   │ Sij in zelenkast preliv sta stala tudi na NEIZBRANI kartici. Med petimi │
   │ načini dostave je zato en sam kričal, da je izbran, čeprav ni bil —     │
   │ kupec je moral pogledati dvakrat, da je videl, kaj je res izbral.        │
   │                                                                          │
   │ Neizbrana kartica ima odslej samo zeleno obrobo: dovolj, da paketomat   │
   │ najdeš med petimi belimi karticami, premalo, da bi se pretvarjal.        │
   │ Sij in podlaga se prižgeta ob izbiri — takrat sta poštena.                │
   │                                                                          │
   │ Podlaga je izrecno bela in ne izpuščena: prejšnji preliv bi sicer ostal  │
   │ iz starega slogovnika v predpomnilniku brskalnika.                        │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow {
  border-color: var(--bn-glow) !important;
  background: #fff;
  box-shadow: none;
}

/* Ob prehodu miške samo nekoliko krepkejša obroba — senca bi bila spet obljuba
   izbire, ki je ni. */
.pb-method-card--boxnow:hover {
  border-color: var(--bn-glow) !important;
  box-shadow: 0 0 0 1px rgba(51, 204, 51, .35);
}
/* Izbrana kartica: sij IN rahla zelenkasta podlaga — tu je poudarek pošten,
   ker res pove, kaj je izbrano. */
.pb-method-card--boxnow:has(input:checked) {
  border-color: var(--bn-glow) !important;
  background: linear-gradient(180deg, #fff 0%, #F8FDF6 100%);
  box-shadow: 0 0 0 3px rgba(51, 204, 51, .45), 0 4px 18px rgba(51, 204, 51, .3);
}
/* Kartica, ki za to košarico ne gre, ne sme svetiti — sij je vabilo. */
.pb-method-card--boxnow.pb-method-card--off {
  box-shadow: none;
  border-color: #D7DDE3 !important;
}

/* Način, ki ga za to košarico ni: viden, a jasno neuporaben. Skrit način bi
   kupca pustil v ugibanju, zakaj paketomata ni več. */
.pb-method-card--off { opacity: .62; }
.pb-method-card--off:hover { border-color: #E5E7EB !important; box-shadow: none !important; }

/* Prečrtana redna cena ob promociji brezplačne dostave. */
.pb-method-card__was {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--bn-mute);
  text-decoration: line-through;
  line-height: 1.2;
}

/* ══ 2. IZBIRA PAKETOMATA V KARTICI ══════════════════════════════════════ */

/* ┌ #6i KARTICA MORA BITI NIZKA ──────────────────────────────────────────┐
   │ Blagajna je edina stran, kjer je vsaka vrstica drsenja med kupcem in   │
   │ oddanim naročilom. Kartica je imela devet vrstic v stolpcu: predalnik, │
   │ dve oznaki, dve polji, naslov, napredno iskanje, pokritost, opomba.    │
   │                                                                          │
   │ Nič od tega ni odveč — vse je zloženo tesneje: manjši odmiki, nižji    │
   │ polji in ena skupna noga namesto treh vrstic. Nič se ne skrije, kartica│
   │ je le krajša za približno tretjino.                                     │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn {
  margin-top: .45rem;
  padding: .5rem .6rem;
  border-radius: 10px;
  background: var(--bn-sand);
  border: 1px solid #DEDED2;
}

.pb-bn__fit {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .78rem; font-weight: 700; color: var(--bn-purple);
}

/* Značka velikosti: ena črka, zato mora biti krog in ne pravokotnik — sicer
   je videti kot odrezan napis. */
.pb-bn__size {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--bn-green); color: var(--bn-purple);
  font-size: .74rem; font-weight: 900;
}

.pb-bn__more {
  margin-left: auto;
  font-size: .74rem; font-weight: 700;
  color: var(--bn-purple); text-decoration: underline;
}

/* ┌ #6h POSTAVITEV IZBIRNIKA ─────────────────────────────────────────────┐
   │ Kraj in paketomat stojita v isti vrstici, dokler je prostor; pod 420 px │
   │ eden pod drugim. Kartica na blagajni mora ostati kratka — vsaka vrstica │
   │ več pomeni več drsenja med izpolnjevanjem obrazca.                       │
   │                                                                          │
   │ `min-width: 0` na obeh: brez tega prožni stolpec ne dovoli, da bi se     │
   │ dolgo ime paketomata skrčilo, in seznam potisne kartico čez rob.         │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__pick {
  display: flex; flex-direction: column; align-items: stretch; gap: .3rem;
  margin-top: .4rem;
}

.pb-bn__grid {
  display: grid; gap: .4rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
}
.pb-bn__f { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }

@media (max-width: 560px) {
  .pb-bn__grid { grid-template-columns: minmax(0, 1fr); }
}

.pb-bn__lbl {
  font-size: .68rem; font-weight: 800; color: var(--bn-purple);
  text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.2;
}

/* Koliko paketomatov ustreza vpisanemu kraju — stoji ob oznaki polja in ne v
   svoji vrstici, ker je to podatek o polju in ne samostojno sporočilo. */
.pb-bn__n {
  font-weight: 900; font-variant-numeric: tabular-nums;
  color: var(--bn-ink); text-transform: none; letter-spacing: 0;
}

/* Naslov izbranega paketomata — potrditev, ne okras. Največ dve vrstici, sicer
   bi dolg naslov kartico spet raztegnil. */
.pb-bn__at {
  font-size: .76rem; font-weight: 700; color: var(--bn-ink);
  line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ┌ #6j NASLOV IN NAPREDNO ISKANJE V ISTI VRSTICI ────────────────────────┐
   │ Potrditev izbire in izhod v sili sta stala vsak v svoji vrstici.       │
   │ Skupaj v eni je kartica krajša še za eno, brez izgube česarkoli.        │
   │                                                                          │
   │ Iskanje je `flex: 0 0 auto`: naslov se sme skrčiti, gumb pa ne, sicer   │
   │ bi se dolg naslov razrasel in napis »Napredno iskanje« zlomil na dve    │
   │ vrstici.                                                                  │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .2rem .8rem;
}
.pb-bn__row .pb-bn__at { flex: 1 1 12rem; min-width: 0; }

/* ┌ NOGA KARTICE ─────────────────────────────────────────────────────────┐
   │ Pokritost in opomba o merah sta v isti vrstici, ločeni s tanko črto.   │
   │ `flex-wrap` poskrbi, da se na ozkem zaslonu prelomita, namesto da bi   │
   │ ena potisnila drugo čez rob — takrat črta odpade sama.                  │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__foot {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .2rem .7rem;
  margin-top: .35rem;
}
.pb-bn__foot > * + * {
  border-left: 1px solid #DEDED2;
  padding-left: .7rem;
}
@media (max-width: 560px) {
  .pb-bn__foot > * + * { border-left: 0; padding-left: 0; }
}

/* Napredno iskanje je izhod v sili in ne prva izbira: povezava, ne gumb. */
.pb-bn__more-btn {
  flex: 0 0 auto;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: .74rem; font-weight: 700;
  color: var(--bn-purple); text-decoration: underline; cursor: pointer;
}
.pb-bn__more-btn:hover { color: #3E0A87; }

/* Obroba je krepkejša od privzete: seznam stoji na peščeni podlagi kartice in
   s svetlo obrobo ni bral kot polje, ki ga je treba izpolniti. */
/* Puščica je vrisana ročno: `.pb-input` v `main.css` odvzame privzeti videz
   polja in spustni seznam je brez nje izgledal kot navadno besedilno polje —
   kupec vanj ni kliknil, ker ni vedel, da se odpre. */
.pb-bn__sel {
  width: 100%; max-width: 100%;
  /* Višina je pri seznamu izrecna: brez nje jo v prožni postavitvi določi
     vsebina in kraj s kratkim imenom postane nižji od paketomata z dolgim. */
  height: 34px;
  padding: 0 1.8rem 0 .6rem;
  border: 1.5px solid var(--pb-field-border, #94948C); border-radius: 8px;
  color: var(--bn-ink);
  font-size: .82rem; font-weight: 600;

  appearance: none; -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232F006C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}

/* ┌ #6i ISKALNO POLJE ─────────────────────────────────────────────────────┐
   │ Isti okvir kot spustni seznam — sta korak 1 in korak 2 iste odločitve  │
   │ in morata biti videti kot par. Namesto puščice nosi povečevalno steklo:│
   │ puščica bi obljubljala seznam, ki se odpre na klik, tu pa se piše.      │
   │                                                                          │
   │ `appearance: none` odstrani tudi križec, ki ga Chrome in Safari dodata  │
   │ poljem `type="search"` — ta bi se prekrival z znakom na desni.           │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__in {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='5.5' cy='5.5' r='4.2' fill='none' stroke='%232F006C' stroke-width='1.8'/%3E%3Cpath d='M8.7 8.7L12 12' stroke='%232F006C' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: right .6rem center;
}
.pb-bn__in::-webkit-search-cancel-button,
.pb-bn__in::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* Chrome doda polju z `list` še svojo puščico — ta bi stala na povečevalnem
   steklu in dala vtis dveh gumbov na istem mestu. Predlogi delujejo naprej. */
.pb-bn__in::-webkit-calendar-picker-indicator { display: none !important; }
.pb-bn__in::placeholder { color: var(--bn-mute); font-weight: 500; }

.pb-bn__sel:focus {
  outline: none;
  border-color: var(--bn-purple);
  box-shadow: 0 0 0 3px rgba(47, 0, 108, .14);
}
.pb-bn__pick.is-missing .pb-bn__sel {
  border-color: #DC2626;
  background-color: #FFF5F5;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .13);
}

/* Koliko paketomatov je — številka pride iz tabele, ne iz besedila. */
.pb-bn__cover {
  flex: 1 1 12rem; min-width: 0;
  font-size: .72rem; color: var(--bn-mute); line-height: 1.35;
}
.pb-bn__cover strong { color: var(--bn-purple); font-variant-numeric: tabular-nums; }

/* ┌ #6h ZAKAJ TU NI VEČ `flex: 1 1 200px` ────────────────────────────────┐
   │ Ovoj `.pb-bn__pick` je od 6f naprej STOLPEC. V stolpčni prožni          │
   │ postavitvi se `flex-basis` nanaša na VIŠINO — polje z imenom paketomata │
   │ je zato zraslo v 200 px visok prazen okvir sredi kartice.                │
   │                                                                          │
   │ Osnova zdaj ni podana; polje je visoko toliko, kolikor je njegovo        │
   │ besedilo.                                                                 │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__chosen {
  flex: 0 0 auto; min-width: 0;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #DEDED2;
  font-size: .82rem; font-weight: 700; color: var(--bn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-bn__chosen.is-empty { color: var(--bn-mute); font-weight: 600; font-style: italic; }
.pb-bn__chosen.is-missing { border-color: #DC2626; background: #FFF5F5; color: #991B1B; }

.pb-bn__btn {
  flex: 0 0 auto;
  padding: .45rem .8rem;
  border: none; border-radius: 8px;
  background: var(--bn-purple); color: #fff;
  font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: background .12s, transform .08s;
}
.pb-bn__btn:hover { background: #3E0A87; }
.pb-bn__btn:active { transform: translateY(1px); }
.pb-bn__btn--ghost {
  background: #fff; color: var(--bn-purple); border: 1.5px solid var(--bn-purple);
}
.pb-bn__btn--ghost:hover { background: var(--bn-sand); }

/* ┌ #6s GUMB, KI JE POVEZAVA, JE DOBIL BARVO POVEZAVE ────────────────────┐
   │ »Odpri v zemljevidu →« v oknu s podrobnostmi in »✕ Pokaži vse« nad     │
   │ seznamom nista `<button>`, ampak `<a>` — vodita drugam in to mora      │
   │ tipkovnica in bralnik zaslona vedeti.                                  │
   │                                                                         │
   │ Tema pa ima pravilo `.pb-theme-pingootheme a { color: … }`. To je razred│
   │ IN element (0,1,1) in premaga `.pb-bn__btn` (0,1,0) — ne glede na to,  │
   │ katera datoteka se naloži pozneje. Besedilo je bilo zato temno modro na │
   │ vijolični podlagi: razmerje pod 3 : 1, na telefonu skoraj neberljivo.   │
   │                                                                         │
   │ Popravek ni `!important`, ampak enaka teža z višjo natančnostjo:        │
   │ `a.pb-bn__btn` je prav tako razred + element, `.pb-bnp` pred njim pa    │
   │ doda še eno raven — pravilo velja povsod, kjer je gumb res naš.          │
   │                                                                          │
   │ Isti razlog kot pri `.pb-bnp-modal__hdr .pb-bnp-modal__t` nekaj vrstic  │
   │ nižje: podedovana barva pravila teme ne premaga nikoli.                  │
   └──────────────────────────────────────────────────────────────────────────┘ */
a.pb-bn__btn,
a.pb-bn__btn:hover,
a.pb-bn__btn:visited,
a.pb-bn__btn:focus { color: #fff; text-decoration: none; }

a.pb-bn__btn--ghost,
a.pb-bn__btn--ghost:hover,
a.pb-bn__btn--ghost:visited,
a.pb-bn__btn--ghost:focus { color: var(--bn-purple); }

.pb-bn__note { font-size: .71rem; color: var(--bn-mute); line-height: 1.35;
                flex: 1 1 14rem; min-width: 0; }

/* Kartica ni izbrana, paketomat pa še ni izbran — opozorilo se pokaže šele ob
   poskusu oddaje, ker prej ni napaka, ampak korak, ki še pride. */
.pb-bn__pick.is-missing .pb-bn__chosen {
  border-color: #DC2626; background: #FEF2F2; color: #991B1B; font-style: normal;
}

/* ┌ #6n ZAKAJ SE NAROČILO NI ODDALO ──────────────────────────────────────┐
   │ Rdeča obroba ni sporočilo: pove, da je nekaj narobe, ne pa kaj in kaj  │
   │ je treba storiti. Ta vrstica pove oboje in stoji tam, kjer se popravi. │
   │                                                                          │
   │ `[hidden]` ima izrecno pravilo, ker naš `display: flex` privzetega      │
   │ pravila brskalnika sicer preglasi — ista past kot pri križcih v 6m.     │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__err {
  display: flex; align-items: flex-start; gap: .4rem;
  margin-top: .35rem;
  padding: .4rem .55rem;
  border: 1px solid #FECACA; border-radius: 8px;
  background: #FEF2F2;
  font-size: .76rem; font-weight: 700; color: #991B1B; line-height: 1.35;
}
/* Ubežni zapis in ne sam znak: `content:` s črko zunaj ASCII se ob napačno
   javljenem kodiranju izriše kot smeti. Pravilo velja za ves projekt in ga
   varuje `tests/t6h.php`. `\26A0` je opozorilni trikotnik. */
.pb-bn__err::before { content: '\26A0'; flex: 0 0 auto; }
.pb-bn__err[hidden] { display: none; }

/* ══ 2b. ENO SAMO POLJE Z ISKALNIKOM V SPUSTNEM MENIJU  (#6m) ════════════ */

/* ┌ #6m ZAKAJ JE TO NAJNIŽJA OD TREH POSTAVITEV ──────────────────────────┐
   │ Dosedanja načina imata oznako + polje za kraj IN oznako + polje za      │
   │ paketomat: štiri vrstice. Tu je ena sama — polje, ki zloženo pokaže     │
   │ izbrani paketomat.                                                       │
   │                                                                          │
   │ Panel je `position: absolute` in ne v toku: odprt seznam sicer razpre    │
   │ kartico za 300 px, ostale načine dostave potisne dol, kupec pa izgubi    │
   │ mesto, na katerem je bil.                                                 │
   │                                                                          │
   │ Ovoj `.pb-bn__combo` je zato `position: relative` in `z-index` panela je │
   │ višji od kartic pod njim — brez tega se seznam izriše POD naslednjim     │
   │ načinom dostave, ker ta pride v HTML pozneje.                             │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__combo { position: relative; margin-top: .4rem; }

/* Zloženo polje. Enak okvir kot spustni seznam, ker je isto: polje obrazca,
   ki se ob kliku odpre. */
.pb-bn__cbtn {
  display: flex; align-items: center; gap: .45rem;
  width: 100%;
  height: 38px;
  padding: 0 .5rem 0 .55rem;
  border: 1.5px solid var(--pb-field-border, #94948C); border-radius: 8px;
  background: #fff;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.pb-bn__cbtn:hover { border-color: var(--bn-purple); }
.pb-bn__cbtn:focus-visible {
  outline: none;
  border-color: var(--bn-purple);
  box-shadow: 0 0 0 3px rgba(47, 0, 108, .14);
}
.pb-bn__combo.is-open .pb-bn__cbtn {
  border-color: var(--bn-purple);
  box-shadow: 0 0 0 3px rgba(47, 0, 108, .14);
}
.pb-bn__pick.is-missing .pb-bn__cbtn {
  border-color: #DC2626;
  background: #FFF5F5;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .13);
}

.pb-bn__cpin { flex: 0 0 auto; width: 17px; height: 17px; color: var(--bn-purple); }

/* Ime paketomata je lahko dolgo; polje mora ostati enovrstično, sicer kartica
   ob vsaki izbiri poskoči. */
.pb-bn__ctxt {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; font-weight: 700; color: var(--bn-ink);
}
.pb-bn__ctxt.is-empty { font-weight: 600; color: var(--bn-mute); }

/* Križec za brisanje izbire. Je `<span>` z vlogo gumba, ker gumb v gumbu ni
   veljaven HTML — zloženo polje je samo `<button>`. */
.pb-bn__cclr {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  color: var(--bn-mute); font-size: .7rem; line-height: 1; cursor: pointer;
}
.pb-bn__cclr:hover { background: var(--bn-sand); color: var(--bn-ink); }

/* ┌ ZAKAJ TA VRSTICA MORA BITI TU ────────────────────────────────────────┐
   │ Privzeto pravilo brskalnika za `[hidden]` je `display: none`, a ima    │
   │ najnižjo težo. Vsak naš `display` ga preglasi — in križec za brisanje  │
   │ izbire je bil viden tudi takrat, ko paketomat sploh ni bil izbran.      │
   │ Isto velja za križec v iskalniku spodaj.                                 │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__cclr[hidden] { display: none; }

.pb-bn__csep {
  flex: 0 0 auto;
  width: 1px; height: 18px;
  background: #DEDED2;
}

/* Puščica je vrisana z robovi in ne z znakom: znak »▾« je v vsaki pisavi
   drugače velik in drugače poravnan. */
.pb-bn__carr {
  flex: 0 0 auto;
  width: 0; height: 0; margin-right: .2rem;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--bn-purple);
  transition: transform .12s;
}
.pb-bn__combo.is-open .pb-bn__carr { transform: rotate(180deg); }

/* ┌ PANEL ────────────────────────────────────────────────────────────────┐
   │ Bela podlaga in senca: panel mora ležati NAD peščeno kartico, sicer se │
   │ zlije z njo in ni jasno, kje se seznam začne in kje kartica konča.     │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__panel {
  position: absolute; z-index: 60;
  top: calc(100% + .3rem); left: 0; right: 0;
  padding: .45rem;
  border: 1.5px solid var(--bn-purple); border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(31, 41, 55, .18);
}

.pb-bn__pq { position: relative; display: flex; align-items: center; }
.pb-bn__pq svg {
  position: absolute; left: .55rem;
  width: 14px; height: 14px; color: var(--bn-mute);
  pointer-events: none;
}
.pb-bn__pq input {
  width: 100%; height: 34px;
  padding: 0 2rem 0 1.9rem;
  border: 1.5px solid #DEDED2; border-radius: 8px;
  background: #fff;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--bn-ink);
  appearance: none; -webkit-appearance: none;
}
.pb-bn__pq input:focus {
  outline: none;
  border-color: var(--bn-purple);
  box-shadow: 0 0 0 3px rgba(47, 0, 108, .12);
}
.pb-bn__pq input::placeholder { color: var(--bn-mute); font-weight: 500; }
.pb-bn__pq input::-webkit-search-cancel-button,
.pb-bn__pq input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.pb-bn__pqx {
  position: absolute; right: .35rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--bn-mute);
  font-size: .72rem; cursor: pointer;
}
.pb-bn__pqx:hover { background: var(--bn-sand); color: var(--bn-ink); }
.pb-bn__pqx[hidden] { display: none; }

/* ┌ ZAKAJ IMA SEZNAM NAJVEČJO VIŠINO IN NE FIKSNE ────────────────────────┐
   │ V kraju z enim samim paketomatom bi fiksna višina pustila prazen bel   │
   │ pravokotnik pod edino vrstico. `max-height` pusti panel tolikšen,       │
   │ kolikršen je seznam, in ga omeji šele, ko bi zrasel čez zaslon.          │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn__opts {
  max-height: 244px;
  margin-top: .35rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pb-bn__opt {
  display: flex; align-items: flex-start; gap: .45rem;
  width: 100%;
  padding: .4rem .45rem;
  border: 0; border-radius: 8px;
  background: none;
  font: inherit; text-align: left; cursor: pointer;
}
.pb-bn__opt:hover,
.pb-bn__opt.is-act { background: var(--bn-sand); }
.pb-bn__opt.is-on { background: #F1FBEE; box-shadow: inset 0 0 0 1.5px var(--bn-glow); }

.pb-bn__opin { flex: 0 0 auto; font-size: .8rem; line-height: 1.35; }
.pb-bn__otxt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.pb-bn__on {
  font-size: .8rem; font-weight: 800; color: var(--bn-ink); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-bn__oa {
  font-size: .72rem; font-weight: 600; color: var(--bn-mute); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pb-bn__pnone {
  padding: .6rem .5rem;
  font-size: .76rem; color: var(--bn-mute); line-height: 1.4; text-align: center;
}

/* V načinu z enim poljem spustni seznam ostane v obrazcu — a samo kot polje,
   ki ga izpolnjuje skript. Viden je le, kadar skripta ni. */
.pb-bn__pick.is-combo .pb-bn__grid { display: none; }

/* Brez skripta je polje eno samo (kraja ni), zato zasede vso širino. */
.pb-bn__grid--one { grid-template-columns: minmax(0, 1fr); }

/* ┌ #6m NEIZBRANA KARTICA: SAMO IME, OPIS IN CENA ────────────────────────┐
   │ Pravilo je namerno OBRNJENO — »skrij, kadar NI izbrana«. Brskalnik brez│
   │ `:has()` ga v celoti izpusti in izbirnik ostane viden, kot je bil.      │
   │ Napisano v drugo smer bi tam ostal skrit za vedno in paketomata ne bi   │
   │ bilo mogoče izbrati.                                                     │
   │                                                                          │
   │ Razred `--folded` je ista poved za brskalnik brez `:has()`, kadar        │
   │ skript teče; postavlja ga `showPick()`.                                   │
   └──────────────────────────────────────────────────────────────────────────┘ */
/* ┌ #6p ZAKAJ PRAVILA `:has()` TU NI VEČ ─────────────────────────────────┐
   │ V 6m sta bili dve pravili: eno s `:has()` in eno z razredom, ki ga      │
   │ postavi skript. Mišljeni sta bili kot pas in naramnice.                  │
   │                                                                          │
   │ Bili sta past. Ko izbirnik ostane skrit, kupec paketomata ne more        │
   │ izbrati in naročila ne more oddati — to je najdražja okvara na strani.   │
   │ Dve pravili pomenita dve poti do nje, in ena je zadoščala.                │
   │                                                                          │
   │ Odslej odloča SAMO skript. Če skript odpove, razreda ni in izbirnik      │
   │ ostane viden — torej stanje izpred 6m, ki je delovalo. Okvara skripta je │
   │ s tem nadloga in ne izgubljeno naročilo.                                  │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.pb-method-card--folded .pb-bn { display: none; }

.pb-bn-off {
  margin-top: .6rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: #FEF2F2; border: 1px solid #FECACA;
  font-size: .78rem; color: #991B1B; line-height: 1.4;
}
.pb-bn-off strong { display: block; }

/* ══ 3. OKNO Z IZBIRO ════════════════════════════════════════════════════ */

.pb-bn-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: rgba(31, 41, 55, .55);
}
.pb-bn-modal[hidden] { display: none !important; }

.pb-bn-modal__box {
  width: 100%; max-width: 560px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

/* ┌ #6f ZAKAJ JE BARVA NASLOVA ZAPISANA DVAKRAT ─────────────────────────┐
   │ Tema ima pravilo `.pb-theme-pingootheme h1,h2,h3,h4 { color: … }`.     │
   │ To je razred + element (specifičnost 0-1-1) in premaga podedovano belo │
   │ barvo s starša — naslov je bil črn na temno vijolični podlagi in ga ni │
   │ bilo mogoče prebrati.                                                   │
   │                                                                          │
   │ Zato je barva zapisana NA NASLOVU SAMEM, prek dveh razredov (0-2-0).    │
   │ To premaga temo brez `!important` in brez sklicevanja na ime teme — če  │
   │ trgovina zamenja temo, pravilo še vedno drži.                            │
   │                                                                          │
   │ Isto velja povsod, kjer naslov stoji na barvni podlagi. Seznam je       │
   │ spodaj, na enem mestu, da ga naslednji ne bo iskal po datoteki.          │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn-modal__hdr {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  background: var(--bn-purple); color: #fff;
}
.pb-bn-modal__hdr .pb-bn-modal__t { margin: 0; font-size: 1rem; font-weight: 800; color: #fff; }
.pb-bn-modal__x {
  margin-left: auto;
  width: 28px; height: 28px;
  border: none; border-radius: 8px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: .9rem; cursor: pointer;
}
.pb-bn-modal__x:hover { background: rgba(255, 255, 255, .28); }

.pb-bn-modal__tools {
  display: flex; gap: .5rem; padding: .7rem 1rem;
  border-bottom: 1px solid #EEF0F2; flex-wrap: wrap;
}
.pb-bn-modal__tools input { flex: 1 1 200px; min-width: 0; }

.pb-bn-modal__list { flex: 1 1 auto; overflow-y: auto; padding: .4rem 0; }

.pb-bn-modal__foot {
  padding: .6rem 1rem;
  border-top: 1px solid #EEF0F2;
  background: #FAFAF7;
  font-size: .74rem; color: var(--bn-mute);
}
.pb-bn-modal__foot a { color: var(--bn-purple); font-weight: 700; }

.pb-bn-item {
  display: block; width: 100%; text-align: left;
  padding: .55rem 1rem;
  border: none;
  background: none; cursor: pointer;
}
/* #7f Vrstico pod miško označuje podlaga; zeleni pas ob levem robu je isto
   povedal drugič in vrstico premaknil za 3 px. */
.pb-bn-item:hover { background: var(--bn-sand); }
.pb-bn-item__n { font-size: .85rem; font-weight: 800; color: var(--bn-ink); }
.pb-bn-item__a { font-size: .76rem; color: var(--bn-mute); }
.pb-bn-item__h { font-size: .7rem; color: #9CA3AF; }

.pb-bn-empty { padding: 1.2rem 1rem; text-align: center; color: var(--bn-mute); font-size: .82rem; }

/* ══ 4. ZAKLENJEN NASLOV DOSTAVE ═════════════════════════════════════════ */

/* Ko je izbran paketomat, je naslov dostave naslov paketomata. Polja ostanejo
   VIDNA in ne skrita: kupec mora videti, kam bo paket dostavljen. */
.pb-alt-address-card.is-locked { position: relative; }
.pb-alt-address-card.is-locked input,
.pb-alt-address-card.is-locked select {
  background: #F3F4F6 !important; color: var(--bn-mute) !important; cursor: not-allowed;
}
.pb-bn-lock {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .7rem; padding: .55rem .7rem;
  border-radius: 9px;
  background: var(--bn-sand); border: 1px solid #DEDED2;
  font-size: .78rem; color: var(--bn-purple); font-weight: 700;
}
.pb-bn-lock span { font-weight: 600; color: var(--bn-ink); }

/* ══ 5. JAVNA STRAN /paketomati ══════════════════════════════════════════ */

.pb-bnp { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; }
.pb-bnp [hidden] { display: none !important; }
.pb-bnp__hero { order: 0; }
.pb-bnp__promo { order: 1; }
.pb-bnp__finder { order: 2; }
.pb-bnp > #bnp-grid,
.pb-bnp > #bnp-none,
.pb-bnp > .pb-bnp__card--note { order: 3; }
.pb-bnp__guide { order: 4; }
.pb-bnp__big { order: 5; }
.pb-bnp__meta { order: 6; }
.pb-bnp-modal { order: 7; }

.pb-bnp__promo {
  display: flex; align-items: center; gap: .75rem;
  padding: .8rem 1rem; margin-bottom: 1rem;
  border: 1px solid #bcecb5; border-radius: 12px;
  background: #f2fff0; color: #205d18;
}
.pb-bnp__promo > span { font-size: 1.3rem; }
.pb-bnp__promo strong,
.pb-bnp__promo div span { display: block; }
.pb-bnp__promo div span { font-size: .82rem; margin-top: .1rem; }
.pb-bnp__finder {
  padding: 1rem; margin-bottom: .85rem;
  background: #fff; border: 1px solid #d9e1ea; border-radius: 14px;
}
.pb-bnp__finder .pb-bnp__h2 { margin: 0 0 .25rem; }
.pb-bnp__finder p { margin: 0 0 .75rem; color: #586779; font-size: .85rem; }
.pb-bnp__finder .pb-bnp__tools { margin-bottom: 0; }
.pb-bnp__finder .pb-bnp__count { margin: .55rem 0 0; }
.pb-bnp__guide {
  padding: .85rem 1rem; margin: .75rem 0;
  border: 1px solid #d9e1ea; border-radius: 12px; background: #fff;
}
.pb-bnp__guide summary { cursor: pointer; color: var(--bn-purple); font-weight: 800; }
.pb-bnp__guide[open] summary { margin-bottom: 1rem; }
.pb-bnp__guide--places .pb-bnp__chart { margin-top: .8rem; }

.pb-bnp__hero {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 1.6rem 1.5rem; margin-bottom: 1.2rem;
  border-radius: 16px;
  background: var(--bn-purple); color: #fff;
}
/* Naslov na vijolični pasici — glej razlago pri `.pb-bn-modal__hdr`. Dvojni
   razred, ker en sam razred z elementom temi ne bi bil kos. */
.pb-bnp__hero .pb-bnp__hero-t,
.pb-bnp__hero h1 { margin: 0 0 .3rem; font-size: 1.7rem; font-weight: 900; color: #fff; }
/* `opacity: .85` je bila prešibka: bel napis pri 85 % na #2F006C pade na
   10,2 : 1 — še vedno dovolj — a pri 12 px besedilu je bral kot siv. Raje
   nekoliko manj prosojno in polno berljivo. */
.pb-bnp__hero p { margin: 0; opacity: .92; font-size: .95rem; max-width: 60ch; color: #fff; }
.pb-bnp__badge {
  padding: .5rem .9rem; border-radius: 999px;
  background: var(--bn-green); color: var(--bn-purple);
  font-weight: 900; font-size: .85rem; white-space: nowrap;
}

/* #6f Pas z rokom za prevzem. Peščena podlaga blagovne znamke in zelena črta:
   dovolj, da pas izstopa, in premalo, da bi bral kot opozorilo o napaki. */
.pb-bnp__hold {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .9rem 1.1rem; margin-bottom: 1.4rem;
  border-radius: 12px;
  /* #7f Enakomerna obroba: pas ob levem robu je bil okras. */
  background: var(--bn-sand); border: 2px solid var(--bn-green);
}
.pb-bnp__hold-i { font-size: 1.4rem; line-height: 1.2; flex: 0 0 auto; }
.pb-bnp__hold b { display: block; font-size: .95rem; color: var(--bn-purple); margin-bottom: .25rem; }
.pb-bnp__hold span { font-size: .85rem; color: #4B4636; line-height: 1.5; }

/* Prazen seznam ni kartica z izdelkom — sredinjen napis z razlago, kaj zdaj. */
.pb-bnp__card--note {
  display: block; text-align: center;
  background: #FFF8E8; border-color: #E8CE95;
}
.pb-bnp__card--note strong { display: block; margin-bottom: .3rem; color: #8A4A08; }
.pb-bnp__card--note span { font-size: .85rem; color: #5B5344; line-height: 1.5; }

.pb-bnp__steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.4rem;
}
.pb-bnp__step {
  padding: .9rem 1rem; border-radius: 12px;
  background: #fff; border: 1px solid #E8EAED;
}
.pb-bnp__step b { display: block; font-size: .88rem; color: var(--bn-purple); margin-bottom: .2rem; }
.pb-bnp__step span { font-size: .8rem; color: var(--bn-mute); line-height: 1.45; }
.pb-bnp__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-bottom: .4rem;
  border-radius: 50%; background: var(--bn-green); color: var(--bn-purple);
  font-weight: 900; font-size: .8rem;
}

.pb-bnp__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1.4rem; }
.pb-bnp__size {
  padding: 1rem; border-radius: 12px; background: var(--bn-sand); border: 1px solid #DEDED2;
}
.pb-bnp__size b { display: block; font-size: 1.1rem; color: var(--bn-purple); font-weight: 900; }
.pb-bnp__size span { font-size: .8rem; color: var(--bn-ink); }
.pb-bnp__bar { height: 8px; border-radius: 4px; background: var(--bn-green); margin: .5rem 0; }

.pb-bnp__tools { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pb-bnp__tools input, .pb-bnp__tools select { flex: 1 1 200px; min-width: 0; }

.pb-bnp__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .6rem; }
.pb-bnp__card {
  padding: .7rem .8rem; border-radius: 11px;
  background: #fff; border: 1px solid #E8EAED;
}
.pb-bnp__card b { display: block; font-size: .86rem; color: var(--bn-ink); }
.pb-bnp__card span { display: block; font-size: .78rem; color: var(--bn-mute); }
.pb-bnp__card em { display: block; margin-top: .25rem; font-style: normal; font-size: .7rem; color: #9CA3AF; }
.pb-bnp__card a { display: inline-block; margin-top: .15rem; font-size: .74rem; font-weight: 700; color: var(--bn-purple); }

.pb-bnp__meta { margin: 1.2rem 0 .5rem; font-size: .76rem; color: var(--bn-mute); }

@media (max-width: 900px) {
  .pb-bnp__steps { grid-template-columns: repeat(2, 1fr); }
  .pb-bnp__hold { flex-direction: column; gap: .4rem; }
}
@media (max-width: 640px) {
  .pb-bnp__hero { grid-template-columns: 1fr; }
  .pb-bnp__steps, .pb-bnp__sizes { grid-template-columns: 1fr; }
  .pb-bnp__finder .pb-bnp__tools input { flex-basis: 100%; }
}

/* ┌ #6h POJASNILO POD NAČINI PLAČILA ─────────────────────────────────────┐
   │ Kadar paketomat kakšen način plačila skrije, kupec vidi, da se je      │
   │ seznam skrajšal, in ne ve, zakaj — najpogosteje pomisli, da je stran   │
   │ pokvarjena. Ta vrstica pove razlog in pot nazaj.                        │
   └──────────────────────────────────────────────────────────────────────────┘ */
.pb-bn-paynote {
  margin-top: .5rem;
  padding: .5rem .7rem;
  border-radius: 8px;
  background: var(--bn-sand);
  /* #7f Enakomerna obroba: pas ob levem robu je bil okras. */
  border: 1px solid var(--bn-purple);
  font-size: .78rem; line-height: 1.45; color: #4B4636;
}

/* ══ #6h JAVNA STRAN: KLIKLJIVE KARTICE IN OKNO S PODROBNOSTMI ═════════════ */

/* Kartica je gumb — mora izgledati klikljivo, a ne kot gumb za nakup. */
.pb-bnp__card--btn {
  display: flex; flex-direction: column; gap: .15rem;
  width: 100%; text-align: left; cursor: pointer;
  font: inherit;
  transition: border-color .12s, box-shadow .12s, transform .1s;
}
.pb-bnp__card--btn:hover {
  border-color: var(--bn-green);
  box-shadow: 0 2px 10px rgba(68, 214, 44, .18);
  transform: translateY(-1px);
}
.pb-bnp__card--btn:focus-visible {
  outline: 2px solid var(--bn-purple); outline-offset: 2px;
}
.pb-bnp__more {
  margin-top: .3rem;
  font-size: .74rem; font-weight: 800; color: var(--bn-purple);
}

.pb-bnp__count {
  margin: -.6rem 0 .9rem;
  font-size: .8rem; color: var(--bn-mute); min-height: 1.1em;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  #6s  KOLIKO JIH JE IN KJE — VELIKI PRIKAZ, GRAF, SKUPINE PO KRAJIH
 * --------------------------------------------------------------------------
 *  Odgovor, zaradi katerega kupec ta način dostave sploh izbere, je bil doslej
 *  v sivem oklepaju za naslovom: »Paketomati (140)«. Zdaj je največje na
 *  strani — in ni ena številka, ampak dve: koliko jih je IN v koliko krajih.
 *  Sama 140 ne pove nič; 140 v enem samem mestu bi bila slaba novica.
 * ══════════════════════════════════════════════════════════════════════════ */

.pb-bnp__h2 {
  font-size: 1.05rem; font-weight: 800; color: var(--bn-purple);
  margin: 1.6rem 0 .6rem;
}

.pb-bnp__big {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin: 0 0 1.2rem; padding: 1.1rem 1.2rem;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bn-purple) 0%, #4A0FA0 100%);
  color: #fff;
}
.pb-bnp__big-i { display: flex; align-items: baseline; gap: .45rem; }
.pb-bnp__big-i b {
  font-size: 2.9rem; font-weight: 900; line-height: 1;
  letter-spacing: -.02em; color: #fff;
}
/* Drugo število v zeleni: dve enaki beli številki drug ob drugem se berete
   kot ena sama dolga. */
.pb-bnp__big-i--alt b { color: var(--bn-green); }
.pb-bnp__big-i span { font-size: .92rem; font-weight: 700; opacity: .92; }
.pb-bnp__big-x { font-size: 1.1rem; font-weight: 700; opacity: .7; }
.pb-bnp__big-n {
  flex: 1 1 16rem; min-width: 0;
  font-size: .85rem; line-height: 1.5; opacity: .92;
}
.pb-bnp__big-n b { color: var(--bn-green); }

/* ┌ GRAF JE SEZNAM POVEZAV, NE SLIKA ────────────────────────────────────┐
   │ Vsak stolpec je povezava na iskanje po tem kraju — tako je graf hkrati │
   │ kazalo. Slika tega ne bi znala, knjižnica za grafe pa bi na stran, ki  │
   │ je namenoma brez tujih zahtevkov, prinesla tujo skripto.                │
   └────────────────────────────────────────────────────────────────────────┘ */
.pb-bnp__chart {
  display: grid; gap: .3rem;
  margin-bottom: .8rem;
}
.pb-bnp__row {
  display: grid; grid-template-columns: 8.5rem 1fr 2.6rem;
  align-items: center; gap: .6rem;
  padding: .3rem .5rem; border-radius: 8px;
  color: var(--bn-ink); text-decoration: none;
}
.pb-bnp__row:hover { background: var(--bn-sand); }
.pb-bnp__row-c {
  font-size: .82rem; font-weight: 700; color: var(--bn-purple);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-bnp__row-b {
  display: block; height: 14px; border-radius: 7px;
  background: rgba(47, 0, 108, .07);
}
.pb-bnp__row-b i {
  display: block; height: 100%; border-radius: 7px;
  background: var(--bn-green);
  min-width: 6px;
}
.pb-bnp__row-n {
  font-size: .82rem; font-weight: 800; color: var(--bn-ink); text-align: right;
}

/* Odtenek se veže na velikost — vrstni red je viden tudi brez primerjanja
   dolžin. Pet stopenj, ker jih je več, kot jih oko loči, brez pomena. */
.pb-bnp__row[data-tone="4"] i { background: #2F006C; }
.pb-bnp__row[data-tone="3"] i { background: #5B21B6; }
.pb-bnp__row[data-tone="2"] i { background: #0E9F6E; }
.pb-bnp__row[data-tone="1"] i { background: #33CC33; }
.pb-bnp__row[data-tone="0"] i { background: #8ADF7A; }

.pb-bnp__chart-f {
  margin: 0 0 1rem; font-size: .8rem; color: var(--bn-mute); line-height: 1.5;
}

/* ── Skupine po krajih ──────────────────────────────────────────────────── */
.pb-bnp__city { margin-bottom: 1.1rem; }
.pb-bnp__city[hidden] { display: none !important; }

.pb-bnp__city-h {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .45rem;
  font-size: .92rem; font-weight: 800; color: var(--bn-ink);
}
.pb-bnp__city-d {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--bn-purple);
}
.pb-bnp__city-n { overflow: hidden; text-overflow: ellipsis; }
.pb-bnp__city-c {
  padding: .05rem .45rem; border-radius: 999px;
  background: var(--bn-sand); color: var(--bn-purple);
  font-size: .72rem; font-weight: 800;
}

/* Šest barv in ne več: barva tu samo LOČUJE skupine, ne pomeni ničesar.
   Ime kraja in število stojita zraven, zato barvno slep bralec ne izgubi
   ničesar — to je pogoj, da barva sploh sme biti tu. */
.pb-bnp__city[data-tone="0"] .pb-bnp__city-d { background: #2F006C; }
.pb-bnp__city[data-tone="1"] .pb-bnp__city-d { background: #33CC33; }
.pb-bnp__city[data-tone="2"] .pb-bnp__city-d { background: #0E7490; }
.pb-bnp__city[data-tone="3"] .pb-bnp__city-d { background: #B45309; }
.pb-bnp__city[data-tone="4"] .pb-bnp__city-d { background: #BE185D; }
.pb-bnp__city[data-tone="5"] .pb-bnp__city-d { background: #4338CA; }

/* ── Velikosti predalnikov na kartici ───────────────────────────────────── */
.pb-bnp__sz { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .3rem; }
.pb-bnp__szc {
  padding: .02rem .32rem; border-radius: 5px;
  font-style: normal; font-size: .66rem; font-weight: 800;
  border: 1px solid transparent;
}
.pb-bnp__szc[data-sz="S"] { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.pb-bnp__szc[data-sz="M"] { background: #EFF6FF; color: #1E3A8A; border-color: #BFDBFE; }
.pb-bnp__szc[data-sz="L"] { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.pb-bnp__szc--all {
  background: var(--bn-sand); color: var(--bn-purple); border-color: #DEDED2;
  font-weight: 700;
}

@media (max-width: 640px) {
  .pb-bnp__big { padding: .9rem 1rem; gap: .3rem .8rem; }
  .pb-bnp__big-i b { font-size: 2.2rem; }
  .pb-bnp__big-x { display: none; }
  .pb-bnp__big-n { flex-basis: 100%; margin-top: .3rem; }
  .pb-bnp__row { grid-template-columns: 6.5rem 1fr 2.1rem; gap: .4rem; }
}

.pb-bnp-modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(15, 15, 25, .55);
}
.pb-bnp-modal[hidden] { display: none !important; }

.pb-bnp-modal__box {
  width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  background: #fff; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.pb-bnp-modal__hdr {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem 1rem;
  background: var(--bn-purple);
  border-radius: 14px 14px 0 0;
}
/* Dvojni razred — pravilo teme za naslove (razred + element) bi podedovano
   belo barvo sicer premagalo in naslov bi bil črn na vijoličnem. */
.pb-bnp-modal__hdr .pb-bnp-modal__t {
  margin: 0; font-size: 1rem; font-weight: 800; color: #fff;
}
.pb-bnp-modal__x {
  margin-left: auto; width: 28px; height: 28px;
  border: none; border-radius: 8px;
  background: rgba(255, 255, 255, .16); color: #fff;
  font-size: .9rem; cursor: pointer;
}
.pb-bnp-modal__b { padding: 1rem; }
.pb-bnp-modal__addr { margin: 0; font-size: .95rem; font-weight: 700; color: var(--bn-ink); }
.pb-bnp-modal__city { margin: .1rem 0 .8rem; font-size: .88rem; color: var(--bn-mute); }

.pb-bnp-modal__dl {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem;
  margin: 0; font-size: .84rem;
}
.pb-bnp-modal__dl dt { color: var(--bn-mute); }
.pb-bnp-modal__dl dd { margin: 0; font-weight: 700; color: var(--bn-ink); }

/* Zemljevid se vstavi šele na klik — do takrat je tu prazen prostor nič. */
.pb-bnp-modal__map { margin-top: .9rem; }
.pb-bnp-modal__map iframe {
  display: block; width: 100%; height: 240px;
  border: 1px solid var(--bn-line, #E8EAED); border-radius: 10px;
}

.pb-bnp-modal__foot {
  display: flex; gap: .5rem; flex-wrap: wrap;
  padding: 0 1rem 1rem;
}
.pb-bnp-modal__foot [hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
 *  #6r  IZBIRNIK PAKETOMATA NA TELEFONU
 * --------------------------------------------------------------------------
 *  Kartica z izbirnikom je bila pri 390 px visoka 432 px — več kot pol
 *  zaslona za en način dostave. Ni šlo za eno veliko napako, ampak za ducat
 *  odmikov, ki so na namizju neopazni, na telefonu pa se seštejejo.
 *
 *  Nižje se ne da brez izgube podatka SAMO z odmiki — zato je tu tudi
 *  opomba pod izbirnikom skrčena na dve vrstici namesto štirih.
 *
 *  ┌ ZAKAJ TA PRAVILA STOJIJO TU IN NE V `main.css` ────────────────────────┐
 *  │ `boxnow.css` se naloži ZA `main.css`. Ista teža pomeni, da zmaga        │
 *  │ poznejši — prvi poskus je bil v `main.css` in meritev po njem ni        │
 *  │ pokazala niti piksla razlike.                                            │
 *  └──────────────────────────────────────────────────────────────────────────┘
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pb-bn { margin-top: .5rem; padding: .5rem; }
  .pb-bn__fit { font-size: .74rem; gap: .35rem; }
  .pb-bn__pick { gap: .25rem; margin-top: .3rem; }
  .pb-bn__grid { gap: .3rem; }
  .pb-bn__lbl { font-size: .64rem; }
  .pb-bn__foot { margin-top: .3rem; gap: .15rem .5rem; }
  .pb-bn__cover,
  .pb-bn__note { font-size: .68rem; line-height: 1.3; }

  /* ┌ OPOMBA O MERAH SE SKRČI, NE SKRIJE ────────────────────────────────┐
     │ Pove, da je velikost predalnika OCENA — to je obljuba s pridržkom in │
     │ mora ostati vidna. Skrajšamo jo na dve vrstici, česar ne skrivamo:   │
     │ cela je še vedno v naslovu ob dotiku in v izvorni kodi strani.        │
     └──────────────────────────────────────────────────────────────────────┘ */
  .pb-bn__note {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  #7i  IZBRANA KARTICA — EN STOLPEC, IZBIRNIK ČEZ VSO ŠIRINO
 * --------------------------------------------------------------------------
 *  ┌ ZAKAJ SEM ODNEHAL OD DVEH STOLPCEV (7f, 7h) ───────────────────────────┐
 *  │ Dvakrat zapored je bila kartica razdeljena na levo (podatki) in desno   │
 *  │ (izbirnik). Obakrat je bila prijava ista: »dropdown je prekratek, tekst │
 *  │ razmetan«. Vzrok ni bil v razmerju stolpcev — v ozkem stolpcu blagajne  │
 *  │ dva stolpca preprosto NIMATA prostora: napis »Izberi paketomat« skupaj  │
 *  │ z ikono in puščico potrebuje ~240 px, opis načina dostave pa vsaj toliko│
 *  │ da se ne lomi po dve besedi na vrstico.                                  │
 *  │                                                                          │
 *  │ Zato je postavitev odslej ENOSTOLPČNA, tako kot na priloženi sliki:      │
 *  │                                                                          │
 *  │    BOX NOW paketomat                                    3,90 €           │
 *  │    Dostava v paketomat po vsej Sloveniji                                 │
 *  │    📅 Pošljemo v 1 delovnem dnevu   📦 2 paketomata v 2 krajih           │
 *  │    🔎 Napredno iskanje   Ⓢ Predalnik S · 0,18 kg   Kako deluje?          │
 *  │    ┌──────────────────────────────────────────────────────────────┐     │
 *  │    │ 📍 Izberi paketomat                                        ▾ │     │
 *  │    └──────────────────────────────────────────────────────────────┘     │
 *  │                                                                          │
 *  │ Izbirnik dobi CELO širino kartice — širši ne more biti in odrezati se    │
 *  │ ne more več. Vrstni red je hkrati vrstni red vprašanj: kaj je, kdaj      │
 *  │ pride, kje vse je, kaj dobim — in šele nato izbira.                       │
 *  └──────────────────────────────────────────────────────────────────────────┘
 *
 *  ┌ ZAKAJ `display: contents` NA `.pb-bn` ────────────────────────────────┐
 *  │ Vrstici z drobtinami in izbirniku mora vrstni red določati ISTA prožna │
 *  │ postavitev, ki ureja tudi ime, opis in pokritost — sicer se pokritost  │
 *  │ ne more znajti NAD vrstico z drobtinami, ker sta v različnih škatlah.  │
 *  │ `display: contents` škatlo `.pb-bn` odstrani iz izrisa, njena otroka   │
 *  │ pa postaneta neposredna elementa te postavitve. Ovoj s tem izgubi      │
 *  │ ozadje in obrobo — v tej kartici jih nima, ker jih nosi kartica sama.  │
 *  └────────────────────────────────────────────────────────────────────────┘
 *
 *  Postavitev velja SAMO za izbrano kartico: neizbrana izbirnika nima.
 *  Ločenih pravil za široko/ozko kartico ni več — en stolpec je pravilen v
 *  obeh, zato nastavitev »široko/ozko polje« odloča le še o širini kartice.
 * ══════════════════════════════════════════════════════════════════════════ */
.pb-method-card--boxnow.is-selected .pb-method-card__info {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}

.pb-method-card--boxnow.is-selected .pb-method-card__head { order: 1; min-width: 0 }

/* ┌ POKRITOST TIK POD DATUM ──────────────────────────────────────────────┐
   │ »Kdaj pošljemo« in »kje vse imamo paketomate« sta odgovora na isto     │
   │ vprašanje — ali mi to sploh ustreza. Zato stojita skupaj in nad        │
   │ podatki o izbiri.                                                       │
   └────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.is-selected .pb-bn__foot {
  order: 2;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: .78rem;
  line-height: 1.4;
}

.pb-method-card--boxnow.is-selected .pb-bn {
  display: contents;
}

/* ── Vrstica drobtin ─────────────────────────────────────────────────────
   Ovije se, kadar zmanjka širine: trije podatki so enakovredni in noben ne
   sme izginiti v tri pike, ker vsak odgovarja na svoje vprašanje. */
.pb-method-card--boxnow.is-selected .pb-bn__fit {
  order: 3;
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  min-width: 0;
}

.pb-method-card--boxnow.is-selected .pb-bn__size {
  width: 19px; height: 19px; font-size: .68rem;
}

/* Napredno iskanje je prvo, ker je DRUGA POT do istega cilja — kupec, ki v
   izbirniku svojega paketomata ne najde, ga mora videti, preden odneha. */
.pb-method-card--boxnow.is-selected .pb-bn__more-btn {
  order: -1;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* »Kako deluje?« gre na desni rob: je pomoč in ne podatek o pošiljki. */
.pb-method-card--boxnow.is-selected .pb-bn__more {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ── Izbirnik čez vso širino ───────────────────────────────────────────── */
.pb-method-card--boxnow.is-selected .pb-bn__pick {
  order: 4;
  margin-top: .1rem;
  width: 100%;
  min-width: 0;
}

/* ┌ POLJE MORA BITI POLJE ────────────────────────────────────────────────┐
   │ 48 px visoko in čez vso širino kartice. Napis »Izberi paketomat«       │
   │ potrebuje 168 px, ikona in puščica skupaj 60 — pri celi širini kartice │
   │ (od 320 px navzgor) se ne more odrezati pri nobeni širini zaslona.      │
   └────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.is-selected .pb-bn__cbtn {
  width: 100%;
  min-height: 48px;
  font-size: .92rem;
}

/* Naslov izbranega paketomata ostane POD izbirnikom: je posledica izbire in
   ne pot do nje. */
.pb-method-card--boxnow.is-selected .pb-bn__row {
  margin-top: .35rem;
  justify-content: flex-start;
}

/* ┌ ZLOŽENA KARTICA PREGLASI `display: contents` ─────────────────────────┐
   │ Razreda `--folded` (postavi ga skript ob prehodu na drug način) in     │
   │ `.is-selected` (postavi ga `main.js`) postavljata DVA različna skripta │
   │ in ju ne postavita v istem trenutku. V tistem kratkem prekrivanju bi    │
   │ `display: contents` iz pravila zgoraj izbirnik pustil viden pod         │
   │ kartico, ki je kupec ni izbral. Zato ima skritje zadnjo besedo.          │
   └────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.pb-method-card--folded .pb-bn,
.pb-method-card--boxnow.pb-method-card--folded.is-selected .pb-bn { display: none; }

/* Znak velikosti in napis »Predalnik S · 0,18 kg« sta en podatek — prelom
   vrstice med njima je v ozki kartici pustil krogec sam na koncu vrstice. */
.pb-bn__fitpair {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}

/* ┌ #7j ZLOŽENA KARTICA SKRIJE TUDI NOGO ────────────────────────────────────┐
   │ Prijava: »če ni aktiven način dostave BOX NOW, se pb-bn__foot skrije.«   │
   │                                                                            │
   │ Vzrok je bil v ZGRADBI: pravilo iz 6m skrije `.pb-bn`, noga s pokritostjo │
   │ pa je NJEN SOSED in ne otrok — od 7h stoji nad izbirnikom, ker mora biti  │
   │ pokritost pri opisu načina in ne pri izbiri. Pravilo, napisano za en      │
   │ element, drugega ni moglo doseči.                                          │
   │                                                                            │
   │ To je isti razred napake kot pri sliki darila: pravilo je bilo pisano za  │
   │ prejšnjo postavitev in je ob selitvi elementa tiho nehalo veljati. Zato   │
   │ sta oba elementa odslej v ISTEM pravilu — kdor bo naslednjič kaj premikal,│
   │ bo videl oba na istem mestu.                                               │
   │                                                                            │
   │ Pokritost ni podatek o IZBIRI, ampak o načinu dostave — a samo takrat,    │
   │ kadar je ta način izbran. Pri neizbrani kartici je to podatek o nečem,    │
   │ česar kupec ni izbral, in vzame vrstico, ki jo potrebuje naslednji način. │
   └────────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.pb-method-card--folded .pb-bn,
.pb-method-card--boxnow.pb-method-card--folded .pb-bn__foot,
.pb-method-card--boxnow.pb-method-card--folded.is-selected .pb-bn,
.pb-method-card--boxnow.pb-method-card--folded.is-selected .pb-bn__foot { display: none; }

/* ┌ #7m ZLOŽENOST IZ STREŽNIKA — IN ZAKAJ JE `:has()` TU VARNO ─────────────┐
   │ Prijava se je ponovila: kartica BOX NOW se ne zloži, kadar ni izbrana.   │
   │ Vsa dosedanja pravila so čakala na razred `--folded`, ki ga postavi       │
   │ `boxnow.js` — do takrat (skript ima `defer`, lahko je star v              │
   │ predpomnilniku, lahko ne steče) je kartica RAZPRTA.                       │
   │                                                                            │
   │ Strežnik ve že ob izrisu, kateri način je izbran, in pri ostalih izpiše   │
   │ `--foldable`. Ta razred uporablja SAMO spodnje pravilo:                    │
   │                                                                            │
   │ ┌ ZAKAJ TO NI PONOVITEV NAPAKE IZ 6p ─────────────────────────────────┐   │
   │ │ Paket 6p je pravilo s `:has()` odstranil, ker je izbirnik lahko      │   │
   │ │ ostal SKRIT tudi pri izbrani kartici — kupec paketomata ne izbere in │   │
   │ │ naročila ne odda.                                                     │   │
   │ │                                                                        │   │
   │ │ Tu je pogoj obrnjen: skrijemo samo, dokler radijski gumb NI izbran.   │   │
   │ │ V trenutku, ko kupec klikne kartico, se pravilo neha ujemati in       │   │
   │ │ izbirnik se pokaže — brez skripta. Skrit izbirnik pri izbrani kartici │   │
   │ │ tako ni mogoč.                                                         │   │
   │ │                                                                        │   │
   │ │ V brskalniku brez `:has()` je izbirnik neveljaven in pravilo odpade   │   │
   │ │ v celoti; tam ostane stanje iz 6p — vse vidno, dokler ne odloči        │   │
   │ │ skript. Zato ima ta razred SVOJE ime in ne `--folded`: tistega skript │   │
   │ │ tudi ODSTRANI, in če ne steče, bi zapisan v HTML kupca ujel v past.    │   │
   │ └────────────────────────────────────────────────────────────────────────┘   │
   └────────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.pb-method-card--foldable:not(:has(input:checked)) .pb-bn,
.pb-method-card--boxnow.pb-method-card--foldable:not(:has(input:checked)) .pb-bn__foot { display: none; }

/* ┌ #8p NOGA SKRITA TUDI V IZBRANI KARTICI (nastavitev) ─────────────────────┐
   │ Vsa pravila zgoraj skrijejo nogo, dokler kartica NI izbrana. To pravilo  │
   │ dela nasprotno in velja samo, kadar skrbnik tako nastavi — razred izpiše │
   │ strežnik iz nastavitve `hide_foot_active`.                                 │
   │                                                                            │
   │ Zakaj brez pogoja na izbranost: kadar je nastavitev vklopljena, se noga   │
   │ ne pokaže NIKOLI, in prav to je bila prošnja. Pravilo, ki bi skrivalo     │
   │ samo v izbranem stanju, bi ob pravilih zgoraj pomenilo isto, a bi bralcu  │
   │ obljubljalo razliko, ki je ni — dve pravili za isto odločitev se prej ali │
   │ slej razideta.                                                              │
   │                                                                            │
   │ Razred stoji na kartici in ne na nogi: nosilec je način dostave, ne       │
   │ vrstica. Ista noga je lahko na strani dvakrat (dva načina), nastavitev pa │
   │ velja za BOX NOW.                                                           │
   └────────────────────────────────────────────────────────────────────────────┘ */
.pb-method-card--boxnow.pb-method-card--nofoot .pb-bn__foot { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   #7j  DROBTINE SO TARČE ZA PRST
   --------------------------------------------------------------------------
   IZMERJENO (Playwright, 320–2560 px): »Napredno iskanje« je bilo visoko
   14–19 px, »Kako deluje?« prav tako. Od 7i sta oba v vrstici NAD izbirnikom
   in sta glavni poti do paketomata za kupca, ki ga v seznamu ne najde — v
   tej vlogi je 14 px premalo za zanesljiv zadetek s palcem.

   Najmanjša višina in navpični notranji rob; videz ostane enak, občutljivo
   območje pa doseže 32 px. Vrstica se zato ne zviša: `.pb-bn__fit` ima
   `align-items: center` in prostor je že tam.
   ══════════════════════════════════════════════════════════════════════════ */
.pb-bn__more-btn,
.pb-bn__more {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-block: .25rem;
}

/* Na dotičnih napravah je meja višja: kazalec je palec in ne konica miške.
   `pointer: coarse` je edini zanesljiv način, da to ločimo — širina zaslona
   ni isto kot vrsta kazalca (tablica s tipkovnico, telefon v namizni obliki). */
@media (pointer: coarse) {
  .pb-bn__more-btn,
  .pb-bn__more { min-height: 40px; }
}

/* Blagajna v2: kompaktna kartica, izbirnik pa ostane čez celo širino. */
.pb-checkout--v2 .pb-method-cards .pb-method-card--boxnow[data-type="shipping"] {
  display: block;
  position: relative;
  min-height: 0;
  padding: .75rem .85rem;
}
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__icon { display: none; }
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__radio {
  position: absolute;
  top: .9rem;
  left: .85rem;
  margin: 0;
}
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__info { width: 100%; min-width: 0; }
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__head {
  display: block;
  min-width: 0;
  padding: 0 7.6rem 0 1.9rem;
}
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__name { font-size: .95rem; line-height: 1.2; }
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__when { margin-top: .15rem; }
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__delivery { font-size: .76rem; line-height: 1.25; }
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__price {
  position: absolute;
  top: .8rem;
  right: .85rem;
  max-width: 7rem;
  margin: 0;
  font-size: .95rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  text-align: right;
}
.pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__was { font-size: .7rem; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-method-card__info { gap: .3rem; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__fit { gap: .15rem .6rem; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__pick { margin-top: 0; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__cbtn,
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__sel { min-height: 44px; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__row { margin-top: .1rem; }
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__at {
  display: block;
  overflow: visible;
  overflow-wrap: anywhere;
  -webkit-line-clamp: unset;
}
.pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__at[hidden] { display: none; }

@media (max-width: 480px) {
  .pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__head { padding-right: 0; }
  .pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__t { padding-right: 6.5rem; }
  .pb-checkout--v2 .pb-method-card--boxnow:has(.pb-method-card__was) .pb-method-card__t { min-height: 2.15rem; }
  .pb-checkout--v2 .pb-method-card--boxnow .pb-method-card__price { max-width: 6.1rem; font-size: .82rem; }
  .pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "size size" "search help";
    align-items: center;
    gap: 0 .5rem;
    font-size: .74rem;
  }
  .pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__fitpair { grid-area: size; min-width: 0; }
  .pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__more-btn { grid-area: search; justify-self: start; }
  .pb-checkout--v2 .pb-method-card--boxnow.is-selected .pb-bn__more { grid-area: help; justify-self: end; margin-left: 0; }
}