.main-content{
        border-left: 1px solid #e6e6e6;
    }
    .div-slika{
        padding: 5px 5px 10px;
        position: relative;
    }
    .div-slika>img{
        max-height: 200px;
        margin: auto;
        display: block;
    }
    @media (max-width: 425px) {
        .div-slika>img{
            max-height: 150px;
            margin: auto;
            display: block;
        }
    }
    .kategorija-naziv{
        font-size: 1.5em;
        text-transform: uppercase;
    }
    .vkupno-proizvodi{
        color: #aaa;
        border-radius: 0.9em;
        padding: 0px 15px;
        margin-left: 1.5rem;
        border: 1px solid #d0d0d0;
        text-align: center;
        display: flex;
        align-items: center;
        height: fit-content;
        margin-top: auto;
        margin-bottom: auto;
    }
    .filter-atribut-naziv{
        text-transform: uppercase;
        font-size: 0.9em;
    }
    .filter-plus{
        color: #8a8a8a;
    }
    .reset-filtri,
    .filter-atribut{
        cursor: pointer;
    }
    .filter-vrednosti{
        /* display: none; */
    }
    .reset-filtri{
        font-size: 0.9em;
        text-align: center;
        color: #e30040;
    }
    #amount{
        font-size: 0.9em;
        color: #6d6d6d;
    }
    .input-boja{
        position: absolute !important;
        opacity: .01; 
        margin-left: 0;
    }
    .label-atribut-boja{
        width: 1.8em;
        height: 1.8em;
        border: 1px solid #d0d0d0;
        border-radius: 1.5em;
    }
    .label-atribut-boja:hover{
        border: 1px solid #e30040;

    }
    label.form-check-label-atribut{
        font-size: 0.9em;
        padding-left: 0.8em;
    }
    label.form-check-label-atribut:before {
        content: '';
        width: 1.5em;
        height: 1.5em;
        background: #f5f5f5;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }   
    .form-check-input-atribut:checked+label.form-check-label-atribut:after{
        position: absolute;
        content: '';
        border-radius: 20%;
        width: 0.5em;
        height: 0.5em;
        top: 50%;
        -webkit-transform: translate(-2%,-50%);
        -ms-transform: translate(-2%,-50%);
        transform: translate(-2%,-50%);
        left: 0.55em;
        background: #e30040;
    }
    .form-check-input-atribut:checked+label.form-check-label-atribut::before {
        border: 1px solid #e30040;
    }
    label.form-check-label-golemina:hover::before,
    label.form-check-label-atribut:hover::before {
        border: 1px solid #e30040;
    }
    .form-check-input-golemina{
        position: absolute !important;
        opacity: 0.01;
    }
    label.form-check-label-golemina{
        color: #8a8a8a;
        text-align: center;
        font-size: 0.9em;
        padding: 0.5em;
        width: 3em;
    }
    label.form-check-label-golemina:before {
        content: '';
        width: 3em;
        height: 2.8em;
        background: #f5f5f5;
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        z-index: -1;
        border-radius: 0.5em;
    }
    .form-check-input-golemina:checked+label.form-check-label-golemina::before {
        border: 1px solid #e30040;
    }
    .form-check-inline{
        margin-right: 0.75em;
        margin-bottom: 0.75em;
    }
    .select-border{
        font-size: 0.8em;
        color: #969696; 
        padding: 0 0.5em;
    }
    .select-border option {
        background-color: #fff;
        border: 1px solid #e6e6e6;
        border-bottom-left-radius: 1em;
        border-bottom-right-radius: 1em;

    }
    .span-pozicija{
        position: absolute;
        top: 2em;
        right: -0.1em;
        color: #fff;
        font-size: 0.7em;   
    }
    .span-zapisi-paginacija{
        font-size: 0.9em;
        color: #969696;
        padding-left: 1em;
        padding-right: 1em; 
        margin: auto;  
    }
    .pozicija-bestseller{
        position: absolute;
        bottom: 0;
        background-color: #FF9CAD;
        color: #FFFFFF;
        width: 100%;
        text-align: center;
    }
    

/* STYLING FOR THE NEW LOOK */

.listing-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0 18px;
  border-bottom:1px solid #eee;
  margin-bottom:16px;
}
.listing-title{ display:flex; align-items:center; gap:10px; }
.kategorija-naziv{
  font-size:20px;
  font-weight:600;
  letter-spacing:.2px;
  text-transform:none;
}
.vkupno-proizvodi{
  color:#666;
  border:1px solid #e6e6e6;
  background:#fff;
  border-radius:999px;
  padding:4px 10px;
  margin-left:0;
  font-size:13px;
}
.listing-actions{ display:flex; gap:10px; }
.btn-pill{
  appearance:none;
  border:1px solid #ddd;
  background:#fff;
  color:#111;
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
}
.btn-pill:hover{ border-color:#bbb; }


/* Sidebar styling */

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:1040;
}
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(420px, 92vw);
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  transform:translateX(105%);
  transition:transform .25s ease;
  z-index:1050;
  display:flex;
  flex-direction:column;
}
.drawer.is-open{ transform:translateX(0); }
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

.drawer-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid #eee;
}
.drawer-title{ font-size:16px; font-weight:600; }
.drawer-close{
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid #eee;
  background:#fff;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.drawer-body{
  padding:14px 16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.drawer-footer{
  padding:12px 16px;
  border-top:1px solid #eee;
}
.btn-ghost{
  width:100%;
  border:1px solid #ddd;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
}

.drawer-section{ margin-bottom:14px; }
.drawer-label{ display:block; font-size:12px; color:#666; margin-bottom:6px; }
.select-modern{
  width:100%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  font-size:14px;
  color:#111;
}

.product-grid{ row-gap:30px; }
.product-grid > [class*="col-"]{ padding-left:15px; padding-right:15px; }

.fav-card-link{ text-decoration:none; color:inherit; display:block; }
.fav-card-img{
  width:100%;
  aspect-ratio:255/357;
  object-fit:cover;
  object-position:center;
  display:block;
}
.fav-card-name{ margin-top:.5rem; color:#6d6d6d; font-size:.95em; }
.fav-card-price{ font-weight:600; color:#202020; }

.badge-pill{
  position:absolute;
  top:12px;
  left:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  backdrop-filter: blur(6px);
}
.badge-pill--right{ left:auto; right:12px; }
.badge-pill--danger{ color:#e30040; }
.badge-pill--info{ color:#0b66ff; }
.badge-pill--muted{ color:#666; }

.badge-bar{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:8px 10px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(255,156,173,.92);
  color:#fff;
}

.fav-card{
  display:flex;
  flex-direction:column;
  height:100%;
  overflow: hidden;
}

.fav-card-link{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  text-decoration:none;
  color:inherit;
  /*background: #f3f3f3;*/
}

.fav-card-img{
  width:100%;
  aspect-ratio:255/357;
  object-fit:cover;
  object-position:center;
  display:block;
  transform: scale(1.06);                      /* crops more */
  transform-origin: center;
}

.fav-card-name{
  margin-top:1.5rem;
  color:#6d6d6d;
  font-size:.95em;

  /* fixed 2-line block */
  line-height:1.25;
  height:2.5em;              /* 2 lines */
  overflow:hidden;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.fav-card-bottom{            /* your price+cart row */
  margin-top:auto;           /* pushes it to the bottom consistently */
  min-height:34px;           /* keep a stable row height */
}
.fav-card-link,
.fav-card-link:hover,
.fav-card-link:focus,
.fav-card-link:active{
  text-decoration: none !important;
  color: inherit;
}

.fav-cart-btn{
  position:absolute;
  top:8px; right:8px;
  width:34px; height:34px;
  border:1px solid rgba(208,208,208,.9);
  background: rgba(255,255,255,.95);   /* always visible */
  backdrop-filter: blur(2px);          /* optional, looks nice */
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  z-index:5;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.fav-cart-btn:hover{
  transform: scale(1.07);
  background: rgba(255,255,255,1);     /* stays white (not transparent) */
  border-color:#e30040;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}
.fav-cart-btn:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(227,0,64,.15), 0 4px 14px rgba(0,0,0,.24);
}

/* Drawer base polish */
/* overlay */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index:1040;
}

/* panel */
.drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(460px, 92vw);
  background:#fff;
  border-left:1px solid #eee;
  box-shadow:-2px 0 12px rgba(0,0,0,.15);

  transform: translate3d(100%,0,0);
  will-change: transform;
  transition: transform .25s ease;
  z-index:1050;

  display:flex;
  flex-direction:column;
}

/* open state */
.drawer.is-open{
  transform: translate3d(0,0,0);
}

.drawer-overlay.is-open{
  opacity:1;
  visibility:visible;
}

/* prevent scroll */
body.drawer-open{ overflow:hidden; }
.drawer-header{
  padding:18px 18px;
  border-bottom:0;
}
.drawer-title{
  font-size:18px;
  font-weight:700;
}
.drawer-close{
  border:none;
  background:transparent;
  width:40px;
  height:40px;
  border-radius:999px;
}
.drawer-close:hover{ background:#f3f3f3; }

.drawer-body{ padding:0 18px 18px; }
.drawer-footer{
  padding:14px 18px 18px;
  border-top:0;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);
}

/* Footer button like screenshot */
.btn-ghost{
  border:1px solid #ddd;
  border-radius:999px;
  padding:12px 14px;
  font-weight:500;
}
.btn-ghost:hover{ border-color:#bbb; }

/* Section rows (your .filter-atribut) */
.drawer-body .filter-atribut{
  margin:0;
  padding:18px 0;
  border-bottom:1px solid #eee;
  align-items:center;
}
.drawer-body .filter-atribut-naziv{
  font-size:14px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#111;
}

/* Replace plus/minus feel with chevron */
.drawer-body .filter-plus{
  color:#111;
  font-size:14px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.drawer-body .filter-plus i.fa-plus:before{ content:"\f078"; }  /* fa-chevron-down */
.drawer-body .filter-plus i.fa-minus:before{ content:"\f077"; } /* fa-chevron-up */

/* Panel spacing */
.drawer-body .filter-vrednosti{
  display:grid !important;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease, opacity 160ms ease, transform 220ms ease;
  opacity:0;
  transform: translate3d(0,-4px,0);
  padding:0 !important;
}

.drawer-body .filter-vrednosti > *{
  overflow:hidden; /* important for 0fr collapse */
}

.drawer-body .filter-vrednosti.is-open{
  grid-template-rows: 1fr;
  opacity:1;
  transform: translate3d(0,0,0);
  padding:10px 0 18px !important;
}

/* Checkbox list: cleaner */
.drawer-body .form-check{
  padding-left:0;
  margin:10px 0;
}
.drawer-body .form-check-input-atribut{ display:none; }

.drawer-body label.form-check-label-atribut{
  position:relative;
  padding-left:34px;
  color:#222;
  font-size:14px;
  line-height:20px;
  cursor:pointer;
}
.drawer-body label.form-check-label-atribut:before{
  content:'';
  width:20px;
  height:20px;
  border-radius:6px;
  background:#fff;
  border:1px solid #d7d7d7;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.drawer-body .form-check-input-atribut:checked + label.form-check-label-atribut:before{
  border-color:#111;
  background:#111;
}
.drawer-body .form-check-input-atribut:checked + label.form-check-label-atribut:after{
  content:'';
  position:absolute;
  left:7px;
  top:50%;
  width:6px;
  height:10px;
  border:2px solid #fff;
  border-top:0;
  border-left:0;
  transform:translateY(-50%) rotate(45deg);
}

/* Size "pills" (your .form-check-inline with golemina) */
.drawer-body .form-check-inline{
  margin:0 10px 10px 0;
}
.drawer-body .form-check-input-golemina{ display:none; }

.drawer-body label.form-check-label-golemina{
  width:auto;
  min-width:52px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #d7d7d7;
  background:#fff;
  color:#111;
  font-size:13px;
  text-align:center;
}
.drawer-body label.form-check-label-golemina:before{ display:none; }

.drawer-body .form-check-input-golemina:checked + label.form-check-label-golemina{
  border-color:#111;
  background:#111;
  color:#fff;
}

/* Color dots: slightly bigger + selected ring */
.drawer-body .label-atribut-boja{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #ddd;
}
.drawer-body .label-atribut-boja:hover{ border-color:#111; }

/* Reset button like screenshot */
.drawer-body .reset-filtri{
  margin:16px 0 0;
  padding:12px 0;
  border-top: 0 !important;
  color:#e30040;
  font-weight:600;
}

/* jQuery UI slider (modern) */
#slider-range{
  margin: 10px 0 6px;
  height: 4px;
  border: 0;
  background: #e9e9e9;
  border-radius: 999px;
}
#slider-range .ui-slider-range{
  background: #111;
  border-radius: 999px;
}
#slider-range .ui-slider-handle{
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #111;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  cursor: grab;
}
#slider-range .ui-slider-handle:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.12);
}
#slider-range .ui-slider-handle:active{ cursor: grabbing; }

/* amount text nicer */
#amount{
  font-size: 13px;
  color: #222;
  font-weight: 600;
  margin: 6px 0 10px;
}

.sort-list{ padding: 6px 0; }

.sort-option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  cursor:pointer;
  user-select:none;
}

.sort-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.sort-circle{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid #222;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 18px;
}

.sort-option input:checked + .sort-circle::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#222;
}

.sort-text{
  font-size:14px;
  color:#111;
}

@media (max-width: 575px){
  .btn-pill{ width:100%; max-width:320px; }
}
#loadMoreWrap{
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
}
#loadMoreWrap .col-12{
  padding-left:0 !important;
  padding-right:0 !important;
}
#loadMoreBtn{
  margin-left:auto !important;
  margin-right:auto !important;
  display:block !important;
}

.fav-like-btn{
  position:absolute;
  right:10px;
  bottom:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(208,208,208,.9);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:6;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.fav-like-btn:hover{
  transform: scale(1.07);
  background: rgba(255,255,255,1);
  border-color:#e30040;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}

.fav-like-btn:focus{
  outline:0;
  box-shadow:0 0 0 .2rem rgba(227,0,64,.15), 0 4px 14px rgba(0,0,0,.24);
}

.fav-card-slider{ position:relative; }
.fav-card-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:999px;
  border:0; background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  display:grid; place-items:center;
  font-size:22px; line-height:1; cursor:pointer;
  opacity:0; transition:opacity .15s ease;
  padding: 0;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.fav-card-arrow span{
  display:block;
  line-height:1;
  transform: translateY(-2px);
}

.fav-prev{ left:8px; }
.fav-next{ right:8px; }
.fav-card:hover .fav-card-arrow{ opacity:1; }
@media (max-width: 768px){
  .fav-card-arrow{ opacity:1; }
}

/* Mobile overflow fix (category products page only) */
@media (max-width: 767px){
  #form-filtri{
    margin-left: 0 !important;
    width: 100%;
  }

  #form-filtri > .col-md-12{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #form-filtri .listing-toolbar{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
  }

  #form-filtri .product-grid{
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  #form-filtri .product-grid > [class*="col-"]{
    padding-left: 6px;
    padding-right: 6px;
  }
}