/* =========================================================
   QBIT MINIBASKET 4.0
   ========================================================= */


/* =========================================================
   MODAL / DRAWER
   ========================================================= */

#basketModal.basketFlyout {

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

#basketModal.basketFlyout .modal-dialog {

    width: min(440px, 100vw) !important;

    max-width: 440px !important;

    height: 100% !important;

    margin:
        0
        0
        0
        auto !important;
}

#basketModal.basketFlyout .modal-content {

    height: 100vh !important;

    border: 0 !important;

    border-left:
        1px solid #dce5ed !important;

    border-radius:
        14px
        0
        0
        14px !important;

    background: #f7f9fb !important;

    box-shadow:
        -12px 0 38px rgba(25, 53, 80, .12) !important;

    overflow: hidden !important;
}


/* =========================================================
   HEADER
   ========================================================= */

#basketModal .modal-header {

    min-height: 74px;

    padding:
        17px
        19px !important;

    border-bottom:
        1px solid #e1e8ee !important;

    background:
        #ffffff !important;

    align-items: center !important;
}

#basketModal .modal-title {

    margin: 0 !important;

    color: #153f69 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 20px !important;

    line-height: 1.2 !important;

    font-weight: 600 !important;

    letter-spacing: 0 !important;
}

#basketModal .btn-close {

    width: 36px !important;

    height: 36px !important;

    padding: 0 !important;

    border-radius: 7px !important;

    background-color:
        #f4f7f9 !important;

    opacity: .75 !important;
}

#basketModal .btn-close:hover {

    background-color:
        #eaf1f6 !important;

    opacity: 1 !important;
}


/* =========================================================
   BODY
   ========================================================= */

#basketModal .modal-body {

    height: calc(100vh - 74px);

    padding:
        17px !important;

    overflow-y:
        auto !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    color: #30485e;
}


/* =========================================================
   BOTÓN CHECKOUT APEX
   ========================================================= */

#basketModal .modal-body > .btn-highlight,
#basketModal .modal-body .btn-highlight {

    min-height: 44px !important;

    margin:
        0
        0
        14px !important;

    padding:
        9px
        14px !important;

    border:
        1px solid #0872cf !important;

    border-radius:
        7px !important;

    background:
        #0872cf !important;

    color:
        #ffffff !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        600 !important;

    text-decoration:
        none !important;
}

#basketModal .modal-body .btn-highlight:hover {

    border-color:
        #075fae !important;

    background:
        #075fae !important;
}


/* =========================================================
   PRODUCTOS
   ========================================================= */

#basketModal .minibasket-items {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;
}

#basketModal .minibasket-items > .my-1 {

    margin:
        0 !important;

    padding:
        11px !important;

    border:
        1px solid #dde6ed;

    border-radius:
        8px;

    background:
        #ffffff;
}

#basketModal .minibasket-link {

    color:
        #2c455c !important;

    display:
        grid !important;

    grid-template-columns:
        66px
        minmax(0, 1fr);

    gap:
        11px;

    align-items:
        start;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px !important;

    line-height:
        1.4 !important;

    text-decoration:
        none !important;
}

#basketModal .minibasket-link:hover {

    color:
        #0872cf !important;
}

#basketModal .minibasket-link > span:first-child {

    width:
        66px;

    height:
        66px;

    padding:
        5px;

    border:
        1px solid #e2e8ed;

    border-radius:
        6px;

    background:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

#basketModal .minibasket-img {

    width:
        56px !important;

    height:
        56px !important;

    max-width:
        56px !important;

    object-fit:
        contain !important;
}


/* Precio unitario / peso */

#basketModal .minibasket-link .unit {

    color:
        #788795 !important;

    font-size:
        10.5px !important;

    line-height:
        1.35 !important;
}


/* =========================================================
   RESUMEN DE PRECIOS
   ========================================================= */

#basketModal .minibasket-menu-box {

    margin-top:
        13px !important;
}

#basketModal .minibasket-menu-box > .row {

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    padding:
        3px
        2px;

    color:
        #53687b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;
}

#basketModal .minibasket-total-row {

    margin-top:
        9px !important;

    padding-top:
        11px !important;

    border-top:
        1px solid #dce5ec;
}

#basketModal .minibasket-total-col {

    color:
        #123f70 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        17px !important;

    font-weight:
        700 !important;
}


/* =========================================================
   BLOQUE COMPRA CON QBIT
   ========================================================= */

.qbit-cart-assurance {

    margin-top:
        17px;

    padding:
        14px;

    border:
        1px solid #dce6ee;

    border-radius:
        9px;

    background:
        #ffffff;
}

.qbit-cart-assurance-eyebrow {

    margin-bottom:
        4px;

    color:
        #0872cf;

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        .045em;

    text-transform:
        uppercase;
}

.qbit-cart-assurance-title {

    margin:
        0
        0
        10px;

    color:
        #284963;

    font-size:
        14px;

    line-height:
        1.3;

    font-weight:
        600;
}

.qbit-cart-benefits {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        7px;
}

.qbit-cart-benefit {

    min-height:
        48px;

    padding:
        8px;

    border-radius:
        6px;

    background:
        #f5f8fa;

    color:
        #576c7e;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        10.5px;

    line-height:
        1.3;
}

.qbit-cart-benefit svg {

    width:
        17px;

    height:
        17px;

    flex:
        0 0 17px;

    color:
        #0872cf;
}


/* =========================================================
   AYUDA
   ========================================================= */

.qbit-cart-help {

    margin-top:
        10px;

    padding-top:
        10px;

    border-top:
        1px solid #e7edf2;
}

.qbit-cart-help span {

    color:
        #758594;

    display:
        block;

    font-size:
        10.5px;
}

.qbit-cart-help a {

    margin-top:
        3px;

    color:
        #0872cf;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    font-size:
        11px;

    font-weight:
        600;

    text-decoration:
        none;
}


/* =========================================================
   SHIPPING MESSAGE
   ========================================================= */

#basketModal .charges {

    margin:
        12px
        0
        8px !important;

    padding:
        9px
        10px;

    border-radius:
        6px;

    background:
        #eef5fb;

    color:
        #687b8c;

    font-size:
        10.5px;

    line-height:
        1.4;
}


/* =========================================================
   BOTTOM
   Quitar comportamiento que generaba gran hueco vacío.
   ========================================================= */

#basketModal .bottom {

    position:
        static !important;

    inset:
        auto !important;

    width:
        auto !important;

    margin-top:
        10px !important;

    padding:
        0 !important;

    background:
        transparent !important;
}


/* Ver carrito */

#basketModal .bottom .btn-outline-primary {

    min-height:
        42px;

    border:
        1px solid #b9ccdb !important;

    border-radius:
        7px !important;

    background:
        #ffffff !important;

    color:
        #0872cf !important;

    font-size:
        12px !important;

    font-weight:
        600 !important;
}

#basketModal .bottom .btn-outline-primary:hover {

    border-color:
        #0872cf !important;

    background:
        #f3f8fc !important;
}


/* =========================================================
   SEGUIR COMPRANDO
   ========================================================= */

.qbit-cart-continue {

    width:
        100%;

    min-height:
        38px;

    margin-top:
        7px;

    padding:
        7px
        10px;

    border:
        0;

    background:
        transparent;

    color:
        #607487;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        500;

    cursor:
        pointer;
}

.qbit-cart-continue:hover {

    color:
        #0872cf;
}


/* =========================================================
   SCROLL
   ========================================================= */

#basketModal .modal-body::-webkit-scrollbar {

    width:
        6px;
}

#basketModal .modal-body::-webkit-scrollbar-thumb {

    border-radius:
        6px;

    background:
        #cbd7e0;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 575.98px) {

    #basketModal.basketFlyout .modal-dialog {

        width:
            100vw !important;

        max-width:
            100vw !important;
    }

    #basketModal.basketFlyout .modal-content {

        border-radius:
            0 !important;
    }
}


/* =========================================================
   QBIT MINIBASKET 4.0 END
   ========================================================= */


/* QBIT MINIBASKET DROPDOWN 4.36B START */

/* =========================================================
   DESKTOP
   Reutilizamos basketModal como menú desplegable del carrito.
   ========================================================= */

@media (min-width: 992px) {

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open {

        position:
            fixed !important;

        top:
            var(--qbit-basket-top, 70px) !important;

        right:
            var(--qbit-basket-right, 16px) !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            440px !important;

        max-width:
            calc(100vw - 20px) !important;

        height:
            auto !important;

        display:
            block !important;

        padding:
            0 !important;

        background:
            transparent !important;

        overflow:
            visible !important;

        z-index:
            1085 !important;
    }


    /*
     * No ocupa pantalla completa ni se comporta como drawer.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-dialog {

        width:
            440px !important;

        max-width:
            100% !important;

        height:
            auto !important;

        margin:
            0 !important;

        transform:
            none !important;

        pointer-events:
            auto !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-content {

        width:
            100% !important;

        height:
            auto !important;

        max-height:
            calc(
                100vh
                - var(--qbit-basket-top, 70px)
                - 12px
            ) !important;

        border:
            1px solid #d6e1ea !important;

        border-radius:
            7px !important;

        background:
            #f7f9fb !important;

        box-shadow:
            0 14px 34px
            rgba(24, 51, 77, .16)
            !important;

        overflow:
            hidden !important;
    }


    /*
     * Encabezado compacto.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-header {

        min-height:
            56px !important;

        padding:
            12px
            14px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-title {

        font-size:
            17px !important;

        line-height:
            22px !important;

        font-weight:
            600 !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .btn-close {

        width:
            32px !important;

        height:
            32px !important;
    }


    /*
     * Body:
     * altura según contenido, scroll solo si realmente hace falta.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-body {

        height:
            auto !important;

        max-height:
            calc(
                100vh
                - var(--qbit-basket-top, 70px)
                - 68px
            ) !important;

        padding:
            14px !important;

        overflow-y:
            auto !important;
    }


    /*
     * No backdrop visual.
     */

    body:has(
        #basketModal.qbit-minibasket-dropdown-open
    )
    .modal-backdrop {

        display:
            none !important;
    }

}

/* QBIT MINIBASKET DROPDOWN 4.36B END */


/* QBIT MINIBASKET COMPACT 4.36C START */

/* =========================================================
   MINICARRITO DESKTOP COMPACTO

   Conserva el mismo contenido dinámico de OXID.
   Solo cambia presentación cuando funciona como dropdown.
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       PANEL GENERAL
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open {
        width: 390px !important;
        max-width: calc(100vw - 16px) !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-dialog {
        width: 390px !important;
        max-width: 100% !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-content {
        border-radius: 7px !important;

        background: #ffffff !important;

        box-shadow:
            0 12px 30px
            rgba(23, 49, 73, .15)
            !important;
    }


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-header {
        min-height: 46px !important;

        padding:
            8px
            11px
            8px
            13px !important;

        background: #fff !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-title {
        font-size: 15px !important;
        line-height: 20px !important;

        font-weight: 600 !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .btn-close {
        width: 28px !important;
        height: 28px !important;

        border-radius: 5px !important;
    }


    /* -----------------------------------------------------
       BODY
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-body {
        padding: 10px !important;

        gap: 0 !important;

        background: #f7f9fb !important;
    }


    /* -----------------------------------------------------
       FINALIZAR COMPRA
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-body .btn-highlight {
        min-height: 38px !important;

        margin:
            0
            0
            9px !important;

        padding:
            7px
            12px !important;

        border-radius: 6px !important;

        font-size: 12.5px !important;
        line-height: 17px !important;
    }


    /* -----------------------------------------------------
       PRODUCTO
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-items {
        gap: 6px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-items > .my-1 {
        padding: 8px !important;

        border-radius: 6px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-link {
        grid-template-columns:
            52px
            minmax(0, 1fr) !important;

        gap: 8px !important;

        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-link > span:first-child {
        width: 52px !important;
        height: 52px !important;

        padding: 4px !important;

        border-radius: 5px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-img {
        width: 44px !important;
        height: 44px !important;

        max-width: 44px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-link .unit {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }


    /* -----------------------------------------------------
       RESUMEN
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-menu-box {
        margin-top: 7px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-menu-box > .row {
        min-height: 25px !important;

        padding:
            2px
            1px !important;

        font-size: 11px !important;
        line-height: 16px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-total-row {
        margin-top: 4px !important;

        padding-top: 7px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .minibasket-total-col {
        font-size: 15px !important;
        line-height: 20px !important;

        font-weight: 650 !important;
    }


    /* =====================================================
       COMPRA CON QBIT
       Convertimos el bloque grande en una franja compacta.
       ===================================================== */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-assurance {
        margin-top: 9px !important;

        padding:
            9px
            10px !important;

        border-radius: 6px !important;

        background: #fff !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-assurance-eyebrow {
        margin-bottom: 2px !important;

        font-size: 9px !important;
        line-height: 13px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-assurance-title {
        margin:
            0
            0
            4px !important;

        font-size: 11.5px !important;
        line-height: 16px !important;

        font-weight: 500 !important;
    }


    /*
     * Las cuatro cards de beneficios tienen sentido en
     * el drawer grande, pero duplican información en
     * un dropdown compacto.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-benefits {
        display: none !important;
    }


    /* -----------------------------------------------------
       WHATSAPP
       Solo dejamos el acceso directo.
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-help {
        margin-top: 4px !important;

        padding-top: 5px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-help > span {
        display: none !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-help a {
        margin-top: 0 !important;

        font-size: 10.5px !important;
        line-height: 15px !important;

        font-weight: 500 !important;
    }


    /* -----------------------------------------------------
       AVISO DE ENVIO
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .charges {
        margin:
            8px
            0
            6px !important;

        padding:
            6px
            8px !important;

        border-radius: 5px !important;

        font-size: 9.5px !important;
        line-height: 13px !important;
    }


    /* -----------------------------------------------------
       VER CARRITO
       ----------------------------------------------------- */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .bottom {
        margin-top: 6px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .bottom .btn-outline-primary {
        min-height: 35px !important;

        padding:
            6px
            10px !important;

        border-radius: 6px !important;

        font-size: 11.5px !important;
    }


    /*
     * Ya no hace falta Seguir comprando:
     * el dropdown se cierra automáticamente al abandonarlo.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-continue {
        display: none !important;
    }

}

/* QBIT MINIBASKET COMPACT 4.36C END */


/* QBIT MINIBASKET ACTIONS 4.36D START */

/* =========================================================
   DROPDOWN DESKTOP

   Solo dejamos "Ver carrito" como acción principal.
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Quitar Finalizar compra únicamente del minicart.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-body > .btn-highlight,

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .modal-body .btn-highlight {
        display: none !important;
    }


    /*
     * Ver carrito queda como única acción inferior.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .bottom {
        margin-top: 8px !important;
    }


    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .bottom .btn-outline-primary {
        display: flex !important;

        width: 100% !important;

        min-height: 38px !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        font-size: 12px !important;
        font-weight: 600 !important;
    }


    /*
     * Seguir comprando continúa oculto.
     */

    #basketModal.basketFlyout.qbit-minibasket-dropdown-open
    .qbit-cart-continue {
        display: none !important;
    }

}

/* QBIT MINIBASKET ACTIONS 4.36D END */


/* QBIT MINIBASKET REMOVE 4.37D-B START */

/* =========================================================
   CESTO DE BASURA POR PRODUCTO
   ========================================================= */

#basketModal
.minibasket-items
> .my-1 {

    position:
        relative;
}


/*
 * Reservar únicamente el espacio necesario
 * para el botón.
 */

#basketModal
.minibasket-items
> .my-1
.minibasket-link {

    padding-right:
        31px !important;
}


#basketModal
.qbit-minibasket-remove-form {

    position:
        absolute;

    top:
        7px;

    right:
        7px;

    z-index:
        2;

    margin:
        0;

    padding:
        0;
}


#basketModal
.qbit-minibasket-remove {

    width:
        27px;

    height:
        27px;

    padding:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid transparent;

    border-radius:
        5px;

    background:
        transparent;

    color:
        #738493;

    cursor:
        pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


#basketModal
.qbit-minibasket-remove svg {

    width:
        15px;

    height:
        15px;

    display:
        block;

    fill:
        currentColor;
}


#basketModal
.qbit-minibasket-remove:hover {

    border-color:
        #e8d1d1;

    background:
        #fff5f5;

    color:
        #b64c4c;
}


#basketModal
.qbit-minibasket-remove:focus-visible {

    outline:
        2px solid #0872cf;

    outline-offset:
        1px;
}


#basketModal
.qbit-minibasket-remove.is-removing {

    opacity:
        .45;

    cursor:
        wait;
}


/*
 * No modificar geometría general del dropdown.
 */

@media (min-width: 992px) {

    #basketModal.basketFlyout
    .qbit-minibasket-remove {

        width:
            26px;

        height:
            26px;
    }

}

/* QBIT MINIBASKET REMOVE 4.37D-B END */


/* QBIT MINIBASKET EMPTY 4.41A START */

#basketModal
.qbit-minibasket-empty {
    min-height: 150px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 18px 20px;

    text-align: center;

    box-sizing: border-box;
}

#basketModal
.qbit-minibasket-empty-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 8px;

    border-radius: 7px;

    background: #eef6fd;

    color: #0875d1;
}

#basketModal
.qbit-minibasket-empty-icon svg {
    width: 24px;
    height: 24px;

    display: block;
}

#basketModal
.qbit-minibasket-empty strong {
    color: #073867;

    font-size: 16px;
    line-height: 20px;

    font-weight: 600;
}

#basketModal
.qbit-minibasket-empty p {
    margin: 4px 0 9px;

    color: #6f8090;

    font-size: 13px;
    line-height: 17px;
}

#basketModal
.qbit-minibasket-empty-link {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #0875d1;

    font-size: 13px;
    line-height: 17px;

    font-weight: 500;

    text-decoration: none;
}

#basketModal
.qbit-minibasket-empty-link:hover {
    text-decoration: underline;
}

/* QBIT MINIBASKET EMPTY 4.41A END */



/* =========================================================
   QBIT_PRODUCT_META_SCALE_1_00_MINIBASKET
   ========================================================= */

/*
 * Información auxiliar del minicart:
 * IVA, referencias y metadata secundaria.
 */
.qbit-cart-meta,
.qbit-minibasket-meta,
.minibasket-items .article-vat,
.minibasket-items .attribute {
    font-size: 13px !important;
    line-height: 1.4 !important;
}


.minibasket-items .value {
    font-size: 14px !important;
    line-height: 1.4 !important;
}

/* QBIT_PRODUCT_META_SCALE_1_00_MINIBASKET END */