/* CICEM - Ajustes de la LISTA DE PRODUCTOS (titulo de familia: todos los anchos; resto: celular/tablet hasta 900 px).
   Se carga DESPUES de style.css, asi que pisa solo lo que se indica aca.
   Para volver atras: borrar este archivo y la linea que lo carga en index.php. */
/* En resultados de busqueda / "todos los productos" se oculta el titulo de la familia (PC y celular) */
.family-header.fh-familia { display: none; }

@media (max-width: 900px) {

  /* La ficha pasa de 4 a 3 filas: foto+codigo+descripcion / [PDF] [PRECIO centrado] [Cotizar a la derecha] */
  .prod-table tbody tr {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
  }
  .prod-table tbody tr td.td-code { grid-column: 2 / 4; }
  .prod-table tbody tr td.td-name { grid-column: 2 / 4; }

  /* Precio: fila 3, columna del medio, centrado */
  .prod-table tbody tr td.td-price,
  .prod-table tbody tr td[style*="right"][style*="monospace"] {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    line-height: 1.2;
    padding: 6px 4px;
    border-bottom: none;
  }

  /* PDF: fila 3, columna izquierda */
  .prod-table tbody tr td:nth-last-child(2) {
    grid-column: 1;
    grid-row: 3;
    background: #F8FAFC;
    padding: 6px 8px;
  }

  /* Botones (Cotizar / carrito): fila 3, a la derecha, en la misma linea que el precio */
  .prod-table tbody tr td:last-child {
    grid-column: 3;
    grid-row: 3;
    background: #F8FAFC;
    padding: 6px 10px 6px 4px;
    gap: 6px;
  }
  .prod-table tbody tr td:last-child .td-btn,
  .prod-table tbody tr td:last-child .td-btn-cart { flex-shrink: 0; }
}