: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;
    }
}


.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);
}

/* PRODUCTS */
.section-product .product .product__summary .product__summary__note em small {
    display: none;
}