/*
Theme Name: Celestate Properties
Theme URI: https://celestateproperties.com
Description: Astra child theme for Celestate Properties. Carries the site design: colours, typography, buttons, forms and spacing.
Author: Celestate Properties
Template: astra
Version: 1.0.0
Text Domain: celestate
*/

/* =========================================================
   1. DESIGN TOKENS
   Change a value here and it updates across the whole site.
   ========================================================= */

:root {
  --cp-ink:         #1C2421;
  --cp-body:        #3B4341;
  --cp-muted:       #5E6461;
  --cp-ground:      #F7F3EC;
  --cp-surface:     #FFFFFF;
  --cp-line:        #E2D9CB;
  --cp-line-soft:   #EEE8DD;

  --cp-accent:      #1E4F66;
  --cp-accent-dark: #163C4F;

  --cp-sand:        #EDE4D6;
  --cp-sand-line:   #DCCDB5;
  --cp-sand-deep:   #F3ECE0;
  --cp-sand-text:   #6B5638;

  --cp-chip-bg:     #EAF1F4;
  --cp-chip-line:   #C5D6DE;
  --cp-chip-text:   #1A4358;

  --cp-alert:       #8C3A2B;

  /* Palette A 'Aegean and limestone' (2026-09-23): prices only. */
  --cp-terra:       #A94E2B;

  --cp-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cp-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cp-radius:      4px;
  --cp-radius-card: 4px;
  --cp-control-h:   48px;
}

/* =========================================================
   2. TYPOGRAPHY
   ========================================================= */

body,
.ast-container,
button, input, select, textarea,
.elementor-widget-text-editor {
  font-family: var(--cp-font-body);
}

body {
  background-color: var(--cp-ground);
  color: var(--cp-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.elementor-heading-title,
.ast-archive-title {
  font-family: var(--cp-font-display);
  color: var(--cp-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .entry-title { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.015em; }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; }
h4 { font-size: 18px; line-height: 1.35; }

p { margin: 0 0 1.1em; }

.site-title,
.site-title a {
  font-family: var(--cp-font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cp-ink);
}

.site-description {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cp-muted);
}

/* Small uppercase labels, as used on the demo cards */
.cp-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cp-muted);
}

::selection { background: var(--cp-chip-bg); color: var(--cp-ink); }

/* =========================================================
   3. LINKS
   ========================================================= */

a { color: var(--cp-accent); text-decoration: none; }
a:hover, a:focus { color: var(--cp-accent-dark); text-decoration: underline; }

.main-header-menu a,
.ast-header-break-point .main-navigation a {
  color: var(--cp-ink);
  font-weight: 500;
  text-decoration: none;
}
.main-header-menu a:hover { color: var(--cp-accent); }

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

/* =========================================================
   4. BUTTONS
   ========================================================= */

.ast-button,
.wp-block-button__link,
.elementor-button,
input[type="submit"],
button[type="submit"],
.wpforms-submit {
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  min-height: var(--cp-control-h);
  padding: 15px 26px;
  border: 0;
  border-radius: var(--cp-radius);
  background-color: var(--cp-accent);
  color: var(--cp-surface);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease;
}

.ast-button:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpforms-submit:hover {
  background-color: var(--cp-accent-dark);
  color: var(--cp-surface);
  text-decoration: none;
}

/* Secondary: outlined */
.cp-btn-secondary,
.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--cp-ink);
  border: 1px solid var(--cp-sand-line);
}
.cp-btn-secondary:hover,
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--cp-surface);
  border-color: var(--cp-ink);
  color: var(--cp-ink);
}

/* Dark: used for the main commitment action, e.g. Request a viewing */
.cp-btn-dark {
  background-color: var(--cp-ink);
  color: var(--cp-surface);
}
.cp-btn-dark:hover { background-color: #121816; color: var(--cp-surface); }

/* Every tap target stays finger-sized on phones */
.ast-button, .elementor-button, button, input[type="submit"],
.wp-block-button__link, .cp-icon-btn {
  min-height: 44px;
}

/* =========================================================
   5. FORMS
   ========================================================= */

input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="number"], input[type="search"],
input[type="password"], input[type="date"],
select, textarea,
.wpforms-field input, .wpforms-field select, .wpforms-field textarea {
  font-family: var(--cp-font-body);
  font-size: 15px;
  color: var(--cp-ink);
  background-color: var(--cp-surface);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
  min-height: var(--cp-control-h);
  padding: 0 12px;
  box-shadow: none;
  transition: border-color .15s ease;
}

textarea, .wpforms-field textarea { padding: 12px; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12);
}

input::placeholder, textarea::placeholder { color: #9AA29E; }

label, .wpforms-field-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cp-muted);
}

input[type="checkbox"], input[type="radio"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--cp-accent);
}

/* =========================================================
   6. SURFACES, CARDS AND CHIPS
   Shared pieces the property pages will reuse in Phase 2.
   ========================================================= */

.cp-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  overflow: hidden;
}

.cp-panel-warm {
  background: var(--cp-sand-deep);
  border: 1px solid var(--cp-sand-line);
  border-radius: var(--cp-radius-card);
  color: var(--cp-sand-text);
}

.cp-photo-placeholder {
  background: var(--cp-sand);
  border: 1px solid var(--cp-sand-line);
  color: var(--cp-muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Energy class / status chip */
.cp-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--cp-chip-bg);
  border: 1px solid var(--cp-chip-line);
  color: var(--cp-chip-text);
}

.cp-chip--land {
  background: var(--cp-sand-deep);
  border-color: var(--cp-sand-line);
  color: var(--cp-sand-text);
}

/* Status badge: For sale / Reserved */
.cp-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--cp-ink);
  color: var(--cp-surface);
}
.cp-badge--reserved { background: var(--cp-alert); }

/* Price, in the display face */
.cp-price {
  font-family: var(--cp-font-display);
  font-weight: 600;
  color: var(--cp-terra);
}

.cp-meta { font-size: 14px; color: var(--cp-muted); }

hr, .cp-divider { border: 0; border-top: 1px solid var(--cp-line-soft); margin: 24px 0; }

/* =========================================================
   7. HEADER AND FOOTER
   ========================================================= */

.site-header,
.ast-primary-header-bar {
  background-color: var(--cp-ground);
  border-bottom: 1px solid var(--cp-line);
}

.site-footer,
.ast-small-footer {
  background-color: var(--cp-surface);
  border-top: 1px solid var(--cp-line);
  color: var(--cp-muted);
  font-size: 14px;
}

/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 921px) {
  :root { --cp-gutter: 24px; }
  h1, .entry-title { font-size: clamp(28px, 7vw, 36px); }
}

@media (max-width: 544px) {
  :root { --cp-gutter: 16px; }
  body { font-size: 15px; }
}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   9. ESTATIK — LISTING CARDS
   Class names taken from Estatik 4.3.5's own markup.
   ========================================================= */

.es-properties__list { gap: 28px; }

.es-listing {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  overflow: hidden;
  box-shadow: none;
  transition: border-color .15s ease;
}
.es-listing:hover { border-color: var(--cp-sand-line); }

.es-listing__image { background: var(--cp-sand); }

.es-listing__content,
.es-listing__content__inner { padding: 22px; }

.es-listing__title,
.es-listing__title a {
  font-family: var(--cp-font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--cp-ink);
  text-decoration: none;
}
.es-listing__title a:hover { color: var(--cp-accent); text-decoration: none; }

.es-price {
  font-family: var(--cp-font-display);
  font-size: 25px;
  font-weight: 600;
  color: var(--cp-terra);
  line-height: 1.1;
}

.es-address {
  font-size: 14px;
  color: var(--cp-muted);
  font-style: normal;
}

.es-listing__meta {
  font-size: 14px;
  color: var(--cp-body);
  gap: 18px;
}

.es-listing__footer {
  border-top: 1px solid var(--cp-line-soft);
  padding-top: 14px;
  margin-top: 14px;
}

.es-excerpt { font-size: 15px; line-height: 1.6; color: var(--cp-body); }

/* Status badges: For sale / Reserved / Sold */
.es-badge {
  font-family: var(--cp-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 2px;
  background: var(--cp-ink);
  color: var(--cp-surface);
  border: 0;
}
.es-badges--rounded .es-badge { border-radius: 2px; }

.es-listing__terms .es-badge,
.es-single__header-terms .es-badge {
  background: var(--cp-chip-bg);
  border: 1px solid var(--cp-chip-line);
  color: var(--cp-chip-text);
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 12px;
}

/* =========================================================
   10. ESTATIK — SINGLE PROPERTY
   ========================================================= */

.es-single__header { padding-bottom: 20px; border-bottom: 1px solid var(--cp-line); }

.es-single__header .es-price {
  font-size: clamp(30px, 3.4vw, 42px);
}

.es-property-section {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  padding: 28px;
  margin-bottom: 24px;
}

.es-property-section__title {
  font-family: var(--cp-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 18px;
}

.es-property-section__content { font-size: 16px; line-height: 1.7; }

/* Fact rows inside a section read as a clean two-column list */
.es-property-section__content ul,
.es-property-section__content .es-list { list-style: none; margin: 0; padding: 0; }

.es-property-section__content li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--cp-line-soft);
  font-size: 15px;
}
.es-property-section__content li:last-child { border-bottom: 0; }

.es-gallery, .es-gallery__image { border-radius: var(--cp-radius-card); background: var(--cp-sand); }

/* Energy certificate scale (ΠΕΑ) — Estatik ships this, we just tone it */
.es-epc-ges-light__item {
  border-radius: 2px;
  font-family: var(--cp-font-body);
  font-weight: 500;
}
.es-epc-ges-light__item--active { outline: 2px solid var(--cp-ink); outline-offset: 1px; }

/* =========================================================
   11. ESTATIK — BUTTONS, CONTROLS, FORMS
   ========================================================= */

.es-btn {
  font-family: var(--cp-font-body);
  font-weight: 500;
  border-radius: var(--cp-radius);
  min-height: 44px;
}

.es-btn--primary { background: var(--cp-accent); color: var(--cp-surface); border-color: var(--cp-accent); }
.es-btn--primary:hover { background: var(--cp-accent-dark); border-color: var(--cp-accent-dark); color: var(--cp-surface); }

.es-btn--default,
.es-btn--gray {
  background: var(--cp-surface);
  color: var(--cp-ink);
  border: 1px solid #D6CCBC;
}
.es-btn--default:hover,
.es-btn--gray:hover { border-color: var(--cp-ink); background: var(--cp-surface); }

.es-control__item--wishlist .es-btn,
.es-control__item--sharing .es-btn {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  color: var(--cp-body);
  width: 44px;
  height: 44px;
}

.es-field__input,
.es-form input, .es-form select, .es-form textarea {
  font-family: var(--cp-font-body);
  font-size: 15px;
  min-height: var(--cp-control-h);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
  color: var(--cp-ink);
  background: var(--cp-surface);
}
.es-field__input:focus {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12);
  outline: none;
}

.es-listings-filter { border-bottom: 1px solid var(--cp-line); padding-bottom: 18px; }
.es-total { font-size: 16px; font-weight: 600; color: var(--cp-ink); }

/* The new Land & Buildability section gets the warm panel treatment,
   so a plot page reads differently from a flat. */
.es-property-section[class*="land-buildability"],
#land-buildability {
  background: var(--cp-chip-bg);
  border-color: var(--cp-chip-line);
}

/* =========================================================
   12. HEADER
   Logo left, navigation and contact actions right.
   ========================================================= */

.ast-primary-header-bar,
.site-header {
  background-color: var(--cp-ground);
  border-bottom: 1px solid var(--cp-line);
}

.ast-primary-header-bar .site-primary-header-wrap,
.ast-primary-header-bar .ast-container {
  min-height: 88px;
}

.site-logo-img img,
.custom-logo-link img { max-height: 52px; width: auto; }

/* Navigation */
.main-header-menu > .menu-item > .menu-link {
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cp-ink);
  letter-spacing: 0;
  text-transform: none;
  padding-inline: 14px;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link {
  color: var(--cp-accent);
}

/* Dropdown */
.main-header-menu .sub-menu {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  box-shadow: 0 8px 28px rgba(28, 36, 33, .08);
  padding: 8px 0;
  min-width: 220px;
}
.main-header-menu .sub-menu .menu-link {
  font-size: 14.5px;
  color: var(--cp-body);
  padding: 11px 18px;
  border: 0;
}
.main-header-menu .sub-menu .menu-link:hover {
  background: var(--cp-chip-bg);
  color: var(--cp-accent-dark);
}

/* Phone + WhatsApp block */
.cp-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.cp-header-phone {
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cp-ink);
  text-decoration: none;
}
.cp-header-phone:hover { color: var(--cp-accent); text-decoration: none; }

.cp-header-wa {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 0 20px;
  background: var(--cp-accent);
  color: var(--cp-surface);
  border-radius: var(--cp-radius);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.cp-header-wa:hover { background: var(--cp-accent-dark); color: var(--cp-surface); text-decoration: none; }

/* The number spells itself out on wide screens; on narrow ones it becomes a
   tap-to-call button, because that is the whole point of a phone. */
/* "Call" box at every width (Dimi, 2026-09-24). The number lives in aria-label. */

@media all {
  .cp-header-phone .cp-hp-full { display: none; }
  .cp-header-phone .cp-hp-short { display: inline; }
  .cp-header-phone {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 18px;
    border: 1px solid var(--cp-accent);
    border-radius: var(--cp-radius);
    color: var(--cp-accent);
    font-size: 14px;
  }
}
@media (max-width: 921px) {
  .cp-header-actions { gap: 8px; }
  .cp-header-phone { height: 44px; padding: 0 14px; }
  .cp-header-wa { height: 44px; padding: 0 14px; }
}
@media (max-width: 480px) {
  .cp-header-actions { gap: 6px; }
  .cp-header-phone,
  .cp-header-wa { height: 42px; padding: 0 12px; font-size: 13px; }
}

/* Once Call and WhatsApp sit in the mobile bar there is no room left for the
   wordmark beside them - it wrapped to five lines. The mark carries the brand
   at this width; the name is in the page title and the footer. */
@media (max-width: 700px) {
  .ast-header-break-point .site-title { display: none; }
  .ast-header-break-point .ast-site-identity { padding-right: 0; }
}

/* ---- Header corrections -------------------------------------------------
   Astra injects its own colour and spacing for header HTML sections and the
   primary bar, with higher specificity than the rules above. These win it back.
   -------------------------------------------------------------------------- */

.ast-primary-header-bar .ast-builder-html-element .cp-header-phone,
.site-header .cp-header-actions .cp-header-phone {
  color: var(--cp-ink) !important;
  font-size: 15px !important;
  font-weight: 500;
  text-decoration: none;
}
.ast-primary-header-bar .ast-builder-html-element .cp-header-phone:hover,
.site-header .cp-header-actions .cp-header-phone:hover {
  color: var(--cp-accent) !important;
}

/* The phone link is always a "Call" button, so it takes the accent colour and
   the smaller size back off the two rules above. */
@media all {
  .ast-primary-header-bar .ast-builder-html-element .cp-header-phone,
  .site-header .cp-header-actions .cp-header-phone {
    color: var(--cp-accent) !important;
    font-size: 14px !important;
  }
}
@media (max-width: 480px) {
  .ast-primary-header-bar .ast-builder-html-element .cp-header-phone,
  .site-header .cp-header-actions .cp-header-phone,
  .ast-primary-header-bar .ast-builder-html-element .cp-header-wa,
  .site-header .cp-header-actions .cp-header-wa {
    font-size: 13px !important;
  }
}

.ast-primary-header-bar .ast-builder-html-element .cp-header-wa,
.site-header .cp-header-actions .cp-header-wa {
  color: #FFFFFF !important;
  background: var(--cp-accent);
  text-decoration: none;
}
.ast-primary-header-bar .ast-builder-html-element .cp-header-wa:hover {
  background: var(--cp-accent-dark);
  color: #FFFFFF !important;
}

/* Header row: roomy enough to read comfortably */
.ast-primary-header-bar.ast-primary-header.main-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
  min-height: 110px;
}

/* Astra adds generous margins to header HTML blocks; we place our own. */
.ast-primary-header-bar .ast-builder-html-element { margin: 0; }
.ast-primary-header-bar .ast-builder-html-element p:last-child { margin-bottom: 0; }

/* ---- Menu and submenu: sized for comfortable reading --------------------- */

.ast-primary-header-bar .main-header-menu > .menu-item > .menu-link {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

/* Dropdown: bigger type, more room, clearer separation */
.ast-primary-header-bar .main-header-menu .sub-menu {
  min-width: 268px;
  padding: 10px 0;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  box-shadow: 0 10px 30px rgba(28, 36, 33, .10);
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-link {
  font-size: 16px;
  line-height: 1.45;
  padding: 14px 24px;
  color: var(--cp-body);
}

.ast-primary-header-bar .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-primary-header-bar .main-header-menu .sub-menu .menu-link:hover {
  background: var(--cp-chip-bg);
  color: var(--cp-accent-dark);
}

/* The dropdown arrow needs a little breathing room from the label */
.ast-primary-header-bar .main-header-menu .ast-icon { margin-left: 6px; }

@media (max-width: 921px) {
  .ast-primary-header-bar.ast-primary-header.main-header-bar,
  .ast-primary-header-bar .site-primary-header-wrap { min-height: 76px; }
}

/* =========================================================
   13. FOOTER
   Four columns over a legal bar, as in the demo.
   ========================================================= */

.site-footer,
.site-above-footer-wrap,
.site-primary-footer-wrap {
  background-color: var(--cp-surface);
  color: var(--cp-muted);
}

.site-primary-footer-wrap {
  padding-block: 48px 40px;
  border-top: 1px solid var(--cp-line);
}

.cp-foot-logo {
  font-family: var(--cp-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cp-ink);
}

.cp-foot-sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--cp-muted);
  margin-top: 3px;
}

.cp-foot-address {
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--cp-muted);
}

.cp-foot-col h3 {
  font-family: var(--cp-font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0 0 18px;
}

.cp-foot-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cp-foot-col a {
  font-size: 14px;
  color: var(--cp-accent);
  text-decoration: none;
}
.cp-foot-col a:hover { color: var(--cp-accent-dark); text-decoration: underline; }

/* Legal bar */
.site-below-footer-wrap {
  border-top: 1px solid var(--cp-line);
  background-color: var(--cp-surface);
  min-height: 68px;
  font-size: 13px;
  color: var(--cp-muted);
}
.site-below-footer-wrap .ast-builder-html-element p { margin: 0; }

.cp-foot-legal { display: flex; gap: 22px; justify-content: flex-end; }
.cp-foot-legal a { font-size: 13px; color: var(--cp-muted); text-decoration: none; }
.cp-foot-legal a:hover { color: var(--cp-accent); text-decoration: underline; }

@media (max-width: 921px) {
  .site-primary-footer-wrap { padding-block: 36px 28px; }
  .cp-foot-legal { justify-content: flex-start; margin-top: 12px; }
}

/* =========================================================
   14. CONTACT PAGE
   ========================================================= */

.cp-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.cp-contact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cp-line-soft);
  font-size: 16px;
  color: var(--cp-ink);
}
.cp-contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.cp-contact-list li > span:first-child {
  flex: 0 0 132px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-contact-list a { color: var(--cp-accent); text-decoration: none; word-break: break-word; }
.cp-contact-list a:hover { color: var(--cp-accent-dark); text-decoration: underline; }

/* WPForms on the contact page, matched to the site */
.wpforms-container { margin: 0 !important; }
.wpforms-form .wpforms-field { padding: 0 0 14px !important; }
.wpforms-form .wpforms-field-label {
  font-family: var(--cp-font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cp-muted) !important;
  margin-bottom: 6px !important;
}
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form textarea,
.wpforms-form select {
  width: 100% !important;
  box-sizing: border-box;
  min-height: 48px;
  padding: 0 12px !important;
  font-family: var(--cp-font-body) !important;
  font-size: 15px !important;
  color: var(--cp-ink) !important;
  background: #FFFFFF !important;
  border: 1px solid #D6CCBC !important;
  border-radius: var(--cp-radius) !important;
  box-shadow: none !important;
}
.wpforms-form textarea { min-height: 120px; padding: 12px !important; line-height: 1.6; }
.wpforms-form input:focus, .wpforms-form textarea:focus, .wpforms-form select:focus {
  border-color: var(--cp-accent) !important;
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12) !important;
  outline: none;
}

@media (max-width: 544px) {
  .cp-contact-list li > span:first-child { flex: 0 0 100%; }
}

/* =========================================================
   15. LISTING ARCHIVES — search bar, laid out as the design
   ========================================================= */

.cp-archive__inner {
  width: min(1170px, calc(100% - 48px));
  margin-inline: auto;
}

/* --- title, breadcrumb and the bar sit together on white ---------------- */

.cp-archive__head {
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-line);
  padding: 34px 0 30px;
}

/* With a hero photo the title moves onto a card, so its contrast never depends
   on how bright the sky happens to be at that crop. The filter bar drops out of
   this band into its own, because controls on a photo are hard to use. */
.cp-archive__head--photo {
  background-image:
    linear-gradient(rgba(28, 36, 33, .30), rgba(28, 36, 33, .30)),
    var(--cp-archive-hero);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-bottom: 0;
  padding: 40px 0;

  /* Same band height as the Elementor pages, so the hero never changes size
     from one page to the next. min-height, not height: a longer title grows
     the band rather than being cut off. */
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cp-archive__head--photo .cp-archive__card {
  width: min(720px, 100%);
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: 4px;
  box-shadow: 0 18px 48px -12px rgba(28, 36, 33, .28);
  padding: 30px 34px 28px;
}

.cp-archive__filters {
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-line);
  padding: 24px 0 26px;
}

@media (max-width: 782px) {
  .cp-archive__head--photo { padding: 32px 0; min-height: 440px; }
  .cp-archive__head--photo .cp-archive__card { padding: 22px 20px 20px; }
}

.cp-archive__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
}

.cp-archive__title {
  font-family: var(--cp-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  color: var(--cp-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.cp-crumbs { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--cp-muted); }
.cp-crumbs a { color: var(--cp-muted); text-decoration: none; }
.cp-crumbs a:hover { color: var(--cp-accent); text-decoration: underline; }
.cp-crumbs [aria-current] { color: var(--cp-body); }

.cp-archive__intro {
  max-width: 760px;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--cp-muted);
}
.cp-archive__intro p:last-child { margin-bottom: 0; }

/* --- the search bar ------------------------------------------------------ */

.cp-search { margin-top: 20px; }

.cp-search__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 16px;
  align-items: end;
}

.cp-search__more-row {
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--cp-line-soft);
}
.cp-search__more-row[hidden] { display: none; }

.cp-filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

/* The price range takes the two columns the design gives "from" and "to". */
.cp-filter--range { grid-column: span 2; }

.cp-filter__label {
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--cp-muted);
}

.cp-filter select {
  width: 100%;
  height: 46px;
  padding: 0 10px;
  font-family: var(--cp-font-body);
  font-size: 15px;
  color: var(--cp-ink);
  background: var(--cp-surface);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
}
.cp-filter select:focus {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12);
}

.cp-filter--check { justify-content: flex-end; }
.cp-filter--check label {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  font-size: 15px;
  color: var(--cp-ink);
  cursor: pointer;
}
.cp-filter--check input { width: 17px; height: 17px; accent-color: var(--cp-accent); }

.cp-filter--actions { flex-direction: row; align-items: flex-end; gap: 10px; }

.cp-search__more,
.cp-search__go {
  height: 46px;
  flex: 1 1 0;
  border-radius: var(--cp-radius);
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.cp-search__more {
  padding: 0 14px;
  border: 1px solid #D6CCBC;
  background: var(--cp-surface);
  color: var(--cp-ink);
  font-size: 14px;
}
.cp-search__more:hover { border-color: var(--cp-ink); }
.cp-search__more[aria-expanded="true"] { background: var(--cp-chip-bg); border-color: var(--cp-chip-line); color: var(--cp-chip-text); }

.cp-search__go {
  padding: 0 18px;
  border: 0;
  background: var(--cp-accent);
  color: #FFFFFF;
}
.cp-search__go:hover { background: var(--cp-accent-dark); }

/* --- two-handle range slider -------------------------------------------- */

.cp-range { display: flex; flex-direction: column; gap: 6px; }

.cp-range__out {
  font-size: 15px;
  font-weight: 500;
  color: var(--cp-ink);
  min-height: 20px;
}

.cp-range__track { position: relative; height: 26px; display: flex; align-items: center; }

.cp-range__track::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  border-radius: 2px;
  background: #E2D9CB;
}

.cp-range__fill { position: absolute; height: 4px; border-radius: 2px; background: var(--cp-accent); }

.cp-range input[type="range"] {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 0;
  height: 26px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.cp-range input[type="range"]:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 4px; }

.cp-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cp-surface);
  border: 2px solid var(--cp-accent);
  box-shadow: 0 1px 4px rgba(28, 36, 33, .18);
  cursor: grab;
}
.cp-range input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
.cp-range input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cp-surface);
  border: 2px solid var(--cp-accent);
  box-shadow: 0 1px 4px rgba(28, 36, 33, .18);
  cursor: grab;
}
.cp-range input[type="range"]::-moz-range-track { background: none; }

/* --- results strip ------------------------------------------------------- */

.cp-archive__strip {
  background: var(--cp-ground);
  border-bottom: 1px solid var(--cp-line);
}

.cp-resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  min-height: 72px;
  padding: 12px 0;
}

.cp-resultbar .cp-resultbar__count { margin: 0; font-family: inherit; font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none; color: var(--cp-muted); }
.cp-resultbar__count strong { font-size: 16px; font-weight: 600; color: var(--cp-ink); }
.cp-resultbar__count span { color: var(--cp-muted); }

.cp-resultbar__right { display: flex; align-items: center; gap: 16px; margin-left: auto; }

.cp-resultbar__clear { font-size: 14px; color: var(--cp-muted); text-decoration: underline; white-space: nowrap; }
.cp-resultbar__clear:hover { color: var(--cp-accent); }

.cp-resultbar__sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.cp-resultbar__sort label { font-size: 14px; color: var(--cp-muted); white-space: nowrap; }
.cp-resultbar__sort select {
  height: 44px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--cp-ink);
  background: var(--cp-surface);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
}

/* --- results ------------------------------------------------------------- */

.cp-archive__body { padding: 40px 0 72px; background: var(--cp-ground); }

.cp-archive__empty {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  padding: 48px 40px;
  text-align: center;
}
.cp-archive__empty h2 { font-size: 24px; margin: 0 0 10px; }
.cp-archive__empty p { max-width: 520px; margin: 0 auto 20px; color: var(--cp-body); }
.cp-archive__empty .cp-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  margin: 0 6px;
  border-radius: var(--cp-radius);
  text-decoration: none;
  font-weight: 500;
}
.cp-archive__empty .cp-btn--ghost { border: 1px solid #D6CCBC; color: var(--cp-ink); }
.cp-archive__empty .cp-btn--solid { background: var(--cp-accent); color: #FFFFFF; }

@media (max-width: 921px) {
  .cp-archive__inner { width: calc(100% - 40px); } /* 20px gutter = header + footer (2026-09-24) */
  .cp-search__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-filter--range { grid-column: span 2; }
  .cp-archive__body { padding: 30px 0 56px; }
}

@media (max-width: 544px) {
  .cp-search__grid { grid-template-columns: 1fr; }
  .cp-filter--range { grid-column: span 1; }
  .cp-filter--actions { flex-direction: column; align-items: stretch; }
  .cp-resultbar__right { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* --- Homepage hero search ------------------------------------------------
   Three choices and a button. Everything else waits for the results page.
   -------------------------------------------------------------------------- */

.cp-herosearch { margin: 4px 0 0; }

.cp-herosearch__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.cp-herosearch .cp-filter { gap: 6px; }

.cp-herosearch select {
  width: 100%;
  height: 48px;
  padding: 0 10px;
  font-family: var(--cp-font-body);
  font-size: 15px;
  color: var(--cp-ink);
  background: var(--cp-surface);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
}
.cp-herosearch select:focus {
  border-color: var(--cp-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12);
}

.cp-herosearch .cp-search__go {
  height: 48px;
  padding: 0 28px;
  white-space: nowrap;
}

@media (max-width: 921px) {
  .cp-herosearch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-herosearch .cp-filter--actions { grid-column: span 2; }
  .cp-herosearch .cp-search__go { width: 100%; }
}

/* Phones: two per row (Type | Area, Price | Search) so the whole card fits
   on the first screen instead of four stacked rows. */
@media (max-width: 544px) {
  .cp-herosearch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cp-herosearch .cp-filter--actions { grid-column: span 1; }
}

/* --- Search bar: every cell the same height, so it reads as 4 x 2 ---------
   The price cell holds a label, a readout and a track, which made it taller
   than a plain select and broke the grid into four ragged rows.
   -------------------------------------------------------------------------- */

.cp-search__grid { align-items: start; }

.cp-search .cp-filter { gap: 0; }

.cp-search .cp-filter__label {
  display: block;
  height: 18px;
  line-height: 18px;
  margin-bottom: 8px;
}

.cp-search .cp-filter select { height: 46px; }

/* The range occupies exactly one control's worth of height. */
.cp-search .cp-filter--range .cp-range {
  height: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.cp-search .cp-range__out {
  font-size: 13px;
  line-height: 16px;
  min-height: 16px;
  color: var(--cp-body);
}
.cp-search .cp-range__track { height: 22px; }
.cp-search .cp-range input[type="range"] { height: 22px; }
.cp-search .cp-range input[type="range"]::-webkit-slider-thumb { width: 18px; height: 18px; }
.cp-search .cp-range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }

/* Checkbox and buttons line up with the selects, not with the labels. */
.cp-search .cp-filter--check,
.cp-search .cp-filter--actions { margin-top: 26px; }

.cp-search .cp-filter--check label { height: 46px; }
.cp-search .cp-filter--actions { align-items: stretch; }
.cp-search .cp-search__more,
.cp-search .cp-search__go { height: 46px; }

/* --- Listing grid --------------------------------------------------------
   Estatik lays its cards out with its own rules. Inside our archive we want a
   real three-column grid with even gutters, as the design has it.
   -------------------------------------------------------------------------- */

/* Only .es-listings holds the cards. Making its wrappers grids as well
   nested one grid inside another and squeezed every card to a third of a
   third of the width. */
.cp-archive .es-listings {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

.cp-archive .es-properties__list,
.cp-archive .es-listings__wrap-inner {
  display: block !important;
  width: 100%;
  flex: 1 1 100% !important;
}

.cp-archive .es-listing {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}

.cp-archive .es-listing__content,
.cp-archive .cp-card__body { flex-grow: 1; }

@media (max-width: 1024px) {
  .cp-archive .es-listings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .cp-archive .es-listings {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* --- Price range as a field ---------------------------------------------
   The design puts two boxes here ("from" and "to"). We use one slider, so it
   is drawn inside a box of the same height, with the current range read out
   beside the track. That way it lines up with the selects either side of it.
   -------------------------------------------------------------------------- */

.cp-search .cp-filter--range .cp-range {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  height: 46px;
  padding: 0 14px;
  box-sizing: border-box;
  background: var(--cp-surface);
  border: 1px solid #D6CCBC;
  border-radius: var(--cp-radius);
}

.cp-search .cp-filter--range .cp-range__out {
  flex: 0 0 auto;
  min-width: 96px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--cp-ink);
  white-space: nowrap;
}

.cp-search .cp-filter--range .cp-range__track {
  flex: 1 1 auto;
  height: 22px;
  min-width: 80px;
}

.cp-search .cp-filter--range .cp-range:focus-within {
  border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px rgba(30, 79, 102, .12);
}

/* Estatik sets its own gutters on the card list; the design asks for 32. */
.cp-archive .es-listings.es-listings { gap: 32px; }

@media (max-width: 1024px) {
  .cp-archive .es-listings.es-listings { gap: 24px; }
}
@media (max-width: 680px) {
  .cp-archive .es-listings.es-listings { gap: 20px; }
}

/* --- the photo fades into the page instead of stopping dead -------------
   Home and the listing pages: a soft wash at the foot of the hero, in the
   ground colour. Services / Contact / About use ::after for the title shade
   instead (section 22). Elementor uses ::before for its own overlay. */

.elementor-element-7681009,
.elementor-element-dca5506,
.elementor-element-a64ba95,
.elementor-element-632cc97,
.cp-archive__head--photo {
  position: relative;
}

.elementor-element-7681009::after,
.cp-archive__head--photo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(247, 243, 236, 0) 0%, rgba(247, 243, 236, .72) 62%, #F7F3EC 100%);
  pointer-events: none;
  z-index: 0;
}

/* Keep the card / title above the wash or shade. */
.elementor-element-7681009 > .e-con-inner,
.elementor-element-dca5506 > .e-con-inner,
.elementor-element-a64ba95 > .e-con-inner,
.elementor-element-632cc97 > .e-con-inner,
.cp-archive__head--photo > .cp-archive__inner {
  position: relative;
  z-index: 1;
}

/* Phones: a shorter bottom fade on Home and the listing pages. (Services,
   Contact and About have no fade any more - their ::after is the full-size
   title shade in section 22; listing them here squashed it into a 90px
   dark strip at the top of the photo.) */
@media (max-width: 767px) {
  .elementor-element-7681009::after,
  .cp-archive__head--photo::after { height: 90px; }
}

/* =========================================================
   16. FIRST SCREEN  (Home, Services, Contact, About)
   Header + first screen = exactly one window height, at every size,
   so no title or text is ever cut at the fold.
   - Home: one full-screen photo with the search card.
   - Services, Contact, About: the photo band with the h1 card, then an
     intro tile. The photo takes whatever height the tile leaves.
   min-height, never height: on a very short window the page grows
   instead of cutting content off.
   Header heights are Astra's own, measured: 111 / 80 / 77 px. These are only the fallback:\n   assets/cp-header.js measures the real header and overwrites --cp-head.
   Elementor does not print custom classes on containers, so these are
   addressed by element id (cpfirst1-3, cptile01-03 and cphero* were named
   by us: 1 Services, 2 Contact, 3 About).
   ========================================================= */

:root { --cp-head: 111px; }
@media (max-width: 921px) { :root { --cp-head: 80px; } }
@media (max-width: 544px) { :root { --cp-head: 77px; } }
body.admin-bar { --cp-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --cp-adminbar: 46px; } }

.elementor .elementor-element.elementor-element-7681009,
.elementor .elementor-element.elementor-element-cpfirst1,
.elementor .elementor-element.elementor-element-cpfirst2,
.elementor .elementor-element.elementor-element-cpfirst3 {
  min-height: calc(100vh - var(--cp-head) - var(--cp-adminbar, 0px));
  min-height: calc(100svh - var(--cp-head) - var(--cp-adminbar, 0px));
}

/* The photo band fills whatever height the tile leaves. */
.elementor .elementor-element.elementor-element-dca5506,
.elementor .elementor-element.elementor-element-a64ba95,
.elementor .elementor-element.elementor-element-632cc97 {
  flex: 1 1 auto;
  min-height: 280px;
}

/* The title card hugs the title instead of being a fixed 720px box. */
.elementor .elementor-element.elementor-element-cphero2f2,
.elementor .elementor-element.elementor-element-cpherofcc,
.elementor .elementor-element.elementor-element-cphero019 {
  --width: auto;
  width: auto;
  max-width: 720px;
  min-height: 0;
}

/* The intro tile: one or two lines that say what the page is for.
   A fixed minimum height keeps the h1 on the same pixel on all three pages. */
.elementor .elementor-element.elementor-element-cptile01,
.elementor .elementor-element.elementor-element-cptile02,
.elementor .elementor-element.elementor-element-cptile03 {
  flex: 0 0 auto;
  min-height: 170px;
  border-bottom: 1px solid var(--cp-line);
}

.cp-lead {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--cp-font-body);
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--cp-ink);
  text-align: center;
}

@media (max-width: 767px) {
  .elementor .elementor-element.elementor-element-cptile01,
  .elementor .elementor-element.elementor-element-cptile02,
  .elementor .elementor-element.elementor-element-cptile03 { min-height: 150px; }
}



/* Small laptops (922-1199px): the menu wrapped 'Contact' onto a second line.
   Astra's menu spacing is one desktop value, so only this width range is
   tightened here; wider screens keep Astra's 22px. */
@media (min-width: 922px) and (max-width: 1199px) {
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding-left: 11px; padding-right: 11px; }
  .ast-desktop .ast-builder-menu-1 .main-header-menu { flex-wrap: nowrap; white-space: nowrap; }
}

/* =========================================================
   17. AREA TILES  [cp_areas]
   Drawn from live es_location counts, so an area only ever
   appears when there is something behind the link.
   ========================================================= */

/* The Elementor container it sits in is a flex row, and a shortcode widget is
   a shrink-to-fit item there - without this the grid collapses to one column. */
.elementor-element-cpareas1 { width: 100%; flex: 1 1 100%; }
.elementor-element-cpareas1 .elementor-widget-container,
.elementor-element-cpareas1 .elementor-shortcode { width: 100%; }

.cp-areas {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}

.cp-area {
  display: block;
  padding: 16px 18px;
  background: var(--cp-surface);
  border: 1px solid #E2D9CB;
  border-radius: 3px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.cp-area:hover,
.cp-area:focus {
  border-color: var(--cp-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

.cp-area__name {
  display: block;
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--cp-ink);
}

.cp-area__count {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--cp-muted);
}

/* The towns inside the area, so "Athenian Riviera" still tells you where. */
.cp-area__towns {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--cp-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--cp-muted);
}

@media (max-width: 480px) {
  .cp-areas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cp-area { padding: 14px; }
}


/* 404 - property type links (404.php) */
/* Listing pages and the 404 fill the row even when there are no cards to
   stretch them: an empty search result used to shrink the page. */
.cp-archive { flex: 1 1 100%; width: 100%; min-width: 0; }
.cp-404__types { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cp-404__types a { display: inline-block; padding: 8px 16px; border: 1px solid var(--cp-line); border-radius: 999px; color: var(--cp-ink); text-decoration: none; }
.cp-404__types a:hover, .cp-404__types a:focus-visible { border-color: var(--cp-accent); color: var(--cp-accent); }


/* =========================================================
   18. BUTTONS - one system for the whole site  (2026-09-23)
   Dimi: "make sure the buttons across the website are the same
   layout and design". Two kinds only:
   - primary: Aegean fill, white text
   - secondary: Aegean outline, Aegean text; fills on hover
   Same height, padding, radius, type and hover everywhere: theme
   buttons, the search, the forms (WPForms + Estatik), the header
   WhatsApp, Elementor and Astra buttons. Change buttons HERE only.
   The :is() lists carry the most specific older selectors on purpose,
   so this block outranks every earlier rule without !important.
   WPForms prints its own !important styles, so it gets them back.
   Estatik's fill comes from its main_color option (#1E4F66), which
   matches --cp-accent.
   ========================================================= */

html body :is(
  .cp-btn, .cp-sp a.cp-btn--solid, .cp-sp button.cp-btn--solid, .cp-archive__empty .cp-btn,
  .cp-search__go, .cp-herosearch .cp-search__go, .cp-search .cp-search__go,
  .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa,
  .es-btn--primary, .cp-enquire .es-request-form .es-btn,
  .elementor-button, .ast-button, .entry-content .button, .entry-content input[type="submit"]
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--cp-control-h);
  min-height: var(--cp-control-h);
  padding: 0 24px;
  font-family: var(--cp-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--cp-accent);
  border-radius: var(--cp-radius);
  background: var(--cp-accent);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

html body :is(
  .cp-btn, .cp-sp a.cp-btn--solid, .cp-sp button.cp-btn--solid, .cp-archive__empty .cp-btn,
  .cp-search__go, .cp-herosearch .cp-search__go, .cp-search .cp-search__go,
  .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa,
  .es-btn--primary, .cp-enquire .es-request-form .es-btn,
  .elementor-button, .ast-button, .entry-content .button, .entry-content input[type="submit"]
):is(:hover, :focus-visible) {
  background: var(--cp-accent-dark);
  border-color: var(--cp-accent-dark);
  color: #FFFFFF;
  text-decoration: none;
}

/* Secondary: the outline button. */
html body :is(.cp-btn, .cp-sp a.cp-btn, .cp-archive__empty .cp-btn, .ast-primary-header-bar .ast-builder-html-element .cp-btn).cp-btn--ghost {
  background: transparent;
  border-color: var(--cp-accent);
  color: var(--cp-accent);
}
/* the extra class makes the outline rule outrank the primary one above */
html body :is(.cp-btn, .cp-sp a.cp-btn, .cp-archive__empty .cp-btn, .ast-primary-header-bar .ast-builder-html-element .cp-btn).cp-btn--ghost:is(:hover, :focus-visible) {
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  color: #FFFFFF;
}

/* Keyboard focus: one visible ring on every button. */
html body :is(.cp-btn, .cp-search__go, .cp-header-wa, .es-btn, .elementor-button, .ast-button, .wpforms-form button[type="submit"]):focus-visible {
  outline: 2px solid var(--cp-accent);
  outline-offset: 2px;
}

/* WPForms (Contact, homepage valuation) - its stylesheet uses !important. */
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--cp-control-h) !important;
  min-height: var(--cp-control-h) !important;
  padding: 0 24px !important;
  font-family: var(--cp-font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  border: 1px solid var(--cp-accent) !important;
  border-radius: var(--cp-radius) !important;
  background: var(--cp-accent) !important;
  color: #FFFFFF !important;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.wpforms-form button[type="submit"]:is(:hover, :focus-visible),
.wpforms-form .wpforms-submit:is(:hover, :focus-visible) {
  background: var(--cp-accent-dark) !important;
  border-color: var(--cp-accent-dark) !important;
}

/* Estatik forces capitals from an inline rule; plugin CSS, so !important is allowed. */
.es-btn, .es-btn--primary { text-transform: none !important; letter-spacing: .01em !important; }

/* Header pair (Call + WhatsApp): identical at every width. The header is
   the one place buttons shrink on small screens, so the logo and both
   buttons still fit on one line: 48px desktop, 44px tablet, 42px phone. */
@media all {
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone) {
    height: var(--cp-control-h);
    padding: 0 24px;
    font-size: 15px !important;
    letter-spacing: .01em;
    border: 1px solid var(--cp-accent);
    border-radius: var(--cp-radius);
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
  }
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone):is(:hover, :focus-visible) {
    background: var(--cp-accent);
    color: #FFFFFF !important;
  }
}
@media (max-width: 921px) {
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone, .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa) {
    height: 44px; min-height: 44px; padding: 0 14px;
  }
}
@media (max-width: 480px) {
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone, .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa) {
    height: 42px; min-height: 42px; padding: 0 12px; font-size: 13px !important;
  }
}
/* Controls that are <button> elements but are NOT buttons in the design.
   Astra paints every <button> with the primary button fill and padding, so
   these take their own look back here: the gallery photo tiles, the
   "You may also like" arrows, the photo viewer controls and Astra's own
   submenu toggle. Add any new icon/tile <button> to this list. */
html body .cp-sp .cp-sp__gopen,
html body .cp-sp .cp-sp__gopen:is(:hover, :focus, :focus-visible) {
  padding: 0; background: none; border: 0; border-radius: 0; color: inherit; height: 100%; min-height: 0;
}
html body .cp-rail .cp-rail__btn, html body button.cp-rail__btn {
  padding: 0; background: var(--cp-surface); color: var(--cp-ink); border: 1px solid var(--cp-line); border-radius: 999px; min-height: 0;
}
html body button.cp-rail__btn:hover:not(:disabled) { background: var(--cp-surface); border-color: var(--cp-accent); color: var(--cp-accent); }
html body .cp-lb button.cp-lb__close { padding: 0; background: transparent; color: #FFFFFF; border: 0; border-radius: 999px; }
html body .cp-lb button.cp-lb__close:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
html body .cp-lb button.cp-lb__nav { padding: 0; background: rgba(255, 255, 255, .12); color: #FFFFFF; border: 0; border-radius: 999px; }
html body .cp-lb button.cp-lb__nav:hover { background: rgba(255, 255, 255, .24); color: #FFFFFF; }
html body .main-header-menu button.ast-menu-toggle,
html body .main-header-menu button.ast-menu-toggle:is(:hover, :focus) { background: transparent; border: 0; color: inherit; }

/* =========================================================
   19. STICKY HEADER  (2026-09-23)
   Dimi: "constant on top when scrolling, with a blur on the first
   scroll" (reference: v0 RealEState template). The header stays in the
   page flow (so the first-screen maths in section 16 still holds) and
   sticks to the top. assets/cp-header.js adds .cp-scrolled after 8px;
   that switches on the frosted glass: translucent limestone, blur,
   soft shadow. Not transparent over the photo at the top on purpose:
   the dark menu would sit on dark trees in the Home photo.
   ========================================================= */

#masthead {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
  background-color: var(--cp-ground);
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Phones: WordPress's admin bar scrolls away below 600px, so no offset. */
@media (max-width: 600px) { #masthead { top: 0; } }

/* The bars inside must not paint over the glass. */
#masthead .ast-primary-header-bar,
#masthead .main-header-bar,
#masthead .ast-mobile-header-wrap .ast-primary-header-bar { background: transparent; }

#masthead.cp-scrolled {
  background-color: rgba(247, 243, 236, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(28, 36, 33, .06), 0 10px 30px -18px rgba(28, 36, 33, .35);
}
/* Browsers without blur get a solid header instead of a see-through one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #masthead.cp-scrolled { background-color: var(--cp-ground); }
}

/* In-page links (#section) land below the sticky header, not under it. */
html { scroll-padding-top: calc(var(--cp-head) + 16px); }

/* ---- Call + WhatsApp with icons -----------------------------------------
   Desktop: phone icon + number, WhatsApp button with its icon.
   Desktop + tablet: "Call" outline box with the phone icon.
   Phone (<=599): icon-only squares, so the logo, both buttons and the menu
   button fit on one line (before, the menu button sat off-screen). */
/* Icons are drawn by CSS masks, not <svg> in the markup: Astra's header HTML
   block strips <svg> tags when it prints. The mask takes the text colour. */
.cp-header-phone::before,
.cp-header-wa::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--cp-icon) center / contain no-repeat;
  mask: var(--cp-icon) center / contain no-repeat;
}
.cp-header-phone {
  --cp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/></svg>");
}
.cp-header-wa {
  --cp-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-4.05 .9'/><path d='M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1'/></svg>");
}
@media (max-width: 599px) {
  .cp-header-phone::before,
  .cp-header-wa::before { width: 20px; height: 20px; }
}


@media (max-width: 599px) {
  .cp-header-actions .cp-hp-full,
  .cp-header-actions .cp-hp-short,
  .cp-header-actions .cp-wa-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone, .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa) {
    width: 42px; height: 42px; min-height: 42px; padding: 0; gap: 0;
  }
}

/* Narrow phones (360px Androids): logo a little smaller so the menu button
   stays on screen. 390px and up keep Astra's 175px. */
@media (max-width: 389px) {
  #masthead .custom-logo-link img.custom-logo { width: 140px; max-width: 140px; height: auto; }
  .cp-header-actions { gap: 6px; }
}

/* The logo lazy-loads; its shape is reserved up front so the header never
   changes height (and the page never jumps) when it arrives. 1004x224 = attachment 1913. */
#masthead img.custom-logo { aspect-ratio: 1004 / 224; height: auto; }

/* Icon + label spacing in the header pair. */
html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone, .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* 390-419px phones (most iPhones): a little more room at the right edge. */
@media (min-width: 390px) and (max-width: 419px) {
  #masthead .custom-logo-link img.custom-logo { width: 158px; max-width: 158px; }
}

/* Small laptops and landscape tablets (922-1099px): the full desktop header
   was ~1050px wide and pushed WhatsApp off the screen. Same layout, tighter:
   smaller logo, closer menu items, narrower button padding (height stays 48). */
@media (min-width: 922px) and (max-width: 1099px) {
  #masthead .custom-logo-link img.custom-logo { width: 170px; max-width: 170px; }
  .ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding-left: 8px; padding-right: 8px; }
  .cp-header-actions { gap: 8px; }
  html body :is(.site-header .cp-header-actions .cp-header-phone, .ast-primary-header-bar .ast-builder-html-element .cp-header-phone, .site-header .cp-header-actions .cp-header-wa, .ast-primary-header-bar .ast-builder-html-element .cp-header-wa) { padding: 0 16px; }
}

/* =========================================================
   20. LIGHT MOTION  (Dimi, 2026-09-24: "a little touch, nothing extra")
   - Between pages: the browser's own cross-page fade (View Transitions).
     Browsers without it just change page normally. The header is named
     so it stays still while the page under it fades.
   - Scrolling: .cp-reveal is added by assets/cp-header.js, never in the
     HTML, so content can never stay hidden if the script fails.
   - Off entirely for "reduce motion" users.
   ========================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .25s; }
#masthead { view-transition-name: cp-header; }

/* Hiding is instant; only the reveal animates (no fade-out on page load). */
.cp-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.cp-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--cp-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .cp-reveal { opacity: 1; transform: none; transition: none; }
}
/* =========================================================
   21. BUY / RENT SWITCH  (Dimi, 2026-09-24: options A + B, in C's style)
   One rounded switch, two uses:
   - result bar: <nav class="cp-deal"> links All / For sale / For rent
   - homepage search: <fieldset class="cp-deal cp-deal--form"> radios
     Buy / Rent; the price list that matches is shown with :has()
     (older browsers simply show both lists).
   ========================================================= */
.cp-deal {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--cp-line);
  border-radius: 999px;
  background: var(--cp-surface);
}
.cp-deal a,
.cp-deal label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--cp-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--cp-body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cp-deal a:hover,
.cp-deal label:hover { color: var(--cp-accent); text-decoration: none; }
.cp-deal a[aria-current="page"],
.cp-deal input:checked + label {
  background: var(--cp-accent);
  color: #FFFFFF;
}
.cp-deal a:focus-visible,
.cp-deal input:focus-visible + label { outline: 2px solid var(--cp-accent); outline-offset: 2px; }

/* Radios hidden but still keyboard and screen-reader reachable. */
.cp-deal--form input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cp-deal--form { margin-bottom: 14px; }

.cp-herosearch:not(:has(#cp-h-rent:checked)) .cp-price--rent,
.cp-herosearch:has(#cp-h-rent:checked) .cp-price--sale { display: none; }

/* Result bar: the switch sits at the start of the right-hand group. */
.cp-resultbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
@media (max-width: 600px) {
  .cp-resultbar__right .cp-deal { width: 100%; justify-content: space-between; }
  .cp-resultbar__right .cp-deal a { flex: 1; justify-content: center; }
}
/* The search form styles its labels as small capitals; the switch keeps its own look. */
.cp-herosearch .cp-deal label { text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 500; margin: 0; }

/* Short laptop screens (e.g. 1366x657): the Buy/Rent row made the home search
   card 24px too tall for the first screen. Tighter spacing there only. */
@media (min-width: 922px) and (max-height: 720px) {
  .elementor .elementor-element.elementor-element-7681009 > .e-con-inner { padding-top: 20px; padding-bottom: 20px; }
  .elementor .elementor-element.elementor-element-6fff914 { padding-top: 28px; padding-bottom: 26px; }
}

/* Very narrow phones (under 360px, e.g. folded screens): smaller logo and
   tighter gaps so the menu button stays on screen. */
@media (max-width: 359px) {
  #masthead .custom-logo-link img.custom-logo { width: 118px; max-width: 118px; }
  .cp-header-actions { gap: 4px; }
  #masthead .ast-builder-grid-row { column-gap: 8px; }
}

/* Price From - To (replaces the slider on Buy / Rent pages). */
.cp-price { display: flex; align-items: center; gap: 8px; }
.cp-price select { flex: 1 1 0; min-width: 0; }
.cp-price__dash { flex: 0 0 auto; color: var(--cp-muted); }

/* =========================================================
   22. PAGE TITLE ON THE PHOTO  (Services, Contact, About)
   Dimi, 2026-09-24: "the white background on those beautiful photos ruins
   the look". White title bottom-left, straight on the photo. A shade on
   the left and bottom only keeps it readable on bright skies; the rest of
   the photo stays untouched. Colours live in the Elementor widgets.
   ========================================================= */
.elementor-element-dca5506::after,
.elementor-element-a64ba95::after,
.elementor-element-632cc97::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 32, 28, .50) 0%, rgba(20, 32, 28, .22) 38%, rgba(20, 32, 28, 0) 65%),
    linear-gradient(0deg, rgba(20, 32, 28, .35) 0%, rgba(20, 32, 28, 0) 50%);
  pointer-events: none;
  z-index: 0;
}
.elementor-element-dca5506 > .e-con-inner,
.elementor-element-a64ba95 > .e-con-inner,
.elementor-element-632cc97 > .e-con-inner { position: relative; z-index: 1; }

.elementor-element-cphero2f2 .elementor-heading-title,
.elementor-element-cpherofcc .elementor-heading-title,
.elementor-element-cphero019 .elementor-heading-title {
  text-shadow: 0 2px 18px rgba(20, 32, 28, .35);
}

/* =========================================================
   23. MENU DROPDOWN  (Dimi, 2026-09-24: option A - a clean list, no
   counts, no "All" link, and not "crooked")
   The item text lines up exactly with the parent word ("Buy", "Rent")
   at every width: the panel is shifted by (parent link padding - item
   padding). --cp-menu-pad follows the menu padding set earlier:
   22px desktop, 11px at 1100-1199, 8px at 922-1099.
   ========================================================= */
.ast-desktop .ast-builder-menu-1 .main-header-menu { --cp-menu-pad: 22px; }
@media (min-width: 1100px) and (max-width: 1199px) { .ast-desktop .ast-builder-menu-1 .main-header-menu { --cp-menu-pad: 11px; } }
@media (min-width: 922px) and (max-width: 1099px) { .ast-desktop .ast-builder-menu-1 .main-header-menu { --cp-menu-pad: 8px; } }

.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu {
  left: calc(var(--cp-menu-pad) - 17px); /* 16px item padding + 1px border */
  min-width: 210px;
  padding: 8px 0;
  margin-top: 6px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: 8px;
  box-shadow: 0 14px 34px -14px rgba(28, 36, 33, .28);
}
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item { border: 0; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-link {
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 400;
  color: var(--cp-ink);
  border: 0;
  white-space: nowrap;
}
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover,
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:focus-visible {
  background: var(--cp-chip-bg);
  color: var(--cp-accent);
}

/* Home title: "Athenian Riviera" is joined by a non-breaking space so the
   key phrase never splits (Dimi, 2026-09-24). On the smallest phones the
   joined phrase is wider than the card at 32px, so the title steps down. */
@media (max-width: 359px) {
  .elementor .elementor-element.elementor-element-bf1f207 .elementor-heading-title { font-size: 27px; }
}
/* Phones: even line lengths, so "the" is never left alone on a line. */
@media (max-width: 767px) {
  .elementor .elementor-element.elementor-element-bf1f207 .elementor-heading-title { text-wrap: balance; }
}

/* =========================================================
   24. LEGAL PAGES  (Privacy Policy, Cookie Policy - 2026-09-24)
   Template page-legal.php: the archive photo header, then an
   "On this page" list beside a reading column. Numbers come from
   counters here, so the page text stays plain.
   Also: the footer legal bar lines up with the columns above it
   (Astra: hbb-footer-layout-width = full).
   ========================================================= */

.cp-legal__grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 720px);
  gap: 56px;
  justify-content: center;
  align-items: start;
  counter-reset: cp-legal cp-legal-toc;
}

.cp-legal__toc {
  position: sticky;
  top: calc(var(--cp-head, 111px) + var(--cp-adminbar, 0px) + 24px);
  padding: 22px 24px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
}
.cp-legal__toctitle {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cp-ink);
}
.cp-legal__toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cp-legal__toc li { counter-increment: cp-legal-toc; display: flex; gap: 8px; font-size: 14px; line-height: 1.4; }
.cp-legal__toc li::before { content: counter(cp-legal-toc) "."; color: var(--cp-muted); min-width: 1.4em; }
.cp-legal__toc a { color: var(--cp-accent); text-decoration: none; }
.cp-legal__toc a:hover { text-decoration: underline; }

.cp-legal__text {
  background: var(--cp-surface);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  padding: 48px 56px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cp-body);
}
.cp-legal__text > :first-child { margin-top: 0; }
.cp-legal__text h2 {
  counter-increment: cp-legal;
  font-size: 24px;
  line-height: 1.3;
  margin: 44px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--cp-line-soft);
  scroll-margin-top: calc(var(--cp-head, 111px) + var(--cp-adminbar, 0px) + 20px);
}
.cp-legal__text h2::before { content: counter(cp-legal) ". "; color: var(--cp-accent); }
.cp-legal__text h3 { font-size: 18px; margin: 26px 0 8px; }
.cp-legal__text p, .cp-legal__text ul { margin: 0 0 14px; }
.cp-legal__text ul { padding-left: 1.2em; }
.cp-legal__text li { margin-bottom: 6px; }
.cp-legal__text a { color: var(--cp-accent); overflow-wrap: anywhere; }

.cp-legal__summary {
  background: var(--cp-chip-bg);
  border-left: 3px solid var(--cp-accent);
  border-radius: var(--cp-radius);
  padding: 18px 22px;
  margin-bottom: 8px;
}
.cp-legal__summary p { margin: 0; }
.cp-legal__summary .cp-legal__date { font-size: 13px; color: var(--cp-muted); margin-bottom: 6px; }

.cp-legal__table { overflow-x: auto; margin: 0 0 16px; }
.cp-legal__table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; margin: 0; border: 0; }
.cp-legal__table th, .cp-legal__table td { text-align: left; vertical-align: top; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--cp-line); }
.cp-legal__table th { color: var(--cp-ink); font-weight: 600; background: var(--cp-ground); }
.cp-legal__table code { font-size: 13px; background: none; padding: 0; white-space: nowrap; }

@media (max-width: 921px) {
  .cp-legal__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cp-legal__toc { position: static; }
  .cp-legal__text { padding: 36px 32px; }
}
@media (max-width: 544px) {
  .cp-legal__text { padding: 28px 20px; font-size: 15px; }
  .cp-legal__text h2 { font-size: 21px; margin-top: 36px; }
}


/* Phones: each cookie becomes a small block instead of a sideways-scrolling table. */
@media (max-width: 480px) {
  .cp-legal__table thead { display: none; }
  .cp-legal__table tr, .cp-legal__table td { display: block; }
  .cp-legal__table tr { padding: 12px 0; border-bottom: 1px solid var(--cp-line); }
  .cp-legal__table td { padding: 2px 0; border: 0; }
  .cp-legal__table td:first-child { font-weight: 600; color: var(--cp-ink); }
  .cp-legal__table td:nth-child(3) { color: var(--cp-muted); }
  .cp-legal__table td:nth-child(3)::before { content: "Lasts: "; }
}

/* Footer legal bar: copyright left, links right; stacked on small screens. */
.site-below-footer-inner-wrap { align-items: center; }
.site-below-footer-wrap .ast-footer-copyright p { margin: 0; }
/* Phones and tablets: footer uses the header's 20px side gutter, so the
   footer logo lines up with the header logo (Dimi, 2026-09-24). */
@media (max-width: 921px) {
  .site-footer .site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row,
  .site-footer .site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row { padding-left: 20px; padding-right: 20px; }
}
/* Room for the fixed back-to-top button, which otherwise sits on the links. */
.site-below-footer-inner-wrap { padding-right: 64px; }
@media (min-width: 922px) { .site-below-footer-wrap .ast-footer-copyright { white-space: nowrap; } }
@media (max-width: 921px) {
  .site-below-footer-inner-wrap { row-gap: 12px; }
  .cp-foot-legal { margin-top: 0; flex-wrap: wrap; gap: 8px 22px; }
}

/* =========================================================
   25. MAPS  (2026-09-26, Dimi: "change the style of the map")
   assets/cp-map.js turns every .cp-map box into a MapLibre map in
   the site palette (OpenFreeMap tiles). Listing pages + Contact.
   The link inside is the no-script / failed-tiles fallback.
   ========================================================= */
.cp-map {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius-card);
  background: #F1EBE1;
}
.elementor-widget-text-editor .cp-map { height: 300px; margin-top: 8px; } /* Contact office map */
.cp-map__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cp-accent);
  font-weight: 500;
}
/* The pin: an Aegean drop with a white dot. Shapes live on pseudo-elements
   because MapLibre positions the marker element itself with transform. */
.cp-map__pin { position: relative; width: 30px; height: 40px; }
.cp-map__pin::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  background: var(--cp-accent);
  border: 3px solid #FFFFFF;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 3px 8px rgba(28, 36, 33, .35);
}
.cp-map__pin::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
}
/* Astra paints every <button> as a site button - undo it for map controls. */
html body .cp-map button {
  width: 29px;
  height: 29px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #FFFFFF;
  box-shadow: none;
  color: var(--cp-ink);
}
html body .cp-map .maplibregl-ctrl-group { border-radius: var(--cp-radius); box-shadow: 0 1px 4px rgba(28, 36, 33, .2); }
html body .cp-map .maplibregl-ctrl-attrib-button { background-color: transparent; }
.cp-map .maplibregl-cooperative-gesture-screen { font-family: var(--cp-font-body); font-size: 15px; }

/* Contact: the office buttons under the map. */
.cp-office-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.cp-office-review { margin: 12px 0 0; font-size: 14px; }
.cp-office-review a { color: var(--cp-accent); font-weight: 500; }

/* Footer address links to the Google Maps listing - keep it looking like text. */
.cp-foot-address a { color: inherit; text-decoration: none; }
.cp-foot-address a:is(:hover, :focus-visible) { color: var(--cp-accent); text-decoration: underline; }

/* Area / Buy / Rent text under the listings (2026-09-27, SEO). Sand band like
   the last section of every page; readable line length. */
.cp-archive__about { background: var(--cp-sand); padding: 56px 0 64px; margin-top: 48px; }
.cp-archive__about h2 { margin: 0 0 16px; }
.cp-archive__about-text { max-width: 720px; }
.cp-archive__about-text p { margin: 0 0 14px; line-height: 1.7; color: var(--cp-body); }
@media (max-width: 767px) { .cp-archive__about { padding: 44px 0 48px; margin-top: 32px; } }

/* Homepage area cards with a short text (2026-09-27). */
.cp-areas--text { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1099px) { .cp-areas--text { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .cp-areas.cp-areas--text { grid-template-columns: 1fr; } }
.cp-area__text { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cp-line); font-size: 14px; line-height: 1.55; color: var(--cp-body); }
@media (max-width: 480px) { .cp-areas.cp-areas--text { grid-template-columns: 1fr; } }

/* cp-scrolltop - Back-to-top button (Dimi, 2026-10-03): on screens 922px+ it sat on the
   "Contact" link of the bottom bar (bar 92px tall, links 26-52px from the
   bottom, button 30-72px). Lifted clear of the bar; phones keep 30px
   (their bottom links are on the left). Astra has no offset setting. */
@media (min-width: 922px) {
  html body #ast-scroll-top { bottom: 104px; }
}
/* Look (2026-10-03, Dimi: match the site): colours + 4px corners live in
   astra-settings (scroll-to-top-*); here only what Astra has no setting for. */
html body #ast-scroll-top {
  box-shadow: 0 6px 18px rgba(28, 36, 33, .18);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
html body #ast-scroll-top:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(28, 36, 33, .22); }
html body #ast-scroll-top:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html body #ast-scroll-top, html body #ast-scroll-top:hover { transition: none; transform: none; } }