:root {
	--brand_color: #7a1e24;
	--brand_color_inverted: #f7f3e9;
	--background_color: #FFF;
	--text_color: #3d3d3d;
	--link_color: var(--brand_color);
}

body {
	background-color: var(--background_color);
	color: var(--text_color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, legend {
	font-family: Open Sans;
}

body, p, label, .paragraph {
	font-family: Open Sans;
	font-size: 16px;
}

a {
	color: var(--link_color);
}

a:hover {
	text-decoration: underline;
}

.brand {
	background-color: #7a1e24;
	color: #f7f3e9;
	border-color: #7a1e24;
}

.text-brand {
	color: #7a1e24;
}

.text-action {
	color: #7a1e24;
}

.brand-inverted {
	background-color: #f7f3e9;
	color: #7a1e24;
	border-color: #f7f3e9;
}

.action {
	background-color: #7a1e24;
	color: #f7f3e9;
	border-color: #7a1e24;
}

.action-inverted {
	background-color: #f7f3e9;
	color: #7a1e24;
	border-color: #f7f3e9;
}

/* SiteHeader */

.announcement_bar {
	background-color: #7a1e24;
	color: #f7f3e9;
}

.announcement_bar a {
	color: #3d3d3d;
}

.siteHeader {
	background-color: #23201c;
	color: #23201c;
	border-bottom-style: solid;
	border-bottom-width: 0;
	border-bottom-color: #3a352e;
}

.siteHeader__container {
	max-width: 100%;
}

/* MainNavigation */

.mainNavigation, .mobileNav {
	background-color: #ede6d6;
}

.mainNavigation__list {
	text-align: center !important;
}

.siteHeader__container--style4 {
	text-align: center;
}

.mainNavigation__list > li > a {
	font-size: 16px;
}

/*Mobile Nav*/
.mobileNav > li > a {
	color: #23201c;
	background-color: #2C5170;
}

.mobileNav > li > a:hover {
	background-color: #042948;
}

.mobileNav > li > a:focus {
	background-color: #042948;
}

/* Underline Link Effect */
	.mainNavigation__list > li > a {
		color: #23201c;
		background-color: transparent;
		border-bottom: solid 2px transparent;
	}
	.mainNavigation__list > li > a:hover {
		color: #23201c;
		background-color: transparent;
		border-bottom: solid 2px #23201c;
	}

	.mobileNav > li > a {
		color: #23201c;
		background-color: transparent;
		border-bottom: solid 2px transparent;
	}

	.mobileNav > li > a:hover {
		color: #23201c;
		background-color: transparent;
		border-bottom: solid 2px #23201c;
	}

	.mobileNav > li > a:focus {
		color: #23201c;
		background-color: transparent;
		border-bottom: solid 2px #23201c;
	}



/* Auxiliary Navigation (Use this for the account menu, sign up cta, cart, etc,) */

.auxiliaryMenu--block, .auxiliaryMenu__container {
	background-color: transparent;
		border-bottom: none;
	}

.auxiliaryMenu {
	max-width: 100%;
}

	.auxiliaryMenu > li > a {
		color: #d8d2c4;
	}
	.auxiliaryMenu > li > a:hover, .auxiliaryMenu > li > a:focus {
		text-decoration: underline;
	}

.order__delivery_threshold_difference, .order__delivery_threshold_difference-met {
    background-color: #b8862b;
    color: #23201c;
}

/* OrderStatus */
.orderStatusBar {
	background-color: #b8862b;
}

.orderStatus__container {
	color: #23201c;
}

.orderStatus__container a {
	border-bottom-color: #eab85d;
	color: #23201c;
}

.orderStatus__container a:hover {
	border-bottom-color: #23201c;
}

.orderStatus__mobileToggle {
	color: #23201c;
}

.orderStatus__mobileToggle a {
	border-bottom-color: #eab85d;
	color: #23201c;
}

.orderStatus__mobileToggle a:hover {
	border-bottom-color: #23201c;
}

/* Logo */

.logo {
	color: #23201c;
	font-size: 16px;
	padding: 25px;
}

.logo__img {
	max-height: 250px;
}

@media (max-width: 414px) {.logo {padding: 15px;}.logo__img {max-height: 75px;}}

.siteFooter {
	background-color: #202020;
	color: #ffffff;
}

.siteFooter .tw-prose {
	--tw-prose-headings: #ffffff;
	--tw-prose-body: #ffffff;
	--tw-prose-p: #ffffff;
	--tw-prose-a: #FFF;
	--tw-prose-bullets: #ffffff;
}

.siteFooter h1, .siteFooter h2, .siteFooter h3, .siteFooter h4, .siteFooter h5, .siteFooter h6 {
	color: #ffffff;
}

.siteFooter a {
	--tw-prose-a: #FFF;
	color: #FFF;
}

.siteFooter a:hover, .siteFooter a:focus {
	color: #ebebeb;
}

.siteFooter img {
	margin-left: auto;
	margin-right: auto;
}

.backToTopLink__container {
	background-color: #343434;
}

.backToTopLink__container a {
	color: #FFF;
}

/* Buttons */
.btn-brand, .btn-default, .btn-primary {
	background-color: #7a1e24 !important;
	border-color: #660a10 !important;
	color: #f7f3e9 !important;
}

.btn-brand-inverted {
	background-color: #f7f3e9;
	color: #7a1e24;
	border: solid 1px #7a1e24;
}

.btn-brand-inverted:hover {
	background-color: #7a1e24;
	color: #f7f3e9;
	border: solid 1px #7a1e24;
}



.btn-brand:hover, .btn-default:hover, .btn-primary:hover {
		background-color: #a2464c !important;
	border-color: #a2464c !important;
		color: #f7f3e9 !important;
}

.btn-danger, .btn-action, .cta {
	background-color: #7a1e24 !important;
	border-color: #660a10 !important;
	color: #f7f3e9 !important;
}
.btn-danger:hover, .btn-action:hover, .cta:hover {
		background-color: #a2464c !important;
	border-color: #a2464c !important;
	
	color: #f7f3e9 !important;
}

.btn-action-inverted {
	background-color: #f7f3e9;
	color: #7a1e24;
	border: solid 1px #7a1e24;
}

.btn-action-inverted:hover {
	background-color: #7a1e24;
	color: #f7f3e9;
	border: solid 1px #7a1e24;
}

.bullet, .confirmation__step-number {
	background-color: #7a1e24;
	color: #f7f3e9;
}

/* Store Menu */
.storeIndex__sideBarList--style2 {
	background-color: #f8f8f8 !important;
	border-color: #f8f8f8 !important;
	color: #777;
}

.storeSearch__input--style2 {
	border-color: #f8f8f8 !important;
}

.storeIndex__sideBarList--style2 > li > a {
	color: #777;
	border-color: #eeeeee !important;
}

.storeIndex__sideBarList--style2 > li > a:hover {
	color: #777;
	background-color: #eeeeee !important;
}

.storeSearch__button--style2 {
	color: #777;
}

.banner__protocols li:before {
    color: #7a1e24
}

/*Custom Styles*/
/* ==========================================================================
   READFIELD MEATS & DELI — custom theme CSS
   Paste into: My Site → Theme → Custom CSS → "Save CSS" → then "Save"

   Every selector was read off readfieldmeats.com and tested there live.
   Colors are set once in :root — change them there, not below.

   FONTS: loaded with @font-face, not @import. @import only works when it
   is the first rule in a stylesheet, and we cannot control where GrazeCart
   puts this file. @font-face works anywhere. Both fonts were verified
   loading from these exact URLs on your live site.

   BUTTONS are not in this file on purpose. The Theme Editor writes its
   button colors with !important, so no custom rule can beat them. Your
   Brand color and Action color fields are already #7A1E24, which matches
   this file. Leave them alone.
   ========================================================================== */

/* --- Fonts --------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxKsv4RnUPU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxC9TeP2Xz5c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/fraunces/v38/6NU78FyLNQOQZAnv9bYEvDiIdE9Ea92uemAk_WBq8U_9v0c2Wa0KxCFTeP2Xz5fU8w.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Palette ------------------------------------------------------------- */
:root {
  --rf-brand:      #7A1E24;  /* oxblood — main brand color */
  --rf-brand-dark: #660A10;  /* hover / pressed (matches the theme's own) */
  --rf-accent:     #A82418;  /* brighter red — sale prices only */
  --rf-ink:        #23201C;  /* header, footer, body text */
  --rf-paper:      #EDE6D6;  /* page background */
  --rf-case:       #F7F3E9;  /* cards and panels */
  --rf-rule:       #D5CBB4;  /* hairlines */
  --rf-dim:        #6B6255;  /* secondary text */
  --rf-serif:      'Fraunces', Georgia, 'Times New Roman', serif;
  --rf-sans:       'Archivo', 'Open Sans', system-ui, sans-serif;
}

/* --- 1. Page canvas and body type ---------------------------------------- */
body {
  background-color: var(--rf-paper);
  color: var(--rf-ink);
  font-family: var(--rf-sans);
}

/* --- 2. Header wordmark --------------------------------------------------
   Was oxblood on near-black: about 1.6:1 contrast. The one fix worth
   making even if you use nothing else in this file.                        */
.logo__text,
.logo__text--style3 {
  color: var(--rf-paper);
  font-family: var(--rf-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.logo__text:hover,
.logo__text--style3:hover { color: #FFFFFF; }

/* --- 3. Headings --------------------------------------------------------- */
.collectionBanner__heading,
.newsletterWidget__header,
.mm-title {
  font-family: var(--rf-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.collectionBanner__subheading { line-height: 1.6; }

/* --- 4. Main navigation -------------------------------------------------- */
.mainNavigation { border-bottom: 1px solid var(--rf-rule); }
.mainNavigation__list .menu-item > a { font-size: 15px; }
.mainNavigation__list .menu-item > a:hover { color: var(--rf-brand); }

/* --- 5. Sign-in strip ----------------------------------------------------
   The theme's order status bar. In brass it read as an alert for what is
   really a utility line.                                                    */
.orderStatusBar {
  background-color: var(--rf-case) !important;
  color: var(--rf-ink) !important;
  border-top: 1px solid var(--rf-rule);
  border-bottom: 1px solid var(--rf-rule);
  font-size: 14px;
}
.orderStatus,
.orderStatus__container {
  background-color: transparent !important;
  color: var(--rf-ink) !important;
}
.orderStatusBar a { color: var(--rf-brand) !important; text-decoration: underline; }

/* --- 6. Product cards ----------------------------------------------------
   Products sat on the page background with nothing holding them, which is
   what made the store area read as empty white space.
   Covers both list view and grid view, so switching the Theme Editor's
   product layout will not break this.                                      */
.productListing__productContainer--list,
.productContainer__retail--list,
.productListing__productContainer--grid,
.productContainer__retail--grid {
  background-color: var(--rf-case);
  border: 1px solid var(--rf-rule);
  border-radius: 3px;
  padding: 16px;
}
.productListing--list h3,
.productListing--grid h3 {
  font-family: var(--rf-serif);
  font-weight: 600;
  color: var(--rf-ink);
  letter-spacing: -0.01em;
}
.productListing--list h3:hover,
.productListing--grid h3:hover { color: var(--rf-brand); }
.productListing--list p,
.productListing--grid p { color: var(--rf-dim); }

/* --- 7. Price ------------------------------------------------------------ */
.productListing__price--grid,
.productListing__price--list {
  font-size: 19px;
  font-weight: 600;
  color: var(--rf-ink);
}
.productListing__price_unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--rf-dim);
}
.productListing__averageWeight { color: var(--rf-dim); }
.productListing__salePrice     { color: var(--rf-accent); }

/* --- 8. Add to cart ------------------------------------------------------
   The theme ships this as an outline button. Solid reads better as the
   primary action on a product row.                                         */
.productListing__addToCartButton--grid,
.productListing__addToCartButton--list {
  background-color: var(--rf-brand);
  border-color: var(--rf-brand-dark);
  color: var(--rf-case);
  border-radius: 3px;
}
.productListing__addToCartButton--grid:hover,
.productListing__addToCartButton--grid:focus,
.productListing__addToCartButton--list:hover,
.productListing__addToCartButton--list:focus {
  background-color: var(--rf-brand-dark);
  border-color: var(--rf-brand-dark);
  color: #FFFFFF;
}

/* --- 9. Store sidebar ----------------------------------------------------
   All 18 category links were brand-red, competing with every button.      */
.storeIndex__sideBarList         { border-color: var(--rf-rule); }
.storeIndex__sideBarList a       { color: #3D372F; }
.storeIndex__sideBarList a:hover { color: var(--rf-brand); }
.storeSearch__input {
  background-color: var(--rf-case);
  border-color: var(--rf-rule);
  color: var(--rf-ink);
}
.storeSearch__input:focus {
  border-color: var(--rf-brand);
  box-shadow: none;
}

/* --- 10. Footer ----------------------------------------------------------
   Was #202020, a near-match to the header that read as a mistake.          */
.siteFooter           { background-color: var(--rf-ink); }
.siteFooter a:hover   { color: var(--rf-paper); }
.footerAccreditation  { opacity: 0.55; font-size: 12px; }