/* Tienda: piel de la landing, pero la TARJETA de producto va sobre superficie clara.
   Las fotos vienen de WhatsApp con fondos disparejos; sobre claro se ven parejas y limpias. */
.tienda{padding:6rem 0 3rem}
.tienda__filtros{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.2rem 0 2rem}
.tienda__filtros .input{flex:1;min-width:180px}

.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem}
.prod{background:#fff;border-radius:var(--radius-sm);overflow:hidden;display:flex;
      flex-direction:column;color:#14110b}
.prod__foto{display:block;aspect-ratio:1;background:#f4f4f5}
.prod__foto img{width:100%;height:100%;object-fit:contain}
.prod__body{padding:.9rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.prod__nombre{color:#14110b;text-decoration:none;font-weight:600;font-size:.92rem;line-height:1.35}
.prod__pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.prod__precio{font-family:var(--font-disp);font-size:1.15rem}

.ficha{padding:6rem 0 3rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.ficha__foto{background:#fff;border-radius:var(--radius-sm);aspect-ratio:1}
.ficha__foto img{width:100%;height:100%;object-fit:contain}
.ficha__precio{font-family:var(--font-disp);font-size:2rem;color:var(--accent);margin:.4rem 0}

/* En el teléfono, 2 productos por fila: apilados de a uno el catálogo se hace eterno. */
@media(max-width:560px){
  .prod-grid{grid-template-columns:1fr 1fr;gap:.8rem}
  .prod__body{padding:.6rem}
  .prod__nombre{font-size:.82rem}
  .ficha{grid-template-columns:1fr}
}

/* ---------- avisos (resultado de la última acción) ----------
   Mismas reglas que static/app-extra.css (panel), portadas acá porque la tienda no carga
   ese archivo. El icono va como SVG en línea en _avisos.html: la tienda tampoco carga app.js. */
.aviso{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.85rem 1rem;margin-bottom:1.2rem;
  border-radius:var(--radius-sm);border:1px solid;
  font-size:.92rem;line-height:1.45;
  animation:aviso-in .25s ease-out;
}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px}
.aviso__x{
  margin-left:auto;flex:none;background:none;border:0;cursor:pointer;
  color:inherit;opacity:.55;padding:0;display:flex;
}
.aviso__x:hover{opacity:1}
.aviso__x svg{width:15px;height:15px}
.aviso--error{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.aviso--exito{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.aviso--aviso{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
@keyframes aviso-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aviso{animation:none}}
@media(max-width:860px){.aviso__x{min-width:44px;min-height:44px;align-items:center;justify-content:center}}

.carrito{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;display:flex;
         justify-content:flex-end}
/* El atributo HTML `hidden` NO basta para ocultar: esta regla de arriba fija
   `display:flex` y una regla de autor le gana al display:none que el navegador
   aplica por `hidden` (misma especificidad, esta viene después en la cascada).
   Sin esta línea el carrito tapa toda la tienda desde que carga la página. */
.carrito[hidden]{display:none}
.carrito__panel{background:var(--surf);width:min(420px,100%);height:100%;overflow:auto;
                padding:1.2rem;display:flex;flex-direction:column;gap:.8rem}
.carrito__head{display:flex;align-items:center;justify-content:space-between}
.carrito__linea{display:flex;align-items:center;gap:.6rem;justify-content:space-between;
                border-bottom:1px solid var(--line);padding:.5rem 0;font-size:.9rem}
.carrito__total{font-family:var(--font-disp);font-size:1.2rem;text-align:right}