/* ==========================================================================
   Karta produktu – stały kafelek 3:4, obraz pokazany w całości bez kadrowania
   ========================================================================== */

:root{
  --tile-w: 3;
  --tile-h: 4;
  --tile-ratio-percent: calc(var(--tile-h) / var(--tile-w) * 100%); /* 133.333% */
}

.product-card {
  --title-lines: 2;
  --title-lh: 1.3;
  /* Jednolity, niewidoczny margines wokół każdego zdjęcia (jak ramka w Allegro).
     Procent liczony względem szerokości kafelka -> równy odstęp ze wszystkich stron. */
  --image-pad: 8%;
  display: flex;
  flex-direction: column;
  border: 0;
  box-shadow: none;
}
.product-card:hover { cursor: pointer; }

.product-card .card-body {
  padding: .75rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  min-height: 0;
  border: 0;
}

/* ---------- Kafelek obrazu: stałe proporcje 3:4 ---------- */

/* Fallback przez padding-top (działa wszędzie) */
.product-image-wrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--image-bg, #fff);
}
.product-image-wrapper::before{
  content: "";
  display: block;
  padding-top: var(--tile-ratio-percent); /* 3:4 => 133.333% */
}

/* Preferuj native aspect-ratio, wyłącz padding, gdy dostępny */
@supports (aspect-ratio: 1) {
  .product-image-wrapper { aspect-ratio: var(--tile-w) / var(--tile-h); } /* 3/4 */
  .product-image-wrapper::before { content: none; padding-top: 0; }
}

/* Wnętrze kafelka – płótno na tła */
.product-image-inner{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: none;
}

/* Obrazy jako prawdziwe <img> z object-fit: contain — pełne zdjęcie bez kadrowania */

.product-image-inner img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--image-pad, 8%);
  object-fit: contain;
  object-position: center center;
  transition: opacity .3s ease-in-out;
}

.product-image-inner .img-hover{
  opacity: 0;
}

.product-image-inner.has-hover:hover .img-hover{
  opacity: 1;
}
.product-image-inner.has-hover:hover .img-main{
  opacity: 0;
}

/* ---------- Tytuł ---------- */

.product-title{
  font-size: .85rem;
  margin-bottom: .25rem;
  text-transform: uppercase;
  font-weight: 400;
  color: inherit;

  line-height: var(--title-lh);
  height: calc(var(--title-lines) * var(--title-lh) * 1em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: var(--title-lines);
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

@supports not (-webkit-line-clamp: 2) {
  .product-title{
    overflow: hidden;
    height: calc(2 * 1.3em);
    line-height: 1.3;
  }
}

/* ---------- Badges ---------- */

.badges{ display:flex; gap:.5rem; }
.badges .badge{
  padding:.35rem .65rem;
  font-size:.7rem;
  border-radius:.25rem;
  background:#fff;
  font-weight:700;
}
.badge-nowosc{ color:#000; }
.badge-promocja{ color:#d60b52; }

/* ---------- Ceny ---------- */

.product-price .sale-price{ font-size:1rem; font-weight:600; color:#d60b52; }
.product-price .regular-price del{ font-size:.85rem; color:#606060; font-weight:400; }
.product-price .text-dark{ color:#111; }

.lowest-price{ font-size:.6rem; color:#666; line-height:1.2; }

/* ---------- Ikona ulubionych ---------- */

.favorite-icon i{
  font-size:1.25rem; color:#888; cursor:pointer; transition:color .2s ease;
}
.favorite-icon i:hover{ color:#e6007e; }
.favorite-icon.is-favorite i{ color:#e6007e; }
.favorite-icon.is-favorite i:hover{ color:#888; }

/* ---------- Przycisk ---------- */

.custom-product-button{
  border-radius:0; width:100%; display:block;
}

/* ---------- Siatka ---------- */

.product-card-row [class*="col"]{ display:flex; }
.product-card-row [class*="col"] > .product-card{ flex:1 1 auto; }