/* ============================================================
 * GW-HEADER  (GeeWiz single-flex header)
 * Parallel replacement for the AP Page Builder three-bar header.
 *
 * Everything is namespaced under .gw-header so it cannot leak
 * into the AP header (which stays available for rollback).
 * Only active when body has class .gw-header-on.
 *
 * Brand: GeeWiz green rgb(26 201 105) = #1ac969
 *   --gw-green      bright brand fill  (buttons, badges, bars)
 *   --gw-green-dark toned for small text/links on white (contrast)
 * ============================================================ */
.gw-header {
  --gw-green: #1ac969;
  --gw-green-dark: #12a453;
  --gw-ink: #1d1d1f;
  --gw-on-green: #053018;   /* very dark green text on bright green fills */
  --gw-muted: #6b7280;
  --gw-line: #e6e6e6;
  --gw-bg: #ffffff;
  --gw-utility-bg: #f5f6f8;
  --gw-radius: 10px;
  --gw-h-height: 76px;
  --gw-maxw: 1400px;
}

/* Hide the old AP header shell when the new header is active.
   header.tpl is not rendered in that case, but this is a belt-and-braces
   guard in case both are ever present during testing. */
body.gw-header-on .header-banner,
body.gw-header-on .header-nav,
body.gw-header-on .header-top {
  display: none !important;
}

.gw-header,
.gw-header *,
.gw-drawer,
.gw-drawer * { box-sizing: border-box; }

.gw-header a { text-decoration: none; }

/* ============================================================
 * TOP UTILITY BAR (trust badges + quote)
 * ============================================================ */
.gw-utility { background: var(--gw-utility-bg); border-bottom: 1px solid var(--gw-line); font-size: 12.5px; }
.gw-utility__inner {
  max-width: var(--gw-maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 28px;
}
.gw-trust { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.gw-trust li { display: flex; align-items: center; gap: 7px; color: var(--gw-muted); white-space: nowrap; }
.gw-trust i { color: var(--gw-green-dark); font-size: 14px; }
.gw-trust strong { color: var(--gw-ink); font-weight: 600; }

.gw-util-right { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.gw-util-right a { color: var(--gw-muted); display: inline-flex; align-items: center; gap: 6px; }
.gw-util-right a:hover { color: var(--gw-green-dark); }

/* ============================================================
 * MAIN BAR (logo · search · actions) — the single flex row
 * ============================================================ */
.gw-main { background: var(--gw-bg); border-bottom: 1px solid var(--gw-line); }
.gw-main__inner {
  max-width: var(--gw-maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
  padding: 14px 28px; min-height: var(--gw-h-height);
}

.gw-logo { flex: 0 0 auto; display: flex; align-items: center; }
.gw-logo img { height: 46px; width: auto; display: block; }

/* search fills the middle; targets the REAL ambjolisearch form markup
   (.search-widget form) as well as any bare form we render. */
.gw-search { flex: 1 1 auto; position: relative; }
.gw-search form,
.gw-search .search-widget form {
  display: flex; align-items: stretch;
  border: 2px solid var(--gw-green); border-radius: var(--gw-radius);
  overflow: hidden; background: #fff; height: 48px; margin: 0;
}
.gw-search input[type="text"],
.gw-search input[name="s"] {
  flex: 1; border: 0; outline: 0; padding: 0 16px;
  font-size: 15px; font-family: inherit; background: transparent;
}
.gw-search button[type="submit"] {
  border: 0; background: var(--gw-green); color: var(--gw-on-green);
  padding: 0 22px; cursor: pointer;
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
}
.gw-search button[type="submit"]:hover { background: var(--gw-green-dark); color: #fff; }
.gw-search button[type="submit"] i,
.gw-search button[type="submit"] .material-icons { font-size: 20px; line-height: 1; }
/* hide the vendor's mobile-only popup trigger inside the desktop bar */
.gw-search .popup-title { display: none; }

/* right-side action cluster */
.gw-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.gw-action {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 6px 12px; border-radius: 10px; color: var(--gw-ink);
  background: none; border: 0; cursor: pointer; font-family: inherit; min-width: 62px;
}
.gw-action:hover { background: var(--gw-utility-bg); }
/* icons: our fa-* plus Leo's icon-font glyphs (.shopping-cart, .ion-bag) */
.gw-action > i,
.gw-action .shopping-cart,
.gw-action .ion-bag,
.gw-action .td_cart_quote i,
.gw-action .blockcart .header i { font-size: 22px; line-height: 1; color: var(--gw-ink); }
.gw-action:hover > i,
.gw-action:hover .shopping-cart,
.gw-action:hover .ion-bag,
.gw-action:hover .td_cart_quote i { color: var(--gw-green-dark); }
.gw-action__label,
.gw-action .title-cart,
.gw-action .title-quote { font-size: 11px; color: var(--gw-muted); font-weight: 500; }
.gw-action .gw-badge,
.gw-action .cart-products-count,
.gw-action .ap-total-wishlist,
.gw-action .number_product_dbboo {
  position: absolute; top: 0; right: 8px;
  background: var(--gw-green); color: var(--gw-on-green);
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
  border-radius: 9px; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; line-height: 1;
}

/* hamburger — hidden on desktop */
.gw-burger {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 42px; border: 0; background: none; cursor: pointer; border-radius: 8px;
}
.gw-burger span { display: block; height: 2px; width: 22px; background: var(--gw-ink); margin: 0 auto; border-radius: 2px; transition: .2s; }

/* ============================================================
 * NAV BAR (mega menu row)
 * The leobootstrapmenu widget renders its own <nav>/<ul>; we style
 * the wrapper and keep vendor markup working inside .gw-nav.
 * ============================================================ */
.gw-nav { background: var(--gw-ink); }
.gw-nav__inner { max-width: var(--gw-maxw); margin: 0 auto; padding: 0 18px; }
.gw-nav .nav.navbar-nav { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; flex-wrap: wrap; }
.gw-nav .nav-item > .nav-link,
.gw-nav a.nav-link {
  display: block; color: #fff; padding: 13px 16px; font-size: 14px; font-weight: 500;
}
.gw-nav .nav-link:hover { background: var(--gw-green); color: var(--gw-on-green); }
.gw-nav .menu-title { color: inherit; }

/* ============================================================
 * ACCOUNT DROPDOWN
 * ============================================================ */
.gw-dd { position: relative; }
.gw-dd__panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--gw-line); border-radius: var(--gw-radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.12); min-width: 210px; padding: 6px; display: none; z-index: 50;
}
.gw-dd.open .gw-dd__panel { display: block; }
.gw-dd__panel a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 7px; color: var(--gw-ink); font-size: 14px; }
.gw-dd__panel a:hover { background: var(--gw-utility-bg); }
.gw-dd__panel .gw-dd__greet { font-size: 12px; color: var(--gw-muted); padding: 6px 12px 8px; border-bottom: 1px solid var(--gw-line); margin-bottom: 4px; }
.gw-dd__panel .gw-mini-badge { background: var(--gw-green); color: var(--gw-on-green); font-size: 11px; font-weight: 700; border-radius: 9px; padding: 1px 7px; }
.gw-dd__panel .gw-signout { color: var(--gw-green-dark); }

/* ============================================================
 * MOBILE  (<= 991px)
 * ============================================================ */
@media (max-width: 991px) {
  .gw-utility { display: none; }              /* trust badges move into drawer */
  .gw-nav { display: none; }                   /* mega menu moves into drawer */
  .gw-burger { display: flex; order: 1; }
  .gw-main__inner { gap: 10px; padding: 10px 12px; min-height: auto; flex-wrap: wrap; }
  .gw-logo { order: 2; flex: 1 1 auto; justify-content: center; }
  .gw-logo img { height: 32px; }
  .gw-actions { order: 3; gap: 0; }
  .gw-action { min-width: 44px; padding: 6px 6px; }
  .gw-action .gw-action__label { display: none; }   /* icon-only on mobile */
  .gw-search { order: 4; flex: 1 1 100%; max-width: none; margin-top: 4px; }
  .gw-search button[type="submit"] .gw-search__label { display: none; }
  .gw-action.gw-account { display: none; }           /* account lives in drawer */
}

/* ============================================================
 * MOBILE DRAWER
 * ============================================================ */
.gw-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: .2s; z-index: 1000;
}
.gw-drawer-backdrop.open { opacity: 1; visibility: visible; }
.gw-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 340px;
  background: #fff; transform: translateX(-100%); transition: transform .25s ease;
  z-index: 1001; display: flex; flex-direction: column;
}
.gw-drawer.open { transform: none; }
.gw-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--gw-line); background: var(--gw-green); }
.gw-drawer__head strong { font-size: 15px; color: var(--gw-on-green); }
.gw-drawer__close { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--gw-on-green); line-height: 1; }
.gw-drawer__body { overflow-y: auto; padding: 8px 0; -webkit-overflow-scrolling: touch; }
.gw-drawer__body a { display: flex; align-items: center; gap: 12px; padding: 13px 18px; color: var(--gw-ink); font-size: 15px; border-bottom: 1px solid #f2f2f2; }
.gw-drawer__body a i { width: 20px; text-align: center; color: var(--gw-green-dark); }
.gw-drawer__body a.is-accent { color: var(--gw-green-dark); font-weight: 700; }
.gw-drawer__section { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--gw-muted); padding: 14px 18px 6px; }
.gw-drawer__trust { padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--gw-muted); }
.gw-drawer__trust div { display: flex; align-items: center; gap: 9px; }
.gw-drawer__trust i { color: var(--gw-green-dark); }

/* lock body scroll when drawer open (class toggled by gw-header.js) */
body.gw-drawer-open { overflow: hidden; }

/* ============================================================
 * STICKY SHOW/HIDE ON SCROLL
 * Toggled by gw-header.js:
 *   .gw-stuck  -> header is fixed to the top (past the fold)
 *   .gw-hidden -> slid up out of view (added when scrolling down)
 *
 * Animation is a GPU-friendly transform so it stays 60fps under load.
 * A spacer keeps page content from jumping when the header goes fixed.
 * ============================================================ */
.gw-header.gw-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;              /* above content, below the mobile drawer (1000+) */
  transform: translateY(0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  will-change: transform;   /* hint compositor; cheap for a single element */
}
.gw-header.gw-stuck.gw-hidden {
  transform: translateY(-100%);
}
/* momentarily disable the slide transition when returning to the inline
   (non-stuck) position at the very top, so it doesn't animate/flicker */
.gw-header.gw-no-anim {
  transition: none !important;
}

/* The content jump when the header goes fixed is prevented by gw-header.js,
   which sets #page padding-top to the measured header height while stuck. */

/* Respect users who asked for less motion: no slide, just instant show/hide. */
@media (prefers-reduced-motion: reduce) {
  .gw-header.gw-stuck { transition: none; }
}

/* ============================================================
 * CHECKOUT slim header
 * ============================================================ */
.gw-header--checkout .gw-main__inner--checkout {
  justify-content: space-between;
}
.gw-header--checkout .gw-logo { flex: 0 0 auto; }
.gw-checkout-secure {
  display: flex; align-items: center; gap: 8px;
  color: var(--gw-green-dark); font-weight: 600; font-size: 14px;
}
.gw-checkout-secure i { font-size: 16px; }
.gw-checkout-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gw-ink); font-size: 14px;
}
.gw-checkout-back:hover { color: var(--gw-green-dark); }

/* ============================================================
 * CART widget (ps_shoppingcart) normalized into an action pill
 * The module renders #cart-block > .blockcart > .header > a (icon + Cart + count).
 * We flatten it to look like the other .gw-action items and hide its loader.
 * ============================================================ */
.gw-action.gw-cart { padding: 0; }
.gw-action.gw-cart #cart-block,
.gw-action.gw-cart .blockcart,
.gw-action.gw-cart .blockcart .header { display: block; }
.gw-action.gw-cart .blockcart .header > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 12px; min-width: 62px; color: var(--gw-ink); text-decoration: none;
}
.gw-action.gw-cart .blockcart .header > a:hover { color: var(--gw-green-dark); }
.gw-action.gw-cart .title-cart { font-size: 11px; color: var(--gw-muted); font-weight: 500; }
.gw-action.gw-cart .cssload-piano { display: none !important; }

/* ============================================================
 * ASK-FOR-A-QUOTE widget as an action pill (in the action cluster)
 * The module ships style17.css for internals; here we shape the trigger to
 * match the other action icons and anchor its dropdown under the pill.
 * ============================================================ */
.gw-action.gw-quote { padding: 0; overflow: visible; }
.gw-quote .ask_quote,
.gw-quote .td_ask_quote { margin: 0; }
.gw-quote .quotes {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 6px 12px; min-width: 62px; position: relative;
}
.gw-quote .td_cart_quote { color: var(--gw-ink); line-height: 1; font-size: 22px !important; }
.gw-quote:hover .td_cart_quote { color: var(--gw-green-dark); }
.gw-quote .td_cart_quote .ion-bag { font-size: 22px; }
/* label "Quote" is provided by the module output near the icon; keep small */
.gw-quote .number_product_dbboo {
  position: absolute; top: -2px; right: 6px;
  background: var(--gw-green); color: var(--gw-on-green);
  font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
/* dropdown of quoted items: anchor under the pill, right-aligned */
.gw-quote .block_quotes { position: static; }
.gw-quote .quotes_cart_block,
.gw-quote .td_quotes_cart_block {
  position: absolute; top: 100%; right: 0; z-index: 60;
  min-width: 320px; text-align: left;
  background: #fff; border: 1px solid var(--gw-line); border-radius: var(--gw-radius);
  box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 12px;
}
/* keep the quote dropdown above the stuck header layer */
.gw-header.gw-stuck .gw-quote .quotes_cart_block,
.gw-header.gw-stuck .gw-quote .td_quotes_cart_block { z-index: 950; }

/* neutralize the module's injected CDN <link>/<script> visual footprint:
   these render as text nodes in some browsers if not display:none'd */
.gw-quote script, .gw-quote link { display: none; }

/* ============================================================
 * MEGA MENU tweaks — hide the vendor mobile toggle button inside the
 * desktop nav bar (we have our own hamburger + drawer)
 * ============================================================ */
.gw-nav .navbar-header,
.gw-nav .navbar-toggler { display: none; }
.gw-nav .leo-top-menu { display: block !important; }

/* mega menu inside the mobile drawer: force vertical stacking */
.gw-drawer__menu .navbar-header,
.gw-drawer__menu .navbar-toggler { display: none; }
.gw-drawer__menu .nav.navbar-nav { display: block; }
.gw-drawer__menu .nav-link {
  display: block; padding: 13px 18px; color: var(--gw-ink);
  border-bottom: 1px solid #f2f2f2; font-size: 15px;
}
.gw-drawer__menu .leo-top-menu { display: block !important; }