/* ==========================================================================
   Kumaas — product-card.css  (Shop, collections, Home rails)
   ========================================================================== */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-5);
  list-style: none;
}
.product-grid .skeleton { aspect-ratio: 3 / 4; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pcard__ph-text { font-size: 10px; letter-spacing: 0.1em; } }
@media (max-width: 760px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); } }

.pcard { position: relative; }
.pcard__link { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; }

.pcard__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-cream);
}
.pcard__media > img,
.pcard__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
.pcard__link:hover .pcard__media > img,
.pcard__link:hover .pcard__placeholder { transform: scale(1.035); }

/* Placeholder art for products without photos */
.pcard__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tint) 34%, var(--c-ivory)) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 16%, var(--c-ivory)), color-mix(in srgb, var(--tint) 30%, var(--c-cream)));
}
.pcard__ph-mark {
  width: 34%;
  max-width: 96px;
  color: color-mix(in srgb, var(--tint) 75%, var(--c-wine));
  opacity: 0.55;
}
.pcard__ph-text {
  padding-inline: var(--sp-3);
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tint) 45%, var(--c-wine));
  opacity: 0.8;
}

.pcard__badges {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.pbadge {
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--c-ivory);
  color: var(--c-wine);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}
.pbadge--sale { background: var(--c-burgundy); color: var(--c-ivory); }
.pbadge--out { background: var(--c-text); color: var(--c-ivory); }
.pbadge--sample { background: var(--c-champagne); color: var(--c-wine); }

.pcard__body { display: flex; flex-direction: column; gap: 2px; }
.pcard__cat {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.pcard__title {
  font-family: var(--f-display);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--c-text);
}
.pcard__link:hover .pcard__title { color: var(--c-burgundy); }
.pcard__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: 2px; }
.price { font-weight: 500; color: var(--c-text); }
.price--sale { color: var(--c-burgundy); font-weight: 600; }
.price--was { font-size: var(--fs-sm); color: var(--c-muted); }
.pcard__meta { display: flex; align-items: center; gap: var(--sp-3); min-height: 18px; margin-top: var(--sp-1); }
.pcard__swatches { display: flex; gap: 5px; list-style: none; }
.pcard__swatches li {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(36, 25, 28, 0.18);
}
.pcard__stock { font-size: var(--fs-xs); color: var(--c-burgundy); }

.pcard.is-out .pcard__media > img,
.pcard.is-out .pcard__placeholder { filter: grayscale(0.4); opacity: 0.75; }