/* ==== LA MESMA Artikeldetailseite 2026: Farbauswahl ====
   Uebernommen aus pdp-style.css des Entwurfs. Bewusst eng auf .lm-pdp-*
   begrenzt, damit nichts am uebrigen Woodmart-Aufbau haengen bleibt. */

.lm-pdp-farben {
  margin: 18px 0 22px;
}

.lm-pdp-farben-titel {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #767676;
}

.lm-pdp-farbe-aktiv {
  color: #141414;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.lm-pdp-sw-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-start;
}

.lm-pdp-sw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
  text-align: center;
  text-decoration: none;
  color: #141414;
}

.lm-pdp-sw-img {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: #f0f0f0;
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .12);
  transition: box-shadow .18s ease;
}

.lm-pdp-sw-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.lm-pdp-sw:hover .lm-pdp-sw-img,
.lm-pdp-sw:focus-visible .lm-pdp-sw-img {
  box-shadow: 0 0 0 1px rgba(20, 20, 20, .45);
}

.lm-pdp-sw.is-aktiv .lm-pdp-sw-img {
  box-shadow: 0 0 0 2px #141414;
}

.lm-pdp-sw-name {
  font-size: 11.5px;
  line-height: 1.25;
  color: #767676;
  display: block;
}

.lm-pdp-sw.is-aktiv .lm-pdp-sw-name {
  color: #141414;
}

/* Preis nur, wenn er von der aktiven Farbe abweicht. Stardust kostet 185
   statt 145 Euro, das gehoert an den Punkt und nicht in eine Fussnote. */
.lm-pdp-sw-preis {
  display: block;
  font-size: 11px;
  color: #141414;
}

.lm-pdp-sw-preis .woocommerce-Price-amount {
  font-size: inherit;
}

/* ==== Groessen, die es in dieser Farbe nicht gibt ====
   Bewusst nicht ausgegraut und tot, sondern durchgestrichen und anklickbar:
   Der Klick nennt die Farben, in denen es die Groesse gibt. Deshalb auch
   cursor:pointer und ein sichtbarer Fokus. */

.wd-swatch.lm-pdp-size-off {
  position: relative;
  cursor: pointer;
  opacity: .55;
}

.wd-swatch.lm-pdp-size-off .wd-swatch-text {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.wd-swatch.lm-pdp-size-off:hover,
.wd-swatch.lm-pdp-size-off:focus-visible {
  opacity: 1;
  outline: 1px solid #141414;
  outline-offset: 1px;
}

.lm-pdp-size-hinweis {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #767676;
  /* Woodmart stellt die Zelle der Groessenwahl auf Grossbuchstaben. Das ist
     fuer "S M L XL" richtig, fuer einen ganzen Satz nicht. */
  text-transform: none;
  letter-spacing: 0;
}

.lm-pdp-size-hinweis:empty {
  display: none;
}

.lm-pdp-size-hinweis a {
  color: #141414;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==== Festes Bildformat ====
   Der Shop fuehrt zwei Formate nebeneinander: 50 Produkte im Verhaeltnis 2:3,
   18 aus der neuen Kollektion im Verhaeltnis 3:4. WooCommerce beschneidet im
   Raster hart auf 2:3, auf der Produktseite dagegen gar nicht. Dort stehen die
   3:4-Bilder deshalb sichtbar kuerzer, die Linie stimmt nicht. Das ist Esthers
   Punkt vom 04.08. ("die Formate passen nur bei der Robe Fulla noch nicht").

   Ein fester Rahmen macht das unabhaengig vom hochgeladenen Format. Der
   Ausschnitt sitzt bewusst weit oben, damit keine Koepfe abgeschnitten werden. */

.woocommerce-product-gallery__image img,
.wd-carousel-item .woocommerce-product-gallery__image img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
  height: auto;
}

/* ==== Kicker und Ueberschrift ==== */

/* Die Produktspalte ist ein Flex-Layout, und das Theme zieht die Ueberschrift
   mit `order: -100` an den Anfang. Ohne eigene Ordnung landet der Kicker
   darunter, obwohl er im Dokument davor steht. */
.lm-pdp-kicker {
  order: -101;
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .12em;
  color: #767676;
  text-transform: uppercase;
}

/* Die Grossschreibung kommt aus einem eingebetteten Stylesheet:
   `.summary .product_title.entry-title { text-transform: uppercase !important }`.
   Gegen ein !important hilft nur ein !important, deshalb steht es hier. Es ist
   die einzige Stelle im Plugin mit dieser Ausnahme. Ohne sie bleibt
   "MILELE AFRIKA" stehen statt "MILELE Afrika". */
.summary .product_title.entry-title.lm-pdp-titel,
h1.lm-pdp-titel {
  text-transform: none !important;
  letter-spacing: 0;
}

.lm-pdp-titel-farbe {
  font-weight: 400;
}

/* ==== Das Herz neben der Ueberschrift ====
   Es ist kein Bild, sondern das Schriftzeichen "♡" als ::after, gesetzt in der
   Markenschrift. Die enthaelt das Zeichen vermutlich nicht, es kommt also aus
   einer Ersatzschrift und faellt dort schmal und gestaucht aus.

   Statt am Zeichen zu drehen steht hier eine gezeichnete Kontur. Sie hat feste
   Proportionen (26 zu 23, ein Herz ist von Natur aus breiter als hoch), sieht
   in jedem Browser gleich aus und laesst sich in Farbe und Staerke steuern. */
.summary .product_title.entry-title.lm-pdp-titel::after {
  content: "";
  width: 26px;
  height: 23px;
  background-image: url("herz.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ==== Versandhinweis unter dem Preis ====
   Der Steuerhinweis steht sonst als kleines Anhaengsel direkt hinter dem
   Betrag und die Versandzeile klebt darunter. Beides zusammen in einer
   ruhigen Zeile mit Abstand, wie im Entwurf. */

.lm-pdp-preisnote {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: #8a8a8a;
  text-transform: none;
  letter-spacing: 0;
}

/* ==== Abstaende in der Produktspalte enger ziehen ====
   Das Theme setzt zwischen Bewertung, Preis, Farbe und Groesse je 40 bis 58
   Pixel. Der Entwurf haelt die Kaufentscheidung dichter beieinander, damit sie
   ohne Scrollen in einem Blick liegt. */

.summary .woocommerce-product-rating {
  margin-bottom: 8px;
}

.summary p.price {
  margin-top: 0;
  margin-bottom: 0;
}

.summary p.lm-pdp-preisnote {
  margin-bottom: 0;
}

/* Germanized legt mehrere Absaetze fuer Grundpreis, Pfand und Hinweise an. Sie
   sind bei dieser Ware alle leer, tragen aber jeweils Abstand. `legal-price-info`
   ist dabei nicht `:empty` (es enthaelt Leerraum), hat null Hoehe und trotzdem
   20 Pixel darunter. Zwischen Preis und Farbe kamen so 60 Pixel zusammen, ohne
   dass etwas darinsteht. Der Abstand nach unten faellt weg; hat der Block
   einmal Inhalt, sorgt der Abstand des naechsten Elements fuer Luft. */
.summary .wc-gzd-additional-info:empty,
.summary .b2b-bulk-discount:empty {
  display: none;
}

.summary .legal-price-info,
.summary .wc-gzd-additional-info,
.summary .b2b-bulk-discount {
  margin-bottom: 0;
}

/* Zwischen Farbe und Groesse steht ein leerer span ohne Klasse, ebenfalls ohne
   Hoehe und mit 20 Pixel darunter. Ein klassenloser span in der Produktspalte,
   der nur Abstand erzeugt, ist kein Gestaltungselement. */
.summary-inner > span:empty {
  display: none;
}

.summary-inner > span:not([class]) {
  margin-bottom: 0;
}

.summary .lm-pdp-farben {
  margin-top: 16px;
  margin-bottom: 16px;
}

.summary form.variations_form {
  margin-top: 0;
}

/* Das Anhaengsel am Preis selbst faellt weg, sein Text steht jetzt in der
   Zeile darunter. */
.summary .price .woocommerce-price-suffix,
.summary .price small.woocommerce-price-suffix {
  display: none;
}

/* ==== Produktangaben ohne Trennstriche ====
   Das Theme legt unter jede Zeile der Kurzbeschreibung eine Linie. Bei zehn
   Angaben ergibt das ein Streifenmuster, das den Blick zerhackt. Im Entwurf
   trennen Linien nur die Aufklapper voneinander, nicht die einzelnen Punkte
   darin. Die Aufklapper behalten ihre Linien deshalb ausdruecklich. */

/* Die Linien kommen aus einem eingebetteten Stylesheet mit !important
   (`.summary .woocommerce-product-details__short-description ul li`). Dagegen
   hilft nur dasselbe Mittel bei mindestens gleicher Genauigkeit. */
/* Das eingebettete Stylesheet nutzt denselben Selektor mit !important. Bei
   gleicher Genauigkeit gewinnt der spaetere, und das ist seiner. Deshalb hier
   ein `body` davor: eine Stufe genauer, damit unserer gewinnt. */
body .summary .woocommerce-product-details__short-description ul li,
body .summary .woocommerce-product-details__short-description ol li,
body .summary .woocommerce-product-details__short-description li {
  border-bottom: 0 !important;
  border-top: 0 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* ==== Vertrauenszeilen unter dem Warenkorb-Knopf ==== */

.lm-pdp-usp {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.lm-pdp-usp li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 7px;
  font-size: 13px;
  line-height: 1.45;
  color: #141414;
  text-transform: none;
  letter-spacing: 0;
}

.lm-pdp-usp svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  margin-top: 3px;
  color: #767676;
}

/* ==== "Größe finden" neben der Beschriftung ==== */

.lm-pdp-groessenlink {
  display: block;
  text-align: right;
  margin: 0 0 6px;
  font-size: 12px;
  color: #767676;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.lm-pdp-groessenlink:hover,
.lm-pdp-groessenlink:focus-visible {
  color: #141414;
}

@media (max-width: 767px) {
  .lm-pdp-sw { width: 64px; }
  .lm-pdp-sw-img { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-pdp-sw-img { transition: none; }
}

/* ==== Die drei Abschnitte unter der Produktseite ====
   Tulipe-System, Passform, Showroom. Farben und Masse aus pdp-style.css des
   Entwurfs uebernommen, auf .lm-pdp-* umbenannt.

   Die Farbfolge traegt den Rhythmus: Tulipe steht auf hellgrauem Grund,
   Passform auf weiss, Showroom auf fast schwarz. So loest sich der untere
   Seitenteil in drei erkennbare Baender auf, statt in einer Flaeche zu
   verlaufen. */

.lm-pdp-sektion {
  margin: 0;
  padding: clamp(56px, 6vw, 96px) 0;
}

.lm-pdp-sektion-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1222px;
  margin: 0 auto;
  padding: 0 22px;
}

.lm-pdp-sektion-kicker {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #767676;
}

.lm-pdp-sektion h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: 0;
  color: #111110;
}

.lm-pdp-sektion p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: #767676;
  max-width: 52ch;
}

/* Aufzaehlung mit kurzem Strich in Sand, nicht mit Punkt: so haelt es der
   Entwurf, und es passt zur ruhigen Typografie der Marke. */
.lm-pdp-sektion-liste {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.lm-pdp-sektion-liste li {
  position: relative;
  margin: 0 0 10px;
  padding-left: 19px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #767676;
}

.lm-pdp-sektion-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 1px;
  background: #cec3ae;
}

.lm-pdp-sektion-liste b {
  color: #111110;
  font-weight: 400;
}

.lm-pdp-sektion-bild {
  margin: 0;
}

.lm-pdp-sektion-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.lm-pdp-sektion-link {
  display: inline-block;
  margin-top: 4px;
  color: #111110;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bild rechts statt links: im Entwurf wechseln die Abschnitte die Seite. */
.lm-pdp-sektion-gedreht .lm-pdp-sektion-bild { order: 2; }
.lm-pdp-sektion-gedreht .lm-pdp-sektion-text { order: 1; }

/* ==== Tulipe: hellgraues Band ==== */

.lm-pdp-tulipe {
  background: #f6f6f6;
}

/* ==== Passform: weiss ====
   Die Massskizze ist eine Zeichnung, kein Foto. Sie darf nicht beschnitten
   werden, sonst fehlen die Beschriftungen an den Raendern. */

.lm-pdp-passform .lm-pdp-sektion-bild img {
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

/* ==== Showroom: dunkles Band ==== */

.lm-pdp-showroom {
  background: #111110;
  color: #fff;
  /* Luft zum naechsten Abschnitt ("Ähnliche Produkte"), sonst stossen das
     dunkle Band und die Ueberschrift hart aneinander. */
  margin-bottom: clamp(48px, 5vw, 80px);
}

.lm-pdp-showroom-inner {
  grid-template-columns: 1fr auto;
  gap: 40px;
}

.lm-pdp-showroom .lm-pdp-sektion-kicker {
  color: #cec3ae;
}

.lm-pdp-showroom h2 {
  color: #fff;
}

.lm-pdp-showroom p {
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}

.lm-pdp-showroom-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 32px;
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  transition: background .25s, color .25s, border-color .25s;
}

.lm-pdp-showroom-cta:hover,
.lm-pdp-showroom-cta:focus-visible {
  background: #fff;
  color: #111110;
  border-color: #fff;
}

.lm-pdp-showroom-cta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

@media (max-width: 900px) {
  .lm-pdp-sektion-inner { grid-template-columns: 1fr; gap: 28px; }
  /* Auf schmalen Schirmen steht das Bild immer oben, egal welche Seite. */
  .lm-pdp-sektion-gedreht .lm-pdp-sektion-bild { order: 1; }
  .lm-pdp-sektion-gedreht .lm-pdp-sektion-text { order: 2; }
  .lm-pdp-showroom-inner { grid-template-columns: 1fr; }
  .lm-pdp-showroom-cta { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-pdp-showroom-cta { transition: none; }
}