/* Ultra PDP: mobile Reihenfolge ohne JS
   Reihenfolge: title → price → images → short → rest
   (Desktop >768px bleibt unverändert)
*/
@media (max-width: 768px){
  /* 1) Gesamt-Layout der PDP auf Grid umstellen */
  .single-product div.product{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "price"
      "images"
      "short"
      "rest";
    row-gap: .75rem;
  }

  /* 2) Galerie als Grid-Item (deckt beide gängigen Markups ab) */
  .single-product div.product .woocommerce-product-gallery,
  .single-product div.product .images{
    grid-area: images;
    width: 100%;
  }

  /* 3) Summary-Kinder in die Grid-Ebene „heben“ */
  .single-product div.product .entry-summary{
    display: contents; /* macht NUR die direkten Kinder zu Grid-Items */
  }

  /* 4) Default: alles im Summary zunächst nach „rest“ … 
  .single-product div.product .entry-summary > *{
    grid-area: rest;
  }*/

  /* … außer: Titel, Preis, Kurzbeschreibung, die bekommen eigene Areas */
  .single-product div.product .entry-summary .product_title{
    grid-area: title;
    margin: 0; /* optional knackiger */
  }

  /* Preis: deckt .price und p.price ab (Theme-Varianten) */
  .single-product div.product .entry-summary .price,
  .single-product div.product .entry-summary p.price{
    grid-area: price;
    margin: 0;
  }

  /* Kurzbeschreibung: Woo-Standard + mögliche Theme-Variante */
  .single-product div.product .entry-summary .woocommerce-product-details__short-description,
  .single-product div.product .entry-summary .short-description{
    grid-area: short;
  }

  /* Optional: etwas Luft unter der Kurzbeschreibung */
  .single-product div.product .entry-summary .woocommerce-product-details__short-description{
    margin-bottom: .5rem;
  }
}