:root {
    --yv-primary: #0f766e;
    --yv-primary-dark: #115e59;
    --yv-accent: #f59e0b;
    --yv-bg: #f8fafc;
    --yv-text: #0f172a;
}

body {
    background: var(--yv-bg);
    color: var(--yv-text);
}

.navbar-brand span,
.price,
.eyebrow {
    color: var(--yv-primary);
}

.btn-primary {
    --bs-btn-bg: var(--yv-primary);
    --bs-btn-border-color: var(--yv-primary);
    --bs-btn-hover-bg: var(--yv-primary-dark);
    --bs-btn-hover-border-color: var(--yv-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--yv-primary);
    --bs-btn-border-color: var(--yv-primary);
    --bs-btn-hover-bg: var(--yv-primary);
    --bs-btn-hover-border-color: var(--yv-primary);
}

.hero-section {
    background: radial-gradient(circle at top right, rgba(15, 118, 110, .18), transparent 35%), linear-gradient(135deg, #ffffff, #ecfeff);
}

.eyebrow {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .12em;
    font-size: .78rem;
}

.hero-card {
    background: #0f172a;
    color: white;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    padding: 1.15rem 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}

.hero-stat:last-child { border-bottom: 0; }
.hero-stat strong { font-size: 1.35rem; }
.hero-stat span { color: rgba(255,255,255,.72); }

.search-box { border: 1px solid rgba(15, 118, 110, .14); }

.listing-card { overflow: hidden; }
.listing-card a { color: inherit; text-decoration: none; }
.listing-card a:hover { color: var(--yv-primary); }

.listing-image {
    height: 220px;
    width: 100%;
    object-fit: cover;
    background: #e2e8f0;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.features span {
    background: #eef2f7;
    border-radius: 999px;
    padding: .35rem .65rem;
}

.detail-main-img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    background: #e2e8f0;
}

.thumb {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

.sticky-card { position: sticky; top: 90px; }
.preline { white-space: pre-line; }
.empty-state {
    background: white;
    border: 1px dashed #cbd5e1;
    color: #64748b;
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
}

.stat-card strong {
    display: block;
    font-size: 2rem;
}

@media (max-width: 768px) {
    .display-4 { font-size: 2.15rem; }
    .hero-section .lead { font-size: 1rem; }
    .listing-image { height: 180px; }
    .filters { padding: 1rem !important; }
}