/**
 * Karta produktu — przycisk „Kup teraz".
 *
 * Celowo minimalnie: przycisk nosi klasę `.button`, więc kolory i typografię
 * bierze z motywu sklepu. Tutaj tylko to, czego motyw nie zrobi za nas —
 * oddzielenie od „Dodaj do koszyka" i pełna szerokość na telefonie, gdzie
 * dwa przyciski obok siebie robią się za wąskie na kciuk.
 */

.gapli-buy-now-button {
    margin-left: .5em;
}

.gapli-buy-now-button.disabled,
.gapli-buy-now-button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .gapli-buy-now-button {
        display: block;
        width: 100%;
        margin-left: 0;
        margin-top: .5em;
    }
}

/**
 * Blok zakupu ekspresowego (portfele).
 *
 * Kontener startuje z atrybutem `hidden` i JS zdejmuje go dopiero, gdy Stripe
 * potwierdzi dostępny portfel — dlatego nie ma tu żadnej reguły ukrywającej.
 */

.gapli-express {
    margin-top: 1em;
}

.gapli-express__separator {
    display: flex;
    align-items: center;
    gap: .75em;
    margin-bottom: .75em;
    font-size: .85em;
    opacity: .6;
}

.gapli-express__separator::before,
.gapli-express__separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .3;
}

.gapli-express__legal {
    margin: .6em 0 0;
    font-size: .78em;
    line-height: 1.45;
    opacity: .7;
}

.gapli-express__error {
    margin: .6em 0 0;
    font-size: .85em;
    color: #b32d2e;
}