/* ===== LA MESMA Produktkarte 2026 (CB) - nach design-entwuerfe/product-card-v1.html =====

   Bewusst additiv: Woodmarts Kachel bleibt stehen, hier kommen nur die
   Bausteine des Entwurfs dazu (Tulipe-Hinweis, Groessen, Farbpunkte,
   Steuerzeile) plus die Typografie von Titel, Preis und Unterzeile.
   Zweitbild beim Hover kann Woodmart selbst, das wird nicht angefasst. */

.wd-product{
  --lm-ink:#111110;
  --lm-ink-soft:#3A3A3A;
  --lm-muted:#767676;
  --lm-paper:#FFFFFF;
  --lm-line:rgba(17,17,16,.22);
  --lm-book:"MaisonNeueExt-Book",Arial,Helvetica,sans-serif;
}

/* ---------- Bildkasten auf festes 2:3 ----------

   WooCommerce schneidet die Rasterbilder hart auf 430x645 zu, das Raster ist
   also von Haus aus gleichmaessig. Ein einzelnes Bild kam trotzdem mit 644 px
   und machte seine Kachel 1 px niedriger. Ein festes Seitenverhaeltnis mit
   object-fit:cover macht das Raster unabhaengig von solchen Ausreissern, auch
   wenn spaeter ein Bild in einem anderen Mass hochgeladen wird. */
.wd-product .wd-product-img-link,
.wd-product .wd-product-img-hover{aspect-ratio:2/3;overflow:hidden}
.wd-product .wd-product-img-link img,
.wd-product .wd-product-img-hover img{width:100%;height:100%;object-fit:cover}

/* ---------- Tulipe-Hinweis, oben links im Bild ---------- */
.wd-product .wd-product-thumb{position:relative}
.wd-product .lm-card-badge{
  position:absolute;top:14px;left:14px;z-index:3;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  font-family:var(--lm-book);font-weight:400;font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lm-ink);padding:6px 10px;line-height:1;
  pointer-events:none;
}

/* ---------- Groessen, faehrt beim Hover von unten ein ---------- */
.wd-product .lm-card-quick{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  padding:14px 16px 16px;
  transform:translateY(102%);
  transition:transform .45s cubic-bezier(.19,1,.22,1);
}
.wd-product .wd-product-thumb:hover .lm-card-quick,
.wd-product .lm-card-quick:focus-within{transform:translateY(0)}
.wd-product .lm-card-ql{
  display:block;margin-bottom:10px;
  font-family:var(--lm-book);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lm-muted);
}
.wd-product .lm-card-sizes{display:flex;gap:6px}
.wd-product .lm-card-size{
  flex:1;text-align:center;
  font-family:var(--lm-book);font-size:11px;letter-spacing:.06em;
  padding:9px 0;border:1px solid var(--lm-line);color:var(--lm-ink);
  background:transparent;transition:background .25s,color .25s,border-color .25s;
}
.wd-product .lm-card-size:hover{background:var(--lm-ink);color:#fff;border-color:var(--lm-ink)}
/* Nicht lieferbar: sichtbar, aber erkennbar durchgestrichen. Der Klick fuehrt
   trotzdem auf die Artikelseite, dort steht, in welchen Farben es die Groesse
   noch gibt. Dieselbe Logik wie auf der Artikelseite. */
.wd-product .lm-card-size-out{color:var(--lm-muted);text-decoration:line-through;opacity:.65}

/* Auf Zeigegeraeten ohne Hover waere die Leiste nie erreichbar. */
@media (hover:none){
  .wd-product .lm-card-quick{display:none}
}

/* ---------- Farbpunkte ---------- */
/* Rund doppelt so gross wie im Entwurf (dort 19 px). Auf Wunsch von Arno am
   27.08.2026: Bei Produktbildern statt Farbpunkten ist bei 19 px nicht zu
   erkennen, welche Farbe gemeint ist. */
.wd-product .lm-card-swatches{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.wd-product .lm-card-swatch{
  width:38px;height:38px;border-radius:50%;position:relative;display:block;
  border:1px solid rgba(17,17,16,.18);flex:none;
}
.wd-product .lm-card-swatch::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid transparent;transition:border-color .25s;
}
.wd-product .lm-card-swatch.is-aktiv::after{border-color:var(--lm-ink)}
.wd-product .lm-card-swatch:hover::after{border-color:rgba(17,17,16,.4)}

.wd-product .lm-card-swatch-bild{background-size:cover;background-position:50% 30%}

/* Der Entwurf hat keinen Kaufknopf auf der Kachel, die Groessenleiste im Bild
   uebernimmt das. "Ausfuehrung waehlen" darunter waere ein zweiter Weg zum
   selben Ziel.

   Zwei Klassen mehr als noetig: Woodmart setzt display:flex ueber
   .wd-product.wd-hover-standard .wd-add-btn und gewinnt sonst. Lieber ein
   laengerer Selektor als ein !important. */
.wd-product .wd-product-wrapper .wd-add-btn,
.wd-product.wd-hover-standard .wd-product-wrapper .wd-add-btn{display:none}

/* Auf Zeigegeraeten ohne Hover ist die Groessenleiste ausgeblendet. Dort
   bleibt der Knopf der sichtbare Weg zum Produkt. */
@media (hover:none){
  .wd-product .wd-product-wrapper .wd-add-btn,
  .wd-product.wd-hover-standard .wd-product-wrapper .wd-add-btn{display:flex}
}

/* ---------- Steuer- und Versandzeile ---------- */
.wd-product .lm-card-legal{
  margin-top:12px;font-size:11.5px;color:var(--lm-muted);line-height:1.55;
}
.wd-product .lm-card-legal b{font-family:var(--lm-book);font-weight:400;color:var(--lm-ink-soft)}

/* ---------- Anordnung: Name und Preis in EINER Zeile ----------

   Der Entwurf setzt den Namen links und den Preis rechts auf dieselbe Zeile,
   darunter erst die Unterzeile. Woodmart stapelt beides untereinander. Statt
   die Vorlage zu ersetzen, wird der ohnehin vorhandene Flex-Container
   umsortiert. Reihenfolge im DOM: Bild, Titel, Kategorien, Preis, Farbpunkte,
   Steuerzeile, Kaufknopf. */
.wd-product .wd-product-wrapper{flex-direction:row;flex-wrap:wrap;align-items:baseline}
.wd-product .wd-product-thumb{flex:0 0 100%;order:1}
/* flex:1 1 0 mit min-width:0, sonst nimmt der Titel die volle Breite und
   der Preis rutscht in die naechste Zeile. */
.wd-product .wd-entities-title{order:2;flex:1 1 0;min-width:0;width:auto;margin-top:16px;margin-bottom:0}
.wd-product .price{order:3;flex:0 0 auto;margin-left:auto;margin-top:16px;text-align:right}
.wd-product .lm-card-sub{order:4;flex:0 0 100%}
.wd-product .lm-card-swatches{order:5;flex:0 0 100%}
.wd-product .lm-card-legal{order:6;flex:0 0 100%}
.wd-product .wd-add-btn{order:7;flex:0 0 100%}
.wd-product .wd-product-brands-links,
.wd-product .wd-product-sku,
.wd-product .wd-rating{order:4;flex:0 0 100%}

/* ---------- Sternebewertung auf der Karte ----------

   Sie hiess hier nie `.wd-rating`, sondern `.star-rating`, deshalb lief die
   Regel darueber ins Leere. Ohne `order` gilt fuer sie `order: 0`, und damit
   stand sie VOR dem Bild (order 1): Die eine bewertete Karte im Raster war
   dadurch nach unten verschoben, alle anderen standen hoeher.

   Ausgeblendet statt umsortiert, nach dem Entwurf product-card-v1.html, der
   auf der Karte keine Bewertung vorsieht. Der Grund ist nicht nur Gestaltung:
   Von 109 veroeffentlichten Produkten haben genau drei eine Bewertung. Sterne
   auf einer von vier Kacheln sind damit kein Vertrauensbeweis, sondern lesen
   sich, als waeren die anderen drei ungepruefte Ware.

   Entscheidung Arno vom 26.08.2026: Die Sterne bleiben, sie wandern aber ans
   ENDE der Karte. Das ist die einfachere der beiden erwogenen Loesungen; die
   Alternative waere gewesen, sie wie das Tulipe-Schild ueber das Foto zu
   legen, was eine zweite Ueberlagerung im selben Bild bedeutet haette und auf
   hellen Aufnahmen einen eigenen Hintergrund braeuchte.

   `order: 8` setzt sie hinter den Kaufknopf (order 7), also ganz nach unten.
   Die Kacheln bleiben dadurch auf einer Hoehe: Was unterhalb des Bildes steht,
   verschiebt das Bild nicht mehr. Genau das war der Fehler vorher, als sie ohne
   `order` vor dem Bild landeten.

   Eng auf `.wd-product` begrenzt: Auf der Produktseite bleiben Bewertungen
   unveraendert, dort heissen sie ohnehin anders
   (`.woocommerce-product-rating`). */
.wd-product .star-rating{order:8;flex:0 0 100%;margin-top:10px}

/* Kategorienliste ausblenden statt entfernen: der Entwurf nennt an dieser
   Stelle Warentyp und Farbe, die Liste selbst bleibt im Markup. */
.wd-product .wd-product-cats{display:none}
.wd-product .lm-card-sub{margin-top:5px;font-size:13.5px;color:var(--lm-muted)}

/* ---------- Typografie aus dem Entwurf ---------- */
.wd-product .wd-entities-title{
  font-family:var(--lm-book);font-weight:400;font-size:16.5px;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.35;
}
.wd-product .price{font-size:16.5px;white-space:nowrap}
.wd-product .wd-product-cats{margin-top:5px;font-size:13.5px;color:var(--lm-muted)}

@media (max-width:560px){
  .wd-product .wd-entities-title{font-size:13.5px}
  .wd-product .price{font-size:13.5px}
  .wd-product .lm-card-legal{font-size:10.5px}
  /* Zwei Kacheln nebeneinander sind hier rund 158 px breit. Name und Preis
     in einer Zeile lassen dem Namen keine 100 px, der Titel zerfaellt in
     viele Zeilen. Deshalb ab hier untereinander. */
  .wd-product .wd-entities-title{flex:0 0 100%}
  .wd-product .price{flex:0 0 100%;margin-left:0;margin-top:4px;text-align:left}

  /* 38 px mal fuenf brechen auf der 168 px breiten Kachel auf zwei Zeilen um
     und fressen 86 px Hoehe. 28 px mit 6 px Abstand passen in eine Zeile. */
  .wd-product .lm-card-swatches{gap:6px}
  .wd-product .lm-card-swatch{width:28px;height:28px}
}

@media (prefers-reduced-motion:reduce){
  .wd-product .lm-card-quick{transition:none}
}