/* ============================================================
   Miniclips (Tarea 6): la parrilla de tarjetas por producto. El renglón de
   pieza (`.pieza*`) ya lo estila `tienda/40-catalogo.css` — es el MISMO
   parcial que usa la ficha (`tablet/_pieza_renglon`), nada que repetir aquí.
   Solo la AGRUPACIÓN por producto es de esta tarea: una tarjeta de vidrio
   por producto, con su sobrelínea y su lista de renglones en columna.

   Archivo aparte (`45-`, entre `40-catalogo.css` y `50-analisis.css` en el
   orden alfabético que sirve Propshaft) y no dentro de `40-catalogo.css`
   porque esa hoja es de otra tarea (spec, "CSS: cómo se organiza": "un
   archivo por área").
   Fuente: docs/specs/2026-09-21-tienda-liquid-glass.md, "Miniclips".
   ============================================================ */

/* 2 columnas en horizontal (default); 1 en vertical y compacto, igual que
   pide la spec — a diferencia de `.parrilla` del catálogo, aquí no hay un
   corte intermedio: cada tarjeta ya trae su propia lista de renglones y una
   tercera columna la dejaría demasiado angosta para el renglón de pieza
   (`.pieza__marco` mide `--tap * 2` de ancho fijo). */
body.tablet .miniclips__parrilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hueco);
}
@media (orientation: portrait) {
  body.tablet .miniclips__parrilla { grid-template-columns: 1fr; }
}

/* La tarjeta: `.vidrio` (10-base.css) ya da fondo, borde, radio y relleno;
   aquí solo se acomoda su contenido en columna (sobrelínea + lista de
   piezas), igual que ya hace `.ficha__panel` en la ficha. */
body.tablet .miniclips__tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
body.tablet .miniclips__piezas { display: flex; flex-direction: column; gap: var(--space-2); }