/* Desktop remains a table. On small screens every product becomes a readable card. */
@media (max-width: 720px) {
  .haag-app .haag-table-scroll { overflow: visible; border: 0; margin: 16px 0 30px; }
  .haag-app .haag-table { display: block; width: 100%; min-width: 0; border: 0; font-size: 15px; }
  .haag-app .haag-table thead { display: none; }
  .haag-app .haag-table tbody { display: grid; gap: 12px; }
  .haag-app .haag-table tbody tr,
  .haag-app .haag-table tbody tr:nth-child(even) {
    display: grid; grid-template-columns: minmax(0, 1fr) 90px;
    grid-template-areas: "name qty" "size qty" "pack qty" "price qty" "total total";
    gap: 2px 12px; width: 100%; margin: 0; padding: 17px;
    background: #fff; border: 1px solid #dce5de; box-shadow: 0 2px 7px rgba(24,62,39,.045);
  }
  .haag-app .haag-table tbody tr:focus-within { border-color: #305a42; }
  .haag-app .haag-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .haag-app .haag-table .haag-product { grid-area: name; min-width: 0; font-weight: 700; color: #244633; line-height: 1.35; font-size: 16px; overflow-wrap: anywhere; margin-bottom: 8px; }
  .haag-app .haag-table .haag-size { grid-area: size; }
  .haag-app .haag-table .haag-pack { grid-area: pack; }
  .haag-app .haag-table .haag-price { grid-area: price; }
  .haag-app .haag-table .haag-mobile-info:not(.haag-line-total) { font-weight: 400; font-size: 13px; color: #53665a; line-height: 1.6; white-space: normal; }
  .haag-app .haag-table .haag-mobile-info::before { content: attr(data-label) ': '; font-weight: 500; color: #53665a; }
  .haag-app .haag-table .haag-qty-cell { grid-area: qty; align-self: start; justify-self: end; padding-top: 2px; }
  .haag-app .haag-table .haag-qty { display: block; width: 78px!important; height: 48px!important; min-height: 48px!important; font-size: 17px!important; margin: 0!important; }
  .haag-app .haag-table .haag-line-total { grid-area: total; display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #e3ebe5; margin-top: 10px; padding-top: 10px; color: #305a42; font-size: 15px; font-weight: 700; }
  .haag-app .haag-table tfoot { display: block; margin-top: 12px; padding: 12px 16px; background: #e8f0e9; }
  .haag-app .haag-table tfoot tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .haag-app .haag-table tfoot th { display: block; border: 0; padding: 0; text-align: left!important; }
  .haag-app .haag-table tfoot th:last-child { text-align: right!important; }
}