/* ===============================
   GLOBAL VARS & RESET
==================================*/
:root{
  --pill-h:60px;
  --bd:#e9eef3;
  --muted:#6c757d;
  --pf-avatar:160px;
  --ad-main-h:520px;
}

html{ overflow-y:scroll; scrollbar-gutter:stable; }
html,body{ overflow-x:hidden; }

/* Roditelji oko menija ne smiju sjeći flyout panele */
.container, .row, [class*="col-"], .cls-catpanel,
main, header, footer, section, aside, nav {
  position:relative;
  overflow:visible !important;
}

/* ===============================
   HERO + SEARCH PILL
==================================*/
.cls-band{ background:#f8f9fa; border-bottom:1px solid #eef1f4; padding:16px 0; }

.cls-searchpill{
  display:flex; align-items:stretch; gap:.5rem; flex-wrap:nowrap;
  width:100%;
  background:#fff; border-radius:9999px; padding:.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.cls-sp__field{
  position:relative; display:flex; align-items:center; gap:.5rem;
  flex:1 1 auto; min-width:0;
  padding:0 .75rem; background:#fff; border-radius:9999px; border:1px solid transparent;
}
.cls-sp__field + .cls-sp__field{ border-left:1px solid var(--bd); }
.cls-sp__icon{ color:var(--muted); font-size:1.1rem; display:flex; align-items:center; }
.cls-sp__input,.cls-sp__select{
  width:100%; height:var(--pill-h); border:0; outline:0; background:transparent; font-size:1rem;
}
.cls-sp__btnwrap{ flex:0 0 220px; display:flex; }
.cls-searchpill .btn{ height:var(--pill-h); border-radius:9999px; font-weight:700; padding:0 22px; }

/* Search pill: bez rubova */
.cls-searchpill .cls-sp__field{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:.25rem .2rem;
}
.cls-searchpill .cls-sp__input,
.cls-searchpill .cls-sp__select{
  border:0 !important; outline:none !important; background:transparent !important; box-shadow:none !important;
}

/* Jedan red (desktop), pametno lomljenje na mobilnom */
.cls-searchpill{ flex-wrap:nowrap; }
.cls-searchpill > *{ min-width:0; }
.cls-sp__field{ flex:1 1 12rem; }
.cls-searchpill .cls-sp__field:nth-child(4),
.cls-searchpill .cls-sp__field:nth-child(5){ flex:0 0 9rem; }
.cls-sp__btnwrap{ flex:0 0 auto; align-self:stretch; display:flex; align-items:center; }
.cls-sp__btnwrap .btn{ height:42px; line-height:42px; white-space:nowrap; }

#subcats-wrap { position: relative; z-index: 0; }
.cls-searchpill .cls-sp__field[data-dyn="1"] { z-index: 2; }

@media (max-width:991.98px){
  .cls-searchpill{ flex-wrap:wrap; }
  .cls-sp__btnwrap{ order:6; width:100%; justify-content:flex-start; }
}

@media (max-width:767.98px){
  .cls-searchpill{ flex-direction:column; border-radius:18px; padding:.75rem; }
  .cls-sp__field{ border:1px solid var(--bd); border-radius:12px; }
  .cls-sp__field + .cls-sp__field{ border-left:none; }
  .cls-sp__btnwrap{ flex:0 0 auto; width:100%; }
  .cls-searchpill .btn{ width:100%; }
}

/* ===============================
   AD CARDS (old cls-adcard)
==================================*/
.cls-adcard{
  display:block; text-decoration:none; color:#212529;
  background:#fff; border:1px solid var(--bd); border-radius:12px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease; height:100%;
}
.cls-adcard:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.cls-adcard__thumb{ width:100%; height:190px; background:#f8f9fa; position:relative; }
.cls-adcard__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cls-adcard__body{ padding:10px 12px; }
.cls-adcard__title{
  font-weight:600; font-size:.95rem; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cls-adcard__price{ color:#198754; font-weight:800; margin-top:6px; }

.save-heart.is-saved i{ color:#dc3545; }
.sale-ribbon{
  position:absolute; top:10px; left:10px; z-index:5;
  background:#dc3545; color:#fff; padding:.25rem .6rem; font-weight:700; font-size:.75rem;
  transform:rotate(-6deg); box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.new-ribbon{
  position:absolute; top:10px; left:85px; z-index:5;
  background:#198754; color:#fff; padding:.25rem .6rem; font-weight:700; font-size:.75rem;
  transform:rotate(-6deg); box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* ===============================
   TABBAR
==================================*/
.tabbar{
  position:sticky; top:0; z-index:1020;
  margin-top:18px; display:flex; gap:8px; overflow:auto;
  padding:6px; border:1px solid #eef1f4; border-radius:14px;
  background:rgba(255,255,255,.8); backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.tabbar__link{ padding:10px 14px; border-radius:999px; font-weight:600; }

/* ===============================
   COMPANY HERO + FB COVER
==================================*/
.company-hero::before{ padding-top:42vh; content:""; display:block; }
.company-hero__inner{ position:absolute; bottom:-110px; display:flex; gap:18px; }
.company-hero__logo{ width:220px; height:220px; border-radius:999px; overflow:hidden; background:#fff; }
.company-hero__logo img{ width:100%; height:100%; object-fit:cover; }

/* ===============================
   AD GALLERY
==================================*/
.ad-gallery__main{ width:100%; height:500px; background:#f8f9fa; overflow:hidden; }
.ad-gallery__thumbs{ display:flex; gap:.5rem; overflow:auto; }

.ad-gallery__main{
  position:relative;
  width:100%;
  height:var(--ad-main-h);
  background:#f8f9fa;
  border-bottom:1px solid #eef1f4;
  display:grid;
  place-items:center;
  overflow:hidden;
}
#adMainImg{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  cursor:zoom-in;
}
.ad-uniform{
  width:100% !important;
  height:var(--ad-main-h) !important;
  object-fit:contain !important;
  object-position:center center !important;
  display:block !important;
  background:#f8f9fa;
}
#lbImg.ad-uniform{
  height:calc(100vh - 120px) !important;
  width:100% !important;
}

@media (min-width: 576px){ :root{ --ad-main-h:360px; } }
@media (min-width: 768px){ :root{ --ad-main-h:420px; } }
@media (min-width: 992px){ :root{ --ad-main-h:520px; } }
@media (min-width: 1200px){ :root{ --ad-main-h:560px; } }

/* ===============================
   AD CARD (modern)
==================================*/
.adcard{
  border-radius:.75rem;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 .35rem 1rem rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease;
  height:100%;
  position:relative !important;
}
.adcard:hover{
  transform:translateY(-3px);
  box-shadow:0 .65rem 1.5rem rgba(0,0,0,.10);
}
.adcard__link{ display:block; color:inherit; text-decoration:none; height:100%; }
.adcard__link:focus { outline:none; }

.adcard__thumb{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:#f8f9fa;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.adcard__thumb img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  padding:2px;
  background:#f8fafc;
  transition:none;
}
.adcard:hover .adcard__thumb img{ transform:none; }

.adcard__ribbon{
  position:absolute; top:.5rem; left:.5rem;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff; font-weight:700; font-size:.75rem;
  padding:.25rem .5rem; border-radius:.35rem;
  box-shadow:0 .25rem .5rem rgba(22,163,74,.25);
}
.adcard__pricebadge{
  position:absolute; top:.5rem; right:3rem;
  background:#1f2937; color:#fff; font-weight:700;
  font-size:.8rem; padding:.25rem .5rem; border-radius:.35rem;
  opacity:.95;
}

.adcard__body{ padding:.6rem .65rem .8rem; }
.adcard__title{
  font-size:.95rem; line-height:1.25; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.5em;
}
.adcard__meta{
  margin-top:.25rem; color:#6b7280; font-size:.8rem;
  display:flex; align-items:center; gap:.35rem;
}
.adcard__price{
  margin-top:.25rem;
  color:#16a34a; font-weight:800; font-size:.95rem;
}
.adcard__pricedate{ gap:.5rem; }
.adcard__date{ color:#6b7280; font-size:.8rem; white-space:nowrap; }

.adcard__thumb:has(.adcard__btn-save-form:hover) img,
.adcard__thumb:has(.adcard__btn-save-form:active) img,
.adcard__thumb:has(.adcard__btn-cart:hover) img,
.adcard__thumb:has(.adcard__btn-cart:active) img {
  transform:none !important;
}
.adcard__btn-save,
.adcard__btn-cart { outline:none; }
.adcard__btn-save:focus,
.adcard__btn-cart:focus {
  outline:none;
  box-shadow:0 .35rem .8rem rgba(0,0,0,.15);
}
.adcard__btn-save-form{ position:absolute; top:.5rem; right:.5rem; z-index:5; margin:0; }
.adcard__btn-save{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border:1px solid #e9ecef; border-radius:999px; background:#fff;
  box-shadow:0 .35rem .8rem rgba(0,0,0,.15);
}
.adcard__btn-save i{ width:1.1em; text-align:center; line-height:1; }
.adcard__btn-save.is-on i{ color:#dc3545; }
.adcard__btn-cart{
  position:absolute; bottom:.5rem; right:.5rem; z-index:5;
  border-radius:999px; box-shadow:0 .35rem .8rem rgba(0,0,0,.15);
}
.adcard__btn-save:active,
.adcard__btn-cart:active { transform:none; }

@media (prefers-color-scheme: dark){
  .adcard{ background:#0b0f14; border-color:rgba(255,255,255,.06); }
  .adcard__thumb{ background:#0f1720; }
  .adcard__price{ color:#22c55e; }
  .adcard__pricebadge{ background:#111827; }
}

/* Heart button clean */
.save-heart-card{
  position:absolute;
  top:8px;
  right:8px;
  z-index:50;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
  width:auto;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.save-heart-card i{
  font-size:1.9rem;
  line-height:1;
  color:#dc3545 !important;
}
.save-heart-card.is-saved i { color:#dc3545 !important; }
.save-heart,
.save-heart-card:before,
.save-heart-card:after{ display:none !important; }
.save-heart-card i.bi-heart{
  font-size:1.6rem;
  color:#fff;
  -webkit-text-stroke:2px #dc3545;
}
.save-heart-card i.bi-heart-fill{
  font-size:1.6rem;
  color:#dc3545;
}
.save-heart-card svg { display:block; }

/* ===============================
   SECTION HEADERS
==================================*/
.section-head{ margin-bottom:1rem; }
.section-head__title{
  margin:0;
  font-size:1.45rem;
  line-height:1.15;
  font-weight:800;
  color:#1f2937;
}
.section-head__sub{
  color:#6b7280;
  margin-top:.25rem;
}

/* ===============================
   MEGA KATEGORIJE (overlay)
==================================*/
.mega-cats{
  position:fixed;
  left:0;
  right:0;
  top:80px;
  bottom:0;
  z-index:2000;
  display:none;
}
.mega-cats.is-open{ display:block; }
.mega-cats__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.55);
}
.mega-cats__panel{
  position:relative;
  width:min(1100px, 100% - 2rem);
  max-height:88vh;
  margin:1.5rem auto 1.5rem;
  overflow:auto;
  background:#fff;
  border-radius:1rem;
  box-shadow:0 20px 40px rgba(15,23,42,.35);
  padding:1rem 1.25rem 1.25rem;
}
.mega-cats__header{
  padding-bottom:.5rem;
  border-bottom:1px solid #e5e7eb;
}
.mega-cats__body{
  margin-top:.75rem;
  max-height:calc(88vh - 3rem);
  overflow-y:auto;
}
.mega-cats__group{
  padding:.35rem .45rem .55rem;
  border-radius:.75rem;
  border:1px solid transparent;
  transition:border-color .15s ease, background-color .15s ease;
}
.mega-cats__group:hover{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.mega-cats__cat-link{
  font-weight:600;
  text-decoration:none;
  color:#14532d;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
.mega-cats__cat-link:hover{
  color:#16a34a;
  text-decoration:underline;
}
body.mega-open{ overflow:hidden !important; }
body.mega-open .cls-catpanel{ display:none !important; }
.mega-cats__close {
  cursor:pointer;
  font-size:1.4rem;
  border:none;
}
.mega-cats__close:hover {
  background:#f8d7da;
  color:#721c24;
}

/* Navbar */
.navbar{
  position:sticky;
  top:0;
  z-index:3000;
}
.navbar .dropdown-menu{ z-index:3100; }
.navbar, .navbar *{ overflow:visible !important; }
.navbar .dropdown-toggle.show + .dropdown-menu{ display:block; }

/* ===============================
   DODATNA PRETRAGA / CARD UI
==================================*/
.card.search-advanced {
  border:0;
  border-radius:1rem;
  background:linear-gradient(135deg,#f8f9fa 0%, #ffffff 100%);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  overflow:hidden;
  transition:all .3s ease;
}
.card.search-advanced:hover {
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  transform:translateY(-2px);
}
.card.search-advanced .card-header {
  background:#28a745;
  color:#fff;
  font-weight:600;
  letter-spacing:.5px;
  padding:.75rem 1rem;
  text-transform:uppercase;
}
.card.search-advanced .form-label {
  font-weight:500;
  color:#495057;
}
.card.search-advanced .form-select,
.card.search-advanced .form-control {
  border-radius:.75rem;
  border:1px solid #dee2e6;
  padding:.5rem .75rem;
  transition:border-color .2s;
}
.card.search-advanced .form-select:focus,
.card.search-advanced .form-control:focus {
  border-color:#28a745;
  box-shadow:0 0 0 .2rem rgba(40,167,69,.15);
}
.card.search-advanced button.btn-danger {
  background:linear-gradient(135deg,#dc3545,#c82333);
  border:none;
  border-radius:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:.5rem 1rem;
  transition:all .2s;
}
.card.search-advanced button.btn-danger:hover {
  background:linear-gradient(135deg,#c82333,#bd2130);
}

.btn-cats{
  border-width:2px;
  font-weight:700;
  letter-spacing:.02em;
  border-color:#198754;
}
.btn-cats i{ font-size:1.1rem; }

.card.-advanced{
  border:0;
  overflow:hidden;
  background:linear-gradient(135deg,#ffffff 0%, #f7fbff 100%);
  box-shadow:0 .35rem 1.2rem rgba(16,24,40,.06);
  border-radius:.75rem;
}
.card.-advanced .card-header{
  border:0;
  background:linear-gradient(135deg,#e8f5ff,#f4f8ff);
  color:#0b5ed7;
  font-weight:700;
  letter-spacing:.02em;
}
.card.-advanced .form-select,
.card.-advanced .form-control{
  border-radius:.5rem;
  border-color:#e9ecef;
}
.card.-advanced .form-select:focus,
.card.-advanced .form-control:focus{
  border-color:#86b7fe;
  box-shadow:0 0 0 .25rem rgba(13,110,253,.1);
}
.card.-advanced .btn-danger.btn-sm{
  font-weight:700;
  border-radius:.5rem;
}
#search-menu .card { margin-top:.75rem; }
#search-menu .cls-catpanel{ margin-top:.35rem; }
.card .card-header {
  background:linear-gradient(45deg,#198754,#28a745);
  color:#fff;
  font-weight:600;
  border-bottom:0;
}
.card .form-select,
.card .form-control { border-radius:.4rem; }
.card-header .btn.btn-success {
  background:linear-gradient(45deg,#198754,#28a745);
  border:none;
  box-shadow:0 .25rem .75rem rgba(25,135,84,.25);
  transition:all .2s ease;
}
.card-header .btn.btn-success:hover {
  filter:brightness(.95);
  box-shadow:0 .35rem 1rem rgba(25,135,84,.35);
}

/* ===============================
   STATUS BADGES / RIBBONS
==================================*/
.badge-status.badge-prodano {
  background-color:#6c757d !important;
  color:#fff !important;
  border:none !important;
  font-weight:700;
}
.badge-status.badge-novo {
  background-color:#198754 !important;
  color:#fff !important;
  border:none !important;
  font-weight:700;
}
.badge-status.badge-akcija {
  background-color:#ffc107 !important;
  color:#000 !important;
  border:none !important;
  font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

.adcard__thumb,
.adcard__thumbwrap{
  position:relative;
  overflow:visible;
}
.adcard__ribbon--sale{
  position:absolute !important;
  top:48px !important;
  left:-1px !important;
  padding:.25rem 3.4rem;
  background-color:#ffc107 !important;
  color:#000 !important;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.75rem;
  text-align:center;
  transform:rotate(-45deg);
  transform-origin:0 0;
  box-shadow:0 .25rem .5rem rgba(0,0,0,.25);
  z-index:25;
}
.ribbon-wrap{ position:relative; }
.adcard__badge--discount{
  display:flex;
  align-items:center;
  justify-content:center;
  width:90px;
  height:90px;
  border-radius:999px;
  background:#eab308;
  color:#111827;
  font-weight:700;
  font-size:2rem;
  box-shadow:0 4px 10px rgba(15,23,42,.35);
  border:2px solid #fff;
}

/* =========================
   Zvjezdica / lajk dugme
========================= */
.btn-star-like{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:none;
  background:transparent;
  padding:4px 8px;
  cursor:pointer;
  font-size:.9rem;
  color:#999;
  transition:color .2s ease, transform .15s ease;
}

.sortbar{
  margin-left:auto;
}

.sortbar__label{
  font-weight:700;
  color:#2f4f39;
  background:#eef6f0;
  border:1px solid #d9e8dc;
  padding:.42rem .7rem;
  border-radius:10px;
  font-size:.88rem;
}

.sortbar__select{
  min-width:240px;
  height:40px;
  border-radius:12px;
  border:1px solid #d8e2da;
  background:#fff;
  color:#1f2937;
  font-size:.92rem;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.sortbar__select:focus{
  border-color:#93b29b;
  box-shadow:0 0 0 .2rem rgba(147,178,155,.18);
}

@media (max-width: 575.98px){
  .sortbar{
    width:100%;
    justify-content:flex-start;
  }

  .sortbar__select{
    min-width:100%;
  }
}

.category-search-wrap{
  position: relative;
}

#categorySuggest{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 6px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}


body{
  background:#f5f7f4;
}

.homepage-wrap{
  position:relative;
}



/* Da meni ne bude odsječen */
.col-lg-3,
.col-lg-3 aside,
.index-side{
  overflow:visible !important;
}

/* Desna kolona – odmak od menija */
.ads-column{
  padding-left:28px;
}



/* Kartica */
.adcard{
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height:100%;
}
.adcard:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px rgba(15,23,42,.12);
  border-color:rgba(111,146,121,.22);
}
.adcard__link{
  display:block;
  color:inherit;
  text-decoration:none;
  height:100%;
}
.adcard__thumb{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(180deg,#f8fafc 0%, #eef3ef 100%);
  overflow:hidden;
}
.adcard__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:6px;
  background:#f8fafc;
  transition:transform .28s ease;
}
.adcard:hover .adcard__thumb img{
  transform:scale(1.02);
}

/* Ribboni */
.adcard__ribbon{
  position:absolute;
  top:.65rem;
  left:.65rem;
  color:#fff;
  font-weight:700;
  font-size:.74rem;
  padding:.3rem .6rem;
  border-radius:999px;
  box-shadow:0 .3rem .8rem rgba(0,0,0,.18);
  z-index:2;
}
.adcard__ribbon + .adcard__ribbon{
  left:5.3rem;
}
.adcard__ribbon--new{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}
.adcard__ribbon--sale{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}
.adcard__ribbon--sold{
  background:linear-gradient(135deg,#991b1b,#b91c1c);
}

/* Badge popusta */
.adcard__discount-badge{
  position:absolute;
  bottom:.65rem;
  left:.65rem;
  background:#fff5cc;
  color:#8a5a00;
  font-weight:800;
  font-size:.76rem;
  padding:.24rem .65rem;
  border-radius:999px;
  box-shadow:0 .3rem .7rem rgba(0,0,0,.18);
  border:1px solid rgba(245,158,11,.26);
  z-index:3;
}

/* Srce */
.adcard__btn-save-form{
  position:absolute;
  top:.65rem;
  right:.65rem;
  z-index:3;
  margin:0;
}
.adcard__btn-save{
  border-radius:999px;
  box-shadow:0 .35rem .85rem rgba(0,0,0,.14);
  background:#fff;
  border:1px solid #e9ecef;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.adcard__btn-save.is-on i{
  color:#dc3545;
}

/* Korpa */
.adcard__btn-cart{
  position:absolute;
  bottom:.65rem;
  right:.65rem;
  z-index:3;
  border-radius:999px;
  box-shadow:0 .35rem .85rem rgba(0,0,0,.15);
}

/* Tijelo kartice */
.adcard__body{
  padding:.85rem .85rem 1rem;
}
.adcard__title{
  font-size:.95rem;
  line-height:1.3;
  font-weight:700;
  color:#1f2937;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.5em;
}
.adcard__meta{
  margin-top:.38rem;
  color:#6b7280;
  font-size:.82rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}
.adcard__price{
  margin-top:.35rem;
  color:#2f7d32;
  font-weight:800;
  font-size:1rem;
}
.adcard__date{
  color:#94a3b8 !important;
  font-size:.78rem !important;
}

/* Zvjezdica */
.btn-star-like{
  border:none;
  background:#f8fafc;
  padding:5px 9px;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  cursor:pointer;
  font-size:.82rem;
  color:#eab308;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.06);
}
.btn-star-like .star-icon{
  font-size:.95rem;
  line-height:1;
}
.btn-star-like.is-liked .star-icon{
  color:#f59e0b;
}
.btn-star-like .star-count{
  font-weight:700;
  min-width:1.2rem;
  text-align:left;
  color:#555;
}

.sortbar{
  margin-left:auto;
}

.sortbar__label{
  font-weight:700;
  color:#374151;
  white-space:nowrap;
}

.sortbar__select{
  min-width:220px;
  border-radius:10px;
  border:1px solid #dbe3dc;
  box-shadow:none;
}

.sortbar__select:focus{
  border-color:#93b29b;
  box-shadow:0 0 0 .2rem rgba(147,178,155,.18);
}

@media (max-width: 575.98px){
  .sortbar{
    width:100%;
    justify-content:flex-start;
  }

  .sortbar__select{
    min-width:100%;
  }
}

@media (max-width: 991.98px){
  .ads-column{
    padding-left:12px;
  }
}

@media (max-width: 767.98px){
  .ads-column{
    padding-left:0;
  }

  .btn-cats-modern{
    border-radius:16px;
  }

  .adcard{
    border-radius:16px;
  }

  .adcard__body{
    padding:.75rem .75rem .9rem;
  }
}

.btn-cats-modern{
  background:#198754 !important;
  border-color:#157347 !important;
  color:#fff !important;
}

.btn-cats-modern:hover,
.btn-cats-modern:focus,
.btn-cats-modern:active{
  background:#157347 !important;
  border-color:#157347 !important;
  color:#fff !important;
}

.btn-cats-modern .bi,
.btn-cats-modern span,
.btn-cats-modern__icon{
  color:#fff !important;
}

.adcard__price-wrap{
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}

.adcard__old-price{
  font-size:.82rem;
  color:#8b949e;
  text-decoration:line-through;
  font-weight:600;
}

.adcard__price{
  color:#198754;
  font-weight:800;
}

.home-sponsor-section {
  margin: 0 0 24px 0;
  padding: 0;
  background: transparent;
}

.home-sponsor-section-bottom {
  margin-top: 24px;
  margin-bottom: 24px;
}

.home-sponsor-banner {
  display: block;
  width: 100%;
  border-radius: 25px;
  overflow: hidden;
  background: transparent;
  border: 0;
  box-shadow: none;
  line-height: 0;
}

.home-sponsor-banner img {
  display: block;
  width: 100%;
  height: auto;
}


/* Sprječava pomjeranje stranice kad se pojavi/nestane scrollbar */
html {
  overflow-y: scroll;
}

/* Moderniji browseri dodatno stabilizuju širinu */


/* Slike da ne prave nagli skok */
img {
  max-width: 100%;
}

/* Linkovi/tabovi bez neugodnog treperenja */
a,
button {
  -webkit-tap-highlight-color: transparent;
}



html {
  overflow-y: scroll;
}



/* Sprječava skakanje zbog scrollbara */
html {
  overflow-y: scroll;
}



/* Slike ne prave nagli skok */
img {
  max-width: 100%;
}

/* Kartice zadržavaju visinu dok se slike učitavaju */
.adcard__thumb {
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}

.adcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kada korisnik tek dođe poslije logovanja na index.php,
   ugasi animacije/tranzicije da ne bljesne ekran */
body.just-logged-in *,
body.just-logged-in *::before,
body.just-logged-in *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/* Stabilizacija stranice da se ne pomjera zbog scrollbara */
html {
  overflow-y: scroll;
}



/* Stabilizacija slika na karticama */
.adcard__thumb {
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}

.adcard__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stabilizacija globalnog search bara */
.global-search-bar {
  min-height: 82px;
}

/* Stabilizacija glavnog menija */
.navbar {
  min-height: 64px;
}

/* Footer uvijek na dnu stranice */
html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Sav sadržaj prije footera zauzima prostor */
body > .site-footer {
  margin-top: auto !important;
}

/* FINAL FIX: stabilne slike na karticama oglasa */
.adcard__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adcard__thumb img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 6px;
  background: #f8fafc;
  transition: none !important;
  transform: none !important;
}

.adcard:hover .adcard__thumb img {
  transform: none !important;
}

.pagination-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:50px;
}

/* ===============================
   SEARCH BAR – BLAGA CRVENA TEMA
   Dodati na kraj style.css
==================================*/

/* Pozadina oko search bara */
.cls-band{
  background:#fff6f6 !important;
  border-bottom:1px solid #f0dddd !important;
}

/* Glavni search pill */
.cls-searchpill{
  background:#ffffff !important;
  border:1px solid #ecd2d2 !important;
  box-shadow:0 10px 28px rgba(150, 70, 70, .10) !important;
}

/* Polja unutar searcha */
.cls-sp__field{
  background:#fffafa !important;
}

/* Linije između polja */
.cls-sp__field + .cls-sp__field{
  border-left:1px solid #efdada !important;
}

/* Ikonice u searchu */
.cls-sp__icon{
  color:#9d5a5a !important;
}

/* Input i select tekst */
.cls-sp__input,
.cls-sp__select{
  color:#333 !important;
}

.cls-sp__input::placeholder{
  color:#9b8a8a !important;
}

/* Dugme PRETRAŽI */
.cls-searchpill .btn{
  background:#b86b6b !important;
  border-color:#b86b6b !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* Hover dugmeta */
.cls-searchpill .btn:hover{
  background:#a45d5d !important;
  border-color:#a45d5d !important;
  color:#fff !important;
}

/* Fokus na poljima */
.cls-sp__input:focus,
.cls-sp__select:focus{
  color:#222 !important;
}

/* Mobilna verzija – okvir oko svakog polja */
@media (max-width:767.98px){
  .cls-sp__field{
    border:1px solid #efdada !important;
    background:#fffafa !important;
  }
}

/* ==================================================
   MOBILNI KATEGORIJE MENI – OBIČNA LISTA
   Desktop ostaje isti, ovo važi samo za telefon/tablet
================================================== */

@media (max-width: 991.98px){

  .btn-cats-modern{
    width:100% !important;
  }

  .btn-cats-modern .bi-chevron-right{
    transition:transform .18s ease;
  }

  .btn-cats-modern.is-open .bi-chevron-right{
    transform:rotate(90deg);
  }

  /* Flyout se na mobilnom sakrije dok se ne klikne KATEGORIJE */
  #flyoutMenu{
    display:none !important;
    position:static !important;
    width:100% !important;
    margin-top:8px !important;
    z-index:10 !important;
  }

  #flyoutMenu.is-mobile-open{
    display:block !important;
  }

  /* Svi paneli postaju obični blokovi, ne flyout */
  #flyoutMenu .flyout-panel{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin:0 0 10px 0 !important;
    border-radius:14px !important;
    box-shadow:0 8px 20px rgba(0,0,0,.08) !important;
    overflow:hidden !important;
  }

  /* Na mobilnom ne prikazujemo 2. i 3. panel odmah */
  #flyoutMenu .flyout-panel--lvl2,
  #flyoutMenu .flyout-panel--lvl3{
    display:none !important;
  }

  /* Prvi nivo je lista kategorija */
  #flyoutMenu .flyout-panel--lvl1{
    display:block !important;
    background:#fff !important;
    border:1px solid #e5e7eb !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-title{
    background:#f8f9fa !important;
    color:#111827 !important;
    padding:12px 14px !important;
    border-bottom:1px solid #e5e7eb !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-list{
    display:block !important;
    max-height:none !important;
    overflow:visible !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    color:#1f2937 !important;
    background:#fff !important;
    padding:13px 14px !important;
    border-bottom:1px solid #eef1f4 !important;
    text-decoration:none !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item:hover,
  #flyoutMenu .flyout-panel--lvl1 .flyout-item:focus{
    background:#fff1f1 !important;
    color:#dc3545 !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item.is-active{
    background:#ffe4e6 !important;
    color:#c82333 !important;
    font-weight:700 !important;
  }
}

/* ==================================================
   MOBILNI KATEGORIJE MENI – PODKATEGORIJE KAO LISTA
================================================== */

@media (max-width: 991.98px){

  #flyoutMenu.is-mobile-open{
    display:block !important;
  }

  #flyoutMenu .flyout-panel--lvl2,
  #flyoutMenu .flyout-panel--lvl3{
    display:none !important;
  }

  #flyoutMenu .flyout-panel--lvl2.is-open,
  #flyoutMenu .flyout-panel--lvl3.is-open{
    display:block !important;
  }

  #flyoutMenu .flyout-group{
    display:none !important;
  }

  #flyoutMenu .flyout-group.is-visible{
    display:block !important;
  }

  #flyoutMenu .flyout-panel--lvl2,
  #flyoutMenu .flyout-panel--lvl3{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin-top:8px !important;
    border-radius:14px !important;
    box-shadow:0 8px 18px rgba(0,0,0,.08) !important;
  }

  #flyoutMenu .flyout-panel--lvl2 .flyout-title{
    background:#fff1f1 !important;
    color:#b02a37 !important;
  }

  #flyoutMenu .flyout-panel--lvl3 .flyout-title{
    background:#f8f9fa !important;
    color:#111827 !important;
  }

  #flyoutMenu .flyout-sub-block.is-open .flyout-subchildren{
    display:block !important;
  }
}

/* ==================================================
   MOBILNI MENI – PRIKAŽI SAMO IZABRANU KATEGORIJU
================================================== */

@media (max-width: 991.98px){

  #flyoutMenu.mobile-drill-active .flyout-panel--lvl1 .flyout-item{
    display:none !important;
  }

  #flyoutMenu.mobile-drill-active .flyout-panel--lvl1 .flyout-item.is-mobile-selected{
    display:flex !important;
    background:#ffe4e6 !important;
    color:#c82333 !important;
    font-weight:800 !important;
  }

  #flyoutMenu.mobile-drill-active .flyout-panel--lvl1 .flyout-title{
    display:none !important;
  }

  #flyoutMenu .mobile-menu-back{
    display:none;
  }

  #flyoutMenu.mobile-drill-active .mobile-menu-back{
    display:flex !important;
    align-items:center;
    gap:8px;
    width:100%;
    border:0;
    background:#f8f9fa;
    color:#333;
    padding:12px 14px;
    font-weight:800;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
  }

  #flyoutMenu.mobile-drill-active .mobile-menu-back:hover{
    background:#fff1f1;
    color:#c82333;
  }

  #flyoutMenu.mobile-drill-active #flyoutPanel2{
    margin-top:8px !important;
  }

  #flyoutMenu.mobile-drill-active #flyoutPanel2 .flyout-title{
    background:#fff1f1 !important;
    color:#c82333 !important;
    font-weight:800 !important;
  }
}

/* ==================================================
   KATEGORIJE MENI – USKLAĐEN SA CRVENIM SEARCH BAROM
================================================== */

/* Dugme KATEGORIJE */
.btn-cats-modern{
  background:#dc3545 !important;
  border-color:#c82333 !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(220,53,69,.18) !important;
}

.btn-cats-modern:hover,
.btn-cats-modern:focus,
.btn-cats-modern.is-open{
  background:#c82333 !important;
  border-color:#b02a37 !important;
  color:#fff !important;
}

.btn-cats-modern__icon{
  background:rgba(255,255,255,.18) !important;
  color:#fff !important;
}

/* Mobilni meni kao lista */
@media (max-width: 991.98px){

  #flyoutMenu .flyout-panel--lvl1{
    background:#fff !important;
    border:1px solid #f0d0d3 !important;
    box-shadow:0 10px 24px rgba(220,53,69,.10) !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-title{
    background:#fff !important;
    color:#222 !important;
    border-bottom:1px solid #f0d0d3 !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item{
    background:#fff !important;
    color:#222 !important;
    border-bottom:1px solid #f3e1e3 !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item:hover,
  #flyoutMenu .flyout-panel--lvl1 .flyout-item:focus{
    background:#fff1f2 !important;
    color:#dc3545 !important;
  }

  #flyoutMenu .flyout-panel--lvl1 .flyout-item.is-active,
  #flyoutMenu .flyout-panel--lvl1 .flyout-item.is-mobile-selected{
    background:#ffe4e6 !important;
    color:#c82333 !important;
    font-weight:800 !important;
  }

  #flyoutMenu .mobile-menu-back{
    background:#fff !important;
    color:#c82333 !important;
    border-bottom:1px solid #f0d0d3 !important;
  }

  #flyoutMenu .mobile-menu-back:hover{
    background:#fff1f2 !important;
    color:#b02a37 !important;
  }

  #flyoutMenu .flyout-panel--lvl2,
  #flyoutMenu .flyout-panel--lvl3{
    background:#fff !important;
    border:1px solid #f0d0d3 !important;
    box-shadow:0 8px 20px rgba(220,53,69,.08) !important;
  }

  #flyoutMenu .flyout-panel--lvl2 .flyout-title,
  #flyoutMenu .flyout-panel--lvl3 .flyout-title{
    background:#fff1f2 !important;
    color:#c82333 !important;
    border-bottom:1px solid #f0d0d3 !important;
  }

  #flyoutMenu .flyout-panel--lvl2 .flyout-item,
  #flyoutMenu .flyout-panel--lvl3 .flyout-item{
    background:#fff !important;
    color:#222 !important;
    border-bottom:1px solid #f3e1e3 !important;
  }

  #flyoutMenu .flyout-panel--lvl2 .flyout-item:hover,
  #flyoutMenu .flyout-panel--lvl3 .flyout-item:hover{
    background:#fff1f2 !important;
    color:#dc3545 !important;
  }

  #flyoutMenu .flyout-panel--lvl2 .flyout-item.is-active,
  #flyoutMenu .flyout-panel--lvl3 .flyout-item.is-active{
    background:#ffe4e6 !important;
    color:#c82333 !important;
    font-weight:800 !important;
  }
}

.ads-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(185px, 1fr));
  gap:16px;
}

.ads-grid > .col-12{
  grid-column:1 / -1;
}

@media (min-width: 1600px){
  .ads-grid{
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
  }
}

@media (min-width: 1900px){
  .ads-grid{
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (max-width: 575.98px){
  .ads-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .adcard__title{
    font-size:.82rem;
  }

  .adcard__price{
    font-size:.9rem;
  }

  .adcard__body{
    padding:.62rem;
  }
}

.homepage-wrap{
  max-width:1540px;
  margin-left:auto;
  margin-right:auto;
}

.adcard{
  position:relative;
  transition:box-shadow .35s ease;
}

.adcard::before,
.adcard::after{
  content:"";
  position:absolute;
  pointer-events:none;
  transition:.35s ease;
}

.adcard::before{
  top:0;
  left:0;
  width:0;
  height:2px;
  background:#991b1b;
}

.adcard::after{
  right:0;
  bottom:0;
  width:0;
  height:2px;
  background:#991b1b;
}

.adcard:hover::before,
.adcard:hover::after{
  width:100%;
}

.adcard:hover{
  box-shadow:0 14px 30px rgba(15,23,42,.13);
}

/* =========================================================
   FINALNA STABILIZACIJA LAYOUTA
   Jedan scrollbar-gutter samo na HTML elementu.
   Nema rezervisanja dodatnog prostora sa lijeve strane.
   ========================================================= */
html{
  overflow-y:scroll !important;
  scrollbar-gutter:stable !important;
}

body{
  margin:0 !important;
  overflow-x:hidden !important;
  scrollbar-gutter:auto !important;
}

/* Isti glavni koordinatni sistem za index/search/detail. */
.homepage-wrap,
.search-results-wrap,
.ad-detail-page{
  width:100%;
  max-width:1540px;
  margin-left:auto;
  margin-right:auto;
}

/* =========================================================
   AGROPRODAJA - KOMPAKTNI MOBILNI SEARCH
   Dodaj OVAJ CSS na kraj postojećeg <style> bloka u header.php.
   Desktop ostaje nepromijenjen.
   ========================================================= */

@media (max-width: 575.98px){

  .global-search-modern{
    padding:6px 0 !important;
  }

  .global-search-inner{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .global-search-card{
    padding:9px !important;
    border-radius:18px !important;
  }

  /* 1. red: pretraga preko cijele širine
     2. red: lokacija + Traži */
  .global-search-form{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 108px !important;
    gap:8px !important;
    align-items:stretch !important;
  }

  .global-search-field-main{
    grid-column:1 / -1 !important;
  }

  .global-search-field:not(.global-search-field-main){
    grid-column:1 !important;
    min-width:0 !important;
  }

  .global-search-submit{
    grid-column:2 !important;
    min-width:0 !important;
  }

  .global-search-input,
  .global-search-submit button{
    min-height:44px !important;
    height:44px !important;
    border-radius:13px !important;
  }

  .global-search-input{
    padding:0 12px !important;
    gap:8px !important;
  }

  .global-search-input i{
    font-size:1rem !important;
  }

  .global-search-input input,
  .global-search-input select{
    min-height:44px !important;
    height:44px !important;
    font-size:.92rem !important;
    font-weight:700 !important;
    min-width:0 !important;
  }

  .global-search-submit button{
    padding:0 11px !important;
    font-size:.93rem !important;
    gap:6px !important;
  }

  .global-search-submit button i{
    font-size:.95rem !important;
  }
}

/* Još uži telefoni */
@media (max-width: 390px){

  .global-search-inner{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .global-search-form{
    grid-template-columns:minmax(0, 1fr) 96px !important;
    gap:7px !important;
  }

  .global-search-input{
    padding-left:10px !important;
    padding-right:9px !important;
  }

  .global-search-input input,
  .global-search-input select{
    font-size:.87rem !important;
  }

  .global-search-submit button{
    padding:0 8px !important;
    font-size:.88rem !important;
  }
}