/*
Theme Name:     Storefront Child
Template:       storefront
Version:        1.0.0
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700&display=swap');
body, button, input, textarea{
    font-family: "Roboto Slab", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
}

.logo-img, .custom-logo {
    max-width: 250px !important;
    width: 250px !important;
}

.home .entry-title {
  display: none;
}

.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
	margin-bottom: 0 !important;
}

.storefront-primary-navigation {
	background-color: #006B9E !important;
}

a[aria-current=page], .main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {
	background-color: #0083C1 !important;
}

.product_title.entry-title {
	font-size: 30px;
}

.price {
	color: #0083C1 !important;
	font-weight: 700;
}

.site-header-cart.menu {
	display: none !important;
}

@media (min-width: 768px) {
    .storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
        width: 20% !important;
    }
	.storefront-full-width-content.single-product div.product .summary {
		width: 75% !important;
	}
	.main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
		padding-left: 0.6em !important;
		padding-right: 0.6em !important;
	}
	.woocommerce-active .site-header .main-navigation {
		width: 100% !important;
		margin-right: 0 !important;
	}

}

//SLIDERS HOME
.custom-swiper {
            margin: 0 auto;
            padding: 20px 0;
            background: #f8f9fa;
	padding-bottom: 30px;
        }

        .swiper-slide-shortcode {
            width: auto !important; /* Ancho según contenido */
            min-width: 200px;      /* Ancho mínimo por slide */
            max-width: 200px;      /* Ancho máximo opcional */
            height: 330px !important; /* Altura fija para todas las cajas */
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .product-image-container {
            height: 180px; /* Altura fija */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0; /* Elimina padding */
            background: #f5f5f5; /* Fondo para productos sin imagen */
        }

        /* --- Imagen del producto --- */
        .product-image {
            max-width: 90%; 
            max-height: 100%; /* Máximo 100% del contenedor */
            width: auto; 
            height: auto;
            object-fit: contain; /* ¡Clave! Mantiene proporciones sin recortar */
            object-position: center;
            margin: 0 auto; /* Centrado */
        }

        /* Contenedor de texto */
        .product-info {
            padding: 15px;
            flex-grow: 1; /* Ocupa el espacio restante */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* Título del producto */
        .product-title {
            font-size: 14px !important; /* Tamaño más pequeño */
            line-height: 1.3;
            margin: 8px 0;
            display: -webkit-box;
            -webkit-line-clamp: 3; /* Máximo 3 líneas */
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #333;
            font-weight: 500;
            min-height: 54px; /* Altura fija para 3 líneas (14px * 1.3 * 3) */
	    text-decoration: none;
	    text-align: center;
        }

.product-link {
    text-decoration: none !important;
}

.custom-add-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background-color: #0071a1;
    color: white;
    font-size: 14px;
    font-weight: 500;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s ease;
}

.custom-add-btn:hover {
    background-color: #005f87;
    color: #fff;
}
        /* Precio */
        .product-price {
            font-size: 16px;
            margin-top: auto; /* Empuja el precio hacia abajo */
            padding-bottom: 0; /* Espacio inferior */
	    margin-bottom: 0;
	     text-align: center;
    display: block;
        }

        /* Precio tachado (si hay descuento) */
        .product-price del {
            font-size: 14px;
            color: #999;
            margin-right: 5px;
        }

        /* Efecto hover opcional */
        .swiper-slide-shortcode:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
        }

        .swiper-slide-shortcode:hover .product-image {
            transform: scale(1.05);
        }

	.swiper-pagination {
	    position: relative;
    	margin-top: 15px;
	}

/* Asegura que el contenedor tenga suficiente altura para el botón */
.swiper-slide-shortcode .product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-bottom: 60px; /* espacio para el botón */
    position: relative;
}

/* Coloca el botón justo al final dentro del slide */
.add-to-cart-wrapper {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    text-align: center;
}

/* Ajusta el contenedor de texto para que no recorte el botón */
.product-info {
    padding: 10px 15px 60px; /* espacio inferior ampliado para botón */
    position: relative;
}

/* Coloca el botón con más separación del precio */
.custom-add-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background-color: #0071a1;
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 5px;
    text-align: center;
    transition: background 0.3s ease;
    text-decoration: none;
}

/* Hover bonito */
.custom-add-btn:hover {
    background-color: #005f87;
}        
        @media (max-width: 768px) {
            .swiper-slide-shortcode {
                height: 320px !important;
            }
            .product-image-container {
                height: 150px;
            }
        }