/* ============================================================================
   LIBELLUS — redizajn naslovnice, grana C (samo CSS, DOM se ne dira)
   Datoteka: templates/css/libellus-redizajn.css
   Verzija:  v=20261003d   (prethodna: 20261003c)
   Datum:    03.10.2026.

   Sadrži: krug 1 (raspored) + krug 1b (tema: tipografija, boje, kartica, gumbi).
   Svako je pravilo pisano prema IZMJERENIM zatečenim vrijednostima i ubrizgano
   u živu stranicu te izmjereno PRIJE slanja. Zapisi mjerenja:
   libellus/09, /10, /11, /12.

   Ovaj list je ZADNJI sloj i učitava se iza media_queries.css.
   Postojeći prijelomi 0–800 se ne diraju.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700&display=swap');


/* ---------------------------------------------------------------- SLIDER -- */
/* Zatečeno: section.slider_content je display:table pa se skuplja na širinu
   sadržaja (1200), umjesto da prati prozor. bxSlider mjeri širinu pri učitavanju,
   pa mu ovo mora biti poznato PRIJE njegovog JS-a — zato je list u <head>. */
section.slider_content{
  display: block !important;   /* zatečeno display:table drži jače */
  width: 100% !important;
  max-width: 100% !important;
}
section.slider_content div.bx-wrapper,
section.slider_content div.bx-viewport{
  max-width: 100% !important;
}
section.slider_content ul.bxslider > li > aside{
  max-width: min(480px, calc(100vw - 48px));
  box-sizing: border-box;
}


/* ------------------------------------------- MREŽA „NOVO U PONUDI" (webshop) */
aside.products_featured_cnt > section{
  --kol: 5;                    /* kartica po redu */
  --razmak: 24px;

  display: flex !important;    /* zatečeno display:table — kaskada drži jače */
  flex-wrap: wrap;
  align-items: stretch;
  gap: 28px var(--razmak);

  /* zatečeno width:1200px fiksno → klizanje od 801 do ~1215 */
  width: min(1200px, calc(100vw - 48px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;                /* obavezno unutar display:table lanca */
}

/* naslov, paging i prazni div zauzimaju cijeli red */
aside.products_featured_cnt > section > h1,
aside.products_featured_cnt > section > div{
  flex: 0 0 100%;
  min-width: 0;
}

aside.products_featured_cnt > section > article{
  float: none !important;      /* zatečeno float:left — zbog njega se red lomio */
  width: auto;
  flex: 0 0 calc((100% - (var(--kol) - 1) * var(--razmak)) / var(--kol));
  min-width: 0;
  padding: 0;                  /* zatečeno 0 0 60px — razmak sada nosi gap */
  display: flex;
  flex-direction: column;
}

aside.products_featured_cnt > section > article > figure{
  display: block !important;   /* zatečeno table-cell */
  width: auto !important;      /* zatečeno 190px */
  max-width: none !important;  /* zatečeno 190px — poništiti OBOJE, ne samo width */
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

/* Slika se NIKAD ne rasteže iznad prirodnih 190 px — nema ponovnog uploada.
   `min(190px, 100%)` a NE `190px`: na 375 i 600 kartica je uža od 190 px, pa bi
   tvrdih 190 px probilo karticu i uvelo vodoravno klizanje ondje gdje ga nije bilo.
   Izmjereno ubrizgavanjem prije slanja. */
aside.products_featured_cnt > section > article > figure img{
  max-width: min(190px, 100%);
  width: auto;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* gumb „u košaricu" uvijek na dnu kartice, bez obzira na duljinu naslova */
aside.products_featured_cnt > section > article > div.cart_cnt{
  margin-top: auto;
}

/* broj kartica po redu */
@media only screen and (max-width: 1040px){
  aside.products_featured_cnt > section{ --kol: 4; }
}
@media only screen and (max-width: 800px){
  aside.products_featured_cnt > section{ --kol: 3; --razmak: 20px; }
}
@media only screen and (max-width: 599px){
  aside.products_featured_cnt > section{ --kol: 2; --razmak: 16px; }
}


/* ------------------------------------------------------------- ZAGLAVLJE -- */
/* Sve ispod 801 px ostaje zatečeno — ondje je zaglavlje statično i radi
   (slicknav mobilni izbornik). Ne diramo ga. */

/* zajedničko za obje desktop trake */
@media only screen and (min-width: 801px){
  header{
    width: 100% !important;    /* zatečeno display:table → žuta traka se skupljala
                                  na 1200 i nije bila preko cijele širine */
    box-sizing: border-box;
  }
  header > section.header_top_cnt,
  header > section.header_bottom_cnt{
    display: flex !important;  /* zatečeno display:table */
    align-items: center;
    gap: 0 24px;
    /* 72, ne 48: značka s brojem artikala u košarici strši ~26 px desno od ikone */
    width: min(1200px, calc(100vw - 72px));
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0;
  }
  header > section.header_top_cnt > a.logo,
  header > section.header_top_cnt > nav,
  header > section.header_top_cnt > aside.login_cart_right_cnt,
  header > section.header_bottom_cnt > aside{
    float: none !important;    /* zatečeno float:left/right — tuče se s flexom */
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-width: 0;
  }
  header > section.header_top_cnt > nav{ flex: 1 1 auto; min-width: 0; }
  header > section.header_top_cnt > aside.login_cart_right_cnt{
    margin-left: auto !important;
    flex: 0 0 auto;
  }
  header aside.login_cart_right_cnt{ display: flex; align-items: center; gap: 24px; }

  /* telefon i društvene mreže zadržavaju širinu, tražilica uzima ostatak —
     inače se njihov sadržaj prelomi i zaglavlje naraste sa 146 na 177 px */
  header > section.header_bottom_cnt > aside.header_phone_cnt,
  header > section.header_bottom_cnt > aside.header_social{ flex: 0 0 auto; white-space: nowrap; }
  header > section.header_bottom_cnt > aside.search_content{
    flex: 1 1 auto; min-width: 0; margin-left: auto !important;
  }
}

/* 1001+ : zaglavlje ostaje fiksno, visina 146 px, wrapper padding se NE dira */
@media only screen and (min-width: 1001px){
  header > section.header_top_cnt,
  header > section.header_bottom_cnt{ flex-wrap: nowrap; }
}

/* 801–1000 : logo + izbornik + prijava/košarica ne stanu u jedan red.
   Umjesto fiksnog zaglavlja visokog 259 px, koje bi pojelo pola zaslona,
   zaglavlje ovdje postaje statično — isto kao ispod 801 px. */
@media only screen and (min-width: 801px) and (max-width: 1000px){
  header{ position: static !important; }
  main.wrapper{ padding-top: 0 !important; }   /* 146 px je odmak za fiksno zaglavlje */
  header > section.header_top_cnt,
  header > section.header_bottom_cnt{ flex-wrap: wrap; justify-content: center; row-gap: 8px; }
}


/* --------------------------------------------------------------- PODNOŽJE - */
@media only screen and (min-width: 801px){
  footer > aside.footer_top_container{
    display: flex !important;  /* zatečeno display:table */
    flex-wrap: wrap;
    gap: 32px;
    width: min(1200px, calc(100vw - 48px));
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
    min-width: 0;
  }
  footer > aside.footer_top_container > section{ flex: 1 1 240px; min-width: 0; }

  footer > section.footer_copyright > aside{
    width: min(1200px, calc(100vw - 48px));
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
  }
}


:root{
  --tinta:   #141210;
  --tinta-2: #1F1B18;
  --papir:   #FAF7F2;
  --bijela:  #FFFFFF;
  --zuta:    #F5C518;   /* koncept; zatečeno je bilo #E4B11A */
  --zuta-t:  #D9A800;
  --crvena:  #D42A1C;
  --siva:    #6B645C;
  --linija:  rgba(20,18,16,.13);
  --sjena:   0 2px 4px rgba(20,18,16,.04), 0 12px 32px rgba(20,18,16,.08);
  --r:       4px;
  --f-disp:  'Anton', Impact, 'Arial Narrow', sans-serif;
  --f-body:  'Archivo', Montserrat, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------------------------------------- PODLOGA --- */
main.wrapper{ background: var(--papir); }
aside.products_featured_cnt{ background: var(--papir) !important; }  /* zatečeno bijela */

/* ----------------------------------------------------------- ZAGLAVLJE --- */
header{
  background: var(--zuta) !important;        /* zatečeno #E4B11A */
  border-bottom: 2px solid var(--tinta);
}
header, header a, header section, header aside{ font-family: var(--f-body); }
header a.logo img{ display:block; }

/* --------------------------------------------- NASLOV SEKCIJE „NOVO U PONUDI" */
aside.products_featured_cnt > section > h1{
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: .005em;
  color: var(--tinta);
  margin: 0 0 10px;
}

/* ----------------------------------------------------- KARTICA PROIZVODA -- */
aside.products_featured_cnt > section > article{
  background: var(--bijela);
  border: 1px solid var(--linija);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s;
}
aside.products_featured_cnt > section > article:hover{
  transform: translateY(-2px);
  box-shadow: var(--sjena);
  border-color: rgba(20,18,16,.22);
}

aside.products_featured_cnt > section > article > figure{
  padding: 16px 16px 10px !important;   /* zatečeno 5px */
}

aside.products_featured_cnt > section > article > h1{
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  margin: 0;
  padding: 0 16px;
}
aside.products_featured_cnt > section > article > em{
  font-family: var(--f-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--siva);
  display: block;
  padding: 6px 16px 0;
}

/* ------------------------------------------------------------- CIJENA ----- */
aside.products_featured_cnt > section > article > div.price_cnt{
  padding: 12px 16px 0 !important;
  margin: 0 !important;
  width: auto !important;
  display: flex !important;              /* zatečeno display:table */
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
aside.products_featured_cnt div.price_cnt del.kn_oldprice{
  font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--siva);
}
aside.products_featured_cnt div.price_cnt strong.kn_price{
  font-family: var(--f-body); font-size: 19px; font-weight: 700; color: var(--tinta);
}
aside.products_featured_cnt div.price_cnt span.sale{
  font-family: var(--f-body); font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--bijela); background: var(--crvena);
  padding: 4px 7px; border-radius: 999px; letter-spacing: .02em;
}

/* ------------------------------------------------- GUMB „U KOŠARICU" ------ */
aside.products_featured_cnt > section > article > div.cart_cnt{
  padding: 14px 16px 16px !important;    /* zatečeno 13px 15px 0 */
  width: auto !important;
  display: block !important;             /* zatečeno display:table */
}
aside.products_featured_cnt div.cart_cnt a,
aside.products_featured_cnt div.cart_cnt button,
aside.products_featured_cnt div.cart_cnt input[type=submit]{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; box-sizing: border-box;
  padding: 12px 18px;
  font-family: var(--f-body); font-size: 13px; font-weight: 700; letter-spacing: .01em;
  color: var(--tinta); background: var(--zuta);
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  transition: background .2s, transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
aside.products_featured_cnt div.cart_cnt a:hover,
aside.products_featured_cnt div.cart_cnt button:hover,
aside.products_featured_cnt div.cart_cnt input[type=submit]:hover{
  background: var(--zuta-t);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(245,197,24,.40);
}

/* ----------------------------------------------------------- PODNOŽJE ---- */
footer{ background: var(--tinta) !important; }                /* zatečeno bijela */
footer, footer p, footer li, footer span, footer address{
  font-family: var(--f-body); color: rgba(255,255,255,.72);
}
footer h1, footer h2, footer h3, footer strong{
  font-family: var(--f-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; color: var(--bijela);
}
footer a{ color: rgba(255,255,255,.72); transition: color .2s; }
footer a:hover{ color: var(--zuta); }
footer > section.footer_copyright{
  background: var(--tinta-2) !important;                      /* zatečeno #231F20 */
  border-top: 1px solid rgba(255,255,255,.10);
}
footer > section.footer_copyright,
footer > section.footer_copyright *{ color: rgba(255,255,255,.55); font-size: 13px; }


/* ------------------------------------------------- GUMB „U KOŠARICU" ------ */
/* Zatečeni DOM: div.cart_cnt → form.shop_add → a.shop_btn_add_to_basket
   (sadrži samo span.material-icons, BEZ teksta) + a.details_btn_icon.
   Natpisi se dodaju kroz ::after jer ih u ispisu nema. */

aside.products_featured_cnt > section > article > div.cart_cnt{
  display: block !important;          /* zatečeno table — inače se forma skuplja na sadržaj */
  padding: 14px 16px 16px !important; /* zatečeno 13px 15px 0 */
}
aside.products_featured_cnt div.cart_cnt form.shop_add{
  display: block !important; float: none !important; width: auto !important;
  margin: 0 0 8px 0 !important;
}

aside.products_featured_cnt div.cart_cnt a.shop_btn_add_to_basket{
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  float: none !important; width: 100% !important; box-sizing: border-box !important;
  margin: 0 !important; padding: 12px 14px !important;
  font-family: 'Archivo', Montserrat, sans-serif !important;
  font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: #141210 !important; background-color: #F5C518 !important;
  border-radius: 999px !important; text-decoration: none !important; white-space: nowrap !important;
  /* zatečeno `a { transition: .3s linear }` animira SVE, pa i font-size — zamijenjeno uskim popisom */
  transition: background-color .2s linear, box-shadow .2s linear !important;
}
aside.products_featured_cnt div.cart_cnt a.shop_btn_add_to_basket:hover{
  background-color: #D9A800 !important;
  box-shadow: 0 10px 24px rgba(245,197,24,.40) !important;
}
aside.products_featured_cnt div.cart_cnt a.shop_btn_add_to_basket::after{
  content: "U KOŠARICU"; letter-spacing: .02em;
}
aside.products_featured_cnt div.cart_cnt a.shop_btn_add_to_basket span.material-icons{
  font-size: 18px !important; line-height: 1 !important; color: inherit !important;
}

aside.products_featured_cnt div.cart_cnt a.details_btn_icon{
  display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  margin: 0 !important; padding: 7px 12px !important;
  border: 1px solid rgba(20,18,16,.18) !important; border-radius: 999px !important;
  background-color: #fff !important; color: #6B645C !important; text-decoration: none !important;
  font-family: 'Archivo', Montserrat, sans-serif !important;
  font-size: 12px !important; font-weight: 600 !important;
  transition: border-color .2s linear, color .2s linear !important;
}
aside.products_featured_cnt div.cart_cnt a.details_btn_icon:hover{
  border-color: #141210 !important; color: #141210 !important;
}
aside.products_featured_cnt div.cart_cnt a.details_btn_icon::after{ content: "DETALJI"; letter-spacing: .02em; }
aside.products_featured_cnt div.cart_cnt a.details_btn_icon span.material-icons{
  font-size: 16px !important; color: inherit !important;
}

/* Zaglavlje je s obrubom 148 px, ne 146 — odmak mora pratiti visinu. */
@media only screen and (min-width: 1001px){
  main.wrapper{ padding-top: 148px !important; }
}