/* ==========================================================================
   PRODUKTY — karta produktu, siatka, warianty kolorów
   ========================================================================== */

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
}

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.product-card__media {
  position: relative;
  aspect-ratio: 3 / 4.3;
  overflow: hidden;
  background: var(--color-beige-light);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }

.product-card__badge {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  padding: 0.3em 0.75em;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-uppercase);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  background: var(--color-badge-new);
}
.product-card__badge--sale { background: var(--color-badge-sale); }
.product-card__badge--new { background: var(--color-black); }
.product-card__badge--out-of-stock { background: var(--color-text-muted); }

/* Produkt niedostępny (prosty na 0, albo wariantowy — gdy WSZYSTKIE warianty
   są niedostępne) — zdjęcie w skali szarości, żeby wizualnie odróżnić od
   dostępnych produktów na liście, bez konieczności czytania etykiety. */
.product-card--out-of-stock .product-card__media img { filter: grayscale(100%); opacity: 0.7; }

.product-card__wishlist {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
}
.product-card__wishlist svg { width: 16px; height: 16px; }
.product-card__wishlist.is-active svg { fill: var(--color-primary); color: var(--color-primary); }

.product-card__title {
  font-size: var(--fs-small);
  font-family: var(--font-body);
  font-weight: 400;
  margin-bottom: var(--space-2xs);
}
/* Jawnie zerujemy styl linku — bez tego, na zwykłych stronach WP (np. shortcode
   na dedykowanej stronie promocji), domyślne style WordPressa dla linków w
   treści strony ("wp-block" / edytor bloków) potrafią nadpisać wygląd tytułu
   kart (podkreślenie, inny kolor) — na archiwach sklepu tego nie widać, bo
   te strony nie przechodzą przez ten sam mechanizm treści strony. */
.product-card__title a {
  text-decoration: none !important;
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
}
.product-card__title a::after { content: ""; position: absolute; inset: 0; } /* cały card klikalny */

.product-card__price {
  font-size: var(--fs-small);
  font-weight: 500;
  margin-bottom: var(--space-xs);
}
.product-card__price del { color: var(--color-text-muted); font-weight: 400; margin-right: var(--space-xs); }
.product-card__price ins { text-decoration: none; color: var(--color-primary); }

/* Warianty kolorów pod ceną */
.product-card__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
}
.swatch {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  position: relative;
}
.swatch.is-selected::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px solid var(--color-black);
  border-radius: 50%;
}
.swatch__more {
  font-size: 0.65rem;
  color: var(--color-text-muted);
}

/* Skeleton / placeholder podczas ładowania AJAX (np. filtrowanie) */
.product-card.is-loading .product-card__media { position: relative; }

@media (min-width: 576px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
  .products-grid--home { grid-template-columns: repeat(6, 1fr); }
  .product-card__title { font-size: var(--fs-xs); }
}
@media (min-width: 1200px) {
  .products-grid:not(.products-grid--home) { grid-template-columns: repeat(4, 1fr); }
}

/* Automatyczne doczytywanie produktów (zamiast klikalnej paginacji) */
.products-load-sentinel { height: 1px; }
.products-load-indicator {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}