/* ==========================================================
   SOMBRA / MARTFURY — EBAY MOTORS HEADER + HOVER FIX
   FULL REPLACEMENT FILE
   Delete every previous Custom CSS rule and use only this file.

   This file:
   - does NOT override --primary-color;
   - restores a white eBay-style header;
   - fixes disappearing text/icons on hover;
   - fixes department menu, submenu, mega-menu and Share;
   - does not change page grids or content layouts.
   ========================================================== */

:root {
  --eb-blue: #3665f3;
  --eb-blue-hover: #2b4fd6;
  --eb-blue-soft: #eef3ff;
  --eb-ink: #191919;
  --eb-text: #333333;
  --eb-muted: #707070;
  --eb-white: #ffffff;
  --eb-line: #d9d9d9;
  --eb-line-soft: #ededed;

  /* Safe MartFury header variables only */
  --header-text-color: #191919 !important;
  --header-text-hover-color: #3665f3 !important;
  --header-background-color: #ffffff !important;
}

/* ==========================================================
   BASE TYPOGRAPHY
   ========================================================== */

body,
button,
input,
select,
textarea {
  font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
}

body {
  color: var(--eb-text) !important;
  background-color: #ffffff !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ==========================================================
   WHITE EBAY-STYLE HEADER
   ========================================================== */

.header,
.header.header--standard,
.header[class*="header--market-place"],
.header .header__content,
.header .header__top,
.navigation {
  background-color: var(--eb-white) !important;
  background-image: none !important;
}

.header {
  border: 0 !important;
  border-bottom: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
}

.header .header__top {
  min-height: 32px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--eb-line-soft) !important;
}

.header .header__top a,
.header .header__top p,
.header .header__top span,
.header .header__top li,
.header .header__top i {
  color: var(--eb-muted) !important;
}

.header .header__top a:hover,
.header .header__top a:focus {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

.header .header__content {
  border: 0 !important;
}

.header .ps-logo img,
.header--mobile .ps-logo img {
  image-rendering: auto;
}

/* Header icons and account */
.header .header__extra,
.header .header__extra > i,
.header .header__extra i,
.header .ps-block--user-header,
.header .ps-block--user-header i,
.header .ps-block--user-header a {
  color: var(--eb-ink) !important;
}

.header .header__extra:hover,
.header .header__extra:focus,
.header .header__extra:hover > i,
.header .header__extra:focus > i,
.header .header__extra:hover i,
.header .header__extra:focus i,
.header .ps-block--user-header a:hover,
.header .ps-block--user-header a:focus,
.header .ps-block--user-header a:hover i,
.header .ps-block--user-header a:focus i {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

.header .header__extra > span {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-white) !important;
}

/* ==========================================================
   SEARCH
   ========================================================== */

.header .ps-form--quick-search {
  background-color: var(--eb-white) !important;
  border: 2px solid var(--eb-ink) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.header .ps-form--quick-search input,
.header .ps-form--quick-search select,
.header .ps-form--quick-search .form-control {
  color: var(--eb-ink) !important;
  background-color: var(--eb-white) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.header .ps-form--quick-search input::placeholder {
  color: #8c8c8c !important;
}

.header .ps-form--quick-search button {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

.header .ps-form--quick-search button:hover,
.header .ps-form--quick-search button:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue-hover) !important;
  border-color: var(--eb-blue-hover) !important;
}

/* ==========================================================
   MAIN NAVIGATION
   ========================================================== */

.navigation {
  border: 0 !important;
  border-top: 1px solid var(--eb-line-soft) !important;
  border-bottom: 1px solid var(--eb-line) !important;
  box-shadow: none !important;
}

.navigation .menu > li {
  background-color: transparent !important;
}

.navigation .menu > li > a,
.navigation .menu > li > a span,
.navigation .menu > li > a i,
.navigation .menu > li > a::before,
.navigation .menu > li > a::after {
  color: var(--eb-ink) !important;
  background-color: transparent !important;
}

.navigation .menu > li:hover > a,
.navigation .menu > li:focus-within > a,
.navigation .menu > li.active > a,
.navigation .menu > li.current-menu-item > a,
.navigation .menu > li:hover > a span,
.navigation .menu > li:focus-within > a span,
.navigation .menu > li.active > a span,
.navigation .menu > li.current-menu-item > a span,
.navigation .menu > li:hover > a i,
.navigation .menu > li:focus-within > a i,
.navigation .menu > li.active > a i,
.navigation .menu > li.current-menu-item > a i,
.navigation .menu > li:hover > a::before,
.navigation .menu > li:hover > a::after,
.navigation .menu > li:focus-within > a::before,
.navigation .menu > li:focus-within > a::after {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

/* ==========================================================
   SHOP BY DEPARTMENT BUTTON
   ========================================================== */

.menu--product-categories .menu__toggle {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  background-image: none !important;
  border-color: var(--eb-blue) !important;
}

.menu--product-categories .menu__toggle span,
.menu--product-categories .menu__toggle i,
.menu--product-categories .menu__toggle::before,
.menu--product-categories .menu__toggle::after {
  color: var(--eb-white) !important;
  background-color: transparent !important;
}

.menu--product-categories .menu__toggle:hover,
.menu--product-categories .menu__toggle:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue-hover) !important;
  border-color: var(--eb-blue-hover) !important;
}

.menu--product-categories .menu__toggle:hover span,
.menu--product-categories .menu__toggle:focus span,
.menu--product-categories .menu__toggle:hover i,
.menu--product-categories .menu__toggle:focus i {
  color: var(--eb-white) !important;
}

/* ==========================================================
   DEPARTMENT CATEGORY LIST
   ========================================================== */

.menu--product-categories .menu__content,
.menu--product-categories .menu--dropdown {
  color: var(--eb-text) !important;
  background-color: var(--eb-white) !important;
  background-image: none !important;
  border-color: var(--eb-line) !important;
}

/* Default category state */
.menu--product-categories .menu--dropdown > li {
  color: var(--eb-text) !important;
  background-color: var(--eb-white) !important;
}

.menu--product-categories .menu--dropdown > li > a,
.menu--product-categories .menu--dropdown > li > a span,
.menu--product-categories .menu--dropdown > li > a i,
.menu--product-categories .menu--dropdown > li > a::before,
.menu--product-categories .menu--dropdown > li > a::after {
  color: var(--eb-text) !important;
  background-color: transparent !important;
}

/* Category hover — text can never become white */
.menu--product-categories .menu--dropdown > li:hover,
.menu--product-categories .menu--dropdown > li:focus-within,
.menu--product-categories .menu--dropdown > li.active,
.menu--product-categories .menu--dropdown > li.current-menu-item {
  color: var(--eb-blue) !important;
  background-color: var(--eb-blue-soft) !important;
}

.menu--product-categories .menu--dropdown > li:hover > a,
.menu--product-categories .menu--dropdown > li:focus-within > a,
.menu--product-categories .menu--dropdown > li.active > a,
.menu--product-categories .menu--dropdown > li.current-menu-item > a,
.menu--product-categories .menu--dropdown > li:hover > a span,
.menu--product-categories .menu--dropdown > li:focus-within > a span,
.menu--product-categories .menu--dropdown > li.active > a span,
.menu--product-categories .menu--dropdown > li.current-menu-item > a span,
.menu--product-categories .menu--dropdown > li:hover > a i,
.menu--product-categories .menu--dropdown > li:focus-within > a i,
.menu--product-categories .menu--dropdown > li.active > a i,
.menu--product-categories .menu--dropdown > li.current-menu-item > a i,
.menu--product-categories .menu--dropdown > li:hover > a::before,
.menu--product-categories .menu--dropdown > li:hover > a::after,
.menu--product-categories .menu--dropdown > li:focus-within > a::before,
.menu--product-categories .menu--dropdown > li:focus-within > a::after {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

/* Remove old yellow/white hover stripe */
.menu--product-categories .menu--dropdown > li::before,
.menu--product-categories .menu--dropdown > li::after,
.menu--product-categories .menu--dropdown > li:hover::before,
.menu--product-categories .menu--dropdown > li:hover::after {
  background-color: transparent !important;
}

/* ==========================================================
   SUBMENU AND MEGA MENU
   ========================================================== */

.navigation .sub-menu,
.navigation .mega-menu,
.menu--product-categories .sub-menu,
.menu--product-categories .mega-menu,
.ps-dropdown-menu {
  color: var(--eb-text) !important;
  background-color: var(--eb-white) !important;
  background-image: none !important;
  border-color: var(--eb-line) !important;
}

.navigation .sub-menu li,
.navigation .mega-menu li,
.menu--product-categories .sub-menu li,
.menu--product-categories .mega-menu li,
.ps-dropdown-menu li {
  background-color: var(--eb-white) !important;
}

.navigation .sub-menu a,
.navigation .sub-menu a span,
.navigation .sub-menu a i,
.navigation .mega-menu a,
.navigation .mega-menu a span,
.navigation .mega-menu a i,
.menu--product-categories .sub-menu a,
.menu--product-categories .sub-menu a span,
.menu--product-categories .sub-menu a i,
.menu--product-categories .mega-menu a,
.menu--product-categories .mega-menu a span,
.menu--product-categories .mega-menu a i,
.ps-dropdown-menu a,
.ps-dropdown-menu a span,
.ps-dropdown-menu a i {
  color: var(--eb-text) !important;
  background-color: transparent !important;
}

/* Nested hover */
.navigation .sub-menu li:hover,
.navigation .sub-menu li:focus-within,
.navigation .mega-menu li:hover,
.navigation .mega-menu li:focus-within,
.menu--product-categories .sub-menu li:hover,
.menu--product-categories .sub-menu li:focus-within,
.menu--product-categories .mega-menu li:hover,
.menu--product-categories .mega-menu li:focus-within,
.ps-dropdown-menu li:hover,
.ps-dropdown-menu li:focus-within {
  background-color: var(--eb-blue-soft) !important;
}

.navigation .sub-menu li:hover > a,
.navigation .sub-menu li:focus-within > a,
.navigation .mega-menu li:hover > a,
.navigation .mega-menu li:focus-within > a,
.menu--product-categories .sub-menu li:hover > a,
.menu--product-categories .sub-menu li:focus-within > a,
.menu--product-categories .mega-menu li:hover > a,
.menu--product-categories .mega-menu li:focus-within > a,
.ps-dropdown-menu li:hover > a,
.ps-dropdown-menu li:focus-within > a,
.navigation .sub-menu li:hover > a span,
.navigation .sub-menu li:hover > a i,
.navigation .mega-menu li:hover > a span,
.navigation .mega-menu li:hover > a i,
.menu--product-categories .sub-menu li:hover > a span,
.menu--product-categories .sub-menu li:hover > a i,
.menu--product-categories .mega-menu li:hover > a span,
.menu--product-categories .mega-menu li:hover > a i,
.ps-dropdown-menu li:hover > a span,
.ps-dropdown-menu li:hover > a i {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

/* Headings inside mega menu */
.navigation .mega-menu h4,
.navigation .mega-menu h5,
.navigation .mega-menu h6,
.menu--product-categories .mega-menu h4,
.menu--product-categories .mega-menu h5,
.menu--product-categories .mega-menu h6,
.mega-menu .mega-menu__column > a {
  color: var(--eb-ink) !important;
  background-color: transparent !important;
}

/* ==========================================================
   CURRENCY / LANGUAGE / GENERIC HEADER DROPDOWN
   ========================================================== */

.header .ps-dropdown > a,
.header .ps-dropdown > span,
.header .ps-dropdown > a i,
.header .ps-dropdown > span i {
  color: var(--eb-ink) !important;
}

.header .ps-dropdown:hover > a,
.header .ps-dropdown:focus-within > a,
.header .ps-dropdown:hover > span,
.header .ps-dropdown:focus-within > span,
.header .ps-dropdown:hover > a i,
.header .ps-dropdown:focus-within > a i {
  color: var(--eb-blue) !important;
}

.header .ps-dropdown-menu a:hover,
.header .ps-dropdown-menu a:focus {
  color: var(--eb-blue) !important;
  background-color: var(--eb-blue-soft) !important;
}

/* ==========================================================
   PRODUCT SHARE
   ========================================================== */

.ps-product--detail .ps-product__sharing,
.ps-product--detail .ps-product__share,
.ps-product--detail .ps-product__sharing > span,
.ps-product--detail .ps-product__share > span,
.ps-product--detail .ps-product__sharing p,
.ps-product--detail .ps-product__share p,
.ps-product--detail .ps-product__sharing strong,
.ps-product--detail .ps-product__share strong,
.ps-product--detail .ps-product__sharing figcaption,
.ps-product--detail .ps-product__share figcaption {
  color: var(--eb-ink) !important;
}

.ps-product--detail .ps-list--social li a,
.ps-product--detail .ps-product__sharing a,
.ps-product--detail .ps-product__share a {
  color: var(--eb-ink) !important;
  background-color: var(--eb-white) !important;
  border-color: var(--eb-line) !important;
}

.ps-product--detail .ps-list--social li a i,
.ps-product--detail .ps-product__sharing a i,
.ps-product--detail .ps-product__share a i {
  color: inherit !important;
}

.ps-product--detail .ps-list--social li a svg,
.ps-product--detail .ps-product__sharing a svg,
.ps-product--detail .ps-product__share a svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.ps-product--detail .ps-list--social li a:hover,
.ps-product--detail .ps-list--social li a:focus,
.ps-product--detail .ps-product__sharing a:hover,
.ps-product--detail .ps-product__sharing a:focus,
.ps-product--detail .ps-product__share a:hover,
.ps-product--detail .ps-product__share a:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

/* ==========================================================
   PRODUCT ACTION ICONS
   ========================================================== */

.ps-product .ps-product__actions a,
.ps-product .ps-product__actions button,
.ps-product--detail .ps-product__actions a {
  color: var(--eb-ink) !important;
  background-color: var(--eb-white) !important;
  border-color: var(--eb-line) !important;
}

.ps-product .ps-product__actions a:hover,
.ps-product .ps-product__actions a:focus,
.ps-product .ps-product__actions button:hover,
.ps-product .ps-product__actions button:focus,
.ps-product--detail .ps-product__actions a:hover,
.ps-product--detail .ps-product__actions a:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

.ps-product .ps-product__actions a:hover i,
.ps-product .ps-product__actions a:focus i,
.ps-product .ps-product__actions button:hover i,
.ps-product .ps-product__actions button:focus i,
.ps-product--detail .ps-product__actions a:hover i,
.ps-product--detail .ps-product__actions a:focus i {
  color: var(--eb-white) !important;
}

/* ==========================================================
   BUTTONS — WHITE TEXT MUST REMAIN VISIBLE
   ========================================================== */

.ps-btn:not(.ps-btn--black),
button.ps-btn:not(.ps-btn--black),
a.ps-btn:not(.ps-btn--black),
.btn-primary,
input[type="submit"] {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

.ps-btn:not(.ps-btn--black):hover,
.ps-btn:not(.ps-btn--black):focus,
button.ps-btn:not(.ps-btn--black):hover,
button.ps-btn:not(.ps-btn--black):focus,
a.ps-btn:not(.ps-btn--black):hover,
a.ps-btn:not(.ps-btn--black):focus,
.btn-primary:hover,
.btn-primary:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue-hover) !important;
  border-color: var(--eb-blue-hover) !important;
}

.ps-btn--black,
button.ps-btn--black,
a.ps-btn--black {
  color: var(--eb-white) !important;
  background-color: var(--eb-ink) !important;
  border-color: var(--eb-ink) !important;
}

/* ==========================================================
   MOBILE MENU
   ========================================================== */

.header--mobile,
.header--mobile .navigation--mobile,
.ps-panel--sidebar,
.ps-panel--sidebar .ps-panel__content,
.menu--mobile {
  background-color: var(--eb-white) !important;
}

.header--mobile .header__actions a,
.header--mobile .header__actions i,
.ps-panel--sidebar .ps-panel__header,
.ps-panel--sidebar .ps-panel__header a,
.ps-panel--sidebar .ps-panel__header i {
  color: var(--eb-ink) !important;
}

.menu--mobile li,
.menu--mobile li > a,
.menu--mobile li > a span,
.menu--mobile li > a i,
.menu--mobile li .sub-toggle,
.menu--mobile li .sub-toggle i {
  color: var(--eb-text) !important;
  background-color: var(--eb-white) !important;
}

.menu--mobile li:hover,
.menu--mobile li:focus-within,
.menu--mobile li.active,
.menu--mobile li.current-menu-item {
  background-color: var(--eb-blue-soft) !important;
}

.menu--mobile li:hover > a,
.menu--mobile li:focus-within > a,
.menu--mobile li.active > a,
.menu--mobile li.current-menu-item > a,
.menu--mobile li:hover > a span,
.menu--mobile li:focus-within > a span,
.menu--mobile li:hover > a i,
.menu--mobile li:focus-within > a i,
.menu--mobile li:hover .sub-toggle,
.menu--mobile li:focus-within .sub-toggle,
.menu--mobile li:hover .sub-toggle i,
.menu--mobile li:focus-within .sub-toggle i {
  color: var(--eb-blue) !important;
  background-color: transparent !important;
}

/* ==========================================================
   FORMS / PAGINATION / BACK TO TOP
   ========================================================== */

.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  color: var(--eb-ink) !important;
  background-color: var(--eb-white) !important;
  border-color: var(--eb-line) !important;
}

.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
  color: var(--eb-ink) !important;
  background-color: var(--eb-white) !important;
  border-color: var(--eb-blue) !important;
}

.pagination li > a,
.pagination li > span,
.page-item .page-link {
  color: var(--eb-text) !important;
  background-color: var(--eb-white) !important;
  border-color: var(--eb-line) !important;
}

.pagination li > a:hover,
.pagination li > a:focus,
.page-item .page-link:hover,
.page-item .page-link:focus {
  color: var(--eb-blue) !important;
  background-color: var(--eb-blue-soft) !important;
}

.pagination li.active > a,
.pagination li.active > span,
.page-item.active .page-link {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

#back2top {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue) !important;
  border-color: var(--eb-blue) !important;
}

#back2top:hover,
#back2top:focus {
  color: var(--eb-white) !important;
  background-color: var(--eb-blue-hover) !important;
  border-color: var(--eb-blue-hover) !important;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(54, 101, 243, 0.25) !important;
  outline-offset: 2px;
}