/* EVELLMAX V4.4 — scoped, reversible visual hotfix for staging.
   Targets regressions documented in screenshots taken after V4.3.
   Does not move OpenCart fields or change checkout scripts/stock/order logic. */
html.evx-v4-active {
  --evx44-ink: #151515;
  --evx44-offwhite: #f6f6f4;
  --evx44-line: #e5e5e2;
}
/* Keep the nav readable — previous V4.2 styles made some submenu links white-on-white. */
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-inner {
  background-color: #fff !important;
  border-color: #e9e9e6 !important;
  color: #191919 !important;
}
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu a,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu a span,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu li,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu a,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu a span,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu li,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-inner a,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-inner a span {
  color: #191919 !important;
  text-shadow: none !important;
}
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu a:hover,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .dropdown-menu a:hover span,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu a:hover,
html.evx-v4-active .site-wrapper > header .desktop-main-menu-wrapper .mega-menu a:hover span {
  color: #565656 !important;
}
/* The V4.3 content inherited black parent background, while its heading was black.
   Give the department area a true white section, with legible editorial typography. */
html.evx-v4-active body.common-home .evx42-home,
html.evx-v4-active .evx42-home { background: #fff !important; color: #151515; }
html.evx-v4-active .evx42-home .evx42-section:not(.alt) {
  background: #fff !important;
  color: #161616 !important;
}
html.evx-v4-active .evx42-home .evx42-section:not(.alt) h2,
html.evx-v4-active .evx42-home .evx42-section:not(.alt) .evx42-lead h2,
html.evx-v4-active .evx42-home .evx42-section:not(.alt) .evx42-kicker {
  color: #181818 !important;
  opacity: 1 !important;
}
html.evx-v4-active .evx42-home .evx42-section:not(.alt) p,
html.evx-v4-active .evx42-home .evx42-section:not(.alt) .evx42-lead p {
  color: #555 !important;
  opacity: 1 !important;
}
html.evx-v4-active .evx42-home .evx42-section.alt { background: #171717 !important; color: #fff !important; }
html.evx-v4-active .evx42-home .evx42-section.alt h2,
html.evx-v4-active .evx42-home .evx42-section.alt .evx42-kicker { color: #fff !important; }
html.evx-v4-active .evx42-home .evx42-section.alt p { color: #e2e2e2 !important; }
html.evx-v4-active .evx42-home .evx42-pro { background: #f5f4f1 !important; color: #1a1a1a !important; }
html.evx-v4-active .evx42-home .evx42-pro .evx42-lead > div { width: 100%; max-width: 820px; }
html.evx-v4-active .evx42-home .evx42-pro .evx42-kicker,
html.evx-v4-active .evx42-home .evx42-pro h2 { color: #151515 !important; }
html.evx-v4-active .evx42-home .evx42-pro p { color: #4b4b4b !important; }
html.evx-v4-active .evx42-home .evx42-card { min-width: 0; }
html.evx-v4-active .evx42-home .evx42-card strong { color: #151515 !important; }
/* Transparent header/page typography: remove legacy bright-green title stripe. */
html.evx-v4-active .site-wrapper .page-title::after,
html.evx-v4-active .site-wrapper .module-title::after {
  background-color: #181818 !important;
  border-color: #181818 !important;
}
/* Cart screenshot: checkout was squeezed into a narrow right rail. Respect native anchors and JS. */
html.evx-v4-active #checkout-cart .cart-page { min-width: 0; }
html.evx-v4-active #checkout-cart .cart-bottom { min-width: 0; }
html.evx-v4-active #checkout-cart .cart-bottom .buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  padding: 14px 0 0 !important;
  clear: both;
}
html.evx-v4-active #checkout-cart .cart-bottom .buttons > .pull-left,
html.evx-v4-active #checkout-cart .cart-bottom .buttons > .pull-right {
  float: none !important;
  position: static !important;
  flex: 1 1 150px;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
}
html.evx-v4-active #checkout-cart .cart-bottom .buttons > div > a.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 47px;
  width: 100% !important;
  max-width: 100%;
  padding: 12px 16px !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  line-height: 1.25 !important;
  text-align: center;
  font-size: 13px;
}
html.evx-v4-active #checkout-cart .cart-bottom .buttons > div > a.btn span {
  white-space: normal !important;
  color: inherit !important;
}
html.evx-v4-active #checkout-cart .cart-bottom .buttons > .pull-left > a.btn {
  background: #fff !important;
  border: 1px solid #1c1c1c !important;
  color: #1c1c1c !important;
}
html.evx-v4-active #checkout-cart .cart-bottom .buttons > .pull-right > a.btn {
  background: #1c1c1c !important;
  border: 1px solid #1c1c1c !important;
  color: #fff !important;
}
/* Category cards need clean whitespace, not the cramped demo look. */
html.evx-v4-active #product-category .product-thumb .image img,
html.evx-v4-active #product-search .product-thumb .image img {
  max-width: 100%; object-fit: contain;
}
html.evx-v4-active :is(#product-category,#product-search) .product-thumb .caption {
  padding: 18px !important;
  text-align: left;
}
html.evx-v4-active .product-thumb .name a { overflow-wrap: break-word; }
@media (max-width: 1050px) {
  html.evx-v4-active .evx42-home .evx42-lead { display: block !important; }
  html.evx-v4-active .evx42-home .evx42-lead p { margin-top: 12px; }
}
@media (max-width: 650px) {
  html.evx-v4-active #checkout-cart .cart-bottom .buttons { flex-direction: column; }
  html.evx-v4-active #checkout-cart .cart-bottom .buttons > div { flex-basis: auto; width: 100% !important; }
  html.evx-v4-active .evx42-home .evx42-hero-inner { padding-block: 74px !important; }
}