body::-webkit-scrollbar {
    width: 14px;
}
body::-webkit-scrollbar-track { 
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
} 
body::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #29893b, #024c21);
}
header::after{
    content: ' ';
    position: absolute;
    top: 0px; 
    left: 230px;
    height: 73px;
    width: 1px;
    background: var(--light-grey);
}
main {
    padding-top: 73px;
    padding-left: 230px;
}

.scroll::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.scroll::-webkit-scrollbar{
    width: 9px;
    background-color: #F5F5F5;
} 
.scroll::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

.cabecera__menu{
    display: none;
}
.cabecera__buscador{
    position: relative;
}
.cabecera__buscador input {
    width: 280px;
}
.cabecera__buscador-resultados {
    top: 74px;
}
.cabecera__buscador-producto:hover{
    box-shadow: inset 0px 0px 5px 0px rgb(195 187 187 / 52%);
    -moz-box-shadow: inset 0px 0px 5px 0px rgb(195 187 187 / 52%);
    -webkit-box-shadow: inset 0px 0px 5px 0px rgb(195 187 187 / 52%);
}
.cabecera__logo{
    border:none;
}
.cabecera__logo-img {
    width: 166px;
    margin: 8px 32px 5px;
}
.cabecera__buscador input {
    width: 350px;
    height: 70px;
    font-size: 1.7rem
}
.cabecera__icono { 
    font-size: 2.8rem;
    padding: 18px;
}
.cabecera__telefono a{
    width: 180px;
}
.cabecera__cantidad-carro{
    font-size: 1.4rem;
    width: 20px;
    height: 20px;
    top: 13px;
    right: 13px;
    line-height: 2rem;
}

.menu {
    transform: inherit;  
    left: 0;
    width: 230px;
    height: calc(100vh - 73px);
}
.menu__opcion-texto { 
    flex-basis: 155px;
}

.banner{
    padding: 0;
}
.banner_texto{ 
    position: absolute;
    bottom: 59px;
    left: 24px;
    width: 40%;
    text-align: justify;
    color: var(--white);
}
.banner__btn{
    position: absolute;
    bottom: 30px;
    left: 25px;
    background: var(--primary);
    color: #fff;
    padding: 7px 18px 7px;
    font-size: 1.5rem;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

/*productos*/
.producto:hover{
    border-color: var(--light-primary);
}
.productos__listado .producto {
    width: calc(25% - 8px);
}
.productos-relacionados .producto { 
    width: calc(33.3333% - 8px);
}
.productos-relacionados .productos__titulo {
    width: 100%; 
}

/*vista desplegada*/
.vista-desplegada__precio, .vista-desplegada__variacion{ 
    width: 65%;
}
.vista-desplegada__cantidad{ 
    width: 35%;
}
.vista-desplegada__cantidad-restar:hover, .vista-desplegada__cantidad-sumar:hover {
    cursor: pointer;
    background: var(--light-grey);
}


/*capa*/
.capa__contenido.n1.abrir{ transform: translate(17vw, 0px); max-width: 83vw; }
.capa__contenido.n2.abrir{ transform: translate(32vw, 0px); max-width: 68vw; }
.capa__contenido.n3.abrir{ transform: translate(47vw, 0px); max-width: 53vw; }
.capa__contenido.n4.abrir{ transform: translate(62vw, 0px); max-width: 38vw; }
.capa__contenido.n5.abrir{ transform: translate(62vw, 0px); max-width: 38vw; } 
.capa__prehtml.p .capa__prehtml-item {width: calc(24% - 0px);}

@media (min-width: 1300px) {
    .cabecera__buscador input {
        width: 520px;
    }
    .cabecera__cantidad-carro{
        right: 26px;
    }

    .productos__listado .producto { 
        width: calc(20% - 8px);
    }
    .productos-relacionados .producto {
        width: calc(25% - 8px);
    }
    .productos-relacionados .producto__precio {
        display: flex;
        flex-direction: column;
    }
    .productos-relacionados .producto__precio-antes {
        left: 0;
    }

    .vista-desplegada__top{
        display: flex;
    }
    .vista-desplegada__galeria{
        width: 60%;
    }
    .vista-desplegada__detalles{ 
        width: 40%;
        padding-left: 25px;
    }
    .vista-desplegada .capa__prehtml{
        display: flex;
    }
    .vista-desplegada .capa__prehtml-fotoproducto{
        width: 60%;
    }
    .vista-desplegada .capa__prehtml-detalles{ 
        width: 40%;
        padding-left: 20px;
    }

    .vista-carro-compras .producto__nombre{ 
        font-size: 1.4rem;
        line-height: 1.4rem;
        text-align: left;
    }

    .capa__prehtml.p .capa__prehtml-item {
        width: calc(19% - 0px);
    }
}