/* ============================================================
   Sale- & Summer-Sale-Seiten: Kacheln im Stil der Kategorie-
   Kacheln, Angebot in Gruen (Issues #48, #11)
   ============================================================ */
/* :nth-child(n) noetig: das Theme setzt fuer li.product:nth-child(4)
   display:inline-block !important (hoehere Spezifitaet) — ohne den
   Zusatz kippt die 4. Kachel aus dem Flex-Layout */
.et_pb_section.sale .category-container .products li.product:nth-child(n) {
  position: relative;
  display: inline-flex !important;
  flex-direction: column;
  align-items: stretch;
}

.et_pb_section.sale .category-container .products li.product > a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  order: 1;
  width: 100%;
}

.et_pb_section.sale .category-container .products li.product .woocommerce-loop-product__title {
  flex-grow: 1;
  padding-bottom: 0;
}

/* Angebots-Badge: gruen, kompakt, oben links wie die Ausverkauft-Badge */
.et_pb_section.sale .category-container .products li.product .onsale {
  background: #4caf50 !important;
  color: #fff;
  width: auto !important;
  min-width: 0;
  min-height: 0;
  top: 12px !important;
  left: 12px !important;
  right: auto;
  margin: 0;
  padding: 3px 14px !important;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 3px !important;
  z-index: 2;
  box-shadow: none !important;
}

/* Preis: Alt-Preis dezent durchgestrichen, Sale-Preis gruen */
.et_pb_section.sale .category-container .products li.product span.price {
  display: block;
  padding: 12px 0 0 !important;
}

.et_pb_section.sale .category-container .products li.product span.price del .amount {
  color: #aaa !important;
  font-size: 16px;
  font-weight: 400;
}

.et_pb_section.sale .category-container .products li.product span.price ins {
  text-decoration: none;
  margin-left: 5px;
}

.et_pb_section.sale .category-container .products li.product span.price ins .amount {
  color: #4caf50 !important;
}

/* MwSt-Hinweis zwischen Preis und Button (Flex-Reihenfolge) */
.et_pb_section.sale .category-container .products li.product p.wc-gzd-additional-info {
  order: 2;
  margin: 4px 0 10px !important;
  font-size: 13px;
  color: #666;
}

/* Vollbreiter gruener Button mit Warenkorb-Icon, immer unten */
.et_pb_section.sale .category-container .products li.product a.button {
  order: 3;
  position: relative;
  display: block;
  width: 100%;
  margin-top: 0;
  background: #4caf50 !important;
  color: #fff !important;
  text-align: center;
  font-size: 14px;
  padding: 12px 15px 12px 55px !important;
}

.et_pb_section.sale .category-container .products li.product a.button:before {
  background-image: url(/wp-content/themes/messervertrieb/svg/warenkorb-white.svg);
  background-size: 39%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 45px;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  content: '';
  border-right: 1px solid rgba(255, 255, 255, .4);
}

.et_pb_section.sale .category-container .products li.product a.button:hover {
  background: #388E3C !important;
}

/* --- Kacheln mit Bewertungssternen (variable + einfache Produkte) ---
   Der Bewertungs-Echtheitshinweis enthaelt einen Link innerhalb des
   Produktlinks; der Browser bricht den Produktlink dort auf, wodurch
   Preis & Hinweise direkte Kinder der Kachel werden (Preis rutschte
   ohne Order nach ganz oben). Reihenfolge explizit festlegen, damit
   alle Kacheln identisch aussehen: Bild/Titel/Sterne > Preis > MwSt > Button */
.et_pb_section.sale .category-container .products li.product > span.price {
  order: 2;
}

.et_pb_section.sale .category-container .products li.product .star-rating {
  margin: 8px auto 0;
}

/* Preisspanne variabler Produkte (ohne del/ins) ebenfalls gruen */
.et_pb_section.sale .category-container .products li.product span.price > .woocommerce-Price-amount {
  color: #4caf50 !important;
}

/* Mobil: 2 Spalten, kompakte Abstaende (Issue #11) */
@media (max-width: 767px) {
  /* ul.products ist mobil display:block; als Inline-Elemente passen
     zwei 48%-Kacheln wegen des Whitespace dazwischen nicht in eine
     Zeile — Flex-Wrap macht die Spalten unabhaengig davon */
  .et_pb_section.sale .category-container ul.products {
    display: flex !important;
    flex-wrap: wrap;
  }

  .et_pb_section.sale .category-container .products li.product:nth-child(n) {
    width: 48% !important;
    margin: 0 4% 4% 0 !important;
    padding: 15px !important;
    min-height: 0;
  }

  .et_pb_section.sale .category-container .products li.product:nth-child(2n) {
    margin-right: 0 !important;
  }

  .et_pb_section.sale .category-container .products li.product .onsale {
    top: 8px !important;
    left: 8px !important;
    font-size: 12px;
    padding: 2px 10px !important;
  }

  .et_pb_section.sale .category-container .products li.product a.button {
    font-size: 13px;
    padding: 10px 10px 10px 44px !important;
  }

  .et_pb_section.sale .category-container .products li.product a.button:before {
    width: 34px;
  }
}