/* Gesamtes Widget */
.wat-product-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  border: none; /* kein Rahmen */
  background: transparent; /* transparentes Grundlayout */
}

/* Hauptprodukt-Bereich */
.wat-product-main {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 30px auto;
}

.wat-product-main img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.wat-product-main a:hover img {
  transform: scale(1.03);
}

/* Variations-Grid */
.wat-product-variations {
  display: grid;
  grid-template-columns: repeat(var(--wat-grid-columns, auto-fit), minmax(180px, 1fr));
  gap: var(--wat-gap, 20px);
  width: 100%;
  max-width: 1000px;
  margin-top: 20px;
  align-items: stretch; /* Kartenhöhe pro Reihe angleichen */
}

/* Einzelne Variation */
.wat-variation {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;                /* kompaktere Innenabstände */
  padding: 12px;            /* kompakteres Padding */
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: transparent;  /* wird vom Editor via Control überschrieben */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  height: 100%;             /* füllt die Zeilenhöhe der Grid-Reihe */
}

.wat-variation:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

/* Bildblock */
.wat-variation .wat-product-link {
  display: block;
  width: 100%;
}

.wat-variation img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  /* Höhe begrenzen, damit Karten nicht zu hoch werden */
  max-height: 160px;
  object-fit: contain;
  /* Optional: einheitliches Bildverhältnis
     (kann entfernt werden, wenn nicht gewünscht) */
  aspect-ratio: 1 / 1;
}

/* Preis und Attribute */
.wat-variation-price {
  font-weight: 700;
  margin-top: 6px;
  color: #222;
}

.wat-variation-attributes {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #444;
}

/* Etwas kompakter auf Mobile */
@media (max-width: 768px) {
  .wat-variation img {
    max-height: 140px;
  }
}