/* Product cards and the product grid (collection funnel, 2026-10-22). Loaded after site.css on every page, because cards
   also show on the home page and in the product page rails. Listing-page-only rules: listing-page.css (2026-10-23).
   Tokens come from site.css (:root). No inline styles anywhere (CSP style-src 'self'). */


/* ---------- Grid extras and product card ---------- */
.lst .product-grid { gap: 26px 8px; }
@media (min-width: 900px) { .lst .product-grid { gap: 48px 22px; } }
.product-card { scroll-margin-top: 130px; }
.pc-frame { position: relative; }
.pc-frame .sale-badge { position: absolute; top: 10px; left: 10px; z-index: 3; pointer-events: none; }
.pc-dots { display: none; }
@media (hover: none) {
  /* Phones: a card with two photos swipes between them; the dots follow the scroll (listing.js). */
  .pc-media.has-alt { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; z-index: 2; -webkit-overflow-scrolling: touch; }
  .pc-media.has-alt::-webkit-scrollbar { display: none; }
  .pc-media.has-alt img { position: relative; inset: auto; flex: 0 0 100%; scroll-snap-align: start; opacity: 1; }
  .pc-dots { position: absolute; left: 50%; bottom: 9px; z-index: 3; display: flex; gap: 5px; transform: translateX(-50%); pointer-events: none; }
  .pc-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(251, 247, 242, 0.55); box-shadow: 0 0 2px rgba(23, 19, 26, 0.35); transition: background 0.2s ease; }
  .pc-dots i.is-on { background: var(--bg); }
}

/* Branded placeholder for a product whose photos are still being made: ivory, a gold hairline frame, a line-drawn
   hanger, the wordmark and the colour of the card. Never a blank grey box. */
.pc-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  background: linear-gradient(180deg, #F7F2EB 0%, #EEE6DA 100%); color: var(--muted); text-align: center; }
.pc-ph::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(201, 164, 106, 0.5); pointer-events: none; }
.pc-ph-art { width: 46%; max-width: 120px; height: auto; fill: none; stroke: var(--soft); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.pc-ph-mark { font-family: var(--head); font-size: 0.8rem; font-weight: 560; text-transform: uppercase; letter-spacing: 0.3em; margin-right: -0.3em; color: var(--text); }
.pc-ph-note { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--soft); }
.pc-ph-dot { width: 12px; height: 12px; }
.pc-ph-dot circle { stroke: rgba(23, 19, 26, 0.2); stroke-width: 1; }
@media (min-width: 900px) { .pc-ph-mark { font-size: 0.92rem; } .pc-ph-note { font-size: 0.62rem; } }

.pc-rating { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 0.72rem; color: var(--muted); line-height: 1; }
.pc-stars { display: inline-flex; gap: 1px; }
.pc-stars svg { width: 11px; height: 11px; fill: var(--border); }
.pc-stars svg.is-on { fill: var(--text); }
.pc-more { font-size: 0.66rem; line-height: 12px; color: var(--muted); }
@media (min-width: 900px) { .pc-more { line-height: 14px; } }