/* Toolbar white background CSS */

body > header > .toolbar {
    background-color: #ffffff;
    color: #ffffff;
    height: 5.3125em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 0.8em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media screen and (max-width: 1024px) {
    body > header > .toolbar {
        height: 5.29975em;
    }
}


/* Retailer dropdown text / reset CSS */

.retailer-data > div > span.content > span.text > span {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.5em;
}

sp-dropdown .sp-dropdown-text * {
    color: inherit;
    vertical-align: middle;
    display: inline-block;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
mark,
menu,
nav,
object,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    background: 0 0;
    color: inherit;
}

.default-text-align {
    text-align: left;
}

.retailer-data > div {
    display: inline-block;
    height: 100%;
    width: 100%;
    white-space: nowrap;
}

sp-dropdown .sp-dropdown-text {
    display: inline-block;
    height: 100%;
    color: #000000;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    padding: 0 0.4em;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* Login buttons + black text reset CSS */

body > header > .toolbar > .data > .coupons > button.login,
body > header > .toolbar > .data > .language > button.login,
body > header > .toolbar > .data > .newsletter > button.login,
body > header > .toolbar > .data > .retailer-data > button.login,
body > header > .toolbar > .data > .user-details > button.login {
    height: 100%;
    padding: 0 1em;
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
button,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
header,
hgroup,
html,
i,
iframe,
img,
input,
ins,
kbd,
label,
legend,
mark,
menu,
nav,
object,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
textarea,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
    background: 0 0;
    color: #000000;
}


/* Search input CSS */

body > header > .toolbar > .data > .search-wrapper > .search > .input > input[type="search"].placeholder {
    color: #000000;
    text-align: center;
    font-style: italic;
    text-transform: uppercase;
}

body > header > .toolbar > .data > .search-wrapper > .search > .input > input[type="search"] {
    -webkit-appearance: textfield;
    width: 100%;
    height: 100%;
    background-color: #c29a6d1c;
    padding-left: 1em;
    padding-right: 4em;
    border-width: 0;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* Home background wrapper padding CSS */

html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper,
html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper {
    height: 94px;
    padding-inline: 0;
}


/* Strong home hero/background height override */

/* Main wrapper, desktop + all sidenav states */
html.home section.view .home-page-wrapper > .background-wrapper,
html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper,
html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    padding-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    -webkit-transition: padding 0.3s linear !important;
    transition: padding 0.3s linear !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Inner background/banner if Stor.ai puts the real height here */
html.home section.view .home-page-wrapper > .background-wrapper .background,
html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background,
html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background,
html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background,
html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Image inside the banner */
html.home section.view .home-page-wrapper > .background-wrapper .background img,
html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background img,
html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background img,
html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background img,
html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background img {
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    width: 100% !important;
    object-fit: cover !important;
}

/* Mobile/tablet override because Stor.ai has a max-width: 1024px rule */
@media screen and (max-width: 1024px) {
    html.home section.view .home-page-wrapper > .background-wrapper,
    html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
    html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper,
    html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper,
    html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper,
    html.home section.view .home-page-wrapper > .background-wrapper .background,
    html.home.close-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background,
    html.home.close-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background,
    html.home.hide-sidenav.ltr section.view .home-page-wrapper > .background-wrapper .background,
    html.home.hide-sidenav.rtl section.view .home-page-wrapper > .background-wrapper .background,
    html.home section.view .home-page-wrapper > .background-wrapper .background img {
        height: 94px !important;
        min-height: 94px !important;
        max-height: 94px !important;
        padding-inline: 0 !important;
    }
}


/* Carousel arrow SVG color */
/* Added to the clean strong background CSS */

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