/* Bloqueo las direcciones entrega a los clientes. Baleares, hace el pedido desde la península, después entra en su área de cliente, y la cambia a Baleares, se ahorra un dinero */
/* SOLO dirección de entrega */
.page-addresses .address-actions .edit,
.page-addresses .address-actions .delete{
display:none !important;
}

/* mensaje solo en cuenta cliente */
.page-addresses #opc_addresses_delivery_content::after{
content: "AVISO: Para modificar una dirección ya utilizada en un pedido,  es necesario contactar con nosotros.";
display:block;
margin-top:10px;
padding:12px;
background:#fff3cd;
border:1px solid #ffeeba;
font-size:14px;
color:#856404;
border-radius:4px;
}


/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 
/*
 * Cambia el color de los enlaces, antes en color azul claro, al pasar ratón, mismo color, no me gustaba
 *Ahora el texto en turquesa oscuro, al pasar ratón, azul claro, más estético
 */
a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #0a7cb0;
    text-decoration: none;
}

/*
 * Cambia el color del header
 */
 #header{ background: width !important; }


/*
 * Cambiar el color del submenú lateral
 */
.block-categories .category-sub-menu .category-sub-link {
    font-size: .875rem;
    color: #0a7cb0;
}

.block-categories .category-sub-menu li[data-depth="0"]>a {
    display: inline-block;
    width: 100%;
    padding-bottom: 0.4875rem;
    margin: 0.3125rem 0 0;
    font-weight: 300;
    border-bottom: #c7c2c2 0.5px solid;
    font-size: 0.9rem;
}

/*
 * Cambiar el menu principal
 */
#header .header-top #top-menu a[data-depth="0"] {
    color: #034665;
    padding: 0.625rem;
    font-size: 0.8rem;
    font-weight: 900;
}

/*
 * La imagen en categorias, en el banner superior, donde aparece la descripcion de la categoria, la imagen derecha salía rectangular, la cambio a cuadradada
 */
.block-category .block-category-inner .category-cover img {
    width: 180px;
    height: 180px;
}

/*
 * Cambia colores y tamaños iconos sociales del footer
 */
#footer .block-social ul li{
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.125rem;
    cursor: pointer;
    background-color: #999;
    background-repeat: no-repeat;
}



/*
 * Cambia información a los clientes en el header, los iconos de transporte, compras seguras,... el font-weight es para el tema negrita, fina,... lighter es la fina
 */
#header .blockreassurance .block-icon, .blockreassurance .block-icon img, .blockreassurance .block-icon svg {
    height: 80px;
}
#header .blockreassurance .block-title {
    font-weight: lighter;
}


/*
 * 2 columnas en categorias, cambiar el min-width a 200px, en origen estaba en 375px, ver el sucategorias.txt
*regenarar imagenes de categorias category-default a 282x282px, en origen estaban a 141px
 */

#subcategories ul li {
    width: calc(100%/4 - 20px);
    min-width: 200px;
    margin: 10px;
    text-align: center;
}


/*
 * 2 columnas en listado productos, cambiar el width a 50%, en origen estaba en 33.3333%, ver el subcategorias.txt
*regenarar imagenes home-default a 500x500px, en origen estaban a 250x250px
 */
#products .col-xl-4,.col-xl-5 {
        float: left;
        width: 50%;
    
}

/*
 * para ampliar un poco el div en listado de productos, debajo de la cantidad y agregar al carro, estaba muy justo a los botones 
 */
.product-miniature .product-description {
	padding-bottom: 0.7rem;
}

/*
 * El check box de proteccion de datos se metía dentro de DIRECCIONES, hay que cambiarposition:absolute; por position:inherit
 */
body#checkout .custom-checkbox span{
    position:inherit;
    }




/*
 * Cambiar LOS CUADRADITOS  de los colores, más grandes, de 1.125 a 2.125
 */
.custom-checkbox input[type=checkbox]+span.color, .variant-links .color, label .color {
    display: inline-block;
    width: 2.125rem;
    height: 2.125rem;
    margin: 0.3125rem 0.5rem 0.3125rem 0.3125rem;
    cursor: pointer;
    background-size: contain;
    border: 1px solid #979797;
}
/*
 * Cambiar LOS CUADRADITOS, esto me genraba un problema en el filtro, el texto aparecía debajo del cuadradito del color, cambiar en width de -30px a -50px
 */
#search_filters .facet .facet-label a {
    width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}




/*
 * Cambiar el ancho de las páginas, con width:1540px; va bien, pero lo voy a poner por porcentaje, al 90%
 */
@media (min-width: 1200px) {
    .container {
        width:80%;
        max-width: 100%
    }

    .row {
        margin-right: -15px;
        margin-left: -15px
    }

    .col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xs,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
        padding-right: 15px;
        padding-left: 15px
    }

    .col-xl-1 {
        float: left;
        width: 8.33333%
    }

    .col-xl-2,.col-xl-3 {
        float: left;
        width: 16.66667%
    }

    .col-xl-3 {
        width: 25%
    }

    .col-xl-4,.col-xl-5 {
        float: left;
        width: 33.33333%
    }

    .col-xl-5 {
        width: 41.66667%
    }

    .col-xl-6,.col-xl-7 {
        float: left;
        width: 50%
    }

    .col-xl-7 {
        width: 58.33333%
    }

    .col-xl-8,.col-xl-9 {
        float: left;
        width: 66.66667%
    }

    .col-xl-9 {
        width: 75%
    }

    .col-xl-10 {
        float: left;
        width: 83.33333%
    }

    .col-xl-11 {
        float: left;
        width: 91.66667%
    }

    .col-xl-12 {
        float: left;
        width: 100%
    }

    .pull-xl-0 {
        right: auto
    }

    .pull-xl-1 {
        right: 8.33333%
    }

    .pull-xl-2 {
        right: 16.66667%
    }

    .pull-xl-3 {
        right: 25%
    }

    .pull-xl-4 {
        right: 33.33333%
    }

    .pull-xl-5 {
        right: 41.66667%
    }

    .pull-xl-6 {
        right: 50%
    }

    .pull-xl-7 {
        right: 58.33333%
    }

    .pull-xl-8 {
        right: 66.66667%
    }

    .pull-xl-9 {
        right: 75%
    }

    .pull-xl-10 {
        right: 83.33333%
    }

    .pull-xl-11 {
        right: 91.66667%
    }

    .pull-xl-12 {
        right: 100%
    }

    .push-xl-0 {
        left: auto
    }

    .push-xl-1 {
        left: 8.33333%
    }

    .push-xl-2 {
        left: 16.66667%
    }

    .push-xl-3 {
        left: 25%
    }

    .push-xl-4 {
        left: 33.33333%
    }

    .push-xl-5 {
        left: 41.66667%
    }

    .push-xl-6 {
        left: 50%
    }

    .push-xl-7 {
        left: 58.33333%
    }

    .push-xl-8 {
        left: 66.66667%
    }

    .push-xl-9 {
        left: 75%
    }

    .push-xl-10 {
        left: 83.33333%
    }

    .push-xl-11 {
        left: 91.66667%
    }

    .push-xl-12 {
        left: 100%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.33333%
    }

    .offset-xl-2 {
        margin-left: 16.66667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.33333%
    }

    .offset-xl-5 {
        margin-left: 41.66667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.33333%
    }

    .offset-xl-8 {
        margin-left: 66.66667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.33333%
    }

    .offset-xl-11 {
        margin-left: 91.66667%
    }

    .navbar-toggleable-lg {
        display: block
    }

    .float-xl-left {
        float: left!important
    }

    .float-xl-right {
        float: right!important
    }

    .float-xl-none {
        float: none!important
    }

    .text-xl-left {
        text-align: left!important
    }

    .text-xl-right {
        text-align: right!important
    }

    .text-xl-center {
        text-align: center!important
    }

    .hidden-xl-up {
        display: none!important
    }
}


/*
 * En la página del producto, la imagen me quedaba pequeña, lo he ampliado a 600, antes 450
 */
#product #content {
    position: relative;
    max-width: 600px;
    margin-bottom: 2.563rem
}

/*
 * Tema carrusel de imagenes al ampliar, el boton de abjo quedaba algo tapado
 */
#product-modal .modal-content .modal-body .mask {
    position: relative;
    z-index: 1;
    max-height: 47.88rem;
    margin-top: 2.188rem;
    overflow: hidden;
}

/*
 * Para moviles, solo una columna en listado de prodcutos
 */
@media (max-width: 767px) {
    #products .col-xl-4, #products .col-xl-5 {
        float: none; /* Quita el flotado */
        width: 100%; /* Hace que cada producto ocupe el 100% del ancho */
    }
}

/*
 * pagina principal, home, con fondo blanco
 */
#wrapper {
    padding-top: 1.563rem;
    background: #fff;
}



/*
 * en moviles no se veía bien, la barra de búsqueda se superponía encima del logo, lo mismo el carrito
 */
@media (max-width: 768px) {
  body.page-index .header-top {
    position: relative !important;
    z-index: 1 !important;
    width: 100%;
    margin-top: 60px;
  }

   body.page-index .header-nav {
    position: relative;
    z-index: 10; /* Por encima de header-top */
  }

   body.page-index .search-widget,
  body.page-index .search-bar {
    position: static !important;
    z-index: auto !important;
  }
}

/*
 * para el título de la página, quedaba muy pegado a línea que tiene encima. le doy color blanco como el fondo
 */
 #header .header-nav {
    max-height: 50px !important;;
    border-bottom: #fff 2px solid;
}