:root {
	--primary-color: #C41230;
    --secondary-color: #FFBA00;
    --top-banner-bg-color: #1F1F1F;
    --accent-color: #E4f6ff;
    --topic-menu-bg-color-hover: #F0F0F0;
    /* LINK COLORS */
    --primary-links-color-hover: #7f081c;
    --secondary-links-color-hover: #7f081c;
    --footer-link-color: #C4C4C4;
    --footer-link-color-hover: #FFBA00;
    /* BUTTON COLORS - PRIMARY */
    --primary-button-color: #C41230;
    --primary-button-color-hover: #7f081c;
    --primary-button-text-color: #FEFEFE;
    --primary-button-text-color-hover: #FEFEFE;
    --primary-button-border-color: #C41230;
    --primary-button-border-color-hover: #7f081c;
    /* BUTTON COLORS - SECONDARY */
    --secondary-button-color: #E4F6FF;
    --secondary-button-color-hover: #001623;
    --secondary-button-text-color: #C41230;
    --secondary-button-text-color-hover: #FEFEFE;
    --secondary-button-border-color: #a35966;
    --secondary-button-border-color-hover: #C41230;
    /* NAVIGATION COLORS */
    --nav-bg-color: #C41230;
    --nav-tab-color: #FEFEFE;
    --nav-tab-color-hover: #FFE294;
    --nav-link-color: #C41230;
    --nav-link-color-hover: #7f081c;
    /* HEADING/BANNER BACKGROUND COLORS */
    --bg-color-1: #C41230;
    --bg-color-2: #FFBA00;
    --bg-color-3: #CCC2B6;
    /* HEADING/BANNER BACKGROUND COLORS WITH TRANSPARENCY */
    --rgba-color-1: rgb(196 18 48 / .85);
    --rgba-color-2: rgb(255 186 0 / .85);
    --rgba-color-3: rgb(204 194 182 0 / .85);
    /* FONT FAMILY */
    --font-family-heading: "EB Garamond", serif;
    --font-family-body: "Open Sans", sans-serif;
}

/* Site-wide: search bar placeholder contrast (WCAG 1.4.3) */
#site-search input::placeholder {
	color: #757575; /* 4.6:1 on #fff; go darker if the input isn't white */
	opacity: 1;     /* Firefox fades placeholders by default */
}

#announcements-heading, #also-bought-heading {
    color: #fff;
}

.compare-block {
    padding: 1.4em;
    border: 1px solid #eee;
}

.banner-block, .compare-block {
    border-radius: var(--border-radius-lg);
    overflow: clip;
    position: relative;
    box-shadow: 0 13px 13px -12px rgb(0 0 0 / .5);
}


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


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

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


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