/*
 * Prihvaćeni A4 mobilni prikaz listing kartica.
 * Desktop namjerno nema vizualnih promjena; svi layout overrideovi su u breakpointu.
 */
.sale-prices{display:contents}
.regular-price{display:none}
.date-item + .date-item::before{content:" · "}
/* „…” ispred prazničnog datuma koji ne stane u red (PP-115): bez točke oko trotočja. */
.date-item.date-ellipsis::before,.date-ellipsis + .date-item::before{content:" "}
.listing-a4-intro{display:contents}
/* Podnaslov prati isto uredničko pravilo na svim širinama (Mario, 28.09.2026.).
   Postojeća klasa ostaje radi kompatibilnosti s izgrađenim stranicama. */
body.listing-a4 .sub-mobile-only{display:none}
.listing-trust-section,.listing-trust-strip{display:none}
.listing-why{display:none}

/* Odobreni HP vizual, prilagođen punoj širini listinga iznad footera. */
/* Traka povjerenja pocinje vec na tabletu. Prije je zivjela samo u bloku od
   1020px, a mobilna varijanta samo do 720px, pa u rasponu 721-1019px nije bilo
   nijedne - Marijev nalaz "dio elemenata se ne prikazuje". */
@media(min-width:721px){
  .listing-why{display:block;padding:23px 0 24px;border-top:1px solid #e4dfd7;background:#faf9f6;color:#172234}
  .listing-why-inner{display:grid;width:min(1150px,calc(100% - 24px));margin:auto;grid-template-columns:minmax(245px,.72fr) 2fr;gap:25px}
  .listing-why-head{position:relative;align-self:start;padding:4px 22px 4px 16px}
  .listing-why-head::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:3px;background:#ff7200}
  .listing-why-head h2{margin:0;color:#172234;font-size:clamp(20px,2.2vw,27px);line-height:1.08;letter-spacing:-.03em}
  .listing-why-head p{margin:8px 0 0;color:#687386;font-size:12.5px;line-height:1.42}
  /* Isti raspored kao .hpc-reason na naslovnici: ikona 28px u lijevom stupcu,
     tekst desno, poravnanje na vrh. Marijeva uputa je da traka izgleda kao na
     HP-u; medaljon s ikonom iznad naslova je vracen na ovo. */
  .listing-why-reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
  .listing-why-reasons li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:start;min-width:0;padding:14px 17px}
  .listing-why-reasons li+li{border-left:1px solid #e8e2da}
  .listing-why-icon{display:grid;width:28px;height:28px;place-items:center;color:#d95f00;flex:0 0 auto}
  .listing-why-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
  .listing-why-reasons strong{display:block;color:#172234;font-size:15px;line-height:1.22;font-weight:750}
  .listing-why-reasons div>span{display:block;margin-top:4px;color:#687386;font-size:11.5px;line-height:1.36}
  /* Inline varijanta trake povjerenja ukinuta je 2026-08-13: traka stoji na
     dnu punom sirinom na svim listinzima, bez obzira na broj kartica. */
  .listing-why-full{padding:23px 0 24px}
}

@media(min-width:1020px){
  body.listing-a4 .header-clearance{min-height:0}
  body.listing-a4 .pagegrid{padding-top:10px}
  /* Jedno desktop sidro za SVE listinge. Naslovni blok i lijevi sidebar imaju
     istih 74px, pa vrh boxa destinacije uvijek pada tocno na vrh prvog
     filtera ili kartice. Vrijednost je zaokruzena stvarna mjera referentnog
     /ponuda-putovanja bloka (73,8px na 1440px). */
  body.listing-a4 .sidebar{padding-top:74px}
  body.listing-a4 .listing-head{
    box-sizing:border-box;height:74px;padding-bottom:12px;
    display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  }
  /* Destinacijski listinzi nemaju filtere ni desktop podnaslov. Kartica i
     sidebar ostaju na zajednickom sidru, a H1 dobiva trazenih 20px zraka. */
  body.listing-destination .listing-head{padding-bottom:20px}
  /* Opci listinzi zadrzavaju isto sidro; filter nema gornji, samo donji
     padding. Pravilo je namjerno ograniceno na desktop/tablet granu. */
  body.listing-general .toolbar{padding-top:0;padding-bottom:12px}
  body.listing-a4 .listing-head h1.sec{margin:0;line-height:1.08}
  body.listing-a4 .listing-head p.sub{margin:0;line-height:1.25}
  /* Na desktop destinacijskom listingu prvi aranžman je referentni desni
     element. Paralelne sezonske poveznice ostaju dostupne na mobitelu, ali ne
     guraju prvu desktop karticu ispod zajednickog sidra. */
  body.listing-destination .peer-nav{display:none}
  body.listing-h1-compact h1.sec{
    white-space:nowrap;font-size:clamp(20px,2.1vw,27px);letter-spacing:-.015em
  }
  body.listing-a4 h1.sec{margin-top:0}

  .listing-a4 .sbox{padding:12px 11px}
  .listing-a4 .sbox .dlist li{margin:0}
  .listing-a4 .sbox .dlist a{
    min-height:21px;padding:2px 7px;align-items:center;border:1.1px solid transparent;
    border-radius:8px;transition:background-color .15s ease,border-color .15s ease,color .15s ease
  }
  .listing-a4 .sbox .dlist a:hover{background:#fff9f2;border-color:#ffd4ae;color:#d95f00}
  /* Odabrana destinacija izgleda kao odabrani termin na stranici aranžmana:
     ista narančasta (#ff7200), isti svijetli fond (#fff7ed) i ista točka s
     prstenom. Vrijednosti su prepisane iz .drow.sel u templates/tour.html. */
  .listing-a4 .sbox .dlist a.is-current{background:#fff7ed;border-color:#e87a00;color:#22303f;font-weight:400}
  .listing-a4 .sbox .dlist,.listing-a4 .sbox .dlist a{line-height:1.2}
  .listing-a4 .dest-name{display:flex;min-width:0;align-items:flex-start;gap:5px}
  .listing-a4 .dest-name>span:last-child{display:block;min-width:0}
  .listing-a4 .dest-name small{display:block;margin-top:1px;color:inherit;font-size:inherit;line-height:.9}
  .listing-a4 .dest-arrow{display:inline-block;color:#e87a00;font-size:18px;font-weight:900;line-height:12px}
  /* Odabrana destinacija nosi jednostavnu narančastu točku. Visina i gornja
     margina namjerno prate strelicu susjednih destinacija (line-height 12px),
     pa točka sjedi u istoj liniji kao i one. */
  /* Bullet mora stajati tocno ondje gdje je bila strelica, da odabir ne pomakne
     ni oznaku ni tekst. Glif "›" ima bocne razmake: kutija mu je 6.6px siroka.
     Bullet je 8px, pa obje margine idu u minus — margin-box se suzi na ~6px,
     koliko zauzima i strelica, pa naziv destinacije pocinje na istoj poziciji
     kao u ostalim retcima. Gornja margina 5px spusta tocku u sredinu prvog
     retka teksta otkako je line-height 1.2 (Marijeva mjera, 13.09.2026.;
     ranije 2px uz line-height 1). Vrijedi samo ovdje: .dlist postoji jedino u
     desktop sidebaru, ispod 1020px je skriven. */
  .listing-a4 .dlist .is-current .dest-arrow{
    box-sizing:content-box;width:8px;height:8px;margin:5px -1px 0;
    border:0;border-radius:50%;background:#e87a00;font-size:0;line-height:0;flex:0 0 auto
  }
  .listing-a4 .dlist .dest-price{color:#687386;white-space:nowrap;font-size:13px;font-weight:400}

  /* Na desktop destinaciji navigacija je već u lijevom stupcu. */
.listing-a4 .sidebar-quick-box{padding:14px 12px}
  .listing-a4 .sidebar-quick-box h3{margin-bottom:10px}
  .listing-a4 .sidebar-quick-links{display:grid;gap:6px}
  .listing-a4 .sidebar-quick-link{
    display:flex;min-height:39px;padding:7px 8px;align-items:center;justify-content:space-between;gap:6px;
    border:1px solid #e5e0d9;border-radius:7px;background:#fdfcfb;color:#22303f;
    font-size:12px;font-weight:700;line-height:1.2;text-decoration:none;
    transition:background-color .15s ease,border-color .15s ease,color .15s ease,transform .15s ease
  }
  .listing-a4 .sidebar-quick-link small{display:block;margin-top:2px;color:#687386;font-size:10px;font-weight:500}
  .listing-a4 .sidebar-link-arrow{color:#e87a00;font-size:20px;font-weight:900;line-height:1}
  .listing-a4 .sidebar-quick-link:hover{border-color:#e87a00;background:#fff7ef;color:#c96400;text-decoration:none;transform:translateX(1px)}

}

@media(min-width:1020px){
  /* Na desktopu je destinacijska navigacija u lijevom stupcu, pa se mobilni
     selektor skriva. Bez ovoga bi se pojavio uz gumbe. */
  body.listing-destination .destination-nav-mobile{display:none}
}

@media(max-width:1019px){
  .listing-a4 .sidebar{display:none}
}

/* ---------------------------------------------------------------------------
   TABLET (721–1019 px) — i vodoravno okrenut telefon.
   Ovaj raspon je dosad ispadao između dva svijeta: mobilna pravila stala su na
   720px, a desktop je počinjao na 1020px. Zato ovdje nije bilo ni trake
   povjerenja, a selektor destinacije se raspadao u 250px visok popis.
   Uzima se najbolje od oboje: mobilni šasija zaglavlja (drawer je jedini koji
   stane), a desktop bogatstvo sadržaja u tijelu stranice.
   --------------------------------------------------------------------------- */
@media(min-width:721px) and (max-width:1019px){
  /* Selektor destinacije je pill, isto kao na mobitelu. Bez ovoga se na tabletu
     prikazivao kao neuređen <select> preko cijele širine. */
  .listing-a4 .destination-nav-mobile{display:block;margin:0 0 14px;padding:0;background:none}
  .listing-a4 .destination-nav-mobile .f-pill{
    position:relative;display:flex;align-items:center;gap:8px;
    width:min(320px,100%);height:44px;padding:0 26px 0 10px;margin:0;
    border:1px solid #d8d3cb;border-radius:10px;background:#fff;
    box-shadow:0 1px 2px rgba(23,34,52,.06)
  }
  .listing-a4 .destination-nav-mobile .destglobe{width:20px;height:20px;flex:0 0 auto;color:#f07800}
  .listing-a4 .destination-nav-mobile .f-pill-lab{
    position:absolute;left:38px;top:6px;z-index:1;pointer-events:none;
    font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    color:#8a97a3;line-height:1
  }
  .listing-a4 .destination-nav-mobile .f-pill select{
    position:absolute;inset:0;width:100%;height:100%;
    -webkit-appearance:none;appearance:none;border:0;background:transparent;
    padding:19px 26px 4px 38px;margin:0;border-radius:10px;
    font-family:inherit;font-size:15px;font-weight:600;color:#22303f;
    line-height:1.1;cursor:pointer;text-overflow:ellipsis
  }
  .listing-a4 .destination-nav-mobile .f-pill::after{
    content:"";position:absolute;right:11px;top:calc(50% + 2px);width:6px;height:6px;
    border-right:1.7px solid #6b7683;border-bottom:1.7px solid #6b7683;
    transform:translateY(-50%) rotate(45deg);pointer-events:none
  }

  /* Četiri kartice su na tabletu preuske (187px); dvije daju čitljiv tekst. */
  .listing-a4 .listing-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

  /* Traka povjerenja: naslov iznad razloga, jer dva stupca ovdje stisnu tekst. */
  .listing-why-inner{grid-template-columns:1fr;gap:14px}
  .listing-why-head{padding-left:14px}
  .listing-why-reasons li{padding:14px 12px}
}

/* Isti informativni overlay kao na stranici aranžmana. */
.listing-a4 .garov{display:none;position:fixed;inset:0;z-index:130;background:rgba(20,28,36,.62);padding:0;overflow:auto}
.listing-a4 .garov.open{display:flex;align-items:center;justify-content:center}
.listing-a4 .garpanel{position:relative;background:#fff;border-radius:16px;max-width:460px;width:100%;height:80vh;max-height:80vh;display:flex;flex-direction:column;justify-content:center;padding:42px 16px 12px;overflow:auto;text-align:left;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.listing-a4 .garitem{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;padding:1.2vh 0 0;margin-top:1.2vh;border-top:1px solid #e8e5df}
.listing-a4 .garitem:first-of-type{border-top:0;padding-top:0;margin-top:0}
.listing-a4 .garitem img,.listing-a4 .garitem .bigseal{width:min(122px,14vh);height:auto;flex:0 0 auto;color:#182430}
.listing-a4 .garitem p{margin:0;font-size:clamp(11.5px,1.62vh,13px);line-height:1.36;max-width:335px;color:#39434c}
/* Poruka o putovanju koje trenutacno nije u ponudi. Isti dijalog kao garancija,
   ali kratak sadrzaj, pa panel ne drzi fiksnih 80vh. */
/* Bocni razmak nosi overlay: kratka kartica sa zaobljenim kutovima ne smije na
   mobitelu dodirivati rubove ekrana (garancijski dijalog je visok 80vh, pa je
   kod njega rub prirodan). */
.listing-a4 .gt-nedostupno{padding:18px}
.listing-a4 .gt-nedostupno .garpanel{height:auto;max-width:420px;padding:46px 22px 24px;gap:16px}
.listing-a4 .gt-nedostupno .garitem{gap:16px}
.listing-a4 .gt-nedostupno .garitem p{font-size:16px;line-height:1.4;max-width:none;color:#25323e;font-weight:600}
/* Ista narancasta kao CTA kartica ovog listinga; `--gt-orange` ovdje ne vrijedi
   jer je definiran samo na elementima zaglavlja i overlaya. */
.listing-a4 .gt-nedostupno-cta{
  display:inline-flex;min-height:44px;padding:10px 18px;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:#ff7200;color:#fff;
  font:750 14px/1.2 -apple-system,"Segoe UI",system-ui,Roboto,Arial,sans-serif;cursor:pointer
}
.listing-a4 .gt-nedostupno-cta:hover{background:#d95f00}
.listing-a4 .gt-nedostupno-cta:focus-visible{outline:3px solid rgba(255,114,0,.48);outline-offset:2px}

.listing-related-trips{margin:22px 0 8px}
.listing-related-trips>h2{display:flex;align-items:center;gap:9px;margin:0 0 10px;color:#172234;font-size:18px;line-height:1.25}
.listing-related-trips>h2::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:#ff7200}
.listing-related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.listing-related-card{min-width:0;overflow:hidden;border:1px solid #e2dcd2;border-radius:11px;background:#fff;box-shadow:0 8px 22px rgba(34,48,63,.08)}
.listing-related-card>a{display:flex;height:100%;flex-direction:column;color:#172234;text-decoration:none}
.listing-related-thumb{display:block;height:112px;overflow:hidden;background:#eee}
.listing-related-thumb picture{display:block;width:100%;height:100%}
.listing-related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .18s ease}
.listing-related-body{display:flex;min-height:172px;padding:11px 12px 12px;flex-direction:column}
.listing-related-kicker{margin-bottom:5px;color:#7a8289;font-size:9.5px;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
/* Naslov drži mjesto za dva reda, pa se opis i cijena poravnaju u svim
   karticama i kad je jedan naziv praznika dulji od ostalih. */
.listing-related-title{
  color:#172234;font-size:14px;line-height:1.22;font-weight:780;
  min-height:calc(2 * 14px * 1.22);display:flex;align-items:flex-start
}
.listing-related-copy{margin-top:6px;color:#4f5962;font-size:11.5px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.listing-related-copy p{margin:0}
.listing-related-meta{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px;color:#667085;font-size:10px}
.listing-related-meta strong{color:#d95f00;font-size:17px}
.listing-related-cta{display:inline-flex;min-height:30px;padding:0 9px;align-items:center;border-radius:6px;background:#ff7200;color:#fff;font-size:10.5px;font-weight:750}
.listing-related-card>a:hover .listing-related-thumb img{transform:scale(1.025)}
.listing-related-card>a:hover .listing-related-cta{background:#d95f00}
.listing-related-card>a:focus-visible{outline:3px solid rgba(255,114,0,.48);outline-offset:2px}

@media (max-width:720px){
  body.listing-a4{
    --listing-a4-gutter:16px;
    background:#dcdcd9;
  }
  body.listing-a4 > .wrap {
    padding-left:var(--listing-a4-gutter,16px);
    padding-right:var(--listing-a4-gutter,16px);
  }
  body.listing-a4 .gt-shell-logo{left:-2px}

  .listing-a4 .pagegrid{padding-top:0}
  .listing-a4 .listing-a4-intro{
    display:flex;
    flex-direction:column;
    margin-inline:calc(0px - var(--listing-a4-gutter));
    padding:47px var(--listing-a4-gutter) 0;
    background:#fff;
  }
  /* Na mobitelu omotac naslova nestaje: naslov i podnaslov moraju ostati
     izravna flex djeca uvodnog bloka, inace ih `order` ispod ne bi pomicao.
     Sidrenje uz box destinacije je iskljucivo desktop stvar — sidebara ovdje
     ionako nema. */
  .listing-a4 .listing-head{display:contents}
  .listing-a4 .listing-a4-intro h1{order:1}
  .listing-a4 .listing-a4-intro .sub{order:2}
  .listing-a4 .listing-a4-intro .toolbar{order:4}
  /* Traka cipova se prelijeva preko gutera stranice, pa se rub zadnjeg cipa
     ne odsijeca dok se traka povlaci vodoravno. */
  .listing-a4 .listing-a4-intro .peer-nav{
    order:5;
    margin:9px calc(-1 * var(--listing-a4-gutter,16px)) 0;
    padding:0 var(--listing-a4-gutter,16px) 2px;
  }
  .listing-a4 .listing-a4-intro .filter-clear{order:6}
  .listing-a4 .peer-chip{min-height:30px}
  .listing-a4 .listing-a4-intro::after{
    content:"";
    display:block;
    height:36px;
    margin-inline:calc(0px - var(--listing-a4-gutter));
    background:linear-gradient(to bottom,#fff 0%,#f4f2ee 100%);
    order:7;
  }
  .listing-a4 h1.sec{
    margin:0 0 3px;
    color:#22303f;
    font-size:24px;
    line-height:1.18;
    letter-spacing:-.025em;
  }
  .listing-a4 p.sub{
    margin:0 0 12px;
    color:#51606f;
    font-size:13.5px;
    line-height:1.4;
  }
  .listing-a4 .toolbar{
    position:static;
    display:grid;
    /* Udjeli su izracunati iz stvarnih sirina zadanih oznaka (124:102:129 px na
       390px), pa sve tri stanu cijele bez tri tockice. `auto` ovdje ne radi:
       <select> ne prijavljuje sirinu svog teksta kao intrinsicnu velicinu. */
    grid-template-columns:minmax(0,1.21fr) minmax(0,1fr) minmax(0,1.26fr);
    gap:3px;
    width:100%;
    margin:0;
    padding:0;
    overflow:visible;
    background:#fff;
  }
  /* build.ps1 omits filters a page cannot use, so the three-column default
     needs fallbacks for one or two visible selects (#f-text is hidden here). */
  .listing-a4 .toolbar[data-mobile-filters="2"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .listing-a4 .toolbar[data-mobile-filters="1"]{grid-template-columns:minmax(0,1fr)}
  .listing-a4 .toolbar[data-mobile-filters="0"]{display:none}

@media(max-width:360px){
    body.listing-a4 .gt-shell-search-button,
    body.listing-a4 .gt-shell-menu-button{width:42px;justify-content:center;padding-inline:10px;font-size:0}
    body.listing-a4 .gt-shell-search-button svg,
    body.listing-a4 .gt-shell-menu-button svg{width:16px;height:16px}
}
  /* Pill nosi okvir i oznaku, a select unutra ostaje native i pokriva cijeli
     pill. Vrijednost mora ostati na 16px jer iOS inace zumira pri otvaranju. */
  .listing-a4 .toolbar .f-pill{
    display:block;
    width:100%;
    min-width:0;
    border-color:#d1d1d1;
    border-radius:11px;
    background:#fff;
    box-shadow:0 1px 2px rgba(34,48,63,.05);
  }
  /* Naslov iznad vrijednosti je ukinut (Marijev odabir 2026-08-13): znacenje
     nosi sama vrijednost — "Sve destinacije", "Sva trajanja", "Polazak Zagreb".
     Deklaracija ostaje jer je koristi selektor destinacije na destinacijskim
     listinzima, koji naslov i dalje ima. */
  .listing-a4 .toolbar:not(.destination-nav-mobile) .f-pill-lab{display:none}
  .listing-a4 .toolbar .f-pill-lab{
    left:10px;
    top:7px;
    font-size:9px;
    letter-spacing:.6px;
  }
  .listing-a4 .toolbar .f-pill::after{
    right:10px;
    top:50%;
    width:6px;
    height:6px;
    border-width:1.8px;
  }
  .listing-a4 .toolbar .f-pill select{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:100%;
    /* Marijeve mjere 2026-08-13: pill je 28px (30px s okvirom), tekst 13px i
       tamno siv kao podnaslov, padding stisnut da sve tri pune oznake stanu na
       390px bez tri tockice. Bez naslova iznad vrijednosti padding je gotovo
       simetrican. Isti izgled kao selektor destinacije na destinacijskim
       listinzima, pa filtri na oba mjesta izgledaju jednako. */
    height:28px;
    margin:0;
    padding:1px 15px 1px 6px;
    border-radius:11px;
    color:#51606f;
    font-size:13px;
    line-height:1.2;
    letter-spacing:-.035em;
    text-overflow:ellipsis;
    touch-action:manipulation;
    white-space:nowrap;
  }
  .listing-a4 .toolbar input{
    width:100%;
    min-width:0;
    max-width:none;
    height:52px;
    margin:0;
    padding:7px 10px;
    border-color:#d8d3cb;
    border-radius:11px;
    background:#fff;
    box-shadow:0 1px 2px rgba(34,48,63,.05);
    color:#22303f;
    font-size:16px;
    line-height:1.2;
    touch-action:manipulation;
  }
  .listing-a4 .toolbar #f-text{display:none}
  .listing-a4 .toolbar .f-pill:focus-within,
  .listing-a4 .toolbar input:focus-visible{
    border-color:#e87a00;
    outline:0;
    box-shadow:0 0 0 2px rgba(232,122,0,.18),0 1px 2px rgba(34,48,63,.05);
  }
  /* Aktivan filter mora ostati narančast i ovdje: pravilo iznad postavlja
     border-color na sivu s vecom specificnoscu nego .f-pill.is-on iz predloska. */
  .listing-a4 .toolbar .f-pill.is-on{
    border-color:#e87a00;
    box-shadow:0 0 0 2px rgba(232,122,0,.16),0 1px 2px rgba(34,48,63,.05);
  }
  .listing-a4 .toolbar .f-pill.is-on .f-pill-lab{color:#c96400}
  .listing-a4 .filter-clear{
    margin:7px 0 0;
  }

  /* ---------- vrh destinacijskog listinga (Marijev prototip 1) ----------
     Logotip je 125x83 i zavrsava na 89. Red 1 (Pretraga, Izbornik) 6..44,
     razmak 7, red 2 (selektor destinacije) 51..89. Zbroj 83 = visina
     logotipa, pa nista ne strsi ispod njegove linije. */
  body.listing-destination{position:relative}
  body.listing-destination .gt-shell-header{border-bottom:0;box-shadow:none}
  /* Sam izgled gumba je u site-shell.css jer je zajednicki cijelom sajtu.
     Ovdje ostaje samo ono sto je svojstveno destinacijskom vrhu: gumbi se
     drze gornjeg ruba da ispod njih stane drugi red sa selektorom. */
  body.listing-destination .gt-shell-inner{align-items:flex-start;padding-top:6px}
  /* Selektor je obican native select; pozicioniran je prema tijelu stranice
     da mu donji rub padne tocno na donji rub logotipa. */
  /* Kontejner selektora je .listing-a4-intro, koji na mobilnom ima negativne
     rubne margine i pocinje ispod zaglavlja. Zato se ciljanih 51px izrazava
     preko visine zaglavlja, a desni rub preko dvostrukog gutera. */
  body.listing-destination{--gt-head-h:97px}
  body.listing-destination .gt-shell-inner{min-height:var(--gt-head-h)}
  body.listing-destination .listing-a4-intro{position:relative;padding-top:24px}
  body.listing-destination .destination-nav-mobile{
    position:absolute;top:calc(51px - var(--gt-head-h));left:auto;
    /* +2px: kontejner uvoda je za toliko siri od stupca s gumbima */
    right:calc(var(--listing-a4-gutter,16px) + 2px);
    /* PP-104: na uskim mobitelima izbornik se sužava da ne prekrije logo (desni rub loga ~139 px, izbornik 31 px od desnog
       ruba, 8 px razmaka). */
    width:min(202px,calc(100vw - 178px));height:38px;margin:0;padding:0;background:none;display:block;z-index:95;
  }
  /* Izgled je pill, ponasanje nativni dropdown: <select> prekriva cijeli
     pill, pa dodir otvara sistemski izbornik. Vrijednost ispisuje sam select,
     a oznaka stoji iznad nje. */
  body.listing-destination .destination-nav-mobile .f-pill{
    position:relative;display:flex;align-items:center;gap:8px;
    width:100%;height:38px;padding:0 24px 0 9px;margin:0;
    border:1px solid #d1d1d1;border-radius:10px;background:#fff;
    box-shadow:0 1px 2px rgba(23,34,52,.06);
  }
  body.listing-destination .destination-nav-mobile .destglobe{
    width:19px;height:19px;flex:0 0 auto;color:#f07800;
  }
  body.listing-destination .destination-nav-mobile .f-pill-lab{
    position:absolute;left:36px;top:5px;z-index:1;pointer-events:none;
    font-size:8.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
    color:#8a97a3;line-height:1;
  }
  body.listing-destination .destination-nav-mobile .f-pill select{
    position:absolute;inset:0;width:100%;height:100%;
    -webkit-appearance:none;appearance:none;border:0;background:transparent;
    /* Sadrzajni okvir mora ostati visi od teksta, inace Chrome odreze donje
       produzetke slova (j, g) u nazivu odredista. Gornji padding je 16px, a ne
       14: uz 13px tekst (Marijeva mjera 2026-08-13) vrijednost bi inace sjela
       previsoko pod oznaku. */
    padding:16px 24px 2px 36px;margin:0;border-radius:10px;
    font-family:inherit;font-size:13px;font-weight:400;color:#22303f;
    line-height:1.25;cursor:pointer;text-overflow:ellipsis;
  }
  body.listing-destination .destination-nav-mobile .f-pill::after{
    content:"";position:absolute;right:10px;top:calc(50% + 2px);width:6px;height:6px;
    border-right:1.7px solid #6b7683;border-bottom:1.7px solid #6b7683;
    transform:translateY(-50%) rotate(45deg);pointer-events:none;
  }
  body.listing-destination h1.sec{font-size:21px;line-height:1.14;letter-spacing:-.03em;margin:0 0 5px}
  body.listing-destination p.sub{font-size:12.5px;line-height:1.35;margin:0 0 6px}
  /* Prijelazni gradijent iz bijelog uvoda u pozadinu listinga. Marijev zahtjev
     je najvise 20px praznine do prve kartice, a 6px vec nosi margina podnaslova. */
  body.listing-destination .listing-a4-intro::after{height:14px}
  .listing-a4 #rows{
    margin-inline:calc(0px - var(--listing-a4-gutter));
    padding-inline:var(--listing-a4-gutter);
    background:linear-gradient(
      to bottom,
      #f4f2ee 0,
      #dcdcd9 360px,
      #dcdcd9 100%
    );
  }

  .listing-a4 .lrow{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto;
    grid-template-areas:
      "thumb"
      "title"
      "usps"
      "deal"
      "dates"
      "offer";
    gap:normal;
    padding:0;
    margin-bottom:18px;
    overflow:hidden;
    border-color:#dedbd5;
    border-radius:15px;
    color:#172234;
    font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
    box-shadow:6px 9px 24px rgba(23,34,52,.13);
  }
  .listing-a4 .lrow:hover{box-shadow:6px 9px 24px rgba(23,34,52,.13)}
  .listing-a4 .listing-trust-section{
    display:block;
    margin:-1px 0 18px;
  }
  .listing-a4 .listing-related-trips{margin:24px 0 4px}
  .listing-a4 .listing-related-grid{grid-template-columns:1fr;gap:10px}
  .listing-a4 .listing-related-card>a{display:grid;grid-template-columns:112px minmax(0,1fr)}
  .listing-a4 .listing-related-thumb{width:112px;height:100%;min-height:128px}
  .listing-a4 .listing-related-body{min-height:128px;padding:10px 11px}
  .listing-a4 .listing-related-copy{font-size:11px}
  .listing-a4 .listing-trust-strip{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    margin:0;
    overflow:hidden;
    border:1px solid #e8e5df;
    border-radius:12px;
    background:#fff;
    box-shadow:0 1px 2px rgba(24,32,40,.05),0 8px 24px rgba(24,32,40,.07);
    font-family:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  }
  .listing-a4 .listing-trust-strip .cell{padding:9px 5px}
  .listing-a4 .listing-trust-strip .cell + .cell{border-left:1px solid #e8e5df}
  .listing-a4 .k2gar{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    gap:1px;
    padding:0;
    border:0;
    background:none;
    cursor:pointer;
    font-family:inherit;
    text-align:center;
  }
  .listing-a4 .k2gar:hover .glnk{text-decoration:underline}
  .listing-a4 .k2gar .icn{display:block;flex:0 0 auto;width:24px;height:24px;color:#182430}
  .listing-a4 .k2gar b{color:#182430;font-size:10px;font-weight:800;line-height:1.04}
  .listing-a4 .k2gar .glnk{color:#c96400;font-size:9.5px;font-weight:700;line-height:1.45}
  .listing-a4 .lbody{display:contents}
  .listing-a4 .lthumb{
    grid-area:thumb;
    align-self:auto;
    min-height:0;
    aspect-ratio:20/9;
    border-radius:0;
    background:#ddd;
    color:#172234;
  }
  .listing-a4 .lthumb img{
    width:100%;
    height:100%;
    min-height:0;
    aspect-ratio:auto;
    object-fit:fill;
  }
  .listing-a4 .lbody h2{
    grid-area:title;
    min-width:0;
    margin:0;
    padding:9px 14px 3px;
    overflow:hidden;
    font-size:19px;
    line-height:1.2;
    letter-spacing:-.026em;
    white-space:nowrap;
  }
  .listing-a4 .lbody h2 a{display:block;overflow:hidden;white-space:nowrap}
  .listing-a4 .lbody h2,
  .listing-a4 .lbody h2 a{color:#172234}
  .listing-a4 .lusps{
    grid-area:usps;
    display:grid;
    gap:5px;
    margin:2px 14px 0;
    color:#344054;
    font-size:13.5px;
    line-height:1.3;
  }
  .listing-a4 .lusps li{margin:0;padding-left:18px}
  .listing-a4 .lusps li::before{
    content:"✓";
    color:#ff7200;
    font-family:Arial,sans-serif;
    font-size:13.5px;
    font-weight:900;
    line-height:1.3;
  }
  .listing-a4 .lakcija{
    grid-area:deal;
    margin:7px 14px 0;
    color:#ef3b20;
    font-size:13px;
    font-weight:400;
    line-height:1.45;
  }
  .listing-a4 .lakcija strong{font-weight:700}
  .listing-a4 .lthumb .action-badge{
    top:11px;
    left:11px;
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:4px 10px;
    border-radius:999px;
    background:#ef3b20;
    box-shadow:0 4px 12px rgba(76,18,7,.25);
    font-size:10px;
    font-weight:900;
    line-height:1.45;
    letter-spacing:.06em;
  }
  .listing-a4 .ldates{
    grid-area:dates;
    display:flex;
    align-items:baseline;
    gap:4px;
    min-width:0;
    margin:8px 14px;
    padding:2px 0;
    overflow:hidden;
    border-top:1px dashed #c8c2b9;
    border-bottom:1px dashed #c8c2b9;
    color:#596579;
    font-size:14px;
    line-height:1.42;
    white-space:nowrap;
  }
  .listing-a4 .ldates .departures-label{
    flex:0 0 auto;
    color:#172234;
    font-weight:700;
  }
  .listing-a4 .date-items{
    display:flex;
    flex:1;
    min-width:0;
    overflow:hidden;
  }
  .listing-a4 .date-item{flex:0 0 auto}
  .listing-a4 .date-item[hidden]{display:none}
  .listing-a4 .lcta{
    grid-area:offer;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    gap:9px;
    width:auto;
    margin:0 14px;
    padding:0 0 13px;
    border:0;
    color:#172234;
    text-align:left;
  }
  .listing-a4 .lcta .pricegroup{flex:0 0 auto;text-align:left}
  .listing-a4 .lcta .from{line-height:16px}
  .listing-a4 .lcta .from{
    color:#667085;
    font-size:11px;
    font-weight:550;
  }
  .listing-a4 .lcta .price{
    color:#d95f00;
    font-size:28px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.04em;
  }
  .listing-a4 .pricegroup-sale .price{font-weight:900}
  .listing-a4 .lcta .dur{display:none}
  .listing-a4 .sale-prices{
    display:flex;
    align-items:baseline;
    gap:7px;
    color:#667085;
    font-size:11px;
    font-weight:550;
    line-height:1.45;
    white-space:nowrap;
  }
  .listing-a4 .regular-price{
    display:inline;
    color:#c2c5c9;
    font-size:28px;
    font-weight:400;
    line-height:1;
    letter-spacing:-.04em;
    text-decoration-thickness:1.5px;
  }
  .listing-a4 .lcta a.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    width:max-content;
    height:38px;
    min-height:38px;
    margin-top:6px;
    padding:6px 15px;
    border-radius:9px;
    background:#ff7200;
    box-shadow:none;
    font-size:13px;
    font-weight:850;
    line-height:1.45;
  }
  .listing-a4 .lcta .btn-arrow{display:none}
}

@media (max-width:640px){
  body.listing-a4{--listing-a4-gutter:14px}
  body.listing-a4 > .wrap {
    padding-left:var(--listing-a4-gutter,14px);
    padding-right:var(--listing-a4-gutter,14px);
  }
}

/* Prazna stranica popisa (PP-116): naš narančasti gumb na cjelokupnu ponudu; inline stil je isti, ovdje bez podcrte i s hoverom. */
.gt-gumb-ponuda{display:inline-block;padding:10px 18px;border-radius:8px;background:#ff7200;color:#fff;font-weight:700;text-decoration:none}
.gt-gumb-ponuda:hover{background:#d95f00;color:#fff;text-decoration:none}
.gt-gumb-ponuda:focus-visible{outline:3px solid rgba(255,114,0,.48);outline-offset:2px}