/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 25 2026 | 13:45:34 */
/* Urban Garden Seed — header refresh.
   Add as a separate frontend CSS snippet. */

/* Utility bar */
#header #top-bar {
  background: #294b36;
  min-height: 38px;
  padding: 5px 0;
}
#header #top-bar .nav > li > a,
#header #top-bar .header-phone {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1px;
}
#header #top-bar a:hover {
  color: #f0d99c;
}

/* Main header: retain Flatsome's heights and sticky positioning */
#header #masthead {
  background: #fff;
  border-bottom: 1px solid #e7ebdf;
}
#header .header-wrapper {
  box-shadow: 0 4px 16px rgba(33, 59, 37, 0.08);
}

/* Header search + the verified homepage search */
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) .searchform {
  color: #25382a;
  margin-bottom: 0;
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) .searchform > .flex-row {
  padding: 3px;
  border: 1px solid #dce4d5;
  border-radius: 999px;
  background: #f5f7f1;
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) .searchform > .flex-row:focus-within {
  border-color: #527b3f;
  box-shadow: 0 0 0 3px rgba(82, 123, 63, 0.16);
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) .flex-col {
  padding-right: 0;
  min-width: 0;
}
#header .header-search-form .flex-col:last-of-type {
  margin-left: 0;
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) input.search-field {
  height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) input.search-field::placeholder {
  color: #687361;
  opacity: 1;
}
:is(#header .header-search-form,
body.home #content > .searchform-wrapper:first-child) .ux-search-submit {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50% !important;
  background-color: #294b36 !important;
  color: #fff !important;
  font-size: 18px;
  line-height: 44px;
}

/* Account and cart */
#header #masthead .account-item > .header-button > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #294b36;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
#header #masthead .header-cart-link {
  min-height: 44px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f1f5eb;
  color: #294b36;
  line-height: 1.2;
}

/* Category navigation: keep existing wrapping and dropdown behavior */
#header #wide-nav {
  background: #f8f7f0;
  border-bottom: 1px solid #e3e8db;
}
#header #wide-nav .header-bottom-nav > li > a {
  min-height: 44px;
  padding: 10px 9px;
  border-radius: 8px;
  color: #33482d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}
#header #wide-nav .header-bottom-nav > li > a:hover,
#header #wide-nav .header-bottom-nav > li.current-menu-item > a {
  background: #e5edda;
  color: #244a2b;
}

/* Visible keyboard focus */
#header a:focus-visible,
#header button:focus-visible,
body.home #content > .searchform-wrapper:first-child button:focus-visible {
  outline: 2px solid #bb8f30;
  outline-offset: 3px;
}

/* Desktop: the header already provides search */
@media (min-width: 850px) {
  body.home #content > .searchform-wrapper:first-child {
    display: none;
  }
}

/* Give account/cart more room on smaller desktop screens */
@media (min-width: 850px) and (max-width: 1100px) {
  #header #logo {
    width: 240px;
    margin: 0 16px;
  }
}

/* Mobile/tablet: retain menu, cart, and homepage search */
@media (max-width: 849px) {
  #header #logo {
    width: clamp(150px, 52vw, 240px);
    margin: 0 10px;
  }
  #header #masthead .mobile-nav > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  #header #masthead .mobile-nav .header-cart-link {
    padding: 6px 8px;
  }
  body.home #content > .searchform-wrapper:first-child {
    padding: 10px 15px 14px;
    background: #fff;
  }
}
