:root {
	--display-font-family: Lora;
	--body-font-family: Lora;

	--font-size: 18px

	--logo-padding: 10px;
	--logo-height: 152px;

	--header-width: 100%;
	--header-border-position: top;
	--header-border-size: 0;
	--header-bg-color: 236 230 218;
	--header-border-color: 60 59 59;

	--brand-color: 1 153 1;
	--brand-color-inverted: 0 0 0;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 1 153 1;

	--action-color: 201 88 58;
	--action-color-inverted: 255 15 ;

	--announcement-bar-bg-color: 61 96 60;
	--announcement-bar-text-color: 0 0 0;
	--announcement-bar-link-color: 242 169 0;

	--main-navigation-bg-color: 236 230 218;
	--main-navigation-link-color: 61 96 60;
	--main-navigation-link-color-hover: 0 0 0;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 16px;
	--main-navigation-link-alignment: center;

	--auxiliary-bg-color: 255 255 255;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 61 96 60;

	--order-status-bg-color: 255 255 255;
	--order-status-color: 0 0 0;

	--store-menu-bg_color: 1 153 1;
	--store-menu-color: 255 255 255;

	--footer-bg-color: 244 234 215;
	--footer-color: 0 0 0;
	--footer-link-color: 0 128 0;
}

/*Custom Styles*/
/* ============================================================
   Tussock Sedge Farm header refinement
   Paste at the very bottom of the theme Custom CSS box.
   Nothing here changes the markup, the menu, or any link, so
   deleting it puts the old header back exactly as it was.
   ============================================================ */

/* ---------- announcement bar ---------- */
.announcement_bar {
  background-color: #3D603C !important;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}
.announcement_bar p {
  margin: 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.announcement_bar p b { font-weight: 500; }
.announcement_bar p + p::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #F2A900;
  margin-right: 16px;
  vertical-align: middle;
}
.announcement_bar a,
.announcement_bar a:visited,
.announcement_bar a:active,
.announcement_bar a:focus {
  color: #F2A900 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}
.announcement_bar a:hover {
  color: #FFD98A !important;
  text-decoration: none !important;
  border-bottom-color: rgba(255, 217, 138, 0.6);
}

/* ---------- sign in / create account strip ---------- */
.auxiliaryMenu--block,
.auxiliaryMenu__container {
  background-color: #ECE6DA !important;
  border-bottom: none !important;
  padding-top: 8px;
}
.auxiliaryMenu > li > a,
.auxiliaryMenu > li > a:visited {
  color: #3D603C !important;
  font-family: 'Lora', Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.auxiliaryMenu > li > a:hover,
.auxiliaryMenu > li > a:focus {
  color: #C9583A !important;
  text-decoration: none !important;
}
.auxiliaryMenu .btn.btn-action,
.auxiliaryMenu .btn.btn-action:visited,
.auxiliaryMenu .btn.btn-action:focus {
  background-color: transparent !important;
  border: 1px solid #C9583A !important;
  color: #C9583A !important;
  border-radius: 3px;
  padding: 7px 15px;
  font-family: 'Lora', Georgia, serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.auxiliaryMenu .btn.btn-action:hover {
  background-color: #C9583A !important;
  border-color: #C9583A !important;
  color: #FFFFFF !important;
}

/* ---------- header shell and logo ---------- */
.siteHeader {
  background-color: #ECE6DA !important;
  border-bottom: 1px solid rgba(61, 96, 60, 0.18) !important;
}
.siteHeader__container { padding-bottom: 4px; }
/* the logo file has a white background box baked in. multiply drops the white
   into the cream so the logo sits on the header instead of in a white card. */
.logo__img,
.logo__img--style3 { mix-blend-mode: multiply; }

/* ---------- main navigation ---------- */
.mainNavigation,
.mobileNav { background-color: #ECE6DA !important; }
.mainNavigation__list > li > a,
.mainNavigation__list > li > a:visited {
  color: #3D603C !important;
  background-color: transparent !important;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px !important;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 15px 19px 13px 19px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease-in-out, border-color 0.18s ease-in-out;
}
.mainNavigation__list > li > a:hover,
.mainNavigation__list > li > a:focus,
.mainNavigation__list > li.open > a {
  color: #C9583A !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom-color: #C9583A;
}
.mainNavigation__list > li > a .caret { margin-left: 5px; opacity: 0.65; }

/* ---------- dropdowns ---------- */
.mainNavigation .dropdown-menu {
  background-color: #FBF4E6 !important;
  border: 1px solid rgba(61, 96, 60, 0.16) !important;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(61, 96, 60, 0.14) !important;
  padding: 6px 0;
  margin-top: 2px;
}
.mainNavigation .dropdown-menu > li > a,
.mainNavigation .dropdown-menu > li > a:visited {
  color: #3D603C !important;
  background-color: transparent !important;
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 9px 20px;
}
.mainNavigation .dropdown-menu > li > a:hover,
.mainNavigation .dropdown-menu > li > a:focus {
  background-color: #F4EAD7 !important;
  color: #C9583A !important;
  text-decoration: none !important;
}

/* ---------- phone bar ---------- */
.mobileNav > li > a,
.mobileNav > li > a:visited {
  color: #3D603C !important;
  background-color: #ECE6DA !important;
  font-family: 'Lora', Georgia, serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.mobileNav > li > a:hover,
.mobileNav > li > a:focus {
  color: #C9583A !important;
  background-color: #ECE6DA !important;
}
.mobileNav > li + li { border-left: 1px solid rgba(61, 96, 60, 0.14); }

@media (max-width: 767px) {
  .announcement_bar {
    gap: 6px;
    padding: 10px 18px;
    flex-direction: column;
  }
  .announcement_bar p { font-size: 12.5px; letter-spacing: 0.07em; }
  .announcement_bar p + p::before { display: none; }
}