/* Super Market CR — estilos base (portados del diseño de Claude Design, verde → azul) */
*{box-sizing:border-box}
:root{
  --blue:oklch(0.52 0.13 250);
  --blue-dark:oklch(0.44 0.13 250);
  --blue-link:oklch(0.48 0.12 250);
  --blue-link-h:oklch(0.38 0.12 250);
  --blue-soft:oklch(0.96 0.03 250);
  --ink:#17150f;
  --bg:#f7f5f0;
  --red:oklch(0.55 0.17 28);
}
body{margin:0;background:var(--bg);font-family:'Instrument Sans',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--blue-link);text-decoration:none}
a:hover{color:var(--blue-link-h)}
input,button,select,textarea{font:inherit;color:inherit}
::placeholder{color:rgba(23,21,15,.38)}
.nsb::-webkit-scrollbar{height:6px}
.nsb::-webkit-scrollbar-thumb{background:rgba(23,21,15,.18);border-radius:99px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Estados hover/focus (el diseño original los definía como atributos de runtime) */
.hov-primary:hover{background:var(--blue-dark)!important}
.hov-to-blue:hover{background:var(--blue)!important}
.hov-border:hover{border-color:rgba(23,21,15,.35)!important}
.hov-border-ink:hover{border-color:var(--ink)!important}
.hov-ink:hover{color:var(--ink)!important}
.hov-card:hover{border-color:var(--blue)!important;transform:translateY(-2px)}
.hov-plus:hover{background:var(--blue)!important;color:#fff!important;border-color:transparent!important}
.focus-blue:focus-within{border-color:var(--blue)!important}
.fld:focus{border-color:var(--blue)!important;background:#fff!important;outline:0}
input[type=range]{accent-color:var(--blue)}
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* Corazón de favoritos: flota sobre la foto de la tarjeta; la variante
   `quieta` va en el detalle del producto, junto al título. */
.corazon{
  position:absolute;top:10px;right:10px;width:34px;height:34px;padding:0;border:1px solid rgba(23,21,15,.14);
  border-radius:50%;background:rgba(255,255,255,.92);font-size:17px;line-height:1;cursor:pointer;
  color:rgba(23,21,15,.45);display:flex;align-items:center;justify-content:center;transition:transform .12s,color .12s
}
.corazon:hover{transform:scale(1.12);color:var(--red)}
.corazon.on{color:var(--red);border-color:var(--red)}
.corazon.quieta{position:static;flex:none;margin-top:12px;width:42px;height:42px;font-size:20px}

/* Carrusel del inicio (se activa desde el panel → Banners).
   Las fotos van una encima de otra y se cruzan con opacidad; la que no se ve
   no recibe clics, para que no se abra el enlace de una foto oculta. */
.carrusel .cslide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.carrusel .cslide.on{opacity:1;pointer-events:auto}
.carrusel .ctitulo{position:absolute;left:12px;bottom:34px;background:rgba(23,21,15,.82);color:#f7f5f0;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px}
.cpuntos{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.cpunto{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:pointer;transition:width .2s,background .2s}
.cpunto.on{width:22px;background:#fff}
@media (prefers-reduced-motion:reduce){.carrusel .cslide{transition:none}}

/* Grilla de productos (ofertas del inicio y listado de la sección).
   En el teléfono van dos por fila, como en cualquier tienda: una sola columna
   obliga a recorrer muchísimo para ver el catálogo. Se fija el número de
   columnas en vez de dejarlo al `auto-fill`, para que no dependa de si el
   teléfono tiene 320 o 430 px de ancho. */
.grid-prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.card-pie{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:8px}
/* Solo en anchos de teléfono: arriba de eso el `auto-fill` ya acomoda 3 o más
   columnas y forzar dos daría tarjetas enormes. */
@media (max-width:560px){
  .grid-prod{grid-template-columns:1fr 1fr;gap:10px}
  /* A la mitad de ancho, el precio y el botón ya no entran uno al lado del
     otro (menos aún con "En carrito · 12"), así que se apilan. */
  .card-pie{flex-direction:column;align-items:stretch;gap:9px}
  .card-pie .card-add{width:100%;justify-content:center;text-align:center}
}

/* Panel de filtros del listado.
   En pantalla ancha va al costado y queda fijo mientras se recorre la grilla.
   Cuando la pantalla es angosta el panel pasa abajo del título, en la misma
   columna que los productos: ahí NO puede seguir siendo "sticky", porque se
   quedaría anclado y las tarjetas de producto le pasarían por encima. En ese
   caso ocupa todo el ancho y se pliega, para no empujar los productos. */
.filtros{flex:1 1 240px;max-width:270px;position:sticky;top:120px}
.filtros-titulo{display:flex;align-items:center;justify-content:space-between}
.filtros-toggle,.filtros-limpiar{display:none}
@media (max-width:780px){
  .filtros{position:static;max-width:none;flex:1 1 100%}
  .filtros-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left
  }
  .filtros-cuerpo{margin-top:14px}
  .filtros-cuerpo.cerrado{display:none}
  /* El encabezado sobra: el botón que pliega ya dice "Filtros". El "Limpiar"
     pasa al final, como botón ancho, que en el teléfono es más fácil de tocar. */
  .filtros-titulo{display:none}
  .filtros-limpiar{
    display:block;width:100%;margin-top:16px;height:38px;
    border:1px solid rgba(23,21,15,.18);border-radius:9px;background:#fff;
    font-size:13px;cursor:pointer
  }
}

/* Imagen que no se pudo cargar: se oculta y queda visible el fondo de la
   tarjeta (color de la sección), en lugar del ícono de imagen rota. */
.img-off{display:none!important}
.cat-card:hover img{transform:scale(1.04)}
.cat-card img{transition:transform .25s ease}