:root {
    --bs-primary: #cba056;
    --bs-primary-rgb: 201, 162, 39;
    --bs-primary-light: #ebe6dd;
    --bs-primary: #1776f4;
    --bs-primary-rgb: 23, 118, 244;
    --bs-primary-2: #7bb2fa;
    --bs-primary-light: #f0f4f9;
    --bs-primary-dark: #462aa4;
    --bs-gray: #60646e;
    --bs-dark: #484849;
    --bs-extra-dark: #1C1A19;
    --bs-extra-dark-rgb: 28, 26, 25;
    --bs-line: #ebf0f1;
    --bs-border-color: rgb(from var(--bs-line) r g b / 0.3);
    --bs-light: #ebf0f1;
    --bs-light-rgb: 235, 240, 241;

    --filter-black-to-primary: invert(.5) sepia(3) brightness(0.65) hue-rotate(190deg) saturate(15) contrast(1.1);
    --filter-black-to-primary-soft: invert(.5) sepia(3) brightness(.6) hue-rotate(190deg) saturate(2) contrast(1.5);

    --primary-gradient: linear-gradient(135deg, #cba056 0%, #937923 100%);
    --primary-gradient-hover: linear-gradient(135deg, #d6c173 0%, #cba056 100%);
    --primary-gradient: linear-gradient(135deg, var(--bs-primary) 0%, var(--bs-primary-dark) 100%);
    --primary-gradient-hover: linear-gradient(135deg, var(--bs-primary-2) 0%, var(--bs-primary) 100%);
}

/* TEXT */
.text-balance {
    text-wrap: balance;
}
.display-xl {
    font-size: clamp(2.7rem, 9vw, 5.5rem);
    line-height: .9;
    font-weight: 400;
}
.display-xxl {
    font-size: clamp(3rem, 10vw, 7rem);
    line-height: .9;
    font-weight: 400;
}
.eyebrow {
    font-size: clamp(0.875rem, 1.5vw, 1.1rem);
    text-transform: uppercase;
    color: var(--bs-primary);
    letter-spacing: clamp(0.1em, 1vw, 0.2em);
}

/* FONTS */

/* BACKGROUNDS */

/* COLORS */
.text-primary { color: var(--bs-primary) !important; }
.text-dark { color: var(--bs-dark) !important; }
.text-extra-dark { color: var(--bs-extra-dark) !important; }

/* BACKGROUNDS */
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-extra-dark { background-color: var(--bs-extra-dark) !important; }
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-primary-gradient { background: var(--primary-gradient) !important; }
.bg-primary-gradient-hover { background: var(--primary-gradient-hover) !important; }

/* BORDERS */
.border { border: 1px solid var(--bs-border-color) !important; }
.border-top { border-top: 1px solid var(--bs-border-color) !important; }
.border-end { border-right: 1px solid var(--bs-border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
.border-start { border-left: 1px solid var(--bs-border-color) !important; }

@media (width >= 576px) {
    .border-sm { border: 1px solid var(--bs-border-color) !important; }
    .border-sm-top { border-top: 1px solid var(--bs-border-color) !important; }
    .border-sm-end { border-right: 1px solid var(--bs-border-color) !important; }
    .border-sm-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
    .border-sm-start { border-left: 1px solid var(--bs-border-color) !important; }
    .border-sm-none { border: 0 !important; }
}
@media (width >= 768px) {
    .border-md { border: 1px solid var(--bs-border-color) !important; }
    .border-md-top { border-top: 1px solid var(--bs-border-color) !important; }
    .border-md-end { border-right: 1px solid var(--bs-border-color) !important; }
    .border-md-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
    .border-md-start { border-left: 1px solid var(--bs-border-color) !important; }
    .border-md-none { border: 0 !important; }
}
@media (width >= 992px) {
    .border-lg { border: 1px solid var(--bs-border-color) !important; }
    .border-lg-top { border-top: 1px solid var(--bs-border-color) !important; }
    .border-lg-end { border-right: 1px solid var(--bs-border-color) !important; }
    .border-lg-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
    .border-lg-start { border-left: 1px solid var(--bs-border-color) !important; }
    .border-lg-none { border: 0 !important; }
}
@media (width >= 1200px) {
    .border-xl { border: 1px solid var(--bs-border-color) !important; }
    .border-xl-top { border-top: 1px solid var(--bs-border-color) !important; }
    .border-xl-end { border-right: 1px solid var(--bs-border-color) !important; }
    .border-xl-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
    .border-xl-start { border-left: 1px solid var(--bs-border-color) !important; }
    .border-xl-none { border: 0 !important; }
}
@media (width >= 1460px) {
    .border-xxl { border: 1px solid var(--bs-border-color) !important; }
    .border-xxl-top { border-top: 1px solid var(--bs-border-color) !important; }
    .border-xxl-end { border-right: 1px solid var(--bs-border-color) !important; }
    .border-xxl-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
    .border-xxl-start { border-left: 1px solid var(--bs-border-color) !important; }
    .border-xxl-none { border: 0 !important; }
}
.border-dark { border-color: var(--bs-dark) !important; }
.border-extra-dark { border-color: var(--bs-extra-dark) !important; }
.border-primary { border-color: var(--bs-primary) !important; }


/* SHADOWS */

/* IMAGES */
.img-cover { object-fit: cover; }
.img-contain { object-fit: contain; }

/* BUTTONS */
.btn:not(.btn-icon) {
    border-radius: 0;
}
.btn-primary {
    background: var(--primary-gradient);
    border: 1px solid var(--primary-gradient);
    color: var(--bs-extra-dark);
    color: white;
    transition: all 0.3s ease;

    &:hover {
        background: var(--primary-gradient-hover);
        border-color: var(--primary-gradient-hover);
        color: var(--bs-extra-dark);
        color: white;
    }
}
.btn-primary img,
.btn-primary svg {
    filter: invert(1);
}
.btn-arrow {
    position: relative;
    padding: .75rem 3.75rem .75rem 2.5rem;
    transition: all 0.3s ease;

    &::after {
        content: '';
        position: absolute;
        background-image: url('/themes/theme-4/assets/images/include-icons/icon-long-arrow.svg');
        background-repeat: no-repeat;
        background-position: center;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        width: 1em;
        height: 1em;
        filter: invert(1);
    }
    &:hover {
        padding-right: 4.25rem;
    }
}

/* ROUNDED */
.rounded-4 { border-radius: 1.5rem; }
.rounded-5 { border-radius: 2rem; }

@media (width >= 576px) {
    .rounded-sm-1 { border-radius: 0.25rem; }
    .rounded-sm-2 { border-radius: 0.5rem; }
    .rounded-sm-3 { border-radius: 1rem; }
    .rounded-sm-4 { border-radius: 1.5rem; }
    .rounded-sm-5 { border-radius: 2rem; }
}
@media (width >= 768px) {
    .rounded-md-1 { border-radius: 0.25rem; }
    .rounded-md-2 { border-radius: 0.5rem; }
    .rounded-md-3 { border-radius: 1rem; }
    .rounded-md-4 { border-radius: 1.5rem; }
    .rounded-md-5 { border-radius: 2rem; }
}
@media (width >= 992px) {
    .rounded-lg-1 { border-radius: 0.25rem; }
    .rounded-lg-2 { border-radius: 0.5rem; }
    .rounded-lg-3 { border-radius: 1rem; }
    .rounded-lg-4 { border-radius: 1.5rem; }
    .rounded-lg-5 { border-radius: 2rem; }
}
@media (width >= 1200px) {
    .rounded-xl-1 { border-radius: 0.25rem; }
    .rounded-xl-2 { border-radius: 0.5rem; }
    .rounded-xl-3 { border-radius: 1rem; }
    .rounded-xl-4 { border-radius: 1.5rem; }
    .rounded-xl-5 { border-radius: 2rem; }
}
@media (width >= 1460px) {
    .rounded-xxl-1 { border-radius: 0.25rem; }
    .rounded-xxl-2 { border-radius: 0.5rem; }
    .rounded-xxl-3 { border-radius: 1rem; }
    .rounded-xxl-4 { border-radius: 1.5rem; }
    .rounded-xxl-5 { border-radius: 2rem; }
}

/* HEADER */
.header-top,
.header-middle,
.header-bottom {
    border: none;
}

/* HEADER TOP */
.site-header__secondary__info > ul > li:not(:first-child) {
    display: none;
}

/* HEADER MIDDLE */
.header .custom-logo-link {
    max-width: clamp(100px, 19vw, 200px);
}

/* Search button */
.header-middle__right .search {
    margin-right: 1rem;
}
.header-middle__right .search-box {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 100rem !important;
    overflow: hidden;
    width: auto !important;
    transition: border 0.3s ease;
}
.header-middle__right .search-box button[type="submit"] {
    background: transparent !important;
    border: none !important;
    aspect-ratio: 1;
    min-width: 40px;
    width: 40px;
    height: 40px;
    margin-left: 0;
}
.header-middle__right .search-box button[type="submit"] svg,
.btn-icon.btn-xs.btn-search-mobile svg {
    filter: invert(1);
}
.header-middle__right .search-box .awesomplete {
    width: 0 !important;
    transition: width 0.3s ease;
}
.header-middle__right .search-box .awesomplete .form-control {
    background: transparent !important;
    color: white !important;
    border: none !important;
    &::placeholder {
        color: #ffffff77 !important;
    }
}
.header-middle__right .search-box:hover,
.header-middle__right .search-box:focus-within,
.header-middle__right .search-box:focus,
.header-middle__right .search-box:active {
    border: 1px solid var(--bs-light) !important;

    .awesomplete {
        width: 300px !important;
    }
}
.header-middle__right .btn-icon {
    background: var(--primary-gradient) !important;
    transition: all 0.3s ease;
    color: white !important;

    &:hover {
        background: var(--primary-gradient-hover) !important;
    }
}

/* MOBILE MENU */
.mobile-menu__header,
.mobile-menu__bar {
    background: var(--bs-extra-dark);
}
.mobile-menu__bar {
    padding-top: .4rem;
}
.mobile-menu__bar .custom-logo-link {
    max-width: 120px;
}

/* Mobile search button */
.btn-icon.btn-xs.btn-search-mobile {
    background: transparent !important;
    border: none !important;
}

.header-middle__right ul > .list-item .inline-icon-text-cart span {
    display: none;
}
.header .inline-icon-text-cart .btn-icon {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-extra-dark) !important;
    margin-left: -.3rem;
}
.mobile-menu__footer__actions .icon .svg {
    filter: invert(1) !important;
}

/* HERO */

/* PRODUCTS */

/* FOOTER */
.site-footer {
    background-color: var(--bs-extra-dark);
}
@media (width >= 1200px) {
    .footer__links-container {
        flex-wrap: nowrap;
    }
}