/**
 * psiako.pl — sklep / PLP (nagłówek kategorii + pasek sortowania + karta produktu).
 *
 * Nadpisania WooCommerce/parenta BEZ `!important` — przez scoping `.woocommerce X`
 * (0,2,0 bije `.woocommerce-products-header` parenta 0,1,0; przy równej specyficzności
 * wygrywa kolejnością — child ładuje się po parencie).
 * Wszystko na tokenach. Breakpointy: 480 · 768 · 1024 · 1320.
 *
 * Karta produktu (sekcja niżej): parent renderuje ją hookami z bardzo głębokimi
 * selektorami, więc reguły lustrzane muszą mieć równą specyficzność (0,4,2–0,5,3) —
 * `selector-max-specificity` = świadomy warning, wciąż czyściej niż `!important`.
 */

.woocommerce .woocommerce-products-header {
  padding: var(--space-7) 0 0;
  margin-bottom: 0;
  background: none;
}

.woocommerce .woocommerce-products-header__title.page-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-ink-strong);
}

.woocommerce .woocommerce-products-header__title.page-title span {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0;
  color: var(--color-ink-muted);
}

/* opis kategorii — krótsze linie dla czytelności (jak akapity na stronie głównej) */
.woocommerce .term-description,
.woocommerce-page .term-description {
  max-width: 68ch;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-ink-muted);
}

.woocommerce .woocommerce-products-subheader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  margin-top: var(--space-5);
  background: none;
  border-top: 2px solid var(--color-border);
  border-bottom: none;
}

.woocommerce .woocommerce-products-subheader .woocommerce-result-count {
  margin: 0 auto 0 0;
  font-size: var(--font-size-2xs);
  color: var(--color-ink-muted);
}

/* „Filtry" (toggle sidebaru) + sortowanie — bliźniacze kontrolki-chipy;
   delikatny lift (translateY -1px + większy cień) na hover. */
.woocommerce .woocommerce-products-subheader .mbf-shop-sidebar__toggle,
.woocommerce .woocommerce-products-subheader .woocommerce-ordering .orderby {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-ink-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    border-color var(--transition-fast);
}

@media (hover: hover) {
  .woocommerce .woocommerce-products-subheader .mbf-shop-sidebar__toggle:hover,
  .woocommerce .woocommerce-products-subheader .woocommerce-ordering .orderby:hover {
    transform: translateY(-1px);
    border-color: var(--color-ink-muted);
    box-shadow: var(--shadow-dropdown);
  }
}

.woocommerce .woocommerce-products-subheader .mbf-shop-sidebar__toggle-icon {
  margin-left: var(--space-1);
}

/* Ukrycie chipów taksonomii pod produktami na listingu (blok WP). Obecnie nie
   renderuje się nigdzie — zabezpieczenie na wypadek zmiany szablonu/ustawień. */
/* stylelint-disable-next-line declaration-no-important */
.wp-block-post-terms { display: none !important; }

/* ==========================================================================
   Karta produktu na listingu (PLP) — „kratownica" jak sekcje strony głównej
   (kategorie / bestsellery): karty bez odstępów, rozdzielone liniami 2 px
   (--color-border); obraz w tonie sage, „Wybierz opcje" zawsze widoczne.
   Parent renderuje kartę hookami (inc/woocommerce/parts/shop.php) — stylujemy
   wyłącznie CSS-em, selektory lustrzane do parenta (assets/css/woocommerce.css),
   równa specyficzność → wygrywa kolejność ładowania (moduł po parencie).
   stylelint: `selector-max-specificity` = warning (świadome, jak w checkout.css).
   ========================================================================== */

.woocommerce ul.products {
  gap: 0;
  margin-top: var(--space-6);
  border-top: 2px solid var(--color-border);
  border-left: 2px solid var(--color-border);
}

.woocommerce ul.products li.product {
  background: var(--color-surface);
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  transition: background var(--transition-base);
}

@media (hover: hover) {
  .woocommerce ul.products li.product:hover {
    background: var(--color-layout);
  }
}

/* Kadr miniatury — tło białe (zdjęcia produktów mają białe tło studyjne), obraz „contain"
   (rozmiar `woocommerce_single` nieprzycięty — patrz filtr w inc/psiako/woocommerce.php). */
.woocommerce ul.products li.product .woocommerce-loop-product__thumbnail {
  aspect-ratio: 3 / 2;
  background: var(--color-surface);
  border-radius: 0;
  border-bottom: 2px solid var(--color-border);
}

.woocommerce ul.products li.product .woocommerce-loop-product__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  border-radius: 0;
}

/* Treść pod kadrem — kolumna flex, przycisk przypięty do dołu (równe wysokości w rzędzie) */
.woocommerce ul.products li.product .woocommerce-loop-product__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* Etykieta kategorii — obrys w kolorze akcentu (mockup: .tag-outline).
   Cel dotykowy ≥24 px (WCAG 2.5.8): pionowy padding + line-height:1. */
.woocommerce ul.products li.product .woocommerce-loop-product__categories a {
  display: inline-block;
  padding: var(--space-2) var(--space-2-5);
  font-size: var(--font-size-3xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

/* Tytuł — Archivo, bez gradientowego podkreślenia parenta. Link `inline-block`
   + padding-block → cel dotykowy ≥24 px też dla 1-liniowych nazw (WCAG 2.5.8). */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a {
  display: inline-block;
  padding-block: var(--space-1);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a .woocommerce-loop-product__title-span {
  padding-bottom: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  color: var(--color-ink-strong);
  background: none;
}

.woocommerce ul.products li.product:hover .woocommerce-loop-product__title .woocommerce-loop-product__title-span {
  color: var(--color-accent);
}

/* Cena — jak .psiako-prod-card__price */
.woocommerce ul.products li.product .woocommerce-loop-product__content .price {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-ink-strong);
}

.woocommerce ul.products li.product .woocommerce-loop-product__content .price del {
  margin-left: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  opacity: 0.4;
}

.woocommerce ul.products li.product .woocommerce-loop-product__content .price ins {
  color: var(--color-danger);
}

/* „Wybierz opcje" / „Do koszyka" — przeniesione hookiem do treści karty
   (inc/psiako/woocommerce.php). Pełna szerokość, pigułka akcentu, przypięta do
   dołu; `position: relative` + z-index → nad overlay linkiem całej karty. */
.woocommerce ul.products li.product .woocommerce-loop-product__content .button {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  margin-top: auto;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  color: var(--color-on-dark);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-none);
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  .woocommerce ul.products li.product .woocommerce-loop-product__content .button:hover,
  .woocommerce ul.products li.product:hover .woocommerce-loop-product__content .button {
    background: var(--color-accent-hover);
  }
}

/* Link „Zobacz koszyk" po dodaniu — zbędny, minikoszyk otwiera się sam. */
.woocommerce ul.products li.product .woocommerce-loop-product__content .added_to_cart {
  display: none;
}

/* Telefon: 1 kolumna (2-kolumnowa kratownica parenta zbyt ciasna dla nazw + przycisku),
   niższy kadr obrazka. */
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr; }

  .woocommerce ul.products li.product .woocommerce-loop-product__content {
    padding: var(--space-4);
  }
}