/* ═══════════════════════════════════════════════════════════
   SANTE BARLEY · GLOBAL CSS V13
   Consolidated + Original Design Preserved
   - Light/Dark theme tokens preserved
   - Jetpack floating share buttons remain removed
   - Legacy animation compatibility preserved
   - Dashboard duplicate overrides consolidated
   - Superseded Full-Width V10 removed
   - Safe Universal Full-Width Sections V13 retained
   - Final universal animation behavior remains under TOP PAGE CONTROLLER V5
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

/* ─────────────────────────────────────────────────────────
   LIGHT MODE VARIABLES
   ───────────────────────────────────────────────────────── */

:root {
  --forest: #1a3829;
  --gold: #c9a84c;
  --gold-light: #e2c87a;
  --sage-light: #a8cdb5;

  --bg-body: #f8f3e8;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f0e8d5;
  --bg-card: #ffffff;

  --text-primary: #1c1c1c;
  --text-subtle: #6a8070;

  --border-soft: rgba(26, 56, 41, 0.08);

  --section-label-color: #3d7a54;
  --section-h2-color: #1a3829;

  --testimonial-bg: #f8f3e8;
  --feature-bg: #ffffff;
  --about-text: #4a5c51;
}

/* ─────────────────────────────────────────────────────────
   DARK MODE VARIABLES
   ───────────────────────────────────────────────────────── */

html[data-theme="dark"] {
  --bg-body: #0d1c14;
  --bg-surface: #111e16;
  --bg-surface-alt: #0f1a11;
  --bg-card: #162b1f;

  --text-primary: #f0ebe0;
  --text-subtle: #7aad8a;

  --border-soft: rgba(122, 173, 138, 0.12);

  --section-label-color: #7aad8a;
  --section-h2-color: #f0ebe0;

  --testimonial-bg: #162b1f;
  --feature-bg: #1a2e21;
  --about-text: #a8cdb5;
}

/* ─────────────────────────────────────────────────────────
   BODY BASE
   ───────────────────────────────────────────────────────── */

body {
  background-color: var(--bg-body, #f8f3e8);
  color: var(--text-primary, #1c1c1c);
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition:
    background-color 0.35s ease,
    color 0.35s ease;
}

html[data-theme="dark"] body {
  background-color: #0d1c14 !important;
  color: #f0ebe0 !important;
}

/* ─────────────────────────────────────────────────────────
   PAGE BACKGROUND FIXES
   WordPress / Theme / Elementor override support
   ───────────────────────────────────────────────────────── */

body,
.site,
.site-content,
#page,
#content,
#main,
.hfeed,
.wp-site-blocks {
  background-color: var(--bg-body, #f8f3e8) !important;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] #page,
html[data-theme="dark"] #content,
html[data-theme="dark"] #main,
html[data-theme="dark"] .hfeed,
html[data-theme="dark"] .wp-site-blocks {
  background-color: #0d1c14 !important;
}

/* ─────────────────────────────────────────────────────────
   ELEMENTOR FULL WIDTH FIXES
   ───────────────────────────────────────────────────────── */

.elementor-section.elementor-top-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-section .elementor-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-widget-html {
  width: 100% !important;
}

.elementor-column,
.elementor-col-100,
.elementor-widget-wrap {
  padding: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   DARK / LIGHT MODE TOGGLE BUTTON
   Compact icon-only switch
   Existing IDs preserved for Top Page Controller logic:
   #sbThemeToggle, #sbToggleIcon, #sbToggleLabel
   ───────────────────────────────────────────────────────── */

.sb-theme-toggle {
  position: fixed;
  top: 10.5rem;
  right: 1.2rem;
  z-index: 99999;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  width: 48px;
  height: 26px;
  min-width: 48px;
  min-height: 26px;
  max-width: 48px;
  max-height: 26px;
  padding: 3px;

  background: #ffffff;
  border: 1px solid rgba(26, 56, 41, 0.18);
  border-radius: 999px;

  cursor: pointer;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;

  white-space: nowrap;
  overflow: hidden;
}

.sb-theme-toggle:hover {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.sb-toggle-icon {
  position: absolute;
  left: 4px;
  top: 50%;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;

  border-radius: 50%;
  background: #1a3829;
  color: #ffffff;

  font-size: 10px;
  line-height: 1;

  transform: translateY(-50%);
  transition:
    left 0.25s ease,
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.sb-toggle-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  max-width: 1px !important;
  max-height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

html[data-theme="dark"] .sb-theme-toggle {
  background: #1e2d24;
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .sb-toggle-icon {
  left: 24px;
  background: #c9a84c;
  color: #1a3829;
}

@media (max-width: 1024px) {
  .sb-theme-toggle {
    top: 8.5rem !important;
  }
}

@media (max-width: 600px) {
  .sb-theme-toggle {
    top: 7.5rem !important;
    right: 0.9rem !important;
  }
}

/* ─────────────────────────────────────────────────────────
   BOX SIZING RESET FOR SANTE WRAPPERS
   ───────────────────────────────────────────────────────── */

.sb-wrap *,
.sb-wrap *::before,
.sb-wrap *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─────────────────────────────────────────────────────────
   HIDE PAGE TITLE
   ───────────────────────────────────────────────────────── */

.entry-title,
.page-title,
.post-title,
h1.title,
.page-header,
.entry-header,
.page .entry-header,
.singular .entry-header {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER LIGHT / DARK MODE FIX
   ═══════════════════════════════════════════════════════════ */

/* LIGHT MODE FOOTER */
html:not([data-theme="dark"]) .site-footer,
html:not([data-theme="dark"]) footer,
html:not([data-theme="dark"]) .footer-area,
html:not([data-theme="dark"]) #colophon,
html:not([data-theme="dark"]) .wp-block-template-part {
  background-color: #f8f3e8 !important;
  color: #4a5c51 !important;
  border-top: 1px solid rgba(26, 56, 41, 0.10) !important;
}

html:not([data-theme="dark"]) .site-footer *,
html:not([data-theme="dark"]) footer *,
html:not([data-theme="dark"]) .footer-area *,
html:not([data-theme="dark"]) #colophon *,
html:not([data-theme="dark"]) .wp-block-template-part * {
  color: #4a5c51 !important;
}

html:not([data-theme="dark"]) .site-footer h1,
html:not([data-theme="dark"]) .site-footer h2,
html:not([data-theme="dark"]) .site-footer h3,
html:not([data-theme="dark"]) .site-footer h4,
html:not([data-theme="dark"]) footer h1,
html:not([data-theme="dark"]) footer h2,
html:not([data-theme="dark"]) footer h3,
html:not([data-theme="dark"]) footer h4,
html:not([data-theme="dark"]) #colophon h1,
html:not([data-theme="dark"]) #colophon h2,
html:not([data-theme="dark"]) #colophon h3,
html:not([data-theme="dark"]) #colophon h4 {
  color: #1a3829 !important;
}

html:not([data-theme="dark"]) .site-footer a,
html:not([data-theme="dark"]) footer a,
html:not([data-theme="dark"]) .footer-area a,
html:not([data-theme="dark"]) #colophon a,
html:not([data-theme="dark"]) .wp-block-template-part a {
  color: #3d7a54 !important;
}

html:not([data-theme="dark"]) .site-footer a:hover,
html:not([data-theme="dark"]) footer a:hover,
html:not([data-theme="dark"]) .footer-area a:hover,
html:not([data-theme="dark"]) #colophon a:hover,
html:not([data-theme="dark"]) .wp-block-template-part a:hover {
  color: #c9a84c !important;
}

/* DARK MODE FOOTER */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer-area,
html[data-theme="dark"] #colophon,
html[data-theme="dark"] .wp-block-template-part {
  background-color: #111e16 !important;
  color: #a8cdb5 !important;
  border-top: 1px solid rgba(201, 168, 76, 0.20) !important;
}

html[data-theme="dark"] .site-footer *,
html[data-theme="dark"] footer *,
html[data-theme="dark"] .footer-area *,
html[data-theme="dark"] #colophon *,
html[data-theme="dark"] .wp-block-template-part * {
  color: #a8cdb5 !important;
}

html[data-theme="dark"] .site-footer h1,
html[data-theme="dark"] .site-footer h2,
html[data-theme="dark"] .site-footer h3,
html[data-theme="dark"] .site-footer h4,
html[data-theme="dark"] footer h1,
html[data-theme="dark"] footer h2,
html[data-theme="dark"] footer h3,
html[data-theme="dark"] footer h4,
html[data-theme="dark"] #colophon h1,
html[data-theme="dark"] #colophon h2,
html[data-theme="dark"] #colophon h3,
html[data-theme="dark"] #colophon h4 {
  color: #f0ebe0 !important;
}

html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] footer a,
html[data-theme="dark"] .footer-area a,
html[data-theme="dark"] #colophon a,
html[data-theme="dark"] .wp-block-template-part a {
  color: #a8cdb5 !important;
}

html[data-theme="dark"] .site-footer a:hover,
html[data-theme="dark"] footer a:hover,
html[data-theme="dark"] .footer-area a:hover,
html[data-theme="dark"] #colophon a:hover,
html[data-theme="dark"] .wp-block-template-part a:hover {
  color: #c9a84c !important;
}

/* ═══════════════════════════════════════════════════════════
   COMMENT SECTION RESTORE + LIGHT / DARK MODE
   Keeps WordPress native comments visible and styled.
   Jetpack social sharing is NOT restored.
   ═══════════════════════════════════════════════════════════ */

.comments-area,
#comments,
.comment-respond,
#respond,
.comment-list,
.comment-list .comment,
.comment-body,
.comment-content,
.comment-meta,
.comment-author,
.comment-metadata,
.comment-form,
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-notes,
.logged-in-as,
.no-comments,
.comment-navigation,
.comments-pagination,
.form-submit {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: initial !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 5 !important;
}

.comment-respond,
#respond,
.comments-area,
#comments {
  width: 100% !important;
  max-width: 960px !important;
  margin: 3rem auto !important;
  padding: 1.8rem !important;
  border-radius: 16px !important;
  background: var(--bg-surface, #ffffff) !important;
  border: 1px solid var(--border-soft, rgba(26, 56, 41, 0.10)) !important;
  color: var(--text-primary, #1c1c1c) !important;
}

html[data-theme="dark"] .comment-respond,
html[data-theme="dark"] #respond,
html[data-theme="dark"] .comments-area,
html[data-theme="dark"] #comments {
  background: #162b1f !important;
  border-color: rgba(122, 173, 138, 0.14) !important;
  color: #f0ebe0 !important;
}

.comment-reply-title,
.comments-title,
.comment-respond h2,
.comment-respond h3,
#reply-title {
  display: block !important;
  color: var(--section-h2-color, #1a3829) !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.6rem !important;
  line-height: 1.18 !important;
  margin-bottom: 1rem !important;
}

html[data-theme="dark"] .comment-reply-title,
html[data-theme="dark"] .comments-title,
html[data-theme="dark"] .comment-respond h2,
html[data-theme="dark"] .comment-respond h3,
html[data-theme="dark"] #reply-title {
  color: #f0ebe0 !important;
}

.comment-form label,
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label,
.comment-respond label,
.comments-area label,
#comments label {
  display: block !important;
  color: var(--text-primary, #1c1c1c) !important;
  font-weight: 700 !important;
  margin-bottom: 0.4rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

html[data-theme="dark"] .comment-form label,
html[data-theme="dark"] .comment-form-comment label,
html[data-theme="dark"] .comment-form-author label,
html[data-theme="dark"] .comment-form-email label,
html[data-theme="dark"] .comment-form-url label,
html[data-theme="dark"] .comment-respond label,
html[data-theme="dark"] .comments-area label,
html[data-theme="dark"] #comments label {
  color: #f0ebe0 !important;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
#comment,
#author,
#email,
#url {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  min-height: auto !important;
  background: var(--bg-body, #f8f3e8) !important;
  color: var(--text-primary, #1c1c1c) !important;
  border: 1px solid var(--border-soft, rgba(26, 56, 41, 0.12)) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

#comment {
  min-height: 150px !important;
}

html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .comment-form input[type="text"],
html[data-theme="dark"] .comment-form input[type="email"],
html[data-theme="dark"] .comment-form input[type="url"],
html[data-theme="dark"] .comment-respond textarea,
html[data-theme="dark"] .comment-respond input[type="text"],
html[data-theme="dark"] .comment-respond input[type="email"],
html[data-theme="dark"] .comment-respond input[type="url"],
html[data-theme="dark"] #comment,
html[data-theme="dark"] #author,
html[data-theme="dark"] #email,
html[data-theme="dark"] #url {
  background: #0d1c14 !important;
  color: #f0ebe0 !important;
  border-color: rgba(122, 173, 138, 0.18) !important;
}

.comment-form input[type="submit"],
.comment-respond input[type="submit"],
#submit {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  background: #c9a84c !important;
  color: #1a3829 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.75rem 1.9rem !important;
  font-weight: 800 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    transform 0.2s ease !important;
}

.comment-form input[type="submit"]:hover,
.comment-respond input[type="submit"]:hover,
#submit:hover {
  background: #e2c87a !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   JETPACK / SHAREDADDY SOCIAL SHARE BUTTONS REMOVED
   Purpose:
   - Remove floating Jetpack share bar
   - Remove default Sharedaddy share block
   - Remove Jetpack social sharing buttons
   - Preserve WordPress comments and Santé Floating FAQ Chat
   ═══════════════════════════════════════════════════════════ */

.sharedaddy,
div.sharedaddy,
.sd-sharing,
.sd-sharing-enabled,
.sd-block,
.sd-social,
.sd-content,
.sd-title,
.sd-like,
.sd-rating,
.jetpack-sharing,
.jetpack-sharing-buttons,
.wp-block-jetpack-sharing-buttons,
.wp-block-jetpack-share-buttons,
.wp-block-jetpack-social-links,
.jetpack-social-navigation,
div.sharedaddy.sd-sharing-enabled,
div.sharedaddy.sd-like-enabled,
div.sharedaddy.sd-sharing-enabled.sd-like-enabled {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  position: absolute !important;
  left: -999999px !important;
  bottom: auto !important;
  top: auto !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  transform: scale(0) !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
}

.sharedaddy *,
.sd-sharing *,
.sd-sharing-enabled *,
.sd-block *,
.sd-social *,
.sd-content *,
.jetpack-sharing *,
.jetpack-sharing-buttons *,
.wp-block-jetpack-sharing-buttons *,
.wp-block-jetpack-share-buttons *,
.wp-block-jetpack-social-links *,
.jetpack-social-navigation * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ORIGINAL ANIMATION SYSTEM
   Preserved for existing old sections only.
   Universal data-sb-animate system is handled by TOP PAGE CONTROLLER V5.
   ═══════════════════════════════════════════════════════════ */

@keyframes sbFadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sbFadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sbFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sbFadeRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes sbScaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* OLD HERO AUTO-PLAY ANIMATION SUPPORT */
.sb-hero-badge {
  opacity: 0;
  animation: sbFadeDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.sb-h1 {
  opacity: 0;
  animation: sbFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}

.sb-hero-sub {
  opacity: 0;
  animation: sbFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.sb-hero-btns {
  opacity: 0;
  animation: sbFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}

.sb-hero-stats {
  opacity: 0;
  animation: sbFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}

.sb-hero-right {
  opacity: 0;
  animation: sbFadeRight 1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.sb-cert-card {
  opacity: 0;
  animation: sbScaleIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

/* OLD TRUST BAR AUTO-PLAY ANIMATION SUPPORT */
.sb-trust-item {
  opacity: 0;
  animation: sbFadeUp 0.55s ease both;
}

.sb-trust-item:nth-child(1) {
  animation-delay: 0.05s;
}

.sb-trust-item:nth-child(2) {
  animation-delay: 0.15s;
}

.sb-trust-item:nth-child(3) {
  animation-delay: 0.25s;
}

.sb-trust-item:nth-child(4) {
  animation-delay: 0.35s;
}

.sb-trust-item:nth-child(5) {
  animation-delay: 0.45s;
}

/* LEGACY SCROLL REVEAL SUPPORT */
.sb-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}

.sb-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.sb-reveal-d1 {
  transition-delay: 0.1s;
}

.sb-reveal-d2 {
  transition-delay: 0.2s;
}

.sb-reveal-d3 {
  transition-delay: 0.3s;
}

.sb-will-animate {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sb-will-animate.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ACCESSIBILITY FOR OLD ANIMATION CLASSES ONLY */
@media (prefers-reduced-motion: reduce) {
  .sb-hero-badge,
  .sb-h1,
  .sb-hero-sub,
  .sb-hero-btns,
  .sb-hero-stats,
  .sb-hero-right,
  .sb-cert-card,
  .sb-trust-item,
  .sb-reveal,
  .sb-will-animate {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SANTE BARLEY · HEADER TOP BAR + MAIN NAV MAX WIDTH FIX V9
   Purpose:
   - Black top bar: regular weight
   - White nav bar: reduced font size
   - Maximize right-side navigation space
   - Keep menu closer to search/cart icons
   ═══════════════════════════════════════════════════════════ */

:root {
  --sb-topbar-desktop-font-size: 10px;
  --sb-topbar-font-weight: 400;

  --sb-nav-desktop-font-size: 7px;
  --sb-nav-dropdown-font-size: 9px;
  --sb-nav-font-weight: 400;

  --sb-nav-desktop-line-height: 1.05;
  --sb-nav-letter-spacing: 0;

  --sb-nav-desktop-x-padding: 5px;
}

/* BLACK TOP BAR · FORCE REGULAR WEIGHT */
@media (min-width: 1025px) {
  html body .ast-above-header-wrap,
  html body .ast-above-header-bar,
  html body .site-above-header-wrap,
  html body .site-header-above-section-left,
  html body .site-header-above-section-right,
  html body .ast-above-header-wrap *,
  html body .ast-above-header-bar *,
  html body .site-above-header-wrap *,
  html body .site-header-above-section-left *,
  html body .site-header-above-section-right *,
  html body .ast-above-header-wrap a,
  html body .ast-above-header-bar a,
  html body .site-above-header-wrap a,
  html body .ast-above-header-wrap span,
  html body .ast-above-header-bar span,
  html body .site-above-header-wrap span,
  html body .ast-above-header-wrap strong,
  html body .ast-above-header-bar strong,
  html body .site-above-header-wrap strong,
  html body .ast-above-header-wrap b,
  html body .ast-above-header-bar b,
  html body .site-above-header-wrap b {
    font-size: var(--sb-topbar-desktop-font-size) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body .ast-above-header-wrap svg,
  html body .ast-above-header-bar svg,
  html body .site-above-header-wrap svg,
  html body .ast-above-header-wrap i,
  html body .ast-above-header-bar i,
  html body .site-above-header-wrap i {
    font-size: 10px !important;
    width: 10px !important;
    height: 10px !important;
    line-height: 1 !important;
  }
}

/* WHITE HEADER · MAXIMIZE WIDTH */
@media (min-width: 1025px) {
  html body .ast-primary-header-bar .ast-builder-grid-row,
  html body .main-header-bar .ast-builder-grid-row,
  html body .site-primary-header-wrap .ast-builder-grid-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  html body .site-header-primary-section-left,
  html body .ast-builder-grid-row .site-header-primary-section-left {
    flex: 0 0 255px !important;
    width: 255px !important;
    max-width: 255px !important;
    min-width: 255px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  html body .ast-site-identity,
  html body .site-branding,
  html body .ast-site-title-wrap {
    max-width: 215px !important;
    min-width: 0 !important;
  }

  html body .site-title,
  html body .site-title a,
  html body .ast-site-title-wrap .site-title,
  html body .ast-site-title-wrap .site-title a {
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  html body .site-description,
  html body .ast-site-title-wrap .site-description {
    font-size: 10px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
  }

  html body .custom-logo,
  html body .site-logo-img img,
  html body .ast-site-identity img {
    max-width: 44px !important;
    width: 44px !important;
    height: auto !important;
  }

  html body .site-header-primary-section-right,
  html body .ast-builder-grid-row .site-header-primary-section-right,
  html body .ast-primary-header-bar .site-header-primary-section-right,
  html body .main-header-bar .site-header-primary-section-right {
    flex: 1 1 auto !important;
    width: calc(100% - 255px) !important;
    max-width: none !important;
    min-width: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html body .site-header-primary-section-right .ast-builder-menu,
  html body .ast-primary-header-bar .ast-builder-menu,
  html body .main-header-bar .ast-builder-menu,
  html body .site-primary-header-wrap .ast-builder-menu,
  html body .site-header-primary-section-right .ast-main-header-bar-alignment,
  html body .ast-primary-header-bar .ast-main-header-bar-alignment,
  html body .main-header-bar .ast-main-header-bar-alignment,
  html body .site-header-primary-section-right .main-navigation,
  html body .ast-primary-header-bar .main-navigation,
  html body .main-header-bar .main-navigation,
  html body .site-primary-header-wrap .main-navigation {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .ast-primary-header-bar .main-header-menu,
  html body .main-header-bar .main-header-menu,
  html body .site-primary-header-wrap .main-header-menu,
  html body .site-header-primary-section-right .main-header-menu,
  html body .ast-builder-menu .main-navigation > ul,
  html body .main-navigation ul {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
  }

  html body .ast-primary-header-bar .main-header-menu > li.menu-item,
  html body .main-header-bar .main-header-menu > li.menu-item,
  html body .site-primary-header-wrap .main-header-menu > li.menu-item,
  html body .site-header-primary-section-right .main-header-menu > li.menu-item,
  html body .ast-builder-menu .menu-item,
  html body .main-navigation .menu-item {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: nowrap !important;
  }

  html body .ast-primary-header-bar .main-header-menu > li.menu-item > a,
  html body .ast-primary-header-bar .main-header-menu > li.menu-item > .menu-link,
  html body .main-header-bar .main-header-menu > li.menu-item > a,
  html body .main-header-bar .main-header-menu > li.menu-item > .menu-link,
  html body .site-primary-header-wrap .main-header-menu > li.menu-item > a,
  html body .site-primary-header-wrap .main-header-menu > li.menu-item > .menu-link,
  html body .site-header-primary-section-right .main-header-menu > li.menu-item > a,
  html body .site-header-primary-section-right .main-header-menu > li.menu-item > .menu-link,
  html body .ast-primary-header-bar .main-header-menu > li.menu-item > a span,
  html body .ast-primary-header-bar .main-header-menu > li.menu-item > .menu-link span,
  html body .main-header-bar .main-header-menu > li.menu-item > a span,
  html body .main-header-bar .main-header-menu > li.menu-item > .menu-link span,
  html body .site-primary-header-wrap .main-header-menu > li.menu-item > a span,
  html body .site-primary-header-wrap .main-header-menu > li.menu-item > .menu-link span,
  html body .site-header-primary-section-right .main-header-menu > li.menu-item > a span,
  html body .site-header-primary-section-right .main-header-menu > li.menu-item > .menu-link span,
  html body .menu-link .menu-text {
    font-size: var(--sb-nav-desktop-font-size) !important;
    line-height: var(--sb-nav-desktop-line-height) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;

    padding-left: var(--sb-nav-desktop-x-padding) !important;
    padding-right: var(--sb-nav-desktop-x-padding) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    white-space: nowrap !important;
    min-width: 0 !important;
  }

  html body .ast-header-search,
  html body .ast-header-woo-cart,
  html body .ast-site-header-cart,
  html body .site-header-primary-section-right .ast-builder-layout-element {
    flex: 0 0 auto !important;
    margin-left: 1px !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body .ast-header-search a,
  html body .ast-header-woo-cart a,
  html body .ast-site-header-cart a {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  html body .ast-primary-header-bar svg,
  html body .main-header-bar svg,
  html body .site-primary-header-wrap svg {
    width: 15px !important;
    height: 15px !important;
  }

  html body .ast-primary-header-bar .sub-menu a,
  html body .ast-primary-header-bar .sub-menu .menu-link,
  html body .main-header-bar .sub-menu a,
  html body .main-header-bar .sub-menu .menu-link,
  html body .site-primary-header-wrap .sub-menu a,
  html body .site-primary-header-wrap .sub-menu .menu-link,
  html body .site-header-primary-section-right .sub-menu a,
  html body .site-header-primary-section-right .sub-menu .menu-link,
  html body .main-header-menu .sub-menu a,
  html body .main-header-menu .sub-menu .menu-link,
  html body .main-navigation .sub-menu a {
    font-size: var(--sb-nav-dropdown-font-size) !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 8px 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   FINAL FORCE REMOVE BACK TO TOP BUTTONS
   Keeps Santé Floating FAQ Chat active.
   ═══════════════════════════════════════════════════════════ */

.sb-floating-faq-v1-backtop,
#sb-floating-faq-v1-backtop,
.sb-floating-faq-v1 .sb-floating-faq-v1-backtop,

#ast-scroll-top,
.ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right,
.ast-scroll-to-top-left,
.ast-scroll-to-top,
.ast-scroll-top-wrap,
.ast-mobile-scroll-top,
.ast-scroll-top-wrapper,

#scroll-top,
#scroll-to-top,
#toTop,
#back-to-top,
#backtotop,
#back-to-top-button,
#go-to-top,
#goto-top,
#page-top,

.scroll-top,
.scroll-to-top,
.scrollup,
.scroll-up,
.scroll-to-top-button,
.back-to-top,
.backtotop,
.back-top,
.go-top,
.goto-top,
.to-top,
.topbutton,
.top-button,
.page-top,
.page-scroll-top,

.elementor-scroll-to-top,
.elementor-widget-button.back-to-top,
.elementor-widget-container .back-to-top,
.wp-block-button.back-to-top,
.wp-block-button.scroll-to-top,

button[aria-label="Back to top"],
button[aria-label="Scroll to top"],
button[aria-label="Go to top"],
button[title="Back to top"],
button[title="Scroll to top"],
button[title="Go to top"],

a[aria-label="Back to top"],
a[aria-label="Scroll to top"],
a[aria-label="Go to top"],
a[title="Back to top"],
a[title="Scroll to top"],
a[title="Go to top"],

[class*="back-to-top"],
[class*="scroll-to-top"],
[class*="scrolltop"],
[class*="scroll-top"],
[class*="go-to-top"],
[class*="goto-top"],
[id*="back-to-top"],
[id*="scroll-to-top"],
[id*="scrolltop"],
[id*="scroll-top"],
[id*="go-to-top"],
[id*="goto-top"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transform: scale(0) !important;
}

/* ═══════════════════════════════════════════════════════════
   KEEP SANTÉ FLOATING FAQ CHAT ICON ACTIVE
   Restores chat widget if broad back-to-top selectors affect nearby elements.
   ═══════════════════════════════════════════════════════════ */

#sb-floating-faq-v2,
.sb-floating-faq-v2,
.sb-floating-faq-v2 *,
#sb-floating-faq-v2-panel,
.sb-floating-faq-v2-panel,
#sb-floating-faq-v2-toggle,
.sb-floating-faq-v2-toggle,
.sb-floating-faq-v2-tools {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#sb-floating-faq-v2,
.sb-floating-faq-v2 {
  display: block !important;
}

.sb-floating-faq-v2-tools {
  display: grid !important;
}

.sb-floating-faq-v2-toggle {
  display: inline-flex !important;
  width: var(--sb-float-button-size, 58px) !important;
  height: var(--sb-float-button-size, 58px) !important;
  min-width: var(--sb-float-button-size, 58px) !important;
  min-height: var(--sb-float-button-size, 58px) !important;
  max-width: var(--sb-float-button-size, 58px) !important;
  max-height: var(--sb-float-button-size, 58px) !important;
  transform: none !important;
}

.sb-floating-faq-v2-panel {
  display: none !important;
}

.sb-floating-faq-v2.is-open .sb-floating-faq-v2-panel {
  display: grid !important;
}

/* =========================================================
   Hide Search Elements on Wrong URL / 404 Page
   ========================================================= */

/* Hide the large default search bar in the 404 page content */
body.error404 .search-form,
body.error404 form[role="search"],
body.error404 .ast-404-search,
body.error404 .page-content .search-form,
body.error404 .entry-content .search-form,
body.error404 .site-content .search-form,
body.error404 .site-main .search-form {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Hide header search icon only on 404 page */
body.error404 .ast-search-menu-icon,
body.error404 .ast-header-search,
body.error404 .site-header .search-form,
body.error404 .site-header form[role="search"] {
    display: none !important;
}

/* Remove possible empty spacing left by the hidden 404 search form */
body.error404 .page-content,
body.error404 .entry-content,
body.error404 .site-main {
    min-height: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVEGROWTH DASHBOARD / PAGE SECTION FIX V2
   Consolidated final rules
   - Keeps dashboard HTML widgets flush
   - Removes obsolete 24px top-padding override
   - Preserves dashboard card/grid behavior
   - Preserves first-visible-block top-gap fix
   ═══════════════════════════════════════════════════════════ */

body.page-id-dashboard .elementor-widget-html,
body.page-id-dashboard .elementor-widget-html .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

#igdqAccessV1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 40px !important;
}

#igdqAccessV1 .igdq-card {
  min-height: auto !important;
}

#igdqAccessV1 .igdq-title {
  margin-bottom: 8px !important;
}

#igdqAccessV1 .igdq-grid {
  align-items: stretch !important;
}

/* Remove top gap from the genuine first visible page block only. */
body:not(.admin-bar) .entry-content > *:first-child,
body:not(.admin-bar) .page-content > *:first-child,
body:not(.admin-bar) .wp-block-post-content > *:first-child,
body:not(.admin-bar) .elementor > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Keep WordPress admin bar layout safe while logged in. */
body.admin-bar {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVEGROWTH · BACKEND CODE STACK HIDE FIX
   Purpose:
   - Hide code-only HTML widgets placed above the hero section
   - Remove unwanted top space
   - Keep scripts/styles inside HTML widgets active
   Usage:
   Add class "ig-backend-code-stack" to the Elementor container
   that contains code-only HTML widgets.
   ═══════════════════════════════════════════════════════════ */

.ig-backend-code-stack {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Remove Elementor container inner spacing */
.ig-backend-code-stack.e-con,
.ig-backend-code-stack .e-con-inner,
.ig-backend-code-stack .elementor-container,
.ig-backend-code-stack .elementor-widget-wrap {
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;

  overflow: hidden !important;
}

/* Remove each HTML widget visual placeholder */
.ig-backend-code-stack .elementor-widget-html,
.ig-backend-code-stack .elementor-widget-html .elementor-widget-container {
  display: block !important;

  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Remove top spacing from the next visible hero/dashboard section */
.ig-backend-code-stack + .elementor-element,
.ig-backend-code-stack + .e-con,
.ig-backend-code-stack + .elementor-section,
.ig-backend-code-stack + section,
.ig-backend-code-stack + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Dashboard hero wrapper override */
#igdqAccessV1 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVEGROWTH · GLOBAL EYEBROW + TITLE STACK FIX V1
   Purpose:
   - Keep eyebrow / badge / section label on its own row
   - Force the following title onto the row below
   - Repair flex/grid inheritance conflicts across Elementor HTML widgets
   - Presentation only; no JS, webhook, owner-slug, or functional changes
   ═══════════════════════════════════════════════════════════ */

/*
  Only targets HTML-widget content blocks where a recognized
  eyebrow/label is immediately followed by a heading/title.
*/
.elementor-widget-html
:where(div, section, article, aside)
:has(
  >
  :where(
    [class*="eyebrow"],
    [class*="audio-label"],
    [class*="section-label"],
    [class*="card-label"]
  )
  +
  :where(
    h1,
    h2,
    h3,
    h4,
    [class*="title"]
  )
) {
  display: block !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* Eyebrow / badge / small label stays on its own upper row */
.elementor-widget-html
:where(
  [class*="eyebrow"],
  [class*="audio-label"],
  [class*="section-label"],
  [class*="card-label"]
) {
  flex-shrink: 0;
}

/* Heading/title always starts below the preceding label */
.elementor-widget-html
:where(
  [class*="eyebrow"],
  [class*="audio-label"],
  [class*="section-label"],
  [class*="card-label"]
)
+
:where(
  h1,
  h2,
  h3,
  h4,
  [class*="title"]
) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}

/*
  Standard breathing room.
  Existing more-specific widget margins can still override this.
*/
.elementor-widget-html
:where(
  [class*="eyebrow"],
  [class*="audio-label"],
  [class*="section-label"],
  [class*="card-label"]
)
+
:where(
  h1,
  h2,
  h3,
  h4,
  [class*="title"]
) {
  margin-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════
   SANTE BARLEY · SAFE UNIVERSAL FULL-WIDTH SECTIONS V13
   Purpose:
   - Keep every Elementor page section full width
   - Avoid changing flex/grid/block layout inside approved widgets
   - Preserve profile headers, eyebrow/title stacking, cards, grids,
     buttons, scripts, owner logic, webhooks, and dashboard behavior
   ═══════════════════════════════════════════════════════════ */

/* A) Theme / Astra content shells */
body .site-content,
body #content,
body #primary,
body .content-area,
body .site-main,
body .entry-content,
body .page-content,
body .site-content > .ast-container,
body #content > .ast-container,
body #primary > .ast-container,
body .content-area > .ast-container,
body .site-main > .ast-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .site-content > .ast-container,
body #content > .ast-container,
body #primary > .ast-container,
body .content-area > .ast-container,
body .site-main > .ast-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* B) Legacy Elementor Sections */
body .elementor,
body .elementor-section-wrap,
body .elementor-section.elementor-top-section,
body .elementor-section.elementor-inner-section,
body .elementor-section > .elementor-container,
body .elementor-column,
body .elementor-col-100,
body .elementor-widget-wrap,
body .elementor-widget,
body .elementor-widget-html,
body .elementor-widget-html > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .elementor-section.elementor-top-section,
body .elementor-section.elementor-inner-section,
body .elementor-section > .elementor-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* C) Modern Elementor Flexbox Containers
      WIDTH ONLY — do not change display/flex-direction/grid properties. */
body .elementor .e-con,
body .elementor .e-con.e-flex,
body .elementor .e-con.e-con-full,
body .elementor .e-con.e-con-boxed,
body .elementor .e-con > .e-con-inner {
  --container-max-width: 100% !important;
  --content-width: 100% !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* D) Full-bleed only the actual ROOT visual block of each HTML widget.
      No generic child wrapper selectors are used here, so approved
      internal row/column layouts remain untouched. */
body .elementor-widget-html:not(.ig-backend-code-stack)
> .elementor-widget-container
> section,
body .elementor-widget-html:not(.ig-backend-code-stack)
> .elementor-widget-container
> main,
body .elementor-widget-html:not(.ig-backend-code-stack)
> .elementor-widget-container
> article {
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* E) Known approved top-level section shells may expand horizontally,
      but their display/grid/flex behavior is never overridden. */
body .elementor-widget-html:not(.ig-backend-code-stack)
> .elementor-widget-container
> :where(section, main, article)
> :where(
  .sb-wrap,
  .sb-inner,
  .sb-container,
  .sb-shell,
  .sbt2-inner,
  .igucr-shell,
  .igrm-shell
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* F) Restore approved Dynamic Profile Header stacking.
      Uploaded architecture defines .igdp-kicker then #igdpOwnerName
      as separate rows in the owner profile header. */
#igdpProfileV1 .igdp-profile-info,
#igdpProfileV1 .igdp-copy,
#igdpProfileV1 .igdp-owner-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#igdpProfileV1 .igdp-kicker,
#igdpProfileV1 #igdpOwnerName {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

#igdpProfileV1 .igdp-kicker {
  margin-bottom: 6px !important;
}

#igdpProfileV1 #igdpOwnerName {
  margin-top: 0 !important;
  clear: both !important;
}

/* Also protect the newer owner-profile variant if used. */
#igdhHeroV4 .igdh-profile-info,
#igdhHeroV3 .igdh-profile-info {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

#igdhHeroV4 .igdh-owner-kicker,
#igdhHeroV4 .igdh-owner-name,
#igdhHeroV3 .igdh-owner-kicker,
#igdhHeroV3 .igdh-owner-name {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* G) Protect hidden backend code containers. */
body .ig-backend-code-stack,
body .ig-backend-code-stack.e-con,
body .ig-backend-code-stack .e-con-inner,
body .ig-backend-code-stack .elementor-widget-html,
body .ig-backend-code-stack .elementor-widget-container {
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* H) Prevent horizontal scrollbar from viewport breakout. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 767px) {
  body .elementor-widget-html:not(.ig-backend-code-stack)
  > .elementor-widget-container
  > :where(section, main, article) {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}

/* =====================================================
   INTERACTIVEGROWTH OWNER MESSENGER — RIGHT DRAWER V1
   Scoped to Messenger only; KARA position unaffected.
   Follows existing <html data-theme="light|dark"> toggle.
   ===================================================== */

/* Match the actual site theme, not the phone OS preference. */
html[data-theme="light"] #ig-msg-widget-root {
  --igm-bg: #ffffff;
  --igm-surface: #f3f7f4;
  --igm-text: #183729;
  --igm-muted: #587061;
  --igm-border: #d4e4d8;
  --igm-primary: #147c70;
  --igm-primary-text: #ffffff;
  color-scheme: light;
}
html[data-theme="dark"] #ig-msg-widget-root {
  --igm-bg: #11231c;
  --igm-surface: #1b3026;
  --igm-text: #f0f6f0;
  --igm-muted: #bdd2c2;
  --igm-border: #345546;
  --igm-primary: #17877a;
  --igm-primary-text: #ffffff;
  color-scheme: dark;
}

/* Messenger entry stays on left; KARA remains on right. */
html body #ig-msg-widget-root .ig-msg-launcher {
  left: 18px !important;
  right: auto !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px) + 12px) !important;
  border-radius: 999px !important;
}

/* Full-height, edge-attached right drawer. Never a floating card. */
html body #ig-msg-widget-root .ig-msg-panel {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: min(440px, 100vw) !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--igm-border) !important;
  background: var(--igm-bg) !important;
  color: var(--igm-text) !important;
  box-shadow: -18px 0 60px rgba(0, 0, 0, .28) !important;
  overflow: hidden !important;
}

/* Allow the form and conversation to scroll inside the drawer. */
html body #ig-msg-widget-root .ig-msg-header {
  flex-shrink: 0;
  padding: max(18px, env(safe-area-inset-top, 0px)) 20px 18px;
}
html body #ig-msg-widget-root .ig-msg-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 22px;
}
html body #ig-msg-widget-root .ig-msg-footer {
  flex-shrink: 0;
  padding: 12px 20px max(12px, env(safe-area-inset-bottom, 0px));
}
html body #ig-msg-widget-root .ig-msg-close {
  flex: 0 0 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 50%;
}

/* Backdrop while the drawer is open; hidden launcher stays out of the way. */
html body #ig-msg-widget-root:has(> .ig-msg-panel:not([hidden]))::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  background: rgba(4, 17, 10, .55);
}
html body #ig-msg-widget-root:has(> .ig-msg-panel:not([hidden])) .ig-msg-launcher {
  visibility: hidden;
  pointer-events: none;
}
html:has(#ig-msg-widget-root > .ig-msg-panel:not([hidden])) {
  overflow: hidden !important;
}
html:has(#ig-msg-widget-root > .ig-msg-panel:not([hidden])) body {
  overflow: hidden !important;
}

@media (max-width: 600px) {
  html body #ig-msg-widget-root .ig-msg-launcher {
    left: 14px !important;
  }
  html body #ig-msg-widget-root .ig-msg-panel {
    width: 100vw !important;
  }
}




/* ==========================================================
   INTERACTIVEGROWTH MESSENGER — PREMIUM CHAT UI V2
   October 2026 · Messenger-only styling, KARA unchanged.
   Restores a true flexible transcript + bottom chat composer.
   ========================================================== */
html #ig-msg-widget-root {
  --igm-gold:#d1b36c;
  --igm-chat-canvas:#f5f7f4;
  --igm-composer-bg:#fff;
  --igm-inbound-bg:#fff;
  --igm-own-bg:#147b6f;
  --igm-own-fg:#fff;
}
html[data-theme="dark"] #ig-msg-widget-root {
  --igm-chat-canvas:#0d2119;
  --igm-composer-bg:#132b21;
  --igm-inbound-bg:#244235;
  --igm-own-bg:#16877a;
  --igm-own-fg:#fff;
}
html body #ig-msg-widget-root .ig-msg-panel {
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif !important;
  letter-spacing:normal;
}
html body #ig-msg-widget-root .ig-msg-header {
  min-height:90px;
  padding:17px 18px !important;
  gap:13px;
  background:linear-gradient(130deg,#153e33 0%,#126f64 100%) !important;
  box-shadow:inset 0 -3px 0 rgba(209,179,108,.85);
  position:relative;
  z-index:2;
}
html body #ig-msg-widget-root .ig-msg-branding {
  position:relative;
  padding-left:51px;
  gap:3px;
  min-width:0;
}
html body #ig-msg-widget-root .ig-msg-branding::before {
  content:"IG";
  position:absolute;
  left:0;top:50%;
  transform:translateY(-50%);
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(145deg,#f6e3a8,#bf9146);
  color:#173d30;
  font-weight:800;
  font-size:15px;
  box-shadow:0 3px 14px rgba(0,0,0,.15);
  letter-spacing:-.03em;
}
html body #ig-msg-widget-root .ig-msg-branding strong {
  color:#fff;
  font-weight:750;
  font-size:15px;
  line-height:1.3;
  letter-spacing:-.015em;
}
html body #ig-msg-widget-root .ig-msg-branding small {
  color:rgba(255,255,255,.82);
  font-size:11px;
  font-weight:500;
  line-height:1.4;
}
html body #ig-msg-widget-root .ig-msg-close {
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff;
  background:rgba(255,255,255,.12) !important;
  font-size:25px;
  display:grid;
  place-items:center;
  width:42px;height:42px;
  flex:0 0 42px;
  box-shadow:none;
  transition:background .16s ease;
}
html body #ig-msg-widget-root .ig-msg-close:hover {
  background:rgba(255,255,255,.23) !important;
}
/* Chat mode only: registration and OTP forms keep their own scroll. */
html body #ig-msg-widget-root .ig-msg-main:has(> .ig-msg-messages) {
  display:flex !important;
  flex-direction:column;
  overflow:hidden !important;
  min-height:0 !important;
  padding:0 !important;
  background:var(--igm-chat-canvas) !important;
}
html body #ig-msg-widget-root .ig-msg-messages {
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:auto;
  gap:12px;
  padding:23px 18px 18px !important;
  background:radial-gradient(ellipse at 50% -20%,rgba(23,132,111,.06),transparent 70%);
  scrollbar-width:thin;
  scrollbar-color:var(--igm-border) transparent;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
html body #ig-msg-widget-root .ig-msg-bubble {
  flex:0 0 auto;
  width:fit-content;
  max-width:82%;
  border-radius:16px 16px 16px 5px;
  padding:11px 14px 10px;
  background:var(--igm-inbound-bg) !important;
  color:var(--igm-text) !important;
  border:1px solid var(--igm-border);
  box-shadow:0 3px 12px rgba(0,0,0,.045);
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
html body #ig-msg-widget-root .ig-msg-bubble:first-child {
  margin-top:auto;
}
html body #ig-msg-widget-root .ig-msg-bubble.ig-msg-mine {
  align-self:flex-end;
  border-color:transparent;
  border-radius:16px 16px 5px 16px;
  background:var(--igm-own-bg) !important;
  color:var(--igm-own-fg) !important;
  box-shadow:0 4px 15px rgba(10,92,79,.18);
}
html body #ig-msg-widget-root .ig-msg-bubble small {
  display:block;
  font-weight:750;
  font-size:10px;
  letter-spacing:.01em;
  opacity:.74;
  margin-bottom:4px;
  color:inherit;
}
html body #ig-msg-widget-root .ig-msg-bubble p {
  margin:0 !important;
  padding:0;
  font-size:13px;
  line-height:1.55;
  font-weight:500;
  color:inherit !important;
}
html body #ig-msg-widget-root .ig-msg-empty {
  margin:auto;
  width:min(100%,320px);
  border:1px solid var(--igm-border);
  background:var(--igm-inbound-bg);
  padding:22px 20px;
  border-radius:18px;
  color:var(--igm-muted);
  font-size:12px;
  line-height:1.7;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
html body #ig-msg-widget-root .ig-msg-empty::before {
  content:"✉";
  display:block;
  width:45px;height:45px;
  margin:0 auto 12px;
  line-height:45px;
  font-size:22px;
  border-radius:16px;
  background:var(--igm-surface);
  color:var(--igm-primary);
}
html body #ig-msg-widget-root .ig-msg-compose {
  flex:0 0 auto;
  display:flex !important;
  flex-direction:row;
  align-items:flex-end;
  gap:9px;
  min-width:0;
  margin:0 !important;
  padding:14px 16px 10px;
  background:var(--igm-composer-bg);
  border-top:1px solid var(--igm-border);
}
html body #ig-msg-widget-root .ig-msg-compose textarea {
  flex:1 1 auto;
  width:auto !important;
  min-width:0 !important;
  height:49px;
  min-height:49px;
  max-height:125px;
  resize:none;
  border:1px solid var(--igm-border) !important;
  border-radius:16px !important;
  outline:none;
  padding:12px 14px !important;
  font-size:13px !important;
  line-height:1.6;
  background:var(--igm-bg);
  color:var(--igm-text);
  box-shadow:none;
}
html body #ig-msg-widget-root .ig-msg-compose textarea:focus {
  border-color:var(--igm-primary) !important;
  box-shadow:0 0 0 3px rgba(21,130,111,.11) !important;
}
html body #ig-msg-widget-root .ig-msg-compose button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  flex:0 0 auto;
  width:66px;
  min-width:66px;
  height:49px;
  min-height:49px;
  padding:0 10px;
  margin:0;
  border-radius:15px !important;
  background:var(--igm-own-bg) !important;
  color:#fff !important;
  font-size:12px;
  font-weight:750;
  box-shadow:0 3px 10px rgba(13,98,83,.18);
}
html body #ig-msg-widget-root .ig-msg-signout {
  display:block;
  flex:0 0 auto;
  align-self:stretch;
  margin:0 !important;
  padding:0 18px 12px;
  text-align:right;
  font-size:11px;
  text-decoration:none;
  background:var(--igm-composer-bg);
  color:var(--igm-muted);
  border-radius:0;
}
html body #ig-msg-widget-root .ig-msg-signout:hover {color:var(--igm-primary)}
html body #ig-msg-widget-root .ig-msg-notice:not(:empty) {
  flex-shrink:0;
  padding:7px 18px !important;
  margin:0;
  border-top:1px solid var(--igm-border);
  background:var(--igm-composer-bg);
  color:var(--igm-muted);
  font-size:11px;
}
html body #ig-msg-widget-root .ig-msg-notice.ig-msg-error {
  color:#d94f5b;
}
html body #ig-msg-widget-root .ig-msg-footer {
  min-height:30px;
  padding:7px 18px max(8px,env(safe-area-inset-bottom,0px)) !important;
  background:var(--igm-surface) !important;
  color:var(--igm-muted);
  border-top:1px solid var(--igm-border);
  font-size:10px;
}
@media(max-width:600px){
  html body #ig-msg-widget-root .ig-msg-header {
    min-height:82px;
    padding:15px 14px !important;
  }
  html body #ig-msg-widget-root .ig-msg-branding strong {font-size:14px}
  html body #ig-msg-widget-root .ig-msg-messages {padding:18px 14px 14px !important}
  html body #ig-msg-widget-root .ig-msg-compose {padding:12px 12px 8px}
  html body #ig-msg-widget-root .ig-msg-compose textarea {font-size:16px !important}
  html body #ig-msg-widget-root .ig-msg-compose button {min-width:62px;width:62px}
}
@media(prefers-reduced-motion:reduce){
  html body #ig-msg-widget-root .ig-msg-close{transition:none}
}



/* InteractiveGrowth Messenger — Visitor Opt-in Layout Fix */
html body #ig-msg-widget-root
.ig-msg-compose:has(> .ig-msg-marketing-optin) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 9px;
  align-items: end;
}

html body #ig-msg-widget-root
.ig-msg-compose > .ig-msg-marketing-optin {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 12px;
}

html body #ig-msg-widget-root
.ig-msg-compose > .ig-msg-marketing-optin input {
  flex: 0 0 auto;
  margin-top: 3px;
}

html body #ig-msg-widget-root
.ig-msg-compose > textarea {
  grid-column: 1;
  grid-row: 2;
}

html body #ig-msg-widget-root
.ig-msg-compose > button[type="submit"] {
  grid-column: 2;
  grid-row: 2;
}