/* =========================================================
   EXPRESS CHECKOUT (Apple Pay / Google Pay)
   Ficha escritorio, ficha móvil, carrito y checkout login
   ========================================================= */

:root {
    --xc-height: 35px; /* alto de los botones */
    --xc-gap: 4px; /* separación entre Apple Pay y Google Pay (escritorio) */
    --xc-offset-desktop: 4px; /* separación con "Añadir a la cesta" (escritorio) */
    --xc-logo: 17px; /* alto aprox. del logo */
    --xc-radius: 0px;
}

/* ---------- Contenedor: por defecto apilado (móvil) ---------- */
.express-checkout {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

    /* ---------- Cada hueco de botón ---------- */
    .express-checkout > .express-checkout__btn {
        width: 100%;
        height: var(--xc-height) !important; /* !important por si el JS mete estilos inline */
        min-height: 0 !important;
        margin: 0 !important;
        line-height: 0;
        overflow: hidden;
        border-radius: var(--xc-radius);
    }

        /* El elemento que inyecta el SDK (apple-pay-button, div, button...) es inline
   por defecto: se alinea a la línea base, baja unos px y el overflow lo corta.
   Lo forzamos a bloque y a ocupar exactamente el hueco. */
        .express-checkout > .express-checkout__btn > * {
            display: block !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            vertical-align: top;
            box-sizing: border-box;
        }

/* ---------- Tablet horizontal y escritorio: en línea al 50% ---------- */
@media (min-width: 1024px) {
    .express-checkout:not(.express-checkout--stack) {
        flex-direction: row;
        gap: var(--xc-gap);
        margin-top: var(--xc-offset-desktop);
    }

        .express-checkout:not(.express-checkout--stack) > .express-checkout__btn {
            flex: 1 1 0; /* 50% / 50% descontando el gap */
            min-width: 0;
            width: auto;
        }
    /* Si uno de los dos está oculto (display:none) el otro ocupa el 100% solo */
}

/* =========================================================
   APPLE PAY
   ========================================================= */

/* a) Web component <apple-pay-button> (SDK apple-pay-sdk.js) */
/* Apple Pay: !important para ganar al inline que mete el JS */
.express-checkout apple-pay-button {
    display: block !important;
    width: 100% !important;
    height: var(--xc-height) !important;
    padding: 0 !important;
    --apple-pay-button-width: 100% !important;
    --apple-pay-button-height: var(--xc-height) !important;
    --apple-pay-button-border-radius: var(--xc-radius) !important;
    --apple-pay-button-padding: 3px 0px !important;
    --apple-pay-button-box-sizing: border-box !important;
}

/* =========================================================
   GOOGLE PAY  (paymentsClient.createButton)
   ========================================================= */
.express-checkout .express-checkout__btn > div,
.express-checkout .gpay-button,
.express-checkout .gpay-card-info-container,
.express-checkout .gpay-button-fill,
.express-checkout .gpay-card-info-container-fill {
    width: 100% !important;
    height: var(--xc-height) !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border-radius: var(--xc-radius) !important;
    box-sizing: border-box;
}

/* Versión clásica: logo como background-image */
.express-checkout .gpay-button {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    background-size: contain !important;
    background-origin: content-box !important;
}

    /* Versión nueva: logo como svg/img dentro del botón */
    .express-checkout .gpay-card-info-container svg,
    .express-checkout .gpay-card-info-container img,
    .express-checkout .gpay-button svg,
    .express-checkout .gpay-button img {
        height: var(--xc-logo) !important;
        max-height: var(--xc-logo) !important;
        width: auto !important;
    }

.express-checkout iframe {
    height: var(--xc-height) !important;
}

#botonanyadirart {
    display: block;
    vertical-align: top;
}
/* Google Pay: sin cambio de color al pasar el ratón */
.express-checkout .gpay-card-info-container.black,
.express-checkout .gpay-card-info-container.black.hover,
.express-checkout .gpay-card-info-container.black:hover,
.express-checkout .gpay-card-info-animation-container.black.hover,
.express-checkout .gpay-button.black,
.express-checkout .gpay-button.black.hover,
.express-checkout .gpay-button.black:hover {
    background-color: #000 !important;
}

#express-checkout-carrito {
    margin-top: 5px !important;
    margin-bottom: 7px !important;
}

.cart-checkout:has(+ #express-checkout-carrito) {
    margin-bottom: 0 !important;
}

@media (min-width: 1280px) {
    #express-checkout-carrito {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
    }
}