/* ============================================================
   Sicily4u — Redesign v2
   Design language inspired by thethinkingtraveller.com:
   stone-white ground, near-black ink, one hot accent,
   high-contrast light serif display mixed roman/italic,
   neo-grotesque uppercase micro-type, generous air.
   ============================================================ */

/* ============================================================
   TABLE OF CONTENTS (in page order)
   1.  Design tokens
   2.  Global reset & base elements
   3.  Containers
   4.  Typography
   5.  Buttons
   6.  Utilities
   7.  Header (incl. mobile hamburger + dropdown panel)
   8.  Hero
   9.  Search bar (homepage MotoPress search)
   10. Promise
   11. Feature panels
   12. Rail (shared carousel head/track - Collections/Destinations/
       Featured Villas)
   13. Cards (shared - collection-card/villa-card)
   14. Featured villas
   15. Destinations
   16. Story
   17. Specialists
   18. Quote
   19. Footer
   20. Villa detail (single villa page - only the Gallery is built so
       far; the rest of this section stays dormant reference CSS)
   21. Journal / blog (not built yet this round - dormant reference CSS)
   22. Filter bar (still not built - dormant reference ".filters"/".chip"
       CSS; the real "/sicily-villas/" filter panel is a different real
       component, see 23)
   23. Villas page (".s4u-listing-grid" - real MotoPress grid/card,
       the default for every real "[mphb_rooms]" listing except
       /search-results/ + /search-results-without-dates/ - plus the
       real Sicily4U filter panel reskin, still /sicily-villas/-only)

   Each section's own responsive (max-width:1080px / max-width:680px)
   rules sit directly below that section's own rules, instead of in one
   big shared media query at the end of the file. A few reference rules
   share one selector list across more than one section (e.g. the
   original ".grid-villas,.post-grid{...}" tablet rule) - those were
   split into one single-selector copy per section, each left exactly
   where it was value-for-value; a comment marks every such split so
   its sibling copy is easy to find. Splitting a comma-separated
   selector into identical single-selector rules changes nothing about
   how a browser renders them. Order relative to the same selector's
   own other breakpoint(s) is preserved everywhere (unconditional rule,
   then max-width:1080px, then max-width:680px), so the cascade result
   is unchanged from before this reorganization.
   ============================================================ */

/* ── 1. Design tokens ─────────────────────────────────────── */
:root{
  --stone:#FEFCFA; /* warm off-white ground */
  --sand:#F3EEE6; /* card cream */
  --ink:#050817; /* near-black navy */
  --ink-soft:#4A4E5C;
  --muted:#7A7E8B;
  --citron:#FFF853; /* accent — Sicilian lemon */
  --line:#E6E1D8;
  --line-dark:rgba(254,252,250,.16);
  --serif:'Bodoni Moda',Baskerville,'Times New Roman',serif;
  --sans:'Hanken Grotesk',Verdana,system-ui,sans-serif;
  --gut:clamp(20px,4vw,56px);
  --max:1440px;
}


/* ── 2. Global reset & base elements ──────────────────────── */
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{
  display:block;
  max-width:100%;
}
a{
  color:inherit;
  text-decoration:none;
}
::selection{
  background:var(--citron);
  color:var(--ink);
}

/* ── 3. Containers ────────────────────────────────────────── */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
}
.wrap-narrow{
  max-width:900px;
  margin:0 auto;
  padding:0 var(--gut);
}
section{
  padding:clamp(72px,9vw,140px) 0;
}

/* ── 4. Typography ────────────────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-optical-sizing:auto;
  line-height:.98;
  letter-spacing:-.012em;
  margin:0;
}
.display .it{
  font-style:italic;
}
.display .up{
  text-transform:uppercase;
  letter-spacing:.005em;
}
h1.display{
  font-size:clamp(2.9rem,7.4vw,6.6rem);
}
h2.display{
  font-size:clamp(2.1rem,4.4vw,4rem);
}
h3.display{
  font-size:clamp(1.5rem,2.2vw,2.2rem);
}

.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  font-size:.76rem;
  letter-spacing:.2em;
  font-weight:500;
  color:var(--ink);
  display:block;
}
.eyebrow.light{
  color:rgba(254,252,250,.8);
}
.lede{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:60ch;
}
.small{
  font-size:.86rem;
  color:var(--muted);
}

/* ── 5. Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:18px 34px;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.btn-solid{
  background:var(--ink);
  color:var(--stone);
}
.btn-solid:hover{
  background:#1b2036;
}
.btn-outline{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
}
.btn-outline:hover{
  background:var(--ink);
  color:var(--stone);
}
.btn-ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.7);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.14);
  border-color:#fff;
}
.btn-block{
  width:100%;
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.15em;
  font-weight:500;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.link-arrow svg{
  transition:transform .3s ease;
}
.link-arrow:hover{
  border-color:currentColor;
}
.link-arrow:hover svg{
  transform:translateX(5px);
}

/* ── 6. Utilities (WordPress-specific, not in the reference) ──
   Generic accessibility helper - visually hides content while keeping
   it in the accessibility tree. Currently only used by the footer's
   newsletter widget (functions.php hides an optional widget title with
   it), kept here rather than inside the Footer section below because
   it isn't footer-specific and any future component can reuse it. */
.screen-reader-text{
  position:absolute!important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── 7. Header ────────────────────────────────────────────── */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:60;
  color:#fff;
  transition:background .35s ease,color .35s ease,box-shadow .35s ease;
}
.site-header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.wordmark{
  font-family:var(--sans);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.16em;
  font-size:.95rem;
  white-space:nowrap;
}
.wordmark .n{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
}
.site-nav{
  display:flex;
  gap:2rem;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:500;
}
.site-nav a{
  opacity:.9;
  padding:4px 0;
  border-bottom:1px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current]{
  opacity:1;
  border-color:currentColor;
}
.header-tools{
  display:flex;
  align-items:center;
  gap:1.2rem;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#39C77E;
  display:inline-block;
  margin-right:.4rem;
}
.site-header.solid{
  background:var(--stone);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}
.site-header.static{
  position:sticky;
  background:var(--stone);
  color:var(--ink);
  box-shadow:0 1px 0 var(--line);
}

/* ── Header additions (WordPress-specific, not in the reference) ──
   The reference header uses a plain text ".wordmark" logo and a flat
   list of <a> tags for ".site-nav". This theme needs two logo images
   (white/dark) and the real wp_nav_menu() markup instead, so a small
   amount of extra CSS bridges those two differences without touching
   any of the reference's own header rules above. */
.s4u-logo{
  position:relative;
  display:inline-block;
  width:130px;
  height: 90px;
}

.s4u-logo__img{
  position:absolute;
  top:0;
  left: -30px;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  transition:opacity .35s ease;
}
.s4u-logo__dark{
  opacity:0;
}
.site-header.solid .s4u-logo__white{
  opacity:0;
}
.site-header.solid .s4u-logo__dark{
  opacity:1;
}

/* wp_nav_menu() renders <ul><li><a>, the reference nav is flat <a> tags
   directly inside ".site-nav" - move the flex/gap layout down to the
   TOP-LEVEL <ul> only (".site-nav > ul") so the existing ".site-nav a"
   rules (hover, aria-current, spacing) keep working unchanged on the
   real menu markup. Nested <ul class="sub-menu"> elements are handled
   separately below as dropdowns, not as extra flex rows. */
.site-nav > ul{
  display:flex;
  gap:2rem;
  list-style:none;
  margin:0;
  padding:0;
}
/* Items with a dropdown arrow use display:inline-flex on their <a> (see
   below), which has a different inline baseline than the plain <a> used
   by children-less items - making each <li> itself a flex row that
   centers its one <a> child keeps every top-level item on the exact
   same vertical line regardless of whether it has an arrow or not. */
.site-nav > ul > li{
  position:relative;
  display:flex;
  align-items:center;
}

/* Dropdown submenus: standard WordPress ".menu-item-has-children" /
   ".sub-menu" markup, hidden by default and absolutely positioned so
   they never add horizontal flex siblings to the top-level row. */
.site-nav .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:70;
  min-width:220px;
  margin:0;
  padding:10px 0;
  list-style:none;
  background:var(--stone);
  color:var(--ink);
  box-shadow:0 20px 40px -20px rgba(5,8,23,.35);
}
.site-nav .sub-menu li{
  position:relative;
}
.site-nav .sub-menu a{
  display:block;
  padding:10px 22px;
  opacity:1;
  border-bottom:0;
  font-size:.76rem;
  letter-spacing:.1em;
  white-space:nowrap;
}
.site-nav .sub-menu a:hover{
  background:var(--sand);
}
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu{
  display:block;
}

/* Nested (2nd level) submenu opens to the right of its parent item
   instead of stacking below it, so it can't spill out either. */
.site-nav .sub-menu .sub-menu{
  top:0;
  left:100%;
}

/* Small arrow indicator on every dropdown trigger - the exact same
   chevron shape/size as the language switcher's <svg> (10x6,
   stroke-width 1.4), reproduced here as a CSS mask so it can be used on
   wp_nav_menu()'s plain <a> tags without a custom walker. Down for
   top-level items (dropdown opens below), rotated to point right for
   items inside a submenu (nested dropdown opens to the side, see the
   rule above) - same shape, just rotated, so every dropdown trigger in
   the header looks identical. */
.site-nav > ul > li.menu-item-has-children > a{
  display:inline-flex;
  align-items:center;
  gap:.4em;
}
.site-nav .sub-menu li.menu-item-has-children > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6em;
}
.site-nav .menu-item-has-children > a::after{
  content:"";
  display:inline-block;
  flex:0 0 auto;
  width:10px;
  height:6px;
  background-color:currentColor;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="black" stroke-width="1.4"/></svg>') center/contain no-repeat;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="black" stroke-width="1.4"/></svg>') center/contain no-repeat;
  transition:transform .25s ease;
}
.site-nav > ul > li.menu-item-has-children:hover > a::after,
.site-nav > ul > li.menu-item-has-children:focus-within > a::after{
  transform:rotate(180deg);
}
.site-nav .sub-menu li.menu-item-has-children > a::after{
  transform:rotate(-90deg);
}

/* Language switcher (replaces the reference's static ".lang" span).
   Same CSS-only hover/focus-within dropdown pattern as the nav
   submenus above - no JavaScript needed. */
.s4u-lang{
  position:relative;
}
.s4u-lang__toggle{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:none;
  border:0;
  margin:0;
  padding:0;
  font:inherit;
  color:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  cursor:pointer;
}
.s4u-lang__arrow{
  transition:transform .25s ease;
}
.s4u-lang:hover .s4u-lang__arrow,
.s4u-lang:focus-within .s4u-lang__arrow{
  transform:rotate(180deg);
}
.s4u-lang__menu{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  z-index:70;
  margin:10px 0 0;
  padding:8px 0;
  list-style:none;
  min-width:140px;
  background:var(--stone);
  color:var(--ink);
  box-shadow:0 20px 40px -20px rgba(5,8,23,.35);
  text-align:left;
}
.s4u-lang__menu a{
  display:block;
  padding:8px 18px;
  font-size:.76rem;
  letter-spacing:.08em;
  opacity:1;
  border-bottom:0;
}
.s4u-lang__menu a:hover{
  background:var(--sand);
}
.s4u-lang:hover .s4u-lang__menu,
.s4u-lang:focus-within .s4u-lang__menu{
  display:block;
}

/* Fixed/sticky header must clear the WordPress admin bar when logged
   in - core adds the "admin-bar" body class only in that case, so this
   never applies for logged-out visitors. */
body.admin-bar .site-header{
  top:32px;
}
@media screen and (max-width:782px){
  body.admin-bar .site-header{
    top:46px;
  }
  .s4u-logo__img{
  left: -8px;
  }
}

/* Responsive (Header, max-width:1080px) */
@media(max-width:1080px){
  .site-nav{
    display:none;
  }
}
/* Responsive (Header, max-width:680px) */
@media(max-width:680px){
  .header-tools .s4u-lang{
    display:none;
  }
}

/* ── Mobile header + menu (WordPress-specific, not in the
   reference) ──────────────────────────────────────────────
   Desktop header/nav above is completely untouched. ≤1080px (the exact
   breakpoint the reference's own ".site-nav{display:none}" rule above
   already uses) a hamburger replaces the desktop nav, and a real
   wp_nav_menu() (rendered a second time in header.php, own menu_id/
   menu_class - same real data, not hardcoded) drops down below the
   header in ".s4u-mobile-menu". */
.s4u-menu-toggle{
  display:none;
  position:relative;
  width:26px;
  height:18px;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:inherit;
}
.s4u-menu-toggle__line{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:currentColor;
  transition:transform .25s ease,opacity .2s ease,top .25s ease;
}
.s4u-menu-toggle__line:nth-child(1){
  top:0;
}
.s4u-menu-toggle__line:nth-child(2){
  top:8px;
}
.s4u-menu-toggle__line:nth-child(3){
  top:16px;
}
/* Hamburger -> X, pure CSS transform, no icon library. */
.site-header.s4u-menu-open .s4u-menu-toggle__line:nth-child(1){
  top:8px;
  transform:rotate(45deg);
}
.site-header.s4u-menu-open .s4u-menu-toggle__line:nth-child(2){
  opacity:0;
}
.site-header.s4u-menu-open .s4u-menu-toggle__line:nth-child(3){
  top:8px;
  transform:rotate(-45deg);
}

/* Panel: hidden/collapsed by default, dropped down below the header bar
   when open. "max-height" (not "display") is what is transitioned, for
   a short, simple open/close animation without a JS height measurement
   or an animation library. */
.s4u-mobile-menu{
  max-height:0;
  overflow:hidden;
  opacity:0;
  background:var(--stone);
  color:var(--ink);
  transition:max-height .35s ease,opacity .3s ease;
}
.site-header.s4u-menu-open .s4u-mobile-menu{
  max-height:80vh;
  opacity:1;
  overflow-y:auto;
}

.s4u-mobile-nav__menu{
  list-style:none;
  margin:0;
  padding:12px 0;
}
.s4u-mobile-nav__menu li{
  position:relative;
  border-bottom:1px solid var(--line);
}
.s4u-mobile-nav__menu > li > a{
  display:block;
  padding:20px 0;
  font-family:var(--sans);
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:500;
  color:var(--ink);
}

/* Items with a real submenu are laid out as two flex rows inside the
   <li> (label + toggle side by side, then the submenu wraps to a full
   width row below) - NOT via absolute positioning, so the toggle button
   sizes itself to just the label row and never stretches down once the
   submenu opens and the <li> grows taller. */
.s4u-mobile-nav__menu li.menu-item-has-children{
  display:flex;
  flex-wrap:wrap;
}
.s4u-mobile-nav__menu li.menu-item-has-children > a{
  flex:1 1 auto;
}
.s4u-mobile-nav__menu li.menu-item-has-children > .sub-menu{
  flex:0 0 100%;
}
/* Real submenu items (WordPress ".sub-menu"/".menu-item-has-children"),
   just closed by default and indented/toned down visually. */
.s4u-mobile-nav__menu .sub-menu{
  max-height:0;
  overflow:hidden;
  opacity:0;
  list-style:none;
  margin:0;
  padding:0 0 0 20px;
  transition:max-height .3s ease,opacity .25s ease;
}
.s4u-mobile-nav__item--open > .sub-menu{
  max-height:600px;
  opacity:1;
  padding-bottom:14px;
}
.s4u-mobile-nav__menu .sub-menu a{
  display:block;
  padding:9px 0;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--ink-soft);
}
/* Tap-toggle button, injected next to (not inside) the real parent
   link by assets/js/main.js - the link itself stays a normal, fully
   clickable real link. Same "+"/"–" convention as the footer's own
   ".foot-groups" accordion, for visual consistency. */
.s4u-mobile-nav__toggle{
  flex:0 0 48px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--muted);
}
.s4u-mobile-nav__toggle::after{
  content:"+";
}
.s4u-mobile-nav__toggle[aria-expanded="true"]::after{
  content:"–";
}

/* Responsive (Mobile header, max-width:1080px) - same breakpoint the
   reference's own ".site-nav{display:none}" rule above already uses. */
@media(max-width:1080px){
  .s4u-menu-toggle{
    display:block;
  }
  .s4u-header-status,
  .s4u-header-phone{
    display:none;
  }
}

/* ── 8. Hero ──────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,8,23,.42) 0%,rgba(5,8,23,.12) 42%,rgba(5,8,23,.5) 100%);
}
.hero-inner{
  position:relative;
  z-index:2;
  padding:120px var(--gut) 200px;
}
.hero h1{
  color:#fff;
  text-shadow:0 2px 40px rgba(5,8,23,.25);
}
.hero h1 span{
  display:block;
}
.hero .btn{
  margin-top:2.4rem;
}

/* compact page hero (interior pages) */
.page-hero{
  position:relative;
  min-height:62svh;
  display:flex;
  align-items:flex-end;
  color:#fff;
  overflow:hidden;
}
.page-hero .hero-inner{
  padding:0 var(--gut) clamp(40px,6vw,80px);
  text-align:left;
  width:100%;
}
.page-hero h1{
  color:#fff;
}
/* Reference has this as an inline style on the "/sicily-villas/" hero h1. */
.s4u-villas-hero-title{
  margin-top:1rem;
}



/* =========================================================
   Homepage MotoPress search
   ========================================================= */

.s4u-home-search {
    position: relative;
    z-index: 10;
    display: block;
    max-width: 1180px;
    margin: -46px auto 0;
    background: var(--stone);
    box-shadow: 0 30px 70px -40px rgba(5, 8, 23, .4);
}

.s4u-home-search .mphb_sc_search-wrapper {
    width: 100%;
    margin: 0;
}


/* Main layout */
.s4u-home-search .mphb_sc_search-form {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.15fr)
        minmax(160px, .75fr)
        minmax(160px, .75fr)
        minmax(150px, .7fr)
        auto;

    width: 100%;
    height: 96px;
    margin: 0;
    padding: 0;
}


/* Hide MotoPress helper */
.s4u-home-search .mphb-required-fields-tip {
    display: none !important;
}

.s4u-home-search .mphb_sc_search-form > p {
    margin: 0;
}


/* ---------------------------------------------------------
   Desktop field positions
   --------------------------------------------------------- */

.s4u-home-search .mphb_sc_search-locations {
    grid-column: 1;
    grid-row: 1;
}

.s4u-home-search .mphb_sc_search-check-in-date {
    grid-column: 2;
    grid-row: 1;
}

.s4u-home-search .mphb_sc_search-check-out-date {
    grid-column: 3;
    grid-row: 1;
}

.s4u-home-search .mphb_sc_search-adults {
    grid-column: 4;
    grid-row: 1;
}

.s4u-home-search .mphb_sc_search-submit-button-wrapper {
    grid-column: 5;
    grid-row: 1;
}


/* ---------------------------------------------------------
   Field cells
   --------------------------------------------------------- */

.s4u-home-search .mphb_sc_search-locations,
.s4u-home-search .mphb_sc_search-check-in-date,
.s4u-home-search .mphb_sc_search-check-out-date,
.s4u-home-search .mphb_sc_search-adults {
    box-sizing: border-box;
    min-width: 0;
    height: 96px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;

    padding: 22px 26px 12px;

    border-right: 1px solid var(--line);
    background: var(--stone);

    text-align: left;
}


/* Remove MotoPress BR spacing */
.s4u-home-search .mphb_sc_search-form p > br {
    display: none;
}


/* ---------------------------------------------------------
   Labels
   --------------------------------------------------------- */

.s4u-home-search label {
    display: block;
    width: 100%;

    margin: 0 0 9px;
    padding: 0;

    font-family: var(--sans);
    font-size: .66rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: left;

    color: var(--muted);
}

.s4u-home-search label abbr {
    display: none !important;
}


/* ---------------------------------------------------------
   Inputs / selects
   --------------------------------------------------------- */

.s4u-home-search select,
.s4u-home-search input[type="text"],
.s4u-home-search .mphb-datepick {
    display: block;

    width: 100%;
    height: 22px;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0;
    outline: 0;

    background: transparent;

    font-family: var(--sans);
    font-size: .95rem;
    line-height: 22px;
    text-align: left;

    color: var(--ink);

    box-shadow: none;

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.s4u-home-search select {
    text-align-last: left;
}


/* ---------------------------------------------------------
   Dates pair
   --------------------------------------------------------- */

.s4u-home-search .mphb_sc_search-check-in-date {
    position: relative;
    padding-left: 26px;
    padding-right: 10px;
}

.s4u-home-search .mphb_sc_search-check-out-date {
    position: relative;
    padding-left: 10px;
}

.s4u-home-search .mphb_sc_search-check-in-date::before,
.s4u-home-search .mphb_sc_search-check-out-date::before {
    content: "Dates";

    display: block;
    width: 100%;

    margin: 0 0 9px;

    font-family: var(--sans);
    font-size: .66rem;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: left;

    color: var(--muted);
}

.s4u-home-search .mphb_sc_search-check-out-date::before {
    visibility: hidden;
}


/* Keep real labels for accessibility */
.s4u-home-search .mphb_sc_search-check-in-date label,
.s4u-home-search .mphb_sc_search-check-out-date label {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* ---------------------------------------------------------
   Search button
   --------------------------------------------------------- */

.s4u-home-search .mphb_sc_search-submit-button-wrapper {
    height: 96px;
    padding: 0;
    border-right: 0;
}

.s4u-home-search .mphb_sc_search-submit-button-wrapper .button {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0 clamp(24px, 4vw, 52px);

    border: 0;
    border-radius: 0;

    background: var(--ink);
    color: var(--stone);

    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;

    cursor: pointer;

    transition: background .25s;
}

.s4u-home-search .mphb_sc_search-submit-button-wrapper .button:hover {
    background: #1b2036;
}


/* Keep this custom rule */
#mphb_adults-mphb-search-form-6a8eebfc93615 {
    padding: 0 26px 0 0;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1080px) {

    .s4u-home-search {
        margin-top: -30px;
    }

    .s4u-home-search .mphb_sc_search-form {
        grid-template-columns: 1fr 1fr;
        height: auto;
    }

    .s4u-home-search .mphb_sc_search-locations {
        grid-column: 1;
        grid-row: 1;
    }

    .s4u-home-search .mphb_sc_search-adults {
        grid-column: 2;
        grid-row: 1;
    }

    .s4u-home-search .mphb_sc_search-check-in-date {
        grid-column: 1;
        grid-row: 2;
    }

    .s4u-home-search .mphb_sc_search-check-out-date {
        grid-column: 2;
        grid-row: 2;
    }

    .s4u-home-search .mphb_sc_search-submit-button-wrapper {
        grid-column: 1 / -1;
        grid-row: 3;
        height: 64px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 680px) {

    .s4u-home-search .mphb_sc_search-locations {
        grid-column: 1 / -1;
        grid-row: 1;

        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .s4u-home-search .mphb_sc_search-check-in-date {
        grid-column: 1;
        grid-row: 2;

        border-bottom: 1px solid var(--line);
    }

    .s4u-home-search .mphb_sc_search-check-out-date {
        grid-column: 2;
        grid-row: 2;

        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .s4u-home-search .mphb_sc_search-adults {
        grid-column: 1 / -1;
        grid-row: 3;

        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .s4u-home-search .mphb_sc_search-submit-button-wrapper {
        grid-column: 1 / -1;
        grid-row: 4;
    }
}

/* ── 10. Numbered promise ─────────────────────────────────── */
.centred{
  text-align:center;
}
.promise-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,4vw,64px);
  margin-top:clamp(40px,5vw,72px);
  text-align:left; /* override the ".centred" wrap ancestor - reference uses an inline style for this, moved here to keep the markup free of inline styles */
}
.promise-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.8rem 1.1rem;
  align-items:start;
}
.promise-item .num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(3rem,4.4vw,4.4rem);
  line-height:.8;
  color:var(--ink);
}
.promise-item h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.4rem,1.9vw,1.9rem);
  line-height:1.1;
  margin:0;
  align-self:center;
}
.promise-item p{
  grid-column:2;
  margin:.4rem 0 0;
  color:var(--ink-soft);
  font-size:.98rem;
}
.actions{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:clamp(40px,5vw,64px);
}
.trust{
  display:flex;
  gap:clamp(24px,4vw,56px);
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  margin-top:clamp(36px,4vw,56px);
}
.trust .badge{
  text-align:center;
}
.trust .badge b{
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:1.9rem;
  line-height:1;
}
.trust .badge span{
  display:block;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  margin-top:.5rem;
}

/* Responsive (Promise, max-width:1080px) */
@media(max-width:1080px){
  .promise-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
}

/* ── 11. Feature panels (image + offset card) ─────────────── */
/* Reference uses an inline style="padding:0" on the wrapping <section> -
   this class replaces it so the markup stays free of inline styles. */
.s4u-feature-panels-section{
  padding:0;
}
.panels{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.panels::-webkit-scrollbar{
  display:none;
}
.panel{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:start;
  min-height:min(78svh,660px);
  display:flex;
  align-items:center;
  background-size:cover;
  background-position:center;
}
.panel .card{
  background:var(--sand);
  max-width:min(520px,84vw);
  margin-left:clamp(20px,7vw,110px);
  padding:clamp(30px,3.4vw,52px);
}
.panel .card h2{
  margin:.6rem 0 1rem;
}
.panel .card p{
  color:var(--ink-soft);
  margin:0 0 1.8rem;
  font-size:.98rem;
  line-height:1.75;
}

/* ── 12. Rail (shared horizontal card carousel head/track -
   Collections rail, Destinations, Featured villas heading row) ─── */
/* Reference uses an inline style="margin-top:1rem" on the heading next
   to the eyebrow in every ".rail-head" section (Collections,
   Destinations, ...) - generic rule here so it works everywhere this
   heading pattern is reused, without inline styles or a one-off class. */
.rail-head .display{
  margin-top:1rem;
}
.rail-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2.4rem;
}
.rail{
  display:flex;
  gap:clamp(14px,1.6vw,24px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  padding-bottom:4px;
}
.rail::-webkit-scrollbar{
  display:none;
}
.rail-item{
  flex:0 0 clamp(240px,26vw,340px);
  scroll-snap-align:start;
}
.rail-nav{
  display:flex;
  gap:10px;
}
.rail-nav button{
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .25s,border-color .25s;
}
.rail-nav button:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--stone);
}

/* Responsive (Rail, max-width:680px) */
@media(max-width:680px){
  .rail-nav{
    display:none;
  }
}

/* ── 13. Cards (shared - Collections rail cards / Featured villas
   cards) ──────────────────────────────────────────────────── */
.card-img{
  overflow:hidden;
  background:var(--sand);
}
.card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
a:hover .card-img img{
  transform:scale(1.055);
}

.collection-card .card-img{
  aspect-ratio:4/3;
}
.collection-card h3{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.15rem,1.5vw,1.5rem);
  letter-spacing:.01em;
  margin:1.3rem 0 .7rem;
}

.villa-card .card-img{
  aspect-ratio:4/5;
}
.villa-card .row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin:1.3rem 0 .5rem;
}
.villa-card .loc{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  font-weight:500;
}
.villa-card .price{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
}
.villa-card h3{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  font-size:clamp(1.1rem,1.4vw,1.45rem);
  margin:0;
  letter-spacing:.01em;
}
.villa-card .specs{
  margin-top:.6rem;
  font-size:.85rem;
  color:var(--muted);
}
.villa-card .specs span:not(:last-child)::after{
  content:"·";
  margin:0 .5rem;
  opacity:.6;
}

/* ── 14. Featured villas ──────────────────────────────────── */
/* Reference uses an inline style="padding-top:0" on the wrapping
   <section>, and style="max-width:38ch;margin:0" on the ".lede" next to
   the heading in this same ".rail-head" pattern. */
.s4u-featured-villas-section{
  padding-top:0;
}
.rail-head .lede{
  max-width:38ch;
  margin:0;
}
/* Reference is 3-up; the real homepage section shows 4 featured villas
   in a single desktop row. */
.grid-villas{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3vw,52px) clamp(16px,2vw,28px);
}

/* Responsive (Featured villas, max-width:1080px) - split from the
   reference's original ".grid-villas,.post-grid{...}" rule; the
   ".post-grid" (Journal) copy sits in that section below, same value. */
@media(max-width:1080px){
  .grid-villas{
    grid-template-columns:repeat(2,1fr);
  }
}
/* Responsive (Featured villas, max-width:680px) - split from the
   reference's original ".grid-villas,.post-grid,.dest-grid{...}" rule;
   the ".post-grid"/".dest-grid" copies sit in the Journal/Destinations
   sections, same value. */
@media(max-width:680px){
  .grid-villas{
    grid-template-columns:1fr;
  }
}

/* ── 15. Destinations ─────────────────────────────────────── */
/* Reference uses an inline style="padding-top:0" on the wrapping
   <section> (the "Collections" actions block above it already provides
   enough spacing). */
.s4u-destinations-section{
  padding-top:0;
}
/* Reference has 6 dummy destinations laid out 3-up; the real homepage
   section has 8 real destinations, so this is a 4-up grid on desktop
   (still resolving to a clean 4x2). Tablet/mobile breakpoints below are
   unchanged from the reference. */
.dest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.dest{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  color:#fff;
  display:flex;
  align-items:flex-end;
  padding:clamp(20px,2vw,32px);
}
.dest img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.2s cubic-bezier(.2,.7,.3,1);
}
.dest::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,8,23,0) 42%,rgba(5,8,23,.72) 100%);
}
.dest:hover img{
  transform:scale(1.06);
}
.dest .label{
  position:relative;
  z-index:2;
}
.dest .label small{
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--citron);
}
.dest .label h3{
  font-family:var(--serif);
  font-weight:400;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(1.2rem,1.7vw,1.7rem);
  margin:.5rem 0 0;
}

/* Responsive (Destinations, max-width:1080px) */
@media(max-width:1080px){
  .dest-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
/* Responsive (Destinations, max-width:680px) - split from the
   reference's original ".grid-villas,.post-grid,.dest-grid{...}" rule;
   see Featured villas/Journal for the sibling copies, same value. */
@media(max-width:680px){
  .dest-grid{
    grid-template-columns:1fr;
  }
}

/* ── 16. Story (reuses the ".specialists" 2-col layout below,
   own section) ────────────────────────────────────────────── */
/* Reference has these as inline styles on the #story section. */
.s4u-story-section{
  background:var(--sand);
}
.s4u-story-title{
  margin:1rem 0 1.4rem;
}
.s4u-story-button{
  margin-top:1.8rem;
}

/* ── 17. Specialists (dark band) ──────────────────────────── */
.band-dark{
  background:var(--ink);
  color:var(--stone);
}
.band-dark .lede{
  color:rgba(254,252,250,.72);
}
.band-dark .btn-outline{
  color:var(--stone);
  border-color:rgba(254,252,250,.5);
}
.band-dark .btn-outline:hover{
  background:var(--stone);
  color:var(--ink);
  border-color:var(--stone);
}
.specialists{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,5vw,90px);
  align-items:center;
}
.specialists .accent{
  font-family:var(--serif);
  text-transform:uppercase;
  font-weight:400;
  color:var(--citron);
  font-size:clamp(1.8rem,3.4vw,3.1rem);
  line-height:1.05;
  margin:0 0 1.2rem;
}
/* Reference has these as inline styles on the #specialists section. */
.s4u-specialists-title{
  margin-top:1.2rem;
}
.s4u-specialists-actions{
  justify-content:flex-start;
}
.s4u-specialists-call{
  background:var(--citron);
  color:var(--ink);
}
/* Shared by Story (16) and Specialists - reference uses the same
   inline image style on both sections' portrait photo. */
.s4u-story-image,
.s4u-specialists-image{
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%;
}

/* Responsive (Story + Specialists, max-width:1080px) - ".specialists"
   is the shared 2-col layout both sections use; split from the
   reference's original ".specialists,.villa-layout,.lead-post{...}"
   rule - the ".villa-layout"/".lead-post" copies sit in the Villa
   detail/Journal sections, same value. */
@media(max-width:1080px){
  .specialists{
    grid-template-columns:1fr;
  }
}

/* ── 18. Quote ────────────────────────────────────────────── */
.quote{
  text-align:center;
  background:var(--sand);
}
.quote blockquote{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(1.5rem,2.7vw,2.5rem);
  line-height:1.35;
  margin:1.8rem auto 1.8rem;
  max-width:22ch;
}
.quote .who{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
}

/* ── 19. Footer ───────────────────────────────────────────── */
.site-footer{
  background:var(--ink);
  color:var(--stone);
  padding-top:clamp(60px,7vw,100px);
}
.news{
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.news h2{
  margin:0 0 .8rem;
}
.news p{
  color:rgba(254,252,250,.7);
  margin:0 0 2rem;
}
.news form{
  display:flex;
  border:1px solid var(--line-dark);
  background:rgba(254,252,250,.05);
}
.news input{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color:var(--stone);
  font-family:var(--sans);
  font-size:.98rem;
  padding:20px 22px;
}
.news input::placeholder{
  color:rgba(254,252,250,.5);
}
.news button{
  background:transparent;
  border:0;
  color:var(--stone);
  padding:0 22px;
  cursor:pointer;
}
.news button:hover{
  color:var(--citron);
}
.socials{
  display:flex;
  gap:1.4rem;
  justify-content:center;
  margin:2.4rem 0 0;
  font-size:.76rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.socials a{
  color:rgba(254,252,250,.72);
}
.socials a:hover{
  color:var(--citron);
}

.foot-groups{
  margin-top:clamp(48px,6vw,80px);
  border-top:1px solid var(--line-dark);
}
.foot-groups details{
  border-bottom:1px solid var(--line-dark);
}
.foot-groups summary{
  list-style:none;
  cursor:pointer;
  padding:22px 0;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:500;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.foot-groups summary::-webkit-details-marker{
  display:none;
}
.foot-groups summary::after{
  content:"+";
  font-size:1.1rem;
  opacity:.7;
}
.foot-groups details[open] summary::after{
  content:"–";
}
.foot-groups ul{
  list-style:none;
  margin:0;
  padding:0 0 24px;
  display:grid;
  gap:.75rem;
  color:rgba(254,252,250,.72);
  font-size:.92rem;
}
.foot-groups a:hover{
  color:var(--citron);
}

.awards{
  text-align:center;
  padding:clamp(40px,5vw,64px) 0 0;
}
.awards p{
  font-family:var(--serif);
  font-size:clamp(1rem,1.5vw,1.35rem);
  margin:0 0 1.6rem;
}
.legal{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding:36px 0;
  margin-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--line-dark);
  font-size:.76rem;
  color:rgba(254,252,250,.6);
}
.legal a:hover{
  color:var(--citron);
}

/* Footer is a 1:1 hardcoded copy of the reference markup (footer.php)
   using ".site-footer"/".news"/".socials"/".foot-groups"/".awards"/
   ".legal" exactly as defined above - the rest of the footer needs no
   adapter CSS. Real WordPress data still comes back in later, separate
   steps, one piece at a time - this round is only the newsletter form.

   ".news form"/".news input" above already match the real widget's
   <form>/<input> by element type, so its border/background/colors/
   padding are inherited for free. This only adapts for the extra
   markup the real widget has that the reference's plain fake <form>
   didn't: each field wrapped in its own <p> (a real flex item instead
   of the <input> itself), a <label> around the email input, and a real
   <input type="submit"> instead of a <button>. */
.s4u-news-widget form p{
  margin:0;
}
.s4u-news-widget form p:first-of-type{
  flex:1;
}
.s4u-news-widget label{
  display:block;
}
.s4u-news-widget input[type="email"]{
  width:100%;
}
/* Real <input type="submit"> can't hold the reference's inline arrow
   <svg> (inputs are void elements - no children, and unlike <button>
   they don't render ::before/::after either), so the same arrow shape
   is reproduced as a CSS mask instead: the value text stays (screen
   readers still read it as the button's real accessible name), only
   hidden visually, and the icon is painted via background-color. */
.s4u-news-widget input[type="submit"]{
  width:66px;
  height:100%;
  padding:0;
  margin:0;
  border:0;
  cursor:pointer;
  font:inherit;
  color:transparent;
  background-color:var(--stone);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 18 12"><path d="M12 1l5 5-5 5M17 6H0" fill="none" stroke="black" stroke-width="1.2"/></svg>') no-repeat center;
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="12" viewBox="0 0 18 12"><path d="M12 1l5 5-5 5M17 6H0" fill="none" stroke="black" stroke-width="1.2"/></svg>') no-repeat center;
}
.s4u-news-widget input[type="submit"]:hover{
  background-color:var(--citron);
}

/* Responsive (Footer, max-width:680px) */
@media(max-width:680px){
  .legal{
    flex-direction:column;
    text-align:center;
  }
}

/* ── 20. Villa detail (single villa page - Gallery section (+ its
   "View all photos" button/full-screen viewer), ".spec-row" (Header
   facts section), ".prose" (Description section) and ".villa-layout"/
   ".enquiry" (Description + Booking sidebar 2-column layout) are
   active; the rest of this section's rules (".prose"'s own "The house
   in detail"/"Getting there" siblings, etc.) stay dormant reference
   CSS until their own round builds them) ────────────────────────── */
.gallery{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:8px;
  height:clamp(360px,62svh,640px);
}
.gallery .stack{
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:8px;
}
.gallery img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.villa-layout{
  display:grid;
  grid-template-columns:1.6fr .9fr;
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.spec-row{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,48px);
  padding:26px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:2.4rem 0;
}
.spec-row div b{
  display:block;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:400;
  line-height:1;
}
.spec-row div span{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.prose p{
  color:var(--ink-soft);
  line-height:1.85;
  margin:0 0 1.3rem;
  max-width:62ch;
}
.feature-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.85rem 2rem;
}
.feature-list li{
  font-size:.94rem;
  color:var(--ink-soft);
  padding-left:1.3rem;
  position:relative;
}
.feature-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:1px;
  background:var(--ink);
}
.enquiry{
  background:var(--sand);
  padding:clamp(26px,2.6vw,38px);
  position:sticky;
  top:96px;
}
.enquiry .from{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.enquiry .amount{
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.8rem);
  line-height:1;
  margin:.5rem 0 .3rem;
}
.enquiry .per{
  font-size:.86rem;
  color:var(--muted);
  margin-bottom:1.8rem;
}
.enquiry .f{
  margin-bottom:14px;
}
.enquiry label{
  display:block;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:6px;
}
.enquiry input,.enquiry select,.enquiry textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--line);
  background:var(--stone);
  font-family:var(--sans);
  font-size:.94rem;
  color:var(--ink);
  outline:none;
}
.enquiry input:focus,.enquiry select:focus,.enquiry textarea:focus{
  border-color:var(--ink);
}
.enquiry .note{
  font-size:.78rem;
  color:var(--muted);
  margin:1rem 0 0;
  text-align:center;
}

/* Booking sidebar sticky behaviour (new). ".enquiry" above already has
   the reference's own real "position:sticky;top:96px" (ported over
   unmodified, calibrated for this exact real header/logo/nav
   structure) - it just had nowhere to travel: ".villa-layout" uses
   "align-items:start", so its grid cells size to their OWN content
   instead of the row's full height, leaving ".villa-booking-sidebar"
   exactly as tall as ".enquiry" itself - zero room for a sticky child
   to move within. Stretching only this one grid cell (not
   ".villa-layout" itself, which stays untouched for the reference-
   verbatim left column) gives ".enquiry" the real row height (driven
   by the left column's description text) to stick within, and it
   naturally stops the moment ".villa-booking-sidebar" - i.e. the real
   end of ".villa-layout" - is reached. No JS, no "position:fixed".
   Harmless below the existing 1080px breakpoint, where ".enquiry"
   already switches to "position:static" (see that responsive rule
   further down) and "align-self" has no visible effect. */
.villa-booking-sidebar{
  align-self:stretch;
}

/* Same real admin-bar clearance ".site-header" itself already gets
   (see "body.admin-bar .site-header" above) - only relevant above
   1080px, since ".enquiry" is "position:static" (not sticky, "top" has
   no effect) below it already. */
body.admin-bar .enquiry{
  top:calc(96px + 32px);
}

/* "View all photos" button + full-screen photo viewer (new - not part
   of the villa-angelina.html reference, added as extra rules rather
   than edited into ".gallery" above so that block stays a byte-for-
   byte reference copy). */
.gallery{
  position:relative;
}
.s4u-gallery-view-all{
  position:absolute;
  right:20px;
  bottom:20px;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:12px 20px;
  background:rgba(5,8,23,.55);
  color:var(--stone);
  border:1px solid rgba(254,252,250,.5);
  font-family:var(--sans);
  font-size:.76rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s,border-color .25s;
}
.s4u-gallery-view-all:hover{
  background:rgba(5,8,23,.75);
  border-color:var(--stone);
}
.s4u-lightbox{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  background:rgba(5,8,23,.96);
  align-items:center;
  justify-content:center;
}
.s4u-lightbox.is-open{
  display:flex;
}
.s4u-lightbox__stage{
  width:min(88vw,1400px);
  height:min(84vh,900px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.s4u-lightbox__image{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}
.s4u-lightbox__close,
.s4u-lightbox__nav{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid rgba(254,252,250,.4);
  color:var(--stone);
  cursor:pointer;
  transition:background .25s,border-color .25s;
}
.s4u-lightbox__close:hover,
.s4u-lightbox__nav:hover{
  background:rgba(254,252,250,.12);
  border-color:var(--stone);
}
.s4u-lightbox__close{
  top:24px;
  right:24px;
  width:44px;
  height:44px;
  font-size:1.6rem;
  line-height:1;
}
.s4u-lightbox__nav{
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  font-size:2rem;
  line-height:1;
}
.s4u-lightbox__nav--prev{
  left:24px;
}
.s4u-lightbox__nav--next{
  right:24px;
}
.s4u-lightbox__counter{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.14em;
  color:var(--stone);
}
body.s4u-lightbox-open{
  overflow:hidden;
}

/* Description section - real WordPress entry content (new - the
   reference itself has no read-more/clamp mechanism, this is the "old
   working site" pattern re-implemented standalone). ".prose p" above
   already styles plain paragraphs verbatim from the reference; the
   rules below are new, scoped to real content that a plain
   ".prose"-only reference never had to handle (headings/bold section
   labels, bullet lists, links). */
.description-container{
  position:relative;
}
.short-description{
  max-height:1100px;
  overflow:hidden;
  position:relative;
  transition:max-height .5s ease;
}
/* "max-height:none" can't be animated by CSS transitions - a large
   fixed value (comfortably above any real villa description's real
   height) is used instead so the open/close actually animates smoothly.
   "overflow" stays "hidden" in both states on purpose - switching it to
   "visible" would make the text pop into view instantly, defeating the
   height transition. */
.short-description.is-expanded{
  max-height:6000px;
}
/* Fade-out over the last bit of the collapsed text, into the page
   background - hidden once expanded (nothing left to hint at). */
.short-description::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background:linear-gradient(to bottom, rgba(254,252,250,0), var(--stone));
  pointer-events:none;
  opacity:1;
  transition:opacity .3s ease;
}
.short-description.is-expanded::after{
  opacity:0;
}
.short-description strong,
.short-description h2,
.short-description h3,
.short-description h4{
  display:block;
  margin:2rem 0 .6rem;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:400;
  color:var(--ink);
}
.short-description ul{
  list-style:none;
  padding:0;
  margin:0 0 1.3rem;
}
.short-description ul li{
  position:relative;
  padding-left:1.3rem;
  color:var(--ink-soft);
  line-height:1.85;
  margin-bottom:.5rem;
}
.short-description ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.85em;
  width:8px;
  height:1px;
  background:var(--ink);
}
.short-description a{
  text-decoration:underline;
  text-underline-offset:2px;
}
.read-more-link{
  display:inline-block;
  margin-top:1.2rem;
  font-family:var(--sans);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.15em;
  text-transform:uppercase;
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  cursor:pointer;
}

/* Booking sidebar - real MotoPress classes only (new). Everything else
   inside ".enquiry" (background/padding/sticky/label/input/select/
   textarea/".note" above) is the reference's own reused, already-
   active CSS - these rules only cover what the reference's plain demo
   form never had to style: the real price line, the real "<p>" field
   wrappers' spacing (the reference used its own ".f" wrapper, the real
   form uses plain "<p>" tags instead), and the real submit button.
   Scoped under ".villa-booking-sidebar" so no other MotoPress form on
   the site (homepage search, search-results, checkout) is affected. */
.villa-booking-sidebar .mphb-regular-price{
  margin:0 0 1.8rem;
}
.villa-booking-sidebar .mphb-regular-price strong{
  display:block;
  font-size: 16px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:.5rem;
}
.villa-booking-sidebar .mphb-price,
.villa-booking-sidebar .mphb-regular-price>span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(2rem,3vw,2.8rem);
  line-height:1;
}
/* Real MotoPress period text ("for X nights"/"per night") - a separate
   sibling span next to ".mphb-price" (confirmed in motopress-hotel-
   booking/includes/core/helpers/price-helper.php), not a child of it,
   so it does not inherit the big serif price styling above on its own.
   Same small/muted treatment as the reference's own ".enquiry .per". */
.villa-booking-sidebar .mphb-price-period{
  display:block;
  font-family:var(--sans);
  font-size:.86rem;
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
}
.villa-booking-sidebar .mphb-booking-form p{
  margin:0 0 14px;
}

.mphb-price-period {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  margin-top: .5rem !important;

}

.mphb-price-period {
    border:none;

}
/* Real MotoPress form heading + required-fields note - hidden per
   request, not needed for this minimal sidebar design. Both are real
   MotoPress output (the heading is hooked, the tip is inline in
   mphb_tmpl_the_room_reservation_form() with no hook to unhook from),
   so CSS is the only way to remove either without touching plugin
   code - scoped to ".villa-booking-sidebar" only, no other MotoPress
   form on the site is affected. */
.villa-booking-sidebar .mphb-reservation-form-title,
.villa-booking-sidebar .mphb-booking-form .mphb-required-fields-tip{
  display:none;
}
.villa-booking-sidebar .mphb-booking-form br{
  display:none;
}
.villa-booking-sidebar .mphb-reserve-btn-wrapper{
  margin-top:1.4rem;
}
.villa-booking-sidebar .mphb-reserve-btn{
  display:block;
  width:100%;
  padding:18px 34px;
  background:var(--ink);
  color:var(--stone);
  border:1px solid var(--ink);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .25s;
}
.villa-booking-sidebar .mphb-reserve-btn:hover{
  background:#1b2036;
}

/* Responsive (Villa detail, max-width:1080px) */
@media(max-width:1080px){
  .enquiry{
    position:static;
  }
  /* Split from the reference's original
     ".specialists,.villa-layout,.lead-post{...}" rule - see
     Story/Specialists (17) for the ".specialists" copy and Journal (21)
     for the ".lead-post" copy, same value. */
  .villa-layout{
    grid-template-columns:1fr;
  }
}
/* Responsive (Villa detail, max-width:680px) */
@media(max-width:680px){
  .gallery{
    grid-template-columns:1fr;
    height:auto;
  }
  .gallery .stack{
    grid-template-columns:1fr 1fr;
    grid-template-rows:none;
  }
  .gallery img{
    height:220px;
  }
  .feature-list{
    grid-template-columns:1fr;
  }
}

/* "View all photos" button + full-screen photo viewer - mobile
   (new, same max-width:680px breakpoint as ".gallery" above). */
@media(max-width:680px){
  .s4u-gallery-view-all{
    right:12px;
    bottom:12px;
    padding:10px 14px;
    font-size:.7rem;
  }
  .s4u-lightbox__stage{
    width:94vw;
    height:70vh;
  }
  .s4u-lightbox__close{
    top:14px;
    right:14px;
    width:38px;
    height:38px;
  }
  .s4u-lightbox__nav{
    width:42px;
    height:42px;
    font-size:1.6rem;
  }
  .s4u-lightbox__nav--prev{
    left:10px;
  }
  .s4u-lightbox__nav--next{
    right:10px;
  }
}

/* ── 21. Journal / blog (not built yet this round, dormant
   reference CSS kept for later) ─────────────────────────────── */
.lead-post{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.lead-post .card-img{
  aspect-ratio:5/4;
}
.post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3vw,48px) clamp(16px,2vw,28px);
}
.post .card-img{
  aspect-ratio:3/2;
}
.post h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.2rem,1.5vw,1.5rem);
  margin:1.1rem 0 .6rem;
  line-height:1.2;
}
.post .kicker{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--muted);
}
.post p{
  color:var(--ink-soft);
  font-size:.94rem;
  margin:.4rem 0 1rem;
}

/* Responsive (Journal, max-width:1080px) - both split from reference
   rules shared with other sections (see Featured villas (14) for
   ".grid-villas" and Story/Specialists (17) + Villa detail (20) for
   ".specialists"/".villa-layout", same values). */
@media(max-width:1080px){
  .post-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .lead-post{
    grid-template-columns:1fr;
  }
}
/* Responsive (Journal, max-width:680px) - split from the reference's
   original ".grid-villas,.post-grid,.dest-grid{...}" rule; see
   Featured villas (14)/Destinations (15) for the other copies, same
   value. */
@media(max-width:680px){
  .post-grid{
    grid-template-columns:1fr;
  }
}

/* ── 22. Filter bar (taxonomy/search-results, not built yet this
   round, dormant reference CSS kept for later) ────────────────── */
.filters{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(32px,4vw,56px);
}
.chip{
  border:1px solid var(--line);
  background:transparent;
  font-family:var(--sans);
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:500;
  padding:11px 20px;
  cursor:pointer;
  transition:all .25s;
}
.chip:hover{
  border-color:var(--ink);
}
.chip[aria-pressed="true"]{
  background:var(--ink);
  color:var(--stone);
  border-color:var(--ink);
}
.result-count{
  margin-left:auto;
  font-size:.8rem;
  color:var(--muted);
}

/* ── 23. Villas page (/sicily-villas/) ────────────────────────
   The real per-card markup itself (image/permalink/location/price/
   title/guests/bedrooms/feature) is produced by this theme's own
   "hotel-booking/shortcodes/rooms/room-content.php" - MotoPress's own
   documented theme-override path for this exact card, confirmed
   read-only from the equivalent file in wp-content/themes/booklium/.
   That file/the "s4u_villas_loop_wrapper_open()" hook in functions.php
   make this the DEFAULT for every real "[mphb_rooms]" context except
   "/search-results/"/"/search-results-without-dates/" (see both
   files' own docblocks) - not "/sicily-villas/" only - so the CSS
   below is scoped to ".s4u-listing-grid", a class that ONLY ever
   exists on that same real wrapper (added by that same functions.php
   hook), rather than to a body/page-slug class - this keeps it working
   on every real context that wrapper appears on (present or future),
   without needing a new CSS rule/selector per page.

   It reuses the reference's own ".villa-card"/".card-img"/".row"/
   ".loc"/".price"/".specs" classes - already fully styled below under
   "13. Cards" - so no new per-card CSS is needed here at all, only the
   grid wrapper (".grid-villas" is ALSO the homepage's own Featured
   Villas class, with its own unrelated 4-column override - scoping to
   ".s4u-listing-grid" instead of bare ".grid-villas" is what keeps
   this from colliding with that hardcoded homepage section) and the
   real filter panel reskin (further below, still scoped to
   "/sicily-villas/" specifically - unrelated to this round's change,
   see that rule's own comment). "minmax(0,1fr)" (not plain "1fr")
   matches the homepage's own Featured Villas grid convention above -
   it caps each track's minimum at 0 instead of "auto", so a wide/tall
   image can't force its column wider than an even 1/3 share. */
.s4u-listing-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1080px){
  .s4u-listing-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:680px){
  .s4u-listing-grid{
    grid-template-columns:1fr;
  }
}

/* Confirmed via live DevTools inspection (the exact source rule,
   from the MotoPress plugin's own "mphb.min.css", v6.2.3.1):
     .mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type){
       margin-top:4em;
     }
   This is meant for that plugin CSS's own normal block-flow list
   style (margin-top creates the gap between stacked rows, skipped on
   the first one so the list doesn't start with extra space) - the
   "mphb-room-type" class is kept on each card only for the real
   filter JS's own selector (see room-content.php), not for this
   plugin-native spacing. CSS Grid does NOT collapse that margin the
   way block flow does - it just pushes every card except the real
   first one down inside its own grid cell, which is what made only
   the very first card look "higher" than the rest. The grid's own
   "gap" above already provides the real spacing between cards, so
   this plugin margin is only ever unwanted here - zeroed for every
   card. The extra ".mphb-room-type" in this selector (matching what
   is already on every real card) makes this rule's own specificity
   strictly higher than the plugin's, so it wins regardless of the
   plugin CSS's/this file's relative <head> order - no "!important"
   needed. */
.s4u-listing-grid > .villa-card.mphb-room-type{
  margin-top:0;
}

/* Real WordPress taxonomy-archive pagination (taxonomy.php's own
   the_posts_pagination() - a core template tag, not a Booklium/
   MotoPress-specific helper) - minimal styling only, matching the
   site's own editorial typography/spacing instead of the browser's
   default underlined blue links. The real "[mphb_rooms]" shortcode
   listing's own pagination (a different, plugin-rendered nav) is
   untouched - out of scope this round. */
.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  margin-top:clamp(32px,4vw,56px);
}
.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 .6rem;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.05em;
  color:var(--ink);
  border:1px solid var(--line);
  transition:background .25s,color .25s,border-color .25s;
}
.pagination a.page-numbers:hover{
  background:var(--ink);
  color:var(--stone);
  border-color:var(--ink);
}
.pagination .page-numbers.current{
  background:var(--ink);
  color:var(--stone);
  border-color:var(--ink);
}
.pagination .page-numbers.dots{
  border:0;
  color:var(--muted);
}

/* Real filter panel (mu-plugins/sicily4u-search-filters-mu.php):
   deliberately NOT reskinned here - "/sicily-villas/" showed the
   plugin's own native styling reskinned while every other real
   listing context (taxonomy archives) still showed the plugin's own
   unstyled default, an inconsistency the user asked to remove until
   the filter's own design is actually decided. All real filter fields
   (Guests, Location, Sort by, Private Pool, Seafront - Beach Area,
   Clear) render with the plugin's own real, unmodified styling
   everywhere now - nothing renamed or removed, no MU-plugin edit. */



/* Villas pagination */
.mphb-pagination {
    margin: clamp(48px, 6vw, 80px) 0 0;
}

.mphb-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mphb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    height: 44px;
    padding: 0 14px;

    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);

    font-family: var(--sans);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .08em;

    text-decoration: none;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.mphb-pagination a.page-numbers:hover,
.mphb-pagination .page-numbers.current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--stone);
}

.mphb-pagination .page-numbers.dots {
    min-width: 28px;
    padding: 0;
    border-color: transparent;
    background: transparent;
}

.mphb-pagination .next,
.mphb-pagination .prev {
    padding: 0 20px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

@media (max-width: 680px) {
    .mphb-pagination {
        margin-top: 44px;
    }

    .mphb-pagination .nav-links {
        gap: 6px;
    }

    .mphb-pagination .page-numbers {
        min-width: 40px;
        height: 40px;
        padding: 0 11px;
    }
}