/*
 Theme Name: Skinovatio Child
 Theme URI: https://skinovatioohio.com
 Description: Custom child theme for Skinovatio Medical Spa, built on Hello Elementor.
 Author: Bolt Web Design
 Author URI: https://boltwebdesign.com
 Template: hello-elementor
 Version: 1.0.0
 License: GNU General Public License v3 or later
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: skinovatio-child
*/

/* ==========================================================================
   Skinovatio Brand Variables
   ========================================================================== */

:root {
  /* Brand Colors — linked to Elementor Global Colors.
     Change a color in Elementor → Site Settings → Global Colors
     and it automatically updates everywhere on the site. */
  --sk-teal: var(--e-global-color-primary, #3BD4AE);
  --sk-teal-dark: var(--e-global-color-secondary, #009490);
  --sk-teal-light: var(--e-global-color-sk_teal_light, #7BE8CE);
  --sk-cream: var(--e-global-color-accent, #F7F7F5);
  --sk-dark: var(--e-global-color-sk_dark, #1A1A1A);
  --sk-text: var(--e-global-color-text, #333333);
  --sk-white: var(--e-global-color-sk_white, #FFFFFF);
  --sk-off-white: var(--e-global-color-sk_off_white, #FAFAF7);
  --sk-gray-light: var(--e-global-color-sk_gray_light, #EFEFED);
  --sk-gray: var(--e-global-color-sk_gray, #8A8A8A);
  --sk-footer-bg: var(--e-global-color-sk_footer_bg, #00504D);
  --sk-footer-dark: var(--e-global-color-sk_footer_dark, #003835);

  /* Derived (computed from globals — not editable in Elementor) */
  --sk-teal-dark-hover: #007a77; /* darkened teal for button hover states */

  /* Typography */
  --sk-font-heading: 'Playfair Display', Georgia, serif;
  --sk-font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing */
  --sk-section-padding: 100px 0;
  --sk-container-width: 1200px;

  /* Transitions */
  --sk-transition: all 0.3s ease;
}

/* ==========================================================================
   Google Fonts (loaded via functions.php, fallback here)
   ========================================================================== */

/* ==========================================================================
   Global Resets & Base Styles
   ========================================================================== */

body {
  font-family: var(--sk-font-body);
  font-weight: 300;
  color: var(--sk-text);
  background-color: var(--sk-white);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Default body text color — Elementor widget-level and global colors can override */
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor span,
.elementor-widget-text-editor li {
  color: var(--sk-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sk-font-heading);
  font-weight: 700;
  color: var(--sk-dark);
  line-height: 1.2;
}

/* Section headings — dark for visual weight & hierarchy */
h2 {
  color: var(--sk-dark);
}

/* Card/subsection headings — teal accent for variety */
h3 {
  color: var(--sk-teal-dark);
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }

p {
  margin-bottom: 1.2em;
  color: var(--sk-text);
}

a {
  color: var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
}

a:hover {
  color: var(--sk-teal);
}

img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.elementor-button,
.sk-btn {
  font-family: var(--sk-font-body) !important;
  font-weight: 400 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-size: 15px !important;
  transition: var(--sk-transition) !important;
}

/* Primary Button - Teal */
.sk-btn-primary,
.elementor-button.elementor-button-primary {
  background-color: var(--sk-teal) !important;
  color: var(--sk-white) !important;
  border: 2px solid var(--sk-teal) !important;
}

.sk-btn-primary:hover,
.elementor-button.elementor-button-primary:hover {
  background-color: var(--sk-teal-dark) !important;
  border-color: var(--sk-teal-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(126, 196, 178, 0.3);
}

/* Secondary Button - Outline */
.sk-btn-secondary {
  background-color: transparent !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-teal) !important;
}

.sk-btn-secondary:hover {
  background-color: var(--sk-teal) !important;
  color: var(--sk-white) !important;
}

/* Dark Button */
.sk-btn-dark {
  background-color: var(--sk-dark) !important;
  color: var(--sk-white) !important;
  border: 2px solid var(--sk-dark) !important;
}

.sk-btn-dark:hover {
  background-color: var(--sk-text) !important;
  border-color: var(--sk-text) !important;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header,
.elementor-location-header {
  background-color: var(--sk-white);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}

.site-header .site-branding img {
  max-height: 60px;
  width: auto;
}

/* Header logo sizing */
.elementor-location-header .elementor-widget-image img {
  width: 200px !important;
  max-width: 200px !important;
  height: auto !important;
}

.elementor-location-header .elementor-widget-image {
  width: 200px !important;
  flex-shrink: 0 !important;
}

/* Nav Links */
.elementor-nav-menu .elementor-item {
  font-family: var(--sk-font-body) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  letter-spacing: 0.02em !important;
  color: var(--sk-dark) !important;
  transition: var(--sk-transition) !important;
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--sk-teal-dark) !important;
}

/* Header 3-zone balanced layout — logo and CTA equal widths for centered nav */
.elementor-element-hdr_logo_wrap {
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
.elementor-element-hdr_cta_wrap {
  width: 240px !important;
  min-width: 240px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}
.elementor-element-hdr_nav_wrap {
  flex-grow: 1 !important;
}

/* Header button — compact, no wrap */
.elementor-location-header .elementor-widget-button .elementor-button {
  white-space: nowrap !important;
  padding: 12px 26px !important;
  font-size: 14px !important;
}

/* ==========================================================================
   Mega Menu — Services Dropdown (desktop only)
   ========================================================================== */

@media (min-width: 768px) {

  /* Anchor the mega menu to the Services parent li */
  .elementor-nav-menu > li:has(> .sub-menu > .mega-menu-column-header) {
    position: relative !important;
  }

  /* First-level dropdown containing category columns — hidden by default */
  .elementor-nav-menu > li > .sub-menu:has(> .mega-menu-column-header) {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    transform: translateX(-50%) !important;
    background: var(--sk-white) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    padding: 40px 80px !important;
    margin: 0 !important;
    z-index: 9999 !important;
  }

  /* Show mega menu on hover — override SmartMenus */
  .elementor-nav-menu > li:hover > .sub-menu:has(> .mega-menu-column-header),
  .elementor-nav-menu > li:focus-within > .sub-menu:has(> .mega-menu-column-header) {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  /* Category column container */
  .mega-menu-column-header {
    flex: 1 !important;
    padding: 0 32px !important;
    border-right: none !important;
    list-style: none !important;
    background: transparent !important;
  }

  /* Category heading link */
  .mega-menu-column-header > a {
    font-family: var(--sk-font-body) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--sk-dark) !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    padding: 0 0 12px 0 !important;
    margin-bottom: 8px !important;
    display: block !important;
    border-bottom: none !important;
    background: transparent !important;
  }

  .mega-menu-column-header > a:hover {
    color: var(--sk-teal-dark) !important;
  }

  /* Hide SmartMenus sub-arrows on category headers */
  .mega-menu-column-header > a > .sub-arrow {
    display: none !important;
  }

  /* Service links list — always visible within column, not a flyout */
  .mega-menu-column-header > .sub-menu {
    display: block !important;
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: unset !important;
    width: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    left: auto !important;
  }

  /* Individual service link item */
  .mega-menu-column-header > .sub-menu > li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  .mega-menu-column-header > .sub-menu > li > a {
    font-family: var(--sk-font-body) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--sk-text) !important;
    padding: 5px 0 !important;
    display: block !important;
    transition: color 0.2s ease !important;
    line-height: 1.6 !important;
    background: transparent !important;
  }

  .mega-menu-column-header > .sub-menu > li > a:hover {
    color: var(--sk-teal-dark) !important;
  }
}

/* ==========================================================================
   Sections & Layout
   ========================================================================== */

/* Homepage split-layout sections — force side-by-side on desktop
   Elementor boxed containers use .e-con-inner with gap: 40px.
   Children at 45%+55% = 100% + 40px gap = overflow → wrap.
   Fix: target the inner wrapper and use flex-shrink to accommodate gap. */
@media (min-width: 768px) {
  /* Hero: text left ~45%, image right ~55% */
  .elementor-element-b1hero0 > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-b2left1 {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-b6rght5 {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* "Why Skinovatio": image left ~48%, text right ~48% */
  .elementor-element-d1abt0a > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-d2img1b {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-d4txt3d {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* "Visit Us": text left ~48%, image right ~48% */
  .elementor-element-g1cnt0a > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-g2lft1b {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-g6rgt5c {
    width: 48% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* About page — Philosophy: text left ~55%, teal card right ~40% */
  .elementor-element-abt010 > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-abt011 {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-abt015 {
    width: 40% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* About — restyle teal gradient quote box to match site aesthetic */
  .elementor-element-abt015 {
    background: var(--sk-cream) !important;
    border-left: 4px solid var(--sk-teal-dark) !important;
    border-radius: 8px !important;
    padding: 40px 36px !important;
    display: flex !important;
    align-items: center !important;
  }
  .elementor-element-abt015 .elementor-heading-title {
    color: var(--sk-text) !important;
    font-family: var(--sk-font-heading) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
  }

  /* About page — "Why Patients Trust Us" cards: 2x2 grid wrap */
  .elementor-element-abt032 > .e-con-inner {
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /* Contact page — info row: left 45%, right 55% */
  .elementor-element-ct_info_inner > .e-con-inner {
    flex-wrap: nowrap !important;
  }
  .elementor-element-ct_info_left {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
  .elementor-element-ct_info_right {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }
}

/* Placeholder images — rounded corners */
.elementor-widget-image img[src*="placeholder.png"] {
  border-radius: 12px;
}

/* Services page — category & detail cards: image flush at top */
.elementor-element[class*="svc01"] .elementor-widget-image img[src*="placeholder.png"],
.elementor-element[class*="sc10"] .elementor-widget-image img[src*="placeholder.png"] {
  border-radius: 0;
}

/* ==========================================================================
   Site-Wide Hero Split Layout — Text Left (~45%) + Image Right (~55%)
   ========================================================================== */
@media (min-width: 768px) {
  /* All hero containers that use row direction with two inner columns */
  .e-con.e-parent[data-id$="_hero"] > .e-con-inner,
  .e-con.e-parent[data-id="b1hero0"] > .e-con-inner,
  .e-con.e-parent[data-id="abt001"] > .e-con-inner,
  .e-con.e-parent[data-id="svc001"] > .e-con-inner,
  .e-con.e-parent[data-id="ct_hero"] > .e-con-inner {
    flex-wrap: nowrap !important;
  }

  /* Service sub-page heroes (sp001 through sp1901) */
  .e-con.e-parent[data-id^="sp"] > .e-con-inner {
    flex-wrap: nowrap !important;
  }

  /* Left column — text side */
  [data-id$="_hero_left"],
  [data-id="b2left1"],
  [data-id="abt_hero_left"],
  [data-id="svc_hero_left"],
  [data-id="ct_hero_left"] {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Service sub-page left columns */
  [data-id$="01_left"] {
    width: 45% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Right column — image side */
  [data-id$="_hero_right"],
  [data-id="b6rght5"],
  [data-id="abt_hero_right"],
  [data-id="svc_hero_right"],
  [data-id="ct_hero_right"] {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Service sub-page right columns */
  [data-id$="01_right"] {
    width: 55% !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  /* Hero images — rounded corners */
  [data-id$="_hero_right"] .elementor-widget-image img,
  [data-id$="01_right"] .elementor-widget-image img,
  [data-id="b6rght5"] .elementor-widget-image img {
    border-radius: 12px !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Mobile: stack vertically */
@media (max-width: 767px) {
  [data-id$="_hero_left"],
  [data-id$="_hero_right"],
  [data-id$="01_left"],
  [data-id$="01_right"],
  [data-id="b2left1"],
  [data-id="b6rght5"],
  [data-id="abt_hero_left"],
  [data-id="abt_hero_right"],
  [data-id="svc_hero_left"],
  [data-id="svc_hero_right"],
  [data-id="ct_hero_left"],
  [data-id="ct_hero_right"] {
    width: 100% !important;
  }
}

/* ==========================================================================
   Category Pages — Service Cards Grid (Face, Skin, Body & Wellness)
   ========================================================================== */
@media (min-width: 768px) {
  /* Cards row container — 3-column wrap grid */
  .elementor-element-fac_cards_row,
  .elementor-element-fac_cards_row > .e-con-inner,
  .elementor-element-ski_cards_row,
  .elementor-element-ski_cards_row > .e-con-inner,
  .elementor-element-bod_cards_row,
  .elementor-element-bod_cards_row > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }

  /* Individual cards — 30% width for 3-column layout */
  .elementor-element-fac_cards_row > .e-con,
  .elementor-element-fac_cards_row > .e-con-inner > .e-con,
  .elementor-element-ski_cards_row > .e-con,
  .elementor-element-ski_cards_row > .e-con-inner > .e-con,
  .elementor-element-bod_cards_row > .e-con,
  .elementor-element-bod_cards_row > .e-con-inner > .e-con {
    width: calc(33.333% - 16px) !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }

  /* Card image — flush top, no border-radius */
  .elementor-element-fac_cards_row .elementor-widget-image img[src*="placeholder.png"],
  .elementor-element-ski_cards_row .elementor-widget-image img[src*="placeholder.png"],
  .elementor-element-bod_cards_row .elementor-widget-image img[src*="placeholder.png"] {
    border-radius: 8px 8px 0 0 !important;
  }
}

/* Cream background section */
.sk-bg-cream,
.elementor-section.sk-bg-cream {
  background-color: var(--sk-cream) !important;
}

/* Teal background section */
.sk-bg-teal,
.elementor-section.sk-bg-teal {
  background-color: var(--sk-teal) !important;
}

.sk-bg-teal h1,
.sk-bg-teal h2,
.sk-bg-teal h3,
.sk-bg-teal p {
  color: var(--sk-white) !important;
}

/* Dark section — deep teal */
.sk-bg-dark,
.elementor-section.sk-bg-dark {
  background-color: var(--sk-teal-dark) !important;
}

.sk-bg-dark h1,
.sk-bg-dark h2,
.sk-bg-dark h3,
.sk-bg-dark p,
.sk-bg-dark a {
  color: var(--sk-white) !important;
}

/* ==========================================================================
   Service Cards
   ========================================================================== */

.sk-service-card {
  background: var(--sk-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
  transition: var(--sk-transition);
}

.sk-service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.sk-service-card .sk-card-content {
  padding: 30px;
}

.sk-service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.sk-service-card p {
  font-size: 0.95rem;
  color: var(--sk-gray);
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.sk-testimonial {
  background: var(--sk-cream);
  padding: 40px;
  border-radius: 4px;
  border-left: 4px solid var(--sk-teal);
  font-style: italic;
}

.sk-testimonial p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--sk-text);
}

.sk-testimonial cite {
  display: block;
  margin-top: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--sk-teal-dark);
  font-size: 0.95rem;
}

/* ==========================================================================
   FAQ Accordion
   ========================================================================== */

.sk-faq .elementor-accordion-item {
  border: 1px solid var(--sk-gray-light) !important;
  margin-bottom: 10px !important;
  border-radius: 4px !important;
}

.sk-faq .elementor-tab-title {
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  color: var(--sk-dark) !important;
  padding: 18px 24px !important;
}

.sk-faq .elementor-tab-title:hover {
  color: var(--sk-teal) !important;
}

.sk-faq .elementor-tab-content {
  padding: 0 24px 18px !important;
  color: var(--sk-text) !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer default text color — backgrounds controlled by Elementor */
.site-footer,
.elementor-location-footer {
  color: var(--sk-white);
}

/* Footer logo — larger for brand prominence */
.elementor-location-footer .e-con[data-id="ftr002"] {
  flex-basis: 300px !important;
  min-width: 300px !important;
}
.elementor-location-footer .elementor-element-ftr003 img {
  width: 280px !important;
  max-width: 280px !important;
}

/* Footer headings — overridden in audit fixes section below */

/* Footer text/links — overridden in audit fixes section below */

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
  :root {
    --sk-section-padding: 50px 0;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.35rem; }

  .sk-testimonial {
    padding: 25px;
  }

  .elementor-button,
  .sk-btn {
    padding: 12px 28px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.sk-text-teal { color: var(--sk-teal) !important; }
.sk-text-cream { color: var(--sk-cream) !important; }
.sk-text-dark { color: var(--sk-dark) !important; }
.sk-text-center { text-align: center; }
.sk-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.sk-divider {
  width: 60px;
  height: 3px;
  background: var(--sk-teal);
  margin: 20px 0;
}
.sk-divider-center {
  width: 60px;
  height: 3px;
  background: var(--sk-teal);
  margin: 20px auto;
}

/* ==========================================================================
   VIO-Inspired Section Styles
   ========================================================================== */

/* Section label — small uppercase text above headings */
.sk-section-label {
  font-family: var(--sk-font-body);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sk-teal-dark);
  margin-bottom: 12px;
}

/* Pill button — primary filled */
.sk-pill {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: var(--sk-teal-dark);
  color: var(--sk-white);
  border: 2px solid var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill:hover {
  background-color: var(--sk-teal-dark-hover);
  border-color: var(--sk-teal-dark-hover);
  color: var(--sk-white);
}

/* Pill button — outlined */
.sk-pill-outline {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: transparent;
  color: var(--sk-teal-dark);
  border: 2px solid var(--sk-teal-dark);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill-outline:hover {
  background-color: var(--sk-teal-dark);
  color: var(--sk-white);
}

/* Pill button — white (for dark backgrounds) */
.sk-pill-white {
  display: inline-block;
  font-family: var(--sk-font-body);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: 50px;
  background-color: var(--sk-white);
  color: var(--sk-teal-dark);
  border: 2px solid var(--sk-white);
  text-decoration: none;
  transition: var(--sk-transition);
  cursor: pointer;
}

.sk-pill-white:hover {
  background-color: transparent;
  color: var(--sk-white);
  border-color: var(--sk-white);
}

/* Service image card with overlay */
.sk-service-image-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 3/4;
}

.sk-service-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sk-service-image-card:hover img {
  transform: scale(1.05);
}

.sk-service-image-card .sk-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: var(--sk-white);
}

/* Testimonial card — minimal */
.sk-testimonial-card {
  background: var(--sk-cream);
  padding: 40px;
  border-radius: 8px;
}

.sk-testimonial-card .sk-quote-mark {
  font-size: 48px;
  line-height: 1;
  color: var(--sk-teal);
  font-family: Georgia, serif;
  margin-bottom: 16px;
}

.sk-testimonial-card blockquote {
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--sk-text);
  margin: 0 0 16px 0;
}

.sk-testimonial-card cite {
  font-style: normal;
  font-weight: 600;
  color: var(--sk-dark);
  font-size: 0.95rem;
}

/* CTA Banner section */
.sk-cta-banner {
  background-color: var(--sk-teal-dark);
  padding: 80px 0;
  text-align: center;
}

.sk-cta-banner h2 {
  color: var(--sk-white);
  margin-bottom: 16px;
}

.sk-cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 30px;
}

/* ==========================================================================
   SITE-WIDE UI/UX AUDIT FIXES (VIO Med Spa comparison)
   Applied: March 2026
   ========================================================================== */

/* ---------- 1. SECTION SPACING — REDUCED ----------
   Tighter, modern spacing — still generous but not excessive.
   ---------------------------------------------------------- */

/* All parent (top-level) Elementor containers */
.e-con.e-parent {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Header and footer exceptions — don't over-pad */
.elementor-location-header .e-con.e-parent,
.elementor-location-footer .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Nested e-parent containers inside sections — zero padding (they inherit wrongly) */
.e-con.e-parent .e-con.e-parent {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Footer inner columns — restore compact padding */
.elementor-location-footer .e-con.e-parent > .e-con,
.elementor-location-footer .e-con.e-parent > .e-con-inner > .e-con {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

/* Hero sections — reduced padding */
.e-con.e-parent[data-id="b1hero0"],
.e-con.e-parent[data-id^="sp"],
.e-con.e-parent[data-id="abt001"],
.e-con.e-parent[data-id="svc001"],
.e-con.e-parent[data-id="ct_hero"],
.e-con.e-parent[data-id$="_hero"] {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

/* CTA banner sections */
.e-con.e-parent[data-id="f1cta0a"],
.e-con.e-parent[data-id$="_cta"],
.e-con.e-parent[data-id^="fac_cta"],
.e-con.e-parent[data-id^="ski_cta"],
.e-con.e-parent[data-id^="bod_cta"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* ---------- CONTACT PAGE — fix nested containers inheriting parent padding ----------
   Elementor marks many nested containers as e-parent on this page.
   Reset padding on inner wrappers; only the section-level ones should be padded.
   ---------------------------------------------------------------------------------- */
.e-con.e-parent[data-id="ct_info_inner"],
.e-con.e-parent[data-id="ct_info_left"],
.e-con.e-parent[data-id="ct_info_right"],
.e-con.e-parent[data-id="ct_address"],
.e-con.e-parent[data-id="ct_phone"],
.e-con.e-parent[data-id="ct_email"],
.e-con.e-parent[data-id="ct_hours"],
.e-con.e-parent[data-id="ct_form_inner"],
.e-con.e-parent[data-id="ct_cta_inner"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contact info items — compact spacing with left accent border */
.e-con.e-parent[data-id="ct_address"],
.e-con.e-parent[data-id="ct_phone"],
.e-con.e-parent[data-id="ct_email"],
.e-con.e-parent[data-id="ct_hours"] {
  padding: 16px 0 16px 20px !important;
  border-left: 3px solid var(--sk-teal) !important;
  margin-bottom: 12px !important;
}

/* Contact info section */
.e-con.e-parent[data-id="ct_info"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* Contact form section */
.e-con.e-parent[data-id="ct_form_section"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/* ---------- 2. HOMEPAGE SERVICE CARDS — CLEANER STYLING ----------
   VIO: borderless cards, tall portrait images, no visible card borders.
   Skinovatio: has teal outline borders on cards — too clinical.
   ----------------------------------------------------------------- */

/* Remove visible borders/outlines from homepage service cards */
.e-con.e-parent[data-id="c5cards"] .e-con .elementor-widget-button .elementor-button {
  border-color: var(--sk-teal-dark) !important;
  color: var(--sk-teal-dark) !important;
  background: transparent !important;
  font-weight: 400 !important;
}

.e-con.e-parent[data-id="c5cards"] .e-con .elementor-widget-button .elementor-button:hover {
  background: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
}

/* Homepage service cards — center-align card content */
.e-con[data-id="c5cards"] > .e-con,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con {
  align-items: center !important;
  text-align: center !important;
}

/* Homepage service cards — make images taller (portrait aspect ratio like VIO) */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image img {
  aspect-ratio: 3 / 4 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 8px !important;
}

/* Category page service cards — taller images too */
.elementor-element-fac_cards_row .elementor-widget-image img,
.elementor-element-ski_cards_row .elementor-widget-image img,
.elementor-element-bod_cards_row .elementor-widget-image img {
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  width: 100% !important;
}

/* ---------- 3. CTA BANNER BUTTON — WHITE FILL ----------
   Outlined button on dark bg is too subtle.
   VIO uses solid dark or white-filled CTAs.
   ------------------------------------------------------- */

/* CTA banner button — white filled for visibility */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-white) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-white) !important;
  font-weight: 500 !important;
}

.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-button .elementor-button:hover,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-button .elementor-button:hover {
  background-color: transparent !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-white) !important;
}

/* CTA banner subtitle — slightly brighter for readability */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-text-editor,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-text-editor {
  opacity: 0.95 !important;
}

/* ---------- 4. TESTIMONIAL CARDS — SOFTER ----------
   Lighter background, larger quote marks, better spacing.
   ------------------------------------------------------ */

/* Testimonial section — light background to differentiate from white */
.e-con.e-parent[data-id="e1tst0a"] {
  background-color: var(--sk-white) !important;
}

/* Testimonial inner cards — even softer */
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
  background-color: var(--sk-cream) !important;
  border-radius: 12px !important;
  padding: 36px 32px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Testimonial quote text — clean italic, improved readability */
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-text-editor {
  font-style: italic !important;
  line-height: 1.8 !important;
  color: var(--sk-text) !important;
  font-size: 15px !important;
}
.e-con.e-parent[data-id="e1tst0a"] .elementor-widget-text-editor p {
  color: var(--sk-text) !important;
}

/* ---------- 5. CONSISTENT BUTTON HOVER STATES ----------
   All buttons: lift + shadow on hover. Consistent across site.
   ------------------------------------------------------------ */

/* GLOBAL: All Elementor buttons — consistent hover lift */
.elementor-widget-button .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Hero CTA button — solid dark teal, prominent */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border: 2px solid var(--sk-teal-dark) !important;
  padding: 16px 36px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-button .elementor-button:hover {
  background-color: var(--sk-teal-dark-hover) !important;
  border-color: var(--sk-teal-dark-hover) !important;
  box-shadow: 0 6px 24px rgba(0, 148, 144, 0.35) !important;
}

/* All filled teal buttons — darken on hover */
.e-con.e-parent[data-id="abt001"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id="svc001"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-button .elementor-button,
.e-con.e-parent[data-id$="_hero"] .elementor-widget-button .elementor-button {
  font-weight: 500 !important;
}

/* Outlined buttons — fill on hover (homepage service cards, "Learn More About Us", "See All") */
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-button .elementor-button {
  border-width: 2px !important;
  padding: 14px 32px !important;
  font-weight: 500 !important;
}
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-button .elementor-button:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
}

/* "See All Services" button hover */
.elementor-element-cmallsvc .elementor-button:hover {
  background-color: var(--sk-teal-dark) !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-teal-dark) !important;
}

/* "Learn More →" card buttons — hover neutralised (entire card is the click target).
   The ::after overlay catches pointer events; button stays visually unchanged. */

/* Header CTA — always teal filled */
.elementor-location-header .elementor-widget-button .elementor-button:hover {
  background-color: var(--sk-teal-dark-hover) !important;
  border-color: var(--sk-teal-dark-hover) !important;
  color: var(--sk-white) !important;
  box-shadow: 0 4px 16px rgba(0, 148, 144, 0.3) !important;
}

/* ---------- 6. FOOTER — BETTER CONTRAST ----------
   Column headings: white instead of teal-light for clarity.
   ------------------------------------------------------- */

.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer .elementor-heading-title {
  color: var(--sk-white);
  font-family: var(--sk-font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 20px !important;
}

/* Footer links — brighter, better hover */
.elementor-location-footer a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.elementor-location-footer a:hover {
  color: var(--sk-white);
  opacity: 1;
}

/* Footer bottom copyright bar */
.elementor-location-footer .elementor-widget-text-editor {
  font-size: 13px !important;
}

/* ---------- 7. TYPOGRAPHY REFINEMENTS ----------
   Larger headings, better label spacing.
   ----------------------------------------------- */

/* Section labels — more refined spacing */
.elementor-widget-heading .elementor-heading-title[style*="letter-spacing"],
.elementor-widget-text-editor[class*="label"] {
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
}

/* Section logo — brand mark above section headings */
.sk-section-logo {
  margin-bottom: 8px !important;
  text-align: center !important;
}
.sk-section-logo img {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
  opacity: 0.85;
}

/* Homepage hero body text — slightly darker for better contrast on light gray */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-text-editor p {
  color: #3A3A3A !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Homepage hero heading — larger, more dramatic like VIO */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(2.8rem, 5.5vw, 4.2rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

/* Homepage hero logo — left-aligned, enlarged */
.e-con[data-id="b2left1"] > .elementor-widget-image {
  align-self: flex-start !important;
  text-align: left !important;
}
.e-con[data-id="b2left1"] > .elementor-widget-image img {
  width: 320px !important;
  max-width: 320px !important;
  height: auto !important;
}

/* --- HERO LEFT-ALIGNMENT (consistent across all pages) --- */
/* Services page hero */
.e-con.e-parent[data-id="svc001"] .elementor-widget-heading,
.e-con.e-parent[data-id="svc001"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="svc001"] .elementor-widget-text-editor p {
  text-align: left !important;
}

/* Contact page hero */
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-heading,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-text-editor,
.e-con.e-parent[data-id="ct_hero"] .elementor-widget-text-editor p {
  text-align: left !important;
}

/* Section headings (H2) — dark for visual weight, larger size */
.e-con.e-parent .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(2.2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.15 !important;
  color: var(--sk-dark) !important;
}

/* Card headings (H3, H4) — deep teal brand color */
.e-con.e-parent .elementor-widget-heading h3.elementor-heading-title,
.e-con.e-parent .elementor-widget-heading h4.elementor-heading-title {
  color: var(--sk-teal-dark) !important;
}

/* Section labels (H6) — deep teal for WCAG AA contrast (seafoam #3BD4AE = 1.87 ratio, FAIL) */
.e-con.e-parent .elementor-widget-heading h6.elementor-heading-title {
  color: var(--sk-teal-dark) !important;
}

/* ALL headings on DARK/TEAL backgrounds — force white */
.e-con.e-parent[data-id="f1cta0a"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id="svc900"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id="abt050"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id$="_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="fac_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="ski_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="bod_cta"] .elementor-widget-heading .elementor-heading-title,
.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer .e-con.e-parent .elementor-widget-heading h4.elementor-heading-title,
.elementor-location-footer .e-con.e-parent .elementor-widget-heading .elementor-heading-title,
.sk-bg-teal .elementor-widget-heading .elementor-heading-title,
.sk-bg-dark .elementor-widget-heading .elementor-heading-title {
  color: var(--sk-white) !important;
}

/* ---------- 8. IMAGE REFINEMENTS ----------
   Better border-radius and object-fit for consistency.
   ---------------------------------------------------- */

/* All Elementor images — consistent rounding */
.elementor-widget-image img {
  border-radius: 8px;
}

/* Hero images — slightly more rounded */
.e-con.e-parent[data-id="b1hero0"] .elementor-widget-image img,
.e-con.e-parent[data-id="d1abt0a"] .elementor-widget-image img {
  border-radius: 12px !important;
}

/* ---------- 9. CONSISTENT CARD HOVER EFFECTS ----------
   All cards get: lift + shadow + image zoom on hover.
   ------------------------------------------------------- */

/* ---- CARD LIFT + SHADOW (all card-like containers) ---- */

/* Homepage service cards (Face / Skin / Body) */
.e-con[data-id="c5cards"] > .e-con,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}
.e-con[data-id="c5cards"] > .e-con:hover,
.e-con[data-id="c5cards"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

/* Services page — category cards (Face/Skin/Body) */
.e-con[data-id="svc010"] > .e-con,
.e-con[data-id="svc010"] > .e-con-inner > .e-con,
.e-con[data-id="svc_cats"] > .e-con,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  cursor: pointer !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
.e-con[data-id="svc010"] > .e-con:hover,
.e-con[data-id="svc010"] > .e-con-inner > .e-con:hover,
.e-con[data-id="svc_cats"] > .e-con:hover,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Services page — subcategory service cards (Face/Skin/Body grids) */
[data-id="svc1012"] > .e-con,
[data-id="svc1012"] > .e-con-inner > .e-con,
[data-id="svc1022"] > .e-con,
[data-id="svc1022"] > .e-con-inner > .e-con,
[data-id="svc1032"] > .e-con,
[data-id="svc1032"] > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  cursor: pointer !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
[data-id="svc1012"] > .e-con:hover,
[data-id="svc1012"] > .e-con-inner > .e-con:hover,
[data-id="svc1022"] > .e-con:hover,
[data-id="svc1022"] > .e-con-inner > .e-con:hover,
[data-id="svc1032"] > .e-con:hover,
[data-id="svc1032"] > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Category page service cards (Face, Skin, Body & Wellness) */
.elementor-element-fac_cards_row > .e-con,
.elementor-element-fac_cards_row > .e-con-inner > .e-con,
.elementor-element-ski_cards_row > .e-con,
.elementor-element-ski_cards_row > .e-con-inner > .e-con,
.elementor-element-bod_cards_row > .e-con,
.elementor-element-bod_cards_row > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: var(--sk-white) !important;
}
.elementor-element-fac_cards_row > .e-con:hover,
.elementor-element-fac_cards_row > .e-con-inner > .e-con:hover,
.elementor-element-ski_cards_row > .e-con:hover,
.elementor-element-ski_cards_row > .e-con-inner > .e-con:hover,
.elementor-element-bod_cards_row > .e-con:hover,
.elementor-element-bod_cards_row > .e-con-inner > .e-con:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
  border-color: var(--sk-teal) !important;
}

/* Testimonial cards */
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.e-con.e-parent[data-id="e1tst0a"] .e-con.e-child:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* About page trust cards */
.elementor-element-abt032 > .e-con,
.elementor-element-abt032 > .e-con-inner > .e-con {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.elementor-element-abt032 > .e-con:hover,
.elementor-element-abt032 > .e-con-inner > .e-con:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* ---- IMAGE ZOOM ON HOVER (all card images) ---- */

/* Consistent image container overflow clip */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image,
[data-id="svc1012"] .elementor-widget-image,
[data-id="svc1022"] .elementor-widget-image,
[data-id="svc1032"] .elementor-widget-image,
.elementor-element-fac_cards_row .elementor-widget-image,
.elementor-element-ski_cards_row .elementor-widget-image,
.elementor-element-bod_cards_row .elementor-widget-image,
.e-con.e-parent[data-id="svc010"] .elementor-widget-image,
.e-con.e-parent[data-id="svc_cats"] .elementor-widget-image {
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* All card images — smooth zoom transition */
.e-con.e-parent[data-id="c5cards"] .elementor-widget-image img,
[data-id="svc1012"] .elementor-widget-image img,
[data-id="svc1022"] .elementor-widget-image img,
[data-id="svc1032"] .elementor-widget-image img,
.elementor-element-fac_cards_row .elementor-widget-image img,
.elementor-element-ski_cards_row .elementor-widget-image img,
.elementor-element-bod_cards_row .elementor-widget-image img,
.e-con.e-parent[data-id="svc010"] .elementor-widget-image img,
.e-con.e-parent[data-id="svc_cats"] .elementor-widget-image img {
  transition: transform 0.5s ease !important;
}

/* All card images — zoom on parent card hover */
.e-con[data-id="c5cards"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1012"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1012"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
[data-id="svc1022"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1022"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
[data-id="svc1032"] > .e-con:hover .elementor-widget-image img,
[data-id="svc1032"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-fac_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-fac_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-ski_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-ski_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.elementor-element-bod_cards_row > .e-con:hover .elementor-widget-image img,
.elementor-element-bod_cards_row > .e-con-inner > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc010"] > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc010"] > .e-con-inner > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc_cats"] > .e-con:hover .elementor-widget-image img,
.e-con[data-id="svc_cats"] > .e-con-inner > .e-con:hover .elementor-widget-image img {
  transform: scale(1.05) !important;
}

/* ---- LEARN MORE ARROW ANIMATION ---- */
/* Arrow slides right on card hover */
.elementor-widget-button .elementor-button {
  transition: all 0.3s ease !important;
}

/* "Learn More →" buttons — arrow animation */
.elementor-widget-button .elementor-button-text {
  transition: letter-spacing 0.3s ease !important;
}

/* ---------- 10. ALTERNATING SECTION BACKGROUNDS ----------
   VIO pattern: white → light gray → white → dark → white.
   Ensure proper visual rhythm.
   --------------------------------------------------------- */

/* About/Why section — confirm light gray bg */
.e-con.e-parent[data-id="d1abt0a"] {
  background-color: var(--sk-cream) !important;
}

/* Testimonials on white */
.e-con.e-parent[data-id="e1tst0a"] {
  background-color: var(--sk-white) !important;
}

/* ---------- 11. MOBILE REFINEMENTS ---------- */
@media (max-width: 767px) {
  /* Reduce section padding on mobile */
  .e-con.e-parent {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .e-con.e-parent[data-id="b1hero0"],
  .e-con.e-parent[data-id^="sp"],
  .e-con.e-parent[data-id="abt001"],
  .e-con.e-parent[data-id="svc001"],
  .e-con.e-parent[data-id="ct_hero"],
  .e-con.e-parent[data-id$="_hero"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Hero heading — still impactful on mobile */
  .e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading .elementor-heading-title {
    font-size: 2.4rem !important;
  }

  /* Service card images — less tall on mobile */
  .e-con.e-parent[data-id="c5cards"] .elementor-widget-image img {
    aspect-ratio: 4 / 3 !important;
  }
}

/* ==========================================================================
   SERVICE SUBPAGE — FULL-WIDTH CONTENT (sidebar removed)
   Matches VIO's clean single-column service page layout.
   ========================================================================== */

/* Content section container — now column direction, no sidebar */
.sk-service-page .e-con.e-parent[data-id^="sp0"][data-id$="0"]:not([data-id$="00"]):not([data-id$="01"]),
.e-con.e-parent[data-id^="sp"][data-id$="10"] {
  max-width: 100% !important;
}

/* Content inner container — expand to full width */
.e-con.e-parent[data-id^="sp"][data-id$="10"] > .e-con,
.e-con.e-parent[data-id^="sp"][data-id$="10"] > .e-con-inner > .e-con {
  width: 100% !important;
  max-width: 100% !important;
}

/* Content text — readable max-width like VIO (~800px) */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor {
  max-width: 800px !important;
}

/* "About This Treatment" heading — style as VIO section label */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem) !important;
  margin-bottom: 24px !important;
}

/* Service page body text — better readability */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor {
  font-size: 16px !important;
  line-height: 1.8 !important;
}

/* Sub-headings within content (h3) — teal brand color */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor h3 {
  font-family: var(--sk-font-heading) !important;
  font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important;
  margin-top: 40px !important;
  margin-bottom: 16px !important;
  color: var(--sk-teal-dark) !important;
}

/* Bullet lists within content */
.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor ul {
  padding-left: 24px !important;
  margin-bottom: 24px !important;
}

.e-con.e-parent[data-id^="sp"][data-id$="10"] .elementor-widget-text-editor li {
  margin-bottom: 8px !important;
  line-height: 1.7 !important;
}

/* Service page CTA banner — match homepage CTA style */
.e-con.e-parent[data-id^="sp_cta_"] {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(2rem, 4vw, 3rem) !important;
  margin-bottom: 16px !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-text-editor {
  margin-bottom: 24px !important;
}

/* CTA banner button on service pages — white, same as homepage */
.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-button .elementor-button {
  background-color: var(--sk-white) !important;
  color: var(--sk-teal-dark) !important;
  border: 2px solid var(--sk-white) !important;
  font-weight: 500 !important;
}

.e-con.e-parent[data-id^="sp_cta_"] .elementor-widget-button .elementor-button:hover {
  background-color: transparent !important;
  color: var(--sk-white) !important;
  border-color: var(--sk-white) !important;
}

/* "← Back to All Services" link — subtle, VIO-style */
.e-con.e-parent[data-id^="sp"] .elementor-widget-text-editor a[href*="/services"] {
  font-size: 14px !important;
  color: var(--sk-teal-dark) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s ease !important;
}

.e-con.e-parent[data-id^="sp"] .elementor-widget-text-editor a[href*="/services"]:hover {
  opacity: 1 !important;
}

/* ==========================================================================
   Contrast Fixes — White text on ALL teal (#009490) background sections
   Uses .sk-teal-section class added via JS, plus specific data-id fallbacks
   ========================================================================== */

/*
 * UNIVERSAL: Any teal CTA or footer section — force ALL text elements white.
 * Targets every page's CTA banner + footer by matching known data-id patterns.
 */

/* --- CTA Sections (all pages) — text-editor widgets only, NOT buttons --- */
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor,
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor p,
.e-con[data-id="f1cta0a"] .elementor-widget-text-editor span,
.e-con[data-id="svc900"] .elementor-widget-text-editor,
.e-con[data-id="svc900"] .elementor-widget-text-editor p,
.e-con[data-id="svc900"] .elementor-widget-text-editor span,
.e-con[data-id="abt050"] .elementor-widget-text-editor,
.e-con[data-id="abt050"] .elementor-widget-text-editor p,
.e-con[data-id="abt050"] .elementor-widget-text-editor span,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor p,
.e-con[data-id="ct_cta"] .elementor-widget-text-editor span,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor p,
.e-con[data-id="fac_cta"] .elementor-widget-text-editor span,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor p,
.e-con[data-id="ski_cta"] .elementor-widget-text-editor span,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor p,
.e-con[data-id="bod_cta"] .elementor-widget-text-editor span,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor p,
.e-con[data-id^="sp_cta_"] .elementor-widget-text-editor span {
  color: var(--sk-white) !important;
}

/* ==========================================================================
   CTA Sections — Hero background image with Deep Teal overlay
   Applies to all "Not Sure Where to Start?" / CTA banner sections.
   ========================================================================== */

/* CTA sections need positioning context for ::before background */
.e-con.e-parent[data-id="f1cta0a"],
.e-con.e-parent[data-id="svc900"],
.e-con.e-parent[data-id="abt050"],
.e-con.e-parent[data-id="ct_cta"],
.e-con.e-parent[data-id="fac_cta"],
.e-con.e-parent[data-id="ski_cta"],
.e-con.e-parent[data-id="bod_cta"],
.e-con.e-parent[data-id^="sp_cta_"] {
  position: relative !important;
  overflow: hidden !important;
}

/* CTA ::before — shared layout (Deep Teal overlay + cover sizing) */
.e-con.e-parent[data-id="f1cta0a"]::before,
.e-con.e-parent[data-id="svc900"]::before,
.e-con.e-parent[data-id="abt050"]::before,
.e-con.e-parent[data-id="ct_cta"]::before,
.e-con.e-parent[data-id="fac_cta"]::before,
.e-con.e-parent[data-id="ski_cta"]::before,
.e-con.e-parent[data-id="bod_cta"]::before,
.e-con.e-parent[data-id^="sp_cta_"]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* CTA ::before — page-specific hero images behind the Deep Teal overlay */
.e-con.e-parent[data-id="f1cta0a"]::before {                       /* Home */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/home-scaled.jpg');
}
.e-con.e-parent[data-id="abt050"]::before {                        /* About */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/face-2-hero-scaled.jpg');
}
.e-con.e-parent[data-id="svc900"]::before {                        /* Services */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/med-spa-services-scaled.jpg');
}
.e-con.e-parent[data-id="ct_cta"]::before {                        /* Contact */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/footer-3-scaled.jpg');
}
.e-con.e-parent[data-id="fac_cta"]::before {                       /* Face */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/face-scaled.jpg');
}
.e-con.e-parent[data-id="ski_cta"]::before {                       /* Skin */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/OUR-TREATMENTS-scaled.jpg');
}
.e-con.e-parent[data-id="bod_cta"]::before {                       /* Body & Wellness */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Body-Wellness-scaled.jpg');
}
/* Inner service page CTAs — each uses its own hero image */
.e-con.e-parent[data-id="sp_cta_34"]::before {                     /* Botox */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Botox-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_35"]::before {                     /* Dermaplaning */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Dermaplaning-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_36"]::before {                     /* Dermal Fillers */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Dermal-Fillers-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_37"]::before {                     /* Emsculpt NEO */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Emsculpt-NEO-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_38"]::before {                     /* Forma Laser */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Forma-Laser-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_39"]::before {                     /* HydraFacials */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/HydraFacials-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_40"]::before {                     /* IPL Skin Rejuvenation */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/IPL-Skin-Rejuvenation-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_41"]::before {                     /* Laser Hair Removal */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Laser-Hair-Removal-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_42"]::before {                     /* Microneedling with PRP */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Microneedling-with-PRP-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_43"]::before {                     /* Microneedling with HA */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Microneedling-with-PRP-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_44"]::before {                     /* Morpheus8 */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Morpheus8-RF-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_45"]::before {                     /* Oxygenating Facials */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Oxygenating-Facials-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_46"]::before {                     /* PRP Hair Restoration */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/PRP-Hair-Restoration-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_47"]::before {                     /* Medical Weight Loss */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Medical-Weight-Loss-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_48"]::before {                     /* PDO Lifting Threads */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/PDO-Lifting-Threads-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_49"]::before {                     /* Chemical Peel */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Chemical-Peel-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_50"]::before {                     /* Kybella */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Deoxycholic-Acid-Kybella-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_51"]::before {                     /* IV Therapy */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/IV-Therapy-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_52"]::before {                     /* Candela Laser */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Candela-Laser-Hair-Removal-scaled.jpg');
}
.e-con.e-parent[data-id="sp_cta_53"]::before {                     /* Prisma 3D */
  background-image: linear-gradient(rgba(0, 148, 144, 0.88), rgba(0, 148, 144, 0.88)),
                    url('/wp-content/uploads/2026/03/Prisma-3D-scaled.jpg');
}

/* Keep CTA content above the ::before background */
.e-con.e-parent[data-id="f1cta0a"] > .e-con-inner,
.e-con.e-parent[data-id="svc900"] > .e-con-inner,
.e-con.e-parent[data-id="abt050"] > .e-con-inner,
.e-con.e-parent[data-id="ct_cta"] > .e-con-inner,
.e-con.e-parent[data-id="fac_cta"] > .e-con-inner,
.e-con.e-parent[data-id="ski_cta"] > .e-con-inner,
.e-con.e-parent[data-id="bod_cta"] > .e-con-inner,
.e-con.e-parent[data-id^="sp_cta_"] > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* --- Inner Service Page Sidebar --- */
.sk-service-sidebar {
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
}

/* Sidebar inner card */
.sk-sidebar-card {
  background: var(--sk-white) !important;
  border: 1px solid var(--sk-gray-light) !important;
  border-top: 3px solid var(--sk-teal-dark) !important;
  border-radius: 8px !important;
  --padding-top: 32px !important;
  --padding-right: 28px !important;
  --padding-bottom: 32px !important;
  --padding-left: 28px !important;
  padding: 32px 28px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

/* Sidebar logo — box logo, centered */
.sk-service-sidebar .elementor-widget-image img {
  width: 180px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Sidebar heading — "Schedule a Visit" */
.sk-service-sidebar .elementor-widget-heading .elementor-heading-title {
  font-family: var(--sk-font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--sk-dark) !important;
}

/* Sidebar phone link */
.sk-service-sidebar .elementor-widget-text-editor a {
  color: var(--sk-teal-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}
.sk-service-sidebar .elementor-widget-text-editor a:hover {
  color: var(--sk-teal) !important;
}

/* Sidebar contact details */
.sk-service-sidebar .elementor-widget-text-editor p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--sk-text) !important;
}

/* Sidebar button — pill shape, full width, with bottom spacing inside card */
.sk-service-sidebar .elementor-widget-button {
  margin-bottom: 24px !important;
  padding-bottom: 8px !important;
}
.sk-service-sidebar .elementor-widget-button .elementor-button {
  border-radius: 50px !important;
  font-family: var(--sk-font-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  padding: 12px 24px !important;
  width: 100% !important;
  text-align: center !important;
}

/* --- Footer (global template) — default white text, Elementor can override --- */
.e-con[data-id="ftr001"] p,
.e-con[data-id="ftr001"] span,
.e-con[data-id="ftr001"] li,
.e-con[data-id="ftr001"] a,
.e-con[data-id="ftr001"] .elementor-widget-text-editor,
.e-con[data-id="ftr001"] .elementor-text-editor {
  color: var(--sk-white);
}

/* Footer links: light mint hover */
.e-con[data-id="ftr001"] a:hover {
  color: var(--sk-teal-light);
  text-decoration: underline;
}

/* Footer copyright bar — slightly dimmed */
.e-con[data-id="ftr014"] p,
.e-con[data-id="ftr014"] span,
.e-con[data-id="ftr014"] li,
.e-con[data-id="ftr014"] .elementor-widget-text-editor,
.e-con[data-id="ftr014"] .elementor-text-editor {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   CLICKABLE CARDS — Full card acts as link (JS handles click, CSS handles visuals)
   ========================================================================== */

/* Card containers — pointer cursor & hover lift */
.sk-clickable-card {
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.sk-clickable-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   Mobile Header & Responsive Fixes
   ========================================================================== */

@media (max-width: 767px) {
  /* Header CTA button — hide on mobile to prevent overflow */
  .elementor-location-header .elementor-widget-button {
    display: none !important;
  }

  /* Ensure hero sections don't have excessive padding on mobile */
  .e-con.e-parent[data-id="b1hero0"],
  .e-con.e-parent[data-id="abt001"],
  .e-con.e-parent[data-id="cnt001"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* CTA banner section — less padding on mobile */
  .e-con.e-parent[data-id="f1cta0a"],
  .e-con.e-parent[data-id^="sp_cta_"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Service cards — stack single column on mobile */
  .e-con.e-parent[data-id="c1svcs0"] .elementor-widget-heading h2.elementor-heading-title {
    font-size: 2rem !important;
  }

  /* Footer columns — reduce padding on mobile */
  .e-con.e-parent[data-id="h1ftr0a"] {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  /* About hero text — prevent overflow on mobile */
  .e-con.e-parent[data-id="abt001"] .elementor-widget-heading h1 {
    font-size: 2.2rem !important;
  }

  /* Inner service page sidebar — stack below content on mobile */
  .sk-service-sidebar {
    position: static !important;
    width: 100% !important;
    order: 2 !important;
  }
}

/* ==========================================================================
   MOBILE NAVIGATION — Full menu in hamburger dropdown
   Elementor's auto-generated dropdown is broken (only shows Services sub-items).
   Fix: On mobile, repurpose the main menu as a vertical slide-down panel,
   triggered by Elementor's existing hamburger toggle via JS.
   ========================================================================== */

@media (max-width: 1024px) {
  /* --- HEADER LAYOUT: logo left, hamburger right --- */
  .elementor-location-header .elementor-element-hdr_inner {
    flex-direction: row !important;
    --flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Hide the nav wrapper and CTA on tablet/mobile — hamburger takes over */
  .elementor-element-hdr_nav_wrap {
    display: none !important;
  }
  .elementor-element-hdr_cta_wrap {
    display: none !important;
  }

  /* Logo wrapper — shrink to fit */
  .elementor-element-hdr_logo_wrap {
    width: auto !important;
    min-width: auto !important;
    flex: 1 !important;
  }

  /* --- HAMBURGER TOGGLE BUTTON --- */
  .sk-mobile-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none;
    box-shadow: none !important;
    cursor: pointer;
    padding: 8px;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .sk-mobile-toggle:hover,
  .sk-mobile-toggle:focus,
  .sk-mobile-toggle:active {
    background: transparent !important;
    background-color: transparent !important;
    outline: none;
    box-shadow: none !important;
  }
  .sk-mobile-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--sk-dark);
    position: relative;
    transition: all 0.3s ease;
  }
  .sk-mobile-toggle span::before,
  .sk-mobile-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--sk-dark);
    transition: all 0.3s ease;
  }
  .sk-mobile-toggle span::before { top: -7px; }
  .sk-mobile-toggle span::after { top: 7px; }

  /* Toggle X state */
  .sk-mobile-toggle.active span { background: transparent; }
  .sk-mobile-toggle.active span::before { top: 0; transform: rotate(45deg); }
  .sk-mobile-toggle.active span::after { top: 0; transform: rotate(-45deg); }

  /* --- MOBILE SLIDE-DOWN MENU --- */
  .sk-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sk-white);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    padding: 16px 0;
    border-top: 1px solid var(--sk-gray-light);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent body scroll when mobile menu is open */
  body.sk-mobile-menu-open {
    overflow: hidden !important;
  }
  .sk-mobile-menu.open {
    display: block;
  }

  .sk-mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Top-level items */
  .sk-mobile-menu > ul > li > a {
    display: block;
    padding: 14px 24px;
    font-family: var(--sk-font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--sk-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--sk-gray-light);
    transition: background 0.2s ease;
  }
  .sk-mobile-menu > ul > li > a:hover,
  .sk-mobile-menu > ul > li > a:active {
    background: var(--sk-cream);
    color: var(--sk-teal-dark);
  }

  /* Services parent — arrow indicator */
  .sk-mobile-menu > ul > li.has-children > a::after {
    content: '›';
    float: right;
    font-size: 20px;
    transition: transform 0.3s ease;
  }
  .sk-mobile-menu > ul > li.has-children.open > a::after {
    transform: rotate(90deg);
  }

  /* Sub-menu (Services accordion) */
  .sk-mobile-menu .sk-mobile-submenu {
    display: none;
    background: var(--sk-cream);
  }
  .sk-mobile-menu .has-children.open .sk-mobile-submenu {
    display: block;
  }

  /* Category headings (Face, Skin, Body & Wellness) */
  .sk-mobile-submenu .sk-mobile-cat-heading {
    display: block;
    padding: 10px 24px 6px 32px;
    font-family: var(--sk-font-body);
    font-size: 13px;
    font-weight: 700;
    color: var(--sk-teal-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: none;
  }

  /* Service links under each category */
  .sk-mobile-submenu a {
    display: block;
    padding: 10px 24px 10px 40px;
    font-family: var(--sk-font-body);
    font-size: 15px;
    font-weight: 300;
    color: var(--sk-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .sk-mobile-submenu a:hover {
    background: rgba(0, 148, 144, 0.06);
    color: var(--sk-teal-dark);
  }

  /* CTA button at bottom of mobile menu */
  .sk-mobile-menu .sk-mobile-cta {
    display: block;
    margin: 16px 24px;
    padding: 14px 24px;
    background: var(--sk-teal-dark);
    color: var(--sk-white) !important;
    border-radius: 50px;
    text-align: center;
    font-family: var(--sk-font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease;
  }
  .sk-mobile-menu .sk-mobile-cta:hover {
    background: var(--sk-teal-dark-hover);
  }

  /* Make header position relative for dropdown positioning */
  .elementor-location-header .e-con.e-parent[data-id="hdr_outer"] {
    position: relative !important;
  }
}

/* Hide mobile elements on desktop */
@media (min-width: 1025px) {
  .sk-mobile-toggle,
  .sk-mobile-menu {
    display: none !important;
  }
}

/* ── MOBILE FOOTER — tighter layout with 2-column nav ── */
@media (max-width: 767px) {
  /* Force inner container to wrap in row direction */
  .elementor-location-footer [data-id="ftr001"] > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
  }

  /* Logo + tagline — full width, centered, compact */
  .elementor-location-footer [data-id="ftr002"] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 28px 20px 12px !important;
    text-align: center;
    align-items: center !important;
  }
  .elementor-location-footer [data-id="ftr002"] img {
    max-width: 180px !important;
    margin: 0 auto !important;
  }
  .elementor-location-footer [data-id="ftr002"] .elementor-widget-text-editor {
    text-align: center;
  }

  /* Quick Links + Services — side by side, 50% each */
  .elementor-location-footer [data-id="ftr005"],
  .elementor-location-footer [data-id="ftr008"] {
    flex-basis: 50% !important;
    width: 50% !important;
    min-width: 0 !important;
    max-width: 50% !important;
    padding: 16px 16px !important;
    box-sizing: border-box;
  }
  .elementor-location-footer [data-id="ftr005"] .elementor-heading-title,
  .elementor-location-footer [data-id="ftr008"] .elementor-heading-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr005"] .elementor-nav-menu li,
  .elementor-location-footer [data-id="ftr005"] .elementor-widget-text-editor p,
  .elementor-location-footer [data-id="ftr005"] a,
  .elementor-location-footer [data-id="ftr008"] .elementor-nav-menu li,
  .elementor-location-footer [data-id="ftr008"] .elementor-widget-text-editor p,
  .elementor-location-footer [data-id="ftr008"] a {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* Contact — full width, centered, compact */
  .elementor-location-footer [data-id="ftr011"] {
    flex-basis: 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    padding: 16px 20px 20px !important;
    text-align: center;
    align-items: center !important;
  }
  .elementor-location-footer [data-id="ftr011"] .elementor-heading-title {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr011"] .elementor-widget-text-editor {
    text-align: center;
  }

  /* Reduce paragraph spacing in all footer columns */
  .elementor-location-footer [data-id="ftr005"] p,
  .elementor-location-footer [data-id="ftr008"] p {
    margin-bottom: 8px !important;
  }
  .elementor-location-footer [data-id="ftr011"] p {
    margin-bottom: 10px !important;
  }
  .elementor-location-footer [data-id="ftr002"] p {
    margin-bottom: 4px !important;
  }

  /* Copyright bar — tighter */
  .elementor-location-footer [data-id="ftr014"] {
    padding: 12px 16px !important;
  }
  .elementor-location-footer [data-id="ftr014"] .e-con-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .elementor-location-footer [data-id="ftr014"] .elementor-widget-text-editor {
    text-align: center !important;
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens — tighter heading sizes */
  .e-con.e-parent[data-id="b1hero0"] .elementor-widget-heading h1 {
    font-size: 2.5rem !important;
  }

  /* Testimonial cards — full width */
  .e-con.e-parent[data-id="e1tst0a"] .e-con.e-child {
    min-width: 100% !important;
  }
}