/* Grid alignment */
.product-grid{ display:grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); }

/* Two columns on small screens */
@media (max-width: 640px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* Card basics */
.pc{ position:relative; display:flex; flex-direction:column; overflow:hidden; }
.pc__link{ position:absolute; inset:0; z-index:1; }
.pc__media{ position:relative; }
.pc__img, .pc__img--alt{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .25s ease; }
.pc__img--alt{ position:absolute; inset:0; opacity:0; }
@media (hover:hover){
  .pc:hover .pc__img--alt{ opacity:1; }
}

/* Badges */
.pc__badges{ position:absolute; top:8px; left:8px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.pc-badge{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--badge); color:var(--on-brand); box-shadow: var(--shadow); }
.pc-badge--sale{ background: var(--sale); }
.pc-badge--new{ background: var(--brand); }
.pc-badge--best{ background: #333; }
.pc-badge--oos{ background: var(--muted); }

/* Wishlist */
.pc__wish{ position:absolute; top:8px; right:8px; z-index:2; background:var(--on-brand); border:1px solid var(--border); width:36px; height:36px; border-radius:999px; display:grid; place-items:center; cursor:pointer; }
.pc__wish[aria-pressed="true"]{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }

/* Body */
.pc__body{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.pc__title{ margin:0 0 6px; font-size:14px; line-height:1.35; min-height:calc(1.35em * 2); }
.pc__rating{ display:flex; align-items:center; gap:6px; color: var(--muted); font-size:12px; }
.pc__rating-num{ font-variant-numeric: tabular-nums; }
.pc__price{ display:flex; align-items:baseline; gap:8px; font-weight:800; }
.pc__cta{ margin-top:auto; }

/* Stars (mask technique or inline svg) */
.pc__rating-stars{ --s:14px; width: calc(var(--s)*5); height: var(--s); display:inline-block; background-repeat:no-repeat; background-size: contain; }

/* Focus visibility */
.pc:focus-within{ outline:2px solid var(--brand); outline-offset:2px; }

/* Disabled state */
.pc--oos .pc__atc{ opacity:.6; pointer-events:none; }

/* Dim image when out of stock */
.pc.is-oos .pc__img,
.pc.is-oos .pc__img--alt{ opacity:.5; }

/* Improve badge contrast on bright images */
.pc-badge{
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  backdrop-filter: saturate(1.2);
}

/* Card hover lift (desktop only) */
@media (hover:hover){
  .pc:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }
}
.pc{ transition: transform .18s ease, box-shadow .18s ease; }

/* Make new price pop and old price smaller */
.price--new{ font-size: 16px; font-weight: 800; }
.price--old{ font-size: 13px; opacity: .75; }
.pc__price{ gap: 6px; align-items: baseline; font-weight:800; }

/* Star size consistency + motion preference */
.pc__rating-stars svg{ width:14px; height:14px; }
@media (prefers-reduced-motion: reduce){
  .pc, .pc__img--alt{ transition: none !important; }
}

/* Wishlist focus ring */
.pc__wish:focus{ outline:2px solid var(--brand); outline-offset:2px; }


/* === Product Card Revamp (UX pass) === */

/* Responsive grid */
.product-grid{
  display:grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 900px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}

/* Card surface + hover */
.pc{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
@media (hover:hover){
  .pc:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); border-color: rgba(30,136,229,.25); }
}

/* Media area with fixed aspect */
.pc__media{
  position:relative;
  aspect-ratio: 1 / 1;
  background:var(--on-brand);
}
.pc__img, .pc__img--alt{
  width:100%; height:100%; object-fit:cover; display:block;
}
.pc__img--alt{ position:absolute; inset:0; opacity:0; transition: opacity .25s ease; }
@media (hover:hover){ .pc:hover .pc__img--alt{ opacity:1; } }

/* Wishlist button */
.pc__wish{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--border); background:var(--on-brand); color: var(--muted);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.pc__wish[aria-pressed="true"]{ color: var(--danger); border-color: rgba(229,57,53,.25); }
.pc--oos .pc__img{ filter: grayscale(1) opacity(.7); }

/* Body */
.pc__body{ padding:10px; display:flex; flex-direction:column; gap:6px; }
.pc__title{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  color: var(--text);
  text-transform: none;
}
/* Clamp helper */
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden; }

/* Rating row */
.pc__rating{ display:flex; align-items:center; gap:6px; color: var(--muted); min-height: 22px; }
.pc__rating-stars{ display:inline-flex; gap:2px; color: var(--accent); }
.pc__rating-stars svg{ width:14px; height:14px; display:block; }
.pc__rating-num{ font-weight:600; color: var(--text); }
.pc__rating-count{ color: var(--muted); font-size: var(--font-size-100); }

/* Price row */
.pc__price{ display:flex; gap:6px; align-items: baseline; margin-top: 4px; font-weight:800; }
.price--new{ font-size: 16px; font-weight: 800; color: var(--text); }
.price--old{ font-size: 13px; opacity:.75; text-decoration: line-through; }

/* CTA area pinned to bottom if used */
.pc__cta{ margin-top: auto; display:flex; gap:8px; position:relative; z-index:2; }
.pc__cta .btn-modern{ min-height:40px; width:100%; display:flex; align-items:center; justify-content:center; gap:6px; }


.badge-warning{ background:var(--danger); color:var(--on-brand); }

.badge-brand{ background:var(--brand); color:var(--on-brand); }

.badge-danger{ background:var(--warning); color:var(--on-brand); }

.badge-exclusive{ background:var(--info); color:var(--on-brand); }