/* ============================================================
   PRODUCT CARD
   The most-repeated object on the site. Equal heights, image-led,
   with the spec line that makes a watch card worth reading.
   ============================================================ */
.p-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: var(--s-5);
}
.p-grid--4 { grid-template-columns: repeat(4, 1fr); }
.p-grid--3 { grid-template-columns: repeat(3, 1fr); }

.p-card {
  display: flex; flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.p-card:hover {
  border-color: var(--c-line-soft);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
}

/* --- Media --- */
.p-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-ice);
  overflow: hidden;
  flex: none;
}
.p-card__img {
  width: 100%; height: 100%; object-fit: contain;
  padding: var(--s-5);
  transition: opacity .35s var(--ease), transform .55s var(--ease);
}
/* Second shot fades in over the first — most products ship 5+ images */
.p-card__img--alt { position: absolute; inset: 0; opacity: 0; }
.p-card:hover .p-card__img--main { opacity: 0; }
.p-card:hover .p-card__img--alt { opacity: 1; }
.p-card:hover .p-card__img { transform: scale(1.035); }

/* --- Badges --- */
.p-card__badges {
  position: absolute; top: var(--s-3); left: var(--s-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px; z-index: 2;
}
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.badge--new { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.badge--auto { background: var(--c-navy); color: #fff; border-color: var(--c-navy); }
.badge--pick { background: var(--c-ice-deep); color: var(--c-navy-deep); border-color: #CCE4F0; }

/* --- Actions: wishlist + quick add, stacked top-right --- */
.p-card__actions {
  position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.p-card__act {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.96); border: 1px solid var(--c-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-ink-soft); box-shadow: var(--sh-2);
  opacity: 0; transform: translateX(6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.p-card:hover .p-card__act { opacity: 1; transform: none; }
.p-card__act:nth-child(2) { transition-delay: .03s; }
.p-card__act svg { width: 16px; height: 16px; }

.p-card__act.js-wish:hover { color: var(--c-sale); border-color: currentColor; }
.p-card__act.js-wish.is-on { color: var(--c-sale); }
.p-card__act.js-wish.is-on svg { fill: currentColor; animation: wish-pop .35s var(--ease); }
@keyframes wish-pop { 0%{transform:scale(1)} 45%{transform:scale(1.28)} 100%{transform:scale(1)} }

.p-card__act--cart { color: #fff; background: var(--c-navy); border-color: var(--c-navy); }
.p-card__act--cart:hover { background: var(--c-navy-deep); border-color: var(--c-navy-deep); }
.p-card__act--cart.is-added svg { animation: wish-pop .35s var(--ease); }

/* Touch devices have no hover, so the controls stay put */
@media (hover: none) {
  .p-card__act { opacity: 1; transform: none; }
}

/* --- Body --- */
.p-card__body {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1;
}
.p-card__coll {
  font-size: 10px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-navy);
}
.p-card__title {
  font-size: var(--t-base); font-weight: 600; line-height: 1.35;
  /* Two lines keeps every card the same height across a row */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}
.p-card:hover .p-card__title { color: var(--c-navy-deep); }

/* The spec strip — only fields the feed actually carries */
.p-card__specs {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: auto; padding-top: var(--s-2);
}
.spec-chip {
  font-size: 11px; color: var(--c-ink-soft);
  background: var(--c-ice); border: 1px solid var(--c-line-soft);
  padding: 3px 8px; border-radius: var(--r-sm);
  white-space: nowrap;
}
.spec-chip--accent { color: var(--c-navy-deep); background: var(--c-ice-deep); border-color: #D6E9F3; }

.p-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-3); margin-top: var(--s-2);
  border-top: 1px solid var(--c-line-soft);
}
.p-card__price {
  font-size: var(--t-md); font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.p-card__gender { font-size: 11px; color: var(--c-ink-soft); text-transform: capitalize; }

@media (max-width: 1080px) {
  .p-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .p-grid--4, .p-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* Two columns still reads well on a phone and halves the scrolling */
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
  .p-card__body { padding: var(--s-3); gap: 6px; }
  .p-card__img { padding: var(--s-3); }
  .p-card__title { font-size: var(--t-sm); min-height: 2.6em; }
  .p-card__price { font-size: var(--t-base); }
  /* One chip is enough at this width */
  .p-card__specs .spec-chip:nth-child(n+3) { display: none; }
}