:root {
	--primary-color: #492f24;
    --secondary-color: #ffc425;
    --top-banner-bg-color: #ffc425;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #347596;
    --secondary-links-color-hover: #ffc425;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #ffc425;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #492f24;
    --primary-button-color-hover: #2f1910;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #FEFEFE;
    --primary-button-border-color: #492f24;
    --primary-button-border-color-hover: #202020;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #492f24;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #492f24;
    --secondary-button-border-color-hover: #492f24;
    /* NAVIGATION COLORS */
    --nav-bg-color: #492f24;
    --nav-tab-color: #FEFEFE;
    --nav-tab-color-hover: #ffc425;
    --nav-link-color: #492f24;
    --nav-link-color-hover: #347596;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #492f24;
    --bg-color-2: #ffc425;
    --bg-color-3: #575a62;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(73 47 36 / .75);
    --rgba-color-2: rgb(255 196 37 / .75);
    --rgba-color-3: rgb(145 197 0 / .5);
    /* FONT FAMILY */
    --font-family-heading: "Roboto", sans-serif;
    --font-family-body: "Noto Sans", sans-serif;
    /* UNFORTUNATELY-NAMED VARIABLE, THIS IS ACTUALLY THE FOOTER BACKGROUND COLOR */
    --footer-font-color: #492f24;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}


/* HIDE DEFAULT CATALOG GROUP NAME LABELS WHILE REMAINING SCREEN READER ACCESSIBLE */
.shop-main-home .catalog-name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.recommended-products h2 span,
.home-announcements h3 span,
#popular-heading {
    color: #fff;
}

#top-banner {
    color: #492f24;
}

.block-popularitems h3 {
    background: var(--bg-color-1);
}

#footer-newsletter {
    background: #ffc425;
    color: #492f24;
}

#footer-newsletter .button.hollow {
    border: 1px solid #492f24;
    color: #492f24;
}

#footer-newsletter .button.hollow:hover {
    border: 1px solid #492f24;
    color: #fff;
}

/* This is removing a darkening effect on the image that is used for the captions, which the store is not using as they have text embedded in the images. If the store wants to use the captions in the future, they should delete or comment out the following rule. */
.home-block a:after {
    background: none;
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR MEDIUM SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */
@media screen and (min-width: 40em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 64em) {
        .mega-menu > li > ul > li, .mega-menu > li > ul > .column {
        -webkit-flex: 0 0 auto;
        flex: 0 0 auto;
    }
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR X-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 75em) {
}


/*  ::::::::::::::::::::::::::::::::::::::::::::::::
	     CSS FOR XX-LARGE SCREENS AND HIGHER
::::::::::::::::::::::::::::::::::::::::::::::::::::  */

@media screen and (min-width: 90em) {
}