/* ============================================================
   KARTA PRODUKTU (.shop-card) — wspólna dla strony głównej i listingu.
   Markup: template-parts/product-card.php
   Tokeny (--cream, --sand, --pink, --ink…) dziedziczone z kontenera
   strony: .hp (front-page.css) albo .shop-main (archive.css).
   ============================================================ */

/* jeden kontener: zdjęcie u góry, pod nim badge + kropki (do lewej) */
.shop-card { background: transparent; border: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 0 8px; }
.shop-card__media { background: var(--cream); border-radius: var(--r-sm, 8px); padding: 0 0 24px; }
/* box 287 / zdjęcie 238 → padding poziomy 24px; zdjęcie wypełnia szerokość treści (całe widoczne,
   wysokość naturalna), dzięki czemu badge i kropki są równo z lewą krawędzią zdjęcia. */
.shop-card__img-wrap { display: block; position: relative; width: 100%; overflow: hidden; background: transparent; border-radius: var(--r-sm, 8px); }
.shop-card__img { display: none; width: 100%; height: auto; }
.shop-card__img.is-active { display: block; }
/* WooCommerce (.woocommerce ul.products li.product a img) ma wyższą specyficzność
   i wymusza display:block na wszystkich zdjęciach karty — stąd te dwie reguły. */
.shop-card .shop-card__media .shop-card__img-wrap .shop-card__img { display: none; margin: 0; }
.shop-card .shop-card__media .shop-card__img-wrap .shop-card__img.is-active { display: block; }
.shop-card__img-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; color: var(--sand); font-family: "Playfair Display", serif; font-size: 40px; }
/* klikalny obszar: zdjęcie + badge — kończy się nad kropkami galerii */
.shop-card__link { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 24px 0; color: inherit; text-decoration: none; cursor: pointer; }
.shop-card__badge { display: inline-block; background: var(--sand); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.4; padding: 7px 16px; border-radius: var(--r-sm, 8px); }
/* Placeholder: rezerwuje wysokość wiersza badge'a, gdy produkt nie ma badge'a — box ma stałą wysokość. */
.shop-card__badge--empty { background: transparent; }
.shop-card__dots { display: flex; align-items: center; justify-content: flex-start; gap: 7px; margin-top: 32px; padding-left: 24px; }
.shop-card__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--cream-2); cursor: pointer; transition: background .18s ease, width .18s ease; }
/* powiększone pole klikalne wokół kropki (sama kropka ma 8px) */
.shop-card__dot::after { content: ""; position: absolute; inset: -12px -3px; }
.shop-card__dot.is-active { width: 22px; background: var(--pink); }
.shop-card__body { display: flex; flex-direction: column; gap: 6px; padding: 0; }
.shop-card__name { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: .01em; }
.shop-card__name a { color: var(--ink); text-decoration: none; }
.shop-card__name a:hover { color: var(--pink); }
.shop-card__price { font-size: 14px; font-weight: 700; color: var(--ink); }
.shop-card__price del { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 8px; }
.shop-card__price ins { text-decoration: none; }