/* ==========================================================================
   NOCTURNE — Koncept B "Papier"
   Mobile first. Svaki media query je min-width: mobilni CSS je bazni,
   desktop je nadogradnja. Nula webfontova -> nula CLS-a od fonta.
   ========================================================================== */

:root{
  --paper:#F3EFF1; --surface:#FCFAFB; --sunk:#EBE4E7; --well:#1A1418;
  --ink:#20181C; --ink-2:#4A3D43; --ink-3:#7B6B72; --on-well:#F6EEF1;
  --rule:#DAD0D4; --rule-2:#E7DFE2;
  --accent:#6B2C4A; --accent-2:#8A3D60; --on-accent:#FCFAFB; --accent-soft:#F0E2E9;
  --ok:#2C6A52; --ok-soft:#E2EDE8; --warn:#8E6210; --warn-soft:#F3EADA;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  --hdr-h:52px; --bar-h:48px; --pad:14px; --r:3px;
  --tap:44px;                          /* minimalna dodirna meta */
  --safe:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#151013; --surface:#1D1619; --sunk:#251D21; --well:#0E0A0C;
    --ink:#F0E8EC; --ink-2:#C6B6BE; --ink-3:#95848C; --on-well:#F0E8EC;
    --rule:#372C32; --rule-2:#2A2126;
    --accent:#D48FB0; --accent-2:#E3A6C2; --on-accent:#1A1216; --accent-soft:#33212B;
    --ok:#63BC97; --ok-soft:#1B2C26; --warn:#D8A742; --warn-soft:#2E2618;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.55 var(--sans);
  overflow-x:hidden;
}
img,picture,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0 0 .7em}
ul,ol{margin:0;padding:0;list-style:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 14px;border-radius:var(--r)}
.lbl{font:600 10.5px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px}
main{padding-bottom:32px}
main.has-bar{padding-bottom:calc(76px + var(--safe))}
section{padding:0 var(--pad)}

/* ---------- ZAGLAVLJE — 52px. Konkurenti trose 110-150px. ---------- */
.hdr{
  position:sticky;top:0;z-index:40;height:var(--hdr-h);
  display:flex;align-items:center;gap:4px;padding:0 6px 0 var(--pad);
  background:var(--surface);border-bottom:1px solid var(--rule);
}
.hdr-brand{font:400 19px/1 var(--serif);letter-spacing:.02em;margin-right:auto;padding:8px 2px}
.hdr-loc{
  display:flex;align-items:center;gap:4px;min-height:36px;padding:0 8px;
  background:var(--sunk);border:0;border-radius:var(--r);
  font:12.5px/1 var(--sans);max-width:44vw;cursor:pointer;
}
.hdr-loc{min-width:0}.hdr-loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-loc i{font-style:normal;font-size:9px;color:var(--ink-3)}
.hdr-loc svg{width:12px;height:12px;fill:var(--accent);flex:none}
.hdr-btn{
  display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);background:none;border:0;cursor:pointer;
}
.hdr-btn svg{width:17px;height:17px;fill:var(--ink-2)}
.hdr-nav,.hdr-search,.hdr-cta{display:none}
.hdr-add svg{fill:var(--accent)}
@media(min-width:1024px){
  .hdr-brand{margin-right:26px}
  .hdr-nav{display:flex;gap:20px;font-size:13.5px;color:var(--ink-2)}
  .hdr-nav a:hover{color:var(--accent)}
  .hdr-search{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:10px;
    width:min(320px,26vw);height:38px;padding:0 12px;background:var(--sunk);border-radius:var(--r)}
  .hdr-search svg{width:14px;height:14px;fill:var(--ink-3);flex:none}
  .hdr-search input{flex:1;min-width:0;border:0;background:none;font-size:13.5px;outline:0}
  .hdr-search input::placeholder{color:var(--ink-3)}
  .hdr-cta{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px;margin-left:6px;
    background:var(--accent);color:var(--on-accent);border-radius:var(--r);font:600 13.5px/1 var(--sans);white-space:nowrap}
  .hdr-cta:hover{background:var(--accent-2)}
  .hdr-add,.hdr-srch{display:none}
}
.sheet-nav-cta{color:var(--accent);font-weight:600}

/* naslovnica: kompaktan intro, ne hero */
.home-hd{padding-bottom:4px}
.home-hd h1{font-size:clamp(21px,5.6vw,26px)}

/* ---------- BREADCRUMB — 11px mono, scroll-x, ne lomi se ---------- */
.crumbs{overflow-x:auto;scrollbar-width:none;padding:9px var(--pad) 0}
.crumbs::-webkit-scrollbar{display:none}
.crumbs ol{display:flex;gap:5px;white-space:nowrap;font:11px/1.4 var(--mono);color:var(--ink-3)}
.crumbs li+li::before{content:"› ";color:var(--rule)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent)}

/* ---------- H1 + brojac ---------- */
.phd{padding:8px var(--pad) 10px}
.phd h1{font-size:clamp(22px,6.2vw,27px);line-height:1.15}
.phd-n{margin:5px 0 0;font:12.5px/1.4 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.dot-on{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ok);margin:0 5px 0 8px;vertical-align:1px}

/* ---------- LJEPLJIVA FILTER TRAKA — 48px, ukupno 100px = <15% ekrana ---------- */
.fbar{
  position:sticky;top:var(--hdr-h);z-index:30;
  display:flex;align-items:center;gap:8px;
  height:var(--bar-h);padding:0 var(--pad);
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.fbar-btn{
  flex:none;height:34px;padding:0 12px;cursor:pointer;
  background:var(--surface);border:1px solid var(--ink-2);border-radius:var(--r);
  font:13px/1 var(--sans);display:flex;align-items:center;gap:5px;
}
.fbar-btn.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fbar-btn b{font:600 11px/1 var(--mono)}
.fbar-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;padding:7px 0}
.fbar-scroll::-webkit-scrollbar{display:none}
.fbar-sort{
  flex:none;height:34px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);font-size:12.5px;padding:0 4px;max-width:96px
}

/* ---------- CIPOVI ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;
  min-height:34px;padding:0 11px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--surface);font-size:13px;color:var(--ink-2);
}
.chip.is-on,.chip:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip b{font:600 11px/1 var(--mono);color:var(--ink-3)}
.chip.is-on b,.chip:has(input:checked) b{color:var(--on-accent);opacity:.75}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips-lk{margin:10px 0 0}

/* ---------- MREZA: 2 kolone na mobitelu -> 6 na sirokom desktopu ----------
   Konkurenti (escort-ireland, meslibertines) voze 5-7 kolona: gustoca = dojam inventara. */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px;padding:12px var(--pad) 0}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 14px}}
@media(min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1200px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1500px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
/* police na naslovnici: uvijek PUNI redovi (12 karata; 2/3/4/6 dijele 12, na 5 kolona rezemo na 10) */
.shelf-cap .grid>:nth-child(n+9){display:none}
@media(min-width:600px){.shelf-cap .grid>:nth-child(n+9){display:block}}
@media(min-width:1200px) and (max-width:1499px){.shelf-cap .grid>:nth-child(n+11){display:none}}

/* ---------- KARTICA: pet elemenata, nikad vise ---------- */
.card-lk{display:block}
.card-well{
  position:relative;background:var(--well);border-radius:var(--r);overflow:hidden;
  aspect-ratio:4/5;
}
.card-well img,.card-well .ph{width:100%;height:100%;object-fit:cover}
@media(hover:hover){
  .card-well img{transition:transform .25s ease}
  .card-lk:hover .card-well img{transform:scale(1.04)}
  .card-lk:hover .card-name{text-decoration:underline;text-underline-offset:3px}
}
.ph{background:linear-gradient(160deg,#2A2126,#161114)}
.card-name{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:22px 9px 8px;color:var(--on-well);
  font:400 15px/1.2 var(--serif);
  background:linear-gradient(to top,rgba(10,7,9,.82),rgba(10,7,9,0));
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:28px;
}
.card-name span{font:12px/1 var(--mono);opacity:.85}
.card-n{
  position:absolute;right:6px;bottom:6px;
  font:600 10px/1 var(--mono);color:var(--on-well);
  background:rgba(10,7,9,.55);padding:3px 5px;border-radius:2px;
}
.card-loc{margin:6px 0 0;font:12px/1.3 var(--sans);color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-ch{display:flex;align-items:center;gap:7px;margin:5px 0 0;min-height:18px}
.ch{width:14px;height:14px;fill:var(--ink-3);flex:none}
.ch-wa{fill:var(--ok)}
.ch-t{font:10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* kartica v2: tekst ispod fotke */
.card-n{display:inline-flex;align-items:center;gap:3px}
.card-ni{width:11px;height:11px;fill:currentColor}
.card-t{margin:8px 0 0;font:400 15.5px/1.25 var(--serif);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-t span{font:12px/1 var(--mono);color:var(--ink-3)}
.card-on{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:2px}
.card-loc{display:flex;align-items:baseline;gap:8px;margin:3px 0 0;font:12px/1.3 var(--sans);color:var(--ink-3)}
.card-pl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card-pr{margin-left:auto;flex:none;font:600 12px/1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.card-ch{margin-top:6px}
.ch-wa{fill:#25D366}

/* ---------- BADGE: JEDAN po kartici ---------- */
.bdg{
  position:absolute;top:6px;left:6px;z-index:2;
  font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 6px;border-radius:2px;
}
.bdg-v{background:var(--ok);color:#fff}
.bdg-n{background:var(--accent);color:var(--on-accent)}
.bdg-o{background:var(--surface);color:var(--ok)}
.bdg-f{background:var(--warn);color:#1A1207}
.bdg-lg{position:static;display:inline-flex;align-items:center;gap:4px;
  vertical-align:3px;margin-left:8px;padding:5px 8px}
.bdg-i{width:11px;height:11px;fill:currentColor}

/* ---------- ISTAKNUTA KARTICA ---------- */
.cardf{padding:12px var(--pad) 0}
.cardf-well{position:relative;background:var(--well);border-radius:var(--r);overflow:hidden;aspect-ratio:16/10}
.cardf-well img{width:100%;height:100%;object-fit:cover}
.cardf-meta{position:absolute;left:0;right:0;bottom:0;padding:34px 13px 11px;color:var(--on-well);
  background:linear-gradient(to top,rgba(10,7,9,.85),rgba(10,7,9,0))}
.cardf-meta h3{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cardf-meta h3 span{font:13px/1 var(--mono);opacity:.85}
.cardf-meta p{margin:2px 0 0;font:12px/1 var(--mono);opacity:.8}

/* ---------- PAGINACIJA: pravi <a href> ---------- */
.pag{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:22px var(--pad) 8px}
.pag-a{
  min-width:var(--tap);height:var(--tap);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);
  font:13px/1 var(--mono);color:var(--ink-2);
}
.pag-a.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pag-e{display:flex;align-items:center;color:var(--ink-3);padding:0 2px}

/* ---------- POLICE / LISTE ---------- */
.shelf{padding:18px var(--pad) 0}
.shelf-first{padding-top:10px}
.shelf-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:2px}
.shelf-hd h2{font-size:18px;margin-right:auto}.shelf-hd h2::first-letter{text-transform:uppercase}
.shelf-n,.shelf-more{font:11.5px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.shelf-more{color:var(--accent)}
.shelf .grid{padding-left:0;padding-right:0}

.rail{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;padding:10px 0 2px;
  margin:0 calc(var(--pad)*-1);padding-left:var(--pad);padding-right:var(--pad)}
.rail::-webkit-scrollbar{display:none}
.rail-i{flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap;
  min-height:38px;padding:0 12px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);font-size:13.5px}
.rail-i b{font:600 11px/1 var(--mono);color:var(--accent)}
.rail-i i{font:10px/1 var(--mono);font-style:normal;color:var(--ink-3)}

.citygrid,.reglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;margin-top:8px}
.reglist{grid-template-columns:1fr}
@media(min-width:600px){.citygrid{grid-template-columns:repeat(3,minmax(0,1fr))}.reglist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.citygrid{grid-template-columns:repeat(4,minmax(0,1fr))}.reglist{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1200px){.citygrid{grid-template-columns:repeat(5,minmax(0,1fr))}.reglist{grid-template-columns:repeat(4,minmax(0,1fr))}}
.citygrid a,.reglist a{display:flex;align-items:center;gap:8px;min-height:var(--tap);
  border-bottom:1px solid var(--rule-2);font-size:14.5px}
.citygrid span,.reglist span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.citygrid b,.reglist b{margin-left:auto;font:600 11.5px/1 var(--mono);color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.citygrid .is-off a,.reglist .is-off a{color:var(--ink-3)}

.near{margin-top:8px}
.near a{display:flex;align-items:center;gap:9px;min-height:var(--tap);
  border-bottom:1px solid var(--rule-2);font-size:14.5px}
.near b{margin-left:auto;font:600 11.5px/1 var(--mono);color:var(--accent);font-variant-numeric:tabular-nums}
.near i{font:10.5px/1 var(--mono);font-style:normal;color:var(--ink-3);min-width:46px;text-align:right}

.alpha{display:flex;flex-wrap:wrap;gap:5px;padding:6px var(--pad) 0}
.alpha a{width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  font:12px/1 var(--mono)}

/* ---------- SEO BLOKOVI — TEK ISPOD OGLASA ---------- */
.seo{padding:26px var(--pad) 0;max-width:70ch}
.seo h2{font-size:19px;margin-bottom:8px;padding-top:16px;border-top:1px solid var(--rule)}
.seo p{color:var(--ink-2);font-size:15px}
.faq{margin-top:4px}
.faq details{border-bottom:1px solid var(--rule-2)}
.faq summary{cursor:pointer;padding:13px 0;font-size:14.5px;list-style:none;
  display:flex;justify-content:space-between;gap:10px;min-height:var(--tap);align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 18px/1 var(--mono);color:var(--accent);flex:none}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 14px;font-size:14.5px;color:var(--ink-2)}

/* SEO zona: na desktopu 2 kolone u ravnini umjesto uske trake uz prazninu */
@media(min-width:1024px){
  .seo-zone{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;
    align-items:start;padding:0 var(--pad)}
  .seo-zone .seo{max-width:none;padding-left:0;padding-right:0}
}

/* ---------- GUMBI ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--tap);padding:0 16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--ink-2);border-radius:var(--r);
  font:14px/1 var(--sans);color:var(--ink);text-align:center;
}
.btn-p{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn-wa{background:#1FA855;border-color:#1FA855;color:#fff;font-weight:600}
.btn-wa:hover{background:#178A45}
.btn-s{background:var(--surface);border-color:var(--ink-2)}
.btn-w{width:100%;margin-top:14px}
.btn-i{width:15px;height:15px;fill:currentColor;flex:none}
.lnk{background:none;border:0;padding:8px 0;color:var(--accent);font-size:14px;cursor:pointer;text-decoration:underline}

/* ---------- BOTTOM SHEET ----------
   <dialog> je dijete <body>: IZVAN svakog kompozitnog konteksta.
   backdrop-filter/transform na pretku lomi position:fixed. */
.sheet{
  border:0;padding:0;background:var(--surface);color:var(--ink);
  width:100%;max-width:560px;max-height:88dvh;
  margin:auto auto 0;border-radius:12px 12px 0 0;overflow:hidden;
}
/* display na dialogu SAMO kad je otvoren — inace author-style
   pregazi UA pravilo dialog:not([open]){display:none} i panel curi u stranicu */
.sheet[open]{display:flex;flex-direction:column}
.sheet[open]{animation:up .18s ease-out}
@keyframes up{from{transform:translateY(14px);opacity:.7}}
.sheet::backdrop{background:rgba(12,8,10,.5)}
.sheet form{display:flex;flex-direction:column;min-height:0;flex:1}
.sheet-hd{position:relative;flex:none;display:flex;align-items:center;gap:10px;
  padding:16px var(--pad) 10px;border-bottom:1px solid var(--rule)}
.sheet-hd h2{font-size:17px;margin-right:auto}
.sheet-grip{position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34px;height:4px;border-radius:2px;background:var(--rule)}
.sheet-rst{font:11.5px/1 var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.08em}
.sheet-x{width:34px;height:34px;background:none;border:0;font-size:15px;color:var(--ink-3);cursor:pointer}
.sheet-bd{flex:1;overflow-y:auto;padding:14px var(--pad) 18px;-webkit-overflow-scrolling:touch}
.sheet-bd fieldset{border:0;padding:0;margin:0 0 20px}
.sheet-bd legend{padding:0}
.sheet-ft{flex:none;padding:10px var(--pad) calc(10px + var(--safe));border-top:1px solid var(--rule);background:var(--surface)}
.sheet-nav{padding:8px var(--pad) 24px}
.sheet-nav a{display:flex;align-items:center;min-height:52px;
  border-bottom:1px solid var(--rule-2);font-size:16px}
.locsearch{display:flex;gap:7px;margin-bottom:16px}
.locsearch input{flex:1;min-height:var(--tap);padding:0 12px;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r);font-size:16px}
.locsearch-pg{padding:0 var(--pad)}
.loclist a{display:flex;align-items:center;min-height:var(--tap);
  border-bottom:1px solid var(--rule-2);font-size:14.5px}
.loclist b{margin-left:auto;font:600 11.5px/1 var(--mono);color:var(--ink-3)}

/* ---------- GALERIJA: nativni scroll-snap, nula JS-a za swipe ---------- */
.gal-wrap{position:relative;background:var(--well)}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.gal::-webkit-scrollbar{display:none}
.gal-i{flex:0 0 100%;scroll-snap-align:center}
.gal-i img,.gal-i .ph{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.gal-n{position:absolute;top:10px;right:10px;font:600 11px/1 var(--mono);
  color:var(--on-well);background:rgba(10,7,9,.55);padding:5px 7px;border-radius:2px}
.gal-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px}
.gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(246,238,241,.4)}
.gal-dots i.is-on{background:var(--on-well)}
.gal-btn{display:none}
.gal-all{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;border:0;border-radius:var(--r);cursor:pointer;
  background:rgba(10,7,9,.6);color:#F6EEF1;font:600 12px/1 var(--sans)}
.gal-all:hover{background:rgba(10,7,9,.85)}
.gal-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
/* ---------- LIGHTBOX: jedna fotka po ekranu, nativni swipe, strelice, tipkovnica ---------- */
.lb{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;
  background:#0E0A0C;color:#F6EEF1}
.lb[open]{display:flex;flex-direction:column}
.lb::backdrop{background:#0E0A0C}
.lb-hd{flex:none;display:flex;align-items:center;gap:12px;height:52px;padding:0 6px 0 14px}
.lb-n{font:600 12px/1 var(--mono);padding:5px 8px;background:rgba(255,255,255,.12);border-radius:2px}
.lb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 15px/1 var(--serif);opacity:.85}
.lb-x{width:44px;height:44px;border:0;background:none;color:#F6EEF1;font-size:20px;cursor:pointer}
.lb-strip{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;outline:0}
.lb-strip::-webkit-scrollbar{display:none}
.lb-i{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;align-items:center;justify-content:center;padding:0 0 12px;box-sizing:border-box}
/* <picture> nema box (display:contents) -> img je flex-item .lb-i pa se max-height:100% racuna
   prema definitivnoj visini trake. Bez toga (align-items:center) je picture bio "auto" visine,
   max-height:100% = none i fotka od 1600px se razvukla preko ekrana. Dodatni dvh cap = pojas i tregeri. */
.lb-i>picture{display:contents}
.lb-i img,.lb-i .ph{display:block;width:auto;height:auto;max-width:100%;max-height:100%;max-height:calc(100dvh - 68px);aspect-ratio:auto;object-fit:contain;background:none}
.lb-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;display:none;align-items:center;justify-content:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.14);color:#F6EEF1;font-size:28px;line-height:1;padding-bottom:4px}
.lb-btn:hover{background:rgba(255,255,255,.28)}
.lb-prev{left:14px}.lb-next{right:14px}
@media(min-width:1024px){.lb-btn{display:flex}.lb-i{padding:0 70px 16px}}
@media(min-width:1024px){
  .gal-i{flex:0 0 50%}
  .gal-1 .gal-i{margin:0 auto}   /* jedna fotka: centrirana, bez crne rupe desno */
  .gal-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
    background:rgba(10,7,9,.55);color:#F6EEF1;font-size:24px;line-height:1;padding-bottom:3px}
  .gal-btn:hover{background:rgba(10,7,9,.82)}
  .gal-prev{left:12px}.gal-next{right:12px}
}

/* ---------- PROFIL ----------
   Mobilno: .prof je flex-kolona, .prof-main/.prof-aside su display:contents
   pa redoslijed diktira `order` (galerija -> ime -> status -> opis -> ...).
   Desktop >=1024: grid 2 stupca — lijevo sadrzaj, desno STICKY aside s
   kontaktom (nijedan konkurent nema trajno vidljiv kontakt na desktopu). */
.prof{display:flex;flex-direction:column}
.prof-main,.prof-aside{display:contents}
.prof-gal{order:1}
.prof-hd{order:2}
.prof-st{order:3}
.prof-o4{order:4}.prof-o5{order:5}.prof-o6{order:6}.prof-o7{order:7}
.prof-o8{order:8}.prof-o9{order:9}.prof-o10{order:10}
.prof-contact{display:none}                 /* mobil ima donju kontakt traku */
.prof-hd{padding:16px var(--pad) 0}
.prof-hd h1{font-size:25px;line-height:1.15}
.prof-hd h1 span{font:15px/1 var(--mono);color:var(--ink-3)}
.prof-loc{margin:7px 0 0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font:12.5px/1.4 var(--mono);color:var(--ink-3)}
.prof-loc a{color:var(--accent)}
.prof-tag{margin:9px 0 0;font:italic 15px/1.45 var(--serif);color:var(--ink-2)}
.prof-st{display:flex;flex-wrap:wrap;gap:6px;padding:14px var(--pad) 0}
.prof-st li{font:11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  padding:6px 9px;background:var(--sunk);border-radius:2px;color:var(--ink-2)}
.prof-st li.on{background:var(--ok-soft);color:var(--ok)}
.prof-s{padding:24px var(--pad) 0;max-width:70ch}
.prof-s h2{font-size:18px;margin-bottom:9px;padding-top:16px;border-top:1px solid var(--rule)}
.prof-s .grid{padding-left:0;padding-right:0}
.prof-desc{color:var(--ink-2);font-size:15px}
.prof-desc.is-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prof-dls{display:grid;gap:16px 32px}
.prof-dlg .lbl{margin:0 0 2px}
@media(min-width:700px){.prof-dls{grid-template-columns:1fr 1fr}}
@media(min-width:1280px){.prof-dls{grid-template-columns:repeat(3,1fr)}}
.prof-dl{display:grid;grid-template-columns:auto 1fr;gap:0 16px;font-size:14.5px;align-content:start}
.prof-dl dt{color:var(--ink-3);padding:8px 0;border-bottom:1px solid var(--rule-2)}
.prof-dl dd{margin:0;padding:8px 0;text-align:right;border-bottom:1px solid var(--rule-2);
  font-variant-numeric:tabular-nums}
.prof-pr li{display:flex;align-items:center;min-height:42px;border-bottom:1px solid var(--rule-2);font-size:14.5px}
.prof-pr b{margin-left:auto;font:600 15px/1 var(--mono);font-variant-numeric:tabular-nums}
.prof-facts{order:3;margin:0;padding:12px var(--pad) 0;font:500 13.5px/1.6 var(--sans);color:var(--ink)}
.prof-facts i{font-style:normal;color:var(--rule);margin:0 7px}
.prof-warn{margin:26px var(--pad) 0;max-width:70ch;padding:12px 14px;border-radius:var(--r);
  background:var(--warn-soft);color:var(--warn);font-size:13.5px;line-height:1.5}
.prof-warn a{color:inherit;text-decoration:underline}
.prof-contact-n{margin:6px 0 0;font-size:12px;color:var(--ink-3)}

@media(min-width:1024px){
  .prof{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:0 44px;
    align-items:start;padding:0 var(--pad)}
  .prof-main{display:block;min-width:0}
  .prof-aside{display:block;position:sticky;top:84px;
    background:var(--surface);border:1px solid var(--rule);border-radius:6px;
    padding:22px 22px 24px;
    max-height:calc(100dvh - 104px);overflow-y:auto;scrollbar-width:thin}
  .prof-main section,.prof-aside section,.prof-aside .prof-hd,.prof-aside .prof-st,
  .prof-aside .prof-contact,.prof-aside .prof-warn{padding-left:0;padding-right:0}
  .prof-gal .gal-wrap{border-radius:6px;overflow:hidden}
  .prof-hd{padding-top:0}
  .prof-hd h1{font-size:28px}
  .prof-st{padding-top:12px}
  .prof-contact{display:grid;gap:9px;margin-top:18px}
  .prof-contact .btn{min-height:46px;font-size:14.5px}
  .prof-warn{margin:22px 0 0;max-width:none}
  .prof-main .prof-s{max-width:74ch}
  .prof-main .prof-wide{max-width:none}
  .prof-main .prof-s:first-of-type h2{border-top:0;padding-top:4px}
  .prof-aside .prof-s{padding-top:18px;max-width:none}
  .prof-aside .prof-s h2{font-size:15px;padding-top:14px}
}

/* ---------- LJEPLJIVA KONTAKT TRAKA ----------
   Nijedan konkurent ovo nema. Renderira se server-side u prvom HTML-u
   -> nula CLS-a. <main.has-bar> ima padding-bottom -> nikad ne pokriva sadrzaj. */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:grid;gap:8px;
  padding:9px var(--pad) calc(9px + var(--safe));
  background:var(--surface);border-top:1px solid var(--rule);
}
.cbar[data-n="0"],.cbar[data-n="1"]{grid-template-columns:1fr}
.cbar[data-n="2"]{grid-template-columns:1.4fr 1fr}
.cbar[data-n="3"]{grid-template-columns:1fr 1fr 1fr}
.cbar .btn{padding:0 8px;font-size:13.5px}
@media(min-width:1024px){.cbar{display:none}main.has-bar{padding-bottom:32px}}

/* ---------- NAPREDNA PRETRAGA ---------- */
.srch{margin:4px var(--pad) 8px;padding:14px 14px 12px;background:var(--surface);border:1px solid var(--rule);border-radius:6px}
.srch-row{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.srch-city{grid-column:1/-1}
.srch-f{display:block;font:11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.srch-f input,.srch-f select{display:block;width:100%;margin-top:4px;min-height:40px;padding:0 10px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);font:15px/1 var(--sans);color:var(--ink);text-transform:none;letter-spacing:0}
.srch-chks{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;align-items:center}
.srch-chks .chip{position:relative}
.srch-go{margin-left:auto;padding:0 18px;min-height:36px}
@media(min-width:900px){
  .srch-row{grid-template-columns:2.2fr 1fr 1fr 1.3fr 1.2fr}
  .srch-city{grid-column:auto}
}

/* ---------- FORME (publier / contact) ---------- */
.frm-wrap{padding:0 var(--pad)}
.frm{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:18px 16px 22px}
.frm fieldset{border:0;padding:0;margin:0 0 22px}
.frm legend{font:400 18px/1.3 var(--serif);margin-bottom:10px;padding-top:14px;border-top:1px solid var(--rule);width:100%}
.frm fieldset:first-of-type legend{border-top:0;padding-top:0}
.frm label{display:block;margin:0 0 12px;font-size:13.5px;color:var(--ink-2)}
.frm input:not([type=checkbox]):not([type=file]),.frm select,.frm textarea{
  display:block;width:100%;margin-top:5px;min-height:var(--tap);padding:8px 12px;
  background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);font-size:16px;color:var(--ink)}
.frm textarea{resize:vertical;line-height:1.5}
.frm input:focus,.frm select:focus,.frm textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.frm-file{margin-top:6px;font-size:14px}
.frm-grid2,.frm-grid3{display:grid;gap:0 14px}
@media(min-width:600px){.frm-grid2{grid-template-columns:1fr 1fr}.frm-grid3{grid-template-columns:1fr 1fr 1fr}}
.frm-chks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:2px 0 12px}
.frm-chk{display:flex;align-items:flex-start;gap:8px;min-height:32px;font-size:14px;color:var(--ink)}
.frm-chk input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.frm-chk a{color:var(--accent);text-decoration:underline}
.frm-help{display:block;margin-top:4px;font-size:12px;color:var(--ink-3);font-weight:400}
.frm legend .frm-help{display:inline;font-family:var(--sans);margin-left:6px}
.frm-err{margin:5px 0 0;font-size:13px;color:#B3261E;font-weight:600}
.frm-err-top{margin:0 0 14px;padding:10px 12px;background:#FBE9E7;border-radius:var(--r)}
.frm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm-submit{margin-top:6px;min-height:50px;font-size:15.5px}
.frm-ok{text-align:center;padding:36px 20px}
.frm-ok h2{font-size:24px;margin-bottom:8px}
.frm-side{padding:24px 4px 0;max-width:70ch}
.frm-side h2{font-size:17px;margin:14px 0 6px}
.frm-side p{font-size:14px;color:var(--ink-2)}
@media(min-width:1024px){
  .frm-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 44px;align-items:start}
  .frm{padding:24px 28px 28px}
  .frm-side{position:sticky;top:84px;padding-top:0}
}
.home-cta-box{margin-top:6px;padding:24px 20px;background:var(--surface);border:1px solid var(--rule);border-radius:6px;text-align:center}
.home-cta-box h2{font-size:21px;margin-bottom:6px}
.home-cta-box p{max-width:52ch;margin:0 auto 14px;font-size:14.5px;color:var(--ink-2)}
.home-cta-box .btn{display:inline-flex;padding:0 26px}

/* ---------- PRAZNO STANJE ---------- */
.empty{padding:26px var(--pad);text-align:center;color:var(--ink-2)}
.empty .btn{margin:12px auto 0;max-width:280px}
.empty .near{text-align:left;margin-top:16px}
.empty-pg{padding:60px var(--pad)}
.empty-pg h1{font-size:26px;margin-bottom:10px}

/* ---------- PODNOZJE ---------- */
.ftr{margin-top:40px;border-top:1px solid var(--rule);background:var(--surface)}
.ftr-wrap{display:grid;gap:26px;padding:26px var(--pad)}
@media(min-width:600px){.ftr-wrap{grid-template-columns:1fr 1fr;gap:34px}}
.ftr-list{columns:2;column-gap:16px}
@media(min-width:600px){.ftr-list{columns:2}}
.ftr-list a{display:flex;gap:6px;padding:7px 0;font-size:13.5px;break-inside:avoid}
.ftr-list b{margin-left:auto;font:600 10.5px/1.5 var(--mono);color:var(--ink-3)}
.ftr-more{display:inline-block;margin-top:10px;font:11.5px/1 var(--mono);
  letter-spacing:.06em;color:var(--accent);text-transform:uppercase}
.ftr-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px}
.ftr-nav a{font-size:12.5px;color:var(--ink-2);text-decoration:underline}
.ftr-legal{padding:18px var(--pad) 28px;border-top:1px solid var(--rule-2);
  font-size:12px;color:var(--ink-3);max-width:70ch}
.ftr-copy{font-family:var(--mono);font-size:11px}

/* ---------- DESKTOP: siri raspored, isti identitet ---------- */
@media(min-width:1024px){
  :root{--pad:28px}
  .hdr{height:64px;padding-left:32px;padding-right:26px;gap:10px}
  .hdr-brand{font-size:23px}
  .hdr-loc{max-width:none;min-height:38px}
  .fbar{top:64px}
  main,.ftr-wrap{max-width:1360px;margin-left:auto;margin-right:auto}
  .phd h1{font-size:32px}
  .home-hd h1{font-size:28px}
  .seo{max-width:74ch}
  .shelf .btn-w{max-width:420px;margin-left:auto;margin-right:auto}
}

/* ---------- AGE GATE ----------
   Uvijek u HTML-u (cache-safe); inline skript u <head> doda .age-ok na <html>
   PRIJE painta pa se potvrdjenim posjetiteljima nikad ne prikaze. fixed = nula CLS-a. */
.gate{position:fixed;inset:0;z-index:90;background:rgba(18,12,15,.78);
  display:flex;align-items:center;justify-content:center;padding:20px}
.age-ok .gate{display:none}
.gate-card{background:var(--surface);border-radius:6px;max-width:400px;width:100%;
  padding:26px 22px calc(18px + var(--safe));text-align:center}
.gate-brand{font:400 21px/1 var(--serif);margin:0 0 14px}
.gate-card h2{font-size:21px;margin-bottom:10px}
.gate-txt{font-size:14px;color:var(--ink-2);text-align:left}
.gate-yes{width:100%;margin:14px 0 8px}
.gate-no{width:100%}
.gate-legal{margin:14px 0 0;font-size:11px;color:var(--ink-3)}

/* ---------- PRAVNE STRANICE ---------- */
.legal-pg{max-width:70ch;padding:4px var(--pad) 30px}
.legal-pg h1{font-size:25px;margin:10px 0 4px}
.legal-pg h2{font-size:17px;margin:22px 0 6px}
.legal-pg p{font-size:14.5px;color:var(--ink-2)}
.legal-pg a{color:var(--accent);text-decoration:underline}
.legal-ul,.legal-ol{font-size:14.5px;color:var(--ink-2);padding-left:20px;margin-bottom:12px}
.legal-ul li{list-style:disc;margin-bottom:5px}
.legal-ol li{list-style:decimal;margin-bottom:5px}
.legal-note{background:var(--warn-soft);color:var(--warn);padding:10px 12px;border-radius:var(--r);font-size:13.5px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .gal{scroll-behavior:auto}
}