/*
 * Produktkarte (inc/produktkarte.php, Pattern nextamed/shop-produktliste): Spaltenzahl und
 * Kartenlayout, die theme.json nicht abbilden kann. Geladen ueber
 * wp_enqueue_block_style('woocommerce/product-collection') in functions.php. Mobile first: zwei
 * Spalten, ab 640 px drei, ab 1024 px vier. Der Selektor mit drei Klassen schlaegt WooCommerces
 * .wc-block-product-template__responsive.columns-N (zwei Klassen) ohne !important. Neben der
 * Filterspalte (.nxm-shop__liste, Vorlage archive-product) bleiben es ab 1024 px drei Spalten,
 * damit Bild und Titel gross genug bleiben. Alles andere in :where(), damit Global Styles gewinnen.
 */

.wp-site-blocks .wc-block-product-template.wc-block-product-template__responsive {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

:root :where(.wc-block-product > .nxm-karte) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:root :where(.nxm-karte .wc-block-components-product-image) {
  margin: 0 0 var(--wp--preset--spacing--20);
}

/* Quadratischer Bildkasten, Bild vollstaendig darin. object-fit und aspect-ratio schreibt der
   Block inzwischen selbst an das img (Attribute scale "contain" und aspectRatio "1" in
   inc/produktkarte.php); vorher stand hier object-fit:contain und verlor gegen den Inline-Wert
   cover des Blocks, weshalb ein Drittel hoher Bilder abgeschnitten war (Prueferbefund 13.09.).
   Hier bleiben nur Breite, Hoehe und der weisse Grund fuer die Raender. */
:root :where(.nxm-karte .wc-block-components-product-image img) {
  width: 100%;
  height: auto;
  background: var(--wp--preset--color--base);
}

/* Titel auf zwei Zeilen begrenzen (Betreiber 14.09.2026): bei zwei Spalten auf dem Handy brachen
   lange Titel auf vier Zeilen und die Karten wurden ungleich hoch. Der volle Titel bleibt im
   title-Attribut des Links und auf der Produktseite lesbar. */
:root :where(.nxm-karte .wp-block-post-title) {
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

:root :where(.nxm-karte .wp-block-post-title a) {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

:root :where(.nxm-karte .wp-block-post-title a:hover),
:root :where(.nxm-karte .wp-block-post-title a:focus-visible) {
  color: var(--wp--preset--color--primary-dark);
  text-decoration: underline;
}

:root :where(.nxm-karte .nxm-karte__preis) {
  margin-top: var(--wp--preset--spacing--20);
}

/* Verfuegbarkeit (woocommerce/product-stock-indicator) direkt unter der Lieferzeit, in derselben
   Achse wie Preis, Grundpreis und Pflichthinweise: linksbuendig und in Grundgroesse. WooCommerce
   setzt text-align:center und font-size:.875em mit Klassenspezifitaet; ohne diese Regel war die
   fuer den Kauf wichtigste Zeile die kleinste und die einzige mittige (Prueferbefund 13.09.).
   "Zurzeit nicht lieferbar" und Nachbestellung in Hinweisfarbe (5,5:1 auf Weiss), Restmenge in
   Gruen dunkel. */
.wp-site-blocks .nxm-karte .wc-block-components-product-stock-indicator {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium);
  text-align: left;
}

.wp-site-blocks .nxm-karte .wc-block-components-product-stock-indicator--out-of-stock,
.wp-site-blocks .nxm-karte .wc-block-components-product-stock-indicator--available-on-backorder {
  color: var(--wp--preset--color--warning);
}

.wp-site-blocks .nxm-karte .wc-block-components-product-stock-indicator--in-stock {
  color: var(--wp--preset--color--primary-dark);
}

/* Pflichtlink "Versandkosten" (Germanized) als 44-px-Ziel: er lag mit 17 px Hoehe 12 px ueber dem
   Kaufknopf und war mit dem Daumen kaum zu treffen, ohne den Knopf zu erwischen (Prueferbefund
   13.09.). Die Zeile waechst damit auf Zielhoehe; der Knopf haelt ueber padding-top Abstand. */
:root :where(.nxm-karte__hinweise a) {
  display: inline-flex;
  align-items: center;
  min-height: var(--wp--custom--touch--min-size);
}

/* Knopf immer am unteren Rand der Karte, auch bei kurzem Titel oder fehlender Verfuegbarkeitszeile:
   ohne diese Regel stehen die Knoepfe einer Zeile auf unterschiedlicher Hoehe. Klassenkette, weil
   der Abstandsregel des Gruppenblocks (.wp-container-core-group-is-layout-… > * + *, 0,1,0) sonst
   das margin-top gewinnt; :where() hat Spezifitaet 0. */
.wp-site-blocks .nxm-karte > .wp-block-button {
  margin-top: auto;
  padding-top: var(--wp--preset--spacing--20);
}

/* Knopf ueber die volle Kartenbreite mit schmalerem Innenabstand, damit "In den Warenkorb" auf dem
   Handy in eine Zeile passt. Spezifisch, weil elements.button (.wp-element-button) und WooCommerce
   (.wc-block-components-product-button__button) eigene Innenabstaende mit Klassenspezifitaet setzen. */
.wp-site-blocks .nxm-karte .wp-block-button__link {
  width: 100%;
  padding-inline: var(--wp--preset--spacing--20);
  text-align: center;
  white-space: nowrap;
}

/* Nicht kaufbare Artikel: "Details ansehen" als Umriss-Knopf, damit je Karte nur eine gefuellte
   Aktion steht (Regel "Eine Hauptaktion je Sicht"). Vorher sah die nicht kaufbare Karte aus wie
   die kaufbare (Prueferbefund 13.09.). WooCommerce setzt die Klasse add_to_cart_button nur, wenn
   das Produkt kaufbar und vorraetig ist (ProductButton.php); der Stil kann deshalb nicht als
   Blockstil (styles/button-outline.json) gesetzt werden, sondern nur hier - dieselben Presets. */
.wp-site-blocks .nxm-karte .wp-block-button__link:not(.add_to_cart_button) {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--primary-dark);
}

.wp-site-blocks .nxm-karte .wp-block-button__link:not(.add_to_cart_button):hover,
.wp-site-blocks .nxm-karte .wp-block-button__link:not(.add_to_cart_button):focus-visible {
  background: var(--wp--preset--color--primary-soft);
  color: var(--wp--preset--color--primary-deep);
}

@media (min-width: 640px) {
  .wp-site-blocks .wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .wp-site-blocks .wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
  }

  .wp-site-blocks .nxm-shop__liste .wc-block-product-template.wc-block-product-template__responsive {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}