/* ==========================================================================
   property-new.css v1.8.0 (Oct 28 2026)
   v1.8.0: Home Type section (facts row) uses the same 4-column grid as
   Features (5th item goes to the next row; 3 on tablets, 2 on phones) and
   shows More details as small lines under the value. Features and facts
   align to the top, so a long label wraps under itself and every icon sits
   on the first line of its text.
   v1.7.0: Features: an emoji icon from the Key Features List gets the same
   24px box as the Material icons (.alhp-feature-emoji).
   v1.5.0: media row scrolls sideways when the tiles do not fit: finger
   swipe on phones (no page back-swipe at the ends), hold-and-drag with the
   mouse on desktop (property-new.js 3b): grab / grabbing cursor, no text
   selection or image ghost while dragging.
   v1.4.0: Promo / Ads banner wrapper (.alhp-promo) at the top, under the
   breadcrumb + search, above the photo (same place as the current design).
   Full width; the Elementor template keeps its own width, spacing and image
   display. Unit cards: the unit's promo text sits at the top of the card,
   over the photo (.alhp-unit-card-promo), like the current design.
   v1.3.0: phones follow the Figma mobile frames (402px, 30px side margins)
   down to iPhone SE 375px and 320px: hero inside the margins at 342x300,
   Schedule a Tour + Make an Offer side by side, 150x150 media tiles, 24px
   headings, equal-width unit tabs (swipe when many), one unit card per view,
   36px FAQs title. Make an Offer on phones: 30px around and inside the card,
   Back / Next at the two ends, 18-20px step titles, 45px icons. Hero height
   rules at 1199/1023/767 now really apply (they lost to the desktop 500px).
   v1.2.0: BUTTON GUARD at the end of this file. The theme's global button
   rule was eating the padding of <button> elements (Make an Offer, the
   Nearby / Attractions / Schools tabs, unit tabs). Every button of the new
   design now has its full box with !important. Explore the area grid uses
   the Figma column gap (100px on desktop). Make an Offer: no line before
   the field labels, reCAPTCHA note sits in the footer and is readable.
   Plan panel (.alhp-plan-panel, First Floor / Second Floor buttons),
   carousel arrows on the cards (Figma), "Interested in this home?" section.
   v1.1.0: unit cards without border, View All Units page (.alhp-vau),
   Explore the area places grid + Nearby / Attractions / Schools tabs
   (.alhp-near), more room around the buttons (mobile + Make an Offer).
   NEW DESIGN (2026 Figma) for single lot, community and unit pages.
   Loaded only by page-templates/property/look-new.php (design switch = new).
   Every class starts with .alhp- so nothing here touches the current design.
   Fonts: headings 'Sofia Pro', body 'Afacad Flux' (already loaded site-wide).
   Breakpoints follow property-single-v8.css: 1199 / 1023 / 767 / 479.
   ========================================================================== */

.alhp-page {
    --alhp-primary: #5A4F42;
    --alhp-secondary: #928572;
    --alhp-dark: #2A2A2A;
    --alhp-light: #666666;
    --alhp-100: #FAF9F7;
    --alhp-150: #E6E2DD;
    --alhp-200: #EFEDEB;
    --alhp-300: #E8E5DF;
    --alhp-400: #CCC8C0;
    --alhp-icon: #BCB6AF;
    --alhp-accent: #6A8375;
    --alhp-max: 1200px;
    --alhp-gutter: 40px;
    --alhp-head: 'Sofia Pro', 'Afacad Flux', Georgia, serif;
    --alhp-body: 'Afacad Flux', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    width: 100%;
    background: #FFFFFF;
    color: var(--alhp-dark);
    font-family: var(--alhp-body);
}
.alhp-page *, .alhp-page *::before, .alhp-page *::after { box-sizing: border-box; }
.alhp-page img { max-width: 100%; display: block; }
.alhp-page [hidden] { display: none !important; }
.alhp-page .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
/* v1.3.0: icon box is always 1em, so the icon name never shows wide while the icon font loads (no sideways scroll on phones) */
.alhp-page .material-symbols-outlined { display: inline-block; width: 1em; height: 1em; overflow: hidden; }
.alhp-page button { font-family: var(--alhp-body); }

/* Shared width: every section is a centered 1200px column */
.alhp-topbar-inner,
.alhp-hero,
.alhp-info,
.alhp-media,
.alhp-section,
.alhp-divider,
.alhp-faqs-inner {
    width: calc(100% - (var(--alhp-gutter) * 2));
    max-width: var(--alhp-max);
    margin-left: auto;
    margin-right: auto;
}
.alhp-page .alhp-divider { height: 0; border: 0; border-top: 1px solid var(--alhp-300); margin-top: 0; margin-bottom: 0; background: none; }
.alhp-section { padding: 60px 0; }
.alhp-h2 { margin: 0 0 30px; font-family: var(--alhp-head); font-size: 32px; font-weight: 400; line-height: 1.2; color: var(--alhp-dark); }

/* ---------- Buttons ---------- */
.alhp-page .alhp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 10px 25px; min-height: 44px; border-radius: 5px; border: 0;
    font-family: var(--alhp-body); font-size: 18px; font-weight: 400; line-height: 1.2;
    text-transform: capitalize; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.alhp-page .alhp-btn-primary,
.alhp-page .alhp-btn-primary:visited { background: var(--alhp-primary) !important; color: #FFFFFF !important; box-shadow: none; }
.alhp-page .alhp-btn-primary:hover,
.alhp-page .alhp-btn-primary:focus-visible { background: var(--alhp-secondary) !important; color: #FFFFFF !important; }
.alhp-page .alhp-btn-outline,
.alhp-page .alhp-btn-outline:visited { background: #FFFFFF !important; color: var(--alhp-dark) !important; box-shadow: inset 0 0 0 .5px var(--alhp-dark) !important; }
.alhp-page .alhp-btn-outline:hover,
.alhp-page .alhp-btn-outline:focus-visible { background: var(--alhp-primary) !important; color: #FFFFFF !important; box-shadow: none !important; }
.alhp-page .alhp-btn[disabled] { opacity: .6; cursor: wait; }

.alhp-link-circle { display: inline-flex; align-items: center; gap: 15px; color: var(--alhp-primary); font-size: 18px; text-transform: capitalize; text-decoration: none; white-space: nowrap; }
.alhp-link-circle:hover { color: var(--alhp-secondary); }
.alhp-circle { width: 35px; height: 35px; border-radius: 50%; background: var(--alhp-primary); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s ease; }
.alhp-link-circle:hover .alhp-circle { background: var(--alhp-secondary); }

/* ---------- Badges ---------- */
.alhp-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.alhp-badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 20px; background: #FFFFFF; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--alhp-300); font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--alhp-dark); }
.alhp-badge strong { font-weight: 500; }
.alhp-badge-note { text-transform: none; }
.alhp-badge-sm { padding: 4px 10px; font-size: 16px; }
.alhp-badge-xs { padding: 5px 8px; font-size: 14px; text-transform: capitalize; }

/* ---------- Top bar: breadcrumb + search ---------- */
.alhp-topbar { background: var(--alhp-200); padding: 10px 0; }
/* v1.4.0: Promo / Ads banner (Elementor template from the Promo Banner tab). Full width like the current design. */
.alhp-promo { width: 100%; }
.alhp-promo img { display: revert; } /* undo the .alhp-page img block rule, so Elementor decides */
.alhp-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.alhp-breadcrumb { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 14px; font-weight: 300; color: var(--alhp-dark); min-width: 0; }
.alhp-breadcrumb a { color: var(--alhp-dark); text-decoration: none; }
.alhp-breadcrumb a:hover { color: var(--alhp-secondary); }
.alhp-breadcrumb-current { font-weight: 400; }
.alhp-search { position: relative; width: 400px; max-width: 100%; flex-shrink: 0; }
.alhp-search-box { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; background: #FFFFFF; border-radius: 50px; box-shadow: inset 0 0 0 1px var(--alhp-300); color: var(--alhp-dark); }
.alhp-page .alhp-search-input { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-family: var(--alhp-body); font-size: 16px; color: var(--alhp-dark); }
.alhp-search-input::placeholder { color: var(--alhp-light); }
.alhp-search-dropdown { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 500px; max-width: 92vw; max-height: 440px; overflow-y: auto; background: #FFFFFF; border: 1px solid #D9D4CC; border-radius: 5px; box-shadow: -3px 5px 8.8px rgba(72, 72, 72, .25); z-index: 1000; }
.alhp-search-dropdown.is-open { display: block; }
.alhp-search-item { display: flex; align-items: center; gap: 14px; padding: 14px 25px; text-decoration: none; border-bottom: 1px solid var(--alhp-300); }
.alhp-search-item:last-child { border-bottom: 0; }
.alhp-search-item:hover, .alhp-search-item.is-active { background: #F5F5F5; }
.alhp-search-thumb { flex-shrink: 0; width: 120px; height: 70px; border-radius: 3px; overflow: hidden; background: #EDEAE4; }
.alhp-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.alhp-search-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alhp-search-addr { font-size: 18px; color: var(--alhp-dark); line-height: 1.2; }
.alhp-search-price { font-size: 16px; font-weight: 500; color: var(--alhp-dark); }
.alhp-search-price .from { font-weight: 300; }
.alhp-search-empty { padding: 18px 25px; font-size: 16px; color: var(--alhp-light); }

/* ---------- Hero ---------- */
.alhp-hero { margin-top: 40px; }
.alhp-page .alhp-hero-img { display: block; width: 100%; height: 500px; padding: 0; border: 0; background: var(--alhp-200); overflow: hidden; cursor: zoom-in; border-radius: 0; }
.alhp-hero-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.alhp-hero-img:hover img { transform: scale(1.01); }
.alhp-hero-empty { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; cursor: default !important; color: var(--alhp-primary); font-size: 18px; }
.alhp-hero-empty .material-symbols-outlined { font-size: 40px; }

/* ---------- Info row ---------- */
.alhp-info { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 30px 0; }
.alhp-info-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.alhp-title-wrap { display: flex; flex-direction: column; gap: 10px; }
.alhp-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.alhp-page .alhp-title { margin: 0; font-family: var(--alhp-head); font-size: 32px; font-weight: 400; line-height: 1.2; color: var(--alhp-dark); }
.alhp-view-single .alhp-title { max-width: 460px; }
.alhp-title-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--alhp-dark); }
.alhp-subtitle { font-size: 20px; color: var(--alhp-light); }
.alhp-address { font-size: 20px; font-weight: 300; color: var(--alhp-light); }
.alhp-info-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 30px; }
.alhp-price { text-align: right; font-family: var(--alhp-head); color: var(--alhp-dark); line-height: 1.2; }
.alhp-price-label { font-size: 18px; color: var(--alhp-light); }
.alhp-price-value { font-size: 32px; }
.alhp-actions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Media row ---------- */
.alhp-media { padding: 30px 0; }
.alhp-media-track { display: flex; gap: 20px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
/* v1.5.0: swipe (touch) / hold and drag (mouse) sideways when the tiles do not fit */
.alhp-media-track { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.alhp-media-track.is-scroll { cursor: grab; -webkit-user-select: none; user-select: none; }
.alhp-media-track img { -webkit-user-drag: none; }
.alhp-page .alhp-media-track.is-dragging,
.alhp-page .alhp-media-track.is-dragging * { cursor: grabbing !important; }
.alhp-media-track.is-dragging .alhp-tile { pointer-events: none; }
.alhp-page .alhp-tile { flex: 0 0 200px; width: 200px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; margin: 0; border: 0; background: transparent; color: var(--alhp-dark); text-decoration: none; cursor: pointer; text-align: center; }
.alhp-tile-img { position: relative; display: flex; align-items: center; justify-content: center; width: 200px; height: 150px; overflow: hidden; background: var(--alhp-200); }
.alhp-tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.alhp-tile-img.is-contain { padding: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--alhp-400); }
.alhp-tile-img.is-contain img { object-fit: contain; }
.alhp-tile-img .material-symbols-outlined { font-size: 36px; color: var(--alhp-primary); }
.alhp-tile:hover .alhp-tile-img img { transform: scale(1.04); }
.alhp-tile-badge { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .85); color: var(--alhp-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.alhp-tile-label { font-size: 16px; font-weight: 400; text-transform: capitalize; line-height: 1.2; }
.alhp-tile-count { font-weight: 300; }
.alhp-tile-count strong { font-weight: 500; }
.alhp-tile:focus-visible { outline: 2px solid var(--alhp-primary); outline-offset: 4px; }

/* ---------- About the property ---------- */
.alhp-about-body { position: relative; overflow: hidden; }
.alhp-about-body.is-clamped { max-height: 260px; }
.alhp-about-body.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); pointer-events: none; }
.alhp-about-content { font-size: 18px; font-weight: 300; line-height: 1.45; color: var(--alhp-dark); }
.alhp-about-content > *:first-child { margin-top: 0; }
.alhp-about-content > *:last-child { margin-bottom: 0; }
.alhp-page .alhp-about-content p { margin: 0 0 1.2em; font-size: 18px; font-weight: 300; color: var(--alhp-dark); }
.alhp-page .alhp-about-content h3,
.alhp-page .alhp-about-content h4 { margin: 30px 0 15px; font-family: var(--alhp-body); font-size: 24px; font-weight: 400; color: var(--alhp-dark); line-height: 1.2; }
.alhp-page .alhp-about-content ul,
.alhp-page .alhp-about-content ol { margin: 0 0 1.2em; padding: 0; list-style: none; columns: 2; column-gap: 40px; }
.alhp-page .alhp-about-content li { margin: 0 0 4px; break-inside: avoid; font-size: 18px; font-weight: 300; }
.alhp-page .alhp-about-content a { color: var(--alhp-primary); }
.alhp-page .alhp-readmore { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 0; border: 0; background: transparent !important; color: var(--alhp-primary) !important; font-size: 20px; cursor: pointer; }
.alhp-readmore svg { transition: transform .2s ease; }
.alhp-readmore.is-open svg { transform: rotate(180deg); }
.alhp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; align-items: start; margin: 30px 0 0; } /* v1.8.0: 4 per row, same columns as Features */
.alhp-stat { min-width: 0; display: flex; flex-direction: column; gap: 5px; margin: 0; }
.alhp-stat dt { margin: 0; font-size: 14px; font-weight: 400; color: var(--alhp-light); text-transform: uppercase; letter-spacing: .02em; }
.alhp-stat dd { margin: 0; font-size: 18px; font-weight: 500; color: var(--alhp-dark); }
.alhp-stat dd.alhp-stat-details { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--alhp-light); } /* v1.8.0 */

/* ---------- Features ---------- */
.alhp-features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; align-items: start; margin: 0; padding: 0; list-style: none; }
.alhp-feature { display: flex; align-items: flex-start; gap: 15px; margin: 0; min-width: 0; } /* v1.8.0: top aligned (was center) */
.alhp-feature-icon { font-size: 24px !important; color: var(--alhp-icon); flex-shrink: 0; }
.alhp-feature-label { font-size: 18px; font-weight: 500; line-height: 24px; color: var(--alhp-dark); } /* v1.8.0: line = icon height, so the icon sits on the first line */
.alhp-feature-emoji { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 20px !important; line-height: 1; color: var(--alhp-dark); }

/* ---------- Units (community) ---------- */
.alhp-units-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
.alhp-units-head-left { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.alhp-units-title-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.alhp-units-title-row .alhp-h2 { margin: 0; }
.alhp-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.alhp-page .alhp-tab { padding: 10px 20px; border: 0; border-radius: 5px; background: #FFFFFF !important; box-shadow: inset 0 0 0 .5px var(--alhp-300); color: var(--alhp-dark) !important; font-size: 14px; text-transform: capitalize; cursor: pointer; }
.alhp-page .alhp-tab.is-active,
.alhp-page .alhp-tab:hover { background: var(--alhp-100) !important; box-shadow: inset 0 0 0 1px var(--alhp-accent); }
.alhp-carousel { position: relative; }
.alhp-carousel-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 6px; }
.alhp-carousel-track::-webkit-scrollbar { display: none; }
.alhp-unit-card { flex: 0 0 330px; width: 330px; scroll-snap-align: start; background: #FFFFFF; }
.alhp-unit-card-img img { transition: transform .35s ease; }
.alhp-unit-card:hover .alhp-unit-card-img img { transform: scale(1.04); }
.alhp-unit-card:hover .alhp-unit-card-name { color: var(--alhp-primary); }
.alhp-unit-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.alhp-unit-card-img { display: flex; align-items: center; justify-content: center; height: 200px; margin: 0; overflow: hidden; background: var(--alhp-200); }
.alhp-unit-card-img img { width: 100%; height: 100%; object-fit: cover; }
.alhp-unit-card-img .material-symbols-outlined { font-size: 36px; color: var(--alhp-primary); }
/* v1.4.0: unit promo at the top of the card, over the photo (like the current design) */
.alhp-unit-card-img { position: relative; }
.alhp-page .alhp-unit-card-promo { position: absolute; top: 10px; left: 10px; z-index: 1; max-width: calc(100% - 20px); text-transform: none; text-align: left; }
.alhp-unit-card-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 15px 15px; }
.alhp-unit-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.alhp-unit-card-names { display: flex; flex-direction: column; min-width: 0; }
.alhp-unit-card-name { font-size: 16px; font-weight: 500; text-transform: capitalize; color: var(--alhp-dark); }
.alhp-unit-card-community { font-size: 14px; text-transform: capitalize; color: var(--alhp-light); }
.alhp-unit-card-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.alhp-unit-card-from { font-size: 14px; color: var(--alhp-dark); }
.alhp-unit-card-amount { font-size: 16px; font-weight: 500; color: var(--alhp-dark); }
.alhp-unit-card-rule { display: block; height: 1px; background: var(--alhp-300); }
.alhp-unit-card-specs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; font-size: 14px; color: var(--alhp-light); }
.alhp-unit-spec { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border-left: 1px solid #D9D9D9; }
.alhp-unit-spec:first-child { padding-left: 0; border-left: 0; }
.alhp-unit-spec .material-symbols-outlined { font-size: 16px; color: var(--alhp-light); }
.alhp-unit-card-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.alhp-unit-card-brochure { display: inline-block; margin: 0 15px 12px; font-size: 14px; color: var(--alhp-primary); text-decoration: underline; text-underline-offset: 3px; }
.alhp-unit-card-brochure:hover { color: var(--alhp-secondary); }

/* ---------- View All Units (?view=all-units) ---------- */
.alhp-view-all-units .alhp-vau { padding: 30px 0 80px; }
.alhp-vau-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.alhp-vau-back { display: inline-flex; align-items: center; gap: 10px; color: var(--alhp-primary); font-size: 18px; text-transform: capitalize; text-decoration: none; }
.alhp-vau-back:hover { color: var(--alhp-secondary); }
.alhp-vau-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.alhp-vau-grid .alhp-unit-card { flex: none; width: auto; min-width: 0; }
.alhp-page .alhp-carousel-arrow { position: absolute; top: 156px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #FFFFFF !important; color: var(--alhp-primary) !important; box-shadow: inset 0 0 0 1px var(--alhp-400), 0 2px 8px rgba(0, 0, 0, .08); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.alhp-carousel-prev { left: 0; }
.alhp-carousel-next { right: 0; }
.alhp-dots { display: flex; justify-content: center; gap: 15px; padding-top: 30px; }
.alhp-dots:empty { display: none; }
.alhp-page .alhp-dot { width: 8px; height: 8px; min-width: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--alhp-300) !important; cursor: pointer; }
.alhp-page .alhp-dot.is-active { background: var(--alhp-primary) !important; }
.alhp-units-empty { margin: 0; padding: 30px 0; color: var(--alhp-light); font-size: 16px; }
.alhp-units-plan { padding: 14px; box-shadow: inset 0 0 0 1px var(--alhp-400); display: flex; justify-content: center; }
.alhp-page .alhp-units-plan-img { padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.alhp-units-plan-img img { max-height: 550px; width: auto; object-fit: contain; }
/* v1.2.0: plan tab panel: First Floor / Second Floor buttons + the floor plan image */
.alhp-plan-panel { display: flex; flex-direction: column; gap: 20px; margin: 0 0 30px; }
.alhp-floor-tabs { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; background: #FFFFFF; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--alhp-300); }

/* v1.2.0: "Interested in this home?" (heading + Elementor template 2911) */
.alhp-inquiry-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.alhp-page .alhp-inquiry-head .alhp-h2 { margin: 0; }
.alhp-page .alhp-inquiry-sub { margin: 0; padding: 0; font-family: var(--alhp-body); font-size: 18px; font-weight: 400; line-height: 1.4; color: var(--alhp-light); }
.alhp-inquiry-form .elementor-section.elementor-section-boxed > .elementor-container { max-width: 100%; }
.alhp-inquiry-form .e-con.e-con-boxed { --content-width: 100%; }

/* ---------- Map (Map V3 markup comes from the current design; only spacing here) ---------- */
.alhp-map .spc-map-section { width: 100%; padding: 0; margin: 0; }
.alhp-map .spc-map-v2-container { max-width: 100%; margin: 0; }
.alhp-map .alhp-near { display: flex; flex-direction: column; gap: 30px; margin: 30px 0 0; font-family: var(--alhp-body); }
.alhp-near-tabs { align-self: flex-start; display: inline-flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; background: #FFFFFF; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--alhp-300); }
.alhp-page .alhp-near-tab { padding: 8px 15px; border: 0; border-radius: 50px; background: #FFFFFF !important; color: var(--alhp-dark) !important; box-shadow: none; font-family: var(--alhp-body); font-size: 16px; line-height: 1.2; text-transform: capitalize; cursor: pointer; }
.alhp-page .alhp-near-tab:hover { background: var(--alhp-100) !important; }
.alhp-page .alhp-near-tab.is-active { border-radius: 10px; background: var(--alhp-100) !important; box-shadow: inset 0 0 0 1px var(--alhp-accent); }
.alhp-near-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px clamp(40px, 7vw, 100px); }
.alhp-map .alhp-near-item { display: flex; align-items: center; gap: 15px; min-width: 0; margin: 0; padding: 0; }
.alhp-map .alhp-near-item[data-poi-lat] { cursor: pointer; }
.alhp-map .alhp-near-item[data-poi-lat]:hover .alh-map-addon-name { color: var(--alhp-primary); }
.alhp-map .alhp-near-item .alh-map-addon-icon { flex-shrink: 0; width: 25px !important; height: 25px !important; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; }
.alhp-map .alhp-near-item .alh-map-addon-icon svg { display: block; }
.alhp-near-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.alhp-map .alhp-near-item .alh-map-addon-name { font-size: 18px; color: var(--alhp-dark); text-transform: capitalize; line-height: 1.25; overflow-wrap: anywhere; }
.alhp-near-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; color: var(--alhp-light); white-space: nowrap; }
.alhp-near-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--alhp-light); flex-shrink: 0; }
.alhp-map .alhp-near-item .alh-map-addon-dist { font-size: 16px; color: var(--alhp-light); }

/* ---------- Explore homes ---------- */
.alhp-explore-head { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-bottom: 30px; }
.alhp-explore-head .alhp-h2 { margin-bottom: 10px; }
.alhp-explore-desc { margin: 0; font-size: 18px; font-weight: 300; color: var(--alhp-light); }

/* ---------- FAQs ---------- */
.alhp-faqs { padding: 60px 0; background: #FFFFFF; }
.alhp-faqs-inner { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.alhp-faqs-title { align-self: stretch; margin: 0; font-family: var(--alhp-head); font-size: 36px; font-weight: 400; color: var(--alhp-dark); }
.alhp-faqs-list { width: 100%; max-width: 1000px; display: flex; flex-direction: column; align-items: center; }
.alhp-faq { width: 100%; max-width: 867px; display: flex; flex-direction: column; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--alhp-400); }
.alhp-faq:first-child { padding-top: 0; }
.alhp-faq:last-child { border-bottom: 0; }
.alhp-faq-q { display: flex; align-items: center; gap: 20px; }
.alhp-faq-num { flex-shrink: 0; font-size: 18px; color: var(--alhp-dark); }
.alhp-page .alhp-faq-q h3 { margin: 0; font-family: var(--alhp-body); font-size: 24px; font-weight: 400; color: var(--alhp-dark); line-height: 1.25; }
.alhp-faq-a, .alhp-page .alhp-faq-a p { margin: 0; font-size: 18px; font-weight: 300; color: var(--alhp-dark); }

.alhp-page .footer-spacer { height: 80px; }

/* ---------- Lightbox ---------- */
.alhp-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .80); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.alhp-lb-stage { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 200px); height: calc(100% - 200px); max-width: 1200px; max-height: 800px; display: flex; align-items: center; justify-content: center; }
.alhp-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.alhp-page .alhp-lb-close { position: fixed; top: 30px; right: 35px; width: 40px; height: 40px; padding: 0; border: 0; background: transparent !important; color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.alhp-page .alhp-lb-arrow { position: fixed; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; padding: 0; border: 1px solid #FFFFFF !important; border-radius: 50%; background: transparent !important; color: #FFFFFF !important; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.alhp-lb-prev { left: 36px; }
.alhp-lb-next { right: 36px; }
.alhp-lb-counter { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); color: #FFFFFF; font-size: 18px; }

/* ---------- Modals (video, tour, offer) ---------- */
.alhp-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .80); -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px); }
.alhp-media-modal-box { position: relative; width: 100%; max-width: 1200px; }
.alhp-media-modal .alhp-lb-close { top: 20px; right: 20px; }
.alhp-media-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 80vh; background: #000; }
.alhp-media-frame iframe, .alhp-media-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.alhp-media-ext { display: inline-block; margin-top: 12px; color: #FFFFFF; font-size: 16px; }

body.alhp-modal-open { overflow: hidden; }

/* Make an Offer */
.alhp-offer-box { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 30px; background: #FFFFFF; border-radius: 10px; font-family: var(--alhp-body); color: var(--alhp-dark); }
.alhp-step { display: flex; flex-direction: column; gap: 30px; }
.alhp-step-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.alhp-page .alhp-step-head h2 { margin: 0; font-family: var(--alhp-body); font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--alhp-dark); }
.alhp-page .alhp-x { width: 24px; height: 24px; padding: 0; border: 0; background: transparent !important; color: var(--alhp-dark) !important; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.alhp-expect { display: flex; flex-direction: column; gap: 20px; }
.alhp-expect-item { display: flex; align-items: center; gap: 15px; }
.alhp-expect-icon { width: 50px; height: 50px; flex-shrink: 0; border-radius: 5px; background: var(--alhp-150); display: flex; align-items: center; justify-content: center; color: var(--alhp-primary); }
.alhp-expect-icon .material-symbols-outlined { font-size: 24px; }
.alhp-expect-item strong { display: block; font-size: 18px; font-weight: 500; }
.alhp-expect-item small { display: block; font-size: 16px; color: var(--alhp-light); }
.alhp-expect-sep { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--alhp-light); }
.alhp-expect-sep::before, .alhp-expect-sep::after { content: ""; flex: 1 1 0; height: 1px; background: var(--alhp-300); }
.alhp-step-nav { position: sticky; bottom: -30px; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 15px; margin: 10px -30px -30px; padding: 20px 30px 30px; background: #FFFFFF; border-top: 1px solid var(--alhp-300); border-radius: 0 0 10px 10px; }
.alhp-page .alhp-step-nav .alhp-btn { min-width: 120px; padding: 12px 28px; }
.alhp-radios { display: flex; flex-wrap: wrap; gap: 15px 30px; }
.alhp-radios-col { flex-direction: column; gap: 15px; }
.alhp-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; cursor: pointer; }
.alhp-page .alhp-radio input { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin: 0; border-radius: 50%; border: 1px solid var(--alhp-300); background: #FFFFFF; cursor: pointer; flex-shrink: 0; }
.alhp-page .alhp-radio input:checked { border: 5px solid var(--alhp-primary); }
.alhp-page .alhp-radio input:focus-visible { outline: 2px solid var(--alhp-secondary); outline-offset: 2px; }
.alhp-field { display: flex; flex-direction: column; gap: 8px; }
.alhp-label { display: block; font-size: 18px; font-weight: 500; line-height: 1.3; }
.alhp-page .alhp-label { margin: 0; padding: 0; color: var(--alhp-dark); }
.alhp-opt { color: var(--alhp-light); font-weight: 400; }
.alhp-req { color: #B3261E; }
.alhp-page .alhp-input { width: 100%; height: 44px; margin: 0; padding: 10px; border: 0 !important; border-radius: 3px !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--alhp-300) !important; font-family: var(--alhp-body); font-size: 18px; color: var(--alhp-dark); outline: 0; }
.alhp-page .alhp-input::placeholder { color: #969696; }
.alhp-page .alhp-input:focus { box-shadow: inset 0 0 0 1px var(--alhp-secondary) !important; }
.alhp-page .alhp-input.is-invalid { box-shadow: inset 0 0 0 1px #B3261E !important; }
.alhp-page .alhp-textarea { height: 100px; resize: vertical; }
.alhp-hint { margin: 0; font-size: 16px; color: var(--alhp-light); }
.alhp-dp { display: flex; }
.alhp-dp > .alhp-input { flex: 1 1 auto; border-radius: 3px 0 0 3px !important; }
.alhp-dp-pct { display: flex; align-items: center; gap: 4px; width: 110px; flex-shrink: 0; padding-right: 14px; box-shadow: inset 0 0 0 1px var(--alhp-300); border-radius: 0 3px 3px 0; background: #FFFFFF; font-size: 18px; color: #969696; }
.alhp-page .alhp-dp-pct .alhp-input { box-shadow: none !important; background: transparent !important; border: 0 !important; width: 100%; min-width: 0; text-align: right; padding-right: 0; }
.alhp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.alhp-phone { display: flex; gap: 8px; }
.alhp-phone-cc { display: flex; align-items: center; height: 44px; padding: 0 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--alhp-300); font-size: 16px; }
.alhp-err { min-height: 0; font-size: 14px; color: #B3261E; }
.alhp-err:empty { display: none; }
.alhp-form-error { padding: 12px 14px; border-radius: 5px; background: #FDECEA; color: #8C1D18; font-size: 16px; }
.alhp-page .alhp-recaptcha-note { flex: 0 0 100%; order: 3; margin: 0 !important; padding: 0 !important; font-family: var(--alhp-body) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--alhp-light) !important; text-align: left; }
.alhp-page .alhp-recaptcha-note a { color: var(--alhp-primary) !important; text-decoration: underline !important; }
.alhp-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

/* ==========================================================================
   RESPONSIVE
   v1.3.0: phone layout follows the Figma mobile frames (402px wide, 30px
   side margins) and holds down to iPhone SE (375px) and 320px phones.
   ========================================================================== */
@media (max-width: 1439px) {
    .alhp-carousel-prev { left: 0; }
    .alhp-carousel-next { right: 0; }
}
@media (max-width: 1199px) {
    .alhp-info { flex-direction: column; align-items: flex-start; gap: 24px; }
    .alhp-info-right { align-items: flex-start; width: 100%; gap: 20px; }
    .alhp-price { text-align: left; }
    .alhp-actions { justify-content: flex-start; }
    .alhp-page .alhp-hero-img { height: 440px; }
}
@media (max-width: 1023px) {
    .alhp-page { --alhp-gutter: 30px; }
    .alhp-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .alhp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* v1.8.0: same as Features */
    .alhp-page .alhp-hero-img { height: 380px; }
    .alhp-search { width: 320px; }
    .alhp-near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 30px; }
    .alhp-vau-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .alhp-units-head { flex-direction: column; }
    .alhp-explore-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- Phones (Figma mobile) ---------- */
@media (max-width: 767px) {
    .alhp-page { --alhp-gutter: 30px; }

    /* Breadcrumb, then the search pill (full width) */
    .alhp-topbar { padding: 10px 0; }
    .alhp-topbar-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    .alhp-search { width: 100%; }
    .alhp-search-dropdown { width: 100%; max-width: 100%; }
    .alhp-search-item { padding: 12px 15px; gap: 12px; }
    .alhp-search-thumb { width: 90px; height: 60px; }
    .alhp-search-addr { font-size: 16px; }

    /* Hero: inside the side margins, 342 x 300 like the Figma */
    .alhp-hero { width: calc(100% - (var(--alhp-gutter) * 2)); margin-top: 20px; }
    .alhp-page .alhp-hero-img { height: auto; aspect-ratio: 342 / 300; }

    /* Badges, title, price, Schedule a Tour + Make an Offer side by side */
    .alhp-info { gap: 20px; padding: 20px 0 25px; }
    .alhp-info-left { gap: 15px; width: 100%; }
    .alhp-info-right { gap: 20px; }
    .alhp-badges { gap: 5px 10px; }
    .alhp-badge { padding: 5px 20px; font-size: 14px; }
    .alhp-title-wrap { gap: 10px; }
    /* Title . subtitle stay on one row (Figma); each wraps inside its own box */
    .alhp-title-line { gap: 10px; flex-wrap: nowrap; align-items: center; }
    .alhp-page .alhp-title { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
    .alhp-title-dot { flex-shrink: 0; }
    .alhp-subtitle { flex: 1 1 0; min-width: 45%; }
    .alhp-page .alhp-title { font-size: 20px; line-height: 1.25; }
    .alhp-view-single .alhp-title { max-width: none; }
    .alhp-subtitle { font-size: 16px; }
    .alhp-address { font-size: 16px; }
    .alhp-price-label { font-size: 14px; }
    .alhp-price-value { font-size: 24px; }
    .alhp-actions { width: 100%; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 15px; }

    /* Photos / video / tour / floor plan / sitemap strip: 150 x 150 tiles, runs to the right edge */
    .alhp-media { padding: 30px 0; }
    .alhp-media-track { gap: 20px; margin-right: calc(var(--alhp-gutter) * -1); padding-right: var(--alhp-gutter); scrollbar-width: none; }
    .alhp-media-track::-webkit-scrollbar { display: none; }
    .alhp-page .alhp-tile { flex-basis: 150px; width: 150px; }
    .alhp-tile-img { width: 150px; height: 150px; }
    .alhp-tile-label { font-size: 16px; }

    .alhp-carousel-arrow { display: none !important; }

    /* Sections */
    .alhp-section { padding: 40px 0; }
    .alhp-h2 { font-size: 24px; margin-bottom: 20px; }

    /* About the property */
    .alhp-about-body.is-clamped { max-height: 300px; }
    .alhp-page .alhp-about-content ul, .alhp-page .alhp-about-content ol { columns: 1; }
    .alhp-page .alhp-about-content p, .alhp-page .alhp-about-content li, .alhp-about-content { font-size: 16px; }
    .alhp-page .alhp-about-content h3, .alhp-page .alhp-about-content h4 { margin: 25px 0 10px; font-size: 20px; }
    .alhp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px 10px; margin-top: 30px; } /* v1.8.0: column gap = Features */
    .alhp-stat { min-width: 0; }
    .alhp-stat dd { font-size: 16px; overflow-wrap: anywhere; }

    /* Features: 2 columns */
    .alhp-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 10px; }
    .alhp-feature { gap: 10px; }
    .alhp-feature-label { font-size: 16px; overflow-wrap: anywhere; }

    /* Explore the area */
    .alhp-map .alhp-near { gap: 20px; margin-top: 20px; }
    .alhp-near-grid { gap: 20px 24px; }

    /* Units: title + "x units left", tabs (equal width, swipe when many),
       "View all units", one card per view, dots */
    .alhp-units-head { gap: 30px; margin-bottom: 30px; }
    .alhp-units-head-left { width: 100%; gap: 15px; }
    .alhp-units-title-row { justify-content: space-between; flex-wrap: nowrap; gap: 10px; }
    .alhp-units-title-row .alhp-h2 { min-width: 0; }
    .alhp-units-title-row .alhp-badge { flex-shrink: 0; }
    .alhp-tabs { width: 100%; flex-wrap: nowrap; gap: 10px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .alhp-tabs::-webkit-scrollbar { display: none; }
    /* More tabs than fit: a soft fade on the side that has more (classes set by property-new.js) */
    .alhp-tabs.is-scroll:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
    .alhp-tabs.is-scroll.is-end:not(.is-start) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px); mask-image: linear-gradient(90deg, transparent, #000 48px); }
    .alhp-tabs.is-scroll:not(.is-start):not(.is-end) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
    .alhp-link-circle { font-size: 16px; }
    .alhp-unit-card { flex: 0 0 calc((100% - 20px) / 2); width: calc((100% - 20px) / 2); }
    .alhp-unit-card-img { height: 200px; }
    .alhp-unit-card-body { padding: 10px 15px 15px; }
    .alhp-dots { padding-top: 30px; }
    .alhp-plan-panel { gap: 15px; }
    .alhp-units-plan { padding: 10px; }
    .alhp-units-plan-img img { max-height: 440px; }

    /* Interested in this home? */
    .alhp-inquiry-head { gap: 10px; margin-bottom: 20px; }
    .alhp-page .alhp-inquiry-sub { font-size: 18px; }

    /* Explore available homes: title, text, then the link */
    .alhp-explore-head { gap: 30px; }
    .alhp-explore-desc { font-size: 16px; }

    /* FAQs */
    .alhp-faqs { padding: 40px 0; }
    .alhp-faqs-inner { gap: 30px; }
    .alhp-faqs-title { font-size: 36px; }
    .alhp-faq { gap: 15px; padding: 25px 0; }
    .alhp-faq:first-child { padding-top: 0; }
    .alhp-faq-q { align-items: flex-start; gap: 20px; }
    .alhp-faq-num { line-height: 1.4; }
    .alhp-page .alhp-faq-q h3 { font-size: 20px; }
    .alhp-faq-a, .alhp-page .alhp-faq-a p { font-size: 16px; }

    /* View All Units page */
    .alhp-vau-head { flex-direction: column; align-items: flex-start; }
    .alhp-view-all-units .alhp-vau { padding: 24px 0 60px; }

    /* Lightbox */
    .alhp-lb-stage { width: 100%; height: calc(100% - 160px); }
    .alhp-lb-prev { left: 12px; }
    .alhp-lb-next { right: 12px; }
    .alhp-page .alhp-lb-close { top: 16px; right: 16px; }
    .alhp-modal { padding: 12px; }

    /* Make an Offer (Figma mobile): card with 30px around it, 30px inside */
    .alhp-modal.alhp-offer { padding: 30px; }
    .alhp-offer-box { padding: 30px; max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); }
    .alhp-step { gap: 30px; }
    .alhp-page .alhp-step-head h2 { font-size: 20px; }
    .alhp-page .alhp-step[data-alhp-step="3"] .alhp-step-head h2,
    .alhp-page .alhp-step[data-alhp-step="4"] .alhp-step-head h2 { font-size: 18px; }
    .alhp-expect { gap: 20px; }
    .alhp-expect-sep { margin: 10px 0; }
    .alhp-expect-icon { width: 45px; height: 45px; }
    .alhp-expect-item strong { margin-bottom: 5px; font-size: 16px; line-height: 1.3; }
    .alhp-expect-item small { font-size: 16px; line-height: 1.35; }
    .alhp-radios { gap: 20px 30px; }
    .alhp-radios-col { gap: 15px; }
    .alhp-label, .alhp-radio { font-size: 16px; }
    .alhp-radios-col .alhp-radio { font-weight: 400; }
    .alhp-hint { font-size: 14px; }
    .alhp-dp-pct { width: 80px; padding-right: 14px; }
    .alhp-grid-2 { grid-template-columns: 1fr; gap: 30px; }
    .alhp-page .alhp-step[data-alhp-step="4"] .alhp-input { font-size: 16px; }
    /* Back / Next stay at the two ends; the bar sticks to the bottom when the step is taller than the screen */
    .alhp-step-nav { bottom: -30px; justify-content: space-between; margin: 14px -30px -30px; padding: 16px 30px 30px; border-top: 0; }
    .alhp-step-nav::before { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); pointer-events: none; }
}
@media (max-width: 699px) {
    /* one unit card per view (two from 700px, so the specs stay on one line) */
    .alhp-unit-card { flex: 0 0 100%; width: 100%; }
    .alhp-vau-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
    .alhp-near-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* iPhone SE (1st gen) and other 320px phones */
@media (max-width: 374px) {
    .alhp-page { --alhp-gutter: 20px; }
    .alhp-badge { padding: 5px 14px; }
    .alhp-unit-card-body { padding: 10px 12px 12px; }
    .alhp-unit-spec { padding: 0 8px; }
    .alhp-modal.alhp-offer { padding: 20px 16px; }
    .alhp-offer-box { padding: 24px 20px; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); }
    .alhp-step-nav { bottom: -24px; margin: 14px -20px -24px; padding: 16px 20px 24px; }
    .alhp-radios { gap: 15px 24px; }
    .alhp-dp-pct { width: 72px; }
}

/* ==========================================================================
   v1.2.0 BUTTON GUARD
   The theme's global button rule (global-button-override.css + Hello Biz
   reset) beats any button style that is not !important. It removed the
   padding of Make an Offer and squeezed the Nearby / Attractions / Schools
   tabs. The current design fixed the same thing in property-single-v8.css
   ("nuclear" pattern). Same idea here: every <button> of the new design gets
   its full box with !important, using the same values as above, so it looks
   the same with or without the theme rule. Scoped to .alhp-page only.
   ========================================================================== */

/* Schedule a Tour, Make an Offer, Cancel / Back / Next / Submit */
.alhp-page a.alhp-btn,
.alhp-page button.alhp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 25px !important;
    border: 0 !important;
    border-radius: 5px !important;
    font-family: var(--alhp-body) !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    text-align: center !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.alhp-page a.alhp-btn-primary,
.alhp-page button.alhp-btn-primary { box-shadow: none !important; }
.alhp-page .alhp-btn > span { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; }
.alhp-page .alhp-btn svg { flex-shrink: 0; }
.alhp-page a.alhp-btn:focus-visible,
.alhp-page button.alhp-btn:focus-visible { outline: 2px solid var(--alhp-secondary) !important; outline-offset: 2px !important; }
.alhp-page .alhp-step-nav button.alhp-btn { min-width: 120px !important; padding: 12px 28px !important; }

/* Unit tabs: All Units / Floor Plan A ... */
.alhp-page button.alhp-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: var(--alhp-dark) !important;
    box-shadow: inset 0 0 0 .5px var(--alhp-300) !important;
    font-family: var(--alhp-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.alhp-page button.alhp-tab.is-active,
.alhp-page button.alhp-tab:hover { background: var(--alhp-100) !important; box-shadow: inset 0 0 0 1px var(--alhp-accent) !important; color: var(--alhp-dark) !important; }

/* Explore the area: Nearby / Attractions / Schools (Figma) */
.alhp-page .alhp-near-tabs {
    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px var(--alhp-300) !important;
}
.alhp-page button.alhp-near-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 15px !important;
    border: 0 !important;
    border-radius: 50px !important;
    background: #FFFFFF !important;
    color: var(--alhp-dark) !important;
    box-shadow: none !important;
    font-family: var(--alhp-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: capitalize !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.alhp-page button.alhp-near-tab:hover { background: var(--alhp-100) !important; color: var(--alhp-dark) !important; }
.alhp-page button.alhp-near-tab.is-active { border-radius: 10px !important; background: var(--alhp-100) !important; box-shadow: inset 0 0 0 1px var(--alhp-accent) !important; }
.alhp-page button.alhp-near-tab:focus-visible,
.alhp-page button.alhp-tab:focus-visible { outline: 2px solid var(--alhp-secondary) !important; outline-offset: 2px !important; }
.alhp-page .alhp-near-grid { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* Plan panel: First Floor / Second Floor (same look as the Nearby tabs) */
.alhp-page .alhp-floor-tabs { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 5px !important; margin: 0 !important; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--alhp-300) !important; }
.alhp-page button.alhp-floor-tab { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 8px 15px !important; border: 0 !important; border-radius: 50px !important; background: #FFFFFF !important; color: var(--alhp-dark) !important; box-shadow: none !important; font-family: var(--alhp-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: normal !important; text-transform: capitalize !important; text-decoration: none !important; white-space: nowrap !important; -webkit-appearance: none !important; appearance: none !important; }
.alhp-page button.alhp-floor-tab:hover { background: var(--alhp-100) !important; color: var(--alhp-dark) !important; }
.alhp-page button.alhp-floor-tab.is-active { border-radius: 10px !important; background: var(--alhp-100) !important; box-shadow: inset 0 0 0 1px var(--alhp-accent) !important; }
.alhp-page button.alhp-floor-tab:focus-visible { outline: 2px solid var(--alhp-secondary) !important; outline-offset: 2px !important; }

/* Icon, image and text buttons: keep their own size, no theme padding */
.alhp-page button.alhp-x,
.alhp-page button.alhp-carousel-arrow,
.alhp-page button.alhp-lb-close,
.alhp-page button.alhp-lb-arrow,
.alhp-page button.alhp-dot,
.alhp-page button.alhp-hero-img,
.alhp-page button.alhp-tile,
.alhp-page button.alhp-units-plan-img,
.alhp-page button.alhp-readmore,
.alhp-page .spc-map-v2 button.spc-map-zoom-btn {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.alhp-page button.alhp-x,
.alhp-page button.alhp-carousel-arrow,
.alhp-page button.alhp-lb-close,
.alhp-page button.alhp-dot,
.alhp-page button.alhp-hero-img,
.alhp-page button.alhp-tile,
.alhp-page button.alhp-units-plan-img,
.alhp-page button.alhp-readmore,
.alhp-page .spc-map-v2 button.spc-map-zoom-btn { border: 0 !important; }
.alhp-page button.alhp-x { display: flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; height: 24px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.alhp-page button.alhp-carousel-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 50% !important; background: #FFFFFF !important; box-shadow: inset 0 0 0 1px var(--alhp-400), 0 2px 8px rgba(0, 0, 0, .08) !important; }
.alhp-page button.alhp-lb-close { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.alhp-page button.alhp-lb-arrow { display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; min-width: 40px !important; height: 40px !important; border: 1px solid #FFFFFF !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; }
.alhp-page button.alhp-dot { display: block !important; width: 8px !important; min-width: 8px !important; height: 8px !important; border-radius: 50% !important; box-shadow: none !important; }
.alhp-page button.alhp-hero-img { display: block !important; border-radius: 0 !important; background: var(--alhp-200) !important; box-shadow: none !important; }
.alhp-page button.alhp-tile { display: flex !important; flex: 0 0 200px !important; width: 200px !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--alhp-dark) !important; font-family: var(--alhp-body) !important; font-weight: 400 !important; text-align: center !important; white-space: normal !important; }
.alhp-page button.alhp-units-plan-img { border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.alhp-page button.alhp-readmore { display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 20px 0 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; font-family: var(--alhp-body) !important; font-size: 20px !important; font-weight: 400 !important; line-height: 1.3 !important; }
.alhp-page .spc-map-v2 button.spc-map-zoom-btn { flex: 1 1 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: auto !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
.alhp-page .spc-map-v2 button.spc-map-zoom-btn:first-child { border-radius: 4px 4px 0 0 !important; }
.alhp-page .spc-map-v2 button.spc-map-zoom-btn:last-child { border-radius: 0 0 4px 4px !important; }
.alhp-page .spc-map-v2 button.spc-map-zoom-btn:hover { background: #F5F3F0 !important; }
.alhp-page button.alhp-x:focus-visible,
.alhp-page button.alhp-carousel-arrow:focus-visible,
.alhp-page button.alhp-lb-close:focus-visible,
.alhp-page button.alhp-lb-arrow:focus-visible,
.alhp-page button.alhp-readmore:focus-visible { outline: 2px solid var(--alhp-secondary) !important; outline-offset: 2px !important; }

@media (max-width: 767px) {
    /* v1.3.0 Figma mobile: Schedule a Tour + Make an Offer side by side, same width */
    .alhp-page .alhp-actions a.alhp-btn,
    .alhp-page .alhp-actions button.alhp-btn { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; min-height: 40px !important; padding: 8px 10px !important; gap: 8px !important; font-size: clamp(14px, 4.1vw, 16px) !important; }
    /* Make an Offer: Back / Next keep their own size, one at each end */
    .alhp-page .alhp-step-nav button.alhp-btn { flex: 0 0 auto !important; min-width: 0 !important; min-height: 40px !important; padding: 10px 25px !important; font-size: 16px !important; }
    .alhp-page.alhp-page button.alhp-carousel-arrow { display: none !important; }
    .alhp-page button.alhp-tile { flex-basis: 150px !important; width: 150px !important; }
    .alhp-page button.alhp-readmore { font-size: 18px !important; }
    /* Unit tabs: equal width; when they do not fit, the row swipes sideways */
    .alhp-page button.alhp-tab { flex: 1 1 0 !important; min-width: max-content !important; }
}
@media (max-width: 374px) {
    .alhp-page .alhp-actions a.alhp-btn,
    .alhp-page .alhp-actions button.alhp-btn { padding: 8px 6px !important; gap: 6px !important; }
    .alhp-page button.alhp-near-tab,
    .alhp-page button.alhp-floor-tab { padding: 8px 12px !important; font-size: 15px !important; }
    .alhp-page .alhp-step-nav button.alhp-btn { padding: 10px 20px !important; }
}
@media (max-width: 359px) {
    /* 320px phones: the two buttons stack */
    .alhp-actions { flex-direction: column; }
    .alhp-page .alhp-actions a.alhp-btn,
    .alhp-page .alhp-actions button.alhp-btn { flex: 0 0 auto !important; width: 100% !important; min-height: 44px !important; padding: 10px 20px !important; font-size: 16px !important; }
}

/* Anything with the hidden attribute stays hidden (wins over the guard) */
.alhp-page.alhp-page button[hidden],
.alhp-page.alhp-page a[hidden],
.alhp-page.alhp-page .alhp-near-tabs[hidden] { display: none !important; }