/* =========================================================================
   Greenzone storefront — header refresh (added 2026-07-29)

   Layout reference: store.jiva.com — one calm utility row (brand left, search,
   account/cart right) sitting above a flat text category nav, lots of white
   space, no coloured bands. Nothing is copied: the palette (--gz-* / --herb-*),
   the Quicksand type and every piece of markup + behaviour stay Greenzone's.
   This sheet only RE-PLACES and RE-SKINS existing elements — no element is
   removed, no id/class hook the JS uses is renamed.

   Loaded LAST (after responsive-fixes.css) so it overrides demo.css / demo1.css
   without touching them. Desktop layout changes are inside a >=993px media
   query; the phone header keeps the behaviour tuned in responsive-fixes.css.
   ========================================================================= */

:root{
  /* Header geometry. --gz-header-h is re-measured at runtime (see the
     "sticky header height" script in header_vertical.jsp) and is what the page
     content uses to clear the fixed header — see responsive-fixes.css. */
  --gz-hdr-bar: 88px;      /* brand / search / icons row */
  --gz-hdr-nav: 50px;      /* category nav row          */
  --gz-header-h: 140px;    /* fallback = bar + nav       */
}

/* ---------- shell ------------------------------------------------------- */
.sticky_header{
  background:#fff !important;
  box-shadow:0 1px 0 var(--gz-line, #e9edf0), 0 6px 18px rgba(20,40,30,.05);
}
.main-header-fixed{ background:#fff; }
/* the generic "hairline under every header" rule from responsive-fixes.css
   would draw a second line right above the category nav */
.main-header-fixed header.site-header{ border-bottom:0; }

/* ---------- brand ------------------------------------------------------- */
.main_logo{ display:inline-block; line-height:0; }
.main_logo a{ display:inline-block; line-height:0; }
/* h-logo2-hd.png is the same lockup trimmed to the badge, so the mark now fills
   the box instead of floating inside ~30% transparent padding. Footprint is
   unchanged at 80px — only the ink inside it got bigger. */
.main-header-fixed .main_logo img{
  display:block;
  width:80px !important;
  height:80px !important;
  transition:transform .2s ease;
}
.main_logo a:hover img{ transform:scale(1.04); }

/* ---------- search ------------------------------------------------------ */
.searchpanel .searchpanel-inner{ position:relative; }
.searchpanel .form-control#searchBoxWeb,
.searchpanel #searchBoxWeb,
.mobile-device-search #searchBoxMobile{
  height:46px !important;
  line-height:46px !important;
  border-radius:999px !important;
  border:1px solid var(--gz-line, #e9edf0) !important;
  background:#f6f8f7 !important;
  padding:0 54px 0 22px !important;
  font-size:14px !important;
  color:var(--gz-ink, #1f2a30) !important;
  box-shadow:none !important;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.searchpanel #searchBoxWeb::placeholder,
.mobile-device-search #searchBoxMobile::placeholder{ color:#93a29a; }
.searchpanel #searchBoxWeb:focus,
.mobile-device-search #searchBoxMobile:focus{
  background:#fff !important;
  border-color:var(--gz-green, #1a9c53) !important;
  box-shadow:0 0 0 3px rgba(26,156,83,.14) !important;
}
/* round search button that sits inside the pill */
#header_vertical .searchpanel-inner .searchpanel___box,
.mobile-device-search .searchpanel___box{
  right:5px !important;
  top:50%;
  transform:translateY(-50%);
  padding:0 !important;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--gz-green, #1a9c53);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s;
}
#header_vertical .searchpanel-inner .searchpanel___box:hover,
.mobile-device-search .searchpanel___box:hover{ background:var(--gz-green-d, #158043); }
#header_vertical .searchpanel-inner .searchpanel___box .btn-search-icon,
.mobile-device-search .searchpanel___box .btn-search-icon{ width:18px; }
#header_vertical .searchpanel-inner .searchpanel___box img,
.mobile-device-search .searchpanel___box img{
  width:18px !important; height:18px; display:block;
  /* the source glyph is dark; invert it so it reads on the green button */
  filter:brightness(0) invert(1);
}
/* autocomplete panel follows the pill. It is always in the DOM and only filled
   on keystroke, so an empty one used to paint a stray 2px hairline under the
   search box — hide it until it actually has results. */
.header-search-drouodown{
  width:100% !important;
  border-radius:14px !important;
  border:1px solid var(--gz-line, #e9edf0) !important;
  box-shadow:0 12px 30px rgba(20,40,30,.12) !important;
  overflow:hidden;
}
.header-search-drouodown:empty{ display:none !important; }

/* ---------- right-hand utility icons ------------------------------------ */
.site-right-icon .menu-app,
.site-right-icon .menu-app-new{ float:none !important; text-align:right; }
.site-right-icon .menu-app > ul{ margin:0; padding:0; }
.site-right-icon .menu-toggle{ padding:5px 4px; }
.site-right-icon .header-cart-icon,
.site-right-icon .profileicon{ position:relative; display:inline-block; }
.site-right-icon .menu-app img.responsive-img{
  width:26px !important; height:26px; object-fit:contain;
  opacity:.82; transition:opacity .18s, transform .18s;
}
.site-right-icon .menu-toggle a:hover img.responsive-img{ opacity:1; transform:translateY(-1px); }
/* count chips */
.site-right-icon .cart__indicate,
.site-right-icon .heart__indicate{
  background:var(--gz-green, #1a9c53) !important;
  color:#fff !important;
  font-size:10px !important; font-weight:700;
  min-width:17px; height:17px; line-height:17px;
  border-radius:999px; text-align:center; padding:0 4px;
  box-shadow:0 0 0 2px #fff;
}

/* =========================================================================
   Desktop layout (>=993px): one flex row — brand · search · utilities.
   The markup keeps its Materialize columns; they are just un-floated so the
   three blocks centre on a common baseline instead of sitting on a table row.
   ========================================================================= */
@media only screen and (min-width: 993px){

  #header_vertical{ display:block !important; }
  #header_vertical > .row{
    display:flex !important;
    align-items:center;
    flex-wrap:nowrap;
    gap:30px;
    margin:0 !important;
    min-height:var(--gz-hdr-bar);
  }
  #header_vertical > .row > .col{
    float:none !important;
    padding:0 !important;
    margin:0 !important;
  }
  /* brand — natural width, flush left */
  #header_vertical > .row > .col.l2{
    flex:0 0 auto; width:auto !important; text-align:left !important;
  }
  /* demo.css nudges the logo down 12px for the old table layout; in a centred
     flex row that just pushes it off the vertical middle */
  #header_vertical .main_logo{ margin:0 !important; }
  /* search — takes the slack, capped so it never sprawls */
  #header_vertical > .row > .col.l7{
    flex:1 1 auto; width:auto !important; min-width:0;
    display:flex; justify-content:center;
  }
  #header_vertical .searchpanel{
    display:flex; align-items:center;
    width:100%; max-width:520px;
  }
  #header_vertical .searchpanel .dropdown{ width:0; }
  #header_vertical .searchpanel-inner{
    float:none !important; width:100% !important; padding-left:0 !important; padding-top:0 !important;
  }
  /* utilities — natural width, flush right */
  #header_vertical > .row > .col.l3{
    flex:0 0 auto; width:auto !important;
  }
  #header_vertical > .row > .col.l3 .right-side{ line-height:normal; }
  /* the mobile-only search row must never open a third flex column */
  #header_vertical > .row > .mobile-device-search{ display:none !important; }
}

/* =========================================================================
   Category nav row — flat text links on white, left-aligned under the brand,
   with the active/hover underline in Greenzone green. (The rules that build
   the links themselves live in the <style> block inside header_vertical.jsp,
   next to the markup they style; this block owns the strip around them.)
   ========================================================================= */
.menu-top{
  background:#fff !important;
  border-top:1px solid var(--gz-line, #e9edf0);
  padding:0 !important;
}
.menu-top > .container{ position:relative; }

/* =========================================================================
   Phone / tablet: keep the header compact now that the contact strip is gone.
   ========================================================================= */
@media only screen and (max-width: 992px){
  .main-header-fixed .main_logo img{ width:58px !important; height:58px !important; }
}
@media only screen and (max-width: 600px){
  .main-header-fixed .main_logo img,
  .main_logo img{ width:46px !important; height:46px !important; }
  .searchpanel #searchBoxWeb,
  .mobile-device-search #searchBoxMobile{ height:42px !important; line-height:42px !important; }
  #header_vertical .searchpanel-inner .searchpanel___box,
  .mobile-device-search .searchpanel___box{ width:34px; height:34px; }
}