/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/*
Estas clases son para la seccion de explorar por ciudad
 */
.ecommerce-categories [class^=col-] {
    position: relative;
    margin-bottom: 30px;
}

.ecommerce-categories [class^=col-] > a {
    display: block;
    position: relative;
    height: 250px;
    background-color: #EEE;
}

.ecommerce-categories [class^=col-] img { display: block; }

.ecommerce-categories [class^=col-] > a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    opacity: 0.4;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
}

.ecommerce-categories [class^=col-] > a:hover::before { opacity: 1; }


/* Botón flotante WhatsApp */
.whatsapp-fab {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1050; /* arriba del resto */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    transition: transform .12s ease, box-shadow .12s ease;
}

.whatsapp-fab:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.20);
}

/* Icono dentro del círculo - usa font-size para controlar tamaño */
.whatsapp-fab .fab-icon {
    font-size: 28px;
    color: #fff;
}

/* Variantes: fondo verde WhatsApp por defecto */
.whatsapp-fab--green { background-color: #25D366; }

/* Variante white with green border (opcional) */
.whatsapp-fab--outline {
    background-color: #fff;
    border: 2px solid #25D366;
}








/*.i-products .products-image .badge {
	position: absolute;
	display: block;
	top: 10px;
	left: 10px;
	color: #222;
	background-color: #FFF;
	padding: 5px;
	border-radius: 3px;
}*/

.i-products .products-image {
	position: relative;
}

.badges-container {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 5px;
}

.i-products .products-image .badge {
	color: #222;
	background-color: #FFF;
	padding: 5px;
	border-radius: 3px;
}