:root {
    --bs-red: #6d0c24;
    --main-red: #4c0e28;
    --main-red-light: #82354c;
    --bs-gray: #c2cacf;
    --bs-gray-light: #eaedef;
    --gold-gradient: linear-gradient(131deg, #f7e5ab, #9d6929, #75481a);
}

/* COLORS */
.bg-main-red { background-color: var(--main-red) !important; }
.bg-main-red-light { background-color: var(--main-red-light) !important; }
.bg-gold-gradient { background: var(--gold-gradient) !important; }
.bg-gray { background-color: var(--bs-gray) !important; }
.bg-gray-light { background-color: var(--bs-gray-light) !important; }

/* TEXT */
a,
.text-red { color: var(--bs-red); }
.text-red-light { color: var(--main-red-light); }
.text-main-red { color: var(--main-red); }
.text-balance { text-wrap: balance; }
.text-gray { color: var(--bs-gray); }
.text-gray-light { color: var(--bs-gray-light); }

/* BORDER */
.border {
    border: 1px solid var(--bs-gray-300);
}
.border.border-dark { border-color: var(--bs-gray-800); }
.border.border-light { border-color: white; }

.rounded-sm { border-radius: 0.25rem !important; }
.rounded-md { border-radius: 0.5rem !important; }
.rounded-lg { border-radius: 1rem !important; }
.rounded-xl { border-radius: 2rem !important; }

/* BUTTONS */
.btn.-style-main-red {
    background-color: var(--main-red);
    border: var(--main-red);
    color: white;
    &:hover {
        background-color: var(--main-red-light);
        border: var(--main-red-light);
    }
}
.bubble.-primary {
    background-color: var(--main-red);
}

/* LAYOUT */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

@media (width >= 576px) {
    .w-sm-100 { width: 100% !important; }
    .h-sm-100 { height: 100% !important; }
}
@media (width >= 768px) {
    .w-md-100 { width: 100% !important; }
    .h-md-100 { height: 100% !important; }
}
@media (width >= 992px) {
    .w-lg-100 { width: 100% !important; }
    .h-lg-100 { height: 100% !important; }
}
@media (width >= 1200px) {
    .w-xl-100 { width: 100% !important; }
    .h-xl-100 { height: 100% !important; }
}

@media (width >= 768px) {
    .align-items-md-center { align-items: center; }
    .justify-content-md-center { justify-content: center; }
}
@media (width >= 992px) {
    .align-items-lg-center { align-items: center; }
    .justify-content-lg-center { justify-content: center; }
}

@media (min-width: 400px) {
    .d-xs-block { display: block !important; }
    .d-xs-none { display: none !important; }
    .d-xs-flex { display: flex !important; }
    .d-xs-grid { display: grid !important; }
}

.d-grid { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
.grid-1-2 { grid-template-columns: 1fr 2fr; }

@media (min-width: 576px) {
    .grid-sm-2 { grid-template-columns: 1fr 1fr; }
    .grid-sm-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-sm-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-sm-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-sm-1-2 { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 768px) {
    .grid-md-2 { grid-template-columns: 1fr 1fr; }
    .grid-md-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-md-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-md-1-2 { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 992px) {
    .grid-lg-2 { grid-template-columns: 1fr 1fr; }
    .grid-lg-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-lg-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-lg-1-2 { grid-template-columns: 1fr 2fr; }
}
@media (min-width: 1200px) {
    .grid-xl-2 { grid-template-columns: 1fr 1fr; }
    .grid-xl-3 { grid-template-columns: 1fr 1fr 1fr; }
    .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-xl-2-1 { grid-template-columns: 2fr 1fr; }
    .grid-xl-1-2 { grid-template-columns: 1fr 2fr; }
}

/* SPACES */
.-space-mt-xxs { margin-top: 0.25rem !important; }
.-space-mb-xxs { margin-bottom: 0.25rem !important; }
.-space-pt-xxs { padding-top: 0.25rem !important; }
.-space-pb-xxs { padding-bottom: 0.25rem !important; }
.-space-my-xxs { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.-space-py-xxs { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.-space-mx-xxs { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.-space-px-xxs { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

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

/* HEADER */
.site-header {
    background: white;
}
.site-header > .container:first-child {
    max-width: unset;
    background-color: var(--main-red);
    padding: 0 2rem;
}
.site-header .site-header__secondary {
    justify-content: center;
}
.site-header .site-header__secondary__info,
.site-header .site-header__divider {
    display: none;
}
.site-header .site-header__secondary__prices {
    margin-left: unset;
}
.site-header .site-header__secondary__prices .spot-prices .price-item {
    padding: 0 1.75em;
}
.site-header .site-header__main {
    color: black;
}
.site-header__main__actions::before {
    content: none;
}
.site-header__main__actions .hamburger-box .hamburger-inner,
.site-header__main__actions .hamburger-box .hamburger-inner::after,
.site-header__main__actions .hamburger-box .hamburger-inner::before {
    background-color: var(--main-red);
}
@media (width <= 576px) {
    .site-header .site-header__secondary {
        height: auto;
        padding: 0.3rem;
    }
}
.site-header__main__menu .primary-menu {
    justify-content: left;
    flex-wrap: wrap;
}
@media (width >= 1200px) {
    .primary-menu > .menu-item > a {
        padding: 0.4rem 0;
    }
}

/* FOOTER */
.site-footer {
    background: var(--main-red);
}

/* PRODUCTS */
.card-product .card-product__actions .btn {
    background-color: var(--main-red) !important;
    border-color: var(--main-red);
    color: white;
    &:hover {
        background-color: var(--main-red-light) !important;
    }
}
@media (min-width: 576px) {
    .card-product__actions a + a, .card-product__actions button + a {
        border-left-color: white !important;
    }
}
@media (max-width: 575.98px) {
    .card-product__actions {
        gap: .1rem;
    }
}
.card-product .icon {
    color: var(--main-red);
}