/**
 * Remundi Sticky Cart — Styles
 * Nur Mobile (<=768px). Macht form.cart zur fixierten Leiste unten.
 * Kompaktes Grid: Button oben (volle Breite), Versandzeile darunter,
 * dann qty links + Logos/Ratenzahlung rechts daneben.
 * Desktop bleibt komplett unberührt.
 */

@media (max-width: 768px) {

    /* Add-to-Cart-Bereich als fixierte Leiste unten — existiert nur sticky */
    form.cart {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990;
        box-sizing: border-box;
        margin: 0;
        padding: 8px 14px env(safe-area-inset-bottom, 4px);
        background: #ffffff;
        border-top: 1px solid #e6e6e6;
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.12);

        /* Kompaktes Raster */
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "btn   btn"
            "ship  ship"
            "qty   icons"
            ".     klarna";
        column-gap: 12px;
        row-gap: 4px;
        align-content: start;
    }

    /* Shipping-Block auflösen, damit seine Teile direkt am Grid teilnehmen */
    .remundi-shipping-info {
        display: contents;
    }

    /* Button: volle Breite, ganz oben */
    form.cart .single_add_to_cart_button {
        grid-area: btn;
        width: 100%;
        min-height: 50px;
        margin: 0;
        font-size: 16px;
        font-weight: 700;
    }

    /* Versandzeile: volle Breite, unter dem Button */
    .remundi-shipping-info_shipping {
        grid-area: ship;
        font-size: 12.5px;
        line-height: 1.4;
        color: #444;
    }
    .remundi-shipping-info_shipping strong {
        font-weight: 700;
        color: #111;
    }

    /* Mengenauswahl: links, spannt die beiden rechten Zeilen (Logos + Text) */
    form.cart .quantity {
        grid-area: qty;
        margin: 0;
        align-self: center;
    }

    /* Ausgeschriebene Zahlungsart-Woerter ausblenden — nur Logos */
    .remundi-shipping-info_payment-options {
        display: none;
    }

    /* Logos: rechts oben, neben qty */
    .remundi-shipping-info_payment-icons {
        grid-area: icons;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        align-self: end;
    }
    .remundi-shipping-info_payment-icon {
        height: 20px;
        width: auto;
        border-radius: 3px;
        display: block;
    }

    /* Ratenzahlungs-Hinweis: rechts unten, unter den Logos */
    .remundi-shipping-info_payment-options-klarna {
        grid-area: klarna;
        align-self: start;
        margin: 0;
        padding: 0;
        color: #888;
        font-size: 11.5px;
        line-height: 1.2;
    }

    /* Platz schaffen, damit die Leiste keinen Content verdeckt (Hoehe per JS) */
    body {
        padding-bottom: var(--rsc-bar-h, 200px);
    }
}

/* Desktop: Sicherheitsnetz — niemals fixieren */
@media (min-width: 769px) {
    form.cart {
        position: static;
    }
}