/* Tienda — estilos propios del módulo. Depende de assets/css/kernel.css */

.barra-catalogo{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  padding-bottom:1.75rem; margin-bottom:2.75rem;
  border-bottom:1px solid var(--linea);
}
.filtros{ display:flex; flex-wrap:wrap; gap:.5rem; }
.filtros button, .filtros .filtro{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.08em;
  background:transparent; color:var(--tenue);
  border:1px solid var(--linea); clip-path:var(--chaflan);
  padding:.45rem 1.05rem; cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease;
}
.filtros button:hover, .filtros .filtro:hover{ color:var(--arena); border-color:var(--linea-fuerte); }
.filtros button[aria-pressed="true"], .filtros .filtro[aria-current="page"]{ background:var(--arena); border-color:var(--arena); color:var(--noche); }

.catalogo{ display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:clamp(1.25rem,2.5vw,2rem); }

.item{ display:flex; flex-direction:column; }
.item__foto{
  position:relative; display:block; overflow:hidden;
  background:var(--alto); aspect-ratio:4/5;
 
}
.item__foto img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.item__foto:hover img{ transform:scale(1.04); }
.item__foto[data-sin-foto]::after{
  content:"Sin foto"; position:absolute; inset:0;
  display:grid; place-items:center; color:var(--tenue); font-size:.85rem;
}
.item h3{ margin-top:1rem; font-size:1.25rem; }
.item__autor{ margin:.25rem 0 0; font-size:.88rem; color:var(--tenue); }
.item__linea{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--linea);
}
.item__precio{ font-family:var(--display); font-size:1.4rem; font-weight:800; letter-spacing:-.014em; }
.item__sumar{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.07em; cursor:pointer;
  background:transparent; color:var(--tenue);
  border:1px solid var(--linea); clip-path:var(--chaflan); padding:.35rem .95rem;
  transition:color .16s ease, border-color .16s ease;
}
.item__sumar:hover{ color:var(--rojo-claro); border-color:color-mix(in srgb,var(--rojo) 55%,transparent); }
.item__agotado{ font-size:.85rem; color:var(--tenue); }

/* Ficha de producto */
.producto{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,4rem); align-items:start; margin-top:1.5rem;
}
.producto__galeria img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--alto);  }
.producto h1{ font-size:clamp(2.4rem,5.5vw,3.8rem); font-weight:900; letter-spacing:-.022em; line-height:.92; }
.producto__autor{ color:var(--tenue); margin:.7rem 0 0; }
.producto__precio{ font-family:var(--display); font-size:2.4rem; font-weight:800; letter-spacing:-.018em; margin:1.75rem 0 0; }
.producto__detalle{ list-style:none; margin:2rem 0 0; padding:0; border-top:1px solid var(--linea); max-width:30rem; }
.producto__detalle li{ display:flex; justify-content:space-between; gap:1.5rem; padding:.6rem 0; border-bottom:1px solid var(--linea); font-size:.95rem; }
.producto__detalle span:last-child{ color:var(--tenue); text-align:right; }

/* Panel del pedido */
.carro{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(24.5rem,94vw);
  background:color-mix(in srgb, var(--carbon) 96%, transparent);
  backdrop-filter:blur(18px);
  border-left:1px solid var(--linea-fuerte);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
}
.carro[data-abierto="true"]{ transform:translateX(0); }
.carro__cabeza{ display:flex; align-items:center; justify-content:space-between; padding:1.35rem 1.6rem; border-bottom:1px solid var(--linea); }
.carro__cabeza h2{ font-size:1.35rem; }
.carro__cerrar{
  font:inherit; font-size:1.5rem; line-height:1; width:2.2rem; height:2.2rem;
  background:transparent; border:1px solid var(--linea); clip-path:var(--chaflan);
  cursor:pointer; color:var(--tenue);
}
.carro__cerrar:hover{ color:var(--rojo-claro); border-color:var(--linea-fuerte); }
.carro__cuerpo{ flex:1; overflow-y:auto; padding:.5rem 1.6rem; }
.carro__pie{ padding:1.35rem 1.6rem 1.85rem; border-top:1px solid var(--linea); display:grid; gap:.9rem; }
.carro__total{ display:flex; justify-content:space-between; align-items:baseline; margin:0; }
.carro__total b{ font-family:var(--display); font-size:1.75rem; font-weight:800; letter-spacing:-.016em; }

.renglon{ display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; padding:1.05rem 0; border-bottom:1px solid var(--linea); }
.renglon h3{ font-size:1rem; font-family:var(--texto); font-weight:600; letter-spacing:0; }
.renglon__precio{ font-size:.95rem; }
.renglon__control{ display:flex; align-items:center; gap:.6rem; }
.renglon__control button{
  font:inherit; width:1.9rem; height:1.9rem; line-height:1;
  background:transparent; border:1px solid var(--linea); clip-path:var(--chaflan);
  cursor:pointer; color:var(--arena);
}
.renglon__control button:hover{ border-color:var(--rojo); color:var(--rojo-claro); }
.renglon__quitar{ font-size:.85rem; color:var(--tenue); background:transparent; border:0; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:.2em; }
.renglon__quitar:hover{ color:var(--rojo-claro); }

.velo{ position:fixed; inset:0; background:rgba(10,7,6,.6); backdrop-filter:blur(2px); z-index:70; }

@media (max-width:600px){
  .catalogo{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1.25rem; }
  .item h3{ font-size:1rem; }
}