/*ToolbarColor*/
body > header > .toolbar {
  background-color: #ffffff;
}
/*images of tool bar*/
header .toolbar .retailer-data sp-dropdown .sp-dropdown-text img,
header .toolbar .user-details sp-dropdown .sp-dropdown-text img,
header .toolbar .language sp-dropdown .sp-dropdown-text img,
header .toolbar .newsletter img {
  filter: invert(1);
  -webkit-filter: invert(1);
}

body > header > .toolbar > .data > .coupons.coupons {
  filter: invert(0);
  -webkit-filter: invert(1);
  font-weight: 100;
}

body > header > .toolbar > .data > .coupons.active {
  filter: none; /* Removes the inversion */
  -webkit-filter: none;
  background-color: #your-new-bg-color;
}

sp-dropdown .sp-dropdown-text .arrow {
  filter: invert(0);
  -webkit-filter: invert(1);
}

/*images of tool bar on open state*/
header .toolbar .retailer-data sp-dropdown.open .sp-dropdown-text img,
header .toolbar .user-details sp-dropdown.open .sp-dropdown-text img,
header .toolbar .language sp-dropdown.open .sp-dropdown-text img {
  filter: invert(0);
  -webkit-filter: invert(0);
}
/*text color for drop down list of toolbar*/
body
  > header
  > .toolbar
  > .data
  > .user-details
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option
  .option-content,
body
  > header
  > .toolbar
  > .data
  > .language
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option
  .option-content,
body
  > header
  > .toolbar
  > .data
  > .retailer-data
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option
  .option-content {
  border-top: 1px solid #ffffff;
  color: #ffffff;
}
/* color for drop down list of toolbar on hover state* usually the same as current category */
body
  > header
  > .toolbar
  > .data
  > .user-details
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option:hover,
body
  > header
  > .toolbar
  > .data
  > .language
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option:hover,
body
  > header
  > .toolbar
  > .data
  > .retailer-data
  sp-dropdown
  > .sp-dropdown-options-wrapper
  > sp-option:hover {
  background-color: #19322b !important;
}
/*categories text color*/
body
  > header
  > .menu
  > .categories
  > .category
  > .category-content
  > .content
  > .name {
  color: #000000;
}

/*text toolbar*/
sp-dropdown .sp-dropdown-text * {
  color: #000 !important;
}

sp-dropdown.open .sp-dropdown-text * {
  color: #ffffff !important;
}
/*--------login text  - before login -------------*/
body > header > .toolbar > .data > .user-details > button.login {
  color: #9a9a9a !important;
}

html div.sidenav > div > nav > header {
  background-color: #960f44;
}

/*drop down menu on login/store detailes/and language*/
body > header > .toolbar > .data > .user-details sp-dropdown.open,
body > header > .toolbar > .data > .language sp-dropdown.open,
body > header > .toolbar > .data > .retailer-data sp-dropdown.open,
body
  > header
  > .toolbar
  > .data
  > .user-details
  sp-dropdown
  > .sp-dropdown-options-wrapper,
body
  > header
  > .toolbar
  > .data
  > .language
  sp-dropdown
  > .sp-dropdown-options-wrapper,
body
  > header
  > .toolbar
  > .data
  > .retailer-data
  sp-dropdown
  > .sp-dropdown-options-wrapper {
  background-color: # !important;
}

/*search area color*/
body > header > .toolbar > .data > .search-wrapper > .search > .input > input {
  background-color: #e8e8e8 !important;
}
/*--------categories-------------*/

/*categories lines seperator*/
body > header > .menu > .categories > .category {
  border-left: 1px solid #960f44 !important;
}

/*categories current*/
body > header > .menu > .categories > .category.current > .category-content {
  background-color: #c8d6c9 !important;
}

/*under line on over and selected - usually as current category*/
body > header > .menu > .categories > .category.open > .category-content {
  box-shadow: inset 0px -5px #960f44 !important;
}

/*---------------------checkout-------------------*/
/*check out button*/
html div.sidenav > div > nav.cart > footer > .checkout > span {
  background-color: #960f44;
}
/*small check out button*/
html div.sidenav > div > nav > header .right .button {
  background-color: #960f44;
  border: 1px solid #ffffff;
}
/*Check out button text color*/
html div.sidenav > div > nav.cart > footer > .checkout > span > span,
html div.sidenav > div > nav.cart > footer > .checkout > span {
  color: #ffffff !important;
}
/*secondary checkout button color*/
checkout-bottom-banner .total-summary .next-button button {
  background-color: #960f44;
  border-color: #ffffff;
}

/*Trash can color*/

html div.sidenav > div > nav header.nav-header .left > .clean-cart-icon,
html div.sidenav > div > nav > header .left > .clean-cart-icon {
  background-color: #d3d3d3;
}

/*START Narrow componant spacing*/

html.home section.main section.view .home-page-wrapper > .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.7em;
  text-align: center;
  background-position:
    bottom left,
    0 0,
    8px 8px;
  background-size: auto;
  background-repeat: repeat;
  background-size: 70%;
  -webkit-transition: padding 0.3s linear;
  transition: padding 0.3s linear;
  -webkit-padding-start: 3.5em;
  padding-inline-start: 3.5em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: relative;
  z-index: 1;
}

html.home section.main section.view .home-page-wrapper > .content > .component {
  gap: 0.7em;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  border-radius: 1px;
}

/*END Narrow componant spacing*/

/* START Update the banner height */

.background {
  height: 94px !important;
}

/* Update the wrapper to allow elements below to move up */
.background-wrapper {
  height: 94px !important;
}

/* END Update the banner height */

/*Change arrow color*/

html.home
  section.view
  .home-page-wrapper
  > .content
  > .component
  > .header-wrapper
  > .carousel-btns-wrapper
  > .action
  button
  > svg
  use {
  fill: #960f44;
}

html.home
  section.view
  .home-page-wrapper
  > .content
  > .component
  > .header-wrapper
  > .carousel-btns-wrapper
  > .action
  button.disabled
  svg
  use {
  fill: #c39a6c;
}

body > footer .inner-footer a.powered-by img {
  max-width: 4em;
  vertical-align: middle;
  filter: invert(1);
  -webkit-filter: invert(1);
}

html.ltr body > footer {
  padding-right: 27em;
}

body > footer {
  background-color: #f9f9f9;
  color: #ca87a1;
  border-top: 5px solid;
}