/*---------------------------------------*/
/*---------------------------------------*/
/* INIT - SHOP STYLING                   */
/*---------------------------------------*/
/*---------------------------------------*/

/* Import elements to hide first: */
@import url('iledysile-shop-hide-elements.css');

body:not(.home) .site-content {
    margin-top: 0px !important;
}

/* Eliminar los márgenes y hacer el contenido más ancho */
.col-full {
    max-width: 100% !important;
    padding-left: 100px;
    padding-right: 100px;
    margin: 0;
}

.storefront-primary-navigation {
    display: none;
}

/* Asegúrate de que el contenedor principal tenga 'position: relative' */
.woocommerce-LoopProduct-link {
    position: relative !important; /* Esto permite que la imagen secundaria se posicione en relación a este contenedor */
}

/* Imagen secundaria */
.second-image {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* Centra la imagen en el eje horizontal */
    opacity: 0 !important; /* Inicialmente oculta */
    visibility: hidden !important; /* Mantiene la imagen oculta */
    transition: opacity 0.3s ease, visibility 0.3s ease !important; /* Animación suave para mostrar/ocultar */
}

/* Hover sobre la imagen principal para mostrar la imagen secundaria */
.woocommerce-LoopProduct-link:hover .second-image {
    display: block !important; /* Muestra la imagen secundaria */
    opacity: 1 !important; /* Hace visible la imagen secundaria */
    visibility: visible !important; /* Asegura que la imagen secundaria sea visible */
}

.woocommerce ul.products li.product a {
    display: inline-block;  /* Hace que el enlace se ajuste al contenido (imagen) */
    width: auto;  /* Asegura que solo ocupa el tamaño de la imagen */
}

a:focus, input:focus, textarea:focus, button:focus {
    outline: none;
}

/* Ocultar el botón "Añadir al carrito" en la tienda */
.woocommerce .products .product .add_to_cart_button {
    display: none !important;
}

.product-image-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 667px; 
    margin: 0 auto;
    text-align: center;
}

.product-image-wrapper img {
    max-width: 100%;
    max-height: 100vh; 
    width: auto;
    height: auto;
    display: inline-block;
    object-fit: contain; /* para mantener proporción */
    transition: opacity 1.5s ease; /* transición suave y lenta */
}

.secondary-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease; /* igual transición */
    pointer-events: none; /* para que no interfiera con el hover */
}

.product-image-wrapper:hover .secondary-image-wrapper {
    opacity: 1;
}

.product-image-wrapper:hover img:first-child {
    opacity: 0;
}

.woocommerce-products-header {
    display: none;
}

@media (min-width: 769px) {
    .storefront-primary-navigation {
        border-bottom: 1px solid #80808026;
    }
    .site-content .col-full {
        padding-left: 0px;
        padding-right: 0px;
    }

    .site-content .col-full img {
        border-radius: 0px;
    }

    .storefront-full-width-content .site-main ul.products.columns-2 li.product {
        margin-right: 0 !important;
        width: 50% !important;
    }

    li.product.first {
        padding-left: 5%;   
    }

    li.product.last {
        padding-right: 5%;
    }
}

@media (max-width: 768px) {
    /* Eliminar los márgenes y hacer el contenido más ancho */
    .col-full {
        max-width: 100% !important;
        padding-left: 2vw;
        padding-right: 2vw;
        padding-top: 1vh;
        margin: 0;
    }
}
/*---------------------------------------*/
/*---------------------------------------*/
/* END - SHOP STYLING                    */
/*---------------------------------------*/
/*---------------------------------------*/