/* Tienda en línea (tarea 014). Móvil primero: nada de scroll horizontal. */
.tienda-raiz { min-height: 100vh; display: flex; flex-direction: column; background: #fafafa; overflow-x: hidden; }
.tienda-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 12px; box-sizing: border-box; }
.tienda-cabecera { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px; background: #fff; border-bottom: 3px solid var(--tienda-color, #1565c0); }
.tienda-marca { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.15rem; color: inherit; text-decoration: none; }
.tienda-logo { max-height: 40px; max-width: 120px; object-fit: contain; }
.tienda-buscador { flex: 1 1 260px; min-width: 0; }
.tienda-acciones { display: flex; align-items: center; }
.tienda-pie { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; padding: 16px; background: #fff; border-top: 1px solid #ddd; margin-top: 24px; }

.tienda-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tienda-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tienda-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tienda-tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.tienda-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f3f3f3; display: block; }
.tienda-foto-vacia { display: flex; align-items: center; justify-content: center; color: #9e9e9e; }
.tienda-tarjeta-cuerpo { padding: 8px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.tienda-nombre { font-weight: 600; font-size: .92rem; line-height: 1.2; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.tienda-precio { font-size: 1.15rem; font-weight: 700; }
.tienda-disp-ok { color: #2e7d32; }
.tienda-disp-poca { color: #ed6c02; }
.tienda-disp-pedido { color: #616161; }

.tienda-layout { display: flex; gap: 16px; align-items: flex-start; }
.tienda-filtros { width: 250px; flex: 0 0 250px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; box-sizing: border-box; }
.tienda-resultados { flex: 1; min-width: 0; }
.tienda-filtros-movil { display: none; }
@media (max-width: 899px) {
    .tienda-layout { display: block; }
    .tienda-filtros { display: none; width: auto; margin-bottom: 10px; }
    .tienda-filtros.abierto { display: block; }
    .tienda-filtros-movil { display: block; margin-bottom: 8px; }
}
.tienda-galeria { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; -webkit-overflow-scrolling: touch; }
.tienda-galeria img { flex: 0 0 100%; width: 100%; max-height: 60vh; object-fit: contain; scroll-snap-align: center; background: #f3f3f3; border-radius: 8px; cursor: zoom-in; }
.tienda-portada-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 700px) { .tienda-portada-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tienda-cat-tarjeta { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; }
.tienda-cat-tarjeta img { width: 100%; height: 80px; object-fit: contain; }

/* Aviso de precios referenciales (tarea 040): una línea discreta, sin empujar la paginación fuera de pantalla. */
.tienda-aviso-precios { font-size: .75rem; color: #757575; text-align: center; padding: 4px 8px; margin: 4px 0; }
.tienda-aviso-precios-ficha { font-size: .8rem; color: #757575; margin-top: 2px; }