/* ============================================================
   Shared product tile — pt-tile
   Loaded once per page by
   resources/views/frontend/partials/cards/product_tile.blade.php.

   A square product photo with an optional discount badge (top-left).
   No title, price, buttons or Korners Pick.
   The page's own layout decides the tile's width; it is always square.
   ============================================================ */

.pt-tile {
  --pt-radius: 8px;
  --pt-img: #f7f6f4;
  --pt-sale: #b3341f;

  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--pt-radius);
  background: var(--pt-img);
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  box-sizing: border-box;
}
.pt-tile img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
.pt-tile--cover img { object-fit: cover; }
.pt-tile--contain img { object-fit: contain; }

/* hover (linked tiles): gentle photo zoom, stays inside the tile */
a.pt-tile img { transition: transform .35s ease; }
a.pt-tile:hover img { transform: scale(1.05); }

/* discount badge: top-left, same colour as the product card's */
.pt-tile__disc {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--pt-sale);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 3px 6px;
}