/*
 * Shop-Kopfzeile (Pattern nextamed/shop-kopfzeile): Ergebniszahl und Sortierfeld mit sichtbarem
 * Label in der Formsprache des Themes. Geladen ueber wp_enqueue_block_style('woocommerce/catalog-sorting')
 * in functions.php. Das Sortierfeld ist ein natives <select> aus WooCommerce (useLabel liefert das
 * <label for>), ohne eigene Gestaltung. Alles in :where().
 */

:root :where(.wp-block-woocommerce-catalog-sorting form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--20);
  margin: 0;
}

:root :where(.wp-block-woocommerce-catalog-sorting label) {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
}

:root :where(.wp-block-woocommerce-catalog-sorting select) {
  min-height: var(--wp--custom--touch--min-size);
  padding: 0 var(--wp--preset--spacing--30);
  border: 1px solid var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius--small);
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font: inherit;
}

/* Groesse getrennt und mit Klassenkette: WooCommerce setzt fuer jedes select auf Shopseiten
   .woocommerce-page select{font-size:small} (0,1,1) und gewinnt damit gegen :where() (0,0,0).
   Das Sortierfeld waere sonst mit 14 px auf dem Handy die kleinste Schrift der Seite. */
.wp-site-blocks .wp-block-woocommerce-catalog-sorting select {
  font-size: var(--wp--preset--font-size--medium);
}

:root :where(.wp-block-woocommerce-product-results-count) {
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--medium);
}

:root :where(.wp-block-woocommerce-product-results-count p) {
  margin: 0;
}

/* WooCommerce laesst das Sortierformular aus dem klassischen Shop schweben
   (.woocommerce .woocommerce-ordering{float:right}, 0,2,0). Ein schwebender Kasten schrumpft auf
   seinen Inhalt und haengt am rechten Rand: bei 390 px stand das Label "Sortieren nach" deshalb bei
   x=-26 und war links abgeschnitten (gemessen 13.09.). float:none gibt dem Formular die Breite
   seines Blocks, danach schrumpft das Feld wie vorgesehen. */
.wp-site-blocks .wp-block-woocommerce-catalog-sorting form {
  float: none;
  width: 100%;
  margin: 0;
}

/* Das Sortierfeld darf nie breiter werden als sein Platz: bei 390 px Bildschirm und 24 px
   Browserschrift war das select 413 px breit und die Seite scrollte waagerecht (Prueferbefund
   13.09.). min-width 0 erlaubt dem Feld im Flex-Kasten zu schrumpfen. */
:root :where(.wp-block-woocommerce-catalog-sorting) {
  min-width: 0;
  max-width: 100%;
}

:root :where(.wp-block-woocommerce-catalog-sorting select) {
  min-width: 0;
  max-width: 100%;
}

/* Unter 782 px stehen Label und Feld in einer Zeile (sonst 100 px in zwei Zeilen) und die
   Ergebniszahl darueber; das spart ueber dem Raster rund 40 px. */
@media (max-width: 781px) {
  :root :where(.nxm-kopfzeile__leiste) {
    row-gap: var(--wp--preset--spacing--20);
  }

  :root :where(.nxm-kopfzeile__leiste .wp-block-woocommerce-product-results-count) {
    flex-basis: 100%;
  }

  :root :where(.nxm-kopfzeile__leiste .wp-block-woocommerce-catalog-sorting) {
    flex: 1 1 100%;
  }

  :root :where(.nxm-kopfzeile__leiste .wp-block-woocommerce-catalog-sorting form) {
    flex-wrap: nowrap;
  }

  :root :where(.nxm-kopfzeile__leiste .wp-block-woocommerce-catalog-sorting label) {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  :root :where(.nxm-kopfzeile__leiste .wp-block-woocommerce-catalog-sorting select) {
    flex: 1 1 auto;
  }
}

/* Kopfzeile auf dem Handy dichter: Brotkrume, H1, Satz, Kategorien, Ergebniszahl und Sortierung
   standen mit 16 px Abstand so hoch, dass das erste Produkt erst bei 793 px begann (Bildschirm
   844 px). Mit 8 px bleibt die Reihenfolge ruhig und zwei Produktbilder stehen in der ersten
   Sicht. Der Abstand kommt im Fluss-Layout als margin-block-start aus der Layoutklasse des Gruppenblocks
   (.wp-container-core-group-is-layout-… > * + *, 0,1,0), nicht als gap. */
@media (max-width: 781px) {
  .wp-site-blocks .nxm-kopfzeile > * + * {
    margin-block-start: var(--wp--preset--spacing--20);
  }
}