/* ----------------------------------
   wordpress.css / Version: 1.0.0
   Table of Contents
   01. Accessibility
   02. Alignments & Captions
   03. Galleries
   04. Post & Page Elements
   05. Navigation Sub-menus
   06. Comments
   07. Widgets & Sidebar
   08. Footer Widget Area
   09. Blog / Archive Extras
   10. Block Editor Support

   NOTE: none of these rules apply to any markup the original HTML
   template produced. They only style output WordPress itself can
   generate (captions, galleries, comments, widgets, sub-menus).
   With the demo content installed the rendered page is byte-for-byte
   the same layout as the static template.
---------------------------------- */

/* =============================================================
   01. ACCESSIBILITY
============================================================= */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--paper);
  border-radius: 2px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--ink);
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  height: auto;
  left: 6px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 6px;
  width: auto;
  z-index: 100000;
}

.skip-link:focus {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* =============================================================
   02. ALIGNMENTS & CAPTIONS
============================================================= */
.alignleft {
  float: left;
  margin: 6px 28px 20px 0;
}

.alignright {
  float: right;
  margin: 6px 0 20px 28px;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignnone {
  margin: 6px 0 20px;
}

.alignwide,
.alignfull {
  margin-bottom: 28px;
  margin-top: 28px;
}

.wp-caption {
  margin-bottom: 22px;
  max-width: 100%;
}

.wp-caption img {
  height: auto;
  width: 100%;
}

.wp-caption-text,
.wp-block-image figcaption,
figcaption {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 10px;
  text-align: center;
}

.post-body .alignleft,
.post-body .alignright {
  max-width: 50%;
}

/* =============================================================
   03. GALLERIES
============================================================= */
.gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 28px;
}

.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.gallery-item img {
  border: 1px solid var(--line);
  height: auto;
  width: 100%;
}

.gallery-caption {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 6px;
}

/* =============================================================
   04. POST & PAGE ELEMENTS
============================================================= */
.sticky .blog-grid-body h3::before {
  color: var(--brass-dark);
  content: "\2605";
  margin-right: 8px;
}

.post-password-form {
  display: grid;
  gap: 14px;
  max-width: 460px;
}

.post-password-form input[type="submit"] {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  justify-self: start;
  padding: 15px 26px;
  transition: all 0.25s ease;
  width: auto;
}

.post-password-form input[type="submit"]:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}

.post-body table,
.entry-content table {
  border: 1px solid var(--line);
  border-collapse: collapse;
  margin-bottom: 22px;
  width: 100%;
}

.post-body th,
.post-body td,
.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  font-size: 14.5px;
  padding: 10px 14px;
  text-align: left;
}

.post-body th,
.entry-content th {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.post-body a,
.entry-content a {
  color: var(--brass-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-body a:hover,
.entry-content a:hover {
  color: var(--ink);
}

.post-body pre,
.entry-content pre {
  background: var(--ink);
  border-left: 3px solid var(--brass);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  margin-bottom: 22px;
  overflow-x: auto;
  padding: 22px 24px;
}

.post-body code,
.entry-content code {
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 2px 6px;
}

.post-body pre code,
.entry-content pre code {
  background: none;
  padding: 0;
}

.entry-content h2 { font-size: 30px; margin: 44px 0 16px; }
.entry-content h3 { font-size: 24px; margin: 36px 0 14px; }
.entry-content h4 { font-size: 20px; margin: 30px 0 12px; }
.entry-content p { color: var(--ink); font-size: 16.5px; line-height: 1.75; margin-bottom: 22px; }
.entry-content ul,
.entry-content ol { margin: 0 0 22px 22px; }
.entry-content li { color: var(--ink); font-size: 16px; line-height: 1.65; list-style: disc; margin-bottom: 10px; }
.entry-content ol li { list-style: decimal; }

.page-content-area { padding: 56px 0 120px; }
.page-content-area .wrap { max-width: 820px; }
.page-title-area { padding: 56px 0 0; }
.page-title-area h1 { font-size: clamp(30px, 4.4vw, 50px); margin-bottom: 16px; }

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}

.post-tags a {
  border: 1px solid var(--line);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 12px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.post-tags a:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.post-nav {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 28px;
}

.post-nav a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 16px;
  max-width: 300px;
}

.post-nav a:hover { color: var(--brass-dark); }

.post-nav span {
  color: var(--slate);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.post-nav-next { text-align: right; }

/* =============================================================
   05. NAVIGATION SUB-MENUS
   Only rendered when a menu item actually has children, a flat
   menu (which is what the demo ships) is untouched.
============================================================= */
.nav-links .sub-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 36px rgba(20, 33, 61, 0.12);
  display: block;
  left: 0;
  min-width: 200px;
  opacity: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  visibility: hidden;
  z-index: 120;
}

.nav-links li {
  position: relative;
}

.nav-links .sub-menu li a {
  display: block;
  font-size: 13.5px;
  padding: 9px 18px;
  white-space: nowrap;
}

.nav-links .sub-menu li a::after {
  display: none;
}

.nav-links .sub-menu li a:hover {
  background: var(--paper-2);
  color: var(--brass-dark);
}

.nav-links .sub-menu .sub-menu {
  left: 100%;
  top: -9px;
}

.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links li.submenu-open > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.submenu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  height: 30px;
  padding: 0;
  position: absolute;
  right: 0;
  top: 4px;
  width: 30px;
}

.submenu-toggle span {
  border-bottom: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  display: block;
  height: 7px;
  margin: 0 auto;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
  width: 7px;
}

.submenu-open > .submenu-toggle span {
  transform: rotate(-135deg) translate(-3px, -3px);
}

.nav-links .current-menu-item > a,
.nav-links .current_page_item > a,
.nav-links .current-menu-ancestor > a,
.footer-links .current-menu-item > a,
.footer-links .current_page_item > a,
.footer-links .current-menu-ancestor > a {
  color: var(--brass-dark);
}


.nav-links > .current-menu-item > a::after,
.nav-links > .current_page_item > a::after {
  width: 100%;
}

@media (max-width: 1040px) {
  .nav-links .sub-menu {
    border: none;
    box-shadow: none;
    display: none;
    margin-left: 14px;
    min-width: 0;
    opacity: 1;
    padding: 0;
    position: static;
    transform: none;
    visibility: visible;
  }

  .nav-links li.submenu-open > .sub-menu {
    display: block;
  }

  .submenu-toggle {
    display: block;
  }

  .nav-links .menu-item-has-children > a {
    padding-right: 36px;
  }
}

/* =============================================================
   06. COMMENTS
============================================================= */
.comments-area {
  margin: 56px auto 0;
  max-width: 720px;
  padding: 40px 0 0;
}

.comments-title,
.comment-reply-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 28px;
}

.comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.comment-list li {
  list-style: none;
}

.comment-list .children {
  list-style: none;
  margin: 0 0 0 32px;
  padding: 0;
}

.comment-body {
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}

.comment-meta {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.comment-author img {
  border-radius: 50%;
  flex-shrink: 0;
  height: 44px;
  width: 44px;
}

.comment-author .fn {
  font-family: var(--font-display);
  font-size: 16px;
  font-style: normal;
}

.comment-metadata {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.comment-content p {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.reply a,
.comment-reply-link {
  color: var(--brass-dark);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comment-awaiting-moderation {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 12px;
}

.comment-form {
  display: grid;
  gap: 16px;
}

.comment-form .comment-form-cookies-consent {
  align-items: center;
  display: flex;
  gap: 10px;
}

.comment-form .comment-form-cookies-consent input {
  width: auto;
}

.comment-form .comment-form-cookies-consent label {
  margin-bottom: 0;
  text-transform: none;
}

.comment-form .form-submit input[type="submit"] {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 26px;
  transition: all 0.25s ease;
  width: auto;
}

.comment-form .form-submit input[type="submit"]:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}

.comment-notes,
.logged-in-as {
  color: var(--slate);
  font-size: 13.5px;
}

.no-comments {
  color: var(--slate);
  font-size: 14px;
}

/* =============================================================
   07. WIDGETS & SIDEBAR
============================================================= */
.has-sidebar .content-sidebar-wrap {
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.widget {
  margin-bottom: 40px;
}

.widget:last-child {
  margin-bottom: 0;
}

.widget-title,
.widget .wp-block-heading {
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget ul li {
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font-size: 14px;
  padding: 9px 0;
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a:hover {
  color: var(--brass-dark);
}

.widget ul .children,
.widget ul .sub-menu {
  margin-left: 14px;
}

.widget select {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 11px 12px;
  width: 100%;
}

.widget_search .search-form,
.search-form {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
}

.search-form label {
  margin-bottom: 0;
}

.search-form .search-submit {
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--paper);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  transition: all 0.25s ease;
}

.search-form .search-submit:hover {
  background: var(--brass-dark);
  border-color: var(--brass-dark);
}

.wp-calendar-table {
  font-family: var(--font-mono);
  font-size: 12px;
  width: 100%;
}

.wp-block-tag-cloud a,
.tagcloud a {
  border: 1px solid var(--line);
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px !important;
  margin: 0 4px 6px 0;
  padding: 5px 10px;
}

/* =============================================================
   08. FOOTER WIDGET AREA
   Rendered only when the user has actually put widgets in it, so
   the default footer stays exactly as the template designed it.
============================================================= */
.footer-widgets {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 40px;
  margin-bottom: 32px;
}

.footer-widgets .widget-title {
  border-bottom-color: var(--line);
}

@media (max-width: 1040px) {
  .has-sidebar .content-sidebar-wrap { grid-template-columns: 1fr; }
  .footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .footer-widgets { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

/* =============================================================
   09. BLOG / ARCHIVE EXTRAS
============================================================= */
.no-results {
  padding: 80px 0 120px;
  text-align: center;
}

.no-results h2 {
  font-size: 28px;
  margin-bottom: 14px;
}

.no-results p {
  color: var(--slate);
  margin: 0 auto 24px;
  max-width: 460px;
}

.no-results .search-form {
  margin: 0 auto;
  max-width: 420px;
}

.error-404 {
  padding: 100px 0 120px;
  text-align: center;
}

.error-404 .error-code {
  color: var(--brass-dark);
  font-family: var(--font-display);
  font-size: clamp(70px, 14vw, 150px);
  line-height: 1;
  margin-bottom: 12px;
}

.archive-intro {
  padding: 56px 0 0;
}

.archive-intro .archive-description {
  color: var(--slate);
  font-size: 15px;
  margin-top: 12px;
  max-width: 560px;
}

/* =============================================================
   10. BLOCK EDITOR SUPPORT
============================================================= */
.wp-block-button__link {
  background: var(--ink);
  border-radius: 2px;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 15px 26px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}

.wp-block-quote,
.wp-block-pullquote {
  border-left: 3px solid var(--brass);
  color: var(--brass-dark);
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  line-height: 1.4;
  margin: 36px 0;
  padding: 2px 0 2px 24px;
}

.wp-block-separator {
  border: none;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

.wp-block-code {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  padding: 22px 24px;
}

.wp-block-embed iframe,
.wp-block-video video {
  max-width: 100%;
}

.has-ink-color { color: var(--ink); }
.has-paper-color { color: var(--paper); }
.has-brass-color { color: var(--brass); }
.has-brass-dark-color { color: var(--brass-dark); }
.has-slate-color { color: var(--slate); }
.has-ink-background-color { background-color: var(--ink); }
.has-paper-background-color { background-color: var(--paper); }
.has-paper-2-background-color { background-color: var(--paper-2); }
.has-brass-background-color { background-color: var(--brass); }
.has-white-background-color { background-color: var(--white); }

/* Narrow column reused by the post navigation and comments block. */
.post-narrow { max-width: 720px; }
.post-nav-wrap { padding: 8px 0 0; }
.post-pages { color: var(--slate); font-family: var(--font-mono); font-size: 12px; margin-top: 20px; }
.post-readtime { position: relative; padding-left: 16px; }
.post-readtime::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--line); transform: translateY(-50%); }

/* Text logo fallback, used until a logo image is uploaded. */
.logo-text { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.error-404-search { margin-top: 40px; }
.error-404 .search-form { margin: 0 auto; max-width: 420px; }
.emlak-full-width { width: 100%; }

/* Carried over from the static template, where both were inline styles. */
.btn-nav { padding: 11px 20px; }
.btn-submit { justify-self: start; }

/* =============================================================
   12. LISTINGS
   The single listing and the archive reuse the front page's own
   pieces, the plaque, the mono spec strip, the ink panel, so a
   property page belongs to the same site rather than looking bolted on.
============================================================= */

/* --- Cards as links --- */
.listing-card-link { display: block; color: inherit; text-decoration: none; }
.listing-card-link .listing-photo img { transition: transform .5s ease; }
.listing-card-link:hover .listing-photo img { transform: scale(1.04); }
.listing-card-link:hover .listing-price { color: var(--brass-dark); }
.listing-card-link .listing-photo { overflow: hidden; }

/* --- Archive --- */
.listing-archive { padding: 96px 0 110px; }

.listing-filters {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-bottom: 44px;
  padding: 6px 0 14px;
}

/* One taxonomy per row, labelled. Run together on a single line the two sets
   read as one long list and a visitor cannot tell where types end and areas
   begin. */
.listing-filter-group {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 8px 22px;
  padding: 12px 0;
}

.listing-filter-group:first-child { border-top: none; }

.listing-filter-legend {
  color: var(--ink);
  flex: 0 0 66px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.listing-filter-links { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 8px 20px; }

/* While new results are being fetched. */
#emlak-results { transition: opacity .15s ease; }
#emlak-results.is-loading { opacity: .45; pointer-events: none; }

.listing-filter {
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  padding-bottom: 4px;
  position: relative;
  text-transform: uppercase;
}

.listing-filter:hover { color: var(--ink); }

.listing-filter.is-active { color: var(--brass-dark); }
.listing-filter.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
}

.listing-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Single listing hero --- */
.listing-hero { padding: 60px 0 0; }

.listing-hero-grid {
  align-items: center;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  margin-top: 28px;
}

.listing-hero-visual { position: relative; padding-bottom: 44px; }

.listing-hero-photo { overflow: hidden; }
.listing-hero-photo img { display: block; width: 100%; height: auto; }

/*
 * The plaque overlaps the photo as it does on the front page, but it sits in
 * the left column here rather than the right, so its offset is bounded by the
 * container's own 32px padding. Any further and it hangs past the viewport
 * edge below 1180px, which shows up as a horizontal scrollbar.
 */
.listing-hero-visual .plaque { bottom: -36px; left: -32px; }

.listing-hero-copy .listing-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin: 10px 0 18px;
}

.listing-deck { color: var(--slate); font-size: 17px; line-height: 1.7; margin-bottom: 22px; }

.listing-areas { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 28px; }

.listing-areas a {
  border: 1px solid var(--line);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 5px 12px;
  text-transform: uppercase;
}

.listing-areas a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* --- Single listing body --- */
.listing-detail { padding: 96px 0 20px; }

.listing-detail-grid {
  display: grid;
  gap: 64px;
  /* The sidebar may shrink below 340px rather than overflow the row. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
}

.listing-subhead {
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 22px;
  padding-bottom: 12px;
}

.listing-gallery {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.listing-gallery-item { display: block; overflow: hidden; }
.listing-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.listing-gallery-item:hover img { transform: scale(1.05); }

/* --- Facts table --- */
.listing-facts dl {
  display: grid;
  gap: 0 18px;
  /* The label needs a floor. Left as a bare fraction it collapsed to a couple
     of words per line while a long value pushed across it. */
  grid-template-columns: minmax(9.5em, auto) minmax(0, 1fr);
  margin: 0;
}

.listing-facts dt,
.listing-facts dd {
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  margin: 0;
  padding: 11px 0;
}

.listing-facts dt {
  color: var(--slate);
  hyphens: auto;
  overflow-wrap: break-word;
}

.listing-facts dd {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  /* A long unbroken value wraps instead of widening the whole table. */
  overflow-wrap: anywhere;
}

/* --- Sticky enquiry card --- */
/* The CTA, the share row and the tools travel together. Making only the CTA
   sticky left it pinned while the rows beneath it scrolled up and through it,
   which is what put the share icons across the phone number. */
.listing-side-sticky {
  margin-top: 32px;
  position: sticky;
  top: 96px;
}

.listing-cta {
  background: var(--ink);
  border-left: 3px solid var(--brass);
  color: var(--paper);
  padding: 28px 26px;
}

.listing-cta-eyebrow {
  color: var(--brass);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.listing-cta-price {
  font-family: var(--font-display);
  font-size: 30px;
  margin: 8px 0 12px;
}

.listing-cta p { color: #B9C0CE; font-size: 14px; line-height: 1.65; margin-bottom: 20px; }

.listing-cta .btn-primary { background: var(--brass); border-color: var(--brass); color: var(--ink); width: 100%; justify-content: center; }
.listing-cta .btn-primary:hover { background: var(--paper); border-color: var(--paper); }

.listing-cta-phone {
  color: #D8DCE4;
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-top: 16px;
  text-align: center;
}

.listing-cta-phone:hover { color: var(--brass); }

/* --- Related row --- */
.listing-related { border-top: 1px solid var(--line); margin-top: 80px; padding: 90px 0 100px; }

/* --- The hero plaque as a link to its listing --- */
.plaque-link { display: block; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.plaque-link:hover { transform: translateY(-3px); box-shadow: 0 30px 56px rgba(20, 33, 61, .34); }
.plaque-link:hover .plaque-addr { color: var(--brass); }

/* --- Features list --- */
.listing-features {
  display: grid;
  gap: 10px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.listing-features li {
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 14.5px;
  padding: 9px 0 9px 22px;
  position: relative;
}

.listing-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass);
  transform: rotate(-45deg);
}

/* --- Map link --- */
.listing-map-link {
  border: 1px solid var(--line);
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  margin-top: 22px;
  padding: 13px 0;
  text-align: center;
  text-transform: uppercase;
}

.listing-map-link:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.listing-facts + .listing-facts { margin-top: 34px; }

/* =============================================================
   13. TESTIMONIAL SLIDER
   The original single quote kept its exact type and spacing; the
   track, dots and arrows are added around it.
============================================================= */
.testimonial-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.testimonial-track::-webkit-scrollbar { display: none; }

.testimonial-slide {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
}

.testimonial-slide blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 28px;
}

.testimonial-slide figcaption { margin: 0; }

.testimonial-slide cite {
  color: #B9C0CE;
  font-family: var(--font-mono);
  font-size: 12px;
  font-style: normal;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --- Controls --- */
.testimonial-nav {
  align-items: center;
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-top: 40px;
}

.testimonial-arrow {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  color: var(--paper);
  cursor: pointer;
  display: flex;
  height: 42px;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  width: 42px;
}

.testimonial-arrow:hover {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.testimonial-dots { display: flex; gap: 9px; }

.testimonial-dot {
  background: rgba(255, 255, 255, .3);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 8px;
  padding: 0;
  transition: background .2s ease, transform .2s ease;
  width: 8px;
}

.testimonial-dot:hover { background: rgba(255, 255, 255, .6); }

.testimonial-dot.is-active { background: var(--brass); transform: scale(1.35); }

/* A lone review needs no machinery around it. */
.testimonial.is-single .testimonial-track { overflow: visible; }

/* =============================================================
   14. BOOKING DIALOG
============================================================= */
.emlak-modal { position: fixed; inset: 0; z-index: 900; }
.emlak-modal[hidden] { display: none; }
body.emlak-modal-open { overflow: hidden; }

.emlak-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 33, 61, .72);
  animation: emlak-fade .22s ease;
}

.emlak-modal-panel {
  background: var(--paper);
  border-top: 3px solid var(--brass);
  box-shadow: 0 40px 80px rgba(20, 33, 61, .35);
  left: 50%;
  max-height: 92vh;
  /* Wide enough that the whole form is visible on opening. A dialog that
     arrives already scrolled tells the visitor there is more work here than
     there is, and that is the moment most of them close it. */
  max-width: 780px;
  overflow-y: auto;
  padding: 32px 40px 30px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  animation: emlak-rise .26s ease;
}

@keyframes emlak-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes emlak-rise {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .emlak-modal-backdrop,
  .emlak-modal-panel { animation: none; }
}

.emlak-modal-close {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  height: 34px;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emlak-modal-close:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.emlak-modal-head { margin-bottom: 20px; max-width: 62ch; }
.emlak-modal-head h2 { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 6px 0 8px; }
.emlak-modal-head p { color: var(--slate); font-size: 14px; line-height: 1.55; margin: 0; }

.emlak-modal-form > div { margin-bottom: 14px; }

/* Three across on a wide dialog: name, phone, email on one line, then date
   and time on the next, which is what keeps it above the fold. */
.emlak-modal-form .form-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emlak-modal-form .form-row-3 > div { margin-bottom: 0; }
.emlak-modal-form label { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; margin-bottom: 6px; text-transform: uppercase; color: var(--slate); }

.emlak-modal-form input,
.emlak-modal-form select,
.emlak-modal-form textarea {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
}

.emlak-modal-form textarea { min-height: 74px; resize: vertical; }

.emlak-modal-form .form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/*
 * An author's display rule beats the browser's own [hidden] styling, so a row
 * declared display:grid stays on screen no matter what the attribute says.
 * Anything the theme hides this way needs the rule restated, or the hiding
 * silently does nothing.
 */
[hidden] { display: none !important; }
.emlak-modal-form .form-row > div { margin-bottom: 0; }
.emlak-modal-form .btn { margin-top: 4px; width: 100%; justify-content: center; }
.emlak-modal-note { color: var(--slate); font-size: 12.5px; margin: 10px 0 0; text-align: center; }

@media (max-width: 560px) {
  .emlak-modal-panel { padding: 34px 24px 28px; }
  .emlak-modal-form .form-row { grid-template-columns: 1fr; }
}

/* =============================================================
   15. COMMENT EDGE CASES & ATTACHMENTS
   The Theme Unit Test data contains an author's own comment, a
   pingback and a trackback. All three need a visible treatment,
   and .bypostauthor is a class the review tooling checks for.
============================================================= */
.comment-list .bypostauthor > .comment-body {
  border-left: 2px solid var(--brass);
  padding-left: 18px;
}

.comment-list .bypostauthor > .comment-body .comment-author .fn {
  color: var(--brass-dark);
  font-weight: 600;
}

.comment-list .pingback,
.comment-list .trackback {
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font-size: 14px;
  padding: 14px 0;
}

.comment-list .pingback .comment-body,
.comment-list .trackback .comment-body { padding: 0; }

.comment-list .pingback .edit-link,
.comment-list .trackback .edit-link { margin-left: 8px; }

/* --- Attachment pages --- */
.attachment-media { padding: 12px 0 0; }
.attachment-figure { margin: 0; text-align: center; }
.attachment-figure img { display: block; height: auto; margin: 0 auto; max-width: 100%; }
.attachment-figure figcaption { margin-top: 14px; }
.attachment-file { padding: 40px 0; text-align: center; }

/* =============================================================
   16. LIGHTBOX
============================================================= */
.emlak-lightbox { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; }
.emlak-lightbox[hidden] { display: none; }
body.emlak-lightbox-open { overflow: hidden; }

.emlak-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 33, 61, .93);
  animation: emlak-fade .2s ease;
}

.emlak-lightbox-stage {
  margin: 0;
  max-width: min(1100px, calc(100% - 160px));
  position: relative;
  text-align: center;
  z-index: 1;
}

.emlak-lightbox-stage img {
  display: block;
  margin: 0 auto;
  max-height: 82vh;
  max-width: 100%;
  animation: emlak-fade .25s ease;
}

.emlak-lightbox-stage figcaption {
  color: #D8DCE4;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 14px;
}

.emlak-lightbox-close,
.emlak-lightbox-arrow {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  position: absolute;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  width: 48px;
  z-index: 2;
}

.emlak-lightbox-close:hover,
.emlak-lightbox-arrow:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.emlak-lightbox-close { right: 28px; top: 28px; }
.emlak-lightbox-arrow.is-prev { left: 28px; top: 50%; transform: translateY(-50%); }
.emlak-lightbox-arrow.is-next { right: 28px; top: 50%; transform: translateY(-50%); }

/* One photo needs no way to reach a second. */
.emlak-lightbox.is-single .emlak-lightbox-arrow,
.emlak-lightbox.is-single .emlak-lightbox-count { display: none; }

.emlak-lightbox-count {
  bottom: 26px;
  color: #B9C0CE;
  font-family: var(--font-mono);
  font-size: 12px;
  left: 50%;
  letter-spacing: .08em;
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .emlak-lightbox-backdrop,
  .emlak-lightbox-stage img { animation: none; }
}

/* A second and third row need less air between them than the first needs
   after the property itself. */
.listing-related + .listing-related { border-top: none; margin-top: 0; padding-top: 10px; }
.listing-related.is-featured { background: var(--paper-2); }

/* The two fact tables that moved into the main column sit side by side there,
   where the width allows it, rather than stacking into another tall strip. */
.listing-tables {
  display: grid;
  gap: 20px 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 44px;
}

.listing-tables .listing-facts + .listing-facts { margin-top: 0; }

/* A gallery of two or three photos should not render as postage stamps in a
   three-up grid; it fills the width it has. */
.listing-gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.listing-gallery-item img { aspect-ratio: 4 / 3; }

/* Without this the sidebar's height sets the row and the main column is left
   with a tall blank area beneath it. */
.listing-detail-grid { align-items: start; }
.listing-detail { padding-bottom: 0; }
.listing-related { margin-top: 64px; }

/* --- Gallery: two photos and a tile for the rest --- */
.listing-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listing-gallery-item.is-hidden { display: none; }

.listing-gallery-more {
  align-items: center;
  aspect-ratio: 4 / 3;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 16px;
  transition: background .2s ease, border-color .2s ease;
  width: 100%;
}

.listing-gallery-more:hover { background: var(--white); border-color: var(--brass); }

.listing-gallery-more-icon {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  height: 42px;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  width: 42px;
}

.listing-gallery-more:hover .listing-gallery-more-icon {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--ink);
}

.listing-gallery-more-text { font-size: 14px; text-align: center; }

/* One or two photos need no third tile, so the row closes up instead of
   leaving a gap where the tile would have been. */
.listing-gallery:not(:has(.listing-gallery-more)) {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* --- Share row --- */
.listing-share {
  border: 1px solid var(--line);
  border-top: none;
  padding: 18px 24px 20px;
  text-align: center;
}

.listing-share-label {
  color: var(--slate);
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.listing-share-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.listing-share-link {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--slate);
  cursor: pointer;
  display: flex;
  height: 40px;
  justify-content: center;
  padding: 0;
  position: relative;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  width: 40px;
}

.listing-share-link:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.listing-share-link.is-native:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }

/* Confirmation for a copy, which otherwise gives no sign of having worked. */
.listing-share-link.is-copy.is-done { background: #0F7B3E; border-color: #0F7B3E; color: #fff; }

/* =============================================================
   17. LISTING TOOLS
   Save, compare, recently viewed, estimate, map and print.
============================================================= */

/* --- Save and compare on a card --- */
.listing-card-wrap { position: relative; }

.listing-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  position: absolute;
  right: 12px;
  top: 12px;
  transition: opacity .2s ease;
  z-index: 3;
}

.listing-card-wrap:hover .listing-actions,
.listing-actions:focus-within { opacity: 1; }

/* Touch has no hover, so the buttons are simply always there. */
@media (hover: none) { .listing-actions { opacity: 1; } }

.listing-action {
  align-items: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(20, 33, 61, .12);
  border-radius: 50%;
  color: var(--slate);
  cursor: pointer;
  display: flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
  width: 34px;
}

.listing-action:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.listing-action.is-on { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.listing-action.is-save.is-on svg { fill: currentColor; }

/* On the listing page itself they sit in the sidebar, not over a photo. */
.listing-side-tools {
  align-items: center;
  border: 1px solid var(--line);
  border-top: none;
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 14px 18px;
}

.listing-side-tools .listing-actions { opacity: 1; position: static; }

.listing-print {
  align-items: center;
  background: transparent;
  border: none;
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 11px;
  gap: 7px;
  letter-spacing: .06em;
  padding: 0;
  text-transform: uppercase;
}

.listing-print:hover { color: var(--brass-dark); }

/* --- Monthly estimate --- */
.listing-estimate {
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: block;
  margin: 12px 0 16px;
  padding-top: 12px;
  text-decoration: none;
}

.listing-estimate-figure {
  color: var(--paper);
  display: block;
  font-family: var(--font-mono);
  font-size: 13.5px;
}

.listing-estimate-note { color: #97A0B2; display: block; font-size: 12px; margin-top: 3px; }
.listing-estimate:hover .listing-estimate-figure { color: var(--brass); }

/* --- Map --- */
.listing-map { margin-top: 44px; }
.listing-map-frame { border: 1px solid var(--line); line-height: 0; }
.listing-map-frame iframe { border: 0; display: block; height: 340px; width: 100%; }

/* --- Search form --- */
.listing-search { border-bottom: 1px solid var(--line); margin-bottom: 26px; padding-bottom: 26px; }

.listing-search-row {
  align-items: end;
  display: grid;
  gap: 14px 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.listing-search-field.is-wide { grid-column: span 2; }

.listing-search-field label {
  color: var(--slate);
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.listing-search-field input,
.listing-search-field select {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 11px;
  width: 100%;
}

.listing-search-actions { align-items: center; display: flex; gap: 14px; }
.listing-search-actions .btn { padding: 10px 22px; }
.listing-search-clear { color: var(--slate); font-size: 13px; text-decoration: underline; }

/* --- Tray --- */
.listing-tray {
  background: var(--ink);
  bottom: 0;
  color: var(--paper);
  left: 0;
  position: fixed;
  right: 0;
  z-index: 880;
}

.listing-tray[hidden] { display: none; }
.listing-tray-inner { align-items: center; display: flex; justify-content: space-between; padding: 12px 32px; }
.listing-tray-counts { display: flex; gap: 10px; }

.listing-tray-btn {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  font-family: var(--font-mono);
  font-size: 11.5px;
  gap: 9px;
  letter-spacing: .06em;
  padding: 9px 16px;
  text-transform: uppercase;
}

.listing-tray-btn:hover:not(:disabled) { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.listing-tray-btn:disabled { cursor: default; opacity: .4; }

.listing-tray-count {
  background: var(--brass);
  color: var(--ink);
  font-weight: 600;
  min-width: 20px;
  padding: 1px 6px;
  text-align: center;
}

.listing-tray-clear {
  background: none;
  border: none;
  color: #97A0B2;
  cursor: pointer;
  font-size: 12.5px;
  text-decoration: underline;
}

.listing-tray-clear:hover { color: var(--paper); }

/* --- Saved and compare panel --- */
.listing-panel .emlak-modal-panel { max-width: 980px; padding: 34px 36px 32px; }
.listing-panel-title { font-family: var(--font-display); font-size: 26px; font-weight: 500; margin: 0 0 22px; }
.listing-panel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.listing-panel-grid .listing-photo img { height: 130px; object-fit: cover; width: 100%; }

.listing-panel-remove {
  background: none;
  border: none;
  color: var(--slate);
  cursor: pointer;
  display: block;
  font-size: 12px;
  margin-top: 8px;
  padding: 0;
  text-decoration: underline;
}

.listing-panel-remove:hover { color: #B5462F; }

.listing-compare-scroll { overflow-x: auto; }
.listing-compare { border-collapse: collapse; min-width: 560px; width: 100%; }
.listing-compare th,
.listing-compare td { border-bottom: 1px solid var(--line); font-size: 14px; padding: 12px 14px; text-align: left; vertical-align: top; }
.listing-compare thead th,
.listing-compare tr:first-child th { vertical-align: bottom; }
.listing-compare img { display: block; height: 96px; margin-bottom: 8px; object-fit: cover; width: 100%; }
.listing-compare tr:first-child th a { font-family: var(--font-display); font-size: 16px; }
.listing-compare th[scope="row"] { color: var(--slate); font-weight: 400; white-space: nowrap; }
.listing-compare td { font-family: var(--font-mono); font-size: 13px; }

/* =============================================================
   18. PRINT
   A listing printed on paper is a property sheet an agent hands
   over at a viewing, so the page is rebuilt for it rather than
   shrunk: navigation, buttons and anything interactive come out,
   photos and the facts stay, and links show where they lead.
============================================================= */
@media print {
  @page { margin: 14mm; }

  body { background: #fff; color: #000; font-size: 11pt; }

  header,
  .site-footer,
  .listing-tray,
  .listing-actions,
  .listing-side-tools,
  .listing-share,
  .listing-related,
  .listing-recent,
  .emlak-modal,
  .emlak-lightbox,
  .listing-search,
  .listing-filters,
  .skip-link,
  .listing-gallery-more,
  .listing-map-link,
  .post-nav-wrap,
  .comments-area,
  .widget-area { display: none !important; }

  .wrap { max-width: none; padding: 0; width: 100%; }

  /* Reveal is a scroll animation; on paper nothing scrolls, so every
     unrevealed element would otherwise print blank. */
  .reveal,
  .reveal.in { opacity: 1 !important; transform: none !important; }

  .listing-hero { padding: 0; }
  .listing-hero-grid { display: block; }
  .listing-hero-photo img { max-height: 90mm; object-fit: cover; width: 100%; }

  .plaque {
    background: none !important;
    border-left: 2pt solid #000;
    box-shadow: none !important;
    color: #000 !important;
    margin-top: 8mm;
    position: static !important;
    width: auto !important;
  }

  .plaque-price { background: none !important; color: #000 !important; position: static !important; }
  .plaque-top span,
  .plaque-specs span,
  .plaque-addr { color: #000 !important; }

  .listing-title { font-size: 20pt; margin: 4mm 0 2mm; }
  .listing-detail { padding: 6mm 0 0; }
  .listing-detail-grid { display: block; }

  .listing-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10mm; }

  .listing-facts dt,
  .listing-facts dd { padding: 1.5mm 0; }

  .listing-gallery { grid-template-columns: repeat(3, 1fr); page-break-inside: avoid; }
  .listing-gallery-item.is-hidden { display: block; }
  .listing-gallery-item img { height: 32mm; object-fit: cover; }

  .listing-cta {
    background: none !important;
    border: 1pt solid #000;
    color: #000 !important;
    page-break-inside: avoid;
  }

  .listing-cta p,
  .listing-cta-eyebrow,
  .listing-cta-price,
  .listing-cta-phone,
  .listing-estimate-figure,
  .listing-estimate-note { color: #000 !important; }

  .listing-cta .btn { display: none; }

  .listing-subhead { page-break-after: avoid; }

  /* A printed page cannot be clicked, so any link worth following prints its
     address. */
  .entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* --- Listing rows that scroll --- */
.listing-row-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.listing-row-track::-webkit-scrollbar { display: none; }

.listing-row-slide {
  flex: 0 0 calc((100% - 56px) / 3);
  scroll-snap-align: start;
}

.listings-head {
  align-items: flex-end;
  display: flex;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 40px;
}

.listings-head .section-head { flex: 1 1 auto; margin-bottom: 0; }
.listings-head .listing-toolbar { flex: 0 0 auto; margin-bottom: 0; }

/* The row scrolls under a finger natively; this makes the browser commit to a
   horizontal gesture instead of hesitating between scrolling the row and
   scrolling the page. */
.listing-row-track { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.listing-row-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.listing-row-track.dragging .listing-row-slide { pointer-events: none; }

/* =============================================================
   19. OVERLAP GUARDS
   Two rules that between them prevent nearly every text collision
   a real site runs into, whatever the owner types into a field.
============================================================= */

/*
 * Grid and flex children default to min-width:auto, which means a single long
 * word, a pasted URL or an address with no spaces can force its track wider
 * than the share it was given and push it across the column beside it. A floor
 * of zero lets the track shrink and the text wrap instead.
 */
.wrap > *,
.section-head > *,
.listing-facts dl > *,
.listing-detail-grid > *,
.listing-hero-grid > *,
.blog-layout > *,
.footer-widgets > *,
.listing-tables > * { min-width: 0; }

/*
 * And the wrapping itself. Without this the word does not break, it simply
 * overflows whatever holds it.
 */
p,
li,
dd,
dt,
h1, h2, h3, h4, h5, h6,
.listing-addr,
.listing-price,
.plaque-addr,
.entry-content,
.listing-panel-body { overflow-wrap: break-word; }

/* A sticky block taller than the window would pin its top and leave the print
   button permanently below the fold. Scrolling past it is allowed instead. */
.listing-side-sticky { max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: thin; }

@media (max-height: 760px) {
  .listing-side-sticky { position: static; max-height: none; overflow: visible; }
}

.no-results .btn { margin-top: 18px; }