/* Ajustes de Optimización Móvil - Zambra.bike */
/* Breakpoint alineado con drawer (WPCode) */
@media (max-width: 768px) {

    /* ========================================
       1. ELIMINAR DESBORDAMIENTO HORIZONTAL
       ======================================== */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }

    .elementor-section {
        max-width: 100vw !important;
    }

    /* ========================================
       2. CABECERA (HEADER)
       ======================================== */
    .elementor-location-header .elementor-container {
        padding: 10px 15px !important;
        flex-wrap: nowrap !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .elementor-widget-theme-site-logo img {
        max-width: 120px !important;
        height: auto !important;
    }

    .elementor-497 .elementor-element.elementor-element-8575bdc .elementor-element-populated {
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .elementor-497 .elementor-element.elementor-element-163fadb {
        flex: 0 0 auto !important;
    }

    .elementor-497 .elementor-element.elementor-element-163fadb .elementor-menu-toggle {
        padding: 8px !important;
    }

    .elementor-497 .elementor-element.elementor-element-691c0c2 {
        flex: 0 0 auto !important;
    }

    /* ========================================
       3. TIPOGRAFÍA Y TÍTULOS
       ======================================== */
    h1,
    .elementor-heading-title,
    .elementor-widget-heading .elementor-heading-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    h2 {
        font-size: 20px !important;
    }

    .elementor-1462 .elementor-element.elementor-element-3b1b874 .elementor-heading-title,
    .elementor-1462 .elementor-element.elementor-element-58c9b89 .elementor-heading-title {
        font-size: 28px !important;
    }

    /* ========================================
       4. GALERÍA DE PRODUCTOS
       ======================================== */
    .elementor-swiper-button {
        display: none !important;
    }

    /* ========================================
       5. BARRA DE TOTALES / STICKY
       ======================================== */
    .wapf-total-bar,
    .elementor-sticky--active {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 15px !important;
        background: #ffffff !important;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
    }

    .wapf-product-totals:before {
        width: 100vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* ========================================
        6. BOTONES
        ======================================== */
    .wapf_btn_next {
        width: 100% !important;
        display: block !important;
        margin: 15px 0 !important;
        text-align: center !important;
        padding: 15px !important;
        font-size: 16px !important;
    }

    /* ========================================
        6b. INFO ICON (WAPF more-info)
        ======================================== */
    .more-info:before {
        height: 30px !important;
        flex-shrink: 0 !important;
    }

    /* ========================================
        7. MÁRGENES DE LECTURA
        ======================================== */
    .elementor-text-editor,
    .elementor-widget-text-editor {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ========================================
       8. PROGRESS BAR (PASOS CONFIGURADOR)
       ======================================== */
    .wapf-progress-steps {
        gap: 8px !important;
    }

    .wapf-progress-steps div {
        position: relative !important;
    }

    .wapf-progress-steps div:before {
        width: 40px !important;
        height: 40px !important;
        background-size: 55% !important;
    }

    .wapf-progress-steps div:after {
        display: none !important;
    }

    .wapf-progress-steps div.active:after {
        display: block !important;
        position: absolute !important;
        top: 48px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 10px !important;
        white-space: nowrap !important;
        width: auto !important;
        color: #000 !important;
    }

    .wapf-progress {
        margin: 10px auto 20px !important;
    }

    .wapf-progress:before,
    .wapf-progress-bar {
        top: 20px !important;
        height: 3px !important;
    }

    /* ========================================
       9. SELECTS
       ======================================== */
    select {
        width: 100% !important;
    }

    /* ========================================
       10. TABLAS
       ======================================== */
    table {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       11. COLUMNAS PRODUCTO → STACK VERTICAL
       ======================================== */
    .elementor-1462 .elementor-element.elementor-element-a3eaa92,
    .elementor-1462 .elementor-element.elementor-element-285dfb7 {
        width: 100% !important;
    }

    .elementor-1462 .elementor-element.elementor-element-285dfb7 > .elementor-element-populated {
        border-width: 1px 0 0 0 !important;
    }

    /* ========================================
       12. IMAGEN CARRUSEL EN MÓVIL
       ======================================== */
    .elementor-1462 .elementor-element.elementor-element-a3eaa92 {
        min-height: 300px !important;
    }

    .elementor-1462 .elementor-element.elementor-element-533568c {
        position: static !important;
    }

    /* ========================================
       13. WAPF WRAPPER EN MÓVIL
       ======================================== */
    .wapf-wrapper {
        flex-direction: column !important;
    }

    .wapf-configurator-container {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .wapf-summary-container {
        width: 100% !important;
        padding-left: 0 !important;
    }

}