:root {
	--display-font-family: Open Sans;
	--body-font-family: Open Sans;

	--font-size: 16px

	--logo-padding: 25px;
	--logo-height: 250px;

	--header-width: 100%;
	--header-border-position: bottom;
	--header-border-size: 0;
	--header-bg-color: 35 32 28;
	--header-border-color: 58 53 46;

	--brand-color: 122 30 36;
	--brand-color-inverted: 247 243 233;

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

	--action-color: 122 30 36;
	--action-color-inverted: 247 243 233;

	--announcement-bar-bg-color: 122 30 36;
	--announcement-bar-text-color: 247 243 233;
	--announcement-bar-link-color: 61 61 61;

	--main-navigation-bg-color: 237 230 214;
	--main-navigation-link-color: 35 32 28;
	--main-navigation-link-color-hover: 35 32 28;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 16px;
	--main-navigation-link-alignment: center;

	--auxiliary-bg-color: transparent;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 216 210 196;

	--order-status-bg-color: 184 134 43;
	--order-status-color: 35 32 28;

	--store-menu-bg_color: 248 248 248;
	--store-menu-color: 119 7 ;

	--footer-bg-color: 32 32 32;
	--footer-color: 255 255 255;
	--footer-link-color: 255 15 ;
}

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