.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.grid.exterior-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid .card,.grid .card:nth-child(n){display:flex;flex-direction:column;justify-content:flex-start;min-height:0;padding:0;overflow:hidden;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:20px;text-decoration:none}
.card-media{display:flex;width:100%;aspect-ratio:1/1;overflow:hidden;background:#f5f3ef}
.card-media img{display:block;width:100%;height:100%;min-width:0;object-fit:cover;transition:transform .3s ease}
.card-media.product-media{padding:12px;gap:4px;background:#f8f7f4}
.card-media.product-media img{object-fit:contain;flex:1;width:0}
.card-body{display:block;padding:18px;width:100%;flex:1}
.grid .card .tag{display:block;font-size:.875rem;letter-spacing:.045em;line-height:1.35;color:#6e7169;opacity:1}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.grid .card h2{font-size:1.2rem;line-height:1.3;margin:0;overflow-wrap:anywhere}
.grid .card .arrow{flex:0 0 34px;align-self:center;width:34px;height:34px}
.grid .card:hover,.grid .card:focus-visible{border-color:var(--amber);box-shadow:0 12px 28px rgba(17,18,15,.10)}
.grid .card:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.card:hover .card-media:not(.product-media) img{transform:scale(1.035)}
.exterior-grid .card-media{aspect-ratio:4/3}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.grid,.grid.exterior-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid .card{border-radius:14px}.card-body{padding:12px}.grid .card h2{font-size:1rem}.grid .card .tag{font-size:.875rem;letter-spacing:0;text-transform:none}.card-title{gap:6px}.grid .card .arrow{width:28px;height:28px;flex-basis:28px}.card-media.product-media{padding:5px}}
@media(prefers-reduced-motion:reduce){.grid .card,.card-media img{transition:none}.grid .card:hover,.card:hover .card-media img{transform:none}}