/* Vitrina /productos/ (page-productos.php). Cabecera = .koi-cat-* de archive.css. */

.koi-productos__filtro {
  display: flex; gap: 8px; margin-top: 20px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.koi-productos__filtro::-webkit-scrollbar { display: none; }
.koi-productos__filtro .koi-pill { flex: 0 0 auto; padding: 6px 12px; white-space: nowrap; }

.koi-productos__seccion { margin-top: clamp(32px, 4vw, 56px); }

/* 2 columnas en móvil (no la lista foto-izquierda de .koi-grid), 3 y 4 arriba. */
.koi-productos__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px;
}
@media (min-width: 640px) {
  .koi-productos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
}
@media (min-width: 960px) {
  .koi-productos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.koi-producto { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.koi-producto__enlace { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.koi-producto__media {
  display: block; position: relative; overflow: hidden; aspect-ratio: 1/1; background: var(--koi-color-gris-claro);
}
.koi-producto__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--koi-ease);
}
.koi-producto:hover .koi-producto__media img { transform: scale(1.05); }
/* Producto puesto en un perro (IA) primero; la foto oficial en miniatura y la etiqueta, para no engañar a quien compra. */
.koi-producto__oficial {
  position: absolute; right: 8px; bottom: 8px; width: 28%; aspect-ratio: 1/1; overflow: hidden; z-index: 1;
  background: #fff; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.koi-producto__media .koi-producto__oficial img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none; }
.koi-producto__ia {
  position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 7px; border-radius: 99px;
  background: rgba(0, 0, 0, .62); color: #fff; font-family: var(--koi-fuente-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
}
.koi-producto__titulo {
  font-family: var(--koi-fuente-ui); font-weight: 500; font-size: 16px; line-height: 1.25; letter-spacing: -.02em;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.koi-producto__precio { font-family: var(--koi-fuente-mono); font-size: 13px; }
.koi-producto__nota {
  align-self: flex-start; margin-top: 2px; font-family: var(--koi-fuente-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; color: var(--koi-color-gris);
}
.koi-producto__nota:hover { color: var(--koi-color-texto); }

@media (max-width: 639px) {
  .koi-producto__titulo { font-size: 14px; }
  .koi-producto__precio { font-size: 12px; }
  .koi-producto__nota { font-size: 10px; }
}

.koi-productos__vacio { margin: 24px 0 0; font-size: 17px; color: var(--koi-color-texto-suave); }
.koi-productos__aviso { margin: 40px 0 0; font-size: 12px; color: var(--koi-color-gris); }