:root {
    /* PRIMARY COLORS */
    --bs-primary: #a98854;
    --bs-blue-dark: #283645;
    --bs-dark: #222222;

    /* ACCENT COLORS */
    --bs-blue: #024985;
    --bs-accent: var(--bs-blue);

    /* BORDER COLORS */
    --bs-border-color: rgba(0, 0, 0, 0.1);
}

/* TEXT */
h1, h2, h3, h4, h5, h6 {
    font-family: "DM Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

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

/* BACKGROUNDS */
.bg-primary { background-color: var(--bs-primary); }
.bg-blue-dark { background-color: var(--bs-blue-dark); }
.bg-dark { background-color: var(--bs-dark); }

/* BORDER COLORS */
.border { border: 1px solid var(--bs-border-color); }
.border-none { border: none; }
.border-primary { border-color: var(--bs-primary); }
.border-blue-dark { border-color: var(--bs-blue-dark); }
.border-dark { border-color: var(--bs-dark); }

/* LAYOUT */
.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (width >= 576px) {
    .grid-sm-1 { grid-template-columns: 1fr; }
    .grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-sm-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-sm-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-sm-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-sm-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (width >= 678px) {
    .grid-md-1 { grid-template-columns: 1fr; }
    .grid-md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-md-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-md-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-md-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (width >= 992px) {
    .grid-lg-1 { grid-template-columns: 1fr; }
    .grid-lg-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-lg-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-lg-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-lg-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (width >= 1200px) {
    .grid-xl-1 { grid-template-columns: 1fr; }
    .grid-xl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-xl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-xl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-xl-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-xl-6 { grid-template-columns: repeat(6, 1fr); }
}
@media (width >= 1640px) {
    .grid-xxl-1 { grid-template-columns: 1fr; }
    .grid-xxl-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-xxl-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-xxl-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-xxl-5 { grid-template-columns: repeat(5, 1fr); }
    .grid-xxl-6 { grid-template-columns: repeat(6, 1fr); }
}

/* BUTTONS */
.btn.-style-primary {
    --button-background: transparent;
    --button-hover-background: var(--bs-primary);
    --button-color: var(--bs-primary);
    --button-hover-color: #fff;
    border: 1px solid var(--bs-primary);
}
.btn.-style-arrow,
.btn.-style-arrow-primary,
.btn.-style-arrow-blue,
.btn.-style-arrow-light,
.hero-carousel .hero-carousel__slide__content .btn.-style-primary,
.contact-form .form-group.submit .btn.-style-primary {
    --button-arrow-background: transparent;
    --button-arrow-border-color: #000;
    --button-arrow-color: #000;
    position: relative;
    background-color: transparent;
    border: 1px solid var(--button-arrow-border-color);
    transition: all 0.25s ease;
    color: var(--button-arrow-color);
}
.btn.-style-arrow::after,
.btn.-style-arrow-primary::after,
.btn.-style-arrow-blue::after,
.btn.-style-arrow-light::after,
.hero-carousel .hero-carousel__slide__content .btn.-style-primary::after,
.contact-form .form-group.submit .btn.-style-primary::after {
    content: "";
    background: url(/media/pdfs/upload/arrow-icon.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translate(0%, -50%);
    width: 1em;
    height: 1em;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease-in;
    border-radius: 0;
}
.btn.-style-arrow:hover,
.btn.-style-arrow-primary:hover,
.btn.-style-arrow-blue:hover,
.btn.-style-arrow-light:hover,
.hero-carousel .hero-carousel__slide__content .btn.-style-primary:hover,
.contact-form .form-group.submit .btn.-style-primary:hover {
    padding-right: 3rem;
}
.btn.-style-arrow:hover::after,
.btn.-style-arrow-primary:hover::after,
.btn.-style-arrow-blue:hover::after,
.btn.-style-arrow-light:hover::after,
.hero-carousel .hero-carousel__slide__content .btn.-style-primary:hover::after,
.contact-form .form-group.submit .btn.-style-primary:hover::after {
    transform: translate(0.5rem, -50%);
    opacity: 1;
}
.btn.-style-arrow-primary {
    --button-arrow-background: transparent;
    --button-arrow-border-color: var(--bs-primary);
    --button-arrow-color: var(--bs-primary);

    &::after {
        filter: invert(0.46) sepia(44) saturate(1.5);
    }
}
.btn.-style-arrow-blue {
    --button-arrow-background: transparent;
    --button-arrow-border-color: var(--bs-blue);
    --button-arrow-color: var(--bs-blue);

    &::after {
        filter: invert(0.22) sepia(1) saturate(4.2) hue-rotate(172deg);
    }
}
.btn.-style-arrow-light {
    --button-arrow-background: transparent;
    --button-arrow-border-color: var(--bs-light);
    --button-arrow-color: var(--bs-light);

    &::after {
        filter: invert(1);
    }
}

/* HEADER */
.site-header {
    --header-color: var(--bs-dark);
    --header-background: #ffffff;
    background: #ffffff;
    color: var(--bs-dark);
}

.site-header > .container {
    max-width: 100%;
    padding: 0;
}

/* @media (width < 1200px) {
    .site-header {
        position: sticky;
        top: -8rem;
    }
} */

.site-header__secondary {
    background-color: var(--bs-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    height: var(--header-secondary-height);
    grid-template-areas: none;
    padding: 0 clamp(1rem, 2vw, 2rem);
}

@media (width < 1200px) {
    .site-header__secondary {
        justify-content: center;
    }
}

.site-header__secondary__info,
.site-header__secondary__info a {
    color: #ffffff;
    grid-area: unset;
}

.site-header__secondary__prices {
    grid-area: unset;
    margin-left: auto;
}

@media (width < 1200px) {
    .site-header__secondary__prices {
        display: none;
    }
}

.site-header__secondary__prices .spot-prices,
.site-header__secondary__prices .spot-prices * {
    color: #ffffff;
}

.site-header__divider {
    display: none;
}

/* Main area: logo centered above nav */
.site-header__main {
    height: auto;
    flex-wrap: wrap;
    justify-content: center;
    font-size: clamp(0.8rem, 1vw, 1rem);
}

/* Logo: full-width row, centered */
.site-header__main__logo {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-shrink: 1;
    padding: calc(1rem + 0.4vw) 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.site-header__main__logo .link-logo {
    max-width: clamp(180px, 25vw, 380px);
    max-height: clamp(100px, 20vh, 140px);
}
.site-header__main__logo .link-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Nav: compact, centered with actions */
.site-header__main__menu {
    flex-grow: 0;
}

.primary-menu > .menu-item > a {
    padding: 1.3rem 0;
}

@media (min-width: 992px) {
    .site-header__main__menu {
        display: flex;
        margin-right: 1.5rem;
    }
}
@media (min-width: 1440px) {
    .site-header__main__menu {
        display: flex;
        margin-right: 2.2rem;
    }
}

/* Actions: inline with nav, no left separator */
.site-header__main__actions {
    margin-left: 0;
}

.site-header__main__actions:before {
    display: none;
}

@media (width < 1200px) {
    .site-header__main__actions {
        padding: 0.5rem 0;
    }
}

.site-header .action {
    color: var(--bs-dark);
}

.mobile-menu {
    background: white;
    box-shadow: 0 0 2rem 0.4rem #000;
    color: var(--bs-dark);
}

/* HERO */
.section-hero {
    color: var(--bs-dark) !important;
}

@media (width >= 1200px) {
    .hero-carousel__slide {
        grid-template-columns: 1fr 1.5fr;
    }
}
@media (width >= 1800px) {
    .hero-carousel__slide {
        grid-template-columns: 1fr 1.3fr;
    }
    .hero-carousel .container {
        max-width: calc(100% - 20rem);
    }
}

.hero-carousel__slide__content .heading-block-title {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.hero-carousel .swiper .swiper-slide::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, white 0%, transparent 100%);
    pointer-events: none;
}
.hero-carousel__slide__content {
    z-index: 2;
}
@media (width < 768px) {
    .hero-carousel .swiper .swiper-slide::after {
        width: 100%;
        height: 70%;
        background: linear-gradient(180deg, white 0%, transparent 100%);
    }
}

.site-header ~ .section-hero .container:before,
.site-header ~ .section-page-hero .container:before {
    display: none;
}

.hero-carousel__slide__content .heading-block-title {
    font-family: "DM Sans", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 600;
}

/* .hero-carousel .hero-carousel__slide__content .btn.btn.-style-primary {
    --button-background: #fff;
} */

/* FOOTER */
.site-footer {
    background-color: var(--bs-blue-dark);
}
.site-footer__primary {
    display: grid;
    grid-template-columns: 1fr;
    font-size: 1rem;
}
.site-footer__primary .footer-contact-information {
    width: min(100%, 360px);
    max-width: unset;
    margin: unset;
    text-align: initial;
}

@media (width >= 992px) {
    .site-footer__primary {
        grid-template-columns: 45% 1fr;
    }
}
@media (width < 400px) {
    .site-footer__primary__menus {
        grid-template-columns: 1fr;
    }
}