/* dn-detail-2026.css — ready-property pages (/property/<slug>/, /fa/property/…, /ar/property/…) in the approved 2026 redesign
   (PropertyDetail.dc.html, owner 2026-10-10). The generated page (scripts/portal-prerender.mjs) and its script keep every
   behaviour; this sheet re-skins it and js/dn-detail-2026.js moves the back link into the breadcrumb row, titles the description
   and, on wide screens, keeps the permit/QR and similar listings in the main column beside the sticky agent card. */
html body.dn-gen-property { background: #FFFDF8 !important; }
html body .dn-detail-shell:has(.dn-ready-plp) { --ink: #131313; --bone: #F5F0E6; --paper: #FFFDF8; --gold: #A28C3E; --gold-ink: #6E5C22; --grey: #69645D;
  --line: #E7DFCF; --line-gold: #C9BC8F; max-width: 1280px !important; margin: 0 auto !important; padding: 20px 32px 56px !important; box-sizing: border-box !important;
  font-family: var(--dn26-font) !important; color: var(--ink); background: transparent !important; }
html body .dn-detail-shell:has(.dn-ready-plp) > .dn-back { display: none !important; }
html body .dn-ready-plp { max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }

/* breadcrumb row: back · crumbs ……… Save · Send to me · Share */
html body .dn-ready-plp .dn26-toprow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
html body .dn-ready-plp .dn-ready-crumbs { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap; font-size: 13px !important; font-weight: 700 !important;
  color: var(--grey) !important; margin: 0 !important; padding: 0 !important; }
html body .dn-ready-plp .dn-ready-crumbs a { color: var(--gold-ink) !important; text-decoration: none !important; }
html body .dn-ready-plp .dn-ready-crumbs a:hover { color: var(--ink) !important; }
html body .dn-ready-plp .dn-ready-crumbs .dn26-back { display: inline-flex; align-items: center; min-height: 32px; }
html body .dn-ready-plp .dn-ready-toolbar { margin: 0 0 0 auto !important; display: flex !important; gap: 8px !important; padding: 0 !important; }
html[dir="rtl"] body .dn-ready-plp .dn-ready-toolbar { margin: 0 auto 0 0 !important; }
html body .dn-ready-plp .dn-ready-toolbar button { font-size: 13px !important; font-weight: 800 !important; min-height: 40px !important; padding: 0 16px !important; border-radius: 999px !important;
  background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line-gold) !important; box-shadow: none !important; }
html body .dn-ready-plp .dn-ready-toolbar button:hover { border-color: var(--gold) !important; }

/* gallery: two-thirds + two stacked */
html body .dn-ready-plp .dn-ready-gallery { margin: 20px 0 0 !important; gap: 12px !important; border-radius: 0 !important; height: auto !important; }
html body .dn-ready-plp .dn-ready-shot { border-radius: 16px !important; overflow: hidden !important; background: var(--bone) !important; border: 0 !important; }
@media (min-width: 901px) {
  html body .dn-ready-plp .dn-ready-gallery { display: grid !important; grid-template-columns: 2fr 1fr !important; grid-template-rows: 204px 204px !important; }
  html body .dn-ready-plp .dn-ready-shot.hero { grid-row: 1 / span 2 !important; height: 420px !important; width: 100% !important; }
  html body .dn-ready-plp .dn-ready-shot:not(.hero) { height: 204px !important; width: 100% !important; }
}
html body .dn-ready-plp .dn-ready-shot img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
html body .dn-ready-plp .dn-ready-all { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important;
  font-size: 13px !important; font-weight: 800 !important; box-shadow: none !important; backdrop-filter: none !important; }

/* body: content + agent card */
html body .dn-ready-plp .dn-ready-layout { margin-top: 28px !important; gap: 40px !important; align-items: flex-start !important; }
html body .dn-ready-plp .dn-ready-main { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 28px !important; }
html body .dn-ready-plp .dn-ready-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
html body .dn-ready-plp .dn-ready-price { font-size: 36px !important; font-weight: 800 !important; color: var(--ink) !important; line-height: 1.1 !important; margin-bottom: -20px !important; }
html body .dn-ready-plp .dn-ready-own { color: var(--grey) !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: -20px !important; }
html body .dn-ready-plp .dn-ready-own a { color: var(--gold-ink) !important; font-weight: 800 !important; }
html body .dn-ready-plp .dn-ready-own small { color: var(--grey) !important; }
html body .dn-ready-plp .dn-ready-title { order: 0; font-size: 28px !important; font-weight: 800 !important; line-height: 1.25 !important; color: var(--ink) !important; unicode-bidi: plaintext; margin-bottom: -20px !important; }
html body .dn-ready-plp .dn-ready-kicker { color: var(--grey) !important; font-size: 14px !important; font-weight: 600 !important; }
html body .dn-ready-plp .dn-ready-block { border: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 12px !important; }
html body .dn-ready-plp .dn-ready-block h2, html body .dn-ready-plp .dn26-h2 { margin: 0 !important; font-size: 22px !important; font-weight: 800 !important; color: var(--ink) !important; }
/* facts in one bordered card, labels small caps, no icons */
html body .dn-ready-plp .dn-ready-facts { border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 24px !important; display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; background: var(--paper) !important; }
html body .dn-ready-plp .dn-ready-fact { border: 0 !important; padding: 0 !important; background: none !important; display: flex !important; gap: 4px !important; align-items: flex-start !important; }
html body .dn-ready-plp .dn-ready-fact svg { display: none !important; }
html body .dn-ready-plp .dn-ready-fact small, html body .dn-ready-plp .dn-ready-fact span:first-child:not(:only-child) { color: var(--grey) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em; text-transform: uppercase; }
html[dir="rtl"] body .dn-ready-plp .dn-ready-fact small { letter-spacing: 0; }
html body .dn-ready-plp .dn-ready-fact b, html body .dn-ready-plp .dn-ready-fact strong { font-size: 16px !important; font-weight: 800 !important; color: var(--ink) !important; }
html body .dn-ready-plp .dn-ready-desc { color: var(--ink) !important; font-size: 15px !important; line-height: 1.75 !important; font-weight: 500 !important; }
html body .dn-ready-plp .dn-ready-more { color: var(--gold-ink) !important; font-size: 14px !important; font-weight: 800 !important; background: none !important; border: 0 !important; padding: 0 !important;
  text-decoration: underline; text-underline-offset: 3px; align-self: flex-start; min-height: 44px; }
html body .dn-ready-plp .dn-ready-amen li { background: var(--bone) !important; color: var(--ink) !important; border: 1px solid var(--line-gold) !important; font-size: 13px !important; font-weight: 700 !important;
  padding: 0 16px !important; min-height: 36px; display: inline-flex !important; align-items: center; border-radius: 999px !important; }
html body .dn-ready-plp .dn-ready-map { border: 1px solid var(--line) !important; border-radius: 16px !important; overflow: hidden; background: var(--bone) !important; }
html body .dn-ready-plp .dn-ready-reg { color: var(--grey) !important; font-size: 13px !important; font-weight: 600 !important; margin-top: -16px !important; }

/* agent card */
html body .dn-ready-plp .dn-ready-agent { border: 1px solid var(--line) !important; border-radius: 16px !important; padding: 24px !important; background: var(--paper) !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important; position: sticky !important; top: 96px !important; min-width: 300px; }
html body .dn-ready-plp .dn-ready-agent-top img { width: 64px !important; height: 64px !important; border-radius: 999px !important; object-fit: cover !important; object-position: top !important; }
html body .dn-ready-plp .dn-ready-agent-top small { color: var(--grey) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; }
html body .dn-ready-plp .dn-ready-agent-top strong { font-size: 17px !important; font-weight: 800 !important; color: var(--ink) !important; }
html body .dn-ready-plp .dn-ready-agent-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
html body .dn-ready-plp .dn-ready-agent-actions .dn-enquire { grid-column: 1 / -1; order: -1; }
html body .dn-ready-plp .dn-enquire, html body .dn-ready-plp .dn-cta-hero { background: var(--ink) !important; color: var(--bone) !important; border: 1px solid var(--ink) !important; border-radius: 12px !important;
  font-size: 15px !important; font-weight: 800 !important; min-height: 52px !important; box-shadow: none !important; background-image: none !important; }
html body .dn-ready-plp .dn-enquire:hover, html body .dn-ready-plp .dn-cta-hero:hover { background: #2A2926 !important; }
html body .dn-ready-plp .dn-ready-agent .dn-call { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--gold) !important; border-radius: 12px !important; font-weight: 800 !important; min-height: 46px !important; }
html body .dn-ready-plp .dn-ready-agent .dn-whatsapp { background: #25D366 !important; color: var(--ink) !important; border: 1px solid #25D366 !important; border-radius: 12px !important; font-weight: 800 !important; min-height: 46px !important; }
html body .dn-ready-plp .dn26-agent-note { margin: 0; color: var(--grey); font-size: 12px; line-height: 1.6; font-weight: 500; }
@media (min-width: 1000px) { html body .dn-ready-plp .dn-cta-hero-wrap { display: none !important; } }

/* permit + QR: one bone panel in the main column */
html body .dn-detail-shell .dn-qr { max-width: none !important; width: 100% !important; margin: 0 !important; background: var(--bone, #F5F0E6) !important; border: 0 !important; border-radius: 16px !important;
  padding: 24px !important; box-shadow: none !important; box-sizing: border-box; }
html body .dn-detail-shell .dn-qr h2 { font-size: 17px !important; font-weight: 800 !important; color: #131313 !important; }
html body .dn-detail-shell .dn-qr-box { background: none !important; border: 0 !important; padding: 0 !important; gap: 20px !important; flex-wrap: wrap; }
html body .dn-detail-shell .dn-qr-box > img { width: 112px !important; height: 112px !important; background: #FFFDF8; border-radius: 12px; padding: 8px; }
html body .dn-detail-shell .dn-qr-btn { background: #FFFDF8 !important; color: #131313 !important; border: 1px solid #C9BC8F !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 12px !important; }
html body .dn-detail-shell .dn-permit { background: #FFFDF8 !important; border: 1px solid #E7DFCF !important; border-radius: 12px !important; box-shadow: none !important; }
html body .dn-detail-shell .dn-permit-t { color: #69645D !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .08em; text-transform: uppercase; }
html body .dn-detail-shell .dn-permit-n b { font-size: 16px !important; font-weight: 800 !important; color: #131313 !important; }

/* similar listings */
html body .dn-detail-shell .dn-hub-section { max-width: none !important; margin: 0 !important; padding: 0 !important; }
html body .dn-detail-shell .dn-hub-section h2 { font-size: 22px !important; font-weight: 800 !important; color: #131313 !important; }
html body .dn-detail-shell .dn-hub-card { border: 1px solid #E7DFCF !important; border-radius: 14px !important; box-shadow: none !important; background: #FFFDF8 !important; overflow: hidden; }
html body .dn-detail-shell .dn-hub-card-media { background: #F5F0E6 !important; }
html body .dn-detail-shell .dn-hub-badge { background: #FFFDF8 !important; color: #6E5C22 !important; border-radius: 999px !important; font-weight: 800 !important; }
html body .dn-detail-shell .dn-hub-price { color: #131313 !important; font-weight: 800 !important; }
html body .dn-detail-shell .dn-hub-place, html body .dn-detail-shell .dn-hub-facts { color: #69645D !important; }
html body .dn-detail-shell .dn-hub-more a { color: #6E5C22 !important; font-weight: 800 !important; }
/* wide screens: the permit panel and similar listings line up with the main column (the agent card column stays free) */
@media (min-width: 1000px) {
  html body .dn-detail-shell:has(.dn-ready-plp) > .dn-qr, html body .dn-detail-shell:has(.dn-ready-plp) > .dn-hub-section { max-width: calc(100% - 420px) !important; margin-top: 28px !important; }
  html[dir="rtl"] body .dn-detail-shell:has(.dn-ready-plp) > .dn-qr, html[dir="rtl"] body .dn-detail-shell:has(.dn-ready-plp) > .dn-hub-section { margin-left: auto !important; margin-right: 0 !important; }
  html body .dn-detail-shell .dn-hub-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; overflow: visible !important; }
  html body .dn-detail-shell .dn-hub-card-media { height: 150px !important; }
  html body .dn-detail-shell .dn-hub-card-media img { height: 150px !important; }
  html body .dn-detail-shell .dn-hub-card-body { padding: 12px 14px !important; gap: 3px !important; }
  html body .dn-detail-shell .dn-hub-title { font-size: 13px !important; }
}
@media (max-width: 760px) {
  html body .dn-detail-shell:has(.dn-ready-plp) { padding: 12px 16px 40px !important; }
  html body .dn-ready-plp .dn-ready-toolbar { margin: 0 !important; width: 100%; }
  html body .dn-ready-plp .dn-ready-price { font-size: 28px !important; }
  html body .dn-ready-plp .dn-ready-title { font-size: 22px !important; }
  html body .dn-ready-plp .dn-ready-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 18px !important; }
  html body .dn-ready-plp .dn-ready-agent { position: static !important; min-width: 0; }
}