/* ── STONE SKIN CARDS ──
   Product cards on the collection pages (marble, granite, quartz, porcelain,
   travertine, onyx) show only the stone's own texture as a square tile with
   the name underneath, so every grid looks even. The texture is the product's
   "-swatch.webp" image, which sits next to its other photos. */

body a.gcard,
body a.mcard{background:transparent;border:none;border-radius:0;overflow:visible;box-shadow:none;display:block;text-decoration:none}
body a.gcard:hover,
body a.mcard:hover{transform:translateY(-4px);box-shadow:none;border-color:transparent}

body a.gcard .card-photos,
body a.mcard .mcard-photo{height:auto;aspect-ratio:1/1;border-radius:var(--radius-lg,6px);border:1px solid rgba(26,22,18,0.12);box-shadow:0 2px 10px rgba(26,22,18,0.06);transition:box-shadow 0.2s,border-color 0.2s}
body a.gcard:hover .card-photos,
body a.mcard:hover .mcard-photo{box-shadow:0 12px 28px rgba(26,22,18,0.16);border-color:rgba(184,146,42,0.55)}
body a.gcard .card-photos img,
body a.mcard .mcard-photo img{width:100%;height:100%;object-fit:cover;display:block}

body a.gcard .card-info,
body a.mcard .mcard-body{padding:10px 4px 0;text-align:center}
body a.gcard .card-name,
body a.mcard .mcard-name{font-size:15px;margin:0;line-height:1.3}

/* Texture only: details stay on each product's own page */
body a.gcard .card-origin,
body a.gcard .card-tags,
body a.gcard .card-bottom,
body a.gcard .card-desc-short,
body a.gcard .size-badge,
body a.mcard .mcard-badge,
body a.mcard .mcard-demand,
body a.mcard .mcard-num,
body a.mcard .mcard-origin,
body a.mcard .mcard-colors,
body a.mcard .mcard-desc,
body a.mcard .mcard-keys,
body a.mcard .mcard-footer{display:none}

/* Two tiles per row on phones keeps the grid even */
@media(max-width:480px){
  body #graniteGrid,body #porcelainGrid,body #travGrid,body #marbleListGrid{grid-template-columns:repeat(2,1fr);gap:14px}
  body a.gcard .card-name,body a.mcard .mcard-name{font-size:13px}
}