/* productos-horizontal.css */

/* ==========================================================================
   Estilos Generales y Layout
   ========================================================================== */

/* Contenedor principal de los productos (puede ser un wrapper de Elementor o tema) */
.productos-horizontal-wrapper {
    /* Si estás usando un layout de 2 columnas en Elementor o similar,
       estos estilos pueden ser manejados por tu constructor de página. */
}

/* Contenedor del contenido de productos que se actualiza con AJAX.
   Añade una transición para un efecto de carga suave. */
.productos-horizontal-content-wrapper {
    transition: opacity 0.3s ease-in-out; /* Suaviza el efecto de carga */
    position: relative; /* Necesario si vas a añadir un loader absoluto más adelante */
}

/* ==========================================================================
   Barra Superior (Conteo de Productos y Filtros)
   ========================================================================== */

.productos-horizontal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    gap: 15px; /* Espacio entre los elementos en la barra superior */
}

.productos-horizontal-count-info {
    font-size: 0.9rem;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
}

.productos-horizontal-filters {
    display: flex;
    align-items: center;
    gap: 10px; /* Espacio entre el label y el select */
}

.productos-horizontal-filters label {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
}

.productos-horizontal-filters select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 0px;
    background-color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 150px; /* Asegura que el select no sea demasiado pequeño */
}

/* ==========================================================================
   Lista de Productos Individuales
   ========================================================================== */

.productos-horizontal-list {
    display: flex;
    flex-direction: column; /* Apila los productos verticalmente */
    gap: 30px; /* Espacio entre cada producto individual */
    margin-bottom: 30px; /* Espacio entre la lista de productos y la paginación */
}

.producto-horizontal-item {
    position: relative;
    background: #fff;
    border-radius: 0px;
    box-shadow: 0 0 0 1px #e1e1e1; /* Borde sutil */
    overflow: hidden; /* Asegura que la franja de categoría no se salga */
}


.producto-horizontal-item:hover {
    background-color: #f8f9fa; /* Gris claro al pasar el mouse */
}

/* Franja de Categoría Azul */
.categoria-franja {
    background-color: #007AC9; /* Color azul de Spartan Chemical */
    color: white;
    font-weight: bold;
    padding: 10px 15px;
    font-size: 0.85rem;
    text-transform: uppercase;
    text-align: left; /* Centra el texto de la categoría */
}

/* Enlace de producto que envuelve imagen y contenido */
.producto-enlace-total {
    display: flex;
    align-items: flex-start; /* Alinea los ítems en la parte superior */
    padding: 20px;
    text-decoration: none; /* Sin subrayado */
    color: inherit; /* Hereda el color del texto */
    gap: 20px; /* Espacio entre la imagen y el contenido del producto */
}

/* Imagen del producto */
.producto-imagen img {
    width: 100px;
    height: auto; /* Mantiene la proporción */
    object-fit: contain; /* Ajusta la imagen dentro de su caja sin recortar */
    background: #fff; /* Fondo blanco para la imagen */
    padding: 10px; /* Espacio alrededor de la imagen */
    border: 1px solid #ddd; /* Borde sutil alrededor de la imagen */
    flex-shrink: 0; /* Previene que la imagen se encoja */
}

/* Contenido del producto (título, descripción, atributos) */
.producto-contenido {
    display: flex;
    flex: 1; /* Permite que el contenido tome el espacio restante */
    align-items: flex-start;
    gap: 30px; /* Espacio entre los detalles y los datos de atributos */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    flex-wrap: wrap; /* Permite que los detalles y datos se envuelvan */
}

/* Detalles del producto (título y descripción) */
.producto-detalles {
    flex: 2; /* Ocupa más espacio que los datos de atributos */
    min-width: 250px; /* Asegura un ancho mínimo para los detalles */
}

.producto-titulo {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #49535F;
}

.producto-descripcion {
    font-size: 0.9rem;
    color: #706F6F;
    line-height: 1.4;
}

/* Datos de atributos del producto (PH, Color, Aroma) */
.producto-datos {
    flex: 1; /* Ocupa el espacio restante */
    font-size: 0.80rem;
    color: #B8BAB9 important;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Espacio entre cada línea de atributo */
    min-width: 160px; /* Ancho mínimo para los datos */
    border-left: 0px solid #eee; /* Línea divisoria a la izquierda */
    padding-left: 20px; /* Espacio a la izquierda de la línea divisoria */
}

.producto-datos .linea {
    display: grid;
    grid-template-columns: 70px 1fr; /* Columna fija para el label, el resto para el valor */
    gap: 10px;
    border-bottom: 1px solid #ddd; /* Separador entre líneas de atributo */
    padding-bottom: 4px;
}

.producto-datos .linea:last-child {
    border-bottom: none; /* No hay borde en la última línea */
}

.producto-datos .label {
    color: #B8BAB9;
    text-align: left;
}

.producto-datos .valor {
    font-weight: 800;
    text-align: left;
    color: #706F6F;
}

/* Botón "Añadir al Carrito" */
.producto-boton {
    position: absolute; /* Posicionamiento absoluto dentro del item de producto */
    right: 20px;
    bottom: 20px;
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

.producto-boton .button {
    background-color: #007AC9; /* Color azul */
    color: white !important; /* !important para asegurar que sobreescriba estilos de WooCommerce */
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    border: none;
    font-size: 0.9rem;
    text-transform: none; /* No en mayúsculas por defecto */
    text-decoration: none;
    display: inline-block; /* Para que padding y margen funcionen bien */
}

.producto-boton .button:hover {
    background-color: #0056b3; /* Tono más oscuro al pasar el ratón */
}

/* ==========================================================================
   Paginación
   ========================================================================== */

.productos-horizontal-pagination {
    margin-top: 30px;
    text-align: center;
    display: flex;
    flex-direction: column; /* Apila enlaces y texto de página verticalmente */
    align-items: center; /* Centra horizontalmente */
    gap: 10px; /* Espacio entre los elementos de paginación */
}

.productos-horizontal-pagination ul {
    display: inline-flex; /* Para que los números de página estén en una fila */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px; /* Espacio entre los números de página */
}

.productos-horizontal-pagination li {
    display: block;
}

.productos-horizontal-pagination li a,
.productos-horizontal-pagination li span {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #007AC9;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    min-width: 30px; /* Asegura un tamaño mínimo para los botones */
    text-align: center;
}

.productos-horizontal-pagination li span.current {
    background-color: #007AC9;
    color: white;
    border-color: #007AC9;
    font-weight: bold;
    border-radius: 4px;
}

.productos-horizontal-pagination li a:hover {
    background-color: #e6f7ff;
    border-color: #007AC9;
}

/* Estilo para el texto "Página X de Y" debajo de la paginación */
.productos-horizontal-pagination .pagination-page-info {
    font-size: 0.9rem;
    color: #555;
    margin-top: 5px;
}

/* ==========================================================================
   Estilos para la Lista de Categorías (Nuevo Shortcode)
   ========================================================================== */

.productos-horizontal-categorias {
    background-color: #fff;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 30px; /* Espacio si este bloque está encima de los productos */
}

.productos-horizontal-categorias h3 {
    font-size: 1.1rem;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Separador para el título */
    font-weight: bold;
    text-transform: uppercase;
}

.productos-horizontal-categorias ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
}

.productos-horizontal-categorias li {
    margin-bottom: 2px; /* Espacio entre cada categoría */
}

.productos-horizontal-categorias li:last-child {
    margin-bottom: 0; /* Sin margen en la última categoría */
}

.productos-horizontal-categorias .categoria-link {
    display: block; /* Ocupa todo el ancho disponible */
    padding: 4px 12px;
     font-weight: bold;
    text-decoration: none;
    color: #555; /* Color por defecto del texto */
    font-size: 0.95rem; /* Tamaño de texto uniforme */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease; /* Transición suave para hover y active */
}

.productos-horizontal-categorias .categoria-link:hover {
    color: #007AC9; /* Texto azul al pasar el ratón */
    text-decoration: underline;
}

/* Estilo para la categoría activa/seleccionada */
.productos-horizontal-categorias .categoria-link.active {
    color: #007AC9; /* Texto azul para la categoría activa */
    font-weight: bold; /* Texto en negrita para la categoría activa */
}


/* ==========================================================================
   Media Queries para Responsividad
   ========================================================================== */

@media (max-width: 768px) {
    /* Ajustes para la barra superior en pantallas pequeñas */
    .productos-horizontal-top-bar {
        flex-direction: column; /* Apila los elementos verticalmente */
        gap: 15px;
        text-align: left;
    }

    .productos-horizontal-filters {
        flex-direction: column; /* Apila label y select */
        width: 100%; /* Ocupa todo el ancho */
    }

    .productos-horizontal-filters select {
        width: 100%; /* El select ocupa todo el ancho */
    }

    /* Ajustes para cada item de producto */
    .producto-enlace-total {
        flex-direction: column; /* Apila imagen y contenido verticalmente */
        align-items: left;
        text-align: left;
    }

    .producto-imagen img {
        margin-bottom: 15px;
    }

    .producto-contenido {
        flex-direction: column; /* Apila detalles y datos verticalmente */
        align-items: center;
        gap: 20px;
    }

    .producto-detalles,
    .producto-datos {
        width: 100%;
        min-width: unset; /* Elimina el ancho mínimo para adaptarse */
        border-left: none; /* Elimina el borde vertical */
        padding-left: 0;
        text-align: center;
    }

    .producto-datos .linea {
        grid-template-columns: 1fr; /* Una sola columna para label y valor */
        gap: 5px;
        text-align: center;
    }

    /* Centra los labels y valores en móviles */
    .producto-datos .label,
    .producto-datos .valor {
        text-align: center;
    }

    .producto-boton {
        position: static; /* No más absoluto, fluye con el contenido */
        text-align: center;
        margin-top: 20px;
        padding-bottom: 20px; /* Asegura espacio inferior dentro del item */
    }

    /* Ajustes para la lista de categorías en pantallas pequeñas (si el layout es de 2 columnas) */
    .productos-horizontal-categorias {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
}