:root {
    --bs-dark: #2c2d30;
    --bs-extra-dark: #1e1f21;
    --bs-dark-rgb: 30, 31, 33;
    --bs-primary: #be861d;
    --bs-primary-dark: #955406;
    --bs-primary-light: #e6b14e;
    --bs-text-body: #c8c8c8;
    --bs-white-old: #efeeeb;
    --color-border: #ffffff40;
}

/* COLORS */
.bg-primary { background-color: var(--bs-primary) !important; }
.bg-primary-dark { background-color: var(--bs-primary) !important; }
.bg-dark { background-color: var(--bs-dark) !important; }
.bg-extra-dark { background-color: var(--bs-extra-dark) !important; }
.bg-white-old { background-color: var(--bs-white-old) !important; }

/* TEXT */
.text-primary { color: var(--bs-primary) !important; }
.text-body { color: var(--bs-text-body) !important; }
.text-balance { text-wrap: balance; }

/* SPACES */
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.-space-ps-xxs { padding-left: .3rem; }
.-space-pe-xxs { padding-right: .3rem; }
.-space-pt-xxs { padding-top: .3rem; }
.-space-pb-xxs { padding-bottom: .3rem; }
.-space-py-xxs {
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.-space-px-xxs {
    padding-left: .3rem;
    padding-right: .3rem;
}

.-space-ms-xxs { margin-left: .3rem; }
.-space-me-xxs { margin-right: .3rem; }
.-space-mt-xxs { margin-top: .3rem; }
.-space-mb-xxs { margin-bottom: .3rem; }
.-space-my-xxs {
    margin-top: .3rem;
    margin-bottom: .3rem;
}
.-space-mx-xxs {
    margin-left: .3rem;
    margin-right: .3rem;
}
@media (min-width: 768px) {
    .-space-mt-md-none { margin-top: 0 !important; }
    .-space-mb-md-none { margin-top: 0 !important; }
    .-space-ms-md-none { margin-top: 0 !important; }
    .-space-me-md-none { margin-top: 0 !important; }
    .-space-mx-md-none {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .-space-my-md-none {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .-space-mt-md-xxs { margin-top: .3rem !important; }
    .-space-mb-md-xxs { margin-bottom: .3rem !important; }
    .-space-ms-md-xxs { margin-left: .3rem !important; }
    .-space-me-md-xxs { margin-right: .3rem !important; }
    .-space-mx-md-xxs {
        margin-left: .3rem !important;
        margin-right: .3rem !important;
    }
    .-space-my-md-xxs {
        margin-top: .3rem !important;
        margin-bottom: .3rem !important;
    }
}
@media (min-width: 992px) {
    .-space-mt-lg-none { margin-top: 0 !important; }
    .-space-mb-lg-none { margin-top: 0 !important; }
    .-space-ms-lg-none { margin-top: 0 !important; }
    .-space-me-lg-none { margin-top: 0 !important; }
    .-space-mx-lg-none {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .-space-my-lg-none {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .-space-mt-lg-none { margin-top: 0 !important; }
    .-space-mt-lg-xxs { margin-top: .3rem !important; }
    .-space-mb-lg-xxs { margin-bottom: .3rem !important; }
    .-space-ms-lg-xxs { margin-left: .3rem !important; }
    .-space-me-lg-xxs { margin-right: .3rem !important; }
    .-space-mx-lg-xxs {
        margin-left: .3rem !important;
        margin-right: .3rem !important;
    }
    .-space-my-lg-xxs {
        margin-top: .3rem !important;
        margin-bottom: .3rem !important;
    }
}

/* BUTTONS */
.btn {
    border-radius: 0;
    position: relative;
}
.btn::before {
    content: none;
}
.btn.-style-primary,
.btn.-style-outline-light,
.btn.-style-dark {
    --button-background: var(--bs-primary);
    --button-hover-background: var(--bs-primary-light);
    z-index: 1;
}
.btn.-style-outline-light {
    border: 1px solid white;
    color: white;
    background-color: #ffffff00;
}
.btn.-style-dark {
    border: 1px solid var(--bs-extra-dark);
    color: white;
    background-color: var(--bs-extra-dark);
}
.btn.-style-primary::after,
.btn.-style-outline-light::after,
.btn.-style-dark::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 100%;
    transform-origin: 0% 50%;
    background-color: white;
    transition: all .6s ease;
    z-index: -1;
}
.btn.-style-dark::after {
    background-color: var(--bs-primary);
}
.btn.-style-primary:hover { color: var(--bs-primary) !important; }
.btn.-style-outline-light:hover { color: var(--bs-extra-dark) !important; }
.btn.-style-dark:hover { color: white !important; }

.btn.-style-primary:hover::after,
.btn.-style-outline-light:hover::after,
.btn.-style-dark:hover::after {
    width: 100%;
    right: auto;
    left: 0;
}
.bubble.-primary {
    background-color: var(--bs-primary);
}

.border-0 { border: none; }
.border-top-0 { border-top: none; }
.border-start-0 { border-left: none; }
.border-bottom-0 { border-bottom: none; }
.border-end-0 { border-right: none; }
.border { border: 1px solid var(--color-border); }
.border-top { border-top: 1px solid var(--color-border); }
.border-start { border-left: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }
.border-end { border-right: 1px solid var(--color-border); }

@media (min-width: 768px) {
    .border-md-0 { border: none; }
    .border-top-md-0 { border-top: none; }
    .border-start-md-0 { border-left: none; }
    .border-bottom-md-0 { border-bottom: none; }
    .border-end-md-0 { border-right: none; }
    .border-md { border: 1px solid var(--color-border); }
    .border-md-top { border-top: 1px solid var(--color-border); }
    .border-md-start { border-left: 1px solid var(--color-border); }
    .border-md-bottom { border-bottom: 1px solid var(--color-border); }
    .border-md-end { border-right: 1px solid var(--color-border); }
}
@media (min-width: 992px) {
    .border-lg-0 { border: none; }
    .border-top-lg-0 { border-top: none; }
    .border-start-lg-0 { border-left: none; }
    .border-bottom-lg-0 { border-bottom: none; }
    .border-end-lg-0 { border-right: none; }
    .border-lg { border: 1px solid var(--color-border); }
    .border-lg-top { border-top: 1px solid var(--color-border); }
    .border-lg-start { border-left: 1px solid var(--color-border); }
    .border-lg-bottom { border-bottom: 1px solid var(--color-border); }
    .border-lg-end { border-right: 1px solid var(--color-border); }
}

/* LAYOUT */
.d-grid { grid-template-columns: 1fr; }
.grid-1 { 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-1 { grid-template-columns: 1fr; }
    .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-1 { grid-template-columns: 1fr; }
    .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-1 { grid-template-columns: 1fr; }
    .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-1 { grid-template-columns: 1fr; }
    .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; }
}

/* IMAGES */
.img-cover,
.img-contain {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-contain {
    object-fit: contain;
}

/* ANIMATIONS */
.animation-clip-right-50 { opacity: 0; }
.clipRight { animation: clipRight 1s ease-in-out forwards; }

.animation-clip-left-50 { opacity: 0; }
.clipLeft { animation: clipLeft 1s ease-in-out forwards; }

@keyframes clipLeft {
    0% {
        clip-path: polygon(0% 0%,0% 0%,0% 100%,0% 100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        opacity: 1;
    }
}
@keyframes clipRight {
    0% {
        clip-path: polygon(100% 0%,100% 0%,100% 100%,100% 100%);
        opacity: 0;
    }
    50% { opacity: 1; }
    100% {
        clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
        opacity: 1;
    }
}

/* SPECIALS: BOXES */
.box-outline {
    aspect-ratio: 1 / 1;
    border: 1px solid #ffffff40;
    background-color: var(--bs-extra-dark);
    display: inline-block;
    padding: 1rem;
}
@media (min-width: 992px) {
    .box-outline.aspect-lg-2-1 { aspect-ratio: 1.5 / 1; }
}
@media (min-width: 1200px) {
    .box-outline.aspect-xl-2-1 { aspect-ratio: 1.5 / 1; }
}

/* SPECIALS: HEADERS */
.static-header {
    --space-x: 5rem;
    background-color: var(--bs-extra-dark);
    margin-top: -17rem;
    padding: 4rem 0;
    margin-bottom: 2rem;
    position: relative;
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0;
        right: 100%;
        height: 100%;
        width: calc((100vw - 100%) / 2 - var(--space-x));
        background-color: inherit;
    }
    &::after {
        right: unset;
        left: 100%;
    }
}
@media (max-width: 991.98px) {
    .static-header {
        --space-x: 2rem;
        padding: 2rem 1rem;
        margin-top: -10rem;
    }
}
@media (max-width: 575.98px) {
    .static-header {
        --space-x: 1rem;
        padding: 1rem;
        margin-top: -7rem;
        margin-bottom: 1rem;
    }
}

/* HEADER */
.site-header {
    --header-background: var(--bs-extra-dark);
}
.site-header .site-header__main__actions .action.-cart .bubble.-primary {
    background-color: #fff;
    color: black;
}
.mega-menu, .sub-menu {
    border-radius: 0;
    background-color: var(--bs-dark);
    color: white;
    border: 1px solid #ffffff40;
}
@media (min-width: 1580px) {
    .primary-menu > .menu-item > a {
        font-size: .8rem;
    }
}

/* FOOTER */
.site-footer {
    background: var(--bs-extra-dark);
}