:root {
  /* "Škriljac" (Slate) - treći pokušaj, potpuno nov predlog (ne sa _design/color-palettes.html
     strane - nijedna od tamošnjih 10 karata nije bila zamišljena za sekciju čiji je SOPSTVENI
     sadržaj (naslovnice kataloga) već šarena/vizuelno bučna; Antracit (#33363D/#17181C/#E3E4E7)
     je odbačen kao "mrtav"/bez karaktera, Malina (#D1295C/#7A1636/#F5D3E0) kao prejaka i
     "odvlači pažnju od kataloga"). Umesto još jedne zasićene boje, ovo je namerno PRIGUŠENA
     plavo-siva - dovoljno tiha da ne konkuriše šarenim koricama kataloga, ali sa jasnim, ne-
     grayscale karakterom (blagi plavi ton), za razliku od Antracita. Nije proizvoljna - direktno
     je izvedena iz VEĆ POSTOJEĆE tamne boje glavnog sajt-nav-a (.top-menu-btn, #234,
     standard.css), samo malo posvetljena/plavlja radi sopstvenog identiteta unutar AK modula, a
     ne identična kopija (izbegava se vizuelna zabuna sa generičkim nav-om iznad nje). */
  --ak-accent: #3B4A5A;
  --ak-accent-dark: #222B35;
  --ak-accent-soft: #DEE3E8;
  /* .bcrumb-outer (standard.css) - Vicoteka #DDEEFF/Kuhinja #F2E6EA/Blog #F5E8DE/Mali-oglasi
     #E9ECEF su već zauzete. Direktan zahtev, znatno posvetljeno u odnosu na prvi pokušaj
     (#C7CDD3) - #EEF1F3, i dalje sa dovoljno razlike od breadcrumb-ove sopstvene "link" pozadine
     (#D3D9E0) da se ram jasno razaznaje (potvrđeno uživo). */
  --bcrumb-outer-bg: #EEF1F3;
}

/* Oglasni stubac (desni, .col-md-auto) - direktan zahtev da rezerviše fiksnih 300px, isto kao
   Kuhinja/Blog/Vicoteka (.kh-ad-col/.bo-ad-col/.vc-ad-col), umesto da se skuplja na 0px kad nema
   oglasa. Za razliku od ta tri modula, AK nema poseban mobilni "inline" fallback za oglase - isti
   .col-md-auto div se koristi na svakoj širini - pa je rezervacija namerno ograničena na md+ (isti
   prag na kom .col-md-auto uopšte počinje da se ponaša kao "auto" umesto punog reda), da se na
   uskim ekranima ne bi pojavila prazna 300px kutija bez ikakvog sadržaja. */
@media ( min-width: 768px ) {
  .ak-ad-col {
    /* 316px, ne 300px - .row.gx-3 (Bootstrap gutter) daje ovoj koloni 8px+8px levo/desno padding
       (uvek je tu bilo, i pre ovih izmena - potvrđeno uživo getComputedStyle merenjem), pa bi
       "čistih" 300px spolja ostavilo samo 284px SADRŽAJA. Direktan zahtev - stubac mora da ima
       čistih 300px prostora ZA SADRŽAJ (gde sede pravi 300px AdSense baneri), pa je spoljna
       širina uvećana za tačno taj padding (16px) da bi nakon njega ostalo tačno 300px. */
    flex: 0 0 316px;
    max-width: 316px;
    box-sizing: border-box;
    /* display:flex + flex-direction:column, direktna posledica dodavanja .ak-kat-marketlogos-side
       (logo markice marketa) kao sestre .ak-ad-column-a: procentualni min-height ispod NIJE znao
       za taj novi sestrinski element (CSS % računa protiv CELE visine roditelja, ne protiv onoga
       što ostane posle sestrinskog sadržaja) - .ak-ad-column je zato bio 100% visine .ak-ad-col-a
       UMESTO "ostatak posle logoa", prelivajući se preko dna roditelja za tačno visinu logo bloka.
       akAds.js je zatim tu (naduvanu) visinu koristio kao "avail" za pozicioniranje banera, pa je
       baner (zona 3) ispadao van vidljivih granica stupca - uživo potvrđeno getBoundingClientRect
       merenjem, ne pretpostavka. flex:1 1 auto ispod (zamena za min-height:%) prirodno popunjava
       TAČNO ono što ostane posle logo bloka, bez računanja procenata. */
    display: flex;
    flex-direction: column;
  }
  .ak-ad-column {
    flex: 1 1 auto;
    position: relative;
  }
  .ak-ad-zone {
    position: absolute;
    left: 0;
    right: 0;
  }
  .ak-ad-item {
    position: sticky;
    top: 1rem;
  }
}
.ak-ad-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.ak-ad-item + .ak-ad-item {
  margin-top: 10px;
}
.ak-ad-unit + .ak-ad-unit {
  margin-top: 10px;
}
.ak-ad-unit img,
.ak-ad-unit ins {
  max-width: 100%;
  height: auto;
}

.ak-ad-col ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* Logo markica marketa (ili više njih) na katalog.php - direktan zahtev. Na vrhu desnog stupca na
   md+ (.ak-kat-marketlogos-side, sestrinski div ISPRED .ak-ad-column, ne unutar nje - akAds.js
   meri .ak-ad-column-ovu sopstvenu getBoundingClientRect().height za "collide and push"
   pozicioniranje zona, pa bilo šta unutar nje pomera tu matematiku; kao sestra ostaje potpuno
   neutralno). Na uskim ekranima (gde .ak-ad-col nema rezervisanih 300px, gore) isti sadržaj ide u
   zaseban red iznad naslovne trake (.ak-kat-marketlogos-top). */
.ak-kat-marketlogos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .75rem;
}
.ak-kat-marketlogo-item {
  display: block;
  line-height: 0;
}
.ak-kat-marketlogo-item img {
  max-height: 45px;
  width: auto;
  max-width: 100%;
}
.ak-kat-marketlogos-side {
  padding-bottom: .25rem;
  margin-bottom: .25rem;
  border-bottom: 1.5px dashed var(--ak-accent);
}
.ak-kat-marketlogos-top {
  padding: .25rem 0;
}

/* Katalog viewer thumbnail grid (main_katalog.php) - container query (stvarna širina, ne prozor)
   umesto Bootstrap col-*, 2-6 kolona u 5 koraka po 96px, da "X od Y" ne prelama u 2 reda. */
.ak-kat-thumbs-section .col-12 {
  container-type: inline-size;
}
.ak-kat-thumbs-section .row.g-2 > .ak-kat-thumb-item {
  flex: 0 0 50%;
  max-width: 50%;
}
@container ( min-width: 288px ) {
  .ak-kat-thumbs-section .row.g-2 > .ak-kat-thumb-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}
@container ( min-width: 384px ) {
  .ak-kat-thumbs-section .row.g-2 > .ak-kat-thumb-item {
    flex: 0 0 25%;
    max-width: 25%;
  }
}
@container ( min-width: 480px ) {
  .ak-kat-thumbs-section .row.g-2 > .ak-kat-thumb-item {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@container ( min-width: 576px ) {
  .ak-kat-thumbs-section .row.g-2 > .ak-kat-thumb-item {
    flex: 0 0 16.6666%;
    max-width: 16.6666%;
  }
}

.ak-menu-btn {
  font: normal 14px Oswald;
  background-color: var(--ak-accent);
  color: white;
}
.ak-menu-btn:hover {
  background-color: var(--ak-accent-dark);
  color: white;
}
.ak-menu-btn:active, .ak-menu-btn:focus, .ak-menu-btn:target, .ak-menu-btn:active:focus {
  background-color: var(--ak-accent-dark);
  color: #FFD800;
}

.ak-menu-btn-a, .ak-menu-btn-a:hover, .ak-menu-btn-a:active, .ak-menu-btn-a:focus, .ak-menu-btn-a:target, .ak-menu-btn-a:active:focus {
  font: normal 14px Oswald;
  background-color: var(--ak-accent-soft);
  color: var(--ak-accent-dark);
}

.ak-menu-btn-dis {
  font: normal .875rem Oswald;
  background-color: var(--ak-accent) !important;
  color: white;
  cursor: default !important;
}

.ak-pages {
  font: normal 1rem "Barlow Condensed";
  /* Direktan zahtev - i klikabilne i onemogućene paginacione pilule dobijaju istu, sopstvenu
     tamnu sivu (#333333, van --ak-accent* trojke), umesto da dele --ak-accent kao dosad. */
  background-color: #333333;
  color: #FFD800;
}
.ak-pages:hover {
  background-color: #FFD800;
  color: var(--ak-accent-dark);
}
.ak-pages:active, .ak-pages:focus, .ak-pages:target, .ak-pages:active:focus {
  background-color: var(--ak-accent-dark);
  color: #FFD800;
}

.ak-pages-dis {
  font: normal 1rem "Barlow Condensed";
  background-color: #333333;
  color: #999999;
}

.ak-pages-dis.ak-pages-info {
  /* "strana X od Y" ćelija - ranije Bootstrap-ova bg-warning-subtle (bledo žuta, preko
     !important). Direktan zahtev - ista pozadina kao breadcrumb-outer, deljena promenljiva. */
  background-color: var(--bcrumb-outer-bg);
}

.ak-item {
  border: solid 2px var(--ak-accent);
  background-color: var(--ak-accent-soft);
  cursor: pointer;
  color: var(--ak-accent-dark);
  padding: 2px;
}
.ak-item:hover {
  /* Direktan zahtev - jasno tamniji spoljni border na hover, ne samo blaga nijansa unutar
     --ak-accent* trojke. */
  border: solid 2px #000000;
  background-color: #FFF6D6;
  color: var(--ak-accent-dark);
}

/* Sponzorisani katalozi (akCT_IsPay='Y') - direktan zahtev za sopstvenim borderom na kartici,
   i van i na hover. Dodaje se KAO DODATNA klasa (ne zamena za .ak-item, za razliku od
   .ak-item-flags-pay ispod) - kartica i dalje treba sve ostalo od .ak-item (pozadinu/cursor/
   padding/decu), samo sopstveni border. Prošle probe: bronzano-braon #C98A2B (muljavo/"kaki"),
   Ruzmarin zeleno #3C6E63, zlatna #FFD800 - sad crvena #660000, direktan zahtev. */
.ak-item.ak-item-pay {
  border-color: #660000;
}
.ak-item.ak-item-pay:hover {
  border-color: #E8590C;
}

.ak-item .ak-item-flags {
  background-color: var(--ak-accent);
}

.ak-item:hover .ak-item-flags {
  background-color: var(--ak-accent-dark);
}

.ak-item .ak-item-flags-pay {
  /* Standardna kartica dobija svoj "okvir" utisak jer .ak-item-flags deli TAČNO istu boju sa
     spoljnim borderom (--ak-accent oba mesta) - vrh kartice (border+traka sa zastavama) se čita
     kao jedna celina, koja onda oštro kontrastira sa belim/svetlim sadržajem ispod. Uvek prati
     .ak-item-pay-ov border-color (ne posvetljena/zasebna nijansa) radi istog "okvir" utiska. */
  background-color: #660000;
}

.ak-item:hover .ak-item-flags-pay {
  background-color: var(--ak-accent-dark);
}

.ak-item-flag {
  border: 1px solid #FFF;
}

.ak-item .ak-item-brand {
  border: 1px solid var(--ak-accent);
  background-color: #FFF;
  margin: 2px 0;
  color: var(--ak-accent-dark);
}

.ak-item:hover .ak-item-brand {
  border: 1px solid var(--ak-accent-dark);
}

.ak-item .ak-item-date {
  border: 1px solid var(--ak-accent);
  background-color: var(--ak-accent-soft);
  margin-top: 2px;
  color: var(--ak-accent-dark);
}

.ak-item:hover .ak-item-date {
  border: 1px solid var(--ak-accent-dark);
}

.ak-item .ak-item-page {
  padding: 2px 0;
}

/* Katalog viewer thumbnail grid (main_katalog.php) - .ak-item-page ovde sedi direktno na vrhu
   kartice (za razliku od pravih ak-item kartica na listing stranicama, gde iznad njega postoji
   .ak-item-date/.ak-item-brand), pa se njegov gornji padding (2px) sabira sa .ak-item-ovim
   sopstvenim (2px) - ukupno 4px gore naspram 2px sa strane. Uklonjeno samo ovde (gornji padding
   na 0), donji ostaje netaknut - i dalje treba razmak pre .ak-item-sumpages trake ispod slike. */
.ak-kat-thumb-item .ak-item-page {
  padding-top: 0;
}

.ak-item .ak-item-sumpages {
  border: 1px solid var(--ak-accent);
  background-color: var(--ak-accent-soft);
  color: var(--ak-accent-dark);
  padding: 2px;
}

.ak-item:hover .ak-item-sumpages {
  border: 1px solid var(--ak-accent-dark);
  background-color: #FFF6D6;
  color: var(--ak-accent-dark);
}

.ak-brand {
  border: solid 1px var(--ak-accent);
  background-color: #EFF1F4;
  cursor: pointer;
  color: var(--ak-accent-dark);
  padding: 2px;
}
.ak-brand:hover {
  border: solid 1px var(--ak-accent-dark);
  background-color: #FFF6D6;
  color: var(--ak-accent-dark);
}

/* Kategorije (/akcijski-katalozi/kategorije) - isti kartica-obrazac kao .ak-brand, samo sa
   ikonicom (akCategory.akKT_Icon, Material Symbols - isto ime kolone/konvencija kao
   khCategory.khCT_Icon/boCategory.boCT_Icon) umesto logotipa. Ikonica namerno malo krupnija
   (32px) nego u hamburger meniju (tamo je podrazumevanih 24px, .material-symbols-outlined u
   standard.css) - direktan zahtev. */
.ak-category {
  display: block;
  border: solid 1px var(--ak-accent);
  background-color: var(--ak-accent-soft);
  cursor: pointer;
  color: var(--ak-accent-dark);
  padding: 10px 4px 8px 4px;
}
.ak-category:hover {
  border: solid 1px var(--ak-accent-dark);
  background-color: #FFF6D6;
  color: var(--ak-accent-dark);
}

.ak-category-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 6px auto;
  border-radius: 50%;
  background-color: var(--ak-accent);
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ak-category:hover .ak-category-icon {
  background-color: var(--ak-accent-dark);
}
.ak-category-icon .material-symbols-outlined {
  font-size: 32px;
}

.ak-category-name {
  font-size: .85rem;
  line-height: 1.15;
  min-height: 2.3em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ak-category-count {
  font-size: .75rem;
  color: var(--ak-accent-dark);
  margin-top: 6px;
  opacity: .8;
}

.ak-kat-titlebar {
  background-color: #EEF4FA;
  border: 1px solid #B7C4D1;
  padding: 2px 4px;
}

.ak-kat-titlebar-ttl {
  color: #003366;
  font-size: .95rem;
}

.ak-kat-titlebar-date {
  color: var(--ak-accent);
  font: 700 .95rem "Barlow Condensed";
}

/* Datumi na uskim ekranima (ispod md) ne sede unutar tamne kutije - direktan zahtev, "previše
   prostora uzima i odvlači pažnju" - nego su potpuno IZVUČENI iznad nje kao goli tekst, bez
   pozadine i bez vertikalnog razmaka (.ak-kat-dates-outside, main_katalog.php), dok kutija sama
   nosi samo naslov (na md+ i dalje ima svoja 3 stupca - datum/naslov/datum, .ak-kat-titlebar-date
   se tamo prikazuje - d-none d-md-flex u markup-u). */
.ak-kat-dates-outside {
  color: #666;
  font: 700 .8rem "Barlow Condensed";
  padding: 0 4px;
}

@media ( max-width: 767.98px ) {
  .ak-kat-titlebar-ttl {
    font-size: .8rem;
  }
}

.ak-kat-bottomad ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

.ak-kat-grupe {
  color: #666;
  padding: 0 2px;
}

.ak-kat-othercats-ttl {
  color: #990000;
  padding-top: .15rem;
  padding-bottom: .15rem;
  border-top: 1.5px dashed var(--ak-accent);
  border-bottom: 1.5px dashed var(--ak-accent);
}

.ak-kat-img-wrap {
  overflow: hidden;
}

.ak-kat-img-wrap img {
  /* max-height: 85vh uklonjen, direktan zahtev - slika sad koristi punu širinu kolone (ograničenu
     samo .img-fluid-om, tj. prirodnom širinom fajla ili širinom kolone, šta je manje), umesto da
     visinski plafon od 85% visine prozora indirektno steže i širinu na uspravnim (portret)
     katalozima - potvrđeno da je to bio pravi uzrok "uska slika" utiska, ne kolona za oglas. */
  touch-action: pan-y;
}