/* TYCON GLASS V4.8 — native Zoho Commerce account SPA.
   Account data, profile forms, address editing, order history, and sign-out
   remain owned by Zoho. The full storefront menu is mounted separately. */

/* Do not hide Zoho's existing header until the full Tycon menu has mounted and
   the specific native header element has been positively identified. */
html.txc-v48-portal-ready [data-txc-v48-native-header="true"] {
  display: none !important;
}

html.txc-v48-portal-ready #tycon-cg-header {
  position: sticky !important;
  top: 0 !important;
  inset: 0 0 auto !important;
  z-index: 100560 !important;
  width: 100% !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* The dark native account tab strip is replaced with glass, without
   reparenting or replacing Zoho's navigation links and event handlers. */
html body:has(.zpmo-navbar) :is(.zpmo-navbar-section-container,.zpmo-navbar-container) {
  color: #294866 !important;
  background: linear-gradient(120deg,rgba(255,255,255,.985),rgba(238,246,254,.975)) !important;
  background-image: linear-gradient(120deg,rgba(255,255,255,.985),rgba(238,246,254,.975)) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0,74,173,.16) !important;
  box-shadow: 0 5px 18px rgba(28,56,85,.065) !important;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar {
  color: #294866 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar > li {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar a.zpmo-navtab,
html body:has(.zpmo-navbar) ul.zpmo-navbar a {
  color: #294866 !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar a :is(svg,path,circle,rect,polyline,line),
html body:has(.zpmo-navbar) ul.zpmo-navbar a :is(i,span) {
  color: inherit !important;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar > li.zpmo-navtab-active > a,
html body:has(.zpmo-navbar) ul.zpmo-navbar > li.active > a,
html body:has(.zpmo-navbar) ul.zpmo-navbar a[aria-current="page"] {
  color: #004aad !important;
  background: rgba(0,74,173,.085) !important;
  border: 1px solid rgba(0,74,173,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(0,74,173,.10) !important;
  font-weight: 650 !important;
}

html body:has(.zpmo-navbar) ul.zpmo-navbar a:is(:hover,:focus-visible) {
  color: #004aad !important;
  background: rgba(0,74,173,.065) !important;
  border-color: rgba(0,74,173,.22) !important;
  outline-offset: 2px;
}

/* Native mobile "Menu" stays tappable, and its expanded links continue to
   use the original Zoho responsive layout. */
html body:has(.zpmo-navbar) .zpmo-navbar-container :is(button,[role="button"],.zpmo-toggle,.zpmo-navbar-toggle) {
  color: #294866 !important;
  text-shadow: none !important;
}

@media (max-width: 767px) {
  html body:has(.zpmo-navbar) :is(.zpmo-navbar-section-container,.zpmo-navbar-container) {
    border-radius: 0 !important;
    box-shadow: 0 3px 12px rgba(28,56,85,.05) !important;
  }
  html body:has(.zpmo-navbar) ul.zpmo-navbar a {
    min-height: 42px;
  }
}

/* Adapt the native tab chrome to the same 08:00 / 17:00 mode as the menu.
   Keep all labels readable in dark mode. */
html.txc-menu-dark body:has(.zpmo-navbar) :is(.zpmo-navbar-section-container,.zpmo-navbar-container) {
  color: #e3edfa !important;
  background: linear-gradient(130deg,#26374d,#1a2639) !important;
  background-image: linear-gradient(130deg,#26374d,#1a2639) !important;
  border-bottom-color: rgba(225,238,255,.18) !important;
}
html.txc-menu-dark body:has(.zpmo-navbar) ul.zpmo-navbar a {
  color: #e4ebf8 !important;
}
html.txc-menu-dark body:has(.zpmo-navbar) ul.zpmo-navbar > li.zpmo-navtab-active > a,
html.txc-menu-dark body:has(.zpmo-navbar) ul.zpmo-navbar > li.active > a,
html.txc-menu-dark body:has(.zpmo-navbar) ul.zpmo-navbar a[aria-current="page"] {
  color: #fff !important;
  background: rgba(255,255,255,.145) !important;
  border-color: rgba(255,255,255,.27) !important;
}
html.txc-menu-dark body:has(.zpmo-navbar) ul.zpmo-navbar a:is(:hover,:focus-visible),
html.txc-menu-dark body:has(.zpmo-navbar) .zpmo-navbar-container :is(button,[role="button"],.zpmo-toggle,.zpmo-navbar-toggle) {
  color: #fff !important;
}

@media print {
  html.txc-v48-portal-ready #tycon-cg-header {display:none!important;}
  html.txc-v48-portal-ready [data-txc-v48-native-header="true"] {display:block!important;}
}
