.add_to_cart_inline{
    display:none;
}

.navbar-brand{
    width:220px
}

    .offcanvas-body {
      position: relative;
      overflow: hidden;
    }

    .menu {
      position: absolute;
      top: 2.5rem;
      left: 100%;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      background: #fff;
      transition: left .3s ease;
    }
    .menu.active {
      left: 0;
    }

    .menu li a {
      display: block;
      padding: 10px 15px;
      color: #000;
      text-decoration: none;
      border-bottom: 1px solid #eee;
    }
    .has-submenu > a::after {
      content: "\f054";
      font-family: 'Font Awesome 5 Free';
      float: right;
      font-weight: bold;
    }

    .back-btn {
      position: absolute;
      top: 0.75rem;
      left: 0.75rem;
      font-size: 0.9rem;
      background: none;
      border: none;
      text-decoration: underline;
      padding: 0;
      z-index: 10;
    }


/* ===== Mega-menu ===== */
@media (min-width: 992px) {

  
  .navbar .mega-menu { position: static; }

  .mega-menu > .dropdown-menu {
    position: absolute;
    left: 0; right: 0;
    width: 100%; min-width: 0;
    margin-top: .5rem;
    background: var(--bs-dropdown-bg,#fff);
    border-radius: .375rem;
    box-shadow: 0 0 2rem rgb(0 0 0 / .08);

    padding: 2rem calc((100% - 960px)/2);    

    @media (min-width: 1200px) {
      padding-left: calc((100% - 1140px)/2);
      padding-right: calc((100% - 1140px)/2);
    }

    @media (min-width: 1400px) {
      padding-left: calc((100% - 1320px)/2);
      padding-right: calc((100% - 1320px)/2);
    }

    column-count: 4;
    column-gap: 2.5rem;

  }

  .mega-menu > .dropdown-menu > li {
    break-inside: avoid-column;
    width: 100%;
  }

  .mega-menu > .dropdown-menu > li > .dropdown-toggle {
    font-weight: 300;
    text-transform: uppercase;
    color: #000!important;  
    margin: 1rem  0 .5rem;
    padding: 0;
    font-size:16px;
  }
  .mega-menu > .dropdown-menu > li > .dropdown-toggle::after { display: none; }

  .mega-menu .dropdown-menu .dropdown-menu {
    position: static !important;       
    display: block !important;
    margin: 0; padding: 0; border: 0; box-shadow: none;
  }
  .mega-menu .dropdown-menu .dropdown-item {
    font-size: .925rem;
    font-weight: 500;
    white-space: normal;
    padding: .25rem 0;
  }
  .mega-menu .dropdown-menu .dropdown-item:hover {
    text-decoration: underline;
  }
}

@media (min-width: 992px) {
  .mega-menu > .dropdown-menu > li.menu-item-has-children > .dropdown-toggle {
    font-weight: 600;
    text-transform: uppercase;
    padding-right: 1.25rem;
    position: relative;
  }

  .mega-menu > .dropdown-menu > li.menu-item-has-children > .dropdown-toggle::after {
    content: "›";
    position: absolute; top: 0; right: 0;
    font-weight: 900;
    transform: translateY(2px);
  }

  .mega-menu > .dropdown-menu > li:not(.menu-item-has-children) > a {
    font-weight: 500;
    color: var(--bs-body-color);
    display: inline-block;
    margin-bottom: .15rem;
    transition: color .2s ease;
  }
  .mega-menu > .dropdown-menu > li:not(.menu-item-has-children) > a:hover {
    color: var(--bs-primary, #d1007d);
  }

  .mega-menu .dropdown-menu .dropdown-item {
    font-size: 15px;
    line-height: 1.6;
    padding: .2rem 0;
  }
  .mega-menu .dropdown-menu .dropdown-item:hover {
    text-decoration: underline;
  }
}

.dropdown-item {
  padding-left:0px!important;
  transition: all 0.5s!important
}


.dropdown-item:hover {
  background:none!important;
  color:#000!important;
  padding-left:10px!important
}

.dropdown-menu{
  border:none!important;
  border-radius:0!important;
  top:80px!important
}

@media (min-width: 992px) {
  .mega-menu > .dropdown-menu > li > a.dropdown-item {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 16px;
    margin: 1rem 0 .5rem;
    padding: 0;
    color: #000 !important;
    display: inline-block;
  }

  .mega-menu > .dropdown-menu > li > a.dropdown-item:hover {
    text-decoration: none;
    color: var(--bs-primary, #d1007d) !important;
  }
}

.dropdown-item.active.dropdown-toggle{
  background:none;
}

.dropdown-item.active{
  background:none!important;
  color:#000!important
}


@media screen and (min-width: 100px) and (max-width: 768px) {
  .navbar-brand{
    width:160px
}

.row {
    --bs-gutter-x: 0px!important;
}


.hero-product-section .row {
    --bs-gutter-y: 10px!important;
    --bs-gutter-x: 10px!important;
}

}

.hero-product-section{
  background: #ff7a38;
background: radial-gradient(circle,rgba(255, 122, 56, 1) 0%, rgba(232, 77, 0, 1) 100%);
}

.hero-product-section h1{
  color:#FFF;
  line-height:1.2
}

.hero-product-section .text-danger .woocommerce-Price-amount.amount{
  color:#000;
  font-weight:900
}

.hero-product-section .add_to_cart_button{
  background:#000;
  color:#fff;
}

.hero-product-section .price{
  margin-bottom:30px;
  border-bottom:solid 1px #ffffff50;
  padding-bottom:30px
}

.hero-product-section .pogledajte-jos {
  font-size:17px;
  color:#fff;
  font-weight:bold
}

.slika-preporuceno img{
  height:155px!important;
  object-fit:cover;
  border-radius:10px;
  mix-blend-mode:multiply;
}

.brendovi img{
  padding:10px;
  width:150px;
  aspect-ratio:1/1;
  border-radius:50%;
  min-height:150px;
  border:solid 3px #e6e6e6;
}

.svijetla{
  background:#f5f9e9
}

.proizvodi .card{
  padding:15px;
  border:solid #f5f9e9 1px!important
}

.proizvodi img{
  height:200px;
  object-fit:contain;
}

.proizvodi .woocommerce-Price-amount.amount{
  font-size:15px!important
}

.proizvodi .card-body{
  padding:0
}

.proizvodi .card-footer{
  padding:0
}

.proizvodi .add_to_cart_button{
  background:#f16923;
  border:none;
  color:#fff;
  font-size:20px;
}

.proizvodi .btn-outline-dark{
  background:#f5f9e9;
  border:none;
  color:#171219;
  font-size:15px;
  font-weight:normal;
}

.kategorije img{
  height:150px
}

.novosti img{
  height:300px;
  object-fit:cover;
}

.dole{
  background: #ff7a38;
  background: radial-gradient(circle,rgba(255, 122, 56, 1) 0%, rgba(232, 77, 0, 1) 100%);
  padding:50px 0;
  color:#fff;
}

.dole a{
  text-decoration:none;
  color:#fff;
}

.upozorenje{
  font-size:14px;
  line-height:1.2
}

.smm .fab{
  font-size:25px;
}

.smm img{
  margin-bottom:50px;
  max-width:200px
}

.dole h1{
  font-weight:bold;
  color:#000;
  font-size:26px
}


.dole h2{
  font-weight:bold;
  color:#000;
  font-size:26px
}

.products .card{
  padding:15px;
  border:solid #f5f9e9 1px!important;
  text-align:left!important
}


.products .woocommerce-Price-amount.amount{
  font-size:15px!important
}

.products .card-body{
  padding:0
}

.products .add_to_cart_button{
  background:#f16923;
  border:none;
  color:#fff;
  font-size:20px;
}

.products .btn-outline-dark{
  background:#f5f9e9;
  border:none;
  color:#171219;
  font-size:15px;
  font-weight:normal;
}

.podstranice{
  height:20px;
  width:100%;
  background:#f16923;
}

.product-specifikacije .col {
  min-height: 100px;
  transition: box-shadow 0.3s ease;
}

.product-specifikacije i {
  font-size: 1.5rem;
}

.product-specifikacije .fw-bold{
  line-height:1.2
}

.custom-price-note table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  font-size: 0.95rem;
}

.custom-price-note th,
.custom-price-note td {
  padding: 0.75rem;
  vertical-align: top;
  border: 1px solid #f5f9e9;
}

.custom-price-note thead th {
  background-color: #f5f9e9;
  font-weight: 600;
  text-align: left;
}

.custom-price-note tbody tr:nth-child(even) {
  background-color: #f5f9e9;
}

.custom-price-note tbody tr:hover {
  background-color: #dbdfce;
}

  .custom-price-note{
    margin-bottom:50px;
  }

@media (max-width: 768px) {
  .custom-price-note table {
    font-size: 0.875rem;
  }

  .custom-price-note th,
  .custom-price-note td {
    padding: 0.5rem;
  }

.proizvodi img{
  height:300px;
  object-fit:contain;
}

.kategorije img {
    height: auto;
    width: 100%;
  aspect-ratio:1/1;
  object-fit:contain
}

.brendovi img{
  padding:10px;
  width:80px;
  min-height:80px;
}
.my-5.kategorije  {
  margin:0!important
}

.my-5.brendovi  {
  margin:0!important;
  border-top:solid 1px #d3d3d3
}
}

.quantity input{
  width:50px!important
}

.list-unstyled li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: #f5f9e9; /* Svijetlozelena pozadina, možeš promijeniti */
  color: #198754; /* Bootstrap text-success */
  border-radius: 50%;
  font-size: 20px;
  margin-right: 0.5rem;
}

.list-unstyled li  {
  margin-bottom:10px
}

.card.horizontal {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
  height: 100%;
}

.card.horizontal:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.card.horizontal .col-lg-6,
.card.horizontal .col-xl-5,
.card.horizontal .col-xxl-4 {
  max-height: 320px;
  overflow: hidden;
}

.card.horizontal .card-body {
  padding: 1.5rem;
  background-color: #f5f9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.card.horizontal .blog-post-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #212529;
  margin-bottom: 0.5rem;
}

.card.horizontal .meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

.card.horizontal .card-text {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .card.horizontal .row.g-0 {
    flex-direction: column;
  }

  .card.horizontal .col-lg-6,
  .card.horizontal .col-xl-5,
  .card.horizontal .col-xxl-4 {
    max-height: none;
  }

  .card.horizontal .card-img-lg-start {
    height: auto;
  }
}