.elementor-21 .elementor-element.elementor-element-994e8c9{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-21 .elementor-element.elementor-element-994e8c9.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-21 .elementor-element.elementor-element-bb07465 > .elementor-widget-container{margin:0px 0px 5px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS *//* ═══ Villa Okeanos — mobile & layout fixes · 2026-07-24 ═══
   Applied as PAGE-LEVEL custom CSS on page 21 (Home), so it is one place
   to review or remove. Every value measured against the v3 static source
   at projects/okeanos-redesign/v3, not guessed. */

/* 1 — FAQ questions and gallery card titles overflowed their box.
   Hello Elementor's base reset puts `white-space:nowrap` on every <button>,
   and .faq__q / .gcat are buttons. The static v3 build had no such reset, so
   they wrapped naturally. At 390px the questions ran up to 138px past the
   edge and the FAQ block scrolled sideways. v3 measures 0px overflow. */
.elementor-21 .faq__q,
.elementor-21 .gcat,
.elementor-21 .gcat__title { white-space: normal; }

/* 2 — The colour bands (rates, reviews, guide, final CTA) were inset ~22px
   instead of bleeding to the screen edge, and their content was
   double-guttered: 302px instead of 346px at 390px, and 1233px instead of
   1336px at 1440px.
   Cause: the wrapper b4baaef carries the same clamp() gutter that each of
   its child sections already carries, so --pad-x was applied twice. In v3
   each section owns its gutter and there is no padded wrapper above it. */
.elementor-21 .elementor-element.elementor-element-b4baaef.e-con-full {
  padding-left: 0;
  padding-right: 0;
}
/* c1314f2 is the only child with no gutter of its own — it relied on the
   wrapper, so it needs one now. NOTE: 05296b0 (the photo strip) is
   deliberately full-bleed in v3 (`<section class="strip">` with no
   .container) and must NOT be given a gutter.
   The long body.elementor-page-21 is deliberate: b4baaef's own element CSS carries
   `body.elementor-page-21 > .e-con:nth-child(1){padding:0}` at specificity (0,5,0), which
   beat a shorter rule. This is (0,7,0) so it wins on specificity, not order. */
.elementor-21 .elementor-element.elementor-element-b4baaef
  > .e-con.e-con-full.e-child.elementor-element-c1314f2 {
  padding-left: clamp(22px, 3.6vw, 100px);
  padding-right: clamp(22px, 3.6vw, 100px);
}

/* 3 — The rates answer sat at its clamp floor (24px Cormorant), too heavy
   for a long paragraph on a phone. This is a deliberate departure from v3,
   which also renders 24px here — the client asked for smaller. */
@media (max-width: 640px) {
  .elementor-21 .elementor-element.elementor-element-e866eb7.vo-ranswer.elementor-widget p {
    font-size: 20px;
    line-height: 1.38;
  }
}

/* 4 — "Check Availability" sat flush against the policy text above it: its
   flex parent (6e3b234) has gap:0, so nothing separated them. v3 has no
   CTA in this section, so 30px is chosen to match the section's rhythm. */
.elementor-21 .elementor-element.elementor-element-d4dde4c.vo-wbtn.elementor-widget {
  margin-top: 30px;
}


/* ═══ Villa Okeanos — "Final website edits" spacing · 2026-07-27 ═══
   Appended to page 21 custom CSS. Client marked these with arrows in the doc. */

/* image1 — "FEATURED AMENITIES" butted against the intro paragraph.
   Add breathing room above the 4-group amenities block. */
.elementor-21 .elementor-element.elementor-element-32dcfb9 { margin-top: 34px; }

/* image2 — the large empty void between the Amenities section and "What does it cost?".
   Each section carried ~133px of padding at this width (266px combined). Halve it on
   just this transition; every other section keeps the full rhythm. */
.elementor-21 .elementor-element.elementor-element-48c910f { padding-bottom: clamp(48px, 5vw, 80px); }
.elementor-21 .elementor-element.elementor-element-572e903 { padding-top: clamp(48px, 5vw, 80px); }

/* Villa Okeanos — remove the light gap between the final CTA and the footer · 2026-07-27
   The content wrapper b4baaef had 133px transparent bottom padding, showing the light
   page bg as a band between the dark CTA band and the dark footer. Zero it so the CTA
   meets the footer cleanly. (Its side padding was already zeroed for full-bleed bands.) */
.elementor-21 .elementor-element.elementor-element-b4baaef.e-con-full { padding-bottom: 0; }

/* Tighten the final CTA's bottom padding so the buttons sit closer to the footer
   (was 108px symmetric; trim just the bottom since the footer follows). */
.elementor-21 .elementor-element.elementor-element-d819995 { padding-bottom: clamp(40px, 4vw, 56px); }/* End custom CSS */