/* Magnolia Overlook — lodge overlay for the VR Master Clean property-detail page only.
   Does not restyle homepage or other static pages.
   Do not invent Superhost / Top 1% badge chrome; highlight rows stay admin content. */

body.property-detail-page {
    --cream: #f5f1e8;
    --cream-deep: #ede7d9;
    --forest: #1e3a2f;
    --forest-deep: #14281f;
    --sage: #7a8b7f;
    --teal: #2f6b5e;
    --teal-deep: #244f45;
    --gold: #c9a961;
    --ink: #22251f;
    --ivory: #fbfaf6;
    --lodge-line: color-mix(in srgb, var(--ink) 12%, transparent);
    --lodge-serif: "Cormorant Garamond", Georgia, serif;
    --lodge-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Remap Cozy Things / Base VR tokens used by later sheets and blade inline styles. */
    --green: var(--teal);
    --green-dark: var(--forest);
    --green-light: var(--sage);
    --green-pale: var(--cream-deep);
    --brown: var(--forest);
    --brown-mid: var(--teal);
    --text-dark: var(--ink);
    --text-mid: #3d4338;
    --text-dull: var(--ink);
    --text-muted: var(--sage);
    --text-main: var(--ink);
    --heading-font: var(--lodge-serif);
    --body-font: var(--lodge-sans);
    --font-third: var(--lodge-sans);
    --bv-serif: var(--lodge-serif);
    --bv-sans: var(--lodge-sans);
    --bv-charcoal: var(--forest);
    --bv-ink: var(--ink);
    --bv-cream: var(--cream);
    --cream-dk: var(--cream-deep);
    --bg-light: var(--cream);
    --bg-main: var(--cream);
    --border-color: var(--cream-deep);
    --border-main: var(--lodge-line);
    --accent-red: var(--teal);

    background: var(--cream) !important;
    color: var(--ink);
    font-family: var(--lodge-sans);
    overflow-x: hidden;
}

body.property-detail-page.house-detail-page,
body.property-detail-page.condos-detail-page,
body.property-detail-page main.detail-main,
body.property-detail-page .category-detail,
body.property-detail-page .condos-detail-page,
body.property-detail-page .property-wrap {
    background: var(--cream) !important;
    color: var(--ink);
}

body.property-detail-page main.detail-main {
    font-family: var(--lodge-sans) !important;
    max-width: 100%;
    overflow-x: hidden;
}

body.property-detail-page .property-wrap,
body.property-detail-page .main-grid,
body.property-detail-page .left-col,
body.property-detail-page .right-col,
body.property-detail-page .container {
    min-width: 0;
}

body.property-detail-page .main-grid,
body.property-detail-page .left-col,
body.property-detail-page .right-col {
    max-width: 100%;
}

/* Headings: Cormorant + forest. Body: Jost + ink. */
body.property-detail-page .inner-banner h1,
body.property-detail-page .property-wrap h1,
body.property-detail-page .property-wrap h2,
body.property-detail-page .property-wrap h3,
body.property-detail-page .property-wrap h4,
body.property-detail-page .host-info h2,
body.property-detail-page .property-header h1,
body.property-detail-page .property-header h2,
body.property-detail-page .detail-page-title,
body.property-detail-page .map-section h2,
body.property-detail-page .reviews-section h3,
body.property-detail-page .property-calendar-section h3,
body.property-detail-page .property-policies-section h3,
body.property-detail-page .sleep-section h4,
body.property-detail-page .offcanvas-drawer h2,
body.property-detail-page .offcanvas-drawer h3,
body.property-detail-page .photos-overview-header h2,
body.property-detail-page .photos-overview-section h3 {
    font-family: var(--lodge-serif) !important;
    color: var(--forest) !important;
    font-weight: 500;
    letter-spacing: 0;
}

body.property-detail-page .house-detail-hero h1,
body.property-detail-page .condos-detail-hero h1,
body.property-detail-page .inner-banner h1 {
    color: var(--ivory) !important;
}

body.property-detail-page,
body.property-detail-page p,
body.property-detail-page .detail-desc,
body.property-detail-page .host-meta,
body.property-detail-page .detail-meta,
body.property-detail-page .detail-meta span,
body.property-detail-page .amenity-row,
body.property-detail-page .location-text,
body.property-detail-page .booking-disclaimer,
body.property-detail-page .no-reviews,
body.property-detail-page .policy-content,
body.property-detail-page .sleep-card p,
body.property-detail-page .highlight-item-pro p {
    font-family: var(--lodge-sans);
    color: var(--ink);
}

body.property-detail-page .host-meta,
body.property-detail-page .detail-meta,
body.property-detail-page .detail-meta span,
body.property-detail-page .location-text,
body.property-detail-page .text-muted,
body.property-detail-page .stay-limits-hint {
    color: var(--sage) !important;
}

/* Gold eyebrows — small caps labels, not fake Superhost chips. */
body.property-detail-page .property-field-card strong,
body.property-detail-page .date-box,
body.property-detail-page .guests-trigger-label,
body.property-detail-page .guest-selector {
    color: var(--gold) !important;
    font-family: var(--lodge-sans) !important;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.property-detail-page .about-section h3,
body.property-detail-page .amenities-section h3,
body.property-detail-page .sleep-section h3,
body.property-detail-page .map-section h2,
body.property-detail-page .property-calendar-section h3,
body.property-detail-page .property-policies-section h3,
body.property-detail-page .property-field-section h3,
body.property-detail-page .reviews-section h3 {
    position: relative;
}

body.property-detail-page .about-section h3::before,
body.property-detail-page .amenities-section h3::before,
body.property-detail-page .sleep-section h3::before,
body.property-detail-page .map-section h2::before,
body.property-detail-page .property-calendar-section h3::before,
body.property-detail-page .property-policies-section h3::before,
body.property-detail-page .property-field-section h3::before,
body.property-detail-page .reviews-section h3::before {
    content: "";
    display: block;
    width: 34px;
    height: 1px;
    background: var(--gold);
    margin: 0 0 .75em;
}

/* Teal actions — skip Airbnb red / Cozy Things navy. */
body.property-detail-page .reserve-btn,
body.property-detail-page button.reserve-btn,
body.property-detail-page .share-btn,
body.property-detail-page .pill-button-black,
body.property-detail-page .vr-sticky-book-now {
    background: var(--teal) !important;
    color: var(--ivory) !important;
    border: 0 !important;
    font-family: var(--lodge-sans) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(47, 107, 94, .28);
}

body.property-detail-page .reserve-btn:hover,
body.property-detail-page button.reserve-btn:hover,
body.property-detail-page .share-btn:hover,
body.property-detail-page .pill-button-black:hover,
body.property-detail-page .vr-sticky-book-now:hover,
body.property-detail-page .vr-sticky-book-now:focus {
    background: var(--teal-deep) !important;
    color: var(--ivory) !important;
}

body.property-detail-page .reserve-btn:disabled {
    opacity: .5;
    box-shadow: none;
}

body.property-detail-page .amenity-btn-all,
body.property-detail-page .read-more-btn,
body.property-detail-page .show-all-btn,
body.property-detail-page .clear-dates-btn {
    font-family: var(--lodge-sans) !important;
}

body.property-detail-page .amenity-btn-all,
body.property-detail-page .read-more-btn,
body.property-detail-page .show-all-btn {
    background: var(--ivory) !important;
    color: var(--teal) !important;
    border: 1.5px solid var(--teal) !important;
    border-radius: 10px;
}

body.property-detail-page .amenity-btn-all:hover,
body.property-detail-page .read-more-btn:hover,
body.property-detail-page .show-all-btn:hover {
    background: var(--teal) !important;
    color: var(--ivory) !important;
}

body.property-detail-page .clear-dates-btn {
    color: var(--teal) !important;
}

/* Ivory sticky booking card */
body.property-detail-page .booking-card-pro,
body.property-detail-page .booking-card {
    background: var(--ivory) !important;
    border: 1px solid var(--cream-deep);
    border-radius: 16px;
    color: var(--ink);
    box-shadow: 0 18px 40px -24px rgba(30, 58, 47, .35);
    font-family: var(--lodge-sans);
}

body.property-detail-page .booking-card-pro .price-row,
body.property-detail-page .price-nightly {
    font-family: var(--lodge-serif) !important;
    color: var(--forest) !important;
}

body.property-detail-page .booking-selectors,
body.property-detail-page .guests-popover,
body.property-detail-page .date-box input,
body.property-detail-page .guest-selector select {
    background: var(--ivory);
    border-color: var(--cream-deep);
    color: var(--ink);
}

body.property-detail-page .guests-popover {
    background: var(--ivory) !important;
    border: 1px solid var(--cream-deep);
    border-radius: 12px;
}

body.property-detail-page .guests-trigger-value,
body.property-detail-page .guests-row__label strong,
body.property-detail-page .stepper-value,
body.property-detail-page .guests-popover-close {
    color: var(--ink) !important;
    font-family: var(--lodge-sans);
}

body.property-detail-page .stepper-btn {
    background: var(--ivory);
    border-color: var(--sage);
    color: var(--forest);
}

body.property-detail-page .widget-price-list,
body.property-detail-page .widget-price-list__total,
body.property-detail-page .widget-options {
    color: var(--ink);
    font-family: var(--lodge-sans);
}

/* Rounded 1+4 gallery mosaic */
body.property-detail-page .gallery-1-4 {
    border-radius: 18px;
    overflow: hidden;
    max-width: 100%;
    background: var(--cream-deep);
}

body.property-detail-page .gallery-1-4 > div,
body.property-detail-page .gallery-1-4 a,
body.property-detail-page .gallery-1-4 img {
    min-width: 0;
    max-width: 100%;
}

body.property-detail-page .sleep-card,
body.property-detail-page .property-field-card,
body.property-detail-page .policy-card,
body.property-detail-page .map-placeholder,
body.property-detail-page .map-section iframe {
    background: var(--ivory) !important;
    border-color: var(--cream-deep) !important;
    border-radius: 14px;
    color: var(--ink);
}

body.property-detail-page .property-field-card span,
body.property-detail-page .property-field-card p,
body.property-detail-page .policy-content,
body.property-detail-page .policy-card h4 {
    color: var(--ink) !important;
    font-family: var(--lodge-sans);
}

body.property-detail-page .policy-card h4 {
    font-family: var(--lodge-serif) !important;
    color: var(--forest) !important;
}

body.property-detail-page .property-wrap,
body.property-detail-page .about-section,
body.property-detail-page .highlights-list,
body.property-detail-page .host-info,
body.property-detail-page .sleep-section,
body.property-detail-page .reviews-section,
body.property-detail-page .property-field-section,
body.property-detail-page .property-calendar-section,
body.property-detail-page .property-policies-section {
    border-color: var(--cream-deep);
}

/* Highlights are admin rows — not Superhost / Top 1% badge styling. */
body.property-detail-page .highlight-item-pro {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

body.property-detail-page .highlight-item-pro h4 {
    font-family: var(--lodge-serif) !important;
    color: var(--forest) !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body.property-detail-page .highlight-item-pro svg,
body.property-detail-page .highlight-item-pro i {
    color: var(--forest) !important;
}

body.property-detail-page .amenity-row i,
body.property-detail-page .amenity-row svg {
    color: var(--teal);
}

/* Reviews: ivory cards + ink type (not navy/white Cozy Things). */
body.property-detail-page .property-wrap .review-card,
body.property-detail-page .review-card {
    background: var(--ivory) !important;
    color: var(--ink) !important;
    border: 1px solid var(--cream-deep);
    border-radius: 14px;
    box-shadow: none;
}

body.property-detail-page .property-wrap .review-card,
body.property-detail-page .property-wrap .review-card *,
body.property-detail-page .property-wrap .review-text,
body.property-detail-page .property-wrap .review-card .rev-info h4,
body.property-detail-page .property-wrap .review-card .review-user-name,
body.property-detail-page .property-wrap .review-card .rev-info span,
body.property-detail-page .property-wrap .review-card .review-meta,
body.property-detail-page .property-wrap .review-card .review-date {
    color: var(--ink) !important;
    font-family: var(--lodge-sans);
}

body.property-detail-page .property-wrap .review-card .rev-info h4,
body.property-detail-page .property-wrap .review-card .review-user-name {
    font-family: var(--lodge-serif) !important;
    color: var(--forest) !important;
}

body.property-detail-page .property-wrap .review-card .rev-info span,
body.property-detail-page .property-wrap .review-card .review-meta,
body.property-detail-page .property-wrap .review-card .review-date {
    color: var(--sage) !important;
}

body.property-detail-page .rev-avatar {
    background: var(--cream-deep);
    border-color: var(--cream-deep);
}

body.property-detail-page .about-clamp.is-clamped::after {
    background: linear-gradient(to bottom, rgba(245, 241, 232, 0), var(--cream));
}

body.property-detail-page .photos-overview-modal,
body.property-detail-page .photos-overview-header,
body.property-detail-page .offcanvas-drawer,
body.property-detail-page .offcanvas-header {
    background: var(--ivory) !important;
    color: var(--ink);
    font-family: var(--lodge-sans);
}

body.property-detail-page .photos-overview-header,
body.property-detail-page .offcanvas-header,
body.property-detail-page .amenity-group,
body.property-detail-page .amenity-group ul li,
body.property-detail-page .review-card-full {
    border-color: var(--cream-deep) !important;
}

body.property-detail-page #inline-property-calendar .flatpickr-calendar {
    background: var(--ivory);
    border-color: var(--cream-deep);
    font-family: var(--lodge-sans);
    box-shadow: 0 8px 24px rgba(30, 58, 47, .08);
}

body.property-detail-page #inline-property-calendar .cal-day-rate {
    color: var(--sage);
}

/* Mobile: mosaic stacks, booking sits below, no horizontal overflow. */
@media (max-width: 992px) {
    body.property-detail-page {
        overflow-x: hidden;
    }

    body.property-detail-page .main-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    body.property-detail-page .gallery-1-4 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(220px, 42vw) minmax(110px, 21vw) minmax(110px, 21vw);
        gap: 6px;
        height: auto;
        max-width: 100%;
        overflow: hidden;
        border-radius: 16px;
    }

    body.property-detail-page .gallery-1-4 .gal-main {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 0;
    }

    body.property-detail-page .gallery-1-4 > div:not(.gal-main) {
        display: block !important;
        min-height: 0;
        overflow: hidden;
    }

    body.property-detail-page .booking-card-pro,
    body.property-detail-page .booking-card {
        position: static;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
    }

    body.property-detail-page .date-inputs,
    body.property-detail-page .booking-selectors {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    body.property-detail-page .date-inputs,
    body.property-detail-page .date-inputs-grid {
        display: grid;
        grid-template-columns: 1fr;
        min-width: 0;
        max-width: 100%;
    }

    body.property-detail-page .date-box:first-child,
    body.property-detail-page .date-field-wrapper:first-child {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    body.property-detail-page .booking-card-pro,
    body.property-detail-page .booking-card {
        position: static;
        width: 100%;
        max-width: 100%;
    }

    body.property-detail-page #inline-property-calendar .flatpickr-calendar,
    body.property-detail-page #inline-calendar .flatpickr-calendar,
    #inline-calendar .flatpickr-calendar {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    body.property-detail-page .gallery-1-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(200px, 48vw) repeat(2, minmax(88px, 24vw));
    }

    body.property-detail-page .gallery-1-4 .gal-main {
        grid-column: 1 / -1;
    }

    body.property-detail-page .review-grid,
    body.property-detail-page .policy-grid {
        grid-template-columns: 1fr !important;
    }

    body.property-detail-page .property-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    body.property-detail-page .show-all-btn {
        right: 12px;
        bottom: 12px;
    }

    body.property-detail-page .detail-main {
        padding-bottom: 72px;
    }
}

/* Homepage gutters: max-w-7xl + px-4/sm:px-6/lg:px-8 feel.
   Ink header/footer and the hero photo stay full-bleed; copy/gallery do not. */
body.property-detail-page .house-detail-hero .container,
body.property-detail-page .condos-detail-hero .container,
body.property-detail-page .inner-banner .container,
body.property-detail-page .property-wrap,
body.property-detail-page .gallery-1-4,
body.property-detail-page .main-grid,
body.property-detail-page .property-calendar-section,
body.property-detail-page .map-section,
body.property-detail-page .property-policies-section {
    width: min(72rem, 100%);
    max-width: min(72rem, 100%);
    margin-inline: auto;
    box-sizing: border-box;
    padding-inline: clamp(1rem, 4vw, 2rem) !important;
}

body.property-detail-page .property-wrap .gallery-1-4,
body.property-detail-page .property-wrap .main-grid,
body.property-detail-page .property-wrap .property-calendar-section,
body.property-detail-page .property-wrap .map-section,
body.property-detail-page .property-wrap .property-policies-section {
    width: 100%;
    max-width: 100%;
    padding-inline: 0 !important;
}

body.property-detail-page > header.fixed.inset-x-0 {
    height: 6rem !important;
    min-height: 6rem !important;
    padding: 0 !important;
    border-bottom: 0 !important;
    background-color: color-mix(in srgb, var(--ink, #22251f) 95%, transparent) !important;
    position: fixed !important;
    display: block !important;
    z-index: 50 !important;
}