/* ============================================================
   AKALIA STORE — RESPONSIVE CSS v3
   Principio: solo corregir lo necesario, no tocar Swiper/Elementor internamente
   ============================================================ */

/* ── Evitar scroll horizontal global ── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}


/* ============================================================
   1. HEADER — NAVEGACIÓN MÓVIL
   ============================================================ */
@media (max-width: 768px) {

    /* Ocultar el botón × del menú móvil (close btn) cuando el nav está cerrado */
    .lakit-nav-menuwrap .lakit-nav__mobile-close-btn,
    .lakit-nav__mobile-close-btn {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    /* Logo */
    .lakit-logo img,
    .site-branding img {
        max-height: 36px !important;
        width: auto !important;
    }

    /* Alinear iconos del header horizontalmente */
    .lakit-header .elementor-widget-wrap,
    .lakit-header .elementor-container > .elementor-row {
        align-items: center !important;
        gap: 4px !important;
    }
}

/* ============================================================
   2. SLIDER — no tocar altura de Swiper, solo textos e imagen
   ============================================================ */
@media (max-width: 768px) {

    /* Texto del slider: tamaño fluido */
    .lakit-slide-heading,
    .slider-heading-1,
    .slider-heading-2 {
        font-size: clamp(28px, 9vw, 48px) !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    .lakit-slide-description,
    .slider-desc-1,
    .slider-desc-2 {
        font-size: clamp(22px, 7vw, 38px) !important;
        text-align: center !important;
    }

    .lakit-slide-content {
        text-align: center !important;
        align-items: center !important;
        padding: 16px !important;
    }

    .lakit-slide-button {
        padding: 12px 28px !important;
        font-size: 13px !important;
        border-radius: 30px !important;
    }

    /* === SLIDER: sincronizar alturas al tamaño móvil === */

    /* Forzar toda la cadena del slider a la misma altura en móvil */
    .elementor-element-7f4672b,
    .elementor-element-7f4672b .elementor-element-dcaa442,
    .elementor-element-7f4672b .lakit-slides,
    .elementor-element-7f4672b .lakit-carousel-inner,
    .elementor-element-7f4672b .swiper-container,
    .elementor-element-7f4672b .swiper-wrapper {
        height: 70vh !important;
        max-height: 520px !important;
        min-height: 320px !important;
        overflow: hidden !important;
    }

    /* Cada slide ocupa el 100% del contenedor */
    .elementor-element-7f4672b .swiper-slide {
        height: 100% !important;
    }

    /* El wrap de fondo rellena el slide */
    .elementor-element-7f4672b .lakit-slide-wrapbg {
        height: 100% !important;
        position: absolute !important;
        inset: 0 !important;
    }

    /* La imagen de fondo rellena el wrapbg */
    .elementor-element-7f4672b .lakit-slide-bg {
        background-size: cover !important;
        background-position: center center !important;
        height: 100% !important;
        position: relative !important;
    }

    /* El contenido del slide ocupa el 100% de la altura */
    .elementor-element-7f4672b .lakit-slide-inner {
        height: 100% !important;
        position: relative !important;
        z-index: 2 !important;
    }

    /* Flechas: lados del slide */
    .lakit-carousel__prev-arrow-dcaa442 {
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        bottom: auto !important;
    }
    .lakit-carousel__next-arrow-dcaa442 {
        right: 10px !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        bottom: auto !important;
    }
}

/* ============================================================
   3. LOGOS / FRASE — scroll horizontal sin romper layout
   ============================================================ */
@media (max-width: 768px) {

    /* Contenedor de la frase */
    .elementor-element-ac6ce16 .elementor-divider-separator {
        font-size: 12px !important;
        padding: 0 20px !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }

    /* Logos: scroll horizontal suave */
    .elementor-element-89a063b {
        overflow: hidden !important;
    }

    .elementor-element-89a063b .lakit-carousel-inner,
    .elementor-element-89a063b .lakit-bannerlist__list_wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .elementor-element-89a063b .lakit-carousel-inner::-webkit-scrollbar { display: none !important; }

    /* Mostrar todos los logos en fila */
    .elementor-element-89a063b .lakit-bannerlist__list,
    .elementor-element-89a063b .swiper-wrapper {
        transform: none !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        padding: 8px 20px !important;
        gap: 28px !important;
        align-items: center !important;
    }

    .elementor-element-89a063b .lakit-bannerlist__item,
    .elementor-element-89a063b .swiper-slide {
        flex-shrink: 0 !important;
        width: auto !important;
        max-width: none !important;
    }

    .elementor-element-89a063b .lakit-bannerlist__image-instance {
        max-height: 32px !important;
        width: auto !important;
        opacity: 0.65 !important;
    }
}

/* ============================================================
   4. NUEVAS TENDENCIAS — banners en columna
   ============================================================ */
@media (max-width: 768px) {

    /* Título */
    .elementor-element-a153f42 .elementor-heading-title {
        font-size: clamp(26px, 8vw, 42px) !important;
        text-align: center !important;
    }

    /* Forzar columna sin romper Swiper nativo */
    .elementor-element-bb486f6 .swiper-wrapper,
    .elementor-element-bb486f6 .lakit-bannerlist__list {
        flex-direction: column !important;
        transform: none !important;
        gap: 16px !important;
        padding: 0 16px !important;
        width: 100% !important;
        align-items: center !important;
    }

    .elementor-element-bb486f6 .swiper-slide,
    .elementor-element-bb486f6 .lakit-bannerlist__item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .elementor-element-bb486f6 .lakit-bannerlist__link {
        height: 240px !important;
        border-radius: 50px 50px 0 0 !important;
        display: block !important;
    }

    .elementor-element-bb486f6 .lakit-bannerlist__image-instance {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Mostrar overlay info en todas las tarjetas en móvil */
    body.body-dark .elementor-element-bb486f6 .lakit-bannerlist__content {
        opacity: 1 !important;
    }
    .elementor-element-bb486f6 .lakit-bannerlist__image:after {
        opacity: 0.25 !important;
    }

    /* Ocultar flechas del carrusel de tendencias (ya son columna) */
    .lakit-carousel__prev-arrow-bb486f6,
    .lakit-carousel__next-arrow-bb486f6 {
        display: none !important;
    }
}

/* ============================================================
   5. NUESTROS SERVICIOS — grid 2x2
   ============================================================ */
@media (max-width: 768px) {

    .elementor-element-231edf7 .elementor-heading-title {
        font-size: clamp(20px, 6vw, 32px) !important;
        text-align: center !important;
    }

    .elementor-element-95ef313 .swiper-wrapper,
    .elementor-element-95ef313 .lakit-bannerlist__list {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
        transform: none !important;
        width: 100% !important;
    }

    .elementor-element-95ef313 .swiper-slide,
    .elementor-element-95ef313 .lakit-bannerlist__item {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-element-95ef313 .lakit-bannerlist__link {
        min-height: 150px !important;
        display: block !important;
    }

    .elementor-element-95ef313 .lakit-bannerlist__image-instance {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
    }

    .lakit-carousel__prev-arrow-95ef313,
    .lakit-carousel__next-arrow-95ef313 {
        display: none !important;
    }
}

/* ============================================================
   6. GRID DE PRODUCTOS — 2 columnas en móvil
   ============================================================ */
@media (max-width: 768px) {

    /* Título secciones de productos */
    .elementor-element-c6e8f28 .elementor-heading-title,
    .elementor-element-d00ea3e .elementor-heading-title {
        text-align: center !important;
        font-size: clamp(22px, 7vw, 38px) !important;
    }

    /* Grid 2 columnas */
    ul.products,
    .ul_products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
        margin: 0 !important;
    }

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

    .product_item--title a {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }

    .woocommerce-Price-amount bdi {
        font-size: 13px !important;
    }

    /* Imagen en relación de aspecto vertical */
    li.product .product_item--thumbnail,
    li.product .lakit-posts__thumbnail-link {
        aspect-ratio: 3/4 !important;
        overflow: hidden !important;
        display: block !important;
    }

    li.product img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Iconos de acción más compactos */
    .add_wishlist,
    .la-quickview-button,
    .add_compare {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Móvil muy pequeño: 1 columna */
@media (max-width: 380px) {
    ul.products, .ul_products {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   7. TABS DE CATEGORÍA — scroll horizontal
   ============================================================ */
@media (max-width: 768px) {

    /* Tabs del bloque "Novedades" */
    .elementor-element-143d805 .lakit-filter__list,
    .elementor-element-143d805 .lakit-filter-by__list,
    #seccion-tienda .lakit-filter__list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 4px !important;
        gap: 6px !important;
    }
    .elementor-element-143d805 .lakit-filter__list::-webkit-scrollbar { display: none !important; }

    .elementor-element-143d805 .lakit-filter__item,
    #seccion-tienda .lakit-filter__item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
}

/* ============================================================
   8. BANNER "NUNCA DEJES"
   ============================================================ */
@media (max-width: 768px) {

    .elementor-element-0f11c7e {
        padding: 36px 20px !important;
    }

    .elementor-element-90bda74 .elementor-heading-title {
        font-size: clamp(18px, 5.5vw, 30px) !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }

    .elementor-element-0f11c7e .e-con-inner {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    .elementor-element-0f11c7e img {
        max-width: 100% !important;
        max-height: 260px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Botón centrado */
    .elementor-element-d9bf0a6 .elementor-button {
        margin: 0 auto !important;
        display: block !important;
        width: fit-content !important;
    }
}

/* ============================================================
   9. BANNER "VISTE COMO"
   ============================================================ */
@media (max-width: 768px) {

    .elementor-element-a783588 {
        min-height: 300px !important;
        padding: 36px 20px !important;
    }

    .elementor-element-74b88b4 .elementor-heading-title,
    .elementor-element-32a31b8 .elementor-heading-title {
        font-size: clamp(16px, 5vw, 28px) !important;
        text-align: center !important;
    }

    .elementor-element-279aec6 .elementor-button {
        margin: 0 auto !important;
        display: block !important;
        width: fit-content !important;
    }
}

/* ============================================================
   10. GALERÍA CATEGORÍAS VERTICAL (N-Tabs)
   ============================================================ */
@media (max-width: 768px) {

    /* Pestañas: fila horizontal scrollable */
    .ntabs--nav,
    .lakit-ntab-nav {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 4px !important;
        padding: 0 12px 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        margin-bottom: 16px !important;
    }
    .ntabs--nav::-webkit-scrollbar { display: none !important; }

    .ntabs--nav .ntabs--item {
        flex-shrink: 0 !important;
    }

    .ntabs--title {
        white-space: nowrap !important;
        font-size: 12px !important;
        padding: 7px 14px !important;
    }

    /* Imagen de categoría seleccionada */
    .ntabs--content-wrapper img {
        width: 100% !important;
        max-height: 300px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }
}

/* ============================================================
   11. MODAL VISTA RÁPIDA
   ============================================================ */
@media (max-width: 768px) {

    #customQuickViewModal .qv-content {
        flex-direction: column !important;
        width: 92vw !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        border-radius: 16px !important;
        margin: auto !important;
    }

    #customQuickViewModal .qv-left {
        width: 100% !important;
        height: 200px !important;
        flex-shrink: 0 !important;
    }

    #customQuickViewModal .qv-left img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 16px 16px 0 0 !important;
    }

    #customQuickViewModal .qv-right {
        width: 100% !important;
        padding: 20px 16px !important;
        box-sizing: border-box !important;
    }

    #customQuickViewModal #qv-title {
        font-size: 20px !important;
    }

    #customQuickViewModal .qv-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #customQuickViewModal .qv-add-btn {
        width: 100% !important;
    }
}

/* ============================================================
   12. TIENDA (tienda.html)
   ============================================================ */
@media (max-width: 768px) {

    .tienda-filtros,
    .shop-category-tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        padding-bottom: 8px !important;
        gap: 6px !important;
        display: flex !important;
    }
    .tienda-filtros::-webkit-scrollbar { display: none !important; }

    .tienda-filtros button,
    .shop-category-tabs button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ============================================================
   13. CARRITO (cart.html)
   ============================================================ */
@media (max-width: 768px) {

    .cart-wrapper,
    #cart-section {
        padding: 16px !important;
    }

    /* Tabla → layout de card */
    .cart-table-container {
        overflow-x: hidden !important;
    }

    .cart-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    }

    .cart-item-img {
        width: 70px !important;
        height: 70px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .cart-item-details {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .cart-totals-card {
        width: 100% !important;
        margin-top: 20px !important;
    }

    .btn-checkout,
    .checkout-action-btn {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================================
   14. CHECKOUT (checkout.html)
   ============================================================ */
@media (max-width: 768px) {

    .checkout-container {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 24px !important;
    }

    .checkout-form-col,
    .checkout-summary-col {
        width: 100% !important;
    }

    .checkout-form-col input,
    .checkout-form-col select,
    .checkout-form-col textarea {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* evita zoom en iOS */
    }

    .form-row-half {
        flex-direction: column !important;
    }

    .btn-place-order {
        width: 100% !important;
        font-size: 15px !important;
    }
}

/* ============================================================
   15. PRODUCTO (product.html)
   ============================================================ */
@media (max-width: 768px) {

    .product-detail-layout {
        flex-direction: column !important;
        padding: 16px !important;
        gap: 20px !important;
    }

    .product-gallery-col,
    .product-info-col {
        width: 100% !important;
    }

    .product-gallery-col img {
        max-height: 340px !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 12px !important;
    }

    .product-info-col h1 {
        font-size: clamp(20px, 6vw, 30px) !important;
    }

    .btn-add-to-cart {
        width: 100% !important;
    }
}

/* ============================================================
   16. ADMIN PANEL
   ============================================================ */
@media (max-width: 900px) {

    /* Sidebar compacto */
    .admin-sidebar {
        width: 54px !important;
        overflow: hidden !important;
    }

    /* Ocultar textos del menú */
    .admin-sidebar .menu-item > :not(svg),
    .admin-sidebar .sidebar-brand > span {
        display: none !important;
    }

    .admin-sidebar .menu-item {
        justify-content: center !important;
        padding: 12px 0 !important;
    }

    .admin-sidebar .sidebar-header {
        padding: 12px 8px !important;
    }

    .admin-sidebar .sidebar-brand img {
        max-height: 30px !important;
    }

    /* Main desplazado */
    .admin-main {
        margin-left: 54px !important;
        padding: 16px 14px !important;
    }

    /* KPI: 2x2 */
    .summary-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    /* Header de sección */
    .header-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .header-actions h1 {
        font-size: 18px !important;
        width: 100% !important;
    }

    /* Búsqueda compacta */
    .table-search-wrap input {
        width: 130px !important;
    }

    /* Tablas con scroll */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Diseño: sliders globales en columna */
    #section-design .form-container > * {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {

    /* KPI: 1 columna */
    .summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* Dashboard: gráfica y estado en columna */
    #section-dashboard > div[style*="grid-template-columns:1fr 1.6fr"] {
        display: flex !important;
        flex-direction: column !important;
    }

    .admin-main {
        padding: 12px 10px !important;
    }
}

/* ============================================================
   17. LOGIN ADMIN (admin/login.html)
   ============================================================ */
@media (max-width: 768px) {

    .login-panel-left { display: none !important; }

    .login-panel-right {
        width: 100% !important;
        padding: 40px 20px !important;
    }

    .login-form-box {
        max-width: 100% !important;
    }
}

/* ============================================================
   18. TIPOGRAFÍA Y UTILIDADES GLOBALES MÓVIL
   ============================================================ */
@media (max-width: 768px) {

    /* Imágenes siempre responsivas */
    img {
        max-width: 100% !important;
    }

    /* Inputs en móvil: font-size 16px para evitar zoom en iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Paginación centrada */
    #inv-pagination,
    #ord-pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }
}