/* V2: karta produktu (sections-v2/parts/card.mjs). Prefiks .v2-card__.
   Desktronic: zdjęcie 1:1 z promieniem 16, bez tła, ramki i cienia karty; pod zdjęciem gwiazdki (19 px niżej),
   nazwa 18/26 (10 px), opis 14 (4 px), „+ więcej” 12 (4 px), cena 18 (8 px).
   Hover (tylko kursor): packshot +3% w 0,4 s, tacka próbek wysuwa się z dołu zdjęcia w 0,2 s
   (opacity 0 → 1, translateY 6 → 0). Dotyk: tacka stoi pod zdjęciem. */

.v2-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--v2-ink);
}

.v2-card__visual {
  position: relative;
}

/* Packshot: kwadratowy wycinek na białym tle (585 px, własny margin w kadrze) z oddechem 11% od krawędzi pola.
   Pole białe z delikatnym obrysem zamiast szarego tła (uwaga klienta 27.10: zdjęcia w produktach to JPG na
   białym tle, kostka ma się odcinać obrysem). Tło zdjęcia nie jest idealnie białe, więc dobija je do bieli filtr. */
.v2-card__media {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--v2-line);
  border-radius: var(--v2-r-card);
  background: var(--gs-bg);
}

.v2-card__img {
  width: 100%;
  height: 100%;
  padding: var(--v2-card-air, 11%); /* oddech wokół mebla (decyzja Piotra 19.10: nie od krawędzi do krawędzi) */
  object-fit: contain;
  /* Tło wycinków nie jest idealnie białe (ok. #f7f7f7); lekkie rozjaśnienie dobija je do bieli, żeby kadr
     nie odcinał się prostokątem od białego pola. */
  filter: brightness(1.04);
  mix-blend-mode: multiply;
  transition: transform var(--v2-t-image);
}

.v2-card__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 3px 8px;
  border-radius: var(--v2-r-chip);
  background: var(--gs-bg);
  color: var(--v2-ink);
  font-size: var(--v2-caption-size);
  line-height: var(--v2-caption-leading);
}

.v2-card__badge.is-sale {
  background: var(--gs-sale);
  color: var(--gs-on-brand);
}

/* ---------- Tacka próbek ---------- */

.v2-card__tray {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--v2-line);
  border-radius: 0 0 var(--v2-r-card) var(--v2-r-card);
  background: var(--gs-bg);
}

.v2-card__swatches {
  display: flex;
  gap: 8px;
}

.v2-swatch {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--v2-r-chip);
  background: var(--v2-swatch, var(--v2-pack-2));
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 0.2);
  cursor: pointer;
  transition: box-shadow var(--v2-t-ui);
}

.v2-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-swatch:hover,
.v2-swatch[aria-pressed='true'] {
  box-shadow: 0 0 0 1px var(--gs-bg), 0 0 0 2px var(--v2-ink);
}

.v2-card__more {
  color: var(--v2-muted);
  font-size: var(--v2-caption-size);
  font-variant-numeric: tabular-nums;
}

/* ---------- Opis ---------- */

.v2-card__body {
  display: flex;
  flex-direction: column;
  padding-top: 19px;
}

html.v2 .v2-card__rating {
  display: flex;
  min-height: 18px;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: var(--v2-ink);
  font-size: var(--v2-caption-size);
  line-height: var(--v2-caption-leading);
  font-variant-numeric: tabular-nums;
}

.v2-card__count {
  color: var(--v2-muted);
}

.v2-stars {
  position: relative;
  display: inline-flex;
}

.v2-stars__base,
.v2-stars__fill {
  display: inline-flex;
  gap: 2px;
}

.v2-stars__base {
  color: var(--v2-control);
}

.v2-stars__fill {
  position: absolute;
  inset: 0;
  color: var(--v2-ink);
  clip-path: inset(0 calc(100% - var(--v2-fill, 100%)) 0 0);
}

.v2-card__name {
  margin: 0;
  font-family: var(--gs-font-display);
  font-size: var(--v2-title-size);
  font-weight: 400;
  letter-spacing: normal;
  line-height: var(--v2-title-leading);
  text-wrap: pretty;
}

.v2-card__link {
  color: inherit;
  text-decoration: none;
}

/* Rozciągnięty link: cała karta klikalna, próbki (z-index 2) leżą nad nim. */
.v2-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--v2-r-card);
}

html.v2 .v2-card__link:focus-visible {
  outline: none;
}

.v2-card__link:focus-visible::after {
  outline: 2px solid var(--gs-focus);
  outline-offset: 4px;
}

html.v2 .v2-card__desc {
  margin-top: 4px;
  color: var(--v2-text);
  font-size: var(--v2-small-size);
  line-height: 1.4;
}

html.v2 .v2-card__options {
  margin-top: 4px;
  color: var(--v2-muted);
  font-size: var(--v2-caption-size);
  line-height: var(--v2-caption-leading);
}

/* Cena: krój nagłówków 18, waga 400, ink (promocja w --gs-sale z ceną regularną i linią Omnibus). */
.v2-card .gs-pricebox {
  margin-top: 8px;
}

.v2-card .gs-pricebox__now {
  margin: 0;
  color: var(--v2-ink);
  font-family: var(--gs-font-display);
  font-size: var(--v2-title-size);
  font-weight: 400;
  line-height: 1.33;
}

.v2-card .gs-pricebox__now.is-sale {
  color: var(--gs-sale);
}

.v2-card .gs-pricebox__was {
  margin-left: 4px;
  color: var(--v2-muted);
  font-family: var(--gs-font-text);
  font-size: var(--v2-small-size);
}

html.v2 .v2-card .gs-pricebox__omnibus {
  margin-top: 2px;
  color: var(--v2-muted);
  font-size: var(--v2-caption-size);
  line-height: var(--v2-caption-leading);
}

.v2-card .gs-pricebox__rata {
  display: none;
}

/* Pusty rząd (karta bez próbek): w tacce na hover niewidoczny, pod zdjęciem trzyma wysokość rzędu próbek.
   Gdy w całej liście żadna karta nie ma próbek, pustych rzędów nie ma wcale. */
.v2-card__tray.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.v2-card__tray.is-empty .v2-card__swatches {
  height: 24px;
}

:is(ul, ol):not(:has(.v2-card__tray:not(.is-empty))) .v2-card__tray.is-empty {
  display: none;
}

/* To samo z pustym rzędem gwiazdek: gdy w liście żadna karta nie ma ocen (np. outlet), nie trzyma miejsca. */
:is(ul, ol):not(:has(.v2-card__rating:not(.is-empty))) .v2-card__rating.is-empty {
  display: none;
}

/* ---------- Hover tylko z kursorem; dotyk: tacka pod zdjęciem ---------- */

@media (hover: hover) and (pointer: fine) {
  .v2-card__tray {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity var(--v2-t-ui), transform var(--v2-t-ui);
  }

  .v2-card:is(:hover, :focus-within) .v2-card__tray {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .v2-card:hover .v2-card__img {
    transform: scale(1.03);
  }
}

@media not ((hover: hover) and (pointer: fine)) {
  .v2-card__tray {
    position: static;
    justify-content: flex-start;
    padding: 12px 0 0;
    border: 0;
    background: none;
  }

  .v2-card__body {
    padding-top: 12px;
  }
}

/* ---------- Wariant ?swatches=below: próbki stale pod zdjęciem (także z kursorem) ----------
   Rytm: zdjęcie → 12 → rząd próbek 24 (od lewej, „+N” obok; należy do zdjęcia, bo je przebarwia) → 16 →
   gwiazdki → nazwa…; bez tła i obrysu tacki, zdjęcie dalej rośnie na hover. Linia „+ N tkanin i M wykończeń”
   powtarzałaby rząd próbek, więc przy próbkach znika (zostaje wymiar u kart bez próbek). */
html[data-v2-swatches='below'] .v2-card__tray {
  position: static;
  justify-content: flex-start;
  padding: 12px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

html[data-v2-swatches='below'] .v2-card__tray.is-empty {
  pointer-events: none;
}

html[data-v2-swatches='below'] .v2-card__body {
  padding-top: 16px;
}

html[data-v2-swatches='below'] .v2-card:has(.v2-card__tray:not(.is-empty)) .v2-card__options {
  display: none;
}