/* 1. Slideout */


/* HUSKY Slideout: Breite */
.woof-slide-out-div,
.woof-slide-out-div .woof-slide-content {
  width: 360px !important;
}

/* Erst anzeigen, wenn HUSKY initialisiert ist */
.woof-slide-out-div:not(.ui-slideouttab-ready) {
  opacity: 0;
  visibility: hidden;
}

.woof-slide-out-div.ui-slideouttab-ready {
  opacity: 1 !important;
  visibility: visible;
}

/* HUSKY Handle */
.woof-slide-out-div .woof-handle {
  background: #a0c4cd !important;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Mobile Slideout-Position */
@media (max-width: 768px) {
  .woof-slide-out-div .woof-handle {
    margin-top: 110px !important;
  }
}




/* 2. Filter-Inhalt */



/* Grundabstände im Slideout */
.woof-slide-out-div .woof_container {
  margin-bottom: 24px !important;
}

.woof-slide-out-div .woof_container h4,
.woof_container_inner h4 {
  margin: 0 0 10px !important;
  padding-bottom: 5px !important;
  border-bottom: 1px solid #a0c4cd7a;
  color: #4b4b4b;
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25;
}

/* Suchfeld */
.woof-slide-out-div .woof_husky_txt-input {
  min-height: 42px;
  font-size: 15px !important;
}

/* (Kategorienliste) allgemein Listen*/

.woof-slide-out-div .woof_list li {
  margin-bottom: 7px !important;
}
.woof-slide-out-div .woof_checkbox_label {
  font-size: 14px !important;
  line-height: 1.35;
}

.woof-slide-out-div .woof_childs_list {
  margin-top: 7px !important;
  margin-left: 24px !important;
}

.woof-slide-out-div .woof_childs_list .woof_checkbox_label {
  color: #555f58 !important;
  font-size: 14px !important;
}


/* Allgemeine Listenberuhigung */
label.woof_checkbox_label_selected {
  font-weight: initial;
}

ul.woof_list li {
  margin-top: 0;
  margin-bottom: 0;
}

.woof_list label {
  padding-top: 4px;
  padding-bottom: 0;
}

/* Slideout Buttons */
.woof-slide-out-div .woof_submit_search_form_container button,
.woof-slide-out-div .woof_reset_search_form,
.woof-slide-out-div .woof_reset_button_2 {
  border: 1px solid #a0c4cd !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #3f5f67 !important;
  padding: 7px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
}

.woof-slide-out-div .woof_submit_search_form_container button:hover,
.woof-slide-out-div .woof_reset_search_form:hover,
.woof-slide-out-div .woof_reset_button_2:hover {
  background: #a0c4cd !important;
  border-color: #8fb7c1 !important;
  color: #233026 !important;
}





/* 3. Aktive Filter oben */


.woof_products_top_panel {
  margin: 14px 0 18px;
  font-size: 15px;
}

.woof_products_top_panel_ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woof_products_top_panel_ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woof_products_top_panel ul[data-container] {
  display: contents;
}

.woof_products_top_panel ul[data-container] > li:first-child {
  color: #646970;
  font-size: 14px;
}

/* WooCommerce-Sortierung nicht als aktiven Filter-Chip anzeigen */
.woof_products_top_panel a[data-tax="orderby"] {
  display: none !important;
}

/* Grundstil für aktive Filter-Chips */
.woof_products_top_panel .woof_reset_button_2,
.woof_products_top_panel a[data-tax] {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid #a0c4cd;
  border-radius: 999px !important;
  background: #f0f7f8;
  color: #3f5f67 !important;
  padding: 6px 12px !important;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  text-transform: none !important;
  box-sizing: border-box;
}

/* Reset-Button */
.woof_products_top_panel .woof_reset_button_2 {
  background: #fff;
  font-size: 0;
  cursor: pointer;
}

.woof_products_top_panel .woof_reset_button_2::before {
  content: "Filter zurücksetzen";
  font-size: 14px;
  font-weight: 700;
}

.woof_products_top_panel .woof_reset_button_2:hover,
.woof_products_top_panel a[data-tax]:hover,
.woof_products_top_panel a[data-tax]:focus {
  background: #a0c4cd;
  border-color: #8fb7c1;
  color: #233026 !important;
  text-decoration: none;
}

/* Text in Chips */
.woof_products_top_panel .woof_remove_ppi,
.woof_products_top_panel a .woof_remove_ppi,
.woof_products_top_panel .woof_remove_ppi i {
  color: #233026 !important;
  font-style: normal;
  text-transform: none !important;
}

/* Textsuch-Filter: Label außerhalb, Suchwort als Chip */
.woof_products_top_panel a[data-tax="woof_text"] {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #646970 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.woof_products_top_panel a[data-tax="woof_text"]::before {
  content: "Textsuche:";
  color: #646970;
  font-size: 14px;
  line-height: 1.25;
}

.woof_products_top_panel a[data-tax="woof_text"]:hover,
.woof_products_top_panel a[data-tax="woof_text"]:focus {
  background: transparent !important;
  color: #646970 !important;
  text-decoration: none !important;
}

.woof_products_top_panel a[data-tax="woof_text"] .woof_remove_ppi {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  border: 1px solid #a0c4cd;
  border-radius: 999px;
  background-color: #f0f7f8 !important;
  color: transparent !important;
  font-size: 0;
  padding: 6px 28px 6px 12px;
  line-height: 1.25;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
}

.woof_products_top_panel a[data-tax="woof_text"]:hover .woof_remove_ppi {
  background-color: #a0c4cd !important;
}

.woof_products_top_panel a[data-tax="woof_text"] .woof_remove_ppi i {
  display: inline;
  color: #233026 !important;
  font-size: 14px;
  font-style: normal;
  margin: 0;
}




/* 4. WooCommerce Shop-Zeile Desktop (Archivseite die niemand nutzt, zu finden unter Seiten -> Shop) */



/* Filterzeile links, Sortierung rechts */
.ast-woocommerce-container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 18px;
}

.ast-woocommerce-container .woof_products_top_panel {
  grid-column: 1;
  grid-row: 1;
  margin: 14px 0 22px;
}

.ast-woocommerce-container .woocommerce-ordering {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  float: none;
  margin: 10px 0 22px !important;
}

/* Ergebnis-Anzahl ausblenden */
.ast-woocommerce-container .woocommerce-result-count {
  display: none;
}

/* Produktbereiche immer über volle Breite */
.ast-woocommerce-container .only-categories,
.ast-woocommerce-container ul.products,
.ast-woocommerce-container .woocommerce-no-products-found {
  grid-column: 1 / -1;
  width: 100%;
}

/* 0-Treffer-Ausgabe sauber platzieren */
.woocommerce-no-products-found {
  flex: 0 0 100%;
  max-width: 760px;
  margin: 24px 0 80px;
}


/* nur bei Desktop alles höher setzten */
@media (min-width: 769px) {
  .archive-shop-wrapper {
    margin-top: -2em !important;
  }
}



/* 5 Mobile  für WooCommerce Shop-Zeile Desktop (Archivseite die niemand nutzt, zu finden unter Seiten -> Shop) */




/* Mobile: Sortierung unter Filterzeile */
@media (max-width: 768px) {
  .ast-woocommerce-container {
    display: block;
  }

  .ast-woocommerce-container .woof_products_top_panel {
    margin: 14px 0 12px;
  }

  .ast-woocommerce-container .woocommerce-ordering {
    float: none;
    width: 100%;
    margin: 0 0 22px !important;
  }

  .ast-woocommerce-container .woocommerce-ordering select {
    width: 100%;
    max-width: 100%;
  }
}





/* 6. HUSKY Label-Filter / Flakes optisch angleichen */
/* Gilt für HUSKY-Attributfilter wie pa_themenwelt, pa_farbe usw. */


.woof-slide-out-div .woof_label_term {
  border: 1px solid #a0c4cd !important;
  border-radius: 999px;
  background: #fff;
  color: #233026 !important;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1;
  height: auto;
}

.woof_list_label li .woof_label_term:hover,
.woof-slide-out-div .woof_label_term:hover {
  background: #dfedf0 !important;
}
.woof_list_label li .woof_label_term.checked,
.woof-slide-out-div .woof_label_term.checked,
.woof-slide-out-div .woof_label_term.woof_label_term_checked,
.woof-slide-out-div .checked .woof_label_term {
  background: #d3e7e9;
}