.mzlgi-root {
  --mzlgi-cols-xs: 2;
  --mzlgi-cols-md: 3;
  --mzlgi-cols-lg: 5;
  --mzlgi-gap-xs: 4px;
  --mzlgi-gap-md: 8px;
  --mzlgi-gap-lg: 16px;
  --mzlgi-cols: var(--mzlgi-cols-xs);
  --mzlgi-gap: var(--mzlgi-gap-xs);
}

/* 1) Filtrowanie (przycisk) */
.mzlgi-filters-toggle{
  order:1;
}

/* 2) Usuń filtry ma być ZA Filtrowaniem */
.mzlgi-clear-filters{
  order:2;
}

.mzlgi-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
}

.mzlgi-filters-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid #2B3A24;
  background: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

button.mzlgi-filters-toggle {
  color: #2B3A24 !important;
  border: 1px solid #2B3A24 !important;
}

.mzlgi-filters-wrap {
  width: 100%;
}

.mzlgi-filter-box {
  position: relative;
}

.mzlgi-filter-label-text {
  font-size: 14px;
}

.mzlgi-filter-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #333;
}

.mzlgi-filter-toggle {
  width: 100%;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #2B3A24;
  background: #ffffff;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  position: relative;
}

button.mzlgi-filter-toggle:focus {
  background-color: transparent !important;
}

.mzlgi-filter-toggle::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  transform: translateY(-50%) rotate(45deg);
}

.mzlgi-filter-panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  padding: 8px;
  min-width: 100%;
  max-height: 260px;
  overflow: auto;
  z-index: 999;
  display: none;
}

.mzlgi-filter-box.open .mzlgi-filter-panel {
  display: block;
}

.mzlgi-filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 3px 4px;
  cursor: pointer;
}

.mzlgi-filter-option input[type="checkbox"] {
  margin: 0;
}

.mzlgi-filter-box.mzlgi-filter-efekt button,
.mzlgi-filter-box.mzlgi-filter-terpen button,
.mzlgi-filter-box.mzlgi-filter-genotyp button,
.mzlgi-filter-box.mzlgi-filter-dzialanie button {
  border: 2px solid #2B3A24 !important;
  color: #2B3A24 !important;
  font-size: 14px !important;
  padding: 4px 20px !important;
}

.mzlgi-filter-box.mzlgi-filter-efekt button:hover,
.mzlgi-filter-box.mzlgi-filter-terpen button:hover,
.mzlgi-filter-box.mzlgi-filter-genotyp button:hover,
.mzlgi-filter-box.mzlgi-filter-dzialanie button:hover {
  border: 2px solid #2B3A24;
  color: #ffffff !important;
  background: #2B3A24 !important;
}

/* ZMODYFIKOWANE STYLE SORTOWANIA */
.mzlgi-sort-label {
	order: 3;
  font-size: 16px !important;
  color: #333;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  position: relative; /* Nowe: dla pozycjonowania strzałki */
	margin-left:auto;
	display: flex;
}

.mzlgi-sort {
  padding: 4px 10px;
  border: 2px solid #2B3A24 !important;
  font-size: 13px;
  background: #ffffff;
  min-width: 180px;
  cursor: pointer;
  text-align: left;
  /* Nowe: dla ujednolicenia z filtrami i kontroli na iOS */
  border-radius: 6px; 
  color: #2B3A24 !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;
}

/* WŁASNA STRZAŁKA DLA SELECT */
.mzlgi-sort-label::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
  margin-top: 4px;
}


.mzlgi-grid {
  display: grid;
  grid-template-columns: repeat(var(--mzlgi-cols), minmax(0, 1fr));
  gap: var(--mzlgi-gap);
}

.mzlgi-item {
  box-sizing: border-box;
}

.mzlgi-item.hidden {
  display: none !important;
}

.mzlgi-empty,
.mzlgi-notice {
  margin-top: 12px;
  padding: 12px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 8px;
  font-size: 14px;
}

.mzlgi-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.mzlgi-load-more {
  background: #8DD32A;
  color: #ffffff;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}


.mzlgi-load-more:active {
  transform: translateY(0);
}

@media (min-width: 768px) {
  .mzlgi-root {
    --mzlgi-cols: var(--mzlgi-cols-md);
    --mzlgi-gap: var(--mzlgi-gap-md);
  }
}

@media (min-width: 992px) {
  .mzlgi-root {
    --mzlgi-cols: var(--mzlgi-cols-lg);
    --mzlgi-gap: var(--mzlgi-gap-lg);
  }
}

/* MOBILE (do 767px) - ZASTOSOWANE ZMIANY */
@media (max-width: 767px) {
  .mzlgi-filter-label-text {
    display: none;
  }
	#visible-mobile{
		display: block;
		text-align: left;
		color: #2B3A24;
		font-weight: 500;
	}
	
	.mzlgi-sort-label{
		justify-content: left;
		text-align: left;
	}

  .mzlgi-filter-wrap {
    width: 100% !important;
  }

  /* Zwykłe buttony, np. 'Wybierz efekt' - ZMODYFIKOWANE */
  .mzlgi-filter-toggle {
    padding: 5px 10px; /* Ujednolicone: 5px/10px */
    text-align: left;
    border-radius: 4px; /* Ujednolicone: 4px */
  }

  /* Ujednolicone style dla przycisków filtrów na mobile - ZMODYFIKOWANE */
  .mzlgi-filter-box.mzlgi-filter-efekt button,
  .mzlgi-filter-box.mzlgi-filter-terpen button,
  .mzlgi-filter-box.mzlgi-filter-genotyp button,
  .mzlgi-filter-box.mzlgi-filter-dzialanie button {
    width: 100% !important;
    padding: 5px 10px !important; /* Ujednolicone: 5px/10px */
    text-align: left !important;
    border-radius: 4px; /* Ujednolicone: 4px */
  }

  .mzlgi-sort-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: left !important;
    text-align: left !important;
    width: 100% !important;
  }

  /* Ujednolicony styl dla sortowania na mobile - ZMODYFIKOWANE */
  .mzlgi-sort {
    color: #2B3A24 !important;
    width: 100%;
    padding: 5px 10px; /* Ujednolicone: 5px/10px */
    text-align: left;
    border-radius: 4px; /* Ujednolicone: 4px */
    font-size: 14px;
  }

  .mzlgi-filters-toggle {
    display: none !important;
  }

  .mzlgi-filters-wrap {
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
    row-gap: 10px;
  }
  
  /* Korekta położenia strzałki na Mobile */
  .mzlgi-sort-label::after {
    top: auto;
    bottom: auto;
    margin-top: 0;
  }
}

/* TABLET (768–991) - ZASTOSOWANE ZMIANY */
@media (min-width: 768px) and (max-width: 991.98px) {
	
	#visible-mobile{
		display: block;
	}
	
	.mzlgi-sort-label{
		justify-content: left;
		text-align: left;
		align-items: left !important;
	}
	
  .mzlgi-filters-toggle {
    display: none !important;
  }

  .mzlgi-filters-wrap {
    display: block;
    width: 100%;
    flex-wrap: wrap;
  }

  /* Zwykłe buttony, np. 'Wybierz efekt' - ZMODYFIKOWANE */
  button.mzlgi-filter-toggle {
    width: 100%;
    padding: 5px 10px; /* Ujednolicone: 5px/10px */
    text-align: left;
    border-radius: 4px; /* Ujednolicone: 4px */
  }

  /* Ujednolicone style dla przycisków filtrów na tablet - ZMODYFIKOWANE */
  .mzlgi-filter-box.mzlgi-filter-efekt button,
  .mzlgi-filter-box.mzlgi-filter-terpen button,
  .mzlgi-filter-box.mzlgi-filter-genotyp button,
  .mzlgi-filter-box.mzlgi-filter-dzialanie button {
    padding: 5px 10px !important; /* Ujednolicone: 5px/10px */
    text-align: left !important;
    border-radius: 4px; /* Ujednolicone: 4px */
  }

  .mzlgi-sort-label {
    width: 100%;
  }

  /* Ujednolicony styl dla sortowania na tablet - ZMODYFIKOWANE */
  .mzlgi-sort {
    color: #2B3A24 !important;
    padding: 5px 10px; /* Ujednolicone: 5px/10px */
    text-align: left;
    border-radius: 4px; /* Ujednolicone: 4px */
    font-size: 14px;
    width: 100%;
  }
  
  /* Korekta położenia strzałki na Tablet */
  .mzlgi-sort-label::after {
    top: auto;
    bottom: auto;
    margin-top: 0;
  }
}

/* DESKTOP (od 992px) */
@media (min-width: 992px) {
  .mzlgi-controls{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
  }

  .mzlgi-filters-toggle{ order:1; }
  .mzlgi-clear-filters{ order:2; }

  /* SORTOWANIE w tej samej linii po prawej */
  .mzlgi-sort-label{
    order:3;
    width:auto !important;
    margin-top:0 !important;
    margin-left:auto !important;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    position:relative;
  }

  .mzlgi-sort-label::after {
    top: 50%;
    bottom: auto;
    margin-top: 4px;
  }

  /* Ujednolicenie wysokości */
  .mzlgi-filters-toggle,
  .mzlgi-clear-filters{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .mzlgi-sort{
    line-height:28px;
    padding:0 34px 0 12px;
  }

  /* FILTRY zawsze pod spodem jako pełna szerokość */
  .mzlgi-filters-wrap {
    order:4;
    flex-basis:100%;
    width:100%;

    display:flex;
    flex-wrap:wrap;
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform:translateY(-8px);
    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .mzlgi-root.mzlgi-filters-open .mzlgi-filters-wrap {
    max-height:1000px;
    opacity:1;
    transform:translateY(0);
  }

  .mzlgi-filter-wrap { flex:0 0 25%; max-width:25%; }

  .mzlgi-filter-label-text {
    display:block;
    font-weight:600;
    text-transform:uppercase;
    font-size:13px;
  }

  .mzlgi-filter-toggle { display:none; }

  .mzlgi-filter-panel {
    position:static;
    display:block !important;
    margin-top:4px;
    background:transparent;
    border:none;
    box-shadow:none;
    padding:0;
    max-height:none;
    overflow:visible;
  }
}