/* === navigation === */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    .site-nav { background: #fff; }
    .nav-links a { transition: background .15s; }
    .nav-links a:hover { background: #f5f5f5; }
    .nav-links .nav-mega-trigger.is-open > a { background: #f5f5f5; }
    body.nav-transparent .nav-logo img{ filter: brightness(0) invert(1); }
    /* Alleen de top-level nav-links, niet de uitklap-mega-menu links binnenin
       (die staan op een witte mega-achtergrond en moeten donker blijven). */
    body.nav-transparent .nav-links > a,
    body.nav-transparent .nav-links > .nav-mega-trigger > a{ color: #fff; }
    body.nav-transparent .nav-links > a:hover,
    body.nav-transparent .nav-links > .nav-mega-trigger > a:hover{ background: rgba(255,255,255,.15); }
    body.nav-transparent .nav-links .nav-mega-trigger.is-open > a{ background: rgba(255,255,255,.15); }

    /* Mega menu */
    @property --mega-dx {
        syntax: '<length>';
        inherits: false;
        initial-value: 0px;
    }
    .nav-mega {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        --mega-dx: 0px;
        --mega-clamp: 0px;
        transform: translate(calc(-50% + var(--mega-dx) + var(--mega-clamp)), 6px);
        width: 780px;
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 12px 48px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .04);
        padding: 10px;
        z-index: 120;
        opacity: 0;
        pointer-events: none;
        transition: opacity .28s ease, transform .28s cubic-bezier(.4,.2,.2,1), --mega-dx .28s cubic-bezier(.4,.2,.2,1);
        display: flex;
        gap: 10px;
    }
    .nav-mega.open {
        opacity: 1;
        pointer-events: auto;
        transform: translate(calc(-50% + var(--mega-dx) + var(--mega-clamp)), 0);
    }

    /* Bruggetje */
    .nav-mega-bridge {
        display: none;
        position: absolute;
        top: 100%;
        left: -20px;
        right: -20px;
        height: 22px;
    }
    .nav-mega-trigger .nav-mega.open ~ .nav-mega-bridge { display: block; }

    /* Links: steden lijst */
    .nav-mega-left {
        width: 200px;
        flex-shrink: 0;
        padding: 12px 6px;
        display: flex;
        flex-direction: column;
    }
    .nav-mega-left-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #9a9a9a;
        padding: 0 10px;
        margin-bottom: 6px;
    }
    .nav-links .nav-mega-city {
        display: flex;
        align-items: center;
        padding: 9px 12px;
        text-decoration: none;
        color: #1D2122;
        font-size: 14px;
        font-weight: 500;
        transition: background .12s, color .12s;
        border-radius: 10px;
        cursor: pointer;
        margin: 1px 0;
    }
    .nav-links .nav-mega-city:hover { background: #f5f5f5; }
    .nav-links .nav-mega-city.active {
        background: rgba(231,100,62,.08);
        color: #E7643E;
        font-weight: 600;
    }
    .nav-links .nav-mega.huur .nav-mega-city.active,
    .nav-mega.huur .nav-links .nav-mega-city.active,
    .nav-links .nav-mega.huur .nav-mega-city:hover,
    .nav-mega.huur .nav-links .nav-mega-city:hover {
        background: rgba(0,115,170,.08);
        color: #0073aa;
    }
    .nav-mega-overig {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #1D2122;
        cursor: pointer;
        border: none;
        background: none;
        font-family: inherit;
        width: 100%;
        transition: background .12s;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #eee;
        border-radius: 0 0 10px 10px;
    }
    .nav-mega-overig:hover { background: #f5f5f5; }
    .nav-mega-overig svg { width: 15px; height: 15px; flex-shrink: 0; color: #888; }

    .nav-mega-overig-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #9a9a9a;
        padding: 4px 8px 10px;
    }
    .nav-mega-overig-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2px 8px;
        padding: 0 4px 8px;
    }
    .nav-mega-right .nav-mega-overig-link {
        display: block;
        padding: 8px 10px;
        text-decoration: none;
        color: #1D2122;
        font-size: 13.5px;
        font-weight: 500;
        border-radius: 8px;
        transition: background .12s, color .12s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nav-mega-right .nav-mega-overig-link:hover {
        background: rgba(231,100,62,.08);
        color: #E7643E;
    }
    .nav-mega.huur .nav-mega-right .nav-mega-overig-link:hover {
        background: rgba(0,115,170,.08);
        color: #0073aa;
    }

    /* Rechts: content */
    .nav-mega-right {
        flex: 1;
        padding: 4px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Hero + types delen de hoogte */
    .nav-mega-content { display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
    .nav-mega-hero {
        position: relative;
        width: 100%;
        flex: 1;
        min-height: 180px;
        border-radius: 12px;
        overflow: hidden;
        color: #fff;
        background: #1D2122;
    }
    .nav-mega-hero-img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        object-position: center;
        filter: saturate(.7);
        display: block;
    }
    .nav-mega-hero::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(63,20,5,.25) 0%, rgba(63,20,5,.95) 100%);
        z-index: 1;
    }
    .nav-mega.huur .nav-mega-hero::before,
    .nav-drawer-panel[data-panel^="huur"] .nav-mega-hero::before {
        background: linear-gradient(180deg, rgba(3,28,45,.25) 0%, rgba(3,28,45,.95) 100%);
    }
    .nav-mega-hero-inner {
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 16px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        gap: 12px;
    }
    .nav-mega-hero-text { display: flex; flex-direction: column; gap: 3px; }
    .nav-mega-hero-ctas { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
    .nav-mega-hero .nav-mega-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        background: rgba(255,255,255,.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,.18);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: background .12s, border-color .12s;
    }
    .nav-mega-hero .nav-mega-cta:hover {
        background: rgba(255,255,255,.22);
        border-color: rgba(255,255,255,.3);
    }
    .nav-mega-hero .nav-mega-cta.primary {
        background: #fff;
        color: #1D2122;
        border-color: #fff;
    }
    .nav-mega-hero .nav-mega-cta.primary:hover {
        background: #E7643E;
        border-color: #E7643E;
        color: #fff;
    }
    .nav-mega.huur .nav-mega-hero .nav-mega-cta.primary:hover,
    .nav-drawer-panel[data-panel^="huur"] .nav-mega-hero .nav-mega-cta.primary:hover {
        background: #0073aa;
        border-color: #0073aa;
    }
    .nav-mega-cta svg { width: 15px; height: 15px; }
    .nav-mega-hero .nav-mega-hero-title {
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        letter-spacing: -.1px;
        line-height: 1.2;
    }
    .nav-mega-hero .nav-mega-hero-sub {
        font-size: 12px;
        color: rgba(255,255,255,.9);
        line-height: 1.4;
        margin-top: 3px;
    }

    /* Type tegels grid */
    .nav-mega-types {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .nav-mega-type {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 10px 12px;
        border-radius: 10px;
        text-decoration: none;
        background: #fafafa;
        border: 1px solid #eee;
        font-family: inherit;
        color: #1D2122;
        transition: border-color .12s, background .12s, transform .12s;
        min-height: 74px;
        gap: 6px;
    }
    .nav-mega-type:hover {
        background: #fff;
        border-color: #E7643E;
    }
    .nav-mega.huur .nav-mega-type:hover,
    .nav-drawer-panel[data-panel^="huur"] .nav-mega-type:hover {
        border-color: #0073aa;
    }
    .nav-mega-type:hover .nav-mega-type-count {
        color: #fff;
        background: #E7643E;
        border-color: #E7643E;
    }
    .nav-mega.huur .nav-mega-type:hover .nav-mega-type-count,
    .nav-drawer-panel[data-panel^="huur"] .nav-mega-type:hover .nav-mega-type-count {
        background: #0073aa;
        border-color: #0073aa;
    }
    .nav-mega-type-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .nav-mega-type-icon {
        width: 28px; height: 28px;
        border-radius: 7px;
        background: #fff;
        border: 1px solid #eee;
        display: flex; align-items: center; justify-content: center;
        color: #888;
        flex-shrink: 0;
    }
    .nav-mega-type:hover .nav-mega-type-icon {
        background: #E7643E;
        border-color: #E7643E;
        color: #fff;
    }
    .nav-mega.huur .nav-mega-type:hover .nav-mega-type-icon,
    .nav-drawer-panel[data-panel^="huur"] .nav-mega-type:hover .nav-mega-type-icon {
        background: #0073aa;
        border-color: #0073aa;
    }
    .nav-mega-type-icon svg { width: 15px; height: 15px; }
    .nav-mega-type-count {
        font-size: 11px;
        font-weight: 700;
        color: #888;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 999px;
        padding: 2px 8px;
        line-height: 1.4;
    }
    .nav-mega-type-label {
        font-size: 13px;
        font-weight: 600;
        color: #1D2122;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }


    @media (max-width: 960px) {
        .nav-mega { display: none !important; }
    }

    .nav-icon-btn { transition: background .15s; }
    .nav-icon-btn:hover,
    .nav-icon-btn.is-active { background: #f5f5f5; }
    body.nav-transparent .nav-icon-btn{ color: #fff; }
    body.nav-transparent .nav-icon-btn:hover,
    body.nav-transparent .nav-icon-btn.is-active { background: rgba(255,255,255,.15); }
    .nav-fav-badge {
        position: absolute;
        top: 4px; right: 4px;
        min-width: 16px; height: 16px;
        padding: 0 4px;
        background: #E7643E; color: #fff;
        font-size: 10px; font-weight: 700;
        border-radius: 999px;
        display: none;
        align-items: center; justify-content: center;
        line-height: 1;
        border: 1.5px solid #fff;
    }
    .nav-fav-badge.show { display: flex; }
    .nav-icon-btn.is-fav svg { fill: #E7643E; stroke: #E7643E; }

    /* Hamburger — gebruikt .nav-icon-btn styling, alleen display-toggle hier */
    .nav-hamburger { display: none; }
    .nav-hamburger:hover { background: #f5f5f5; }
    .nav-hamburger-svg { width: 26px !important; height: 26px !important; }

    /* Mobile drawer — visueel afgestemd op het desktop mega-menu */
    .nav-drawer-backdrop {
        position: fixed; inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 998;
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        visibility: hidden;
    }
    .nav-drawer-backdrop.open { opacity: 1; pointer-events: auto; visibility: visible; }
    @media (max-width: 767px) {
        .nav-drawer-backdrop, .nav-drawer-backdrop.open { display: none; }
    }
    .nav-drawer {
        position: fixed;
        inset: 0;
        width: 100%;
        background: #fff;
        z-index: 999;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4,.2,.2,1);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        visibility: hidden;
    }
    @media (min-width: 768px) {
        .nav-drawer {
            width: min(380px, 88vw);
            inset: 0 auto 0 0;
            box-shadow: 12px 0 48px rgba(0,0,0,.14), 2px 0 8px rgba(0,0,0,.04);
        }
    }
    .nav-drawer.open { transform: translateX(0); visibility: visible; }
    .nav-drawer-panels {
        position: relative;
        flex: 1;
        overflow: hidden;
    }
    .nav-drawer-panel {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        background: #fff;
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4,.2,.2,1);
        visibility: hidden;
        will-change: transform;
    }
    .nav-drawer-panel.is-active {
        transform: translateX(0);
        visibility: visible;
    }
    .nav-drawer-panel.is-prev {
        transform: translateX(-100%);
        visibility: visible;
    }
    .nav-drawer-panel.is-next {
        transform: translateX(100%);
        visibility: visible;
    }
    .nav-drawer-panel.is-prepare {
        transition: none !important;
    }
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 16px 20px;
        border-bottom: 1px solid #f0f0f0;
        flex-shrink: 0;
    }
    .nav-drawer-title {
        font-size: 18px;
        font-weight: 700;
        color: #1D2122;
        margin: 0;
        flex: 1;
        text-align: left;
        letter-spacing: 0;
    }
    .nav-drawer-panel:not([data-panel="root"]) .nav-drawer-title {
        text-align: center;
    }
    .nav-drawer-back, .nav-drawer-close {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        background: #f5f5f5; border: none; cursor: pointer;
        border-radius: 10px;
        color: #1D2122;
        transition: background .12s;
        flex-shrink: 0;
        padding: 0;
    }
    .nav-drawer-back:hover, .nav-drawer-close:hover { background: #ececec; }
    .nav-drawer-back svg, .nav-drawer-close svg { width: 16px; height: 16px; }
    .nav-drawer-head-spacer { width: 36px; flex-shrink: 0; }
    .nav-drawer-list {
        flex: 1;
        overflow-y: auto;
        padding: 10px;
        display: flex;
        flex-direction: column;
    }
    .nav-drawer-panel[data-panel="root"] .nav-drawer-list { gap: 10px; }
    .nav-drawer-list-types { gap: 0; }
    .nav-drawer-list-types > .nav-drawer-all,
    .nav-drawer-list-types > .nav-drawer-types {
        margin-bottom: 10px;
    }
    .nav-drawer-list-types > .nav-drawer-section-label {
        padding: 8px 4px 6px;
    }
    .nav-drawer-list-types > .nav-drawer-section-label-first {
        padding-top: 14px;
    }
    .nav-drawer-list-city { gap: 10px; padding: 12px; }
    .nav-drawer-list-city .nav-mega-hero {
        flex: 0 0 auto;
        min-height: 180px;
        height: 220px;
        border-radius: 14px;
    }
    .nav-drawer-list-city .nav-mega-types {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .nav-drawer-list-city .nav-mega-hero .nav-mega-cta {
        font-size: 13px;
    }
    .nav-drawer-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        background: none;
        border: none;
        cursor: pointer;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        color: #1D2122;
        text-decoration: none;
        text-align: left;
        border-radius: 10px;
        transition: background .12s, color .12s;
        width: 100%;
        margin: 1px 0;
    }
    .nav-drawer-item:hover, .nav-drawer-item:active { background: #f5f5f5; }
    .nav-drawer-item > span:first-child { flex: 1; min-width: 0; }
    .nav-drawer-item svg { width: 16px; height: 16px; color: #b5b5b5; flex-shrink: 0; }
    .nav-drawer-item-strong {
        background: rgba(231,100,62,.08);
        color: #E7643E;
        font-weight: 600;
        margin-bottom: 4px;
    }
    .nav-drawer-item-strong:hover, .nav-drawer-item-strong:active {
        background: rgba(231,100,62,.14);
    }
    .nav-drawer-item-strong svg { color: #E7643E; }
    .nav-drawer-panel[data-panel^="huur"] .nav-drawer-item-strong {
        background: rgba(0,115,170,.08);
        color: #0073aa;
    }
    .nav-drawer-panel[data-panel^="huur"] .nav-drawer-item-strong:hover {
        background: rgba(0,115,170,.14);
    }
    .nav-drawer-panel[data-panel^="huur"] .nav-drawer-item-strong svg { color: #0073aa; }
    .nav-drawer-item-sub { font-size: 13.5px; font-weight: 500; color: #1D2122; padding: 8px 12px; }
    .nav-drawer-count {
        font-size: 11px; font-weight: 700;
        color: #888;
        background: #f3f3f3;
        padding: 2px 8px;
        border-radius: 999px;
    }
    .nav-drawer-section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #9a9a9a;
        padding: 6px 4px 0;
        margin: 0;
    }
    .nav-drawer-footer {
        border-top: 1px solid #f0f0f0;
        padding: 12px;
        flex-shrink: 0;
    }
    .nav-drawer-cta {
        display: block;
        width: 100%;
        padding: 12px;
        background: #1D2122;
        color: #fff;
        border: none;
        border-radius: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: filter .15s;
    }
    .nav-drawer-cta:hover { filter: brightness(1.15); }
    body.nav-drawer-locked { overflow: hidden; }

    /* Drawer: root cards (Kopen / Huren) */
    .nav-drawer-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .nav-drawer-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 16px 14px 14px;
        border: 1px solid #eee;
        border-radius: 14px;
        background: #fff;
        cursor: pointer;
        font-family: inherit;
        text-align: left;
        text-decoration: none;
        color: #1D2122;
        transition: border-color .12s, background .12s, transform .12s;
        position: relative;
        overflow: hidden;
    }
    .nav-drawer-card:active { transform: scale(.98); }
    .nav-drawer-card-icon {
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px;
        margin-bottom: 4px;
    }
    .nav-drawer-card-icon svg { width: 18px; height: 18px; }
    .nav-drawer-card-label {
        font-size: 14px; font-weight: 700; line-height: 1.1;
    }
    .nav-drawer-card-sub {
        font-size: 12px; color: #888; font-weight: 500;
    }
    .nav-drawer-card-koop .nav-drawer-card-icon {
        background: rgba(231,100,62,.1); color: #E7643E;
    }
    .nav-drawer-card-koop:hover, .nav-drawer-card-koop:active {
        border-color: rgba(231,100,62,.4);
        background: rgba(231,100,62,.04);
    }
    .nav-drawer-card-huur .nav-drawer-card-icon {
        background: rgba(0,115,170,.1); color: #0073aa;
    }
    .nav-drawer-card-huur:hover, .nav-drawer-card-huur:active {
        border-color: rgba(0,115,170,.4);
        background: rgba(0,115,170,.04);
    }
    .nav-drawer-card-arrow {
        position: absolute;
        right: 12px;
        bottom: 12px;
        width: 16px;
        height: 16px;
        color: #c5c5c5;
    }

    /* Drawer: feature rows (Beoordeel, Kaart, Favorieten) */
    .nav-drawer-features {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .nav-drawer-feature {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid #eee;
        border-radius: 14px;
        background: #fff;
        text-decoration: none;
        color: #1D2122;
        transition: border-color .12s, background .12s, transform .12s;
    }
    .nav-drawer-feature:active { transform: scale(.99); }
    .nav-drawer-feature-icon {
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 11px;
        flex-shrink: 0;
    }
    .nav-drawer-feature-icon svg { width: 18px; height: 18px; }
    .nav-drawer-feature-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .nav-drawer-feature-title {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        color: #1D2122;
    }
    .nav-drawer-feature-sub {
        font-size: 12.5px;
        font-weight: 500;
        color: #888;
        line-height: 1.3;
    }
    .nav-drawer-feature-arrow {
        width: 16px; height: 16px;
        color: #c5c5c5;
        flex-shrink: 0;
    }
    .nav-drawer-feature-review .nav-drawer-feature-icon {
        background: rgba(255,193,7,.14);
        color: #E0A21A;
    }
    .nav-drawer-feature-review:hover {
        border-color: rgba(224,162,26,.35);
        background: rgba(255,193,7,.04);
    }
    .nav-drawer-feature-map .nav-drawer-feature-icon {
        background: rgba(76,175,80,.12);
        color: #3a8a3e;
    }
    .nav-drawer-feature-map:hover {
        border-color: rgba(76,175,80,.35);
        background: rgba(76,175,80,.04);
    }
    .nav-drawer-feature-fav .nav-drawer-feature-icon {
        background: rgba(231,100,62,.10);
        color: #E7643E;
    }
    .nav-drawer-feature-fav:hover {
        border-color: rgba(231,100,62,.35);
        background: rgba(231,100,62,.04);
    }

    /* Drawer: secondary tiles (Kaart, Favorieten, …) */
    .nav-drawer-tiles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .nav-drawer-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 6px;
        border: 1px solid #eee;
        border-radius: 14px;
        text-decoration: none;
        color: #1D2122;
        transition: border-color .12s, background .12s, transform .12s;
        background: #fff;
    }
    .nav-drawer-tile:active { transform: scale(.97); }
    .nav-drawer-tile:hover { background: #fafafa; border-color: #e0e0e0; }
    .nav-drawer-tile-icon {
        width: 34px; height: 34px;
        display: flex; align-items: center; justify-content: center;
        background: #f5f5f5; border-radius: 10px;
        color: #1D2122;
    }
    .nav-drawer-tile-icon svg { width: 18px; height: 18px; }
    .nav-drawer-tile-label {
        font-size: 12px; font-weight: 600; color: #1D2122;
        text-align: center;
    }

    /* Drawer: woningtype-grid op type-panel (Kopen/Huren) */
    .nav-drawer-types {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    .nav-drawer-type {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 6px;
        border: 1px solid #eee;
        border-radius: 12px;
        text-decoration: none;
        color: #1D2122;
        background: #fff;
        transition: border-color .12s, background .12s, transform .12s;
    }
    .nav-drawer-type:active { transform: scale(.97); }
    .nav-drawer-type:hover { background: #fafafa; border-color: #e0e0e0; }
    .nav-drawer-type-icon {
        width: 36px; height: 36px;
        display: flex; align-items: center; justify-content: center;
        color: #1D2122;
    }
    .nav-drawer-type-icon svg { width: 24px; height: 24px; }
    .nav-drawer-type-label {
        font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2;
    }
    .nav-drawer-panel[data-panel^="huur"] .nav-drawer-type:hover {
        border-color: rgba(0,115,170,.3);
        background: rgba(0,115,170,.04);
    }
    .nav-drawer-panel[data-panel^="huur"] .nav-drawer-type-icon { color: #0073aa; }
    .nav-drawer-panel[data-panel^="koop"] .nav-drawer-type:hover {
        border-color: rgba(231,100,62,.3);
        background: rgba(231,100,62,.04);
    }
    .nav-drawer-panel[data-panel^="koop"] .nav-drawer-type-icon { color: #E7643E; }

    /* Drawer: "Alle koop/huurwoningen" rij bovenaan type-panel (zelfde stijl als woningtype-tegels) */
    .nav-drawer-all {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid #eee;
        border-radius: 14px;
        background: #fff;
        text-decoration: none;
        color: #1D2122;
        transition: border-color .12s, background .12s, transform .12s;
        flex-shrink: 0;
    }
    .nav-drawer-all:active { transform: scale(.99); }
    .nav-drawer-all-koop:hover {
        border-color: rgba(231,100,62,.35);
        background: rgba(231,100,62,.04);
    }
    .nav-drawer-all-huur:hover {
        border-color: rgba(0,115,170,.35);
        background: rgba(0,115,170,.04);
    }
    .nav-drawer-all-icon {
        width: 38px; height: 38px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 11px;
        flex-shrink: 0;
    }
    .nav-drawer-all-koop .nav-drawer-all-icon {
        background: rgba(231,100,62,.10);
        color: #E7643E;
    }
    .nav-drawer-all-huur .nav-drawer-all-icon {
        background: rgba(0,115,170,.10);
        color: #0073aa;
    }
    .nav-drawer-all-icon svg { width: 18px; height: 18px; }
    .nav-drawer-all-text {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .nav-drawer-all-title {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        color: #1D2122;
        letter-spacing: -.01em;
    }
    .nav-drawer-all-sub {
        font-size: 12.5px;
        font-weight: 500;
        color: #888;
        line-height: 1.3;
    }
    .nav-drawer-all-arrow {
        width: 16px; height: 16px;
        color: #c5c5c5;
        flex-shrink: 0;
    }

    /* Drawer: in-drawer app-promo (geïnspireerd op aap-popup) */
    .nav-drawer-promo {
        position: relative;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(160deg,#E7643E 0%,#C44820 55%,#8E2F0F 100%);
        color: #fff;
        box-shadow: 0 10px 28px rgba(142,47,15,.24), 0 3px 8px rgba(0,0,0,.10);
        flex-shrink: 0;
    }
    .nav-drawer-promo-tiles {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 60%;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
        -webkit-mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 80%);
        mask-image: linear-gradient(180deg,#000 0%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 80%);
    }
    .nav-drawer-promo-tiles-inner {
        position: absolute;
        top: 50%; left: 50%;
        width: 240%; height: 240%;
        transform: translate(-50%,-50%) rotate(-16deg);
        display: flex; flex-direction: column;
        gap: 8px; justify-content: center;
    }
    .nav-drawer-promo-row { display: flex; gap: 8px; flex-shrink: 0; width: 100%; }
    .nav-drawer-promo-track {
        display: flex; gap: 8px; flex-shrink: 0;
        animation: aap-slide-l 220s linear infinite;
        animation-play-state: paused;
        will-change: transform;
    }
    .nav-drawer-promo-row.rev .nav-drawer-promo-track {
        animation: aap-slide-r 220s linear infinite;
        animation-play-state: paused;
    }
    .nav-drawer.open .nav-drawer-promo-track { animation-play-state: running; }
    .nav-drawer-promo-tile {
        position: relative;
        width: 64px; height: 120px;
        background: rgba(255,255,255,.10);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 14px;
        flex-shrink: 0;
        overflow: hidden;
    }
    .nav-drawer-promo-tile::after {
        content: '';
        position: absolute;
        inset: 3px;
        background-image: var(--shot);
        background-size: 100% auto;
        background-position: center bottom;
        background-repeat: no-repeat;
        border-radius: 11px;
        opacity: .34;
        filter: saturate(.7);
    }
    .nav-drawer-promo-body {
        position: relative;
        z-index: 2;
        padding: 18px 16px 16px;
        text-align: left;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .nav-drawer-promo-icon {
        width: 48px; height: 48px;
        margin-bottom: 2px;
    }
    .nav-drawer-promo-icon img {
        display: block;
        border-radius: 12px;
        width: 48px; height: 48px;
        box-shadow: 0 8px 22px rgba(0,0,0,.16), 0 3px 8px rgba(0,0,0,.10);
    }
    .nav-drawer-promo-text { width: 100%; }
    .nav-drawer-promo-title {
        font-size: 17px;
        font-weight: 700;
        color: #fff;
        line-height: 1.2;
        letter-spacing: -.01em;
        margin-bottom: 3px;
        text-shadow: 0 6px 20px rgba(0,0,0,.12);
    }
    .nav-drawer-promo-desc {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255,255,255,.88);
        line-height: 1.4;
        text-shadow: 0 6px 20px rgba(0,0,0,.10);
    }
    .nav-drawer-promo-desc strong { color: #fff; font-weight: 700; }
    .nav-drawer-promo-stores {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 4px;
    }
    .nav-drawer-promo-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        background: linear-gradient(155deg,#ffffff 0%,#fff3ea 100%);
        color: #1D2122;
        padding: 9px 8px;
        border-radius: 10px;
        text-decoration: none;
        box-shadow: 0 5px 14px rgba(74,18,2,.16);
        border: 1px solid rgba(255,255,255,.6);
        min-width: 0;
        transition: transform .15s, box-shadow .15s, background .25s;
    }
    .nav-drawer-promo-btn:hover {
        transform: translateY(-1px);
        background: linear-gradient(155deg,#ffffff 0%,#ffe6d2 100%);
    }
    .nav-drawer-promo-btn svg {
        width: 16px; height: 16px;
        flex-shrink: 0;
        color: #1D2122;
    }
    .nav-drawer-promo-btn-text {
        display: flex;
        flex-direction: column;
        line-height: 1.1;
        text-align: left;
        min-width: 0;
    }
    .nav-drawer-promo-btn-text small {
        font-size: 8.5px;
        opacity: .65;
        line-height: 1.2;
        color: #1D2122;
        font-weight: 500;
    }
    .nav-drawer-promo-btn-text strong {
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        color: #1D2122;
    }

    /* Drawer footer: legal links */
    .nav-drawer-legal {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: 12px;
        color: #888;
    }
    .nav-drawer-legal a {
        color: #888;
        text-decoration: none;
    }
    .nav-drawer-legal a:hover { color: #1D2122; }
    .nav-drawer-legal-dot { color: #ccc; }

    /* Nav search overlay */
    .nav-search-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,.4);
        z-index: 500;
        align-items: flex-start;
        justify-content: center;
        padding-top: 80px;
    }
    .nav-search-overlay.open,
    .nav-search-overlay.closing { display: flex; }
    .nav-search-box {
        background: #fff;
        border-radius: 16px;
        padding: 20px;
        width: 100%;
        max-width: 520px;
        box-shadow: 0 16px 48px rgba(0,0,0,.2);
        position: relative;
    }
    @media (min-width: 641px) {
        .nav-search-overlay.open .nav-search-box {
            animation: nav-search-in .15s ease-out;
        }
        .nav-search-overlay.closing .nav-search-box {
            animation: nav-search-out .15s ease-in forwards;
        }
    }
    @keyframes nav-search-out {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(-8px); }
    }
    .nav-search-head { display: contents; }
    .nav-search-body { display: contents; }
    .nav-search-close {
        display: none;
        width: 36px; height: 36px;
        border: none; background: #f5f5f5;
        color: #1D2122; cursor: pointer;
        border-radius: 10px;
        align-items: center; justify-content: center;
        padding: 0;
    }
    .nav-search-close:hover { background: #ececec; }
    .nav-search-close svg { width: 16px; height: 16px; }
    @media (min-width: 641px) {
        .nav-search-close {
            display: flex;
            position: absolute;
            top: 8px; right: 20px;
            z-index: 2;
        }
    }
    @keyframes nav-search-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .nav-search-tabs {
        display: flex; gap: 4px;
        margin-bottom: 14px;
        border-bottom: 1px solid #eee;
    }
    .nav-search-tab {
        font-size: 14px; font-weight: 600; color: #999;
        padding: 0 4px 10px; cursor: pointer;
        border: none; background: none; font-family: inherit;
        margin-right: 12px;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: color .15s, border-color .15s;
    }
    .nav-search-tab.active { color: #1D2122; border-bottom-color: #E7643E; }
    .nav-search-tab.active.huur { border-bottom-color: #0073aa; }
    .nav-search-tab:hover { color: #1D2122; }
    .nav-search-row { display: flex; flex-wrap: wrap; }
    .nav-search-input-wrap {
        display: flex; align-items: center; flex: 1;
        background: #f5f5f5; border: 1.5px solid transparent;
        border-radius: 12px; padding: 0 6px 0 14px; gap: 8px;
        transition: background .15s, border-color .15s;
    }
    .nav-search-input-wrap:focus-within {
        background: #fff; border-color: #1D2122;
    }
    .nav-search-input-wrap svg {
        width: 17px; height: 17px; color: #555; flex-shrink: 0;
    }
    .nav-search-input-wrap input {
        flex: 1; border: none; outline: none; background: transparent;
        font-size: 14px; font-family: inherit; color: #1D2122; height: 48px;
    }
    .nav-search-input-wrap input::placeholder { color: #666; }
    .nav-search-submit {
        display: flex; align-items: center; justify-content: center; gap: 7px;
        height: 38px; padding: 0 14px;
        background: #E7643E; color: #fff;
        border: none; border-radius: 9px;
        cursor: pointer; flex-shrink: 0;
        transition: filter .15s;
        font-family: inherit; font-size: 13px; font-weight: 600;
        letter-spacing: -.1px; white-space: nowrap;
    }
    .nav-search-submit:hover { filter: brightness(.9); }
    .nav-search-submit svg { width: 16px; height: 16px; stroke: #fff; }
    .nav-search-submit-count { font-variant-numeric: tabular-nums; }
    .nav-search-results {
        width: 100%;
        max-height: 360px; overflow-y: auto;
        display: none;
        border-top: 1px solid #eee;
        margin: 16px -20px -20px;
        padding: 0;
        border-radius: 0 0 16px 16px;
    }
    .nav-sr-item {
        display: flex; padding: 12px 16px; gap: 12px;
        text-decoration: none; color: inherit; transition: background .1s;
    }
    .nav-sr-item:hover { background: #f7f7f7; }
    .nav-sr-img {
        width: 48px; height: 48px; border-radius: 10px;
        background-size: cover; background-position: center;
        border: 1px solid #eee; flex-shrink: 0;
    }
    .nav-sr-info { display: flex; flex-direction: column; justify-content: center; }
    .nav-sr-t { font-size: 14px; font-weight: 700; color: #1D2122; }
    .nav-sr-s { font-size: 12px; color: #888; }
    .nav-sr-msg { padding: 16px; text-align: center; color: #888; font-size: 14px; }
    /* Recent-search: fallback-tile wanneer er geen regio-foto is */
    .nav-sr-recent-icon, .home-sr-recent-icon, .wn-sr-recent-icon {
        background: #f5f5f5 !important;
    }
    /* "Recent bekeken" section-header — uniform met .nav-mega-left-label */
    .bcr-section-label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        color: #9a9a9a;
        padding: 10px 16px 4px;
        text-align: left;
    }

    @media (max-width: 960px) {
        .nav-links { display: none; }
        .nav-hamburger { display: flex; }
    }
    @media (max-width: 640px) {
        body.nav-search-locked { overflow: hidden; }
        .nav-search-overlay {
            padding: 0;
            background: transparent;
            align-items: stretch;
            justify-content: stretch;
        }
        .nav-search-box {
            border-radius: 0;
            max-width: none;
            width: 100%;
            height: 100%;
            background: #fff;
            box-shadow: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            animation: none;
            overflow: hidden;
            opacity: 0;
            transition: opacity .12s ease;
        }
        .nav-search-overlay.open .nav-search-box { opacity: 1; }
        .nav-search-overlay.closing .nav-search-box { opacity: 0; }
        .nav-search-head {
            display: flex; align-items: center; justify-content: flex-end;
            padding: 12px 20px 0; flex-shrink: 0;
        }
        .nav-search-close {
            display: flex;
        }
        .nav-search-body {
            display: flex; flex-direction: column; flex: 1;
            min-height: 0; padding: 0 20px 20px; overflow: hidden;
            margin-top: -21px;
        }
        .nav-search-body .nav-search-tabs {
            margin-bottom: 16px; flex-shrink: 0; padding-right: 48px;
        }
        .nav-search-row {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-height: 0;
            flex-wrap: nowrap;
        }
        .nav-search-input-wrap { flex: 0 0 auto; width: 100%; }
        .nav-search-input-wrap input { height: 52px; font-size: 16px; }
        .nav-search-input-wrap input::placeholder { font-size: 14px; }
        .nav-search-results {
            flex: 1;
            min-height: 0;
            max-height: none;
            margin: 16px -20px -20px;
            border-radius: 0;
            border-top: 1px solid #eee;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        @keyframes nav-search-slide-in {
            from { transform: translateY(100%); }
            to   { transform: translateY(0); }
        }
        @keyframes nav-search-slide-out {
            from { transform: translateY(0); }
            to   { transform: translateY(100%); }
        }
    }

    /* Huur accent overrides — must win over koop defaults */
    .nav-links .nav-mega.huur .nav-mega-city.active,
    .nav-links .nav-mega.huur .nav-mega-city:hover {
        background: rgba(0,115,170,.08);
        color: #0073aa;
    }
    .nav-links .nav-mega.huur .nav-mega-type:hover {
        border-color: #0073aa;
    }
    .nav-links .nav-mega.huur .nav-mega-type:hover .nav-mega-type-count {
        color: #fff;
        background: #0073aa;
        border-color: #0073aa;
    }
    .nav-links .nav-mega.huur .nav-mega-type:hover .nav-mega-type-icon {
        background: #0073aa;
        border-color: #0073aa;
        color: #fff;
    }
    .nav-links .nav-mega.huur .nav-mega-cta.primary:hover {
        background: #0073aa;
        border-color: #0073aa;
        color: #fff;
    }

/* === body.nav-transparent overrides voor inline-ternary's === */
body.nav-transparent .site-nav { background: transparent; }
body.nav-transparent .nav-hamburger:hover { background: rgba(255,255,255,.15); }

/* === account-menu === */
    /* User wrap + dropdown (alleen ingelogd) */
    .nav-user-wrap { position: relative !important; }
    .nav-user-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 260px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.04);
        padding: 8px;
        z-index: 300;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity .18s, transform .18s;
    }
    .nav-user-dropdown.open {
        opacity: 1; pointer-events: auto;
        transform: translateY(0);
    }
    .nav-user-head {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 10px 12px;
        margin-bottom: 6px;
        border-bottom: 1px solid #eee;
    }
    .nav-user-head-avatar {
        width: 36px; height: 36px; border-radius: 50%;
        background: #1D2122; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 700;
        overflow: hidden; flex-shrink: 0;
    }
    .nav-user-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .nav-user-head-info { min-width: 0; }
    .nav-user-head-name {
        font-size: 13.5px; font-weight: 700; color: #1D2122;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .nav-user-head-mail {
        font-size: 12px; color: #908D89;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        margin-top: 1px;
    }
    .nav-user-item {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 10px;
        border-radius: 8px;
        font-size: 13px; font-weight: 600;
        color: #1D2122; text-decoration: none;
        cursor: pointer;
        border: none; background: none; width: 100%;
        font-family: inherit; text-align: left;
        transition: background .12s;
    }
    .nav-user-item:hover { background: #f5f5f5; }
    .nav-user-item svg { width: 16px; height: 16px; color: #666; flex-shrink: 0; }
    .nav-user-item.danger { color: #DC2626; }
    .nav-user-item.danger svg { color: #DC2626; }

    /* User icon (matcht de andere nav-icons) */
    .nav-user-avatar {
        width: 20px; height: 20px;
        display: flex; align-items: center; justify-content: center;
        color: inherit;
        overflow: hidden;
        border-radius: 50%;
    }
    .nav-user-avatar svg { width: 20px; height: 20px; }
    .nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
    #nav-user-btn { position: relative; }
    #nav-user-btn .nav-user-dot {
        display: none;
        position: absolute;
        bottom: 6px; right: 6px;
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #2ecc71;
        border: 1.5px solid #fff;
    }
    #nav-user-btn.is-auth .nav-user-dot { display: block; }

    /* Overlay */
    .nav-auth-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        z-index: 500;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .nav-auth-overlay.open { display: flex; }
    .nav-auth-box {
        background: #fff;
        border-radius: 18px;
        width: 100%;
        max-width: 780px;
        max-height: calc(100vh - 40px);
        overflow: hidden;
        box-shadow: 0 16px 48px rgba(0,0,0,.2);
        position: relative;
        animation: nav-auth-in .18s ease-out;
        display: flex;
        flex-direction: row;
    }
    @media (max-width: 720px) {
        .nav-auth-box { flex-direction: column; max-width: 400px; }
    }

    /* Links: hero met foto */
    .nav-auth-aside {
        position: relative;
        flex: 0 0 360px;
        background: #1D2122 url('https://buurtje.nl/afbeeldingen/populaire-gemeenten/amsterdam.webp') center/cover no-repeat;
        display: flex; flex-direction: column;
        padding: 28px 24px;
        color: #fff;
        overflow: hidden;
    }
    .nav-auth-aside::before {
        content: '';
        position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(29,33,34,.45) 0%, rgba(29,33,34,.8) 100%);
    }
    .nav-auth-aside-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; gap: 20px; }
    .nav-auth-aside-logo {
        height: 28px; width: auto;
        filter: brightness(0) invert(1);
        align-self: flex-start;
    }
    .nav-auth-aside-title {
        font-size: 22px; font-weight: 700;
        line-height: 1.2;
        color: #fff;
        margin-top: auto;
    }
    .nav-auth-aside-sub {
        font-size: 13.5px; font-weight: 500;
        color: rgba(255,255,255,.9);
        line-height: 1.4;
        margin-top: -12px;
    }

    /* USP glass-container — één box met dividers, onderin uitgelijnd */
    .nav-aside-perks {
        margin-top: auto;
        background: rgba(0,0,0,.3);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border: 2px solid rgba(0,0,0,.1);
        border-radius: 14px;
        padding: 4px 14px;
        color: #fff;
    }
    .nav-aside-perk {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
    }
    .nav-aside-perk:last-child { border-bottom: none; }
    .nav-aside-perk-check {
        flex-shrink: 0;
        color: #fff;
        margin-top: 1px;
    }
    .nav-aside-perk-check svg { width: 14px; height: 14px; }
    .nav-aside-perk-body { min-width: 0; }
    .nav-aside-perk-title {
        font-size: 12px; font-weight: 700;
        color: #fff;
        letter-spacing: -.1px;
        line-height: 1.3;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 6px;
        row-gap: 4px;
    }
    .nav-aside-perk-badge {
        display: inline-block;
        font-size: 9px;
        font-weight: 600;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: rgba(255,255,255,.85);
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.18);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        padding: 2px 6px;
        border-radius: 999px;
        line-height: 1;
    }
    .nav-aside-perk-desc {
        font-size: 11px;
        color: rgba(255,255,255,.75);
        line-height: 1.35;
        margin-top: 1px;
    }

    @media (max-width: 720px) {
        .nav-auth-aside { flex: 0 0 auto; min-height: 160px; padding: 20px 22px; }
        .nav-auth-aside-title { font-size: 18px; margin-top: 12px; }
        .nav-auth-aside-sub { display: none; }
        .nav-aside-perks { display: none; }
    }

    /* Rechts: formulier kolom */
    .nav-auth-main {
        flex: 1;
        display: flex; flex-direction: column;
        min-width: 0;
        overflow: hidden;
    }
    @keyframes nav-auth-in {
        from { opacity: 0; transform: translateY(8px) scale(.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Close-knop rechtsboven (floating) */
    .nav-auth-close {
        position: absolute; top: 14px; right: 14px;
        width: 32px; height: 32px; border-radius: 9px;
        border: none; background: rgba(255,255,255,.95);
        color: #1D2122; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        z-index: 10;
        transition: background .15s;
        box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    .nav-auth-close:hover { background: #fff; }
    .nav-auth-close svg { width: 15px; height: 15px; }

    /* Body (scrollbaar) */
    .nav-auth-body {
        padding: 32px 36px 28px;
        overflow-y: auto;
        flex: 1;
    }
    @media (max-width: 720px) {
        .nav-auth-body { padding: 22px 22px 22px; }
    }
    .nav-auth-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 18.5px; font-weight: 700;
        color: #0d0d0d;
        line-height: 1.2;
        margin-bottom: 4px;
    }
    .nav-auth-sub {
        font-size: 13.5px; font-weight: 500;
        color: #0d0d0d;
        line-height: 1.4;
    }
    .nav-auth-sub-link {
        background: none; border: none; cursor: pointer;
        font-family: inherit;
        font-size: 13.5px; font-weight: 700;
        color: #000; text-decoration: underline;
        padding: 0;
    }
    .nav-auth-hint {
        font-size: 11.5px; color: #908D89;
        line-height: 1.4; font-weight: 500;
        padding: 2px 2px 0;
    }

    /* Form */
    .nav-auth-form { margin-top: 15px; display: flex; flex-direction: column; gap: 11px; }
    .nav-auth-input-wrap {
        background: #F5F5F5;
        border: 2px solid #F5F5F5;
        border-radius: 11px;
        display: flex; align-items: center;
        transition: background .15s, border-color .15s;
    }
    .nav-auth-input-wrap:focus-within {
        background: #fff;
        border-color: #908D89;
    }
    .nav-auth-input-wrap.valid {
        background: #fff;
        border-color: #4B9E28;
    }
    .nav-auth-input-wrap.invalid {
        background: #fff;
        border-color: #D32F2F;
    }
    .nav-auth-input-icon {
        margin-left: 14px; margin-right: 10px;
        color: #908D89;
        flex-shrink: 0;
        display: flex; align-items: center;
    }
    .nav-auth-input-icon svg { width: 18px; height: 18px; }
    .nav-auth-input {
        flex: 1;
        padding: 13px 14px 13px 0;
        font-size: 13.5px;
        font-family: inherit;
        color: #1D2122;
        border: none; outline: none;
        background: transparent;
    }
    .nav-auth-input::placeholder { color: #908D89; }

    /* Op mobiel input-tekst 16px om iOS-zoom te voorkomen, maar placeholder
       behoudt de visueel kleinere 13.5px zodat de styling niet verandert. */
    @media (max-width: 600px) {
        .nav-auth-input { font-size: 16px; }
        .nav-auth-input::placeholder { font-size: 13.5px; }
    }

    .nav-auth-forgot {
        background: none; border: none;
        font-family: inherit; font-size: 12px; font-weight: 500;
        color: #908D89;
        padding: 3px 0;
        text-align: left;
        cursor: pointer;
        align-self: flex-start;
        margin-top: -3px;
    }
    .nav-auth-forgot:hover { color: #1D2122; }

    .nav-auth-err {
        display: none;
        background: #FEE2E2;
        border-radius: 8px;
        padding: 11px;
        color: #DC2626;
        font-size: 13px; font-weight: 500;
        text-align: center;
    }
    .nav-auth-err.show { display: block; }
    .nav-auth-msg {
        display: none;
        background: #E0F2E9;
        border-radius: 8px;
        padding: 11px;
        color: #1d6d2d;
        font-size: 13px; font-weight: 500;
        text-align: center;
    }
    .nav-auth-msg.show { display: block; }

    /* Knoppen (desktop-stijl, 10px radius) */
    .nav-auth-btn-row {
        display: flex; gap: 9px;
        margin-top: 3px;
    }
    .nav-auth-btn {
        flex: 1;
        height: 45px;
        border: none;
        border-radius: 10px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: opacity .15s, background .15s, border-color .15s;
    }
    .nav-auth-btn.primary {
        background: #000;
        color: #fff;
    }
    .nav-auth-btn.primary:hover { opacity: .88; }
    .nav-auth-btn.primary:disabled { background: #999; cursor: not-allowed; }
    .nav-auth-btn.outline {
        background: #fff;
        color: #000;
        border: 1px solid #DBDAD7;
    }
    .nav-auth-btn.outline:hover { background: #f8f8f8; }

    .nav-auth-btn-spinner {
        width: 18px; height: 18px;
        border: 2.25px solid rgba(255,255,255,.35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: nav-auth-spin .7s linear infinite;
    }
    @keyframes nav-auth-spin {
        to { transform: rotate(360deg); }
    }

    /* Divider */
    .nav-auth-divider {
        display: flex; align-items: center;
        margin: 18px 0 11px;
        gap: 11px;
    }
    .nav-auth-divider::before, .nav-auth-divider::after {
        content: ''; flex: 1; height: 1px; background: #DBDAD7;
    }
    .nav-auth-divider-text {
        font-size: 13px; color: #c6c5c4;
        font-weight: 400;
    }

    .nav-auth-social-stack {
        display: flex; flex-direction: column; gap: 8px;
    }

    /* Social button (app-stijl, maar 10px radius) */
    .nav-auth-social {
        width: 100%; height: 50px;
        background: #F5F5F5;
        border: 1px solid #fff;
        border-radius: 10px;
        display: flex; align-items: center;
        padding-left: 18px;
        cursor: pointer;
        font-family: inherit;
        transition: background .15s;
    }
    .nav-auth-social:hover { background: #ececec; }
    .nav-auth-social-icon {
        width: 21px; height: 21px;
        flex-shrink: 0;
    }
    .nav-auth-social-text {
        flex: 1;
        font-size: 13.5px; font-weight: 500;
        color: #908D89;
        text-align: center;
        margin-right: 40px;
    }

    /* Terms */
    .nav-auth-terms {
        font-size: 11.5px; font-weight: 500;
        color: #908D89;
        text-align: center;
        line-height: 1.5;
        margin-top: 18px;
        padding: 0 12px;
    }
    .nav-auth-terms a {
        color: #202020; text-decoration: underline;
    }


/* === body.nav-transparent overrides === */
body.nav-transparent #nav-user-btn .nav-user-dot { border-color: rgba(0,0,0,.4); }

/* === footer === */
.footer {
        margin-top: 48px;
        background: #f8f8f8;
    }

    .footer-inner {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Link columns */
    .footer-cols {
        display: grid;
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
        gap: 24px 40px;
        padding: 64px 0;
    }

    .footer-brand-logo {
        display: inline-block;
        margin-bottom: 16px;
    }

    .footer-brand-logo img {
        height: 32px;
        width: auto;
        display: block;
    }

    .footer-brand-text {
        font-size: 14px;
        line-height: 1.6;
        color: #555;
        max-width: 280px;
    }

    .footer-col-title {
        font-size: 14px;
        font-weight: 600;
        color: #1D2122;
        margin-bottom: 14px;
    }

    .footer-col a {
        display: block;
        font-size: 14px;
        color: #555;
        text-decoration: none;
        padding: 5px 0;
    }

    .footer-col a:hover {
        color: #1D2122;
        text-decoration: underline;
    }

    /* Mobile accordion */
    .footer-col-header {
        display: none;
    }

    .footer-section-arrow {
        width: 16px;
        height: 16px;
        color: #1D2122;
        transition: transform .25s ease;
        flex-shrink: 0;
    }

    /* Bottom bar */
    .footer-bottom {
        border-top: 1px solid #ddd;
        padding: 28px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 16px;
    }

    .footer-bottom-left {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        font-size: 14px;
        color: #555;
    }

    .footer-bottom-left a {
        font-size: 14px;
        color: #555;
        text-decoration: none;
    }

    .footer-bottom-left a:hover { text-decoration: underline; }
    .footer-dot { color: #aaa; }

    .footer-bottom-right {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .footer-social {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .footer-social a {
        color: #1D2122;
        text-decoration: none;
        transition: opacity .15s;
    }

    .footer-social a:hover { opacity: .65; }
    .footer-social svg { width: 18px; height: 18px; display: block; }

    .footer-app-links {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .footer-app-links a { display: block; }

    .footer-app-links img {
        height: 32px;
        width: auto;
        display: block;
        border-radius: 6px;
    }

    @media (max-width: 768px) {
        .footer-cols {
            display: block;
            padding: 0;
        }

        .footer-col {
            border-bottom: 1px solid #ddd;
        }

        .footer-col-title { display: none; }

        .footer-brand {
            border-bottom: 1px solid #ddd;
            padding: 24px 0;
        }

        .footer-brand-text { max-width: none; }

        .footer-col-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 0;
            cursor: pointer;
            -webkit-user-select: none;
            user-select: none;
            font-size: 14px;
            font-weight: 600;
            color: #1D2122;
        }

        .footer-col-links {
            display: none;
            padding-bottom: 18px;
        }

        .footer-col.open .footer-col-links { display: block; }
        .footer-col.open .footer-section-arrow { transform: rotate(180deg); }

        .footer-bottom {
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-bottom-right {
            width: 100%;
            justify-content: space-between;
        }

        .footer-bottom {
            border-top: none;
            padding: 28px 0 80px;
        }
    }

/* === app-banner === */
#buurtje-app-banner{position:fixed;bottom:0;left:0;right:0;z-index:80;background:#fff;border-top:1px solid #eee;box-shadow:0 -2px 10px rgba(0,0,0,.06);padding:10px 16px;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif}
    #buurtje-app-banner>.bab-x{position:absolute;top:-32px;right:8px}
    .bab-inner{display:flex;align-items:center;gap:12px;max-width:480px;margin:0 auto}
    .bab-icon{position:relative}
    .bab-icon img{display:block;border-radius:10px}
    .bab-new{position:absolute;top:-6px;left:-5px;background:#E63946;color:#fff;font-size:7px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:1px 4px;border-radius:3px;line-height:1.4}
    .bab-text{flex:1;min-width:0}
    .bab-title{display:block;font-weight:700;font-size:14px;color:#1D2122;line-height:1.2}
    .bab-sub{display:block;font-size:12px;color:#595959;line-height:1.3}
    .bab-cta{background:#1D2122;color:#fff;border:none;border-radius:10px;padding:9px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .2s;display:inline-block}
    .bab-cta:hover{background:#F79824;color:#fff}
    .bab-x{background:none;border:none;font-size:24px;color:#737373;cursor:pointer;padding:0;padding-bottom:7px;line-height:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}

    @media(min-width:769px){
        #buurtje-app-banner{bottom:24px;left:auto;right:24px;border:1px solid #eee;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.1);padding:14px 20px;min-width:400px}
        #buurtje-app-banner>.bab-x{top:-36px;right:0}
        .bab-icon img{width:40px;height:40px}
        .bab-title{font-size:15px}
        .bab-sub{font-size:12px}
        .bab-cta{padding:8px 18px;border-radius:8px}
        .bab-x{width:28px;height:28px;font-size:22px}
        .bab-inner{max-width:none}
    }

/* === app-popup === */
#buurtje-app-popup{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:'Plus Jakarta Sans',-apple-system,sans-serif;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;animation:aap-fade .35s ease}
#buurtje-app-popup a,#buurtje-app-popup a:hover,#buurtje-app-popup a:visited{color:#fff;text-decoration:none}
@keyframes aap-fade{from{opacity:0}to{opacity:1}}
@keyframes aap-rise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.aap-sheet{
    position:relative;
    border-radius:24px;
    max-width:420px;
    width:calc(100% - 32px);
    max-height:calc(100vh - 32px);
    overflow:hidden;
    background:linear-gradient(160deg,#E7643E 0%,#C44820 55%,#8E2F0F 100%);
    color:#fff;
    box-shadow:0 30px 80px rgba(142,47,15,.5),0 8px 24px rgba(0,0,0,.3);
    animation:aap-rise .5s cubic-bezier(.2,.8,.2,1) both;
}
/* Subtiele bewegende lichte overlay */
.aap-sheet::before{
    content:'';position:absolute;inset:-40%;
    background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%);
    pointer-events:none;
    animation:aap-glow 12s ease-in-out infinite alternate;
    z-index:0;
}
@keyframes aap-glow{
    0%{transform:translate(0,0) scale(1)}
    50%{transform:translate(8%,4%) scale(1.05)}
    100%{transform:translate(-6%,-3%) scale(1.02)}
}
/* Bewegende tegels achter het icoon (zoals app-highlight) */
.aap-tiles{
    position:absolute;
    top:0;left:0;width:100%;height:280px;
    overflow:hidden;
    z-index:1;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 70%);
    mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 40%,rgba(0,0,0,0) 70%);
}
.aap-tiles-inner{
    position:absolute;
    top:50%;left:50%;
    width:200%;height:200%;
    transform:translate(-50%,-50%) rotate(-18deg);
    display:flex;flex-direction:column;
    gap:14px;justify-content:center;
}
.aap-tile-row{display:flex;gap:14px;flex-shrink:0;width:100%}
.aap-tile-track{display:flex;gap:14px;flex-shrink:0;animation:aap-slide-l 220s linear infinite;will-change:transform}
.aap-tile-row.rev .aap-tile-track{animation:aap-slide-r 220s linear infinite}
.aap-tile{
    position:relative;
    width:95px;height:179px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    flex-shrink:0;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    overflow:hidden;
}
.aap-tile::after{
    content:"";
    position:absolute;
    inset:5px;
    background-image:var(--shot);
    background-size:100% auto;
    background-position:center bottom;
    background-repeat:no-repeat;
    border-radius:15px;
    opacity:.38;
    filter:saturate(.7);
}
@keyframes aap-slide-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes aap-slide-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.aap-x{position:absolute;top:14px;right:14px;z-index:10;background:rgba(0,0,0,.35);border:none;width:30px;height:30px;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .2s}
.aap-x:hover{background:rgba(0,0,0,.55)}
.aap-x svg{width:9px;height:9px}
.aap-body{position:relative;z-index:2;padding:36px 28px 28px;text-align:center}
.aap-app-icon{position:relative;display:block;margin:0 auto 18px;width:78px}
.aap-app-icon img{display:block;border-radius:18px;width:78px;height:78px;box-shadow:0 16px 50px rgba(0,0,0,.18),0 6px 20px rgba(0,0,0,.10)}
.aap-title{font-size:24px;font-weight:700;color:#fff;line-height:1.18;margin-bottom:10px;letter-spacing:-.02em;text-shadow:0 16px 50px rgba(0,0,0,.18),0 6px 20px rgba(0,0,0,.10)}
.aap-desc{font-size:14px;color:rgba(255,255,255,.85);line-height:1.55;margin:0 auto 20px;font-weight:500;max-width:340px;text-shadow:0 16px 50px rgba(0,0,0,.18),0 6px 20px rgba(0,0,0,.10)}
.aap-desc strong{color:#fff;font-weight:700}
.aap-title strong{font-weight:800}
.aap-features{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px;justify-content:flex-start}
.aap-feature{
    display:inline-flex;align-items:center;gap:7px;
    font-size:12px;font-weight:600;color:#fff;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    border-radius:999px;
    padding:6px 10px 6px 7px;
}
.aap-feature-icon{width:20px;height:20px;background:rgba(255,255,255,.22);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.aap-feature-icon svg{width:11px;height:11px}
.aap-stores{display:flex;gap:8px;justify-content:center}
.aap-store-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(155deg,#ffffff 0%,#fff3ea 100%);
    color:#1D2122;
    padding:12px 14px;border-radius:12px;
    text-decoration:none;transition:transform .2s, box-shadow .2s, background .3s;
    flex:1;
    box-shadow:0 6px 18px rgba(74,18,2,.18);
    border:1px solid rgba(255,255,255,.6);
}
.aap-store-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(74,18,2,.28);color:#1D2122;background:linear-gradient(155deg,#ffffff 0%,#ffe6d2 100%)}
.aap-store-btn svg{width:20px;height:20px;flex-shrink:0;color:#1D2122}
.aap-store-text{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.aap-store-text span:first-child{font-size:9px;opacity:.65;line-height:1.2;color:#1D2122}
.aap-store-text span:last-child{font-size:13px;font-weight:700;line-height:1.3;color:#1D2122}

@media(max-width:480px){
    .aap-sheet{border-radius:20px}
    .aap-body{padding:32px 20px 22px}
    .aap-title{font-size:21px}
    .aap-app-icon img{width:68px;height:68px;border-radius:16px}
    .aap-store-btn{padding:11px 10px;gap:6px}
}

/* === property-card === */
.pc{background:#fff;border-radius:16px;display:flex;flex-direction:column;min-width:0;position:relative}.pc-img-wrap{display:block;position:relative;width:100%;aspect-ratio:4/3;text-decoration:none;overflow:hidden;border-radius:16px}.pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}.pc-img-wrap.pc-placeholder{background:#E0E0E0}.pc-img-wrap.pc-placeholder .pc-img{visibility:hidden}.pc-ph-icon{display:none;position:absolute;top:56%;left:50%;transform:translate(-50%,-50%)}.pc-img-wrap.pc-placeholder .pc-ph-icon{display:block}.pc-status{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(0,0,0,.1);border-radius:999px;padding:5px 14px;color:#fff;font-size:11px;font-weight:500;letter-spacing:-.1px}.pc-fav{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;transition:transform .12s, background .15s, border-color .15s;padding:0}.pc-fav:hover{transform:scale(1.08)}.pc-fav:active{transform:scale(.92)}.pc-fav svg{width:14px;height:14px}.pc-fav .pc-fav-fill{display:none}.pc-fav.is-fav{background:#fff;border-color:rgba(0,0,0,.05)}.pc-fav.is-fav .pc-fav-out{display:none}.pc-fav.is-fav .pc-fav-fill{display:inline}.pc-badges{position:absolute;bottom:10px;left:10px;display:flex;flex-direction:column;align-items:flex-start;gap:5px;pointer-events:none}.pc-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.3);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:2px solid rgba(0,0,0,.1);border-radius:999px;padding:4px 10px;color:#fff;font-size:10px;font-weight:600;letter-spacing:-.1px;white-space:nowrap}@font-face{font-family:'Orbitron QL';font-style:normal;font-weight:900;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAAL8AA4AAAAABdQAAAKrAAIAQgAAAAAAAAAAAAAAAAAAAAAAAAAAGhwbIBwqBmAAbBEICoUwhCMBNgIkAzYLHgAEIAUGByAbMgQIjsR0e4N8YwhHmggeyO7zzczuz2X364jq4wSHrFClBLUXuiIqgJXKSzpsAfxPnapZA0PhjbkIBTH/lrE4G6OhlAparlhTsLFoTI12eM8LVnNrMhhDE1utM45S6BH0+fZZBOAEACQSgQPBUEwEAjBIIAlR39jeTwgagG0DAJzkI4Ds554xafYsYujrADS5XC1BB7lKjgTaYh8xnlwxFmcVwP8efy03qWGYGuwCNWgQCABZL5+AFCQgAQVEoBBABBojgTC8KCQ11NFAC+100sMw24Yzqq22b761/uTaq6+89DyBmATCjgfOzfoEwAtcAn7iMOJlHVsmEeqrOLiuh5pRTs3jMBwR3mg9xCUm666xQndqpr7w9WvTtfrlSzRDODHGuMTChQq2bcxVr14JxY16cK86hFxwHMSmLoITl2jqprZQmmNMpk7DGG3IXuLBDkxTpmZMlx4xQpi474QzQWlevDAmu2qgpqZy4UIDQwBEXBBAuuUcL0aY/bunDDMy079wn8cP/EdZMGcBpeVBf22dP3A0WOsP1AbLB77v+L571+Id54AdwDkeEIjfOcbbB0MHS60wryd0uBdvmEXpk53W33k7rZ3z/lqSn+x8QskTK27tr9gDheSQU3hAd6+No+Tp7oICi+In+zZ9/jLQrtny9RszNuw06bXWBer8/rrAsafwxwL2kgTqbMa+3TuA5t+7lJfvzu9k+QPltXOMvvnk3hvwevbMZ+aFqQ8su7Ia6UMAQ3CKA6yBmGttNkApKEO9jp+8SwCS2r4TTYcmeMr/hCj1HXBPuXIAPib3bbbrbYeu1AfgQAIg4NPH+gSK+fd9CgI37hK/Rah6SvP+Qorlf6W8IlklUqLMZKymWM2mUJX/FdinTkIAbvrQqUMbHkgsOFBzYVtycQA=) format('woff2')}.pc-badge-quicklane{position:relative;display:inline-flex;width:118px;height:28px;border-radius:14px;border:1.5px solid rgba(124,58,237,.3);overflow:hidden;white-space:nowrap}.pc-badge-quicklane-grad{position:absolute;top:-28px;left:0;width:354px;height:84px;background:linear-gradient(135deg,#7C3AED 0%,#A855F7 25%,#B479F7 50%,#A855F7 75%,#7C3AED 100%);animation:pc-ql-slide 4s ease-in-out infinite alternate;will-change:transform}.pc-badge-quicklane-inner{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:5px}.pc-badge-quicklane-inner svg{width:10px;height:10px}.pc-badge-quicklane-text{font-family:'Orbitron QL',sans-serif;font-weight:900;font-size:7.5px;color:#fff;letter-spacing:1.3px;margin-bottom:1px;line-height:1}@keyframes pc-ql-slide{from{transform:translateX(0)}to{transform:translateX(-236px)}}.pc-body{padding:14px 6px 12px;flex:1;display:flex;flex-direction:column;text-decoration:none;color:inherit}a.pc-body:hover,a.pc-body:focus{text-decoration:none;color:inherit}.pc-row{display:flex;justify-content:space-between;align-items:center}.pc-row-title{margin-bottom:6px}.pc-adres{font-size:14px;font-weight:700;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:8px}.pc-energy{display:flex;align-items:center;gap:3px;padding:3px 8px;border-radius:5px;color:#fff;font-size:10px;font-weight:600;flex-shrink:0}.pc-makelaar-row{display:flex;align-items:center;gap:6px;margin-bottom:6px;min-width:0}.pc-makelaar{font-size:12px;color:#737373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.pc-bronnen{flex-shrink:0;font-size:8px;font-weight:600;color:#595959;background:#f2f2f2;padding:1px 5px;border-radius:999px;letter-spacing:-.1px;line-height:1.4}.pc-meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#737373;margin-bottom:8px}.pc-dot{margin:0 2px}.pc-row-bottom{margin-top:auto;padding-top:2px;gap:8px}.pc-prijs{font-size:12px;font-weight:700;color:#111;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}.pc-type-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.pc-type-dot.koop{background:#E7643E}.pc-type-dot.huur{background:#0073aa}.pc-right{display:flex;align-items:center;gap:8px;min-width:0;flex:1;justify-content:flex-end}.pc-score{padding:2px 6px;border-radius:999px;color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.pc-buurt{font-size:12px;font-weight:500;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (min-width:601px){
    /* Quicklane-badge alleen op mobiel zichtbaar */
    .pc-badge-quicklane{display:none}
}
@media (max-width:600px){
    /* Alle overlay-elementen op de afbeelding 32px hoog en uniform */
    .pc-status,.pc-fav,.pc-badge,.pc-badge-quicklane{box-sizing:border-box;height:32px;min-height:32px}
    .pc-status{top:14px;left:14px;padding:0 14px;font-size:12px;display:inline-flex;align-items:center;line-height:1}
    .pc-fav{top:14px;right:14px;width:32px;padding:0}
    .pc-badges{bottom:14px;left:14px;gap:7px}
    .pc-fav svg{width:16px;height:16px}
    .pc-badge{padding:0 12px;font-size:11px;line-height:1}
    .pc-badge svg{width:12px;height:12px}
    .pc-badge-quicklane{width:134px;border-radius:16px}
    .pc-badge-quicklane-grad{top:-32px;width:402px;height:96px;animation:pc-ql-slide-m 4s ease-in-out infinite alternate}
    .pc-badge-quicklane-inner svg{width:12px;height:12px}
    .pc-badge-quicklane-text{font-size:8.5px;letter-spacing:1.4px}
    @keyframes pc-ql-slide-m{from{transform:translateX(0)}to{transform:translateX(-268px)}}
}