/* Public storefront — page-specific styles layered on styles.css */

.hero { padding: 2.4rem 0 1.6rem; text-align: center; }
.hero h1 { font-size: 1.9rem; }
.hero p { color: var(--slate); max-width: 46ch; margin: 0 auto; }

.store-toolbar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.4rem; align-items: center; }
.store-toolbar select, .store-toolbar input { min-height: 42px; width: auto; flex: 1 1 160px; }
.store-toolbar .count { color: var(--slate); font-size: .85rem; margin-left: auto; white-space: nowrap; }

.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.vcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); cursor: pointer; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease;
}
.vcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.vcard .vc-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-alt); }
.vcard .vc-photo.empty { display: grid; place-items: center; color: var(--slate); font-size: .85rem; }
.vcard .vc-body { padding: 1rem 1.1rem 1.1rem; }
.vcard .vc-title { font-weight: 800; font-size: 1.02rem; margin-bottom: .2rem; }
.vcard .vc-meta { color: var(--slate); font-size: .84rem; margin-bottom: .5rem; }
.vcard .vc-price { font-size: 1.15rem; font-weight: 800; color: var(--brand); }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--slate); }

/* Detail view */
.detail-back { display: inline-flex; align-items: center; gap: .3rem; margin: 1.2rem 0; color: var(--brand); font-weight: 700; text-decoration: none; font-size: .9rem; }
.vdetail { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: start; margin-bottom: 2rem; }
@media (max-width: 760px) { .vdetail { grid-template-columns: 1fr; } }
.vdetail-main-photo { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); background: var(--bg-alt); cursor: zoom-in; }
.vdetail-thumbs { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.vdetail-thumbs img { width: 66px; height: 50px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; }
.vdetail-thumbs img.active { border-color: var(--brand); }
.vdetail h1 { font-size: 1.5rem; margin-bottom: .1rem; }
.vdetail .vd-price { font-size: 1.6rem; font-weight: 800; color: var(--brand); margin: .3rem 0 1rem; }
.vd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .8rem; font-size: .9rem; margin-bottom: 1.2rem; }
.vd-specs dt { color: var(--slate); }
.vd-specs dd { margin: 0; font-weight: 700; }

.inquiry-ok { color: var(--ok); font-weight: 700; }

footer.site-footer { border-top: 1px solid var(--line); margin-top: 2rem; }
footer.site-footer .footer-links a { color: var(--slate); text-decoration: none; font-size: .85rem; }
footer.site-footer .footer-links a:hover { color: var(--brand); }