/* Tienda — renovación visual 2026
 * Capa final de presentación. Conserva la personalización del comercio y
 * normaliza navegación, catálogo, carrito y checkout.
 */
body.bz-app--store {
  --store-content-max: 1440px;
  --store-header-height: 68px;
  --store-card-radius: clamp(14px, 2vw, 20px);
  --store-grid-gap: clamp(12px, 1.6vw, 22px);
  padding-bottom: 0;
}

body.bz-app--store header.app-header {
  min-height: var(--store-header-height);
  padding: 10px clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 1px 12px rgb(16 21 31 / 0.06);
  backdrop-filter: blur(14px);
}

body.bz-app--store header.app-header:not(.header-solido) {
  background: color-mix(in srgb, var(--surface) 91%, transparent);
  border-bottom-color: var(--border-soft);
}

/* La plantilla Mercado definía texto blanco para su antigua cabecera de
   color. La cabecera renovada usa una superficie clara, por lo que sus
   controles deben seguir el color de texto del tema. */
body.bz-app--store.plantilla-mercado .app-header .nombre-header-mercado,
body.bz-app--store.plantilla-mercado .app-header .btn-abrir-categorias,
body.bz-app--store.plantilla-mercado .app-header #btnMenuTienda {
  color: var(--text);
}

body.bz-app--store .menu-cuenta-wrap {
  margin-left: auto;
}

body.bz-app--store header.app-header .icono-solo {
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
}

body.bz-app--store .tienda-header-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body.bz-app--store .tienda-inline-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

body.bz-app--store .sin-foto .tienda-inline-icon {
  width: 1em;
  height: 1em;
}

body.bz-app--store .tienda-mensaje-icono,
body.bz-app--store .tienda-boton-icono {
  align-items: center;
  gap: 8px;
}

body.bz-app--store .tienda-mensaje-icono:not([hidden]),
body.bz-app--store .tienda-boton-icono:not([hidden]) {
  display: flex;
}

body.bz-app--store #btnMenuTienda {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.bz-app--store .tienda-perfil {
  margin-bottom: clamp(12px, 2vw, 24px);
  border-radius: 0 0 var(--store-card-radius) var(--store-card-radius);
}

body.bz-app--store .tienda-banner {
  width: 100%;
  min-height: 180px;
  /* Antes 5/1 (muy bajo) recortaba bastante del banner que cada comercio
     sube con object-fit:cover (confirmado con captura real: el texto de
     abajo del banner quedaba cortado). 7/2 = 3.5/1, la misma proporción
     que ya usa la vista previa de personalizacion.js (#pBannerVistaPrevia,
     "Así se recorta en tu tienda") — antes NO coincidían (5/1 vs 3.5/1),
     por eso la previa mostraba el banner completo y la tienda real lo
     recortaba más. El max-height: 340px que tenía antes volvía a romper
     esa igualdad en pantallas anchas (desde ~1190px de ancho le ganaba a
     la proporción) — se saca, total `main` ya tiene su propio
     max-width:1440px que acota cuánto puede crecer el banner. */
  aspect-ratio: 7 / 2;
}

body.bz-app--store .tienda-banner img,
body.bz-app--store .tienda-banner-slide {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .tienda-red-social (Instagram/Facebook/WhatsApp del comercio, debajo del
   nombre en el perfil) no tenía NINGÚN estilo propio: el <svg> sin tamaño
   explícito y sin color definido terminaba invisible sobre banners de
   cualquier color, solo se intuía al pasar el mouse. Círculo oscuro fijo +
   ícono blanco: se lee igual sin importar qué color tenga el banner de
   atrás, contrario al turquesa/violeta del logo de Benzax. */
body.bz-app--store .tienda-redes {
  display: flex;
  gap: 10px;
}

body.bz-app--store .tienda-red-social {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(17, 18, 20, 0.6);
  color: #fff;
}

body.bz-app--store .tienda-red-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body.bz-app--store .tienda-red-social:hover {
  background: rgba(17, 18, 20, 0.8);
}

body.bz-app--store .tienda-perfil-body,
body.bz-app--store .tienda-descripcion {
  width: min(100% - 32px, var(--store-content-max));
  margin-inline: auto;
}

body.bz-app--store main {
  width: min(100%, var(--store-content-max));
  margin-inline: auto;
  padding-inline: clamp(14px, 3vw, 32px);
}

/* A .layout le faltaba display:grid — grid-template-columns/gap no hacían
   nada sin esto, así que el buscador/grilla/carrito se apilaban como
   bloques comunes en vez del catálogo + carrito lado a lado que se
   buscaba: la grilla de productos quedaba angosta sin que nada visible
   ocupara el resto del ancho (confirmado con captura real). El carrito
   va explícito en la 2da columna; el resto (buscador, overlays, chips,
   grilla, mensajes) ocupa las dos columnas para no quedar partido. */
body.bz-app--store .layout:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: var(--store-grid-gap);
  align-items: start;
}

body.bz-app--store .layout:not([hidden]) > *:not(#carrito) {
  grid-column: 1 / -1;
}

body.bz-app--store .layout:not([hidden]) > #carrito {
  grid-column: 2;
  grid-row: 1 / -1;
}

body.bz-app--store .buscador-productos {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.bz-app--store .buscador-productos input {
  min-width: 0;
  min-height: 48px;
  border-radius: var(--bz-radius-pill);
  padding-inline: 18px;
  background: var(--surface);
  box-shadow: var(--bz-shadow-sm);
}

body.bz-app--store .btn-abrir-categorias {
  min-height: 48px;
  border-radius: var(--bz-radius-pill);
  white-space: nowrap;
}

body.bz-app--store .chips-filtro {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-block: 2px 6px;
  scrollbar-width: thin;
}

body.bz-app--store .chips-filtro .chip,
body.bz-app--store .chips-filtro select {
  min-height: 42px;
  border-radius: var(--bz-radius-pill);
  white-space: nowrap;
}

body.bz-app--store .grilla-productos:not([hidden]) {
  display: grid;
  /* auto-fill en vez de un repeat(4) fijo: las tarjetas vuelven a ser más
     chicas (como antes del rediseño) y se acomodan solas de a más por fila
     según el ancho real disponible, en vez de quedar 4 enormes con espacio
     vacío a los costados en pantallas anchas (confirmado con captura real). */
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--store-grid-gap);
  align-items: stretch;
}

body.bz-app--store .tienda-cargar-mas:not([hidden]) {
  display: block;
  min-height: 46px;
  margin: 22px auto 8px;
  padding-inline: 22px;
  border-radius: var(--bz-radius-pill);
  background: var(--surface);
  color: var(--text);
}

body.bz-app--store .card-producto {
  display: flex;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--store-card-radius);
  background: var(--surface);
  box-shadow: var(--bz-shadow-sm);
}

body.bz-app--store .card-producto:hover {
  border-color: color-mix(in srgb, var(--primary) 32%, var(--border));
  box-shadow: var(--bz-shadow-md);
  transform: translateY(-2px);
}

body.bz-app--store .card-producto-imagen {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 0;
  overflow: hidden;
  /* Antes un gris (color-mix con --surface-2) notoriamente distinto al
     blanco real de la mayoría de las fotos de producto, se veía como un
     marco alrededor de cada imagen (confirmado con captura real). Mismo
     fondo que el resto de la tarjeta. */
  background: var(--surface);
}

body.bz-app--store .card-producto-imagen img {
  width: 100%;
  height: 100%;
  padding: clamp(10px, 1.5vw, 18px);
  object-fit: contain;
  object-position: center;
}

body.bz-app--store .card-producto-body {
  display: flex;
  min-height: 148px;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

body.bz-app--store .card-producto-nombre {
  display: -webkit-box;
  min-height: 2.6em;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body.bz-app--store .card-producto-precios {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 8px;
  margin-top: auto;
}

body.bz-app--store .card-producto-precio {
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 750;
  letter-spacing: -0.02em;
}

body.bz-app--store .card-producto-precio-original {
  color: var(--text-muted);
  font-size: 0.8rem;
}

body.bz-app--store .card-producto-descuento,
body.bz-app--store .card-producto-promo {
  border-radius: var(--bz-radius-pill);
  font-size: 0.72rem;
  font-weight: 750;
}

body.bz-app--store .card-producto-agregar {
  display: none;
}

body.bz-app--store .card-producto-agregar-inferior {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  border-radius: var(--bz-radius-sm);
  font-weight: 700;
}

body.bz-app--store #carrito {
  border-radius: var(--store-card-radius);
  box-shadow: var(--bz-shadow-md);
}

body.bz-app--store .item-carrito {
  min-height: 52px;
}

body.bz-app--store .barra-carrito-movil {
  display: none;
}

body.bz-app--store .bot-fab {
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  box-shadow: var(--bz-shadow-md);
}

body.bz-app--store .menu-desplegable,
body.bz-app--store .bot-panel {
  border-radius: var(--bz-radius-xl);
}

@media (max-width: 760px) {
  body.bz-app--store {
    --store-header-height: 60px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  body.bz-app--store header.app-header {
    min-height: var(--store-header-height);
    padding: 8px 12px;
  }

  body.bz-app--store #btnTemaTienda {
    display: none;
  }

  body.bz-app--store #btnMenuTienda {
    width: 44px;
    padding: 9px;
    font-size: 0;
  }

  body.bz-app--store #btnMenuTienda .tienda-header-icon {
    margin: 0;
  }

  body.bz-app--store .tienda-banner {
    min-height: 150px;
    max-height: 190px;
    aspect-ratio: 2 / 1;
  }

  body.bz-app--store .tienda-perfil-body {
    padding-block: 14px;
  }

  body.bz-app--store main {
    padding-inline: 12px;
  }

  body.bz-app--store .layout:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  body.bz-app--store .layout:not([hidden]) > #carrito {
    grid-column: 1;
    grid-row: auto;
  }

  body.bz-app--store .buscador-productos {
    position: sticky;
    top: calc(var(--store-header-height) + 6px);
    z-index: 20;
    padding-block: 6px;
    background: var(--bg);
  }

  body.bz-app--store .buscador-productos input {
    min-height: 46px;
    padding-inline: 15px;
  }

  body.bz-app--store .btn-abrir-categorias {
    width: 46px;
    min-width: 46px;
    overflow: hidden;
    padding-inline: 0;
    color: transparent;
  }

  body.bz-app--store .btn-abrir-categorias::before {
    color: var(--text);
    content: "☰";
  }

  body.bz-app--store.plantilla-mercado .app-header .btn-abrir-categorias {
    color: transparent;
  }

  body.bz-app--store .chips-filtro {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  body.bz-app--store .grilla-productos:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.bz-app--store .card-producto {
    border-radius: 14px;
  }

  body.bz-app--store .card-producto-imagen {
    aspect-ratio: 1 / 1;
  }

  body.bz-app--store .card-producto-imagen img {
    padding: 8px;
  }

  body.bz-app--store .card-producto-body {
    min-height: 136px;
    padding: 10px;
  }

  body.bz-app--store .card-producto-ventas,
  body.bz-app--store .cuotas-mercado {
    display: none;
  }

  body.bz-app--store .card-producto-nombre {
    min-height: 2.5em;
    font-size: 0.88rem;
  }

  body.bz-app--store .card-producto-precio {
    font-size: 1.05rem;
  }

  body.bz-app--store .card-producto-agregar-inferior {
    min-height: 44px;
    margin-top: 6px;
  }

  body.bz-app--store #carrito {
    border-radius: var(--bz-radius-xl) var(--bz-radius-xl) 0 0;
  }

  body.bz-app--store .barra-carrito-movil:not([hidden]) {
    position: fixed;
    z-index: 90;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px 10px 16px;
    border: 0;
    border-radius: 18px;
    background: var(--primary);
    color: var(--texto-sobre-primary, #fff);
    box-shadow: 0 14px 38px rgb(0 0 0 / 0.25);
  }

  body.bz-app--store .barra-carrito-movil__resumen {
    min-width: 0;
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.bz-app--store .barra-carrito-movil__accion {
    flex: 0 0 auto;
    padding: 10px 13px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    color: var(--text);
    font-weight: 750;
  }

  body.bz-app--store .bot-fab {
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }

  body.bz-app--store .bot-panel {
    right: 10px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    max-height: min(72vh, 620px);
  }
}

@media (max-width: 390px) {
  body.bz-app--store .card-producto-body {
    min-height: 130px;
    padding: 9px;
  }

  body.bz-app--store .card-producto-agregar-inferior {
    font-size: 0.85rem;
  }
}