/* -- CABECERA -- */
#cabecera-order-online {
    width: 100vw;
    height: 100px;
    background-image: url(../../imgs/fondo-chile-verde.jpg);
    background-size: cover;
    background-position: center;
    margin: 0;
    padding: 0;
}

#cabecera-order-online-limitador {
    width: 100vw;
    height: 100%;
    max-width: 1250px;
    margin: 0 auto;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-between;
}

@supports (display: grid) {
    #cabecera-order-online-limitador {
        width: 100vw;
        height: 100%;
        max-width: var(--max-width);
        margin: 0 auto;

        display: grid;
        grid-template: 
            'logo-cabecera cancelar-orden-cabecera carrio-cabecera';
        grid-template-columns: 270px 350px auto;
    }
}

    @supports (-ms-ime-align:auto) { /* Este es solamente para Microsoft Edge */
        #cabecera-order-online-limitador {
            width: 100vw;
            height: 100%;
            max-width: 1250px;
            margin: 0 auto;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: space-between;
        }
    }

/* -- logo-cabecera -- */
#logo-order-online-cabecera { width: 270px; position: relative; }

@supports (display: grid) {
    #logo-order-online-cabecera { width: 270px; grid-area: logo-cabecera; position: relative; }
}

    @supports (-ms-ime-align:auto) { /* Este es solamente para Microsoft Edge */
        #logo-order-online-cabecera { width: 270px; position: relative; }
    }

#logo-order-online-cabecera img { width: 150px; height: auto; position: absolute; top: 0; left: 50%; transform: translateX(-50%); transition: all .5s ease; }
#logo-order-online-cabecera img:hover { width: 160px; }

/* -- cancelar-orden -- */
#cancelar-orden-cabecera { 
    width: 350px;
    display: flex; 
    align-items: center; 
    padding-left: 10px;
} #cancelar-orden {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1.2em;
    text-shadow: 1px 1px #f15a22;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

#cancelar-orden-mobile {
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1.2em;
    text-shadow: 1px 1px #f15a22;
    color: white;
    border-radius: 50%;
    cursor: pointer;
}

@supports (display: grid) {
    #cancelar-orden-cabecera { 
        width: auto;
        grid-area: cancelar-orden-cabecera; 
        display: flex; 
        align-items: center; 
        padding-left: 10px;
    } #cancelar-orden {
        display: block;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1.2em;
        text-shadow: 1px 1px var(--naranja);
        color: var(--blanco);
        border-radius: 20px;
        cursor: pointer;
    }

    #cancelar-orden-mobile {
        width: 50px;
        height: 50px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1.2em;
        text-shadow: 1px 1px var(--naranja);
        color: var(--blanco);
        border-radius: 50%;
        cursor: pointer;
    }
}

    @supports (-ms-ime-align:auto) { /* Este es solamente para Microsoft Edge */
        #cancelar-orden-cabecera { 
            width: 350px;
            display: flex; 
            align-items: center; 
            padding-left: 10px;
        } #cancelar-orden {
            display: block;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #2a1410;
            font-family: 'Comfortaa', cursive; 
            font-size: 1.2em;
            text-shadow: 1px 1px #f15a22;
            color: white;
            border-radius: 20px;
            cursor: pointer;
        }

        #cancelar-orden-mobile {
            width: 50px;
            height: 50px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #2a1410;
            font-family: 'Comfortaa', cursive; 
            font-size: 1.2em;
            text-shadow: 1px 1px #f15a22;
            color: white;
            border-radius: 50%;
            cursor: pointer;
        }
    }

/* -- carrito-info -- */
#contenedor-carrito-cabecera { 
    width: 700px;
    padding-right: 20px; 
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
}

#carrito-cabecera {
    display: block;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1.2em;
    text-shadow: 1px 1px #f15a22;
    color: white;
    border-radius: 20px;
    cursor: pointer;
}

#carrito-cabecera-mobile { 
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a1410;
    font-family: 'Comfortaa', cursive; 
    font-size: 1em;
    text-shadow: 1px 1px #f15a22;
    text-decoration: none;
    color: white;
    border-radius: 50%;
}

@supports (display: grid) {
    #contenedor-carrito-cabecera { 
        width: auto;
        height: 100px;
        grid-area: carrio-cabecera; 
        padding-right: 20px; 
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
    }

    #carrito-cabecera {
        display: block;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1.2em;
        text-shadow: 1px 1px var(--naranja);
        color: var(--blanco);
        border-radius: 20px;
        cursor: pointer;
    }

    #carrito-cabecera-mobile { 
        width: 50px;
        height: 50px;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        background-color: var(--cafe);
        font-family: var(--comfortaa); 
        font-size: 1em;
        text-shadow: 1px 1px var(--naranja);
        text-decoration: none;
        color: var(--blanco);
        border-radius: 50%;
    }
}

    @supports (-ms-ime-align:auto) { /* Este es solamente para Microsoft Edge */
        #contenedor-carrito-cabecera { 
            width: 700px;
            padding-right: 20px; 
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-direction: row;
        }

        #carrito-cabecera {
            display: block;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #2a1410;
            font-family: 'Comfortaa', cursive; 
            font-size: 1.2em;
            text-shadow: 1px 1px #f15a22;
            color: white;
            border-radius: 20px;
            cursor: pointer;
        }

        #carrito-cabecera-mobile { 
            width: 50px;
            height: 50px;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            background-color: #2a1410;
            font-family: 'Comfortaa', cursive; 
            font-size: 1em;
            text-shadow: 1px 1px #f15a22;
            text-decoration: none;
            color: white;
            border-radius: 50%;
        }
    }

@media screen and (max-width: 865px) {
    
    #logo-order-online-cabecera { width: 200px;}
    
    #cabecera-order-online-limitador {
        width: 100vw;
        height: 100%;
        max-width: var(--max-width);
        margin: 0 auto;

        display: grid;
        display: -ms-grid;
        grid-template: 
            'cancelar-orden-cabecera logo-cabecera carrio-cabecera';
        grid-template-columns: calc(50% - 100px) 200px calc(50% - 100px);
    }
    
    #carrito-cabecera { display: none; }
    #carrito-cabecera-mobile { display: flex; }
    
    #cancelar-orden { display: none; }
    #cancelar-orden-mobile { display: flex; }
}