/* ==========================================================================
   EL BARRIL DEL VINO (EBDV) - MOBILE RESPONSIVENESS & UX ULTRA-FAST STYLES
   ========================================================================== */

/* 1. PREVENIR OVERFLOW HORIZONTAL Y TAP HIGHLIGHT */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* 2. OPTIMIZACIÓN DE ELEMENTOS TÁCTILES Y TIENDA WOOCOMMERCE EN MÓVIL */
@media (max-width: 768px) {
    button, 
    .btn, 
    input[type="submit"], 
    input[type="button"], 
    select, 
    .nav-link,
    .add_to_cart_button {
        min-height: 44px;
        min-width: 44px;
        font-size: 16px !important; /* Previene auto-zoom en iOS Safari */
    }

    .container, .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Grilla de Productos en Móvil (2 columnas ordenadas para E-Commerce) */
    .products, ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .products li.product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }

    /* Modales y Carrito adaptados a pantallas reducidas */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    .table-responsive, table.shop_table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* 3. SKELETON LOADERS (EFECTO DE CARGA INSTANTÁNEA SHIMMER PARA CATÁLOGO Y BLOG) */
.skeleton {
    background: #e2e8f0;
    background: linear-gradient(110deg, #eceff1 8%, #f5f7f8 18%, #eceff1 33%);
    border-radius: 6px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

.skeleton-card {
    height: 280px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 8px;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.skeleton-text-short {
    width: 50%;
}

@keyframes shine {
    to {
        background-position-x: -200%;
    }
}

/* 4. FONT-DISPLAY SWAP PARA TEXTO INSTANTÁNEO */
@font-face {
    font-family: 'Century Gothic';
    font-display: swap;
}