/* MARKETPLACE CARD — the one product card, shared by shop.html and the homepage marketplace band.
   Markup comes from marketplace-card.js. Inter for words, JetBrains Mono for figures, the same split
   the registry uses. Every text size is 12px or more (the site's type floor is 11.5px) and every
   button is 44px tall on a touch screen. */
.pc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #e4e4e4}
@media (max-width:900px){ .pc-row{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){
  .pc-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .pc-row .pc{flex:0 0 66%;scroll-snap-align:start}
}

.pc{display:flex;flex-direction:column;min-width:0;background:#fff;color:#111;text-align:left;
  border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;
  font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
.pc a.pc-media{position:relative;display:block;aspect-ratio:4/3;background:#f2f2ef;overflow:hidden;border:0;text-decoration:none;color:inherit}
.pc-media img{display:block;width:100%;height:100%;transition:transform .35s ease}
.pc-media img.is-photo{object-fit:cover}
.pc-media img.is-mark{object-fit:contain;padding:10% 16%;background:#fff}
.pc:hover .pc-media img.is-photo{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){ .pc-media img{transition:none} .pc:hover .pc-media img.is-photo{transform:none} }

.pc-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px}
.pc-ph b{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid #cbcbc3;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500;font-size:19px;letter-spacing:1px;color:#4f4f49}
.pc-ph i{font-style:normal;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#66665f;max-width:90%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pc-badge{position:absolute;top:10px;left:10px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  line-height:1.3;padding:4px 8px;background:#111;color:#fff}
.pc-badge.o{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #111}

.pc-body{display:flex;flex-direction:column;gap:4px;flex:1;padding:12px 14px 14px}
.pc-breeder{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#595959;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-name{margin:0;font-size:15px;line-height:1.3;font-weight:600;letter-spacing:.2px;text-transform:uppercase;color:#111;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-sub{min-height:19px;font-size:13px;line-height:1.45;color:#595959;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.pc-price{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:16px;font-weight:500;color:#111;
  font-variant-numeric:tabular-nums}
.pc-price.none{font-family:inherit;font-size:12px;font-weight:400;letter-spacing:1px;text-transform:uppercase;color:#6f6f6f}
.pc-pack{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:#595959;white-space:nowrap}

/* `.pc a.` on purpose: the homepage colours its links, and a bare class lost to that rule, so the
   band's button came out green while the Marketplace page's was black. One card, one look. */
.pc a.pc-cta{display:block;margin-top:10px;border:1px solid #111;padding:11px 8px;text-align:center;text-decoration:none;color:#111;background:#fff;
  font-size:12px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc a.pc-cta:hover{background:#111;color:#fff}
.pc a.pc-cta:focus-visible{outline:2px solid #111;outline-offset:2px}
@media (pointer:coarse){ .pc a.pc-cta{min-height:44px;display:flex;align-items:center;justify-content:center} }