/* ===== Skeletons for product listing (PJAX) ===== */

/* PJAX container */
#npf-pjax-target {
  position: relative;
  min-height: 200px;
}

/* Keep the results bar ALWAYS visible */
#npf-list .npf-results-bar {
  position: relative;
  z-index: 1;
}

/* While loading: hide ONLY the real products grid (not the results bar) */
#npf-pjax-target.is-loading #npf-list .products {
  display: none;                 /* use visibility:hidden if you prefer keeping height */
}

/* (Optional) hide pagination during loading */
#npf-pjax-target.is-loading #npf-list .npf-pagination,
#npf-pjax-target.is-loading #npf-list .woocommerce-pagination {
  visibility: hidden;
  pointer-events: none;
}

/* Skeleton block lives in normal flow, just under the results bar */
#npf-list .npf-skeleton {
  display: none;                 /* hidden by default */
  margin-top: .5rem;
}

/* Show skeleton grid only while loading (override inline display:none) */
#npf-pjax-target.is-loading #npf-list .npf-skeleton {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  align-content: start;
}

/* --- Skeleton cards & shimmer --- */
.npf-sk-card{
  height: 270px;                 /* adjust to your card height */
  border-radius: 12px;
  overflow: hidden;
  background: #f3f3f3;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  display: grid;
  grid-template-rows: 58% 42%;
}

.npf-sk-media{ background: #e8e8e8; }

.npf-sk-body{
  padding: .6rem .7rem;
  display: grid;
  grid-auto-rows: max-content;
  gap: .45rem;
}

.npf-sk-line{
  height: .7rem;
  border-radius: 6px;
  background: #e4e4e4;
}
.npf-sk-line.short{ width: 60%; }
.npf-sk-line.tag{ width: 40%; height: .6rem; border-radius: 999px; }

/* shimmer */
@keyframes sk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.npf-sk-media, .npf-sk-line{
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.1s linear infinite;
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .npf-sk-media, .npf-sk-line{ animation: none !important; }
}

/* Mostrar skeleton durante o load */
#npf-pjax-target.is-loading #npf-list .npf-skeleton{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .75rem;
  align-content: start;
}

/* MANTER a barra de resultados visível */
#npf-list .npf-results-bar { position: relative; z-index: 1; }

/* ESCONDER TUDO o resto da listagem enquanto carrega */
#npf-pjax-target.is-loading #npf-list > :not(.npf-results-bar):not(.npf-skeleton){
  display: none !important;
}

/* (por redundância) esconder padrões Woo + a tua paginação se estiverem aninhados */
#npf-pjax-target.is-loading #npf-list ul.products,
#npf-pjax-target.is-loading #npf-list .products,
#npf-pjax-target.is-loading #npf-list .product,
#npf-pjax-target.is-loading #npf-list .woocommerce-pagination,
#npf-pjax-target.is-loading #npf-list .npf-pagination{
  display: none !important;
}