/* Language switching */
[data-mabe-lang="es"]{display:none}
html.mabe-es [data-mabe-lang="en"]{display:none}
html.mabe-es [data-mabe-lang="es"]{display:block}
[data-mabe-panel][hidden]{display:none!important}
/* Scroll reveal (matches original 0.9s ease) */
.mabe-reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.mabe-reveal.is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.mabe-reveal{opacity:1;transform:none;transition:none}}
/* Before / after slider */
.mabe-ba-handle{touch-action:none}
/* WordPress admin bar offset for fixed header */
body.admin-bar header.fixed{top:32px}
@media screen and (max-width:782px){body.admin-bar header.fixed{top:46px}}
/* Generic WP page content (page.php / 404) */
.mabe-wp-content{max-width:48rem;margin:0 auto;padding:9rem 1.5rem 5rem;line-height:1.75}
.mabe-wp-content h1{font-family:'Playfair Display',serif;font-size:2.5rem;margin-bottom:1.5rem}
.mabe-wp-content h2{font-family:'Playfair Display',serif;font-size:1.6rem;margin:2rem 0 .75rem}
.mabe-wp-content p{margin:0 0 1rem}
.mabe-wp-content a{color:oklch(0.5 0.17 5);text-decoration:underline}

/* ==================================================================
   RESPONSIVE LAYER  (phones, tablets, laptops, large screens)
   ================================================================== */

/* Never allow sideways scrolling on any device */
html,body{overflow-x:clip}
img,svg,video{max-width:100%}

/* Phone numbers and copy buttons never break across lines */
[data-mabe-lang] a[href^="sms:"].font-display,
[data-mabe-lang] a[href^="tel:"],
[data-mabe-copy]{white-space:nowrap}

/* ---------- Header: hamburger menu on phones AND tablets (< 1024px) ---------- */
@media (min-width:768px) and (max-width:1023.98px){
  header nav.md\:flex{display:none}
  header button[data-mabe-menu]{display:inline-flex}
  header [data-mabe-panel]:not([hidden]){display:block}
  header [data-mabe-panel] nav{max-width:28rem;margin:0 auto}
}
/* Mobile menu: comfortable to scroll if a phone is in landscape */
header [data-mabe-panel]{max-height:calc(100svh - 80px);overflow-y:auto;overscroll-behavior:contain}

/* ---------- Home hero on phones ---------- */
@media (max-width:639.98px){
  /* the cream info panel flows under the photo instead of covering the text */
  .mabe-hero{min-height:auto;display:flex;flex-direction:column}
  .mabe-hero-content{min-height:78svh;justify-content:flex-end;padding-top:9rem;padding-bottom:2.25rem}
  .mabe-hero-panel{position:relative;inset:auto}
  /* panel already carries the intro, buttons and phone; avoid showing them twice */
  .mabe-hero-content .max-w-xl > p.max-w-md,
  .mabe-hero-content .max-w-xl > div.flex,
  .mabe-hero-content .max-w-xl > p.max-w-sm{display:none}
  .mabe-hero-content h1{font-size:clamp(2.5rem,12.5vw,3.2rem);line-height:1.02}
  .mabe-hero-lang{top:5.75rem}
}
/* Landscape phones: keep hero readable without a huge empty band */
@media (max-height:500px) and (orientation:landscape){
  .mabe-hero,.mabe-hero-content{min-height:auto}
  .mabe-hero-content{padding-top:7rem;padding-bottom:3rem}
  .mabe-hero-content h1{font-size:2.75rem}
  section.min-h-\[100svh\],section .min-h-\[100svh\]{min-height:auto}
}

/* ---------- Home "The Edit" cards: stack until there's room for 3 ---------- */
@media (min-width:640px) and (max-width:1023.98px){
  .mabe-edit-grid{grid-template-columns:1fr;max-width:36rem;margin-left:auto;margin-right:auto}
}

/* ---------- Gallery colour swatches: 2 per row on phones ---------- */
@media (max-width:639.98px){
  .mabe-swatches{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
}

/* ---------- Footer on tablets: brand on top, Explore + Visit side by side ---------- */
@media (min-width:768px) and (max-width:1023.98px){
  .mabe-footer-grid{grid-template-columns:1fr 1fr;column-gap:2.5rem}
  .mabe-footer-grid > :first-child{grid-column:1 / -1;max-width:32rem}
}

/* ---------- Small phones: legibility ---------- */
@media (max-width:639.98px){
  [data-mabe-lang] .text-\[9px\]{font-size:10px}
  [data-mabe-lang] .text-\[10px\]{font-size:10.5px}
  [data-mabe-lang] .tracking-vogue{letter-spacing:.24em}
  [data-mabe-lang] .tracking-wide-luxe{letter-spacing:.2em}
}
@media (max-width:379.98px){
  [data-mabe-lang] .px-11{padding-left:1.75rem;padding-right:1.75rem}
  [data-mabe-lang] .px-9{padding-left:1.5rem;padding-right:1.5rem}
  [data-mabe-lang] .tracking-vogue{letter-spacing:.18em}
}

/* ---------- Touch devices: finger-sized tap targets (44px), same visual layout ---------- */
@media (pointer:coarse){
  header button[data-mabe-menu]{padding:11px;margin:-11px}
  [data-mabe-setlang]{min-height:34px;min-width:44px;position:relative}
  [data-mabe-setlang]::after{content:"";position:absolute;inset:-6px 0}
  footer ul a{display:inline-block;padding:.5rem 0}
  [data-mabe-lang] a.inline-flex:not([class*="py-"]),
  [data-mabe-lang] button.inline-flex:not([class*="py-"]){padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
  [data-mabe-copy]{position:relative}
  [data-mabe-copy]::after{content:"";position:absolute;inset:-10px -6px}
  [data-mabe-lang] a[href^="sms:"].font-display{display:inline-flex;align-items:center;min-height:44px}
  .mabe-ba-handle{width:3.25rem;height:3.25rem}
}

/* ---------- Large & ultra-wide screens: scale the whole design up proportionally ---------- */
@media (min-width:1800px){
  [data-mabe-lang] > div{zoom:1.15}
  [data-mabe-lang] .min-h-\[100svh\]{min-height:calc(100svh / 1.15)}
  [data-mabe-lang] > div.min-h-screen{min-height:calc(100vh / 1.15)}
}
@media (min-width:2300px){
  [data-mabe-lang] > div{zoom:1.35}
  [data-mabe-lang] .min-h-\[100svh\]{min-height:calc(100svh / 1.35)}
  [data-mabe-lang] > div.min-h-screen{min-height:calc(100vh / 1.35)}
}
@media (min-width:3000px){
  [data-mabe-lang] > div{zoom:1.7}
  [data-mabe-lang] .min-h-\[100svh\]{min-height:calc(100svh / 1.7)}
  [data-mabe-lang] > div.min-h-screen{min-height:calc(100vh / 1.7)}
}

/* Contact steps + Meet Mabe testimonials: stack on tablets so text isn't squeezed */
@media (min-width:640px) and (max-width:1023.98px){
  .mabe-tab-stack{grid-template-columns:1fr;max-width:36rem;margin-left:auto;margin-right:auto}
}
/* Pill CTAs stay on one line wherever there's room */
@media (min-width:640px){
  [data-mabe-lang] a.rounded-full[href^="sms:"]{white-space:nowrap}
}

/* ==================================================================
   ELEMENTOR COMPATIBILITY
   Elementor adds its own spacing and image resets; undo them inside the
   MABE section widgets so the design stays exactly as designed.
   ================================================================== */
.elementor .mabe-page-con.e-con{--content-width:100%;--width:100%;max-width:100%}
.elementor .mabe-page-con > .elementor-element,
.elementor .mabe-page-con > .e-con-inner > .elementor-element{width:100%;max-width:100%;margin:0}
.elementor .mabe-w img{height:revert-layer;max-width:revert-layer;border:revert-layer;border-radius:revert-layer;box-shadow:revert-layer}
.elementor .mabe-w a{box-shadow:revert-layer;text-decoration:revert-layer}
.elementor .mabe-w h1,.elementor .mabe-w h2,.elementor .mabe-w h3,.elementor .mabe-w h4,.elementor .mabe-w p{margin:revert-layer}
/* In the Elementor editor, show everything immediately (no scroll reveal) */
.elementor-editor-active .mabe-reveal,.elementor-editor-preview .mabe-reveal{opacity:1!important;transform:none!important}