/* Interacciones móviles que permanecen fuera del render inicial.
 * El botón y su geometría crítica siguen en custom_layout_patitas.css;
 * esta hoja añade el cajón y la hoja de orden cuando termina de descargarse. */

/* ===========================================================================
   FILTROS EN MÓVIL · propuesta 01: cajón a pantalla completa
   ===========================================================================
   Elegida por el cliente entre tres maquetas. Sustituye al panel en línea, que
   empujaba la rejilla hacia abajo: 634px de facetas plegadas (778 antes de apretar
   el espaciado) sin mostrar ni un valor.

   No hace falta marcado nuevo salvo la cabecera: el envoltorio ya traía
   #search_filter_controls (mobile-only, con «OK» y el hueco de «limpiar todo»), que
   aquí pasa a ser la barra fija de abajo. Lo abre y lo cierra el mismo
   .js-search-toggler del core, así que no se toca su comportamiento.

   Solo por debajo de 992px. En escritorio el panel sigue siendo la columna de
   filtros de siempre y estas reglas no aplican.
   =========================================================================== */
@media (max-width: 1199px) {
    /* El cajón. `position: fixed` lo saca del flujo, así que la rejilla de productos
       ya no se desplaza hacia abajo al abrir los filtros. */
    :is(#category, #manufacturer, #supplier, #search, #best-sales, #new-products, #prices-drop) #search_filters_wrapper {
        position: fixed;
        z-index: 1051; /* por encima de la cabecera pegada del tema, que va a 1050 */
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        /* Transparente: el blanco lo pone el panel de abajo, para que la franja de
           arriba deje ver que hay algo detrás y se entienda que se puede cerrar. */
        background: transparent;
    }

    /* Las utilidades hidden-lg-up dejan de ser móviles a partir de 992px.
       Dentro de nuestro cajón 768–1199 siguen siendo controles de tablet. */
    #search_filters_wrapper .pat-cajon-velo {
        display: block !important;
    }

    #search_filters_wrapper .pat-cajon-cab,
    #search_filters_wrapper #search_filter_controls {
        display: flex !important;
    }

    /* La franja de cierre. Ocupa la parte de arriba y al tocarla se cierra. Se le da
       una altura generosa —el 18% de la pantalla, con mínimo y máximo— porque el
       objetivo es que cerrar sea FÁCIL: es la zona más grande de toque de todo el
       cajón, muy por encima de los 44px recomendados. */
    #search_filters_wrapper .pat-cajon-velo {
        flex: 0 0 auto;
        height: 18vh;
        min-height: 80px;
        max-height: 150px;
        width: 100%;
        padding: 0;
        border: 0;
        background: rgba(20, 14, 9, .38);
        cursor: pointer;
    }

    /* El panel blanco: lo que antes era todo el cajón. */
    #search_filters_wrapper .pat-cajon-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border-radius: 20px 20px 0 0;
        background: #fff;
        box-shadow: 0 -10px 30px rgba(20, 14, 9, .18);
        overflow: hidden;
    }

    /* Asidero: la pista visual de que esto se cierra hacia abajo. */
    #search_filters_wrapper .pat-cajon-panel::before {
        content: "";
        flex: 0 0 auto;
        width: 42px;
        height: 4px;
        margin: 8px auto 2px;
        border-radius: 99px;
        background: #d5c9ba;
    }

    /* Cabecera fija: título y cerrar. */
    #search_filters_wrapper .pat-cajon-cab {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid #ede7df;
    }

    #search_filters_wrapper .pat-cajon-titulo {
        color: #241d16;
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.01em;
    }

    #search_filters_wrapper .pat-cajon-cerrar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: -4px -8px -4px 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #241d16;
        cursor: pointer;
    }

    #search_filters_wrapper .pat-cajon-cerrar:hover,
    #search_filters_wrapper .pat-cajon-cerrar:focus-visible {
        background: #f4ede4;
    }

    /* El bloque de facetas trae su propio rótulo «Filtros» (.block_title). Dentro del
       cajón sobra: la cabecera de arriba ya lo dice, y verlo dos veces seguidas queda
       descuidado. Se oculta solo en móvil; en escritorio sigue encabezando la columna. */
    #search_filters_wrapper .block_title {
        display: none;
    }

    /* Las facetas: la única zona que se desplaza. */
    :is(#category, #manufacturer, #supplier, #search, #best-sales, #new-products, #prices-drop) #search_filters_wrapper #search_filters {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 4px 16px 16px;
        border: 0;
    }

    /* La barra de abajo, fija. Se reordena para que la acción principal quede a la
       derecha y «limpiar» a la izquierda, que es el orden esperado. */
    #search_filters_wrapper #search_filter_controls {
        flex: 0 0 auto;
        order: 99;
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 12px 16px;
        border-top: 1px solid #ede7df;
        background: #fff;
    }

    #search_filters_wrapper #search_filter_controls #_mobile_search_filters_clear_all {
        flex: 0 0 auto;
    }

    /* El botón «OK» es la acción principal del cajón: ancho, relleno y a la derecha.
       El JS le pone el número de productos («Ver 128 productos»). */
    #search_filters_wrapper #search_filter_controls .btn.ok {
        flex: 1 1 auto;
        min-height: 46px;
        border: 0;
        border-radius: 99px;
        background: #cc9966;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
    }

    #search_filters_wrapper #search_filter_controls .btn.ok .material-icons {
        display: none; /* sobra: el texto ya dice qué hace */
    }
}

/* ===========================================================================
   Orden: hoja desde abajo en vez de desplegable flotante
   ===========================================================================
   El menú de orden se abría SIEMPRE hacia arriba, tapando las tarjetas y el título
   de la sección, y se cortaba por arriba cuando el botón estaba alto en pantalla:
   medido 35px fuera de pantalla a 390x844 y 61px a 375x667.

   Anclado al borde inferior no se puede cortar, sea cual sea la posición del botón.
   Se conserva el mecanismo de Bootstrap (.open en el padre), así que no hace falta
   JS para abrirlo ni cerrarlo.
   =========================================================================== */
@media (max-width: 1199px) {
    :is(
        #category,
        #manufacturer,
        #supplier,
        #search,
        #best-sales,
        #new-products,
        #prices-drop,
        #supplier,
        #best-sales,
        #new-products,
        #prices-drop,
        #search
    ) .products-sort-order .dropdown-menu {
        position: fixed;
        z-index: 1052;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: 70vh;
        overflow-y: auto;
        margin: 0;
        padding: 6px 0 10px;
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 28px rgba(20, 14, 9, .18);
        transform: none;
    }

    :is(
        #category,
        #manufacturer,
        #supplier,
        #search,
        #best-sales,
        #new-products,
        #prices-drop,
        #supplier,
        #best-sales,
        #new-products,
        #prices-drop,
        #search
    ) .products-sort-order .dropdown-menu .select-list {
        display: block;
        padding: 13px 18px;
        font-size: 15px;
    }
}