:root {
    --bs-primary: #2293dd;
    --bs-primary-light: #53bbff;
    --bs-primary-dark: #00548c;
    --bs-secondary: #e2dfdf;
    --bs-secondary-light: #f0e9e9;
    --bs-secondary-dark: #d50a12;
    --bs-extra-dark: #151816;
    --font-primary: "Notable", sans-serif;
    --font-secondary: "Oswald", sans-serif;
    --bs-border: #e1e1e1;
}

/* MAIN FONTS */
.font-primary {
  /* font-family: "Notable", sans-serif; */
  text-transform: uppercase;
  font-weight: bold;
  font-style: normal;
  letter-spacing: 3px;
}
.font-secondary {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* Variable font weight from 200 to 700 */
  font-style: normal;
}
h1, h2, h3, h4, h5, h6, .display-2, .display-3, .display-4 {
    /* font-family: "Notable", sans-serif; */
    font-family: Helvetica;
    font-weight: 700;
    letter-spacing: 1px;
}

/* TEXTS */
.text-balance { text-wrap: balance; }
a { color: var(--bs-primary); }
a:hover { color: var(--bs-primary-light); }
.bg-dark a, .bg-extra-dark a, .bg-black a, .bg-primary a, .bg-primary-dark a {
    color: var(--bs-primary-light);
    &:hover {
        color: white;
    }
}
.text-primary { color: var(--bs-primary) !important; }
.text-primary-light { color: var(--bs-primary-light) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-secondary-light { color: var(--bs-secondary-light) !important; }
.main-title {
    /* --clr: black; */
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    /* font-family: "Oswald", sans-serif; */
    font-family: Helvetica, sans-serif;
    font-weight: 700;
    color: var(--bs-secondary);
    /* -webkit-text-stroke: clamp(2px, 1vw, 3px) var(--clr);
    filter: 
        drop-shadow(1px 1px var(--clr)) drop-shadow(1.5px 1.5px var(--clr)) 
        drop-shadow(2px 2px var(--clr)) drop-shadow(2.5px 2.5px var(--clr))
        drop-shadow(3px 3px var(--clr)) drop-shadow(3.5px 3.5px var(--clr))
        drop-shadow(4px 4px var(--clr)) drop-shadow(4.5px 4.5px var(--clr)); */
    line-height: 1;
    /* margin-bottom: 2rem; */
}
.bg-dark .main-title,
.bg-extra-dark .main-title,
.bg-black .main-title,
.main-title.text-light,
.main-title.text-white {
    color: var(--bs-dark) !important;
    /* --clr: var(--bs-primary-light);
    -webkit-text-stroke: clamp(1px, 1vw, 1.5px) var(--clr); */
}
.main-title.text-white {
    /* --clr: var(--bs-light); */
}
.bg-extra-dark .main-title {
    color: var(--bs-extra-dark) !important;
}
.bg-black .main-title {
    color: black !important;
}

/* BACKGROUNDS */
.bg-primary {
    background-color: var(--bs-primary) !important;
    color: white;
}
.bg-primary-light {
    background-color: var(--bs-primary-light) !important;
    color: white;
}
.bg-primary-dark {
    background-color: var(--bs-primary-dark) !important;
    color: white;
}
.bg-secondary {
    background-color: var(--bs-secondary) !important;
    color: black;
}
.bg-secondary-dark {
    background-color: var(--bs-secondary-dark) !important;
    color: white;
}
.bg-extra-dark {
    background-color: var(--bs-extra-dark) !important;
    color: white;
}

/* BUTTONS */
.btn {
    --btn-color: white;
    --btn-color-hover: var(--bs-primary-light);
    --btn-background: black;
    --btn-hover-background: black;
    --button-hover-background: var(--bs-primary-light);
    background-color: var(--btn-background);
    border-radius: 0;
    border: none;
    color: var(--btn-color) !important;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.btn.-style-primary,
.btn.-style-arrow-primary {
    --btn-color-hover: white;
    --btn-background: var(--bs-primary) !important;
    --btn-hover-background: var(--bs-primary-light) !important;
}
.btn.-style-primary:hover,
.btn.-style-arrow-primary:hover {
    background-color: var(--bs-primary-light) !important;
}
.btn.-style-secondary,
.btn.-style-arrow-secondary {
    --btn-color: white;
    --btn-color-hover: white;
    --btn-background: var(--bs-secondary-dark) !important;
    --btn-hover-background: var(--bs-primary) !important;
}
.btn.-style-light,
.btn.-style-arrow-light {
    --btn-color: black;
    --btn-color-hover: black;
    --btn-background: var(--bs-light) !important;
    --btn-hover-background: var(--bs-primary-light) !important; 
}
.btn.-style-arrow-primary-dark {
    --btn-color: var(--bs-primary-light);
    --btn-color-hover: white;
    --btn-background: black!important;
    --btn-hover-background: black !important; 
}

.btn.-style-arrow,
.btn.-style-arrow-primary,
.btn.-style-arrow-secondary,
.btn.-style-arrow-light,
.btn.-style-arrow-primary-dark {
    position: relative;
    &:hover {
        background-color: var(--btn-hover-background);
        color: var(--btn-color-hover);
    }
}

.btn.-style-arrow::after,
.btn.-style-arrow-primary::after,
.btn.-style-arrow-secondary::after,
.btn.-style-arrow-light::after,
.btn.-style-arrow-primary-dark::after {
    content: "";
    color: var(--btn-color);
    background-color: var(--btn-background);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' viewBox='0 0 11 16'%3E%3Cpath fill='white' d='M.9 2.7v1.7h6.9L.2 12l1.2 1.2L9 5.7v6.9h1.7V2.7H.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 2px center;
    --corner-size: 1rem;
    clip-path: polygon(0% 0, 100% 0%, 100% calc(100% - var(--corner-size)), calc(100% - var(--corner-size)) 100%, 0 100%);
    width: 2rem;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(100% - 1px);
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.btn.-style-arrow:hover::after,
.btn.-style-arrow-primary:hover::after,
.btn.-style-arrow-secondary:hover::after,
.btn.-style-arrow-light:hover::after,
.btn.-style-arrow-primary-dark:hover::after {
    color: var(--btn-color-hover);
    background-color: var(--btn-hover-background);
}
.btn.-style-arrow-light::after {
    background-color: white;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' viewBox='0 0 11 16'%3E%3Cpath fill='black' d='M.9 2.7v1.7h6.9L.2 12l1.2 1.2L9 5.7v6.9h1.7V2.7H.9z'/%3E%3C/svg%3E");
}
.btn.-style-arrow-primary-dark {
    color: var(--bs-primary-light);
}
.btn.-style-arrow-primary-dark::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' viewBox='0 0 11 16'%3E%3Cpath fill='%234fad18' d='M.9 2.7v1.7h6.9L.2 12l1.2 1.2L9 5.7v6.9h1.7V2.7H.9z'/%3E%3C/svg%3E");
}

/* BUBBLE BUTTONS */
.bubble.-primary {
    background-color: var(--bs-primary);
}
.bubble.-secondary {
    background-color: var(--bs-secondary-dark);
}

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

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

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

/* SPACES */
.-space-pt-xxs { padding-top: 0.25rem !important; }
.-space-pb-xxs { padding-bottom: 0.5rem !important; }
.-space-ps-xxs { padding-left: 0.25rem !important; }
.-space-pe-xxs { padding-right: 0.25rem !important; }
.-space-py-xxs { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.-space-px-xxs { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }

.-space-mt-xxs { margin-top: 0.25rem !important; }
.-space-mb-xxs { margin-bottom: 0.5rem !important; }
.-space-ms-xxs { margin-left: 0.25rem !important; }
.-space-me-xxs { margin-right: 0.25rem !important; }
.-space-my-xxs { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.-space-mx-xxs { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }


/* BORDERS */
.border { border: 1px solid var(--bs-border) !important; }
.bg-dark .border,
.bg-extra-dark .border,
.bg-black .border,
.bg-primary .border,
.bg-primary-dark .border {
    border-color: var(--bs-primary-dark) !important;
}
.border-primary { border-color: var(--bs-primary) !important; }
.border-secondary { border-color:  var(--bs-secondary) !important; }
.border-light { border-color: var(--bs-light) !important; }
.border-dark { border-color: var(--bs-dark) !important; }
.border-extra-dark { border-color: var(--bs-extra-dark) !important; }

.inner-border,
.inner-border-primary,
.inner-border-secondary {
    position: relative;
    padding: 1rem;
}
.inner-border::after,
.inner-border-primary::after,
.inner-border-secondary::after {
    content: "";
    position: absolute;
    top: .5rem;
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    border: 2px solid var(--bs-border);
    pointer-events: none;
}
.inner-border-primary::after {
    border-color: var(--bs-primary);
}
.inner-border-secondary::after {
    border-color: var(--bs-secondary);
}
.inner-border-dark::after {
    border-color: var(--bs-dark);
}
.inner-border-light::after {
    border-color: var(--bs-light);
}
.inner-border-extra-dark::after {
    border-color: var(--bs-extra-dark);
}

/* HEADER */
.site-header__secondary__info .icon,
.site-header__main__search .control-group__icon .icon {
    color: var(--bs-primary);
}
.form-search input {
    background-color: white;
    border-color: var(--bs-primary);
}
.site-header__main__logo .link-logo img {
    width: 160px;
}
@media (width >= 768px) {
    .site-header__main__logo .link-logo img {
        width: 300px;
    }
}
@media (width < 1620px) {
    .site-header__main__logo .link-logo {
        max-width: 210px;
    }
}

/* MENU */
.site-header__navigation .navigation {
    background: linear-gradient(45deg, var(--bs-primary-dark), var(--bs-primary));
}
.site-header__navigation .navigation .navigation__menu .primary-menu > .menu-item {
    color: var(--bs-secondary);
    text-shadow: 0 0 3px black;
}
.navigation .catalog-menu__trigger.-is-active,
.navigation .catalog-menu__trigger:hover,
.navigation .primary-menu > .menu-item.-is-active > a,
.navigation .primary-menu > .menu-item > a:hover {
    background-color: var(--bs-primary);
}
.catalog-menu__list > .menu-item.-is-active > a,
.catalog-menu__list > .menu-item.-is-active > label,
.catalog-menu__list > .menu-item > a:hover,
.catalog-menu__list > .menu-item > label:hover
.catalog-mega-menu__content .list-menu .menu-item.-header {
    color: var(--bs-primary);
    transition: color 0.2s ease-in-out;
}
.link {
    border-color: var(--bs-primary);
}
.catalog-mega-menu__content .list-menu .menu-item.-header a {
    color: var(--bs-primary);
}
/* HERO CAROUSEL */
.hero-carousel .swiper-buttons .swiper-arrow {
    background-color: var(--bs-primary);
}
.hero-carousel .swiper-buttons .swiper-arrow:hover {
    background-color: var(--bs-primary-light);
}
.hero-carousel__slide__content .heading-block-title {
    color: var(--bs-secondary) !important;
    text-shadow: 0 0 10px black;
}
@media (min-width: 992px) {
    /*FIVE SUITABLE MARGIN TO THE HERO SECTION FOR FIXED MENU*/
    .site-header + section.section-hero-home > .container > .hero-carousel {
        margin-left: var(--site-catalog-menu-width);
    }

    .hero-carousel__slide__image {
        display: flex;
        align-items: center;
    }

    .hero-carousel__slide__image img {
        position: static;
        max-height: 300px;
    }
}

@media (min-width: 576px) {
    .hero-carousel .container {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}

/* PRODUCT PAGES */
.card-collection .icon svg {
    color: var(--bs-primary);
}
.product__gallery .gallery .swiper-slide .zoom {
    background-color: var(--bs-primary);
}

/* FOOTER */
.site-footer {
    background-color: var(--bs-primary-dark);
}
.site-footer__primary__menus__column > h2 {
    color: var(--bs-secondary);
    text-shadow: 0 0 3px black;
}