/*!
 * libellus-ponuda.css — krug 6, popis proizvoda
 * Libellus / Crew803, 06.10.2026.
 *
 * Učitava se POSLIJE libellus-krug5.css.
 *
 * Sve je pisano prema IZMJERENOJ zatečenoj kaskadi (02-MJERENJA/39), ne
 * prema demou. DOM se ne dira — modul ispisuje ono što ispisuje.
 *
 * Doseg: `aside.products_main_container` postoji SAMO na Ponudi i Akcijama.
 * Provjereno dohvatom: naslovnica, detalji proizvoda, novosti, kontakt i
 * rezultati pretrage ga nemaju. Zato je svako pravilo ovdje ispod njega i
 * ne može pobjeći na drugu stranicu.
 *
 * Zatečeni DOM:
 *   aside.products_main_container
 *     section.products_main_inner        1200 px fiksno  ← ovdje je pucalo
 *       nav > ul > li > a                240 px, float:left, 121 autora
 *       aside.products_main_right_cnt    900 px, float:right
 *         section.intro_headline_cnt > h1
 *         section.sorter
 *         article × 20                   225 px, float:left, padding 0 0 60px
 *           figure > a > img             thumb 215×280
 *           h1 > a
 *           em
 *           div.price_cnt > div > del.kn_oldprice + strong.kn_price
 *                         > span.sale
 *           div.cart_cnt  > form.shop_add > a.shop_btn_add_to_basket
 *                         > a.details_btn_icon
 *         div.paging_content
 */


/* ====================================================================
   1. KONTEJNER — ovdje je bila rupa

   IZMJERENO: `section.products_main_inner` je tvrdih 1200 px i ne
   smanjuje se. Zatečeni media_queries.css ima pravila tek na 800 i 599,
   pa stranica vodoravno kliže na SVAKOJ širini između 801 i 1199, točno
   `1200 − širina`: na 1024 to je 176 px, na 801 čak 399 px.

   Lijek nije novi prijelom nego tekući kontejner. Flex zamjenjuje
   zatečeni `display:table` i dva floata, pa stupci drže razmak sami.  */

aside.products_main_container{
  padding: 34px 0 60px;          /* bilo 60px 0 — gornja praznina je bila 120 px ukupno */
}

aside.products_main_container > section.products_main_inner{
  display: flex;
  align-items: flex-start;
  gap: 40px;
  width: auto;                   /* bilo: 1200px fiksno */
  max-width: 1320px;             /* širina koju podnožje već koristi */
  margin: 0 auto;                /* bilo: 0 352.5px */
  padding: 0 24px;
  box-sizing: border-box;
}

aside.products_main_container > section.products_main_inner > nav{
  float: none;                   /* bilo: left */
  flex: 0 0 240px;
  width: auto;
  min-width: 0;
}

aside.products_main_container aside.products_main_right_cnt{
  float: none;                   /* bilo: right */
  width: auto;                   /* bilo: 900px */
  flex: 1 1 auto;
  min-width: 0;                  /* bez ovoga flex stavka ne smije ispod sadržaja */
}


/* ====================================================================
   2. KAZALO AUTORA

   IZMJERENO: nav je 240 px i 1866 px VISOK — 121 veza u nizu, bez
   naslova i bez kraja. To nije izbornik nego zid.

   Dobiva plohu, naslov (CSS-om, DOM ostaje netaknut) i visinu s
   kliznom trakom, pa prestaje gurati stranicu u dubinu.              */

aside.products_main_container section.products_main_inner > nav{
  background: var(--lb-bijela, #fff);
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  padding: 18px 0 8px;
  position: sticky;
  top: 148px;                    /* zaglavlje je fixed i visoko 132 px */
}

aside.products_main_container section.products_main_inner > nav::before{
  content: 'AUTORI I SERIJALI';
  display: block;
  margin: 0 18px 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--lb-siva, #6B645C);
}

aside.products_main_container section.products_main_inner > nav > ul{
  max-height: 560px;
  overflow-y: auto;
  margin: 0;
  padding: 0 6px 0 0;
  list-style: none;
  scrollbar-width: thin;
}
aside.products_main_container section.products_main_inner > nav > ul::-webkit-scrollbar{ width: 8px; }
aside.products_main_container section.products_main_inner > nav > ul::-webkit-scrollbar-thumb{
  background: rgba(20,18,16,.18); border-radius: 999px;
}

aside.products_main_container section.products_main_inner > nav li{
  margin: 0; padding: 0; list-style: none;
}
aside.products_main_container section.products_main_inner > nav li > a{
  display: block;
  padding: 7px 18px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--lb-siva, #6B645C);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color .16s linear, background .16s linear, border-color .16s linear;
}
aside.products_main_container section.products_main_inner > nav li > a:hover{
  color: var(--lb-tinta, #141210);
  background: var(--lb-papir, #FAF7F2);
  border-left-color: var(--lb-zuta, #F5C518);
}


/* ====================================================================
   3. NASLOV STRANICE I SORTER                                        */

aside.products_main_container section.intro_headline_cnt{
  margin: 0 0 22px;
}
aside.products_main_container section.intro_headline_cnt h1{
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--lb-tinta, #141210);
  margin: 0;
  padding: 0;
}

aside.products_main_container section.sorter{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0 0 26px;
  padding: 12px 16px;
  background: var(--lb-bijela, #fff);
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  font-size: 13px;
  color: var(--lb-siva, #6B645C);
}
aside.products_main_container section.sorter select{
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  background: var(--lb-papir, #FAF7F2);
  font-size: 13px;
  color: var(--lb-tinta, #141210);
  max-width: 100%;
}
/* E5 reset ima `button{font-size:0}`; ikona sortiranja je ligatura pa bi
   se ispisala kao tekst da je negdje naslijeđen uppercase (G52). */
aside.products_main_container section.sorter .material-icons{
  font-size: 18px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--lb-siva, #6B645C);
}


/* ====================================================================
   4. MREŽA

   Zatečeno su floatovi širine 225 px. Grid ih zamjenjuje, a naslov,
   sorter i paginacija se protežu preko svih stupaca.                 */

aside.products_main_container aside.products_main_right_cnt{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}
aside.products_main_container aside.products_main_right_cnt > section.intro_headline_cnt,
aside.products_main_container aside.products_main_right_cnt > section.sorter,
aside.products_main_container aside.products_main_right_cnt > div.paging_content{
  grid-column: 1 / -1;
}


/* ====================================================================
   5. KARTICA

   Isti jezik kao izdvojeni proizvodi na naslovnici, samo drugi doseg.

   IZMJERENO i poništeno:
     article  float:left  width:225px  padding:0 0 60px
     figure   display:table-cell  padding:5px
     h1       18px/22px/600  padding:0 15px
     em       14px/18px  margin:0 0 20px
     .sale    48×48 žuti krug, margin-top:-55px                        */

aside.products_main_container aside.products_main_right_cnt > article{
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;                    /* bilo: 0 0 60px — 60 px praznine pod svakom karticom */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background: var(--lb-bijela, #fff);
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s linear, border-color .28s linear;
}
aside.products_main_container aside.products_main_right_cnt > article:hover{
  transform: translateY(-6px);
  box-shadow: var(--lb-sjena, 0 12px 32px rgba(20,18,16,.08));
  border-color: rgba(20,18,16,.25);
}

/* korica — thumb je 215×280 i NE rasteže se preko prirodne širine,
   nego stoji na tamnoj plohi. Kartica smije biti šira, slika ostaje oštra. */
/* IZMJERENO, i prvi put sam pogriješio: s `display:grid` je implicitni
   stupac poprimio MAX-CONTENT širinu korice (215 px), pa je `max-width:100%`
   na poveznici računao 100% od tih 215 px — slika je stršila 32 px izvan
   kartice i `overflow:hidden` ju je rezao. Flex računa postotak od stvarne
   širine kontejnera, pa se korica smanji kad kartica postane uža. (G60) */
aside.products_main_container aside.products_main_right_cnt > article > figure{
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  float: none;
  margin: 0;
  padding: 18px 12px;            /* bilo: 5px */
  overflow: hidden;
  position: relative;
  background: linear-gradient(150deg, #2E2823 0%, #171412 100%);
}
aside.products_main_container aside.products_main_right_cnt > article > figure::before{
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
aside.products_main_container aside.products_main_right_cnt > article > figure > a{
  display: block;
  line-height: 0;
  width: 215px;                  /* prirodna širina thumba */
  max-width: 100%;
}
aside.products_main_container aside.products_main_right_cnt > article > figure img{
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
aside.products_main_container aside.products_main_right_cnt > article:hover figure img{
  transform: translateY(-4px) scale(1.02);
}

/* naslov */
aside.products_main_container aside.products_main_right_cnt > article > h1{
  font-size: 14.5px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: none;
  margin: 14px 13px 0;
  padding: 0;                    /* bilo: 0 15px */
}
aside.products_main_container aside.products_main_right_cnt > article > h1 > a{
  color: var(--lb-tinta, #141210);
  text-decoration: none;
}
aside.products_main_container aside.products_main_right_cnt > article:hover > h1 > a{
  color: var(--lb-zuta-t, #D9A800);
}

/* epizode */
aside.products_main_container aside.products_main_right_cnt > article > em{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--lb-siva, #6B645C);
  margin: 6px 13px 0;            /* bilo: 0 0 20px */
  padding: 0;                    /* bilo: 0 15px */
  min-height: 52px;
}

/* cijene */
aside.products_main_container aside.products_main_right_cnt > article div.price_cnt{
  display: block;                /* bilo: table */
  margin: 12px 13px 0;
  padding-top: 14px;
  border-top: 1px solid rgba(20,18,16,.07);
}
aside.products_main_container aside.products_main_right_cnt > article div.price_cnt > div{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
aside.products_main_container aside.products_main_right_cnt > article del.kn_oldprice{
  display: inline;               /* bilo: table */
  font-size: 13px;
  font-weight: 500;
  color: var(--lb-siva, #6B645C);
  margin: 0;
}
aside.products_main_container aside.products_main_right_cnt > article strong.kn_price{
  display: inline;               /* bilo: table */
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--lb-crvena, #D42A1C);
  margin: 0;
}

/* značka akcije — iz žutog kruga u kut korice, kao na naslovnici.
   IZMJERENO: zatečeno je 48×48, margin-top:-55px, žuta podloga. */
aside.products_main_container aside.products_main_right_cnt > article span.sale{
  position: absolute;
  top: 12px; right: 12px;
  z-index: 3;
  width: auto; height: auto;
  margin: 0;                     /* bilo: -55px 0 0 */
  padding: 6px 9px;
  border-radius: 3px;
  background: var(--lb-crvena, #D42A1C);
  color: #fff;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* gumbi — iz ikone od 24 px u pravi gumb s tekstom */
aside.products_main_container aside.products_main_right_cnt > article > div.cart_cnt{
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 13px;
  margin-top: auto;              /* gumbi na dno kartice, bez obzira na duljinu naslova */
  padding: 13px 0 0;             /* bilo: 13px 15px 0 */
}
aside.products_main_container aside.products_main_right_cnt > article form.shop_add{
  flex: 1;
  margin: 0;
}
aside.products_main_container aside.products_main_right_cnt > article a.shop_btn_add_to_basket{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 42px;
  border-radius: var(--lb-r, 4px);
  background: var(--lb-tinta, #141210);
  color: var(--lb-zuta, #F5C518);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s linear, transform .12s linear;
}
aside.products_main_container aside.products_main_right_cnt > article a.shop_btn_add_to_basket::after{
  content: "U košaricu";
}
aside.products_main_container aside.products_main_right_cnt > article a.shop_btn_add_to_basket:hover{
  background: #000;
}
aside.products_main_container aside.products_main_right_cnt > article a.shop_btn_add_to_basket:active{
  transform: scale(.97);
}
/* IZMJERENO: zatečeni CSS boja ikonu košarice u zeleno rgb(29,178,16),
   a ikonu „info" u crno. Na tamnom gumbu to je zelena mrlja. `inherit`
   ih veže uz boju gumba — žuta na crnom, siva na obrubljenom. */
aside.products_main_container aside.products_main_right_cnt > article a.shop_btn_add_to_basket .material-icons{
  color: inherit;
  font-size: 19px !important;
  text-transform: none !important;   /* G52 — ligatura puca na uppercase */
  letter-spacing: 0 !important;
}

aside.products_main_container aside.products_main_right_cnt > article a.details_btn_icon{
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  color: var(--lb-siva, #6B645C);
  text-decoration: none;
  transition: border-color .2s linear, color .2s linear, background .2s linear;
}
aside.products_main_container aside.products_main_right_cnt > article a.details_btn_icon:hover{
  border-color: var(--lb-tinta, #141210);
  color: var(--lb-tinta, #141210);
  background: var(--lb-papir, #FAF7F2);
}
aside.products_main_container aside.products_main_right_cnt > article a.details_btn_icon .material-icons{
  color: inherit;
  font-size: 19px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* „NA UPIT" dolazi iz krug5 i vrijedi globalno — ovdje se samo poravnava
   po visini s ostalim gumbima. 3 od 20 proizvoda na ovoj stranici. */
aside.products_main_container aside.products_main_right_cnt > article a.sendrequest_btn_group_home{
  flex: 1;
  border: 1px dashed var(--lb-linija, rgba(20,18,16,.13)) !important;
  border-radius: var(--lb-r, 4px) !important;
}

/* povratna informacija nakon dodavanja — klasu pali postojeći hook */
aside.products_main_container aside.products_main_right_cnt > article.lb-dodano a.shop_btn_add_to_basket{
  background: var(--lb-zelena, #1E8E4A);
  color: #fff;
}
aside.products_main_container aside.products_main_right_cnt > article.lb-dodano a.shop_btn_add_to_basket::after{
  content: "Dodano";
}


/* ====================================================================
   6. PAGINACIJA                                                      */

aside.products_main_container div.paging_content{
  margin: 14px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--lb-siva, #6B645C);
}
aside.products_main_container div.paging_content .paging_right_cnt{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
aside.products_main_container div.paging_content .paging_right_cnt a,
aside.products_main_container div.paging_content .paging_right_cnt span{
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--lb-linija, rgba(20,18,16,.13));
  border-radius: var(--lb-r, 4px);
  font-size: 13px;
  font-weight: 600;
  color: var(--lb-tinta, #141210);
  text-decoration: none;
  transition: background .16s linear, border-color .16s linear, color .16s linear;
}
aside.products_main_container div.paging_content .paging_right_cnt a:hover{
  background: var(--lb-papir, #FAF7F2);
  border-color: var(--lb-tinta, #141210);
}
aside.products_main_container div.paging_content .paging_right_cnt span.active{
  background: var(--lb-tinta, #141210);
  border-color: var(--lb-tinta, #141210);
  color: var(--lb-zuta, #F5C518);
}
/* „Prva" i „Prethodna" na prvoj stranici su neaktivni span-ovi */
aside.products_main_container div.paging_content .paging_right_cnt span:not(.active){
  color: rgba(20,18,16,.32);
  border-style: dashed;
}


/* ====================================================================
   7. PRIJELOMI

   Projektni pojasevi, usklađeni s krugom 5 (1180 / 1060 / 1000 / 900 /
   560 / 480). Rupa 801–1199 je time pokrivena — to je bila greška.    */

/* Tri kartice čim stupac postane pretijesan za četiri.
   Prag 1339 je izračunat, ne odoka: na 1340 px kartica ima 231 px, a korici
   nakon paddinga ostane 207 px — još uvijek ISPOD prirodnih 215 px, pa se
   slika smanjuje, nikad ne poveća. Ispod toga četiri stupca stisnu koricu
   premalo, pa ide tri. */
@media only screen and (max-width: 1339px){
  aside.products_main_container aside.products_main_right_cnt{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Kazalo ide iznad popisa. Prag 1100, ne 1000: na 1024 px s kazalom sa
   strane kartici ostane 212 px i korica padne na 186 px. Kad kazalo ode
   gore, na istoj širini kartica je 313 px i korica stoji u punih 215. */
@media only screen and (max-width: 1100px){
  aside.products_main_container > section.products_main_inner{
    display: block;
    padding: 0 20px;
  }
  aside.products_main_container section.products_main_inner > nav{
    position: static;
    margin: 0 0 24px;
    padding: 14px 0 6px;
  }
  aside.products_main_container section.products_main_inner > nav > ul{
    max-height: 190px;
  }
}

@media only screen and (max-width: 900px){
  aside.products_main_container{ padding: 26px 0 48px; }
  aside.products_main_container aside.products_main_right_cnt{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media only screen and (max-width: 560px){
  aside.products_main_container > section.products_main_inner{ padding: 0 16px; }
  aside.products_main_container aside.products_main_right_cnt{ gap: 14px; }
  aside.products_main_container aside.products_main_right_cnt > article > figure{ padding: 12px 10px; }
  aside.products_main_container aside.products_main_right_cnt > article > em{ min-height: 0; -webkit-line-clamp: 2; }
  aside.products_main_container aside.products_main_right_cnt > article > div.cart_cnt{ margin: 10px; padding-top: 10px; }
  aside.products_main_container aside.products_main_right_cnt > article strong.kn_price{ font-size: 19px; }
}

/* Jedan stupac na svim uobičajenim telefonima (360–430 px). Prag 380 je
   bio prenizak: na 381 px kartica je 160 px, a korica svega 138 px — manja
   nego u starom rasporedu. Na 430 px jedan stupac daje koricu u punih 215. */
@media only screen and (max-width: 430px){
  aside.products_main_container aside.products_main_right_cnt{ grid-template-columns: minmax(0, 1fr); }
}

/* tko je ugasio animacije — kartica miruje */
@media (prefers-reduced-motion: reduce){
  aside.products_main_container aside.products_main_right_cnt > article,
  aside.products_main_container aside.products_main_right_cnt > article figure img{
    transition: none;
  }
  aside.products_main_container aside.products_main_right_cnt > article:hover{ transform: none; }
  aside.products_main_container aside.products_main_right_cnt > article:hover figure img{ transform: none; }
}