/*
 * FluentCart Klubarbeit — Shared Styles
 *
 * Hier können --fct-* CSS-Variablen überschrieben werden um das Design
 * aller FluentCart-Blöcke (nativ + custom) zentral anzupassen.
 *
 * Beispiel:
 *   :root {
 *       --fct-primary-text-color:  #111111;
 *       --fct-btn-bg-color:        #e63946;
 *       --fct-card-bg:             #fafafa;
 *       --fct-border-color:        #e0e0e0;
 *   }
 *
 * Verfügbare FluentCart-Variablen (Standard-Werte):
 *   --fct-primary-text-color    #2F3448  — Überschriften, Produktname
 *   --fct-secondary-text-color  #565865  — Zusatztext, Beschreibung
 *   --fct-primary-bg-color      #253241  — Button-Hintergrund, aktive Filter
 *   --fct-secondary-bg-color    #EAECF0  — Sekundäre Hintergründe
 *   --fct-border-color          #d6dae1  — Rahmenfarbe
 *   --fct-divider-color         #EAECF0  — Trennlinien
 *   --fct-btn-bg-color          → --fct-primary-bg-color
 *   --fct-btn-text-color        #ffffff
 *   --fct-card-bg               #ffffff  — Karten-Hintergrund
 */

/* Overrides hier eintragen: */

/* ── Card Padding entfernen ─────────────────────────────────────────────── */
.fct-product-card {
    padding: 0 !important;
}

/* ── Image-Wrapper Fix (ACSS/Etch Builder) ─────────────────────────────────
   Originale -4px Margins nicht mehr nötig da padding: 0.
   Wrapper bekommt border-radius damit das Bild an den oberen Ecken rund ist.
   ───────────────────────────────────────────────────────────────────────── */
.fct-product-card .fct-product-card-image-wrap,
.fct-product-card .fct-dynamic-product-image {
    margin: 0 !important;
    border-radius: 7px 7px 0 0;
    overflow: hidden;
}

/* ── Image Zoom on Hover ────────────────────────────────────────────────────
   transform-origin und will-change verhindern das Wackeln beim Zurückgehen.
   linear statt ease für einen gleichmäßigen, ruhigen Zoom.
   ───────────────────────────────────────────────────────────────────────── */
.fct-product-card .fct-product-card-image-wrap img,
.fct-product-card .fct-dynamic-product-image img {
    transition: transform 0.3s linear !important;
    transform-origin: center center;
    will-change: transform;
}

.fct-product-card:hover .fct-product-card-image-wrap img,
.fct-product-card:hover .fct-dynamic-product-image img {
    transform: scale(1.04);
}