/* ===========================================================
   Karta produktu
   Wycięte z ww-styles.css (linie 516–610, 1143).
   Nazwy klas z przedrostkiem ww-.
   Używane na stronie głównej i na listingu kategorii.
   Dopiski oznaczone komentarzem NOWE.
   =========================================================== */

/* Siatka kart. */
.ww-grid {
  display: grid;
  grid-template-columns: repeat(var(--ww-cols, 4), 1fr);
  gap: 22px;
}

/* --- Karta --- */

.ww-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s;
}
.ww-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 50px -28px rgba(40,30,20,.45);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}

.ww-card__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  display: block;
}

/* NOWE: etykiety trafiają do karty gotowym kawałkiem kodu,
   więc pozycjonujemy je stąd. */
.ww-card__media .ww-labels {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
}

.ww-card__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}

/* Drugie zdjęcie: wycinka unosząca się nad tłem karty. */
.ww-card__photo2 {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 9%;
  opacity: 0;
  filter: drop-shadow(0 14px 18px rgba(40,25,15,.45));
  transition: opacity .35s ease;
}

/* Na myszce podmiana przy najechaniu. */
@media (hover: hover) {
  .ww-card:hover .ww-card__photo { transform: scale(1.06); }
  .ww-card__media.has-swap:hover .ww-card__photo { opacity: 0; }
  .ww-card__media.has-swap:hover .ww-card__photo2 {
    opacity: 1;
    animation: cardSliceFloat 3.2s ease-in-out infinite;
  }
}

/* Na dotyku podmiana przesunięciem palca — klasę dokłada skrypt. */
.ww-card__media--swapped .ww-card__photo { opacity: 0; }
.ww-card__media--swapped .ww-card__photo2 {
  opacity: 1;
  animation: cardSliceFloat 3.2s ease-in-out infinite;
}

@keyframes cardSliceFloat {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50%      { translate: 0 -8px; rotate: 2deg; }
}

/* Panel z opisem wjeżdżający od dołu zdjęcia. */
.ww-card__peek {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 16px;
  transform: translateY(101%);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
@media (hover: hover) {
  .ww-card:hover .ww-card__peek { transform: translateY(0); }
}
/* NOWE: na dotyku panel nie ma jak wjechać — chowamy go zupełnie,
   bo ten sam tekst jest w opisie pod nazwą. */
@media (hover: none) {
  .ww-card__peek { display: none; }
}

/* --- Treść karty --- */

.ww-card__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ww-card__cut {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.ww-card__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 19px;
  line-height: 1.1;
  text-transform: var(--display-transform);
  letter-spacing: var(--display-spacing);
  margin: 2px 0 0;
}
/* Odnośnik dziedziczy kolor po nagłówku zamiast brać kolor linku z motywu. */
.ww-card__name a { color: inherit; text-decoration: none; }

/* Opis pokazuje się dopiero w widoku listy na listingu. */
.ww-card__desc {
  display: none;
  margin: 5px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.ww-card__foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ww-card__price { font-weight: 700; font-size: 16px; }
/* NOWE: WooCommerce wypisuje cenę w środku znacznika — zerujemy
   jego marginesy, a cenę przekreśloną przygaszamy. */
.ww-card__price .woocommerce-Price-amount { font-weight: 700; }
.ww-card__price del { opacity: .5; font-weight: 500; margin-right: 6px; }
.ww-card__price ins { text-decoration: none; }

.ww-card__heat { margin-top: 6px; }

/* --- Przycisk "Dodaj" --- */

.ww-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 13.5px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform .2s, background .2s, color .2s;
}
/* Odnośnik znów potrzebuje koloru wprost. */
a.ww-add { color: var(--bg); }
.ww-add:hover { transform: translateY(-2px); background: var(--accent); color: var(--accent-ink); }
a.ww-add:hover { color: var(--accent-ink); }
.ww-add:active { transform: scale(.94); }
.ww-add--on { background: var(--accent); color: var(--accent-ink); }

.ww-add__ico { display: none; width: 18px; height: 18px; }
.ww-add__plus { font-size: 15px; line-height: 1; }

/* NOWE: na wąskich kartach napis ustępuje miejsca ikonie koszyka. */
@media (max-width: 520px) {
  .ww-add__txt { display: none; }
  .ww-add__ico { display: block; }
  .ww-add { padding: 10px 12px; }
}

/* --- Siatka na mniejszych ekranach --- */

@media (max-width: 1100px) {
  .ww-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .ww-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ww-card__body { padding: 14px 14px 16px; }
  .ww-card__name { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .ww-card,
  .ww-card__photo,
  .ww-card__photo2,
  .ww-card__peek { transition: none; }
  .ww-card:hover { transform: none; }
  .ww-card__media.has-swap:hover .ww-card__photo2,
  .ww-card__media--swapped .ww-card__photo2 { animation: none; }
}