/* Custom styles to override Mobirise defaults */


.mbr-gallery .mbr-gallery-item .galleryItem {
  background: #333333 !important;
  display: block !important;
  outline: none !important;
  position: relative !important;
  height: 400px !important; /* Vaste hoogte voor alle cards */
  display: flex !important;
  flex-direction: column !important;
}

/* Zorg ervoor dat de klikbare overlay transparant blijft */
.mbr-gallery .mbr-gallery-item .item_overlay {
  background: transparent !important;
}

/* Afbeelding container */
.mbr-gallery .mbr-gallery-item .img_wraper {
  width: 80% !important; /* Percentage van card breedte */
  aspect-ratio: 1/1 !important; /* Houdt vierkante vorm */
  max-width: 250px !important; /* Maximum grootte */
  overflow: hidden !important;
  margin: 20px auto 0 auto !important; /* Gecentreerd met auto margins */
  border-radius: 10px !important; /* Optioneel: afgeronde hoeken */
  flex-shrink: 0 !important; /* Voorkomt dat de container krimpt */
}

/* Afbeelding zelf */
.mbr-gallery .mbr-gallery-item .img_wraper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Houdt aspect ratio, vult hele container */
}

/* Tekst container met meer padding */
.mbr-gallery .mbr-gallery-item .sidebar_wraper {
  flex: 1 !important; /* Neemt resterende ruimte in */
  padding: 20px 20px 15px 20px !important; /* Top, right, bottom, left */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Titel styling */
.mbr-gallery .mbr-gallery-item .item-title {
  margin-bottom: 0px !important;
  margin-top: 0 !important;
  font-size: clamp(16px, 4vw, 25px) !important; /* Responsive font size */
  line-height: 1.3 !important;
}

/* Prijs blok */
.mbr-gallery .mbr-gallery-item .price-block {
  margin-top: 0px !important; /* Duwt prijs naar beneden */
}

/* Prijs tekst kleiner */
.mbr-gallery .mbr-gallery-item .shop-item-price {
  font-size: clamp(14px, 3vw, 18px) !important; /* Responsive font size */
}

/* Beschrijving tekst kleiner (als die er is) */
.mbr-gallery .mbr-gallery-item .card-description {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* === FILTER EN SORTEER STYLING === */

/* Maak de sorteer knoppen container zichtbaar */
.mbr-gallery .col-md-12.sort-buttons.clearfix {
  display: block !important; /* Overschrijft display: none */
  margin-bottom: 20px !important;
}

/* Maak de sorteer knoppen zichtbaar en geef ze meer ruimte */
.mbr-gallery .sort-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important; /* Ruimte tussen de knoppen */
  margin-bottom: 30px !important;
  flex-wrap: wrap !important;
}

.mbr-gallery .sort-buttons .mbr-section-btn {
  margin: 5px !important; /* Extra margin rond elke knop */
}

/* Maak de sidebar (filter veld) breder */
.mbr-gallery .col-xl-3.sidebar {
  flex: 0 0 25% !important; /* Breder dan standaard 25% (was ~16.7%) */
  max-width: 25% !important;
  min-width: 200px !important;
}

/* Pas de gallery breedte aan om ruimte te maken voor bredere sidebar */
.mbr-gallery .wrapper-shop-items.col-xl-9 {
  flex: 0 0 75% !important; /* Smaller dan standaard 75% (was ~83.3%) */
  max-width: 75% !important;
}

/* Extra styling voor de filter container */
.mbr-gallery .sidebar-categories {
  padding: 20px !important;
  text-align: left !important; /* Links uitlijnen in plaats van center */
}

.mbr-gallery .sidebar-title {
  margin-bottom: 20px !important;
  text-align: left !important; /* Links uitlijnen in plaats van center */
  font-weight: 600 !important;
  color: #ffffff !important;
  font-size: 18px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Maak mooie filter knoppen */
.mbr-gallery .mbr-gallery-filter {
  text-align: left !important; /* Links uitlijnen in plaats van center */
}

.mbr-gallery .mbr-gallery-filter ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important; /* Geen auto margin meer */
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: stretch !important; /* Stretch items voor gelijke breedte */
  max-width: 300px !important; /* Begrens de breedte */
  width: 100% !important;
}

.mbr-gallery .mbr-gallery-filter li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

.mbr-gallery .mbr-gallery-filter li::before {
  display: none !important; /* Verwijder alle bullets */
}

.mbr-gallery .mbr-gallery-filter li {
  background: #4a4a4a !important;
  color: #ffffff !important;
  padding: 8px 20px !important; /* Smaller padding voor slanker design */
  border-radius: 20px !important; /* Veel rondere hoeken */
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-align: left !important; /* Links uitlijnen */
  font-weight: 500 !important;
  border: 2px solid transparent !important;
  text-transform: capitalize !important;
  font-size: 18px !important; /* Kleinere tekst voor betere uitlijning */
  display: block !important;
  width: 100% !important; /* Volledige breedte van container */
  margin: 0 !important; /* Geen extra margins */
  box-sizing: border-box !important;
}

.mbr-gallery .mbr-gallery-filter li:hover {
  background: #f7941d  !important;
  color: #14142b !important;
  transform: translateY(-2px) !important;

}

.mbr-gallery .mbr-gallery-filter li.active {
  background: #f7941d  !important;
  color: #14142b !important;
  border-color: #f7941d  !important;
  font-weight: 600 !important;
}

/* === RESPONSIVE DESIGN === */

/* Maak de gallery container responsive */
.mbr-gallery .mbr-gallery-row {
  display: block !important; /* Terug naar block zoals Mobirise origineel */
  text-align: left !important; /* Links uitlijnen voor inline-block items */
  font-size: 0 !important; /* Verwijder whitespace tussen inline-block items */
  padding: 0 10px !important;
}

.mbr-gallery .mbr-gallery-item {
  display: inline-block !important; /* Mobirise gebruikt inline-block, niet flex */
  vertical-align: top !important; /* Uitlijning van inline-block items */
  width: 25% !important; /* Simpele percentage zoals Mobirise origineel */
  padding: 0 10px 20px 10px !important; /* Padding in plaats van margin */
  box-sizing: border-box !important;
  font-size: 14px !important; /* Reset font-size voor content */
  position: relative !important; /* Voor Mobirise filter animaties */
}

/* Gebruik originele Mobirise filter styling */
.mbr-gallery .mbr-gallery-item.mbr-gallery-item__hided {
  position: absolute !important; /* Zoals Mobirise origineel */
  left: 0 !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.mbr-gallery .mbr-gallery-item .galleryItem {
  width: 100% !important; /* Vult hele container */
  min-width: 250px !important; /* Minimum breedte */
  height: 400px !important; /* Vaste hoogte voor alle cards */
  display: flex !important;
  flex-direction: column !important;
}

/* Tablets (768px en kleiner) */
@media (max-width: 1200px) {
  .mbr-gallery .mbr-gallery-row {
    padding: 0 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item {
    width: 33.333% !important; /* 3 cards per rij */
    padding: 0 10px 20px 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item .galleryItem {
    min-width: 220px !important;
  }
  
  /* Op tablet: sidebar nog smaller en gallery breder */
  .mbr-gallery .col-xl-3.sidebar {
    flex: 0 0 30% !important;
    max-width: 30% !important;
  }
  
  .mbr-gallery .wrapper-shop-items.col-xl-9 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }
}

@media (max-width: 768px) {
  .mbr-gallery .mbr-gallery-row {
    padding: 0 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item {
    width: 50% !important; /* 2 cards per rij */
    padding: 0 10px 20px 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item .galleryItem {
    min-width: 200px !important;
    height: 350px !important;
  }
  
  .mbr-gallery .mbr-gallery-item .img_wraper {
    max-width: 200px !important;
    margin: 15px auto 0 auto !important;
  }
  
  .mbr-gallery .mbr-gallery-item .sidebar_wraper {
    padding: 15px !important;
  }
  
  /* Op kleiner scherm: sidebar full width boven de gallery */
  .mbr-gallery .col-xl-3.sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    order: -1 !important; /* Sidebar boven de gallery */
    margin-bottom: 20px !important;
  }
  
  .mbr-gallery .wrapper-shop-items.col-xl-9 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  
  /* Sorteer knoppen smaller op mobile */
  .mbr-gallery .sort-buttons {
    gap: 10px !important;
  }
  
  .mbr-gallery .sort-buttons .mbr-section-btn {
    margin: 3px !important;
  }
  
  /* Filter knoppen horizontaal op tablet */
  .mbr-gallery .mbr-gallery-filter ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    align-items: center !important; /* Terug naar center op tablet */
  }
  
  .mbr-gallery .mbr-gallery-filter li {
    padding: 6px 16px !important; /* Nog smaller op tablet */
    font-size: 13px !important;
    border-radius: 18px !important; /* Ronder op tablet */
    width: fit-content !important; /* Terug naar fit-content op tablet */
    text-align: center !important; /* Center op tablet */
  }
}

/* Mobiele telefoons (480px en kleiner) */
@media (max-width: 480px) {
  .mbr-gallery .mbr-gallery-row {
    text-align: center !important; /* Center op mobiel */
    padding: 0 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item {
    width: 100% !important; /* 1 card per rij */
    max-width: 350px !important;
    padding: 0 10px 20px 10px !important;
  }
  
  .mbr-gallery .mbr-gallery-item .galleryItem {
    height: 300px !important;
    min-width: auto !important;
  }
  
  .mbr-gallery .mbr-gallery-item .img_wraper {
    max-width: 180px !important;
    margin: 10px auto 0 auto !important;
  }
  
  .mbr-gallery .mbr-gallery-item .sidebar_wraper {
    padding: 15px !important;
  }
  
  /* Filter knoppen nog compacter op mobiel */
  .mbr-gallery .mbr-gallery-filter li {
    padding: 5px 14px !important; /* Compacter op mobiel */
    font-size: 12px !important;
    border-radius: 16px !important; /* Ronder op mobiel */
    width: fit-content !important; /* Terug naar fit-content op mobiel */
    text-align: center !important; /* Center op mobiel */
  }
}