/* Interaction layer: keep hover/motion isolated for easier maintenance. */

/* -------- Product Images: Gentle Motion + Light Hover -------- */
/* MOTION: steuert die sanfte Dauerbewegung der Produktbilder.
 * Optionen:
 * - Dauer: `animation: ... 5.4s ...` (groesser = ruhiger, kleiner = lebendiger)
 * - Hoehe: in `@keyframes` bei `translateY(-4px)` (kleiner = dezenter)
 * - Aus: `animation: none;`
 */
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img,
.wp-block-woocommerce-product-template li img,
.single-product div.product .woocommerce-product-gallery__image img{
  transition:transform .28s ease,filter .28s ease;
  animation:fp-product-image-float 4.4s ease-in-out infinite;
  transform-origin:center center;
}

/* HOVER: steuert die Reaktion bei Mauskontakt (leichter Lift/Zoom).
 * Optionen:
 * - Lift: `translateY(-2px)` (0px = kein Lift)
 * - Zoom: `scale(1.02)` (1 = kein Zoom)
 * - Farbintensitaet: `saturate(1.03)` (1 = neutral)
 * - Aus: gesamten `:hover`-Block entfernen oder Werte neutral setzen
 */
.woocommerce ul.products li.product:hover img,
.wc-block-grid__product:hover .wc-block-grid__product-image img,
.wc-block-components-product:hover .wc-block-components-product-image img,
.wp-block-woocommerce-product-template li:hover img,
.single-product div.product .woocommerce-product-gallery__image:hover img{
  transform:translateY(-2px) scale(1.02);
  filter:saturate(1.03);
  animation-play-state:paused;
}

/* KEYFRAMES: Bewegungsprofil fuer MOTION (oben via animation referenziert). */
@keyframes fp-product-image-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}