/* Fix para productos - hover que se superpone sin mover otros */

/* Contenedor del producto - reducir separación */
.product-list-image-view .col-xs-6,
.product-list-image-view .col-sm-4,
.product-list-image-view .col-md-3 {
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Contenedor de la lista de productos necesita contexto de stacking propio */
.product-list-image-view {
    position: relative;
    z-index: 1;
}

.product-list-image-view .product-item {
    position: relative;
    height: 290px; /* Altura fija para evitar que el hover mueva otros */
    margin-bottom: 0;
}

.product-list-image-view .product-item-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e6e6e6;
    padding: 7px;
    z-index: 1;
    transition: all 0.2s ease-in-out;
}

/* En hover, se expande por encima de los demás productos (pero no del header) */
.product-list-image-view .product-item-inner:hover {
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Asegurar que el header siempre esté por encima de todo */
header,
.navbar-fixed-top,
#header,
.main-header {
    z-index: 1030 !important;
    position: relative;
}

/* Clearfix para filas de productos */
.product-list-image-view .row::after {
    content: "";
    display: table;
    clear: both;
}

/* Limpiar floats cada 2 productos en móvil - NO limpiar para permitir 2 por fila */
@media (max-width: 767px) {
    .product-list-image-view .product-item {
        height: 280px;
    }
}

/* Limpiar floats cada 3 productos en tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .product-list-image-view .col-sm-4:nth-child(3n+1) {
        clear: left;
    }
    .product-list-image-view .product-item {
        height: 285px;
    }
}

/* Limpiar floats cada 4 productos en desktop - NO limpiar para permitir 4 por fila */
@media (min-width: 992px) {
    .product-list-image-view .product-item {
        height: 290px;
    }
}

/* Color naranja para precios de productos */
.product-item-inner .product-item-details .product-item-prices {
    color: #FF5A46 !important;
    font-weight: 500;
}

.product-item-inner .product-item-details .product-item-prices div {
    color: #FF5A46 !important;
}