/**
 * Estructura de los bloques compartidos de la tienda pública de Bz.
 *
 * Mismo criterio que css/landing-public.css (leer la nota de cascada de ese
 * archivo): acá vive SOLO la estructura y el comportamiento, idénticos en las
 * 6 tiendas porque el HTML lo genera un único módulo
 * (frontend/js/store-app.js → renderCatalogView). La identidad visual de cada
 * plantilla —colores, tipografías, radios, sombras— se queda inline en su
 * HTML, porque las 6 tiendas deben verse distinto: es una característica del
 * producto.
 *
 * Lo cubre este archivo:
 *   Catálogo
 *     - .grid-header-tools : contador de resultados + selector de orden
 *     - .tier-hint         : aviso de precio por cantidad en la tarjeta
 *     - .filters-toggle    : panel de filtros colapsable en mobile
 *     - .catalog-empty     : estado vacío
 *   Bloques de la home (armador de Secciones de Shop)
 *     - .block-banner.has-image : scrim del banner con imagen de fondo
 *     - .featured-scroller      : carrusel de destacados y sus flechas
 *
 * Lo sirven solo las 6 store*.html. Las fichas de producto (product*.html) no
 * lo necesitan: no tienen catálogo ni bloques de home.
 */

/* ── Barra de herramientas del catálogo ─────────────────────────────────── */

.grid-header-tools{
  display: flex;
  align-items: center;
  gap: var(--sc-tools-gap, 14px);
  flex-wrap: wrap;
}

.result-count{
  white-space: nowrap;
}

.sort-wrap{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* En pantallas angostas el "Ordenar por" se cae y queda solo el select: el
   texto de la opción elegida ya dice qué orden está aplicado, así que la
   etiqueta es redundante justo donde el espacio es escaso. */
@media (max-width: 560px) {
  .sort-label{
    display: none;
  }
}

.sort-select{
  /* appearance:none para que la flecha nativa no pelee con el estilo de cada
     plantilla; el cursor se mantiene explícito porque al sacar la apariencia
     nativa algunos navegadores lo pierden. */
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  max-width: 190px;
}

/* ── Aviso de precio por cantidad en la tarjeta ─────────────────────────── */

/* El backend resuelve el mejor tramo de cada producto en batch
   (best_price_tier en /api/public/products) y store-app.js lo pinta acá. Solo
   aparece en los productos que tienen tramos cargados, así que la tarjeta
   tiene que verse bien con y sin este bloque. */
.tier-hint{
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  align-self: flex-start;
  white-space: nowrap;
}

/* El grid del catálogo es `auto-fill`, así que las tarjetas de una misma fila
   comparten altura: sin esto, una tarjeta con aviso de tramo y otra sin él
   dejan los botones "Agregar al carrito" a distinta altura dentro de la misma
   fila. Empujar el botón al fondo los alinea. */
.product-card .body > .add-btn{
  margin-top: auto;
}

/* ── Filtros colapsables en mobile ──────────────────────────────────────
   Problema que resuelve: abajo del breakpoint el sidebar se apila ARRIBA del
   catálogo, así que el visitante tiene que scrollear todo el panel de filtros
   (buscador + colores + precio + la lista entera de categorías) antes de ver
   el primer producto. En una tienda eso es inaceptable.

   El botón se estiliza con las custom properties que las 6 plantillas ya
   definen (--primary, --border, --card, --text), así que hereda la paleta de
   cada una sin necesitar CSS propio en los 6 HTML. */

.filters-toggle{
  display: none;   /* en desktop el sidebar está siempre visible */
}

/* 900px es el mismo breakpoint en el que las plantillas ya pasan
   .catalog-layout a una sola columna. */
@media (max-width: 900px) {
  .filters-toggle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin-bottom: 14px;
    padding: 11px 14px;
    background: var(--card, #fff);
    color: var(--text, #111);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .filters-toggle-caret{
    color: var(--primary, #1a3a5c);
  }

  /* El sidebar solo aparece cuando el visitante lo pide. `display:none` y no
     max-height:0 a propósito: los <details> de adentro arrancan abiertos, y
     una animación de altura sobre contenido de alto variable termina
     cortando la última categoría. */
  .catalog-layout .sidebar{
    display: none;
  }
  .catalog-layout.filters-open .sidebar{
    display: block;
    margin-bottom: 20px;
  }
}

/* ── Estado vacío del catálogo ──────────────────────────────────────────
   Estructura solamente; los colores y tipografías los aporta la regla
   `.empty` que cada plantilla ya tiene, más las custom properties de su
   paleta. */
.catalog-empty{
  /* El bloque vive DENTRO de .product-grid, que es un grid auto-fill: sin
     esto caería en una sola columna (el minmax ronda los 210-260px según la
     plantilla) y el mensaje quedaría en una columnita al costado. */
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}
.catalog-empty-title{
  font-size: 1.15em;
  font-weight: 700;
  color: var(--text, #111);
}
.catalog-empty-text{
  margin: 0;
  max-width: 42ch;
}
.catalog-empty-action{
  margin-top: 6px;
  padding: 9px 18px;
  background: var(--primary, #1a3a5c);
  color: #fff;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: .95em;
  font-weight: 700;
  cursor: pointer;
}

/* ── Banner de la home con imagen de fondo ──────────────────────────────
   Bug que corrige: `.block-banner` pinta la imagen que eligió el admin como
   background y el texto queda ENCIMA sin ninguna protección de contraste. En
   las plantillas con texto oscuro (formal, eshop, minimal, megashop) el
   título resultaba ilegible sobre cualquier foto oscura, y en las de texto
   blanco (motion) sobre cualquier foto clara. Y el banner es lo primero que
   ve un visitante.

   El scrim va en un ::before y no en el `background` de la regla porque la
   imagen la inyecta el renderer como estilo inline (background-image), y un
   background con gradiente en la hoja no puede convivir con eso.

   El scrim es parejo y no direccional a propósito: el bloque admite
   alineación izquierda, centro o derecha, así que un degradado lateral
   protegería el texto en una sola de las tres. */
.block-banner.has-image{
  position: relative;
  /* La imagen ya la pone el renderer; acá solo se asegura el encuadre. */
  background-size: cover;
  background-position: center;
  color: #fff;
}
.block-banner.has-image::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.58));
}
.block-banner.has-image > .block-banner-overlay{
  position: relative;
  z-index: 1;
}
/* El texto hereda el blanco del contenedor, pero los títulos de las
   plantillas fijan su propio color, así que hay que forzarlo. */
.block-banner.has-image h1,
.block-banner.has-image h2,
.block-banner.has-image h3,
.block-banner.has-image p{
  color: #fff;
}

/* ── Carrusel de destacados ─────────────────────────────────────────────
   El track ya era un scroller horizontal (scroll-snap + flex:0 0 auto), pero
   sin afordancia: las tarjetas se cortaban contra el borde y se leía como
   roto. Las flechas las muestra/oculta store-app.js según haya desborde real.

   Se estilan con las custom properties que las 6 plantillas ya definen, así
   que heredan la paleta de cada una sin CSS propio en los 6 HTML. */
.featured-scroller{
  position: relative;
}

.featured-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  background: var(--card, #fff);
  color: var(--primary, #1a3a5c);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
}
.featured-nav:disabled{
  opacity: .35;
  cursor: default;
}
.featured-nav-prev{ left: -8px; }
.featured-nav-next{ right: -8px; }

/* En pantallas donde las flechas taparían contenido útil se corren afuera del
   track; abajo de ese ancho no hay lugar, y ahí el gesto de swipe es el
   esperado igual. */
@media (max-width: 640px) {
  .featured-nav{ display: none; }
}

/* ── Jerarquía de los títulos de bloque de la home ──────────────────────
   Bug que corrige: `.lt-h2` (la clase que marca el nivel tipográfico de cada
   bloque) resuelve `font-size: var(--h2-font-size, inherit)`. Cuando el admin
   NO configuró tipografía el token está vacío y el `<h2>` cae a `inherit`, o
   sea al tamaño del texto de párrafo — tirando por la borda el tamaño natural
   del elemento. Resultado: todos los títulos de la home ("Comprá por
   categoría", "Los más pedidos", "Preguntas frecuentes") salían apenas más
   grandes que el nombre de un producto, sin jerarquía.

   El banner ya tenía el patrón correcto en su propia regla
   (`var(--h2-font-size, 26px)`); lo que faltaba era extenderlo al resto.

   Se targetea la CLASE de nivel y no el elemento `<h2>`: los renderers ponen
   siempre un `<h2>` pero con la clase del nivel que eligió el admin
   (lt-h1/lt-h2/lt-h3/lt-p), así que un selector por elemento aplicaría el
   tamaño de h2 a un bloque marcado como h3 y rompería esa opción.

   La cascada queda: token del admin > token de la plantilla > default de acá. */
.shop-section .lt-h1{ font-size: var(--h1-font-size, var(--sb-heading-1, 30px)); }
.shop-section .lt-h2{ font-size: var(--h2-font-size, var(--sb-heading-2, 22px)); }
.shop-section .lt-h3{ font-size: var(--h3-font-size, var(--sb-heading-3, 17px)); }
.shop-section .lt-p { font-size: var(--p-font-size,  var(--sb-heading-p, 15px)); }

/* ── Resumen del pedido en el checkout ──────────────────────────────────
   Lo usan el paso 1 y el paso 2 (mismo helper en store-app.js). Antes el
   paso 1 no mostraba nada: el comprador completaba nueve campos sin saber
   qué compraba ni cuánto costaba.

   Se estiliza con las custom properties que las 6 plantillas ya definen, así
   que hereda la paleta de cada una sin CSS propio en los 6 HTML. */
.checkout-summary{
  background: var(--card, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 18px;
  font-size: 13.5px;
}
/* Dentro del paso 2 el resumen ya vive en una tarjeta, así que no lleva la
   suya propia: sería una caja dentro de otra caja. */
.checkout-summary.is-review{
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 4px;
}

.checkout-summary-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  color: var(--text, #111);
  margin-bottom: 10px;
}
.checkout-summary-count{
  font-weight: 600;
  font-size: .85em;
  color: var(--text-muted, #64748b);
}

.checkout-summary-items{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.checkout-summary-item{
  display: grid;
  /* La cantidad va en su propia columna de ancho fijo para que los precios
     queden alineados aunque los nombres de producto midan distinto. */
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
}
.checkout-summary-item-name{
  min-width: 0;
}
.checkout-summary-item-qty{
  color: var(--text-muted, #64748b);
  white-space: nowrap;
}
.checkout-summary-item-price{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkout-summary-line{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  color: var(--text-muted, #64748b);
}
.checkout-summary-line > :last-child{
  font-variant-numeric: tabular-nums;
}
/* "Envío: a definir" — el dato falta, no es cero. Se marca para que no se
   lea como envío gratis. */
.checkout-summary-line.is-pending > :last-child{
  font-style: italic;
  opacity: .8;
}

.checkout-summary-total{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border, #e2e8f0);
  font-weight: 800;
  font-size: 1.1em;
  color: var(--text, #111);
}
.checkout-summary-total > :last-child{
  font-variant-numeric: tabular-nums;
}

/* ── "Mi cuenta" del cliente ────────────────────────────────────────────
   Dos bugs que corrige, los dos causados por reusar clases de otra cosa:

   1. Las pestañas usaban `.btn`, que en las 6 plantillas tiene `width:100%`
      (correcto para los CTA del carrito y del checkout). Resultado: las seis
      pestañas apiladas una por fila, ~300px de alto antes de mostrar un solo
      dato.
   2. El encabezado usaba `.form-actions`, pensada para la fila de botones de
      un formulario, así que "Cerrar sesión" también se estiraba a todo el
      ancho y dejaba al título en ~100px, partido en dos líneas.

   Se estiliza con las custom properties que las 6 plantillas ya definen, así
   que hereda la paleta de cada una sin CSS propio en los 6 HTML. */

.account-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.account-title{
  margin: 0;
}
.account-logout{
  /* `width:auto` explícito: si algún día alguien le vuelve a poner `.btn`,
     este declarador deja claro que el botón no debe estirarse. */
  width: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  background: none;
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
}
.account-logout:hover{
  color: var(--text, #111);
}

.account-tabs{
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.account-tab{
  width: auto;
  padding: 9px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: none;
  color: var(--text-muted, #64748b);
  border: none;
  /* El filete de la pestaña activa se apoya sobre el borde del contenedor, de
     ahí el -1px: si no, quedan dos líneas paralelas de 1px. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 0;
}
.account-tab:hover{
  color: var(--text, #111);
}
.account-tab.is-active{
  color: var(--primary, #1a3a5c);
  border-bottom-color: var(--primary, #1a3a5c);
}

/* ── Carrito (panel lateral) ────────────────────────────────────────────
   Dos correcciones de veracidad, no de estética:

   1. La línea solo mostraba el total (cantidad × unitario). Con cantidades
      mayoristas —60, 120 unidades— ese número no dice nada sobre el precio
      del producto, y era el único visible.
   2. El pie decía "Total" sobre un monto que es el SUBTOTAL: el envío se
      suma en el checkout. Ahora dice "Subtotal" y lo aclara. */
.cart-unit-price{
  display: block;
  margin-top: 1px;
  font-size: .78em;
  font-weight: 400;
  color: var(--text-muted, #64748b);
}

.cart-shipping-note{
  margin: 4px 0 10px;
  font-size: 11.5px;
  color: var(--text-muted, #64748b);
}

/* Aviso de precio por volumen ya aplicado, en el carrito y en el resumen del
   checkout. Antes el descuento por cantidad no se veía en NINGÚN paso de la
   compra: el carrito y el checkout mostraban el precio sin tramo y el server
   cobraba menos al confirmar. */
.cart-tier-note{
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
}
.tier-applied-badge{
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dcfce7;
  color: #14532d;
  font-size: .78em;
  font-weight: 700;
  white-space: nowrap;
}