/* ===================== CATEGORIA / PESQUISA / 404 — Personaliza Ai 3D =====================
   Carregada nos arquivos de categoria, nos resultados de pesquisa e na página 404,
   sempre junto com homepage.css (chrome). */

.cat-page { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 64px }

/* Cabeçalho da categoria */
.cat-header { padding: 32px 0 24px }
.cat-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9b93a8; flex-wrap: wrap; margin-bottom: 12px }
.cat-breadcrumb a { color: #9b93a8; text-decoration: none }
.cat-breadcrumb a:hover { color: #6F2DBD }
.cat-breadcrumb .sep { color: #c8bfe8 }
.cat-breadcrumb .current { color: #6F2DBD; font-weight: 600 }
.cat-title { font-family: 'Baloo 2', cursive; font-size: clamp(26px, 4vw, 36px); font-weight: 800; color: #241d38; line-height: 1.1; margin: 0 }
.cat-count { font-size: 13px; color: #9b93a8; margin-top: 4px }
.cat-empty { font-size: 14.5px; color: #7a7486; background: #FAF8FD; border: 1px solid #f1eef7; border-radius: 20px; padding: 32px; text-align: center }

/* Grid de produtos — grid-auto-rows:1fr garante que TODAS as linhas têm a mesma altura */
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; grid-auto-rows: 1fr }
@media (min-width: 640px) { .prod-grid { grid-template-columns: repeat(3, 1fr) } }
@media (min-width: 960px) { .prod-grid { grid-template-columns: repeat(4, 1fr) } }

/* Cards na grelha: mesmo estilo da homepage, mas a preencher a célula toda (alturas iguais) */
.prod-grid a.prod-card-link { text-decoration: none; display: flex }
.prod-grid .prod-card { width: 100%; height: 100% }
/* O preço + botão descem para o fundo; o espaço extra fica entre o título e o preço */
.prod-grid .prod-bottom { margin-top: auto }
.prod-grid .prod-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.prod-grid .prod-price { font-size: 16px }
.prod-add { background: #F57C00; color: #fff; border: none; font-weight: 600; font-size: 14px; padding: 10px; border-radius: 999px; cursor: pointer; font-family: 'Poppins', sans-serif; width: 100%; text-align: center; display: block; text-decoration: none }
.prod-add:hover { background: #e06d00; color: #fff }
.prod-add:focus, .prod-add:active { background: #F57C00; color: #fff }

/* Infinite scroll — loader */
.load-sentinel { height: 40px; display: flex; align-items: center; justify-content: center; margin-top: 8px }
.load-spinner { width: 28px; height: 28px; border: 3px solid #e8e3f3; border-top-color: #6F2DBD; border-radius: 50%; animation: pz-spin .7s linear infinite; opacity: 0; transition: opacity .3s }
.load-spinner.visible { opacity: 1 }
.end-of-results { font-size: 13px; color: #9b93a8; text-align: center; padding: 16px 0 }
@keyframes pz-spin { to { transform: rotate(360deg) } }

/* ===================== PAGINAÇÃO (resultados de pesquisa) ===================== */
.pz-pagination { margin: 36px 0 8px; display: flex; justify-content: center }
.pz-pagination .page-numbers { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; flex-wrap: wrap }
.pz-pagination .page-numbers li { margin: 0 }
.pz-pagination a.page-numbers,
.pz-pagination span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  text-decoration: none; border: 1px solid #ece7f6; color: #6F2DBD; background: #fff;
}
.pz-pagination a.page-numbers:hover { background: #FAF8FD; border-color: #d9cff2 }
.pz-pagination span.page-numbers.current { background: #6F2DBD; border-color: #6F2DBD; color: #fff }
.pz-pagination span.page-numbers.dots { border-color: transparent; color: #9b93a8 }

/* ===================== PÁGINA 404 ===================== */
.err-page { max-width: 640px; margin: 0 auto; padding: clamp(40px, 9vw, 88px) clamp(16px, 4vw, 40px) 72px; text-align: center }
.err-emoji {
  width: 84px; height: 84px; margin: 0 auto 22px; border-radius: 26px;
  display: flex; align-items: center; justify-content: center; font-size: 40px; color: #fff;
  background: linear-gradient(150deg, #8526ff, #F57C00);
  box-shadow: 0 22px 40px -16px rgba(133, 38, 255, .5);
}
.err-title { font-family: 'Baloo 2', cursive; font-size: clamp(24px, 5vw, 34px); font-weight: 800; color: #241d38; line-height: 1.12; margin: 0 0 12px }
.err-text { font-size: 15px; color: #7a7486; line-height: 1.6; margin: 0 auto 28px; max-width: 440px }
.err-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px }
.err-cats-label { font-size: 13px; color: #9b93a8; margin: 0 0 14px }
.err-cats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.err-cat-chip {
  display: inline-block; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: #6F2DBD; background: #FAF8FD; border: 1px solid #f1eef7;
}
.err-cat-chip:hover { background: #fff; border-color: #d9cff2; color: #6F2DBD }