/* Vialo card grid (2026-10-12): the Home / Explore card for the catalogue, house pages and the nebula Shop list. Markup = VN.card / card_html. */
:root{--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;--s10:40px;--sans:Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;--ink:#F6F3EE;--soft:#E7E7EA;--muted:#A3A6C2;--dim:#7C80A0}
/* ---- card grid for the catalogue and house pages (2026-10-11, page plan item 3): the Home / Explore card, one source. Markup = VN.card. */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s3);padding-top:var(--s2)}
.vgrid .card{display:block;position:relative;min-width:0;border-radius:10px;padding:var(--s2);margin:calc(var(--s2) * -1);transition:background .3s ease,box-shadow .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)}
.vgrid .card a{text-decoration:none;color:var(--ink)}
.vgrid .tile{background:#fff;border-radius:8px;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:var(--s3);position:relative}
.vgrid .tile img{max-width:100%;max-height:100%;object-fit:contain;display:block;opacity:1;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.vgrid .badge{position:absolute;left:var(--s2);top:var(--s2);font:700 12px/1 var(--sans);color:#5FD394;background:rgba(5,6,15,.88);border:1px solid rgba(95,211,148,.45);border-radius:3px;padding:var(--s1) var(--s2)}
.vgrid .meta{padding:var(--s3) 2px 0}
.vgrid .price{display:flex;align-items:baseline;gap:var(--s2);white-space:nowrap;font:700 18px/1.2 var(--sans);color:var(--ink)}
.vgrid .price s{font:400 13px var(--sans);color:var(--dim)}
/* 29 Oct (his call): perfume name first and bold, house second and muted, on every card */
.vgrid .name{margin-top:var(--s1);font:700 14px/1.25 var(--sans);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:var(--s10)}
.vgrid .house{margin-top:2px;font:400 13px/1.3 var(--sans);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:var(--s10)}
.vgrid .heart{position:absolute;right:2px;bottom:var(--s1);width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:0;color:var(--muted);cursor:pointer;padding:0}
.vgrid .heart svg{transition:transform .25s cubic-bezier(.2,.8,.2,1),fill .2s}
.vgrid .heart:active svg{transform:scale(.85)}
.vgrid .heart.on{color:#E5484D}.vgrid .heart.on svg{fill:currentColor;animation:vpop .35s ease}
@keyframes vpop{40%{transform:scale(1.3)}}
@media (min-width:768px){.vgrid{grid-template-columns:repeat(3,1fr);gap:var(--s7) var(--s4)}}
@media (min-width:1024px){.vgrid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1280px){.vgrid{grid-template-columns:repeat(5,1fr)}}
@media (min-width:1024px) and (max-width:1279px){#rows.vgrid{grid-template-columns:repeat(3,1fr)}}   /* beside the filter column: 3 across at 1024, 4 from 1280, so the cards keep the Home size */
@media (min-width:1280px){#rows.vgrid{grid-template-columns:repeat(4,1fr)}}   /* the catalogue list sits beside a 250 px filter column: 4 across keeps the cards the Home size */
@media (hover:hover) and (pointer:fine){
  .vgrid .card:hover{background:rgba(246,243,238,.045);box-shadow:0 22px 44px -14px rgba(0,0,0,.65),0 0 0 1px rgba(246,243,238,.08);transform:translateY(-2px)}
  .vgrid .card:hover .tile img{transform:translateY(-7px) scale(1.05)}
  .vgrid .card:hover .house{color:var(--soft)}
}
@media (prefers-reduced-motion:reduce){.vgrid .card,.vgrid .tile img{transition:none}.vgrid .card:hover{transform:none}.vgrid .card:hover .tile img{transform:none}.vgrid .heart.on svg{animation:none}}