.mx-footer__logo svg {
    max-width: 100%;
}

/* ── Brand scrollbar (matches the pink palette) ──────── */
html {
    scrollbar-width: thin;
    scrollbar-color: #F372B3 #FBE9ED;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #FBE9ED; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #F372B3 0%, #FF60AF 100%);
    border-radius: 999px;
    border: 3px solid #FBE9ED;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #F92D93 0%, #FF60AF 100%);
}

/* ModernXscapes — base styles, applied site-wide */

/* Hard reset: zero top spacing on root + body + every wrapper */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}
html[lang] { margin-top: 0 !important; }
html.wp-toolbar { padding-top: 32px !important; }
@media (max-width: 782px) {
    html.wp-toolbar { padding-top: 46px !important; }
}

body.elementor-page,
body.page-template-elementor_canvas,
body.page,
body {
    background: #ffffff;
    margin: 0 !important;
}

/* Hello theme + WP default page wrappers */
.site-header,
.elementor-canvas .site-header,
.elementor-canvas .site-footer,
.site-footer { display: none !important; }

main, .site-main, .site-content,
#page, #content, .entry-content, .entry-header,
.elementor-canvas .site-content {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

body > *:first-child { margin-top: 0 !important; }

/* When WP admin bar IS present (logged in), it overlays the page —
   header stays at top:0; admin bar is fine on top of it for admin views only */

/* === Nuke ALL Elementor section/column default spacing site-wide ===
   We're full-control on every section via our widgets — Elementor's defaults
   only get in the way (10px section padding, 10px column padding, etc). */
.elementor-section,
.elementor-section.elementor-top-section,
.elementor-section.elementor-inner-section {
    padding-block: 0 !important;
    margin-block: 0 !important;
}
.elementor .elementor-section .elementor-container { padding: 0 !important; }
.elementor .elementor-column,
.elementor .elementor-column .elementor-element-populated {
    padding: 0 !important;
}
.elementor-widget:not(:last-child) { margin-block-end: 0 !important; }

/* The widget-container Elementor wraps around our render adds its own padding
   on some themes — strip it for our widgets specifically. */
.elementor-widget-mx-site-header > .elementor-widget-container,
.elementor-widget-mx-hero > .elementor-widget-container,
.elementor-widget-mx-partners-strip > .elementor-widget-container,
.elementor-widget-mx-marquee > .elementor-widget-container,
.elementor-widget-mx-services-grid > .elementor-widget-container,
.elementor-widget-mx-decking-feature > .elementor-widget-container,
.elementor-widget-mx-feature-fullbleed > .elementor-widget-container,
.elementor-widget-mx-about-shapes > .elementor-widget-container,
.elementor-widget-mx-comfort-connection > .elementor-widget-container,
.elementor-widget-mx-process-steps > .elementor-widget-container,
.elementor-widget-mx-spas-slider > .elementor-widget-container,
.elementor-widget-mx-featured-projects > .elementor-widget-container,
.elementor-widget-mx-testimonials-slider > .elementor-widget-container,
.elementor-widget-mx-resources-trio > .elementor-widget-container,
.elementor-widget-mx-final-cta > .elementor-widget-container,
.elementor-widget-mx-site-footer > .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Kill Elementor wrapper borders that bleed through our rounded image cards */
.elementor-widget-wrap,
.elementor-element,
.elementor-widget,
.elementor-section-wrap {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}
.elementor-widget img { border: 0; }

.mx-container {
    width: 100%;
    max-width: var(--mx-container-max);
    margin-inline: auto;
    padding-inline: var(--mx-container-pad);
}

.mx-h1 { font-family: var(--mx-font-heading); font-size: var(--mx-fs-h1); line-height: var(--mx-lh-tight); }
.mx-h2 { font-family: var(--mx-font-heading); font-size: var(--mx-fs-h2); line-height: var(--mx-lh-tight); }
.mx-h3 { font-family: var(--mx-font-heading); font-size: var(--mx-fs-h3); line-height: var(--mx-lh-tight); }
.mx-h4 { font-family: var(--mx-font-heading); font-size: var(--mx-fs-h4); line-height: var(--mx-lh-tight); }
.mx-body { font-family: var(--mx-font-body); font-size: var(--mx-fs-body); line-height: var(--mx-lh-normal); }
.mx-small { font-family: var(--mx-font-body); font-size: var(--mx-fs-small); line-height: var(--mx-lh-normal); }

/* Global paragraph sizing across all ModernXscapes widgets */
.elementor [class^="mx-"] p,
.elementor [class*=" mx-"] p {
    font-size: 22px !important;
    line-height: 1.5 !important;
}

/* Global CTA button vertical alignment fix — applies to every mx-* CTA */
[class^="mx-"][class*="__cta"],
[class*=" mx-"][class*="__cta"],
.mx-btn,
a.mx-btn,
button.mx-btn {
    line-height: 1 !important;
    padding-top: 24px !important;
    padding-bottom: 22px !important;
    height: auto !important;
    min-height: 67px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* Global slider arrow override — kill pink/global button bg on all mx slider arrows */
.mx-dcol__arrow,
.mx-drail__arrow,
.mx-dtier__arrow,
.mx-dadv__arrow,
.mx-pwave__arrow,
.mx-plup__arrow,
.mx-br__arrow,
.mx-cen__arrow,
.mx-ctech__arrow,
[class*="__arrow"]:not(.mx-plup__arrow) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
}



/* Global header nudge — closes white gap above dark nav */
.elementor-section:first-of-type, .elementor-top-section:first-of-type { margin-top: -2px !important; }


/* FOUC guard: keep card-icon SVGs small before widget inline CSS loads */
.mx-contact__card-icon svg,
.mx-contact__card-icon img { width: 44px !important; height: 44px !important; display: block !important; }


/* === Global 1500px container constraint === */
.elementor-section .elementor-container { max-width: 1500px !important; margin-inline: auto !important; }
/* Full-bleed sections that should still span viewport (bg images, gift voucher banner) */
.elementor-section-stretched .elementor-container { max-width: 100% !important; }
.elementor-section-stretched .elementor-container > .elementor-column { max-width: 1500px !important; margin-inline: auto !important; }



/* Hide mobile burger on desktop, show only ≤768px */
.sb-header__burger { display: none !important; }
@media (max-width: 768px) {
    .sb-header__burger { display: inline-flex !important; align-items: center; justify-content: center; gap: 4px; flex-direction: column; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; }
    .sb-header__burger span { display: block; width: 22px; height: 2px; background: var(--mx-color-heading, #45375d); border-radius: 1px; }
    .sb-header__nav { display: none !important; }
    .sb-header__cta { display: none !important; }
}


/* Defeat hello-elementor reset.css red border on form fields (same issue as modernxscapes) */
.sb-contact__form input[type="text"],
.sb-contact__form input[type="email"],
.sb-contact__form input[type="tel"],
.sb-contact__form input[type="url"],
.sb-contact__form input[type="search"],
.sb-contact__form input[type="password"],
.sb-contact__form input[type="number"],
.sb-contact__form input[type="date"],
.sb-contact__form select,
.sb-contact__form textarea,
.sb-footer__form input[type="text"],
.sb-footer__form input[type="email"],
.sb-footer__form input[type="tel"],
.sb-footer__form textarea,
input.sb-input, textarea.sb-input, select.sb-input {
    border: 0 !important;
    border-bottom: 1px solid rgba(69, 55, 93, 0.22) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mx-color-body, #53475c) !important;
    padding: 12px 2px !important;
    font-size: 16px !important;
    width: 100% !important;
    transition: border-color 0.18s ease !important;
}
.sb-contact__form input:focus,
.sb-contact__form textarea:focus,
.sb-footer__form input:focus,
.sb-footer__form textarea:focus,
input.sb-input:focus, textarea.sb-input:focus {
    border-bottom-color: var(--mx-color-brand, #f372b3) !important;
    box-shadow: none !important;
    outline: 0 !important;
}
/* Newsletter (voucher) glass pill: kill reset.css border on email + keep white button */
input.sb-voucher__email,
.sb-voucher__email {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
}
button.sb-voucher__cta,
.sb-voucher__cta {
    background: #ffffff !important;
    border: 0 !important;
    color: #6b2940 !important;
    border-radius: 999px !important;
    padding: 0 48px !important;
    font-family: var(--mx-font-body, "Aileron", system-ui, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}
button.sb-voucher__cta:hover,
.sb-voucher__cta:hover {
    background: #ffffff !important;
    color: #6b2940 !important;
}

/* Uniform primary CTA sizing + font across all sections (match hero button).
   Only normalizes geometry + typography; each button keeps its own bg/color. */
.sb-about-intro__cta,
.sb-feature-band__cta,
.sb-gallery__cta,
.sb-methods-comparison__cta,
.sb-svc__cta,
.sb-tiers__cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 38px 2px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--mx-font-body, "Aileron", system-ui, sans-serif) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Defeat reset.css [type="submit"] red border on Absenden + similar buttons */
.sb-contact__submit,
.sb-footer__submit,
[type="submit"].sb-btn,
button.sb-btn,
.sb-btn-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    min-height: 64px !important;
    background: linear-gradient(267deg, #F372B3 0.6%, #FF60AF 99.4%) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    padding: 0 38px 2px !important;
    font-family: var(--mx-font-body, "Aileron", system-ui, sans-serif) !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background 0.18s ease, transform 0.18s ease !important;
    width: auto !important;
}
.sb-contact__submit:hover, .sb-footer__submit:hover, [type="submit"].sb-btn:hover, button.sb-btn:hover {
    background: linear-gradient(267deg, #F92D93 0.6%, #FF60AF 99.4%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}