/*
  Bestellseite – Mobile / schmale Viewports.
  Volle Breite nutzen + stabile Preiszeilen (inkl. RTL / Arabisch).
*/

@media (max-width: 900px) {
  /* Mehr nutzbare Breite: weniger Rand, Container voller Viewport */
  .checkout {
    padding-block: 1rem 1.5rem;
    padding-inline: 0;
  }

  .checkout .container {
    width: 100%;
    max-width: none;
    padding-inline: 0.5rem;
  }

  .checkout__layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .checkout-form,
  .checkout-summary {
    padding: 0.85rem 0.65rem;
    border-radius: 0.65rem;
  }

  .checkout-summary__list {
    gap: 0.65rem;
  }

  /* Zeile: zuerst Text (Titel + Menge), darunter Preisblock – nicht nebeneinander quetschen */
  .checkout-summary__list li.checkout-summary__line-item {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .checkout-summary__line-label {
    min-width: 0;
    width: 100%;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Preise immer in einer Zeile; Block am Rand (RTL: links, LTR: rechts) */
  .checkout-summary__line-value {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    align-self: end;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  .checkout-summary__line-value .checkout-summary__price-original,
  .checkout-summary__line-value .checkout-summary__price-sale {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Zwischensumme / Versand / Gesamt (Zeilen mit row-label + Betrag) */
  .checkout-summary__list li:not(.checkout-summary__line-item) {
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
  }

  .checkout-summary__row-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }

  .checkout-summary__amount {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
    text-align: end;
  }

  .checkout-delivery-note {
    padding-inline: 0.25rem;
  }
}

@media (max-width: 480px) {
  .checkout .container {
    padding-inline: 0.35rem;
  }

  .checkout-form,
  .checkout-summary {
    padding-inline: 0.5rem;
  }
}