/* Ensure `.hb.hb-deals` uses the shared deals icon everywhere */
.hb.hb-deals {
  width: 35px !important;
  height: 35px !important;
  background: url('/sale/assets/deals-icon.svg') no-repeat center/contain !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  margin-right: 5px !important;
}
/* Header menu font style customization */
.tx-sticky-sec nav ul li a,
.tx-sticky-sec .elementor-nav-menu a {
  font-weight: 500 !important;
  font-size: 16px !important;
}
@font-face {
  font-family: 'Poppins';
  src: url('Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Shared header overrides */
header.elementor-location-header {
  background-color: #96C11F !important;
  background-color: rgba(150, 193, 31, 0.88) !important;
}

/* Keep sticky header green when Elementor toggles sticky classes */
body.elementor-sticky--effects header.elementor-location-header,
header.elementor-location-header.elementor-sticky--effects,
header.elementor-location-header.elementor-sticky--active,
.tx-sticky-sec.elementor-sticky--effects,
.tx-sticky-sec.elementor-sticky--active,
.elementor-sticky--effects .tx-sticky-sec,
.elementor-sticky--active .tx-sticky-sec {
  background-color: #96C11F !important;
  background-color: rgba(150, 193, 31, 0.88) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}


.tx-sticky-sec {
  background: rgba(150, 193, 31, 0.88);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  height: 83px;
  min-height: 83px;
}
.tx-sticky-sec,
.tx-sticky-sec.elementor-sticky--effects,
.tx-sticky-sec.elementor-sticky--active {
  height: 83px !important;
  min-height: 83px !important;
}

.tx-sticky-sec .elementor-container,
.tx-sticky-sec .elementor-section,
.tx-sticky-sec .elementor-row {
  min-height: 83px;
}

/* Consistent logo image sizing across pages */
.tx-sticky-sec .elementor-widget-theme-site-logo img {
  height: 83px !important;
  width: auto !important;
  max-height: 83px !important;
  max-width: none !important;
}

/* Do not change header background on hover */
header.elementor-location-header:hover,
.tx-sticky-sec:hover,
body.elementor-sticky--effects header.elementor-location-header:hover,
header.elementor-location-header.elementor-sticky--effects:hover,
header.elementor-location-header.elementor-sticky--active:hover,
.tx-sticky-sec.elementor-sticky--effects:hover,
.tx-sticky-sec.elementor-sticky--active:hover,
.elementor-sticky--effects .tx-sticky-sec:hover,
.elementor-sticky--active .tx-sticky-sec:hover {
  background-color: rgba(150, 193, 31, 0.88) !important;
}

/* Base nav item styling */
.tx-sticky-sec .elementor-nav-menu--main .elementor-item,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item {
  position: relative;
  color: #ffffff !important;
  font-weight: 500;
  transition: color 0.15s ease, background-color 0.15s ease, text-decoration-color 0.15s ease;
  overflow: visible;
  z-index: 1;
  font-size: 16px;
}

/* Hide Elementor pointer lines on all items; we'll draw our own arrow for active */
.tx-sticky-sec .elementor-nav-menu--main .elementor-item::before,
.tx-sticky-sec .elementor-nav-menu--main .elementor-item::after,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item::before,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item::after {
  display: none !important;
}

/* Pill background on active item */
.tx-sticky-sec .elementor-nav-menu--main .elementor-item::before,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item::before {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  top: -6px;
  bottom: -6px;
  border-radius: 8px;
  background: #ffffff;
  visibility: hidden;
  z-index: -1;
}

.tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: #000000 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 12px 44px 12px 30px;
  background: #ffffff;
  border-radius: 8px;
  /* Create a pentagon-like shape with a pointed right edge */
  clip-path: polygon(0 0, 65% 0, 80% 50%, 65% 100%, 0 100%);
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-decoration-color: transparent !important;
  min-width: 140px;
}

/* Prefer rounded-vertex pentagon when path() is supported */
@supports (clip-path: path('M0,0 L1,1')) {
  .tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active,
  .tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
    -webkit-clip-path: path('M 0% 15% A 15% 15% 0 0 1 15% 0% L 88% 0% A 15% 15% 0 0 1 95% 6% L 100% 50% L 95% 94% A 15% 15% 0 0 1 88% 100% L 15% 100% A 15% 15% 0 0 1 0% 85% Z');
            clip-path: path('M 0% 15% A 15% 15% 0 0 1 15% 0% L 88% 0% A 15% 15% 0 0 1 95% 6% L 100% 50% L 95% 94% A 15% 15% 0 0 1 88% 100% L 15% 100% A 15% 15% 0 0 1 0% 85% Z');
  }
}

/* Fallback: soften right tip when path() is unavailable */
@supports not (clip-path: path('M0,0 L1,1')) {
  .tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
  .tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    display: block !important;
  }
}

.tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active::before,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::before {
  visibility: visible;
}

/* Right arrow notch on active pill */
.tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::after {
  content: none !important;
}

/* Remove hover/focus underlines */
.tx-sticky-sec .elementor-nav-menu--main .elementor-item:hover,
.tx-sticky-sec .elementor-nav-menu--main .elementor-item:focus,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item:hover,
.tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item:focus {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
}

/* Burger icon fill */
.tx-sticky-sec .elementor-menu-toggle svg {
  fill: #ffffff;
}

/* Strong override: force active nav items to black across pages */
html body .tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active,
html body .tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
html body .elementor-widget-nav-menu .elementor-nav-menu--main a.elementor-item.elementor-item-active,
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
html body .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
  color: #000000 !important;
}

/* Insert deals icon to the left of the Deals menu link using mask so we can recolor it to black */
html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale"],
html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale/index.html"],
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale"],
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale/index.html"],
html body .tx-sticky-sec .elementor-nav-menu--dropdown a[href*="sale"],
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown a[href*="sale"] {
  position: relative;
  padding-left: 30px;
}

html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale"]::before,
html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale/index.html"]::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale"]::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale/index.html"]::before,
html body .tx-sticky-sec .elementor-nav-menu--dropdown a[href*="sale"]::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown a[href*="sale"]::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-color: #000000; /* icon color */
  -webkit-mask: url('sale/assets/deals-icon.svg') no-repeat center / contain;
  mask: url('sale/assets/deals-icon.svg') no-repeat center / contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

/* Keep the icon black when the item is active (important to override other rules) */
html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale"].elementor-item-active::before,
html body .tx-sticky-sec .elementor-nav-menu--main a[href*="sale/index.html"].elementor-item-active::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale"].elementor-item-active::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--main a[href*="sale/index.html"].elementor-item-active::before,
html body .tx-sticky-sec .elementor-nav-menu--dropdown a[href*="sale"].elementor-item-active::before,
html body .elementor-widget-nav-menu .elementor-nav-menu--dropdown a[href*="sale"].elementor-item-active::before {
  background-color: #000000 !important;
  -webkit-mask: url('sale/assets/deals-icon.svg') no-repeat center / contain !important;
  mask: url('sale/assets/deals-icon.svg') no-repeat center / contain !important;
}

/* Also neutralize any pseudo-element color/background that may force green */
html body .tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active::before,
html body .tx-sticky-sec .elementor-nav-menu--main .elementor-item.elementor-item-active::after,
html body .tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::before,
html body .tx-sticky-sec .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::after {
  background: transparent !important;
  color: inherit !important;
}