/* =========================================================
   Shop und Produktkategorien: farbige Flaechen statt Weiss
   Stand: 2026-10-16

   Wird nur auf Shop, Produktkategorien und Produkt-Schlagworten
   geladen (siehe inc/assets.php). Das Layout in Avada bleibt
   unveraendert - hier werden nur Hintergruende gesetzt:

   1. Container mit der Produktliste: Leinen statt Weiss
   2. Hinter jedem Produktfoto eine helle Creme-Flaeche,
      die Karte wirkt dadurch geschlossen (Ecken 15px wie bisher)
   3. Container mit den haeufigen Fragen: Sand statt Weiss
   4. Dezenter Hover auf den Karten (optional, ganz unten)

   Die Farben stehen als Variablen direkt hier oben. Andere
   Toene aus dem Entwurf:
     Leinen  #f0edde
     Sand    var(--awb-color7)  #f7e6ce
     Salbei  #e2e1cb
     Creme   var(--awb-color2)  #fff9f1
     Weiss   #ffffff  (= bisheriger Zustand)

   Die Container werden ueber ihren Inhalt erkannt (:has()),
   damit in Avada keine Klasse nachgetragen werden muss. Browser
   ohne :has() ueberspringen die Regeln - dann bleibt es einfach
   weiss wie bisher, nichts geht kaputt.

   Das Avada-Stylesheet (uploads/fusion-styles/*.min.css) wird
   nach dieser Datei geladen. Die Selektoren haben deshalb wie
   in shop-listing.css bewusst mehr Spezifitaet als die
   Avada-Regel, die sie ersetzen, statt !important.
   ========================================================= */

body:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag) {
  --hof-shop-flaeche: var(--awb-color7, #efdcc3); /* Sand */
  --hof-shop-foto: var(--awb-color2, #fff9f1); /* Creme */
  --hof-shop-faq: var(--awb-color7, #f7e6ce); /* Sand */
}

/* ---------------------------------------------------------
   1. Container mit der Produktliste

   Erkannt am Post-Cards-Archiv, das nur in diesem Container
   steckt. Ersetzt .fusion-fullwidth (0,1,0) mit (0,4,1).
   --------------------------------------------------------- */
body:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
  .post-content
  > .fusion-fullwidth:has(.fusion-post-cards-archives-tb) {
  background-color: var(--hof-shop-flaeche);
}

/* ---------------------------------------------------------
   2. Creme-Flaeche hinter dem Produktfoto

   Die Flaeche haengt am aeusseren Wrapper der Karte. Er hat
   bereits die runden Ecken und overflow:hidden; die orange
   Flaeche darunter liegt in der inneren Spalte und deckt den
   unteren Teil ab. Avada faerbt den Wrapper ueber
   .fusion-layout-column .fusion-column-wrapper (0,2,0) und
   im Hover ueber (0,3,0) - beides wird hier mitgenommen.

   Das Foto bekommt etwas Luft zum Rand der Flaeche.
   --------------------------------------------------------- */
.fusion-grid-posts-cards
  > .fusion-post-cards-grid-column.product
  > .fusion-column-wrapper,
.fusion-grid-posts-cards
  > .fusion-post-cards-grid-column.product
  > .fusion-column-wrapper:hover {
  background-color: var(--hof-shop-foto, #fff9f1);
}

.fusion-grid-posts-cards
  .fusion-post-cards-grid-column.product
  .fusion-woo-product-image.fusion-post-card-image {
  padding: 14px;
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   3. Container mit den haeufigen Fragen
   --------------------------------------------------------- */
body:is(.woocommerce-shop, .tax-product_cat, .tax-product_tag)
  .post-content
  > .fusion-fullwidth:has(.fusion-faq-shortcode) {
  background-color: var(--hof-shop-faq);
}

/* ---------------------------------------------------------
   4. Hover (optional - Block loeschen, wenn nicht gewuenscht)

   Karte hebt sich leicht, das Foto zoomt minimal. Gleiche
   Sprache wie die Hover-Effekte auf der Startseite.
   --------------------------------------------------------- */
.fusion-grid-posts-cards
  > .fusion-post-cards-grid-column.product
  > .fusion-column-wrapper {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.fusion-grid-posts-cards
  > .fusion-post-cards-grid-column.product
  > .fusion-column-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px -24px rgba(81, 69, 62, 0.55);
}

.fusion-grid-posts-cards
  .fusion-post-cards-grid-column.product
  .fusion-woo-product-image
  img {
  transition: transform 0.5s ease;
}

.fusion-grid-posts-cards
  .fusion-post-cards-grid-column.product
  > .fusion-column-wrapper:hover
  .fusion-woo-product-image
  img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .fusion-grid-posts-cards
    > .fusion-post-cards-grid-column.product
    > .fusion-column-wrapper,
  .fusion-grid-posts-cards
    .fusion-post-cards-grid-column.product
    .fusion-woo-product-image
    img {
    transition: none;
  }

  .fusion-grid-posts-cards
    > .fusion-post-cards-grid-column.product
    > .fusion-column-wrapper:hover,
  .fusion-grid-posts-cards
    .fusion-post-cards-grid-column.product
    > .fusion-column-wrapper:hover
    .fusion-woo-product-image
    img {
    transform: none;
  }
}