/* ============================
   UADEPOT GLOBAL OVERRIDES v6
   Brand re-skin: UADepot blue/red palette, Poppins/Manrope fonts
   (was: NXTCORE HP-style header + inline search + mega menu + mobile)
   ============================ */
:root {
    --ua-primary: #00438B;
    --ua-primary-hover: #003a78;
    --ua-secondary: #E60B09;
    --ua-accent: #161616;
    --ua-text: #7A7A7A;
}
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.logo-text, .uadepot-logo {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================
   DESKTOP HEADER (min-width: 992px)
   ============================ */
@media (min-width: 992px) {
  /* Hide the dark top bar on desktop — show only the main nav */
  header.header.wgs-new-header-top-latest {
    display: none !important;
  }

  /* Main nav bar — clean white HP style */
  nav.top-mega-menu-latest-cls {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: none !important;
    position: relative !important;
  }
  nav.top-mega-menu-latest-cls .main-top-sec {
    padding: 0 !important;
  }
  nav.top-mega-menu-latest-cls .main-sec {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 0 !important;
  }

  /* Header container — widen so content sits further left (less centered gutter) */
  nav.top-mega-menu-latest-cls .main-top-sec > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin-left: 0 !important;
  }
  /* Logo area */
  nav.top-mega-menu-latest-cls .left-sec {
    flex: 0 0 auto !important;
    margin-right: 14px !important;
  }
  nav.top-mega-menu-latest-cls .left-sec .country-sec {
    display: none !important;
  }
  nav.top-mega-menu-latest-cls .logo-sec a.mega-latest-menu {
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #00438B !important;
    text-decoration: none !important;
    padding: 0 !important;
  }
  nav.top-mega-menu-latest-cls .logo-sec img {
    max-height: 30px !important;
    width: auto !important;
  }

  /* Right section — flex between nav items and action icons */
  nav.top-mega-menu-latest-cls .right-sec {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Nav menu items */
  ul.list-menu.top-menu-ul-header-latest {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;       /* don't shrink -> nav never wraps to a 2nd line */
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    list-style: none !important;
  }
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header {
    position: static !important;
    flex: 0 0 auto !important;
  }
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header > a.top-menu-parent {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    padding: 18px 11px !important;
    transition: color 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    border-bottom: 2px solid transparent !important;
    background: none !important;
    border-radius: 0 !important;
    line-height: 20px !important;
  }
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header > a.top-menu-parent:hover,
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header.active-show-mobile > a.top-menu-parent {
    color: #00438B !important;
    border-bottom-color: #00438B !important;
  }
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header > a i.fa-chevron-down {
    font-size: 8px !important;
    margin-left: 2px !important;
    opacity: 0.4 !important;
    display: inline-block !important;
  }
  /* Override any CTA button style on last menu item */
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header:last-child > a {
    background: none !important;
    color: #333 !important;
    border-radius: 0 !important;
    padding: 18px 11px !important;
    font-weight: 500 !important;
  }
  ul.list-menu.top-menu-ul-header-latest li.top-menu-li-header:last-child > a:hover {
    color: #00438B !important;
    border-bottom-color: #00438B !important;
  }

  /* ---- Permanent Inline Search Bar ---- */
  .nxtcore-inline-search {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    min-width: 0 !important;
    max-width: 340px !important;
    margin-left: 18px !important;   /* clear gap so the last nav item never touches the search */
  }
  .nxtcore-inline-search-bar {
    display: flex !important;
    align-items: center !important;
    background: #f3f4f6 !important;
    border-radius: 24px !important;
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 360px !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
  }
  .nxtcore-inline-search-bar:focus-within {
    background: #fff !important;
    border-color: #00438B !important;
    box-shadow: 0 0 0 3px rgba(0,150,214,0.1) !important;
  }
  .nxtcore-inline-search-bar i.fa-search {
    color: #9ca3af !important;
    font-size: 13px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }
  .nxtcore-inline-search-bar input {
    border: none !important;
    background: none !important;
    outline: none !important;
    padding: 8px 0 !important;
    font-size: 13px !important;
    color: #333 !important;
    width: 100% !important;
    font-family: inherit !important;
    min-width: 0 !important;
  }
  .nxtcore-inline-search-bar input::placeholder {
    color: #9ca3af !important;
  }

  /* ---- Header action icons (account, cart) ---- */
  .nxtcore-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
  .nxtcore-header-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    color: #333 !important;
    font-size: 16px !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    position: relative !important;
  }
  .nxtcore-header-icon:hover {
    background: #f3f4f6 !important;
    color: #00438B !important;
  }
  .nxtcore-cart-badge {
    position: absolute !important;
    top: 2px !important;
    right: 2px !important;
    background: #00438B !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    min-width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    border-radius: 50% !important;
    text-align: center !important;
    padding: 0 4px !important;
  }

  /* ---- Currency selector ---- */
  .nxtcore-currency-select {
    position: relative !important;
  }
  .nxtcore-currency-select > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #333 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
  }
  .nxtcore-currency-select > a:hover {
    background: #f3f4f6 !important;
  }
  .nxtcore-currency-select > a i {
    font-size: 8px !important;
    opacity: 0.5 !important;
  }
  .nxtcore-currency-select .dropdown-menu {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    padding: 4px !important;
    min-width: 120px !important;
  }
  .nxtcore-currency-select .dropdown-menu a {
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
  }
  .nxtcore-currency-select .dropdown-menu a:hover {
    background: #f3f4f6 !important;
    color: #00438B !important;
  }

  /* ============================
     MEGA MENU DROPDOWN — HP Style
     ============================ */
  nav.top-mega-menu-latest-cls .drop-down-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: #fff !important;
    border: none !important;
    border-top: 2px solid #00438B !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
    z-index: 9999 !important;
    padding: 0 !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .row {
    margin: 0 !important;
    min-height: 300px !important;
  }

  /* Left panel — category list */
  nav.top-mega-menu-latest-cls .drop-down-menu .border-right-mnu {
    background: #f8f9fa !important;
    padding: 0 !important;
    border-right: 1px solid #e5e7eb !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .left-side {
    padding: 0 !important;
    background: #f8f9fa !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .left-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }

  /* Individual category items in left panel */
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner {
    padding: 14px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid #e9ecef !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner:hover {
    background: #fff !important;
    border-left-color: #00438B !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner.active {
    background: #fff !important;
    border-left-color: #00438B !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner:last-child {
    border-bottom: none !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner a::after {
    display: none !important;
  }

  /* Category item icon */
  nav.top-mega-menu-latest-cls .drop-down-menu .icon-sec {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    max-width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    margin-right: 12px !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner.active .icon-sec {
    background: #eef6ff !important;
    border-color: #00438B !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .icon-sec i {
    color: #333 !important;
    font-size: 14px !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner.active .icon-sec i {
    color: #00438B !important;
  }

  /* Category item text */
  nav.top-mega-menu-latest-cls .drop-down-menu .text-sec h5 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  nav.top-mega-menu-latest-cls .list-menu.top-menu-ul-header-latest li.left-list-inner.active .text-sec h5 {
    color: #00438B !important;
  }

  /* Category item link styling */
  nav.top-mega-menu-latest-cls .list-menu li a.first-list {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Right panel — subcategory links */
  nav.top-mega-menu-latest-cls .drop-down-menu .right-side-panel-data {
    padding: 24px 30px !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .right-side {
    padding: 0 !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .bottom-sec {
    padding: 0 !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .bottom-sec h5 {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #e5e7eb !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .bottom-sec .nav {
    flex-direction: column !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .bottom-sec a {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .bottom-sec a:hover {
    background: #f3f4f6 !important;
    color: #00438B !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .bottom-sec a i {
    color: #6b7280 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .bottom-sec a:hover i {
    color: #00438B !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .bottom-sec a img {
    margin-right: 10px !important;
    width: 20px !important;
    height: auto !important;
  }

  /* Right panel heading/description area */
  nav.top-mega-menu-latest-cls .drop-down-menu .right-ul h5 {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #6b7280 !important;
    font-weight: 600 !important;
  }
  nav.top-mega-menu-latest-cls .list-menu .drop-down-menu .right-ul p {
    font-size: 14px !important;
    color: #333 !important;
  }

  /* Bottom button in dropdown */
  nav.top-mega-menu-latest-cls .drop-down-menu .botton-description-button {
    padding: 0 !important;
    margin-top: 16px !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .botton-description-button a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #00438B !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
  }
  nav.top-mega-menu-latest-cls .drop-down-menu .botton-description-button a:hover {
    text-decoration: underline !important;
  }

  /* Sub-menu icon images */
  nav.top-mega-menu-latest-cls .sub-menu-img-icon-lt-menu {
    width: 20px !important;
    height: auto !important;
    margin-right: 8px !important;
  }

  /* Ensure mobile-only elements stay hidden on desktop */
  .mobile-menu-global-hostx {
    display: none !important;
  }

  /* Sticky header */
  .header-is-sticky nav.top-mega-menu-latest-cls {
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  }
  .header-is-sticky .hostx-pages-sections {
    margin-top: 56px !important;
  }
  .header-is-sticky .store-pages-market-place {
    margin-top: 56px !important;
  }
}

/* ============================
   MOBILE HEADER (max-width: 991px)
   ============================ */
@media (max-width: 991px) {
  /* === TOP HEADER BAR === */
  header.header.wgs-new-header-top-latest {
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  }
  header.header.wgs-new-header-top-latest > .container {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    position: relative !important;
  }

  /* Show logo on mobile — centered */
  .left-logo-mobile-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    padding: 0 48px !important;
  }
  .left-logo-mobile-section .logo {
    color: #00438B !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  .left-logo-mobile-section .logo img {
    max-height: 26px !important;
    width: auto !important;
  }
  .left-logo-mobile-section .logo.logo-text {
    color: #00438B !important;
  }

  /* Hamburger — left side */
  .mobile-menu-toggle-drop {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    cursor: pointer !important;
    padding: 8px !important;
  }
  .mobile-menu-toggle-drop .bar1,
  .mobile-menu-toggle-drop .bar2,
  .mobile-menu-toggle-drop .bar3 {
    background: #333 !important;
    height: 2px !important;
    width: 22px !important;
    margin-bottom: 5px !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
  }
  .mobile-menu-toggle-drop .bar3 {
    margin-bottom: 0 !important;
  }

  /* Right section — only show user + cart */
  header.header.wgs-new-header-top-latest .right.float-right {
    position: static !important;
    float: none !important;
  }
  header.header.wgs-new-header-top-latest ul.nav.right_navi {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    list-style: none !important;
  }
  /* Hide ALL nav items by default */
  header.header.wgs-new-header-top-latest .right_navi li {
    display: none !important;
  }
  /* Reset ALL li items in right_navi — override HostX absolute positioning */
  header.header.wgs-new-header-top-latest .right_navi li,
  .header .right .right_navi li,
  .header .right .right_navi li:first-child,
  .header .right .right_navi li.cart-view-list {
    display: none !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Show user icon */
  header.header.wgs-new-header-top-latest .right_navi li.hover.mblshow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
  }
  /* Show cart icon */
  header.header.wgs-new-header-top-latest .right_navi li.cart-view-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 40px !important;
  }
  /* Hide logout icon on mobile */
  header.header.wgs-new-header-top-latest .right_navi li.user-logout-list {
    display: none !important;
  }
  /* Show currency selector on mobile */
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    position: relative !important;
  }
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv a {
    font-size: 12px !important;
    color: #333 !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv a span#sCurrency {
    display: inline-block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
  }
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv a i.fas.fa-sort-desc {
    font-size: 10px !important;
    margin-top: -2px !important;
  }
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    min-width: 100px !important;
    padding: 4px 0 !important;
    z-index: 1100 !important;
  }
  header.header.wgs-new-header-top-latest .right_navi li.currencyDiv .dropdown-menu a {
    color: #333 !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* Style all icon links — identical for user + cart */
  header.header.wgs-new-header-top-latest .right_navi li a,
  header.header.wgs-new-header-top-latest .right .right_navi li a,
  .header .right .right_navi li a {
    color: #333 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    background: none !important;
    line-height: 1 !important;
  }
  /* FORCE black on ALL icon <i> elements — override HostX var(--primary-color) */
  .header .right .right_navi li a i,
  .header .right .right_navi li a i.fas,
  .header .right .right_navi li a i.far,
  .header .right .right_navi li a i.fa,
  header.header.wgs-new-header-top-latest .right_navi li a i,
  header.header.wgs-new-header-top-latest .right_navi li a i.fas,
  header.header.wgs-new-header-top-latest .right .right_navi li a i {
    color: #333 !important;
    background: none !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
  .header .right .right_navi li a i::before,
  header.header.wgs-new-header-top-latest .right_navi li a i::before {
    display: inline-block !important;
    color: #333 !important;
  }
  /* Hide phone text span */
  header.header.wgs-new-header-top-latest .right_navi li a.telephoneanchor span {
    display: none !important;
  }
  /* Cart badge */
  header.header.wgs-new-header-top-latest .wgs-custom-label-cart-hostx,
  .wgs-new-header-top-latest span.label.label-success.wgs-custom-label-cart-hostx,
  span.label.label-success.wgs-custom-label-cart-hostx {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background: #333 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    min-width: 16px !important;
    height: 16px !important;
    width: auto !important;
    line-height: 16px !important;
    border-radius: 50% !important;
    text-align: center !important;
    padding: 0 3px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide desktop nav on mobile */
  nav.top-mega-menu-latest-cls {
    display: none !important;
  }

}

/* Hide old search overlay */
.nxtcore-search-overlay {
  display: none !important;
}
.left-sec .nxtcore-search-bar {
  display: none !important;
}

/* ============================
   UTILITY / GLOBAL FIXES
   ============================ */

/* Hide old HostX footer structure */
footer.footer.footer-block-latest.p-vertical,
footer.footer.p-vertical {
  display: none !important;
}

/* Hide HostX banner on cart pages */
.whmcs-in-cart-pages .master-breadcrumb.hostx-bread-crumb-data,
.whmcs-in-cart-pages .shoping-cart-background {
  display: none !important;
}

/* ============================
   MOBILE RESPONSIVE — CONTENT
   ============================ */
@media (max-width: 768px) {
  .product-list-page-slider-intiate,
  .no-slider-product-list-v2 {
    flex-direction: column !important;
  }
  .product-item-list-page {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .product-pricing-card {
    margin-bottom: 16px !important;
  }
  .nxt-hero {
    flex-direction: column !important;
    padding: 24px 16px !important;
    text-align: center !important;
  }
  .nxt-hero-content {
    padding: 0 !important;
    order: 2 !important;
  }
  .nxt-hero-image {
    order: 1 !important;
    max-width: 280px !important;
    margin: 0 auto 20px !important;
  }
  .nxt-hero h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .nxt-product-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  .nxt-section-title h2 {
    font-size: 24px !important;
  }
  .nxt-categories {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .nxt-categories::-webkit-scrollbar {
    display: none !important;
  }
  .nxt-product-hero {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .nxt-product-gallery,
  .nxt-product-info {
    width: 100% !important;
    max-width: 100% !important;
  }
  .view-cart-items-table {
    display: block !important;
    overflow-x: auto !important;
  }
  .inner-term-domain-page .inner_term_container {
    padding: 24px 16px !important;
  }
  .inner-term-domain-page h3 {
    font-size: 18px !important;
    margin-top: 24px !important;
  }
  .cpanel_banner.about-us-banner .container .row {
    flex-direction: column !important;
  }
  .about-why-choose-us .choose-us-row-two .col-sm-4 {
    margin-bottom: 16px !important;
  }
  .see-our-story-about .about-metus-row {
    flex-direction: column !important;
  }
  .see-our-story-about .about-metus-row .col-sm-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  /* About page — "Why We Started NXTCORE" heading */
  .see-our-story-about .scnd-frst-row {
    flex-direction: column !important;
  }
  .see-our-story-about .scnd-frst-row .col-sm-4,
  .see-our-story-about .scnd-frst-row .col-sm-8 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
  .see-our-story-about .scnd-frst-row h5 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
  }
  .see-our-story-about .scnd-frst-row h5:after {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .nxt-hero h1 {
    font-size: 24px !important;
  }
  .nxt-hero-image {
    max-width: 220px !important;
  }
}

/* Hide mobile menu on desktop */
@media (min-width: 992px) {
  .mobile-menu-global-hostx {
    display: none !important;
  }
}

/* Fixed header — position only, styling from HP-style CSS */
#myHeader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}
/* Push page content below fixed header — target #main-body directly */
#main-body {
  padding-top: 105px !important;
}
@media (max-width: 991px) {
  .container-custom-header-hostx-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: #fff !important;
  }
  #main-body {
    padding-top: 57px !important;
  }
  /* Fix mobile logo — break max-width:100% circular dependency */
  .wgs-new-header-top-latest .left-logo-mobile-section .logo {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .wgs-new-header-top-latest .left-logo-mobile-section .logo img {
    width: auto !important;
    max-width: none !important;
    max-height: 28px !important;
    height: auto !important;
  }
}



/* ============================
   LOGIN PAGE — MODERN CLEAN DESIGN
   Remove bg image, match HP/Dell aesthetic
   ============================ */

/* 1. Remove background image, set clean light grey */
.hostx-latest-login-register-view {
    background-image: none !important;
    background: #f9fafb !important;
}

/* 2. Modernize login card panel */
.latest-hostx-login-register-pg .login-latest-panel {
    max-width: 420px;
    padding: 40px 36px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    border: 1px solid #e5e7eb;
}

/* 3. Modernize form inputs */
.latest-hostx-login-register-pg .form-control {
    border-radius: 8px;
    height: 48px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.latest-hostx-login-register-pg .form-control:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

/* 4. Modernize login button */
.latest-hostx-login-register-pg #login {
    border-radius: 8px;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    background: #111;
    border-color: #111;
    color: #fff;
    transition: background .15s;
}
.latest-hostx-login-register-pg #login:hover {
    background: #333;
}

/* 5. Clean up heading & description */
.latest-hostx-login-register-pg .heading-mn {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 4px;
}
.latest-hostx-login-register-pg .head-descrp-mn-sec:after {
    display: none;
}
.latest-hostx-login-register-pg .head-descrp-mn {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 24px;
}

/* 6. Password reveal button border-radius */
.latest-hostx-login-register-pg .input-group-append .btn {
    border-radius: 0 8px 8px 0;
    border-color: #d1d5db;
}

/* 7. Remember me / forgot password */
.latest-hostx-login-register-pg .rember-forgot-area {
    margin-bottom: 20px;
}
.latest-hostx-login-register-pg .rember-me-login {
    margin-left: 0;
}

/* 8. Create account link */
.create-acc-section {
    margin-top: 24px;
}
.create-acc-section a.font-weight-bold {
    color: #111;
    text-decoration: underline;
    font-weight: 600;
}

/* 9. Logo sizing */
.latest-hostx-login-register-pg .left-logo-image {
    margin-bottom: 32px;
}
.latest-hostx-login-register-pg .left-logo-image img {
    max-height: 36px;
    width: auto;
}


/* ============================
   GLOBAL BUTTON OVERRIDE
   Black bg / white text for all primary buttons
   ============================ */
:root {
    --btn-primary-bgcolor: #00438B !important;
    --btn-primary-color: #fff !important;
    --btn-primary-bgcolor-hover: #003a78 !important;
    --btn-primary-color-hover: #fff !important;
}


/* ============================
   CART / CHECKOUT — CLEAN UP
   Hide hosting icons, fix buttons
   ============================ */

/* Hide hosting-themed category icon strip on cart pages */
.view-cart-page .product-category-list-hostx,
.view-cart-page .category-heading-section-cart {
    display: none !important;
}

/* Replace domain-themed empty cart image with clean SVG */
.empty-cart-sec img {
    display: none !important;
}
.empty-cart-sec::before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    background: #f3f4f6;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 48px;
}

/* Override remaining button variables */
:root {
    --btn-primary-border: #00438B !important;
    --btn-secondary-bgcolor: #161616 !important;
    --btn-secondary-color: #fff !important;
    --btn-secondary-border: #161616 !important;
    --btn-secondary-bgcolor-hover: #00438B !important;
    --btn-secondary-color-hover: #fff !important;
}

/* ===== Instant search autocomplete dropdown ===== */
.nxtcore-inline-search { position: relative !important; }
.nxt-ac { position:absolute; top:calc(100% + 8px); right:0; left:auto; width:440px; max-width:92vw;
  background:#fff; border:1px solid #edf0f4; border-radius:14px;
  box-shadow:0 24px 60px -14px rgba(16,24,40,.30), 0 8px 22px -10px rgba(16,24,40,.14);
  padding:8px; z-index:1400; max-height:74vh; overflow:auto; display:none; }
.nxt-ac.open { display:block; }
.nxt-ac-head { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#9aa3b0; font-weight:700; padding:6px 10px 4px; }
.nxt-ac-item { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; text-decoration:none; }
.nxt-ac-item:hover, .nxt-ac-item.active { background:#f2f6fc; }
.nxt-ac-thumb { width:48px; height:48px; flex:0 0 48px; border-radius:8px; overflow:hidden; background:#f2f2f2; display:flex; align-items:center; justify-content:center; }
.nxt-ac-thumb img { width:100%; height:100%; object-fit:cover; }
.nxt-ac-meta { display:flex; flex-direction:column; min-width:0; }
.nxt-ac-name { font-size:13.5px; color:#2a3744; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nxt-ac-price { font-size:13px; color:#00438B; font-weight:700; margin-top:2px; }
.nxt-ac-price s { color:#9aa3b0; font-weight:400; margin-left:6px; }
.nxt-ac-all { display:block; text-align:center; padding:11px; margin-top:4px; border-top:1px solid #eef1f5; color:#00438B; font-weight:600; font-size:13px; text-decoration:none; }
.nxt-ac-all:hover { text-decoration:underline; }
.nxt-ac-empty { padding:22px; text-align:center; color:#9aa3b0; font-size:13px; }
.nxtcore-inline-search-bar .nxt-ac-clear { cursor:pointer; color:#9aa3b0; font-size:13px; margin-left:8px; }
.nxtcore-inline-search-bar .nxt-ac-clear:hover { color:#333; }