/**
 * Property Details page. Confirmed from the live approved Figma frame
 * (file "02 - Public Website", node 29:609 "property-details-desktop").
 * Header/Footer/WhatsApp FAB are the shared includes (header.php,
 * footer.php, whatsapp-fab.php) - not rebuilt here. The "Related
 * Properties" cards reuse property-components.css's existing
 * .property-card/.property-card--grid unchanged.
 *
 * One flagged gap: the fullscreen gallery lightbox is an interaction-only
 * state (a modal overlay, never shown in the static frame), and a
 * dedicated lightbox spec could not be located in either Figma file
 * within a practical search - file 01's full metadata dump is 1.4M+
 * characters, too large to search page-by-page in one pass. Built
 * instead using this same page's own confirmed dark-overlay/white-text/
 * gold-accent language (the gallery hero's own photo-counter pill is the
 * direct visual reference), not invented from nothing. Worth reconciling
 * against a confirmed lightbox frame in a future pass if one exists.
 *
 * Requires (in this order): variables.css, header.css, footer.css,
 * whatsapp-fab.css, buttons.css, forms.css, property-components.css, then
 * this file.
 */

/* ---------------------------------------------------------------------
 * Breadcrumb - confirmed node 29:630
 * --------------------------------------------------------------------- */

.pd-breadcrumb {
    padding: 16px 80px;
    background-color: var(--color-ivory);
    border-bottom: 1px solid var(--color-border-light);
}

.pd-breadcrumb__text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-charcoal);
    margin: 0;
}

.pd-breadcrumb__text a {
    color: var(--color-charcoal);
    text-decoration: none;
}

.pd-breadcrumb__text a:hover {
    text-decoration: underline;
}

.pd-breadcrumb__current {
    font-weight: 500;
    color: var(--color-champagne-gold);
}

/* ---------------------------------------------------------------------
 * Gallery - confirmed node 29:632
 * --------------------------------------------------------------------- */

.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 80px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-gallery__hero {
    position: relative;
    height: 680px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--color-stone);
    cursor: pointer;
}

.pd-gallery__hero img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.pd-gallery__overlay-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    width: 100%;
}

.pd-gallery__overlay-row--bottom {
    align-items: flex-end;
}

.pd-video-tour-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 20px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
}

.pd-video-tour-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-play.svg');
    mask-image: url('/assets/images/icons/icon-play.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-photo-counter-group {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.pd-photo-counter {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-white);
}

.pd-view-all-photos {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    background-color: var(--color-primary-green);
    border: 1px solid var(--color-champagne-gold);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    cursor: pointer;
}

.pd-gallery__thumbnails {
    display: flex;
    gap: 16px;
    width: 100%;
}

.pd-gallery__thumbnail {
    flex: 1 0 0;
    min-width: 0;
    height: 140px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: none;
    padding: 0;
    background: none;
}

.pd-gallery__thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Property meta - confirmed node 29:653
 * --------------------------------------------------------------------- */

.pd-meta {
    display: flex;
    gap: 48px;
    padding: 40px 80px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.pd-meta__left {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-status-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-status-kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-champagne-gold);
    margin: 0;
    text-transform: uppercase;
}

.pd-status-badge {
    display: flex;
    align-items: center;
    padding: 4px 10px;
    background-color: var(--color-primary-green);
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    color: var(--color-white);
}

.pd-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 42px;
    color: var(--color-near-black);
    margin: 0;
    line-height: normal;
}

.pd-address-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-address-row__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--color-charcoal);
    -webkit-mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-address-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    color: var(--color-charcoal);
    margin: 0;
}

.pd-specs-bar {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-top: 12px;
    flex-wrap: wrap;
}

.pd-spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-spec-item__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: var(--color-near-black);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-spec-item__icon--bed {
    -webkit-mask-image: url('/assets/images/icons/icon-property-bed.svg');
    mask-image: url('/assets/images/icons/icon-property-bed.svg');
}

.pd-spec-item__icon--bath {
    -webkit-mask-image: url('/assets/images/icons/icon-property-bath.svg');
    mask-image: url('/assets/images/icons/icon-property-bath.svg');
}

.pd-spec-item__icon--size {
    -webkit-mask-image: url('/assets/images/icons/icon-property-maximize.svg');
    mask-image: url('/assets/images/icons/icon-property-maximize.svg');
}

.pd-spec-item__icon--floors {
    -webkit-mask-image: url('/assets/images/icons/icon-property-layers.svg');
    mask-image: url('/assets/images/icons/icon-property-layers.svg');
}

.pd-spec-item span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-near-black);
}

.pd-meta__right {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
}

.pd-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.pd-price {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 38px;
    color: var(--color-primary-green);
    margin: 0;
    white-space: nowrap;
}

/* .currency-price (assets/css/currency-toggle.css) is intentionally
   alignment-neutral by default, since property cards elsewhere left-align
   their price - but this main price sits in .pd-price-box, which is
   already right-aligned (align-items: flex-end above). Without this, the
   "Originally listed in ₦" note under it defaulted to left-aligned
   relative to the price value, out of line with everything else in this
   box. Scoped to this exact instance (.currency-price.pd-price), not a
   global default. */
.currency-price.pd-price {
    align-items: flex-end;
}

.currency-price.pd-price .currency-price__note {
    text-align: right;
}

/* The shared tooltip (currency-toggle.css) centers itself on its own
   trigger icon - correct everywhere else, but here the icon sits flush
   against .pd-meta's 80px right page padding (.pd-price-box is right-
   aligned, see above), so a centered 220px-wide tooltip needs ~110px of
   room to its right and only has ~80px, clipping past the viewport edge.
   Measured directly (not assumed): 9-69px of right-edge overflow across
   1024-1440px widths. Anchoring the tooltip's right edge to the icon
   instead keeps it fully inside the page every time, since it then only
   needs room to its LEFT, where the whole rest of this row (and
   .pd-meta__left beyond it) is open space.
   .pd-sticky-price's tooltip does NOT need this - that icon sits inside
   .pd-sticky-left, well clear of the bar's right side (which is reserved
   for the phone/WhatsApp/Schedule buttons), so centering it never clips -
   confirmed by the same live measurement, not by inspection alone. */
.currency-price.pd-price .currency-price__disclaimer-tooltip {
    left: auto;
    right: 0;
    transform: none;
}

.pd-price-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
    opacity: 0.8;
    margin: 0;
}

.pd-action-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.pd-cta {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    border: none;
    transition: opacity 0.15s ease;
}

.pd-cta:hover {
    opacity: 0.9;
}

.pd-cta--schedule {
    background-color: var(--color-primary-green);
    color: var(--color-white);
}

.pd-cta--enquire {
    background-color: transparent;
    border: 1.5px solid var(--color-primary-green);
    color: var(--color-primary-green);
}

.pd-save-btn {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--color-border-light);
    border-radius: 6px;
    background-color: var(--color-white);
    cursor: pointer;
    padding: 0;
}

.pd-save-btn__icon {
    width: 20px;
    height: 20px;
    background-color: var(--color-primary-green);
    -webkit-mask-image: url('/assets/images/icons/icon-property-heart.svg');
    mask-image: url('/assets/images/icons/icon-property-heart.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-save-btn.is-saved .pd-save-btn__icon {
    background-color: #C0392B;
}

.pd-share-print-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pd-share-btn,
.pd-print-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    color: var(--color-charcoal);
}

.pd-share-print-divider {
    width: 1px;
    height: 12px;
    background-color: var(--color-stone);
    flex-shrink: 0;
}

.pd-icon-14 {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--color-charcoal);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-icon-14--share {
    -webkit-mask-image: url('/assets/images/icons/icon-share.svg');
    mask-image: url('/assets/images/icons/icon-share.svg');
}

.pd-icon-14--print {
    -webkit-mask-image: url('/assets/images/icons/icon-print.svg');
    mask-image: url('/assets/images/icons/icon-print.svg');
}

/* ---------------------------------------------------------------------
 * Description - confirmed node 29:703
 * --------------------------------------------------------------------- */

.pd-section {
    padding: 64px 80px;
    max-width: var(--content-max-width);
    margin: 0 auto;
    box-sizing: border-box;
}

.pd-section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-primary-green);
    margin: 0 0 32px;
}

.pd-description-cols {
    display: flex;
    gap: 48px;
}

.pd-description-col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pd-description-col p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-charcoal);
    margin: 0;
}

.pd-read-more {
    display: none;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--color-champagne-gold);
}

.pd-read-more__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.pd-description-col--collapsible .pd-description-extra {
    display: none;
}

.pd-description-col--collapsible.is-expanded .pd-description-extra {
    display: block;
}

.pd-description-col--collapsible.is-expanded .pd-read-more__icon {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------------------
 * Facts & Features - confirmed node 29:715
 * --------------------------------------------------------------------- */

.pd-facts-features {
    background-color: var(--color-ivory);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.pd-facts-features-inner {
    display: flex;
    gap: 64px;
}

.pd-facts-col,
.pd-features-col {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.pd-facts-col .pd-section-title,
.pd-features-col .pd-section-title {
    font-size: 24px;
    margin: 0;
}

.pd-facts-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pd-fact-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-stone);
}

.pd-fact-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-charcoal);
    opacity: 0.8;
    margin: 0;
}

.pd-fact-value {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-near-black);
    margin: 0;
}

.pd-features-grouped {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.pd-features-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.pd-features-group__label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    color: var(--color-champagne-gold);
    margin: 0;
}

.pd-amenities-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.pd-amenity-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-radius: 20px;
}

.pd-amenity-pill__icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--color-primary-green);
    -webkit-mask-image: url('/assets/images/icons/icon-form-check.svg');
    mask-image: url('/assets/images/icons/icon-form-check.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-amenity-pill span {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-charcoal);
}

/* ---------------------------------------------------------------------
 * Location & Neighbourhood - confirmed node 29:807
 * --------------------------------------------------------------------- */

.pd-location-split {
    display: flex;
    gap: 64px;
    align-items: center;
}

.pd-map-area {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-map-card {
    position: relative;
    height: 400px;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-map-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-map-pin {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--color-primary-green);
    border: 2px solid var(--color-champagne-gold);
    border-radius: 40px;
}

.pd-map-pin__icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    mask-image: url('/assets/images/icons/icon-property-map-pin.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-map-link {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.pd-map-link span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-champagne-gold);
    text-decoration: underline;
}

.pd-neighbourhood {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.pd-neighbourhood-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-primary-green);
    margin: 0;
}

.pd-highlights-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.pd-highlight-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-stone);
}

.pd-highlight-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 8px;
    background-color: var(--color-ivory);
    border-radius: 6px;
}

.pd-highlight-icon {
    width: 16px;
    height: 16px;
    background-color: var(--color-charcoal);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('/assets/images/icons/icon-property-car.svg');
    mask-image: url('/assets/images/icons/icon-property-car.svg');
}

.pd-highlight-row span {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-charcoal);
}

/* ---------------------------------------------------------------------
 * Floor Plans - confirmed node 29:847
 * --------------------------------------------------------------------- */

.pd-floorplans {
    background-color: var(--color-ivory);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* .pd-floorplans (the parent) is itself a column flexbox, which makes
   both of its .pd-section children flex items. The margin: 0 auto
   inherited from .pd-section disables cross-axis stretch on flex items
   (auto margins take priority over align-items: stretch per the flexbox
   spec), so without an explicit width each child shrinks to fit its
   content and centers as a unit instead of spanning full width - which
   collapsed the header's title/download-link space-between gap, and
   left the tabs/floor-plan-image row narrower than the rest of the page's
   full-width sections (e.g. the Virtual Tour video player). */
.pd-floorplans > .pd-section {
    width: 100%;
}

.pd-floorplans-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pd-floorplans-header .pd-section-title {
    margin: 0;
}

.pd-pdf-download {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.pd-pdf-download__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-download.svg');
    mask-image: url('/assets/images/icons/icon-download.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-pdf-download span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-champagne-gold);
    text-decoration: underline;
}

.pd-floorplan-tabs {
    display: flex;
    gap: 12px;
}

.pd-floorplan-tab {
    padding: 12px 24px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid var(--color-stone);
    color: var(--color-charcoal);
}

.pd-floorplan-tab.is-active {
    background-color: var(--color-primary-green);
    border-color: transparent;
    color: var(--color-white);
}

.pd-floorplan-container {
    height: 480px;
    border: 1px solid var(--color-stone);
    border-radius: 12px;
    overflow: hidden;
}

.pd-floorplan-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------------------------------------------------------------------
 * Virtual Tour - confirmed node 29:862
 * --------------------------------------------------------------------- */

.pd-video-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.pd-video-header .pd-section-title {
    margin: 0;
}

.pd-video-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    color: var(--color-charcoal);
    opacity: 0.8;
    margin: 0;
}

.pd-video-player {
    position: relative;
    height: 580px;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-near-black);
    cursor: pointer;
}

.pd-video-player img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.pd-video-play-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.pd-video-play-overlay.is-hidden {
    display: none;
}

.pd-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background-color: var(--color-primary-green);
    border: 2px solid var(--color-champagne-gold);
    border-radius: 40px;
}

.pd-play-btn__icon {
    width: 24px;
    height: 24px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-play.svg');
    mask-image: url('/assets/images/icons/icon-play.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-left: 3px;
}

.pd-video-duration {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 12px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-white);
}

/* ---------------------------------------------------------------------
 * Related Properties - confirmed node 29:872. Reuses
 * .property-card/.property-card--grid from property-components.css
 * unchanged; only the section chrome + grid layout are page-specific.
 * --------------------------------------------------------------------- */

.pd-related {
    background-color: var(--color-ivory);
    border-top: 1px solid var(--color-border-light);
}

.pd-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.pd-related-header .pd-section-title {
    margin: 0;
}

.pd-view-all {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.pd-view-all span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-champagne-gold);
    text-decoration: underline;
}

.pd-icon-12 {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    background-color: var(--color-champagne-gold);
    -webkit-mask-image: url('/assets/images/icons/icon-arrow-right.svg');
    mask-image: url('/assets/images/icons/icon-arrow-right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-related-grid {
    display: flex;
    gap: 32px;
}

.pd-related-grid .property-card--grid {
    flex: 1 0 0;
    min-width: 0;
}

/* ---------------------------------------------------------------------
 * Sticky Desktop CTA Bar - confirmed node 29:991. Starts hidden (JS shows
 * it once the visitor scrolls past the main action buttons in
 * .pd-meta__right, which already carry the same two primary CTAs - this
 * is the standard reason the bar exists at all, not shown as a state
 * change in the static Figma frame, so the show/hide THRESHOLD itself is
 * a reasonable interaction default rather than a pixel-confirmed value).
 * --------------------------------------------------------------------- */

.pd-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 80px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.25s ease;
}

.pd-sticky-cta.is-visible {
    transform: translateY(0);
}

.pd-sticky-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.pd-sticky-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-green);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pd-sticky-divider {
    width: 1px;
    height: 20px;
    background-color: var(--color-stone);
    flex-shrink: 0;
}

.pd-sticky-price {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-charcoal);
    margin: 0;
    white-space: nowrap;
}

.pd-sticky-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.pd-sticky-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.pd-sticky-phone__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: block;
}

.pd-sticky-phone span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-charcoal);
    white-space: nowrap;
}

.pd-sticky-whatsapp {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border: 1.5px solid #25D366;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: #25D366;
    text-decoration: none;
    white-space: nowrap;
}

.pd-sticky-schedule {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background-color: var(--color-primary-green);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
}

/* Reserves space at the bottom of the page so the sticky bar never
   overlaps the footer once it's visible. */
.pd-sticky-cta-spacer {
    height: 72px;
}

/* ---------------------------------------------------------------------
 * Mobile Sticky Bottom CTA Bar - confirmed node 27:367. See the
 * file-level markup comment (public/property-details.php) for the
 * frame source and the documented Enquire-button deviation. Colors/
 * sizing for .pd-mobile-sticky-schedule and .pd-mobile-sticky-whatsapp
 * below are pulled exactly from that frame (390px reference width,
 * 72px container height, 44px buttons) - .pd-mobile-sticky-enquire is
 * deliberately left unstyled here, since it reuses .btn-outline
 * (buttons.css) as-is instead.
 *
 * Hidden by default (desktop uses .pd-sticky-cta above); shown at
 * <=1023px in this file's existing mobile media query, matching the
 * desktop bar's own breakpoint - always visible there, not scroll-
 * triggered, since the source frame has no such state.
 * --------------------------------------------------------------------- */

.pd-mobile-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    align-items: center;
    gap: 12px;
    height: 72px;
    padding: 0 16px;
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-light);
    box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* font-size/padding overrides below (12px/8px, down from .btn-outline's
   shared 14px/12px-24px) are scoped to this specific class, not a change
   to .btn-outline itself - three buttons sharing one 72px-wide row at
   phone widths need to be noticeably more compact than a normal button,
   but nothing else using .btn-outline elsewhere on the site should shrink
   because of that. Matches the same 12px/8px this row's other two
   buttons use below, so all three read as one consistent set rather than
   Enquire looking oversized next to the other two. */
.pd-mobile-sticky-enquire {
    flex: 1 0 0;
    padding: 8px;
    font-size: 12px;
}

.pd-mobile-sticky-schedule {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    /* min-height, not a fixed height - "Schedule Viewing" wraps to two
       lines at this column's width (confirmed live; expected and fine
       per explicit instruction, unlike a single word breaking mid-word).
       A fixed height here would either clip the second line or force it
       to overflow the box; min-height plus this tight line-height lets
       the button grow to exactly fit both lines instead, while still
       matching the other two buttons' height when text is short enough
       to stay on one line. .pd-mobile-sticky-cta's own 72px row height
       has enough headroom above/below the old 44px for this to grow into
       without crowding the row's top/bottom edges. */
    min-height: 44px;
    line-height: 1.15;
    padding: 8px;
    background-color: var(--color-champagne-gold);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: #062217;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}

.pd-mobile-sticky-whatsapp {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 44px;
    padding: 8px;
    background-color: #25D366;
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-white);
    text-decoration: none;
    box-sizing: border-box;
}

.pd-mobile-sticky-whatsapp__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.pd-mobile-sticky-cta-spacer {
    display: none;
    height: 72px;
}

/* ---------------------------------------------------------------------
 * Fullscreen gallery lightbox - see file-level doc comment for the
 * Figma-source caveat. Built consistent with this page's own dark-
 * overlay/white-text/gold-accent visual language (the gallery hero's
 * photo-counter pill is the direct reference point).
 * --------------------------------------------------------------------- */

.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(6, 34, 23, 0.96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.pd-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.pd-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 22px;
    cursor: pointer;
}

.pd-lightbox__close-icon {
    width: 18px;
    height: 18px;
    background-color: var(--color-white);
    -webkit-mask-image: url('/assets/images/icons/icon-drawer-close-v2.svg');
    mask-image: url('/assets/images/icons/icon-drawer-close-v2.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.pd-lightbox__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    height: 75vh;
    padding: 0 96px;
    box-sizing: border-box;
}

.pd-lightbox__stage img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

.pd-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 26px;
    cursor: pointer;
}

.pd-lightbox__nav:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.pd-lightbox__nav--prev {
    left: 24px;
}

.pd-lightbox__nav--next {
    right: 24px;
}

.pd-lightbox__nav-icon {
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('/assets/images/icons/icon-pagination-chevron-left.svg');
    mask-image: url('/assets/images/icons/icon-pagination-chevron-left.svg');
}

.pd-lightbox__nav--next .pd-lightbox__nav-icon {
    -webkit-mask-image: url('/assets/images/icons/icon-pagination-chevron-right.svg');
    mask-image: url('/assets/images/icons/icon-pagination-chevron-right.svg');
}

.pd-lightbox__counter {
    margin-top: 24px;
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 6px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    color: var(--color-white);
}

/* ---------------------------------------------------------------------
 * Mobile / tablet (<1024px)
 * --------------------------------------------------------------------- */

@media (max-width: 1023px) {
    .pd-breadcrumb,
    .pd-gallery,
    .pd-meta,
    .pd-section,
    .pd-facts-features-inner,
    .pd-related {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pd-gallery__hero {
        height: 320px;
    }

    .pd-gallery__thumbnails {
        display: none;
    }

    .pd-meta {
        flex-direction: column;
        gap: 24px;
    }

    .pd-meta__right {
        width: 100%;
    }

    .pd-title {
        font-size: 30px;
    }

    .pd-description-cols {
        flex-direction: column;
        gap: 24px;
    }

    .pd-facts-features-inner {
        flex-direction: column;
        gap: 40px;
    }

    .pd-location-split {
        flex-direction: column;
        gap: 32px;
        /* Desktop sets align-items: center for vertical centering in the
           row layout. In this column layout that same property governs
           the horizontal (cross) axis instead, so it was shrinking the
           map and neighbourhood box to their content width and centering
           them - override back to stretch so both go full width. */
        align-items: stretch;
    }

    .pd-map-area {
        /* Desktop's flex: 1 0 0 sizes this against .pd-location-split's
           row width; not needed once that parent is a column and this
           child already stretches full width via align-items above. */
        flex: none;
    }

    .pd-neighbourhood {
        width: 100%;
    }

    .pd-floorplan-tabs {
        flex-wrap: wrap;
    }

    .pd-floorplan-container {
        height: 280px;
    }

    .pd-video-player {
        height: 320px;
    }

    .pd-related-grid {
        flex-direction: column;
    }

    .pd-related-grid .property-card--grid {
        /* Desktop's flex: 1 0 0 (flex-basis: 0) relies on the row having
           a fixed width to grow into. In this column layout the grid's
           height is intrinsic (sized by its own children), so there's no
           extra space for flex-grow to distribute - each card collapsed
           to its 0 flex-basis instead of its natural content height,
           making the whole section render as empty. */
        flex: none;
    }

    .pd-sticky-cta {
        display: none;
    }

    .pd-sticky-cta-spacer {
        display: none;
    }

    .pd-mobile-sticky-cta {
        display: flex;
    }

    .pd-mobile-sticky-cta-spacer {
        display: block;
    }

    /* This page's own bottom bar already has a WhatsApp button - the
       global floating WhatsApp button (whatsapp-fab.css) would otherwise
       sit right on top of it in the same bottom-right corner. */
    .whatsapp-fab {
        display: none;
    }

    .pd-lightbox__stage {
        padding: 0 56px;
        height: 60vh;
    }

    .pd-lightbox__nav {
        width: 40px;
        height: 40px;
    }
}