/* ============================================================
   compacto-movil.css · MÁS PRODUCTOS POR PANTALLA EN EL TELÉFONO
   ------------------------------------------------------------
   Se carga al final de todo. Solo actúa hasta 768 px.

   Antes, en un teléfono la primera tarjeta medía 519 px de una
   pantalla de 812: se veía un producto y medio, y para llegar a
   la sexta hamburguesa había que pasar cuatro pantallas. Mercado
   Libre muestra cuatro productos por pantalla; pero Mercado Libre
   tiene millones de productos y nosotros seis hamburguesas, y acá
   la foto es lo que vende.

   La solución es la de las marcas premium con carta corta (Shake
   Shack, la app de McDonald's): la destacada a todo el ancho y
   las demás en una grilla de dos columnas, con la foto cuadrada,
   el nombre, dos líneas y el precio. Las fichas de ingredientes
   se quedan en la destacada y en el detalle; en una tarjeta de
   165 px no caben y solo estiran.

   Resultado: de 1,5 a ~3,5 productos por pantalla, y las seis
   hamburguesas en pantalla y media en vez de cuatro.
   ============================================================ */

@media (max-width: 768px) {

  /* ---------- La grilla ---------- */
  .product-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    max-width: none !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .product-card.featured { grid-column: 1 / -1 !important; }

  /* ---------- La destacada: foto ancha, cuerpo apretado ---------- */
  .product-card.featured .card-img-wrap { aspect-ratio: 16 / 9 !important; }
  .product-card.featured .card-body { padding: 12px 14px 14px !important; gap: 6px !important; }
  .product-card.featured .card-name { font-size: 27px !important; }
  .product-card.featured .card-desc { font-size: 13px !important; line-height: 1.45 !important; }
  /* Una sola fila de fichas: lo que no cabe, está en el detalle. */
  .product-card.featured .card-chips { max-height: 30px; overflow: hidden; }
  .product-card.featured .card-footer { padding-top: 10px !important; }
  .product-card.featured .card-price { font-size: 27px !important; }
  .product-card.featured .card-cta { min-height: 38px; padding: 8px 14px !important; }

  /* ---------- Las demás: cuadradas y al grano ---------- */
  .product-card:not(.featured) .card-img-wrap {
    aspect-ratio: 1 / 1 !important;
    border-radius: 16px 16px 0 0 !important;
  }
  .product-card:not(.featured) .card-body { padding: 10px 11px 12px !important; gap: 4px !important; }
  .product-card:not(.featured) .card-name {
    font-size: 19px !important;
    letter-spacing: .3px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-card:not(.featured) .card-desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .product-card:not(.featured) .card-chips { display: none !important; }
  .product-card:not(.featured) .card-footer { padding-top: 8px !important; gap: 8px; }
  .product-card:not(.featured) .card-price { font-size: 20px !important; }
  /* El botón amarillo queda como una flecha redonda: la tarjeta
     entera ya es el botón, y "VER DETALLE" no cabe al lado del precio. */
  .product-card:not(.featured) .card-cta {
    width: 34px;
    height: 34px;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    gap: 0 !important;
    justify-content: center;
  }
  .product-card:not(.featured) .card-cta svg { width: 16px !important; height: 16px !important; }
  .product-card:not(.featured) .badge { font-size: 10px !important; padding: 3px 8px !important; top: 8px !important; right: 8px !important; }

  /* ---------- Papas y bebidas, un poco más apretadas ---------- */
  .fries-card { padding: 12px !important; }
  .fries-img-wrap { width: 84px !important; height: 84px !important; }
  .drink-card { min-height: 0 !important; padding: 12px 10px !important; }
  .drink-img-wrap { width: 62px !important; height: 82px !important; }

  /* ---------- El título de sección, sin tanto aire ---------- */
  .section-header { padding: 18px 16px 12px !important; }
  /* "Doble smash · Cheddar fundido · Pan artesanal" bajo el título:
     en el teléfono es texto de más. El título basta; lo que hay que
     saber de cada burger está en su tarjeta. */
  .section-sub { display: none !important; }
}