: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 and announcement bar
   REPLACES the earlier "header refinement" block. Paste this at
   the bottom of the theme Custom CSS box instead of it. Do not
   keep both, the old one styles a bar layout that no longer exists.
   Deleting this whole block puts the original header back.
   ============================================================ */

/* ---------- announcement bar shell ---------- */
.announcement_bar {
  background-color: #3D603C !important;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  text-align: center;
}

/* ---------- the bar: countdown, then their announcements taking turns ----------
   Every link in the bar is styled by name below, so the old blanket
   .announcement_bar a and .announcement_bar p rules are gone. */
.tsfB {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- the turkey block ---------- */
.tsfB__turkey {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.tsfB__turkey,
.tsfB__turkey:link,
.tsfB__turkey:visited,
.tsfB__turkey:active,
.tsfB__turkey:focus,
.tsfB__turkey:hover {
  color: #F4EAD7 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.tsfB__lead { color: #F4EAD7; font-weight: 500; white-space: nowrap; }
.tsfB__lead--short { display: none; }

.tsfB__clock {
  display: inline-flex;
  align-items: baseline;
  gap: 13px;
  padding: 5px 15px 4px 15px;
  border: 1px solid rgba(242, 169, 0, 0.45);
  border-radius: 999px;
  white-space: nowrap;
}
.tsfB__cell { display: inline-flex; align-items: baseline; gap: 5px; }
.tsfB__num {
  color: #F2A900;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: right;
}
.tsfB__unit { color: rgba(244, 234, 215, 0.78); font-size: 11px; letter-spacing: 0.14em; }
.tsfB__abbr { display: none; }

.tsfB__cta {
  color: #F2A900;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid rgba(242, 169, 0, 0.5);
  padding-bottom: 1px;
}
.tsfB__turkey:hover .tsfB__cta { color: #FFD98A; border-bottom-color: rgba(255, 217, 138, 0.8); }

/* ---------- the divider ---------- */
.tsfB__dot {
  display: block;
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: rgba(242, 169, 0, 0.75);
}

/* ---------- their announcements, cycling in one slot ---------- */
/* With no JS the bar stays a plain row and shows the first announcement,
   which is what it does today. Everything below is gated on .tsfB--js. */
.tsfB__rot { display: grid; }
.tsfB__slide { grid-area: 1 / 1; white-space: nowrap; }
.tsfB__rot .tsfB__slide + .tsfB__slide { display: none; }
.tsfB--js .tsfB__rot .tsfB__slide + .tsfB__slide { display: block; }
.tsfB--js .tsfB__slide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.tsfB--js .tsfB__slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}
.tsfB__slide,
.tsfB__slide:link,
.tsfB__slide:visited,
.tsfB__slide:active,
.tsfB__slide:focus {
  color: #F2A900 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px;
}
.tsfB__slide:hover {
  color: #FFD98A !important;
  border-bottom-color: rgba(255, 217, 138, 0.6) !important;
}

/* ---------- 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); }

/* ---------- tablet ---------- */
@media (max-width: 991px) {
  .tsfB { gap: 14px; font-size: 12.5px; letter-spacing: 0.09em; }
  .tsfB__turkey { gap: 10px; }
  .tsfB__clock { gap: 10px; padding: 4px 12px 3px 12px; }
  .tsfB__cta { display: none; }
}

/* ---------- phones: one item at a time, everything takes a turn ---------- */
@media (max-width: 767px) {
  .announcement_bar { padding: 9px 14px; }
  .tsfB {
    font-size: 11.5px;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tsfB--js {
    display: grid;
    gap: 0;
    justify-items: center;
    align-items: center;
    /* held at the height of the tallest announcement so the page never jumps
       as the bar cycles */
    min-height: 31px;
  }
  .tsfB--js .tsfB__turkey,
  .tsfB--js .tsfB__rot {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
  }
  .tsfB--js .tsfB__turkey.is-on,
  .tsfB--js .tsfB__rot.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
  }
  .tsfB__turkey { gap: 9px; }
  .tsfB__dot { display: none; }
  .tsfB__lead--long { display: none; }
  .tsfB__lead--short { display: inline; }
  .tsfB__clock { gap: 9px; padding: 4px 11px 3px 11px; }
  .tsfB__cell { gap: 3px; }
  .tsfB__num { font-size: 13px; }
  .tsfB__unit { display: none; }
  .tsfB__abbr { display: inline; color: rgba(244, 234, 215, 0.78); font-size: 11px; }
  .tsfB__cell--sec { display: none; }
  .tsfB__slide { white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .tsfB { font-size: 10.5px; letter-spacing: 0.05em; }
  .tsfB__turkey { gap: 7px; }
  .tsfB__clock { gap: 7px; padding: 4px 9px 3px 9px; }
  .tsfB__num { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tsfB__slide,
  .tsfB__turkey,
  .tsfB__rot { transition: none !important; transform: none !important; }
  .tsfB--js .tsfB__slide,
  .tsfB--js .tsfB__turkey,
  .tsfB--js .tsfB__rot { transition: none !important; transform: none !important; }
}