.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.tiles.v-product{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.tile{position:relative;display:flex;overflow:hidden;border-radius:var(--radius);transition:background .2s,color .2s}.tile .t-img{display:grid;place-items:center;text-align:center}.tile .t-img .icon{width:64px;height:64px;stroke-width:1.1}.tile .t-img img{width:100%;height:100%;object-fit:cover}.tile .t-name{font-weight:700;line-height:1.2}.tile .t-count{font-size:13px;font-weight:600}.v-photo .tile{align-items:flex-end;aspect-ratio:16/9;padding:clamp(12px,1.3vw,22px);background:var(--dark);color:#fff}.v-photo .tile .t-img{position:absolute;inset:0;color:#ffffff8c;transition:transform .4s}.v-photo .tile:after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(to top,#000000b8,#0000)}.v-photo .tile:hover .t-img{transform:scale(1.04)}.v-photo .tile .t-name{position:relative;z-index:1;max-width:100%;padding-right:4px;font-family:var(--font-display);font-size:clamp(14px,1.3vw,22px);overflow-wrap:break-word;hyphens:auto}.v-photo .tile .t-count{position:absolute;top:clamp(8px,.9vw,14px);right:clamp(8px,.9vw,14px);z-index:1;padding:4px 9px;border-radius:8px;background:var(--accent);color:#fff;font-size:clamp(11px,.75vw,13px)}.v-product .tile{flex-direction:column;gap:14px;align-items:center;padding:20px 16px 22px;background:var(--surface);text-align:center}.v-product .tile .t-img{width:100%;aspect-ratio:4/3;color:var(--muted)}.v-product .tile .t-img img{object-fit:contain}.v-product .tile .t-name{font-size:clamp(14px,1.05vw,18px);overflow-wrap:break-word;hyphens:auto}.v-product .tile .t-count{margin-top:-8px;color:var(--muted);font-weight:500}.v-product .tile:hover{background:var(--brand);color:#fff}.v-product .tile:hover .t-img,.v-product .tile:hover .t-count{color:#fffc}@media(max-width:1100px){.tiles.v-product{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:1024px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}@media(max-width:760px){.tiles,.tiles.v-product{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v-photo .tile{aspect-ratio:4/3}}