/* The newer Nova site features (Design::modern(): new sites, sites with a builder design, and sites staff switch on).
   Loaded only there (layouts/main.php): other sites are unchanged. */

/* --- instant pages: pages cross-fade into each other, and a listing's photo grows into the ad page's photo --- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    .nv-gallery-main { view-transition-name: nv-ad-photo; }
    ::view-transition-old(nv-ad-photo), ::view-transition-new(nv-ad-photo) { height: 100%; object-fit: cover; }
    ::view-transition-group(nv-ad-photo) { animation-duration: .35s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
}

/* --- photos load over a soft shimmer instead of an empty box --- */
.nv-card-media, .nv-gallery-main, .nv-ds-spot-media { background-color: var(--nova-soft, #F4F5F7); }
@media (prefers-reduced-motion: no-preference) {
    .nv-card-media:has(img), .nv-ds-spot-media:has(img) {
        background-image: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
        background-size: 200% 100%; animation: nv-shimmer 1.4s linear infinite;
    }
    .nv-card-media img, .nv-ds-spot-media img { position: relative; }
}
@keyframes nv-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* --- listing cards: photos side by side (swipe on a phone, arrows on a computer), quick view, a saved heart --- */
.nv-card-strip { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.nv-card-strip::-webkit-scrollbar { display: none; }
.nv-card-strip > * { flex: 0 0 100%; scroll-snap-align: start; }
.nv-card-strip :is(img, picture) { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-card-step { position: absolute; top: 50%; z-index: 3; width: 30px; height: 30px; margin-top: -15px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; display: none; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.2); cursor: pointer; font: 700 16px/1 system-ui, sans-serif; }
.nv-card-step.is-prev { left: 8px; } .nv-card-step.is-next { right: 8px; }
@media (hover: hover) { .nv-card:hover .nv-card-step { display: flex; } }
.nv-card { position: relative; }
.nv-card-quick { position: absolute; top: 10px; left: 10px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #111; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; opacity: 0; transition: opacity .15s ease; }
.nv-card:hover .nv-card-quick, .nv-card-quick:focus-visible { opacity: 1; }
@media (hover: none) { .nv-card-quick { display: none; } }
.nv-quick { width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--nova-radius-lg, 18px); box-shadow: 0 30px 80px rgba(0,0,0,.35); background: var(--nova-white, #fff); color: var(--nova-ink, #111); overflow: auto; }
.nv-quick::backdrop { background: rgba(10,11,14,.55); }
.nv-quick-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.nv-quick-photos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; aspect-ratio: 4 / 3; background: var(--nova-soft, #F4F5F7); }
.nv-quick-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.nv-quick-text { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.nv-quick-text h2 { margin: 0; font-size: 22px; line-height: 1.2; }
.nv-quick-price { font-size: 26px; font-weight: 800; color: var(--nova-ink, #111); }
.nv-quick-meta, .nv-quick-fields { margin: 0; color: var(--nova-muted, #646A73); font-size: 14px; }
.nv-quick-desc { margin: 0; color: var(--nova-subtle, #4A505A); }
.nv-quick-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer; font-size: 20px; line-height: 1; }
@media (max-width: 700px) { .nv-quick-in { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
    .nv-fav.is-popping svg { animation: nv-pop .45s cubic-bezier(.2, .7, .2, 1.4); }
}
@keyframes nv-pop { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* --- the ad page on a phone: price and the seller's contact stay at the bottom once the buy box is out of sight --- */
.nv-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: none; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--nova-white, #fff); border-top: 1px solid var(--nova-line, #E5E7EB); box-shadow: 0 -8px 24px rgba(0,0,0,.08); }
.nv-sticky-cta b { font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) { .nv-sticky-cta.is-on { display: flex; } body.nv-has-sticky { padding-bottom: 72px; } }

/* --- a sticker on listings published in the last 24 hours --- */
.nv-badge-new { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--nova-accent); color: var(--nova-on-accent, #fff); font-size: 12px; font-weight: 800; letter-spacing: .02em; transform: rotate(-3deg); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.nv-card:has(.nv-badge-new) .nv-card-quick { top: 44px; }

/* --- AI search: what was understood, as chips --- */
.nv-ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: var(--nova-container, 1240px); margin: 16px auto 0; padding: 10px 24px; font-size: 14px; }
.nv-ai-bar-label { color: var(--nova-muted, #646A73); }
.nv-ai-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--nova-accent-soft, #EEF2FF); color: var(--nova-accent-ink, #1E3A8A); font-weight: 600; text-decoration: none !important; }
.nv-ai-chip.is-words { background: var(--nova-soft, #F4F5F7); color: var(--nova-ink, #111); }
a.nv-ai-chip:hover { background: var(--nova-accent); color: var(--nova-on-accent, #fff); }
.nv-ai-exact { margin-left: auto; color: var(--nova-muted, #646A73); }
form.is-thinking { opacity: .7; pointer-events: none; }