.spf-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.spf-container h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.filter-section {
  margin-bottom: 25px;
}

.filter-section select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background-color: #fff;
}

/* --- Einrückung von Unterkategorien --- */
#category option {
  padding-left: 6px;
}

#category option[data-depth="1"] {
  padding-left: 20px;
}

#category option[data-depth="2"] {
  padding-left: 35px;
  font-size: 0.95em;
  color: #555;
}

#category option[data-depth="3"] {
  padding-left: 50px;
  font-size: 0.9em;
  color: #777;
}

/* --- Ladezustand bei AJAX --- */
.products.loading {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
  transition: opacity 0.3s;
}

.products.loading::after {
  content: "Produkte werden geladen...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.9);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* --- Buttons --- */
.spf-btn {
  background: #111 !important;
  color: white !important;
  border-radius: 8px !important;
  padding: 10px 20px !important;
  transition: 0.3s;
}

.spf-btn:hover {
  background: #333 !important;
}


/*--- Woocomerce design changes ---*/
.woocommerce .woocommerce-ordering {
    visibility: hidden;
}

/* Nur ausverkaufte Buttons */
li.product.outofstock a.button {
    display: block;          /* sicherstellen, dass es Block ist */
    position: relative;       /* für Pseudo-Element */
    color: transparent;       /* Buttontext unsichtbar */
    background-color: #ccc;   /* optional neutral */
    pointer-events: none;     /* nicht klickbar */
}

/* Pseudo-Element als Overlay */
li.product.outofstock a.button::after {
    content: var(--out-of-stock-text, 'out of stock');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px; /* an Button-Höhe anpassen */
    background-color: #b5b5b5; /* grau statt rot */
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
}

/* Produktkarte als Flexbox */
/* 1️⃣ Produktkarte als Flex-Container */
ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 2️⃣ Produkt-Link darf wachsen */
ul.products li.product > .woocommerce-loop-product__link {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 0.5em;
}

/* 3️⃣ Inhalt oben fixieren */
ul.products li.product > .woocommerce-loop-product__link > * {
    flex-shrink: 0;
}

/* 4️⃣ Button immer nach unten drücken */
ul.products li.product > .button {
    margin-top: auto;
    margin-bottom: 1.2em;
}

.woocommerce-js ul.products li.product .button, .woocommerce-page ul.products li.product .button {
    margin-top: -3.5em !important;
    margin-bottom: 2em !important;
}

li span.current {
    color: white !important;
}

.widget .wp-container-core-social-links-is-layout-15834411 {
    justify-content: unset;
}



/* Smartphones Hoch- und Querformat */
@media only screen and (max-width: 767px) {
    .widget .wp-container-core-social-links-is-layout-15834411 {
        justify-content: center;
    }
    

}

/* Tablets Hoch- und Querformat */
@media only screen and (min-width: 768px) and (max-width: 1024px) {

}