/* --- Anthalook: Wishlist Modal Button + Layout + Farben --- */

/* Button normal im Wishlist-Modal */
.xb-wishlist-modal .xb-list-style__add-to-cart {
  background-color: #348178 !important;
  border-radius: 30px !important;
  padding: 12px 24px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
}

/* Hover-Farbe */
.xb-wishlist-modal .xb-list-style__add-to-cart:hover {
  background-color: #2e6e68 !important;
}

/* Desktop: Action-Zeile (Button + Entfernen) */
.xb-wishlist-modal .xb-list-style__action {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

/* ------- MOBILE-ANPASSUNG ------- */
@media (max-width: 749px) {
  /* Zeile mit Button + Entfernen mobil untereinander, zentriert */
  .xb-wishlist-modal .xb-list-style__action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* Button + Entfernen zentrieren */
    justify-content: center !important;
    gap: 4px !important;
  }

  /* Button: volle Breite, bleibt schön groß */
  .xb-wishlist-modal .xb-list-style__add-to-cart {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* "Entfernen": direkt unter dem Button, zentriert */
  .xb-wishlist-modal .xb-list-style__product-del {
    display: block !important;
    width: auto !important;           /* nicht über ganze Breite ziehen */
    align-self: center !important;    /* exakt unter dem Button */
    text-align: center !important;
    margin-top: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;   /* einzeilig */
    font-size: 14px;
    line-height: 1.2;
  }
}



/* ------- PREISFARBE SCHWARZ ------- */

/* normaler Preis */
.xb-wishlist-modal .xb-list-style__price,
.xb-wishlist-modal .xb-list-style__price span {
  color: #000 !important;
}

/* Vergleichspreis (reduziert) – App nutzt hier --compare-color */
.xb-wishlist-modal .xb-list-style__hasCompareAtPrice {
  --compare-color: #000 !important;
  color: #000 !important;
}

/* falls die App eine eigene Klasse für Vergleichspreis nutzt */
.xb-wishlist-modal .xb-list-style__compareAtPrice {
  color: #000 !important;
}

/* --- Anthalook Wishlist – Produktbilder --- */

/* Desktop Bildgröße */
.xb-list-style__product-img img {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain !important;
    border-radius: 6px;
}

/* Container soll Platz für größeres Bild geben */
.xb-list-style__product-img {
    width: 200px !important;
    height: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Mobile: Bild etwas kleiner, aber sichtbar */
@media (max-width: 749px) {
  .xb-list-style__product-img img {
      width: 120px !important;
      height: auto !important;
  }
  
  .xb-list-style__product-img {
      width: 120px !important;
      height: auto !important;
  }
}

/* ------- DESKTOP: Spaltenbreiten für Wishlist-Tabelle ------- */
@media (min-width: 750px) {
  /* 1. Spalte: Produkt (Bild + Name) */
  .xb-wishlist-modal table tr > *:nth-child(1) {
    width: 55% !important;
  }

  /* 2. Spalte: Preis – etwas breiter + Abstand nach links */
  .xb-wishlist-modal table tr > *:nth-child(2) {
    width: 15% !important;
    padding-left: 24px !important; /* Abstand zwischen Produkt & Preis */
  }

  /* 3. Spalte: Lagerstatus + Button */
  .xb-wishlist-modal table tr > *:nth-child(3) {
    width: 30% !important;
  }
}