/* =========================================================
   chez-shell.css - single source of truth for the shared
   page shell across the whole site.

   Owns: header + desktop menu, mobile drawer menu, contact +
   footer block, cookie banner, and the mobile gutter system.

   Loaded LAST on every page (homepage and every chez-<slug>/index.html)
   so the shell renders byte-identically everywhere. style.css and
   chez-property.css must NOT redefine anything in this file.
   ========================================================= */

/* =========================================================
   1. HEADER + DESKTOP MENU

   One header, one geometry, every page and every screen size.
   The theme shipped five hard-coded rail widths (1140/940/720/
   540/340) plus a different header height and logo size below
   768px, so the bar visibly changed shape as the window
   narrowed. It is now a single flex row: fixed 72px tall, logo
   44px tall, rail capped at 1140px with a fluid gutter.
   ========================================================= */
/* The privacy page ships its own (older) nicepage.css build whose reset
   leaves the browser default 8px body margin in place, so its header rail
   sat 8px in from every other page. */
body,
body.u-body {
  margin: 0 !important;
}

.u-header.u-white {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 8px 28px rgba(17, 17, 17, 0.05);
}

.u-header .u-sheet-1 {
  width: 100% !important;
  max-width: calc(var(--content-max) + 2 * var(--gutter)) !important;
  min-height: 72px !important;
  height: 72px !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* .u-clearfix adds :before/:after, which become flex items once the rail
   is a flex row and push the logo off the left edge. Not needed here. */
.u-header .u-sheet-1:before,
.u-header .u-sheet-1:after {
  display: none !important;
}

/* Markup order is <nav> then <img>; the logo belongs on the left. */
.u-header .u-sheet-1 > img.u-image-1 {
  order: 0;
  width: auto !important;
  height: 44px !important;
  max-height: 44px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  flex: 0 0 auto;
}

.u-header .u-sheet-1 > .u-menu {
  order: 1;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
}

/* Only above the theme's own 992px switch - below it Nicepage hides the
   inline links and shows the hamburger, and this must not undo that. */
@media (min-width: 992px) {
  .u-header .u-nav-container {
    display: flex;
    align-items: center;
  }

  .u-header .u-nav-1 {
    margin: 0 !important;
    display: flex !important;
    align-items: center;
  }

  .u-header .u-nav-1 > .u-nav-item {
    margin: 0 0 0 30px !important;
  }

  .u-header .u-nav-1 > .u-nav-item:first-child {
    margin-left: 0 !important;
  }
}

.menu-collapse,
.u-nav .u-nav-link,
.u-nav-container .u-nav-link,
.u-popupmenu-items .u-nav-link {
  font-family: var(--title-font) !important;
}

.u-nav .u-nav-link,
.u-nav-container .u-nav-link {
  color: var(--body-color) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease;
}

.u-nav .u-nav-link:hover,
.u-nav .u-nav-link.active,
.u-nav-container .u-nav-link:hover,
.u-nav-container .u-nav-link.active {
  color: var(--brand-black) !important;
  border-color: var(--accent-color) !important;
}

/* Keyboard users need to see where they are. */
.u-header a:focus-visible,
.cc-section a:focus-visible,
.cc-cookies a:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================
   2. MOBILE DRAWER MENU
   ========================================================= */

/* Hamburger was a 24x32 hit area - under the 44x44 minimum
   recommended for touch targets (WCAG 2.5.5 / Apple HIG). */
.u-menu .menu-collapse > a.u-nav-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  margin: 0 -10px 0 0; /* keep the icon optically aligned to the edge */
  border-radius: 6px;
  transition: background-color 180ms ease;
}

.u-menu .menu-collapse > a.u-nav-link:hover,
.u-menu .menu-collapse > a.u-nav-link:focus-visible {
  background-color: rgba(17, 17, 17, 0.06);
}

.u-menu .menu-collapse > a.u-nav-link:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 2px;
}

.u-sidenav {
  background-color: var(--brand-black) !important;
}

/* Drawer width comes from data-offcanvas-width on the .u-sidenav in the
   markup (Nicepage turns it into a flex-basis + the closed-state offset),
   so it must be changed there, not here. 500ms was sluggish on a phone;
   260ms reads as instant but still communicates direction. */
.u-enable-responsive.u-offcanvas .u-sidenav {
  transition: margin-left 260ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* The drawer was 95% opaque, so the logo and hero showed faintly through
   the menu. A navigation surface should be solid. */
.u-nav-container-collapse .u-sidenav {
  opacity: 1 !important;
  background-color: var(--brand-black) !important;
}

.u-nav-container-collapse .u-sidenav:before {
  opacity: 1 !important;
}

/* The cookie banner is fixed at the bottom and sat on top of the open
   drawer. One decision at a time. */
html.chez-menu-open .cc-cookies {
  display: none !important;
}

.u-menu-overlay {
  transition: opacity 260ms ease;
}

/* ---- Drawer contents ----
   Navy rather than grey (the wordmark navy, so the panel reads as the
   brand and not as a system sheet), a brand block at the top so you know
   where you are, and the contact details at the bottom - the drawer was
   four links and a large empty rectangle. */
.u-nav-container-collapse .u-sidenav {
  background-color: var(--brand-navy) !important;
}

.u-sidenav .u-sidenav-overflow {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 24px;
}

.chez-drawer-brand {
  display: block;
  padding: 4px 28px 22px;
  margin-top: -8px;
}

.chez-drawer-mark {
  display: block;
  width: 92px;
  height: auto;
  margin: 0 0 12px;
}

.chez-drawer-word {
  display: block;
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1;
}

.chez-drawer-tag {
  display: block;
  font-family: var(--body-font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 6px;
}

.u-sidenav .u-popupmenu-items {
  margin: 0 !important;
  width: 100%;
  text-align: left !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.u-sidenav .u-nav-item {
  margin: 0 !important;
  display: block;
}

.u-sidenav .u-nav-link {
  display: flex;
  align-items: center;
  font-family: var(--title-font) !important;
  font-weight: 700 !important;
  font-size: 1.12rem !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff !important;
  /* 56px minimum row height, full-width tap target */
  padding: 18px 28px !important;
  min-height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  transition: background-color 180ms ease, color 180ms ease, padding-left 180ms ease;
}

/* Nicepage forces `padding-left:0 !important` on off-canvas links with a
   3-class selector, so the inset has to be re-stated at that weight or the
   labels sit flush against the panel edge. */
.u-enable-responsive.u-offcanvas .u-sidenav .u-nav-link {
  padding-left: 28px !important;
  padding-right: 28px !important;
}

.u-sidenav .u-nav-link:hover,
.u-sidenav .u-nav-link:focus-visible,
.u-enable-responsive.u-offcanvas .u-sidenav .u-nav-link:hover,
.u-enable-responsive.u-offcanvas .u-sidenav .u-nav-link:focus-visible {
  color: var(--accent-color) !important;
  background-color: rgba(255, 255, 255, 0.06);
  padding-left: 34px !important;
}

.u-sidenav .u-nav-link:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -4px;
}

.u-sidenav .u-nav-link.active {
  color: var(--accent-color) !important;
  box-shadow: inset 4px 0 0 var(--accent-color);
}

.chez-drawer-foot {
  margin-top: auto;
  padding: 28px 28px 0;
}

.chez-drawer-foot-label {
  display: block;
  font-family: var(--title-font);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.chez-drawer-foot-link {
  display: block;
  font-family: var(--body-font);
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.82) !important;
  text-decoration: none;
  padding: 7px 0;
  transition: color 180ms ease;
}

.chez-drawer-foot-link:hover,
.chez-drawer-foot-link:focus-visible {
  color: var(--accent-color) !important;
}

.u-enable-responsive .u-menu-close {
  width: 44px;
  height: 44px;
  margin: 14px 14px 4px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 200ms ease;
}

.u-enable-responsive .u-menu-close:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.u-enable-responsive .u-menu-close:before {
  font-size: 20px !important;
  color: rgba(255, 255, 255, 0.75);
}

/* Stop the page behind the drawer from scrolling while it is open. */
html.chez-menu-open,
html.chez-menu-open body {
  overflow: hidden !important;
  touch-action: none;
}

/* =========================================================
   3. CONTACT + FOOTER (identical on every page)
   ========================================================= */
.cc-section {
  background-color: #262626;
  color: #f2f2f2;
  padding: 70px 0 0;
}

.cc-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cc-main {
  /* No max-width: the heading needs the full width flex leaves it after
     the fixed-width wave graphic, or "Precisa de mais informações?" wraps
     to two lines well before it needs to. */
  flex: 1 1 auto;
}

.cc-main p {
  line-height: 1.6;
}

.cc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: var(--title-font);
  font-weight: 600;
  font-size: var(--t7);
  color: var(--accent-color) !important;
  margin: 0 0 6px;
}

.cc-heading {
  font-family: var(--title-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  /* Capped below --t2: cc-wrap stops growing past 1140px, but this was
     still scaling with raw viewport width, so past ~1575px it outgrew its
     box again and wrapped a second time. */
  font-size: clamp(2rem, 3.3vw, 2.75rem) !important;
  line-height: 1.15;
  color: #ffffff !important;
  margin: 0 0 32px;
}

.cc-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}

.cc-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 12px;
  box-sizing: border-box;
}

/* Contact and social glyphs were white on the yellow disc, which is a
   weak contrast pairing (~1.7:1). Dark grey on yellow reads cleanly and
   matches the wordmark in the logo. */
.cc-icon,
.cc-social-icon {
  color: var(--brand-black) !important;
}

.cc-icon svg,
.cc-icon .u-svg-content,
.cc-icon .u-svg-content path,
.cc-icon .u-svg-content g,
.cc-social-icon svg,
.cc-social-icon .u-svg-content,
.cc-social-icon .u-svg-content path,
.cc-social-icon .u-svg-content g {
  fill: var(--brand-black) !important;
}

.cc-link {
  font-family: var(--body-font);
  font-size: var(--t7);
  color: #f2f2f2 !important;
  text-decoration: none;
  transition: color 200ms ease;
}

.cc-link:hover,
.cc-link:focus-visible {
  color: var(--accent-color) !important;
}

.cc-social-eyebrow {
  margin-top: 26px;
}

.cc-social-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc-social-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 11px;
  box-sizing: border-box;
  transition: opacity 200ms ease;
}

.cc-social-icon:hover {
  opacity: 0.8;
}

.cc-handle {
  font-family: var(--body-font);
  font-size: var(--t7);
  color: #f2f2f2;
  margin-left: 4px;
}

.cc-wave {
  flex: 0 0 auto;
  align-self: flex-end;
  width: 260px;
  max-width: 34%;
  line-height: 0;
}

.cc-wave-img {
  width: 100%;
  display: block;
}

.cc-footer-line {
  margin-top: 44px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 30px;
  text-align: center;
}

.cc-footer-line p {
  font-size: var(--t8);
  color: #b8b8b8 !important;
  margin: 0;
}

.cc-footer-legal {
  margin-bottom: 8px !important;
}

.cc-footer-line a {
  color: #b8b8b8;
  text-decoration: underline;
}

.cc-footer-line a:hover {
  color: var(--accent-color);
}

@media (max-width: 991px) {
  /* Below this, the row layout squeezes cc-main against the fixed-width
     wave graphic too hard for "Precisa de mais informações?" to fit on one
     line - stack instead, same threshold the header nav already uses. */
  .cc-section {
    padding: 48px 0 0;
  }

  .cc-wrap {
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
    gap: 24px;
  }

  .cc-heading {
    font-size: 1.75rem !important;
  }

  .cc-wave {
    width: 100%;
    max-width: 100%;
    align-self: center;
    opacity: 0.9;
  }

  .cc-footer-line {
    padding: 16px 20px;
  }
}

/* =========================================================
   4. COOKIE BANNER
   .chez-consented is set on <html> by the inline head script
   before first paint, so an already-consented visitor never
   sees a flash of the banner.
   ========================================================= */
html.chez-consented .u-cookies-consent,
html.chez-consented .cc-cookies {
  display: none !important;
}

.cc-cookies {
  position: fixed;
  left: 16px;
  right: auto;
  bottom: 16px;
  width: min(430px, calc(100% - 32px));
  z-index: 999;
  background-color: rgba(30, 30, 30, 0.96);
  color: #f2f2f2;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.cc-cookies-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  max-width: none;
  margin: 0;
}

.cc-cookies-text {
  font-family: var(--body-font);
  font-size: 0.84rem;
  line-height: 1.42;
  color: #ffffff !important;
  margin: 0;
  flex: initial;
}

.cc-cookies-text a {
  color: var(--accent-color);
  text-decoration: underline;
}

.cc-cookies-btn,
.cc-cookies-btn:visited,
.cc-cookies-btn:hover,
.cc-cookies-btn:focus,
.cc-cookies-btn:active {
  flex: initial;
  align-self: center;
  background-color: var(--accent-color) !important;
  color: var(--body-color) !important;
  font-family: var(--title-font) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  padding: 10px 16px !important;
  min-height: 40px;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  text-decoration: none !important;
}

@media (max-width: 575px) {
  .cc-cookies {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
  }

  .cc-cookies-inner {
    align-items: flex-start;
    padding: 12px;
    gap: 9px;
  }

  .cc-cookies-btn {
    align-self: stretch;
    text-align: center;
  }
}

/* =========================================================
   5. LAYOUT GRID - one rail for the whole site

   Before this, bands disagreed: content sheets were a fixed
   1140/940/720/540/340 ladder, the sold-portfolio grid was 1200
   wide with 20px padding, the contact block added another 30px of
   its own padding inside the rail (so the footer sat 30px inside
   the "Ana Isabel Santos" text above it), and the USP band was
   1109px pushed to the right. Everything now resolves to:

     max-width : var(--content-max) + 2 x var(--gutter)
     padding   : var(--gutter)

   which means one shared left edge and right edge at every width.
   ========================================================= */
.u-body .u-sheet,
.chez-pdp .u-section-1 .u-sheet-1,
.chez-pdp .u-section-2 .u-sheet-1,
.cc-wrap,
.cc-footer-line,
#portfolio-vendido .pv-grid,
#portfolio-vendido h2.pv-title,
#portfolio-vendido p.pv-subtitle {
  width: 100% !important;
  max-width: calc(var(--content-max) + 2 * var(--gutter)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
  box-sizing: border-box;
}

/* A .u-sheet nested inside another one is an inner wrapper, not a rail. */
.u-body .u-sheet .u-sheet {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Section-level wrappers the theme pinned to their own pixel widths. */
.u-section-2 .u-layout-wrap-1,
.u-section-3 .u-layout-wrap-1,
.u-section-5 .u-layout-wrap-1,
.u-section-6 .u-layout-wrap-1 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.cc-footer-line {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
}

@media (max-width: 575px) {
  .u-section-4 .u-repeater-item {
    max-width: 100% !important;
  }

  /* Property card photos fill their card edge to edge. */
  .u-section-4 .u-container-layout-1 {
    padding: 0 0 14px !important;
  }

  .u-section-4 .u-image-5 {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px !important;
  }

  .u-section-4 .u-btn-9,
  .u-section-4 .u-text-6,
  .u-section-4 .u-btn-4 {
    margin-left: 14px !important;
    margin-right: 14px !important;
  }
}

@media (max-width: 767px) {
  .u-section-4 .u-repeater-item {
    max-width: 100% !important;
  }

  /* ---- The property page's photo goes edge to edge on phones ----
     Done by zeroing the rail padding on that section, NOT with a 100vw
     break-out: 100vw includes the scrollbar, so the break-out overflowed
     to the right and the photo looked shifted and clipped. */
  .chez-pdp .u-section-1 .u-sheet-1 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  .chez-pdp .u-section-1 .u-gallery-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The homepage photo sits on the same rail as the cards beside it. */
  .chez-home .u-section-3 .u-gallery-1 {
    width: auto !important;
    max-width: none !important;
    margin-left: var(--gutter) !important;
    margin-right: var(--gutter) !important;
    margin-bottom: 14px !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
  }

  /* The white cards are inset FROM the blue band with a margin - padding
     would have pushed their text in while the white kept touching the
     edges. They also need air between one another. */
  .chez-home .u-section-3 .u-layout-cell-2,
  .chez-home .u-section-3 .u-layout-cell-3,
  .chez-home .u-section-3 .u-layout-cell-4 {
    width: auto !important;
    margin-left: var(--gutter) !important;
    margin-right: var(--gutter) !important;
    margin-bottom: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box;
  }

  .chez-home .u-section-3 .u-layout-cell-4 {
    margin-bottom: 0 !important;
  }

  /* Text on the property page keeps the rail. */
  .chez-pdp .u-section-1 > .u-sheet-1 > *:not(.u-gallery-1) {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
  }

  /* Nothing between the photo and the viewport edge. */
  .chez-home .u-section-3 .u-layout-wrap-1,
  .chez-home .u-section-3 .u-layout,
  .chez-home .u-section-3 .u-layout-row,
  .chez-home .u-section-3 .u-size-41,
  .chez-home .u-section-3 .u-layout-col,
  .chez-home .u-section-3 .u-layout-cell-1,
  .chez-home .u-section-3 .u-container-layout-1 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Square corners on the property page's full-bleed photo. */
  .chez-pdp .u-section-1 .u-gallery-1,
  .chez-pdp .u-section-1 .u-carousel-inner,
  .chez-pdp .u-section-1 .u-carousel-item,
  .chez-pdp .u-section-1 .u-back-slide,
  .chez-pdp .u-section-1 .u-back-image,
  .chez-pdp .u-section-1 img {
    border-radius: 0 !important;
  }

  /* ...and the property page's photo starts immediately under the
     header, with no strip of white between the two. */
  .chez-pdp .u-section-1 {
    padding-top: 0 !important;
  }

  .chez-pdp .u-section-1 .u-sheet-1 {
    margin-top: 0 !important;
  }
}

/* =========================================================
   Trust strip - shown on the homepage and on every property page.
   Site furniture, not body copy, so it is defined once here and
   never repeated inside a property description in houses-data.json.
   ========================================================= */
.chez-trust {
  background-color: var(--surface-soft);
  padding: clamp(36px, 5vw, 60px) 0;
}

.chez-trust-inner {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}

/* Nicepage scopes headings as `.u-body h2`, which outranks a plain class,
   so these have to be stated with !important. */
.chez-trust-title {
  font-family: var(--title-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.7rem) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em;
  color: var(--body-color) !important;
  margin: 0 0 6px !important;
}

.chez-trust-title:after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--accent-color);
  margin: 14px 0 0;
}

.chez-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(24px, 3vw, 36px);
}

.chez-trust-item {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 22px 20px 24px;
}

.chez-trust-mark {
  display: block;
  font-family: var(--title-font);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.chez-trust-item h3 {
  font-family: var(--title-font) !important;
  font-weight: 700 !important;
  font-size: 1.02rem !important;
  line-height: 1.25 !important;
  color: var(--body-color) !important;
  margin: 0 0 8px !important;
}

.chez-trust-item p {
  font-family: var(--body-font) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--body-color) !important;
  margin: 0 !important;
}

@media (max-width: 991px) {
  .chez-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .chez-trust-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chez-trust-item {
    padding: 18px 16px 20px;
  }
}


/* =========================================================
   6. "AS CHEZ" SUB-MENU

   Generated from houses-data.json by generate.py, so it always
   lists exactly the properties currently for sale - selling one
   removes it from the menu on the next build, on every page.

   Desktop: a dropdown under the nav item.
   Drawer:  an accordion row with a chevron.
   ========================================================= */
.chez-has-sub {
  position: relative;
}

.chez-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chez-subnav a {
  display: block;
  text-decoration: none;
}

.chez-subnav-name {
  display: block;
  font-family: var(--title-font);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.chez-subnav-meta {
  display: block;
  font-family: var(--body-font);
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.72;
  margin-top: 2px;
}

.chez-subnav-empty span {
  display: block;
  font-family: var(--body-font);
  opacity: 0.6;
}

/* ---------- Desktop dropdown ---------- */
@media (min-width: 992px) {
  /* label and chevron on one line */
  .u-header .chez-has-sub {
    display: flex;
    align-items: center;
  }

  .u-header .chez-sub-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 5px;
    padding: 0;
    border: none;
    background: none;
    color: var(--body-color);
    cursor: pointer;
    vertical-align: middle;
    transition: transform 180ms ease;
  }

  .u-header .chez-sub-toggle svg {
    width: 10px;
    height: 7px;
  }

  .u-header .chez-has-sub[data-open="true"] .chez-sub-toggle {
    transform: rotate(180deg);
  }

  .u-header .chez-subnav {
    position: absolute;
    /* No gap: the panel starts at the bottom of the nav item and creates
       its own visual offset with padding-top. A real gap means the pointer
       crosses dead space and the panel closes before you reach it. */
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 260px;
    background: #ffffff;
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: var(--radius-sm);
    box-shadow: 0 14px 40px rgba(17, 17, 17, 0.14);
    padding: 8px;
    margin-top: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 20;
  }

  /* Invisible bridge spanning the panel's full width, so travelling
     diagonally from the label to a menu entry never leaves the group. */
  .u-header .chez-has-sub:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 22px;
  }

  .u-header .chez-has-sub:not(:hover):not(:focus-within):not([data-open="true"]):after {
    display: none;
  }

  .u-header .chez-has-sub:hover .chez-subnav,
  .u-header .chez-has-sub:focus-within .chez-subnav,
  .u-header .chez-has-sub[data-open="true"] .chez-subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  .u-header .chez-subnav li + li {
    margin-top: 2px;
  }

  .u-header .chez-subnav a {
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--body-color) !important;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .u-header .chez-subnav a:hover,
  .u-header .chez-subnav a:focus-visible {
    background: var(--surface-soft);
    color: var(--body-color) !important;
  }

  .u-header .chez-subnav-meta {
    text-transform: none;
    font-size: 0.82rem;
  }

  .u-header .chez-subnav-empty span {
    padding: 10px 14px;
    font-size: 0.85rem;
  }
}

/* ---------- Drawer accordion ---------- */
.u-sidenav .chez-has-sub {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.u-sidenav .chez-has-sub > .u-nav-link {
  border-bottom: none !important;
  padding-right: 64px !important;
}

.u-sidenav .chez-sub-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  color: #ffffff;
  cursor: pointer;
  /* NB: no transform here - rotating the button spins its whole 58px
     square, border and hover fill included. Only the glyph turns. */
  transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.u-sidenav .chez-sub-toggle svg {
  width: 13px;
  height: 9px;
  display: block;
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.u-sidenav .chez-sub-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
}

.u-sidenav .chez-sub-toggle:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -4px;
}

.u-sidenav .chez-has-sub[data-open="true"] .chez-sub-toggle {
  color: var(--accent-color);
}

.u-sidenav .chez-has-sub[data-open="true"] .chez-sub-toggle svg {
  transform: rotate(180deg);
}

/* Browser default `ul { margin: 1em 0 }` was leaving a 20px navy strip
   above and below the open sub-list. */
.u-sidenav .chez-subnav,
.u-sidenav .chez-has-sub > .chez-subnav {
  margin: 0 !important;
  padding: 0 !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.22);
  /* max-height is set to the list's real height by chez-shell.js, so the
     animation runs at the right speed instead of racing to an arbitrary
     ceiling and then sitting still. */
  transition: max-height 300ms cubic-bezier(0.33, 0, 0.2, 1),
              opacity 220ms cubic-bezier(0.33, 0, 0.2, 1);
}

.u-sidenav .chez-has-sub[data-open="true"] > .chez-subnav {
  opacity: 1;
}

.u-sidenav .chez-subnav a {
  padding: 14px 28px 14px 40px;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.95rem;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: color 180ms ease, background-color 180ms ease;
}

.u-sidenav .chez-subnav a:hover,
.u-sidenav .chez-subnav a:focus-visible {
  color: var(--accent-color) !important;
  background: rgba(255, 255, 255, 0.06);
}

.u-sidenav .chez-subnav-meta {
  color: var(--accent-color);
  font-size: 0.82rem;
}

.u-sidenav .chez-subnav-empty span {
  padding: 14px 28px 14px 40px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

@media (min-width: 992px) {
  .u-sidenav .chez-subnav {
    max-height: none;
  }
}


/* =========================================================
   7. TEXT ALIGNMENT NORMALISATION

   The rail (section 5) lines up the *bands*. The theme then adds
   its own inner padding inside those bands, so copy landed on
   three different left edges on the same page: hero at 193px,
   "o nosso segredo" at 180px, the sold cards at 160px, while the
   rail sits at 150px. Backgrounds are free to be any width;
   the words are not.
   ========================================================= */

/* Hero: the group was 1127px inside a 1140px sheet with 30px of
   its own padding, so the headline sat 43px inside the rail. */
.chez-home .u-section-1 .u-group-1 {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.chez-home .u-section-1 .u-container-layout-1 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* "O nosso segredo" / "Cada casa, um potencial": outer columns keep
   their inner gap but give up the padding on the rail side. */
.chez-home .u-section-2 .u-container-layout-1 {
  padding-left: 0 !important;
}

.chez-home .u-section-2 .u-container-layout-2 {
  padding-right: 0 !important;
}

/* Ana Isabel Santos: same, on the text column. */
.chez-home .u-section-5 .u-container-layout-2 {
  padding-right: 0 !important;
}

/* Sold-portfolio cards: the 10px card padding pushed every caption
   off the rail. The photo fills the card and the name starts on it. */
#portfolio-vendido .pv-card {
  padding: 0 !important;
  background: transparent !important;
}

#portfolio-vendido .pv-card .pv-name {
  padding: 12px 0 2px !important;
}

#portfolio-vendido .pv-card .pv-badge {
  top: 8px !important;
  right: 8px !important;
}

@media (max-width: 767px) {
  .chez-home .u-section-2 .u-container-layout-1,
  .chez-home .u-section-2 .u-container-layout-2,
  .chez-home .u-section-5 .u-container-layout-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* =========================================================
   8. PROPERTY-PAGE CAROUSEL CONTROLS
   The prev/next arrows were sized for a full-bleed hero and
   dominated the photo, especially on a phone.
   ========================================================= */
.chez-pdp .u-section-1 .u-carousel-control {
  width: 38px !important;
  height: 38px !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 180ms ease, background-color 180ms ease;
}

.chez-pdp .u-section-1 .u-carousel-control:hover,
.chez-pdp .u-section-1 .u-carousel-control:focus-visible {
  opacity: 0.95;
}

/* The glyph sits inside a <span> that the theme leaves as a block with a
   25.6px line-height, so it rode the text baseline instead of the centre
   of the circle. The span becomes the centring box. */
.chez-pdp .u-section-1 .u-carousel-control > span[aria-hidden],
.chez-pdp .u-section-1 .u-carousel-control > span:not(.sr-only) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 0 !important;
}

.chez-pdp .u-section-1 .u-carousel-control .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0);
}

.chez-pdp .u-section-1 .u-carousel-control svg {
  width: 13px !important;
  height: 13px !important;
  display: block !important;
}

.chez-pdp .u-section-1 .u-carousel-control-prev {
  left: 10px !important;
}

.chez-pdp .u-section-1 .u-carousel-control-next {
  right: 10px !important;
}

@media (max-width: 575px) {
  .chez-pdp .u-section-1 .u-carousel-control {
    width: 32px !important;
    height: 32px !important;
  }

  .chez-pdp .u-section-1 .u-carousel-control svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* The one number the site claims. Generated by generate.py from
   houses-data.json, so it always equals the number of cards in the
   Portfolio Vendido grid below it and can never drift. It is set in the
   heading's own style - a number is not a decoration. */
.chez-trust-figure {
  color: inherit;
  font: inherit;
  font-weight: inherit;
}