.cat-grid{display:grid;grid-template-columns:repeat(var(--cat-grid-cols,6),minmax(0,1fr));gap:var(--cat-grid-gap,16px);width:100%}
@media (max-width:1200px){.cat-grid{grid-template-columns:repeat(var(--cat-grid-cols-md,3),minmax(0,1fr))}}
@media (max-width:768px){.cat-grid{grid-template-columns:repeat(var(--cat-grid-cols-sm,2),minmax(0,1fr))}}

.cat-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;color:#111827;isolation:isolate;transform:translateZ(0);aspect-ratio:var(--cat-card-ratio,1/1);min-height:110px}
.cat-card:focus{outline:2px solid #111827;outline-offset:2px}

/* Fallback if aspect-ratio unsupported (older browsers/builders) */
@supports not (aspect-ratio: 1/1){
  .cat-card{height:0;padding-top:calc(100% / (1 / 1));}
  .cat-card{--_ratio: var(--cat-card-ratio,1/1)}
  /* compute padding from custom ratio (W/H). simple presets */
  .cat-grid[style*="1 / 1"] .cat-card{padding-top:100%}
  .cat-grid[style*="4 / 3"] .cat-card{padding-top:75%}
  .cat-grid[style*="5 / 4"] .cat-card{padding-top:80%}
  .cat-grid[style*="3 / 2"] .cat-card{padding-top:66.6667%}
  .cat-grid[style*="16 / 9"] .cat-card{padding-top:56.25%}
}

.cat-bg{position:absolute;inset:0;background:var(--cat-color,#2563eb);opacity:1;z-index:1}
.cat-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;mix-blend-mode:multiply;opacity:.35;transition:transform .35s ease,opacity .35s ease}
.cat-info{position:absolute;left:14px;bottom:12px;right:14px;z-index:3;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25);display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cat-title{margin:0;font-size:16px;line-height:1.2;font-weight:700}
.cat-count{font-size:12px;opacity:.9}
.cat-card:hover .cat-img{transform:scale(1.06);opacity:.45}
.cat-card:hover{filter:drop-shadow(0 8px 18px rgba(0,0,0,.08))}