/* =============================================================
   BARÚ · Grid de productos — CSS RESPONSIVE
   Snippet independiente · WP Coder
   Puntos de ruptura:
     - Desktop  : > 1024px   → 3 columnas (comportamiento actual)
     - Tablet   : 601–1024px → 2 columnas
     - Móvil    : ≤ 600px    → 2 columnas  ← cambiar a 1 aquí si se decide
   ============================================================= */


/* ───────────────────────────────────────────────
   TABLET  (601 – 1024 px)
   ─────────────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Grid: 2 columnas */
  .baru-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
		padding: 0 30px !important;
		box-sizing: border-box;
  }

  /* Títulos de categoría y subcategoría abarcan las 2 columnas */
  .baru-category-title,
  .baru-subcategory-title {
    grid-column: 1 / -1 !important;
  }

  /* Tarjeta */
  .baru-product-wrapper {
    max-width: 100% !important;
    min-height: auto !important;      /* deja que crezca según contenido */
  }

  /* Imagen: altura fija proporcional */
  .baru-product-image-container {
    height: 200px !important;
  }

  /* Contenido: sin altura fija en tablet, fluye */
  .baru-product-content {
    height: auto !important;
    padding: 12px !important;
  }

  /* Título */
  .baru-product-title {
    font-size: 15px !important;
    min-height: 29px !important;
    margin-top: 12px !important;
    margin-bottom: 6px !important;
  }

  /* Precio */
  .baru-product-price {
    font-size: 15px !important;
    margin: 6px 0 !important;
  }

  /* Botón añadir */
  .baru-product-add-to-cart {
    font-size: 13px !important;
    padding: 8px 10px !important;
    margin-top: 6px !important;
  }

  /* Botones picoteo/para comer */
  .baru-variation-button {
    font-size: 12px !important;
    padding: 6px 4px !important;
  }

  /* Selector de comensales */
  .baru-product-variation-selector {
    font-size: 13px !important;
    padding: 6px !important;
  }

  /* Selector de cantidad */
  .baru-quantity-selector {
    width: 96px !important;
    height: 32px !important;
  }
  .baru-quantity-button {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  input.baru-quantity-input {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  /* Botón ¿Qué contiene? */
  .baru-que-contiene-btn {
    font-size: 12px !important;
    padding: 5px 11px !important;
  }

  /* Títulos de sección */
  .baru-category-title {
    font-size: 20px !important;
    margin: 28px 0 14px 0 !important;
  }
  .baru-subcategory-title {
    font-size: 16px !important;
    margin: 18px 0 10px 0 !important;
  }
}


/* ───────────────────────────────────────────────
   MÓVIL  (≤ 600 px)
   ─────────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── CAMBIO RÁPIDO DE COLUMNAS ──────────────────
     Ahora: 2 columnas en móvil.
     Para pasar a 1 columna, cambia el valor de abajo
     de  repeat(2, 1fr)  a  1fr
     y quita el comentario de la línea marcada.
     ────────────────────────────────────────────── */
  .baru-products-grid {
    grid-template-columns: repeat(2, 1fr) !important;   /* ← 2 col. móvil */
    /* grid-template-columns: 1fr !important; */         /* ← 1 col. móvil */
    gap: 10px !important;
   	padding: 0 15px !important;
		box-sizing: border-box;
  }

  .baru-category-title,
  .baru-subcategory-title {
    grid-column: 1 / -1 !important;
  }

  /* Tarjeta más compacta */
  .baru-product-wrapper {
    max-width: 100% !important;
    min-height: auto !important;
    border-radius: 6px !important;
  }

  /* Imagen más baja para que quepan 2 tarjetas */
  .baru-product-image-container {
    height: 130px !important;         /* reducir si la pantalla es pequeña */
  }

  /* Contenido */
  .baru-product-content {
    height: auto !important;
    padding: 8px 8px 12px !important;
    gap: 4px !important;
  }

  /* Título */
  .baru-product-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    min-height: 29px !important;
    margin-top: 8px !important;
    margin-bottom: 2px !important;
  }

  /* Precio */
  .baru-product-price {
    font-size: 13px !important;
    margin: 4px 0 !important;
  }

  /* Botón añadir */
  .baru-product-add-to-cart {
    font-size: 11px !important;
    padding: 7px 6px !important;
    border-radius: 4px !important;
    margin-top: 4px !important;
    line-height: 1.2 !important;
  }

  /* Botones picoteo/para comer — versión compacta */
  .baru-variation-buttons {
    width: 100% !important;
    max-width: 170px !important;
  }
  .baru-variation-button {
    font-size: 10px !important;
    padding: 5px 2px !important;
  }

  /* Selector de comensales */
  .baru-product-variation-selector {
    font-size: 12px !important;
    padding: 5px 4px !important;
    width: 100% !important;
  }

  /* Selector de cantidad */
  .baru-quantity-selector {
    width: 84px !important;
    height: 28px !important;
    margin-top: 6px !important;
  }
  .baru-quantity-button {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
  input.baru-quantity-input {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
  }

  /* Botón ¿Qué contiene? */
  .baru-que-contiene-btn {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }

  /* Texto auxiliar (por persona, canapes…) */
  .baru-canapes-display,
  .baru-unidades-por-persona,
  .baru-unidades-count {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  /* Título de sección */
  .baru-category-title {
    font-size: 17px !important;
    margin: 20px 0 10px 0 !important;
  }
  .baru-subcategory-title {
    font-size: 14px !important;
    margin: 14px 0 8px 0 !important;
  }

  /* Label "Número comensales" */
  .titulo_invitados {
    font-size: 10px !important;
  }
}


/* ───────────────────────────────────────────────
   MÓVIL MUY PEQUEÑO  (≤ 360 px)
   Ajustes finos para iPhone SE, etc.
   ─────────────────────────────────────────────── */
@media (max-width: 360px) {

  .baru-products-grid {
    gap: 6px !important;
  }

  .baru-product-image-container {
    height: 110px !important;
  }

  .baru-product-title {
    font-size: 11px !important;
  }

  .baru-product-price {
    font-size: 12px !important;
  }

  .baru-product-add-to-cart {
    font-size: 10px !important;
    padding: 6px 4px !important;
  }

  .baru-variation-button {
    font-size: 9px !important;
  }
}