/* libellus-krug5.css — dorade naslovnice, krug 5
   Libellus / Crew803, 06.10.2026.
   Zaglavlje po protutipu, NA UPIT, poruka, podnožje, newsletter, lepeza.
   Piše se preko zatečenog — DOM i CMS se ne diraju. */

/* ====================================================================
   3. ZAGLAVLJE PO PROTUTIPU  (ispravak mojeg ranijeg rješenja)

   Ranije sam tražilicu maknuo iz žutog reda u gornju tamnu traku, jer red
   od 1200 px nije mogao primiti sve. To je bilo rješavanje simptoma.

   Protutip rješava isto drukčije i bolje: stisne DESNU stranu umjesto da
   seli tražilicu. Izmjereno na 1440 (kontejner 1200, 120–1320):

     zatečeno                       protutip            ušteda
     logotip        200             110                  90
     prijava+reg.   185 (s tekstom)  40 (sama ikona)     145
     košarica       190 (pilula)     48 (krug)           142
                                                 ukupno  377

   Tražilici treba 300 + 28 razmaka = 328. Stane, i ostaje 49 px zraka.

   Red tada traži: 110 + 505 + 300 + 40 + 48 + 4×28 = 1115 ≤ 1200. */

header > section.header_top_cnt{
  align-items: center !important;
  gap: 0 28px !important;
}

/* logotip — mali, kao u protutipu */
header > section.header_top_cnt > a.logo{ overflow: hidden !important; flex: 0 0 auto !important; }
header > section.header_top_cnt > a.logo img{
  max-width: 110px !important;
  width: 110px !important;
  height: auto !important;
}

/* izbornik */
header > section.header_top_cnt > nav{ flex: 0 1 auto !important; }
header > section.header_top_cnt > nav ul{
  display: flex !important;
  gap: 22px !important;
  flex-wrap: nowrap !important;
  margin: 0 !important; padding: 0 !important;
}
header > section.header_top_cnt > nav ul > li{ margin: 0 !important; white-space: nowrap !important; }

/* TRAŽILICA SE VRAĆA U ŽUTI RED — bijela pilula sa okruglim tamnim gumbom */
header > section.header_top_cnt > aside.search_content{
  position: static !important;
  flex: 1 1 300px !important;
  max-width: 300px !important;
  min-width: 190px !important;
  height: 48px !important;
  margin: 0 !important; padding: 0 !important;
  float: none !important;
  overflow: visible !important;
}
header > section.header_top_cnt > aside.search_content section.search_content{
  width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box !important;
}
header > section.header_top_cnt > aside.search_content form{
  width: 100% !important; position: relative !important; margin: 0 !important;
}
header input#itm_title_chk{
  width: 100% !important; max-width: 100% !important; min-width: 0 !important;
  height: 48px !important;
  padding: 0 54px 0 20px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tinta, #141210) !important;
  font-size: 14px !important;
}
header input#itm_title_chk::placeholder{ color: rgba(20,18,16,.45) !important; }

header > section.header_top_cnt > aside.search_content button.search_icon{
  position: absolute !important;
  right: 4px !important; top: 4px !important;
  width: 40px !important; min-width: 40px !important; height: 40px !important;
  padding: 0 !important; margin: 0 !important;
  font-size: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--tinta, #141210) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer;
}
header > section.header_top_cnt > aside.search_content button.search_icon::after{
  content: 'search';
  font-family: 'Material Icons';
  font-size: 19px;
  line-height: 1;
  font-weight: normal;
  color: #fff;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}

/* desni blok se steže — ikona osobe i okrugla košarica */
header > section.header_top_cnt > aside.login_cart_right_cnt{
  flex: 0 0 auto !important;
  gap: 14px !important;
  align-items: center !important;
}

/* PRIJAVA: ostaje sama ikona, natpisi odlaze. Ikona i dalje otvara isti
   zatečeni modal, pa se ništa ne gubi osim dvije riječi. */
header .login_content > a,
header .login_content > span,
header .login_content > p{ display: none !important; }
header .login_content .material-icons{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 40px !important; height: 40px !important;
  font-size: 24px !important;
  color: var(--tinta, #141210) !important;
  cursor: pointer;
}

/* KOŠARICA: okrugli tamni gumb, bez natpisa — kao u protutipu */
/* Roditelj nosi vlastitu tamnu pilulu iz kruga 2. Kad je gumb sveden na
   krug od 48, ta pilula ostaje ispod njega i viri — izmjereno:
     a#go_cart               48×48  @ 1489–1537, top 64
     section.basket_content  80×42  @ 1473–1553, top 67   ← viri 16 lijevo, 16 desno
   Dvije tamne plohe jedna preko druge daju mrlju umjesto kruga.
   Roditelj se gasi i prepušta oblik gumbu. */
header section.basket_content{
  background: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}

header .basket_content a#go_cart{
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  width: 48px !important; height: 48px !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 999px !important;
  background: var(--tinta, #141210) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: background .2s linear, transform .2s linear;
}
header .basket_content a#go_cart:hover{ background: #000 !important; transform: translateY(-1px); }
header .basket_content a#go_cart::after{ content: none !important; }   /* natpis „Košarica" odlazi */
header .basket_content a#go_cart .material-icons{
  order: 0;
  color: var(--zuta, #F5C518) !important;
  font-size: 21px !important;
  width: auto !important; line-height: 1 !important;
}
/* brojač se vraća u kut kao mala značka */
header .basket_content a#go_cart .items_in_cart{
  position: absolute !important;
  top: -3px !important; right: -3px !important;
  min-width: 19px; height: 19px;
  margin: 0 !important; padding: 0 5px;
  border-radius: 999px !important;
  border: 2px solid var(--zuta, #F5C518) !important;
  background: #B3001B !important;
  color: #fff !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px !important; font-weight: 700;
}

@keyframes lb-skok{ 0%, 100%{ transform: scale(1); } 35%{ transform: scale(1.14); } }
header .basket_content a#go_cart.lb-skok{ animation: lb-skok .52s cubic-bezier(.3,1.4,.5,1); }

/* uski pojasevi */
@media only screen and (min-width: 1001px) and (max-width: 1180px){
  header > section.header_top_cnt > nav ul{ gap: 14px !important; }
  header > section.header_top_cnt > nav ul > li > a{ font-size: 13px !important; }
  header > section.header_top_cnt > aside.search_content{ flex: 1 1 210px !important; max-width: 210px !important; }
}
@media only screen and (max-width: 1000px){
  header > section.header_top_cnt > aside.search_content{
    position: static !important; max-width: none !important; flex: 1 1 100% !important;
  }
}


/* ====================================================================
   5. PROIZVOD NA UPIT

   item_instock = 0 znači „na upit", a ne „rasprodano" — to je stanje
   oko 73 % kataloga i tako je i željeno. Zato NE piše „RASPRODANO".
   Zatečeni gumb nosi ikonu košarice i 6 px je viši od ostalih
   (padding 12px 18px, line-height normal). Ikona ide van, visina se
   izjednačava, a natpis kaže što radnja stvarno jest. */

a.sendrequest_btn_group_home,
aside.products_featured_cnt > section > article a.sendrequest_btn_group_home{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
  cursor: default !important;
  pointer-events: none !important;       /* nije gumb — ne reagira */
}
a.sendrequest_btn_group_home .material-icons,
a.sendrequest_btn_group_home span,
a.sendrequest_btn_group_home i{ display: none !important; }

a.sendrequest_btn_group_home::after{
  content: 'NA UPIT' !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase;
  color: rgba(20,18,16,.45) !important;
}

/* isto na stranici proizvoda */
a.add_to_cart_btn.disabled_cart_dts{
  background: none !important;
  border: 0 !important;
  color: rgba(20,18,16,.45) !important;
  box-shadow: none !important;
}
a.add_to_cart_btn.disabled_cart_dts .material-icons{ display: none !important; }

/* ====================================================================
   6b. PORUKA IDE GORE, NE DOLJE  (odluka naručitelja 06.10.)

   Zatečeno iz kruga 3: right 18, bottom 18 — poruka se javlja u donjem
   desnom kutu, daleko od gumba košarice koji je gore desno.

   Izmjereno zaglavlje:
     ≥1001 px   fixed, visina 132  → poruka na top 146
     ≤1000 px   nije fixed (static/relative), visina 196–282, pomiče se
                sa stranicom → poruka na top 16, uz sam vrh prozora

   Uz to ulazak s desna, kao u protutipu. Animacija je bez fill-mode da
   poslije nje `.lb-toast-van` i dalje može odraditi gašenje. */

.lb-toast{
  top: 146px !important;
  bottom: auto !important;
  /* desni rub poruke poravnat s kontejnerom od 1200 px, da stoji ispod gumba
     košarice a ne uz rub prozora. Ispod 1200 pada na 18 px od ruba. */
  right: max(18px, calc((100% - 1200px) / 2)) !important;
  animation: lb-toast-ulaz .32s cubic-bezier(.22,1,.36,1);
}
@keyframes lb-toast-ulaz{
  from{ opacity: 0; transform: translateX(22px); }
  to{   opacity: 1; transform: translateX(0); }
}
@media only screen and (max-width: 1000px){
  .lb-toast{ top: 16px !important; right: 16px !important; }
}

/* ====================================================================
   6c. PORUKA JE BILA NEČITLJIVA

   Izmjereno na posluženom stanju:
     .lb-toast        background rgb(20,18,16)   color rgb(251,248,243)
     .lb-toast span   color rgba(0,0,0,.85)      font-size 18px

   Okvir je taman sa svijetlim tekstom, ali zatečeno pravilo gura svaki
   `span` u gotovo crnu i 18 px. Crno na crnom. Tekst mora nositi boju sam,
   ne se oslanjati na nasljeđivanje. */

.lb-toast span{
  color: #FBF8F3 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

/* ====================================================================
   6d. LET SLIKE U KOŠARICU

   Klon slike naslova, position:fixed izvan toka — ne pomiče ni jedan
   element na stranici. JS mu postavlja left/top/width/height iz izmjerenog
   pravokutnika izvorne slike i animira ga do gumba košarice. */

.lb-let{
  position: fixed !important;
  z-index: 99995;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 10px 26px rgba(20,18,16,.34);
  will-change: transform, opacity;
}

/* ====================================================================
   6. TOAST PRI DODAVANJU — kvačica uz tekst
   Sam okvir .lb-toast već postoji iz kruga 3, ovdje samo kvačica. */

.lb-toast{ display: flex !important; align-items: center; gap: 10px; }
.lb-toast .lb-toast-kv{
  flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%;
  background: #1E7A3C; position: relative;
}
.lb-toast .lb-toast-kv::after{
  content: ''; position: absolute; left: 6px; top: 3px;
  width: 4px; height: 9px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* ====================================================================
   9. PODNOŽJE — tamni naslovi i logotipi plaćanja

   Izmjereno: 4 elementa tamna na tamnom — h1 rgb(0,0,0) 16 px
   (naslovi stupaca) i em rgba(0,0,0,.70) 12 px.
   Naše pravilo `footer, footer *` iz kruga 2 na njima gubi. */

footer section h1,
footer h1,
footer .footer_top_container section h1{
  color: var(--zuta, #F5C518) !important;
  font-size: 15px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
footer em,
footer section em{
  color: rgba(255,255,255,.72) !important;
  font-style: normal;
}

/* logotipi plaćanja na bijeloj podlozi, poravnati */
/* logotip u podnožju je taman na tamnom — ista obitelj greške kao h1 i em.
   Slika je PNG, pa ide filtrom u bijelo i spušta se na 60 % da ne viče. */
footer a.logo img,
footer .footer_logo img,
footer section img[src*="logo"]{
  filter: brightness(0) invert(1) !important;
  opacity: .60 !important;
  background: none !important;
  padding: 0 !important;
}

footer img[src*="card"], footer img[src*="visa"], footer img[src*="master"],
footer img[src*="maestro"], footer img[src*="corvus"], footer img[src*="secure"],
footer img[src*="verified"], footer img[src*="placanje"]{
  background: #fff !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  box-sizing: content-box;
  vertical-align: middle;
}

/* ====================================================================
   10. MINI-FORMA ZA NEWSLETTER  (točka 8)

   Gradi je libellus-newsletter.js preko zatečenog div.lb-cta-forma, koji
   inače sadrži samo poveznicu „Prijavi me". Blok stoji na žutoj podlozi
   CTA sekcije, pa je polje bijelo a gumb taman — obrnuto od gumba u
   karticama, da se ne stopi s podlogom. */

/* Izmjereno na posluženom stanju — dva zatečena pravila su razbila prikaz:

     .lb-nl-privola input   width 220px   (moj width:16px je izgubio)
     .lb-nl-privola span    18px / 27px, display:block, width 270

   Zato je kvačica bila 220 px daleko od teksta, a tekst dvostruko prevelik.
   Ista zamka kao kod poruke: tekst mora nositi svoje mjere sam, ne nasljeđivati.
   Sve ispod je zato izričito i s !important. */

.lb-nl{
  display: block;
  max-width: 440px;
  margin-left: auto;                 /* desni stupac — poravnato s gumbom */
}
.lb-nl-red{ display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap; }
.lb-nl-oznaka{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.lb-nl-polje{
  flex: 1 1 auto; min-width: 0;
  height: 54px; padding: 0 20px;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--tinta, #141210) !important;
  font-size: 15px !important; line-height: 1.2;
  box-sizing: border-box;
}
.lb-nl-polje::placeholder{ color: rgba(20,18,16,.42) !important; }
.lb-nl-polje:focus{ outline: none; box-shadow: 0 0 0 3px rgba(20,18,16,.18); }

.lb-nl-gumb{
  flex: 0 0 auto;
  height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--tinta, #141210);
  color: var(--zuta, #F5C518);
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s linear, transform .2s linear;
}
.lb-nl-gumb:hover{ background: #000; transform: translateY(-1px); }
.lb-nl-gumb:disabled{ opacity: .55; cursor: default; transform: none; }

/* PRIVOLA — kvačica uz tekst, tekst sitan i miran */
.lb-nl-privola{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 14px 0 0 !important;
  cursor: pointer;
}
.lb-nl-privola input[type="checkbox"]{
  flex: 0 0 17px !important;
  width: 17px !important; min-width: 17px !important; max-width: 17px !important;
  height: 17px !important; min-height: 17px !important;
  margin: 2px 0 0 !important; padding: 0 !important;
  accent-color: #141210;
  cursor: pointer;
}
.lb-nl-privola span{
  display: inline !important;
  width: auto !important; max-width: none !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  font-weight: 400 !important;
  color: rgba(20,18,16,.78) !important;
  letter-spacing: 0 !important;
}
.lb-nl-privola a{
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--tinta, #141210) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lb-nl-poruka{
  margin: 10px 0 0 !important;
  font-size: 13px !important; font-weight: 600 !important;
  line-height: 1.45 !important;
  color: rgba(20,18,16,.78) !important;
}
.lb-nl-poruka[data-vrsta="greska"]{ color: #8E1616 !important; }
.lb-nl-hvala{
  margin: 0 !important;
  font-size: 16px !important; font-weight: 700 !important;
  line-height: 1.45 !important;
  color: var(--tinta, #141210) !important;
}

@media only screen and (max-width: 900px){
  .lb-nl{ margin-left: 0; max-width: 100%; }
}
@media only screen and (max-width: 560px){
  .lb-nl-red{ flex-wrap: wrap; }
  .lb-nl-polje, .lb-nl-gumb{ flex: 1 1 100%; }
}

/* ====================================================================
   11. STRELICE U PODNOŽJU — crne na tamnom

   Izmjereno: `footer li a::before`, 11 komada, boja rgb(0,0,0), 16 px,
   font 'Material Icons', sadržaj je glif U+EAC9 (dvostruka strelica),
   position absolute. Nije znak » nego ikona — zato ju prvo mjerenje po
   tekstu nije našlo.

   Mijenja se SAMO boja. Sadržaj, font i pozicija ostaju netaknuti.
   Prigušena žuta, ne puna: to je razdjelnik iza poveznice, ne naglasak.
   Izmjereni kontrast prema podnožju rgb(20,18,16):
     zatečeno crno   1.12   — nevidljivo, zato se i javilo
     žuta .65        5.40   — vidljivo, a ispod teksta poveznice (9.92)
     puna žuta      11.46   — vuklo bi oko na ukras umjesto na tekst */

footer li a::before{
  color: rgba(245, 197, 24, .65) !important;
}
footer li a:hover::before{
  color: var(--zuta, #F5C518) !important;
}

/* ====================================================================
   12. LEPEZA ČETIRI KORICE uz „Klasici u punom koloru"  (točka 7)

   Zatečeno: div.lb-banner > div.lb-omot (grid, gap 50, 1200 širok)
   s JEDNIM djetetom div.lb-otkrij — samo stupac teksta, bez ijedne slike.
   Protutip ima drugi stupac s četiri korice u lepezi.

   HTML bloka je u blok-lepeza-klasici.html i ulazi u CMS. Koriste se samo
   div, a i img — CKEditor briše nepoznate elemente (G26).

   Korice su provjerene DEKODIRANJEM, ne statusom: na ovom sajtu nepostojeća
   slika vraća 200 i naslovnicu (G56). Sve četiri daju 190×250. */

/* mreža dobiva drugi stupac tek kad lepeza postoji */
.lb-banner .lb-omot:has(.lb-lepeza){
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.lb-lepeza{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 34px;                  /* mjesto za razmak korica na hoveru */
}
.lb-lepeza-k{
  display: block;
  width: 150px;
  flex: 0 0 150px;
  margin-left: -38px;               /* preklop — zato je lepeza, a ne red */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(0,0,0,.46);
  transition: transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s linear;
  will-change: transform;
}
.lb-lepeza-k:first-child{ margin-left: 0; }
.lb-lepeza-k img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 190 / 250;          /* omjer korice, slika se ne rasteže */
  object-fit: cover;
}

/* zatečeni nagibi — isti kao u protutipu */
.lb-lepeza-k:nth-child(1){ transform: rotate(-9deg)  translateY(6px);  z-index: 1; }
.lb-lepeza-k:nth-child(2){ transform: rotate(-3deg)  translateY(-2px); z-index: 2; }
.lb-lepeza-k:nth-child(3){ transform: rotate(4deg)   translateY(-2px); z-index: 3; }
.lb-lepeza-k:nth-child(4){ transform: rotate(11deg)  translateY(6px);  z-index: 4; }

/* razmak na hoveru cijele lepeze */
.lb-lepeza:hover .lb-lepeza-k:nth-child(1){ transform: rotate(-14deg) translate(-26px, 2px); }
.lb-lepeza:hover .lb-lepeza-k:nth-child(2){ transform: rotate(-5deg)  translate(-9px, -8px); }
.lb-lepeza:hover .lb-lepeza-k:nth-child(3){ transform: rotate(6deg)   translate(9px, -8px); }
.lb-lepeza:hover .lb-lepeza-k:nth-child(4){ transform: rotate(16deg)  translate(26px, 2px); }

/* korica pod mišem ide naprijed i uspravi se */
.lb-lepeza .lb-lepeza-k:hover{
  transform: rotate(0deg) translateY(-14px) scale(1.06) !important;
  z-index: 9;
  box-shadow: 0 24px 54px rgba(0,0,0,.6);
}

/* tko je ugasio animacije — dobiva mirnu lepezu, bez pomicanja */
@media (prefers-reduced-motion: reduce){
  .lb-lepeza-k{ transition: none; }
  .lb-lepeza:hover .lb-lepeza-k{ transform: none; }
  .lb-lepeza .lb-lepeza-k:hover{ transform: none !important; }
}

/* uske širine: lepeza ide pod tekst i smiruje se u red.
   Prag je 1060 jer je lepeza fiksnih 554 px: ispod toga tekstu ostane
   manje od 420 px i naslov se lomi. Izmjereno na 980 px: 313 px. */
@media only screen and (max-width: 1060px){
  .lb-banner .lb-omot:has(.lb-lepeza){ grid-template-columns: minmax(0, 1fr); }
  .lb-lepeza{ padding: 0; margin-top: 26px; }
  .lb-lepeza-k{ width: 108px; flex: 0 0 108px; margin-left: -26px; }
}
@media only screen and (max-width: 480px){
  .lb-lepeza-k{ width: 84px; flex: 0 0 84px; margin-left: -20px; }
}