/* TP3D Listado en celular
   Se aplica en las DOS grillas de producto que tiene la tienda, y solo hasta 767px:
     1) la del theme  → #js-product-list   (categoría, novedades, ofertas, más vendidos, marca)
     2) la del buscador → .ybc_search_page_content  (página de resultados, que arma su
        propia grilla por AJAX con otras clases)
   En computadora no cambia nada.

   Qué arregla, medido en la tienda (pantalla de 412px):
   - la tarjeta medía 146px, el 35% de la pantalla: el resto se lo comían los rellenos
     acumulados de los contenedores y un min-width: 250px del theme;
   - el nombre salía centrado y ocupaba hasta 5 renglones, así que una tarjeta terminaba
     más abajo que la de al lado;
   - la foto tomaba el alto natural de cada imagen, y eso desparejaba todo lo de abajo;
   - los precios en 16px hacían que "12 cuotas de $ ..." bajara de línea tres veces. */

@media (max-width: 767px) {

    /* ── Contenedores del buscador: sin relleno lateral ───────────────────── */
    .ybc_search_page_content .wrap_search,
    .ybc_search_page_content .content_tab,
    .ybc_search_page_content .wrap_content_product,
    .ybc_search_page_content .wrap_header_tap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Dos por fila, casi pegadas ───────────────────────────────────────── */
    #js-product-list .products,
    .ybc_search_page_content .products {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        margin-left: -3px !important;
        margin-right: -3px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #js-product-list .products > .js-product.product,
    .ybc_search_page_content .products > .js-product.product {
        width: 50%;
        max-width: 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        padding-left: 3px !important;
        padding-right: 3px !important;
        margin-bottom: 10px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    /* ── La tarjeta ocupa toda su columna y todas terminan a la misma altura ── */
    #js-product-list .product-miniature,
    #js-product-list .product-miniature .product,
    .ybc_search_page_content .product-miniature,
    .ybc_search_page_content .product-miniature .product {
        display: block;
        width: 100%;
        margin: 0;
        min-width: 0;          /* el theme le pone min-width: 250px y la empujaba fuera */
    }

    #js-product-list .product-miniature .thumbnail-container,
    .ybc_search_page_content .product-miniature .thumbnail-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 100%;
        margin-bottom: 0;      /* el theme deja 1.563rem de aire abajo */
        border-radius: 8px;
    }

    #js-product-list .product-miniature .product-description,
    .ybc_search_page_content .product-miniature .product-description {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 6px 7px 8px;
        text-align: left;
    }

    /* ── Foto: mismo cuadrado en todas las tarjetas ───────────────────────────
       El cuadrado va sobre la IMAGEN, no sobre el <a> que la envuelve: en la grilla del
       buscador la imagen no siempre es hija de ese <a>, y el cuadrado quedaba vacío
       arriba con la foto debajo (el doble de alto).
       Con `contain` la foto entra entera: no se recorta ni se deforma. */
    #js-product-list .product-miniature .thumbnail-top img,
    #js-product-list .product-miniature .product-thumbnail img,
    .ybc_search_page_content .product-miniature .thumbnail-top img,
    .ybc_search_page_content .product-miniature .product-thumbnail img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        object-position: center center;
    }

    /* ── Nombre: dos renglones fijos, alineado a la izquierda ─────────────── */
    #js-product-list .product-miniature .product-title,
    .ybc_search_page_content .product-miniature .product-title {
        margin: 0 0 4px;
        text-align: left;
    }

    #js-product-list .product-miniature .product-title a,
    .ybc_search_page_content .product-miniature .product-title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;         /* si el nombre es largo, se corta acá */
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: 2.5em;             /* y si es corto, igual reserva los dos renglones */
        font-size: 12.5px;
        line-height: 1.25;
        text-align: left;
        color: #333;
    }

    /* ── Precios más compactos ────────────────────────────────────────────── */
    #js-product-list .product-miniature .product-price-and-shipping,
    .ybc_search_page_content .product-miniature .product-price-and-shipping {
        text-align: left;
    }

    #js-product-list .product-miniature .price,
    .ybc_search_page_content .product-miniature .price {
        font-size: 15px;
        font-weight: 700;
        color: #232323;
    }

    #js-product-list .product-miniature .regular-price,
    .ybc_search_page_content .product-miniature .regular-price {
        font-size: 11px;
    }

    #js-product-list .pc-listing-extra-prices .pc-installments,
    #js-product-list .pc-listing-extra-prices .pc-transfer-price,
    .ybc_search_page_content .pc-listing-extra-prices .pc-installments,
    .ybc_search_page_content .pc-listing-extra-prices .pc-transfer-price {
        font-size: 11px;
        line-height: 1.2;
        margin-top: 3px;
        text-align: left;   /* el módulo de carruseles las centra */
    }

    /* ── Las píldoras arrancan donde arranca el texto ─────────────────────── */
    #js-product-list .tp3d-pildoras-en-tarjeta,
    .ybc_search_page_content .tp3d-pildoras-en-tarjeta {
        padding-left: 0;
        padding-right: 0;
    }
}