:root {
  --primary: #ed7418;
  --secondary: #ffffff;
  --btn-fill-text: var(--secondary);
  --home-banner-image: url('../img/ecosound.png');
}

a.logo-container img {
  max-width: 150px !important;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--secondary);
    border: none;
    font-weight: bold;
}

.btn-outline-primary {
    border: solid var(--primary) 1px;
    color: var(--primary);
}

.banner .btn-primary {
    background-color: #f86601;
    color: var(--secondary);
    border: none;
    font-weight: bold;
    box-shadow: 0px 0px 31px 8px rgba(0,0,0,0.1);
}

.banner {
    background-image: linear-gradient(to bottom, rgba(112, 29, 0, 0) 42%, rgba(112, 29, 0, 0.28) 68%, rgba(76, 18, 0, 0.82) 100%), linear-gradient(to right, #ff7900 0%, #db5500 28%, rgba(112, 29, 0, 0.95) 48%, rgba(76, 18, 0, 0.72) 58%, rgba(76, 18, 0, 0) 72%), var(--home-banner-image);
    background-size: cover, cover, auto 180%;
    background-position: center, center, right center;
}

.banner-content {
    width: 100%;
}

@media (max-width: 767px) {
    .banner-highlights {
        display: grid;
        gap: 24px 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 28px 0 0 !important;
        padding-left: 15px;
        padding-right: 15px;
    }

    .banner-highlights > div {
        margin: 0 !important;
        min-width: 0;
    }

    .banner-highlights > div > div {
        align-items: center;
        width: 100%;
    }

    .banner-highlights .icon-md {
        flex: 0 0 16px;
        font-size: 12px;
        margin-right: 8px !important;
        text-align: center;
        width: 16px;
    }

    .banner-highlights p {
        font-size: 10px;
        line-height: 1.2;
        margin: 0;
    }
}

@media (min-width: 768px) {
    .banner {
        background-size: cover, cover, auto 200%;
        background-position: center, center, 36vw center;
    }

    .banner-highlights {
        align-items: center;
        flex-wrap: nowrap;
    }

    .banner-highlights > div {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        max-width: none;
        width: auto;
    }

    .banner-highlights > div + div::before {
        background-color: var(--primary);
        border-radius: 50%;
        content: '';
        height: 5px;
        margin-right: 15px;
        width: 5px;
    }

    .banner-highlights .icon-md {
        font-size: 14px;
        margin-right: 8px !important;
    }

    .banner-highlights p {
        font-size: 12px;
        margin-bottom: 0;
        white-space: nowrap;
    }
}

.ecosound-icon-box,
.ecosound-icon-gear,
.ecosound-icon-cart,
.ecosound-icon-headphones {
    background-color: currentColor;
    display: inline-block;
    flex: 0 0 16px;
    height: 16px;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 16px;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.ecosound-icon-box::before,
.ecosound-icon-gear::before,
.ecosound-icon-cart::before,
.ecosound-icon-headphones::before {
    content: none;
}

.ecosound-icon-box {
    mask-image: url('../img/ecosound-icon-box.svg');
    -webkit-mask-image: url('../img/ecosound-icon-box.svg');
}

.ecosound-icon-gear {
    mask-image: url('../img/ecosound-icon-gear.svg');
    -webkit-mask-image: url('../img/ecosound-icon-gear.svg');
}

.ecosound-icon-cart {
    mask-image: url('../img/ecosound-icon-cart.svg');
    -webkit-mask-image: url('../img/ecosound-icon-cart.svg');
}

.ecosound-icon-headphones {
    mask-image: url('../img/ecosound-icon-headphones.svg');
    -webkit-mask-image: url('../img/ecosound-icon-headphones.svg');
}

div.header-environment-notice {
    border: 1px solid var(--primary)
}

.destaque-card p.title > a {
    color: #2b2b2b !important;
}

.destaque-card p.title {     
    margin-top: 10px;   
}

.select-custom select, .check-custom span.check-box, .radio-custom span.radio-box {
    border: 1px solid var(--primary);
}

.input-custom input {
    border-color: var(--primary);
    caret-color: var(--primary);
}

.input-custom input:focus, .input-custom input:focus-visible {
    border-color: #ba5e18;
}

#login .banner-content span {
    color: #2b2b2b !important;
    display: block;
}