/* ==========================================================================
   MBSOFT MAIN - Global Styles & Layout
   ========================================================================== */

/* 1. VARIABLES GLOBALES (Configuración de marca) */
:root {
    --mbsoft-accent: #2563eb;      /* Azul Moderno */
    --mbsoft-accent-dark: #1e40af;
    --mbsoft-bg: #f8fafc;         /* Fondo gris muy claro */
    --mbsoft-text-main: #0f172a;  /* Slate 900 */
    --mbsoft-text-dim: #64748b;   /* Slate 500 */
    --mbsoft-white: #ffffff;
    --mbsoft-radius-lg: 24px;
    --mbsoft-radius-md: 16px;
    --mbsoft-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    --mbsoft-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* 2. RESET BASE (Opcional, enfocado a la tienda) */
.mbsoft_store_container {
    font-family: var(--mbsoft-font);
    background-color: transparent;
    color: var(--mbsoft-text-main);
    line-height: 1.5;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* 3. LAYOUT DE COLUMNAS (El "Sistema Nervioso") */
.mbsoft_main_layout {
    display: grid;
    grid-template-columns: 300px 1fr; /* Sidebar de 300px y resto para productos */
    gap: 40px;
    align-items: start;
    margin-top: 30px;
}

/* Responsivo para Tablets y Móviles */
@media (max-width: 1024px) {
    .mbsoft_main_layout {
        grid-template-columns: 1fr; /* Se apila uno arriba del otro */
        gap: 30px;
    }
}

/* 4. ANIMACIONES GLOBALES */
@keyframes mbsoftFadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aplicar animación de entrada suave a los elementos principales */
.mbsoft_category_carousel,
.mbsoft_search_container,
.mbsoft_filter_sidebar,
.mbsoft_product_card {
    animation: mbsoftFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 5. UTILIDADES */
.mbsoft_no_products {
    grid-column: 1 / -1; /* Ocupa todo el ancho si no hay resultados */
    text-align: center;
    padding: 60px;
    background: var(--mbsoft-white);
    border-radius: var(--mbsoft-radius-md);
    border: 2px dashed #e2e8f0;
    color: var(--mbsoft-text-dim);
}

.mbsoft_loader_dots {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Ajuste para imágenes de WooCommerce */
.mbsoft_product_card img {
    max-width: 100%;
    height: auto;
    display: block;
}