/*!
 * libellus-krug8.css — ispravci 07.10.2026.
 * Libellus / Crew803
 *
 * Učitava se POSLIJE libellus-detalji.css.
 *
 * Pokriva šest točaka s Michaelova popisa i zatvara rupu 801–1199 na svih
 * sedam preostalih stranica. Sve prema izmjerenom (02-MJERENJA/42).
 * DOM se ne dira.
 */


/* ====================================================================
   1. RUPA 801–1199 NA PREOSTALIM STRANICAMA

   IZMJERENO: svaka stranica ima svoj `*_inner` i svaki je tvrdih 1200 px.
   Na 1024 px sve kližu točno 176 px.

     basic_site_inner   → O nama, Kontakt, Autori, Pravne, KOŠARICA
     news_page_inner    → Novosti
     search_main_inner  → Rezultati pretrage

   Tri selektora, sedam stranica. Košarica je među njima.                */

section.basic_site_inner,
section.news_page_inner,
section.search_main_inner{
  /* `flow-root`, ne `block`: zatečeni `display:table` pravi vlastiti
     kontekst i drži floatove unutra. `flow-root` to zadržava, a element
     se ponaša kao blok i puni raspoloživu širinu. S običnim `width:auto`
     na `display:table` sekcija se skupi na sadržaj — izmjereno na praznoj
     košarici: 779 px umjesto 1200. */
  display: flow-root !important;
  width: auto !important;        /* bilo: 1200px fiksno */
  max-width: 1200px;
  margin: 0 auto !important;     /* bilo: 0 352.5px */
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

@media only screen and (max-width: 560px){
  section.basic_site_inner,
  section.news_page_inner,
  section.search_main_inner{ padding-left: 16px; padding-right: 16px; }
}

/* IZMJERENO: na „Uvjeti kupnje" tablica od 9 redaka je 692 px i ne smanjuje
   se. `main.wrapper` je `display:table` pa se razvuče na sadržaj — na 375 px
   cijela stranica je bila 724 px i klizila 349 px. Jedina stranica kojoj
   ovo treba, ali pravilo stoji na sve tri sekcije da se ne ponovi drugdje. */
section.basic_site_inner table,
section.news_page_inner table,
section.search_main_inner table{
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
  word-break: break-word;
}
section.basic_site_inner table td,
section.basic_site_inner table th{ word-break: break-word; }

/* IZMJERENO: na istoj stranici stoji gola poveznica na ODR portal
   (`https://webgate.ec.europa.eu/odr/...`) duga 478 px bez ijednog mjesta
   za prelom. Ona sama je držala stranicu na 510 px i na telefonu od 375 px.
   `overflow-wrap: anywhere` lomi samo ono što se drukčije ne može složiti. */
section.basic_site_inner,
section.news_page_inner,
section.search_main_inner{
  overflow-wrap: anywhere;
}


/* ====================================================================
   2. LOGO

   IZMJERENO: prikaz 110 × 23 px, prirodna 468 × 96 (omjer 4,875 : 1),
   žuta traka 84 px visoka. Logo je zauzimao manje od trećine visine.
   Na 210 px širine visina je 43 px — polovica trake, sa zrakom gore i dolje. */

header > section.header_top_cnt > a.logo img{
  max-width: 210px !important;
  width: 210px !important;
  height: auto !important;
}

@media only screen and (max-width: 1180px){
  header > section.header_top_cnt > a.logo img{ max-width: 170px !important; width: 170px !important; }
}
@media only screen and (max-width: 1000px){
  header > section.header_top_cnt > a.logo img{ max-width: 150px !important; width: 150px !important; }
}


/* ====================================================================
   3. CRNA TRAKA — sadržaj u isti stupac kao ostatak sajta

   IZMJERENO: traka je 1905 px, telefon počinje na 36 px, a logo ispod
   njega na 353 px. Razlika 317 px.

   Pozadina ostaje puna širina, pomiče se samo sadržaj. Zato padding
   računat iz širine, a ne `max-width` na samoj traci.                   */

header > section.header_bottom_cnt{
  padding-left: max(24px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(24px, calc((100% - 1200px) / 2)) !important;
  box-sizing: border-box;
}
header > section.header_bottom_cnt > *{ margin-left: 0 !important; margin-right: 0 !important; }


/* ====================================================================
   4. SLAJDER — tekst i komande u isti stupac

   IZMJERENO: tekst slajda `left: 104.766px` (postotak širine), točkice na
   213 px, traka komandi 0 → 1905. Stupac sajta počinje na 353 px.        */

section.slider_content .bx-viewport li > aside{
  left: max(24px, calc((100% - 1200px) / 2)) !important;
  right: auto !important;
}

section.slider_content .bx-controls{
  padding-left: max(24px, calc((100% - 1200px) / 2)) !important;
  padding-right: max(24px, calc((100% - 1200px) / 2)) !important;
  box-sizing: border-box !important;
}
section.slider_content .bx-controls .bx-pager,
section.slider_content .bx-controls .bx-controls-direction{
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* ====================================================================
   5. OZNAKA POPUSTA NA NASLOVNICI

   IZMJERENO: zatečeno je 48 × 48 krug (`border-radius: 999px`), tekst
   `-20%` u 11 px. Na Ponudi je ista oznaka već značka u kutu korice;
   doseg je bio drugi (`products_featured_cnt`) pa pravilo nije doprlo.

   Pobjednik u kaskadi je bio `libellus-krug2.css`, pa selektor ovdje ide
   dublje — ova datoteka se ionako učitava poslije njega.                 */

aside.products_featured_cnt > section > article > div.price_cnt > span.sale,
aside.products_featured_cnt div.price_cnt span.sale{
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 3;
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  border-radius: 3px;      /* bilo: 999px — krug */
  background: var(--lb-crvena, #D42A1C);
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;         /* bilo: 11px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* kartica mora biti referentni okvir da značka sjedne na koricu */
aside.products_featured_cnt > section > article{ position: relative; }


/* ====================================================================
   6. NEWSLETTER — forma i sitni tekst u istu liniju

   IZMJERENO:
     .lb-cta-forma   1030 → 1529   (499)
     .lb-nl          1089 → 1529   (440)   ← moj max-width + margin-left:auto
     .lb-cta-mala    1030 → 1529   (499)

   Razlika 59 px, zato ne izgleda složeno. Forma ide punom širinom okvira. */

.lb-cta-forma .lb-nl{
  max-width: none;
  width: 100%;
  margin: 0;
}
.lb-cta-forma .lb-nl-red{ width: 100%; }

/* sitni tekst nema smisla nakon uspješne prijave */
.lb-cta-forma:has(.lb-nl-hvala) .lb-cta-mala{ display: none; }

/* zahvala preuzima mjesto forme, ne stisnuta u kut */
.lb-cta-forma .lb-nl-hvala{
  margin: 0;
  padding: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
}


/* ====================================================================
   7. KAZALO AUTORA — bez klizne trake

   IZMJERENO: popis je 121 veza i prirodno visok 1461 px. Mreža proizvoda
   je 3300 px. Popis je manji od polovice mreže — klizna traka je rješavala
   problem koji ne postoji. Postavio sam je prije nego sam izmjerio.

   Ide van, zajedno sa `sticky` koji na 1461 px ionako nema smisla.       */

aside.products_main_container section.products_main_inner > nav,
aside.product_details_content section.product_details_inner > nav{
  position: static;
  top: auto;
}
aside.products_main_container section.products_main_inner > nav > ul,
aside.product_details_content section.product_details_inner > nav > ul{
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* red koji ne staje u jedan redak ne smije skakati */
aside.products_main_container section.products_main_inner > nav li > a,
aside.product_details_content section.product_details_inner > nav li > a{
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.3;
}

@media only screen and (max-width: 1100px){
  /* kad kazalo ode iznad popisa, dugačak stupac se lomi u više njih */
  aside.products_main_container section.products_main_inner > nav > ul,
  aside.product_details_content section.product_details_inner > nav > ul{
    column-count: 3;
    column-gap: 8px;
  }
  aside.products_main_container section.products_main_inner > nav li,
  aside.product_details_content section.product_details_inner > nav li{
    break-inside: avoid;
  }
}
@media only screen and (max-width: 700px){
  aside.products_main_container section.products_main_inner > nav > ul,
  aside.product_details_content section.product_details_inner > nav > ul{ column-count: 2; }
}
@media only screen and (max-width: 430px){
  aside.products_main_container section.products_main_inner > nav > ul,
  aside.product_details_content section.product_details_inner > nav > ul{ column-count: 1; }
}