:root{
  --vt-card-radius: 16px;
  --vt-card-shadow: 0 6px 18px rgba(0,0,0,.08);
  --vt-accent: #0a5c90;
  --vt-muted: #f5f7fb;
  --vt-text: #111827;
}
.vt-grid { display:grid; gap: 20px; }
.vt-grid.vt-cols-4 { grid-template-columns: repeat(4, 1fr); }
.vt-grid.vt-cols-3 { grid-template-columns: repeat(3, 1fr); }
.vt-grid.vt-cols-2 { grid-template-columns: repeat(2, 1fr); }
.vt-grid.vt-cols-1 { grid-template-columns: 1fr; }
@media (max-width: 980px){ .vt-grid.vt-cols-4, .vt-grid.vt-cols-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 680px){ .vt-grid { grid-template-columns: 1fr; } }

/* Aspect ratios */
.vt-card .vt-image { width: 100%; border-radius: var(--vt-card-radius); overflow:hidden; position:relative; background: #e9eef5; }
.vt-ratio-16x9 .vt-card .vt-image { aspect-ratio: 16 / 9; }
.vt-ratio-4x3  .vt-card .vt-image { aspect-ratio: 4 / 3; }
.vt-ratio-1x1  .vt-card .vt-image { aspect-ratio: 1 / 1; }
.vt-ratio-3x4  .vt-card .vt-image { aspect-ratio: 3 / 4; }

.vt-card .vt-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.vt-card .vt-image:after{ content:""; position:absolute; inset:0; box-shadow: inset 0 -40px 80px rgba(0,0,0,.15); }

.vt-card { background:#fff; border-radius: var(--vt-card-radius); box-shadow: var(--vt-card-shadow); overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; }
.vt-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.vt-card .vt-body { padding: 14px 16px 16px; color:var(--vt-text); }
.vt-card .vt-title { font-weight: 700; margin: 6px 0 6px; font-size: 1.05rem; line-height:1.3; }
.vt-card .vt-meta { font-size:.92rem; color:#6b7280; display:flex; gap:10px; flex-wrap:wrap; }
.vt-card .vt-price { margin-top: 8px; font-weight: 700; color:var(--vt-accent); }

.vt-grid-filter { display:flex; gap:12px; margin-bottom:8px; align-items:center; flex-wrap:wrap; }
.vt-grid-filter a { padding:6px 10px; background: var(--vt-muted); border-radius: 999px; text-decoration:none; color:#374151; border:1px solid #e5e7eb; }
.vt-grid-filter a:hover { background:#eaf1f8; }

/* SINGLE */
.vt-hero { position:relative; border-radius: 20px; overflow:hidden; margin-bottom: 20px; }
.vt-hero .vt-hero-img { width:100%; height: 380px; object-fit:cover; }
.vt-detail-grid { display:grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 980px){ .vt-detail-grid { grid-template-columns: 1fr; } }
.vt-box { background:#fff; border-radius: 16px; box-shadow: var(--vt-card-shadow); padding: 16px 18px; }
.vt-box h3 { margin-top:0; }
.vt-specs { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
.vt-specs .line { display:flex; gap:8px; }

.vt-gallery { display:grid; grid-template-columns: repeat(3,1fr); gap:10px; }
.vt-gallery img { width:100%; aspect-ratio: 4/3; object-fit:cover; border-radius: 12px; cursor:pointer; }
@media (max-width: 720px){ .vt-gallery { grid-template-columns: repeat(2,1fr); } }

.vt-reserve label { display:block; font-size:.92rem; margin-bottom: 6px; }
.vt-reserve input[type="number"], .vt-reserve input[type="text"], .vt-reserve input[type="date"] { width:100%; padding:8px 10px; border:1px solid #e5e7eb; border-radius:10px; }
.vt-reserve .vt-qty-row { display:grid; grid-template-columns: 2fr 1fr 1.2fr 1.2fr; gap:8px; align-items:center; }
.vt-reserve .vt-qty-row span { font-size:.92rem; }
.vt-reserve .vt-summary { background: var(--vt-muted); border-radius: 12px; padding: 10px 12px; font-size:.95rem; }
.vt-reserve .vt-btn { width:100%; padding:12px 14px; border:none; border-radius: 12px; background: var(--vt-accent); color:#fff; font-weight:700; cursor:pointer; }
.vt-reserve .vt-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Lightbox */
.vt-lightbox { position: fixed; inset:0; background: rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; z-index: 99999; }
.vt-lightbox.open { display:flex; }
.vt-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.vt-lightbox .vt-close { position:absolute; top:12px; right:18px; background:#fff; border-radius: 999px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-weight:700; }