/* POSprom: Warenkorb und Bestellübersicht der Kasse (01.11.2026).
   1. Leerer Warenkorb: Warenkorb-Symbol statt traurigem Gesicht; "Neu im Shop" als Karten wie in
      den Shop-Listen (posprom-shop.css, ul.products): gleich große Bildrahmen, Titel, Preis,
      breiter grüner Knopf. Bilder vollständig (contain) statt beschnitten, weil einige
      Produktbilder Grafiken mit Text sind.
   2. Lieferumfang der Kassensysteme als Stichpunkte (Einträge aus warenkorb.php), Kurzbeschreibung
      klein wie die übrigen Angaben.
   3. Warenkorbzeilen auf dem Handy: Preis wurde rechts abgeschnitten (Nachtrag 01.11.2026).
   Gewicht wie bestellung.css: "body.woocommerce-page .entry-content" schlägt die Rechtstext-
   Regeln aus posprom-shop.css, die auch hier greifen (sie färbten die Knöpfe grün auf grau).
   Laden: mu-plugins/posprom-kasse-bestellung.php (Warenkorb und Kasse). */

/* ---------- 1. Leerer Warenkorb ---------- */
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block { padding: .5rem 0 1rem; }

body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title {
  margin: 0 0 .5rem !important; font-size: 1.5rem !important; font-weight: 700 !important;
  line-height: 1.3; text-align: center; color: var(--pp-gray-900, #18181b);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  content: ""; display: block; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.25rem;
  -webkit-mask-image: none; mask-image: none; border-radius: 50%;
  background: var(--pp-green-50, #f2faea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233d7126' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3.5h2.6l2.4 11.2a1.6 1.6 0 0 0 1.6 1.3h8.3a1.6 1.6 0 0 0 1.6-1.2L21 7H6.1'/%3E%3C/svg%3E") center / 2.1rem no-repeat;
  box-shadow: inset 0 0 0 1px var(--pp-green-200, #c4e79f);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block hr.wp-block-separator { display: none; }
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block h2.wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  margin: 2.75rem 0 1.25rem !important; font-size: 1.25rem !important; font-weight: 700 !important;
  text-align: center; color: var(--pp-gray-900, #18181b);
}

/* Karten wie in den Shop-Listen */
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;
  margin: 0 !important; padding: 0 !important; list-style: none;
}
@media (min-width: 1024px) {
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__products::before,
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__products::after { content: none; display: none; }
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  position: relative; display: flex; flex-direction: column;
  width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important; float: none;
  padding: 1.25rem; overflow: hidden; list-style: none; text-align: center; font-size: 1rem;
  background: #fff; border: 1px solid var(--pp-gray-200, #e4e4e7) !important; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(24, 24, 27, .06);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
  border-color: var(--pp-green-300, #a1d76e) !important;
  box-shadow: 0 16px 30px -10px rgba(24, 24, 27, .2); transform: translateY(-4px);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block a.wc-block-grid__product-link {
  display: block; color: inherit !important; text-decoration: none !important;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2;
  margin: -1.25rem -1.25rem 1rem !important; overflow: hidden;
  background: #fff; border-bottom: 1px solid var(--pp-gray-100, #f4f4f5);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0 !important;
  object-fit: contain; border-radius: 0;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  margin: 0 0 .5rem !important; min-height: 2.6em; font-size: 1.05rem !important; font-weight: 700 !important;
  line-height: 1.3; color: var(--pp-gray-900, #18181b);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  display: block; margin: .25rem 0 .15rem !important; font-size: 1.5rem !important; font-weight: 700;
  line-height: 1.25; color: var(--pp-gray-900, #18181b) !important;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price .pp-price-request {
  font-size: 1.15rem; color: var(--pp-green-700, #3d7126);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block p.wc-gzd-additional-info {
  display: block; margin: 0 !important; font-size: .75rem; line-height: 1.5; color: var(--pp-gray-400, #a1a1aa);
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block p.wc-gzd-additional-info a {
  color: inherit !important; text-decoration: underline !important; text-underline-offset: 2px;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  margin: auto 0 0 !important; padding-top: 1.1rem; width: 100%;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.wp-block-button__link {
  display: flex; align-items: center; justify-content: center; width: 100%; margin: 0;
  padding: .7rem 1rem !important; border: 0 !important; border-radius: 8px !important;
  background: var(--pp-green-600, #4f9230) !important; color: #fff !important;
  font-size: .9rem !important; font-weight: 600; line-height: 1.25; text-decoration: none !important;
  transition: background-color .15s ease;
}
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.wp-block-button__link:hover,
body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart a.wp-block-button__link:focus-visible {
  background: var(--pp-green-700, #3d7126) !important;
}

/* Handy: Listenkarten (Bild links, Titel und Preis daneben, Knopf darunter). Zwei Spalten waren
   zu schmal, der Knopftext brach dreimal um. Das Bild fliesst links, der Knopf hebt das auf. */
@media (max-width: 599px) {
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { display: block; padding: .9rem; text-align: left; }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover { transform: none; }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
    float: left; width: 6rem; aspect-ratio: 1 / 1; margin: 0 .9rem .25rem 0 !important;
    border: 1px solid var(--pp-gray-100, #f4f4f5); border-radius: .6rem;
  }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
    min-height: 0; margin: .1rem 0 .35rem !important; font-size: 1rem !important;
  }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { margin: 0 !important; font-size: 1.25rem !important; }
  body.woocommerce-page .entry-content .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart { clear: both; padding-top: .8rem; }
}

/* ---------- 2. Lieferumfang der Kassensysteme (Warenkorb und Kasse) ---------- */
body.woocommerce-page .entry-content .wc-block-components-product-metadata { display: flex; flex-direction: column; }
body.woocommerce-page .entry-content .wc-block-components-product-details:has(.wc-block-components-product-details__lieferumfang) {
  order: 2; margin: .5rem 0 0; padding: 0; list-style: none;
  font-size: .8125rem; line-height: 1.5; color: var(--pp-gray-600, #52525b);
}
/* Überschrift zuerst: Germanized sortiert Zusatzzeilen mit order: 950 nach hinten (style-cart.css). */
body.woocommerce-page .entry-content .wc-block-components-product-details .wc-block-components-product-details__lieferumfang {
  order: -1; display: block; margin: 0 0 .15rem; font-weight: 600; color: var(--pp-gray-800, #27272a);
}
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang .wc-block-components-product-details__value { display: none; }
/* WooCommerce trennt die Einträge mit " / " (span aria-hidden); in der Liste nicht nötig. */
body.woocommerce-page .entry-content .wc-block-components-product-details:has(.wc-block-components-product-details__lieferumfang) span[aria-hidden="true"] { display: none; }
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ li,
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ span {
  position: relative; display: block; margin: 0; padding-left: 1.05rem; list-style: none;
}
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ li::before,
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ span::before {
  content: ""; position: absolute; left: .3rem; top: .6em;
  width: .32rem; height: .32rem; border-radius: 50%; background: var(--pp-green-600, #4f9230);
}
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ li::after,
body.woocommerce-page .entry-content .wc-block-components-product-details__lieferumfang ~ span::after { content: none; }

/* Kurzbeschreibung unter dem Artikelnamen: Die Rechtstext-Regel aus posprom-shop.css setzt Absätze
   auf 16 px, größer als der Artikelname. Klein und grau wie die übrigen Angaben. */
body.woocommerce-page .entry-content .wc-block-components-product-metadata .wc-block-components-product-metadata__description :is(p, li) {
  margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--pp-gray-600, #52525b);
}

/* ---------- 3. Warenkorbzeilen auf dem Handy ---------- */
/* WooCommerce (blocks/cart.css) baut die Zeile als Raster: Bild 80 px, Text 132 px, Abstände je 16 px
   und der Zeilenpreis in einer weiteren Spalte. Mit dem Mengenwähler des Themes braucht das 362 px,
   auf dem Handy ist der Inhaltsbereich nur rund 300 px breit: Der Preis wurde rechts abgeschnitten.
   Jetzt: Bild und Angaben nebeneinander, darunter Mengenwähler links und Zeilenpreis rechts.
   ".is-mobile" setzt WooCommerce selbst, sobald der Warenkorb höchstens 400 px breit ist. */
body.woocommerce-page .entry-content .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 80px minmax(0, 1fr); column-gap: 0;
}
/* Einheitliche quadratische Vorschaubilder (64 px), damit die Leiste darunter nie ins Bild ragt. */
body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__image img {
  width: 64px; height: 64px; max-width: none; object-fit: contain;
  background: #fff; border: 1px solid var(--pp-gray-100, #f4f4f5); border-radius: .5rem;
}
body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__product { grid-column: 2; padding-right: 0; }
/* Mindesthöhe: 64 px Bild + 12 px Abstand + 38 px Mengenwähler. */
body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__wrap {
  display: flex; flex-direction: column; min-height: 114px;
}
body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__quantity {
  margin: auto 0 0 -80px; padding-top: 12px;
}
/* Zeilenpreis unten rechts, auf Höhe des Mengenwählers. */
body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__total {
  grid-column: 2; grid-row: 1; align-self: end; justify-self: end;
  display: flex; align-items: center; min-height: 38px; font-weight: 700;
}
/* Unter 360 px reicht der Platz neben Mengenwähler und Papierkorb nicht für fünfstellige Beträge:
   Preis in eine eigene Zeile darunter. */
@media (max-width: 359px) {
  body.woocommerce-page .entry-content .wc-block-cart.is-mobile .wc-block-cart-item__total {
    grid-column: 1 / -1; grid-row: 2; min-height: 0; padding-top: .5rem;
  }
}
