.elementor-kit-480{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-480 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --sanare-deep:#39432f; --sanare-deep-2:#2f3827; --sanare-sage:#6c765b; --sanare-sage-dark:#565f48; --sanare-sage-tint:#eef0ea; --sanare-cream:#faf7f1; --sanare-ink:#2b2b26; --sanare-text:#5f5f56; --sanare-line:#e7e2d7; --sanare-white:#ffffff; --sanare-soft-green:#cdd6c2; --font-serif:Crimson Pro; --font-sans:Quicksand; }
/* Start custom CSS *//* ===== Sanare Spa site-wide CSS (Elementor > Site Settings > Custom CSS) =====
   Handles what Elementor's style controls can't: the scrolling reviews and photo strip, the tilt cards'
   light and depth, the sticky header and the menu. Everything else lives in the sn-* global classes. */
html { scroll-behavior: smooth; }
body { font-family: "Quicksand", sans-serif; color: #5f5f56; background: #ffffff; -webkit-font-smoothing: antialiased; }
body a { text-decoration: none; }
.elementor a:focus-visible { outline: 2px solid #6c765b; outline-offset: 3px; }

/* sticky cream header */
.elementor-location-header { position: sticky; top: 0; z-index: 50; }
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .elementor-location-header { top: 0; } }

/* main menu (Elementor nav menu widget) */
.sn-nav .elementor-nav-menu--main .elementor-item { font-family: "Quicksand", sans-serif; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 500; color: #2b2b26; padding: 6px 0; }
.sn-nav { --e-nav-menu-horizontal-menu-item-margin: 26px; }
.sn-nav .elementor-nav-menu--main .elementor-item:hover, .sn-nav .elementor-nav-menu--main .elementor-item.elementor-item-active { color: #6c765b; }
.sn-nav .elementor-nav-menu--main .elementor-item:after { background-color: #6c765b !important; height: 1.5px !important; }
.sn-nav .elementor-nav-menu--main a[target="_blank"]:after { content: none; }
.sn-nav .elementor-nav-menu--main a[target="_blank"] .sub-arrow, .sn-nav a[target="_blank"]::before { display: none; }
.sn-nav .elementor-menu-toggle { background: transparent; color: #2b2b26; font-size: 24px; }
.sn-nav .elementor-nav-menu--dropdown { background: #faf7f1; border: 1px solid #e7e2d7; border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px rgba(43,43,38,.14); }
.sn-nav .elementor-nav-menu--dropdown a { font-family: "Quicksand", sans-serif; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500; color: #2b2b26 !important; border-radius: 8px; padding: 12px 14px !important; }
.sn-nav .elementor-nav-menu--dropdown a:hover, .sn-nav .elementor-nav-menu--dropdown a.elementor-item-active { background: #eef0ea !important; }
.sn-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container { margin-top: 14px; min-width: 240px; right: 0; left: auto !important; width: auto !important; }

/* scrolling Treatwell reviews: continuous, fading at both edges, pauses on hover */
.elementor .sn-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.elementor .sn-mq-track { animation: sn-mq 70s linear infinite; }
.elementor .sn-marquee:hover .sn-mq-track, .elementor .sn-marquee:focus-within .sn-mq-track, .elementor .sn-ps:hover .sn-mq-track { animation-play-state: paused; }
.elementor .sn-ps .sn-mq-track { animation-duration: 80s; }
.elementor .sn-ps .sn-mq-set { gap: 0; padding: 0; }
@keyframes sn-mq { to { transform: translateX(-50%); } }
@media (max-width: 767px) { .elementor .sn-marquee .sn-mq-track { animation-duration: 55s; } }
@media (prefers-reduced-motion: reduce) {
  .elementor .sn-mq-track { animation: none; }
  .elementor .sn-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* photo strip: soft dark overlay on every photo */
.elementor .sn-ps-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.elementor .sn-ps-item::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.35); }

/* tilt cards: lean towards the pointer, photo drifts, soft light follows the cursor (JS sets the variables) */
.elementor .sn-tilt-grid { perspective: 1100px; }
.elementor .sn-tilt { --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 30%; --px: 0px; --py: 0px; --lift: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)) translateZ(calc(var(--lift) * 18px)); transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease; box-shadow: 0 14px 30px rgba(43,43,38,.16); will-change: transform; }
.elementor .sn-tilt.is-on { transition: transform .12s ease-out, box-shadow .3s ease; box-shadow: 0 30px 60px rgba(43,43,38,.32); }
.elementor .sn-t-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.1) translate(var(--px), var(--py)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.elementor .sn-tilt.is-on .sn-t-bg img { transition: transform .12s ease-out; }
.elementor .sn-t-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,16,.15) 0%, rgba(20,22,16,.55) 45%, rgba(20,22,16,.88) 100%); }
.elementor .sn-t-glare { pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.32) 0%, rgba(255,255,255,.08) 28%, rgba(255,255,255,0) 52%); opacity: 0; transition: opacity .4s ease; mix-blend-mode: soft-light; }
.elementor .sn-tilt.is-on .sn-t-glare { opacity: 1; }
.elementor .sn-t-body { transform: translateZ(46px); }
.elementor .sn-tilt:hover .sn-t-more { color: #ffffff; }
.elementor .sn-tilt h3 { color: #ffffff; font-size: 26px; }
.elementor .sn-tilt p { color: rgba(255,255,255,.88); font-size: 14.5px; line-height: 1.55; }
.elementor .sn-tilt .sn-t-more { color: #e2e7d7; font-size: 12px; }
/* specialist cards keep the light but not the dark gradient */
.elementor .sn-scard { transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.elementor .sn-scard .sn-s-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: translate(calc(var(--px) * .5), calc(var(--py) * .5)) scale(1.04); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.elementor .sn-scard .sn-s-img img.sn-logo-fit, .elementor .sn-scard .sn-s-img .sn-logo-fit img { object-fit: contain; padding: 14%; transform: none; }
.elementor .sn-scard .sn-t-glare { mix-blend-mode: overlay; }
.elementor .sn-scard .sn-s-body { transform: translateZ(30px); }
.elementor .sn-scard { scroll-margin-top: 120px; }
@media (prefers-reduced-motion: reduce) { .elementor .sn-tilt, .elementor .sn-t-bg img, .elementor .sn-t-glare { transition: none; } }

/* text links inside paragraphs */
.elementor .sn-body a, .elementor .sn-small a { color: #39432f; text-decoration: underline; text-underline-offset: 3px; }
.elementor .sn-who b { color: #2b2b26; font-weight: 700; }
.elementor .sn-slink { font-family: "Quicksand", sans-serif; font-size: 13.5px; font-weight: 600; color: #39432f; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(57,67,47,.35); }
.elementor .sn-slink:hover { text-decoration-color: #39432f; }

/* footer */
.elementor .sn-footer a { color: rgba(255,255,255,.78); }
.elementor .sn-footer a:hover { color: #ffffff; text-decoration: underline; }
.elementor .sn-social a, .elementor a.sn-social-btn { color: #ffffff; }
.elementor a.sn-social-btn:hover { background-color: rgba(255,255,255,.12); text-decoration: none; }

/* menu: underline simply fades in at text width - no growing or shrinking on hover */
.sn-nav .elementor-nav-menu--main .elementor-item { transition: color .2s ease !important; transform: none !important; }
.sn-nav .elementor-nav-menu--main .elementor-item:before,
.sn-nav .elementor-nav-menu--main .elementor-item:after { left: 0 !important; right: auto !important; width: 100% !important; transform: none !important; transition: opacity .2s ease !important; }

/* titles: balance line lengths so a single word is never left on its own line */
.elementor h1, .elementor h2, .elementor h3, .elementor h4, .elementor h5, .elementor h6 { text-wrap: balance; }

/* Home "About Sanare Spa" band: keep the tinted background full width but centre the content in a 1200px column on desktop */
@media (min-width: 1025px) {
  .elementor .elementor-element-2ca65618 { padding-left: max(20px, calc((100% - 1200px) / 2)) !important; padding-right: max(20px, calc((100% - 1200px) / 2)) !important; column-gap: 64px !important; }
  .elementor .elementor-element-6f1f4ac6 { padding-left: 0 !important; justify-content: stretch !important; }
  .elementor .elementor-element-6f1f4ac6 img { max-width: 100% !important; width: 100% !important; }
  .elementor .elementor-element-6fcd47a4 { padding-left: 0 !important; padding-right: 0 !important; }
}

/* phones: buttons in the page content go full width (the small header button stays as it is) */
@media (max-width: 767px) {
  .elementor .sn-btns { flex-direction: column !important; align-items: stretch !important; width: 100% !important; }
  .elementor .sn-btn { width: 100% !important; justify-content: center !important; }
  .elementor-location-header .sn-btn { width: auto !important; }
  .elementor .sn-hero-c { width: 100% !important; }
}

/* phones and tablets: full-screen menu - Sanare logo at the top, then the menu items one per row, green when chosen */
@media (max-width: 1024px) {
  .sn-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100vw !important; min-width: 0 !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    background: #faf7f1 !important; padding: 0 !important; z-index: 9999 !important; transform-origin: top;
  }
  .sn-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    height: 100vh !important; height: 100dvh !important; max-height: none !important; overflow-y: auto !important;
    padding: 118px 24px 40px !important; display: block !important;
  }
  .sn-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container::before {
    content: ""; position: absolute; top: 26px; left: 50%; transform: translateX(-50%); width: 170px; height: 74px;
    background: url("https://sanarespa.co.uk/wp-content/uploads/2026/11/logo-green.png") center / contain no-repeat;
  }
  .sn-nav .elementor-nav-menu--dropdown ul.elementor-nav-menu { display: block !important; width: 100% !important; max-width: 420px; margin: 0 auto !important; padding: 0 !important; border-top: 1px solid #e7e2d7; }
  .sn-nav .elementor-nav-menu--dropdown li { display: block !important; width: 100% !important; border: 0 !important; }
  .sn-nav .elementor-nav-menu--dropdown a, .sn-nav .elementor-nav-menu--dropdown a.elementor-item {
    display: block !important; width: 100% !important; text-align: center !important; justify-content: center !important;
    font-size: 17px !important; letter-spacing: 2.4px !important; padding: 20px 14px !important; margin: 0 !important;
    color: #2b2b26 !important; background: transparent !important; border-bottom: 1px solid #e7e2d7 !important; border-radius: 0 !important;
  }
  .sn-nav .elementor-nav-menu--dropdown a:hover, .sn-nav .elementor-nav-menu--dropdown a:focus, .sn-nav .elementor-nav-menu--dropdown a:active,
  .sn-nav .elementor-nav-menu--dropdown a.elementor-item-active, .sn-nav .elementor-nav-menu--dropdown a.highlighted {
    color: #6c765b !important; background: transparent !important;
  }
  .sn-nav .elementor-menu-toggle { position: relative; z-index: 10001; font-size: 28px !important; background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; }
  .sn-nav .elementor-menu-toggle:focus, .sn-nav .elementor-menu-toggle:focus-visible { outline: none !important; box-shadow: none !important; }
  body:has(.sn-nav .elementor-menu-toggle.elementor-active) { overflow: hidden; }
  body.admin-bar .sn-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container { padding-top: 160px !important; }
  body.admin-bar .sn-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container::before { top: 66px; }
}

/* phones: more breathing room between the scrolling review cards */
@media (max-width: 767px) {
  .elementor .sn-marquee .sn-mq-set { gap: 44px !important; padding-right: 44px !important; }
  .elementor .sn-marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .elementor .sn-rcard { width: 270px !important; }
}

/* phones and tablets: logo on the left, then "Book a treatment", then the menu icon on the far right, all on one line */
@media (max-width: 1024px) {
  .elementor-location-header .sn-nav { width: auto !important; flex: 0 0 auto !important; max-width: none !important; }
  .elementor-location-header .sn-nav .elementor-menu-toggle { margin: 0 0 0 4px !important; }
}

/* phones: hero titles and text always left aligned */
@media (max-width: 767px) {
  .elementor .sn-hero-wrap, .elementor .sn-hero-wrap.sn-end { justify-content: flex-start !important; }
  .elementor .sn-hero-c { align-items: flex-start !important; text-align: left !important; }
  .elementor .sn-hero-c h1, .elementor .sn-hero-c h2, .elementor .sn-hero-c p { text-align: left !important; }
}

/* phones and tablets: no tilt / skew on cards or their photos */
@media (max-width: 1024px) {
  .elementor .sn-tilt, .elementor .sn-scard, .elementor .sn-t-body, .elementor .sn-scard .sn-s-body { transform: none !important; }
  .elementor .sn-t-bg img, .elementor .sn-scard .sn-s-img img { transform: none !important; }
  .elementor .sn-t-glare { display: none !important; }
}

/* About, phones: Simone's photo sits under the first block of text, at about half size */
@media (max-width: 767px) {
  .elementor .elementor-element-10128985 { display: flex !important; flex-direction: column !important; gap: 18px !important; align-items: flex-start !important; text-align: left !important; }
  .elementor .elementor-element-2e122501 { display: contents !important; }
  .elementor [data-id="28448c86"] { order: 1; }
  .elementor [data-id="221b764e"] { order: 2; }
  .elementor [data-id="54c86282"] { order: 3; }
  .elementor img[data-id="4452582"] { order: 4; width: 50% !important; max-width: 50% !important; align-self: flex-start; }
  .elementor [data-id="59222ab0"] { order: 5; }
  .elementor [data-id="6bfeda2c"] { order: 6; }
  .elementor [data-id="6845e0c8"] { order: 7; }
  .elementor [data-id="7960c390"] { order: 8; }
}

/* footer, phones: two-column layout like trucleanplus.uk */
@media (max-width: 767px) {
  .elementor .elementor-element-43b50952 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 36px 16px !important; padding: 48px 18px 32px !important; text-align: center; }
  .elementor .elementor-element-43b50952 > * { align-items: center !important; text-align: center !important; }
  .elementor .elementor-element-7a15e48e { grid-column: 1; grid-row: 1; }
  .elementor .elementor-element-2ad9a9ad { grid-column: 2; grid-row: 1; align-self: center; }
  .elementor .elementor-element-5fe2db48 { grid-column: 1; grid-row: 2 / span 2; }
  .elementor .elementor-element-1bb37ab0 { grid-column: 2; grid-row: 2; }
  .elementor .elementor-element-e8a7dd7 { grid-column: 2; grid-row: 3; }
  .elementor .elementor-element-43b50952 p { font-size: 13.5px !important; line-height: 1.5 !important; }
  .elementor .elementor-element-7a15e48e img { height: 64px !important; }
  .elementor .elementor-element-4a0776e8 { flex-direction: column !important; align-items: center !important; text-align: center; gap: 6px !important; }
}

/* Contact: the four contact cards as a 2 x 2 grid */
.elementor .elementor-element-69e8ca47 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
@media (max-width: 767px) {
  .elementor .elementor-element-69e8ca47 { gap: 12px !important; }
  .elementor .elementor-element-69e8ca47 .sn-ccard { padding: 20px 16px !important; }
  .elementor .elementor-element-69e8ca47 .sn-strong { font-size: 14px !important; overflow-wrap: anywhere; }
  .elementor .elementor-element-69e8ca47 h3 { font-size: 20px !important; }
}
/* Contact: Send button and the note beneath it, centred across the form */
.elementor [data-id="6bb5f683"] { grid-column: 1 / -1 !important; justify-self: center !important; }
.elementor [data-id="4b352dc2"] { grid-column: 1 / -1 !important; text-align: center !important; justify-self: center !important; }

/* CookieYes banner and preference centre: Sanare branding */
.cky-consent-container, .cky-consent-bar, .cky-modal, .cky-preference-center, .cky-consent-container *, .cky-modal * { font-family: "Quicksand", sans-serif !important; }
.cky-consent-container .cky-title, .cky-modal .cky-preference-title, .cky-modal .cky-accordion-btn { font-family: "Crimson Pro", serif !important; color: #2b2b26 !important; }
.cky-consent-container .cky-title { font-size: 21px !important; font-weight: 500 !important; }
.cky-consent-bar, .cky-modal, .cky-preference-center, .cky-preference-header, .cky-footer-wrapper, .cky-prefrence-btn-wrapper { background: #faf7f1 !important; border-color: #e7e2d7 !important; }
.cky-btn { border-radius: 30px !important; font-weight: 600 !important; letter-spacing: .4px !important; }
.cky-btn-accept, .cky-btn-reject, .cky-btn-preferences, .cky-prefrence-btn-wrapper .cky-btn { background: #6c765b !important; border-color: #6c765b !important; color: #ffffff !important; }
.cky-btn-accept:hover, .cky-btn-reject:hover, .cky-btn-preferences:hover, .cky-prefrence-btn-wrapper .cky-btn:hover { background: #565f48 !important; border-color: #565f48 !important; opacity: 1 !important; }
.cky-btn-customize { background: transparent !important; border-color: #6c765b !important; color: #6c765b !important; }
.cky-switch input[type="checkbox"]:checked { background: #6c765b !important; }
.cky-always-active { color: #6c765b !important; }
.cky-consent-container a, .cky-modal a, .cky-show-desc-btn, .cky-policy { color: #39432f !important; }
.cky-btn-revisit-wrapper { background: #6c765b !important; }
.cky-btn-revisit-wrapper:hover::before { background: #39432f !important; }

/* contact form */
.elementor .sn-cform input[type=checkbox] { accent-color: #6c765b; width: 16px; height: 16px; margin-top: 3px; }
.elementor .sn-cform textarea { resize: vertical; min-height: 130px; }
.elementor .sn-cform select { appearance: auto; }/* End custom CSS */