/* ============================================================
   Shared product card — pc-card
   Loaded once per page by resources/views/frontend/partials/cards/product_card.blade.php.

   A copy of the homepage rows_v2 card (kh-card in homepage-rows.css),
   renamed pc-card and given its own values, so it works on any page
   and never affects the homepage.

   Square image, one-line title, price line, tag line under it (height
   reserved, so every card in a row is the same height). The whole card
   is the link: the title link stretches over the card; heart + compare
   sit above it.

   The page's own layout decides the card's width (grid, rail, columns).
   ============================================================ */

/* ---------- tokens ---------- */

.pc-card {
  --pc-ink: #17150f;
  --pc-body: #4d4740;
  --pc-muted: #8b857c;
  --pc-line: #e6e4e0;
  --pc-img: #f7f6f4;
  --pc-radius: 8px;
  --pc-sale: #b3341f;
  --pc-flag-bg: #17a2b8;        /* Free Shipping */
  --pc-flag-ink: #fff;
  --pc-flag-digital: #B0409E;   /* Digital Download */
}

/* ---------- card ---------- */

.pc-card,
.pc-card *,
.pc-card *::before,
.pc-card *::after { box-sizing: border-box; }

.pc-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--pc-radius);
  font-family: 'Poppins', sans-serif;
  color: var(--pc-body);
  -webkit-font-smoothing: antialiased;
}
.pc-card__media img { transition: transform .35s ease; } .pc-card:hover .pc-card__media img { transform: scale(1.05); }

/* ---------- photo ---------- */

.pc-card__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--pc-radius);
  background: var(--pc-img);
  overflow: hidden;
  flex: none;
}
.pc-card__media img { display: block; width: 100%; height: 100%; max-width: 100%; }
.pc-card__media--cover img { object-fit: cover; }
.pc-card__media--contain img { object-fit: contain; }

.pc-card__disc {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  background: var(--pc-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 8px;
}

/* ---------- wishlist + compare ---------- */

.pc-card__acts {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
}
.pc-card:hover .pc-card__acts,
.pc-card:focus-within .pc-card__acts { opacity: 1; }
/* Touch devices: hidden (wishlist + compare stay on the product page). */
@media (hover: none) {
  .pc-card__acts { display: none; }
}

.pc-card__act {
  width: 36px;
  height: 36px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--pc-line);
  border-radius: 0;
  color: var(--pc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pc-card__act:hover { border-color: var(--pc-ink); }
.pc-card__act svg { width: 17px; height: 17px; }

/* ---------- text ---------- */

.pc-card__title {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-card .pc-card__link,
.pc-card .pc-card__link:hover { color: inherit; text-decoration: none; }
/* Stretched link: covers the whole card (positioned against .pc-card). */
.pc-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.pc-card__line { margin-top: 2px; min-height: 24px; display: flex; align-items: center; }
/* Tag line under the price. Height reserved either way, so cards with
   and without a tag are the same height. */
.pc-card__flags { margin-top: 2px; min-height: 20px; }
.pc-card__price { display: flex; align-items: baseline; gap: 8px; }
.pc-card__now { font-size: 18px; font-weight: 500; color: var(--pc-ink); }
.pc-card__was { font-size: 13px; color: var(--pc-muted); text-decoration: line-through; }

/* Small side inset so text doesn't sit on the edge. */
.pc-card__title,
.pc-card__line,
.pc-card__flags { padding-inline: 6px; }

/* ---------- tags ---------- */

.pc-flag {
  display: inline-block;
  background: var(--pc-flag-bg);
  color: var(--pc-flag-ink);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 3px 6px;
  white-space: nowrap;
}
.pc-flag--digital { background: var(--pc-flag-digital); color: #fff; }

/* ---------- compact size ----------
   Same card, tighter details, for narrow cards. */

.pc-card--compact .pc-card__now { font-size: 16px; }
.pc-card--compact .pc-card__was { font-size: 12px; }
.pc-card--compact .pc-card__disc { font-size: 11px; padding: 3px 6px; }
.pc-card--compact .pc-card__act { width: 30px; height: 30px; }
.pc-card--compact .pc-card__act svg { width: 15px; height: 15px; }
/* Korners Pick is not shown on compact cards. */
.pc-card--compact .kp-badge--card { display: none; }