/* ===== 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%}

/* 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}
}