/* ============================================================
   HELLO MALNAD — Property Details page
   Extends style.css. Uses the same tokens (--forest, --gold,
   --mist-dim, --radius-*, --shadow-*, Jost) so it reads as one
   continuous product, not a bolted-on template.
   ============================================================ */

/* ---------- Page offset (fixed header) ---------- */
.pd-spacer{ height:112px; }
@media (max-width:1024px){ .pd-spacer{ height:96px; } }
@media (max-width:480px){ .pd-spacer{ height:82px; } }

/* ---------- Sticky sub-nav ---------- */
/* top offset matches .pd-spacer at each breakpoint so the sub-nav docks
   directly under the fixed site header instead of sliding beneath it. */
.pd-subnav{
  position:sticky; top:112px; z-index:60;
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(19,36,28,0.04);
  transition:box-shadow .2s ease;
}
.pd-subnav-inner{
  max-width:var(--maxw); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.pd-tabs{ display:flex; gap:2px; overflow-x:auto; scrollbar-width:none; }
.pd-tabs::-webkit-scrollbar{ display:none; }
.pd-tab{
  position:relative;
  font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--text-soft);
  padding:20px 16px; white-space:nowrap; transition:color .2s ease;
}
.pd-tab::after{
  content:""; position:absolute; left:16px; right:16px; bottom:0; height:3px;
  background:var(--gold); border-radius:3px 3px 0 0;
  transform:scaleX(0); transform-origin:center; transition:transform .25s ease;
}
.pd-tab:hover{ color:var(--forest); }
.pd-tab:hover::after{ transform:scaleX(.45); }
.pd-tab.active{ color:var(--forest-deep); }
.pd-tab.active::after{ transform:scaleX(1); }
.pd-tab:focus-visible{ outline:2px solid var(--forest); outline-offset:-2px; border-radius:4px; }
.pd-subnav-cta{ display:flex; align-items:center; gap:16px; flex-shrink:0; padding:12px 0; }
.pd-subnav-price{ text-align:right; font-family:var(--font-mono); }
.pd-subnav-price .from{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); display:block; }
.pd-subnav-price .amt{ font-size:19px; font-weight:700; color:var(--forest); font-family:var(--font-display); }
@media (max-width:1024px){ .pd-subnav{ top:96px; } }
@media (max-width:786px){
  .pd-subnav-price{ display:none; }
  .pd-subnav-inner{ padding:0 16px; gap:10px; }
  .pd-tabs{
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 18px, black calc(100% - 18px), transparent 100%);
  }
  .pd-tab{ padding:16px 12px; font-size:13px; scroll-snap-align:start; }
  .pd-subnav-cta{ padding:10px 0; }
  #subnavCta{ padding:10px 16px; font-size:12.5px; white-space:nowrap; }
}
@media (max-width:480px){
  .pd-subnav{ top:82px; }
  .pd-tab{ padding:14px 10px; font-size:12.5px; }
}
/* =========================
   GALLERY
========================= */

.pd-gallery-wrap{
    position:relative;
    width:100%;
    margin:30px 0;
    border-radius:22px;
    overflow:hidden;
}

.pd-gallery{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-template-rows:220px 220px;

    gap:8px;

    border-radius:22px;

    overflow:hidden;

}

.pd-gallery-item{

    position:relative;

    overflow:hidden;

    cursor:pointer;

    border-radius:14px;

}

.pd-gallery-item.large{

    grid-column:1;

    grid-row:1 / span 2;

}

.pd-gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.pd-gallery-item:hover img{

    transform:scale(1.08);

}

.pd-gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,rgba(0,0,0,.18),transparent);

    opacity:0;

    transition:.35s;

}

.pd-gallery-item:hover::after{

    opacity:1;

}


/* =========================
   MORE PHOTOS
========================= */

.pd-more-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(2px);

}

.pd-more-overlay span{

    color:#fff;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    padding:14px 24px;

    border-radius:50px;

    font-weight:700;

    font-size:16px;

}


/* =========================
   BUTTONS
========================= */

.pd-gallery-actions{

    position:absolute;

    right:20px;

    bottom:20px;

    display:flex;

    gap:10px;

    z-index:20;

}

.pd-wishlist{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.pd-pill-btn{

    height:48px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:10px;

    border:none;

    border-radius:40px;

    background:#123524;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}


/* =========================
   LAPTOP
========================= */

@media(max-width:1200px){

.pd-gallery{

grid-template-columns:1.7fr 1fr 1fr;

grid-template-rows:190px 190px;

}

}


/* =========================
   TABLET
========================= */

@media(max-width:992px){

.pd-gallery{

grid-template-columns:1.5fr 1fr;

grid-template-rows:220px 160px 160px;

}

.pd-gallery-item.large{

grid-column:1 / span 2;

grid-row:1;

}

}


/* =========================
   MOBILE
========================= */

@media(max-width:768px){

.pd-gallery{

grid-template-columns:1fr 1fr;

grid-template-rows:220px 120px 120px;

gap:6px;

}

.pd-gallery-item.large{

grid-column:1 / span 2;

grid-row:1;

}

.pd-gallery-actions{

right:12px;

bottom:12px;

gap:8px;

}

.pd-pill-btn{

height:40px;

padding:0 14px;

font-size:12px;

}

.pd-wishlist{

width:40px;

height:40px;

}

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:480px){

.pd-gallery{

grid-template-columns:1fr 1fr;

grid-template-rows:180px 90px 90px;

gap:5px;

}

.pd-more-overlay span{

padding:10px 16px;

font-size:13px;

}

.pd-pill-btn{

padding:0 12px;

font-size:11px;

height:36px;

}

.pd-wishlist{

width:36px;

height:36px;

}

}
/* ---------- Lightbox ---------- */

.pd-lightbox{
  position:fixed; inset:0; z-index:3000; background:rgba(8,44,32,0.94);
  display:none; align-items:center; justify-content:center; flex-direction:column;
}
.pd-lightbox.open{ display:flex; }
.pd-lightbox img{ max-width:90vw; max-height:74vh; border-radius:var(--radius-md); object-fit:contain; }
.pd-lightbox-count{ color:var(--sage); font-family:var(--font-mono); font-size:13px; margin-top:16px; letter-spacing:.06em; }
.pd-lightbox-close{ position:absolute; top:22px; right:26px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.12); border:none; color:var(--mist); font-size:22px; }
.pd-lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,0.12); border:none; color:var(--mist); font-size:22px; }
.pd-lightbox-nav.prev{ left:20px; } .pd-lightbox-nav.next{ right:20px; }

/* ---------- Header block (title/badges/address) ---------- */
.pd-head{ padding:28px 0 4px; }
.pd-badges{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.pd-tag{
  display:inline-flex; align-items:center; gap:6px; background:var(--sage); color:var(--forest-deep);
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}
.pd-rating-chip{
  display:inline-flex; align-items:center; gap:7px; background:var(--forest); color:var(--mist);
  padding:6px 12px; border-radius:6px; font-weight:700; font-size:13px;
}
.pd-rating-chip small{ font-weight:500; font-size:11px; color:var(--sage); }
.pd-title{ font-size:clamp(24px,3vw,34px); font-weight:600; }
.pd-address{ display:flex; align-items:center; gap:8px; margin-top:10px; color:var(--text-soft); font-size:14.5px; }
.pd-address svg{ width:16px; height:16px; color:var(--moss); flex-shrink:0; }
.pd-address a{ color:var(--moss); font-weight:700; }

/* ---------- Layout ---------- */
.pd-layout{ display:grid; grid-template-columns:1.62fr 1fr; gap:44px; align-items:flex-start; padding:34px 0 10px; }
.pd-sidebar{ position:sticky; top:132px; display:flex; flex-direction:column; gap:18px; }
@media (max-width:980px){
  .pd-layout{ grid-template-columns:1fr; }
  .pd-sidebar{ position:static; order:-1; }
}

.pd-card{ background:var(--white); border:1px solid var(--border); border-radius:var(--radius-md); padding:26px 24px; box-shadow:var(--shadow-card); }
.pd-card + .pd-card{ margin-top:22px; }
.pd-card h3{ font-size:19px; font-weight:600; margin-bottom:18px; }
.pd-eyebrow-sm{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--moss); margin-bottom:6px; display:block; }

/* Highlights reuse .feature-list from style.css */

/* Space & rooms */
.pd-space-meta{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:20px; font-size:14px; color:var(--text-soft); }
.pd-space-meta b{ color:var(--text); }
.pd-space-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pd-space-box{ border:1px dashed var(--border); border-radius:8px; padding:16px 18px; }
.pd-space-box h5{ font-size:13px; font-weight:700; margin-bottom:10px; color:var(--forest-deep); }
.pd-space-box ul{ display:flex; flex-direction:column; gap:8px; }
.pd-space-box li{ font-size:13.5px; color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.pd-space-box li svg{ width:15px; height:15px; color:var(--moss); flex-shrink:0; }
@media (max-width:560px){ .pd-space-grid{ grid-template-columns:1fr; } }

/* Facilities checklist */
.pd-check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
.pd-check{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-soft); }
.pd-check svg{ width:16px; height:16px; color:var(--leaf); flex-shrink:0; }
@media (max-width:560px){ .pd-check-grid{ grid-template-columns:1fr; } }

/* About / read more */
.pd-about-text{ font-size:14.5px; color:var(--text-soft); line-height:1.75; }
.pd-about-text.clamped{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pd-readmore{ margin-top:10px; font-weight:700; font-size:13.5px; color:var(--moss); display:inline-flex; align-items:center; gap:6px; background:none; border:none; }
.pd-readmore svg{ width:14px; height:14px; transition:.2s; }
.pd-readmore.open svg{ transform:rotate(180deg); }

/* Promo banner */
.pd-promo{ display:flex; gap:16px; align-items:flex-start; background:var(--mist-dim); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 20px; margin-top:22px; }
.pd-promo .ic{ width:38px; height:38px; border-radius:50%; background:var(--gold-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pd-promo .ic svg{ width:18px; height:18px; color:var(--forest-deep); }
.pd-promo strong{ display:block; font-size:14.5px; margin-bottom:3px; }
.pd-promo span{ font-size:13px; color:var(--text-soft); }

/* Sidebar: rating */
.pd-rating-score{ display:flex; align-items:center; gap:14px; }
.pd-rating-score .num{ font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--forest); }
.pd-rating-score .lbl b{ display:block; font-size:14.5px; }
.pd-rating-score .lbl small{ font-family:var(--font-mono); font-size:11.5px; color:var(--moss); }
.pd-quote-row{ display:flex; gap:10px; margin-top:18px; overflow-x:auto; scrollbar-width:none; }
.pd-quote-row::-webkit-scrollbar{ display:none; }
.pd-quote{ flex:0 0 auto; max-width:200px; background:var(--mist-dim); border-radius:8px; padding:11px 14px; font-size:12.5px; color:var(--text-soft); font-style:italic; }

.pd-io-row{ display:flex; justify-content:space-between; gap:14px; margin-bottom:14px; }
.pd-io-row div{ flex:1; }
.pd-io-row .t{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; color:var(--text-soft); letter-spacing:.06em; }
.pd-io-row .v{ font-weight:700; font-size:14.5px; margin-top:4px; }
.pd-see-more{ font-size:12.5px; font-weight:700; color:var(--moss); }

.pd-map-embed{ border-radius:8px; overflow:hidden; border:1px solid var(--border); margin-bottom:14px; }
.pd-map-embed iframe{ width:100%; height:170px; border:0; display:block; filter:saturate(.9); }
.pd-loc-score{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pd-loc-score b{ color:var(--forest); }
.pd-landmark-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.pd-landmark-list li{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--text-soft); gap:10px; }
.pd-landmark-list li span:first-child{ display:flex; align-items:center; gap:8px; }
.pd-landmark-list svg{ width:15px; height:15px; color:var(--moss); flex-shrink:0; }
.pd-landmark-list b{ color:var(--text); font-weight:700; white-space:nowrap; }

/* ---------- Rooms section ---------- */
.pd-filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
.pd-filter-pill{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--border); background:var(--white);
  font-weight:700; font-size:13px; color:var(--text-soft); display:inline-flex; align-items:center; gap:8px;
}
.pd-filter-pill svg{ width:15px; height:15px; color:var(--moss); }
.pd-filter-pill.active{ border-color:var(--forest); color:var(--forest-deep); box-shadow:0 0 0 1px var(--forest); }

.pd-room-card{ display:grid; grid-template-columns:220px 1fr; align-items:stretch; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--white); box-shadow:var(--shadow-card); margin-bottom:22px; }
.pd-room-img{ position:relative; align-self:stretch; border-right:1px solid var(--border); }
.pd-room-img img{ width:100%; height:100%; object-fit:cover; display:block; min-height:210px; }
.pd-room-img .badge{ position:absolute; top:12px; left:12px; background:var(--gold); color:var(--forest-deep); font-family:var(--font-mono); font-size:10.5px; font-weight:700; padding:6px 11px; border-radius:999px; letter-spacing:.04em; box-shadow:0 4px 10px -4px rgba(19,36,28,0.35); }
.pd-room-body{ padding:20px 22px 22px; display:flex; flex-direction:column; }
.pd-room-body h4{ font-size:18px; font-weight:600; margin-bottom:6px; }
.pd-room-specs{ font-size:13px; color:var(--text-soft); margin-bottom:10px; }
.pd-room-specs span + span::before{ content:'·'; margin:0 7px; color:var(--border); }
.pd-room-amenities{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:6px; }
.pd-room-amenities span{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-soft); }
.pd-room-amenities svg{ width:14px; height:14px; color:var(--moss); }

/* "Lowest price available" ribbon — bleeds to the edges of the room body */
.pd-rate-ribbon{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,#C0392B 0%,#E2574C 100%);
  color:#fff; font-weight:700; font-size:12.5px; letter-spacing:.01em;
  padding:10px 22px; margin:16px -22px 0;
}
.pd-rate-ribbon svg{ width:15px; height:15px; flex-shrink:0; }

.pd-rate-row{ display:grid; grid-template-columns:1fr 150px 190px; gap:20px; align-items:start; border-top:1px dashed var(--border); padding:18px 0; }
.pd-rate-row:first-of-type{ margin-top:16px; }
.pd-rate-ribbon + .pd-rate-row:first-of-type{ margin-top:0; border-top:none; }
.pd-rate-tags{ display:flex; flex-direction:column; gap:5px; font-size:13px; }
.pd-rate-tags .lp{ color:#C0392B; font-weight:700; font-size:12px; }
.pd-rate-tags .ok{ color:var(--forest); font-weight:700; display:flex; align-items:center; gap:6px; }
.pd-rate-tags .ok svg{ width:13px; height:13px; }
.pd-rate-tags .info{ color:var(--text-soft); font-size:12px; }
.pd-rate-price{ text-align:right; padding-top:1px; }
.pd-rate-price .old{ font-size:12px; color:var(--text-soft); text-decoration:line-through; }
.pd-rate-price .now{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--forest); line-height:1.15; }
.pd-rate-price .per{ font-size:11px; color:var(--text-soft); display:block; }
.pd-qty-total{ display:none; font-size:11px; font-weight:700; color:var(--forest-deep); margin-top:5px; }

/* Room quantity selector ("1 room ▾") + Book button stack */
.pd-rate-book{ display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.pd-qty-wrap{ position:relative; }
.pd-qty-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; padding:9px 32px 9px 14px;
  border:1.5px solid var(--border); border-radius:8px; background:var(--white);
  font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--text);
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease;
}
.pd-qty-select:hover{ border-color:var(--forest); }
.pd-qty-select:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(19,74,59,0.12); }
.pd-qty-caret{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:13px; height:13px; color:var(--moss); pointer-events:none; }
.pd-qty-caret svg{ width:100%; height:100%; display:block; }
.pd-rate-book .btn{ width:100%; }
.pd-rate-book .note{ font-size:10.5px; color:var(--text-soft); text-align:center; margin-top:2px; }
.pd-rate-book .left{ font-size:10.5px; color:#C0392B; text-align:center; font-weight:700; margin-top:2px; }

@media (max-width:786px){
  .pd-room-card{ grid-template-columns:1fr; }
  .pd-room-img{ border-right:none; border-bottom:1px solid var(--border); }
  .pd-room-img img{ min-height:200px; aspect-ratio:16/10; height:auto; }
  .pd-rate-ribbon{ margin:14px -20px 0; padding:9px 20px; }
  .pd-rate-row{ grid-template-columns:1fr; text-align:left; gap:12px; }
  .pd-rate-price{ text-align:left; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .pd-rate-price .now{ order:1; }
  .pd-rate-price .old{ order:0; }
  .pd-rate-price .per, .pd-qty-total{ flex-basis:100%; }
  .pd-rate-book{ max-width:280px; }
}
@media (max-width:480px){
  .pd-room-body{ padding:16px 16px 18px; }
  .pd-rate-ribbon{ margin:14px -16px 0; padding:9px 16px; font-size:11.5px; }
  .pd-rate-book{ max-width:none; }
}

/* ---------- Amenities grid ---------- */
.pd-amenities-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px; }
.pd-amenity-col h5{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--forest-deep); margin-bottom:16px; font-family:var(--font-mono); }
.pd-amenity-col ul{ display:flex; flex-direction:column; gap:11px; }
.pd-amenity-col li{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--text-soft); }
.pd-amenity-col li svg{ width:16px; height:16px; color:var(--moss); flex-shrink:0; }
.pd-amenity-col li.na{ color:#B7C2BB; text-decoration:line-through; }
.pd-amenity-col li.na svg{ color:#C9D2CC; }
@media (max-width:980px){ .pd-amenities-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .pd-amenities-grid{ grid-template-columns:1fr; } }

/* ---------- Location section ---------- */
.pd-loc-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.pd-loc-wrap .pd-map-embed iframe{ height:320px; }
@media (max-width:900px){ .pd-loc-wrap{ grid-template-columns:1fr; } }

/* ---------- Policies ---------- */
.pd-policy-block{ margin-bottom:26px; }
.pd-policy-block h4{ font-size:16px; font-weight:700; margin-bottom:10px; }
.pd-policy-block p, .pd-policy-block li{ font-size:14.5px; color:var(--text-soft); line-height:1.75; }
.pd-policy-block ul{ padding-left:20px; list-style:disc; }
.pd-fact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.pd-fact{ background:var(--mist-dim); border-radius:8px; padding:14px 16px; border:1px solid var(--border); }
.pd-fact .t{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--moss); }
.pd-fact .v{ font-weight:700; font-size:14.5px; margin-top:5px; }
@media (max-width:786px){ .pd-fact-grid{ grid-template-columns:1fr 1fr; } }

/* Section title for main content blocks */
.pd-section-title{ font-size:24px; font-weight:600; margin-bottom:22px; }
.pd-block{ padding:46px 0; border-top:1px solid var(--border); }
.pd-block:first-of-type{ border-top:none; }