/*
Theme Name: eSaicoWC
Description: Estilos base del tema independiente
Version: 2.0.0
*/

/* Contenedor de productos sin limitación de ancho */
.woocommerce .esaico-archive-products-full-width {
    width: 100vw;
    max-width: none;
    margin-left: calc(-50vw + 50%);
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    left: 50%;
    right: 50%;
    margin-right: -50vw;
}

/* Móvil: simplificar contenedor para evitar overflow */
@media (max-width: 480px) {
    /* Forzar que todos los contenedores no tengan padding/margin */
    body,
    html,
    .site,
    .site-content,
    .container,
    .esaico-archive-container,
    .woocommerce,
    .woocommerce-page {
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* SOLUCIÓN DEFINITIVA: Anular completamente las reglas problemáticas */
    .woocommerce .esaico-archive-products-full-width {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 10px !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    
    /* Asegurar que el body no tenga overflow horizontal, pero permitir en elementos específicos */
    body {
        overflow-x: hidden !important;
    }

    /* Permitir scroll horizontal en elementos que lo necesiten */
    .esaico-meta-section,
    .esaico-meta-scroll,
    .esaico-download-view .esaico-meta-section,
    .esaico-download-view .esaico-meta-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative;
        z-index: 1;
    }

    /* Asegurar que el scroll funcione en la vista de descarga */
    .esaico-download-view {
        overflow: visible !important;
    }

    /* OPTIMIZACIONES GENERALES PARA MÓVIL */
    /* Prevenir overflow horizontal en todo el sitio */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Asegurar que los contenedores no causen overflow */
    .site,
    .site-content,
    .content-area,
    .primary,
    .main-content,
    .entry-content,
    .post-content,
    .page-content {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Asegurar que las imágenes no causen overflow */
    img,
    .wp-post-image,
    .attachment-full,
    .size-full {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Asegurar que los iframes y embeds sean responsive */
    iframe,
    embed,
    object,
    video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Asegurar que las tablas sean responsive */
    table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block;
        white-space: nowrap;
    }

    /* Mejorar touch targets */
    button,
    .btn,
    a,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Asegurar que el texto no cause overflow */
    h1, h2, h3, h4, h5, h6,
    p, span, div, li {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

/* Forzar que el grid use todo el ancho del contenedor */
.woocommerce .esaico-archive-products-full-width .products,
.woocommerce-page .esaico-archive-products-full-width .products {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Estilos base para contenedores de WooCommerce */
.woocommerce .site-content,
.woocommerce-page .site-content {
    max-width: none;
    width: 100%;
}

/* Asegurar que el contenedor principal no tenga limitaciones */
.woocommerce .esaico-archive-container,
.woocommerce-page .esaico-archive-container {
    width: 100%;
    max-width: none;
}

/* Estilos del contenedor principal */
.esaico-container {
    width: 100%;
    max-width: var(--esaico-container-max-width, 1200px);
    margin: 0 auto;
    padding: 0 var(--esaico-container-padding, 15px);
    box-sizing: border-box;
}

/* Estilos para títulos de página */
.esaico-container .page-title {
    font-size: 2rem;
    font-weight: 600;
    margin: 20px 0;
    color: var(--esaico-text-primary);
}

/* Estilos para descripción de categoría */
.esaico-container .category-description {
    margin-bottom: 20px;
    color: var(--esaico-text-muted);
    line-height: 1.6;
}

/* Breadcrumb básico - REMOVIDO: duplicado con style.css */

/* Los enlaces heredan estilos globales de a {} */

/* Estilos para mensaje de no productos encontrados */
.esaico-no-results {
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin: 20px 0;
}

.esaico-no-results-icon {
    font-size: 3rem;
    color: var(--esaico-text-light);
    margin-bottom: 20px;
}

.esaico-no-results h2 {
    font-size: 1.5rem;
    color: var(--esaico-text-primary);
    margin-bottom: 10px;
}

.esaico-no-results p {
    color: var(--esaico-text-muted);
    margin-bottom: 20px;
}

.esaico-no-results .back-to-shop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--esaico-primary);
    color: var(--esaico-text-white);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.esaico-no-results .back-to-shop:hover {
    background: var(--esaico-primary-dark);
}

/* Sobrescribir limitaciones específicas del contenedor esaico */
.woocommerce .esaico-container,
.woocommerce-page .esaico-container,
.woocommerce .esaico-single-product-container,
.woocommerce-page .esaico-single-product-container {
    max-width: var(--esaico-container-max-width, 1200px);
    width: 100%;
}

/* Sobrescribir estilos de grid de Astra con alta especificidad */
.woocommerce .products,
.woocommerce-page .products,
.woocommerce[class*="columns-"] ul.products,
.woocommerce-page[class*="columns-"] ul.products,
.ast-container .woocommerce ul.products:not(.elementor-grid),
.woocommerce-page ul.products:not(.elementor-grid),
.esaico-sidebar + .esaico-main-content .woo-product-loop,
.esaico-shop-layout .esaico-main-content .woo-product-loop,
.esaico-archive-products-full-width .products {
    display: grid;
    grid-template-columns: repeat(var(--desktop-columns, 3), 1fr);
    gap: var(--card-gap, 20px);
    list-style: none;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Resetear estilos de li.product de Astra */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product {
    width: 100%;
    max-width: 100%;
    float: none;
    margin: 0;
    padding: 0;
    clear: none;
    box-sizing: border-box;
    overflow: hidden;
}

/* Asegurar que las tarjetas no excedan el ancho */
.woocommerce .music-card,
.woocommerce .woo-product-card,
.woocommerce-page .music-card,
.woocommerce-page .woo-product-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    margin: 0 0 20px 0;
}

/* Media queries para responsive */
@media (max-width: 1024px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .woocommerce[class*="columns-"] ul.products,
    .woocommerce-page[class*="columns-"] ul.products,
    .ast-container .woocommerce ul.products:not(.elementor-grid),
    .woocommerce-page ul.products:not(.elementor-grid),
    .esaico-sidebar + .esaico-main-content .woo-product-loop,
    .esaico-shop-layout .esaico-main-content .woo-product-loop {
        grid-template-columns: repeat(var(--tablet-columns, 2), 1fr);
        gap: var(--tablet-gap, 15px);
    }
}

@media (max-width: 768px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .woocommerce[class*="columns-"] ul.products,
    .woocommerce-page[class*="columns-"] ul.products,
    .ast-container .woocommerce ul.products:not(.elementor-grid),
    .woocommerce-page ul.products:not(.elementor-grid),
    .esaico-sidebar + .esaico-main-content .woo-product-loop,
    .esaico-shop-layout .esaico-main-content .woo-product-loop {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 8px;
    }
}

@media (max-width: 480px) {
    .woocommerce .products,
    .woocommerce-page .products,
    .woocommerce[class*="columns-"] ul.products,
    .woocommerce-page[class*="columns-"] ul.products,
    .ast-container .woocommerce ul.products:not(.elementor-grid),
    .woocommerce-page ul.products:not(.elementor-grid),
    .esaico-sidebar + .esaico-main-content .woo-product-loop,
    .esaico-shop-layout .esaico-main-content .woo-product-loop {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* PANTALLAS EXTRA PEQUEÑAS (≤360px) - Para móviles muy pequeños */
@media (max-width: 360px) {
    /* Reducir aún más los gaps y padding */
    .woocommerce .products,
    .woocommerce-page .products,
    .woocommerce[class*="columns-"] ul.products,
    .woocommerce-page[class*="columns-"] ul.products,
    .ast-container .woocommerce ul.products:not(.elementor-grid),
    .woocommerce-page ul.products:not(.elementor-grid),
    .esaico-sidebar + .esaico-main-content .woo-product-loop,
    .esaico-shop-layout .esaico-main-content .woo-product-loop {
        gap: 8px;
        padding: 0 4px;
    }

    /* Ajustar contenedores principales */
    .esaico-container {
        padding: 0 8px;
    }

    /* Asegurar que los títulos sean legibles */
    .esaico-container .page-title {
        font-size: 1.5rem;
        margin: 15px 0;
    }

    /* Ajustar breadcrumb */
    .esaico-breadcrumb {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* Mejorar touch targets en pantallas muy pequeñas */
    button,
    .btn,
    a,
    input[type="submit"],
    input[type="button"] {
        min-height: 40px;
        min-width: 40px;
    }

    /* Ajustar espaciado de elementos */
    .woocommerce .music-card,
    .woocommerce .woo-product-card,
    .woocommerce-page .music-card,
    .woocommerce-page .woo-product-card {
        margin: 0 0 15px 0;
    }
}