/*
Theme Name:   bruja-amapola-storechild
Theme URI:    https://xstore.8theme.com
Description:  Tema hijo para La Bruja Amapola - Optimizado para móviles y rendimiento
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.1
Text Domain:  xstore-child
*/

/* ========================
   VARIABLES CSS (Nuevo)
   ======================== */
:root {
    --color-primary: #8B5A2B;
    --color-text: #333333;
    --font-main: 'Raleway', sans-serif;
    --font-size-base: 16px;
}

/* ========================
   ESTILOS BASE OPTIMIZADOS
   ======================== */
body {
    font-family: var(--font-main);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ========================
   ESTILOS MÓVILES (Breakpoint 768px)
   ======================== */
@media (max-width: 768px) {
    /* 1. BOTONES ACCESIBLES (WCAG 2.1) */
    .button, 
    .add_to_cart_button, 
    .single_add_to_cart_button,
    .quantity input.qty,
    .et-wishlist-widget .wishlist-count {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: var(--font-size-base) !important;
        line-height: 1.5 !important;
    }

    /* 2. TIPOGRAFÍA LEGIBLE */
    body {
        font-size: var(--font-size-base) !important;
        -webkit-text-size-adjust: 100%;
    }

    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.4rem !important; }

    /* 3. GRID DE PRODUCTOS */
    .products-grid .product,
    .woocommerce ul.products li.product {
        width: 48% !important;
        margin: 0 1% 20px !important;
        float: left !important;
        clear: none !important;
    }

    .products-grid .product:nth-child(2n),
    .woocommerce ul.products li.product:nth-child(2n) {
        margin-right: 0 !important;
        float: right !important;
    }

    /* 4. MENÚ MÓVIL */
    .mobile-menu-wrapper,
    .et-mobile-panel-wrapper {
        font-size: 1.1rem !important;
    }
    
    .mobile-menu-wrapper .menu-item a {
        padding: 12px 15px !important;
    }

    /* 5. FORMULARIOS Y ENTRADAS */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea,
    .woocommerce-ordering select {
        font-size: var(--font-size-base) !important;
        padding: 12px !important;
        min-height: 48px;
    }

    /* 6. ESPECÍFICO PARA XSTORE */
    .et-wishlist-widget,
    .et-compare-widget {
        display: none !important; /* Mejora espacio en móviles */
    }

    /* 7. IMÁGENES RESPONSIVAS */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ========================
   OPTIMIZACIONES PARA TIENDA
   ======================== */
/* Botones principales */
.woocommerce button.button.alt {
    background-color: var(--color-primary) !important;
    color: white !important;
    transition: all 0.3s ease;
}

.woocommerce button.button.alt:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* Títulos de productos */
.woocommerce-loop-product__title {
    margin-bottom: 10px !important;
    font-size: 1rem !important;
    min-height: 2.8em; /* Evita saltos de línea */
}

/* ========================
   ANIMACIONES OPTIMIZADAS
   ======================== */
@media (prefers-reduced-motion: no-preference) {
    .product:hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
}

/* ========================
   CORRECCIONES PARA IOS
   ======================== */
@supports (-webkit-touch-callout: none) {
    input, textarea {
        font-size: var(--font-size-base) !important;
    }
}