/* libellus-krug4.css — slajder na naslovnici
   Libellus / Crew803, 05.10.2026.
   Piše se PREKO zatečenog bxSlidera. bxSlider se ne re-inicijalizira,
   DOM slajdova se ne mijenja, modul se ne dira.
   Dva gumba i brojač dolaze iz libellus-slider.js. */

/* ---------------------------------------------------- 1. okvir */
section.slider_content{ margin: 0 0 56px; position: relative; }
section.slider_content .bx-wrapper{
  border: 0 !important; box-shadow: none !important; margin: 0 !important;
  background: var(--tinta, #141210) !important;
}

/* ---------------------------------------------------- 2. slajd i veo
   Slika se NE dira: omjer 1920×640 ostaje kakav je, nema rezanja ni
   razvlačenja. Dolazi samo gradijent preko nje da tekst ima na čemu stajati. */
section.slider_content ul.bxslider > li{ position: relative; }
section.slider_content ul.bxslider > li > a{ display: block; }
section.slider_content ul.bxslider > li > a::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(20,18,16,.94) 0%, rgba(20,18,16,.78) 34%,
    rgba(20,18,16,.12) 62%, rgba(20,18,16,.38) 100%);
}

/* ---------------------------------------------------- 3. tekst slajda
   Zatečeno: aside je bijela kutija s crnim h1 32px.
   Postaje natpis na veo, kao u protutipu. */
section.slider_content ul.bxslider > li aside{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 520px;
  padding: 0 !important;
  z-index: 2;
  /* Zatečeno je aside prikovan za dno slajda (bottom:30px), pa bi s dodanim
     gumbima ušao u red kontrola. Izmjereno: 92px ostavlja 24px zraka. */
  bottom: 92px !important;
}
section.slider_content ul.bxslider > li aside,
section.slider_content ul.bxslider > li aside *{ color: #fff !important; }

section.slider_content ul.bxslider > li aside h1{
  font-size: clamp(28px, 3.4vw, 52px) !important;
  line-height: 1.04 !important;
  margin: 0 0 8px !important;
  letter-spacing: -.01em;
}
section.slider_content ul.bxslider > li aside h1 a{
  color: #fff !important; text-decoration: none !important;
  transition: color .2s linear;
}
section.slider_content ul.bxslider > li aside h1 a:hover{ color: var(--zuta, #F5C518) !important; }

/* span = autori → žuti, mali, razmaknut */
section.slider_content ul.bxslider > li aside span{
  display: block;
  color: var(--zuta, #F5C518) !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0 0 12px !important;
}

/* em = opis → tijelo teksta */
section.slider_content ul.bxslider > li aside em{
  display: block;
  font-style: normal !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: rgba(255,255,255,.84) !important;
  margin: 0 0 22px !important;
  max-width: 440px;
}

/* ---------------------------------------------------- 4. dva gumba */
section.slider_content .lb-sl-akcije{
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
}
section.slider_content .lb-sl-btn,
section.slider_content .lb-sl-btn-o{
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none !important;
  white-space: nowrap; cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s linear, color .2s linear, box-shadow .2s linear;
}
section.slider_content .lb-sl-btn{
  background: var(--zuta, #F5C518); border: 0;
  box-shadow: 0 6px 22px rgba(245,197,24,.30);
}
/* Boja mora nadjačati `... li aside *{ color:#fff !important }` iz odjeljka 3.
   Ta je (0,2,4); ovo je (0,3,5). Izmjereno: s manjom specifičnošću
   natpis na žutom gumbu ostaje BIJEL. */
section.slider_content ul.bxslider > li aside a.lb-sl-btn{
  color: var(--tinta, #141210) !important;
}
section.slider_content .lb-sl-btn:hover{
  transform: translateY(-2px); box-shadow: 0 12px 34px rgba(245,197,24,.44);
}
section.slider_content .lb-sl-btn-o{
  background: none; border: 1.5px solid rgba(255,255,255,.45);
  color: #fff !important;
}
section.slider_content .lb-sl-btn-o:hover{ background: #fff; transform: translateY(-2px); }
section.slider_content ul.bxslider > li aside a.lb-sl-btn-o:hover{
  color: var(--tinta, #141210) !important;
}

/* ---------------------------------------------------- 5. strelice
   Zatečeno: 48×48 sa sprite-om i text-indent:-9999px.
   Gasimo sprite, crtamo obrub i kvačicu iz bordera. */
section.slider_content .bx-controls-direction a{
  width: 42px !important; height: 42px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.42) !important;
  background: none !important;
  text-indent: 0 !important; font-size: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  margin: 0 !important;
  transition: background .2s linear, border-color .2s linear, transform .2s linear;
}
section.slider_content .bx-controls-direction a:hover{
  background: var(--zuta, #F5C518) !important;
  border-color: var(--zuta, #F5C518) !important;
  transform: scale(1.06);
}
section.slider_content .bx-controls-direction a::after{
  content: ''; width: 9px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transition: border-color .2s linear;
}
section.slider_content .bx-controls-direction a:hover::after{ border-color: var(--tinta, #141210); }
section.slider_content .bx-controls-direction a.bx-prev::after{ transform: rotate(135deg); margin-left: -3px; }
section.slider_content .bx-controls-direction a.bx-next::after{ transform: rotate(-45deg); margin-right: -3px; }

/* ---------------------------------------------------- 6. točke
   Zatečeno: .bx-pager ima rgba(179,0,0,.1) podlogu — ostatak iz starog. */
section.slider_content .bx-pager{
  background: none !important;
  display: flex !important; align-items: center; gap: 8px;
  width: auto !important; padding: 0 !important;
}
section.slider_content .bx-pager-item{ display: inline-flex; }
section.slider_content .bx-pager a.bx-pager-link{
  width: 9px !important; height: 9px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  text-indent: -9999px; overflow: hidden;
  transition: width .3s ease-out, background .3s linear, border-radius .3s linear;
}
section.slider_content .bx-pager a.bx-pager-link:hover{ background: rgba(255,255,255,.62) !important; }
section.slider_content .bx-pager a.bx-pager-link.active{
  width: 26px !important; border-radius: 999px !important;
  background: var(--zuta, #F5C518) !important;
}

/* ---------------------------------------------------- 7. red kontrola i brojač */
section.slider_content .lb-sl-kontrole{
  position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  padding: 0 5.5%;              /* izmjereno: aside stoji na 5.5% na svim širinama */
  pointer-events: none;
}
/* Zatečeni bxSlider i .bx-pager i .bx-controls-direction stavlja na
   position:absolute s vlastitim top/left, pa bježe iz reda. Izmjereno:
   bez ovoga strelice stoje na y 663, točke na 702, brojač na 726. */
section.slider_content .lb-sl-kontrole .bx-pager,
section.slider_content .lb-sl-kontrole .bx-controls-direction,
section.slider_content .lb-sl-kontrole .bx-controls-direction a{
  position: static !important;
  top: auto !important; bottom: auto !important; left: auto !important; right: auto !important;
  margin: 0 !important;
}
section.slider_content .lb-sl-kontrole .bx-controls-direction{
  order: -1;                     /* u DOM-u pager dolazi prvi, strelice idu lijevo */
  display: flex !important; align-items: center; gap: 10px;
  width: auto !important;
  height: auto !important;       /* zatečeno 55px je razbijalo poravnanje reda */
}
/* Zatečeno na strelicama stoji translateY(-50%) iz starog apsolutnog
   pozicioniranja. U redu kontrola to ih podigne 21 px iznad točaka. */
section.slider_content .lb-sl-kontrole .bx-controls-direction a{ transform: none !important; }
section.slider_content .lb-sl-kontrole .bx-controls-direction a:hover{ transform: scale(1.06) !important; }
section.slider_content .lb-sl-kontrole > *{ pointer-events: auto; }
section.slider_content .lb-sl-brojac{
  margin-left: auto;
  color: rgba(255,255,255,.65);
  font-size: 12px; letter-spacing: .08em;
}
section.slider_content .lb-sl-brojac b{ color: var(--zuta, #F5C518); }

/* ---------------------------------------------------- 8. uske širine */
@media only screen and (max-width: 820px){
  section.slider_content ul.bxslider > li aside{ max-width: none; bottom: auto !important; }
  section.slider_content ul.bxslider > li aside h1{ font-size: 24px !important; }
  section.slider_content ul.bxslider > li aside em{ font-size: 14px !important; margin-bottom: 16px !important; }
  section.slider_content .lb-sl-akcije{ gap: 8px; }
  section.slider_content .lb-sl-btn,
  section.slider_content .lb-sl-btn-o{ height: 42px; padding: 0 18px; font-size: 12px; }
  section.slider_content .lb-sl-kontrole{ position: relative; bottom: auto; padding: 14px 5.5% 0; }
}

/* ====================================================================
   9. ISPRAVAK REGRESIJE IZ KRUGA 2 — glavni izbornik se lomio u dva reda

   Nema veze sa slajderom; ide u istu datoteku da bude jedan push i jedan
   rollback. Mjereno na produkciji i na testu, 1905 px:

     produkcija   logo 353–626   nav 666–1148  visina 22   → JEDAN red
     test         logo 353–527   nav 555–922   visina 44   → DVA reda

   Uzrok je izmjeren, ne pretpostavljen. Glavni red je kontejner od 1200 px:

     logo 174 + nav 367 + tražilica 260 + prijava/košarica 315
     + 3 × gap 28  =  1200   → red je pun do zadnjeg piksela

   Stavkama izbornika treba 392 px, a dobile su 367. `ul` je display:block,
   pa se višak prelomio u drugi red. Tražilica je u glavni red došla u
   nalogu 12 i upravo je ona pojela tih 25 px.

   Ispravak: tražilica se smije skupiti (s podom od 150 px), `ul` ne smije
   lomiti redak, a ispod 1260 px stavke dobivaju uži razmak.
   Izmjereno nakon ispravka — jedan red na 1920, 1280, 1100, 1024 i 986,
   header ostaje 132, vodoravnog prelijeva nema. */

header > section.header_top_cnt section.search_content{
  width: 210px !important; min-width: 150px !important;
}
header > section.header_top_cnt > aside.search_content{
  flex: 0 1 auto !important; min-width: 150px !important;
}
header > section.header_top_cnt nav{ flex: 1 1 auto !important; min-width: 0 !important; }
header > section.header_top_cnt nav ul{
  display: flex !important; flex-wrap: nowrap !important; align-items: center;
}
@media only screen and (max-width: 1260px){
  header > section.header_top_cnt nav ul li a{
    padding-left: 10px !important; padding-right: 10px !important; font-size: 13px !important;
  }
}

/* ====================================================================
   10. PRAZNA KOŠARICA U ZAGLAVLJU NA STRANICI KOŠARICE

   Na `/hrvatski/kosarica_13` modul ne ispisuje mini-košaricu — `{%cart%}`
   ostavi `section.basket_content` prazan (bez `#go_cart`). Naš krug 2 je
   svejedno oboji u tamnu pilulu, pa u zaglavlju stoji crna mrlja 32×42
   bez ikone i bez brojača.

   Izmjereno: `:empty` NE pogađa (element ima jedan prazan tekstualni čvor),
   pa ide `:not(:has(#go_cart))`. Provjereno u živom:
     stranica košarice → display:none, širina 0
     naslovnica        → display:flex, širina 66, gumb netaknut

   Preglednik bez `:has()` pravilo jednostavno ne primijeni i ostane
   zatečeno stanje — ništa se ne lomi.

   Naš JS se ovdje ponaša ispravno i bez ovog pravila: `.basket_content`
   postoji ali je prazan, `jeUKosarici()` vraća false, `stavke()` vraća [],
   presretanje pušta zatečeno. Zaštita iz naloga 14 radi. */

header section.basket_content:not(:has(#go_cart)){ display: none !important; }

/* ====================================================================
   11. ISPRAVAK: VODORAVNI PRELIJEV NA MOBITELU (uveden dijelom 7/8)

   Dio 7 stavlja red kontrola na `position:absolute`, a dio 8 ga na uskim
   širinama vraća na `position:relative`. Tek tada red počinje zauzimati
   stvarnu širinu — a `.bx-pager` je zatečeno širok 393 px i ne skuplja se.
   Posljedica: stranica se širi i dobiva vodoravno klizanje.

   Izmjereno na posluženom stanju (verkey 20261004i):
     510 px → prelijev 49 px
     360 px → prelijev 199 px   (scrollWidth 559)
     krivac: div.bx-pager 393 px @137–530, pa .lb-sl-brojac do 559

   Nakon ovog ispravka, izmjereno:
     510 px → prelijev 0, pager 393
     360 px → prelijev 0, pager 320
   Gumbi (24) i brojač ostaju netaknuti. */

@media only screen and (max-width: 820px){
  section.slider_content .lb-sl-kontrole{ flex-wrap: wrap; }
  section.slider_content .lb-sl-kontrole .bx-pager{
    width: auto !important; max-width: 100% !important;
    flex-wrap: wrap !important; min-width: 0 !important;
  }
  section.slider_content .lb-sl-brojac{ margin-left: 0 !important; }
}