/* TP3D Listado — aspecto de la tarjeta.

   Este archivo NO tiene @media: dónde se aplica lo decide el módulo con el atributo
   `media` del <link> (todas las pantallas o solo celular), según la configuración.
   Así el operador elige desde el back-office sin tocar CSS.

   Se aplica en las DOS grillas de producto que tiene la tienda:
     1) la del theme  → #js-product-list   (categoría, novedades, ofertas, más vendidos, marca)
     2) la del buscador → .ybc_search_page_content  (resultados, que arma su propia grilla)

   El objetivo es que la tarjeta se vea igual a la del carrusel: texto a la izquierda,
   nombre de dos renglones, foto del mismo tamaño y precios del mismo cuerpo. */

/* La columna flex es la TARJETA entera, no el bloque de la foto: el aviso de envío
   ("Llega hoy") lo agrega el módulo de envío flash como último hijo del <article>, o sea
   fuera de .thumbnail-container. Si ese bloque se lleva todo el alto, el aviso termina
   pegado al fondo, lejos del precio. Así el contenido se apila arriba y el sobrante va
   al fondo, donde no se ve. Es el mismo criterio que usa el carrusel. */
#js-product-list .product-miniature,
.ybc_search_page_content .product-miniature {
    /* El fondo blanco y las esquinas van en la tarjeta entera y no en el bloque de la
       foto: el aviso de envío ("Llega hoy") es hermano de ese bloque y quedaba afuera
       del recuadro blanco, flotando sobre el gris de la página. */
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;   /* el theme lo centra, y acá centraría en vertical */
    width: 100%;
    margin: 0;
    min-width: 0;                  /* el theme le pone min-width: 250px */
}

#js-product-list .product-miniature .product,
.ybc_search_page_content .product-miniature .product {
    display: block;
    width: 100%;
    margin: 0;
    min-width: 0;
}

#js-product-list .product-miniature .thumbnail-container,
.ybc_search_page_content .product-miniature .thumbnail-container {
    display: block;
    height: auto;                  /* si toma todo el alto, empuja el aviso de envío al fondo */
    margin-bottom: 0;              /* el theme deja 1.563rem de aire abajo */
    background: transparent;       /* el blanco lo pone la tarjeta */
    border-radius: 0;
}

/* ── 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.
   El tope de 320px es importante: en computadora una tarjeta puede medir 570px de ancho
   y, sin tope, el cuadrado daba una foto de 570px de alto (pantallazo enorme). Con el
   tope queda del tamaño del home y centrada en la tarjeta. */
#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;
    max-height: 320px;
    object-fit: contain;
    object-position: center center;
    margin-left: auto;
    margin-right: auto;
}

/* ── Texto a la izquierda, como en el carrusel ────────────────────────────────
   Con !important porque el theme centra el nombre, el precio y el bloque entero, y el
   módulo de carruseles centra además las líneas de cuotas y transferencia que inyecta. */
#js-product-list .product-miniature .product-description,
.ybc_search_page_content .product-miniature .product-description {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 10px 10px 8px;
    text-align: left !important;
}

#js-product-list .product-miniature .product-title,
.ybc_search_page_content .product-miniature .product-title {
    margin: 0 0 6px;
    text-align: left !important;
    text-transform: none !important;   /* el theme lo pone en Capitalize */
}

/* Nombre: dos renglones fijos. Si es largo se corta; si es corto, igual reserva el lugar,
   así todas las tarjetas de la fila quedan parejas. */
#js-product-list .product-miniature .product-title a,
.ybc_search_page_content .product-miniature .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 400 !important;
    text-align: left !important;
    color: #333 !important;
}

/* El bloque de precios, como lo deja el carrusel: pegado al nombre y sin relleno
   (en la home lo fuerza el script de la plantilla con margin: 4px 0 0 0) */
#js-product-list .product-miniature .product-price-and-shipping,
.ybc_search_page_content .product-miniature .product-price-and-shipping {
    display: block;
    margin: 4px 0 0 0;
    padding: 0;
    text-align: left !important;
}

/* ── Los precios, copiados del carrusel de la home ────────────────────────────
   Los valores salen de productcarousels/views/css/product-carousels.css, para que los
   números se vean exactamente igual en las dos vistas. Van con !important porque el
   theme le pone su propio cuerpo al precio del listado. */

/* .pc-price del carrusel de la HOME (módulo top), copiado tal cual:
     22px · Inter · 600 · #333
   Ojo: el carrusel estándar usa otros valores (20px, sin font-family, 700). El de la home
   es el top, y es el que hay que replicar: por eso el precio se veía de otra letra y más
   grueso cuando se copió del estándar. */
#js-product-list .product-miniature .price,
.ybc_search_page_content .product-miniature .price {
    display: block;
    font-family: 'Inter', -apple-system, 'Helvetica Neue', helvetica, roboto, arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #333 !important;
}

/* .pc-price-regular del carrusel de la home */
#js-product-list .product-miniature .regular-price,
.ybc_search_page_content .product-miniature .regular-price {
    display: block;
    font-size: 14px !important;
    color: #999 !important;
    text-decoration: line-through;
    margin-bottom: 2px;
}

/* Cuotas y transferencia: las inyecta el módulo de carruseles, que las centra */
#js-product-list .pc-listing-extra-prices,
.ybc_search_page_content .pc-listing-extra-prices {
    text-align: left !important;
}

/* .pc-installments */
#js-product-list .pc-listing-extra-prices .pc-installments,
.ybc_search_page_content .pc-listing-extra-prices .pc-installments {
    font-family: 'Proxima Nova', -apple-system, 'Helvetica Neue', helvetica, roboto, arial, sans-serif !important;
    display: block;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #00a650 !important;
    margin-top: 7px !important;
}

/* .pc-transfer-price */
#js-product-list .pc-listing-extra-prices .pc-transfer-price,
.ybc_search_page_content .pc-listing-extra-prices .pc-transfer-price {
    font-family: 'Proxima Nova', -apple-system, 'Helvetica Neue', helvetica, roboto, arial, sans-serif !important;
    display: block;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #0277bd !important;
    margin-top: 8px !important;
    margin-bottom: 7px !important;
}

/* El aviso de envío, pegado al precio y con el mismo margen que el texto */
#js-product-list .product-miniature .tp3dflashcba-card-hint,
.ybc_search_page_content .product-miniature .tp3dflashcba-card-hint {
    margin: 0 0 8px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: left;
}

/* 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;
}