/**
 * Theme-agnostic isolation for Weblytic homepage.
 * Neutralizes Classic / any theme wrappers so module CSS alone owns the layout.
 * Loaded AFTER theme stylesheets (high priority) so these rules win.
 */

:root {
  --primary-900: #071225;
  --primary-800: #0B1733;
  --primary-700: #111F45;
  --blue: #2F80FF;
  --purple: #7B3FF2;
  --violet: #9B5CFF;
  --accent-gradient: linear-gradient(135deg, #2F80FF 0%, #7B3FF2 55%, #9B5CFF 100%);
  --white: #FFFFFF;
  --surface: #F8FAFF;
  --surface-soft: #F3F6FF;
  --text-dark: #071225;
  --text-muted: #667085;
  --border: #E5E9F5;
  --success: #10B981;
  --wbl-primary: #7B3FF2;
  --wbl-primary-dark: #6a35d4;
  --wbl-primary-light: #F3F6FF;
  --wbl-dark: #071225;
  --wbl-dark-2: #0B1733;
  --wbl-dark-card: #111F45;
  --wbl-dark-card-border: rgba(255, 255, 255, 0.08);
  --wbl-text: #071225;
  --wbl-muted: #667085;
  --wbl-border: #E5E9F5;
  --wbl-radius: 12px;
  --wbl-radius-lg: 18px;
  --wbl-shadow: 0 1px 3px rgba(7, 18, 37, 0.06), 0 8px 24px rgba(7, 18, 37, 0.04);
  --wbl-shadow-lg: 0 20px 60px rgba(7, 18, 37, 0.12);
  --wbl-max: 1400px;
  --wbl-container-pad-x: 24px;
  --wbl-font: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --wbl-col-gap: 24px;
  --wbl-gradient: linear-gradient(135deg, #2F80FF 0%, #7B3FF2 55%, #9B5CFF 100%);
}

/* ─── Hide theme chrome when overridden ─── */
body.wbl-override-header #header,
body.wbl-override-header .header-banner,
body.wbl-override-header .deo-header-mobile,
body.page-index:has(> .wbl-top-chrome) #header,
body.wbl-override-product.wbl-override-header #header {
  display: none !important;
}

body.wbl-override-footer #footer,
body.wbl-override-footer .deo-footer-mobile,
body.page-index:has(> .wbl-site-footer) #footer,
body.wbl-override-product.wbl-override-footer #footer {
  display: none !important;
}

body.wbl-module-index .breadcrumb,
body.wbl-static-home-page .breadcrumb,
body.wbl-override-header .breadcrumb,
body.wbl-override-footer .breadcrumb,
body.wbl-override-product .breadcrumb,
body.wbl-module-product .breadcrumb {
  display: none !important;
}

body.wbl-static-home-page #left-column,
body.wbl-static-home-page #right-column {
  display: none !important;
}

/* ─── Classic Bootstrap shell → full-bleed module canvas ─── */
body.wbl-static-home-page #wrapper,
body.wbl-module-index #wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
}

body.wbl-static-home-page #wrapper > .container,
body.wbl-static-home-page #wrapper > .container-fluid,
body.wbl-module-index #wrapper > .container,
body.wbl-module-index #wrapper > .container-fluid,
body.wbl-override-product #wrapper > .container,
body.wbl-override-product #wrapper > .container-fluid,
body.wbl-module-product #wrapper > .container,
body.wbl-module-product #wrapper > .container-fluid,
/* Deo puts Bootstrap .container on .deo-wrapper — kill the 1200–1400px squeeze */
body.wbl-override-product #wrapper .deo-wrapper.container,
body.wbl-override-product #wrapper .deo-wrapper,
body.wbl-module-product #wrapper .deo-wrapper.container,
body.wbl-module-product #wrapper .deo-wrapper,
body.wbl-static-home-page #wrapper .deo-wrapper.container,
body.wbl-static-home-page #wrapper .deo-wrapper,
body.wbl-module-index #wrapper .deo-wrapper.container,
body.wbl-module-index #wrapper .deo-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.wbl-static-home-page #wrapper > .container > .row,
body.wbl-module-index #wrapper > .container > .row,
body.wbl-override-product #wrapper > .container > .row,
body.wbl-module-product #wrapper > .container > .row,
/* DeoTemplate: .deo-wrapper > .row negative gutters break header alignment */
body.wbl-static-home-page #wrapper .deo-wrapper > .row,
body.wbl-module-index #wrapper .deo-wrapper > .row,
body.wbl-static-home-page #wrapper .row,
body.wbl-module-index #wrapper .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.wbl-static-home-page #content-wrapper,
body.wbl-static-home-page #content.page-home,
body.wbl-module-index #content-wrapper,
body.wbl-override-product #content-wrapper,
body.wbl-module-product #content-wrapper {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

/* Classic puts Bootstrap column classes on #content-wrapper */
body.wbl-static-home-page #content-wrapper.col-xs-12,
body.wbl-static-home-page #content-wrapper.col-md-4,
body.wbl-static-home-page #content-wrapper.col-lg-3,
body.wbl-static-home-page #content-wrapper.col-lg-6,
body.wbl-static-home-page #content-wrapper.left-column,
body.wbl-static-home-page #content-wrapper.right-column,
body.wbl-static-home-page #content-wrapper[class*="col-"],
body.wbl-override-product #content-wrapper[class*="col-"],
body.wbl-module-product #content-wrapper[class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.wbl-module-index #page,
body.wbl-module-index main,
body.wbl-static-home-page main,
body.wbl-static-home-page #page,
body.wbl-module-index .deo-wrapper,
body.wbl-static-home-page .deo-wrapper,
body.wbl-override-product #page,
body.wbl-override-product main,
body.wbl-module-product #page,
body.wbl-module-product main,
body.wbl-override-product .deo-wrapper,
body.wbl-module-product .deo-wrapper {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

html:has(body.wbl-module-index),
body.wbl-module-index,
html:has(body.wbl-static-home-page),
body.wbl-static-home-page {
  height: auto !important;
  min-height: 100%;
  overflow-x: clip;
}

body.wbl-override-header > .wbl-top-chrome,
body.wbl-override-footer > .wbl-site-footer {
  display: block !important;
  width: 100%;
}

/* ─── Module canvas owns typography / box model ─── */
body.wbl-static-home-page .wbl-static-home,
body.wbl-static-home-page .wbl-static-home *,
body.wbl-static-home-page .wbl-static-home *::before,
body.wbl-static-home-page .wbl-static-home *::after {
  box-sizing: border-box;
}

body.wbl-static-home-page .wbl-static-home {
  font-family: var(--wbl-font) !important;
  color: var(--text-dark);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: #f8faff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.wbl-static-home-page .wbl-static-home h1,
body.wbl-static-home-page .wbl-static-home h2,
body.wbl-static-home-page .wbl-static-home h3,
body.wbl-static-home-page .wbl-static-home h4,
body.wbl-static-home-page .wbl-static-home h5,
body.wbl-static-home-page .wbl-static-home p,
body.wbl-static-home-page .wbl-static-home a,
body.wbl-static-home-page .wbl-static-home li,
body.wbl-static-home-page .wbl-static-home span,
body.wbl-static-home-page .wbl-static-home button,
body.wbl-static-home-page .wbl-static-home input {
  font-family: var(--wbl-font) !important;
  letter-spacing: normal;
}

body.wbl-static-home-page .wbl-static-home a {
  text-decoration: none;
}

body.wbl-static-home-page .wbl-static-home img {
  max-width: 100%;
  height: auto;
}

body.wbl-static-home-page .wbl-static-home .block,
body.wbl-static-home-page #content.page-home .block {
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

body.wbl-override-header .wbl-top-chrome,
body.wbl-override-footer .wbl-site-footer,
body.wbl-static-home-page .wbl-top-chrome,
body.wbl-static-home-page .wbl-site-footer {
  font-family: var(--wbl-font) !important;
}

body.wbl-override-listing .breadcrumb,
body.wbl-module-listing .breadcrumb,
body.wbl-override-soft .breadcrumb,
body.wbl-module-soft .breadcrumb {
  display: none !important;
}

body.wbl-override-listing #wrapper > .container,
body.wbl-override-listing #wrapper > .container-fluid,
body.wbl-module-listing #wrapper > .container,
body.wbl-module-listing #wrapper > .container-fluid,
body.wbl-override-listing #wrapper .deo-wrapper.container,
body.wbl-override-listing #wrapper .deo-wrapper,
body.wbl-module-listing #wrapper .deo-wrapper.container,
body.wbl-module-listing #wrapper .deo-wrapper {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.wbl-override-listing #wrapper > .container > .row,
body.wbl-module-listing #wrapper > .container > .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block !important;
  width: 100% !important;
}

body.wbl-override-listing #content-wrapper,
body.wbl-module-listing #content-wrapper,
body.wbl-override-listing #content-wrapper[class*="col-"],
body.wbl-module-listing #content-wrapper[class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  right: auto !important;
}

body.wbl-override-listing #page,
body.wbl-override-listing main,
body.wbl-module-listing #page,
body.wbl-module-listing main,
body.wbl-override-listing .deo-wrapper,
body.wbl-module-listing .deo-wrapper {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}