/* ============================================================
   LUXURY ESCAPES — property.css  (Single Property Detail Page)
   Inherits the design system tokens defined in styles.css
   ============================================================ */

/* ─── Solid header (no hero behind the PDP) ───────────────────
   The bar itself is styled once in styles.css, where the rest of
   the header lives. It used to be redefined here too, and since
   this file loads later that copy quietly won — which is why the
   bar stayed dark on these pages after styles.css turned it white.
   Only the topbar, which keeps its own dark treatment, stays. */
.header--solid .header__topbar {
  background: rgba(10, 16, 32, .9);
  border-bottom: 1px solid var(--border);
}

/* ─── Page wrapper ────────────────────────────────────────── */
.pdp {
  min-height: 70vh;
  padding-top: 138px;     /* clear fixed topbar + nav */
  padding-bottom: 80px;
}
@media (max-width: 860px) {
  .pdp { padding-top: 92px; }
}

/* ─── Loading skeleton ────────────────────────────────────── */
.pdp-loading { display: grid; gap: 22px; }
.pdp-skel {
  background: linear-gradient(110deg, var(--bg-card) 8%, #131d33 18%, var(--bg-card) 33%);
  background-size: 220% 100%;
  animation: pdpShimmer 1.4s linear infinite;
  border-radius: var(--radius);
}
.pdp-skel--gallery { height: 460px; }
.pdp-skel-row { display: grid; grid-template-columns: 1fr 360px; gap: 22px; }
.pdp-skel--main { height: 520px; }
.pdp-skel--side { height: 520px; }
@keyframes pdpShimmer { to { background-position: -220% 0; } }
@media (max-width: 860px) {
  .pdp-skel-row { grid-template-columns: 1fr; }
  .pdp-skel--gallery { height: 280px; }
  .pdp-skel--side { height: 320px; }
}

/* ─── Breadcrumb ──────────────────────────────────────────── */
.pdp-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-size: .8rem; letter-spacing: .02em;
  color: var(--text-2);
  margin-bottom: 22px;
}
.pdp-breadcrumb a { color: var(--text-2); transition: color .25s; }
.pdp-breadcrumb a:hover { color: var(--gold); }
.pdp-breadcrumb span { opacity: .5; }
.pdp-breadcrumb__current {
  color: var(--text); opacity: .85;
  max-width: 50ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── Head (title + price) ────────────────────────────────── */
.pdp-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: 26px;
}
.pdp-head__badge {
  display: inline-block;
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px; margin-bottom: 14px;
}
.pdp-head__badge--sale { background: var(--gold-dim); color: var(--gold-2); border: 1px solid var(--border-gold); }
.pdp-head__badge--rent { background: rgba(120,170,255,.1); color: #9cc0ff; border: 1px solid rgba(120,170,255,.25); }
.pdp-head__badge--sold { background: rgba(255,90,90,.12); color: #ff9d9d; border: 1px solid rgba(255,90,90,.25); }
.pdp-head__title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 600; line-height: 1.12; color: var(--white);
  letter-spacing: -.01em;
}
.pdp-head__loc {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; color: var(--text-2); font-size: .95rem;
}
.pdp-head__loc svg { color: var(--gold); }
.pdp-head__price { text-align: right; flex-shrink: 0; }
.pdp-head__price strong {
  display: block;
  font-family: var(--font-cormorant);
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  font-weight: 600; color: var(--gold-2); line-height: 1;
}
.pdp-head__price span { font-size: .9rem; color: var(--text-2); }
@media (max-width: 720px) {
  .pdp-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pdp-head__price { text-align: left; }
}

/* ─── Gallery ─────────────────────────────────────────────── */
.pdp-gallery {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 12px;
  margin-bottom: 40px;
  height: 480px;
}
.pdp-gallery__main {
  position: relative; height: 100%; width: 100%;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); padding: 0; cursor: none;
  background: var(--bg-card);
}
.pdp-gallery__main img,
.pdp-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.pdp-gallery__main:hover img,
.pdp-thumb:hover img { transform: scale(1.06); }
.pdp-gallery__badge {
  position: absolute; top: 16px; left: 16px;
  font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(8px);
}
.pdp-gallery__badge--sale { background: rgba(201,168,108,.22); color: #fff; border: 1px solid var(--border-gold); }
.pdp-gallery__badge--rent { background: rgba(120,170,255,.22); color: #fff; border: 1px solid rgba(120,170,255,.3); }
.pdp-gallery__badge--sold { background: rgba(255,90,90,.25); color: #fff; }
.pdp-gallery__count {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; align-items: center; gap: 7px;
  font-size: .78rem; font-weight: 500; color: #fff;
  padding: 9px 14px; border-radius: 100px;
  background: rgba(6,8,15,.65); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
}
.pdp-gallery__side {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px;
  height: 100%;
}
.pdp-thumb {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); padding: 0; cursor: none;
  background: var(--bg-card);
}
.pdp-thumb__more {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,8,15,.62); backdrop-filter: blur(3px);
  font-family: var(--font-cormorant); font-size: 1.7rem; font-weight: 600; color: #fff;
}
@media (max-width: 860px) {
  .pdp-gallery { grid-template-columns: 1fr; height: auto; }
  .pdp-gallery__main { height: 260px; }
  .pdp-gallery__side { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr; height: 84px; }
}

/* ─── Two-column layout ───────────────────────────────────── */
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 980px) {
  .pdp-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ─── Spec cards row ──────────────────────────────────────── */
.pdp-specs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 38px;
}
.pdp-spec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 18px 18px 16px;
  background: linear-gradient(150deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.pdp-spec__icon { color: var(--gold); }
.pdp-spec__icon svg { width: 22px; height: 22px; }
.pdp-spec strong {
  font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; color: var(--white);
  margin-top: 4px; line-height: 1.1;
}
.pdp-spec span { font-size: .76rem; letter-spacing: .04em; color: var(--text-2); text-transform: uppercase; }

/* ─── Content blocks ──────────────────────────────────────── */
.pdp-block { margin-bottom: 40px; }
.pdp-block__title {
  font-family: var(--font-serif);
  font-size: 1.45rem; font-weight: 600; color: var(--white);
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pdp-block__title::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 48px; height: 2px; background: var(--gold);
}
.pdp-desc p { color: var(--text); margin-bottom: 14px; font-size: .98rem; line-height: 1.8; }
.pdp-desc p:last-child { margin-bottom: 0; }

/* ─── Amenities ───────────────────────────────────────────── */
.pdp-amenities {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 18px;
}
.pdp-amenities li {
  display: flex; align-items: center; gap: 11px;
  font-size: .92rem; color: var(--text);
}
.pdp-amenities li svg { color: var(--gold); flex-shrink: 0; }

/* ─── Info table ──────────────────────────────────────────── */
.pdp-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px;
}
.pdp-info__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.pdp-info__row span { color: var(--text-2); font-size: .88rem; }
.pdp-info__row strong { color: var(--white); font-weight: 500; font-size: .92rem; text-align: right; }
@media (max-width: 620px) { .pdp-info { grid-template-columns: 1fr; gap: 0; } }

/* ─── Location map (community-level; keyless Google Maps embed) ─── */
.pdp-map-block .pdp-map__area {
  display: flex; align-items: center; gap: 7px;
  font-size: .92rem; color: var(--gold); margin: -4px 0 16px;
}
.pdp-map {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 300px;
  border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  background: rgba(0, 0, 0, .18);
}
.pdp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdp-map__note { margin-top: 12px; font-size: .8rem; color: var(--text-2); }
@media (max-width: 620px) { .pdp-map { min-height: 230px; } }

/* ─── DLD verification ────────────────────────────────────── */
.pdp-dld {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  padding: 26px; border: 1px solid var(--border-gold); border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(201,168,108,.06), rgba(10,16,32,.4));
}
.pdp-dld__qr { text-align: center; }
.pdp-dld__qr img {
  width: 132px; height: 132px; border-radius: var(--radius-sm);
  background: #fff; padding: 6px; display: block;
}
.pdp-dld__qr span { display: block; margin-top: 9px; font-size: .72rem; color: var(--text-2); }
.pdp-dld__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-2); margin-bottom: 12px;
}
.pdp-dld__badge svg { color: var(--gold); }
.pdp-dld__info p { font-size: .9rem; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; }
.pdp-dld__permits { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 16px; }
.pdp-dld__permits span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); margin-bottom: 3px; }
.pdp-dld__permits strong { font-size: 1.02rem; color: var(--white); letter-spacing: .02em; }
.pdp-dld__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dld-link { color: var(--gold); font-size: .88rem; font-weight: 500; transition: color .25s; }
.dld-link:hover { color: var(--gold-2); }
@media (max-width: 620px) {
  .pdp-dld { grid-template-columns: 1fr; text-align: center; }
  .pdp-dld__permits, .pdp-dld__actions { justify-content: center; }
}

/* ─── Sticky sidebar ──────────────────────────────────────── */
.pdp-sidebar { position: sticky; top: 110px; }
.pdp-cta-card {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-lg);
}
.pdp-cta-card__price { display: flex; align-items: baseline; gap: 8px; }
.pdp-cta-card__price strong {
  font-family: var(--font-cormorant); font-size: 2rem; font-weight: 600; color: var(--gold-2); line-height: 1;
}
.pdp-cta-card__price span { font-size: .88rem; color: var(--text-2); }
.pdp-cta-card__ref { font-size: .78rem; color: var(--text-2); margin-top: 6px; letter-spacing: .04em; }

.pdp-agent {
  display: flex; align-items: center; gap: 13px;
  margin: 20px 0; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.pdp-agent img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-gold); }
.pdp-agent__noimg {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold-dim); color: var(--gold-2); font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600;
  border: 1px solid var(--border-gold);
}
.pdp-agent strong { display: block; color: var(--white); font-size: .98rem; }
.pdp-agent span { font-size: .8rem; color: var(--text-2); }

.pdp-form { display: grid; gap: 10px; margin-top: 18px; }
.pdp-form input, .pdp-form textarea {
  width: 100%; padding: 12px 14px;
  background: rgba(6,8,15,.5); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--white); font-family: var(--font-sans); font-size: .9rem; resize: vertical;
  transition: border-color .25s, background .25s;
}
.pdp-form input::placeholder, .pdp-form textarea::placeholder { color: var(--text-2); }
.pdp-form input:focus, .pdp-form textarea:focus {
  outline: none; border-color: var(--border-gold); background: rgba(6,8,15,.7);
}
.pdp-form__submit { width: 100%; margin-top: 4px; justify-content: center; }

/* Green confirmation shown after a successful enquiry send */
.pdp-form__success {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.45);
  color: #6ee7a0;
  font-size: .9rem;
  line-height: 1.55;
  text-align: center;
}
.pdp-form__success::before {
  content: '✓';
  display: block;
  font-size: 1.4rem;
  margin-bottom: 6px;
  color: #6ee7a0;
}

.pdp-cta-card__direct { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pdp-direct-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text); font-size: .86rem; font-weight: 500;
  transition: border-color .25s, color .25s, background .25s;
}
.pdp-direct-btn:hover { border-color: var(--border-gold); color: var(--gold-2); }
.pdp-direct-btn--wa:hover { border-color: rgba(37,211,102,.5); color: #5fe28a; }

/* ─── Mobile sticky contact bar ───────────────────────────────
   Desktop keeps the sidebar; on phones the agent card is far below
   the fold, so this fixed bar keeps Call / WhatsApp / Enquire in reach. */
.pdp-mobilebar { display: none; }
@media (max-width: 768px) {
  .pdp-mobilebar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10,14,22,.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 26px rgba(0,0,0,.4);
  }
  .pdp-mobilebar__price {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.15; flex-shrink: 1; min-width: 0; text-align: left;
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .pdp-mobilebar__price strong {
    display: flex; align-items: center; gap: 2px;
    font-family: var(--font-cormorant); font-size: 1.15rem; font-weight: 600;
    color: var(--gold-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw;
  }
  .pdp-mobilebar__price span { font-size: .62rem; color: var(--text-2); letter-spacing: .02em; }
  .pdp-mobilebar__price .price-dirham { width: 13px; height: 13px; }
  .pdp-mobilebar__actions { display: flex; gap: 8px; margin-left: auto; flex-shrink: 0; }
  .pdp-mobilebar__btn {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    height: 46px; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 600;
  }
  .pdp-mobilebar__btn--call {
    width: 46px; border: 1px solid var(--border-gold); color: var(--gold-2);
  }
  .pdp-mobilebar__btn--wa {
    padding: 0 18px; background: #25d366; color: #fff; border: 1px solid #25d366;
  }
  .pdp-mobilebar__btn--wa svg { fill: #fff; }
  /* Room for the bar; the page's generic WhatsApp float would sit on top of it
     and duplicate the (agent-specific) one in the bar, so hide it here. */
  .pdp-body { padding-bottom: 74px; }
  .pdp-body .wa-float { display: none; }
}

/* ─── Similar properties ──────────────────────────────────── */
.pdp-similar { margin-top: 70px; }
.pdp-similar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.pdp-similar__head .pdp-block__title { margin-bottom: 0; padding-bottom: 14px; }
.pdp-similar__all { color: var(--gold); font-size: .88rem; font-weight: 500; flex-shrink: 0; }
.pdp-similar__all:hover { color: var(--gold-2); }
.pdp-similar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .pdp-similar__grid { grid-template-columns: 1fr; } }

.pdp-sim-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-mid));
  border: 1px solid var(--border);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
}
.pdp-sim-card:hover { transform: translateY(-6px); border-color: var(--border-gold); box-shadow: var(--shadow-lg); }
.pdp-sim-card__img { position: relative; height: 200px; overflow: hidden; }
.pdp-sim-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pdp-sim-card:hover .pdp-sim-card__img img { transform: scale(1.07); }
.pdp-sim-card__badge {
  position: absolute; top: 12px; left: 12px;
  font-size: .62rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; backdrop-filter: blur(8px);
}
.pdp-sim-card__badge--sale { background: rgba(201,168,108,.22); color: #fff; }
.pdp-sim-card__badge--rent { background: rgba(120,170,255,.22); color: #fff; }
.pdp-sim-card__badge--sold { background: rgba(255,90,90,.25); color: #fff; }
.pdp-sim-card__body { padding: 18px; }
.pdp-sim-card__price { font-family: var(--font-cormorant); font-size: 1.4rem; font-weight: 600; color: var(--gold-2); }
.pdp-sim-card__price small { font-size: .8rem; color: var(--text-2); }
.pdp-sim-card__title {
  color: var(--white); font-size: .96rem; margin: 6px 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-sim-card__meta { font-size: .82rem; color: var(--text-2); }

/* ─── Unavailable / 404 ───────────────────────────────────── */
.pdp-unavailable { display: flex; justify-content: center; padding: 60px 0; }
.pdp-unavailable__inner { text-align: center; max-width: 480px; }
.pdp-unavailable__inner svg { color: var(--gold); opacity: .55; margin-bottom: 22px; }
.pdp-unavailable__inner h1 { font-family: var(--font-serif); font-size: 1.8rem; color: var(--white); margin-bottom: 14px; }
.pdp-unavailable__inner p { color: var(--text-2); line-height: 1.7; margin-bottom: 26px; }

/* ─── Lightbox ────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 3000;
  display: none; align-items: center; justify-content: center;
  background: rgba(4,6,12,.94); backdrop-filter: blur(8px);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 88vw; max-height: 84vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lightbox__close {
  position: absolute; top: 22px; right: 28px;
  width: 46px; height: 46px; font-size: 2rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; cursor: none; transition: background .25s;
}
.lightbox__close:hover { background: rgba(255,255,255,.18); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; font-size: 2.2rem; line-height: 1;
  color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%; cursor: none; transition: background .25s;
}
.lightbox__nav:hover { background: rgba(201,168,108,.3); }
.lightbox__nav--prev { left: 26px; }
.lightbox__nav--next { right: 26px; }
.lightbox__counter {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: .85rem; letter-spacing: .1em; color: rgba(255,255,255,.7);
}
@media (max-width: 620px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.7rem; }
  .lightbox__nav--prev { left: 10px; } .lightbox__nav--next { right: 10px; }
}

/* ════════════════════════════════════════════════════════════
   LIGHT THEME — property detail page adjustments
   (most of the PDP uses design tokens that flip automatically;
   these handle the few hard-coded dark tints.)
   ════════════════════════════════════════════════════════════ */
html.theme-light .pdp-dld {
  background: linear-gradient(150deg, rgba(201,168,108,.12), rgba(255,255,255,.55));
}
html.theme-light .pdp-skel {
  background: linear-gradient(110deg, #ece6db 8%, #f7f3ec 18%, #ece6db 33%);
  background-size: 220% 100%;
}
html.theme-light .pdp-form input,
html.theme-light .pdp-form textarea {
  background: #fff; border-color: var(--ink-line); color: var(--ink);
}
html.theme-light .pdp-form input::placeholder,
html.theme-light .pdp-form textarea::placeholder { color: var(--ink-mut); }
/* gallery overlay chips & lightbox stay dark (they sit over photos) */

/* ── Light theme: give "airless" sections a proper card treatment ──
   .pdp-info (Property Information) and .pdp-amenities (Features &
   Amenities) have no background/padding of their own — on dark they
   read fine because the light text pops off the dark page, but on
   the light body they sat flush with zero breathing room. Wrap them
   like the other PDP cards (spec row, DLD block, sidebar). Also
   deepen the spec-card / sidebar surfaces so they read as distinct
   cards instead of blending into the ivory page. */
html.theme-light .pdp-info,
html.theme-light .pdp-amenities,
html.theme-light .pdp-desc {
  background: #ffffff;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
html.theme-light .pdp-info__row { border-bottom-color: var(--ink-line); }

html.theme-light .pdp-spec {
  background: #ffffff;
  box-shadow: var(--shadow);
}
html.theme-light .pdp-cta-card,
html.theme-light .pdp-sim-card {
  background: #ffffff;
  border-color: var(--ink-line);
}
html.theme-light .pdp-dld {
  background: linear-gradient(150deg, rgba(201,168,108,.1), #ffffff);
  box-shadow: var(--shadow);
}

/* ────────────────────────────────────────────────────────────
   SHARE
   ──────────────────────────────────────────────────────────── */
.pdp-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}
.pdp-share { position: relative; }
.pdp-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.pdp-share__btn:hover {
  border-color: var(--border-gold);
  color: var(--gold);
  background: rgba(201,168,108,.08);
}
.pdp-share__btn svg { opacity: .7; }
.pdp-share__btn:hover svg { opacity: 1; }

.pdp-share__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 178px;
  padding: 6px;
  border-radius: 12px;
  /* Solid, not the near-clear glass: this floats over photographs and body
     copy, where a wash of white leaves the labels unreadable. */
  background: rgba(10, 16, 32, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  animation: pdpShareIn .18s var(--ease) both;
}
.pdp-share__menu[hidden] { display: none; }
@keyframes pdpShareIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}
.pdp-share__menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: rgba(255,255,255,.9);
  font-family: inherit;
  font-size: .84rem;
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pdp-share__menu button:hover { background: rgba(255,255,255,.1); color: #fff; }
.pdp-share__menu button svg { opacity: .6; flex-shrink: 0; }
.pdp-share__menu button:hover svg { opacity: 1; }

body.rtl .pdp-share__menu { right: auto; left: 0; }
body.rtl .pdp-head__aside { align-items: flex-start; }
body.rtl .pdp-share__menu button { text-align: right; }

@media (max-width: 720px) {
  .pdp-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pdp-head__aside { align-items: flex-start; width: 100%; flex-direction: row; justify-content: space-between; }
  .pdp-head__price { text-align: left; }
  .pdp-share__menu { right: 0; left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-share__menu { animation: none; }
}