/* ==========================================================================
   catalogo-mobile.css
   Ajustes responsive para catalogo (index, listado-productos) y ficha de
   producto (detalle-producto). Se enlaza SOLO en esas paginas via el flag
   $cssCatalogoMobile antes del require de main_head.php, para no afectar al
   resto del sitio.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Grilla de productos
   Producto::listado() ya no corta filas cada N productos: emite todas las
   cards como hermanas dentro de #prods_container con clases
   col-xs-6 col-sm-4 col-md-*. Como quedan todas en el mismo .row y las
   alturas no son identicas (nombre en 2 lineas, precio tachado del
   revendedor, cartel de promo), los float de Bootstrap 3 se traban y dejan
   escalones. Con flex-wrap el corte de linea lo hace el navegador y cada
   fila queda pareja.
   -------------------------------------------------------------------------- */
#prods_container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* El clearfix de .row (:before/:after con display:table) se volveria un item
   flex mas y agregaria una linea vacia. Con flex ya no hace falta. */
#prods_container:before,
#prods_container:after {
    display: none;
}

/* El stepper de cantidad (.qty-stepper / .qty-btn / .qty-input) vive ahora en
   mobile-sitewide.css: lo usan las cards del catalogo, la ficha de producto y
   tambien el carrito, asi que dejo de ser algo del catalogo.
   Aca queda solo el contenedor de la card, que si es propio del catalogo. */

.product-links {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
}

/* --------------------------------------------------------------------------
   Tablet (768-991px)
   En listado-productos.php la sidebar se lleva un tercio del ancho, asi que
   col-sm-4 deja cards de ~167px con una imagen de 255px de alto: quedan
   desproporcionadas. Solo en las paginas con sidebar se pasa a 2 por fila.
   index.php no tiene sidebar y ahi col-sm-4 da cards de ~250px, que estan
   bien, por eso la regla se ancla a .content-with-sidebar.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .content-with-sidebar #prods_container > [class*="col-"] {
        width: 50%;
    }
}

/* --------------------------------------------------------------------------
   Pantallas chicas (2 columnas)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* La imagen esta fijada en 255px por .size-wrapper-prod (custom_alert.css).
       En una card de ~170px de ancho eso es despropocionado y empuja el precio
       y el boton AGREGAR fuera de la pantalla. */
    #prods_container .size-wrapper-prod {
        min-height: 150px;
        max-height: 150px;
    }

    /* El nombre trae min-height/max-height:35px inline desde el PHP. A 2
       columnas casi todos los nombres entran en 2 lineas y se desbordan.
       Se necesita !important porque el valor original es un style inline. */
    #prods_container .product-name {
        min-height: 38px !important;
        max-height: 38px !important;
        font-size: 14px;
        line-height: 1.35;
        /* Corta en 2 lineas con puntos suspensivos en vez de cortar a mitad
           de palabra. -webkit-box lo entienden todos los browsers actuales. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #prods_container .product-category {
        font-size: 11px;
        margin-bottom: 6px;
    }

    #prods_container .product-price {
        font-size: 19px;
    }

    /* Menos aire lateral entre cards para no perder ancho util. */
    #prods_container .shop-product .shop-product-info {
        padding: 12px 0 8px;
        margin: 0 2px 8px;
    }

    /* En una card de ~180px los tres controles del stepper entran justos en una
       fila con 44px de area tactil, asi que el stepper se lleva el ancho completo
       y AGREGAR cae abajo, tambien a lo ancho: es el control mas facil de errar
       con el dedo si queda angosto.
       Va acotado a .product-links: en el carrito el stepper comparte renglon con
       el subtotal y no tiene que estirarse. */
    .product-links .qty-stepper {
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

    /* AGREGAR es .btn-xs, que en mobile queda en 28px de alto: por debajo del
       minimo tactil. Se lleva el ancho completo de la card y sube a 44px. */
    #prods_container .product-links .btn,
    .carousel-box .product-links .btn {
        -webkit-flex: 1 0 100%;
        flex: 1 0 100%;
        min-height: 44px;
        line-height: 30px;
        font-size: 13px;
    }

    /* Los carteles de ¡Nuevo! y de promo estan calibrados para la card de
       desktop; a 2 columnas ocupan casi toda la imagen. */
    #prods_container .overlay-wrapper p {
        font-size: 11px;
    }

    /* Iconos de sin TACC / vegano: vienen con width/height inline de 55 y
       70px, medidos contra la imagen de 255px. Con la imagen en 150px hay
       que achicarlos en la misma proporcion. */
    #prods_container .overlay-wrapper img[alt="sin_tacc"],
    #prods_container .overlay-wrapper img[alt="vegano"] {
        width: 38px !important;
        height: 38px !important;
    }

    /* El bloque de esos iconos esta empujado con margin-top:190px inline,
       calibrado contra la imagen de 255px. Al bajar la imagen a 150px los
       iconos caerian debajo de la foto, encima del nombre del producto. */
    #prods_container .prod-badges-bottom {
        margin-top: 100px !important;
    }
}

/* El espaciado entre secciones se ajusta una sola vez para todo el sitio, en
   mobile-sitewide.css. Antes estaba aca acotado a .content-with-sidebar y otra
   vez en home-mobile.css acotado a .main-wrapper: el mismo arreglo dos veces. */

/* --------------------------------------------------------------------------
   Fase 3 - htmx + Alpine
   -------------------------------------------------------------------------- */

/* Indicador de carga de htmx. htmx le pone la clase htmx-request al elemento
   apuntado por hx-indicator mientras el pedido esta en vuelo. */
.htmx-indicator {
    display: none;
    margin-left: 12px;
    color: #339933;
    font-size: 13px;
}

.htmx-request.htmx-indicator,
.htmx-request .htmx-indicator {
    display: inline-block;
}

/* Mientras se esta actualizando, el listado queda apagado para que se note que
   algo esta pasando sin que salte el layout. */
#catalogo.htmx-request #prods_container {
    opacity: 0.45;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none;
}

/* El filtro de categorias por boton es solo para pantallas chicas: de 768px
   para arriba ya esta la sidebar con la misma lista. */
#filtro-mobile {
    display: none;
}

@media (max-width: 767px) {

    /* ----------------------------------------------------------------------
       Barra de filtros: "Filtrar" y "Ordenar por" comparten renglon
       Antes iban uno abajo del otro y entre los dos se llevaban 118px. En una
       fila son ~52px: 66px mas de producto en pantalla.
       .shop-filters es el contenedor de referencia del panel de categorias,
       que se despliega en absoluto por debajo, a todo el ancho de la barra.
       ---------------------------------------------------------------------- */
    .shop-filters {
        position: relative;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 4px;
    }

    .shop-filters > form {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: stretch;
        align-items: stretch;
    }

    .shop-filters #orderSelection {
        width: 100%;
        height: 44px;
        font-size: 14px;
        padding-left: 8px;
        padding-right: 24px;
    }

    /* El label de resultados va vacio y el indicador de carga se muestra
       flotando sobre la barra, para que ninguno de los dos empuje el layout. */
    .shop-filters #results {
        display: none;
    }

    .shop-filters #catalogo-cargando {
        position: absolute;
        top: 100%;
        left: 0;
        margin: 4px 0 0;
    }

    #filtro-mobile {
        display: block;
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
        min-width: 0;
        margin-bottom: 0;
        /* static a proposito: el panel de categorias se ancla a .shop-filters,
           que es la barra entera, y no a esta mitad. */
        position: static;
    }

    /* Neutro y no verde: el verde del sitio es el color de comprar y lo usan
       todos los botones AGREGAR. Un filtro del mismo color compite con la
       accion que uno quiere que hagan. */
    #filtro-mobile > button.btn-filtro {
        width: 100%;
        height: 44px;
        padding: 0 8px;
        font-size: 14px;
        color: #555566;
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #filtro-mobile > button.btn-filtro:hover,
    #filtro-mobile > button.btn-filtro:focus {
        background: #f8f8f8;
        color: #32313b;
        outline: none;
    }

    #filtro-mobile .fa-filter {
        margin-right: 8px;
        color: #339933;
    }

    /* El panel cuelga de la barra como un desplegable, asi no empuja la grilla
       hacia abajo al abrirse.
       Cerrado es el estado por defecto del CSS y lo abre la clase .abierto que
       pone Alpine: ver el comentario en listado-productos.php sobre por que no
       se usa x-show. */
    #filtro-mobile-lista {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 60;
        margin-top: 4px;
        background: #ffffff;
        border: 1px solid #ececec;
        border-radius: 4px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
        max-height: 60vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #filtro-mobile-lista.abierto {
        display: block;
    }

    /* Los items de categoria son links: necesitan area tactil propia.
       El <a> y el contador van en la misma fila con flex. Con el float que usa
       .shop-product-categories por defecto el contador caia una linea abajo,
       porque el <a> pasa a display:block para agrandar el area tactil. */
    #filtro-mobile-lista .shop-product-categories li {
        padding: 0;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }

    #filtro-mobile-lista .shop-product-categories li a {
        -webkit-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 14px 12px;
        min-height: 46px;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
    }

    #filtro-mobile-lista .shop-product-categories li .count {
        float: none;
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
        padding: 0 12px;
        white-space: nowrap;
    }
}

/* --------------------------------------------------------------------------
   Area tactil del selector de cantidad (ficha de producto)
   .qselect en avendor.css mide 30px de ancho: queda por debajo del minimo
   recomendado de 44px para touch. Se agranda solo en pantallas chicas.
   No se toca updateCant().
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .inputQty .qselect {
        width: 48px;
        min-height: 48px;
        font-size: 22px;
        line-height: 2.1;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .inputQty .input-quantity {
        height: 48px;
        font-size: 20px;
    }
}

/* ==========================================================================
   Ficha de producto (Fase 5)
   --------------------------------------------------------------------------
   El problema medido a 390px: el precio caia en 792px y el boton AGREGAR en
   1014, o sea abajo del pliegue. El usuario veia foto y titulo, y para saber
   cuanto costaba tenia que scrollear. En la pagina cuyo unico trabajo es
   vender ese producto.

   Se ataca en tres frentes: el banner de categoria, el alto de la imagen y el
   aire del bloque de precio.
   ========================================================================== */

/* El breadcrumb es solo mobile: en desktop manda el banner de categoria. */
.ficha-breadcrumb {
    display: none;
}

@media (max-width: 991px) {

    /* 1. El banner de categoria: 90px de foto para decir algo que ya esta
       repetido abajo en "Categorias:". Lo reemplaza el breadcrumb. */
    .ficha-header {
        display: none !important;
    }

    .ficha-breadcrumb {
        display: block;
        padding: 8px 15px;
        border-bottom: 1px solid #eee;
        background: #fafafa;
        font-size: 14px;
    }

    .ficha-breadcrumb a {
        display: inline-block;
        /* padding vertical para el dedo: el texto solo da 19px de alto */
        padding: 6px 4px 6px 0;
        color: #00944f;
        font-weight: 600;
        text-decoration: none;
    }

    .ficha-breadcrumb .fa {
        margin-right: 4px;
    }

    /* 2. La imagen. Era el bloque mas grande de la pagina con 341px.
       max-height sobre la imagen y no sobre el contenedor: asi la foto se
       achica entera en vez de recortarse. width:auto la deja proporcional y
       el margin la centra, ahora que ya no la estira el 100% que le ponia
       #full-sync .item img en avendor.css. */
    .ficha-imagen img {
        display: block;
        max-height: 240px;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: 0 auto;
    }

    /* El white-space de abajo de la imagen sumaba 18px entre la foto y el
       titulo, que es justo donde menos sobra lugar. */
    .col-sm-6 > .ficha-imagen + .white-space {
        padding: 4px 0;
    }

    /* 3. El bloque de precio. Los <p> traen margin-top:40px y line-height:0px
       inline desde el PHP (son tres parrafos cuando hay bonificacion: el
       tachado, el % OFF y el precio final), asi que hace falta !important
       para pisarlos. Entre el precio y el boton habia 222px de aire. */
    .product-info .product-price {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }

    .product-info .fancy-title {
        margin-bottom: 6px;
    }

    /* El separador de antes del stepper. */
    .product-info .white-space.space-xsmall {
        padding: 6px 0;
    }

    /* Sin esto el titulo del producto se lleva 142px en tres renglones. */
    .product-info .fancy-title span {
        font-size: 22px;
        line-height: 1.2;
    }

    .ficha-propiedades {
        font-size: 15px;
    }
}