/* Product cards, shared by sales.html search results and the per-category
   listings under /catalogue/. These used to live only inside sales.html, which
   was fine while sales.html was the only page that showed a product card. */

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1.25rem; margin-top:1.5rem; }
.product-card { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--c-line); border-radius:18px; background:var(--c-surface); transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.product-card:hover { transform:translateY(-4px); border-color:var(--c-accent); box-shadow:0 8px 30px rgba(0,0,0,.06); }
.product-media { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; overflow:hidden; background:var(--c-plate); }
.product-media img { width:100%; height:100%; padding:8%; object-fit:contain; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.product-card:hover .product-media img { transform:scale(1.045); }
.product-body { display:flex; flex:1; flex-direction:column; padding:1.15rem 1.35rem 1.35rem; border-top:1px solid var(--c-line-soft); background:var(--c-surface-2); }
.product-body h3 { margin:0 0 .55rem; font-family:'Space Grotesk',Arial,sans-serif; font-weight:500; font-size:.98rem !important; letter-spacing:-.02em; line-height:1.3 !important; }

/* The heading is the link, and its ::after covers the card. Previously a
   separate invisible <a> was stretched over the card with its text pushed off
   screen by a text-indent, which repeated the product name to a screen reader
   and left the heading itself unlinked. */
.product-card__link { color:var(--c-ink); text-decoration:none; }
.product-card__link::after { position:absolute; inset:0; z-index:1; content:""; }
.product-card:hover .product-card__link { color:var(--c-accent); }
.product-card__link:focus-visible { outline:none; }
.product-card:focus-within { border-color:var(--c-accent); outline:2px solid var(--c-accent); outline-offset:3px; }

.product-body p { margin:0; color:var(--c-sub); font-size:.8rem; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-body .brand-mark { display:flex; align-items:center; gap:.45rem; margin:auto 0 0; padding-top:.85rem; overflow:hidden; color:var(--c-sub); font:500 .6rem 'IBM Plex Mono',monospace; letter-spacing:.09em; line-height:1.2; text-transform:uppercase; -webkit-line-clamp:none; }
.brand-mark__logo { flex-shrink:0; width:18px; height:18px; object-fit:contain; }
.brand-mark__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; }
.product-view { color:var(--c-accent); font:500 .66rem 'IBM Plex Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }
/* Above the card-covering ::after, so it stays clickable in its own right. */
.card-contact { position:relative; z-index:2; flex-shrink:0; padding:.5rem .85rem; border:1px solid var(--c-line-firm); border-radius:999px; background:var(--c-surface); color:var(--c-ink); font:500 .62rem 'IBM Plex Mono',monospace; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; transition:background .25s ease,border-color .25s ease,color .25s ease; }
.card-contact:hover { background:var(--c-accent-fill); border-color:var(--c-accent-fill); color:var(--c-on-accent); }

@media (max-width:640px) {
    .product-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
    .product-media { aspect-ratio:4 / 3; }
    .product-media img { padding:6%; }
    .product-body { padding:1rem 1.1rem 1.1rem; }
    .product-body h3 { font-size:1rem !important; }
}