/* XtraVIRAL Service 1 TEST 6 - Native Zoho Header Actions */

.xv-header-actions-source { display: none !important; }

/* Desktop Header Actions are inserted as native menu <li> elements so Zoho's own menu/highlight CSS applies. */
.xv-native-header-action-item {
  position: relative !important;
}


/* TEST 24 - native-wrapper mobile header repair.
   Nothing is reparented, so Zoho's menu/link/icon selectors keep working. */
@media (max-width: 991px) {
  .theme-header > .zpcontainer.xv-mobile-header-stable {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 60px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > [data-zs-branding],
  .theme-header > .zpcontainer.xv-mobile-header-stable > .theme-branding-info {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px 10px 15px !important;
    box-sizing: border-box !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > .xv-mobile-burger-area-stable,
  .theme-header > .zpcontainer.xv-mobile-header-stable > .theme-responsive-menu-area.xv-mobile-burger-area-stable {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .theme-header .xv-mobile-burger-area-stable [data-zp-responsive-container="mymenu1"].xv-native-menu-wrapper,
  .theme-header [data-zp-responsive-container="mymenu1"].xv-native-menu-wrapper {
    position: static !important;
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .theme-header .xv-mobile-burger-area-stable [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
  }

  /* Keep the styled Zoho menu in its native wrapper, but let its panel span
     the complete mobile viewport underneath the logo/burger row. */
  .theme-header [data-zp-responsive-container="mymenu1"] > .theme-menu.xv-native-menu-panel,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu.xv-native-menu-panel {
    position: absolute !important;
    top: var(--xv-native-menu-top, 70px) !important;
    left: calc((100% - 100vw) / 2) !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 45 !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > .xv-mobile-cta-row-stable {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: var(--xv-native-menu-space, 0px) 0 0 !important;
    padding: 8px 16px 10px !important;
    box-sizing: border-box !important;
    transition: margin-top .2s ease !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-native-mobile-actions-row {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-actions-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-actions-inline > a.xv-mobile-action-link {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(22,71,116,.28) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #1a3858 !important;
    box-sizing: border-box !important;
  }
}


/* TEST 25 FINAL - isolated, predictable mobile header. */
.xv-mobile-header-shell { display: none !important; }

@media (max-width: 991px) {
  .theme-header.xv-custom-mobile-ready {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .theme-header.xv-custom-mobile-ready > .xv-native-header-source,
  .theme-header.xv-custom-mobile-ready .xv-native-header-source {
    display: none !important;
  }

  .theme-header > .xv-mobile-header-shell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    background: inherit !important;
    box-sizing: border-box !important;
    z-index: 60 !important;
  }

  .xv-mobile-header-top {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 8px 12px 8px 15px !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-header-brand {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    min-width: 0 !important;
    max-width: calc(100% - 58px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .xv-mobile-header-brand [data-zs-branding],
  .xv-mobile-header-brand .theme-branding-info,
  .xv-mobile-header-brand [data-zs-logo-container],
  .xv-mobile-header-brand .theme-logo-parent {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-header-brand img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: min(68vw, 250px) !important;
    max-height: 48px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .xv-mobile-menu-toggle {
    display: flex !important;
    flex: 0 0 46px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 9px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-menu-toggle > span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    min-height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: currentColor !important;
    opacity: 1 !important;
    transform-origin: center !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .xv-mobile-menu-open .xv-mobile-menu-toggle > span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .xv-mobile-menu-open .xv-mobile-menu-toggle > span:nth-child(2) { opacity: 0 !important; }
  .xv-mobile-menu-open .xv-mobile-menu-toggle > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  .xv-mobile-menu-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: inherit !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.08) !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-menu-panel[hidden] { display: none !important; }

  .xv-mobile-menu-panel > ul {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 16px 12px !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-menu-panel > ul > li:not(.xv-custom-mobile-actions-row) {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-menu-panel > ul > li:not(.xv-custom-mobile-actions-row) > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px 2px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(127,127,127,.24) !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  .xv-mobile-menu-panel .theme-menu-name {
    color: inherit !important;
    text-decoration: none !important;
  }

  .xv-mobile-menu-panel > ul > li.theme-menu-selected > a .theme-menu-name,
  .xv-mobile-menu-panel > ul > li.theme-menu-active > a .theme-menu-name,
  .xv-mobile-menu-panel > ul > li.active > a .theme-menu-name,
  .xv-mobile-menu-panel > ul > li.xv-scroll-active > a .theme-menu-name {
    text-decoration-line: underline !important;
    text-decoration-color: var(--xv-primary-button-color, #111111) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 8px !important;
  }

  .xv-custom-mobile-actions-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .xv-custom-mobile-actions-row > hr {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 14px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(127,127,127,.35) !important;
  }

  .xv-custom-mobile-actions-row .xv-mobile-actions-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .xv-custom-mobile-actions-row .xv-mobile-actions-inline > a.xv-mobile-action-link {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(22,71,116,.28) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .xv-custom-mobile-actions-row .theme-menu-content,
  .xv-custom-mobile-actions-row .theme-menu-icon,
  .xv-custom-mobile-actions-row .xv-generated-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .xv-custom-mobile-actions-row svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }

  .xv-custom-mobile-actions-row .xv-generated-menu-icon svg {
    fill: currentColor !important;
  }

  .xv-custom-mobile-cta-row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px 10px !important;
    box-sizing: border-box !important;
  }

  .xv-custom-mobile-cta-row > .xv-mobile-cta-button.zpbutton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

.xv-native-header-icon-item > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 38px !important;
  padding-inline-start: 8px !important;
  padding-inline-end: 8px !important;
}

.xv-native-header-icon-item .theme-menu-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.xv-native-header-icon-item .theme-menu-name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.xv-native-header-icon-item .theme-menu-icon,
.xv-native-header-icon-item .theme-menu-icon svg,
.xv-native-header-icon-item .xv-generated-menu-icon,
.xv-native-header-icon-item .xv-generated-menu-icon svg {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.xv-native-header-icon-item .theme-menu-icon,
.xv-native-header-icon-item .xv-generated-menu-icon {
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

.xv-native-header-icon-item .theme-menu-icon svg,
.xv-native-header-icon-item .xv-generated-menu-icon svg {
  width: 20px !important;
  height: 20px !important;
}

.xv-native-header-icon-item .xv-generated-menu-icon svg {
  fill: currentColor !important;
}

/* Ensure the CTA remains a normal native highlighted menu item. */
.xv-native-header-cta-item > a {
  visibility: visible !important;
  opacity: 1 !important;
}

.xv-mobile-cta-row { display: none; }

/* Powered-by bar */
.xv-powered-by-bar {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 14px;
  background: #000000;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.xv-powered-by-bar a { color: #ffffff !important; text-decoration: none !important; }
.xv-powered-by-bar a:hover, .xv-powered-by-bar a:focus { text-decoration: underline !important; }
.xv-powered-by-logo-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.xv-powered-by-logo {
  display: inline-block;
  height: 24px;
  width: 96px;
  background-image: url('../images/xtraviral-powered-by-logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (max-width: 767px) {
  /* Hide desktop-injected actions if the desktop menu remains in DOM on mobile. */
  [data-zp-nonresponsive-container="mymenu1"] .xv-native-header-action-item { display: none !important; }

  .xv-native-mobile-action-item .theme-menu-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .xv-native-mobile-action-item .theme-menu-icon,
  .xv-native-mobile-action-item .theme-menu-icon svg,
  .xv-native-mobile-action-item .xv-generated-menu-icon,
  .xv-native-mobile-action-item .xv-generated-menu-icon svg {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .xv-mobile-cta-row {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 16px 10px;
  }
  .xv-mobile-cta-theme { width: 100% !important; padding: 0 !important; }
  .xv-mobile-cta-theme .theme-menu-area,
  .xv-mobile-cta-theme .theme-menu,
  .xv-mobile-cta-theme ul,
  .xv-mobile-cta-theme li { width: 100% !important; box-sizing: border-box !important; }
  .xv-mobile-cta-theme ul { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
  .xv-mobile-cta-theme li { margin: 0 !important; }
  .xv-mobile-cta-theme li > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; }

  .xv-powered-by-bar { min-height: 38px; gap: 5px; padding: 6px 7px; font-size: 8.5px; }
  .xv-powered-by-logo { height: 19px; width: 74px; }
}

/* Working mobile hamburger alignment from TEST 3 */
@media (max-width: 991px) {
  .theme-header .theme-responsive-menu-area.zpcontainer {
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
  }
}


/* TEST 8 - force circular Header Action buttons, preserve circles on hover, reduce spacing */
@media (min-width: 768px) {
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item {
    margin-left: 2px !important;
    margin-right: 2px !important;
    padding: 0 !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:hover > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:focus-within > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item.theme-menu-selected > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item.theme-menu-active > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item.active > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid rgba(22, 71, 116, 0.16) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:hover > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:focus-within > a {
    background: #f5f8fb !important;
    border-color: rgba(22, 71, 116, 0.30) !important;
    color: #102f4d !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .theme-menu-content,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .theme-menu-icon,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .xv-generated-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .theme-menu-icon svg,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .xv-generated-menu-icon svg {
    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .xv-generated-menu-icon svg {
    fill: currentColor !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item .theme-menu-name {
    display: none !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-cta-item {
    margin-left: 7px !important;
  }
}


/* TEST 9 - homepage section scroll active state as primary-colour underline */
@media (min-width: 768px) {
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).theme-menu-selected,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).theme-menu-active,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).active,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-scroll-active {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).theme-menu-selected > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).theme-menu-active > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):not(.menu-highlight-primary):not(.menu-highlight-secondary).active > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-scroll-active > a {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    color: var(--xv-main-menu-link-color, inherit) !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-scroll-active > a .theme-menu-name {
    color: var(--xv-main-menu-link-color, inherit) !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--xv-primary-button-color, #111111) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 8px !important;
    text-decoration-skip-ink: none !important;
  }
}

/* TEST 10 - compact Main Menu spacing while leaving Header Actions unchanged. */
@media (min-width: 768px) {
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item) {
    margin-inline-start: 0 !important;
    margin-inline-end: 12px !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):last-of-type {
    margin-inline-end: 0 !important;
  }

  /* CTA is a genuine Zoho Primary Button. Do not set background/text/border here,
     so the template's Primary Button styling can control those properties. */
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-cta-item > a.zpbutton.zpbutton-type-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
}



/* TEST 12 - final desktop/mobile header and powered-by behaviour */
:root {
  --xv-primary-button-color: #111111;
  --xv-primary-button-text-color: #ffffff;
}

/* Main Menu selected/scroll-active/hover state: primary-colour underline, no filled box. */
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item) > a,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row) > a {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):hover > a .theme-menu-name,
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item):focus-within > a .theme-menu-name,
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item).theme-menu-selected > a .theme-menu-name,
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item).theme-menu-active > a .theme-menu-name,
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item).active > a .theme-menu-name,
.theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-header-action-item).xv-scroll-active > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row):hover > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row):focus-within > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).theme-menu-selected > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).theme-menu-active > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).active > a .theme-menu-name,
.theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).xv-scroll-active > a .theme-menu-name {
  text-decoration-line: underline !important;
  text-decoration-color: var(--xv-primary-button-color) !important;
  text-decoration-thickness: 3px !important;
  text-underline-offset: 8px !important;
  text-decoration-skip-ink: none !important;
}

/* Desktop Header Action circles. */
@media (min-width: 768px) {
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item {
    margin-inline: 2px !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item > a {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border: 2px solid rgba(22,71,116,.16) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
  }

  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:hover > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:focus-within > a {
    background: var(--xv-primary-button-color) !important;
    border-color: var(--xv-primary-button-color) !important;
    color: var(--xv-primary-button-text-color) !important;
    box-shadow: none !important;
  }
}

/* Powered-by bar: Powered by + larger linked logo + tagline. */
.xv-powered-by-bar {
  gap: 10px !important;
}
.xv-powered-by-logo {
  width: 150px !important;
  height: 31px !important;
}
.xv-powered-by-prefix,
.xv-powered-by-tagline {
  display: inline-block;
}

@media (max-width: 991px) {
  /* Ensure the site logo is visible on mobile. */
  .theme-header [data-zs-branding],
  .theme-header .theme-branding-info {
    display: flex !important;
    align-items: center !important;
    min-height: 70px !important;
    padding: 10px 68px 10px 15px !important;
    box-sizing: border-box !important;
  }

  .theme-header [data-zs-logo-container],
  .theme-header .theme-logo-parent,
  .theme-header .theme-logo-parent.theme-disable-logo-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
  }

  .theme-header [data-zs-logo-container] img,
  .theme-header .theme-logo-parent img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 46px !important;
    max-width: min(72vw, 260px) !important;
    width: auto !important;
    height: auto !important;
  }

  /* Keep burger/close icon on the same horizontal centreline as the logo. */
  .theme-header {
    position: relative !important;
  }
  .theme-header > [data-zs-responsive-menu-area].theme-responsive-menu-area,
  .theme-header [data-zs-responsive-menu-area].theme-responsive-menu-area {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .theme-header [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    position: absolute !important;
    top: 0 !important;
    right: 15px !important;
    width: 46px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 30 !important;
  }

  /* CTA is always a separate full-width second row, never an item in the hamburger menu. */
  .xv-mobile-cta-row {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  .xv-mobile-cta-theme,
  .xv-mobile-cta-theme .theme-menu-area,
  .xv-mobile-cta-theme .theme-menu,
  .xv-mobile-cta-theme ul,
  .xv-mobile-cta-theme li {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .xv-mobile-cta-theme li > a.zpbutton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Expanded menu Header Actions: rule + one centred horizontal row of circles. */
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li.xv-native-mobile-actions-row {
    display: block !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 16px 15px 14px !important;
    border-top: 1px solid rgba(127,127,127,.35) !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .xv-mobile-actions-inline {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
  }
  .xv-mobile-actions-inline > a.xv-mobile-action-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(22,71,116,.16) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    text-decoration: none !important;
    line-height: 1 !important;
    overflow: hidden !important;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
  }
  .xv-mobile-actions-inline > a.xv-mobile-action-link:hover,
  .xv-mobile-actions-inline > a.xv-mobile-action-link:focus {
    background: var(--xv-primary-button-color) !important;
    border-color: var(--xv-primary-button-color) !important;
    color: var(--xv-primary-button-text-color) !important;
    box-shadow: none !important;
  }
  .xv-mobile-actions-inline .theme-menu-content,
  .xv-mobile-actions-inline .theme-menu-icon,
  .xv-mobile-actions-inline .xv-generated-menu-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .xv-mobile-actions-inline .theme-menu-icon svg,
  .xv-mobile-actions-inline .xv-generated-menu-icon svg {
    width: 23px !important;
    height: 23px !important;
    max-width: 23px !important;
    max-height: 23px !important;
  }

  .xv-mobile-actions-inline .xv-generated-menu-icon svg {
    fill: currentColor !important;
  }

  .xv-powered-by-bar {
    min-height: 44px !important;
    gap: 7px !important;
    padding: 7px 8px !important;
    font-size: 9px !important;
  }
  .xv-powered-by-logo {
    width: 120px !important;
    height: 25px !important;
  }
}


/* TEST 13 - requested header corrections */

/* Header CTAs use Zoho's native Primary Button classes. Their visual styling is
   intentionally left to the active Theme and Advanced Visual Editor. */

/* Header Action hover: only the circular BORDER changes to Primary Button colour. */
@media (min-width: 768px) {
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:hover > a,
  .theme-header [data-zp-nonresponsive-container="mymenu1"] .theme-menu > ul > li.xv-native-header-icon-item:focus-within > a {
    background: #ffffff !important;
    border-color: var(--xv-primary-button-color, #111111) !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  }
}

/* Powered-by: remove tagline but keep the enlarged logo. */
.xv-powered-by-tagline { display: none !important; }

@media (max-width: 991px) {
  /* Build the mobile header as Row 1: logo + burger, Row 2: full-width CTA. */
  .theme-header > .zpcontainer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
  }

  .theme-header > .zpcontainer > [data-zs-branding],
  .theme-header > .zpcontainer > .theme-branding-info {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .xv-mobile-cta-row {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 15px 10px !important;
    box-sizing: border-box !important;
    order: 20 !important;
  }
  .xv-mobile-cta-theme { width: 100% !important; }
  .xv-mobile-cta-button.zpbutton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Burger/close icon: exact centreline measured from the actual branding block. */
  .theme-header [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    position: absolute !important;
    top: var(--xv-mobile-brand-centre-y, 35px) !important;
    right: 15px !important;
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 40 !important;
  }

  /* Mobile menu labels: no blanket/hover underline. Only the active page/section is underlined. */
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row) > a .theme-menu-name {
    text-decoration: none !important;
  }
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).theme-menu-selected > a .theme-menu-name,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).theme-menu-active > a .theme-menu-name,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).active > a .theme-menu-name,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li:not(.xv-native-mobile-actions-row).xv-scroll-active > a .theme-menu-name {
    text-decoration-line: underline !important;
    text-decoration-color: var(--xv-primary-button-color, #111111) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 8px !important;
    text-decoration-skip-ink: none !important;
  }

  /* Explicit horizontal divider between standard menu items and Header Actions. */
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul > li.xv-native-mobile-actions-row {
    border-top: 0 !important;
    padding-top: 0 !important;
  }
  .xv-mobile-actions-divider {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    margin: 14px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(127,127,127,.45) !important;
  }

  /* Mobile Header Action hover/focus: border only changes to primary colour. */
  .xv-mobile-actions-inline > a.xv-mobile-action-link:hover,
  .xv-mobile-actions-inline > a.xv-mobile-action-link:focus {
    background: #ffffff !important;
    border-color: var(--xv-primary-button-color, #111111) !important;
    color: #1a3858 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  }

  /* Belt-and-braces: a CTA can never appear as an item inside the expanded hamburger menu. */
  .theme-header [data-zp-responsive-container="mymenu1"] .xv-native-header-cta-item,
  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-cta-row,
  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-cta-button {
    display: none !important;
  }
}


/* TEST 17 - stable Test13 mobile structure + native standalone desktop CTA */
@media (min-width: 992px) {
  .xv-desktop-cta-wrap {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-inline-start: 7px !important;
  }
  .xv-desktop-cta-wrap > .zpbutton.zpbutton-type-primary {
    width: auto !important;
    white-space: nowrap !important;
    text-decoration: none !important;
  }
}

@media (max-width: 991px) {
  .xv-desktop-cta-wrap { display: none !important; }

  /* Keep the known-good Test13 burger element untouched in width/geometry. */
  .theme-header [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* The responsive panel must never inherit hamburger-width constraints. */
  .theme-header [data-zp-responsive-container="mymenu1"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu > ul {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* CTA is the second header row and spans the complete mobile viewport. */
  .theme-header > .zpcontainer > .xv-mobile-cta-row,
  .xv-mobile-cta-row {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    order: 20 !important;
  }
  .xv-mobile-cta-theme,
  .xv-mobile-cta-button.zpbutton.zpbutton-type-primary {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Preserve Zoho header-on-scroll choices without re-parenting the header. */
  [data-headercontainer].xv-mobile-header-floating,
  [data-headercontainer].xv-mobile-header-transparent {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  [data-headercontainer].xv-mobile-header-transparent:not(.xv-mobile-header-scrolled) .theme-header {
    background-color: transparent !important;
  }
}


/* TEST 19 - restore native burger geometry, centre its actual glyph on the logo,
   and keep the responsive panel full width. */
@media (max-width: 991px) {
  .theme-header [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(var(--xv-burger-align-delta, 0px)) !important;
  }

  /* The previous visual offset came from Zoho's default 15px top margin on the
     burger glyph. Centre the three lines inside our 46px clickable area instead. */
  .theme-header [data-zp-burger-clickable-area="mymenu1"] [data-zp-theme-burger-icon="mymenu1"],
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon {
    display: block !important;
    position: relative !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    left: auto !important;
    background: currentColor !important;
  }

  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon::before,
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    width: 24px !important;
    height: 2px !important;
    margin: 0 !important;
    background: currentColor !important;
    transition: transform .2s ease, top .2s ease !important;
  }
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon::before { top: -7px !important; }
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon::after  { top: 7px !important; }

  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon.theme-close-icon {
    background: transparent !important;
  }
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon.theme-close-icon::before {
    top: 0 !important;
    transform: rotate(45deg) !important;
  }
  .theme-header [data-zp-burger-clickable-area="mymenu1"] .theme-burger-icon.theme-close-icon::after {
    top: 0 !important;
    transform: rotate(-45deg) !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .theme-header [data-zp-responsive-container="mymenu1"] > .theme-menu,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
    transition: max-height .2s ease !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu.xv-mobile-menu-open {
    visibility: visible !important;
  }
}


/* TEST 23 - full-width expanded menu panel between header row and CTA.
   Only .theme-menu is relocated; Zoho's responsive wrapper and burger remain
   in their native header position. */
@media (min-width: 992px) {
  .theme-header .xv-mobile-menu-row { display: none !important; }
}

@media (max-width: 991px) {
  .theme-header .xv-mobile-header-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Logo/branding takes the remaining width in row 1. */
  .theme-header .xv-mobile-header-grid > [data-zs-branding],
  .theme-header .xv-mobile-header-grid > .theme-branding-info {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Keep only the actual burger area at the right of row 1. */
  .theme-header .xv-mobile-header-grid > .xv-mobile-burger-area,
  .theme-header .xv-mobile-header-grid > .theme-responsive-menu-area {
    flex: 0 0 60px !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Test 3 alignment behaviour: centre the clickable burger vertically in row 1. */
  .theme-header .xv-mobile-burger-area [data-zp-burger-clickable-area="mymenu1"],
  .theme-header .theme-responsive-menu-area [data-zp-burger-clickable-area="mymenu1"] {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    width: 46px !important;
    height: 70px !important;
    min-width: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 40 !important;
  }

  /* Row 2: only the expandable .theme-menu panel, relocated by JS. */
  .theme-header .xv-mobile-header-grid > .theme-menu.xv-mobile-menu-row,
  .theme-header .xv-mobile-header-grid > .xv-mobile-menu-row {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
  }

  .theme-header .xv-mobile-header-grid > .theme-menu.xv-mobile-menu-row,
  .theme-header .xv-mobile-header-grid > .xv-mobile-menu-row {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    visibility: hidden !important;
    max-height: 0;
    overflow: hidden;
  }

  .theme-header .xv-mobile-header-grid > .xv-mobile-menu-row.xv-mobile-menu-open {
    visibility: visible !important;
  }

  .theme-header .xv-mobile-header-grid > .xv-mobile-menu-row > ul {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Keep Zoho's native responsive wrapper in row 1 so its hamburger remains
     visible and clickable. */
  .theme-header .xv-mobile-header-grid > [data-zp-responsive-container="mymenu1"] {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    order: 1 !important;
  }

  /* Row 3: CTA always follows the expanded/collapsed menu row. */
  .theme-header .xv-mobile-header-grid > .xv-mobile-cta-row,
  .theme-header .xv-mobile-header-grid > .xv-mobile-cta-row-final {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px 16px 10px !important;
    box-sizing: border-box !important;
  }

  .theme-header .xv-mobile-cta-row .xv-mobile-cta-theme,
  .theme-header .xv-mobile-cta-row .xv-mobile-cta-button.zpbutton {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}


/* TEST 24 FINAL OVERRIDES - keep Zoho's responsive DOM intact. */
@media (max-width: 991px) {
  .theme-header > .zpcontainer.xv-mobile-header-stable {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 60px !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > [data-zs-branding],
  .theme-header > .zpcontainer.xv-mobile-header-stable > .theme-branding-info {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px 8px 10px 15px !important;
    box-sizing: border-box !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > .xv-mobile-burger-area-stable,
  .theme-header > .zpcontainer.xv-mobile-header-stable > .theme-responsive-menu-area.xv-mobile-burger-area-stable {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 70px !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"].xv-native-menu-wrapper {
    position: static !important;
    display: block !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .theme-header .xv-mobile-burger-area-stable [data-zp-burger-clickable-area="mymenu1"].theme-responsive-menu-container {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 70px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] > .theme-menu.xv-native-menu-panel,
  .theme-header [data-zp-responsive-container="mymenu1"] .theme-menu.xv-native-menu-panel {
    position: absolute !important;
    top: var(--xv-native-menu-top, 70px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 45 !important;
  }

  .theme-header > .zpcontainer.xv-mobile-header-stable > .xv-mobile-cta-row-stable {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: var(--xv-native-menu-space, 0px) 0 0 !important;
    padding: 8px 16px 10px !important;
    box-sizing: border-box !important;
    transition: margin-top .2s ease !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-native-mobile-actions-row {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-actions-inline {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .theme-header [data-zp-responsive-container="mymenu1"] .xv-mobile-actions-inline > a.xv-mobile-action-link {
    display: inline-flex !important;
    flex: 0 0 44px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid rgba(22,71,116,.28) !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #1a3858 !important;
    box-sizing: border-box !important;
  }
}