/* ==========================================================================
   HerbaShape.ch — Header / footer / mega-menu green-palette tweaks
   Brand: Herbalife GREEN — matched to the herbashape.uk sister site.
   UK brand green #64CA43. surface #3C8330 (white-text AA) · mid #4EA338 · lime #8BC34A
   Loads LAST (cache-busted) so these rules win over theme + shop-tweaks.
   NO yellow, NO black chrome.
   ========================================================================== */

:root {
  --hs-green:      #4A9D3F;   /* footer accent panel + newsletter button (white text safe-ish) */
  /* Was the dark forest #2E6B27. Now a fresher, lighter green in the UK brand hue
     (~105-111deg) — chosen as the deepest shade of that hue that still keeps
     white body text at WCAG AA (white on #3C8330 ~= 4.7:1). Drives the header
     bar base + the vertical mega-menu panel, where 14px white text sits. */
  --hs-green-deep: #3C8330;
  /* Brighter, "fresh" UK green for the header gradient top-end + large chrome
     (white on #4EA338 ~= 3.1:1, AA-large only — used behind the big label only). */
  --hs-green-mid:  #4EA338;
  --hs-uk-green:   #64CA43;   /* literal herbashape.uk brand green (accents on light bg) */
  --hs-lime:       #8BC34A;   /* accent highlight text + square bullets */
}

/* ==========================================================================
   1. HEADER — dark "SHOP BY CATEGORIES" nav bar -> green
   ========================================================================== */
.elementor-2260 .elementor-element.elementor-element-be2d08f {
  background-color: var(--hs-green-deep) !important;
  background-image: linear-gradient(90deg, var(--hs-green-deep) 0%, var(--hs-green-mid) 100%) !important;
}

/* "SHOP BY CATEGORIES" strip label + hamburger stay light on green */
.vertical-navigation .vertical-navigation-header,
.vertical-navigation .vertical-navigation-title,
.vertical-navigation .vertical-navigation-header .supplero-icon-bars {
  color: #fff !important;
}

/* ==========================================================================
   1b. MEGA-MENU dropdown panel + flyouts — dark -> green, readable text
   ========================================================================== */
.elementor-2260 .elementor-element.elementor-element-88730c7 .vertical-navigation ul.menu,
.elementor-2260 .elementor-element.elementor-element-88730c7 .vertical-navigation ul.menu .sub-menu {
  background-color: var(--hs-green-deep) !important;
}

/* widen the main panel so category names read fully */
.elementor-2260 .elementor-element.elementor-element-88730c7 .vertical-navigation ul.menu {
  min-width: 300px !important;
}

.vertical-navigation .vertical-menu .menu li > a,
.vertical-navigation .vertical-menu .menu li > a .menu-title {
  color: #fff !important;
}

/* leave room for the right-hand chevron so long names don't collide */
.vertical-navigation .vertical-menu .menu > li > a {
  padding-right: 34px !important;
}

/* ==========================================================================
   3. MENUS — every yellow hover/active/current -> green (lime accent)
   ========================================================================== */
/* vertical (SHOP BY CATEGORIES) menu rows */
.vertical-navigation .vertical-menu .menu > li:hover > a,
.vertical-navigation .vertical-menu .menu > li:hover > a .menu-title,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a .menu-title,
.vertical-navigation ul.menu > li.current-menu-item > a,
.vertical-navigation ul.menu .sub-menu > li.current-menu-item > a {
  color: var(--hs-lime) !important;
}

/* the little leading arrow markers: yellow square -> lime square */
.vertical-navigation .vertical-menu .menu > li > a::before {
  background-color: var(--hs-lime) !important;
}

/* top nav (HOME / SHOP / ABOUT …) hover + active/current -> lime on the green bar */
.main-navigation ul.menu li.menu-item > a:hover,
.main-navigation ul.menu li.menu-item.current-menu-item > a,
.main-navigation ul.menu li.menu-item.current-menu-parent > a,
.main-navigation ul.menu li.menu-item.current-menu-ancestor > a,
.main-navigation ul.menu li.menu-item .sub-menu .menu-item:hover > a,
.main-navigation ul.menu li.menu-item .sub-menu .menu-item.current-menu-item > a,
ul.menu li.current-menu-item > a,
ul.menu li.current-menu-ancestor > a,
ul.menu li.current-menu-parent > a {
  color: var(--hs-lime) !important;
}
/* dropdown caret markers */
.main-navigation ul.menu li.menu-item > a:hover::after,
.main-navigation ul.menu li.menu-item .sub-menu .menu-item:hover > a::after {
  color: var(--hs-lime) !important;
}

/* Catch-all: kill any residual yellow BACKGROUND / underline on hovered or
   active menu rows (e.g. "Diet & Weight Management") — force green chrome. */
.vertical-navigation .vertical-menu .menu li:hover > a,
.vertical-navigation .vertical-menu .menu li.current-menu-item > a,
.vertical-navigation .vertical-menu .menu li.current-menu-parent > a,
.vertical-navigation .vertical-menu .menu li.current-menu-ancestor > a,
.main-navigation ul.menu li.menu-item:hover > a,
.main-navigation ul.menu li.menu-item.current-menu-item > a {
  background-color: transparent !important;
  border-color: var(--hs-green) !important;
  box-shadow: none !important;
  text-decoration-color: var(--hs-lime) !important;
}

/* ------------------------------------------------------------------
   Task 2 — kill the YELLOW FILLED BOX on the active/hovered top-level
   category (e.g. "Creatine"). The box is NOT a background-color on the
   <a>; it is the parent theme's <a> > span highlight-gradient
   (style.css: `background: linear-gradient(var(--primary)…)` with
   `background-size` growing 0 0 -> 100% 100% on :hover / .current-menu-item,
   where --primary is the demo yellow). The earlier catch-all set
   background-color:transparent on the <a>, so it never touched the span's
   background-image — that's why the yellow persisted. Here we zero the
   span's fill and highlight the TEXT in lime instead, matching the submenu
   links (accent-coloured text, no box). Targets the <a>, its direct span,
   and the .menu-title span; covers hover + all current-* states. --------- */
.vertical-navigation .vertical-menu .menu > li:hover > a span,
.vertical-navigation .vertical-menu .menu > li:hover > a .menu-title,
.vertical-navigation .vertical-menu .menu > li.current-menu-item > a span,
.vertical-navigation .vertical-menu .menu > li.current-menu-item > a .menu-title,
.vertical-navigation .vertical-menu .menu > li.current-menu-parent > a span,
.vertical-navigation .vertical-menu .menu > li.current-menu-parent > a .menu-title,
.vertical-navigation .vertical-menu .menu > li.current-menu-ancestor > a span,
.vertical-navigation .vertical-menu .menu > li.current-menu-ancestor > a .menu-title,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a span,
.vertical-navigation .vertical-menu .menu .sub-menu > li:hover > a .menu-title,
.vertical-navigation .vertical-menu .menu .sub-menu > li.current-menu-item > a span,
.vertical-navigation .vertical-menu .menu .sub-menu > li.current-menu-item > a .menu-title {
  background: none !important;
  background-image: none !important;
  background-size: 0 0 !important;
  color: var(--hs-lime) !important;
}
/* and the <a> element itself: no box, lime text (matches submenu link) */
.vertical-navigation .vertical-menu .menu > li:hover > a,
.vertical-navigation .vertical-menu .menu > li.current-menu-item > a,
.vertical-navigation .vertical-menu .menu > li.current-menu-parent > a,
.vertical-navigation .vertical-menu .menu > li.current-menu-ancestor > a {
  background: none !important;
  background-image: none !important;
  color: var(--hs-lime) !important;
}

/* ==========================================================================
   4. MEGA-MENU cleanup
   (a) remove the overlapping promo image column from the Creatine mega panel
   (b) let the category-links column use the full width
   (c) Creatine <li> was position:static -> its leading arrow landed offscreen;
       restore position:relative so the arrow anchors to the row (like the rest)
   ========================================================================== */
/* (a) hide Creatine mega promo column ("Truth In Every Bottle") + any mega image */
.vertical-navigation .elementor-element-92f0b70,
.vertical-navigation .vertical-menu .sub-menu .elementor-widget-image {
  display: none !important;
}
/* (b) category links take the whole panel */
.vertical-navigation .elementor-element-4fb375c7 {
  width: 100% !important;
}
/* (c) fix the missing/misplaced leading arrow on has-mega-menu items (Creatine) */
.vertical-navigation .vertical-menu .menu > li.has-mega-menu {
  position: relative !important;
}

/* (d) the Creatine mega panel is an embedded Elementor section with its own
   dark background — recolour it green with readable light text */
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 {
  background-color: var(--hs-green-deep) !important;
}
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 .elementor-heading-title {
  color: #fff !important;
}
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 a,
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 .elementor-widget-text-editor,
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 p {
  color: rgba(255, 255, 255, .82) !important;
}
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 a:hover {
  color: var(--hs-lime) !important;
}
.vertical-navigation .vertical-menu .sub-menu .elementor-element-39e89f12 .elementor-divider-separator {
  border-top-color: rgba(139, 195, 74, .4) !important;
}

/* ==========================================================================
   2. SEARCH BOX — placeholder text no longer overlaps the magnifier icon
   (icon is form::before at left:25px; give the field clear left padding)
   ========================================================================== */
.site-search .woocommerce-product-search .search-field {
  padding-left: 48px !important;
}

/* ==========================================================================
   5. TOP SELLING — neutralize the featured (first) card hover fill so it
   behaves like the other cards: white card, image-zoom only, no green wash
   over the title. (Overrides the green-tint gradient in shop-tweaks.css.)
   ========================================================================== */
.woocommerce-product-list.products-list-3 ul.products li.product-item:first-child .product-list-inner,
.woocommerce-product-list.products-list-3 ul.products li.product-item:first-child:hover .product-list-inner,
.woocommerce-product-list.products-list-3 ul.products li.product-item:first-child .product-list-inner:hover,
.woocommerce-product-list.products-list-3 ul.products li.product-item:first-child .product-list-inner > a:first-of-type,
.woocommerce-product-list.products-list-3 ul.products li.product-item:first-child:hover .product-list-inner > a:first-of-type {
  background: #fff !important;
  background-image: none !important;
}

/* ==========================================================================
   6. FOOTER — yellow "ASK OUR EXPERTS" + dark "SUBSCRIBE US" bar -> green
   ========================================================================== */
/* ASK OUR EXPERTS panel (was Elementor global "primary" yellow) -> brand green.
   Elementor paints the column background on the inner .elementor-widget-wrap. */
.elementor-element-33d371c,
.elementor-element-33d371c > .elementor-widget-wrap,
.elementor-element-33d371c > .elementor-element-populated {
  background-color: var(--hs-green) !important;
}
/* readable light content on the green panel */
.elementor-element-33d371c .elementor-icon-list-text,
.elementor-element-33d371c .elementor-icon-list-icon i,
.elementor-element-33d371c a,
.elementor-element-33d371c a:hover {
  color: #fff !important;
}
.elementor-element-33d371c .elementor-icon-list-icon svg { fill: #fff !important; }
/* item 8: make the whole ASK OUR EXPERTS area a clickable block link */
.elementor-element-33d371c .elementor-icon-list-item,
.elementor-element-33d371c .elementor-icon-list-item a {
  display: flex !important;
  width: 100%;
  align-items: center;
}

/* SUBSCRIBE US strip: dark #1C2127 -> deep green (kills the black bar) */
.elementor-element-555397c,
.elementor-element-555397c > .elementor-widget-wrap,
.elementor-element-555397c > .elementor-element-populated {
  background-color: var(--hs-green-deep) !important;
}

/* ==========================================================================
   7. FOOTER newsletter form (injected html widget) — email + green button
   ========================================================================== */
.hs-newsletter {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 460px;
  margin-top: 4px;
}
.hs-newsletter input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 13px 18px;
  font-size: 14px;
  color: #333;
  background: #fff;
  border-radius: 0;
}
.hs-newsletter input[type="email"]::placeholder { color: #8a8a8a; }
.hs-newsletter button {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  background: var(--hs-green);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 13px 26px;
  transition: background .2s ease;
}
.hs-newsletter button:hover { background: var(--hs-lime); color: #123d10; }