/**
 * catalog-view.css — Estilos del selector de vista del catálogo
 * (grande/mediano/chico/lista). Separado de main.css a propósito, para
 * no hacer crecer el CSS que cargan todas las páginas — este archivo
 * solo lo carga catalog.html.
 *
 * .catalog-grid pasó de CSS Grid a flexbox con justify-content:center
 * (sesión 2026-09-07). Motivo: con "Load more" la cantidad total de
 * tarjetas crece de a VIEW_MODE_PAGE_SIZE (ver catalog.js) — 5, 10, 15…
 * en la vista grande de 2 columnas, por ejemplo — así que la última
 * fila queda incompleta todo el tiempo, no solo la primera vez. Con
 * grid-template-columns:repeat(N,1fr) esa tarjeta suelta quedaba
 * pegada a la izquierda con el resto de la fila vacío. flex-wrap +
 * justify-content:center la centra sola, para cualquier cantidad de
 * tarjetas — no hace falta un caso especial por cada total posible.
 * El ancho de cada tarjeta se replica a mano con flex-basis (mismo
 * cálculo que daría 1fr con ese gap), uno por breakpoint.
 */

.view-toggle{ display:inline-flex; gap:0.3rem; background:var(--gray-lt); border-radius:999px; padding:0.3rem; }
.view-toggle-btn{
  width:32px; height:32px; border-radius:50%; border:none; background:none; color:var(--gray);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.view-toggle-btn:hover{ color:var(--ink); }
.view-toggle-btn.is-active{ background:var(--white); color:var(--catalog-accent, var(--blue)); box-shadow:0 1px 3px rgba(0,0,0,0.15); }

.catalog-grid{ display:flex; flex-wrap:wrap; justify-content:center; }

/* ---- Grande: 5 por lote, tarjetas grandes (2 columnas) ---- */
.catalog-grid--large{ gap:1.4rem; }
.catalog-grid--large .catalog-card{ flex:0 1 calc((100% - 1.4rem)/2); }
.catalog-grid--large .catalog-card-title{ font-size:1.1rem; }
.catalog-grid--large .catalog-card-image svg{ width:56px; height:56px; }

/* ---- Mediano: 8 por lote (el default de siempre, 3 columnas) ---- */
.catalog-grid--medium{ gap:1rem; }
.catalog-grid--medium .catalog-card{ flex:0 1 calc((100% - 2rem)/3); }

/* ---- Chico: 10 por lote, tarjetas mas compactas (4 columnas) ---- */
.catalog-grid--small{ gap:0.7rem; }
.catalog-grid--small .catalog-card{ flex:0 1 calc((100% - 2.1rem)/4); }
.catalog-grid--small .catalog-card-body{ padding:0.7rem 0.8rem; gap:0.35rem; }
.catalog-grid--small .catalog-card-title{ font-size:0.82rem; }
.catalog-grid--small .catalog-card-image svg{ width:26px; height:26px; }

/* Precio junto al logo/vendor (arriba), el botón queda solo abajo.
   Antes precio+botón compartían fila con justify-content:space-between
   — en una tarjeta de 4 columnas (angosta) el botón, al expandirse en
   :hover para mostrar "Add to cart", no tenía lugar: se corría, el
   mouse dejaba de estar arriba, el botón se cerraba, el mouse volvía a
   tocarlo, se abría de nuevo — parpadeo infinito. Con el precio movido
   arriba, el botón queda solo en su fila y puede ir SIEMPRE expandido
   (ver más abajo) sin competir por espacio con nada. */
.catalog-grid--small .catalog-card-meta-row{
  display:flex; align-items:center; justify-content:space-between; gap:0.5rem;
}
.catalog-grid--small .catalog-card-price-row{ justify-content:flex-end; }

/* Botón ya expandido desde el inicio (no arranca en ícono solo) — al
   no cambiar de ancho en hover, no hay nada que le corra el mouse de
   abajo. La animación de hover pasa a ser un levante + sombra en vez
   de un cambio de tamaño. */
.catalog-grid--small .catalog-card-add{
  grid-template-columns:34px minmax(0,1fr); width:100%;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background-color 0.3s ease;
}
.catalog-grid--small .catalog-card-add-label{ opacity:1; }
.catalog-grid--small .catalog-card-add:hover:not(.is-disabled):not(.is-added){
  grid-template-columns:34px minmax(0,1fr); transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(0,0,0,0.22);
}
.catalog-grid--small .catalog-card-add.is-disabled{ width:100%; justify-content:center; }

/* Selector de cantidad, versión compacta: en "small" la tarjeta es
   angosta (4 columnas), así que el stepper reduce su alto/padding
   respecto del tamaño por default en main.css — mismo criterio que el
   resto de esta vista (botón de agregar más chico, título más chico). */
.catalog-grid--small .catalog-card-qty{ padding:0.1rem; gap:0.25rem; }
.catalog-grid--small .catalog-card-qty-btn{ width:19px; height:19px; font-size:0.75rem; }
.catalog-grid--small .catalog-card-qty-value{ font-size:0.72rem; min-width:1.1em; }

@media (prefers-reduced-motion: reduce){
  .catalog-grid--small .catalog-card-add:hover:not(.is-disabled):not(.is-added){ transform:none; }
}

/* ---- Lista: 20 por lote, una fila por producto, imagen oculta que
   aparece al pasar el mouse (mismo markup que las otras vistas — el
   modo lista solo lo reacomoda con flexbox horizontal, sin tocar el
   HTML que arma catalog.js). justify-content/flex-wrap se resetean acá
   porque .catalog-grid (arriba) los define pensando en las vistas de
   grilla, no en una columna vertical de filas. ---- */
.catalog-grid--list{ display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; gap:0.5rem; }
.catalog-grid--list .catalog-card{
  flex:1 1 100%; flex-direction:row; align-items:center; border-top:none; border-left:4px solid transparent;
}
.catalog-grid--list .catalog-card .catalog-card-body .catalog-card-logo-wrap{align-self: center;}
.catalog-grid--list .catalog-card--grocery{ border-left-color:var(--cat-grocery); }
.catalog-grid--list .catalog-card--beverages{ border-left-color:var(--cat-beverages); }
.catalog-grid--list .catalog-card--frozen{ border-left-color:var(--cat-frozen); }
.catalog-grid--list .catalog-card--dairy{ border-left-color:var(--cat-dairy); }
.catalog-grid--list .catalog-card--bakery{ border-left-color:var(--cat-bakery); }
.catalog-grid--list .catalog-card--snacks{ border-left-color:var(--cat-snacks); }
.catalog-grid--list .catalog-card--spices{ border-left-color:var(--cat-spices); }
.catalog-grid--list .catalog-card--sweets{ border-left-color:var(--cat-sweets); }
.catalog-grid--list .catalog-card--meats{ border-left-color:var(--cat-meats); }
.catalog-grid--list .catalog-card--pinatas{ border-left-color:var(--cat-pinatas); }
.catalog-grid--list .catalog-card--cleaning{ border-left-color:var(--cat-cleaning); }
.catalog-grid--list .catalog-card--mixes{ border-left-color:var(--cat-mixes); }
.catalog-grid--list .catalog-card--rice{ border-left-color:var(--cat-rice); }
.catalog-grid--list .catalog-card--sauces{ border-left-color:var(--cat-sauces); }
.catalog-grid--list .catalog-card--noodles{ border-left-color:var(--cat-noodles); }
.catalog-grid--list .catalog-card--coffee{ border-left-color:var(--cat-coffee); }

.catalog-grid--list .catalog-card-image{
  width:0; flex-shrink:0; aspect-ratio:1/1; opacity:0; overflow:hidden;
  transition:width 0.25s ease, opacity 0.25s ease;
}
.catalog-grid--list .catalog-card:hover .catalog-card-image{ width:64px; opacity:1; }
.catalog-grid--list .catalog-card-body{
  display:flex; flex-direction:row; align-items:center; gap:1.2rem; padding:0.7rem 1.1rem; flex:1; min-width:0;
  /* El "glass" (solape sobre la imagen) es de las tarjetas de grilla —
     acá no hay imagen para solapar, así que se resetea todo eso.
     Antes el margin-top:-14px heredado de esa regla común corría el
     contenido para arriba DENTRO de la fila, descuadrando categoría/
     título/precio/botón entre sí — encontrado inspeccionando la
     tarjeta en vivo (el devtools mostraba margin:-14px 0px 0px en
     .catalog-card-body incluso en modo lista). */
  margin-top:0; border-radius:0; background:transparent; border-top:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
.catalog-grid--list .catalog-card-top{ flex-direction:column; align-items:flex-start; gap:0.15rem; width:110px; flex-shrink:0; }
.catalog-grid--list .catalog-card-title{ flex:1; min-width:0; font-size:0.85rem; }
/* Agrupa vendor+stock+precio (antes eran 3 hijos sueltos de
   catalog-card-body) — hace falta el contenedor real para poder
   ponerlos en una sola línea compacta en mobile (ver responsive.css).
   Acá en desktop replica el mismo layout que tenían sueltos. La
   cantidad (catalog-card-qty, ver qtyStepperHtml en catalog.js) se
   suma como un cuarto ítem de esta misma fila — no tiene fila propia
   en esta vista, a diferencia de large/medium/small. */
.catalog-grid--list .catalog-card-list-meta{ display:flex; align-items:center; gap:1.2rem; flex-shrink:0; }
.catalog-grid--list .catalog-card-vendor{ width:110px; flex-shrink:0; }
.catalog-grid--list .stock-badge{ flex-shrink:0; }
.catalog-grid--list .catalog-card-price-row{ margin-top:0; flex-shrink:0; }
.catalog-grid--list .catalog-card-qty{ flex-shrink:0; }

/* Tablet (621–900px), sesión 2026-09-28: la vista grande pasaba a 1
   columna y cada tarjeta ocupaba toda la pantalla (imagen enorme).
   Ahora grande = 2 columnas y mediana = 3, así cada vista sigue
   distinguiéndose de la otra; chica queda en 3 (tarjeta compacta). En
   celular (≤620px, abajo) la grande vuelve a 1 columna. */
@media (max-width:900px){
  .catalog-grid--large .catalog-card{ flex-basis:calc((100% - 1.4rem)/2); }
  .catalog-grid--medium .catalog-card{ flex-basis:calc((100% - 2rem)/3); }
  .catalog-grid--small .catalog-card{ flex-basis:calc((100% - 1.4rem)/3); }
}
@media (max-width:620px){
  .catalog-grid--large .catalog-card{ flex-basis:100%; }
  .catalog-grid--medium .catalog-card{ flex-basis:calc((100% - 1rem)/2); }
  .catalog-grid--small .catalog-card{ flex-basis:calc((100% - 0.7rem)/2); }
  .catalog-grid--list .catalog-card{ flex-wrap:wrap; }
  .catalog-grid--list .catalog-card-body{ flex-wrap:wrap; gap:0.4rem; }
  .catalog-grid--list .catalog-card-top, .catalog-grid--list .catalog-card-vendor{ width:auto; }
  /* En mobile "small" (2 columnas, tarjeta angosta pero ya no tan
     apretada como el desktop de 4 columnas) el stepper vuelve al
     tamaño default de main.css — no hace falta la versión compacta de
     arriba, que era específica del bug de 4 columnas en desktop. */
  .catalog-grid--small .catalog-card-qty{ padding:0.15rem; gap:0.4rem; }
  .catalog-grid--small .catalog-card-qty-btn{ width:22px; height:22px; font-size:0.85rem; }
  .catalog-grid--small .catalog-card-qty-value{ font-size:0.78rem; min-width:1.3em; }
}
@media (prefers-reduced-motion: reduce){
  .catalog-grid--list .catalog-card-image{ transition:none; }
}

/* ---- Lista en tablet y en pantallas táctiles (bug-1, sesión 2026-09-28) ----
   Entre 621 y 900px la vista lista seguía usando la animación de
   escritorio: al pasar el mouse el botón se expandía con "Agregar al
   carrito" y la imagen se asomaba (64px). En una pantalla táctil ese
   :hover queda "pegado" después del toque (el navegador lo simula con
   el primer tap y no lo suelta hasta tocar otra cosa) — el título del
   producto quedaba aplastado a una palabra por línea. Pedido de
   América: en móvil/tablet alcanza con que el botón se ponga verde con
   el check (estado .is-added de main.css, que no se toca). Así que acá:
   botón siempre en ícono solo, sin expandirse, y sin asomar la imagen.
   El mismo criterio aplica a cualquier pantalla táctil más ancha
   (ej. iPad horizontal, 1024px) vía (hover:none). Por debajo de 620px
   no aplica: esa vista tiene su propio diseño en responsive.css. */
@media (min-width:621px) and (max-width:900px), (min-width:621px) and (hover:none){
  .catalog-grid--list .catalog-card-add-label{ display:none; }
  .catalog-grid--list .catalog-card-add:hover:not(.is-disabled):not(.is-added){
    grid-template-columns:34px minmax(0,0fr); transform:none;
  }
  .catalog-grid--list .catalog-card:hover .catalog-card-image{ width:0; opacity:0; }
}
/* En cualquier pantalla táctil (todas las vistas de lista, incluido
   móvil): el hover pegado tampoco debe cambiar el "+" por el ícono del
   carrito — el ícono queda "+" hasta que se agrega (check verde). */
@media (hover:none){
  .catalog-grid--list .catalog-card-add:hover:not(.is-disabled):not(.is-added) .icon-plus{ display:block; }
  .catalog-grid--list .catalog-card-add:hover:not(.is-disabled):not(.is-added) .icon-cart{ display:none; }
}