/* Homepage redesign - "calm editorial". Tokens first, components below. */
.lus-home-page,
.lus-stays-page {
    --lus-bg: #fbf8f5;
    --lus-surface: #ffffff;
    --lus-tint: #f4efe9;
    --lus-ink: #1c1917;
    --lus-muted: #78716c;
    --lus-line: #e7e0d8;
    --lus-accent: #d4363c;
    --lus-accent-ink: #b72a30;
    --lus-radius: 20px;
    --lus-radius-sm: 12px;
    --lus-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 8px 24px rgba(28, 25, 23, .06);
    --lus-shadow-lift: 0 2px 4px rgba(28, 25, 23, .05), 0 18px 40px rgba(28, 25, 23, .12);
    --lus-ease: cubic-bezier(.22, .61, .36, 1);
    --lus-dur: 250ms;
    --lus-serif: inherit;   /* the theme font (Poppins); headings no longer use a separate serif */
    background: var(--lus-bg);
}

.lus-home { color: var(--lus-ink); background: var(--lus-bg); }
/* The theme boxes page content; let the backdrop sections run edge to edge. */
.lus-home { width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
body.lus-home-page { overflow-x: clip; }
.lus-home *, .lus-home *::before, .lus-home *::after { box-sizing: border-box; }
.lus-home a { text-decoration: none; color: inherit; }
.lus-home h1, .lus-home h2, .lus-home h3 { margin: 0; color: var(--lus-ink); }
.lus-home p { margin: 0; }
.lus-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---- Hero ---- */
.lus-hero {
    position: relative;
    padding: 96px 24px 120px;
    /* No photo yet: a light warm gradient with dark text. */
    background: linear-gradient(180deg, #f7e6dc 0%, #f4ece4 55%, var(--lus-bg) 100%);
    color: var(--lus-ink);
    text-align: center;
}
/* With a seasonal photo: dark fade for legibility, white text. */
.lus-hero-photo .lus-hero,
.lus-hero.lus-hero--photo {
    background:
        /* a solid strip along the bottom edge: the photo is scaled to a fractional height, and its last pixel row used to peek out below the fade as a thin bluish line */
        linear-gradient(#fbf8f5, #fbf8f5) bottom / 100% 3px no-repeat,
        linear-gradient(180deg, rgba(28, 25, 23, var(--lus-hero-o1, .55)) 0%, rgba(28, 25, 23, var(--lus-hero-o2, .35)) 60%, rgba(251, 248, 245, 1) 100%),
        var(--lus-hero-img) center / cover no-repeat;
    color: #fff;
}
.lus-hero__inner { max-width: 880px; margin: 0 auto; }
.lus-home .lus-eyebrow { text-align: center; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-bottom: 18px; }
.lus-home .lus-hero__title {
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--lus-ink);
    text-wrap: balance;
}
.lus-hero-photo .lus-hero__title, .lus-home .lus-hero-photo .lus-hero__title,
.lus-home .lus-hero--photo .lus-hero__title { color: #fff; }
.lus-home .lus-hero__lead { margin: 22px auto 40px; max-width: 540px; text-align: center; color: var(--lus-muted); font-size: 18px; line-height: 1.55; }
.lus-hero-photo .lus-hero__lead, .lus-home .lus-hero--photo .lus-hero__lead { color: #fff; opacity: .92; }

/* ---- Category pills ---- */
.lus-cats { background: rgba(251, 248, 245, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lus-line); }
.lus-cats__row { display: flex; gap: 10px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scroll-snap-type: x proximity; }
.lus-pill {
    flex: none; scroll-snap-align: start;
    padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; white-space: nowrap;
    color: var(--lus-muted); background: transparent; border: 1px solid transparent;
    transition: color var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease), border-color var(--lus-dur) var(--lus-ease);
}
.lus-pill:hover { color: var(--lus-ink); background: var(--lus-tint); }
.lus-pill.is-active { color: var(--lus-ink); background: var(--lus-surface); border-color: var(--lus-line); box-shadow: var(--lus-shadow); }

/* ---- Sections ---- */
.lus-section { padding: 72px 0; }
.lus-section--tint { background: var(--lus-tint); }
.lus-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.lus-home .lus-section__head h2 { font-family: inherit; font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.01em; }
.lus-section__sub { margin-top: 8px; color: var(--lus-muted); font-size: 16px; }
.lus-link { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--lus-ink); border-bottom: 1px solid var(--lus-line); padding-bottom: 2px; transition: border-color var(--lus-dur) var(--lus-ease), color var(--lus-dur) var(--lus-ease); }
.lus-link:hover { color: var(--lus-accent); border-color: var(--lus-accent); }

/* ---- Listing cards ---- */
.lus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; }
.lus-card { position: relative; border-radius: var(--lus-radius); background: var(--lus-surface); box-shadow: var(--lus-shadow); transition: transform var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease); }
.lus-card:hover { transform: translateY(-4px); box-shadow: var(--lus-shadow-lift); }
.lus-card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--lus-radius) var(--lus-radius) 0 0; background: var(--lus-tint); }
.lus-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--lus-ease); }
.lus-card:hover .lus-card__media img { transform: scale(1.04); }
.lus-card__badge { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--lus-ink); font-size: 12px; font-weight: 600; letter-spacing: .02em; backdrop-filter: blur(6px); }
.lus-card__fav {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .92); display: grid; place-items: center; font-size: 0; /* hides the theme's label text */
    transition: transform var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease);
}
.lus-card__fav::before { content: ""; width: 18px; height: 18px; background: var(--lus-ink); -webkit-mask: var(--lus-heart) center / contain no-repeat; mask: var(--lus-heart) center / contain no-repeat; opacity: .8; }
.lus-card__fav.icon-fav-on::before { background: var(--lus-accent); opacity: 1; -webkit-mask-image: var(--lus-heart-fill); mask-image: var(--lus-heart-fill); }
.lus-card__fav:hover { transform: scale(1.08); background: #fff; }
.lus-home-page {
    --lus-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 20.5s-7.5-4.6-9.2-9.1C1.6 8.2 3.4 5 6.6 5c2 0 3.5 1.1 5.4 3 1.9-1.9 3.4-3 5.4-3 3.2 0 5 3.200 3.800 6.400C19.500 15.900 12 20.500 12 20.500z'/%3E%3C/svg%3E");
    --lus-heart-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.5 2.7 5 6 5c2 0 3.300 1 4 2.200h4C14.700 6 16 5 18 5c3.300 0 5.100 3.500 3.600 6.800C19.500 16.400 12 21 12 21z'/%3E%3C/svg%3E");
}
.lus-card__body { display: block; padding: 18px 20px 20px; }
.lus-home .lus-card__title { font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.25; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lus-card__loc { margin-top: 4px; font-size: 14px; color: var(--lus-muted); }
.lus-card__facts { margin-top: 10px; font-size: 13px; color: var(--lus-muted); }
.lus-card__price { margin-top: 14px; font-size: 14px; color: var(--lus-muted); }
.lus-card__price strong { font-size: 18px; color: var(--lus-ink); font-weight: 600; }

/* ---- Peeks strip ---- */
.lus-peeks { display: flex; gap: 18px; overflow-x: auto; padding: 4px 4px 20px; margin: 0 -4px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lus-peek { flex: none; position: relative; width: 220px; aspect-ratio: 9 / 16; border-radius: var(--lus-radius); overflow: hidden; background: #2a2522; scroll-snap-align: start; box-shadow: var(--lus-shadow); transition: transform var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease); }
.lus-peek:hover { transform: translateY(-4px); box-shadow: var(--lus-shadow-lift); }
.lus-peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--lus-ease); }
.lus-peek:hover img { transform: scale(1.05); }
.lus-peek::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7) 100%); }
.lus-peek__play { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lus-peek__meta { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; color: #fff; display: flex; flex-direction: column; gap: 3px; }
.lus-peek__meta strong { font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lus-peek__meta em { font-style: normal; font-size: 13px; opacity: .85; }

/* ---- Why us ---- */
.lus-why { border-top: 1px solid var(--lus-line); }
.lus-home .lus-why__title { font-family: inherit; font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); text-align: center; margin-bottom: 48px; }
.lus-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 960px; margin: 0 auto; }
.lus-why__n { display: block; font-family: inherit; font-size: 15px; color: var(--lus-accent); margin-bottom: 14px; }
.lus-home .lus-why__grid h3 { font-family: inherit; font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.lus-why__grid p { color: var(--lus-muted); line-height: 1.6; font-size: 15px; }

/* ---- Host CTA ---- */
.lus-host { padding: 0 0 80px; }
.lus-host__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 48px 56px; border-radius: 28px; background: var(--lus-ink); color: #fff; max-width: 1232px; }
.lus-home .lus-host h2 { font-family: inherit; font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: #fff; }
.lus-host p { margin-top: 8px; opacity: .75; }
.lus-btn { display: inline-block; padding: 14px 30px; border-radius: 999px; font-weight: 600; font-size: 15px; white-space: nowrap; transition: transform var(--lus-dur) var(--lus-ease), background var(--lus-dur) var(--lus-ease), color var(--lus-dur) var(--lus-ease); }
.lus-btn--light { background: #fff; color: var(--lus-ink) !important; }
.lus-btn--light:hover { transform: translateY(-2px); background: var(--lus-accent); color: #fff !important; }

/* ---- Scroll reveal ---- */
.lus-js .lus-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--lus-ease), transform 600ms var(--lus-ease); }
.lus-js .lus-reveal.is-in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 1100px) { .lus-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) {
    .lus-hero { padding: 64px 16px 88px; }
        .lus-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
    .lus-section { padding: 48px 0; }
    .lus-wrap { padding: 0 16px; }
    .lus-why__grid { grid-template-columns: 1fr; gap: 28px; }
    .lus-host__inner { flex-direction: column; align-items: flex-start; padding: 32px 24px; border-radius: 22px; margin: 0 16px; width: auto; }
    .lus-peek { width: 170px; }
    .lus-card__body { padding: 14px 14px 16px; }
    .lus-home .lus-card__title { font-size: 17px; }
}
@media (max-width: 520px) { .lus-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .lus-home *, .lus-home *::before, .lus-home *::after { transition-duration: .01ms !important; animation: none !important; }
    .lus-js .lus-reveal { opacity: 1; transform: none; }
}

/* ---- Transparent header over the hero (desktop). Turns white once scrolled. ---- */
@media (min-width: 1025px) {
    body.lus-home-page .master_header {
        position: fixed; top: 0; left: 0; right: 0; width: 100%;
        background: transparent !important; border-color: transparent !important; box-shadow: none;
        transition: none;   /* the theme re-lays the header out instantly at the top; a fade here showed a half-white bar */
    }
    body.admin-bar.lus-home-page .master_header { top: 32px; }
    body.lus-home-page .header_wrapper, body.lus-home-page .header_wrapper_inside { background: transparent !important; }
    .lus-home-page .lus-hero { padding-top: 168px; }

    /* Over the photo: white text and a white logo. */
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header #access ul li a,
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header .user_menu .signuplink {
        color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
    }
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header #access ul li a i,
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header .user_menu i { color: #fff !important; }
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header .logo img { filter: brightness(0) invert(1); }
    body.lus-home-page .master_header .logo img { transition: none; }

    /* After scrolling: solid white with a soft shadow. The theme pins .header_wrapper
       itself on scroll, so that layer needs the white too (and full opacity). */
    body.lus-home-page.lus-header-solid .header_wrapper,
    body.lus-home-page.lus-header-solid .header_wrapper_inside {
        background: rgba(255, 255, 255, .96) !important; opacity: 1 !important;
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    body.lus-home-page.lus-header-solid .header_wrapper { box-shadow: 0 1px 0 var(--lus-line), 0 8px 24px rgba(28, 25, 23, .06); }
    body.lus-home-page .header_wrapper { transition: none; }

    body.lus-home-page.lus-header-solid .master_header {
        background: rgba(255, 255, 255, .94) !important;
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 1px 0 var(--lus-line), 0 8px 24px rgba(28, 25, 23, .06);
    }
}

/* ---- Phone: the collapsed pill + the expanded search panel ---- */
@media (max-width: 766px) {
    /* Collapsed: just the red pill (no white ring around it). */
    }

/* =====================================================================
   Wander-style structure: compact hero, scrolling rows, dark band,
   compact search in the header.
   ===================================================================== */

/* ---- Compact hero ---- */
.lus-hero { padding: 72px 24px 64px; }
.lus-home .lus-hero__title { font-size: clamp(28px, 4.2vw, 46px); }
.lus-home .lus-hero__lead { margin: 16px auto 32px; font-size: 17px; }
@media (min-width: 1025px) { .lus-home-page .lus-hero { padding-top: 140px; padding-bottom: 72px; } }
@media (max-width: 800px) { .lus-hero { padding: 44px 16px 52px; } }

/* ---- Rows ---- */
.lus-section--row { padding: 40px 0 16px; }
.lus-section--row + .lus-section--row { padding-top: 24px; }
.lus-section__tools { display: flex; align-items: center; gap: 20px; }
.lus-arrows { display: flex; gap: 8px; }
.lus-arrow {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lus-line); background: var(--lus-surface);
    color: var(--lus-ink); display: grid; place-items: center; cursor: pointer; padding: 0;
    transition: background var(--lus-dur) var(--lus-ease), border-color var(--lus-dur) var(--lus-ease), opacity var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease);
}
.lus-arrow:hover:not([disabled]) { background: var(--lus-ink); color: #fff; border-color: var(--lus-ink); transform: scale(1.05); }
.lus-arrow[disabled] { opacity: .35; cursor: default; }
.lus-row {
    display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding: 6px 4px 28px; margin: 0 -4px; scrollbar-width: none;
}
.lus-row::-webkit-scrollbar { display: none; }
.lus-row > .lus-card { flex: 0 0 calc((100% - 3 * 22px) / 4.25); scroll-snap-align: start; min-width: 240px; }
@media (max-width: 1100px) { .lus-row > .lus-card { flex-basis: calc((100% - 2 * 22px) / 3.2); } }
@media (max-width: 800px) {
    .lus-row { gap: 14px; }
    .lus-row > .lus-card { flex-basis: 74%; min-width: 0; }
    .lus-arrows { display: none; }
    .lus-section--row { padding: 28px 0 8px; }
}
.lus-card__rating { font-family: var(--lus-sans, inherit); font-size: 13px; font-weight: 500; color: var(--lus-muted); white-space: nowrap; }
.lus-card__price span { color: var(--lus-muted); }

/* ---- Dark "why" band ---- */
.lus-why--dark { background: var(--lus-ink); color: #fff; border: 0; width: 100%; padding: 88px 0; margin-top: 40px; }
.lus-home .lus-why--dark .lus-why__title { color: #fff; text-align: left; max-width: 520px; margin: 0 0 56px; font-weight: 600; }
.lus-home .lus-why--dark .lus-why__title span { color: rgba(255, 255, 255, .45); }
.lus-why--dark .lus-why__grid { max-width: none; gap: 48px; }
.lus-why--dark .lus-why__n { color: rgba(255, 255, 255, .5); }
.lus-home .lus-why--dark .lus-why__grid h3 { color: #fff; }
.lus-why--dark .lus-why__grid p { color: rgba(255, 255, 255, .62); }
.lus-host { padding-top: 0; }
.lus-why--dark + .lus-host { background: var(--lus-ink); padding: 0 0 72px; }
.lus-why--dark + .lus-host .lus-host__inner { background: rgba(255, 255, 255, .08); }

/* ---- Compact search in the header (desktop, after scrolling past the hero search) ---- */
.lus-header-pill { display: none; }
@media (min-width: 1025px) {
    .lus-header-pill {
        display: flex; align-items: center; gap: 0; position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
        padding: 6px 6px 6px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--lus-line);
        box-shadow: var(--lus-shadow); cursor: pointer; font: 500 14px/1 inherit; color: var(--lus-ink);
        transition: opacity var(--lus-dur) var(--lus-ease), transform var(--lus-dur) var(--lus-ease), box-shadow var(--lus-dur) var(--lus-ease);
        z-index: 3;
    }
    .lus-header-pill:hover { box-shadow: var(--lus-shadow-lift); }
    .lus-header-pill__seg { padding: 0 14px; white-space: nowrap; }
    .lus-header-pill__seg + .lus-header-pill__seg { border-left: 1px solid var(--lus-line); }
    .lus-header-pill__go { margin-left: 8px; width: 36px; height: 36px; border-radius: 50%; background: var(--lus-accent); color: #fff; display: grid; place-items: center; }
    body.lus-search-compact .lus-header-pill { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
    body.lus-home-page #access { transition: opacity var(--lus-dur) var(--lus-ease), visibility var(--lus-dur); }
    body.lus-search-compact #access { opacity: 0; visibility: hidden; }
}

/* Solid header: let the white run edge to edge (the theme insets the wrapper 35px). */
@media (min-width: 1025px) {
    /* A full-width bar behind the header instead of a 100vmax box-shadow: that shadow had to be cut off with clip-path,
       which also cut off the Support drop-down (it opens below the header). */
    body.lus-home-page.lus-header-solid .header_wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        z-index: -1;
        background: rgba(255, 255, 255, .96);
        border-bottom: 1px solid var(--lus-line);
        pointer-events: none;
    }
    body.lus-home-page.lus-header-solid .master_header { box-shadow: 0 10px 28px rgba(28, 25, 23, .07); }
}

/* =====================================================================
   Search bar, Wander-style: Where | When | Who | Search
   ===================================================================== */
.lus-card__dates { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--lus-ink); text-decoration: underline; text-decoration-color: var(--lus-line); text-underline-offset: 4px; }
.lus-card__dates + .lus-card__price { margin-top: 4px; }
.lus-card__price { font-size: 14px; }

@media (min-width: 767px) {
    }
.lus-home-page { --lus-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E"); }

/* Header pill: same structure. */
@media (min-width: 1025px) {
    .lus-header-pill { padding-left: 14px; }
    .lus-header-pill__go { width: auto; height: 36px; border-radius: 999px; padding: 0 16px; font-size: 14px; font-weight: 600; margin-left: 6px; }
    .lus-header-pill__go svg { display: none; }
}


/* Header pill: each part is its own button and shows what was chosen. */
@media (min-width: 1025px) {
    .lus-header-pill { cursor: default; padding: 6px 6px 6px 8px; gap: 0; }
    .lus-header-pill__seg { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 500; color: var(--lus-ink); padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: 190px; transition: background var(--lus-dur) var(--lus-ease); }
    .lus-header-pill__seg span { display: block; overflow: hidden; text-overflow: ellipsis; }
    .lus-header-pill__seg:hover { background: var(--lus-tint); }
    .lus-header-pill__seg.has-value { font-weight: 600; }
    .lus-header-pill__seg:not(.has-value) { color: var(--lus-muted); }
    .lus-header-pill__seg + .lus-header-pill__seg { box-shadow: -1px 0 0 var(--lus-line); border-radius: 0 999px 999px 0; }
    .lus-header-pill__seg + .lus-header-pill__seg:hover { box-shadow: none; border-radius: 999px; }
    .lus-header-pill__go { margin-left: 6px; height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--lus-accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--lus-dur) var(--lus-ease); }
    .lus-header-pill__go:hover { background: var(--lus-accent-ink); }
}

/* =====================================================================
   Elementor-built homepage (home/widgets.php): each section is its own widget, so rules that relied on
   neighbouring sections (adjacent-sibling selectors) are restated per widget.
   ===================================================================== */
.lus-home__free { width: 100%; }
.lus-home__free .elementor-widget { width: 100%; }
.lus-home__free .elementor-widget-lus_home_row + .elementor-widget-lus_home_row .lus-section--row { padding-top: 24px; }
.lus-host--dark { background: var(--lus-ink); padding: 0 0 72px; }
.lus-host--dark .lus-host__inner { background: rgba(255, 255, 255, .08); }

/* Row as a grid instead of one scrolling line */
.lus-row--grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; overflow: visible; scroll-snap-type: none; padding-bottom: 8px; }
.lus-row--grid > .lus-card { flex: none; min-width: 0; }
@media (max-width: 1100px) { .lus-row--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .lus-row--grid { grid-template-columns: 1fr; } .lus-row--grid > .lus-card { flex-basis: auto; } }

/* Editor-only: a row that visitors do not see right now */
.lus-section--row.is-hidden-for-visitors { opacity: .55; }
.lus-row-note { margin: 0 0 14px; padding: 8px 14px; border-radius: 10px; background: #fff4d6; color: #7a5b00; font-size: 13px; }
.lus-widget-hint { margin: 16px 24px; padding: 10px 14px; border-radius: 10px; background: #f1ebe4; color: #5b534c; font-size: 13px; }

/* Elementor gives every image `height: auto; max-width: 100%`, which stopped photos short of filling their frame
   (the peeks showed a dark gap under the picture). Frames that crop their photo set the size back. */
.lus-home .lus-peek img,
.lus-home .lus-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.lus-home .lus-peek { background: transparent; }

/* ---- Header fixes (desktop) ---- */
@media (min-width: 1025px) {
    /* Over the photo the signed-in name is white like the rest of the menu. */
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header .menu_username { color: #fff !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
    /* With the WordPress toolbar showing, the theme adds a 32px top margin to the scrolled header bar; the header
       container is already moved down by the toolbar above, so the bar sat 64px down with a gap above it. */
    body.admin-bar.lus-home-page .master_header .header_wrapper.customnav { margin-top: 0 !important; }
}

/* The "All rates" tooltip styles moved to css/lus-price-tip.css (shared with the property page's similar listings). */
/* the card's own price line should not shift when the (i) is added */
.lus-card__price, .lus-stay__price p { white-space: normal; }
/* Property type pills inside the hero, directly under the search bar (no full-width band, no "All stays") */
.lus-cats--hero { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; margin-top: 22px; }
.lus-cats--hero .lus-cats__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; overflow: visible; padding: 0; }
.lus-cats--hero .lus-pill { color: var(--lus-ink); background: rgba(255, 255, 255, .72); border: 1px solid var(--lus-line); }
.lus-cats--hero .lus-pill:hover { background: #fff; color: var(--lus-ink); }
/* over a photo: glass pills with white text */
.lus-hero--photo .lus-cats--hero .lus-pill { color: var(--lus-ink); background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lus-hero--photo .lus-cats--hero .lus-pill:hover { background: #fff; color: var(--lus-ink); }
@media (max-width: 600px) {
    /* one swipeable line on a phone instead of several wrapped rows */
    .lus-cats--hero .lus-cats__row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
}

/* ---- Header dropdowns (Support > Contact / FAQ), desktop, homepage and Stays ---- */
@media (min-width: 1025px) {
    /* The white-over-the-photo menu style is for the top level only; a dropdown is a white card with dark text. */
    body:is(.lus-home-page, .lus-stays-page) .master_header #access ul.sub-menu {
        min-width: 200px; width: auto; padding: 8px; border: 1px solid var(--lus-line); border-radius: 14px;
        background: #fff; box-shadow: 0 14px 36px rgba(28, 25, 23, .16);
    }
    body:is(.lus-home-page, .lus-stays-page) .master_header #access ul.sub-menu li a,
    body.lus-home-page.lus-hero-photo:not(.lus-header-solid) .master_header #access ul.sub-menu li a {
        display: block; padding: 11px 16px; border-radius: 10px; color: var(--lus-ink) !important; text-shadow: none !important;
        font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; background: transparent;
    }
    body:is(.lus-home-page, .lus-stays-page) .master_header #access ul.sub-menu li a:hover,
    body:is(.lus-home-page, .lus-stays-page) .master_header #access ul.sub-menu li a:focus-visible { background: var(--lus-tint); color: var(--lus-ink) !important; }
    body:is(.lus-home-page, .lus-stays-page) .master_header #access ul.sub-menu li a i { color: var(--lus-muted) !important; }
}

/* ---- Scroll hint: a row of pills that can scroll sideways gets a thin indicator of our own under it (js/lus-scroll-hint.js), because phones hide
   their native scrollbars. Homepage pills and the Stays rate-plan / type chips. The native scrollbar is switched off so there is only one. ---- */
.lus-cats__row, .lus-stays__chips { scrollbar-width: none; }
.lus-cats__row::-webkit-scrollbar, .lus-stays__chips::-webkit-scrollbar { display: none; }
.lus-stays__chips { padding-bottom: 2px; }
.lus-scrollbar { position: relative; height: 4px; margin-top: 6px; border-radius: 999px; background: rgba(28, 25, 23, .14); overflow: hidden; opacity: 0; transition: opacity 220ms var(--lus-ease); pointer-events: none; }
.lus-scrollbar.is-active { opacity: 1; }
/* While a row is idle, a soft fade on the side that has more pills tells people it scrolls. */
.lus-fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.lus-fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px); mask-image: linear-gradient(to right, transparent, #000 36px); }
.lus-fade-l.lus-fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
@media (prefers-reduced-motion: reduce) { .lus-scrollbar { transition: none; } }
.lus-scrollbar[hidden] { display: none; }
.lus-scrollbar i { position: absolute; top: 0; bottom: 0; left: 0; min-width: 28px; border-radius: 999px; background: rgba(28, 25, 23, .6); }
.lus-hero--photo .lus-scrollbar { background: rgba(255, 255, 255, .35); }
.lus-hero--photo .lus-scrollbar i { background: rgba(255, 255, 255, .95); }
.lus-stays__top > .lus-scrollbar, .lus-stays__free .lus-stays__chips + .lus-scrollbar { margin-left: 0; margin-right: 0; }

/* ---- Phone homepage: the "Find your ideal stay" button stays pinned at the top once the hero's own button has scrolled away
   (the Stays page does the same with its search bar). Built by js/lus-home.js. ---- */
.lus-find-bar { display: none; }
@media (max-width: 766px) {
    .lus-find-bar {
        display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1100; padding: 10px 16px;
        background: var(--lus-bg, #fbf8f5); border-bottom: 1px solid var(--lus-line, #e7e0d8); box-shadow: 0 6px 18px rgba(28, 25, 23, .06);
        transform: translateY(-110%); transition: transform 240ms var(--lus-ease, ease);
    }
    body.lus-find-stuck .lus-find-bar { transform: none; }
    .admin-bar .lus-find-bar { top: 46px; }
    html.lus-sheet-open .lus-find-bar { display: none; }
    .lus-find-bar__btn {
        display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
        background: var(--lus-accent, #d4363c); color: #fff; font: 600 15px/1 inherit; cursor: pointer; box-shadow: var(--lus-shadow, 0 4px 14px rgba(28, 25, 23, .12));
    }
    .lus-find-bar__btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Header: one clean switch on scroll (home + Stays). The theme gives #submit_action `transition: all .3s` and the pinned header
   `transition: all .45s`, so Become a Host slid and resized while the bar changed shape. The bar itself switches in one step (no fade, so no half-white frame); only the button colours fade. ---- */
@media (min-width: 1025px) {
    body:is(.lus-home-page, .lus-stays-page) .header_wrapper,
    body:is(.lus-home-page, .lus-stays-page) .header_wrapper.customnav { transition: none !important; }
    body:is(.lus-home-page, .lus-stays-page) .master_header #submit_action { transition: background-color .2s linear, color .2s linear !important; color: #fff !important; }
}


/* The "why" + "become a host" pair is one dark band: the band owns the background, so nothing inside can fade to white. */
.lus-band { background: var(--lus-ink); margin-top: 40px; }
.lus-band .lus-why--dark { margin-top: 0; background: transparent; }
.lus-band .lus-host { background: transparent; }

/* Hairlines on the phone home page: (1) the filter bar under the hero photo drew a 1px border line across the page; (2) the dark "why" band and the
   host banner under it are two boxes, and a fractional pixel between them let the light page colour show as a thin line. They overlap by a pixel now. */
@media (max-width: 766px) {
    .lus-cats, .lus-cats--hero { border-bottom: 0; }
}
.lus-why--dark + .lus-host, .lus-host--dark { margin-top: -1px; box-shadow: 0 -1px 0 var(--lus-ink); position: relative; }
.lus-band .lus-why--dark, .lus-band .lus-host { box-shadow: none; margin-top: 0; }

/* Property type pills: the type's icon and a smaller label */
.lus-pill { font-size: 13px; padding: 8px 16px; }
.lus-pill--icon { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px 7px 12px; }
.lus-pill__icon { flex: none; display: grid; place-items: center; width: 18px; height: 18px; font-style: normal; }
.lus-pill__icon svg { width: 18px; height: 18px; max-width: 100%; fill: currentColor; }
/* The built-in type icons are line drawings (libs/type-icons.php): stroke, no fill */
svg.lus-ti { fill: none !important; stroke: currentColor; }

/* Featured amenities + featured house rules on homepage cards (same icon chips as the Stays cards) */
.lus-card__amen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.lus-card__amen li { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--lus-line); border-radius: 999px; background: var(--lus-surface); color: var(--lus-ink); font-size: 12px; cursor: default; }
.lus-card__amen i { display: grid; place-items: center; width: 16px; height: 16px; font-style: normal; }
.lus-card__amen svg, .lus-card__amen img { width: 16px; height: 16px; max-width: 100%; fill: currentColor; object-fit: contain; }
.lus-card__amen-more { color: var(--lus-muted) !important; }