/* public/assets/css/shop-cards.css — the read-only product cards shared by
   the landing page ("What we sell") and the shop page (shop/). Uses the
   landing page's colour tokens (--plum, --lilac …). */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;text-align:left}
.pcard{background:#fff;color:var(--ink);display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(20,6,30,.25);transition:.35s;position:relative}
.pcard:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(20,6,30,.35)}
.pcard .pic{aspect-ratio:4/3;background:linear-gradient(170deg,#efe6f6,#cdb5e0);position:relative;overflow:hidden;display:grid;place-items:center}
.pcard .pic img{width:100%;height:100%;object-fit:cover;transition:.6s}
.pcard:hover .pic img{transform:scale(1.05)}
.pcard .pic .ph{font-family:"Cormorant Garamond",serif;font-size:3.4rem;color:var(--plum);opacity:.55}
.pcard .tag{position:absolute;top:12px;left:12px;background:var(--plum-deep);color:#fff;font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;padding:5px 9px}
.pcard .body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1;border-top:3px solid var(--lilac)}
.pcard .cat{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.pcard h3{font-size:1.35rem;color:var(--plum-deep);line-height:1.2}
.pcard .desc{font-size:.8rem;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .foot{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:1px dashed #d9c8e6}
.pcard .price{font-family:"Space Mono",monospace;font-size:.95rem;color:var(--plum)}
.pcard .was{font-family:"Space Mono",monospace;font-size:.68rem;color:var(--muted);text-decoration:line-through;margin-right:6px}
.pcard .stock{font-size:.68rem;display:inline-flex;align-items:center;gap:6px;color:var(--muted);white-space:nowrap}
.pcard .stock i{width:7px;height:7px;border-radius:50%;background:#9b5de5}
.pcard .stock.out i{background:#c4b5cf}
.pcard.clickable{cursor:pointer}
.pcard.clickable:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* Phones: two cards a row, so more than one product fits on the screen. */
@media (max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  .pcard .body{padding:12px 12px 14px;gap:4px}
  .pcard h3{font-size:1.08rem}
  .pcard .desc{display:none}
  .pcard .tag{top:8px;left:8px;font-size:.5rem}
  .pcard .foot{flex-direction:column;align-items:flex-start;gap:2px;padding-top:8px}
  .pcard .price{font-size:.82rem}
  .pcard .pic .ph{font-size:2.4rem}
}